/* noteland.net · ortak stil (DE-10)
   Tek kaynak: deniz/kod/malzeme (palet.json, hareket.json, cam.css, yazi.css). Hex değerleri palet.json'dan birebir alındı;
   site için eklenen değerler "öneri" diye işaretli. Yalnız transform/opacity canlandırılır. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/yazi/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/yazi/IBMPlexSans-Regular-Latin2.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/yazi/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/yazi/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }

/* ---------- jetonlar: gündüz (palet.json gunduz.*) ---------- */
:root {
  color-scheme: light dark;
  --kagit: #ECE9E2;            /* zemin.deniz_kagit */
  --dalga: #BCC3C4;            /* zemin.dalga_cizgi */
  --not: #FBFAF7;              /* zemin.not_sayfa */
  --panel: #F4F2ED;            /* zemin.panel_dolu */
  --hap: #FDFCFA;              /* zemin.etiket_hap */
  --ayirici: #CFCBC2;          /* zemin.ayirici */
  --koyu-zemin: #23272B;       /* zemin.secili_zemin ("Başla") */
  --serit-ayirici: #85827B;    /* zemin.serit_ayirici (kulp) */
  --metin: #1E2226;            /* metin.birincil */
  --metin-2: #474E54;          /* metin.ikincil */
  --soluk: #5C636A;            /* metin.soluk (camda kullanılmaz) */
  --ters: #F4F2ED;             /* metin.ters */
  --eylem: #2E5170;            /* metin.eylem: sistem mavisi yerine */
  --isik: #D5A95F;             /* durum.isik_odul: açık notun yeri */
  --kiyi-bant: #CCC6B1;        /* kiyi_yazi.bant */
  --kiyi-iz: #5E594C;          /* kiyi_yazi.iz */
  --vurgu: #F4E7B4;            /* vurgu_bant.sari (opak) */
  --golge-murekkep: #1E2226;   /* isik.golge_murekkep */
  --cam-op: 84%;               /* kurallar.cam.opaklik */
  --cam-kenar-op: 90%;
  --cam-golge-op: 14%;
  --dugme-op: 45%;             /* cam.dugme.opaklik.simge */
  --kapsul-op: 60%;            /* cam.dugme.opaklik.yazili */
  --isik-kenar: var(--hap);    /* cam.dugme.isik_kenar */
  --isik-kenar-op: 90%;
  --bulut-golge: 0.17;         /* öneri: bulutun denize düşen gölgesi (golge_murekkep saydamlığı) */
  --doku-deniz: url("/img/kagit-deniz-gunduz.webp");
  --doku-not: url("/img/kagit-not-gunduz.webp");
  --ada-suzgec: none;
  --ekran-suzgec: none;

  /* tek güneş: azimut 315°, gölge sağ-alta (palet.js 2B gölge yönü) */
  --gx: 0.7071;
  --golge-cam: calc(var(--gx) * 8px) calc(var(--gx) * 8px) 28px color-mix(in srgb, var(--golge-murekkep) var(--cam-golge-op), transparent);
  --golge-dugme: inset 0 0 0 1px color-mix(in srgb, var(--isik-kenar) var(--isik-kenar-op), transparent),
    calc(var(--gx) * 3px) calc(var(--gx) * 3px) 10px color-mix(in srgb, var(--golge-murekkep) var(--cam-golge-op), transparent);
  --kapsul-zemin: color-mix(in srgb, var(--panel) var(--kapsul-op), transparent);

  /* hareket.json eğrileri (aşma yok, y ∈ [0,1]) */
  --e-standart: cubic-bezier(0.2, 0, 0, 1);
  --e-giris: cubic-bezier(0, 0, 0.2, 1);
  --e-cikis: cubic-bezier(0.4, 0, 1, 1);
  --e-tomurcuk: cubic-bezier(0.25, 0, 0, 1);

  /* yazı (yazi.css; site için büyük başlıklar öneri) */
  --yazi: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t-kucuk: 13px; --t-ikincil: 15px; --t-govde: 17px; --t-sade: 19px; --t-baslik: 22px; --t-buyuk: 28px;
  --satir: 1.45;
  --kenar: clamp(20px, 5vw, 72px);
}

/* ---------- gece (palet.json gece.*) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --kagit: #1C2024; --dalga: #353E46; --not: #212529; --panel: #262B30; --hap: #2D3339; --ayirici: #465059;
    --koyu-zemin: #E6E4DF; --serit-ayirici: #6E767E;
    --metin: #E6E4DF; --metin-2: #BABEC2; --soluk: #9CA2A8; --ters: #1E2226; --eylem: #9DBAD6; --isik: #F2C47A;
    --kiyi-bant: #45474A; --kiyi-iz: #B3B0A8; --vurgu: #5A4724; --golge-murekkep: #0B0D0F;
    --cam-op: 90%; --cam-golge-op: 40%; --dugme-op: 60%; --kapsul-op: 72%;
    --isik-kenar: var(--metin); --isik-kenar-op: 16%;
    --bulut-golge: 0.42;
    --doku-deniz: url("/img/kagit-deniz-gece.webp");
    --doku-not: url("/img/kagit-not-gece.webp");
    /* gündüz kareleri gece denizinde parlamasın: köpük ve kara kısılır (öneri; uygulamanın gece kipi bu sürümde yok) */
    --ada-suzgec: brightness(0.72) saturate(0.85);
    --ekran-suzgec: brightness(0.9);
  }
}

