/* =====================================================================
   FER OPTİK — TASARIM SİSTEMİ
   Tek kaynak. Tüm sayfalar bu dosyayı kullanır.
   Marka rengi PHP tarafından :root üzerine yazılır (--marka-*).
   ===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENLAR
--------------------------------------------------------------- */
:root {
  /* Marka renkleri config'ten gelir; buradakiler yalnızca yedek. */
  --marka:        #0b7a42;
  --marka-koyu:   #075530;
  --marka-acik:   #e8f5ee;
  --marka-rgb:    11 122 66;

  /* Nötrler — hafif sıcak, optik mağaza vitrin hissi */
  --murekkep:     #14181b;
  --murekkep-2:   #3b4348;
  --murekkep-3:   #6b757b;
  --murekkep-4:   #9aa4a9;
  --cizgi:        #e6e5e0;
  --cizgi-koyu:   #d3d2cb;
  --kagit:        #ffffff;
  --kagit-2:      #faf9f6;
  --kagit-3:      #f2f1ec;

  /* Bilinçli olarak KOYU kalan paneller (üst şerit, duyuru, kampanya, bülten).
     --murekkep koyu temada aydınlanır; bu yüzden bu bloklar kendi sabit
     tokenlerini kullanır, yoksa açık zeminde beyaz yazı görünmez olur. */
  --koyu-panel:       #14181b;
  --koyu-panel-yazi:  #f4f3ee;
  --koyu-panel-silik: rgb(244 243 238 / .74);
  --koyu-panel-cizgi: rgb(255 255 255 / .16);

  /* Vurgu — pirinç/altın, premium çerçeve çağrışımı */
  --altin:        #b8873b;
  --altin-acik:   #f6edda;

  /* Durum */
  --kirmizi:      #c0392b;
  --kirmizi-acik: #fdeceb;
  --yesil:        #1e8a4c;
  --sari:         #b8860b;
  --mavi:         #1f6fb2;

  /* Tipografi */
  --f-baslik: "Fraunces", "Georgia", "Times New Roman", serif;
  --f-govde:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Ölçek (1.250 — majör üçlü) */
  --m-3xl: clamp(2.6rem, 1.6rem + 3.2vw, 4.2rem);
  --m-2xl: clamp(2rem, 1.4rem + 2.1vw, 3rem);
  --m-xl:  clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem);
  --m-lg:  clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --m-md:  1.0625rem;
  --m-sm:  0.9375rem;
  --m-xs:  0.8125rem;
  --m-2xs: 0.72rem;

  /* Boşluk */
  --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px;
  --b5: 24px; --b6: 32px; --b7: 48px; --b8: 64px; --b9: 96px;

  /* Köşe */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-tam: 999px;

  /* Gölge */
  --g1: 0 1px 2px rgb(20 24 27 / .05);
  --g2: 0 2px 8px rgb(20 24 27 / .06), 0 1px 2px rgb(20 24 27 / .04);
  --g3: 0 8px 24px rgb(20 24 27 / .08), 0 2px 6px rgb(20 24 27 / .04);
  --g4: 0 20px 50px rgb(20 24 27 / .14), 0 6px 14px rgb(20 24 27 / .06);

  /* Geçiş */
  --hiz: 220ms cubic-bezier(.22, .61, .36, 1);
  --hiz-yavas: 420ms cubic-bezier(.22, .61, .36, 1);

  --katman-header: 200;
  --katman-drawer: 900;
  --katman-modal:  1000;
  --katman-toast:  1100;

  --en: 1360px;
  --header-y: 72px;
}

/* ---------------------------------------------------------------
   2. KOYU TEMA
--------------------------------------------------------------- */
:root[data-tema="koyu"] {
  --murekkep:   #f0efe9;
  --murekkep-2: #c3c8cb;
  --murekkep-3: #8f989d;
  --murekkep-4: #6a737a;
  --cizgi:      #2a2f33;
  --cizgi-koyu: #3a4045;
  --kagit:      #16191c;
  --kagit-2:    #101315;
  --kagit-3:    #1d2124;
  --marka-acik: #12281d;
  --altin-acik: #2a2113;
  --kirmizi-acik: #2c1614;
  --g1: 0 1px 2px rgb(0 0 0 / .4);
  --g2: 0 2px 8px rgb(0 0 0 / .45);
  --g3: 0 8px 24px rgb(0 0 0 / .5);
  --g4: 0 20px 50px rgb(0 0 0 / .6);
  --koyu-panel: #0b0e10;
  color-scheme: dark;
}

/* ---------------------------------------------------------------
   3. TEMEL
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-y) + 20px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--f-govde);
  font-size: var(--m-md);
  line-height: 1.6;
  color: var(--murekkep);
  background: var(--kagit-2);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { font-family: var(--f-baslik); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32; }
h1 { font-size: var(--m-3xl); }
h2 { font-size: var(--m-2xl); }
h3 { font-size: var(--m-lg); }
h4 { font-size: var(--m-md); font-family: var(--f-govde); font-weight: 700; letter-spacing: 0; }

a { color: inherit; text-decoration: none; }
img, video, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--marka);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: rgb(var(--marka-rgb) / .2); }

.gizli-erisim {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla-baglanti {
  position: absolute; left: -999px; top: 8px; z-index: 9999;
  background: var(--marka); color: #fff; padding: 10px 18px; border-radius: var(--r-sm);
}
.atla-baglanti:focus { left: 8px; }

/* ---------------------------------------------------------------
   4. YERLEŞİM
--------------------------------------------------------------- */
.kap { width: 100%; max-width: var(--en); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.kap-dar { max-width: 860px; }
.bolum { padding-block: clamp(48px, 7vw, 88px); }
.bolum-sik { padding-block: clamp(32px, 4vw, 52px); }

.bolum-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--b4); margin-bottom: var(--b6); flex-wrap: wrap; }
.bolum-bas h2 { margin: 0; }
.bolum-bas .alt { color: var(--murekkep-3); font-size: var(--m-sm); margin-top: 6px; max-width: 56ch; }

.etiket-ust {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--m-2xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marka); margin-bottom: 10px;
}
.etiket-ust::before { content: ""; width: 26px; height: 2px; background: currentColor; }

