/* ============================================================
   MAXLED B2B — Ana Tema
   Renkler (mevcut maxled.com.tr kimliğinden):
     bg-dark:   #0D0D0D   bg-soft: #141414 / #1F1F1F
     text:      #eef1f5   muted:  #8C8C8C
     accent-1:  #005bea → #00c6fb (mavi gradyan)
     danger:    #EA2349 (vurgu)

   Koyu/açık tema: <html data-bs-theme="dark|light">.
   Varsayılan sistem tercihi (prefers-color-scheme); kullanıcı seçimi
   localStorage['maxled-tema'] ile kalıcıdır (partials/tema-script + assets/js/theme.js).
   ============================================================ */

:root {
  --bg-0: #0D0D0D;
  --bg-1: #141414;
  --bg-2: #1F1F1F;
  --bg-3: #2A2A2A;
  --tx-0: #eef1f5;
  --tx-1: #e6e9f0;
  --tx-muted: #9aa5b0;
  --ac-1: #005bea;
  --ac-2: #00c6fb;
  --danger: #EA2349;
  --grad: linear-gradient(135deg, #005bea 0%, #00c6fb 100%);
  --glow: none;
  --line: rgba(255,255,255,.06);        /* ince kenarlık/ayraç */
  --line-strong: rgba(255,255,255,.09); /* vurgulu kenarlık (modal, dropdown) */
  --nav-bg: rgba(13,13,13,.85);         /* yapışkan navbar zemini */
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg-0);
  color: var(--tx-0);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* ---------- Sayfa geçiş overlay ---------- */
#page-transition {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  transition: clip-path .8s cubic-bezier(.77, 0, .18, 1);
  clip-path: circle(150% at 50% 50%);
}
#page-transition.done { clip-path: circle(0% at 50% 50%); pointer-events: none; }
#page-transition .pt-bar {
  width: 220px; height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden;
}
#page-transition .pt-fill {
  height: 100%; width: 0%; background: var(--grad); border-radius: 2px;
  animation: ptfill .9s ease forwards;
}
@keyframes ptfill { to { width: 100%; } }

