/* =====================================================================
   Keyzar — app.css  (v3)
   Tek token kaynağı. Renkler, yazı tipleri, yerleşim ölçüleri burada;
   bileşenler bu değişkenleri kullanır.
   Kaynak: Claude Design "Keyzar ana sayfa" kanvası; renkler "Keyzar geliştirici sayfası"
   kanvasındaki A seçeneği (gece mavisi ve kobalt): %60 zemin, %30 kobalt, %10 yeşil.
   ===================================================================== */

:root {
  /* --- Zemin rampası: gece mavisi --- */
  --bg-0:    #0A1222;   /* sayfa */
  --bg-1:    #112452;   /* kart / panel */
  --bg-2:    #183067;   /* yükseltilmiş, hover */
  --bg-3:    #1F3A7A;   /* açılır menü */
  --bg-4:    #27468C;   /* gömülü çip, kbd */
  --bg-bar:  #081020;   /* üst bar, alt bilgi */
  --bg-band: #0F1D44;   /* tam genişlik bant */

  /* --- İkinci renk (%30): kobalt — üst bantlar, paneller, sekmeler, çipler --- */
  --cobalt-300: #8FB0FF;   /* koyu zeminde kobalt metin */
  --cobalt-500: #1E3A8A;   /* ANA: seçili sekme, çip, filtre */
  --cobalt-700: #14286A;   /* üst bant başı */
  --cobalt-800: #0F1C45;   /* üst bant ortası */
  --cobalt-bg:  rgba(30,58,138,0.45);   /* seçili satır, hap */
  --cobalt-line: rgba(120,160,255,0.32);
  --hero-band: linear-gradient(180deg, var(--cobalt-700) 0%, var(--cobalt-800) 55%, var(--bg-0) 100%);
  --accent: var(--cobalt-500);   /* eski şablonların (satıcı, arama) seçili/etkin rengi */

  /* --- Metin rampası --- */
  --fg-0: #E8EEF9;      /* ana metin */
  --fg-1: #C9D3E6;      /* destek */
  --fg-2: #93A1BD;      /* meta */
  --fg-3: #8090B0;      /* ipucu, pasif (panel üstünde 4.5:1) */

  /* --- Çizgiler --- */
  --stroke-1: rgba(120,160,255,0.18);
  --stroke-2: rgba(120,160,255,0.32);

  /* --- Marka yeşili: en ucuz, eylem --- */
  --green-100: #D2FBE2;
  --green-200: #A5F6C5;
  --green-300: #6EEAA1;
  --green-400: #3DDD86;
  --green-500: #22E07A;   /* ANA */
  --green-600: #14B863;
  --green-700: #0E8C4B;
  --green-bg:   rgba(34,224,122,0.10);
  --green-glow: hsl(150 80% 50% / 0.18);
  --green-halo: hsl(150 90% 50% / 0.10);
  --brand:      var(--green-500);
  --on-green:   #062012;   /* yeşil zemin üstü metin */

  /* --- Anlam renkleri --- */
  --amber-500: #FFB224;    /* indirim */
  --amber-ink: #241600;    /* amber zemin üstü metin */
  --amber-bg:  rgba(255,178,36,0.12);
  --amber-glow: hsl(39 100% 57% / 0.18);
  --red-500:   #FF6B6B;    /* stok yok, TR'de çalışmaz */
  --red-bg:    rgba(255,107,107,0.12);
  --red-glow:  hsl(0 100% 65% / 0.16);
  --blue-500:  #5BB8FF;    /* bilgi */
  --blue-glow: hsl(208 100% 65% / 0.16);
  --stroke-green: var(--green-500);

  /* --- Yazı tipleri --- */
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Instrument Sans", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-hero: clamp(40px, 5vw, 64px);
  --text-h1: 40px;  --text-h2: 32px;  --text-h3: 24px;  --text-h4: 20px;
  --text-lg: 18px;  --text-md: 16px;  --text-sm: 14px;  --text-xs: 12px;  --text-2xs: 11px;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;
  --lh-tight: 1.1;  --lh-snug: 1.25; --lh-normal: 1.5;  --lh-loose: 1.7;

  /* --- Boşluk (4px taban) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* --- Yerleşim: üst bar, sayfalar ve alt bilgi aynı kapsayıcıyı kullanır --- */
  --content-max: 1240px;
  --max-w:       var(--content-max);
  --gutter:      16px;
  --col-filter:  280px;

  /* --- Köşe --- */
  --r: 6px;  --rl: 10px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;

  /* --- Gölge --- */
  --shadow-lift:    0 -8px 32px rgba(0,0,0,0.5);
  --shadow-popover: 0 12px 32px rgba(0,0,0,0.55);
  --halo-green:     0 0 0 4px var(--green-halo);
  --halo-amber:     0 0 0 4px var(--amber-glow);

  /* --- Hareket --- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --dur-micro: 120ms; --dur-state: 200ms; --dur-entry: 320ms;

  /* --- İkon --- */
  --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;
}
@media (min-width: 640px)  { :root { --gutter: 20px; } }
@media (min-width: 1024px) { :root { --gutter: 24px; } }


