/* Sayfaya ozgu duzenler. Bilesen kutuphanesi yetmedigi yerde kullanilir.
   Kural: burada da hex renk yok, radius ust siniri 8px, text-transform yok. */

/* ==========================================================================
   Hero (T1 ana sayfa)
   ========================================================================== */
.hero { padding-block: var(--b-16) var(--b-12); }

.hero__izgara {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: var(--b-12);
  align-items: center;
}

.hero__ust {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--vurgu-koyu);
  margin-bottom: var(--b-3);
}

/* Slider'in dort slaydi da ayni boyda baslik tasir ama sayfada tek <h1>
   olmali (SEO ve ekran okuyucu). Ilk slayt h1, digerleri h2; gorunum
   etiketten degil bu siniftan geliyor. */
.hero__baslik {
  font-size: var(--fs-4xl);
  letter-spacing: -.025em;
  margin-bottom: var(--b-4);
}
@media (max-width: 640px) {
  .hero__baslik { font-size: var(--fs-3xl); }
}

.hero__ozet {
  font-size: var(--fs-lg);
  color: var(--metin-ikincil);
  max-width: 44ch;
  margin-bottom: var(--b-8);
}

.hero__eylem { display: flex; flex-wrap: wrap; gap: var(--b-3); }

@media (max-width: 900px) {
  .hero { padding-block: var(--b-12) var(--b-8); }
  .hero__izgara { grid-template-columns: 1fr; gap: var(--b-8); }
  .hero__ozet { max-width: none; }
}

/* Renk tek basina anlam tasimaz (spec §12): dolu masalar ayrica kalin kenarlikli */

@media (max-width: 560px) {
  .pos { flex-direction: column; min-height: 0; }
}

/* ==========================================================================
   Kanit seridi
   ========================================================================== */
.kanit { background: var(--zemin-alt); border-block: 1px solid var(--kenarlik); }
.kanit .stat + .stat { border-left: 1px solid var(--kenarlik); }

@media (max-width: 720px) {
  .kanit .stat:nth-child(odd) { border-left: 0; }
  .kanit .stat:nth-child(n+3) { border-top: 1px solid var(--kenarlik); }
}
@media (max-width: 480px) {
  .kanit .stat + .stat { border-left: 0; border-top: 1px solid var(--kenarlik); }
}

/* ==========================================================================
   Kapanis CTA
   ========================================================================== */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-8);
}
.cta h2 { max-width: 20ch; }
.cta__eylem { display: flex; flex-wrap: wrap; gap: var(--b-3); }

@media (max-width: 720px) {
  .cta h2 { max-width: none; }
}

/* ==========================================================================
   Hero slider
   ========================================================================== */
.slider { position: relative; padding-block: var(--b-12) var(--b-8); }
.slider__pencere { overflow: hidden; }
.slider__ray {
  display: flex;
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* padding-block SART: .slider__pencere uzerindeki overflow:hidden slaytin
   en alt ogesini kirpiyor. Butonlar orada oldugu icin alt kenarliklari
   kesiliyordu. 8px bosluk hem kenarligi hem de :focus-visible halkasini
   (2px cizgi + 2px offset) kirpilmaktan kurtarir. */
.slider__slayt { flex: 0 0 100%; min-width: 0; padding-block: var(--b-2); }

/* Gizli slaytlar gorsel olarak gizlenmez - kaydirma animasyonunda gelen slayt
   gorunur olmali. Ekran okuyucu ve sekme sirasi JS tarafinda aria-hidden ve
   tabindex="-1" ile yonetiliyor (slider.js). */

@media (prefers-reduced-motion: reduce) {
  .slider__ray { transition: none; }
}

/* --- Etiketli ilerleme cubuklari ---
   Ileri/geri/durdur butonu yerine her slaytin kendi cubugu var.
   Aktif cubuk SURE boyunca dolar; ayni cubuga tiklamak duraklatir. */
.slider__adimlar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--b-4);
  margin-top: var(--b-8);
  max-width: 44rem;
}

.slider__adim {
  display: flex;
  flex-direction: column;
  gap: var(--b-2);
  padding: 0 0 var(--b-1);
  background: none;
  border: 0;
  text-align: left;
}

.slider__adim-cubuk {
  display: block;
  height: 3px;
  background: var(--kenarlik);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.slider__adim-cubuk i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--vurgu);
  border-radius: var(--r-xs);
}

