@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/ortak/f/hanken-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/ortak/f/hanken-latin.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; }
:root { --beyaz: #fff; --zemin2: #F4F4F6; --murekkep: #0B0B0F; --orta: #5B5E66; --cizgi: #E3E3E8; --mavi: #0A64F0; --mavi-acik: #7CC8FF; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--beyaz); color: var(--murekkep); font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p, figure, ol { margin: 0; padding: 0; }
.ic { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
.atla { position: absolute; left: -999px; top: 8px; background: var(--murekkep); color: #fff; padding-block: 10px; padding-inline: 14px; z-index: 5; }
.atla:focus { left: 8px; }

/* köşe işareti: markanın tek motifi (logo, yüz çerçevesi, düğme) */
.kose { --v: var(--murekkep); --u: 12px; --k: 2px; background:
  linear-gradient(var(--v), var(--v)) left top / var(--u) var(--k) no-repeat, linear-gradient(var(--v), var(--v)) left top / var(--k) var(--u) no-repeat,
  linear-gradient(var(--v), var(--v)) right top / var(--u) var(--k) no-repeat, linear-gradient(var(--v), var(--v)) right top / var(--k) var(--u) no-repeat,
  linear-gradient(var(--v), var(--v)) left bottom / var(--u) var(--k) no-repeat, linear-gradient(var(--v), var(--v)) left bottom / var(--k) var(--u) no-repeat,
  linear-gradient(var(--v), var(--v)) right bottom / var(--u) var(--k) no-repeat, linear-gradient(var(--v), var(--v)) right bottom / var(--k) var(--u) no-repeat; }

.logo { display: inline-flex; align-items: center; min-height: 44px; gap: 0; font-weight: 800; font-size: 23px; letter-spacing: -0.035em; line-height: 1; text-decoration: none; color: var(--murekkep); white-space: nowrap; }
.logo .cer { position: relative; display: inline-block; width: 0.6em; height: 1.4em; margin-inline-end: 0.015em; --u: 0.17em; --k: 0.07em; }
.logo .cer b { position: absolute; left: 50%; bottom: 0.4em; width: 0.2em; height: 0.5em; margin-left: -0.1em; background: currentColor; }
.logo .cer b::before { content: ""; position: absolute; left: 50%; top: -0.29em; width: 0.22em; height: 0.22em; margin-left: -0.11em; border-radius: 50%; background: var(--mavi); }

.ust .ic { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.ust nav { display: flex; gap: 4px; }
.ust nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; text-decoration: none; font-size: 16px; font-weight: 600; }
.ust nav .genis, .ust nav .genis-yazi { display: none; }

.dugme { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding-inline: 18px; background: var(--mavi); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; border-radius: 10px; white-space: nowrap; transition: transform 0.15s ease; }
.dugme.koyu { background: var(--murekkep); }
.dugme::before { content: ""; position: absolute; inset: 6px; pointer-events: none; opacity: 0.5; --v: #fff; --u: 9px; --k: 1.5px; transition: inset 0.18s ease, opacity 0.18s ease; background:
  linear-gradient(var(--v), var(--v)) left top / var(--u) var(--k) no-repeat, linear-gradient(var(--v), var(--v)) left top / var(--k) var(--u) no-repeat,
  linear-gradient(var(--v), var(--v)) right top / var(--u) var(--k) no-repeat, linear-gradient(var(--v), var(--v)) right top / var(--k) var(--u) no-repeat,
  linear-gradient(var(--v), var(--v)) left bottom / var(--u) var(--k) no-repeat, linear-gradient(var(--v), var(--v)) left bottom / var(--k) var(--u) no-repeat,
  linear-gradient(var(--v), var(--v)) right bottom / var(--u) var(--k) no-repeat, linear-gradient(var(--v), var(--v)) right bottom / var(--k) var(--u) no-repeat; }
.dugme:hover::before, .dugme:focus-visible::before { inset: 9px; opacity: 1; }
.dugme:active { transform: scale(0.98); }
.yuvarlak { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; transition: background-color 0.15s ease; }
.yuvarlak:hover { background: rgba(255, 255, 255, 0.12); }
.yuvarlak svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.yuvarlak[data-durum="oynuyor"] .oyn, .yuvarlak[data-durum="durdu"] .dur { display: none; }
.yuvarlak[aria-pressed="true"] .carpi, .yuvarlak[aria-pressed="false"] .dalga { display: none; }

/* açılış */
.acilis { padding-block: 4px 44px; }
.acilis h1 { font-size: clamp(2.5rem, 12.2vw, 5rem); line-height: 0.96; letter-spacing: -0.047em; font-weight: 800; margin-block-end: 12px; }
.acilis h1 span { display: block; }
.acilis .alt { font-size: 1.12rem; line-height: 1.32; color: var(--orta); margin-block-end: 18px; }
.acilis .alt span, .acilis .alt strong { display: block; }
.acilis .alt strong { color: var(--murekkep); font-weight: 700; }
.dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-end: 22px; }

.cihaz { background: var(--murekkep); border-radius: 14px; overflow: hidden; color: #fff; }
.ekran { position: relative; aspect-ratio: 10 / 11; overflow: hidden; background: #1a1a1f; }
.ekran video, .ekran img, .ekran canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ekran video, .ekran img { object-fit: cover; object-position: 50% 36%; filter: brightness(0.8) saturate(0.92); }
.ilerleme { display: block; height: 2px; width: 0; background: var(--mavi-acik); }
.kumanda { display: flex; align-items: center; gap: 10px; min-height: 56px; padding-inline: 12px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.kumanda .saat { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kumanda .sure { font-size: 15px; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.kumanda .sagda { margin-inline-start: auto; }
.gosterge { padding-block: 4px 8px; padding-inline: 14px; }
.gosterge > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; min-height: 46px; border-top: 1px solid rgba(255, 255, 255, 0.13); }
.gosterge > div:first-child { border-top: 0; }
.gosterge b { font-size: 15px; font-weight: 700; }
.gosterge .deger { font-size: 15px; color: rgba(255, 255, 255, 0.86); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gosterge .sesr { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.gosterge .sesr svg { display: block; width: 100%; height: 32px; overflow: visible; }
.gosterge .sesr .deger { text-align: right; }
.gosterge .sozr { font-size: 16px; line-height: 1.35; padding-block: 8px; }
.gosterge .sozr span { padding-inline: 2px; border-radius: 2px; }
.canli .gosterge .sozr span { color: rgba(255, 255, 255, 0.42); transition: color 0.12s; }
.canli .gosterge .sozr span.gecti { color: #fff; }
.canli .gosterge .sozr span.simdi { color: var(--murekkep); background: var(--mavi-acik); }
.okuma figcaption { font-size: 15px; color: var(--orta); margin-block-start: 10px; }

/* bölümler */
.bolum { padding-block: 64px; }
.bolum h2 { font-size: clamp(1.95rem, 7.4vw, 3.5rem); line-height: 1.02; letter-spacing: -0.042em; font-weight: 800; margin-block-end: 12px; }
.bolum .giris { font-size: 1.1rem; color: var(--orta); max-width: 30em; }

.mod { display: inline-flex; background: var(--zemin2); border-radius: 12px; padding: 4px; gap: 4px; margin-block: 16px 12px; }
.mod button { min-height: 44px; padding-inline: 18px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--orta); cursor: pointer; }
.mod button[aria-pressed="true"] { background: var(--murekkep); color: #fff; }
.gezgin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sahne { position: relative; aspect-ratio: 720 / 870; width: 100%; max-width: calc(45svh * 720 / 870); margin-inline: auto; border-radius: 12px; overflow: hidden; background: #1a1a1f; }
.sahne img, .sahne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sahne .iz-tuval { transition: opacity 0.25s ease; }
.gezgin[data-mod="ciplak"] .sahne .iz-tuval { opacity: 0; }
.pano { transition: opacity 0.25s ease, filter 0.25s ease; }
.gezgin[data-mod="ciplak"] .pano .izler { opacity: 0.22; filter: grayscale(1); }
.pbas { display: flex; align-items: center; gap: 10px; min-height: 50px; }
.pbas .yuvarlak { color: var(--murekkep); border-color: #C6C6CE; }
.pbas .yuvarlak:hover { background: var(--zemin2); }
.pbas .saat { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pbas .sure { font-size: 15px; color: var(--orta); font-variant-numeric: tabular-nums; }
.pbas .ipucu { margin-inline-start: auto; font-size: 15px; color: var(--orta); text-align: right; }
.izler { position: relative; touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; padding-block-end: 32px; border-bottom: 1px solid var(--cizgi); }
.iz { border-top: 1px solid var(--cizgi); padding-block: 6px 4px; }
.iz .ib { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.iz .ib b { font-weight: 700; }
.iz .ib span { color: var(--murekkep); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iz svg { display: block; width: 100%; height: 30px; overflow: visible; margin-block-start: 2px; }
.iz .c { fill: none; stroke: var(--murekkep); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.iz .olay { stroke: var(--mavi); stroke-width: 2; vector-effect: non-scaling-stroke; }
.iz .kirp { stroke: var(--murekkep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.iz .sifir { stroke: #CFCFD6; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.iz .blok { fill: var(--murekkep); opacity: 0.16; }
.iz .blok.simdi { fill: var(--mavi); opacity: 1; }
.imlec { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--mavi); pointer-events: none; }
.imlec::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--mavi); box-shadow: 0 0 0 5px rgba(10, 100, 240, 0.16); }
.izler:focus-within .imlec::after { box-shadow: 0 0 0 5px rgba(10, 100, 240, 0.4); }
.gizli { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; }
.sen .ozet { margin-block-start: 16px; font-size: 15px; color: var(--orta); }

.kalip { background: var(--zemin2); }
.uc { margin-block-start: 30px; }
.uc > div { border-top: 1px solid #D5D5DC; padding-block: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.uc b { font-size: 15px; font-weight: 700; color: var(--mavi); }
.uc p { font-size: clamp(1.3rem, 5.2vw, 2.1rem); line-height: 1.16; letter-spacing: -0.03em; font-weight: 700; }
.uc p time { font-variant-numeric: tabular-nums; color: var(--orta); font-weight: 600; }
.kalip .son { margin-block-start: 22px; font-size: 1.1rem; color: var(--orta); }
.js [data-gor] .uc > div { opacity: 0; transform: translateY(12px); }
.js [data-gor].gorundu .uc > div { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.js [data-gor].gorundu .uc > div:nth-child(2) { transition-delay: 0.18s; }
.js [data-gor].gorundu .uc > div:nth-child(3) { transition-delay: 0.36s; }

.liste { list-style: none; margin-block-start: 28px; border-bottom: 1px solid var(--cizgi); }
.liste a { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; padding-block: 14px; border-top: 1px solid var(--cizgi); text-decoration: none; }
.liste .kucuk { grid-row: 1 / span 2; position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #1a1a1f; }
.liste .kucuk img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.86) saturate(0.94); }
.liste .kucuk i { position: absolute; --v: #fff; --u: 8px; --k: 2px; transition: transform 0.2s ease; }
.liste a:hover .kucuk i { transform: scale(0.92); }
.liste strong { align-self: end; }
.liste .kn { align-self: start; }
.liste strong { font-size: 1.22rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; }
.liste .kn { font-size: 15px; color: var(--orta); }
.liste a:hover strong { text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gundem .not { font-size: 15px; color: var(--orta); margin-block-start: 12px; }

.iki .ic { display: grid; grid-template-columns: minmax(0, 1fr); }
.iki .yari { padding-block: 34px; border-top: 1px solid var(--cizgi); }
.iki h2 { margin-block-end: 10px; }
.iki p { font-size: 1.1rem; color: var(--orta); max-width: 24em; margin-block-end: 24px; }
.iki .dugme { min-width: 190px; }

.alt-bolum { border-top: 1px solid var(--cizgi); padding-block: 34px 44px; }
.alt-bolum .ic { display: grid; gap: 16px; }
.alt-bolum p { color: var(--orta); font-size: 15px; max-width: 34em; }
.alt-bolum nav { display: flex; gap: 6px; margin-inline-start: -10px; }
.alt-bolum nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; font-size: 16px; font-weight: 600; text-decoration: none; }

@media (min-width: 960px) {
  body { font-size: 18px; }
  .ic { padding-inline: 40px; }
  .logo { font-size: 26px; }
  .ust .ic { min-height: 76px; }
  .ust nav { gap: 14px; }
  .ust nav .genis { display: inline-flex; }
  .ust nav .genis-yazi { display: inline; }
  .ust nav .dar-yazi { display: none; }
  .acilis { padding-block: 34px 90px; }
  .acilis .ic { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; }
  .acilis h1 span { white-space: nowrap; }
  .acilis h1 { margin-block-end: 22px; }
  .acilis .alt { font-size: 1.5rem; line-height: 1.26; margin-block-end: 34px; letter-spacing: -0.015em; }
  .dugmeler { grid-template-columns: repeat(2, minmax(0, 210px)); gap: 14px; margin-block-end: 0; }
  .okuma { width: 100%; }
  .ekran { aspect-ratio: 5 / 6; }
  .gosterge { padding-inline: 18px; }
  .gosterge > div { grid-template-columns: 70px minmax(0, 1fr); min-height: 50px; }
  .gosterge b, .gosterge .deger { font-size: 16px; }
  .gosterge .sozr { font-size: 17px; }
  .bolum { padding-block: 120px; }
  .gezgin { grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: center; margin-block-start: 8px; }
  .sahne { max-width: none; }
  .iz svg { height: 52px; }
  .iz { padding-block: 12px 10px; }
  .iz .ib { font-size: 16px; }
  .uc { margin-block-start: 48px; }
  .uc > div { grid-template-columns: 240px minmax(0, 1fr); align-items: baseline; padding-block: 28px; }
  .uc b { font-size: 17px; }
  .liste a { grid-template-columns: 128px minmax(0, 1fr) auto; column-gap: 34px; align-items: center; padding-block: 18px; }
  .liste .kucuk { grid-row: auto; }
  .liste .kucuk i { --u: 12px; }
  .liste strong, .liste .kn { align-self: center; }
  .liste .kn { font-size: 16px; }
  .liste strong { font-size: 1.7rem; }
  .iki .ic { grid-template-columns: 1fr 1fr; }
  .iki .yari { padding-block: 0; border-top: 0; }
  .iki .yari + .yari { border-inline-start: 1px solid var(--cizgi); padding-inline-start: 64px; }
  .iki .yari:first-child { padding-inline-end: 64px; }
  .alt-bolum .ic { grid-template-columns: 1fr auto; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-gor] .uc > div { opacity: 1; transform: none; }
}

/* ================= iç sayfalar (okuma, liste, belge). Taban: ana sayfanın biçimi (anasayfa/kur.py). ================= */
.logo svg { display: block; height: 31px; width: auto; }
.ust nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.alt-bolum nav { flex-wrap: wrap; }
.alt-bolum .sirket { font-size: 15px; color: var(--orta); max-width: none; margin-block-start: 8px; }
.alt-bolum .sirket a { display: inline-flex; align-items: center; min-height: 44px; color: var(--murekkep); font-weight: 600; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.sayfa-bas { padding-block: 14px 30px; }
.ust-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 15px; color: var(--orta); margin-block-end: 12px; }
.ust-satir a { display: inline-flex; align-items: center; min-height: 44px; color: var(--murekkep); font-weight: 600; text-decoration: none; }
.ust-satir a:hover { text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sayfa-bas h1 { font-size: clamp(2.05rem, 9vw, 3.9rem); line-height: 1; letter-spacing: -0.045em; font-weight: 800; margin-block-end: 16px; text-wrap: balance; max-width: 17em; }
.sayfa-bas .ozet { font-size: 1.14rem; line-height: 1.42; max-width: 36em; }
.sayfa-bas .kunye-satiri { font-size: 15px; color: var(--orta); margin-block-start: 14px; max-width: 44em; }
.sayfa-bas .kunye-satiri a { color: var(--murekkep); text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* okuma ekranı: yalnız ölçüm noktaları (kaynak görüntü barındırılmaz) */
.os-ekran { padding-block: 0 44px; }
.os-ekran .mod { margin-block: 0 14px; max-width: 100%; overflow-x: auto; }
.os-ekran .mod button { white-space: nowrap; padding-inline: 14px; }
.yalin .sahne { aspect-ratio: var(--oran, 1); max-width: calc(46svh * var(--oran, 1)); background: var(--murekkep); }
html:not(.js) .yalin .sahne { display: none; }
.sahne .sahne-not { position: absolute; left: 12px; top: 9px; margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); pointer-events: none; }
.js .gezgin[hidden] { display: none; }
html:not(.js) .gezgin[hidden] { display: grid; }
.pbas .kaynak { margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--murekkep); text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
.izler.isaretli { padding-block-start: 34px; }
.isaretler { position: absolute; left: 0; right: 0; top: 0; bottom: 32px; overflow: hidden; pointer-events: none; }
.gi { position: absolute; top: 0; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--mavi); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; display: grid; place-items: center; text-decoration: none; z-index: 1; pointer-events: auto; }
.gi::after { content: ""; position: absolute; inset: -8px; }
.gi::before { content: ""; position: absolute; left: 50%; top: 28px; width: 1px; height: 400px; background: rgba(10, 100, 240, 0.28); pointer-events: none; }
.iz .sus { fill: var(--murekkep); opacity: 0.1; }
.pano .aciklama { margin-block-start: 14px; font-size: 15px; color: var(--orta); }
.bolum-adi { font-size: 15px; font-weight: 700; margin-block-end: 6px; }
.js .bolum-adi { display: none; }

/* ölçümler */
.os-bolum { padding-block: 44px; border-top: 1px solid var(--cizgi); }
.os-bolum > .ic > h2 { font-size: clamp(1.7rem, 6.6vw, 2.6rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 800; margin-block-end: 6px; }
.os-bolum > .ic > .giris { color: var(--orta); max-width: 34em; font-size: 1.05rem; }
.sayilar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin: 26px 0 0; }
.sayilar div { display: flex; flex-direction: column-reverse; gap: 6px; }
.sayilar dt { font-size: 15px; line-height: 1.3; color: var(--orta); }
.sayilar dd { margin: 0; font-size: clamp(2rem, 9.4vw, 3.4rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sayilar dd small { font-size: max(15px, 0.4em); font-weight: 600; letter-spacing: -0.01em; color: var(--orta); margin-inline-start: 0.2em; }
.kiyas-sar { margin-block-start: 30px; overflow-x: auto; }
table.kiyas { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 1rem; }
.kiyas caption { text-align: left; font-size: 15px; color: var(--orta); padding-block-end: 10px; }
.kiyas th, .kiyas td { text-align: right; padding-block: 12px; padding-inline: 8px; border-top: 1px solid var(--cizgi); vertical-align: baseline; }
.kiyas th:first-child, .kiyas td:first-child { text-align: left; padding-inline-start: 0; font-weight: 400; }
.kiyas thead th { font-size: 15px; font-weight: 700; border-top: 0; vertical-align: bottom; line-height: 1.2; }
.kiyas td { font-weight: 700; }
.kiyas td.one { color: var(--mavi); }
.kiyas tbody tr:last-child td, .kiyas tbody tr:last-child th { border-bottom: 1px solid var(--cizgi); }

/* gözlemler */
.gozlem { padding-block: 34px; border-top: 1px solid var(--cizgi); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; scroll-margin-top: 12px; }
.gozlem:first-of-type { margin-block-start: 24px; }
.g-ust { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--orta); min-height: 44px; }
.g-no { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--mavi); color: #fff; font-weight: 700; font-size: 15px; line-height: 1; display: grid; place-items: center; }
.g-ust b { color: var(--murekkep); font-weight: 700; }
.g-ust a { margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--murekkep); font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
.gozlem h3 { font-size: clamp(1.5rem, 5.9vw, 2.2rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; margin: 0; }
.g-kare { margin: 0; }
.g-kare img { display: block; width: 100%; max-width: 440px; height: auto; border-radius: 12px; background: #1a1a1f; }
.g-kare figcaption { font-size: 15px; color: var(--orta); margin-block-start: 8px; }
.uc.metin { margin-block-start: 0; }
.uc.metin > div { padding-block: 14px; gap: 4px; border-top-color: var(--cizgi); }
.uc.metin > div:first-child { border-top: 0; padding-block-start: 0; }
.uc.metin p, .uc.metin li { font-size: 1.06rem; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
.uc.metin ul { margin: 0; padding-inline-start: 1.15em; display: grid; gap: 6px; }

/* kaynak video ve yöntem */
.kaynak-video { position: relative; aspect-ratio: 16 / 9; margin-block-start: 22px; background: var(--murekkep); border-radius: 12px; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 12px; padding: 20px; color: #fff; text-align: center; }
.kaynak-video p { font-size: 15px; color: rgba(255, 255, 255, 0.72); max-width: 26em; }
.kaynak-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kaynak-video .dugme { border: 0; cursor: pointer; font-family: inherit; }
html:not(.js) .kaynak-video .dugme { display: none; }
.duz { margin-block-start: 18px; display: grid; gap: 12px; max-width: 40em; }
.duz p, .duz li { font-size: 1.06rem; line-height: 1.55; }
.duz a, .belge a { color: var(--murekkep); text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.duz ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.duz ul a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.hakem-satiri { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 700; margin-block-start: 6px; }
.hakem-satiri span { display: inline-flex; align-items: center; gap: 8px; }
.hakem-satiri span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mavi); }

/* belge sayfaları (yöntem, künye, koşullar) ve liste sayfaları */
.belge { padding-block: 0 64px; }
.belge .ic > * { max-width: 40rem; }
.belge h2 { font-size: clamp(1.45rem, 5.4vw, 2rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; margin-block: 44px 10px; scroll-margin-top: 12px; }
.belge h3 { font-size: 1.15rem; letter-spacing: -0.02em; font-weight: 700; margin-block: 26px 6px; }
.belge p, .belge li { font-size: 1.06rem; line-height: 1.6; }
.belge p + p { margin-block-start: 12px; }
.belge ul, .belge ol { margin-block: 10px; padding-inline-start: 1.2em; display: grid; gap: 6px; }
.belge code { font-family: inherit; font-weight: 600; }
.belge table { border-collapse: collapse; width: 100%; margin-block: 14px; }
.belge th, .belge td { text-align: left; padding-block: 10px; padding-inline: 0 12px; border-top: 1px solid var(--cizgi); vertical-align: top; font-size: 1rem; }
.liste-sayfa { padding-block: 0 64px; }
.liste-sayfa .liste { margin-block-start: 8px; }
.sozluk-liste { margin: 8px 0 0; border-bottom: 1px solid var(--cizgi); }
.sozluk-liste > div { padding-block: 16px; border-top: 1px solid var(--cizgi); display: grid; gap: 4px; }
.sozluk-liste dt a { font-size: 1.22rem; letter-spacing: -0.025em; font-weight: 700; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.sozluk-liste dt a:hover { text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sozluk-liste dd { margin: 0; color: var(--orta); max-width: 40em; }
.belge .adimlar { counter-reset: adim; list-style: none; margin: 26px 0 0; padding: 0; gap: 0; border-bottom: 1px solid var(--cizgi); max-width: none; }
.adimlar li { counter-increment: adim; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding-block: 18px; border-top: 1px solid var(--cizgi); font-size: clamp(1.2rem, 4.8vw, 1.7rem); line-height: 1.2; letter-spacing: -0.03em; font-weight: 700; }
.adimlar li::before { content: counter(adim); font-variant-numeric: tabular-nums; color: var(--mavi); }
.adimlar li span { grid-column: 2; font-size: 1.02rem; line-height: 1.5; letter-spacing: 0; font-weight: 400; color: var(--orta); margin-block-start: 4px; }
.cagri { margin-block-start: 28px; display: grid; gap: 12px; justify-items: start; }
.cagri p { color: var(--orta); font-size: 15px; max-width: 30em; }
.liste .kucuk.bos { display: grid; place-items: center; }

@media (min-width: 960px) {
  .logo svg { height: 35px; }
  .sayfa-bas { padding-block: 26px 56px; }
  .sayfa-bas .ozet { font-size: 1.32rem; }
  .os-ekran { padding-block: 0 96px; }
  .os-bolum { padding-block: 88px; }
  .sayilar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; margin-block-start: 40px; }
  .sayilar dd { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
  .kiyas-sar { margin-block-start: 48px; max-width: 860px; }
  .yalin .sahne { max-width: none; }
  table.kiyas { font-size: 1.05rem; }
  .gozlem { grid-template-columns: 380px minmax(0, 1fr); column-gap: 64px; padding-block: 52px; }
  .gozlem .g-ust, .gozlem h3 { grid-column: 1 / -1; }
  .gozlem.karesiz .uc { grid-column: 1 / -1; }
  .uc.metin > div { grid-template-columns: 170px minmax(0, 1fr); padding-block: 18px; }
  .kaynak-video { max-width: 760px; }
  .belge { padding-block: 0 110px; }
  .liste-sayfa { padding-block: 0 110px; }
}

/* ================= derin okuma (kalıp 2): ön yüz sade, arka yüz kanıt ================= */
/* mavi dikey çizgi her yerde aynı şeyi işaretler: "ne anlama gelebilir" (yorum katmanı) */
.on-yuz { padding-block: 0 40px; }
.on-yuz h2 { font-size: 15px; font-weight: 700; color: var(--orta); margin-block-end: 4px; }
.kisaca { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--cizgi); max-width: 50rem; }
.kisaca li { display: grid; gap: 4px; padding-block: 16px 18px; border-top: 1px solid var(--cizgi); }
.kisaca b { font-size: clamp(1.4rem, 5.6vw, 1.85rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; }
.kisaca p { font-size: 1.1rem; line-height: 1.5; max-width: 36em; }
.anlam-blok { margin-block-start: 36px; max-width: 50rem; }
.on-yuz .anlam-blok h2 { font-size: clamp(1.7rem, 6.6vw, 2.6rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 800; color: var(--murekkep); margin-block-end: 14px; }
.anlam { font-size: clamp(1.2rem, 4.7vw, 1.46rem); line-height: 1.42; letter-spacing: -0.014em; border-inline-start: 3px solid var(--mavi); padding-inline-start: 16px; }
.anlam-notu { margin-block-start: 16px; font-size: 1.04rem; line-height: 1.5; color: var(--orta); max-width: 38em; }

.iz .el { fill: var(--mavi); opacity: 0.16; }
.iz .temas { fill: var(--mavi); }
.iz .acik { fill: var(--murekkep); opacity: 0.82; }
.iz .gul { fill: var(--mavi); }
.iz .dolgu { stroke: var(--mavi); stroke-width: 3; vector-effect: non-scaling-stroke; }
.iz .blok[data-one] { fill: var(--mavi); opacity: 0.42; }
.iz .blok[data-one].simdi, .iz .blok.simdi { opacity: 1; }
.os2 .iz svg { height: 44px; }

.dort { margin-block-start: 24px; border-bottom: 1px solid var(--cizgi); }
.dort > section { padding-block: 14px 24px; border-top: 1px solid var(--cizgi); display: grid; gap: 8px; align-content: start; }
.k4-ad a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--murekkep); text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dort h3 { font-size: clamp(1.4rem, 5.6vw, 1.9rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.dort p { font-size: 1.06rem; line-height: 1.5; max-width: 36em; }
.dort .k4-anlam, .b-on > div:nth-child(2) { border-inline-start: 3px solid var(--mavi); padding-inline-start: 14px; }

.anlar { list-style: none; margin: 24px 0 0; padding: 0; border-bottom: 1px solid var(--cizgi); max-width: 50rem; }
.anlar li { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 10px; padding-block: 12px 18px; border-top: 1px solid var(--cizgi); align-items: start; }
.anlar li > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--murekkep); text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.anlar li > div { display: grid; gap: 4px; padding-block-start: 8px; }
.anlar h3 { font-size: clamp(1.2rem, 4.8vw, 1.5rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; }
.anlar p { font-size: 1.06rem; line-height: 1.5; }
.anlar .an-kanal { font-size: 15px; color: var(--orta); }

.hepsini { margin-block-start: 20px; }
.hepsini .dugme { border: 0; cursor: pointer; font-family: inherit; min-width: 0; background: var(--murekkep); }
html:not(.js) .hepsini { display: none; }
.kanal-baslik { font-size: clamp(1.6rem, 6.2vw, 2.2rem); line-height: 1.05; letter-spacing: -0.04em; font-weight: 800; margin-block: 40px 0; padding-block-end: 12px; scroll-margin-top: 12px; }
.bulgu { padding-block: 26px 10px; border-top: 1px solid var(--cizgi); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; scroll-margin-top: 12px; }
.bulgu h4 { font-size: clamp(1.35rem, 5.3vw, 1.9rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; margin: 0; max-width: 24em; }
.b-kareler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; max-width: 560px; }
.b-kareler figure { margin: 0; }
.b-kareler img { display: block; width: 100%; height: auto; border-radius: 10px; background: #1a1a1f; }
.b-kareler figcaption { font-size: 15px; line-height: 1.3; color: var(--murekkep); font-weight: 600; margin-block-start: 6px; }
.b-kareler .b-kunye { grid-column: 1 / -1; font-size: 15px; color: var(--orta); }
.b-govde { display: grid; gap: 14px; }
.b-on { display: grid; gap: 14px; }
.b-on > div { display: grid; gap: 3px; }
.b-on b { font-size: 15px; font-weight: 700; color: var(--orta); }
.b-on > div:nth-child(2) b { color: var(--mavi); }
.b-on p { font-size: 1.1rem; line-height: 1.5; max-width: 36em; }
details.b-arka, details.tablo-ac, details.dosyalar { border-top: 1px solid var(--cizgi); }
details.b-arka > summary, details.tablo-ac > summary, details.dosyalar > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details.b-arka > summary::after, details.tablo-ac > summary::after, details.dosyalar > summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-inline-start: auto; background: linear-gradient(var(--mavi), var(--mavi)) center / 100% 2px no-repeat, linear-gradient(var(--mavi), var(--mavi)) center / 2px 100% no-repeat; transition: transform 0.2s ease; }
details[open].b-arka > summary::after, details[open].tablo-ac > summary::after, details[open].dosyalar > summary::after { transform: rotate(45deg); }
details.b-arka .uc.metin { margin-block: 4px 16px; }
details.b-arka .uc.metin > div:first-child { border-top: 1px solid var(--cizgi); padding-block-start: 14px; }
.uc.metin b { color: var(--orta); }
.atif { display: inline-block; min-width: 26px; margin-inline-start: 4px; padding: 3px 6px; border-radius: 6px; background: var(--zemin2); color: var(--murekkep); font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.atif:hover, .atif:focus-visible { background: var(--mavi); color: #fff; }

.alt-baslik { font-size: clamp(1.35rem, 5.3vw, 1.8rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; margin-block: 48px 4px; scroll-margin-top: 12px; }
.alt-baslik + .giris { color: var(--orta); max-width: 34em; }
.parcalar { list-style: none; margin: 18px 0 0; padding: 0; border-bottom: 1px solid var(--cizgi); max-width: 50rem; }
.parcalar li { padding-block: 16px; border-top: 1px solid var(--cizgi); display: grid; gap: 5px; }
.pr-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: var(--orta); }
.pr-ust b { font-weight: 700; }
.pr-durum { font-weight: 700; color: var(--murekkep); white-space: nowrap; }
.pr-durum[data-d="deginilmiyor"] { color: var(--mavi); }
.pr-soru { font-size: 1.14rem; line-height: 1.35; letter-spacing: -0.015em; font-weight: 700; }
.pr-karsilik { font-size: 1.04rem; line-height: 1.5; }
details.tablo-ac { margin-block-start: 34px; border-bottom: 1px solid var(--cizgi); max-width: 860px; }
details.tablo-ac[open] { border-bottom: 0; }
details.tablo-ac .kiyas-sar { margin-block-start: 0; }
table.kiyas.cumle { min-width: 720px; font-size: 15px; }
.kiyas.cumle td { font-weight: 400; }
.kiyas.cumle td:nth-child(2), .kiyas.cumle td:nth-child(3), .kiyas.cumle th:nth-child(2), .kiyas.cumle th:nth-child(3) { text-align: left; }
.kiyas.cumle th[scope="row"] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tablo-not { font-size: 15px; color: var(--orta); margin-block-start: 10px; max-width: 44em; }
.olculemeyen { margin: 14px 0 0; border-bottom: 1px solid var(--cizgi); max-width: 50rem; }
.olculemeyen > div { padding-block: 14px 16px; border-top: 1px solid var(--cizgi); display: grid; gap: 4px; }
.olculemeyen dt { font-weight: 700; font-size: 1.08rem; letter-spacing: -0.015em; }
.olculemeyen dd { margin: 0; font-size: 1.04rem; line-height: 1.5; max-width: 40em; }
details.dosyalar ul { padding-block-end: 8px; }
.kaynakca { margin: 22px 0 0; padding-inline-start: 2.1em; display: grid; gap: 12px; max-width: 50rem; }
.kaynakca li { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; scroll-margin-top: 16px; padding-inline-start: 4px; }
.kaynakca li::marker { font-weight: 700; font-variant-numeric: tabular-nums; }
.kaynakca li:target { background: var(--zemin2); box-shadow: 0 0 0 8px var(--zemin2); border-radius: 4px; }
.kaynakca a { color: var(--murekkep); text-decoration: underline; text-decoration-color: var(--mavi); text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (min-width: 960px) {
  .on-yuz { padding-block: 0 72px; }
  .on-yuz > .ic { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .on-yuz > .ic > h2 { grid-column: 1 / -1; }
  .on-yuz .kisaca { grid-column: 1; max-width: none; }
  .on-yuz .anlam-blok { grid-column: 2; margin-block-start: 0; padding-block-start: 18px; position: sticky; top: 16px; }
  .kisaca li { grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding-block: 20px 22px; }
  .kisaca p { font-size: 1.16rem; }
  .dort { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; margin-block-start: 40px; }
  .dort > section { padding-block: 18px 34px; }
  .anlar { margin-block-start: 40px; }
  .anlar li { grid-template-columns: 110px minmax(0, 1fr); padding-block: 18px 24px; }
  .kanal-baslik { margin-block: 72px 0; }
  .bulgu { grid-template-columns: 460px minmax(0, 1fr); column-gap: 64px; padding-block: 40px 24px; }
  .bulgu .g-ust, .bulgu h4 { grid-column: 1 / -1; }
  .bulgu.karesiz .b-govde { grid-column: 1 / -1; max-width: 46rem; }
  .b-kareler { max-width: none; align-self: start; }
  details.b-arka .uc.metin > div { grid-template-columns: 170px minmax(0, 1fr); }
  .alt-baslik { margin-block: 80px 6px; }
  .os2 .iz svg { height: 46px; }
}

.os2 .kiyas td { white-space: nowrap; }
.os2 .kiyas.cumle td { white-space: normal; }
.os2 .kiyas.cumle td:nth-child(n+4) { white-space: nowrap; }

details.soru-tam { margin-block-start: 14px; border-bottom: 0; max-width: 50rem; }
.soru-tam blockquote { margin: 0 0 14px; padding-inline-start: 14px; border-inline-start: 3px solid var(--cizgi); }
.soru-tam blockquote p { font-size: 1.06rem; line-height: 1.55; }

.ciftler { list-style: none; margin: 18px 0 0; padding: 0; border-bottom: 1px solid var(--cizgi); max-width: 60rem; }
.ciftler li { padding-block: 16px; border-top: 1px solid var(--cizgi); display: grid; gap: 12px; }
.ciftler li > div { display: grid; gap: 3px; align-content: start; }
.ciftler li > div + div { border-inline-start: 3px solid var(--mavi); padding-inline-start: 14px; }
.cf-ust { font-size: 15px; color: var(--orta); font-variant-numeric: tabular-nums; }
.cf-soz { font-size: 1.1rem; line-height: 1.4; letter-spacing: -0.012em; font-weight: 700; }
@media (min-width: 960px) { .ciftler li { grid-template-columns: 1fr 1fr; column-gap: 48px; } }

/* okuma ekranı: gerçek görüntü kipi (bölümün kısa görüntüsü + ölçüm çizgileri) */
.videolu .sahne { aspect-ratio: var(--oran, 1); max-width: calc(46svh * var(--oran, 1)); background: var(--murekkep); }
.sahne video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; cursor: pointer; }
.videolu .sahne .iz-tuval { pointer-events: none; }
.videolu .pbas { flex-wrap: wrap; row-gap: 2px; }
.sahne-kunye { font-size: 15px; color: var(--orta); margin-block-start: 8px; text-align: center; }
.cizgi-dugme { min-height: 44px; padding-inline: 14px; border: 1px solid #C6C6CE; border-radius: 22px; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--murekkep); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cizgi-dugme::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mavi); }
.cizgi-dugme[aria-pressed="false"] { color: var(--orta); }
.cizgi-dugme[aria-pressed="false"]::before { background: #C6C6CE; }
html:not(.js) .cizgi-dugme { display: none; }
@media (min-width: 960px) { .gezgin.videolu { align-items: start; } .videolu .sahne { max-width: none; } .sahne-kunye { text-align: left; } }
.gezgin[data-cizgi="kapali"] .sahne .iz-tuval { opacity: 0; }
@media (max-width: 480px) { .videolu .pbas .sure { display: none; } }

/* okuma: düzeltme notu (künyedeki söz: hata bulunursa düzeltme tarihi ve içeriği sayfaya yazılır) */
.duzeltmeler { margin-block: 18px; padding: 14px 16px; border-inline-start: 3px solid var(--mavi); background: var(--zemin2); border-radius: 0 8px 8px 0; }
.duzeltmeler h3 { font-size: 16px; margin: 0 0 6px; }
.duzeltmeler ul { margin: 0; padding-inline-start: 18px; }
.duzeltmeler li { font-size: 16px; line-height: 1.5; }
.duzeltmeler time { font-weight: 700; }