/* =====================================================================
   Temel
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
/* Görsellerin width/height nitelikleri yalnız oran bilgisidir (yüklenmeden yer ayrılır, kayma olmaz); yüksekliği
   CSS'te verilmemiş görsel genişliğinden orantılı yükseklik alır. Sınıf kuralındaki yükseklik bunu ezer. */
img { height: auto; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--green-500); color: var(--bg-0); }


/* =====================================================================
   Sayfa iskeleti: kapsayıcı, üst bar, arama, alt bilgi
   ===================================================================== */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-0); }
.app-main { flex: 1; padding-bottom: 120px; }

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

/* --- Üst bar --- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,16,32,0.9);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--stroke-1);
}
.hdr__inner {
  max-width: var(--content-max); margin: 0 auto; padding: 12px var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr);
  grid-template-areas: "logo search deal"; align-items: center; gap: 12px 24px;
}
.hdr__logo { grid-area: logo; justify-self: start; display: flex; align-items: center; gap: 10px; color: #FFFFFF; }
.hdr__logo:hover { color: #FFFFFF; }
/* Keyonas yatay logo (logo seti svg/keyonas-horizontal-reversed.svg, oran 1159:256): yükseklik verilir, genişlik orandan */
.hdr__brand { display: block; height: 32px; width: auto; flex: 0 0 auto; }
.hdr__search { grid-area: search; position: relative; width: 100%; min-width: 0; }   /* kapsam menüsü ve öneriler buna göre konumlanır */
/* Kategori satırı ve mega menü: assets/nav.css */