.slider__adim-yazi {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--metin-soluk);
  transition: color var(--gecis);
}
.slider__adim:hover .slider__adim-yazi { color: var(--metin); }
.slider__adim:hover .slider__adim-cubuk { background: var(--kenarlik-koyu); }

.slider__adim--aktif .slider__adim-yazi { color: var(--metin); font-weight: 700; }
.slider__adim--aktif .slider__adim-cubuk i { animation: slider-doldur var(--slider-sure, 7000ms) linear forwards; }

/* Duraklatildiginda dolum yerinde durur - durum gorsel olarak belli olur */
.slider--duruyor .slider__adim--aktif .slider__adim-cubuk i { animation-play-state: paused; }

@keyframes slider-doldur { from { width: 0; } to { width: 100%; } }

/* Hareket azaltma acikken otomatik gecis yok; aktif cubuk dolu gorunur */
@media (prefers-reduced-motion: reduce) {
  .slider__adim--aktif .slider__adim-cubuk i { animation: none; width: 100%; }
}

@media (max-width: 720px) {
  .slider__adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-3); margin-top: var(--b-6); }
}

@media (max-width: 900px) {
  .slider { padding-block: var(--b-8) var(--b-6); }
}

/* Secili oge renk disinda kenarlikla da isaretlenir (spec §12) */

@media (max-width: 1024px) {
  .qr { display: none; }
}

@media (max-width: 560px) {
}

/* ==========================================================================
   Cozum ortaklari
   ========================================================================== */
.ortak {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--b-12);
  align-items: center;
}
.ortak__eylem { margin-top: var(--b-6); }
.ortak__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-4); }
.ortak__liste li {
  background: var(--zemin);
  border: 1px solid var(--red-100);
  border-radius: var(--r-lg);
  padding: var(--b-4) var(--b-6);
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
}
.ortak__liste strong {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  color: var(--metin);
  margin-bottom: var(--b-1);
}

@media (max-width: 860px) {
  .ortak { grid-template-columns: 1fr; gap: var(--b-8); }
}

/* ==========================================================================
   Sizi arayalim
   ========================================================================== */
.arayalim {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--b-12);
  align-items: start;
}
.arayalim__ozet {
  font-size: var(--fs-lg);
  line-height: var(--lh-genis);
  color: color-mix(in srgb, var(--metin-ters) 72%, transparent);
  margin-top: var(--b-4);
}
.arayalim__ozet strong { color: var(--metin-ters); }

.arayalim__iletisim { list-style: none; margin: var(--b-8) 0 0; padding: 0; display: grid; gap: var(--b-4); }
.arayalim__iletisim li { display: flex; align-items: center; gap: var(--b-3); font-size: var(--fs-base); }
.arayalim__iletisim .ikon { color: var(--red-400); }
.arayalim__iletisim a { color: var(--metin-ters); text-decoration: none; font-weight: 600; }
.arayalim__iletisim a:hover { color: var(--red-300); text-decoration: underline; }

/* --- Koyu zemin uzerinde form --- */
.form--koyu { max-width: none; }
.form--koyu label { color: var(--metin-ters); }
.form--koyu input,
.form--koyu select,
.form--koyu textarea {
  background: color-mix(in srgb, var(--metin-ters) 8%, transparent);
  border-color: color-mix(in srgb, var(--metin-ters) 22%, transparent);
  color: var(--metin-ters);
}
.form--koyu input::placeholder { color: color-mix(in srgb, var(--metin-ters) 45%, transparent); }
.form--koyu input:hover,
.form--koyu select:hover,
.form--koyu textarea:hover { border-color: color-mix(in srgb, var(--metin-ters) 45%, transparent); }
.form--koyu input:focus-visible,
.form--koyu select:focus-visible,
.form--koyu textarea:focus-visible { border-color: var(--red-400); }
.form--koyu input:user-invalid,
.form--koyu select:user-invalid { border-color: var(--red-400); }
.form--koyu option { background: var(--n-800); color: var(--metin-ters); }

.form--koyu .alan--onay label { color: color-mix(in srgb, var(--metin-ters) 72%, transparent); }
.form--koyu .alan--onay a { color: var(--red-300); }
.form--koyu .alan__hata { color: var(--red-300); }