/* ---------- taban ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; touch-action: manipulation; -webkit-tap-highlight-color: color-mix(in srgb, var(--metin) 8%, transparent); }
body {
  margin: 0; position: relative; min-height: 100vh;
  font-family: var(--yazi); font-size: var(--t-govde); line-height: var(--satir); color: var(--metin);
  background: var(--kagit) var(--doku-deniz) repeat; background-size: 256px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img[data-hata] { visibility: hidden; }   /* ortak.js yeniden denerken kırık resim simgesi çıkmasın */
a { color: var(--eylem); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-weight: 600; margin: 0; text-wrap: balance; }
p, li { text-wrap: pretty; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--eylem); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--vurgu); color: var(--metin); }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--koyu-zemin); color: var(--ters); border-radius: 12px; text-decoration: none; font-weight: 600; }
.atla:focus { top: 12px; }

/* sayfa boyu ince dalga çizgileri: tek SVG maske, temaya göre boyanır */
.deniz-dalga { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: var(--dalga);
  -webkit-mask: url("/img/dalga.svg") 0 0 / 900px repeat; mask: url("/img/dalga.svg") 0 0 / 900px repeat; }

/* ---------- başlık şeridi: blursuz cam kapsüller (cam.css .deniz-cam-dugme dili) ---------- */
.ust { position: fixed; z-index: 40; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.ust > * { pointer-events: auto; }
.ust::before { content: ""; position: fixed; z-index: -1; inset: 0 0 auto; height: calc(max(12px, env(safe-area-inset-top)) + 60px); pointer-events: none;
  background: var(--kagit) var(--doku-deniz) repeat; background-size: 256px; box-shadow: 0 1px 0 var(--ayirici);
  opacity: 0; transition: opacity 200ms var(--e-standart); }
.serit .ust::before, body:has(> .belge) .ust::before { opacity: 1; }   /* belge sayfalarında JS yok: şerit hep açık */
/* başlık kapsülleri: düğme camı blursuzdur (DESIGN §2.4); kayan yazının üstünde okunsun diye "Dolu paneller" tonu (opak panel_dolu),
   1 px ışık kenarı ve tek güneş gölgesi. Bulanık katman: 0. */
.kapsul { display: flex; align-items: center; height: 48px; padding: 0 6px; border-radius: 999px; background: var(--panel); box-shadow: var(--golge-dugme); }
.marka { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 12px; color: var(--metin); text-decoration: none; font-weight: 600; font-size: var(--t-sade); letter-spacing: -0.005em; border-radius: 999px; }
.marka svg { width: 26px; height: 26px; }
.marka:hover { text-decoration: none; }
.gezinti { display: flex; align-items: center; gap: 2px; }
.gezinti a:not(.dugme) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--metin); text-decoration: none; font-size: var(--t-ikincil); font-weight: 600; transition: background-color 150ms ease; }
.gezinti a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }
@media (hover: hover) and (pointer: fine) { .gezinti a:not(.dugme):hover { background: color-mix(in srgb, var(--metin) 7%, transparent); } }
@media (max-width: 599.98px) { .gezinti a.genis-yalniz { display: none; } }

/* ---------- düğmeler ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 var(--t-govde) / 1 var(--yazi); text-decoration: none; cursor: pointer; border: 0; white-space: nowrap;
  transition: transform 120ms var(--e-standart), background-color 150ms ease; }
.dugme:hover { text-decoration: none; }
.dugme:active { transform: scale(0.97); }
.dugme--koyu { background: var(--koyu-zemin); color: var(--ters); }
@media (hover: hover) and (pointer: fine) { .dugme--koyu:hover { background: color-mix(in srgb, var(--koyu-zemin) 86%, var(--kagit)); } }
.dugme--cam { background: var(--kapsul-zemin); color: var(--metin); box-shadow: var(--golge-dugme); }
@media (hover: hover) and (pointer: fine) { .dugme--cam:hover { background: var(--panel); } }
.dugme--kucuk { min-height: 40px; padding: 0 16px; font-size: var(--t-ikincil); }
.kapsul .dugme--kucuk { position: relative; }
.kapsul .dugme--kucuk::after { content: ""; position: absolute; inset: -4px 0; } /* dokunma alanı 48 */
.dugme svg { width: 20px; height: 20px; flex: none; }

