/* =========================================================
   RUBA KÜLTÜR MEDYA — style.css
   Canli renkler · sicak krem zemin · turuncu / teal / sari
   Yazi tipleri: Bricolage Grotesque (baslik) + DM Sans (metin)
   ========================================================= */

/* ---------------------------------------------------------------
   PALET — tamami logo dosyasindan piksel okunarak alinmistir.
   ruba-logo.png icindeki gercek degerler:
     #343434  logo yazisi (komur)
     #607F83  1. baklava (teal)
     #A35D3C  2. baklava (kiremit)
     #F5A578  3. baklava (seftali)
     #F4DFCA  4. baklava (krem)
   Site rengi eklemek gerekirse bu bes renkten turetilmelidir.
   --------------------------------------------------------------- */
:root{
  /* zeminler */
  --krem:#fbf4ea;        /* logo kreminin sayfa zemini icin acilmis hali */
  --krem-2:#f4dfca;      /* logo kremi — bolum bandi ve cipler */
  --kart:#ffffff;

  /* metin — logonun kendi yazi rengi */
  --ink:#343434;
  --ink-2:#5c5651;
  --soluk:#8a827a;
  --acik:#fbf4ea;        /* koyu/renkli zemin uzerindeki metin */

  /* logonun dort baklava rengi */
  --teal:#607f83;
  --teal-derin:#41595d;  /* teal'in koyulastirilmis hali (bolum zemini) */
  --kiremit:#a35d3c;
  --kiremit-koyu:#8a4c2f;
  --seftali:#f5a578;
  --whatsapp:#25d366;
  /* Instagram'in resmi marka gecisi — sag alttaki yuzen dugmede kullaniliyor.
     Duz renk degil gradyan oldugu icin yalnizca "background" ile verilebilir. */
  --instagram:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);

  /* cizgiler */
  --cizgi:rgba(52,52,52,.16);
  --cizgi-acik:rgba(251,244,234,.26);

  --baslik:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --metin:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --kenar:clamp(20px,5vw,56px);
  --yay:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--metin);
  background:var(--krem);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.kilit{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--kiremit); color:#fff; }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 var(--kenar); }

section[id]{ scroll-margin-top:90px; }


/* ---------- ORTAK TIPOGRAFI ---------- */

h1,h2,h3{
  font-family:var(--baslik);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.03;
}
h2{ font-size:clamp(36px,5.4vw,74px); }
h3{ font-size:clamp(19px,2vw,26px); font-weight:700; }
h2 em{ font-style:normal; color:var(--kiremit); }

/* kucuk ust etiket — artik numara yok, yerine renkli baklava */
.etiket{
  display:flex; align-items:center; gap:10px;
  font-family:var(--metin);
  font-size:11.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--kiremit);
}
/* kiremit zemin (#a35d3c) uzerinde kucuk yazilar okunakli kalsin diye beyaz */
.etiket-acik{ color:#fff; }

/* logodaki baklava sekli — bolum isareti olarak kullaniliyor */
.baklava{
  width:9px; height:9px; flex:none;
  background:var(--kiremit);
  transform:rotate(45deg);
}
.b-teal{ background:var(--teal); }
.b-turuncu{ background:var(--kiremit); }
.b-seftali{ background:var(--seftali); }
/* dorduncu baklava logoda krem. krem zemin uzerinde gorunmeyecegi icin
   acik bolumlerde logonun yazi rengi (komur), koyu/renkli bolumlerde
   ise gercek krem tonu kullanilir. */
.b-sari{ background:var(--ink); }
.bolum-teal .b-sari,
.iletisim .b-sari{ background:var(--krem-2); }
/* Kiremit zeminde kiremit baklava kaybolur.
   DIKKAT: HTML'deki sinif adi b-turuncu (renk degiskeni --kiremit'e
   cevrildi ama sinif adi degismedi). Secici bu yuzden b-turuncu. */
.iletisim .b-turuncu{ background:var(--krem-2); }
/* koyu teal zeminde teal baklava kaybolur */
.bolum-teal .b-teal{ background:var(--seftali); }


/* ---------- BUTONLAR ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px;
  border-radius:999px;
  border:1.5px solid transparent;
  font-family:var(--baslik);
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap;
  transition:background .25s var(--yay), color .25s var(--yay),
             border-color .25s var(--yay), transform .25s var(--yay),
             box-shadow .25s var(--yay);
}
.btn:hover{ transform:translateY(-2px); }
.btn-buyuk{ padding:17px 36px; font-size:16.5px; }

.btn-turuncu{ background:var(--kiremit); color:#fff; }
.btn-turuncu:hover{ background:var(--kiremit-koyu); box-shadow:0 10px 26px rgba(226,87,30,.3); }

.btn-koyu{ background:var(--ink); color:var(--krem); }
.btn-koyu:hover{ background:var(--teal); }

.btn-cizgi{ border-color:var(--ink); color:var(--ink); }
.btn-cizgi:hover{ background:var(--ink); color:var(--krem); }

.btn-genis{ width:100%; }


/* ---------- ACILIS PERDESI ---------- */

.perde{
  position:fixed; inset:0; z-index:200;
  background:var(--ink); color:var(--acik);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--kenar);
  transition:transform .9s var(--yay);
}
.perde.bitti{ transform:translateY(-101%); }

.perde-ic{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; padding-bottom:26px; flex-wrap:wrap;
}
.perde-logo{ display:flex; align-items:center; gap:16px; }
.perde-sayac{
  font-family:var(--baslik); font-size:clamp(28px,6vw,58px);
  font-weight:700; color:var(--seftali); line-height:1;
}

.perde-cizgi{ height:3px; background:rgba(251,244,234,.2); overflow:hidden; }
.perde-cizgi i{ display:block; height:100%; width:0; background:var(--seftali); }


/* ---------- UST MENU ---------- */

header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:transform .45s var(--yay), background .35s ease,
             border-color .35s ease, backdrop-filter .35s ease;
}
/* PERFORMANS: buzlu cam etkisi kaydirma boyunca surekli yeniden
   hesaplanir. Bulaniklik 16px'ten 9px'e cekildi ve saturate atildi;
   gorunum neredeyse ayni, maliyet belirgin dusuk. Zemin opakligi
   .85'ten .90'a cikarilarak okunakligi korundu. */
header.yapisik{
  background:rgba(251,244,234,.90);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  border-bottom-color:var(--cizgi);
}
header.gizli{ transform:translateY(-102%); }

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.yapisik{ background:var(--krem); }
}

/* ONEMLI: backdrop-filter uygulanmis bir oge, icindeki position:fixed
   ogeler icin yeni bir referans cercevesi olusturur. Bu yuzden mobil
   menu acikken buzlu cam kapatilir; yoksa tam ekran menu header'in
   kutusuna hapsolur ve zemini gorunmez. */
header.menu-acik{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:transparent;
}

/* ---- SAYFANIN EN USTU: menu saydam, arkasinda KOYU hero var ----
   Menu ogeleri normalde koyu renk; koyu fotografin uzerinde
   kayboluyorlar. Kaydirinca header krem zemin (.yapisik) aldigi anda
   hepsi kendi normal renklerine geri doner. */

/* logonun yazisi koyu bir PNG; rengi degistirilemedigi icin
   krem bir zeminin uzerine alindi. .yapisik olunca zemin kaybolur. */
header:not(.yapisik) .marka{
  background:var(--krem);
  border-radius:13px;
  padding:7px 13px;
}

/* menu baglantilari yalnizca masaustunde acilir; 820px altinda menu
   zaten krem tam ekran katman oluyor, orada koyu kalmalari gerekiyor */
@media (min-width:821px){
  header:not(.yapisik) .menu > a{ color:var(--acik); }
  header:not(.yapisik) .menu > a:hover,
  header:not(.yapisik) .menu > a.aktif{ color:var(--seftali); }
  header:not(.yapisik) .menu > a::after{ background:var(--seftali); }
}

/* hamburger: menu acikken zemin krem olur, o zaman koyu kalmali */
header:not(.yapisik):not(.menu-acik) .hamburger{ border-color:rgba(251,244,234,.5); }
header:not(.yapisik):not(.menu-acik) .hamburger span{ background:var(--acik); }

.header-ic{
  max-width:1280px; margin:0 auto;
  padding:14px var(--kenar);
  display:flex; align-items:center; justify-content:space-between; gap:28px;
}

/* ---------- LOGO ---------- */
/* mobil menu tam ekran acilinca logo ustte kalsin */
.marka{
  display:flex; align-items:center; flex:none;
  position:relative; z-index:1;
}
.logo-img{ height:46px; width:auto; }

/* logonun yazisi koyu renk oldugu icin koyu zeminlerde
   (perde ve alt bilgi) acik renkli bir kutunun icine aliniyor */
.logo-kutu{
  display:inline-flex; align-items:center;
  background:var(--krem);
  border-radius:14px;
  padding:12px 16px;
}
.logo-kutu img{ height:52px; width:auto; }
.logo-kutu-buyuk{ border-radius:20px; padding:18px 24px; }
.logo-kutu-buyuk img{ height:clamp(64px,11vw,104px); }

.menu{ display:flex; align-items:center; gap:30px; }
.menu > a{
  font-size:15px; font-weight:500;
  position:relative;
  white-space:nowrap;   /* "Faaliyet Alanlari" iki satira bolunmesin */
  transition:color .25s ease;
}
/* alt cizgi hover'da soldan saga acilir */
.menu > a::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:100%; height:2px; background:var(--kiremit);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--yay);
}
.menu > a:hover,
.menu > a.aktif{ color:var(--kiremit); }
.menu > a:hover::after,
.menu > a.aktif::after{ transform:scaleX(1); }
.menu-tel{ display:none; }

.header-btn{ padding:11px 24px; font-size:14.5px; flex:none; }


/* ---------- DIL SECICI (TR / EN) ----------
   Kucuk hap bicimli bir dugme; tiklaninca altinda koyu bir
   liste acilir. Renkler paletten: kutu --ink (logo yazisinin
   komuru), secili dil --seftali. Logoda olmayan bir renk
   kullanilmiyor.

   .dil kapsayicisi position:relative — acilan liste ona gore
   konumlaniyor. Header'in kendisine degil, cunku header
   kaydirinca gizlenip geri geliyor. */
.dil{ position:relative; flex:none; }

.dil-dugme{
  display:flex; align-items:center; gap:7px;
  padding:9px 14px;
  border:1.5px solid var(--cizgi);
  border-radius:999px;
  background:transparent;
  font-family:var(--metin);
  font-size:13.5px; font-weight:700; letter-spacing:.06em;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.dil-dugme:hover{ border-color:var(--kiremit); color:var(--kiremit); }

/* ok: saf CSS ucgen — ayri bir SVG dosyasi gerekmesin diye */
.dil-ok{
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .3s var(--yay);
}
.dil.acik .dil-ok{ transform:rotate(180deg); }

/* Sayfanin en ustunde header saydam ve arkasinda koyu hero var;
   dugme orada acik renge doner (menu baglantilarindaki mantigin
   aynisi). Mobil menu acikken zemin krem oluyor, o zaman koyu kalir. */
header:not(.yapisik):not(.menu-acik) .dil-dugme{
  border-color:rgba(251,244,234,.45);
  color:var(--acik);
}
header:not(.yapisik):not(.menu-acik) .dil-dugme:hover{
  border-color:var(--seftali);
  color:var(--seftali);
}

/* ---- acilan liste ---- */
.dil-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:132px;
  display:flex; flex-direction:column;
  padding:10px;
  background:var(--ink);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(52,52,52,.28);
  /* kapaliyken tiklanamaz olmali: visibility olmadan sadece
     opacity:0 yapmak gorunmez ama tiklanabilir bir katman birakir */
  opacity:0; visibility:hidden;
  transform:translateY(-8px) scale(.97);
  transform-origin:top right;
  transition:opacity .25s ease, transform .3s var(--yay), visibility .25s;
  z-index:5;
}
.dil.acik .dil-menu{ opacity:1; visibility:visible; transform:none; }

