/* ==========================================================================
   C5M Scripts — arayüz  (sürüm 3)

   TEK TEMA: KOYU. Açık tema kaldırıldı. Referans aldığım üç FiveM mağazası
   (quasar-store, cylexdev, 0resmon) koyu; açık temayı taşımak hem kod hem
   tasarım olarak ikinci bir gerçeklik demekti ve hiçbirinde yok.

   Üçünden alınanlar:
     · quasar  → köşesi kesilmiş kart, iri İTALİK BÜYÜK HARF iki tonlu başlık,
                 numaralı zaman çizelgesi, rakam şeridi, kategori kareleri
     · cylex   → çerçeveli ikon sırası, ortalanmış bölüm başlığı, öne çıkan
                 ürünün ortada büyük durması
     · 0resmon → geri sayımlı üst şerit, iki yanı çizgili bölüm başlığı,
                 kart üstünde çerçeve rozetleri ve indirim pastili

   Kurallar:
     · Her şey .cs altında kapsanır.
     · Sınıf adları değişmedi: site.js aynı adlarla düğüm üretiyor.
     · Hareketin tamamı prefers-reduced-motion ile kapanır.
   ========================================================================== */

/* ==========================================================================
   1) BELİRTEÇLER — tek tema
   ========================================================================== */
:root {
  --bg:      #06070A;
  --bg-2:    #0C0E13;
  --bg-3:    #13161D;
  --bg-4:    #1C2029;
  --line:    rgba(255, 255, 255, .07);
  --line-2:  rgba(255, 255, 255, .14);
  --line-3:  rgba(255, 255, 255, .26);

  --ink:     #F6F8FC;
  --ink-2:   #9AA3B4;
  --ink-3:   #656E7F;

  --accent:      #FF2E49;
  --accent-2:    #FF6275;
  --accent-ink:  #FFFFFF;
  --accent-soft: rgba(255, 46, 73, .10);
  --accent-line: rgba(255, 46, 73, .32);
  --accent-glow: rgba(255, 46, 73, .34);
  --ok:      #3DDC84;
  --warn:    #FFC53D;
  --discord: #5865F2;

  --isik:   inset 0 1px 0 rgba(255, 255, 255, .055);
  --shadow: 0 26px 60px -32px #000;
  --shadow-2: 0 40px 80px -34px #000;

  --fd: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
  --fb: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fm: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;   /* etiket/düğme yazıları */
  --fk: "JetBrains Mono", ui-monospace, Consolas, monospace;                     /* yalnızca gerçek kod */
  --fn: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --prose: 68ch;
  --radius: 14px;
  --radius-sm: 9px;
  --kes: 18px;            /* kartın kesik köşesi */

  --hiz: .2s cubic-bezier(.22, .7, .3, 1);
}

/* ==========================================================================
   2) TEMEL
   ========================================================================== */
html, body { margin: 0; padding: 0; background: var(--bg); }
/* Tam ekran sepet açıkken arka sayfa kaymasın. Asıl kilit site.js'te body'yi
   position:fixed yapıp kaydırma konumunda dondurmak — bu satır yalnızca
   olası bir dış kaydırma çubuğunu gizliyor. */
html.sepet-acik { overflow: hidden; }
[hidden] { display: none !important; }

.cs {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  overflow-x: clip;
}
.cs *, .cs *::before, .cs *::after { box-sizing: border-box; }
.cs img { max-width: 100%; height: auto; display: block; }
.cs svg { display: block; }
.cs p { margin: 0; }
.cs ul { margin: 0; padding: 0; list-style: none; }
.cs a { color: inherit; text-decoration: none; }
.cs a:focus-visible, .cs summary:focus-visible, .cs button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.cs b, .cs strong { font-weight: 600; color: var(--ink); }

/* BAŞLIK DİLİ — üç referansın ortak imzası: iri, sıkışık, İTALİK BÜYÜK HARF,
   iki tonlu. Gövde metni normal kalıyor; karşıtlık buradan geliyor. */
.cs h1, .cs h2, .cs h3, .cs h4, .cs h5 {
  margin: 0; font-family: var(--fd); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.08; text-wrap: balance;
}
.cs h1, .cs h2 { font-style: italic; text-transform: uppercase; letter-spacing: -.012em; }
.cs h1 em, .cs h2 em, .cs h3 em { font-style: inherit; color: var(--accent); }

.cs-a, .cs .a-tr, .cs .a-en { display: block; height: 0; overflow: hidden; scroll-margin-top: 92px; }
.cs .wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* dil geçişi — VARSAYILAN İNGİLİZCE. <html class="dil-tr"> Türkçe'yi açar
   (tercih localStorage'da, <head>'deki satır içi betik boyamadan önce koyuyor). */
html:not(.dil-tr) .cs .tr { display: none; }
html.dil-tr .cs .en { display: none; }
.cs:has(.a-en:target) .tr { display: none; }
.cs:has(.a-en:target) .en { display: inline; }
.cs:has(.a-tr:target) .en { display: none; }
.cs:has(.a-tr:target) .tr { display: inline; }

/* ==========================================================================
   3) HAREKET
   ========================================================================== */
@keyframes cs-yuksel { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes cs-nabiz  { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes cs-sup    { 0% { transform: translate3d(-120%, 0, 0); } 100% { transform: translate3d(520%, 0, 0); } }
@keyframes cs-gir    { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes cs-serit  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes cs-vit-sol { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(-50%, 0, 0); } }
@keyframes cs-vit-sag { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes cs-zipla  { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(7px); opacity: .3; } }
@keyframes cs-suzul-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes cs-suzul-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-8%, -6%, 0) scale(.95); } }
@keyframes cs-suzul-c { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(5%, -9%, 0); } }
@keyframes cs-yuz-a { 0%, 100% { transform: translate3d(-84%, -3%, 0) rotate(-11deg); } 50% { transform: translate3d(-84%, -7%, 0) rotate(-12.5deg); } }
@keyframes cs-yuz-b { 0%, 100% { transform: translate3d(-50%, 0, 0) rotate(0deg); }     50% { transform: translate3d(-50%, -14px, 0) rotate(-.6deg); } }
@keyframes cs-yuz-c { 0%, 100% { transform: translate3d(-16%, -2%, 0) rotate(11deg); }  50% { transform: translate3d(-16%, -7%, 0) rotate(12.5deg); } }

/* Kaydırınca beliren öğeler. "gorun" sınıfını site.js ekliyor; JS çalışmazsa
   içerik olduğu gibi görünür kalıyor. */
.cs .gorun { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .5s ease, transform .5s cubic-bezier(.22, .7, .3, 1); }
.cs .gorun.acik { opacity: 1; transform: none; }
.cs .gorun.g1 { transition-delay: .05s; }
.cs .gorun.g2 { transition-delay: .1s; }
.cs .gorun.g3 { transition-delay: .15s; }
.cs .gorun.g4 { transition-delay: .2s; }



/* ==========================================================================
   4) ÜST ŞERİT + GERİ SAYIM  (0resmon)
   ========================================================================== */
.cs .ilerleme {
  position: fixed; top: 0; left: 0; z-index: 70; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--accent-glow); transition: width .08s linear;
}
/* Koyu bordodan kırmızıya degrade + üstünde çok hafif salınan ortam ışığı.
   Şerit bilinçli olarak kompakt: yükseklik ~38px. */
.cs .promo {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, #450000 0%, #b00000 50%, #450000 100%);
  color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .45);
}
/* ortada duran hafif kırmızı ışık — sabit, yumuşak */
.cs .promo::before {
  content: ""; position: absolute; inset: -120% 20%; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 50% at 50% 50%, rgba(255, 70, 70, .38), transparent 72%);
  filter: blur(26px);
}
/* barın en üstünde çok hafif, yavaşça gezen ışık çizgisi (neon değil) */
.cs .promo-isik {
  position: absolute; top: 0; left: 0; height: 1px; width: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: cs-promo-isik 9s ease-in-out infinite alternate;
}
@keyframes cs-promo-isik {
  from { transform: translateX(-10%); opacity: .35; }
  to   { transform: translateX(300%); opacity: .8; }
}

.cs .promo .wrap {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px; padding-block: 8px; font-size: 13px;
}
.cs .promo .t { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.cs .promo-ic {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}
.cs .promo-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs .promo b { font-weight: 800; letter-spacing: .005em; }
.cs .promo .promo-alt { opacity: .78; }

/* ---- kupon: kod ayrı küçük bir kutuda, yanında kopyala düğmesi ---- */
.cs .kupon {
  position: relative;
  display: inline-flex; align-items: center; cursor: pointer;
  background: rgba(0, 0, 0, .26); border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 10px; padding: 3px 4px 3px 11px; font: inherit; color: inherit;
  transition: background var(--hiz), border-color var(--hiz);
}
.cs .kupon:hover { background: rgba(0, 0, 0, .40); border-color: rgba(255, 255, 255, .38); }
.cs .kupon-ic { display: inline-flex; align-items: center; gap: 9px; transition: opacity .18s ease; }
.cs .kupon-et { font-family: var(--fm); font-size: 9.5px; letter-spacing: .2em; opacity: .6; }
/* kodun kendi kutusu */
.cs .kupon code {
  font-family: var(--fm); font-size: 13px; font-weight: 800; letter-spacing: .14em; color: #fff;
  background: rgba(0, 0, 0, .40); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px; padding: 3px 9px;
}
.cs .kupon .kupon-ok {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: rgba(255, 255, 255, .12); opacity: .8;
  transition: opacity var(--hiz), background var(--hiz);
}
.cs .kupon .kupon-ok svg { width: 13px; height: 13px; }
.cs .kupon:hover .kupon-ok { opacity: 1; background: rgba(255, 255, 255, .24); }

/* kopyalandı bildirimi — pastilin İÇİNDE beliriyor, düzen kaymıyor */
.cs .kupon-mesaj {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: #fff; opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.cs .kupon-mesaj svg { width: 13px; height: 13px; flex: none; }
.cs .kupon[data-durum="ok"] { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .5); }
.cs .kupon[data-durum="ok"] .kupon-ic { opacity: 0; }
.cs .kupon[data-durum="ok"] .kupon-mesaj { opacity: 1; }

/* ---- geri sayım: dört sade, modern kart ---- */
.cs .geri-sayim { display: inline-flex; align-items: stretch; gap: 5px; font-family: var(--fm); }
.cs .gs-kutu {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  min-width: 46px; padding: 4px 9px 5px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(0, 0, 0, .26));
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* üstte ince parlaklık — camsı his, neon değil */
.cs .gs-kutu::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
}
.cs .gs-kutu b {
  font-size: 15px; font-weight: 700; line-height: 1.1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.cs .gs-kutu i {
  font-style: normal; font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  opacity: .55;
}

/* ==========================================================================
   6) MENÜ
   ========================================================================== */
.cs .nav {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 88%, transparent),
    color-mix(in srgb, var(--bg) 72%, transparent));
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 34px -28px #000;
}
/* alt çizgi ortaya doğru hafifçe kızarıyor */
.cs .nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
.cs .nav .wrap { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px 14px; padding-block: 12px; }
.cs .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.cs .brand .glyph {
  width: 34px; height: 34px; flex: none;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--accent-ink); box-shadow: 0 8px 20px -10px var(--accent-glow);
  display: grid; place-items: center; font-family: var(--fd);
  font-size: 13px; font-weight: 800; font-style: italic; letter-spacing: -.02em; line-height: 1;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  transition: transform var(--hiz);
}
.cs .brand:hover .glyph { transform: translateY(-2px); }
.cs .brand .name { font-family: var(--fd); font-weight: 800; font-size: 15px; font-style: italic; text-transform: uppercase; letter-spacing: -.005em; line-height: 1.15; }
.cs .brand .brand-logo { height: 42px; width: auto; flex: none; display: block; }
.cs .brand .name i { display: block; font-style: normal; text-transform: none; font-family: var(--fm); font-size: 10px; font-weight: 400; letter-spacing: .18em; color: var(--ink-3); }

.cs .nav nav { display: flex; flex-wrap: wrap; gap: 2px; }
/* Yalnızca üst seviye menü bağlantıları: açılır menü içindeki satırlar bu
   kuralları ALMAMALI (yoksa hepsi büyük harfe dönüyor). */
.cs .nav nav > .nav-link,
.cs .nav nav > .nav-acilir > .nav-link {
  position: relative; font-family: var(--fn); font-weight: 600; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; color: #D6DAE4; padding: 8px 9px;
  border-radius: 8px;
  transition: color var(--gecis), background var(--gecis);
}
.cs .nav nav > .nav-link:hover,
.cs .nav nav > .nav-acilir > .nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }

.cs .navtools { display: flex; align-items: center; gap: 8px; }
/* Header düğmeleri kesik köşe yerine yumuşak köşe — kartlarla aynı dil. */
.cs .iconbtn {
  width: 34px; height: 34px; display: grid; place-items: center; position: relative;
  border: 1px solid var(--line-2); color: var(--ink-2);
  border-radius: 9px; background: rgba(255, 255, 255, .03);
  transition: color var(--hiz), border-color var(--hiz), background var(--hiz), transform var(--hiz);
}
.cs .iconbtn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-1px); }
.cs .nav .btn { clip-path: none; border-radius: 9px; }
.cs .nav .langbar { border-radius: 10px; }
.cs .nav .langbar a { border-radius: 7px; }
.cs .iconbtn svg { width: 16px; height: 16px; fill: currentColor; }
.cs .iconbtn .dot {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--fm); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--bg);
}
.cs .iconbtn.basket .dot { animation: cs-nabiz 2.4s ease-in-out 3; }

/* Discord/YouTube: kutu/çerçeve yok, beyaz ve büyük, sade logo yan yana. */
.cs .marka-grup { display: flex; align-items: center; gap: 14px; }
.cs .marka-ikon { display: grid; place-items: center; color: var(--ink); transition: color var(--hiz), transform var(--hiz), opacity var(--hiz); opacity: .92; }
.cs .marka-ikon:hover { color: var(--accent); opacity: 1; transform: translateY(-1px); }
.cs .marka-ikon[aria-label="Discord"]:hover { color: #5865F2; }
.cs .marka-ikon svg { width: 23px; height: 23px; fill: currentColor; }
.cs .navtools-ayirici { width: 1px; height: 22px; background: var(--line-2); }

.cs .who {
  font-family: var(--fn); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--accent);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  height: 34px; box-sizing: border-box; border-radius: 9px;
  padding: 0 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs .langbar { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); }
.cs .langbar a {
  font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  padding: 4px 9px; color: var(--ink-3); transition: background var(--hiz), color var(--hiz);
}
.cs .langbar .b-en { background: var(--accent); color: var(--accent-ink); }
html.dil-tr .cs .langbar .b-tr { background: var(--accent); color: var(--accent-ink); }
html.dil-tr .cs .langbar .b-en { background: transparent; color: var(--ink-3); }

/* para birimi seçici: dil çubuğuyla aynı boy/ dil */
.cs .para-sec {
  height: 34px; box-sizing: border-box; padding: 0 26px 0 11px; cursor: pointer;
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%239AA3B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center / 14px;
  -webkit-appearance: none; appearance: none; color-scheme: dark;
  border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink);
  font-family: var(--fn); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  transition: border-color var(--hiz);
}
.cs .para-sec:hover, .cs .para-sec:focus-visible { border-color: var(--line-3); outline: none; }

.cs .hesap { position: relative; }
.cs button.who { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.cs button.who::after {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.cs .hesapmenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 292px; max-width: calc(100vw - 32px); padding: 8px; background: var(--bg-2);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
  display: grid; gap: 2px; animation: cs-yuksel .18s ease both;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.cs .hesapmenu .hm-ust { padding: 4px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: flex; align-items: center; gap: 11px; }
.cs .hesapmenu .hm-avatar {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 9px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  font-family: var(--fd); font-weight: 800; font-style: italic; font-size: 15px;
}
.cs .hesapmenu .hm-ust-yazi { min-width: 0; }
.cs .hesapmenu .hm-ust-yazi span { display: block; font-size: 11px; color: var(--ink-3); }
.cs .hesapmenu .hm-ust b { display: block; margin-top: 1px; font-family: var(--fm); font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* menü satırları: Scripts açılır menüsüyle aynı ikon+yazı düzeni (am-ic/am-yazi) */
.cs .hesapmenu a, .cs .hesapmenu button.hm-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  font-family: var(--fb); font-size: 14px; color: var(--ink); background: none; border: 0;
  padding: 8px 9px; border-radius: 9px; cursor: pointer;
  transition: background var(--gecis, var(--hiz));
}
.cs .hesapmenu a:hover, .cs .hesapmenu button.hm-item:hover { background: var(--bg-3); }
.cs .hesapmenu .hm-not { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--ink-3); }
/* Çıkış Yap: diğerleriyle aynı yapı, sadece ikon rengi kırmızı kalıyor zaten (.am-ic varsayılanı) */
.cs .hesapmenu #cikisBtn .am-ic { background: rgba(255, 255, 255, .06); border-color: var(--line-2); color: var(--ink-2); }
.cs .hesapmenu #cikisBtn:hover .am-ic { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* ==========================================================================
   7) DÜĞMELER VE ETİKETLER
   ========================================================================== */
.cs .btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fm); font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: 13px 24px; border: 1px solid transparent;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 90% 100%, 0 100%);
  transition: background var(--hiz), border-color var(--hiz), color var(--hiz), transform var(--hiz);
}
.cs .btn-r::before, .cs .btn-w::before, .cs .btn-d::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: translate3d(-160%, 0, 0); transition: transform .5s ease;
}
.cs .btn-r:hover::before, .cs .btn-w:hover::before, .cs .btn-d:hover::before { transform: translate3d(320%, 0, 0); }
.cs .btn-r { background: var(--accent); color: var(--accent-ink); }
.cs .btn-r:hover { background: var(--accent-2); transform: translateY(-2px); }
.cs .btn-w { background: var(--ink); color: var(--bg); }
.cs .btn-w:hover { transform: translateY(-2px); }
/* background:none şart — çoğu .btn-o bir <a> etiketinde olduğu için fark
   edilmiyordu, ama gerçek bir <button> üzerinde tarayıcı varsayılan gri
   arka planı basıyordu (kupon "Uygula" düğmesinde yakalandı). */
.cs .btn-o { background: none; border-color: var(--line-3); color: var(--ink); }
.cs .btn-o:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.cs .btn-d { background: var(--discord); color: #fff; }
.cs .btn-d:hover { background: #6C77F4; transform: translateY(-2px); }
.cs #loginBtn .fivem-logo-ikon { height: 15px; width: auto; flex: none; }
.cs #loginBtn { font-family: var(--fn); font-weight: 600; letter-spacing: .02em; height: 34px; padding: 0 14px; box-sizing: border-box; }
.cs .btn-sm { font-size: 11.5px; padding: 10px 16px; }
.cs .btn-full { width: 100%; }
.cs .btn[aria-busy="true"] { opacity: .5; pointer-events: none; }
.cs .btn:active { transform: translateY(0) scale(.985); }

.cs .chip {
  font-family: var(--fm); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line-2); padding: 4px 10px; white-space: nowrap;
  transition: border-color var(--hiz), color var(--hiz);
}
.cs .chip:hover { border-color: var(--line-3); color: var(--ink); }
.cs .chip-r { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* çerçeve rozetleri: kart görselinin ALT kenarına oturuyor (0resmon) */
.cs .rozetler { display: flex; flex-wrap: wrap; gap: 5px; }
.cs .rozetler .chip { font-size: 10px; padding: 3px 8px; background: rgba(0, 0, 0, .55); border-color: var(--line-2); }
#uUst .rozetler { margin: 0 0 16px; }

.cs code.i { font-family: var(--fk); font-size: .86em; color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 1px 6px; }
.cs kbd { font-family: var(--fk); font-size: 12px; color: var(--ink); background: var(--bg-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 2px 8px; display: inline-block; white-space: nowrap; }

/* ==========================================================================
   8) BÖLÜM İSKELETİ — ortalanmış, iki yanı çizgili başlık (0resmon + cylex)
   ========================================================================== */
.cs .sec { position: relative; padding-block: 92px; }
.cs .sec::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 0%, var(--accent-soft), transparent 64%);
}
.cs .sec > * { position: relative; }

.cs .sec-head { max-width: 780px; margin: 0 auto 54px; text-align: center; }
.cs .sec-head h2 { font-size: clamp(30px, 4.4vw, 50px); }
.cs .sec-head p { margin-top: 16px; font-size: 16.5px; color: var(--ink-2); }

/* iki yanı çizgili küçük başlık */
.cs .rule-head { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.cs .rule-head::before, .cs .rule-head::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.cs .rule-head span { font-family: var(--fm); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

.cs .kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--fm); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-2);
}
.cs .kicker::before { content: "//"; color: var(--accent); letter-spacing: 0; }

/* ==========================================================================
   9) HERO
   ========================================================================== */
.cs .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.cs .aurora { position: absolute; inset: -30% -15% auto; height: 920px; pointer-events: none; z-index: 0; filter: blur(72px); opacity: .5; }
.cs .aurora i { position: absolute; display: block; border-radius: 50%; }
.cs .aurora i:nth-child(1) { left: 4%;  top: 6%;  width: 46%; height: 60%; background: var(--accent-glow);    animation: cs-suzul-a 17s ease-in-out infinite; }
.cs .aurora i:nth-child(2) { right: 2%; top: 0;   width: 42%; height: 54%; background: rgba(99, 122, 255, .3); animation: cs-suzul-b 21s ease-in-out infinite; }
.cs .aurora i:nth-child(3) { left: 36%; top: 26%; width: 34%; height: 44%; background: rgba(255, 98, 117, .18); animation: cs-suzul-c 25s ease-in-out infinite; }
.cs .hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 80% at 30% 0%, #000 18%, transparent 72%);
          mask-image: radial-gradient(120% 80% at 30% 0%, #000 18%, transparent 72%);
}
.cs .hero .wrap {
  position: relative; z-index: 1; padding-block: 88px 76px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 56px; align-items: center;
}
.cs .hero-yazi > * { animation: cs-gir .7s cubic-bezier(.22, .7, .3, 1) both; }
.cs .hero-yazi > .kicker { animation-delay: .05s; }
.cs .hero-yazi > h1      { animation-delay: .14s; }
.cs .hero-yazi > .lede   { animation-delay: .24s; }
.cs .hero-yazi > .cta    { animation-delay: .34s; }
.cs .hero-yazi > .facts  { animation-delay: .44s; }
.cs .hero h1 { margin-top: 20px; font-size: clamp(42px, 6.4vw, 76px); line-height: .97; letter-spacing: -.028em; }
.cs .hero .lede { margin-top: 22px; max-width: 52ch; font-size: 17.5px; color: var(--ink-2); }
.cs .hero .cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.cs .hero .facts { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 7px; }
.cs .heroart { display: grid; gap: 18px; }

.cs .telyigin { position: relative; height: 500px; }
.cs .telyigin img {
  position: absolute; left: 50%; top: 0; width: 196px; height: auto; border-radius: 24px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.26)) drop-shadow(0 34px 54px rgba(0,0,0,.78));
}
.cs .telyigin .t1 { z-index: 1; opacity: .9; animation: cs-yuz-a 9s ease-in-out infinite; }
.cs .telyigin .t3 { z-index: 1; opacity: .9; animation: cs-yuz-c 11s ease-in-out infinite; }
.cs .telyigin .t2 { z-index: 2; width: 222px; animation: cs-yuz-b 7s ease-in-out infinite; }

.cs .kaydir-ipucu {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2;
  width: 22px; height: 36px; border: 1px solid var(--line-2); border-radius: 12px;
  display: grid; place-items: start center; padding-top: 6px;
}
.cs .kaydir-ipucu i { width: 3px; height: 7px; border-radius: 2px; background: var(--accent); animation: cs-zipla 1.7s ease-in-out infinite; }

/* konsol */
.cs .console { background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%); }
.cs .console .bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-3); }
.cs .console .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; }
.cs .console .bar i:first-child { background: var(--accent); }
.cs .console .bar span { font-family: var(--fm); font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
.cs .console .body { padding: 16px; font-family: var(--fk); font-size: 12.5px; line-height: 2.1; }
.cs .console .row { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.cs .console .row .c { color: var(--ink-3); }
.cs .console .row .n { color: var(--ink); }
.cs .console .row .d { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); min-width: 12px; }
.cs .console .row .ok { color: var(--ok); }
.cs .console .foot { padding: 12px 16px; border-top: 1px solid var(--line); font-family: var(--fm); font-size: 11.5px; color: var(--ink-3); }

/* ==========================================================================
   10) İKON SIRASI  (cylex)
   ========================================================================== */
.cs .guven-sec { position: relative; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.cs .guven { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.cs .gitem { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 34px 22px; border-left: 1px solid var(--line); }
.cs .gitem:first-child { border-left: 0; }
.cs .gitem .ic {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--accent-line); color: var(--accent); background: var(--accent-soft);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  transition: transform var(--hiz), background var(--hiz);
}
.cs .gitem:hover .ic { transform: translateY(-3px); background: rgba(255, 46, 73, .18); }
.cs .gitem .ic svg { width: 20px; height: 20px; }
.cs .gitem > div { line-height: 1.5; }
.cs .gitem b { display: block; font-family: var(--fm); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.cs .gitem span span { font-size: 13px; color: var(--ink-3); }

/* ==========================================================================
   11) AKAN ŞERİT
   ========================================================================== */
.cs .serit {
  overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cs .serit-ic { display: flex; width: max-content; animation: cs-serit 34s linear infinite; }
.cs .serit-ic span { flex: none; padding: 12px 26px; font-family: var(--fm); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.cs .serit-ic span + span { border-left: 1px solid var(--line); }

/* ==========================================================================
   12) DURUM ŞERİDİ
   ========================================================================== */
.cs .status { margin: 0 0 26px; padding: 14px 18px; font-size: 14.5px; display: none; border-left: 3px solid; }
.cs .status[data-kind="err"]  { display: block; background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); animation: cs-yuksel .3s ease both; }
.cs .status[data-kind="warn"] { display: block; background: color-mix(in srgb, var(--warn) 9%, transparent); border-color: var(--warn); color: var(--warn); }
.cs .status[data-kind="ok"]   { background: color-mix(in srgb, var(--ok) 9%, transparent); border-color: var(--ok); color: var(--ok); }
.cs body.debug .status[data-kind="ok"] { display: block; }
.cs .status code { font-family: var(--fk); font-size: .88em; }

/* ==========================================================================
   13) ÜRÜN KARTI — kesik köşe + görsel üstünde rozetler (quasar + 0resmon)
   ========================================================================== */
.cs .kat + .kat { margin-top: 64px; }
.cs .pgrid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); justify-content: start; }
.cs .pgrid:has(> :only-child) { grid-template-columns: minmax(310px, 520px); }
.cs .pgrid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(310px, 1fr)); }

/* Kart biçimi 0resmon referansındaki gibi: kesik köşe yok, yuvarlak köşe var.
   İki katmanlı yapı korunuyor — kartın arka planı 1px'lik çerçeve olarak
   görünüyor, ::before içi kapatıyor. */
.cs .pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--line-2);
  border-radius: 14px;
  transition: transform var(--hiz), background var(--hiz);
}
.cs .pcard::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: var(--bg-2);
  border-radius: 13px;
}
.cs .pcard > * { position: relative; z-index: 1; }
.cs .pcard:hover { transform: translateY(-5px); background: var(--accent); }