/* İndirimdeki Oyunlar: amber yazı, üzerinden soldan sağa geçen ışık (sürekli güncellenen sayfa) */
.hdr__deal { grid-area: deal; justify-self: end; display: inline-flex; align-items: center; height: 40px; padding: 0 12px;
  margin-right: -12px; border-radius: 8px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.hdr__deal:hover { background: rgba(255,178,36,.10); }
.hdr__shine {
  color: #FFB224;
  background: linear-gradient(100deg, #FFB224 0%, #FFB224 42%, #FFF3D6 50%, #FFB224 58%, #FFB224 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: hdr-shine 3.2s linear infinite;
}
.hdr__deal:hover .hdr__shine { animation-play-state: paused; }
@keyframes hdr-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hdr__shine { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}

@media (max-width: 1099px) {
  .hdr__inner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo deal" "search search";
    padding-top: 10px; padding-bottom: 8px; gap: 10px 12px; }
  .hdr .hdr__brand { height: 28px; }
  .hdr__deal { height: 36px; font-size: 14px; }
}

/* --- Arama --- */
.searchbar {
  position: relative; display: flex; align-items: center; height: 44px;
  background: var(--bg-1); border: 1px solid rgba(120,160,255,0.18); border-radius: 8px;
  transition: border-color var(--dur-state), box-shadow var(--dur-state);
}
.searchbar:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-halo); }
.searchbar__scope {
  display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 12px;
  border-right: 1px solid var(--stroke-1); border-radius: 8px 0 0 8px;
  color: var(--fg-1); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.searchbar__scope:hover { color: #FFFFFF; background: var(--bg-2); }
.searchbar__icon { display: flex; align-items: center; padding: 0 4px 0 12px; color: var(--fg-2); flex-shrink: 0; }
.searchbar input {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px 0 6px;
  background: transparent; border: 0; outline: 0;
  color: var(--fg-0); font-family: var(--font-body); font-size: 15px;
}
.searchbar input::placeholder { color: var(--fg-2); }

.scope-menu, .search-drop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--bg-3); border: 1px solid var(--stroke-2); border-radius: 10px;
  box-shadow: var(--shadow-popover);
}
.scope-menu { min-width: 200px; padding: 6px; }
.scope-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 40px;
  padding: 0 12px; border-radius: 6px; text-align: left; color: var(--fg-1); font-size: 14px;
}
.scope-menu__item:hover { background: var(--bg-4); color: #FFFFFF; }
.scope-menu__item.is-active { color: #FFFFFF; font-weight: 600; }
.scope-menu__item.is-active::after {
  content: ""; flex: none; width: 10px; height: 5px; margin: 0 2px 3px 0;
  border-left: 2px solid var(--green-500); border-bottom: 2px solid var(--green-500); transform: rotate(-45deg);
}
.search-drop { right: 0; padding: 6px; max-height: 70vh; overflow-y: auto; }
.sd__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--fg-0); }
.sd__item:hover { background: var(--bg-4); color: var(--fg-0); }
.sd__thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; background: var(--bg-2); flex-shrink: 0; }
.sd__body { flex: 1; min-width: 0; }
.sd__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd__meta { margin-top: 2px; font-size: 12px; color: var(--fg-2); }
.sd__price { font-size: 14px; font-weight: 700; color: var(--green-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd__empty { padding: 18px; text-align: center; color: var(--fg-2); font-size: 14px; }
.sd__all {
  display: block; margin-top: 4px; padding: 10px; text-align: center;
  border-top: 1px solid var(--stroke-1); color: var(--green-500); font-size: 14px; font-weight: 600;
}
.sd__all:hover { background: var(--bg-4); border-radius: 0 0 8px 8px; color: var(--green-500); }

/* --- Alt bilgi --- */
.foot { margin-top: 64px; background: var(--bg-bar); border-top: 1px solid var(--stroke-1); }
.foot__inner {
  max-width: var(--content-max); margin: 0 auto; padding: 40px var(--gutter) 32px;
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px;
}
.foot__brand .hdr__logo { margin-bottom: 14px; }
.foot__brand p { max-width: 360px; font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.foot__col { display: flex; flex-direction: column; gap: 2px; }
.foot__h { margin-bottom: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0; color: #FFFFFF; }
.foot__col a { padding: 5px 0; font-size: 14px; color: var(--fg-1); }
.foot__col a:hover { color: #FFFFFF; }
.foot__bottom {
  max-width: var(--content-max); margin: 0 auto; padding: 16px var(--gutter) 28px;
  border-top: 1px solid var(--stroke-1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  font-size: 13px; color: var(--fg-3);
}
@media (max-width: 760px) {
  .foot__inner { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding-top: 32px; }
  .foot__brand { grid-column: 1 / -1; }
}

/* Masaüstünde görünür, telefonda gizli */
.hide-mobile { display: none; }
@media (min-width: 761px) { .hide-mobile { display: flex; } }


/* =====================================================================
   Bileşenler (v2.1 katmanı)
   ===================================================================== */
/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 14px;font-size:13px;font-weight:600;
  border-radius:var(--r);border:1px solid transparent;
  transition:background .15s,transform .1s;white-space:nowrap;cursor:pointer;
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--green-400);color:var(--on-green);border-color:var(--green-400)}
.btn--primary:hover{background:var(--green-500)}
.btn--ghost{background:var(--bg-2);color:var(--fg-1);border-color:var(--stroke-2)}
.btn--ghost:hover{background:var(--bg-3)}
.btn--lg{padding:9px 18px;font-size:14px}
.btn--sm{padding:4px 10px;font-size:11px}

/* Chips */
.chip{
  display:inline-flex;align-items:center;gap:2px;
  padding:2px 6px;font-size:10px;font-weight:700;letter-spacing:.03em;
  border-radius:3px;background:var(--bg-2);color:var(--fg-2);white-space:nowrap;
}
.chip--amber{background:var(--amber-bg);color:var(--amber-500)}
.chip--green{background:var(--green-bg);color:var(--green-400)}
.chip--red{background:var(--red-bg);color:var(--red-500)}
.eb{
  display:inline-flex;align-items:center;padding:3px 8px;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border-radius:100px;border:1px solid;
}
.eb--deal{background:var(--green-bg);color:var(--green-400);border-color:rgba(34,224,122,.2)}

/* Hero */
.hero{padding:44px var(--gutter) 36px;text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(34,224,122,.05) 0%,transparent 70%);
  pointer-events:none;
}
.hero__inner{max-width:580px;margin:0 auto;position:relative}
.hero__eb{margin-bottom:14px}
.hero__title{
  font-size:clamp(24px,4vw,40px);font-weight:800;letter-spacing:-.03em;
  line-height:1.1;color:var(--fg-0);margin-bottom:11px;
}
.hero__title em{font-style:normal;color:var(--green-400)}
.hero__sub{font-size:14px;color:var(--fg-2);max-width:440px;margin:0 auto 20px;line-height:1.6}
.hero__search{max-width:440px;margin:0 auto 22px}
.hero__search .searchbar{border-radius:var(--rl)}
.hero__search .searchbar input{padding:9px 0;font-size:14px}
.hero__stats{
  display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;font-size:12px;color:var(--fg-2);
}
.hero__stats b{color:var(--fg-0);font-weight:700}

/* Hot Banner */
.hot-banner{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);margin-bottom:4px}
.hot-banner>div{
  display:flex;align-items:center;gap:12px;padding:11px 15px;
  background:rgba(34,224,122,.04);border:1px solid rgba(34,224,122,.12);border-radius:var(--r);
}
.hot-banner__icon{color:var(--green-400);flex-shrink:0}
.hot-banner h4{font-size:12px;font-weight:600;color:var(--fg-1);margin-bottom:2px}
.hot-banner p{font-size:11px;color:var(--fg-2)}

/* Section */
.section{max-width:var(--max-w);margin:0 auto;padding:28px var(--gutter) 0}
.section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section__title{font-size:16px;font-weight:700;color:var(--fg-1)}
.section__more{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:500;color:var(--fg-2);transition:color .15s;
}
.section__more:hover{color:var(--fg-1)}

/* Grid */
.grid{display:grid;gap:10px}
.grid--4{grid-template-columns:repeat(2,1fr)}
.grid--5{grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .grid--5{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:900px){
  .grid--4{grid-template-columns:repeat(4,1fr);gap:12px}
  .grid--5{grid-template-columns:repeat(5,1fr);gap:10px}
}

/* Game Card — 16:9 cover */
.gc{
  display:flex;flex-direction:column;background:var(--bg-1);
  border:1px solid var(--stroke-1);border-radius:var(--r);overflow:hidden;
  cursor:pointer;transition:border-color .18s,transform .18s;
}
.gc:hover{border-color:var(--stroke-2);transform:translateY(-2px)}
.gc__cover{
  position:relative;
  aspect-ratio:16/9;   /* consistent 16:9 everywhere */
  background:var(--bg-2);overflow:hidden;
}
.gc__cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gc:hover .gc__cover img{transform:scale(1.04)}
.gc__discount{
  position:absolute;top:6px;left:6px;
  background:var(--amber-500);color:var(--amber-ink);
  font-size:10px;font-weight:800;padding:2px 5px;border-radius:3px;
}
.gc__tr{
  position:absolute;bottom:6px;left:6px;
  display:inline-flex;align-items:center;gap:3px;
  background:rgba(10,18,34,.8);backdrop-filter:blur(4px);
  color:var(--green-400);font-size:10px;font-weight:600;
  padding:2px 5px;border-radius:3px;
}
.gc__title{
  padding:8px 10px 3px;font-size:12px;font-weight:600;color:var(--fg-1);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px;
}
.gc__price-row{padding:3px 10px 6px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.gc__price{font-size:13px;font-weight:700;color:var(--green-400);font-variant-numeric:tabular-nums}
.gc__strike{font-size:11px;color:var(--fg-3);text-decoration:line-through;font-variant-numeric:tabular-nums}
.gc__store{padding:0 10px 7px;font-size:10px;color:var(--fg-3)}

/* ─── Diğer sayfalar (404, arama) — korundu ─── */
.empty{
  padding:44px 18px;text-align:center;color:var(--fg-3);
  border:1px dashed var(--stroke-1);border-radius:var(--rl);
}
.empty__icon{font-size:28px;margin-bottom:9px}
.empty__title{font-size:14px;font-weight:600;color:var(--fg-2);margin-bottom:6px}
.empty p{font-size:12px;color:var(--fg-3)}
.not-found{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:80px 20px;text-align:center;
}
.not-found__code{font-size:88px;font-weight:900;color:var(--bg-2);line-height:1;letter-spacing:-.04em}
.not-found__msg{font-size:16px;color:var(--fg-2);margin:12px 0 26px}
.search-page{max-width:var(--max-w);margin:0 auto;padding:22px var(--gutter)}
.search-page__head{margin-bottom:18px}
.search-page__title{font-size:18px;font-weight:700;color:var(--fg-1);margin-bottom:3px}
.search-page__meta{font-size:12px;color:var(--fg-2)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--fg-2);flex-wrap:wrap}
.crumbs a{color:var(--fg-2);transition:color .15s}
.crumbs a:hover{color:var(--fg-1)}
.crumbs span{color:var(--fg-1)}

/* =====================================================================
   Tipografi, bağlantı, yardımcılar
   ===================================================================== */
/* ============================================================
   Semantic type
   ============================================================ */
.h-hero, h1.hero {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--text-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
p, .body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
}
.body-strong {
  font-weight: var(--w-medium);
  color: var(--fg-0);
}
.meta, small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-2);
  line-height: var(--lh-snug);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow--hot   { color: var(--amber-500); }
.eyebrow--deal  { color: var(--green-400); }
.eyebrow--info  { color: var(--blue-500); }

/* Price-display utility: large monospace tabular numerals */
.price {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.price--xl { font-size: 40px; line-height: 1; }
.price--lg { font-size: 28px; line-height: 1; }
.price--md { font-size: 18px; line-height: 1; }
.price--sm { font-size: 14px; line-height: 1; }
.price--strike {
  text-decoration: line-through;
  color: var(--fg-2);
  font-weight: var(--w-medium);
}
.price--cheapest { color: var(--green-500); }

/* Mono / tabular numbers anywhere */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Links */
a {
  color: var(--green-400);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--green-300); }

/* Focus ring (keyboard) */
:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Common utilities */
.surface     { background: var(--bg-1); border: 1px solid var(--stroke-1); border-radius: var(--radius-lg); }
.surface-raised { background: var(--bg-2); border: 1px solid var(--stroke-1); border-radius: var(--radius-lg); }
.hairline    { border-top: 1px solid var(--stroke-1); }
.container   { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

/* Scrollbar tame (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }

/* =====================================================================
   Bileşenler (oyun sayfası katmanı): btn, chip, gc, pp, fp, pl, pr, chart, sticky
   ===================================================================== */
/* === Buttons === */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all var(--dur-micro) var(--ease-out); white-space: nowrap; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--green-500); color: var(--on-green); }
.btn--primary:hover { background: var(--green-400); }
.btn--secondary { background: var(--bg-2); color: var(--fg-0); border-color: var(--stroke-2); }
.btn--secondary:hover { background: var(--bg-3); }
.btn--ghost { background: transparent; color: var(--fg-1); border-color: var(--stroke-1); }
.btn--ghost:hover { color: var(--fg-0); border-color: var(--stroke-2); }
.btn--lg { padding: 14px 22px; font-size: 16px; }

/* === Chips === */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-weight: 500; font-size: 12px; border: 1px solid var(--stroke-1); background: var(--bg-2); color: var(--fg-1); cursor: pointer; transition: all var(--dur-micro); }
.chip:hover { background: var(--bg-3); }
.chip.is-active { background: rgba(34,224,122,0.12); border-color: var(--green-500); color: var(--green-300); }
.chip--amber { background: rgba(255,178,36,0.12); border-color: var(--amber-500); color: var(--amber-500); font-family: var(--font-mono); font-weight: 700; }
.chip--red { background: rgba(255,107,107,0.10); border-color: var(--red-500); color: var(--red-500); }
.chip--blue { background: rgba(91,184,255,0.10); border-color: var(--blue-500); color: var(--blue-500); }

