/* =====================================================================
   EpinMarket v2 — Premium Tema
   Bootstrap 5 üzerine: CSS değişkenleri, glassmorphism, gradient,
   karanlık/açık mod (html[data-bs-theme])
   ===================================================================== */

/* ===================================================================
   ÖLÇEK TOKENLARI — moddan bağımsız (KATMAN 1)
   Bileşen kütüphanesinin (app/Views/bilesen/) yazabileceği tek sözlük.
   Bileşenler tema önekini (--ph-*, --pf-*) KULLANMAZ; yalnız --em-*.
   Tema, kendi paletini bu adların üzerine bağlar. Sözleşme:
   BILESEN-MIMARISI.md
   =================================================================== */
:root {
  /* boşluk — 4px tabanlı */
  --em-1: 4px;   --em-2: 8px;   --em-3: 12px;  --em-4: 16px;
  --em-5: 20px;  --em-6: 24px;  --em-8: 32px;  --em-10: 40px; --em-12: 48px;

  /* tipografi ölçeği */
  --em-fs-xs: 11px;  --em-fs-sm: 12px;  --em-fs-md: 13px;
  --em-fs-lg: 14px;  --em-fs-xl: 16px;  --em-fs-2xl: 18px;
  --em-fs-3xl: 22px; --em-fs-4xl: 28px;

  /* köşe yarıçapı ölçeği */
  --em-r-xs: 4px;   --em-r-sm: 6px;   --em-r-md: 8px;
  --em-r-lg: 12px;  --em-r-xl: 15px;  --em-r-pill: 100px; --em-r-daire: 999px;

  /* gölge kademeleri */
  --em-sh-1: 0 2px 8px rgba(0, 0, 0, .12);
  --em-sh-2: 0 7px 7px rgba(0, 0, 0, .18);
  --em-sh-3: 0 16px 44px rgba(0, 0, 0, .32);

  /* hareket */
  --em-hiz-hizli: 100ms;
  --em-hiz: 150ms;
  --em-hiz-yavas: 300ms;
  --em-egri: cubic-bezier(.455, .03, .515, .955);

  /* kapsayıcı: kabuk geniş, içerik dar */
  --em-kap: 1376px;
  --em-kap-icerik: 1152px;
}

:root,
/* Açık tema — "Soğuk Slate" paleti.
   Saf beyaz kart + neredeyse siyah metin göz yorduğu için zemin gri-maviye,
   metin ise tam siyahtan bir tık açığa çekildi. */
[data-bs-theme="light"] {
  --em-bg: #e9edf2;
  --em-bg-soft: #f6f8fa;
  --em-bg-card: #f9fafc;
  --em-border: rgba(30, 41, 59, 0.12);
  --em-text: #243447;
  --em-text-muted: #5f7085;
  --em-primary: #7c3aed;
  --em-primary-rgb: 124, 58, 237;
  --em-primary-2: #2563eb;
  --em-accent: #06b6d4;
  --em-success: #10b981;
  --em-danger: #ef4444;
  --em-grad: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #06b6d4 100%);
  --em-grad-soft: linear-gradient(135deg, rgba(124,58,237,.12), rgba(37,99,235,.10), rgba(6,182,212,.10));
  --em-shadow: 0 4px 16px rgba(30, 41, 59, 0.07);
  --em-shadow-lg: 0 10px 30px rgba(30, 41, 59, 0.11);
  --em-glass-blur: saturate(160%) blur(14px);
  --em-navbar-bg: rgba(246, 248, 250, 0.88);
}

[data-bs-theme="dark"] {
  --em-bg: #0a0a0c;
  --em-bg-soft: #131318;
  --em-bg-card: #16161c;
  --em-border: rgba(255, 255, 255, 0.07);
  --em-text: #e9eaed;
  --em-text-muted: #8a8a94;
  --em-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  --em-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);
  --em-navbar-bg: rgba(14, 14, 18, 0.92);
}

/* ---------- Aksan renk seçenekleri (data-accent) ---------- */
:root[data-accent="turuncu"] {
  --em-primary: #f97316; --em-primary-rgb: 249, 115, 22; --em-primary-2: #ea580c; --em-accent: #fb923c;
  --em-grad: linear-gradient(135deg, #f97316 0%, #ea580c 60%, #fb923c 100%);
  --em-grad-soft: linear-gradient(135deg, rgba(249,115,22,.14), rgba(234,88,12,.10), rgba(251,146,60,.10));
}
:root[data-accent="mavi"] {
  --em-primary: #2563eb; --em-primary-rgb: 37, 99, 235; --em-primary-2: #0ea5e9; --em-accent: #38bdf8;
  --em-grad: linear-gradient(135deg, #2563eb 0%, #0ea5e9 60%, #38bdf8 100%);
  --em-grad-soft: linear-gradient(135deg, rgba(37,99,235,.14), rgba(14,165,233,.10), rgba(56,189,248,.10));
}
:root[data-accent="yesil"] {
  --em-primary: #10b981; --em-primary-rgb: 16, 185, 129; --em-primary-2: #059669; --em-accent: #34d399;
  --em-grad: linear-gradient(135deg, #10b981 0%, #059669 60%, #34d399 100%);
  --em-grad-soft: linear-gradient(135deg, rgba(16,185,129,.14), rgba(5,150,105,.10), rgba(52,211,153,.10));
}
:root[data-accent="kirmizi"] {
  --em-primary: #ef4444; --em-primary-rgb: 239, 68, 68; --em-primary-2: #dc2626; --em-accent: #f87171;
  --em-grad: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #f87171 100%);
  --em-grad-soft: linear-gradient(135deg, rgba(239,68,68,.14), rgba(220,38,38,.10), rgba(248,113,113,.10));
}
:root[data-accent="pembe"] {
  --em-primary: #ec4899; --em-primary-rgb: 236, 72, 153; --em-primary-2: #db2777; --em-accent: #f472b6;
  --em-grad: linear-gradient(135deg, #ec4899 0%, #db2777 60%, #f472b6 100%);
  --em-grad-soft: linear-gradient(135deg, rgba(236,72,153,.14), rgba(219,39,119,.10), rgba(244,114,182,.10));
}

/* ---------- Temel ---------- */
body {
  background: var(--em-bg);
  color: var(--em-text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

[data-bs-theme="dark"] body {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(var(--em-primary-rgb), 0.16), transparent 60%),
    radial-gradient(700px 400px at -10% 30%, rgba(6, 182, 212, 0.10), transparent 55%),
    var(--em-bg);
}
[data-bs-theme="light"] body {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(var(--em-primary-rgb), 0.08), transparent 60%),
    radial-gradient(700px 400px at -10% 30%, rgba(6, 182, 212, 0.07), transparent 55%),
    var(--em-bg);
}

a { text-decoration: none; }
.text-gradient {
  background: var(--em-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Navbar ---------- */
.em-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--em-navbar-bg);
  backdrop-filter: var(--em-glass-blur);
  -webkit-backdrop-filter: var(--em-glass-blur);
  border-bottom: 1px solid var(--em-border);
}
.em-navbar .navbar-brand { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.em-logo-badge {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--em-grad); color: #fff; font-size: 1.1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.em-logo-text { color: var(--em-text); font-weight: 800; }

/* Büyük merkezi arama (referans tarzı) */
.em-search { position: relative; max-width: 480px; width: 100%; }
.em-search-lg { max-width: 620px; align-items: center; }
.em-search input {
  border-radius: 12px;
  padding-left: 2.6rem;
  padding-right: 3.4rem;
  height: 44px;
  background: var(--em-bg-soft);
  border: 1px solid var(--em-border);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.em-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 0.66rem; font-weight: 700; color: var(--em-text-muted);
  background: var(--em-bg-card); border: 1px solid var(--em-border);
  border-radius: 6px; padding: 3px 7px; align-items: center; pointer-events: none;
}
.em-search input:focus {
  border-color: var(--em-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--em-primary-rgb), 0.15);
}
.em-search .bi-search {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--em-text-muted);
}
.em-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--em-bg-soft);
  border: 1px solid var(--em-border);
  border-radius: 14px;
  box-shadow: var(--em-shadow-lg);
  overflow: hidden;
  z-index: 1040;
  display: none;
}
.em-search-results a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--em-text);
  transition: background 0.15s;
}
.em-search-results a:hover { background: var(--em-grad-soft); }
.em-search-results img { width: 38px; height: 30px; object-fit: cover; border-radius: 6px; }

.em-balance-chip {
  background: var(--em-grad);
  color: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Üst yardımcı bar (topbar) */
.em-topbar {
  background: var(--em-topbar-bg, #08080b);
  border-bottom: 1px solid var(--em-border);
  font-size: 0.8rem;
}
.em-topbar .container {
  display: flex; align-items: center; gap: 0.25rem;
  min-height: 38px; flex-wrap: wrap;
}
.em-topbar-left { color: var(--em-text-muted); display: flex; align-items: center; gap: 1rem; }
.em-topbar-left .em-tb-trust { display: inline-flex; align-items: center; gap: 0.35rem; }
.em-topbar-left .em-tb-trust i { color: #10b981; }
.em-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; }
.em-tb-link {
  color: var(--em-text-muted); text-decoration: none; font-weight: 600;
  padding: 0.35rem 0.7rem; border-radius: 8px; display: inline-flex; align-items: center;
  gap: 0.35rem; transition: 0.15s; white-space: nowrap;
}
.em-tb-link:hover { color: var(--em-text); background: rgba(255,255,255,.05); }
.em-tb-sep { width: 1px; height: 16px; background: var(--em-border); margin: 0 0.25rem; }
/* Vurgulu "Mağaza Aç" / "Satış Yap" topbar rozeti */
.em-tb-cta {
  color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap;
  padding: 0.35rem 0.85rem; border-radius: 999px; display: inline-flex; align-items: center;
  gap: 0.4rem; background: var(--em-grad);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--em-primary) 40%, transparent);
  transition: 0.18s;
}
.em-tb-cta:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.08); }
.em-tb-cta.em-tb-cta-yayinci { background: transparent; color: var(--em-primary);
  border: 1px solid var(--em-primary); box-shadow: none; }
.em-tb-cta.em-tb-cta-yayinci:hover { background: var(--em-primary); color: #fff; }
[data-bs-theme="light"] .em-topbar { --em-topbar-bg: #f4f4f7; }
@media (max-width: 767px) {
  .em-topbar-left .em-tb-trust:not(:first-child) { display: none; }
}

/* Mobil hızlı erişim şeridi */
.em-mobil-links {
  display: flex; gap: 0.5rem; align-items: center; overflow-x: auto;
  padding: 0.6rem 0.9rem; background: var(--em-navbar-bg);
  border-bottom: 1px solid var(--em-border); scrollbar-width: none;
}
.em-mobil-links::-webkit-scrollbar { display: none; }
.em-mobil-cta {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
  font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--em-grad);
  padding: 0.45rem 0.9rem; border-radius: 999px; flex-shrink: 0;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--em-primary) 40%, transparent);
}
.em-mobil-cta:hover { color: #fff; }
.em-mobil-cta.em-mobil-cta-2 { background: transparent; color: var(--em-primary); border: 1px solid var(--em-primary); box-shadow: none; }
.em-mobil-link {
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  font-size: 0.8rem; font-weight: 600; color: var(--em-text-muted);
  padding: 0.45rem 0.75rem; border-radius: 999px; flex-shrink: 0;
  background: var(--em-bg-card); border: 1px solid var(--em-border);
}
.em-mobil-link:hover { color: var(--em-primary); border-color: var(--em-primary); }
/* Mobil vurgulu öğeler */
.em-mobil-link.em-mobil-cekilis {
  color: #fbbf24; border-color: rgba(245,158,11,.45);
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(239,68,68,.12));
}
.em-mobil-link.em-mobil-yayinci {
  color: var(--em-primary); border-color: color-mix(in srgb, var(--em-primary) 45%, transparent);
  background: color-mix(in srgb, var(--em-primary) 12%, transparent);
}

/* Referans tarzı header aksiyonları */
.btn-satis {
  background: var(--em-grad); color: #fff; border: 0; border-radius: 10px;
  font-weight: 700; font-size: 0.85rem; padding: 0.5rem 1rem; white-space: nowrap;
  align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: 0.2s;
}
.btn-satis:hover { color: #fff; opacity: 0.92; transform: translateY(-1px); }
.btn-yukle {
  background: transparent; color: var(--em-text); border: 1px solid var(--em-border);
  border-radius: 10px; font-weight: 600; font-size: 0.85rem; padding: 0.5rem 0.9rem;
  white-space: nowrap; align-items: center; transition: 0.2s;
}
.btn-yukle:hover { color: var(--em-primary); border-color: var(--em-primary); }
/* Header bakiye chip (tutar görünür) */
.em-balance-btn {
  align-items: center; gap: .5rem; padding: .35rem .4rem .35rem .8rem; border-radius: 999px;
  background: var(--em-bg-card); border: 1px solid var(--em-border); color: var(--em-text);
  font-weight: 700; font-size: .85rem; white-space: nowrap; transition: .18s;
}
.em-balance-btn:hover { color: var(--em-text); border-color: color-mix(in srgb, var(--em-primary) 55%, transparent); transform: translateY(-1px); }
.em-balance-btn > .bi-wallet2 { color: var(--em-primary); font-size: 1rem; }
.em-balance-amt { line-height: 1; }
.em-balance-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--em-grad); color: #fff; font-size: .75rem; }
.em-icon-btn {
  width: 40px; height: 40px; min-width: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--em-text-muted); background: transparent; border: 0; font-size: 1.15rem; transition: 0.2s;
}
.em-icon-btn:hover { color: var(--em-text); background: var(--em-bg-card); }
.em-icon-badge {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--em-primary); color: #fff;
  font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.em-cat-nav {
  border-bottom: 1px solid var(--em-border);
  background: var(--em-navbar-bg);
  backdrop-filter: var(--em-glass-blur);
  -webkit-backdrop-filter: var(--em-glass-blur);
}
/* Menü tek satırda kalır; sığmayan kategoriler yatay kaydırılır.
   Aksi halde "Tüm Kategoriler" ve "Bakiye Yükle" alt satıra düşüp
   menü kaymış gibi görünüyordu. */
