/* ============================================================
   THORPIN — UI Katmanı
   style.css'ten SONRA yüklenir. Marka rengi (--primary) admin
   panelinden gelmeye devam eder; burada yalnızca nötr yüzeyler,
   tipografi ölçeği ve bileşen görünümü tanımlanır.

   İmza: "Şarj" — Mjolnir/yıldırım dilinden gelen ince akım
   çizgisi. Bölüm başlıklarında, aktif menüde, footer sınırında
   ve kart hover'ında aynı motif tekrar eder. Ambient animasyon
   yok; yalnızca etkileşimde canlanır.

   KURAL: style.css içinde bir seçici @media altında da
   tanımlıysa, buradaki karşılığı da aynı kırılıma sarılır —
   aksi halde bu dosya sonra yüklendiği için mobil kuralları
   sessizce ezer.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENLAR
   ------------------------------------------------------------ */
:root {
  /* Yüzeyler — açık tema */
  --bg: #ffffff;
  --bg-soft: #f4f6fa;
  --card: #ffffff;
  --card-2: #f8fafc;
  --text: #0f1420;
  --text-muted: #5b6779;
  --border: #e3e8f0;
  --border-strong: #d3dae6;
  --header-bg: #ffffff;
  --topbar-bg: #fbfcfe;
  --input-bg: #f1f4f9;
  --placeholder: #7c889b;

  /* Yarıçap ölçeği */
  --radius-xs: 8px;
  --radius-sm: 11px;
  --radius: 15px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Gölge ölçeği */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 2px 10px rgba(16, 24, 40, .06);
  --shadow-md: 0 8px 24px -8px rgba(16, 24, 40, .12);
  --shadow-lg: 0 20px 48px -16px rgba(16, 24, 40, .18);
  --glow: 0 12px 32px -10px rgba(var(--primary-rgb), .45);

  /* İmza: akım gradyanı. Açık temada beyaz orta nokta zeminde
     kaybolduğu için merkez rengi temaya göre değişiyor. */
  --charge-core: rgba(var(--primary-rgb), .45);
  --charge: linear-gradient(90deg,
      rgba(var(--primary-rgb), 0),
      rgba(var(--primary-rgb), .95) 24%,
      var(--charge-core) 50%,
      rgba(var(--primary-rgb), .95) 76%,
      rgba(var(--primary-rgb), 0));

  /* Durum renkleri */
  --ok: #16a34a;
  --ok-soft: rgba(22, 163, 74, .12);
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, .12);
  --danger: #e11d48;
  --danger-soft: rgba(225, 29, 72, .12);
  --star: #f5b301;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

html[data-theme="dark"] {
  /* Fırtına gecesi: mavi dökümlü siyah. Zemin en koyu, kart üstte. */
  --bg: #0b111c;
  --bg-soft: #080c15;
  --card: #121a29;
  --card-2: #0e1522;
  --text: #eaeff8;
  --text-muted: #93a2bb;
  --border: #1f2a3d;
  --border-strong: #2b394f;
  --header-bg: #0a0f19;
  --topbar-bg: #070b13;
  --input-bg: #141d2d;
  --placeholder: #7d8ba4;
  --charge-core: #ffffff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 2px 12px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, .7);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .85);
  --glow: 0 14px 40px -12px rgba(var(--primary-rgb), .55);

  --ok-soft: rgba(34, 197, 94, .16);
  --warn-soft: rgba(245, 158, 11, .16);
  --danger-soft: rgba(244, 63, 94, .16);
}

/* ------------------------------------------------------------
   2. TABAN & TİPOGRAFİ
   Tek aile: Plus Jakarta Sans (değişken 200–800, latin +
   latin-ext ile tam Türkçe kapsama). Kişilik ağırlık, sıkı harf
   aralığı ve versal mikro etiketlerle kuruluyor — ek font
   isteği yok.
   ------------------------------------------------------------ */
body { text-rendering: optimizeLegibility; }

h1, h2, h3, h4 { letter-spacing: -.022em; }
h1 { line-height: 1.14; }
h2, h3 { line-height: 1.22; }

/* Fiyat ve sayaçlarda rakamlar hizalı aksın */
.product-price, .product-old-price, .cart-count,
.account-card-price, .rv-score b { font-variant-numeric: tabular-nums; }

