/* ================================================================
   DRPX — Design System v4.0
   drpx.css  |  Her sayfada yüklenir
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Cairo:wght@400;600;700;800&display=swap');

/* ── TOKENS ── */
:root {
  --nav-h: 68px;
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px;
  --fd: 'Syne', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fc: 'Cairo', sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --trans: all .22s var(--ease);
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg:      #07091a;
  --bg2:     #0c0f24;
  --bg3:     #12162e;
  --bg4:     #181d3a;
  --bg5:     #1f2545;
  --surf:    rgba(255,255,255,.04);
  --surf2:   rgba(255,255,255,.07);
  --surf3:   rgba(255,255,255,.11);
  --b:       rgba(255,255,255,.07);
  --b2:      rgba(255,255,255,.13);
  --b3:      rgba(255,255,255,.2);
  --accent:  #4f9cf9;
  --accent-d:#2563eb;
  --accent2: #a78bfa;
  --accent3: #34d399;
  --amber:   #fbbf24;
  --red:     #f87171;
  --text:    #e4e8ff;
  --text2:   rgba(228,232,255,.65);
  --text3:   rgba(228,232,255,.35);
  --nav-bg:  rgba(7,9,26,.85);
  --card:    rgba(18,22,46,.8);
  --input:   rgba(0,0,0,.35);
  --g1:      rgba(79,156,249,.2);
  --g2:      rgba(167,139,250,.14);
  --g3:      rgba(52,211,153,.08);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:      #f5f7ff;
  --bg2:     #eef1ff;
  --bg3:     #ffffff;
  --bg4:     #f0f3ff;
  --bg5:     #e8ecff;
  --surf:    rgba(0,0,0,.04);
  --surf2:   rgba(0,0,0,.07);
  --surf3:   rgba(0,0,0,.1);
  --b:       rgba(0,0,0,.07);
  --b2:      rgba(0,0,0,.12);
  --b3:      rgba(0,0,0,.2);
  --accent:  #2563eb;
  --accent-d:#1d4ed8;
  --accent2: #7c3aed;
  --accent3: #059669;
  --amber:   #d97706;
  --red:     #dc2626;
  --text:    #0f172a;
  --text2:   rgba(15,23,42,.65);
  --text3:   rgba(15,23,42,.38);
  --nav-bg:  rgba(245,247,255,.88);
  --card:    rgba(255,255,255,.85);
  --input:   rgba(255,255,255,.9);
  --g1:      rgba(37,99,235,.07);
  --g2:      rgba(124,58,237,.05);
  --g3:      rgba(5,150,105,.05);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .3s, color .2s;
  min-height: 100vh;
}
[dir="rtl"] body { font-family: var(--fc); }

/* ── ANIMATED BG ── */
.drpx-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.drpx-orb {
  position: absolute; border-radius: 50%;
  filter: blur(110px); will-change: transform;
  animation: orbDrift 24s ease-in-out infinite alternate;
}
.orb-a { width:680px; height:680px; background:var(--g1); top:-200px; left:-150px; animation-duration:22s; }
.orb-b { width:580px; height:580px; background:var(--g2); bottom:-200px; right:-100px; animation-delay:-11s; animation-duration:28s; }
.orb-c { width:380px; height:380px; background:var(--g3); top:40%; left:55%; animation-delay:-6s; animation-duration:18s; }
@keyframes orbDrift { from{transform:translate(0,0)scale(1)} to{transform:translate(55px,45px)scale(1.1)} }

.drpx-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--b) 1px,transparent 1px),
    linear-gradient(90deg,var(--b) 1px,transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, black, transparent);
}

