/* ═══════════════════════════════════════════════════════════════════
   premium.css — ELEVATE KALİTE TASARIM SİSTEMİ (2026-10-08)
   Referans: "altın + koyu + ışıma" premium vitrin estetiği
   Bu dosya EN SON yüklenir → diğer tüm :root'ları EZER.
   TEK KAYNAK: tüm sayfalar bu sistemi kullanır.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── RENK — TEK PALET ─────────────────────────────────────────── */
  --p-bg:        #0a0c10;
  --p-bg-2:      #101419;
  --p-bg-3:      #161b22;
  --p-panel:     rgba(255,255,255,.028);
  --p-line:      rgba(227,184,115,.16);
  --p-line-soft: rgba(255,255,255,.07);

  --p-gold-1:    #f7e3bb;   /* ışık ucu */
  --p-gold:      #e3b873;   /* ana altın */
  --p-gold-2:    #c77a3c;   /* bakır */
  --p-gold-3:    #8c5a2b;   /* koyu uç */
  --p-ink:       #f5efe3;
  --p-muted:     #a89f8f;
  --p-dim:       #6f695e;

  /* ── GRADYANLAR ───────────────────────────────────────────────── */
  --p-grad-gold:  linear-gradient(135deg, var(--p-gold-1) 0%, var(--p-gold) 42%, var(--p-gold-2) 100%);
  --p-grad-text:  linear-gradient(178deg, #f9eacb 0%, #e3b873 40%, #c77a3c 72%, #8c5a2b 100%);
  --p-grad-panel: linear-gradient(165deg, rgba(227,184,115,.055), rgba(255,255,255,.012));
  --p-grad-hero:  radial-gradient(1200px 520px at 50% -12%, rgba(227,184,115,.14), transparent 62%),
                  radial-gradient(760px 380px at 12% 108%, rgba(199,122,60,.10), transparent 60%);

  /* ── IŞIMA (GLOW) ────────────────────────────────────────────── */
  --p-glow-gold:  0 0 40px rgba(227,184,115,.22), 0 0 90px rgba(227,184,115,.10);
  --p-glow-soft:  0 0 24px rgba(227,184,115,.14);
  --p-shadow:     0 24px 60px rgba(0,0,0,.55);
  --p-shadow-sm:  0 10px 28px rgba(0,0,0,.42);

  --p-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --p-display: "Cinzel", "Plus Jakarta Sans", Georgia, serif;
  --p-r: 16px;
  --p-r-sm: 11px;
  --p-max: 1180px;
}

/* ── TEMEL ──────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body.premium {
  background: var(--p-bg) !important;
  color: var(--p-ink) !important;
  font-family: var(--p-font) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.premium * { box-sizing: border-box; }
.p-wrap { max-width: var(--p-max); margin: 0 auto; padding: 0 22px; }
.p-section { padding: 86px 0; position: relative; }
.p-section--tight { padding: 58px 0; }

/* ── BAŞLIKLAR ──────────────────────────────────────────────────── */
.p-h1 {
  font-family: var(--p-display);
  font-size: clamp(30px, 6.4vw, 62px);
  line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 18px; font-weight: 700;
  background: var(--p-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--p-gold);
}
/* GÜVENCE: gradient desteklenmezse yazı GÖRÜNÜR kalsın */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .p-h1 { background: none !important; -webkit-text-fill-color: var(--p-gold) !important; }
}
.p-h2 {
  font-family: var(--p-display);
  font-size: clamp(23px, 3.6vw, 38px); line-height: 1.16;
  letter-spacing: -.015em; margin: 0 0 12px; font-weight: 700;
  color: var(--p-ink);
}
.p-h3 { font-size: 17px; font-weight: 700; margin: 0 0 7px; color: var(--p-ink); }
.p-lead {
  font-size: clamp(14.5px, 1.7vw, 18px); line-height: 1.68;
  color: var(--p-muted); max-width: 62ch; margin: 0 0 22px;
}
.p-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--p-gold);
  border: 1px solid var(--p-line); border-radius: 999px;
  padding: 7px 15px; margin-bottom: 20px;
  background: var(--p-grad-panel);
}
.p-kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--p-gold); box-shadow: 0 0 10px var(--p-gold);
}

