/* ============================================================================
   BOUNCESPLIT — PANEL TASARIM SİSTEMİ
   ============================================================================
   KÖKENİ: saascorner panelinin site/panel/panel.css dosyası. ev.js oradan
   OLDUĞU GİBİ taşındı; taşınan dosya bu sınıf ve değişken adlarını kullanıyor
   (.card, .btn, .badge, --border, --green-soft, --gold …). Bu yüzden İSİMLER
   AYNEN KORUNDU — yalnız DEĞERLER BounceDelete teal markasına çevrildi.

   Yani --gold artık altın değil, markanın turkuazı. Kulağa ters geliyor ama
   yeniden adlandırmak ev.js'in içindeki 6 kullanımı + gelecekteki her taşımayı
   kırardı; isim sabit, değer marka.

   Palet landing (bouncedelete.com) ile aynı: teal #0e9e9a · krem-yeşil zemin
   #f4f7f6 · koyu mürekkep #0a1615. Üç kova rengi (geçerli / riskli / bounce)
   ürünün ana motifi.

   KOYU TEMA iki kez tanımlanır: önce sistem tercihi (prefers-color-scheme),
   sonra kullanıcının açık seçimi (data-theme) — böylece düğme her iki yönde de
   kazanır. Sıra bozulursa "koyuya al" düğmesi açık sistemde çalışmaz.
   ============================================================================ */

/* ---------- palet ---------- */
:root{
  --brand:#0e9e9a; --brand-dark:#0b8380; --brand-ink:#0a6f6c; --brand-wash:#e4f4f3;

  /* ev.js'in beklediği eski adlar → marka değerleri */
  --gold:#0e9e9a; --gold-dark:#0b8380; --gold-ink:#0a6f6c; --gold-soft:#e4f4f3;
  --accent:#2c3b39; --accent-soft:#e2ecea; --accent-dark:#0a1615;

  --bg:#f4f7f6; --card:#ffffff; --surface-2:#eef4f3;
  --border:#e0e8e6; --line:#e0e8e6; --text:#0a1615; --muted:#5c6b6a;

  --green:#12a374; --red:#e34860; --amber:#d68612; --sky:#0ea5e9; --violet:#8b5cf6; --blue:#3b7bec;
  /* markanın üç kovası — logo çubukları ve landing ile aynı üç renk */
  --valid:#12a374; --risky:#d68612; --bounce:#e34860;
  --green-soft:#e3f5ee; --amber-soft:#fbf0dd; --red-soft:#fce6ea;
  --blue-soft:#eef2ff; --sky-soft:#e0f2fe;
  --green-ink:#0b6b4d; --amber-ink:#8a5407; --red-ink:#b3273c; --blue-ink:#4353b3;

  --radius:12px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#2bd4ce; --brand-dark:#21b8b3; --brand-ink:#7fe9e5; --brand-wash:#0f2523;
    --gold:#2bd4ce; --gold-dark:#21b8b3; --gold-ink:#7fe9e5; --gold-soft:#0f2523;
    --accent:#c3d2d0; --accent-soft:#16302d; --accent-dark:#e9f2f0;

    --bg:#060f0e; --card:#0d1a19; --surface-2:#122120;
    --border:#1b2d2b; --line:#1b2d2b; --text:#e9f2f0; --muted:#8ba0a0;

    --green:#28cf95; --red:#ff6376; --amber:#f0ad3d;
    --green-soft:#0e2620; --amber-soft:#2a2113; --red-soft:#2c151a;
    --blue-soft:#161f38; --sky-soft:#102431;
    --green-ink:#5fe3b2; --amber-ink:#f4c46f; --red-ink:#ff9aa7; --blue-ink:#9db4ff;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand:#2bd4ce; --brand-dark:#21b8b3; --brand-ink:#7fe9e5; --brand-wash:#0f2523;
  --gold:#2bd4ce; --gold-dark:#21b8b3; --gold-ink:#7fe9e5; --gold-soft:#0f2523;
  --accent:#c3d2d0; --accent-soft:#16302d; --accent-dark:#e9f2f0;

  --bg:#060f0e; --card:#0d1a19; --surface-2:#122120;
  --border:#1b2d2b; --line:#1b2d2b; --text:#e9f2f0; --muted:#8ba0a0;

  --green:#28cf95; --red:#ff6376; --amber:#f0ad3d;
  --valid:#28cf95; --risky:#f0ad3d; --bounce:#ff6376;
  --green-soft:#0e2620; --amber-soft:#2a2113; --red-soft:#2c151a;
  --blue-soft:#161f38; --sky-soft:#102431;
  --green-ink:#5fe3b2; --amber-ink:#f4c46f; --red-ink:#ff9aa7; --blue-ink:#9db4ff;
  color-scheme:dark;
}