/* === Eyebrow === */
.eb { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.eb--deal { color: var(--green-400); }
.eb--hot { color: var(--amber-500); }
.eb--info { color: var(--blue-500); }

/* === Hero === */
.hero { position: relative; padding: 80px var(--gutter) 56px; max-width: var(--content-max); margin: 0 auto; overflow: hidden; }
.hero::before { content: ""; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; background: radial-gradient(circle at center, var(--green-glow), transparent 60%); pointer-events: none; z-index: 0; }
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.hero__eb { display: inline-flex; align-items: center; gap: 6px; }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.05; letter-spacing: -0.025em; color: var(--fg-0); max-width: 900px; }
.hero__title em { color: var(--green-500); font-style: normal; }
.hero__sub { color: var(--fg-1); font-size: 18px; line-height: 1.5; max-width: 560px; }
.hero__search { width: 100%; max-width: 640px; }
.hero__search .searchbar input { height: 56px; font-size: 16px; padding-left: 50px; }
.hero__search .searchbar__icon { left: 18px; }
.hero__stats { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; margin-top: 16px; color: var(--fg-2); font-size: 13px; }
.hero__stats b { color: var(--green-400); font-family: var(--font-mono); font-weight: 700; font-size: 16px; display: block; }

/* === Section === */
.section { max-width: var(--content-max); margin: 0 auto; padding: 32px var(--gutter); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.section__title { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--fg-0); margin: 0; letter-spacing: -0.01em; }
.section__more { color: var(--fg-1); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.section__more:hover { color: var(--green-400); }

/* === Game grid === */
.grid { display: grid; gap: 16px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .grid--4, .grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .grid--4, .grid--5, .grid--3 { grid-template-columns: repeat(2, 1fr); } }

.gc { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.gc__cover { position: relative; aspect-ratio: 16/9; background: var(--bg-1); border-radius: 12px; overflow: hidden; border: 1px solid var(--stroke-1); transition: all var(--dur-state); }
.gc:hover .gc__cover { border-color: var(--stroke-2); transform: translateY(-2px); }
.gc__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc__discount { position: absolute; top: 10px; left: 10px; background: var(--amber-500); color: var(--amber-ink); font-family: var(--font-mono); font-weight: 800; font-size: 12px; padding: 4px 8px; border-radius: 6px; }
.gc__tr { position: absolute; bottom: 10px; left: 10px; background: rgba(10,18,34,0.85); backdrop-filter: blur(8px); display: inline-flex; align-items: center; gap: 4px; color: var(--green-300); font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(34,224,122,0.3); }
.gc__title { font-size: 14px; font-weight: 600; color: var(--fg-0); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc__price-row { display: flex; align-items: baseline; gap: 8px; }
.gc__price { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--green-400); font-variant-numeric: tabular-nums; }
.gc__strike { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); text-decoration: line-through; }
.gc__store { font-size: 11px; color: var(--fg-2); display: flex; align-items: center; gap: 6px; }

/* === Product page === */
.pp { max-width: var(--content-max); margin: 0 auto; padding: 24px var(--gutter); }
.pp__crumbs { display: flex; gap: 6px; color: var(--fg-2); font-size: 13px; margin-bottom: 16px; }
.pp__crumbs a:hover { color: var(--fg-1); }
.pp__crumbs span { color: var(--fg-3); }

.pp-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 960px) { .pp-hero { grid-template-columns: 1fr; } }
.pp-hero__cover { position: relative; aspect-ratio: 16/9; background: var(--bg-1); border: 1px solid var(--stroke-1); border-radius: 14px; overflow: hidden; }
.pp-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-hero__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,18,34,0.4) 0%, transparent 50%); pointer-events: none; }
.pp-hero__media { display: flex; flex-direction: column; gap: 8px; }
.pp-hero__thumbs { display: flex; gap: 8px; }
.pp-hero__thumb { flex: 1; aspect-ratio: 16/9; background: var(--bg-1); border-radius: 8px; overflow: hidden; opacity: 0.6; cursor: pointer; transition: opacity var(--dur-micro); border: 1px solid var(--stroke-1); }
.pp-hero__thumb:hover { opacity: 1; }
.pp-hero__thumb.is-active { opacity: 1; border-color: var(--green-500); }
.pp-hero__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pp-hero__info { display: flex; flex-direction: column; gap: 14px; }
.pp-hero__pubs { display: flex; gap: 12px; color: var(--fg-2); font-size: 13px; }
.pp-hero__title { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; color: var(--fg-0); margin: 0; }
.pp-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pp-hero__tags .chip { font-size: 11px; padding: 4px 8px; }
.pp-hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--stroke-1); border-radius: 12px; }
.pp-fact { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-1); }
.pp-fact svg { flex: 0 0 auto; }
.pp-fact b { color: var(--fg-0); font-weight: 600; }