::selection { background: rgba(var(--primary-rgb), .28); color: var(--text); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   3. BUTONLAR — tek sistem
   ------------------------------------------------------------ */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
}
.btn:hover {
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(var(--primary-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn:active { transform: translateY(0); }
.btn-sm { border-radius: var(--radius-xs); }

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid rgba(var(--primary-rgb), .55);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--primary-soft);
  color: var(--primary);
  filter: none;
  box-shadow: none;
}
.btn-ghost {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--card-2);
  border-color: var(--border-strong);
  color: var(--text);
  filter: none;
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------
   4. ÜST BAR + HEADER + ANA MENÜ
   ------------------------------------------------------------ */
.site-chrome {
  background: var(--header-bg);
  box-shadow: 0 1px 0 var(--border), 0 10px 30px -24px rgba(0, 0, 0, .8);
}
@supports (backdrop-filter: blur(4px)) and (background: color-mix(in srgb, red 50%, transparent)) {
  .site-chrome {
    background: color-mix(in srgb, var(--header-bg) 90%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
  }
}

.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); }
.topbar-links a { font-weight: 600; }

.currency-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--input-bg);
  border: 1px solid var(--border);
}
.theme-toggle { border: 1px solid var(--border); background: var(--input-bg); }
.theme-toggle:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Arama — sitenin ana keşif aracı */
.search-box input {
  border-radius: var(--radius);
  background: var(--input-bg);
  border: 1px solid var(--border);
}
.search-box input:hover { border-color: var(--border-strong); }
.search-box input:focus {
  background: var(--bg);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.cart-btn {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  transition: background .16s, color .16s, border-color .16s, transform .16s var(--ease);
}
.cart-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }
.cart-count { background: var(--danger); border-color: var(--header-bg); font-weight: 800; }

.account-link { padding: 7px 12px; border-radius: var(--radius-sm); transition: background .15s; }
.account-link:hover { background: var(--input-bg); }

.user-avatar { border-radius: var(--radius-sm); box-shadow: var(--glow); }
.user-dropdown { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* Ana menü — aktif öğe akım çizgisiyle işaretlenir (imza) */
.mainnav { border-bottom: none; }
.mainnav a {
  position: relative;
  font-weight: 650;
  color: var(--text-muted);
  border-radius: var(--radius-xs);
}
/* background-color kullanılıyor: .nav-rainbow bağlantıları metnini
   background-image + background-clip:text ile boyuyor, kısayol
   `background` o gradyanı siler ve yazı görünmez olur. */
.mainnav a:hover { color: var(--text); background-color: var(--input-bg); }
.mainnav a.active { color: var(--text); background-color: transparent; }
.mainnav a.active::after {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--charge);
  border-radius: 2px;
}

/* Mobil çekmece */
.m-nav { border-right: 1px solid var(--border); }
.mn-user, .mn-act, .mn-all, .mn-search { border-radius: var(--radius-sm); }
.mn-game-ico { border-radius: var(--radius-xs); }

/* ------------------------------------------------------------
   5. BÖLÜM BAŞLIKLARI
   ------------------------------------------------------------ */
.section-center-title .underline { background: var(--charge); }
.row-head .rh-bar {
  background: linear-gradient(180deg, var(--rh-game, var(--primary)), transparent 140%);
}
.row-head h3 { font-weight: 800; letter-spacing: -.03em; }
.row-head .rh-sub { font-weight: 500; }
.row-arrows button {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background .15s, border-color .15s, color .15s;
}
.row-arrows button:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------ */
.slider { background: var(--card-2); }
.slider-arrow {
  background: rgba(8, 12, 21, .45);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .18s, border-color .18s, transform .18s var(--ease);
}
.slider-arrow:hover { background: var(--primary); border-color: var(--primary); }
.slider-dots button { background: rgba(255, 255, 255, .38); }
.slider-dots button.active { background: #fff; }
.slide-content .badge-line { border-radius: var(--radius-pill); letter-spacing: .12em; box-shadow: var(--glow); }
.slide-content h2 { letter-spacing: -.035em; }

/* ------------------------------------------------------------
   7. GÜVENCE ŞERİDİ
   ------------------------------------------------------------ */
.hd-trust-ic { border-radius: var(--radius-sm); transition: transform .2s var(--ease); }

/* ------------------------------------------------------------
   8. OYUN KARTLARI
   ------------------------------------------------------------ */
.game-card .gc-bg-img { transition: transform .5s var(--ease); }

/* ------------------------------------------------------------
   9. ÜRÜN KARTI
   ------------------------------------------------------------ */
.product-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--card), var(--card-2));
  box-shadow: var(--shadow);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .18s;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--primary-rgb), .55);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--primary-rgb), .35), var(--glow);
}
/* Görselin altına yumuşak koyu geçiş: başlık satırından net ayrılsın */
.product-thumb::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(transparent, rgba(4, 7, 14, .38));
  pointer-events: none; z-index: 2;
}
.product-card:hover .product-thumb img { transform: scale(1.07); }