/* ---------- yazı bileşenleri ---------- */
.kiyi { font-size: var(--t-kucuk); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--kiyi-iz); }
.baslik-dev { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.02em; }
.baslik-iki { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -0.012em; }
.giris-metni { font-size: var(--t-sade); color: var(--metin-2); max-width: 34em; }
.metin-2 { color: var(--metin-2); }
.olcum { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* =====================================================================
   ANLATI: kaydırma kamerası (index). Varsayılan (JS yok / azaltılmış): okunur statik düzen.
   ===================================================================== */
.hikaye { position: relative; z-index: 1; background: var(--kagit) var(--doku-deniz) repeat; background-size: 256px; }
.sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 1; pointer-events: none; }
.pencere { position: absolute; inset: 0; overflow: hidden; }
.sahne-dalga { position: absolute; inset: -20%; background-color: var(--dalga);
  -webkit-mask: url("/img/dalga.svg") 0 0 / 900px repeat; mask: url("/img/dalga.svg") 0 0 / 900px repeat; }

/* dünya: üç ada, DE-5 iPad karesindeki göreli yerleriyle (araclar/site-varlik.py ölçüleri) */
.dunya { position: absolute; aspect-ratio: 1442 / 1161; }
.dunya-ic { position: absolute; inset: 0; }
.ada { position: absolute; height: auto; filter: var(--ada-suzgec); }
.ada--kardiyoloji { left: 0; top: 0; width: 41.05%; }
.ada--nefroloji { left: 61.1%; top: 17.05%; width: 38.9%; }
.ada--farmakoloji { left: 0.97%; top: 61.93%; width: 40.2%; }

.yakin { position: absolute; aspect-ratio: 1600 / 1004; opacity: 0; }
.yakin > img { width: 100%; height: auto; filter: var(--ada-suzgec); }
/* bölüm adı çıkması (ara-iz.js ilceAdCikma dili: nokta + ince çizgi + boş denizde tek satır ad) */
.cikma { position: absolute; left: 62.9%; top: 18.6%; width: 0; height: 0; }
.cikma-isik { position: absolute; left: -56px; top: -34px; width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--isik) 55%, transparent), color-mix(in srgb, var(--isik) 0%, transparent)); }
.cikma-nokta { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--metin); box-shadow: 0 0 0 2px var(--hap); }
.cikma-cizgi { position: absolute; left: 0; top: -0.75px; width: 150px; height: 1.5px; background: var(--metin); transform-origin: 0 50%; rotate: -125deg; box-shadow: 0 0 0 1px color-mix(in srgb, var(--hap) 70%, transparent); }
.cikma-ad { position: absolute; right: 92px; top: -150px; white-space: nowrap; text-align: right; font-size: var(--t-ikincil); font-weight: 600; color: var(--metin); }
.cikma-ad span { color: var(--metin-2); font-weight: 400; margin-right: 6px; }

/* bulutlar: kuş bakışı kümülüs (araclar/site-varlik.py bulutlar(); güneş sol üstten, öneri).
   Her bulut iki katman: denize düşen gölge (tema bağımsız maske, golge_murekkep) ve gövde. Gölge sağ-alta düşer (azimut 315°).
   .bulut (dış) = kaydırma kamerası (GSAP), .bulut-ic = açılışta aralanma + dinlenmede yavaş süzülme (CSS, ilk boyamadan başlar). */
.bulutlar { position: absolute; inset: 0; }
.bulut { position: absolute; aspect-ratio: 5 / 3; }
.bulut-ic { position: absolute; inset: 0; }
.bulut-govde { position: absolute; inset: 0; width: 100%; height: 100%; }
.bulut picture { display: contents; }
.bulut-golge { position: absolute; left: 7%; top: 11.5%; width: 100%; height: 100%; background-color: var(--golge-murekkep); opacity: var(--bulut-golge);
  -webkit-mask: var(--golge-maske) center / 100% 100% no-repeat; mask: var(--golge-maske) center / 100% 100% no-repeat; }
.v1 { --golge-maske: url("/img/bulut-1-golge.webp"); }
.v2 { --golge-maske: url("/img/bulut-2-golge.webp"); }
.v3 { --golge-maske: url("/img/bulut-3-golge.webp"); }
.v4 { --golge-maske: url("/img/bulut-4-golge.webp"); }
.bulut--gecis { opacity: 0; }

/* dinlenme yerleri (geniş: .bulutlar sahnenin sağ %70'i). --ax/--ay/--as: açılışta sahne ortasından başlama farkı (kendi boyunun %'si) */
.c1 { left: 66%; top: -16%; width: 52%; --ax: -31%; --ay: 56%; --as: 2; --sx: -2.5%; --sure: 19s; }
.c2 { left: 62%; top: 70%; width: 56%; --ax: -27%; --ay: -46%; --as: 2; --sx: 2%; --sure: 23s; }
.c3 { left: -14%; top: 78%; width: 50%; --ax: 37%; --ay: -60%; --as: 2; --sx: 3%; --sure: 21s; }
.c4 { left: 44%; top: 3%; width: 28%; --ax: -6%; --ay: 75%; --as: 2.8; --sx: 4%; --sure: 17s; }
.c5 { left: -8%; top: -12%; width: 40%; --ax: 44%; --ay: 73%; --as: 2; --sx: 2.5%; --sure: 25s; }
.g1 { left: 17%; top: -2%; width: 70%; }
.g2 { left: 20%; top: 35%; width: 80%; }

