/**
 * bars-liquid-glass.css — Apple iOS 18+ inspired Liquid Glass system
 *
 * 4-layer optical stack on every glass element:
 *   1. backdrop-filter blur + saturate + brightness
 *   2. specular highlight (diagonal gradient, screen-blend)
 *   3. inner edge glow (inset 1px white)
 *   4. deep outer shadow
 *
 * Load AFTER your base stylesheet. Upgrades these existing selectors:
 *   .btn .btn-primary .btn-ghost .btn-accent .btn-secondary
 *   .card .metric-card .price-card .feature .t-card .faq-item
 *   .modal .modal-content .popover .dropdown-content .drawer
 *   .crm-input select textarea
 *   .eyebrow .badge .status .nav-badge
 *   .mega-menu .sidebar .mobile-drawer-inner
 *
 * Utility classes (opt-in for custom elements):
 *   .lg .lg-sm .lg-lg .lg-accent
 *
 * Works alongside existing styles — doesn't override color/typography/layout.
 * Version: 1.0.0 — 2026-04-17
 */

/* ─── TOKEN SYSTEM ─── */
:root {
  --lg-bg: rgba(16,16,16,.55);
  --lg-bg-hover: rgba(24,24,24,.70);
  --lg-bg-strong: rgba(12,12,12,.72);
  --lg-bg-light: rgba(255,255,255,.04);
  --lg-bg-light-hover: rgba(255,255,255,.07);
  --lg-border-1: 1px solid rgba(255,255,255,.08);
  --lg-border-2: 1px solid rgba(255,255,255,.12);
  --lg-border-accent: 1px solid rgba(196,168,122,.22);
  --lg-blur-sm: blur(14px) saturate(160%) brightness(1.05);
  --lg-blur-md: blur(20px) saturate(180%) brightness(1.08);
  --lg-blur-lg: blur(28px) saturate(200%) brightness(1.12);
  --lg-specular: linear-gradient(135deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 28%,transparent 50%);
  --lg-specular-strong: linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 28%,transparent 50%);
  --lg-specular-gold: linear-gradient(135deg,rgba(196,168,122,.18) 0%,rgba(196,168,122,.04) 28%,transparent 50%);
  --lg-edge-top: inset 0 1px 0 rgba(255,255,255,.1);
  --lg-edge-top-strong: inset 0 1px 0 rgba(255,255,255,.14);
  --lg-edge-inner: inset 0 0 0 1px rgba(255,255,255,.02);
  --lg-shadow-sm: 0 4px 14px rgba(0,0,0,.35), var(--lg-edge-top), var(--lg-edge-inner);
  --lg-shadow-md: 0 8px 28px rgba(0,0,0,.5), var(--lg-edge-top), var(--lg-edge-inner);
  --lg-shadow-lg: 0 18px 50px -10px rgba(0,0,0,.75), var(--lg-edge-top-strong), var(--lg-edge-inner);
  --lg-shadow-xl: 0 30px 80px -16px rgba(0,0,0,.9), var(--lg-edge-top-strong), var(--lg-edge-inner);
}

/* ─── UTILITY CLASSES (opt-in for arbitrary elements) ─── */
.lg, .lg-sm, .lg-md, .lg-lg { position: relative; isolation: isolate; }
.lg::before, .lg-sm::before, .lg-md::before, .lg-lg::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--lg-specular); pointer-events: none; z-index: -1;
  mix-blend-mode: screen; transition: opacity .3s;
}
.lg-sm { background: var(--lg-bg-light); backdrop-filter: var(--lg-blur-sm); -webkit-backdrop-filter: var(--lg-blur-sm); border: var(--lg-border-1); box-shadow: var(--lg-shadow-sm); }
.lg-sm::before { opacity: .6; }
.lg, .lg-md { background: var(--lg-bg); backdrop-filter: var(--lg-blur-md); -webkit-backdrop-filter: var(--lg-blur-md); border: var(--lg-border-1); box-shadow: var(--lg-shadow-md); }
.lg::before, .lg-md::before { opacity: .8; }
.lg-lg { background: var(--lg-bg-strong); backdrop-filter: var(--lg-blur-lg); -webkit-backdrop-filter: var(--lg-blur-lg); border: var(--lg-border-2); box-shadow: var(--lg-shadow-xl); }
.lg-lg::before { opacity: 1; }
.lg-lg::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); pointer-events: none; }
.lg-accent::before { background: var(--lg-specular-gold); }

/* ─── AUTO-UPGRADE: BUTTONS ─── */
.btn {
  position: relative; isolation: isolate;
  transition: all .25s cubic-bezier(.2,.8,.25,1);
}
.btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--lg-specular); pointer-events: none; z-index: -1;
  opacity: .8; mix-blend-mode: screen; transition: opacity .25s;
}
.btn:hover::before { opacity: 1; }

