@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/va9I4kzIxd1KFrBnQeNVkqDOeTY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/va9I4kzIxd1KFrBmQeNVkqDOeTY.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/va9I4kzIxd1KFrBoQeNVkqDO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/va9I4kzIxd1KFrBnQeNVkqDOeTY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/va9I4kzIxd1KFrBmQeNVkqDOeTY.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/va9I4kzIxd1KFrBoQeNVkqDO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/va9I4kzIxd1KFrBnQeNVkqDOeTY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/va9I4kzIxd1KFrBmQeNVkqDOeTY.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/va9I4kzIxd1KFrBoQeNVkqDO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Yeni Kocaeli  ·  KONTROL LISTESI
   Duzen mimarisi: sayfa bir surecin uzerinde yurur. Kart izgarasi yok.
   Ana bilesen dikey zaman cizgisi: sol kenarda surekli ray, ray uzerinde
   numarali daireler, sagda baslik ve aciklama. Kaydirdikca ray turuncuya doler.
   Numaralandirma yalnizca gercek bir sira oldugu icin var, sus degil.
   Turuncu = ilerleme ve numara. Lacivert = baglanti ve baslik. */

:root{
  --font-display:"Chivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Pantone 17-1463 Tangerine Tango */
  --brand:#DD4124;
  --brand-koyu:#A6321B;      /* metin icinde kontrast icin koyu tur */
  --lacivert:#1F4E79;        /* ikincil: baglanti ve baslik */
  --lacivert-koyu:#14344f;
  --bg:#FFF8F5; --kagit:#FFFFFF;
  --ink:#241310; --ink-2:#5A423B; --ink-3:#8C7169;
  --cizgi:#EBD9D1; --cizgi-koyu:#D9BFB4;
  --link:#1F4E79; --focus:#DD4124;

  --wrap:72rem; --dar:44rem;
  --h1-w:900;
  --ray:2px;                 /* zaman cizgisinin kalinligi */
  --daire:3rem;              /* numarali dairenin capi */
}

.ilerleme{background:var(--brand)}

/* --- Baslik cubugu: yapiskan, ince, alt kurali olan bir mastar --- */
.chrome{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  border-bottom:1px solid var(--cizgi);
}
.chrome .bar{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-3) 0}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:var(--font-display);font-weight:900;font-size:1.08rem;
  letter-spacing:-.025em;color:var(--ink)}
.brand .mark{color:var(--brand);flex:none}
.nav{display:flex;gap:var(--space-5);margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--ink-2);text-decoration:none;font-size:.9rem;font-weight:500}
.nav a:hover{color:var(--brand-koyu)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--brand);
  text-decoration-thickness:2px;text-underline-offset:.4em}
.navtoggle{display:none;margin-left:auto;background:none;border:0;color:var(--ink);
  padding:var(--space-2);cursor:pointer;line-height:0}

/* --- Hero: solda adim gostergesi, sagda dev manset. Fotograf basligin arkasinda degil --- */
.mans{padding:var(--space-8) 0 var(--space-7)}
.mans-ic{display:grid;grid-template-columns:14rem 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}

.olcek{border-top:3px solid var(--brand);padding-top:var(--space-4)}
.olcek-sayi{display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(4rem,3rem + 5vw,7.5rem);line-height:.82;letter-spacing:-.05em;color:var(--brand)}
.olcek-ad{display:block;margin-top:var(--space-3);font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
/* Yedi cizik: surecin kac parcadan olustugunu gosteren gorsel sayac */
.olcek-ciz{display:flex;gap:.3rem;margin-top:var(--space-4)}
.olcek-ciz span{flex:1;height:.55rem;background:var(--brand);opacity:.22;border-radius:1px}
.olcek-ciz span:first-child{opacity:1}
.olcek p{margin:var(--space-4) 0 0;font-size:.92rem;color:var(--ink-2);max-width:22ch}

.mans h1{margin:0;max-width:15ch;color:var(--ink)}
.mans h1 em{font-style:normal;color:var(--brand)}
.mans .lede{margin-top:var(--space-5);color:var(--ink-2)}
.baslat{display:inline-flex;align-items:center;gap:.6rem;margin-top:var(--space-5);
  background:var(--brand);color:#fff;text-decoration:none;
  font-weight:700;font-size:1rem;padding:.9rem 1.5rem;border-radius:2px;
  box-shadow:0 1px 0 var(--brand-koyu)}
.baslat:hover{background:var(--brand-koyu)}
.baslat svg{flex:none}

/* --- Tam genislikte fotograf seridi. Hero'nun altinda, basligi ortmez --- */
.foto-serit{margin:var(--space-7) 0 0;border-top:1px solid var(--cizgi);
  border-bottom:1px solid var(--cizgi);background:var(--kagit)}
.foto-serit img{width:100%;aspect-ratio:24/7;object-fit:cover;object-position:center 58%}
.foto-serit figcaption{width:min(100% - var(--space-5)*2,var(--wrap));margin:0 auto;
  padding:var(--space-3) 0;color:var(--ink-3)}

/* --- Bolum basligi: numarali etiket + uzun kural --- */
.bolum{padding:var(--space-8) 0 var(--space-7)}
.bolum-ust{display:flex;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-6);
  border-bottom:1px solid var(--cizgi);padding-bottom:var(--space-4)}