/* önizleme camı → not kâğıdı (onizleme.css dili: blursuz ince cam, 1 px ışık kenarı, tek güneş gölgesi, eş merkezli köşe) */
.onz { position: absolute; margin: 0; opacity: 0; transform-origin: 50% 0; }
.onz-cerceve { position: absolute; inset: -9px; border-radius: 23px;
  background: color-mix(in srgb, var(--panel) var(--kapsul-op), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--isik-kenar) var(--isik-kenar-op), transparent), var(--golge-cam); }
.onz-kagit { position: relative; height: 100%; overflow: hidden; border-radius: 14px; background: var(--not) var(--doku-not) repeat; background-size: 256px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ayirici) 70%, transparent); }
.onz-kulp { position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--serit-ayirici); }
.not-serit { display: flex; align-items: center; gap: 10px; height: 52px; padding: 14px 20px 0; color: var(--metin-2); font-size: var(--t-ikincil); opacity: 0; }
.not-serit svg { width: 22px; height: 22px; color: var(--metin); }
.not-icerik { padding: 6px 30px 40px; font-size: var(--t-govde); line-height: var(--satir); }
.not-icerik .nb-1 { font-weight: 600; font-size: var(--t-buyuk); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; }
.not-icerik .nb-2 { font-weight: 600; font-size: var(--t-baslik); line-height: 1.25; margin: 22px 0 6px; }
.not-icerik ul { margin: 0; padding-left: 1.25em; }
.not-icerik li { margin: 4px 0; padding-left: 2px; }
.not-icerik li::marker { color: var(--metin-2); }
.not-icerik mark { background: var(--vurgu); color: inherit; padding: 0 2px; border-radius: 2px; }
.onz-kagit::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(color-mix(in srgb, var(--not) 0%, transparent), var(--not)); }

/* anlatı yazıları */
.duraklar { position: relative; z-index: 2; margin: -100vh 0 0; margin-top: -100svh; padding: 0; list-style: none; }
.durak { position: relative; }
.durak-metin { max-width: 30rem; }
.durak-metin .kiyi { display: block; margin-bottom: 14px; }
.durak-metin h2 { margin-bottom: 16px; }
.durak-metin p { color: var(--metin-2); font-size: var(--t-sade); line-height: 1.5; }
.durak--giris .durak-metin { max-width: 36rem; }
.durak--giris h1, .durak--giris h2 { margin-bottom: 22px; }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; pointer-events: auto; }
.durak a, .durak button { pointer-events: auto; }
.tf-not { margin-top: 14px; font-size: var(--t-ikincil); color: var(--soluk); }

/* --- geniş ekran: yazı solda, sahne sağda, çerçevesiz deniz --- */
@media (min-width: 900px) {
  .dunya { width: 54%; right: 5%; top: 50%; margin-top: -21.74%; }
  .yakin { width: 60%; right: 1%; top: 50%; margin-top: -18.83%; }
  .onz { right: 7%; top: 88px; height: calc(95vh - 88px); height: calc(95svh - 88px); width: min(620px, 42%); }
  .bulutlar { left: 30%; }
  .durak { min-height: 125vh; min-height: 125svh; padding: 34vh var(--kenar) 0; padding-top: 34svh; }
  .durak--giris { min-height: 110svh; padding-top: 24svh; }
  .durak-metin { width: min(30rem, 34vw); }
  .durak--giris .durak-metin { width: min(36rem, 42vw); }
  .durak:last-child { min-height: 110svh; }
  /* sol sütunun okunurluğu: kâğıttan şeffafa yumuşak geçiş */
  .pencere::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 46%; background: linear-gradient(90deg, color-mix(in srgb, var(--kagit) 82%, transparent) 0 55%, color-mix(in srgb, var(--kagit) 0%, transparent)); }
}