.dil-menu button{
  padding:11px 16px;
  border:none; background:transparent;
  border-radius:11px;
  font-family:var(--metin);
  font-size:14px; font-weight:700; letter-spacing:.08em;
  color:rgba(251,244,234,.72);
  text-align:left; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.dil-menu button:hover{ background:rgba(251,244,234,.09); color:var(--acik); }
/* secili dil seftali renkte — logodaki ucuncu baklava */
.dil-menu button[aria-current="true"]{ color:var(--seftali); }

.hamburger{
  display:none; width:44px; height:44px; flex:none;
  position:relative; border:1.5px solid var(--ink); border-radius:50%;
}
.hamburger span{
  position:absolute; left:12px; width:20px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .35s var(--yay), opacity .2s ease;
}
.hamburger span:nth-child(1){ top:18px; }
.hamburger span:nth-child(2){ top:24px; }
.hamburger.acik span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.hamburger.acik span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }


/* ---------- GIRIS (HERO) ---------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:150px;
  overflow:hidden;
}

/* ---- ARKA PLAN FOTOGRAFI (sahne isiklari) ----
   Fotograf siyah-beyaz ve neredeyse tamamen koyu. Krem zemin ve koyu
   yazilarla dogrudan kullanilamaz — yazi okunmaz olurdu. Yazi renklerine
   dokunmadan calismasi icin uc katman uygulandi:
     1) sepya + doygunluk ile fotograf sicak palete cekildi
     2) dusuk opaklikla zemine karistirildi
     3) uzerine krem bir perde: yazinin oldugu solda yogun, sagda acilir;
        ust ve altta tamamen kreme baglanir (menu ve serit temiz kalsin)
   Fotografin belirginligini tek yerden ayarlamak icin: --foto-opaklik */
.hero-foto{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  --foto-opaklik:1;
  --karartma:.58;              /* siyah filtrenin gucu */
}
.hero-foto::before,
.hero-foto::after{ content:''; position:absolute; inset:0; }

/* yedek katman: video yuklenene kadar / yuklenemezse gorunur */
.hero-foto::before{
  background:url("sahne-kalabalik.jpg") center 42% / cover no-repeat;
  /* 14 Agustos 2026: buradaki filter de kaldirildi. Videodan kaldirilmasi
     zorunluydu (bkz. .hero-video notu); ikisi ayni karartmayi paylasmak
     zorunda oldugu icin fotograf da ayni yolu izliyor — karartmanin
     tamami artik ::after gradyaninda. */
  opacity:var(--foto-opaklik);
}

/* VIDEO — yedek katmanin ustunde, siyah filtrenin (::after) altinda.
   Ucu de absolute; boyama sirasi DOM sirasindan geliyor:
   ::before  ->  <video>  ->  ::after */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:var(--foto-opaklik);
  pointer-events:none;
}
/* PERFORMANS (14 Agustos 2026): videonun uzerinde
   "filter:brightness(.62) contrast(1.08) saturate(1.05)" vardi.
   Filtre, videonun HER KARESI icin yeniden hesaplaniyordu; sabit bir
   gorselde bir kez odenen bedel, videoda saniyede onlarca kez odeniyor
   ve zayif makinelerde sayfayi kilitliyordu. Karartma artik yalnizca
   asagidaki ::after gradyanindan geliyor — gradyan statiktir, videonun
   kare hizindan bagimsizdir. Kaybolan koyulugu telafi etmek icin
   gradyanin ara duraklari koyulastirildi. */
/* SIYAH FILTRE — iki katman:
   yatayda solda (yazinin oldugu taraf) daha yogun, sagda acilir ki
   sahne isiklari gorunsun; dikeyde ust menunun ve alttaki seridin
   oturdugu kenarlar koyulasir. */
.hero-foto::after{
  background:
    linear-gradient(100deg,
      rgba(18,13,10,calc(var(--karartma) + .26)) 0%,
      rgba(18,13,10,calc(var(--karartma) + .14)) 45%,
      rgba(18,13,10,calc(var(--karartma) - .04)) 100%),
    linear-gradient(180deg,
      rgba(18,13,10,.74) 0%,
      rgba(18,13,10,.30) 24%,
      rgba(18,13,10,.34) 68%,
      rgba(18,13,10,.66) 100%);
}

/* arka planda yuzen renk lekeleri
   (fotograf eklendigi icin opaklik dusuruldu, artik hafif renk yikamasi) */
.hero-lekeler{ position:absolute; inset:0; pointer-events:none; z-index:0; }
/* fotograf eklendigi icin lekelerin opakligi dusuruldu:
   artik zemin degil, fotografin uzerinden gecen hafif renk yikamasi */
/* PERFORMANS (14 Agustos 2026): bu lekeler eskiden duz renk daireydi
   ve yumusak kenari "filter:blur(70px)" veriyordu. Ucu birden, en
   buyugu 620x620 piksel, ustelik surekli animasyonluydu: tarayici her
   karede bu alanlari bastan bulaniklastirmak zorunda kaliyordu ve
   guclu olmayan makinelerde sayfa donuyordu.
   Ayni yumusaklik artik radial-gradient ile ureiliyor — gradyan bir
   kez cizilir, her karede yeniden hesaplanmaz. Renkler soluyarak
   seffaflasiyor; ara tonda gri olusmasin diye bitis rengi ayni rengin
   alfasi sifirlanmis hali olarak acikca yaziliyor. */
.leke{
  position:absolute; display:block; border-radius:50%;
  animation:yuz 16s ease-in-out infinite;
}
.leke-1{
  width:46vw; height:46vw; max-width:620px; max-height:620px;
  top:-8%; right:-6%; opacity:.30;
  background:radial-gradient(circle closest-side,
    rgba(245,165,120,.95) 0%, rgba(245,165,120,.55) 45%, rgba(245,165,120,0) 100%);
}
.leke-2{
  width:38vw; height:38vw; max-width:520px; max-height:520px;
  bottom:6%; left:-8%; opacity:.20;
  background:radial-gradient(circle closest-side,
    rgba(96,127,131,.95) 0%, rgba(96,127,131,.55) 45%, rgba(96,127,131,0) 100%);
  animation-delay:-5s;
}
.leke-3{
  width:30vw; height:30vw; max-width:400px; max-height:400px;
  top:32%; left:42%; opacity:.18;
  background:radial-gradient(circle closest-side,
    rgba(244,223,202,.95) 0%, rgba(244,223,202,.55) 45%, rgba(244,223,202,0) 100%);
  animation-delay:-9s;
}
@keyframes yuz{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(3%,-4%) scale(1.07); }
  66%{ transform:translate(-3%,3%) scale(.95); }
}

.hero-ic{
  position:relative; z-index:1;
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding-bottom:60px;
}

/* ================= LOGONUN DORT ELMASI =================
   AKIS ("logodan dogus"): dort elmas once satirin ortasinda
   UST USTE gelip tek bir buyuk baklava gibi belirir, sonra
   dorde ayrilip her biri kendi yuvasina acilir; acilirken 90
   derece doner. Yerlestikten sonra hicbir hareket kalmaz.

   GEOMETRI: her elmasin sabit yeri satirdaki kendi yuvasidir ve
   animasyonun son karesi translate(0,0)'dir. Baslangic noktasi
   ise --dx: elmasin satir merkezine olan uzakligi, isareti ters
   cevrilmis hali. translateX(--dx) demek "satir merkezine git"
   demektir; dordu de oraya gidince ust uste binip tek baklava
   gorunumu olusur.

   Dis <svg> acilmayi (yer degistirme), ic <polygon> kendi
   ekseninde donmeyi yapar; ayri ogeler oldugu icin transform'lar
   birbirini ezmez.

   --- ZAMAN CIZELGESI (perde kalkinca baslar) ---
   0.00 - 0.27s  ortada tek baklava buyuyerek belirir
   0.27 - 1.50s  dorde ayrilip yuvalarina acilir, 90 derece doner
                 (her elmas 0.06s arayla baslar)
   1.45 - 2.02s  R - U - B - A harfleri tek tek belirir
   sonrasi       hareket YOK, elmaslar sabit durur
   ------------------------------------------------- */

.elmaslar{
  --w:clamp(34px,4.6vw,54px);          /* elmas genisligi */
  --bosluk:clamp(12px,1.8vw,20px);     /* hizadaki aralik */
  --adim:calc(var(--w) + var(--bosluk));

  position:relative; z-index:0;        /* yazinin arkasinda kalsin */
  display:flex; gap:var(--bosluk);
  margin-bottom:clamp(18px,2.4vw,28px);
}
/* baslik ve diger yazilar elmaslarin onunde dursun */
.hero-etiket,
.ruba-yazi,
.hero-baslik,
.hero-alt,
.hero-kaydir{ position:relative; z-index:1; }

.elmas-kutu{
  width:var(--w); height:auto; flex:none;
  overflow:visible;
  opacity:0;                           /* yorunge ilk karesinde acilir */
}
/* --dx: elmasin satir merkezine uzakligi (ters isaretli) —
        animasyonun BASLANGIC noktasi, dordu burada ust uste biner
   --ac: acilmanin baslama ani (soldan saga 0.06s arayla) */
.k1{ --dx:calc(var(--adim) *  1.5); --ac:0s;   }
.k2{ --dx:calc(var(--adim) *  0.5); --ac:.06s; }
.k3{ --dx:calc(var(--adim) * -0.5); --ac:.12s; }
.k4{ --dx:calc(var(--adim) * -1.5); --ac:.18s; }

.elmas{
  transform-box:fill-box;              /* donme ekseni elmasin merkezi */
  transform-origin:center;
  /* koyu zeminde koyu kontur kayboluyordu, acik kontura cevrildi */
  stroke:rgba(251,244,234,.55); stroke-width:1.8; stroke-linejoin:round;
}
.e1{ fill:var(--teal); }               /* #607f83 */
.e2{ fill:var(--kiremit); }            /* #a35d3c */
.e3{ fill:var(--seftali); }            /* #f5a578 */
.e4{ fill:var(--krem-2); }             /* #f4dfca */

/* --- ACILMA ---
   Dis kutu yer degistirir: satir merkezinden (--dx) kendi
   yuvasina (0). Ic polygon ayni anda -90 dereceden 0'a doner.
   Her elmas 0.06s arayla basladigi icin acilma soldan saga
   yelpaze gibi akar. */

body.hazir .elmas-kutu{
  animation:baklava-ac 1.5s var(--yay) var(--ac) 1 forwards;
}
body.hazir .elmas{
  animation:baklava-don 1.5s var(--yay) 1 forwards;
}

@keyframes baklava-ac{
  /* ortada, kucuk ve saydam */
  0%  { opacity:0; transform:translateX(var(--dx)) scale(.3); }
  /* tek baklava olarak belirir, hafifce sisip */
  18% { opacity:1; transform:translateX(var(--dx)) scale(1.15); }
  /* normal boyuta oturur, hala ust uste */
  30% { opacity:1; transform:translateX(var(--dx)) scale(1); }
  /* yuvasina dogru acilir, hedefi biraz gecer */
  72% { transform:translateX(calc(var(--dx) * -.12)) scale(1); }
  /* yerine oturur */
  100%{ opacity:1; transform:translateX(0) scale(1); }
}

@keyframes baklava-don{
  0%  { transform:rotate(-90deg); }
  100%{ transform:rotate(0deg); }
}

/* ---- RUBA YAZISI: harfler tek tek ----
   Harfler yer kaplamaya bastan devam eder (sadece opaklik ve konum
   degisir), boylece belirirken sayfa duzeni oynamaz. */
.ruba-yazi{
  font-family:var(--baslik);
  font-size:clamp(30px,6vw,76px);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
  color:var(--kiremit);
  margin-bottom:clamp(14px,2vw,22px);
}
.ruba-yazi span{
  display:inline-block;
  opacity:0;
  transform:translateY(26px) scale(.85);
}
body.hazir .ruba-yazi span{
  animation:harf-gel .5s var(--yay) var(--gec) 1 forwards;
}
/* Elmaslar 1.5sn'de yerine oturuyor; harfler tam o anda basliyor.
   Elmas suresini degistirirseniz bu dort satiri da kaydirin,
   yoksa harfler ya erken gelir ya da ortada bosluk kalir. */
.ruba-yazi span:nth-child(1){ --gec:1.45s; }
.ruba-yazi span:nth-child(2){ --gec:1.54s; }
.ruba-yazi span:nth-child(3){ --gec:1.63s; }
.ruba-yazi span:nth-child(4){ --gec:1.72s; }