.card-overlay { background: rgba(6, 10, 18, .58); }
.card-add-btn {
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  box-shadow: 0 10px 26px -8px rgba(var(--primary-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.card-add-mobile {
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  padding: 11px;
}

.flag-badge { width: 26px; height: 26px; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }

/* İndirim rozeti — yalnızca old_price > price olan üründe basılır */
.tp-save {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #f43f5e, #d81b48);
  color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px -6px rgba(225, 29, 72, .8);
  pointer-events: none;
}

.product-info { text-align: left; }
.product-name {
  font-weight: 650;
  text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-price-line { justify-content: flex-start; }
.product-price { font-weight: 800; letter-spacing: -.03em; color: var(--text); }

/* Ürün rayı — sağ kenarda solma, kesilen kart kasıtlı dursun */
.product-row::after {
  content: "";
  position: absolute; top: 0; bottom: 6px; right: -1px; width: 64px;
  background: linear-gradient(270deg, var(--bg-soft) 34%, transparent);
  pointer-events: none; z-index: 2;
}
.month-special-sec .product-row::after { display: none; }

/* ------------------------------------------------------------
   9b. SATIN ALMA MODALI
   .bm-prow{display:flex} yazar stili olduğu için `hidden`
   özniteliğini eziyordu: indirimsiz üründe boş bir "Orijinal"
   satırı kalıyordu.
   ------------------------------------------------------------ */
.bm-prow[hidden] { display: none !important; }
.bm-save { color: var(--ok) !important; font-weight: 800; }
html[data-theme="dark"] .bm-save { color: #4ade80 !important; }

/* ------------------------------------------------------------
   10. SOSYAL TAKİP ŞERİDİ
   Eski turuncu→mor gradyan marka mavisiyle çakışıyordu. Şerit
   artık koyu bir panel; Instagram gradyanı yalnızca ikon
   karosunda kalıyor (marka doğru, gürültü yok).
   ------------------------------------------------------------ */
.social-follow-banner {
  border-radius: var(--radius-lg);
  background: linear-gradient(115deg, var(--card), var(--card-2) 55%, var(--card));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.social-follow-banner:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--primary-rgb), .45);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--primary-rgb), .3);
}
.sfb-ic {
  border-radius: var(--radius);
  background: linear-gradient(140deg, #f9ce34, #ee2a7b 48%, #6228d7);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(238, 42, 123, .7);
}
.sfb-text b { letter-spacing: -.02em; }
.sfb-text small { color: var(--text-muted); opacity: 1; }
.sfb-btn {
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  color: #fff;
  box-shadow: var(--glow);
  transition: transform .16s var(--ease);
}
.social-follow-banner:hover .sfb-btn { transform: translateX(3px); }

/* ------------------------------------------------------------
   11. OYUNCU YORUMLARI
   ------------------------------------------------------------ */
.rv-score { border-radius: var(--radius-sm); }
.rv-card {
  border-radius: var(--radius);
  border-left-width: 1px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  position: relative;
  overflow: hidden;
}
.rv-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--primary), transparent 90%);
}
.rv-av { border-radius: var(--radius-xs); }

/* ------------------------------------------------------------
   12. YAYINCILAR
   ------------------------------------------------------------ */
