/* ============================================================
   SNT RICH THEME — css/brand.css
   Load LAST on every page (immediately before </head>), after
   css/tailwind.css AND after each page's inline <style> block.
   Same hue families as before (brown h30-40, gold h43-45,
   green h80-90, cloud blue h217) — richness comes from
   saturation, gradients, warm shadows and disciplined gold.
   ============================================================ */

:root{
  /* Background scale — same brown hue, saturation ~11% -> ~35% */
  --bg-deep:  #0e0b07;
  --bg-base:  #171208;
  --bg-mid:   #221809;
  --bg-raise: #2c1f0e;

  /* Warm neutral text ramp (contrast on --bg-base: body 9.5:1, mute 6.9:1) */
  --text-hi:   #f0e6d2;
  --text-body: #e8dcc0;
  --text-mute: #b09a72;
  --text-dim:  #8a7a5f;

  /* Gold scale — solid gold reserved for small emphasis moments */
  --gold-hi:   #ffd700;
  --gold:      #daa520;
  --gold-deep: #b8860b;
  --gold-line:       rgba(218,165,32,.28);
  --gold-line-hover: rgba(218,165,32,.45);

  /* Unified CTA = enriched brand green (gold stays ambient accent) */
  --cta-hi:   #6b9b3d;
  --cta-mid:  #5c8a2f;
  --cta-base: #4a7c23;
  --cta-deep: #3d6b1e;

  /* Cloud sub-brand (existing blue accent, formalized) */
  --cloud-400:#60a5fa; --cloud-500:#3b82f6; --cloud-600:#2563eb;

  /* Elevation scale — warm-tinted shadows, gold sheen from level 2 up */
  --el-1: 0 1px 2px rgba(12,8,4,.5), 0 2px 8px rgba(12,8,4,.35);
  --el-2: 0 8px 24px -12px rgba(12,8,4,.55), inset 0 1px 0 rgba(255,215,0,.07);
  --el-3: 0 18px 44px -12px rgba(12,8,4,.62), 0 0 24px rgba(218,165,32,.10), inset 0 1px 0 rgba(255,215,0,.10);
  --el-gold: 0 0 0 1px rgba(218,165,32,.35), 0 12px 40px -10px rgba(12,8,4,.6), 0 0 60px rgba(218,165,32,.25);

  /* Gradient recipes */
  --grad-page: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-mid) 45%, var(--bg-deep) 100%);
  --glow-gold-top:   radial-gradient(1000px 520px at 50% -120px, rgba(218,165,32,.10), transparent 60%);
  --glow-green-side: radial-gradient(800px 500px at 88% 28%, rgba(74,124,35,.07), transparent 60%);
  --grad-glass: linear-gradient(160deg, rgba(90,64,51,.30) 0%, rgba(38,28,18,.55) 100%);
  --grad-gold-text: linear-gradient(180deg, #ffd700 0%, #daa520 60%, #c9a227 100%);
  --grad-cta:       linear-gradient(135deg, var(--cta-mid), var(--cta-deep));
  --grad-cta-hover: linear-gradient(135deg, var(--cta-hi), var(--cta-base));
  --grad-gold-btn:  linear-gradient(135deg, #daa520, #b8860b);
  --grad-gold-rule: linear-gradient(90deg, transparent, #daa520, transparent);
}

/* ---- 1. Warm-border guard: kills Tailwind preflight cool gray ---- */
*,::before,::after{ border-color: rgba(212,184,150,.14); }

/* ---- 2. Page canvas: saturated gradient + anchored glows + vignette ---- */
body{
  background: var(--grad-page);
  color: var(--text-body);
}
body::before{ /* fixed ambient glows (gold halo top, green side) */
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: var(--glow-gold-top), var(--glow-green-side);
}
body::after{ /* grounding vignette */
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(10,8,6,.5) 100%);
}

/* ---- 3. Glass system (supersedes the per-page inline copies) ---- */
.glass{
  background: var(--grad-glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--el-2);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;
}
/* zero-specificity border: Tailwind border-2 / border-yellow-600 /
   border-green-500\/50 utilities win again (revives the dead
   popular-plan frame and active-tab indicator). Requires the inline
   .glass border declaration to be removed from each page. */
:where(.glass){ border:1px solid var(--gold-line); }
.glass:hover{ border-color: var(--gold-line-hover); box-shadow: var(--el-3); }

/* Fixed navbar: opaque anchor, bottom-only edge, real drop shadow */
nav.glass{
  background: rgba(22,17,11,.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top:0; border-left:0; border-right:0;
  border-bottom:1px solid rgba(218,165,32,.25);
  box-shadow: 0 6px 24px rgba(12,8,4,.5), inset 0 -1px 0 rgba(218,165,32,.10);
}
nav.glass:hover{ box-shadow: 0 6px 24px rgba(12,8,4,.5), inset 0 -1px 0 rgba(218,165,32,.10); }

/* Card hover: lift always pairs with shadow growth */
.card-hover{ transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.card-hover:hover{ transform: translateY(-4px); box-shadow: var(--el-3); }

/* ---- 4. CTA system: one primary, one secondary, one ghost ---- */
.btn-cta{
  background: var(--grad-cta) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  box-shadow: 0 4px 18px rgba(74,124,35,.45), inset 0 1px 0 rgba(255,255,255,.12);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.btn-cta:hover{
  background: var(--grad-cta-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 26px rgba(107,155,61,.6), 0 0 40px rgba(74,124,35,.3), inset 0 1px 0 rgba(255,255,255,.15);
}
/* Opacity-preserving urgency pulse — applied ONLY to the sale CTA
   (.cta-pulse). Never fades the button. */
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 4px 18px rgba(74,124,35,.45), inset 0 1px 0 rgba(255,255,255,.12); }
  50%{ box-shadow:0 4px 28px rgba(107,155,61,.65), 0 0 40px rgba(74,124,35,.3), inset 0 1px 0 rgba(255,255,255,.12); }
}
.cta-pulse{ animation: ctaPulse 2.4s ease-in-out infinite; }

/* Secondary = gold (fiat/card payments, activation) */
.btn-gold{
  background: var(--grad-gold-btn) !important;
  color:#1a1410 !important; font-weight:700;
  border:1px solid rgba(255,215,0,.35) !important;
  box-shadow: 0 4px 16px rgba(184,134,11,.4), inset 0 1px 0 rgba(255,215,0,.3);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.btn-gold:hover{
  background: linear-gradient(135deg,#ffd700,#daa520) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(218,165,32,.5), inset 0 1px 0 rgba(255,215,0,.35);
}

/* Tertiary ghost (non-featured plan select, nav FREE TEST) */
.btn-ghost-gold{
  border:1px solid rgba(202,138,4,.4) !important;
  background: rgba(218,165,32,.06) !important;
  color:#e8d9a8 !important;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.btn-ghost-gold:hover{
  border-color: rgba(218,165,32,.7) !important;
  background: rgba(218,165,32,.13) !important;
  box-shadow: 0 0 20px rgba(218,165,32,.15);
}

/* Mega BUY NOW aligns to the brand green ramp; pulse keeps opacity */
.buy-now-mega{ background: linear-gradient(135deg, var(--cta-hi) 0%, var(--cta-base) 55%, var(--cta-deep) 100%) !important; }
@keyframes megaPulse{
  0%,100%{ transform:scale(1); box-shadow:0 4px 20px rgba(92,138,47,.5); }
  50%{ transform:scale(1.03); box-shadow:0 8px 34px rgba(107,155,61,.7), 0 0 50px rgba(74,124,35,.35); }
}

/* Cloud sub-brand primary keeps blue, gains the elevation language */
.cloud-btn{ box-shadow: 0 4px 16px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.15); }

/* ---- 5. Gradient text + gold moments ---- */
/* Shared class = metal ramp only (no glow) so stat digits and section
   headings stay clean; the halo lives on .gradient-hero (h1 only). */
.gradient-text, .gradient-gold{
  background: var(--grad-gold-text);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.gradient-hero{
  background: var(--grad-gold-text);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter: drop-shadow(0 2px 20px rgba(218,165,32,.35));
}
.gold-rule{ height:1px; max-width:64rem; margin:0 auto; background: var(--grad-gold-rule); opacity:.55; }
.eyebrow{ font-size:.8rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.75rem; }
.eyebrow-blue{ color:var(--cloud-400); }

/* ---- 6. Section rhythm ---- */
.section-alt{
  background: linear-gradient(180deg, rgba(30,26,20,.65), rgba(20,18,16,.25));
  border-top:1px solid rgba(218,165,32,.08);
  border-bottom:1px solid rgba(255,255,255,.04);
}
#gallery{ position:relative; }
#gallery::before{
  content:''; position:absolute; top:0; left:0; right:0; height:560px; pointer-events:none;
  background: radial-gradient(640px 320px at 50% 200px, rgba(218,165,32,.14), transparent 70%);
}
#pricing{ background: radial-gradient(1100px 380px at 50% 0%, rgba(218,165,32,.07), transparent 60%), rgba(30,26,20,.45) !important; }
#faq{ background: linear-gradient(180deg, rgba(30,26,20,.5), rgba(20,18,16,.15)); }

/* ---- 7. Emphasis moments ---- */
/* Desktop featured plan — the page's single gold moment */
.plan-featured{
  border-color:#daa520 !important;
  background: linear-gradient(180deg, rgba(218,165,32,.10), rgba(90,64,51,.16) 40%, rgba(38,28,18,.55)) !important;
  box-shadow: var(--el-gold) !important;
  transform: scale(1.02);
}
.plan-featured:hover{ transform: scale(1.02) translateY(-4px); }

/* Cloud featured plan — blue twin */
.plan-popular{
  border-color: rgba(59,130,246,.6) !important;
  background: linear-gradient(160deg, rgba(59,130,246,.10), rgba(90,64,51,.20)) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,.3), 0 12px 40px -10px rgba(12,8,4,.6), 0 0 60px rgba(59,130,246,.22) !important;
  transform: scale(1.02);
}
.plan-popular:hover{ transform: scale(1.02) translateY(-4px); }

/* Sale countdown tiles — solid gold digits, no extra glow */
.count-tile{
  border:1px solid rgba(218,165,32,.3);
  box-shadow: var(--el-1), inset 0 1px 0 rgba(255,215,0,.08);
}
.count-tile .count-num{ color:#ffd700; }

/* FAQ open/hover states */
#faq details{ transition: border-color .25s, background .25s, box-shadow .25s; }
#faq details[open]{
  border-color: rgba(218,165,32,.35);
  background: rgba(90,64,51,.25);
  box-shadow: 0 8px 24px -14px rgba(12,8,4,.6);
}
#faq summary{ cursor:pointer; }
#faq summary:hover span{ color: var(--gold); }

/* Screenshot frames in the tab gallery: gold ring + directional shadow */
#gallery .glow{
  box-shadow: 0 0 0 1px rgba(218,165,32,.25), 0 16px 40px -12px rgba(12,8,4,.6), 0 0 60px rgba(218,165,32,.22);
}

/* ---- 8. Header stack warm-up (desktop ticker + servers banner) ---- */
.banner-label.latest{ background: linear-gradient(135deg,#daa520,#b8860b) !important; color:#1a1410 !important; }
.banner-label.coming{ background: linear-gradient(135deg,#5c8a2f,#3d6b1e) !important; color:#fff !important; }
.banner-item{ color:#cfc0a8 !important; }
.banner-item .date-tag{ color:#8a7a5f !important; }
.banner-item .version-tag{ background: rgba(218,165,32,.22) !important; border:1px solid rgba(218,165,32,.4); color:#ffd700 !important; box-shadow: var(--el-1); }
.servers-banner{ background: rgba(26,20,12,.92) !important; border-bottom:1px solid rgba(218,165,32,.25) !important; }
.servers-banner .server-item{ color:#b8a988 !important; }
.servers-banner .servers-title{ color:#8a7a5f !important; }

/* ---- 9. Scrollbar (fixes bare .custom-scrollbar class) ---- */
.custom-scrollbar::-webkit-scrollbar{ width:8px; height:8px; }
.custom-scrollbar::-webkit-scrollbar-track{ background: rgba(20,18,16,.6); border-radius:4px; }
.custom-scrollbar::-webkit-scrollbar-thumb{ background: rgba(218,165,32,.3); border-radius:4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover{ background: rgba(218,165,32,.5); }

/* ---- 10. Index landing specifics ---- */
.card-glow{ opacity:.35 !important; }
.card-hover:hover .card-glow{ opacity:1 !important; }
.particle{ background: rgba(218,165,32,.5) !important; }
/* Variant-aware badge pulse: blue by default, orange with .eb */
@keyframes pulse-badge{ 0%,100%{ box-shadow:0 0 0 0 rgba(59,130,246,.45);} 70%{ box-shadow:0 0 0 10px rgba(59,130,246,0);} }
@keyframes pulse-badge-orange{ 0%,100%{ box-shadow:0 0 0 0 rgba(249,115,22,.4);} 70%{ box-shadow:0 0 0 10px rgba(249,115,22,0);} }
.badge-pulse.eb{ animation-name: pulse-badge-orange; }

/* ---- 11. Warm form/utility helpers ---- */
.text-warm{ color: var(--text-mute); }
.text-warm-dim{ color: var(--text-dim); }
input[type=email], input[type=text], textarea, select{ box-shadow: var(--el-1); }

/* ---- 12. Reduced motion: kill DECORATIVE loops only ----
   Ticker/marquee bantlari ICERIK tasir (changelog + sunucu listesi) —
   dondurulursa icerik okunamaz hale gelir, o yuzden listede DEGILLER
   (hover'da zaten duraklarlar). Sadece susleme animasyonlari kapanir. */
@media (prefers-reduced-motion: reduce){
  .cta-pulse, .buy-now-mega, .buy-now-inner, .badge-pulse, .pulse-glow,
  .flag-wave, .flag-wave-sm, .particle, .float{ animation: none !important; }
}