/* =====================================================================
   ASIN Scout Pro — PREMIUM TASARIM KATMANI
   ---------------------------------------------------------------------
   Bu dosya her sayfaya inline <style>'dan SONRA yüklenir. Aynı değişken
   ve class isimlerini kullandığı için mevcut stilleri override edip tüm
   siteyi tek noktadan premium seviyeye çıkarır. HTML/JS'e dokunmaz.
   Marka kimliği (koyu tema + turuncu→pembe) korunur, sofistike hale gelir.
   ===================================================================== */

:root {
  /* — Zenginleştirilmiş yüzey paleti (daha derin, katmanlı) — */
  --bg:  #07070c;
  --bg2: #0d0d14;
  --bg3: #15151f;
  --bg-elev: #191924;            /* yükseltilmiş kart yüzeyi */

  --text:  #f5f5fa;
  --text2: #a2a2b4;
  --text3: #63637a;

  --orange: #ff6b2c;
  --pink:   #ff2c6b;
  --green:  #22c97a;
  --blue:   #4d8eff;
  --red:    #ff4d5e;

  --border:  #232330;
  --border2: rgba(255,255,255,0.07);   /* cam kenarlığı */

  /* — Premium token'lar (yeni) — */
  --grad-primary: linear-gradient(135deg, #ff8a3d 0%, #ff6b2c 40%, #ff2c6b 100%);
  --grad-text:    linear-gradient(120deg, #ffb07c, #ff6b2c 45%, #ff2c6b);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));

  --radius:    14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.7);
  --glow-orange: 0 10px 40px -8px rgba(255,107,44,.45);
  --glow-pink:   0 10px 40px -8px rgba(255,44,107,.4);

  --ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1100px 600px at 82% -8%, rgba(255,44,107,.10), transparent 60%),
    radial-gradient(1000px 620px at 12% 4%, rgba(255,107,44,.10), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* İnce kaydırma çubuğu (tüm site) */
* { scrollbar-width: thin; scrollbar-color: #33333f transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2c2c38; border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #3b3b4a; background-clip: content-box; }

/* Seçim rengi */
::selection { background: rgba(255,107,44,.28); color: #fff; }

/* ============================ TİPOGRAFİ ============================ */
h1, h2, h3 { letter-spacing: -0.02em; }
h1 { letter-spacing: -0.035em; }

/* Gradyanlı başlık vurgusu — hero'daki span zaten gradyanlıysa güçlendirir */
.hero h1 span,
.section-title h2 span {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================ NAVBAR ============================ */
nav {
  background: rgba(9,9,14,.72) !important;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border2) !important;
}
.logo-icon {
  background: var(--grad-primary) !important;
  box-shadow: var(--glow-orange);
  letter-spacing: 0;
}
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--grad-primary); border-radius: 2px; transition: width .28s var(--ease);
}
.nav-links a:not(.btn):hover::after { width: 100%; }

/* ============================ BUTONLAR ============================ */
.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  position: relative;
  overflow: hidden;
}
/* Parlama efekti */
.btn::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none;
}
.btn:hover::before { left: 140%; }

.btn-primary {
  background: var(--grad-primary) !important;
  box-shadow: var(--glow-orange);
  border: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px -8px rgba(255,107,44,.55);
}
.btn-outline {
  border: 1px solid var(--border2) !important;
  background: rgba(255,255,255,.02) !important;
  backdrop-filter: blur(6px);
}
.btn-outline:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ============================ KARTLAR ============================ */
/* Ortak premium kart görünümü: cam yüzey + katmanlı gölge + hover glow */
.feature-card, .price-card, .testimonial, .step {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) , var(--bg-elev) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position: relative;
}
.feature-card:hover, .testimonial:hover {
  transform: translateY(-6px);
  border-color: rgba(255,107,44,.4) !important;
  box-shadow: var(--shadow-lg), var(--glow-orange);
}
.feature-icon {
  background: var(--grad-primary) !important;
  box-shadow: var(--glow-orange);
  border-radius: 14px !important;
}

