/* ===== CaloriPanda — /i/<creator> erken erişim (waitlist) landing ===== */
/* Tokens styles.css :root'tan miras (--black/--white/--lime/--font vb.). */

/* [hidden] önceliği: .wl-form{display:flex} gibi kurallar UA'nın display:none'ını ezer →
   form.hidden=true görsel gizlemezdi. Bu kural JS toggle'ını her zaman kazandırır. */
[hidden]{display:none !important}

/* ---- nav (lite) ---- */
.wl-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line-l)}
.wl-nav-inner{display:flex;align-items:center;gap:16px;height:66px}
.wl-nav-link{margin-inline-start:auto;font-size:15px;font-weight:500;color:#3a3a40}
.wl-nav-link:hover{color:var(--black)}

/* ---- hero (koyu, tam-genişlik) ---- */
.wl-hero{background:var(--black);color:var(--white);padding:clamp(52px,9vw,104px) 0 clamp(64px,10vw,120px)}
.wl-hero-inner{max-width:640px;margin:0 auto;text-align:center}
.wl-eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--black);background:var(--lime);padding:7px 15px;border-radius:999px;margin-bottom:24px}
.wl-title{font-size:clamp(38px,6.2vw,66px);line-height:1.03;letter-spacing:-.035em;font-weight:600;color:var(--white)}
.wl-sub{margin:20px auto 0;max-width:520px;font-size:clamp(16px,2vw,19px);line-height:1.6;color:#c9c9cf}
.wl-sub strong{color:var(--white);font-weight:600}

/* ---- form kartı ---- */
.wl-card{max-width:460px;margin:36px auto 0;background:var(--white);color:var(--black);border-radius:var(--r-lg);padding:clamp(24px,4vw,34px);box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:start}
.wl-form{display:flex;flex-direction:column;gap:16px}
.wl-field{display:flex;flex-direction:column;gap:8px}
.wl-flabel{font-size:14px;font-weight:600;color:var(--black)}
.wl-field input{width:100%;font:inherit;font-size:16px;padding:14px 16px;border:1.5px solid var(--line-l);border-radius:var(--r-sm);background:#fafafa;color:var(--black);transition:border-color .15s,background .15s}
.wl-field input::placeholder{color:#9a9aa0}
.wl-field input:focus{outline:none;border-color:var(--black);background:var(--white)}
.wl-field input:focus-visible{outline:2px solid var(--lime-deep);outline-offset:2px}

/* honeypot — ekran dışı, erişilebilir ağaçtan gizli */
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* rıza kutusu */
.wl-consent{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--g-3);cursor:pointer}
.wl-consent input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--lime-deep);cursor:pointer}
.wl-consent a{color:var(--black);text-decoration:underline;text-underline-offset:2px}
.wl-consent strong{color:var(--black);font-weight:600}

/* buton */
.wl-btn{width:100%;font:inherit;font-size:16px;font-weight:600;color:var(--white);background:var(--black);border:0;border-radius:var(--r-sm);padding:15px 20px;cursor:pointer;transition:transform .12s,opacity .15s}
.wl-btn:hover{transform:translateY(-1px)}
.wl-btn:active{transform:translateY(0)}
.wl-btn:focus-visible{outline:2px solid var(--lime-deep);outline-offset:2px}
.wl-btn:disabled{opacity:.6;cursor:default;transform:none}

.wl-err{font-size:13.5px;font-weight:500;color:#c0362c;margin:0}
.wl-note{font-size:12.5px;color:var(--g-3);margin:0;text-align:center}

/* başarı state */
.wl-success{text-align:center;padding:8px 4px}
.wl-success:focus{outline:none}
.wl-check{font-size:44px;line-height:1;margin-bottom:10px}
.wl-success-h{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.wl-success p{font-size:15px;color:var(--g-3);line-height:1.6;margin:0 auto;max-width:340px}
.wl-code{margin-top:14px !important;display:inline-block;font-size:14px;font-weight:600;color:var(--black);background:var(--lime);padding:8px 14px;border-radius:999px}

/* ---- nasıl çalışır ---- */
.wl-how{background:var(--white);padding:clamp(56px,9vw,96px) 0}
.wl-how-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px)}
.wl-step{text-align:center}
.wl-step-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--black);color:var(--white);margin-bottom:16px}
.wl-step-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7}
.wl-step h3{font-size:18px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.wl-step p{font-size:14.5px;color:var(--g-3);line-height:1.6;max-width:280px;margin:0 auto}

@media (max-width:720px){
  .wl-how-inner{grid-template-columns:1fr;gap:34px;max-width:360px;margin:0 auto}
}