/* =========================================================================
   Tasarımcı Dayı — site stilleri
   Sıcak krem zemin, turuncu vurgu, yuvarlak tipografi, editorial düzen.
   ========================================================================= */

/* ------------------------------------------------------------ tokenlar */
:root{
  --cream:#fdf7f1;
  --cream-2:#faeee2;
  --cream-3:#f6e6d6;
  --white:#fff;
  --ink:#1e1a17;
  --ink-2:#4a423b;
  --ink-3:#857a70;
  --orange:#f26522;
  --orange-d:#d9500f;
  --orange-l:#ff8a45;
  --orange-bg:#fff1e7;
  --line:rgba(30,26,23,.10);
  --line-2:rgba(30,26,23,.06);

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  --sh-sm:0 2px 8px rgba(60,40,25,.06);
  --sh:0 8px 24px rgba(60,40,25,.08);
  --sh-lg:0 20px 50px rgba(60,40,25,.12);

  --wrap:1200px;
  --pad:clamp(18px,4vw,36px);
  --sec:clamp(48px,6.4vw,88px);

  --t-fast:.18s;
  --t:.32s;
  --t-slow:.6s;
  --ease:cubic-bezier(.22,1,.36,1);

  --f-disp:"Baloo 2",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --f-body:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
}

/* ------------------------------------------------------------ temel */
*,*::before,*::after{box-sizing:border-box}

/* KRITIK: hidden ozniteligi her zaman kazanmali.
   Aksi halde .mobilemenu gibi display'i belirlenmis kutular "gizli" olmalarina
   ragmen ekrani kaplamaya devam eder ve altlarindaki tum tiklamalari yutar. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* ---------------------------------------------------- çay kaşığı imleci */
/* Yalnizca gercek imleci olan cihazlarda. Dokunmatikte anlamsiz olurdu.
   Once duz url, sonra image-set: destekleyen tarayici retinada 2x dosyayi
   kullanir, desteklemeyen ilk satirda kalir. Nirengi (2 2) kasigin ucu. */
@media (hover:hover) and (pointer:fine){
  body{
    cursor:url(/assets/img/imlec/kasik.png) 4 4, auto;
    cursor:image-set(url(/assets/img/imlec/kasik.png) 1x,
                     url(/assets/img/imlec/kasik@2x.png) 2x) 4 4, auto;
  }
  a,button,summary,label,select,.chip,.work,.vid,[role="button"],[onclick]{
    cursor:url(/assets/img/imlec/kasik-cay.png) 4 4, pointer;
    cursor:image-set(url(/assets/img/imlec/kasik-cay.png) 1x,
                     url(/assets/img/imlec/kasik-cay@2x.png) 2x) 4 4, pointer;
  }
  /* Yazi alanlarinda imlec kasik olmaz: nereye yazacagini gormek gerekir. */
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
  input[type="search"],input[type="password"],textarea{cursor:text}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Capa baglantilari (#form, #basvuru, #isbirligi...) yapiskan menunun
   altinda kalmasin diye hedefin ustunde bosluk birakilir. */
[id]{scroll-margin-top:104px}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,.35vw + 14.4px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--f-disp);font-weight:800;line-height:1.08;letter-spacing:-.01em;margin:0}
p{margin:0}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(32px,5vw,64px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0;
}
.skip-link:focus{left:0}

.accent{color:var(--orange)}
.kicker{
  font-family:var(--f-disp);font-weight:700;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);margin-bottom:10px;
}
.empty{text-align:center;color:var(--ink-3);padding:48px 0;font-size:1.05rem}

/* ------------------------------------------------------------ doodle */
/* Varsayilan: gorunur. Animasyon yalnizca JS calisirsa devreye girer,
   boylece betik yuklenmezse icerik yine de okunur kalir. */
.doodle{position:absolute;pointer-events:none;color:var(--orange)}
.doodle--u{
  left:0;bottom:-.16em;width:100%;height:.3em;
  transform-origin:left center;
}
.js-anim .doodle--u{opacity:0;transform:scaleX(.2)}
.js-anim .is-in .doodle--u{
  opacity:1;transform:scaleX(1);
  transition:transform .7s var(--ease) .25s,opacity .3s ease .25s;
}
h1 .doodle--u,h2 .doodle--u{height:.24em}
.doodle--s{width:clamp(34px,4vw,54px);height:auto;opacity:.85}
.doodle--a{width:clamp(80px,10vw,130px);height:auto;opacity:.75}