@keyframes harf-gel{
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ===== KOYU HERO ICIN YAZI RENKLERI =====
   Hero artik koyu bir fotografin uzerinde. Asagidaki renkler SADECE
   hero'yu etkiler; sayfanin geri kalani (cozumler, hakkimizda, iletisim
   vb.) hic degismedi. Acik hero'ya donmek icin bu blogu silmek yeterli. */

.hero-etiket{
  font-size:12px;
  margin-bottom:clamp(24px,4vw,44px);
  color:var(--seftali);
}
.hero-etiket .baklava{ background:var(--seftali); }

.hero-baslik{ color:var(--acik); }
.hero-baslik em{ color:var(--seftali); }

.ruba-yazi{ color:var(--seftali); }

.hero-metin{ color:rgba(251,244,234,.82); }
.hero-metin strong{ color:#fff; }

.hero-kaydir{ color:rgba(251,244,234,.62); }

/* koyu zeminde cizgili buton acik renge doner */
.hero .btn-cizgi{ border-color:rgba(251,244,234,.42); color:var(--acik); }
.hero .btn-cizgi:hover{ background:var(--acik); color:var(--ink); }

/* ---- GIRIS ANIMASYONU ----
   Hepsi ayni "asagidan yukari suzulme" hareketini yapar; aralarindaki
   tek fark --gec (gecikme) degeri. Perde kalkinca body'ye .hazir
   eklenir ve zincir baslar. */
.hero-etiket,
.hero-metin,
.hero-butonlar,
.hero-kaydir{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease var(--gec,0s),
             transform .7s var(--yay) var(--gec,0s);
}
body.hazir .hero-etiket,
body.hazir .hero-metin,
body.hazir .hero-butonlar,
body.hazir .hero-kaydir{ opacity:1; transform:none; }

.hero-etiket  { --gec:.05s; }
.hero-metin   { --gec:.45s; }
.hero-butonlar{ --gec:.58s; }
.hero-kaydir  { --gec:.72s; }

.hero-baslik{
  font-family:var(--baslik);
  /* 14 Agustos 2026: baslik "Her detayinda denge, her sahnesinde
     butunluk." olunca en uzun satir 18 karakterden 24'e cikti.
     Once punto kucultuldu (clamp(36px,8.8vw,134px)), sonra kullanici
     "okunabilecek kadar kucult" deyince bir tur daha dusuruldu.
     Cok uzun basliklarda dar harf araligi ve sikisik satir araligi
     okumayi zorlastirdigi icin ikisi de gevsetildi.
     En eski deger: clamp(54px,11.8vw,180px) / -.05em / .92 */
  font-size:clamp(26px,6.1vw,88px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}
/* overflow:hidden harflerin kuyrugunu (s, y, g) kesmesin diye alttan pay birakiliyor */
.hero-baslik .satir{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.06em; }
/* baslik satirlari kendi kutusunun altindan yukari suzulur */
.hero-baslik .satir > span{
  display:block;
  transform:translateY(105%);
  transition:transform .8s var(--yay) var(--gec,0s);
}
body.hazir .hero-baslik .satir > span{ transform:none; }
.hero-baslik .satir:nth-child(1){ --gec:.15s; }
.hero-baslik .satir:nth-child(2){ --gec:.3s; }
.hero-baslik em{ font-style:normal; color:var(--kiremit); }

/* kapsayici animasyonsuz; metin ve butonlar ayri ayri gelir */
.hero-alt{
  margin-top:clamp(34px,5vw,60px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
}

.hero-metin{
  max-width:520px; font-size:clamp(16px,1.35vw,18.5px);
  color:var(--ink-2); line-height:1.68;
}
.hero-metin strong{ color:var(--ink); font-weight:700; }

.hero-butonlar{ display:flex; gap:12px; flex-wrap:wrap; }

.hero-kaydir{
  display:flex; align-items:center; gap:14px;
  margin-top:clamp(30px,5vw,56px);
  font-size:10.5px; font-weight:700; letter-spacing:.2em; color:var(--soluk);
}
.hero-kaydir svg{ animation:zipla 2.2s var(--yay) infinite; }
@keyframes zipla{
  0%,100%{ transform:translateY(0); opacity:.45; }
  50%{ transform:translateY(7px); opacity:1; }
}


/* ---------- KAYAN SERIT ---------- */

/* Iki serit, koyu hero'dan krem sayfaya inen bir deger merdiveni
   olusturur:  koyu fotograf -> kiremit -> krem -> sayfa zemini.
   Boylece gecis renk carpismasi degil, tonun kademe kademe
   acilmasi olarak okunuyor.
   Sert siyah cerceveler kaldirildi — ayrimi zaten ton farki yapiyor. */
.serit{
  position:relative; z-index:1;
  background:var(--kiremit); color:var(--acik);
  overflow:hidden; padding:15px 0;
}

/* ikinci serit acik krem zeminli ve ters yone kayiyor */
.serit-ters{ background:var(--krem-2); color:var(--ink); }
.serit-ters .serit-grup b{ color:var(--kiremit); }

.serit-ray{
  display:flex; width:max-content;
  /* uc ayni kopya var; bir kopya boyu (%33.333) kayinca desen basa doner */
  animation:kay 26s linear infinite;
  will-change:transform;
}
.serit-ters .serit-ray{ animation-name:kay-ters; animation-duration:32s; }

.serit-grup{ display:flex; align-items:center; flex:none; }
.serit-grup span{
  font-family:var(--baslik); font-size:13.5px; font-weight:700;
  letter-spacing:.1em; white-space:nowrap; padding:0 20px;
}
/* 14 Agustos 2026 - PERFORMANS: donme kaldirildi.
   Bu ayrac serit boyunca 54 KEZ tekrar ediyor. Her biri ayri bir
   sonsuz animasyon demekti; ustelik seridin kendisi zaten kayiyor,
   yani 54 oge birden hem oteleniyor hem donuyordu. 9px'lik bir
   baklavanin donmesi kayan seritte zaten fark edilmiyor ama zayif
   makinede kaydirmayi kilitleyen yuk tam olarak buydu.
   Geri istenirse: asagiya animation:baklava-don 6s linear infinite
   satirini eklemek yeterli (@keyframes baklava-don duruyor). */
.serit-grup b{
  color:var(--seftali); font-size:9px;
  opacity:.85;                       /* ayrac oldugu icin geride dursun */
}

@keyframes kay{
  from{ transform:translateX(0); }
  to{ transform:translateX(-33.3333%); }
}
@keyframes kay-ters{
  from{ transform:translateX(-33.3333%); }
  to{ transform:translateX(0); }
}
@keyframes baklava-don{
  to{ transform:rotate(360deg); }
}


/* ---------- BOLUM ISKELETI ---------- */

.bolum{ padding:clamp(80px,10vw,150px) 0; }
.bolum-seftali{ background:var(--krem-2); }
.bolum-teal{ background:var(--teal-derin); color:var(--acik); }
.bolum-teal p{ color:rgba(251,244,234,.78); }

.bolum-bas{ max-width:760px; margin-bottom:clamp(44px,6vw,80px); }
.bolum-bas .etiket{ margin-bottom:20px; }
.bolum-metin{
  margin-top:22px; font-size:clamp(16px,1.3vw,17.5px);
  color:var(--ink-2); line-height:1.72; max-width:560px;
}


/* ---------- AKORDIYON ---------- */

.akordiyon{ border-top:1.5px solid var(--cizgi); }
.bolum-teal .akordiyon{ border-top-color:var(--cizgi-acik); }

.akor{ border-bottom:1.5px solid var(--cizgi); }
.bolum-teal .akor{ border-bottom-color:var(--cizgi-acik); }

.akor-bas{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:clamp(14px,3vw,32px);
  padding:clamp(22px,3vw,34px) 4px;
  text-align:left;
  transition:padding-left .4s var(--yay), color .3s ease;
}
.akor-bas:hover{ padding-left:14px; color:var(--kiremit); }
.akor.acik .akor-bas{ color:var(--kiremit); }

/* baslik yanindaki renkli baklava, acikken buyur */
.akor-bas .baklava{
  width:12px; height:12px;
  transition:transform .45s var(--yay);
}
.akor.acik .akor-bas .baklava{ transform:rotate(45deg) scale(1.5); }

.akor-bas h3{
  font-size:clamp(21px,3.1vw,40px); font-weight:800; letter-spacing:-.035em;
}
.akor-ozet{
  font-size:11.5px; font-weight:700; letter-spacing:.1em;
  color:var(--soluk); text-transform:uppercase; text-align:right;
}

.akor-arti{ position:relative; width:34px; height:34px; flex:none; }
.akor-arti::before,
.akor-arti::after{
  content:''; position:absolute; top:50%; left:50%;
  width:16px; height:2px; background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .4s var(--yay), opacity .3s ease;
}
.akor-arti::after{ transform:translate(-50%,-50%) rotate(90deg); }
.akor.acik .akor-arti::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:0; }

/* govde: grid-template-rows ile yumusak acilis */
.akor-govde{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--yay);
}
.akor.acik .akor-govde{ grid-template-rows:1fr; }
.akor-ic{ overflow:hidden; }

/* 14 Agustos 2026: acilan akordiyonun icerigi iki kolon —
   yazi solda, sahne gorseli sagda. Kolonlar minmax(0,...) ile
   tanimli; yoksa grid cocugu kendi icerigi kadar genisleyip
   uzun satirlarda tasar. */
.akor-duzen{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,44px);
  align-items:start;
}
/* cip listesi kolonun altina yaslanmasin diye yazi kolonu serbest */
.akor-gorsel{ padding-bottom:34px; }
.akor-gorsel svg{ display:block; width:100%; height:auto; }

/* sahnedeki uc spot sirayla hafifce kisilip acilir — sabit bir
   cizim yerine "isik veren" bir sahne hissi veriyor */
@keyframes spot-parla{
  0%,100%{ opacity:1; }
  50%    { opacity:.4; }
}
.akor-gorsel .spot{ animation:spot-parla 3.6s ease-in-out infinite; }
.akor-gorsel .spot-2{ animation-delay:1.2s; }
.akor-gorsel .spot-3{ animation-delay:2.4s; }

/* kameranin film makaralari agir agir doner.
   transform-box:fill-box olmadan SVG sekilleri viewBox'in sol ust
   kosesine gore doner ve cizimden disari firlar. */
@keyframes makara-don{ to{ transform:rotate(360deg); } }
.akor-gorsel .makara{
  transform-box:fill-box; transform-origin:center;
  animation:makara-don 14s linear infinite;
}

.akor-ic p{
  max-width:720px; padding-left:clamp(0px,3.5vw,46px);
  font-size:clamp(15.5px,1.25vw,17px); color:var(--ink-2); line-height:1.72;
  padding-bottom:22px;
}
.bolum-teal .akor-ic p{ color:rgba(251,244,234,.78); }

.cip-liste{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  padding-left:clamp(0px,3.5vw,46px); padding-bottom:34px;
}
.cip-liste li{
  font-size:12px; font-weight:700; letter-spacing:.05em;
  padding:8px 16px; border-radius:999px;
  background:var(--krem-2); color:var(--kiremit-koyu);
}

/* SSS icin sade surum: baklava ve ozet yok */
.akor-sade .akor-bas{ grid-template-columns:1fr auto; }
.akor-sade .akor-bas h3{ font-size:clamp(17px,1.65vw,21px); font-weight:700; letter-spacing:-.02em; }
.akor-sade .akor-ic p{ padding-left:0; padding-bottom:26px; font-size:16px; }


/* ---------- HAKKIMIZDA ---------- */

.hakkinda-izgara{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(36px,6vw,90px);
  padding-bottom:clamp(56px,8vw,100px);
}
.hakkinda-sol{ position:sticky; top:110px; align-self:start; }
.hakkinda-sol .etiket{ margin-bottom:22px; color:var(--seftali); }
.hakkinda-imza{
  margin-top:34px; padding-top:26px; border-top:1.5px solid var(--cizgi-acik);
  font-size:13.5px; font-weight:500; letter-spacing:.02em;
  color:rgba(251,244,234,.7); line-height:2;
}
.hakkinda-imza span{ display:block; }