/* ── NAV ── */
#drpx-nav {
  position: fixed; top:0; left:0; right:0; z-index:500;
  height: var(--nav-h);
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 52px;
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--b);
  transition: background .3s, box-shadow .3s;
}
#drpx-nav.scrolled {
  box-shadow: 0 4px 28px rgba(0,0,0,.14);
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-icon {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background: linear-gradient(135deg, #1a2a6c, #2d1b69);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(79,156,249,.3);
}
[data-theme="light"] .nav-logo-icon { background:linear-gradient(135deg,#2563eb,#7c3aed); }
.nav-wordmark {
  font-family:var(--fd); font-size:20px; font-weight:800;
  color:var(--text); letter-spacing:-.5px;
}
.nav-wordmark em { font-style:normal; color:var(--accent); }

.nav-center { display:flex; gap:28px; }
.nav-center a {
  font-size:14px; font-weight:500; color:var(--text2);
  text-decoration:none; transition:color .18s;
}
.nav-center a:hover { color:var(--text); }

.nav-right { display:flex; gap:10px; align-items:center; }

/* Lang switcher */
.lang-switcher { display:flex; border-radius:8px; overflow:hidden; border:1px solid var(--b2); background:rgba(0,0,0,.2); }
[data-theme="light"] .lang-switcher { background:rgba(0,0,0,.06); }
.lang-btn-item {
  padding:6px 10px; border:none; background:transparent; color:var(--text3);
  font-size:11px; font-weight:600; cursor:pointer; transition:all .18s; font-family:var(--fb);
}
.lang-btn-item:hover { color:var(--text2); }
.lang-btn-item.active { background:var(--accent); color:#fff; }

/* Theme toggle */
.theme-toggle {
  width:36px; height:36px; border-radius:9px; border:1px solid var(--b2);
  background:var(--surf); cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:15px; transition:var(--trans); color:var(--text2);
}
.theme-toggle:hover { background:var(--surf2); border-color:var(--accent); }

/* Nav buttons */
.btn-nav-ghost {
  padding:8px 18px; border-radius:var(--r); border:1px solid var(--b2);
  background:transparent; color:var(--text2); font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; transition:var(--trans); font-family:var(--fb);
}
.btn-nav-ghost:hover { background:var(--surf2); color:var(--text); }
.btn-nav-cta {
  padding:9px 22px; border-radius:var(--r); background:var(--accent);
  color:#fff; font-size:13px; font-weight:700; border:none; cursor:pointer;
  text-decoration:none; font-family:var(--fd);
  box-shadow:0 4px 14px rgba(79,156,249,.35); transition:var(--trans);
}
[data-theme="light"] .btn-nav-cta { box-shadow:0 4px 14px rgba(37,99,235,.28); }
.btn-nav-cta:hover { filter:brightness(1.1); transform:translateY(-1px); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r); border:none; cursor:pointer;
  font-family:var(--fd); font-weight:700; transition:var(--trans);
  text-decoration:none; white-space:nowrap; position:relative; overflow:hidden;
}
.btn::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  transition:left .45s;
}
.btn:hover::before { left:100%; }

.btn-lg  { padding:15px 36px; font-size:16px; border-radius:var(--r-lg); }
.btn-md  { padding:11px 24px; font-size:14px; }
.btn-sm  { padding:8px 16px; font-size:13px; }
.btn-xl  { padding:18px 44px; font-size:17px; border-radius:var(--r-lg); }

.btn-primary {
  background:var(--accent); color:#fff;
  box-shadow:0 6px 22px rgba(79,156,249,.35);
}
[data-theme="light"] .btn-primary { box-shadow:0 6px 22px rgba(37,99,235,.25); }
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 10px 30px rgba(79,156,249,.45); }

.btn-outline {
  background:var(--surf); color:var(--text); border:1px solid var(--b2);
}
.btn-outline:hover { background:var(--surf2); border-color:var(--accent); }

.btn-danger { background:rgba(248,113,113,.1); color:var(--red); border:1px solid rgba(248,113,113,.25); }
.btn-danger:hover { background:rgba(248,113,113,.18); }

.btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; filter:none !important; }