/* ------------------------------------------------------------ butonlar */
.btn{
  --bg:var(--orange);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.86em 1.5em;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  font-family:var(--f-disp);font-weight:700;font-size:.98rem;line-height:1.1;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),
             background var(--t) var(--ease),color var(--t) var(--ease);
  will-change:transform;
}
.btn .ico{width:1.05em;height:1.05em;flex:none;fill:currentColor;transition:transform var(--t) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.btn:hover .ico{transform:translateX(3px)}
.btn:active{transform:translateY(0)}

.btn--solid{--bg:var(--orange);--fg:#fff}
.btn--solid:hover{--bg:var(--orange-d)}
.btn--ghost,.btn--outline{--bg:transparent;--fg:var(--orange);--bd:var(--orange)}
.btn--ghost:hover,.btn--outline:hover{--bg:var(--orange);--fg:#fff}
.btn--yt{--bg:#ff0000;--fg:#fff;padding:.6em 1.1em;font-size:.9rem}
.btn--yt:hover{--bg:#d90000}
.btn--lg{padding:1.02em 1.85em;font-size:1.06rem}
.btn--sm{padding:.62em 1.15em;font-size:.9rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-disp);font-weight:700;color:var(--orange);
}
.link-arrow .ico{fill:currentColor;transition:transform var(--t) var(--ease)}
.link-arrow:hover .ico{transform:translateX(4px)}

.pill{
  display:inline-block;padding:.32em .82em;border-radius:var(--r-pill);
  background:var(--orange-bg);color:var(--orange-d);
  font-family:var(--f-disp);font-weight:700;font-size:.8rem;
}
.pill--soft{background:var(--cream-3);color:var(--ink-2)}

/* ------------------------------------------------------------ navigasyon */
.nav{position:sticky;top:0;z-index:100;padding:14px 0;transition:padding var(--t) var(--ease)}
.nav__in{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  padding:10px 12px 10px 22px;
  box-shadow:var(--sh-sm);
  transition:box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.nav.is-stuck{padding:8px 0}
.nav.is-stuck .nav__in{box-shadow:var(--sh);background:rgba(255,255,255,.95)}

.brand{font-family:var(--f-disp);font-weight:800;font-size:1.28rem;color:var(--orange);letter-spacing:-.02em;white-space:nowrap}
.brand__txt{display:inline-block;transition:transform var(--t) var(--ease)}
.brand:hover .brand__txt{transform:rotate(-2deg) scale(1.03)}

.nav__links{display:flex;gap:clamp(8px,1.2vw,20px);margin-inline:auto}
.nav__links a{
  position:relative;font-weight:700;font-size:.9rem;color:var(--ink-2);
  padding:.35em .1em;white-space:nowrap;   /* uzun menu adlari satira sarmasin */
  transition:color var(--t) var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t) var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}

.nav__cta{display:flex;gap:10px;flex:none}
.nav__cta .btn{padding:.66em 1.15em;font-size:.9rem}

.burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);flex:none;padding:11px 10px}
.burger span{display:block;height:2.5px;border-radius:2px;background:var(--ink);transition:transform var(--t) var(--ease),opacity var(--t-fast)}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobilemenu{
  position:fixed;inset:0;z-index:99;background:var(--cream);
  padding:96px var(--pad) 40px;display:flex;flex-direction:column;gap:26px;
  opacity:0;transform:translateY(-8px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.mobilemenu.is-open{opacity:1;transform:none}
.mobilemenu nav{display:flex;flex-direction:column;gap:4px}
.mobilemenu nav a{
  font-family:var(--f-disp);font-weight:800;font-size:1.8rem;padding:.42em 0;
  border-bottom:1px solid var(--line-2);
}
.mobilemenu__cta{display:flex;flex-direction:column;gap:10px}

/* ------------------------------------------------------------ flash */
.flash{padding:12px 0;font-weight:700;color:#0b5b34;background:#dff6e9;border-bottom:1px solid rgba(0,0,0,.05)}
.flash--err{color:#8a1c10;background:#fdeae6}

/* ------------------------------------------------------------ hero */
/* Alt bosluk KARAKTERIN GOLGESI kadar olmali.
   .dayi__p uzerindeki drop-shadow 18px kayma + 34px bulaniklikla gorselin
   ~52px ALTINA tasiyor; .hero'da overflow:hidden oldugu icin pay bundan
   azaltilinca golge ve arkadaki isik halesi DUZ BIR CIZGIYLE kesiliyor.
   Treni yukari almak icin bu pay kisilmaz, seridin KENDISI yukari cekilir
   (bkz. .brandstrip margin-top). */
.hero{position:relative;padding-block:clamp(28px,5vw,60px) clamp(34px,3.6vw,58px);overflow:hidden}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(20px,4vw,50px);
}
/* Baslik BUYUK HARF ve uzun satirli; onceki 5.4rem tavan sutundan tasiyordu. */
.hero__title{font-size:clamp(1.75rem,4.3vw,3.35rem);letter-spacing:-.02em;text-wrap:balance}
.hero__title span{display:block;position:relative}
.hero__title .l3{width:max-content;max-width:100%}
.hero__sub{
  margin-top:clamp(16px,2vw,26px);max-width:34em;
  font-size:clamp(1rem,.5vw + .9rem,1.16rem);color:var(--ink-2);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,34px)}

.hero__art{position:relative;display:grid;place-items:end center;min-height:min(62vh,560px)}
.hero__blob{
  position:absolute;z-index:0;
  width:min(86%,470px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,var(--orange-l),var(--orange) 58%,var(--orange-d) 100%);
  top:6%;left:50%;translate:-50% 0;
  box-shadow:0 30px 80px rgba(242,101,34,.28);
  animation:blob 9s ease-in-out infinite;
}
/* Dairenin arkasinda yumusak isik: duz zeminde derinlik hissi verir */
.hero__art::before{
  content:"";position:absolute;z-index:-1;
  width:min(120%,760px);aspect-ratio:1;top:-6%;left:50%;translate:-50% 0;
  background:radial-gradient(circle,rgba(242,101,34,.16),transparent 62%);
  pointer-events:none;
}
@keyframes blob{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.hero__dot{
  position:absolute;right:8%;bottom:16%;width:16px;height:16px;border-radius:50%;
  background:var(--orange);z-index:2;
}
.hero__art .doodle--s{top:4%;left:2%;z-index:2}
.hero__art .doodle--a{bottom:14%;left:-2%;z-index:2;transform:scaleX(-1)}
/* --- fare takipli karakter (ardisik video kareleri) --- */
.dayi{
  position:relative;z-index:1;
  height:min(62vh,560px);max-width:100%;
  transition:transform .45s var(--ease);
  will-change:transform;
}
.dayi__p{
  height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(60,40,25,.16));
}
/* durgun kare akista durur ve olcuyu verir */
.dayi__p--base{position:relative}
/* Seri kareleri ust uste bindirilir. Opaklik JS tarafindan kesirli olarak
   verilir: komsu iki kare harmanlanip basamaksiz, akici donus elde edilir.
   CSS gecisi YOK - harmanlama zaten her karede hesaplaniyor. */
.dayi__f{
  position:absolute;top:0;left:50%;translate:-50% 0;
  height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(60,40,25,.16));
  opacity:0;
}
.dayi.has-strip .dayi__p--base{opacity:0}

/* ASIL SURUM: alfa kanalli WebM. Imlecin yonune gore video zamani kaydirilir,
   boylece kafa videonun kendi akiciligiyla doner. */
.dayi__v{
  position:absolute;top:0;left:50%;translate:-50% 0;
  height:100%;width:auto;max-width:100%;object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(60,40,25,.16));
}
.dayi.has-video .dayi__p--base{opacity:0}
/* CTA butonunun uzerine gelince oynayan "selam" videosu, takip videosunun
   TAM USTUNE biner (ayni kirpma/olcek ile kodlandi).
   Capraz gecis YOK: iki karakter bir an bile ust uste gorunmesin diye
   takas, turuncu duman bulutunun arkasinda tek karede yapilir. */
.dayi__v--selam{opacity:0;z-index:2}
.dayi__v--selam.is-on{opacity:1}
.dayi__v.is-gizli{opacity:0}

/* ---- turuncu duman (iki video arasindaki gecis) ----
   Daireler tek baslarina "balon" gibi duruyordu. Simdi bulanik kutlenin
   uzerine bir SVG turbulans + yer degistirme suzgeci uygulaniyor; kenarlar
   duzensiz ve tuylu cikiyor, gercek duman gibi. Suzgec kutunun kendi
   koordinatinda sabit, bulutlar icinden gectikce desen kayiyor. */
.dayi__puf{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;z-index:3;
  filter:blur(11px) url(#td-duman);
}
.dayi__puf i{
  position:absolute;display:block;border-radius:50%;opacity:0;
  will-change:transform,opacity;
}
/* Beyaz duman: cekirdek saf beyaz, kenar sicak grimsi. Uc ayri ton
   kullanilir; hepsi ayni tonda olursa duman "duz boya" gibi gorunuyor. */
.dayi__puf i:nth-child(3n+1){
  background:radial-gradient(circle at 38% 32%,
    rgb(255,255,255) 0%, rgb(252,250,248) 40%, rgb(240,234,228) 68%,
    rgba(224,214,206,.5) 84%, rgba(224,214,206,0) 94%);
}
.dayi__puf i:nth-child(3n+2){
  background:radial-gradient(circle at 44% 38%,
    rgb(255,255,255) 0%, rgb(249,246,243) 36%, rgb(233,226,219) 66%,
    rgba(214,203,194,.46) 84%, rgba(214,203,194,0) 94%);
}
.dayi__puf i:nth-child(3n){
  background:radial-gradient(circle at 34% 30%,
    rgb(255,255,255) 0%, rgb(246,242,238) 34%, rgb(228,220,212) 64%,
    rgba(205,193,183,.42) 82%, rgba(205,193,183,0) 93%);
}

/* Taban bulutu: pufların arasindaki bosluklari doldurur; ELIPS olmali,
   daire birakilirsa kutunun alt ceyregi ortusuz kaliyor. */
.dayi__puf::before{
  content:"";position:absolute;left:50%;top:51%;
  width:104%;height:104%;border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);opacity:0;
  background:radial-gradient(circle at 46% 40%,
    rgb(255,255,255) 0%, rgb(250,247,244) 44%, rgb(236,229,222) 72%,
    rgba(219,208,199,.42) 86%, rgba(219,208,199,0) 95%);
}
.dayi__puf.is-on::before{animation:pufTaban .66s cubic-bezier(.22,.68,.28,1) forwards}
.dayi__puf.is-on i{animation:puf .66s cubic-bezier(.22,.68,.28,1) forwards}

/* Her bulut farkli yerden, boyda, yonde ve donusle dagilir. Hepsi ayni
   sekilde hareket ederse "duman" degil "tek balon" gibi gorunuyor. */
.dayi__puf i:nth-child(1) {left:47%;top:24%;width:46%;padding-bottom:46%;--dx:-3.0%;--dr:-16deg;animation-delay:0ms}
.dayi__puf i:nth-child(2) {left:25%;top:33%;width:36%;padding-bottom:36%;--dx:-6.5%;--dr:12deg;animation-delay:34ms}
.dayi__puf i:nth-child(3) {left:70%;top:30%;width:34%;padding-bottom:34%;--dx:5.5%;--dr:-9deg;animation-delay:22ms}
.dayi__puf i:nth-child(4) {left:37%;top:52%;width:42%;padding-bottom:42%;--dx:-4.0%;--dr:18deg;animation-delay:52ms}
.dayi__puf i:nth-child(5) {left:64%;top:56%;width:38%;padding-bottom:38%;--dx:4.5%;--dr:-14deg;animation-delay:66ms}
.dayi__puf i:nth-child(6) {left:29%;top:70%;width:34%;padding-bottom:34%;--dx:-5.0%;--dr:10deg;animation-delay:88ms}
.dayi__puf i:nth-child(7) {left:59%;top:76%;width:32%;padding-bottom:32%;--dx:4.0%;--dr:-17deg;animation-delay:104ms}
.dayi__puf i:nth-child(8) {left:50%;top:12%;width:28%;padding-bottom:28%;--dx:1.5%;--dr:20deg;animation-delay:76ms}
.dayi__puf i:nth-child(9) {left:44%;top:90%;width:36%;padding-bottom:36%;--dx:-2.0%;--dr:-11deg;animation-delay:58ms}
.dayi__puf i:nth-child(10){left:68%;top:92%;width:34%;padding-bottom:34%;--dx:3.5%;--dr:15deg;animation-delay:82ms}
.dayi__puf i:nth-child(11){left:27%;top:93%;width:32%;padding-bottom:32%;--dx:-4.5%;--dr:-8deg;animation-delay:96ms}
.dayi__puf i:nth-child(12){left:50%;top:96%;width:30%;padding-bottom:30%;--dx:1.0%;--dr:13deg;animation-delay:44ms}
.dayi__puf i:nth-child(13){left:16%;top:56%;width:26%;padding-bottom:26%;--dx:-8.0%;--dr:-20deg;animation-delay:112ms}
.dayi__puf i:nth-child(14){left:84%;top:52%;width:25%;padding-bottom:25%;--dx:7.5%;--dr:17deg;animation-delay:120ms}

@keyframes puf{
  0%  {transform:translate(-50%,-50%) scale(.34) rotate(0deg);opacity:0}
  15% {opacity:1}
  50% {opacity:.94}
  100%{transform:translate(calc(-50% + var(--dx,0%)),-54%) scale(1.16) rotate(var(--dr,10deg));opacity:0}
}
@keyframes pufTaban{
  0%  {transform:translate(-50%,-50%) scale(.42);opacity:0}
  18% {opacity:1}
  50% {opacity:.98}
  100%{transform:translate(-50%,-53%) scale(1.10);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .dayi__puf{display:none}
}

/* ------------------------------------------------- marka treni */
/* Lokomotif + her marka icin bir vagon. Sagdan girer, rayin uzerinde
   ilerler, soldan cikar, bastan baslar. Olculer kaynak gorsellerden
   olculdu (tools/make_tren.py -> tren.json); burada YUZDE olarak
   kullanildiklari icin tren her boyutta dogru hizalanir.

   --olc : kaynak pikselden ekran pikseline olcek. Tek deger degistirerek
           tren buyuyup kuculur; tekerlek/baca/pano hepsi uyar. */
/* Serit hero'nun uzerine dogru cekilir: tren karakterin hemen altinda
   kalsin ama hero'nun golge payi kisilmasin. Negatif margin hicbir seyi
   kirpmaz (kirpma .hero'daki overflow:hidden'dan geliyordu). */
.brandstrip{--olc:.205;margin-top:calc(-1 * clamp(24px,2.4vw,38px));padding-bottom:clamp(18px,2.4vw,32px)}
.brandstrip__in{
  display:flex;align-items:flex-start;gap:10px;
  padding:0;
}
.brandstrip__label{
  /* 15ch iken "Çalıştığım Markalardan" satiri de bolunuyor ve etiket
     UC satira cikiyordu; metnin en uzun satirini tek satirda tutar. */
  flex:none;max-width:23ch;
  font-family:var(--f-disp);font-weight:700;
  font-size:clamp(.95rem,1.2vw,1.12rem);line-height:1.3;color:var(--ink);
}
.doodle--d{position:relative;margin-top:2px;width:clamp(40px,4.6vw,60px);height:auto;color:var(--ink);opacity:.85}

/* Yukseklik = en yuksek arac (lokomotif) + BACA DUMANI icin ust bosluk.
   overflow:hidden treni yanlardan kirpiyor; duman alani birakilmazsa
   bacadan cikan tutamlar da hemen kesiliyordu. */
.tren{
  --duman-alan:calc(var(--olc) * 430px);
  position:relative;width:100%;overflow:hidden;
  height:calc(var(--olc) * 642px + var(--duman-alan));
  /* Duman alani etiket satirina bindirilir; boylece tren asagida
     kalmaz, ustundeki bosluk da olu alan olmaz. */
  margin-top:calc(var(--olc) * -60px - var(--duman-alan) * .82);
}
/* Ray: tekerleklerin degdigi cizgi + travers. Gorsellerin altinda ~9px
   saydam pay var, ray tam oraya oturuyor. */
.tren__ray{
  position:absolute;left:0;right:0;
  bottom:calc(var(--olc) * 9px);
  height:calc(var(--olc) * 34px);
  /* ust: rayin kendisi (koyu, tam cizgi)  alt: travers dizisi */
  background:
    linear-gradient(#3b322b,#3b322b) 0 0/100% calc(var(--olc) * 9px) no-repeat,
    repeating-linear-gradient(90deg,
      #8d7358 0 calc(var(--olc) * 22px),
      transparent calc(var(--olc) * 22px) calc(var(--olc) * 74px))
      0 calc(var(--olc) * 9px)/100% calc(var(--olc) * 20px) repeat-x;
}
.tren__ray::after{
  content:"";position:absolute;left:0;right:0;top:calc(var(--olc) * 29px);
  height:calc(var(--olc) * 5px);background:rgba(120,96,74,.45);
}

/* Surukleme katmani: elle verilen yatay ofset BURAYA yaziliyor, seyir
   animasyonu ise .tren__katar'da kaliyor. Ayni ogede olsalardi biri
   digerinin transform'unu ezerdi.
   touch-action:pan-y -> dokunmatikte yatay surukleme bize gelir, dikey
   kaydirma sayfaya kalir. */
/* will-change BURADA SABIT VERILMEZ: tam genislikte kalici bir bilesim
   katmani acar ve hero'daki karakter videosunun arama akiciligini
   olculebilir sekilde bozuyordu (kare sicramasi 3-4'ten 5-6'ya cikti).
   Yalnizca gercekten suruklenirken (.is-elde) aciliyor. */
.tren__surgu{position:absolute;inset:0;touch-action:pan-y}
.tren.is-elde .tren__surgu{will-change:transform}

.tren__katar{
  position:absolute;left:0;bottom:0;
  display:flex;align-items:flex-end;
  gap:0;
  white-space:nowrap;
  will-change:transform;
  transform:translate3d(100vw,0,0);
}
/* Elde tutulurken (surukleme ve birakma sonrasi hizlanma rampasi) hem
   katarin hem tekerleklerin CSS animasyonu devre disi; konum ve tekerlek
   acisi JS tarafindan yaziliyor. Tekerlek acisi her tekerlegin KENDI
   yaricapina gore hesaplandigi icin ogeye ayri ayri veriliyor. */
.tren.is-elde .tren__tk{
  animation:none;
  transform:translate(-50%,-50%) rotate(var(--tk-aci,0rad));
}
/* TUZAK: `gap` NEGATIF deger kabul etmez — gecersiz sayilip tumden yok
   sayilir. Burada gap:-30px yaziliydi ve hicbir ise yaramiyordu; araclar
   uc uca duruyor, gorsellerin yanindaki saydam pay yuzunden kanca
   halkalari arasinda gorunur bir bosluk kaliyordu. Ust uste bindirme
   NEGATIF MARGIN ile yapilmali.

   Deger olculdu (alfa kanalindan): lokomotif->vagon ve vagon->vagon
   eklemlerinin ikisinde de halkalar -18 kaynak px'te tam degiyor; alt
   piksel yuvarlamasinda kil payi bosluk acilmasin diye -22 kullaniliyor. */
.tren__arac + .tren__arac{margin-left:calc(var(--olc) * -22px)}
.tren__katar.is-giden{
  animation:trenGit var(--tren-sure,26s) linear infinite;
  /* Surukleme bitince animasyon, trenin BULUNDUGU konumdan devam etsin
     diye negatif gecikmeyle yeniden baslatiliyor. Kisayoldan SONRA
     yazilmali (kisayol gecikmeyi 0'a doner) ve ozel ozellik uzerinden
     veriliyor: `style.animation` temizlenince inline uzun yazimlar da
     silinecegi icin gecikme kaybolurdu. */
  animation-delay:var(--tren-gecikme,0s);
}
@keyframes trenGit{
  from{transform:translate3d(var(--tren-bas,100vw),0,0)}
  to  {transform:translate3d(var(--tren-son,-100%),0,0)}
}

.tren__arac{position:relative;flex:none;display:block}
.tren__arac--loko{width:calc(var(--olc) * 1268px)}
.tren__arac--vagon{width:calc(var(--olc) * 1388px)}
.tren__govde{position:relative;z-index:2;display:block;width:100%;height:auto}

/* Tekerlekler govdenin ARKASINDA (z-index 1): govdede tekerlek yerleri
   bos, biyel kolu govdede kaldigi icin donmuyor. */
.tren__tk{
  position:absolute;z-index:1;top:0;
  background:center/contain no-repeat;
  transform:translate(-50%,-50%);
  animation:tkDon var(--tk-sure,1.6s) linear infinite;
  /* Surukleme bitince tekerlek, elle donduruldugu ACIDAN devam etsin
     diye animasyon negatif gecikmeyle yeniden baslatiliyor. Kisayoldan
     SONRA yazilmali; kisayol gecikmeyi 0'a doner. */
  animation-delay:var(--tk-gecikme,0s);
}
.tren__arac--loko .tren__tk{
  width:14.196%;aspect-ratio:1;top:84.579%;
  background-image:url(/assets/img/tren/lokomotif-tekerlek.webp);
}
.tren__arac--loko .tren__tk:nth-child(1){left:30.126%}
.tren__arac--loko .tren__tk:nth-child(2){left:49.369%}
.tren__arac--loko .tren__tk:nth-child(3){left:68.849%}
.tren__arac--vagon .tren__tk{
  width:13.256%;aspect-ratio:1;top:81.041%;
  background-image:url(/assets/img/tren/vagon-tekerlek.webp);
}
.tren__arac--vagon .tren__tk:nth-child(1){left:25.648%}
.tren__arac--vagon .tren__tk:nth-child(2){left:74.135%}
/* Tren sola gidiyor: tekerlek saat yonunun TERSINE doner. */
@keyframes tkDon{from{transform:translate(-50%,-50%) rotate(0)}
                 to  {transform:translate(-50%,-50%) rotate(-360deg)}}

/* Goz kirpma: kapali goz parcasi, acik gozlerin TAM USTUNE biner ve
   aralikli olarak bir an gorunur. Konum kaynak gorselden olculdu. */
.tren__goz{
  position:absolute;z-index:3;
  left:66.088%;top:18.069%;width:9.464%;height:auto;
  opacity:0;pointer-events:none;
  animation:gozKirp 5.2s steps(1,end) infinite;
}
@keyframes gozKirp{
  0%,93.6%{opacity:0}
  93.7%,95.4%{opacity:1}
  95.5%,97.4%{opacity:0}
  97.5%,98.6%{opacity:1}
  98.7%,100%{opacity:0}
}

/* Baca dumani: yukari yukselir ve trenin gerisine (saga) savrulur. */
.tren__duman{position:absolute;z-index:3;left:23.738%;top:5.919%;width:0;height:0}
.tren__duman i{
  position:absolute;left:0;top:0;
  width:calc(var(--olc) * 165px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,
    rgba(255,255,255,.99) 0%, rgba(238,234,229,.97) 38%,
    rgba(203,196,187,.85) 66%, rgba(176,167,156,.45) 82%, rgba(176,167,156,0) 93%);
  filter:blur(calc(var(--olc) * 9px));
  transform:translate(-50%,-50%) scale(.18);opacity:0;
  animation:dumanCik 2.6s linear infinite;
}
.tren__duman i:nth-child(2){animation-delay:.52s}
.tren__duman i:nth-child(3){animation-delay:1.04s}
.tren__duman i:nth-child(4){animation-delay:1.56s}
.tren__duman i:nth-child(5){animation-delay:2.08s}
@keyframes dumanCik{
  0%  {transform:translate(-50%,-50%) scale(.22);opacity:0}
  10% {opacity:.95}
  55% {opacity:.7}
  100%{transform:translate(calc(-50% + var(--olc) * 300px),calc(-50% - var(--olc) * 300px)) scale(1.35);opacity:0}
}

/* Vagon panosu: logo tam ortada, kirpilmadan. */
.tren__pano{
  position:absolute;z-index:3;
  left:calc(var(--olc) * 87px);
  top:calc(var(--olc) * 28px);
  width:calc(var(--olc) * 1213px);
  height:calc(var(--olc) * 314px);
  display:grid;place-items:center;
  border-radius:calc(var(--olc) * 34px);
  overflow:hidden;
  /* Pano rengi LOGODAN alinir (JS logonun baskin rengini olcup yazar),
     boylece vagonun siyah yuzeyi markanin renginde gorunur. */
  background:var(--pano-renk,transparent);
  transition:background .3s var(--ease);
}
/* Yukseklik YUZDE verilince cozumlenmedi (olcumde 241px cikti, panonun
   64px'i degil), bu yuzden pano gibi olcekten turetilen KESIN px.

   Marka gorselleri artik panoyla AYNI ORANDA (1213x314) ve kendi zemin
   rengi gomulu olarak uretiliyor (tools/marka_yatay.py) — bu yuzden ic
   bosluk gorselin kendi icinde. Buradaki kucuk padding yalnizca panelden
   yuklenecek kare/serbest oranli bir logonun nefes almasi icin duruyor;
   pano zaten logonun baskin rengine boyandigi icin olusan cerceve
   gorunmuyor. */
.tren__logo{
  width:100%;
  height:calc(var(--olc) * 314px);
  object-fit:contain;
  padding:calc(var(--olc) * 10px);
}
.tren__ad{
  font-family:var(--f-disp);font-weight:800;color:#fff;text-transform:uppercase;
  font-size:calc(var(--olc) * 92px);letter-spacing:.02em;
}
/* Son vagonun panosu: "Is Birligi Yap" cagri butonu.
   Marka panolari logolarindan boyaniyor; bu vagonun logosu yok, o yuzden
   rengini burada veriyoruz. Turuncu, marka logolarindan ayrilsin ve
   tiklanabilir oldugu anlasilsin diye. */
.tren__cta{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--olc) * 26px);
  width:100%;height:100%;
  background:var(--orange);
  color:#fff;text-decoration:none;
  font-family:var(--f-disp);font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;
  /* Tren hareket ederken imlecin altindan kayan bir butonun tiklanabilir
     oldugu belli olsun. */
  cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
/* Kesikli ic cerceve: bu pano bir marka logosu DEGIL, "bos yer - sen de
   gel" davetidir. Ayrica serit renginin (--orange #f26522) hemen yanindaki
   Hepsiburada turuncusuna (#FF6000) cok yakin olmasi yuzunden vagon marka
   panosu gibi okunuyordu; kesikli cerceve ikisini ayiriyor. */
.tren__cta::before{
  content:"";position:absolute;
  inset:calc(var(--olc) * 26px);
  border:calc(var(--olc) * 8px) dashed rgba(255,255,255,.55);
  border-radius:calc(var(--olc) * 18px);
  pointer-events:none;
}
.tren__cta__arti{
  font-size:calc(var(--olc) * 130px);line-height:1;
  /* Baloo'nun "+" isareti optik olarak yukarida duruyor. */
  margin-top:calc(var(--olc) * -12px);
}
.tren__cta__yazi{
  font-size:calc(var(--olc) * 74px);line-height:1;white-space:nowrap;
}
.tren__cta:hover,
.tren__cta:focus-visible{background:var(--orange-d)}
/* Klavye odagi panonun ICINDE kalmali: .tren__pano'da overflow:hidden var,
   disariya cizilen bir outline kirpilirdi. */
.tren__cta:focus-visible{
  outline:calc(var(--olc) * 16px) solid #fff;
  outline-offset:calc(var(--olc) * -32px);
}

@media (prefers-reduced-motion:reduce){
  .tren__katar.is-giden,.tren__tk,.tren__duman i,.tren__goz{animation:none}
  .tren__katar{transform:translate3d(0,0,0)}
  .tren{overflow-x:auto}
}

/* --------------------------------------------------------- istatistik */
.stats{padding-bottom:clamp(20px,3vw,40px)}
.stats--page{padding-top:0}
.stats__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);
}
.stats__item{
  display:flex;align-items:center;gap:16px;
  padding:clamp(18px,2.4vw,26px) clamp(16px,2vw,24px);
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.stats__item:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.stats__ico{
  flex:none;display:grid;place-items:center;width:50px;height:50px;
  border-radius:16px;color:#fff;
  background:linear-gradient(140deg,var(--orange-l),var(--orange));
  box-shadow:0 6px 16px rgba(242,101,34,.28);
  transition:transform var(--t) var(--ease);
}
.stats__item:hover .stats__ico{transform:rotate(-8deg) scale(1.06)}
.stats__ico .ico{fill:#fff}
.stats__body{display:flex;flex-direction:column;min-width:0}
.stats__val{
  font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.45rem,1.8vw,1.95rem);line-height:1.1;letter-spacing:-.02em;
}
.stats__lbl{font-size:.85rem;color:var(--ink-3);margin-top:2px}

/* ----------------------------------------------------- bolum basligi */
.sechead{text-align:center;margin-bottom:clamp(28px,4vw,52px)}
.sechead--left{text-align:left}
.sechead__t{position:relative;display:inline-block;font-size:clamp(1.85rem,3.6vw,2.9rem);letter-spacing:-.02em}
.sechead__d{margin-top:16px;color:var(--ink-2);max-width:56ch;margin-inline:auto}
.sechead--left .sechead__d{margin-inline:0}
.sec__more{text-align:center;margin-top:clamp(24px,3vw,40px)}

/* Kucuk turuncu etiket: her bolumde ayni hiyerarsiyi kurar.
   flex (inline degil) — yoksa basligin yanina akip tek satira duser. */
.kicker--sec{
  display:flex;align-items:center;gap:10px;
  margin:0 0 16px;font-size:.74rem;letter-spacing:.18em;
}
.kicker__line{display:block;width:26px;height:2px;border-radius:2px;background:currentColor;opacity:.55}
.sechead:not(.sechead--left) .kicker--sec{justify-content:center}

/* ------------------------------------------------------ yuzey ritmi */
/* Duz krem zeminde 7500px akmak monotondu. Bolumler artik farkli
   yuzeylerde duruyor; goz nerede olduğunu anliyor. */
.sec--white{background:var(--white)}
.sec--tint{background:var(--cream-2)}
.sec--deep{background:linear-gradient(180deg,var(--cream-2),var(--cream-3))}

/* Yumusak gecis: bantlarin kenari sert kesilmesin */
.sec--white,.sec--tint,.sec--deep{position:relative}
.sec--soft-top{border-top-left-radius:clamp(24px,4vw,56px);border-top-right-radius:clamp(24px,4vw,56px)}
.sec--soft-bottom{border-bottom-left-radius:clamp(24px,4vw,56px);border-bottom-right-radius:clamp(24px,4vw,56px)}

/* ------------------------------------------------------------ doku */
/* NOT: Tum sayfayi kaplayan "multiply" tane katmani denendi ve KALDIRILDI —
   karakter videosunun ve is gorsellerinin rengini soldurup grilestiriyordu.
   Derinlik artik yuzey ritmi (beyaz/krem bantlar) ve golgelerle kuruluyor. */

/* ------------------------------------------------- kaydirma gostergesi */
.scrollbar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:150;pointer-events:none;
  background:transparent;
}
.scrollbar__in{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--orange),var(--orange-l));
  border-radius:0 3px 3px 0;
  transition:width .1s linear;
}

