/* =============================================================
   İbrahim Salih İlke — koyu lacivert, scroll sürümlü film
   ============================================================= */

:root{
  /* --- derinlik --- */
  --murekkep:  #081127;   /* en dip */
  --lacivert:  #0B1631;
  --lacivert2: #0E1C43;
  --lacivert3: #132658;
  --lacivert4: #1C356B;
  /* alt sayfanın tek zemini — bölümler kendi karartmasını koymaz, yalnız yan ışıma */
  --zemin:     #09122A;

  /* --- yüzey --- */
  --cam:        rgba(159,178,207,.07);
  --cam-kenar:  rgba(159,178,207,.16);

  /* --- yazı --- */
  --fildisi:  #EEF2F8;
  --celik:    #9FB2CF;
  --celik-sr: #6E82A3;

  /* --- vurgu --- */
  --krem:      #F3EFE6;
  --krem-2:    #E8E1D3;
  --krem-yazi: #19253D;
  --krem-sr:   #5B6274;
  --pirinc:    #C9A15E;
  --pirinc-ac: #E6CB96;

  --gecis: cubic-bezier(.19,1,.22,1);

  --kenar: clamp(20px, 5vw, 92px);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background: var(--murekkep);
  color: var(--fildisi);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(14.5px, .42vw + 13px, 16px);
  line-height: 1.72;
  letter-spacing: .012em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Cormorant varsayılanı eski-stil rakam; her yerde hizalı rakam istiyoruz */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
body.perde-acik{ overflow:hidden; height:100vh; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background: var(--pirinc); color: var(--murekkep); }

/* zemin dokusu: çok derin bir radyal lacivert */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #152859 0%, #0E1C43 38%, #0C1625 72%, #081127 100%);
}
body::after{
  content:''; position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: kipir 7s steps(6) infinite;
}
@keyframes kipir{
  0%{transform:translate(0,0)} 16%{transform:translate(-2%,1%)} 33%{transform:translate(1%,-2%)}
  50%{transform:translate(-1%,2%)} 66%{transform:translate(2%,1%)} 83%{transform:translate(1%,-1%)} 100%{transform:translate(0,0)}
}

/* ---------- ortak parçalar ---------- */
.etiket{
  font-size: 10px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
  color: var(--pirinc); display:flex; align-items:center; gap:.9em;
}
.etiket::before{ content:''; width:clamp(18px,3vw,44px); height:1px; background:currentColor; opacity:.55; }

.kural{ display:block; width:64px; height:1px; background:linear-gradient(90deg,var(--pirinc),transparent); }

.dugme{
  display:inline-flex; align-items:center; gap:.7em;
  padding: .95em 1.9em; border-radius:999px;
  font-size:13px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid var(--cam-kenar); background:var(--cam);
  transition: .5s var(--gecis);
  backdrop-filter: blur(8px);
}
.dugme::after{ content:'→'; transition:transform .5s var(--gecis); }
.dugme:hover{ border-color:var(--pirinc); color:var(--pirinc-ac); }
.dugme:hover::after{ transform:translateX(5px); }
.dugme--pirinc{
  border-color: rgba(201,161,94,.5);
  background: linear-gradient(180deg, rgba(201,161,94,.16), rgba(201,161,94,.05));
  color: var(--pirinc-ac);
}
.dugme--pirinc:hover{ background:var(--pirinc); color:var(--murekkep); border-color:var(--pirinc); }

/* =============================================================
   AÇILIŞ PERDESİ
   ============================================================= */
.perde{
  /* İsim ekranın alt yarısında, yatayda ortalı. "Atla" düğmesinin üstünde kalır. */
  position:fixed; inset:0; z-index:200; display:grid;
  justify-items:center; align-content:end;
  padding-bottom: clamp(96px, 17vh, 190px);
  background: radial-gradient(90% 70% at 50% 45%, #0E1C43 0%, #081127 75%);
  transition: opacity 1s var(--gecis), visibility 1s;
}
.perde.bitti{ opacity:0; visibility:hidden; }
.perde-ic{ display:grid; justify-items:center; gap:clamp(20px,3.2vh,40px); }
/* Ekran okuyucuya görünür, göze görünmez */
.gizli-metin{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* İsmin piksel dolgusu — genişlik/yükseklik JS'te aygıt oranına göre ayarlanır */
.perde-tuval{
  display:block; width:min(430px, 64vw); height:auto;
  image-rendering:pixelated;          /* kareler net kalsın */
}
/* ---- LOGO BİÇİMİ: yalnızca İS markası; üstte, ortada, küçük ----
   URL'ye ?perde=yazi yazarak isim biçimine geçilir (varsayılan: logo).
   .perde'nin "alta yasla" düzenini burada üste çeviriyoruz; ikisi de aynı
   özgüllükte olduğu için sıra önemli: bu blok .perde'den SONRA gelmeli. */
.perde--logo{
  align-content:start;
  padding-top: clamp(58px, 13vh, 118px);
  padding-bottom:0;
}
.perde--logo .perde-ic{ row-gap:clamp(16px,2.6vh,28px); }
/* 40 sütunluk ızgara 98px'e yayılınca bir kutu ~2,45px: kareler hâlâ
   seçiliyor. Genişlikle birlikte sütun sayısı da düştü — yalnızca genişlik
   küçültülseydi kutular gözle ayırt edilemeyip düz çizgiye dönerdi. */
.perde--logo .perde-tuval{ width:min(98px, 20vw); }
/* İlerleme çizgisi markadan geniş olmasın. */
.perde--logo .perde-cizgi{ width:min(70px, 18vw); }
@media (max-width:560px){
  .perde--logo .perde-tuval{ width:min(78px, 23vw); }
}

/* İlerleme çizgisi ve "Atla" düğmesi — isimle aynı lacivert ailesinde. */
.perde-cizgi{ display:block; width:min(190px,44vw); height:1px; background:rgba(120,150,200,.12); overflow:hidden; }
.perde-cizgi i{ display:block; height:100%; width:0; background:#2B56A9; transition:width .4s linear; }
.perde-atla{
  position:absolute; bottom:clamp(22px,5vh,48px); left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--celik-sr);
  padding:.7em 1.4em; border:1px solid rgba(159,178,207,.14); border-radius:999px; transition:.4s;
}
.perde-atla:hover{ color:var(--fildisi); border-color:var(--cam-kenar); }

/* =============================================================
   ÜST MENÜ
   ============================================================= */
.ust{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding: clamp(14px,2.2vh,26px) var(--kenar);
  transition: background .6s var(--gecis), backdrop-filter .6s, border-color .6s, padding .6s var(--gecis);
  border-bottom:1px solid transparent;
}
.ust.yapisik{
  background: rgba(4,8,18,.72); backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(159,178,207,.1);
  padding-top:clamp(10px,1.6vh,16px); padding-bottom:clamp(10px,1.6vh,16px);
}
.ust-logo{ display:flex; align-items:center; gap:.75rem; margin-right:auto; }
.ust-mono{
  font-family:var(--serif); font-size:20px; color:var(--pirinc); letter-spacing:.04em;
  border:1px solid rgba(201,161,94,.32); border-radius:8px; padding:.15em .5em .22em; line-height:1;
  transition:.5s var(--gecis);
}
.ust-logo:hover .ust-mono{ background:var(--pirinc); color:var(--murekkep); }
.ust-ad{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--celik); }
.ust-nav ul{ display:flex; gap:clamp(14px,2vw,30px); list-style:none; }
.ust-nav a{
  position:relative; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--celik-sr); padding:.4em 0; transition:color .4s;
}
.ust-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--pirinc);
  transition:width .5s var(--gecis);
}
.ust-nav a:hover, .ust-nav a.aktif{ color:var(--fildisi); }
.ust-nav a:hover::after, .ust-nav a.aktif::after{ width:100%; }
.ust-cta{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--pirinc-ac);
  border:1px solid rgba(201,161,94,.4); border-radius:999px; padding:.7em 1.4em; transition:.5s var(--gecis);
}
.ust-cta:hover{ background:var(--pirinc); color:var(--murekkep); }

.burger{ display:none; width:34px; height:20px; position:relative; }
.burger span{ position:absolute; left:0; right:0; height:1px; background:var(--fildisi); transition:.45s var(--gecis); }
.burger span:first-child{ top:4px; } .burger span:last-child{ bottom:4px; }
.burger.acik span:first-child{ top:9px; transform:rotate(45deg); }
.burger.acik span:last-child{ bottom:10px; transform:rotate(-45deg); }

.mobil-menu{
  position:fixed; inset:0; z-index:99; background:rgba(8,17,39,.97); backdrop-filter:blur(20px);
  display:grid; place-items:center; opacity:0; transition:opacity .5s var(--gecis);
  pointer-events:none;
}
/* açık display kuralı [hidden]'ı ezer — kapalıyken tüm sayfanın tıklamasını yutuyordu */
.mobil-menu[hidden]{ display:none !important; }
.mobil-menu.gorunur{ opacity:1; pointer-events:auto; }
.mobil-menu ul{ list-style:none; display:grid; gap:1.1rem; text-align:center; }
.mobil-menu a{
  font-family:var(--serif); font-weight:300; font-size:clamp(25px,7vw,36px); display:flex; align-items:baseline;
  gap:.6rem; justify-content:center;
}
.mobil-menu a span{ font-family:var(--sans); font-size:11px; letter-spacing:.3em; color:var(--pirinc); }

/* =============================================================
   FİLM — sabitlenmiş sahne
   ============================================================= */
.film{ position:relative; height: 620vh; }
.sahne{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:grid; place-items:center;
  transform-origin:50% 42%;
  will-change:transform, filter;
}

.toz{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  opacity:0; transition:opacity 1.4s var(--gecis);
}
body:not(.perde-acik) .toz{ opacity:1; }
/* kareler yoksa CSS zemini görünür kalsın */
body.film-yok .ufuk-parlama{ opacity:.7 !important; }

.ufuk-parlama{
  position:absolute; left:50%; top:50%; width:150vmax; height:150vmax;
  transform:translate(-50%,-50%); pointer-events:none;
  background: radial-gradient(circle, rgba(26,49,99,.55) 0%, rgba(10,20,48,.25) 35%, transparent 62%);
  transition: opacity .8s var(--gecis);
}

/* ---------- PORTRE ---------- */
.portre{
  --fx:0px; --fy:0px;
  position:absolute; z-index:2; pointer-events:none;
  right: clamp(16px, 7vw, 132px); left:auto;
  width: clamp(280px, 33vw, 480px);
  aspect-ratio: 3/4;
  will-change: transform, opacity, filter;
}
.portre-hale{
  position:absolute; inset:-22%;
  background: radial-gradient(circle at 50% 42%, rgba(60,104,190,.42) 0%, rgba(16,32,74,.28) 40%, transparent 68%);
  filter: blur(26px);
}
.portre img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius: 999px 999px 14px 14px;
  filter: saturate(.55) contrast(1.06) brightness(.86);
  mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.35) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.35) 88%, transparent 100%);
}
.portre.yok img{ display:none; }
.portre-bos{ display:none; }
.portre.yok .portre-bos{
  position:absolute; inset:0; display:grid; place-content:center; gap:.7rem; justify-items:center;
  border:1px dashed rgba(159,178,207,.2); border-radius:999px 999px 14px 14px;
  background:linear-gradient(180deg, rgba(16,32,74,.5), rgba(6,12,27,.2));
}
.portre.yok .portre-bos span{
  font-family:var(--serif); font-size:clamp(32px,4.6vw,56px); color:rgba(201,161,94,.5); letter-spacing:.05em;
}
.portre.yok .portre-bos em{
  font-style:normal; font-size:10px; letter-spacing:.2em; color:var(--celik-sr); text-transform:uppercase;
}
/* portreyi lacivertle kaynaştıran perde */
.portre-perde{
  position:absolute; inset:0; border-radius:999px 999px 14px 14px;
  background: linear-gradient(180deg, rgba(10,20,48,.18) 0%, rgba(6,12,27,.05) 40%, rgba(3,6,14,.75) 100%);
  mix-blend-mode: multiply;
}

.sis{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    /* 28 Eylül: "sayfa karanlık" (2 tur) — genel karartma çok hafif; okunurluğu artık
       her bölümün kendi yazı degradesi sağlıyor (.bolum--*::before) */
    linear-gradient(180deg, rgba(3,6,14,.45) 0%, rgba(3,6,14,.05) 20%, rgba(3,6,14,.05) 68%, rgba(3,6,14,.52) 100%),
    radial-gradient(120% 78% at 50% 50%, transparent 45%, rgba(3,6,14,.20) 100%);
}
.gren{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.35;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}

/* ---------- ufuk çizgisi ---------- */
.ufuk{
  position:absolute; left:0; right:0; top:84%; z-index:5; height:1px; display:grid; place-items:center;
  pointer-events:none;
}
.ufuk i{
  display:block; height:1px; width:0;
  background:linear-gradient(90deg, transparent, rgba(201,161,94,.55) 22%, rgba(159,178,207,.4) 50%, rgba(201,161,94,.55) 78%, transparent);
  box-shadow:0 0 18px rgba(201,161,94,.2);
}

/* ---------- bölümler ---------- */
.bolum{
  position:absolute; z-index:6; inset:0;
  display:grid; align-content:center; justify-items:start;
  padding: 0 var(--kenar);
  gap: clamp(14px, 2.4vh, 26px);
  opacity:0; visibility:hidden; will-change:opacity, transform;
  max-width: min(1500px, 100%); margin-inline:auto;
  /* film karesi parlak olduğunda yazı okunur kalsın */
  text-shadow: 0 1px 2px rgba(3,6,14,.5), 0 6px 34px rgba(3,6,14,.75);
}
/* sis hafifletildi — parlak karede küçük yazılar için daha sıkı gölge */
/* Yazının durduğu tarafa yumuşak degrade: tüm filmi karartmadan yazıyı okutur.
   ::before bölümle birlikte solar (opaklık JS'ten). */