.bolum-ust h2{margin:0}
.bolum-ust .etiket{margin-left:auto;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);white-space:nowrap}
.bolum>.lede{margin-bottom:var(--space-7)}

/* --- DIKEY ZAMAN CIZGISI: sitenin ana ritmi --- */
.zaman-kap{position:relative}
.zaman{position:relative;list-style:none;margin:0;padding:0}
/* sonuk ray: bastan sona surekli */
.zaman::before{content:"";position:absolute;left:calc(var(--daire)/2 - var(--ray)/2);
  top:calc(var(--daire)/2);bottom:calc(var(--daire)/2);width:var(--ray);background:var(--cizgi-koyu)}
/* dolan ray: kaydirdikca turuncuya doner. JS yoksa gorunmez, icerik etkilenmez */
.zaman-dolgu{position:absolute;left:calc(var(--daire)/2 - var(--ray)/2);
  top:calc(var(--daire)/2);height:calc(100% - var(--daire));width:var(--ray);
  background:var(--brand);transform:scaleY(0);transform-origin:top center;z-index:1}

.zaman li{position:relative;display:grid;
  grid-template-columns:var(--daire) 1fr;gap:var(--space-5);
  padding-bottom:var(--space-7)}
.zaman li:last-child{padding-bottom:0}
.zaman-no{position:relative;z-index:2;width:var(--daire);height:var(--daire);
  display:grid;place-items:center;border-radius:50%;
  background:var(--kagit);border:2px solid var(--cizgi-koyu);
  font-family:var(--font-display);font-weight:900;font-size:1.02rem;
  color:var(--lacivert);font-variant-numeric:tabular-nums;
  transition:border-color 200ms ease,color 200ms ease}
.zaman-metin{padding-top:.35rem}
.zaman-metin h3{margin:0 0 var(--space-2);font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem)}
.zaman-metin h3 a{color:var(--lacivert);text-decoration:none}
.zaman-metin h3 a:hover{color:var(--brand-koyu);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:.2em}
.zaman-metin p{margin:0;color:var(--ink-2);max-width:56ch}
.zaman li:hover .zaman-no{border-color:var(--brand);color:var(--brand)}

/* --- Kontrol listesi: CSS ile cizilmis bos kutular. Gorsel, etkilesimli degil --- */
.kontrol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:0 var(--space-7)}
.kontrol li{position:relative;padding:var(--space-3) 0 var(--space-3) 2.4rem;
  border-bottom:1px solid var(--cizgi);color:var(--ink);font-weight:500}
.kontrol li::before{content:"";position:absolute;left:0;top:1.05rem;
  width:1.15rem;height:1.15rem;border:2px solid var(--brand);border-radius:2px;background:var(--kagit)}
.kontrol-not{margin-top:var(--space-5);font-size:.92rem;color:var(--ink-2)}

/* --- Duz yazi sayfalari --- */
.prose{padding:var(--space-7) 0 var(--space-8)}
.prose h1{max-width:20ch;font-size:clamp(2.1rem,1.5rem + 2.6vw,3.5rem)}
.prose h2{margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px solid var(--cizgi);
  color:var(--lacivert-koyu);position:relative}
