/* ============ Sinematik portfolyo — stil ============
   Görsel dil: koyu orman yeşili sahne, krem yazı ve kâğıt, adaçayı vurgu; yumuşak serif başlıklar.
   Renk ve yazı tipi: aşağıdaki değişkenler. Yerleşim: bölüm blokları + sondaki mobil bloğu.
   Akıcılık kuralı: kaydırırken sürekli değişen her şey yalnız transform ve opacity ile değişir;
   width/height/top/left ya da filter'ı kare kare değiştiren bir kural ekleme. */

/* Yazı tipleri yerelden yüklenir; üçüncü tarafa istek gitmez. */
@font-face { font-family: 'Fraunces Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations'); 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: 'Fraunces Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations'); 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: 'Fraunces Variable'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/fraunces-latin-ext-wght-italic.woff2') format('woff2-variations'); 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: 'Fraunces Variable'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations'); 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 Tight Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-tight-latin-ext-wght-normal.woff2') format('woff2-variations'); 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 Tight Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-tight-latin-wght-normal.woff2') format('woff2-variations'); 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; }
/* Ad (Devrim Kılıçarslan) her yerde el yazısı: Italianno, SIL OFL 1.1 */
@font-face { font-family: 'Italianno'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/italianno-latin-ext-400-normal.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: 'Italianno'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/italianno-latin-400-normal.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 {
  --sahne: #0c1828;                      /* sahne tonu. Film bu tona göre kodlanır (config.js film.sahne); app.js açılışta oradan yazar */
  --sahne-rgb: 12, 24, 40;               /* aynı ton, saydam kullanım için; app.js yazar */
  --perde: rgba(77, 153, 255, .1569);   /* sahne tonunu filmin üstüne veren düz katman; app.js film.sahne'den hesaplar */
  --zemin: #000;                         /* filmin altı her zaman saf siyahtır: film kenarı ancak böyle kaybolur. Değiştirme */
  --vurgu: #d9b97a;                      /* adaçayı: çizgiler, etkin öğeler, küçük başlıklar */
  --vurgu-koyu: #7a5c28;                 /* adaçayının koyusu: krem kâğıt üstündeki küçük yazı (kontrast ≥ 4,5:1) */
  --metin: #f7f3ea;                      /* krem */
  --yumusak: #ddd8cb;                    /* paragraf */
  --soluk: #a9b3c2;                      /* ikincil yazı */
  --cizgi: rgba(244, 238, 221, .11);     /* ince ayırıcı */
  --kagit: #f7f3ea;
  --murekkep: #0e1b2c;
  --baslik: 'Fraunces Variable', 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --govde: 'Inter Tight Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tuy-x: 9%;                           /* film kenarının zemine karıştığı bant (yatay / dikey) */
  --tuy-y: 7%;
  --kenar: clamp(20px, 6vw, 96px);       /* sayfa kenar boşluğu */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sahne); color: var(--metin); color-scheme: dark; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; scrollbar-width: thin; scrollbar-color: #2a3f5c var(--sahne); }
html:not(.hazir) { overflow: hidden; }            /* film inene kadar kaydırma kapalı */
body { margin: 0; font: 400 16px/1.6 var(--govde); -webkit-font-smoothing: antialiased; }
::selection { background: var(--vurgu); color: var(--murekkep); }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.gizli-metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js-yok { position: relative; z-index: 30; margin: 0; padding: 40px var(--kenar); }

.atla { position: fixed; z-index: 20; left: 12px; top: -80px; padding: 10px 18px; background: var(--kagit); color: var(--murekkep); border-radius: 999px; text-decoration: none; font-weight: 600; }
.atla:focus { top: 12px; }

/* ---------- kaydırma şeridi ve ölçer ---------- */
.iz { width: 1px; }
.olcu { position: fixed; left: 0; top: 0; width: 0; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none; }

/* ---------- sahne, film ve perde ----------
   Film saf siyah zeminde durur; sahnenin yeşili en üstteki düz yarı saydam katmandan (.perde) gelir.
   Karışım modu (mix-blend-mode) yok: düz saydamlık her tarayıcıda aynı sonucu verir. Perde kişiyi de
   hafifçe soldurur; film bunun tersi uygulanarak kodlandığı için ten rengi özgün hâliyle görünür. */
.sahne { position: fixed; z-index: 0; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--zemin); contain: layout paint; }
/* Ortalama translate(-50%) ile: mobilde film ekrandan geniştir ve grid/flex ortalaması taşan kutuyu sola yaslar.
   Kaydırmayı app.js aynı transform'a ekler. */