/* ---------- LED hero ışık efekti ---------- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 91, 234, .25), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0, 198, 251, .12), transparent),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, var(--bg-0));
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: -20%;
  background: conic-gradient(from 0deg at 50% -30%,
    transparent 0deg, rgba(0,198,251,.06) 30deg, transparent 60deg,
    transparent 180deg, rgba(0,91,234,.08) 210deg, transparent 240deg);
  animation: herosweep 14s linear infinite;
}
@keyframes herosweep { to { transform: rotate(360deg); } }
.hero .beam {
  position: absolute; top: -10%; left: 50%; width: 140vw; height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(0,198,251,.16), transparent 70%);
  animation: beamPulse 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes beamPulse { from { opacity: .5; transform: translateX(-50%) scaleY(.9);} to { opacity: 1; transform: translateX(-50%) scaleY(1.15);} }

.hero-title {
  font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 32px rgba(0,198,251,.25));
}
.hero-sub { color: var(--tx-muted); max-width: 640px; }

/* Başlık harf reveal */
.reveal-chars span { display: inline-block; opacity: 0; transform: translateY(40px) rotate(6deg); }
.reveal-chars.play span { animation: charIn .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes charIn { to { opacity: 1; transform: none; } }

/* ---------- Butonlar ---------- */
.btn-glow {
  background: var(--ac-1); border: none; color: #fff; font-weight: 600;
  box-shadow: none; transition: transform .2s, background-color .2s;
}
.btn-glow:hover { color:#fff; transform: translateY(-1px); background: #0077e6; }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--tx-0); background: transparent; transition: border-color .2s, color .2s; }
.btn-ghost:hover { border-color: var(--tx-0); color: var(--tx-0); }

/* ---------- Kartlar ---------- */
.card-dark {
  background: var(--bg-1);
  border: none;
  border-radius: 12px; overflow: hidden; position: relative;
  transition: transform .25s;
}
.card-dark:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.card-dark .p-img { transition: transform .5s; }
.card-dark:hover .p-img { transform: scale(1.08); }

/* Özellik rozetleri */
.badge-mx  { background: var(--grad); color:#fff; }
.badge-mh  { background: linear-gradient(135deg,#EA2349,#ff5b76); color:#fff; }
.badge-dark { background: var(--bg-3); color: var(--tx-1); }

/* ---------- Glow metin ve çizgiler ---------- */
.text-grad { color: var(--tx-0); }
.hr-glow { height: 1px; border: 0; background: var(--line); }

/* ---------- Navbar ---------- */
.navbar-dark-site {
  background: var(--nav-bg); backdrop-filter: blur(14px);
  border-bottom: none;
  position: sticky; top: 0; z-index: 1020;
}
.navbar-dark-site .nav-link { color: var(--tx-1); position: relative; }
.navbar-dark-site .nav-link::after {
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background: var(--grad); transition: width .3s;
}
.navbar-dark-site .nav-link:hover::after, .navbar-dark-site .nav-link.active::after { width:100%; }

/* ---------- Footer ---------- */
.footer-site { background: var(--bg-1); border-top: none; color: var(--tx-muted); }

/* ---------- Reveal (scroll) ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

/* ---------- Ürün detay ---------- */
.spec-row { border-bottom: 1px solid var(--line); }
.stock-live { color: var(--ac-2); text-shadow: 0 0 12px rgba(0,198,251,.6); }
.stock-out { color: var(--danger); }
.mh-timeline { position: relative; padding-left: 1.5rem; }
.mh-timeline::before { content:''; position:absolute; left:.45rem; top:.3rem; bottom:.3rem; width:2px; background: var(--grad); }
.mh-day { position: relative; padding: .5rem 0 .5rem 1rem; }
.mh-day::before { content:''; position:absolute; left:-1.15rem; top:1rem; width:10px; height:10px; border-radius:50%; background: var(--ac-2); box-shadow: 0 0 12px var(--ac-2); }

/* ---------- Kategori ikon kartları ---------- */
.cat-tile { transition: transform .3s, box-shadow .3s; }
.cat-tile:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--glow); }

/* ---------- Bayi/admin paneli ---------- */
.panel-shell { background: var(--bg-1); min-height: 100vh; }
.panel-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.panel-side { background: var(--bg-1); border-right: 1px solid var(--line); min-height: 100vh; }
.panel-side .nav-link { color: var(--tx-muted); border-radius: 8px; margin: 2px 8px; }
.panel-side .nav-link:hover, .panel-side .nav-link.active { color: var(--tx-0); background: rgba(0,91,234,.15); }
.table-dark-site { --bs-table-bg: transparent; --bs-table-color: var(--tx-1); --bs-table-border-color: var(--line); }
.table-dark-site thead th { color: var(--ac-2); font-weight: 600; }

/* ---------- Sepete uçan ikon ---------- */
@keyframes flyToCart { to { transform: translate(var(--fx), var(--fy)) scale(.2); opacity: 0; } }
.fly-img { position: fixed; z-index: 9998; width: 64px; height: 64px; object-fit: contain; border-radius: 8px; animation: flyToCart .8s ease-in forwards; }

/* ---------- Toast ---------- */
.toast-dark { background: var(--bg-2); border: 1px solid rgba(0,198,251,.35); color: var(--tx-0); box-shadow: var(--glow); }

/* ---------- Responsive ince ayar ---------- */
@media (max-width: 767px) {
  .hero { min-height: 92vh; }
  .hero-title { font-size: clamp(2rem, 9vw, 3.4rem) !important; }
}

/* prefers-reduced-motion: erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Bootstrap 5.3 koyu mod ↔ MAXLED paleti bağlaması
   (data-bs-theme="dark" açık; alttaki değişkenler Bootstrap
   bileşenlerini — modal, alert, pagination, form, close —
   site arka planıyla uyumlu koyu tonda tutar)
   ============================================================ */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--tx-0);
  --bs-border-color: var(--line-strong);

  /* Bileşen zeminleri: Bootstrap koyu grisi yerine MAXLED kart tonu */
  --bs-secondary-bg: var(--bg-2);
  --bs-tertiary-bg: var(--bg-1);
  --bs-secondary-color: var(--tx-muted);
  --bs-tertiary-color: var(--tx-muted);

  /* Form kontrol: şeffaf inputlar seçim listesinde de koyu kalsın */
  --bs-body-bg2: var(--bg-2);
}

/* Modal içeriği: panel-card ile aynı görsel dil */
[data-bs-theme="dark"] .modal-content {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  color: var(--tx-0);
}

/* Alert'ler: koyu zeminde doygun değil, zarif vurgu */
[data-bs-theme="dark"] .alert-success {
  background: rgba(0,198,251,.10);
  border: 1px solid rgba(0,198,251,.35);
  color: var(--ac-2);
}
[data-bs-theme="dark"] .alert-danger {
  background: rgba(234,35,73,.10);
  border: 1px solid rgba(234,35,73,.40);
  color: #ff7d94;
}
[data-bs-theme="dark"] .alert-info {
  background: rgba(0,91,234,.10);
  border: 1px solid rgba(0,91,234,.40);
  color: var(--ac-2);
}
[data-bs-theme="dark"] .alert-warning {
  background: rgba(255,184,77,.10);
  border: 1px solid rgba(255,184,77,.40);
  color: #ffb84d;
}

/* Pagination: koyu zemindeBootstrap açık kutuları yerine tema tonu */
[data-bs-theme="dark"] .pagination { --bs-pagination-bg: transparent; --bs-pagination-border-color: rgba(255,255,255,.12); --bs-pagination-color: var(--tx-1); --bs-pagination-hover-bg: rgba(0,91,234,.18); --bs-pagination-hover-color: #fff; --bs-pagination-active-bg: var(--ac-1); --bs-pagination-active-border-color: var(--ac-1); --bs-pagination-active-color: #fff; --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--tx-muted); --bs-pagination-disabled-border-color: rgba(255,255,255,.08); }

/* Form select/option: bg-transparent inputlarla açılır liste uyumu */
[data-bs-theme="dark"] select.form-select, [data-bs-theme="dark"] select.form-control { background-color: var(--bg-1); }
[data-bs-theme="dark"] select.form-select option { background-color: var(--bg-2); color: var(--tx-0); }

/* btn-close: koyu zeminde beyaz varyant davranışı */
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Dropdown (navbar collapse dışı) ve tooltip koyu uyumu */
[data-bs-theme="dark"] .dropdown-menu { background: var(--bg-2); border: 1px solid var(--line-strong); }
[data-bs-theme="dark"] .dropdown-item { color: var(--tx-1); }
[data-bs-theme="dark"] .dropdown-item:hover { background: rgba(0,91,234,.18); color: #fff; }

/* ---------- Palet uyumu: Bootstrap semantik tonları MAXLED paletine ---------- */
/* text-warning (sarı) → temanın amber değil, mavi vurgu tonuna çekilmez;
   "siparişe bağlı" gibi ara durumlar için okunabilir amber-turuncu sabitlenir */
.text-warning { color: #ffb84d !important; }

/* text-info/link-info → accent mavisi */
.text-info, .link-info { color: var(--ac-2) !important; }

/* table-secondary satırı → koyu vurgu satırı (ekstre devreden bakiyesi) */
.table-dark-site tr.table-secondary > * {
  background-color: rgba(0,91,234,.10);
  color: var(--tx-1);
  --bs-table-bg: transparent;
}

/* Form kontrol vurguları: Bootstrap mavisi yerine tema mavisi */
[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--ac-1);
  border-color: var(--ac-1);
}
[data-bs-theme="dark"] .form-check-input:focus, [data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--ac-2);
  box-shadow: 0 0 0 .2rem rgba(0, 198, 251, .18);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--tx-muted); opacity: .7; }

/* Bootstrap mavi buton varyantları (btn-secondary, btn-link) tema tonuna */
[data-bs-theme="dark"] .btn-link { color: var(--ac-2); }

/* Alert uyumlu linkler */
[data-bs-theme="dark"] .alert a { color: var(--ac-2); }

/* ---------- Bayi B2B panel sayfası ---------- */
/* Panel içerik kabı: geniş ekranda sağda boşluk bırakmaz (1720px üst sınır yalnız 2K+ için) */
.bayi-page, .personel-page, .admin-page { width: 100%; max-width: 1720px; margin-inline: auto; }
@media (min-width: 1600px) {
  .panel-content { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.panel-side .nav-link .badge { font-size: .7em; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { opacity: .4; }

/* text-muted: Bootstrap gri-600 yerine tema muted tonu */
.text-muted { color: var(--tx-muted) !important; }

/* text-light: tema ana metin tonu */
.text-light { color: var(--tx-0) !important; }

/* ============================================================
   AÇIK TEMA (data-bs-theme="light")
   Sistem tercihi açıkken (veya kullanıcı seçince) devreye girer;
   tüm renkler bg / tx / line CSS değişkenleri üzerinden döner.
   ============================================================ */
:root[data-bs-theme="light"] {
  --bg-0: #f2f5fa;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #e3e8f0;
  --tx-0: #131820;
  --tx-1: #232b38;
  --tx-muted: #5c6675;
  --line: rgba(15,23,42,.10);
  --line-strong: rgba(15,23,42,.15);
  --nav-bg: rgba(255,255,255,.88);
  --glow: 0 6px 20px rgba(0,91,234,.18);

  /* Bootstrap bileşen zeminleri */
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--tx-0);
  --bs-border-color: var(--line);
  --bs-secondary-bg: #eef2f8;
  --bs-tertiary-bg: #f6f8fc;
  --bs-secondary-color: var(--tx-muted);
  --bs-tertiary-color: var(--tx-muted);
}

/* Alert'ler: açık zeminde tema tonlu, okunabilir vurgular */
[data-bs-theme="light"] .alert-success {
  background: rgba(0,140,190,.10);
  border: 1px solid rgba(0,140,190,.35);
  color: #0a5d7a;
}
[data-bs-theme="light"] .alert-danger {
  background: rgba(234,35,73,.08);
  border: 1px solid rgba(234,35,73,.35);
  color: #a8123a;
}
[data-bs-theme="light"] .alert-info {
  background: rgba(0,91,234,.08);
  border: 1px solid rgba(0,91,234,.30);
  color: #0049bd;
}
[data-bs-theme="light"] .alert-warning {
  background: rgba(200,140,0,.10);
  border: 1px solid rgba(200,140,0,.35);
  color: #8a5a00;
}

/* Pagination: aktif sayfa tema mavisi */
[data-bs-theme="light"] .pagination {
  --bs-pagination-color: var(--tx-1);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--line-strong);
  --bs-pagination-hover-bg: rgba(0,91,234,.08);
  --bs-pagination-hover-color: var(--ac-1);
  --bs-pagination-hover-border-color: var(--ac-1);
  --bs-pagination-active-bg: var(--ac-1);
  --bs-pagination-active-border-color: var(--ac-1);
  --bs-pagination-active-color: #fff;
}

/* Form vurguları: Bootstrap mavisi yerine tema mavisi */
[data-bs-theme="light"] .form-check-input:checked {
  background-color: var(--ac-1);
  border-color: var(--ac-1);
}
[data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus {
  border-color: var(--ac-1);
  box-shadow: 0 0 0 .2rem rgba(0,91,234,.15);
}
[data-bs-theme="light"] .form-control::placeholder { color: var(--tx-muted); opacity: .7; }

/* ---------- Açık zeminde kontrast düzeltmeleri ---------- */
.text-warning { color: #b26a00 !important; }
[data-bs-theme="dark"] .text-warning { color: #ffb84d !important; }

[data-bs-theme="light"] .stock-live { color: var(--ac-1); text-shadow: none; }
[data-bs-theme="light"] .btn-ghost:hover { border-color: var(--ac-1); color: var(--ac-1); }
[data-bs-theme="light"] .btn-glow:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,91,234,.35); }
[data-bs-theme="light"] .card-dark:hover { border-color: rgba(0,91,234,.35); }
[data-bs-theme="light"] .tema-btn { border-color: var(--line-strong); }
[data-bs-theme="light"] .table-dark-site thead th { color: var(--ac-1); }
[data-bs-theme="light"] .panel-side .nav-link:hover, [data-bs-theme="light"] .panel-side .nav-link.active { background: rgba(0,91,234,.10); }
[data-bs-theme="light"] .hero {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,91,234,.12), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0,198,251,.08), transparent),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, var(--bg-0));
}
/* Mobil menü ikonu (navbar-toggler) açık zeminde koyu tona çevrilir */
[data-bs-theme="light"] .navbar-dark-site .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(.35); }