/* ---------- taban ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.hidden{display:none!important}
a{color:var(--brand-ink)}
button{font:inherit;cursor:pointer}
strong,b{font-weight:700}

input,select,textarea{font:inherit;color:var(--text);background:var(--card);
  border:1px solid var(--border);border-radius:9px;padding:9px 11px;width:100%}
/* Genel input kuralı checkbox/radio'yu da yakalıyor → satırı kaplayıp etiketi
   alt satıra itiyordu. Sıfırla. (Kaynakta da aynı tuzağa düşülmüştü.) */
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:0;border:0;
  background:none;border-radius:0;flex:none;accent-color:var(--brand);cursor:pointer}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--brand)}
input::placeholder,textarea::placeholder{color:var(--muted)}
textarea{resize:vertical;min-height:70px}
label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px}

/* ============================================================================
   ÜST BAR
   ============================================================================ */
.topbar{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40;
  padding-top:env(safe-area-inset-top,0px)}
.topbar-inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.brand svg{flex:none;display:block}
.brand .b1{color:var(--text)}
.brand .b2{color:var(--brand)}
.top-sp{flex:1}
.top-user{font-size:12.5px;color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Kredi rozeti — tıklanınca hareket dökümü açılır. Bakiye bitince kırmızıya döner. */
.top-kredi{border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;white-space:nowrap;flex:none}
.top-kredi:hover{border-color:var(--brand);color:var(--brand-ink)}
.top-kredi .tk-et{color:var(--muted);font-weight:600;margin-right:5px}
.top-kredi.bos{background:var(--red-soft);border-color:var(--red-soft);color:var(--red-ink)}
.top-kredi.bos .tk-et{color:var(--red-ink)}
.iconbtn{border:1px solid var(--border);background:var(--card);color:var(--muted);
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;padding:0}
.iconbtn:hover{border-color:var(--brand);color:var(--text)}
.iconbtn svg{width:17px;height:17px}

main{max-width:1100px;margin:0 auto;padding:22px 20px 70px}

@media (max-width:560px){
  .topbar-inner{height:auto;padding:10px 14px;gap:10px}
  .top-user{display:none}
  main{padding:16px 14px 60px}
}

/* ============================================================================
   KARTLAR / TİPOGRAFİ
   ============================================================================ */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:0 1px 2px rgba(10,22,21,.04)}
.card h3{font-size:14px;margin-bottom:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:800}
.empty{color:var(--muted);text-align:center;padding:26px 10px;font-size:13.5px}

/* ---------- rozet ---------- */
.badge{display:inline-block;padding:2.5px 9px;border-radius:999px;font-size:11.5px;
  font-weight:700;white-space:nowrap;background:var(--surface-2);color:var(--text)}

/* ---------- düğmeler ---------- */
.btn{background:var(--brand);color:#fff;border:0;border-radius:9px;padding:9px 16px;font-weight:700}
.btn:hover{background:var(--brand-dark)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-ghost{background:var(--card);color:var(--text);border:1px solid var(--border);
  border-radius:9px;padding:8px 14px;font-weight:600}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn-ghost:disabled{opacity:.55;cursor:not-allowed}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-danger{background:var(--card);color:var(--red);border:1px solid var(--border);
  border-radius:9px;padding:8px 14px;font-weight:600}
.btn-danger:hover{border-color:var(--red);background:var(--red-soft)}

/* ---------- çipler ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1px solid var(--border);background:var(--card);color:var(--muted);
  border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- tablo ---------- */
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
  text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--border);font-weight:700}