.form--koyu .form__not {
  background: color-mix(in srgb, var(--metin-ters) 7%, transparent);
  border-left-color: var(--red-400);
  color: color-mix(in srgb, var(--metin-ters) 68%, transparent);
}
.form--koyu .form__not a { color: var(--metin-ters); }

@media (max-width: 860px) {
  .arayalim { grid-template-columns: 1fr; gap: var(--b-8); }
}

/* Hero butonlari: dar alanda ezilmesin, metin buton icinde bolunmesin.
   Flex ogesi varsayilan olarak kucululebilir; bu iki kural onu engeller. */
.hero__eylem .btn { flex: 0 0 auto; white-space: nowrap; }

/* Cok dar ekranda butonlar alt alta ve tam genislikte */
@media (max-width: 420px) {
  .hero__eylem { flex-direction: column; align-items: stretch; }
  .hero__eylem .btn { width: 100%; }
}

/* ==========================================================================
   Sayfa basligi (T2/T3/T4 sablonlari)
   ========================================================================== */
.sayfa-bas { padding-block: var(--b-6) var(--b-12); border-bottom: 1px solid var(--kenarlik); }

/* Gorseli olan sayfalarda iki sutun: solda metin, sagda gorsel.
   Gorsel yoksa izgara tek sutuna duser, metin tam genislige yayilmaz -
   okuma genisligi korunur. */
.sayfa-bas__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--b-12);
  align-items: center;
}
.sayfa-bas__izgara:has(.sayfa-bas__gorsel) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.sayfa-bas__metin { min-width: 0; }

.sayfa-bas__gorsel {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--b-6);
  background: var(--zemin-alt);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
}
.sayfa-bas__gorsel img {
  /* Kaynak gorsellerin bir kismi kucuk (300px). Buyutmek bulanik gosterir;
     kendi olcusunde birakilip cercevede ortalanir. */
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.sayfa-bas h1 { max-width: 22ch; margin-top: var(--b-2); }
.sayfa-bas__ozet {
  font-size: var(--fs-lg);
  color: var(--metin-ikincil);
  max-width: 58ch;
  margin-top: var(--b-4);
}
.sayfa-bas__eylem { display: flex; flex-wrap: wrap; gap: var(--b-3); margin-top: var(--b-8); }

@media (max-width: 900px) {
  .sayfa-bas__izgara:has(.sayfa-bas__gorsel) { grid-template-columns: minmax(0, 1fr); }
  .sayfa-bas__gorsel { padding: var(--b-4); }
}
@media (max-width: 640px) {
  .sayfa-bas { padding-block: var(--b-4) var(--b-8); }
  .sayfa-bas h1 { max-width: none; }
}

/* ==========================================================================
   Duz metin akisi (cikarilan icerik)

   Metin kabin tamamini kullanir; okuma olcusu YALNIZCA .metin--olcu ile
   isaretlenen hukuki sayfalara uygulanir.

   Neden ayrim: olculdu - 600 karakterden uzun paragrafi olan yalnizca 3 sayfa
   var, ucu de hukuki (kvkk-aydinlatma'da 1915 karakterlik tek paragraf, tam
   genislikte 14 satirlik kesintisiz blok olurdu). Kalan 48 sayfada en uzun
   paragraf 562 karakter = tam genislikte 4 satir. Hepsini 68ch'e kismak
   ekranin sag yarisini bos birakiyordu, kazanci da yoktu.
   ========================================================================== */
.metin--olcu > p,
.metin--olcu > ul,
.metin--olcu > ol,
.metin--olcu > h2,
.metin--olcu > h3,
.metin--olcu > h4,
.metin--olcu > dl,
.metin--olcu > blockquote,
.metin--olcu > .uyari { max-width: var(--genislik-metin); }

.metin h2 { font-size: var(--fs-2xl); margin-top: var(--b-12); margin-bottom: var(--b-4); }
.metin h3 { font-size: var(--fs-xl); margin-top: var(--b-8); margin-bottom: var(--b-3); }
.metin h4 { font-size: var(--fs-lg); margin-top: var(--b-6); margin-bottom: var(--b-2); }
.metin h2:first-child, .metin h3:first-child, .metin h4:first-child { margin-top: 0; }
.metin p { margin-bottom: var(--b-4); }
.metin ul { margin-bottom: var(--b-4); padding-left: var(--b-6); }
.metin li { margin-bottom: var(--b-2); }
.metin > .uyari { margin-bottom: var(--b-4); }

/* ==========================================================================
   Slayt sahnesi - tam zemin fotograf + koyu perde + yuzen urun karti

   Tasarim karari: fotograf slaytin TAMAMINI kaplar, uzerine CSS ile koyu
   degrade cizilir (fotografa basilmaz, degistirilebilir kalir). Metin bu
   koyu alanin uzerinde durur, urun karti sagda fotografin uzerine biner.

   Yukseklik viewport genisligine DEGIL sabit bir araliga baglidir. Onceki
   denemede fotografin genisligi ekran genisligine baglanmisti; genis
   ekranda buyuyup duzeni ezdi. Bu surumde o bagimlilik yok.
   ========================================================================== */

.slider { padding-block: 0; }
.slider__pencere { overflow: hidden; }

.slider__slayt {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 58vh, 40rem);
  padding-block: var(--b-16) var(--b-24);
  background: var(--zemin-koyu);
}