/* Spinner */
.spin {
  width:16px; height:16px; border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite; flex-shrink:0;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ── FORM ELEMENTS ── */
.field { display:flex; flex-direction:column; gap:7px; }
.field label {
  font-size:11px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.8px; font-family:var(--fd);
}
[dir="rtl"] .field label { letter-spacing:0; font-size:12px; }

input[type=text], input[type=email], input[type=password],
textarea, select {
  background:var(--input); border:1px solid var(--b2);
  border-radius:var(--r); color:var(--text); font-family:var(--fb);
  font-size:14px; padding:12px 16px; outline:none; transition:var(--trans); width:100%;
}
input:focus, textarea:focus, select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,156,249,.12);
  background:var(--surf2);
}
[data-theme="light"] input:focus { box-shadow:0 0 0 3px rgba(37,99,235,.1); }
input::placeholder, textarea::placeholder { color:var(--text3); }
input.err { border-color:var(--red); animation:shake .3s; }
input.ok  { border-color:var(--accent3); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
[dir="rtl"] input, [dir="rtl"] textarea { text-align:right; }

/* ── CARDS ── */
.card {
  background:var(--card); backdrop-filter:blur(16px);
  border:1px solid var(--b2); border-radius:var(--r-xl);
  position:relative; overflow:hidden;
}
.card-pad { padding:28px 32px; }
.card-hover { transition:var(--trans); }
.card-hover:hover { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 20px 50px rgba(0,0,0,.18),0 0 0 1px rgba(79,156,249,.12); }

/* ── SECTION ── */
.section { position:relative; z-index:1; padding:96px 24px; }
.section-inner { max-width:1160px; margin:0 auto; }
.section-sm { padding:64px 24px; }

.sec-tag {
  display:inline-block; font-family:var(--fd); font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--accent);
  background:rgba(79,156,249,.1); border:1px solid rgba(79,156,249,.2);
  border-radius:100px; padding:5px 14px; margin-bottom:18px;
}
[data-theme="light"] .sec-tag { background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.18); }
[dir="rtl"] .sec-tag { letter-spacing:0; }

.sec-h {
  font-family:var(--fd);
  font-size:clamp(30px,4.5vw,52px);
  font-weight:800; letter-spacing:-1.5px; line-height:1.1;
  margin-bottom:16px; color:var(--text);
}
.sec-sub { font-size:17px; color:var(--text2); line-height:1.7; max-width:520px; }

/* ── ALERTS ── */
.alert {
  display:flex; align-items:flex-start; gap:10px;
  border-radius:var(--r-sm); padding:12px 16px;
  font-size:13px; line-height:1.5; animation:fadeUp .2s;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.alert-err     { background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.22); color:#fca5a5; }
.alert-success { background:rgba(52,211,153,.08);  border:1px solid rgba(52,211,153,.22);  color:var(--accent3); }
.alert-warn    { background:rgba(251,191,36,.07);  border:1px solid rgba(251,191,36,.22);  color:var(--amber); }
.alert-info    { background:rgba(79,156,249,.07);  border:1px solid rgba(79,156,249,.22);  color:var(--accent); }
.alert:empty   { display:none; }

/* ── BADGE / CHIP ── */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; padding:4px 12px; border-radius:100px;
  font-family:var(--fd); letter-spacing:.3px;
}
.chip-accent  { background:rgba(79,156,249,.12); color:var(--accent); border:1px solid rgba(79,156,249,.25); }
.chip-green   { background:rgba(52,211,153,.12); color:var(--accent3); border:1px solid rgba(52,211,153,.28); }
.chip-amber   { background:rgba(251,191,36,.1);  color:var(--amber); border:1px solid rgba(251,191,36,.25); }
.chip-red     { background:rgba(248,113,113,.1); color:var(--red); border:1px solid rgba(248,113,113,.25); }
.chip-purple  { background:rgba(167,139,250,.1); color:var(--accent2); border:1px solid rgba(167,139,250,.25); }

/* Pulse dot */
.pulse-dot {
  width:7px; height:7px; border-radius:50%; background:currentColor;
  animation:pdot 2s ease-in-out infinite;
}
@keyframes pdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.75)} }

/* ── FAQ ── */
.faq-list { border:1px solid var(--b2); border-radius:var(--r-xl); overflow:hidden; }
.faq-item { border-bottom:1px solid var(--b); background:var(--card); }
.faq-item:last-child { border-bottom:none; }
.faq-q {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; cursor:pointer; font-family:var(--fd); font-size:16px;
  font-weight:600; color:var(--text); gap:16px; user-select:none; transition:color .15s;
}
.faq-q:hover, .faq-item.open .faq-q { color:var(--accent); }
.faq-arrow { width:20px; height:20px; flex-shrink:0; transition:transform .25s; color:var(--text3); }
.faq-item.open .faq-arrow { transform:rotate(180deg); color:var(--accent); }
.faq-a {
  font-size:15px; color:var(--text2); line-height:1.75;
  max-height:0; overflow:hidden; padding:0 28px;
  transition:max-height .35s var(--ease), padding .3s;
}
.faq-item.open .faq-a { max-height:300px; padding:0 28px 24px; }