/* --------------------------------------------------------- hizmetler */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.card{
  display:flex;gap:16px;align-items:flex-start;
  padding:clamp(18px,2.2vw,26px);
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(242,101,34,.35)}
.card__ico{
  flex:none;display:grid;place-items:center;width:56px;height:56px;
  border-radius:18px;background:var(--orange-bg);color:var(--orange);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease);
}
.card__ico .ico{fill:currentColor}
.card:hover .card__ico{background:var(--orange);color:#fff;transform:rotate(-6deg)}

/* Hizmet karti illustrasyonu: karakterin oturdugu yumusak turuncu levha.
   Ikon levhasiyla ayni dili konusur (ayni tint, ayni koseler), yalnizca
   daha buyuktur — kadraj bas + eldeki nesneyi gosterecek kadar sikidir
   (tools/hizmet_ikon.py). Karakter alta yaslanir ve levhayi biraz tasar;
   boylece "cerceve icine yapistirilmis" degil, levhanin uzerinde
   duruyormus gibi gorunur. */
.card__gorsel{
  flex:none;display:block;position:relative;overflow:hidden;
  width:clamp(84px,7.2vw,104px);aspect-ratio:1;
  border-radius:20px;background:var(--orange-bg);
  transition:background var(--t) var(--ease),transform var(--t) var(--ease);
}
/* Kadraj kaynakta zaten sikilastirildigi icin (tools/hizmet_ikon.py)
   buyutme yok: %100'un uzerinde karakterin kolu levha kenarindan
   kirpiliyor. */
.card__gorsel img{
  position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:100%;height:auto;display:block;
}
.card:hover .card__gorsel{transform:rotate(-4deg) scale(1.05)}
/* Detay sayfasinda kartlar dikey; levha biraz daha buyuk durabilir. */
.card--detail .card__gorsel{width:clamp(96px,9vw,124px)}
.card__t{font-size:1.12rem;margin-bottom:6px}
.card__d{font-size:.94rem;color:var(--ink-3);line-height:1.55}
.card__body{margin-top:12px;font-size:.94rem;color:var(--ink-2)}
.cards--detail{grid-template-columns:repeat(2,1fr)}
.card--detail{flex-direction:column}
.card--detail .card__t{font-size:1.3rem}

/* --------------------------------------------------------- referanslar */
/* Esnek sarma + ortalama: son satirda 2 oge kalinca sola yapisip
   dengesiz gorunmesin. */
.refs{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.4vw,16px);
}
.refs__item{flex:0 1 clamp(130px,13vw,164px)}
.refs__item{
  display:grid;place-items:center;min-height:96px;padding:16px 18px;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.refs__item:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(242,101,34,.3)}
