/* ═══════════════════════════════════════════════════════════════════════════
   TK · SATIŞ SAYFALARI TEMA KATMANI  (assets/tk-satis-tema.css)  15.10.2026
   ---------------------------------------------------------------------------
   NEDEN: Satış sayfaları (ana sayfa, tanıtım, oda kiralama, ödeme, giriş,
   kayıt, sözleşmeler) ile SUNUCU panelleri farklı iki tasarım dili konuşuyordu:
   satış tarafı mor/indigo glassmorphism, paneller ise lacivert-cyan "sunucu
   konsolu". Kullanıcı kararı: satış sayfaları da modern olsun ve panellerle
   TAM UYUM içinde olsun.

   YÖNTEM: tk-theme.css'in TÜM bileşenleri var(--token) üzerinden çalıştığı için
   buradaki token eşlemesi sayfaların tamamını tek kalemde panel diliyle
   buluşturur. Ardından yalnız görünümü incelten güvenli katman gelir —
   hiçbir sınıf adı veya JS davranışı değiştirilmez.

   YÜKLEME SIRASI: tk-theme.css → tk-uyum.css → **tk-satis-tema.css**
   İKİ KOPYA AYNI OLMALI:
     · TikTokCams-Host/assets/tk-satis-tema.css   (site + paket)
     · yeniserver/public/assets/tk-satis-tema.css (localhost sunucu)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN EŞLEMESİ: panel ölçeği (ops-panel.html ile aynı) ───────────── */
:root{
  /* panel paleti */
  --bg:#070d18;
  --bg2:#0b1424;
  --bg3:#0f1e33;
  --card:#0f172a;
  --card2:#141f36;
  --card-hover:#192642;
  --line:#1e293b;
  --line-focus:#38bdf8;
  --txt:#f1f5f9;
  --mut:#94a3b8;
  --dim:#64748b;
  --ok:#10b981;
  --warn:#f59e0b;
  --err:#f43f5e;
  --acc:#06b6d4;
  --acc-hover:#22d3ee;
  --acc-bg:rgba(6,182,212,.12);
  --indigo:#6366f1;

  /* satış sayfalarının kendi tokenları → panel karşılıkları */
  --surface:#141f36;
  --surface-h:#192642;
  --border:#1e293b;
  --border-h:#2b3d5e;
  --text:#f1f5f9;
  --text-muted:#94a3b8;
  --text-faint:#64748b;
  --glass:rgba(15,23,42,.78);

  --primary:#06b6d4;      /* birincil eylem = panel cyan */
  --primary-d:#0891b2;
  --accent:#6366f1;
  --pink:#ff0050;         /* marka kırmızısı yalnız CTA/vurgu */
  --success:#10b981;
  --danger:#f43f5e;
  --info:#22d3ee;

  --radius:10px;
  --radius-sm:6px;
  --radius-lg:14px;
  --shadow:0 8px 24px rgba(0,0,0,.45);
  --shadow-sm:0 2px 6px rgba(0,0,0,.3);
  --glow:0 0 22px rgba(6,182,212,.25);

  /* TEK YAZI TİPİ — panellerle aynı HUD/mono aile */
  --mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --font:var(--mono);
}

