/* kimlik.css */
/* Etesio kimlik katmani
   Renk, tipografi, bosluk ve kose dili buradan gelir.
   Bilesenler bu degiskenleri kullanir - elle renk yazilmaz.

   Marka: mor-altin (03.08.2026 karari).
   Mor tek basina kalirsa piyasadaki SaaS sablonlarina benzer;
   altin vurgu ayirt edici olani. */

:root {
  color-scheme: light;

  /* ── Marka ── */
  --mor-900: #1d1225;
  --mor-800: #2a1a36;
  --mor-700: #3b2450;
  --mor-600: #4f2f6b;
  --mor-500: #6b3f8f;
  --mor-400: #8b5cb0;
  --mor-300: #b18fd0;
  --mor-200: #d8c4e8;
  --mor-100: #efe7f6;

  --altin-600: #9a7420;
  --altin-500: #c2952c;
  --altin-400: #d9ae45;
  --altin-300: #e8c877;
  --altin-100: #f7ecd0;

  /* ── Anlam ── */
  --ana: var(--mor-600);
  --ana-koyu: var(--mor-700);
  --ana-acik: var(--mor-400);
  --vurgu: var(--altin-500);
  --vurgu-acik: var(--altin-300);

  --basari: #2f7a55;
  --uyari: #a76b12;
  --tehlike: #a33a3a;

  /* ── Zemin ve metin ── */
  --zemin: #ffffff;
  --zemin-2: #f7f5fa;
  --zemin-3: #efebf4;
  --kart: #ffffff;
  --kenar: #e3dcec;
  --kenar-koyu: #cfc4dc;

  --metin: #241a2e;
  --metin-2: #574a63;
  --metin-3: #7d7189;
  --metin-ters: #ffffff;

  /* ── Tipografi ── */
  --yazi-baslik: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --yazi-govde: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --olcek-1: 0.78rem;
  --olcek-2: 0.875rem;
  --olcek-3: 1rem;
  --olcek-4: 1.125rem;
  --olcek-5: 1.375rem;
  --olcek-6: 1.75rem;
  --olcek-7: 2.25rem;
  --olcek-8: 3rem;
  --olcek-9: 3.75rem;

  /* ── Bosluk ritmi (1.5 kat) ── */
  --aralik-1: 0.25rem;
  --aralik-2: 0.5rem;
  --aralik-3: 0.75rem;
  --aralik-4: 1rem;
  --aralik-5: 1.5rem;
  --aralik-6: 2rem;
  --aralik-7: 3rem;
  --aralik-8: 4rem;
  --aralik-9: 6rem;

  /* ── Kose dili: yumusak ama yuvarlak degil ── */
  --kose-kucuk: 6px;
  --kose-orta: 10px;
  --kose-buyuk: 16px;
  --kose-tam: 999px;

  /* ── Derinlik: golge yerine kenar + ince katman ── */
  --golge-1: 0 1px 2px rgba(36, 26, 46, .06);
  --golge-2: 0 4px 16px rgba(36, 26, 46, .08);
  --golge-3: 0 12px 40px rgba(36, 26, 46, .12);

  --gecis: 180ms cubic-bezier(.4, 0, .2, 1);
  --kapsayici: 1180px;
}

/* ── Koyu tema ── */
:root[data-tema="koyu"] {
  color-scheme: dark;

  --zemin: #14101a;
  --zemin-2: #1b1523;
  --zemin-3: #241c2e;
  --kart: #1f1828;
  --kenar: #332a41;
  --kenar-koyu: #453a56;

  --metin: #f2eef7;
  --metin-2: #c3b8d0;
  --metin-3: #948aa1;
  --metin-ters: #14101a;

  --ana: var(--mor-300);
  --ana-koyu: var(--mor-200);
  --ana-acik: var(--mor-400);
  --vurgu: var(--altin-400);
  --vurgu-acik: var(--altin-300);

  --golge-1: 0 1px 2px rgba(0, 0, 0, .4);
  --golge-2: 0 4px 16px rgba(0, 0, 0, .45);
  --golge-3: 0 12px 40px rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    color-scheme: dark;
    --zemin: #14101a;
    --zemin-2: #1b1523;
    --zemin-3: #241c2e;
    --kart: #1f1828;
    --kenar: #332a41;
    --kenar-koyu: #453a56;
    --metin: #f2eef7;
    --metin-2: #c3b8d0;
    --metin-3: #948aa1;
    --metin-ters: #14101a;
    --ana: var(--mor-300);
    --ana-koyu: var(--mor-200);
    --vurgu: var(--altin-400);
    --golge-1: 0 1px 2px rgba(0, 0, 0, .4);
    --golge-2: 0 4px 16px rgba(0, 0, 0, .45);
    --golge-3: 0 12px 40px rgba(0, 0, 0, .55);
  }
}

/* ── Temel ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--olcek-3);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 var(--aralik-4);
  color: var(--metin);
}

p { margin: 0 0 var(--aralik-4); color: var(--metin-2); }
a { color: var(--ana); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--ana-koyu); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
  border-radius: var(--kose-kucuk);
}

.kapsayici {
  width: min(100% - 2.5rem, var(--kapsayici));
  margin-inline: auto;
}

.atla {
  position: absolute;
  left: -9999px;
  top: var(--aralik-3);
  background: var(--ana);
  color: var(--metin-ters);
  padding: var(--aralik-3) var(--aralik-5);
  border-radius: var(--kose-orta);
  z-index: 100;
}
.atla:focus { left: var(--aralik-4); }

/* site.css */
/* Etesio site katmani - bilesen gorunumleri.
   Her bolum kendi renklerini --bolum-* degiskenleriyle ezebilir;
   yonetim panelinden gelen renk buraya dusuyor. */

/* ═══════════════ TEPE ═══════════════ */
.tepe {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--zemin) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--kenar);
}
.tepe[data-yapiskan="hayir"] { position: static; }

.tepe-ic {
  display: flex;
  align-items: center;
  gap: var(--aralik-5);
  min-height: 72px;
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: var(--aralik-3);
  color: var(--metin);
  flex-shrink: 0;
}
.marka img { width: 38px; height: 38px; border-radius: var(--kose-kucuk); }
.marka-ad {
  display: block;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: var(--olcek-5);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.marka-alt {
  display: block;
  font-size: var(--olcek-1);
  color: var(--metin-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.menu { margin-inline: auto; }
.menu > ul { display: flex; align-items: center; gap: var(--aralik-2); }
.menu a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--aralik-2) var(--aralik-3);
  border-radius: var(--kose-orta);
  color: var(--metin-2);
  font-size: var(--olcek-2);
  font-weight: 500;
}
.menu a:hover { color: var(--metin); background: var(--zemin-2); }
.menu-ok { width: 14px; height: 14px; opacity: .6; }

.menu-acilir { position: relative; }
.menu-alt {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  box-shadow: var(--golge-2);
  padding: var(--aralik-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.menu-acilir:hover .menu-alt,
.menu-acilir:focus-within .menu-alt {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu-alt a { display: block; width: 100%; }

.tepe-sag { display: flex; align-items: center; gap: var(--aralik-2); flex-shrink: 0; }

.tema-dugme, .menu-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--kenar);
  background: transparent;
  border-radius: var(--kose-orta);
  color: var(--metin-2);
  cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis);
}
.tema-dugme:hover, .menu-dugme:hover { border-color: var(--ana); color: var(--ana); }
.tema-dugme svg { width: 19px; height: 19px; }
.tema-gunes { display: none; }
:root[data-tema="koyu"] .tema-ay { display: none; }
:root[data-tema="koyu"] .tema-gunes { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tema-ay { display: none; }
  :root:not([data-tema="acik"]) .tema-gunes { display: block; }
}

.menu-dugme { display: none; flex-direction: column; gap: 4px; }
.menu-dugme span {
  display: block; width: 17px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--gecis), opacity var(--gecis);
}
.menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ═══════════════ DUGME ═══════════════ */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aralik-2);
  padding: 0.8rem 1.5rem;
  border-radius: var(--kose-orta);
  font-family: var(--yazi-baslik);
  font-size: var(--olcek-2);
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--gecis), background var(--gecis), border-color var(--gecis);
}
.dugme:active { transform: translateY(1px); }
.dugme-kucuk { padding: 0.55rem 1.1rem; font-size: var(--olcek-1); }

.dugme-ana {
  background: var(--ana);
  color: #fff;
  box-shadow: var(--golge-1);
}
.dugme-ana:hover { background: var(--ana-koyu); color: #fff; }
:root[data-tema="koyu"] .dugme-ana { color: var(--mor-900); }

.dugme-ikincil {
  background: transparent;
  color: var(--metin);
  border-color: var(--kenar-koyu);
}
.dugme-ikincil:hover { border-color: var(--ana); color: var(--ana); }

.dugme-yalin { background: transparent; color: var(--ana); padding-inline: var(--aralik-2); }
.dugme-yalin:hover { color: var(--ana-koyu); }

.dugme-grubu { display: flex; flex-wrap: wrap; gap: var(--aralik-3); margin-top: var(--aralik-5); }

/* ═══════════════ BOLUM ═══════════════ */
.bolum {
  position: relative;
  /* Yapiskan tepe, capayla gelinen bolumun basligini ortmesin */
  scroll-margin-top: 88px;
  /* --sira-zemin: panelde renk secilmemis bolumun sirasina gore aldigi zemin
     (vitrin.css). Panelden secilen renk her zaman once gelir. */
  background: var(--bolum-zemin, var(--sira-zemin, transparent));
  color: var(--bolum-metin, inherit);
  padding-top: var(--bolum-ust, var(--aralik-8));
  padding-bottom: var(--bolum-alt, var(--aralik-8));
}
.bolum-dar .kapsayici { max-width: var(--kapsayici); }
/* Koyu temada bolumun KENDI koyu rengi varsa o kullanilir; yoksa acik tema
   icin secilen renge duser. Iki tema icin ayri renk secilebilmesi panelden
   gelir (bilesenler.js: arkaplanKoyu / metinRengiKoyu). */
:root[data-tema="koyu"] .bolum {
  background: var(--bolum-zemin-koyu, var(--bolum-zemin, var(--sira-zemin, transparent)));
  color: var(--bolum-metin-koyu, var(--bolum-metin, inherit));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .bolum {
    background: var(--bolum-zemin-koyu, var(--bolum-zemin, var(--sira-zemin, transparent)));
    color: var(--bolum-metin-koyu, var(--bolum-metin, inherit));
  }
}


.bolum-tam .kapsayici { width: 100%; max-width: none; padding-inline: var(--aralik-5); }
.hiza-orta { text-align: center; }
.hiza-orta .dugme-grubu { justify-content: center; }
.hiza-sag { text-align: right; }

/* Desenler - sablon gorunumu vermeyen ince dokular */
.desen-isik::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 12% 0%, color-mix(in srgb, var(--ana) 12%, transparent), transparent 70%),
    radial-gradient(45% 50% at 92% 8%, color-mix(in srgb, var(--vurgu) 10%, transparent), transparent 70%);
  pointer-events: none;
}
/* Kapanis cagrisi bandi (Musa, 19 Agu 2026: "o bolumun rengini de temalara
   uyarla"). Acik temada oldugu gibi dolu ana renk kaliyor; koyu temada ayni
   parlaklikta kalsaydi sayfanin ortasinda isik lekesi gibi duruyordu.
   Koyu temada ana renk zeminle karistirilip derinlestiriliyor. */
.desen-vurgu {
  background: var(--bolum-zemin, var(--ana));
  color: #fff;
}

/* KOYU TEMADA CIPA --ana DEGIL --mor-800.
   Koyu temada `--ana` skalanin ACIK basamagina donuyor (kimlik.css:
   --ana: var(--mor-300)); onunla karistirinca bant ACIK GRI cikti ve
   uzerindeki beyaz baslik okunmaz oldu. --mor-* skalasi tema blogunda
   ezilmiyor, 800 basamagi iki temada da koyu kaliyor - dogru cipa bu. */
:root[data-tema="koyu"] .desen-vurgu {
  background: var(--bolum-zemin-koyu,
              var(--bolum-zemin, color-mix(in srgb, var(--mor-800) 78%, var(--zemin))));
  border-block: 1px solid color-mix(in srgb, var(--mor-400) 30%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .desen-vurgu {
    background: var(--bolum-zemin-koyu,
                var(--bolum-zemin, color-mix(in srgb, var(--mor-800) 78%, var(--zemin))));
    border-block: 1px solid color-mix(in srgb, var(--mor-400) 30%, transparent);
  }
}
/* PANELDEN SECILEN METIN RENGI ARTIK GECERLI.
   Bu bolumun yazi rengi #fff olarak SABITLENMISTI. Panelden acik bir zemin
   secildiginde (20 Agu 2026'da kapanis cagrisina #b3c5d5 secilmisti) beyaz
   baslik okunmaz hale geliyordu: panel bir renk sunup onu yok sayiyordu.
   Artik once bolumun kendi rengi, o yoksa beyaz. */
.desen-vurgu .bolum-baslik,
.desen-vurgu .cagri-baslik,
.desen-vurgu h2 { color: var(--bolum-baslik, var(--bolum-metin, #fff)); }
.desen-vurgu p { color: var(--bolum-metin, color-mix(in srgb, #fff 78%, transparent)); }

/* KOYU TEMA METNI AYRI BLOKTA. Once koyu deger acik temanin yedek zincirine
   de konmustu; sonuc: acik temada baslik koyu temanin acik rengini aliyor,
   koyu temada paragraf acik temanin koyu rengini aliyordu - iki tema da
   okunmuyordu. Tema degeri yalniz tema blogunda gecerli olmali. */
:root[data-tema="koyu"] .desen-vurgu .bolum-baslik,
:root[data-tema="koyu"] .desen-vurgu .cagri-baslik,
:root[data-tema="koyu"] .desen-vurgu h2 {
  color: var(--bolum-baslik, var(--bolum-metin-koyu, var(--bolum-metin, #fff)));
}
:root[data-tema="koyu"] .desen-vurgu p {
  color: var(--bolum-metin-koyu, color-mix(in srgb, #fff 78%, transparent));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .desen-vurgu .bolum-baslik,
  :root:not([data-tema="acik"]) .desen-vurgu .cagri-baslik,
  :root:not([data-tema="acik"]) .desen-vurgu h2 {
    color: var(--bolum-baslik, var(--bolum-metin-koyu, var(--bolum-metin, #fff)));
  }
  :root:not([data-tema="acik"]) .desen-vurgu p {
    color: var(--bolum-metin-koyu, color-mix(in srgb, #fff 78%, transparent));
  }
}
.desen-vurgu .dugme-ana { background: var(--vurgu); color: var(--mor-900); }
.desen-vurgu .dugme-ana:hover { background: var(--vurgu-acik); }
.desen-vurgu .dugme-ikincil {
  color: var(--bolum-metin, #fff);
  border-color: color-mix(in srgb, var(--bolum-metin, #fff) 35%, transparent);
}
.desen-vurgu .dugme-ikincil:hover {
  border-color: var(--bolum-metin, #fff);
  color: var(--bolum-metin, #fff);
}

/* Marka logosu temaya gore degisir (Musa, 19 Agu 2026).
   Iki gorsel de basilir, biri gizlenir - tema hem cihaz ayarindan hem de
   ust bardaki dugmeden gelebiliyor ve <picture> dugmeyi gormuyor. */
.marka-logo-koyu { display: none; }

:root[data-tema="koyu"] .marka-logo-acik { display: none; }
:root[data-tema="koyu"] .marka-logo-koyu { display: inline-block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .marka-logo-acik { display: none; }
  :root:not([data-tema="acik"]) .marka-logo-koyu { display: inline-block; }
}

/* ═══════════════ BOLUM TONU ═══════════════
   Musa'nin 19 Agu 2026 karari: sayfa tek seferde degil BOLUM BOLUM koyuya
   gececek ("once ust bolum ve urun bolumu, gosterip onay al, sonra kalani").

   Yontem: bolumun icinde kimlik belirteclerini yeniden tanimlamak. Boylece
   icerideki kart, kenar, baslik ve ikincil metin kendiliginden dogru renge
   gecer - her bilesene ayri kural yazmak gerekmez.

   Panelde Gorunum sekmesindeki "Bolum tonu" alanindan secilir. */

.bolum-ton-koyu {
  --zemin: #0b1430;
  --zemin-2: #101c3f;
  --zemin-3: #16244b;
  --zemin-4: #1b2a55;
  --kart: rgba(255, 255, 255, 0.045);
  --kenar: rgba(255, 255, 255, 0.11);
  --kenar-koyu: rgba(255, 255, 255, 0.2);

  --metin: #eef1fa;
  --metin-2: #a8b4d4;
  --metin-3: #7f8db1;
  --metin-ters: #0b1430;

  --golge-1: 0 1px 2px rgba(0, 0, 0, .45);
  --golge-2: 0 4px 16px rgba(0, 0, 0, .5);
  --golge-3: 0 12px 40px rgba(0, 0, 0, .6);

  background: var(--bolum-zemin, linear-gradient(180deg, var(--zemin-2), var(--zemin)));
  color: var(--metin);
}

/* Ana renk koyu zeminde acilir - koyu lacivert uzerinde koyu mavi baglanti
   okunmuyor. Skalanin 300'u ayni aileden, yalnizca daha acik. */
.bolum-ton-koyu {
  --ana: var(--mor-300);
  --ana-koyu: var(--mor-200);
}
.bolum-ton-koyu .bolum-baslik,
.bolum-ton-koyu h1,
.bolum-ton-koyu h2,
.bolum-ton-koyu h3 { color: var(--bolum-baslik, #fff); }

/* Ana dugme koyu zeminde de dolu kalir; ikincil dugme cizgiye doner. */
.bolum-ton-koyu .dugme-ana { background: var(--mor-500); color: #fff; }
.bolum-ton-koyu .dugme-ana:hover { background: var(--mor-400); }
.bolum-ton-koyu .dugme-ikincil {
  color: var(--metin);
  border-color: var(--kenar-koyu);
  background: transparent;
}
.bolum-ton-koyu .dugme-ikincil:hover { border-color: var(--ana); color: #fff; }

/* Ust etiket rozetinin acik zemini koyu bolumde bembeyaz kaliyordu.
   Koyu temadaki kuralin aynisi, bu kez bolum kapsaminda. */
.bolum-ton-koyu .bolum-etiket {
  background: color-mix(in srgb, var(--ana) 18%, transparent);
  border-color: color-mix(in srgb, var(--ana) 32%, transparent);
  color: var(--mor-200);
}

/* Acik ton: koyu temada bir bolumu bilerek acik birakmak icin. */
.bolum-ton-acik {
  --zemin: #ffffff;
  --zemin-2: #f9fafb;
  --zemin-3: #f4f5f8;
  --kart: #ffffff;
  --kenar: #e6e8ef;
  --kenar-koyu: #d3d7e2;
  --metin: #0f1e33;
  --metin-2: #47536b;
  --metin-3: #6b768c;
  --metin-ters: #ffffff;
  background: var(--bolum-zemin, var(--zemin));
  color: var(--metin);
}

.bolum-tepe { max-width: 46rem; margin-bottom: var(--aralik-7); }
.hiza-orta .bolum-tepe { margin-inline: auto; }

.bolum-etiket {
  display: inline-block;
  font-family: var(--yazi-baslik);
  font-size: var(--olcek-1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bolum-vurgu, var(--vurgu));
  margin-bottom: var(--aralik-3);
}
.bolum-baslik {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, var(--olcek-7));
  color: var(--bolum-baslik, var(--metin));
  margin-bottom: var(--aralik-3);
}
.bolum-alt { font-size: var(--olcek-4); color: var(--metin-2); margin: 0; }

/* ═══════════════ KAHRAMAN ═══════════════ */
.kahraman-duzen { position: relative; }
.kahraman-ikili {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--aralik-8);
  align-items: center;
}
.kahraman-yazi { max-width: 40rem; }
.kahraman-baslik {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, var(--olcek-9));
  line-height: 1.08;
  margin-bottom: var(--aralik-5);
}
.kahraman-alt {
  font-size: var(--olcek-4);
  color: var(--metin-2);
  max-width: 34rem;
}
.kahraman-not {
  margin-top: var(--aralik-5);
  font-size: var(--olcek-2);
  color: var(--metin-3);
}
.kahraman-gorsel img { border-radius: var(--kose-buyuk); box-shadow: var(--golge-3); }

/* ═══════════════ IZGARA / KART ═══════════════ */
.izgara { display: grid; gap: var(--aralik-5); }
.izgara-2 { grid-template-columns: repeat(2, 1fr); }
.izgara-3 { grid-template-columns: repeat(3, 1fr); }
.izgara-4 { grid-template-columns: repeat(4, 1fr); }

.kart {
  background: var(--bolum-kart, var(--kart));
  border: 1px solid var(--bolum-kenar, var(--kenar));
  border-radius: var(--bolum-kose, var(--kose-buyuk));
  padding: var(--aralik-6);
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.kart-bagli:hover {
  border-color: var(--kart-vurgu, var(--ana));
  transform: translateY(-3px);
  box-shadow: var(--golge-2);
}
.kart-simge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--kose-orta);
  background: color-mix(in srgb, var(--kart-vurgu, var(--ana)) 12%, transparent);
  color: var(--kart-vurgu, var(--ana));
  margin-bottom: var(--aralik-4);
}
.kart-simge svg { width: 22px; height: 22px; }
.kart-baslik { font-size: var(--olcek-4); margin-bottom: var(--aralik-2); }
.kart-metin { font-size: var(--olcek-2); margin: 0; }

/* ═══════════════ ADIMLAR ═══════════════ */
.adim-listesi { display: grid; gap: var(--aralik-6); grid-template-columns: repeat(3, 1fr); }
.adim { display: flex; gap: var(--aralik-4); align-items: flex-start; }
.adim-no {
  font-family: var(--yazi-baslik);
  font-size: var(--olcek-6);
  font-weight: 700;
  color: var(--bolum-vurgu, var(--vurgu));
  line-height: 1;
  flex-shrink: 0;
}
.adim-baslik { font-size: var(--olcek-4); margin-bottom: var(--aralik-2); }
.adim-metin { font-size: var(--olcek-2); margin: 0; }

/* ═══════════════ SAYILAR ═══════════════ */
.sayi-grubu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aralik-5);
  text-align: center;
}
.sayi-oge { padding: var(--aralik-4); }
.sayi-deger {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, var(--olcek-8));
  font-weight: 700;
  color: var(--bolum-vurgu, var(--ana));
  line-height: 1.1;
}
.sayi-etiket { display: block; font-size: var(--olcek-2); color: var(--metin-3); margin-top: var(--aralik-2); }

/* ═══════════════ PAKETLER ═══════════════ */
.paket-grubu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--aralik-5); align-items: start; }
.paket {
  position: relative;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-buyuk);
  padding: var(--aralik-6);
  display: flex;
  flex-direction: column;
  gap: var(--aralik-3);
}
.paket-one-cikan {
  border-color: var(--ana);
  box-shadow: var(--golge-2);
}
.paket-rozet {
  position: absolute; top: -11px; left: var(--aralik-6);
  background: var(--vurgu); color: var(--mor-900);
  font-size: var(--olcek-1); font-weight: 600;
  padding: 3px 12px; border-radius: var(--kose-tam);
}
.paket-ad { font-size: var(--olcek-4); margin: 0; }
.paket-fiyat { margin: 0; display: flex; align-items: baseline; gap: 6px; }
/* Donem secicinin gizledigi fiyat gercekten gizlensin: display:flex hidden ozniteligini eziyordu */
.paket-fiyat[hidden] { display: none; }
.paket-fiyat span { font-family: var(--yazi-baslik); font-size: var(--olcek-7); font-weight: 700; color: var(--metin); }
.paket-fiyat small { color: var(--metin-3); font-size: var(--olcek-2); }
.paket-aciklama { font-size: var(--olcek-2); margin: 0; }
.paket-maddeler { display: grid; gap: var(--aralik-2); margin: var(--aralik-2) 0; }
.paket-maddeler li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--olcek-2); color: var(--metin-2);
}
.paket-maddeler li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--vurgu);
}
.paket .dugme { margin-top: auto; }
.paket-fiyat s { color: var(--metin-3); font-size: var(--olcek-2); }

/* ═══════════════ ALAN ADI VE BARINDIRMA (etesio.net.tr katalogu) ═══════════════ */
.barindirma-kategoriler {
  display: flex; flex-wrap: wrap; gap: var(--aralik-2);
  margin: 0 0 var(--aralik-6);
}
.barindirma-kategoriler a {
  padding: 6px 14px; border: 1px solid var(--kenar); border-radius: var(--kose-tam);
  font-size: var(--olcek-2); color: var(--metin-2); text-decoration: none;
  transition: border-color var(--gecis), color var(--gecis);
}
.barindirma-kategoriler a:hover, .barindirma-kategoriler a:focus-visible { border-color: var(--ana); color: var(--ana); }
.barindirma-kategori, .barindirma-bolum { scroll-margin-top: 6rem; }
.barindirma-kategori + .barindirma-kategori { margin-top: var(--aralik-8); }
.barindirma-kategori-ad { font-size: var(--olcek-5); margin: 0 0 var(--aralik-5); }
.barindirma-bolum + .barindirma-bolum { margin-top: var(--aralik-9, var(--aralik-8)); }
.barindirma-bolum-ad {
  font-size: var(--olcek-6, var(--olcek-5)); margin: 0 0 var(--aralik-6);
  padding-bottom: var(--aralik-3); border-bottom: 1px solid var(--kenar);
}
.barindirma-bolum .barindirma-kategori-ad { font-size: var(--olcek-4); }
.barindirma-not { margin: var(--aralik-6) 0 0; font-size: var(--olcek-2); color: var(--metin-3); }
.barindirma-sorgu {
  display: flex; gap: var(--aralik-2); max-width: 36rem; margin: 0 0 var(--aralik-6);
}
.barindirma-sorgu input {
  flex: 1; min-width: 0; padding: 12px 16px; font: inherit;
  border: 1px solid var(--kenar-koyu); border-radius: var(--kose-orta);
  background: var(--kart); color: var(--metin);
}
.barindirma-sonuc {
  display: grid; gap: var(--aralik-2); max-width: 46rem; margin: calc(-1 * var(--aralik-3)) 0 var(--aralik-6);
  font-size: var(--olcek-2); color: var(--metin-2);
}
.barindirma-sonuc[hidden] { display: none; }
.barindirma-sonuc-satir {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--aralik-4);
  padding: 12px 16px; background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--kose-orta);
}
.barindirma-sonuc-satir.aranan { border-color: var(--ana); padding: 16px 20px; }
.barindirma-sonuc-satir strong { color: var(--metin); overflow-wrap: anywhere; }
.barindirma-sonuc-satir.aranan strong { font-size: var(--olcek-4); }
.barindirma-durum { font-size: var(--olcek-1); font-weight: 600; padding: 3px 10px; border-radius: var(--kose-tam); background: var(--zemin-2); }
.musait .barindirma-durum { background: color-mix(in srgb, var(--ana) 14%, transparent); color: var(--ana); }
.alinmis .barindirma-durum { color: var(--metin-3); }
.barindirma-sonuc-fiyat { color: var(--metin); font-weight: 600; }
.barindirma-sonuc-satir .dugme { padding-block: 8px; }
.barindirma-sonuc-baslik { margin: var(--aralik-3) 0 0; color: var(--metin-3); font-size: var(--olcek-1); text-transform: uppercase; letter-spacing: .06em; }
.barindirma-tablo-sar { overflow-x: auto; border: 1px solid var(--kenar); border-radius: var(--kose-buyuk); background: var(--kart); }
.barindirma-tablo { width: 100%; border-collapse: collapse; font-size: var(--olcek-2); }
.barindirma-tablo th, .barindirma-tablo td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--kenar); white-space: nowrap; }
.barindirma-tablo thead th { color: var(--metin-3); font-weight: 600; }
.barindirma-tablo tbody tr:last-child > * { border-bottom: 0; }
.barindirma-tablo tbody th { font-family: var(--yazi-baslik); color: var(--metin); }
/* Sekmeli katalog: ustte hizmet sekmeleri, solda acik sekmenin kategorileri (api/barindirma.js sekmeliHtml) */
.paket-grubu-2 { grid-template-columns: repeat(2, 1fr); }
.paket-grubu-4 { grid-template-columns: repeat(4, 1fr); }
.bk-sekmeli { --bk-vurgu: var(--ana); }
.bk-sekmeler {
  display: flex; gap: var(--aralik-2); margin: 0 0 var(--aralik-7);
  overflow-x: auto; scrollbar-width: none; padding: 2px;
}
.bk-sekmeler::-webkit-scrollbar { display: none; }
.bk-sekmeler [role="tab"] {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 10px 20px; font: inherit; font-weight: 600; font-size: var(--olcek-2);
  color: var(--metin-2); background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--kose-tam);
  cursor: pointer; transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.bk-sekmeler [role="tab"] svg { width: 18px; height: 18px; flex: none; }
.bk-sekmeler [role="tab"]:hover { border-color: var(--bk-vurgu); color: var(--bk-vurgu); }
.bk-sekmeler [role="tab"][aria-selected="true"] { background: var(--bk-vurgu); border-color: var(--bk-vurgu); color: #fff; }
.bk-sekmeler-cizgi { gap: var(--aralik-5); border-bottom: 1px solid var(--kenar); padding: 0; }
.bk-sekmeler-cizgi [role="tab"] { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 2px; margin-bottom: -1px; }
.bk-sekmeler-cizgi [role="tab"][aria-selected="true"] { background: none; color: var(--bk-vurgu); border-bottom-color: var(--bk-vurgu); }
.bk-sekmeler-kutu { gap: 0; }
.bk-sekmeler-kutu [role="tab"] { border-radius: 0; margin-left: -1px; }
.bk-sekmeler-kutu [role="tab"]:first-child { border-radius: var(--kose-orta) 0 0 var(--kose-orta); margin-left: 0; }
.bk-sekmeler-kutu [role="tab"]:last-child { border-radius: 0 var(--kose-orta) var(--kose-orta) 0; }
.bk-panel[hidden] { display: none; }
.bk-duzen { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--aralik-7); align-items: start; }
.bk-duzen-tek { grid-template-columns: minmax(0, 1fr); }
.bk-sol {
  background: var(--bk-sol-zemin, var(--kart)); border: 1px solid var(--kenar); border-radius: var(--kose-buyuk);
  padding: var(--aralik-4);
}
.bk-sol[data-sabit] { position: sticky; top: 7rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
.bk-sol-baslik { margin: 0 0 var(--aralik-3); padding: 0 12px; font-size: var(--olcek-1); font-weight: 600; color: var(--metin-3); text-transform: uppercase; letter-spacing: .06em; }
.bk-sol nav { display: grid; gap: 2px; }
.bk-sol nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--aralik-2);
  padding: 9px 12px; border-radius: var(--kose-orta); color: var(--metin-2); text-decoration: none; font-size: var(--olcek-2);
  transition: background var(--gecis), color var(--gecis);
}
.bk-sol nav a small { font-size: var(--olcek-1); color: var(--metin-3); background: var(--zemin-2); border-radius: var(--kose-tam); padding: 1px 8px; }
.bk-sol nav a:hover, .bk-sol nav a.aktif { color: var(--bk-vurgu); background: color-mix(in srgb, var(--bk-vurgu) 10%, transparent); }
.bk-sol nav a.aktif { font-weight: 600; }
.bk-sekme-aciklama { margin: 0 0 var(--aralik-6); color: var(--metin-2); }
/* Sol menu yaninda kartlar daralir: fiyat ve birimi bolunmesin, birim gerekirse alt satira insin */
.bk-govde .paket { padding: var(--aralik-5); }
.bk-govde .paket-fiyat { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.bk-govde .paket-fiyat span { white-space: nowrap; font-size: var(--olcek-6); }
.bk-govde .barindirma-kategori:first-child .barindirma-kategori-ad { margin-top: 0; }
@media (max-width: 1023px) {
  .paket-grubu-2, .paket-grubu-4 { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .bk-duzen { grid-template-columns: minmax(0, 1fr); gap: var(--aralik-5); }
  .bk-sol, .bk-sol[data-sabit] { position: static; max-height: none; padding: 0; background: none; border: 0; }
  .bk-sol-baslik { display: none; }
  .bk-sol nav { display: flex; gap: var(--aralik-2); overflow-x: auto; scrollbar-width: none; }
  .bk-sol nav a { flex: 0 0 auto; border: 1px solid var(--kenar); border-radius: var(--kose-tam); padding: 6px 14px; background: var(--kart); }
}

@media (max-width: 479px) {
  .barindirma-sorgu { flex-direction: column; }
  .barindirma-sonuc-satir { grid-template-columns: minmax(0, 1fr) auto; gap: var(--aralik-2) var(--aralik-3); }
  .barindirma-sonuc-satir .dugme { grid-column: 1 / -1; }
  .barindirma-tablo th, .barindirma-tablo td { padding: 10px 12px; }
}

/* ═══════════════ GORUSLER ═══════════════ */
.gorus-grubu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--aralik-5); }
.gorus {
  margin: 0;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-buyuk);
  padding: var(--aralik-6);
}
.gorus blockquote { margin: 0 0 var(--aralik-5); font-size: var(--olcek-3); color: var(--metin-2); }
.gorus figcaption { display: flex; align-items: center; gap: var(--aralik-3); }
.gorus figcaption img { width: 42px; height: 42px; border-radius: var(--kose-tam); object-fit: cover; }
.gorus figcaption strong { display: block; font-size: var(--olcek-2); }
.gorus figcaption small { color: var(--metin-3); font-size: var(--olcek-1); }

/* ═══════════════ SSS ═══════════════ */
.sss-grubu { display: grid; gap: var(--aralik-3); max-width: 52rem; }
.hiza-orta .sss-grubu { margin-inline: auto; text-align: left; }
.sss-oge {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  padding: var(--aralik-4) var(--aralik-5);
}
.sss-oge summary {
  cursor: pointer;
  font-family: var(--yazi-baslik);
  font-weight: 600;
  font-size: var(--olcek-3);
  list-style: none;
  display: flex; justify-content: space-between; gap: var(--aralik-4);
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::after {
  content: "+"; color: var(--vurgu); font-size: var(--olcek-5); line-height: 1;
  transition: transform var(--gecis);
}
.sss-oge[open] summary::after { transform: rotate(45deg); }
.sss-cevap { padding-top: var(--aralik-3); color: var(--metin-2); font-size: var(--olcek-2); }

/* ═══════════════ EKIP ═══════════════ */
.kisi-grubu { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--aralik-5); }
.kisi { text-align: center; }
.kisi img, .kisi-bos {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--kose-buyuk); margin-bottom: var(--aralik-3);
  background: var(--zemin-3);
}
.kisi h3 { font-size: var(--olcek-3); margin-bottom: 2px; }
.kisi p { font-size: var(--olcek-2); color: var(--metin-3); margin: 0; }

/* ═══════════════ CAGRI ═══════════════ */
.cagri-kutu { max-width: 44rem; margin-inline: auto; text-align: center; }
.cagri-baslik { font-size: clamp(1.5rem, 1.1rem + 1.6vw, var(--olcek-7)); margin-bottom: var(--aralik-4); }
.cagri-alt { font-size: var(--olcek-4); }

/* ═══════════════ ILETISIM ═══════════════ */
.iletisim-duzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--aralik-7); }
.blok-baslik {
  font-size: var(--olcek-1); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--metin-3); margin-bottom: var(--aralik-4);
}
.liste { display: grid; gap: var(--aralik-3); }
.liste li { display: grid; gap: 2px; }
.liste-amac { font-size: var(--olcek-1); color: var(--metin-3); }
.liste a, .liste span:not(.liste-amac) { font-size: var(--olcek-3); color: var(--metin); }
.liste a:hover { color: var(--ana); }
.liste-not { margin-top: var(--aralik-4); font-size: var(--olcek-1); color: var(--metin-3); }

/* ═══════════════ LOGO SERIT ═══════════════ */
.serit-baslik { text-align: center; font-size: var(--olcek-1); letter-spacing: .1em; text-transform: uppercase; color: var(--metin-3); }
.logo-serit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--aralik-7); }
.serit-oge { opacity: .65; transition: opacity var(--gecis); }
.serit-oge:hover { opacity: 1; }
.serit-oge img { max-height: 34px; width: auto; }

/* ═══════════════ AYRAC / SERBEST ═══════════════ */
.ayrac { display: flex; align-items: center; }
.ayrac hr { width: 100%; border: 0; border-top: 1px solid var(--kenar); margin: 0; }
.serbest { color: var(--metin-2); }
.serbest h3 { margin-top: var(--aralik-5); }

/* ═══════════════ ALT (FOOTER) ═══════════════ */
.alt {
  background: var(--zemin-2);
  border-top: 1px solid var(--kenar);
  padding-top: var(--aralik-8);
  margin-top: var(--aralik-8);
}
.alt-duzen {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--aralik-7);
  padding-bottom: var(--aralik-7);
}
.alt-marka .marka-ad { font-size: var(--olcek-5); }
.alt-marka p { font-size: var(--olcek-2); margin-top: var(--aralik-3); max-width: 26rem; }
.alt-sutun h3 {
  font-size: var(--olcek-1); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--metin-3); margin-bottom: var(--aralik-4);
}
.alt-sutun ul { display: grid; gap: var(--aralik-2); }
.alt-sutun a { font-size: var(--olcek-2); color: var(--metin-2); }
.alt-sutun a:hover { color: var(--ana); }
.alt-sosyal { display: flex; gap: var(--aralik-3); margin-top: var(--aralik-4); }
.alt-sosyal a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--kenar);
  border-radius: var(--kose-orta); color: var(--metin-2);
}
.alt-sosyal a:hover { border-color: var(--ana); color: var(--ana); }
.alt-sosyal svg { width: 17px; height: 17px; }

.alt-serit {
  border-top: 1px solid var(--kenar);
  padding: var(--aralik-5) 0;
  display: flex; flex-wrap: wrap; gap: var(--aralik-3);
  justify-content: space-between; align-items: center;
}
.alt-serit p { margin: 0; font-size: var(--olcek-1); color: var(--metin-3); }
.alt-kunye { text-align: right; }

/* ═══════════════ KAYDIRICI (SLIDER) ═══════════════ */
.kaydirici { position: relative; }
.slayt-akis { position: relative; min-height: 380px; }
.slayt {
  position: absolute; inset: 0;
  display: grid; align-items: center;
  background-size: cover; background-position: center;
  opacity: 0; visibility: hidden;
  transition: opacity 520ms ease, visibility 520ms ease;
  border-radius: var(--bolum-kose, var(--kose-buyuk));
  overflow: hidden;
}
.slayt.etkin { opacity: 1; visibility: visible; position: relative; }
.slayt::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--mor-900) 78%, transparent),
    color-mix(in srgb, var(--mor-900) 22%, transparent) 72%);
}
.slayt-ic { position: relative; padding: var(--aralik-8) var(--aralik-7); max-width: 40rem; color: #fff; }
.slayt-ic .bolum-etiket { color: var(--vurgu-acik); }
.slayt-baslik { font-size: clamp(1.6rem, 1.1rem + 2.4vw, var(--olcek-8)); color: #fff; margin-bottom: var(--aralik-4); }
.slayt-metin { color: color-mix(in srgb, #fff 82%, transparent); font-size: var(--olcek-4); margin-bottom: var(--aralik-5); }
.slayt-noktalar { display: flex; gap: var(--aralik-2); justify-content: center; margin-top: var(--aralik-5); }
.slayt-nokta {
  width: 30px; height: 4px; border: 0; padding: 0; border-radius: var(--kose-tam);
  background: var(--kenar-koyu); cursor: pointer; transition: background var(--gecis);
}
.slayt-nokta.etkin { background: var(--ana); }

/* ═══════════════ METIN + GORSEL ═══════════════ */
.ikili-duzen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--aralik-8); align-items: center; }
.ikili-gorsel img { border-radius: var(--kose-buyuk); box-shadow: var(--golge-2); }
.tik-liste { display: grid; gap: var(--aralik-3); margin: var(--aralik-5) 0; }
.tik-liste li { position: relative; padding-left: 1.75rem; color: var(--metin-2); font-size: var(--olcek-2); }
.tik-liste li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 14px; height: 8px; border-left: 2px solid var(--vurgu);
  border-bottom: 2px solid var(--vurgu); transform: rotate(-45deg);
}

/* ═══════════════ GALERI ═══════════════ */
.galeri-oge { display: block; margin: 0; border-radius: var(--kose-orta); overflow: hidden; background: var(--zemin-3); }
.galeri-oge img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--gecis); }
.galeri-oge:hover img { transform: scale(1.03); }
.galeri-oge figcaption { padding: var(--aralik-3); font-size: var(--olcek-2); color: var(--metin-2); }

/* ═══════════════ VIDEO ═══════════════ */
.video-cerceve { position: relative; aspect-ratio: 16/9; border-radius: var(--kose-buyuk); overflow: hidden; background: var(--zemin-3); }
.video-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-oynatici { width: 100%; border-radius: var(--kose-buyuk); background: #000; }

/* ═══════════════ DUYURU SERIDI ═══════════════ */
.duyuru-serit {
  display: flex; flex-wrap: wrap; gap: var(--aralik-3);
  align-items: center; justify-content: center;
  font-size: var(--olcek-2); color: var(--bolum-metin, var(--metin-2));
}
.duyuru-serit a { font-weight: 600; color: var(--bolum-vurgu, var(--ana)); }

/* ═══════════════ KART LISTESI (BLOG) ═══════════════ */
.yazi-kart { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.yazi-gorsel { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.yazi-govde { padding: var(--aralik-5); }
.yazi-etiket {
  display: inline-block; font-size: var(--olcek-1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--vurgu); margin-bottom: var(--aralik-2);
}

/* ═══════════════ HARITA ═══════════════ */
.harita { border-radius: var(--kose-buyuk); overflow: hidden; background: var(--zemin-3); }
.harita iframe { width: 100%; height: 100%; border: 0; }

/* ═══════════════ BILGI KUTULARI ═══════════════ */
.bilgi-kutu { text-align: center; padding: var(--aralik-4); }
.bilgi-kutu .kart-simge { margin-inline: auto; }
.bilgi-kutu h3 { font-size: var(--olcek-3); margin-bottom: var(--aralik-2); }
.bilgi-kutu p { font-size: var(--olcek-2); margin: 0; }

@media (max-width: 1023px) {
  .ikili-duzen { grid-template-columns: 1fr; gap: var(--aralik-6); }
  .ikili-gorsel { order: -1; }
  .slayt-akis { min-height: 320px; }
  .slayt-ic { padding: var(--aralik-6) var(--aralik-5); }
}

/* ═══════════════ BLOG ═══════════════ */
.yazi-kart { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.yazi-gorsel { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.yazi-govde { padding: var(--aralik-5); }
.yazi-etiket {
  display: block;
  font-size: var(--olcek-1);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--metin-3);
  margin-bottom: var(--aralik-2);
}
.yazi-tam { padding-top: var(--aralik-7); }
.yazi-tam .kapsayici { max-width: 46rem; }
.yazi-tepe { margin-bottom: var(--aralik-6); }
.yazi-yazar { font-size: var(--olcek-2); color: var(--metin-3); margin: var(--aralik-3) 0 0; }
.yazi-kapak {
  width: 100%; border-radius: var(--kose-orta);
  margin-bottom: var(--aralik-6); display: block;
}
.yazi-icerik { font-size: var(--olcek-3); line-height: 1.75; color: var(--metin-2); }
.yazi-icerik h2 {
  font-size: var(--olcek-5); color: var(--metin);
  margin: var(--aralik-6) 0 var(--aralik-3);
}
.yazi-icerik h3 {
  font-size: var(--olcek-4); color: var(--metin);
  margin: var(--aralik-5) 0 var(--aralik-2);
}
.yazi-icerik p { margin: 0 0 var(--aralik-4); }
.yazi-icerik ul, .yazi-icerik ol { margin: 0 0 var(--aralik-4) var(--aralik-5); }
.yazi-icerik li { margin-bottom: var(--aralik-2); }
.yazi-icerik img { max-width: 100%; border-radius: var(--kose-kucuk); }
.yazi-icerik a { color: var(--vurgu); }
.yazi-icerik blockquote {
  margin: var(--aralik-5) 0; padding-left: var(--aralik-4);
  border-left: 3px solid var(--vurgu); color: var(--metin-2); font-style: italic;
}
.yazi-icerik pre {
  background: var(--zemin-2); border: 1px solid var(--kenar);
  border-radius: var(--kose-kucuk); padding: var(--aralik-4);
  overflow-x: auto; font-size: var(--olcek-2);
}
.yazi-icerik code { font-size: .92em; }
.yazi-icerik table { width: 100%; border-collapse: collapse; margin-bottom: var(--aralik-4); }
.yazi-icerik th, .yazi-icerik td {
  border: 1px solid var(--kenar); padding: var(--aralik-2) var(--aralik-3);
  text-align: left; font-size: var(--olcek-2);
}
/* Panelden yapistirilan metinlerdeki tablolar (yasal sayfalar) satir ici
   genislikle gelir; dar ekranda hucre icindeki "[AYLIK / YILLIK / ...]" gibi
   bosluksuz parcalar tabloyu sayfadan tasiriyordu. Hucre kelime icinden
   kirilir, yine de sigmayan tablo sayfayi degil kendini kaydirir. */
.bolum table { max-width: 100%; }
.bolum td, .bolum th { overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .bolum table { display: block; overflow-x: auto; }
}
.yazi-donus { margin-top: var(--aralik-7); font-size: var(--olcek-2); }

/* Yardim merkezi (16 Eki 2026) */
.yardim-kategori { margin: 0 0 2rem; }
.yardim-kategori h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.yardim-kategori > p { margin: 0 0 .8rem; color: var(--metin-3); }
.yardim-kategori ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.yardim-kategori li { padding: .8rem 1rem; border: 1px solid var(--kenar); border-radius: var(--kose-orta); background: var(--kart); }
.yardim-kategori li a { font-weight: 600; }
.yardim-kategori li small { display: block; margin-top: .2rem; color: var(--metin-3); }

/* Sozlesme metninde sipariste dolan alan (16 Eki 2026) */
.sozlesme-bosluk { padding: 0 .3em; border-bottom: 1px dashed currentColor; color: var(--metin-3); font-size: .9em; }

/* Yalniz ekran okuyucunun duydugu metin */
.ekran-okuyucu { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Sosyal hesaplar (api/sosyal.js, 17 Eki 2026): ad gosterimi ve marka renkleri */
.sosyal-bag { text-decoration: none; }
.sosyal-bag.sosyal-g-simge-ad, .sosyal-bag.sosyal-g-ad { display: inline-flex !important; align-items: center; gap: .4rem; width: auto !important; padding: 0 .75rem; border-radius: 999px; white-space: nowrap; font-size: .85rem; }
.sosyal-bag span { line-height: 1; }
/* Marka rengi yalniz simgede; adin yazisi zeminine gore okunur kalir */
.sosyal-renk-marka .sosyal-bag[style*="--sosyal-marka"] svg { color: var(--sosyal-marka); }
.sosyal-renk-marka .sosyal-g-simge[style*="--sosyal-marka"] { color: var(--sosyal-marka) !important; }
.sosyal-renk-marka-zemin .sosyal-bag { background: var(--sosyal-marka, #1f2633) !important; color: #fff !important; border-color: transparent !important; }
.sosyal-renk-marka-zemin .sosyal-bag:hover { filter: brightness(1.1); }
.sosyal-bag .sosyal-simge-gorsel { width: 18px; height: 18px; object-fit: contain; display: block; }

/* site-gorunum.css */
/* Site gorunum katmani.
   14.08.2026: anasayfa ve sayfalar referans alinan SaaS sablonunun
   tasarim diline yaklastirildi. Olculer tarayicida okundu, tahmin yok.
   Birebir kopya degil - marka morumuz korundu, referansin mor skalasi
   zaten ayni ailede oldugu icin kimlik bozulmadi.

   Bu dosya yalniz site sayfalarinda yuklenir; panel almaz. */

:root {
  /* ── Mor skala. Referansta primary-500 #864ffe; bizim tonumuz biraz
     daha koyu ve sicak, ikisinin arasinda bir yerde durduruldu. ── */
  --mor-50:  #f5f2fe;
  --mor-100: #ece7ff;
  --mor-200: #dcd2ff;
  --mor-300: #c2adff;
  --mor-400: #a37fff;
  --mor-500: #8b4ffb;
  --mor-600: #7a34ee;
  --mor-700: #642bc4;
  --mor-800: #4a2091;
  --mor-900: #2a1350;

  --ana: var(--mor-500);
  --ana-koyu: var(--mor-600);
  --ana-acik: var(--mor-400);

  /* Altin vurgu markanin ayirt edici yani - referansta yok, bizde kaliyor.
     Referansin aksan renkleri de yaninda kullanilabilir hale getirildi. */
  --vurgu: #c2952c;
  --vurgu-acik: #e8c877;
  --aksan-sari: #f9eb57;
  --aksan-yesil: #c6f56f;
  --aksan-mercan: #ffb9a2;
  --aksan-cam: #83e7ee;

  /* ── Zeminler ── */
  --zemin: #fcfcfd;
  --zemin-2: #f9fafb;
  --zemin-3: #f4f5f8;
  --zemin-4: #f0f2f6;
  --kart: #ffffff;
  --kenar: #e3e7ed;
  --kenar-koyu: #d7dde5;

  --metin: #14161a;
  --metin-2: #3d434d;
  --metin-3: #6b727e;

  /* ── Tipografi ── */
  --yazi-baslik: "Inter Tight", "Space Grotesk", system-ui, sans-serif;
  --yazi-govde: "Inter Tight", "IBM Plex Sans", system-ui, sans-serif;

  /* ── Kose ve golge ── */
  --kose-kucuk: 8px;
  --kose-orta: 14px;
  --kose-buyuk: 20px;
  --kose-tam: 999px;
  --golge-1: 0 1px 2px rgba(20, 22, 26, .04);
  --golge-2: 0 8px 24px rgba(20, 22, 26, .06);
  --golge-3: 0 24px 64px rgba(20, 22, 26, .10);

  --gecis: .2s cubic-bezier(.4, 0, .2, 1);
}

:root[data-tema="koyu"] {
  --zemin: #0f1217;
  --zemin-2: #13171e;
  --zemin-3: #181d26;
  --zemin-4: #1f252f;
  --kart: #13171e;
  --kenar: #202731;
  --kenar-koyu: #2a333e;
  --metin: #f3f5f8;
  --metin-2: #c2c8d2;
  --metin-3: #8b93a1;
}

/* ── Tipografi olcegi ────────────────────────────────────
   Referansta h1 68/500, h2 52/400, govde 16/24, paragraf 14/21.
   Kucuk ekranda akici kuculsun diye clamp kullanildi. */
body {
  font-family: var(--yazi-govde);
  font-size: 16px;
  line-height: 1.5;
  background: var(--zemin-2);
  color: var(--metin);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem); font-weight: 500; line-height: 1.1; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3.25rem); font-weight: 400; line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight: 500; line-height: 1.3; }
/* h1'i olmayan sayfada ilk bolum basligi h1'e terfi eder (api/site.js tekH1): h2 gibi gorunur.
   Kendi sinifi (bolum-baslik vb.) boyutu verir; sinifsiz h2'nin boyutu buradan. */
h1.baslik-terfi { font-weight: 400; line-height: 1.2; }
h1.baslik-terfi:not([class*="-baslik"]) { font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3.25rem); }

.bolum-alt, .kart p, .ozellik p, .adim p, .bilgi-kutu p {
  font-size: .95rem; line-height: 1.55; color: var(--metin-3);
}

/* ── Dugmeler: hap bicim ────────────────────────────────── */
.dugme {
  border-radius: var(--kose-tam);
  font-weight: 500;
  font-size: .95rem;
  padding: .72rem 1.5rem;
  transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.dugme-ana {
  background: var(--ana); color: #fff; border: 1px solid transparent;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ana) 30%, transparent);
}
.dugme-ana:hover {
  background: var(--ana-koyu); transform: translateY(-1px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ana) 38%, transparent);
}
.dugme-ikincil {
  background: var(--kart); color: var(--metin);
  border: 1px solid var(--kenar);
}
.dugme-ikincil:hover { border-color: var(--kenar-koyu); transform: translateY(-1px); }

/* ── Bolum ritmi ────────────────────────────────────────
   Referansta bolum araligi 56 → 100px arasi degisiyor; tek deger
   yerine akici olcek kullanildi ki dar ekranda sikismasin. */
.bolum { padding-block: clamp(3.5rem, 2.2rem + 5vw, 6.25rem); }
.bolum-tepe { max-width: 52rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }

/* Bolum ustundeki kucuk etiket - referansta her bolumde var */
.bolum-etiket {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .85rem; border-radius: var(--kose-tam);
  background: var(--mor-50); color: var(--ana-koyu);
  border: 1px solid var(--mor-100);
  font-size: .78rem; font-weight: 500; letter-spacing: .02em;
  text-transform: none; margin-bottom: .9rem;
}
:root[data-tema="koyu"] .bolum-etiket {
  background: color-mix(in srgb, var(--ana) 16%, transparent);
  border-color: color-mix(in srgb, var(--ana) 28%, transparent);
  color: var(--mor-300);
}

/* ── Kartlar ────────────────────────────────────────────── */
.kart, .ozellik, .bilgi-kutu, .fiyat-kart, .sss-oge, .yazi-kart {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.kart:hover, .ozellik:hover, .yazi-kart:hover {
  transform: translateY(-2px);
  box-shadow: var(--golge-2);
  border-color: var(--kenar-koyu);
}

/* ── Kahraman ───────────────────────────────────────────── */
.kahraman {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% -10%, color-mix(in srgb, var(--ana) 12%, transparent), transparent 70%),
    var(--zemin-2);
}
/* Referansta kahramanin arkasinda ince nokta dokusu var */
.kahraman::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--metin) 8%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(60% 55% at 50% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 20%, #000 0%, transparent 75%);
  opacity: .55;
}
.kahraman > * { position: relative; z-index: 1; }

/* ── Ust baslik ─────────────────────────────────────────── */
.tepe {
  background: color-mix(in srgb, var(--zemin-2) 82%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--gecis), background var(--gecis);
}
.tepe.kaydi { border-bottom-color: var(--kenar); background: color-mix(in srgb, var(--zemin-2) 94%, transparent); }
.tepe-menu a { font-size: .93rem; font-weight: 450; }

/* ── Kaydirinca belirme ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .belir { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
  .belir.gorundu { opacity: 1; transform: none; }
}

/* ── Surum rozeti ve yenilikler sayfasi ─────────────────── */
.surum-rozet {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .6rem; border-radius: var(--kose-tam);
  background: var(--zemin-3); border: 1px solid var(--kenar);
  color: var(--metin-3); font-size: .74rem; font-variant-numeric: tabular-nums;
}
.surum-rozet:hover { color: var(--ana); border-color: var(--ana); }

.yenilik-listesi { list-style: none; padding: 0; margin: 0 auto; max-width: 46rem; display: grid; gap: 1.1rem; }
.yenilik-oge {
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta); padding: 1.5rem 1.7rem;
}
.yenilik-tepe { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.yenilik-surum {
  font-family: var(--yazi-baslik); font-weight: 600; font-size: 1.05rem;
  color: var(--ana); font-variant-numeric: tabular-nums;
}
.yenilik-tepe time { margin-left: auto; font-size: .8rem; color: var(--metin-3); }
.yenilik-oge h2 { font-size: 1.25rem; font-weight: 500; margin: 0 0 .8rem; }
.yenilik-maddeler { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.yenilik-maddeler li {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .95rem; color: var(--metin-2); line-height: 1.5;
}
.madde-tip { width: 7px; height: 7px; border-radius: 50%; flex: none; translate: 0 -2px; }
.madde-yenilik { background: var(--aksan-yesil); }
.madde-duzeltme { background: var(--aksan-mercan); }
.madde-iyilestirme { background: var(--aksan-cam); }

.etiket {
  font-size: .72rem; font-weight: 500; padding: .15rem .6rem;
  border-radius: var(--kose-tam); white-space: nowrap;
}
.etiket-yenilik { background: color-mix(in srgb, #2f7a55 14%, transparent); color: #2f7a55; }
.etiket-duzeltme { background: color-mix(in srgb, #a33a3a 12%, transparent); color: #a33a3a; }
.etiket-iyilestirme { background: color-mix(in srgb, #0e7490 12%, transparent); color: #0e7490; }

/* Renkli zeminde ikincil dugme.
   Cagri bolumu koyu zemin kullaniyordu; ikincil dugme orada beyaz uzerine
   beyaz kaliyordu ve yazi HIC gorunmuyordu (canlida yakalandi).
   Bolum kendi zeminini tasidiginda dugme saydam + cerceveli olur.

   20 Agu 2026: renk artik SABIT BEYAZ degil. Panelden bolume ACIK bir zemin
   secilince (kapanis cagrisina #b3c5d5 secildi) beyaz yazi yine kayboldu -
   ayni hata, bu kez ters yonde. Bolumun kendi metin rengi varsa o kullanilir. */
.bolum-cagri .dugme-ikincil,
.desen-vurgu .dugme-ikincil,
.desen-koyu .dugme-ikincil {
  background: transparent;
  color: var(--bolum-metin, #fff);
  border-color: color-mix(in srgb, var(--bolum-metin, #fff) 50%, transparent);
}
.bolum-cagri .dugme-ikincil:hover,
.desen-vurgu .dugme-ikincil:hover,
.desen-koyu .dugme-ikincil:hover {
  background: color-mix(in srgb, var(--bolum-metin, #fff) 14%, transparent);
  border-color: color-mix(in srgb, var(--bolum-metin, #fff) 80%, transparent);
}

:root[data-tema="koyu"] .bolum-cagri .dugme-ikincil,
:root[data-tema="koyu"] .desen-vurgu .dugme-ikincil,
:root[data-tema="koyu"] .desen-koyu .dugme-ikincil {
  color: var(--bolum-metin-koyu, var(--bolum-metin, #fff));
  border-color: color-mix(in srgb, var(--bolum-metin-koyu, #fff) 50%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .bolum-cagri .dugme-ikincil,
  :root:not([data-tema="acik"]) .desen-vurgu .dugme-ikincil,
  :root:not([data-tema="acik"]) .desen-koyu .dugme-ikincil {
    color: var(--bolum-metin-koyu, var(--bolum-metin, #fff));
    border-color: color-mix(in srgb, var(--bolum-metin-koyu, #fff) 50%, transparent);
  }
}

/* Ust baslik sag grubu.
   Masaustunde ortadaki menu sag grubu saga itiyordu; mobilde menu
   gizlenince itecek bir sey kalmiyor ve logo/tema/menu dugmesi sola
   yigiliyordu (Musa 14.08 bildirdi). margin-left:auto ikisinde de calisir. */
.tepe-sag { margin-left: auto; }

/* bolumler-yeni.css */
/* 46 demoluk referans setinden cikan yeni bolum turlerinin stilleri:
   entegrasyon, guvenlik, bulten, vaka, karsilastirma. */

/* ── Entegrasyonlar ────────────────────────────────────── */
.ent-izgara { display: grid; gap: .9rem; }
.ent-izgara.ent-izgara,
.ent-izgara.ent-petek { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ent-izgara.ent-satir { grid-template-columns: 1fr; max-width: 46rem; margin-inline: auto; }

.ent-kart {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.1rem;
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
a.ent-kart:hover {
  transform: translateY(-2px); box-shadow: var(--golge-2);
  border-color: var(--kenar-koyu);
}
.ent-logo {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: var(--kose-kucuk);
  background: var(--zemin-3); overflow: hidden;
}
.ent-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ent-harf {
  font-family: var(--yazi-baslik); font-weight: 600; font-size: 1.15rem;
  color: var(--ana);
}
.ent-yazi { min-width: 0; flex: 1; }
.ent-yazi strong {
  display: block; font-size: .98rem; font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Aciklama tek satirda kalir; kart daralinca sarkip duzeni bozmasin */
.ent-yazi span {
  display: block; font-size: .85rem; color: var(--metin-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ent-durum {
  flex: none; align-self: flex-start; margin-top: 2px;
  font-size: .72rem; font-weight: 500;
  padding: .15rem .6rem; border-radius: var(--kose-tam);
  background: var(--zemin-3); color: var(--metin-3);
}

/* Petek duzeni: kartlar sirayla kaydirilir - referanstaki gorunum */
@media (min-width: 720px) {
  .ent-petek .ent-kart:nth-child(even) { transform: translateY(14px); }
  a.ent-petek .ent-kart:nth-child(even):hover { transform: translateY(12px); }
}

/* Durum rozetleri (simgeli). Renkler tema degiskenlerinden; koyu temada da ayni degiskenler. */
.ent-durum { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ent-durum svg { width: .85rem; height: .85rem; flex: none; }
.ent-durum-hazirlaniyor { background: color-mix(in srgb, var(--uyari) 16%, transparent); color: color-mix(in srgb, var(--uyari) 55%, var(--metin)); }
.ent-durum-yayinda { background: color-mix(in srgb, var(--basari) 16%, transparent); color: color-mix(in srgb, var(--basari) 55%, var(--metin)); }
.ent-durum-planli { background: var(--zemin-3); color: var(--metin-3); }

/* Acik/koyu logo cifti: koyu temada koyu logo gorunur */
.ent-logo-cift .ent-logo-koyu { display: none; }
:root[data-tema="koyu"] .ent-logo-cift .ent-logo-acik { display: none; }
:root[data-tema="koyu"] .ent-logo-cift .ent-logo-koyu { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .ent-logo-cift .ent-logo-acik { display: none; }
  :root:not([data-tema="acik"]) .ent-logo-cift .ent-logo-koyu { display: block; }
}
/* Logosuz: bas harfler, marka rengi verilmediyse sitenin ana rengi */
.ent-logo-harf { background: color-mix(in srgb, var(--ent-renk, var(--ana)) 14%, var(--kart)); }
.ent-logo-harf .ent-harf { color: var(--ent-renk, var(--ana)); letter-spacing: .02em; }

/* Karo duzeni: logo ustte, ad ve rozet altta; 6/4/3/2 sutun */
.ent-izgara.ent-karo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 560px) { .ent-izgara.ent-karo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .ent-izgara.ent-karo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .ent-izgara.ent-karo { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ent-karo .ent-kart { flex-direction: column; align-items: stretch; gap: .6rem; padding: .75rem; min-width: 0; text-align: center; }
.ent-karo .ent-logo { width: 100%; height: 64px; }
.ent-karo .ent-logo img { padding: 8px 10px; }
.ent-karo .ent-harf { font-size: 1.35rem; }
.ent-karo .ent-yazi strong { font-size: .92rem; white-space: normal; overflow-wrap: anywhere; }
.ent-karo .ent-durum { align-self: center; margin-top: auto; }
a.ent-kart:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }

/* Kategoriler */
.ent-grup + .ent-grup, .ent-grup + .ent-izgara { margin-top: var(--aralik-7); }
.ent-grup-tepe { margin-bottom: var(--aralik-4); }
.ent-grup-baslik { font-family: var(--yazi-baslik); font-size: var(--olcek-5); font-weight: 600; margin: 0; }
.ent-grup-aciklama { margin: .25rem 0 0; color: var(--metin-3); font-size: .92rem; max-width: 46rem; }
.ent-grup[hidden], .ent-kart[hidden] { display: none; }

/* Suzgec: kategori dugmeleri + arama + sayi */
.ent-suzgec { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: .5rem; }
.ent-suzgec[hidden], .ent-sayac[hidden], .ent-bos[hidden] { display: none; }
.ent-cipler { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 28rem; min-width: 0; }
.ent-cip {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font: inherit; font-size: .88rem; padding: .4rem .8rem;
  border-radius: var(--kose-tam); border: 1px solid var(--kenar);
  background: var(--kart); color: var(--metin-2);
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.ent-cip:hover { border-color: var(--kenar-koyu); color: var(--metin); }
.ent-cip[aria-pressed="true"] { background: var(--ana); border-color: var(--ana); color: #fff; }
/* Koyu temada ana renk acilir; yazi koyulasir (.dugme-ana ile ayni kural) */
:root[data-tema="koyu"] .ent-cip[aria-pressed="true"] { color: var(--mor-900); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .ent-cip[aria-pressed="true"] { color: var(--mor-900); } }
.ent-cip-sayi { font-size: .75rem; opacity: .75; font-variant-numeric: tabular-nums; }
.ent-cip:focus-visible, .ent-ara input:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.ent-ara { position: relative; display: flex; align-items: center; flex: 0 1 18rem; min-width: 0; }
.ent-ara svg { position: absolute; left: .7rem; width: 1rem; height: 1rem; color: var(--metin-3); pointer-events: none; }
.ent-ara input {
  width: 100%; min-width: 0; font: inherit; font-size: .92rem; padding: .5rem .8rem .5rem 2.1rem;
  border-radius: var(--kose-tam); border: 1px solid var(--kenar); background: var(--kart); color: var(--metin);
}
.ent-sayac { margin: 0 0 var(--aralik-5); color: var(--metin-3); font-size: .85rem; }
.ent-bos { padding: 2rem 0; text-align: center; color: var(--metin-3); }
.ent-dipnot { margin: var(--aralik-7) 0 0; font-size: .78rem; color: var(--metin-3); max-width: 52rem; }
@media (max-width: 559px) { .ent-ara { flex-basis: 100%; } }

/* ── Entegrasyon ayrintisi (alt sayfa basi) ─────────────── */
.ent-geri { display: inline-block; margin-bottom: var(--aralik-5); font-size: .9rem; color: var(--metin-3); }
.ent-geri:hover { color: var(--ana); }
.ent-detay { display: grid; gap: var(--aralik-6); align-items: start; }
@media (min-width: 860px) { .ent-detay.ent-detay-ikili { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.ent-detay-tepe { display: flex; align-items: center; gap: 1.1rem; margin-bottom: var(--aralik-4); }
.ent-detay-tepe > div { min-width: 0; }
.ent-logo.ent-logo-buyuk { width: 128px; height: 72px; border: 1px solid var(--kenar); background: var(--kart); }
.ent-logo-buyuk.ent-logo-harf { background: color-mix(in srgb, var(--ent-renk, var(--ana)) 14%, var(--kart)); }
.ent-logo-buyuk .ent-harf { font-size: 1.7rem; }
.ent-detay-tepe .bolum-etiket { margin: 0 0 .2rem; }
.ent-detay-ad { font-family: var(--yazi-baslik); font-size: var(--olcek-7); line-height: 1.15; margin: 0 0 .45rem; overflow-wrap: anywhere; }
.ent-detay-ozet { color: var(--metin-2); font-size: 1.02rem; line-height: 1.6; max-width: 40rem; margin: 0 0 var(--aralik-5); }
.ent-gerekenler { background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--kose-orta); padding: 1.1rem 1.25rem; }
.ent-gerekenler h2 { font-family: var(--yazi-baslik); font-size: var(--olcek-4); margin: 0 0 .75rem; }
.ent-gerekenler ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ent-gerekenler li { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; line-height: 1.45; }
.ent-gerekenler li svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .12rem; color: var(--ana); }
@media (max-width: 559px) {
  .ent-detay-tepe { align-items: flex-start; }
  .ent-logo.ent-logo-buyuk { width: 96px; height: 56px; }
  .ent-detay-ad { font-size: var(--olcek-6); }
}

/* ── Guvenlik ──────────────────────────────────────────── */
.guv-duzen { display: grid; gap: 2rem; }
.guv-duzen.guv-ikili { grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 860px) { .guv-duzen.guv-ikili { grid-template-columns: 1fr; } }

.guv-maddeler { display: grid; gap: 1.1rem; }
.guv-madde { display: flex; gap: .9rem; align-items: flex-start; }
.guv-simge {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: var(--kose-kucuk);
  background: var(--mor-50); color: var(--ana);
}
.guv-simge svg { width: 20px; height: 20px; }
.guv-madde strong { display: block; font-size: 1rem; font-weight: 500; margin-bottom: .2rem; }
.guv-madde p { margin: 0; font-size: .92rem; color: var(--metin-3); line-height: 1.55; }
.guv-gorsel img { width: 100%; height: auto; border-radius: var(--kose-orta); }

.guv-rozetler {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
  margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--kenar);
}
.guv-rozet {
  padding: .55rem 1.1rem; border-radius: var(--kose-tam);
  background: var(--zemin-3); border: 1px solid var(--kenar);
  text-align: center;
}
.guv-rozet strong { display: block; font-size: .9rem; font-weight: 500; }
.guv-rozet span { font-size: .76rem; color: var(--metin-3); }

/* ── Bulten ────────────────────────────────────────────── */
.bulten-kutu { max-width: 34rem; margin-inline: auto; text-align: center; }
.bolum-bulten .bulten-form { justify-content: center; }
.bulten-not { font-size: .8rem; color: var(--metin-3); margin: .8rem 0 0; }
.bulten-kapali {
  font-size: .92rem; color: var(--metin-3);
  padding: .9rem 1.2rem; border: 1px dashed var(--kenar-koyu);
  border-radius: var(--kose-orta); margin: 0;
}

/* ── Vaka ──────────────────────────────────────────────── */
.vaka-izgara {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.vaka-kart {
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta); overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.vaka-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }
.vaka-gorsel { aspect-ratio: 16 / 9; background: var(--zemin-3); }
.vaka-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vaka-govde { padding: 1.4rem 1.5rem; }
.vaka-govde h3 { font-size: 1.2rem; font-weight: 500; margin: 0 0 .7rem; }
.vaka-olcu {
  display: flex; align-items: baseline; gap: .5rem; margin-bottom: .9rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--kenar);
}
.vaka-olcu strong {
  font-family: var(--yazi-baslik); font-size: 1.9rem; font-weight: 600;
  color: var(--ana); line-height: 1;
}
.vaka-olcu span { font-size: .85rem; color: var(--metin-3); }
.vaka-govde p { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.55; color: var(--metin-2); }
.vaka-etiket {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--metin-3); margin-bottom: .15rem;
}

/* ── Karsilastirma ─────────────────────────────────────── */
.kars-sar { overflow-x: auto; }
.kars-tablo {
  width: 100%; border-collapse: collapse; min-width: 34rem;
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta); overflow: hidden;
}
.kars-tablo th, .kars-tablo td {
  padding: .9rem 1.1rem; text-align: center;
  border-bottom: 1px solid var(--kenar);
  font-size: .93rem;
}
.kars-tablo thead th {
  font-family: var(--yazi-baslik); font-weight: 500; font-size: .98rem;
  background: var(--zemin-3);
}
.kars-tablo tbody th[scope="row"] {
  text-align: left; font-weight: 400; color: var(--metin-2);
}
.kars-tablo tbody tr:last-child th,
.kars-tablo tbody tr:last-child td { border-bottom: 0; }
.kars-vurgu { background: color-mix(in srgb, var(--ana) 7%, transparent); }
.kars-tablo thead .kars-vurgu { background: color-mix(in srgb, var(--ana) 14%, transparent); color: var(--ana-koyu); }
.kars-var { color: var(--basari, #2f7a55); font-weight: 600; }
.kars-yok { color: var(--metin-3); }
.kars-not { font-size: .82rem; color: var(--metin-3); margin: .9rem 0 0; text-align: center; }

/* duzenler.css */
/* Bolum duzen varyantlari.
   Ayni bolum turu farkli yerlesimde cizilebilsin diye. Referans setteki
   420 bolumun cogu ayni arketipin farkli duzeniydi; tur cogaltmak yerine
   duzen secenegi eklendi.

   Sinif kaynagi: bilesenin stil.duzen alani -> "duzen-<deger>".
   Karsiligi olmayan deger zararsizdir, bolum varsayilan haliyle cizilir.

   Hedef sinif adlari sitenin GERCEK isaretlemesinden alindi:
   izgara/kart (cogu bolum), adim-listesi/adim, sss-grubu/sss-oge,
   ent-izgara/ent-kart, vaka-izgara/vaka-kart, bilgi-kutu, sayi-oge. */

/* Duzen varyantlarinin dokunacagi ortak kart kumesi */
.duzen-serit .kart, .duzen-serit .bilgi-kutu, .duzen-serit .ent-kart,
.duzen-serit .sss-oge, .duzen-serit .vaka-kart, .duzen-serit .yazi-kart,
.duzen-serit .adim {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--kenar);
  box-shadow: none; padding-inline: 0;
}
.duzen-serit .kart:hover, .duzen-serit .ent-kart:hover,
.duzen-serit .vaka-kart:hover, .duzen-serit .yazi-kart:hover {
  transform: none; box-shadow: none;
}
.duzen-serit .izgara, .duzen-serit .ent-izgara, .duzen-serit .vaka-izgara { gap: 0; }

/* ── Sutun sayisini gorunum sekmesinden ez ─────────────── */
.sutun-1 .izgara, .sutun-1 .ent-izgara, .sutun-1 .vaka-izgara { grid-template-columns: 1fr; }
.sutun-2 .izgara, .sutun-2 .ent-izgara, .sutun-2 .vaka-izgara { grid-template-columns: repeat(2, 1fr); }
.sutun-3 .izgara, .sutun-3 .ent-izgara, .sutun-3 .vaka-izgara { grid-template-columns: repeat(3, 1fr); }
.sutun-4 .izgara, .sutun-4 .ent-izgara, .sutun-4 .vaka-izgara { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .sutun-3 .izgara, .sutun-4 .izgara,
  .sutun-3 .ent-izgara, .sutun-4 .ent-izgara { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sutun-2 .izgara, .sutun-3 .izgara, .sutun-4 .izgara,
  .sutun-2 .ent-izgara, .sutun-3 .ent-izgara, .sutun-4 .ent-izgara,
  .sutun-2 .vaka-izgara, .sutun-3 .vaka-izgara { grid-template-columns: 1fr; }
}

/* ── duzen-kutu: dolgulu zemin, cercevesiz ─────────────── */
.duzen-kutu .kart, .duzen-kutu .bilgi-kutu, .duzen-kutu .ent-kart,
.duzen-kutu .sss-oge, .duzen-kutu .yazi-kart {
  background: var(--zemin-3); border: 0; box-shadow: none;
}

/* ── duzen-cizgili: sol kenarda renkli serit ───────────── */
.duzen-cizgili .kart, .duzen-cizgili .bilgi-kutu, .duzen-cizgili .sss-oge {
  border-left: 3px solid var(--ana);
  border-radius: 0 var(--kose-orta) var(--kose-orta) 0;
}

/* ── duzen-numarali: kartlara sira numarasi ────────────── */
.duzen-numarali .izgara { counter-reset: kart; }
.duzen-numarali .kart, .duzen-numarali .bilgi-kutu {
  counter-increment: kart; position: relative;
}
.duzen-numarali .kart::before, .duzen-numarali .bilgi-kutu::before {
  content: counter(kart, decimal-leading-zero);
  position: absolute; top: .9rem; right: 1.2rem;
  font-family: var(--yazi-baslik); font-size: 2.1rem; font-weight: 600;
  color: color-mix(in srgb, var(--ana) 20%, transparent);
  line-height: 1; pointer-events: none;
}

/* ── duzen-yatay: simge solda, yazi sagda ──────────────── */
.duzen-yatay .kart, .duzen-yatay .bilgi-kutu {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1rem; align-items: start; text-align: left;
}
.duzen-yatay .kart-simge { margin: 0; }

/* ── duzen-merkez: kart icerigi ortali ─────────────────── */
.duzen-merkez .kart, .duzen-merkez .bilgi-kutu, .duzen-merkez .adim { text-align: center; }
.duzen-merkez .kart-simge, .duzen-merkez .adim-no { margin-inline: auto; }

/* ── duzen-buyuk-ilk: ilk kart genis ───────────────────── */
@media (min-width: 760px) {
  .duzen-buyuk-ilk .izgara > *:first-child { grid-column: span 2; }
  .duzen-buyuk-ilk .izgara > *:first-child .kart-baslik { font-size: 1.45rem; }
}

/* ── duzen-kaydir: yatay kaydirilan serit ──────────────── */
.duzen-kaydir .izgara, .duzen-kaydir .ent-izgara, .duzen-kaydir .vaka-izgara {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 1rem; padding-bottom: .9rem;
}
.duzen-kaydir .izgara > *, .duzen-kaydir .ent-izgara > *, .duzen-kaydir .vaka-izgara > * {
  flex: 0 0 min(320px, 78vw); scroll-snap-align: start;
}

/* ── duzen-ters: iki sutunlu bolumlerde taraflari degistirir ── */
.duzen-ters .metin-gorsel, .duzen-ters .guv-duzen.guv-ikili,
.duzen-ters .kahraman-duzen.kahraman-ikili { direction: rtl; }
.duzen-ters .metin-gorsel > *, .duzen-ters .guv-duzen.guv-ikili > *,
.duzen-ters .kahraman-duzen.kahraman-ikili > * { direction: ltr; }

/* ── duzen-genis-baslik: baslik sola, aciklama yanina ──── */
.duzen-genis-baslik .bolum-tepe {
  max-width: none; text-align: left; margin-inline: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end;
}
.duzen-genis-baslik .bolum-tepe .bolum-alt { margin: 0; }
@media (max-width: 760px) {
  .duzen-genis-baslik .bolum-tepe { grid-template-columns: 1fr; gap: .6rem; }
}

/* ── duzen-sade: cerceve ve golge yok ──────────────────── */
.duzen-sade .kart, .duzen-sade .bilgi-kutu, .duzen-sade .ent-kart,
.duzen-sade .fiyat-kart, .duzen-sade .vaka-kart, .duzen-sade .yazi-kart,
.duzen-sade .sss-oge {
  background: transparent; border: 0; box-shadow: none; padding-inline: 0;
}
.duzen-sade .kart:hover, .duzen-sade .yazi-kart:hover,
.duzen-sade .vaka-kart:hover { transform: none; box-shadow: none; }

/* kabuk.css */
/* Kabuk bilesenleri: ust baslik ve alt bilgi duzenleri.
   Bu dosya yalniz site sayfalarinda yuklenir. Duzenler panelden secilir;
   secilmezse site.js'teki koda gomulu varsayilan cizilir. */

/* ── Ust baslik: ortali duzen ──────────────────────────── */
.tepe-ic-merkez {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--aralik-4);
}
.tepe-ic-merkez .menu-sol ul { justify-content: flex-end; }
.tepe-ic-merkez .menu-sag ul { justify-content: flex-start; }
.tepe-ic-merkez .marka { justify-self: center; }
.tepe-ic-merkez .tepe-sag { position: absolute; right: var(--aralik-5); }
@media (max-width: 900px) {
  .tepe-ic-merkez { grid-template-columns: auto 1fr; }
  .tepe-ic-merkez .menu-sol, .tepe-ic-merkez .menu-sag { display: none; }
  .tepe-ic-merkez .tepe-sag { position: static; justify-self: end; }
}

/* ── Duyuru seridi ─────────────────────────────────────── */
.tepe-duyuru {
  background: var(--ana);
  color: #fff;
  font-size: .86rem;
  padding: .5rem 0;
  text-align: center;
}
.tepe-duyuru .kapsayici {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; flex-wrap: wrap;
}
.tepe-duyuru a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  font-weight: 500;
}
.tepe-duyuru a:hover { text-decoration-thickness: 2px; }

/* ── Mega menu ─────────────────────────────────────────── */
.menu-mega { position: static; }
.mega-panel {
  position: absolute; left: 50%; translate: -50% 0; top: 100%;
  width: min(100% - 2rem, 60rem);
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  box-shadow: var(--golge-3);
  padding: 1.1rem;
  opacity: 0; visibility: hidden; translate: -50% 8px;
  transition: opacity var(--gecis), translate var(--gecis), visibility var(--gecis);
  z-index: 60;
}
.menu-mega:hover .mega-panel,
.menu-mega:focus-within .mega-panel {
  opacity: 1; visibility: visible; translate: -50% 0;
}
.mega-izgara {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.mega-kart {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem .9rem; border-radius: var(--kose-kucuk);
  transition: background var(--gecis);
}
.mega-kart:hover { background: var(--zemin-3); }
.mega-simge {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: var(--kose-kucuk);
  background: var(--mor-50); color: var(--ana);
}
.mega-simge svg { width: 19px; height: 19px; }
.mega-yazi strong { display: block; font-size: .95rem; font-weight: 500; }
@media (max-width: 900px) {
  .mega-panel { position: static; translate: none; width: auto; box-shadow: none;
                border: 0; padding: 0; opacity: 1; visibility: visible; }
  .mega-izgara { grid-template-columns: 1fr; }
}

/* ── Alt bilgi: tek satir ──────────────────────────────── */
.alt-sade-ic {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding-block: 1.6rem;
}
.alt-sade-menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.1rem; flex-wrap: wrap;
}
.alt-sade-menu a { font-size: .9rem; color: var(--metin-3); }
.alt-sade-menu a:hover { color: var(--ana); }
.alt-sade-telif { margin-left: auto; font-size: .85rem; color: var(--metin-3); }

/* ── Alt bilgi: bulten kutusu ──────────────────────────── */
.alt-bulten {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1.6rem 1.8rem;
  margin-bottom: 2.5rem;
  background: var(--zemin-3);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
}
.alt-bulten h3 { font-size: 1.35rem; font-weight: 500; margin: 0 0 .3rem; }
.alt-bulten p { font-size: .93rem; color: var(--metin-3); margin: 0; }
.bulten-form { display: flex; gap: .55rem; flex-wrap: wrap; }
.bulten-form input {
  min-width: 240px; padding: .72rem 1.1rem;
  border: 1px solid var(--kenar-koyu); border-radius: var(--kose-tam);
  background: var(--kart); color: var(--metin); font: inherit; font-size: .95rem;
}
.bulten-form input:focus {
  outline: none; border-color: var(--ana);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ana) 16%, transparent);
}
.bulten-not { grid-column: 1 / -1; font-size: .8rem; color: var(--metin-3); margin: 0; }
@media (max-width: 760px) {
  .alt-bulten { grid-template-columns: 1fr; }
  .bulten-form input { min-width: 0; flex: 1; }
}

/* ── Destek balonu (sag alt kose, WhatsApp) ────────────── */
.destek-balon {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
}
.destek-dugme {
  width: 56px; height: 56px; border: none; border-radius: var(--kose-tam);
  background: #25d366; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(37, 211, 102, .38);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.destek-dugme:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(37, 211, 102, .46); }
.destek-dugme:focus-visible { outline: 3px solid var(--ana); outline-offset: 3px; }
.destek-dugme svg { width: 30px; height: 30px; }
.destek-simge-kapat { display: none; width: 24px; height: 24px; }
.destek-balon[data-acik] .destek-simge-wa { display: none; }
.destek-balon[data-acik] .destek-simge-kapat { display: block; }

.destek-kart {
  width: min(310px, calc(100vw - 2.5rem));
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--kart); color: var(--metin);
  border: 1px solid var(--kenar); border-radius: var(--kose-orta);
  box-shadow: var(--golge-3);
  animation: destek-gir .22s cubic-bezier(.4, 0, .2, 1);
}
.destek-kart[hidden] { display: none; }
@keyframes destek-gir {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.destek-kart-tepe { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.destek-kart-baslik {
  flex: 1; font-family: var(--yazi-baslik); font-size: 1.02rem; font-weight: 600;
}
.destek-kapat {
  width: 28px; height: 28px; flex: none; padding: 0;
  border: none; border-radius: var(--kose-kucuk);
  background: transparent; color: var(--metin-3); cursor: pointer;
  display: grid; place-items: center;
}
.destek-kapat:hover { background: var(--zemin-3); color: var(--metin); }
.destek-kapat svg { width: 16px; height: 16px; }
.destek-kart-metin { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.55; color: var(--metin-2); }
.destek-kart-saat {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .95rem; font-size: .82rem; color: var(--metin-3);
}
.destek-kart-saat svg { width: 15px; height: 15px; flex: none; }
.destek-yaz {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1rem; border-radius: var(--kose-tam);
  background: #25d366; color: #fff; font-weight: 600; font-size: .93rem;
  text-decoration: none; transition: background var(--gecis);
}
.destek-yaz:hover { background: #1ebe5b; color: #fff; }
.destek-yaz svg { width: 19px; height: 19px; flex: none; }
.destek-numara {
  display: block; margin-top: .6rem; text-align: center;
  font-size: .82rem; color: var(--metin-3); letter-spacing: .01em;
}
@media (max-width: 560px) {
  .destek-balon { right: .9rem; bottom: .9rem; }
  .destek-dugme { width: 50px; height: 50px; }
  .destek-dugme svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .destek-kart { animation: none; }
  .destek-dugme { transition: none; }
}

/* ═══ Menu ayrintilari: 3 seviye, aciklama, rozet, mega sutunlar (16 Eki 2026) ═══ */
.menu-ac { display: none; }
.menu-rozet {
  display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px; vertical-align: middle;
  font-size: .62rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.5;
  background: var(--ana, #0070f3); color: #fff;
}
.menu-simge { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--ana) 10%, transparent); color: var(--ana); }
.menu-simge svg { width: 17px; height: 17px; }
.menu-yazi { display: grid; gap: 1px; text-align: left; }
.menu-aciklama { font-size: .74rem; font-weight: 400; color: var(--metin-3); line-height: 1.35; }
.menu-alt li { position: relative; }
.menu-alt a { display: flex; align-items: center; gap: .6rem; }
.menu-ok-yan { width: 13px; height: 13px; margin-left: auto; opacity: .55; flex: none; }
/* 3. seviye yana acilir */
.menu-alt-ic {
  position: absolute; top: calc(var(--aralik-2) * -1); left: calc(100% + 6px); min-width: 210px;
  background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--kose-orta); box-shadow: var(--golge-2);
  padding: var(--aralik-2); opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.menu-acilir-ic:hover > .menu-alt-ic, .menu-acilir-ic:focus-within > .menu-alt-ic { opacity: 1; visibility: visible; transform: none; }
.menu-alt-ic.sola { left: auto; right: calc(100% + 6px); transform: translateX(6px); }
/* Mega: sutunlar + one cikan kart */
.mega-panel.mega-gorselli { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; width: min(100% - 2rem, 70rem); }
.mega-sutunlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .25rem 1.2rem; }
.mega-sutun { padding: .4rem 0; }
.mega-sutun + .mega-sutun { border-left: 1px solid var(--kenar); padding-left: 1.2rem; }
.mega-sutun-baslik { display: block !important; padding: .3rem .5rem !important; font-size: .74rem !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3) !important; background: none !important; }
.mega-sutun ul { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: 2px; }
.mega-sutun ul a { display: flex !important; align-items: center; gap: .6rem; width: 100%; padding: .45rem .5rem !important; border-radius: 8px; }
.mega-yazi small { display: block; font-size: .74rem; color: var(--metin-3); margin-top: 2px; }
.mega-one-cikan { display: flex !important; flex-direction: column; gap: .6rem; padding: .6rem !important; border-radius: 12px; background: var(--zemin-2) !important; align-items: stretch !important; }
.mega-one-cikan img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.mega-one-cikan span { font-size: .85rem; color: var(--metin-2); white-space: normal; }

/* Telefon / tablet: alt menuler akordeon */
@media (max-width: 1023px) {
  .menu .menu-acilir { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .menu .menu-acilir > a { grid-column: 1; }
  .menu .menu-ac {
    display: inline-grid; place-items: center; grid-column: 2; width: 40px; height: 40px; border: 0; border-radius: 8px;
    background: transparent; color: var(--metin-2); cursor: pointer;
  }
  .menu .menu-ac .menu-ok { display: block; width: 16px; height: 16px; opacity: .8; transition: transform .2s ease; }
  .menu .menu-acilir[data-acik="evet"] > .menu-ac .menu-ok { transform: rotate(180deg); }
  .menu .menu-acilir > .menu-alt, .menu .menu-acilir > .mega-panel { grid-column: 1 / -1; display: none; }
  .menu .menu-acilir[data-acik="evet"] > .menu-alt, .menu .menu-acilir[data-acik="evet"] > .mega-panel { display: block; }
  .menu .menu-alt-ic { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--kenar); border-radius: 0; margin-left: var(--aralik-4); padding: 0; }
  .menu .menu-ok-yan { display: none; }
  .mega-panel.mega-gorselli { display: none; grid-template-columns: 1fr; }
  .menu .menu-acilir[data-acik="evet"] > .mega-panel.mega-gorselli { display: grid; }
  .mega-sutun + .mega-sutun { border-left: 0; padding-left: 0; }
  .mega-one-cikan { display: none !important; }
}

/* ═══ Menu ogesi ek ayarlari: renk, resim, baslik/ayrac/dugme, cihaz, pencere (16 Eki 2026) ═══ */
.menu a.mo-renkli { color: var(--mo-renk, inherit) !important; }
.menu a.mo-renkli[style*="--mo-zemin"] { background: var(--mo-zemin) !important; border-radius: 8px; padding-inline: .7rem; }
.mo-renkli .menu-simge, .mo-renkli .mega-simge { color: var(--mo-simge, var(--ana)); background: color-mix(in srgb, var(--mo-simge, var(--ana)) 12%, transparent); }
.mo-renkli .menu-rozet { background: var(--mo-rozet, var(--ana)); }
.menu-simge img, .mega-simge img { width: 20px; height: 20px; object-fit: contain; }
/* Vurgulu dugme ogesi */
.menu a.menu-dugme { background: var(--mo-zemin, var(--ana)) !important; color: var(--mo-renk, #fff) !important; border-radius: 999px; padding: .5rem 1.1rem !important; font-weight: 600; }
.menu a.menu-dugme:hover { filter: brightness(1.08); }
/* Baslik ve ayrac (tiklanmaz) */
.menu-baslik > span { display: block; padding: .5rem .75rem .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3); }
.menu-ayrac { height: 1px; margin: .35rem .5rem; background: var(--kenar); list-style: none; }
.menu > ul > .menu-ayrac, .menu-ust > .menu-ayrac { width: 1px; height: 22px; margin: 0 .4rem; align-self: center; }
.mega-izgara > .menu-ayrac { grid-column: 1 / -1; }
/* Resimli alt menu ogesi */
.menu-resim { flex: none; display: block; overflow: hidden; border-radius: 8px; background: var(--zemin-3); }
.menu-resim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-gorsel-sol .menu-resim, .mega-kart.menu-gorsel-sol .menu-resim { width: 56px; height: 44px; }
.menu-gorsel-ust > a, .mega-kart.menu-gorsel-ust { flex-direction: column; align-items: stretch !important; }
.menu-gorsel-ust .menu-resim, .mega-kart.menu-gorsel-ust .menu-resim { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.menu-gorsel-arka > a, .mega-kart.menu-gorsel-arka { position: relative; min-height: 92px; overflow: hidden; align-items: flex-end !important; color: #fff !important; }
.menu-gorsel-arka .menu-resim, .mega-kart.menu-gorsel-arka .menu-resim { position: absolute; inset: 0; border-radius: 0; }
.menu-gorsel-arka .menu-resim::after, .mega-kart.menu-gorsel-arka .menu-resim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,10,25,.8), rgba(5,10,25,.15)); }
.menu-gorsel-arka .menu-yazi, .menu-gorsel-arka .mega-yazi, .mega-kart.menu-gorsel-arka .mega-yazi { position: relative; z-index: 1; }
.menu-gorsel-arka .menu-aciklama, .mega-kart.menu-gorsel-arka small { color: rgba(255,255,255,.85) !important; }
.menu-alt .menu-gorsel-ust { min-width: 220px; }
/* Mega: sutun sayisi, genislik, one cikan kart */
.mega-panel[style*="--mega-sutun"] .mega-sutunlar, .mega-panel[style*="--mega-sutun"] .mega-izgara { grid-template-columns: repeat(var(--mega-sutun), minmax(0, 1fr)); }
.mega-panel.mega-tam { width: calc(100vw - 2rem); }
.mega-panel.mega-dar { width: min(100% - 2rem, 34rem); }
.mega-sutun-aciklama { margin: 0 .5rem .3rem; font-size: .74rem; color: var(--metin-3); }
.mega-kart-yazi { display: grid; gap: .2rem; }
.mega-kart-yazi strong { color: var(--metin); font-size: .92rem; }
.mega-kart-yazi small { color: var(--metin-2); font-size: .8rem; line-height: 1.45; }
.mega-kart-dugme { font-style: normal; font-weight: 700; color: var(--ana); font-size: .82rem; }
/* Cihaz kisiti */
@media (min-width: 1024px) { .menu-yalniz-telefon { display: none !important; } }
@media (max-width: 1023px) {
  .menu-yalniz-masaustu { display: none !important; }
  .mega-panel[style*="--mega-sutun"] .mega-sutunlar, .mega-panel[style*="--mega-sutun"] .mega-izgara { grid-template-columns: 1fr; }
  .mega-panel.mega-tam, .mega-panel.mega-dar { width: auto; }
  .menu > ul > .menu-ayrac, .menu-ust > .menu-ayrac { width: auto; height: 1px; margin: .35rem 0; }
}
/* Acilir pencere (menude "pencerede ac") */
.menu-pencere { width: min(980px, calc(100% - 2rem)); height: min(86vh, 900px); padding: 0; border: 0; border-radius: 16px; background: var(--zemin); box-shadow: 0 30px 80px rgba(0,0,0,.4); overflow: hidden; }
.menu-pencere::backdrop { background: rgba(5,10,25,.6); backdrop-filter: blur(3px); }
.menu-pencere-tepe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem .7rem 1.2rem; border-bottom: 1px solid var(--kenar); }
.menu-pencere-tepe strong { font-size: 1rem; }
.menu-pencere-tepe a { margin-left: auto; font-size: .85rem; color: var(--metin-2); }
.menu-pencere-tepe button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--metin); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.menu-pencere-tepe button:hover { background: var(--zemin-3); }
.menu-pencere iframe { width: 100%; height: calc(100% - 57px); border: 0; display: block; background: var(--zemin); }
/* Pencere icinde acilan sayfa: ust/alt bilgi gizlenir */
.pencere-ici body > *:not(main) { display: none !important; }
.pencere-ici main.govde { padding-top: 0 !important; }
/* Alt bilgi sutunlarinda menu ogesi ayarlari */
.alt-sutun a.mo-renkli { color: var(--mo-renk, inherit); }
.alt-sutun a .menu-simge { width: 22px; height: 22px; margin-right: .4rem; vertical-align: middle; border-radius: 6px; }
.alt-sutun a .menu-simge svg { width: 14px; height: 14px; }
.alt-sutun .menu-baslik > span { padding: .4rem 0 .1rem; }
.alt-sutun .menu-ayrac { margin: .3rem 0; }
.alt-sutun a.menu-dugme { display: inline-block; padding: .4rem .9rem; border-radius: 999px; background: var(--mo-zemin, var(--ana)); color: var(--mo-renk, #fff); }

/* Duyuru seridi (cxx > Duyurular) */
.site-duyuru { background: var(--ana); color: #fff; font-size: .9rem; position: relative; z-index: 70; }
.site-duyuru[hidden] { display: none; }
.site-duyuru-uyari { background: #b45309; } .site-duyuru-bakim { background: #374151; } .site-duyuru-kampanya { background: linear-gradient(90deg, #7c3aed, #db2777); }
.site-duyuru-ic { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-block: .55rem; }
.site-duyuru-ic p { margin: 0; text-align: center; line-height: 1.45; }
.site-duyuru-ic span { opacity: .92; }
.site-duyuru-ic a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.site-duyuru-kapat { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.site-duyuru-kapat:hover { background: rgba(255,255,255,.26); }

/* Kontrast (Lighthouse, 16 Eki 2026): koyu alt bilgide ana renk basliklar, kart ici
   deneme etiketi ve kapanis bandi ikinci dugmesi 4.5:1 altinda kaliyordu. */
body footer .alt-sutun h3 { color: color-mix(in srgb, var(--alt-baslik, var(--ana)) 62%, #ffffff); }
body .urun-kart .urun-kart-deneme, :root[data-tema="koyu"] body .urun-kart .urun-kart-deneme { color: color-mix(in srgb, var(--ana) 45%, var(--metin)); }

/* urun.css */
/* Urun sayfalari: /uygulamalar ve /uygulamalar/<slug>
   17.08.2026

   Bu dosya yalniz urun sayfalarinda degil, butun site sayfalarinda yukleniyor
   (kabuk tek yerden kuruluyor). Icindeki her secici "urun-", "donem-",
   "giris-yol" ya da var olan ".paket" ailesine ek olarak yazildi; baska
   sayfalarda kullanilan bir sinifi EZMEZ.

   Renk, olcu ve kose degerleri site-gorunum.css'teki degiskenlerden gelir -
   sabit renk yazilmadi. Panelden tema degistirildiginde bu sayfa da doner. */

/* ── Dar kapsayici: uzun metin ve surum notlari icin ── */
.kapsayici-dar { max-width: 52rem; margin-inline: auto; }

/* ── Sirali bolumlerde zemin degisimi. Bolum sinirini cizgiyle degil
     zeminle belirtmek, uzun sayfada gozu daha az yoruyor. ── */
.bolum-alternatif { background: var(--zemin-3); }

/* ── Urun tepesi ── */
.bolum-urun-tepe { padding-block-start: var(--aralik-7, 4rem); }
.urun-dugmeler {
  display: flex; flex-wrap: wrap; gap: var(--aralik-3, 1rem);
  justify-content: center; margin-top: var(--aralik-4, 1.5rem);
}
.urun-metin { display: grid; gap: var(--aralik-3, 1rem); }
.urun-metin p { color: var(--metin-2); margin: 0; }

/* ── Donem secici (haftalik / aylik / yillik) ── */
.donem-secici {
  display: inline-flex; gap: 4px; margin: 0 auto var(--aralik-5, 2rem);
  padding: 4px; border-radius: var(--kose-tam);
  background: var(--zemin-3); border: 1px solid var(--kenar);
}
/* Secici ortalanabilmesi icin kapsayicida blok ortalama gerekiyor. */
.bolum .donem-secici { display: flex; width: fit-content; }

.donem-dugme {
  border: 0; cursor: pointer; font: inherit;
  padding: 8px 18px; border-radius: var(--kose-tam);
  background: transparent; color: var(--metin-2);
  transition: background .15s ease, color .15s ease;
}
.donem-dugme:hover { color: var(--metin); }
.donem-dugme.etkin {
  background: var(--kart); color: var(--metin);
  box-shadow: var(--golge-1); font-weight: 600;
}
.donem-dugme:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }

/* ── Paket izgarasi: sutun sayisi paket sayisina uyar ──
   site.css'teki .paket-grubu sabit 3 sutun. Dort paketli bir uygulamada
   dorduncu kart tek basina alt satira dusuyor ve "unutulmus" gibi duruyor.
   Burada auto-fit: uc paket 3 sutun, dort paket 4 sutun (yer varsa), iki
   paket iki genis kart olur. Yalniz urun sayfasinda gecerli - anasayfadaki
   fiyat bolumu eski davranisi surduruyor. */
.paket-grubu-esnek {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Dort kart tek satira sigmazsa ikili ikili bolunsun; 3+1 gorunumu olmasin. */
@media (min-width: 641px) and (max-width: 1100px) {
  .paket-grubu-esnek { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .paket-grubu-esnek { grid-template-columns: 1fr; }
}

/* ── Fiyat sekmeleri: anasayfada butun uygulamalarin fiyatlari ──
   Uygulama dugmeleri ortada, iki yaninda oklar. Panel degisince kayarak
   gelir. Telefonda paket kartlari yan yana kayan bir serit olur; alt alta
   dizilen dort kart ekrani asagi dogru cok uzatiyordu. */
.fiyat-sekme-serit {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0 auto var(--aralik-5, 2rem); max-width: 100%;
}
.fiyat-sekme-listesi {
  display: flex; gap: 6px; padding: 5px; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  border-radius: var(--kose-tam); background: var(--zemin-3); border: 1px solid var(--kenar);
}
.fiyat-sekme-listesi::-webkit-scrollbar { display: none; }
.fiyat-sekme {
  flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  padding: 10px 20px; border-radius: var(--kose-tam); white-space: nowrap;
  background: transparent; color: var(--metin-2);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.fiyat-sekme:hover { color: var(--metin); background: var(--kart); }
.fiyat-sekme.etkin {
  background: var(--bolum-vurgu, var(--ana)); color: #fff; box-shadow: var(--golge-1);
}
.fiyat-sekme:focus-visible, .fiyat-ok:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.fiyat-ok {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--kenar); background: var(--kart); color: var(--metin);
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center; padding: 0 0 3px;
  transition: border-color .2s ease, color .2s ease;
}
.fiyat-ok:hover { border-color: var(--bolum-vurgu, var(--ana)); color: var(--bolum-vurgu, var(--ana)); }
.fiyat-paneller { overflow: hidden; padding-top: 14px; margin-top: -14px; }
.fiyat-panel[hidden] { display: none; }
.fiyat-panel.kayarak-sag { animation: fiyat-sagdan .35s ease both; }
.fiyat-panel.kayarak-sol { animation: fiyat-soldan .35s ease both; }
@keyframes fiyat-sagdan { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes fiyat-soldan { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
.fiyat-panel > .bolum-tepe { margin-bottom: var(--aralik-4, 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  .fiyat-panel.kayarak-sag, .fiyat-panel.kayarak-sol { animation: none; }
}
/* Paketler her genislikte tek satir, yana kayan serit: masaustunde dort,
   tablette iki kart gorunur; fazlasi kaydirilir (SMS'in yedi paketi iki
   satira dusuyordu). Az paketli uygulamada kartlar satiri doldurur. */
.fiyat-serit { position: relative; }
.fiyat-panel .paket-grubu-esnek {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; max-width: none;
  gap: var(--aralik-4, 1rem); padding: 14px 4px 10px; margin-inline: -4px;
  scrollbar-width: thin; scroll-behavior: smooth; scroll-padding-inline: 4px;
}
.fiyat-panel .paket-grubu-esnek > .paket {
  flex: 1 0 calc((100% - 3 * var(--aralik-4, 1rem)) / 4); min-width: 15rem; scroll-snap-align: start;
}
.paket-kaydir {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--kenar); background: var(--kart); color: var(--metin);
  box-shadow: var(--golge-2); font-size: 1.5rem; line-height: 1; padding: 0 0 3px;
  display: grid; place-items: center;
}
.paket-kaydir[hidden] { display: none; }
.paket-kaydir-geri { left: -22px; }
.paket-kaydir-ileri { right: -22px; }
@media (max-width: 1100px) {
  .fiyat-panel .paket-grubu-esnek > .paket { flex-basis: calc((100% - var(--aralik-4, 1rem)) / 2); }
}
@media (max-width: 640px) {
  .fiyat-ok, .paket-kaydir { display: none; }
  .fiyat-sekme { padding: 9px 16px; }
  .fiyat-panel .paket-grubu-esnek > .paket { flex: 0 0 86%; min-width: 0; scroll-snap-align: center; }
}

/* ── Pakete eklenenler ── */
.paket-limit {
  margin: 0; font-size: var(--olcek-2); color: var(--metin-3);
  padding-bottom: var(--aralik-2, .5rem);
  border-bottom: 1px solid var(--kenar);
}
.paket-fiyat-yok {
  font-family: var(--yazi-baslik); font-size: var(--olcek-5) !important;
  font-weight: 600; color: var(--metin-2) !important;
}

/* ── Giris yollari: tarayici / masaustu / mobil ── */
.giris-yollari {
  display: grid; gap: var(--aralik-4, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.giris-yol {
  display: flex; flex-direction: column; gap: var(--aralik-2, .5rem);
  align-items: flex-start;
  padding: var(--aralik-4, 1.5rem);
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
}
.giris-yol h3 { margin: 0; font-size: var(--olcek-3); }
.giris-yol p { margin: 0; font-size: var(--olcek-2); color: var(--metin-3); }
.giris-yol .dugme { margin-top: auto; }

/* ── Uygulama vitrini ── */
.urun-izgara {
  display: grid; gap: var(--aralik-4, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.urun-kart {
  display: flex; flex-direction: column; gap: var(--aralik-2, .5rem);
  padding: var(--aralik-4, 1.5rem);
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta); text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.urun-kart:hover {
  border-color: var(--ana-acik); box-shadow: var(--golge-2);
  transform: translateY(-2px);
}
.urun-kart:focus-visible { outline: 2px solid var(--ana); outline-offset: 3px; }
.urun-kart-tepe { display: flex; align-items: center; gap: var(--aralik-2, .5rem); flex-wrap: wrap; }
.urun-kart-tepe h3 { margin: 0; font-size: var(--olcek-4); }
.urun-kart p { margin: 0; color: var(--metin-2); font-size: var(--olcek-2); }
.urun-kart-alt {
  display: flex; align-items: baseline; gap: var(--aralik-3, 1rem);
  flex-wrap: wrap; margin-top: auto; padding-top: var(--aralik-3, 1rem);
}
.urun-kart-fiyat {
  font-family: var(--yazi-baslik); font-weight: 700; font-size: var(--olcek-5);
  color: var(--metin);
}
.urun-kart-fiyat small {
  font-family: var(--yazi-govde); font-weight: 400;
  font-size: var(--olcek-1); color: var(--metin-3); margin-left: 4px;
}
.urun-kart-deneme {
  font-size: var(--olcek-1); padding: 3px 10px; border-radius: var(--kose-tam);
  background: color-mix(in srgb, var(--ana) 12%, transparent); color: var(--ana-koyu);
}

/* ── "Yakinda" ve "kapali" rozeti. Var olan .etiket ailesine ek ── */
.etiket-yakinda {
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: #8a6716;
}

.bos-durum { text-align: center; color: var(--metin-3); }

/* ── Kilavuz sayfasi ── */
.kilavuz-icindekiler {
  display: grid; gap: var(--aralik-4, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding: var(--aralik-4, 1.5rem);
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
}
.kilavuz-grup-baglanti h3 {
  margin: 0 0 var(--aralik-2, .5rem); font-size: var(--olcek-2);
  text-transform: uppercase; letter-spacing: .04em; color: var(--metin-3);
}
.kilavuz-grup-baglanti ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kilavuz-grup-baglanti a { color: var(--metin-2); text-decoration: none; font-size: var(--olcek-2); }
.kilavuz-grup-baglanti a:hover { color: var(--ana); text-decoration: underline; }

.kilavuz-bolum {
  padding: var(--aralik-4, 1.5rem) 0;
  border-top: 1px solid var(--kenar);
}
.kilavuz-bolum:first-of-type { border-top: 0; }
/* Ic baglantiyla gelindiginde baslik yapiskan tepenin altinda kalmasin. */
.kilavuz-bolum { scroll-margin-top: 6rem; }
.kilavuz-bolum h3 { margin: 0 0 var(--aralik-2, .5rem); font-size: var(--olcek-4); }
.kilavuz-metin ul { display: grid; gap: var(--aralik-2, .5rem); margin: 0; padding-left: 1.1rem; }
.kilavuz-metin li, .kilavuz-metin p { color: var(--metin-2); }
.kilavuz-metin p { margin: 0 0 var(--aralik-2, .5rem); }

.kilavuz-sss { margin-top: var(--aralik-3, 1rem); }
.kilavuz-sss h4 {
  margin: 0 0 var(--aralik-2, .5rem); font-size: var(--olcek-2);
  text-transform: uppercase; letter-spacing: .04em; color: var(--metin-3);
}
.kilavuz-sss details {
  border: 1px solid var(--kenar); border-radius: var(--kose-kucuk);
  padding: 10px 14px; margin-bottom: 8px; background: var(--zemin-2);
}
.kilavuz-sss summary { cursor: pointer; font-weight: 500; color: var(--metin); }
.kilavuz-sss summary:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.kilavuz-sss details p { margin: 8px 0 0; color: var(--metin-2); font-size: var(--olcek-2); }

/* ── Koyu tema. Yalniz kendi degiskenleri olan yerler duzeltiliyor;
     gerisi zaten degiskenlerden geliyor ve kendiliginden doner. ── */
:root[data-tema="koyu"] .etiket-yakinda { color: var(--vurgu-acik); }
:root[data-tema="koyu"] .urun-kart-deneme { color: var(--ana-acik); }

/* ── Telefon ── */
@media (max-width: 640px) {
  .urun-dugmeler { flex-direction: column; align-items: stretch; }
  .urun-dugmeler .dugme { text-align: center; }
  .donem-secici { width: 100%; }
  .donem-dugme { flex: 1; padding-inline: 8px; }
}

/* ── Güven rozetleri ──
   Musa'nın kararı: rakam yerine doğrulanabilir güven unsurları. */
.rozet-izgara {
  display: grid; gap: var(--aralik-3, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.rozet {
  padding: var(--aralik-4, 1.5rem);
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  /* Sol kenarda ince vurgu şeridi: kart yığınında gözü yönlendiriyor. */
  border-left: 3px solid var(--ana);
}
.rozet h3 { margin: 0 0 6px; font-size: var(--olcek-3); }
.rozet p { margin: 0; font-size: var(--olcek-2); color: var(--metin-2); }

/* ── "Öncesi / sonrası" karşılaştırması ── */
.karsilastirma {
  border: 1px solid var(--kenar); border-radius: var(--kose-orta);
  overflow: hidden; background: var(--kart);
}
.karsilastirma-tepe,
.karsilastirma-satir {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--aralik-3, 1rem);
}
.karsilastirma-tepe {
  background: var(--zemin-3); font-weight: 600;
  border-bottom: 1px solid var(--kenar);
}
.karsilastirma-tepe span,
.karsilastirma-satir p {
  margin: 0; padding: 14px var(--aralik-3, 1rem);
}
.karsilastirma-satir { border-bottom: 1px solid var(--kenar); }
.karsilastirma-satir:last-child { border-bottom: 0; }
/* Sol sütun "sorun", sağ sütun "çözüm" - renkle ayrılıyor, ikonla değil:
   ikon 16 pikselde kayboluyor ve ekran okuyucuda anlam taşımıyor. */
.karsilastirma-once { color: var(--metin-3); }
.karsilastirma-satir .karsilastirma-once { position: relative; }
.karsilastirma-sonra {
  color: var(--metin); font-weight: 500;
  background: color-mix(in srgb, var(--ana) 4%, transparent);
}
.karsilastirma-tepe .karsilastirma-sonra { color: var(--ana-koyu); }

/* ── SSS ── */
.sss-listesi { display: grid; gap: 10px; }
.sss-listesi details {
  border: 1px solid var(--kenar); border-radius: var(--kose-kucuk);
  padding: 14px 16px; background: var(--kart);
}
.sss-listesi summary {
  cursor: pointer; font-weight: 500; color: var(--metin);
}
.sss-listesi summary:focus-visible { outline: 2px solid var(--ana); outline-offset: 3px; }
.sss-listesi details[open] summary { margin-bottom: 8px; }
.sss-listesi details p { margin: 0; color: var(--metin-2); }

@media (max-width: 640px) {
  /* Telefonda iki sütun okunmuyor - alt alta, "öncesi" üstte. */
  .karsilastirma-tepe { display: none; }
  .karsilastirma-satir { grid-template-columns: 1fr; gap: 0; }
  .karsilastirma-satir p { padding-block: 10px; }
  .karsilastirma-satir .karsilastirma-once { padding-bottom: 4px; }
}

/* ── Fiyat hesaplayici ─────────────────────────────────── */
/* JS kapaliyken hic gorunmez (HTML'de hidden); alttaki paket
   kartlari zaten tam bilgiyi veriyor. */
.hesaplayici {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 900px;
  margin: 0 auto 3rem;
  padding: 2rem 2.25rem;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-buyuk);
  box-shadow: var(--golge-2);
}
.hesaplayici[hidden] { display: none; }

.hesaplayici-etiket {
  display: block;
  font-size: .92rem; color: var(--metin-3);
  margin-bottom: .35rem;
}
.hesaplayici-sayi {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: 3rem; font-weight: 600; line-height: 1.05;
  color: var(--ana);
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.hesaplayici-kaydirac {
  width: 100%; height: 6px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: var(--zemin-3);
  border-radius: var(--kose-tam);
  cursor: pointer;
}
.hesaplayici-kaydirac::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ana); border: 3px solid var(--kart);
  box-shadow: 0 2px 10px rgba(20, 22, 26, .22);
  cursor: grab;
}
.hesaplayici-kaydirac::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ana); border: 3px solid var(--kart);
  box-shadow: 0 2px 10px rgba(20, 22, 26, .22);
  cursor: grab;
}
.hesaplayici-kaydirac:focus-visible { outline: 3px solid var(--ana); outline-offset: 4px; }
.hesaplayici-uclar {
  display: flex; justify-content: space-between;
  margin-top: .55rem; font-size: .8rem; color: var(--metin-3);
}

.hesaplayici-sag {
  padding: 1.5rem 1.6rem;
  background: var(--zemin-2);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-orta);
  text-align: center;
}
.hesap-etiket { display: block; font-size: .82rem; color: var(--metin-3); }
.hesap-paket {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: 1.5rem; font-weight: 600;
  margin: .15rem 0 .5rem;
}
.hesap-fiyat { margin: 0 0 .4rem; display: flex; align-items: baseline; justify-content: center; gap: .3rem; }
.hesap-fiyat span { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hesap-fiyat small { font-size: .88rem; color: var(--metin-3); }
.hesap-kazanc {
  margin: 0 0 .5rem; font-size: .85rem; font-weight: 500;
  color: var(--basari, #2f7a55);
}
.hesap-not { margin: 0 0 1rem; font-size: .78rem; color: var(--metin-3); line-height: 1.5; }
.hesaplayici-sag .dugme { width: 100%; justify-content: center; }

@media (max-width: 780px) {
  .hesaplayici { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1.35rem; }
  .hesaplayici-sayi { font-size: 2.4rem; }
}

/* ── Kahraman ekran görüntüsü ──────────────────────────── */
.urun-kahraman-gorsel {
  margin: 3rem auto 0;
  max-width: 1080px;
  border-radius: var(--kose-buyuk);
  overflow: hidden;
  border: 1px solid var(--kenar);
  box-shadow: var(--golge-3);
  background: var(--kart);
}
.urun-kahraman-gorsel img { display: block; width: 100%; height: auto; }

/* ── Modül sekmeleri ───────────────────────────────────── */
.modul-sekmeler {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 0 auto 2rem;
}
.modul-dugme {
  padding: .6rem 1.25rem;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-tam);
  background: var(--kart); color: var(--metin-2);
  font: inherit; font-size: .93rem; font-weight: 500;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.modul-dugme:hover { border-color: var(--kenar-koyu); color: var(--metin); }
.modul-dugme.etkin {
  background: var(--ana); border-color: var(--ana); color: #fff;
}
.modul-dugme:focus-visible { outline: 3px solid var(--ana); outline-offset: 2px; }

.modul-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.9fr);
  gap: 2.5rem;
  align-items: center;
}
.modul-panel[hidden] { display: none; }
.modul-metin h3 {
  font-family: var(--yazi-baslik);
  font-size: 1.6rem; font-weight: 600; margin: 0 0 1rem;
}
.modul-faydalar { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.modul-faydalar li {
  position: relative; padding-left: 1.6rem;
  font-size: .97rem; line-height: 1.6; color: var(--metin-2);
}
.modul-faydalar li::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ana);
}
.modul-gorsel {
  margin: 0;
  border-radius: var(--kose-orta);
  overflow: hidden;
  border: 1px solid var(--kenar);
  box-shadow: var(--golge-2);
  background: var(--kart);
}
.modul-gorsel img { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
  .modul-panel { grid-template-columns: 1fr; gap: 1.5rem; }
  .urun-kahraman-gorsel { margin-top: 2rem; }
}

/* Sayfa bolumu: uygulama kartinda Incele + Ucretsiz dene (16 Eki 2026) */
.urun-kart-dugmeli { display: flex; flex-direction: column; }
.urun-kart-dugmeler { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: 1rem; }
.urun-kart-dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
.paket-tum { text-align: center; margin: 1.5rem 0 0; }
.paket-tum a { font-weight: 600; color: var(--ana); }

/* Destek sayfasi (/destek) */
.destek-sayfa h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: .3rem 0 .6rem; }
.destek-ara { display: flex; gap: .5rem; max-width: 560px; margin: 1.6rem auto 0; }
.destek-ara input { flex: 1; min-height: 50px; padding: 0 1rem; border: 1px solid var(--kenar-koyu, var(--kenar)); border-radius: 12px; background: var(--kart); color: var(--metin); font: inherit; }
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.destek-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 2.5rem; }
.destek-kart { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem; border: 1px solid var(--kenar); border-radius: 16px; background: var(--kart); }
.destek-kart h2 { margin: 0; font-size: 1.2rem; }
.destek-kart p { margin: 0; color: var(--metin-2); line-height: 1.6; flex: 1; }
.destek-kart .dugme { align-self: flex-start; }
.destek-simge { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--ana) 12%, transparent); color: var(--ana); }
.destek-simge svg { width: 24px; height: 24px; }
.destek-populer { margin-top: 2.5rem; }
.destek-populer h2 { font-size: 1.2rem; margin: 0 0 .8rem; }
.destek-populer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .6rem 1.5rem; }
.destek-populer li { display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--kenar); }
.destek-populer small { color: var(--metin-3); }
@media (max-width: 520px) { .destek-ara { flex-direction: column; } }

/* Site ici arama (/ara) */
.ara-sayfa h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: .3rem 0 0; }
.ara-form { margin: 1.2rem 0 2rem; max-width: 640px; }
.ara-grup { margin-bottom: 2rem; }
.ara-grup h2 { font-size: 1.05rem; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.ara-grup h2 small { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--zemin-3); color: var(--metin-3); }
.ara-grup ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ara-grup a { display: grid; gap: .25rem; padding: .9rem 1rem; border: 1px solid var(--kenar); border-radius: 12px; background: var(--kart); color: var(--metin); text-decoration: none; }
.ara-grup a:hover { border-color: var(--ana); }
.ara-grup span { color: var(--metin-2); font-size: .92rem; line-height: 1.55; }
.ara-grup em { font-style: normal; font-size: .78rem; color: var(--metin-3); }
.ara-grup mark { background: color-mix(in srgb, var(--ana) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.ara-bos p { margin: 0 0 .4rem; color: var(--metin-2); }

/* ═══ Uygulama magazasi (17 Eki 2026): App Store / Google Play / WordPress dizini duzeni ═══ */
.mg-simge { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--ana), color-mix(in srgb, var(--ana) 55%, var(--vurgu, #00ccff))); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--ana) 28%, transparent); }
.mg-simge img { width: 100%; height: 100%; object-fit: cover; }
.mg-simge svg { width: 26px; height: 26px; }
.mg-simge-buyuk { width: 72px; height: 72px; border-radius: 18px; }
.mg-simge-buyuk svg { width: 36px; height: 36px; }
.mg-kategori { display: block; font-size: var(--olcek-1, .78rem); color: var(--metin-3); }
.mg-izgara { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr)); }
.mg-kart { display: flex; flex-direction: column; gap: .75rem; padding: 1.15rem; border: 1px solid var(--kenar); border-radius: var(--kose-orta, 12px);
  background: var(--kart); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.mg-kart:hover { border-color: color-mix(in srgb, var(--ana) 40%, var(--kenar)); box-shadow: var(--golge-2); transform: translateY(-2px); }
.mg-kart[hidden] { display: none; }
.mg-kart-tepe { display: flex; align-items: center; gap: .8rem; }
.mg-kart-ad { flex: 1; min-width: 0; }
.mg-kart-ad h3 { margin: 0; font-size: var(--olcek-4, 1.1rem); line-height: 1.25; }
.mg-kart-ad h3 a { color: inherit; text-decoration: none; }
.mg-kart-ad h3 a::after { content: ''; position: absolute; inset: 0; }
.mg-kart { position: relative; }
.mg-kart .mg-dugmeler, .mg-kart .etiket { position: relative; z-index: 1; }
.mg-kart-ad h3 a:focus-visible { outline: 2px solid var(--ana); outline-offset: 3px; border-radius: 4px; }
.mg-ozet { margin: 0; flex: 1; color: var(--metin-2); font-size: var(--olcek-2, .9rem); line-height: 1.55; }
.mg-platform { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.mg-platform li { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; background: var(--zemin-2); color: var(--metin-2); font-size: .75rem; font-weight: 500; }
.mg-platform svg { width: 14px; height: 14px; }
.mg-platform-orta { justify-content: center; margin: .2rem 0 1rem; }
.mg-kart-alt { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding-top: .75rem; border-top: 1px solid var(--kenar); }
.mg-fiyat-kutu { display: grid; gap: .1rem; }
.mg-fiyat { color: var(--metin); }
.mg-fiyat strong { font-size: 1.05rem; }
.mg-fiyat small { color: var(--metin-3); font-size: .78rem; }
.mg-deneme { font-size: .75rem; font-weight: 600; color: color-mix(in srgb, var(--ana) 70%, var(--metin)); }
.mg-dugmeler { display: flex; gap: .4rem; flex-wrap: wrap; }
.mg-arac { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1.25rem; }
.mg-ara { flex: 1 1 260px; display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--kenar); border-radius: 999px; background: var(--kart); color: var(--metin-3); }
.mg-ara:focus-within { border-color: var(--ana); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ana) 18%, transparent); }
.mg-ara svg { width: 18px; height: 18px; flex: none; }
.mg-ara input { flex: 1; min-width: 0; border: 0; background: none; color: var(--metin); font: inherit; outline: none; }
.mg-kategoriler { display: flex; flex-wrap: wrap; gap: .4rem; }
.mg-kategoriler button { min-height: 36px; padding: 0 .9rem; border: 1px solid var(--kenar); border-radius: 999px; background: var(--kart); color: var(--metin-2); font: inherit; font-size: .85rem; cursor: pointer; }
.mg-kategoriler button[aria-pressed="true"] { border-color: var(--ana); background: var(--ana); color: #fff; }
.mg-sirala { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--metin-3); }
.mg-sirala select { min-height: 36px; padding: 0 .6rem; border: 1px solid var(--kenar); border-radius: 8px; background: var(--kart); color: var(--metin); font: inherit; }
.mg-sonuc-yok { margin: 1rem 0 0; color: var(--metin-3); }
.mg-one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: center; margin: 0 0 1.75rem; padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--ana) 25%, var(--kenar)); border-radius: var(--kose-buyuk, 18px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ana) 9%, var(--kart)), var(--kart)); }
.mg-one-etiket { display: inline-block; margin-bottom: .7rem; padding: .2rem .6rem; border-radius: 999px; background: var(--ana); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mg-one-ad { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.mg-one-ad h2 { margin: 0; font-size: var(--olcek-6, 1.6rem); }
.mg-one p { margin: 0 0 .9rem; color: var(--metin-2); line-height: 1.6; }
.mg-one-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.mg-one-gorsel { display: block; overflow: hidden; border-radius: var(--kose-orta, 12px); border: 1px solid var(--kenar); box-shadow: var(--golge-2); background: var(--zemin-2); }
.mg-one-gorsel img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .mg-one { grid-template-columns: 1fr; } .mg-one-gorsel { order: -1; } }
.mg-urun-kimlik { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.mg-urun-kimlik h1 { margin: 0; }
.mg-urun-gelistirici { margin: .35rem 0 0; color: var(--metin-3); font-size: .9rem; }
.bolum-urun-tepe .bolum-etiket a { color: inherit; }
.mg-bilgi { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin: 0; }
.mg-bilgi > div { padding: .85rem 1rem; border: 1px solid var(--kenar); border-radius: var(--kose-orta, 12px); background: var(--kart); }
.mg-bilgi dt { margin: 0 0 .2rem; color: var(--metin-3); font-size: .78rem; }
.mg-bilgi dd { margin: 0; font-weight: 600; color: var(--metin); }
.mg-izgara-kucuk { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.mg-tumu { margin: 1rem 0 0; text-align: center; }
.mg-arac [hidden] { display: none !important; }
.mg-kart-dar .mg-izgara:not(.mg-izgara-kucuk) { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.mg-kart-genis .mg-izgara:not(.mg-izgara-kucuk) { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
@media (max-width: 480px) { .mg-izgara, .mg-kart-genis .mg-izgara:not(.mg-izgara-kucuk) { grid-template-columns: 1fr; } }

/* ═══ Uygulama sayfasi: alt menu, ozellikler, belgeler (17 Eki 2026) ═══ */
.uyg-serit { position: sticky; top: var(--tepe-yukseklik, 0px); z-index: 40; background: color-mix(in srgb, var(--zemin) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--kenar); }
.uyg-serit-ic { display: flex; align-items: center; gap: 1rem; min-height: 56px; overflow-x: auto; scrollbar-width: none; }
.uyg-serit-ic::-webkit-scrollbar { display: none; }
.uyg-serit-ad { display: inline-flex; align-items: center; gap: .55rem; flex: none; color: var(--metin); font-weight: 700; text-decoration: none; }
.mg-simge-kucuk { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.mg-simge-kucuk svg { width: 16px; height: 16px; }
.uyg-serit ul { display: flex; gap: .2rem; margin: 0; padding: 0; list-style: none; flex: none; }
.uyg-serit li a { display: block; padding: .45rem .75rem; border-radius: 999px; color: var(--metin-2); font-size: .9rem; text-decoration: none; white-space: nowrap; }
.uyg-serit li a:hover { color: var(--metin); background: var(--zemin-2); }
.uyg-serit li a[aria-current="page"] { color: var(--ana); background: color-mix(in srgb, var(--ana) 10%, transparent); font-weight: 600; }
.uyg-serit-dugme { margin-left: auto; flex: none; display: flex; gap: .4rem; }
@media (max-width: 760px) { .uyg-serit-dugme { display: none; } }

.oz-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.oz-kart { display: grid; gap: .5rem; align-content: start; padding: 1.25rem; border: 1px solid var(--kenar); border-radius: var(--kose-orta, 12px); background: var(--kart); }
.oz-kart h3 { margin: 0; font-size: 1.02rem; }
.oz-kart p { margin: 0; color: var(--metin-2); font-size: .92rem; line-height: 1.6; }
.oz-simge { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb, var(--ana) 12%, transparent); color: var(--ana); }
.oz-simge svg { width: 22px; height: 22px; }
.oz-gorsel { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--kenar); margin-bottom: .3rem; }
.oz-gruplar { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 1rem; }
.oz-gruplar a { padding: .45rem .9rem; border: 1px solid var(--kenar); border-radius: 999px; color: var(--metin-2); text-decoration: none; font-size: .88rem; }
.oz-gruplar a:hover { border-color: var(--ana); color: var(--ana); }
.oz-grup-baslik { margin: 0 0 1rem; font-size: var(--olcek-5, 1.35rem); }
.oz-cagri { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.oz-cagri h2 { margin: 0; }

.bl-ara { max-width: 560px; margin: 0 auto 1.5rem; }
.bl-grup { margin-bottom: 1.75rem; }
.bl-grup[hidden] { display: none; }
.bl-grup h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.bl-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.bl-kart { display: grid; gap: .3rem; padding: 1rem 1.1rem; border: 1px solid var(--kenar); border-radius: var(--kose-orta, 12px); background: var(--kart); color: var(--metin); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.bl-kart:hover { border-color: var(--ana); transform: translateY(-1px); }
.bl-kart[hidden] { display: none; }
.bl-kart span { color: var(--metin-2); font-size: .9rem; line-height: 1.5; }
.bl-kart small { color: var(--metin-3); font-size: .78rem; }
.bl-bos { color: var(--metin-3); text-align: center; }
.bl-kilitli, .bl-destek { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px dashed var(--kenar); border-radius: var(--kose-orta, 12px); }
.bl-kilitli span, .bl-destek span { color: var(--metin-2); font-size: .9rem; flex: 1 1 260px; }
.bl-duzen { display: grid; grid-template-columns: 230px minmax(0, 1fr) 200px; gap: 2rem; align-items: start; }
.bl-yan, .bl-icindekiler { position: sticky; top: calc(var(--tepe-yukseklik, 70px) + 70px); max-height: calc(100vh - 160px); overflow-y: auto; font-size: .88rem; }
.bl-yan-kat { margin: 1rem 0 .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--metin-3); }
.bl-yan-kat:first-child { margin-top: 0; }
.bl-yan ul, .bl-icindekiler ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.bl-yan a { display: block; padding: .35rem .6rem; border-radius: 7px; color: var(--metin-2); text-decoration: none; }
.bl-yan a:hover { background: var(--zemin-2); color: var(--metin); }
.bl-yan a[aria-current="page"] { background: color-mix(in srgb, var(--ana) 10%, transparent); color: var(--ana); font-weight: 600; }
.bl-icindekiler p { margin: 0 0 .4rem; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--metin-3); }
.bl-icindekiler a { display: block; padding: .2rem 0 .2rem .6rem; border-left: 2px solid var(--kenar); color: var(--metin-2); text-decoration: none; }
.bl-icindekiler a:hover { color: var(--ana); border-left-color: var(--ana); }
.bl-icindekiler .bl-d3 a { padding-left: 1.2rem; font-size: .84rem; }
.bl-makale { min-width: 0; }
.bl-yol { font-size: .85rem; color: var(--metin-3); }
.bl-yol a { color: inherit; }
.bl-makale h1 { margin: .4rem 0 .3rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.bl-meta { margin: 0 0 1.5rem; color: var(--metin-3); font-size: .85rem; }
.bl-icerik { font-size: 1rem; line-height: 1.75; color: var(--metin); }
.bl-icerik h2 { margin: 2rem 0 .6rem; font-size: 1.35rem; scroll-margin-top: 140px; }
.bl-icerik h3 { margin: 1.5rem 0 .5rem; font-size: 1.12rem; scroll-margin-top: 140px; }
.bl-icerik h4 { margin: 1.2rem 0 .4rem; font-size: 1rem; }
.bl-icerik p, .bl-icerik ul, .bl-icerik ol { margin: 0 0 1rem; }
.bl-icerik li { margin: .25rem 0; }
.bl-icerik img { max-width: 100%; height: auto; border: 1px solid var(--kenar); border-radius: 10px; }
.bl-icerik code { padding: .1rem .35rem; border-radius: 5px; background: var(--zemin-2); font-size: .9em; }
.bl-kod { overflow-x: auto; margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: 10px; background: #0f172a; color: #e2e8f0; font-size: .88rem; line-height: 1.6; }
.bl-kod code { padding: 0; background: none; color: inherit; }
.bl-kutu { margin: 0 0 1rem; padding: .85rem 1rem; border-left: 4px solid var(--kenar); border-radius: 0 10px 10px 0; background: var(--zemin-2); }
.bl-kutu p { margin: 0; }
.bl-kutu-etiket { display: block; margin-bottom: .2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.bl-ipucu { border-left-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, var(--kart)); }
.bl-uyari { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 9%, var(--kart)); }
.bl-not { border-left-color: var(--ana); background: color-mix(in srgb, var(--ana) 8%, var(--kart)); }
.bl-tablo { overflow-x: auto; margin: 0 0 1rem; }
.bl-tablo table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bl-tablo th, .bl-tablo td { padding: .55rem .7rem; border: 1px solid var(--kenar); text-align: left; vertical-align: top; }
.bl-tablo th { background: var(--zemin-2); }
.bl-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.5rem; overflow: hidden; border-radius: 12px; background: #000; }
.bl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bl-gez { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 2rem; }
.bl-gez a { display: grid; gap: .15rem; padding: .85rem 1rem; border: 1px solid var(--kenar); border-radius: 10px; color: var(--metin); text-decoration: none; }
.bl-gez a:hover { border-color: var(--ana); }
.bl-gez small { color: var(--metin-3); }
.bl-gez-sonraki { text-align: right; }
@media (max-width: 1100px) { .bl-duzen { grid-template-columns: 210px minmax(0, 1fr); } .bl-icindekiler { display: none; } }
@media (max-width: 760px) { .bl-duzen { grid-template-columns: 1fr; } .bl-yan { position: static; max-height: none; order: 2; border-top: 1px solid var(--kenar); padding-top: 1rem; } }
.bl-icerik ol, .blg-oniz ol { list-style: decimal; padding-left: 1.5rem; }
.bl-icerik ul, .blg-oniz ul { list-style: disc; padding-left: 1.4rem; }
.bl-icerik li::marker { color: var(--ana); font-weight: 600; }

/* ═══ URUN SAYFASI v2 + uygulama sol menusu (17 Eki 2026) ═══
   Duzen: solda yapiskan uygulama menusu, sagda icerik. Duz yuzey, golgesiz; tek koyu bant
   (guvenceler) ve kapanis. Basliklar sikI harf araligiyla, govde 17px. Renkler kimlikten. */
.uy-duzen { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding-top: 1.5rem; padding-bottom: 2rem; }
.uy-yan { position: sticky; top: calc(var(--tepe-yukseklik, 76px) + 16px); max-height: calc(100vh - var(--tepe-yukseklik, 76px) - 32px); overflow-y: auto; display: grid; gap: 1.1rem; padding: 0 .25rem 1rem 0; scrollbar-width: thin; }
.uy-kimlik { display: flex; align-items: center; gap: .75rem; color: var(--metin); text-decoration: none; }
.uy-simge { width: 48px; height: 48px; border-radius: 13px; box-shadow: none; }
.uy-simge svg { width: 24px; height: 24px; }
.uy-kimlik strong { display: block; font-family: var(--yazi-baslik); font-size: 1.12rem; line-height: 1.2; letter-spacing: -.01em; }
.uy-kimlik small { color: var(--metin-3); font-size: .8rem; }
.uy-karar { display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--kenar); border-radius: 14px; background: var(--kart); }
.uy-fiyat { margin: 0; color: var(--metin); line-height: 1.3; }
.uy-fiyat strong { font-family: var(--yazi-baslik); font-size: 1.45rem; letter-spacing: -.02em; }
.uy-fiyat small { color: var(--metin-3); font-size: .78rem; }
.uy-deneme { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .84rem; color: var(--metin-2); }
.uy-deneme svg { width: 16px; height: 16px; color: #16a34a; flex: none; }
.uy-ana { width: 100%; justify-content: center; }
.uy-demo { justify-self: center; font-size: .84rem; color: var(--ana); text-decoration: none; font-weight: 600; }
.uy-demo:hover { text-decoration: underline; }
.uy-menu ul { margin: 0 0 .9rem; padding: 0; list-style: none; display: grid; gap: .05rem; }
.uy-menu-baslik { margin: 0 0 .35rem; padding-left: .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-3); }
.uy-menu a { display: block; padding: .42rem .7rem; border-radius: 8px; border-left: 2px solid transparent; color: var(--metin-2); font-size: .92rem; text-decoration: none; }
.uy-menu a:hover { background: color-mix(in srgb, var(--ana) 6%, transparent); color: var(--metin); }
.uy-menu a[aria-current="page"], .uy-menu a.etkin { border-left-color: var(--ana); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--ana) 9%, transparent); color: var(--ana); font-weight: 600; }
.uy-belge-menu { padding-top: .8rem; border-top: 1px solid var(--kenar); }
.uy-platform { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.uy-platform span { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 999px; background: var(--zemin-2); color: var(--metin-2); font-size: .75rem; }
.uy-platform svg { width: 14px; height: 14px; }
.uy-icerik { min-width: 0; }
.uy-icerik .kapsayici { max-width: none; padding-left: 0; padding-right: 0; }
.uy-icerik > .bolum, .uy-icerik > section.bolum { background: transparent; }

/* Ortak */
.up-ic { width: 100%; }
.up-bolum { padding: clamp(3rem, 6vw, 5.5rem) 0; border-top: 1px solid var(--kenar); }
.up-bolum-tepe { max-width: 46rem; margin-bottom: 2rem; }
.up-bolum h2, .up-bolum-tepe h2, .up-kapanis h2 { margin: 0 0 .6rem; font-family: var(--yazi-baslik); font-size: clamp(1.8rem, 3.1vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; color: var(--metin); }
.up-bolum-tepe p, .up-yapiskan > p { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--metin-2); }
.up-dugme { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.4rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: 700; font-size: .98rem; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.up-dugme-ana { background: var(--ana); color: #fff; }
.up-dugme-ana:hover { background: color-mix(in srgb, var(--ana) 85%, #000); }
.up-dugme-ikincil { border-color: var(--kenar); background: var(--kart); color: var(--metin); }
.up-dugme-ikincil:hover { border-color: var(--ana); color: var(--ana); }
.up-dugme:focus-visible, .uy-menu a:focus-visible, .up-tur-sekme:focus-visible { outline: 3px solid color-mix(in srgb, var(--ana) 45%, transparent); outline-offset: 2px; }
.up-bag { display: inline-block; margin-top: .4rem; color: var(--ana); font-weight: 600; text-decoration: none; }
.up-bag:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Ilk ekran */
.up-kahraman { padding: 1rem 0 0; }
.up-yol { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem; font-size: .85rem; color: var(--metin-3); }
.up-yol a { color: inherit; text-decoration: none; }
.up-yol a:hover { color: var(--ana); }
.up-baslik { max-width: 18ch; margin: 0 0 1.4rem; font-family: var(--yazi-baslik); font-size: clamp(2.3rem, 4.4vw, 3.7rem); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; color: var(--metin); text-wrap: balance; }
.up-kahraman-alt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: 2.25rem; }
.up-giris { margin: 0; font-size: 1.12rem; line-height: 1.7; color: var(--metin-2); max-width: 36rem; }
.up-eylem { display: grid; gap: .9rem; justify-items: start; }
.up-dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; }
.up-guvence { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .86rem; color: var(--metin-2); }
.up-guvence li { display: inline-flex; align-items: center; gap: .3rem; }
.up-guvence svg { width: 15px; height: 15px; color: #16a34a; }
.up-ekran { position: relative; margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--metin) 14%, transparent); border-radius: 16px; background: var(--kart); }
.up-ekran img { display: block; width: 100%; height: auto; }
.up-ekran-cubuk { display: flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .9rem; border-bottom: 1px solid var(--kenar); background: var(--zemin-2); }
.up-ekran-cubuk i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--metin) 18%, transparent); }
.up-ekran-cubuk span { margin-left: .8rem; padding: .15rem .8rem; border-radius: 6px; background: var(--kart); color: var(--metin-3); font-size: .76rem; }
/* Tek cesur oge: canli urun seridi */
.up-canli { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem; padding: .7rem 1.1rem; background: var(--metin); color: color-mix(in srgb, #fff 72%, transparent); font-size: .84rem; }
.up-canli strong { color: #fff; font-weight: 700; }
.up-canli-isik { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 25%, transparent); animation: up-nabiz 2.4s ease-in-out infinite; }
@keyframes up-nabiz { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #22c55e 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .up-canli-isik { animation: none; } }

/* Bilgi seridi */
.up-bilgi { padding: 1.6rem 0 0; }
.up-bilgi-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; border: 1px solid var(--kenar); border-radius: 14px; overflow: hidden; }
.up-bilgi-satir > div { padding: .9rem 1.1rem; border-right: 1px solid var(--kenar); }
.up-bilgi-satir > div:last-child { border-right: 0; }
.up-bilgi dt { margin: 0 0 .2rem; font-size: .74rem; color: var(--metin-3); }
.up-bilgi dd { margin: 0; font-weight: 600; font-size: .92rem; color: var(--metin); }

/* Urun turu */
.up-tur-govde { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.up-tur-sekmeler { display: grid; gap: .4rem; }
.up-tur-sekme { display: grid; gap: .25rem; padding: .95rem 1.1rem; text-align: left; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--metin); font: inherit; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.up-tur-sekme strong { font-size: 1.02rem; }
.up-tur-sekme span { color: var(--metin-3); font-size: .86rem; line-height: 1.45; }
.up-tur-sekme:hover { background: var(--zemin-2); }
.up-tur-sekme.etkin { border-color: color-mix(in srgb, var(--ana) 35%, var(--kenar)); background: var(--kart); }
.up-tur-sekme.etkin strong { color: var(--ana); }
.up-tur-panel[hidden] { display: none; }
.up-faydalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem 1.4rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.up-faydalar li { display: flex; gap: .45rem; font-size: .95rem; color: var(--metin-2); }
.up-faydalar svg { width: 17px; height: 17px; flex: none; margin-top: .2rem; color: var(--ana); }

/* Ozellikler */
.up-iki-sutun { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.up-iki-sutun-genis { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.up-yapiskan { position: sticky; top: calc(var(--tepe-yukseklik, 76px) + 24px); }
.up-grup-listesi { margin: 1.3rem 0 .6rem; padding: 0; list-style: none; display: grid; gap: .1rem; }
.up-grup-listesi a { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--kenar); color: var(--metin); text-decoration: none; font-weight: 600; font-size: .95rem; }
.up-grup-listesi a span { color: var(--metin-3); font-weight: 500; }
.up-grup-listesi a:hover { color: var(--ana); }
.up-ozellik-gruplar { display: grid; gap: 2.4rem; }
.up-ozellik-grup { scroll-margin-top: calc(var(--tepe-yukseklik, 76px) + 24px); }
.up-ozellik-grup h3 { margin: 0 0 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ana); }
.up-ozellik-grup ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem 2rem; margin: 0; padding: 0; list-style: none; }
.up-ozellik-grup li { display: flex; gap: .85rem; align-items: flex-start; }
.up-ozellik-simge { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--ana) 10%, transparent); color: var(--ana); }
.up-ozellik-simge svg { width: 20px; height: 20px; }
.up-ozellik-grup strong { display: block; margin-bottom: .2rem; font-size: 1rem; color: var(--metin); }
.up-ozellik-grup p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--metin-2); }

/* Once / sonra */
.up-fark-tablo { border: 1px solid var(--kenar); border-radius: 16px; overflow: hidden; }
.up-fark-satir { display: grid; grid-template-columns: 1fr 1fr; }
.up-fark-satir + .up-fark-satir { border-top: 1px solid var(--kenar); }
.up-fark-satir > * { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: 1rem 1.3rem; font-size: .98rem; line-height: 1.55; }
.up-fark-baslik > span { padding: .8rem 1.3rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.up-fark-baslik > span:first-child, .up-once { color: var(--metin-3); background: var(--zemin-2); }
.up-fark-baslik > span:last-child { color: var(--ana); background: color-mix(in srgb, var(--ana) 8%, var(--kart)); }
.up-sonra { color: var(--metin); font-weight: 600; background: color-mix(in srgb, var(--ana) 4%, var(--kart)); }
.up-once svg { width: 17px; height: 17px; flex: none; margin-top: .2rem; color: #dc2626; }
.up-sonra svg { width: 17px; height: 17px; flex: none; margin-top: .2rem; color: #16a34a; }

/* Guvenceler: koyu bant */
.up-guvence-bant { margin: 2rem 0; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); border: 0; border-radius: 22px; background: var(--metin); color: #fff; }
.up-guvence-bant h2 { color: #fff; }
.up-guvence-bant .up-bolum-tepe p { color: color-mix(in srgb, #fff 70%, transparent); }
.up-guvence-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.8rem 2rem; margin: 0; padding: 0; list-style: none; }
.up-guvence-izgara li { display: grid; gap: .4rem; align-content: start; }
.up-guvence-simge { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .3rem; border-radius: 11px; background: color-mix(in srgb, #fff 10%, transparent); color: var(--vurgu); }
.up-guvence-simge svg { width: 21px; height: 21px; }
.up-guvence-izgara strong { font-size: 1.02rem; }
.up-guvence-izgara p { margin: 0; font-size: .92rem; line-height: 1.6; color: color-mix(in srgb, #fff 68%, transparent); }

/* Destek: SSS + yan */
.up-destek h2 { margin-bottom: 1.4rem; }
.up-sss details { border-bottom: 1px solid var(--kenar); }
.up-sss summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.02rem; color: var(--metin); }
.up-sss summary::-webkit-details-marker { display: none; }
.up-sss summary::after { content: '+'; flex: none; font-size: 1.3rem; line-height: 1; color: var(--ana); transition: transform .2s ease; }
.up-sss details[open] summary::after { transform: rotate(45deg); }
.up-sss details p { margin: 0 0 1.1rem; font-size: .96rem; line-height: 1.7; color: var(--metin-2); }
.up-destek-yan { display: grid; gap: 1rem; }
.up-yan-kutu { padding: 1.2rem 1.25rem; border: 1px solid var(--kenar); border-radius: 14px; background: var(--kart); scroll-margin-top: calc(var(--tepe-yukseklik, 76px) + 24px); }
.up-yan-kutu h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--metin); }
.up-yan-kutu p { margin: 0 0 .4rem; font-size: .9rem; color: var(--metin-2); line-height: 1.6; }
.up-yan-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.up-yan-liste a { display: block; padding: .35rem 0; color: var(--metin); text-decoration: none; font-size: .92rem; }
.up-yan-liste a:hover { color: var(--ana); }
.up-yan-sade li { padding: .25rem 0 .25rem .9rem; position: relative; font-size: .88rem; color: var(--metin-2); line-height: 1.5; }
.up-yan-sade li::before { content: ''; position: absolute; left: 0; top: .72rem; width: 5px; height: 5px; border-radius: 50%; background: var(--ana); }
.up-yollar { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.up-yollar li { display: grid; gap: .1rem; font-size: .9rem; }
.up-yollar a { color: var(--ana); text-decoration: none; font-weight: 600; }
.up-son-surum { font-size: .92rem; }
.up-tum-surumler summary { cursor: pointer; margin-top: .5rem; color: var(--ana); font-weight: 600; font-size: .88rem; }
.up-tum-surumler ol { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.up-tum-surumler ol > li { font-size: .86rem; color: var(--metin-2); }
.up-tum-surumler ul { margin: .25rem 0 0; padding-left: 1rem; }

/* Kapanis */
.up-kapanis { margin: 1rem 0 2rem; padding: clamp(2.2rem, 4.5vw, 3.5rem); border-radius: 22px; background: var(--ana); color: #fff; }
.up-kapanis-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.up-kapanis h2 { color: #fff; margin: 0 0 .4rem; }
.up-kapanis p { margin: 0; color: color-mix(in srgb, #fff 82%, transparent); font-size: 1.05rem; }
.up-dugme-acik { background: #fff; color: var(--ana); }
.up-dugme-acik:hover { background: color-mix(in srgb, #fff 88%, var(--ana)); }
.up-dugme-cizgi { border-color: color-mix(in srgb, #fff 55%, transparent); color: #fff; }
.up-dugme-cizgi:hover { border-color: #fff; }

/* Koyu tema */
:root[data-tema="koyu"] .up-guvence-bant { background: color-mix(in srgb, var(--kart) 70%, #000); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .up-guvence-bant { background: color-mix(in srgb, var(--kart) 70%, #000); } }

/* Tablet ve telefon: sol menu ustte, bolumler yatay kayan serit */
@media (max-width: 1023px) {
  .uy-duzen { grid-template-columns: 1fr; gap: 1rem; padding-top: .75rem; }
  .uy-yan { position: static; max-height: none; overflow: visible; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; padding: 0; }
  .uy-karar { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
  .uy-karar .uy-ana { width: auto; }
  .uy-karar .uy-demo, .uy-karar .uy-deneme { grid-column: 1 / -1; justify-self: start; }
  .uy-menu { grid-column: 1 / -1; min-width: 0; max-width: 100%; position: sticky; top: var(--tepe-yukseklik, 64px); z-index: 30; margin: 0; padding: .4rem 0; background: color-mix(in srgb, var(--zemin) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--kenar); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .uy-menu::-webkit-scrollbar { display: none; }
  .uy-menu ul { display: inline-flex; margin: 0 .6rem 0 0; gap: .25rem; }
  .uy-menu-baslik, .uy-belge-menu { display: none; }
  .uy-menu a { border-left: 0; border-radius: 999px !important; padding: .4rem .85rem; }
  .uy-platform { display: none; }
  .up-kahraman-alt, .up-tur-govde, .up-iki-sutun, .up-iki-sutun-genis { grid-template-columns: 1fr; }
  .up-yapiskan { position: static; }
  .up-tur-sekmeler { display: flex; overflow-x: auto; gap: .4rem; }
  .up-tur-sekme { flex: 0 0 auto; max-width: 240px; }
}
@media (max-width: 600px) {
  .up-fark-satir { grid-template-columns: 1fr; }
  .up-fark-baslik { display: none; }
  .up-bilgi-satir > div { border-right: 0; border-bottom: 1px solid var(--kenar); }
  .up-kapanis-ic { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1023px) { .uy-duzen, .uy-icerik, .uy-yan { min-width: 0; max-width: 100%; } .up-ekran-cubuk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.uy-kdv { display: block; margin-top: .1rem; font-size: .74rem; color: var(--metin-3); }
.up-yapiskan h2 { font-size: clamp(1.6rem, 2.4vw, 2.05rem); }
.up-baslik { font-size: clamp(2.2rem, 3.9vw, 3.3rem); max-width: 22ch; }
.uy-icerik #paketler { padding: clamp(3rem, 6vw, 5.5rem) 0; border-top: 1px solid var(--kenar); }
.uy-icerik #paketler .bolum-tepe { text-align: left; margin-left: 0; max-width: 46rem; }
.uy-icerik #paketler .bolum-tepe .bolum-etiket { display: none; }
.uy-icerik #paketler .bolum-tepe h2 { font-family: var(--yazi-baslik); font-size: clamp(1.8rem, 3.1vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; text-align: left; }
.uy-icerik #paketler .bolum-alt { text-align: left; margin-left: 0; }
.uy-icerik #paketler [data-donem-secici], .uy-icerik #paketler .donem-secici { margin-left: 0; }

/* ═══ MAGAZA VITRINI v2 (17 Eki 2026) ════════════════════════════════
   Enver: "burasi cok kotu ... ultra mukemmel olmasi gerekiyor" ve "her uygulama
   kartinin kendi rengi olabilir". Her kart/bant/raf ogesi --u-renk ile boyanir
   (cxx > Uygulamalar > Magaza > Kart rengi); bossa sitenin ana rengi. Acik ve
   koyu tema ayni belirteclerden (--kart, --zemin-2, --metin ...) beslenir. */
.mg-kart, .mg-one, .mgv-raf-oge { --u-renk: var(--ana); --u-yazi: #fff; }
.bolum.mgv { padding-top: clamp(1.25rem, 3vw, 2.25rem); }

/* Ust bolum: solda baslik + arama, sagda uygulama rafi */
.mgv-tepe { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); text-align: left; }
.mgv-tepe-tek { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.mgv-tepe h1 { margin: .55rem 0 .7rem; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.025em; color: var(--metin); }
.mgv-alt { margin: 0 0 1.1rem; max-width: 34rem; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; color: var(--metin-2); }
.mgv-sayac { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; color: var(--metin-3); font-size: .9rem; }
.mgv-sayac strong { color: var(--metin); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mgv-ara { max-width: 34rem; min-height: 54px; padding: 0 1.1rem; border-radius: 14px; background: var(--kart); box-shadow: var(--golge-1, 0 1px 2px rgba(0,0,0,.06)); }
.mgv-ara input { font-size: 1rem; }
/* Raf: magazadaki gercek uygulamalarin simgeleri, kendi renklerinde, basamakli */
.mgv-raf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.mgv-raf-oge { display: grid; justify-items: center; gap: .55rem; padding: 1.1rem .6rem .9rem; border-radius: 18px; text-decoration: none; color: var(--metin-2); font-size: .78rem; font-weight: 600; text-align: center;
  background: color-mix(in srgb, var(--u-renk) 12%, var(--kart)); border: 1px solid color-mix(in srgb, var(--u-renk) 22%, var(--kenar)); transition: transform .25s ease, box-shadow .25s ease; }
.mgv-raf-oge span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgv-raf-oge:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--u-renk) 70%, transparent); }
.mgv-raf-2, .mgv-raf-5 { transform: translateY(1.4rem); }
.mgv-raf-2:hover, .mgv-raf-5:hover { transform: translateY(calc(1.4rem - 3px)); }
.mg-simge-raf { width: 58px; height: 58px; border-radius: 16px; }
.mg-simge-raf svg { width: 28px; height: 28px; }
@media (max-width: 900px) {
  .mgv-tepe { grid-template-columns: 1fr; }
  .mgv-raf { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; order: -1; }
  .mgv-raf-oge { padding: .6rem .3rem; border-radius: 14px; }
  .mgv-raf-oge span { display: none; }
  .mgv-raf-2, .mgv-raf-5 { transform: none; }
  .mg-simge-raf { width: 40px; height: 40px; border-radius: 11px; }
}
@media (max-width: 600px) { .mgv-raf { display: none; } }

/* Simge: gorseli yoksa uygulamanin renginde zemin */
.mg-simge-svg { background: var(--u-renk); color: var(--u-yazi); }

/* One cikan bant: uygulamanin renginde */
.mgv .mg-one { padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--u-renk) 28%, var(--kenar));
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--u-renk) 16%, var(--kart)) 0%, var(--kart) 62%); box-shadow: none; }
.mgv .mg-one-etiket { background: var(--u-renk); color: var(--u-yazi); }
.mgv .mg-one-ad h2 { color: var(--metin); }
.mgv .mg-one .dugme-ana { background: var(--u-renk); border-color: var(--u-renk); color: var(--u-yazi); }
.mgv .mg-one-gorsel { border-radius: 14px; border-color: color-mix(in srgb, var(--u-renk) 25%, var(--kenar)); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--u-renk) 55%, rgba(0,0,0,.4)); }

/* Arac cubugu: kategoriler (sayili) + siralama */
.mgv .mg-arac { justify-content: space-between; padding: .5rem 0; margin-bottom: 1.1rem; border-bottom: 1px solid var(--kenar); }
.mgv .mg-kategoriler button { display: inline-flex; align-items: center; gap: .45rem; background: transparent; border-color: transparent; color: var(--metin-2); font-weight: 500; }
.mgv .mg-kategoriler button span { min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--zemin-2); color: var(--metin-3); font-size: .72rem; line-height: 1.4rem; font-variant-numeric: tabular-nums; }
.mgv .mg-kategoriler button:hover { background: var(--zemin-2); }
.mgv .mg-kategoriler button[aria-pressed="true"] { background: var(--metin); border-color: var(--metin); color: var(--zemin); }
.mgv .mg-kategoriler button[aria-pressed="true"] span { background: color-mix(in srgb, var(--zemin) 22%, transparent); color: var(--zemin); }

/* Kart: renkli kapak + govde + alt */
.mgv .mg-izgara { gap: 1.15rem; }
.mgv .mg-kart { gap: 0; padding: 0; overflow: hidden; border-radius: 18px; background: var(--kart); border: 1px solid var(--kenar); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mgv .mg-kart:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--u-renk) 45%, var(--kenar)); box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--u-renk) 60%, rgba(0,0,0,.35)); }
.mg-kart-kapak { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; min-height: 104px; padding: 1.1rem 1.15rem .9rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--u-renk) 26%, var(--kart)) 0%, color-mix(in srgb, var(--u-renk) 8%, var(--kart)) 100%); }
.mg-kart-kapak::after { content: ""; position: absolute; right: -28px; top: -34px; width: 130px; height: 130px; border-radius: 50%; background: color-mix(in srgb, var(--u-renk) 22%, transparent); pointer-events: none; }
.mg-simge-kapak { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 17px; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--u-renk) 80%, rgba(0,0,0,.4)); }
.mg-simge-kapak svg { width: 30px; height: 30px; }
.mg-kart-durum { position: relative; z-index: 1; padding: .25rem .6rem; border-radius: 999px; background: var(--kart); color: var(--metin-2); font-size: .72rem; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.mg-kart-durum-deneme { background: var(--u-renk); color: var(--u-yazi); }
.mg-kart-govde { display: grid; gap: .6rem; flex: 1; align-content: start; padding: 1rem 1.15rem .9rem; }
.mgv .mg-kart-ad h3 { font-size: 1.12rem; }
.mgv .mg-ozet { flex: none; }
.mgv .mg-kart-alt { margin: 0 1.15rem; padding: .85rem 0 1.05rem; }
.mgv .mg-kart .dugme-ana { background: var(--u-renk); border-color: var(--u-renk); color: var(--u-yazi); }
.mgv .mg-kart .dugme-ana:hover { filter: brightness(1.06); }
/* Yakinda: soluk kapak, kesik kenar */
.mgv .mg-kart-yakinda { border-style: dashed; }
.mgv .mg-kart-yakinda .mg-kart-kapak { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--u-renk) 10%, var(--kart)) 0 10px, color-mix(in srgb, var(--u-renk) 5%, var(--kart)) 10px 20px); }
.mgv .mg-kart-yakinda .mg-simge-kapak { filter: saturate(.75); }
@media (prefers-reduced-motion: reduce) { .mgv .mg-kart, .mgv-raf-oge { transition: none; } .mgv .mg-kart:hover, .mgv-raf-oge:hover { transform: none; } }

.mgv .mg-one-tek { grid-template-columns: minmax(0, 1fr); }
.mgv .mg-one-tek .mg-one-yazi { max-width: 760px; }

/* Arama kategori satirinda: solda, kategoriler ortada, siralama sagda */
.mgv .mg-arac .mg-ara { flex: 1 1 220px; max-width: 340px; min-height: 40px; }
.mgv .mg-arac .mg-kategoriler { flex: 1 1 auto; }
@media (max-width: 700px) { .mgv .mg-arac .mg-ara { max-width: none; flex-basis: 100%; } }

/* E-ticaret paketleri: pakete dahil uygulamalar ve karsilastirma tablosu (19 Eki 2026) */
.paket-kapsam { display: grid; gap: .55rem; padding-top: .9rem; border-top: 1px dashed var(--kenar); }
.paket-kapsam-baslik { margin: 0; font-size: var(--olcek-1); font-weight: 700; color: var(--metin-3); letter-spacing: .02em; }
.paket-kapsam ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.paket-kapsam li { display: flex; align-items: flex-start; gap: .6rem; }
.paket-kapsam-simge { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--ana) 12%, var(--kart)); color: var(--ana); }
.paket-kapsam-simge img { width: 100%; height: 100%; object-fit: cover; }
.paket-kapsam-simge svg { width: 16px; height: 16px; }
.paket-kapsam-yazi { display: grid; gap: .1rem; min-width: 0; font-size: var(--olcek-2); font-weight: 600; color: var(--metin); line-height: 1.35; padding-top: .2rem; }
.paket-kapsam-yazi a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ana) 40%, transparent); text-underline-offset: 3px; }
.paket-kapsam-yazi a:hover { color: var(--ana); }
.paket-kapsam-yazi small { font-weight: 400; color: var(--metin-3); font-size: var(--olcek-1); }

.kapsam-tablo-kap { margin-top: 2.5rem; overflow-x: auto; border: 1px solid var(--kenar); border-radius: var(--kose-buyuk, 16px); background: var(--kart); }
.kapsam-tablo-kap:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.kapsam-tablo { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--olcek-2); }
.kapsam-tablo caption { caption-side: top; text-align: left; padding: 1.1rem 1.25rem .4rem; font-family: var(--yazi-baslik); font-size: var(--olcek-4); font-weight: 700; color: var(--metin); }
.kapsam-tablo th, .kapsam-tablo td { padding: .8rem 1.25rem; border-bottom: 1px solid var(--kenar); text-align: center; vertical-align: top; }
.kapsam-tablo tbody tr:last-child > * { border-bottom: 0; }
.kapsam-tablo thead th { font-weight: 700; color: var(--metin); }
/* One cikan paket: ana renk yaziya degil alt cizgiye (ana renk beyazda 3.5:1, yazi icin yetmiyor) */
.kapsam-tablo thead .kapsam-one { color: var(--metin); box-shadow: inset 0 -3px 0 var(--ana); }
.kapsam-tablo tbody th { text-align: left; font-weight: 600; color: var(--metin); }
.kapsam-tablo tbody th a { color: inherit; }
.kapsam-tablo tbody th a:hover { color: var(--ana); }
.kapsam-tablo td small { display: block; margin-top: .2rem; color: var(--metin-3); font-size: var(--olcek-1); }
.kapsam-var { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--ana) 14%, var(--kart)); color: var(--ana); }
.kapsam-var svg { width: 14px; height: 14px; }
.kapsam-yok { color: var(--metin-3); }
.paket-not { margin: 1.5rem 0 0; text-align: center; font-size: var(--olcek-2); color: var(--metin-3); }
@media (max-width: 560px) {
  .kapsam-tablo { min-width: 420px; }
  .kapsam-tablo th, .kapsam-tablo td { padding: .7rem .75rem; }
  .kapsam-tablo caption { padding: 1rem .75rem .3rem; }
}

/* magaza-kart.css */
/* MAGAZA (24 Eki 2026) — vitrin karti (mk-*), magaza listesi ve urun sayfasi v3 (ud-*).
   Kart cxx > Uygulamalar'da da ayni dosyayla cizilir (panel.html bu dosyayi yukler);
   bu yuzden yalniz iki yuzun ortak degiskenleri kullanilir: --kart, --kenar, --metin(-2/-3),
   --zemin-2, --ana. Susleme yok: tek tip kart, cerceveli logo karesi, tek "Incele" dugmesi. */

.mk-kart, .ud-sayfa, .mk-magaza {
  --mk-kenar: var(--kenar, #e3dcec);
  --mk-kart: var(--kart, #fff);
  --mk-zemin: var(--zemin-2, #f7f5fa);
  --mk-metin: var(--metin, #241a2e);
  --mk-metin-2: var(--metin-2, #574a63);
  --mk-metin-3: var(--metin-3, #7d7189);
  --mk-ana: var(--ana, #4f2f6b);
  --mk-logo-zemin: #ffffff;
  --mk-kose: 16px;
  --mk-uyari-zemin: #fff7e0;
  --mk-uyari-kenar: #f1d58c;
  --mk-uyari-metin: #5c4510;
}
:root[data-tema="koyu"] .mk-kart, :root[data-tema="koyu"] .ud-sayfa, :root[data-tema="koyu"] .mk-magaza {
  --mk-uyari-zemin: #2f2814; --mk-uyari-kenar: #5e4c1c; --mk-uyari-metin: #f3dfa6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .mk-kart, :root:not([data-tema="acik"]) .ud-sayfa, :root:not([data-tema="acik"]) .mk-magaza {
    --mk-uyari-zemin: #2f2814; --mk-uyari-kenar: #5e4c1c; --mk-uyari-metin: #f3dfa6;
  }
}
.mk-gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Logo karesi ─────────────────────────────────────── */
.mk-logo, .ud-logo { position: relative; display: grid; place-items: center; width: 100%; overflow: hidden;
  border: 1px solid var(--mk-kenar); border-radius: 12px; background: var(--mk-zemin); }
.mk-logo { aspect-ratio: 2 / 1; }
.mk-logo-logo, .ud-logo-logo { background: var(--mk-logo-zemin); }
.mk-logo-logo img, .ud-logo-logo img { display: block; max-width: 62%; max-height: 46%; width: auto; height: auto; object-fit: contain; }
.mk-logo-simge img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.mk-logo-cizgi svg, .ud-logo-cizgi svg { width: 44px; height: 44px; color: var(--mk-ana); stroke-width: 1.6; }
.mk-logo-cizgi, .ud-logo-cizgi { background: color-mix(in srgb, var(--mk-ana) 7%, var(--mk-kart)); }
.mk-koyu { display: none !important; }
/* Koyu tema: koyu logosu olan kare koyulasir, olmayan beyaz kalir (logo okunsun) */
:root[data-tema="koyu"] .mk-logo-ciftli, :root[data-tema="koyu"] .ud-logo-ciftli { background: var(--mk-zemin); }
:root[data-tema="koyu"] .mk-logo-ciftli .mk-acik, :root[data-tema="koyu"] .ud-logo-ciftli .mk-acik { display: none !important; }
:root[data-tema="koyu"] .mk-logo-ciftli .mk-koyu, :root[data-tema="koyu"] .ud-logo-ciftli .mk-koyu { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .mk-logo-ciftli, :root:not([data-tema="acik"]) .ud-logo-ciftli { background: var(--mk-zemin); }
  :root:not([data-tema="acik"]) .mk-logo-ciftli .mk-acik, :root:not([data-tema="acik"]) .ud-logo-ciftli .mk-acik { display: none !important; }
  :root:not([data-tema="acik"]) .mk-logo-ciftli .mk-koyu, :root:not([data-tema="acik"]) .ud-logo-ciftli .mk-koyu { display: block !important; }
}

/* ── Kart ────────────────────────────────────────────── */
.mk-kart { position: relative; display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1rem 1rem 1.15rem;
  border: 1px solid var(--mk-kenar); border-radius: var(--mk-kose); background: var(--mk-kart); color: var(--mk-metin);
  transition: border-color .18s ease, box-shadow .18s ease; }
.mk-kart:hover { border-color: color-mix(in srgb, var(--mk-ana) 45%, var(--mk-kenar)); box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--mk-ana) 60%, transparent); }
.mk-kart:focus-within { border-color: var(--mk-ana); }
.mk-kart[hidden] { display: none; }
.mk-logo-kap { position: relative; }
.mk-ust-satir { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.4rem; }
.mk-rozet { flex: none; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.4;
  background: var(--mk-kart); color: var(--mk-ana); border: 1px solid color-mix(in srgb, var(--mk-ana) 30%, var(--mk-kenar)); }
.mk-govde { display: grid; gap: .3rem; flex: 1; align-content: start; padding: 0 .2rem; }
.mk-kategori { font-size: .74rem; font-weight: 500; letter-spacing: .02em; color: var(--mk-metin-3); }
.mk-ad { margin: 0; font-size: 1.05rem; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
.mk-ad a { color: inherit; text-decoration: none; }
.mk-ad a::after { content: ''; position: absolute; inset: 0; border-radius: var(--mk-kose); }
.mk-ad a:focus-visible { outline: none; }
.mk-ad a:focus-visible::after { outline: 2px solid var(--mk-ana); outline-offset: 2px; }
.mk-ozet { margin: 0; color: var(--mk-metin-2); font-size: .875rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }
.mk-alt { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; padding: 0 .2rem; }
.mk-fiyat { display: block; margin: 0; line-height: 1.25; min-width: 0; }
.mk-fiyat small { display: block; font-size: .74rem; color: var(--mk-metin-3); }
.mk-fiyat strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--mk-metin); font-variant-numeric: tabular-nums; }
.mk-fiyat span { margin-left: .1rem; font-size: .74rem; color: var(--mk-metin-3); }
.mk-fiyat-yok strong { font-size: 1rem; font-weight: 600; color: var(--mk-metin-2); }
.mk-dugme { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 1.1rem;
  border: 1px solid var(--mk-kenar); border-radius: 10px; background: var(--mk-kart); color: var(--mk-metin); font-size: .875rem; font-weight: 600; text-decoration: none; }
.mk-kart:hover .mk-dugme { border-color: var(--mk-ana); color: var(--mk-ana); }
.mk-kart-yakinda .mk-logo { filter: saturate(.6); }
.mk-kart-yakinda .mk-ad::before { content: 'Yakında'; display: inline-block; margin-right: .4rem; padding: .05rem .45rem; border-radius: 6px; vertical-align: .15em;
  font-size: .68rem; font-weight: 600; background: var(--mk-zemin); color: var(--mk-metin-2); border: 1px solid var(--mk-kenar); }

/* ── Izgara: 4 / 3 / 2 / 1 sutun ─────────────────────── */
.mk-izgara { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .mk-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .mk-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .mk-izgara { grid-template-columns: minmax(0, 1fr); } .mk-logo { aspect-ratio: 5 / 2; } }

/* ── Magaza sayfasi ──────────────────────────────────── */
.bolum.mk-magaza { padding-top: clamp(2rem, 6vw, 4.5rem); }
.mk-tepe { max-width: 46rem; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); text-align: center; }
.mk-etiket { display: inline-block; margin-bottom: .8rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-ana); }
.mk-tepe h1 { margin: 0 0 .75rem; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; color: var(--mk-metin); }
.mk-alt-baslik { margin: 0 auto; max-width: 38rem; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.6; color: var(--mk-metin-2); }
.mk-arac { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: .9rem; align-items: center; margin: 0 0 .9rem; }
.mk-arac > :last-child { justify-self: end; }
.mk-secim { position: relative; display: block; width: 100%; max-width: 15rem; }
.mk-secim select { width: 100%; min-height: 48px; padding: 0 2.4rem 0 1rem; border: 1px solid var(--mk-kenar); border-radius: 12px; background: var(--mk-kart); color: var(--mk-metin);
  font: inherit; font-size: .9rem; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d7189' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; }
.mk-secim select:focus-visible, .mk-ara:focus-within { outline: none; border-color: var(--mk-ana); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-ana) 16%, transparent); }
.mk-ara { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 1rem; border: 1px solid var(--mk-kenar); border-radius: 12px; background: var(--mk-kart); color: var(--mk-metin-3); }
.mk-ara svg { width: 18px; height: 18px; flex: none; }
.mk-ara input { flex: 1; min-width: 0; border: 0; background: none; color: var(--mk-metin); font: inherit; font-size: .95rem; outline: none; }
.mk-sayi { margin: 0 0 1rem; font-size: .85rem; color: var(--mk-metin-3); }
.mk-bolum[hidden] { display: none; }
.mk-bolum-yakinda { margin-top: clamp(2.25rem, 5vw, 3.5rem); padding-top: clamp(1.5rem, 4vw, 2.25rem); border-top: 1px solid var(--mk-kenar); }
.mk-bolum-tepe { margin-bottom: 1.1rem; }
.mk-bolum-tepe h2 { margin: 0 0 .3rem; font-size: 1.35rem; letter-spacing: -.01em; }
.mk-bolum-tepe p { margin: 0; color: var(--mk-metin-3); font-size: .9rem; }
.mk-sonuc-yok { margin: 1.25rem 0 0; text-align: center; color: var(--mk-metin-3); }
@media (max-width: 760px) {
  .mk-arac { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mk-ara { grid-column: 1 / -1; order: -1; }
  .mk-secim { max-width: none; }
  .mk-arac > :last-child { justify-self: stretch; }
}

/* ── Urun sayfasi v3 ─────────────────────────────────── */
.ud-ust { padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 3.25rem); background: var(--mk-zemin); border-bottom: 1px solid var(--mk-kenar); }
.ud-yol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 clamp(1.25rem, 3vw, 2rem); font-size: .85rem; color: var(--mk-metin-3); }
.ud-yol a { color: var(--mk-metin-2); text-decoration: none; }
.ud-yol a:hover { color: var(--mk-ana); text-decoration: underline; }
.ud-ust-izgara { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: start; }
.ud-logo { aspect-ratio: 1 / 1; border-radius: 22px; box-shadow: 0 18px 40px -30px rgba(20, 10, 40, .45); }
.ud-logo-logo img { max-width: 72%; max-height: 40%; }
.ud-logo-simge img { width: 46%; height: auto; border-radius: 22%; }
.ud-logo-cizgi svg { width: 34%; height: 34%; }
.ud-bilgi { min-width: 0; }
.ud-durum { display: inline-block; margin-bottom: .6rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--mk-kart); border: 1px solid var(--mk-kenar); color: var(--mk-metin-2); }
.ud-bilgi h1 { margin: 0 0 .6rem; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; letter-spacing: -.025em; color: var(--mk-metin); }
.ud-ozet { margin: 0 0 1.1rem; max-width: 46rem; font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.6; color: var(--mk-metin-2); }
.ud-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0 0 1.4rem; padding: 0; list-style: none; font-size: .88rem; color: var(--mk-metin); }
.ud-meta li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ud-meta li > span { color: var(--mk-metin-3); }
.ud-meta a { color: var(--mk-ana); font-weight: 500; text-decoration: none; }
.ud-meta a:hover { text-decoration: underline; }
.ud-platform { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.ud-platform li { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; background: var(--mk-kart); border: 1px solid var(--mk-kenar); font-size: .78rem; color: var(--mk-metin-2); }
.ud-platform svg { width: 14px; height: 14px; }
.ud-fiyat { display: grid; justify-items: start; gap: .45rem; margin: 0 0 1.25rem; }
.ud-donem { display: inline-flex; padding: 3px; border: 1px solid var(--mk-kenar); border-radius: 10px; background: var(--mk-kart); }
.ud-donem button { min-height: 34px; padding: 0 .85rem; border: 0; border-radius: 7px; background: none; color: var(--mk-metin-2); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.ud-donem button[aria-pressed="true"] { background: var(--mk-ana); color: #fff; }
.ud-tutar { display: grid; margin: 0; line-height: 1.15; }
.ud-tutar[hidden] { display: none; }
.ud-tutar small { font-size: .8rem; color: var(--mk-metin-3); }
.ud-tutar strong { font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; color: var(--mk-metin); font-variant-numeric: tabular-nums; }
.ud-tutar span { font-size: .8rem; color: var(--mk-metin-3); }
.ud-avantaj { margin: 0; font-size: .82rem; font-weight: 600; color: var(--basari, #2f7a55); }
.ud-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.ud-dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.5rem; border-radius: 12px; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid transparent; }
.ud-dugme-ana { min-width: 15rem; background: var(--mk-ana); color: #fff; }
.ud-dugme-ana:hover { background: color-mix(in srgb, var(--mk-ana) 86%, #000); }
.ud-dugme-ikincil { background: var(--mk-kart); color: var(--mk-metin); border-color: var(--mk-kenar); }
.ud-dugme-ikincil:hover { border-color: var(--mk-ana); color: var(--mk-ana); }
.ud-dugme-bag { min-height: 44px; padding: 0 .4rem; color: var(--mk-ana); text-decoration: underline; text-underline-offset: 3px; }
.ud-kapali { margin: 0; color: var(--mk-metin-2); }
.ud-guvence { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .84rem; color: var(--mk-metin-2); }
.ud-guvence li { display: inline-flex; align-items: center; gap: .35rem; }
.ud-guvence svg { width: 16px; height: 16px; color: var(--basari, #2f7a55); flex: none; }
.ud-not { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 0; padding: .9rem 1.1rem; border: 1px solid var(--mk-uyari-kenar); border-radius: 12px;
  background: var(--mk-uyari-zemin); color: var(--mk-uyari-metin); font-size: .9rem; line-height: 1.5; }
.ud-not svg { width: 22px; height: 22px; flex: none; }
.ud-sekmeler { position: sticky; top: var(--tepe-yukseklik, 0px); z-index: 5; margin-top: 1.5rem; background: color-mix(in srgb, var(--zemin, #fff) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--mk-kenar); }
.ud-sekmeler ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ud-sekmeler ul::-webkit-scrollbar { display: none; }
.ud-sekmeler a { display: block; padding: .85rem .8rem; white-space: nowrap; font-size: .9rem; font-weight: 500; color: var(--mk-metin-2); text-decoration: none; border-bottom: 2px solid transparent; }
.ud-sekmeler a:hover { color: var(--mk-metin); }
.ud-sekmeler a.etkin { color: var(--mk-ana); border-bottom-color: var(--mk-ana); }
.ud-sekme-dis { margin-left: auto; }
.ud-bolum { padding: clamp(2.25rem, 5vw, 3.5rem) 0; scroll-margin-top: calc(var(--tepe-yukseklik, 0px) + 3.5rem); }
.ud-sayfa .bolum { scroll-margin-top: calc(var(--tepe-yukseklik, 0px) + 3.5rem); }
.ud-bolum-alt { background: var(--mk-zemin); }
.ud-bolum-tepe { margin-bottom: 1.4rem; }
.ud-bolum-tepe h2, .ud-metin h2 { margin: 0 0 .4rem; font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.015em; color: var(--mk-metin); }
.ud-bolum-tepe p { margin: 0; color: var(--mk-metin-3); }
.ud-bolum-tepe-yan { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ud-genel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.ud-metin p { margin: 0 0 1rem; max-width: 44rem; font-size: 1rem; line-height: 1.75; color: var(--mk-metin-2); }
.ud-bilgi-kutu { padding: 1.1rem 1.25rem; border: 1px solid var(--mk-kenar); border-radius: var(--mk-kose); background: var(--mk-kart); }
.ud-bilgi-kutu h3 { margin: 0 0 .6rem; font-size: 1rem; }
.ud-bilgi-kutu dl { margin: 0; }
.ud-bilgi-kutu dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--mk-kenar); font-size: .88rem; }
.ud-bilgi-kutu dt { color: var(--mk-metin-3); }
.ud-bilgi-kutu dd { margin: 0; text-align: right; font-weight: 500; color: var(--mk-metin); }
.ud-galeri { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 46%); gap: 1rem; margin: 0; padding: 0 0 .75rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.ud-galeri li { scroll-snap-align: start; }
.ud-galeri figure { margin: 0; }
.ud-galeri a { display: block; overflow: hidden; border: 1px solid var(--mk-kenar); border-radius: 12px; background: var(--mk-kart); }
.ud-galeri img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.ud-galeri figcaption { margin-top: .5rem; font-size: .85rem; color: var(--mk-metin-3); }
.ud-galeri figcaption strong { color: var(--mk-metin); font-weight: 600; }
.ud-galeri:focus-visible { outline: 2px solid var(--mk-ana); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 640px) { .ud-galeri { grid-auto-columns: 86%; } }
.ud-ozellik { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.ud-ozellik li { display: flex; gap: .85rem; }
.ud-ozellik-simge { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--mk-ana) 9%, var(--mk-kart)); color: var(--mk-ana); }
.ud-ozellik-simge svg { width: 20px; height: 20px; }
.ud-ozellik strong { display: block; margin-bottom: .2rem; font-size: .95rem; color: var(--mk-metin); }
.ud-ozellik p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--mk-metin-2); }
.ud-tumu { margin: 1.25rem 0 0; }
.ud-tumu a, .ud-bag { color: var(--mk-ana); font-weight: 600; text-decoration: none; font-size: .9rem; }
.ud-tumu a:hover, .ud-bag:hover { text-decoration: underline; }
.ud-guven { margin-top: 2rem; }
.ud-guven h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.ud-guven ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ud-guven li { padding: .9rem 1rem; border: 1px solid var(--mk-kenar); border-radius: 12px; background: var(--mk-kart); }
.ud-guven strong { display: block; font-size: .92rem; }
.ud-guven p { margin: .25rem 0 0; font-size: .85rem; color: var(--mk-metin-2); line-height: 1.5; }
.ud-fark { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--mk-kenar); border-radius: var(--mk-kose); background: var(--mk-kart); }
.ud-fark th { padding: .8rem 1rem; text-align: left; font-size: .85rem; color: var(--mk-metin-3); background: var(--mk-zemin); }
.ud-fark td { width: 50%; padding: .85rem 1rem; vertical-align: top; border-top: 1px solid var(--mk-kenar); font-size: .92rem; line-height: 1.5; color: var(--mk-metin-2); }
.ud-fark td { display: table-cell; }
.ud-fark td svg { width: 16px; height: 16px; margin-right: .45rem; vertical-align: -.15em; }
.ud-fark td:first-child svg { color: var(--tehlike, #a33a3a); }
.ud-fark td:last-child svg { color: var(--basari, #2f7a55); }
.ud-fark td:last-child { color: var(--mk-metin); }
.ud-sss details { border-bottom: 1px solid var(--mk-kenar); }
.ud-sss summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; font-weight: 600; color: var(--mk-metin); list-style: none; }
.ud-sss summary::-webkit-details-marker { display: none; }
.ud-sss summary::after { content: '+'; flex: none; font-size: 1.3rem; line-height: 1; color: var(--mk-metin-3); }
.ud-sss details[open] summary::after { content: '−'; }
.ud-sss p { margin: 0 0 1rem; color: var(--mk-metin-2); line-height: 1.65; }
.ud-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.ud-kutu { padding: 1.1rem 1.25rem; border: 1px solid var(--mk-kenar); border-radius: var(--mk-kose); background: var(--mk-kart); }
.ud-kutu h3 { margin: 0 0 .6rem; font-size: 1rem; }
.ud-kutu p { margin: 0 0 .75rem; font-size: .88rem; color: var(--mk-metin-2); line-height: 1.55; }
.ud-liste { display: grid; gap: .5rem; margin: 0 0 .75rem; padding: 0; list-style: none; font-size: .88rem; }
.ud-liste li { display: grid; gap: .1rem; }
.ud-liste strong { font-weight: 600; color: var(--mk-metin); }
.ud-liste a { color: var(--mk-ana); text-decoration: none; overflow-wrap: anywhere; }
.ud-liste a:hover { text-decoration: underline; }
.ud-dar > * { max-width: 54rem; }
.ud-benzer { border-top: 1px solid var(--mk-kenar); }
@media (max-width: 820px) {
  .ud-ust-izgara { grid-template-columns: minmax(0, 1fr); }
  .ud-logo-kap { max-width: 168px; }
  .ud-genel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .ud-eylem { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ud-dugme-ana { min-width: 0; }
  .ud-sekme-dis { margin-left: 0; }
  .ud-fark th, .ud-fark td { padding: .7rem .75rem; font-size: .86rem; }
}

/* ── cxx > Uygulamalar (panel-uygulamalar.js) ────────── */
.yu-liste, .yu-ayar-oniz { --mk-kenar: var(--kenar, #e3dcec); --mk-kart: var(--kart, #fff); --mk-metin-3: var(--metin-3, #7d7189); --mk-ana: var(--ana, #4f2f6b); }
.yu-tepe { margin: 0 0 .9rem; }
.yu-ozet { margin: 0 0 .25rem; font-size: .95rem; }
.yu-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 1rem; }
.yu-filtre { display: flex; flex-wrap: wrap; gap: .35rem; }
.yu-filtre button { min-height: 34px; padding: 0 .8rem; border: 1px solid var(--mk-kenar); border-radius: 999px; background: var(--mk-kart); color: var(--metin-2); font: inherit; font-size: .84rem; cursor: pointer; }
.yu-filtre button span { margin-left: .2rem; color: var(--mk-metin-3); font-size: .78rem; }
.yu-filtre button[aria-pressed="true"] { border-color: var(--mk-ana); background: var(--mk-ana); color: #fff; }
.yu-filtre button[aria-pressed="true"] span { color: rgba(255, 255, 255, .8); }
.yu-ara input { min-height: 36px; width: min(260px, 100%); padding: 0 .8rem; border: 1px solid var(--mk-kenar); border-radius: 10px; background: var(--mk-kart); color: var(--metin); font: inherit; }
.yu-ara { flex: 0 1 260px; }
.yu-izgara { align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.yu-oge { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; min-width: 0; padding: .7rem; border: 1px solid var(--mk-kenar); border-radius: 18px; background: color-mix(in srgb, var(--mk-kart) 60%, transparent); }
.yu-oge-pasif .yu-onizleme { opacity: .72; }
.yu-oge-pasif .yu-onizleme:hover, .yu-oge-pasif .yu-onizleme:focus-visible { opacity: 1; }
.yu-ust { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.yu-ust select { min-height: 32px; max-width: 8rem; min-width: 0; padding: 0 .5rem; border: 1px solid var(--mk-kenar); border-radius: 8px; background: var(--mk-kart); color: var(--metin); font: inherit; font-size: .82rem; }
.yu-durum { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; }
.yu-durum i { width: 9px; height: 9px; border-radius: 50%; background: var(--mk-metin-3); }
.yu-durum small { color: var(--mk-metin-3); font-size: .76rem; }
.yu-aktif i { background: var(--basari, #2f7a55); box-shadow: 0 0 0 3px color-mix(in srgb, var(--basari, #2f7a55) 18%, transparent); }
.yu-aktif strong { color: var(--basari, #2f7a55); }
.yu-pasif strong { color: var(--metin-2); }
.yu-onizleme { cursor: pointer; border-radius: 16px; transition: opacity .15s ease; }
.yu-onizleme:focus-visible { outline: 2px solid var(--mk-ana); outline-offset: 3px; }
.yu-onizleme .mk-kart:hover .mk-dugme, .yu-onizleme:focus-visible .mk-dugme { border-color: var(--mk-ana); color: var(--mk-ana); }
.yu-anahtarlar { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0 .2rem; }
.yu-anahtarlar-dikey { flex-direction: column; }
.yu-anahtar { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; font-size: .84rem; cursor: pointer; }
.yu-anahtar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.yu-anahtar-ray { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--mk-kenar); transition: background .15s ease; }
.yu-anahtar-ray::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.yu-anahtar input:checked + .yu-anahtar-ray { background: var(--basari, #2f7a55); }
.yu-anahtar input:checked + .yu-anahtar-ray::after { transform: translateX(14px); }
.yu-anahtar input:focus-visible + .yu-anahtar-ray { outline: 2px solid var(--mk-ana); outline-offset: 2px; }
.yu-kilitli { cursor: not-allowed; opacity: .6; }
.yu-alt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .5rem .2rem 0; border-top: 1px solid var(--mk-kenar); }
.yu-alt small { color: var(--mk-metin-3); font-size: .78rem; }
.yu-bag { display: inline-flex; align-items: center; gap: .6rem; }
.yu-bag a { font-size: .82rem; color: var(--mk-ana); text-decoration: none; }
.yu-ayar-oniz { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--mk-kenar); border-radius: 16px; background: var(--mk-kart); }
.yu-etiket { margin: 0 0 .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-metin-3); }
.yu-ayar-yan { display: grid; gap: .6rem; align-content: start; }
.yu-ayar-yan .yu-ust { justify-content: flex-start; gap: 1rem; }
.yu-ayar-yan .alan-ipucu { margin: 0; }
@media (max-width: 640px) { .yu-ayar-oniz { grid-template-columns: minmax(0, 1fr); } .yu-ara, .yu-ara input { flex: 1 1 100%; width: 100%; } }
.mk-fiyat strong, .ud-tutar strong, .paket-fiyat span { white-space: nowrap; }

/* iletisim.css */
/* İLETİŞİM VİTRİNİ
   Musa'nın 18 Ağu 2026 referans görselinden ölçüldü.

   19 Ağu — Musa'nın düzeltmesi: "açık renk temada anasayfadaki iletişim
   bölümü de açık renk olsun, koyu temada koyu olsun." Bölüm önce sabit
   lacivertti; artık RENK YAZMIYOR, kimlik belirteçlerinden türüyor. Böylece
   üç durumda birden doğru: açık tema, koyu tema ve bölüm tonu "koyu".

   Sabit kalan tek şey kart simgelerinin renkleri (indigo, yeşil, turuncu) —
   onlar amaç ayırt edici, her iki zeminde de okunuyor. */

.bolum-iletisimVitrin {
  --iv-kart: var(--kart);
  --iv-kart-2: var(--zemin-3);
  --iv-kenar: var(--kenar);
  --iv-kenar-parlak: color-mix(in srgb, var(--ana) 32%, transparent);
  --iv-metin: var(--metin);
  --iv-metin-2: var(--metin-2);
  --iv-metin-3: var(--metin-3);
  --iv-parlak: var(--ana);
  --iv-ana: var(--ana);
  --iv-ana-koyu: var(--ana-koyu);

  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 8%, color-mix(in srgb, var(--ana) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--zemin-2), var(--zemin));
  color: var(--iv-metin);
}

/* Noktalı doku — referansta zeminde ince bir ızgara var.
   Süs değil: düz bir alan bu ölçüde boş görünüyor. Metin renginden
   türediği için açık temada koyu, koyu temada açık noktalar oluyor. */
.bolum-iletisimVitrin::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--metin) 8%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  pointer-events: none;
}

.ivitrin {
  position: relative;
  display: grid;
  gap: 2.5rem;
}

/* ── Üst blok: metin + Safinaz kutusu ── */

.ivitrin-tepe {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: center;
}

.ivitrin-etiket {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iv-parlak);
}

.ivitrin-baslik {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--iv-metin);
}

.ivitrin-alt {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--iv-metin-2);
}

.ivitrin-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* ── Düğmeler ── */

.ivitrin-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

.ivitrin-dugme:hover { transform: translateY(-1px); }

.ivitrin-dugme-ana {
  background: var(--iv-ana);
  color: var(--metin-ters);
}
.ivitrin-dugme-ana:hover { background: var(--iv-ana-koyu); }

.ivitrin-dugme-cizgi {
  border-color: var(--iv-kenar);
  color: var(--iv-metin);
}
.ivitrin-dugme-cizgi:hover {
  border-color: var(--iv-kenar-parlak);
  background: color-mix(in srgb, var(--ana) 8%, transparent);
}

/* Safinaz düğmesi önce beyazdı; açık temada beyaz kutunun üstünde
   kayboluyordu. Ana renge çevrildi, iki temada da duruyor. */
.ivitrin-dugme-acik {
  background: var(--iv-ana);
  color: var(--metin-ters);
}
.ivitrin-dugme-acik:hover { background: var(--iv-ana-koyu); }

.ivitrin-ok {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
}
.ivitrin-ok svg { width: 100%; height: 100%; }

/* ── Safinaz kutusu ── */

.ivitrin-asistan {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 15rem;
}

.ivitrin-asistan-kart {
  position: relative;
  z-index: 2;
  width: min(22rem, 100%);
  padding: 1.6rem;
  border: 1px solid var(--iv-kenar-parlak);
  border-radius: 1rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ana) 16%, var(--kart)), var(--kart));
  backdrop-filter: blur(2px);
}

.ivitrin-asistan-baslik {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--iv-metin);
}

.ivitrin-kivilcim {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--iv-parlak);
}
.ivitrin-kivilcim svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }

.ivitrin-asistan-metin {
  margin: 0.8rem 0 1.3rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--iv-metin-2);
}

.ivitrin-asistan-gorsel {
  position: absolute;
  right: -2.5rem;
  top: 50%;
  width: 19rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.ivitrin-asistan-gorsel svg { width: 100%; height: auto; }

/* ── Amaç kartları ── */

/* Üç kart AYNI hizada başlasın: açıklama bir satır ya da iki satır olsun,
   telefon/e-posta çizgisi ve düğme kartlar arasında kaymamalı. Bunu satır
   ızgarasının paylaşılması (subgrid) çözer; desteklemeyen tarayıcıda kartlar
   yine çizilir, yalnız hizalama kaybolur. */
.ivitrin-kartlar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.ivitrin-kart {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.5rem;
  border: 1px solid var(--iv-kenar);
  border-radius: 1rem;
  background: var(--iv-kart);
  transition: border-color 0.15s, background-color 0.15s;
}

.ivitrin-kart:hover {
  border-color: var(--iv-kenar-parlak);
  background: color-mix(in srgb, var(--ana) 6%, var(--iv-kart));
}

.ivitrin-kart-tepe {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ivitrin-kart-simge {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: var(--iv-kart-renk, #4f5bd5);
  color: #fff;
}
.ivitrin-kart-simge svg { width: 1.5rem; height: 1.5rem; }

.ivitrin-renk-indigo  { --iv-kart-renk: #4f5bd5; }
.ivitrin-renk-yesil   { --iv-kart-renk: #2f8f7a; }
.ivitrin-renk-turuncu { --iv-kart-renk: #e2892f; }
.ivitrin-renk-mavi    { --iv-kart-renk: #2f6bf6; }
.ivitrin-renk-mor     { --iv-kart-renk: #7b4fd5; }

.ivitrin-kart-baslik {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--iv-metin);
}

.ivitrin-kart-alt {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--iv-metin-2);
}

.ivitrin-kart-iletisim {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--iv-kenar);
  font-size: 1.02rem;
  color: var(--iv-metin);
}

.ivitrin-kart-iletisim a {
  color: inherit;
  text-decoration: none;
}
.ivitrin-kart-iletisim a:hover { text-decoration: underline; }

.ivitrin-kart-simge-kucuk {
  display: inline-flex;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--iv-metin-3);
}
.ivitrin-kart-simge-kucuk svg { width: 100%; height: 100%; }

.ivitrin-kart-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.7rem 1rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--iv-kart-renk) 16%, transparent);
  color: var(--iv-metin);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s;
}
.ivitrin-kart-dugme:hover {
  background: color-mix(in srgb, var(--iv-kart-renk) 32%, transparent);
}

@supports (grid-template-rows: subgrid) {
  .ivitrin-kartlar { grid-template-rows: auto auto auto; }
  .ivitrin-kart { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
}

/* ── Şube şeridi ── */

.ivitrin-serit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  overflow: hidden;
  padding: 1.6rem 1.9rem;
  border: 1px solid var(--iv-kenar);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--metin) 3%, transparent);
}

.ivitrin-siluet {
  position: absolute;
  right: 12rem;
  bottom: 0;
  width: 30rem;
  height: 100%;
  color: var(--iv-parlak);
  opacity: 0.35;
  pointer-events: none;
}

.ivitrin-serit-metin { position: relative; z-index: 1; }

.ivitrin-sehirler {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--iv-metin);
}
.ivitrin-sehirler i { color: var(--iv-metin-3); font-style: normal; }

.ivitrin-serit-not {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--iv-metin-2);
}

.ivitrin-serit .ivitrin-dugme { position: relative; z-index: 1; }

/* ── Dar ekran ── */

@media (max-width: 62rem) {
  .ivitrin-tepe { grid-template-columns: 1fr; gap: 2rem; }
  .ivitrin-asistan { min-height: 0; }
  .ivitrin-asistan-kart { width: 100%; }
  /* Halka görseli dar ekranda kartın arkasına düşüp metni okunmaz yapıyordu. */
  .ivitrin-asistan-gorsel { display: none; }
  .ivitrin-kartlar { grid-template-columns: 1fr; }
  .ivitrin-siluet { display: none; }
}

@media (max-width: 40rem) {
  .ivitrin-serit { flex-direction: column; align-items: flex-start; }
  .ivitrin-dugmeler .ivitrin-dugme { flex: 1 1 auto; }
}

/* cihaz.css */
/* Cihaz katmani
   Tek duzeni kucultup buyutmek yetmez - her cihaz sinifinin kendi yerlesimi olur.
   Esikler: mobil 0-479 | buyuk mobil 480-767 | tablet 768-1023 | web 1024-1439 | masaustu 1440+ */

/* ═══════ MASAUSTU (1440+) — okuma genisligi korunur ═══════ */
@media (min-width: 1440px) {
  :root { --kapsayici: 1260px; }
  .kahraman-baslik { font-size: var(--olcek-9); }
}

/* ═══════ TABLET (768-1023) ═══════ */
@media (max-width: 1023px) {
  :root { --aralik-8: 3rem; --aralik-9: 4rem; }

  .izgara-3, .izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .adim-listesi { grid-template-columns: 1fr; gap: var(--aralik-5); }
  .paket-grubu { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .gorus-grubu { grid-template-columns: repeat(2, 1fr); }
  .kisi-grubu { grid-template-columns: repeat(3, 1fr); }
  .iletisim-duzen { grid-template-columns: repeat(2, 1fr); gap: var(--aralik-6); }
  /* Logo ve tanim ustte, uc baglanti sutunu altta yan yana (telefon icin
     asagidaki 767px blogu yazi olcusunu ayrica kucultur). */
  .alt-duzen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alt-marka { grid-column: 1 / -1; }

  .kahraman-ikili { grid-template-columns: 1fr; gap: var(--aralik-6); }
  .kahraman-gorsel { order: -1; }

  /* Tek sutuna dusunce gorsel tam genislige yayiliyordu: 768px'te giris
     bolumu 1342px oldu, baslik ilk ekranin altina itildi (15 Eyl 2026 olcumu).
     Gorsel okunur boyutta ortalanir, yazi yukari cikar. Telefonda sinir
     ekran genisliginden buyuk oldugu icin etkisizdir. */
  .kahraman-gorsel, .ikili-gorsel { width: 100%; max-width: 36rem; margin-inline: auto; }

  /* Menu acilir panele doner */
  .menu-dugme { display: inline-flex; }
  .menu {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--zemin);
    border-bottom: 1px solid var(--kenar);
    box-shadow: var(--golge-2);
    padding: var(--aralik-4);
    margin: 0;
    display: none;
  }
  .menu[data-acik="evet"] { display: block; }
  .menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a { padding: var(--aralik-3) var(--aralik-4); font-size: var(--olcek-3); }
  .menu-alt {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--kenar);
    border-radius: 0; margin-left: var(--aralik-4); padding: 0;
  }
  .menu-ok { display: none; }
}

/* ═══════ BUYUK MOBIL (480-767) ═══════ */
@media (max-width: 767px) {
  .kapsayici { width: min(100% - 2rem, var(--kapsayici)); }

  .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: 1fr; }
  .gorus-grubu { grid-template-columns: 1fr; }
  .kisi-grubu { grid-template-columns: repeat(2, 1fr); }
  .sayi-grubu { grid-template-columns: 1fr; gap: var(--aralik-3); }
  .iletisim-duzen { grid-template-columns: 1fr; }
  /* Alt bilgi telefonda da tek sutuna DUSMEZ (Ilker, 15 Eyl 2026: "hakkimizda
     kisimlari alt alta duruyor"). Logo ve tanim ustte tam genislik, Kurumsal /
     Urunler / Destek altta yan yana; uzun baglanti iki satira sarar. */
  .alt-duzen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aralik-6) var(--aralik-4); }
  .alt-marka { grid-column: 1 / -1; }
  .alt-sutun h3 { font-size: .7rem; letter-spacing: .08em; margin-bottom: var(--aralik-3); }
  .alt-sutun ul { gap: var(--aralik-3); }
  .alt-sutun a { font-size: .82rem; line-height: 1.35; display: inline-block; overflow-wrap: anywhere; }
  .alt-serit { flex-direction: column; text-align: center; }
  .alt-kunye { text-align: center; }

  .bolum { padding-top: var(--aralik-7); padding-bottom: var(--aralik-7); }
  .marka-alt { display: none; }

  /* Ust sag kose dar ekranda tasiyordu: menu dugmesi ve tema yeter,
     panel baglantisi zaten menude var. */
  .tepe-sag .dugme { display: none; }
  .tepe-ic { gap: var(--aralik-3); }
}

/* ═══════ MOBIL (0-479) — tek elle kullanim ═══════ */
@media (max-width: 479px) {
  .kapsayici { width: min(100% - 1.5rem, var(--kapsayici)); }

  .kahraman-baslik { font-size: clamp(1.8rem, 1.2rem + 4vw, 2.4rem); }
  .dugme-grubu { flex-direction: column; align-items: stretch; }
  .dugme { width: 100%; padding-block: 0.95rem; }   /* dokunma hedefi 44px+ */
  .tepe-ic { min-height: 64px; gap: var(--aralik-3); }
  .menu { inset-block-start: 64px; }
  .kart { padding: var(--aralik-5); }
  .paket { padding: var(--aralik-5); }
  .sss-oge { padding: var(--aralik-3) var(--aralik-4); }

  /* Iletisim seridindeki "Sanliurfa • Gaziantep • Hatay" 360px'te Hatay'i
     tek basina alt satira atiyordu; yazi ve aralik biraz kuculunce sigar. */
  .ivitrin-sehirler { font-size: 1rem; gap: 0.45rem; }
}

/* ═══════ DOKUNMATIK — imlec varsayimi yapilmaz ═══════ */
@media (hover: none) {
  /* Alt bilgideki surum rozeti 26px'ti; parmakla isabet icin en az 32px. */
  .surum-rozet { min-height: 32px; display: inline-flex; align-items: center; }
  .kart-bagli:hover { transform: none; box-shadow: none; }
  .serit-oge { opacity: 1; }
  .menu-acilir:hover .menu-alt { opacity: 1; visibility: visible; }
}

/* ═══════ YAZDIRMA ═══════ */
@media print {
  .tepe, .alt, .tema-dugme, .menu-dugme, .dugme-grubu { display: none !important; }
  .bolum { padding: 1rem 0; break-inside: avoid; }
  body { background: #fff; color: #000; }
}

/* vitrin-palet.css */
/* VITRIN PALETI - site ve yonetim paneli ortak okur.
   14 Eyl 2026'da Ilker'in istekleri vitrin.css'e sabit renk olarak yazilmisti;
   panelden degistirilemiyordu (Ilker, 15 Eyl: "panel icerisinde ozellik olarak
   mevcut degil"). Degerler buraya degisken olarak toplandi; panelin Tasarim
   ekrani bunlari api/tasarim.js uzerinden ezer.

   Yukleme sirasi: vitrin-palet.css > vitrin.css > tasarim <style>.
   Buradaki degerler BUGUNKU gorunumdur; panelde bos birakilan alan bunu korur.

   Turetilmis degiskenler (--elektrik-cizgi, --nokta-renk) ayni elemanda (:root)
   tanimli oldugu icin taban degisken ezilince yeniden hesaplanir. */

:root {
  --elektrik: #0070f3;
  --elektrik-yumusak: color-mix(in srgb, var(--elektrik) 14%, transparent);
  --elektrik-cizgi: color-mix(in srgb, var(--elektrik) 38%, transparent);
  --koyu-mavi: #012d4f;

  /* Sirali zemin: giris > duz > giris > duz */
  --giris-zemin: #e4eef8;
  --duz-zemin: #ffffff;

  --devre-renk: #015798;
  --devre-saydam: .14;
  --kose-gradyan: rgba(1, 45, 79, .22);
  --sayi-metin: #0b0f14;

  --menu-renk: #015798;
  --menu-parlak: var(--elektrik);

  --nokta-taban: #012d4f;
  --nokta-oran: 13%;
  --nokta-renk: color-mix(in srgb, var(--nokta-taban) var(--nokta-oran), transparent);

  /* Uygulama kartlari uclu sirayla boyanir */
  --kart-1: #015798;
  --kart-2: #ffffff;
  --kart-3: #5b3cc4;

  --cagri-dugme: var(--koyu-mavi);
  --cagri-ikincil: #16804a; /* beyaz yaziyla 4.5:1 ustu (Lighthouse kontrast, 16 Eki 2026) */
  --alt-baslik: var(--elektrik);

  --logo-boy: 84px;
  --logo-boy-mobil: 56px;
  --logo-boy-alt: 96px;
}

:root[data-tema="koyu"] {
  --giris-zemin: #050c18;
  --duz-zemin: #000000;
  --devre-renk: #3d8bff;
  --devre-saydam: .2;
  --kose-gradyan: rgba(13, 64, 140, .5);
  --sayi-metin: #ffffff;
  --menu-renk: var(--metin-2);
  --menu-parlak: #ffffff;
  --nokta-taban: #ffffff;
  --nokta-oran: 10%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --giris-zemin: #050c18;
    --duz-zemin: #000000;
    --devre-renk: #3d8bff;
    --devre-saydam: .2;
    --kose-gradyan: rgba(13, 64, 140, .5);
    --sayi-metin: #ffffff;
    --menu-renk: var(--metin-2);
    --menu-parlak: #ffffff;
    --nokta-taban: #ffffff;
    --nokta-oran: 10%;
  }
}

/* vitrin.css */
/* VITRIN KATMANI - Ilker'in 14 Eyl 2026 listesi (13 madde).
   Site sayfalarinda en son yuklenir; oncekileri ezmesi bu yuzden.

   RENKLER BURADA YAZILMAZ (15 Eyl 2026): degiskenler vitrin-palet.css'te,
   panelin Tasarim ekrani onlari ezer. Buraya sabit renk eklenirse panelden
   degistirilemez - Ilker'in "panelde yok" dedigi tam buydu.

   OZGULLUK NOTU: site.css ve site-gorunum.css koyu tema kurallarini
   `:root[data-tema="koyu"] .x` ve `:root:not([data-tema="acik"]) .x`
   bicimiyle yaziyor (0,3,0 - 0,4,0). Buradaki bazi seciciler bilerek
   uzun (`.govde .bolum.bolum-cagri .dugme.dugme-ana`): kisa yazilirsa
   acik temada gecip koyu temada sessizce kaybediyor. */

.ekran-disi {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Temaya gore degisen gorsel: biri basilir, biri gizlenir.
   Tema hem cihazdan hem ust bardaki dugmeden geliyor; <picture> dugmeyi gormez. */
.tema-gorsel-koyu { display: none; }
:root[data-tema="koyu"] .tema-gorselli .tema-gorsel-acik { display: none; }
:root[data-tema="koyu"] .tema-gorsel-koyu { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tema-gorselli .tema-gorsel-acik { display: none; }
  :root:not([data-tema="acik"]) .tema-gorsel-koyu { display: block; }
}

/* ═══ 1 + 11. Yalniz logo: yazi yok, yazidan kalan alan logoya ═══ */
/* Enver, 14 Eyl aksam: "logo buyusun". 52px'te slogan seridi okunmuyordu;
   tepe cubugu logoyla birlikte kalinlasir (min-height icerige uyar). */
.marka-yalniz-logo img {
  width: auto; height: var(--logo-boy); border-radius: 0;
}
.alt-marka .marka-yalniz-logo img { height: var(--logo-boy-alt); }
@media (max-width: 640px) {
  .marka-yalniz-logo img { height: var(--logo-boy-mobil); }
}

/* Logo ve slogan (Enver, 16 Eki 2026): marka adi yazilmaz, slogan logonun yaninda */
.marka-logo-slogan { gap: .8rem; }
.marka-logo-slogan .marka-slogan {
  padding-left: .8rem; border-left: 1px solid var(--kenar);
  max-width: 15rem; line-height: 1.3; font-size: var(--olcek-1);
}

/* ═══ 4. Hero basligi gorsel ═══ */
.kahraman-baslik-gorselli { margin-bottom: var(--aralik-5); }
.kahraman-baslik-gorsel { width: min(100%, 30rem); height: auto; }

/* ═══ 3. Bolum ayrimi: cizgi + sirali zemin ═══
   Acik: giris > beyaz > giris > beyaz. Koyu: giris > siyah > giris > siyah.
   Panelden renk secilmis bolum kendi rengini korur (site.css --sira-zemin). */
/* Duyuru seridi siraya sayilmaz: en uste alininca alttaki bolumlerin renkleri kaymasin */
.govde > .bolum:nth-child(odd of .bolum:not(.bolum-duyuru)) { --sira-zemin: var(--giris-zemin); }
.govde > .bolum:nth-child(even of .bolum:not(.bolum-duyuru)) { --sira-zemin: var(--duz-zemin); }
.govde > .bolum + .bolum { border-top: 1px solid var(--elektrik-cizgi); }
.govde > .bolum-duyuru + .bolum { border-top: 0; }

/* Duyuru seridi: ince, ana renkli bant (Enver, 17 Eki 2026: "duyuru seridini ustte
   alinca calismiyor" - normal bolum dolgusu aldigi icin bos gri alan gibi gorunuyordu).
   Panelden renk ya da bosluk secilirse o kullanilir. */
.govde > .bolum.bolum-duyuru {
  padding-top: var(--bolum-ust, .65rem); padding-bottom: var(--bolum-alt, .65rem);
  background: var(--bolum-zemin, var(--ana)); color: var(--bolum-metin, #fff);
}
:root[data-tema="koyu"] .govde > .bolum.bolum-duyuru {
  background: var(--bolum-zemin-koyu, var(--bolum-zemin, var(--ana)));
  color: var(--bolum-metin-koyu, var(--bolum-metin, #fff));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .govde > .bolum.bolum-duyuru {
    background: var(--bolum-zemin-koyu, var(--bolum-zemin, var(--ana)));
    color: var(--bolum-metin-koyu, var(--bolum-metin, #fff));
  }
}
.bolum-duyuru .duyuru-serit { color: inherit; font-weight: 500; }
.bolum-duyuru .duyuru-serit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.govde > .bolum:last-child { border-bottom: 1px solid var(--elektrik-cizgi); }

/* Iletisim vitrini kendi zeminini kisayolla yaziyordu; sira rengi onun
   altina alinir, ustteki isik lekesi korunur. */
:root .govde > .bolum.bolum-iletisimVitrin {
  background-color: var(--sira-zemin);
  background-image: radial-gradient(120% 80% at 78% 8%, color-mix(in srgb, var(--ana) 14%, transparent), transparent 60%);
}

/* ═══ 2. Giris: yari saydam devre karti deseni ═══
   Desen maskedir, rengi CSS verir - iki tema icin ayri gorsel gerekmez.
   Kaynak: Uzak Baglanti sitesinin giris deseni. */
.bolum-kahraman { isolation: isolate; overflow: hidden; }
.bolum-kahraman::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--devre-renk);
  opacity: var(--devre-saydam);
  -webkit-mask: url("/kimlik/gorsel/devre-maske.png") center / cover no-repeat;
  mask: url("/kimlik/gorsel/devre-maske.png") center / cover no-repeat;
}

/* ═══ 5. Uygulama kartlari: mavi / beyaz / mor ═══
   Ikinci kartin yazisi birinci kartin renginden turer. */
.bolum-ozellikler .izgara > .kart { border-color: transparent; }
.bolum-ozellikler .izgara > .kart:nth-child(3n+1) { background: var(--kart-1); }
.bolum-ozellikler .izgara > .kart:nth-child(3n+2) {
  background: var(--kart-2); border-color: color-mix(in srgb, var(--kart-1) 22%, transparent);
}
.bolum-ozellikler .izgara > .kart:nth-child(3n) { background: var(--kart-3); }

.bolum-ozellikler .izgara > .kart:nth-child(3n+1) .kart-baslik,
.bolum-ozellikler .izgara > .kart:nth-child(3n) .kart-baslik { color: #ffffff; }
.bolum-ozellikler .izgara > .kart:nth-child(3n+1) .kart-metin,
.bolum-ozellikler .izgara > .kart:nth-child(3n) .kart-metin { color: rgba(255, 255, 255, .86); }
.bolum-ozellikler .izgara > .kart:nth-child(3n+1) .kart-simge,
.bolum-ozellikler .izgara > .kart:nth-child(3n) .kart-simge {
  background: rgba(255, 255, 255, .16); color: #ffffff;
}

.bolum-ozellikler .izgara > .kart:nth-child(3n+2) .kart-baslik { color: var(--kart-1); }
.bolum-ozellikler .izgara > .kart:nth-child(3n+2) .kart-metin {
  /* Varsayilan kart-1 (#015798) ile tam #24527a verir - 14 Eylul'deki renk. */
  color: color-mix(in srgb, var(--kart-1) 50%, #474d5c);
}
.bolum-ozellikler .izgara > .kart:nth-child(3n+2) .kart-simge {
  background: color-mix(in srgb, var(--kart-1) 10%, transparent); color: var(--kart-1);
}

/* ═══ 6. Ilk uygulama ve XML: koselerden koyu mavi gradyan ═══ */
.bolum-metinGorsel { isolation: isolate; overflow: hidden; }
.bolum-metinGorsel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 65% at 0% 0%, var(--kose-gradyan), transparent 72%),
    radial-gradient(50% 65% at 100% 100%, var(--kose-gradyan), transparent 72%);
}

/* ═══ 7. Uc adim: elektrik mavisi hap cerceve, ustune gelince buyur ═══ */
.bolum-adimlar .adim {
  border: 2px solid var(--elektrik);
  border-radius: var(--kose-tam);
  padding: 1.1rem 1.9rem;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.bolum-adimlar .adim:hover {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--elektrik) 32%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .bolum-adimlar .adim:hover { transform: scale(1.04); }
}

/* ═══ 8. Kurumsal sayilar: dolu ama saydam hap ═══ */
.bolum-istatistik .sayi-oge {
  border: 2px solid var(--elektrik);
  border-radius: var(--kose-tam);
  background: var(--elektrik-yumusak);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 1.2rem 1.6rem;
}
.bolum-istatistik .sayi-deger,
.bolum-istatistik .sayi-etiket { color: var(--sayi-metin); }
/* Oge sayisi degisince (Teknokent hapi kalkti, 3 -> 2) haplar sabit 3 sutunda
   bos yer birakmasin; kac oge varsa satiri esit paylassin. */
.bolum-istatistik .sayi-grubu {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* ═══ 9. Calisma bicimimiz: kutulari saran tek serit ═══ */
.bolum-bilgiKutulari .izgara {
  border: 2px solid var(--elektrik);
  border-radius: calc(var(--kose-buyuk) * 1.75);
  padding: clamp(1rem, .5rem + 2vw, 2rem);
}

/* ═══ 10. Kapanis cagrisi: elektrik mavisi bant ═══
   Zemin ve yazi rengi bolumun Gorunum sekmesinde; dugme renkleri
   Tasarim ekraninda (cagriDugmeRenk, cagriIkincilRenk). */
.govde .bolum.bolum-cagri .dugme.dugme-ana {
  background: var(--cagri-dugme); color: #ffffff; border-color: transparent;
  box-shadow: 0 8px 22px rgba(1, 29, 51, .35);
}
.govde .bolum.bolum-cagri .dugme.dugme-ana:hover {
  background: color-mix(in srgb, var(--cagri-dugme) 80%, var(--elektrik)); color: #ffffff;
}
.govde .bolum.bolum-cagri .dugme.dugme-ikincil {
  background: var(--cagri-ikincil); color: #ffffff; border-color: transparent;
}
.govde .bolum.bolum-cagri .dugme.dugme-ikincil:hover {
  background: color-mix(in srgb, var(--cagri-ikincil) 85%, #000000); color: #ffffff;
}

/* ═══ Guven bandi - kurum rozetleri (Enver, 15 Eyl 2026) ═══
   dropshipping.gen.tr'deki bandin karsiligi. Logolar koyu alt bilgi icin
   secilmis (Harran'inki beyaz), bu yuzden logo yuvasi iki temada da koyu. */
.guven-bandi {
  border-top: 1px solid var(--elektrik-cizgi);
  padding: var(--aralik-6) 0 var(--aralik-5);
}
.guven-baslik {
  margin: 0 0 var(--aralik-4); font-size: var(--olcek-1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3);
}
.guven-liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--aralik-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.guven-rozet {
  display: flex; align-items: center; gap: .75rem; height: 100%;
  padding: .55rem .75rem; border-radius: var(--kose-orta);
  background: var(--kart); border: 1px solid var(--elektrik-cizgi);
  color: inherit; text-decoration: none;
}
a.guven-rozet { transition: border-color .2s ease, box-shadow .2s ease; }
a.guven-rozet:hover { border-color: var(--elektrik); box-shadow: 0 6px 18px color-mix(in srgb, var(--elektrik) 18%, transparent); }
.guven-logo {
  flex: none; width: 72px; height: 48px; padding: 5px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; background: #0b1a2e;
}
.guven-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.guven-yazi { min-width: 0; line-height: 1.3; }
.guven-yazi strong { display: block; font-size: .8rem; font-weight: 600; color: var(--metin); overflow-wrap: anywhere; }
.guven-yazi small { display: block; margin-top: 2px; font-size: .72rem; color: var(--metin-3); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .guven-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aralik-2); }
  .guven-rozet { flex-direction: column; align-items: flex-start; gap: .45rem; padding: .55rem; }
  .guven-logo { width: 100%; height: 44px; }
}

.guven-rozet[data-rozet-pencere] { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.guven-rozet[data-rozet-pencere]:hover { border-color: var(--elektrik); box-shadow: 0 6px 18px color-mix(in srgb, var(--elektrik) 18%, transparent); }

/* Ust bilgideki ince logo seridi (bant.konum 'ust' | 'ikisi') */
.guven-serit { background: #0b1a2e; border-bottom: 1px solid var(--elektrik-cizgi); }
.guven-serit ul {
  list-style: none; margin: 0; padding: 6px 0; display: flex; align-items: center;
  gap: 18px; overflow-x: auto; scrollbar-width: none; justify-content: center;
}
.guven-serit ul::-webkit-scrollbar { display: none; }
.guven-serit li { flex: none; }
.guven-serit-oge { display: flex; align-items: center; height: 32px; opacity: .85; transition: opacity .2s ease; }
.guven-serit-oge:hover, .guven-serit-oge:focus-visible { opacity: 1; }
.guven-serit-oge img { height: 28px; width: auto; max-width: 96px; object-fit: contain; }
@media (max-width: 767px) { .guven-serit ul { justify-content: flex-start; gap: 14px; } }

/* Rozet penceresi (dropshipping.gen.tr RozetPenceresi karsiligi) */
.rozet-pencere {
  width: min(28rem, calc(100% - 2rem)); max-height: 90vh; overflow-y: auto;
  padding: 1.5rem; border: 1px solid var(--elektrik-cizgi); border-radius: 14px;
  background: var(--kart); color: var(--metin);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.rozet-pencere.genis { width: min(48rem, calc(100% - 2rem)); }
.rozet-pencere::backdrop { background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px); }
.rozet-pencere[open] { animation: rozet-ac .2s ease-out; }
@keyframes rozet-ac { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .rozet-pencere[open] { animation: none; } }
.rozet-pencere-kapat {
  position: absolute; top: .75rem; right: .75rem; width: 2rem; height: 2rem;
  display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--metin-3); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.rozet-pencere-kapat:hover { color: var(--metin); background: color-mix(in srgb, var(--metin) 8%, transparent); }
.rozet-pencere-ust { display: flex; align-items: center; gap: 1rem; padding-right: 2rem; }
.rozet-pencere-logo {
  flex: none; width: 6rem; height: 5rem; padding: .5rem; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; background: #0b1a2e;
}
.rozet-pencere-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rozet-pencere-baslik { margin: 0; font-size: 1.1rem; line-height: 1.35; font-weight: 600; }
.rozet-pencere-kisa { margin: .25rem 0 0; font-size: .9rem; color: var(--metin-3); }
.rozet-pencere-metin { margin: 1rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--metin-2, var(--metin)); white-space: pre-line; }
.rozet-pencere-belge { display: block; margin-top: 1rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--elektrik-cizgi); }
.rozet-pencere-belge img { display: block; width: 100%; height: auto; }
.rozet-pencere-alt { margin: 1rem 0 0; display: flex; justify-content: flex-end; }
.rozet-pencere-dugme {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 10px;
  background: var(--elektrik); color: #fff; font-size: .9rem; font-weight: 500; text-decoration: none;
}
.rozet-pencere-dugme::after { content: "↗"; font-size: .85em; }
.rozet-pencere-dugme:hover { filter: brightness(1.08); }
html.pencere-acik { overflow: hidden; }

/* ═══ Odeme bandi — sanal POS icin isaretler, yasal metinler, kunye (16 Eki 2026) ═══ */
.odeme-bandi { border-top: 1px solid var(--elektrik-cizgi); padding: var(--aralik-5) 0; }
.odeme-yasal ul {
  list-style: none; margin: 0 0 var(--aralik-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
}
.odeme-yasal a { font-size: var(--olcek-1); color: var(--metin-2); text-decoration: none; }
.odeme-yasal a:hover, .odeme-yasal a:focus-visible { color: var(--elektrik); text-decoration: underline; }
.odeme-alt { display: flex; flex-wrap: wrap; gap: var(--aralik-4); justify-content: space-between; align-items: flex-end; }
.odeme-kunye {
  font-style: normal; font-size: .78rem; line-height: 1.6; color: var(--metin-3);
  max-width: 44rem; display: flex; flex-wrap: wrap; gap: 0 .9rem;
}
.odeme-kunye strong { flex-basis: 100%; color: var(--metin-2); font-weight: 600; }
.odeme-kunye b { font-weight: 600; color: var(--metin-2); }
.odeme-kunye a { color: inherit; }
.odeme-isaret-kutu { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
.odeme-baslik { margin: 0; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-3); }
.odeme-isaretler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.odeme-isaretler li { display: flex; }
.odeme-isaretler svg { height: 30px; width: auto; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
@media (max-width: 767px) {
  .odeme-alt { flex-direction: column; align-items: stretch; }
  .odeme-isaret-kutu { align-items: flex-start; }
  .odeme-isaretler svg { height: 26px; }
}

/* ═══ 11. Alt bilgi basliklari ═══ */
.alt-sutun h3 {
  color: var(--alt-baslik);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

/* ═══ Ust menu (Ilker, 14 Eyl aksam) ═══
   Acik temada girisin koyu mavisi; koyu temada eski renk kalir.
   Ustune gelince yukari kalkar ve elektrik mavisiyle parlar.
   Yalniz ust duzey baglantilar - acilir alt menu etkilenmez. */
.tepe .menu > ul > li > a {
  color: var(--menu-renk);
  transition: color .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1), text-shadow .2s ease;
}
.tepe .menu > ul > li > a:hover,
.tepe .menu > ul > li > a:focus-visible {
  color: var(--menu-parlak);
  background: transparent;
  text-shadow: 0 0 14px color-mix(in srgb, var(--elektrik) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .tepe .menu > ul > li > a:hover { transform: translateY(-2px); }
}

/* ═══ Devre deseni - bolume panelden verilir (Gorunum > Desen: devre) ═══
   Giristeki desenin aynisi; ust ve altta yumusakca kaybolur ki bolum
   sinirinda sert bir kesik olusmasin (Ilker: "devre karti gecisi"). */
.desen-devre { isolation: isolate; overflow: hidden; }
.desen-devre::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Iletisim vitrini ayni katmana kendi nokta dokusunu ciziyor; devre
     seciliyse o doku silinir, yoksa ikisi ust uste biner. */
  background-image: none;
  background-size: auto;
  background-color: var(--devre-renk);
  opacity: var(--devre-saydam);
  -webkit-mask:
    url("/kimlik/gorsel/devre-maske.png") center / cover no-repeat,
    linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    url("/kimlik/gorsel/devre-maske.png") center / cover no-repeat,
    linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}

/* ═══ Beyaz ve siyah bolumlere nokta deseni (Ilker, 14 Eyl aksam) ═══
   Beyaz/siyah = sirali zeminin cift sirasi. Panelden kendi rengi verilmis
   bolum (kapanis cagrisi gibi) deseni almaz.
   Zemin site.css'te kisayolla (background:) yaziliyor; koyu tema kurali
   (0,3,0) resmi sifirlamasin diye secici bilerek uzun (0,5,0).
   Nokta rengi ve gorunurlugu vitrin-palet.css'ten; panelden kapatilinca
   --nokta-oran 0% olur, desen seffaflasir. */
.govde > .bolum:nth-child(even of .bolum):not([style*="--bolum-zemin"]) {
  background-image: radial-gradient(var(--nokta-renk) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

/* ═══ Metin + gorsel bolumu girisle ayni gorunur (Ilker, 15 Eyl 2026) ═══
   "Yazilarin sagina gorseli giris sayfasindaki efekt gibi efektleyelim."
   Giris gorseli kose + derin golge + ustune gelince kalkma tasiyor;
   ikili gorsel yalniz hafif golgedeydi. Hareket asagidaki 12. maddede ortak. */
.ikili-gorsel img { border-radius: var(--kose-buyuk); box-shadow: var(--golge-3); }

/* ═══ 12. Gorseller ustune gelince hareket eder ═══ */
@media (prefers-reduced-motion: no-preference) {
  .kahraman-gorsel img,
  .ikili-gorsel img {
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
  }
  .kahraman-gorsel:hover img,
  .ikili-gorsel:hover img {
    transform: translateY(-8px) scale(1.025);
    box-shadow: var(--golge-3);
  }
}

/* Paket kartinda deneme + satin al yan yana, kampanya etiketi (16 Eki 2026) */
.paket-dugmeler { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.paket-dugmeler .dugme { flex: 1 1 9rem; justify-content: center; }
.paket-kampanya {
  align-self: flex-start; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: color-mix(in srgb, var(--elektrik, #0070f3) 16%, transparent); color: var(--elektrik, #0070f3);
}
.paket-liste-fiyat { font-size: .85em; color: var(--metin-3); margin-right: .25rem; }
/* Erisilebilirlik (Lighthouse 17 Eki 2026): beyaz zeminde slogan 3.27:1 kaliyordu, en az 4.5:1 */
.marka-logo-slogan .marka-slogan { color: #555b68; }
footer .marka-logo-slogan .marka-slogan { color: #c3c8d2; }
/* Baslik kendi zeminini tasir (koyu temada da beyaz olabilir): slogan baslik zeminine gore */
.te-logo-acik .marka-logo-slogan .marka-slogan { color: #555b68; }
.te-logo-koyu .marka-logo-slogan .marka-slogan { color: #c3c8d2; }

/* ═══ Ust bilgi seridi (17 Eki 2026) — basligin ustunde, butun sayfalarda ═══ */
.ust-bilgi-serit {
  --ubs-zemin: var(--zemin, #fff); --ubs-yazi: var(--metin-2, #2d2d2d); --ubs-vurgu: var(--ana);
  --ubs-kenar: color-mix(in srgb, currentColor 12%, transparent); --ubs-simge: currentColor;
  background: var(--ubs-zemin); color: var(--ubs-yazi); border-bottom: 1px solid var(--ubs-kenar);
  font-size: var(--ubs-boyut, 13px); line-height: 1.2; position: relative; z-index: 60;
}
.ubs-ic { max-width: var(--kapsayici, 1200px); margin: 0 auto; padding: 0 var(--aralik-4, 1rem); min-height: var(--ubs-yukseklik, 36px);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ubs-tam .ubs-ic { max-width: none; }
.ubs-sol, .ubs-sag { display: flex; align-items: center; align-self: stretch; min-width: 0; }
.ubs-sag { margin-left: auto; justify-content: flex-end; }
.ubs-bag, .ubs-menu a { display: inline-flex; align-items: center; gap: .35em; padding: .3em .75em; color: inherit; text-decoration: none; white-space: nowrap; }
.ubs-bag svg, .ubs-menu svg, .ubs-dugme svg { width: 1.1em; height: 1.1em; flex: none; color: var(--ubs-simge); }
a.ubs-bag:hover, .ubs-menu a:hover, .ubs-sosyal a:hover { color: var(--ubs-vurgu); }
.ubs-menu { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ubs-sosyal { display: inline-flex; align-items: center; gap: .15em; padding: 0 .5em; }
.ubs-sosyal a { display: grid; place-items: center; width: 1.9em; height: 1.9em; color: inherit; }
.ubs-sosyal svg { width: 1.15em; height: 1.15em; }
.ubs-dugme { display: inline-flex; align-items: center; gap: .4em; align-self: stretch; margin-left: .5em; padding: 0 1.2em;
  background: var(--ubs-d-zemin, var(--ana)); color: var(--ubs-d-yazi, #fff); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.ubs-sol .ubs-dugme { margin: 0 .5em 0 0; }
.ubs-dugme:hover { filter: brightness(1.08); }
/* Ince ayraclar: ayni taraftaki ogelerin arasinda */
.ubs-ayracli .ubs-sol > .ubs-bag + .ubs-bag, .ubs-ayracli .ubs-sag > .ubs-bag + .ubs-bag,
.ubs-ayracli .ubs-menu li + li a, .ubs-ayracli .ubs-sol > * + .ubs-menu li:first-child a, .ubs-ayracli .ubs-sag > * + .ubs-menu li:first-child a,
.ubs-ayracli .ubs-sol > .ubs-menu + .ubs-bag, .ubs-ayracli .ubs-sag > .ubs-menu + .ubs-bag { border-left: 1px solid var(--ubs-kenar); }
.ubs-sol > :first-child .ubs-bag:first-child, .ubs-sol > .ubs-bag:first-child, .ubs-sol > .ubs-menu:first-child li:first-child a { padding-left: 0; }
.ubs-ipucu { margin: 0; padding: .4rem 0; font-size: .85em; opacity: .7; }
@media (max-width: 760px) {
  .ubs-masaustu { display: none !important; }
  .ubs-tel-gizle { display: none; }
  .ubs-tel-kaydir .ubs-ic { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .ubs-tel-kaydir .ubs-ic::-webkit-scrollbar { display: none; }
  .ubs-tel-kaydir .ubs-sag { margin-left: 0; }
  .ubs-tel-alt-alta .ubs-ic { flex-direction: column; align-items: stretch; gap: 0; padding-top: .2rem; padding-bottom: .2rem; }
  .ubs-tel-alt-alta .ubs-sol, .ubs-tel-alt-alta .ubs-sag { flex-wrap: wrap; justify-content: center; margin: 0; }
  .ubs-tel-alt-alta .ubs-dugme { align-self: auto; padding: .45em 1.2em; margin: .2em; }
}
@media (min-width: 761px) { .ubs-mobil { display: none !important; } }

/* ═══ Menu bolumu ═══ */
.mb-baslik { margin: 0 0 1rem; font-size: var(--olcek-5, 1.375rem); }
.mb-hiza-orta { text-align: center; justify-content: center; }
.mb-hiza-sag { text-align: right; justify-content: flex-end; }
.mb-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.mb-liste a { display: inline-flex; align-items: center; gap: .45em; color: var(--mb-renk, var(--metin)); text-decoration: none; font-weight: 500; }
.mb-liste a:hover { color: var(--mb-renk, var(--ana)); text-decoration: underline; text-underline-offset: 4px; }
.mb-liste svg { width: 1.15em; height: 1.15em; color: var(--mb-renk, var(--ana)); }
.mb-hap { gap: .5rem; }
.mb-hap a { padding: .55em 1.1em; border: 1px solid color-mix(in srgb, var(--mb-renk, var(--ana)) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--mb-renk, var(--ana)) 7%, transparent); }
.mb-hap a:hover { text-decoration: none; background: color-mix(in srgb, var(--mb-renk, var(--ana)) 15%, transparent); }
.mb-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.mb-izgara a { display: grid; gap: .35rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--kenar); border-radius: var(--kose-orta, 10px); background: var(--kart, #fff); align-content: start; }
.mb-izgara a:hover { border-color: var(--mb-renk, var(--ana)); text-decoration: none; }
.mb-izgara small { color: var(--metin-3); font-weight: 400; font-size: .85em; }
.mb-dikey { flex-direction: column; gap: .5rem; }
.mb-dikey ul { list-style: none; margin: .4rem 0 0 1.6rem; padding: 0; display: grid; gap: .35rem; }
.mb-dikey ul a { font-weight: 400; color: var(--metin-2); }
.mb-bos { margin: 0; color: var(--metin-3); }

/* Tasarimda tek tema secildiyse gecis dugmeleri gorunmez (html[data-tema-kilit]) */
[data-tema-kilit] [data-tema-dugme], [data-tema-kilit] .tema-dugme { display: none !important; }

/* tema-etesio.css */
/* ═══════════════════════════════════════════════════════════════════
   ETESIO TEMASI — Ilker'in tasarimi (16 Eki 2026), bilesenler-etesio.js
   Yazi: Segoe UI (Windows'ta yerlesik; dosyasi sunulmaz, lisansi
   dagitima izin vermez) -> yoksa sistem yazisi.
   ═══════════════════════════════════════════════════════════════════ */
.et-bolum {
  --et-mavi: #0aa5e8; --et-mavi-koyu: #014a8f; --et-lacivert: #070d1c; --et-kart: #0b1428;
  --et-yazi: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, sans-serif;
  font-family: var(--et-yazi); padding: 0 !important; position: relative;
}
.et-bolum .kapsayici { position: relative; z-index: 1; }
.et-vurgu { color: var(--et-mavi); }
.et-dugmeler { display: flex; flex-wrap: wrap; gap: .9rem; }
.et-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 1.6rem;
  border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.et-dugme svg { width: 16px; height: 16px; }
.et-dugme:hover { transform: translateY(-1px); filter: brightness(1.08); }
.et-dugme-ana { background: linear-gradient(90deg, #003b7a, #0a7ad6); color: #fff; box-shadow: 0 8px 22px rgba(10, 122, 214, .35); }
.et-dugme-beyaz { background: #fff; color: #111; }
.et-dugme-sari { background: #f5a10a; color: #10213b; border-radius: 6px; font-size: 1.15rem; font-weight: 500; }
.et-dugme-mavi { background: #2f6bff; color: #fff; border-radius: 6px; }
.et-dugme-lacivert { background: #0b1428; color: #fff; border-radius: 6px; }
.et-dugme-turkuaz { background: linear-gradient(90deg, #0fb5c9, #0b7f72); color: #fff; border-radius: 6px; }

/* Acik zemin + noktali dalga (tasarimdaki doku; ozgun hafif cizim) */
.et-acik { background: linear-gradient(180deg, #f4f4f5, #e9e9eb 60%, #f6f6f7); color: #10213b; }
.et-noktali::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/kimlik/tema-etesio/noktali-dalga.svg") center / cover no-repeat; opacity: .75;
}
:root[data-tema="koyu"] .et-acik { background: linear-gradient(180deg, #0d1424, #0a101d); color: #e6edf7; }
:root[data-tema="koyu"] .et-noktali::before { opacity: .22; }

.et-tepe { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }
.et-tepe-sol { text-align: left; max-width: none; margin-left: 9%; }
.et-tepe h2 { margin: 0 0 .4rem; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 400; color: inherit; letter-spacing: -.01em; }
.et-tepe p { margin: 0; font-size: 1.05rem; opacity: .85; }

/* 1. Giris (kartli slayt) */
.et-kahraman { position: relative; min-height: clamp(560px, 70vh, 820px); background: #fff; overflow: hidden; }
.et-slayt {
  position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s;
  background: linear-gradient(115deg, #fff 45%, #e8f0ff 70%, #c9dcff) center / cover no-repeat;
}
.et-slayt.etkin { opacity: 1; visibility: visible; }
.et-kart {
  width: min(570px, 92%); padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.5rem, 3vw, 3rem) clamp(1.8rem, 3vw, 2.6rem) max(7.5vw, 1.5rem);
  background: rgba(70, 70, 68, .96); color: #fff; border-radius: 0 56px 56px 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .18);
}
.et-kahraman-baslik { margin: 0 0 1.1rem; font-size: clamp(2.2rem, 4.2vw, 3.3rem); line-height: 1.12; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.et-kahraman-metin { margin: 0 0 1.8rem; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, .92); font-weight: 300; }
.et-kanit { display: flex; align-items: center; gap: .6rem; margin: 1.5rem 0 0; font-size: .82rem; }
.et-avatarlar { display: inline-flex; }
.et-avatarlar i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-right: -9px; background: #1aa0b8; }
.et-avatarlar i:nth-child(2) { background: #e3a02a; } .et-avatarlar i:nth-child(3) { background: #7a8ff0; margin-right: 0; }
.et-gosterge { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 8px; padding: 1.1rem 1.4rem; background: var(--et-lacivert); border-radius: 0; z-index: 2; }
.et-gosterge button { width: 96px; height: 4px; border: 0; padding: 0; background: rgba(255, 255, 255, .35); cursor: pointer; }
.et-gosterge button[aria-selected="true"] { background: #fff; }

/* 2. Panel tanitimi ve 5. ortak mavi serit */
.et-serit { background: linear-gradient(90deg, #014a8f, #0a86d6 50%, #014a8f); color: #fff; text-align: center; padding: 2.4rem 0 2.2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); position: relative; z-index: 2; }
.et-serit-baslik { margin: 0 0 .5rem; font-size: clamp(1.9rem, 4vw, 3.3rem); font-weight: 700; color: #fff; letter-spacing: -.01em; }
.et-serit-baslik.et-ince { font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.et-serit p { margin: 0 auto; max-width: 860px; font-size: clamp(1rem, 1.6vw, 1.3rem); color: rgba(255, 255, 255, .92); }
.et-panel-zemin {
  padding: 3rem 0 4rem; background:
    linear-gradient(125deg, transparent 30%, rgba(40, 70, 140, .25) 30% 46%, transparent 46% 58%, rgba(40, 70, 140, .18) 58% 70%, transparent 70%),
    var(--et-lacivert);
}
.et-panel-gorsel { display: block; width: 100%; max-width: 1140px; height: auto; margin: 0 auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5)); }

/* 3. Uygulamalar izgarasi */
.etesioUygulamalar-dis, .bolum-etesioUygulamalar { padding: 3.5rem 0 4rem !important; }
.et-uyg-izgara { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem 2.5rem; padding: 2.4rem 1rem; background: rgba(170, 170, 170, .55); border-block: 10px solid #1f1f1f; }
:root[data-tema="koyu"] .et-uyg-izgara { background: rgba(255, 255, 255, .05); border-color: #000; }
.et-uyg { display: flex; align-items: flex-start; gap: .9rem; width: min(100%, 300px); text-decoration: none; color: inherit; }
.et-uyg-simge {
  flex: none; width: 90px; height: 90px; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  background: var(--et-renk); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transition: transform .2s ease;
}
.et-uyg-simge img { width: 100%; height: 100%; object-fit: cover; }
.et-uyg-simge b { color: #fff; font-size: 2.4rem; font-weight: 700; }
.et-uyg:hover .et-uyg-simge { transform: translateY(-3px) scale(1.03); }
.et-uyg-yazi strong { display: block; font-size: 1.1rem; font-weight: 700; margin: .2rem 0 .35rem; color: #111; }
:root[data-tema="koyu"] .et-uyg-yazi strong { color: #fff; }
.et-uyg-yazi strong em { font-style: normal; font-size: .68rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; background: #0aa5e8; color: #fff; vertical-align: middle; }
.et-uyg-yazi small { display: block; font-size: .8rem; line-height: 1.4; color: #1d1d1d; font-weight: 600; }
:root[data-tema="koyu"] .et-uyg-yazi small { color: #b9c4d3; font-weight: 400; }

/* 4. Uc adim */
.bolum-etesioUcAdim { padding: 3.5rem 0 4.5rem !important; }
.et-adim-hat { list-style: none; margin: 0 auto 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(var(--et-adet), 1fr); position: relative; }
.et-adim-hat::before { content: ""; position: absolute; top: 50%; left: calc(50% / var(--et-adet)); right: calc(50% / var(--et-adet)); height: 1px; background: #7da2e6; }
.et-adim-hat li { display: grid; place-items: center; position: relative; }
.et-adim-hat span {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #050b18; color: #2ec8ff; font-weight: 600;
  box-shadow: 0 0 0 7px rgba(140, 180, 255, .35), 0 0 18px rgba(80, 140, 255, .5);
}
.et-adim-izgara { display: grid; grid-template-columns: repeat(var(--et-adet), 1fr); gap: 1.5rem; }
.et-adim-kart { position: relative; padding: 1.8rem 1.7rem 2.2rem; border-radius: 14px; color: #fff; background: linear-gradient(110deg, var(--et-renk), #050505 92%); min-height: 160px; box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
.et-adim-no { display: none; }
.et-adim-kart h3 { margin: 0 0 .9rem; font-size: 1.3rem; font-weight: 600; color: #fff; }
.et-adim-kart p { margin: 0; line-height: 1.7; font-size: .98rem; color: rgba(255, 255, 255, .92); }

/* 5. Cerceveli kartlar */
.et-koyu-zemin { background: linear-gradient(180deg, #012a5c, #000 85%); padding: 4rem 0 5rem; }
.et-cerceve-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.et-cerceve-kart { padding: 1.8rem 1.7rem; border: 1.5px solid var(--et-renk); border-radius: 12px; background: rgba(5, 12, 26, .85); color: #e8eef7; }
.et-cerceve-tepe { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.et-cerceve-tepe h3 { margin: 0; font-size: 1.2rem; font-weight: 600; color: inherit; }
.et-cerceve-simge { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; border: 1.5px solid var(--et-renk); color: var(--et-renk); }
.et-cerceve-simge svg { width: 22px; height: 22px; }
.et-cerceve-kart p { margin: 0; line-height: 1.65; font-size: .97rem; }
.et-cerceve-kart hr, .et-ilt-kart hr { border: 0; border-top: 1.5px solid var(--et-renk); margin: 1.3rem 0 1rem; opacity: .9; }
.et-cerceve-kart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; }
.et-cerceve-kart li { display: flex; align-items: center; gap: .55rem; }
.et-cerceve-kart li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--et-renk); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); flex: none; }

/* 6. SSS */
.et-sss-zemin { background: linear-gradient(90deg, #00499a, #002a5c 45%, #000 100%); color: #fff; overflow: hidden; padding: 6rem 0 7.5rem !important; }
.et-sss-zemin::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -80px; height: 160px; background: var(--zemin, #fff); border-radius: 50%; }
.et-sss-isaret {
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%); font: 700 min(48vw, 720px)/1 var(--et-yazi);
  color: #f5a10a; -webkit-text-stroke: 3px #3b6fd6; opacity: .95; pointer-events: none;
}
.et-sss { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 3rem; align-items: center; }
.et-sss-sol h2 { margin: 0 0 .5rem; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.08; font-weight: 700; color: #fff; }
.et-sss-sol p { margin: 0 0 2rem; font-size: 1.3rem; color: rgba(255, 255, 255, .62); }
.et-sss-sag { display: grid; gap: .7rem; }
.et-soru { background: #0a1226; border: 1px solid rgba(80, 120, 255, .25); border-radius: 10px; }
.et-soru[open] { border-color: #3d6dff; }
.et-soru summary { list-style: none; display: flex; align-items: center; gap: 1.4rem; padding: 1.15rem 1.5rem; cursor: pointer; font-weight: 600; }
.et-soru summary::-webkit-details-marker { display: none; }
.et-soru-no { font-size: .78rem; color: #5b6b8a; font-weight: 500; }
.et-soru[open] .et-soru-no { color: #2ec8ff; }
.et-soru summary i { margin-left: auto; width: 14px; height: 14px; position: relative; flex: none; }
.et-soru summary i::before, .et-soru summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #2ec8ff; transform: translateY(-50%); }
.et-soru summary i::after { transform: translateY(-50%) rotate(90deg); transition: transform .2s ease; }
.et-soru[open] summary i::after { transform: translateY(-50%) rotate(0); }
.et-soru-cevap { margin: 0 1.5rem; padding: 1rem 0 1.3rem 2.6rem; border-top: 1px solid rgba(255, 255, 255, .1); color: #b9c4d6; line-height: 1.65; font-size: .95rem; }

/* 7. Iletisim (birlikte bulalim) */
.bolum-etesioIletisim { padding: 6rem 0 6rem !important; }
.et-ilt-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; margin-bottom: 2.2rem; }
.et-ilt-baslik { margin: 0 0 1.2rem; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.12; font-weight: 700; color: #2f6bff; }
.et-ilt-ust p { margin: 0 0 1.8rem; font-size: 1.12rem; line-height: 1.6; color: #2b2f38; max-width: 560px; }
:root[data-tema="koyu"] .et-ilt-ust p { color: #c2cbd8; }
.et-ozel-kart { padding: 1.8rem 2rem 2rem; border-radius: 14px; color: #fff; background: linear-gradient(180deg, #050b18 55%, #2a3a5e); box-shadow: 0 20px 40px rgba(0, 0, 0, .2); }
.et-ozel-kart p { margin: 0 0 1.8rem; line-height: 1.7; font-size: .98rem; color: rgba(255, 255, 255, .92); }
.et-turkuaz { --et-renk: #19b7c7; }
.et-ilt-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.et-ilt-kart { padding: 1.8rem 1.8rem 1.6rem; border-radius: 14px; background: #0b1428; color: #fff; }
.et-ilt-alt { margin: 0; font-size: .92rem; color: #97a3b8; }
.et-ilt-bilgi { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; font-size: 1.1rem; }
.et-ilt-bilgi svg { width: 18px; height: 18px; color: #97a3b8; }
.et-ilt-bilgi a { color: #fff; text-decoration: none; }
.et-ilt-dugme { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; border-radius: 6px; background: var(--et-renk); color: #fff; font-weight: 600; text-decoration: none; transition: filter .15s ease; }
.et-ilt-kart[style*="#f5a10a"] .et-ilt-dugme { color: #10213b; }
.et-ilt-dugme svg { width: 16px; height: 16px; }
.et-ilt-dugme:hover { filter: brightness(1.1); }
.et-konum-serit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.6rem 2rem; border-radius: 14px; background: #0b1428; color: #fff; }
.et-konum-serit > span { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.et-konum-serit svg { width: 22px; height: 22px; color: #22c3d6; }
.et-konum-serit strong { font-size: 1.15rem; }
.et-konum-serit em { font-style: normal; font-weight: 300; font-size: 1.1rem; color: #d7deea; margin-left: .6rem; }
.et-konum-serit a { color: #22c3d6; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.et-konum-serit a svg { width: 15px; height: 15px; }

/* Duyarli */
@media (max-width: 960px) {
  .et-sss, .et-ilt-ust { grid-template-columns: 1fr; gap: 2rem; }
  .et-adim-hat { display: none; }
  .et-adim-izgara { grid-template-columns: 1fr; }
  .et-adim-no { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .35); margin-bottom: .8rem; font-weight: 700; }
  .et-tepe-sol { margin-left: 0; text-align: center; }
  .et-sss-isaret { opacity: .25; }
}
@media (max-width: 640px) {
  .et-kahraman { min-height: 620px; }
  .et-kart { width: 100%; border-radius: 0 0 36px 0; padding: 2rem 1.3rem; }
  .et-gosterge button { width: 44px; }
  .et-uyg { width: 100%; }
  .et-uyg-simge { width: 72px; height: 72px; }
  .et-uyg-izgara { gap: 1.4rem; }
  .et-sss-zemin { padding: 4rem 0 6rem !important; }
  .et-soru summary { padding: 1rem; gap: .8rem; }
  .et-soru-cevap { margin: 0 1rem; padding-left: 0; }
  .et-konum-serit em { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .et-slayt, .et-dugme, .et-uyg-simge { transition: none; } }

/* Site geneli bolum zemini/desen kurallari temanin zeminini ezmesin (16 Eki 2026) */
.bolum.et-bolum.et-sss-zemin { background: linear-gradient(90deg, #00499a, #002a5c 45%, #000 100%) !important; color: #fff; }
.bolum.et-bolum.et-acik { background: linear-gradient(180deg, #f4f4f5, #e9e9eb 60%, #f6f6f7) !important; }
:root[data-tema="koyu"] .bolum.et-bolum.et-acik { background: linear-gradient(180deg, #0d1424, #0a101d) !important; }
.bolum.et-bolum.et-tam { background-color: transparent; }
.et-bolum .et-cerceve-kart p, .et-bolum .et-ozel-kart p { color: #dbe3ef; }
.et-bolum .et-adim-kart p { color: rgba(255, 255, 255, .92); }
.et-bolum .et-sss-sol h2 { color: #fff; }
.et-bolum .et-sss-sol p { color: rgba(255, 255, 255, .62); }
.et-bolum .et-soru summary { color: #fff; }
.et-bolum .et-serit p { color: rgba(255, 255, 255, .92); }
.et-bolum .et-kahraman-metin { color: rgba(255, 255, 255, .92); }

/* Alt bilgi — Etesio temasi */
.et-alt { --et-alt-zemin: #0d1526; background: transparent !important; color: #e6ebf3; padding: 0 !important; border: 0 !important; font-family: "Segoe UI", system-ui, sans-serif; }
.et-alt-dalga { display: block; width: 100%; height: clamp(50px, 8vw, 110px); margin-bottom: -1px; fill: var(--et-alt-zemin); }
.et-alt-govde { background: var(--et-alt-zemin); padding: 3rem 0 0; }
.et-alt-duzen { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 2.5rem; padding-bottom: 2.5rem; }
.et-alt-marka .marka { color: #fff; }
.et-alt-marka p { color: #aab6c8; font-size: .92rem; margin: .8rem 0 0; }
.et-alt-ofisler { display: grid; gap: 1.4rem; margin-top: 1.6rem; }
.et-alt-ofis { display: flex; gap: .6rem; }
.et-alt-ofis svg { flex: none; width: 20px; height: 20px; color: #2b7bd6; margin-top: 2px; }
.et-alt-ofis strong { display: block; font-size: 1rem; color: #fff; margin-bottom: .3rem; }
.et-alt-ofis span { font-size: .85rem; line-height: 1.55; color: #d5dce8; }
.et-alt-sosyal { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; }
.et-alt-sosyal a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1f2633; color: #f5a10a; transition: background .15s ease; }
.et-alt-sosyal a:hover { background: #2b3445; }
.et-alt-sosyal svg { width: 18px; height: 18px; }
.et-alt-sutun h3 { margin: 0 0 .9rem; font-size: .95rem; font-weight: 600; color: #fff; }
.et-alt-sutun ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.et-alt-sutun a { color: #aab6c8; text-decoration: none; font-size: .9rem; }
.et-alt-sutun a:hover { color: #f5a10a; }
.et-alt .alt-serit { border-top: 1px solid rgba(255, 255, 255, .08); }
.et-alt .alt-serit p, .et-alt .guven-baslik { color: #93a1b6; }
@media (max-width: 760px) { .et-alt-duzen { grid-template-columns: 1fr 1fr; } .et-alt-marka { grid-column: 1 / -1; } }

/* Kartli slayt: arka plan videosu (17 Eki 2026) */
.et-slayt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.et-slayt-videolu .et-kart { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .et-slayt-video { display: none; } }

/* ═══ Gorunum sekmesi renkleri (17 Eki 2026) ═══════════════════════════
   Enver: "burada renkleri degistiriyorum degismiyor". Panel renkleri bolum
   etiketine --bolum-* olarak yazilir; temanin bolumleri ise renkleri sabit
   yaziyordu. Asagidaki kurallar her sabit rengi o degiskene baglar; alan bos
   birakilirsa tasarimin kendi rengi kalir.
   --et-zemin-s / --et-metin-s: koyu temada ayri secilen renk once gelir. */
.bolum.et-bolum { --et-zemin-s: var(--bolum-zemin); --et-metin-s: var(--bolum-metin); }
:root[data-tema="koyu"] .bolum.et-bolum {
  --et-zemin-s: var(--bolum-zemin-koyu, var(--bolum-zemin)); --et-metin-s: var(--bolum-metin-koyu, var(--bolum-metin));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .bolum.et-bolum {
    --et-zemin-s: var(--bolum-zemin-koyu, var(--bolum-zemin)); --et-metin-s: var(--bolum-metin-koyu, var(--bolum-metin));
  }
}
/* Arka plan */
.bolum.et-bolum { background: var(--et-zemin-s, var(--sira-zemin, transparent)); }
.bolum.et-bolum .et-kahraman { background: var(--et-zemin-s, #fff); }
.bolum.et-bolum .et-slayt { background-color: var(--et-zemin-s, transparent); }
.bolum.et-bolum .et-panel-zemin {
  background:
    linear-gradient(125deg, transparent 30%, rgba(40, 70, 140, .25) 30% 46%, transparent 46% 58%, rgba(40, 70, 140, .18) 58% 70%, transparent 70%),
    var(--et-zemin-s, var(--et-lacivert));
}
.bolum.et-bolum .et-koyu-zemin { background: var(--et-zemin-s, linear-gradient(180deg, #012a5c, #000 85%)); }
.bolum.et-bolum.et-acik { background: var(--et-zemin-s, linear-gradient(180deg, #f4f4f5, #e9e9eb 60%, #f6f6f7)) !important; color: var(--et-metin-s, #10213b); }
:root[data-tema="koyu"] .bolum.et-bolum.et-acik { background: var(--et-zemin-s, linear-gradient(180deg, #0d1424, #0a101d)) !important; color: var(--et-metin-s, #e6edf7); }
.bolum.et-bolum.et-sss-zemin { background: var(--et-zemin-s, linear-gradient(90deg, #00499a, #002a5c 45%, #000 100%)) !important; color: var(--et-metin-s, #fff); }
/* Vurgu: serit bandi, vurgulu kelimeler, ana dugme, adim numaralari */
.bolum.et-bolum .et-serit { background: var(--bolum-vurgu, linear-gradient(90deg, #014a8f, #0a86d6 50%, #014a8f)); }
.bolum.et-bolum .et-vurgu { color: var(--bolum-vurgu, var(--et-mavi)); }
.bolum.et-bolum .et-serit .et-vurgu { color: var(--bolum-baslik, var(--et-mavi)); }
.bolum.et-bolum .et-dugme-ana { background: var(--bolum-vurgu, linear-gradient(90deg, #003b7a, #0a7ad6)); }
.bolum.et-bolum .et-adim-no { color: var(--bolum-vurgu, #2ec8ff); }
.bolum.et-bolum .et-ilt-baslik { color: var(--bolum-baslik, var(--bolum-vurgu, #2f6bff)); }
/* Baslik */
.bolum.et-bolum .et-kahraman-baslik,
.bolum.et-bolum .et-serit-baslik,
.bolum.et-bolum .et-sss-sol h2,
.bolum.et-bolum .et-adim-kart h3 { color: var(--bolum-baslik, #fff); }
.bolum.et-bolum .et-tepe h2,
.bolum.et-bolum .et-cerceve-tepe h3 { color: var(--bolum-baslik, inherit); }
.bolum.et-bolum .et-uyg-yazi strong { color: var(--bolum-baslik, #111); }
:root[data-tema="koyu"] .bolum.et-bolum .et-uyg-yazi strong { color: var(--bolum-baslik, #fff); }
/* Metin */
.bolum.et-bolum .et-kahraman-metin,
.bolum.et-bolum .et-serit p,
.bolum.et-bolum .et-adim-kart p,
.bolum.et-bolum .et-ozel-kart p { color: var(--et-metin-s, rgba(255, 255, 255, .92)); }
.bolum.et-bolum .et-sss-sol p { color: var(--et-metin-s, rgba(255, 255, 255, .62)); }
.bolum.et-bolum .et-cerceve-kart p { color: var(--et-metin-s, #dbe3ef); }
.bolum.et-bolum .et-soru summary { color: var(--et-metin-s, #fff); }
.bolum.et-bolum .et-soru-cevap { color: var(--et-metin-s, #b9c4d6); }
.bolum.et-bolum .et-kart, .bolum.et-bolum .et-ilt-kart { color: var(--et-metin-s, #fff); }
.bolum.et-bolum .et-cerceve-kart { color: var(--et-metin-s, #e8eef7); }
.bolum.et-bolum .et-uyg-yazi small { color: var(--et-metin-s, #1d1d1d); }
:root[data-tema="koyu"] .bolum.et-bolum .et-uyg-yazi small { color: var(--et-metin-s, #b9c4d3); }
.bolum.et-bolum .et-ilt-ust p { color: var(--et-metin-s, #2b2f38); }
:root[data-tema="koyu"] .bolum.et-bolum .et-ilt-ust p { color: var(--et-metin-s, #c2cbd8); }
/* Kart zemini */
.bolum.et-bolum .et-kart { background: var(--bolum-kart, rgba(70, 70, 68, .96)); }
.bolum.et-bolum .et-adim-kart { background: var(--bolum-kart, linear-gradient(110deg, var(--et-renk), #050505 92%)); }
.bolum.et-bolum .et-cerceve-kart { background: var(--bolum-kart, rgba(5, 12, 26, .85)); }
.bolum.et-bolum .et-soru { background: var(--bolum-kart, #0a1226); }
.bolum.et-bolum .et-ilt-kart, .bolum.et-bolum .et-konum-serit { background: var(--bolum-kart, #0b1428); }
.bolum.et-bolum .et-ozel-kart { background: var(--bolum-kart, linear-gradient(180deg, #050b18 55%, #2a3a5e)); }
.bolum.et-bolum .et-uyg-izgara { background: var(--bolum-kart, rgba(170, 170, 170, .55)); }
:root[data-tema="koyu"] .bolum.et-bolum .et-uyg-izgara { background: var(--bolum-kart, rgba(255, 255, 255, .05)); }
/* Kenar */
.bolum.et-bolum .et-cerceve-kart { border-color: var(--bolum-kenar, var(--et-renk)); }
.bolum.et-bolum .et-soru { border-color: var(--bolum-kenar, rgba(80, 120, 255, .25)); }
.bolum.et-bolum .et-uyg-izgara { border-color: var(--bolum-kenar, #1f1f1f); }
.bolum.et-bolum .et-soru[open] { border-color: var(--bolum-vurgu, #3d6dff); }
:root[data-tema="koyu"] .bolum.et-bolum .et-uyg-izgara { border-color: var(--bolum-kenar, #000); }

/* ═══ GIRIS SLAYTI: gecis efektleri ve gosterge cesitleri (17 Eki 2026) ═══
   Degerler bilesenin ayarlarindan: --et-sure, --et-hiz, --et-g-aktif/pasif/zemin, --et-g-olcek, --et-ok */
.et-kahraman { --et-g-aktif: #fff; --et-g-pasif: rgba(255, 255, 255, .35); --et-g-zemin: var(--et-lacivert, #070d1c); --et-g-olcek: 1; --et-ok: #fff; --et-hiz: 700ms; }
.et-kahraman .et-slayt { transition: opacity var(--et-hiz) ease, visibility var(--et-hiz), transform var(--et-hiz) ease; }
/* Kayma */
.et-e-kayma .et-slayt { opacity: 1; transform: translateX(100%); }
.et-e-kayma .et-slayt.etkin { transform: none; }
.et-e-kayma .et-slayt.cikan { visibility: visible; transform: translateX(-100%); }
.et-e-kayma.et-geri .et-slayt:not(.etkin):not(.cikan) { transform: translateX(-100%); }
.et-e-kayma.et-geri .et-slayt.cikan { transform: translateX(100%); }
/* Yakinlasma */
.et-e-yakinlasma .et-slayt { transform: scale(1.08); }
.et-e-yakinlasma .et-slayt.etkin { transform: none; }
/* Efektsiz */
.et-e-yok .et-slayt { transition: none; }

/* Gosterge: ortak */
.et-gosterge { gap: calc(8px * var(--et-g-olcek)); padding: calc(1.1rem * var(--et-g-olcek)) calc(1.4rem * var(--et-g-olcek)); background: var(--et-g-zemin); }
.et-gosterge.et-g-zeminsiz { background: transparent; padding-bottom: 1.4rem; }
.et-gosterge button { position: relative; overflow: hidden; width: calc(96px * var(--et-g-olcek)); height: calc(4px * var(--et-g-olcek)); background: var(--et-g-pasif); transition: background .25s ease, width .3s ease; }
.et-gosterge button[aria-selected="true"] { background: var(--et-g-aktif); }
.et-gosterge button:focus-visible { outline: 2px solid var(--et-g-aktif); outline-offset: 3px; }
/* Konum */
.et-gk-alt-sol { left: max(7.5vw, 1.5rem); transform: none; }
.et-gk-alt-sag { left: auto; right: max(4vw, 1.5rem); transform: none; }
.et-gk-sag { left: auto; right: max(2.5vw, 1rem); top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; border-radius: 999px; }
.et-gk-sag button { width: calc(4px * var(--et-g-olcek)); height: calc(46px * var(--et-g-olcek)); }
/* Nokta */
.et-g-nokta { border-radius: 999px; }
.et-g-nokta button { width: calc(10px * var(--et-g-olcek)); height: calc(10px * var(--et-g-olcek)); border-radius: 999px; }
.et-g-nokta button[aria-selected="true"] { width: calc(28px * var(--et-g-olcek)); }
.et-gk-sag.et-g-nokta button[aria-selected="true"] { width: calc(10px * var(--et-g-olcek)); height: calc(28px * var(--et-g-olcek)); }
/* Numara */
.et-g-sayi { border-radius: 999px; }
.et-g-sayi button { display: grid; place-items: center; width: calc(32px * var(--et-g-olcek)); height: calc(32px * var(--et-g-olcek)); border-radius: 999px; background: transparent; border: 1.5px solid var(--et-g-pasif); color: var(--et-g-pasif); font: 600 calc(.8rem * var(--et-g-olcek)) / 1 var(--et-yazi, inherit); }
.et-g-sayi button[aria-selected="true"] { background: var(--et-g-aktif); border-color: var(--et-g-aktif); color: var(--et-g-zemin); }
/* Sure boyunca dolan cizgi */
.et-g-ilerleme button[aria-selected="true"] { background: var(--et-g-pasif); }
.et-g-ilerleme button[aria-selected="true"]::after { content: ""; position: absolute; inset: 0; transform-origin: left center; background: var(--et-g-aktif); animation: et-dol var(--et-sure, 6s) linear forwards; }
.et-gk-sag.et-g-ilerleme button[aria-selected="true"]::after { transform-origin: center top; animation-name: et-dol-dikey; }
.et-durdu .et-g-ilerleme button[aria-selected="true"]::after { animation-play-state: paused; }
.et-elle .et-g-ilerleme button[aria-selected="true"]::after { animation: none; }
@keyframes et-dol { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes et-dol-dikey { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Oklar */
.et-ok { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border: 1.5px solid color-mix(in srgb, var(--et-ok) 55%, transparent); border-radius: 50%;
  background: color-mix(in srgb, #000 28%, transparent); color: var(--et-ok); cursor: pointer; backdrop-filter: blur(4px); transition: background .2s ease, transform .2s ease; }
.et-ok:hover { background: color-mix(in srgb, #000 45%, transparent); transform: scale(1.06); }
.et-ok svg { width: 20px; height: 20px; }
/* Oklar sag altta yan yana: soldaki kartin ustune binmez */
.et-ok { top: auto; bottom: 1.4rem; margin-top: 0; }
.et-ok-ileri { right: max(2.5vw, 1rem); } .et-ok-geri { right: calc(max(2.5vw, 1rem) + 56px); }
.et-ok-ileri:has(~ .et-gk-alt-sag), .et-ok-geri:has(~ .et-gk-alt-sag) { bottom: 5.2rem; }
.et-ok-ileri:has(~ .et-gk-sag) { right: calc(max(2.5vw, 1rem) + 3rem); } .et-ok-geri:has(~ .et-gk-sag) { right: calc(max(2.5vw, 1rem) + 3rem + 56px); }
@media (max-width: 767px) { .et-ok { width: 38px; height: 38px; } .et-ok-geri { right: calc(max(2.5vw, 1rem) + 46px); } .et-gk-sag { right: .6rem; } }
@media (prefers-reduced-motion: reduce) { .et-kahraman .et-slayt { transition: none; } .et-g-ilerleme button[aria-selected="true"]::after { animation: none; } }
/* Bekleyen slayt yerine gecissiz doner; donerken ekranin onunden gecmesin */
.et-e-kayma .et-slayt:not(.etkin):not(.cikan) { transition: none; visibility: hidden; }

/* ═══ GIRIS SLAYTI: slayt basina tasarim (17 Eki 2026) ═══════════════
   Her slayt kendi kart yeri/bicimi, hiza, baslik boyutu, renkler, dugme bicimi ve
   yazi hareketiyle cizilir. Renk degiskeni olan slaytta o renk, bolumun Gorunum
   renginden (bolum-renk.css) once gelir: :is(#rk, ...) kimlik agirligi ve !important. */
.et-slayt::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--et-karartma, transparent); pointer-events: none; }
.et-slayt .et-kart { position: relative; z-index: 1; background: var(--et-kart-zemin, rgba(70, 70, 68, .96)); }
.bolum.et-bolum .et-slayt .et-kart { background: var(--et-kart-zemin, var(--bolum-kart, rgba(70, 70, 68, .96))); }
/* Ust yazi */
.et-ust-yazi { display: inline-block; margin: 0 0 .9rem; padding: .3rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--et-ust-yazi, var(--et-mavi, #0aa5e8)); background: color-mix(in srgb, var(--et-ust-yazi, var(--et-mavi, #0aa5e8)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--et-ust-yazi, var(--et-mavi, #0aa5e8)) 35%, transparent); }
/* Kart yeri */
.et-slayt.et-ky-orta { justify-content: center; }
.et-slayt.et-ky-sag { justify-content: flex-end; }
.et-ky-orta .et-kart { border-radius: 36px; padding-left: clamp(1.5rem, 3vw, 3rem); margin-inline: 1rem; }
.et-ky-sag .et-kart { border-radius: 56px 0 0 56px; padding-left: clamp(1.5rem, 3vw, 3rem); padding-right: max(7.5vw, 1.5rem); }
/* Hiza */
.et-hz-orta .et-kart { text-align: center; } .et-hz-orta .et-dugmeler { justify-content: center; }
.et-hz-sag .et-kart { text-align: right; } .et-hz-sag .et-dugmeler { justify-content: flex-end; }
/* Kart bicimi */
.et-kb-acik .et-kart { --et-kart-zemin-v: rgba(255, 255, 255, .96); }
.bolum.et-bolum .et-slayt.et-kb-acik .et-kart { background: var(--et-kart-zemin, rgba(255, 255, 255, .96)); box-shadow: 0 30px 60px rgba(15, 30, 60, .16); }
.bolum.et-bolum .et-slayt.et-kb-acik .et-kahraman-baslik { color: var(--et-baslik, #10213b); }
.bolum.et-bolum .et-slayt.et-kb-acik .et-kahraman-metin { color: var(--et-metin, #3b4456); }
.bolum.et-bolum .et-slayt.et-kb-cam .et-kart { background: var(--et-kart-zemin, rgba(255, 255, 255, .14)); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 30px 60px rgba(0, 0, 0, .22); }
.bolum.et-bolum .et-slayt.et-kb-kartsiz .et-kart { background: transparent; box-shadow: none; }
.et-kb-kartsiz .et-kahraman-baslik, .et-kb-kartsiz .et-kahraman-metin { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
/* Baslik boyutu */
.et-bb-kucuk .et-kahraman-baslik { font-size: clamp(1.7rem, 3.1vw, 2.4rem); }
.et-bb-buyuk .et-kahraman-baslik { font-size: clamp(2.6rem, 5.2vw, 4.2rem); }
.et-bb-dev .et-kahraman-baslik { font-size: clamp(3rem, 6.8vw, 5.6rem); line-height: 1.02; }
.et-bb-dev .et-kart, .et-bb-buyuk .et-kart { width: min(720px, 94%); }
/* Slayt rengi bolum renginden once gelir */
.bolum.et-bolum .et-slayt .et-kahraman-baslik { color: var(--et-baslik, var(--bolum-baslik, #fff)); }
.bolum.et-bolum .et-slayt .et-kahraman-metin { color: var(--et-metin, var(--et-metin-s, rgba(255, 255, 255, .92))); }
.bolum.et-bolum .et-slayt .et-vurgu { color: var(--et-vurgu-s, var(--bolum-vurgu, var(--et-mavi))); }
:is(#rk, .et-slayt)[style*="--et-baslik"] .et-kahraman-baslik { color: var(--et-baslik) !important; }
:is(#rk, .et-slayt)[style*="--et-metin"] .et-kahraman-metin { color: var(--et-metin) !important; }
:is(#rk, .et-slayt)[style*="--et-vurgu-s"] .et-vurgu { color: var(--et-vurgu-s) !important; }
:is(#rk, .et-slayt)[style*="--et-kart-zemin"] .et-kart { background: var(--et-kart-zemin) !important; }
/* Dugme bicimleri */
.et-dugme-cerceve { background: transparent; color: var(--et-d-renk, var(--et-baslik, #fff)); border: 1.5px solid currentColor; }
.et-kb-acik .et-dugme-cerceve { color: var(--et-d-renk, var(--et-baslik, #10213b)); }
.et-dugme-yalin { background: transparent; color: var(--et-d-renk, var(--et-baslik, #fff)); padding-inline: .2rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.et-kb-acik .et-dugme-yalin { color: var(--et-d-renk, var(--et-baslik, #10213b)); }
.et-dugme-ana[style*="--et-d-renk"] { background: var(--et-d-renk); box-shadow: 0 8px 22px color-mix(in srgb, var(--et-d-renk) 40%, transparent); }
.et-dugme-beyaz[style*="--et-d-renk"] { background: var(--et-d-renk); }
/* Yazi hareketi: etkin slaytin kartindakiler sirayla belirir */
.et-slayt.etkin.et-yh-yukari .et-kart > * { animation: et-yukari .7s cubic-bezier(.2, .7, .2, 1) both; }
.et-slayt.etkin.et-yh-solma .et-kart > * { animation: et-sol .8s ease both; }
.et-slayt.etkin .et-kart > :nth-child(2) { animation-delay: .08s; }
.et-slayt.etkin .et-kart > :nth-child(3) { animation-delay: .16s; }
.et-slayt.etkin .et-kart > :nth-child(4) { animation-delay: .24s; }
.et-slayt.etkin .et-kart > :nth-child(5) { animation-delay: .32s; }
@keyframes et-yukari { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes et-sol { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) {
  .et-ky-sag .et-kart, .et-ky-orta .et-kart { border-radius: 28px; margin-inline: .75rem; padding: 1.6rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .et-slayt.etkin .et-kart > * { animation: none !important; } }
/* Slayt dugmesine verilen renk, bolumun vurgu kuralindan once gelir */
:is(#rk, .et-dugme)[style*="--et-d-renk"].et-dugme-ana, :is(#rk, .et-dugme)[style*="--et-d-renk"].et-dugme-beyaz { background: var(--et-d-renk) !important; border-color: var(--et-d-renk) !important; }

/* Slayt basina yazi tipi, punto, kalinlik, dikey yer ve kart genisligi (17 Eki 2026) */
:is(#rk, .et-slayt)[style*="--et-slayt-yazi"] .et-kart, :is(#rk, .et-slayt)[style*="--et-slayt-yazi"] .et-kart :is(h1, h2, p, a, span) { font-family: var(--et-slayt-yazi) !important; }
:is(#rk, .et-slayt)[style*="--et-baslik-px"] .et-kahraman-baslik { font-size: min(var(--et-baslik-px), 11vw) !important; }
:is(#rk, .et-slayt)[style*="--et-metin-px"] .et-kahraman-metin { font-size: min(var(--et-metin-px), 5.5vw) !important; }
:is(#rk, .et-slayt)[style*="--et-baslik-kalinlik"] .et-kahraman-baslik { font-weight: var(--et-baslik-kalinlik) !important; }
.et-slayt.et-dk-ust { align-items: flex-start; padding-top: clamp(1.5rem, 5vh, 3.5rem); }
.et-slayt.et-dk-alt { align-items: flex-end; padding-bottom: clamp(4.5rem, 10vh, 6.5rem); }
.et-kg-dar .et-kart { width: min(460px, 92%); }
.et-kg-genis .et-kart { width: min(780px, 94%); }
/* Telefonda cizgiler ekrana sigar: genislik slayt sayisina paylastirilir */
@media (max-width: 767px) {
  .et-gosterge.et-g-cizgi:not(.et-gk-sag), .et-gosterge.et-g-ilerleme:not(.et-gk-sag) { left: 1rem; right: 1rem; transform: none; padding: .8rem 1rem; }
  .et-gosterge.et-g-cizgi:not(.et-gk-sag) button, .et-gosterge.et-g-ilerleme:not(.et-gk-sag) button { flex: 1 1 0; width: auto; min-width: 0; }
}

/* Nokta gostergesi: nokta 10px gorunur, dokunma alani 24px (saydam kenar) - erisilebilirlik hedef boyutu */
.et-g-nokta button { box-sizing: content-box; border: 7px solid transparent !important; background-clip: padding-box !important; }
.et-g-nokta { gap: 0 !important; }

/* Etesio alt bilgisi renkleri (17 Eki 2026, panel: Alt bilgi > Renkler). Degisken yoksa kural calismaz. */
.et-alt[style*="--et-alt-bosluk"] { margin-top: var(--et-alt-bosluk) !important; }
.et-alt[style*="--et-alt-serit-zemin"] { margin-top: 0 !important; padding-top: var(--et-alt-bosluk, var(--aralik-8, 48px)) !important; background: var(--et-alt-serit-zemin) !important; }
.et-alt[style*="--et-alt-yazi"] { color: var(--et-alt-yazi); }
.et-alt[style*="--et-alt-yazi"] :is(.et-alt-marka p, .et-alt-ofis span, .et-alt-sutun a, .alt-serit p, .guven-baslik) { color: var(--et-alt-yazi) !important; }
.et-alt[style*="--et-alt-baslik"] :is(.et-alt-sutun h3, .et-alt-ofis strong) { color: var(--et-alt-baslik) !important; }
.et-alt[style*="--et-alt-vurgu"] :is(.et-alt-sutun a:hover, .et-alt-sutun a:focus-visible, .et-alt-ofis svg, .et-alt-sosyal a) { color: var(--et-alt-vurgu) !important; }

/* Alt bilgide sosyal sutunu (17 Eki 2026) */
.et-alt-sosyal-sutun .et-alt-sosyal { margin-top: 0; }

/* Alt bilgi her temada lacivert: icindeki yasal baglantilar, kunye ve surum rozeti
   sitenin acik tema metin rengini almasin (17 Eki 2026, acik temada okunmuyordu) */
.et-alt .odeme-yasal a, .et-alt .odeme-kunye, .et-alt .odeme-baslik { color: var(--et-alt-yazi, #aab6c8); }
.et-alt .odeme-kunye strong, .et-alt .odeme-kunye b { color: var(--et-alt-baslik, #d5dce8); }
.et-alt .odeme-yasal a:hover, .et-alt .odeme-yasal a:focus-visible { color: var(--et-alt-vurgu, #f5a10a); }
.et-alt .surum-rozet { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--et-alt-yazi, #aab6c8); }

/* bolumler-gelismis.css */
/* ═══════════════════════════════════════════════════════════════════
   GELISMIS BOLUMLER (16 Eki 2026) — api/bilesenler-gelismis.js
   Renkler sitenin belirteclerinden gelir; acik/koyu temaya kendiliginden uyar.
   Bolum bazinda: --bolum-vurgu (vurgu), --bolum-kart (kart zemini), --bolum-kose.
   ═══════════════════════════════════════════════════════════════════ */
.bg-bolum {
  --bg-vurgu: var(--bolum-vurgu, var(--ana));
  --bg-kart: var(--bolum-kart, var(--kart));
  --bg-kose: var(--bolum-kose, var(--kose-buyuk, 16px));
  --bg-kenar: var(--bolum-kenar, var(--kenar));
  /* Dolu zemin (uzerinde beyaz yazi): koyu temada vurgu acik lila oldugu icin koyulastirilir */
  --bg-dolgu: var(--bg-vurgu);
}
:root[data-tema="koyu"] .bg-bolum { --bg-dolgu: color-mix(in srgb, var(--bg-vurgu) 55%, #000); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .bg-bolum { --bg-dolgu: color-mix(in srgb, var(--bg-vurgu) 55%, #000); } }
.bg-vurgu { color: var(--bg-vurgu); }
.bg-tepe { margin: 0 0 clamp(1.8rem, 4vw, 3rem); max-width: 760px; }
.bg-tepe-orta { margin-inline: auto; text-align: center; }
.bg-etiket { display: inline-block; margin: 0 0 .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bg-vurgu); }
.bg-baslik { margin: 0 0 .7rem; font-family: var(--yazi-baslik); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; color: var(--bolum-baslik, inherit); }
.bg-alt { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--metin-2); }
.bg-dugmeler { display: flex; flex-wrap: wrap; gap: .8rem; }
.bg-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.5rem;
  border-radius: var(--kose-tam, 999px); font-weight: 600; text-decoration: none; border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bg-dugme svg { width: 17px; height: 17px; }
.bg-dugme:hover { transform: translateY(-1px); }
.bg-dugme-ana { background: var(--bg-dolgu); color: #fff; }
.bg-dugme-ana:hover { filter: brightness(1.08); }
.bg-dugme-cizgi { border-color: currentColor; color: var(--metin); }
.bg-dugme-cizgi:hover { background: var(--metin); color: var(--zemin); border-color: var(--metin); }
.bg-dugme-beyaz { background: #fff; color: #0f1e33; }
.bg-dugme-cizgi-beyaz { border-color: rgba(255,255,255,.7); color: #fff; }
.bg-dugme-cizgi-beyaz:hover { background: #fff; color: #0f1e33; }
.bg-tikli { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .6rem; }
.bg-tikli li { display: flex; gap: .6rem; align-items: flex-start; }
.bg-tikli svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--bg-vurgu) 15%, transparent); color: var(--bg-vurgu); margin-top: 2px; }
.bg-tikli-iki { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.bg-bolum img { max-width: 100%; display: block; }
.bg-zeminli { color: #fff; }

/* ── 1. Gelismis giris ───────────────────────────── */
.bg-k-sar { padding: 0 !important; }
.bg-k-sar .kapsayici { padding: 0 !important; max-width: none; }
.bg-k { position: relative; display: flex; align-items: center; overflow: hidden; }
.bg-k-boy-orta { min-height: clamp(460px, 68vh, 760px); }
.bg-k-boy-tam { min-height: calc(100svh - var(--tepe-yukseklik, 72px)); }
.bg-k-boy-kisa { min-height: clamp(320px, 42vh, 460px); }
.bg-k-ic { position: relative; z-index: 2; width: min(100% - 2.5rem, var(--kapsayici, 1200px)); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 0; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bg-k-baslik { margin: 0 0 1.1rem; font-family: var(--yazi-baslik); font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 1.06; letter-spacing: -.03em; }
.bg-k-metin { margin: 0 0 1.8rem; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.65; color: var(--metin-2); max-width: 620px; }
.bg-k-ortali .bg-k-yazi { text-align: center; max-width: 900px; margin: 0 auto; }
.bg-k-ortali .bg-k-metin { margin-inline: auto; }
.bg-k-ortali .bg-dugmeler { justify-content: center; }
.bg-k-ortali { background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--bg-vurgu) 14%, transparent), transparent 70%); }
.bg-k-bolunmus .bg-k-ic { grid-template-columns: 1.05fr 1fr; }
.bg-k-gorsel img, .bg-k-bos { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: calc(var(--bg-kose) * 1.5); box-shadow: var(--golge-3); }
.bg-k-bos { background: linear-gradient(135deg, color-mix(in srgb, var(--bg-vurgu) 70%, #000), var(--bg-vurgu)); }
.bg-k-zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bg-k-ortu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,10,25,var(--bg-karartma,.55)), rgba(5,10,25,calc(var(--bg-karartma,.55) * .55))); }
.bg-k-karartmali, .bg-k-video { background: #0b1430; color: #fff; }
.bg-k-karartmali .bg-k-metin, .bg-k-video .bg-k-metin { color: rgba(255,255,255,.88); }
.bg-k-karartmali .bg-k-yazi, .bg-k-video .bg-k-yazi { max-width: 720px; }
.bg-daktilo { color: var(--bg-vurgu); white-space: nowrap; }
.bg-daktilo::after { content: ""; display: inline-block; width: .06em; height: .9em; margin-left: .06em; vertical-align: -.05em; background: currentColor; animation: bg-imlec 1s steps(1) infinite; }
@keyframes bg-imlec { 50% { opacity: 0; } }

/* ── 2. Zaman cizelgesi ──────────────────────────── */
.bg-zc { list-style: none; margin: 0; padding: 0; position: relative; }
.bg-zc-kart { background: var(--bg-kart); border: 1px solid var(--bg-kenar); border-radius: var(--bg-kose); padding: 1.4rem 1.5rem; box-shadow: var(--golge-1); }
.bg-zc-kart h3 { margin: .35rem 0 .4rem; font-size: 1.15rem; }
.bg-zc-kart p { margin: 0; color: var(--metin-2); line-height: 1.6; }
.bg-zc-gorsel { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--bg-kose) * .6); margin-bottom: .9rem; }
.bg-zc-tarih { display: inline-block; font-weight: 800; font-size: .85rem; letter-spacing: .06em; color: var(--bg-vurgu); }
.bg-zc-nokta { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-dolgu); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg-vurgu) 22%, transparent); }
.bg-zc-zikzak::before, .bg-zc-sol::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bg-kenar); }
.bg-zc-zikzak::before { left: 50%; transform: translateX(-50%); }
.bg-zc-zikzak .bg-zc-oge { position: relative; width: 50%; padding: 0 2.5rem 2rem 0; }
.bg-zc-zikzak .bg-zc-oge:nth-child(even) { margin-left: 50%; padding: 0 0 2rem 2.5rem; }
.bg-zc-zikzak .bg-zc-nokta { top: 1.4rem; right: -8px; }
.bg-zc-zikzak .bg-zc-oge:nth-child(even) .bg-zc-nokta { left: -8px; right: auto; }
.bg-zc-zikzak .bg-zc-oge:nth-child(odd) .bg-zc-kart { text-align: right; }
.bg-zc-sol { padding-left: 2.5rem; }
.bg-zc-sol::before { left: 7px; }
.bg-zc-sol .bg-zc-oge { position: relative; padding-bottom: 1.6rem; }
.bg-zc-sol .bg-zc-nokta { left: calc(-2.5rem); top: 1.4rem; }
.bg-zc-yatay { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1.5rem; overflow-x: auto; padding: 2.2rem .2rem 1rem; scroll-snap-type: x mandatory; }
.bg-zc-yatay::before { content: ""; position: absolute; left: 0; right: 0; top: calc(2.2rem - 9px); height: 2px; background: var(--bg-kenar); }
.bg-zc-yatay .bg-zc-oge { position: relative; scroll-snap-align: start; }
.bg-zc-yatay .bg-zc-nokta { top: -1.65rem; left: 1.4rem; }
.bg-zc-yillar { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 1.6rem; }
.bg-zc-yillar button { border: 0; background: none; padding: .5rem 1.1rem; font: inherit; font-weight: 800; font-size: 1.15rem; color: var(--metin-3); border-bottom: 3px solid transparent; cursor: pointer; }
.bg-zc-yillar button[aria-selected="true"] { color: var(--bg-vurgu); border-color: var(--bg-vurgu); }
.bg-zc-sekme .bg-zc-kart { max-width: 760px; margin: 0 auto; }

/* ── 3. Portfolyo ────────────────────────────────── */
.bg-pf-suzgec { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.8rem; }
.bg-pf-suzgec button { border: 1px solid var(--bg-kenar); background: none; color: var(--metin-2); padding: .5rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.bg-pf-suzgec button[aria-pressed="true"] { background: var(--bg-dolgu); border-color: var(--bg-vurgu); color: #fff; }
.bg-pf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(var(--bg-sutun, 3), minmax(0, 1fr)); }
.bg-sutun-2 { --bg-sutun: 2; } .bg-sutun-3 { --bg-sutun: 3; } .bg-sutun-4 { --bg-sutun: 4; }
.bg-pf-oge[hidden] { display: none; }
.bg-pf-kart { position: relative; display: block; overflow: hidden; border-radius: var(--bg-kose); aspect-ratio: 4 / 3; color: #fff; text-decoration: none; background: var(--zemin-3); }
.bg-pf-kart img, .bg-pf-bos { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.bg-pf-bos { display: block; background: linear-gradient(135deg, color-mix(in srgb, var(--bg-vurgu) 55%, #0b1430), color-mix(in srgb, var(--bg-vurgu) 20%, #0b1430)); }
.bg-pf-oge:nth-child(3n+2) .bg-pf-bos { background: linear-gradient(135deg, #1f2a44, color-mix(in srgb, var(--bg-vurgu) 60%, #1f2a44)); }
.bg-pf-yazi { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.2rem; display: grid; gap: .2rem; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); transition: opacity .3s ease, transform .3s ease; }
.bg-pf-yazi small { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.bg-pf-yazi strong { font-size: 1.1rem; }
.bg-pf-efekt-karart .bg-pf-yazi { inset: 0; align-content: end; background: rgba(5,10,25,.62); opacity: 0; }
.bg-pf-efekt-karart .bg-pf-kart:hover .bg-pf-yazi, .bg-pf-efekt-karart .bg-pf-kart:focus-visible .bg-pf-yazi { opacity: 1; }
.bg-pf-efekt-yaklas .bg-pf-kart:hover img, .bg-pf-efekt-yaklas .bg-pf-kart:hover .bg-pf-bos { transform: scale(1.08); }
.bg-pf-efekt-kayan .bg-pf-yazi { transform: translateY(100%); }
.bg-pf-efekt-kayan .bg-pf-kart:hover .bg-pf-yazi, .bg-pf-efekt-kayan .bg-pf-kart:focus-visible .bg-pf-yazi { transform: none; }
@media (hover: none) { .bg-pf-efekt-karart .bg-pf-yazi { opacity: 1; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent 60%); } .bg-pf-efekt-kayan .bg-pf-yazi { transform: none; } }
.bg-pf-mozaik { grid-auto-rows: 200px; grid-auto-flow: dense; }
.bg-pf-mozaik .bg-pf-kart { aspect-ratio: auto; height: 100%; }
.bg-pf-mozaik .bg-pf-oge:nth-child(6n+1) { grid-row: span 2; }
.bg-pf-mozaik .bg-pf-oge:nth-child(6n+4) { grid-column: span 2; }
.bg-pf-kaydir { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 380px); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
.bg-pf-kaydir .bg-pf-oge { scroll-snap-align: start; }

/* ── 4. Kayan yazi ───────────────────────────────── */
.bg-ky-sar { padding-block: var(--bolum-ust, 2.5rem) var(--bolum-alt, 2.5rem) !important; overflow: hidden; }
.bg-ky-sar .kapsayici { padding: 0 !important; }
.bg-ky { --bg-ky-sure: 30s; overflow: hidden; }
.bg-ky-serit { display: flex; width: max-content; }
.bg-ky-akis { display: flex; flex: none; align-items: center; gap: 2.2rem; padding-right: 2.2rem; animation: bg-ky-akis var(--bg-ky-sure) linear infinite; }
.bg-ky-saga .bg-ky-akis, .bg-ky-ters .bg-ky-akis { animation-direction: reverse; }
.bg-ky-saga .bg-ky-ters .bg-ky-akis { animation-direction: normal; }
.bg-ky span { font-family: var(--yazi-baslik); font-weight: 800; font-size: clamp(1.6rem, 4vw, 3rem); letter-spacing: -.02em; white-space: nowrap; }
.bg-ky-ayrac { font-style: normal; color: var(--bg-vurgu); font-size: clamp(1.2rem, 2.5vw, 2rem); }
.bg-ky-dishat span { font-size: clamp(2.6rem, 8vw, 6.5rem); color: transparent; -webkit-text-stroke: 1.5px var(--metin); }
.bg-ky-dishat span:nth-child(4n+1) { color: var(--metin); -webkit-text-stroke: 0; }
.bg-ky-capraz { padding: 2.5rem 0; }
.bg-ky-capraz .bg-ky-serit { background: var(--bg-dolgu); color: #fff; padding: .9rem 0; transform: rotate(-2.5deg); margin: 0 -2%; width: max(104%, max-content); }
.bg-ky-capraz .bg-ky-serit .bg-ky-ayrac { color: inherit; }
.bg-ky-capraz .bg-ky-ters { background: var(--metin); color: var(--zemin); transform: rotate(2deg); margin-top: .6rem; }
@keyframes bg-ky-akis { to { transform: translateX(-100%); } }
.bg-ky:hover .bg-ky-akis { animation-play-state: paused; }

/* ── 5. Fiyat tablosu ────────────────────────────── */
.bg-ft-gecis { display: flex; width: max-content; margin: 0 auto 2.2rem; padding: 5px; border-radius: 999px; background: var(--zemin-3, rgba(127,127,127,.12)); border: 1px solid var(--bg-kenar); }
.bg-ft-gecis button { border: 0; background: none; color: var(--metin-2); padding: .6rem 1.3rem; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.bg-ft-gecis button em { font-style: normal; font-size: .75rem; padding: .15rem .5rem; margin-left: .3rem; border-radius: 999px; background: color-mix(in srgb, var(--bg-vurgu) 18%, transparent); color: var(--bg-vurgu); }
.bg-ft-gecis button[aria-pressed="true"] { background: var(--bg-kart); color: var(--metin); box-shadow: var(--golge-1); }
.bg-ft { display: grid; gap: 1.4rem; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.bg-ft-n2 { max-width: 820px; margin: 0 auto; }
.bg-ft-kart { position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: 2rem 1.7rem; background: var(--bg-kart); border: 1px solid var(--bg-kenar); border-radius: calc(var(--bg-kose) * 1.25); }
.bg-ft-kart header h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.bg-ft-kart header p { margin: 0; color: var(--metin-2); font-size: .92rem; }
.bg-ft-fiyat { font-family: var(--yazi-baslik); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.bg-ft-fiyat > span[hidden] { display: none; }
.bg-ft-para { font-size: .55em; vertical-align: .55em; margin-right: .1em; }
.bg-ft-yazi { font-size: .62em; }
.bg-ft-fiyat small { display: block; margin-top: .45rem; font-family: inherit; font-size: .85rem; font-weight: 500; letter-spacing: 0; color: var(--metin-3); }
.bg-ft-liste { list-style: none; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--bg-kenar); display: grid; gap: .65rem; flex: 1; align-content: start; }
.bg-ft-liste li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; }
.bg-ft-liste svg { flex: none; width: 18px; height: 18px; color: var(--bg-vurgu); margin-top: 2px; }
.bg-ft-yok { color: var(--metin-3); } .bg-ft-yok > span { width: 18px; text-align: center; }
.bg-ft-kart .bg-dugme { width: 100%; }
.bg-ft-one { border: 2px solid var(--bg-vurgu); box-shadow: 0 18px 40px color-mix(in srgb, var(--bg-vurgu) 22%, transparent); }
.bg-ft-rozet { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: .35rem .9rem; border-radius: 999px; background: var(--bg-dolgu); color: #fff; font-size: .75rem; font-weight: 700; }
.bg-ft-d-vurgulu .bg-ft-one { background: #0b1430; color: #fff; border-color: #0b1430; transform: scale(1.04); z-index: 1; }
.bg-ft-d-vurgulu .bg-ft-one header p, .bg-ft-d-vurgulu .bg-ft-one .bg-ft-fiyat small { color: rgba(255,255,255,.72); }
.bg-ft-d-vurgulu .bg-ft-one .bg-ft-liste { border-color: rgba(255,255,255,.15); }
:root[data-tema="koyu"] .bg-ft-d-vurgulu .bg-ft-one { background: var(--bg-dolgu); border-color: var(--bg-vurgu); }
:root[data-tema="koyu"] .bg-ft-d-vurgulu .bg-ft-one svg { color: #fff; }
:root[data-tema="koyu"] .bg-ft-d-vurgulu .bg-ft-one .bg-dugme-ana { background: #fff; color: #0b1430; }
.bg-ft-d-yatay { grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; }
.bg-ft-d-yatay .bg-ft-kart { display: grid; grid-template-columns: 1.1fr .9fr 1.4fr auto; align-items: center; gap: 1.5rem; padding: 1.5rem 1.7rem; }
.bg-ft-d-yatay .bg-ft-liste { border: 0; padding: 0; grid-template-columns: 1fr 1fr; }
.bg-ft-d-yatay .bg-ft-kart .bg-dugme { width: auto; }
.bg-ft-d-yatay .bg-ft-rozet { left: 1.7rem; transform: translateY(-50%); }
.bg-ft-not { text-align: center; margin: 1.6rem 0 0; color: var(--metin-3); font-size: .88rem; }

/* ── 6. Yorumlar ─────────────────────────────────── */
.bg-y-kart { margin: 0; height: 100%; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.8rem; background: var(--bg-kart); border: 1px solid var(--bg-kenar); border-radius: var(--bg-kose); }
.bg-y-kart blockquote { margin: 0; flex: 1; font-size: 1.02rem; line-height: 1.7; }
.bg-y-kart figcaption { display: flex; align-items: center; gap: .8rem; }
.bg-y-kart figcaption strong { display: block; } .bg-y-kart figcaption small { color: var(--metin-3); }
.bg-y-kart figcaption img, .bg-y-bas { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.bg-y-bas { display: inline-grid; place-items: center; background: color-mix(in srgb, var(--bg-vurgu) 18%, transparent); color: var(--bg-vurgu); font-weight: 800; }
.bg-y-puan { display: flex; gap: 2px; color: #f5a10a; } .bg-y-puan svg { width: 18px; height: 18px; }
.bg-kr { position: relative; }
.bg-kr-pencere { overflow: hidden; }
.bg-kr-ray { display: flex; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bg-kr-oge { flex: 0 0 100%; padding: 0 .6rem; }
.bg-y-uclu .bg-kr-oge { flex-basis: calc(100% / 3); }
.bg-y-tek .bg-y-kart, .bg-y-avatar .bg-y-kart { max-width: 820px; margin: 0 auto; text-align: center; align-items: center; background: none; border: 0; }
.bg-y-tek blockquote, .bg-y-avatar blockquote { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.5; font-weight: 500; }
.bg-y-tek blockquote::before { content: "“"; display: block; font-size: 4rem; line-height: .6; color: var(--bg-vurgu); font-family: Georgia, serif; }
.bg-y-avatar figcaption > img, .bg-y-avatar figcaption > .bg-y-bas { display: none; }
.bg-kr-oklar { display: flex; justify-content: center; gap: .6rem; margin-top: 1.4rem; }
.bg-kr-oklar button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--bg-kenar); background: var(--bg-kart); color: var(--metin); display: grid; place-items: center; cursor: pointer; }
.bg-kr-oklar button:hover { background: var(--bg-dolgu); color: #fff; border-color: var(--bg-vurgu); }
.bg-kr-oklar svg { width: 18px; height: 18px; }
.bg-y-avatarlar { display: flex; justify-content: center; gap: .8rem; margin-bottom: 1.2rem; }
.bg-y-avatarlar button { padding: 3px; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; opacity: .55; transition: opacity .2s, transform .2s, border-color .2s; }
.bg-y-avatarlar button[aria-selected="true"] { opacity: 1; border-color: var(--bg-vurgu); transform: scale(1.12); }
.bg-y-avatarlar img, .bg-y-avatarlar .bg-y-bas { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.bg-y-duvar { columns: 3 280px; column-gap: 1.2rem; }
.bg-y-duvar .bg-y-kart { break-inside: avoid; margin-bottom: 1.2rem; height: auto; }

/* ── 7. Sayaclar ─────────────────────────────────── */
.bg-sy { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.bg-sy li { display: grid; gap: .35rem; justify-items: center; text-align: center; }
.bg-sy-sayi { font-family: var(--yazi-baslik); font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bg-sy-etiket { color: var(--metin-2); font-weight: 500; }
.bg-sy-simge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg-vurgu) 15%, transparent); color: var(--bg-vurgu); }
.bg-sy-simge svg { width: 24px; height: 24px; }
.bg-sy-bant { background: var(--bg-dolgu); color: #fff; border-radius: calc(var(--bg-kose) * 1.4); padding: clamp(2rem, 4vw, 3rem) 1.5rem; }
.bg-sy-bant li + li { border-left: 1px solid rgba(255,255,255,.22); }
.bg-sy-bant .bg-sy-etiket { color: rgba(255,255,255,.85); }
.bg-sy-bant .bg-sy-simge { background: rgba(255,255,255,.16); color: #fff; }
.bg-sy-sar-tasan { padding-top: 0 !important; }
.bg-sy-tasan { margin-top: -3.5rem; position: relative; z-index: 2; }
.bg-sy-tasan li, .bg-sy-merdiven li { background: var(--bg-kart); border: 1px solid var(--bg-kenar); border-radius: var(--bg-kose); padding: 1.8rem 1.2rem; box-shadow: var(--golge-2); }
.bg-sy-merdiven { align-items: end; }
.bg-sy-merdiven li:nth-child(2) { transform: translateY(-1.2rem); } .bg-sy-merdiven li:nth-child(3) { transform: translateY(-2.4rem); } .bg-sy-merdiven li:nth-child(4) { transform: translateY(-3.6rem); }
.bg-sy-merdiven li:nth-child(even) { background: var(--bg-dolgu); color: #fff; border-color: var(--bg-vurgu); }
.bg-sy-merdiven li:nth-child(even) .bg-sy-etiket { color: rgba(255,255,255,.85); }
.bg-sy-buyuk { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; }
.bg-sy-buyuk li { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; column-gap: 1rem; padding: 1.4rem 1.2rem; border-top: 1px solid var(--bg-kenar); }
.bg-sy-buyuk .bg-sy-simge { grid-row: span 2; display: none; }
.bg-sy-buyuk .bg-sy-sayi { font-size: clamp(3rem, 7vw, 5rem); color: var(--bg-vurgu); }
@media (max-width: 640px) { .bg-sy-bant li + li { border-left: 0; } .bg-sy-merdiven li { transform: none !important; } .bg-sy-tasan { margin-top: -2rem; } }

/* ── 8. Logo duvari ──────────────────────────────── */
/* Olculer .bg-ld-sar uzerindeki degiskenlerden gelir; icerik ayarlari (19 Eki 2026) inline yazar */
/* Genislik siniri ve kutu yuksekligi logo yuksekligine bagli: yukseklik artinca logo da gercekten buyur */
.bg-ld-sar { --ld-y: 46px; --ld-g: calc(var(--ld-y) * 3.3); --ld-ara: 1rem; --ld-kutu-y: calc(var(--ld-y) + 46px); --ld-ic: 1rem; --ld-hiz: 40s; --ld-soluk: .6; }
.bg-ld-sar-kayan { --ld-ara: 3.5rem; }
.bg-ld { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--ld-g) + 2 * var(--ld-ic))), 1fr)); gap: var(--ld-ara); }
.bg-ld-sutunlu .bg-ld { grid-template-columns: repeat(var(--ld-sutun), minmax(0, 1fr)); }
.bg-ld li, .bg-ld-akis li { position: relative; display: grid; place-items: center; min-height: var(--ld-kutu-y); }
.bg-ld-ic { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ld-yazi-kenar, 8px); width: 100%; height: 100%; color: var(--metin-2); text-decoration: none; }
.bg-ld-gorsel { position: relative; display: block; max-width: 100%; line-height: 0; }
.bg-ld-ad { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; transition: opacity .25s; }
.bg-ld img, .bg-ld-akis img { display: block; height: auto; max-height: calc(var(--ld-y) * var(--ld-olcek, 1)); max-width: calc(var(--ld-g) * var(--ld-olcek, 1)); width: auto; object-fit: contain; transition: filter .25s, opacity .25s, transform .25s; }
/* Kutu */
.bg-ld-k-cerceve li, .bg-ld-k-dolu li, .bg-ld-k-golge li { border-radius: var(--ld-kose, var(--bg-kose)); background: var(--ld-kutu-zemin, var(--bg-kart)); padding: var(--ld-ic); overflow: hidden; }
.bg-ld-k-cerceve li { border: 1px solid var(--ld-kutu-kenar, var(--bg-kenar)); }
.bg-ld-k-golge li { box-shadow: var(--golge-2, 0 6px 20px rgba(0,0,0,.08)); }
.bg-ld-k-golge .bg-ld-kayan { padding-block: 1rem; }
.bg-ld-sar-kayan:not(.bg-ld-k-yok) .bg-ld-akis li { min-width: calc(var(--ld-g) + 2 * var(--ld-ic)); }
/* Doldurma: logo kutuyu kaplar (tam = sigar, kapla = kirpar); distaki yazi kutunun icinde kendi satirini alir */
.bg-ld-d-tam li, .bg-ld-d-kapla li { height: var(--ld-kutu-y); border-radius: var(--ld-kose, var(--bg-kose)); overflow: hidden; }
.bg-ld-d-tam .bg-ld-akis li, .bg-ld-d-kapla .bg-ld-akis li { width: calc((var(--ld-g) + 2 * var(--ld-ic)) * var(--ld-olcek, 1)); }
.bg-ld-k-yok.bg-ld-d-tam .bg-ld-akis li, .bg-ld-k-yok.bg-ld-d-kapla .bg-ld-akis li { width: calc(var(--ld-g) * var(--ld-olcek, 1)); }
.bg-ld-d-tam .bg-ld-gorsel, .bg-ld-d-kapla .bg-ld-gorsel { flex: 1 1 auto; align-self: stretch; min-height: 0; }
.bg-ld-d-tam img, .bg-ld-d-kapla img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.bg-ld-d-kapla img { object-fit: cover; }
.bg-ld-d-kapla li { padding: 0; }
.bg-ld-d-kapla.bg-ld-yy-dis .bg-ld-ic { gap: 0; }
.bg-ld-d-kapla.bg-ld-yy-dis .bg-ld-yazi, .bg-ld-d-tam.bg-ld-yy-dis .bg-ld-yazi { align-self: stretch; padding: var(--ld-yazi-dolgu, 4px) .6em; }
/* Renk */
.bg-ld-r-gri img { filter: grayscale(1); }
.bg-ld-r-soluk img, .bg-ld-r-soluk .bg-ld-ad { opacity: var(--ld-soluk); }
.bg-ld-r-grisoluk img { filter: grayscale(1); opacity: var(--ld-soluk); }
.bg-ld-r-grisoluk .bg-ld-ad { opacity: var(--ld-soluk); }
.bg-ld-sar li:hover img, .bg-ld-sar li:focus-within img { filter: none; opacity: 1; }
.bg-ld-sar li:hover .bg-ld-ad { opacity: 1; }
/* Logo uzerindeki yazi: ic = gorselin ustune biner, dis = ayri satir; dikey ust/orta/alt, yatay sol/orta/sag */
.bg-ld-yazi { display: block; z-index: 1; padding: var(--ld-yazi-dolgu, 4px) calc(var(--ld-yazi-dolgu, 4px) * 2); line-height: 1.25; pointer-events: none;
  font-family: var(--ld-yazi-aile, inherit); font-size: var(--ld-yazi-boyut, 14px); font-weight: var(--ld-yazi-kalin, 700);
  color: var(--ld-yazi-renk, var(--metin)); background: var(--ld-yazi-zemin, transparent); overflow-wrap: anywhere; text-align: center; }
/* Ic yazi logodan uzunsa kirilmaz, logonun disina tasar; bant en az logo eni kadar */
.bg-ld-yy-ic .bg-ld-yazi { position: absolute; white-space: nowrap; --ld-yx: 0; --ld-yy: 0; transform: translate(var(--ld-yx), var(--ld-yy)); }
.bg-ld-yy-ic.bg-ld-yh-orta .bg-ld-yazi { left: 50%; --ld-yx: -50%; min-width: calc(100% - 2 * var(--ld-yazi-kenar, 0px)); }
.bg-ld-yy-ic.bg-ld-yh-sol .bg-ld-yazi { left: var(--ld-yazi-kenar, 0px); text-align: left; }
.bg-ld-yy-ic.bg-ld-yh-sag .bg-ld-yazi { right: var(--ld-yazi-kenar, 0px); text-align: right; }
.bg-ld-yy-ic.bg-ld-yd-alt .bg-ld-yazi { bottom: var(--ld-yazi-kenar, 0px); }
.bg-ld-yy-ic.bg-ld-yd-ust .bg-ld-yazi { top: var(--ld-yazi-kenar, 0px); }
.bg-ld-yy-ic.bg-ld-yd-orta .bg-ld-yazi { top: 50%; --ld-yy: -50%; }
.bg-ld-yy-dis .bg-ld-yazi { position: relative; max-width: 100%; }
.bg-ld-yy-dis.bg-ld-yh-sol .bg-ld-yazi { align-self: flex-start; text-align: left; }
.bg-ld-yy-dis.bg-ld-yh-sag .bg-ld-yazi { align-self: flex-end; text-align: right; }
.bg-ld-y-buyuk .bg-ld-yazi { text-transform: uppercase; letter-spacing: .04em; }
.bg-ld-y-golge .bg-ld-yazi { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.4); }
/* Kayan serit */
.bg-ld-kayan { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bg-ld-solmasiz .bg-ld-kayan { mask-image: none; -webkit-mask-image: none; }
.bg-ld-akis { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ld-ara); width: max-content; animation: bg-ld-akis var(--ld-hiz) linear infinite; }
.bg-ld-saga .bg-ld-akis { animation-direction: reverse; }
.bg-ld-akis li { flex: none; }
.bg-ld-kayan:hover .bg-ld-akis { animation-play-state: paused; }
.bg-ld-durmaz .bg-ld-kayan:hover .bg-ld-akis { animation-play-state: running; }
@keyframes bg-ld-akis { to { transform: translateX(calc(-50% - var(--ld-ara) / 2)); } }
@media (prefers-reduced-motion: reduce) { .bg-ld-akis { animation-duration: calc(var(--ld-hiz) * 4); } }
@media (max-width: 640px) {
  .bg-ld img, .bg-ld-akis img { max-height: calc(var(--ld-y-tel, calc(var(--ld-y) * .75)) * var(--ld-olcek, 1)); max-width: calc(var(--ld-g) * .8 * var(--ld-olcek, 1)); }
  .bg-ld-d-tam img, .bg-ld-d-kapla img { max-width: none; max-height: none; }
  .bg-ld-sutunlu .bg-ld { grid-template-columns: repeat(min(var(--ld-sutun), 3), minmax(0, 1fr)); }
  .bg-ld li, .bg-ld-akis li { min-height: calc(var(--ld-kutu-y) * .8); }
  .bg-ld-d-tam li, .bg-ld-d-kapla li { height: calc(var(--ld-kutu-y) * .8); }
}

/* ── 9. Hizmetler ────────────────────────────────── */
.bg-hz { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; grid-template-columns: repeat(var(--bg-sutun, 3), minmax(0, 1fr)); }
.bg-hz-kart { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.bg-hz h3 { margin: 0; font-size: 1.2rem; }
.bg-hz p { margin: 0; color: var(--metin-2); line-height: 1.6; }
.bg-hz-simge { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg-vurgu) 14%, transparent); color: var(--bg-vurgu); flex: none; }
.bg-hz-simge svg { width: 26px; height: 26px; }
.bg-hz-ok svg { width: 20px; height: 20px; }
/* satir */
.bg-hz-d-satir { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--bg-kenar); }
.bg-hz-d-satir .bg-hz-kart { display: grid; grid-template-columns: 4rem 1fr 1.3fr 48px; align-items: center; gap: 1.5rem; padding: 1.8rem .4rem; border-bottom: 1px solid var(--bg-kenar); transition: padding .25s, color .25s; }
.bg-hz-d-satir h3 { font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.bg-hz-no { font-weight: 800; color: var(--metin-3); }
.bg-hz-d-satir .bg-hz-ok { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--bg-kenar); display: grid; place-items: center; transition: background .25s, color .25s, transform .25s; }
.bg-hz-d-satir a.bg-hz-kart:hover { padding-left: 1.2rem; color: var(--bg-vurgu); }
.bg-hz-d-satir .bg-hz-kart:hover .bg-hz-ok { background: var(--bg-dolgu); color: #fff; border-color: var(--bg-vurgu); transform: rotate(-45deg); }
.bg-hz-uc { position: absolute; right: 18%; top: 50%; width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bg-kose); pointer-events: none; opacity: 0; transform: translateY(-50%) rotate(-6deg) scale(.85); transition: opacity .3s, transform .3s; z-index: 2; box-shadow: var(--golge-3); }
.bg-hz-d-satir .bg-hz-kart:hover .bg-hz-uc { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
/* donen */
.bg-hz-donen { perspective: 1000px; min-height: 260px; outline: none; }
.bg-hz-ic { position: relative; height: 100%; min-height: 260px; transition: transform .6s; transform-style: preserve-3d; }
.bg-hz-donen:hover .bg-hz-ic, .bg-hz-donen:focus-within .bg-hz-ic { transform: rotateY(180deg); }
.bg-hz-on, .bg-hz-arka { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--bg-kose); padding: 2rem 1.6rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1rem; }
.bg-hz-on { background: var(--bg-kart); border: 1px solid var(--bg-kenar); }
.bg-hz-on img { width: 100%; max-height: 140px; object-fit: cover; border-radius: calc(var(--bg-kose) * .6); }
.bg-hz-arka { background: var(--bg-dolgu); color: #fff; transform: rotateY(180deg); }
.bg-hz-arka p { color: rgba(255,255,255,.9); }
.bg-hz-arka a { display: inline-flex; gap: .4rem; align-items: center; color: #fff; font-weight: 700; }
.bg-hz-arka a svg { width: 16px; }
/* gorsel ust */
.bg-hz-d-gorselust .bg-hz-kart { background: var(--bg-kart); border: 1px solid var(--bg-kenar); border-radius: var(--bg-kose); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.bg-hz-d-gorselust a.bg-hz-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-2); }
.bg-hz-gorsel { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.bg-hz-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bg-hz-d-gorselust a.bg-hz-kart:hover .bg-hz-gorsel img { transform: scale(1.06); }
.bg-hz-govde { display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem; flex: 1; }
.bg-hz-d-gorselust .bg-hz-ok { margin-top: auto; color: var(--bg-vurgu); }
/* karartmali + mozaik */
.bg-hz-gorselli { min-height: 320px; border-radius: var(--bg-kose); overflow: hidden; justify-content: flex-end; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--bg-vurgu) 60%, #0b1430), #0b1430); }
.bg-hz-gorselli > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.bg-hz-gorselli::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,10,25,.85), rgba(5,10,25,.15) 70%); }
.bg-hz-ust { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem; }
.bg-hz-gorselli p { color: rgba(255,255,255,.85); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s; }
.bg-hz-gorselli:hover p, .bg-hz-gorselli:focus-visible p { max-height: 10em; opacity: 1; }
.bg-hz-gorselli:hover > img { transform: scale(1.06); }
.bg-hz-gorselli .bg-hz-simge { background: rgba(255,255,255,.16); color: #fff; }
@media (hover: none) { .bg-hz-gorselli p { max-height: none; opacity: 1; } }
.bg-hz-d-mozaik { grid-auto-rows: 240px; grid-auto-flow: dense; }
.bg-hz-d-mozaik .bg-hz-gorselli { min-height: 0; }
.bg-hz-d-mozaik li:nth-child(5n+1) { grid-column: span 2; } .bg-hz-d-mozaik li:nth-child(5n+3) { grid-row: span 2; }

/* ── 10. Ekip ────────────────────────────────────── */
.bg-ek { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; grid-template-columns: repeat(var(--bg-sutun, 4), minmax(0, 1fr)); }
.bg-ek li { display: flex; flex-direction: column; gap: .3rem; }
.bg-ek strong { font-size: 1.08rem; margin-top: .7rem; } .bg-ek small { color: var(--metin-3); }
.bg-ek-foto { position: relative; display: block; overflow: hidden; border-radius: var(--bg-kose); aspect-ratio: 4 / 5; background: var(--zemin-3); }
.bg-ek-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bg-ek-bas { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--yazi-baslik); font-size: 2.6rem; font-weight: 800; color: var(--bg-vurgu); background: color-mix(in srgb, var(--bg-vurgu) 12%, var(--zemin-3, #eee)); }
.bg-ek-sosyal { display: flex; gap: .4rem; margin-top: .5rem; }
.bg-ek-sosyal a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--bg-kenar); color: var(--metin-2); }
.bg-ek-sosyal a:hover { background: var(--bg-dolgu); color: #fff; border-color: var(--bg-vurgu); }
.bg-ek-sosyal svg { width: 16px; height: 16px; }
.bg-ek-d-yuvarlak li { align-items: center; text-align: center; }
.bg-ek-d-yuvarlak .bg-ek-foto { width: min(180px, 80%); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg-vurgu) 18%, transparent); }
.bg-ek-d-yuvarlak .bg-ek-sosyal { justify-content: center; }
.bg-ek-d-sosyal .bg-ek-foto .bg-ek-sosyal { position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; margin: 0; padding: 1rem; background: linear-gradient(0deg, rgba(5,10,25,.75), transparent); transform: translateY(100%); transition: transform .3s; }
.bg-ek-d-sosyal .bg-ek-foto .bg-ek-sosyal a { color: #fff; border-color: rgba(255,255,255,.5); }
.bg-ek-d-sosyal li:hover .bg-ek-foto .bg-ek-sosyal, .bg-ek-d-sosyal li:focus-within .bg-ek-foto .bg-ek-sosyal { transform: none; }
.bg-ek-d-sosyal li:hover .bg-ek-foto img { transform: scale(1.05); }
@media (hover: none) { .bg-ek-d-sosyal .bg-ek-foto .bg-ek-sosyal { transform: none; } }

/* ── 11. Cagri bandi ─────────────────────────────── */
.bg-cg { position: relative; overflow: hidden; border-radius: calc(var(--bg-kose) * 1.5); }
.bg-cg-ic { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 3rem; padding: clamp(2rem, 5vw, 3.6rem); }
.bg-cg-yazi { flex: 1 1 380px; }
.bg-cg h2 { margin: 0 0 .6rem; font-family: var(--yazi-baslik); font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; color: inherit; }
.bg-cg p { margin: 0; line-height: 1.6; opacity: .88; }
.bg-cg-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.bg-cg-tel { display: inline-flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.bg-cg-tel svg { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); }
.bg-cg-tel small { display: block; opacity: .8; font-size: .8rem; } .bg-cg-tel strong { font-size: 1.3rem; }
.bg-cg-d-gradyan, .bg-cg-d-tasan { background: linear-gradient(120deg, color-mix(in srgb, var(--bg-dolgu) 75%, #0b1430), var(--bg-dolgu)); color: #fff; }
.bg-cg-d-gradyan .bg-vurgu, .bg-cg-d-tasan .bg-vurgu, .bg-cg-d-gorsel .bg-vurgu { color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.bg-cg-d-gradyan .bg-etiket, .bg-cg-d-tasan .bg-etiket, .bg-cg-d-gorsel .bg-etiket { color: rgba(255,255,255,.85); }
.bg-cg-d-gorsel { background: #0b1430; color: #fff; }
.bg-cg-zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-cg-d-gorsel::after { content: ""; position: absolute; inset: 0; background: rgba(5,10,25,.62); }
.bg-cg-d-bolunmus { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--bg-kart); border: 1px solid var(--bg-kenar); }
.bg-cg-d-bolunmus .bg-cg-ic { flex-direction: column; align-items: flex-start; justify-content: center; }
.bg-cg-d-bolunmus .bg-cg-yazi { flex: none; }
.bg-cg-d-bolunmus .bg-cg-gorsel { min-height: 260px; }
.bg-cg-d-bolunmus .bg-cg-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.bg-cg-d-tasan { margin-block: 2.5rem; box-shadow: 0 30px 60px color-mix(in srgb, var(--bg-vurgu) 30%, transparent); border-radius: 999px; }
.bg-cg-d-tasan .bg-cg-ic { padding-inline: clamp(2rem, 6vw, 4.5rem); }
.bg-cg-d-telefon { background: var(--bg-kart); border: 1px solid var(--bg-kenar); }
.bg-cg-d-telefon .bg-cg-tel { color: var(--bg-vurgu); }
.bg-cg-d-telefon .bg-cg-tel strong { font-size: clamp(1.4rem, 3vw, 2rem); }
@media (max-width: 760px) { .bg-cg-d-tasan { border-radius: calc(var(--bg-kose) * 1.5); } .bg-cg-d-bolunmus { grid-template-columns: 1fr; } }

/* ── 12. Iletisim formu ──────────────────────────── */
.bg-if { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.bg-if-bilgili, .bg-if-haritali { grid-template-columns: .9fr 1.1fr; }
.bg-if-tek .bg-if-kutu { max-width: 760px; margin: 0 auto; width: 100%; }
.bg-if-kutu { background: var(--bg-kart); border: 1px solid var(--bg-kenar); border-radius: calc(var(--bg-kose) * 1.25); padding: clamp(1.4rem, 3.5vw, 2.4rem); box-shadow: var(--golge-1); }
.bg-if-form { display: grid; gap: 1rem; }
.bg-if-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bg-if-iki:empty { display: none; }
.bg-if-alan { display: grid; gap: .4rem; }
.bg-if-alan label { font-size: .88rem; font-weight: 600; }
.bg-if-alan input, .bg-if-alan select, .bg-if-alan textarea {
  width: 100%; font: inherit; color: var(--metin); background: var(--zemin); border: 1px solid var(--kenar-koyu, var(--bg-kenar)); border-radius: 10px; padding: .75rem .9rem; min-height: 48px;
}
.bg-if-alan textarea { resize: vertical; min-height: 130px; }
.bg-if-alan :is(input, select, textarea):focus { outline: none; border-color: var(--bg-vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-vurgu) 22%, transparent); }
.bg-if-alan [aria-invalid="true"] { border-color: #dc2626; }
.bg-if-bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bg-if-onay { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--metin-2); line-height: 1.5; }
.bg-if-onay input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--bg-vurgu); flex: none; }
.bg-if-onay a { color: var(--bg-vurgu); }
.bg-if-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.bg-if-alt button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.bg-if-alt button[disabled] { opacity: .6; cursor: progress; }
.bg-if-durum { margin: 0; font-size: .92rem; font-weight: 600; }
.bg-if-durum.hata { color: #dc2626; } .bg-if-durum.tamam { color: #16a34a; }
.bg-if-tesekkur { text-align: center; padding: 2.5rem 1rem; }
.bg-if-tesekkur svg { width: 60px; height: 60px; padding: 14px; border-radius: 50%; background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; margin: 0 auto 1rem; display: block; }
.bg-if-bilgi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.bg-if-bilgi li { display: flex; gap: 1rem; align-items: flex-start; }
.bg-if-simge { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg-vurgu) 14%, transparent); color: var(--bg-vurgu); }
.bg-if-simge svg { width: 24px; height: 24px; }
.bg-if-bilgi small { display: block; color: var(--metin-3); font-size: .82rem; margin-bottom: .15rem; }
.bg-if-bilgi a, .bg-if-bilgi strong { color: inherit; font-weight: 600; text-decoration: none; line-height: 1.5; }
.bg-if-bilgi a:hover { color: var(--bg-vurgu); }
.bg-if-harita { border-radius: calc(var(--bg-kose) * 1.25); overflow: hidden; border: 1px solid var(--bg-kenar); min-height: 320px; height: 100%; }
.bg-if-bilgili + .bg-if-harita { margin-top: 2rem; height: 360px; }
.bg-if-harita iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ── 13. Sekmeler ────────────────────────────────── */
.bg-sk-liste { display: flex; flex-wrap: wrap; gap: .3rem; }
.bg-sk-liste button { font: inherit; font-weight: 700; cursor: pointer; background: none; border: 0; color: var(--metin-2); }
.bg-sk-ust .bg-sk-liste { border-bottom: 1px solid var(--bg-kenar); margin-bottom: 2rem; overflow-x: auto; flex-wrap: nowrap; }
.bg-sk-ust .bg-sk-liste button { padding: .9rem 1.2rem; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.bg-sk-ust .bg-sk-liste button[aria-selected="true"] { color: var(--bg-vurgu); border-color: var(--bg-vurgu); }
.bg-sk-hap .bg-sk-liste { justify-content: center; margin-bottom: 2rem; }
.bg-sk-hap .bg-sk-liste button { padding: .65rem 1.3rem; border-radius: 999px; border: 1px solid var(--bg-kenar); }
.bg-sk-hap .bg-sk-liste button[aria-selected="true"] { background: var(--bg-dolgu); border-color: var(--bg-vurgu); color: #fff; }
.bg-sk-sol { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: start; }
.bg-sk-sol .bg-sk-liste { flex-direction: column; flex-wrap: nowrap; gap: .4rem; }
.bg-sk-sol .bg-sk-liste button { text-align: left; padding: 1rem 1.2rem; border-radius: var(--bg-kose); border: 1px solid var(--bg-kenar); background: var(--bg-kart); }
.bg-sk-sol .bg-sk-liste button[aria-selected="true"] { background: var(--bg-dolgu); border-color: var(--bg-vurgu); color: #fff; }
.bg-sk-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; animation: bg-belir .35s ease; }
.bg-sk-panel[hidden] { display: none; }
.bg-sk-panel:not(:has(.bg-sk-gorsel)) { grid-template-columns: 1fr; }
.bg-sk-yazi h3 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.bg-sk-yazi p { margin: 0; color: var(--metin-2); line-height: 1.7; }
.bg-sk-yazi .bg-dugmeler { margin-top: 1.4rem; }
.bg-sk-gorsel { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bg-kose); }
@keyframes bg-belir { from { opacity: 0; transform: translateY(8px); } }

/* ── 14. Kolajli hakkimizda ──────────────────────── */
.bg-hk { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.bg-hk-sagda .bg-hk-kolaj { order: 2; }
.bg-hk-kolaj { position: relative; min-height: 420px; }
.bg-hk-kolaj img { position: absolute; object-fit: cover; border-radius: var(--bg-kose); box-shadow: var(--golge-2); }
.bg-hk-1 { left: 0; top: 0; width: 72%; height: 78%; }
.bg-hk-2 { right: 0; bottom: 0; width: 52%; height: 52%; border: 6px solid var(--zemin); }
.bg-hk-3 { right: 4%; top: 6%; width: 30%; height: 30%; border: 6px solid var(--zemin); }
.bg-hk-g1 img { width: 100%; height: 100%; }
.bg-hk-g2 .bg-hk-1 { width: 78%; }
.bg-hk-bos { position: absolute; inset: 0 12% 12% 0; border-radius: var(--bg-kose); background: linear-gradient(135deg, color-mix(in srgb, var(--bg-vurgu) 65%, #0b1430), color-mix(in srgb, var(--bg-vurgu) 25%, #0b1430)); }
.bg-hk-bos::after { content: ""; position: absolute; right: -14%; bottom: -14%; width: 55%; height: 50%; border-radius: inherit; background: var(--zemin-3, #ddd); border: 6px solid var(--zemin); }
.bg-hk-rozet { position: absolute; left: 6%; bottom: 4%; z-index: 2; display: grid; gap: .1rem; padding: 1.1rem 1.4rem; border-radius: var(--bg-kose); background: var(--bg-dolgu); color: #fff; box-shadow: var(--golge-3); }
.bg-hk-rozet strong { font-family: var(--yazi-baslik); font-size: 2.2rem; line-height: 1; }
.bg-hk-rozet span { font-size: .85rem; opacity: .9; }
.bg-hk-yazi .bg-tepe { margin-bottom: 1rem; }
.bg-hk-metin { margin: 0; color: var(--metin-2); line-height: 1.75; }
.bg-hk-yazi .bg-dugmeler { margin-top: 1.6rem; }

/* ── 15. Video bandi ─────────────────────────────── */
.bg-vd-kutu { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--bg-kose) * 1.25); overflow: hidden; background: linear-gradient(135deg, #0b1430, color-mix(in srgb, var(--bg-vurgu) 45%, #0b1430)); }
.bg-vd-kutu > img { width: 100%; height: 100%; object-fit: cover; }
.bg-vd-kutu iframe, .bg-vd-kutu video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.bg-vd-oynat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; border: 0; background: #fff; color: var(--bg-vurgu); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: bg-nabiz 2s infinite; }
.bg-vd-oynat svg { width: 30px; height: 30px; margin-left: 4px; }
.bg-vd-oynat:hover { transform: translate(-50%, -50%) scale(1.07); }
@keyframes bg-nabiz { 70% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.bg-vd-kutulu .bg-vd-kutu { max-width: 1000px; margin: 0 auto; box-shadow: var(--golge-3); }
.bg-vd-yan { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bg-vd-tam { position: relative; }
.bg-vd-tam .bg-vd-kutu { aspect-ratio: auto; height: clamp(420px, 70vh, 720px); border-radius: 0; }
.bg-vd-tam .bg-vd-kutu::after { content: ""; position: absolute; inset: 0; background: rgba(5,10,25,.5); pointer-events: none; }
.bg-vd-tam .bg-vd-kutu.oynuyor::after { display: none; }
.bg-vd-tam .bg-vd-oynat { z-index: 2; top: 62%; }
.bg-vd-tam .bg-vd-yazi { position: absolute; left: 0; right: 0; top: 18%; z-index: 2; padding: 0 1.25rem; text-align: center; pointer-events: none; }
.bg-vd-tam .bg-vd-yazi a { pointer-events: auto; }
.bg-vd-tam .bg-vd-yazi .bg-dugmeler { justify-content: center; }
.bg-vd-tam .bg-alt { color: rgba(255,255,255,.85); }
.bg-vd-tam .bg-vd-kutu.oynuyor ~ .bg-vd-yazi { display: none; }
.bolum-bgVideo.bg-zeminli { padding: 0 !important; } .bolum-bgVideo.bg-zeminli .kapsayici { padding: 0 !important; }

/* ── Telefon / tablet ────────────────────────────── */
@media (max-width: 1000px) {
  .bg-sutun-4 { --bg-sutun: 2; }
  .bg-ft-d-yatay .bg-ft-kart { grid-template-columns: 1fr 1fr; }
  .bg-hz-d-satir .bg-hz-kart { grid-template-columns: 3rem 1fr 48px; }
  .bg-hz-d-satir .bg-hz-kart p { grid-column: 2; grid-row: 2; }
  .bg-hz-d-satir .bg-hz-ok { grid-column: 3; grid-row: 1 / span 2; }
  .bg-hz-uc { display: none; }
  .bg-y-uclu .bg-kr-oge { flex-basis: 50%; }
}
@media (max-width: 760px) {
  .bg-k-bolunmus .bg-k-ic, .bg-if-bilgili, .bg-if-haritali, .bg-sk-sol, .bg-sk-panel, .bg-hk, .bg-vd-yan { grid-template-columns: 1fr; }
  .bg-hk-sagda .bg-hk-kolaj { order: 0; }
  .bg-hk-kolaj { min-height: 320px; }
  .bg-sutun-3, .bg-sutun-4 { --bg-sutun: 2; }
  .bg-hz { --bg-sutun: 1 !important; }
  .bg-hz-d-satir .bg-hz-kart { padding: 1.3rem .2rem; gap: .4rem 1rem; }
  .bg-hz-d-mozaik li { grid-column: auto !important; grid-row: auto !important; }
  .bg-pf-mozaik { grid-auto-rows: 160px; }
  .bg-pf-mozaik .bg-pf-oge:nth-child(6n+4) { grid-column: auto; }
  .bg-zc-zikzak::before { left: 7px; transform: none; }
  .bg-zc-zikzak .bg-zc-oge, .bg-zc-zikzak .bg-zc-oge:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 1.6rem 2.5rem; }
  .bg-zc-zikzak .bg-zc-nokta, .bg-zc-zikzak .bg-zc-oge:nth-child(even) .bg-zc-nokta { left: 0; right: auto; }
  .bg-zc-zikzak .bg-zc-oge:nth-child(odd) .bg-zc-kart { text-align: left; }
  .bg-ft-d-vurgulu .bg-ft-one { transform: none; }
  .bg-ft-d-yatay .bg-ft-kart, .bg-ft-d-yatay .bg-ft-liste { grid-template-columns: 1fr; }
  .bg-y-uclu .bg-kr-oge { flex-basis: 100%; }
  .bg-sk-sol .bg-sk-liste { flex-direction: row; overflow-x: auto; }
  .bg-sk-sol .bg-sk-liste button { white-space: nowrap; }
  .bg-cg-ic { flex-direction: column; align-items: flex-start; }
  .bg-cg-yazi { flex: none; }
}
@media (max-width: 520px) {
  .bg-if-iki { grid-template-columns: 1fr; }
  .bg-sutun-2, .bg-sutun-3, .bg-sutun-4 { --bg-sutun: 1; }
  .bg-ek { --bg-sutun: 2 !important; gap: 1rem; }
  .bg-pf:not(.bg-pf-kaydir) { --bg-sutun: 1; }
  .bg-pf-mozaik .bg-pf-oge:nth-child(6n+1) { grid-row: auto; }
  .bg-k-baslik { font-size: clamp(2rem, 9vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-ky-akis, .bg-ld-akis, .bg-vd-oynat, .bg-daktilo::after { animation: none; }
  .bg-ky-serit, .bg-ld-akis { flex-wrap: wrap; width: auto; }
  .bg-hz-ic { transition: none; }
}
/* Koyu zeminli duzenlerde basliklar beyaz (genel h1/h2 rengi ezilir) */
.bg-k-karartmali .bg-k-baslik, .bg-k-video .bg-k-baslik, .bg-vd-tam .bg-baslik, .bg-cg-d-gradyan h2, .bg-cg-d-tasan h2, .bg-cg-d-gorsel h2 { color: #fff; }
.bg-ft-d-vurgulu .bg-ft-one h3, .bg-hz-arka h3, .bg-hz-gorselli h3, .bg-sy-merdiven li:nth-child(even) .bg-sy-sayi { color: #fff; }
.bg-cg-d-gradyan p, .bg-cg-d-tasan p, .bg-cg-d-gorsel p, .bg-hz-arka p, .bg-hz-gorselli p { color: rgba(255,255,255,.88); opacity: 1; }

/* ═══ Form olusturucu (bgForm, 17 Eki 2026) ═══ */
.bg-fo { max-width: 760px; margin: 0 auto; }
.bg-fo-d-yan { max-width: none; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.bg-fo-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.bg-fo-tam { grid-column: 1 / -1; }
.bg-fo-yarim { grid-column: span 1; }
.bg-fo-grup { border: 0; padding: 0; margin: 0; min-width: 0; }
.bg-fo-grup legend { padding: 0; margin-bottom: .45rem; font-weight: 600; font-size: .9rem; }
.bg-fo-sec { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; cursor: pointer; font-weight: 400; }
.bg-fo-sec input { width: 1.05rem; height: 1.05rem; accent-color: var(--bg-vurgu, var(--ana)); flex: none; }
.bg-fo-ipucu { display: block; margin-top: .3rem; font-size: .8rem; opacity: .75; }
.bg-fo-duz .bg-if-form { padding: 0; background: none; border: 0; box-shadow: none; }
@media (max-width: 760px) {
  .bg-fo-d-yan { grid-template-columns: 1fr; }
  .bg-fo-izgara { grid-template-columns: 1fr; }
  .bg-fo-yarim { grid-column: 1 / -1; }
}
/* Secim kutulari genel girdi stilini (dolgu, yukseklik, tam genislik) almaz */
.bg-if-alan .bg-fo-sec input, .bg-fo-tam .bg-if-onay input { width: 1.05rem; height: 1.05rem; min-height: 0; padding: 0; margin: 0; border-radius: 4px; flex: none; box-shadow: none; }
.bg-if-alan .bg-fo-sec input[type="radio"] { border-radius: 50%; }
.bg-if-alan .bg-fo-sec { font-size: .92rem; font-weight: 400; }
.bg-fo-grup { align-content: start; }

/* ═══ Vitrin mozaigi (bgVitrinMozaik) ═══ */
.vm { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--vm-h, 240px); }
.vm-d-esit-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-d-esit-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-d-buyuk-sol .vm-k1 { grid-column: 1 / span 2; grid-row: span 2; }
.vm-d-buyuk-sag .vm-k1 { grid-column: 3 / span 2; grid-row: 1 / span 2; }
.vm-d-ust-buyuk .vm-k1 { grid-column: 1 / -1; }
.vm-kutu { position: relative; overflow: hidden; border-radius: 16px; display: flex; color: #fff; text-decoration: none; background: var(--vm-renk, var(--bg-vurgu, var(--ana))); isolation: isolate; }
.vm-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
a.vm-kutu:hover .vm-gorsel { transform: scale(1.06); }
.vm-y-ust .vm-kutu::after, .vm-y-orta .vm-kutu::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,calc(var(--vm-kar) + .25)), rgba(0,0,0,var(--vm-kar)) 55%, rgba(0,0,0,calc(var(--vm-kar) * .4))); }
.vm-yazi { margin-top: auto; padding: 1.2rem 1.3rem; display: grid; gap: .25rem; }
.vm-yazi strong { font-size: clamp(1.05rem, 1.6vw, 1.45rem); line-height: 1.2; }
.vm-k1 .vm-yazi strong { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.vm-yazi small { font-size: .9rem; opacity: .88; }
.vm-dugme { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; padding: .45rem .9rem; border-radius: 999px; background: #fff; color: #111; font-weight: 600; font-size: .85rem; width: max-content; }
.vm-dugme svg { width: 16px; height: 16px; }
.vm-y-orta .vm-yazi { margin: auto; text-align: center; justify-items: center; }
.vm-y-alt .vm-kutu { flex-direction: column; background: var(--kart, #fff); color: var(--metin); border: 1px solid color-mix(in srgb, var(--metin) 10%, transparent); }
.vm-y-alt .vm-gorsel { position: relative; inset: auto; height: 70%; z-index: 0; flex: 1; min-height: 0; }
.vm-y-alt .vm-kutu:not(:has(.vm-gorsel)) { background: var(--vm-renk, var(--ana)); color: #fff; }
.vm-y-alt .vm-dugme { background: var(--bg-vurgu, var(--ana)); color: #fff; }
.vm-rozet { position: absolute; top: .9rem; left: .9rem; padding: .25rem .65rem; border-radius: 999px; background: #e11d48; color: #fff; font-size: .78rem; font-weight: 700; }
@media (max-width: 900px) {
  .vm, .vm-d-esit-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vm-d-buyuk-sol .vm-k1, .vm-d-buyuk-sag .vm-k1 { grid-column: 1 / -1; grid-row: span 1; }
}
@media (max-width: 560px) { .vm, .vm-d-esit-2, .vm-d-esit-3 { grid-template-columns: 1fr; } .vm-kutu { grid-column: auto !important; } }

/* ═══ Banner gorselleri (bgBanner) ═══ */
.bn { display: grid; gap: 1rem; }
.bn-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bn-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bn-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bn-oge { display: block; overflow: hidden; border-radius: var(--bn-kose, 14px); line-height: 0; }
.bn-oge img { width: 100%; height: auto; aspect-ratio: var(--bn-oran, auto); object-fit: cover; transition: transform .5s ease; }
a.bn-oge:hover img { transform: scale(1.04); }
.bn-tam { width: 100vw; margin-left: calc(50% - 50vw); gap: 0; }
.bn-tam .bn-oge { border-radius: 0; }
@media (max-width: 760px) { .bn-2, .bn-3, .bn-4 { grid-template-columns: 1fr; } }
.vm-y-alt .vm-dugme { color: var(--kart, #fff); }

/* ── GORSEL VE VIDEO ALANI (bgMedya, 20 Eki 2026) ─────────────────────
   Yan yana 1-4 gorsel/video, ustte ya da altta yazi. Olculer ve renkler
   bilesenin satir ici degiskenlerinden (--md-*) gelir; bos olan varsayilana duser. */
.md { display: grid; gap: var(--md-ara, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-d-1 { grid-template-columns: minmax(0, 1fr); }
.md-d-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-d-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md-d-2a { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.md-d-2b { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.md-oge { position: relative; margin: 0; display: flex; flex-direction: column; border-radius: var(--md-kose, 14px); overflow: hidden; isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease; }
.md-g-hafif .md-oge { box-shadow: 0 6px 22px rgba(10, 20, 40, .1); }
.md-g-belirgin .md-oge { box-shadow: 0 16px 44px rgba(10, 20, 40, .22); }
.md-medya { position: relative; overflow: hidden; line-height: 0; background: var(--md-oz, color-mix(in srgb, var(--bg-vurgu) 12%, var(--bg-kart))); }
.md-oranli .md-medya { aspect-ratio: var(--md-oran); }
.md-sabit .md-medya { aspect-ratio: auto; height: var(--md-y); }
.md-medya img, .md-medya video { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.md-oranli .md-medya img, .md-oranli .md-medya video, .md-sabit .md-medya img, .md-sabit .md-medya video,
.md-oynatici img, .md-oynatici video, .md-oynatici iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* Oransiz kutuda video ve gomulu oynatici 16:9 tutar */
.md-medya:has(> .md-oynatici), .md-medya:has(> video) { aspect-ratio: var(--md-oran, 16 / 9); }
.md-sabit .md-medya:has(> .md-oynatici), .md-sabit .md-medya:has(> video) { aspect-ratio: auto; }
.md-medya > video { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.md-medyasiz .md-medya { min-height: var(--md-y, 220px); aspect-ratio: auto; flex: 1; }
/* Genis+dar ikilide dar kutu genisin boyuna uzar (gorsel kutuyu kaplar) */
.md-d-2a .md-oge:nth-child(2n) .md-medya, .md-d-2b .md-oge:nth-child(2n+1) .md-medya { aspect-ratio: auto; flex: 1; min-height: 160px; }
.md-d-2a .md-oge:nth-child(2n) .md-medya img, .md-d-2b .md-oge:nth-child(2n+1) .md-medya img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.md-oynatici { position: absolute; inset: 0; background: #0b1430; }
.md-oynat { z-index: 4; width: 72px; height: 72px; }
.md-e-yakinlas .md-oge:hover .md-medya img, .md-e-yakinlas .md-oge:hover .md-medya video[data-md-oto] { transform: scale(1.05); }
.md-e-kalk .md-oge:hover { transform: translateY(-4px); }

/* Karartma: yalniz yazi ustteyken */
.md-katman { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--md-kar, rgba(5, 10, 25, .35)); }
.md-kt-alttan .md-katman { background: linear-gradient(to top, var(--md-kar, rgba(5, 10, 25, .35)), transparent 78%); }
.md-kt-ustten .md-katman { background: linear-gradient(to bottom, var(--md-kar, rgba(5, 10, 25, .35)), transparent 78%); }
.md-kt-soldan .md-katman { background: linear-gradient(to right, var(--md-kar, rgba(5, 10, 25, .35)), transparent 78%); }
.md-kt-sagdan .md-katman { background: linear-gradient(to left, var(--md-kar, rgba(5, 10, 25, .35)), transparent 78%); }

/* Yazi: .md-yazi yerlesimi, .md-yazi-ic icerik (kutu zemini burada) */
.md-yazi { line-height: normal; font-family: var(--md-aile, inherit); color: var(--md-yr, var(--metin)); display: flex; flex-direction: column; }
.md-yazi-ic { display: flex; flex-direction: column; align-items: inherit; gap: .5rem; max-width: 100%; }
.md-etiket { margin: 0; font-size: var(--md-eb, 13px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.md-baslik { margin: 0; font-family: var(--md-aile, var(--yazi-baslik)); font-size: var(--md-bb, 28px); font-weight: var(--md-bk, 700);
  line-height: var(--md-sa, 1.25); letter-spacing: var(--md-ha, 0); color: var(--md-br, inherit); overflow-wrap: anywhere; }
.md-buyuk .md-baslik { text-transform: uppercase; }
.md-metin { margin: 0; font-size: var(--md-mb, 16px); line-height: 1.6; color: inherit; }
.md-etiket { color: inherit; }
.md-dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.md-y-ic .md-yazi { position: absolute; inset: 0; z-index: 2; padding: var(--md-yb, 28px); color: var(--md-yr, #fff); pointer-events: none; }
.md-y-ic .md-yazi-ic { max-width: var(--md-yg, 85%); }
.md-y-ic .md-yazi a { pointer-events: auto; }
.md-y-ic.md-kutulu .md-yazi-ic { background: var(--md-kz); padding: var(--md-kd, 20px); border-radius: var(--md-kk, 12px); }
.md-buzlu.md-y-ic .md-yazi-ic { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.md-y-alt .md-yazi { position: relative; z-index: 2; flex: 1; padding: var(--md-kd, 20px); background: var(--md-kz, var(--bg-kart)); }
.md-yg-hafif .md-yazi { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.md-yg-belirgin .md-yazi { text-shadow: 0 2px 12px rgba(0, 0, 0, .65); }

/* Konum (ustteyken): dikey x yatay; altta yalniz yatay hiza kullanilir */
.md-k-ust-sol .md-yazi, .md-k-ust-orta .md-yazi, .md-k-ust-sag .md-yazi { justify-content: flex-start; }
.md-k-orta-sol .md-yazi, .md-k-orta .md-yazi, .md-k-orta-sag .md-yazi { justify-content: center; }
.md-k-alt-sol .md-yazi, .md-k-alt-orta .md-yazi, .md-k-alt-sag .md-yazi { justify-content: flex-end; }
.md-y-alt .md-yazi { justify-content: flex-start; }
.md-k-ust-sol .md-yazi, .md-k-orta-sol .md-yazi, .md-k-alt-sol .md-yazi { align-items: flex-start; text-align: left; }
.md-k-ust-orta .md-yazi, .md-k-orta .md-yazi, .md-k-alt-orta .md-yazi { align-items: center; text-align: center; }
.md-k-ust-sag .md-yazi, .md-k-orta-sag .md-yazi, .md-k-alt-sag .md-yazi { align-items: flex-end; text-align: right; }
.md-k-ust-orta .md-dugmeler, .md-k-orta .md-dugmeler, .md-k-alt-orta .md-dugmeler { justify-content: center; }
.md-k-ust-sag .md-dugmeler, .md-k-orta-sag .md-dugmeler, .md-k-alt-sag .md-dugmeler { justify-content: flex-end; }
.md-h-sol .md-yazi { text-align: left; }
.md-h-orta .md-yazi { text-align: center; }
.md-h-sag .md-yazi { text-align: right; }

/* Dugme */
.md-dugme { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.3rem; border-radius: var(--md-dk, 10px);
  font-weight: 600; font-size: .95rem; text-decoration: none; border: 2px solid transparent; background: var(--md-dz, var(--bg-dolgu)); color: var(--md-dy, #fff);
  transition: transform .15s ease, filter .15s ease; }
.md-dugme:hover { transform: translateY(-1px); filter: brightness(1.08); }
.md-dugme svg { width: 16px; height: 16px; }
.md-dt-cerceve .md-dugme { background: transparent; border-color: var(--md-dz, currentColor); color: var(--md-dy, inherit); }
.md-dt-metin .md-dugme { background: none; padding: 0; min-height: 0; color: var(--md-dy, inherit); text-decoration: underline; text-underline-offset: 4px; }
.md-db-kucuk .md-dugme { min-height: 36px; padding: 0 1rem; font-size: .85rem; }
.md-db-buyuk .md-dugme { min-height: 54px; padding: 0 1.8rem; font-size: 1.05rem; }
.md-dt-metin.md-db-kucuk .md-dugme, .md-dt-metin.md-db-buyuk .md-dugme { padding: 0; min-height: 0; }
.md-dugme:focus-visible, .md-kapla:focus-visible { outline: 3px solid var(--bg-vurgu); outline-offset: 3px; }

/* Butun kutuyu kaplayan bag (dugme yoksa) */
.md-kapla { position: absolute; inset: 0; z-index: 3; }
/* Yonetimdeki onizleme: yaziya tiklayinca yerinde duzenleme acilsin (kaplayan bag ve gecirgen katman tiklamayi yutuyordu) */
.yonetim-onizleme .md-kapla { display: none; }
.yonetim-onizleme .md-yazi-ic, .yonetim-onizleme .md-yazi-ic * { pointer-events: auto; }

/* Video oynarken yazi ve karartma cekilir */
.md-medya:has(.oynuyor) .md-yazi, .md-medya:has(.oynuyor) .md-katman { display: none; }

@media (max-width: 900px) {
  .md-d-3, .md-d-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .md, .md-d-2a, .md-d-2b, .md-d-3, .md-d-4 { grid-template-columns: minmax(0, 1fr); }
  .md-t-2:not(.md-d-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-baslik { font-size: clamp(18px, calc(var(--md-bb, 28px) * .72), 44px); }
  .md-metin { font-size: max(13px, calc(var(--md-mb, 16px) * .9)); }
  .md-y-ic .md-yazi { padding: min(var(--md-yb, 28px), 20px); }
  .md-y-ic .md-yazi-ic { max-width: 100%; }
  .md-d-2a .md-oge:nth-child(2n) .md-medya, .md-d-2b .md-oge:nth-child(2n+1) .md-medya { aspect-ratio: var(--md-oran, 16 / 9); flex: none; }
  .md-sabit-tel .md-medya { aspect-ratio: auto; height: var(--md-y-tel); }
  .md-sabit-tel .md-medya img, .md-sabit-tel .md-medya video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
@media (prefers-reduced-motion: reduce) {
  .md-oge, .md-medya img, .md-medya video { transition: none; }
  .md-e-yakinlas .md-oge:hover .md-medya img, .md-e-yakinlas .md-oge:hover .md-medya video[data-md-oto], .md-e-kalk .md-oge:hover { transform: none; }
}

/* slayt.css */
/* ═══════════════════════════════════════════════════════════════════
   GELISMIS SLAYT + PARCALI SLAYT (16 Eki 2026) — api/bilesenler-slayt.js
   Davranis: varliklar/betik/site.js [data-sl]
   ═══════════════════════════════════════════════════════════════════ */
.sl-sar { padding: 0 !important; }
.sl-sar.sl-sar-kutulu, .sl-sar.sl-sar-bolunmus, .sl-sar.sl-sar-karusel, .sl-sar.sl-sar-kucukResimli { padding: var(--bolum-ust, 1.5rem) 1.25rem var(--bolum-alt, 1.5rem) !important; }
.sl {
  --sl-yazi: #ffffff; --sl-vurgu: var(--vurgu, #00ccff); --sl-karartma: .45;
  position: relative; overflow: hidden; outline: none; isolation: isolate; background: #0b1430; color: var(--sl-yazi);
}
.sl:focus-visible { box-shadow: inset 0 0 0 3px var(--ana); }
.sl-kutulu, .sl-bolunmus, .sl-karusel, .sl-kucukResimli { max-width: var(--kapsayici, 1200px); margin: 0 auto; border-radius: var(--bolum-kose, 20px); }
.sl-pencere { position: relative; height: 100%; overflow: hidden; }
/* Yukseklik */
.sl-y-tam { height: calc(100svh - var(--tepe-yukseklik, 0px)); min-height: 520px; }
.sl-y-buyuk { height: 80svh; min-height: 480px; max-height: 900px; }
.sl-y-orta { height: 560px; } .sl-y-kisa { height: 420px; }
.sl-y-16-9 { aspect-ratio: 16 / 9; } .sl-y-21-9 { aspect-ratio: 21 / 9; }
.sl-y-doldur { height: 100%; }
.sl-ray { position: relative; height: 100%; }
.sl-slayt { position: absolute; inset: 0; display: flex; overflow: hidden; }
.sl-medya { position: absolute; inset: 0; z-index: 0; }
.sl-medya picture, .sl-gorsel, .sl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-medya:not(:has(img, video)) { background: linear-gradient(135deg, #0b1430, color-mix(in srgb, var(--ana) 55%, #0b1430)); }
.sl-ortu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,10,25,var(--sl-karartma)), rgba(5,10,25,calc(var(--sl-karartma) * .35))); }
.sl-icerik { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; padding: clamp(1.5rem, 5vw, 5rem) clamp(1.25rem, 7vw, 7rem); }
.sl-yazi { max-width: 640px; display: grid; gap: .9rem; align-content: start; }
.sl-rozet { justify-self: start; padding: .35rem .85rem; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sl-baslik { margin: 0; font-family: var(--yazi-baslik); font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.08; letter-spacing: -.02em; color: var(--sl-yazi); }
.sl-vurgu { color: var(--sl-vurgu); }
.sl-metin { margin: 0; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; opacity: .9; color: var(--sl-yazi); }
.sl-dugmeler { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }
.sl-dugme { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .15s, background .15s, color .15s; }
.sl-dugme:hover { transform: translateY(-2px); }
.sl-dugme-ana { background: var(--sl-vurgu); color: #0b1430; }
.sl-dugme-cizgi { border: 2px solid currentColor; color: var(--sl-yazi); }
.sl-dugme-cizgi:hover { background: var(--sl-yazi); color: #0b1430; }
/* Yazinin yeri (9 nokta) */
.sl-k-sol-ust .sl-icerik { align-items: flex-start; justify-content: flex-start; }
.sl-k-orta-ust .sl-icerik { align-items: flex-start; justify-content: center; text-align: center; }
.sl-k-sag-ust .sl-icerik { align-items: flex-start; justify-content: flex-end; text-align: right; }
.sl-k-sol-orta .sl-icerik { align-items: center; justify-content: flex-start; }
.sl-k-orta .sl-icerik { align-items: center; justify-content: center; text-align: center; }
.sl-k-sag-orta .sl-icerik { align-items: center; justify-content: flex-end; text-align: right; }
.sl-k-sol-alt .sl-icerik { align-items: flex-end; justify-content: flex-start; }
.sl-k-orta-alt .sl-icerik { align-items: flex-end; justify-content: center; text-align: center; }
.sl-k-sag-alt .sl-icerik { align-items: flex-end; justify-content: flex-end; text-align: right; }
[class*="sl-k-orta"] .sl-rozet { justify-self: center; } [class*="sl-k-orta"] .sl-dugmeler { justify-content: center; }
[class*="sl-k-sag"] .sl-rozet { justify-self: end; } [class*="sl-k-sag"] .sl-dugmeler { justify-content: flex-end; }
.sl-k-orta .sl-ortu, .sl-k-orta-ust .sl-ortu, .sl-k-orta-alt .sl-ortu { background: rgba(5,10,25,var(--sl-karartma)); }
[class*="sl-k-sag"] .sl-ortu { background: linear-gradient(270deg, rgba(5,10,25,var(--sl-karartma)), rgba(5,10,25,calc(var(--sl-karartma) * .35))); }

/* ── Gecisler ── */
.sl-g-kayma .sl-ray { display: flex; transition: transform .7s cubic-bezier(.65,.05,.25,1); }
.sl-g-kayma .sl-slayt { position: relative; flex: 0 0 calc(100% / var(--sl-gorunen, 1)); height: 100%; }
.sl-g-solma .sl-slayt, .sl-g-yakinlasma .sl-slayt { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.sl-g-solma .sl-slayt.etkin, .sl-g-yakinlasma .sl-slayt.etkin { opacity: 1; visibility: visible; z-index: 1; }
.sl-g-yakinlasma .sl-gorsel { transform: scale(1.14); transition: transform calc(var(--sl-sure, 6s) + 1.5s) linear; }
.sl-g-yakinlasma .sl-slayt.etkin .sl-gorsel { transform: scale(1); }
.sl-g-kup .sl-pencere { perspective: 1600px; }
.sl-g-kup .sl-ray { transform-style: preserve-3d; }
.sl-g-kup .sl-slayt { backface-visibility: hidden; transition: transform .9s cubic-bezier(.65,.05,.25,1), opacity .9s; opacity: 0; transform: rotateY(90deg); transform-origin: left center; }
.sl-g-kup .sl-slayt.gecmis { transform: rotateY(-90deg); transform-origin: right center; }
.sl-g-kup .sl-slayt.etkin { opacity: 1; transform: none; z-index: 1; }
.sl-g-perde .sl-slayt { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.77,0,.18,1); }
.sl-g-perde .sl-slayt.etkin { clip-path: inset(0 0 0 0); z-index: 2; }
.sl-g-perde .sl-slayt.gecmis { clip-path: inset(0 0 0 0); z-index: 1; }

/* ── Yazi animasyonu ── */
.sl-a-yukaridan .sl-yazi > *, .sl-a-soldan .sl-yazi > *, .sl-a-buyuyerek .sl-yazi > * { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.sl-a-yukaridan .sl-yazi > * { transform: translateY(26px); }
.sl-a-soldan .sl-yazi > * { transform: translateX(-36px); }
.sl-a-buyuyerek .sl-yazi > * { transform: scale(.9); }
.sl-slayt.etkin .sl-yazi > * { opacity: 1; transform: none; }
.sl-slayt.etkin .sl-yazi > :nth-child(1) { transition-delay: .25s; } .sl-slayt.etkin .sl-yazi > :nth-child(2) { transition-delay: .4s; }
.sl-slayt.etkin .sl-yazi > :nth-child(3) { transition-delay: .55s; } .sl-slayt.etkin .sl-yazi > :nth-child(4) { transition-delay: .7s; }
.sl-karusel .sl-yazi > * { opacity: 1 !important; transform: none !important; }

/* ── Duzenler ── */
.sl-bolunmus { background: var(--kart); color: var(--metin); border: 1px solid var(--kenar); }
.sl-bolunmus .sl-slayt { display: grid; grid-template-columns: 1fr 1fr; }
.sl-bolunmus .sl-medya { position: relative; inset: auto; order: 2; }
.sl-bolunmus .sl-icerik { order: 1; --sl-yazi: var(--metin); align-items: center !important; }
.sl-bolunmus .sl-baslik { color: var(--metin); }
.sl-bolunmus .sl-rozet { background: color-mix(in srgb, var(--ana) 14%, transparent); color: var(--ana); backdrop-filter: none; }
.sl-bolunmus .sl-dugme-ana { background: var(--ana); color: #fff; }
.sl-bolunmus .sl-dugme-cizgi { color: var(--metin); }
.sl-kartli .sl-yazi { padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 22px; background: rgba(10,16,32,.78); backdrop-filter: blur(10px); box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.sl-kartli .sl-ortu { opacity: .35; }
.sl-karusel { background: none; }
.sl-karusel .sl-ray { gap: 0; }
.sl-karusel .sl-slayt { padding: 0 .5rem; overflow: visible; }
.sl-karusel .sl-medya { inset: 0 .5rem; border-radius: 16px; overflow: hidden; }
.sl-karusel .sl-icerik { padding: 1.4rem 1.5rem; align-items: flex-end !important; }
.sl-karusel .sl-baslik { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.sl-karusel .sl-metin { font-size: .92rem; }
.sl-karusel .sl-ortu { background: linear-gradient(0deg, rgba(5,10,25,.82), rgba(5,10,25,.05) 70%) !important; }

/* ── Gezinme ── */
.sl-oklar-yanlarda .sl-ok { position: absolute; top: 50%; translate: 0 -50%; z-index: 5; }
.sl-oklar-yanlarda .sl-ok[data-sl-geri] { left: 1rem; } .sl-oklar-yanlarda .sl-ok[data-sl-ileri] { right: 1rem; }
.sl-oklar-altta { position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 5; display: flex; gap: .5rem; }
.sl-ok { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(10,16,32,.35); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.sl-ok:hover { background: rgba(255,255,255,.95); color: #0b1430; }
.sl-ok svg { width: 22px; height: 22px; }
.sl-ok[disabled] { opacity: .35; cursor: default; }
.sl-bolunmus .sl-ok, .sl-karusel .sl-ok { background: var(--kart); color: var(--metin); border-color: var(--kenar); }
.sl-gosterge { position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0; z-index: 5; display: flex; gap: .5rem; }
.sl-gosterge button { border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.45); transition: background .2s, width .3s; }
.sl-gosterge-nokta button { width: 10px; height: 10px; border-radius: 50%; }
.sl-gosterge-nokta button[aria-selected="true"] { background: #fff; width: 28px; border-radius: 5px; }
.sl-gosterge-cizgi button { width: 42px; height: 4px; border-radius: 2px; }
.sl-gosterge-cizgi button[aria-selected="true"] { background: #fff; }
.sl-gosterge-sayi button { background: none; color: rgba(255,255,255,.6); font: 700 .9rem/1 var(--yazi-baslik, system-ui); padding: .3rem .2rem; border-bottom: 2px solid transparent; }
.sl-gosterge-sayi button[aria-selected="true"] { color: #fff; border-color: var(--sl-vurgu); }
.sl-bolunmus .sl-gosterge button, .sl-karusel .sl-gosterge button { background: var(--kenar-koyu, #ccc); }
.sl-bolunmus .sl-gosterge button[aria-selected="true"], .sl-karusel .sl-gosterge button[aria-selected="true"] { background: var(--ana); }
.sl-karusel .sl-gosterge { position: static; translate: none; justify-content: center; margin-top: 1rem; }
.sl-karusel .sl-oklar-yanlarda .sl-ok { top: calc(50% - 1.2rem); }
.sl-sayac { position: absolute; right: 1.5rem; top: 1.4rem; z-index: 5; font-size: .85rem; color: rgba(255,255,255,.8); letter-spacing: .08em; }
.sl-sayac b { font-size: 1.3rem; color: #fff; }
.sl-ilerleme { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 6; background: rgba(255,255,255,.15); }
.sl-ilerleme span { display: block; height: 100%; width: 0; background: var(--sl-vurgu); }
.sl.oynuyor .sl-ilerleme span { animation: sl-ilerle var(--sl-sure, 6s) linear forwards; }
.sl.duraklatildi .sl-ilerleme span { animation-play-state: paused; }
@keyframes sl-ilerle { to { width: 100%; } }
.sl-kucukler { max-width: var(--kapsayici, 1200px); margin: .8rem auto 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: .6rem; overflow-x: auto; padding-bottom: .2rem; }
.sl-kucukler button { position: relative; display: grid; gap: .4rem; text-align: left; padding: .4rem; border: 2px solid transparent; border-radius: 12px; background: var(--kart); color: var(--metin); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; opacity: .7; transition: opacity .2s, border-color .2s; }
.sl-kucukler button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.sl-kucukler button[aria-selected="true"] { opacity: 1; border-color: var(--ana); }

/* ── Parcali slayt ── */
.slp-sar { padding-block: var(--bolum-ust, 1.25rem) var(--bolum-alt, 1.25rem) !important; }
.slp-tam .kapsayici { max-width: none; padding-inline: var(--slp-bosluk, 12px); }
.slp { display: grid; gap: var(--slp-bosluk, 12px); height: var(--slp-yukseklik, 520px); }
.slp-parca { position: relative; min-width: 0; min-height: 0; border-radius: var(--slp-kose, 12px); overflow: hidden; }
.slp-parca .sl { height: 100%; border-radius: 0; }
.slp-bos { height: 100%; background: repeating-linear-gradient(135deg, var(--zemin-3, #eef0f4) 0 12px, var(--zemin-2, #f6f7f9) 12px 24px); }
.slp-buyuk-sag { grid-template-columns: 68fr 32fr; }
.slp-iki-esit { grid-template-columns: 1fr 1fr; }
.slp-uc-esit { grid-template-columns: repeat(3, 1fr); }
.slp-buyuk-sag-iki { grid-template-columns: 68fr 32fr; grid-template-rows: 1fr 1fr; }
.slp-buyuk-sag-iki .slp-p1 { grid-row: 1 / 3; }
.slp-buyuk-sol-iki { grid-template-columns: 32fr 68fr; grid-template-rows: 1fr 1fr; }
.slp-buyuk-sol-iki .slp-p1 { grid-column: 2; grid-row: 1 / 3; }
.slp-buyuk-sol-iki .slp-p2 { grid-column: 1; grid-row: 1; } .slp-buyuk-sol-iki .slp-p3 { grid-column: 1; grid-row: 2; }
.slp-buyuk-ust-uc { grid-template-columns: repeat(3, 1fr); grid-template-rows: 62fr 38fr; }
.slp-buyuk-ust-uc .slp-p1 { grid-column: 1 / -1; }
.slp-dort-izgara { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
/* Kucuk parcalarda yazi kucuk */
.slp-parca:not(.slp-p1) .sl-baslik, .slp-uc-esit .sl-baslik, .slp-dort-izgara .sl-baslik { font-size: clamp(1.15rem, 1.8vw, 1.7rem); }
.slp-parca:not(.slp-p1) .sl-metin { font-size: .9rem; }
.slp-parca:not(.slp-p1) .sl-icerik { padding: 1.4rem; }
.slp-parca:not(.slp-p1) .sl-dugme { min-height: 40px; padding: 0 1.1rem; font-size: .88rem; }
.slp-parca:not(.slp-p1) .sl-ok { width: 38px; height: 38px; }
.slp-parca:not(.slp-p1) .sl-gosterge { bottom: .9rem; }

/* ── Telefon / tablet ── */
@media (max-width: 760px) {
  .sl-ty-tam { height: calc(100svh - var(--tepe-yukseklik, 0px)); aspect-ratio: auto; }
  .sl-ty-4-5 { height: auto; aspect-ratio: 4 / 5; }
  .sl-ty-kisa { height: 420px; aspect-ratio: auto; }
  .sl-y-tam:not([class*="sl-ty-"]), .sl-y-buyuk:not([class*="sl-ty-"]) { height: 78svh; min-height: 460px; }
  .sl-icerik { padding: 1.5rem 1.25rem 3.6rem; }
  .sl-oklar-yanlarda .sl-ok { display: none; }
  .sl-bolunmus .sl-slayt { grid-template-columns: 1fr; grid-template-rows: 46% 54%; }
  .sl-bolunmus .sl-medya { order: 0; }
  .sl-bolunmus.sl-y-orta, .sl-bolunmus.sl-y-kisa { height: 620px; }
  .sl-karusel .sl-slayt { flex-basis: 86% !important; }
  .sl-ortu { background: linear-gradient(0deg, rgba(5,10,25,calc(var(--sl-karartma) + .2)), rgba(5,10,25,calc(var(--sl-karartma) * .4))) !important; }
  .slp { height: auto; grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; }
  .slp-parca { grid-column: auto !important; grid-row: auto !important; height: 220px; }
  .slp-p1 { grid-column: 1 / -1 !important; height: 380px; }
  .slp-iki-esit .slp-parca, .slp-buyuk-sag .slp-parca { grid-column: 1 / -1 !important; }
  .slp-buyuk-sag .slp-p2 { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl * { transition-duration: 0s !important; animation: none !important; }
}
.slp-parca:not(.slp-p1) .sl-ok { display: none; }
.slp-uc-esit .sl-ok, .slp-dort-izgara .sl-ok, .slp-iki-esit .slp-p1 .sl-ok { display: grid; }
.slp-uc-esit .sl-icerik, .slp-dort-izgara .sl-icerik { padding-inline: 4.2rem; }
@media (max-width: 760px) { .slp-parca:has(.slp-bos) { display: none; } }

/* Karartma bicimi ya da rengi secilen slayt (17 Eki 2026, api/karartma.js) */
.sl-slayt[style*="--sl-ortu"] .sl-ortu { background: var(--sl-ortu) !important; }

/* tepe-esnek.css */
/* ═══════════════════════════════════════════════════════════════════
   UST BASLIK — AYARLANABILIR (api/tepe-esnek.js, 16 Eki 2026)
   Degiskenler header'in style ozniteliginden gelir; bos olanlar siteye duser.
   ═══════════════════════════════════════════════════════════════════ */
.te {
  --te-zemin: color-mix(in srgb, var(--zemin) 92%, transparent);
  --te-yazi: var(--metin-2);
  --te-kaydir-zemin: var(--te-zemin);
  --te-kaydir-yazi: var(--te-yazi);
  --te-vurgu: var(--ana);
  --te-serit-zemin: var(--te-vurgu);
  --te-serit-yazi: #fff;
  --te-yazi-boyut: .93rem;
  --te-kalinlik: 500;
  --te-harf: 0;
  --te-gecis: .35s ease;
  --te-guncel-h: var(--te-h);
  position: sticky; top: 0; z-index: 60; width: 100%;
  color: var(--te-yazi); background: var(--te-zemin);
  transition: background var(--te-gecis), color var(--te-gecis), box-shadow var(--te-gecis), transform .45s ease;
}
.te.te-zeminli { background: var(--te-zemin); }
.te-d-sabit-degil { position: relative; }
.te-d-saydam-baslar { position: fixed; left: 0; right: 0; background: transparent; }
.te-d-saydam-baslar.te-zeminli { background: var(--te-zemin); }
.te-d-gizli-baslar { position: fixed; left: 0; right: 0; transform: translateY(-110%); }
.te-d-gizli-baslar.te-gorunur { transform: none; }
.te.te-kaydi { background: var(--te-kaydir-zemin); color: var(--te-kaydir-yazi); }
.te.te-kucul.te-kaydi { --te-guncel-h: var(--te-h-kucuk); }
.te.te-golge.te-kaydi, .te-golge.te-d-yapiskan { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.07); }
.te.te-alt-cizgi { border-bottom: 1px solid color-mix(in srgb, var(--te-vurgu) 70%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .te-inis.te-kaydi { animation: te-in .5s ease; }
}
@keyframes te-in { from { transform: translateY(-100%); } }

/* Konteyner */
.te-ic { display: flex; align-items: center; gap: 1.5rem; min-height: var(--te-guncel-h); width: min(100% - 2rem, var(--kapsayici, 1200px)); margin-inline: auto; transition: min-height var(--te-gecis); }
.te-k-tam .te-ic { width: auto; margin-inline: clamp(1rem, 3vw, 3rem); }
.te-k-kart .te-cubuk, .te-k-kart-alt .te-cubuk { width: min(100% - 2rem, var(--kapsayici, 1200px)); margin: 0 auto; }
.te-k-kart { background: transparent; }
.te-k-kart .te-cubuk { margin-top: .8rem; background: var(--te-zemin); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.te-k-kart .te-ic { width: auto; padding-inline: 1.4rem; }
.te-k-kart.te-kaydi .te-cubuk { margin-top: 0; width: 100%; border-radius: 0; background: var(--te-kaydir-zemin); }
.te-k-kart.te-kaydi .te-ic { width: min(100% - 2rem, var(--kapsayici, 1200px)); padding: 0; }
.te-k-kart-alt { background: transparent; }
.te-k-kart-alt .te-cubuk { background: var(--te-zemin); border-radius: 0 0 22px 22px; border-bottom: 1px solid var(--te-vurgu); }
.te-k-kart-alt .te-ic { width: auto; padding-inline: 2rem; }

/* Marka */
.te-marka { flex: none; display: flex; align-items: center; }
.te-marka .marka { color: inherit; }
.te-marka img { max-height: calc(var(--te-guncel-h) * .58); width: auto; transition: max-height var(--te-gecis); }

/* Menu */
.te .te-menu > ul { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.te .te-menu > ul > li { position: relative; }
.te .te-menu > ul > li > a {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: .55rem .8rem; border-radius: 8px;
  color: inherit; font-size: var(--te-yazi-boyut); font-weight: var(--te-kalinlik); letter-spacing: var(--te-harf); text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.te-yazi-buyuk .te-menu > ul > li > a, .te-yazi-buyuk-aralikli .te-menu > ul > li > a { text-transform: uppercase; }
.te-yazi-buyuk-aralikli .te-menu > ul > li > a { letter-spacing: max(var(--te-harf), 2px); }
.te-oksuz .te-menu > ul > li > a > .menu-ok { display: none; }
.te .menu-ac { display: none; }
.te-kapat { display: none; }
/* Yerlesimler */
.te-sol-menu-sag .te-menu { margin-left: auto; }
.te-sol-menu-orta .te-menu { margin-inline: auto; }
.te-sol-menu-sol .te-menu { margin-right: auto; }
.te-sol-menu-sol .te-sag, .te-sol-menu-sag .te-sag { margin-left: 0; }
.te-orta-logo-bolunmus .te-ic { justify-content: center; }
.te-orta-logo-bolunmus .te-menu-sol { flex: 1; display: flex; justify-content: flex-end; }
.te-orta-logo-bolunmus .te-menu-sag { flex: 1; display: flex; justify-content: flex-start; }
.te-orta-logo-bolunmus .te-menu-mobil { display: none; }
.te-orta-logo-bolunmus .te-sag { position: absolute; right: clamp(1rem, 3vw, 3rem); }
.te-orta-logo-bolunmus .te-cubuk { position: relative; }
.te-orta-logo-iki-satir .te-ic-ust { min-height: calc(var(--te-guncel-h) * .58); }
.te-orta-logo-iki-satir .te-ic-ust .te-marka { margin-inline: auto; }
.te-orta-logo-iki-satir .te-sol-bos { flex: 1; }
.te-orta-logo-iki-satir .te-ic-ust .te-sag { flex: 1; justify-content: flex-end; }
.te-orta-logo-iki-satir .te-ic-alt { min-height: calc(var(--te-guncel-h) * .42); justify-content: center; }
.te-orta-logo-iki-satir .te-marka img { max-height: calc(var(--te-guncel-h) * .42); }
/* Kaydirinca logolu satir gizlenmez, kuculur: baslikta logo kalsin */
.te-orta-logo-iki-satir.te-kaydi .te-ic-ust { min-height: calc(var(--te-guncel-h) * .55); }
.te-orta-logo-iki-satir.te-kaydi .te-ic-alt { min-height: calc(var(--te-guncel-h) * .45); }
.te-menu-bandi .te-ic-alt { border-block: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.te-hamburger .te-menu { display: none; }
.te-hamburger .te-sag .menu-dugme { display: inline-flex !important; }

/* Hover etkileri */
.te-h-renk .te-menu > ul > li > a:hover, .te-h-renk .te-menu > ul > li:focus-within > a { color: var(--te-vurgu); background: none; }
.te-h-zemin .te-menu > ul > li > a:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.te-h-alt-cizgi .te-menu > ul > li > a::after, .te-h-alt-cizgi-orta .te-menu > ul > li > a::after, .te-h-ust-cizgi .te-menu > ul > li > a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.te-h-alt-cizgi-orta .te-menu > ul > li > a::after { height: 2px; bottom: 0; background: var(--te-vurgu); transform-origin: center; }
.te-h-ust-cizgi .te-menu > ul > li > a::after { top: calc((var(--te-guncel-h) - 2.4rem) / -2); bottom: auto; }
.te-h-alt-cizgi .te-menu > ul > li > a:hover::after, .te-h-alt-cizgi-orta .te-menu > ul > li > a:hover::after, .te-h-ust-cizgi .te-menu > ul > li > a:hover::after,
.te-h-alt-cizgi .te-menu > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
.te-h-alt-cizgi .te-menu > ul > li > a:hover, .te-h-alt-cizgi-orta .te-menu > ul > li > a:hover, .te-h-ust-cizgi .te-menu > ul > li > a:hover { background: none; }

/* Alt menu kutulari */
.te .menu-alt, .te .mega-panel { color: var(--metin); }
.te .menu-alt { position: absolute; top: 100%; left: 0; min-width: 220px; list-style: none; margin: 0; padding: .45rem; background: var(--kart); border: 1px solid var(--kenar); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, transform .28s ease, visibility .28s; z-index: 5; }
.te .menu-alt a { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 8px; color: var(--metin-2); text-decoration: none; font-size: .9rem; }
.te .menu-alt a:hover { background: var(--zemin-2); color: var(--metin); }
.te .menu-acilir:hover > .menu-alt, .te .menu-acilir:focus-within > .menu-alt { opacity: 1; visibility: visible; transform: none; }
.te .menu-alt-ic { top: -.45rem; left: 100%; }
.te-anim-yukari .menu-alt, .te-anim-yukari .mega-panel { transform: translateY(12px); }
.te-anim-asagi .menu-alt, .te-anim-asagi .mega-panel { transform: translateY(-10px); }
.te-anim-solma .menu-alt { transform: none; }
.te .menu-mega { position: static; }
.te .mega-panel { top: 100%; }
/* kose: koseli, ayiricili */
.te-alt-kose .menu-alt { border-radius: 0; border: 0; padding: 0; min-width: 200px; box-shadow: 0 10px 25px rgba(68,68,68,.15); }
.te-alt-kose .menu-alt li + li { border-top: 1px solid var(--kenar); }
.te-alt-kose .menu-alt a { border-radius: 0; padding: .7rem 1.2rem; font-size: .82rem; }
.te-alt-kose .menu-alt a:hover { background: none; color: var(--metin-3); }
.te-alt-kose .mega-panel { border-radius: 0; }
/* koyu */
.te-alt-koyu .menu-alt, .te-alt-koyu .mega-panel { background: #111; border-color: #222; color: #ddd; border-radius: 4px; }
.te-alt-koyu .menu-alt a { color: #bdbdbd; }
.te-alt-koyu .menu-alt a:hover { background: color-mix(in srgb, var(--te-vurgu) 22%, #111); color: #fff; }
.te-alt-koyu .menu-aciklama, .te-alt-koyu .mega-yazi small { color: #8d8d8d; }
/* kart-buyuk */
.te-alt-kart-buyuk .menu-alt { border-radius: 6px; padding: 1rem .6rem; min-width: 250px; border: 0; }
.te-alt-kart-buyuk .menu-alt a { text-transform: uppercase; font-weight: 600; font-size: .9rem; background: none; }
.te-alt-kart-buyuk .menu-alt a:hover { color: var(--te-vurgu); background: none; }
/* ust-cizgili */
.te-alt-ust-cizgili .menu-alt { border-radius: 0; border: 0; border-top: 2px solid var(--te-vurgu); padding: 0; min-width: 240px; }
.te-alt-ust-cizgili .menu-alt li + li { border-top: 1px solid var(--kenar); }
.te-alt-ust-cizgili .menu-alt a { border-radius: 0; padding: .75rem 1.2rem; font-weight: 600; }
.te-alt-ust-cizgili .menu-alt a:hover { background: var(--te-vurgu); color: #fff; }
/* dolgu: satir alttan dolar */
.te-alt-dolgu .menu-alt { border-radius: 0; border: 0; padding: 0; min-width: 265px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.te-alt-dolgu .menu-alt a { position: relative; z-index: 0; border-radius: 0; padding: .75rem 1.25rem; font-weight: 600; overflow: hidden; }
.te-alt-dolgu .menu-alt a::before { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--te-vurgu); transition: height .3s ease; z-index: -1; opacity: 0; }
.te-alt-dolgu .menu-alt a:hover { background: none; color: #fff; }
.te-alt-dolgu .menu-alt a:hover::before { height: 100%; opacity: 1; }
.te .menu-rozet { background: var(--te-vurgu); }

/* Sag ogeler */
.te-sag { display: flex; align-items: center; gap: .5rem; flex: none; margin-left: auto; }
.te-ikon {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; cursor: pointer;
}
.te-ikon svg { width: 19px; height: 19px; }
.te-ikon:hover { border-color: color-mix(in srgb, currentColor 25%, transparent); }
.te-ikon-kare .te-ikon { border: 1px solid var(--te-vurgu); border-radius: 3px; color: var(--te-vurgu); }
.te .tema-gunes { display: none; }
:root[data-tema="koyu"] .te .tema-ay { display: none; }
:root[data-tema="koyu"] .te .tema-gunes { display: block; }
.te-yan-dugme { background: var(--te-vurgu); color: #fff; border-radius: 50%; }
.te .menu-dugme { display: none; }
.te-sosyal { display: flex; align-items: center; gap: .35rem; }
.te-sosyal a { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: inherit; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.te-sosyal svg { width: 15px; height: 15px; }
.te-dugme { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.2rem; font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; transition: filter .2s ease, background .2s ease; }
.te-dugme-hap { border-radius: 999px; background: var(--te-vurgu); color: #fff; }
.te-dugme-hap.ikincil { background: transparent; color: inherit; border: 1px solid currentColor; }
.te-dugme-kare { border-radius: 0; background: #111; color: #fff; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; }
.te-dugme-cerceve { border-radius: 2px; border: 1px solid currentColor; color: inherit; font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; }
.te-dugme-metin { padding: 0; color: inherit; text-transform: uppercase; font-size: .9rem; }
.te-dugme-kutu { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--te-vurgu); color: #fff; transition: border-radius .3s ease; }
.te-dugme-kutu svg { width: 18px; height: 18px; }
.te-dugme-metin:hover .te-dugme-kutu { border-radius: 50%; }
.te-dugme:hover { filter: brightness(1.08); }
.te-telefon { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.te-telefon-kutu { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, var(--te-vurgu), #ff8a3d); color: #fff; }
.te-telefon-kutu svg { width: 20px; height: 20px; }
.te-telefon small { display: block; font-size: .72rem; opacity: .75; }
.te-telefon strong { font-size: .95rem; }
.te-arama-sar { position: relative; }
.te-arama { position: absolute; right: 0; top: calc(100% + 10px); display: flex; width: min(320px, 80vw); background: var(--kart); border: 1px solid var(--kenar); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.15); overflow: hidden; }
.te-arama input { flex: 1; border: 0; padding: .7rem .9rem; background: transparent; color: var(--metin); font: inherit; }
.te-arama button { border: 0; background: var(--te-vurgu); color: #fff; width: 44px; cursor: pointer; }
.te-arama button svg { width: 17px; height: 17px; }

/* Ust serit */
.te-serit { background: var(--te-serit-zemin); color: var(--te-serit-yazi); font-size: .82rem; transition: margin var(--te-gecis), opacity var(--te-gecis); }
.te-serit .te-ic { min-height: 42px; justify-content: space-between; }
.te.te-kaydi .te-serit { display: none; }
.te-serit-iletisim { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; }
.te-serit-iletisim a, .te-serit-iletisim span { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; }
.te-serit-iletisim svg { width: 14px; height: 14px; opacity: .85; }
.te-serit .te-sosyal a { width: 26px; height: 26px; border: 0; }
.te-serit-menu { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.te-serit-menu a { color: inherit; text-decoration: none; }
.te-serit-metin { margin: 0; }

/* Ilerleme cubugu */
.te-ilerleme { position: absolute; left: 0; top: 0; right: 0; height: 3px; z-index: 2; pointer-events: none; }
.te-ilerleme i { display: block; height: 100%; width: var(--te-ilerleme, 0%); background: var(--te-vurgu); transition: width .1s linear; }

/* Yan bilgi paneli */
.te-yan-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(340px, 90vw); padding: 2.5rem 2rem; overflow-y: auto;
  background: #1a1a1a; color: #e8e8e8; transform: translateX(105%); transition: transform .4s ease; display: flex; flex-direction: column; gap: 1.4rem;
}
.te-yan-panel[data-acik="evet"] { transform: none; }
.te-yan-panel .te-kapat { display: inline-grid; position: absolute; top: 1rem; right: 1rem; }
.te-yan-panel p { margin: 0; line-height: 1.7; color: #bdbdbd; }
.te-panel-iletisim { display: grid; gap: .6rem; }
.te-panel-iletisim a, .te-panel-iletisim span { display: flex; gap: .55rem; align-items: center; color: inherit; text-decoration: none; font-size: .9rem; }
.te-panel-iletisim svg { width: 16px; height: 16px; color: var(--te-vurgu, #0aa5e8); }
.te-ortu { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.45); }
.te-ortu[hidden] { display: none; }
.te-kapat { width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
.te-kapat svg { width: 20px; height: 20px; }

/* Menu paneli: hamburger yerlesimi (her ekranda) ve telefon cekmece/tam ekran */
.te .te-menu[data-acik="evet"] { display: block; }
@media (min-width: 1024px) {
  .te-hamburger .te-menu[data-acik="evet"] { position: fixed; z-index: 95; top: 0; bottom: 0; right: 0; width: min(420px, 92vw); padding: 5rem 2.5rem 2rem; background: #0e0e0e; color: #fff; overflow-y: auto; }
  .te-hamburger.te-panel-buyuk .te-menu[data-acik="evet"] > ul > li > a { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 600; letter-spacing: 0; text-transform: none; padding: .35rem 0; }
  .te-hamburger .te-menu[data-acik="evet"] > ul { flex-direction: column; align-items: flex-start; }
  .te-hamburger .te-menu[data-acik="evet"] .te-kapat { display: inline-grid; position: absolute; top: 1.2rem; right: 1.2rem; }
  .te-hamburger .te-menu .menu-alt { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; display: none; }
  .te-hamburger.te-mobil-tam-ekran .te-menu[data-acik="evet"] { left: 0; width: auto; background: rgba(255,255,255,.62); color: #1a1a1a; backdrop-filter: blur(40px); display: grid; place-items: center; }
}

@media (max-width: 1023px) {
  .te .te-menu-sol, .te .te-menu-sag { display: none; }
  .te-orta-logo-bolunmus .te-ic { justify-content: space-between; }
  .te-orta-logo-bolunmus .te-sag { position: static; }
  .te .menu-dugme { display: inline-flex; }
  .te .te-sag .te-sosyal, .te .te-telefon small, .te .te-serit-iletisim span { display: none; }
  .te .te-dugme { display: none; }
  .te .te-menu { display: none; position: fixed; inset: var(--te-guncel-h) 0 auto 0; margin: 0; max-height: calc(100vh - var(--te-guncel-h)); overflow-y: auto;
    background: var(--zemin); color: var(--metin); border-bottom: 1px solid var(--kenar); box-shadow: 0 16px 30px rgba(0,0,0,.12); padding: .6rem 1rem 1rem; z-index: 95; }
  .te .te-menu[data-acik="evet"] { display: block; }
  .te .te-menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .te .te-menu > ul > li { border-bottom: 1px solid var(--kenar); }
  .te .te-menu > ul > li > a { padding: .85rem .4rem; font-size: 1rem; letter-spacing: 0; }
  .te .te-menu > ul > li > a::after { display: none; }
  .te .menu-alt, .te .mega-panel { opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; }
  .te-mobil-cekmece-sag .te-menu, .te-mobil-cekmece-sol .te-menu, .te-mobil-tam-ekran .te-menu {
    display: block; inset: 0 0 0 auto; width: min(320px, 86vw); max-height: none; height: 100%; padding: 4.5rem 1.2rem 1.5rem; transform: translateX(105%); transition: transform .3s ease;
    background: #1d1d1f; color: #f2f2f2; border: 0;
  }
  .te-mobil-cekmece-sol .te-menu { inset: 0 auto 0 0; transform: translateX(-105%); }
  .te-mobil-tam-ekran .te-menu { width: auto; inset: 0; transform: translateY(-105%); background: rgba(255,255,255,.7); color: #111; backdrop-filter: blur(40px); }
  .te-mobil-cekmece-sag .te-menu[data-acik="evet"], .te-mobil-cekmece-sol .te-menu[data-acik="evet"], .te-mobil-tam-ekran .te-menu[data-acik="evet"] { transform: none; }
  .te-mobil-cekmece-sag .te-menu .te-kapat, .te-mobil-cekmece-sol .te-menu .te-kapat, .te-mobil-tam-ekran .te-menu .te-kapat { display: inline-grid; position: absolute; top: 1rem; right: 1rem; }
  .te-mobil-cekmece-sag .te-menu > ul > li, .te-mobil-cekmece-sol .te-menu > ul > li { border-color: rgba(255,255,255,.1); }
  .te-mobil-cekmece-sag .menu-alt a, .te-mobil-cekmece-sol .menu-alt a { color: #c9c9c9; }
}
@media (prefers-reduced-motion: reduce) { .te, .te *, .te-yan-panel { transition: none !important; animation: none !important; } }
/* Telefonda "basta gizli" baslik gorunur kalir: yoksa sayfa basinda menuye ulasilamiyor */
@media (max-width: 1023px) { .te-d-gizli-baslar { position: sticky; transform: none; } }

/* ── Duzeltmeler (ilk ekran denetimi, 16 Eki 2026) ── */
.te-arama[hidden] { display: none !important; }
.te-ortu { z-index: 55; }
/* Logo zemine gore (site temasindan bagimsiz) */
.te.te-logo-koyu:not(.te-kaydi) .marka-logo-acik, .te.te-kaydi.te-kl-koyu .marka-logo-acik { display: none !important; }
.te.te-logo-koyu:not(.te-kaydi) .marka-logo-koyu, .te.te-kaydi.te-kl-koyu .marka-logo-koyu { display: inline-block !important; }
.te.te-logo-acik:not(.te-kaydi) .marka-logo-koyu, .te.te-kaydi.te-kl-acik .marka-logo-koyu { display: none !important; }
.te.te-logo-acik:not(.te-kaydi) .marka-logo-acik, .te.te-kaydi.te-kl-acik .marka-logo-acik { display: inline-block !important; }
/* Cekmecedeki logo cekmece zeminine gore */
.te-yan-panel .marka-logo-acik { display: none !important; }
.te-yan-panel .marka-logo-koyu { display: inline-block !important; }
@media (max-width: 1023px) {
  .te .menu-ac { display: inline-grid; color: inherit; }
  .te-serit { display: none; }
  .te .te-telefon > span:not(.te-telefon-kutu) { display: none; }
  .te-telefon-kutu { width: 40px; height: 40px; }
  .te-k-kart .te-cubuk, .te-k-kart-alt .te-cubuk { width: 100%; margin: 0; border-radius: 0; }
  .te-k-kart .te-ic, .te-k-kart-alt .te-ic { width: min(100% - 2rem, var(--kapsayici, 1200px)); padding: 0; }
  .te .te-ic { gap: .6rem; }
  .te-sag { gap: .2rem; }
  .te-mobil-cekmece-sag .te-menu > ul > li > a, .te-mobil-cekmece-sol .te-menu > ul > li > a { color: #f2f2f2; }
}

/* ═══ Dugmeler: konum, renk, simge, cihaz (17 Eki 2026) ═══ */
.te-d-renkli { background: var(--td-zemin, var(--te-vurgu, var(--ana))) !important; border-color: var(--td-zemin, var(--te-vurgu, var(--ana))) !important; color: var(--td-yazi, #fff) !important; }
.te-dugme.te-d-cerceve { background: transparent; border: 1.5px solid currentColor; color: inherit; }
.te-dugme.te-d-cerceve.te-d-renkli { background: transparent !important; color: var(--td-zemin, currentColor) !important; }
.te-dugme.te-d-yalin { background: none; border-color: transparent; color: inherit; padding-inline: .4rem; }
.te-d-simge { display: inline-flex; margin-right: .35rem; }
.te-d-simge svg { width: 1.05em; height: 1.05em; }
.te-sol-dugmeler { display: flex; align-items: center; gap: .5rem; margin-left: 1rem; }
.te-menu-dugme-li { display: flex; align-items: center; margin-left: .4rem; }
.te-menu-dugme-li .te-dugme { white-space: nowrap; }
.te-hesap svg { width: 22px; height: 22px; }
/* Gorunur arama kutusu */
.te-arama-kutu { display: flex; align-items: center; height: 40px; min-width: 220px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--te-zemin, #fff) 92%, currentColor 8%); }
.te-arama-kutu input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: inherit; padding: 0 .9rem; font: inherit; font-size: .9rem; outline: none; }
.te-arama-kutu button { width: 42px; height: 100%; border: 0; background: var(--te-vurgu, var(--ana)); color: #fff; display: grid; place-items: center; cursor: pointer; }
.te-arama-kutu button svg { width: 18px; height: 18px; }
/* Ust serit: bilgi kutulari, secilen menu, dugmeler */
.te-serit-bilgiler { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem; }
.te-bilgi { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; white-space: nowrap; }
a.te-bilgi:hover { opacity: .8; }
.te-bilgi svg { width: 16px; height: 16px; flex: none; }
.te-serit-sag { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.te-serit-dugmeler { display: flex; align-items: center; gap: .4rem; }
.te-serit-dugmeler .te-dugme { min-height: 28px; padding: .2rem .8rem; font-size: .78rem; }
.te-serit-menu a { color: inherit; }
.te-serit-orta .te-ic { justify-content: center; gap: 1.5rem; }
.te-serit-sol .te-ic { justify-content: flex-start; gap: 1.5rem; }
/* Cihaz secimi */
@media (max-width: 1023px) {
  .te-c-masaustu { display: none !important; }
  .te-arama-kutu { min-width: 0; width: 40px; }
  .te-arama-kutu input { display: none; }
  .te-sol-dugmeler { display: none; }
}
@media (min-width: 1024px) { .te-c-mobil { display: none !important; } }
@media (max-width: 767px) { .te-serit-bilgiler .te-bilgi:nth-child(n+3) { display: none; } }
@media (min-width: 1024px) and (max-width: 1365px) {
  .te-arama-kutu { min-width: 0; width: 40px; border-radius: 50%; }
  .te-arama-kutu input { display: none; }
  .te-arama-kutu button { width: 40px; border-radius: 50%; }
}

/* Koyu temaya uyum (17 Eki 2026): hazir duzenlerin sabit acik renkleri koyu temada
   sitenin koyu belirteclerine (ya da secilen koyu renklere) gecer. Satir ici --te-zemin
   degiskenini ezebilmek icin !important. "Acik temadaki renkler kalsin" secilirse sinif yok. */
:root[data-tema="koyu"] .te.te-koyu-uyum {
  --te-zemin: var(--te-zemin-koyu, var(--kart)) !important; --te-yazi: var(--te-yazi-koyu, var(--metin)) !important;
  --te-kaydir-zemin: var(--te-kaydir-zemin-koyu, var(--te-zemin-koyu, var(--kart))) !important; --te-kaydir-yazi: var(--te-kaydir-yazi-koyu, var(--te-yazi-koyu, var(--metin))) !important;
  border-color: var(--kenar);
}
:root[data-tema="koyu"] .te.te-koyu-uyum .marka-logo-acik { display: none !important; }
:root[data-tema="koyu"] .te.te-koyu-uyum .marka-logo-koyu { display: inline-block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .te.te-koyu-uyum {
    --te-zemin: var(--te-zemin-koyu, var(--kart)) !important; --te-yazi: var(--te-yazi-koyu, var(--metin)) !important;
    --te-kaydir-zemin: var(--te-kaydir-zemin-koyu, var(--te-zemin-koyu, var(--kart))) !important; --te-kaydir-yazi: var(--te-kaydir-yazi-koyu, var(--te-yazi-koyu, var(--metin))) !important;
    border-color: var(--kenar);
  }
  :root:not([data-tema="acik"]) .te.te-koyu-uyum .marka-logo-acik { display: none !important; }
  :root:not([data-tema="acik"]) .te.te-koyu-uyum .marka-logo-koyu { display: inline-block !important; }
}
:root[data-tema="koyu"] .te.te-koyu-uyum .marka-slogan { color: var(--metin-3) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .te.te-koyu-uyum .marka-slogan { color: var(--metin-3) !important; } }
.te-serit-sol { display: flex; align-items: center; gap: .9rem 1.4rem; flex-wrap: wrap; min-width: 0; }

/* ═══ KAYDIRINCA SAYFA ZIPLAMASIN (17 Eki 2026) ══════════════════════
   Enver: "headerdeki yesil alan gizlenip aciliyor kayiyor". Baslik sayfa akisinda
   (sticky) duruyordu; 40px'te serit display:none ile kalkip baslik kuculunce icerik
   73px birden yukari sicriyor, kaydirma esigin altina dusup serit geri geliyordu.
   1) Serit kaldirilmaz: baslik serit yuksekligi kadar yukarida yapisir (top eksi),
      serit sayfayla birlikte dogal olarak kayip gider. "Hep gorunsun" secilirse top 0.
   2) Kuculme payi alttan dengelenir (margin-bottom), akisin toplam yuksekligi sabit kalir.
   --te-serit-h site.js'te olculur. Sabit/saydam (fixed) basliklar akista olmadigi icin haric. */
.te-k-kart { --te-kart-pay: .8rem; }
.te:not(.te-d-saydam-baslar):not(.te-d-gizli-baslar) {
  transition: background var(--te-gecis), color var(--te-gecis), box-shadow var(--te-gecis), transform .45s ease, margin-bottom var(--te-gecis);
}
.te.te-kaydi:not(.te-d-saydam-baslar):not(.te-d-gizli-baslar) { margin-bottom: calc(var(--te-h) - var(--te-guncel-h) + var(--te-kart-pay, 0px)); }
.te.te-serit-kayar:not(.te-d-saydam-baslar):not(.te-d-gizli-baslar) { top: calc(-1 * var(--te-serit-h, 0px)); }
@media (min-width: 1024px) {
  .te.te-serit-kayar.te-kaydi:not(.te-d-saydam-baslar):not(.te-d-gizli-baslar) .te-serit,
  .te.te-serit-sabit.te-kaydi .te-serit { display: block; }
}
@media (max-width: 1023px) { .te-k-kart { --te-kart-pay: 0px; } }
/* Kart duzeninde cubugun ust boslugu da ayni surede kapanir; tarayicinin kaydirma tutturmasi sicratmasin */
.te-k-kart .te-cubuk { transition: margin-top var(--te-gecis), border-radius var(--te-gecis), width var(--te-gecis); }
.te { overflow-anchor: none; }

/* ── Arama acilisi (17 Eki 2026): menunun altinda serit, pencere, tam ekran ── */
.te-d-sabit-degil:has(.te-arama-serit) { position: relative; }
.te-arama-serit { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--kart, #fff); color: var(--metin);
  border-top: 1px solid var(--kenar); border-bottom: 1px solid var(--kenar); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); padding: 1rem 0 1.1rem;
  animation: te-ara-in .18s ease-out; }
.te-arama-serit[hidden] { display: none !important; }
.te-arama-serit .te-ic { display: grid; gap: .8rem; }
.te-arama-genis { display: flex; align-items: stretch; width: 100%; min-height: 52px; border: 1.5px solid var(--kenar); border-radius: 12px; overflow: hidden; background: var(--zemin, #fff); }
.te-arama-genis:focus-within { border-color: var(--te-vurgu, var(--ana)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--te-vurgu, var(--ana)) 22%, transparent); }
.te-arama-genis input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--metin); font: inherit; font-size: 1.02rem; padding: 0 1.1rem; }
.te-arama-genis input::placeholder, .te-arama-kutu input::placeholder, .te-arama input::placeholder { color: var(--metin-3); opacity: 1; }
.te-arama-genis button, .te-arama-kutu button.te-ara-yazili, .te-arama button.te-ara-yazili { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 56px; padding: 0 1.1rem; border: 0;
  background: var(--te-vurgu, var(--ana)); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.te-arama-kutu button.te-ara-yazili { width: auto; border-radius: 999px; margin: 3px; height: calc(100% - 6px); }
.te-arama-genis button svg { width: 19px; height: 19px; }
.te-ara-oneriler { display: flex; flex-wrap: wrap; gap: .45rem; }
.te-ara-oneriler a { padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--kenar); color: var(--metin-2); text-decoration: none; font-size: .86rem; }
.te-ara-oneriler a:hover, .te-ara-oneriler a:focus-visible { border-color: var(--te-vurgu, var(--ana)); color: var(--te-vurgu, var(--ana)); }

.te-arama-pencere { width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); margin: 12vh auto auto; padding: 1.6rem 1.6rem 1.4rem; border: 1px solid var(--kenar);
  border-radius: 18px; background: var(--kart, #fff); color: var(--metin); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); display: none; gap: .9rem; }
.te-arama-pencere[open] { display: grid; animation: te-ara-in .2s ease-out; }
.te-arama-pencere::backdrop { background: rgba(4, 8, 18, var(--te-ap-karartma, .55)); backdrop-filter: blur(3px); }
.te-arama-pencere.te-ap-tam { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border: 0; border-radius: 0;
  align-content: start; padding: clamp(4rem, 14vh, 9rem) max(1.25rem, calc((100vw - 760px) / 2)) 2rem; background: color-mix(in srgb, var(--kart, #fff) 96%, transparent); }
.te-ap-baslik { margin: 0; padding-right: 2.5rem; font-family: var(--yazi-baslik, inherit); font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 700; color: var(--metin); }
.te-ap-tam .te-ap-baslik { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.te-ap-aciklama { margin: -.4rem 0 0; color: var(--metin-2); font-size: .95rem; }
.te-ap-kapat { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--metin-2); cursor: pointer; display: grid; place-items: center; }
.te-ap-kapat:hover { background: color-mix(in srgb, var(--metin) 8%, transparent); }
.te-ap-kapat svg { width: 20px; height: 20px; }
@keyframes te-ara-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .te-arama-serit, .te-arama-pencere[open] { animation: none; } }
@media (max-width: 600px) { .te-arama-pencere:not(.te-ap-tam) { margin-top: 1rem; padding: 1.2rem 1rem 1rem; } .te-arama-genis button span { display: none; } }

/* alt-esnek.css */
/* ALT BILGI — AYARLANABILIR (16 Eki 2026) — api/alt-esnek.js */
.ae {
  --ae-zemin: #0f1419; --ae-yazi: #b9c2cf; --ae-baslik: #fff; --ae-vurgu: #3b8bff; --ae-cizgi: #26303b;
  position: relative; background: var(--ae-zemin); color: var(--ae-yazi); padding: 0 !important; margin-top: 0;
}
.ae[style*="--ae-zemin2"] { background: linear-gradient(160deg, var(--ae-zemin), var(--ae-zemin2)); }
.ae .kapsayici { position: relative; z-index: 1; padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 1.2rem; }
.ae a { color: var(--ae-yazi); text-decoration: none; transition: color .15s; }
.ae a:hover { color: var(--ae-vurgu); }
.ae h2, .ae h3 { color: var(--ae-baslik); }
.ae .marka-ad, .ae .marka { color: var(--ae-baslik); }
/* Gecis */
.ae-ay-cizgi { border-top: 1px solid var(--ae-cizgi); }
.ae-ayirici { position: absolute; left: 0; right: 0; top: -59px; width: 100%; height: 60px; fill: var(--ae-zemin); display: block; }
.ae-ay-dalga, .ae-ay-egik { margin-top: 60px; }
/* Ust bant */
.ae-bant { margin: 0 0 2.5rem; padding: 1.6rem clamp(1.2rem, 3vw, 2.2rem); border-radius: 18px; border: 1px solid var(--ae-cizgi); background: color-mix(in srgb, var(--ae-baslik) 5%, transparent); }
.ae-bant-cagri { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; background: color-mix(in srgb, var(--ae-vurgu) 16%, transparent); border-color: color-mix(in srgb, var(--ae-vurgu) 35%, transparent); }
.ae-bant-cagri h2 { margin: 0 0 .3rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.ae-bant-cagri p { margin: 0; }
.ae-dugme { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.4rem; border-radius: 999px; background: var(--ae-vurgu); color: #fff !important; font-weight: 700; }
.ae-dugme:hover { filter: brightness(1.1); }
.ae-bant-iletisim { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
/* Izgara */
.ae-izgara { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem 2.5rem; }
.ae-izgara-iletisim { grid-template-columns: minmax(260px, 1.6fr) repeat(auto-fit, minmax(150px, 1fr)); }
.ae-marka p { margin: .9rem 0 0; line-height: 1.65; max-width: 34ch; }
.ae-sutun h3 { margin: 0 0 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ae-sutun ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ae-sutun li a { font-size: .95rem; }
.ae-iletisim ul, .ae-iletisim-buyuk { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ae-iletisim-buyuk { margin-top: 1.4rem; }
.ae li:has(.ae-simge) { display: flex; gap: .7rem; align-items: flex-start; }
.ae-simge { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--ae-vurgu) 18%, transparent); color: var(--ae-vurgu); }
.ae-simge svg { width: 18px; height: 18px; }
.ae li small { display: block; font-size: .75rem; opacity: .8; }
.ae li strong { font-weight: 600; color: var(--ae-baslik); }
.ae-iletisim-buyuk li strong, .ae-iletisim-buyuk li a { font-size: 1.05rem; color: var(--ae-baslik); }
.ae-sosyal { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.ae-sosyal a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ae-cizgi); }
.ae-sosyal a:hover { background: var(--ae-vurgu); border-color: var(--ae-vurgu); color: #fff; }
.ae-sosyal svg { width: 17px; height: 17px; }
.ae-magazalar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.ae-magaza { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem; border-radius: 10px; border: 1px solid var(--ae-cizgi); background: color-mix(in srgb, var(--ae-baslik) 6%, transparent); }
.ae-magaza svg { width: 22px; height: 22px; }
.ae-magaza small { display: block; font-size: .65rem; opacity: .8; } .ae-magaza strong { font-size: .9rem; color: var(--ae-baslik); }
/* Ortali ve tek satir */
.ae-ortali { display: grid; justify-items: center; text-align: center; gap: 1rem; }
.ae-ortali p { margin: 0; max-width: 56ch; line-height: 1.65; }
.ae-tek-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; }
.ae-tek { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.ae-tek .ae-sosyal { margin: 0; }
.ae-tek-satir .kapsayici { padding-top: 1.6rem; }
/* Kartli */
.ae-kartli { background: transparent; }
.ae-kartli .kapsayici { padding-top: 1.5rem; }
.ae-kartli .ae-icerik { padding: clamp(1.5rem, 4vw, 3rem); border-radius: 24px; background: var(--ae-zemin); border: 1px solid var(--ae-cizgi); box-shadow: 0 20px 50px rgba(15, 23, 42, .08); }
.ae-kartli { background: color-mix(in srgb, var(--ae-zemin) 60%, var(--zemin, #fff)); }
/* Alt serit */
.ae .guven-bandi, .ae .odeme-bandi { margin-top: 2rem; }
.ae-serit { display: flex; align-items: center; gap: .6rem 1.5rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--ae-cizgi); font-size: .85rem; }
.ae-serit p { margin: 0; }
.ae-serit .surum-rozet { margin-left: auto; }
.ae-yukari { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ae-cizgi); margin-left: auto; }
.ae-serit .surum-rozet + .ae-yukari { margin-left: 0; }
.ae-yukari svg { width: 18px; height: 18px; }
.ae-yukari:hover { background: var(--ae-vurgu); color: #fff !important; border-color: var(--ae-vurgu); }
@media (max-width: 760px) {
  .ae-izgara, .ae-izgara-iletisim { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
  .ae-marka { grid-column: 1 / -1; }
  .ae-tek { flex-direction: column; text-align: center; }
  .ae-bant-cagri { flex-direction: column; align-items: flex-start; }
}
/* Genel paragraf/rozet renkleri koyu zeminde okunmuyordu: alt bilginin kendi renkleri */
footer.ae p, footer.ae .ae-serit p, footer.ae .alt-kunye { color: var(--ae-yazi); }
footer.ae .surum-rozet { background: transparent; color: var(--ae-yazi); border: 1px solid var(--ae-cizgi); }
footer.ae .surum-rozet:hover { color: var(--ae-vurgu); border-color: var(--ae-vurgu); }

/* acilir.css */
/* ACILIR PENCERE (POPUP) — api/bilesenler-acilir.js, davranis site.js [data-ap] */
.ap-yer { display: contents; }
.ap { --ap-zemin: var(--kart, #fff); --ap-vurgu: var(--ana, #2563eb); padding: 0; border: 0; background: transparent; max-width: none; max-height: none; color: var(--metin); overflow: visible; }
.ap::backdrop { background: rgba(5, 10, 25, .55); backdrop-filter: blur(3px); }
.ap[open] .ap-kutu { animation: ap-gel .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes ap-gel { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.ap-kutu { position: relative; display: grid; background: var(--ap-zemin); color: var(--metin); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); overflow: hidden; }
.ap-icerik { display: grid; gap: .8rem; padding: clamp(1.6rem, 4vw, 2.4rem); text-align: center; justify-items: center; }
.ap-kapat { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: inherit; display: grid; place-items: center; cursor: pointer; }
.ap-kapat:hover { background: rgba(0, 0, 0, .14); }
.ap-kapat svg { width: 18px; height: 18px; }
.ap-rozet { padding: .3rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--ap-vurgu) 14%, transparent); color: var(--ap-vurgu); font-weight: 800; font-size: .82rem; letter-spacing: .04em; }
.ap-baslik { margin: 0; font-family: var(--yazi-baslik); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; color: var(--metin); }
.ap-metin { margin: 0; color: var(--metin-2); line-height: 1.6; max-width: 46ch; }
.ap-dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.6rem; border: 0; border-radius: 999px; background: var(--ap-vurgu); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.ap-dugme:hover { filter: brightness(1.08); }
.ap-reddet { border: 0; background: none; color: var(--metin-3); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.ap-kupon { display: inline-flex; align-items: center; gap: .8rem; padding: .55rem .6rem .55rem 1rem; border: 2px dashed var(--ap-vurgu); border-radius: 12px; background: none; color: var(--metin); cursor: pointer; font: inherit; }
.ap-kupon code { font-size: 1.15rem; font-weight: 800; letter-spacing: .08em; }
.ap-kupon span { padding: .3rem .7rem; border-radius: 8px; background: var(--ap-vurgu); color: #fff; font-size: .8rem; font-weight: 700; }
.ap-sayac { display: flex; gap: .5rem; }
.ap-sayac span { display: grid; min-width: 58px; padding: .5rem .3rem; border-radius: 10px; background: color-mix(in srgb, var(--metin) 7%, transparent); font-size: .7rem; color: var(--metin-3); }
.ap-sayac b { font-size: 1.4rem; color: var(--metin); font-variant-numeric: tabular-nums; }
.ap-form { display: grid; gap: .55rem; width: 100%; max-width: 360px; }
.ap-form input:not([type="checkbox"]) { min-height: 46px; padding: 0 .9rem; border: 1px solid var(--kenar-koyu, var(--kenar)); border-radius: 10px; background: var(--zemin); color: var(--metin); font: inherit; }
.ap-onay { display: flex; gap: .5rem; align-items: flex-start; text-align: left; font-size: .8rem; color: var(--metin-2); }
.ap-onay a { color: var(--ap-vurgu); }
.ap-bal { position: absolute; left: -9999px; width: 1px; height: 1px; }
.ap-durum { margin: 0; font-size: .85rem; min-height: 1.2em; }
.ap-durum.hata { color: #dc2626; } .ap-durum.tamam { color: #16a34a; }
/* Duzenler */
.ap-d-orta .ap-kutu { width: min(480px, calc(100vw - 2rem)); }
.ap-d-gorselli .ap-kutu { width: min(820px, calc(100vw - 2rem)); grid-template-columns: 1fr 1.1fr; }
.ap-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-d-orta .ap-gorsel img { aspect-ratio: 16 / 8; height: auto; }
.ap-d-gorselli .ap-icerik { text-align: left; justify-items: start; align-content: center; }
.ap-d-kose { margin: auto 1.25rem 1.25rem auto; }
.ap-d-kose::backdrop { background: transparent; backdrop-filter: none; }
.ap-d-kose .ap-kutu { width: min(360px, calc(100vw - 2rem)); }
.ap-d-kose .ap-icerik { padding: 1.4rem; } .ap-d-kose .ap-baslik { font-size: 1.25rem; } .ap-d-kose .ap-gorsel img { aspect-ratio: 16 / 8; height: auto; }
.ap-d-serit { margin: auto 0 0; width: 100%; }
.ap-d-serit::backdrop { background: transparent; backdrop-filter: none; }
.ap-d-serit .ap-kutu { width: 100vw; border-radius: 16px 16px 0 0; }
.ap-d-serit .ap-icerik { grid-auto-flow: column; justify-content: center; align-items: center; gap: 1rem 1.5rem; padding: 1rem 3.5rem 1rem 1.5rem; text-align: left; }
.ap-d-serit .ap-baslik { font-size: 1.15rem; } .ap-d-serit .ap-metin { font-size: .9rem; }
.ap-d-tam { width: 100vw; height: 100vh; margin: 0; }
.ap-d-tam .ap-kutu { width: 100%; height: 100%; border-radius: 0; place-content: center; }
.ap-d-tam .ap-gorsel { position: absolute; inset: 0; opacity: .25; }
.ap-d-tam .ap-icerik { position: relative; }
.ap-d-tam .ap-baslik { font-size: clamp(2rem, 5vw, 3.4rem); }
@media (max-width: 640px) {
  .ap-d-gorselli .ap-kutu { grid-template-columns: 1fr; }
  .ap-d-gorselli .ap-gorsel img { aspect-ratio: 16 / 9; height: auto; }
  .ap-d-serit .ap-icerik { grid-auto-flow: row; text-align: center; padding: 1.2rem 1.2rem 1.4rem; }
  .ap-d-kose { margin: auto .75rem .75rem; }
}
/* Yonetimdeki onizlemede pencere acilmaz; bolum yerinde kutu olarak gorunur */
.yonetim-onizleme .ap-yer { display: block; padding: 2rem 1rem; background: repeating-linear-gradient(135deg, rgba(127, 127, 127, .06) 0 12px, transparent 12px 24px); }
.yonetim-onizleme .ap-yer::before { content: "Açılır pencere — sitede tetik gelince açılır"; display: block; text-align: center; font: 600 12px/1.6 system-ui, sans-serif; color: #64748b; margin-bottom: .8rem; }
.yonetim-onizleme .ap { position: static; display: block; margin: 0 auto; inset: auto; }
.yonetim-onizleme .ap-d-tam, .yonetim-onizleme .ap-d-serit { width: auto; height: auto; }
.yonetim-onizleme .ap-d-tam .ap-kutu { min-height: 360px; }

/* alt-menu-serit.css */
/* ═══ Alt bilgi menu seridi (Enver, 17 Eki 2026) ═══
   Kurum rozetlerinin ustunde 1-4 sutun baglanti listesi. Renkler alt bilginin
   kendi degiskenlerinden gelir; tasarimdan secilen renk --ams-* ile ezer. */
.alt-menu-serit {
  --ams-baslik-r: var(--ams-baslik, var(--alt-baslik, var(--metin)));
  --ams-yazi-r: var(--ams-yazi, var(--metin-2, inherit));
  --ams-vurgu-r: var(--ams-vurgu, var(--elektrik, var(--ana)));
  padding: var(--aralik-6, 2rem) 0 var(--aralik-5, 1.5rem);
}
.alt-menu-serit.ams-ust-cizgi { border-top: 1px solid var(--elektrik-cizgi, rgba(127, 127, 127, .25)); }
.ams-izgara { display: grid; gap: var(--aralik-5, 1.5rem) var(--aralik-6, 2rem); grid-template-columns: repeat(var(--ams-n, 4), minmax(0, 1fr)); }
.ams-1 .ams-izgara { --ams-n: 1; }
.ams-2 .ams-izgara { --ams-n: 2; }
.ams-3 .ams-izgara { --ams-n: 3; }
.ams-4 .ams-izgara { --ams-n: 4; }
/* Tek sutunda baglantilar yan yana akar (uzun tek liste alt alta sayfayi uzatmasin) */
.ams-1 .ams-sutun ul { display: flex; flex-wrap: wrap; gap: 0 var(--aralik-5, 1.5rem); }
.ams-sutun h3 {
  margin: 0 0 var(--aralik-4, 1rem); font-size: 1rem; font-weight: 700; line-height: 1.3;
  color: var(--ams-baslik-r); text-decoration: none;
}
.ams-buyuk .ams-sutun h3 { text-transform: uppercase; letter-spacing: .02em; }
.ams-sutun ul { list-style: none; margin: 0; padding: 0; }
.ams-sutun li { margin: 0; }
.ams-sutun a {
  position: relative; display: block; padding: .62rem 0; color: var(--ams-yazi-r);
  font-size: .9rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere;
  transition: color .18s ease, padding-left .18s ease;
}
.ams-cizgi .ams-sutun li a { border-bottom: 1px solid color-mix(in srgb, var(--ams-yazi-r) 14%, transparent); }
.ams-1.ams-cizgi .ams-sutun li a { border-bottom: 0; }
.ams-ok .ams-sutun a { padding-left: 1.3rem; }
.ams-ok .ams-sutun a::before {
  content: ""; position: absolute; left: .2rem; top: 50%; width: .42rem; height: .42rem;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg); opacity: .8;
}
.ams-sutun a:hover, .ams-sutun a:focus-visible { color: var(--ams-vurgu-r); }
.ams-ok .ams-sutun a:hover { padding-left: 1.55rem; }
.ams-sutun a .menu-simge { width: 20px; height: 20px; margin-right: .4rem; vertical-align: middle; border-radius: 5px; }
.ams-ipucu { display: none; }
.ams-bos { display: none; }
/* Yonetimdeki onizlemede bos serit tiklanabilir bir kutu olarak gorunur */
html.yonetim-onizleme .ams-bos { display: block; }
html.yonetim-onizleme .ams-ipucu {
  display: block; margin: 0; padding: 1rem; border: 1px dashed currentColor; border-radius: 10px;
  text-align: center; font-size: .85rem; opacity: .7;
}
@media (max-width: 1023px) {
  .ams-3 .ams-izgara, .ams-4 .ams-izgara { --ams-n: 2; }
}
@media (max-width: 599px) {
  .ams-izgara { --ams-n: 1 !important; }
  .ams-sutun h3 { margin-bottom: var(--aralik-3, .75rem); }
}

/* HTML kod alanlari: gorunur konumlarda cihaz secimi */
.html-alani:empty { display: none; }
@media (max-width: 767px) { .html-alani-masaustu { display: none; } }
@media (min-width: 768px) { .html-alani-mobil { display: none; } }

/* cerez.css */
/* ═══ Cerez onay penceresi (KVKK, 17 Eki 2026) ═══
   Reddet ve Kabul ayni boyda; renkler tasarimdan (--cz-*), yoksa sitenin kendi renkleri. */
.cerez-onay {
  --cz-zemin-r: var(--cz-zemin, var(--kart, #ffffff));
  --cz-yazi-r: var(--cz-yazi, var(--metin, #111827));
  --cz-vurgu-r: var(--cz-vurgu, var(--ana, #2563eb));
  position: fixed; z-index: 2147483000; color: var(--cz-yazi-r);
  background: var(--cz-zemin-r); border: 1px solid color-mix(in srgb, var(--cz-yazi-r) 14%, transparent);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22); font-size: .9rem; line-height: 1.5;
}
.cerez-onay[hidden] { display: none; }
.cerez-alt-serit { left: 0; right: 0; bottom: 0; border-radius: 0; border-width: 1px 0 0; }
.cerez-alt-serit .cerez-ic { max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.5rem; align-items: center; }
.cerez-alt-serit .cerez-baslik, .cerez-alt-serit .cerez-metin, .cerez-alt-serit .cerez-turler { grid-column: 1; }
.cerez-alt-serit .cerez-dugmeler { grid-column: 2; grid-row: 1 / span 3; }
.cerez-sol-kutu, .cerez-sag-kutu { bottom: 1rem; width: min(400px, calc(100vw - 2rem)); border-radius: 16px; }
.cerez-sol-kutu { left: 1rem; }
.cerez-sag-kutu { right: 1rem; }
.cerez-orta { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 2rem)); border-radius: 18px; }
.cerez-sol-kutu .cerez-ic, .cerez-sag-kutu .cerez-ic, .cerez-orta .cerez-ic { padding: 1.15rem 1.2rem; display: grid; gap: .6rem; }
.cerez-baslik { margin: 0; font-weight: 700; font-size: 1rem; }
.cerez-metin { margin: 0; opacity: .9; }
.cerez-metin a { color: var(--cz-vurgu-r); text-decoration: underline; text-underline-offset: .2em; }
.cerez-turler { display: grid; gap: .5rem; margin: .25rem 0; }
.cerez-turler[hidden] { display: none; }
.cerez-tur { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.cerez-tur input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--cz-vurgu-r); flex: none; }
.cerez-tur strong { display: block; font-size: .88rem; }
.cerez-tur small { display: block; opacity: .75; font-size: .8rem; }
.cerez-dugmeler { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.cerez-dugme {
  min-height: 42px; padding: .55rem 1.1rem; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--cz-yazi-r); border: 1.5px solid currentColor;
}
.cerez-dugme[hidden] { display: none; }
/* Yazi rengi pencerenin zemini: koyu temada acik vurgu + koyu yazi, acikta tersi (okunurluk) */
.cerez-dugme-ana { background: var(--cz-vurgu-r); border-color: var(--cz-vurgu-r); color: var(--cz-zemin-r); }
.cerez-dugme-ince { border-color: transparent; text-decoration: underline; text-underline-offset: .2em; padding-inline: .5rem; }
.cerez-dugme:focus-visible { outline: 3px solid var(--cz-vurgu-r); outline-offset: 2px; }
.cerez-tercih-dugme {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 2147482999; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--metin, #111827);
  background: var(--kart, #ffffff); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
.cerez-tercih-dugme[hidden] { display: none; }
@media (max-width: 767px) {
  .cerez-alt-serit .cerez-ic { grid-template-columns: 1fr; }
  .cerez-alt-serit .cerez-dugmeler { grid-column: 1; grid-row: auto; }
  .cerez-dugmeler { justify-content: stretch; }
  .cerez-dugme { flex: 1 1 40%; }
  .cerez-sol-kutu, .cerez-sag-kutu { left: .5rem; right: .5rem; bottom: .5rem; width: auto; }
}
/* Yonetimdeki onizlemede ortadaki pencere tasarimi kapatmasin */
html.yonetim-onizleme .cerez-orta { position: fixed; }

/* ═══ Site araclari: basa don + sayfa yolu (17 Eki 2026) ═══ */
.basa-don { position: fixed; bottom: 6.2rem; z-index: 2147482990; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 0; color: #fff; background: var(--bd-renk, var(--ana, #2563eb)); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); transition: transform .2s ease, opacity .2s ease; }
.basa-don:hover { transform: translateY(-3px); }
.basa-don[hidden] { display: none; }
.basa-don-sag { right: 1.4rem; }
.basa-don-sol { left: 1rem; bottom: 4.2rem; }
.sayfa-yolu { padding: .9rem 0 0; font-size: .85rem; }
.sayfa-yolu ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; color: var(--metin-3, inherit); }
.sayfa-yolu li + li::before { content: "›"; margin-right: .35rem; opacity: .6; }
.sayfa-yolu a { color: inherit; text-decoration: none; }
.sayfa-yolu a:hover { color: var(--ana); text-decoration: underline; }
.sayfa-yolu [aria-current] { color: var(--metin); font-weight: 600; }
html.pencere-ici .sayfa-yolu, html.pencere-ici .basa-don { display: none; }

/* blog.css */
/* Blog: kategori seridi, kart ust etiketi, etiketler (17 Eki 2026) */
.blog-kategoriler { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.blog-kategoriler a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--metin) 16%, transparent); color: var(--metin-2, var(--metin));
  font-size: .88rem; font-weight: 600; text-decoration: none; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.blog-kategoriler a:hover { border-color: var(--ana); color: var(--ana); }
.blog-kategoriler a[aria-current="page"] { background: var(--ana); border-color: var(--ana); color: #ffffff; }
.blog-kategoriler small { opacity: .7; font-weight: 500; }
.yazi-kategori { display: inline-block; margin-bottom: .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ana); text-decoration: none; }
a.yazi-kategori:hover { text-decoration: underline; }
.yazi-etiketler { display: flex; flex-wrap: wrap; gap: .45rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.yazi-etiketler a {
  display: inline-block; padding: .3rem .7rem; border-radius: 8px; font-size: .82rem; text-decoration: none;
  background: color-mix(in srgb, var(--ana) 10%, transparent); color: var(--metin);
}
.yazi-etiketler a:hover { background: color-mix(in srgb, var(--ana) 20%, transparent); }

/* bolum-renk.css */
/* ═══════════════════════════════════════════════════════════════════
   BOLUM GORUNUM RENKLERI (17 Eki 2026) — paketin EN SONUNDA yuklenir.
   Panelde bir bolume renk secilince bilesenler.js bolumun kok etiketine
   isaret sinifi ekler (renk-baslik, renk-metin, renk-kart ...). Burada o
   sinif varsa secilen renk bolumun icindeki her basliga, metne ve karta
   uygulanir. Sinif yoksa hicbir kural calismaz, bolum kendi tasarimindadir.
   1) Tema belirtecleri bolumun icinde yeniden tanimlanir (--kart, --kenar,
      --ana ...): belirtecle boyanan her oge kendiliginden uyar.
   2) Rengi sabit yazilmis ogeler !important ile ezilir. :is(#rk, .sinif)
      kimlik (id) agirligi verir; bolum dosyalarindaki !important'li ozel
      kurallar da boylece secilen rengin onune gecemez. #rk diye bir oge yok.
   ═══════════════════════════════════════════════════════════════════ */

/* Koyu temada once koyu tema icin secilen renk, yoksa acik tema rengi */
.bolum { --rk-zemin: var(--bolum-zemin); --rk-metin: var(--bolum-metin); }
:root[data-tema="koyu"] .bolum {
  --rk-zemin: var(--bolum-zemin-koyu, var(--bolum-zemin)); --rk-metin: var(--bolum-metin-koyu, var(--bolum-metin));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .bolum {
    --rk-zemin: var(--bolum-zemin-koyu, var(--bolum-zemin)); --rk-metin: var(--bolum-metin-koyu, var(--bolum-metin));
  }
}

/* ── Arka plan ── */
:is(#rk, .renk-zemin) { background: var(--bolum-zemin) !important; }
:root[data-tema="koyu"] :is(#rk, .renk-zemin, .renk-zemin-koyu) { background: var(--rk-zemin) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) :is(#rk, .renk-zemin, .renk-zemin-koyu) { background: var(--rk-zemin) !important; }
}

/* ── Metin ── (dugme icindeki yazilar kendi renginde kalir) */
:is(#rk, .renk-metin) { --metin-2: var(--bolum-metin); --metin-3: var(--bolum-metin); --sayi-metin: var(--bolum-metin); color: var(--bolum-metin) !important; }
:is(#rk, .renk-metin) :is(p, li, small, blockquote, dd, dt, td, th, figcaption, label, address, .sayi-etiket):not(:is(button, [class*="dugme"]) *):not(:is(.bolum-etiket, .bg-etiket, .ivitrin-etiket, [class$="-baslik"])) {
  color: var(--bolum-metin) !important;
}
:root[data-tema="koyu"] :is(#rk, .renk-metin, .renk-metin-koyu) { --metin-2: var(--rk-metin); --metin-3: var(--rk-metin); --sayi-metin: var(--rk-metin); color: var(--rk-metin) !important; }
:root[data-tema="koyu"] :is(#rk, .renk-metin, .renk-metin-koyu) :is(p, li, small, blockquote, dd, dt, td, th, figcaption, label, address, .sayi-etiket):not(:is(button, [class*="dugme"]) *):not(:is(.bolum-etiket, .bg-etiket, .ivitrin-etiket, [class$="-baslik"])) {
  color: var(--rk-metin) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) :is(#rk, .renk-metin, .renk-metin-koyu) { --metin-2: var(--rk-metin); --metin-3: var(--rk-metin); --sayi-metin: var(--rk-metin); color: var(--rk-metin) !important; }
  :root:not([data-tema="acik"]) :is(#rk, .renk-metin, .renk-metin-koyu) :is(p, li, small, blockquote, dd, dt, td, th, figcaption, label, address, .sayi-etiket):not(:is(button, [class*="dugme"]) *):not(:is(.bolum-etiket, .bg-etiket, .ivitrin-etiket, [class$="-baslik"])) {
    color: var(--rk-metin) !important;
  }
}

/* ── Baslik ── */
:is(#rk, .renk-baslik) :is(h1, h2, h3, h4, h5, h6, [class$="-baslik"], [class*="-baslik "]):not(:is(button, [class*="dugme"]) *):not(button, img, [class*="dugme"]) {
  color: var(--bolum-baslik) !important;
}

/* ── Vurgu: ust etiketler, vurgulu kelimeler, sayilar, ana dugmeler ── */
:is(#rk, .renk-vurgu) { --ana: var(--bolum-vurgu); --vurgu: var(--bolum-vurgu); --ana-koyu: var(--bolum-vurgu); --bg-vurgu: var(--bolum-vurgu); }
:is(#rk, .renk-vurgu) :is(.bolum-etiket, .bg-etiket, .ivitrin-etiket, .et-vurgu, .vurgu, .sayi-deger, .et-adim-no, .et-sss-isaret, .et-soru[open] .et-soru-no) {
  color: var(--bolum-vurgu) !important;
}
:is(#rk, .renk-vurgu) :is(.dugme-ana, .et-dugme-ana, .ivitrin-dugme-ana, .bg-dugme-ana) { background: var(--bolum-vurgu) !important; border-color: var(--bolum-vurgu) !important; }

/* ── Kart zemini ── */
:is(#rk, .renk-kart) { --kart: var(--bolum-kart); --kart-1: var(--bolum-kart); --kart-2: var(--bolum-kart); --kart-3: var(--bolum-kart); --bg-kart: var(--bolum-kart); }
:is(#rk, .renk-kart) :is(.kart, [class$="-kart"], [class*="-kart "], .paket, details, .adim, .sayi-oge, .gorus, .guv-rozet, .kisi, .bg-sy li, .bg-ld-izgara li, .bg-hk-rozet) {
  background: var(--bolum-kart) !important;
}

/* ── Kenar ── */
:is(#rk, .renk-kenar) { --kenar: var(--bolum-kenar); --kenar-koyu: var(--bolum-kenar); --bg-kenar: var(--bolum-kenar); }
:is(#rk, .renk-kenar) :is(.kart, [class$="-kart"], [class*="-kart "], .paket, details, .adim, .sayi-oge, .gorus, .guv-rozet, .kisi, .bg-sy li, .bg-ld-izgara li, .bg-hk-rozet, hr) {
  border-color: var(--bolum-kenar) !important;
}


/* Yalniz koyu tema rengi secilmis Gorunum renkleri (17 Eki 2026): acik temada bolum kendi renginde kalir */
:root[data-tema="koyu"] :is(#rk, .renk-baslik-yk) :is(h1, h2, h3, h4, h5, h6, [class$="-baslik"], [class*="-baslik "]):not(:is(button, [class*="dugme"]) *):not(button, img, [class*="dugme"]) {
  color: var(--bolum-baslik) !important;
}
:root[data-tema="koyu"] :is(#rk, .renk-vurgu-yk) { --ana: var(--bolum-vurgu); --vurgu: var(--bolum-vurgu); --ana-koyu: var(--bolum-vurgu); --bg-vurgu: var(--bolum-vurgu); }
:root[data-tema="koyu"] :is(#rk, .renk-vurgu-yk) :is(.bolum-etiket, .bg-etiket, .ivitrin-etiket, .et-vurgu, .vurgu, .sayi-deger, .et-adim-no, .et-sss-isaret, .et-soru[open] .et-soru-no) {
  color: var(--bolum-vurgu) !important;
}
:root[data-tema="koyu"] :is(#rk, .renk-vurgu-yk) :is(.dugme-ana, .et-dugme-ana, .ivitrin-dugme-ana, .bg-dugme-ana) { background: var(--bolum-vurgu) !important; border-color: var(--bolum-vurgu) !important; }
:root[data-tema="koyu"] :is(#rk, .renk-kart-yk) { --kart: var(--bolum-kart); --kart-1: var(--bolum-kart); --kart-2: var(--bolum-kart); --kart-3: var(--bolum-kart); --bg-kart: var(--bolum-kart); }
:root[data-tema="koyu"] :is(#rk, .renk-kart-yk) :is(.kart, [class$="-kart"], [class*="-kart "], .paket, details, .adim, .sayi-oge, .gorus, .guv-rozet, .kisi, .bg-sy li, .bg-ld-izgara li, .bg-hk-rozet) {
  background: var(--bolum-kart) !important;
}
:root[data-tema="koyu"] :is(#rk, .renk-kenar-yk) { --kenar: var(--bolum-kenar); --kenar-koyu: var(--bolum-kenar); --bg-kenar: var(--bolum-kenar); }
:root[data-tema="koyu"] :is(#rk, .renk-kenar-yk) :is(.kart, [class$="-kart"], [class*="-kart "], .paket, details, .adim, .sayi-oge, .gorus, .guv-rozet, .kisi, .bg-sy li, .bg-ld-izgara li, .bg-hk-rozet, hr) {
  border-color: var(--bolum-kenar) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) :is(#rk, .renk-baslik-yk) :is(h1, h2, h3, h4, h5, h6, [class$="-baslik"], [class*="-baslik "]):not(:is(button, [class*="dugme"]) *):not(button, img, [class*="dugme"]) {
  color: var(--bolum-baslik) !important;
}
  :root:not([data-tema="acik"]) :is(#rk, .renk-vurgu-yk) { --ana: var(--bolum-vurgu); --vurgu: var(--bolum-vurgu); --ana-koyu: var(--bolum-vurgu); --bg-vurgu: var(--bolum-vurgu); }
  :root:not([data-tema="acik"]) :is(#rk, .renk-vurgu-yk) :is(.bolum-etiket, .bg-etiket, .ivitrin-etiket, .et-vurgu, .vurgu, .sayi-deger, .et-adim-no, .et-sss-isaret, .et-soru[open] .et-soru-no) {
  color: var(--bolum-vurgu) !important;
}
  :root:not([data-tema="acik"]) :is(#rk, .renk-vurgu-yk) :is(.dugme-ana, .et-dugme-ana, .ivitrin-dugme-ana, .bg-dugme-ana) { background: var(--bolum-vurgu) !important; border-color: var(--bolum-vurgu) !important; }
  :root:not([data-tema="acik"]) :is(#rk, .renk-kart-yk) { --kart: var(--bolum-kart); --kart-1: var(--bolum-kart); --kart-2: var(--bolum-kart); --kart-3: var(--bolum-kart); --bg-kart: var(--bolum-kart); }
  :root:not([data-tema="acik"]) :is(#rk, .renk-kart-yk) :is(.kart, [class$="-kart"], [class*="-kart "], .paket, details, .adim, .sayi-oge, .gorus, .guv-rozet, .kisi, .bg-sy li, .bg-ld-izgara li, .bg-hk-rozet) {
  background: var(--bolum-kart) !important;
}
  :root:not([data-tema="acik"]) :is(#rk, .renk-kenar-yk) { --kenar: var(--bolum-kenar); --kenar-koyu: var(--bolum-kenar); --bg-kenar: var(--bolum-kenar); }
  :root:not([data-tema="acik"]) :is(#rk, .renk-kenar-yk) :is(.kart, [class$="-kart"], [class*="-kart "], .paket, details, .adim, .sayi-oge, .gorus, .guv-rozet, .kisi, .bg-sy li, .bg-ld-izgara li, .bg-hk-rozet, hr) {
  border-color: var(--bolum-kenar) !important;
}
}

/* Giris slayti karti (17 Eki 2026): Gorunum'deki "Kart zemini" kartsiz slayti boyamaz;
   saydamlik secilen kartta zemin rengi o oranda saydamlasir. Paketin sonunda durur, ayni agirliktaki kurallari yener. */
:is(#rk, .et-slayt.et-kb-kartsiz) .et-kart.et-kart { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:is(#rk, .et-slayt)[style*="--et-kart-opak"] .et-kart {
  background: color-mix(in srgb, var(--et-kart-zemin, var(--bolum-kart, rgb(70, 70, 68))) var(--et-kart-opak), transparent) !important;
}
:is(#rk, .et-slayt)[style*="--et-kart-opak:0%"] .et-kart { box-shadow: none !important; }

/* bolum-vitrin.css */
/* VITRIN BOLUMLERI (K107, 20 Eki 2026): api/bilesenler-vitrin.js.
   etesio.com.tr'nin duragan surumundeki demo penceresi ve alan adi sorgusu.
   Renkler sitenin degiskenlerinden; bolumun Gorunum sekmesi --bolum-* ile ezer. */

/* ── Canli demo penceresi ── */
.bolum-vitrinDemoPenceresi { position: relative; overflow: hidden; }
.bolum-vitrinDemoPenceresi.vd-agli::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, var(--bolum-vurgu, var(--ana)) 1.5px, transparent 2px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
}
.vd-izgara { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--aralik-7); align-items: center; }
.vd-izgara > * { min-width: 0; }
.vd-baslik { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; color: var(--bolum-baslik, var(--metin)); }
.vd-aciklama { margin-top: var(--aralik-5); color: var(--bolum-metin, var(--metin-2)); font-size: 1.15rem; max-width: 44ch; }
.vd-eylem { display: flex; flex-wrap: wrap; gap: var(--aralik-3); margin-top: var(--aralik-6); }
.vd-not { margin-top: var(--aralik-5); font-size: .95rem; color: var(--bolum-metin, var(--metin-2)); display: flex; align-items: baseline; gap: var(--aralik-3); }
.vd-nokta { width: 9px; height: 9px; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 4px rgba(31, 157, 107, .18); flex: none; transform: translateY(-1px); }

.vd-pencere {
  background: var(--zemin); border: 1px solid var(--kenar); border-radius: var(--kose-buyuk);
  box-shadow: 0 30px 60px -30px rgba(14, 16, 51, .35), 0 2px 0 rgba(14, 16, 51, .04); overflow: hidden;
}
.vd-ust { display: flex; align-items: center; gap: var(--aralik-3); padding: var(--aralik-3) var(--aralik-4); background: #0E1033; }
.vd-isik { display: flex; gap: 6px; }
.vd-isik i { width: 11px; height: 11px; border-radius: 50%; background: #3A3D72; display: block; }
.vd-adres {
  flex: 1; display: flex; align-items: center; gap: var(--aralik-2); min-width: 0;
  background: #1B1E52; color: #C9C6F5; border-radius: 999px; padding: 6px var(--aralik-4); font-size: .88rem;
}
.vd-adres svg { flex: none; color: #1f9d6b; }
.vd-adres span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-sekmeler { display: flex; gap: 4px; padding: var(--aralik-2); background: #0E1033; border-top: 1px solid #1B1E52; }
.vd-sekme {
  flex: 1; border: 0; cursor: pointer; background: transparent; color: #B7B4E6;
  font-family: inherit; font-weight: 500; font-size: .95rem; line-height: 1.2; padding: var(--aralik-2) var(--aralik-3); border-radius: var(--kose-kucuk);
}
.vd-sekme:hover { color: #fff; background: #1B1E52; }
.vd-sekme[aria-selected="true"] { background: var(--bolum-vurgu, var(--ana)); color: #fff; }
.vd-sekme:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.vd-ekran { position: relative; aspect-ratio: 16 / 10.5; background: var(--zemin-2); overflow: hidden; }
.vd-ekran iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 840px; border: 0; max-width: none; transform-origin: 0 0; }
.vd-alt {
  display: flex; justify-content: space-between; align-items: center; gap: var(--aralik-3);
  padding: var(--aralik-3) var(--aralik-4); border-top: 1px solid var(--kenar); font-size: .92rem; color: var(--metin-2);
}
.vd-alt a { font-weight: 600; text-decoration: none; }

/* ── Alan adi sorgusu ── */
.aas-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: var(--aralik-7); align-items: center; }
.aas-izgara > * { min-width: 0; }
.aas-form {
  display: flex; gap: var(--aralik-2); margin-top: var(--aralik-5); padding: var(--aralik-2);
  background: var(--zemin); border: 1px solid var(--kenar); border-radius: var(--kose-orta);
}
.aas-form input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: inherit; font-size: 1.1rem; padding: 0 var(--aralik-3); color: var(--metin); }
.aas-form input:focus { outline: none; }
.aas-form:focus-within { border-color: var(--bolum-vurgu, var(--ana)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bolum-vurgu, var(--ana)) 25%, transparent); }
.aas-maddeler { display: grid; gap: var(--aralik-4); }
.aas-madde { display: flex; gap: var(--aralik-3); }
.aas-madde svg { flex: none; width: 22px; height: 22px; color: var(--bolum-vurgu, var(--ana)); margin-top: 3px; }
.aas-madde p { color: var(--bolum-metin, var(--metin-2)); }
.aas-madde strong { color: var(--bolum-baslik, var(--metin)); display: block; }

@media (max-width: 900px) {
  .vd-izgara, .aas-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .vd-sekme { font-size: .85rem; padding: var(--aralik-2); min-height: 44px; }
  .aas-form { flex-direction: column; }
  .aas-form input { min-height: 48px; }
  .vd-alt { flex-direction: column; align-items: flex-start; }
}

/* fatura-araclari.css */
/* E-BELGE BOLUMLERI (api/bilesenler-fatura.js): fiyat tablosu, kontor tablosu,
   KDV / tevkifat hesaplayici, zorunluluk testi. Renkler kimlik belirteclerinden gelir;
   acik/koyu tema kendiliginden izler. */

/* ── KDV dahil/haric ve aylik/yillik anahtari ─────────────── */
/* Gorunurluk yalniz GIZLEME kurallariyla kurulur (birbirini ezmesin):
   [data-g="<kdv>-<donem>"] o anki secime uymuyorsa gizlenir. Betik gerekmez. */
@supports selector(:has(*)) {
  .fa-goster:not(:has([data-sec="dahil"]:checked)) [data-g^="dahil-"],
  .fa-goster:has([data-sec="dahil"]:checked) [data-g^="haric-"],
  .fa-goster:not(:has([data-sec="yillik"]:checked)) [data-g$="-yillik"],
  .fa-goster:has([data-sec="yillik"]:checked) [data-g$="-aylik"] { display: none; }
}
/* :has olmayan tarayici: anahtar gizlenir, ilk acilis secimi (data-varsayilan) ile aylik fiyat kalir */
@supports not selector(:has(*)) {
  .fa-goster[data-varsayilan="dahil"] [data-g^="haric-"],
  .fa-goster:not([data-varsayilan="dahil"]) [data-g^="dahil-"],
  .fa-goster [data-g$="-yillik"] { display: none; }
  .fa-anahtarlar { display: none; }
}

.fa-anahtarlar { display: flex; flex-wrap: wrap; gap: var(--aralik-3); justify-content: center; margin-bottom: var(--aralik-6); }
.fa-anahtar {
  display: inline-flex; margin: 0; padding: 4px; border: 1px solid var(--kenar);
  border-radius: var(--kose-tam); background: var(--zemin-2);
}
.fa-anahtar label { position: relative; cursor: pointer; }
.fa-anahtar input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fa-anahtar span {
  display: block; padding: .45rem 1rem; border-radius: var(--kose-tam);
  font-size: var(--olcek-2); font-weight: 600; color: var(--metin-2); transition: background var(--gecis), color var(--gecis);
}
.fa-anahtar input:checked + span { background: var(--ana); color: var(--metin-ters); }
.fa-anahtar input:focus-visible + span { outline: 2px solid var(--ana); outline-offset: 2px; }
.fa-anahtar-ek { font-style: normal; font-weight: 600; opacity: .85; }

/* ── Abonelik kartlari ─────────────────────────────────── */
/* 1-3 plan ortalanir; kart en fazla 24rem (tek plan tam genislige yayilmaz). Kart icerigi
   ortali; ozellik listesi kendi genisliginde, ortada, satirlari sola hizali. */
.fa-kartlar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--aralik-5); }
.fa-kart {
  flex: 1 1 17rem; max-width: 24rem; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--aralik-3); padding: var(--aralik-6);
  border: 1px solid var(--bolum-kenar, var(--kenar)); border-radius: var(--bolum-kose, var(--kose-buyuk));
  background: var(--bolum-kart, var(--kart)); color: var(--metin); text-align: center;
}
.fa-kart > * { max-width: 100%; }
.fa-one-cikan { border-color: var(--bolum-vurgu, var(--ana)); box-shadow: 0 0 0 1px var(--bolum-vurgu, var(--ana)); }
.fa-kart-ad { margin: 0; font-size: var(--olcek-5); }
.fa-kart-aciklama { margin: 0; color: var(--metin-2); }
.fa-fiyat { margin: 0; }
.fa-fiyat-satir { display: block; }
.fa-tutar { font-family: var(--yazi-baslik); font-size: var(--olcek-7); line-height: 1.1; color: var(--bolum-baslik, var(--metin)); white-space: nowrap; }
.fa-birim { color: var(--metin-2); font-size: var(--olcek-2); }
.fa-alt-satir { display: block; margin-top: .25rem; color: var(--metin-3); font-size: var(--olcek-2); }
.fa-tasarruf {
  display: inline-block; margin-left: .35rem; padding: .1rem .55rem; border-radius: var(--kose-tam);
  background: color-mix(in srgb, var(--basari) 14%, transparent); color: var(--basari);
  font-size: var(--olcek-1); font-weight: 700; vertical-align: middle;
}
.fa-maddeler { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; flex: 1; text-align: left; }
.fa-maddeler li { display: flex; gap: .55rem; align-items: baseline; color: var(--metin-2); }
.fa-maddeler li::before { content: "✓"; flex: none; color: var(--basari); font-weight: 700; }
.fa-kart-dugme { align-self: center; min-width: min(100%, 14rem); justify-content: center; text-align: center; margin-top: var(--aralik-2); }
.fa-not { margin: var(--aralik-5) 0 0; color: var(--metin-3); font-size: var(--olcek-2); text-align: center; }
.fa-bos { margin: 0; padding: var(--aralik-5); border: 1px dashed var(--kenar-koyu); border-radius: var(--kose-orta); color: var(--metin-2); text-align: center; }

/* ── Kontor tablosu ───────────────────────────────────── */
.fa-tablo-sar { max-width: 52rem; margin-inline: auto; overflow-x: auto; border: 1px solid var(--kenar); border-radius: var(--kose-orta); background: var(--bolum-kart, var(--kart)); }
.fa-tablo-sar:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.fa-tablo { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fa-tablo th, .fa-tablo td { white-space: nowrap; padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--kenar); color: var(--metin); }
.fa-tablo thead th { font-size: var(--olcek-1); text-transform: uppercase; letter-spacing: .04em; color: var(--metin-3); background: var(--zemin-2); }
.fa-tablo tbody tr:last-child > * { border-bottom: 0; }
.fa-tablo td, .fa-tablo thead th:not(:first-child) { text-align: right; }
.fa-vurgu > * { background: color-mix(in srgb, var(--basari) 10%, transparent); }
.fa-rozet { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: var(--kose-tam); background: var(--basari); color: #fff; font-size: var(--olcek-1); font-weight: 600; vertical-align: middle; }

/* ── Hesaplayicilar ───────────────────────────────────── */
.fa-arac {
  display: grid; gap: var(--aralik-5); max-width: 52rem; padding: var(--aralik-6);
  border: 1px solid var(--bolum-kenar, var(--kenar)); border-radius: var(--bolum-kose, var(--kose-buyuk));
  background: var(--bolum-kart, var(--kart)); color: var(--metin);
}
.fa-arac { margin-inline: auto; text-align: left; }
.fa-alanlar { display: grid; gap: var(--aralik-4); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.fa-alan { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.fa-genis { grid-column: 1 / -1; }
.fa-alan > label, .fa-alan > legend { font-size: var(--olcek-2); font-weight: 600; color: var(--metin-2); padding: 0; }
.fa-alan input:not([type="radio"]):not([type="checkbox"]), .fa-alan select {
  width: 100%; min-height: 2.75rem; padding: .55rem .75rem; border: 1px solid var(--kenar-koyu);
  border-radius: var(--kose-kucuk); background: var(--zemin); color: var(--metin); font: inherit; font-size: 1rem;
}
.fa-alan input:focus-visible, .fa-alan select:focus-visible { outline: 2px solid var(--ana); outline-offset: 1px; border-color: var(--ana); }
.fa-yon { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.fa-yon legend { width: 100%; margin-bottom: .2rem; }
.fa-yon label, .fa-onay label { display: inline-flex; gap: .45rem; align-items: center; min-height: 2.75rem; cursor: pointer; }
.fa-onay { align-self: end; }
.fa-sonuc { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--kenar); }
.fa-sonuc > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--kenar); }
.fa-sonuc dt { color: var(--metin-2); }
.fa-sonuc dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fa-toplam dt, .fa-toplam dd { color: var(--metin); font-size: var(--olcek-4); font-weight: 700; }
.fa-hata { margin: 0; color: var(--tehlike); font-weight: 600; }
.fa-zor-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--aralik-3); }
.fa-zor-liste li { display: grid; gap: .25rem; padding: var(--aralik-4); border-left: 4px solid var(--uyari); border-radius: var(--kose-kucuk); background: var(--zemin-2); }
.fa-zor-liste small { color: var(--metin-3); }
.fa-zor-yok { margin: 0; padding: var(--aralik-4); border-left: 4px solid var(--basari); border-radius: var(--kose-kucuk); background: var(--zemin-2); }

@media (max-width: 520px) {
  .fa-kart, .fa-arac { padding: var(--aralik-5); }
  .fa-kart { max-width: none; }
  .fa-tutar { font-size: var(--olcek-6); }
  .fa-kart-dugme { align-self: stretch; }
  /* Telefonda tablo yatay kaymadan sigar: dar dolgu, basliklar kirilabilir, rozet alt satirda */
  .fa-tablo th, .fa-tablo td { padding: .7rem .45rem; overflow-wrap: normal; word-break: normal; }
  .fa-tablo th:first-child { padding-left: .75rem; }
  .fa-tablo td:last-child { padding-right: .75rem; }
  .fa-tablo thead th { white-space: normal; letter-spacing: 0; vertical-align: bottom; }
  .fa-tablo .fa-rozet { display: block; width: fit-content; margin: .3rem 0 0; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .fa-anahtar span { transition: none; } }

/* sms-bolumleri.css */
/* SMS SITESI BOLUMLERI (api/bilesenler-sms.js; sms-etesio K-S9, grafikerin tasarimi).
   Yalniz sms* bolumlerinin siniflari; baska sitede bu bolumler yoksa hicbir kural islemez.
   Renkler tasarimdan: koyu mor #260056, yesil gecis #22c55e -> #0b5d2b. Bolum zemini stil
   sekmesindeki "arkaplan" ile ezilebilir (gecis de yazilabilir: linear-gradient(...)). */
.sms-bolum {
  --sms-mor: #260056; --sms-mor-2: #3b1a7a; --sms-yesil: #22c55e; --sms-yesil-koyu: #0b5d2b;
  --sms-acik: #e6f4ea; --sms-kenar: #1f8a4c;
  --sms-dugme: linear-gradient(90deg, var(--sms-yesil), var(--sms-yesil-koyu));
}
:root[data-tema="koyu"] .sms-bolum { --sms-mor: #cbb8ff; --sms-acik: #10241a; --sms-kenar: #2fa866; }

.sms-tepe { max-width: 64rem; margin: 0 0 var(--aralik-6, 2rem); }
.hiza-orta .sms-tepe { margin-inline: auto; text-align: center; }
.sms-etiket { display: inline-block; margin: 0 0 .75rem; padding: .2rem .7rem; border-radius: 999px; background: var(--sms-acik); color: var(--sms-kenar); font-size: .8rem; font-weight: 600; }
.sms-baslik { margin: 0 0 .5rem; color: var(--bolum-baslik, var(--sms-mor)); font-family: var(--yazi-baslik); font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2rem); line-height: 1.2; text-wrap: balance; }
.sms-alt { margin: 0; color: var(--bolum-metin, var(--metin-2)); line-height: 1.6; }
.sms-bos { padding: 1.5rem; border: 1px dashed var(--kenar-koyu); border-radius: var(--kose-orta); color: var(--metin-2); text-align: center; }

.sms-dugmeler { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.sms-dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.6rem; border-radius: 10px; font-weight: 700; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.sms-dugme:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgb(0 0 0 / .14); }
.sms-dugme-ana { background: var(--sms-dugme); color: #fff; }
.sms-dugme-ikincil { background: linear-gradient(90deg, #2a0060, #7b5cf0); color: #fff; }
.sms-dugme-yalin { color: var(--sms-mor); text-decoration: underline; }
.sms-dugme:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; }

/* ── Giris ─────────────────────────────────────────────── */
.bolum-smsKahraman { background: var(--bolum-zemin, linear-gradient(100deg, #b7f5c8 0%, #6fbf7a 45%, #1d5a24 100%)); }
.sk-duzen { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(2rem, 5vw, 4.5rem); }
.sk-ikili { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.sk-baslik { margin: 0; color: var(--bolum-baslik, var(--sms-mor)); font-family: var(--yazi-baslik); font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.01em; }
.sk-alt { max-width: 36rem; margin: 1.25rem 0 0; color: var(--bolum-metin, var(--sms-mor)); font-size: 1.1rem; line-height: 1.6; }
.sk-telefon { justify-self: center; width: min(19rem, 100%); padding: .7rem; border-radius: 2.4rem; background: #111; box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.sk-ekran { display: flex; flex-direction: column; min-height: 30rem; padding: 1.1rem .9rem .9rem; border-radius: 1.8rem; background: #eef1f3; }
.sk-ust { display: flex; align-items: center; gap: .5rem; padding-bottom: .7rem; margin-bottom: .8rem; border-bottom: 1px solid #d5dbe0; color: #111; font-weight: 700; font-size: .9rem; }
.sk-nokta { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--sms-dugme); }
.sk-akis { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.sk-mesaj { max-width: 85%; padding: .7rem .9rem; border-radius: 1rem 1rem 1rem .3rem; background: #fff; color: #3a4256; font-size: .85rem; line-height: 1.45; box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.sk-mesaj p { margin: 0; }
.sk-mesaj strong { display: block; margin-top: .2rem; color: #111; font-size: 1.05rem; letter-spacing: .05em; }
.sk-vurgulu { align-self: flex-end; border-radius: 1rem 1rem .3rem 1rem; background: var(--sms-dugme); color: #fff; }
.sk-vurgulu strong { color: #fff; font-size: .85rem; letter-spacing: 0; }
.sk-durum { display: block; margin-top: .35rem; font-size: .7rem; text-align: right; opacity: .9; }
.sk-saat { margin: 0 0 .6rem .3rem; color: #5b6478; font-size: .68rem; }
.sk-saat-sag { align-self: flex-end; margin-right: .3rem; }
.sk-yaz { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem; padding: .45rem .5rem .45rem .9rem; border-radius: 999px; background: #fff; color: #5b6478; font-size: .78rem; }
.sk-yaz i { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sms-dugme); }
:root[data-tema="koyu"] .bolum-smsKahraman { background: var(--bolum-zemin-koyu, linear-gradient(100deg, #0d2a17 0%, #0a1f12 60%, #04140a 100%)); }
:root[data-tema="koyu"] .sk-baslik, :root[data-tema="koyu"] .sk-alt { color: var(--bolum-metin-koyu, #f2f5fd); }

/* ── Adimlar ───────────────────────────────────────────── */
.sa-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.sa-kart { position: relative; padding: 1.5rem 1.5rem 1.75rem; border: 1px solid var(--sms-kenar); border-radius: 1.6rem; background: var(--bolum-kart, var(--sms-acik)); text-align: center; }
.sa-no { position: absolute; top: 1.1rem; left: 1.1rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--sms-mor); color: #fff; font-weight: 700; }
:root[data-tema="koyu"] .sa-no { background: #3b1a7a; }
.sa-cizim { display: grid; place-items: center; height: 8rem; margin: .5rem 0 1rem; }
.sa-cizim svg, .sa-cizim img { max-height: 100%; width: auto; max-width: 11rem; }
.sa-kart h3 { margin: 0 0 .6rem; color: var(--sms-mor); font-family: var(--yazi-baslik); font-size: 1.2rem; }
.sa-kart p { margin: 0; color: var(--bolum-metin, var(--metin-2)); line-height: 1.6; }
.sa-cizim .c-cizgi { fill: #fff; stroke: #0b5d2b; stroke-width: 3; }
.sa-cizim .c-ekran { fill: #eef3fc; }
.sa-cizim .c-koyu { fill: #260056; }
.sa-cizim .c-gri { fill: #94a0b4; }
.sa-cizim .c-yesil { fill: #16a34a; }
.sa-cizim .c-onay { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.sa-cizim .c-beyaz { fill: #fff; }
.sa-cizim .c-beyaz-saydam { fill: rgb(255 255 255 / .85); }
.sa-cizim .c-cerceve { fill: #fff; stroke: #260056; stroke-width: 2.5; }
.sa-cizim .c-mor { fill: #260056; }
.sa-cizim .c-acik-mavi { fill: #8fd1ff; }
.sa-cizim .c-soluk { fill: rgb(255 255 255 / .35); }
.sa-cizim .c-mavi { fill: #3d6fcb; }

/* ── Ozellikler ────────────────────────────────────────── */
.bolum-smsOzellikler { background: var(--bolum-zemin, linear-gradient(180deg, #260056 0%, #260056 72%, #f5f7fb 100%)); }
.bolum-smsOzellikler .sms-baslik { color: var(--bolum-baslik, #fff); }
.bolum-smsOzellikler .sms-alt { color: var(--bolum-metin, rgb(255 255 255 / .85)); }
.so-izgara { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.so-sutun-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.so-sutun-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.so-sutun-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.so-kart { padding: 1.4rem 1.4rem 1.6rem; border: 1px solid #e3e7ef; border-radius: 1rem; background: var(--bolum-kart, #fff); }
.so-simge { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem; border-radius: .7rem; background: #e6f7ec; color: #3d6fcb; }
.so-simge svg { width: 1.4rem; height: 1.4rem; }
.so-kart h3 { margin: 0 0 .55rem; color: #111827; font-family: var(--yazi-baslik); font-size: 1rem; }
.so-kart p { margin: 0; color: #6b7280; font-size: .9rem; line-height: 1.55; }
:root[data-tema="koyu"] .bolum-smsOzellikler { background: var(--bolum-zemin-koyu, #14002e); }
:root[data-tema="koyu"] .so-kart { border-color: #2c1d4f; background: var(--bolum-kart, #1b0d36); }
:root[data-tema="koyu"] .so-kart h3 { color: #f2f5fd; }
:root[data-tema="koyu"] .so-kart p { color: #b9c2d6; }

/* ── Kredi paketleri ───────────────────────────────────── */
.sp-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.sp-kart { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid #e3e7ef; border-radius: 1rem; background: var(--bolum-kart, #fff); }
.sp-one { border: 2px solid var(--sms-yesil); box-shadow: 0 0 0 6px rgb(34 197 94 / .12); }
.sp-rozet { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); padding: .3rem 1.2rem; border-radius: 999px; background: linear-gradient(90deg, #16a34a, #0b5d2b); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sp-kredi { margin: 0; color: #111827; }
.sp-kredi strong { font-family: var(--yazi-baslik); font-size: 1.8rem; }
.sp-kredi span { margin-left: .4rem; color: #5b6478; }
.sp-fiyat { margin: .35rem 0 0; color: #111827; }
.sp-fiyat strong { font-size: 1.25rem; }
.sp-fiyat span { color: #5b6478; font-size: .78rem; }
.sp-fiyat s { color: #5b6478; }
.sp-birim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; margin: .3rem 0 0; color: #5b6478; font-size: .82rem; }
.sp-indirim { padding: .15rem .55rem; border-radius: 999px; background: #fff4e0; color: #b45309; font-size: .72rem; font-weight: 700; }
.sp-aciklama { margin: 1rem 0 0; color: #111827; font-weight: 700; }
.sp-maddeler { margin: .75rem 0 0; padding: 0; list-style: none; flex: 1; }
.sp-maddeler li { position: relative; padding-left: 1.5rem; margin: .45rem 0; color: #374158; font-size: .9rem; }
.sp-maddeler li::before { content: ""; position: absolute; left: 0; top: .2rem; width: .95rem; height: .95rem; border-radius: 50%; background: #e6f7ec; box-shadow: inset 0 0 0 1px #16a34a; }
.sp-maddeler li::after { content: ""; position: absolute; left: .3rem; top: .42rem; width: .35rem; height: .2rem; border-left: 2px solid #16a34a; border-bottom: 2px solid #16a34a; transform: rotate(-45deg); }
.sp-dugme { width: 100%; margin-top: 1.5rem; }
.sp-ozel { justify-content: flex-start; border-color: transparent; background: var(--sms-mor); color: #fff; }
.sp-ozel h3 { margin: 0 0 1rem; color: #fff; font-family: var(--yazi-baslik); font-size: 1.2rem; }
.sp-ozel p { margin: 0; flex: 1; color: rgb(255 255 255 / .85); line-height: 1.6; }
:root[data-tema="koyu"] .sp-kart { border-color: #23304a; background: var(--bolum-kart, #0f1626); }
:root[data-tema="koyu"] .sp-kredi, :root[data-tema="koyu"] .sp-fiyat, :root[data-tema="koyu"] .sp-aciklama { color: #f2f5fd; }
:root[data-tema="koyu"] .sp-maddeler li { color: #d8dee9; }
:root[data-tema="koyu"] .sp-ozel { background: #2a1158; }

/* ── Cagri bandi ───────────────────────────────────────── */
.sc-bant { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem 2.25rem; border-radius: 1.6rem; background: var(--bolum-kart, #260056); }
.sc-bant .sms-baslik { color: #fff; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.sc-bant .sms-alt { color: rgb(255 255 255 / .75); }
.sc-bant .sms-dugmeler { margin-top: 0; }

/* ── Dar ekran ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .sp-izgara, .so-sutun-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sk-ikili { grid-template-columns: 1fr; }
  .sk-ekran { min-height: 24rem; }
  .so-sutun-2, .so-sutun-3, .so-sutun-4, .sp-izgara { grid-template-columns: 1fr; }
  .sc-bant { padding: 1.5rem; }
  .sc-bant .sms-dugmeler, .sc-bant .sms-dugme { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sms-dugme { transition: none; } .sms-dugme:hover { transform: none; } }

/* tema-esi.css */
/* KOYU TEMA ESLERI (17 Eki 2026) - api/tema-esi.js
   Iki temali deger: var(--tema-koyuda, ACIK) var(--tema-acikta, KOYU)
   Acik temada --tema-koyuda gecersiz (fallback ACIK yazilir), --tema-acikta bos;
   koyu temada tersi. Boylece tek style degeri temaya gore cozulur. */
:root { --tema-acikta: ; --tema-koyuda: initial; }
:root[data-tema="koyu"] { --tema-acikta: initial; --tema-koyuda: ; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) { --tema-acikta: initial; --tema-koyuda: ; }
}

/* Koyu tema esi olan gorsel iki kez basilir, biri temaya gore gizlenir */
@media not (prefers-color-scheme: dark) {
  :root:not([data-tema="koyu"]) .tg-koyu { display: none !important; }
  :root[data-tema="koyu"] .tg-acik { display: none !important; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tg-acik { display: none !important; }
  :root[data-tema="acik"] .tg-koyu { display: none !important; }
}