/* --- Zemin fotografi --- */
.slayt-zemin { position: absolute; inset: 0; margin: 0; z-index: -2; }
.slayt-zemin img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

/* --- Koyu perde: metnin okunmasini garantiler --- */
.slayt-perde {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--perde-guclu);
}
.slayt-perde::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, color-mix(in srgb, var(--zemin-koyu) 55%, transparent), transparent);
}

/* --- Icerik --- */
.slider .hero__metin { max-width: 34rem; }
.slider .hero__baslik { color: var(--metin-ters); }
.slider .hero__baslik .vurgu { color: var(--red-400); }
.slider .hero__ozet { color: color-mix(in srgb, var(--metin-ters) 78%, transparent); }
.slider .btn--ikincil {
  color: var(--metin-ters);
  border-color: color-mix(in srgb, var(--metin-ters) 36%, transparent);
}
.slider .btn--ikincil:hover {
  border-color: var(--metin-ters);
  background: color-mix(in srgb, var(--metin-ters) 10%, transparent);
}

/* --- Yuzen urun arayuzu karti --- */

/* --- Ilerleme cubuklari koyu zemin uzerinde --- */
.slider__adimlar {
  position: absolute;
  left: 50%;
  bottom: var(--b-8);
  transform: translateX(-50%);
  width: min(100% - var(--b-8), var(--genislik-icerik));
  max-width: 44rem;
  margin: 0;
  z-index: 2;
}
.slider__adim-cubuk { background: color-mix(in srgb, var(--metin-ters) 25%, transparent); }
.slider__adim-yazi { color: color-mix(in srgb, var(--metin-ters) 62%, transparent); }
.slider__adim:hover .slider__adim-yazi { color: var(--metin-ters); }
.slider__adim:hover .slider__adim-cubuk { background: color-mix(in srgb, var(--metin-ters) 45%, transparent); }
.slider__adim--aktif .slider__adim-yazi { color: var(--metin-ters); }

/* --- Giris hareketi --- */
.slider__slayt[aria-hidden="false"] .hero__metin > *,
.slider__slayt[aria-hidden="false"] .hero__metin > *:nth-child(2) { animation-delay: 70ms; }
.slider__slayt[aria-hidden="false"] .hero__metin > *:nth-child(3) { animation-delay: 140ms; }

@keyframes slayt-gir {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slider__slayt[aria-hidden="false"] .hero__metin > *,
}

/* --- Dar ekran --- */
@media (max-width: 1024px) {
  .slider .hero__izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: var(--b-8); }
}

@media (max-width: 860px) {
  .slider__slayt { min-height: 0; padding-block: var(--b-12) var(--b-24); }
  .slider .hero__izgara { grid-template-columns: 1fr; gap: var(--b-8); }
  .slider .hero__metin { max-width: none; }
  .slayt-zemin img { object-position: center; }
  .slayt-perde {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--zemin-koyu) 94%, transparent)   0%,
      color-mix(in srgb, var(--zemin-koyu) 86%, transparent)  55%,
      color-mix(in srgb, var(--zemin-koyu) 93%, transparent) 100%);
  }
}

/* ==========================================================================
   Sahne: egik rozet + katmanli kart yigini
   turknet karsiligi: egik fiyat karti ve ust uste binen gorseller.
   Tek duz kart "sablon" gibi duruyordu; egim ve katman derinlik veriyor.
   ========================================================================== */