/* ---------------------------------------------------------------
   5. DÜĞMELER
--------------------------------------------------------------- */
.dg {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: var(--r-tam);
  font-weight: 700; font-size: var(--m-sm); letter-spacing: .01em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--hiz), color var(--hiz), border-color var(--hiz), transform var(--hiz), box-shadow var(--hiz);
  white-space: nowrap; text-align: center;
}
.dg:active { transform: translateY(1px); }
.dg-dolu   { background: var(--marka); color: #fff; box-shadow: 0 4px 14px rgb(var(--marka-rgb) / .28); }
.dg-dolu:hover { background: var(--marka-koyu); box-shadow: 0 8px 22px rgb(var(--marka-rgb) / .35); }
.dg-cizgi  { border-color: var(--cizgi-koyu); color: var(--murekkep); background: var(--kagit); }
.dg-cizgi:hover { border-color: var(--marka); color: var(--marka); background: var(--marka-acik); }
.dg-murekkep { background: var(--murekkep); color: var(--kagit); }
.dg-murekkep:hover { background: var(--murekkep-2); }
.dg-hayalet { color: var(--murekkep-2); }
.dg-hayalet:hover { background: var(--kagit-3); color: var(--murekkep); }
.dg-altin  { background: var(--altin); color: #fff; }
.dg-altin:hover { filter: brightness(.92); }
.dg-tam { width: 100%; }
.dg-kucuk { padding: 9px 18px; font-size: var(--m-xs); }
.dg-buyuk { padding: 16px 34px; font-size: var(--m-md); }
.dg:disabled, .dg[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.dg:disabled:hover { background: var(--marka); }

/* ---------------------------------------------------------------
   6. ROZETLER
--------------------------------------------------------------- */
.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-sm);
  font-size: var(--m-2xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.4;
}
.rozet-indirim { background: var(--kirmizi); color: #fff; }
.rozet-yeni    { background: var(--murekkep); color: var(--kagit); }
.rozet-cok     { background: var(--altin); color: #fff; }
.rozet-tukendi { background: var(--murekkep-4); color: #fff; }
.rozet-yumusak { background: var(--marka-acik); color: var(--marka-koyu); }
.rozet-uyari   { background: var(--altin-acik); color: var(--altin); }

/* ---------------------------------------------------------------
   7. DUYURU ŞERİDİ (reklam slotu)
--------------------------------------------------------------- */
.duyuru {
  background: var(--koyu-panel); color: var(--koyu-panel-yazi);
  font-size: var(--m-xs); font-weight: 600;
  position: relative; overflow: hidden;
}
.duyuru-ic { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 44px; text-align: center; min-height: 40px; }
.duyuru a { text-decoration: underline; text-underline-offset: 3px; }
.duyuru-kapat { position: absolute; right: 10px; top: 50%; translate: 0 -50%; color: inherit; opacity: .6; padding: 6px; }
.duyuru-kapat:hover { opacity: 1; }
.duyuru-kayan { display: flex; gap: 48px; animation: kay 26s linear infinite; white-space: nowrap; }
@keyframes kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------
   8. HEADER
--------------------------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: var(--katman-header);
  background: color-mix(in srgb, var(--kagit) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--hiz);
}
.ust.kaydi { box-shadow: var(--g2); }

.ust-ana { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--b5); min-height: var(--header-y); }
.marka-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.marka-logo img { height: 44px; width: auto; object-fit: contain; }
.marka-logo .ad { font-family: var(--f-baslik); font-size: 1.32rem; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.marka-logo .ad small { display: block; font-family: var(--f-govde); font-size: .58rem; letter-spacing: .3em; color: var(--murekkep-3); font-weight: 600; margin-top: 3px; }

/* Arama */
.arama-kutu { position: relative; max-width: 520px; width: 100%; justify-self: center; }
.arama-kutu input {
  width: 100%; padding: 12px 46px 12px 44px;
  border: 1.5px solid var(--cizgi); border-radius: var(--r-tam);
  background: var(--kagit-3); font-size: var(--m-sm); transition: border-color var(--hiz), background var(--hiz);
}
.arama-kutu input:focus { outline: none; border-color: var(--marka); background: var(--kagit); }
.arama-kutu .ikon-sol { position: absolute; left: 17px; top: 50%; translate: 0 -50%; color: var(--murekkep-4); pointer-events: none; }
.arama-kutu .ara-dg { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border-radius: 50%; background: var(--marka); color: #fff; display: grid; place-items: center; }
.arama-oneri {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  box-shadow: var(--g4); overflow: hidden; z-index: 60; display: none; max-height: 70vh; overflow-y: auto;
}
.arama-oneri.acik { display: block; }
.arama-oneri .baslik { padding: 12px 16px 6px; font-size: var(--m-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--murekkep-4); font-weight: 700; }
.oneri-satir { display: flex; gap: 12px; align-items: center; padding: 10px 16px; transition: background var(--hiz); }
.oneri-satir:hover, .oneri-satir.secili { background: var(--kagit-3); }
.oneri-satir img { width: 46px; height: 46px; object-fit: contain; background: var(--kagit-3); border-radius: var(--r-sm); flex-shrink: 0; }
.oneri-satir .ad { font-size: var(--m-sm); font-weight: 600; }
.oneri-satir .fiyat { font-size: var(--m-xs); color: var(--marka); font-weight: 700; }

/* Eylemler */
.ust-eylem { display: flex; align-items: center; gap: 4px; }
.eylem-dg {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 12px; border-radius: var(--r-md); color: var(--murekkep-2);
  transition: background var(--hiz), color var(--hiz); font-size: var(--m-2xs); font-weight: 600;
}
.eylem-dg i { font-size: 1.18rem; }
.eylem-dg:hover { background: var(--kagit-3); color: var(--marka); }
.eylem-dg .sayac {
  position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--marka); color: #fff; border-radius: var(--r-tam);
  font-size: .66rem; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--kagit); line-height: 1;
}
.eylem-dg .sayac[data-bos="1"] { display: none; }
.eylem-dg .yazi { display: none; }
@media (min-width: 1100px) { .eylem-dg .yazi { display: block; } }

/* Hesap açılır menü */
.acilir-sar { position: relative; }
/* Düğme ile menü arasında 10px boşluk var. Fare bu boşluğu geçerken hover
   kopmasın diye görünmez bir köprü koyuyoruz; yalnızca menü açıkken
   tıklamaları yakalar, kapalıyken altındaki öğeleri engellemez. */
.acilir-sar::after {
  content: ''; position: absolute; top: 100%; right: 0;
  width: 290px; height: 12px; pointer-events: none;
}
.acilir-sar:hover::after, .acilir-sar:focus-within::after { pointer-events: auto; }
.acilir {
  position: absolute; top: calc(100% + 10px); right: 0; width: 290px;
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  box-shadow: var(--g4); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(-6px); z-index: 70;
  transition: opacity var(--hiz), visibility var(--hiz), transform var(--hiz);
  /* Fare menüden ayrılınca hemen kapanmasın; yanlışlıkla çıkışta geri dönme payı. */
  transition-delay: 400ms;
}
.acilir-sar:hover .acilir, .acilir-sar:focus-within .acilir {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0ms;   /* açılış anında olsun */
}
.acilir .menu-satir { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); font-size: var(--m-sm); font-weight: 600; transition: background var(--hiz); }
.acilir .menu-satir i { width: 20px; color: var(--marka); }
.acilir .menu-satir:hover { background: var(--marka-acik); }
.acilir .ayrac { height: 1px; background: var(--cizgi); margin: 6px 10px; }
.acilir .basliksatir { padding: 10px 14px 4px; font-size: var(--m-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-4); font-weight: 700; }

/* Ana gezinme */
.gezinme { border-top: 1px solid var(--cizgi); }
.gezinme-liste { display: flex; align-items: center; gap: 2px; }
.gezinme-liste > li > a {
  display: flex; align-items: center; gap: 7px; padding: 13px 16px;
  font-size: var(--m-sm); font-weight: 600; color: var(--murekkep-2);
  border-bottom: 2px solid transparent; transition: var(--hiz);
}
.gezinme-liste > li > a:hover, .gezinme-liste > li > a.aktif { color: var(--marka); border-bottom-color: var(--marka); }
.gezinme-liste .vurgu { color: var(--kirmizi) !important; }

/* Mega menü */
.mega-sar { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--kagit); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi);
  box-shadow: var(--g3); padding: var(--b6) 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: var(--hiz); z-index: 65;
}
.mega-sar:hover .mega, .mega-sar:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b6); }
.mega-sutun h4 { font-size: var(--m-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--murekkep-4); margin-bottom: 14px; }
.mega-sutun a { display: block; padding: 7px 0; font-size: var(--m-sm); color: var(--murekkep-2); transition: var(--hiz); }
.mega-sutun a:hover { color: var(--marka); padding-left: 6px; }
.mega-gorsel { border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--kagit-3); min-height: 190px; }
.mega-gorsel img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mega-gorsel .yazi { position: relative; z-index: 2; padding: var(--b4); color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .6); display: flex; flex-direction: column; justify-content: flex-end; height: 190px; }

/* Mobil menü */
.mobil-ac { display: none; }
.mobil-menu {
  position: fixed; inset: 0 30% 0 0; background: var(--kagit); z-index: var(--katman-drawer);
  transform: translateX(-100%); transition: transform var(--hiz-yavas); overflow-y: auto; padding: var(--b4);
  box-shadow: var(--g4);
}
.mobil-menu.acik { transform: translateX(0); }
.mobil-menu a { display: block; padding: 14px 12px; border-bottom: 1px solid var(--cizgi); font-weight: 600; }

@media (max-width: 900px) {
  .mobil-ac { display: flex; }
  .gezinme { display: none; }
  .ust-ana { grid-template-columns: auto 1fr auto; gap: var(--b3); min-height: 60px; }
  .arama-kutu { display: none; }
  .arama-mobil { padding: 0 0 12px; }
  .arama-mobil .arama-kutu { display: block; max-width: none; }
  .marka-logo img { height: 36px; }
  .marka-logo .ad { font-size: 1.05rem; }
  .eylem-dg { padding: 8px; }
}
@media (min-width: 901px) { .arama-mobil { display: none; } }

