/* =====================================================================
   2dot Developments · Tebex teması v2 (Exo şablonu üzerine, lacivert cam)
   Şablonun Assets → generic.css dosyasının yerine yapıştırılır.
   Düzen: bulanık lacivert sahne + cam paneller, iki katlı header
   (logo · Discord · giriş / ortalanmış kategori sekmeleri), vitrin + yan
   kartlar, "Currently viewing" sayfa başlıkları, iki sütunlu ürün sayfası
   ve alttaki cam sepet çubuğu.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap");

:root {
  /* Arka plan sahnesi: kendi görselini Assets'e yükleyip buraya yazabilirsin */
  --dot-scene: url("https://dunb17ur4ymx4.cloudfront.net/wysiwyg/1295647/09cd1aa81726c817303c1139cf26149c91ecbe12.png");

  --dot-bg: #060a14;
  --dot-navy: #0b1326;
  --dot-blue: #3d7bff;
  --dot-blue-2: #8ab8ff;
  --dot-ice: #c9dcff;
  --dot-text: #eef3ff;
  --dot-muted: #9aa8c7;
  --dot-glass: rgb(255 255 255 / 0.045);
  --dot-glass-2: rgb(255 255 255 / 0.08);
  --dot-glass-line: rgb(255 255 255 / 0.10);
  --dot-glass-blur: blur(18px) saturate(140%);
  /* düğmeler: paletin kendi mavisi, dolgun; üstten alta hafif derinlik, beyaz yazı */
  --dot-cta: linear-gradient(180deg, #4a88ff 0%, #2c68ec 100%);
  --dot-cta-hover: linear-gradient(180deg, #5c96ff 0%, #3573f6 100%);
  --dot-cta-glow: rgb(44 104 236 / 0.32);
  --dot-font: "Outfit", "Segoe UI", system-ui, sans-serif;
  --dot-radius: 12px;

  /* Exo değişkenleri */
  --color-text: #eef3ff;
  --color-text-darker: #d4def3;
  --color-text-secondary: #9aa8c7;
  --color-text-dark: #061024;
  --color-bg: #060a14;
  --color-brighter-bg: #0d1528;
  --color-primary: #3d7bff;          /* Tebex ödeme ekranı ana rengi de bu */
  --color-primary-hover: #5c96ff;
  --color-primary-text: #ffffff;
  --color-primary-text-hover: #ffffff;
  --color-secondary: #1a2540;
  --color-secondary-hover: #24314f;
  --color-secondary-text: #eef3ff;
  --color-secondary-text-hover: #ffffff;
  --color-tertiary-hover: rgb(255 255 255 / 10%);
  --color-removed: #ff6b7a;
  --color-sale-banner-bg: #3d7bff;
  --color-sale-banner-text: #ffffff;
  --btn-size: 48px;
  --content-inner-width: 1400px;
  --sidebar-width: 300px;
  --bg-image: none;

  /* Tebex'in zorunlu alt bilgisi: yalnız renkleri değişir, gizlenmez */
  --tebex-legal-footer-background-color: #050811;
  --tebex-legal-footer-border-color: #050811;
  --tebex-legal-footer-text-color: #9aa8c7;
  --tebex-legal-footer-logo-color: #eef3ff;
}

/* ---------- Sahne ---------- */
html body {
  font-family: var(--dot-font);
  background: var(--dot-bg);
  color: var(--dot-text);
}
html body::before {
  content: "";
  position: fixed;
  inset: -60px;
  width: auto;
  height: auto;
  max-height: none;
  z-index: -2;
  opacity: 1;
  pointer-events: none;
  background: var(--dot-scene) center / cover no-repeat;
  filter: blur(28px) saturate(1.35) brightness(0.55);
  mask-image: none;
}
html body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 50% at 50% -8%, rgb(61 123 255 / 0.32), transparent 70%),
    radial-gradient(40% 45% at 100% 25%, rgb(36 86 220 / 0.20), transparent 70%),
    radial-gradient(40% 45% at 0% 60%, rgb(20 60 170 / 0.18), transparent 70%),
    linear-gradient(180deg, rgb(6 10 20 / 0.30) 0%, rgb(6 10 20 / 0.80) 55%, #060a14 100%);
}
::selection { color: #061024; background-color: var(--dot-blue-2); }

/* ---------- Parçacıklar: iki katman, çok yavaş yukarı süzülür (yalnız CSS, transform animasyonu) ----------
   Katman sırası: sahne (body::before, -3) · renk perdesi (body::after, -2) · uzak noktalar (html::before, -1) · yakın noktalar (html::after, -1) */
html body::before { z-index: -3; }
html body::after { z-index: -2; }
html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0 0 -600px 0;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}
/* uzak: küçük, soluk, 300 px'lik döşeme, 600 px'i 150 sn'de kat eder */
html::before {
  background-image:
    radial-gradient(circle at 37px 52px, rgb(190 215 255 / 0.85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 141px 18px, rgb(150 240 210 / 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 228px 96px, rgb(190 215 255 / 0.6) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 82px 171px, rgb(190 215 255 / 0.75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 263px 214px, rgb(150 240 210 / 0.6) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 176px 257px, rgb(190 215 255 / 0.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 12px 278px, rgb(190 215 255 / 0.55) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 119px 128px, rgb(150 240 210 / 0.5) 0 0.7px, transparent 1.3px);
  background-size: 300px 300px;
  opacity: 0.55;
  animation: dot-drift 150s linear infinite, dot-twinkle 7s ease-in-out infinite alternate;
}
/* yakın: biraz büyük, hafif ışıltılı, 600 px'lik döşeme, 600 px'i 110 sn'de kat eder */
html::after {
  background-image:
    radial-gradient(circle at 96px 140px, rgb(200 222 255 / 0.9) 0 1.4px, rgb(120 170 255 / 0.25) 2.2px, transparent 4.5px),
    radial-gradient(circle at 412px 62px, rgb(170 245 220 / 0.85) 0 1.3px, rgb(80 220 180 / 0.22) 2.2px, transparent 4.5px),
    radial-gradient(circle at 520px 388px, rgb(200 222 255 / 0.8) 0 1.4px, rgb(120 170 255 / 0.22) 2.2px, transparent 4.5px),
    radial-gradient(circle at 248px 470px, rgb(200 222 255 / 0.85) 0 1.2px, rgb(120 170 255 / 0.2) 2px, transparent 4px),
    radial-gradient(circle at 340px 252px, rgb(170 245 220 / 0.75) 0 1.2px, rgb(80 220 180 / 0.2) 2px, transparent 4px),
    radial-gradient(circle at 44px 548px, rgb(200 222 255 / 0.7) 0 1.1px, transparent 3.5px);
  background-size: 600px 600px;
  opacity: 0.5;
  animation: dot-drift 110s linear infinite;
}
/* Firefox (Zen) yalnız-kaydırma dönüşümlerini tam piksele yuvarlıyor: yavaş hızda noktalar "tık tık" zıplıyordu.
   Görünmeyecek kadar küçük döndürme eklenince piksel altı (akıcı) çizer. */
@keyframes dot-drift {
  from { transform: translate3d(0, 0, 0) rotate(0.001deg); }
  to { transform: translate3d(0, -600px, 0) rotate(0.001deg); }
}
@keyframes dot-twinkle { from { opacity: 0.35; } to { opacity: 0.65; } }
@media (prefers-reduced-motion: reduce) {
  html::before, html::after { animation: none; }
}

/* Cam yüzey: her panel bunu kullanır */
.store-text, .category-description, .no-products, .store-category-tiered,
.widget, .popup-content, .basket-item, .toast,
.dot-glass, .dot-card, .dot-panel, .dot-cat, .dot-promo,
.site .store-products-images .store-product:not(.store-product-full),
.site .store-products-list .store-product,
.site-content .store-product-full > .descr {
  border: 1px solid var(--dot-glass-line);
  border-radius: var(--dot-radius);
  background: var(--dot-glass);
  -webkit-backdrop-filter: var(--dot-glass-blur);
  backdrop-filter: var(--dot-glass-blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 18px 48px rgb(0 0 0 / 0.28);
}

/* ---------- Yazı ---------- */
.text-content { line-height: 1.6; }
.text-content h1, .text-content h2, .text-content h3, .text-content h4,
.store-product .product-title, .widget-title {
  font-family: var(--dot-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.08;
}
/* düğme olan linkler hariç: giriş penceresi .text-content içinde, "Log in via FiveM" düğmesinin yazısı maviye boyanıp kayboluyordu */
.text-content a:not([class*="btn-"]) { color: var(--dot-blue-2); }
.text-content ul li::marker, .text-content ol li::marker { color: var(--dot-blue-2); }

/* ---------- Düğmeler ---------- */
.btn-primary, .btn-secondary, .btn-tertiary {
  border-radius: 10px;
  font-family: var(--dot-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
/* Birincil düğme (seçenek F): mat koyu mavi, ince açık mavi kenar; göze batmaz, ciddi ve düzenli.
   Kenar 1 px olduğu için satır yüksekliği 2 px düşük tutulur (yazı dikeyde ortada kalsın). */
.btn-primary {
  color: #e3ecff;
  border: 1px solid rgb(140 180 255 / 0.25);
  background: #1c2f55;
  line-height: calc(var(--btn-size) - 2px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}
.btn-primary:hover, .btn-primary:focus {
  color: #ffffff;
  background: #24407a;
  border-color: rgb(160 195 255 / 0.45);
}
.btn-primary:active { transform: translateY(1px); background: #1a2b4f; }
.btn-secondary {
  background-color: var(--dot-glass-2);
  box-shadow: inset 0 0 0 1px var(--dot-glass-line);
}
.btn-secondary:hover, .btn-secondary:focus { background-color: rgb(255 255 255 / 0.14); }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-tertiary:focus-visible, a:focus-visible {
  outline: 2px solid var(--dot-blue-2);
  outline-offset: 2px;
}
.quantity-field {
  border-radius: 10px;
  border-color: var(--dot-glass-line);
  background: var(--dot-glass-2);
  overflow: hidden;
}

/* ---------- Header (masaüstü): 1. kat logo · Discord · giriş, 2. kat kategori sekmeleri ---------- */
@media (width > 960px) {
  .site .site-header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "discord title user"
      "nav nav nav";
    align-items: center;
    column-gap: 24px;
  }
  /* sekmelerin üst ve alt çizgisi ekran boyunca */
  .site .site-header::before,
  .site .site-header::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 100vw;
    height: 1px;
    translate: -50% 0;
    background: rgb(255 255 255 / 0.09);
    pointer-events: none;
  }
  .site .site-header::before { top: 128px; }
  .site .site-header::after { bottom: 0; }

  .site .site-header-inner { display: contents; }
  .site .site-header-inner .actions,
  .site .site-header-inner .info.server { display: none; }

  .site .site-header-inner .site-title {
    grid-area: title;
    justify-self: center;
    position: static;
    inset: auto;
    margin: 0;
    width: auto;
    height: 128px;
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: left;
  }
  .site .site-header-inner .site-title img {
    margin: 0 auto;
    max-height: 86px;
    width: auto;
  }

  /* üst satırdaki Discord: CodeM'in üst menüsü gibi satır yüksekliğinde blok, hover'da cam zemin */
  .site .site-header-inner .info.discord {
    grid-area: discord;
    justify-self: start;
    align-self: stretch;
    position: relative;
    inset: auto; /* Exo'nun top: 70px'i relative konumda kutuyu aşağı kaydırıyordu */
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0 30px;
    width: auto;
    max-width: none;
    height: auto;
    color: var(--dot-muted);
    text-align: left;
    transition: color 0.15s ease, background-color 0.2s ease;
  }
  .site .site-header-inner .info.discord:hover {
    color: var(--dot-text);
    background-color: rgb(255 255 255 / 0.05);
  }
  .site .site-header-inner .info.discord .image {
    position: static;
    margin: 0;
    width: 20px;
    height: 20px;
    opacity: 0.8;
  }
  .site .site-header-inner .info.discord .title {
    color: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-transform: none;
  }
  .site .site-header-inner .info.discord .action { display: none; }

  .site .site-header-inner .log-in,
  .site .site-header-inner .user-actions {
    grid-area: user;
    justify-self: end;
    position: static;
  }
  .site .site-header-inner .log-in,
  .site .site-header-inner .user-actions .btn-tertiary {
    padding: 0 22px;
    border: 1px solid var(--dot-glass-line);
    background-color: rgb(255 255 255 / 0.12);
    font-weight: 600;
  }
  .site .site-header-inner .log-in:hover { background-color: rgb(255 255 255 / 0.2); }

  .site .site-header .site-navigation { grid-area: nav; min-width: 0; }
  .site .navigation-horizontal .menu {
    justify-content: center;
    gap: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-transform: none;
  }
  .site .navigation-horizontal .menu > li > a {
    position: relative;
    isolation: isolate;
    max-width: none;
    padding: 26px 30px;
    color: var(--dot-muted);
  }
  /* üzerine gelince sekmenin tamamı (üst çizgiden alt çizgiye, köşesiz) cam blok olur */
  .site .navigation-horizontal .menu > li > a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.035));
    -webkit-backdrop-filter: var(--dot-glass-blur);
    backdrop-filter: var(--dot-glass-blur);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .site .navigation-horizontal .menu > li > a:hover::before,
  .site .navigation-horizontal .menu > li > a:focus-visible::before { opacity: 1; }
  .site .navigation-horizontal .menu > li > a.link-active::before { opacity: 0.7; }
  .site .navigation-horizontal .menu > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 56px;
    height: 2px;
    border-radius: 2px;
    translate: -50% 0;
    background: var(--dot-blue-2);
    box-shadow: 0 0 12px rgb(138 184 255 / 0.8);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }
  .site .navigation-horizontal .menu > li > a:hover { color: var(--dot-text); }
  .site .navigation-horizontal .menu > li > a.link-active { color: var(--dot-blue-2); font-weight: 700; }
  .site .navigation-horizontal .menu > li > a.link-active::after { transform: scaleX(1); }
  .site .navigation-horizontal .has-children > ul {
    top: 100%;
    border-radius: 10px;
    border: 1px solid var(--dot-glass-line);
    background: rgb(11 19 38 / 0.85);
  }
}

/* ---------- Header (mobil) ---------- */
@media (width <= 960px) {
  .site .site-header-inner {
    padding: 72px 0 12px;
    border-bottom: 1px solid rgb(255 255 255 / 0.09);
  }
  .site .site-header-inner .site-title { line-height: 52px; font-size: 34px; font-weight: 800; }
  .site .site-header-inner .site-title img { max-height: 60px; }
  .site .site-header-inner .info.server { display: none; }
  .site .site-header-inner .info.discord { width: 100%; padding: 0; text-align: center; }
  .site .site-header-inner .info.discord .image { display: none; }
  .site .site-navigation .menu {
    background: rgb(8 13 26 / 0.92);
    -webkit-backdrop-filter: var(--dot-glass-blur);
    backdrop-filter: var(--dot-glass-blur);
  }
  .site .site-navigation a.active, .site .site-navigation a.link-active { color: var(--dot-blue-2); }
}

/* ---------- İndirim bandı ---------- */
.site-sale-banner { border-radius: var(--dot-radius); font-weight: 700; }

/* ---------- Paneller ---------- */
.store-text, .category-description, .no-products, .store-category-tiered { color: var(--dot-muted); }
.store-text { padding: 28px; }
.store-text h1, .store-text h2, .store-text h3, .store-text h4,
.category-description h1, .category-description h2, .category-description h3 { color: var(--dot-text); }

/* ---------- Ürün kartları ---------- */
.site .store-products-images {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}
.site .store-products-images .store-product:not(.store-product-full),
.site .store-products-list .store-product {
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.site .store-products-images .store-product:not(.store-product-full) {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
}
/* kartın üstünde mavi ışık çizgisi */
.site .store-products-images .store-product:not(.store-product-full)::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  z-index: 2;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--dot-blue-2), transparent);
  box-shadow: 0 0 18px 2px rgb(110 165 255 / 0.55);
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.site .store-products-images .store-product:not(.store-product-full):hover::before { opacity: 1; }
.site .store-products-images .store-product:not(.store-product-full):hover,
.site .store-products-list .store-product:hover {
  border-color: rgb(138 184 255 / 0.4);
  background-color: rgb(255 255 255 / 0.07);
  transform: translateY(-3px);
}
.site .store-products-images .store-product .image-link {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: #04070f;
}
.site .store-products-images .store-product .image-link .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.4s ease;
}
.site .store-products-images .store-product:hover .image-link .image { scale: 1.04; }
.site .store-products-images .store-product .image-default { width: 100%; height: 100%; aspect-ratio: auto; }
.site .store-products-images .store-product .product-title {
  padding: 16px 18px 6px;
  font-size: 19px;
}
.site .store-products-images .store-product .actions {
  flex: 1 1 auto;
  align-content: flex-end;
  padding: 0 18px 18px;
}
.store-product .price { color: var(--dot-muted); }
.store-product .price strong { font-size: 24px; font-weight: 800; color: var(--dot-text); }
.store-product .price .discount { color: var(--color-removed); }

/* ---------- "Currently viewing" sayfa başlığı (kategori) ---------- */
.dot-page-head {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-block: 28px 8px;
  text-align: center;
}
.dot-kicker {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dot-muted);
}
.dot-page-title {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- Kategori sayfası (category.html): ortalı başlık + tanıtım, araç satırı (sayı · arama · filtre) ---------- */
.dot-cat-hero {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding-block: 40px 6px;
  text-align: center;
}
.dot-cat-hero h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}
.dot-cat-intro { max-width: 78ch; font-size: 16.5px; line-height: 1.6; color: #c3cde2; }
.dot-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 20px;
}
.dot-count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dot-text);
}
.dot-count span {
  min-width: 30px;
  padding: 3px 9px;
  border: 1px solid var(--dot-glass-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--dot-muted);
  font-variant-numeric: tabular-nums;
}
.dot-tools { display: flex; gap: 10px; }
.dot-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 64vw);
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--dot-glass-line);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: var(--dot-glass-blur);
  backdrop-filter: var(--dot-glass-blur);
  color: var(--dot-muted);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dot-search:focus-within { border-color: rgb(138 184 255 / 0.55); box-shadow: 0 0 0 3px rgb(61 123 255 / 0.18); }