.cs .pcard .shot {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-content: center; gap: 5px; text-align: center; background: var(--bg-3);
  border-radius: 13px 13px 0 0;
  margin: 1px 1px 0;                     /* çerçeve çizgisi görselin altında kalmasın */
}
.cs .pcard .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, .7, .3, 1); }
.cs .pcard:hover .shot img { transform: scale(1.05); }
/* görselin altına inen karartma: rozetler okunsun */
.cs .pcard .shot::after {
  content: ""; position: absolute; inset: auto 0 0; height: 58%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
}
.cs .pcard .shot .rid { font-family: var(--fm); font-size: 15px; color: var(--ink-2); }
.cs .pcard .shot .rv { font-family: var(--fm); font-size: 11.5px; color: var(--ink-3); letter-spacing: .1em; }
.cs .pcard .shot > .rozetler { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; }
.cs .pcard .flag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  background: var(--accent); color: var(--accent-ink); padding: 5px 10px;
  border-radius: 6px;
}
.cs .pcard .in { padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* referanstaki gibi: italik/uppercase değil, düz kalın başlık */
.cs .pcard h3 { font-size: 18px; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: -.01em; line-height: 1.35; }
/* framework rozetleri artık görselin üstünde değil, başlığın altında */
.cs .pcard .in > .rozetler { margin-top: -2px; }
.cs .pcard .in > .rozetler .chip { border-radius: 6px; background: var(--bg-3); }
.cs .pcard h3 a { transition: color var(--hiz); }
.cs .pcard h3 a:hover { color: var(--accent); }
.cs .pcard p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; flex: 1; }
/* Kart butonları da referanstaki gibi: kesik köşe yok, yumuşak köşe;
   birincil buton beyaz (kırmızı/yeşil/sarı kart renkleriyle çakışmıyor). */
.cs .pcard .acts { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: auto; }
.cs .pcard .acts .btn { clip-path: none; border-radius: 7px; }
.cs .pcard .acts .btn-r { background: var(--ink); color: var(--bg); }
.cs .pcard .acts .btn-r:hover { background: #fff; }
.cs .pcard .acts .btn-o { border-color: var(--line-2); }
.cs .pcard .acts .btn-o:hover { border-color: var(--accent); color: var(--accent); }

.cs .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.cs .price .now { font-family: var(--fd); font-size: 25px; font-weight: 800; font-style: italic; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cs .price .was { font-size: 14px; color: var(--ink-3); text-decoration: line-through; }
.cs .price .off { font-family: var(--fm); font-size: 10.5px; font-weight: 700; background: var(--accent); color: var(--accent-ink); padding: 3px 7px; }
.cs .price.big .now { font-size: 34px; }
.cs .price.big .was { font-size: 16px; }

.cs .yeni-rozet {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--fn); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  background: var(--ok); color: #06140C; padding: 4px 9px; border-radius: 6px;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
}
.cs .yeni-rozet.alt { top: 40px; }

.cs .kupon-ipucu {
  margin: 4px 0 0; font-family: var(--fm); font-size: 11px; letter-spacing: .02em; color: var(--ink-3);
}
.cs .kupon-ipucu b { color: var(--ok); font-weight: 700; }

.cs .katbos { border: 1px dashed var(--line-2); padding: 44px 32px; text-align: center; color: var(--ink-2); background: var(--bg-2); }
.cs .katbos h3 { font-size: 19px; color: var(--ink); margin-bottom: 10px; }
.cs .katbos p { max-width: 56ch; margin: 0 auto; }

/* ==========================================================================
   14) VİTRİN
   ========================================================================== */
.cs .vitrin-sec { padding-bottom: 66px; overflow: hidden; }
.cs .vitrin {
  display: grid; gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cs .vitrin-sira { display: flex; gap: 20px; width: max-content; }
.cs .vitrin-sira.sol { animation: cs-vit-sol 62s linear infinite; }
.cs .vitrin-sira.sag { animation: cs-vit-sag 74s linear infinite; }
.cs .vitrin-sira img {
  flex: none; width: 168px; height: auto; border-radius: 20px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.2)) drop-shadow(0 20px 32px rgba(0,0,0,.66));
  transition: transform var(--hiz);
}
.cs .vitrin-sira img:hover { transform: translateY(-8px) scale(1.03); }
.cs .vitrin:hover .vitrin-sira { animation-play-state: paused; }

/* ==========================================================================
   15) RAKAM ŞERİDİ  (quasar)
   ========================================================================== */
.cs .sayilar-sec { padding-block: 0; }
.cs .sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); background: var(--bg-2); }
.cs .sayi { padding: 30px 24px; text-align: center; border-left: 1px solid var(--line); transition: background var(--hiz); }
.cs .sayi:first-child { border-left: 0; }
.cs .sayi:hover { background: var(--bg-3); }
.cs .sayi b { display: block; font-family: var(--fd); font-size: clamp(34px, 4.4vw, 50px); font-weight: 800; font-style: italic; letter-spacing: -.04em; line-height: 1; color: var(--accent); }
.cs .sayac { font-variant-numeric: tabular-nums; }
.cs .sayi > span { display: block; margin-top: 10px; font-family: var(--fm); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

/* ==========================================================================
   16) NUMARALI ZAMAN ÇİZELGESİ  (quasar)
   ========================================================================== */
.cs .adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; counter-reset: adim; }
.cs .adim { position: relative; counter-increment: adim; padding-top: 52px; }
.cs .adim::before {
  content: counter(adim, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent);
  font-family: var(--fm); font-weight: 700; font-size: 13px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.cs .adim::after { content: ""; position: absolute; left: 52px; top: 20px; right: -34px; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.cs .adim:last-child::after { display: none; }
.cs .adim h3 { font-family: var(--fm); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); font-weight: 600; font-style: normal; }
.cs .adim p { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }

/* ==========================================================================
   17) NEDEN BİZ
   ========================================================================== */
.cs .wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cs .wcard {
  position: relative; padding: 26px 26px 28px; background: var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%);
  transition: transform var(--hiz), background var(--hiz);
}
.cs .wcard::before { content: ""; position: absolute; inset: 1px; background: var(--bg-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%); }
.cs .wcard > * { position: relative; z-index: 1; }
.cs .wcard:hover { transform: translateY(-4px); background: var(--accent-line); }
.cs .wcard .wtop { display: flex; align-items: center; gap: 13px; }
.cs .wcard .ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); }
.cs .wcard .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs .wcard h3 { font-size: 17px; font-style: italic; text-transform: uppercase; }
.cs .wcard p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: var(--prose); }

/* ==========================================================================
   18) S.S.S.
   ========================================================================== */
.cs .faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 40px; align-items: start; }
.cs .faq { display: block; border-top: 1px solid var(--line); }
.cs details { border-bottom: 1px solid var(--line); }
.cs summary {
  list-style: none; cursor: pointer; position: relative; padding: 20px 46px 20px 0;
  font-family: var(--fd); font-size: 16px; font-weight: 700; transition: color var(--hiz);
}
.cs summary::-webkit-details-marker { display: none; }
.cs summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--hiz), border-color var(--hiz);
}
.cs details[open] summary::after { transform: translateY(-30%) rotate(225deg); border-color: var(--accent); }
.cs summary:hover { color: var(--accent); }
.cs details .ans { padding: 0 0 22px; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); max-width: var(--prose); animation: cs-yuksel .28s ease both; }
.cs .faq-side {
  position: relative; background: var(--line-2); padding: 28px; display: grid; gap: 14px; align-content: start;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%);
}
.cs .faq-side::before { content: ""; position: absolute; inset: 1px; background: var(--bg-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%); }
.cs .faq-side > * { position: relative; z-index: 1; }
.cs .faq-side .q { width: 42px; height: 42px; background: var(--accent-soft); border: 1px solid var(--accent-line);
  display: grid; place-items: center; font-family: var(--fd); font-size: 20px; font-weight: 800; font-style: italic; color: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); }
.cs .faq-side h3 { font-size: 17px; font-style: italic; text-transform: uppercase; }
.cs .faq-side p { font-size: 15px; line-height: 1.7; color: var(--ink-2); }

/* ==========================================================================
   19) DISCORD + ALT ÇAĞRI
   ========================================================================== */
.cs .dbanner {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px; align-items: center; background: var(--line-2); padding: 34px 36px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%);
}
.cs .dbanner::before { content: ""; position: absolute; inset: 1px;
  background: var(--bg-2) radial-gradient(60% 120% at 88% 50%, rgba(88, 101, 242, .2), transparent 66%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%); }
.cs .dbanner > * { position: relative; z-index: 1; }
.cs .dbanner h3 { font-size: clamp(20px, 2.6vw, 26px); font-style: italic; text-transform: uppercase; }
.cs .dbanner h3 em { font-style: inherit; color: #8B95FF; }
.cs .dbanner p { margin-top: 12px; max-width: 56ch; font-size: 15.5px; color: var(--ink-2); }

.cs .cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs .cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 50% 0%, var(--accent-soft), transparent 66%); }
.cs .cta-band .wrap { position: relative; padding-block: 92px; text-align: center; }
.cs .cta-band h2 { font-size: clamp(30px, 4.4vw, 50px); }
.cs .cta-band p { margin: 18px auto 0; max-width: 56ch; font-size: 16.5px; color: var(--ink-2); }
.cs .cta-band .cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ==========================================================================
   20) ALTBİLGİ
   ========================================================================== */
.cs .foot { padding-block: 56px 36px; }
.cs .foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px; }
.cs .foot h5 { font-family: var(--fm); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 14px; }
.cs .foot li { font-size: 15px; color: var(--ink-2); padding: 4px 0; }
.cs .foot li a { transition: color var(--hiz); }
.cs .foot li a:hover { color: var(--accent); }
.cs .foot .fine { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.7; color: var(--ink-3); max-width: 90ch; }
.cs .tebexbar { border-top: 1px solid var(--line); background: var(--bg-2); }
.cs .tebexbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 15px; font-size: 12.5px; color: var(--ink-3); }
.cs .tebexbar b { color: var(--ink-2); font-weight: 600; }

/* ==========================================================================
   21) ÜRÜN SAYFASI
   ========================================================================== */
.cs .uhero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.cs .uhero .wrap { position: relative; z-index: 1; padding-block: 56px 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.cs .ugorsel { position: relative; background: var(--line-2); box-shadow: var(--shadow-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%);
  transition: transform var(--hiz); }
.cs .ugorsel::before { content: ""; position: absolute; inset: 1px; background: var(--bg-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%); }
.cs .ugorsel > * { position: relative; z-index: 1; }
.cs .ugorsel:hover { transform: translateY(-3px); }
.cs .ugorsel img { width: 100%; height: auto; display: block; }
.cs .ugorsel .shot { aspect-ratio: 16 / 9; display: grid; place-content: center; gap: 8px; text-align: center; background: var(--bg-3); }
.cs .ugorsel .shot .rid { font-family: var(--fm); font-size: 18px; color: var(--ink-2); }
.cs .ugorsel .shot .rv { font-size: 14px; color: var(--ink-3); }
.cs .ugorsel-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs .ugorsel-ana { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.cs .ugorsel-ana img { width: 100%; height: 100%; object-fit: cover; }
.cs .ugorsel-ana iframe { width: 100%; height: 100%; display: block; border: 0; }
.cs .ugorsel-ana .shot { width: 100%; height: 100%; aspect-ratio: auto; }
.cs .ugaleri { display: flex; gap: 8px; flex-wrap: wrap; }
.cs .ugaleri button {
  position: relative; width: 64px; height: 64px; flex: none; padding: 0; border-radius: 9px; overflow: hidden;
  border: 1.5px solid var(--line-2); background: var(--bg-2); cursor: pointer; opacity: .55;
  transition: opacity var(--hiz), border-color var(--hiz);
}
.cs .ugaleri button:hover { opacity: .85; }
.cs .ugaleri button.on { opacity: 1; border-color: var(--accent); }
.cs .ugaleri button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs .ugaleri-oynat {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: #fff;
}
.cs .ugaleri-oynat svg { width: 20px; height: 20px; }

.cs .geri { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fm); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; transition: color var(--hiz), transform var(--hiz); }
.cs .geri:hover { color: var(--accent); transform: translateX(-3px); }

.cs .ubilgi h1 { font-size: clamp(32px, 4.6vw, 54px); }
.cs .ubilgi .ozet { margin-top: 16px; }
.cs .ubilgi .ozet .tag { max-width: 52ch; font-size: 17px; color: var(--ink-2); margin: 0; }
.cs .ubilgi .satinal { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.cs .ubilgi .assure { margin-top: 26px; display: grid; gap: 10px; }
.cs .ubilgi .assure li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.cs .ubilgi .assure li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

.cs .prod { position: relative; padding-block: 86px; border-bottom: 1px solid var(--line); }
.cs .prod-head { display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: flex-end; justify-content: space-between; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.cs .eyebrow { display: inline-block; font-family: var(--fm); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.cs .prod-head h2 { font-size: clamp(30px, 4.2vw, 46px); }
.cs .prod-head .tag { margin-top: 16px; max-width: 52ch; font-size: 17px; color: var(--ink-2); }
.cs .prod-head .idcol { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; flex: none; }
.cs .prod-head .idcol code { font-family: var(--fk); font-size: 13px; border: 1px solid var(--line-2); padding: 6px 12px; color: var(--ink-2); background: var(--bg-2); }
.cs .prod-head .idcol .ver { font-family: var(--fm); font-size: 11px; color: var(--ink-3); }

.cs .prod-body { margin-top: 42px; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 52px; align-items: start; }
.cs .fgrid { display: block; }
.cs .fcard { padding: 28px 0; border-top: 1px solid var(--line); }
.cs .fgrid > .fcard:first-child { padding-top: 0; border-top: none; }
.cs .fcard.wide { width: 100%; }
.cs .fcard h3 { position: relative; padding-left: 16px; font-size: 18px; font-style: italic; text-transform: uppercase; }
.cs .fcard h3::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; background: var(--accent); }
.cs .fcard p { margin-top: 12px; max-width: var(--prose); font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.cs .fcard p + p { margin-top: 13px; }
.cs .fcard pre { margin: 14px 0 0; background: var(--bg-2); border: 1px solid var(--line-2); padding: 15px 17px; overflow-x: auto; font-family: var(--fk); font-size: 12.5px; line-height: 1.85; color: var(--ink-2); }

.cs .side { display: grid; gap: 18px; position: sticky; top: 92px; }
.cs .panel { position: relative; background: var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.cs .panel::before { content: ""; position: absolute; inset: 1px; background: var(--bg-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.cs .panel > * { position: relative; z-index: 1; }
.cs .panel h4 { font-family: var(--fm); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); padding: 16px 18px 0; font-weight: 500; }
.cs .panel .pin { padding: 13px 18px 18px; }
.cs .spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 14px; font-size: 13.5px; line-height: 1.5; }
.cs .spec dt { color: var(--ink-3); }
.cs .spec dd { margin: 0; text-align: right; color: var(--ink); word-break: break-word; }
.cs .spec dd.m { font-family: var(--fk); font-size: 12.5px; }
.cs .keys { display: grid; gap: 10px; }
.cs .keyrow { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 13.5px; line-height: 1.5; }
.cs .keyrow span { color: var(--ink-2); }
.cs .keyrow kbd + kbd { margin-left: 3px; }
.cs .panel .note-in { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

.cs .warn { margin-top: 34px; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: start;
  border-left: 3px solid var(--accent); background: linear-gradient(90deg, var(--accent-soft), transparent 42%); padding: 15px 18px 15px 20px; }
.cs .warn .lbl { font-family: var(--fm); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); padding-top: 4px; }
.cs .warn p { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: var(--prose); }
.cs .warn p + p { margin-top: 10px; }

.cs .apps { margin-top: 40px; border-top: 1px solid var(--line); }
.cs .appgroup { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 10px 22px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cs .appgroup > b { font-family: var(--fm); font-size: 11px; letter-spacing: .18em; color: var(--accent); font-weight: 500; }
.cs .appgroup > div { display: flex; flex-wrap: wrap; gap: 6px; }

.cs .tablewrap { overflow-x: auto; margin-top: 20px; border: 1px solid var(--line-2); background: var(--bg-2); }
.cs table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; }
.cs th, .cs td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
.cs tr:last-child td { border-bottom: none; }
.cs th { font-family: var(--fm); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.cs td { color: var(--ink-2); }
.cs td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

.cs .cms { max-width: var(--prose); color: var(--ink-2); }
.cs .cms h1, .cs .cms h2, .cs .cms h3, .cs .cms h4 { color: var(--ink); margin: 28px 0 12px; }
.cs .cms h2 { font-size: 24px; }
/* Panelden gelen serbest metin CÜMLE yazılıyor; görsel dildeki italik
   BÜYÜK HARF başlık kuralı buraya uymuyor, geri alınıyor. */
.cs .cms h1, .cs .cms h2 { font-style: normal; text-transform: none; letter-spacing: -.02em; }
.cs .cms h3 { font-size: 19px; font-style: normal; text-transform: none; }
.cs .cms h4 { font-size: 16px; font-style: normal; text-transform: none; }
.cs .cms p { margin: 0 0 13px; }
.cs .cms ul, .cs .cms ol { margin: 0 0 15px; padding-left: 22px; list-style: revert; }
.cs .cms li { margin-bottom: 6px; }
.cs .cms a { color: var(--accent-2); text-decoration: underline; }
.cs .cms hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.cs .cms blockquote { margin: 15px 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.cs .cms blockquote p { margin: 0; }
.cs .cms pre { background: var(--bg-2); border: 1px solid var(--line-2); padding: 15px 17px; overflow-x: auto; font-family: var(--fk); font-size: 12.5px; line-height: 1.85; }
.cs .cms code { font-family: var(--fk); font-size: .86em; color: var(--accent-2); background: var(--accent-soft); padding: 1px 6px; }
.cs .cms pre code { background: none; padding: 0; color: var(--ink-2); }
.cs .cms table { min-width: 0; }

/* ---------- yasal sayfa + 404 ---------- */
.cs .yasal { padding-block: 56px 96px; }
.cs .yasal .cms { margin: 0 auto; }
.cs .yasal .cms h1 { font-size: clamp(30px, 4.4vw, 44px); margin-top: 0; }
.cs .yasal .cms h2 { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.cs .yasal-tarih { font-family: var(--fm); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cs .yasal-ic { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.cs .yasal-ic a { font-family: var(--fm); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); border: 1px solid var(--line-2); padding: 7px 13px; transition: color var(--hiz), border-color var(--hiz); }
.cs .yasal-ic a:hover { color: var(--ink); border-color: var(--line-3); }
.cs .yok { padding-block: 110px 130px; text-align: center; }
.cs .yok .kod { font-family: var(--fd); font-size: clamp(90px, 18vw, 190px); font-weight: 800; font-style: italic; line-height: .9; letter-spacing: -.05em; color: var(--accent); }
.cs .yok h1 { font-size: clamp(24px, 3.4vw, 36px); margin-top: 18px; }
.cs .yok p { max-width: 52ch; margin: 14px auto 0; color: var(--ink-2); }
.cs .yok .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

.cs .urun-detay > .prod { padding-block: 64px; }
.cs .urun-detay .prod-head[hidden] + .prod-body { margin-top: 0; }

/* ==========================================================================
   22) DAR EKRAN
   ========================================================================== */
@media (max-width: 1040px) {
  .cs .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 60px 52px; }
  .cs .uhero .wrap { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 34px 44px; }
  .cs .prod-body { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .cs .side { position: static; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .cs .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .cs .adimlar { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cs .adim::after { display: none; }
  .cs .guven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs .gitem:nth-child(3) { border-left: 0; }
  .cs .telyigin { height: 410px; }
  .cs .telyigin img { width: 168px; }
  .cs .telyigin .t2 { width: 190px; }
  .cs .kaydir-ipucu { display: none; }
}
@media (max-width: 760px) {
  .cs { font-size: 15.5px; }
  .cs .sec, .cs .prod { padding-block: 58px; }
  .cs .cta-band .wrap { padding-block: 58px; }
  .cs .pgrid, .cs .wgrid { grid-template-columns: minmax(0, 1fr); }
  .cs .warn, .cs .appgroup { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cs .dbanner { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .cs .nav nav { display: none; }
  .cs .keyrow { grid-template-columns: 90px minmax(0, 1fr); }
  .cs .guven, .cs .sayilar { grid-template-columns: 1fr; }
  .cs .gitem, .cs .sayi { border-left: 0; border-top: 1px solid var(--line); }
  .cs .gitem:first-child, .cs .sayi:first-child { border-top: 0; }
  .cs .vitrin-sira img { width: 126px; border-radius: 15px; }
  .cs .telyigin { height: 320px; }
  .cs .telyigin img { width: 146px; }
  .cs .telyigin .t2 { width: 166px; }
  .cs .hesapmenu { right: auto; left: 0; }
}

/* ==========================================================================
   23) SÜRÜM 4 — ANA SAYFA MAĞAZA OLDU
   Telefonla ilgili her şey ürün sayfasına taşındı; buraya üç referansta
   olup bizde olmayan bölümler geldi.
   ========================================================================== */

/* ---------- ortalanmış hero (cylex dili) ---------- */
.cs .hero-orta .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 46px; padding-block: 92px 78px; }
.cs .hero-orta .hero-yazi { max-width: 900px; }
.cs .hero-orta .lede { margin-left: auto; margin-right: auto; max-width: 62ch; }
.cs .hero-orta .cta, .cs .hero-orta .facts { justify-content: center; }
.cs .hero-orta .heroart { width: 100%; max-width: 640px; }

/* ---------- bölüm başına "tümünü gör" ---------- */
.cs .tum-gor {
  font-family: var(--fm); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line-2); padding: 7px 14px; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 88% 100%, 0 100%);
  transition: color var(--hiz), border-color var(--hiz), background var(--hiz);
}
.cs .tum-gor:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
/* çizgili başlıkta düğme sağa yaslansın */
.cs .rule-head:has(.tum-gor)::after { flex: 1; }

/* ---------- ürün ızgarası: 3+ üründe yatay taşıyıcı ----------
   Üç referansta da ürünler yatay kayıyor. İki üründe taşıyıcı anlamsız,
   o yüzden yalnızca üç ve üstünde devreye giriyor. */
.cs .pgrid:has(> :nth-child(3)) {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 14px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent);
          mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent);
}
.cs .pgrid:has(> :nth-child(3)) > .pcard { flex: 0 0 330px; scroll-snap-align: start; }
.cs .pgrid::-webkit-scrollbar { height: 6px; }
.cs .pgrid::-webkit-scrollbar-thumb { background: var(--line-2); }

/* ---------- kategori şeridi (quasar) ---------- */
.cs .kat-sec { padding-bottom: 76px; overflow: hidden; }
.cs .kat-serit {
  display: flex; gap: 18px; padding: 0 24px 10px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
}
.cs .kat-serit::-webkit-scrollbar { display: none; }
.cs .kat-kare {
  position: relative; flex: 0 0 262px; height: 190px; overflow: hidden;
  scroll-snap-align: center; background: var(--bg-3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%);
  transition: transform var(--hiz);
}
.cs .kat-kare img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.35);
  opacity: .3; filter: saturate(1.2); transition: transform .5s cubic-bezier(.22, .7, .3, 1), opacity var(--hiz);
}
.cs .kat-kare::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .86)); }
.cs .kat-kare:hover { transform: translateY(-5px); }
.cs .kat-kare:hover img { transform: scale(1.45); opacity: .5; }
.cs .kat-ad {
  position: absolute; left: 18px; right: 18px; bottom: 15px; z-index: 1;
  font-family: var(--fd); font-size: 17px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--ink);
}

/* ---------- video kartı (cylex / 0resmon) ---------- */
.cs .video-kart {
  position: relative; display: block; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--bg-3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%);
}
.cs .video-kart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .5s cubic-bezier(.22, .7, .3, 1), opacity var(--hiz); }
.cs .video-kart:hover img { transform: scale(1.04); opacity: .9; }
.cs .video-kart .oynat {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 74px; height: 74px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); border-radius: 50%;
  box-shadow: 0 0 0 0 var(--accent-glow); transition: transform var(--hiz), box-shadow var(--hiz);
}
.cs .video-kart:hover .oynat { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 16px rgba(255, 46, 73, .14); }
.cs .video-kart .oynat svg { width: 30px; height: 30px; margin-left: 3px; }
.cs .video-kart .video-alt {
  position: absolute; left: 22px; bottom: 20px; z-index: 2; display: grid; gap: 3px;
}
/* ana sayfadaki video ızgarası: aynı kart, ikişerli */
.cs .video-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
.cs .video-izgara .video-kart { max-width: none; width: 100%; padding: 0; border: 0; cursor: pointer; color: inherit; font: inherit; }
.cs .video-izgara .video-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs .video-kart.video-oynuyor { cursor: default; }
.cs .video-kart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs .video-ad { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 13px; }
.cs .video-ad b { font-family: var(--fd); font-size: 16px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); }
.cs .video-ad > span { font-family: var(--fm); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; transition: color var(--hiz); }
.cs .video-ad:hover > span { color: var(--accent); }
@media (max-width: 760px) { .cs .video-izgara { grid-template-columns: minmax(0, 1fr); } }

.cs .video-kart .video-alt b { font-family: var(--fd); font-size: 17px; font-style: italic; text-transform: uppercase; }
.cs .video-kart .video-alt span { font-family: var(--fm); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- yorumlar ---------- */
.cs .rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.cs .rcard {
  position: relative; padding: 24px; display: grid; gap: 14px; background: var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%);
}
.cs .rcard::before { content: ""; position: absolute; inset: 1px; background: var(--bg-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%); }
.cs .rcard > * { position: relative; z-index: 1; }
.cs .rcard.tpl { background: transparent; border: 1px dashed var(--line-2); clip-path: none; }
.cs .rcard.tpl::before { display: none; }
/* .who üst menüde hesap düğmesi; yorum kartında sıfırlanıyor */
.cs .rcard .who {
  display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0;
  max-width: none; font-family: var(--fb); font-size: inherit; color: inherit; clip-path: none;
}
.cs .rcard .av {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: var(--bg-3); font-family: var(--fm); font-size: 14px; color: var(--ink-3);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}
.cs .rcard .nm { font-weight: 600; color: var(--ink); }
.cs .rcard .dt { font-family: var(--fm); font-size: 12px; color: var(--ink-3); }
.cs .rcard .txt { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.cs .rcard .tag {
  font-family: var(--fm); font-size: 10.5px; letter-spacing: .18em; color: var(--ink-3);
  border-top: 1px solid var(--line); padding-top: 12px; margin: 0;
}

.cs .rcard .yildiz { margin: 0; color: var(--warn); letter-spacing: .12em; font-size: 15px; }

/* ---------- yakında (panelden) ---------- */
.cs .yk-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.cs .yk-gorsel {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kes)), calc(100% - var(--kes)) 100%, 0 100%);
}
.cs .yk-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.cs .yk-rozet {
  position: absolute; left: 12px; top: 12px; padding: 4px 9px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--fm); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.cs .yk-kart h3 { margin-top: 14px; font-size: 17px; }
.cs .yk-kart p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }

/* ---------- SSS araması ---------- */
.cs .faq-ara { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cs .faq-ara input {
  flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--ink); font-family: var(--fb); font-size: 15px; padding: 12px 16px;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 98% 100%, 0 100%);
}
.cs .faq-ara input::placeholder { color: var(--ink-3); }
.cs .faq-ara input:focus { outline: none; border-color: var(--accent-line); }
.cs .faq-sayi { font-family: var(--fm); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* ---------- rakamlar: 0resmon ölçüsünde iri ---------- */
.cs .sayi b { font-size: clamp(44px, 6.6vw, 82px); }
.cs .sayi:nth-child(2) b { color: var(--ink); }
.cs .sayi:nth-child(3) b { color: var(--accent); }
.cs .sayi:nth-child(4) b { color: var(--ink); }

/* ---------- dar ekran ---------- */
@media (max-width: 1040px) {
  .cs .hero-orta .wrap { padding-block: 64px 56px; gap: 36px; }
  .cs .kat-kare { flex: 0 0 216px; height: 160px; }
}
@media (max-width: 760px) {
  .cs .kat-kare { flex: 0 0 182px; height: 138px; }
  .cs .video-kart .oynat { width: 56px; height: 56px; }
  .cs .video-kart .oynat svg { width: 22px; height: 22px; }
  .cs .faq-ara { flex-wrap: wrap; }
}

/* Bölüm altındaki "tümünü gör" satırı — ortalanmış başlığın devamı. */
.cs .sec-cta { margin-top: 22px; display: flex; justify-content: center; }

/* ==========================================================================
   24) SÜRÜM 5 — HERO SAHNESİ, FARE IŞIĞI, ÖZEL İMLEÇ, 3D KART SAHNESİ
   ========================================================================== */

/* ---------- BUILD.CREATE.DOMINATE. ---------- */
.cs .hero-v5 {
  position: relative; overflow: hidden; min-height: 92vh;
  display: grid; align-items: center;
  /* Sütun DOLDURMALI: auto sütun .wrap'i içeriğine göre daraltıyor,
     max-width + margin:auto da onu ortalıyordu. */
  grid-template-columns: minmax(0, 1fr);
}
/* width:100% ŞART: .wrap'te margin:0 auto var ve otomatik kenar boşluğu
   grid öğesinde stretch'i iptal ediyor — kutu içeriğine göre daralıp
   ortalanıyordu, sola yaslı hero ortada duruyordu. */
.cs .hero-v5 .wrap {
  position: relative; z-index: 2; width: 100%; text-align: left;
  padding-block: 118px 100px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px;
}
.cs .hero-v5 .hero-yazi { max-width: 860px; margin: 0; }

/* ==========================================================================
   32) HERO MARKA GÖRSELİ — 3D C5M rozeti
   Sol taraftaki slogan ana odak; bu görsel yalnızca denge ve marka kimliği
   için. Yanıp sönen neon yok: tek bir yavaş salınım ve çok ince bir hâle.
   ========================================================================== */
.cs .hero-logo {
  position: relative; width: 340px; height: 340px; flex: none;
  display: grid; place-items: center; pointer-events: none;
}
/* arkadaki çok ince kırmızı hâle — sabit, nefes almıyor */
.cs .hl-isik {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 46, 73, .26), transparent 70%);
  filter: blur(26px);
}

.cs .hl-sahne { perspective: 900px; perspective-origin: 50% 45%; }
/* fareye göre çok hafif eğilme — site.js --ex/--ey veriyor */
.cs .hl-egim {
  transform: rotateX(calc(var(--ey, 0) * 1deg)) rotateY(calc(var(--ex, 0) * 1deg));
  transition: transform .5s cubic-bezier(.22, .7, .3, 1);
  transform-style: preserve-3d;
}
/* yavaş, sürekli salınım: kendi ekseninde döner ama yazı hiç ters dönmez */
.cs .hl-don {
  transform-style: preserve-3d;
  animation: hl-salin 16s ease-in-out infinite;
}
@keyframes hl-salin {
  0%   { transform: rotateY(-22deg) rotateX(6deg); }
  50%  { transform: rotateY( 22deg) rotateX(-4deg); }
  100% { transform: rotateY(-22deg) rotateX(6deg); }
}

.cs .hl-govde { position: relative; width: 236px; height: 236px; transform-style: preserve-3d; }

/* gövdenin yan yüzleri: 12 katman, her biri biraz daha geride ve koyu */
.cs .hl-kat {
  position: absolute; inset: 0; border-radius: 30px;
  background: #7C0F20;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.cs .hl-kat:nth-child(1)  { transform: translateZ(-2px);  background: #B31730; }
.cs .hl-kat:nth-child(2)  { transform: translateZ(-4px);  background: #A81529; }
.cs .hl-kat:nth-child(3)  { transform: translateZ(-6px);  background: #9C1326; }
.cs .hl-kat:nth-child(4)  { transform: translateZ(-8px);  background: #901123; }
.cs .hl-kat:nth-child(5)  { transform: translateZ(-10px); background: #841020; }
.cs .hl-kat:nth-child(6)  { transform: translateZ(-12px); background: #780E1D; }
.cs .hl-kat:nth-child(7)  { transform: translateZ(-14px); background: #6C0D1A; }
.cs .hl-kat:nth-child(8)  { transform: translateZ(-16px); background: #600B17; }
.cs .hl-kat:nth-child(9)  { transform: translateZ(-18px); background: #540A14; }
.cs .hl-kat:nth-child(10) { transform: translateZ(-20px); background: #480811; }
.cs .hl-kat:nth-child(11) { transform: translateZ(-22px); background: #3C070E; }
.cs .hl-kat:nth-child(12) { transform: translateZ(-24px); background: #30050B; }

/* ön yüz: parlak kırmızı, üstten kenar ışığı */
.cs .hl-yuz {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 30px;
  background: linear-gradient(155deg, #FF4A61 0%, #FF2E49 38%, #C9142F 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -18px 30px -18px rgba(0, 0, 0, .55);
}
.cs .hl-yuz b {
  font-family: var(--fd); font-size: 62px; font-weight: 800; font-style: italic;
  letter-spacing: -.045em; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .22), 0 0 26px rgba(255, 255, 255, .28);
}
/* yüzeyde ince bir ışık şeridi — parlama değil, sabit kenar vurgusu */
.cs .hl-yuz::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent);
  border-radius: 30px 30px 0 0;
}

/* çevredeki 2-3 soluk, bulanık parça — dikkat dağıtmayacak kadar hafif */
.cs .hl-parca {
  position: absolute; font-family: var(--fd); font-weight: 800; font-style: italic;
  color: var(--accent); letter-spacing: -.04em; filter: blur(2px);
  pointer-events: none; user-select: none;
}
.cs .hl-parca.p1 { top: 6%;   left: 2%;   font-size: 34px; opacity: .13; animation: hl-yuz-1 19s ease-in-out infinite; }
.cs .hl-parca.p2 { bottom: 9%; right: 4%; font-size: 26px; opacity: .10; animation: hl-yuz-2 23s ease-in-out infinite; }
.cs .hl-parca.p3 { top: 42%;  right: -2%; font-size: 18px; opacity: .08; animation: hl-yuz-3 27s ease-in-out infinite; }
@keyframes hl-yuz-1 { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(6px, -12px, 0); } }
@keyframes hl-yuz-2 { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-8px, 9px, 0); } }
@keyframes hl-yuz-3 { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-5px, -7px, 0); } }

/* dar ekranda görsel küçülüyor, 900px altında tamamen kalkıyor:
   slogan tek başına ana odak kalsın */
@media (max-width: 1180px) {
  .cs .hero-logo { width: 260px; height: 260px; }
  .cs .hl-govde { width: 186px; height: 186px; }
  .cs .hl-yuz b { font-size: 48px; }
}
@media (max-width: 900px) {
  .cs .hero-v5 .wrap { grid-template-columns: minmax(0, 1fr); }
  .cs .hero-logo { display: none; }
}

@keyframes cs-slogan { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }

.cs .slogan {
  font-family: var(--fd); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: clamp(42px, 8.6vw, 122px); line-height: .88; letter-spacing: -.038em;
  text-shadow: 0 0 60px rgba(255, 46, 73, .18);
}
.cs .slogan em { font-style: inherit; color: var(--accent); }
.cs .slogan-alt {
  margin-top: 20px; font-family: var(--fb); font-size: clamp(15px, 1.7vw, 21px);
  color: var(--ink-2); letter-spacing: .01em;
  animation: cs-slogan .9s cubic-bezier(.22, .7, .3, 1) .16s both;
}
.cs .hero-v5 .cta   { margin-top: 40px; justify-content: flex-start; animation: cs-gir .8s cubic-bezier(.22,.7,.3,1) .3s both; display: flex; flex-wrap: wrap; gap: 12px; }
.cs .hero-v5 .facts { margin-top: 30px; justify-content: flex-start; animation: cs-gir .8s cubic-bezier(.22,.7,.3,1) .42s both; display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- sinematik harita arka planı ----------
   Sağ tarafı dolduran, yavaşça birbirine geçen harita ekran görüntüleri.
   Solda kararıyor (başlık okunaklı kalsın), sağda net ve görünür. n görsel,
   her biri 7 sn arayla giriyor (döngü = n × 7 sn). Geçişler doğrusal opaklıkla
   birbirini TAM tamamlıyor: biri 7→10.5 sn'de silinirken öbürü aynı anda
   doğuyor, toplam görünürlük hiç düşmüyor (kesik/titreme yok).
   NOT: prefers-reduced-motion'a bağlı DEĞİL — birçok Windows/uzak masaüstünde
   varsayılan 'reduce' olup hareketi tamamen öldürüyordu. */
.cs .hero-harita {
  position: absolute; z-index: 0; pointer-events: none; overflow: hidden;
  top: 0; bottom: 0; left: 24%; right: 0;
  contain: paint;
  /* AKICILIK: hareket eden katmanların üstünde mask/filter YOK — onlar her
     karede yeniden boyanıp takılmaya yol açıyordu. Kenarlar aşağıdaki sabit
     gradyanla kararıyor; slaytlar yalnızca opacity+transform (GPU) ile oynuyor. */
}
.cs .hero-harita::after {
  content: ""; position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5, 5, 8, .72) 20%, rgba(5, 5, 8, .22) 52%, transparent 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%);
}
.cs .hero-harita span {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  backface-visibility: hidden; will-change: opacity, transform;
  animation: cs-harita-gecis calc(var(--n) * 7s) linear infinite,
             cs-harita-kayma  calc(var(--n) * 7s) ease-in-out infinite;
  animation-delay: calc(var(--i) * 7s), calc(var(--i) * 7s);
}
.cs .hero-harita span:nth-child(even) { background-position: 40% center; }
@keyframes cs-harita-gecis {
  0%   { opacity: 0; }
  10%  { opacity: .58; }
  20%  { opacity: .58; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes cs-harita-kayma {
  0%   { transform: scale(1.08) translate3d(4%, 0, 0); }
  30%  { transform: scale(1.3) translate3d(-4%, 0, 0); }
  100% { transform: scale(1.3) translate3d(-4%, 0, 0); }
}
@media (max-width: 1040px) {
  .cs .hero-harita { left: 0; }
}
/* Genel 'reduce' kuralı (.cs * { animation: none !important }) bunu da öldürüyordu;
   çok yavaş, mide bulandırmayan bir kayma olduğu için özellikle geri açıyoruz. */


/* ---------- hafifçe kayan ızgara ---------- */
@keyframes cs-izgara { from { background-position: 0 0, 0 0; } to { background-position: 72px 72px, 72px 72px; } }
.cs .hero-v5 .izgara {
  position: absolute; inset: -72px; z-index: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: cs-izgara 9s linear infinite;
  -webkit-mask-image: radial-gradient(100% 78% at 50% 44%, #000 12%, transparent 76%);
          mask-image: radial-gradient(100% 78% at 50% 44%, #000 12%, transparent 76%);
}

/* ---------- akan kod satırları ----------
   Okunması beklenmiyor: opaklık çok düşük, amacı zemine doku vermek. */
@keyframes cs-kod { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
.cs .kod-akis {
  position: absolute; inset: -6% -2%; z-index: 0; pointer-events: none;
  display: flex; gap: 3vw; justify-content: space-between;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, transparent 24%, #000 72%);
          mask-image: radial-gradient(90% 80% at 50% 50%, transparent 24%, #000 72%);
}
.cs .kod-sutun {
  display: flex; flex-direction: column; flex: 1; min-width: 0;
  font-family: var(--fk); font-size: 11.5px; line-height: 2.5; white-space: nowrap;
  color: var(--accent-2); opacity: .07;
  animation-name: cs-kod; animation-timing-function: linear; animation-iteration-count: infinite;
}
.cs .kod-sutun span { overflow: hidden; text-overflow: clip; }
.cs .kod-sutun:nth-child(even) { animation-direction: reverse; opacity: .05; }

/* ---------- fareyi takip eden ışık ----------
   Konumu site.js --fx/--fy ile veriyor. JS yoksa sol üstte ve görünmez kalır. */
.cs .fare-isik {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 620px; height: 620px; margin: -310px 0 0 -310px; opacity: 0;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 72%);
  filter: blur(26px);
  transform: translate3d(var(--fx, -999px), var(--fy, -999px), 0);
  transition: opacity .45s ease;
}
.cs .fare-isik.acik { opacity: .55; }

/* ---------- özel imleç ----------
   body.imlec-acik sınıfını site.js ekliyor; JS çalışmazsa normal imleç kalır. */
body.imlec-acik, body.imlec-acik .cs a, body.imlec-acik .cs button { cursor: none; }
.cs .imlec {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0;
  transform: translate3d(var(--ix, -99px), var(--iy, -99px), 0);
  transition: opacity .25s ease;
}
.cs .imlec.acik { opacity: 1; }
.cs .imlec i {
  position: absolute; left: 50%; top: 50%; display: block;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 16px var(--accent-glow);
  transition: width .22s cubic-bezier(.22,.7,.3,1), height .22s cubic-bezier(.22,.7,.3,1),
              margin .22s cubic-bezier(.22,.7,.3,1), background .22s ease, border-color .22s ease;
}
/* kart/düğme üstünde büyüyüp halkaya dönüşüyor */
.cs .imlec.buyuk i {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: rgba(255, 46, 73, .14); border: 1px solid var(--accent);
  box-shadow: 0 0 34px var(--accent-glow);
}

/* ==========================================================================
   25) SCRIPT SAHNESİ — fare parlaması + tek sıra kart kaydırıcı
   ========================================================================== */
.cs .sahne { position: relative; }
/* fare konumunda radial parlama; --mx/--my site.js'ten geliyor */
.cs .sahne::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--accent-glow), transparent 68%);
  transition: opacity .4s ease;
}
.cs .sahne.fare-icinde::after { opacity: .5; }
.cs .sahne > * { position: relative; z-index: 1; }

/* ---------- tek sıra kart dizilimi ----------
   Kartlar tek bir yatay sırada; kalkma + çerçevede dönen ışık artık
   ".kart-isik" bloğunda site geneli için tanımlı (aşağıda, bölüm 26). */
.cs .sahne-track { position: relative; }

.cs .pgrid.sahne3d {
  display: flex; flex-wrap: nowrap; gap: 24px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 4px;
  padding: 22px 4px 26px; margin: 0 -4px;
  -webkit-mask-image: none; mask-image: none;
  scrollbar-width: none;
}
.cs .pgrid.sahne3d::-webkit-scrollbar { display: none; }

.cs .pgrid.sahne3d > .pcard { flex: 0 0 300px; scroll-snap-align: start; }

/* tek ürün varsa sahne yok; kart normal genişlikte durur */
.cs .pgrid.sahne3d.tekli { overflow: visible; justify-content: center; }
.cs .pgrid.sahne3d.tekli > .pcard { flex-basis: min(520px, 100%); }

/* ---------- kart içindeki VIEW katmanı ---------- */
.cs .pcard .bak {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgba(6, 7, 10, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--hiz);
}
.cs .pcard .bak span {
  font-family: var(--fm); font-size: 12.5px; font-weight: 700; letter-spacing: .3em;
  color: var(--accent-ink); background: var(--accent); padding: 13px 26px;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 88% 100%, 0 100%);
  transform: translateY(10px) scale(.94); transition: transform .28s cubic-bezier(.22, .7, .3, 1);
}
.cs .pcard:hover .bak { opacity: 1; }
.cs .pcard:hover .bak span { transform: none; }

/* ---------- geçiş okları: kartların en başında (sol) ve en sonunda (sağ) ---------- */
.cs .sahne-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 9;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-3); background: var(--bg); color: var(--ink);
  cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
  transition: border-color var(--hiz), color var(--hiz), background var(--hiz), transform .2s ease;
}
.cs .sahne-ok-sol { left: -6px; }
.cs .sahne-ok-sag { right: -6px; }
.cs .sahne-ok svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs .sahne-ok:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-50%) scale(1.06); }
.cs .sahne-ok:disabled { opacity: 0; pointer-events: none; }

/* ==========================================================================
   26) KART HOVER — kalkma + çerçevede dolaşan kırmızı segment (site geneli)
   Işığı kartın KENDİ arka planıyla çizmek işe yaramıyor: kartın üst yarısını
   kaplayan görsel (.shot) opak, çerçeveyi örtüyor — o yüzden kartın arka planı
   ancak alt metin bölgesinin etrafında görünüyor, tam tur dönemiyor. Bu yüzden
   ışık, her şeyin ÜSTÜNDE duran ince bir halka katmanı (::after) olarak
   çiziliyor: conic-gradient + mask ile 3px'lik çerçeve şeridi, açısı dönünce
   parlak kırmızı parça sol üstten saat yönünde tüm kenarları ve köşeleri
   dolaşıyor. ::before DEĞİL ::after: ::before kartın yüzey katmanı. */
.cs .pcard, .cs .wcard, .cs .rcard:not(.tpl), .cs .video-kart {
  transition: transform .4s cubic-bezier(.22, .7, .3, 1), box-shadow .4s ease;
}
/* NOT: burada bilerek scale() YOK. scale(1.02) eklenince tarayıcı, maskeli
   halkayı ölçeklenmiş rasterde yeniden örneklüyor ve halkanın SOL/ÜST dış
   kenarını yiyor: sağ kenar 3px parlak, sol kenar 1px sönük kalıyordu.
   Sadece translateY ile halka dört kenarda da eşit kalınlıkta. */
.cs .pcard:hover, .cs .wcard:hover, .cs .rcard:not(.tpl):hover, .cs .video-kart:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px -22px rgba(0, 0, 0, .55);
}
/* Kırmızılık artık dönen segment; hover'da çerçevenin tamamı kırmızı olmasın */
.cs .pcard:hover { background: var(--line-2); }

@property --kart-acisi {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes kart-cerceve-tur { to { --kart-acisi: 360deg; } }

.cs .pcard::after, .cs .wcard::after, .cs .rcard:not(.tpl)::after, .cs .video-kart::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  padding: 3px;                       /* çerçeve şeridinin kalınlığı */
  /* çoğu saydam, yalnızca bir parçası parlak kırmızı: kuyruğu sönümlenen segment */
  background: conic-gradient(from var(--kart-acisi),
    transparent 0deg,
    transparent 252deg,
    rgba(255, 46, 73, .30) 288deg,
    rgba(255, 46, 73, .80) 314deg,
    var(--accent) 328deg,
    var(--accent) 349deg,
    #FFC2CB 355deg,
    var(--accent) 358deg,
    transparent 360deg);
  /* dış dikdörtgenden iç dikdörtgeni çıkar → geriye yalnızca çerçeve şeridi kalır */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 4px var(--accent-glow));
  opacity: 0;
  transition: opacity .3s ease;
}
.cs .pcard:hover::after, .cs .wcard:hover::after, .cs .rcard:not(.tpl):hover::after, .cs .video-kart:hover::after {
  opacity: 1;
  animation: kart-cerceve-tur 2.8s linear infinite;
}

/* ---------- hareket kapalıysa ---------- */


/* ---------- dar ekran ---------- */
@media (max-width: 1040px) {
  .cs .hero-v5 { min-height: 0; }
  .cs .hero-v5 .wrap { padding-block: 72px 64px; }
  .cs .pgrid.sahne3d > .pcard { flex-basis: 270px; }
}
@media (max-width: 760px) {
  .cs .kod-akis { display: none; }
  .cs .pgrid.sahne3d > .pcard { flex-basis: 82vw; }
}
/* Dokunmatikte özel imleç ve fare ışığı anlamsız. */
@media (pointer: coarse) {
  .cs .fare-isik, .cs .imlec { display: none !important; }
  body.imlec-acik, body.imlec-acik .cs a, body.imlec-acik .cs button { cursor: auto; }
}

/* ---------- slogan alt alta (v5.1) ----------
   Üç kelime üç satır; her satır sırayla giriyor. Animasyon .slogan'dan
   alınıp satırlara verildi, yoksa üçü birlikte tek blok gibi açılıyordu. */
.cs .slogan span { display: block; animation: cs-slogan .85s cubic-bezier(.22, .7, .3, 1) both; }
.cs .slogan span:nth-child(1) { animation-delay: .04s; }
.cs .slogan span:nth-child(2) { animation-delay: .16s; }
.cs .slogan span:nth-child(3) { animation-delay: .28s; }
.cs .slogan-alt { max-width: 46ch; }

/* Sola yaslı hero'da ışık kümeleri de sola toplansın. */
.cs .hero-v5 .aurora i:nth-child(1) { left: -4%; width: 52%; }
.cs .hero-v5 .aurora i:nth-child(3) { left: 24%; }

@media (max-width: 760px) {
  .cs .hero-v5 .wrap { padding-block: 64px 56px; }
}

/* ==========================================================================
   27) NAVBAR — açılır menü, arama, sepet özeti, mobil
   Geçişler bilinçli olarak 150–300ms; ağır glow ve cam efekti yok.
   ========================================================================== */
.cs { --gecis: .18s cubic-bezier(.22, .7, .3, 1); }

.cs .nav .wrap { position: relative; }
.cs .nav nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }

/* 6 menü öğesi + araç çubuğu 1240px'lik kaba sığsın diye ölçüler dar
   tutuldu; daha gevşek olursa araçlar alt satıra taşıyor. */
.cs .nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fm); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2); padding: 8px 9px; border-radius: 8px;
  transition: color var(--gecis), background var(--gecis);
}
.cs .nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.cs .nav-link.on { color: var(--ink); }
.cs .nav-link.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--accent);
}
.cs .nav-link .ok { width: 13px; height: 13px; opacity: .7; transition: transform var(--gecis); }
.cs .nav-acilir:hover .nav-link .ok { transform: rotate(180deg); }

/* ---------- Scripts açılır menüsü ---------- */
.cs .nav-acilir { position: relative; }
.cs .acilir-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 290px; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 24px 48px -28px #000;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.cs .nav-acilir:hover .acilir-menu,
.cs .nav-acilir:focus-within .acilir-menu { opacity: 1; visibility: visible; transform: none; }
/* tıklayınca kapanır (sayfa yenilenmediği için odak / fare menüde kalıyordu); fare çıkınca site.js sınıfı kaldırır */
.cs .nav-acilir.kapat .acilir-menu { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.cs .nav-acilir.kapat .nav-link .ok { transform: none; }
/* fare menüye inerken aradaki boşlukta kaybolmasın */
.cs .nav-acilir::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }

.cs .acilir-menu a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
  transition: background var(--gecis);
}
.cs .acilir-menu a:hover { background: var(--bg-3); }
/* ikon+yazı satır düzeni: Scripts açılır menüsü ile hesap menüsü ortak kullanıyor */
.cs .acilir-menu .am-ic, .cs .hesapmenu .am-ic {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  transition: background var(--gecis, var(--hiz)), border-color var(--gecis, var(--hiz)), color var(--gecis, var(--hiz));
}
.cs .acilir-menu .am-ic svg, .cs .hesapmenu .am-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cs .acilir-menu .am-yazi, .cs .hesapmenu .am-yazi { display: grid; gap: 1px; min-width: 0; }
.cs .acilir-menu b, .cs .hesapmenu .am-yazi b { font-family: var(--fm); font-size: 12px; letter-spacing: .04em; color: var(--ink); font-weight: 600; }
.cs .acilir-menu i, .cs .hesapmenu .am-yazi i { font-style: normal; font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- arama paneli ---------- */
.cs .ara-panel {
  border-top: 1px solid var(--line); background: var(--bg-2);
  animation: cs-ara-ac .18s cubic-bezier(.22, .7, .3, 1) both;
}
@keyframes cs-ara-ac { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cs .ara-panel .wrap { display: flex; align-items: center; gap: 12px; padding-block: 12px; }
.cs .ara-panel .ara-ic { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.cs .ara-panel input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--ink); font-family: var(--fb); font-size: 16px;
}
.cs .ara-panel input::placeholder { color: var(--ink-3); }
.cs .ara-ipucu kbd { font-size: 10px; padding: 2px 6px; }
.cs .ara-kapat {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 8px; background: none; color: var(--ink-2);
  cursor: pointer; transition: color var(--gecis), border-color var(--gecis);
}
.cs .ara-kapat:hover { color: var(--ink); border-color: var(--line-3); }
.cs .ara-kapat svg { width: 14px; height: 14px; }

/* ---------- sepet özeti ---------- */
.cs .sepet-sar { position: relative; display: flex; }
.cs .sepet-ozet {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 290px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px;
  box-shadow: 0 24px 48px -28px #000;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.cs .sepet-sar:hover .sepet-ozet,
.cs .sepet-sar:focus-within .sepet-ozet { opacity: 1; visibility: visible; transform: none; }
.cs .so-bas { font-family: var(--fm); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding: 2px 4px 8px; }
.cs .so-liste { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.cs .so-satir { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 5px; border-radius: 8px; }
/* sepet panelindeki satır (tam ekran): görsel + ad/adet + fiyat + silme,
   her satır kartlarla aynı dilde ince çerçeveli bir kutu */
.cs .so-satir-tam {
  grid-template-columns: 68px minmax(0, 1fr) auto auto auto;
  grid-template-areas: "gorsel ad adet fiyat sil";
  gap: 14px; padding: 14px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px;
  transition: border-color var(--gecis), background var(--gecis);
}
.cs .so-satir-tam:hover { background: var(--bg-3); border-color: var(--line-3); }
.cs .so-satir-tam img { grid-area: gorsel; width: 68px; height: 68px; border-radius: 9px; }
.cs .so-satir-tam .ad { grid-area: ad; font-size: 15.5px; white-space: normal; }
.cs .so-satir-tam .so-adet { grid-area: adet; }
.cs .so-satir-tam .fi { grid-area: fiyat; }
.cs .so-satir-tam .so-sil { grid-area: sil; }
.cs .so-satir-tam .ad i { font-size: 12.5px; margin-top: 3px; }
.cs .so-satir-tam .fi { font-size: 16px; font-family: var(--fd); font-weight: 800; font-style: italic; text-align: right; }
.cs .so-satir-tam .fi i { display: block; font-style: normal; font-family: var(--fm); font-size: 11px; font-weight: 400; color: var(--ink-3); margin-top: 2px; }

/* adet kontrolü: [-] N [+] */
.cs .so-adet { display: flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.cs .so-adet-btn {
  width: 30px; height: 30px; padding: 0; border: 0; background: var(--bg-3); color: var(--ink);
  font-family: var(--fm); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.cs .so-adet-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.cs .so-adet-btn:disabled { opacity: .35; cursor: default; }
.cs .so-adet-sayi {
  min-width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--fm); font-size: 13px; color: var(--ink); background: var(--bg-2);
  border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
}
.cs .so-sil {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 8px; background: none; color: var(--ink-3);
  cursor: pointer; transition: color var(--gecis), border-color var(--gecis), background var(--gecis), transform var(--gecis);
}
.cs .so-sil:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
/* silme sırasında/sonrasında satır yumuşakça küçülüp kayboluyor,
   diğer satırlar yerlerini sessizce alıyor (grid + transition) */
.cs .so-satir-tam.cikiyor {
  opacity: 0; transform: scale(.96) translateX(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.cs .so-sil:disabled { opacity: .5; cursor: default; }
.cs .so-sil svg { width: 16px; height: 16px; }
.cs .so-satir:hover { background: var(--bg-3); }
.cs .so-satir img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.cs .so-satir .ad { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs .so-satir .ad i { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); }
.cs .so-satir .fi { font-family: var(--fm); font-size: 12.5px; color: var(--ink); }
.cs .so-bos { padding: 10px 6px 14px; font-size: 13px; color: var(--ink-3); }
.cs .so-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cs .so-toplam { font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cs .so-toplam b { display: block; font-size: 15px; letter-spacing: 0; color: var(--ink); }
.cs .so-alt .btn { clip-path: none; border-radius: 8px; }

/* ---------- premium giriş düğmesi ---------- */
.cs #loginBtn {
  clip-path: none; border-radius: 9px; border: 1px solid var(--line-3);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  color: var(--ink); padding: 10px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: border-color var(--gecis), background var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.cs #loginBtn:hover {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, rgba(255, 46, 73, .16), rgba(255, 46, 73, .06));
  color: #fff; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 18px -12px var(--accent-glow);
}

/* ---------- mobil menü düğmesi ---------- */
.cs .mobil-ac {
  display: none; width: 38px; height: 34px; padding: 0; margin-right: 4px;
  border: 1px solid var(--line-2); border-radius: 9px; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: border-color var(--gecis);
}
.cs .mobil-ac span { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: var(--ink-2); transition: transform var(--gecis), opacity var(--gecis); }
.cs .mobil-ac:hover { border-color: var(--line-3); }
.cs .mobil-ac[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.cs .mobil-ac[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cs .mobil-ac[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .cs .mobil-ac { display: flex; order: -1; }
  .cs .nav .wrap { flex-wrap: nowrap; gap: 8px; }
  .cs .brand { min-width: 0; }
  .cs .brand .name { white-space: nowrap; }
  .cs #loginBtn { white-space: nowrap; }
  .cs .nav nav {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 55;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    background: var(--bg-2); border-bottom: 1px solid var(--line-2);
    display: none;
  }
  .cs .nav nav.acik { display: flex; animation: cs-ara-ac .18s cubic-bezier(.22, .7, .3, 1) both; }
  .cs .nav-link { padding: 11px 12px; font-size: 12.5px; }
  .cs .nav-link.on::after { display: none; }
  .cs .nav-acilir .acilir-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; background: none; border: 0; box-shadow: none; padding: 0 0 6px 10px;
  }
  .cs .acilir-menu a { padding: 8px; }
  .cs .navtools { gap: 6px; }
  .cs .langbar { display: none; }
}
@media (max-width: 620px) {
  .cs #loginBtn { padding: 9px 12px; font-size: 11px; }
  .cs .sepet-ozet { width: min(290px, calc(100vw - 32px)); }
  /* dar ekranda ikon sırasını seyret: arama ve sepet kalsın */
  .cs .navtools .marka-grup { display: none; }
  /* dar ekran: marka, para birimi ve giriş birlikte sığsın */
  .cs .brand { gap: 7px; }
  .cs .brand .brand-logo { height: 36px; }
  .cs .brand .name { display: none; }   /* logo (kedi) marka işareti olarak kalıyor */
  .cs .navtools { gap: 4px; }
  .cs .para-sec { padding: 0 17px 0 8px; font-size: 11px; background-position: right 3px center; background-size: 12px; }
  .cs #loginBtn { padding: 0 9px; gap: 5px; }
  .cs button.who { max-width: 92px; }
}

/* ==========================================================================
   28) SCRIPTS (MARKETPLACE) GÖRÜNÜMÜ
   ========================================================================== */
.cs .pazar { padding-block: 44px 96px; animation: cs-pazar-gir .22s cubic-bezier(.22, .7, .3, 1) both; }
@keyframes cs-pazar-gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cs .pazar-ust {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; margin-bottom: 22px;
}
.cs .pazar-baslik { font-size: clamp(26px, 3.4vw, 38px); }
.cs .pazar-alt { margin-top: 6px; font-family: var(--fm); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cs .pazar-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs .pazar-ara {
  display: flex; align-items: center; gap: 9px; min-width: 200px; height: 38px; box-sizing: border-box;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 0 12px;
  transition: border-color var(--gecis);
}
.cs .pazar-ara:focus-within { border-color: var(--accent-line); }
.cs .pazar-ara svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.cs .pazar-ara input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font-family: var(--fb); font-size: 13px; }
.cs .pazar-ara input::placeholder { color: var(--ink-3); }
.cs .pazar-sirala {
  height: 38px; box-sizing: border-box;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--ink-2); font-family: var(--fm); font-size: 11.5px; padding: 0 12px; cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis);
}
.cs .pazar-sirala:hover { border-color: var(--line-3); color: var(--ink); }

.cs .pazar-filtre { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.cs .pazar-filtre button {
  font-family: var(--fm); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 8px 15px; cursor: pointer;
  transition: color var(--gecis), border-color var(--gecis), background var(--gecis);
}
.cs .pazar-filtre button:hover { color: var(--ink); border-color: var(--line-3); }
.cs .pazar-filtre button.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.cs .pazar-izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.cs .pazar-bos { padding: 46px 20px; text-align: center; color: var(--ink-2); border: 1px dashed var(--line-2); border-radius: 14px; }

/* ---------- marketplace kartı ---------- */
.cs .pz-kart {
  position: relative; display: flex; flex-direction: column;
  background: var(--line-2); border-radius: 14px;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.cs .pz-kart::before { content: ""; position: absolute; inset: 1px; z-index: 0; background: var(--bg-2); border-radius: 13px; }
.cs .pz-kart > * { position: relative; z-index: 1; }
.cs .pz-kart:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px #000; }

.cs .pz-gorsel {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 13px 13px 0 0; margin: 1px 1px 0; background: var(--bg-3);
}
.cs .pz-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s cubic-bezier(.22, .7, .3, 1); }
.cs .pz-kart:hover .pz-gorsel img { transform: scale(1.04); }
.cs .pz-gorsel .pz-rid { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fm); font-size: 14px; color: var(--ink-3); }
.cs .pz-indirim {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--fm); font-size: 11px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink); padding: 4px 9px; border-radius: 6px;
}

.cs .pz-ic { display: flex; flex-direction: column; gap: 10px; padding: 15px 16px 16px; flex: 1; }
.cs .pz-ad { font-size: 16px; font-weight: 700; line-height: 1.35; }
.cs .pz-ad a { transition: color var(--gecis); }
.cs .pz-ad a:hover { color: var(--accent); }

/* puan + satış: yalnızca site.js'teki URUN_ISTATISTIK doluysa basılır */
.cs .pz-olcu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--fm); font-size: 11.5px; color: var(--ink-3); }
.cs .pz-olcu span { display: inline-flex; align-items: center; gap: 5px; }
.cs .pz-olcu svg { width: 13px; height: 13px; }
.cs .pz-puan { color: var(--warn); }
.cs .pz-puan b { color: var(--ink); font-weight: 700; }
.cs .pz-satis b { color: var(--ink-2); font-weight: 600; }

.cs .pz-fiyat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.cs .pz-fiyat .now { font-family: var(--fd); font-size: 22px; font-weight: 800; font-style: italic; letter-spacing: -.03em; }
.cs .pz-fiyat .was { font-size: 13px; color: var(--ink-3); text-decoration: line-through; }

.cs .pz-dugme { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cs .pz-dugme .btn { clip-path: none; border-radius: 8px; transition: background var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis); }
.cs .pz-dugme .btn-r { background: var(--ink); color: var(--bg); }
.cs .pz-dugme .btn-r:hover { background: #fff; transform: translateY(-1px); }
.cs .pz-dugme .btn-o { border-color: var(--line-2); }
.cs .pz-dugme .btn-o:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* ==========================================================================
   30) NEDEN BİZ + ÖNE ÇIKANLAR GÖRÜNÜMLERİ
   Mevcut tasarım dili: koyu zemin, 1px çerçeve, yuvarlak köşe, kırmızı vurgu.
   ========================================================================== */
.cs .neden-ust, .cs .one-ust { max-width: 640px; margin: 0 auto 30px; text-align: center; }
.cs .neden-alt, .cs .one-alt { margin-top: 10px; font-size: 16px; color: var(--ink-2); }

.cs .neden-izgara { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cs .nd-kart {
  position: relative; padding: 22px 22px 24px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.cs .nd-kart:hover {
  transform: translateY(-5px);
  border-color: var(--accent-line);
  box-shadow: 0 18px 38px -24px #000, 0 0 18px -8px var(--accent-glow);
}
.cs .nd-ic {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  transition: background var(--gecis);
}
.cs .nd-kart:hover .nd-ic { background: rgba(255, 46, 73, .16); }
.cs .nd-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs .nd-kart h3 { margin-top: 15px; font-size: 17px; font-style: italic; text-transform: uppercase; }
.cs .nd-kart p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }

.cs .neden-cta, .cs .one-cta { margin-top: 32px; text-align: center; }
.cs .neden-cta .btn, .cs .one-cta .btn { clip-path: none; border-radius: 9px; }

/* ---- öne çıkanlar: en fazla 3 kart ---- */
.cs .one-izgara {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 940px; margin: 0 auto;
}
.cs .oc-kart {
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.cs .oc-kart:hover {
  transform: translateY(-5px); border-color: var(--accent-line);
  box-shadow: 0 20px 40px -26px #000, 0 0 18px -8px var(--accent-glow);
}
.cs .oc-gorsel { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); }
.cs .oc-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s cubic-bezier(.22, .7, .3, 1); }
.cs .oc-kart:hover .oc-gorsel img { transform: scale(1.04); }
.cs .oc-gorsel .pz-rid { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fm); font-size: 14px; color: var(--ink-3); }
.cs .oc-ic { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px 17px; flex: 1; }
.cs .oc-ad { font-size: 16px; font-weight: 700; line-height: 1.35; }
.cs .oc-ad a { transition: color var(--gecis); }
.cs .oc-ad a:hover { color: var(--accent); }
.cs .oc-puan { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fm); font-size: 12.5px; color: var(--warn); }
.cs .oc-puan svg { width: 14px; height: 14px; }
.cs .oc-puan b { color: var(--ink); }
.cs .oc-fiyat { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 4px; }
.cs .oc-fiyat .now { font-family: var(--fd); font-size: 21px; font-weight: 800; font-style: italic; letter-spacing: -.03em; }
.cs .oc-fiyat .was { font-size: 13px; color: var(--ink-3); text-decoration: line-through; }

/* ==========================================================================
   33) SEPETE EKLEME GERİ BİLDİRİMİ
   Uçan klon, varış pop'u, badge belirmesi ve düğme onayı. Hepsi kısa ve
   ölçülü: abartılı konfeti ya da sürekli parlama yok.
   ========================================================================== */
/* DİKKAT: bu iki öğe document.body'ye ekleniyor, yani .cs'in DIŞINDA.
   Seçicilere .cs yazılırsa kural hiç uygulanmaz (fixed olmaz, klon sayfanın
   altına normal akışta düşer). O yüzden bilerek kök seviyede. */
.sp-ucan {
  position: fixed; z-index: 120; pointer-events: none;
  border-radius: 12px; background-size: cover; background-position: center;
  background-color: #13161D;
  box-shadow: 0 0 0 1px rgba(255, 46, 73, .32), 0 10px 30px -12px rgba(255, 46, 73, .55);
  will-change: transform, opacity;
}

