/* =========================================================
   LP3M UNTIKA - TEMA NAVY & CYAN
========================================================= */
:root {
    --primary: #1e40af;
    --primary-light: #3b82f6;
    --primary-dark: #1e3a8a;
    --secondary: #0891b2;
    --secondary-light: #06b6d4;
    --accent: #f59e0b;
    --bg-light: #f8fafc;
    --text-dark: #0f172a;
    --text-gray: #64748b;
    --white: #ffffff;
    --border: #e2e8f0;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; color:var(--text-dark); background:var(--white); line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
.container { width:min(1180px, 92%); margin:auto; }

header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,0.97); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); }
.navbar { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:52px; height:52px; object-fit:contain; }
.brand-text strong { display:block; font-family:'Alata',sans-serif; font-size:17px; color:var(--text-dark); }
.brand-text span { display:block; font-size:11px; color:var(--text-gray); }
nav ul { display:flex; align-items:center; gap:6px; }
nav a { display:block; padding:10px 14px; font-size:14px; font-weight:600; border-radius:8px; transition:.25s; }
nav a:hover { background:#e0e7ff; color:var(--primary); }
.menu-toggle { display:none; border:0; background:none; font-size:27px; cursor:pointer; }
section { padding:90px 0; }
.section-header { margin-bottom:42px; max-width:700px; }
.section-label { color:var(--primary); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; }
.section-title { font-family:'Alata',sans-serif; font-size:34px; line-height:1.2; color:var(--text-dark); margin-bottom:12px; }
.section-description { color:var(--text-gray); }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 22px; border-radius:8px; font-weight:700; font-size:14px; transition:.25s; }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); }
.btn-outline { border:1px solid rgba(255,255,255,.5); color:white; }
.btn-outline:hover { background:rgba(255,255,255,.1); }

@media (max-width:900px) {
    nav ul { display:none; position:absolute; top:78px; left:0; width:100%; background:white; flex-direction:column; align-items:stretch; padding:15px 4%; border-bottom:1px solid var(--border); }
    nav ul.active { display:flex; }
    nav a { width:100%; }
    .menu-toggle { display:block; }
}
@media (max-width:600px) {
    section { padding:65px 0; }
    .brand-text strong { font-size:14px; }
    .brand-text span { font-size:9px; }
    .brand img { width:44px; height:44px; }
    .section-title { font-size:28px; }
}