.dot-search svg { width: 18px; height: 18px; flex: none; }
.dot-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  font-size: 15px;
  color: var(--dot-text);
  background: transparent;
}
.dot-search input::placeholder { color: var(--dot-muted); }
.dot-search input::-webkit-search-cancel-button { filter: invert(0.7); }
.dot-filter { position: relative; }
.dot-filter-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--dot-glass-line);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  color: var(--dot-muted);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.dot-filter-btn:hover, .dot-filter-btn[aria-expanded="true"] { color: var(--dot-text); background-color: rgb(255 255 255 / 0.1); }
.dot-filter-btn.is-active { color: var(--dot-blue-2); border-color: rgb(138 184 255 / 0.5); }
.dot-filter-btn svg { width: 18px; height: 18px; }
.dot-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--dot-glass-line);
  border-radius: 12px;
  background: rgb(12 19 36 / 0.95);
  -webkit-backdrop-filter: var(--dot-glass-blur);
  backdrop-filter: var(--dot-glass-blur);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.45);
}
.dot-filter-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--dot-text);
  text-align: left;
}
.dot-filter-menu button:hover { background: rgb(255 255 255 / 0.07); }
.dot-filter-menu button[aria-checked="true"] { color: var(--dot-blue-2); font-weight: 600; }
.dot-filter-menu button[aria-checked="true"]::after { content: "✓"; }
/* arama/filtre dışında kalan kartlar gizlenir (kart kuralının display:flex'ini yener) */
.site .store-products .store-product[hidden] { display: none !important; }
@media (width <= 600px) {
  .dot-toolbar { flex-direction: column; align-items: stretch; }
  .dot-tools { width: 100%; }
  .dot-search { flex: 1 1 auto; width: auto; }
}