/* ── HERO ───────────────────────────────────────────────────────── */
.p-hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 9vw, 116px) 0 clamp(48px, 7vw, 88px);
  background: var(--p-grad-hero), var(--p-bg);
  border-bottom: 1px solid var(--p-line-soft);
}
.p-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 240px at 82% 8%, rgba(227,184,115,.11), transparent 66%),
    radial-gradient(420px 200px at 8% 92%, rgba(199,122,60,.09), transparent 68%);
}
.p-hero__ic { position: relative; z-index: 2; }
/* ═══ 2026-10-08 · KULLANICI: "Üye Ol / Giriş Yap kısmının ALTINDAKİ
   logoyu ortalayalım" ═══════════════════════════════════════════════
   ÖLÇÜM (playwright · 390px): logo merkez=83px, kap merkez=195px
     → 112px SOLA yapışıktı (.logo-emblem width:132px + display:block)
   margin-inline:auto → kendi genişliği içinde ORTALANIR.
   Kapsam YALNIZ .p-hero__logo: menü/footer logoları (.brand-emblem)
   etkilenmez. */
.p-hero__logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
/* 2026-10-08 KALDIRILDI (kullanıcı: "slogan + butonlar + tablolar logo GİBİ
   sayfanın ORTASINDA olmalı"). Eski kural:
     `.p-hero__ic > .p-hero__logo + .p-kicker { display: block; }`
   `.p-kicker` temel tasarımı bir ROZETTİR (inline-flex · border-radius:999px
   · padding 7px 15px · ::before nokta). `display:block` rozeti TAM GENİŞLİK
   bir şeride çeviriyordu; ortalanınca "çizgi + etiket" gibi görünüyordu.
   Logo zaten `display:block` (yukarıda) → rozet kendiliğinden alt satıra
   geçer, bu satıra GEREK YOKTU. Artık rozet kendi genişliğinde kalır ve
   ana sayfa kahramanında ortalanır (.p-hero__ic--orta · vision.css).
   Kapsam: `.p-hero__logo` YALNIZ templates/coming_soon.html'de var. */

.p-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ── BUTONLAR ───────────────────────────────────────────────────── */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--p-font); font-size: 15px; font-weight: 700;
  padding: 14px 26px; border-radius: var(--p-r-sm); border: 0;
  background: var(--p-grad-gold); color: #241a08 !important;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--p-glow-soft);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, filter .18s;
}
.p-btn:hover { transform: translateY(-2px); box-shadow: var(--p-glow-gold); filter: brightness(1.06); }
.p-btn:active { transform: translateY(0); }
.p-btn:focus-visible { outline: 2px solid var(--p-gold); outline-offset: 3px; }
.p-btn--ghost {
  background: var(--p-grad-panel); color: var(--p-ink) !important;
  border: 1px solid var(--p-line); box-shadow: none;
}
.p-btn--ghost:hover { border-color: var(--p-gold); box-shadow: var(--p-glow-soft); }
.p-btn--lg { padding: 16px 32px; font-size: 16px; }

/* ── AMBİYANS IŞIĞI ─────────────────────────────────────────────── */
.p-orb {
  position: absolute; border-radius: 50%; filter: blur(72px);
  pointer-events: none; opacity: .5; z-index: 1;
}
.p-orb--1 { width: 340px; height: 340px; background: rgba(227,184,115,.20); top: -70px; right: -60px; }
.p-orb--2 { width: 260px; height: 260px; background: rgba(199,122,60,.16); bottom: -90px; left: -70px; }

/* ── IZGARA + KART ──────────────────────────────────────────────── */
.p-grid { display: grid; gap: 18px; }
.p-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.p-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.p-grid--4 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

