:root{
  /* Palet – lacivert uyum */
  --bg:#060b18; --glass:#0b1526cc; --panel:#0e1a2e; --panel2:#0a1423;
  --line:#1e2a40; --fg:#eaf2ff; --muted:#97a3b7; --accent:#7b5dff;

  /* Lacivert uyarı/iltifat tonları */
  --navy1:#0b1526; --navy2:#0e1a2e; --navy3:#14243a; --navyGlow: rgba(81,40,255,.35);
}

/* --- tam ekran arka plan + blur --- */
html,body{height:100%; background:
  radial-gradient(1200px 700px at 20% 10%, #101f3f 0%, #060b18 50%, #050813 100%);
  color:var(--fg); margin:0;}
.backdrop{ position:fixed; inset:0; backdrop-filter: blur(10px) saturate(110%); background:linear-gradient(180deg, #050914b3, #050914e0); }

/* --- 3D popup kart --- */
.popup-wrap{ position:fixed; inset:0; display:grid; place-items:center; padding:clamp(12px,2vw,24px); perspective: 1200px; }
.popup{
  width:min(980px, 94vw);
  max-height: 88vh;
  overflow:auto;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--line);
  border-radius: 18px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transform: rotateX(0.8deg) translateY(6px) scale(.985);
  animation: pop .28s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes pop{ from{opacity:0; transform: rotateX(3deg) translateY(18px) scale(.96);} to{opacity:1; transform: rotateX(0deg) translateY(0) scale(1);} }

/* başlık bar */
.popup-header{
  position:sticky; top:0; z-index:2;
  backdrop-filter: blur(6px) saturate(110%);
  background:linear-gradient(180deg, var(--glass), transparent);
  border-bottom:1px solid var(--line);
}
.hbar{display:flex; gap:.6rem; align-items:center; padding:12px 12px;}
.hbar .title{font-weight:800; letter-spacing:.2px; margin-right:auto}

/* +Ekle */
.btn-add{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:.8rem;
  background:linear-gradient(135deg, var(--accent), #5128ff);
  color:#fff; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 20px rgba(63,45,180,.45), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-add:hover{ filter:brightness(1.05); }

/* kapat */
.close-btn{
  width:40px; height:40px; border-radius:.7rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:#fff;
  border:1px solid rgba(255,255,255,.14);
}
.close-btn:hover{background:rgba(255,255,255,.12)}

/* Liste alanı */
.wl-list{display:flex; flex-direction:column; padding:10px 10px 16px; gap:10px;}

/* — Kart tarzı satır —  (çizgi yok, yumuşak cam görünüm) */
.wl-row{
  display:grid; grid-template-columns: 64px 1fr auto; align-items:center; gap:14px;
  padding:12px; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg, #0f1a2d, #0a1523f2);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 6px 16px rgba(0,0,0,.22);
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.wl-row:hover{ transform: translateY(-1px); border-color:#2a3b5d; box-shadow:0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);}
.wl-left{min-width:0}
.wl-title{font-weight:800; letter-spacing:.2px;}
.wl-meta{color:var(--muted); font-size:.9rem}
.wl-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:999px; font-weight:700; font-size:.78rem;
  background: #0f223b; color:#a6b7d2; border:1px solid #203351; }

/* Thumbnail */
.thumb{
  width:64px; height:64px; border-radius:10px; overflow:hidden; background:#0b1628; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* Skeleton */
.skeleton{ position:relative; overflow:hidden; }
.sk-line{ height:12px; background:#122036; border-radius:6px; }
.sk-w-60{ width:60%; } .sk-w-30{ width:30%; }
.sk-icon{ width:64px; height:64px; border-radius:10px; background:#122036; }
.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); transform:translateX(-100%); animation: shimmer 1.2s infinite; }
@keyframes shimmer{ to{ transform:translateX(100%); } }

/* Modal & formlar */
input::placeholder{color:#94a3b8}
.modal-backdrop.show{ backdrop-filter: blur(6px) saturate(115%); background: rgba(5,9,20,.65);}
.modal-content{ background: linear-gradient(180deg, #0f1a2d, #0a1322); border:1px solid rgba(255,255,255,.08); color: var(--fg); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.55);}
.modal-header,.modal-footer{ border-color: rgba(255,255,255,.08); }
.modal-title{ font-weight: 800; letter-spacing:.2px; }
.modal-content .form-label{ color:#c8d3e6; }
.modal-content .form-text{ color:var(--muted); }
.modal-content .form-control{ background:#0b1424; border-color:#1f2b45; color:var(--fg); }
.modal-content .form-control::placeholder{ color:#7f8aa0; }
.modal-content .btn-close{ filter: invert(1) opacity(.8); }

/* cam efektli nötr buton */
.btn-ghost{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:.8rem; padding:.55rem 1rem; }
.btn-ghost:hover{ background: rgba(255,255,255,.12); }

/* kırmızı modern sil */
.btn-danger-modern{
  background: linear-gradient(135deg,#ff4d4f,#d9363e);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; border-radius:.8rem; padding:.55rem 1rem;
  box-shadow:0 6px 18px rgba(255,77,79,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-danger-modern:hover{ filter: brightness(1.05); }

/* modal açıkken arka popup’ı gizlemek için sınıf */
.hide-popup{ display:none !important; }

/* İşlem Overlay */
.op-overlay{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background: rgba(5,9,20,.65); backdrop-filter: blur(6px) saturate(115%); }
.op-box{ display:flex; align-items:center; gap:.8rem; padding:.9rem 1.1rem; border-radius:14px; background: linear-gradient(180deg,#0f1a2d,#0a1322); border:1px solid rgba(255,255,255,.12); box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.op-text{ font-weight:700; letter-spacing:.2px; }

/* Toast – lacivert tema + yumuşak ışıltı */
.toast-container{ position:fixed; right:16px; bottom:16px; z-index:99999; }
.toast-navy{
  --bs-toast-bg: linear-gradient(180deg, var(--navy2), var(--navy1));
  --bs-toast-color: #dfe8ff;
  --bs-toast-border-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 38px var(--navyGlow), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: 14px;
}
.toast-navy .btn-close{ filter: invert(1) opacity(.7); }

/* Küçük nota: edit ikonu yok — satır tıklanır */