/* --- dar ekran: sahne üstte cam çerçeveli pencere, yazı altta akar --- */
@media (max-width: 899.98px) {
  .sahne { z-index: 3; background: linear-gradient(var(--kagit) 0 calc(62svh + 6px), color-mix(in srgb, var(--kagit) 0%, transparent) calc(62svh + 30px)); }
  .pencere { inset: 70px 10px auto; height: calc(62svh - 70px); border-radius: 28px; background: var(--kagit) var(--doku-deniz) repeat; background-size: 256px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ayirici) var(--cam-kenar-op), transparent), var(--golge-cam); }
  .dunya { width: 88%; left: 6%; top: 50%; margin-top: -35.43%; }
  .yakin { width: 128%; left: -14%; top: calc(50% + 14px); margin-top: -40.16%; }
  .onz { left: 8px; right: 8px; top: 8px; bottom: 8px; }
  .onz-cerceve { border-radius: 22px; }
  .not-icerik { padding: 4px 20px 30px; }
  .not-icerik .nb-1 { font-size: 24px; }
  .not-icerik .nb-2 { font-size: 19px; margin-top: 16px; }
  .cikma-cizgi { width: 66px; rotate: -118deg; }
  /* telefon penceresi (≈370×450): çerçeve bulutları köşelerde, adaların adlarına değmez */
  .c1 { left: 52%; top: -14%; width: 78%; --ax: -22%; --ay: 52%; }
  .c2 { left: 50%; top: 76%; width: 84%; --ax: -21%; --ay: -48%; }
  .c3 { left: -30%; top: 80%; width: 80%; --ax: 21%; --ay: -54%; }
  .c4 { left: 14%; top: 42%; width: 34%; --ax: 20%; --ay: 0%; }
  .c5 { left: -28%; top: -16%; width: 66%; --ax: 29%; --ay: 65%; }
  .g1 { left: -5%; top: 3%; width: 110%; }
  .g2 { left: -5%; top: 33%; width: 120%; }
  .cikma-ad { right: 26px; top: -80px; font-size: var(--t-kucuk); }
  .cikma-ad span { display: none; }
  /* Yazı bandı: kartın altı (62svh + 30 px solma) ile görüntünün altı. Eskiden her durağın yazısı bir önceki yazıdan 64svh aşağıda
     başlıyordu; bant yalnız ≈38svh olduğundan önceki yazı kartın altına girince sonraki daha görünmüyordu (alt yarı boş, son satır
     kartın kenarında yarım). Şimdi: yazılar arası boşluk bandın içinde kalır (--durak-bosluk), yazı dinlenmede kartın altına yapışır
     (sticky; durak boyu ve hızı aynı) ve kartın altına girerken ortak.js'te söner. */
  .duraklar { --durak-bosluk: max(24px, calc(38svh - 170px)); }
  .durak { min-height: 92svh; padding: var(--durak-bosluk) var(--kenar) 0; scroll-margin-top: calc(64svh - var(--durak-bosluk)); }
  .durak .durak-metin { position: sticky; top: calc(62svh + 30px); }
  .durak--giris { min-height: 100svh; padding-top: 64svh; }
  .durak--giris .durak-metin, .durak:last-child .durak-metin { position: static; }
  .durak:last-child { min-height: calc(var(--durak-bosluk) + 28svh); }
  .durak-metin p { font-size: var(--t-govde); }
  .baslik-dev { font-size: clamp(32px, 8.6vw, 40px); }
  .baslik-iki { font-size: 26px; }
  .eylemler { margin-top: 22px; }
}

/* --- statik durumlar (JS yok ya da azaltılmış hareket): data-durak ile 180 ms solma --- */
.sahne:not([data-durak]) .dunya, .sahne[data-durak="0"] .dunya, .sahne[data-durak="1"] .dunya, .sahne[data-durak="5"] .dunya { opacity: 1; }
.durumlu .dunya, .durumlu .yakin, .durumlu .onz, .durumlu .not-serit, .durumlu .onz-cerceve { transition: opacity 180ms linear; }
.durumlu[data-durak="2"] .dunya, .durumlu[data-durak="3"] .dunya, .durumlu[data-durak="4"] .dunya { opacity: 0; }
.durumlu[data-durak="2"] .yakin, .durumlu[data-durak="3"] .yakin, .durumlu[data-durak="4"] .yakin { opacity: 1; }
.durumlu[data-durak="3"] .onz, .durumlu[data-durak="4"] .onz { opacity: 1; }
.durumlu[data-durak="3"] .onz { transform: translateY(46%) scale(0.92); }
.durumlu[data-durak="4"] .onz-cerceve { opacity: 0; }
.durumlu[data-durak="4"] .not-serit { opacity: 1; }
.durumlu .cikma-isik { opacity: 0.8; }
.durumlu .cikma { transition: opacity 180ms linear; }
.durumlu[data-durak="4"] .cikma { opacity: 0; }   /* not kâğıdı büyüyünce bölüm adı söner; panelin solunda kesik harf kalmaz */

/* JS anlatısı açıkken katmanlar kompozitörde kalsın (yalnız kaydırmayla canlanan dış katmanlar) */
.anlati .dunya, .anlati .yakin, .anlati .onz, .anlati .bulut, .anlati .sahne-dalga { will-change: transform, opacity; }

/* --- açılış: kamera bulutların arasından sıyrılır (DESIGN §Açılış). JS beklemez, ilk boyamadan başlar, 1,2 s'de biter.
   Eğri: hareket.json yukselme (0.3, 0, 0.1, 1); aşma yok. Yalnız transform/opacity. --- */