/* ---------- Ürün sayfası (package.html): üstte yol, solda medya, sağda kategori + başlık + satın alma kutusu + açıklama ---------- */
.dot-pkg-page { display: grid; gap: 22px; }
.dot-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--dot-muted);
}
.dot-crumbs a { color: var(--dot-muted); transition: color 0.15s ease; }
.dot-crumbs a:hover { color: var(--dot-text); }
.dot-crumbs [aria-current] { color: var(--dot-text); font-weight: 500; }

/* iki sütun: sayfada ve (açılırsa) pencerede aynı düzen */
.site-content .dot-pkg,
.popup .store-product-popup-content:has(> .dot-pkg-info) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 44px;
}
.site-content .dot-pkg { padding: 0; border: 0; background: none; box-shadow: none; }
.popup .store-product-popup-content:has(> .dot-pkg-info) { max-width: 1240px; padding: 40px 36px 36px; }

/* sol: medya ekranda sabit kalır, açıklama sağda akar */
.dot-pkg-media { position: sticky; top: 24px; min-width: 0; }
.dot-pkg-media > .image,
.dot-pkg-media > .image-default,
.dot-pkg-media .media-slider .slider {
  width: 100%;
  border: 1px solid var(--dot-glass-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.4);
}

/* galerinin altında uyumluluk kutusu: QBCore · ESX · Standalone */
.dot-compat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--dot-glass-line);
  border-radius: 14px;
  background: var(--dot-glass);
  -webkit-backdrop-filter: var(--dot-glass-blur);
  backdrop-filter: var(--dot-glass-blur);
}
.dot-compat-title { font-size: 14px; font-weight: 600; color: var(--dot-muted); }
.dot-compat-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* etiketler: A (cam) stilinin daha şeffaf, gri hali */
.dot-compat-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.04);
  -webkit-backdrop-filter: var(--dot-glass-blur);
  backdrop-filter: var(--dot-glass-blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
  font-size: 14.5px;
  font-weight: 600;
  color: #dfe5f0;
}
/* tik işareti (maske ile) */
.dot-compat-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: rgb(255 255 255 / 0.6);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dot-compat-note { grid-column: 1 / -1; font-size: 13.5px; color: var(--dot-muted); }