.sp-parcacik { position: fixed; z-index: 121; width: 0; height: 0; pointer-events: none; }
.sp-parcacik i {
  position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: #FF2E49;
  animation: sp-sacil .28s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes sp-sacil {
  from { transform: translate(0, 0) scale(1); opacity: .95; }
  to   { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
}

/* sepet ikonu varışta hafifçe büyüyüp normale dönüyor */
.cs .iconbtn.basket.pop { animation: sp-ikon-pop .4s cubic-bezier(.3, .9, .4, 1); }
@keyframes sp-ikon-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* badge: scale(0) -> 1.2 -> 1 */
.cs .iconbtn .dot.pat { animation: sp-badge .34s cubic-bezier(.3, .9, .4, 1); }
@keyframes sp-badge {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* düğmenin kısa onay hâli */
.cs .btn.eklendi { background: #1E9E5A; color: #fff; border-color: transparent; }
.cs .pz-dugme .btn-r.eklendi,
.cs .pcard .acts .btn-r.eklendi { background: #1E9E5A; color: #fff; }
/* ürün zaten sepetteyken düğmenin yanında kalıcı işaret */
.cs [data-paket-id].sepette:not(.eklendi)::after {
  content: "✓"; margin-left: 7px; color: #46D98A; font-size: 12px;
}

@media (max-width: 640px) {
  .sp-ucan { box-shadow: 0 0 0 1px rgba(255, 46, 73, .32); }
}

/* ==========================================================================
   31) MİNİ SEPET — sağdan açılan çekmece
   ========================================================================== */
/* Tam ekran: sağdan dar bir panel değil, mevcut sayfanın üzerine oturan
   tam sayfa bir görünüm. Arkadaki içerik hiç görünmüyor (panel opak ve
   inset:0), body kaydırması JS'te kilitleniyor. */
.cs .sepet-cekmece { position: fixed; inset: 0; z-index: 95; }
.cs .sc-perde { position: absolute; inset: 0; background: var(--bg); }
.cs .sc-panel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  animation: sc-gir .22s cubic-bezier(.22, .7, .3, 1) both;
}
@keyframes sc-gir { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

.cs .sc-ust {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.cs .sc-ust b { font-family: var(--fd); font-size: 22px; font-style: italic; text-transform: uppercase; }
/* belirgin kapatma düğmesi — küçük bir ikon değil, gözle görülür bir buton */
.cs .sc-x {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-3); color: var(--ink-2);
  cursor: pointer; transition: color var(--gecis), border-color var(--gecis), background var(--gecis), transform var(--gecis);
}
.cs .sc-x:hover { color: #fff; border-color: var(--accent); background: var(--accent); transform: translateY(-1px); }
.cs .sc-x svg { width: 18px; height: 18px; }

.cs .sc-liste {
  flex: 1; min-height: 0; overflow: auto;
  padding: 28px 24px; display: grid; gap: 10px; align-content: start; justify-items: stretch;
  max-width: 760px; width: 100%; margin: 0 auto;
}
.cs .sc-liste:empty::before { content: ""; }

.cs .sc-alt {
  flex: none; padding: 18px 24px; border-top: 1px solid var(--line); background: var(--bg-2);
}
.cs .sc-alt-ic { max-width: 760px; width: 100%; margin: 0 auto; display: grid; gap: 12px; }
/* Ara Toplam / İndirim / Toplam — hepsi GERÇEK sepet sayılarından
   (assets/site.js sepetOzetYaz), sahte değer yok. */
.cs .sc-ozet { display: grid; gap: 7px; margin-bottom: 4px; }
.cs .sc-ozet-satir { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cs .sc-ozet-satir span { font-family: var(--fm); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cs .sc-ozet-satir b { font-family: var(--fm); font-size: 14px; color: var(--ink); }
.cs .sc-ozet-indirim b { color: #46D98A; }
.cs .sc-ozet-toplam { padding-top: 9px; margin-top: 2px; border-top: 1px solid var(--line); }
.cs .sc-ozet-toplam span { color: var(--ink-2); }
.cs .sc-ozet-toplam b { font-family: var(--fd); font-size: 26px; font-weight: 800; font-style: italic; letter-spacing: -.03em; }
.cs .sc-alt .btn { clip-path: none; border-radius: 9px; width: 100%; padding-block: 15px; }
.cs .sc-not { font-size: 12px; color: var(--ink-3); text-align: center; }

/* boş sepet: tam ekranda ortalı, göze görünür bir mesaj */
.cs .sc-liste .so-bos {
  grid-column: 1 / -1; padding: 70px 20px; text-align: center;
  font-size: 15.5px; color: var(--ink-2);
}

@media (max-width: 640px) {
  .cs .nd-kart { padding: 18px; }
  .cs .sc-ust { padding: 16px 16px; }
  .cs .sc-ust b { font-size: 18px; }
  .cs .sc-liste { padding: 16px; gap: 8px; }
  .cs .sc-alt { padding: 14px 16px; }
  .cs .so-satir-tam {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas: "gorsel ad sil" "adet adet fiyat";
    row-gap: 10px; column-gap: 11px; padding: 10px;
  }
  .cs .so-satir-tam img { width: 52px; height: 52px; }
  .cs .so-satir-tam .fi { text-align: right; }
}

/* ==========================================================================
   34) HESAP BİLGİLERİM / AYARLARI — giriş durumuna göre içerik değişimi
   html.girisli sınıfını site.js (kullaniciGoster) ekleyip çıkarıyor.
   ========================================================================== */
.cs .hesap-giris-gerekli { display: block; }
.cs .hesap-govde { display: none; }
html.girisli .cs .hesap-giris-gerekli { display: none; }
html.girisli .cs .hesap-govde { display: block; }
/* Ayarlar/Hesap görünümlerinde de aynı düzen, class üzerinden pazar-ust yok
   ama tek başlık kullanılıyor; hesap-giris-gerekli zaten neden-ust içinde
   ikinci bir <p> olarak duruyor, başlıkla çakışmasın diye üstten boşluk */
.cs .hesap-sec .neden-alt.hesap-giris-gerekli,
.cs .ayarlar-sec .neden-alt.hesap-giris-gerekli { color: var(--ink-2); }

.cs .hesap-profil {
  display: flex; align-items: center; gap: 16px; margin: 0 auto 30px;
  max-width: 640px; padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px;
}
.cs .hesap-avatar-buyuk { width: 52px; height: 52px; font-size: 20px; border-radius: 12px; }
.cs .hesap-profil b { display: block; font-family: var(--fd); font-size: 18px; font-style: italic; }
.cs .hesap-profil span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }

/* ==========================================================================
   35) SEPETTE KUPON — Tebex'in gerçek /baskets/{id}/coupons uç noktası
   ========================================================================== */
.cs .sc-kupon { display: grid; gap: 8px; margin-bottom: 14px; }
.cs .sc-kupon-form { display: flex; gap: 8px; }
.cs .sc-kupon-form input {
  flex: 1; min-width: 0; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 11px 13px; color: var(--ink); font-family: var(--fm); font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; outline: none;
  transition: border-color var(--gecis);
}
.cs .sc-kupon-form input::placeholder { color: var(--ink-3); text-transform: none; letter-spacing: 0; font-family: var(--fb); }
.cs .sc-kupon-form input:focus { border-color: var(--accent-line); }
.cs .sc-kupon-form button {
  flex: none; clip-path: none; border-radius: 8px; padding: 0 18px;
  font-family: var(--fm); font-size: 12px; letter-spacing: .08em;
}
/* width:auto burada, DAHA ÖZGÜL bir seçiciyle: .sc-alt .btn (Ödemeye Geç
   için, 3 sınıf) width:100% zorluyor ve .sc-alt içindeki HER .btn'i
   yakalıyor. .cs .sc-kupon-form button'ın (2 sınıf+etiket) özgüllüğü ONDAN
   DÜŞÜK olduğu için width:auto'yu orada yazmak işe yaramıyordu — bu yüzden
   düğmeye ayrı bir sınıf (sc-kupon-btn) verip eşit-özgüllükte, kaynakta
   SONRA gelen bir kuralla eziyoruz. */
.cs .sc-alt .sc-kupon-btn { width: auto; }
.cs .sc-kupon-mesaj { font-size: 12.5px; padding: 2px 2px 0; min-height: 1px; }
.cs .sc-kupon-mesaj.hata { color: var(--accent-2); }
.cs .sc-kupon-mesaj.tamam { color: #46D98A; }

/* uygulanmış kupon rozeti */
.cs .sc-kupon-rozet {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 9px;
}
.cs .sc-kupon-rozet svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.cs .sc-kupon-rozet .kod { font-family: var(--fm); font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.cs .sc-kupon-rozet .tutar { margin-left: auto; font-family: var(--fm); font-size: 13px; color: #46D98A; white-space: nowrap; }
.cs .sc-kupon-rozet .kupon-sil {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer;
  transition: color var(--gecis), background var(--gecis);
}
.cs .sc-kupon-rozet .kupon-sil:hover { color: var(--accent); background: rgba(255, 46, 73, .16); }
.cs .sc-kupon-rozet .kupon-sil svg { width: 13px; height: 13px; }

/* toplam satırının üstünde indirim satırı */
.cs .sc-indirim-satiri { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.cs .sc-indirim-satiri span { font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cs .sc-indirim-satiri b { font-family: var(--fm); font-size: 13.5px; color: #46D98A; }

/* ==========================================================================
   29) KAMPANYA DÜĞMESİ + MODALI (site.js her sayfaya basıyor)
   ========================================================================== */
.cs .kmp-btn {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: 56px; height: 56px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(160deg, #1A1A1F, #0A0A0D);
  border: 1px solid var(--accent-line); color: var(--accent);
  box-shadow: 0 12px 28px -16px #000;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis), color var(--gecis);
}
.cs .kmp-btn svg { width: 23px; height: 23px; }
.cs .kmp-btn:hover {
  transform: scale(1.07);
  border-color: var(--accent); color: var(--accent-2);
  box-shadow: 0 14px 30px -16px #000, 0 0 16px -2px var(--accent-glow);
}
/* yalnızca açılışta, kısa: iki kez zıplar ve durur */
.cs .kmp-btn.zipla { animation: kmp-zipla .46s cubic-bezier(.3, .9, .4, 1) 2; }
@keyframes kmp-zipla {
  0%, 100% { transform: translateY(0); }
  38%      { transform: translateY(-9px); }
  72%      { transform: translateY(-2px); }
}

.cs .kmp-ort { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.cs .kmp-perde {
  position: absolute; inset: 0; background: rgba(4, 5, 8, .68);
  animation: kmp-solgun .18s ease both;
}
@keyframes kmp-solgun { from { opacity: 0; } to { opacity: 1; } }

.cs .kmp-modal {
  position: relative; width: min(370px, 100%);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 28px 24px 22px; text-align: center;
  box-shadow: 0 40px 80px -42px #000;
  animation: kmp-gir .2s cubic-bezier(.22, .7, .3, 1) both;
}
@keyframes kmp-gir { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.cs .kmp-x {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 8px; background: none; color: var(--ink-3);
  cursor: pointer; transition: color var(--gecis), border-color var(--gecis);
}
.cs .kmp-x:hover { color: var(--ink); border-color: var(--line-3); }
.cs .kmp-x svg { width: 14px; height: 14px; }

.cs .kmp-ic {
  width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: 14px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.cs .kmp-ic svg { width: 25px; height: 25px; }
.cs .kmp-baslik { font-size: 19px; letter-spacing: .02em; }
.cs .kmp-alt { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.cs .kmp-et {
  margin-top: 20px; font-family: var(--fm); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
}

/* modal içindeki kupon: koyu zemine göre ayarlı */
.cs .kmp-kupon {
  margin: 9px auto 0; width: 100%; justify-content: space-between;
  background: var(--bg-3); border-color: var(--line-2); padding: 5px 5px 5px 6px;
}
.cs .kmp-kupon:hover { background: var(--bg-4); border-color: var(--line-3); }
.cs .kmp-kupon .kupon-ic { width: 100%; justify-content: space-between; }
.cs .kmp-kupon code {
  font-size: 15px; letter-spacing: .18em; background: none; border: 0; padding: 0 0 0 10px;
}
.cs .kmp-kop {
  font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); border-radius: 7px; padding: 8px 14px;
  transition: background var(--gecis);
}
.cs .kmp-kupon:hover .kmp-kop { background: var(--accent-2); }
.cs .kmp-kupon[data-durum="ok"] { background: var(--bg-3); border-color: var(--accent-line); }
.cs .kmp-kupon .kupon-mesaj { color: var(--accent-2); }

/* sayaç: değerleri şeritteki sayaçla AYNI tikten geliyor */
.cs .kmp-sayac { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 20px; }
.cs .kmp-kutu {
  display: grid; justify-items: center; gap: 3px; padding: 9px 4px 8px; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--line);
}
.cs .kmp-kutu b { font-family: var(--fm); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.cs .kmp-kutu i { font-style: normal; font-family: var(--fm); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---- açılışta 3 saniyelik küçük balon ---- */
.cs .kmp-ipucu {
  position: fixed; right: 92px; bottom: 36px; z-index: 80;
  display: block; white-space: nowrap;
  background: var(--bg-2); border: 1px solid var(--accent-line); border-radius: 10px;
  padding: 9px 13px; font-size: 13px; color: var(--ink);
  box-shadow: 0 14px 30px -18px #000;
  animation: kmp-ipucu-gir .22s cubic-bezier(.22, .7, .3, 1) both;
}
/* balonun ucu */
.cs .kmp-ipucu::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 8px; height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--bg-2); border-right: 1px solid var(--accent-line); border-top: 1px solid var(--accent-line);
}
.cs .kmp-ipucu.gizlen { animation: kmp-ipucu-cik .24s ease both; }
@keyframes kmp-ipucu-gir { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes kmp-ipucu-cik { from { opacity: 1; } to { opacity: 0; transform: translateX(6px); } }

/* ---- kampanya sona erdiğinde ---- */
.cs .promo-bitti, .cs .kmp-bitti { display: none; }
/* Süre dolunca üst şerit tamamen kalkıyor: "Kampanya sona erdi" yazan bir
   şeridi her sayfanın tepesinde tutmanın ziyaretçiye faydası yok. */
.cs.kampanya-bitti .promo, .cs.kampanya-kapali .promo { display: none; }
.cs.kampanya-bitti .promo-bitti { display: inline; opacity: .9; }
.cs.kampanya-bitti .promo b,
.cs.kampanya-bitti .promo-alt { display: none; }
.cs.kampanya-bitti .kupon { pointer-events: none; opacity: .72; }
.cs.kampanya-bitti .kupon code { text-decoration: line-through; color: rgba(255, 255, 255, .62); }
.cs.kampanya-bitti .kupon-ok,
.cs.kampanya-bitti .kmp-kop { display: none; }
.cs.kampanya-bitti .kmp-alt { display: none; }
.cs.kampanya-bitti .kmp-bitti {
  display: block; margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
}
.cs.kampanya-bitti .kmp-ipucu { display: none; }

@media (max-width: 560px) {
  .cs .kmp-btn { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .cs .kmp-ipucu { right: 80px; bottom: 27px; font-size: 12.5px; padding: 8px 11px; }
}

@media (max-width: 640px) {
  .cs .pazar { padding-block: 30px 64px; }
  .cs .pazar-arac { width: 100%; }
  .cs .pazar-ara { flex: 1; min-width: 0; }
  .cs .pazar-izgara { grid-template-columns: minmax(0, 1fr); }
  .cs .pazar-filtre { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .cs .pazar-filtre::-webkit-scrollbar { display: none; }
  .cs .pazar-filtre button { white-space: nowrap; }
}

/* ==========================================================================
   36) FAVORİ KALP DÜĞMESİ — kartlar + ürün sayfası ortak
   ========================================================================== */
.cs .favori-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(6, 7, 10, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color: #fff;
  transition: background var(--gecis, var(--hiz)), transform var(--gecis, var(--hiz)), color var(--gecis, var(--hiz));
}
.cs .favori-btn svg { width: 18px; height: 18px; }
.cs .favori-btn:hover { background: rgba(6, 7, 10, .78); transform: scale(1.08); }
/* dolu (favorilenmiş) durum: kalp kırmızı ve dolu */
.cs .favori-btn.dolu { color: var(--accent); }
.cs .favori-btn.dolu svg path { fill: currentColor; }
/* eklenme/çıkarılma anında kısa bir pop — sürekli değil, bir kereye mahsus */
.cs .favori-btn.pat { animation: favori-pat .34s cubic-bezier(.3, .9, .4, 1); }
@keyframes favori-pat { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ürün sayfasındaki görsel kutusu biraz daha büyük, kalp de orantılı büyüsün */
.cs .ugorsel .favori-btn { top: 14px; right: 14px; width: 40px; height: 40px; }
.cs .ugorsel .favori-btn svg { width: 21px; height: 21px; }

.cs .ugorsel-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px;
  background: rgba(10, 10, 13, .55); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer;
  transition: background var(--hiz), border-color var(--hiz), transform var(--hiz);
}
.cs .ugorsel-ok:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.cs .ugorsel-ok svg { width: 19px; height: 19px; }
.cs .ugorsel-ok-sol { left: 12px; }
.cs .ugorsel-ok-sag { right: 12px; }
.cs .ugorsel-ok:hover.ugorsel-ok-sol { transform: translateY(-50%) translateX(-2px); }
.cs .ugorsel-ok:hover.ugorsel-ok-sag { transform: translateY(-50%) translateX(2px); }

/* ==========================================================================
   37) FAVORİLER — "artık mevcut değil" durumu
   ========================================================================== */
.cs .pz-kart-yok { border-style: dashed; }
.cs .pz-kart-yok .pz-ic { padding-top: 22px; padding-bottom: 22px; }
.cs .pz-kart-yok h3 { color: var(--ink-2); font-size: 15px; }
.cs .pz-kart-yok p { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.cs .pz-kart-yok .btn { margin-top: 14px; clip-path: none; border-radius: 8px; }

/* ==========================================================================
   38) SİPARİŞ BAŞARILI EKRANI
   ========================================================================== */
.cs .siparis-basarili-ust { max-width: 560px; margin: 0 auto 34px; text-align: center; }
.cs .siparis-tik {
  width: 62px; height: 62px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(70, 217, 138, .12); border: 1px solid rgba(70, 217, 138, .4); color: #46D98A;
}
.cs .siparis-tik svg { width: 30px; height: 30px; }

.cs .siparis-govde { max-width: 640px; margin: 0 auto; }
.cs .siparis-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px;
}
.cs .siparis-meta span { display: block; font-family: var(--fm); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cs .siparis-meta b { display: block; margin-top: 4px; font-family: var(--fm); font-size: 14px; color: var(--ink); word-break: break-all; }

.cs .siparis-ozet { display: grid; gap: 9px; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; }
.cs .siparis-ozet > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cs .siparis-ozet span { font-family: var(--fm); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cs .siparis-ozet b { font-family: var(--fm); font-size: 14px; color: var(--ink); }
.cs .siparis-ozet #siparisIndirim { color: #46D98A; }
.cs .siparis-toplam-satiri { padding-top: 9px; margin-top: 3px; border-top: 1px solid var(--line); }
.cs .siparis-toplam-satiri span { color: var(--ink-2); }
.cs .siparis-toplam-satiri b { font-family: var(--fd); font-size: 21px; font-weight: 800; font-style: italic; letter-spacing: -.02em; }

.cs .siparis-butonlar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cs .siparis-butonlar .btn { clip-path: none; border-radius: 9px; flex: 1 1 auto; text-align: center; white-space: nowrap; }
.cs .siparis-not { margin-top: 20px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); text-align: center; }

@media (max-width: 560px) {
  .cs .siparis-meta { grid-template-columns: minmax(0, 1fr); }
  .cs .siparis-butonlar { flex-direction: column; }
  .cs .siparis-butonlar .btn { width: 100%; }
}

.cs .katalog-yakinda { padding: 40px 0; text-align: center; color: var(--ink-3); font-size: 15px; }

/* Menü bağlantıları, MARKA ile SAĞ ARAÇLAR arasındaki boşluğun tam ortasında
   (iki yandaki boşluk eşit). Sağ araç grubu markadan çok daha geniş olduğu için
   "sayfanın ortası" menüyü görsel olarak sağa yaslıyordu. Yalnızca masaüstü;
   dar ekranda menü açılır çekmece olarak kalıyor. */
@media (min-width: 1081px) {
  .cs .nav .wrap .brand { margin-right: 0; }
  .cs .nav .wrap #navMenu { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   DÖKÜMANTASYON (/docs) — solda kaynak listesi, ortada içerik, sağda "bu sayfada"
   ========================================================================== */
.cs .docs {
  max-width: 1400px; margin: 0 auto; padding: 32px 24px 80px;
  display: grid; grid-template-columns: 280px minmax(0, 1fr) 210px; gap: 36px; align-items: start;
}
.cs .docs-yan, .cs .docs-sag { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; }
.cs .docs-yan { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px 12px; }
.cs .docs-ara {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; margin-bottom: 14px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; transition: border-color var(--gecis);
}
.cs .docs-ara:focus-within { border-color: var(--accent-line); }
.cs .docs-ara svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.cs .docs-ara input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font-family: var(--fb); font-size: 14px; }
.cs .docs-ara input::placeholder { color: var(--ink-3); }
.cs .docs-menu { display: grid; gap: 2px; }
.cs .docs-bag {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px;
  font-size: 14.5px; color: var(--ink-2); border-left: 2px solid transparent;
  transition: background var(--gecis), color var(--gecis);
}
.cs .docs-bag svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.cs .docs-bag:hover { background: var(--bg-3); color: var(--ink); }
.cs .docs-bag.on { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); }
.cs .docs-bag.on svg { color: var(--accent); }
.cs .docs-grup { margin: 18px 12px 6px; font-family: var(--fn); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cs .docs-bos { margin: 8px 12px; color: var(--ink-3); font-size: 13.5px; }

.cs .docs-orta { min-width: 0; max-width: 820px; }
.cs .doc-ust { font-size: 13px; color: var(--accent); margin: 0 0 10px; }
.cs .doc h1 { font-family: var(--fd); font-style: normal; text-transform: none; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.02em; line-height: 1.12; }
.cs .doc-alt { margin: 12px 0 0; font-size: 18px; color: var(--ink-2); }
.cs .doc h2 {
  font-style: normal; text-transform: none; font-size: 26px; letter-spacing: -.015em;
  margin: 44px 0 14px; padding-top: 6px; scroll-margin-top: 96px;
}
.cs .doc p, .cs .doc li { font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.cs .doc p { margin: 12px 0; }
.cs .doc ul, .cs .doc ol { margin: 12px 0; padding-left: 24px; display: grid; gap: 8px; }
.cs .doc ul { list-style: disc; }
.cs .doc ol { list-style: decimal; }
.cs .doc li::marker { color: var(--ink-3); }
.cs .doc b { font-weight: 700; }
.cs .doc a { color: var(--accent); }
.cs .doc code {
  font-family: var(--fk); font-size: .86em; color: var(--accent-2);
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 6px;
}
.cs .doc pre {
  position: relative; margin: 12px 0; padding: 16px 18px; overflow-x: auto;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px;
}
.cs .doc pre code { background: none; border: 0; padding: 0; font-size: 14px; color: var(--ink); }
.cs .doc-kopya {
  position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 7px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink-2);
  font-family: var(--fn); font-size: 11.5px; font-weight: 600; transition: color var(--gecis), border-color var(--gecis);
}
.cs .doc-kopya:hover { color: var(--ink); border-color: var(--line-3); }

.cs .doc-ozet {
  margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
}
.cs .doc-ozet > div { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.cs .doc-ozet dt { font-family: var(--fn); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cs .doc-ozet dd { margin: 6px 0 0; font-size: 15px; line-height: 1.5; word-break: break-word; }

.cs .doc-tablo { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line-2); border-radius: 12px; }
.cs .doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cs .doc th, .cs .doc td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cs .doc th { background: var(--bg-2); font-family: var(--fn); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cs .doc tbody tr:last-child td { border-bottom: 0; }

.cs .doc-not { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; border-radius: 12px; font-size: 15.5px; line-height: 1.6; }
.cs .doc-not svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.cs .doc-bilgi { background: var(--bg-2); border: 1px solid var(--line-2); }
.cs .doc-bilgi svg { color: var(--ink-3); }
.cs .doc-tamam { background: color-mix(in srgb, var(--ok) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.cs .doc-tamam svg { color: var(--ok); }
.cs .doc-tamam a { color: var(--ok); }

.cs .doc-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.cs .doc-kart {
  display: grid; gap: 4px; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 14px; transition: border-color var(--gecis), transform var(--hiz);
}
.cs .doc-kart:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.cs .doc-kart b { font-size: 17px; color: var(--ink); }
.cs .doc-kart span { color: var(--ink-2); font-size: 15px; }
.cs .doc-kart i { font-style: normal; font-family: var(--fk); font-size: 12px; color: var(--ink-3); margin-top: 6px; }

.cs .doc-alt-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 56px; }
.cs .doc-gez {
  flex: 1; max-width: 48%; display: grid; gap: 3px; padding: 14px 18px; border: 1px solid var(--line-2);
  border-radius: 12px; transition: border-color var(--gecis);
}
.cs .doc-gez:hover { border-color: var(--accent-line); }
.cs .doc-gez.sag { text-align: right; margin-left: auto; }
.cs .doc-gez small { font-size: 12px; color: var(--ink-3); }
.cs .doc-gez b { font-size: 15.5px; color: var(--ink); }

.cs .docs-sag-bas { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--fn); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cs .docs-sag-bas svg { width: 14px; height: 14px; }
.cs #docsToc { display: grid; border-left: 1px solid var(--line-2); }
.cs #docsToc a { padding: 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; color: var(--ink-2); transition: color var(--gecis); }
.cs #docsToc a:hover { color: var(--ink); }
.cs #docsToc a.on { color: var(--accent); border-left-color: var(--accent); }

@media (max-width: 1180px) {
  .cs .docs { grid-template-columns: 250px minmax(0, 1fr); }
  .cs .docs-sag { display: none; }
}
@media (max-width: 860px) {
  .cs .docs { grid-template-columns: minmax(0, 1fr); padding-top: 20px; gap: 22px; }
  .cs .docs-yan { position: static; max-height: none; }
  .cs .doc-gez { max-width: 100%; }
}


/* ==========================================================================
   VAMPIRE VILLAGE ÖZEL SAYFASI + ÜRÜN SORULARI + GÜNCELLEME GÜNLÜĞÜ
   (içerik sayfaları; "GÖRÜNÜM TURU"nun parçası değil, o geri alınsa da kalır)
   ========================================================================== */
.cs .vv { padding-block: 30px 40px; }
.cs .vv-giris { max-width: 900px; margin: 0 auto 26px; text-align: center; }
.cs .vv-soz { font-family: var(--fd); font-size: clamp(34px, 6vw, 72px); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.cs .vv-lede { margin-top: 22px; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.cs .vv-rakam { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: left; }
.cs .vv-rakam li { background: var(--bg-2); border-radius: 22px; padding: 20px 20px 22px; }
.cs .vv-rakam b { display: block; font-family: var(--fd); font-size: clamp(34px, 4vw, 52px); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--accent); }
.cs .vv-rakam li > span { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.cs .vv-baslik { margin: 84px 0 12px; text-align: center; font-size: clamp(30px, 4.4vw, 52px); }
.cs .vv-alt { max-width: 78ch; margin: 0 auto; text-align: center; color: var(--ink-2); font-size: 16.5px; }
.cs .vv-gorsel { display: block; overflow: hidden; border-radius: 22px; background: var(--bg-3); cursor: zoom-in; }
.cs .vv-gorsel img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.22, .7, .3, 1); }
.cs .vv-gorsel:hover img { transform: scale(1.03); }

.cs .vv-adimlar { display: grid; gap: 18px; margin-top: 34px; }
.cs .vv-adim { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px; align-items: center; background: var(--bg-2); border-radius: 28px; padding: 18px; }
.cs .vv-adim:nth-child(even) .vv-gorsel { order: 2; }
.cs .vv-adim > div { padding: 12px 22px 12px 12px; }
.cs .vv-adim:nth-child(even) > div { padding: 12px 12px 12px 22px; }
.cs .vv-adim i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--fd); font-weight: 700; font-size: 18px; }
.cs .vv-adim h3 { margin-top: 16px; font-size: clamp(24px, 2.6vw, 34px); }
.cs .vv-adim p { margin-top: 12px; color: var(--ink-2); line-height: 1.7; }

.cs .vv-roller { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 34px; align-items: start; }
.cs .vv-takim { background: var(--bg-2); border-radius: 28px; padding: 26px; border-top: 4px solid var(--vv-renk, var(--accent)); }
.cs .vv-koy { --vv-renk: #3DDC84; grid-row: span 2; }
.cs .vv-vampir { --vv-renk: #FF2E49; }
.cs .vv-tarafsiz { --vv-renk: #FFC53D; }
.cs .vv-takim h3 { font-size: 24px; display: flex; align-items: center; gap: 10px; }
.cs .vv-takim h3 small { font-size: 13px; font-weight: 700; letter-spacing: 0; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--vv-renk) 18%, transparent); color: var(--vv-renk); }
.cs .vv-takim dl { margin: 18px 0 0; display: grid; gap: 0; }
.cs .vv-takim dl > div { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.cs .vv-takim dl > div:first-child { border-top: 0; }
.cs .vv-takim dt { font-weight: 600; color: var(--ink); }
.cs .vv-takim dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.cs .vv-takim .vv-gorsel { margin-top: 18px; border-radius: 16px; }

.cs .vv-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.cs .vv-ikili article { background: var(--bg-2); border-radius: 28px; padding: 18px 18px 26px; }
.cs .vv-kareler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs .vv-kareler .vv-gorsel { border-radius: 14px; }
.cs .vv-kareler .vv-gorsel:first-child { grid-column: 1 / -1; border-radius: 18px; }
.cs .vv-ikili h3 { margin: 22px 8px 0; font-size: 26px; }
.cs .vv-ikili p { margin: 10px 8px 0; color: var(--ink-2); line-height: 1.7; }

.cs .vv-kutular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.cs .vv-kutular > div, .cs .vv-teknik > div { background: var(--bg-2); border-radius: 24px; padding: 24px; }
.cs .vv-kutular h3, .cs .vv-teknik h3 { font-size: 19px; }
.cs .vv-kutular p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.cs .vv-teknik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.cs .vv-teknik ul { margin: 12px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.cs .vv-docs { margin-top: 34px; text-align: center; }
@media (max-width: 960px) {
  .cs .vv-rakam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs .vv-adim { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; }
  .cs .vv-adim:nth-child(even) .vv-gorsel { order: 0; }
  .cs .vv-adim > div, .cs .vv-adim:nth-child(even) > div { padding: 14px 10px 10px; }
  .cs .vv-roller, .cs .vv-ikili, .cs .vv-kutular, .cs .vv-teknik { grid-template-columns: minmax(0, 1fr); }
  .cs .vv-koy { grid-row: auto; }
  .cs .vv-takim dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cs .vv-baslik { margin-top: 56px; }
}

/* ---- sayfa altı Tebex şeridi: Tebex mağazalarındakiyle aynı (siyah zemin, beyaz yazı) ---- */
.cs .tebexbar { background: #000; border-top: 1px solid #1c1c1c; padding: 0; }
.cs .tebexbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 30px; flex-wrap: wrap; padding-block: 8px; }
.cs .tb-ana { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cs .tb-logo { flex: none; display: block; line-height: 0; }
.cs .tb-logo img { display: block; width: 57px; height: 29px; }
.cs .tb-ana span { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.4; color: #fff; letter-spacing: 0; }
.cs .tb-bag { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cs .tb-bag a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; color: #fff; text-decoration: underline; white-space: nowrap; }
.cs .tb-bag a:hover { opacity: .75; }
.cs .foot .fine .telif { display: block; margin-top: 8px; }
@media (max-width: 760px) { .cs .tebexbar .wrap { flex-direction: column; align-items: flex-start; padding-block: 12px; } }

/* ---- ödeme yöntemi logoları (Tebex mağazasındakiyle aynı beş logo) ---- */
.cs .odeme-logolar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 34px; }
.cs .odeme-logolar img { display: block; height: 30px; width: auto; }
.cs .odeme-logolar .ol-visa { height: 20px; }
.cs .odeme-logolar.ol-sepet { margin-top: 4px; gap: 8px 12px; }
.cs .odeme-logolar.ol-sepet img { height: 24px; }
.cs .odeme-logolar.ol-sepet .ol-visa { height: 15px; }

/* ---- ürüne özel sorular (panelden: Ürün soruları) ---- */
.cs .urun-sss { margin-top: 26px; padding: 26px 28px 14px; border-radius: 24px; background: var(--bg-2); }
.cs .urun-sss h2 { font-size: 24px; margin-bottom: 8px; }
.cs .urun-sss .faq details:first-child { border-top: 0; }

/* ---- güncelleme günlüğü sayfası (/guncellemeler) ---- */
.cs .gunluk { padding-block: 54px 90px; }
.cs .gunluk .wrap { max-width: 900px; }
.cs .gunluk h1 { font-size: clamp(34px, 5vw, 56px); }
.cs .gunluk-alt { margin-top: 12px; color: var(--ink-2); font-size: 17px; }
.cs .gunluk-filtre { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; }
.cs .gunluk-filtre button { border: 1px solid var(--line-2); background: none; color: var(--ink-2); border-radius: 999px; padding: 8px 15px; font-family: var(--fb); font-size: 13.5px; cursor: pointer; transition: color var(--hiz), border-color var(--hiz), background var(--hiz); }
.cs .gunluk-filtre button:hover { color: var(--ink); border-color: var(--line-3); }
.cs .gunluk-filtre button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cs .gunluk-liste { position: relative; margin-top: 22px; padding-left: 26px; }
.cs .gunluk-liste::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line-2); }
.cs .gunluk-kayit { position: relative; padding: 0 0 26px; }
.cs .gunluk-kayit::before { content: ""; position: absolute; left: -26px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); }
.cs .gunluk-kayit.ilk::before { border-color: var(--ink-3); }
.cs .gunluk-tarih { font-size: 13.5px; color: var(--ink-3); }
.cs .gunluk-kutu { margin-top: 8px; background: var(--bg-2); border-radius: 20px; padding: 18px 22px 20px; }
.cs .gunluk-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cs .gunluk-ust a { font-family: var(--fd); font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); transition: color var(--hiz); }
.cs .gunluk-ust a:hover { color: var(--accent); }
.cs .gunluk-surum { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-2); font-family: var(--fk); font-size: 12.5px; }
.cs .gunluk-kutu ul { margin: 12px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 6px; color: var(--ink-2); line-height: 1.6; }
.cs .gunluk-kutu p { margin-top: 10px; color: var(--ink-2); }
.cs .gunluk-bos { color: var(--ink-2); padding: 30px 0; }

/* ---- ürün sayfasında o ürünün güncellemeleri (site.js: urunGunlugu) ---- */
.cs .urun-gunluk { margin-top: 26px; padding: 26px 28px 8px; border-radius: 24px; background: var(--bg-2); scroll-margin-top: 90px; }
.cs .urun-gunluk h2 { font-size: 24px; }
.cs .urun-gunluk-alt { margin-top: 6px; color: var(--ink-3); font-size: 14px; }
.cs .urun-gunluk .gunluk-liste { margin-top: 18px; }
.cs .urun-gunluk .gunluk-kayit { padding-bottom: 20px; }
.cs .urun-gunluk .gunluk-kayit::before { background: var(--bg-2); }
.cs .urun-gunluk-metin ul { margin: 10px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 5px; color: var(--ink-2); line-height: 1.6; }
.cs .urun-gunluk-metin p { margin-top: 8px; color: var(--ink-2); line-height: 1.6; }
.cs .urun-gunluk-hepsi { display: inline-block; margin: 0 0 20px; color: var(--accent-2); font-weight: 600; font-size: 14.5px; }
.cs .urun-gunluk-hepsi:hover { color: var(--accent); }
@media (max-width: 720px) { .cs .urun-gunluk { padding: 22px 18px 6px; } }

/* ==========================================================================
   ÖZEL SİPARİŞ SAYFASI  (ozel.html, site.js: ozelSiparisKur) + ana sayfadaki çağrı bandı
   ========================================================================== */
.cs .ozel-ust { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(34px, 5vw, 56px); overflow: hidden; }
.cs .ozel-ust::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 70% at 12% 0%, rgba(255, 46, 73, .26), transparent 70%),
    radial-gradient(40% 60% at 92% 10%, rgba(91, 75, 255, .16), transparent 70%);
}
.cs .ozel-ust::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 54px 54px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.cs .ozel-ust .wrap { position: relative; z-index: 1; }
.cs .ozel-etiket {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-2);
  font-family: var(--fb); font-size: 13px; font-weight: 600;
}
.cs .ozel-etiket i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 46, 73, .22); }
.cs .ozel-ust h1 { margin-top: 20px; max-width: 15ch; font-family: var(--fd); font-size: clamp(38px, 6.4vw, 78px); font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.cs .ozel-ust h1 em { font-style: normal; color: var(--accent); }
.cs .ozel-alt { margin-top: 22px; max-width: 58ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-2); }
.cs .ozel-soz { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 28px 0 0; padding: 0; list-style: none; }
.cs .ozel-soz li { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink); }
.cs .ozel-soz svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.cs .ozel-govde { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; padding-bottom: clamp(60px, 8vw, 110px); }
.cs .ozel-form, .cs .ozel-tamam { grid-column: 1; min-width: 0; }
.cs .ozel-yan { grid-column: 2; grid-row: 1; position: sticky; top: 96px; display: grid; gap: 18px; }

.cs .ozel-adim {
  margin: 0 0 18px; padding: 26px 28px 28px; min-width: 0; border-radius: 20px;
  background: var(--bg-2); border: 1px solid var(--line-2);
}
.cs .ozel-adim legend {
  float: left; width: 100%; padding: 0; margin-bottom: 6px; display: flex; align-items: center; gap: 14px;
  font-family: var(--fd); font-size: clamp(21px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.04em; color: var(--ink);
}
/* yalnız "legend + *" yetmiyordu: ilk kardeş gizliyken (seçilmeyen tür) görünen ilk kutu başlığın altına giriyordu */
.cs .ozel-adim > *:not(legend) { clear: both; }
.cs .ozel-adim legend b {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-2);
  font-family: var(--fb); font-size: 14px; font-weight: 700; letter-spacing: 0;
}
.cs .ozel-ipucu { margin: 0 0 16px 52px; font-size: 14px; color: var(--ink-3); }

.cs .ozel-turler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.cs .ozel-tur { position: relative; cursor: pointer; display: block; }
.cs .ozel-tur input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cs .ozel-tur-ic {
  box-sizing: border-box; position: relative; display: grid; align-content: start; gap: 6px; height: 100%; padding: 20px 18px 18px; border-radius: 16px;
  background: var(--bg-3); border: 1.5px solid var(--line-2); transition: border-color .15s, background .15s, transform .15s;
}
.cs .ozel-tur-ic > svg { width: 30px; height: 30px; margin-bottom: 8px; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.cs .ozel-tur-ic b { font-family: var(--fd); font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.cs .ozel-tur-ic i { font-style: normal; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.cs .ozel-tik {
  position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-3); background: transparent; transition: background .15s, border-color .15s;
}
.cs .ozel-tik svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.cs .ozel-tur:hover .ozel-tur-ic { border-color: var(--line-3); transform: translateY(-2px); }
.cs .ozel-tur.secili .ozel-tur-ic, .cs .ozel-tur input:checked + .ozel-tur-ic { border-color: var(--accent); background: linear-gradient(180deg, rgba(255, 46, 73, .14), rgba(255, 46, 73, .04)); }
.cs .ozel-tur input:checked + .ozel-tur-ic > svg { stroke: var(--accent-2); }
.cs .ozel-tur input:checked + .ozel-tur-ic .ozel-tik { background: var(--accent); border-color: var(--accent); }
.cs .ozel-tur input:checked + .ozel-tur-ic .ozel-tik svg { opacity: 1; }
.cs .ozel-tur input:focus-visible + .ozel-tur-ic { outline: 2px solid var(--accent-2); outline-offset: 3px; }

.cs .ozel-ozel { margin: 16px 0 4px; padding: 18px 18px 6px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.cs .ozel-ozel[hidden] { display: none; }
.cs .ozel-ozel h3 { margin-bottom: 12px; font-family: var(--fb); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--accent-2); }
.cs .ozel-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cs .ozel-alan { position: relative; display: block; margin: 16px 0 0; min-width: 0; }
.cs .ozel-ozel .ozel-alan { margin: 0 0 14px; }
.cs .ozel-alan > span:first-child { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cs .ozel-alan > span:first-child em { font-style: normal; color: var(--accent-2); }
.cs .ozel-alan > span:first-child i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.cs .ozel-alan input[type="text"], .cs .ozel-alan input[type="email"], .cs .ozel-alan textarea {
  box-sizing: border-box; width: 100%; padding: 13px 15px; border-radius: 12px; resize: vertical;
  background: var(--bg); border: 1.5px solid var(--line-2); color: var(--ink);
  font-family: var(--fb); font-size: 16px; line-height: 1.5; transition: border-color .15s, box-shadow .15s;
}
.cs .ozel-alan textarea { min-height: 62px; }
.cs .ozel-alan input::placeholder, .cs .ozel-alan textarea::placeholder { color: var(--ink-3); opacity: .8; }
.cs .ozel-alan input:hover, .cs .ozel-alan textarea:hover { border-color: var(--line-3); }
.cs .ozel-alan input:focus, .cs .ozel-alan textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 46, 73, .16); }
.cs .ozel-sayac { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; pointer-events: none; }

.cs .ozel-kural { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cs .ozel-kural svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; }
.cs .ozel-hap { display: flex; flex-wrap: wrap; gap: 8px; }
.cs .ozel-hap label { position: relative; cursor: pointer; }
.cs .ozel-hap input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cs .ozel-hap label > span {
  display: block; padding: 10px 16px; border-radius: 999px; background: var(--bg); border: 1.5px solid var(--line-2);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: border-color .15s, background .15s, color .15s;
}
.cs .ozel-hap label:hover > span { border-color: var(--line-3); color: var(--ink); }
.cs .ozel-hap input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.cs .ozel-hap input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.cs .ozel-hata { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 46, 73, .1); border: 1px solid var(--accent-line); color: #FF8C9B; font-size: 14px; }
.cs .ozel-hata[hidden] { display: none; }
.cs .ozel-bal { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cs .ozel-giris { margin-top: 22px; }
.cs .ozel-giris-yok { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--bg-3); border: 1.5px dashed var(--line-3); }
.cs .ozel-giris-yok[hidden], .cs .ozel-giris-var[hidden] { display: none; }
.cs .ozel-giris-yok b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.cs .ozel-giris-yok div > span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.cs .ozel-giris-yok .btn { white-space: nowrap; }
.cs .ozel-giris-var { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); font-size: 15px; color: var(--ink); }
.cs .ozel-giris-var svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cs .ozel-giris-var b { overflow-wrap: anywhere; }
.cs .ozel-gonder:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 680px) { .cs .ozel-giris-yok { grid-template-columns: auto minmax(0, 1fr); } .cs .ozel-giris-yok .btn { grid-column: 1 / -1; width: 100%; justify-content: center; text-align: center; } }
.cs .ozel-gonder { width: 100%; margin-top: 16px; padding-block: 17px; border-radius: 14px; font-size: 17px; background: var(--accent); color: var(--accent-ink); }
.cs .ozel-gonder:hover { background: var(--accent-2); }
.cs .ozel-gonder.bekliyor { opacity: .6; pointer-events: none; }
.cs .ozel-not { margin-top: 12px; text-align: center; font-size: 13px; color: var(--ink-3); }
.cs .ozel-not a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

.cs .ozel-ozet { padding: 22px 22px 20px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 46, 73, .1), transparent 55%), var(--bg-2); border: 1px solid var(--line-2); }
.cs .ozel-ozet h2 { font-family: var(--fd); font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.cs .ozel-ozet dl { margin: 14px 0 0; display: grid; }
.cs .ozel-ozet dl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.cs .ozel-ozet dt { font-size: 13px; color: var(--ink-3); }
.cs .ozel-ozet dd { margin: 0; font-size: 14.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.cs .ozel-ozet dd.dolu { color: var(--ink); font-weight: 600; }
.cs .ozel-ilerleme { height: 6px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.cs .ozel-ilerleme i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.cs .ozel-ilerleme-yazi { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.cs .ozel-ilerleme-yazi.hazir { color: var(--ok); font-weight: 600; }

.cs .ozel-surec { margin: 0; padding: 20px 22px; list-style: none; display: grid; gap: 16px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); }
.cs .ozel-surec li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.cs .ozel-surec li > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-3); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cs .ozel-surec strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.cs .ozel-surec div > span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

.cs .ozel-tamam { padding: clamp(34px, 5vw, 60px) 28px; text-align: center; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line-2); outline: none; }
.cs .ozel-tamam[hidden] { display: none; }
.cs .ozel-tamam-ic { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); border: 1.5px solid color-mix(in srgb, var(--ok) 50%, transparent); }
.cs .ozel-tamam-ic svg { width: 34px; height: 34px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cs .ozel-tamam h2 { font-family: var(--fd); font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.04em; }
.cs .ozel-tamam p { max-width: 52ch; margin: 14px auto 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.cs .ozel-tamam p b { color: var(--ink); }
.cs .ozel-tamam-dugme { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* sipariş ekranındaki teşekkür + Discord daveti */
.cs .siparis-discord {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 18px; align-items: center; margin: 22px 0;
  padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(88, 101, 242, .45);
  background: radial-gradient(90% 160% at 0% 0%, rgba(88, 101, 242, .22), transparent 65%), var(--bg-2);
}
.cs .siparis-discord img { width: 56px; height: 56px; }
.cs .siparis-discord b { display: block; font-family: var(--fd); font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.cs .siparis-discord div > span { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cs .siparis-discord .btn { padding: 13px 22px; border-radius: 12px; background: #5865F2; color: #fff; white-space: nowrap; }
.cs .siparis-discord .btn:hover { background: #6D78F5; }
@media (max-width: 680px) {
  .cs .siparis-discord { grid-template-columns: auto minmax(0, 1fr); }
  .cs .siparis-discord .btn { grid-column: 1 / -1; width: 100%; justify-content: center; text-align: center; }
}

/* ana sayfadaki çağrı bandı */
.cs .ozel-bant { padding: 0 0 clamp(40px, 6vw, 76px); }
.cs .ozel-bant-ic {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
  padding: clamp(26px, 3.6vw, 44px); border-radius: 24px; border: 1px solid var(--accent-line);
  background: radial-gradient(70% 140% at 0% 0%, rgba(255, 46, 73, .22), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(91, 75, 255, .16), transparent 60%), var(--bg-2);
}
.cs .ozel-bant h2 { font-family: var(--fd); font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }
.cs .ozel-bant h2 em { font-style: normal; color: var(--accent); }
.cs .ozel-bant p { margin-top: 10px; max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.cs .ozel-bant-tur { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cs .ozel-bant-tur a { padding: 8px 15px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; color: var(--ink); transition: border-color .15s, background .15s; }
.cs .ozel-bant-tur a:hover { border-color: var(--accent); background: var(--accent-soft); }
.cs .ozel-bant .btn { padding: 16px 28px; border-radius: 14px; font-size: 16px; white-space: nowrap; background: var(--accent); color: var(--accent-ink); }
.cs .ozel-bant .btn:hover { background: var(--accent-2); }

/* üst menüde Map Viewer: parlak kırmızı (2026-11-01, kullanıcı istedi) */
.cs .nav-link.nav-parlak, .cs .nav-link.nav-parlak * { color: #ff3b55 !important; text-shadow: 0 0 8px rgba(255, 46, 73, .95), 0 0 20px rgba(255, 46, 73, .6) !important; }
.cs .nav-link.nav-parlak:hover, .cs .nav-link.nav-parlak:hover * { color: #ff6579 !important; text-shadow: 0 0 10px rgba(255, 70, 95, 1), 0 0 28px rgba(255, 46, 73, .75) !important; }

/* ---------- 360° tur: kart rozeti, ürün düğmesi, ana sayfa bandı (assets/tur-veri.js varsa) ---------- */
.cs .kart-360 {
  position: absolute; right: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  font: 800 12.5px/1 var(--fd); color: #fff; background: rgba(6, 7, 10, .84); border: 1px solid rgba(255, 255, 255, .24);
  transition: background .15s, border-color .15s;
}
.cs .kart-360::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cs .kart-360:hover, .cs .kart-360:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); outline: none; }
.cs .kart-360:hover::before, .cs .kart-360:focus-visible::before { background: #fff; }

.cs .urun-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cs .urun-tur { border-color: var(--accent-line); }
.cs .urun-tur i { font-style: normal; font-weight: 800; color: var(--accent); margin-right: 2px; }
.cs .urun-tur:hover i { color: inherit; }

.cs .tur-bant { padding: 0 0 clamp(40px, 6vw, 76px); }
.cs .tur-bant-ic {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(340px, 33vw, 440px);
  border-radius: 24px; border: 1px solid var(--line-2); background: var(--bg-2);
}
.cs .tur-bant-ic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.cs .tur-bant-ic::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6, 7, 10, .93) 0%, rgba(6, 7, 10, .76) 36%, rgba(6, 7, 10, 0) 72%), linear-gradient(0deg, rgba(6, 7, 10, .5), rgba(6, 7, 10, 0) 50%);
}
.cs .tur-bant-yazi { position: relative; z-index: 2; max-width: 580px; padding: clamp(24px, 3.6vw, 44px); }
.cs .tur-bant-ust { font: 600 12px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: .8; }
.cs .tur-bant h2 { margin-top: 12px; font-family: var(--fd); font-size: clamp(28px, 3.8vw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1.06; color: #fff; }
.cs .tur-bant h2 em { font-style: normal; color: var(--accent); }
.cs .tur-bant-yazi > p { margin-top: 10px; max-width: 48ch; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.cs .tur-bant .btn { margin-top: 18px; padding: 15px 26px; border-radius: 14px; font-size: 16px; white-space: nowrap; background: var(--accent); color: var(--accent-ink); }
.cs .tur-bant .btn:hover { background: var(--accent-2); }
.cs .tur-bant-liste { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.cs .tur-bant-liste a { padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #fff; background: rgba(6, 7, 10, .62); border: 1px solid rgba(255, 255, 255, .22); transition: border-color .15s, background .15s; }
.cs .tur-bant-liste a:hover { border-color: var(--accent); background: rgba(6, 7, 10, .9); }
@media (max-width: 720px) {
  .cs .tur-bant-ic { min-height: 500px; }
  .cs .tur-bant-ic > img { height: 58%; object-position: 50% 50%; }
  .cs .tur-bant-ic::before { background: linear-gradient(0deg, var(--bg-2) 46%, rgba(6, 7, 10, .62) 74%, rgba(6, 7, 10, .12) 100%); }
  .cs .tur-bant .btn { display: flex; width: 100%; justify-content: center; }
}

@media (max-width: 980px) {
  .cs .ozel-govde { grid-template-columns: minmax(0, 1fr); }
  .cs .ozel-yan { grid-column: 1; grid-row: auto; position: static; }
  .cs .ozel-ozet { display: none; }      /* dar ekranda özet formun kendisi kadar yakın; yalnızca süreç kalsın */
}
@media (max-width: 680px) {
  .cs .ozel-adim { padding: 20px 16px 22px; border-radius: 16px; }
  .cs .ozel-turler, .cs .ozel-ikili { grid-template-columns: minmax(0, 1fr); }
  .cs .ozel-tur-ic { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 16px 46px 16px 16px; }
  .cs .ozel-tur-ic > svg { grid-row: 1 / 3; margin: 2px 0 0; }
  .cs .ozel-ipucu { margin-left: 0; }
  .cs .ozel-hap label > span { padding: 9px 14px; font-size: 14px; white-space: normal; }
  .cs .ozel-bant-ic { grid-template-columns: minmax(0, 1fr); }
  .cs .ozel-bant .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ==========================================================================
   SİTE DIŞI BAĞLANTI UYARISI  (site.js: disBaglantiKur)
   ========================================================================== */
html.dis-git-acik { overflow: hidden; }
.dis-git {
  box-sizing: border-box; position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 16px;
  background: rgba(3, 4, 6, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.dis-git[hidden] { display: none; }
.dis-git-ic {
  box-sizing: border-box; width: min(460px, 100%); padding: 30px 26px 24px; text-align: center; border-radius: 20px;
  background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 40px 90px -30px #000;
  font-family: var(--fb); color: var(--ink);
}
.dis-git-halka { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; }
.dis-git-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dis-git-halka circle { fill: none; stroke: var(--line-2); stroke-width: 4; }
.dis-git-halka .dolan { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 0; }
.dis-git.acik .dolan { animation: dis-git-say var(--dis-sure, 5s) linear forwards !important; }
@keyframes dis-git-say { to { stroke-dashoffset: 176; } }
.dis-git-halka b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fd); font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dis-git h2 { font-family: var(--fd); font-size: 23px; font-weight: 800; letter-spacing: -.035em; line-height: 1.2; }
.dis-git-aciklama { margin-top: 8px; color: var(--ink-2, #AEB6C6); font-size: 15px; }
.dis-git-adres { margin-top: 14px; padding: 13px 14px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); display: grid; gap: 4px; }
.dis-git-adres strong { font-family: var(--fd); font-size: 18px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.dis-git-adres span { font-size: 12.5px; color: var(--ink-2, #AEB6C6); overflow-wrap: anywhere; line-height: 1.45; }
.dis-git-dugme { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.dis-git-dugme button {
  height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  font-family: var(--fb); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.dis-git-dugme button:hover { background: rgba(255, 255, 255, .06); border-color: var(--line-3); }
.dis-git-dugme .dis-git-simdi { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dis-git-dugme .dis-git-simdi:hover { background: var(--accent-2); border-color: var(--accent-2); }
.dis-git-dugme button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ÖZEL SİPARİŞ KUTUSU (2026-10-21; görünüm turundan bağımsız): Maps / Scripts ızgaralarının sonundaki boş
   "sana özel" kartı (site.js ozelKart) -> /ozel-siparis?tur=harita|script */
.cs .pcard-ozel .shot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255, 255, 255, .025) 16px 32px), var(--bg-3);
  color: var(--ink-2);
}
.cs .pcard-ozel .shot::after {
  inset: 14px; height: auto; background: none;
  border: 2px dashed var(--line-2); border-radius: 10px;
  transition: border-color var(--hiz);
}
.cs .pcard-ozel .ozel-arti {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-2); background: var(--bg-2);
  transition: transform .45s cubic-bezier(.22, .7, .3, 1), border-color var(--hiz), color var(--hiz);
}
.cs .pcard-ozel .ozel-arti svg { width: 30px; height: 30px; }
.cs .pcard-ozel .ozel-et { font-family: var(--fm); font-size: 13px; letter-spacing: .12em; color: var(--ink-2); }
.cs .pcard-ozel:hover .shot::after { border-color: var(--accent); }
.cs .pcard-ozel:hover .ozel-arti { transform: rotate(90deg); border-color: var(--accent); color: var(--accent); }
.cs .pcard-ozel .ozel-fiyat { font-family: var(--fm); font-size: 14px; color: var(--ink-2); letter-spacing: .02em; }
.cs .pcard-ozel .acts { grid-template-columns: 1fr; }

/* ==========================================================================
   GÖRÜNÜM TURU — 2026-10-10   (köşeler + ürün kartları + sade hareket + galeri, kedi, açılış, ikonlar, sayfa geçişi, bölüm araları, alt bilgi)
   Bu bloğun TAMAMI tek bir değişiklik. Geri almak için: bloğu sil ve
   assets/site.js başındaki SADE_GORUNUM değerini false yap, surumle.mjs içinde
   ACILIS_EKRANI = false yapıp çalıştır; ya da
   _yedek/2026-10-10-gorunum-oncesi/ içindeki iki dosyayı geri kopyala.
   ========================================================================== */

/* ---------- A) KÖŞELER: sitenin her yerinde aynı yuvarlak köşe ----------
   Eskiden kutuların bir kısmı kesik köşeli (clip-path), bir kısmı yuvarlak,
   bir kısmı keskindi. Artık üç ölçü var: kutu 16, küçük kutu / düğme 10, etiket 8. */
:root { --radius: 16px; --radius-sm: 10px; --radius-xs: 8px; }

.cs .btn, .cs .tum-gor, .cs .faq-ara input, .cs .pcard .bak span {
  clip-path: none; border-radius: var(--radius-sm);
}
.cs .hesapmenu, .cs .console, .cs .wcard, .cs .wcard::before, .cs .faq-side, .cs .faq-side::before,
.cs .dbanner, .cs .dbanner::before, .cs .ugorsel, .cs .ugorsel::before, .cs .panel, .cs .panel::before,
.cs .kat-kare, .cs .video-kart, .cs .rcard, .cs .rcard::before, .cs .yk-gorsel, .cs .hl-kat, .cs .hl-yuz {
  clip-path: none; border-radius: var(--radius);
}
/* 1 px'lik çerçeve "dış kutu + içte ::before" ile çiziliyor: iç köşe 1 px küçük olmalı */
.cs .wcard::before, .cs .faq-side::before, .cs .dbanner::before, .cs .ugorsel::before,
.cs .panel::before, .cs .rcard::before { border-radius: calc(var(--radius) - 1px); }
.cs .video-kart, .cs .kat-kare, .cs .yk-gorsel, .cs .ugorsel, .cs .console { overflow: hidden; }

.cs .gitem .ic, .cs .wcard .ic, .cs .faq-side .q, .cs .rcard .av, .cs .brand .glyph, .cs .adim::before {
  clip-path: none; border-radius: var(--radius-sm);
}
.cs .chip, .cs .yeni-rozet, .cs .pcard .flag, .cs .price .off, .cs .yk-rozet, .cs .pz-rozet,
.cs .pazar-filtre button, .cs .yasal-ic a, .cs code.i, .cs .cms code { border-radius: var(--radius-xs); }
.cs .katbos, .cs .pazar-ara, .cs .pazar-sirala, .cs .status, .cs .cms pre, .cs .fcard pre,
.cs .ara-panel input, .cs .sc-kupon-form input, .cs .ugaleri button, .cs .ugaleri img { border-radius: var(--radius-sm); }
.cs .guven { border-radius: var(--radius); overflow: hidden; }
.cs .faq details:first-child { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }

/* ---------- B) ÜRÜN KARTLARI: büyük görselli ızgara, az yazı ----------
   Ana sayfadaki katalog artık yatay kaydırmalı şerit değil (dördüncü kart
   yarım görünüyordu): ikişerli büyük kartlar, beş ve üstü üründe üçerli. */
.cs .pgrid, .cs .pgrid:has(> :nth-child(3)), .cs .pgrid:has(> :nth-child(2):last-child) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px;
  overflow: visible; padding: 0; margin: 0; scroll-snap-type: none;
  -webkit-mask-image: none; mask-image: none;      /* eski şeridin sağ kenardaki solması */
}
.cs .pgrid:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs .pgrid:has(> :only-child) { grid-template-columns: minmax(0, 640px); }
.cs .pgrid > .pcard, .cs .pgrid:has(> :nth-child(3)) > .pcard { flex: none; min-width: 0; }
@media (max-width: 1040px) { .cs .pgrid:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cs .pgrid, .cs .pgrid:has(> :nth-child(3)), .cs .pgrid:has(> :nth-child(2):last-child), .cs .pgrid:has(> :nth-child(5)) { grid-template-columns: minmax(0, 1fr); }
}

/* Kartlar küçüldü (kullanıcı: "çok büyük"): geniş ekranda 3 ve üstü ürün üçerli, tam 4 ürün dörderli
   dizilir; kartın içi de buna göre sıkılaşır. İki ürün varsa eski ikili düzen kalır. */
@media (min-width: 1041px) {
  .cs .pgrid:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .cs .pgrid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .cs .pgrid:has(> :nth-child(3)) > .pcard .in { padding: 14px 16px 16px; gap: 7px; column-gap: 10px; }
  .cs .pgrid:has(> :nth-child(3)) > .pcard h3 { font-size: 17px; line-height: 1.25; }
  .cs .pgrid:has(> :nth-child(3)) > .pcard .in > p:not(.kupon-ipucu) { font-size: 13.5px; line-height: 1.5; }
  .cs .pgrid:has(> :nth-child(3)) > .pcard .acts { margin-top: 2px; gap: 8px; }
  .cs .pgrid:has(> :nth-child(3)) > .pcard .acts .btn { padding-block: 9px; font-size: 13.5px; }
  .cs .pgrid:has(> :nth-child(3)) > .pcard .kupon-ipucu { font-size: 11.5px; padding: 3px 8px; }
  .cs .pgrid:has(> :nth-child(3)) > .pcard .kupon-ipucu b { font-size: 13px; }
}

.cs .pcard { border-radius: var(--radius); overflow: hidden; }
.cs .pcard::before { border-radius: calc(var(--radius) - 1px); }
.cs .pcard .shot { aspect-ratio: 16 / 9; height: auto; }
.cs .pcard .in { padding: 20px 22px 22px; gap: 10px; }
/* ad solda, fiyat sağda aynı satırda; altında iki satırlık özet; en altta düğmeler */
.cs .pcard .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 16px; }
.cs .pcard h3 { font-size: 21px; grid-column: 1; }
.cs .pcard .in > .price, .cs .pcard .in > div:has(> .now) { grid-column: 2; grid-row: 1; text-align: right; justify-content: flex-end; }
.cs .pcard .in > .rozetler, .cs .pcard .in > p, .cs .pcard .acts { grid-column: 1 / -1; }
.cs .pcard .in > p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; color: var(--ink-2);
}
/* kupon ipucu: her kartta, fiyatın altında, yeşil ve belirgin (kullanıcı isteği 2026-10-10) */
.cs .kupon-ipucu, .cs .pcard .in > p.kupon-ipucu {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; width: fit-content; max-width: 100%;
  margin: 2px 0 0; padding: 4px 10px; border-radius: 8px; overflow: visible; -webkit-line-clamp: unset;
  background: color-mix(in srgb, var(--ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 42%, transparent);
  font-family: var(--fb); font-size: 12.5px; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: var(--ok);
}
.cs .kupon-ipucu b { font-family: var(--fd); font-size: 14.5px; font-weight: 800; color: var(--ok); }
/* NEW etiketi görselin sol ALTINDA: kapak görsellerinin sol üstünde zaten "FiveM" yazıyor */
.cs .yeni-rozet, .cs .yeni-rozet.alt { top: auto; bottom: 12px; left: 12px; }
.cs .pcard .shot { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }

/* kategoride tek ürün varsa: tam genişlikte yatay kart (solda görsel, sağda yazı) */
@media (min-width: 900px) {
  .cs .pgrid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .cs .pgrid > .pcard:only-child { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
  /* Görsel kendi sütununda, kırpılmadan 16:9 ve dikeyde ortalı durur. Eskiden height:100% idi:
     kart uzayınca (kupon satırı) oranı korumak için genişleyip yazının üstüne biniyordu. */
  .cs .pgrid > .pcard:only-child .shot { height: auto; width: auto; min-width: 0; aspect-ratio: 16 / 9; align-self: center; overflow: hidden; border-radius: calc(var(--radius) - 4px); margin: 14px 0 14px 14px; }
  .cs .pgrid > .pcard:only-child .in { align-content: center; padding: 22px 30px; row-gap: 10px; }
  .cs .pgrid > .pcard:only-child .in > .price, .cs .pgrid > .pcard:only-child .in > div:has(> .now) { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
  .cs .pgrid > .pcard:only-child h3 { font-size: 24px; grid-column: 1 / -1; }
  .cs .pgrid > .pcard:only-child .in > p { -webkit-line-clamp: 2; font-size: 15px; }
}
.cs .pcard .acts { margin-top: 6px; gap: 10px; }
.cs .pcard .acts .btn { border-radius: var(--radius-sm); padding-block: 12px; }
/* tek düğme dili: ana düğme her yerde kırmızı */
.cs .pcard .acts .btn-r { background: var(--accent); color: var(--accent-ink); }
.cs .pcard .acts .btn-r:hover { background: var(--accent-2); }
.cs .pz-kart, .cs .oc-kart, .cs .pz-gorsel, .cs .oc-gorsel { border-radius: var(--radius); }
.cs .pz-kart, .cs .oc-kart { overflow: hidden; }
.cs .pz-dugme .btn, .cs .oc-kart .btn { border-radius: var(--radius-sm); }
.cs .pz-dugme .btn-r { background: var(--accent); color: var(--accent-ink); }
.cs .pz-dugme .btn-r:hover { background: var(--accent-2); transform: none; }
/* görselin üstüne gelince çıkan karartma + VIEW etiketi kalktı: görsel hafifçe büyüyor, o kadar */
.cs .pcard .bak { display: none; }

/* ---------- C) HAREKET: yalnızca yumuşak geçişler ----------
   Kapananlar: özel imleç, akan kod satırları, düğmelerden geçen parlama, zıplayan hediye
   düğmesi, kayan ışık kümeleri, okuma çizgisi. Kalanlar: üstüne gelince hafif
   yükselme, kaydırınca beliren bölümler, hero görsellerinin yavaş geçişi,
   fareyi izleyen ışık (kullanıcı geri istedi).
   (JS tarafı: assets/site.js → SADE_GORUNUM.) */
.cs .imlec, .cs .kod-akis, .cs .ilerleme, .cs .promo-isik, .cs .kmp-ipucu { display: none !important; }
body.imlec-acik, body.imlec-acik .cs a, body.imlec-acik .cs button { cursor: auto; }
body.imlec-acik .cs a, body.imlec-acik .cs button, .cs .btn { cursor: pointer; }
/* kartın çevresinde dolaşan kırmızı ışık AÇIK (kullanıcı geri istedi); yuvarlak köşeyi izlesin */
.cs .pcard::after, .cs .wcard::after, .cs .rcard:not(.tpl)::after, .cs .video-kart::after { border-radius: inherit; }
.cs .btn-r::before, .cs .btn-w::before, .cs .btn-d::before { display: none; }
.cs .aurora i { animation: none; }
.cs .kmp-btn, .cs .kmp-btn.zipla { animation: none; }
/* fareyi izleyen iki parlama da AÇIK (kullanıcı geri istedi): sayfa geneli ışık ve
   katalog bölümündeki parlama. "Az hareket" ayarında da gösteriliyor. */

@media (pointer: coarse) { .cs .fare-isik { display: none !important; } }
.cs .pcard:hover, .cs .wcard:hover, .cs .rcard:not(.tpl):hover, .cs .video-kart:hover {
  transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .6);
}
.cs .pcard:hover { background: var(--line-3); }
.cs .wcard:hover, .cs .rcard:not(.tpl):hover { background: var(--line-3); }
.cs .btn-r:hover, .cs .btn-o:hover, .cs .btn-d:hover, .cs .btn-w:hover { transform: none; }
.cs .hero-v5 { transform: none !important; }
/* ---------- D) GALERİ: görsele tıklayınca tam ekran (JS: lightboxKur) ---------- */
.cs #uGorselAnaSarici img { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(4, 5, 8, .94); animation: lb-gir .18s ease both; }
@keyframes lb-gir { from { opacity: 0; } to { opacity: 1; } }
.lb img { max-width: min(94vw, 1700px); max-height: 86vh; border-radius: 14px; box-shadow: 0 30px 80px -30px #000; user-select: none; }
.lb button {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(20, 23, 30, .9); border: 1px solid rgba(255, 255, 255, .22); color: #F6F8FC; transition: border-color .2s ease, background .2s ease;
}
.lb button:hover { border-color: #FF2E49; background: rgba(255, 46, 73, .16); }
.lb button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb .lb-x { top: 18px; right: 18px; }
.lb .lb-sol { left: 18px; top: 50%; transform: translateY(-50%); }
.lb .lb-sag { right: 18px; top: 50%; transform: translateY(-50%); }
.lb .lb-say { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 600 13px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .08em; color: #9AA3B4; }
@media (max-width: 640px) { .lb .lb-sol { left: 8px; } .lb .lb-sag { right: 8px; } .lb button { width: 42px; height: 42px; } }

/* ---------- E) KEDİ boş yerlerde ----------
   Markanın kendi kedisi (assets/marka-logo-kucuk.png): boş sepet, sonuç yok,
   katalog yüklenemedi, 404 ve katalog yüklenirken. */
.cs .pazar-bos::before, .cs .katbos::before, .cs .katalog-yakinda::before, .cs .sc-liste .so-bos::before,
.cs .yok .kod::before, .cs #katalog:empty::before {
  content: ""; display: block; width: 84px; height: 84px; margin: 0 auto 14px;
  background: url(/assets/marka-logo-kucuk.png) center / contain no-repeat;
}
.cs .pazar-bos::before, .cs .katbos::before, .cs .sc-liste .so-bos::before { opacity: .9; transform: rotate(-6deg); }
.cs .sc-liste .so-bos { text-align: center; padding: 46px 20px; font-size: 15px; color: var(--ink-2); }
.cs .katalog-yakinda { text-align: center; color: var(--ink-2); }
.cs .katbos { border-radius: var(--radius); }
.cs .yok .kod::before { width: 108px; height: 108px; margin-bottom: 4px; animation: kedi-salla 3.2s ease-in-out infinite; }
/* ürünler Tebex'ten gelene kadar: hafifçe sallanan kedi */
.cs #katalog:empty { padding: 50px 0 30px; text-align: center; color: var(--ink-3); font-family: var(--fm); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.cs #katalog:empty::before { animation: kedi-salla 1.6s ease-in-out infinite; }
.cs #katalog:empty::after { content: "Loading"; }
html.dil-tr .cs #katalog:empty::after { content: "Yükleniyor"; }
@keyframes kedi-salla { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-7px) rotate(5deg); } }

/* ---------- F) AÇILIŞ: oturumun ilk sayfasında yarım saniyelik logo ----------
   <html class="acilis"> sınıfını <head>'deki satır içi betik koyuyor (surumle.mjs
   ACILIS_EKRANI); sonraki sayfa geçişlerinde yok. */
html.acilis body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: #06070A url(/assets/marka-logo-kucuk.png) center / 96px no-repeat;
  animation: ozy-acilis .65s ease forwards;
}
@keyframes ozy-acilis {
  0%   { opacity: 1; background-size: 70px; }
  45%  { opacity: 1; background-size: 104px; }
  70%  { opacity: 1; background-size: 96px; }
  100% { opacity: 0; background-size: 96px; visibility: hidden; }
}

/* ---------- G) İKONLAR: tek kalınlık ----------
   Çizgi ikonlar 1.6-2.6 arası farklı kalınlıklarla yazılmıştı ve farklı boyutlarda
   gösterildikleri için ekranda daha da ayrışıyordu. non-scaling-stroke: ikon kaç
   piksel gösterilirse gösterilsin çizgi ekranda aynı kalınlıkta. */
.cs svg [stroke-width], .cs .sahne-ok svg path, .cs .video-kart .oynat svg [stroke] {
  stroke-width: 1.7px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
}
.cs .siparis-tik svg [stroke-width], .cs .kupon-mesaj svg [stroke-width] { stroke-width: 2.4px; }

/* ---------- H) SAYFA GEÇİŞLERİ: sert yenileme yerine yumuşak solma ----------
   Tarayıcının kendi özelliği (Chrome / Edge / Safari); desteklemeyen tarayıcıda
   sayfa içeriği kısa bir solmayla beliriyor. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: ease; }
@supports not (view-transition-name: none) {
  .cs { animation: sayfa-gir .28s ease both; }
  @keyframes sayfa-gir { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- I) BÖLÜM ARALARI ----------
   Eskiden her bölüm aynı kırmızı parlamayla başlıyordu. Parlama yalnızca
   katalogda kaldı; videolar ve S.S.S. bir ton açık, yuvarlak köşeli panel;
   aradaki bölümler düz zemin. */
.cs .sec::before { display: none; }
.cs .sec.sahne::before { display: block; }
.cs #videolar, .cs #sss, .cs #yorumlar {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 44px;
  margin: 26px clamp(8px, 2.2vw, 30px); padding-block: 76px;
}
.cs #yorumlar { background: none; border-style: dashed; }
@media (max-width: 720px) { .cs #videolar, .cs #sss, .cs #yorumlar { border-radius: 28px; padding-block: 54px; } }

/* ---------- J) ALT BİLGİ: üstte büyük Discord çağrısı (JS: altBilgiCagri) ----------
   Ana sayfadaki ayrı Discord kutusu bunun içine taşındı (iki kez görünmesin). */
.cs .sec:has(> .wrap > .dbanner), .cs .cta-band { display: none; }   /* ürün sayfasındaki "Önce sor" bandı da aynı çağrı */
.cs .foot { border-top: 1px solid var(--line); margin-top: 40px; }
.cs .foot-cta {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px;
  margin-bottom: 54px; padding: 34px 38px; border-radius: 28px; border: 1px solid rgba(88, 101, 242, .4);
  background: radial-gradient(120% 160% at 100% 0%, rgba(88, 101, 242, .30), transparent 60%), var(--bg-2);
}
.cs .foot-cta img { width: 84px; height: 84px; }
.cs .foot-cta h3 { font-size: clamp(22px, 2.6vw, 30px); }
.cs .foot-cta p { margin-top: 8px; color: var(--ink-2); max-width: 60ch; }
.cs .foot-cta .btn { padding: 16px 30px; font-size: 13.5px; }
@media (max-width: 760px) {
  .cs .foot-cta { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; padding: 30px 22px; }
}
/* ---------- K) BAŞLIKLAR: düz, sıkı aralıklı, normal harf ----------
   Eski dil "iri, italik, TAMAMI BÜYÜK HARF"ti. İtalik sitenin hiçbir yerinde
   yok artık (başlıklar, fiyatlar, rakamlar); başlıklarda büyük harf zorlaması
   kalktı. Küçük etiketler ve düğmeler olduğu gibi. */
.cs, .cs * { font-style: normal !important; }
.cs h1, .cs h2, .cs h3, .cs h4, .cs .brand .name, .cs .kat-ad, .cs .video-ad b, .cs .video-kart .video-alt b,
.cs .sc-ust b, .cs .slogan, .cs .pazar-baslik, .cs .mv-baslik {
  text-transform: none; font-weight: 700; letter-spacing: -.035em;
}
.cs h1, .cs h2 { letter-spacing: -.045em; line-height: 1.04; }
.cs .sec-head h2 { font-size: clamp(32px, 4.8vw, 58px); }
.cs .brand .name { letter-spacing: -.02em; font-size: 16px; }
/* "BUILD. CREATE. DOMINATE." HTML'de büyük harfle yazılı: ilk harf dışında küçült */
.cs .slogan span { text-transform: lowercase; }
.cs .slogan span::first-letter { text-transform: uppercase; }
.cs .price .now, .cs .pz-fiyat .now, .cs .oc-fiyat .now { letter-spacing: -.04em; font-weight: 700; }

/* ---------- L) ÜST MENÜ: ESKİ HÂLİNDE (kullanıcı "hap" menüyü geri aldırdı) ----------
   Tam genişlikte bant, büyük harfli küçük bağlantılar, Ana sayfa + Discord / YouTube
   ikonları yerinde. Aşağıdakiler yalnızca turun genel kurallarının (büyük harf yok,
   italik yok, hap düğme) menüye sızmasını engelliyor. */
.cs .nav nav > .nav-link, .cs .nav nav > .nav-link *, .cs .nav nav > .nav-acilir > .nav-link, .cs .nav nav > .nav-acilir > .nav-link *,
.cs .nav .btn, .cs .nav .btn *, .cs .nav .brand .name { text-transform: uppercase !important; }
.cs .nav .brand .name { font-style: italic !important; font-weight: 800; font-size: 15px; letter-spacing: -.005em; }
.cs .nav .brand .name i { font-style: normal !important; text-transform: none !important; }
.cs .nav .btn { border-radius: 8px; font-size: 12.5px; }

/* ---------- M) BENTO: eşit kutucuklar yerine farklı boyutlu tek ızgara ----------
   "Neden bunlar?" bölümü: 4 madde + (JS: bentoKur) bir görsel kutusu + bir rakam
   kutusu. JS kutuları eklemediyse eski ikişerli düzen kalır. Güven şeridi de
   bitişik dört hücre yerine dört ayrı yuvarlak kutu. */
.cs .wcard { background: var(--bg-2); border-radius: 26px; padding: 28px 28px 30px; }
.cs .wcard::before { display: none; }
.cs .wcard:hover { background: var(--bg-3); }
.cs .wcard h3 { font-size: 20px; }
.cs .wcard .ic { width: 44px; height: 44px; border-radius: 14px; }
.cs .wgrid:has(.bento-gorsel) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cs .wgrid:has(.bento-gorsel) > .wcard:nth-of-type(1) { grid-column: 1 / 4; grid-row: 1; background: linear-gradient(140deg, rgba(255, 46, 73, .16), var(--bg-2) 62%); }
.cs .wgrid:has(.bento-gorsel) > .wcard:nth-of-type(2) { grid-column: 1 / 4; grid-row: 2; }
.cs .wgrid:has(.bento-gorsel) > .wcard:nth-of-type(3) { grid-column: 1 / 3; grid-row: 3; }
.cs .wgrid:has(.bento-gorsel) > .wcard:nth-of-type(4) { grid-column: 3 / 5; grid-row: 3; }
.cs .wgrid:has(.bento-gorsel) > .wcard:nth-of-type(5) { grid-column: 5 / 7; grid-row: 3; }
/* kartın neyle ilgili olduğu: Maps / Scripts / Everything */
.cs .wcard { display: flex; flex-direction: column; }
.cs .wcard .wetiket { margin-top: auto; padding-top: 16px; }
.cs .wcard .wetiket > i { font-style: normal; display: inline-block; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cs .wcard:nth-of-type(-n+3) .wetiket > i { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-2); }
.cs .bento-gorsel {
  grid-column: 4 / 7; grid-row: 1 / 3; position: relative; overflow: hidden; border-radius: 26px; min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; background: var(--bg-3) center / cover no-repeat;
}
.cs .bento-gorsel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(4, 5, 8, .92)); transition: opacity var(--hiz); }
.cs .bento-gorsel > * { position: relative; }
.cs .bento-gorsel b { font-family: var(--fd); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; color: var(--ink); }
.cs .bento-gorsel span.git { margin-top: 10px; font-size: 15px; color: var(--ink-2); transition: color var(--hiz); }
.cs .bento-gorsel:hover span.git { color: var(--accent); }
.cs .bento-sayi {
  grid-column: 1 / 3; grid-row: 3; border-radius: 26px; padding: 28px; background: var(--accent); color: var(--accent-ink);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 190px;
}
.cs .bento-sayi b { font-family: var(--fd); font-size: clamp(54px, 6vw, 84px); font-weight: 700; letter-spacing: -.06em; line-height: .9; color: inherit; }
.cs .bento-sayi > span { font-size: 15.5px; line-height: 1.45; }
@media (max-width: 900px) {
  .cs .wgrid:has(.bento-gorsel) { grid-template-columns: minmax(0, 1fr); }
  .cs .wgrid:has(.bento-gorsel) > * { grid-column: auto !important; grid-row: auto !important; }
  .cs .bento-gorsel { min-height: 240px; }
}

.cs .guven-sec { background: none; border-bottom: 0; padding-top: 22px; }
.cs .guven { gap: 14px; overflow: visible; border-radius: 0; }
.cs .gitem { background: var(--bg-2); border: 0 !important; border-radius: 22px; }
.cs .gitem b { text-transform: none; letter-spacing: -.01em; font-size: 15.5px; font-family: var(--fd); font-weight: 700; }
@media (max-width: 720px) {
  .cs .guven { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cs .gitem { padding: 18px 12px; }
}
/* kendi kuralında "büyük harf" yazan kutu başlıkları */
.cs .wcard h3, .cs .faq-side h3, .cs .dbanner h3, .cs .fcard h3, .cs .nd-kart h3, .cs .foot-cta h3 { text-transform: none; letter-spacing: -.03em; }

/* ---------- N) DÜĞMELER VE ETİKETLER: normal yazı, tam yuvarlak ----------
   Sitede artık hiçbir yazı zorla büyük harfe çevrilmiyor (HTML'de nasıl yazıldıysa
   öyle). Aralıklı minik etiketlerin harf arası normale indi (liste aşağıda, eski
   kurallardan otomatik çıkarıldı). Düğmeler tam yuvarlak "hap". */
.cs, .cs * { text-transform: none !important; }
.cs .slogan span, .cs .slogan span * { text-transform: lowercase !important; }
.cs .slogan span::first-letter { text-transform: uppercase !important; }
.cs .btn { border-radius: 999px; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; padding: 13px 24px; }
.cs .btn-sm { font-size: 13.5px; padding: 10px 18px; }
.cs .pcard .acts .btn, .cs .pz-dugme .btn, .cs .oc-kart .btn, .cs .so-alt .btn, .cs .sc-alt .btn, .cs .siparis-butonlar .btn,
.cs .sc-kupon-form button, .cs .neden-cta .btn, .cs .one-cta .btn, .cs .pz-kart-yok .btn, .cs .tum-gor { border-radius: 999px; }
.cs .chip, .cs .pazar-filtre button, .cs .yasal-ic a { border-radius: 999px; padding-inline: 12px; }
.cs .pazar-filtre button { font-size: 13.5px; padding: 8px 15px; }
.cs .brand .name i,
.cs .langbar a,
.cs .btn,
.cs .chip,
.cs .rule-head span,
.cs .kicker,
.cs .gitem b,
.cs .serit-ic span,
.cs .pcard .shot .rv,
.cs .pcard .flag,
.cs .yeni-rozet,
.cs .sayi > span,
.cs .adim h3,
.cs .foot h5,
.cs .geri,
.cs .eyebrow,
.cs .panel h4,
.cs .warn .lbl,
.cs .appgroup > b,
.cs th,
.cs .yasal-tarih,
.cs .yasal-ic a,
.cs .tum-gor,
.cs .video-ad > span,
.cs .video-kart .video-alt span,
.cs .rcard .tag,
.cs .rcard .yildiz,
.cs .yk-rozet,
.cs .faq-sayi,
.cs .pcard .bak span,
.cs .nav-link,
.cs .so-bas,
.cs .so-toplam,
.cs .pazar-alt,
.cs .pazar-filtre button,
.cs .sc-ozet-satir span,
.cs .sc-kupon-form button,
.cs .sc-kupon-rozet .kod,
.cs .sc-indirim-satiri span,
.cs .siparis-meta span,
.cs .siparis-ozet span,
.cs .docs-grup,
.cs .doc-ozet dt,
.cs .doc th,
.cs .docs-sag-bas { letter-spacing: .005em; }

/* ---------- O) ANA SAYFANIN TEPESİ: eski mantık, iyileştirilmiş ----------
   Arka planda yavaşça birbirine geçen harita görselleri + solda slogan (ürün kartı
   yığını denendi, kullanıcı geri aldırdı). Eskiye göre: görseller neredeyse iki kat
   parlak (.58 -> .9), daha az büyütülüyor (bulanıklık azaldı), soldaki karartma
   yazının bittiği yerde bitiyor ve sağ altta o an görünen haritanın adı + bağlantısı
   var (JS: heroEtiketKur; aynı --i / --n zamanlamasıyla, saf CSS ile eşzamanlı). */
.cs .hero-harita { left: 18%; }
.cs .hero-harita::after {
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5, 5, 8, .86) 14%, rgba(5, 5, 8, .34) 36%, transparent 58%),
    linear-gradient(180deg, rgba(5, 5, 8, .5) 0%, transparent 16%, transparent 74%, var(--bg) 100%);
}
.cs .hero-harita span {
  animation: ozy-hero-gecis calc(var(--n) * 7s) linear infinite, ozy-hero-kayma calc(var(--n) * 7s) ease-in-out infinite !important;
  animation-delay: calc(var(--i) * 7s), calc(var(--i) * 7s) !important;
}
@keyframes ozy-hero-gecis { 0% { opacity: 0; } 9% { opacity: .9; } 20% { opacity: .9; } 30% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ozy-hero-kayma {
  0%   { transform: scale(1.03) translate3d(1.5%, 0, 0); }
  30%  { transform: scale(1.1) translate3d(-1.5%, 0, 0); }
  100% { transform: scale(1.1) translate3d(-1.5%, 0, 0); }
}
.cs .hero-v5::after, .cs .hero-v5 .izgara { opacity: .25; }
.cs .hero-etiketler { position: absolute; right: max(24px, calc((100vw - 1240px) / 2 + 24px)); bottom: max(34px, calc(8vh + 70px)); z-index: 3; height: 46px;   /* hero 92vh: etiket ekranın altında kalmasın */ width: min(360px, 60vw); }
.cs .hero-etiket {
  position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 9px 10px 9px 18px; border-radius: 999px; background: rgba(8, 9, 13, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .16);
  opacity: 0; visibility: hidden;
  /* !important: Windows'ta yaygın olan "az hareket" ayarı sitedeki bütün animasyonları kapatıyor; slaytlar gibi bu da açık kalmalı */
  animation: ozy-hero-etiket calc(var(--n) * 7s) linear infinite !important; animation-delay: calc(var(--i) * 7s) !important;
  transition: border-color var(--hiz);
}
.cs .hero-etiket:hover { border-color: var(--accent); }
.cs .hero-etiket b { font-family: var(--fd); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.cs .hero-etiket i { font-size: 13.5px; font-weight: 600; color: var(--accent-ink); background: var(--accent); padding: 5px 12px; border-radius: 999px; }
@keyframes ozy-hero-etiket {
  0%, 5%  { opacity: 0; visibility: hidden; transform: translateY(8px); }
  9%, 20% { opacity: 1; visibility: visible; transform: none; }
  24%, 100% { opacity: 0; visibility: hidden; transform: translateY(-6px); }
}
@media (max-width: 760px) {
  .cs .hero-harita { left: 0; }
  /* dar ekranda yazı görselin tam üstünde: karartma bütün alana, etiket yazının altına */
  .cs .hero-harita::after { background: linear-gradient(180deg, rgba(5, 5, 8, .8) 0%, rgba(5, 5, 8, .66) 62%, var(--bg) 100%); }
  .cs .hero-v5 .wrap { padding-bottom: 104px; }
  .cs .hero-etiketler { right: 16px; bottom: 26px; }
}

/* ---------- P) ÜRÜN SAYFASI: büyük galeri, yanında yapışkan satın alma kutusu ----------
   Sol sütun: galeri + üç özellik kutusu + açıklama (JS: urunDuzeni açıklamayı ve
   güvence listesini bu sütuna taşıyor, uzun açıklamaya "devamını oku" ekliyor).
   Sağ sütun: ad, fiyat, sepet -- aşağı kaydırırken ekranda kalıyor. */
.cs .uhero { overflow: visible; overflow-x: clip; border-bottom: 0; }
.cs .uhero .wrap { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 34px; align-items: start; padding-block: 40px 30px; }
.cs .ugorsel { border-radius: 24px; overflow: hidden; background: var(--bg-3); box-shadow: 0 30px 70px -40px #000; }
.cs .ugorsel::before { display: none; }
.cs .ugorsel:hover { transform: none; }
.cs .ugaleri { gap: 10px; }
.cs .ugaleri button { width: 96px; height: 60px; border-radius: 12px; }
.cs .ubilgi { position: sticky; top: 92px; background: var(--bg-2); border-radius: 26px; padding: 28px 28px 30px; }
.cs .ubilgi h1 { font-size: clamp(28px, 3vw, 40px); }
.cs .ubilgi .satinal { display: grid; gap: 16px; }
.cs .ubilgi .satinal .btn { width: 100%; padding-block: 16px; font-size: 16px; }
.cs .ubilgi .ozet { color: var(--ink-2); }
.cs .ugorsel-kol > .assure {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none;
}
.cs .ugorsel-kol > .assure li {
  position: relative; padding: 46px 18px 18px; border-radius: 20px; background: var(--bg-2);
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
.cs .ugorsel-kol > .assure li::before {
  content: ""; position: absolute; left: 18px; top: 18px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.5 3.5L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cs .ugorsel-kol > .cms { max-width: none; margin-top: 26px; padding: 28px 30px; border-radius: 24px; background: var(--bg-2); position: relative; }
.cs .ugorsel-kol > .cms > :first-child { margin-top: 0; }
.cs .ugorsel-kol > .cms.kisa { max-height: 430px; overflow: hidden; }
.cs .ugorsel-kol > .cms.kisa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; border-radius: 0 0 24px 24px;
  background: linear-gradient(180deg, transparent, var(--bg-2) 78%); pointer-events: none;
}
.cs .cms-devam { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: -24px; }
.cs .cms-devam .btn { background: var(--bg-3); border-color: var(--line-3); }
.cs .cms-devam.acik { margin-top: 14px; }
@media (max-width: 900px) {
  .cs .uhero .wrap { display: flex; flex-direction: column; gap: 14px; padding-block: 22px 20px; }
  .cs .ugorsel-kol { display: contents; }
  .cs .ugorsel { order: 1; } .cs .ugaleri { order: 2; } .cs .ubilgi { order: 3; position: static; }
  .cs .ugorsel-kol > .assure { order: 4; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .cs .ugorsel-kol > .assure li { padding: 16px 16px 16px 50px; } .cs .ugorsel-kol > .assure li::before { top: 16px; left: 16px; }
  .cs .ugorsel-kol > .cms { order: 5; margin-top: 0; padding: 22px 20px; } .cs .cms-devam { order: 6; }
  .cs .ugaleri button { width: 72px; height: 46px; }
}

/* ---------- Q) SEPET: tam ekran yerine sağdan kayan yan panel ----------
   Sayfa arkada (karartılmış) görünmeye devam ediyor; boşluğa tıklamak kapatıyor. */
.cs .sc-perde { background: rgba(4, 5, 8, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: lb-gir .2s ease both; }
.cs .sc-panel {
  inset: 0 0 0 auto; width: min(460px, 100%); height: 100%;
  background: var(--bg); border-left: 1px solid var(--line-2); border-radius: 26px 0 0 26px; overflow: hidden;
  box-shadow: -40px 0 80px -40px #000; animation: sc-yandan .28s cubic-bezier(.22, .7, .3, 1) both !important;
}
@keyframes sc-yandan { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.cs .sc-ust { padding: 18px 20px; }
.cs .sc-ust b { font-size: 20px; }
.cs .sc-x { border-radius: 50%; }
.cs .sc-liste, .cs .sc-alt-ic { max-width: none; }
.cs .sc-liste { padding: 16px; gap: 8px; }
.cs .sc-alt { padding: 16px 18px 20px; }
/* dar panel: satırlar telefon düzeninde (görsel + ad + sil / adet + fiyat) */
.cs .sc-liste .so-satir-tam {
  grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "gorsel ad sil" "adet adet fiyat";
  row-gap: 10px; column-gap: 12px; padding: 12px; border-radius: 16px;
}
.cs .sc-liste .so-satir-tam img { width: 56px; height: 56px; border-radius: 12px; }
@media (max-width: 520px) { .cs .sc-panel { border-radius: 0; border-left: 0; } }

/* ---------- R) TELEFONDA ALT MENÜ (JS: altMenuKur) ----------
   Ekranın altında dört düğme: Ana sayfa, Haritalar, Sepet, Dökümanlar. */
.cs .alt-menu { display: none; }
@media (max-width: 760px) {
  .cs .alt-menu {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 90;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 6px;
    border-radius: 22px; border: 1px solid var(--line-2);
    background: color-mix(in srgb, var(--bg-2) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 18px 40px -18px #000;
  }
  .cs .alt-menu a, .cs .alt-menu button {
    position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 2px 6px; border: 0; background: none; cursor: pointer;
    border-radius: 16px; color: var(--ink-3); font-family: var(--fb); font-size: 11.5px; font-weight: 500; line-height: 1.2;
  }
  .cs .alt-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
  .cs .alt-menu .on { color: var(--ink); background: rgba(255, 255, 255, .07); }
  .cs .alt-menu .on svg { color: var(--accent); }
  .cs .alt-menu .am-say {
    position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
  }
  .cs .alt-menu .am-say:empty { display: none; }
  .cs { padding-bottom: 84px; }
  .cs .kmp-btn { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); right: 14px; width: 48px; height: 48px; }
  html.sepet-acik .cs .alt-menu { display: none; }
}

/* ---------- S) CADILAR BAYRAMI: yalnızca Vampire Village (JS: cadilarKur) ----------
   <html class="cadilar-ay">  tarih geçerliyken: Vampire Village KARTLARINDA turuncu-mor
                              çerçeve + "Halloween" etiketi (diğer ürünlere dokunmaz)
   <html class="cadilar">     Vampire Village'ın kendi ürün sayfasında: vurgu rengi
                              turuncu, mor ışık, köşede yarasalar
   Bitiş tarihi assets/site.js başında CADILAR_BITIS; geçince ikisi de kendiliğinden kalkar. */
html.cadilar-ay .cs .pcard:has(a[href*="vampire-village"]),
html.cadilar-ay .cs .pz-kart:has(a[href*="vampire-village"]),
html.cadilar-ay .cs .oc-kart:has(a[href*="vampire-village"]) {
  background: linear-gradient(135deg, #FF7A1A, #8B3DFF 70%); box-shadow: 0 24px 60px -34px rgba(139, 61, 255, .8);
}
html.cadilar-ay .cs .pcard:has(a[href*="vampire-village"]) .shot::before,
html.cadilar-ay .cs .pz-kart:has(a[href*="vampire-village"]) .pz-gorsel::before,
html.cadilar-ay .cs .oc-kart:has(a[href*="vampire-village"]) .oc-gorsel::before {
  content: "🎃 Halloween"; position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 5px 11px; border-radius: 999px;
  background: #FF7A1A; color: #1B0B00; font-family: var(--fb); font-size: 12px; font-weight: 700; box-shadow: 0 6px 16px -6px #000;
}
html.cadilar-ay .cs .pcard:has(a[href*="vampire-village"]) .acts .btn-r,
html.cadilar-ay .cs .pz-kart:has(a[href*="vampire-village"]) .pz-dugme .btn-r { background: #FF7A1A; color: #1B0B00; }
html.cadilar .cs {
  --accent: #FF7A1A; --accent-2: #FF9A4D; --accent-ink: #1B0B00;
  --accent-soft: rgba(255, 122, 26, .12); --accent-line: rgba(255, 122, 26, .36); --accent-glow: rgba(139, 61, 255, .42);
}
html.cadilar .cs .uhero {
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(139, 61, 255, .30), transparent 70%),
    radial-gradient(50% 60% at 0% 10%, rgba(255, 122, 26, .16), transparent 70%);
}
html.cadilar .cs .uhero::before {
  content: ""; position: absolute; right: 2%; top: 6px; width: 260px; height: 120px; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 120'%3E%3Cg fill='%23130A1F' stroke='%238B3DFF' stroke-width='1.2'%3E%3Cpath d='M40 40c6-10 14-10 18-2 2-5 4-5 6 0 4-8 12-8 18 2-8-2-12 2-13 8-3-4-6-4-8 0-2-4-5-4-8 0-1-6-5-10-13-8Z'/%3E%3Cpath transform='translate(110 26) scale(1.5)' d='M0 14c6-10 14-10 18-2 2-5 4-5 6 0 4-8 12-8 18 2-8-2-12 2-13 8-3-4-6-4-8 0-2-4-5-4-8 0-1-6-5-10-13-8Z'/%3E%3Cpath transform='translate(190 70) scale(.8)' d='M0 14c6-10 14-10 18-2 2-5 4-5 6 0 4-8 12-8 18 2-8-2-12 2-13 8-3-4-6-4-8 0-2-4-5-4-8 0-1-6-5-10-13-8Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
html.cadilar .cs .ubilgi { border: 1px solid rgba(255, 122, 26, .3); }
html.cadilar .cs .ubilgi h1::after {
  content: "🎃 Halloween"; display: inline-block; vertical-align: middle; margin-left: 12px; padding: 5px 12px; border-radius: 999px;
  background: #FF7A1A; color: #1B0B00; font-family: var(--fb); font-size: 13px; font-weight: 700; letter-spacing: 0;
}

/* ---------- T) KAYDIRMA ÇUBUĞU VE SEÇİM RENGİ ---------- */
html { scrollbar-width: thin; scrollbar-color: #2B303B #06070A; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #06070A; }
::-webkit-scrollbar-thumb { background: #2B303B; border-radius: 999px; border: 3px solid #06070A; }
::-webkit-scrollbar-thumb:hover { background: #FF2E49; }
::selection { background: rgba(255, 46, 73, .88); color: #fff; }

/* fare parlaması daha hafif (kullanıcı: rahatsız edici). Eski: ışık .55, katalog .5 */
.cs .fare-isik { width: 480px; height: 480px; margin: -240px 0 0 -240px; }
.cs .fare-isik.acik { opacity: .2; }
.cs .sahne.fare-icinde::after { opacity: .18; }

/* katalogdaki bölüm adları (Scripts / Maps) büyük ve belirgin (kullanıcı isteği) */
.cs .kat > .rule-head { margin-bottom: 26px; gap: 22px; }
.cs .kat > .rule-head span {
  font-family: var(--fd); font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--ink); text-transform: none;
}
.cs .kat > .rule-head::before, .cs .kat > .rule-head::after { background: var(--line-2); }

/* ---------- W) PARA BİRİMİ MENÜSÜ (site.js: paraMenuKur) ---------- */
.cs .para-menu { position: relative; display: inline-flex; }
.cs .para-sec-gizli { display: none !important; }
.cs .para-dugme {
  height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink);
  font-family: var(--fb); font-size: 12.5px; font-weight: 600; transition: border-color .15s, background .15s;
}
.cs .para-dugme i { font-style: normal; color: var(--accent-2); font-weight: 700; }
.cs .para-dugme b { font-weight: 600; letter-spacing: .03em; }
.cs .para-dugme svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.cs .para-dugme:hover, .cs .para-menu.acik .para-dugme { border-color: var(--line-3); background: var(--bg-3); }
.cs .para-menu.acik .para-dugme svg { transform: rotate(180deg); }
.cs .para-dugme:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cs .para-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 300px; box-sizing: border-box; padding: 10px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px -18px #000, 0 0 0 1px rgba(0, 0, 0, .4);
  animation: para-ac .16s ease-out !important;
}
.cs .para-panel[hidden] { display: none; }
@keyframes para-ac { from { opacity: 0; transform: translateY(-6px); } }
.cs .para-panel input {
  box-sizing: border-box; width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: 10px; color: var(--ink);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%239AA3B4' stroke-width='2'/%3E%3Cpath d='m16 16 4.5 4.5' fill='none' stroke='%239AA3B4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center / 16px;
  border: 1px solid var(--line-2); font-family: var(--fb); font-size: 14px;
}
.cs .para-panel input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 46, 73, .16); }
.cs .para-panel input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cs .para-liste { max-height: 320px; overflow-y: auto; margin: 8px -4px 0; padding: 0 4px; scrollbar-width: thin; scrollbar-color: #2B303B transparent; overscroll-behavior: contain; }
.cs .para-bas { margin: 10px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.cs .para-bas:first-child { margin-top: 4px; }
.cs .para-bos { margin: 18px 8px; font-size: 14px; color: var(--ink-2); text-align: center; }
.cs .para-sat {
  display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) 18px; align-items: center; gap: 6px; width: 100%; padding: 8px; cursor: pointer;
  background: transparent; border: 0; border-radius: 10px; color: var(--ink); text-align: left; font-family: var(--fb); font-size: 14px;
}
.cs .para-sat i { display: grid; place-items: center; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cs .para-sat b { font-weight: 700; letter-spacing: .03em; }
.cs .para-sat span { color: var(--ink-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .para-sat svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cs .para-sat:hover, .cs .para-sat:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.cs .para-sat.secili { background: var(--accent-soft); }
.cs .para-sat.secili i { background: var(--accent); color: #fff; }
.cs .para-not { margin: 8px 6px 2px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 720px) {
  .cs .para-dugme { padding: 0 5px 0 7px; font-size: 11.5px; gap: 4px; }
  /* telefonda alttan açılan sayfa: üst çubuktaki dar yere sığmaz */
  .cs .para-panel.sayfa { position: fixed; top: auto; right: 8px; left: 8px; bottom: 8px; width: auto; z-index: 2147482500; padding: 12px; border-radius: 20px; animation-name: para-ac-alt !important; }
  .cs .para-liste { max-height: min(52vh, 420px); }
  .cs .para-sat { padding: 11px 8px; }
  .cs .para-perde { position: fixed; inset: 0; z-index: 2147482400; background: rgba(3, 4, 6, .62); }
  .cs .para-perde[hidden] { display: none; }
}
@keyframes para-ac-alt { from { opacity: 0; transform: translateY(16px); } }

/* ---------- X) MÜŞTERİ GÖZÜYLE DÜZELTMELER (2026-10-12) ---------- */
/* Cfx.re giriş açıklaması (site.js: girisOnayi): .dis-git kutusunun üstüne */
.giris-onay .giris-onay-logo { display: block; width: 54px; height: 54px; margin: 0 auto 16px; object-fit: contain; }
.giris-onay .dis-git-aciklama { line-height: 1.55; }
.giris-onay-liste { margin: 16px 0 0; padding: 14px 16px; list-style: none; display: grid; gap: 9px; text-align: left; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); }
.giris-onay-liste li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.giris-onay-liste li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.500 4 4 8-9' fill='none' stroke='%233DDC84' stroke-width='3.200' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* açılış başlığı artık bir cümle: satırlar biraz daha küçük ki sığsın */
.cs .hero-v5 .slogan { font-size: clamp(40px, 6.2vw, 84px); }
/* başlık artık doğru harflerle yazılı ("FiveM"): eski "hepsini küçült, ilk harfi büyüt" kuralı kapalı */
.cs .slogan span, .cs .slogan span * { text-transform: none !important; }
.cs .slogan span::first-letter { text-transform: none !important; }
@media (max-width: 720px) {
  /* üst şerit tek satır: başlık + kod + kalan gün/saat. Eskiden üç satırdı, ekranın altıda biri. */
  .cs .promo .wrap { flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding-top: 7px; padding-bottom: 7px; }
  .cs .promo .t { flex-wrap: nowrap; min-width: 0; gap: 6px; }
  .cs .promo .t b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs .promo .promo-alt, .cs .promo .promo-ic, .cs .promo .kupon-et { display: none; }
  .cs .promo .kupon { flex: none; padding: 0; }
  .cs .promo .kupon code { font-size: 12.5px; }
  .cs .promo .geri-sayim { flex: none; gap: 3px; }
  .cs .promo .geri-sayim .gs-kutu:nth-child(n+3) { display: none; }
  .cs .promo .geri-sayim .gs-kutu { min-width: 0; padding: 3px 6px; }
  .cs .promo .geri-sayim .gs-kutu b { font-size: 12.5px; }
  .cs .promo .geri-sayim .gs-kutu i { font-size: 8px; }
  /* açılıştaki ürün etiketi telefonda alt menünün altında kalıyordu */
  .cs .hero-etiketler { display: none; }
}

/* ---------- Y) ÜRÜN AÇIKLAMASI VE KÜNYE ---------- */
.cs .cms.duzenli { font-family: var(--fb); font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.cs .cms.duzenli h3 { margin: 26px 0 10px; font-family: var(--fd); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-transform: none; }
.cs .cms.duzenli h3:first-child { margin-top: 0; }
.cs .cms.duzenli p { margin: 0 0 12px; }
.cs .cms.duzenli ul { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 8px; }
.cs .cms.duzenli li { position: relative; margin: 0; padding-left: 22px; }
.cs .cms.duzenli li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cs .ukunye { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.cs .ukunye dt { font-size: 12.5px; color: var(--ink-3); }
.cs .ukunye dd { margin: 3px 0 0; font-family: var(--fd); font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.cs .ukunye > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Z) SON SİPARİŞLER (site.js: sonSiparislerKur, son.php) ---------- */
.cs .son-sec { padding: clamp(10px, 2vw, 20px) 0 clamp(40px, 5vw, 60px); }
.cs .son-sec[hidden] { display: none; }
.cs .son-bas { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cs .son-bas h2 { font-family: var(--fd); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
/* 2026-10-29 performans: box-shadow animasyonu her karede ana iş parçacığında boyanıyordu (zayıf PC'de boşta %100
   işlemci) -> nabız halkası ayrı katmanda, yalnız transform + opacity (ekran kartı çizer) */
.cs .son-nokta { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.cs .son-nokta::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 30%, transparent);
  will-change: transform, opacity; animation: son-nabiz 2s ease-in-out infinite !important; }
@keyframes son-nabiz { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0; } }
.cs .son-liste { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.cs .son-kart { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 12px; width: 300px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); transition: border-color .15s, background .15s; }
.cs a.son-kart:hover { border-color: var(--line-3); background: var(--bg-3); }
.cs .son-kart img { flex: none; width: 64px; height: 40px; object-fit: cover; border-radius: 8px; }
.cs .son-kart > div { min-width: 0; }
.cs .son-yazi { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs .son-yazi b { color: var(--ink); font-weight: 700; }
.cs .son-yazi span { color: var(--ink); }
.cs .son-zaman { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: var(--ink-3); }

@media (max-width: 720px) { .cs .kmp-btn { display: none !important; } }

/* ---------- U) KAYAN ŞERİT ---------- */
.cs .serit {
  position: relative; overflow: hidden; padding: 22px 0; margin: 8px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cs .serit-yol { display: flex; width: max-content; will-change: transform; animation: serit-ak 60s linear infinite !important; }
.cs .serit.ters .serit-yol { animation-direction: reverse !important; }
.cs .serit:hover .serit-yol { animation-play-state: paused !important; }
.cs .serit-grup { display: flex; align-items: center; flex: none; }
.cs .serit span {
  font-family: var(--fd, inherit); font-weight: 800; font-size: clamp(26px, 4vw, 46px); letter-spacing: -.04em;
  line-height: 1; white-space: nowrap; color: var(--ink);
}
.cs .serit span.bos { color: transparent; letter-spacing: .01em;   /* harfler üst üste binerse dış çizgiler kesişiyor */ -webkit-text-stroke: 1px rgba(255, 255, 255, .38); }
.cs .serit i { flex: none; width: 10px; height: 10px; margin: 0 clamp(18px, 3vw, 34px); border-radius: 50%; background: var(--accent); }
@keyframes serit-ak { to { transform: translateX(-50%); } }

/* ---------- V) FİLM GRENİ ----------
   Bütün sayfanın üstünde çok hafif kumlu doku; tıklamayı engellemez. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/assets/%23g)'/%3E%3C/svg%3E");
}

/* ---------- Z) HESAP MENÜSÜ (2026-10-12) ----------
   Sağ üstteki açılır hesap menüsü: başlıkta büyük avatar + çevrim içi noktası + Cfx.re rozeti, dört hızlı kutu
   (hesap / favoriler / siparişler / ayarlar), altında kupon ve sepet satırları, en altta ayrı çıkış şeridi.
   HTML: parcalar/ust.html + index.html (.hm-izgara, .hm-liste, .hm-alt, .hm-rozet). */
.cs .hesapmenu {
  min-width: 336px; padding: 0; gap: 0; overflow: hidden; clip-path: none; border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 30, 37, .98), rgba(17, 17, 21, .98));
  border: 1px solid var(--line-2); box-shadow: 0 28px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.cs .hesapmenu .hm-ust {
  position: relative; padding: 18px 16px 16px; margin: 0; gap: 13px; border-bottom: 1px solid var(--line);
  background: radial-gradient(130% 160% at 0% 0%, var(--accent-soft), rgba(0, 0, 0, 0) 62%);
}
.cs .hesapmenu .hm-avatar {
  position: relative; width: 48px; height: 48px; border-radius: 15px; font-size: 19px; font-style: normal;
  background: linear-gradient(150deg, var(--accent), rgba(255, 255, 255, .06) 180%); border: 0; color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.cs .hesapmenu .hm-avatar::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%;
  background: #3ddc84; border: 3px solid #1b1b21;
}
.cs .hesapmenu .hm-ust-yazi span { font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.cs .hesapmenu .hm-ust b { margin-top: 2px; font-size: 16px; font-weight: 700; }
.cs .hesapmenu .hm-rozet {
  margin-left: auto; flex: none; padding: 4px 10px 5px; border-radius: 999px; font-family: var(--fm); font-size: 11px; font-weight: 600;
  color: var(--ink-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2);
}
.cs .hesapmenu .hm-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 12px 8px; }
.cs .hesapmenu .hm-izgara a {
  flex-direction: column; align-items: flex-start; gap: 10px; padding: 13px 12px 12px; border-radius: 15px;
  background: rgba(255, 255, 255, .028); border: 1px solid var(--line);
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}
.cs .hesapmenu .hm-izgara a:hover { background: var(--accent-soft); border-color: var(--accent-line); transform: translateY(-2px); }
.cs .hesapmenu .hm-izgara .am-ic { width: 34px; height: 34px; border-radius: 11px; }
.cs .hesapmenu .hm-izgara .am-yazi b { font-size: 12.5px; }
.cs .hesapmenu .hm-izgara .am-yazi i { white-space: nowrap; }
.cs .hesapmenu .hm-liste { display: grid; gap: 2px; padding: 0 8px 8px; }
.cs .hesapmenu .hm-liste a, .cs .hesapmenu .hm-liste button.hm-item { position: relative; padding: 9px 30px 9px 10px; border-radius: 12px; }
.cs .hesapmenu .hm-liste a::after, .cs .hesapmenu .hm-liste button.hm-item::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.7px solid var(--ink-3); border-top: 1.7px solid var(--ink-3); transform: rotate(45deg);
  transition: transform .18s ease, border-color .18s ease !important;
}
.cs .hesapmenu .hm-liste a:hover::after, .cs .hesapmenu .hm-liste button.hm-item:hover::after { transform: translateX(3px) rotate(45deg); border-color: var(--accent); }
.cs .hesapmenu .hm-alt {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px 10px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .22);
}
.cs .hesapmenu .hm-alt #cikisBtn { width: auto; flex: none; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 11px; border: 1px solid var(--line-2); }
.cs .hesapmenu .hm-alt #cikisBtn:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.cs .hesapmenu .hm-alt #cikisBtn .am-ic { width: 26px; height: 26px; border-radius: 8px; }
.cs .hesapmenu .hm-alt .hm-not { flex: 1; margin: 0; padding: 0; border: 0; text-align: right; font-size: 11.5px; line-height: 1.35; }
@media (max-width: 420px) {
  .cs .hesapmenu { min-width: 0; width: calc(100vw - 24px); }
  .cs .hesapmenu .hm-alt .hm-not { display: none; }
}
/* ====================== /GÖRÜNÜM TURU 2026-10-10 ====================== */

/* Kart etiketleri (2026-10-25; turdan bağımsız) — site.js dahilEtiketi / yeniRozeti:
   "MLO included" kırmızı hap (framework rozetlerinin başında), UPDATED = NEW'in yerinde koyu etiket */
.cs .rozetler .chip-dahil, .cs .pcard .in > .rozetler .chip-dahil { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); font-weight: 700; }
.cs .yeni-rozet.guncel-rozet { background: rgba(6, 7, 10, .82); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .6); }

/* Discord kapisi penceresi (site.js discordOnayi) */
.dc-onay .dc-onay-logo { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px; background: #5865F2; }

/* ---------- PERFORMANS (2026-10-29): ekranda olmayan sonsuz animasyonlar durur (site.js ekrandaDegilkenDurdur) ----------
   Dosyanin SONUNDA ve cift sinifla: animasyonu !important kisaltmayla tanimlayan kurallar (.cs .serit-yol,
   .cs .hero-harita span) play-state'i yeniden 'running' yapiyordu. */
.cs .durgun.durgun, .cs .durgun.durgun *, .cs .durgun.durgun::before, .cs .durgun.durgun::after,
.cs .durgun.durgun *::before, .cs .durgun.durgun *::after { animation-play-state: paused !important; }

/* ---------- HALLOWEEN KAMPANYASI (2026-10-29 -> 2026-11-01 23:59 TR; site.js HALLOWEEN, html.hw) ----------
   Tarih geçince html.hw hiç eklenmez, bu blok etkisiz kalır. Yalnız transform / opacity animasyonu (performans kuralı);
   "az hareket" ayarı bu makinede ve çoğu Windows'ta açık geldiği için yarasa animasyonu !important. */
html.hw .cs {
  --accent: #FF7A1A; --accent-2: #FF9A4D; --accent-ink: #1B0B00;
  --accent-soft: rgba(255, 122, 26, .12); --accent-line: rgba(255, 122, 26, .36); --accent-glow: rgba(139, 61, 255, .42);
  background-image:
    radial-gradient(1100px 620px at 85% -6%, rgba(139, 61, 255, .20), transparent 70%),
    radial-gradient(900px 520px at 0% 2%, rgba(255, 122, 26, .11), transparent 70%);
  background-repeat: no-repeat;
}
/* üst şerit: mor -> turuncu -> mor, kupon gizli (OZY10 bu sürede çalışmıyor) */
html.hw .cs .promo { background: linear-gradient(90deg, #2A0D4A 0%, #6A1FB0 22%, #FF7A1A 50%, #6A1FB0 78%, #2A0D4A 100%); }
html.hw .cs .promo .t, html.hw .cs .promo .t b { color: #fff; }
html.hw .cs .promo .promo-alt { color: rgba(255, 255, 255, .88); }
html.hw .cs .promo .promo-ic { display: none; }
html.hw .cs .promo .kupon { display: none !important; }
html.hw .cs .promo .gs-kutu { background: rgba(20, 6, 34, .55); border-color: rgba(255, 255, 255, .22); }
/* indirim rozetleri: balkabağı */
html.hw .cs .pcard .flag, html.hw .cs .price .off, html.hw .cs .pz-indirim { background: #FF7A1A; color: #1B0B00; }
html.hw .cs .pcard .flag::before, html.hw .cs .price .off::before, html.hw .cs .pz-indirim::before { content: "🎃 "; }
/* indirimdeki kartlar turuncu-mor çerçeve */
html.hw .cs .pcard:has(.flag), html.hw .cs .pz-kart:has(.pz-indirim) {
  background: linear-gradient(135deg, #FF7A1A, #8B3DFF 70%); box-shadow: 0 24px 60px -34px rgba(139, 61, 255, .8);
}
html.hw ::selection { background: rgba(255, 122, 26, .9); color: #1B0B00; }
html.hw ::-webkit-scrollbar-thumb:hover { background: #FF7A1A; }

/* dekor katmanı: yarasalar + köşe ağları (site.js halloweenKur) */
.hw-dekor { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.hw-yarasa { position: absolute; left: -70px; top: 18%; width: 46px; height: 26px; will-change: transform;
  animation: hw-uc 26s linear infinite !important; }
.hw-yarasa::before { content: ""; position: absolute; inset: 0; will-change: transform; transform-origin: 50% 40%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 42 26'%3E%3Cpath d='M0 14c6-10 14-10 18-2 2-5 4-5 6 0 4-8 12-8 18 2-8-2-12 2-13 8-3-4-6-4-8 0-2-4-5-4-8 0-1-6-5-10-13-8Z' fill='%23140A22' stroke='%238B3DFF' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hw-kanat .32s ease-in-out infinite alternate !important; }
.hw-yarasa:nth-child(1) { top: 16%; animation-duration: 24s !important; animation-delay: -3s !important; }
.hw-yarasa:nth-child(2) { top: 34%; animation-duration: 31s !important; animation-delay: -14s !important; }
.hw-yarasa:nth-child(3) { top: 58%; animation-duration: 27s !important; animation-delay: -21s !important; }
.hw-yarasa:nth-child(4) { top: 24%; animation-duration: 36s !important; animation-delay: -8s !important; }
.hw-yarasa:nth-child(5) { top: 72%; animation-duration: 29s !important; animation-delay: -26s !important; }
.hw-yarasa:nth-child(6) { top: 46%; animation-duration: 40s !important; animation-delay: -33s !important; }
.hw-yarasa:nth-child(2)::before, .hw-yarasa:nth-child(4)::before { animation-duration: .4s !important; }
.hw-yarasa:nth-child(4)::before, .hw-yarasa:nth-child(6)::before { opacity: .6; }
@keyframes hw-uc {
  0%   { transform: translate3d(0, 0, 0) scale(var(--s, 1)); }
  25%  { transform: translate3d(28vw, -36px, 0) scale(var(--s, 1)); }
  50%  { transform: translate3d(56vw, 14px, 0) scale(var(--s, 1)); }
  75%  { transform: translate3d(84vw, -24px, 0) scale(var(--s, 1)); }
  100% { transform: translate3d(calc(100vw + 140px), 6px, 0) scale(var(--s, 1)); }
}
@keyframes hw-kanat { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.hw-yarasa:nth-child(2) { --s: .7; } .hw-yarasa:nth-child(4) { --s: .55; } .hw-yarasa:nth-child(6) { --s: .8; }
.hw-ag { position: absolute; bottom: 0; width: 190px; height: 190px; opacity: .32;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0 0L200 0M0 0L196 52M0 0L172 112M0 0L112 172M0 0L52 196M0 0L0 200M44.0 0.0Q39.2 5.1 43.1 11.4Q36.4 16.2 37.8 24.6Q28.1 28.1 24.6 37.8Q16.2 36.4 11.4 43.1Q5.1 39.2 0.0 44.0M84.0 0.0Q74.8 9.8 82.3 21.8Q69.6 31.0 72.2 47.0Q53.7 53.7 47.0 72.2Q31.0 69.6 21.8 82.3Q9.8 74.8 0.0 84.0M124.0 0.0Q110.5 14.5 121.5 32.2Q102.7 45.8 106.6 69.4Q79.2 79.2 69.4 106.6Q45.8 102.7 32.2 121.5Q14.5 110.5 0.0 124.0M168.0 0.0Q149.7 19.7 164.6 43.7Q139.1 62.0 144.5 94.1Q107.4 107.4 94.1 144.5Q62.0 139.1 43.7 164.6Q19.7 149.7 0.0 168.0' fill='none' stroke='rgba(230,220,255,.55)' stroke-width='1.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.hw-ag.sol { left: 0; transform: scaleY(-1); }
.hw-ag.sag { right: 0; transform: scale(-1, -1); }
@media (max-width: 720px) { .hw-ag { display: none; } .hw-yarasa:nth-child(n+4) { display: none; } }

/* Halloween: sag alttaki kampanya dugmesi balkabagi (site.js kampanyaKur, .kmp-hw) */
html.hw .cs .kmp-btn.kmp-hw { background: radial-gradient(circle at 50% 35%, #4A1A7A, #1E0A33 75%); border: 2px solid #FF7A1A; box-shadow: 0 12px 30px -10px rgba(255, 122, 26, .8), 0 0 0 5px rgba(139, 61, 255, .25); }
html.hw .cs .kmp-btn.kmp-hw .kmp-kabak { font-size: 30px; line-height: 1; display: block; }
html.hw .cs .kmp-modal .kmp-ic-hw { font-size: 30px; line-height: 1; }
html.hw .cs .kmp-modal .kmp-ic { color: #FF7A1A; }
html.hw .cs .kmp-modal .kmp-git { display: inline-flex; margin: 4px auto 16px; }

/* ---------- Ürün sayfası sadeleştirme (2026-11-01) ---------- */
.cs .uad-alt { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.cs .panel[hidden] { display: none; }
.cs .ukunye dd.m { font-family: var(--fk); font-size: 13.5px; font-weight: 500; letter-spacing: 0; }
.cs .urun-gunluk-sar { padding-block: 0 56px; }
.cs .urun-gunluk-sar .urun-gunluk { margin-top: 40px; }
@media (max-width: 900px) {
  /* .ugorsel-kol telefonda display:contents: sırası olmayan parça (Changelog) en üste çıkıyordu */
  .cs .ugorsel-kol > .cms, .cs .ugorsel-kol > .cms-devam { order: 5; }
  .cs .ugorsel-kol > .urun-sss { order: 6; }
  .cs .ugorsel-kol > .urun-gunluk { order: 7; }
}

/* 2026-11-02: menüye "Bundles" eklendi (7 bağlantı). 1081-1240px arasında hamburger yok ve DOCS alt satıra düşüyordu:
   o aralıkta bağlantılar biraz daha sıkı, tek satır. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .cs .nav nav { flex-wrap: nowrap; gap: 0; }
  .cs .nav nav > .nav-link, .cs .nav nav > .nav-acilir > .nav-link { padding: 8px 6px; letter-spacing: .03em; }
}

/* 2026-11-02: bundle fiyatı — tek tek toplamı belirgin çizili + "Save $15" hapı */
.cs .fiyat-bundle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cs .fiyat-bundle .was {
  font-size: 17px; font-weight: 600; color: #C9CEDA; opacity: 1;
  text-decoration: line-through; text-decoration-color: #FF2E49; text-decoration-thickness: 2px;
}
.cs .price.big.fiyat-bundle .was { font-size: 22px; }
.cs .bundle-kazanc {
  align-self: center; padding: 3px 9px; border-radius: 999px;
  background: rgba(46, 204, 113, .14); border: 1px solid rgba(46, 204, 113, .45); color: #4BE08A;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.cs .price.big.fiyat-bundle .bundle-kazanc { font-size: 14px; padding: 4px 11px; }

/* 2026-11-03: ANA SAYFA TEPESİ — arka plan videosu + en çok satan ürün sırası.
   Video (index.html .hero-video-kap) panelden gelen görsel slaytlarının yerini alıyor; soldaki karartma
   başlığı okunaklı tutuyor. Ürün sırası yazının altında: masaüstünde 4 kart yan yana, telefonda yana kayar. */
.cs .hero-videolu .hero-harita, .cs .hero-videolu .hero-etiketler { display: none; }
.cs .hero-video-kap { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cs .hero-video-kap video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg); }
.cs .hero-video-kap::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5, 5, 8, .84) 22%, rgba(5, 5, 8, .44) 52%, rgba(5, 5, 8, .2) 100%),
    linear-gradient(180deg, rgba(5, 5, 8, .55) 0%, transparent 18%, transparent 66%, var(--bg) 100%);
}
.cs .hero-v5.hero-videolu .slogan { font-size: clamp(40px, 5.4vw, 72px); }
.cs .hero-v5.hero-videolu .wrap { padding-block: 66px 44px; }
.cs .hero-videolu .kaydir-ipucu { display: none; }
.cs .hero-vitrin {
  margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 880px;
  animation: cs-gir .8s cubic-bezier(.22, .7, .3, 1) .5s both;
}
.cs .hero-vitrin[hidden] { display: none; }
.cs .hv-kart {
  display: flex; flex-direction: column; min-width: 0; border-radius: 14px; overflow: hidden;
  background: rgba(10, 11, 16, .86); border: 1px solid rgba(255, 255, 255, .13); color: var(--ink);
  transition: border-color var(--hiz), transform var(--hiz);
}
.cs .hv-kart:hover { border-color: var(--accent); transform: translateY(-3px); }
.cs .hv-kart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--bg-3); }
.cs .hv-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px 10px 12px; }
.cs .hv-alt b { min-width: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .hv-alt i { flex: none; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 3px 9px; border-radius: 999px; }
@media (max-width: 760px) {
  .cs .hero-video-kap::after { background: linear-gradient(180deg, rgba(5, 5, 8, .8) 0%, rgba(5, 5, 8, .62) 58%, var(--bg) 100%); }
  .cs .hero-v5.hero-videolu .wrap { padding-block: 64px 40px; }
  .cs .hero-vitrin {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px;
  }
  .cs .hero-vitrin::-webkit-scrollbar { display: none; }
  .cs .hv-kart { scroll-snap-align: start; }
}

/* 2026-11-03: ÜRÜN SAYFASI — 360° tur bandı (galerinin hemen altında, turu olan üründe), başlık ve hizalama */
.cs .urun-tur-bant {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 84px; padding: 14px 18px 14px 14px;
  border-radius: 18px; overflow: hidden; isolation: isolate; color: #fff;
  background: var(--bg-3); border: 1px solid rgba(255, 46, 73, .45);
  transition: border-color var(--hiz), transform var(--hiz);
}
.cs .urun-tur-bant:hover { border-color: var(--accent); transform: translateY(-2px); }
.cs .urun-tur-bant .utb-arka {
  position: absolute; inset: 0; z-index: -2; background-size: 200% auto; background-position: 0 55%;
  animation: ozy-tur-kay 40s linear infinite alternate !important; filter: saturate(1.1);
}
.cs .urun-tur-bant::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 5, 8, .86) 0%, rgba(5, 5, 8, .46) 50%, rgba(5, 5, 8, .12) 100%); }
@keyframes ozy-tur-kay { from { background-position: 0 55%; } to { background-position: 100% 55%; } }
.cs .utb-rozet {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-family: var(--fd); font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  box-shadow: 0 0 0 6px rgba(255, 46, 73, .18);
}
.cs .utb-yazi { display: grid; gap: 3px; min-width: 0; }
.cs .utb-yazi b { font-family: var(--fd); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.cs .utb-yazi span { font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.cs .utb-ok {
  margin-left: auto; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(5, 5, 8, .72); border: 1px solid rgba(255, 255, 255, .22); font-size: 18px; transition: transform var(--hiz);
}
.cs .urun-tur-bant:hover .utb-ok { transform: translateX(4px); }
.cs #digerlerBolum .rule-head span {
  font-family: var(--fd); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em;
  text-transform: none; color: var(--ink);
}
@media (max-width: 900px) {
  .cs .uhero .wrap { align-items: stretch; }
  .cs .urun-tur-bant { order: 2; min-height: 72px; padding: 12px 14px 12px 12px; gap: 12px; }
  .cs .utb-rozet { width: 46px; height: 46px; font-size: 14px; }
  .cs .utb-yazi b { font-size: 16px; }
}