/* Primary (white/light): frosted heavy glass */
.btn.btn-primary, .btn-primary {
  /* --btn-primary-bg / --btn-primary-fg: embed mode ve tema override'ı için.
     Default: mevcut beyaz liquid-glass görünümü. */
  background: var(--btn-primary-bg, linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(235,235,235,.70) 100%));
  color: var(--btn-primary-fg, #0A0A0A);
  backdrop-filter: blur(20px) saturate(220%) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(220%) brightness(1.15);
  box-shadow: var(--btn-primary-shadow, 0 2px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.25));
}
.btn.btn-primary::before, .btn-primary::before {
  background: linear-gradient(135deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 30%, transparent 55%);
  opacity: 1;
}
.btn.btn-primary:hover, .btn-primary:hover {
  background: var(--btn-primary-bg-hover, linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(245,245,245,.82) 100%));
  transform: translateY(-1px);
  box-shadow: var(--btn-primary-shadow-hover, 0 10px 32px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.3));
}

/* Embed (gömülü widget) modu: primary butonu dinamik --accent ile boyar.
   Böylece müşterinin sitesine gömüldüğünde renk seçimi butona yansır. */
html.embed .btn.btn-primary, html.embed .btn-primary {
  --btn-primary-bg: linear-gradient(180deg, var(--accent) 0%, var(--accent) 100%);
  --btn-primary-bg-hover: linear-gradient(180deg, var(--accent) 0%, var(--accent) 100%);
  --btn-primary-fg: #0A0A0A;
  --btn-primary-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.1);
  --btn-primary-shadow-hover: 0 10px 32px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1);
}

/* Ghost / Secondary: translucent glass */
.btn.btn-ghost, .btn-ghost, .btn.btn-secondary, .btn-secondary {
  background: var(--lg-bg-light) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: var(--lg-blur-sm);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  box-shadow: var(--lg-shadow-sm);
}
.btn.btn-ghost:hover, .btn-ghost:hover, .btn.btn-secondary:hover, .btn-secondary:hover {
  background: var(--lg-bg-light-hover) !important;
  border-color: rgba(255,255,255,.18) !important;
  transform: translateY(-1px);
  box-shadow: var(--lg-shadow-md);
}

/* Accent (gold): jewel glass */
.btn.btn-accent, .btn-accent {
  background: linear-gradient(180deg, #C4A87A 0%, #8b7350 100%) !important;
  color: #0A0A0A !important;
  box-shadow: 0 4px 16px rgba(196,168,122,.2), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.1) !important;
}
.btn.btn-accent::before, .btn-accent::before {
  background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.05) 30%, transparent 50%);
}
.btn.btn-accent:hover, .btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(196,168,122,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1) !important;
}

/* Danger variant */
.btn.btn-danger, .btn-danger {
  background: linear-gradient(180deg, rgba(239,68,68,.92) 0%, rgba(185,28,28,.85) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(239,68,68,.25), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.15) !important;
}

/* ─── AUTO-UPGRADE: CARDS ─── */
.card, .metric-card, .price-card, .feature, .t-card, .kpi,
.feat, .other-card, .idx-card, .mc, .mc-card, .stat-card, .quiz-card {
  position: relative;
  isolation: isolate;
  background: var(--lg-bg);
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  border: var(--lg-border-1);
  box-shadow: var(--lg-shadow-sm);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.card::before, .metric-card::before, .price-card::before, .feature::before,
.t-card::before, .kpi::before, .feat::before, .other-card::before,
.idx-card::before, .mc::before, .mc-card::before, .stat-card::before, .quiz-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--lg-specular); pointer-events: none; z-index: -1;
  opacity: .6; mix-blend-mode: screen; transition: opacity .3s;
}
.card:hover, .metric-card:hover, .price-card:hover, .feature:hover,
.t-card:hover, .kpi:hover, .feat:hover, .other-card:hover, .idx-card:hover {
  box-shadow: var(--lg-shadow-md);
  border-color: rgba(255,255,255,.14);
}
.card:hover::before, .metric-card:hover::before, .price-card:hover::before,
.feature:hover::before, .t-card:hover::before, .kpi:hover::before,
.feat:hover::before, .other-card:hover::before, .idx-card:hover::before { opacity: 1; }