/* sağ: kategori, başlık, satın alma kutusu, güven satırı, açıklama */
.dot-pkg-info { display: grid; gap: 20px; align-content: start; min-width: 0; }
.dot-pkg-cat {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dot-blue-2);
}
.dot-pkg-info .product-title {
  margin-top: -10px;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: none;
  text-wrap: balance;
}
.dot-buybox {
  --btn-size: 54px;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--dot-glass-line);
  border-radius: 16px;
  background: var(--dot-glass);
  -webkit-backdrop-filter: var(--dot-glass-blur);
  backdrop-filter: var(--dot-glass-blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 18px 48px rgb(0 0 0 / 0.28);
}
/* Exo bu kutuyu sayfanın altına yapışan çubuk yapıyordu: kutunun içinde normal akışa al */
.dot-buybox .actions {
  position: static !important;
  order: 0; /* Exo "order: 1" veriyor: fiyat ve düğmeler notun altına kayıyordu */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.dot-buybox .actions > * { grid-column: 1; }
.dot-buybox .actions > .gift { grid-column: 2; grid-row: 2; }
.dot-buybox .price { grid-column: 1 / -1; margin: 0; }
.dot-buybox .price strong { font-size: 38px; font-weight: 800; color: var(--dot-text); font-variant-numeric: tabular-nums; }
.dot-buybox .add, .dot-buybox .subscribe, .dot-buybox .open-basket-cta { width: 100%; font-size: 17px; }
.dot-buy-note { font-size: 14px; color: var(--dot-muted); }
.dot-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--dot-muted);
}
.dot-trust li { display: flex; align-items: center; gap: 8px; }
.dot-trust svg { width: 18px; height: 18px; flex: none; color: var(--dot-blue-2); }
.dot-pkg-info .descr { padding-top: 22px; border-top: 1px solid var(--dot-glass-line); }

