/* ====== Temel Ayarlar / Renkler ====== */
:root{
  --bg:#0d1117;
  --bg-2:#111827;
  --text:#e9edf1;
  --soft:#cfd6de;
  --soft-strong:#d8dee4;
  --accent:#f5c542;
  --accent-2:#d4a51f;
  --card:#1a2130;
  --border:rgba(255,255,255,.07);
  --nav-h:72px; /* JS ile senkronlanıyor */
}
html,body{
  margin:0; padding:0;
  scroll-behavior:smooth;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
img{max-width:100%;display:block}
.text-soft{color:var(--soft)}
.text-soft-strong{color:var(--soft-strong)}
.fw-700{font-weight:700}.fw-800{font-weight:800}

/* ====== Navbar ====== */
.custom-nav{
  background:rgba(13,17,23,.85);
  backdrop-filter:saturate(140%) blur(6px);
  padding:12px 0;
  z-index:10000;
  transition: background .2s ease, box-shadow .2s ease;
}
.custom-nav.scrolled{
  background:rgba(13,17,23,.98);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.navbar-brand{color:var(--accent) !important}
.nav-link{color:#d6d9de !important; position:relative; margin:0 10px}
.nav-link::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transition:background .18s ease}
.nav-link:hover{color:#fff !important}
.nav-link:hover::after{background:var(--accent)}
.btn-login{border:1px solid var(--accent); border-radius:8px; padding:6px 14px}
.btn-login:hover{background:var(--accent); color:#000 !important}

/* ====== Hero ====== */
.hero{padding-top:var(--nav-h); padding-bottom:0; position:relative}
.hero.hero-lg{
  min-height: calc(100svh - var(--nav-h));
}
@supports (height: 100dvh){
  .hero.hero-lg{ min-height: calc(100dvh - var(--nav-h)); }
}
@supports not (height: 100svh){
  .hero.hero-lg{ min-height: calc(100vh - var(--nav-h)); }
}
.hero{
  background:radial-gradient(600px 300px at 12% 18%, rgba(245,197,66,.12), transparent 60%);
}
.hero-text .lead{color:var(--soft)}
.btn-purchase{
  background:var(--accent); color:#000; border:none; border-radius:10px;
  padding:12px 22px; font-weight:700;
  box-shadow:0 6px 20px rgba(245,197,66,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-purchase:hover{background:var(--accent-2); transform:translateY(-1px) scale(1.03); box-shadow:0 10px 30px rgba(245,197,66,.28)}

/* Sağ görsel (yamuk + mask) */
.hero-image img{
  border-radius:14px;
  transform:skewX(-7deg) translateX(60px) scale(1.12);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  opacity:.96;
  -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to left, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat; -webkit-mask-size:cover;
          mask-repeat:no-repeat;           mask-size:cover;
}
@media (max-width: 991.98px){
  .hero-image img{transform:none; -webkit-mask-image:none; mask-image:none; margin-top:28px}
}

/* Canlı durum pilli */
.status-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--soft-strong); font-weight:600;
}
.status-pill .dot{
  width:8px; height:8px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* Özellik rozetleri */
.hero-badges .badge-chip{
  display:flex; align-items:center; gap:.45rem;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--soft-strong); font-weight:600;
  transition:background .15s ease, transform .15s ease;
}
.hero-badges .badge-chip:hover{background:rgba(255,255,255,.08); transform:translateY(-1px)}

/* Aşağı kaydır ipucu */
.scroll-hint{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:18px; text-align:center; color:var(--soft-strong);
  opacity:.8; font-size:.9rem;
}
.scroll-hint::after{
  content:""; display:block; width:14px; height:22px; margin:6px auto 0;
  border:2px solid var(--soft-strong); border-radius:10px; position:relative;
}
.scroll-hint::before{
  content:""; position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  width:4px; height:4px; background:var(--soft-strong); border-radius:50%;
  animation:wheel 1.8s infinite;
}
@keyframes wheel{
  0%{ transform:translate(-50%,0) }
  50%{ transform:translate(-50%,6px) }
  100%{ transform:translate(-50%,0) }
}

/* ====== Kart / Şerit ====== */
.card-clean{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.step-emoji{font-size:28px; margin-bottom:8px}

/* Eşit yükseklik fiyat kartları */
.pricing-card{display:flex; flex-direction:column; width:100%}
.plan-featured{outline:2px solid var(--accent)}

/* Accordion (kontrast) */
.accordion.card-clean{overflow:hidden}
.accordion-button{background:var(--card); color:var(--text)}
.accordion-button:not(.collapsed){background:var(--card); color:#fff}
.accordion-button:focus{box-shadow:none}
.accordion-body{background:var(--card); color:var(--soft-strong)}
.accordion-item{border-color:var(--border)}

/* Bölüm başlıkları scroll-offset */
section[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* ====== Yardım / Discord CTA ====== */
.py-6{padding-top:4.5rem;padding-bottom:4.5rem}
.help-section{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.help-section::before{
  content:""; position:absolute; inset:0; opacity:.08; pointer-events:none;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.18) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.18) 32px);
  background-size: 32px 32px;
  mask-image: radial-gradient(1200px 500px at 50% 50%, #000 70%, transparent 100%);
}
.help-card{position: relative; overflow: hidden;}
.help-image{
  width:100%; max-width:220px; display:block;
  transform: translateY(10px);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.45));
  margin-left:auto;
}
.btn-discord{
  background:#5865F2; color:#fff; border:none; border-radius:10px;
  padding:12px 20px; font-weight:700;
  box-shadow:0 10px 24px rgba(88,101,242,.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-discord:hover{background:#4752C4; transform: translateY(-1px); box-shadow:0 14px 36px rgba(88,101,242,.36)}

/* Footer */
footer{background:rgba(255,255,255,.02)}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* ====== Reveal Animasyonları ====== */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}
:root{
  /* ... mevcut değişkenler ... */
  --nav-h:72px;        /* JS ile senkronlanıyor */
  --hero-extra:56px;   /* alt tarafta peeki önlemek için küçük buffer */
}

/* Hero tam ekran + buffer */
.hero{ padding-top:var(--nav-h); padding-bottom:0; position:relative; }
.hero.hero-lg{
  min-height: calc(100svh - var(--nav-h) + var(--hero-extra));
}
@supports (height: 100dvh){
  .hero.hero-lg{ min-height: calc(100dvh - var(--nav-h) + var(--hero-extra)); }
}
@supports not (height: 100svh){
  .hero.hero-lg{ min-height: calc(100vh - var(--nav-h) + var(--hero-extra)); }
}
/* ---------- Auth page ---------- */
/* Login içeriği: full-screen olmasın; alt şerit yukarı gelsin */
.auth-wrap{
  /* min-height: calc(100svh - var(--nav-h));  <-- BUNU KALDIR / YORUM SATIRI YAP */
  min-height: unset;                      /* veya 0 / auto / unset kullan */
  padding-top: calc(var(--nav-h) + 24px);
  padding-bottom: 24px;
}

/* İstersen küçük ekranda yine tam ekran kalsın: */
@media (max-width: 991.98px){
  .auth-wrap{
    min-height: calc(100svh - var(--nav-h));
  }
}

/* Alt şeritle arayı biraz daraltmak için */
.login-extras{ margin-top: 8px; }

.auth-blurb h1{ letter-spacing:.2px }
.auth-card{ max-width: 520px; margin-left: auto; }

.form-control{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text);
}
.form-control:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(245,197,66,.15);
}

.password-wrap{ position:relative }
.toggle-pass{
  position:absolute; top:50%; right:12px; transform:translateY(-50%);
  border:0; background:transparent; color:var(--soft-strong); opacity:.8;
}
.toggle-pass:hover{ opacity:1 }

.btn-auth{
  background: var(--accent); color:#000; border:none; border-radius:10px;
  box-shadow:0 6px 20px rgba(245,197,66,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-auth:hover{ background: var(--accent-2); transform: translateY(-1px); box-shadow:0 10px 30px rgba(245,197,66,.28) }

.alert-danger-soft{
  background: rgba(220,53,69,.07);
  border: 1px solid rgba(220,53,69,.25);
  color: #ffb6bd;
  border-radius: 10px;
}

/* mobil düzen */
@media (max-width: 991.98px){
  .auth-card{ margin: 0 auto; }
}
/* Login sayfasında alt logo/görseli gizle */
.auth-wrap .help-image { display: none !important; }
/* ---- Login alt şerit (glass) ---- */
.login-extras{ padding:24px 0 12px; }
.glass-row{ margin-top:8px; }

.glass-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
  backdrop-filter:saturate(120%) blur(6px);
}
.glass-card h5{ font-weight:800; margin-bottom:.5rem; }

/* rozetler */
.chip-list{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0 0 .5rem; }
.chip{
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  color:var(--soft-strong); font-weight:600;
}

/* uptime bar */
.uptime-bar{ height:8px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.uptime-bar .progress-bar{ background:linear-gradient(90deg,#22c55e,#16a34a); }

/* changelog */
.changelog{ list-style:none; padding:0; margin:0; }
.changelog .date{
  display:inline-block; min-width:52px; padding:2px 8px;
  border-radius:8px; background:rgba(255,255,255,.06); border:1px solid var(--border);
}
/* Row içindeki her kolon kartı esnetsin */
.glass-row > [class*="col-"]{
  display:flex;                /* kolonları flex yap */
}

/* Kart tam yüksekliğe yayılsın */
.glass-row .glass-card{
  width:100%;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* (İsteğe bağlı) kart içindeki alt metni alta sabitlemek için */
.glass-card .push-bottom{
  margin-top:auto;
}
body > br, body > font, body > b {
  position: relative !important;
  z-index: 99999 !important;
  display: block !important;
  background: #ff5555 !important;
  color: #fff !important;
  padding: 10px !important;
  font-size: 14px !important;
}
body {
  background:#0f1621;
  color:#dfebf5;
  font-family:'Inter', sans-serif;
}

.page-wrap {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:24px;
}
@media(max-width:991.98px){
  .page-wrap{display:block}
}

.app-sidebar {
  background:#162131;
  border-radius:14px;
  padding:20px;
}
.app-sidebar .nav-link {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  color:#cfd9e5;
  text-decoration:none;
}
.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover {
  background:#1f2a3d;
  color:#fff;
}

.btn-auth {
  background:#ffcd32;
  color:#111;
  border:none;
  border-radius:10px;
  padding:.575rem 1rem;
  font-weight:700;
}
.card-clean {
  background:#162131;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
}