.em-cat-nav-ic { display: flex; align-items: center; gap: .5rem; position: relative; }
/* Sığmayan menü olduğunda sağ kenarda kaydırılabilirlik ipucu */
.em-cat-nav-ic::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 34px;
  pointer-events: none; display: none;
  background: linear-gradient(90deg, transparent, var(--em-bg));
}
.em-cat-nav-ic.tasiyor::after { display: block; }
/* Bootstrap'in .nav kuralı flex-wrap:wrap veriyor; alt satıra kaymayı
   engellemek için aynı seçicide ezilir (.nav.em-cat-nav-liste). */
.em-cat-nav .nav.em-cat-nav-liste {
  flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  min-width: 0;
}
/* Öğeler daralmasın: flex varsayılanı shrink:1 olduğu için menü isimleri
   sıkışıp kesiliyordu ("LEAGUE OF LEGENDS" → "L"). Sabit genişlikte kalıp
   sığmayanlar yatay kaydırmaya düşer. */
.em-cat-nav-liste > .nav-item { flex: 0 0 auto; }
.em-cat-nav-liste::-webkit-scrollbar { display: none; }
/* Kategori menüsü: listenin dışında, kırpılmayan bir sarmalayıcıda */
.em-cat-nav-kategori { flex: 0 0 auto; position: relative; }
.em-cat-nav-kategori .dropdown-menu { max-height: 70vh; overflow-y: auto; }

.em-cat-nav-yukle {
  flex: 0 0 auto; align-items: center; color: #fbbf24; font-weight: 700;
  font-size: .85rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .7rem .9rem; border-bottom: 2px solid transparent; white-space: nowrap;
}
.em-cat-nav-yukle:hover { color: #fff; }

.em-cat-nav .nav-link {
  color: var(--em-text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.7rem 0.9rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.em-cat-nav .nav-link:hover,
.em-cat-nav .nav-link.active {
  color: var(--em-primary);
  border-bottom-color: var(--em-primary);
}
/* Vurgulu menü öğeleri (Çekilişler / Yayıncılar) */
/* Vurgulu menü öğeleri: yüksekliği diğer linklerle birebir aynı kalmalı.
   background-clip:padding-box → arka plan şeffaf alt kenarlığın altına taşmaz,
   böylece pill'ler satırda kaymış görünmez. */
.em-cat-nav .nav-link.em-nav-vurgu {
  position: relative; border-radius: 8px; margin: 0 .15rem;
  text-transform: none; letter-spacing: 0; font-weight: 700;
  background-clip: padding-box;
}
/* ---------------------------------------------------------------
   Header menü varyantları — adminden seçilir (Ayarlar → Görünüm).
   Ortak markup, stil sınıfa göre değişir.
   --------------------------------------------------------------- */

/* B: üst duyuru şeridi */
.em-cat-nav-serit {
  background: var(--em-bg-soft); border-bottom: 1px solid var(--em-border);
  font-size: .75rem; color: var(--em-text-muted); padding: .35rem 0;
}
.em-cat-nav-serit b { color: var(--em-primary); }

/* A — Mega Pill: vurgulular dolu renkli hap */
.em-nav-stil-a .nav-link { text-transform: none; letter-spacing: 0; border-radius: 999px; border-bottom: none; padding: .5rem .9rem; }
.em-nav-stil-a .nav-link:hover { background: var(--em-bg-soft); }
.em-nav-stil-a .em-nav-ilan    { color: #fff !important; background: linear-gradient(135deg, #10b981, #059669) !important; }
.em-nav-stil-a .em-nav-cekilis { color: #fff !important; background: linear-gradient(135deg, #f59e0b, #ef4444) !important; }
.em-nav-stil-a .em-nav-yayinci { color: #fff !important; background: var(--em-grad) !important; }
.em-nav-stil-a .em-cat-nav-liste { padding: .5rem 0; }

/* B — Alt çizgi: renkli alt kenarlık, arka plan yok.
   Büyük harf + harf aralığı en geniş stil olduğu için yatay boşluk kısılır. */
.em-nav-stil-b .nav-link { padding-left: .6rem; padding-right: .6rem; letter-spacing: .01em; }
.em-nav-stil-b .em-cat-nav-yukle,
.em-nav-stil-b .em-cat-nav-kategori .nav-link { padding-left: .6rem; padding-right: .6rem; letter-spacing: .01em; }
.em-nav-stil-b .nav-link.em-nav-vurgu { background: none !important; border-radius: 0; text-transform: uppercase; }
.em-nav-stil-b .em-nav-ilan    { border-bottom: 3px solid #10b981 !important; }
.em-nav-stil-b .em-nav-cekilis { border-bottom: 3px solid #f59e0b !important; }
.em-nav-stil-b .em-nav-yayinci { border-bottom: 3px solid var(--em-primary) !important; }

/* C — İkonlu kart: her menü dikey kutu */
.em-nav-stil-c .em-cat-nav-liste { padding: .5rem 0; gap: .4rem; }
.em-nav-stil-c .nav-link {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  min-width: 84px; padding: .5rem .4rem; border-radius: 12px;
  border: 1px solid var(--em-border); border-bottom: 1px solid var(--em-border);
  font-size: .68rem; text-transform: none; letter-spacing: 0;
}
.em-nav-stil-c .nav-link i { font-size: 1.1rem; margin: 0 !important; }
.em-nav-stil-c .nav-link:hover { border-color: var(--em-primary); }
.em-nav-stil-c .em-nav-ilan    { border-color: #10b981 !important; }
.em-nav-stil-c .em-nav-cekilis { border-color: #f59e0b !important; }
.em-nav-stil-c .em-nav-yayinci { border-color: var(--em-primary) !important; }
.em-nav-stil-c .em-nav-rozet { display: none; }
/* Dikey kartta açılır menü oku yamuk duruyor; kaldırılır */
.em-nav-stil-c .dropdown-toggle::after { display: none; }
/* "Bakiye Yükle" de aynı kart biçimini alsın */
.em-nav-stil-c .em-cat-nav-yukle {
  flex-direction: column; align-items: center; gap: .2rem;
  min-width: 84px; padding: .5rem .4rem; border-radius: 12px;
  border: 1px solid #f59e0b; border-bottom: 1px solid #f59e0b;
  font-size: .68rem; text-transform: none; letter-spacing: 0;
  margin-left: .4rem;
}
.em-nav-stil-c .em-cat-nav-yukle i { font-size: 1.1rem; margin: 0 !important; }

/* D — Gruplu: mevcut varsayılan görünüm (ek kural gerekmez) */

.em-cat-nav .nav-link.em-nav-ilan {
  color: #34d399;
  background: rgba(16, 185, 129, .14);
  border-bottom-color: transparent;
}
.em-cat-nav .nav-link.em-nav-ilan:hover {
  color: #fff; background: linear-gradient(135deg, #10b981, #059669); border-bottom-color: transparent;
}
.em-cat-nav .nav-link.em-nav-cekilis {
  color: #fbbf24;
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(239,68,68,.12));
  border-bottom-color: transparent;
}
.em-cat-nav .nav-link.em-nav-cekilis:hover {
  color: #fff; background: linear-gradient(135deg, #f59e0b, #ef4444); border-bottom-color: transparent;
}
.em-cat-nav .nav-link.em-nav-yayinci {
  color: var(--em-primary);
  background: color-mix(in srgb, var(--em-primary) 14%, transparent);
  border-bottom-color: transparent;
}
.em-cat-nav .nav-link.em-nav-yayinci:hover {
  color: #fff; background: var(--em-primary); border-bottom-color: transparent;
}
.em-nav-rozet {
  display: inline-block; margin-left: .35rem; padding: .05rem .35rem; border-radius: 5px;
  background: #ef4444; color: #fff; font-size: .58rem; font-weight: 800;
  font-style: normal; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}

.em-cat-nav .nav { flex-wrap: wrap; overflow: visible; }
.em-cat-nav { overflow: visible; position: relative; z-index: 1029; }
.em-cat-nav .dropdown-menu { z-index: 1050; }
@media (max-width: 991px) {
  .em-cat-nav .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .em-cat-nav .nav::-webkit-scrollbar { display: none; }
  /* Mobilde dropdown menü kırpılmasın diye statik konumlandır */
  .em-cat-nav .dropdown { position: static; }
  .em-cat-nav .dropdown-menu { position: absolute; left: 12px; right: 12px; }
}

/* ---------- Kartlar / cam efekti ---------- */
.em-card {
  background: var(--em-bg-card);
  border: 1px solid var(--em-border);
  border-radius: 16px;
  box-shadow: var(--em-shadow);
}
.em-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2.2rem 0 1.1rem;
}
.em-section-title h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.em-section-title h2 .bi {
  background: var(--em-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.em-section-title a:not(.btn) {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--em-primary);
}
/* Başlık içindeki butonlar kendi rengini korusun */
.em-section-title a.btn-em { color: #fff !important; }

/* ---------- Ürün kartı (v2) ---------- */
.em-product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--em-bg-card);
  backdrop-filter: var(--em-glass-blur);
  -webkit-backdrop-filter: var(--em-glass-blur);
  border: 1px solid var(--em-border);
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s, border-color 0.28s;
}
.em-product:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(var(--em-primary-rgb), 0.25);
  border-color: rgba(var(--em-primary-rgb), 0.55);
}
.em-product-img {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--em-grad-soft);
}
/* Bulanık dolgu arka planı: boşluk bırakmadan kutuyu doldurur */
.em-product-img .em-img-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(130%) brightness(0.75);
  transform: scale(1.2);
}
/* Ön görsel: kırpılmadan tam oturur */
.em-product-img .em-img-fg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.em-product:hover .em-product-img .em-img-fg { transform: scale(1.06); }
.em-product-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(11, 15, 26, 0.35), transparent 40%);
  pointer-events: none;
}
.em-product-cat-chip {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.em-product-cta {
  position: absolute;
  inset-inline: 10px;
  bottom: -46px;
  z-index: 3;
  text-align: center;
  background: var(--em-grad);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(var(--em-primary-rgb), 0.5);
  transition: bottom 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.em-product:hover .em-product-cta { bottom: 10px; }
.em-product:hover .em-product-cat-chip { opacity: 0; }
.em-product-body { padding: 0.8rem 0.9rem 0.9rem; display: flex; flex-direction: column; flex: 1; gap: 0.4rem; }
.em-product-cat {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--em-primary);
}
/* Görsel alt karartması hafifletildi (görseldeki yazıları kapatmasın) */
.em-product-img::after { background: linear-gradient(to top, rgba(11, 15, 26, 0.18), transparent 30%); }
.em-product-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--em-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.em-product-meta { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--em-text-muted); }
.em-stock-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.em-stock-dot.ok { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.8); }
.em-stock-dot.no { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.7); }
.em-product-price-bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--em-grad-soft);
  border: 1px solid var(--em-border);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
}
.em-price { font-weight: 900; font-size: 1.05rem; color: var(--em-text); white-space: nowrap; }
.em-price-old {
  display: block;
  font-size: 0.72rem;
  color: var(--em-text-muted);
  text-decoration: line-through;
  white-space: nowrap;
  line-height: 1.1;
}
.em-price-arrow {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--em-bg-soft);
  border: 1px solid var(--em-border);
  color: var(--em-primary);
  transition: 0.25s;
}
.em-product:hover .em-price-arrow { background: var(--em-grad); color: #fff; transform: translateX(3px); }
.em-stock-badge { font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 0.2rem 0.55rem; }
.em-stock-in { background: rgba(16, 185, 129, 0.14); color: #0f9f6e; }
.em-stock-out { background: rgba(239, 68, 68, 0.14); color: #e11d48; }
.em-badge-discount {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
}
.em-badge-hot {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  color: #fbbf24;
  font-size: 0.8rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
}

/* ---------- Hero ---------- */
.em-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--em-grad);
  color: #fff;
  padding: 3.2rem 2.6rem;
  margin-top: 1.4rem;
  box-shadow: var(--em-shadow-lg);
}
.em-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 220px at 90% 15%, rgba(255, 255, 255, 0.22), transparent 60%),
    radial-gradient(300px 200px at 70% 90%, rgba(255, 255, 255, 0.12), transparent 60%);
  pointer-events: none;
}
.em-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 900; letter-spacing: -0.02em; }
.em-hero p { max-width: 560px; opacity: 0.92; }
.em-hero .btn-light { font-weight: 700; border-radius: 999px; padding: 0.65rem 1.5rem; }
.em-hero .btn-outline-light { border-radius: 999px; padding: 0.65rem 1.5rem; }
.em-hero-stats { display: flex; gap: 2rem; margin-top: 1.6rem; flex-wrap: wrap; }
.em-hero-stats b { display: block; font-size: 1.3rem; }
.em-hero-stats span { font-size: 0.8rem; opacity: 0.85; }
.em-hero-slim { padding: 1.3rem 1.8rem; border-radius: 18px; }
.em-hero-slim h1 { font-size: 1.25rem; font-weight: 800; }
.em-hero-slim .em-hero-stats { gap: 1.6rem; text-align: center; }
.em-hero-slim .em-hero-stats b { font-size: 1.1rem; }
.em-hero-slim .em-hero-stats span { font-size: 0.72rem; }