/* ============================================================
   BAYİ PANELİ KABUĞU (B2B uygulama düzeni)
   ============================================================ */
.panel-side { width: 264px; flex: 0 0 264px; height: 100vh; position: sticky; top: 0; overflow-y: auto; }
.panel-brand { border-bottom: 1px solid var(--line); }
.panel-nav-group { padding: 14px 22px 6px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-muted); }
.panel-nav .nav-link { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; margin: 1px 10px; border-radius: 10px; font-size: .92rem; position: relative; }
.panel-nav .nav-link .ico { width: 1.3rem; text-align: center; }
.panel-nav .nav-link .badge { margin-left: auto; }
.panel-nav .nav-link:hover { background: rgba(0,91,234,.10); }
.panel-nav .nav-link.active { background: rgba(0,91,234,.16); font-weight: 600; }
.panel-nav .nav-link.active::before { content: ''; position: absolute; left: -10px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--grad); }
.panel-user { border-top: 1px solid var(--line); }
.avatar-circle { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.min-w-0 { min-width: 0; }

.panel-topbar { position: sticky; top: 0; z-index: 60; padding: .55rem 1rem; background: var(--nav-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.panel-topbar-kicker { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tx-muted); }
.panel-content { padding: 1.1rem 1rem 2.5rem; }
/* Flex öğesi min-width:auto → geniş tablolar mobilde ana alanı şişiriyordu; 0 ile
   daralabilir hale gelir, tablolar .table-responsive içinde kaydırılır. */
.panel-main { min-width: 0; }
.panel-offcanvas { background: var(--bg-1); color: var(--tx-0); }

/* Mobil alt gezinme (uygulama hissi) */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: flex; gap: .15rem; padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom)); background: var(--nav-bg); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .3rem .2rem; border-radius: 10px; text-decoration: none; color: var(--tx-muted); font-size: .66rem; }
.bottom-nav a .bn-ico { position: relative; font-size: 1.15rem; line-height: 1; }
.bottom-nav a.active { color: var(--tx-0); font-weight: 600; background: rgba(0,91,234,.10); }
.bottom-nav .cart-badge { position: absolute; top: -5px; right: -12px; font-size: .58rem; }
@media (max-width: 991.98px) { .panel-content { padding-bottom: 5.5rem; } }