td{padding:10px 12px 10px 0;vertical-align:middle}

/* ============================================================================
   BİLDİRİM / YÜKLENİYOR
   ============================================================================ */
#toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:400;
  display:flex;flex-direction:column;gap:8px;align-items:center;width:min(480px,92vw)}
.toast{background:#12211f;color:#fff;border-radius:10px;padding:11px 18px;font-size:13.5px;
  font-weight:600;box-shadow:0 8px 24px rgba(10,22,21,.25);animation:pop .18s ease;max-width:100%}
.toast.error{background:#b3273c}
.toast.success{background:#0b6b4d}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.spinner{width:26px;height:26px;border:3px solid var(--accent-soft);border-top-color:var(--brand);
  border-radius:50%;animation:spin .7s linear infinite;margin:30px auto}
.spinner.sm{width:16px;height:16px;border-width:2px;margin:0;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spinner{animation-duration:2s} }

/* ============================================================================
   GİRİŞ EKRANI
   ============================================================================ */
/* Sütun: giriş kartı üstte, yol haritası altında. Tek kart varken de aynı
   şekilde ortalanır, o yüzden kip fark etmeksizin güvenli. */
.auth-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
           justify-content:center;gap:16px;padding:24px 18px}
.auth-card{width:400px;max-width:100%}
/* Yol haritası tablosu 400px'e sığmıyor; giriş kartından geniş duruyor. */
.auth-yol{width:640px;max-width:100%}
.auth-card .brand{justify-content:center;font-size:19px;margin-bottom:6px}
.auth-card h1{font-size:17px;font-weight:700;text-align:center;margin:14px 0 4px}
.auth-card .auth-sub{color:var(--muted);font-size:13px;text-align:center;margin-bottom:20px;line-height:1.5}
.auth-card label{margin-top:12px}
.auth-card .btn{width:100%;margin-top:18px;padding:11px 16px}
.auth-alt{text-align:center;font-size:13px;color:var(--muted);margin-top:16px}
.auth-alt button{background:none;border:0;color:var(--brand-ink);font-weight:700;padding:0}
.auth-alt button:hover{text-decoration:underline}
.auth-msg{margin-top:14px;font-size:13px;line-height:1.5;border-radius:9px;padding:11px 13px;display:none}
.auth-msg.show{display:block}
.auth-msg.err{background:var(--red-soft);color:var(--red-ink)}
.auth-msg.ok{background:var(--green-soft);color:var(--green-ink)}
.auth-foot{text-align:center;margin-top:22px;font-size:12px;color:var(--muted)}
.auth-foot a{color:var(--muted)}

/* ============================================================================
   MODAL  (kaynakta boot.js içinden enjekte ediliyordu — burada dosyada duruyor)
   ============================================================================
   ev.js bu sınıfları doğrudan yazıyor: .ui-ovl > .ui-modal > .ui-m-title /
   .ui-m-body / .ui-m-foot. Sınıf adlarını değiştirme, ev.js kırılır. */
.ui-ovl{position:fixed;inset:0;z-index:300;background:rgba(10,22,21,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.ui-modal{background:var(--card);border:1px solid var(--border);border-radius:14px;
  max-width:430px;width:100%;box-shadow:0 20px 60px rgba(10,22,21,.3);padding:22px;
  max-height:calc(100dvh - 40px);overflow-y:auto}
.ui-m-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}
.ui-m-body{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:18px;white-space:pre-line}
.ui-input{width:100%;margin:0 0 16px;background:var(--card);border:1px solid var(--border);
  border-radius:9px;padding:11px 12px;font-size:14px;font-family:inherit;color:var(--text)}
.ui-input:focus{outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);border-color:var(--brand)}
.ui-m-foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ui-danger{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}