/* Arkada duran ikinci kart - yalnizca derinlik icin */

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 1024px) {
}

@media (max-width: 860px) {
}

@media (max-width: 420px) {
}

/* ==========================================================================
   Sahne: egik rozet + katmanli kart yuvasi

   Kart SAHTE ICERIK TASIMAZ. Gercek urun ekran goruntusunun oturacagi bos
   cercevedir. Icindeki yer tutucu, teslim edilecek dosyanin olcusunu ve
   formatini yazar. Gorsel geldiginde .yuva blogunun yerine <img> konur;
   cerceve, golge ve duzen aynen kalir.
   ========================================================================== */

.slider .hero__izgara {
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: var(--b-12);
  align-items: center;
  width: 100%;
}

.sahne { position: relative; }

/* --- Egik iddia rozeti (turknet'teki fiyat kartinin karsiligi) --- */
.sahne__rozet {
  position: absolute;
  top: calc(var(--b-8) * -1);
  right: calc(var(--b-2) * -1);
  z-index: 3;
  transform: rotate(-4deg);
  padding: var(--b-3) var(--b-4);
  background: var(--vurgu);
  color: var(--metin-ters);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .62);
  text-align: center;
}
.sahne__rozet b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
}
.sahne__rozet b em { font-style: normal; opacity: .72; }
.sahne__rozet span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: var(--b-1);
  opacity: .88;
}

/* --- Katmanli yigin: arkadaki kart yalnizca derinlik icin --- */
.sahne__yigin { position: relative; }
.sahne__golge {
  position: absolute;
  inset: 0;
  transform: rotate(3.2deg) translate(var(--b-3), var(--b-3));
  background: color-mix(in srgb, var(--zemin) 86%, var(--n-400));
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
}

.sahne__kart {
  position: relative;
  z-index: 2;
  padding: var(--b-3);
  background: var(--zemin);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .22), 0 32px 64px -28px rgba(0, 0, 0, .8);
}

/* --- Bos yuva: gercek gorsel gelene kadar --- */
.yuva {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  aspect-ratio: 4 / 3;
  padding: var(--b-4);
  text-align: center;
  background: var(--zemin-alt);
  border: 1px dashed var(--kenarlik-koyu);
  border-radius: var(--r-md);
}
.yuva__ikon { width: 28px; height: 28px; color: var(--metin-soluk); }
.yuva__ad {
  font-family: var(--font-baslik);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin-ikincil);
}
.yuva__olcu {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--metin-soluk);
  line-height: 1.5;
}

/* Gercek gorsel gelince: .yuva yerine <img class="sahne__gorsel"> konur */
.sahne__gorsel {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}

@media (prefers-reduced-motion: reduce) {
  .sahne__rozet, .sahne__golge { transform: none; }
}

@media (max-width: 1024px) {
  .slider .hero__izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: var(--b-8); }
  .sahne__rozet { top: calc(var(--b-6) * -1); }
  .sahne__rozet b { font-size: var(--fs-xl); }
}

@media (max-width: 860px) {
  .slider .hero__izgara { grid-template-columns: 1fr; gap: var(--b-12); }
  .sahne { max-width: 21rem; }
  .sahne__rozet { top: calc(var(--b-6) * -1); right: calc(var(--b-4) * -1); }
}

/* Gercek urun ekran goruntusu: kirpilmadan, sabit oranli koyu yuvada gosterilir.
   Ekranlarin en-boy orani farkli (POS yatay, RestoCell dikey); contain ile
   hepsi tam gorunur, kart yuksekligi slaytlar arasinda degismez. */
.sahne__gorsel {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--n-900);
  border-radius: var(--r-md);
}

/* ==========================================================================
   Entegrasyonlar

   Onceki hali zayifti: logolar %55 opakliktaydi ve serbest izgarada
   dagilmisti, kagit gibi soluk gorunuyordu. Bu surumde:
     - once SAYIYLA kanit verilir (33 entegrasyon, 5 kategori, GMP3+TSM)
     - her logo kendi cercevesinde durur, izgara sikilesir
     - logolar TAM OPAKLIKTA gri; hover'da kendi rengine doner
   ========================================================================== */

.ent-bas {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--b-12);
  align-items: end;
  margin-bottom: var(--b-12);
}

