/* ==================================================================
   LiderHavale — müşteri ödeme sayfası
   ------------------------------------------------------------------
   Paneldeki tema ailesinin aynısı (mavi / sarı / kırmızı, degradeler),
   ama tek sütun ve telefon öncelikli: müşteri bu ekranda yalnız üç şey
   yapar — IBAN'ı kopyalar, havale eder, "gönderdim" der.
   ================================================================== */

:root{
  --brand-900:#0B1437;
  --brand-700:#1B2E78;
  --brand-600:#2242A6;
  --brand:#2C5BEF;
  --brand-400:#5B85FF;
  --brand-100:#E4ECFF;
  --brand-50:#F1F5FF;

  --gold:#FFB020;
  --gold-600:#C77700;
  --gold-100:#FFF3DC;

  --red:#E5484D;
  --red-600:#D03438;
  --red-100:#FFE9E9;

  --green:#12A150;
  --green-600:#0E9F6E;
  --green-100:#E3F8EC;

  --grad-sahne:linear-gradient(168deg,#0B1437 0%,#142260 46%,#1B2E78 100%);
  --grad-brand:linear-gradient(135deg,#2C5BEF 0%,#5B85FF 100%);
  --grad-gold:linear-gradient(135deg,#FF9500 0%,#FFC24B 100%);
  --grad-green:linear-gradient(135deg,#0E9F6E 0%,#3FD18B 100%);

  --surface:#FFFFFF;
  --surface-2:#F7F9FE;
  --border:#E3E8F5;
  --border-2:#CBD4EA;

  --ink:#101443;
  --ink-2:#4B5480;
  --ink-3:#8791B5;

  --radius:16px;
  --shadow-lg:0 24px 70px rgba(6,11,38,.34);
}

/* Karanlık tema: müşterinin cihazı karanlık kipteyse kart da koyulaşır. */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --surface:#121A36;
    --surface-2:#18213F;
    --border:#243058;
    --border-2:#34416E;
    --ink:#E7ECFF;
    --ink-2:#AEB8DC;
    --ink-3:#7D88B3;
    --brand-50:#16214A;
    --brand-100:#1C2A5C;
    --gold-100:#3A2C0E;
    --gold-600:#FFC24B;
    --red-100:#3A171C;
    --red-600:#FF7A7E;
    --green-100:#0F3325;
    --green-600:#3FD18B;
    --grad-sahne:linear-gradient(168deg,#05081A 0%,#0B1234 46%,#111C4E 100%);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:var(--grad-sahne);
  font:15px/1.6 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Arkaplan parıltısı — düz lacivert hissini kırar. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 38% at 50% 0%,rgba(91,133,255,.34),transparent 70%),
    radial-gradient(38% 30% at 92% 96%,rgba(255,176,32,.16),transparent 70%);
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
button{font:inherit}
a{color:var(--brand); text-decoration:none}
a.btn{text-decoration:none}

.sahne{
  position:relative; z-index:1; min-height:100%;
  max-width:560px; margin:0 auto; padding:22px 16px 40px;
  display:flex; flex-direction:column; gap:16px;
}

/* ==================================================== ÜST */

.ust{display:flex; align-items:center; gap:12px}
.marka{display:flex; align-items:center; gap:11px; flex:1; color:#fff}
.marka .logo{
  width:40px; height:40px; border-radius:12px; background:var(--grad-brand);
  display:grid; place-items:center; flex:none; box-shadow:0 8px 20px rgba(44,91,239,.5);
}
.marka .logo span{display:flex; gap:3px; align-items:flex-end}
.marka .logo i{display:block; width:4.5px; border-radius:2px; background:#fff}
.marka .logo i:nth-child(1){height:9px; opacity:.6}
.marka .logo i:nth-child(2){height:14px; background:var(--gold)}
.marka .logo i:nth-child(3){height:20px}
.marka b{display:block; font-size:16px; line-height:1.2; letter-spacing:-.01em}
.marka small{font-size:10.5px; color:rgba(255,255,255,.52); letter-spacing:.09em; text-transform:uppercase}
.kilit{
  font-size:11.5px; color:rgba(255,255,255,.72); display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:6px 11px; border-radius:99px; white-space:nowrap;
}

/* ==================================================== KUTU */

.kutu{
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden; position:relative;
}
/* Üç marka rengi şeridi — panelle aynı imza. */
.kutu::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:2;
  background:linear-gradient(90deg,var(--brand) 0 40%,var(--gold) 40% 74%,var(--red) 74% 100%);
}

.bekle{padding:64px 20px; text-align:center; color:var(--ink-3); font-size:14px}
.spin{
  display:inline-block; width:15px; height:15px; border:2px solid var(--border);
  border-top-color:var(--brand); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-3px;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* --- tutar başlığı --- */
.tutar{
  padding:26px 22px 22px; text-align:center;
  background:linear-gradient(180deg,var(--brand-50),var(--surface));
  border-bottom:1px solid var(--border);
}
.tutar .k{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.tutar .v{
  font-size:38px; font-weight:800; letter-spacing:-.03em; margin:5px 0 8px;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.tutar .n{font-size:12.5px; color:var(--ink-3)}
.tutar .n b{color:var(--ink-2); font-variant-numeric:tabular-nums}

/* --- adımlar --- */
.adimlar{
  display:flex; gap:0; padding:14px 22px; border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.adim{flex:1; display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink-3)}
.adim .n{
  width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--surface); border:1.5px solid var(--border-2); color:var(--ink-3);
  font-weight:800; font-size:11.5px;
}
.adim.on{color:var(--ink); font-weight:700}
.adim.on .n{background:var(--grad-brand); border-color:transparent; color:#fff;
  box-shadow:0 4px 12px rgba(44,91,239,.36)}
.adim.bitti .n{background:var(--grad-green); border-color:transparent; color:#fff}

.govde{padding:22px}

/* --- hesap bilgileri --- */
.banka{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
  padding-bottom:16px; border-bottom:1px solid var(--border);
}
.banka .bs{
  width:44px; height:44px; border-radius:12px; background:var(--grad-brand); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:15px; flex:none;
  box-shadow:0 6px 16px rgba(44,91,239,.32);
}
.banka .ad{font-weight:800; font-size:16px; letter-spacing:-.01em}
.banka .alt{font-size:12px; color:var(--ink-3)}

.satir{
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:13px 15px; margin-bottom:11px;
  display:flex; align-items:center; gap:12px;
}
.satir .sol{flex:1; min-width:0}
.satir dt{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:3px;
}
.satir dd{margin:0; font-size:15px; font-weight:700; word-break:break-all; letter-spacing:.01em}
.satir dd.iban{font-size:15.5px; letter-spacing:.055em}

.kopya{
  border:1px solid var(--border-2); background:var(--surface); color:var(--ink-2);
  border-radius:9px; height:36px; padding:0 12px; cursor:pointer; flex:none;
  font-size:12px; font-weight:700;
}
.kopya:hover{border-color:var(--brand); color:var(--brand)}
.kopya.ok{background:var(--green-100); border-color:#BFE9D2; color:var(--green-600)}

/* --- uyarı --- */
.uyari{
  background:var(--gold-100); border:1px solid #F6DCAD; border-radius:12px;
  padding:13px 15px; margin:16px 0; font-size:13px; color:#6B4300;
}
/* Yalnız başlık blok olsun — madde içindeki <b> satır içinde kalmalı. */
.uyari > b{display:block; margin-bottom:4px; color:#4A2B00}
.uyari ul{margin:6px 0 0; padding-left:19px}
.uyari li{margin-bottom:3px}

/* --- düğmeler --- */
.btn{
  width:100%; border:0; border-radius:12px; height:52px; cursor:pointer;
  font-size:15px; font-weight:800; letter-spacing:-.01em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn.primary{background:var(--grad-brand); color:#fff; box-shadow:0 10px 26px rgba(44,91,239,.36)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.primary:disabled{opacity:.55; cursor:default; filter:none}
.btn.ghost{
  background:none; border:1px solid var(--border-2); color:var(--ink-2);
  height:44px; font-size:13.5px; font-weight:700; margin-top:10px;
}
.btn.ghost:hover{border-color:var(--brand); color:var(--brand)}

.aciklama{
  width:100%; border:1px solid var(--border); border-radius:12px; background:var(--surface);
  padding:11px 13px; font:inherit; font-size:14px; color:var(--ink);
  min-height:74px; resize:vertical; margin-bottom:12px;
}
.aciklama:focus{outline:0; border-color:var(--brand-400); box-shadow:0 0 0 4px var(--brand-50)}
label.et{display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px}

/* --- sonuç ekranları --- */
.sonuc{padding:44px 24px; text-align:center}
.sonuc .ikon{
  width:68px; height:68px; border-radius:50%; margin:0 auto 18px;
  display:grid; place-items:center; font-size:30px; color:#fff;
}
.sonuc.ok .ikon{background:var(--grad-green); box-shadow:0 12px 30px rgba(14,159,110,.34)}
.sonuc.warn .ikon{background:var(--grad-gold); box-shadow:0 12px 30px rgba(255,149,0,.34)}
.sonuc.err .ikon{background:linear-gradient(135deg,#D03438,#FF6B6F); box-shadow:0 12px 30px rgba(208,52,56,.34)}
.sonuc h2{margin:0 0 8px; font-size:21px; letter-spacing:-.02em}
.sonuc p{margin:0 auto 18px; color:var(--ink-2); font-size:14px; max-width:36ch}
.sonuc .no{
  display:inline-block; background:var(--surface-2); border:1px solid var(--border);
  border-radius:9px; padding:8px 14px; font-size:13.5px; font-weight:700; margin-bottom:18px;
}

/* --- geri sayım --- */
.sure{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:12px; color:var(--ink-3); padding:0 22px 20px;
}
.sure b{
  font-variant-numeric:tabular-nums; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:7px; padding:3px 8px; font-size:13px;
}
.sure.az b{background:var(--red-100); border-color:#F7CBCC; color:var(--red-600)}

/* ==================================================== ALT */

.alt{
  font-size:11.5px; color:rgba(255,255,255,.58); text-align:center; line-height:1.7;
  display:flex; flex-direction:column; gap:3px;
}
.alt b{color:rgba(255,255,255,.85)}

/* ==================================================== BİLDİRİM */

.toasts{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; flex-direction:column; gap:8px; align-items:center; padding:0 16px;
}
.toast{
  background:var(--brand-900); color:#fff; border-radius:11px; padding:12px 18px; font-size:13px;
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.12);
  animation:rise .18s ease;
}
.toast.ok{background:var(--green-600)}
.toast.err{background:var(--red-600)}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ==================================================== TELEFON */

@media (max-width:480px){
  .sahne{padding:16px 12px 30px}
  .tutar .v{font-size:32px}
  .adimlar{padding:12px 14px; gap:4px}
  .adim span.ad{display:none}          /* dar ekranda yalnız numara kalır */
  .adim{flex:0 0 auto}
  .adimlar .cizgi{flex:1; height:1px; background:var(--border-2); align-self:center}
  .govde{padding:18px 16px}
  .satir dd.iban{font-size:14.5px; letter-spacing:.04em}
  /* iOS odakta yakınlaştırmasın */
  .aciklama{font-size:16px}
}

/* Onay beklenirken sonuç ekranında dönen gösterge. */
.sonuc .bekliyor{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:99px; padding:7px 15px; font-size:12.5px; color:var(--ink-3);
}