.hakkinda-sag p{ margin-bottom:22px; font-size:16.5px; line-height:1.8; }
.hakkinda-sag .ilk-paragraf{
  font-family:var(--baslik);
  font-size:clamp(20px,2.1vw,28px); font-weight:600; line-height:1.4;
  letter-spacing:-.025em; margin-bottom:32px;
}
.bolum-teal .hakkinda-sag .ilk-paragraf{ color:var(--acik); }


/* ---------- RAKAMLAR ---------- */

/* Kutu sayisi degisebildigi icin sabit 4 sutun yerine auto-fit:
   kac kutu koyarsaniz koyun satira kendiliginden dagilir, dar
   ekranda alt alta iner. Kutu ekleyip cikarirken CSS'e dokunmayin. */
.rakamlar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
  margin-bottom:clamp(56px,8vw,100px);
}
.rakam{
  position:relative;
  /* Arkadaki hayalet kontur (strong::before) negatif z-index'te duruyor.
     isolation:isolate olmadan kartin KENDI zemininin arkasina duser ve
     tamamen gorunmez olur — burasi bu efektin calismasi icin sart. */
  isolation:isolate;
  /* buyutulmus hayalet kart kenarinda kirpilir, disari tasmaz */
  overflow:hidden;
  /* SOFT: kutu artik cerceveli bir kart gibi degil, zeminden zar zor
     ayrilan bir alan. Sayilarin kendisi one ciksin diye kabin
     kontrasti bilincli olarak dusuruldu. */
  background:rgba(251,244,234,.04);
  border:1px solid rgba(251,244,234,.13);
  border-radius:18px;
  padding:clamp(26px,3.6vw,40px) clamp(18px,2.2vw,30px);
  transition:background .3s ease, border-color .3s ease,
             transform .3s var(--yay), box-shadow .3s var(--yay);
}
.rakam:hover,
.rakam.odakta{
  background:rgba(251,244,234,.08);
  border-color:rgba(245,165,120,.5);
  transform:translateY(-5px);
  box-shadow:0 14px 32px rgba(0,0,0,.16);
}
.rakam strong{
  position:relative;
  display:block; font-family:var(--baslik);
  font-size:clamp(44px,7vw,92px); font-weight:800;
  letter-spacing:-.055em; line-height:1; color:var(--seftali);
}

/* ---- ARKADAKI HAYALET SAYI ----
   Ayni sayinin konturlu, buyutulmus ve asagi kaydirilmis kopyasi.
   Icerigi JS her karede data-hayalet'e yaziyor; boylece sayac
   sayarken arkadaki kontur da onunla birlikte sayiyor.

   Renk paletten disari cikmiyor: dolgu seftali, kontur ayni
   seftalinin soluklastirilmis hali. */
.rakam strong::before{
  content:attr(data-hayalet);
  position:absolute; left:0; top:0; z-index:-1;
  color:transparent;
  /* SOFT: kontur ince ve cok soluk. Kalinlik 1.1px'i gecerse hayalet
     "ikinci bir sayi" gibi okunmaya baslıyor ve one cikiyor; asil
     sayinin golgesi olarak kalmasi icin bu iki deger dusuk tutuldu. */
  -webkit-text-stroke:1.1px rgba(245,165,120,.22);
  /* Agirlikli olarak SAGA kayar, asagi cok az. Buyume noktasi sol ust
     oldugu icin scale(1.16) kutuyu sadece asagi uzatiyor; Y degeri bu
     yuzden neredeyse sifirda tutuldu, yoksa alttaki etiket yazisinin
     uzerine biniyor. */
  transform:translate(.30em,.02em) scale(1.16);
  transform-origin:0 0;
  white-space:nowrap;
  pointer-events:none;
}
/* kart one ciktiginda hayalet de belirginlesir — ama az */
.rakam:hover strong::before,
.rakam.odakta strong::before{
  -webkit-text-stroke-color:rgba(245,165,120,.34);
}

/* etiket: kucuk buyuk-harfli yazi yerine baslik dilinde, iri ve
   beyaz — sayiyla arasindaki agirlik farki daha okunakli.
   Ustteki bosluk genis: hayaletin asagi tasan kismiyla yazi
   arasinda nefes payi birakiyor. */
.rakam span{
  display:block; margin-top:28px;
  font-family:var(--baslik);
  font-size:clamp(15px,1.5vw,19px); font-weight:800;
  letter-spacing:-.02em; text-transform:none;
  color:#fff;
}


/* ---------- VIZYON / MISYON ---------- */

.vm-izgara{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.5vw,28px); }
.vm-kart{
  border:1.5px solid var(--cizgi-acik); border-radius:16px;
  padding:clamp(28px,3.6vw,46px);
  transition:border-color .35s ease, background .35s ease, transform .35s var(--yay);
}
.vm-kart:hover{ border-color:var(--seftali); background:rgba(251,244,234,.06); transform:translateY(-4px); }
.vm-kart .etiket{ font-style:normal; margin-bottom:20px; color:var(--seftali); }
.vm-kart p{
  font-family:var(--baslik);
  font-size:clamp(17px,1.5vw,20px); line-height:1.55;
  color:var(--acik) !important; font-weight:500; letter-spacing:-.015em;
}


/* 14 Agustos 2026: "NEDEN RUBA" bolumu siteden kaldirildi;
   .neden-izgara ve .neden-kart kurallari buradan silindi. */


/* ---------- FAALIYET ALANLARI ---------- */

/* RENK NOTU (14 Agustos 2026): bolumun zemini --krem-2, yani sicak acik
   seftali. Liste once cizgiyle ayrilmis duz satirlardan olusuyordu;
   sicak zemin + soluk gri cizgi + tek renk ikon birlesince her sey ayni
   tonda erimis gorunuyordu. Satirlar beyaz karta alindi, ikonlar renkli
   rozetin icine kondu; boylece zeminle kart arasinda gercek bir kontrast
   olustu. (Rozetler bir ara dort marka rengi arasinda donuyordu; o
   fikir geri alindi, gerekcesi asagida .alan-ikon kuralinin ustunde.) */
.alan-liste{
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.2vw,14px);
}
.alan-liste li{
  display:flex; align-items:center; gap:14px;
  padding:15px 18px;
  background:var(--kart);
  border:1.5px solid rgba(163,93,60,.10);
  border-radius:14px;
  box-shadow:0 2px 10px rgba(120,70,45,.05);
  font-size:clamp(15px,1.3vw,16.5px); font-weight:500;
  color:#3d332c;                       /* notr gri yerine sicak koyu ton */
  transition:transform .35s var(--yay), box-shadow .35s var(--yay),
             border-color .3s ease, color .3s ease;
}
/* 14 Agustos 2026: satir basindaki baklavalarin yerini cizgi ikonlar
   aldi. Ikon dolgusuz ve currentColor ile cizili oldugu icin rengi
   buradaki "color" belirliyor; hover'da metinle birlikte degisiyor. */
/* Ikonun kendisi rozet: SVG'ye dogrudan zemin, kose yuvarlama ve ic
   bosluk veriliyor, bu yuzden HTML'de ayri bir sarmalayici yok. */
/* RENK KARARI (14 Agustos 2026 aksami) — DONEN RENKLER KALDIRILDI.
   Burada dort marka rengi nth-child(4n+1..4) ile sirayla donuyordu.
   Iki sorun vardi:
     1) Liste IKI SUTUN. Dortlu bir dongu iki sutuna dagilinca desen
        capraz dusuyor ve gozde hicbir duzen olusturmuyor — renkler
        rastgele serpistirilmis gibi duruyordu.
     2) Dongunun dorduncu rengi notr griydi (--ink %9). Sicak krem
        zeminde gri, kirli ve olu gorunuyordu.
   Asil mesele su: bu maddeler kategorize DEGIL, duz bir liste.
   Renk hicbir bilgi tasimadigi icin yalnizca gurultu ekliyordu.
   Cozum: tek vurgu rengi. Sicak zemin (--krem-2) uzerinde soguk
   teal, bolume net bir kimlik veriyor ve 15 madde tek bir sistem
   gibi okunuyor. Yeni madde eklerken sira/renk dusunmeye de gerek
   kalmiyor — hepsi ayni kurala bagli. */
.alan-ikon{
  width:42px; height:42px; flex:none;
  padding:10px; box-sizing:border-box;
  border-radius:12px;
  color:var(--teal-derin);
  background:rgba(96,127,131,.13);
  /* ince halka: rozetin kenarini beyaz kartta belirginlestirir */
  box-shadow:inset 0 0 0 1px rgba(96,127,131,.16);
  transition:transform .4s var(--yay), background .3s ease;
}


.alan-liste li:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(120,70,45,.14);
  border-color:transparent;
}
.alan-liste li:hover .alan-ikon{
  transform:scale(1.08);
  background:rgba(96,127,131,.20);
}


/* ---------- REFERANSLAR ----------
   Bolum koyu teal zeminde duruyor; iki krem bolumun arasinda
   vitrin gibi one cikiyor. Kurumlar uc kademe halinde sunuluyor,
   kademe yukseldikce kutu buyuyor.

   Butun izgaralar auto-fit + min(...,100%) kullaniyor: kutu sayisi
   degistiginde satirlar kendiliginden diziliyor, dar ekranda da
   disari tasmiyor. Kutu ekleyip cikarirken CSS'e dokunmayin. */

/* koyu zeminde kiremit vurgu kaybolur, seftaliye cevriliyor */
.bolum-teal h2 em{ color:var(--seftali); }


/* ---- KADEME 1: Cumhurbaskanligi + bakanliklar ---- */

.referans-oz-izgara{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:clamp(14px,1.8vw,22px);
  margin-bottom:clamp(44px,5.5vw,72px);
}
.referans-oz{
  position:relative; overflow:hidden;
  /* ic bosluk kisildi: artan yer plakaya, yani logoya gitti */
  padding:clamp(22px,2.5vw,28px);
  border-radius:20px;
  background:rgba(251,244,234,.085);
  border:1.5px solid var(--cizgi-acik);
  transition:transform .35s var(--yay), background .35s ease,
             border-color .35s ease, box-shadow .35s var(--yay);
}
/* ---- USTTEKI DORT RENKLI SERIT ----
   Renk sirasi logodaki baklavalarin sirasi: teal, kiremit, seftali,
   krem. Uc kademede de ayni; degisen tek sey kalinligi (4 -> 4 -> 3px),
   boylece kartlar ayni aileden oldugu belli olurken kademe farki da
   korunuyor. Serit mutlak konumlu, o yuzden uc kart da position:relative
   ve overflow:hidden olmak zorunda — yoksa yuvarlak koseden tasar. */
.referans-oz::before,
.referans::before,
.referans-cip li::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,
    var(--teal) 0 25%, var(--kiremit) 25% 50%,
    var(--seftali) 50% 75%, var(--krem-2) 75% 100%);
}
.referans-cip li::before{ height:3px; }
.referans-oz:hover{
  transform:translateY(-7px);
  background:rgba(251,244,234,.13);
  border-color:var(--seftali);
  box-shadow:0 22px 48px rgba(0,0,0,.26);
}
/* ---- LOGO PLAKASI ----
   Kurum logolari kendi ozgun renkleriyle duruyor; cogu koyu lacivert
   ya da siyah oldugu icin teal zeminde kaybolurlar. Bu yuzden her logo
   krem bir plakanin uzerine oturuyor — logolara DOKUNULMUYOR, zemin
   degistiriliyor. Plaka yuksekligi sabit, logo icine sigdiriliyor:
   boylece kare (Konya) ve genis (Malatya) logolar ayni gorsel agirlikta
   durur. Yeni logo eklerken seffaf arka planli PNG/SVG kullanin. */

.referans-plaka{
  display:flex; align-items:center; justify-content:center;
  /* parilti ::after ile ciziliyor: konumlanmasi ve plakanin
     disina tasmamasi icin ikisi de gerekli */
  position:relative; overflow:hidden;
  background:var(--acik); border-radius:12px;
  height:162px; padding:11px 13px; margin-bottom:10px;
  transition:transform .35s var(--yay);
}
/* DIKKAT: burada max-width/max-height KULLANILMAZ. Onlar gorseli
   yalnizca kucultur, buyutmez; Istanbul (154px) ve Sisli (190px) gibi
   kucuk dosyalar plakanin ortasinda minik kaliyordu. Kutuyu tamamen
   doldurup olcegi object-fit'e birakiyoruz: contain, en-boy oranini
   koruyarak logoyu plakaya SIGDIRIR — gerekirse buyuterek. */