.ent-sayi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--b-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ent-sayi li {
  padding: var(--b-4) var(--b-3);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  text-align: center;
}
.ent-sayi b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--metin);
}
.ent-sayi b em { font-style: normal; color: var(--vurgu); }
.ent-sayi span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--metin-ikincil);
  margin-top: var(--b-2);
}

/* --- Grup --- */
.ent-grup {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--b-8);
  padding-block: var(--b-8);
  border-top: 1px solid var(--kenarlik);
}
.ent-grup__ad {
  display: flex;
  align-items: center;
  gap: var(--b-2);
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
}
.ent-grup__adet {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 1px var(--b-2);
  background: var(--zemin-vurgu);
  color: var(--vurgu-koyu);
  border-radius: var(--r-xs);
}
.ent-grup__not {
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
  margin-top: var(--b-2);
}

/* --- Logo izgarasi --- */
.ent-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--b-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ent-kutu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  min-height: 7rem;
  padding: var(--b-3) var(--b-2);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.ent-kutu img {
  width: 100%;
  height: auto;
  /* Tam opaklik: logolar okunur kalir. Gri ton, paletin disina cikmalarini onler. */
  filter: grayscale(1) contrast(1.08);
  transition: filter var(--gecis);
}
.ent-kutu:hover { border-color: var(--kenarlik-koyu); box-shadow: var(--sh-sm); }
.ent-kutu:hover img { filter: none; }

/* Sube sayisi - eski sitede her referansta yoktu, olanda gosterilir */
.ent-kutu__sube {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--metin-ikincil);
  background: var(--zemin-alt);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-xs);
  padding: var(--b-1) var(--b-2);
  white-space: nowrap;
  transition: color var(--gecis), background var(--gecis), border-color var(--gecis);
}
.ent-kutu:hover .ent-kutu__sube {
  color: var(--vurgu-koyu);
  background: var(--zemin-vurgu);
  border-color: var(--zemin-vurgu);
}

.ent__alt { margin-top: var(--b-8); padding-top: var(--b-8); border-top: 1px solid var(--kenarlik); }

@media (max-width: 960px) {
  .ent-bas { grid-template-columns: 1fr; gap: var(--b-8); align-items: start; }
  .ent-grup { grid-template-columns: 1fr; gap: var(--b-4); }
}
@media (max-width: 560px) {
  .ent-sayi { grid-template-columns: 1fr; }
  .ent-sayi li { display: flex; align-items: baseline; gap: var(--b-3); text-align: left; }
  .ent-sayi span { margin-top: 0; }
  .ent-izgara { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--b-2); }
  .ent-kutu { min-height: 6rem; padding: var(--b-2); gap: var(--b-1); }
}

/* ==========================================================================
   Niyet ayirici
   turknet'teki "Evimde internet yok / Baska operatorden geciyorum" kurgusunun
   karsiligi. Bizdeki gercek ayrim tek sube / zincir - kendi urun metinlerinizde
   defalarca gecen bolunme. Ziyaretciyi tek tiklamayla dogru aileye goturur.
   ========================================================================== */
.ayirici {
  padding: var(--b-12);
  background: var(--zemin-alt);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
}
.ayirici__bas { text-align: center; max-width: 62ch; margin: 0 auto var(--b-8); }
.ayirici__bas p {
  font-size: var(--fs-base);
  color: var(--metin-ikincil);
  margin-top: var(--b-3);
}
.ayirici__secim { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b-4); }

.secenek {
  display: flex;
  align-items: center;
  gap: var(--b-4);
  padding: var(--b-4) var(--b-6);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.secenek:hover { border-color: var(--vurgu); box-shadow: var(--sh-md); color: inherit; }

.secenek__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  background: var(--zemin-vurgu);
  border-radius: var(--r-md);
}
.secenek__ikon svg { width: 24px; height: 24px; color: var(--vurgu-koyu); fill: none; stroke: currentColor; }

.secenek__metin { flex: 1; min-width: 0; }
.secenek__metin b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
}
.secenek__metin span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
  margin-top: var(--b-1);
}

.secenek__ok {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--kenarlik-koyu);
  border-radius: var(--r-md);
  transition: background var(--gecis), border-color var(--gecis);
}
.secenek__ok .ikon { color: var(--metin); }
.secenek:hover .secenek__ok { background: var(--vurgu); border-color: var(--vurgu); }
.secenek:hover .secenek__ok .ikon { color: var(--metin-ters); }

