/* ============================================================
 * Mahzen — glass.css
 * Liquid Glass katmanı (iOS 26 prensipleri → web)
 * Derinlik, ışık kırılması, işaretçi/dokunuş tepkisi, hareket.
 * styles.css'in ÜSTÜNE biner; hiçbir sınıfı kırmaz, sadece
 * "yüzen" yüzeyleri (kart, modal, sidebar, topbar) cama çevirir.
 * ============================================================ */

:root {
  /* Spring / doğal hareket eğrileri */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Cam malzeme — açık tema (belirgin: arka plan rengi camdan süzülsün) */
  --glass-bg: rgba(255, 255, 255, .42);
  --glass-bg-strong: rgba(255, 255, 255, .66);
  --glass-brd: rgba(255, 255, 255, .75);
  --glass-hi: rgba(255, 255, 255, .95);   /* üst specular çizgi */
  --glass-blur: 20px;
  --glass-sat: 1.9;
  --glass-shadow:
    0 1px 0 var(--glass-hi) inset,
    0 -1px 0 rgba(20, 22, 40, .04) inset,
    0 10px 34px -10px rgba(20, 22, 40, .28),
    0 3px 10px -4px rgba(20, 22, 40, .14);
  /* İşaretçi ışığı (glass.js günceller) */
  --mx: 50%; --my: 0%;
}

:root[data-theme="dark"] {
  --glass-bg: rgba(26, 29, 42, .52);
  --glass-bg-strong: rgba(30, 34, 48, .72);
  --glass-brd: rgba(150, 160, 210, .18);
  --glass-hi: rgba(190, 200, 255, .16);
  --glass-blur: 26px;
  --glass-sat: 1.5;
  --glass-shadow:
    0 1px 0 var(--glass-hi) inset,
    0 -1px 0 rgba(0, 0, 0, .3) inset,
    0 16px 48px -12px rgba(0, 0, 0, .7),
    0 4px 14px -6px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------
 * 1) Ortam ışık alanı — camın kıracağı canlı arka plan
 *    Yavaşça süzülen renk kümeleri: yüzeyler "gerçek" hisseder.
 * ---------------------------------------------------------- */
body { position: relative; isolation: isolate; }
body::before {
  content: '';
  position: fixed; inset: -25%;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 48% at 10% 14%, rgba(99, 102, 241, .55), transparent 62%),
    radial-gradient(38% 46% at 92% 10%, rgba(139, 92, 246, .50), transparent 60%),
    radial-gradient(46% 54% at 82% 90%, rgba(56, 189, 248, .42), transparent 62%),
    radial-gradient(42% 50% at 16% 94%, rgba(16, 185, 129, .32), transparent 60%);
  filter: blur(26px) saturate(1.2);
  animation: mz-drift 26s var(--ease-in-out) infinite alternate;
}
:root[data-theme="dark"] body::before {
  opacity: .82; filter: blur(34px) saturate(1.35);
  background:
    radial-gradient(40% 48% at 10% 14%, rgba(99, 102, 241, .4), transparent 62%),
    radial-gradient(38% 46% at 92% 10%, rgba(139, 92, 246, .36), transparent 60%),
    radial-gradient(46% 54% at 82% 90%, rgba(56, 189, 248, .3), transparent 62%),
    radial-gradient(42% 50% at 16% 94%, rgba(16, 185, 129, .22), transparent 60%);
}
/* İnce grenli doku — dijital düzlüğü kırar */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .028; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after { opacity: .05; }

@keyframes mz-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}

/* ------------------------------------------------------------
 * 2) Cam yüzey mixin'i (utility) + işaretçi-takipli specular
 * ---------------------------------------------------------- */
.auth-card, .modal, .popover, .card, .sec-card,
.health, .plan-card, .gen-out, .code-box, .hibp-box,
.upgrade, .toast, #demo-ribbon {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
}
/* İşaretçiyi izleyen ışık parıltısı — liquid glass'ın kalbi */
.auth-card::after, .modal::after, .card::after, .sec-card::after,
.health::after, .plan-card::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  background: radial-gradient(60% 80% at var(--mx) var(--my),
    rgba(255, 255, 255, .28), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
:root[data-theme="dark"] .auth-card::after,
:root[data-theme="dark"] .modal::after,
:root[data-theme="dark"] .card::after,
:root[data-theme="dark"] .sec-card::after,
:root[data-theme="dark"] .health::after,
:root[data-theme="dark"] .plan-card::after {
  background: radial-gradient(60% 80% at var(--mx) var(--my),
    rgba(150, 170, 255, .22), transparent 60%);
}
.auth-card:hover::after, .modal:hover::after, .card:hover::after,
.sec-card:hover::after, .health:hover::after, .plan-card:hover::after { opacity: 1; }
/* içerik ışığın üstünde kalsın */
.auth-card > *, .modal > *, .card > *, .sec-card > *,
.health > *, .plan-card > * { position: relative; z-index: 1; }

/* Sidebar & topbar: yatay cam çıtalar (arkadaki içerik süzülür) */
.sidebar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-right: 1px solid var(--glass-brd);
}
.topbar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: 0 1px 0 var(--glass-hi) inset;
}
.list-head { background: transparent; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* app zeminini yarı saydam yap ki sidebar/topbar süzecek bir şey bulsun */
.app, .main, .content, .split { background: transparent; }
body { background: var(--bg); }

/* İçerik sütunları da hafif cam — arkadaki ışık alanı süzülsün */
.list-col, .detail-col, .detail-empty {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* liste/detay satırlarının metni tam okunur kalsın (glass yalnız kap düzeyinde) */
.item-row, .dfield, .df-row, .row-title, .row-sub, .fv { background: transparent; }

/* ------------------------------------------------------------
 * 3) Butonlar — liquid glass, işaretçiyle parlar, basınca sıkışır
 * ---------------------------------------------------------- */
.btn {
  transition: transform .18s var(--ease-spring),
              box-shadow .25s var(--ease-out),
              background .2s var(--ease-out), border-color .2s;
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .06s; }

.btn-primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 88%, #fff) 0%, var(--primary) 55%, var(--primary-2) 100%);
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset,
    0 8px 20px -6px color-mix(in srgb, var(--primary) 55%, transparent);
}
.btn-primary:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .55) inset,
    0 12px 28px -6px color-mix(in srgb, var(--primary) 65%, transparent);
}
.icon-btn { transition: transform .18s var(--ease-spring), background .15s, color .15s; }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: scale(.9); }

