/* =====================================================================
   VITRIN  —  on yuzun "modul" derisi
   ---------------------------------------------------------------------
   style.css'in USTUNE yuklenir; onu degistirmez, yalnizca yuzey dilini
   yonetim panelininkiyle esitler:
     · sayfa zemini acik gri, kartlar beyaz ve KENARLIKSIZ
     · koseler 20 px, golge iki katmanli ve yumusak
     · vurgu rengi yine marka sarisi (#ffc926) — referans tasarimdaki
       fistik yesilinin oynadigi rolu bizde sari oynuyor

   NEDEN AYRI DOSYA
   style.css 2600 satir ve her ekranda kullaniliyor. Yuzey dilini oraya
   serpistirmek, ilerideki her degisiklikte iki yerde arama yapmak
   demekti. Burasi tek yerde toplu: geri almak istenirse tek <link>
   satiri kaldirilir.

   NEDEN cok yerde !important YOK
   Sadece secici ozgullugu artirildi (govde sinifi .v-modul uzerinden).
   !important, ileride bir ekrana ozel duzeltme yazmayi imkansiz kilar.
   ===================================================================== */

:root{
  --v-zemin:#edf0f5;
  --v-yuzey:#ffffff;
  --v-yuzey-2:#f6f8fb;
  --v-koyu:#0b0f14;          /* kahraman alani zemini */
  --v-cizgi:#e6ebf2;
  --v-r:20px;
  --v-r-sm:14px;
  --v-r-xs:10px;
  --v-golge:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --v-golge-2:0 2px 4px rgba(15,23,42,.05), 0 18px 44px rgba(15,23,42,.10);
  --v-gecis:.28s cubic-bezier(.22,.61,.36,1);
}

body.v-modul{background:var(--v-zemin)}

/* =====================================================================
   1) KAHRAMAN SLIDER
   ===================================================================== */
.af-slider{padding:16px 0 0}

/* Slider, sayfanin geri kalanindan DAHA GENIS bir kapsayici kullanir.
   Kahraman alani sitenin ilk izlenimidir; 1240 px'lik metin
   genisligine sikistirmak genis ekranlarda iki yanda buyuk bos
   seritler birakiyordu. Kenarlarda 28 px birakiyoruz ki yuvarlak
   kose ve golge gorunsun — tam kenara dayamak kart hissini bozar. */
.af-slider>.container{max-width:min(1760px, calc(100% - 56px));padding:0}
.af-cerceve{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  /* Perde saydam oldugu icin ARKADA duran duz renk metnin okunurlugunu
     garanti eder; fotograf yuklenmezse de ekran koyu kalir. */
  background:var(--v-koyu);
  box-shadow:var(--v-golge-2);
  isolation:isolate;
}
.af-sahne{position:relative}
/* YUKSEKLIK — neden vw DEGIL, sabit
   Once `clamp(380px,28vw,470px)` yazmistim; 1440 px'te 403 px'e
   dusuyor ve metin blogu arama seridinin UZERINE biniyordu. Slaytlar
   mutlak konumlu oldugu icin cerceve icerige gore uzayamaz — yani
   yukseklik, icerigin gercekten ihtiyac duydugu degerden KUCUK
   olamaz. Gereken yigin: 32 ust + 284 metin + 18 + 68 arama +
   8 + 48 nokta = 458.
   Bu yuzden masaustunde sabit 470 px; dar ekranlarda arama seridi
   akisa gectigi icin daha kisa olabiliyor (asagidaki sorgular). */
.af-slaytlar{position:relative;min-height:470px}

.af-slayt{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:32px 24px 138px;
  opacity:0;visibility:hidden;
  transition:opacity .8s ease, visibility 0s linear .8s;
}
.af-slayt.aktif{opacity:1;visibility:visible;transition:opacity .8s ease}

/* Fotograf — ayri katman, cunku uzerinde yavas yakinlasma calisiyor
   ve perdenin bundan etkilenmemesi gerekiyor. */
.af-zemin{
  position:absolute;inset:0;z-index:0;
  background-image:var(--af-g);
  background-size:cover;
  background-position:var(--af-odak,center);
  transform:scale(1.04);
  transition:transform 1.2s ease;
}
.af-slayt.aktif .af-zemin{animation:afYakinlas 11s ease-out forwards}
@keyframes afYakinlas{from{transform:scale(1.04)}to{transform:scale(1.13)}}

/* Perde. Metnin durdugu ORTA bolgede en az %72 kapaklik var; beyaz
   yazi ile kontrast 8:1 uzeri. Kenarlarda %55'e dusuyor, boylece
   fotograf tamamen kaybolmuyor. */
.af-perde{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 92% at 50% 44%,
      rgba(8,11,15,.86) 0%, rgba(8,11,15,.74) 46%,
      rgba(8,11,15,.56) 76%, rgba(8,11,15,.64) 100%),
    linear-gradient(180deg, rgba(8,11,15,.30) 0%, rgba(8,11,15,0) 26%,
      rgba(8,11,15,0) 58%, rgba(8,11,15,.55) 100%);
}