.pp-cta { background: var(--bg-1); border: 1px solid var(--green-500); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--halo-green); position: relative; overflow: hidden; }
.pp-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(34,224,122,0.08), transparent 60%); pointer-events: none; }
.pp-cta__info { flex: 1; position: relative; display: flex; flex-direction: column; gap: 2px; }
.pp-cta__price { display: flex; align-items: baseline; gap: 10px; }
.pp-cta__price .price--xl { font-size: 36px; }
.pp-cta__btn { position: relative; }

/* === Two column below fold === */
.pp-cols { display: grid; grid-template-columns: var(--col-filter) 1fr; gap: 24px; margin-top: 32px; }
@media (max-width: 900px) { .pp-cols { grid-template-columns: 1fr; } }

/* === Filter panel === */
.fp { background: var(--bg-1); border: 1px solid var(--stroke-1); border-radius: 14px; padding: 18px; height: fit-content; position: sticky; top: 80px; }
.fp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fp__head h3 { font-size: 14px; font-weight: 600; color: var(--fg-0); margin: 0; }
.fp__clear { color: var(--fg-2); font-size: 12px; cursor: pointer; }
.fp__clear:hover { color: var(--green-400); }
.fp__group { padding: 14px 0; border-top: 1px solid var(--stroke-1); }
.fp__group:first-of-type { border-top: none; padding-top: 0; }
.fp__label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 10px; }
.fp__row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; cursor: pointer; color: var(--fg-1); font-size: 13px; transition: color var(--dur-micro); }
.fp__row:hover { color: var(--fg-0); }
.fp__row .count { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; }
.fp__row.is-active { color: var(--green-300); }
.fp__row label { display: flex; align-items: center; gap: 9px; cursor: pointer; flex: 1; }
.cbox { width: 18px; height: 18px; border: 1.5px solid var(--stroke-2); border-radius: 5px; background: var(--bg-2); display: inline-flex; align-items: center; justify-content: center; color: var(--on-green); flex: 0 0 auto; transition: all var(--dur-micro); }
.cbox.is-on { background: var(--green-500); border-color: var(--green-500); }
.fp__range { display: flex; gap: 8px; }
.fp__range input { width: 100%; background: var(--bg-2); border: 1px solid var(--stroke-1); border-radius: 8px; padding: 8px 10px; color: var(--fg-0); font-family: var(--font-mono); font-size: 13px; outline: none; }