.bolum--hero::before, .bolum--manifesto::before, .bolum--ilke::before, .bolum--kapanis::before{
  content:''; position:absolute; inset:-6% -4%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 24% 52%,
             rgba(3,6,14,.78) 0%, rgba(3,6,14,.54) 42%, rgba(3,6,14,.2) 66%, transparent 82%);
}
.bolum--hero::before{
  background:radial-gradient(ellipse 50% 60% at 76% 50%,
             rgba(3,6,14,.78) 0%, rgba(3,6,14,.54) 42%, rgba(3,6,14,.2) 66%, transparent 82%);
}
@media (max-width:760px){
  .bolum--hero::before, .bolum--manifesto::before, .bolum--ilke::before{
    background:radial-gradient(ellipse 95% 44% at 40% 52%,
               rgba(3,6,14,.72) 0%, rgba(3,6,14,.46) 45%, transparent 82%);
  }
  .bolum--kapanis::before{
    background:linear-gradient(0deg, rgba(3,6,14,.82) 0%, rgba(3,6,14,.55) 30%, rgba(3,6,14,.18) 52%, transparent 64%);
  }
}
/* film içindeki küçük yazılar: soluk çelik mavisi parlak karede kayboluyordu */
.bolum .giris-lede, .bolum .manifesto-alt, .bolum .kapanis-alt, .bolum .rakam-yazi,
.bolum .ulke-alt, .bolum .konum-yazi{ color:#E3EAF4; }
.bolum > .etiket, .bolum .konum-isareti{ color:#F0D9A8; }
/* rakamlar background-clip:text — text-shadow işlemez, drop-shadow gerekir */
.bolum .rakam-deger{ background-image:linear-gradient(180deg, #FFFFFF 35%, #DCE4EF); font-weight:400;
  filter:drop-shadow(0 2px 3px rgba(3,6,14,.7)) drop-shadow(0 0 16px rgba(3,6,14,.55)); }
/* film üstündeki düğmeler: parlak karede kaybolmasın diye koyu cam zemin */
.bolum .dugme{ background:rgba(6,12,27,.58); border-color:rgba(238,242,248,.28); }
.bolum .dugme--pirinc{ background:linear-gradient(180deg, rgba(201,161,94,.26), rgba(6,12,27,.62)); border-color:rgba(201,161,94,.7); }
.bolum .dugme:hover{ border-color:var(--pirinc); background:rgba(6,12,27,.72); }
.bolum .dugme--pirinc:hover{ background:var(--pirinc); color:var(--murekkep); border-color:var(--pirinc); }
.bolum p, .bolum .etiket, .bolum li span{ text-shadow: 0 1px 2px rgba(8,17,39,.85), 0 0 14px rgba(3,6,14,.7), 0 4px 30px rgba(3,6,14,.6); }
.bolum.canli{ visibility:visible; }

/* hero — küre solda olduğu için isim sağda durur */
.bolum--hero{ justify-items:end; text-align:right; }
.bolum--hero .etiket{ flex-direction:row-reverse; }
.bolum--hero .kural{ background:linear-gradient(270deg,var(--pirinc),transparent); }
.bolum--hero .giris-lede{ margin-left:auto; }
@media (max-width:760px){
  .bolum--hero{ justify-items:start; text-align:left; }
  .bolum--hero .etiket{ flex-direction:row; }
  .bolum--hero .kural{ background:linear-gradient(90deg,var(--pirinc),transparent); }
  .bolum--hero .giris-lede{ margin-left:0; }
}

/* hero */
.dev-ad{
  font-family:var(--serif); font-weight:400;
  font-size: clamp(40px, 7.4vw, 116px);
  line-height:.98; letter-spacing:-.012em; font-weight:300;
}
/* Bodoni'de büyük İ'nin noktası satır kutusunun üstüne taşar — kırpmıyoruz */
.dev-ad .satir{ display:block; }
.dev-ad .satir > span{ display:block; }
.dev-ad em{
  font-style:italic; font-weight:500;
  background:linear-gradient(120deg, var(--pirinc-ac), var(--pirinc) 55%, rgba(201,161,94,.5));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.giris-lede{ max-width:44ch; color:var(--celik); font-size:clamp(14px,.92vw,16.5px); }

/* manifesto */
.bolum--manifesto{ justify-items:start; text-align:left; }
.manifesto{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(25px, 3.05vw, 45px); line-height:1.24; letter-spacing:-.008em;
  max-width: min(480px, 38vw);
}
/* yalnızca doğrudan satır span'leri — içteki .kl kelimeleri satır içi kalsın */
.manifesto > span{ display:block; }
.manifesto em{
  font-style:italic; color:var(--pirinc-ac);
}
.manifesto-alt{ max-width:min(430px, 36vw); color:var(--celik); }

/* rakamlar */
.bolum--rakam{ justify-items:center; text-align:center; }
.rakam-sira{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,44px); width:100%; max-width:940px;
  margin-top:clamp(14px,3vh,34px);
}
/* --g: 0 → gizli, 1 → tam açık. main.js her rakama sırayla sürer. */
.rakam{
  --g:1;
  display:grid; gap:.5rem; justify-items:center; position:relative;
  padding-top:clamp(14px,2.4vh,26px);
}
/* üstteki ince çizgi ortadan dışa doğru çizilir */
.rakam::before{
  content:''; position:absolute; top:0; left:50%;
  width:26px; height:1px; background:var(--pirinc);
  transform:translateX(-50%) scaleX(var(--g));
  opacity:calc(.35 + var(--g) * .55);
}
/* rakam ve etiket, altlarındaki banttan yukarı süzülür */
.rakam-deger, .rakam-yazi{
  clip-path: inset(-40% -20% calc((1 - var(--g)) * 115%) -20%);
  transform: translateY(calc((1 - var(--g)) * .42em));
  opacity: calc(.15 + var(--g) * .85);
}
.rakam-yazi{
  transform: translateY(calc((1 - var(--g)) * .9em));
}
@media (prefers-reduced-motion: reduce){
  .rakam-deger, .rakam-yazi{ clip-path:none; transform:none; opacity:1 }
  .rakam::before{ transform:translateX(-50%); opacity:.9 }
}
.rakam-deger{
  font-family:var(--serif); font-weight:300; letter-spacing:-.005em;
  font-size:clamp(36px, 5.3vw, 80px); line-height:1;
  font-variant-numeric: tabular-nums;
  background:linear-gradient(180deg, var(--fildisi) 30%, rgba(159,178,207,.45));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.rakam-yazi{
  font-size:clamp(9.5px,.72vw,11px); letter-spacing:.24em; text-transform:uppercase;
  color:var(--celik); line-height:1.8;
}
.rakam-not, .kesit .rakam-not{ font-size:11px; letter-spacing:.06em; color:rgba(110,130,163,.6); }

/* ilkeler */
.bolum--ilke{ justify-items:start; }
.ilkeler{ list-style:none; display:grid; gap:clamp(10px,1.8vh,18px); width:100%; max-width:720px; }
.ilkeler li{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,2.4vw,34px); align-items:baseline;
  padding-bottom:clamp(12px,2vh,20px); border-bottom:1px solid rgba(159,178,207,.1);
}
.ilkeler b{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(15px,1.6vw,23px); color:var(--pirinc); min-width:1.7em;
}
.ilkeler span{ display:grid; gap:.25rem; }
.ilkeler strong{
  font-family:var(--serif); font-weight:300; font-size:clamp(17px,1.85vw,26px); line-height:1.28;
}
.ilkeler span{ color:var(--celik); font-size:clamp(12.5px,.92vw,14px); }

/* kapanış */
/* video sonunda İbrahim sağda duruyor — kapanış yazısı sola yaslı */
.bolum--kapanis{ justify-items:start; text-align:left; }
.bolum--kapanis > *{ max-width:min(46vw, 640px); }
.kapanis-alt{ color:var(--celik); font-size:clamp(13px,.95vw,16px); letter-spacing:.14em; text-transform:uppercase; }
.kapanis-dugmeler{ display:flex; flex-wrap:wrap; gap:12px; margin-top:.4rem; }
@media (max-width:760px){
  /* .bolum telefonda align-content:center ile geliyor — ezmek için iki sınıf */
  .bolum.bolum--kapanis{ align-content:end; padding-bottom:max(64px, 11vh); }
  .bolum--kapanis > *{ max-width:100%; }
}
.kapanis-baslik{
  font-family:var(--serif); font-weight:300; font-size:clamp(30px,5.1vw,76px);
  line-height:1.06; letter-spacing:-.012em;
}
.kapanis-baslik em{ font-style:italic; color:var(--pirinc-ac); }

/* ---------- yan navigasyon ---------- */
.yan-noktalar{
  position:absolute; right:clamp(12px,2.2vw,32px); top:50%; transform:translateY(-50%);
  z-index:8; display:grid; gap:14px;
}
.yan-noktalar button{
  width:7px; height:7px; border-radius:50%; background:rgba(159,178,207,.22);
  position:relative; transition:.5s var(--gecis);
}
.yan-noktalar button::after{
  content:attr(data-ad); position:absolute; right:150%; top:50%; transform:translateY(-50%);
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--celik-sr);
  white-space:nowrap; opacity:0; transition:.4s;
}
.yan-noktalar button:hover::after{ opacity:1; }
.yan-noktalar button.aktif{ background:var(--pirinc); transform:scale(1.5); box-shadow:0 0 12px rgba(201,161,94,.6); }

.kaydir-ipucu{
  position:absolute; bottom:clamp(20px,4.5vh,46px); left:50%; transform:translateX(-50%);
  z-index:8; display:grid; gap:.7rem; justify-items:center; transition:opacity .5s;
}
.kaydir-ipucu span{ font-size:9px; letter-spacing:.34em; text-transform:uppercase; color:var(--celik-sr); }
.fare{ width:19px; height:30px; border:1px solid rgba(159,178,207,.32); border-radius:11px; position:relative; }
.fare b{
  position:absolute; top:6px; left:50%; width:2px; height:5px; border-radius:2px;
  background:var(--pirinc); transform:translateX(-50%); animation:kaydir 2s var(--gecis) infinite;
}
@keyframes kaydir{ 0%{opacity:0; transform:translate(-50%,-3px)} 35%{opacity:1} 100%{opacity:0; transform:translate(-50%,11px)} }

.film-ilerleme{
  position:absolute; left:0; right:0; bottom:0; z-index:9; height:1px; background:rgba(159,178,207,.09);
}
.film-ilerleme i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lacivert4),var(--pirinc)); }

/* =============================================================
   ALT SAYFA — filmin üzerine kayarak gelen yüzey
   ============================================================= */
.alt-sayfa{
  position:relative; z-index:20;
  margin-top: -9vh;
  border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0;
  background: linear-gradient(180deg, #08102A 0%, var(--zemin) 14%, var(--zemin) 100%);
  box-shadow:
    0 -1px 0 rgba(201,161,94,.22),
    0 -30px 70px rgba(0,0,0,.72),
    0 -80px 160px rgba(0,0,0,.5);
}
/* üst kenarda ince bir ışık çizgisi */
.alt-sayfa::before{
  content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,161,94,.5), transparent);
}
/* tutamak — "sayfa buradan başlıyor" işareti */
.alt-sayfa::after{
  content:''; position:absolute; top:clamp(12px,1.6vw,20px); left:50%; transform:translateX(-50%);
  width:44px; height:2px; border-radius:2px; background:rgba(159,178,207,.22);
}


/* =============================================================
   BANTLAR — koyu ve krem dönüşümlü, dalgalı ayraçlarla
   ============================================================= */