.af-yazi{position:relative;z-index:2;max-width:780px;text-align:center;color:#fff}
.af-slayt.aktif .af-yazi>*{animation:afYuksel .7s cubic-bezier(.22,.61,.36,1) both}
.af-slayt.aktif .af-yazi>*:nth-child(2){animation-delay:.09s}
.af-slayt.aktif .af-yazi>*:nth-child(3){animation-delay:.17s}
.af-slayt.aktif .af-yazi>*:nth-child(4){animation-delay:.25s}
@keyframes afYuksel{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.af-etiket{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 10px;border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;margin-bottom:10px;
}
.af-etiket i{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;
  box-shadow:0 0 0 4px rgba(255,201,38,.22)}

.af-baslik{
  font-size:clamp(1.8rem,3.4vw,2.85rem);line-height:1.08;letter-spacing:-.035em;
  color:#fff;margin:0 0 10px;font-weight:800;text-wrap:balance;
}
.af-alt{font-size:clamp(.92rem,1.15vw,1.02rem);line-height:1.55;color:#e7ecf3;
  margin:0 auto 16px;max-width:58ch}
.af-dugmeler{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Cam dugme — koyu zeminde ikinci secenek */
.af-btn-cam{
  background:rgba(255,255,255,.12)!important;
  background-image:none!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.30)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.af-btn-cam:hover{background:rgba(255,255,255,.20)!important;border-color:rgba(255,255,255,.45)!important}

/* ---- Oklar ---- */
.af-ok{
  position:absolute;top:calc(50% - 46px);transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:1.5rem;line-height:1;display:grid;place-items:center;
  transition:var(--v-gecis);
}
.af-ok:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-50%) scale(1.06)}
.af-ok:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.af-onceki{left:22px}
.af-sonraki{right:22px}
.af-ok span{position:relative;top:-2px}

/* ---- Noktalar + duraklat ---- */
.af-alt-serit{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:0 24px 18px;pointer-events:none;
}
.af-alt-serit>*{pointer-events:auto}
.af-noktalar{display:flex;gap:8px;align-items:center}
.af-noktalar button{
  width:auto;padding:6px 4px;background:none;border:0;cursor:pointer;line-height:0;
}
.af-noktalar button i{
  display:block;width:9px;height:9px;border-radius:999px;
  background:rgba(255,255,255,.42);transition:var(--v-gecis);
}
.af-noktalar button.aktif i{width:30px;background:var(--brand)}
.af-noktalar button:hover i{background:rgba(255,255,255,.75)}
.af-noktalar button.aktif:hover i{background:var(--brand)}
.af-noktalar button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

.af-durdur{
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  display:grid;place-items:center;transition:var(--v-gecis);
}
.af-durdur:hover{background:rgba(255,255,255,.3)}
.af-durdur:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Duraklatilmamisken "duraklat" (iki cubuk), duraklatilmisken "oynat" (ucgen).
   Iki ayri cubuk TEK polygon ile cizilemez — arada bosluk birakan bir yol
   kendi uzerine katlanip bozuk sekil uretiyordu. Cubuklar iki ayri
   sahte oge; ucgen icin ise cubuklar gizlenip ::before'a clip-path
   veriliyor. */
.af-durdur-ikon{position:relative;width:10px;height:11px;display:block}
.af-durdur-ikon::before,.af-durdur-ikon::after{
  content:'';position:absolute;top:0;width:3px;height:11px;border-radius:1px;background:#fff}
.af-durdur-ikon::before{left:0}
.af-durdur-ikon::after{right:0}
.af-durdur[aria-pressed="true"] .af-durdur-ikon::after{display:none}
.af-durdur[aria-pressed="true"] .af-durdur-ikon::before{
  left:1px;width:10px;clip-path:polygon(0 0,10px 5.5px,0 11px)}

/* Tek slaytta gezinme ogeleri gereksiz */
.af-slider.tekli .af-ok,.af-slider.tekli .af-alt-serit{display:none}
.af-slider.tekli .af-slayt{padding-bottom:64px}

/* =====================================================================
   2) ARAMA SERIDI  —  slider'in altina binen beyaz hap
   ===================================================================== */
.af-arama-yuvasi{position:absolute;left:0;right:0;bottom:56px;z-index:5;padding:0 28px;pointer-events:none}
.af-arama-yuvasi>*{pointer-events:auto}

.af-arama{
  display:flex;align-items:stretch;gap:0;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:999px;padding:8px 8px 8px 10px;
  box-shadow:0 10px 34px rgba(4,8,14,.34);
  max-width:1040px;margin:0 auto;
}
.af-alan{
  flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;
  padding:6px 14px;position:relative;
}
.af-alan+.af-alan::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--v-cizgi);
}
.af-alan .af-ikon{
  width:34px;height:34px;border-radius:50%;background:var(--v-yuzey-2);
  display:grid;place-items:center;flex:none;color:var(--muted);
}
.af-alan .af-ikon .ikon{width:17px;height:17px}
.af-alan .af-govde{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.af-alan label{
  font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-2);line-height:1.2;
}
.af-alan select,.af-alan input{
  width:100%;border:0;background:none;padding:1px 0 0;margin:0;
  font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);
  -webkit-appearance:none;appearance:none;outline:none;
  text-overflow:ellipsis;
}
.af-alan select{cursor:pointer}
.af-alan:focus-within .af-ikon{background:var(--brand-soft);color:var(--brand-700)}