/* ---------- Marketplace hero (gaming) ---------- */
.em-hero-market {
  position: relative; overflow: hidden; border-radius: 24px;
  margin-top: 1.2rem; padding: 2.8rem 2.6rem;
  background:
    radial-gradient(680px 340px at 88% -10%, color-mix(in srgb, var(--em-primary) 42%, transparent), transparent 62%),
    radial-gradient(520px 300px at 8% 120%, color-mix(in srgb, var(--em-primary-2) 30%, transparent), transparent 60%),
    linear-gradient(135deg, #101017 0%, #0b0b10 100%);
  border: 1px solid var(--em-border);
  box-shadow: var(--em-shadow-lg); color: #fff;
}
.em-hero-market::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--em-primary) 8%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--em-primary) 8%, transparent) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(600px 340px at 80% 0%, #000, transparent 70%);
  opacity: .5;
}
[data-bs-theme="light"] .em-hero-market {
  background:
    radial-gradient(680px 340px at 88% -10%, color-mix(in srgb, var(--em-primary) 60%, transparent), transparent 62%),
    radial-gradient(520px 300px at 8% 120%, color-mix(in srgb, var(--em-primary-2) 42%, transparent), transparent 60%),
    linear-gradient(135deg, #1a1a24 0%, #101018 100%);
}
.em-hero-market .em-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: center; }
.em-hero-badge {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: .35rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--em-primary) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--em-primary) 45%, transparent); color: #fff; margin-bottom: 1rem;
}
.em-hero-market h1 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.08; margin-bottom: .7rem; }
.em-hero-market h1 .em-hl { color: var(--em-accent, #fb923c); }
.em-hero-market .em-hero-sub { color: rgba(255,255,255,.72); max-width: 460px; margin-bottom: 1.4rem; }
.em-hero-search {
  display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: .5rem .5rem .5rem 1rem;
  max-width: 480px; backdrop-filter: blur(8px);
}
.em-hero-search .bi { color: rgba(255,255,255,.6); font-size: 1.1rem; }
.em-hero-search input { flex: 1; background: transparent; border: 0; color: #fff; outline: none; font-size: .95rem; }
.em-hero-search input::placeholder { color: rgba(255,255,255,.55); }
.em-hero-search .btn { border-radius: 10px; padding: .55rem 1.2rem; font-weight: 700; white-space: nowrap; }
.em-hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.em-hero-chips a {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600;
  padding: .4rem .85rem; border-radius: 999px; color: rgba(255,255,255,.85); text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: .18s;
}
.em-hero-chips a:hover { background: var(--em-primary); border-color: var(--em-primary); color: #fff; transform: translateY(-2px); }
.em-hero-panel { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.em-hero-stat {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: 1.1rem 1rem; text-align: center;
}
.em-hero-stat b { display: block; font-size: 1.5rem; font-weight: 900; line-height: 1; }
.em-hero-stat span { font-size: .74rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .04em; }
.em-hero-stat i { font-size: 1.1rem; color: var(--em-accent, #fb923c); }
@media (max-width: 991px) {
  .em-hero-market { padding: 2rem 1.4rem; }
  .em-hero-market .em-hero-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .em-hero-panel { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575px) {
  .em-hero-panel { grid-template-columns: repeat(2, 1fr); }
  .em-hero-search .btn span { display: none; }
}

/* ---------- Combo hero: büyük slider + yan küçük kare kartlar ---------- */
.em-hero-combo {
  display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
  gap: 1rem; margin-top: 1rem;
}
.em-hero-big {
  position: relative; border-radius: 22px; overflow: hidden; min-height: 360px;
  border: 1px solid var(--em-border); box-shadow: var(--em-shadow-lg); background: #0b0b10;
}
.em-hero-big .carousel, .em-hero-big .carousel-inner, .em-hero-big .carousel-item { height: 100%; }
.em-hero-big .carousel-item a { display: block; height: 100%; }
.em-hero-big .carousel-item img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.em-big-fallback {
  height: 100%; min-height: 360px; display: flex; align-items: center; padding: 2.6rem; color: #fff;
  background:
    radial-gradient(420px 300px at 78% 30%, color-mix(in srgb, var(--em-primary) 55%, transparent), transparent 62%),
    linear-gradient(125deg, #141019 0%, #0b0b10 70%);
}
.em-big-fallback .badge { background: var(--em-grad); font-weight: 800; }
.em-big-fallback h3 { font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.05; text-transform: uppercase; }
.em-big-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 2rem 2.2rem 1.6rem;
  background: linear-gradient(to top, rgba(6,6,10,.92) 10%, rgba(6,6,10,.4) 60%, transparent);
  color: #fff; pointer-events: none;
}
.em-big-cap h3 { font-weight: 900; font-size: clamp(1.3rem, 2.6vw, 2rem); text-transform: uppercase; margin: 0 0 .35rem; }
.em-big-cap .em-big-btn {
  display: inline-flex; align-items: center; gap: .4rem; pointer-events: auto; margin-top: .3rem;
  background: var(--em-grad); color: #fff; font-weight: 800; font-size: .85rem;
  padding: .55rem 1.1rem; border-radius: 10px; box-shadow: 0 6px 18px color-mix(in srgb, var(--em-primary) 45%, transparent);
}
.em-hero-big .carousel-indicators { margin-bottom: .6rem; z-index: 4; }
.em-hero-big .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; border: 0; }
.em-hero-big .carousel-control-next, .em-hero-big .carousel-control-prev { width: 8%; z-index: 4; }
.em-hero-big .carousel-control-next-icon, .em-hero-big .carousel-control-prev-icon {
  background-color: rgba(0,0,0,.35); border-radius: 50%; padding: 1.1rem; background-size: 45%;
}

.em-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }
.em-side-card {
  position: relative; border-radius: 18px; overflow: hidden; min-height: 0;
  border: 1px solid var(--em-border); box-shadow: var(--em-shadow); background: #0b0b10;
}
.em-side-card a { display: block; height: 100%; }
.em-side-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.em-side-slide.active { opacity: 1; }
.em-side-slide img { width: 100%; height: 100%; object-fit: cover; }
.em-side-fallback {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem; color: #fff;
  background:
    radial-gradient(200px 140px at 90% 10%, color-mix(in srgb, var(--em-primary) 55%, transparent), transparent 65%),
    linear-gradient(140deg, color-mix(in srgb, var(--em-primary) 30%, #0b0b10), #0b0b10);
}
.em-side-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem 1.1rem .9rem;
  background: linear-gradient(to top, rgba(6,6,10,.9), transparent); color: #fff; pointer-events: none;
}
.em-side-cap b { display: block; font-weight: 900; font-size: 1.05rem; text-transform: uppercase; line-height: 1.1; }
.em-side-cap .em-side-btn {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; pointer-events: auto;
  background: var(--em-grad); color: #fff; font-weight: 800; font-size: .72rem;
  padding: .32rem .7rem; border-radius: 8px;
}
@media (max-width: 900px) {
  .em-hero-combo { grid-template-columns: 1fr; }
  /* Mobilde küçük kartlar yan yana banner olur, sabit orana oturur */
  .em-hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: .7rem; }
  .em-side-card { aspect-ratio: 16/10; min-height: 0; }
  .em-side-cap { padding: .7rem .8rem .7rem; }
  .em-side-cap b { font-size: .9rem; }
  .em-side-cap .em-side-btn { font-size: .66rem; padding: .28rem .6rem; }
}
@media (max-width: 560px) {
  /* Çok dar ekranda tek sütun, düzgün banner */
  .em-hero-side { grid-template-columns: 1fr; }
  .em-side-card { aspect-ratio: 21/7; }
  .em-hero-big, .em-hero-big .carousel-item img, .em-big-fallback { min-height: 200px; }
  .em-big-cap { padding: 1.2rem 1.2rem 1rem; }
  .em-big-fallback { padding: 1.5rem; }
}

/* ---------- Canlı son satışlar ---------- */
.em-live-sales {
  margin-top: 1rem; display: flex; align-items: center; gap: .8rem;
  background: var(--em-bg-card); border: 1px solid var(--em-border); border-radius: 14px;
  padding: .55rem .8rem; overflow: hidden;
}
.em-live-sales .em-live-tag {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; font-weight: 800; font-size: .78rem;
  color: #10b981; text-transform: uppercase; letter-spacing: .03em; padding-right: .8rem;
  border-right: 1px solid var(--em-border);
}
.em-live-sales .em-live-tag .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: emPulse 1.6s infinite;
}
@keyframes emPulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }
.em-live-view { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
/* Kaydırma eskiden requestAnimationFrame ile JS'te yapılıyordu ve her
   karede DOM'a dokunuyordu. Şerit sunucuda iki kez basıldığı için
   -%50'lik tek bir CSS animasyonu kesintisiz döngü verir; ana iş
   parçacığı hiç meşgul edilmez. */
.em-live-track {
  display: flex; gap: .6rem; width: max-content;
  animation: emLiveKay 42s linear infinite;
}
.em-live-view:hover .em-live-track { animation-play-state: paused; }
@keyframes emLiveKay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Hareket hassasiyeti olan kullanıcıda şerit durur, içerik yine okunur. */
@media (prefers-reduced-motion: reduce) {
  .em-live-track { animation: none; }
  .em-live-view  { overflow-x: auto; }
}
.em-live-item {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-size: .8rem;
  color: var(--em-text-muted); background: var(--em-bg-soft); border: 1px solid var(--em-border);
  border-radius: 999px; padding: .35rem .8rem;
}
.em-live-item .av {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; color: #fff; font-size: .62rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; background: var(--em-grad);
}
.em-live-item b { color: var(--em-text); font-weight: 700; }
.em-live-item .prod { color: var(--em-primary); font-weight: 700; }
.em-live-item .tm { opacity: .7; font-size: .72rem; }
@media (max-width: 575px) { .em-live-sales .em-live-tag span { display: none; } }

/* ---------- Slider ---------- */
.em-slider .carousel-item img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: 18px;
}
@media (max-width: 768px) {
  .em-slider .carousel-item img { aspect-ratio: 2 / 1; }
}
.em-slider .carousel-caption {
  text-align: left;
  left: 6%;
  right: auto;
  bottom: 14%;
  background: rgba(11, 15, 26, 0.55);
  backdrop-filter: blur(10px);
  padding: 1rem 1.4rem;
  border-radius: 14px;
  max-width: 60%;
}

/* ---------- Kategori kartları (banner stili) ---------- */
.em-cat-banner {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--em-border);
  background: var(--em-grad-soft);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, border-color 0.25s;
}
.em-cat-banner:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--em-primary-rgb), 0.55);
  box-shadow: 0 16px 40px rgba(var(--em-primary-rgb), 0.28);
}
.em-cat-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s;
}
.em-cat-banner:hover img { transform: scale(1.08); }
.em-cat-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 10, 20, 0.85) 0%, rgba(8, 10, 20, 0.25) 45%, transparent 70%);
}
.em-cat-banner-name {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.em-cat-banner-name .bi { opacity: 0; transform: translateX(-6px); transition: 0.25s; }
.em-cat-banner:hover .em-cat-banner-name .bi { opacity: 1; transform: translateX(0); }
.em-cat-banner-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
}
.em-cat-banner-fallback .bi {
  background: var(--em-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Eski sınıf kullanan sayfalar için uyumluluk */
.em-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.4rem 1rem;
  border-radius: 18px;
  background: var(--em-bg-card);
  border: 1px solid var(--em-border);
  color: var(--em-text);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  height: 100%;
}
.em-cat-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; }

/* ---------- Marka şeridi ---------- */
.em-brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
  border-radius: 14px;
  background: var(--em-bg-card);
  border: 1px solid var(--em-border);
  filter: grayscale(45%);
  opacity: 0.85;
  transition: 0.25s;
  height: 100%;
  color: var(--em-text);
  font-weight: 700;
}
.em-brand-item:hover { filter: none; opacity: 1; transform: translateY(-3px); color: var(--em-primary); }
.em-brand-item img { max-height: 44px; max-width: 100%; object-fit: contain; }

/* ---------- Özellik rozetleri ---------- */
.em-feature {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.2rem;
  border-radius: 16px;
  background: var(--em-bg-card);
  border: 1px solid var(--em-border);
  height: 100%;
}
.em-feature .bi {
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--em-grad-soft);
  color: var(--em-primary);
}
.em-feature h6 { font-weight: 800; margin-bottom: 0.15rem; }
.em-feature p { font-size: 0.8rem; color: var(--em-text-muted); margin: 0; }