.bant{ position:relative; z-index:10; padding: clamp(66px,10vh,132px) var(--kenar); overflow:hidden; }
.bant-ic{ max-width:1320px; margin:0 auto; position:relative; z-index:2; }
/* 28 Eylül: bölümler arası renk bantları kalktı — koyu bölümler zemini paylaşır, yanlarda ışıma */
.bant--koyu{ background:radial-gradient(ellipse 55% 42% at 100% 50%, rgba(255,255,255,.06) 0%, rgba(160,186,236,.15) 22%, rgba(95,125,195,.065) 50%, transparent 74%); }
.bant--acik{
  background:var(--krem); color:var(--krem-yazi);
  padding-top:    calc(clamp(58px,8vh,96px) + clamp(46px,6vw,90px));
  padding-bottom: calc(clamp(58px,8vh,96px) + clamp(46px,6vw,90px));
}
.bant--acik .etiket{ color:#9A7B3F; }
.bant--acik h2{ color:var(--krem-yazi); }
.bant--acik h2 em{ color:#9A7B3F; }
.bant--acik p{ color:var(--krem-sr); }

/* dalgalı ayraçlar — scroll ile karşılıklı yönde süzülürler */
.dalga{
  /* Taşma payı PİKSEL cinsinden ve kaymadan BÜYÜK olmalı.
     Eskiden `left:-9%; width:118%` idi: 390px'lik telefonda pay 35px,
     kayma ise 72px'e kadar çıkıyor → dalga kenardan içeri kaçıp
     SOL TARAFTA 21px'lik bir boşluk bırakıyordu (ölçüldü: --p 0,79'da
     sol kenar +21px). Yüzdeyle verilince pay ekran daraldıkça küçülüyor,
     kayma ise sabit kalıyor. 88px > 72px, her genişlikte güvenli. */
  position:absolute; left:-88px; width:calc(100% + 176px);
  height:clamp(46px,6vw,90px);
  display:block; z-index:1; pointer-events:none; will-change:transform;
}
.dalga path{ fill:var(--zemin); }
.dalga--ust{ top:-1px;    transform: translate3d(calc(var(--p,.5) * -72px), 0, 0); }
.dalga--alt{ bottom:-1px; transform: translate3d(calc(var(--p,.5) *  72px), 0, 0); }

/* =============================================================
   BANT İÇİ SCROLL HAREKETLERİ  (--p: 0 girerken, 1 çıkarken)
   ============================================================= */
/* portre paralaks + maskenin yavaş morfu */
.hakkimda-gorsel img{
  transform: translate3d(0, calc((var(--p,.5) - .5) * -58px), 0);
  will-change: transform, border-radius;
  transition: border-radius .6s linear;
}
.bant[style*="--p"] .hakkimda-gorsel img{
  border-radius:
    calc(42% + var(--p,.5) * 10%) calc(52% - var(--p,.5) * 10%)
    calc(46% + var(--p,.5) * 6%)  calc(44% - var(--p,.5) * 4%) /
    calc(34% + var(--p,.5) * 8%)  calc(42% - var(--p,.5) * 6%)
    calc(56% - var(--p,.5) * 8%)  calc(50% + var(--p,.5) * 6%);
}
/* metin sütunu ters yönde, daha az */
.hakkimda-yazi{ transform: translate3d(0, calc((var(--p,.5) - .5) * 22px), 0); }
/* etiket rozeti portreyle birlikte */
.gorsel-etiket{
  transform: translate(-50%, calc((var(--p,.5) - .5) * -28px));
}

/* İkon sütunları SCROLL'A BAĞLI DEĞİL.
   (1) Eskiden opaklık bandın --p'sinden geliyordu
       (`clamp(0,(--p - 0.18 - --i*0.045)*9,1)`): bölüm ekrana girdiğinde
       kartlar opak 0'dı, ancak bandı ekranın ortasına getirecek kadar
       kaydırınca okunuyordu — "yazılar belli olmuyor" bundandı.
   (2) Sonra genel `.belir` sistemine bağlandı ama o da yetmedi: `.belir`
       gözlemcisi kart ekranın DİBİNDEYKEN tetikleniyor (rootMargin -8%),
       kart okunacak yüksekliğe geldiğinde animasyon çoktan bitiyordu.
       Üstelik `.belir`in `transition` KISAYOLU, benim `transition-delay`imi
       sıfırlıyordu (kısayol, yazılmayan alt özellikleri başlangıç değerine
       döndürür) — dördü birden açılıyor, sıralı gelmiyordu.
   Bu yüzden kendi sınıfı + kendi gözlemcisi var (main.js → `acilir`). */
.neden-kart.acilir{
  opacity:0;
  transform: translate3d(0, 34px, 0) scale(.985);
  transition: opacity .85s var(--gecis), transform .85s var(--gecis);
  transition-delay: calc(var(--i,0) * .12s);   /* 0 · 120 · 240 · 360 ms */
}
.neden-kart.acilir.acildi{ opacity:1; transform:none; }
/* ikon halkası hafifçe döner */
.neden-kart .ikon{
  transform: rotate(calc((var(--p,.5) - .5) * 14deg));
  transition: border-color .5s, color .5s;
}

/* rakam şeridi: ikonlar scroll ile hafif kayar */
.bant--rakam .ikon-rakam:nth-child(odd){  transform: translate3d(0, calc((var(--p,.5) - .5) * -14px), 0); }
.bant--rakam .ikon-rakam:nth-child(even){ transform: translate3d(0, calc((var(--p,.5) - .5) *  14px), 0); }

/* cam kart: yatırım bandında yüzer */
.cam-kart{ transform: translate3d(0, calc((var(--p,.5) - .5) * -34px), 0); will-change:transform; }

/* alıntı: bant geçerken çok hafif büyür */
.kesit--alinti .alinti{
  transform: scale(calc(0.985 + var(--p,.5) * 0.03));
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce){
  .dalga--ust, .dalga--alt, .hakkimda-gorsel img, .hakkimda-yazi, .gorsel-etiket,
  .neden-kart, .neden-kart .ikon, .bant--rakam .ikon-rakam, .cam-kart, .kesit--alinti .alinti{
    transform:none !important;
  }
  .neden-kart{ opacity:1 !important; }
  .neden-kart.acilir{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* --- ikonlu rakam şeridi --- */
.bant--rakam{ padding-block: clamp(40px,6vh,72px); }
.ikon-sira{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,46px);
}
.ikon-rakam{ display:flex; align-items:center; gap:clamp(12px,1.4vw,18px); }
.ikon{
  flex:0 0 auto; width:clamp(44px,3.7vw,56px); aspect-ratio:1; display:grid; place-items:center;
  border:1px solid rgba(201,161,94,.5); border-radius:50%;
  color:var(--pirinc-ac) !important;
  background:radial-gradient(circle at 50% 45%, rgba(201,161,94,.12), transparent 70%);
}
.ikon svg{ width:56%; height:56%; stroke-width:1.5; }
.ikon-rakam strong{
  display:block; font-family:var(--serif); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(22px,2.1vw,31px); line-height:1.1;
}
/* yalnızca etiket yazısı — .ikon de bir <span>, onu yakalamamalı */
.ikon-rakam > div > span{
  display:block; font-size:clamp(11px,.82vw,12.5px); letter-spacing:.1em;
  color:var(--celik-sr); line-height:1.5; margin-top:.2rem;
}

/* --- hakkımda --- */
.hakkimda-ag{
  display:grid; grid-template-columns:1fr .85fr; gap:clamp(34px,5vw,86px); align-items:center;
}
.hakkimda-yazi{ display:grid; gap:1.1rem; justify-items:start; }
.hakkimda-yazi p{ max-width:52ch; }
.hakkimda-yazi .dugme{ margin-top:.6rem; }
.hakkimda-gorsel{ position:relative; max-width:460px; margin-inline:auto; }
.hakkimda-gorsel img{
  width:100%; max-height:min(560px,62vh); aspect-ratio:4/5; object-fit:cover; object-position:50% 20%;
  /* referanstaki organik maske */
  border-radius: 48% 48% 44% 44% / 38% 38% 52% 52%;
  box-shadow:0 30px 70px rgba(19,28,46,.22);
}
.gorsel-etiket{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  background:var(--krem-yazi); color:var(--krem); white-space:nowrap;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  padding:.72em 1.4em; border-radius:999px;
}
.dugme--koyu{
  border-color:rgba(19,28,46,.28); background:transparent; color:var(--krem-yazi);
}
.dugme--koyu:hover{ background:var(--krem-yazi); color:var(--krem); border-color:var(--krem-yazi); }

/* --- neden ben --- */
.bant-bas{ display:grid; gap:.9rem; justify-items:center; text-align:center;
  margin-bottom:clamp(36px,6vh,72px); }
.bant-bas h2,
.hakkimda-yazi h2,
.yatirim-yazi h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(27px,3.75vw,56px);
  line-height:1.1; letter-spacing:-.012em; margin:0;
}
.bant-bas h2 em,
.hakkimda-yazi h2 em,
.yatirim-yazi h2 em{ font-style:italic; color:var(--pirinc-ac); }
.bant--acik .hakkimda-yazi h2 em{ color:#9A7B3F; }
.neden-ag{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(24px,3.2vw,52px);
}
.neden-kart{ display:grid; gap:.7rem; justify-items:start; }
.bant--acik .ikon{ border-color:rgba(154,123,63,.42); color:#9A7B3F; }
.neden-kart h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.5vw,22px);
  color:var(--krem-yazi); line-height:1.25;
}
/* Krem zeminde --krem-sr (#5B6274) 14px'te soluk kalıyor; bu kartlara
   özel bir tık koyu. Diğer .bant--acik metinlerine dokunulmuyor. */
.neden-kart p{ font-size:14px; line-height:1.65; }
.bant--acik .neden-kart p{ color:#474E63; }

/* --- yatırım --- */
.yatirim-ag{
  display:grid; grid-template-columns:1fr .92fr; gap:clamp(34px,5vw,80px); align-items:center;
}
#yatirim{ padding-block: clamp(70px,11vh,140px); }
.yatirim-yazi{ display:grid; gap:1.1rem; justify-items:start; }
.cam-kart{
  padding:clamp(26px,2.8vw,44px);
  border:1px solid rgba(159,178,207,.16); border-radius:14px;
  background:linear-gradient(160deg, rgba(20,36,76,.62), rgba(6,12,27,.5));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 30px 70px rgba(3,6,14,.5);
}
.cam-bas{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--pirinc);
  margin-bottom:1.3rem;
}
.cam-liste{ list-style:none; display:grid; gap:.1rem; }
.cam-liste li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid rgba(159,178,207,.1);
  color:var(--celik); font-size:14.5px; line-height:1.5;
}
.cam-liste li:last-child{ border-bottom:0; }
.cam-liste span{ font-family:var(--serif); font-size:17px; color:var(--pirinc); }
.cam-not{ margin-top:1.2rem; font-size:11px; color:rgba(110,130,163,.7); letter-spacing:.04em; }

@media (max-width:860px){
  .ikon-sira{ grid-template-columns:repeat(2,1fr); gap:22px 16px; }
  .hakkimda-ag, .yatirim-ag{ grid-template-columns:1fr; }
  .hakkimda-gorsel{ order:-1; max-width:380px; margin:0 auto 22px; }
  .bant--acik{
    padding-top:    calc(clamp(46px,6vh,72px) + clamp(46px,6vw,90px));
    padding-bottom: calc(clamp(46px,6vh,72px) + clamp(46px,6vw,90px));
  }
}
@media (max-width:520px){
  .ikon-sira{ grid-template-columns:1fr; gap:16px; }
}


/* =============================================================
   SAYFA İLERLEME ÇUBUĞU
   ============================================================= */
.sayfa-ilerleme{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:110;
  background:rgba(159,178,207,.08); pointer-events:none;
}
.sayfa-ilerleme i{
  display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--lacivert4), var(--pirinc));
}

/* =============================================================
   KAYAN YAZI ŞERİDİ
   ============================================================= */
