/* Bright public homepage. Kept separate from engineering workspaces. */
body.homepage {
    --bg-darkest:#f8fafc; --bg-main:#fff; --bg-surface:#f1f5f9;
    --bg-card:#fff; --bg-card-hover:#f8fbff; --bg-card-glass:rgba(255,255,255,.95);
    --text-main:#142b49; --text-sub:#334b65; --text-muted:#52657b;
    --border-color:#dce5ef; --border-light:#e7edf4; --border-glow:#a8c6ef;
    --primary:#215bc7; --primary-hover:#1749a6; --primary-light:#2867d4;
    --cyan:#087f96; --amber:#99640b; --amber-light:#a46506;
    --emerald-light:#087548; --shadow-card:0 8px 28px rgba(25,54,91,.06);
    --shadow-glow:0 6px 18px rgba(33,91,199,.15);
    background:#fff; color:var(--text-main);
}
.homepage::before { display:none; }
.homepage .page-wrapper { overflow:clip; }
.homepage .container { max-width:1200px; }
.homepage .navbar { background:rgba(255,255,255,.97); padding:18px max(24px,calc((100vw - 1320px)/2)); border-bottom:1px solid #e4ebf3; gap:24px; box-shadow:0 2px 12px rgba(25,54,91,.03); }
.homepage .logo-brand { flex-shrink:0; }
.homepage .logo-brand .sipil { color:#152f50; }
.homepage .logo-brand .smart { background:none; -webkit-text-fill-color:#215bc7; color:#215bc7; }
.homepage .logo-icon { box-shadow:none; background:#215bc7; }
.homepage .logo-icon svg { width:26px; height:26px; }
.homepage .nav-menu { gap:20px; }
.homepage .nav-link { font-size:12px; white-space:nowrap; }
.homepage .nav-link:hover,.homepage .nav-link.active { color:#215bc7; }
.homepage .nav-contact { color:#087548; }
.homepage .nav-actions { gap:8px; flex-shrink:0; }
.homepage .btn { border-radius:9px; box-shadow:none; font-weight:700; }
.homepage .btn-primary,.homepage .btn-glow { background:#215bc7; border-color:#215bc7; color:#fff; }
.homepage .btn-primary:hover,.homepage .btn-glow:hover { background:#1749a6; box-shadow:0 6px 16px rgba(33,91,199,.16); }
.homepage .btn-outline { border-color:#cbd8e8; color:#244365; background:#fff; }
.homepage .btn-outline:hover { border-color:#215bc7; color:#215bc7; background:#f3f7ff; }
.homepage .btn-gold { background:#fff4db; border:1px solid #e5c77e; color:#704706; }
.homepage .btn-gold:hover { background:#ffedc3; }
.homepage .btn-whatsapp { background:#087548; color:#fff; }
.homepage .hero { padding:84px max(24px,calc((100vw - 1200px)/2)) 90px; min-height:620px; gap:60px; background:linear-gradient(115deg,#f5f9ff 0%,#fff 57%,#edf6fb 100%); border-bottom:1px solid #e7edf4; }
.homepage .hero-content { min-width:0; }
.homepage .hero-pill { background:#e9f1ff; color:#215bc7; border:1px solid #d7e5fa; font-size:11px; letter-spacing:.08em; padding:8px 14px; }
.homepage .hero-title { font-size:clamp(34px,4vw,54px); line-height:1.15; letter-spacing:-1.8px; font-weight:800; }
.homepage .hero-title .highlight { background:none; -webkit-text-fill-color:#215bc7; color:#215bc7; }
.homepage .hero-desc { font-size:16px; line-height:1.85; max-width:570px; margin-bottom:28px; }
.homepage .hero-btns { gap:12px; margin-bottom:30px; }
.homepage .hero-stats { padding-top:24px; gap:20px; }
.homepage .stat-item h4 { color:#17375e; font-size:21px; }
.homepage .stat-item p { margin-top:5px; font-size:12px; }
.homepage .hero-media { min-width:0; width:100%; }
.homepage .hero-visual-card { background:#fff; padding:10px; box-shadow:0 24px 55px rgba(28,58,94,.13); border-color:#d9e5f0; transform:rotate(1deg); }
.homepage .hero-img-wrap { aspect-ratio:4/3; }
.homepage .floating-badge { background:#fff; border:1px solid #dce5ef; color:#142b49; box-shadow:0 12px 30px rgba(28,58,94,.12); right:18px; bottom:-22px; max-width:calc(100% - 36px); }
.homepage .badge-text h5 { color:#17375e; }
.homepage .section-py { padding:76px 0; scroll-margin-top:90px; }
.homepage .section-soft,.homepage .app-directory { background:#f7f9fc; border-top:1px solid #edf1f6; border-bottom:1px solid #edf1f6; }
.homepage .legacy-app-directory { display:none; }
.homepage .section-title-wrap { margin-bottom:36px; }
.homepage .section-tag { color:#215bc7; background:#eaf1fd; border-color:#d7e5fa; letter-spacing:.08em; }
.homepage .section-heading { font-size:clamp(27px,3vw,36px); color:#17375e; line-height:1.3; letter-spacing:-.8px; }
.homepage .section-desc { color:#52657b; line-height:1.8; max-width:700px; }
.homepage .app-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:20px; }
.homepage .app-card { background:#fff; border:1px solid #dce5ef; box-shadow:0 3px 12px rgba(25,54,91,.025); padding:24px; min-height:200px; }
.homepage .app-card-ready:hover { border-color:#a6c2ea; background:#fff; box-shadow:0 10px 24px rgba(25,54,91,.08); transform:translateY(-3px); }
.homepage .app-card-planned { opacity:1; background:#f0f3f7; }
.homepage .app-card-icon { background:#edf3ff; color:#215bc7; }
.homepage .app-card-icon i { font-size:24px; }
.homepage .app-card-status { color:#087548; }
.homepage .app-card-status-premium,.homepage .app-card-planned .app-card-status { color:#8b5c0b; }
.homepage .app-card-action { color:#215bc7; }
.homepage .app-group-index { background:#e7effc; color:#215bc7; padding:6px 9px; border-radius:6px; }
.homepage .features-grid,.homepage .video-grid,.homepage .bank-grid { gap:24px; }
.homepage .feature-box,.homepage .video-card,.homepage .bank-card { background:#fff; border:1px solid #dce5ef; box-shadow:var(--shadow-card); }
.homepage .feature-box { padding:28px; }
.homepage .feature-box-link { display:block; color:inherit; text-decoration:none; }
.homepage .feature-box-action { display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:#215bc7; font-size:13px; font-weight:700; }
.homepage .feature-box:hover,.homepage .video-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(25,54,91,.09); }
.homepage .feature-icon { background:#edf3ff; box-shadow:none; }
.homepage .feature-box h3,.homepage .video-title,.homepage .bank-name { color:#17375e; }
.homepage .video-locked-overlay { background:#edf3fa; color:#17375e; }
.homepage .video-locked-overlay h4 { color:#17375e; }
.homepage .video-footer a { color:#215bc7; }
.homepage .pricing-card { background:#fff; padding:38px; box-shadow:0 12px 35px rgba(25,54,91,.07); }
.homepage .pricing-card.gold-border { border:1px solid #dec58b; }
.homepage .pricing-badge-popular { background:#fff0cd; color:#704706; box-shadow:none; }
.homepage .price-current { color:#17375e; font-size:44px; }
.homepage .premium-duration { color:#215bc7; }
.homepage .badge-cyan,.homepage .badge-primary { background:#eaf1fd; color:#215bc7; }
.homepage .badge-emerald { background:#e8f5ee; color:#087548; }
.homepage .badge-gold { background:#fff3db; color:#80540b; }
.homepage .bank-card-bsi { background:#f4fbf9; }
.homepage .bank-number { color:#215bc7; font-size:clamp(21px,3vw,28px); overflow-wrap:anywhere; }
.homepage .bank-card-bsi .bank-number { color:#08756f; }
.homepage .faq-item { background:#fff; border-color:#dce5ef; }
.homepage .faq-item.active { border-color:#b8ceec; background:#f8fbff; }
.homepage .faq-header { width:100%; color:#17375e; background:none; border:0; text-align:left; font:inherit; font-weight:700; gap:16px; }
.homepage .faq-body { color:#52657b; line-height:1.8; }
.homepage .footer { background:#f1f5fa; border-top:1px solid #dce5ef; padding-top:55px; }
.homepage .footer-col h4 { color:#17375e; }
.homepage .footer-links a:hover { color:#215bc7; }
.homepage .footer-contact { color:#087548; }
.homepage .footer-bottom { border-color:#dce5ef; }
.homepage :focus-visible { outline:3px solid #215bc7; outline-offset:4px; }
.homepage .container,.homepage .hero-media,.homepage .feature-box,.homepage .video-card,.homepage .bank-card { min-width:0; }
@media(max-width:1250px){
    .homepage .nav-menu{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;border-bottom:1px solid #dce5ef;flex-direction:column;align-items:stretch;padding:20px 24px;gap:8px;box-shadow:0 10px 20px rgba(25,54,91,.06)}
    .homepage .nav-menu.active{display:flex}.homepage .nav-link{padding:10px;font-size:14px}.homepage .mobile-toggle{display:block;color:#17375e}
}
@media(max-width:992px){.homepage .hero{padding:54px 24px 70px;gap:40px;min-height:0}.homepage .hero-content{max-width:680px}.homepage .hero-media{max-width:560px}.homepage .hero-desc{margin-left:auto;margin-right:auto}.homepage .section-py{padding:56px 0}}
@media(max-width:600px){.homepage .navbar{padding:14px 18px;gap:10px}.homepage .logo-brand{font-size:19px}.homepage .nav-actions .btn{font-size:11px;padding:9px 10px}.homepage .logo-icon{width:32px;height:32px}.homepage .hero{padding:40px 20px 65px}.homepage .hero-title{letter-spacing:-1px}.homepage .hero-btns{flex-direction:column}.homepage .hero-btns .btn{width:100%}.homepage .hero-stats{gap:10px}.homepage .stat-item h4{font-size:17px}.homepage .stat-item p{font-size:11px}.homepage .features-grid,.homepage .video-grid,.homepage .bank-grid{grid-template-columns:1fr}.homepage .pricing-card{padding:28px 22px}.homepage .floating-badge{font-size:12px;padding:12px}.homepage .container{width:calc(100% - 36px)}}
@media(max-width:380px){.homepage .navbar{flex-wrap:wrap}.homepage .nav-actions{margin-left:auto}.homepage .hero-title{font-size:31px}}
@media(prefers-reduced-motion:reduce){.homepage *{transition:none!important;animation:none!important}.homepage .hero-visual-card{transform:none}.homepage .app-card-ready:hover{transform:none}}

/* Unified application theme: public pages now use the same navy-blue palette as
   the admin dashboard and course pages. */
body.homepage {
    --bg-darkest:#070b14; --bg-main:#0b1121; --bg-surface:#0f172a;
    --bg-card:#141f36; --bg-card-hover:#1a2847; --bg-card-glass:rgba(20,31,54,.94);
    --text-main:#f8fafc; --text-sub:#cbd5e1; --text-muted:#94a3b8;
    --border-color:#23334e; --border-light:rgba(255,255,255,.08); --border-glow:rgba(59,130,246,.5);
    --primary:#2563eb; --primary-hover:#1d4ed8; --primary-light:#3b82f6;
    --cyan:#06b6d4; --amber:#f59e0b; --amber-light:#fbbf24; --emerald-light:#34d399;
    --shadow-card:0 10px 30px -10px rgba(0,0,0,.5); --shadow-glow:0 0 25px rgba(37,99,235,.45);
    background:var(--bg-main); color:var(--text-main);
}
.homepage .navbar { background:rgba(11,17,33,.96); border-color:var(--border-color); box-shadow:0 2px 14px rgba(0,0,0,.2); }
.homepage .logo-brand .sipil,.homepage .section-heading,.homepage .feature-box h3,.homepage .video-title,.homepage .bank-name,.homepage .faq-header,.homepage .badge-text h5 { color:var(--text-main); }
.homepage .logo-brand .smart,.homepage .nav-link:hover,.homepage .nav-link.active,.homepage .app-card-action,.homepage .video-footer a,.homepage .footer-links a:hover { color:var(--primary-light); -webkit-text-fill-color:var(--primary-light); }
.homepage .nav-menu { background:var(--bg-surface); border-color:var(--border-color); }
.homepage .btn-outline { background:transparent; color:var(--text-sub); border-color:var(--border-color); }
.homepage .btn-outline:hover { background:rgba(37,99,235,.12); color:#fff; border-color:var(--primary-light); }
.homepage .hero { background:linear-gradient(120deg,#0b1121 0%,#101b33 55%,#0d2235 100%); border-color:var(--border-color); }
.homepage .hero-title .highlight,.homepage .section-tag,.homepage .price-current,.homepage .premium-duration,.homepage .bank-number { color:var(--primary-light); -webkit-text-fill-color:var(--primary-light); }
.homepage .hero-pill,.homepage .section-tag,.homepage .badge-cyan,.homepage .badge-primary { background:rgba(37,99,235,.15); border-color:rgba(59,130,246,.3); color:#93c5fd; }
.homepage .hero-visual-card,.homepage .floating-badge,.homepage .app-card,.homepage .feature-box,.homepage .video-card,.homepage .bank-card,.homepage .pricing-card,.homepage .faq-item { background:var(--bg-card); border-color:var(--border-color); }
.homepage .floating-badge { color:var(--text-main); }
.homepage .section-soft,.homepage .app-directory { background:var(--bg-surface); border-color:var(--border-color); }
.homepage .app-card-ready:hover,.homepage .feature-box:hover,.homepage .video-card:hover { background:var(--bg-card-hover); border-color:var(--primary-light); box-shadow:var(--shadow-glow); }
.homepage .app-card-icon,.homepage .feature-icon { background:rgba(37,99,235,.15); color:#93c5fd; }
.homepage .faq-item.active { background:rgba(37,99,235,.08); border-color:rgba(59,130,246,.3); color:#93c5fd; }
.homepage .pricing-card.gold-border { border-color:rgba(245,158,11,.55); }
.homepage .pricing-badge-popular,.homepage .badge-gold { background:rgba(245,158,11,.15); color:#fcd34d; }
.homepage .badge-emerald { background:rgba(16,185,129,.15); color:#6ee7b7; }
.homepage .bank-card-bsi { background:rgba(0,163,157,.09); }
.homepage .bank-card-bsi .bank-number,.homepage .footer-contact { color:#34d399; }
.homepage .video-locked-overlay { background:#0f1d34; color:var(--text-main); }
.homepage .video-locked-overlay h4 { color:var(--text-main); }
.homepage .footer { background:#070b14; border-color:var(--border-color); }

/* Final bright-theme layer. It deliberately wins over the earlier legacy rules
   so every public surface uses the same light palette as the admin panel. */
body.homepage {
    --bg-darkest:#edf4fb; --bg-main:#f8fbff; --bg-surface:#f1f6fc;
    --bg-card:#fff; --bg-card-hover:#f5f9ff; --bg-card-glass:rgba(255,255,255,.95);
    --text-main:#17375e; --text-sub:#36516f; --text-muted:#60758e;
    --border-color:#d7e2ee; --border-light:rgba(23,55,94,.1); --border-glow:rgba(37,99,235,.35);
    --primary:#2563eb; --primary-hover:#1d4ed8; --primary-light:#3b82f6;
    --shadow-card:0 10px 30px -10px rgba(31,65,114,.16); --shadow-glow:0 8px 22px rgba(37,99,235,.18);
    background:var(--bg-main); color:var(--text-main);
}
.homepage .navbar { background:rgba(255,255,255,.96); border-color:var(--border-color); box-shadow:0 2px 14px rgba(31,65,114,.08); }
.homepage .logo-brand .sipil,.homepage .section-heading,.homepage .feature-box h3,.homepage .video-title,.homepage .bank-name,.homepage .faq-header,.homepage .badge-text h5 { color:var(--text-main); }
.homepage .logo-brand .smart,.homepage .nav-link:hover,.homepage .nav-link.active,.homepage .app-card-action,.homepage .video-footer a,.homepage .footer-links a:hover { color:var(--primary); -webkit-text-fill-color:var(--primary); }
.homepage .nav-menu { background:#fff; border-color:var(--border-color); }
.homepage .btn-outline { background:#fff; color:var(--text-sub); border-color:#cbd8e8; }
.homepage .btn-outline:hover { background:#f3f7ff; color:var(--primary); border-color:var(--primary); }
.homepage .hero { background:linear-gradient(115deg,#f5f9ff 0%,#fff 57%,#edf6fb 100%); border-color:#e7edf4; }
.homepage .hero-title .highlight,.homepage .section-tag,.homepage .price-current,.homepage .premium-duration,.homepage .bank-number { color:var(--primary); -webkit-text-fill-color:var(--primary); }
.homepage .hero-pill,.homepage .section-tag,.homepage .badge-cyan,.homepage .badge-primary { background:#eaf1fd; border-color:#d7e5fa; color:var(--primary); }
.homepage .hero-visual-card,.homepage .floating-badge,.homepage .app-card,.homepage .feature-box,.homepage .video-card,.homepage .bank-card,.homepage .pricing-card,.homepage .faq-item { background:#fff; border-color:#dce5ef; }
.homepage .floating-badge { color:var(--text-main); }
.homepage .section-soft,.homepage .app-directory { background:#f7f9fc; border-color:#edf1f6; }
.homepage .app-card-ready:hover,.homepage .feature-box:hover,.homepage .video-card:hover { background:#fff; border-color:#a6c2ea; box-shadow:0 10px 24px rgba(25,54,91,.08); }
.homepage .app-card-icon,.homepage .feature-icon { background:#edf3ff; color:var(--primary); }
.homepage .faq-item.active { background:#f8fbff; border-color:#dce5ef; color:var(--primary); }
.homepage .pricing-card.gold-border { border-color:#dec58b; }
.homepage .pricing-badge-popular,.homepage .badge-gold { background:#fff3db; color:#80540b; }
.homepage .badge-emerald { background:#e8f5ee; color:#087548; }
.homepage .bank-card-bsi { background:#f4fbf9; }
.homepage .bank-card-bsi .bank-number,.homepage .footer-contact { color:#08756f; }
.homepage .video-locked-overlay { background:#edf3fa; color:var(--text-main); }
.homepage .video-locked-overlay h4 { color:var(--text-main); }
.homepage .footer { background:#f1f5fa; border-color:#dce5ef; }