/* ==========================================================================
   Birlik — Tasarım Sistemi (auth/onboarding yüzeyleri)
   Tokenlar + bileşenler. Açık/koyu tema, mera-yeşili kimlik.
   ========================================================================== */

:root {
  --ground:#F1F4EC; --surface:#FFFFFF; --surface-2:#FAFBF7; --fg:#16231C; --fg-muted:#566A5D;
  --fg-faint:#7C8D82; --border:#E0E6DB; --border-strong:#CBD4C4; --primary:#1E6B43; --primary-hover:#185939;
  --primary-contrast:#FFFFFF; --accent:#B0761C; --ring:rgba(30,107,67,.30); --success:#2E7D46;
  --glass-bg:rgba(255,255,255,.82); --glass-border:rgba(255,255,255,.55); --glass-input:rgba(255,255,255,.72);
  --card-bg:rgba(255,255,255,.90); --card-border:rgba(255,255,255,.6);
  --radius:16px; --radius-sm:10px;
  --font:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark){ :root{
  --ground:#0E1512; --surface:#16201B; --surface-2:#1B2721; --fg:#E9F0EA; --fg-muted:#9DB0A2; --fg-faint:#7C9184;
  --border:#263229; --border-strong:#33443A; --primary:#52B67D; --primary-hover:#61C389; --primary-contrast:#07120C;
  --accent:#D3A052; --ring:rgba(82,182,125,.38); --success:#52B67D;
  --glass-bg:rgba(16,24,20,.66); --glass-border:rgba(255,255,255,.10); --glass-input:rgba(255,255,255,.06);
  --card-bg:rgba(18,26,22,.86); --card-border:rgba(255,255,255,.10); } }
:root[data-theme="light"]{ --ground:#F1F4EC;--surface:#FFFFFF;--surface-2:#FAFBF7;--fg:#16231C;--fg-muted:#566A5D;
  --fg-faint:#7C8D82;--border:#E0E6DB;--border-strong:#CBD4C4;--primary:#1E6B43;--primary-hover:#185939;
  --primary-contrast:#FFFFFF;--accent:#B0761C;--ring:rgba(30,107,67,.30);--success:#2E7D46;
  --glass-bg:rgba(255,255,255,.82);--glass-border:rgba(255,255,255,.55);--glass-input:rgba(255,255,255,.72);
  --card-bg:rgba(255,255,255,.90);--card-border:rgba(255,255,255,.6); }
:root[data-theme="dark"]{ --ground:#0E1512;--surface:#16201B;--surface-2:#1B2721;--fg:#E9F0EA;--fg-muted:#9DB0A2;
  --fg-faint:#7C9184;--border:#263229;--border-strong:#33443A;--primary:#52B67D;--primary-hover:#61C389;
  --primary-contrast:#07120C;--accent:#D3A052;--ring:rgba(82,182,125,.38);--success:#52B67D;
  --glass-bg:rgba(16,24,20,.66);--glass-border:rgba(255,255,255,.10);--glass-input:rgba(255,255,255,.06);
  --card-bg:rgba(18,26,22,.86);--card-border:rgba(255,255,255,.10); }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--font); color:var(--fg); background:var(--ground);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; }

/* ---- Video sahnesi ---- */
.stage{ position:fixed; inset:0; overflow:hidden; z-index:0; background:#0c231a; }
.stage .sky{ position:absolute; inset:0; background:linear-gradient(180deg,#7fa9c9,#86a95f 60%,#35602f); }
.stage .bgvid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stage .grain{ position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:16px 16px; }
.stage .vin{ position:absolute; inset:0;
  background:radial-gradient(120% 90% at 60% 40%, transparent 40%, rgba(6,22,14,.5) 100%); }
.stage .scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,22,14,.82), rgba(7,22,14,.72)); }