/* ── PRICING TABLE ── */
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.plan-card {
  background:var(--card); backdrop-filter:blur(16px);
  border:1px solid var(--b2); border-radius:var(--r-xl);
  padding:36px 30px; position:relative; transition:var(--trans);
}
.plan-card:hover { transform:translateY(-5px); box-shadow:0 16px 48px rgba(0,0,0,.16); }
.plan-card.featured {
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(79,156,249,.3), 0 8px 36px rgba(79,156,249,.14);
}
[data-theme="light"] .plan-card.featured {
  box-shadow:0 0 0 1px rgba(37,99,235,.3), 0 8px 36px rgba(37,99,235,.1);
}
.plan-popular {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  padding:4px 18px; border-radius:100px; font-family:var(--fd); white-space:nowrap;
}
.plan-name { font-family:var(--fd); font-size:13px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; }
.plan-price { font-family:var(--fd); font-size:52px; font-weight:800; letter-spacing:-2px; line-height:1; }
.plan-price sup { font-size:24px; font-weight:700; vertical-align:super; letter-spacing:0; }
.plan-period { font-size:13px; color:var(--text3); margin-top:4px; margin-bottom:26px; }
.plan-sep { height:1px; background:var(--b); margin-bottom:22px; }
.plan-feats { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.plan-feats li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text2); }
.plan-feats li::before { content:'✓'; color:var(--accent3); font-weight:800; font-size:12px; flex-shrink:0; }
.plan-feats li.no { color:var(--text3); }
.plan-feats li.no::before { content:'–'; color:var(--text3); }

/* ── DASHBOARD LAYOUT ── */
.dash-layout { display:flex; min-height:100vh; }
.dash-sidebar {
  width:240px; flex-shrink:0; background:var(--bg2);
  border-right:1px solid var(--b); position:fixed; top:0; left:0; bottom:0; z-index:100;
  display:flex; flex-direction:column; padding:20px 12px;
  transition:background .3s;
}
[dir="rtl"] .dash-sidebar { left:auto; right:0; border-right:none; border-left:1px solid var(--b); }
.dash-main {
  flex:1; margin-left:240px; min-height:100vh;
  display:flex; flex-direction:column;
}
[dir="rtl"] .dash-main { margin-left:0; margin-right:240px; }

.dash-logo-wrap { display:flex; align-items:center; gap:10px; padding:8px 8px 20px; border-bottom:1px solid var(--b); margin-bottom:16px; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.sidebar-link {
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:var(--r); color:var(--text2); text-decoration:none;
  font-size:14px; font-weight:500; transition:var(--trans); cursor:pointer;
}
.sidebar-link:hover { background:var(--surf2); color:var(--text); }
.sidebar-link.active { background:rgba(79,156,249,.12); color:var(--accent); font-weight:600; border:1px solid rgba(79,156,249,.18); }
.sidebar-icon { width:18px; text-align:center; font-size:16px; flex-shrink:0; }
.sidebar-footer { border-top:1px solid var(--b); padding-top:12px; margin-top:8px; }

.dash-topbar {
  height:60px; background:var(--bg2); border-bottom:1px solid var(--b);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px;
  position:sticky; top:0; z-index:50;
}
.dash-content { padding:32px 28px; flex:1; }

/* ── STAT CARDS ── */
.stat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:28px; }
.stat-card {
  background:var(--bg3); border:1px solid var(--b);
  border-radius:var(--r-lg); padding:20px 18px; text-align:center;
  position:relative; overflow:hidden; transition:var(--trans);
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0; transition:opacity .3s;
}
.stat-card:hover::before { opacity:1; }
.stat-val { font-family:var(--fd); font-size:34px; font-weight:800; line-height:1; margin-bottom:5px; }
.stat-lbl { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.8px; }
.stat-green  .stat-val { color:var(--accent3); text-shadow:0 0 16px rgba(52,211,153,.3); }
.stat-amber  .stat-val { color:var(--amber); text-shadow:0 0 16px rgba(251,191,36,.25); }
.stat-red    .stat-val { color:var(--red); text-shadow:0 0 16px rgba(248,113,113,.25); }
.stat-purple .stat-val { color:var(--accent2); text-shadow:0 0 16px rgba(167,139,250,.25); }