.kayan{
  position:relative; z-index:10; overflow:hidden; padding-block:clamp(22px,3.4vh,42px);
  border-block:1px solid rgba(159,178,207,.09);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.kayan-ic{ display:flex; width:max-content; will-change:transform; }
.kayan-ic span{
  display:flex; align-items:center; white-space:nowrap; flex:0 0 auto;
  font-family:var(--serif); font-weight:300; font-size:clamp(26px,3.4vw,52px);
  letter-spacing:-.008em; color:rgba(159,178,207,.3);
}
.kayan-ic i{ font-style:normal; color:var(--pirinc); margin-inline:.55em; opacity:.8; }

/* =============================================================
   YIĞIN DESTESİ — altta kalan kart geri çekilir,
   tepeye yeni gelen kart kısaca parlar
   ============================================================= */
.yigin-kart{
  transform: scale(calc(1 - var(--ort,0) * 0.055)) translateY(calc(var(--ort,0) * -12px));
  filter: brightness(calc(1 - var(--ort,0) * 0.42)) saturate(calc(1 - var(--ort,0) * 0.3));
  will-change: transform, filter;
}
/* tepedeki kart hafifçe öne çıkar */
.yigin-kart.tepede{ border-color:rgba(201,161,94,.3); }

/* yavaş parlama — transform/filter'a dokunmuyor, onları --ort sürüyor */
.yigin-kart.parla{ animation: yiginParla 2s cubic-bezier(.33,0,.2,1); }
@keyframes yiginParla{
  0%{
    border-color:rgba(159,178,207,.12);
    background:linear-gradient(150deg, #101F42 0%, #0C1735 62%);
    box-shadow:0 -1px 0 rgba(201,161,94,.16), 0 -26px 60px rgba(3,6,14,.75);
  }
  30%{
    border-color:rgba(201,161,94,.95);
    background:linear-gradient(150deg, #1E3460 0%, #121F41 62%);
    box-shadow:0 0 0 1px rgba(201,161,94,.62),
               0 0 64px rgba(201,161,94,.45),
               0 -26px 60px rgba(3,6,14,.75);
  }
  46%{
    border-color:rgba(201,161,94,.85);
    background:linear-gradient(150deg, #1B3059 0%, #111E3E 62%);
    box-shadow:0 0 0 1px rgba(201,161,94,.5),
               0 0 54px rgba(201,161,94,.34),
               0 -26px 60px rgba(3,6,14,.75);
  }
  100%{
    border-color:rgba(201,161,94,.3);
    background:linear-gradient(150deg, #101F42 0%, #0C1735 62%);
    box-shadow:0 -1px 0 rgba(201,161,94,.16), 0 -26px 60px rgba(3,6,14,.75);
  }
}
.yigin-kart.parla .yigin-yil{ animation: yilParla 2s cubic-bezier(.33,0,.2,1); }
@keyframes yilParla{
  0%{ color:var(--pirinc); text-shadow:none }
  30%{ color:#F4E0B6; text-shadow:0 0 24px rgba(201,161,94,.85) }
  46%{ color:#E8CF9E; text-shadow:0 0 18px rgba(201,161,94,.6) }
  100%{ color:var(--pirinc); text-shadow:none }
}
.yigin-kart.parla .yigin-no{ animation: noParla 2s cubic-bezier(.33,0,.2,1); }
@keyframes noParla{
  0%{ color:rgba(159,178,207,.13) }
  30%{ color:rgba(201,161,94,.66) }
  46%{ color:rgba(201,161,94,.5) }
  100%{ color:rgba(159,178,207,.13) }
}

@media (prefers-reduced-motion: reduce){
  .yigin-kart.parla,
  .yigin-kart.parla .yigin-yil,
  .yigin-kart.parla .yigin-no{ animation:none !important; }
}

/* =============================================================
   MIKNATIS DÜĞMELER
   ============================================================= */
.miknatis{
  --mx:0px; --my:0px;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .45s cubic-bezier(.22,1,.36,1), background .5s var(--gecis),
              color .5s var(--gecis), border-color .5s var(--gecis);
}
.miknatis:hover{ transition-duration:.12s, .5s, .5s, .5s; }

/* sayaç rakamları hizalı dursun */
.sayac{ font-variant-numeric: lining-nums tabular-nums; }

/* Telefonda hareket artık KAPATILMIYOR. Eskiden burada 760px altında
   .plaka, .plaka-gorsel img, .plaka-alt ve .yigin-kart transform'ları
   `!important` ile sıfırlanıyordu; hem proje kartları hem deneyim kartları
   dümdüz bir listeye dönüyordu. Yalnızca azaltılmış hareket modunda kapalı. */
@media (prefers-reduced-motion: reduce){
  .plaka, .plaka-gorsel img, .plaka-alt, .plaka-yil, .plaka-rozet,
  .yigin-kart, .miknatis, .kayan-ic{ transform:none !important; filter:none !important; }
  .plaka{ opacity:1 !important; }
}


/* =============================================================
   UZMANLIK YÖRÜNGESİ  (solda yörünge · sağda kart paneli)
   ============================================================= */
.kesit--yorunge{ background:radial-gradient(ellipse 55% 42% at 100% 52%, rgba(255,255,255,.06) 0%, rgba(160,186,236,.15) 22%, rgba(95,125,195,.065) 50%, transparent 74%); }
.yorunge-duzen{
  /* kapalı sütun 0fr DEĞİL 0px olmalı — tarayıcı fr ile px arasında
     ara değer üretemez, geçiş animasyonu çalışmaz, panel zıplar */
  display:grid; grid-template-columns:1fr 0px; gap:0;
  align-items:center; max-width:1400px; margin:0 auto;
  /* --gecis (.19,1,.22,1) mesafenin çoğunu ilk %15'te alıyor; sütun geçişinde
     zıplama gibi duruyor. Burada daha dengeli bir eğri kullanıyoruz. */
  transition: grid-template-columns .7s cubic-bezier(.45,.05,.25,1),
              gap .7s cubic-bezier(.45,.05,.25,1);
}
.yorunge-duzen.acik{
  grid-template-columns:1fr clamp(320px,26vw,400px);
  gap:clamp(24px,3.4vw,60px);
}
.yorunge{
  position:relative; display:grid; place-items:center;
  /* Ekrandan çıkarken yumuşak sönme — JS --cik'i yazıyor (yalnızca telefonda).
     Çark ve altındaki ipucu BİRLİKTE sönsün diye sarmalayıcıya veriliyor;
     yalnızca sahneye verilince ipucu tek başına parlak kalıyordu. */
  opacity: calc(1 - var(--cik, 0) * 0.94);
  transform: scale(calc(1 - var(--cik, 0) * 0.12));
  transform-origin:50% 38%;
}
.yorunge-sahne{
  position:relative; width:min(600px,100%); aspect-ratio:1; display:grid; place-items:center;
  perspective:1000px; cursor:grab;
  /* touch-action:none DEĞİL. 'none' iken parmağını yörüngenin üstüne koyup
     aşağı kaydırmak istediğinde sayfa kımıldamıyor, çark dönüyordu —
     telefonda bölümü geçmek imkânsıza yakındı. 'pan-y' ile dikey kaydırmayı
     tarayıcı alıyor (sayfa normal kayıyor), yatay sürükleme bize kalıyor. */
  touch-action:pan-y;
}
.yorunge.suruluyor .yorunge-sahne{ cursor:grabbing; }

/* halkalar */
.yorunge-halka{
  position:absolute; border-radius:50%; border:1px solid rgba(159,178,207,.12); pointer-events:none;
}
.yorunge-halka--dis{ width:72%; aspect-ratio:1; }
.yorunge-halka--ic{
  width:46%; aspect-ratio:1; border-style:dashed; border-color:rgba(201,161,94,.14);
  animation: halkaDon 64s linear infinite;
}
@keyframes halkaDon{ to{ transform:rotate(360deg) } }

/* merkez */
.yorunge-merkez{
  position:absolute; display:grid; place-items:center; z-index:60; pointer-events:none;
  transition:opacity .5s var(--gecis), transform .5s var(--gecis);
}
.yorunge.kart-acik .yorunge-merkez{ opacity:.4; transform:scale(.92); }
.mrk-cekirdek{
  width:clamp(68px,8vw,96px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:clamp(19px,2vw,26px); letter-spacing:.06em;
  color:var(--pirinc-ac);
  background:radial-gradient(circle at 38% 32%, #20386E, #0B1737 72%);
  border:1px solid rgba(201,161,94,.34);
  box-shadow:0 0 44px rgba(26,49,99,.75), inset 0 0 26px rgba(201,161,94,.1);
}
.mrk-nabiz{
  position:absolute; border-radius:50%; border:1px solid rgba(201,161,94,.3);
  width:clamp(68px,8vw,96px); aspect-ratio:1; opacity:0;
  animation: nabiz 3.4s cubic-bezier(0,0,.2,1) infinite;
}
.mrk-nabiz--2{ animation-delay:1.7s; }
@keyframes nabiz{ 0%{ transform:scale(1); opacity:.7 } 80%,100%{ transform:scale(2.3); opacity:0 } }

/* düğümler */
.yorunge-dugumler{ position:absolute; inset:0; display:grid; place-items:center; }
.dugum{
  --op:1; position:absolute; display:grid; place-items:center; justify-items:center;
  transition:opacity .5s var(--gecis); opacity:var(--op);
}
.dugum-nokta{
  position:relative; width:clamp(38px,3.4vw,46px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; color:var(--celik);
  background:rgba(11,22,49,.9); border:1px solid rgba(159,178,207,.32);
  transition:.45s var(--gecis); cursor:pointer;
}
.dugum-nokta svg{ width:44%; height:44%; pointer-events:none; }
.dugum-nokta:hover{ border-color:var(--pirinc); color:var(--pirinc-ac); transform:scale(1.12); }
.dugum-hale{
  position:absolute; inset:-9px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(201,161,94,.22) 0%, transparent 70%); opacity:0;
  transition:opacity .5s;
}
.dugum.bagli .dugum-nokta{
  border-color:rgba(201,161,94,.7); color:var(--pirinc-ac);
  animation: bagliNabiz 1.6s ease-in-out infinite;
}
.dugum.bagli .dugum-hale{ opacity:1; }
@keyframes bagliNabiz{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,161,94,.34) } 60%{ box-shadow:0 0 0 11px rgba(201,161,94,0) } }
.dugum.acik .dugum-nokta{
  background:var(--pirinc); color:var(--murekkep); border-color:var(--pirinc);
  transform:scale(1.35); box-shadow:0 0 34px rgba(201,161,94,.5);
}
.dugum-ad{
  position:absolute; top:calc(100% + 8px); white-space:nowrap;
  font-size:12px; font-weight:400; letter-spacing:.06em; color:var(--fildisi);
  padding:.34em .78em; border-radius:999px;
  background:rgba(4,8,18,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(159,178,207,.12);
  text-shadow:0 1px 6px rgba(8,17,39,.9);
  transition:.4s var(--gecis); pointer-events:none;
}
.dugum.bagli .dugum-ad{ border-color:rgba(201,161,94,.34); color:var(--pirinc-ac); }
.dugum.acik .dugum-ad{
  color:var(--murekkep); background:var(--pirinc); border-color:var(--pirinc);
  font-weight:500; transform:translateY(4px);
}

.yorunge-ipucu{
  margin-top:clamp(4px,1vh,14px);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--celik-sr);
  transition:opacity .5s; animation: ipucuNefes 3s ease-in-out infinite;
}
@keyframes ipucuNefes{ 0%,100%{opacity:.45} 50%{opacity:.9} }
.yorunge.kart-acik .yorunge-ipucu{ animation:none; opacity:0; }

/* =============================================================
   SAĞ PANEL
   ============================================================= */
.yorunge-panel{
  position:relative; display:grid; overflow:hidden;
  opacity:0; transition:opacity .45s cubic-bezier(.45,.05,.25,1);
}
.yorunge-duzen.acik .yorunge-panel{ opacity:1; transition-delay:.18s; }
/* Geniş ekranda kart SABİT GENİŞLİKTE. Sütun 0px'e doğru daralırken kartın
   metni yeniden sarılıyor ve kart UZUYOR: açılıp kapanırken altındaki bölüm
   ~440px aşağı itilip geri çekiliyordu. Sabit genişlikte sarım değişmiyor,
   kart daralan sütunun içinde kırpılarak kayboluyor (.yorunge-panel zaten
   overflow:hidden). Dar ekranda sütun 1fr, orada gerek yok. */
@media (min-width:981px){
  .panel-kart{ width: clamp(320px,26vw,400px); }
}
.panel-kart[hidden]{ display:none !important; }

.panel-kart{
  display:grid; align-content:start;
  border:1px solid rgba(201,161,94,.24); border-radius:12px; overflow:hidden;
  background:linear-gradient(165deg, rgba(19,38,88,.9), rgba(11,22,49,.94));
  box-shadow:0 28px 66px rgba(3,6,14,.72);
}
.panel-kart.girdi{ animation: panelGir .75s cubic-bezier(.22,1,.36,1) both; animation-delay:.16s; }
@keyframes panelGir{
  from{ opacity:0; transform:translateX(40px); filter:blur(8px) }
  to  { opacity:1; transform:none;             filter:blur(0) }
}
.panel-gorsel{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.panel-gorsel img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) brightness(.82) contrast(1.04);
  animation: gorselGir 1.1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes gorselGir{ from{ transform:scale(1.1) } to{ transform:scale(1) } }
.panel-gorsel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(11,22,49,.92) 100%);
}
.panel-kaynak{
  margin:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px) 0;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--pirinc);
}
.panel-kart h3{
  margin:.5rem clamp(18px,1.8vw,26px) .6rem;
  font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.7vw,24px); line-height:1.24;
}
.panel-metin{
  margin:0 clamp(18px,1.8vw,26px);
  font-size:13.5px; line-height:1.68; color:var(--celik);
}
.panel-metin p + p{ margin-top:.75rem; }
.panel-bagli{
  margin:1.1rem clamp(18px,1.8vw,26px) 0; padding-top:.95rem;
  border-top:1px solid rgba(159,178,207,.13);
}
.panel-bagli > span{
  display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--celik-sr); margin-bottom:.6rem;
}
.panel-dugmeler{ display:flex; flex-wrap:wrap; gap:6px; }
.panel-gec{
  font:inherit; font-size:11px; letter-spacing:.04em; color:var(--celik);
  border:1px solid rgba(159,178,207,.2); border-radius:999px; padding:.42em .9em;
  transition:.4s var(--gecis); cursor:pointer;
}
.panel-gec:hover{ border-color:var(--pirinc); color:var(--pirinc-ac); }
.panel-gec::after{ content:' →'; opacity:.6; }
.panel-kapat{
  justify-self:start; margin:1.1rem clamp(18px,1.8vw,26px) clamp(18px,1.8vw,24px);
  font:inherit; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--celik-sr); border-bottom:1px solid rgba(159,178,207,.2); padding-bottom:.2em;
  transition:.4s var(--gecis); cursor:pointer;
}
.panel-kapat:hover{ color:var(--fildisi); border-color:var(--pirinc); }

@media (max-width:980px){
  .yorunge-duzen,
  .yorunge-duzen.acik{ grid-template-columns:1fr; gap:0; }
  .yorunge-duzen.acik{ gap:clamp(20px,3vh,34px); }
  .yorunge-sahne{ width:min(500px,100%); }
  .yorunge-panel{ min-height:0; }
}
@media (max-width:760px){
  .yorunge-sahne{ width:min(440px,100%); }
  .dugum-ad{ font-size:9px; letter-spacing:.1em; }
  .panel-gorsel{ aspect-ratio:16/9; }
}
@media (prefers-reduced-motion: reduce){
  .yorunge-halka--ic, .mrk-nabiz, .dugum.bagli .dugum-nokta, .yorunge-ipucu,
  .panel-kart.girdi, .panel-gorsel img{ animation:none !important; }
}

/* diller / eğitim / sistemler — yörüngenin altında */
.yorunge-alt{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(20px,3vw,44px); max-width:1400px; margin:clamp(30px,5vh,64px) auto 0;
  align-items:stretch;
}

@media (max-width:760px){
  .yorunge-sahne{ width:min(460px,100%); }
  .dugum-ad{ font-size:9px; letter-spacing:.1em; }
  .dugum-kart{
    position:fixed; left:50%; right:auto; top:auto; bottom:16px;
    width:min(340px,92vw); transform:translate(-50%,14px);
  }
  .dugum.acik .dugum-kart{ transform:translate(-50%,0); }
  .dk-ok{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .yorunge-halka--ic, .mrk-nabiz, .dugum.bagli .dugum-nokta, .yorunge-ipucu{ animation:none !important; }
}

/* =============================================================
   NORMAL KESİTLER
   ============================================================= */
.kesit{ position:relative; z-index:10; padding: clamp(66px,10vh,132px) var(--kenar); }
/* iki kesit yan yana geldiğinde boşluk iki katına çıkmasın */
.kesit + .kesit{ padding-top: clamp(40px,6vh,80px); }
.kesit--projeler{ background:radial-gradient(ellipse 55% 42% at 0% 58%, rgba(255,255,255,.06) 0%, rgba(160,186,236,.15) 22%, rgba(95,125,195,.065) 50%, transparent 74%); padding-top:0; margin-top:-36px; position:relative; }   /* üst pay .yatay-sahne'de; dalganın lacivert kısmına biner */

.kesit-bas{ display:grid; gap:1rem; max-width:1500px; margin:0 auto clamp(34px,5.5vh,68px); }
.kesit-bas h2, .kesit--iletisim h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(27px,3.75vw,56px);
  line-height:1.1; letter-spacing:-.012em;
}
.kesit-bas h2 em, .kesit--iletisim h2 em{ font-style:italic; color:var(--pirinc-ac); }
.kesit-lede{ max-width:50ch; color:var(--celik); }

/* =============================================================
   KELİME KELİME AÇILMA  (clip-path maske — İ noktasını kırpmaz)
   ============================================================= */
.kl{
  display:inline-block; white-space:pre;
  transform: translateY(.42em);
  clip-path: inset(-35% 0 100% 0);
  opacity:0;
  transition: transform .9s var(--gecis), clip-path .9s var(--gecis), opacity .5s linear;
}
.kl.acik{ transform:none; clip-path: inset(-35% 0 -18% 0); opacity:1; }
/* normal kesitlerde sırayla; film bölümlerinde JS scroll'a bağlar */
.kesit [data-kelime].icinde .kl{ transition-delay: calc(var(--k) * 52ms); }

/* =============================================================
   CİRO BİRİNCİLİĞİ — sessiz ama net bir bant
   ============================================================= */
.kesit--madalya{ padding-block:clamp(70px,11vh,150px); }
.madalya{
  max-width:860px; margin:0 auto; text-align:center;
  display:grid; gap:1.1rem; justify-items:center;
  position:relative;
}
.madalya .etiket{ justify-content:center; }
.madalya .etiket::after{
  content:''; width:clamp(18px,3vw,44px); height:1px; background:currentColor; opacity:.55;
}
.madalya h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(30px,4.4vw,66px);
  line-height:1.1; letter-spacing:-.012em;
}
.madalya h2 em{ font-style:italic; color:var(--pirinc-ac); }
.madalya .kesit-lede{ max-width:46ch; }
/* arkada çok sönük bir hale */
.kesit--madalya::before{
  content:''; position:absolute; left:50%; top:50%; width:min(900px,90vw); aspect-ratio:2/1;
  transform:translate(-50%,-50%); pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse, rgba(201,161,94,.10) 0%, transparent 62%);
}

/* =============================================================
   PROJELER — yatay kayan şerit
   ============================================================= */