/* ---------------------------------------------------------------
   9. HERO / VİTRİN SLIDER (reklam slotu)
--------------------------------------------------------------- */
.hero { position: relative; height: clamp(420px, 62vh, 640px); overflow: hidden; background: var(--murekkep); }
.hero-slayt { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.hero-slayt.aktif { opacity: 1; pointer-events: auto; }
.hero-slayt > img, .hero-slayt > video { width: 100%; height: 100%; object-fit: cover; }
.hero-perde { position: absolute; inset: 0; background: linear-gradient(100deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .45) 46%, rgb(0 0 0 / .12) 100%); }
.hero-icerik {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  color: #fff; max-width: 620px; padding-inline: clamp(16px, 4vw, 40px);
  margin-inline: auto; width: 100%; max-width: var(--en); align-items: flex-start;
}
.hero-icerik .rozet { background: rgb(255 255 255 / .16); color: #fff; backdrop-filter: blur(6px); margin-bottom: 16px; }
.hero-icerik h1 { color: #fff; max-width: 15ch; margin-bottom: 14px; text-shadow: 0 2px 24px rgb(0 0 0 / .4); }
.hero-icerik p { font-size: var(--m-lg); opacity: .92; max-width: 44ch; margin-bottom: 28px; font-weight: 400; }
.hero-dgler { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-dgler .dg-cizgi { border-color: rgb(255 255 255 / .55); color: #fff; background: rgb(255 255 255 / .08); backdrop-filter: blur(6px); }
.hero-dgler .dg-cizgi:hover { background: #fff; color: var(--murekkep); border-color: #fff; }

.hero-kontrol { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; z-index: 5; width: 100%; max-width: var(--en); padding-inline: clamp(16px, 4vw, 40px); }
.hero-nokta { width: 30px; height: 3px; border-radius: var(--r-tam); background: rgb(255 255 255 / .32); overflow: hidden; cursor: pointer; transition: width var(--hiz); }
.hero-nokta.aktif { width: 56px; background: rgb(255 255 255 / .32); }
.hero-nokta.aktif::after { content: ""; display: block; height: 100%; background: #fff; animation: ilerle var(--sure, 7s) linear forwards; }
@keyframes ilerle { from { width: 0; } to { width: 100%; } }
.hero-ok { position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 255 255 / .14); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; z-index: 5; transition: var(--hiz); border: 1px solid rgb(255 255 255 / .2); }
.hero-ok:hover { background: #fff; color: var(--murekkep); }
.hero-ok.sol { left: 20px; } .hero-ok.sag { right: 20px; }

@media (max-width: 700px) {
  .hero { height: 460px; }
  .hero-icerik p { font-size: var(--m-md); }
  .hero-ok { display: none; }
}

/* ---------------------------------------------------------------
   10. GÜVEN ŞERİDİ
--------------------------------------------------------------- */
.guven { background: var(--kagit); border-bottom: 1px solid var(--cizgi); }
.guven-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b4); padding-block: var(--b5); }
.guven-oge { display: flex; align-items: center; gap: 14px; }
.guven-oge i { font-size: 1.5rem; color: var(--marka); flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center; background: var(--marka-acik); border-radius: 50%; }
.guven-oge .bas { font-weight: 700; font-size: var(--m-sm); }
.guven-oge .alt { font-size: var(--m-xs); color: var(--murekkep-3); }
@media (max-width: 900px) { .guven-izgara { grid-template-columns: repeat(2, 1fr); gap: var(--b4) var(--b3); } }
@media (max-width: 460px) { .guven-oge i { width: 34px; height: 34px; font-size: 1.1rem; } .guven-oge .alt { display: none; } }

/* ---------------------------------------------------------------
   11. KATEGORİ KARTLARI
--------------------------------------------------------------- */
.kategori-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--b4); }
.kategori-kart {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 210px;
  background: var(--kagit); border: 1px solid var(--cizgi); padding: var(--b5);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform var(--hiz), box-shadow var(--hiz), border-color var(--hiz);
}
.kategori-kart:hover { transform: translateY(-4px); box-shadow: var(--g3); border-color: var(--marka); }
.kategori-kart .kk-ikon { position: absolute; top: 20px; right: 20px; font-size: 2.4rem; color: var(--marka); opacity: .16; }
.kategori-kart h3 { font-size: var(--m-lg); margin-bottom: 6px; }
.kategori-kart p { font-size: var(--m-xs); color: var(--murekkep-3); margin-bottom: 14px; }
.kategori-kart .git { font-size: var(--m-xs); font-weight: 700; color: var(--marka); display: inline-flex; align-items: center; gap: 6px; }
.kategori-kart:hover .git i { transform: translateX(4px); }
.kategori-kart .git i { transition: transform var(--hiz); }

/* ---------------------------------------------------------------
   12. ÜRÜN KARTI
--------------------------------------------------------------- */
.urun-izgara { display: grid; gap: var(--b4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.urun-izgara.genis { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 620px) { .urun-izgara { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.urun-kart {
  position: relative; background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--hiz), box-shadow var(--hiz), border-color var(--hiz);
}
.urun-kart:hover { transform: translateY(-5px); box-shadow: var(--g3); border-color: var(--cizgi-koyu); }

.uk-gorsel { position: relative; aspect-ratio: 4 / 3; background: var(--kagit-3); overflow: hidden; }
.uk-gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: opacity var(--hiz), transform var(--hiz-yavas); }
.uk-gorsel img.ikinci { position: absolute; inset: 0; opacity: 0; }
.urun-kart:hover .uk-gorsel img.ilk { opacity: 0; }
.urun-kart:hover .uk-gorsel img.ikinci { opacity: 1; }
.urun-kart:hover .uk-gorsel img { transform: scale(1.05); }

.uk-rozetler { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 3; align-items: flex-start; }
.uk-favori {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--kagit) 85%, transparent);
  backdrop-filter: blur(6px); display: grid; place-items: center; color: var(--murekkep-3);
  border: 1px solid var(--cizgi); transition: var(--hiz);
}
.uk-favori:hover { color: var(--kirmizi); border-color: var(--kirmizi); }
.uk-favori.dolu { color: var(--kirmizi); }
.uk-favori.dolu i { font-weight: 900; }

.uk-hizli {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  opacity: 0; transform: translateY(8px); transition: var(--hiz);
}
.urun-kart:hover .uk-hizli { opacity: 1; transform: translateY(0); }
@media (hover: none) { .uk-hizli { opacity: 1; transform: none; } }

.uk-govde { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.uk-marka { font-size: var(--m-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-4); }
.uk-ad { font-size: var(--m-sm); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.uk-ad:hover { color: var(--marka); }
.uk-meta { display: flex; align-items: center; gap: 8px; font-size: var(--m-2xs); color: var(--murekkep-3); flex-wrap: wrap; }
.uk-cip { background: var(--kagit-3); border-radius: var(--r-sm); padding: 2px 7px; font-weight: 600; }
.yildizlar { color: var(--altin); letter-spacing: .5px; }
.yildizlar + .sayi { color: var(--murekkep-4); font-size: var(--m-2xs); }

.uk-fiyat { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.uk-fiyat .simdi { font-size: 1.16rem; font-weight: 800; color: var(--murekkep); letter-spacing: -.02em; }
.uk-fiyat .simdi.indirimli { color: var(--kirmizi); }
.uk-fiyat .eski { font-size: var(--m-xs); color: var(--murekkep-4); text-decoration: line-through; }
.uk-taksit { font-size: var(--m-2xs); color: var(--murekkep-3); }

.uk-tukendi-perde { position: absolute; inset: 0; background: color-mix(in srgb, var(--kagit) 62%, transparent); z-index: 2; display: grid; place-items: center; }

/* Liste görünümü */
.urun-izgara.liste { grid-template-columns: 1fr; }
.urun-izgara.liste .urun-kart { flex-direction: row; }
.urun-izgara.liste .uk-gorsel { width: 220px; flex-shrink: 0; aspect-ratio: 1; }
.urun-izgara.liste .uk-govde { padding: var(--b5); }
@media (max-width: 620px) { .urun-izgara.liste .uk-gorsel { width: 120px; } }

/* ---------------------------------------------------------------
   13. KAMPANYA BANNER (reklam slotu)
--------------------------------------------------------------- */
.kampanya {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: var(--koyu-panel); color: var(--koyu-panel-yazi); min-height: 260px;
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
}
.kampanya .kmp-yazi { padding: clamp(24px, 4vw, 48px); position: relative; z-index: 2; }
.kampanya h3 { font-size: var(--m-2xl); color: var(--koyu-panel-yazi); margin-bottom: 10px; }
.kampanya p { opacity: .85; margin-bottom: 20px; max-width: 46ch; }
.kampanya .kmp-gorsel { position: relative; height: 100%; min-height: 260px; }
.kampanya .kmp-gorsel img, .kampanya .kmp-gorsel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kampanya.tam-gorsel { grid-template-columns: 1fr; }
.kampanya.tam-gorsel .kmp-gorsel { position: absolute; inset: 0; }
.kampanya.tam-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .75), rgb(0 0 0 / .2)); z-index: 1; }
@media (max-width: 780px) { .kampanya { grid-template-columns: 1fr; } .kampanya .kmp-gorsel { order: -1; min-height: 180px; } }

/* Geri sayım */
.geri-sayim { display: flex; gap: 8px; margin-bottom: 20px; }
.gs-birim { background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); border-radius: var(--r-md); padding: 8px 12px; text-align: center; min-width: 58px; backdrop-filter: blur(6px); }
.gs-birim .sayi { font-size: 1.45rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.gs-birim .etiket { font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin-top: 4px; }

/* Şerit reklam (ince) */
.serit-reklam {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b4);
  padding: 16px 22px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--marka-acik), var(--kagit));
  border: 1px solid var(--marka); flex-wrap: wrap;
}
.serit-reklam .sr-sol { display: flex; align-items: center; gap: 14px; }
.serit-reklam i { font-size: 1.5rem; color: var(--marka); }
.serit-reklam .sr-bas { font-weight: 800; font-size: var(--m-sm); }
.serit-reklam .sr-alt { font-size: var(--m-xs); color: var(--murekkep-3); }

/* ---------------------------------------------------------------
   14. SEPET ÇEKMECESİ
--------------------------------------------------------------- */
.perde {
  position: fixed; inset: 0; background: rgb(10 12 14 / .5); backdrop-filter: blur(3px);
  z-index: var(--katman-drawer); opacity: 0; visibility: hidden; transition: var(--hiz);
}
.perde.acik { opacity: 1; visibility: visible; }

.cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%);
  background: var(--kagit); z-index: calc(var(--katman-drawer) + 1);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform var(--hiz-yavas); box-shadow: var(--g4);
}
.cekmece.acik { transform: translateX(0); }
.cekmece-bas { display: flex; align-items: center; justify-content: space-between; padding: var(--b4) var(--b5); border-bottom: 1px solid var(--cizgi); }
.cekmece-bas h3 { font-size: var(--m-lg); }
.cekmece-govde { flex: 1; overflow-y: auto; padding: var(--b4) var(--b5); }
.cekmece-alt { border-top: 1px solid var(--cizgi); padding: var(--b5); background: var(--kagit-2); }