@media (prefers-reduced-motion: no-preference) {
  .bulut-ic { animation: bulut-aralan 1.15s cubic-bezier(0.3, 0, 0.1, 1) both, bulut-suzul var(--sure, 20s) 1.15s ease-in-out infinite alternate; }
  .bulut-dur .bulut-ic { animation-play-state: running, paused; }
  .dunya-ic { animation: dunya-in 1.2s cubic-bezier(0.3, 0, 0.1, 1) backwards; }
  .ada { animation: ada-yuksel 0.8s cubic-bezier(0.3, 0, 0.1, 1) backwards; transform-origin: 50% 60%; }
  .ada--kardiyoloji { animation-delay: 0.22s; }
  .ada--nefroloji { animation-delay: 0.32s; }
  .ada--farmakoloji { animation-delay: 0.4s; }
  .durak--giris .durak-metin > * { animation: parca-gir 0.5s var(--e-giris) backwards; }
  .durak--giris .durak-metin > :nth-child(1) { animation-delay: 0.1s; }
  .durak--giris .durak-metin > :nth-child(2) { animation-delay: 0.2s; }
  .durak--giris .durak-metin > :nth-child(3) { animation-delay: 0.3s; }
  .durak--giris .durak-metin > :nth-child(4) { animation-delay: 0.4s; }
  .durak--giris .durak-metin > :nth-child(5) { animation-delay: 0.5s; }
}
@keyframes bulut-aralan { from { transform: translate(var(--ax, 0%), var(--ay, 0%)) scale(var(--as, 1.2)); } to { transform: none; } }
@keyframes bulut-suzul { from { transform: none; } to { transform: translate(var(--sx, 2%), 0); } }
@keyframes dunya-in { from { transform: scale(0.94); } }
@keyframes ada-yuksel { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes parca-gir { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .bulutlar { display: none; } }
/* kaydırma kamerası geniş ekranda anlatı yazısını üst şeride yaklaşınca soldurur; klavye odağı içerdeyse yazı hep görünür */
.durak-metin:focus-within { opacity: 1 !important; }

/* =====================================================================
   bölümler
   ===================================================================== */
.bolum { position: relative; z-index: 1; padding: clamp(80px, 12vw, 160px) var(--kenar); }
.bolum-bas { max-width: 40rem; margin-bottom: clamp(36px, 5vw, 60px); }
.bolum-bas .kiyi { display: block; margin-bottom: 14px; }
.bolum-bas h2 { margin-bottom: 14px; }
.bolum-bas p { color: var(--metin-2); font-size: var(--t-sade); }

/* ekran kareleri: Deniz önizleme camı çerçevesi (cihaz mockup'ı değil). Eş merkezli köşe: dış = iç + çerçeve. */
.ekranlar { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(12, 1fr); align-items: start; }
.ekran { margin: 0; }
.ekran-cam { --c: 8px; --ic: 34px; padding: var(--c); border-radius: calc(var(--ic) + var(--c));
  background: color-mix(in srgb, var(--panel) var(--kapsul-op), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--isik-kenar) var(--isik-kenar-op), transparent), var(--golge-cam); }
.ekran-cam img { width: 100%; height: auto; border-radius: var(--ic); filter: var(--ekran-suzgec);
  outline: 1px solid color-mix(in srgb, var(--metin) 10%, transparent); outline-offset: -1px; }
.ekran--ipad .ekran-cam { --c: 10px; --ic: 14px; }
.ekran figcaption { margin-top: 14px; font-size: var(--t-ikincil); color: var(--metin-2); padding-left: 4px; }
.ekran figcaption b { color: var(--metin); font-weight: 600; }
.ekran--ipad { grid-column: span 6; }
.ekran--iphone { grid-column: span 3; }
.ekranlar .ekran:nth-child(2) { margin-top: 12%; }
@media (max-width: 899.98px) {
  .ekranlar { grid-template-columns: repeat(2, 1fr); }
  .ekran--ipad { grid-column: span 2; }
  .ekran--iphone { grid-column: span 1; }
  .ekranlar .ekran:nth-child(2) { margin-top: 0; }
  .ekran-cam { --c: 6px; --ic: 26px; }
  .ekran--ipad .ekran-cam { --c: 8px; --ic: 10px; }
}

/* gizlilik özeti */
.ilkeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ayirici); }
.ilkeler li { padding: 22px 24px 26px 0; border-bottom: 1px solid var(--ayirici); }
.ilkeler h3 { font-size: var(--t-baslik); margin-bottom: 6px; }
.ilkeler p { color: var(--metin-2); }
.devam { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; font-weight: 600; }

/* TestFlight çağrısı: dolu panel, ekran kenarından tomurcuklanır gibi büyük köşe */
.cagri { position: relative; max-width: 1100px; margin: 0 auto; padding: clamp(32px, 5vw, 64px); border-radius: 36px;
  background: var(--panel) var(--doku-not) repeat; background-size: 256px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ayirici) var(--cam-kenar-op), transparent), var(--golge-cam);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.cagri h2 { margin-bottom: 14px; }
.cagri .metin-2 { font-size: var(--t-sade); }
.adimlar { margin: 0; padding: 0; list-style: none; counter-reset: adim; }
.adimlar li { counter-increment: adim; position: relative; padding: 0 0 18px 48px; }
.adimlar li::before { content: counter(adim); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: var(--t-ikincil); font-variant-numeric: tabular-nums;
  background: var(--kagit); box-shadow: inset 0 0 0 1px var(--ayirici); }
.cagri .eylemler { margin-top: 26px; }
@media (max-width: 799.98px) { .cagri { grid-template-columns: 1fr; border-radius: 28px; } }