.yatay{ position:relative; }                 /* yükseklik JS'te */
.yatay-sahne{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  /* 28 Eylül: ortalanınca menünün altında geniş lacivert bant kalıyordu —
     başlık artık yapışık menünün (~67px) hemen altından başlar */
  padding-top:calc(clamp(10px,1.6vh,16px) * 3 + 36px);
  gap:clamp(20px,3.4vh,42px);
  overflow:hidden; margin-inline: calc(var(--kenar) * -1);
}
/* şeridin üstünde sabit duran başlık */
.serit-bas{
  padding-inline: var(--kenar); margin:0; max-width:none;
  gap:.7rem; flex:0 0 auto;
}
.serit-bas h2{ font-size:clamp(25px,2.9vw,43px); }
/* Döveç logosu başlığın sağında — maske + currentColor: koyu temada beyaz, açıkta lacivert */
.serit-bas{ position:relative; }
.serit-logo{
  position:absolute; right:var(--kenar); top:50%; transform:translateY(-50%);
  width:clamp(90px,9vw,144px); aspect-ratio:343.35/127.39;   /* %40 küçültüldü */
  background-color:#fff; opacity:.92;
  -webkit-mask:url('assets/dovec-logo-beyaz.svg') no-repeat center / contain;
          mask:url('assets/dovec-logo-beyaz.svg') no-repeat center / contain;
}
:root[data-tema="acik"] .serit-logo{ background-color:#142649; opacity:1; }
@media (max-width:760px){
  .serit-logo{ position:static; transform:none; width:80px; order:-1; margin-bottom:.1rem; }
}
.serit-bas .kesit-lede{ font-size:14px; max-width:46ch; }
.yatay-ray{
  display:flex; gap:clamp(14px,1.8vw,26px); align-items:stretch;
  padding-inline: var(--kenar);
  /* sondaki dolgu scrollWidth'e girmediği için son kartta pay bırakıyoruz */
  will-change:transform;
}
.plaka{
  --kalk:0px; --buyut:1;
  /* --odak: 1 = kart tam merkezde (odakta), 0 = kenarda.
     --d/--dk'yı JS yazıyor, odak ikisinden türetiliyor. */
  --odak: calc(1 - var(--dk,0));
  position:relative; overflow:hidden; border-radius:5px; flex:0 0 auto;
  width: clamp(236px, 23.5vw, 344px);
  height: clamp(340px, 54vh, 560px);
  border:1px solid rgba(159,178,207,.1);
  /* Odaktaki kartın çerçevesi çelikten pirince döner. color-mix desteklenmezse
     bu satır düşer, üstteki çelik çerçeve kalır — bozulma olmaz.
     :hover kuralı DAHA SONRA geldiği için onu ezmiyor. */
  border-color: color-mix(in srgb,
                  rgba(201,161,94,.40) calc(var(--odak, 0) * 100%),
                  rgba(159,178,207,.10));
  background:linear-gradient(160deg, #11234F 0%, #0B1631 60%);
  transition: border-color .6s var(--gecis);
  /* merkeze uzaklığa göre derinlik — --d (-1..1), --dk (0..1).
     Odaktaki kart ayrıca biraz kalkıp büyüyor: "öne çıkma" hissi. */
  transform:
    perspective(1500px)
    translateY(calc(var(--kalk) + var(--odak) * -9px))
    rotateY(calc(var(--d,0) * -8deg))
    scale(calc((1 - var(--dk,0) * 0.08 + var(--odak) * 0.028) * var(--buyut)));
  opacity: calc(1 - var(--dk,0) * 0.46);
  will-change: transform, opacity;
}
.plaka:hover{ border-color:rgba(201,161,94,.4); --kalk:-10px; --buyut:1.03; }
.yatay-ray > :last-child{ margin-right: var(--kenar); }
.plaka-gorsel{
  position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(170deg, #152859, #0B1631);
}
.plaka-gorsel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 28%, rgba(3,6,14,.55) 62%, rgba(8,17,39,.96) 100%);
}
.plaka-gorsel img{
  /* Yatay taşma payı (%16 ≈ 38px), paralaks kaymasının en büyük değerinden
     (|--d|=1 → 34px) BÜYÜK olmalı; yoksa kartın lacivert zemini kenarda
     şerit olarak görünür. Dikey pay 6%'da kalıyor — kayma yalnızca yatay. */
  position:absolute; top:-6%; left:-16%; width:132%; height:112%; object-fit:cover;
  /* 57. satırdaki genel `img{max-width:100%}` sıfırlaması yatay taşmayı
     kırpıyordu — bu yüzden görsel kartı hiç doldurmuyor, sağda lacivert bir
     şerit kalıyordu. Dikey taşma çalışıyordu çünkü max-height yok. */
  max-width:none;
  /* Renk SABİT DEĞİL, odakla açılıyor: merkezdeki kart ~saturate(.92)
     brightness(.96), kenardaki ~saturate(.58) brightness(.74).
     Fark bilerek küçük tutuldu — "çok hafif açılsın" istendi. */
  filter:
    saturate(calc(.58 + var(--odak,0) * .34))
    brightness(calc(.74 + var(--odak,0) * .22))
    contrast(1.05);
  transition: filter .8s;
  /* rayın tersine kayar → kart bir pencere gibi davranır */
  transform: translate3d(calc(var(--d,0) * 34px), 0, 0);
  will-change: transform;
}
/* Hover odağın üstüne bir tık ekler; filtreyi sıfırdan yazıyor, o yüzden
   tam değerleri veriyoruz (fare zaten kartı merkezde yakalıyor). */
.plaka:hover .plaka-gorsel img{ filter:saturate(1) brightness(1.02) contrast(1.05); }
.plaka-alt, .plaka-yil, .plaka-rozet{
  transform: translate3d(calc(var(--d,0) * -9px), 0, 0);
}

.plaka-alt{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(16px,1.6vw,24px); display:grid; gap:.3rem;
}
.plaka-alt h3{ font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.5vw,22px); line-height:1.2; }
.plaka-alt p{ font-size:12px; letter-spacing:.05em; color:var(--celik); }
.plaka-yil{
  position:absolute; top:clamp(14px,1.4vw,20px); right:clamp(14px,1.4vw,20px); z-index:3;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--pirinc-ac);
  text-shadow:0 1px 12px rgba(8,17,39,.95);
}

/* şeridin sonundaki çağrı kartı */
/* imza proje — La Casalia */
.plaka--imza{ border-color:rgba(201,161,94,.34); }
.plaka--imza:hover{ border-color:rgba(201,161,94,.6); }
.plaka-rozet{
  position:absolute; top:clamp(14px,1.4vw,20px); left:clamp(14px,1.4vw,20px); z-index:3;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--murekkep);
  background:var(--pirinc); padding:.45em .9em; border-radius:999px; font-weight:500;
}

.plaka--son{
  display:grid; align-content:center; gap:1.3rem; justify-items:start;
  width: clamp(250px, 25vw, 360px);
  padding:clamp(24px,2.4vw,40px);
  background:linear-gradient(160deg, rgba(201,161,94,.14), rgba(6,12,27,.6));
  border-color:rgba(201,161,94,.26);
}
.plaka--son h3{ font-family:var(--serif); font-weight:300; font-size:clamp(20px,1.85vw,27px); line-height:1.28; }
.plaka--son:hover{ transform:none; }

.yatay-bar{
  position:absolute; left:var(--kenar); right:var(--kenar); bottom:clamp(38px,6vh,66px);
  height:1px; background:rgba(159,178,207,.12);
}
.yatay-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lacivert4),var(--pirinc)); }

/* Bölüm arası ince çizgi. Tonu ve kenar boşluğu .yatay-bar'ın (şeridin
   altındaki, "kaydırmaya devam edin" yazısının üstündeki çizgi) aynısı —
   dolan kısmı yok, yalnızca duran hat. */
.ayirac{
  height:1px; margin-inline:var(--kenar);
  background:rgba(159,178,207,.12);
}
.yatay-ipucu{
  position:absolute; left:var(--kenar); bottom:clamp(16px,3vh,34px);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--celik-sr);
}

/* --- alıntı --- */
.kesit--alinti{ padding-block:clamp(76px,12vh,150px); background:radial-gradient(ellipse 55% 42% at 100% 50%, rgba(255,255,255,.06) 0%, rgba(160,186,236,.15) 22%, rgba(95,125,195,.065) 50%, transparent 74%); }
.alinti{ max-width:780px; margin:0 auto; text-align:center; display:grid; gap:1.8rem; justify-items:center; }
.alinti p{
  font-family:var(--serif); font-weight:300; font-size:clamp(19px,2.5vw,36px);
  line-height:1.34; letter-spacing:-.006em;
}
.alinti em{ font-style:italic; color:var(--pirinc-ac); }
.alinti cite{
  font-style:normal; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--celik-sr);
}
.alinti cite::before{ content:'— '; }

/* =============================================================
   YOL HARİTASI — üst üste yığılan kartlar
   ============================================================= */
.yigin{ list-style:none; max-width:900px; margin:0 auto; padding-bottom:14vh; }
.yigin-kart:last-child{ margin-bottom:0; }
.yigin-kart{
  position:sticky;
  top: calc(clamp(86px,13vh,132px) + var(--i) * clamp(14px,2vh,22px));
  display:grid; grid-template-columns: clamp(104px,13vw,186px) 1fr auto;
  gap:clamp(16px,3vw,44px); align-items:start;
  padding:clamp(26px,4vh,46px) clamp(22px,3vw,44px);
  margin-bottom:clamp(150px,30vh,260px);   /* yığılma için kaydırma payı */
  border:1px solid rgba(159,178,207,.12); border-radius:6px;
  background:linear-gradient(150deg, #101F42 0%, #0C1735 62%);
  box-shadow: 0 -1px 0 rgba(201,161,94,.16), 0 -26px 60px rgba(3,6,14,.75);
}
.yigin-yil{
  font-family:var(--serif); font-size:clamp(13.5px,1.2vw,18px); color:var(--pirinc);
  letter-spacing:.02em; white-space:nowrap; padding-top:.15em;
}
.yigin-kart h3{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.75vw,25px); margin-bottom:.4rem; }
.yigin-kart p{ color:var(--celik); max-width:56ch; }
.yigin-no{
  font-family:var(--serif); font-size:clamp(20px,2.3vw,34px); line-height:1;
  color:rgba(159,178,207,.13);
}
.yigin-kurum{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--pirinc); margin-bottom:.5rem;
}
.yigin-yer{
  margin-top:.8rem; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--celik-sr);
}

/* =============================================================
   YETKİNLİKLER
   ============================================================= */
.kesit--yetkinlik{ background:radial-gradient(ellipse 55% 42% at 100% 52%, rgba(255,255,255,.06) 0%, rgba(160,186,236,.15) 22%, rgba(95,125,195,.065) 50%, transparent 74%); }
.yetkinlik-ag{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(20px,3vw,44px); max-width:1400px; margin:0 auto; align-items:stretch;
}
.yet-kutu{
  padding:clamp(22px,2.4vw,36px);
  display:flex; flex-direction:column;
  border:1px solid rgba(159,178,207,.1); border-radius:6px;
  background:linear-gradient(160deg, rgba(14,28,64,.5), rgba(6,12,27,.3));
}
.yet-kutu h3{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--pirinc);
  font-weight:500; margin-bottom:1.1rem;
}
.yet-kutu h3.yet-ara{ margin-top:2rem; }
.yet-kutu ul{ list-style:none; display:grid; gap:.1rem; }
.yet-kutu li{
  padding:.65rem 0; border-bottom:1px solid rgba(159,178,207,.08);
  color:var(--celik); font-size:14px; line-height:1.5;
}
.yet-kutu li:last-child{ border-bottom:0; }
.yet-dil li{ display:grid; gap:.15rem; }
.yet-dil span{ font-family:var(--serif); font-size:17.5px; color:var(--fildisi); }
.yet-dil em{ font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--celik-sr); }
.yet-etiketler{ display:flex !important; flex-wrap:wrap; gap:8px; }
.yet-etiketler li{
  border:1px solid rgba(159,178,207,.14); border-radius:999px; padding:.5em 1.05em;
  font-size:12px; letter-spacing:.06em; color:var(--celik); transition:.45s var(--gecis);
}
.yet-etiketler li:hover{ border-color:rgba(201,161,94,.45); color:var(--pirinc-ac); }

/* --- iletişim --- */
.kesit--iletisim{ background:radial-gradient(ellipse 55% 42% at 0% 45%, rgba(255,255,255,.06) 0%, rgba(160,186,236,.15) 22%, rgba(95,125,195,.065) 50%, transparent 74%); }
.iletisim-kutu{
  max-width:1360px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px,6vw,90px); align-items:start;
}
.iletisim-sol{ display:grid; gap:1.4rem; }
.iletisim-liste{ list-style:none; display:grid; gap:.1rem; margin-top:1rem; }
.iletisim-liste li{
  display:grid; grid-template-columns:110px 1fr; gap:1rem; align-items:center;
  padding:1rem 0; border-bottom:1px solid rgba(159,178,207,.1);
}
.iletisim-liste span{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--celik-sr); }
.iletisim-liste a{ font-family:var(--serif); font-size:clamp(15.5px,1.35vw,20px); transition:color .4s; }
.iletisim-liste a[href]:hover{ color:var(--pirinc-ac); }

.iletisim-form{ display:grid; gap:1rem; }
.iletisim-form label{ display:grid; gap:.45rem; }
.iletisim-form span{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--celik-sr); }
.iletisim-form input, .iletisim-form textarea{
  font:inherit; color:var(--fildisi); background:rgba(159,178,207,.05);
  border:1px solid rgba(159,178,207,.13); border-radius:3px; padding:.85em 1em;
  transition:.45s var(--gecis); resize:vertical;
}
.iletisim-form input:focus, .iletisim-form textarea:focus{
  outline:none; border-color:rgba(201,161,94,.55); background:rgba(201,161,94,.05);
}
.iletisim-form .dugme{ justify-self:start; margin-top:.4rem; }
.form-not{ font-size:11px; color:rgba(110,130,163,.65); letter-spacing:.04em; }