.referans-plaka img{
  width:100%; height:100%;
  object-fit:contain;
}
.referans-oz:hover .referans-plaka,
.referans:hover .referans-plaka{ transform:scale(1.04); }


/* ---- PLAKA PARILTISI ----
   Kart belirdikten kisa sure sonra plakanin uzerinden bir kez capraz
   isik gecer; logo camli bir cerceve altindaymis hissi verir. Bir kez
   oynar ve durur — surekli donen parilti ucuz durur. Gecikme .reveal
   ile ayni --gec degerini kullanir, boylece kartlarla ayni sirayla
   ilerler. */
.referans-plaka::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:65%;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.92) 48%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-180%);
  pointer-events:none;
}
.reveal.visible .referans-plaka::after{
  /* karttan 260ms sonra: once kart otursun, sonra isik gecsin */
  animation:plaka-parilti 1s cubic-bezier(.3,.6,.3,1) calc(var(--gec,0ms) + 260ms) forwards;
}
@keyframes plaka-parilti{
  from{ transform:translateX(-180%); }
  to  { transform:translateX(320%);  }
}


/* ---- ODAK: hover'in dokunmatik karsiligi ----
   Bilgisayarda kartin uzerine gelince yukseliyor; telefonda hover
   olmadigi icin bu bolum hareketsiz kaliyordu. JS, ekranin ortasina
   en yakin karta .odakta ekler. Yalnizca dokunmatik cihazlarda acilir
   ki masaustunde hover ile cakismasin.
   Secici uc sinifli: .reveal.visible{transform:none} kuralini yenmesi
   gerekiyor, yoksa yukselme hic uygulanmaz. */
@media (hover:none){
  #referanslar .reveal.visible.odakta{
    transform:translateY(-6px) scale(1.012);
  }
  #referanslar .reveal.visible.odakta .referans-plaka{
    box-shadow:0 10px 26px rgba(0,0,0,.22);
  }
  #referanslar .reveal.visible .referans-plaka{
    transition:transform .35s var(--yay), box-shadow .35s ease;
  }
}

/* Kademe indikce plaka alcaliyor: 162 -> 138 -> 114.
   Yukseklik bilerek genis tutuldu: Konya ve Trabzon gibi KARE logolar
   yukseklige gore olceklendigi icin alcak plakada kucuk kaliyordu.
   Karttaki dikey alanin buyuk cogunlugu plakanin: asil vurgu logo.
   Alttaki isim yalnizca tanimlayici bir alt yazi, o yuzden hem punto
   hem de plakayla arasindaki bosluk bilincli olarak kisik. */
.referans-plaka-orta{  height:138px; padding:10px 12px; margin-bottom:8px; border-radius:10px; }
.referans-plaka-kucuk{ height:114px; padding:9px 11px;  margin-bottom:7px; border-radius:9px;  }

/* Belediyelerdeki tur yazisiyla ayni mantik: "T.C." de ismin ustunde
   degil hemen onunde duruyor, "T.C. Cumhurbaskanligi" diye okunuyor. */
.referans-ust{
  display:inline; margin-right:5px;
  font-size:9px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--seftali);
}
/* Isim, logonun alt yazisi olacak kadar kucuk. 12.5px taban
   bilincli bir alt sinir: bundan asagisi telefonda okunakligini
   kaybediyor. Kucuk puntoyu telafi etmek icin renk tam beyaz ve
   harf araligi normale cekildi — sikisik gorunmesin. */
.referans-oz .referans-ad{
  display:inline;
  font-family:var(--baslik);
  font-size:clamp(12.5px,.92vw,13.5px); font-weight:700;
  letter-spacing:0; line-height:1.4; color:#fff;
}


/* ---- Kademe basligi: yaziyi cizgi tamamliyor ---- */

.referans-grup{
  display:flex; align-items:center; gap:13px;
  margin-bottom:22px;
  font-size:12px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(251,244,234,.75) !important;
}
.referans-grup .baklava{ width:12px; height:12px; flex:none; }
.referans-grup::after{
  content:''; flex:1; height:1.5px; background:var(--cizgi-acik);
}


/* ---- KADEME 2: buyuksehir belediyeleri ---- */

.referans-izgara{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(12px,1.5vw,18px);
  margin-bottom:clamp(44px,5.5vw,72px);
}
.referans{
  position:relative; overflow:hidden;
  padding:clamp(16px,1.9vw,22px);
  border-radius:16px;
  background:rgba(251,244,234,.055);
  border:1.5px solid var(--cizgi-acik);
  transition:transform .35s var(--yay), background .35s ease,
             border-color .35s ease;
}
.referans:hover{
  transform:translateY(-5px);
  background:rgba(251,244,234,.11);
}
/* NOT: Burada eskiden 4px'lik RENKLI SOL SERIT vardi (nth-child ile
   seftali/krem/kiremit donusumlu). Ustteki dort renkli serit butun
   kartlara gelince ikisi ayni anda duruyor, kartin sol ust kosesinde
   birbiriyle yarisan iki ayri renk vurgusu olusuyordu. Sol serit
   kaldirildi; kenarlik yeniden her yandan 1.5px. */

/* Sehir adi ve tur yan yana tek satirda okunur: "Istanbul BUYUKSEHIR
   BELEDIYESI". Ikisi de inline; alt alta dizilirken iki satir yer
   kapliyordu, o yer plakaya (logoya) aktarildi. Dar ekranda satir
   basa sararsa tur alt satira gecer, sorun olmaz. */
.referans-sehir{
  display:inline;
  font-family:var(--baslik);
  font-size:clamp(12.5px,.92vw,13.5px); font-weight:700;
  letter-spacing:0; line-height:1.4; color:#fff;
}
.referans-tur{
  display:inline; margin-left:5px;
  font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(251,244,234,.62);
}


/* ---- KADEME 3: ilce belediyeleri ---- */

/* Kademe 2 ile ayni kart dili, bir beden kucugu: dar izgara, alcak
   plaka, ince ic bosluk. Kademe sirasi boyutla okunuyor. */
.referans-cip{
  list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));
  gap:clamp(10px,1.2vw,14px);
}
.referans-cip li{
  position:relative; overflow:hidden;
  padding:clamp(12px,1.4vw,16px);
  border-radius:14px;
  border:1.5px solid var(--cizgi-acik);
  background:rgba(251,244,234,.05);
  transition:transform .3s var(--yay), background .3s ease,
             border-color .3s ease;
}
.referans-cip li:hover{
  transform:translateY(-4px);
  background:rgba(251,244,234,.11);
}
.referans-cip li:hover .referans-plaka{ transform:scale(1.04); }
/* Kademe 3 yazilari bir tik daha kucuk */
.referans-cip .referans-sehir{ font-size:clamp(11.5px,.85vw,12.5px); }
.referans-cip .referans-tur{ font-size:8.5px; margin-top:1px; }


/* NOT: Burada eskiden ".referans-oz img, .referans img" diye bir kural
   vardi; logolari 58px ile sinirliyor ve width/height'i auto'ya
   cekiyordu. Plakalar geldikten sonra islevsiz kaldi, dahasi dosyada
   daha SONRA geldigi icin ".referans-plaka img" kuralini eziyor ve
   logolari plakanin ortasinda minicik birakiyordu. Kaldirildi —
   olculendirmenin tek sahibi artik ".referans-plaka img". */


/* ---- Kapanis notu ---- */
.referans-not{
  margin-top:clamp(30px,3.8vw,48px);
  font-size:clamp(15px,1.3vw,17px);
  color:rgba(251,244,234,.72) !important;
}
.referans-not a{
  color:var(--seftali); font-weight:700;
  border-bottom:1.5px solid transparent;
  transition:border-color .25s ease;
}
.referans-not a:hover{ border-bottom-color:var(--seftali); }


/* ---------- SUREC ---------- */

.surec-izgara{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,26px); }
.surec-kart{
  background:var(--kart);
  border-radius:18px;
  padding:clamp(26px,3vw,36px);
  border-top:6px solid var(--ink);
  transition:transform .35s var(--yay), box-shadow .35s var(--yay);
}
.surec-kart:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(52,52,52,.1); }
.surec-teal{ border-top-color:var(--teal); }
.surec-turuncu{ border-top-color:var(--kiremit); }
.surec-seftali{ border-top-color:var(--seftali); }
.surec-sari{ border-top-color:var(--ink); }
/* 14 Agustos 2026: kartin ust siri. Once solda ikon + sagda adim
   numarasi (01-04) vardi; kullanicinin istegiyle numaralar kaldirildi
   ve ikon kartin ortasina alindi. */
.surec-ust{
  display:flex; justify-content:center;
  margin-bottom:24px;
}
.surec-ikon{
  width:36px; height:36px; flex:none;
  color:var(--kiremit);
  transition:transform .35s var(--yay);
}
/* ikon, kartin ust cizgisiyle ayni renkte.
   Seftali kart hariç: #f5a578 beyaz zeminde ince cizgi olarak
   okunmuyordu, onun ikonu koyu kiremite alindi. */
.surec-teal    .surec-ikon{ color:var(--teal); }
.surec-turuncu .surec-ikon{ color:var(--kiremit); }
.surec-seftali .surec-ikon{ color:var(--kiremit-koyu); }
.surec-sari    .surec-ikon{ color:var(--ink); }

.surec-kart:hover .surec-ikon{ transform:scale(1.08); }

.surec-kart h3{ margin-bottom:14px; }
.surec-kart p{ font-size:15.5px; line-height:1.7; color:var(--ink-2); }


/* ---------- SSS ---------- */

.sss-izgara{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,90px); }
.sss-sol{ position:sticky; top:110px; align-self:start; }
.sss-sol .etiket{ margin-bottom:20px; }
.sss-sol .btn{ margin-top:30px; }
.sss-sag{ border-top:1.5px solid var(--cizgi); }


/* =========================================================
   ILETISIM — sayfanin en dikkat ceken bolumu
   ========================================================= */

.iletisim{
  background:var(--kiremit);
  color:var(--acik);
  padding:clamp(80px,10vw,150px) 0 clamp(70px,8vw,120px);
}

.cta-bas{ margin-bottom:clamp(40px,5vw,64px); }
.cta-bas .etiket{ margin-bottom:22px; }
.cta-bas h2{
  /* 14 Agustos 2026: baslik "Projenizi konusalim."dan "Kapsamli Yapim
     Cozumleri Icin Iletisim"e cevrildi; en uzun satir 10 karakterden
     24 karaktere cikinca eski punto ekrandan tasiyordu. Uzun basligi
     okunakli tutmak icin harf ve satir araligi da gevsetildi.
     Eski deger: clamp(52px,10vw,142px) / -.055em / .92 */
  font-size:clamp(28px,4.4vw,62px); letter-spacing:-.03em; line-height:1.06;
  color:#fff;
}
.cta-metin{
  margin-top:24px; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
}

/* buyuk tiklanabilir iletisim kutulari */
.kanallar{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:clamp(46px,6vw,80px);
}
.kanal{
  display:flex; align-items:center; gap:18px;
  background:var(--krem); color:var(--ink);
  border-radius:18px;
  padding:clamp(20px,2.4vw,28px);
  transition:transform .3s var(--yay), box-shadow .3s var(--yay), background .3s ease;
}
.kanal:hover{
  transform:translateY(-5px);
  background:#fff;
  box-shadow:0 18px 40px rgba(52,52,52,.22);
}
.kanal-ikon{
  width:50px; height:50px; flex:none; border-radius:50%;
  background:var(--kiremit); color:#fff;
  display:grid; place-items:center;
}
.kanal-ikon svg{ width:23px; height:23px; }
.kanal-yazi{ min-width:0; }
.kanal-yazi i{
  display:block; font-style:normal;
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soluk); margin-bottom:4px;
}
.kanal-yazi strong{
  display:block; font-family:var(--baslik);
  font-size:clamp(15.5px,1.5vw,19px); font-weight:800; letter-spacing:-.03em;
  line-height:1.25; overflow-wrap:anywhere;
}
.kanal-ok{
  margin-left:auto; flex:none;
  font-size:22px; color:var(--kiremit);
  transition:transform .3s var(--yay);
}
.kanal:hover .kanal-ok{ transform:translateX(5px); }