@media (max-width: 860px) {
  .ayirici { padding: var(--b-6); }
  .ayirici__secim { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hizli erisim seridi
   Dort gercek kanal. WhatsApp hatti eski site icerigindeydi ama hicbir yerde
   kullanilmiyordu; buraya alindi.
   ========================================================================== */
.serit { border-top: 1px solid var(--kenarlik); padding-block: var(--b-12); }
.serit__liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.serit__liste li + li { border-left: 1px solid var(--kenarlik); }
.serit__liste a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-1);
  padding: var(--b-2) var(--b-4);
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.serit__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--b-2);
  background: var(--zemin-vurgu);
  border-radius: var(--r-md);
  transition: background var(--gecis);
}
.serit__ikon svg { width: 24px; height: 24px; color: var(--vurgu-koyu); fill: none; stroke: currentColor; transition: color var(--gecis); }
.serit__liste a:hover .serit__ikon { background: var(--vurgu); }
.serit__liste a:hover .serit__ikon svg { color: var(--metin-ters); }

.serit__liste b {
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
}
.serit__liste a > span:last-child {
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
}

@media (max-width: 760px) {
  .serit__liste { grid-template-columns: 1fr 1fr; gap: var(--b-6) 0; }
  .serit__liste li:nth-child(odd) { border-left: 0; }
  .serit__liste li:nth-child(n+3) { border-top: 1px solid var(--kenarlik); padding-top: var(--b-6); }
}
@media (max-width: 420px) {
  .serit__liste { grid-template-columns: 1fr; }
  .serit__liste li + li { border-left: 0; border-top: 1px solid var(--kenarlik); padding-top: var(--b-6); }
}

/* ==========================================================================
   Icerik bilesenleri (urun sayfalari)

   Ham metinde 396 madde duz <li> olarak duruyordu. Iki ayri tur oldugu
   olculdu: 116 kisa (ortanca 18 karakter) ve 280 uzun (ortanca 100).
   Kisa olanlar rozet, uzun olanlar kart, ikincil bolumler akordiyon.
   ========================================================================== */

/* --- Rozet seridi: kisa, tek kelimelik vaatler --- */
.rozet-serit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-2);
  list-style: none;
  margin: var(--b-6) 0 var(--b-8);
  padding: 0;
  max-width: none;
}
.rozet-serit li {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--vurgu-koyu);
  background: var(--zemin-vurgu);
  border: 1px solid var(--red-100);
  border-radius: var(--r-sm);
  padding: var(--b-2) var(--b-3);
  margin: 0;
  line-height: 1.3;
}

/* --- Ozellik kartlari: tam cumlelik aciklamalar --- */
.ozellik-izgara {
  display: grid;
  gap: var(--b-4);
  list-style: none;
  margin: var(--b-6) 0 var(--b-8);
  padding: 0;
  max-width: none;
}
.ozellik-izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ozellik-izgara--1 { grid-template-columns: minmax(0, 1fr); }

.ozellik {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--b-3);
  align-items: start;
  padding: var(--b-4);
  margin: 0;
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  transition: border-color var(--gecis);
}
.ozellik:hover { border-color: var(--kenarlik-koyu); }

.ozellik__im {
  grid-row: 1 / span 2;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .15rem;
  fill: none;
  stroke: var(--vurgu);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ozellik b {
  grid-column: 2;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
  margin-bottom: var(--b-1);
}
.ozellik span {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
}
/* Baslik yoksa metin tek satira yayilir */
.ozellik > span:first-of-type:not(:nth-child(3)) { grid-row: 1 / span 2; }

/* --- Akordiyon: ikincil detaylar. Native <details>, JS gerekmez. --- */
.akordiyon-blok {
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  background: var(--zemin);
  margin: var(--b-6) 0 var(--b-8);
  max-width: none;
}
.akordiyon-blok summary {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  padding: var(--b-4) var(--b-6);
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
  cursor: pointer;
  list-style: none;
}
.akordiyon-blok summary::-webkit-details-marker { display: none; }
.akordiyon-blok summary::after {
  content: "";
  width: .55rem;
  height: .55rem;
  margin-left: auto;
  border-right: 2px solid var(--metin-soluk);
  border-bottom: 2px solid var(--metin-soluk);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--gecis);
}
.akordiyon-blok[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.akordiyon-blok summary span {
  font-family: var(--font-govde);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--vurgu-koyu);
  background: var(--zemin-vurgu);
  border-radius: var(--r-xs);
  padding: 2px var(--b-2);
}
.akordiyon-blok summary:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; border-radius: var(--r-lg); }