/* ── 10 HAT IZGARASI · 2026-10-08 ───────────────────────────────────────────
   KULLANICI (ekran görüntüsü): "burayı da görünüm anlamında düzenleyip
   netleştirelim." ÖLÇÜM (playwright · gerçek Chrome · `p-grid--3` ile):
     1134px → 4 sütun · satırlar [4,1] ❌   (5. kart TEK BAŞINA alt satırda)
     1440px → 4 sütun · satırlar [4,1] ❌
   ÇÖZÜM: 6 izli ızgara + her kart `span 2` → masaüstü **3 sütun** (üstteki
     kurucu üyelik ızgarasıyla AYNI ritim).
   ⚠️ SON-SATIR ORTALAMASI **KART SAYISINA BAĞLI** (`:nth-last-child` kilidi):
       · 6 kart (Akademi eklendi) → düz **3×2** (kaydırma YOK)
       · 5 kart                   → **3+2 ORTALI**
     Sayı değişirse kural kendiliğinden uyum sağlar (elle bakım gerekmez).
   ⚠️ YALNIZ bu bölüm: `.p-grid--hat` (diğer sayfalardaki --3 dokunulmaz). */
.p-grid--hat { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.p-grid--hat > .p-card { grid-column: span 2; display: flex; flex-direction: column; }
/* Kart içi CTA (Akademi ön kaydı) — satır içi kartlarda ALTTA HİZALI dursun. */
.p-card__cta { margin-top: auto; padding-top: 14px; margin-bottom: 0; }
.p-card__cta .p-btn { padding: 9px 16px; font-size: 13px; }
.p-grid--hat > .p-card:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.p-grid--hat > .p-card:nth-child(5):nth-last-child(1) { grid-column: 4 / span 2; }
@media (max-width: 899px) {
  .p-grid--hat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-grid--hat > .p-card,
  .p-grid--hat > .p-card:nth-child(4):nth-last-child(2) { grid-column: auto; }
  .p-grid--hat > .p-card:nth-child(5):nth-last-child(1) {
    grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% - 9px));
  }
}
@media (max-width: 640px) {
  .p-grid--hat { grid-template-columns: 1fr; }
  .p-grid--hat > .p-card:nth-child(5):nth-last-child(1) {
    width: 100%; justify-self: stretch;
  }
}

.p-card {
  position: relative; overflow: hidden;
  background: var(--p-grad-panel), var(--p-bg-2);
  border: 1px solid var(--p-line-soft);
  border-radius: var(--p-r); padding: 24px;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s, box-shadow .2s;
}
.p-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,184,115,.55), transparent);
  opacity: 0; transition: opacity .2s;
}
.p-card:hover {
  transform: translateY(-4px); border-color: var(--p-line);
  box-shadow: var(--p-shadow-sm), var(--p-glow-soft);
}
.p-card:hover::before { opacity: 1; }
.p-card__ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--p-grad-panel); border: 1px solid var(--p-line);
  color: var(--p-gold); font-size: 21px; margin-bottom: 15px;
}
.p-card__t { font-size: 16.5px; font-weight: 700; margin: 0 0 7px; color: var(--p-ink); }
.p-card__d { font-size: 14px; line-height: 1.62; color: var(--p-muted); margin: 0; }

/* ── İSTATİSTİK ─────────────────────────────────────────────────── */
.p-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--p-line-soft); border: 1px solid var(--p-line-soft);
  border-radius: var(--p-r); overflow: hidden; }
.p-stat { background: var(--p-bg-2); padding: 22px 16px; text-align: center;
  /* 2026-10-08: ikon + sayı + etiket + ALT SATIR ("daha cezbedici" istek) */
  display: flex; flex-direction: column; align-items: center; }
.p-stat__ic { font-size: 20px; line-height: 1; margin-bottom: 9px; opacity: .92; }
.p-stat__s { font-size: 11.5px; line-height: 1.4; color: var(--p-muted);
  margin-top: 7px; max-width: 22ch; }
.p-stat__n {
  font-family: var(--p-display); font-size: clamp(26px, 4.2vw, 40px); font-weight: 700;
  line-height: 1; margin-bottom: 7px;
  background: var(--p-grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--p-gold);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .p-stat__n { background: none !important; -webkit-text-fill-color: var(--p-gold) !important; }
}
.p-stat__l { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-dim); }

/* ── BÖLÜCÜ ─────────────────────────────────────────────────────── */
.p-div { height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--p-gold-3) 25%, rgba(227,184,115,.6) 50%, var(--p-gold-3) 75%, transparent);
  margin: 0; }