/* ------------------------------------------------------------
 * 4) Giriş animasyonları — yüzeyler cam gibi "yerine oturur"
 * ---------------------------------------------------------- */
@keyframes mz-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes mz-pop {
  0%   { opacity: 0; transform: translateY(18px) scale(.94); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.auth-card { animation: mz-rise .55s var(--ease-out) both; }
.modal { animation: mz-pop .4s var(--ease-spring) both; }
.page > *, .split, .detail { animation: mz-rise .5s var(--ease-out) both; }

/* Liste satırları sırayla akar (stagger) */
.item-list .item-row { animation: mz-rise .42s var(--ease-out) both; }
.item-list .item-row:nth-child(1){animation-delay:.02s}
.item-list .item-row:nth-child(2){animation-delay:.05s}
.item-list .item-row:nth-child(3){animation-delay:.08s}
.item-list .item-row:nth-child(4){animation-delay:.11s}
.item-list .item-row:nth-child(5){animation-delay:.14s}
.item-list .item-row:nth-child(6){animation-delay:.17s}
.item-list .item-row:nth-child(7){animation-delay:.20s}
.item-list .item-row:nth-child(8){animation-delay:.23s}
.item-list .item-row:nth-child(n+9){animation-delay:.26s}

/* Güvenlik kartları grid stagger */
.sec-grid .sec-card { animation: mz-pop .5s var(--ease-spring) both; }
.sec-grid .sec-card:nth-child(1){animation-delay:.04s}
.sec-grid .sec-card:nth-child(2){animation-delay:.10s}
.sec-grid .sec-card:nth-child(3){animation-delay:.16s}
.sec-grid .sec-card:nth-child(4){animation-delay:.22s}

/* ------------------------------------------------------------
 * 5) Satır & kart hover: yükselme + cam parlaması
 * ---------------------------------------------------------- */
.item-row { transition: transform .2s var(--ease-spring), background .18s, box-shadow .25s; }
.item-row:hover { transform: translateX(3px); }
.item-row.active {
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 6px 18px -8px rgba(20, 22, 40, .25);
}
.sec-card { transition: transform .28s var(--ease-spring), box-shadow .3s var(--ease-out); }
.sec-card:hover { transform: translateY(-4px); }
.nav-item { transition: transform .16s var(--ease-spring), background .14s, color .14s; }
.nav-item:hover { transform: translateX(2px); }

/* ------------------------------------------------------------
 * 6) Sağlık halkası & metre — canlı dolum animasyonu
 * ---------------------------------------------------------- */
.health-ring {
  transition: --p 1.1s var(--ease-out);
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--good) 50%, transparent);
}
.meter-fill {
  position: relative; overflow: hidden;
  transition: width .7s var(--ease-spring), background .3s;
}
.meter-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%);
  animation: mz-shine 2.4s var(--ease-in-out) infinite;
}
@keyframes mz-shine { to { transform: translateX(180%); } }

/* TOTP değeri nabız gibi atsın */
.fv.totp { transition: color .3s; }
.totp-ring.warn { animation: mz-pulse 1s ease-in-out infinite; }
@keyframes mz-pulse { 50% { opacity: .45; } }

/* ------------------------------------------------------------
 * 7) Modal arka planı — daha derin cam + yumuşak giriş
 * ---------------------------------------------------------- */
.modal-back {
  background: rgba(10, 12, 22, .42);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
}

/* ------------------------------------------------------------
 * 8) Toast — camsı kabarcık, aşağıdan yayla girer
 * ---------------------------------------------------------- */
.toast {
  color: var(--text) !important;
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
}
.toast.success { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.toast.error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* ------------------------------------------------------------
 * 9) Girişler odaklanınca cam kenar parlaması
 * ---------------------------------------------------------- */
.inp, .search-inp { transition: box-shadow .25s var(--ease-out), border-color .2s, background .2s; }
.inp:focus, .search-inp:focus {
  box-shadow:
    0 0 0 3px var(--primary-soft),
    0 4px 16px -6px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* Segmented toggle sürgüsü yumuşasın */
.seg-btn { transition: color .2s, background .3s var(--ease-spring), box-shadow .3s; }