/* KPI / özet kartı */
.stat-card { position: relative; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, var(--bg-2), var(--bg-1)); transition: transform .25s, border-color .25s; }
.stat-card:hover { transform: translateY(-2px); border-color: rgba(0,198,251,.35); }
.stat-card .st-label { font-size: .71rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-muted); }
.stat-card .st-value { margin-top: .15rem; font-size: 1.4rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-card .st-foot { margin-top: .15rem; font-size: .78rem; color: var(--tx-muted); }
.stat-card .st-ico { position: absolute; top: .7rem; right: .85rem; font-size: 1.3rem; opacity: .5; }

/* Hızlı işlem kutuları */
.quick-tile { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); color: var(--tx-1); text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
.quick-tile:hover { transform: translateY(-2px); border-color: rgba(0,198,251,.4); color: var(--tx-0); box-shadow: var(--glow); }
.quick-tile .qt-ico { font-size: 1.35rem; }
.quick-tile .qt-sub { font-size: .74rem; color: var(--tx-muted); }

/* Sayfa başlığı + özet şeritleri */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h4 { margin: 0; }
.page-head-sub { font-size: .84rem; color: var(--tx-muted); }
.sum-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-size: .82rem; }
.sum-chip b { font-variant-numeric: tabular-nums; }

/* Panel tabloları + boş durum */
.panel-card .table > :not(caption) > * > * { padding: .6rem .7rem; }
.table-dark-site td.text-end, .table-dark-site th.text-end { font-variant-numeric: tabular-nums; }
.table-dark-site tbody tr:hover > * { --bs-table-bg: rgba(0,91,234,.06); }
.empty-state { padding: 2.2rem 1rem; text-align: center; color: var(--tx-muted); }
.empty-state .es-ico { display: block; margin-bottom: .5rem; font-size: 2rem; opacity: .85; }
[data-bs-theme="light"] .panel-nav .nav-link.active { background: rgba(0,91,234,.10); }
[data-bs-theme="light"] .table-dark-site tbody tr:hover > * { --bs-table-bg: rgba(0,91,234,.05); }