/* Fiyat kartları */
.price-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,107,44,.45) !important;
  box-shadow: var(--shadow-lg), var(--glow-orange);
}
.price-card.popular {
  border-color: transparent !important;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    var(--grad-primary) border-box !important;
  border: 1.5px solid transparent !important;
  box-shadow: var(--shadow-lg), var(--glow-pink);
}
.price-card.popular::before {
  background: var(--grad-primary) !important;
  box-shadow: var(--glow-orange);
  letter-spacing: .04em; text-transform: uppercase;
}
.price-amount { letter-spacing: -0.03em; }
.step-number {
  background: var(--grad-surface), var(--bg-elev) !important;
  box-shadow: var(--glow-orange), inset 0 0 0 1px rgba(255,107,44,.3);
  border: none !important;
}

/* ============================ CTA / BÖLÜMLER ============================ */
.cta {
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255,44,107,.14), transparent 70%),
    linear-gradient(135deg, rgba(255,107,44,.08), rgba(255,44,107,.08)) !important;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}

/* ============================ FORMLAR ============================ */
input, select, textarea {
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255,107,44,.18);
}

/* ============================ TABLOLAR ============================ */
table { border-radius: var(--radius); overflow: hidden; }
thead th { letter-spacing: .01em; }
tbody tr { transition: background .18s var(--ease); }
tbody tr:hover { background: rgba(255,255,255,.03); }

/* ============================ GİRİŞ/KAYIT KUTULARI ============================ */
/* Login/register gibi sayfalarda ortalanmış kartlar cam efekt alsın */
.auth-card, .login-box, .card, .panel, .box {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-lg);
}

/* ============================ İNCE GİRİŞ ANİMASYONU ============================ */
@media (prefers-reduced-motion: no-preference) {
  .feature-card, .price-card, .testimonial, .step, .stat {
    animation: premiumFade .6s var(--ease) both;
  }
  @keyframes premiumFade {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Footer ince ayrım */
footer { border-top: 1px solid var(--border2) !important; }

/* ============================================================
   APP SAYFALARI (dashboard / scans / settings / scan-detail)
   Bu class'lar yalnızca app sayfalarında var; marketing'i etkilemez.
   ============================================================ */

/* — Sidebar: cam yüzey + ince kenar — */
.sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , rgba(13,13,20,.85) !important;
  backdrop-filter: saturate(140%) blur(14px);
  border-right: 1px solid var(--border2) !important;
}
.sidebar-logo .icon { background: var(--grad-primary) !important; box-shadow: var(--glow-orange); }

/* Menü öğeleri: yumuşak geçiş + aktifte gradyan vurgu + sol şerit */
.sidebar-menu a { position: relative; transition: background .22s var(--ease), color .22s var(--ease); }
.sidebar-menu a:hover { background: rgba(255,255,255,.04) !important; }
.sidebar-menu a.active {
  background: linear-gradient(90deg, rgba(255,107,44,.16), rgba(255,44,107,.06)) !important;
  color: var(--orange) !important;
}
.sidebar-menu a.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--grad-primary); border-radius: 3px;
}
.sidebar-user .avatar, .avatar { background: var(--grad-primary) !important; box-shadow: var(--glow-orange); }
.lang-btn:hover, .lang-btn.active { border-color: var(--orange) !important; color: var(--orange) !important; }

/* — Kartlar / istatistikler: premium yüzey + hover — */
.stat-card, .card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) , var(--bg-elev) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,107,44,.35) !important;
  box-shadow: var(--shadow-lg), var(--glow-orange);
}
.stat-card .value { letter-spacing: -.02em; }

/* Paket kutuları: mevcut gradyanı koru, glow + ince kenar ekle */
.package-box, .user-package {
  border: 1px solid rgba(255,107,44,.28) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md), 0 10px 40px -12px rgba(255,107,44,.28);
}

/* İndir / birincil app butonları: glow + hover */
.btn-download, .announcement-btn { background: var(--grad-primary) !important; box-shadow: var(--glow-orange); }
.btn-download:hover, .announcement-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -8px rgba(255,107,44,.55) !important; }

/* Tablolar: başlık ve satır cilası (generic kurallara ek) */
.card th { color: var(--text2); }
.card td, .card th { border-bottom-color: var(--border2) !important; }

/* Rozetler: pill + ince cam */
.badge.green { background: rgba(34,201,122,.16) !important; }
.pkg-badge { box-shadow: var(--shadow-sm); }

/* Sayfa başlığı ince rafine */
.page-title { letter-spacing: -.02em; }

/* Boş durum ikonu yumuşak */
.empty-icon { filter: drop-shadow(0 6px 18px rgba(255,107,44,.25)); }