.refs__item .bm--img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}
.bm__link{display:grid;place-items:center;width:100%;height:100%}
.bm--txt{
  font-family:var(--f-disp);font-weight:800;font-size:clamp(1.05rem,1.7vw,1.4rem);
  color:var(--ink-2);letter-spacing:-.02em;white-space:nowrap;
}
.bm--img{width:auto;height:clamp(24px,2.6vw,34px);object-fit:contain}

/* -------------------------------------------------------------- isler */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:clamp(22px,3vw,34px)}
.chip{
  padding:.55em 1.2em;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--white);
  font-family:var(--f-disp);font-weight:700;font-size:.92rem;color:var(--ink-2);
  transition:all var(--t) var(--ease);
}
.chip:hover{border-color:var(--orange);color:var(--orange)}
.chip.is-on{background:var(--orange);border-color:var(--orange);color:#fff}

.works{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.work{transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.work.is-hidden{display:none}
.work__in{
  display:block;height:100%;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.work__in:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.work__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--cream-3)}
.work__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.work__in:hover .work__media img{transform:scale(1.06)}
/* Buyutme rozeti: kartin tiklaninca tam boy acilacagini belli eder */
.work__zoom{
  position:absolute;right:12px;bottom:12px;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--orange);
  opacity:0;transform:scale(.82);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
.work__zoom .ico{fill:currentColor}
.work__in:hover .work__zoom{opacity:1;transform:scale(1)}
.work__media{position:relative}
.work__ph{
  display:grid;place-items:center;width:100%;height:100%;padding:18px;text-align:center;
  background:linear-gradient(135deg,var(--cream-2),var(--cream-3));
}
.work__ph span{font-family:var(--f-disp);font-weight:800;font-size:1.2rem;color:var(--ink-3)}
.work__meta{display:flex;flex-direction:column;gap:7px;padding:14px 16px 17px}
.work__t{font-family:var(--f-disp);font-weight:700;font-size:1.02rem}
.work__c{
  align-self:flex-start;padding:.24em .7em;border-radius:var(--r-pill);
  background:var(--orange-bg);color:var(--orange-d);font-size:.78rem;font-weight:700;
}

/* -------------------------------------------------------------- surec */
/* --adim-daire: adim madalyonunun capi. Hem ikon/illustrasyon levhasi hem
   de adimlari birlestiren noktali cizginin dikey konumu bundan turetilir;
   tek yerden degistirilince ikisi de hizali kalir. */
.steps{
  --adim-daire:clamp(88px,8vw,108px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,30px);position:relative;
}
.step{position:relative;text-align:center;padding-top:14px}
.step:not(:last-child)::after{
  content:"";position:absolute;top:calc(14px + var(--adim-daire) / 2);
  right:calc(-1 * clamp(16px,2.4vw,30px) / 2 - 14px);
  width:calc(clamp(16px,2.4vw,30px) + 28px);height:3px;
  background-image:linear-gradient(90deg,var(--orange) 55%,transparent 55%);
  background-size:13px 3px;opacity:.55;
}
/* Adim numarasi madalyonun SAG UST kenarina, cemberin 45 derecelik
   noktasina oturur. Once tam tepedeydi; duz ikonla sorun degildi ama
   karakter cizimi cerceveyi doldurdugu icin rozet kafayi kapatiyordu. */
.step__no{
  position:absolute;z-index:2;
  top:calc(14px + var(--adim-daire) * 0.146);
  left:calc(50% + var(--adim-daire) * 0.354);
  translate:-50% -50%;
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--orange);color:#fff;font-family:var(--f-disp);font-weight:800;font-size:.92rem;
}
.step__ico{
  display:grid;place-items:center;
  width:var(--adim-daire);height:var(--adim-daire);margin:0 auto 16px;
  border-radius:50%;background:var(--orange-bg);color:var(--orange);
  transition:transform var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease);
}
.step__ico .ico{fill:currentColor;width:38px;height:38px}
.step:hover .step__ico{background:var(--orange);color:#fff;transform:translateY(-4px) scale(1.05)}

/* Surec adiminin karakter illustrasyonu. Ikon madalyonuyla AYNI capta:
   bir adimda cizim, digerinde yedek ikon olsa bile daire boyu ve
   birlestirici cizgi hizali kalir. Karakter alta yaslanir; yuvarlak
   maske icinde portre gibi durur. */
.step__gorsel{
  /* display:block SART — .step bir flex kapsayici DEGIL, bu yuzden span
     satir ici kalir ve genislik/yukseklik hic uygulanmaz (olculdu: 0x0). */
  display:block;position:relative;overflow:hidden;
  width:var(--adim-daire);height:var(--adim-daire);margin:0 auto 16px;
  border-radius:50%;background:var(--orange-bg);
  transition:transform var(--t) var(--ease);
}
.step__gorsel img{
  position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:100%;height:auto;display:block;
}
.step:hover .step__gorsel{transform:translateY(-4px) scale(1.05)}
.step__t{font-size:1.05rem;margin-bottom:7px}
.step__d{font-size:.9rem;color:var(--ink-3);line-height:1.55}

/* --------------------------------------------------------------- ekip */
/* Tek sirada, buyuk ve zeminsiz. Sigmazsa yatayda kaydirilir. */
.team{
  display:flex;gap:clamp(12px,1.6vw,24px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding:4px 2px 14px;
  scrollbar-width:thin;scrollbar-color:rgba(30,26,23,.22) transparent;
}
.team{
  mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
}
.team--page{mask-image:none;-webkit-mask-image:none}
.team::-webkit-scrollbar{height:6px}
.team::-webkit-scrollbar-thumb{background:rgba(30,26,23,.2);border-radius:99px}

/* Ana sayfada ekip seridi sonsuz SOLDAN SAGA akar. Kaydirma cubugu yok.
   JS akisi baslatinca kaba .mq-on gelir ve tasma tamamen gizlenir; betik
   calismazsa (ya da azaltilmis hareket) serit yine parmakla kaydirilabilir
   kalir, sadece cubuk gorunmez. */
.teamflow{
  overflow-x:auto;overflow-y:hidden;
  -ms-overflow-style:none;scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.teamflow::-webkit-scrollbar{display:none}
.teamflow.mq-on{overflow:hidden}
.team--flow{
  width:max-content;overflow:visible;padding:4px 2px 10px;
  scroll-snap-type:none;
  mask-image:none;-webkit-mask-image:none;
}
.team--flow .team__item{scroll-snap-align:none}
/* Sonsuz akis: icerik ikiye katlanir, -%50 kaydirilir; kopya birebir
   oldugu icin dikis yeri gorunmez. (Marka treni ayri calisir.) */
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.team--flow.is-flowing{animation:mq var(--mq-dur,40s) linear infinite}
/* Soldan saga: ayni kareler ters yonde oynatilir. */
.team--flow.is-flowing--sag{animation-direction:reverse}
.teamflow:hover .team--flow.is-flowing{animation-play-state:paused}
.team__item{
  flex:0 0 auto;width:clamp(124px,11.5vw,164px);
  text-align:center;padding:0;scroll-snap-align:start;
  background:none;border:0;box-shadow:none;
  transition:transform var(--t) var(--ease);
}
.team__item:hover{transform:translateY(-6px);box-shadow:none}
.team__ph{
  width:clamp(112px,10.5vw,150px);height:clamp(112px,10.5vw,150px);margin:0 auto 14px;
  border-radius:50%;object-fit:cover;background:var(--cream-2);
  transition:box-shadow var(--t) var(--ease);
}
.team__item:hover .team__ph{box-shadow:0 12px 28px rgba(60,40,25,.16)}
.team__ph--ini{
  display:grid;place-items:center;
  font-family:var(--f-disp);font-weight:800;font-size:1.5rem;color:var(--ink-3);
}
.team__n{font-size:1.02rem;margin-bottom:3px}
.team__r{font-size:.82rem;color:var(--ink-3);line-height:1.4}
.team__b{margin-top:10px;font-size:.86rem;color:var(--ink-2)}
/* Ic sayfada sarmali izgara (kaydirma yok) */
.team--page{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  overflow:visible;padding:0;
}
.team--page .team__item{width:auto}

/* ------------------------------------------------------ split paneller */
/* Iki panel AYNI yukseklikte dursun: align-items:start yerine stretch. */
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(16px,2vw,26px);align-items:stretch}
/* Tek panel kaldiginda ikinci sutun bos bir bosluk olarak kalmasin. */
.split--tek{grid-template-columns:1fr;max-width:720px;margin-inline:auto}
.split > .panel{display:flex;flex-direction:column}
/* Is ilanlari listesi bosluğu doldurup paneli asagi kadar uzatir. */
.panel--job .joblist{margin-top:22px;flex:1 1 auto;justify-content:flex-start}
/* min-width:0 sart: .split bir izgara; izgara ogesinin varsayilan
   min-width:auto degeri, panel icindeki kaydirilabilir video seridinin
   min-content genisligini disari tasirip sayfayi genisletiyordu. */
.panel{
  min-width:0;
  padding:clamp(20px,2.6vw,32px);
  border-radius:var(--r-xl);border:1px solid var(--line-2);
  background:var(--white);box-shadow:var(--sh-sm);
}
.panel--yt{background:var(--white)}
.panel--job{background:var(--orange-bg)}
.panel__t{position:relative;display:inline-block;font-size:clamp(1.3rem,2.1vw,1.75rem);margin-bottom:16px}
.panel__d{color:var(--ink-2);margin-bottom:20px}

/* --- "Her sey burada basladi" paneli --------------------------------- */
/* Baslik + karakter, kanal kimlik karti, video seridi ve rakamlar alt
   alta dizilir; karakter basligin sagina tasarak panele derinlik verir. */
/* Baslik kisa, karakter uzun: satiri ALTA hizalayip karakteri asagi
   tasiriyoruz; boylece baslikla kanal karti arasinda olu bosluk kalmiyor
   ve karakter kartin arkasina giriyor. */
.ytpanel__head{
  display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:12px;margin-bottom:clamp(10px,1.4vw,16px);
}
.panel__t--yt{display:block;line-height:1.05;margin-bottom:0}
.panel__t1{display:block}
.panel__t2{position:relative;display:inline-block;color:var(--orange)}
.panel__t2 .doodle--u{color:var(--orange)}
.ytpanel__char{position:relative;display:block;justify-self:end;width:clamp(120px,17vw,236px);max-width:100%;margin:0 0 -34px 0}
.ytpanel__char img{display:block;width:100%;height:auto}
/* .doodle--c (tac) artik cizilmiyor; karakterin kafasindan kaldirildi. */
.doodle--z{
  position:absolute;right:-4%;top:6%;width:22%;height:auto;color:var(--ink);opacity:.75;
}

.ytcard{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);
  padding:clamp(12px,1.5vw,16px);background:var(--white);
  border-radius:var(--r);border:1px solid var(--line-2);box-shadow:var(--sh-sm);
}
.ytcard__id{min-width:0;flex:1 1 auto}
.ytcard__pp{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--cream-3);flex:none}
.ytcard__n{display:block;font-family:var(--f-disp);font-size:1.02rem;line-height:1.2}
.ytcard__s{display:block;font-size:.84rem;font-weight:700;color:var(--orange)}
.ytcard__d{margin-top:3px;font-size:.82rem;line-height:1.4;color:var(--ink-3)}
.ytcard .btn--yt{flex:none}
.verified{color:#3ea6ff;font-size:.8em}

/* --- video seridi (ok tuslariyla kayan) ------------------------------ */
.ytreel{position:relative;min-width:0;max-width:100%;--reel-gap:clamp(10px,1.4vw,16px);margin-top:clamp(14px,1.8vw,20px)}
.ytreel__win{
  min-width:0;max-width:100%;
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--reel-gap))/3);
  --reel-gap:clamp(10px,1.4vw,16px);gap:var(--reel-gap);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:2px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.ytreel__win::-webkit-scrollbar{display:none}