.publisher-card { border-radius: var(--radius); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.publisher-card:hover { box-shadow: var(--shadow-lg); }
.publisher-card .pc-avatar { border-radius: var(--radius); }
.publisher-card .pc-badge { border-radius: var(--radius-pill); padding: 3px 8px; font-weight: 800; }

/* ------------------------------------------------------------
   13. SEO METNİ — sessiz, tipografik
   ------------------------------------------------------------ */
.seo-section { border-radius: var(--radius-lg); background: var(--card-2); }
.seo-section h2 { letter-spacing: -.03em; }
.seo-section h3 { letter-spacing: -.02em; }
.seo-section p, .seo-section ol { line-height: 1.75; }

/* ------------------------------------------------------------
   14. AYIN ÖZELİ PANELİ
   ------------------------------------------------------------ */
.ms-panel { border-radius: var(--radius-xl); }

/* ------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------ */
.footer { background: var(--card-2); position: relative; }
.footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--charge);
  opacity: .45;
}
.footer-socials a { transition: background .16s, color .16s, border-color .16s, transform .16s var(--ease); }
.footer-socials a:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------
   16. FORMLAR, UYARILAR
   ------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="date"], select, textarea {
  border-radius: var(--radius-sm);
}
.alert { border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; }
.alert-success { background: var(--ok-soft); border-color: rgba(22, 163, 74, .3); color: var(--ok); }
.alert-error { background: var(--danger-soft); border-color: rgba(225, 29, 72, .3); color: var(--danger); }
html[data-theme="dark"] .alert-success { color: #4ade80; }
html[data-theme="dark"] .alert-error { color: #fb7185; }

/* ============================================================
   17. MASAÜSTÜ / TABLET (≥ 821px)
   style.css bu seçicileri max-width:820 (ve altı) kırılımında
   da tanımlıyor; ölçü değişiklikleri bu yüzden burada.
   ============================================================ */
@media (min-width: 821px) {
  .section { padding: 34px 0; }

  .section-center-title { margin-bottom: 24px; }
  .section-center-title h2 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
  .section-center-title .underline { width: 84px; height: 3px; margin-top: 12px; border-radius: 3px; }

  .row-head { margin-bottom: 16px; }
  .row-head .rh-bar { width: 4px; height: 34px; }
  .row-head h3 { font-size: 19.5px; }
  .row-arrows button { width: 36px; height: 36px; border-radius: var(--radius-xs); font-size: 14px; }

  .header-desk { height: 82px; }
  .search-box input { height: 46px; font-size: 14px; }
  .cart-btn { width: 46px; height: 46px; }
  .theme-toggle { width: 32px; height: 32px; }
  .topbar { font-size: 12.5px; }
  .topbar .container { height: 40px; }
  .topbar-links { gap: 20px; }
  .mainnav .container { min-height: 54px; }
  .mainnav a { padding: 9px 9px; font-size: 13.5px; }
  .mainnav .container > a:first-child { padding-left: 2px; }
  .mainnav .container > a:last-child { padding-right: 2px; }

  .slider { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); }
  html[data-theme="dark"] .hero-bg { opacity: .28; }
  .slider-arrow { width: 42px; height: 42px; }
  .slider-arrow.prev { left: 16px; }
  .slider-arrow.next { right: 16px; }
  .slider-arrow.prev:hover { transform: translateY(-50%) translateX(-2px); }
  .slider-arrow.next:hover { transform: translateY(-50%) translateX(2px); }
  .slider-dots { bottom: 16px; gap: 8px; }
  .slider-dots button { height: 4px; width: 18px; border-radius: 3px; }
  .slider-dots button.active { width: 34px; }
  .slide-content .badge-line { font-size: 11.5px; padding: 7px 15px; }

  .hd-trust { border-radius: var(--radius-lg); }
  .hd-trust li { padding: 15px 18px; transition: background .18s; }
  .hd-trust li:hover { background: rgba(var(--primary-rgb), .05); }
  .hd-trust li:hover .hd-trust-ic { transform: translateY(-2px); }
  .hd-trust-ic { width: 40px; height: 40px; }

  .games-grid { gap: 18px; }
  .game-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s;
  }
  .game-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--primary-rgb), .5);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--primary-rgb), .35), var(--glow);
  }
  .game-card:hover .gc-bg-img { transform: scale(1.06); }
  .game-card .gc-grad { background: linear-gradient(transparent 34%, rgba(4, 7, 14, .55) 62%, rgba(4, 7, 14, .94)); }
  .game-card .gc-title {
    padding: 14px 15px 15px;
    font-size: 15px;
    letter-spacing: -.02em;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .game-card .gc-title::after {
    content: "\f054"; /* chevron-right */
    font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px;
    width: 22px; height: 22px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    opacity: 0; transform: translateX(-4px);
    transition: opacity .22s, transform .22s var(--ease);
  }
  .game-card:hover .gc-title::after { opacity: 1; transform: translateX(0); }

  .product-scroll { gap: 14px; padding-bottom: 6px; }
  .product-card { width: 212px; }
  .product-info { padding: 12px 13px 14px; gap: 8px; }
  .product-name { font-size: 13.5px; line-height: 1.35; min-height: 37px; }
  .product-price { font-size: 17.5px; }
  .product-old-price { font-size: 12.5px; }

  .social-follow-banner { padding: 20px 26px; }
  .sfb-ic { width: 50px; height: 50px; }
  .sfb-text b { font-size: 17px; }
  .sfb-btn { padding: 11px 20px; }

  .rv-card { padding: 15px 16px 13px; }

  .seo-section { padding: 30px 32px; }
  .seo-section h2 { font-size: 21px; margin-bottom: 14px; }
  .seo-section h3 { font-size: 16px; margin: 18px 0 10px; }
  .seo-section p, .seo-section ol { font-size: 14px; }

  .footer-socials a { border-radius: var(--radius-sm); }
}

/* Tablette ana menü yatay kayıyor; sağ kenarda "devamı var" işareti */
@media (min-width: 821px) and (max-width: 1099px) {
  .mainnav { position: relative; }
  .mainnav::after {
    content: "";
    position: absolute; right: 0; top: 1px; bottom: 0; width: 44px;
    background: linear-gradient(270deg, var(--header-bg) 30%, transparent);
    pointer-events: none;
  }
}