.iletisim-izgara{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,70px); }

.iletisim-yan h3{
  font-family:var(--metin);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-bottom:10px;
}
.iletisim-yan h3 + .adres{ margin-bottom:34px; }
.adres{ font-size:17.5px; line-height:1.7; color:#fff; }
/* ---- LOGONUN DORT BAKLAVASI ----
   Bunlar logonun birebir kopyasi olmak zorunda; renk sirasi
   teal -> kiremit -> seftali -> krem olarak SABIT.

   Kiremit zeminde kiremit baklava kayboluyordu. Cozum baklavanin
   rengini degistirmek DEGIL (o zaman logo bozulur), altina acik bir
   zemin koymak. Konturlar da gercek logodaki gibi koyu. */
.yan-baklavalar{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:26px;
  background:var(--krem);
  padding:13px 16px;
  border-radius:14px;
}
.yan-baklavalar .baklava{
  width:22px; height:22px;
  box-shadow:0 0 0 1.5px var(--ink);      /* logodaki koyu kontur */
}
/* bolum bazli renk istisnalari buraya islemesin — logo sirasi sabit */
.yan-baklavalar .baklava.b-teal   { background:var(--teal);    }
.yan-baklavalar .baklava.b-turuncu{ background:var(--kiremit); }
.yan-baklavalar .baklava.b-seftali{ background:var(--seftali); }
.yan-baklavalar .baklava.b-sari   { background:var(--krem-2);  }

/* form: turuncu zemin uzerinde acik kart */
.form{
  background:var(--krem);
  color:var(--ink);
  border-radius:22px;
  padding:clamp(24px,3.4vw,42px);
  display:flex; flex-direction:column; gap:18px;
}
.form-baslik{ margin-bottom:6px; }
.form label{ display:block; }
.form label > span{
  display:block; margin-bottom:8px;
  font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--soluk);
}
.form label > span em{ font-style:normal; opacity:.7; }
.form input,
.form textarea{
  width:100%;
  background:#fff;
  border:1.5px solid var(--cizgi);
  border-radius:12px;
  padding:14px 16px;
  font-family:var(--metin); font-size:16px; color:var(--ink);
  transition:border-color .25s ease, box-shadow .25s ease;
  resize:vertical;
}
.form input::placeholder,
.form textarea::placeholder{ color:#a49b91; }
.form input:focus,
.form textarea:focus{
  outline:none; border-color:var(--kiremit);
  box-shadow:0 0 0 4px rgba(226,87,30,.15);
}
.form .btn{ margin-top:6px; }

.form-not{
  font-size:14px; line-height:1.65;
  padding:14px 16px; border-radius:12px; border:1.5px solid;
}
.form-not.ok{ color:#0d6b3f; border-color:#9fdcb9; background:#e7f7ee; }
.form-not.err{ color:#9c2a12; border-color:#f2b6a2; background:#fdeae4; }


/* ---------- HER ZAMAN DURAN YUZEN DUGMELER ----------
   14 Agustos 2026: WhatsApp'in ustune Instagram eklendi. Sabit konum
   artik tek tek dugmelerde degil, ortak sarmalayicida duruyor; boylece
   ileride ucuncu bir dugme eklenirse hicbir "bottom" hesabi gerekmiyor.
   Dugmelerin kendisi position:relative kaldi — WhatsApp'in nabiz halkasi
   (.wa-dugme::before, inset:0) buna dayaniyor. */

.yuzen-dugmeler{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}

.wa-dugme,
.ig-dugme{
  position:relative;
  display:flex; align-items:center; gap:10px;
  color:#fff;
  padding:13px 20px; border-radius:999px;
  font-family:var(--baslik); font-size:15px; font-weight:700;
  transition:transform .3s var(--yay), box-shadow .3s var(--yay);
}
.wa-dugme{ background:var(--whatsapp); box-shadow:0 10px 28px rgba(37,211,102,.4); }
.ig-dugme{ background:var(--instagram); box-shadow:0 10px 28px rgba(193,53,132,.38); }

.wa-dugme:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(37,211,102,.5); }
.ig-dugme:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(193,53,132,.5); }

.wa-dugme svg,
.ig-dugme svg{ width:22px; height:22px; flex:none; }


/* ---------- HARITA ----------
   TELEFONDA GORUNMEME SORUNU — iki nedeni birden vardi:
   1) Kapsayicidaki "filter" iOS Safari'de iframe'i bos/beyaz birakiyor
      (filter yeni bir katman acar, WebKit iframe'i o katmana cizemiyor).
      Bu yuzden filter tamamen kaldirildi.
   2) "overflow:hidden + border-radius" ile iframe kirpmak da ayni
      tarayicida icerigi yok edebiliyor. Artik kose yuvarlamayi
      dogrudan iframe'in kendisi yapiyor, kapsayici kirpmiyor.
   Yukseklik hem CSS hem HTML attribute'u ile veriliyor; CSS gec
   yuklenirse bile alan cokmuyor. */
.harita{
  margin-top:30px;
  position:relative;
  border-radius:12px;
  border:1.5px solid rgba(251,244,234,.35);
  line-height:0;                 /* iframe altinda bosluk kalmasin */
  background:rgba(0,0,0,.12);    /* iframe yuklenene kadar bos beyaz akmasin */
  min-height:210px;
}
.harita iframe{
  display:block; width:100%; height:250px; border:0;
  border-radius:10.5px;          /* kirpma yerine kendi kosesi */
}

/* Gomme harita engellenirse (bazi mobil tarayicilar/gizlilik modlari)
   kullanicinin konuma ulasmasi bu baglantiyla garanti altinda. */
.harita-baglanti{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:12px;
  font-size:14.5px; font-weight:600;
  color:var(--acik);
  border-bottom:1.5px solid rgba(251,244,234,.45);
  padding-bottom:2px;
  transition:color .25s ease, border-color .25s ease;
}
.harita-baglanti:hover{ color:#fff; border-color:#fff; }
.harita-baglanti svg{ width:17px; height:17px; flex:none; }

/* ---------- SOSYAL MEDYA ---------- */
.sosyal{ display:flex; gap:12px; margin-top:26px; }
.sosyal a{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid rgba(251,244,234,.4);
  color:var(--acik);
  transition:background var(--gecis,.25s) ease, color .25s ease,
             border-color .25s ease, transform .25s var(--yay);
}
.sosyal a svg{ width:19px; height:19px; }
.sosyal a:hover{
  background:var(--krem-2); color:var(--kiremit);
  border-color:var(--krem-2); transform:translateY(-3px);
}
.sosyal a:focus-visible{ outline:3px solid var(--krem-2); outline-offset:3px; }

/* ---------- FORMDAKI WHATSAPP DUGMESI ---------- */
.btn-wa{
  background:var(--whatsapp); color:#fff;
  margin-top:-8px;               /* Gonder butonuna yaklassin */
  gap:9px;
}
.btn-wa:hover{ background:#1eb457; }
.btn-wa svg{ width:19px; height:19px; flex:none; }

/* ---------- ALT BILGI ---------- */

footer{
  background:var(--ink); color:var(--acik);
  padding:clamp(50px,6vw,80px) 0 34px;
}
.footer-ust{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:36px; flex-wrap:wrap;
  padding-bottom:clamp(36px,5vw,60px);
}
.footer-menu{ display:flex; flex-wrap:wrap; gap:12px 30px; }
.footer-menu a{ font-size:15px; color:rgba(251,244,234,.7); transition:color .25s ease; }
.footer-menu a:hover{ color:var(--seftali); }

.footer-alt{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:26px; border-top:1.5px solid var(--cizgi-acik);
  font-size:12.5px; color:rgba(251,244,234,.6);
}


/* ---------- KAYDIRINCA BELIRME (.reveal) ----------
   Baslangicta biraz asagida ve saydam durur; IntersectionObserver
   ekrana girdiginde .visible ekler. --gec degerini JS verir, boylece
   ayni anda goruntuye giren kardes ogeler sirayla gelir. */

/* DIKKAT — "html.js" on kosulu (14 Agustos 2026):
   Gizleme yalnizca script.js yuklendiginde uygulanir; o dosya <html>'e
   "js" sinifini ekliyor. Dosya eksik kalir ya da icinde hata olursa
   .visible hicbir zaman eklenmez ve bu kural olmadan sayfa bombos
   gorunur. Yeni bir belirme cesidi yazarken bu on kosulu koru. */
:where(html.js) .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease var(--gec,0s),
             transform .7s var(--yay) var(--gec,0s);
}
.reveal.visible{ opacity:1; transform:none; }


/* ---------- BELIRME CESITLERI ----------
   .reveal ile birlikte yazilir:  <article class="kart reveal r-olcek">
   Hepsi ayni sureyi ve ayni --gec gecikmesini kullanir; degisen
   sadece baslangic durumudur. Olculu tutuldu: mesafeler kisa,
   buyume orani dusuk — hareket fark edilir ama okumayi bolmez.

   r-sol / r-sag : yandan kayar. Yan yana duran iki blokta
                   (bilgi + form gibi) hangisinin nereden geldigini
                   belli eder. Soldaki r-sol, sagdaki r-sag alir.
   r-olcek       : hafifce buyuyerek gelir. Kartlar ve gorseller icin.
   r-perde       : asagidan yukari suzulur. Bolum basliklari icin.
   r-cizgi       : soldan kayarak gelir. Liste maddeleri ve ayirici
                   satirlar icin — yazi soldan akiyormus gibi durur.
                   (Bu ikisi eskiden clip-path ile kirpilarak
                   aciliyordu; asagidaki nota bakin.) */

/* Hepsi ":where(html.js)" on kosuluna bagli — yukaridaki .reveal
   kuralinin ayni gerekcesiyle. :where() kullanilmasinin sebebi,
   on kosulun secici agirligini artirmamasi; boylece asagidaki
   .visible kurallari eskisi gibi ustte kalabiliyor. */
:where(html.js) .reveal.r-sol{   transform:translateX(-26px); }
:where(html.js) .reveal.r-sag{   transform:translateX(26px); }
:where(html.js) .reveal.r-olcek{ transform:scale(.955); }

/* 14 Agustos 2026 - IKINCI VE SON DUZELTME: clip-path TAMAMEN KALKTI.
   Bu iki cesit eskiden metni clip-path ile kirparak aciyordu. Kirpma
   calismazsa metin KALICI OLARAK gorunmez kalir; sayfada bos delik
   olusur. Bu, bir kere macOS'ta (gecersiz inset(-2px) yuzunden), bir
   kere de bazi Windows makinelerinde (surucu bagimli kirpma hatasi)
   basimiza geldi. Ikisinde de kurban ayniydi: bolum basliklari
   (r-perde, 6 adet) ve liste maddeleri (r-cizgi, 15 adet).
   Artik ikisi de digerleri gibi yalnizca opacity + transform
   kullaniyor. Bu ikisi CSS'in en temel, en genis destekli
   ozellikleri: calismazlarsa oge son halinde gorunur, yani en kotu
   ihtimalde animasyon atlanir -- metin asla kaybolmaz.
   YENI BIR BELIRME CESIDI YAZARKEN METNI KIRPAN HICBIR OZELLIK
   (clip-path, mask, overflow ile gizleme) KULLANMA. */
:where(html.js) .reveal.r-perde{
  /* eski "perde" hissinin yerine: asagidan yukari suzulerek belirir */
  transform:translateY(20px);
  transition:opacity .6s ease var(--gec,0s),
             transform .8s var(--yay) var(--gec,0s);
}

:where(html.js) .reveal.r-cizgi{
  /* eski "soldan saga silinme" hissinin yerine: soldan kayarak gelir */
  transform:translateX(-18px);
  transition:opacity .45s ease var(--gec,0s),
             transform .75s var(--yay) var(--gec,0s);
}

/* .visible geldiginde hepsi ayni son duruma oturur.
   Uc sinifli secici, yukaridaki iki sinifli .reveal.visible
   kuralindan once degil sonra gelmek zorunda. */
.reveal.visible.r-sol,
.reveal.visible.r-sag,
.reveal.visible.r-olcek,
.reveal.visible.r-perde,
.reveal.visible.r-cizgi{ transform:none; }

/* Not: burada eskiden clip-path bitis kurallari ve harflerin alt
   cikintisini kurtarmak icin bir padding/margin hilesi vardi.
   clip-path kalktigi icin ikisine de gerek kalmadi -- yukaridaki
   ortak "transform:none" satiri iki cesidi de acmaya yetiyor. */


/* =========================================================
   CANLILIK KATMANI
   Buradaki hareketlerin HICBIRI hover'a bagli degil. Sebebi:
   telefonda hover yok, dolayisiyla hover'la yazilan her efekt
   ziyaretcilerin yarisinda hic gorunmuyor. Bu bolumdeki her sey
   uc kaynaktan beslenir ve ucu de her cihazda calisir:

     1) --ilerleme / --hero-p / --hero-o
        JS'in kaydirma sirasinda body'ye yazdigi degerler
     2) .visible
        oge ekrana girdiginde IntersectionObserver'in ekledigi sinif
     3) .odakta
        dokunmatik cihazda ekranin ortasina en yakin karta verilir —
        masaustundeki hover'in telefon karsiligi

   Sureli (infinite) animasyon sayisi bilincli olarak az tutuldu:
   sadece iki tanesi surekli doner (buton pariltisi ve WhatsApp
   halkasi). Gerisi bir kez oynar ve durur; yoksa sayfa okunmaz olur.
   ========================================================= */

/* ---------- 1) SAYFA ILERLEME CUBUGU ----------
   Sayfanin en ustunde ince bir seride dort marka rengi akar,
   kaydirdikca dolar. z-index 110: menunun (100) ustunde,
   acilis perdesinin (200) altinda. */
.ilerleme{
  position:fixed; top:0; left:0; right:0; z-index:110;
  height:3px;
  background:linear-gradient(90deg,
    var(--teal) 0%, var(--kiremit) 38%, var(--seftali) 72%, var(--krem-2) 100%);
  transform:scaleX(var(--ilerleme,0));
  transform-origin:0 50%;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s ease;
}
/* en ustteyken cubuk gizli durur, sayfa kaydirilinca belirir */
body.kaydirildi .ilerleme{ opacity:1; }


/* ---------- 2) GIRIS BOLUMUNDE DERINLIK (parallax) ----------
   Arka plan (video + yedek fotograf) sayfadan YAVAS hareket eder,
   yani asagi inerken geride kalir; renk lekeleri ters yone kayar.
   Ikisi arasindaki hiz farki sahneye derinlik veriyor.

   scale(1.18) sart: katman kaydiginda kenarda bosluk acilmasin diye
   bastan buyutulur. translate3d ekran kartina devreder, telefonda
   da takilmadan akar. */
.hero-video,
.hero-foto::before{
  transform:translate3d(0, calc(var(--hero-p,0) * 1px), 0) scale(1.18);
  will-change:transform;
}
.hero-lekeler{
  transform:translate3d(0, calc(var(--hero-p,0) * -.55px), 0);
}
/* yazi bloğu asagi inerken hafifce yukari suzulup soluyor —
   hero sabit durmak yerine sayfaya "teslim ediyor" */
.hero-ic{
  opacity:var(--hero-o,1);
  transform:translate3d(0, calc(var(--hero-p,0) * -.5px), 0);
}


/* ---------- 3) KARTLARDAN GECEN ISIK ----------
   Kart ekrana girip yerine oturduktan ~0.35sn sonra uzerinden bir
   kez isik gecer. Referans plakalarindaki pariltinin ayni mantigi,
   bu kez butun kartlara yayilmis hali. Tek seferlik: donguye
   girmiyor, dikkat dagitmiyor. */
.surec-kart,
.vm-kart,
.kanal{ position:relative; overflow:hidden; }

.surec-kart::after,
.vm-kart::after,
.kanal::after{
  content:''; position:absolute; top:0; bottom:0; left:0;
  width:45%;
  pointer-events:none;
  opacity:0;
  transform:translateX(-160%) skewX(-14deg);
}
/* acik zeminli kartlarda beyaz isik gorunmez — seftali kullaniliyor */
.surec-kart::after,
.kanal::after{
  background:linear-gradient(100deg,
    rgba(245,165,120,0) 0%, rgba(245,165,120,.34) 50%, rgba(245,165,120,0) 100%);
}
/* koyu teal zeminli vizyon/misyon kartlarinda krem isik */
.vm-kart::after{
  background:linear-gradient(100deg,
    rgba(251,244,234,0) 0%, rgba(251,244,234,.20) 50%, rgba(251,244,234,0) 100%);
}

.reveal.visible.surec-kart::after,
.reveal.visible.vm-kart::after,
.reveal.visible.kanal::after{
  animation:kart-isik 1.15s ease calc(var(--gec,0s) + .35s) 1;
}
@keyframes kart-isik{
  from{ opacity:0; transform:translateX(-160%) skewX(-14deg); }
  35% { opacity:1; }
  to  { opacity:0; transform:translateX(360%)  skewX(-14deg); }
}


/* ---------- 4) SUREC KARTLARININ RENKLI SERIDI ----------
   Kart gorunmeden once ust seridi soluk gri; gorununce kendi
   marka rengine doner. Dort kart kademeli geldigi icin renkler de
   sirayla yanar. */
.surec-kart{
  transition:transform .35s var(--yay), box-shadow .35s var(--yay),
             border-top-color .75s ease calc(var(--gec,0s) + .2s);
}
.surec-kart:not(.visible){ border-top-color:var(--cizgi); }


/* ---------- 5) BAKLAVALARIN YERINE OTURMASI ----------
   Bolum etiketlerindeki ve faaliyet listesindeki baklava, blok
   ekrana girince kucuk ve donuk baslayip donerek yerine oturur.
   Logonun "dogus" hareketinin kucuk olcekli tekrari.

   DIKKAT: fill-mode YOK. Animasyon bitince oge kendi temel
   transform'una (rotate(45deg)) doner; boylece bu baklavalarin
   hover'daki buyume gecisi bozulmaz. "backwards" sadece gecikme
   suresince ilk kareyi tutmak icin. */
.reveal.visible .etiket .baklava{
  animation:baklava-yerles .85s var(--yay) var(--gec,0s) 1 backwards;
}

/* Faaliyet listesindeki ikonlar satirla birlikte belirir: satir soldan
   acilirken ikon da yerine oturur. Eskiden burada da baklava vardi ve
   donerek gelirdi; ikon donmez, sadece buyuyerek acilir.
   14 Agustos 2026: bu iki kural bir ara tek secici listesinde birlesmisti,
   o yuzden etiket baklavalari donme animasyonunu kaybetmisti — ayrildi. */
.alan-liste li.reveal.visible .alan-ikon{
  animation:ikon-yerles .7s var(--yay) var(--gec,0s) 1 backwards;
}
@keyframes ikon-yerles{
  0%  { transform:scale(.55); opacity:0; }
  100%{ transform:scale(1);   opacity:1; }
}
@keyframes baklava-yerles{
  0%  { transform:rotate(45deg)  scale(.15); opacity:0; }
  55% { transform:rotate(225deg) scale(1.3); opacity:1; }
  100%{ transform:rotate(405deg) scale(1);   opacity:1; }
}


/* ---------- 6) DOKUNMATIKTE ODAK ----------
   Telefonda kaydirirken ekranin ortasindaki kart hafifce one
   cikar. Masaustundeki hover ile ayni gorunum; JS yalnizca
   (hover:none) cihazlarda .odakta veriyor, ikisi cakismiyor. */
.surec-kart.odakta{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(52,52,52,.1); }

.vm-kart.odakta{
  border-color:var(--seftali);
  background:rgba(251,244,234,.06);
  transform:translateY(-4px);
}
.kanal.odakta{
  transform:translateY(-5px);
  background:#fff;
  box-shadow:0 18px 40px rgba(52,52,52,.22);
}
.kanal.odakta .kanal-ok{ transform:translateX(5px); }

.alan-liste li.odakta{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(120,70,45,.14);
  border-color:transparent;
}
.alan-liste li.odakta .alan-ikon{ transform:scale(1.08); }

.akor-sade.odakta .akor-bas{ color:var(--kiremit); }


/* ---------- 7) BUTONDAN GECEN ISIK ----------
   Ana cagri butonu (turuncu) belirli araliklarla parlar. Sayfadaki
   iki surekli animasyondan biri; arasi uzun tutuldu ki goz yormasin. */
.btn-turuncu{ position:relative; overflow:hidden; }
.btn-turuncu::after{
  content:''; position:absolute; top:0; bottom:0; left:0;
  width:40%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.32) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-200%) skewX(-16deg);
  pointer-events:none;
  animation:btn-isik 5.5s ease-in-out infinite;
}
@keyframes btn-isik{
  0%,  62%{ transform:translateX(-200%) skewX(-16deg); }
  85%,100%{ transform:translateX(400%)  skewX(-16deg); }
}