.akordiyon-blok__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-3) var(--b-8);
  list-style: none;
  margin: 0;
  padding: 0 var(--b-6) var(--b-6);
  border-top: 1px solid var(--kenarlik);
  padding-top: var(--b-4);
}
.akordiyon-blok__liste li {
  position: relative;
  padding-left: var(--b-4);
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
  margin: 0;
}
.akordiyon-blok__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px;
  height: 5px;
  background: var(--vurgu);
  border-radius: 50%;
}

@media (max-width: 760px) {
  .ozellik-izgara--2 { grid-template-columns: minmax(0, 1fr); }
  .akordiyon-blok__liste { grid-template-columns: minmax(0, 1fr); }
  .akordiyon-blok summary { padding: var(--b-4); }
  .akordiyon-blok__liste { padding-inline: var(--b-4); }
}

/* Karsilastirma tablosu: ilk sutun urun adi (baglanti), ikinci sutun tanim.
   Tanimlarin tamami urunlerin kendi sayfalarindaki ilk cumleden uretilir. */
.tablo--karsilastirma th[scope="row"] {
  background: var(--zemin);
  font-family: var(--font-baslik);
  font-weight: 700;
  width: 34%;
  vertical-align: top;
}
.tablo--karsilastirma th[scope="row"] a { color: var(--metin); text-decoration: none; }
.tablo--karsilastirma th[scope="row"] a:hover { color: var(--vurgu-koyu); text-decoration: underline; }
.tablo--karsilastirma td { color: var(--metin-ikincil); line-height: var(--lh-genis); }
.tablo--karsilastirma tbody tr:hover th[scope="row"],
.tablo--karsilastirma tbody tr:hover td { background: var(--zemin-alt); }

@media (max-width: 640px) {
  .tablo--karsilastirma th[scope="row"] { width: auto; }
  .tablo--karsilastirma thead { display: none; }
  .tablo--karsilastirma tr { display: block; border-bottom: 1px solid var(--kenarlik); }
  .tablo--karsilastirma th[scope="row"],
  .tablo--karsilastirma td { display: block; border-bottom: 0; padding-block: var(--b-2); }
  .tablo--karsilastirma th[scope="row"] { padding-bottom: 0; }
}

/* Referanslar sayfasi: bolum basliginda adet rozeti, ust kisimda sayi kutulari */
.bolum__adet {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--b-3);
  font-family: var(--font-govde);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--vurgu-koyu);
  background: var(--zemin-vurgu);
  border-radius: var(--r-xs);
  padding: 2px var(--b-2);
}
.ent-sayi--referans { max-width: 44rem; }

/* ==========================================================================
   Iletisim sayfasi: ofis kartlari ve ulasim kanallari
   Dar metin sutununun (68ch) icinde durur, 480px altinda tek sutuna iner.
   Kartlarin icerigi data/sayfalar.json -> site.ofisler icinden uretilir.
   ========================================================================== */
.ofis-izgara {
  display: grid;
  /* Sabit tavan: metin sutunu artik 1200px'e kadar acilabiliyor, esit bolunen
     iki sutun kartlari 590px'e cikarip iki satirlik adresi seyreltiyordu. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem));
  gap: var(--b-4);
  margin-bottom: var(--b-4);
}
/* .metin p kart basligini da yakaliyor; kart ritmini geri al */
.ofis-izgara .kart__baslik { margin-bottom: var(--b-2); }
.ofis-adres {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
}

.ofis-kanal {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--b-3) var(--b-6);
  margin: 0;
}
.ofis-kanal dt { font-weight: 700; }
.ofis-kanal dd { margin: 0; color: var(--metin-ikincil); }

@media (max-width: 480px) {
  .ofis-izgara { grid-template-columns: 1fr; }
  .ofis-kanal { grid-template-columns: 1fr; gap: var(--b-1); }
  .ofis-kanal dd { margin-bottom: var(--b-3); }
}