/* Az sayıda oyun varken 6 sabit sütun sağda boşluk bırakıyordu */
@media (min-width: 1101px) {
  .games-grid {
    grid-template-columns: repeat(auto-fit, minmax(168px, 216px));
    justify-content: center;
  }
  .publishers-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ============================================================
   18. MOBİL (≤ 820px)
   ============================================================ */
@media (max-width: 820px) {
  /* 4 oyun varken 3 sütun tek başına kalan bir kart bırakıyor;
     tam sayıda satır oluşacaksa 2 sütuna düş. */
  .games-grid:has(> :last-child:nth-child(2)),
  .games-grid:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }

  .product-card { border-radius: 13px; }
  .product-card:hover { transform: none; box-shadow: var(--shadow); }
  .product-info { text-align: left; }
  .product-name { text-align: left; }
  .product-price-line { justify-content: flex-start; }
  .tp-save { top: 7px; right: 7px; font-size: 10.5px; padding: 3px 7px; }
  .flag-badge { width: 22px; height: 22px; top: 7px; left: 7px; }

  /* Hero mobilde 140/120px sabit yüksekliğe sıkışıyordu (taban CSS
     aspect-ratio'yu kapatıyor). Masaüstü oranı geri açıldı; yalnızca
     dar telefonlarda okunurluk için bir taban yükseklik var.
     740px'den itibaren kutu masaüstüyle birebir aynı orana oturuyor. */
  .slider {
    height: auto;
    aspect-ratio: 1440 / 400;
    min-height: 178px;
    max-height: none;
  }

  /* Slider builder — mobilde masaüstü kompozisyonunun ölçeklenmiş hâli.
     Taban CSS burada sabit px kullanıyordu (18/12/9); kutu büyüyünce
     yazı kutuya göre küçük kalıp dengeyi bozuyordu. Ölçüler artık
     slide genişliğine bağlı (cqw), yani masaüstündeki oranların aynısı.
     Referans: masaüstünde slide ~1236px iken line1 56px = 4.53cqw.
     Mobilde ~1.55x yakınlaştırma; okunurluk için alt/üst sınırlar var. */
  .slide.slide-builder { container-type: inline-size; }
  .slide-builder .sb-inner { padding: 5.5%; }
  .slide-builder .sb-copy { max-width: 68%; gap: .3em; }
  .slide-builder .sb-line1 { font-size: clamp(21px, 7cqw, 34px); }
  .slide-builder .sb-line2 { font-size: clamp(11.5px, 3.5cqw, 17px); }
  /* CTA ve köşe kartları: okunabilir taban punto dar ekranda oransal
     olarak şişiyor (masaüstü %10/%15 → mobilde %25/%36). Dolguyu
     kısarak masaüstündeki "sessiz çip" dengesine yaklaştırılıyor. */
  .slide-builder .sb-cta {
    font-size: clamp(9.5px, 2.4cqw, 13px);
    padding: .45em .95em;
    border-radius: 8px;
  }
  .slide-builder .sb-logo { height: clamp(18px, 4.6cqw, 30px); top: 10%; right: 5%; }
  .slide-builder .sb-cards { right: 4%; bottom: 8%; gap: 6px; }
  .slide-builder .sb-shop-card {
    font-size: clamp(8.5px, 2.2cqw, 12px);
    padding: .5em .8em;
    border-radius: .65em;
    gap: .45em;
  }
  .slide-builder .sb-shop-card i { font-size: .8em; }
  .slide-builder .sb-domain-card { font-size: clamp(8.5px, 2.2cqw, 12px); padding: .45em .85em .45em .65em; }
  .slide-builder .sb-domain-wrap.is-right { right: 4%; bottom: 8%; }

  /* Başlık biraz ferahlasın, dokunma hedefleri büyüsün */
  .m-header { height: 56px; }
  .acc-nav { top: 56px !important; }
  .mh-btn, .mh-theme { width: 38px; height: 38px; border-radius: var(--radius-xs); }
  .mh-left .logo img { height: 27px !important; }
  .card-add-mobile { padding: 12px; font-size: 13.5px; }

  .social-follow-banner { border-radius: var(--radius); }
  .seo-section { border-radius: var(--radius); }
  .rv-card { border-radius: 13px; }
}

/* ============================================================
   19. HAREKET AZALTMA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover,
  .product-card:hover, .game-card:hover,
  .cart-btn:hover, .footer-socials a:hover,
  .social-follow-banner:hover { transform: none; }
  .game-card:hover .gc-bg-img,
  .product-card:hover .product-thumb img { transform: none; }
}

/* ============================================================
   20. LİSTE SATIRLARI — TELEFON (≤ 560px)
   Tek satırda görsel + ad + fiyat + adet + buton sığmıyordu:
   ürün adı 6 satıra kırılıyordu. Satır iki kata ayrılıyor.
   Seçiciler .pgrid varyantıyla eşit özgüllükte yazıldı.
   ============================================================ */