.film { position: absolute; left: 50%; top: 50%; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; transform: translate3d(-50%, -50%, 0); will-change: transform; }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--zemin); pointer-events: none; }
/* Kenar yumuşatma: zemin siyah olduğu için maske yerine sabit siyah degrade yeter (maske her karede yeniden bileşim ister). */
.film::after { content: ''; position: absolute; z-index: 1; inset: -1px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--zemin) 0, transparent var(--tuy-x), transparent calc(100% - var(--tuy-x)), var(--zemin) 100%),
    linear-gradient(180deg, var(--zemin) 0, transparent var(--tuy-y), transparent calc(100% - var(--tuy-y)), var(--zemin) 100%); }
/* Kişinin arkasındaki yumuşak ışık havuzu: filmle birlikte kayar (filmin çocuğu), sahneye derinlik verir. */
.film::before { content: ''; position: absolute; z-index: 2; left: 50%; top: 46%; width: 150vh; height: 150vh; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(217, 185, 122, .085), rgba(217, 185, 122, .035) 48%, transparent 74%); }
.cerceve { position: absolute; z-index: 3; overflow: visible; opacity: 0; pointer-events: none; }
.cerceve path { fill: none; stroke: var(--metin); stroke-width: 1.5; stroke-linecap: round; }
.alt-golge { display: none; }
.perde { position: absolute; inset: 0; background: var(--perde); pointer-events: none; }

/* ---------- yükleyici: krem bir perde; film hazır olunca ışıklar kararır gibi sahneye açılır ---------- */
/* Perde iki yarıdan oluşur: hazır olunca sola ve sağa açılır, site arkadan belirir */
.yukleyici { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 22px; overflow: hidden; color: var(--murekkep); transition: visibility 0s linear 1.15s; }
.yukleyici::before, .yukleyici::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; width: 50.5%; background: var(--kagit); transition: transform 1.1s cubic-bezier(.77, 0, .18, 1); }
.yukleyici::before { left: 0; }
.yukleyici::after { right: 0; }
.hazir .yukleyici { visibility: hidden; }
.hazir .yukleyici::before { transform: translate3d(-100%, 0, 0); }
.hazir .yukleyici::after { transform: translate3d(100%, 0, 0); }
.yukleyici > * { transition: opacity .45s ease; }
.hazir .yukleyici > * { opacity: 0; }
/* Ad: el yazısı (Italianno), tek satırda; kalem soldan sağa tek hamlede "Devrim Kılıçarslan" yazar, ardından unvan belirir.
   Yazı ≈2,2 sn; app.js yazı bitmeden perdeyi açmaz (YAZI_BITIS ile aynı tutun). */