/* ---- Tema düğmesi ---- */
.theme-toggle{ position:fixed; top:16px; right:16px; z-index:10; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.14); color:#EAF3EC; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(6px); }
.theme-toggle:hover{ background:rgba(255,255,255,.22); }
.theme-toggle svg{ width:19px; height:19px; }

/* Auth ekranında siteye dönüş */
.site-back{ position:fixed; top:16px; right:16px; z-index:12; display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:#EAF3EC; text-decoration:none;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); padding:9px 14px; border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .15s; }
.site-back:hover{ background:rgba(255,255,255,.22); }
.site-back svg{ width:16px; height:16px; }
@media(max-width:600px){ .site-back{ top:12px; right:12px; padding:8px 12px; font-size:12.5px; } }

/* ---- İki sütun (giriş/kayıt) ---- */
.auth{ position:relative; z-index:1; min-height:100dvh; display:grid; grid-template-columns:1.1fr 460px; }
.auth.wide{ grid-template-columns:1fr 500px; }
@media (max-width:960px){ .auth,.auth.wide{ grid-template-columns:1fr; } }

.brand{ position:relative; padding:52px 56px; display:flex; flex-direction:column; color:#EAF3EC;
  background:linear-gradient(105deg, rgba(8,28,17,.74) 0%, rgba(8,28,17,.42) 48%, rgba(8,28,17,.08) 100%); }
@media (max-width:960px){ .brand{ padding:38px 26px 26px;
  background:linear-gradient(180deg, rgba(8,28,17,.74), rgba(8,28,17,.32)); } }
.brand-top{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.auth-logo{ height:34px; width:auto; display:block; }
.logo-badge{ width:46px;height:46px;border-radius:12px;flex:none;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; backdrop-filter:blur(4px); }
.logo-badge.sm{ width:40px;height:40px;border-radius:11px; }
.wordmark{ display:flex; flex-direction:column; line-height:1.05; }
.wordmark b{ font-size:22px; font-weight:700; letter-spacing:-.01em; }
.wordmark span{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#B9D3C2; margin-top:3px; }
.wordmark.sm b{ font-size:18px; } .wordmark.sm span{ font-size:10px; }

.brand-mid{ margin-top:auto; margin-bottom:auto; padding:34px 0; max-width:30ch; }
.brand-mid h2{ font-size:clamp(28px,3.4vw,42px); line-height:1.07; letter-spacing:-.02em; margin:0 0 14px;
  text-wrap:balance; font-weight:700; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.brand-mid p{ margin:0; color:#D3E4D6; font-size:15.5px; line-height:1.6; text-shadow:0 1px 12px rgba(0,0,0,.3); max-width:34ch; }
.features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.features li{ display:flex; align-items:center; gap:12px; font-size:14.5px; text-shadow:0 1px 10px rgba(0,0,0,.3); }
.feat-ic{ width:30px;height:30px;border-radius:8px;flex:none;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24); display:grid; place-items:center; backdrop-filter:blur(4px); }
.feat-ic svg{ width:16px;height:16px; }
@media (max-width:960px){ .features{ display:none; } .brand-mid{ padding:18px 0; } }

/* ---- Form paneli (cam) ---- */
.form-side{ position:relative; display:flex; align-items:center; justify-content:center; padding:36px 26px;
  background:var(--glass-bg); backdrop-filter:blur(18px) saturate(1.05); -webkit-backdrop-filter:blur(18px) saturate(1.05);
  border-left:1px solid var(--glass-border); overflow-y:auto; }
@media (max-width:960px){ .form-side{ border-left:none; border-top:1px solid var(--glass-border); } }
.card{ width:100%; max-width:360px; }
.card.lg{ max-width:392px; }

.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.card h1{ font-size:27px; letter-spacing:-.02em; margin:0 0 6px; font-weight:700; }
.card .lead{ margin:0 0 26px; color:var(--fg-muted); font-size:14.5px; }

form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:600; }
.field label .opt{ color:var(--fg-faint); font-weight:400; }
.input-shell{ position:relative; display:flex; align-items:center; }
.field input{ width:100%; height:47px; padding:0 14px; font-size:16px; font-family:inherit; color:var(--fg);
  background:var(--glass-input); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  transition:border-color .15s, box-shadow .15s; }
.field input::placeholder{ color:var(--fg-faint); }
.field input:hover{ border-color:var(--fg-faint); }
.field input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--ring); background:var(--surface); }
.input-shell.has-btn input{ padding-right:46px; }
.toggle{ position:absolute; right:6px; width:36px; height:36px; border:none; background:transparent; color:var(--fg-faint);
  cursor:pointer; border-radius:8px; display:grid; place-items:center; }
.toggle:hover{ color:var(--fg-muted); background:rgba(0,0,0,.05); } .toggle svg{ width:19px;height:19px; }
.hint{ font-size:12px; color:var(--fg-faint); }

.row{ display:flex; align-items:center; justify-content:space-between; margin-top:-2px; }
.check{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--fg-muted); cursor:pointer; user-select:none; }
.check input{ width:18px; height:18px; accent-color:var(--primary); cursor:pointer; }
.link{ color:var(--primary); text-decoration:none; font-weight:600; font-size:13.5px; }
.link:hover{ text-decoration:underline; }

.consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--fg-muted); line-height:1.5; }
.consent input{ width:18px; height:18px; margin-top:1px; accent-color:var(--primary); flex:none; cursor:pointer; }
.consent a{ color:var(--primary); font-weight:600; text-decoration:none; } .consent a:hover{ text-decoration:underline; }

.btn{ height:48px; border:none; border-radius:var(--radius-sm); cursor:pointer; background:var(--primary);
  color:var(--primary-contrast); font-family:inherit; font-size:15px; font-weight:600; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:background .15s, transform .05s;
  box-shadow:0 8px 20px -8px rgba(20,80,45,.5); }
.btn:hover{ background:var(--primary-hover); } .btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring); } .btn svg{ width:17px;height:17px; }

.auth-err{ font-size:13.5px; color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent); border:1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius:10px; padding:11px 14px; }
.auth-ok{ font-size:13.5px; color:#1E6B43; background:color-mix(in srgb, #1E6B43 12%, transparent); border:1px solid color-mix(in srgb, #1E6B43 32%, transparent); border-radius:10px; padding:11px 14px; margin-bottom:6px; }
.sep{ display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--fg-faint); font-size:12.5px; }
.sep::before,.sep::after{ content:""; height:1px; background:var(--border); flex:1; }

.signup, .signin{ text-align:center; font-size:14px; color:var(--fg-muted); }
.signup a, .signin a{ color:var(--primary); font-weight:600; text-decoration:none; }
.signup a:hover, .signin a:hover{ text-decoration:underline; }
.free-pill{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:7px 12px; border-radius:999px;
  font-size:12.5px; font-weight:500; color:var(--success);
  background:color-mix(in srgb, var(--success) 14%, transparent); border:1px solid color-mix(in srgb, var(--success) 32%, transparent); }