/* alt bilgi */
.alt { position: relative; z-index: 1; padding: 48px var(--kenar) max(56px, calc(env(safe-area-inset-bottom) + 24px)); border-top: 1px solid var(--ayirici); display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; font-size: var(--t-ikincil); color: var(--metin-2); }
.alt nav ul { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.alt nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--metin); }
.alt .marka { padding-left: 0; font-size: var(--t-govde); }
.alt p { max-width: 34em; }
.alt p + p { margin-top: 6px; }

/* =====================================================================
   belge sayfaları (gizlilik, destek, 404): açık not kâğıdı
   ===================================================================== */
.belge { position: relative; z-index: 1; padding: 104px 12px 72px; }
.kagit-sayfa { max-width: 760px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) clamp(22px, 6vw, 72px) clamp(36px, 6vw, 72px);
  border-radius: 14px; background: var(--not) var(--doku-not) repeat; background-size: 256px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ayirici) 80%, transparent), var(--golge-cam); }
.kagit-sayfa h1 { font-size: clamp(32px, 4.2vw, 44px); line-height: 1.1; letter-spacing: -0.015em; margin: 8px 0 12px; }
.kagit-sayfa h2 { font-size: var(--t-buyuk); line-height: 1.2; margin: 44px 0 10px; }
.kagit-sayfa h3 { font-size: var(--t-baslik); line-height: 1.25; margin: 30px 0 8px; }
.kagit-sayfa p, .kagit-sayfa li { color: var(--metin); }
.kagit-sayfa p + p { margin-top: 12px; }
.kagit-sayfa ul, .kagit-sayfa ol { padding-left: 1.3em; margin: 10px 0; }
.kagit-sayfa li { margin: 6px 0; }
.kagit-sayfa li::marker { color: var(--metin-2); }
.kagit-sayfa code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; padding: 1px 5px; border-radius: 4px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--ayirici); }
.kunye { font-size: var(--t-ikincil); color: var(--metin-2); }
.dil-sec { display: flex; gap: 6px; margin-top: 18px; }
.dil-sec a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: var(--t-ikincil); color: var(--metin); box-shadow: inset 0 0 0 1px var(--ayirici); }
.dil-sec a[aria-current="true"] { background: var(--koyu-zemin); color: var(--ters); box-shadow: none; }
.ayrac { border: 0; border-top: 1px solid var(--ayirici); margin: 56px 0 8px; }
.ozet-kutu { margin: 22px 0 6px; padding: 18px 22px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--ayirici); }
.ozet-kutu p { font-size: var(--t-sade); }
.sss { margin: 12px 0 0; }
.sss details { border-bottom: 1px solid var(--ayirici); }
.sss summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; cursor: pointer; font-weight: 600; font-size: var(--t-govde); list-style: none; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.6px solid var(--metin-2); border-bottom: 1.6px solid var(--metin-2); transform: rotate(45deg) translateY(-3px); transition: transform 200ms var(--e-standart); }
.sss details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.sss .cevap { padding: 0 0 18px; }
.sss .cevap p + p { margin-top: 10px; }
.posta { font-weight: 600; font-size: var(--t-sade); }
.kayip { text-align: left; }
.kayip .kiyi { display: block; }
.kayip .kunye { margin-top: 28px; }
.kayip .metin-2 { margin-top: 4px; font-size: var(--t-sade); }

@media (prefers-reduced-motion: reduce) {
  .dugme, .gezinti a, .sss summary::after, .ust::before { transition: none; }
  .dugme:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --kapsul-zemin: var(--panel); }
}

/* =====================================================================
   site v2 (DE-13): hero, sorun, nasıl çalışır, çağrı satırı, karşılaştırma, SSS.
   Jetonlar yukarıdaki :root'tan; yeni renk yok. Köşeler: kapsül 999, kart 24 (cam 28'in iç eşi), kâğıt 14.
   ===================================================================== */
/* durum hapı: sakin hap, metin.ikincil (camda soluk metin yok), 1 px ayırıcı; bağırmaz ama gizlenmez */
.hap-etiket { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 9px; border-radius: 999px; white-space: nowrap;
  font: 600 var(--t-kucuk) / 1 var(--yazi); letter-spacing: 0.01em; text-transform: none; color: var(--metin-2);
  background: var(--hap); box-shadow: inset 0 0 0 1px var(--ayirici); vertical-align: middle; }