.yukleyici-ad { margin: 0; padding: 0 20px; display: flex; gap: .18em; white-space: nowrap; font: 400 clamp(44px, 10vw, 140px)/1 'Italianno', var(--baslik); letter-spacing: 0; }
.yukleyici-ad span { padding: 0 .1em; clip-path: inset(-30% 100% -30% 0); animation: ykYaz var(--sure) cubic-bezier(.5, .1, .4, 1) var(--gecikme) forwards; }
.yukleyici-ad .yk-ad { --sure: .75s; --gecikme: .2s; }
.yukleyici-ad .yk-soyad { --sure: 1.15s; --gecikme: .9s; }
@keyframes ykYaz { to { clip-path: inset(-30% -10% -30% 0); } }
.yukleyici-unvan { margin: -6px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--vurgu-koyu); opacity: 0; animation: ykBelir .7s ease 1.75s forwards; }
@keyframes ykBelir { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .yukleyici-ad span, .yukleyici-unvan { animation: none !important; clip-path: none; opacity: 1; }
  .yukleyici::before, .yukleyici::after { transition: none; }
  .hazir .yukleyici::before, .hazir .yukleyici::after { transform: none; opacity: 0; transition: opacity .3s; }
}
.yukleyici-cubuk { width: min(180px, 40vw); height: 1px; border-radius: 2px; background: rgba(24, 36, 28, .14); overflow: hidden; }
.yukleyici-cubuk i { display: block; height: 100%; background: var(--vurgu-koyu); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s linear; }
.yukleyici-cubuk.belirsiz i { animation: belirsiz 1.4s ease-in-out infinite; }
@keyframes belirsiz { 0% { transform: translateX(-100%) scaleX(.4); } 100% { transform: translateX(100%) scaleX(.4); } }
.yukleyici-atla { position: absolute; inset: auto 0 calc(40px + env(safe-area-inset-bottom, 0px)); width: max-content; margin: 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 12px; letter-spacing: .08em; color: var(--vurgu-koyu); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; visibility: hidden; opacity: 0; animation: ykBelir .6s ease 7s forwards, ykGorun 0s linear 7s forwards; }
@keyframes ykGorun { to { visibility: visible; } }
.hazir .yukleyici-atla { animation: none; visibility: hidden; }
/* Perde açılırken unvan da hemen söner (belirme animasyonu opaklığı 1’de tutmasın) */
.hazir .yukleyici-unvan { animation: none; opacity: 0; transition: opacity .25s ease; }
.yukleyici-yuzde { margin: -10px 0 0; min-height: 1.5em; font-size: 11px; letter-spacing: .12em; opacity: .8; color: var(--vurgu-koyu); font-variant-numeric: tabular-nums; }

/* ---------- üst çubuk: ad + bölüm çubuğu ----------
   Bölüm çubuğu filmin sahne sahne nerede olduğunu gösterir: her dilim, film o bölüme yaklaşırken dolar.
   Dilimler aynı zamanda gezinme bağlantısıdır. */