/* ============================================================
   KURUMSAL VİTRİN (public site) — bileşenler
   ============================================================ */
.topbar { background: var(--bg-0); border-bottom: none; font-size: .78rem; }
.topbar, .topbar a { color: var(--tx-muted); }
.topbar a { text-decoration: none; transition: color .2s; }
.topbar a:hover { color: var(--ac-2); }

.brand-logo { height: 30px; width: auto; display: block; }
[data-bs-theme="light"] .brand-logo { filter: invert(1) brightness(.25); }

.navbar-dark-site { transition: box-shadow .3s, background .3s; }
.navbar-dark-site.scrolled { box-shadow: 0 10px 32px rgba(0,0,0,.35); }
[data-bs-theme="light"] .navbar-dark-site.scrolled { box-shadow: 0 10px 32px rgba(15,23,42,.10); }

.nav-search { width: 240px; }
.nav-search .form-control { background: transparent; border-color: var(--line-strong); color: var(--tx-1); }
.nav-search .form-control::placeholder { color: var(--tx-muted); }
.nav-search .form-control:focus { border-color: var(--ac-2); box-shadow: 0 0 0 .2rem rgba(0,198,251,.16); }

/* Hero arka planı (film karesi) + oynat düğmesi */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .45; transform: scale(1.02); }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,.50), rgba(13,13,13,.72) 55%, var(--bg-0)); }
[data-bs-theme="light"] .hero-media img { opacity: .28; }
[data-bs-theme="light"] .hero-media::after { background: linear-gradient(180deg, rgba(242,245,250,.72), rgba(242,245,250,.88) 55%, var(--bg-0)); }