/* === Price list === */
.pl { display: flex; flex-direction: column; gap: 10px; }
.pl__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 4px; flex-wrap: wrap; }
.pl__count { color: var(--fg-1); font-size: 14px; }
.pl__count b { color: var(--fg-0); }
.pl__sort { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 13px; }
.pl__sort select { background: var(--bg-2); border: 1px solid var(--stroke-1); border-radius: 8px; padding: 7px 10px; color: var(--fg-0); font-family: var(--font-body); font-size: 13px; cursor: pointer; outline: none; }

.pr { display: grid; grid-template-columns: 120px 1fr 140px 110px auto auto; gap: 14px; align-items: center; padding: 14px 18px; background: var(--bg-1); border: 1px solid var(--stroke-1); border-radius: 14px; cursor: pointer; transition: all var(--dur-micro); position: relative; }
.pr:hover { background: var(--bg-2); border-color: var(--stroke-2); }
.pr--cheapest { background: linear-gradient(90deg, rgba(34,224,122,0.07), transparent 65%), var(--bg-1); border-color: var(--green-500); box-shadow: var(--halo-green); }
.pr--cheapest::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; background: var(--green-500); border-radius: 0 3px 3px 0; }
.pr--cheapest:hover { background: linear-gradient(90deg, rgba(34,224,122,0.10), transparent 65%), var(--bg-2); }
.pr__store img { display: block; width: 100%; height: auto; max-height: 36px; border-radius: 6px; }
.pr__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr__name .eb { font-size: 10px; }
.pr__title { color: var(--fg-0); font-weight: 600; font-size: 14px; line-height: 1.3; }
.pr__meta { color: var(--fg-2); font-size: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr__meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--fg-3); display: inline-block; }
.pr__tr { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pr__tr--yes { color: var(--green-400); }
.pr__tr--no { color: var(--red-500); }
.pr__price { text-align: right; }
.pr__strike { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-decoration: line-through; }
.pr__btn { background: transparent; border: 1px solid var(--stroke-2); border-radius: 8px; padding: 7px 10px; color: var(--fg-1); cursor: pointer; }
.pr__btn:hover { background: var(--bg-3); color: var(--fg-0); }
.pr--cheapest .pr__btn { background: var(--green-500); color: var(--on-green); border-color: var(--green-500); font-weight: 700; font-family: var(--font-body); font-size: 13px; padding: 8px 14px; }
.pr--cheapest .pr__btn:hover { background: var(--green-400); }
@media (max-width: 760px) { .pr { grid-template-columns: 80px 1fr auto; gap: 10px; padding: 12px; } .pr__tr, .pr__btn { display: none; } }

/* === Price history chart === */
.chart-wrap { background: var(--bg-1); border: 1px solid var(--stroke-1); border-radius: 14px; padding: 22px 24px; margin-top: 32px; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.chart-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--fg-0); margin: 0 0 4px; }
.chart-head .meta { color: var(--fg-2); font-size: 13px; }
.chart-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.chart-stat { padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--stroke-1); border-radius: 10px; min-width: 130px; }
.chart-stat__label { font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 4px; }
.chart-stat__value { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.chart-stat--low .chart-stat__value { color: var(--green-400); }
.chart-stat--high .chart-stat__value { color: var(--red-500); }
.chart-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-2); border: 1px solid var(--stroke-1); border-radius: 10px; }
.chart-tab { padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--fg-2); border: none; background: transparent; border-radius: 7px; cursor: pointer; font-family: var(--font-body); }
.chart-tab.is-active { background: var(--bg-4); color: var(--fg-0); }
.chart-svg { width: 100%; height: 280px; display: block; }
.chart-legend { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fg-2); }
.chart-legend .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* === Related rail === */
.related { margin-top: 32px; }