/* ── CTA ŞERİDİ ─────────────────────────────────────────────────── */
.p-cta {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(44px, 7vw, 76px) 26px; border-radius: 20px;
  background: var(--p-grad-panel), var(--p-bg-2);
  border: 1px solid var(--p-line); box-shadow: var(--p-shadow);
}
.p-cta::before {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  background: radial-gradient(560px 220px at 50% 0%, rgba(227,184,115,.16), transparent 68%);
}
.p-cta > * { position: relative; z-index: 2; }
.p-cta__b { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ── LİSTE ──────────────────────────────────────────────────────── */
.p-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.p-list li { position: relative; padding-left: 27px; font-size: 14.5px; line-height: 1.6; color: var(--p-muted); }
.p-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--p-gold); font-weight: 700; font-size: 15px;
}

/* ── MOBİL ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .p-section { padding: 58px 0; }
  .p-hero { padding: 44px 0 40px; }
  .p-wrap { padding: 0 17px; }
  .p-card { padding: 19px; }
  .p-btn { width: 100%; }
  .p-hero__cta .p-btn, .p-cta__b .p-btn { width: 100%; }
  .p-orb { filter: blur(56px); opacity: .38; }
  .p-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .p-h1 { font-size: 28px; }
  .p-h2 { font-size: 21px; }
  .p-stat { padding: 18px 12px; }
}

/* ── HAREKET AZALTMA ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .p-card, .p-btn { transition: none !important; }
  .p-card:hover, .p-btn:hover { transform: none !important; }
}

/* ═══ 2026-10-08 · KURUCU ÜYELİK KADEME MERDİVENİ ═══════════════════════
   KULLANICI: "üye sıralamasına göre kampanya indirimlerinden faydalanabilsin"
   KAYNAK: kurucu_uyelik.py KADEMELER (1-50 / 51-100 / 101-150)

   2026-10-08 DÜZEN (kullanıcı: "görünüm çok dağınık · paket ve fiyatlar daha
   düzenli yayılsın") — ÖLÇÜMLE:
     · ESKİ `repeat(auto-fit,minmax(180px,1fr))` → 1440px'te **5+1** kart
       (dengesiz satır) ve `.kademe__not` / `.kademe__kalan` de birer IZGARA
       HÜCRESİ oluyordu → uzun metinler 208px'lik dar kutulara sıkışıyordu.
     · YENİ: masaüstü **3 sütun** (6 kart = 2 TAM satır) · ≤1024px 2 · ≤640px 1
     · not + sayaç `grid-column:1/-1` ile TAM SATIR (artık hücre değil)
     · `.kademe__fiyat{margin-top:auto}` → fiyatlar satır içinde HİZALI */
.kademe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px 14px;margin-top:22px;text-align:left}
.kademe__kart{position:relative;display:flex;flex-direction:column;
  padding:16px 14px;border-radius:14px;
  border:1px solid rgba(227,184,115,.28);background:rgba(227,184,115,.05)}
.kademe__kart--ilk{border-color:rgba(227,184,115,.6);background:rgba(227,184,115,.11);
  box-shadow:0 0 0 1px rgba(227,184,115,.2) inset}
.kademe__rozet{position:absolute;top:-9px;right:10px;font-size:10px;letter-spacing:.5px;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;
  background:linear-gradient(135deg,#f7e3bb,#c77a3c);color:#241a0c;font-weight:700}
.kademe__ad{font-size:13px;color:#e8dfd0;font-weight:600;margin:0 0 4px}
.kademe__sira{font-size:11.5px;color:#c9a86a;margin:0 0 8px}
.kademe__fiyat{font-size:19px;font-weight:800;color:#e3b873;margin-top:auto;
  font-variant-numeric:tabular-nums}
.kademe__eski{font-size:12px;color:#8a8478;text-decoration:line-through;margin-left:6px}
.kademe__ind{font-size:11px;color:#7fd18a;margin-top:4px}
.kademe__not{grid-column:1/-1;margin:0;font-size:12px;color:#a9a294;line-height:1.6;
  max-width:78ch}
.kademe__kalan{grid-column:1/-1;margin:0;text-align:center;font-size:13px;
  font-weight:700;letter-spacing:.5px;color:#e3b873}
.kademe__yuk{grid-column:1/-1;display:block;font-size:12.5px;color:#a9a294;
  text-align:center;padding:12px}
@media (max-width:1024px){ .kademe{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .kademe{grid-template-columns:1fr;gap:22px 0} }