@media (max-width: 560px) {
  .deal-row,
  .pgrid .deal-item .deal-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-areas: "thumb info" "foot foot";
    align-items: center;
    gap: 11px 12px;
    padding: 13px 12px;
  }
  .deal-left,
  .pgrid .deal-item .deal-left { grid-area: thumb; width: 62px; }
  .deal-item .pli-thumb,
  .pgrid .deal-item .pli-thumb { width: 62px; height: 62px; }
  .deal-item .deal-stock-badge,
  .pgrid .deal-item .deal-stock-badge { width: 62px; min-height: 62px; }
  .deal-item .pli-info { grid-area: info; }
  .deal-item .pli-right,
  .pgrid .deal-item .pli-right {
    grid-area: foot;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
  }
  .deal-item .pli-price,
  .pgrid .deal-item .pli-price { text-align: left; margin: 0; }
  .deal-item .pli-price .product-rating,
  .pgrid .deal-item .product-rating { justify-content: flex-start; }

  /* Fırsat olmayan düz liste satırları */
  .product-list-item:not(.deal-item) {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-areas: "thumb info" "foot foot";
    align-items: center;
    gap: 11px 12px;
    padding: 13px 12px;
  }
  .product-list-item:not(.deal-item) > .pli-thumb { grid-area: thumb; width: 62px; height: 62px; }
  .product-list-item:not(.deal-item) > .pli-info { grid-area: info; }
  .product-list-item:not(.deal-item) > .pli-right {
    grid-area: foot;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
  }
  .product-list-item:not(.deal-item) .pli-price { text-align: left; }
  .product-list-item:not(.deal-item) .product-rating { justify-content: flex-start; }
  /* Kart görünümü (.pgrid) dikey kalmaya devam etsin */
  .pgrid .product-list-item:not(.deal-item) { display: flex; }

  .pli-info h4 { font-size: 14.5px; line-height: 1.3; }
  .pli-info .pli-desc { font-size: 12.5px; }
  .pli-price .pli-now { font-size: 17px; }
}

/* ============================================================
   21. FIRSATLAR SAYFASI — HERO
   Eskisi kenarlardan sızan oyun afişi kolajı, ✦ süslü gradyan
   rozet ve başlıktaki logonun tekrarıydı; hiçbiri sayfanın
   içeriğini anlatmıyordu. Yeni hero gerçek veriyi gösteriyor:
   kaç ürün, en yüksek indirim, kaç oyun ve asıl mesele olan
   geri sayım.
   ============================================================ */
.fp-hero {
  position: relative;
  min-height: 0;
  display: block;
  /* Eski kural place-items:center bırakıyordu; justify-items blok
     çocuklara justify-self olarak geçip içeriği daraltıp ortalıyor. */
  place-items: normal;
  overflow: hidden;
  padding: 40px 0 42px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border-bottom: 1px solid var(--border);
}
.fp-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(58% 130% at 8% 0%, rgba(var(--primary-rgb), .18), transparent 62%);
  pointer-events: none;
}
/* İmza: alt kenardaki akım çizgisi */
.fp-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--charge);
  opacity: .7;
  pointer-events: none;
}
.fp-hero-inner {
  position: relative; z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
}

.fp-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--primary);
}
.fp-eyebrow i { font-size: 11px; }

.fp-hero-copy h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.12;
  color: var(--text);
  margin: 13px 0 10px;
}
.fp-hero-copy h1 b { color: var(--primary); font-weight: 800; }
.fp-hero-copy > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14.5px; line-height: 1.6;
  max-width: 44ch;
}
.fp-hero-copy .btn { margin-top: 20px; }