/* === Sticky bar === */
.sticky-bar {
  position: fixed; bottom: 24px; left: 24px; right: 24px; z-index: 60;
  max-width: 1232px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px;
  background: rgba(10,18,34,0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--stroke-2);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-lift);
  transform: translateY(0);
  transition: transform var(--dur-entry) var(--ease-out);
}
.sb-cover { width: 64px; height: 36px; border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.sb-cover img { width: 100%; height: 100%; object-fit: cover; }
.sb-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-name { font-weight: 600; color: var(--fg-0); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-meta { font-size: 11px; color: var(--fg-2); }
.sb-price { color: var(--green-400); font-family: var(--font-mono); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.sb-cta { background: var(--green-500); color: var(--on-green); font-weight: 700; font-size: 14px; padding: 10px 16px; border: none; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sb-cta:hover { background: var(--green-400); }
@media (max-width: 700px) {
  .sticky-bar { left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; max-width: none; padding: 10px 14px; }
  .sb-meta { display: none; }
  .sb-cta span { display: none; }
}


/* === Hot deal banner === */
.hot-banner { background: linear-gradient(90deg, rgba(255,178,36,0.12), transparent), var(--bg-1); border: 1px solid var(--stroke-1); border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.hot-banner__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,178,36,0.15); color: var(--amber-500); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hot-banner h4 { color: var(--fg-0); font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.hot-banner p { color: var(--fg-2); font-size: 13px; margin: 0; }
.hot-banner__time { font-family: var(--font-mono); color: var(--amber-500); font-weight: 700; font-size: 14px; }

/* =====================================================================
   Oyun sayfasına özel (galeri, kz-pr satırı, sistem gereksinimi, hltb)
   ===================================================================== */
/* ════ 3. GAME SAYFASI ÖZEL (galeri rail, thumb, kz-pr grid, sysreq, hltb) ════ */

  body { background: var(--bg-0); }
  .kz-main { padding-bottom: 132px; }
  .kz-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: rgba(10,18,34,0.72); backdrop-filter: blur(8px); border: 1px solid var(--stroke-2); color: var(--fg-0); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro); }
  .kz-arrow:hover { background: var(--bg-3); border-color: var(--green-500); }
  /* above-fold media: cover keeps true 16:9 (no crop); thumbs sit in a usable horizontal rail */
  .pp-hero__media { min-width: 0; }
  .pp-hero__media .pp-hero__cover { flex: 1 1 auto; min-height: 200px; }
  .pp-hero__media .pp-hero__cover img { object-fit: contain; background: var(--bg-0); }
  /* single horizontal thumbnail row at natural height, ~3 visible, scrolls horizontally on overflow */
  .kz-thumb-rail { display: flex; gap: 8px; position: relative; flex: 0 0 auto; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .kz-thumb-rail .pp-hero__thumb { flex: 0 0 calc((100% - 16px) / 3); height: auto; aspect-ratio: 16 / 9; scroll-snap-align: start; opacity: 1; border: none; }
  .kz-thumb-rail .pp-hero__thumb img { object-fit: cover; }
  .kz-thumb-rail::-webkit-scrollbar { height: 7px; }

  /* equalize hero columns: media stretches to the (compressed) info column; thumbs stay fixed-size, centered */
  .pp-hero { align-items: stretch; }
  .pp-hero__media { display: flex; flex-direction: column; min-width: 0; }
  .pp-hero__info { gap: 9px; min-width: 0; }
  .pp-hero__info .pp-hero__tags { margin: 0; }
  .pp-hero__info .pp-cta { padding: 14px 16px; margin-top: auto; }
  @media (max-width: 820px){ .pp-hero { grid-template-columns: 1fr !important; } }

  /* ===== Price row (redesigned) ===== */
  .kz-pr { display: grid; grid-template-columns: 104px minmax(0,1fr) 112px 144px 116px; grid-template-areas: "logo name tr price cta"; gap: 18px; align-items: center; padding: 16px 20px; background: var(--bg-1); border: 1px solid var(--stroke-1); border-radius: 14px; position: relative; transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro); }
  .kz-pr:hover { background: var(--bg-2); border-color: var(--stroke-2); }
  .kz-pr--top { background: linear-gradient(90deg, rgba(34,224,122,0.08), transparent 60%), var(--bg-1); border-color: var(--green-500); box-shadow: var(--halo-green); }
  .kz-pr--top::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; background: var(--green-500); border-radius: 0 3px 3px 0; }
  .kz-pr__logo { grid-area: logo; display: flex; align-items: center; height: 34px; }
  .kz-pr__logo img { max-width: 100%; max-height: 30px; width: auto; height: auto; border-radius: 6px; display: block; }
  .kz-pr__name { grid-area: name; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .kz-pr__eb { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-400); display: inline-flex; align-items: center; gap: 5px; }
  .kz-pr__title { color: var(--fg-0); font-weight: 600; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kz-pr__meta { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--fg-1); }
  .kz-pr__meta .sep { color: var(--fg-3); }
  .kz-pr__sub { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--fg-2); }
  .kz-pr__sub .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--fg-3); display: inline-block; }
  .kz-pr__tr { grid-area: tr; display: flex; }
  .kz-pr__badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
  .kz-pr__badge--yes { color: var(--green-300); background: rgba(34,224,122,0.10); border: 1px solid rgba(34,224,122,0.28); }
  .kz-pr__badge--no { color: var(--red-500); background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.25); }
  .kz-pr__price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  .kz-pr__price-top { display: flex; align-items: center; gap: 8px; min-height: 15px; }
  .kz-pr__strike { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); text-decoration: line-through; }
  .kz-pr__disc { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--amber-500); }
  .kz-pr__big { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 21px; line-height: 1; color: var(--fg-0); }
  .kz-pr--top .kz-pr__big { color: var(--green-500); }
  .kz-pr__cta { grid-area: cta; }
  .kz-pr__cta .btn { width: 100%; justify-content: center; }
  @media (max-width: 1100px){
    .kz-pr {
      grid-template-columns: 40px 1fr auto;
      grid-template-areas:
        "logo name price"
        "logo tr   cta";
      row-gap: 8px;
    }
    .kz-pr__tr  { grid-area: tr; justify-self: start; align-self: center; }
    .kz-pr__cta { grid-area: cta; align-self: center; justify-self: end; }
  }
  .kz-sysreq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 760px){ .kz-sysreq { grid-template-columns: 1fr; } }
  .kz-hltb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  @media (max-width: 760px){ .kz-hltb { grid-template-columns: repeat(2, 1fr); } }
  .kz-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  @media (max-width: 880px){ .kz-cols2 { grid-template-columns: 1fr; } }
  .kz-desc-fade { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
  .kz-tab-line { display: inline-flex; gap: 4px; flex-wrap: wrap; }

  /* Teslim şekli etiketi (Key / Hesap / Hediye / Resmi mağaza) ve açıklaması */
  .kz-dlv { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 600; line-height: 1.5; background: var(--bg-3); color: var(--fg-1); white-space: nowrap; }
  .kz-dlv--account { background: var(--amber-bg); color: var(--amber-500); }
  .kz-dlv--gift { background: rgba(91,184,255,0.12); color: var(--blue-500); }
  .kz-dlv--topup { background: rgba(176,140,255,0.13); color: #C4B0FF; }
  .kz-dlv--store { background: var(--green-bg); color: var(--green-400); }
  .kz-pr__note { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
  .kz-pr__eb--type { color: var(--fg-1); }

/* ── Mağaza logosu (partials/store_logo.twig) ─────────────────────────────────
   Kutu: --slogo-h yüksekliğinde, 2.2 katı genişlikte; logo kutuda sola dayalı.
   Logo yüksekliği = --slogo-h × --k (k: en-boy oranına göre alan eşitleme, makroda).
   Kapsayıcı yalnız --slogo-h verir; böylece her yerde aynı ölçek, tek kural. */
.slogo { --slogo-h: 28px; display: inline-flex; align-items: center; flex: none;
         height: var(--slogo-h); width: calc(var(--slogo-h) * 2.2); }
.slogo img { display: block; height: calc(var(--slogo-h) * var(--k, .55)); width: auto; max-width: 100%; }
.slogo--text { width: auto; font-weight: 700; font-size: calc(var(--slogo-h) * .5); color: var(--fg-0, #fff); white-space: nowrap; }