/* --- dip --- */
.dip{
  position:relative; z-index:10; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  padding: clamp(26px,4vh,42px) var(--kenar); border-top:1px solid rgba(159,178,207,.09);
  font-size:12px; letter-spacing:.08em; color:var(--celik-sr);
}
.dip-mono{ font-family:var(--serif); font-size:17px; color:var(--pirinc); letter-spacing:.05em; }
.dip p{ margin-right:auto; }
.dip-yukari{ transition:color .4s; }
.dip-yukari:hover{ color:var(--pirinc-ac); }

/* =============================================================
   BELİREN ÖĞELER
   ============================================================= */
.belir{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--gecis), transform 1.1s var(--gecis); }
.belir.icinde{ opacity:1; transform:none; }
.plakalar{ display:contents; }

/* =============================================================
   DUYARLI
   ============================================================= */
@media (max-width: 1080px){
  .ust-nav, .ust-cta{ display:none; }
  .burger{ display:block; }
  .iletisim-kutu{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .film{ height: 560vh; }
  .portre{ right:auto; left:auto; width: min(72vw, 340px); }
  .portre.yok .portre-bos{ border-color:rgba(159,178,207,.1); }
  .portre.yok .portre-bos em{ display:none; }
  .manifesto{ max-width:100%; font-size:clamp(22px,5.6vw,32px); }
  .manifesto-alt{ max-width:100%; }
  .ufuk{ top:88%; }
  .bolum{ padding-inline: var(--kenar); align-content:center; }
  .rakam-sira{ grid-template-columns:repeat(2,1fr); gap:26px 18px; }
  .yan-noktalar{ right:10px; gap:11px; }
  .yan-noktalar button::after{ display:none; }
  .ilkeler li{ grid-template-columns:auto 1fr; gap:14px; }
  .zaman li{ grid-template-columns:1fr; gap:.5rem; }
  /* ŞERİT: telefonda da masaüstündeki gibi çalışır — sayfayı aşağı kaydırdıkça
     kartlar yana kayar. Önceki sürümde native yatay kaydırmaya düşüyordu;
     aşağı kaydırınca hiçbir şey kaymadığı için "kartlar kaymıyor" gibi
     duruyordu, yana kaydırılabildiği de belli olmuyordu.
     Bu yüzden .yatay'ın yüksekliğini ve rayın transform'unu EZMİYORUZ. */
  .yatay-ray{ gap:14px; }
  .plaka{ width:72vw; height:clamp(330px,47vh,430px); }
  .plaka--son{ width:72vw; padding:22px; gap:1rem; }
  .serit-bas{ margin-bottom:2px; }
  .serit-bas .kesit-lede{ font-size:13px; }
  /* Derinlik telefonda daha yumuşak: dar ekranda komşu kartlar merkeze
     uzaklıkta hemen uca gidiyor, masaüstü katsayılarıyla fazla sönük kalıyor. */
  .plaka{
    transform:
      perspective(1100px)
      translateY(calc(var(--kalk) + var(--odak) * -6px))
      rotateY(calc(var(--d,0) * -6deg))
      scale(calc((1 - var(--dk,0) * 0.05 + var(--odak) * 0.02) * var(--buyut)));
    opacity: calc(1 - var(--dk,0) * 0.34);
  }
  .yatay-ipucu{ display:none; }
  .plaka-yil{ top:14px; bottom:auto; right:14px; text-shadow:0 1px 10px rgba(8,17,39,.9); }
  /* Deneyim kartları telefonda da yığılır. Eskiden `position:static` +
     16px boşluktu, yani masaüstündeki deste hiç yoktu. Yapışma basamağı ve
     kaydırma payı ekrana göre küçültüldü: 6 kartın en alttakinin yapışma
     noktası ~150px'te kalıyor, kart boyu buna sığıyor. */
  .yigin-kart{
    grid-template-columns:1fr auto; gap:.6rem 1rem;
    top: calc(clamp(74px,10.5vh,104px) + var(--i) * clamp(9px,1.3vh,15px));
    padding:22px 18px;
    margin-bottom:clamp(120px,24vh,210px);
  }
  .yigin-kart div{ grid-column:1 / -1; }
  .yigin{ padding-bottom:6vh; }
  /* Telefonda kartlar zaten tek tek ekrana giriyor; sıralı gecikme burada
     yalnızca sonrakileri geciktirir. */
  .neden-kart.acilir{ transition-delay:0s; }

  /* ---- DOKUNMA HEDEFLERİ ----
     Parmak ~44px'lik bir alana basar. Aşağıdakiler ölçülerek bulundu
     (390x844): film noktaları 18x18, iletişim bağlantıları 27px yüksek,
     "Başa dön" 21px, üst menü logosu 30x30. Görseli BÜYÜTMÜYORUZ —
     dokunulabilir alanı görünmez bir katmanla genişletiyoruz. */
  .yan-noktalar{ gap:20px; }
  .yan-noktalar button::before{
    content:''; position:absolute; left:50%; top:50%;
    width:42px; height:42px; transform:translate(-50%,-50%);
  }
  .iletisim-liste li{ padding:1.1rem 0; }
  .iletisim-liste a{ display:inline-block; padding:.45em 0; }
  .dip-yukari{ display:inline-block; padding:.7em 0; }
  .ust-logo{ padding-block:.5rem; }

  /* iOS Safari, 16px'TEN KÜÇÜK yazı tipli bir alana dokunulduğunda sayfayı
     otomatik yakınlaştırır ve geri çıkmaz. Alanlar 14,6px'ti. */
  .iletisim-form input,
  .iletisim-form textarea,
  .iletisim-form select{ font-size:16px; }
  .ust-ad{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .belir{ opacity:1; transform:none; }
}

/* =============================================================
   AÇIK TEMA — beyaz zemin, lacivert yazı, koyulaştırılmış pirinç
   Tüm renkler değişkenlerden geldiği için çoğu şey kendiliğinden döner;
   aşağıdakiler sabit renk yazdığım yerlerin karşılıkları.
   ============================================================= */
:root[data-tema="acik"]{
  --murekkep:  #FFFFFF;
  --lacivert:  #F4F7FB;
  --lacivert2: #E9EFF7;
  --lacivert3: #D7E1F0;
  --lacivert4: #9FB2D2;

  --cam:        rgba(14,27,51,.045);
  --cam-kenar:  rgba(14,27,51,.14);

  --fildisi:  #132444;
  --celik:    #41516E;
  --celik-sr: #74839E;

  --pirinc:    #9A7433;
  --pirinc-ac: #7E5D24;

  --krem:      #EAF0F8;
  --krem-2:    #DCE5F1;
  --krem-yazi: #132444;
  --krem-sr:   #54637E;
}

/* zemin */
:root[data-tema="acik"] body::before{
  background: radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, #F6F9FC 42%, #EDF2F8 100%);
}
:root[data-tema="acik"] body::after{ opacity:.025; }
:root[data-tema="acik"] ::selection{ background:var(--pirinc); color:#fff; }

/* üst menü */
:root[data-tema="acik"] .ust.yapisik{
  background:rgba(255,255,255,.82); border-bottom-color:rgba(14,27,51,.1);
}
:root[data-tema="acik"] .ust-mono{ border-color:rgba(154,116,51,.45); }
:root[data-tema="acik"] .ust-logo:hover .ust-mono,
:root[data-tema="acik"] .ust-cta:hover{ background:var(--pirinc); color:#fff; }
:root[data-tema="acik"] .burger span{ background:var(--fildisi); }
:root[data-tema="acik"] .mobil-menu{ background:rgba(255,255,255,.97); }
:root[data-tema="acik"] .sayfa-ilerleme{ background:rgba(14,27,51,.07); }

/* açılış perdesi */
:root[data-tema="acik"] .perde{
  background:radial-gradient(90% 70% at 50% 45%, #FFFFFF 0%, #EDF2F8 78%);
}
:root[data-tema="acik"] .perde-cizgi{ background:rgba(14,27,51,.14); }

/* film: kareler koyu kalıyor, üstündeki perdeler ona göre */
:root[data-tema="acik"] .film,
:root[data-tema="acik"] .sahne{ background:#0C1625; }
:root[data-tema="acik"] .bolum{ color:#EEF2F8; }
:root[data-tema="acik"] .bolum .etiket,
:root[data-tema="acik"] .bolum h1 em,
:root[data-tema="acik"] .bolum em,
:root[data-tema="acik"] .ilkeler b,
:root[data-tema="acik"] .rakam::before{ color:#E6CB96; }
:root[data-tema="acik"] .rakam::before{ background:#E6CB96; }
:root[data-tema="acik"] .giris-lede,
:root[data-tema="acik"] .manifesto-alt,
:root[data-tema="acik"] .ilkeler span,
:root[data-tema="acik"] .rakam-yazi{ color:#AFC0DA; }
:root[data-tema="acik"] .rakam-deger{
  background:linear-gradient(180deg, #EEF2F8 30%, rgba(175,192,218,.55));
  -webkit-background-clip:text; background-clip:text;
}
:root[data-tema="acik"] .kaydir-ipucu span,
:root[data-tema="acik"] .yan-noktalar button::after{ color:#AFC0DA; }
:root[data-tema="acik"] .bolum .dugme{ color:#EEF2F8; }
:root[data-tema="acik"] .bolum .dugme--pirinc{ color:#F2DCB0; }

/* alt sayfa yüzeyi */
:root[data-tema="acik"] .alt-sayfa{
  background:linear-gradient(180deg,#FFFFFF 0%, #FFFFFF 100%);
  box-shadow:0 -1px 0 rgba(154,116,51,.3),
             0 -30px 70px rgba(14,27,51,.16),
             0 -80px 160px rgba(14,27,51,.08);
}
:root[data-tema="acik"] .alt-sayfa::after{ background:rgba(14,27,51,.16); }

/* bantlar: koyu→beyaz, krem→soluk lacivert */
:root[data-tema="acik"] .bant--koyu{
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(244,247,251,.7));
}
:root[data-tema="acik"] .dalga path{ fill:#FFFFFF; }
:root[data-tema="acik"] .kesit--projeler{ background:transparent; }
:root[data-tema="acik"] .kesit--yetkinlik,
:root[data-tema="acik"] .kesit--yorunge{
  background:linear-gradient(180deg,rgba(244,247,251,.9),rgba(255,255,255,0));
}
:root[data-tema="acik"] .kesit--iletisim{
  background:linear-gradient(180deg,rgba(255,255,255,0), #F4F7FB);
}
:root[data-tema="acik"] .kesit--madalya::before{
  background:radial-gradient(ellipse, rgba(154,116,51,.09) 0%, transparent 62%);
}

/* proje kartları */
:root[data-tema="acik"] .plaka{
  background:linear-gradient(160deg, #F4F7FB 0%, #E9EFF7 60%);
  border-color:rgba(14,27,51,.1);
  box-shadow:0 14px 34px rgba(14,27,51,.08);
  opacity: calc(1 - var(--dk,0) * 0.14);
  filter: saturate(calc(1 - var(--dk,0) * .45));
}
:root[data-tema="acik"] .plaka:hover{ border-color:rgba(154,116,51,.5); }
:root[data-tema="acik"] .plaka-gorsel::after{
  background:linear-gradient(180deg, transparent 26%, rgba(9,18,36,.62) 60%, rgba(14,28,56,.95) 100%);
}
:root[data-tema="acik"] .plaka-alt h3{ color:#FFFFFF; }
:root[data-tema="acik"] .plaka-alt p{ color:rgba(255,255,255,.82); }
:root[data-tema="acik"] .plaka-yil{ color:#F2DCB0; }
:root[data-tema="acik"] .plaka-gorsel img{ filter:saturate(.85) brightness(.95) contrast(1.02); }
:root[data-tema="acik"] .plaka--son{
  background:linear-gradient(160deg, rgba(154,116,51,.12), rgba(244,247,251,.9));
}
:root[data-tema="acik"] .plaka--son h3{ color:var(--fildisi); }
:root[data-tema="acik"] .yatay-bar,
:root[data-tema="acik"] .ayirac{ background:rgba(14,27,51,.1); }

/* kayan yazı şeridi */
:root[data-tema="acik"] .kayan{ border-color:rgba(14,27,51,.09); }
:root[data-tema="acik"] .kayan-ic span{ color:rgba(14,27,51,.22); }

/* yığın kartları */
:root[data-tema="acik"] .yigin-kart{
  background:linear-gradient(150deg, #FFFFFF 0%, #F4F7FB 62%);
  border-color:rgba(14,27,51,.1);
  box-shadow:0 -1px 0 rgba(154,116,51,.2), 0 -18px 44px rgba(14,27,51,.1);
}
:root[data-tema="acik"] .yigin-kart.tepede{ border-color:rgba(154,116,51,.45); }
:root[data-tema="acik"] .yigin-no{ color:rgba(14,27,51,.1); }
:root[data-tema="acik"] @keyframes yiginParla{}
:root[data-tema="acik"] .yigin-kart.parla{ animation-name:yiginParlaAcik; }
@keyframes yiginParlaAcik{
  0%{ border-color:rgba(14,27,51,.1);
      background:linear-gradient(150deg,#FFFFFF 0%,#F4F7FB 62%);
      box-shadow:0 -1px 0 rgba(154,116,51,.2), 0 -18px 44px rgba(14,27,51,.1) }
  30%{ border-color:rgba(154,116,51,.9);
      background:linear-gradient(150deg,#FFFDF7 0%,#F7F1E4 62%);
      box-shadow:0 0 0 1px rgba(154,116,51,.5), 0 0 54px rgba(154,116,51,.3),
                 0 -18px 44px rgba(14,27,51,.1) }
  46%{ border-color:rgba(154,116,51,.7);
      background:linear-gradient(150deg,#FFFEFB 0%,#F6F2E9 62%);
      box-shadow:0 0 0 1px rgba(154,116,51,.36), 0 0 44px rgba(154,116,51,.22),
                 0 -18px 44px rgba(14,27,51,.1) }
  100%{ border-color:rgba(154,116,51,.45);
      background:linear-gradient(150deg,#FFFFFF 0%,#F4F7FB 62%);
      box-shadow:0 -1px 0 rgba(154,116,51,.2), 0 -18px 44px rgba(14,27,51,.1) }
}

/* cam kart · yörünge · panel */
:root[data-tema="acik"] .cam-kart,
:root[data-tema="acik"] .panel-kart{
  background:linear-gradient(160deg, #FFFFFF, #F4F7FB);
  border-color:rgba(154,116,51,.28);
  box-shadow:0 22px 52px rgba(14,27,51,.12);
}
:root[data-tema="acik"] .yorunge-halka{ border-color:rgba(14,27,51,.14); }
:root[data-tema="acik"] .yorunge-halka--ic{ border-color:rgba(154,116,51,.22); }
:root[data-tema="acik"] .mrk-cekirdek{
  background:radial-gradient(circle at 38% 32%, #E7EEF8, #CDDAEC 74%);
  border-color:rgba(154,116,51,.4); color:var(--pirinc);
  box-shadow:0 0 40px rgba(159,178,210,.6), inset 0 0 22px rgba(255,255,255,.7);
}
:root[data-tema="acik"] .mrk-nabiz{ border-color:rgba(154,116,51,.32); }
:root[data-tema="acik"] .dugum-nokta{
  background:#FFFFFF; border-color:rgba(14,27,51,.22); color:var(--celik);
  box-shadow:0 4px 14px rgba(14,27,51,.08);
}
:root[data-tema="acik"] .dugum.acik .dugum-nokta{ color:#FFFFFF; }
:root[data-tema="acik"] .dugum-ad{
  background:rgba(255,255,255,.92); border-color:rgba(14,27,51,.12);
  color:var(--fildisi); text-shadow:none;
}
:root[data-tema="acik"] .dugum.acik .dugum-ad{ color:#FFFFFF; }
:root[data-tema="acik"] .panel-gorsel::after{
  background:linear-gradient(180deg, transparent 45%, rgba(255,255,255,.9) 100%);
}
:root[data-tema="acik"] .panel-gorsel img{ filter:saturate(.9) brightness(1) contrast(1.02); }

/* form */
:root[data-tema="acik"] .iletisim-form input,
:root[data-tema="acik"] .iletisim-form textarea{
  background:#FFFFFF; border-color:rgba(14,27,51,.16); color:var(--fildisi);
}
:root[data-tema="acik"] .iletisim-form input:focus,
:root[data-tema="acik"] .iletisim-form textarea:focus{
  border-color:rgba(154,116,51,.6); background:#FFFDF8;
}
:root[data-tema="acik"] .dugme--pirinc{
  background:linear-gradient(180deg, rgba(154,116,51,.14), rgba(154,116,51,.05));
  color:var(--pirinc-ac); border-color:rgba(154,116,51,.45);
}
:root[data-tema="acik"] .dugme--pirinc:hover{ background:var(--pirinc); color:#fff; }
:root[data-tema="acik"] .dip{ border-top-color:rgba(14,27,51,.1); }

/* =============================================================
   TEMA DÜĞMESİ
   ============================================================= */
.tema-dugme{
  width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto;
  border:1px solid var(--cam-kenar); border-radius:50%; color:var(--celik);
  background:var(--cam); transition:.45s var(--gecis); cursor:pointer;
}
.tema-dugme:hover{ color:var(--pirinc-ac); border-color:rgba(201,161,94,.5); }
.tema-dugme svg{ width:17px; height:17px; grid-area:1/1; transition:.45s var(--gecis); }
.tema-gunes{ opacity:0; transform:rotate(-70deg) scale(.6); }
:root[data-tema="acik"] .tema-ay{ opacity:0; transform:rotate(70deg) scale(.6); }
:root[data-tema="acik"] .tema-gunes{ opacity:1; transform:none; }
@media (max-width:1080px){ .tema-dugme{ margin-right:8px; } }

/* --- açık tema: eksik kalanlar --- */

/* Yığın destesi. Koyu temada kart "karararak" geri çekilir; beyazda kararmak
   kirli gri veriyor. Opaklık düşürmek de olmaz — kart saydamlaşınca altındaki
   kart içinden görünüyor (hayalet). Çözüm: kartın üstüne beyaz bir örtü. */
:root[data-tema="acik"] .yigin-kart{ filter:none; opacity:1; }
:root[data-tema="acik"] .yigin-kart::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:#FFFFFF; opacity: calc(var(--ort,0) * 0.66);
}

/* yetkinlik kutuları */
:root[data-tema="acik"] .yet-kutu{
  background:linear-gradient(160deg, #FFFFFF, #F4F7FB);
  border-color:rgba(14,27,51,.1);
  box-shadow:0 12px 30px rgba(14,27,51,.06);
}
:root[data-tema="acik"] .yet-kutu li{ border-bottom-color:rgba(14,27,51,.09); }
:root[data-tema="acik"] .yet-dil span{ color:var(--fildisi); }
:root[data-tema="acik"] .yet-etiketler li{ border-color:rgba(14,27,51,.16); }
:root[data-tema="acik"] .yet-etiketler li:hover{
  border-color:rgba(154,116,51,.5); color:var(--pirinc-ac);
}

/* ikon halkaları */
:root[data-tema="acik"] .ikon{
  border-color:rgba(154,116,51,.5);
  background:radial-gradient(circle at 50% 45%, rgba(154,116,51,.1), transparent 70%);
}
:root[data-tema="acik"] .bant--acik .ikon{ border-color:rgba(154,116,51,.45); }

/* zaman/rozet/şerit ufak parçalar */
:root[data-tema="acik"] .plaka-rozet{ color:#FFFFFF; background:var(--pirinc); }
:root[data-tema="acik"] .yatay-ipucu,
:root[data-tema="acik"] .yorunge-ipucu{ color:var(--celik-sr); }
:root[data-tema="acik"] .cam-liste li{ border-bottom-color:rgba(14,27,51,.1); }
:root[data-tema="acik"] .cam-not,
:root[data-tema="acik"] .rakam-not,
:root[data-tema="acik"] .form-not{ color:rgba(116,131,158,.9); }
:root[data-tema="acik"] .iletisim-liste li{ border-bottom-color:rgba(14,27,51,.1); }
:root[data-tema="acik"] .panel-bagli,
:root[data-tema="acik"] .dk-bagli{ border-top-color:rgba(14,27,51,.12); }
:root[data-tema="acik"] .panel-gec{ border-color:rgba(14,27,51,.18); }
:root[data-tema="acik"] .alinti cite{ color:var(--celik-sr); }

/* =============================================================
   AÇIK TEMA · DAHA ÇOK LACİVERT
   Ara bantlar soluk mavi yerine koyu lacivert oluyor; sayfa
   beyaz ↔ lacivert olarak dönüşümlü akıyor.
   ============================================================= */
:root[data-tema="acik"] .bant--acik{
  background:#142649; color:#E7EEF8;
}
:root[data-tema="acik"] .bant--acik .etiket{ color:#DCBC80; }
:root[data-tema="acik"] .bant--acik h2{ color:#FFFFFF; }
:root[data-tema="acik"] .bant--acik h2 em,
:root[data-tema="acik"] .bant--acik .hakkimda-yazi h2 em{ color:#E6CB96; }
:root[data-tema="acik"] .bant--acik p,
:root[data-tema="acik"] .bant--acik .kesit-lede{ color:#A9BBD6; }
:root[data-tema="acik"] .bant--acik .neden-kart h3{ color:#FFFFFF; }
:root[data-tema="acik"] .bant--acik .ikon{
  border-color:rgba(230,203,150,.45); color:#E6CB96 !important;
  background:radial-gradient(circle at 50% 45%, rgba(230,203,150,.12), transparent 70%);
}
/* lacivert bandın içindeki düğme */
:root[data-tema="acik"] .bant--acik .dugme--koyu{
  border-color:rgba(231,238,248,.32); color:#E7EEF8;
}
:root[data-tema="acik"] .bant--acik .dugme--koyu:hover{
  background:#E7EEF8; color:#142649; border-color:#E7EEF8;
}
/* portre rozeti lacivert bandın üstünde altın olsun */
:root[data-tema="acik"] .gorsel-etiket{ background:#E6CB96; color:#142649; }
:root[data-tema="acik"] .hakkimda-gorsel img{ box-shadow:0 30px 70px rgba(4,10,24,.5); }

/* dalga: beyaz bant laciverdin içine taşar */
:root[data-tema="acik"] .dalga path{ fill:#FFFFFF; }

/* rakam şeridi de lacivert olsun — üstteki filmle alttaki beyaz arasında köprü */
:root[data-tema="acik"] .bant--rakam{
  background:#112141;
}
:root[data-tema="acik"] .bant--rakam .ikon-rakam strong{ color:#FFFFFF; }
:root[data-tema="acik"] .bant--rakam .ikon-rakam > div > span{ color:#9FB2D2; }
:root[data-tema="acik"] .bant--rakam .ikon{
  border-color:rgba(230,203,150,.45); color:#E6CB96 !important;
  background:radial-gradient(circle at 50% 45%, rgba(230,203,150,.12), transparent 70%);
}

/* yatırım bandı da lacivert — cam kart onun üstünde */
:root[data-tema="acik"] #yatirim{ background:#142649; }
:root[data-tema="acik"] #yatirim .etiket{ color:#DCBC80; }
:root[data-tema="acik"] #yatirim h2{ color:#FFFFFF; }
:root[data-tema="acik"] #yatirim h2 em{ color:#E6CB96; }
:root[data-tema="acik"] #yatirim .kesit-lede{ color:#A9BBD6; }
:root[data-tema="acik"] #yatirim .cam-kart{
  background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border-color:rgba(230,203,150,.3); box-shadow:0 26px 60px rgba(4,10,24,.45);
}
:root[data-tema="acik"] #yatirim .cam-bas{ color:#E6CB96; }
:root[data-tema="acik"] #yatirim .cam-liste li{
  color:#C6D4E8; border-bottom-color:rgba(231,238,248,.14);
}
:root[data-tema="acik"] #yatirim .cam-liste span{ color:#E6CB96; }
:root[data-tema="acik"] #yatirim .cam-not{ color:rgba(169,187,214,.75); }
:root[data-tema="acik"] #yatirim .dugme--pirinc{
  background:linear-gradient(180deg, rgba(230,203,150,.2), rgba(230,203,150,.07));
  color:#F2DCB0; border-color:rgba(230,203,150,.5);
}
:root[data-tema="acik"] #yatirim .dugme--pirinc:hover{ background:#E6CB96; color:#142649; }

/* kayan yazı şeridi lacivert bandın hemen üstünde — kontrastı koru */
:root[data-tema="acik"] .kayan-ic span{ color:rgba(16,30,58,.28); }

/* =============================================================
   DİL DÜĞMESİ
   ============================================================= */
.dil-dugme{
  display:flex; align-items:center; gap:3px; flex:0 0 auto;
  height:38px; padding:0 13px; border-radius:999px;
  border:1px solid var(--cam-kenar); background:var(--cam);
  font-size:11px; letter-spacing:.14em; font-weight:500;
  color:var(--celik-sr); transition:.45s var(--gecis); cursor:pointer;
}
.dil-dugme:hover{ border-color:rgba(201,161,94,.5); }
.dil-ayrac{ opacity:.35; }
.dil-tr, .dil-en{ transition:color .35s var(--gecis); }
:root[data-dil="tr"] .dil-tr{ color:var(--pirinc-ac); }
:root[data-dil="en"] .dil-en{ color:var(--pirinc-ac); }
@media (max-width:1080px){ .dil-dugme{ margin-right:6px; } }

/* =============================================================
   FİLM · ÜLKE KARTI  (bulutlara girmeden, kıyıya inerken)
   ============================================================= */
.bolum--ulke{ justify-items:center; text-align:center; gap:clamp(14px,2.2vh,24px); }
.ulke-cizgi{
  display:block; width:clamp(90px,16vw,220px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,161,94,.75), transparent);
}
.ulke-ad{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(26px,3.6vw,54px); line-height:1.18; letter-spacing:.06em;
  text-transform:uppercase; color:#fff;
}
.ulke-alt{
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(201,161,94,.85);
}

/* =============================================================
   FİLM · "RAKAMLARLA" ETİKETİ — arkasında gradyen, animasyonla
   ============================================================= */
.bolum--rakam{ padding-top:clamp(40px,9vh,110px); }   /* biraz daha aşağıda */
/* parlak film karelerinin üstünde rakamlar okunsun diye yumuşak karartma */
.bolum--rakam::before{
  content:''; position:absolute; left:50%; top:50%; z-index:-1;
  width:min(1500px,96vw); height:clamp(300px,46vh,460px);
  transform:translate(-50%,-42%); pointer-events:none;
  background:radial-gradient(ellipse 58% 50% at 50% 50%,
             rgba(3,6,14,.80) 0%, rgba(3,6,14,.56) 48%, transparent 78%);
}
/* ülke kartı için de aynısı */
.bolum--ulke::before{
  content:''; position:absolute; left:50%; top:50%; z-index:-1;
  width:min(1100px,92vw); height:clamp(240px,34vh,340px);
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(ellipse 56% 50% at 50% 50%,
             rgba(3,6,14,.66) 0%, rgba(3,6,14,.38) 50%, transparent 78%);
}
.bolum--rakam .etiket,
.bolum--ilke .etiket{
  position:relative; isolation:isolate;
  padding:.72em 1.9em .72em 1.5em; border-radius:999px;
  margin-bottom:clamp(6px,1.6vh,18px);
  /* --eg: 0 → gizli, 1 → tam açık (main.js sürer) */
  --eg:1;
  opacity:var(--eg);
  transform: translateY(calc((1 - var(--eg)) * 18px));
}
.bolum--rakam .etiket::after,
.bolum--ilke .etiket::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(201,161,94,.26) 0%, rgba(26,49,99,.42) 45%, rgba(4,8,18,.18) 100%);
  border:1px solid rgba(201,161,94,.3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  /* gradyen soldan sağa açılır */
  clip-path: inset(0 calc((1 - var(--eg)) * 100%) 0 0 round 999px);
}

/* =============================================================
   İKON RAKAM ŞERİDİ — scroll ile teker teker, sonra parlar
   ============================================================= */
.ikon-rakam{
  --g:1;
  opacity: var(--g);
  transform: translate3d(0, calc((1 - var(--g)) * 22px), 0);
}
.ikon-rakam.parla .ikon{ animation: ikonParla 1.6s cubic-bezier(.33,0,.2,1); }
@keyframes ikonParla{
  0%{   border-color:rgba(201,161,94,.5);  box-shadow:none }
  28%{  border-color:rgba(201,161,94,1);
        box-shadow:0 0 0 1px rgba(201,161,94,.5), 0 0 42px rgba(201,161,94,.5) }
  100%{ border-color:rgba(201,161,94,.5);  box-shadow:none }
}
.ikon-rakam.parla strong{ animation: sayacParla 1.6s cubic-bezier(.33,0,.2,1); }
@keyframes sayacParla{
  0%{   color:inherit; text-shadow:none }
  28%{  color:#F4E0B6; text-shadow:0 0 26px rgba(201,161,94,.75) }
  100%{ color:inherit; text-shadow:none }
}
@media (prefers-reduced-motion: reduce){
  .ikon-rakam{ opacity:1 !important; transform:none !important }
  .ikon-rakam.parla .ikon, .ikon-rakam.parla strong{ animation:none !important }
  .bolum--rakam .etiket{ opacity:1 !important; transform:none !important }
  .bolum--rakam .etiket::after,
.bolum--ilke .etiket::after{ clip-path:none }
}

/* =============================================================
   AÇIK TEMA · YAZILAR KOYU LACİVERT
   ============================================================= */
:root[data-tema="acik"]{
  --fildisi:  #0F1E3B;
  --celik:    #2A3957;
  --celik-sr: #4A5B77;
  --krem-yazi:#0F1E3B;
  --krem-sr:  #2A3957;
}
:root[data-tema="acik"] .kesit-bas h2,
:root[data-tema="acik"] .bant-bas h2,
:root[data-tema="acik"] .hakkimda-yazi h2,
:root[data-tema="acik"] .alinti p,
:root[data-tema="acik"] .yigin-kart h3,
:root[data-tema="acik"] .neden-kart h3,
:root[data-tema="acik"] .plaka--son h3,
:root[data-tema="acik"] .panel-kart h3,
:root[data-tema="acik"] .iletisim-liste a{ color:#0F1E3B; }
:root[data-tema="acik"] .kesit-lede,
:root[data-tema="acik"] .yigin-kart p,
:root[data-tema="acik"] .neden-kart p,
:root[data-tema="acik"] .panel-metin p,
:root[data-tema="acik"] .hakkimda-yazi p{ color:#2A3957; }
/* lacivert bantların içindekiler açık kalmalı */
:root[data-tema="acik"] .bant--acik h2,
:root[data-tema="acik"] .bant--acik .neden-kart h3{ color:#FFFFFF; }
:root[data-tema="acik"] .bant--acik p,
:root[data-tema="acik"] .bant--acik .kesit-lede,
:root[data-tema="acik"] .bant--acik .neden-kart p,
:root[data-tema="acik"] .bant--acik .hakkimda-yazi p{ color:#A9BBD6; }
:root[data-tema="acik"] #yatirim h2{ color:#FFFFFF; }
:root[data-tema="acik"] #yatirim .kesit-lede{ color:#A9BBD6; }

/* =============================================================
   FİLM · KONUM İŞARETİ  (manifesto karesinde, solda)
   ============================================================= */
.konum-isareti{
  display:flex; align-items:center; gap:.62em;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--pirinc-ac);
  margin-top:calc(clamp(14px,2.4vh,26px) * -0.5);
  /* --kg: 0 → gizli, 1 → açık (bölüm ilerlemesiyle) */
  --kg:1;
  opacity:var(--kg);
  transform: translateX(calc((1 - var(--kg)) * -16px));
}
.konum-ikon{
  width:1.55em; height:1.55em; display:grid; place-items:center; flex:0 0 auto;
  color:var(--pirinc);
}
.konum-ikon svg{ width:100%; height:100%; }
/* nabız: canlı bir işaret gibi */
.konum-ikon::after{
  content:''; position:absolute; width:1.55em; height:1.55em; border-radius:50%;
  border:1px solid rgba(201,161,94,.5);
  animation: konumNabiz 2.6s cubic-bezier(0,0,.2,1) infinite;
}
.konum-isareti{ position:relative; }
.konum-ikon{ position:relative; }
@keyframes konumNabiz{
  0%{ transform:scale(.6); opacity:.8 }
  75%,100%{ transform:scale(2); opacity:0 }
}
.konum-yazi{ position:relative; }
@media (max-width:760px){
  .konum-isareti{ font-size:9.5px; letter-spacing:.2em; }
}
@media (prefers-reduced-motion: reduce){
  .konum-ikon::after{ animation:none; opacity:0 }
  .konum-isareti{ opacity:1 !important; transform:none !important }
}

/* --- konum işareti: sağ üstte, büyük --- */
.bolum--manifesto .konum-isareti{
  /* üst menünün altında kalmasın */
  position:absolute; top:clamp(74px,11vh,124px); right:var(--kenar); margin:0;
  font-size:clamp(12px,1.05vw,15px); letter-spacing:.2em;
  transform: translateX(calc((1 - var(--kg)) * 18px));
}
.bolum--manifesto .konum-isareti .konum-ikon{ width:1.45em; height:1.45em; }
@media (max-width:760px){
  .bolum--manifesto .konum-isareti{
    position:static; margin-bottom:.4rem; font-size:10px; letter-spacing:.16em;
    transform: translateX(calc((1 - var(--kg)) * -14px));
  }
}

/* =============================================================
   FİLM · "NE YAPIYORUM" — parlak karelerin üstünde okunurluk
   Karartma yaması yerine listeyi cam panele alıyoruz; sitenin
   yatırım bandındaki .cam-kart diliyle aynı.
   ============================================================= */
.bolum--ilke .ilkeler{
  position:relative; isolation:isolate;
  padding:clamp(20px,2.6vw,34px) clamp(22px,2.8vw,38px);
  border-radius:12px;
  border:1px solid rgba(201,161,94,.22);
  background:linear-gradient(150deg, rgba(8,16,36,.78), rgba(4,8,18,.72));
  -webkit-backdrop-filter:blur(16px) saturate(120%);
          backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 26px 64px rgba(3,6,14,.55);
  max-width:min(760px, 62vw);
}
/* panel bölümle birlikte süzülerek gelsin */
.bolum--ilke .ilkeler{
  --pg:1;
  opacity: calc(.25 + var(--pg) * .75);
  transform: translateY(calc((1 - var(--pg)) * 20px));
}
.bolum--ilke .ilkeler li{ border-bottom-color:rgba(201,161,94,.16); }
.bolum--ilke .ilkeler li:last-child{ border-bottom:0; padding-bottom:0; }
.bolum--ilke .ilkeler strong{ color:#FFFFFF; }
.bolum--ilke .ilkeler span{ color:#C3D2E8; }
.bolum--ilke .ilkeler b{ color:var(--pirinc-ac); }

@media (max-width:760px){
  .bolum--ilke .ilkeler{
    max-width:100%; padding:clamp(16px,4vw,22px);
  }
}
@media (prefers-reduced-motion: reduce){
  .bolum--ilke .ilkeler{ opacity:1 !important; transform:none !important }
}

/* şerit sonundaki "Tüm projeler" kartı */
.plaka--son h3 em{ font-style:italic; color:var(--pirinc) }
.plaka-son-alt{
  font-family:var(--sans); font-weight:300; font-size:13.5px; line-height:1.7;
  color:var(--sis-2); max-width:30ch; margin-top:-4px;
}
:root[data-tema="acik"] .plaka-son-alt{ color:#7B8296 }

/* =============================================================
   TELEFON DÜZELTMELERİ (24 Eylül)
   ============================================================= */
@media (max-width:760px){
  /* Yörünge etiketi düğümün ALTINA ORTALANIR ve gerekirse alt satıra iner.
     Eskiden düğümün sol kenarından başlayıp sağa uzuyordu; sağdaki düğümlerin
     uzun adları ("Yatırım Danışmanlığı") ekran dışına taşıp kırpılıyordu. */
  .dugum-ad{
    left:50%; transform:translateX(-50%);
    white-space:normal; text-align:center; line-height:1.25;
    max-width:min(104px, 28vw);
    font-size:10px; letter-spacing:.02em;
    padding:.3em .6em;
  }
  .dugum.acik .dugum-ad{ transform:translate(-50%,4px); }

  /* Sekiz ad bu çapta üst üste biniyordu ("Proje Sunumu ve Lansman" alttaki
     ikonun üstüne, "Yatırım Danışmanı ve Satış Yöneticisi" komşusunun üstüne
     geliyordu). Telefonda yalnızca ÖNDEKİ (en alttaki) düğümün adı ve seçili
     düğümün adı görünür; çark döndükçe ad değişir. main.js önteki düğüme
     `on` sınıfını veriyor. */
  .dugum-ad{ opacity:0; transition:opacity .35s var(--gecis), color .4s, background .4s; }
  .dugum.on .dugum-ad,
  .dugum.acik .dugum-ad{ opacity:1; }
  /* Tek başına durduğu için biraz daha büyük ve geniş olabilir. */
  .dugum.on .dugum-ad, .dugum.acik .dugum-ad{
    max-width:min(148px, 40vw); font-size:11px;
  }
  /* En alttaki düğümün adı sahne kutusunun ~10px dışına taşıyor ve ipucu
     yazısının üstüne biniyordu; ipucunu aşağı alıyoruz. */
  .yorunge-ipucu{ margin-top:40px; }

  /* 9–9,5 px yazılar telefonda okunmuyordu; taban 10,5 px */
  .yan-etiket, .kaydir-ipucu span,
  .rakam-yazi, .plaka-rozet, .konum-isareti, .yorunge-ipucu{ font-size:10.5px; }

  /* Dokunma hedefleri: görünen boyut aynı kalsın, tıklama alanı büyüsün */
  .burger{ width:44px; height:44px; display:grid; align-content:center; }
  .burger span{ left:5px; right:5px; }
  .burger span:first-child{ top:16px; } .burger span:last-child{ bottom:16px; }
  .burger.acik span:first-child{ top:21px; } .burger.acik span:last-child{ bottom:22px; }
  .yan-noktalar button{ padding:9px; margin:-9px; background-clip:content-box; }

  /* Şerit kartındaki bölge etiketi kart kenarına yapışmasın */
  .plaka-yil{ right:14px; }
}

/* Şerit kartını tıklanabilir yapan katman. Kartın tamamını kaplar,
   görünmez ama klavyeyle odaklanabilir (ekran okuyucu metni okur). */
.plaka-ac{
  position:absolute; inset:0; z-index:6; cursor:pointer;
  border:0; background:transparent; padding:0;
  font-size:0; color:transparent; -webkit-appearance:none; appearance:none;
}
.plaka-ac:focus-visible{
  outline:2px solid var(--pirinc); outline-offset:-4px; border-radius:5px;
}
/* dokunuşta/hover'da kartın kendi hareketi korunur; sadece ince bir ipucu */
.plaka::after{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(201,161,94,0);
  transition: box-shadow .45s var(--gecis);
}
.plaka:has(.plaka-ac:hover)::after,
.plaka:has(.plaka-ac:focus-visible)::after{
  box-shadow: inset 0 0 0 1px rgba(201,161,94,.5);
}

/* Beyaz temaya özel dalgalı ayraçlar.
   Koyu temada bu bantlar zaten koyu zemin üzerinde koyu duruyor; ayraç
   gereksiz ve görünürse tasarımı bozar. Bu yüzden SADECE açık temada çizilir.
   KOYU TASARIM BUNDAN ETKİLENMEZ. */
.dalga--beyaz{ display:none; }
:root[data-tema="acik"] .dalga--beyaz{ display:block; }
/* Dalgalı ayraç eklenen koyu bantların kenar dolgusu, dalganın yüksekliği
   kadar artmalı — yoksa dalga içeriğin üstüne biner.
   DİKKAT: #yatirim'in kendi kimlik kuralı (satır ~631 padding-block) sınıf
   seçicisini ezer; bu yüzden kimlikle yazılmak zorunda. */
:root[data-tema="acik"] #yatirim{
  padding-top:    calc(clamp(70px,11vh,140px) + clamp(46px,6vw,90px));
  padding-bottom: calc(clamp(70px,11vh,140px) + clamp(46px,6vw,90px));
}
/* Rakam şeridi alçak bir bant; ona yalnızca alt boşluk yeter. */
:root[data-tema="acik"] .bant--rakam:has(> .dalga--alt){
  padding-bottom: calc(clamp(30px,4vh,52px) + clamp(46px,6vw,90px));
}

/* =============================================================
   İS MONOGRAMI — logodan (assets/logo-monogram.png)
   Maske olarak kullanılıyor: dosya beyaz çizim + saydam zemin,
   rengi currentColor'dan geliyor. Böylece koyu ve açık temada
   ayrı dosya gerekmiyor, renk kurallarına kendiliğinden uyuyor.
   ============================================================= */
.mono-mark{
  display:block;
  background-color:currentColor;
  -webkit-mask:url('assets/logo-monogram.png') no-repeat center / contain;
          mask:url('assets/logo-monogram.png') no-repeat center / contain;
}
/* üst menüdeki kutu: yazı yerine marka */
/* Ölçü px cinsinden: em kullanılınca .ust-mono'dan gelen 20px'e bağlanıyor
   ve yanındaki 12px'lik ".ust-ad" yazısının yanında iri kalıyordu.
   14×20px marka + 4/7px iç boşluk = 30×30px kutu; yazının ~9px'lik büyük
   harf yüksekliğiyle aynı ölçekte duruyor. */
.ust-mono.mono-mark{
  width:14px; height:20px;
  padding:4px 7px; box-sizing:content-box;
}
/* yörünge merkezindeki çekirdek */
.mrk-cekirdek .mono-mark{ width:42%; height:56%; }
/* alt bilgideki marka — üst menüdekiyle aynı ölçekte (14×20 + iç boşluk),
   yanındaki telif satırı da 12px. */
.dip-mono.mono-mark{ width:15px; height:23px; }

/* Deneyimlerim: uzun bölüm — iki yan ışıma, üst/alt kenardan uzak */
.kesit--yol{ background:radial-gradient(ellipse 60% 18% at 0% 28%, rgba(255,255,255,.06) 0%, rgba(160,186,236,.15) 22%, rgba(95,125,195,.065) 50%, transparent 74%), radial-gradient(ellipse 60% 18% at 100% 72%, rgba(255,255,255,.06) 0%, rgba(160,186,236,.15) 22%, rgba(95,125,195,.065) 50%, transparent 74%); }