/* 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; }

/* ═══════════════ 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; }

/* 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; }

.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); }
}

/* ── 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; }
}

/* ── 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); }

/* 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). */
.govde > .bolum:nth-child(odd of .bolum) { --sira-zemin: var(--giris-zemin); }
.govde > .bolum:nth-child(even of .bolum) { --sira-zemin: var(--duz-zemin); }
.govde > .bolum + .bolum { border-top: 1px solid var(--elektrik-cizgi); }
.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; }

/* 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; } }

/* 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 ──────────────────────────────── */
.bg-ld { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.bg-ld li, .bg-ld-akis li { display: grid; place-items: center; min-height: 92px; }
.bg-ld li > *, .bg-ld-akis li > * { display: grid; place-items: center; width: 100%; height: 100%; color: var(--metin-2); text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.bg-ld img, .bg-ld-akis img { max-height: 46px; max-width: 150px; width: auto; object-fit: contain; }
.bg-ld-izgara li { border: 1px solid var(--bg-kenar); border-radius: var(--bg-kose); background: var(--bg-kart); padding: 1rem; }
.bg-ld-gri img, .bg-ld-kayan img { filter: grayscale(1); opacity: .6; transition: filter .25s, opacity .25s; }
.bg-ld-gri li:hover img, .bg-ld-kayan li:hover img { filter: none; opacity: 1; }
.bg-ld-gri li > span, .bg-ld-kayan li > span { opacity: .6; }
.bg-ld-kayan { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bg-ld-akis { list-style: none; margin: 0; padding: 0; display: flex; gap: 3.5rem; width: max-content; animation: bg-ld-akis 40s linear infinite; }
.bg-ld-akis li { flex: none; }
.bg-ld-kayan:hover .bg-ld-akis { animation-play-state: paused; }
@keyframes bg-ld-akis { to { transform: translateX(calc(-50% - 1.75rem)); } }

/* ── 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); }

/* 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; } }

/* 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%; }
}

/* 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); }