@media (width <= 960px) {
  .site-content .dot-pkg,
  .popup .store-product-popup-content:has(> .dot-pkg-info) { grid-template-columns: 1fr; gap: 24px; }
  .dot-pkg-media { position: static; }
}

/* açıklama metni */
.store-product .descr { font-size: 15.5px; line-height: 1.7; color: var(--dot-muted); }
.store-product .descr strong { color: var(--dot-text); font-weight: 600; }
/* açıklamalardaki ve ana sayfa metnindeki <p><strong>BAŞLIK</strong></p> satırları bölüm başlığı olur */
.store-text p > strong:only-child,
.store-product .descr p > strong:only-child {
  display: block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dot-blue-2);
  text-transform: uppercase;
}
.store-text p:first-child > strong:only-child,
.store-product .descr p:first-child > strong:only-child {
  margin-top: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--dot-text);
  text-transform: none;
}
/* Tebex editörü ortalama stilini silebiliyor: açıklama görselleri her durumda ortalı blok */
.store-product .descr img {
  display: block;
  margin: 14px auto;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ---------- Sidebar widget'ları ---------- */
.widget { overflow: hidden; }
.widget-title {
  padding: 14px 18px;
  border-bottom: 1px solid var(--dot-glass-line);
  background: rgb(255 255 255 / 0.04);
  font-size: 15px;
  letter-spacing: 0.08em;
}
.widget-content { color: var(--dot-muted); }

/* ---------- Açılır pencereler (giriş, ürün, seçenek, hediye) ---------- */
/* perde: sayfa koyu laciverte döner ve bulanıklaşır */
.popup {
  background-color: rgb(4 7 15 / 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.popup.may-close { background-color: rgb(4 7 15 / 0.35); }
/* pencere: koyu cam, üstte mavi ışık çizgisi ve parıltı */
.popup-content {
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent 15%, rgb(138 184 255 / 0.9) 50%, transparent 85%) top / 100% 1px no-repeat,
    radial-gradient(120% 70% at 50% -20%, rgb(61 123 255 / 0.24), transparent 60%),
    linear-gradient(180deg, rgb(16 24 44 / 0.94), rgb(8 13 26 / 0.96));
  -webkit-backdrop-filter: var(--dot-glass-blur);
  backdrop-filter: var(--dot-glass-blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 30px 80px rgb(0 0 0 / 0.55);
}
/* kapat: yuvarlak cam düğme */
.popup-close {
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--dot-glass-line);
  border-radius: 50%;
  background-color: rgb(255 255 255 / 0.06);
  opacity: 0.85;
}
.popup-close::before { mask-size: 15px; }
.popup-close:hover { opacity: 1; background-color: rgb(255 255 255 / 0.14); }
.popup .store-form input[type=text], .popup .store-form input[type=email],
.popup .store-form input[type=number], .popup .store-form select, .popup .store-form textarea {
  border: 1px solid var(--dot-glass-line);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  color: var(--dot-text);
}
.popup .store-form input:focus, .popup .store-form select:focus, .popup .store-form textarea:focus {
  border-color: rgb(138 184 255 / 0.6);
  box-shadow: 0 0 0 3px rgb(61 123 255 / 0.2);
}
.popup .store-form h1, .popup .store-form h2, .popup .store-form h3 {
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.popup .store-form .btn-primary { height: 52px; line-height: 50px; padding: 0 28px; font-size: 17px; }

/* giriş penceresi: ortalı, açıklamalı, tam genişlik düğme */
.login-popup-content {
  max-width: 460px;
  padding: 44px 36px 36px;
  text-align: center;
}
.login-popup-content :is(h1, h2, h3) { margin-bottom: 8px; }
.login-popup-content :is(h1, h2, h3)::after {
  content: "Use your Cfx.re (FiveM) account. Your purchases are linked to it.";
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dot-muted);
}
.login-popup-content .actions { justify-content: center; }
.login-popup-content .btn-primary { width: 100%; margin-top: 10px; }

/* ---------- Sepet çekmecesi ---------- */
.basket-popup-content {
  border-width: 0 0 0 1px;
  border-radius: 0;
  background:
    radial-gradient(90% 40% at 50% 0%, rgb(61 123 255 / 0.18), transparent 70%),
    linear-gradient(180deg, rgb(12 19 36 / 0.97), rgb(6 10 20 / 0.98));
}
.basket .basket-header {
  padding-top: 56px;
  border-bottom: 1px solid var(--dot-glass-line);
  background: transparent;
}
.basket .basket-title { font-weight: 800; letter-spacing: 0.02em; }
.basket .basket-title::before { background-color: var(--dot-blue-2); }
.basket .basket-second-header {
  border-bottom: 1px solid var(--dot-glass-line);
  background: rgb(255 255 255 / 0.03);
  color: var(--dot-muted);
}
.basket .basket-item {
  border: 1px solid var(--dot-glass-line);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.045);
}
.basket .basket-item .title { font-weight: 700; }
.basket .basket-item .price { color: var(--dot-blue-2); }
.basket .basket-checkout {
  padding-top: 24px;
  border-top: 1px solid var(--dot-glass-line);
  background: rgb(255 255 255 / 0.02);
}
.basket .basket-checkout .total { color: var(--dot-text); }
.basket .basket-checkout .checkout { height: 56px; line-height: 54px; font-size: 17px; }

/* ---------- Bildirimler ---------- */
.toast {
  border-radius: 12px;
  background: rgb(14 21 40 / 0.95);
}

/* ---------- Sayfa iskeleti: esnek sütun, footer her zaman en altta ----------
   Exo ızgarası kısa sayfada boşluğu footer'ın ALTINDA bırakıyordu; şimdi boşluk içerikle footer arasında kalır. */
.site {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Exo'nun "start"ı footer'ı içerik genişliğine büzüp sola yaslıyordu */
}
.site > .site-footer { width: 100%; margin-top: auto; }

/* ---------- Footer (footer.twig): marka + Discord · Store · Legal · We accept ---------- */
.site-footer {
  border-top: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(5 8 17 / 0.72);
  -webkit-backdrop-filter: var(--dot-glass-blur);
  backdrop-filter: var(--dot-glass-blur);
}
.site .site-footer-inner.dot-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 32px 40px;
  padding-block: 48px 36px;
}
@media (width <= 900px) { .site .site-footer-inner.dot-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width <= 520px) { .site .site-footer-inner.dot-footer { grid-template-columns: 1fr; } }
.dot-footer-brand { display: grid; gap: 14px; align-content: start; }
.dot-footer-logo { justify-self: start; font-size: 26px; font-weight: 800; text-transform: uppercase; }
.dot-footer-logo img { max-height: 44px; width: auto; }
.dot-footer-brand p { max-width: 36ch; font-size: 14.5px; line-height: 1.6; color: var(--dot-muted); }
.dot-footer-discord {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: linear-gradient(110deg, #4c66ff, #7d9bff);
  box-shadow: 0 10px 28px rgb(76 102 255 / 0.3);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: filter 0.2s ease;
}
.dot-footer-discord:hover { filter: brightness(1.1); }
.dot-footer-discord svg { width: 20px; height: 20px; flex: none; }
.dot-footer-col { display: grid; gap: 10px; align-content: start; }
.dot-footer-col h4 {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dot-text);
}
.dot-footer-col a { width: fit-content; font-size: 14.5px; color: var(--dot-muted); transition: color 0.15s ease; }
.dot-footer-col a:hover { color: var(--dot-blue-2); }
.site .dot-footer .we-accept {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  pointer-events: auto;
}
.site .dot-footer .we-accept img { max-width: 60px; max-height: 26px; }
.dot-footer-bottom {
  border-top: 1px solid rgb(255 255 255 / 0.06);
  padding: 16px var(--content-padding);
  text-align: center;
}
.dot-footer-bottom .copyright { margin: 0 auto; font-size: 13px; line-height: 1.5; color: var(--dot-muted); }