/* ---------- Blog kartı ---------- */
.em-blog-card { overflow: hidden; border-radius: 18px; height: 100%; }
.em-blog-card img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; transition: transform 0.4s; }
.em-blog-card:hover img { transform: scale(1.05); }
.em-blog-card .card-body { padding: 1rem 1.1rem 1.2rem; }
.em-blog-card h5 {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Footer ---------- */
.em-footer {
  margin-top: 3.5rem;
  border-top: 1px solid var(--em-border);
  background: var(--em-bg-soft);
}
[data-bs-theme="dark"] .em-footer { background: #0a0e18; }
.em-footer h6 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.em-footer a { color: var(--em-text-muted); font-size: 0.86rem; display: inline-block; padding: 0.18rem 0; transition: color 0.2s; }
.em-footer a:hover { color: var(--em-primary); }
.em-footer-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--em-bg-card);
  border: 1px solid var(--em-border);
  color: var(--em-text);
  margin-right: 0.4rem;
  transition: 0.2s;
}
.em-footer-social a:hover { background: var(--em-grad); color: #fff; transform: translateY(-3px); }
.em-footer-bottom { border-top: 1px solid var(--em-border); font-size: 0.8rem; color: var(--em-text-muted); }

/* ---------- Formlar / butonlar ---------- */
.btn-em {
  background: var(--em-primary);
  color: #fff;
  border: 0;
  border-radius: 11px;
  font-weight: 700;
  padding: 0.6rem 1.4rem;
  transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.btn-em:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.btn-em:disabled { opacity: 0.6; }
.form-control, .form-select {
  background: var(--em-bg-card);
  border: 1px solid var(--em-border);
  color: var(--em-text);
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
}
.form-control:focus, .form-select:focus {
  background: var(--em-bg-card);
  border-color: var(--em-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--em-primary-rgb), 0.15);
  color: var(--em-text);
}

/* ---------- Auth sayfaları ---------- */
.em-auth-wrap { max-width: 440px; margin: 3rem auto; }
.em-auth-card { padding: 2.2rem; }
.em-auth-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--em-grad);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff;
  font-size: 1.7rem;
  box-shadow: 0 10px 26px rgba(var(--em-primary-rgb), 0.4);
}
.em-auth-card .em-auth-icon { margin: 0 auto 1.2rem; }

/* ---------- Kullanıcı paneli ---------- */
.em-panel-nav .list-group-item {
  background: transparent;
  border: 0;
  border-radius: 12px !important;
  color: var(--em-text-muted);
  font-weight: 600;
  padding: 0.7rem 1rem;
  margin-bottom: 0.15rem;
  transition: 0.2s;
}
.em-panel-nav .list-group-item:hover { background: var(--em-grad-soft); color: var(--em-text); }
.em-panel-nav .list-group-item.active { background: var(--em-grad); color: #fff; box-shadow: 0 6px 18px rgba(var(--em-primary-rgb), 0.35); }
.em-panel-nav .bi { width: 1.4rem; display: inline-block; }

.em-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--em-primary); }
.em-avatar-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ---------- Modern dropdown menüler ---------- */
.dropdown-menu {
  border: 1px solid var(--em-border);
  background: var(--em-bg-soft);
  border-radius: 16px;
  box-shadow: var(--em-shadow-lg);
  padding: 0.4rem;
  margin-top: 0.5rem !important;
  animation: emDropIn 0.14s ease;
}
/* NOT: transform animasyonu Popper konumlandırmasını bozar; sadece opacity kullan */
@keyframes emDropIn { from { opacity: 0; } to { opacity: 1; } }
.dropdown-menu .dropdown-item {
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--em-text);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: background 0.14s, color 0.14s;
}
.dropdown-menu .dropdown-item i { width: 18px; text-align: center; font-size: 1rem; color: var(--em-text-muted); transition: color 0.14s; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: var(--em-grad-soft); color: var(--em-primary); }
.dropdown-menu .dropdown-item:hover i { color: var(--em-primary); }
.dropdown-menu .dropdown-item.em-item-danger { color: var(--em-danger, #ef4444); }
.dropdown-menu .dropdown-item.em-item-danger i { color: var(--em-danger, #ef4444); }
.dropdown-menu .dropdown-item.em-item-danger:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.dropdown-divider { border-color: var(--em-border); margin: 0.35rem 0.2rem; opacity: 1; }

/* Kullanıcı menüsü başlığı */
.em-user-menu { min-width: 264px; }
.em-user-head {
  padding: 0.85rem 0.75rem 0.75rem;
  margin: -0.4rem -0.4rem 0.35rem;
  border-radius: 16px 16px 0 0;
  background:
    radial-gradient(340px 120px at 100% 0%, color-mix(in srgb, var(--em-primary) 26%, transparent), transparent 70%),
    var(--em-grad-soft);
  border-bottom: 1px solid var(--em-border);
}
.em-user-head-av { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; border: 2px solid color-mix(in srgb, var(--em-primary) 55%, transparent); }
.em-user-head-mail { font-size: 0.72rem; color: var(--em-text-muted); }
.em-user-balance {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
  border-radius: 12px; padding: 0.5rem 0.7rem;
}
.em-user-balance-lbl { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--em-text-muted); }
.em-user-balance-val { display: block; font-size: 1.15rem; font-weight: 900; color: var(--em-text); line-height: 1.1; }
.em-user-balance-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700;
  color: #fff; background: var(--em-grad); border-radius: 999px; padding: 0.4rem 0.85rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--em-primary) 40%, transparent); transition: 0.16s;
}
.em-user-balance-btn:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.08); }
.em-user-theme {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 0.7rem; font-size: 0.85rem; font-weight: 500; color: var(--em-text);
}
.em-theme-switch {
  width: 40px; height: 24px; border-radius: 999px; border: 1px solid var(--em-border);
  background: var(--em-bg-card); color: var(--em-primary); font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.16s;
}
.em-theme-switch:hover { border-color: var(--em-primary); background: var(--em-grad-soft); }