.ytreel__win > *{scroll-snap-align:start}
.ytreel__nav{
  /* Kapaklarin dikey ortasina hizalanir. Kapak yuksekligi CSS'te
     hesaplanamaz (top yuzdesi GENISLIGE degil YUKSEKLIGE gore cozulur),
     bu yuzden JS olcup --thumb-h degiskenini yaziyor. */
  position:absolute;top:calc(var(--thumb-h,150px)/2 - 19px);z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;
  background:var(--white);color:var(--ink);box-shadow:var(--sh-sm);
  font-size:1.5rem;line-height:1;cursor:pointer;
  transition:transform var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease);
}
.ytreel__nav:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:scale(1.08)}
.ytreel__nav--prev{left:-14px}
.ytreel__nav--next{right:-14px}

/* --- panel ici rakam seridi ------------------------------------------ */
.ytstats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px);
  margin-top:clamp(16px,2vw,22px);padding:clamp(12px,1.6vw,18px);
  border-radius:var(--r);background:var(--orange-bg);
}
.ytstats li{display:flex;align-items:center;gap:9px;min-width:0}
.ytstats__i{display:grid;place-items:center;flex:none;color:var(--orange)}
.ytstats__i .ico{fill:currentColor}
.ytstats strong{display:block;font-family:var(--f-disp);font-size:clamp(.95rem,1.35vw,1.15rem);line-height:1.1}
.ytstats em{display:block;font-style:normal;font-size:.74rem;color:var(--ink-3);margin-top:1px}