.af-ara-btn{
  flex:none;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  transition:var(--v-gecis);align-self:center;
}
.af-ara-btn .ikon{width:20px;height:20px;color:#fff}
.af-ara-btn:hover{background:var(--brand);color:#20160a;transform:scale(1.06)}
.af-ara-btn:hover .ikon{color:#20160a}
.af-ara-btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* Slider'in hemen altindaki hizli baglantilar */
.af-kisayollar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  justify-content:center;margin:18px 0 0;
}
.af-kisayollar .et{font-size:.78rem;color:var(--muted);font-weight:700}
.af-kisayollar a{
  font-size:.82rem;font-weight:700;padding:8px 14px;border-radius:999px;
  background:var(--v-yuzey);color:var(--ink-2);box-shadow:var(--v-golge);
  transition:var(--v-gecis);
}
.af-kisayollar a:hover{background:var(--brand);color:#20160a;transform:translateY(-2px)}

/* =====================================================================
   3) ISTATISTIK SERIDI
   ===================================================================== */
.v-sayilar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
  gap:14px;margin-top:22px;
}
.v-sayi{
  background:var(--v-yuzey);border-radius:var(--v-r);padding:20px 18px;
  box-shadow:var(--v-golge);transition:var(--v-gecis);
}
.v-sayi:hover{transform:translateY(-3px);box-shadow:var(--v-golge-2)}
.v-sayi b{display:block;font-size:1.75rem;font-weight:800;letter-spacing:-.035em;
  color:var(--ink);line-height:1.1}
.v-sayi span{display:block;font-size:.8rem;color:var(--muted);margin-top:5px;font-weight:600}
.v-sayi i{
  display:inline-block;width:26px;height:3px;border-radius:99px;
  background:var(--brand);margin-bottom:12px;
}

/* =====================================================================
   4) ARA SERIT BANNER
   ===================================================================== */
.af-serit{
  position:relative;border-radius:26px;overflow:hidden;background:var(--v-koyu);
  min-height:270px;display:flex;align-items:center;box-shadow:var(--v-golge-2);
}
.af-serit::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:var(--af-g);background-size:cover;
  background-position:var(--af-odak,center);
  transition:transform 1.1s ease;
}
.af-serit:hover::before{transform:scale(1.05)}
.af-serit::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(8,11,15,.92) 0%, rgba(8,11,15,.86) 42%,
             rgba(8,11,15,.52) 72%, rgba(8,11,15,.42) 100%);
}
.af-serit-yazi{position:relative;z-index:2;padding:40px 44px;max-width:600px;color:#fff}
.af-serit-yazi h2{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 10px;letter-spacing:-.03em}
.af-serit-yazi p{color:#dfe6ee;font-size:.95rem;margin:0 0 22px;line-height:1.6}

/* =====================================================================
   5) MODUL YUZEYI  —  kart / bolum / dugme
   ===================================================================== */
.v-modul .arac-card,
.v-modul .step,
.v-modul .feature,
.v-modul .kurum-kutu,
.v-modul .banka-kutu{
  border:0;
  border-radius:var(--v-r);
  background:var(--v-yuzey);
  box-shadow:var(--v-golge);
  transition:transform var(--v-gecis), box-shadow var(--v-gecis);
}
.v-modul .arac-card:hover,
.v-modul .kurum-kutu:hover,
.v-modul .banka-kutu:hover{
  transform:translateY(-4px);box-shadow:var(--v-golge-2);border-color:transparent;
}
.v-modul .feature:hover,.v-modul .step:hover{transform:translateY(-3px);box-shadow:var(--v-golge-2)}

/* Arac karti: fotograf artik kartin icine gomulu bir kutu — referans
   tasarimdaki gibi dort yani beyaz cerceveli. */
.v-modul .arac-card{padding:8px;overflow:visible}
.v-modul .arac-foto{border-radius:var(--v-r-sm);overflow:hidden}
.v-modul .arac-body{padding:14px 10px 10px}
.v-modul .arac-meta span{background:var(--v-yuzey-2);border-radius:999px;padding:4px 10px}
.v-modul .arac-fiyat{border-top:1px solid var(--v-cizgi)}
.v-modul .arac-taksit{border-radius:12px}
.v-modul .arac-fav{
  width:36px;height:36px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(8,12,18,.16);transition:var(--v-gecis);
}
.v-modul .arac-fav:hover{transform:scale(1.1);background:#fff}

/* Bolum basliklari — etiket artik hap */
.v-modul .section-head .eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--v-yuzey);color:var(--brand-700);
  padding:6px 13px;border-radius:999px;box-shadow:var(--v-golge);
  text-transform:uppercase;margin-bottom:12px;
}
.v-modul .section-head .eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;
}

/* Beyaz zeminli bolumler artik "ada" — tam genislik seridi degil */
.v-modul .v-ada{
  background:var(--v-yuzey);border-radius:26px;padding:38px 32px;
  box-shadow:var(--v-golge);
}
.v-modul .v-ada .step,.v-modul .v-ada .feature{background:var(--v-yuzey-2);box-shadow:none}
.v-modul .v-ada .step:hover,.v-modul .v-ada .feature:hover{box-shadow:var(--v-golge)}

/* Ikon kutulari */
.v-modul .feature .ico{border-radius:14px;width:46px;height:46px}
.v-modul .feature .ico .ikon{width:22px;height:22px;color:var(--brand-700)}

