/* === SKIP LINK === */
.skip-link{position:absolute;top:-40px;left:0;background:#3b82f6;color:#fff;padding:8px 16px;z-index:9999;font-size:14px;border-radius:0 0 8px 0;transition:top .2s}.skip-link:focus{top:0}
/* === CONTRAST FIX WCAG AA === */
p[class*="text-slate-400"]{color:#64748b !important}.dark p[class*="text-slate-400"]{color:#cbd5e1 !important}
.text-xs[class*="text-slate-400"]{color:#64748b !important}.dark .text-xs[class*="text-slate-400"]{color:#94a3b8 !important}
/* === RESPONSIVE TYPOGRAPHY === */
h1[class*="text-4xl"]{font-size:clamp(2rem,8vw,4.5rem) !important;line-height:1.1}
/* === HERO CTA === */
.hero-cta-wrap{text-align:center;margin-top:20px;animation:fadeInUp .8s ease-out .3s both}
.collab-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(16,185,129,.12);color:#059669;padding:6px 16px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:16px}
.dark .collab-badge{background:rgba(16,185,129,.15);color:#34d399}
.pulse-dot{width:8px;height:8px;background:#10b981;border-radius:50%;animation:pulse-ring 1.5s ease-in-out infinite}
@keyframes pulse-ring{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.8)}}
.hero-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.btn-hero-primary{display:inline-flex;align-items:center;padding:12px 28px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;transition:all .3s;box-shadow:0 4px 15px rgba(59,130,246,.35)}
.btn-hero-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.45)}
.btn-hero-secondary{display:inline-flex;align-items:center;padding:12px 28px;background:transparent;color:#3b82f6;border:2px solid #3b82f6;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;transition:all .3s}
.dark .btn-hero-secondary{color:#93c5fd;border-color:#93c5fd}
.btn-hero-secondary:hover{background:rgba(59,130,246,.08);transform:translateY(-2px)}
/* === NAV SOCIAL === */
.nav-social{display:flex;align-items:center;gap:12px;margin-left:16px}
.nav-social a{color:#64748b;transition:color .2s;display:flex;align-items:center}.nav-social a:hover{color:#3b82f6}
.dark .nav-social a{color:#94a3b8}.dark .nav-social a:hover{color:#60a5fa}
.nav-cta-btn{padding:6px 16px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff !important;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s}
.nav-cta-btn:hover{opacity:.9;transform:translateY(-1px)}
@media(max-width:768px){.nav-social{display:none}}
/* === FOOTER === */
.site-footer{background:#0f172a;color:#94a3b8;padding:48px 24px 24px;margin-top:64px}
.footer-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
.footer-col strong{color:#e2e8f0;font-size:16px;display:block;margin-bottom:8px}
.footer-col p{font-size:14px;line-height:1.6}
.footer-col ul{list-style:none;padding:0;margin:0}.footer-col li{margin-bottom:6px}
.footer-col a{color:#94a3b8;text-decoration:none;font-size:14px;transition:color .2s}.footer-col a:hover{color:#60a5fa}
.footer-bottom{text-align:center;margin-top:32px;padding-top:24px;border-top:1px solid #1e293b;font-size:13px;color:#64748b}
/* === HAMBURGER + DRAWER === */
.hamburger-btn{display:none;background:none;border:none;color:#475569;cursor:pointer;padding:8px;margin-left:8px}
.dark .hamburger-btn{color:#94a3b8}
@media(max-width:768px){.hamburger-btn{display:flex;align-items:center}}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.mobile-drawer{position:fixed;top:0;right:-300px;width:280px;height:100%;background:#fff;z-index:999;padding:20px;transition:right .3s ease;box-shadow:-4px 0 20px rgba(0,0,0,.15)}
.dark .mobile-drawer{background:#1e293b}
.mobile-drawer.open{right:0}
.drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.drawer-header strong{font-size:18px;color:#0f172a}.dark .drawer-header strong{color:#e2e8f0}
.drawer-close{background:none;border:none;font-size:28px;color:#64748b;cursor:pointer}
.drawer-nav{display:flex;flex-direction:column;gap:12px}
.drawer-nav a{font-size:16px;color:#334155;text-decoration:none;padding:10px 12px;border-radius:8px;transition:background .2s}
.drawer-nav a:hover{background:#f1f5f9}.dark .drawer-nav a{color:#cbd5e1}.dark .drawer-nav a:hover{background:#334155}
.drawer-social{margin-top:24px;padding-top:16px;border-top:1px solid #e2e8f0;font-size:14px;color:#64748b}
.dark .drawer-social{border-color:#334155;color:#94a3b8}
.drawer-social a{color:#3b82f6;text-decoration:none}
/* === FOCUS RING A11Y === */
*:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}
/* === STATS 2x2 MOBILE === */
@media(max-width:480px){
  .flex.flex-wrap.justify-center{display:grid !important;grid-template-columns:1fr 1fr;gap:12px}
}
/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0s !important;transition-duration:0s !important}
}
nav{position:relative !important}
nav>.nav-social{position:absolute !important;right:16px !important;top:50% !important;transform:translateY(-50%) !important}
@media(max-width:768px){nav>.nav-social{display:none !important}}
.hero-cta{margin-bottom:32px}
.hero-cta-wrap{margin-bottom:40px !important}

/* === MOBILE NAVBAR 1-LINE FIX === */
@media(max-width:768px){
  nav{flex-wrap:nowrap !important;align-items:center !important;padding:8px 12px !important;gap:0 !important}
  nav>div:first-child,nav>.flex{flex-shrink:0}
  nav a[href*="tentang"],nav a[href*="kemahiran"],nav a[href*="sistem"]{display:none !important}
  nav .nav-social{display:none !important}
  .hamburger-btn{display:flex !important;align-items:center;order:10;margin-left:auto !important;padding:6px !important}
  nav button:not(.hamburger-btn){order:11;margin-left:8px !important;font-size:13px !important;padding:4px 8px !important}
  nav button:not(.hamburger-btn) #themeText{display:none !important}
  nav>a:first-child,nav>div:first-child{margin-right:auto !important}
}

/* === MOBILE NAVBAR 1-ROW FIX v2 === */
@media(max-width:768px){
  nav .hamburger-btn{display:inline-flex !important;align-items:center;padding:6px !important;margin-left:4px !important;order:-1 !important;}
  nav > .flex.justify-between{flex-wrap:nowrap !important;gap:8px !important;}
  nav > .flex.justify-between > div:last-child{gap:6px !important;}
}