:root{
    --navy:#07184d;
    --navy-2:#082a7a;
    --gold:#d39a18;
    --gold-2:#f3c452;
    --red:#d32121;
    --muted:#6b7280;
    --line:#e6e9f1;
    --white:#ffffff;
    --shadow:0 14px 32px rgba(6,21,58,.12);
    --container:min(1180px,94vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
    margin:0;
    font-family:'Inter',Arial,sans-serif;
    color:#17213b;
    background:#f4f7fb;
    overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
.page-wrap{
    min-height:100svh;
    background:
        radial-gradient(circle at 92% 20%, rgba(211,154,24,.08) 0 1.5px, transparent 1.8px) 0 0/18px 18px,
        linear-gradient(180deg,#fff 0%,#f8fbff 58%,#fff 100%);
    overflow:hidden;
}
.topbar{
    position:relative;
    z-index:10;
    width:100%;
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:12px clamp(14px,3vw,38px);
    background:rgba(255,255,255,.95);
    box-shadow:0 8px 24px rgba(10,24,62,.10);
    border-bottom-left-radius:16px;
    border-bottom-right-radius:16px;
    backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand-logos{
    width:clamp(130px,15vw,210px);
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 5px 7px rgba(0,0,0,.12));
    flex:0 0 auto;
}
.brand-text{min-width:0}
.brand-text h1{
    margin:0;
    color:var(--navy);
    font-size:clamp(20px,1.85vw,34px);
    line-height:1.08;
    font-weight:900;
    letter-spacing:.1px;
    white-space:normal;
}
.brand-text p{
    margin:6px 0 0;
    color:#344158;
    font-size:clamp(13px,1vw,17px);
}
.brand-text span{color:var(--gold);font-weight:900}
.nav-menu{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:clamp(14px,2.1vw,34px);
    font-weight:800;
    text-transform:uppercase;
    font-size:clamp(12px,.95vw,15px);
    color:#071230;
    white-space:nowrap;
    flex:0 1 auto;
}
.nav-menu a{position:relative;padding:10px 0;transition:.2s ease;color:#081331}
.nav-menu a:hover,.nav-menu .active{color:#c48105}
.nav-menu .active::after,.nav-menu a:hover::after{
    content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:99px;background:var(--gold);
}
.hero-section{
    position:relative;
    min-height:calc(100svh - 182px);
    padding:clamp(22px,3.4vw,44px) clamp(12px,2vw,24px) 16px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
}
.hero-section::before{
    content:"";
    position:absolute;
    left:-7vw;bottom:0;
    width:min(48vw,650px);height:clamp(115px,18vw,220px);
    background:linear-gradient(145deg, transparent 31%, rgba(211,154,24,.95) 32% 52%, rgba(255,231,149,.78) 53% 63%, var(--navy-2) 64% 82%, transparent 83%);
    z-index:1;pointer-events:none;
}
.hero-section::after{
    content:"";
    position:absolute;
    right:-6vw;bottom:-15px;
    width:min(42vw,570px);height:clamp(105px,16vw,200px);
    background:linear-gradient(145deg, transparent 25%, rgba(255,255,255,.8) 26% 44%, rgba(211,154,24,.82) 45% 50%, #d82323 51% 57%, var(--navy-2) 58% 80%, transparent 81%);
    z-index:1;pointer-events:none;
}
.building-bg{
    position:absolute;
    left:0;top:80px;bottom:0;
    width:min(52vw,740px);
    background:
      linear-gradient(90deg,rgba(255,255,255,.04) 0%, rgba(255,255,255,.28) 40%, rgba(255,255,255,.82) 76%, #fff 100%),
      linear-gradient(180deg,rgba(255,255,255,.02) 0%, rgba(255,255,255,.78) 78%, #fff 100%),
      url('../img/gedung-polda-sultra.png') left center/cover no-repeat;
    opacity:.70;
    z-index:0;
}
.map-bg{position:absolute;right:7vw;top:94px;width:clamp(190px,22vw,340px);height:clamp(260px,31vw,430px);opacity:.16;color:var(--gold);z-index:0}
.map-bg svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}
.hero-content{position:relative;z-index:3;text-align:center;max-width:var(--container);width:100%;margin:0 auto}
.stars-line{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);font-size:clamp(20px,2vw,28px);margin:0 auto 8px}
.stars-line span{width:clamp(58px,8vw,110px);height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.welcome{margin:0 0 clamp(8px,1.2vw,14px);color:#1d2a45;font-size:clamp(13px,1.15vw,19px);line-height:1.45}
.hero-content h2{
    margin:0;
    font-family:'Merriweather',Georgia,serif;
    font-size:clamp(34px,5vw,68px);
    line-height:1.06;
    letter-spacing:clamp(.4px,.15vw,1.5px);
    color:var(--navy);
    text-shadow:0 3px 0 rgba(7,24,77,.03);
}
.gold-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(9px,1.5vw,16px) 0 clamp(8px,1.1vw,12px);color:var(--gold)}
.gold-divider span{height:2px;width:min(30vw,320px);background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.gold-divider i{font-style:normal;font-size:18px;line-height:1}
.hero-content h3{
    margin:0 auto clamp(10px,1.5vw,16px);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    color:var(--navy);
    font-family:'Merriweather',Georgia,serif;
    font-size:clamp(18px,2vw,30px);
    letter-spacing:.2px;
}
.hero-content h3::before,.hero-content h3::after{content:"";width:clamp(55px,9vw,120px);height:3px;background:linear-gradient(90deg,transparent,var(--gold));border-radius:9px}
.hero-content h3::after{background:linear-gradient(90deg,var(--gold),transparent)}
.hero-logos{display:flex;justify-content:center;align-items:center;margin:0 auto clamp(10px,1.4vw,16px);max-width:570px}
.hero-logos img{
    width:clamp(310px,39vw,560px);
    max-width:92vw;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.16));
}
.exam-card{
    width:min(960px,92vw);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(280px,.95fr);
    align-items:center;
    gap:clamp(16px,2vw,24px);
    padding:clamp(15px,1.8vw,22px) clamp(16px,2.2vw,26px);
    background:rgba(255,255,255,.95);
    border:1px solid rgba(220,226,238,.95);
    border-radius:18px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(8px);
}
.exam-info{display:flex;align-items:center;gap:14px;text-align:left;border-right:2px solid #d7dce8;padding-right:clamp(14px,2vw,26px);min-width:0}
.circle-icon,.feature-icon{
    flex:0 0 auto;
    width:clamp(48px,4.3vw,58px);height:clamp(48px,4.3vw,58px);border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--navy),var(--navy-2));box-shadow:0 8px 18px rgba(7,24,77,.23)
}
.circle-icon svg{width:clamp(25px,2.4vw,31px);height:clamp(25px,2.4vw,31px)}
.exam-info h4{margin:0 0 6px;color:var(--navy);font-size:clamp(16px,1.35vw,19px);font-weight:900}
.exam-info p{margin:0;color:#364158;line-height:1.55;font-size:clamp(12.5px,1vw,14.5px)}
.exam-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0}
.btn-exam{
    width:100%;max-width:420px;
    min-height:clamp(50px,4.8vw,62px);
    display:flex;align-items:center;justify-content:center;gap:12px;
    padding:13px 18px;
    color:#fff;
    font-size:clamp(15px,1.35vw,21px);
    font-weight:900;
    letter-spacing:.1px;
    border-radius:15px;
    background:linear-gradient(180deg,#123ca3 0%, #061b67 100%);
    box-shadow:0 10px 22px rgba(8,42,122,.25), inset 0 1px 0 rgba(255,255,255,.25);
    transition:.2s ease;
}
.btn-exam:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(8,42,122,.34)}
.btn-exam svg{width:clamp(26px,2.6vw,32px);height:clamp(26px,2.6vw,32px);color:#f6c400;flex:0 0 auto}
.exam-link{font-size:clamp(12px,1vw,15px);color:#0756cf;font-weight:700;word-break:break-word;text-align:center}
.features{
    position:relative;z-index:5;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    background:rgba(255,255,255,.97);
    border-top:1px solid #eef1f7;
    box-shadow:0 -4px 20px rgba(10,24,62,.05);
    padding:clamp(14px,1.8vw,22px) clamp(18px,6vw,110px);
}
.features article{display:flex;align-items:center;gap:14px;padding:4px clamp(12px,1.6vw,22px);border-right:1px solid #dbe1ec;text-align:left;min-width:0}
.features article:last-child{border-right:0}
.feature-icon{font-size:clamp(20px,2vw,26px);font-weight:900}
.feature-icon.gold{background:linear-gradient(145deg,var(--gold),#b97505)}
.features h4{margin:0 0 4px;color:var(--navy);font-size:clamp(15px,1.15vw,18px);font-weight:900}
.features p{margin:0;color:#4b5568;font-size:clamp(12px,.95vw,14px);line-height:1.38}
.footer{
    display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
    background:var(--navy);color:#fff;padding:12px 20px;text-align:center;font-weight:700;font-size:clamp(11px,.95vw,14px)
}
.footer p{margin:0}
@media (max-width:1180px){
    .topbar{align-items:flex-start;flex-direction:column;gap:10px;min-height:0}
    .nav-menu{width:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
    .hero-section{min-height:auto;padding-top:28px}
    .exam-card{grid-template-columns:1fr;width:min(850px,92vw)}
    .exam-info{border-right:0;border-bottom:2px solid #d7dce8;padding-right:0;padding-bottom:16px}
    .features{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px clamp(16px,4vw,40px)}
    .features article:nth-child(2){border-right:0}
    .features article{border-bottom:1px solid #dbe1ec;padding-top:12px;padding-bottom:12px}
    .features article:nth-child(n+3){border-bottom:0}
}
@media (max-width:760px){
    .topbar{padding:12px 14px;border-bottom-left-radius:12px;border-bottom-right-radius:12px}
    .brand{width:100%;gap:11px;align-items:center}
    .brand-logos{width:112px}
    .brand-text h1{font-size:clamp(17px,5vw,22px);line-height:1.15}
    .brand-text p{font-size:12.5px;margin-top:4px}
    .nav-menu{gap:16px;font-size:12px;padding:2px 0 4px}
    .hero-section{padding:22px 12px 14px;align-items:flex-start}
    .hero-section::before{width:78vw;height:105px;left:-22vw}
    .hero-section::after{width:70vw;height:95px;right:-23vw}
    .building-bg{width:100%;opacity:.30;top:65px;background-position:left top}
    .map-bg{display:none}
    .stars-line{gap:8px;margin-bottom:6px}
    .stars-line span{width:38px}
    .welcome{font-size:13px;margin-bottom:8px}
    .hero-content h2{font-size:clamp(29px,9vw,42px);letter-spacing:.2px}
    .gold-divider{gap:8px;margin:8px 0}
    .gold-divider span{width:30vw}
    .hero-content h3{font-size:clamp(16px,5vw,21px);line-height:1.3;gap:8px;margin-bottom:10px}
    .hero-content h3::before,.hero-content h3::after{display:none}
    .hero-logos img{width:min(92vw,390px)}
    .exam-card{width:100%;padding:14px;border-radius:16px;gap:14px}
    .exam-info{align-items:flex-start;gap:12px}
    .circle-icon{width:46px;height:46px}
    .exam-info h4{font-size:16px}
    .exam-info p{font-size:12.8px;line-height:1.5}
    .btn-exam{font-size:14px;min-height:48px;border-radius:13px;padding:12px;gap:10px}
    .btn-exam svg{width:25px;height:25px}
    .features{grid-template-columns:1fr;padding:14px 16px}
    .features article,.features article:nth-child(2),.features article:nth-child(n+3){border-right:0;border-bottom:1px solid #dbe1ec;padding:12px 0}
    .features article:last-child{border-bottom:0}
    .footer{font-size:11px;padding:10px 14px}
}
@media (max-width:420px){
    .brand-logos{width:95px}
    .brand-text h1{font-size:16px}
    .hero-content h2{font-size:28px}
    .hero-content h3{font-size:15px}
    .exam-info{flex-direction:column;text-align:center;align-items:center}
    .exam-action{width:100%}
}
@media (max-height:760px) and (min-width:900px){
    .topbar{min-height:72px;padding-top:9px;padding-bottom:9px}
    .brand-logos{width:170px}
    .brand-text h1{font-size:26px}.brand-text p{font-size:14px;margin-top:4px}
    .hero-section{padding-top:20px;min-height:auto}
    .stars-line{font-size:22px;margin-bottom:5px}.welcome{font-size:14px;margin-bottom:6px}
    .hero-content h2{font-size:48px}.gold-divider{margin:8px 0}
    .hero-content h3{font-size:22px;margin-bottom:8px}
    .hero-logos img{width:400px}.exam-card{padding:14px 18px;width:850px}.btn-exam{min-height:50px;font-size:16px}.features{padding-top:12px;padding-bottom:12px}
}