.sepet-satir { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.sepet-satir img { width: 74px; height: 74px; object-fit: contain; background: var(--kagit-3); border-radius: var(--r-md); flex-shrink: 0; }
.sepet-satir .bilgi { flex: 1; min-width: 0; }
.sepet-satir .ad { font-size: var(--m-sm); font-weight: 600; line-height: 1.3; }
.sepet-satir .cam { font-size: var(--m-2xs); color: var(--marka); font-weight: 600; margin-top: 3px; }
.sepet-satir .fiyat { font-weight: 700; font-size: var(--m-sm); margin-top: 5px; }

.adet-kutu { display: inline-flex; align-items: center; border: 1px solid var(--cizgi); border-radius: var(--r-tam); overflow: hidden; }
.adet-kutu button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--murekkep-2); transition: background var(--hiz); }
.adet-kutu button:hover { background: var(--kagit-3); color: var(--marka); }
.adet-kutu .deger { min-width: 30px; text-align: center; font-weight: 700; font-size: var(--m-sm); }

/* Ücretsiz kargo çubuğu */
.kargo-cubuk { background: var(--marka-acik); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: var(--b4); }
.kargo-cubuk .yazi { font-size: var(--m-xs); font-weight: 600; margin-bottom: 8px; color: var(--marka-koyu); }
.kargo-ray { height: 6px; border-radius: var(--r-tam); background: color-mix(in srgb, var(--marka) 22%, transparent); overflow: hidden; }
.kargo-ray span { display: block; height: 100%; background: var(--marka); border-radius: var(--r-tam); transition: width var(--hiz-yavas); }

.ozet-satir { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: var(--m-sm); }
.ozet-satir.toplam { border-top: 1px solid var(--cizgi); margin-top: 8px; padding-top: 14px; font-size: var(--m-lg); font-weight: 800; }
.ozet-satir .indirim-renk { color: var(--yesil); font-weight: 700; }

/* ---------------------------------------------------------------
   15. ÜRÜN DETAY
--------------------------------------------------------------- */
.detay-izgara { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 940px) { .detay-izgara { grid-template-columns: 1fr; } }

.galeri { display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.galeri-kucuk { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; }
.galeri-kucuk img { width: 84px; height: 84px; object-fit: contain; background: var(--kagit-3); border: 2px solid transparent; border-radius: var(--r-md); cursor: pointer; padding: 6px; transition: var(--hiz); }
.galeri-kucuk img:hover { border-color: var(--cizgi-koyu); }
.galeri-kucuk img.aktif { border-color: var(--marka); }
.galeri-buyuk { position: relative; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r-lg); aspect-ratio: 1; overflow: hidden; cursor: zoom-in; }
.galeri-buyuk img { width: 100%; height: 100%; object-fit: contain; padding: 24px; transition: transform var(--hiz-yavas); }
.galeri-buyuk:hover img { transform: scale(1.12); }
@media (max-width: 620px) {
  .galeri { grid-template-columns: 1fr; }
  .galeri-kucuk { flex-direction: row; max-height: none; overflow-x: auto; order: 2; }
}

.detay-bilgi .marka-satir { font-size: var(--m-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--murekkep-4); font-weight: 700; margin-bottom: 8px; }
.detay-bilgi h1 { font-size: var(--m-xl); margin-bottom: 12px; }
.detay-fiyat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.detay-fiyat .simdi { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.detay-fiyat .eski { font-size: var(--m-md); color: var(--murekkep-4); text-decoration: line-through; }

.ozellik-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: var(--b5) 0; }
.ozellik-oge { background: var(--kagit-3); border-radius: var(--r-md); padding: 11px 14px; }
.ozellik-oge .et { font-size: var(--m-2xs); color: var(--murekkep-4); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.ozellik-oge .dg2 { font-size: var(--m-sm); font-weight: 600; margin-top: 2px; }

/* Cam seçici */
.cam-secim { border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: var(--b4); margin: var(--b5) 0; background: var(--kagit); }
.cam-secim > .bas { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--m-sm); margin-bottom: 4px; }
.cam-secim > .alt { font-size: var(--m-xs); color: var(--murekkep-3); margin-bottom: 14px; }
.cam-sec { display: grid; gap: 8px; }
.cam-oge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--cizgi); border-radius: var(--r-md); cursor: pointer; transition: var(--hiz); }
.cam-oge:hover { border-color: var(--marka); background: var(--marka-acik); }
.cam-oge input { accent-color: var(--marka); width: 18px; height: 18px; flex-shrink: 0; }
.cam-oge.secili { border-color: var(--marka); background: var(--marka-acik); }
.cam-oge .co-ad { font-weight: 600; font-size: var(--m-sm); }
.cam-oge .co-ac { font-size: var(--m-2xs); color: var(--murekkep-3); }
.cam-oge .co-fi { margin-left: auto; font-weight: 800; font-size: var(--m-sm); color: var(--marka); white-space: nowrap; }

.stok-uyari { display: flex; align-items: center; gap: 8px; font-size: var(--m-xs); font-weight: 700; color: var(--kirmizi); background: var(--kirmizi-acik); padding: 9px 13px; border-radius: var(--r-md); margin: 12px 0; }
.stok-var { color: var(--yesil); background: var(--marka-acik); }

.satin-al { display: flex; gap: 12px; align-items: stretch; margin-top: var(--b4); }
.satin-al .adet-kutu { border-radius: var(--r-tam); }

/* Yapışkan mobil satın alma çubuğu */
.mobil-satin {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--kagit); border-top: 1px solid var(--cizgi); padding: 10px 14px;
  display: none; align-items: center; gap: 12px; box-shadow: 0 -4px 20px rgb(0 0 0 / .08);
}
@media (max-width: 940px) { .mobil-satin { display: flex; } body.detay-sayfa { padding-bottom: 76px; } }

/* Sekmeler */
.sekme-basliklar { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); overflow-x: auto; }
.sekme-bas { padding: 14px 20px; font-weight: 700; font-size: var(--m-sm); color: var(--murekkep-3); border-bottom: 2px solid transparent; white-space: nowrap; transition: var(--hiz); }
.sekme-bas.aktif { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-icerik { display: none; padding-top: var(--b5); line-height: 1.8; }
.sekme-icerik.aktif { display: block; }

/* Yorumlar */
.puan-ozet { display: grid; grid-template-columns: 180px 1fr; gap: var(--b6); align-items: center; padding: var(--b5); background: var(--kagit-3); border-radius: var(--r-lg); margin-bottom: var(--b5); }
.puan-buyuk { text-align: center; }
.puan-buyuk .sayi { font-size: 3rem; font-weight: 800; line-height: 1; font-family: var(--f-baslik); }
.puan-cubuk { display: flex; align-items: center; gap: 10px; font-size: var(--m-xs); margin-bottom: 6px; }
.puan-cubuk .ray { flex: 1; height: 7px; background: var(--cizgi); border-radius: var(--r-tam); overflow: hidden; }
.puan-cubuk .ray span { display: block; height: 100%; background: var(--altin); }
@media (max-width: 620px) { .puan-ozet { grid-template-columns: 1fr; gap: var(--b4); } }

.yorum-kart { padding: var(--b4) 0; border-bottom: 1px solid var(--cizgi); }
.yorum-kart .ust-satir { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.yorum-kart .kisi { font-weight: 700; font-size: var(--m-sm); }
.yorum-kart .tarih { font-size: var(--m-2xs); color: var(--murekkep-4); margin-left: auto; }

/* ---------------------------------------------------------------
   16. KATALOG / FİLTRE
--------------------------------------------------------------- */
.katalog { display: grid; grid-template-columns: 250px 1fr; gap: var(--b6); align-items: start; }
@media (max-width: 940px) { .katalog { grid-template-columns: 1fr; } }

.filtre-panel { position: sticky; top: calc(var(--header-y) + 16px); background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: var(--b4); }
.filtre-grup { border-bottom: 1px solid var(--cizgi); padding-block: var(--b3); }
.filtre-grup:last-child { border-bottom: none; }
.filtre-grup > summary { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: var(--m-sm); cursor: pointer; list-style: none; padding: 4px 0; }
.filtre-grup > summary::-webkit-details-marker { display: none; }
.filtre-grup > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem; color: var(--murekkep-4); transition: transform var(--hiz); }
.filtre-grup[open] > summary::after { transform: rotate(180deg); }
.filtre-secenek { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--m-sm); cursor: pointer; }
.filtre-secenek input { accent-color: var(--marka); width: 16px; height: 16px; }
.filtre-secenek .adet { margin-left: auto; font-size: var(--m-2xs); color: var(--murekkep-4); }

.katalog-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--b3); margin-bottom: var(--b4); flex-wrap: wrap; }
.sirala-sec, .sayfa-sec { padding: 10px 14px; border: 1px solid var(--cizgi); border-radius: var(--r-md); background: var(--kagit); font-size: var(--m-sm); font-weight: 600; cursor: pointer; }
.aktif-filtreler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--b4); }
.filtre-cip { display: inline-flex; align-items: center; gap: 7px; background: var(--marka-acik); color: var(--marka-koyu); border-radius: var(--r-tam); padding: 6px 12px; font-size: var(--m-xs); font-weight: 600; }
.filtre-cip button { color: inherit; opacity: .6; } .filtre-cip button:hover { opacity: 1; }