/* ── 2. ZEMİN & TİPOGRAFİ ────────────────────────────────────────────────── */
html{overflow-x:hidden}
body{
  font:14.5px/1.65 var(--mono) !important;
  background:radial-gradient(circle at 50% -10%,#111e38 0%,var(--bg) 60%) fixed !important;
  color:var(--txt) !important;
}
h1,h2,h3,h4,button,.btn,.badge,.chip{font-family:var(--mono) !important}
h1{letter-spacing:.3px}
h2{font-size:clamp(20px,3.4vw,28px)}
/* Bölüm etiketleri: panel başlıklarıyla aynı dil (küçük harf aralıklı büyük yazı) */
.bolum-etiket,.kicker,.eyebrow,.section-label,small.ust{
  text-transform:uppercase;letter-spacing:1.2px;color:var(--acc-hover);font-weight:700;
}
a{color:var(--acc-hover)}
a:hover{color:var(--acc)}
strong{color:var(--txt)}
::selection{background:rgba(6,182,212,.3)}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--bg)}
*::-webkit-scrollbar-thumb{background:#1f2d47;border-radius:8px;border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#2b3d5e}

/* ── 3. KARTLAR / CAM YÜZEYLER: panel kartına dönüşür ───────────────────── */
.glass,.card,.kutu,.panel,.tk-card{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.glass:hover,.card:hover{background:var(--card-hover) !important}
.glass>*:first-child,.card>*:first-child{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}

/* Fiyat / paket kutuları: panel "stat" kartı görünümü + üstte cyan şerit */
.paket,.plan,.price-card,.paket-kart{
  background:var(--card) !important;border:1px solid var(--line) !important;
  border-top:3px solid var(--acc) !important;border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm) !important;position:relative;
}
.paket.one-cikan,.plan.popular,.paket.populer,.price-card.featured{
  border-color:var(--acc) !important;
  box-shadow:0 12px 34px rgba(6,182,212,.22) !important;
}
.fiyat,.price{color:var(--acc-hover) !important;font-variant-numeric:tabular-nums}

/* ── 4. DÜĞMELER ─────────────────────────────────────────────────────────── */
.btn,.button,button.aksiyon{
  border-radius:var(--radius-sm) !important;
  font-weight:700 !important;letter-spacing:.4px;
  border:1px solid var(--line);
  background:var(--card2);color:var(--txt);
  transition:border-color .15s,background .15s,color .15s;
}
.btn:hover,.button:hover,button.aksiyon:hover{border-color:var(--acc) !important;background:var(--card-hover) !important;color:var(--acc-hover) !important}
.btn.primary,.btn.birincil,.button.primary,.btn-cta{
  background:linear-gradient(135deg,var(--acc),var(--indigo)) !important;
  color:#04121c !important;border-color:transparent !important;
  box-shadow:0 6px 18px rgba(6,182,212,.28);
}
.btn.primary:hover,.btn.birincil:hover,.btn-cta:hover{color:#04121c !important;filter:brightness(1.08)}
/* Marka CTA (satın al / hemen başla) — panel diliyle uyumlu ama marka rengi */
.btn.satin,.btn-buy,.cta{
  background:linear-gradient(135deg,var(--pink),#ff4d7d) !important;
  color:#fff !important;border-color:transparent !important;font-weight:800;
}
.copybtn{background:var(--card2) !important;border-color:var(--line) !important;color:var(--acc-hover) !important}
.copybtn:hover{background:var(--card-hover) !important;color:var(--txt) !important}

/* ── 5. FORM ALANLARI ────────────────────────────────────────────────────── */
input,select,textarea,.fld input,.fld select,.fld textarea{
  /* ★ 16.10.2026 (kullanıcı): giriş alanları AÇIK zemin + koyu yazı olsun
     (login.ejs referansı: #fafcfe zemin, #d5dfe9 kenarlık). Koyu karta gömülü
     koyu alanlar hem okunmaz hem şifre/kullanıcı adı yazarken karışıyordu. */
  background:#fafcfe !important;
  border:1px solid #d5dfe9 !important;
  color:#0f172a !important;
  border-radius:var(--radius-sm) !important;
  caret-color:#0f172a !important;
}
input::placeholder,textarea::placeholder{color:#94a3b8 !important;opacity:1}
input:focus,select:focus,textarea:focus,.fld input:focus{
  outline:none !important;border-color:var(--line-focus) !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.16) !important;
}
select option{background:#fafcfe !important;color:#0f172a !important}
label,.fld label{color:var(--mut) !important;font-size:12px;letter-spacing:.3px}

/* ── 6. TABLO & LİSTELER ─────────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%}
thead th{background:var(--card2);color:var(--mut);text-transform:uppercase;letter-spacing:.7px;font-size:11px}
td,th{border-bottom:1px solid var(--line)}
tbody tr:hover td{background:var(--acc-bg)}
ul,ol{color:var(--txt)}
li::marker{color:var(--acc)}

/* ── 7. ROZETLER / ETİKETLER ─────────────────────────────────────────────── */
.badge,.chip,.rozet,.etiket{
  border-radius:20px !important;text-transform:uppercase;letter-spacing:.5px;
  font-size:10.5px !important;font-weight:700;
  background:var(--acc-bg) !important;color:var(--acc-hover) !important;
  border:1px solid transparent;
}
.badge.ok,.chip.ok{background:rgba(16,185,129,.15) !important;color:#34d399 !important}
.badge.warn,.chip.warn{background:rgba(245,158,11,.15) !important;color:#fcd34d !important}
.badge.err,.chip.err{background:rgba(244,63,94,.15) !important;color:#fb7185 !important}

/* ── 8. GEZİNME ÇUBUĞU (nav.js'in eklediği üst menü) ────────────────────── */
header,body>nav,.nav,.navbar,.topbar{
  background:rgba(15,23,42,.92) !important;
  border-bottom:1px solid var(--line) !important;
  backdrop-filter:blur(8px) !important;
}
.nav a,.navbar a,.topbar a{color:var(--mut) !important;font-weight:600;letter-spacing:.3px}
.nav a:hover,.navbar a:hover,.topbar a:hover{color:var(--txt) !important}
.nav a.aktif,.navbar a.active,.topbar a.aktif{color:var(--acc-hover) !important}

/* ── 9. ALT BİLGİ (footer) ──────────────────────────────────────────────── */
footer,.footer{
  background:var(--card) !important;border-top:1px solid var(--line) !important;
  color:var(--mut) !important;font-size:12.5px;
}
footer a,.footer a{color:var(--mut) !important}
footer a:hover,.footer a:hover{color:var(--acc-hover) !important}

/* ── 10. DURUM / UYARI KUTULARI ─────────────────────────────────────────── */
.uyari,.alert,.bilgi-kutu{
  border-radius:var(--radius) !important;border:1px solid var(--line) !important;
  border-left:3px solid var(--acc) !important;background:var(--card2) !important;
  color:var(--txt) !important;
}
.uyari.kirmizi,.alert.err{border-left-color:var(--err) !important}
.uyari.sari,.alert.warn{border-left-color:var(--warn) !important}
.uyari.yesil,.alert.ok{border-left-color:var(--ok) !important}

/* ── 11. DAR EKRAN ───────────────────────────────────────────────────────── */
@media(max-width:640px){
  body{font-size:15px !important}
  .wrap{padding:0 14px}
  .paket,.plan,.price-card{width:100% !important}
}
@media print{
  body{background:#fff !important;color:#000 !important}
  header,footer,nav,.btn{display:none !important}
}