.cat-photo { position: relative; display: block; height: 220px; border-radius: 16px; overflow: hidden; border: none; text-decoration: none; transition: transform .3s; }
.cat-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.cat-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.02) 40%, rgba(0,0,0,.80)); }
.cat-photo .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1rem 1.1rem; color: #fff; }
.cat-photo:hover img { transform: scale(1.05); }

/* Ürün kartı — tüm yüzey tıklanabilir (onclick + stretched-link), imleç pointer */
.p-card { position: relative; cursor: pointer; }
.p-card .p-img-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 175px; padding: .9rem; background: var(--bg-1); overflow: hidden; }
.p-card .p-img-wrap img { transition: transform .5s ease; max-height: 165px; object-fit: contain; }
.p-card:hover .p-img-wrap img { transform: scale(1.06); }
.p-card .p-name { min-height: 2.7em; color: var(--tx-0); }
.p-card, .p-card .small, .p-card .fw-bold { color: var(--tx-0); }
.p-card .p-cta { position: absolute; left: 0; right: 0; bottom: .6rem; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.p-card:hover .p-cta { opacity: 1; transform: none; }
.p-card .p-cta span { background: var(--bg-2); border: 1px solid var(--ac-2); color: var(--tx-0); padding: .25rem .8rem; border-radius: 999px; font-size: .82rem; }
.p-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; width: 100%; min-height: 160px; border-radius: 12px; border: 1px dashed var(--line-strong); background: radial-gradient(ellipse 60% 60% at 50% 20%, rgba(0,198,251,.12), transparent 70%), linear-gradient(160deg, var(--bg-3), var(--bg-2)); color: var(--tx-muted); }
.p-placeholder .ph-ico { font-size: 1.8rem; opacity: .85; }
.p-placeholder .ph-code { font-weight: 700; letter-spacing: .04em; color: var(--tx-1); }