.filtre-ac-mobil { display: none; }
@media (max-width: 940px) {
  .filtre-ac-mobil { display: inline-flex; }
  .filtre-panel { position: fixed; inset: 0 20% 0 0; z-index: var(--katman-drawer); border-radius: 0; overflow-y: auto; transform: translateX(-100%); transition: transform var(--hiz-yavas); }
  .filtre-panel.acik { transform: translateX(0); }
}

/* Sayfalama */
.sayfalama { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: var(--b7); flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center;
  border: 1px solid var(--cizgi); border-radius: var(--r-md); font-weight: 600; font-size: var(--m-sm);
  transition: var(--hiz);
}
.sayfalama a:hover { border-color: var(--marka); color: var(--marka); }
.sayfalama .aktif { background: var(--marka); color: #fff; border-color: var(--marka); }
.sayfalama .bosluk { border: none; }

/* Kırıntı */
.kirinti { display: flex; align-items: center; gap: 8px; font-size: var(--m-xs); color: var(--murekkep-3); padding-block: var(--b4); flex-wrap: wrap; }
.kirinti a:hover { color: var(--marka); }
.kirinti .ayrac { opacity: .4; }

/* Boş durum */
.bos-durum { text-align: center; padding: var(--b9) var(--b4); }
.bos-durum i { font-size: 3.4rem; color: var(--cizgi-koyu); margin-bottom: var(--b4); }
.bos-durum h3 { margin-bottom: 8px; }
.bos-durum p { color: var(--murekkep-3); margin-bottom: var(--b5); }

/* ---------------------------------------------------------------
   17. FORMLAR
--------------------------------------------------------------- */
.alan { margin-bottom: var(--b4); }
.alan label { display: block; font-size: var(--m-xs); font-weight: 700; margin-bottom: 7px; color: var(--murekkep-2); }
.alan label .zorunlu { color: var(--kirmizi); }
.alan input, .alan select, .alan textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--cizgi); border-radius: var(--r-md);
  background: var(--kagit); font-size: var(--m-sm); transition: var(--hiz); color: var(--murekkep);
}
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--marka); box-shadow: 0 0 0 4px rgb(var(--marka-rgb) / .1);
}
.alan input::placeholder, .alan textarea::placeholder { color: var(--murekkep-4); }
.alan .ipucu { font-size: var(--m-2xs); color: var(--murekkep-4); margin-top: 5px; }
.alan-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--b3); }

.onay-satir { display: flex; align-items: flex-start; gap: 11px; font-size: var(--m-xs); line-height: 1.6; margin-bottom: 12px; cursor: pointer; }
.onay-satir input { accent-color: var(--marka); width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.onay-satir a { color: var(--marka); text-decoration: underline; text-underline-offset: 2px; }

.uyari { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; border-radius: var(--r-md); font-size: var(--m-sm); margin-bottom: var(--b4); font-weight: 500; }
.uyari i { margin-top: 3px; }
.uyari-hata   { background: var(--kirmizi-acik); color: var(--kirmizi); }
.uyari-basari { background: var(--marka-acik); color: var(--marka-koyu); }
.uyari-bilgi  { background: var(--kagit-3); color: var(--murekkep-2); }
.uyari-dikkat { background: var(--altin-acik); color: var(--altin); }

/* Kart / kutu */
.kutu { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: var(--b5); }
.kutu + .kutu { margin-top: var(--b4); }
.kutu > h3 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--b4); font-size: var(--m-lg); }
.kutu > h3 .num { width: 28px; height: 28px; border-radius: 50%; background: var(--marka); color: #fff; font-size: var(--m-xs); font-family: var(--f-govde); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }

/* Ödeme yöntemi seçimi */
.odeme-sec { display: grid; gap: 10px; }
.odeme-oge { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1.5px solid var(--cizgi); border-radius: var(--r-md); cursor: pointer; transition: var(--hiz); }
.odeme-oge:hover, .odeme-oge.secili { border-color: var(--marka); background: var(--marka-acik); }
.odeme-oge input { accent-color: var(--marka); width: 18px; height: 18px; }
.odeme-oge .oy-ad { font-weight: 700; font-size: var(--m-sm); }
.odeme-oge .oy-ac { font-size: var(--m-2xs); color: var(--murekkep-3); }
.odeme-oge i.marka-ikon { margin-left: auto; font-size: 1.4rem; color: var(--murekkep-3); }

/* Adım göstergesi */
.adimlar { display: flex; align-items: center; gap: 6px; margin-bottom: var(--b5); }
.adim { display: flex; align-items: center; gap: 9px; font-size: var(--m-xs); font-weight: 700; color: var(--murekkep-4); }
.adim .yuvarlak { width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font-size: .7rem; }
.adim.aktif { color: var(--marka); }
.adim.tamam { color: var(--yesil); }
.adim.tamam .yuvarlak { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.adim-cizgi { flex: 1; height: 2px; background: var(--cizgi); }

/* ---------------------------------------------------------------
   18. SİPARİŞ TAKİP ZAMAN ÇİZELGESİ
--------------------------------------------------------------- */
.zaman { position: relative; padding-left: 34px; }
.zaman::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--cizgi); }
.zaman-oge { position: relative; padding-bottom: var(--b5); }
.zaman-oge::before {
  content: ""; position: absolute; left: -28px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--kagit); border: 2px solid var(--cizgi-koyu);
}
.zaman-oge.tamam::before { background: var(--marka); border-color: var(--marka); }
.zaman-oge.aktif::before { background: var(--marka); border-color: var(--marka); box-shadow: 0 0 0 5px rgb(var(--marka-rgb) / .18); }
.zaman-oge .bas { font-weight: 700; font-size: var(--m-sm); }
.zaman-oge .tar { font-size: var(--m-2xs); color: var(--murekkep-4); }

/* ---------------------------------------------------------------
   19. FOOTER
--------------------------------------------------------------- */
.bulten {
  background: var(--koyu-panel); color: var(--koyu-panel-yazi); border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--b6); align-items: center;
}
.bulten h3 { color: var(--koyu-panel-yazi); font-size: var(--m-xl); margin-bottom: 8px; }
.bulten p { opacity: .78; font-size: var(--m-sm); }
.bulten-form { display: flex; gap: 10px; flex-wrap: wrap; }
.bulten-form input { flex: 1; min-width: 200px; padding: 14px 18px; border-radius: var(--r-tam); border: 1.5px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .08); color: #fff; }
.bulten-form input::placeholder { color: rgb(255 255 255 / .5); }
.bulten-form input:focus { outline: none; border-color: rgb(255 255 255 / .5); }
.bulten .kvkk-not { font-size: var(--m-2xs); opacity: .55; margin-top: 12px; }
@media (max-width: 780px) { .bulten { grid-template-columns: 1fr; } }

.alt-bilgi { background: var(--kagit); border-top: 1px solid var(--cizgi); padding-block: var(--b7) 0; margin-top: var(--b7); }
.alt-izgara { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--b6); }
.alt-izgara.besli { grid-template-columns: 1.5fr .85fr .95fr 1fr 1.15fr; gap: var(--b5); }
@media (max-width: 1180px) { .alt-izgara.besli { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 900px) { .alt-izgara { grid-template-columns: 1fr 1fr; gap: var(--b5); } }
@media (max-width: 520px) { .alt-izgara { grid-template-columns: 1fr; } }
.alt-sutun h4 { font-size: var(--m-2xs); text-transform: uppercase; letter-spacing: .13em; color: var(--murekkep-4); margin-bottom: var(--b4); }
.alt-sutun a, .alt-sutun p { display: block; font-size: var(--m-sm); color: var(--murekkep-2); padding: 5px 0; }
.alt-sutun a:hover { color: var(--marka); }
.alt-iletisim { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: var(--m-sm); }
.alt-iletisim i { color: var(--marka); width: 18px; margin-top: 4px; flex-shrink: 0; }

.sosyal { display: flex; gap: 10px; margin-top: var(--b4); }
.sosyal a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--cizgi); display: grid; place-items: center; color: var(--murekkep-2); transition: var(--hiz); }
.sosyal a:hover { background: var(--marka); color: #fff; border-color: var(--marka); }

.odeme-logolar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--b3); }
.odeme-logolar span {
  border: 1px solid var(--cizgi); border-radius: var(--r-sm); padding: 6px 10px;
  font-size: var(--m-2xs); font-weight: 700; color: var(--murekkep-3); background: var(--kagit-2);
}
.guven-mühür { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--cizgi); border-radius: var(--r-md); padding: 10px 14px; margin-top: var(--b4); }
.guven-mühür i { color: var(--marka); font-size: 1.3rem; }
.guven-mühür .bas { font-size: var(--m-2xs); font-weight: 800; }
.guven-mühür .alt { font-size: var(--m-2xs); color: var(--murekkep-3); }

.telif { border-top: 1px solid var(--cizgi); margin-top: var(--b6); padding-block: var(--b4); display: flex; justify-content: space-between; gap: var(--b4); flex-wrap: wrap; font-size: var(--m-xs); color: var(--murekkep-3); }