.ust { position: fixed; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: max(20px, env(safe-area-inset-top, 0px)) var(--kenar) 0; pointer-events: none; }
.ust > * { pointer-events: auto; }
.ust-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 400 19px/44px var(--baslik); color: var(--metin); text-decoration: none; }
.menu { flex: none; display: flex; gap: 8px; width: min(600px, 52vw); }
.menu a { flex: 1 1 0; min-width: max-content; padding: 12px 0 14px; font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--soluk); text-decoration: none; transition: color .3s; }
.menu a:hover, .menu a[aria-current="true"] { color: var(--metin); }
.menu a i { display: block; height: 2px; margin-top: 9px; border-radius: 2px; background: rgba(244, 238, 221, .16); overflow: hidden; }
.menu a b { display: block; height: 100%; border-radius: 2px; background: var(--vurgu); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
/* Etkin bölüm yalnız renkle değil, kalınlaşan çizgiyle de gösterilir (renk ayırt edemeyenler için) */
.menu a[aria-current="true"] i { height: 3px; margin-top: 8px; }
.menu a:focus-visible { outline-offset: 2px; }

/* ---------- açılış ipucu ve yapay zekâ notu ---------- */
.ipucu, .yz-notu { position: fixed; z-index: 3; margin: 0; color: var(--soluk); transition: opacity .6s; pointer-events: none; }
.ipucu { left: 50%; bottom: max(28px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; font-size: 13px; white-space: nowrap; }
.ipucu i { width: 1px; height: 36px; background: linear-gradient(var(--vurgu), transparent); transform-origin: 50% 0; animation: ipucu 2.4s ease-in-out infinite; }
@keyframes ipucu { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.yz-notu { left: var(--kenar); bottom: max(28px, env(safe-area-inset-bottom, 0px)); max-width: 30ch; font-size: 12.5px; line-height: 1.5; }
.kaydi .ipucu, .kaydi .yz-notu { opacity: 0; }
.kaydi .ipucu i { animation-play-state: paused; }
/* Telefon otomatik oynatmaya izin vermediyse (ör. Düşük Güç Modu) film ancak bir dokunuşla canlanır: bunu söyle */
.ipucu-dokun { display: none; }
.dokunma-bekliyor .ipucu-kaydir, .dokunma-bekliyor .ipucu i { display: none; }
.dokunma-bekliyor .ipucu-dokun { display: inline; color: var(--metin); }
/* Kaydırılsa da görünür kalır; alttaki panellerin üstüne binmesin diye üst çubuğun altına, koyu hap içinde */
.dokunma-bekliyor .ipucu, .dokunma-bekliyor.kaydi .ipucu { top: calc(env(safe-area-inset-top, 0px) + 96px); bottom: auto; padding: 10px 18px; border-radius: 999px; background: rgba(12, 24, 40, .94); opacity: 1; }

/* ---------- bölümler (film üstünde sabit; görünürlüğü app.js film saniyesine göre verir) ---------- */
.bolum { --g: 0; position: fixed; z-index: 2; opacity: 0; pointer-events: none; will-change: opacity; }
.bolum.etkin { pointer-events: auto; }
.bolum h2:not(.bolum-adi) { margin: 0 0 .55em; font: 400 clamp(28px, 2.7vw, 42px)/1.16 var(--baslik); letter-spacing: -.015em; }
/* Kâğıt kartın küçük başlığı */
.bolum-adi { margin: 0 0 .7em; font: italic 400 clamp(17px, 1.3vw, 20px)/1.3 var(--baslik); color: var(--vurgu); }
/* Panelsiz metin (.sis): yazı film jeneriği gibi doğrudan sahnede durur. Arkasındaki kenarsız sis sahne tonundadır:
   boş sahnede görünmez, filmin parlak bir yeri alta gelirse onu koyultup okunurluğu korur. */
.sis::before { content: ''; position: absolute; z-index: -1; inset: -5% -7%; border-radius: 48px; background: rgba(var(--sahne-rgb), .84); box-shadow: 0 0 48px 96px rgba(var(--sahne-rgb), .84); pointer-events: none; }

/* 1 · Giriş: ad film jeneriği gibi iki satır; ikinci satır içeriden başlar ve eğik yazılır */
.bolum-giris { left: var(--kenar); top: 50%; max-width: 46vw; transform: translate3d(0, calc(-46% + (1 - var(--g)) * 18px), 0); }
.selam { margin: 0 0 .9em; font-size: clamp(15px, 1.2vw, 19px); color: var(--soluk); }
/* Satır aralığı 1.12: üst satırın kuyruğu (ş, ç, y, g) alt satırın noktasına (İ, Ö, Ü) değmesin */
.isim { margin: 0; font: 300 var(--isim-boyut, clamp(58px, 8.8vw, 156px))/1.12 var(--baslik); letter-spacing: -.025em; }
.isim span { display: block; width: max-content; white-space: nowrap; }
.isim span + span { padding-left: .5em; font-style: italic; }
.unvan { margin: 1.5em 0 0; font-size: clamp(15px, 1.25vw, 19px); font-weight: 500; }
.durum { margin: .6em 0 0; display: flex; align-items: center; gap: .65em; font-size: clamp(13.5px, 1.05vw, 15.5px); color: var(--soluk); }
.nokta { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--vurgu); }

/* 2 · Hakkında */
.bolum-hakkinda { left: var(--kenar); top: 50%; width: min(37vw, 500px); transform: translate3d(0, calc(-50% + (1 - var(--g)) * 16px), 0); }
.paragraf { margin: 0; color: var(--yumusak); }
.istatistik { display: flex; gap: clamp(16px, 1.8vw, 30px); margin: 1.6em 0 0; padding: 1.25em 0 0; list-style: none; border-top: 1px solid var(--cizgi); }
.istatistik li + li { padding-left: clamp(16px, 1.8vw, 30px); border-left: 1px solid var(--cizgi); }
.istatistik strong { display: block; font: 300 clamp(28px, 2.5vw, 38px)/1 var(--baslik); }
.istatistik span { display: block; margin-top: .5em; font-size: 13px; line-height: 1.35; color: var(--soluk); }
.baglantilar { display: flex; flex-wrap: wrap; gap: 0 22px; margin: .7em 0 0; padding: 0; list-style: none; }
.baglantilar a { display: inline-block; padding: 12px 0; font-size: 14px; font-weight: 500; color: var(--soluk); text-decoration: none; transition: color .3s; }
.baglantilar a:hover { color: var(--vurgu); }
.dipnot { margin: 1.3em 0 0; padding-top: 1.1em; border-top: 1px solid var(--cizgi); font-size: 12px; line-height: 1.55; color: var(--soluk); }
.dipnot a { color: inherit; }

/* ---------- hareket azaltılmış: film duraklar arasında atlar, öğeler kaymaz ---------- */
.az-hareket .bolum { transition: opacity .3s ease; }
.az-hareket .yukleyici { transition-delay: .3s; }
.az-hareket .yukleyici-ad span, .az-hareket .yukleyici-unvan { animation: none; clip-path: none; opacity: 1; }
.az-hareket .yukleyici::before, .az-hareket .yukleyici::after { transition: opacity .3s; }
.az-hareket.hazir .yukleyici::before, .az-hareket.hazir .yukleyici::after { transform: none; opacity: 0; }
.az-hareket .ipucu i, .az-hareket .yukleyici-cubuk.belirsiz i { animation: none; }

/* ---------- alçak ekran (yatay telefon, büyük yakınlaştırma): panel ekrandan uzunsa kendi içinde kayar ---------- */
@media (min-width: 760.02px) and (max-height: 600px) {
  .bolum { max-height: calc(100vh - 84px); overflow-y: auto; }
  .bolum-giris, .bolum-hakkinda { top: calc(50% + 36px); }
  /* Kendi içinde kayan kutu taşan sisi keser: burada sis, bölümün kendi yumuşak köşeli zemini olur */
  .sis { padding: 16px 20px; border-radius: 0 24px 24px 24px; background: rgba(var(--sahne-rgb), .84); }
  .sis::before { display: none; }   /* taşma kırpması uzun düşüşü keserdi */
}

/* ============ mobil (760 px ve altı) ============
   Film ekran yüksekliğini doldurur, karakter ortada kalır; her bölüm altta, sahneye karışan koyu
   geçişin üstünde durur ve yüzü örtmez. Panel çerçevesi ve bulanıklık yok: telefonda video üstünde pahalıdır. */
@media (max-width: 760px) {
  :root { --kenar: 20px; --tuy-y: 5%; }
  .film { width: auto; height: 100vh; height: 100lvh; }
  /* Perdenin altında durur: siyaha değil sahne tonuna doğru koyulaşır */
  .alt-golge { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 78%; opacity: var(--golge, 0); background: linear-gradient(to top, #000 16%, rgba(0, 0, 0, .93) 46%, rgba(0, 0, 0, .62) 72%, transparent); }

  /* Üst çubuk: ad solda, etkin bölümün adı sağda; altında altı dilimlik bölüm çubuğu */
  .ust { flex-direction: column; align-items: stretch; gap: 0; padding-top: max(10px, env(safe-area-inset-top, 0px)); }
  .ust-ad { line-height: 40px; padding-right: 124px; font-size: 18px; }
  .menu { position: relative; width: auto; gap: 5px; }
  .menu a { min-width: 0; padding: 8px 0 18px; }
  .menu a i, .menu a[aria-current="true"] i { height: 3px; margin-top: 0; }
  .menu a span { position: absolute; right: 0; bottom: 100%; line-height: 40px; opacity: 0; transition: opacity .4s; pointer-events: none; }
  .menu a[aria-current="true"] span { opacity: 1; color: var(--vurgu); }

  .ipucu { bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
  .yz-notu { left: 0; right: 0; bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 82px); max-width: none; padding: 0 var(--kenar); text-align: center; }
  .dokunma-bekliyor .ipucu, .dokunma-bekliyor.kaydi .ipucu { top: calc(env(safe-area-inset-top, 0px) + 88px); }
  .sis::before { display: none; }
  /* Bölüm ekrandan uzunsa (küçük telefon, büyük yazı) kendi içinde kayar; üst çubuğun altında kalır */
  .bolum, .bolum-giris, .bolum-hakkinda {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; text-align: left;
    max-height: calc(100vh - 92px - env(safe-area-inset-top, 0px)); max-height: calc(100svh - 92px - env(safe-area-inset-top, 0px)); overflow-y: auto;
    padding: 0 var(--kenar) calc(26px + env(safe-area-inset-bottom, 0px));
    transform: translate3d(0, calc((1 - var(--g)) * 16px), 0); }
  .bolum h2:not(.bolum-adi) { font-size: clamp(26px, 7.6vw, 36px); }
  .bolum-adi { margin-bottom: .5em; font-size: 17px; }

  .isim { font-size: var(--isim-boyut, clamp(46px, 15.5vw, 86px)); }
  .yukleyici-ad { font-size: clamp(40px, 13.5vw, 96px); }
  .yukleyici-unvan { font-size: 10px; letter-spacing: .24em; }
  .unvan { margin-top: 1.1em; }
  .paragraf { font-size: 15px; }
  .istatistik { margin-top: 1.1em; padding-top: 1em; }
}

/* ---------- bu siteye özel ekler ---------- */
/* Hikâye filmi tam kadraj sahnelerden oluşur: film ekranı kaplar, siyah stüdyo ışık havuzu yok, kenar tüyü ince */
:root { --tuy-x: 2.5%; --tuy-y: 2.5%; }
/* Son sahnede portre çevresine çerçeve çizilmez (motor yolu hesaplamaya devam eder, yalnız görünmez) */
.cerceve { visibility: hidden; }
.film { width: max(100vw, 177.78vh); }
.film::before, .film::after { display: none; }
/* Metin okunurluğu: blok sis yerine kenardan yumuşayan degrade (tam kadraj sahnede leke gibi durmasın) */
/* Koyu uç ekran kenarına denk gelir: bölümün ekran kenarına uzaklığı kadar taşar */
.bolum-adim::before, .bolum-hakkinda::before { inset: -60% -100vw calc(-1 * max(84px, 10vh)) calc(-1 * var(--kenar)); border-radius: 0; box-shadow: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .55) 50%, transparent); }
.bolum-adim[data-bolum="adim3"]::before { inset: -100vh calc(-1 * var(--kenar)) -100vh -70%; background: linear-gradient(to left, rgba(0, 0, 0, .86), rgba(0, 0, 0, .74) 52%, rgba(0, 0, 0, .3) 80%, transparent); }
.bolum-hakkinda::before { inset: -100vh -45% -100vh calc(-1 * var(--kenar)); background: linear-gradient(to right, rgba(0, 0, 0, .82), rgba(0, 0, 0, .58) 60%, transparent); }
/* Altı adım ve Hakkımda: solda, panelsiz metin */
/* Altyazı bandı: yüzler kadrajın üst yarısında, metin alt üçte birde */
.bolum-adim { left: var(--kenar); bottom: max(84px, 10vh); width: min(62vw, 860px); transform: translate3d(0, calc((1 - var(--g)) * 16px), 0); }
.bolum-adim .iki-yan { grid-template-columns: max-content 1fr max-content 1fr; }
/* 03'te imza kadrajın sol altında: metin sağda */
.bolum-adim[data-bolum="adim3"] { left: auto; right: var(--kenar); bottom: auto; top: 50%; width: min(34vw, 460px); transform: translate3d(0, calc(-50% + (1 - var(--g)) * 16px), 0); }
.bolum-adim[data-bolum="adim3"] .iki-yan { grid-template-columns: max-content 1fr; }
.adim-no { margin: 0 0 .6em; font: italic 400 clamp(17px, 1.3vw, 20px)/1.3 var(--baslik); color: var(--vurgu); }
.iki-yan { display: grid; grid-template-columns: max-content 1fr; gap: .55em 1.2em; margin: 1.2em 0 0; padding-top: 1.1em; border-top: 1px solid var(--cizgi); font-size: clamp(14.5px, 1.1vw, 16.5px); }
.iki-yan dt { font-weight: 600; color: var(--metin); }
.iki-yan dd { margin: 0; color: var(--yumusak); }
/* Hakkımda bağlantıları: tipografik iletişim bloğu — etiket, büyük numara, zarif bağlantılar, sayfalar */
.bolum-hakkinda .baglantilar { margin-top: 1.7em; gap: 0; align-items: baseline; }
.baglantilar li.eylem-telefon { flex-basis: 100%; margin-bottom: .55em; }
.baglantilar li.eylem-telefon::before { content: 'İletişim'; display: block; margin-bottom: .45em; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--vurgu); }
.baglantilar li.eylem-telefon a { display: inline-flex; align-items: center; gap: .45em; padding: 2px 0; font: 300 clamp(26px, 2.3vw, 34px)/1.15 var(--baslik); color: var(--metin); text-decoration: none; letter-spacing: .01em; font-variant-numeric: lining-nums; transition: color .3s; }
.baglantilar li.eylem-telefon a svg { width: .62em; height: .62em; fill: var(--vurgu); }
.baglantilar li.eylem-telefon a:hover { color: var(--vurgu); }
.baglantilar li.eylem:not(.eylem-telefon) + li.eylem:not(.eylem-telefon) { margin-left: 10px; }
.baglantilar li.eylem:not(.eylem-telefon) a {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 22px;
  border: 1px solid rgba(217, 185, 122, .6); border-radius: 0 23px 23px 23px; background: rgba(12, 24, 40, .5);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--metin); text-decoration: none;
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .6); transition: background-color .3s, border-color .3s, color .3s;
}
.baglantilar li.eylem:not(.eylem-telefon) a svg { width: 18px; height: 18px; flex: none; fill: var(--vurgu); transition: fill .3s; }
.baglantilar li.eylem.eylem-whatsapp a svg { fill: #25d366; }
.baglantilar li.eylem:not(.eylem-telefon) a:hover, .baglantilar li.eylem:not(.eylem-telefon) a:focus-visible { background: var(--vurgu); border-color: var(--vurgu); color: #0c1828; }
.baglantilar li.eylem:not(.eylem-telefon) a:hover svg { fill: #0c1828; }
.baglantilar .satir-sonu { flex-basis: 100%; margin: 26px 0 4px; padding-top: 1.05em; border-top: 1px solid var(--cizgi); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--soluk); }
.baglantilar .satir-sonu::before { content: 'Sayfalar'; }
.baglantilar li:not(.eylem):not(.satir-sonu) { margin-right: 22px; }
.baglantilar li:not(.eylem):not(.satir-sonu) a { padding: 6px 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); }
.dipnot .imza-satiri { display: block; margin-top: .9em; }
.bolum-hakkinda .dipnot { margin-top: 1.3em; font-size: 11px; line-height: 1.6; opacity: .75; }
@media (max-width: 760px) {
  .baglantilar li.eylem-telefon a { font-size: 26px; }
  .baglantilar li.eylem:not(.eylem-telefon) { flex: 1 1 0; }
  .baglantilar li.eylem:not(.eylem-telefon) + li.eylem:not(.eylem-telefon) { margin-left: 8px; }
  .baglantilar li.eylem:not(.eylem-telefon) a { width: 100%; padding: 0 12px; letter-spacing: .1em; }
  .baglantilar li:not(.eylem):not(.satir-sonu) { margin-right: 18px; }
}
@media (min-width: 760.02px) and (max-height: 600px) { .bolum-adim { bottom: 64px; } }
@media (max-width: 760px) {
  .film { width: auto; height: 100vh; height: 100lvh; }
  /* Dikey telefon: film ekranın üst %66'sında (karenin daha geniş bölümü görünür), alt kenarı zemine erir; metin altta kalır */
  @media (orientation: portrait) {
    /* Film 200vw: en yakın kadrajda karenin yarısı görünür; kalabalık sahnede app.js filmi üst kenarı sabit kalarak küçültür.
       Üst kenar üst çubuğun altında (56px) durur. */
    .film { width: 200vw; height: auto; top: calc(56px + 56.25vw); transform-origin: 50% 0; }
    .film::after { display: block; content: ''; position: absolute; inset: auto 0 -1px; height: 34%; pointer-events: none;
      background: linear-gradient(to bottom, transparent, var(--zemin)); }
    /* Açılış bloğu alttaki sabit yapay zekâ notu ve "kaydırın" ipucunun üstünde dursun (üst üste binmesin) */
    .bolum-giris { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
    /* Hakkımda telefonda sıkı: yüz üstte görünür kalsın (istatistikler diğer sayfalarda da var) */
    .bolum-hakkinda .istatistik { display: none; }
    .bolum-hakkinda h2 { font-size: clamp(23px, 6.6vw, 30px); }
    .bolum-hakkinda .adim-no { margin-bottom: .35em; }
    .bolum-hakkinda .paragraf { font-size: 14px; line-height: 1.5; }
    .bolum-hakkinda .baglantilar { margin-top: 1.1em; }
    .baglantilar li.eylem-telefon { margin-bottom: .4em; }
    .baglantilar li.eylem-telefon a { font-size: 24px; }
    .baglantilar .satir-sonu { margin-top: 16px; padding-top: 12px; }
    .bolum-hakkinda .dipnot { margin-top: .9em; }
  }
  .bolum-adim, .bolum-adim[data-bolum="adim3"] { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none;
    max-height: calc(100svh - 92px - env(safe-area-inset-top, 0px)); overflow-y: auto;
    padding: 0 var(--kenar) calc(26px + env(safe-area-inset-bottom, 0px)); transform: translate3d(0, calc((1 - var(--g)) * 16px), 0); }
  .iki-yan, .bolum-adim .iki-yan, .bolum-adim[data-bolum="adim3"] .iki-yan { grid-template-columns: 1fr; gap: .15em; font-size: 14px; }
  .iki-yan dd + dt { margin-top: .5em; }
}
/* Tüm siteye geçiş: film sayfasından diğer sayfalara her an ulaşılır */
.tum-site { position: fixed; z-index: 6; left: var(--kenar); bottom: max(24px, env(safe-area-inset-bottom, 0px)); padding: 10px 16px; border-radius: 0 16px 16px 16px; background: var(--kagit); color: var(--murekkep); font-size: 13.5px; font-weight: 600; text-decoration: none; opacity: 0; transition: opacity .6s; }
.kaydi .tum-site { opacity: 1; }
.tum-site:focus-visible { opacity: 1; }
@media (max-width: 760px) {
  .tum-site { left: auto; right: var(--kenar); top: calc(env(safe-area-inset-top, 0px) + 74px); bottom: auto; padding: 7px 12px; font-size: 12.5px; }
}

/* ---------- Ad her yerde el yazısı (Italianno) ---------- */
.ust-ad { font: 400 31px/44px 'Italianno', var(--baslik); letter-spacing: 0; }
.isim { font-family: 'Italianno', var(--baslik); font-weight: 400; letter-spacing: 0; line-height: .98; font-size: var(--isim-boyut, clamp(76px, 11.5vw, 200px)); }
.isim span + span { font-style: normal; padding-left: .55em; }
@media (max-width: 760px) {
  .ust-ad { font-size: 29px; line-height: 40px; }
  .isim { font-size: var(--isim-boyut, clamp(62px, 20vw, 110px)); }
}
/* ---------- Alçak ekranlar: yatay tablet ve yatay telefon ---------- */
@media (min-width: 760.02px) and (max-height: 820px) {
  .bolum-hakkinda .istatistik { display: none; }
  .bolum-hakkinda .baglantilar { margin-top: 1.1em; }
}
@media (min-width: 760.02px) and (max-height: 600px) {
  /* "Tüm site" düğmesi alttaki yazıların üstüne düşmesin: sağ üste, bölüm çubuğunun altına */
  .tum-site { left: auto; right: var(--kenar); bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 62px); padding: 7px 12px; font-size: 12.5px; }
  .isim { font-size: var(--isim-boyut, clamp(54px, 13vh, 96px)); }
  /* 03 alçak ekranda sağ ortada üst çubuğa biniyor: diğer adımlar gibi alta */
  .bolum-adim[data-bolum="adim3"] { left: var(--kenar); right: auto; top: auto; bottom: 64px; width: min(62vw, 860px); transform: translate3d(0, calc((1 - var(--g)) * 16px), 0); }
  .bolum-adim[data-bolum="adim3"] .iki-yan { grid-template-columns: max-content 1fr max-content 1fr; }
  .bolum-adim[data-bolum="adim3"]::before { inset: -60% -100vw -64px calc(-1 * var(--kenar)); background: linear-gradient(to top, rgba(0, 0, 0, .86), rgba(0, 0, 0, .6) 55%, transparent); }
}
@media (min-width: 760.02px) and (max-height: 480px) {
  /* Yatay telefon: Hakkımda tek ekrana sığsın (paragraf ve dipnot diğer sayfalarda da var) */
  .bolum-hakkinda .paragraf, .bolum-hakkinda .dipnot,
  .bolum-hakkinda .satir-sonu, .bolum-hakkinda .baglantilar li:not(.eylem) { display: none; }
}
@media (min-width: 760.02px) and (max-height: 640px) {
  .bolum-hakkinda .dipnot { display: none; }
}