/* ─── AUTO-UPGRADE: MODALS / POPOVERS / DRAWERS ─── */
.modal, .modal-content, .modal-inner, .popover, .popover-content,
.dropdown-content, .drawer, .drawer-content, .dialog, .sheet, .bottom-sheet {
  background: var(--lg-bg-strong) !important;
  backdrop-filter: var(--lg-blur-lg) !important;
  -webkit-backdrop-filter: var(--lg-blur-lg) !important;
  border: var(--lg-border-2) !important;
  box-shadow: var(--lg-shadow-xl) !important;
  position: relative;
  isolation: isolate;
}
.modal::before, .modal-content::before, .modal-inner::before,
.popover::before, .popover-content::before, .dropdown-content::before,
.drawer::before, .drawer-content::before, .dialog::before, .sheet::before, .bottom-sheet::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--lg-specular); pointer-events: none; z-index: -1;
  opacity: 1; mix-blend-mode: screen;
}
/* Modal backdrop (the dimmer) */
.modal-backdrop, .modal-overlay, .dialog-backdrop {
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: var(--lg-blur-md) !important;
  -webkit-backdrop-filter: var(--lg-blur-md) !important;
}

/* ─── AUTO-UPGRADE: INPUTS ─── */
.crm-input, input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"], input[type="search"],
select, textarea {
  background: var(--lg-bg-light) !important;
  backdrop-filter: var(--lg-blur-sm);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: var(--lg-edge-top), var(--lg-edge-inner);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.crm-input:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
input[type="number"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
  border-color: rgba(196,168,122,.4) !important;
  background: var(--lg-bg-light-hover) !important;
  box-shadow: var(--lg-edge-top), var(--lg-edge-inner), 0 0 0 3px rgba(196,168,122,.12);
}

/* ─── AUTO-UPGRADE: BADGES / PILLS / STATUS ─── */
.eyebrow, .badge, .nav-badge, .status, .chip, .pill, .tag {
  background: var(--lg-bg-light);
  backdrop-filter: var(--lg-blur-sm);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  border: var(--lg-border-1);
  box-shadow: var(--lg-edge-top), var(--lg-edge-inner);
  position: relative;
  isolation: isolate;
}
.eyebrow::before, .badge::before, .nav-badge::before, .status::before,
.chip::before, .pill::before, .tag::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--lg-specular); pointer-events: none; z-index: -1;
  opacity: .6; mix-blend-mode: screen;
}

/* ─── AUTO-UPGRADE: MEGA MENU / NAV DROPDOWN ─── */
.mega-menu, .nav-dropdown, .menu-dropdown {
  background: linear-gradient(180deg, rgba(18,18,18,.72) 0%, rgba(10,10,10,.82) 100%);
  backdrop-filter: var(--lg-blur-lg);
  -webkit-backdrop-filter: var(--lg-blur-lg);
  border: var(--lg-border-2);
  box-shadow: var(--lg-shadow-xl), 0 0 40px rgba(196,168,122,.04);
  isolation: isolate;
}

/* ─── AUTO-UPGRADE: SIDEBAR (dashboard-style) ─── */
.sidebar, .sb, .dashboard-sidebar, aside.sidebar {
  background: rgba(8,8,8,.72);
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  border-right: var(--lg-border-1);
}

/* ─── AUTO-UPGRADE: TOPBAR ─── */
.topbar, .nav-wrap, header.topbar, .app-topbar {
  backdrop-filter: var(--lg-blur-md);
  -webkit-backdrop-filter: var(--lg-blur-md);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ─── AUTO-UPGRADE: TOASTS ─── */
.toast, .notification-toast, .bars-toast {
  background: var(--lg-bg-strong) !important;
  backdrop-filter: var(--lg-blur-lg) !important;
  -webkit-backdrop-filter: var(--lg-blur-lg) !important;
  border: var(--lg-border-2) !important;
  box-shadow: var(--lg-shadow-lg) !important;
  position: relative;
  isolation: isolate;
}
.toast::before, .notification-toast::before, .bars-toast::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--lg-specular); pointer-events: none; z-index: -1;
  opacity: 1; mix-blend-mode: screen;
}

/* ─── GLOBAL UTILITY ANIMATIONS ─── */
@keyframes bars-spin { to { transform: rotate(360deg); } }
@keyframes bars-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bars-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ─── ACCESSIBILITY ─── */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .metric-card, .price-card, .feature, .t-card, .kpi,
  .feat, .other-card, .idx-card, .faq-item {
    transition: none !important;
  }
}

/* ─── FALLBACK: No backdrop-filter support ─── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-ghost, .btn-secondary, .card, .metric-card, .price-card, .feature,
  .t-card, .kpi, .feat, .other-card, .idx-card, .modal, .modal-content,
  .popover, .dropdown-content, .drawer, .crm-input, .eyebrow, .badge,
  .mega-menu, .sidebar { background: rgba(18,18,18,.96); }
  .btn-primary { background: var(--btn-primary-bg, #fafafa); }
}