/* ═══════════════ TaqwaGPT Shared CSS ═══════════════ */
:root {
  --bg:#f8faf7;--bg2:#ffffff;--bg3:#f0f5f0;--bg-card:#ffffff;
  --bg-primary:#f8faf7;--bg-surface:#f0f5f0;
  --emerald:#059669;--eglow:rgba(5,150,105,0.12);--edim:rgba(5,150,105,0.06);
  --gold:#b8860b;--gglow:rgba(184,134,11,0.08);
  --text:#111814;--t2:#4a5550;--t3:#8a958e;
  --border:#dde5df;--blight:#c5d0c7;
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:9999px;
  --font:'Inter',system-ui,sans-serif;--arabic:'Amiri',serif;
  --t:0.3s cubic-bezier(0.4,0,0.2,1);
  --nav-bg:rgba(248,250,247,0.9);--card-glow:rgba(5,150,105,0.06);
  --sh:0 2px 16px rgba(0,0,0,0.06);
  --grad:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(5,150,105,0.03) 0%,transparent 70%);
  --red:#ef4444;--red-glow:rgba(239,68,68,0.1);
  --max-w:1100px;
}
[data-theme="dark"]{
  --bg:#080c0a;--bg2:#0d1410;--bg3:#111a14;--bg-card:#152018;
  --bg-primary:#080c0a;--bg-surface:#111a14;
  --emerald:#10b981;--eglow:rgba(16,185,129,0.15);--edim:rgba(16,185,129,0.08);
  --gold:#d4a853;--gglow:rgba(212,168,83,0.1);
  --text:#e8ede9;--t2:#9ca89f;--t3:#5c6b62;
  --border:#1e2d23;--blight:#28382e;
  --nav-bg:rgba(8,12,10,0.85);--card-glow:rgba(16,185,129,0.04);
  --sh:0 4px 32px rgba(0,0,0,0.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh}
a{color:var(--emerald);text-decoration:none;transition:all var(--t)}
a:hover{color:var(--gold)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
[lang-id],[lang-en]{display:none}
html[lang="id"] [lang-id]{display:revert}
html[lang="en"] [lang-en]{display:revert}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);height:56px;display:flex;align-items:center}
.nav-inner{max-width:var(--max-w);margin:0 auto;width:100%;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:18px;color:var(--text);text-decoration:none}
.nav-logo .ta{font-family:var(--arabic);font-size:26px;color:var(--emerald);line-height:1}
.nav-links{display:flex;gap:2px}
.nav-links a{color:var(--t2);font-size:13px;padding:8px 14px;border-radius:var(--r-sm);text-decoration:none;transition:all var(--t);font-weight:500}
.nav-links a:hover{color:var(--emerald);background:var(--bg3)}
.nav-links a.active{color:var(--emerald);background:var(--eglow);font-weight:600}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-cta{background:var(--emerald);color:#fff;padding:8px 18px;border-radius:var(--r-pill);font-weight:600;font-size:13px;border:none;cursor:pointer;font-family:var(--font);transition:all var(--t)}
.nav-cta:hover{box-shadow:0 0 20px var(--eglow);transform:translateY(-1px)}
.nav-user{display:none;align-items:center;gap:8px}
.nav-user-pts{font-size:12px;color:var(--gold);font-weight:600}
.nav-user-name{font-size:12px;color:var(--text);font-weight:500}
.btn-icon{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.btn-icon:hover{border-color:var(--gold)}
.btn-sm{font-size:10px;padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg2);color:var(--t2);cursor:pointer;font-family:var(--font)}

/* ═══ FOOTER ═══ */
.footer{border-top:1px solid var(--border);padding:48px 24px 28px;background:var(--bg-primary);margin-top:80px}
.footer-grid{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.footer-brand{flex:2;min-width:250px}
.footer-col{flex:1;min-width:140px}
.footer-col h4{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.footer-col a{display:block;color:var(--t2);font-size:13px;text-decoration:none;margin-bottom:8px}
.footer-col a:hover{color:var(--emerald)}
.footer-bottom{max-width:var(--max-w);margin:32px auto 0;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--t3)}

/* ═══ BUTTONS ═══ */
.btn{padding:12px 24px;border-radius:var(--r-md);font-weight:600;font-size:14px;cursor:pointer;font-family:var(--font);border:none;transition:all var(--t);display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--emerald);color:#fff}
.btn-primary:hover{box-shadow:0 0 24px var(--eglow);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--border);background:transparent;color:var(--text)}
.btn-outline:hover{border-color:var(--emerald);color:var(--emerald)}
.btn-lg{padding:16px 32px;font-size:16px}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}

/* ═══ MODAL ═══ */
.modal-overlay{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;max-width:440px;width:90%;max-height:90vh;overflow-y:auto;animation:fadeIn 0.2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ═══ FORM ═══ */
.form-input{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:var(--r-md);font-size:14px;font-family:var(--font);outline:none;margin-bottom:10px;transition:border var(--t)}
.form-input:focus{border-color:var(--emerald)}
.form-input::placeholder{color:var(--t3)}

/* ═══ TOAST ═══ */
.toast{position:fixed;bottom:24px;right:24px;z-index:9999;background:var(--emerald);color:#fff;font-weight:600;padding:12px 24px;border-radius:var(--r-pill);font-size:13px;animation:slideUp 0.3s ease;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.toast.error{background:var(--red)}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .nav-links{display:none}
  .nav{padding:0 14px;height:52px}
  body{padding-top:52px}
  .footer-grid{gap:24px}
}
@media(max-width:480px){
  body{font-size:14px}
  .footer-grid{flex-direction:column;gap:20px}
}