.free-pill svg{ width:14px; height:14px; }
.foot{ margin-top:30px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.foot a{ color:var(--fg-faint); font-size:12.5px; text-decoration:none; }
.foot a:hover{ color:var(--fg-muted); text-decoration:underline; }

/* ---- Adım göstergesi ---- */
.steps{ display:flex; align-items:center; margin:0 0 26px; }
.steps.light .lbl{ color:#CFE3D5; } .steps.light .dot{ background:rgba(255,255,255,.14); color:#CFE3D5; border-color:rgba(255,255,255,.3); }
.step{ display:flex; align-items:center; gap:8px; }
.step .dot{ width:26px;height:26px;border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:700;
  background:var(--surface-2); color:var(--fg-faint); border:1.5px solid var(--border-strong); }
.step .dot svg{ width:12px; height:12px; }
.step.active .dot{ background:var(--primary); color:#fff; border-color:var(--primary); }
.step.done .dot{ background:#EAF3EC; color:var(--primary); border-color:#EAF3EC; }
.step .lbl{ font-size:12.5px; font-weight:600; color:var(--fg-faint); }
.step.active .lbl{ color:var(--fg); } .steps.light .step.active .lbl{ color:#fff; }
.step .bar{ width:26px; height:2px; background:var(--border-strong); margin:0 8px; border-radius:2px; }
.steps.light .bar{ background:rgba(255,255,255,.28); }
@media (max-width:640px){ .steps.light .lbl{ display:none; } }

/* ---- Ortalanmış düzen (paket) ---- */
.wrap{ position:relative; z-index:1; min-height:100dvh; display:flex; flex-direction:column; align-items:center; padding:30px 22px 44px; }
.topbar{ width:100%; max-width:1120px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.head{ text-align:center; color:#EAF3EC; margin:34px 0 6px; }
.head h1{ font-size:clamp(26px,3.4vw,36px); letter-spacing:-.02em; margin:0 0 8px; font-weight:700; text-shadow:0 2px 20px rgba(0,0,0,.4); text-wrap:balance; }
.head p{ margin:0; color:#CFE3D5; font-size:15px; text-shadow:0 1px 10px rgba(0,0,0,.35); }

.billing{ display:flex; align-items:center; gap:12px; margin:22px 0 26px; color:#DDEBDF; font-size:14px; flex-wrap:wrap; justify-content:center; }
.billing .seg{ display:flex; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:4px; backdrop-filter:blur(4px); }
.billing .seg button{ border:none; background:transparent; color:#DDEBDF; font-family:inherit; font-size:13.5px; font-weight:600; padding:7px 16px; border-radius:999px; cursor:pointer; }
.billing .seg button.on{ background:#EAF3EC; color:var(--primary); }
.billing .save{ font-size:12.5px; color:#EAF3EC; background:rgba(46,125,70,.55); border:1px solid rgba(255,255,255,.25); padding:4px 10px; border-radius:999px; font-weight:600; }

.plans{ width:100%; max-width:1120px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:940px){ .plans{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .plans{ grid-template-columns:1fr; } }
.plan{ position:relative; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:24px 20px; display:flex; flex-direction:column; backdrop-filter:blur(14px) saturate(1.05); box-shadow:0 18px 40px -20px rgba(0,0,0,.5); }
.plan.pop{ border:1.5px solid var(--primary); box-shadow:0 22px 50px -18px rgba(20,80,45,.55); }
.ribbon{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.plan-name{ font-size:15px; font-weight:700; letter-spacing:.01em; }
.plan-price{ display:flex; align-items:baseline; gap:4px; margin:12px 0 2px; }
.plan-price .amt{ font-size:30px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.plan-price .per{ font-size:13px; color:var(--fg-muted); }
.plan-note{ font-size:12px; color:var(--fg-faint); min-height:16px; }
.plan-feats{ list-style:none; margin:16px 0 20px; padding:16px 0 0; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; flex:1; }
.plan-feats li{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--fg-muted); line-height:1.4; }
.plan-feats svg{ width:15px; height:15px; color:var(--primary); flex:none; margin-top:1px; }
.plan-feats li b{ color:var(--fg); font-weight:600; }
.plan-cta{ height:44px; border-radius:var(--radius-sm); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--fg); transition:all .15s; text-decoration:none; display:flex; align-items:center; justify-content:center; }
.plan-cta:hover{ border-color:var(--fg-faint); }
.plan.pop .plan-cta, .plan-cta.primary{ background:var(--primary); color:var(--primary-contrast); border-color:var(--primary); box-shadow:0 8px 18px -8px rgba(20,80,45,.5); }
.plan.pop .plan-cta:hover, .plan-cta.primary:hover{ background:var(--primary-hover); }
.plansfoot{ margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.plansfoot .disc{ color:#BFD4C6; font-size:12px; text-shadow:0 1px 8px rgba(0,0,0,.4); text-align:center; }
.back{ color:#EAF3EC; font-size:13.5px; text-decoration:none; opacity:.85; } .back:hover{ opacity:1; text-decoration:underline; }

/* ---- Onboarding sihirbazı (tek panelde çok adım) ---- */
.wsteps{ display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; row-gap:9px; margin:0 0 28px; }
.wsteps .wdot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700;
  background:var(--surface-2); color:var(--fg-faint); border:1.5px solid var(--border-strong); }
.wsteps .wdot svg{ width:14px; height:14px; }
.wsteps .wdot.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.wsteps .wdot.done{ background:color-mix(in srgb, var(--primary) 16%, transparent); color:var(--primary); border-color:var(--primary); }
.wsteps .wline{ height:2px; background:var(--border-strong); border-radius:2px; }
.wsteps .wline.done{ background:var(--primary); }
.wsteps .wlbl{ font-size:11.5px; font-weight:600; text-align:center; color:var(--fg-faint); }
.wsteps .wlbl.active{ color:var(--fg); }
.wsteps .c1{ grid-column:1; } .wsteps .c2{ grid-column:2; } .wsteps .c3{ grid-column:3; }
.wsteps .c4{ grid-column:4; } .wsteps .c5{ grid-column:5; }
.wsteps .r2{ grid-row:2; }

.wpanel{ display:flex; flex-direction:column; gap:16px; }
.wpanel.is-hidden{ display:none; }
.wtitle h1{ font-size:24px; letter-spacing:-.02em; margin:0 0 6px; font-weight:700; }
.wtitle p{ margin:0 0 4px; color:var(--fg-muted); font-size:14px; }

.wnav{ display:flex; gap:12px; margin-top:4px; }
.wnav .btn:not(.ghost){ flex:1; }
.btn.ghost{ background:var(--surface-2); color:var(--fg); border:1px solid var(--border-strong); box-shadow:none; flex:none; padding:0 20px; }
.btn.ghost:hover{ background:var(--surface); border-color:var(--fg-faint); }

/* Paket seçim satırları (panel içi, kompakt) */
.billing-sm{ display:flex; align-items:center; gap:10px; }
.billing-sm .seg2{ display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px; }
.billing-sm .seg2 button{ border:none; background:transparent; color:var(--fg-muted); font-family:inherit; font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px; cursor:pointer; }
.billing-sm .seg2 button.on{ background:var(--primary); color:#fff; }
.billing-sm .save2{ font-size:11.5px; color:var(--success); font-weight:600; }

.plan-list{ display:flex; flex-direction:column; gap:10px; }
.plan-row{ display:flex; align-items:center; gap:13px; padding:14px; border:1.5px solid var(--border-strong); border-radius:12px;
  cursor:pointer; background:var(--glass-input); transition:border-color .15s, background .15s; }
.plan-row:hover{ border-color:var(--fg-faint); }
.plan-row.sel{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, transparent); }
.plan-row .rad{ width:20px; height:20px; border-radius:50%; border:2px solid var(--border-strong); flex:none; display:grid; place-items:center; }
.plan-row.sel .rad{ border-color:var(--primary); }
.plan-row.sel .rad::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--primary); }
.plan-row .pinfo{ flex:1; min-width:0; }
.plan-row .pinfo .pn{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.plan-row .pinfo .pd{ font-size:12px; color:var(--fg-muted); margin-top:2px; }
.plan-row .pprice{ text-align:right; flex:none; }
.plan-row .pprice .pa{ font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; }
.plan-row .pprice .pu{ font-size:11px; color:var(--fg-faint); }
.tag-pop{ font-size:10px; font-weight:700; letter-spacing:.03em; color:#fff; background:var(--primary); padding:2px 7px; border-radius:999px; }
.disc-sm{ font-size:11.5px; color:var(--fg-faint); }

@media (prefers-reduced-motion: reduce){ .stage .bgvid{ display:none; } *{ transition:none !important; } }