.fp-facts {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.fp-facts li {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.fp-facts b {
  font-size: 16px; font-weight: 800; color: var(--text);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

.fp-countdown {
  justify-self: end;
  padding: 18px 20px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.fp-cd-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.fp-cd-label i { color: var(--primary); }
.fp-cd-clock { display: flex; align-items: flex-start; gap: 8px; }
.fp-cd-unit { display: flex; flex-direction: column; align-items: center; }
.fp-cd-unit b {
  display: block; min-width: 64px;
  padding: 11px 10px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 32px; font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.fp-cd-unit small {
  margin-top: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.fp-cd-sep {
  font-size: 26px; font-weight: 700; line-height: 54px;
  color: var(--text-muted); opacity: .45;
}

@media (max-width: 900px) {
  .fp-hero { min-height: 0; padding: 32px 0 34px; }
  .fp-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .fp-countdown { justify-self: stretch; }
  /* Kart genişleyince rakam kutuları da gereksiz yere uzuyordu */
  .fp-cd-clock { justify-content: center; }
  .fp-cd-unit { flex: 1 1 0; max-width: 132px; }
  .fp-cd-unit b { min-width: 0; width: 100%; }
}
@media (max-width: 640px) {
  .fp-hero { padding: 26px 0 28px; }
  .fp-hero-copy h1 { margin: 11px 0 9px; }
  .fp-hero-copy > p { font-size: 14px; }
  .fp-facts { gap: 8px; margin-top: 16px; }
  .fp-facts li { padding: 7px 12px; font-size: 12.5px; }
  .fp-countdown { padding: 16px 14px 14px; }
  .fp-cd-unit b { font-size: 27px; padding: 10px 6px; }
  .fp-cd-sep { font-size: 22px; line-height: 49px; }
}

/* ============================================================
   22. DÜŞÜK DONANIM — SÜREKLİ ANİMASYON MALİYETİ
   Ölçümde mobilde 13 uzun görev / 1267 ms bulundu. Aşağıdaki üç
   kural oturum boyunca hiç durmuyordu ve en pahalı üçlüydü.
   Masaüstünde görünüm aynen korunuyor; kısıtlama yalnızca
   dar ekran + dokunmatik cihazlarda.
   ============================================================ */

/* 1) Fırsat rozeti: .db-label `width` animasyonu her karede LAYOUT
      tetikliyor ve bir kategori sayfasında 20+ rozet olabiliyor.
      Mobilde genişliği geniş hâlde sabitliyoruz — iki satırlık metin
      çapraz geçişle (opacity) dönmeye devam ediyor, yalnız "nefes alma"
      hareketi kalkıyor. Layout thrash tamamen bitiyor. */
@media (max-width: 820px) {
  .deal-badge .db-label {
    width: var(--db-wb, 11em) !important;
    animation: none !important;
  }
}

/* 2) Logo mjolnir süpürmesi: clip-path + transform, 19 sn sonsuz,
      sayfa başına 3-4 element (header, mobil header, drawer, footer).
      clip-path compose edilemediği için sürekli repaint demek.
      İmza animasyon masaüstünde kalıyor, dokunmatik/dar ekranda kapalı. */
@media (max-width: 900px), (hover: none) {
  .logo .logo-img { animation: none !important; clip-path: none !important; }
  .logo::after { animation: none !important; opacity: 0 !important; }
}

/* 3) Yapışkan başlıktaki backdrop-filter her scroll karesinde yeniden
      hesaplanıyor. Mobilde blur zaten fark edilmiyor; opak zemin. */
@media (max-width: 900px) {
  .site-chrome {
    background: var(--header-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Ana sayfa SEO metnindeki iç bağlantılar gövde metniyle birebir aynı renkteydi
   (--text-muted), tıklanabilir olduğu anlaşılmıyordu. */
.seo-section a {
  color: var(--primary);
  font-weight: 650;
  text-decoration: none;
}
.seo-section a:hover,
.seo-section a:focus-visible { text-decoration: underline; }

/* Açık haldeki sınır 2000px'ti; dar ekranlarda (360px ve altı) metin
   2020px'e çıkıp son satırları kırpılıyordu. Geçiş animasyonu korunsun diye
   "none" yerine daha yüksek bir sınır veriliyor. */
.seo-collapse.open { max-height: 4000px; }


/* ------------------------------------------------------------
   MOBİL ALT ÇUBUK — yüzen kapsül
   ------------------------------------------------------------
   Ekranın altına yapışık, tam genişlikte bir bardı; kenarlardan
   ayrılıp yuvarlak bir kapsüle alındı. Malzeme: düz yarı saydam
   zemin + 1px kenar + içeride tek piksellik üst çizgi. Gradyan yok.

   Performans kuralları:
   - Küçülme/büyüme YALNIZCA transform: scale ile. Genişlik, padding
     veya yükseklik animasyonu yok; böylece düzen (layout) hiç
     yeniden hesaplanmıyor, iş compositor'da kalıyor.
   - backdrop-filter pahalı bir efekt. Yalnızca tarayıcı destekliyorsa
     VE cihaz düşük donanım olarak işaretlenmediyse (html.lp-lite)
     uygulanıyor; aksi halde donuk zemine düşüyor.
   - Hareket azaltma tercihinde geçiş kapatılıyor.
   ------------------------------------------------------------ */
:root { --tabbar-glass: rgba(255, 255, 255, .74); }
html[data-theme="dark"] { --tabbar-glass: rgba(18, 26, 41, .72); }

@media (max-width: 820px) {
  .mobile-bar {
    left: 26px;
    right: 26px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    max-width: 400px;
    /* Destek sekmesi kaldirilinca 4 oge kaliyor; kapsul de daralsin ki
       ogeler gereksiz genislemesin. */
    margin-inline: auto;
    padding: 5px 5px;
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 25px;
    background: var(--card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
    transform-origin: 50% 100%;
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  }
  /* Aşağı kaydırınca küçül, yukarı kaydırınca eski boyuta dön. */
  .mobile-bar.is-min { transform: scale(.88); }

  .mobile-bar a {
    /* Kayan şerit "width: max-content" olduğu için flex öğesinin
       min-content genişliği şeride eşitleniyordu ve Destek sekmesi
       145px'e çıkıp diğerlerini eziyordu. min-width:0 sekmenin
       içeriğinin altına inebilmesini sağlıyor. */
    min-width: 0;
    border-radius: 18px;
    padding: 8px 1px 7px;
    gap: 4px;
    transition: color .18s, background-color .18s;
  }
  .mobile-bar a i { font-size: 16.5px; }
  /* Etkin sekme: iOS'taki gibi arkasında dolu hap. Eski üstteki
     3 piksellik çizgi yüzen kapsülde yersiz kalıyordu. */
  .mobile-bar a.mb-active::before { display: none; }
  .mobile-bar a.mb-active {
    background: rgba(var(--primary-rgb), .15);
    color: var(--primary);
  }
  .mobile-bar a.mb-active i { transform: none; }
  .mobile-bar .mb-badge {
    top: 4px;
    transform: translateX(15px);
    border: 2px solid var(--card);
  }

  /* Kapsül artık yerden yükseldiği için altındaki boşluk ve
     onunla hizalı yüzen öğeler yeniden ayarlandı. */
  body { padding-bottom: 84px; }

  /* Yüzen öğe yığını tek bir dikey ritme oturtuldu. Alttan yukarı:
       kapsül        : 10px
       canlı destek  : 10 + 64 (kapsül) + 12 = 86px
       yukarı çık    : 86 + 52 (düğme) + 12 = 150px
     Önceden "yukarı çık" 42px / sağdan 16px, canlı destek 56px / sağdan 14px
     idi; farklı boyda, farklı hizada ve aralarında hiç boşluk yoktu.
     (Canlı destek düğmesinin boyutu livechat.css'te eşitlendi — o dosya
     en sonda yüklendiği için buradan ezilemiyor.) */
  /* Mobilde yüzen tek öğe bu kaldı; sohbet düğmesi kapsüle taşındığı için
     onun yerine, kapsülün 12px üstüne yerleşiyor. */
  .scroll-top {
    width: 52px;
    height: 52px;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(86px + env(safe-area-inset-bottom));
    font-size: 18px;
  }

  /* Sohbet sekmesindeki okunmamış rozeti. Yüzen düğme gizlendiği için
     okunmamış yanıt bildirimi buraya taşındı; JS yalnızca .on sınıfını
     açıp kapatıyor. */
  .mobile-bar .mb-chat-badge { display: none; }
  .mobile-bar .mb-chat-badge.on { display: grid; }

  /* ---- Sekmedeki kayan "Canlı Destek" yazısı ----
     .mb-mq sabit genişlikte bir pencere, içindeki span kayan şerit.
     Kaydırma mesafesi container query birimiyle hesaplanıyor:
         100cqw - 100%  =  pencere genişliği - yazı genişliği
     Yazı sığıyorsa bu değer pozitif çıkar, min(0px, ...) onu sıfıra
     kırpar ve şerit hiç kıpırdamaz. Yani yalnızca gerçekten taşan
     ekranlarda kayıyor; geniş ekranda kendiliğinden durgun. */
  .mobile-bar .mb-mq {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
  }
  .mobile-bar .mb-mq > span {
    display: inline-block;
    white-space: nowrap;
    animation: mbMarquee 6s ease-in-out infinite;
  }
  /* Düşük donanımda animasyon hiç kurulmuyor: sürekli çalışan bir
     animasyon compositor'ı hiç boşa çıkarmıyor, ucuz telefonlarda
     gereksiz pil yükü. Yazı bir tık küçülüp olduğu gibi sığıyor. */
  html.lp-lite .mobile-bar .mb-mq { font-size: 9px; }
  html.lp-lite .mobile-bar .mb-mq > span { animation: none; }
  .whatsapp-float {
    width: 52px;
    height: 52px;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(86px + env(safe-area-inset-bottom));
    font-size: 24px;
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (max-width: 820px) {
    html:not(.lp-lite) .mobile-bar {
      background: var(--tabbar-glass);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      backdrop-filter: blur(20px) saturate(150%);
    }
  }
}

@keyframes mbMarquee {
  0%, 25%  { transform: translateX(0); }
  55%, 80% { transform: translateX(min(0px, calc(100cqw - 100%))); }
  100%     { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bar { transition: none; }
  .mobile-bar.is-min { transform: none; }
  .mobile-bar .mb-mq { font-size: 9px; }
  .mobile-bar .mb-mq > span { animation: none; }
}

/* Alt çubukta canlı destek sekmesi kaldırıldığında 4 öge kalıyor; kapsül
   daralsın ki ögeler gereksiz yayılmasın (bkz. includes/footer.php). */
@media (max-width: 820px) {
  .mobile-bar.mobile-bar-4 { max-width: 340px; }
}