/* ---------- 8) WHATSAPP DUGMESINDE NABIZ ----------
   Sabit duran dugmenin etrafinda yesil bir halka acilip soner.
   Telefonda ekranin surekli gorunen tek ogesi oldugu icin
   hareketi burada tutmak sayfayi yormuyor. */
.wa-dugme::before,
.ig-dugme::before{
  content:''; position:absolute; inset:0;
  border-radius:999px;
  animation:wa-nabiz 2.8s ease-out infinite;
  pointer-events:none;
}
.wa-dugme::before{ border:2px solid var(--whatsapp); }
/* Instagram'in zemini gradyan; halkaya kenarlik olarak gradyan
   verilemedigi icin gecisin orta tonu (pembe-kirmizi) kullanildi.
   14 Agustos 2026: once iki halka sirayla atsin diye gecikme
   verilmisti, kullanici es zamanli olmasini istedi — gecikme
   kaldirildi, ikisi ayni suredeki ayni animasyonu paylasiyor. */
.ig-dugme::before{ border:2px solid #dc2743; }
@keyframes wa-nabiz{
  0%      { transform:scale(1);    opacity:.55; }
  70%,100%{ transform:scale(1.28); opacity:0; }
}


/* ---------- 9) BOLUM BASLIKLARINDA VURGU ----------
   h2 icindeki <em> (kiremit renkli kelime) baslik ekrana girince
   altindan bir cizgi cekilerek isaretlenir. */
.bolum-bas h2 em,
.cta-bas h2 em,
.sss-sol h2 em{ position:relative; }
.bolum-bas h2 em::after,
.cta-bas h2 em::after,
.sss-sol h2 em::after{
  content:''; position:absolute; left:0; right:0; bottom:.04em;
  height:.07em; background:currentColor; opacity:.32;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .9s var(--yay) calc(var(--gec,0s) + .35s);
}
.reveal.visible h2 em::after{ transform:scaleX(1); }


/* =========================================================
   DUYARLI DUZEN
   ========================================================= */

/* menude 7 baslik var; dar masaustunde araliklar sikilastirilir */
/* Menuye "Referanslar" eklenince satir daraldi; kucultme bir kademe
   erken basliyor ki baglantilar alt satira dusmesin. */
@media (max-width:1330px){
  .menu{ gap:24px; }
  .menu > a{ font-size:14.5px; }
}
@media (max-width:1200px){
  .menu{ gap:20px; }
  .menu > a{ font-size:14px; }
  .header-ic{ gap:18px; }
}
@media (max-width:1080px){
  .menu{ gap:16px; }
  .menu > a{ font-size:13.5px; }
  .header-btn{ padding:10px 18px; font-size:13.5px; }
  .kanallar{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .hakkinda-izgara,
  .sss-izgara,
  .iletisim-izgara{ grid-template-columns:1fr; }
  .hakkinda-sol,
  .sss-sol{ position:static; }
  .surec-izgara{ grid-template-columns:1fr 1fr; }
  /* .rakamlar burada ayarlanmiyor: auto-fit zaten kendi kendine diziliyor */
  .alan-liste{ grid-template-columns:1fr; }
  .vm-izgara{ grid-template-columns:1fr; }
  .akor-ozet{ display:none; }
  .akor-bas{ grid-template-columns:auto 1fr auto; }
  /* dar ekranda sahne gorseli yazinin altina duser */
  .akor-duzen{ grid-template-columns:1fr; }
  .akor-gorsel{ max-width:460px; }
}

@media (max-width:820px){
  .header-btn{ display:none; }
  .hamburger{ display:block; }

  /* "Teklif alin" dusunce dil secici hamburger'in soluna gecer.
     Mobil menu tam ekran acildiginda zemin krem oluyor; dugme
     o an koyu kalmali, bunu header.menu-acik kurali sagliyor. */
  .header-ic{ gap:12px; }
  .dil{ margin-left:auto; }

  /* tam ekran mobil menu */
  .menu{
    position:fixed; inset:0;
    background:var(--krem);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:0; padding:92px var(--kenar) 48px;
    /* kisa ekranlarda liste tasarsa kaydirilabilsin */
    overflow-y:auto; overscroll-behavior:contain;
    opacity:0; visibility:hidden;
    transform:translateY(-14px);
    transition:opacity .4s ease, transform .5s var(--yay), visibility .4s;
  }
  .menu.acik{ opacity:1; visibility:visible; transform:none; }
  .menu > a{
    width:100%; flex:none; padding:15px 0;
    border-bottom:1.5px solid var(--cizgi);
    font-family:var(--baslik);
    font-size:clamp(22px,6.4vw,32px); font-weight:800; letter-spacing:-.04em;
  }
  .menu > a::after{ display:none; }
  .menu-tel{
    display:block; border-bottom:none !important;
    margin-top:26px;
    font-family:var(--metin) !important;
    font-size:16px !important; font-weight:700 !important; letter-spacing:.04em !important;
    color:var(--kiremit);
  }
}

@media (max-width:620px){
  .dil-dugme{ padding:8px 11px; font-size:12.5px; gap:5px; }
  .dil-menu{ min-width:112px; padding:8px; }
  .dil-menu button{ padding:10px 13px; font-size:13px; }
  .logo-img{ height:38px; }
  .logo-kutu{ padding:10px 13px; }
  .logo-kutu img{ height:44px; }
  .hero{ padding-top:120px; }
  .hero-alt{ align-items:flex-start; }
  .hero-butonlar{ width:100%; }
  .hero-butonlar .btn{ flex:1; }
  .surec-izgara{ grid-template-columns:1fr; }
  .harita{ min-height:190px; }
  .harita iframe{ height:210px; }
  .akor-bas{ gap:12px; padding:20px 2px; }
  .footer-ust{ flex-direction:column; }
  .footer-alt{ flex-direction:column; gap:8px; }
  .cip-liste{ padding-bottom:28px; }
  /* dar ekranda logo plakalari alcalir, kartlar cok uzamasin */
  .referans-plaka{       height:132px; padding:10px 12px; margin-bottom:9px; }
  .referans-plaka-orta{  height:114px; padding:9px 11px;  margin-bottom:7px; }
  .referans-plaka-kucuk{ height:96px;  padding:8px 10px;  margin-bottom:6px; }
  /* Dar ekranda yazilar gizlenir, iki dugme de yuvarlak ikona doner.
     14 Agustos 2026: bu kural eskiden yalnizca WhatsApp'i kapsiyordu;
     Instagram eklenince telefonda yazili ve genis kalip ekranin
     sagina tasiyordu. Konum bilgisi de dugmelerden alinip ortak
     sarmalayiciya verildi — dugmeler artik position:relative. */
  .yuzen-dugmeler{ right:16px; bottom:16px; gap:10px; }
  .wa-dugme,
  .ig-dugme{ padding:15px; }
  .wa-dugme span,
  .ig-dugme span{ display:none; }
}


/* ---------- HAREKET AZALTMA TERCIHI ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* animasyonlar kapali: her sey dogrudan son halinde gorunur.
     Tek satir yetiyor -- artik hicbir cesit metni kirpmiyor. */
  .reveal{ opacity:1; transform:none; }
  /* Plaka pariltisi tamamen kapanir — yukaridaki * kurali sureyi
     zaten kisiyor ama gecikme sonunda tek karelik bir parlama
     birakiyordu; ::after burada bastan gizleniyor. */
  .reveal.visible .referans-plaka::after{ animation:none; opacity:0; }
  /* DORT ELMAS: markanin kendisi oldugu icin burada da oynar, ama
     kisaltilir (1.5sn -> 0.9sn) ve gecikmeler silinir, yani dordu
     birlikte acilir. Yeni koreografide yerlestikten sonra zaten
     surekli hareket yok, o yuzden kapatilacak bir salinim da yok.

     Tamamen durdurmak isterseniz asagidaki uc kuralin yerine
     sunlari yazin:
       body.hazir .elmas-kutu{ animation:none !important; opacity:1; transform:none; }
       body.hazir .elmas{ animation:none !important; transform:none; }
       body.hazir .ruba-yazi span{ animation:none !important; opacity:1; transform:none; }
     NOT: yukaridaki * kuralindaki !important'lari gecmek icin
     kisayol degil, uzun yazim kullanilmak zorunda. */
  body.hazir .elmas-kutu{
    animation-name:baklava-ac !important;
    animation-duration:.9s !important;
    animation-timing-function:var(--yay) !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    animation-fill-mode:forwards !important;
  }
  body.hazir .elmas{
    animation-name:baklava-don !important;
    animation-duration:.9s !important;
    animation-timing-function:var(--yay) !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    animation-fill-mode:forwards !important;
  }
  body.hazir .ruba-yazi span{
    animation-name:harf-gel !important;
    animation-duration:.5s !important;
    animation-timing-function:var(--yay) !important;
    animation-delay:var(--gec) !important;
    animation-iteration-count:1 !important;
    animation-fill-mode:forwards !important;
  }
  .hero-baslik .satir > span{ transform:none; }
  .hero-etiket,
  .hero-metin,
  .hero-butonlar,
  .hero-kaydir{ opacity:1; transform:none; }

  /* kayan seritler tasarimin ana ogesi oldugu icin burada da calismaya
     devam eder, sadece cok daha yavas akar. donen baklavalar kapatilir. */
  .serit-ray{
    animation-duration:75s !important;
    animation-iteration-count:infinite !important;
  }
  .serit-ters .serit-ray{ animation-duration:90s !important; }
  .serit-grup b{ animation:none !important; }

  /* ---- CANLILIK KATMANI: kapatilmaz, yavaslatilir ----
     Yukaridaki * kurali butun sureleri .01ms'ye indiriyor. O haliyle
     bu efektler "tek karelik parlama" olarak kaliyordu; asagida
     sureleri geri veriliyor ama yavas ve yumusak degerlerle.
     Amac: hareket azaltma tercihi acikken de sayfa olu gorunmesin. */

  /* kartlardan gecen isik: bir kez, cok yavas */
  .reveal.visible.surec-kart::after,
  .reveal.visible.vm-kart::after,
  .reveal.visible.kanal::after{
    animation-name:kart-isik !important;
    animation-duration:2.4s !important;
    animation-delay:.4s !important;
    animation-iteration-count:1 !important;
  }

  /* faaliyet ikonlari: gecikmesiz, tek seferde yerine oturur */
  .alan-liste li.reveal.visible .alan-ikon{
    animation-name:ikon-yerles !important;
    animation-duration:1s !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    animation-fill-mode:backwards !important;
  }

  /* baklavalarin yerine oturmasi: donmeden, sadece buyuyerek */
  .reveal.visible .etiket .baklava{
    animation-name:baklava-sakin !important;
    animation-duration:1.2s !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    animation-fill-mode:backwards !important;
  }

  /* butondan gecen isik: arasi iyice acilir */
  .btn-turuncu::after{
    animation-name:btn-isik !important;
    animation-duration:14s !important;
    animation-iteration-count:infinite !important;
  }

  /* WhatsApp ve Instagram halkalari: yavas nefes alir, ikisi birlikte */
  .wa-dugme::before,
  .ig-dugme::before{
    animation-name:wa-nabiz !important;
    animation-duration:6s !important;
    animation-delay:0s !important;
    animation-iteration-count:infinite !important;
  }

  /* sahne spotlari: cok yavas, aradaki fark azaltilmis halde surer */
  .akor-gorsel .spot{
    animation-name:spot-parla !important;
    animation-duration:9s !important;
    animation-iteration-count:infinite !important;
  }
  .akor-gorsel .spot-2{ animation-delay:3s !important; }
  .akor-gorsel .spot-3{ animation-delay:6s !important; }

  /* film makaralari: doner ama cok agir, donusu fark edilir olmaktan cikar */
  .akor-gorsel .makara{
    animation-name:makara-don !important;
    animation-duration:40s !important;
    animation-iteration-count:infinite !important;
  }

  /* baslik altindaki cizgi: yavasca cekilir */
  .reveal.visible h2 em::after{
    transition-duration:1.6s !important;
    transition-delay:.3s !important;
  }

  /* Telefonda ekranin ortasindaki kartin one cikmasi (.odakta)
     bu tercihte de calisiyor — kapatilinca sayfa tamamen olu
     kaliyordu. Yalnizca gecisi uzatiliyor ki hareket ani olmasin. */
  .surec-kart,
  .vm-kart,
  .kanal,
  .rakam,
  .alan-liste li,
  .kanal-ok,
  .alan-ikon{
    transition-duration:.55s !important;
  }

  /* Parallax ve ilerleme cubugu zaten gecise degil, dogrudan
     kaydirma degerine bagli — burada dokunulmalari gerekmiyor.
     JS parallax siddetini bu tercihte kendisi yariya indiriyor. */
}

/* hareket azaltma tercihi icin sakin baklava karesi: donme yok,
   sadece belirip normal boyutuna oturur. */
@keyframes baklava-sakin{
  0%  { transform:rotate(45deg) scale(.5); opacity:0; }
  100%{ transform:rotate(45deg) scale(1);  opacity:1; }
}


/* =========================================================
   SADE MOD  (html.sade)  -- 14 Agustos 2026
   =========================================================
   Sinifi script.js veriyor: az cekirdekli, az bellekli ya da veri
   tasarrufu acik cihazlarda. Amac, sayfayi zayif makinede
   kilitleyen SUREKLI DONEN ne varsa durdurmak. Bir kez oynayip
   biten acilis animasyonlarina (.reveal) dokunulmaz -- onlar
   kaydirma sirasinda yuk olusturmaz, sayfayi da bos birakmaz.

   Neden ayri bir mod: bu efektlerin hepsini herkes icin silmek
   tasarimi fakirlestirirdi; guclu makinede hicbir sorun cikarmiyor
   ve olcumde de gorunmuyorlar. Yuk yalnizca zayif cihazda sorun,
   o yuzden karar cihaza gore veriliyor.

   Olcut kasten gevsek tutuldu: yanlislikla sade moda dusen guclu
   bir makine hicbir sey kaybetmez, ama donan bir sayfa ziyaretciyi
   kaybettirir. (Ayni gerekce arka plan videosu icin de gecerli,
   bkz. script.js -> zayifCihaz.)
   ========================================================= */
html.sade .leke{ animation:none; }
html.sade .hero-kaydir svg{ animation:none; }
html.sade .serit-ray{ animation:none; }   /* kayan serit (iki yon de bu sinifta) */
html.sade .akor-gorsel .spot,
html.sade .akor-gorsel .makara{ animation:none; }
html.sade .referans-plaka::after{ animation:none; opacity:0; }

/* Dugmelerdeki gecen isik ve WhatsApp nabzi: ikisi de surekli doner
   ve ikisi de ekranda her zaman durur (yuzen dugme sabit). */
html.sade .btn-turuncu::after,
html.sade .wa-dugme::before,
html.sade .ig-dugme::before{ animation:none; }

/* Baslikta bulaniklastirma: her kaydirma karesinde arkasindaki
   alani yeniden bulaniklastirmak zayif GPU'da en pahali istir.
   Sade modda yerine duz yari saydam zemin kaliyor -- gorunum
   neredeyse ayni, maliyet sifir. */
html.sade header,
html.sade .header-ic{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}