/* ── PRODUCT CARDS ── */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:20px; }
.prod-card {
  background:var(--bg3); border:1px solid var(--b);
  border-radius:var(--r-xl); overflow:hidden; transition:var(--trans); cursor:pointer;
}
.prod-card:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 18px 48px rgba(0,0,0,.22),0 0 0 1px rgba(79,156,249,.12); }
.prod-img-wrap { overflow:hidden; }
.prod-img { width:100%; height:200px; object-fit:cover; background:var(--bg4); display:block; transition:transform .4s; }
.prod-card:hover .prod-img { transform:scale(1.04); }
.prod-img-ph { width:100%; height:200px; background:var(--bg4); display:flex; align-items:center; justify-content:center; font-size:44px; color:var(--text3); }
.prod-badge { position:absolute; top:12px; right:12px; }
.prod-body { padding:18px 20px 20px; }
.prod-cat { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px; font-family:var(--fd); }
.prod-name { font-family:var(--fd); font-size:15px; font-weight:600; line-height:1.4; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prod-price { font-family:var(--fd); font-size:22px; font-weight:800; color:var(--amber); margin-bottom:10px; }
.prod-score { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.score-track { flex:1; height:4px; background:var(--surf3); border-radius:2px; overflow:hidden; }
.score-bar { height:100%; border-radius:2px; transition:width 1.2s var(--ease); }
.score-num { font-family:var(--fd); font-size:12px; font-weight:700; }
.prod-meta { font-size:11px; color:var(--text3); }

/* ── FOOTER ── */
.footer {
  background:var(--bg2); border-top:1px solid var(--b);
  position:relative; z-index:1;
}
.footer-top {
  max-width:1160px; margin:0 auto;
  padding:60px 24px 40px;
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:40px;
}
.footer-desc { font-size:14px; color:var(--text3); line-height:1.7; margin-top:14px; max-width:260px; }
.footer-tagline { font-family:var(--fd); font-size:11px; font-weight:700; letter-spacing:1.5px; color:var(--text3); text-transform:uppercase; margin-top:16px; }
.footer-tagline span { color:var(--accent); }
.footer-col h4 { font-family:var(--fd); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text3); margin-bottom:14px; }
.footer-col a { display:block; font-size:14px; color:var(--text2); text-decoration:none; margin-bottom:9px; transition:color .15s; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom {
  border-top:1px solid var(--b); padding:18px 24px;
  max-width:1160px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-copy { font-size:13px; color:var(--text3); }

/* ── SCROLL BAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--b2); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--b3); }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,10,.72); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box {
  background:var(--bg3); border:1px solid var(--b2); border-radius:var(--r-xl);
  padding:32px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  transform:scale(.96) translateY(12px);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 24px 64px rgba(0,0,0,.4);
}
.modal-overlay.open .modal-box { transform:scale(1) translateY(0); }

/* ── UTILITIES ── */
.hidden { display:none !important; }
.text-accent { color:var(--accent); }
.text-green  { color:var(--accent3); }
.text-amber  { color:var(--amber); }
.text-red    { color:var(--red); }
.text-muted  { color:var(--text3); }
.fw-700 { font-weight:700; }
.fd     { font-family:var(--fd); }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .dash-sidebar { transform:translateX(-100%); }
  [dir="rtl"] .dash-sidebar { transform:translateX(100%); }
  .dash-sidebar.open { transform:translateX(0); }
  .dash-main { margin-left:0; }
  [dir="rtl"] .dash-main { margin-right:0; }
  .stat-grid { grid-template-columns:repeat(3,1fr); }
  .plans-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; gap:28px; }
}
@media(max-width:768px) {
  #drpx-nav { padding:0 20px; }
  .nav-center { display:none; }
  .section { padding:64px 20px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .products-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .dash-content { padding:20px 16px; }
}