/* ---------------------------------------------------------------
   20. MODAL / POPUP REKLAM
--------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: var(--katman-modal); display: none; place-items: center; padding: var(--b4); background: rgb(10 12 14 / .58); backdrop-filter: blur(4px); }
.modal.acik { display: grid; }
.modal-ic { background: var(--kagit); border-radius: var(--r-xl); width: 100%; max-width: 560px; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--g4); animation: modalGir .3s cubic-bezier(.22,.61,.36,1); }
@keyframes modalGir { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-bas { display: flex; align-items: center; justify-content: space-between; padding: var(--b4) var(--b5); border-bottom: 1px solid var(--cizgi); }
.modal-bas h3 { font-size: var(--m-lg); }
.modal-govde { padding: var(--b5); overflow-y: auto; line-height: 1.8; font-size: var(--m-sm); }
.modal-govde h4 { margin: var(--b4) 0 8px; }
.modal-kapat { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--murekkep-3); transition: var(--hiz); }
.modal-kapat:hover { background: var(--kagit-3); color: var(--murekkep); }

/* Popup reklam varyantı */
.modal-reklam .modal-ic { max-width: 460px; }
.popup-gorsel { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.popup-yazi { padding: var(--b5); text-align: center; }
.popup-yazi h3 { margin-bottom: 8px; }
.popup-yazi p { color: var(--murekkep-3); font-size: var(--m-sm); margin-bottom: var(--b4); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgb(8 10 12 / .93); z-index: var(--katman-modal); display: none; place-items: center; }
.lightbox.acik { display: grid; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox .lb-kapat { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 1.6rem; }
.lightbox .lb-ok { position: absolute; top: 50%; translate: 0 -50%; color: #fff; font-size: 2rem; padding: 20px; opacity: .7; }
.lightbox .lb-ok:hover { opacity: 1; }
.lightbox .lb-ok.sol { left: 10px; } .lightbox .lb-ok.sag { right: 10px; }

/* ---------------------------------------------------------------
   21. TOAST
--------------------------------------------------------------- */
.toast-alan { position: fixed; bottom: 24px; left: 50%; translate: -50% 0; z-index: var(--katman-toast); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; width: min(420px, calc(100% - 32px)); }
.toast {
  background: var(--murekkep); color: var(--kagit); padding: 13px 18px; border-radius: var(--r-tam);
  font-size: var(--m-sm); font-weight: 600; box-shadow: var(--g4); display: flex; align-items: center; gap: 11px;
  animation: toastGir .3s cubic-bezier(.22,.61,.36,1); pointer-events: auto; max-width: 100%;
}
@keyframes toastGir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.toast.cikiyor { animation: toastCik .25s forwards; }
@keyframes toastCik { to { opacity: 0; transform: translateY(10px); } }
.toast i { color: var(--marka); }
.toast.hata i { color: #ff8a80; }

/* ---------------------------------------------------------------
   22. ÇEREZ BANDI
--------------------------------------------------------------- */
.cerez {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 800;
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  box-shadow: var(--g4); padding: var(--b4) var(--b5);
  display: flex; align-items: center; gap: var(--b4); flex-wrap: wrap;
  max-width: 760px; margin-inline: auto;
  animation: toastGir .4s .8s both;
}
.cerez p { font-size: var(--m-xs); color: var(--murekkep-2); flex: 1; min-width: 240px; line-height: 1.6; }
.cerez a { color: var(--marka); text-decoration: underline; }

/* ---------------------------------------------------------------
   23. AI ASİSTAN
--------------------------------------------------------------- */
.ferci {
  position: fixed; right: 20px; bottom: 20px; z-index: 700;
  width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--marka); box-shadow: var(--g3); cursor: pointer;
  transition: transform var(--hiz);
}
.ferci:hover { transform: scale(1.07); }
.ferci video, .ferci img { width: 100%; height: 100%; object-fit: cover; }
.ferci .nokta { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--yesil); border: 2px solid var(--kagit); }

.sohbet {
  position: fixed; right: 20px; bottom: 94px; z-index: 701;
  width: min(370px, calc(100vw - 40px)); height: min(540px, calc(100vh - 140px));
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  box-shadow: var(--g4); display: none; flex-direction: column; overflow: hidden;
}
.sohbet.acik { display: flex; }
.sohbet-bas { background: var(--marka); color: #fff; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.sohbet-hizli { display: flex; gap: 7px; padding: 10px; border-bottom: 1px solid var(--cizgi); overflow-x: auto; }
.sohbet-hizli button { white-space: nowrap; border: 1px solid var(--cizgi); border-radius: var(--r-tam); padding: 6px 13px; font-size: var(--m-2xs); font-weight: 600; transition: var(--hiz); }
.sohbet-hizli button:hover { border-color: var(--marka); color: var(--marka); background: var(--marka-acik); }
.sohbet-govde { flex: 1; overflow-y: auto; padding: var(--b4); display: flex; flex-direction: column; gap: 10px; background: var(--kagit-2); }
.mesaj { max-width: 82%; padding: 10px 14px; border-radius: var(--r-lg); font-size: var(--m-xs); line-height: 1.55; }
.mesaj.bot { background: var(--kagit); border: 1px solid var(--cizgi); align-self: flex-start; border-bottom-left-radius: 4px; }
.mesaj.ben { background: var(--marka); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.sohbet-alt { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--cizgi); }
.sohbet-alt input { flex: 1; padding: 10px 14px; border: 1px solid var(--cizgi); border-radius: var(--r-tam); font-size: var(--m-xs); background: var(--kagit); }
.sohbet-alt button { width: 38px; height: 38px; border-radius: 50%; background: var(--marka); color: #fff; display: grid; place-items: center; flex-shrink: 0; }

/* ---------------------------------------------------------------
   24. AÇILIŞ (SPLASH) ANİMASYONU
   Tipler: gozluk | yukselis | zoom | perde | sade
   Yazı efektleri: daktilo | belirme | kayma | yok
   Tümü yönetim panelinden (admin/gorunum.php) seçilir.
--------------------------------------------------------------- */
.acilis {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: var(--acilis-renk, #14181b); overflow: hidden;
  transition: opacity .65s ease, visibility .65s;
}
.acilis.kapali { opacity: 0; visibility: hidden; pointer-events: none; }
.acilis video.arka, .acilis img.arka {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(.32) saturate(1.1);
}

/* Marka rengiyle yumuşak ışık havuzu */
.acilis::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 45%, rgb(var(--marka-rgb) / .22), transparent 70%);
}

.acilis-ic { position: relative; z-index: 3; text-align: center; padding: var(--b5); }
.acilis-ic img.logo { height: clamp(74px, 12vw, 108px); width: auto; margin-inline: auto; display: block; position: relative; z-index: 3; }
/* Camların logoyu tam ortalayabilmesi için ölçüsü logoya göre belirlenen alan */
.gozluk-alan {
  position: relative; display: grid; place-items: center;
  min-height: clamp(150px, 22vw, 230px); margin-inline: auto;
}
.acilis-ic .slogan {
  font-family: var(--f-baslik); font-size: var(--m-lg); font-style: italic;
  letter-spacing: .06em; color: #fff; margin-top: 16px; min-height: 1.5em;
  text-shadow: 0 2px 20px rgb(0 0 0 / .5);
}

/* Ortak: ince marka çizgisi */
.acilis-cizgi {
  width: 0; height: 2px; margin: 22px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--marka), transparent);
  animation: acilisCizgi 1.1s .25s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes acilisCizgi { to { width: min(240px, 60vw); } }

/* Alt ilerleme çubuğu — süreyi görsel olarak bildirir */
.acilis-ilerle {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: rgb(255 255 255 / .12); z-index: 5;
}
.acilis-ilerle span {
  display: block; height: 100%; width: 0; background: var(--marka);
  animation: acilisIlerle var(--acilis-sure, 2200ms) linear forwards;
}
@keyframes acilisIlerle { to { width: 100%; } }

.acilis-atla {
  position: absolute; right: 20px; bottom: 22px; z-index: 6;
  color: rgb(255 255 255 / .65); font-size: var(--m-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgb(255 255 255 / .25); border-radius: var(--r-tam);
  padding: 8px 18px; backdrop-filter: blur(6px); transition: var(--hiz);
  opacity: 0; animation: belirGec .5s .8s forwards;
}
.acilis-atla:hover { color: #fff; border-color: #fff; background: rgb(255 255 255 / .12); }
@keyframes belirGec { to { opacity: 1; } }

/* =============== TİP 1: GÖZLÜK AÇILIŞI =============== */
.acilis[data-anim="gozluk"] .cam-sol,
.acilis[data-anim="gozluk"] .cam-sag {
  position: absolute; top: 50%; width: min(190px, 32vw); aspect-ratio: 1.18;
  border: 3px solid rgb(255 255 255 / .5); border-radius: 46% 46% 44% 44%;
  z-index: 1; opacity: 0; pointer-events: none;
}
.acilis[data-anim="gozluk"] .cam-sol { left: 50%;  animation: camSol 1.5s cubic-bezier(.34,1.2,.4,1) forwards; }
.acilis[data-anim="gozluk"] .cam-sag { right: 50%; animation: camSag 1.5s cubic-bezier(.34,1.2,.4,1) forwards; }
@keyframes camSol {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: translate(14%, -50%) scale(1); opacity: .35; }
}
@keyframes camSag {
  0%   { transform: translate(50%, -50%) scale(.4); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: translate(-14%, -50%) scale(1); opacity: .35; }
}
.acilis[data-anim="gozluk"] .kopru {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 62px; height: 3px; background: rgb(255 255 255 / .4); border-radius: 3px;
  z-index: 1; opacity: 0; animation: belirGec .5s 1s forwards;
}
.acilis[data-anim="gozluk"] .acilis-ic img.logo {
  animation: logoNetles 1.2s .55s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes logoNetles {
  from { opacity: 0; transform: scale(.82); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}

/* =============== TİP 2: YUKARI SÜZÜLME =============== */
.acilis[data-anim="yukselis"] .acilis-ic img.logo { animation: yukselAnim 1.1s cubic-bezier(.22,.61,.36,1) both; }
@keyframes yukselAnim { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }

/* =============== TİP 3: ODAKLANMA (optik netleşme) =============== */
.acilis[data-anim="zoom"] .acilis-ic img.logo { animation: odaklan 1.5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes odaklan {
  0%   { opacity: 0; transform: scale(1.5); filter: blur(26px); }
  55%  { opacity: 1; filter: blur(5px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.acilis[data-anim="zoom"] .halka {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  border: 2px solid rgb(var(--marka-rgb) / .5); border-radius: 50%; z-index: 1;
  animation: halkaDaral 1.6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes halkaDaral {
  from { width: 620px; height: 620px; opacity: 0; }
  60%  { width: 380px; height: 380px; opacity: .8; }
  to   { width: 260px; height: 260px; opacity: 0; }
}

/* =============== TİP 4: PERDE AÇILIŞI =============== */
.acilis[data-anim="perde"] .perde-ust,
.acilis[data-anim="perde"] .perde-alt {
  position: absolute; left: 0; width: 100%; height: 50.5%;
  background: var(--acilis-renk, #14181b); z-index: 4;
}
.acilis[data-anim="perde"] .perde-ust { top: 0;    animation: perdeUst 1.1s .9s cubic-bezier(.7,0,.3,1) forwards; }
.acilis[data-anim="perde"] .perde-alt { bottom: 0; animation: perdeAlt 1.1s .9s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes perdeUst { to { transform: translateY(-100%); } }
@keyframes perdeAlt { to { transform: translateY(100%); } }
.acilis[data-anim="perde"] .acilis-ic img.logo { animation: yukselAnim .9s both; }

/* =============== TİP 5: SADE =============== */
.acilis[data-anim="sade"] .acilis-ic img.logo { animation: belirGec .9s both; }

/* =============== YAZI EFEKTLERİ =============== */
.slogan[data-yazi="daktilo"] {
  display: inline-block; overflow: hidden; white-space: nowrap;
  border-right: 2px solid rgb(var(--marka-rgb) / .9);
  width: 0; animation: daktilo 1.5s .9s steps(32, end) forwards, imlec .7s step-end infinite;
}
@keyframes daktilo { to { width: 100%; } }
@keyframes imlec   { 50% { border-color: transparent; } }

.slogan[data-yazi="belirme"] { opacity: 0; animation: belirGec 1s 1s forwards; }
.slogan[data-yazi="kayma"]   { opacity: 0; animation: sloganKay .9s 1s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes sloganKay { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* =============== PARÇACIKLAR =============== */
.acilis-parcaciklar { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.acilis-parcaciklar i {
  position: absolute; display: block; width: 4px; height: 4px; border-radius: 50%;
  background: rgb(255 255 255 / .55); box-shadow: 0 0 10px rgb(var(--marka-rgb) / .8);
  animation: zerre linear infinite;
}
@keyframes zerre {
  0%   { transform: translateY(110vh) scale(.5); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(-12vh) scale(1.15); opacity: 0; }
}

/* Hareket azaltma tercihine saygı.
   Salt dekoratif öğeler (cam halkaları, köprü, diyafram, perde, zerrecikler)
   animasyonsuz hâlde konumsuz kaldıkları için bozuk görünür — bilgi taşımadıkları
   için tamamen gizlenir. Logo ve slogan ise animasyonsuz olarak gösterilir. */
@media (prefers-reduced-motion: reduce) {
  .acilis *, .acilis::after {
    animation: none !important; opacity: 1 !important;
    transform: none !important; filter: none !important;
  }
  .acilis .cam-sol,
  .acilis .cam-sag,
  .acilis .kopru,
  .acilis .halka,
  .acilis .perde-ust,
  .acilis .perde-alt,
  .acilis .acilis-parcaciklar { display: none !important; }

  /* Süre çubuğu ve marka çizgisi animasyonsuz olduğu için sabit genişlik alır */
  .acilis-cizgi { width: min(240px, 60vw) !important; }
  .acilis-ilerle span { width: 100% !important; }
  .gozluk-alan { min-height: auto !important; }
}

/* ---------------------------------------------------------------
   25. İSKELET YÜKLEYİCİ
--------------------------------------------------------------- */
.iskelet { background: linear-gradient(90deg, var(--kagit-3) 25%, var(--cizgi) 37%, var(--kagit-3) 63%); background-size: 400% 100%; animation: parilti 1.4s ease infinite; border-radius: var(--r-md); }
@keyframes parilti { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---------------------------------------------------------------
   26. YARDIMCI SINIFLAR
--------------------------------------------------------------- */
.yatay-kaydir { display: flex; gap: var(--b4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--b3); scrollbar-width: thin; }
.yatay-kaydir > * { scroll-snap-align: start; flex: 0 0 auto; width: 250px; }
.orta { text-align: center; }
.sag { text-align: right; }
.kalin { font-weight: 700; }
.silik { color: var(--murekkep-3); }
.kucuk { font-size: var(--m-xs); }
.mt1 { margin-top: var(--b1); } .mt2 { margin-top: var(--b2); } .mt3 { margin-top: var(--b3); }
.mt4 { margin-top: var(--b4); } .mt5 { margin-top: var(--b5); } .mt6 { margin-top: var(--b6); }
.mb4 { margin-bottom: var(--b4); } .mb5 { margin-bottom: var(--b5); }
.esnek { display: flex; } .esnek-orta { display: flex; align-items: center; }
.bosluk2 { gap: var(--b2); } .bosluk3 { gap: var(--b3); } .bosluk4 { gap: var(--b4); }
.sar { flex-wrap: wrap; }
.buyu { flex: 1; }
@media (max-width: 620px) { .mobilde-gizle { display: none !important; } }
@media (min-width: 621px) { .sadece-mobil { display: none !important; } }

/* Yazdırma */
@media print {
  .ust, .alt-bilgi, .ferci, .sohbet, .cerez, .duyuru, .mobil-satin, .hero { display: none !important; }
  body { background: #fff; }
}

/* ---------------------------------------------------------------
   27. BİLGİ KUTUSU & YASAL ŞERİT
--------------------------------------------------------------- */
.bilgi-kutu {
  border: 1px solid var(--cizgi); border-left: 4px solid var(--murekkep-4);
  border-radius: var(--r-md); padding: 16px 18px; background: var(--kagit);
  margin: var(--b5) 0;
}
.bilgi-kutu.vurgulu { border-left-color: var(--marka); background: var(--marka-acik); }
.bilgi-kutu .bk-bas {
  display: flex; align-items: center; gap: 9px; font-weight: 800;
  font-size: var(--m-sm); margin-bottom: 8px; color: var(--murekkep);
}
.bilgi-kutu.vurgulu .bk-bas { color: var(--marka-koyu); }
.bilgi-kutu p { font-size: var(--m-xs); line-height: 1.7; color: var(--murekkep-2); }
.bilgi-kutu p + p { margin-top: 8px; }

/* Footer yasal satıcı bilgileri */
.yasal-serit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--b4);
  border-top: 1px solid var(--cizgi); margin-top: var(--b6); padding-top: var(--b5);
}
.yasal-serit .ys-blok { min-width: 0; }
.yasal-serit .ys-et {
  display: block; font-size: var(--m-2xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--murekkep-4); font-weight: 700; margin-bottom: 4px;
}
.yasal-serit .ys-dg { display: block; font-size: var(--m-xs); color: var(--murekkep-2); line-height: 1.55; }

.yasal-not {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--kagit-3); border-radius: var(--r-md); padding: 14px 16px;
  margin-top: var(--b4); font-size: var(--m-2xs); line-height: 1.65; color: var(--murekkep-2);
}
.yasal-not i { color: var(--marka); margin-top: 2px; flex-shrink: 0; }
.yasal-not a { color: var(--marka); text-decoration: underline; text-underline-offset: 2px; }


/* =====================================================================
   28. ÜST YARDIMCI ŞERİT
   Duyurunun üstünde ince bir bilgi/kısayol çubuğu.
   ===================================================================== */
.ust-serit {
  background: var(--koyu-panel); color: var(--koyu-panel-silik);
  font-size: var(--m-2xs); border-bottom: 1px solid rgb(255 255 255 / .08);
}
.ust-serit-ic { display: flex; align-items: center; justify-content: space-between; gap: var(--b4); min-height: 34px; }
.ust-serit .slogan { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .02em; }
.ust-serit .slogan i { color: var(--altin); }
.ust-serit nav { display: flex; align-items: center; gap: 2px; }
.ust-serit nav a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: var(--r-sm); transition: var(--hiz); font-weight: 600; white-space: nowrap;
}
.ust-serit nav a:hover { background: rgb(255 255 255 / .1); color: var(--koyu-panel-yazi); }
.ust-serit .ayirac { width: 1px; height: 14px; background: var(--koyu-panel-cizgi); margin: 0 4px; }
@media (max-width: 860px) { .ust-serit .slogan { display: none; } .ust-serit-ic { justify-content: center; } }

/* =====================================================================
   29. MOZAİK VİTRİN
   Slider yerine tek ekranda 6 tıklanabilir giriş noktası.
   ===================================================================== */
.mozaik {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(210px, auto);
}
.mozaik-kare {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--murekkep); display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--b5); min-height: 210px; isolation: isolate;
  transition: transform var(--hiz), box-shadow var(--hiz);
}
.mozaik-kare:hover { transform: translateY(-3px); box-shadow: var(--g3); }
.mozaik-kare.genis { grid-column: span 2; }
.mozaik-kare.uzun  { grid-row: span 2; }
/* 2x2 — 6 kareli varsayılan düzende ızgarayı tam dolduran ana kare */
.mozaik-kare.buyuk { grid-column: span 2; grid-row: span 2; }

.mozaik-kare > img, .mozaik-kare > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; transition: transform var(--hiz-yavas);
}
.mozaik-kare:hover > img { transform: scale(1.06); }
/* İki katmanlı perde: açık zeminli ürün fotoğraflarında da yazı okunur kalsın diye
   alttan yukarı güçlü bir degrade + tüm kareye ince bir koyulaştırma uygulanır. */
.mozaik-kare::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(10 12 14 / .10) 0%, rgb(10 12 14 / .30) 38%, rgb(10 12 14 / .82) 100%),
    linear-gradient(0deg, rgb(10 12 14 / .16), rgb(10 12 14 / .16));
}
/* Görseli olmayan kareler marka rengiyle dolar */
.mozaik-kare.gorselsiz { background: linear-gradient(145deg, var(--marka-koyu), var(--marka)); }
.mozaik-kare.gorselsiz::before { background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .35) 100%); }

.mozaik-kare .mk-rozet {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--altin); color: #fff; font-size: var(--m-2xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-sm);
}
.mozaik-kare h3 {
  color: #fff; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.08;
  text-shadow: 0 2px 18px rgb(0 0 0 / .45); margin-bottom: 4px;
}
.mozaik-kare.genis h3, .mozaik-kare.buyuk h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.mozaik-kare p {
  color: rgb(255 255 255 / .86); font-size: var(--m-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px;
}
.mozaik-kare .mk-dg {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: rgb(255 255 255 / .14); backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / .3); color: #fff;
  padding: 9px 18px; border-radius: var(--r-tam); font-size: var(--m-xs); font-weight: 700;
  transition: var(--hiz);
}
.mozaik-kare:hover .mk-dg { background: #fff; color: var(--murekkep); border-color: #fff; }

@media (max-width: 900px) {
  .mozaik { grid-template-columns: repeat(2, 1fr); gap: 10px; grid-auto-rows: minmax(160px, auto); }
  .mozaik-kare { min-height: 160px; padding: var(--b4); }
  .mozaik-kare.genis, .mozaik-kare.buyuk { grid-column: span 2; }
  .mozaik-kare.uzun, .mozaik-kare.buyuk { grid-row: span 1; }
}
@media (max-width: 520px) {
  .mozaik { grid-template-columns: 1fr 1fr; }
  .mozaik-kare p { display: none; }
  .mozaik-kare .mk-dg { padding: 7px 14px; font-size: var(--m-2xs); }
}

/* =====================================================================
   30. ÜYELİK / KAMPANYA BANDI
   ===================================================================== */
.uyelik-bant {
  background: linear-gradient(100deg, var(--marka-koyu), var(--marka));
  color: #fff; border-radius: var(--r-lg); overflow: hidden; position: relative;
}
.uyelik-bant::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
  border-radius: 50%; background: rgb(255 255 255 / .07);
}
.uyelik-ic {
  display: flex; align-items: center; gap: var(--b5); flex-wrap: wrap;
  padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 40px); position: relative; z-index: 1;
}
.uyelik-ic .ub-ikon {
  width: 52px; height: 52px; border-radius: 50%; background: rgb(255 255 255 / .16);
  display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0;
}
.uyelik-ic .ub-yazi { flex: 1; min-width: 220px; }
.uyelik-ic h3 {
  color: #fff; font-family: var(--f-govde); font-size: var(--m-md); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px;
}
.uyelik-ic p { font-size: var(--m-sm); opacity: .88; }
.uyelik-ic .dg { background: #fff; color: var(--marka-koyu); border: none; }
.uyelik-ic .dg:hover { background: var(--kagit-2); color: var(--marka-koyu); }

/* =====================================================================
   31. MARKA DUVARI
   ===================================================================== */
.marka-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .marka-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .marka-izgara { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.marka-kare {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: var(--kagit-3); display: flex; align-items: flex-end; justify-content: center;
  padding: var(--b4); isolation: isolate; border: 1px solid var(--cizgi);
  transition: transform var(--hiz), box-shadow var(--hiz), border-color var(--hiz);
}
.marka-kare:hover { transform: translateY(-4px); box-shadow: var(--g3); border-color: var(--marka); }
.marka-kare > img.yasam {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform var(--hiz-yavas);
}
.marka-kare:hover > img.yasam { transform: scale(1.07); }
.marka-kare::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / .62) 100%);
}
.marka-kare.gorselsiz { background: var(--kagit); align-items: center; }
.marka-kare.gorselsiz::before { display: none; }

.marka-kare img.logo { max-height: 42px; max-width: 72%; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.marka-kare.gorselsiz img.logo { filter: none; max-height: 54px; }
.marka-kare .marka-ad {
  color: #fff; font-family: var(--f-baslik); font-size: var(--m-lg); font-weight: 700;
  letter-spacing: .04em; text-align: center; text-shadow: 0 2px 14px rgb(0 0 0 / .5);
}
.marka-kare.gorselsiz .marka-ad { color: var(--murekkep); text-shadow: none; }
.marka-kare .marka-adet {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: color-mix(in srgb, var(--kagit) 88%, transparent); color: var(--murekkep-2);
  font-size: var(--m-2xs); font-weight: 700; padding: 3px 9px; border-radius: var(--r-tam);
  backdrop-filter: blur(6px);
}

/* Yatay kaydırmalı kompakt marka şeridi */
.marka-serit { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.marka-serit > * { flex: 0 0 auto; width: 190px; scroll-snap-align: start; }

/* =====================================================================
   32. SEKMELİ VİTRİN
   ===================================================================== */
.vitrin-sekme-bar {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--b5);
}
.vitrin-sekme {
  padding: 10px 22px; border-radius: var(--r-tam); font-weight: 700; font-size: var(--m-sm);
  color: var(--murekkep-3); border: 1.5px solid var(--cizgi); background: var(--kagit);
  transition: var(--hiz); cursor: pointer;
}
.vitrin-sekme:hover { border-color: var(--marka); color: var(--marka); }
.vitrin-sekme.aktif { background: var(--marka); border-color: var(--marka); color: #fff; }
.vitrin-panel { display: none; }
.vitrin-panel.aktif { display: block; animation: panelGir .32s cubic-bezier(.22,.61,.36,1); }
@keyframes panelGir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   33. ŞUBE LİSTESİ
   ===================================================================== */
.sube-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--b4); }
.sube-kart {
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: var(--r-lg);
  padding: var(--b5); transition: var(--hiz);
}
.sube-kart:hover { border-color: var(--marka); box-shadow: var(--g2); }
.sube-kart .sk-bas { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: var(--m-md); margin-bottom: 10px; }
.sube-kart .sk-bas .rozet { font-size: var(--m-2xs); }
.sube-kart .sk-satir { display: flex; gap: 10px; align-items: flex-start; font-size: var(--m-xs); color: var(--murekkep-2); padding: 5px 0; }
.sube-kart .sk-satir i { color: var(--marka); width: 16px; margin-top: 3px; flex-shrink: 0; }

/* Alt bilgide kompakt şube listesi */
.alt-sutun .sube-liste a { display: block; padding: 4px 0; font-size: var(--m-xs); }

/* =====================================================================
   34. BÖLÜM BAŞLIĞI — ORTALI VARYANT
   ===================================================================== */
.bolum-bas-orta { text-align: center; margin-bottom: var(--b6); }
.bolum-bas-orta h2 {
  font-family: var(--f-govde); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; font-size: var(--m-lg); display: inline-flex;
  align-items: center; gap: var(--b4);
}
.bolum-bas-orta h2::before, .bolum-bas-orta h2::after {
  content: ""; width: clamp(30px, 8vw, 90px); height: 1px; background: var(--cizgi-koyu);
}
.bolum-bas-orta .alt { color: var(--murekkep-3); font-size: var(--m-sm); margin-top: 8px; }