/* =====================================================================
   Ana sayfa (index.html) bölümleri
   ===================================================================== */
.dot-wrap {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--content-padding);
}
@media (width > 960px) { .dot-wrap { max-width: var(--content-width); } }

/* --- Vitrin satırı: solda slayt, sağda iki kart --- */
.dot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 24px;
}
@media (width <= 1100px) { .dot-top { grid-template-columns: 1fr; } }

.dot-slider {
  --swiper-navigation-color: #eef3ff;
  --swiper-navigation-size: 18px;
  --swiper-navigation-sides-offset: 22px;
  --swiper-pagination-color: #eef3ff;
  --swiper-pagination-bullet-inactive-color: #eef3ff;
  --swiper-pagination-bullet-inactive-opacity: 0.4;
  --swiper-pagination-bullet-size: 6px;
  --swiper-pagination-bullet-horizontal-gap: 5px;
  --swiper-pagination-bottom: 18px;
  display: block;
  height: 100%;
  border: 1px solid var(--dot-glass-line);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(8 13 26 / 0.6);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}
.dot-slider::part(bullet-active) { width: 22px; border-radius: 3px; }
.dot-slider:not(:defined) swiper-slide:not(:first-child) { display: none; }
.dot-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 380px;
  height: 100%;
  isolation: isolate;
}
.dot-slide-media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 64%;
}
/* Ürün görsellerinde yazı var: sol yarısı metnin arkasında kaybolsun diye güçlü maske + karartma */
.dot-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.35) 35%, #000 75%);
}
.dot-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(8 13 26 / 0.97) 0%, rgb(8 13 26 / 0.88) 38%, rgb(8 13 26 / 0.25) 70%, rgb(8 13 26 / 0) 90%);
}
.dot-slide-text {
  display: grid;
  gap: 16px;
  max-width: 520px;
  padding: 44px 40px 64px 72px;
}
.dot-slide-title {
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}
.dot-slide-copy { font-size: 16px; font-weight: 500; line-height: 1.55; color: #d3dcef; }
.dot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dot-chip {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--dot-glass-line);
  background: var(--dot-glass-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dot-ice);
}
.dot-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 10px; }
.dot-ctas .btn-primary { height: 56px; line-height: 54px; padding: 0 44px; }
.dot-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--dot-text);
  transition: color 0.15s ease;
}
.dot-link:hover { color: var(--dot-blue-2); }
@media (width <= 820px) {
  .dot-slide { flex-direction: column; align-items: stretch; min-height: 0; }
  .dot-slide-media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; }
  .dot-slide-media img { mask-image: linear-gradient(#000 60%, transparent); }
  .dot-slide::before { display: none; }
  .dot-slide-text { padding: 4px 22px 56px; }
  .dot-slider::part(button-prev), .dot-slider::part(button-next) { display: none; }
}

/* --- Sağ kartlar --- */
.dot-side { display: grid; grid-template-rows: 1fr auto; gap: 24px; }
.dot-promo {
  position: relative;
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 220px;
  padding: 28px 32px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(120deg, rgb(255 255 255 / 0.10), rgb(255 255 255 / 0.03));
}
.dot-promo img {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.5) 45%, #000 85%);
  opacity: 0.7;
}
.dot-promo h3 {
  max-width: 60%;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.dot-promo p { max-width: 58%; font-size: 15px; color: #d3dcef; }
.dot-badge {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #3d7bff;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.dot-promo .btn-secondary { justify-self: start; height: 44px; line-height: 44px; padding: 0 16px; }
.dot-discord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 116px;
  padding: 20px;
  border-radius: var(--dot-radius);
  background: linear-gradient(110deg, #4c66ff 0%, #6f8dff 55%, #8fb0ff 100%);
  box-shadow: 0 18px 44px rgb(76 102 255 / 0.35);
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.dot-discord:hover { filter: brightness(1.08); transform: translateY(-2px); }
.dot-discord svg { width: 34px; height: 34px; flex: none; }

/* --- Bölüm başlıkları --- */
.dot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 22px;
}
.dot-head .dot-kicker { display: block; }
.dot-head h2 {
  margin-top: 6px;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.dot-more { font-size: 15px; font-weight: 600; color: var(--dot-muted); transition: color 0.15s ease; }
.dot-more:hover { color: var(--dot-blue-2); }

/* --- Popüler scriptler --- */
/* 9 script: masaüstünde 3×3, tablette 2, telefonda 1 sütun */
.dot-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (width <= 1100px) { .dot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width <= 640px) { .dot-cards { grid-template-columns: 1fr; } }
.dot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.dot-card::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  z-index: 2;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--dot-blue-2), transparent);
  box-shadow: 0 0 18px 2px rgb(110 165 255 / 0.55);
  opacity: 0.75;
}
.dot-card:hover { border-color: rgb(138 184 255 / 0.4); background-color: rgb(255 255 255 / 0.07); transform: translateY(-3px); }
.dot-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: #04070f; }
.dot-card-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.4s ease; }
.dot-card:hover .dot-card-img img { scale: 1.04; }
.dot-card-body { display: grid; gap: 10px; flex: 1 1 auto; align-content: start; padding: 18px; }
.dot-card-body h3 { font-size: 20px; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.dot-card-body p { font-size: 14.5px; color: var(--dot-muted); }
.dot-card-body .btn-primary { width: 100%; margin-top: 4px; }

/* --- Bilgi kartları --- */
.dot-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.dot-panel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 14px;
  align-content: start;
  padding: 20px;
}
.dot-panel svg {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
  background: rgb(61 123 255 / 0.18);
  color: var(--dot-blue-2);
}
.dot-panel h3 { font-size: 17px; font-weight: 700; text-transform: uppercase; }
.dot-panel p { font-size: 14px; line-height: 1.5; color: var(--dot-muted); }

/* --- Kategoriler --- */
.dot-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
.dot-cat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 16px 20px;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.dot-cat:hover { border-color: rgb(138 184 255 / 0.4); background-color: rgb(255 255 255 / 0.07); transform: translateY(-2px); }
.dot-cat-img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: none; }
.dot-cat-name { flex: 1 1 auto; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.dot-cat-go { color: var(--dot-blue-2); font-size: 20px; transition: translate 0.2s ease; }
.dot-cat:hover .dot-cat-go { translate: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  .site .store-products-images .store-product, .dot-card, .dot-cat, .dot-cat-go, .dot-discord,
  .site .store-products-images .store-product .image-link .image, .dot-card-img img { transition: none; }
}