/* Dugmeler biraz daha yuvarlak — modul dilinde koseler yumusak */
.v-modul .btn{border-radius:12px}
.v-modul .btn-lg{border-radius:14px}
.v-modul .btn-sm{border-radius:999px}

/* Arama kutusu (ic sayfalardaki) modul yuzeyine gecer */
.v-modul .search-box{border-radius:26px;box-shadow:var(--v-golge-2);border:0}

/* =====================================================================
   6) HAREKET  —  gorunur olunca beliren bloklar
   ---------------------------------------------------------------------
   JS yoksa ya da hareket azaltma acikken icerik NORMAL gorunur; bu
   yuzden baslangic durumu betikle veriliyor (html.js-goster), CSS ile
   degil. Aksi halde betik calismazsa sayfa bos kalirdi.
   ===================================================================== */
html.js-goster [data-goster]{opacity:0;transform:translateY(18px)}
html.js-goster [data-goster].gorundu{
  opacity:1;transform:none;
  transition:opacity .6s ease var(--v-gecikme,0s), transform .6s cubic-bezier(.22,.61,.36,1) var(--v-gecikme,0s);
}

@media (prefers-reduced-motion:reduce){
  html.js-goster [data-goster]{opacity:1;transform:none}
  .af-slayt.aktif .af-zemin{animation:none;transform:scale(1.04)}
  .af-slayt.aktif .af-yazi>*{animation:none}
  .af-slayt{transition:none}
  .af-serit:hover::before{transform:none}
  .v-modul .arac-card:hover,.v-modul .kurum-kutu:hover,.v-modul .banka-kutu:hover,
  .v-modul .feature:hover,.v-modul .step:hover,.v-sayi:hover{transform:none}
}

/* =====================================================================
   7) DAR EKRAN
   ===================================================================== */
@media (max-width:1000px){
  .af-arama{flex-wrap:wrap;border-radius:20px;padding:8px;box-shadow:none}
  .af-alan{flex:1 1 44%;padding:9px 12px;border-radius:14px;background:var(--v-yuzey-2)}
  .af-alan+.af-alan::before{display:none}
  .af-ara-btn{width:100%;height:48px;border-radius:14px;margin-top:2px}
  /* Serit artik akista: sahnenin ALTINDA, cercevenin icinde durur.
     Noktalar sahneye baglandigi icin yerinden oynamaz. */
  /* Serit akisa gectigi icin mutlak konumlu alan serbest kaldi;
     sahne kisalabilir. */
  .af-arama-yuvasi{position:static;padding:10px 10px 12px}
  .af-slaytlar{min-height:400px}
  .af-slayt{padding:32px 20px 74px}
  /* Dar ekranda 28 px'lik yan boşluk kartı gereksiz daraltıyor. */
  .af-slider>.container{max-width:calc(100% - 32px)}
}
@media (max-width:760px){
  .af-slider{padding-top:12px}
  .af-cerceve{border-radius:22px}
  .af-slaytlar{min-height:355px}
  .af-slayt{padding:28px 18px 66px}
  .af-zemin{background-image:var(--af-gm,var(--af-g))}
  .af-ok{display:none}
  .af-alt-serit{padding-bottom:18px}
  .af-serit{min-height:0}
  .af-serit-yazi{padding:30px 24px;max-width:none}
  .af-serit::after{background:linear-gradient(180deg, rgba(8,11,15,.62) 0%, rgba(8,11,15,.88) 55%, rgba(8,11,15,.94) 100%)}
  .v-modul .v-ada{padding:26px 18px;border-radius:20px}
  .af-kisayollar{justify-content:flex-start}
}
@media (max-width:520px){
  .af-alan{flex:1 1 100%}
}

/* =====================================================================
   8) BELIRME SARMALI GRID'I BOZMASIN
   ---------------------------------------------------------------------
   Kartlari `<div data-goster>` icine aldik; artik grid hucresi o sarmal.
   Sarmali esnetmezsek kartlar ayni satirda farkli yuksekliklerde durur.
   ===================================================================== */
.arac-grid>[data-goster]{display:flex}
.arac-grid>[data-goster]>*{flex:1;width:100%;min-width:0}

/* =====================================================================
   9) BILGI MERKEZI KARTLARI
   ===================================================================== */
.v-yazi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px}
.v-yazi{
  display:flex;flex-direction:column;background:var(--v-yuzey);
  border-radius:var(--v-r);padding:8px;box-shadow:var(--v-golge);
  transition:transform var(--v-gecis), box-shadow var(--v-gecis);
}
.v-yazi:hover{transform:translateY(-4px);box-shadow:var(--v-golge-2)}
.v-yazi-foto{position:relative;aspect-ratio:16/7;border-radius:var(--v-r-sm);
  overflow:hidden;background:var(--v-yuzey-2)}
