/* =====================================================================
   Tema Cendekia Muslim (selaras UPZ) — HALAMAN PUBLIK
   (beranda, login, lupa/atur ulang sandi, verifikasi, galat)
   Dimuat SETELAH gaya bawaan halaman; hanya tampilan.
   ===================================================================== */
:root {
    --cm-950:#002618; --cm-900:#003d25; --cm-800:#005331; --cm-700:#00683b; --cm-600:#007f47; --cm-500:#00a35a;
    --cm-gold:#f9cf06; --cm-gold-500:#f5b70d; --cm-gold-600:#ef8119; --cm-sea:#019ca6;
    --cm-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.5'%3E%3Crect x='35' y='35' width='50' height='50'/%3E%3Crect x='35' y='35' width='50' height='50' transform='rotate(45 60 60)'/%3E%3C/g%3E%3C/svg%3E");
    --cm-hero:radial-gradient(1200px 600px at 85% -10%, rgba(1,156,166,.35), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(239,129,25,.18), transparent 60%), linear-gradient(135deg, #002618 0%, #005331 55%, #00683b 100%);
    --primary-50:#edfaf2; --primary-100:#d2f3df; --primary-200:#a6e6c2; --primary-300:#6dd29d; --primary-400:#2fb877;
    --primary-500:#00a35a; --primary-600:#007f47; --primary-700:#00683b; --primary-800:#005331; --primary-900:#003d25;
    --gold-400:#f9cf06; --gold-500:#f5b70d; --gold-600:#ef8119; --accent:#ef8119;
    --primary:#00683b; --primary-dark:#005331; --primary-light:#00a35a;
}
body { font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }

/* ---------- Beranda: bilah kontak disembunyikan, navigasi transparan di atas hero ---------- */
body.cm-landing > .header { display:none !important; }
body.cm-landing > nav.nav { top:0 !important; background:transparent !important; box-shadow:none !important; border-bottom:1px solid transparent; transition:background .3s, box-shadow .3s, border-color .3s; }
body.cm-landing > nav.nav .logo-title { color:#fff !important; font-weight:800; }
body.cm-landing > nav.nav .logo-subtitle { color:rgba(236,253,245,.75) !important; }
body.cm-landing > nav.nav .logo-icon { background:transparent !important; box-shadow:none !important; }
body.cm-landing > nav.nav .logo-icon img { content:url('../img/logo-cm.png?v=2'); object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
body.cm-landing > nav.nav .nav-link { color:rgba(255,255,255,.85) !important; background:transparent !important; font-weight:600; position:relative; }
body.cm-landing > nav.nav .nav-link:hover { color:#fff !important; }
body.cm-landing > nav.nav .nav-link.active { color:#fff !important; }
body.cm-landing > nav.nav .nav-link.active::after { content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--cm-gold),var(--cm-gold-600)); }
body.cm-landing > nav.nav .btn-ghost { color:#fff !important; background:transparent !important; }
body.cm-landing > nav.nav .btn-primary { background:linear-gradient(90deg,var(--cm-gold),var(--cm-gold-500),var(--cm-gold-600)) !important; color:var(--cm-950) !important; border:0 !important; box-shadow:0 8px 20px rgba(239,129,25,.3) !important; }
body.cm-landing > nav.nav .mobile-menu-btn { color:#fff !important; background:rgba(255,255,255,.1) !important; }
/* Setelah digulir: navigasi putih seperti UPZ */
body.cm-landing > nav.nav.cm-scrolled { background:rgba(255,255,255,.94) !important; backdrop-filter:blur(10px); box-shadow:0 1px 0 #e2e8f0, 0 8px 24px rgba(0,38,24,.06) !important; }
body.cm-landing > nav.nav.cm-scrolled .logo-title { color:var(--cm-800) !important; }
body.cm-landing > nav.nav.cm-scrolled .logo-subtitle { color:#64748b !important; }
body.cm-landing > nav.nav.cm-scrolled .nav-link { color:#334155 !important; }
body.cm-landing > nav.nav.cm-scrolled .nav-link.active { color:var(--cm-700) !important; }
body.cm-landing > nav.nav.cm-scrolled .btn-ghost { color:var(--cm-800) !important; }
body.cm-landing > nav.nav.cm-scrolled .mobile-menu-btn { color:var(--cm-800) !important; background:#f1f5f9 !important; }

/* Hero */
body.cm-landing .hero { background-color:#002618 !important; background-image:var(--cm-star), var(--cm-hero) !important; background-size:120px 120px, 100% 100%, 100% 100%, 100% 100% !important; background-repeat:repeat, no-repeat, no-repeat, no-repeat !important; padding-top:120px !important; min-height:auto !important; padding-bottom:110px !important; }
body.cm-landing .hero::after { background:none !important; }
body.cm-landing .hero::before { opacity:.6; }
body.cm-landing .hero-title span { background:linear-gradient(90deg,var(--cm-gold),var(--cm-gold-600)); -webkit-background-clip:text; background-clip:text; color:transparent !important; }
body.cm-landing .hero-badge { background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.2) !important; backdrop-filter:blur(6px); }
body.cm-landing .hero-badge-icon { background:linear-gradient(135deg,var(--cm-gold),var(--cm-gold-600)) !important; color:var(--cm-950) !important; }
/* Lengkung putih di bawah hero seperti UPZ */
body.cm-landing .hero { position:relative; }
body.cm-landing .hero > .cm-wave { position:absolute; left:0; right:0; bottom:-1px; height:70px; pointer-events:none; }

/* Tombol publik */
body.cm-public .btn-primary, body.cm-public .login-btn, body.cm-public button[type=submit].btn { background:var(--cm-700) !important; border-color:var(--cm-700) !important; color:#fff !important; box-shadow:0 6px 18px rgba(0,83,49,.25) !important; }
body.cm-public .btn-primary:hover, body.cm-public .login-btn:hover { background:var(--cm-800) !important; }
body.cm-landing .hero .btn-primary, body.cm-landing .hero .btn-accent, body.cm-landing .hero .btn-gold, body.cm-landing .hero .btn-warning,
body.cm-landing .cta .btn-primary, body.cm-landing .cta-section .btn-primary { background:linear-gradient(90deg,var(--cm-gold),var(--cm-gold-500),var(--cm-gold-600)) !important; color:var(--cm-950) !important; border:0 !important; box-shadow:0 10px 24px rgba(239,129,25,.3) !important; }
body.cm-landing .hero .btn-outline, body.cm-landing .hero .btn-secondary, body.cm-landing .hero .btn-white { background:rgba(255,255,255,.08) !important; color:#fff !important; border:1px solid rgba(255,255,255,.3) !important; }

/* Kartu beranda */
body.cm-landing .service-card, body.cm-landing .feature-card, body.cm-landing .division-card, body.cm-landing .step-card, body.cm-landing .card { border-radius:18px !important; border:1px solid #e2e8f0 !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important; transition:transform .25s, box-shadow .25s; }
body.cm-landing .service-card:hover, body.cm-landing .feature-card:hover, body.cm-landing .division-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,38,24,.10) !important; }
body.cm-landing .section-badge, body.cm-landing .section-label, body.cm-landing .section-tag { color:var(--cm-700) !important; background:transparent !important; letter-spacing:.18em; text-transform:uppercase; font-weight:800; font-size:12px; }
body.cm-landing .section-title { color:#0f172a; font-weight:800; letter-spacing:-.02em; }
body.cm-landing footer, body.cm-landing .footer { background-color:#002618 !important; background-image:linear-gradient(90deg,#f9cf06,#00c263,#019ca6), var(--cm-star) !important; background-size:100% 4px, 120px 120px !important; background-position:top left, 0 0 !important; background-repeat:no-repeat, repeat !important; }
body.cm-landing footer::before, body.cm-landing .footer::before { content:none !important; display:none !important; }
/* Logo footer: transparan, tanpa ubin */
body.cm-landing .footer-logo-icon { background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; }
body.cm-landing .footer-logo-icon img { content:url('../img/logo-cm.png?v=2'); object-fit:contain; width:100%; height:100%; }

/* ---------- Login & halaman autentikasi (gaya kartu tengah UPZ) ---------- */
body.cm-auth { background-color:#002618 !important; background-image:var(--cm-star), var(--cm-hero) !important; background-size:120px 120px, 100% 100%, 100% 100%, 100% 100% !important; background-repeat:repeat, no-repeat, no-repeat, no-repeat !important; background-attachment:fixed !important; min-height:100vh; }
body.cm-auth .login-page { background:transparent !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; min-height:100vh; padding:32px 16px !important; gap:20px; }
body.cm-auth .login-page::before, body.cm-auth .login-page::after { display:none !important; }
body.cm-auth .login-left { background:transparent !important; flex:none !important; width:100% !important; max-width:440px; padding:0 !important; display:flex !important; text-align:center; }
body.cm-auth .login-left::before, body.cm-auth .login-left::after { display:none !important; }
body.cm-auth .login-features, body.cm-auth .login-left .login-desc, body.cm-auth .login-left p:not(.login-brand-sub) { display:none !important; }
body.cm-auth .login-branding { margin:0 auto !important; align-items:center !important; text-align:center; }
body.cm-auth .login-logo { width:92px !important; height:92px !important; margin:0 auto 12px !important; background:transparent !important; border:0 !important; backdrop-filter:none !important; box-shadow:none !important; border-radius:0 !important; }
body.cm-auth .login-logo img, body.cm-auth .login-branding > img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 20px rgba(0,0,0,.3)); }
body.cm-auth .login-branding h1 span { color:var(--cm-gold) !important; }
body.cm-auth .login-branding h2 { font-size:14px !important; font-weight:600 !important; color:rgba(236,253,245,.8) !important; margin-top:2px !important; }
body.cm-auth .login-form { background:transparent !important; padding:0 !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; }
body.cm-auth .login-header h3 { color:#0f172a !important; font-weight:800; font-size:22px !important; }
body.cm-auth .login-branding h1, body.cm-auth .login-branding h2, body.cm-auth .login-brand-title { color:#fff !important; font-size:20px !important; font-weight:800 !important; }
body.cm-auth .login-branding span, body.cm-auth .login-brand-sub { color:rgba(236,253,245,.75) !important; }
body.cm-auth .login-right { background:transparent !important; width:100% !important; min-width:0 !important; max-width:440px; padding:0 !important; flex:none !important; }
body.cm-auth .login-form-container { background:#fff !important; border-radius:24px !important; padding:32px !important; box-shadow:0 30px 60px rgba(0,0,0,.25) !important; width:100%; }
body.cm-auth .login-brand-mobile { display:none !important; }
body.cm-auth .login-header h2, body.cm-auth .login-header h1 { color:#0f172a !important; font-weight:800; font-size:22px !important; }
body.cm-auth .form-input, body.cm-auth input.form-control { border-radius:12px !important; }
body.cm-auth .form-input:focus, body.cm-auth input.form-control:focus { border-color:var(--cm-500) !important; box-shadow:0 0 0 4px rgba(0,163,90,.14) !important; }
body.cm-auth .login-footer, body.cm-auth .login-footer p, body.cm-auth .login-footer small { color:#64748b !important; text-align:center; }
body.cm-auth .login-footer a { color:var(--cm-700) !important; font-weight:600; }
/* Logo Cendekia (seragam dengan UPZ) */
body.cm-auth .login-logo img { content:url('../img/logo-cm.png?v=2'); }
body.cm-auth .cm-tagline { margin-top:4px; text-align:center; font-size:11px; font-weight:800; letter-spacing:.22em; color:var(--cm-gold); text-transform:uppercase; }

/* ---------- Halaman publik lain (verifikasi, galat, lupa sandi) ---------- */
body.cm-plain { background-color:#002618 !important; background-image:var(--cm-star), var(--cm-hero) !important; background-size:120px 120px, 100% 100%, 100% 100%, 100% 100% !important; background-repeat:repeat, no-repeat, no-repeat, no-repeat !important; background-attachment:fixed !important; min-height:100vh; }
body.cm-plain .verify-card, body.cm-plain .card, body.cm-plain .container > .box, body.cm-plain .error-card, body.cm-plain .auth-card, body.cm-plain .reset-card, body.cm-plain .forgot-card { border-radius:22px !important; box-shadow:0 30px 60px rgba(0,0,0,.22) !important; }

@media (max-width: 991px) {
    body.cm-landing > nav.nav { background:rgba(0,38,24,.85) !important; backdrop-filter:blur(10px); }
    body.cm-landing > nav.nav.cm-scrolled { background:rgba(255,255,255,.96) !important; }
}