.hap-etiket::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.hap-etiket--bugun::before { background: currentColor; }
.hap-etiket--kucuk { height: 24px; margin-left: 4px; }
.kiyi--hapli { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

/* hero */
.giris { position: relative; z-index: 1; overflow-x: clip; display: grid; align-items: center; gap: clamp(36px, 5vw, 80px);
  min-height: 100vh; min-height: 100svh; padding: calc(max(12px, env(safe-area-inset-top)) + 96px) var(--kenar) clamp(56px, 8vh, 96px); }
.giris-metin { max-width: 36rem; }
.giris-metin .kiyi { display: block; margin-bottom: 18px; }
.giris h1 { margin-bottom: 22px; }
@media (min-width: 900px) { .giris { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
@media (prefers-reduced-motion: no-preference) {
  .giris-metin > * { animation: parca-gir 0.5s var(--e-giris) backwards; }
  .giris-metin > :nth-child(2) { animation-delay: 0.08s; }
  .giris-metin > :nth-child(3) { animation-delay: 0.16s; }
  .giris-metin > :nth-child(4) { animation-delay: 0.24s; }
  .giris-metin > :nth-child(5) { animation-delay: 0.32s; }
  .giris .demo { animation: parca-gir 0.6s var(--e-giris) 0.2s backwards; }
}
.baslik-dev--iki { font-size: clamp(34px, 4.4vw, 56px); }

/* her bölüm sonunda aynı çağrı */
.cagri-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(32px, 4vw, 48px); }
.cagri-satir .tf-not { margin: 0; max-width: 32em; font-size: var(--t-ikincil); color: var(--soluk); }
.bolum-bas .cagri-satir .tf-not { font-size: var(--t-ikincil); color: var(--soluk); }
.ipucu { margin-top: 16px; font-size: var(--t-ikincil) !important; color: var(--soluk) !important; }

/* sorun: üç kısa satır */
.sorunlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.sorunlar li { padding-top: 20px; border-top: 1px solid var(--ayirici); }
.sorun-no { display: block; margin-bottom: 10px; font-size: var(--t-kucuk); font-weight: 600; letter-spacing: 0.15em; color: var(--kiyi-iz); font-variant-numeric: tabular-nums; }
.sorunlar p { font-size: var(--t-sade); line-height: 1.45; }
.sorun-son { margin-top: clamp(32px, 4vw, 48px); font-size: var(--t-baslik); font-weight: 600; line-height: 1.3; }
@media (max-width: 799.98px) { .sorunlar { grid-template-columns: 1fr; gap: 18px; } }

/* nasıl çalışır: üç adım, dolu panel kartları (cam değil; dünyanın üstünde değiller) */
.adim-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.adim-uclu li { padding: 26px 26px 30px; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ayirici) var(--cam-kenar-op), transparent); }
.adim-uclu svg { width: 30px; height: 30px; margin-bottom: 22px; fill: none; stroke: var(--metin); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.adim-no { display: block; margin-bottom: 6px; font-size: var(--t-kucuk); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--kiyi-iz); }
.adim-uclu h3 { font-size: var(--t-baslik); line-height: 1.25; margin-bottom: 8px; }
.adim-uclu p { color: var(--metin-2); }
@media (max-width: 799.98px) { .adim-uclu { grid-template-columns: 1fr; } }

/* baskın sahnesinin başı ve sonu: sahneye yakın dursun */
.bolum--baskin-bas { padding-bottom: clamp(28px, 4vw, 48px); }
.bolum--baskin-son { padding-top: clamp(28px, 4vw, 48px); }
.bolum--baskin-son .cagri-satir { margin-top: 0; }
.bolum--baskin-son .baskin-not { margin-bottom: 18px; }

/* metin + demo yan yana (geniş) */
@media (min-width: 900px) {
  .bolum--iki { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
  .bolum--iki .bolum-bas { margin-bottom: 0; }
}

/* dünya bölümü sayfanın ortasında: açılış (bulut aralanması, ada yükselişi) bölüme girince oynar */
.js .hikaye:not(.hikaye--gorundu) .bulut-ic,
.js .hikaye:not(.hikaye--gorundu) .dunya-ic,
.js .hikaye:not(.hikaye--gorundu) .ada,
.js .hikaye:not(.hikaye--gorundu) .durak--giris .durak-metin > * { animation-play-state: paused; }

/* iş akışı karşılaştırması */
.karsi table { width: 100%; border-collapse: collapse; font-size: var(--t-govde); }
.karsi th, .karsi td { text-align: left; vertical-align: top; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--ayirici); }
.karsi thead th { padding-top: 0; font-size: var(--t-kucuk); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--kiyi-iz); }
.karsi tbody th { width: 18%; font-weight: 600; }
.karsi td:nth-child(2) { width: 38%; color: var(--metin-2); }
.karsi td:last-child { color: var(--metin); }
@media (max-width: 799.98px) {
  .karsi thead { display: none; }
  .karsi table, .karsi tbody, .karsi tr, .karsi th, .karsi td { display: block; width: auto !important; }
  .karsi tr { padding: 18px 0 16px; border-bottom: 1px solid var(--ayirici); }
  .karsi th, .karsi td { border: 0; padding: 0; }
  .karsi tbody th { margin-bottom: 10px; font-size: var(--t-baslik); }
  .karsi td + td { margin-top: 10px; }
  .karsi td::before { content: attr(data-baslik); display: block; margin-bottom: 2px; font-size: var(--t-kucuk); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kiyi-iz); }
}

/* ana sayfa SSS: belge sayfalarının .sss dili */
.sss--ana { max-width: 48rem; border-top: 1px solid var(--ayirici); margin: 0; }
.sss--ana summary { font-size: var(--t-sade); }
.sss--ana .cevap p { color: var(--metin-2); max-width: 40em; }
@media (hover: hover) and (pointer: fine) { .sss summary:hover { color: var(--eylem); } }