/* ---------- Bakiye yükle (wallet) ---------- */
.em-wallet-hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 1.8rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  background:
    radial-gradient(500px 240px at 100% -30%, color-mix(in srgb, var(--em-primary) 45%, transparent), transparent 65%),
    linear-gradient(135deg, #101017 0%, #0b0b10 100%);
  border: 1px solid var(--em-border); box-shadow: var(--em-shadow-lg); color: #fff;
}
[data-bs-theme="light"] .em-wallet-hero {
  background:
    radial-gradient(500px 240px at 100% -30%, color-mix(in srgb, var(--em-primary) 60%, transparent), transparent 65%),
    linear-gradient(135deg, #1a1a24 0%, #101018 100%);
}
.em-wallet-hero-main { display: flex; align-items: center; gap: 1.1rem; position: relative; z-index: 1; }
.em-wallet-ic {
  width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; background: var(--em-grad); color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--em-primary) 50%, transparent);
}
.em-wallet-lbl { font-size: 0.8rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: 0.05em; }
.em-wallet-val { font-size: 2.1rem; font-weight: 900; line-height: 1.05; }
.em-wallet-feats { display: flex; flex-direction: column; gap: 0.5rem; position: relative; z-index: 1; }
.em-wallet-feats span { font-size: 0.82rem; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 0.5rem; }
.em-wallet-feats i { color: var(--em-accent, #fb923c); }
@media (max-width: 575px) {
  .em-wallet-hero { padding: 1.4rem; }
  .em-wallet-val { font-size: 1.7rem; }
}
.em-tutar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.em-tutar-chip {
  border: 1.5px solid var(--em-border); background: var(--em-bg-soft); color: var(--em-text);
  border-radius: 12px; padding: 0.7rem 0.5rem; font-weight: 800; font-size: 0.95rem; cursor: pointer;
  transition: 0.16s; text-align: center;
}
.em-tutar-chip:hover { border-color: color-mix(in srgb, var(--em-primary) 55%, transparent); transform: translateY(-2px); }
.em-tutar-chip.active {
  border-color: var(--em-primary); background: var(--em-grad-soft); color: var(--em-primary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--em-primary) 22%, transparent);
}
@media (max-width: 400px) { .em-tutar-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Birleşik hesap paneli ---------- */
.em-acc-wrap { padding-top: 1.2rem; padding-bottom: 2rem; }
.em-acc-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.em-acc-side {
  position: sticky; top: 84px; background: var(--em-bg-card); border: 1px solid var(--em-border);
  border-radius: 18px; overflow: hidden; padding-bottom: .5rem;
}
.em-acc-user {
  display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.1rem;
  background: radial-gradient(300px 120px at 100% 0%, color-mix(in srgb, var(--em-primary) 26%, transparent), transparent 70%), var(--em-grad-soft);
  border-bottom: 1px solid var(--em-border);
}
.em-acc-user img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 2px solid color-mix(in srgb, var(--em-primary) 55%, transparent); }
.em-acc-balance { font-size: .82rem; font-weight: 700; color: var(--em-primary); display: flex; align-items: center; gap: .3rem; }
.min-w-0 { min-width: 0; }
.em-acc-close { margin-left: auto; background: transparent; border: 0; color: var(--em-text-muted); font-size: 1.1rem; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.em-acc-close:hover { background: var(--em-bg-card); color: var(--em-text); }
.em-acc-backdrop[hidden] { display: none; }
.em-acc-group {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--em-text-muted); padding: .9rem 1.1rem .3rem;
}
.em-acc-nav { display: flex; flex-direction: column; }
.em-acc-nav a {
  display: flex; align-items: center; gap: .7rem; padding: .6rem 1.1rem; font-size: .88rem; font-weight: 600;
  color: var(--em-text-muted); border-left: 3px solid transparent; transition: .14s;
}
.em-acc-nav a i { font-size: 1.05rem; width: 20px; text-align: center; }
.em-acc-nav a:hover { color: var(--em-text); background: var(--em-grad-soft); }
.em-acc-nav a.active { color: var(--em-primary); background: var(--em-grad-soft); border-left-color: var(--em-primary); }
.em-acc-nav a.em-acc-cta { color: #fff; background: var(--em-grad); margin: .2rem .8rem; border-radius: 10px; border-left: 0; justify-content: center; font-weight: 700; }
.em-acc-nav a.em-acc-cta.em-acc-cta-2 { background: transparent; color: var(--em-primary); border: 1px solid var(--em-primary); }
.em-acc-nav a.em-acc-cta:hover { filter: brightness(1.08); }
.em-acc-nav a.em-acc-pending { color: #f59e0b; }
.em-acc-nav a.em-acc-logout { color: var(--em-danger, #ef4444); }
.em-acc-nav a.em-acc-logout:hover { background: rgba(239,68,68,.1); }

.em-acc-main { min-width: 0; }
/* Satıcı dashboard istatistik ikonu (eski adm-stat uyumluluğu) */
.adm-stat .ico { width: 46px; height: 46px; min-width: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--em-grad); color: #fff; }
.em-acc-pagehead { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.em-acc-pagehead h4 { flex: 1; min-width: 0; }
.em-acc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-radius: 18px; padding: 1.5rem 1.8rem; margin-bottom: 1.2rem; color: #fff;
  background: radial-gradient(400px 200px at 100% -20%, color-mix(in srgb, var(--em-primary) 45%, transparent), transparent 65%), linear-gradient(135deg, #101017, #0b0b10);
  border: 1px solid var(--em-border);
}
.em-acc-hero-bal { text-align: right; }
.em-acc-hero-bal .btn-light { font-weight: 700; border-radius: 10px; }
.em-acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.2rem; }
.em-acc-stat {
  background: var(--em-bg-card); border: 1px solid var(--em-border); border-radius: 16px;
  padding: 1.1rem 1rem; text-align: center; color: var(--em-text); transition: .18s;
}
.em-acc-stat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--em-primary) 45%, transparent); color: var(--em-text); }
.em-acc-stat i { font-size: 1.3rem; color: var(--em-primary); }
.em-acc-stat b { display: block; font-size: 1.35rem; font-weight: 900; line-height: 1.1; margin-top: .2rem; }
.em-acc-stat span { font-size: .76rem; color: var(--em-text-muted); }
.em-acc-stat-cta { background: var(--em-grad); color: #fff; }
.em-acc-stat-cta i, .em-acc-stat-cta b, .em-acc-stat-cta span { color: #fff; }
.em-acc-verify { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.em-acc-vitem {
  display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-radius: 14px;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-acc-vitem i { font-size: 1.4rem; }
.em-acc-vitem.ok i { color: #10b981; }
.em-acc-vitem.no i { color: #f59e0b; }
.em-acc-vitem b { display: block; font-size: .85rem; }
.em-acc-vitem span { font-size: .74rem; color: var(--em-text-muted); }
.em-acc-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.em-acc-quick a {
  display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 12px; font-weight: 600; font-size: .86rem;
  background: var(--em-bg-soft); border: 1px solid var(--em-border); color: var(--em-text); transition: .15s;
}
.em-acc-quick a:hover { border-color: var(--em-primary); color: var(--em-primary); transform: translateY(-2px); }
.em-acc-quick a i { font-size: 1.1rem; color: var(--em-primary); }
@media (max-width: 991px) {
  .em-acc-layout { grid-template-columns: 1fr; }
  .em-acc-side { position: fixed; z-index: 1055; top: 0; left: -300px; width: 280px; height: 100vh; border-radius: 0; overflow-y: auto; transition: left .25s; }
  .em-acc-side.open { left: 0; box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .em-acc-backdrop { position: fixed; inset: 0; z-index: 1054; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
  .em-acc-stats { grid-template-columns: repeat(2, 1fr); }
  .em-acc-verify { grid-template-columns: 1fr; }
}

/* ---------- Bildirim listesi ---------- */
.em-bildirim-liste { display: flex; flex-direction: column; gap: .6rem; }
.em-bildirim {
  display: flex; gap: .9rem; padding: .9rem 1rem; border-radius: 14px; color: var(--em-text);
  background: var(--em-bg-soft); border: 1px solid var(--em-border); transition: .16s;
}
.em-bildirim.yeni { border-left: 3px solid var(--em-primary); background: var(--em-grad-soft); }
a.em-bildirim:hover { color: var(--em-text); transform: translateX(2px); border-color: color-mix(in srgb, var(--em-primary) 45%, transparent); }
.em-bildirim.okundu { opacity: .78; }
.em-bildirim-ic {
  width: 38px; height: 38px; min-width: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; background: var(--em-grad); color: #fff;
}
.em-bildirim.okundu .em-bildirim-ic { background: var(--em-bg-card); color: var(--em-text-muted); }
.em-bildirim-baslik { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.em-bildirim-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--em-primary); box-shadow: 0 0 6px var(--em-primary); }
.em-bildirim-mesaj { font-size: .82rem; color: var(--em-text-muted); margin-top: .1rem; }
.em-bildirim-tarih { font-size: .72rem; color: var(--em-text-muted); margin-top: .3rem; }

/* ---------- Footer yasal + çerez bandı ---------- */
.em-footer-legal { border-top: 1px solid var(--em-border); }
.em-footer-legal a { color: var(--em-text-muted); font-size: .8rem; text-decoration: none; }
.em-footer-legal a:hover { color: var(--em-primary); }
.gap-x-3 { column-gap: 1rem; } .gap-y-1 { row-gap: .25rem; }
.em-cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1060; }
.em-cookie-in {
  max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: var(--em-bg-card); border: 1px solid var(--em-border); border-radius: 16px;
  padding: .9rem 1.2rem; box-shadow: var(--em-shadow-lg); backdrop-filter: var(--em-glass-blur);
}
.em-cookie-in .bi-cookie { color: var(--em-primary); }
.em-cookie-in a { color: var(--em-primary); }
.em-cookie[hidden] { display: none; }
@media (max-width: 575px) { .em-cookie-in { padding: .8rem; } .em-cookie-in .btn { flex: 1; } }

/* ---------- Sözleşme / yasal metin ---------- */
.em-sozlesme-icerik { line-height: 1.75; color: var(--em-text); }
.em-sozlesme-icerik h5 { font-weight: 800; margin: 1.6rem 0 .5rem; font-size: 1.05rem; color: var(--em-text); }
.em-sozlesme-icerik p { color: var(--em-text-muted); margin-bottom: .8rem; }
.em-sozlesme-icerik a { color: var(--em-primary); }

/* ---------- Çekiliş (referans tarzı) ---------- */
.em-cek-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  background: var(--em-bg-card); border: 1px solid var(--em-border); border-radius: 18px; padding: 1.1rem 1.4rem; margin-bottom: 1rem;
}
.em-cek-org { display: flex; align-items: center; gap: .8rem; }
.em-cek-org-logo {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--em-grad); color: #fff; font-size: 1.5rem; overflow: hidden; flex-shrink: 0;
}
.em-cek-org-logo img { width: 100%; height: 100%; object-fit: cover; }
.em-cek-badge { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .06em; padding: .12rem .5rem; border-radius: 5px; background: color-mix(in srgb, var(--em-primary) 22%, transparent); color: var(--em-primary); margin-bottom: .2rem; }
.em-cek-stats { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.em-cek-stat { display: flex; align-items: center; gap: .6rem; }
.em-cek-stat > i { font-size: 1.4rem; color: var(--em-primary); }
.em-cek-stat b { display: block; font-size: 1.15rem; font-weight: 900; line-height: 1.1; }
.em-cek-stat span { font-size: .72rem; color: var(--em-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.em-cek-oduller { display: flex; gap: 1rem; flex-wrap: wrap; }
.em-cek-odul {
  position: relative; width: 190px; border-radius: 14px; overflow: hidden;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-cek-odul img, .em-cek-odul-ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.em-cek-odul-ph { display: flex; align-items: center; justify-content: center; background: var(--em-grad); color: #fff; font-size: 2.5rem; }
.em-cek-odul-say { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .7rem; font-weight: 800; color: #fff; background: var(--em-success, #10b981); padding: .2rem .55rem; border-radius: 6px; }
.em-cek-odul-ad { padding: .6rem .7rem; font-size: .82rem; font-weight: 700; }
.em-cek-kazananlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.em-cek-kazanan { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 12px; background: var(--em-bg-soft); border: 1px solid var(--em-border); }
.em-cek-kazanan.ben { border-color: var(--em-primary); background: var(--em-grad-soft); }
.em-cek-kazanan img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.em-cek-katil {
  position: sticky; bottom: 12px; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--em-bg-card); border: 1px solid var(--em-border); border-radius: 16px; padding: 1rem 1.3rem;
  box-shadow: var(--em-shadow-lg);
}
@media (max-width: 575px) {
  .em-cek-stats { gap: 1rem; width: 100%; justify-content: space-between; }
  .em-cek-odul { width: calc(50% - .5rem); }
}

/* ---------- Çekiliş filtre barı ---------- */
.em-cek-filtre {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: .8rem; align-items: end;
  background: var(--em-bg-card); border: 1px solid var(--em-border); border-radius: 16px; padding: 1rem 1.2rem;
}
.em-cek-f-item label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--em-text-muted); margin-bottom: .3rem; }
.em-cek-f-item input, .em-cek-f-item select {
  width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--em-border);
  background: var(--em-bg-soft); color: var(--em-text); padding: 0 .8rem; font-size: .88rem; outline: none;
}
.em-cek-f-item .position-relative input { padding-left: 2.1rem; }
.em-cek-f-item .position-relative > .bi { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--em-text-muted); font-size: .9rem; }
.em-cek-f-item input:focus, .em-cek-f-item select:focus { border-color: var(--em-primary); }
.em-cek-f-btn .btn-em { height: 40px; }
@media (max-width: 991px) { .em-cek-filtre { grid-template-columns: 1fr 1fr; } .em-cek-f-btn { grid-column: 1 / -1; } }
@media (max-width: 575px) { .em-cek-filtre { grid-template-columns: 1fr; } }

/* ---------- Başvuru kriter kartları ---------- */
.em-krit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; }
.em-krit {
  position: relative; text-align: center; padding: 2rem 1rem 1.2rem; border-radius: 16px;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-krit > i { font-size: 2.2rem; }
.em-krit.ok > i { color: #10b981; }
.em-krit.no > i { color: var(--em-text-muted); opacity: .6; }
.em-krit-durum {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: .6rem; font-weight: 800; letter-spacing: .04em; padding: .25rem .6rem; border-radius: 6px; color: #fff;
}
.em-krit.ok .em-krit-durum { background: #10b981; }
.em-krit.no .em-krit-durum { background: #ef4444; }
.em-krit-ad { font-size: .82rem; font-weight: 700; margin-top: .6rem; }

/* ---------- İlan detay: güvence, yetersiz bakiye, sticky bar ---------- */
.em-guvence {
  display: flex; gap: .7rem; padding: .8rem .9rem; border-radius: 12px;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.3);
}
.em-guvence > i { color: #10b981; font-size: 1.3rem; }
.em-guvence b { font-size: .88rem; }
.em-guvence .small { color: var(--em-text-muted); font-size: .76rem; line-height: 1.45; }

.em-bakiye-satiri {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .82rem; color: var(--em-text-muted);
}
.em-bakiye-yukle {
  display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; font-size: .78rem;
  color: var(--em-primary); padding: .2rem .6rem; border-radius: 999px;
  background: var(--em-grad-soft); border: 1px solid color-mix(in srgb, var(--em-primary) 30%, transparent);
}
.em-yetersiz {
  padding: .8rem .9rem; border-radius: 12px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.4);
}
.em-yetersiz > div > i { color: #fbbf24; font-size: 1.2rem; }
.em-yetersiz b { font-size: .86rem; }

.em-sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
  display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem;
  background: var(--em-bg-card); border-top: 1px solid var(--em-border);
  box-shadow: 0 -6px 24px rgba(0,0,0,.35);
  transform: translateY(0); transition: transform .25s ease;
}
.em-sticky-buy.gizle { transform: translateY(120%); }
.em-sticky-fiyat { display: flex; flex-direction: column; line-height: 1.1; }
.em-sticky-fiyat b { font-size: 1.15rem; font-weight: 900; }
/* Mobil alt nav ile çakışmasın */
@media (max-width: 991px) {
  .em-sticky-buy { bottom: 58px; }
}

/* ---------- Sipariş mesajlaşma akışı ---------- */
.em-msj-akis { display: flex; flex-direction: column; gap: .6rem; max-height: 340px; overflow-y: auto; }
.em-msj { max-width: 78%; padding: .6rem .8rem; border-radius: 12px; font-size: .86rem; }
.em-msj.ben { align-self: flex-end; background: var(--em-grad-soft); border: 1px solid color-mix(in srgb, var(--em-primary) 35%, transparent); }
.em-msj.karsi { align-self: flex-start; background: var(--em-bg-soft); border: 1px solid var(--em-border); }
.em-msj-ust { display: flex; align-items: center; gap: .5rem; font-size: .72rem; margin-bottom: .2rem; }
.em-msj-ust b { font-weight: 700; }
.em-msj-ust span { color: var(--em-text-muted); }
.em-msj-govde { white-space: pre-line; line-height: 1.5; }

/* ---------- Teslimat kanıtı ---------- */
.em-kanit {
  width: 110px; border-radius: 10px; overflow: hidden;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-kanit img { width: 100%; height: 70px; object-fit: cover; display: block; }
.em-kanit-ic {
  height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; color: var(--em-primary); font-size: 1.3rem; text-decoration: none;
}
.em-kanit-ic span { font-size: .68rem; color: var(--em-text-muted); }
.em-kanit-not {
  padding: .3rem .45rem; font-size: .68rem; color: var(--em-text-muted);
  border-top: 1px solid var(--em-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Tablolar ---------- */
.em-table { border-radius: 14px; overflow: hidden; }
.em-table thead { background: var(--em-grad-soft); }
.em-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--em-text-muted); }
.table > :not(caption) > * > * { background: transparent; color: var(--em-text); }

/* ---------- Ürün detay ---------- */
.em-detail-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--em-shadow-lg);
  border: 1px solid var(--em-border);
  aspect-ratio: 5/4;
  background: var(--em-grad-soft);
}
.em-detail-img .em-img-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(22px) saturate(130%) brightness(0.72);
  transform: scale(1.2);
}
.em-detail-img .em-img-fg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* ---------- Detay sayfası v3 (itemsatis tarzı: sade, yapılandırılmış) ---------- */
.em-detail-price { font-size: 2rem; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
.em-detail-price-box {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  padding-bottom: .9rem; border-bottom: 1px solid var(--em-border);
}
/* İndirim yüzdesi rozeti */
.em-indirim-rozet {
  display: inline-flex; align-items: center; gap: .2rem; vertical-align: middle;
  background: #ef4444; color: #fff; font-size: .74rem; font-weight: 800;
  padding: .15rem .45rem; border-radius: 6px; margin-left: .4rem;
}

/* Detay sayfası kabuğu — bulanık zemin kaldırıldı, sade panel */
.em-detail-hero {
  position: relative; border-radius: 18px; padding: 1.3rem;
  border: 1px solid var(--em-border); background: var(--em-bg-card);
}
.em-detail-hero::before { content: none; }

/* Satıcı kartı (üstte) */
.em-satici-kart {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; margin-bottom: 1rem;
  background: var(--em-bg-soft); border: 1px solid var(--em-border); border-radius: 12px;
}
.em-satici-kart img, .em-satici-kart .ph {
  width: 42px; height: 42px; min-width: 42px; border-radius: 11px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: var(--em-grad); color: #fff; font-size: 1.1rem;
}
.em-satici-ad { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .3rem; }
.em-satici-meta { font-size: .76rem; color: var(--em-text-muted); display: flex; gap: .7rem; flex-wrap: wrap; }
.em-satici-meta .yildiz { color: #fbbf24; }

/* ---------- Çekiliş kartları (liste) ---------- */
.em-cekilis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.em-ck {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--em-bg-card); border: 1px solid var(--em-border);
  color: var(--em-text); text-decoration: none; transition: .18s;
}
.em-ck:hover { transform: translateY(-4px); color: var(--em-text); border-color: rgba(245,158,11,.5); box-shadow: var(--em-shadow); }
/* Üst şerit: düzenleyen adı + katılım tipi.
   Eskiden burada dev bir degrade banner vardı; ödülü göstermediği için
   yerini doğrudan ödül karelerine bıraktı. */
.em-ck-ust {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .9rem; border-bottom: 1px solid var(--em-border);
  background: var(--em-bg-soft);
}
.em-ck-duzenleyen {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700; color: var(--em-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-ck-duzenleyen i { color: var(--em-primary); }
.em-ck-tip {
  display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto;
  font-size: .68rem; font-weight: 800; padding: .22rem .55rem; border-radius: 999px; color: #fff;
}
.em-ck-tip.ucretsiz { background: #10b981; }
.em-ck-tip.biletli  { background: #2563eb; }

.em-ck-sayac {
  display: flex; align-items: center; justify-content: center;
  padding: .4rem .5rem; border-radius: 8px; font-size: .74rem; font-weight: 600;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
  color: var(--em-text-muted);
}

/* Ödül havuzu / katılımcı sayaçları */
.em-ck-istatistik { display: flex; gap: .5rem; }
.em-ck-istatistik > div {
  flex: 1; text-align: center; padding: .5rem .35rem; border-radius: 10px;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-ck-istatistik b { display: block; font-size: .95rem; font-weight: 900; color: var(--em-primary); }
.em-ck-istatistik span { font-size: .6rem; font-weight: 700; letter-spacing: .04em; color: var(--em-text-muted); }
.em-ck-govde { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.em-ck-baslik {
  font-weight: 800; font-size: .95rem; margin: 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
/* Ödül kareleri — kartın ana görseli. Her ödül eşit boyutta kare,
   sol üstte adet rozeti, altta ad şeridi. */
.em-ck-odul-kareler { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.em-ck-kare {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
  display: flex; align-items: center; justify-content: center;
}
.em-ck-kare img { width: 100%; height: 100%; object-fit: cover; }
.em-ck-kare > i { font-size: 1.8rem; color: #fbbf24; }
.em-ck-kare-adet {
  position: absolute; left: 4px; top: 4px;
  font-size: .62rem; font-weight: 900; line-height: 1;
  padding: .15rem .3rem; border-radius: 5px;
  background: #f59e0b; color: #1a1a1a;
}
.em-ck-kare-ad {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .2rem .3rem; font-size: .58rem; font-weight: 700; text-align: center;
  background: rgba(0, 0, 0, .72); color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-ck-kare-fazla {
  flex-direction: column; gap: 0;
  font-size: 1.1rem; font-weight: 900; color: var(--em-primary);
  background: var(--em-grad-soft);
  border-color: color-mix(in srgb, var(--em-primary) 35%, transparent);
}
.em-ck-kare-fazla small { font-size: .55rem; font-weight: 700; color: var(--em-text-muted); }
.em-ck-alt {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .74rem; color: var(--em-text-muted); padding-top: .4rem; margin-top: auto;
  border-top: 1px dashed var(--em-border);
}
.em-ck-alt i { margin-right: .25rem; }
.em-ck-sure.acil { color: #fbbf24; font-weight: 700; }
.em-ck-sure.bitti { color: var(--em-danger, #ef4444); }
.em-ck-btn {
  display: block; text-align: center; padding: .5rem; border-radius: 10px; font-size: .84rem; font-weight: 700;
  background: var(--em-grad-soft); color: var(--em-primary);
  border: 1px solid color-mix(in srgb, var(--em-primary) 30%, transparent); transition: .16s;
}
.em-ck:hover .em-ck-btn { background: var(--em-primary); color: #fff; border-color: var(--em-primary); }
/* Katılmış kullanıcı: yeşil onay, hover'da renk değişmez */
.em-ck-btn.katildi {
  background: rgba(16, 185, 129, .12); color: #10b981; border-color: rgba(16, 185, 129, .4);
}
.em-ck-btn.katildi small { font-weight: 600; opacity: .8; }
.em-ck:hover .em-ck-btn.katildi {
  background: rgba(16, 185, 129, .2); color: #10b981; border-color: rgba(16, 185, 129, .55);
}

/* ---------- Şikayet / güvenlik uyarısı ---------- */
.em-sikayet-btn {
  display: inline-flex; align-items: center; gap: .3rem; background: none;
  border: 1px solid var(--em-border); color: var(--em-text-muted);
  padding: .25rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 600; transition: .15s;
}
.em-sikayet-btn:hover { color: #ef4444; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); }
.em-sikayet-link {
  background: none; border: 0; padding: 0; font-size: .78rem; font-weight: 600;
  color: var(--em-text-muted); display: inline-flex; align-items: center; gap: .3rem;
}
.em-sikayet-link:hover { color: #ef4444; }

.em-sohbet-uyari {
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.35);
  border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem;
}
.em-sohbet-uyari-bas { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .88rem; }
.em-sohbet-uyari-bas i { color: #fbbf24; font-size: 1.1rem; }
.em-sohbet-uyari ul { margin: 0; padding-left: 1.1rem; }
.em-sohbet-uyari li { font-size: .78rem; color: var(--em-text-muted); line-height: 1.6; }
.em-sohbet-uyari b { color: var(--em-text); }

/* ---------- Mağaza güven sistemi ---------- */
/* Sarmalayıcı: panel + açılır detay tek sütunda alt alta durur.
   NOT: panele height:100% verme — collapse açılınca sütun uzuyor ve panel
   detay satırlarının üstüne taşıyor. */
.em-guven-kutu { display: flex; flex-direction: column; height: 100%; }
.em-guven-panel {
  display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; border-radius: 14px;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
/* Tükenmiş ürün — "stoğa girince haber ver" kutusu */
.em-stok-bekle {
  padding: 1rem; border-radius: 14px;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-stok-bekle-ust { display: flex; gap: .75rem; align-items: flex-start; }
.em-stok-bekle-ust i { font-size: 1.35rem; color: #f59e0b; margin-top: .1rem; }
.em-stok-kayitli {
  margin-top: .75rem; padding: .65rem .8rem; border-radius: 10px; font-size: .85rem;
  background: rgba(16, 185, 129, .12); color: #10b981;
  border: 1px solid rgba(16, 185, 129, .35);
}

/* ---------------------------------------------------------------
   Bakiye yükleme (yukle.php)
   --------------------------------------------------------------- */
.em-yk-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
  padding: 1.1rem 1.4rem; border-radius: 18px;
  background: var(--em-grad-soft); border: 1px solid var(--em-border);
}
.em-yk-lbl { display: block; font-size: .78rem; color: var(--em-text-muted); font-weight: 600; }
.em-yk-val { font-size: 1.9rem; font-weight: 900; line-height: 1.15; color: var(--em-primary); }
.em-yk-guven { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--em-text-muted); }
.em-yk-guven i { color: var(--em-primary); margin-right: .3rem; }

/* Yöntem sekmeleri */
.em-yk-yontem { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.em-yk-tab {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .85rem .6rem; border-radius: 14px; cursor: pointer;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
  color: var(--em-text-muted); transition: border-color .18s, background .18s, color .18s;
}
.em-yk-tab i { font-size: 1.35rem; }
.em-yk-tab span { font-weight: 700; font-size: .88rem; color: var(--em-text); }
.em-yk-tab em { font-style: normal; font-size: .68rem; }
.em-yk-tab:hover { border-color: var(--em-primary); }
.em-yk-tab.active {
  border-color: var(--em-primary); background: var(--em-grad-soft);
  color: var(--em-primary); box-shadow: 0 0 0 1px var(--em-primary) inset;
}
.em-yk-tab.active i, .em-yk-tab.active em { color: var(--em-primary); }

.em-yk-panel { display: none; }
.em-yk-panel.active { display: block; animation: emYkGir .18s ease; }
@keyframes emYkGir { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Canlı tutar özeti */
.em-yk-ozet {
  border-radius: 12px; padding: .75rem .9rem;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
  font-size: .85rem;
}
.em-yk-ozet > div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.em-yk-ozet span { color: var(--em-text-muted); }
.em-yk-ozet-son {
  margin: .5rem 0 0 !important; padding-top: .5rem; border-top: 1px solid var(--em-border);
  font-weight: 800;
}
.em-yk-ozet-son b { color: var(--em-primary); font-size: 1.05rem; }

/* Hesap / IBAN kutusu */
.em-yk-hesap {
  border-radius: 12px; padding: .75rem .9rem;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-yk-hesap-ust { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; font-size: .88rem; }
.em-yk-hesap-ust i { color: var(--em-primary); }
.em-yk-iban {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem;
  padding: .5rem .65rem; border-radius: 9px; word-break: break-all;
  background: var(--em-bg-card); border: 1px dashed var(--em-border);
}
.em-yk-iban:hover { border-color: var(--em-primary); }
.em-yk-iban i { color: var(--em-primary); flex: 0 0 auto; }

.em-yk-rozetler {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
  padding-top: .85rem; border-top: 1px solid var(--em-border);
  font-size: .74rem; color: var(--em-text-muted);
}
.em-yk-rozetler i { margin-right: .3rem; }

/* ---------------------------------------------------------------
   Ödeme yöntemi seçim kartları (yukle.php)
   Düz buton yerine: ikon kutusu + ad/açıklama + ok.
   --------------------------------------------------------------- */
.em-odeme-liste { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
.em-odeme-yontem {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  padding: .85rem .95rem; text-align: left; cursor: pointer;
  background: var(--em-bg-soft); color: var(--em-text);
  border: 1px solid var(--em-border); border-radius: 14px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.em-odeme-yontem:hover {
  border-color: var(--em-primary); background: var(--em-bg-card); transform: translateY(-1px);
}
.em-odeme-yontem:focus-visible { outline: 2px solid var(--em-primary); outline-offset: 2px; }

/* Önerilen (ilk) yöntem daha belirgin */
.em-odeme-yontem.onerilen {
  border-color: var(--em-primary);
  box-shadow: 0 0 0 3px rgba(var(--em-primary-rgb), .12);
}

.em-odeme-ikon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.15rem;
  color: var(--em-primary); background: rgba(var(--em-primary-rgb), .12);
}
.em-odeme-yontem.onerilen .em-odeme-ikon { background: var(--em-primary); color: #fff; }

.em-odeme-metin { flex: 1 1 auto; min-width: 0; }
.em-odeme-metin b {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .93rem; font-weight: 600; line-height: 1.25;
}
.em-odeme-metin small {
  display: block; margin-top: .15rem;
  font-size: .77rem; color: var(--em-text-muted);
}
.em-odeme-etiket {
  font-size: .63rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .12rem .4rem; border-radius: 999px;
  color: var(--em-primary); background: rgba(var(--em-primary-rgb), .14);
}
.em-odeme-etiket.test { color: #b45309; background: rgba(245, 158, 11, .18); }

.em-odeme-ok { flex: 0 0 auto; color: var(--em-text-muted); transition: transform .16s ease; }
.em-odeme-yontem:hover .em-odeme-ok { transform: translateX(3px); color: var(--em-primary); }

@media (max-width: 420px) {
  .em-odeme-ikon { width: 36px; height: 36px; font-size: 1rem; }
  .em-odeme-metin b { font-size: .88rem; }
}

/* ---------------------------------------------------------------
   Sipariş kartı (siparislerim.php) — emanet akışı görünür olsun
   --------------------------------------------------------------- */
.em-siparis {
  border-radius: 16px; overflow: hidden; margin-bottom: 1rem;
  background: var(--em-bg-card); border: 1px solid var(--em-border);
}
.em-siparis-ust {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .9rem; background: var(--em-bg-soft);
  border-bottom: 1px solid var(--em-border);
}
.em-siparis-no { font-weight: 800; font-size: .85rem; }

/* Sipariş grubu başlığı — kalemler bunun altında listeleniyor.
   Kart değil ince bir şerit: asıl içerik kalem kartları, başlık
   onları birbirine bağlayan etiket. */
.em-siparis-baslik {
  padding: .45rem .2rem; font-size: .85rem;
  border-bottom: 1px solid var(--em-border);
}
.em-siparis-baslik:first-child { margin-top: 0 !important; }
.em-siparis-govde { padding: .9rem; }
.em-siparis-gorsel {
  width: 76px; height: 60px; object-fit: cover; border-radius: 10px;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}

/* Ödeme → teslim → onay akışı */
.em-siparis-akis { display: flex; gap: .3rem; margin-top: .9rem; }
.em-akis-adim {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .4rem .3rem; border-radius: 8px; font-size: .72rem; font-weight: 600;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
  color: var(--em-text-muted);
}
.em-akis-adim.tamam {
  color: #10b981; border-color: rgba(16, 185, 129, .4);
  background: rgba(16, 185, 129, .10);
}
.em-akis-adim i { font-size: .9rem; }

.em-siparis-uyari {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .8rem; padding: .55rem .7rem; border-radius: 10px;
  font-size: .78rem; color: var(--em-text-muted);
  background: var(--em-grad-soft);
  border: 1px solid color-mix(in srgb, var(--em-primary) 25%, transparent);
}
.em-siparis-uyari i { color: var(--em-primary); margin-top: .1rem; }
.em-siparis-uyari b { color: var(--em-text); }

@media (max-width: 576px) {
  .em-akis-adim span { display: none; }
}

/* Mağaza puanı — itemsatis tarzı X/10 gösterimi (negatif oran vurgusu yok) */
.em-magaza-puan {
  min-width: 62px; height: 62px; border-radius: 14px;
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
  padding: 0 .5rem; background: var(--em-grad-soft);
  border: 1px solid color-mix(in srgb, var(--em-primary) 30%, transparent);
}
.em-magaza-puan b { font-size: 1.5rem; font-weight: 900; color: var(--em-primary); line-height: 1; }
.em-magaza-puan span { font-size: .72rem; color: var(--em-text-muted); font-weight: 700; }
.em-magaza-puan.yeni { align-items: center; }
.em-magaza-puan.yeni i { font-size: 1.5rem; color: var(--em-primary); }

.em-guven-daire {
  width: 62px; height: 62px; min-width: 62px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--gr) calc(var(--gp) * 1%), var(--em-border) 0);
  display: flex; align-items: center; justify-content: center;
}
.em-guven-daire::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--em-bg-soft);
}
.em-guven-daire span { position: relative; font-size: 1.15rem; font-weight: 900; color: var(--gr); }
.em-guven-detay { margin-top: .5rem; display: flex; flex-direction: column; gap: .25rem; }
.em-guven-detay > div {
  display: flex; align-items: center; gap: .5rem; font-size: .78rem;
  padding: .35rem .5rem; border-radius: 8px; background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-guven-detay .ok i { color: #10b981; }
.em-guven-detay .bos { opacity: .55; }
.em-guven-detay .bos i { color: var(--em-text-muted); }
.em-guven-toplam {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .25rem; padding: .45rem .5rem; border-radius: 8px;
  font-size: .8rem; font-weight: 800; background: var(--em-grad-soft);
}
.em-guven-detay .no { opacity: .7; }
.em-guven-detay .no i { color: var(--em-text-muted); }
.em-guven-detay span { flex: 1; }
.em-guven-detay b { color: var(--em-text-muted); font-size: .72rem; }

.em-perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; }
.em-perf {
  text-align: center; padding: .7rem .5rem; border-radius: 12px;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-perf i { font-size: 1.1rem; color: var(--em-primary); }
.em-perf b { display: block; font-size: 1rem; font-weight: 800; line-height: 1.2; margin-top: .15rem; }
.em-perf span { font-size: .68rem; color: var(--em-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.em-perf.kotu { border-color: rgba(239,68,68,.4); }
.em-perf.kotu i, .em-perf.kotu b { color: #ef4444; }

.em-ilerleme-bar { height: 8px; border-radius: 999px; background: var(--em-border); overflow: hidden; }
.em-ilerleme-bar span { display: block; height: 100%; border-radius: 999px; transition: width .5s; }
.em-rozet { cursor: help; }

/* Başarımlar sekmesi */
.em-basarim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.em-basarim {
  display: flex; align-items: flex-start; gap: .8rem; padding: 1rem;
  background: var(--em-bg-card); border: 1px solid var(--em-border); border-radius: 14px;
}
.em-basarim-ic {
  width: 46px; height: 46px; min-width: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}

/* Mağaza içi ilan filtresi */
.em-magaza-filtre {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; align-items: end;
  background: var(--em-bg-card); border: 1px solid var(--em-border); border-radius: 14px; padding: 1rem;
}
.em-mf-item label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--em-text-muted); margin-bottom: .3rem; }
.em-mf-item input:not([type=checkbox]), .em-mf-item select {
  width: 100%; height: 38px; border-radius: 9px; border: 1px solid var(--em-border);
  background: var(--em-bg-soft); color: var(--em-text); padding: 0 .7rem; font-size: .85rem; outline: none;
}
.em-mf-item input:focus, .em-mf-item select:focus { border-color: var(--em-primary); }
.em-mf-son label { text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--em-text); }

/* ---------- Yayın içi canlı bağış ---------- */
.em-canli-bagis {
  position: relative; overflow: hidden;
  border-color: rgba(239,68,68,.3) !important;
}
.em-canli-bagis::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px 130px at 100% 0%, rgba(239,68,68,.12), transparent 70%);
}
.em-canli-bagis > * { position: relative; z-index: 1; }
.em-bagis-tutarlar { display: flex; gap: .4rem; flex-wrap: wrap; }
.em-bagis-chip {
  border: 1.5px solid var(--em-border); background: var(--em-bg-soft); color: var(--em-text);
  border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; font-weight: 700; cursor: pointer; transition: .15s;
}
.em-bagis-chip:hover { border-color: #ef4444; transform: translateY(-2px); }
.em-bagis-chip.aktif { background: #ef4444; border-color: #ef4444; color: #fff; }

.em-bagis-akis { display: flex; flex-direction: column; gap: .45rem; max-height: 280px; overflow-y: auto; }
.em-bagis-satir {
  display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: 10px;
  background: var(--em-bg-soft); border: 1px solid var(--em-border);
}
.em-bagis-tutar {
  font-weight: 800; font-size: .84rem; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg,#ef4444,#f59e0b); padding: .2rem .55rem; border-radius: 7px;
}

/* ---------- Yayıncılar sayfası ---------- */
.em-yl-liste { display: flex; flex-direction: column; gap: .3rem; max-height: 60vh; overflow-y: auto; }
.em-yl-satir {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 11px;
  color: var(--em-text); transition: .14s; border: 1px solid transparent;
}
.em-yl-satir:hover { background: var(--em-bg-soft); color: var(--em-text); }
.em-yl-satir.aktif { background: var(--em-grad-soft); border-color: color-mix(in srgb, var(--em-primary) 40%, transparent); }
.em-yl-satir img, .em-yl-satir .ph {
  width: 40px; height: 40px; min-width: 40px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center; background: var(--em-grad); color: #fff;
}
.em-yl-satir > i { color: var(--em-primary); font-size: 1.25rem; }

.em-yayinci-kartlar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem;
}
.em-yk {
  border-radius: 16px; overflow: hidden; background: var(--em-bg-card);
  border: 1px solid var(--em-border); transition: .18s; display: flex; flex-direction: column;
}
.em-yk:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--em-primary) 50%, transparent); box-shadow: var(--em-shadow); }
.em-yk-ust {
  position: relative; height: 88px;
  background: radial-gradient(180px 90px at 50% 120%, color-mix(in srgb, var(--em-primary) 40%, transparent), transparent 70%), var(--em-bg-soft);
  display: flex; align-items: flex-end; justify-content: center;
}
.em-yk-av {
  width: 68px; height: 68px; border-radius: 50%; object-fit: cover; transform: translateY(50%);
  border: 3px solid var(--em-bg-card); background: var(--em-grad);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem;
}
.em-yk-canli {
  position: absolute; top: .55rem; right: .55rem; display: inline-flex; align-items: center; gap: .25rem;
  background: #ef4444; color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .04em;
  padding: .15rem .45rem; border-radius: 5px;
}
.em-yk-canli i { font-size: .5rem; animation: emCanli 1.4s infinite; }
@keyframes emCanli { 0%,100%{opacity:1} 50%{opacity:.35} }
.em-yk-govde { padding: 2.4rem .8rem .8rem; text-align: center; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.em-yk-ad { font-weight: 800; font-size: .92rem; }
.em-yk-platform { font-size: .74rem; color: var(--em-text-muted); display: flex; align-items: center; justify-content: center; gap: .3rem; }
.em-yk-stat { display: flex; justify-content: center; gap: .8rem; font-size: .76rem; color: var(--em-text-muted); margin-top: .1rem; }
.em-yk-stat i { color: #ef4444; margin-right: .2rem; }
.em-yk-btn { display: flex; gap: .35rem; margin-top: auto; padding-top: .6rem; }

/* ---------- Anasayfa vurgu blokları (Yayıncılar / Çekilişler) ---------- */
.em-vurgu {
  position: relative; overflow: hidden; border-radius: 18px; padding: 1.2rem 1.3rem;
  background: var(--em-bg-card); border: 1px solid var(--em-border);
  display: flex; flex-direction: column;
}
.em-vurgu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(320px 140px at 100% 0%, color-mix(in srgb, var(--em-primary) 18%, transparent), transparent 70%);
}
.em-vurgu > * { position: relative; z-index: 1; }
.em-vurgu-cekilis::before { background: radial-gradient(320px 140px at 100% 0%, rgba(245,158,11,.18), transparent 70%); }
.em-vurgu-bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.em-vurgu-bas h3 { font-size: 1.05rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: .5rem; }
.em-vurgu-cekilis .em-vurgu-bas h3 i { color: #fbbf24; }
.em-vurgu-yayinci .em-vurgu-bas h3 i { color: var(--em-primary); }
.em-vurgu-bas a { font-size: .8rem; font-weight: 600; color: var(--em-primary); white-space: nowrap; }

.em-vurgu-liste { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.em-cekilis-satir {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 12px;
  background: var(--em-bg-soft); border: 1px solid var(--em-border); color: var(--em-text); transition: .16s;
}
.em-cekilis-satir:hover { border-color: rgba(245,158,11,.5); color: var(--em-text); transform: translateX(2px); }
.em-cekilis-ic {
  width: 36px; height: 36px; min-width: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#f59e0b,#ef4444); color: #fff; font-size: 1rem;
}

.em-yayinci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; flex: 1; }
.em-yayinci-kart {
  text-align: center; padding: .7rem .4rem; border-radius: 12px; color: var(--em-text);
  background: var(--em-bg-soft); border: 1px solid var(--em-border); transition: .16s;
}
.em-yayinci-kart:hover { border-color: color-mix(in srgb, var(--em-primary) 50%, transparent); color: var(--em-text); transform: translateY(-3px); }
.em-yayinci-kart img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; margin-bottom: .4rem;
  border: 2px solid color-mix(in srgb, var(--em-primary) 40%, transparent);
}
.em-yayinci-ad { font-size: .78rem; font-weight: 700; }
.em-yayinci-bagis { font-size: .7rem; color: #ef4444; font-weight: 600; }

/* Görsel altı mağaza mini kartı */
.em-magaza-mini {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem;
  background: var(--em-bg-card); border: 1px solid var(--em-border); border-radius: 14px;
  color: var(--em-text); transition: .16s;
}
.em-magaza-mini:hover { border-color: color-mix(in srgb, var(--em-primary) 45%, transparent); color: var(--em-text); transform: translateY(-2px); }
.em-magaza-mini img, .em-magaza-mini .ph {
  width: 38px; height: 38px; min-width: 38px; border-radius: 10px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: var(--em-grad); color: #fff;
}

/* Özellik tablosu (Satıcı / Bölge / Platform / Teslimat) */
.em-ozellik-tablo { display: flex; flex-direction: column; margin: 1rem 0; }
.em-ozellik-tablo > div {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; font-size: .86rem; border-bottom: 1px dashed var(--em-border);
}
.em-ozellik-tablo > div:last-child { border-bottom: 0; }
.em-ozellik-tablo span { color: var(--em-text-muted); display: flex; align-items: center; gap: .4rem; }
.em-ozellik-tablo span i { opacity: .7; }
.em-ozellik-tablo b { font-weight: 600; text-align: right; }

/* Aksiyon linkleri (hediye et / listeye kaydet) */
.em-detay-aksiyon { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .8rem 0; }
.em-detay-aksiyon button, .em-detay-aksiyon a {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: 0;
  font-size: .82rem; font-weight: 600; color: var(--em-text-muted); transition: color .15s;
}
.em-detay-aksiyon button:hover, .em-detay-aksiyon a:hover { color: var(--em-primary); }
.em-detay-aksiyon .aktif { color: var(--em-danger, #ef4444); }

/* Sekmeler — alt çizgili modern */
.em-detay-tablar { border-bottom: 1px solid var(--em-border); padding: 0 .25rem; gap: .25rem; }
.em-detay-tablar .nav-link {
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0;
  color: var(--em-text-muted); font-weight: 600; font-size: .9rem; padding: .7rem 1rem;
}
.em-detay-tablar .nav-link:hover { color: var(--em-text); }
.em-detay-tablar .nav-link.active {
  color: var(--em-primary); background: transparent;
  border-bottom-color: var(--em-primary) !important;
}
.em-detay-tablar .nav-link .badge { font-size: .64rem; }

/* Güven kutucukları */
.em-detail-trust {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--em-bg-card);
  border: 1px solid var(--em-border);
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
  height: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
}
.em-detail-trust i {
  font-size: 1.25rem;
  background: var(--em-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Nasıl çalışır adımları */
.em-detail-steps {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--em-bg-card);
  border: 1px solid var(--em-border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  flex-wrap: wrap;
}
.em-detail-steps > div { display: flex; align-items: center; gap: 0.55rem; flex: 1; min-width: 130px; }
.em-detail-steps .n {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: var(--em-grad);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(var(--em-primary-rgb), 0.4);
}
.em-detail-steps b { display: block; font-size: 0.82rem; line-height: 1.2; }
.em-detail-steps small { color: var(--em-text-muted); font-size: 0.7rem; }
.em-detail-steps > i { color: var(--em-text-muted); }
@media (max-width: 576px) {
  .em-detail-steps > i { display: none; }
  .em-detail-hero { padding: 1rem; }
}
.em-detail-panel .nav-tabs .nav-link { color: var(--em-text-muted); border: 0; }
.nav-tabs .nav-link { color: var(--em-text-muted); }
.nav-tabs .nav-link.active {
  color: var(--em-primary);
  background: transparent;
  border-color: var(--em-border) var(--em-border) transparent;
}
.em-code-box {
  font-family: "Cascadia Code", Consolas, monospace;
  background: var(--em-grad-soft);
  border: 1px dashed var(--em-primary);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  user-select: all;
  word-break: break-all;
}

/* ---------- Adet seçici + satın alma satırı ---------- */
.em-buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--em-grad-soft);
  border: 1px solid var(--em-border);
  border-radius: 14px;
  padding: 0.7rem 1rem;
}
.em-qty {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--em-bg-soft);
  border: 1px solid var(--em-border);
  border-radius: 999px;
  padding: 0.25rem;
}
.em-qty button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--em-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.em-qty button:hover { background: var(--em-grad); color: #fff; }
.em-qty input {
  width: 52px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--em-text);
  -moz-appearance: textfield;
}
.em-qty input::-webkit-outer-spin-button,
.em-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.em-qty input:focus { outline: none; }
.em-buy-total { text-align: right; }
.em-buy-total span { display: block; line-height: 1; }
.em-buy-total b { font-size: 1.3rem; font-weight: 900; }

/* ---------- Mobil alt navigasyon ---------- */
.em-bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1040;
  display: flex;
  background: var(--em-navbar-bg);
  backdrop-filter: var(--em-glass-blur);
  -webkit-backdrop-filter: var(--em-glass-blur);
  border-top: 1px solid var(--em-border);
  padding: 0.3rem 0 calc(0.3rem + env(safe-area-inset-bottom, 0));
}
.em-bottomnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--em-text-muted);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.35rem 0;
}
.em-bottomnav a i { font-size: 1.25rem; }
.em-bottomnav a:active, .em-bottomnav a:hover { color: var(--em-primary); }
.em-bottomnav-search i {
  background: var(--em-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 991px) {
  body { padding-bottom: 64px; }
}

/* ---------- Mağaza profili ---------- */
.magaza-banner {
  height: 200px;
  background: var(--em-grad);
  background-size: cover;
  background-position: center;
}
.magaza-logo {
  width: 120px;
  height: 120px;
  min-width: 120px;
  border-radius: 24px;
  overflow: hidden;
  border: 4px solid var(--em-bg-soft);
  background: var(--em-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: var(--em-primary);
  box-shadow: var(--em-shadow);
}
.magaza-logo img { width: 100%; height: 100%; object-fit: cover; }

/* Mağaza mini kart (dizin) */
.magaza-mini { transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.magaza-mini:hover { transform: translateY(-4px); box-shadow: var(--em-shadow-lg); border-color: rgba(var(--em-primary-rgb),.4); }
.magaza-mini-banner { height: 90px; background: var(--em-grad); background-size: cover; background-position: center; }
.magaza-mini-logo {
  width: 60px; height: 60px; min-width: 60px; border-radius: 16px; overflow: hidden;
  border: 3px solid var(--em-bg-soft); margin-top: -32px; background: var(--em-bg-card);
  display: flex; align-items: center; justify-content: center; color: var(--em-primary); font-size: 1.4rem;
}
.magaza-mini-logo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 576px) {
  .magaza-banner { height: 130px; }
  .magaza-logo { width: 84px; height: 84px; min-width: 84px; font-size: 1.8rem; border-radius: 18px; }
}

/* ---------- Duyuru bandı ---------- */
.em-announce {
  background: var(--em-grad);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0;
  text-align: center;
}
.em-announce a { color: #fff; text-decoration: underline; }

/* ---------- Animasyonlar ---------- */
@keyframes emFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.em-fade-up { animation: emFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---------- Yardımcılar ---------- */
.min-h-100 { min-height: 100vh; }
.cursor-pointer { cursor: pointer; }
img { max-width: 100%; }

/* ---------- Mobil uyum ---------- */
@media (max-width: 768px) {
  /* Yatay hero bandı mobilde dikey ve ortalı (yalnızca en dış satır) */
  .em-hero-slim > .d-flex { flex-direction: column; align-items: center !important; text-align: center; gap: 0.9rem !important; }
  .em-hero-slim > .d-flex > .d-flex { flex-direction: row; text-align: left; }
  .em-hero-slim .em-hero-stats { margin: 0 auto !important; justify-content: center; gap: 1.2rem; }
  .em-hero-slim h1 { font-size: 1.05rem; }
  /* Bakiye banner'ındaki bilgi satırları mobilde yatay ve ortalı küçük rozetler */
  .em-hero-slim .ms-auto.d-flex { margin: 0 !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem !important; font-size: 0.72rem; }
  .em-hero-slim .fs-2 { font-size: 1.5rem !important; }

  /* Ürün kartları mobilde daha kompakt */
  .em-product-name { font-size: 0.82rem; min-height: 2.3em; }
  .em-price { font-size: 0.92rem; }
  .em-product-price-bar { padding: 0.4rem 0.55rem; }
  .em-price-arrow { display: none; }
  .em-product-meta { font-size: 0.68rem; }
  .em-product-cta { display: none; }
  .em-badge-discount { font-size: 0.65rem; padding: 0.2rem 0.45rem; }

  /* Bölüm başlıkları */
  .em-section-title { margin: 1.6rem 0 0.9rem; }
  .em-section-title h2 { font-size: 1.05rem; }

  /* Detay sayfası */
  .em-detail-price { font-size: 1.7rem; }
  .em-detail-price-box { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .em-detail-price-box .text-end { text-align: left !important; }
  .em-buy-row { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .em-buy-total { text-align: center; }
  .em-qty { justify-content: center; }
  .em-detail-trust { font-size: 0.62rem; padding: 0.5rem 0.5rem; gap: 0.4rem; }
  .em-detail-trust i { font-size: 1rem; }

  /* Kategori banner */
  .em-cat-banner-name { font-size: 0.78rem; left: 8px; right: 8px; bottom: 7px; }

  /* Panel ve kartlar */
  .em-auth-card { padding: 1.4rem; }
  .em-hero { padding: 1.6rem 1.2rem; }
  .em-code-box { font-size: 0.85rem; padding: 0.6rem 0.7rem; }

  /* Navbar sıkılaştırma */
  .em-navbar .navbar-brand { font-size: 1.1rem; }
  .em-balance-chip { font-size: 0.72rem; padding: 0.28rem 0.65rem; }

  /* Sağ ikon grubu: karışmayı önle */
  .em-navbar .d-flex.align-items-center.gap-2 { gap: 0.15rem !important; }
  .em-navbar .btn.fs-5 { font-size: 1.05rem !important; padding: 0.3rem 0.45rem; }
  .em-navbar .position-relative .badge {
    font-size: 0.52rem !important;
    padding: 0.2em 0.4em;
    transform: translate(-40%, -30%) !important;
  }
  .em-navbar .dropdown .bi-chevron-down { display: none; }
  .em-avatar-sm { width: 30px; height: 30px; }
}

@media (max-width: 576px) {
  .em-hero { padding: 1.4rem 1rem; }
  .em-slider .carousel-caption { max-width: 90%; padding: 0.6rem 0.9rem; }
  .container { padding-left: 12px; padding-right: 12px; }
  .em-footer-bottom { flex-direction: column; text-align: center; }
  .em-detail-steps { gap: 0.5rem; padding: 0.6rem 0.7rem; }
  .em-detail-steps > div { min-width: 100%; }
}

/* ===================================================================
   TEMA CANLI DEMO ŞERİDİ (yalnız yönetici, önizleme modunda)
   =================================================================== */
.tema-demo-serit {
  position: sticky; top: 0; z-index: 2000;
  background: #12161f; border-bottom: 2px solid var(--em-primary);
  color: #e8edf5; font-size: .8rem;
}
.tdb-ic {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  max-width: 1320px; margin: 0 auto; padding: .5rem 1rem;
}
.tdb-etiket {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  color: #fff; background: var(--em-primary);
}
.tdb-secim { display: inline-flex; align-items: center; gap: .4rem; }
.tdb-secim > span { opacity: .7; }
.tdb-secim select {
  padding: .3rem .55rem; border-radius: 7px; cursor: pointer;
  font-size: .8rem; color: #e8edf5;
  background: #1b2331; border: 1px solid #2c3646;
}
.tdb-cihaz { display: inline-flex; gap: .2rem; }
.tdb-cihaz button {
  width: 30px; height: 28px; border-radius: 6px; cursor: pointer;
  color: #9fb0c6; background: transparent; border: 1px solid transparent;
}
.tdb-cihaz button:hover { color: #fff; background: #1b2331; }
.tdb-cihaz button.aktif { color: #fff; background: #1b2331; border-color: var(--em-primary); }
.tdb-bilgi { opacity: .6; font-size: .74rem; }
.tdb-eylem { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.tdb-form { margin: 0; }
.tdb-uygula {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; border: 0; border-radius: 8px; cursor: pointer;
  font-size: .8rem; font-weight: 800; color: #fff; background: var(--em-primary);
}
.tdb-uygula:hover { filter: brightness(1.1); }
.tdb-zaten { display: inline-flex; align-items: center; gap: .3rem; color: #34d399; font-weight: 700; }
.tdb-kapat {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 6px; color: #9fb0c6; text-decoration: none; border: 1px solid #2c3646;
}
.tdb-kapat:hover { color: #fff; background: #1b2331; }

@media (max-width: 860px) {
  .tdb-bilgi { display: none; }
  .tdb-ic { gap: .5rem; padding: .45rem .7rem; }
}

/* Cihaz önizleme katmanı — gerçek viewport için iframe kullanır */
.tdb-cihaz-katman {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column;
  background: rgba(6, 9, 14, .96);
}
.tdb-cihaz-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; color: #e8edf5; font-size: .82rem;
  border-bottom: 1px solid #2c3646;
}
.tdb-cihaz-kapat {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: 7px; cursor: pointer;
  font-size: .78rem; font-weight: 700; color: #fff;
  background: var(--em-primary); border: 0;
}
.tdb-cihaz-alan {
  flex: 1 1 auto; display: flex; justify-content: center;
  padding: 1rem; overflow: auto;
}
.tdb-cihaz-alan iframe {
  height: 100%; min-height: 600px; border: 0; border-radius: 12px;
  background: #fff; box-shadow: 0 0 0 1px #2c3646, 0 24px 60px rgba(0, 0, 0, .5);
}

/* ===================================================================
   ORTAK ANA SAYFA BLOKLARI (tema-bağımsız)
   Tema kendi sürümünü sağlamazsa bu stiller kullanılır.
   =================================================================== */

/* --- Müşteri yorumları --- */
.em-yorum-bolum { margin-top: 2rem; }
.em-yorum-serit {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
  gap: .8rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory;
}
.em-yorum-kart {
  scroll-snap-align: start; margin: 0; padding: 1rem;
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--em-bg-card); border: 1px solid var(--em-border);
  border-radius: var(--em-radius, 14px);
}
.em-yorum-yildiz { color: #fbbf24; font-size: .78rem; letter-spacing: .08em; }
.em-yorum-kart blockquote {
  margin: 0; font-size: .86rem; line-height: 1.55; color: var(--em-text);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.em-yorum-kart figcaption { margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--em-border); }
.em-yorum-kart figcaption b { display: block; font-size: .82rem; font-weight: 650; }
.em-yorum-kart figcaption span { display: block; font-size: .73rem; color: var(--em-text-muted); }

/* --- Onaylı mağazalar --- */
.em-mag-serit { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .4rem; }
.em-mag {
  flex: 0 0 auto; width: 165px; padding: .85rem .7rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: var(--em-bg-card); border: 1px solid var(--em-border);
  border-radius: var(--em-radius, 14px); text-decoration: none; color: var(--em-text);
  transition: border-color .15s ease, transform .15s ease;
}
.em-mag:hover { border-color: var(--em-primary); transform: translateY(-3px); }
.em-mag-logo {
  width: 54px; height: 54px; border-radius: 50%; overflow: hidden; position: relative;
  display: grid; place-items: center; font-size: 1.3rem;
  color: var(--em-primary); background: rgba(var(--em-primary-rgb), .12);
  border: 2px solid var(--em-border);
}
.em-mag-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.em-mag-ad { display: flex; align-items: center; gap: .25rem; justify-content: center; font-size: .84rem; font-weight: 650; }
.em-tik { color: #3b82f6; font-size: .78rem; }
.em-mag-puan { font-size: .78rem; color: #fbbf24; font-weight: 700; }
.em-mag-puan small { color: var(--em-text-muted); font-weight: 500; }
.em-mag-alt { font-size: .72rem; color: var(--em-text-muted); }

/* --- Canlı çekilişler --- */
.em-cekilis-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.em-cekilis-kart {
  display: flex; flex-direction: column; gap: .5rem; padding: 1rem;
  background: var(--em-bg-card); border: 1px solid var(--em-border);
  border-radius: var(--em-radius, 14px);
}
.em-cekilis-ust { display: flex; align-items: center; justify-content: space-between; }
.em-cekilis-ikon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.25rem; color: #fff; background: var(--em-primary);
}
.em-bedava {
  padding: .2rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  color: #052e1b; background: #34d399;
}
.em-bedava.bakiye { color: #fff; background: var(--em-primary); }
.em-cekilis-kart h3 { margin: 0; font-size: .96rem; font-weight: 700; line-height: 1.3; }
.em-cekilis-odul { margin: 0; font-size: .8rem; color: #fbbf24; }
.em-cekilis-bilgi { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .75rem; color: var(--em-text-muted); }
.em-cekilis-btn {
  margin-top: .3rem; padding: .55rem; border-radius: 10px; text-align: center;
  font-size: .8rem; font-weight: 800; color: #fff; background: var(--em-primary); text-decoration: none;
}
.em-cekilis-btn:hover { filter: brightness(1.1); color: #fff; }

/* --- Yayıncılar --- */
.em-yayin-serit { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.em-yayinci {
  display: flex; align-items: center; gap: .65rem; padding: .65rem .7rem;
  background: var(--em-bg-card); border: 1px solid var(--em-border);
  border-radius: 12px; text-decoration: none; color: var(--em-text);
  transition: border-color .15s ease, transform .15s ease;
}
.em-yayinci:hover { border-color: var(--em-primary); transform: translateY(-2px); }
.em-yayinci-av {
  position: relative; flex: 0 0 auto; width: 42px; height: 42px;
  border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--em-bg-soft); color: var(--em-text-muted);
}
.em-yayinci-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.em-yayin-nokta {
  position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px;
  border-radius: 50%; background: #ef4444; border: 2px solid var(--em-bg-card);
}
.em-yayinci-bilgi { min-width: 0; flex: 1 1 auto; }
.em-yayinci-bilgi b { display: block; font-size: .85rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-yayinci-kanal { display: flex; align-items: center; gap: .25rem; font-size: .73rem; color: var(--em-text-muted); }
.em-yayinci-kod {
  flex: 0 0 auto; padding: .18rem .4rem; border-radius: 6px;
  font-size: .68rem; font-weight: 700; font-family: ui-monospace, Menlo, monospace;
  color: var(--em-primary); background: rgba(var(--em-primary-rgb), .12);
}

@media (max-width: 560px) {
  .em-yayin-serit { grid-template-columns: 1fr; }
}

/* Satın alma onay kutuları (varsayılan tema) */
.em-onay-kutular { display: grid; gap: .5rem; margin: .75rem 0; }
.em-onay { display: flex; align-items: flex-start; gap: .5rem; font-size: .78rem; line-height: 1.5; cursor: pointer; }
.em-onay input { flex: 0 0 auto; margin-top: .15rem; }