.prose h2::before{content:"";position:absolute;top:-2px;left:0;width:3.5rem;height:3px;background:var(--brand)}
.prose h1+.lede{margin-bottom:var(--space-6)}
.prose p{color:var(--ink-2)}
.prose a{color:var(--link);text-decoration-color:var(--cizgi-koyu)}
.prose a:hover{color:var(--brand-koyu);text-decoration-color:var(--brand)}

/* Adim listesi: ana sayfadaki zaman cizgisinin ic sayfa karsiligi */
.steps{list-style:none;counter-reset:adim;margin:var(--space-7) 0;padding:0;position:relative}
.steps::before{content:"";position:absolute;left:calc(var(--daire)/2 - var(--ray)/2);
  top:calc(var(--daire)/2);bottom:calc(var(--daire)/2);width:var(--ray);background:var(--cizgi-koyu)}
.steps li{position:relative;counter-increment:adim;
  display:grid;grid-template-columns:var(--daire) 1fr;gap:var(--space-5);
  padding-bottom:var(--space-6)}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(adim,decimal-leading-zero);
  position:relative;z-index:2;width:var(--daire);height:var(--daire);
  display:grid;place-items:center;border-radius:50%;
  background:var(--kagit);border:2px solid var(--brand);
  font-family:var(--font-display);font-weight:900;font-size:1rem;color:var(--brand);
  font-variant-numeric:tabular-nums;grid-column:1;grid-row:1 / span 2;align-self:start}
/* adimlar() <li> icinde h3 ve p'yi sarmalamaz, ikisi de sag sutuna elle yerlesir */
.steps h3{grid-column:2;grid-row:1;margin:.3rem 0 var(--space-2);color:var(--lacivert-koyu)}
.steps li>p{grid-column:2;grid-row:2;margin:0;color:var(--ink-2)}

/* Soru cevap: kart degil, kural cizgisiyle ayrilmis bloklar */
.qa{padding:var(--space-5) 0;border-top:1px solid var(--cizgi)}
.qa h3{margin:0 0 var(--space-2);color:var(--lacivert-koyu)}
.qa p{margin:0;color:var(--ink-2)}

/* Uyari ve ilgili sayfalar: kutu degil, turuncu kenar kurali */
.callout{border-left:3px solid var(--brand);background:var(--kagit);
  padding:var(--space-4) var(--space-5);margin:var(--space-7) 0;max-width:var(--measure)}
.callout p{margin:0;color:var(--ink-2);font-size:.95rem}

/* --- Kirinti ve alt bilgi --- */
.crumbs{padding:var(--space-5) 0 0;font-size:.85rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
footer{margin-top:var(--space-8);background:var(--lacivert);color:rgba(255,255,255,.78);
  padding:var(--space-8) 0;border-top:4px solid var(--brand)}
footer a{color:#fff}
footer p{max-width:64ch;font-size:.88rem}
.footlinks{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);
  margin-bottom:var(--space-5);padding-bottom:var(--space-5);
  border-bottom:1px solid rgba(255,255,255,.2)}
.footlinks a{text-decoration:none;font-size:.92rem}
.footlinks a:hover{text-decoration:underline}

/* --- Dar ekran --- */
@media (max-width:64rem){
  .mans-ic{grid-template-columns:1fr;gap:var(--space-6)}
  .olcek{display:grid;grid-template-columns:auto 1fr;gap:0 var(--space-4);align-items:baseline}
  .olcek-sayi{font-size:clamp(3.4rem,2rem + 8vw,5rem)}
  .olcek-ad{margin-top:0}
  .olcek-ciz{grid-column:1/-1;margin-top:var(--space-4)}
  .olcek p{grid-column:1/-1}
  .mans h1{max-width:none}
}
@media (max-width:46rem){
  :root{--daire:2.5rem}
  .chrome .bar{flex-wrap:wrap}                 /* menu alt satira insin */
  .navtoggle{display:inline-flex}
  .nav{flex-basis:100%;margin-left:0;flex-direction:column;gap:0;overflow:hidden;height:0}
  .nav a{padding:var(--space-3) 0;border-top:1px solid var(--cizgi);font-size:1.02rem}
  html.no-js .nav{height:auto}
  .mans{padding:var(--space-6) 0 var(--space-5)}
  .foto-serit img{aspect-ratio:16/9}
  .zaman li,.steps li{gap:var(--space-4)}
  .kontrol{gap:0}
}