.vid{display:flex;flex-direction:column;gap:8px}
.vid__thumb{
  position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--cream-3);
}
.vid__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.vid:hover .vid__thumb img{transform:scale(1.07)}
.vid__time{
  position:absolute;right:7px;bottom:7px;padding:.15em .45em;border-radius:5px;
  background:rgba(0,0,0,.78);color:#fff;font-size:.72rem;font-weight:700;
}
.vid__play{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;background:rgba(0,0,0,.28);transition:opacity var(--t) var(--ease);
}
.vid__play .ico{fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.vid:hover .vid__play{opacity:1}
.vid__t{font-size:.84rem;font-weight:700;line-height:1.35}
.vid__m{font-size:.76rem;color:var(--ink-3);margin-top:-3px}
.vid--lg .vid__thumb{aspect-ratio:16/9}
/* Seritteki kartlarda basliklar iki satirla sinirli: kartlarin alt kenari
   hizali kalsin, ok tuslari kaymasin. */
.vid--reel .vid__t{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em;
}
.vidgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}

.joblist{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.joblist a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--white);border-radius:var(--r);
  border:1px solid var(--line-2);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease);
}
.joblist a:hover{transform:translateX(4px);border-color:var(--orange)}
.joblist strong{display:block;font-family:var(--f-disp);font-size:.95rem}
.joblist em{font-style:normal;font-size:.78rem;color:var(--ink-3)}
.joblist__go{color:var(--orange);font-size:1.4rem;line-height:1}