.v-yazi-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.v-yazi:hover .v-yazi-foto img{transform:scale(1.06)}
.v-yazi-kat{
  position:absolute;left:10px;top:10px;
  background:rgba(255,255,255,.94);color:var(--ink-2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.72rem;font-weight:800;letter-spacing:.03em;
  padding:5px 11px;border-radius:999px;
}
.v-yazi-govde{padding:16px 12px 12px;display:flex;flex-direction:column;flex:1}
.v-yazi-govde h3{font-size:1.02rem;margin:0 0 8px;line-height:1.35;letter-spacing:-.02em}
.v-yazi-govde p{
  margin:0 0 14px;font-size:.87rem;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.v-yazi-alt{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--v-cizgi);
  font-size:.8rem;font-weight:700;color:var(--muted-2);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.v-yazi-alt b{color:var(--brand-700);transition:transform var(--v-gecis)}
.v-yazi:hover .v-yazi-alt b{transform:translateX(4px)}

/* =====================================================================
   10) DEGERLEME SERIDI — modul yuzeyi
   ===================================================================== */
.v-modul .dg-serit{border:0;border-radius:26px;box-shadow:var(--v-golge);background:var(--v-yuzey)}

@media (prefers-reduced-motion:reduce){
  .v-yazi:hover{transform:none}
  .v-yazi:hover .v-yazi-foto img{transform:none}
  .v-yazi:hover .v-yazi-alt b{transform:none}
}

/* =====================================================================
   11) ALT BILGI (FOOTER)
   ---------------------------------------------------------------------
   Koyu, yuvarlak kart. Slider ile AYNI genislikte durur; sayfa
   yukarida nasil basliyorsa asagida da oyle bitiyor.

   Eski alt bilgi tam genislikte duz bir seritti; modul dilinde
   yabanci duruyordu.
   ===================================================================== */
.v-modul .site-footer{background:none;color:inherit;padding:0;margin-top:56px}

/* style.css'teki eski alt bilgi kurali `.site-footer a{display:block}`
   diyor; telefon ve e-posta baglantilarini kendi satirina atiyordu.
   Yeni alt bilgide baglantinin blok mu satir ici mi olacagina
   BULUNDUGU YER karar veriyor.

   DIKKAT — buraya `color:inherit` YAZILMAZ. Yazmistim: bu kural
   (.v-modul .site-footer a) asagidaki renk kurallarindan daha ozgul
   oldugu icin hepsini eziyor ve baglantilar govdeden gelen KOYU
   rengi aliyordu; koyu kart uzerinde siyah uzerine siyah kaliyor,
   sutunlar bombos gorunuyordu. Yalnizca yerlesim sifirlaniyor. */
.v-modul .site-footer a{display:inline;padding:0;font-size:inherit}
.v-modul .ft-sutun a{display:block;padding:7px 0;font-size:.9rem;color:#9aa5b4}
.v-modul .ft-sutun a:hover{color:var(--brand)}
.v-modul .ft-iletisim a{color:#9aa5b4}
.v-modul .ft-iletisim a:hover{color:var(--brand)}
.v-modul .ft-yasal a{color:#8b96a6}
.v-modul .ft-yasal a:hover{color:var(--brand)}
.v-modul .ft-sosyal a{display:grid;color:#c8d0db}
/* Yukaridaki `.v-modul .site-footer a` kurali (0,2,1) dugmelerin
   yerlesimini de siftirliyordu; ozgullugu gecmek icin eleman adi
   burada da yaziliyor (0,3,1). Salt `.v-modul .ft-btn` (0,2,0)
   YETMEZ — denendi, dugmeler duz metin olarak cikti. */
.v-modul .site-footer a.ft-btn{display:inline-flex;padding:12px 20px;font-size:.9rem;color:#e6ebf2}
.v-modul .site-footer a.ft-btn:hover{color:#fff}
.v-modul .site-footer a.ft-btn-ana,
.v-modul .site-footer a.ft-btn-ana:hover{color:#20160a}
.v-modul .ft-racoun{color:#8892a2}

.ft-kart{
  position:relative;
  width:min(1760px, calc(100% - 56px));
  margin:0 auto;
  background:#12161d;
  border-radius:28px 28px 0 0;
  padding:52px 48px 0;
  overflow:hidden;
  isolation:isolate;
}
/* Marka renginde iki yumusak isik — referanstaki sicak parlamanin
   bizdeki karsiligi. `radial-gradient`, gorsel indirmeden ayni etkiyi
   veriyor. */
.ft-kart::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 62% at 4% 0%,   rgba(255,201,38,.16), transparent 62%),
    radial-gradient(46% 55% at 98% 96%, rgba(255,201,38,.10), transparent 66%);
}

.ft-ic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:56px}

/* ---- Marka sutunu ---- */
.ft-marka .logo{margin-bottom:18px}
.ft-marka .logo img{height:38px;width:auto}
.ft-ozet{color:#9aa5b4;font-size:.9rem;line-height:1.75;margin:0 0 22px;max-width:44ch}
.ft-iletisim{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.ft-iletisim li{color:#9aa5b4;font-size:.9rem;line-height:1.6}
.ft-iletisim b{color:#fff;font-weight:700}
.ft-iletisim a{color:#9aa5b4}
.ft-iletisim a:hover{color:var(--brand)}

/* ---- Uyelik cagrilari ----
   "Uye Ol" ve "Galeri Girisi" alt bilgide metin baglantisiydi; sutun
   baglantilarinin arasinda kayboluyordu. Ikisi de bir KARAR
   istiyor, gezinme baglantisi degil — o yuzden dugme.

   Ikisi ayni agirlikta degil: birincil olan sari dolgu, ikincisi
   cerceve. Iki dolu dugme yan yana konsaydi ziyaretci hangisinin
   kendisi icin oldugunu secmek zorunda kalirdi.

   min-height:46px — dokunma hedefi icin alt sinir. */
.ft-eylem{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.ft-btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:46px;padding:12px 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#e6ebf2;
  font-size:.9rem;font-weight:700;line-height:1.2;
  text-decoration:none;
  transition:var(--v-gecis);
}
.ft-btn:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#fff;transform:translateY(-2px)}
.ft-btn-ana{background:var(--brand);border-color:var(--brand);color:#20160a}
.ft-btn-ana:hover{background:#ffd451;border-color:#ffd451;color:#20160a}
.ft-btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* Ok yalnizca birincil dugmede ve yalnizca fare uzerindeyken oynar;
   surekli hareket eden bir ok okumayi zorlastirir. */
.ft-btn span{transition:transform .18s ease}
.ft-btn:hover span{transform:translateX(3px)}

.ft-sosyal{display:flex;gap:10px;flex-wrap:wrap}
.ft-sosyal a{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#c8d0db;display:grid;place-items:center;
  transition:var(--v-gecis);
}
.ft-sosyal a:hover{background:var(--brand);border-color:var(--brand);color:#20160a;transform:translateY(-2px)}
.ft-sosyal a:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---- Baglanti sutunlari ---- */
.ft-sutunlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.ft-sutun h4{
  color:#fff;font-size:1rem;font-weight:700;margin:0 0 18px;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12);
}
.ft-sutun a{display:block;color:#9aa5b4;font-size:.9rem;padding:7px 0;transition:color .16s}
.ft-sutun a:hover{color:var(--brand)}

/* ---- Bulten ---- */
.ft-bulten{
  display:flex;align-items:center;gap:12px;
  margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
}
.ft-bulten input[type=email]{
  flex:1;min-width:0;background:none;border:0;outline:none;
  color:#fff;font:inherit;font-size:.95rem;padding:10px 0;
}
.ft-bulten input[type=email]::placeholder{color:#7c879a}
.ft-bulten input[type=email]:focus-visible{outline:2px solid var(--brand);outline-offset:6px;border-radius:6px}
.ft-bulten button{
  flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,201,38,.14);color:var(--brand);
  display:grid;place-items:center;transition:var(--v-gecis);
}
.ft-bulten button:hover{background:var(--brand);color:#20160a;transform:translateX(2px)}
.ft-bulten button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.ft-bulten button[disabled]{opacity:.5;cursor:progress}

.ft-bulten-not{margin:10px 0 0;font-size:.86rem;font-weight:600}
.ft-bulten-not[data-durum=ok]{color:#7fdca4}
.ft-bulten-not[data-durum=hata]{color:#ff9d95}
.ft-bulten-kvkk{margin:8px 0 0;font-size:.78rem;color:#7c879a;line-height:1.55}

/* NOT: burada bir zamanlar `.ft-kart-fab .ft-yapimci{padding-bottom:88px}`
   vardi — WhatsApp dugmesi kunyenin uzerine biner diye. Olcum bunun
   gereksiz oldugunu gosterdi: dugme SAGA sabit, kunye ORTADA. En dar
   ekranda bile (390px) kunye 125-266, dugme 308-376 araliginda; hicbir
   genislikte cakismiyorlar. 88px yalnizca kunyenin altinda kocaman bir
   bosluk biraktigi icin kaldirildi. Kucuk pay .ft-yapimci'de duruyor. */

/* ---- Alt serit ----
   KUNYE VE YASAL SERIT ALT ALTA — bilerek.
   Once yan yanaydi (space-between). Yasal metin sayisi 4 iken
   sigiyordu; set 8'e cikinca serit butun genisligi kapladi ve son
   baglanti ("Cerez Tercihleri") tek basina alt satirda asili kaldi.
   Yan yana durmak, baglanti sayisina bagli bir kumar: sirket bir
   metin daha eklediginde yine bozulurdu. Alt alta duzen sayidan
   bagimsiz olarak duzgun. */
.ft-alt{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  margin-top:44px;padding:20px 0;
  border-top:1px solid rgba(255,255,255,.12);
  color:#8b96a6;font-size:.84rem;
}
/* row-gap kucuk: sarinca satirlar arasi bosluk, sutunlar arasi
   boslukla ayni olursa liste seyrek ve dagilmis gorunuyor. */
.ft-yasal{display:flex;gap:8px 20px;flex-wrap:wrap}
.ft-yasal a{color:#8b96a6}
.ft-yasal a:hover{color:var(--brand)}

/* Renk #6d7787 idi: #12161d zemin uzerinde 4.01:1 — WCAG AA'nin
   (4.5) ALTINDA. Kucuk ve ikincil diye gozden kacmisti; kontrast
   taramasi yakaladi. #8892a2 ile 5.1:1. */
.ft-kunye{
  padding:14px 0 6px;border-top:1px solid rgba(255,255,255,.07);
  color:#8892a2;font-size:.76rem;text-align:center;
}
/* Yapimci kunyesi ORTADA, kendi satirinda. Saga yasliyken sabit
   WhatsApp dugmesinin altinda kaliyordu.

   `opacity` KULLANILMIYOR: sadelestirir gibi gorunuyor ama gercek
   kontrasti sessizce dusuruyor ve otomatik denetim bunu goremiyor —
   hesaplanan renk degismiyor cunku. Solgunluk dogrudan renkte. */
.ft-yapimci{display:flex;justify-content:center;padding:2px 0 22px}

/* Kunye yalnizca logodan ibaret — yanindaki "Tasarim & gelistirme"
   yazisi kaldirildi.

   SECICI NEDEN BU KADAR UZUN
   Yukaridaki `.v-modul .site-footer a{display:inline}` kurali
   (2 sinif + 1 ELEMENT = 0,2,1) hem `.ft-racoun{...}` (0,1,0) hem de
   `.v-modul .ft-racoun{...}` (0,2,0) kurallarindan daha ozgul —
   element seciciler de sayiliyor. Ozgullugu asmadan yazilirsa baglanti
   `display:inline` kalir ve satir yuksekligi kadar fazladan bosluk
   uretir. `.site-footer a.ft-racoun` (0,3,1) bunu temiz sekilde geciyor. */
.v-modul .site-footer a.ft-racoun{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:0;                  /* satir ici bosluk kalmasin */
}
.ft-racoun img{
  height:22px;width:auto;display:block;
}

/* =====================================================================
   12) WHATSAPP DUGMESI
   ---------------------------------------------------------------------
   Yuvarlak yesil bir daire yerine, ne oldugunu SOYLEYEN bir hap.
   Ikondaki "telefon" gliflerini de duzelttik: dugme WhatsApp'a
   goturuyor ama telefon ahizesi cizilmisti.
   ===================================================================== */
.wa-fab{
  position:fixed;right:20px;bottom:20px;z-index:80;
  /* width/height ACIKCA yaziliyor: style.css'teki eski kural 54x54
     sabit daire veriyordu ve yazi hapin disinda kalip kirpiliyordu.
     Ayni ozgullukte iki kural var; eksik bildirim ezilmiyor. */
  width:auto;height:auto;font-size:1rem;
  display:inline-flex;align-items:center;gap:14px;
  padding:9px 26px 9px 9px;border-radius:999px;
  background:#fff;color:var(--ink);
  box-shadow:0 8px 30px rgba(8,12,18,.26), 0 2px 6px rgba(8,12,18,.10);
  transition:transform var(--v-gecis), box-shadow var(--v-gecis);
}
.wa-fab:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(8,12,18,.32)}
.wa-fab:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.wa-ikon{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:var(--ink);color:#fff;display:grid;place-items:center;
}
.wa-yazi{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.wa-yazi b{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:700;color:var(--ink)}
.wa-yazi>span{font-size:.85rem;color:var(--muted)}

/* Nokta: mesai icindeyken yesil ve nabiz gibi, disinda gri ve sabit.
   Renk TEK BASINA bilgi tasimiyor — yanindaki yazi da degisiyor. */
.wa-nokta{width:9px;height:9px;border-radius:50%;flex:none;background:#94a3b8}
.wa-fab.acik .wa-nokta{background:#25d366;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:waNabiz 2.4s ease-out infinite}
@keyframes waNabiz{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

@media (prefers-reduced-motion:reduce){
  .wa-fab.acik .wa-nokta{animation:none}
  .wa-fab:hover{transform:none}
  .ft-sosyal a:hover{transform:none}
  .ft-btn:hover{transform:none}
  .ft-btn:hover span{transform:none}
}

/* =====================================================================
   13) ALT BILGI + WHATSAPP — DAR EKRAN
   ===================================================================== */
@media (max-width:1000px){
  .ft-kart{width:calc(100% - 32px);padding:40px 26px 0;border-radius:22px 22px 0 0}
  .ft-ic{grid-template-columns:1fr;gap:36px}
  .ft-sutunlar{gap:26px}
}
@media (max-width:640px){
  .ft-sutunlar{grid-template-columns:1fr}
  .ft-sutun h4{margin-bottom:12px;padding-bottom:12px}
  /* Dar ekranda iki dugme yan yana sikisip iki satira kiriliyor;
     tam genislikte alt alta hem okunur hem dokunmasi kolay. */
  .ft-eylem{flex-direction:column;align-items:stretch}
  .ft-btn{justify-content:center}
  .ft-alt{flex-direction:column;align-items:flex-start;gap:12px}
  /* Hap 390 px'lik ekranda genisligin yarisini yiyor; ikona iniyor. */
  .wa-fab{gap:0;padding:6px;right:14px;bottom:14px}
  .wa-yazi{display:none}
  .wa-ikon{width:56px;height:56px}
  /* Kunye artik yalnizca 84px'lik logo; ortalandiginda 153-237
     arasinda duruyor, sag alttaki WhatsApp ikonu ise 278-346
     arasinda — cakisma yok, alta bosluk koymaya gerek yok.
     Ustteki uyari metni ise sabit dugmenin altinda kalmasin diye
     sagdan pay birakiyor; pay iki yana esit veriliyor ki metin
     ortali gorunumunu kaybetmesin. */
  .ft-kunye{padding-left:64px;padding-right:64px}
}

/* =====================================================================
   14) UST BOLUM — bilgi seridi + baslik
   ---------------------------------------------------------------------
   Ust serit duz koyu bir kutuydu. Artik markanin sarisina dogru
   akan bir gradyan; sayfanin geri kalanindaki koyu yuzeylerle (slider,
   alt bilgi) ayni aileden.

   KONTRAST
   Gradyanin EN ACIK duragi #2c2410; uzerindeki yazi #e8edf4 ile
   12:1'in uzerinde. Marka sarisi yalnizca vurgu olarak kullaniliyor,
   uzerine yazi yazilmiyor.
   ===================================================================== */
.v-modul .topbar{
  background:
    linear-gradient(90deg,
      #0b1220 0%,
      #121a2b 34%,
      #1d2233 62%,
      #2c2410 100%);
  color:#c7d0dc;
  font-size:.82rem;
  position:relative;
}
/* Alt kenardaki ince marka cizgisi: seridi baslikla birlestiren,
   1 px'lik bir gecis. */
.v-modul .topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    rgba(255,201,38,0) 0%, rgba(255,201,38,.28) 45%,
    rgba(255,201,38,.75) 100%);
}
.v-modul .topbar .container{height:42px}
.v-modul .topbar a{color:#dbe3ec;transition:color .16s}
.v-modul .topbar a:hover{color:var(--brand)}
/* Telefon: sarı ikon + beyaz numara, hafif hap içinde */
.v-modul .topbar > .container > div:first-child{
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;font-weight:600;
}
.v-modul .topbar .ikon{color:var(--brand)}
.v-modul .topbar .links{gap:20px}
.v-modul .topbar .links a{position:relative;padding-bottom:2px}
.v-modul .topbar .links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.v-modul .topbar .links a:hover::after{transform:scaleX(1)}

/* ---- Baslik ---- */
.v-modul .site-header{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(15,23,42,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 22px rgba(15,23,42,.05);
}
.v-modul .site-header .container{height:76px;gap:20px}

/* Menu ogeleri hap; etkin sayfa marka zeminiyle isaretli */
.v-modul .main-nav>a,
.v-modul .main-nav>.drop>a{border-radius:999px;padding:9px 15px}
.v-modul .main-nav>a:hover,
.v-modul .main-nav>.drop:hover>a,
.v-modul .main-nav>.drop:focus-within>a{background:rgba(15,23,42,.05)}
.v-modul .main-nav>a.active,
.v-modul .main-nav>.drop>a.active{background:var(--brand-soft);color:var(--brand-700)}

.v-modul .drop-menu{border:0;border-radius:18px;box-shadow:var(--v-golge-2);padding:9px}
.v-modul .drop-menu a{border-radius:11px}

/* Giris / basvuru dugmeleri */
.v-modul .header-actions .btn-ghost{
  border:1px solid var(--v-cizgi);background:#fff;border-radius:999px;padding:9px 18px
}
.v-modul .header-actions .btn-brand{border-radius:999px;padding:9px 20px}

@media (max-width:900px){
  .v-modul .topbar .container{height:auto;padding-top:7px;padding-bottom:7px;
    flex-wrap:wrap;justify-content:center;gap:6px 16px}
  .v-modul .site-header .container{height:68px}
}
@media (prefers-reduced-motion:reduce){
  .v-modul .topbar .links a:hover::after{transform:none}
}

/* =====================================================================
   15) LOGODA PARLAMA
   ---------------------------------------------------------------------
   Logonun uzerinden duzenli araliklarla acik bir serit geciyor.

   NEDEN MASKE
   Serit dogrudan basilsaydi, logonun etrafindaki BOS alanda da
   gorunur ve baslikta gezinen beyaz bir dikdortgen gibi dururdu.
   Serit, logo dosyasinin kendisiyle maskeleniyor: yalnizca harflerin
   ve amblemin USTUNDE beliriyor.

   NEDEN `background-position` ANIMASYONU (transform degil)
   Maske de ogenin uzerinde duruyor; ogeyi kaydirsaydik maske de
   kayar ve parlama logonun disina tasardi. Oge sabit kaliyor,
   yalnizca gradyan icinde kayiyor.
   ===================================================================== */
.v-modul .site-header .logo{position:relative;isolation:isolate}

@supports ((-webkit-mask-image:url('../img/logo.svg')) or (mask-image:url('../img/logo.svg'))){
  .v-modul .site-header .logo::after{
    content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    /* Serit DAR: genis bir bant, logoyu parlatmak yerine soldurup
       okunmaz hale getiriyordu. Parlak cekirdek %3'luk bir dilim. */
    background-image:linear-gradient(102deg,
      rgba(255,255,255,0)   45%,
      rgba(255,255,255,.55) 48.5%,
      rgba(255,255,255,.92) 50%,
      rgba(255,255,255,.55) 51.5%,
      rgba(255,255,255,0)   55%);
    background-size:320% 100%;
    background-repeat:no-repeat;
    -webkit-mask-image:url('../img/logo.svg');
            mask-image:url('../img/logo.svg');
    -webkit-mask-size:contain;      mask-size:contain;
    -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
    -webkit-mask-position:left center; mask-position:left center;
    /* 6 saniyede bir, yarim saniyelik bir gecis. Surekli parlayan bir
       logo dikkat dagitir; ara verdikce fark ediliyor. */
    animation:logoParla 6s ease-in-out infinite;
  }
}
@keyframes logoParla{
  0%,72%   {background-position:150% 0}
  88%,100% {background-position:-60% 0}
}

@media (prefers-reduced-motion:reduce){
  .v-modul .site-header .logo::after{animation:none;background-image:none}
}