/* Tanıtım filmi */
.film-poster { position: relative; display: block; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; width: 100%; padding: 0; background: transparent; }
.film-poster img { width: 100%; height: auto; display: block; transition: transform .8s; }
.film-poster:hover img { transform: scale(1.03); }
.film-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55)); }
.film-poster:hover { border-color: var(--line-strong); }
.film-play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; }
.film-play span { width: 82px; height: 82px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(6px); transition: transform .25s, background .25s; }
.film-poster:hover .film-play span { transform: scale(1.08); background: var(--ac-1); }
.film-meta { position: absolute; left: 1rem; bottom: .9rem; z-index: 1; color: #fff; font-size: .82rem; }

/* CTA bandı */
.cta-band { background: linear-gradient(120deg, rgba(0,91,234,.16), rgba(0,198,251,.07)); border: 1px solid var(--line); border-radius: 20px; }

/* Tema / erişilebilirlik düzeltmeleri */
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--ac-2); outline-offset: 2px; }
.link-light:hover { color: var(--ac-2) !important; }
[data-bs-theme="light"] .link-light { color: var(--tx-1) !important; }
[data-bs-theme="light"] .link-light:hover { color: var(--ac-1) !important; }
[data-bs-theme="light"] .btn-ghost { color: var(--tx-1); }
.modal-film .modal-content { background: #000; border: 1px solid var(--line-strong); }
.modal-film video { width: 100%; height: auto; display: block; background: #000; }

/* Yardımcı sınıflar (Bootstrap'te py-6 yok — bölüm boşlukları için) */
.py-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
@media (max-width: 767.98px) {
  .py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .hero-media img { object-position: 60% center; }
}
@media (min-width: 992px) { .product-info-sticky { position: sticky; top: 5.25rem; } }


/* ============================================================
   TABLO ARAÇLARI (filtre / sıralama / sayfa boyutu)
   public/assets/js/table-tools.js tarafından enjekte edilir
   ============================================================ */
.table-tools {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem .7rem; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  background: color-mix(in srgb, var(--bg-2) 82%, var(--bg-1));
}
.table-tools .tt-search { position: relative; flex: 1 1 220px; max-width: 380px; min-width: 160px; }
.table-tools .tt-search input {
  width: 100%; padding: .38rem .7rem .38rem 1.9rem; font-size: .82rem;
  background: transparent; color: var(--tx-0);
  border: 1px solid var(--line-strong); border-radius: 999px;
}
.table-tools .tt-search::before {
  content: '🔎'; position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
  font-size: .78rem; opacity: .6; pointer-events: none;
}
.table-tools .tt-search input:focus { outline: none; border-color: var(--ac-2); box-shadow: 0 0 0 .18rem rgba(0,198,251,.14); }
.table-tools select {
  padding: .3rem .5rem; font-size: .78rem; border-radius: 8px;
  background: var(--bg-2); color: var(--tx-1); border: 1px solid var(--line-strong);
}
.table-tools .tt-count { font-size: .75rem; color: var(--tx-muted); margin-left: auto; white-space: nowrap; }
.table-tools .tt-pager { display: flex; align-items: center; gap: .3rem; }
.table-tools .tt-pager button {
  min-width: 30px; padding: .2rem .5rem; font-size: .78rem; line-height: 1.4;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--tx-1);
}
.table-tools .tt-pager button:disabled { opacity: .4; cursor: default; }
.table-tools .tt-pager .tt-page { font-size: .78rem; color: var(--tx-muted); padding: 0 .25rem; }

/* Sıralanabilir başlık */
.table-dark-site thead th.tt-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table-dark-site thead th.tt-sortable:hover { color: #fff; }
.table-dark-site thead th.tt-sortable::after { content: '↕'; margin-left: .35rem; font-size: .72em; opacity: .35; }
.table-dark-site thead th.tt-asc::after { content: '▲'; opacity: .9; }
.table-dark-site thead th.tt-desc::after { content: '▼'; opacity: .9; }
[data-bs-theme="light"] .table-dark-site thead th.tt-sortable:hover { color: var(--ac-1); }

/* Tıklanabilir satır (detay bağlantısı) */
.table-dark-site tbody tr.tt-row-link { cursor: pointer; }
.table-dark-site tbody tr.tt-row-link:hover > * { --bs-table-bg: rgba(0,91,234,.10); }
.table-dark-site tbody tr.tt-row-link:focus-visible { outline: 2px solid var(--ac-2); outline-offset: -2px; }

/* Sayfa boyutu formu (sunucu taraflı listeler) */
.per-page-form { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--tx-muted); }
.per-page-form select { padding: .25rem .45rem; font-size: .78rem; border-radius: 8px; background: var(--bg-2); color: var(--tx-1); border: 1px solid var(--line-strong); }

@media (max-width: 575.98px) {
  .table-tools { gap: .35rem; }
  .table-tools .tt-search { flex: 1 1 100%; max-width: none; }
  .table-tools .tt-count { margin-left: 0; }
}