/* ---------------------------------------------------------- kariyer */
.jobs{display:flex;flex-direction:column;gap:14px}
.job{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(18px,2.2vw,26px);
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.job:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.job__t{font-size:1.24rem;margin-bottom:9px}
.job__meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.job__d{color:var(--ink-2);font-size:.94rem;max-width:62ch}

/* ------------------------------------------------------------ SSS */
.faq{columns:2;column-gap:clamp(14px,1.8vw,22px)}
.faq__i{
  break-inside:avoid;margin-bottom:12px;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.faq__i[open]{border-color:rgba(242,101,34,.4);box-shadow:var(--sh-sm)}
.faq__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;cursor:pointer;list-style:none;
  font-family:var(--f-disp);font-weight:700;font-size:.98rem;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__x{position:relative;flex:none;width:14px;height:14px}
.faq__x::before,.faq__x::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--orange);border-radius:2px;
  transition:transform var(--t) var(--ease);
}
.faq__x::before{width:14px;height:2.4px}
.faq__x::after{width:2.4px;height:14px}
.faq__i[open] .faq__x::after{transform:rotate(90deg)}
.faq__a{padding:0 18px 17px;color:var(--ink-2);font-size:.94rem}

/* ------------------------------------------------------- ic sayfa basi */
.pagehead{position:relative;padding-block:clamp(34px,5vw,68px) clamp(24px,3vw,44px);overflow:hidden}
.pagehead__in{position:relative;display:grid;place-items:center;text-align:center}
.pagehead__t{position:relative;display:inline-block;font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.025em}
.pagehead__d{margin-top:16px;max-width:56ch;color:var(--ink-2);font-size:clamp(1rem,.4vw + .92rem,1.12rem)}
.pagehead__blob{
  position:absolute;z-index:-1;top:-38%;left:50%;translate:-50% 0;
  width:min(58vw,560px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,101,34,.14),transparent 66%);
}

/* ------------------------------------------------------------ hikaye */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,4vw,56px);align-items:center}
.story__art{position:relative;display:grid;place-items:center}
.story__art img{position:relative;z-index:1;height:min(52vh,470px);width:auto;max-width:100%;
  filter:drop-shadow(0 18px 34px rgba(60,40,25,.16))}
.story__art .hero__blob{width:min(88%,360px);top:8%}
.story__copy{color:var(--ink-2);font-size:clamp(1rem,.4vw + .94rem,1.1rem)}
.story__copy .hero__cta{margin-top:26px}
@media (max-width:900px){
  .story{grid-template-columns:1fr;text-align:center}
  /* Mobilde ONCE HIKAYE, sonra karakter. Karakter basta oldugunda
     (order:-1) neredeyse bir ekran boyu yer kapliyor ve asil metni
     asagi itiyordu. */
  .story__art{order:1;margin-top:clamp(18px,4vw,32px)}
  .story__art img{height:min(38vh,340px)}
  .story__copy .hero__cta{justify-content:center}
}

/* --------------------------------------------------------- bilgi kartlari */
.infocards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
.infocard{
  padding:clamp(20px,2.4vw,28px);text-align:center;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.infocard:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.infocard__ico{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;
  border-radius:18px;background:var(--orange-bg);color:var(--orange);
}
.infocard__ico .ico{fill:currentColor}
.infocard__t{font-size:1.05rem;margin-bottom:6px}
.infocard__v{font-weight:700;color:var(--orange);word-break:break-word}
.infocard__d{margin-top:8px;font-size:.88rem;color:var(--ink-3)}

/* ------------------------------------------------------------- form */
.contact{
  position:relative;
  padding:clamp(22px,3vw,44px);
  background:var(--cream-2);border:1px solid var(--line-2);border-radius:var(--r-xl);
  overflow:hidden;
}
.contact__head{max-width:60ch;margin-bottom:clamp(20px,2.4vw,30px)}
.contact__t{position:relative;display:inline-block;font-size:clamp(1.5rem,2.8vw,2.2rem)}
.contact__d{margin-top:12px;color:var(--ink-2)}
/* Karakter panelin ICINDE dursun, kenardan tasmasin. */
.contact__char{
  position:absolute;right:clamp(10px,2vw,32px);bottom:0;
  width:clamp(110px,13vw,190px);
  opacity:.92;pointer-events:none;
}
.contact__char img{width:100%;height:auto;display:block}

.frm{position:relative;z-index:1;max-width:min(100%,880px)}
.frm__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld--wide{grid-column:1/-1}
.fld__l{font-family:var(--f-disp);font-weight:700;font-size:.88rem;color:var(--ink-2)}
.fld__l i{color:var(--orange);font-style:normal}
.fld__i{
  width:100%;padding:.82em 1em;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--white);color:var(--ink);
  font:inherit;font-size:.95rem;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.fld__i::placeholder{color:#b3a89e}
.fld__i:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3.5px rgba(242,101,34,.14)}
.fld__i--ta{resize:vertical;min-height:120px}
.fld__i--sel{
  appearance:none;cursor:pointer;padding-right:2.4em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23857a70'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7em center;background-size:20px;
}
.frm__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px}
.frm__note{font-size:.82rem;color:var(--ink-3);max-width:40ch}
.frm__note a{color:var(--orange);text-decoration:underline}

/* --------------------------------------------------------- 404 / tesekkur */
.oops{padding-block:clamp(40px,6vw,90px)}
.oops__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,50px);align-items:center}
.oops__t{position:relative;display:inline-block;font-size:clamp(2rem,4.6vw,3.4rem);margin-bottom:16px}
.oops__d{color:var(--ink-2);max-width:46ch;margin-bottom:26px}
.oops__art{position:relative;display:grid;place-items:center}
.oops__art img{position:relative;z-index:1;height:min(46vh,420px);width:auto}
.oops__art .hero__blob{width:min(80%,340px)}

/* ---------------------------------------------------------- metin sayfa */
.prose{max-width:72ch;margin-inline:auto;color:var(--ink-2);font-size:1.02rem}
.prose strong{color:var(--ink)}

/* ------------------------------------------------------------ footer */
.foot{
  position:relative;margin-top:clamp(40px,6vw,80px);
  background:var(--ink);color:#e9e0d7;
  border-top:0;overflow:hidden;
}
/* Ustte ince turuncu cizgi + kosede yumusak isik: koyu alt bilgi
   sayfayi kapatir, sicak paleti korur. */
.foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-l),var(--orange));
}
.foot::after{
  content:"";position:absolute;right:-10%;top:-40%;width:min(60%,520px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(242,101,34,.20),transparent 62%);pointer-events:none;
}
.foot .brand{color:var(--orange-l)}
.foot__tag{color:#c4b8ae}
.foot__contact{color:#c9bdb3}
.foot__contact a:hover{color:var(--orange-l)}
.foot__h{color:#fff}
.foot__col a:not(.btn):not(.soc){color:#d3c8be}
.foot__col a:not(.btn):not(.soc):hover{color:var(--orange-l)}
.foot .soc{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#d8ccc2}
.foot .soc:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.foot__bar{border-top:1px solid rgba(255,255,255,.10)}
.foot__bar-in{color:#9d928a}
.foot__legal a:hover{color:var(--orange-l)}
.foot__in{
  position:relative;display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(22px,3vw,44px);padding-block:clamp(38px,5vw,66px);
}
.brand--foot{font-size:1.5rem}
.foot__tag{margin-top:12px;color:var(--ink-2);max-width:34ch}
.foot__contact{margin-top:18px;display:flex;flex-direction:column;gap:6px;font-size:.94rem;color:var(--ink-2)}
.foot__contact a:hover{color:var(--orange)}
.foot__h{font-size:1rem;margin-bottom:14px}
.foot__col{display:flex;flex-direction:column}
.foot__col nav,.foot__col a:not(.btn):not(.soc){padding:.24em 0;color:var(--ink-2);font-size:.95rem;transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.foot__col a:not(.btn):not(.soc):hover{color:var(--orange);transform:translateX(3px)}
.foot__social{display:flex;gap:9px;flex-wrap:wrap}
.soc{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--white);border:1px solid var(--line-2);color:var(--ink-2);
  transition:all var(--t) var(--ease);
}
.soc svg{fill:currentColor}
.soc:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-3px)}
.foot__sub{margin-top:16px;align-self:flex-start}
.foot__char{position:absolute;right:0;bottom:0;width:clamp(100px,11vw,168px);opacity:.92;pointer-events:none}

.foot__bar{border-top:1px solid var(--line-2)}
.foot__bar-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:18px;font-size:.86rem;color:var(--ink-3);
}
.foot__legal{display:flex;gap:18px;flex-wrap:wrap}
.foot__legal a:hover{color:var(--orange)}

/* --------------------------------------------------- video oynatici */
/* ------------------------------------------------ media kit (PDF) popup */
/* Lightbox ile ayni dil; farki icerigin PDF olmasi ve yuksekligin ekrana
   gore verilmesi (PDF'in kendi oran sabiti yok). */
.pdfpop{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:clamp(10px,2.4vw,32px)}
.pdfpop[hidden]{display:none}
.pdfpop__bg{position:absolute;inset:0;background:rgba(18,14,11,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pdfpop__in{
  position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(100%,980px);height:min(92vh,1180px);
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.pdfpop.is-open .pdfpop__in{opacity:1;transform:none}
.pdfpop__bar{
  flex:none;display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 18px;border-bottom:1px solid var(--line-2);background:var(--cream);
}
.pdfpop__t{flex:1 1 auto;font-family:var(--f-disp);font-weight:800;font-size:1rem;margin:0}
.pdfpop__ind{
  flex:none;padding:7px 14px;border-radius:999px;
  background:var(--orange);color:#fff;font-weight:700;font-size:.86rem;
}
.pdfpop__x{
  flex:none;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.06);color:var(--ink);font-size:1.5rem;line-height:1;
}
.pdfpop__x:hover{background:rgba(0,0,0,.12)}
.pdfpop__frame{flex:1 1 auto;position:relative;background:#525659}
.pdfpop__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (prefers-reduced-motion:reduce){
  .pdfpop__in{transition:none;opacity:1;transform:none}
}

.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.lightbox[hidden]{display:none}
.lightbox__bg{position:absolute;inset:0;background:rgba(18,14,11,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lightbox__in{
  position:relative;z-index:1;width:min(100%,1080px);
  animation:lbin .3s var(--ease);
}
@keyframes lbin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.lightbox__frame{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#000;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Gorsel modunda oran serbest: is gorselleri kirpilmadan tam boy gorunur. */
.lightbox__frame--img{aspect-ratio:auto;background:transparent;box-shadow:none;max-height:82vh}
.lightbox__frame--img img{
  display:block;max-width:100%;max-height:82vh;width:auto;height:auto;margin:0 auto;
  border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff;
}
.lightbox__t{margin-top:14px;color:#fff;font-family:var(--f-disp);font-weight:700;font-size:1.02rem;text-align:center}
.lightbox__x{
  position:absolute;top:-46px;right:0;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  transition:background var(--t) var(--ease),transform var(--t) var(--ease);
}
.lightbox__x:hover{background:var(--orange);transform:rotate(90deg)}
body.lb-open{overflow:hidden}

/* ------------------------------------------------- teklif formu popup */
/* CTA butonlarinin actigi form. Uzun form kucuk ekranda sigmayabilir,
   bu yuzden kutunun KENDISI dikeyde kaydirilir; sayfa kilitli kalir. */
.formpop{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:clamp(10px,3vw,34px)}
.formpop[hidden]{display:none}
.formpop__bg{position:absolute;inset:0;background:rgba(18,14,11,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.formpop__in{
  position:relative;z-index:1;width:min(100%,720px);max-height:calc(100vh - 2*clamp(10px,3vw,34px));
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(20px,3vw,36px);
  background:var(--white);border-radius:var(--r-xl);box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:lbin .3s var(--ease);
}
.formpop__t{position:relative;display:inline-block;font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:6px}
.formpop__d{color:var(--ink-2);margin-bottom:18px}
.formpop__x{
  position:absolute;top:12px;right:12px;z-index:2;
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--cream-2);color:var(--ink);font-size:24px;line-height:1;
  transition:background var(--t) var(--ease),transform var(--t) var(--ease);
}
.formpop__x:hover{background:var(--orange);color:#fff;transform:rotate(90deg)}
.formpop .frm__foot{margin-top:16px}
body.fp-open{overflow:hidden}
@media (max-width:600px){.lightbox__x{top:auto;bottom:-52px;right:50%;translate:50% 0}}

/* ekip gorselleri: eski siteden gelen illustrasyonlar dikey oranli */
.team__ph{object-position:50% 18%}
.team--page .team__ph{width:clamp(84px,9vw,116px);height:clamp(84px,9vw,116px)}

/* --------------------------------------------------------- animasyon */
/* Ilerleyici gelistirme: icerik varsayilan olarak gorunur.
   JS yuklenip <html>'e .js-anim eklerse gizlenip kaydirmayla acilir. */
.js-anim .reveal{opacity:0;transform:translateY(22px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js-anim .reveal.is-in{opacity:1;transform:none}
.js-anim .cards .card:nth-child(2),.works .work:nth-child(2),.steps .step:nth-child(2),
.stats__item:nth-child(2),.refs__item:nth-child(2){transition-delay:.06s}
.cards .card:nth-child(3),.works .work:nth-child(3),.steps .step:nth-child(3),
.stats__item:nth-child(3),.refs__item:nth-child(3){transition-delay:.12s}
.cards .card:nth-child(4),.works .work:nth-child(4),.steps .step:nth-child(4),
.stats__item:nth-child(4),.refs__item:nth-child(4){transition-delay:.18s}
.cards .card:nth-child(5),.works .work:nth-child(5),.refs__item:nth-child(5){transition-delay:.24s}
.cards .card:nth-child(6),.works .work:nth-child(6),.refs__item:nth-child(6){transition-delay:.3s}
.team__item:nth-child(2){transition-delay:.05s}
.team__item:nth-child(3){transition-delay:.1s}
.team__item:nth-child(4){transition-delay:.15s}
.team__item:nth-child(5){transition-delay:.2s}
.team__item:nth-child(6){transition-delay:.25s}
.team__item:nth-child(7){transition-delay:.3s}
.team__item:nth-child(8){transition-delay:.35s}

.parallax{will-change:transform}

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

/* =========================================================== duyarli */
/* Menu adlari uzun oldugu icin dar masaustunde tum menu hamburgere
   devredilir. (Eskiden once ikinci CTA butonu gizleniyordu; o buton
   tamamen kaldirildi, kural da kaldirildi.) */
@media (max-width:1240px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:block;margin-left:auto}
  .team{grid-template-columns:repeat(4,1fr)}
  .vidgrid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;text-align:center}
  .hero__copy{order:2}
  .hero__art{order:1;min-height:min(46vh,420px)}
  .dayi{height:min(46vh,420px)}
  .hero__title .l3{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero__sub{margin-inline:auto}
  .cards,.cards--detail{grid-template-columns:repeat(2,1fr)}
  .works{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px}
  .step:nth-child(2)::after{display:none}
  .split{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .ytstats{grid-template-columns:repeat(2,1fr)}
  .frm__grid{grid-template-columns:repeat(2,1fr)}
  .infocards{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
  .foot__char{width:96px;opacity:.5}
  .team--page{grid-template-columns:repeat(3,1fr)}
  .oops__in{grid-template-columns:1fr;text-align:center}
  .oops__art{order:-1}
  .oops__d{margin-inline:auto}
  .oops__in .hero__cta{justify-content:center}
}

@media (max-width:720px){
  .brandstrip__in{flex-direction:column;align-items:flex-start;gap:12px}
  .brandstrip__label{max-width:none}
  .faq{columns:1}
  .contact__char{display:none}
  .team{grid-template-columns:repeat(3,1fr)}
  .vidgrid{grid-template-columns:repeat(2,1fr)}
  .job{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px){
  .cards,.cards--detail,.works{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step::after{display:none !important}
  .stats__grid{grid-template-columns:1fr}
  .frm__grid{grid-template-columns:1fr}
  .team,.team--page{grid-template-columns:repeat(2,1fr)}
  /* Dar ekranda serit 1,25 kart gosterir: yandaki kartin bir parcasi
     gorunur, boylece kaydirilabildigi anlasilir. */
  .ytreel__win{grid-auto-columns:calc(100% / 1.25 - var(--reel-gap))}
  .ytreel__nav{display:none}
  .ytcard{flex-wrap:wrap}
  .ytcard .btn--yt{width:100%}
  .ytpanel__char{width:min(34vw,150px);margin-bottom:-22px}
  .foot__in{grid-template-columns:1fr}
  .foot__bar-in{flex-direction:column;align-items:flex-start;gap:8px}
  .hero__title{font-size:clamp(1.55rem,6.6vw,2.2rem)}
  .nav__in{padding:8px 8px 8px 18px}
  .brand{font-size:1.12rem}
}

/* ------------------------------------------------- dokunma hedefleri */
/* Parmakla kullanilan cihazlarda TEK BASINA duran baglantilarin dokunma
   alani buyutulur (olculdu: 18-30px yuksekligindeydiler). Yalnizca
   `pointer:coarse` altinda uygulanir, masaustu gorunumu degismez.
   Cumle ICINDEKI baglantilara (ornegin form altindaki KVKK metni)
   dokunulmuyor: kutularini buyutmek satir arasini bozar. */
@media (hover:none) and (pointer:coarse){
  .brand,
  .link-arrow,
  .infocard__v,
  .foot__contact a,
  .foot__legal a{
    display:inline-flex;align-items:center;min-height:44px;
  }
}