/*
Theme Name: Pelindo Regional 4 Landing
Theme URI: https://pelindo.co.id
Author: Pelindo Regional 4
Author URI: https://pelindo.co.id
Description: Tema landing page sederhana dan cepat untuk PT Pelabuhan Indonesia (Persero) Regional 4.
Version: 1.0.0
Text Domain: pelindo-reg4
*/
:root{
  --pelindo-primary:#0076BE; /* Biru Pelindo (approx) */
  --pelindo-dark:#0f172a;
  --pelindo-light:#f8fafc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#0f172a;background:#fff;line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid #e5e7eb}
.header-wrap{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.brand img{height:40px;width:auto}
.brand small{display:block;color:#64748b}
.nav a{margin-left:1rem;text-decoration:none;color:#334155}
.nav a:hover{color:#0f172a}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:.75rem 1rem;font-weight:600;text-decoration:none;border:1px solid #e2e8f0;color:#0f172a}
.btn.primary{background:var(--pelindo-dark);border-color:var(--pelindo-dark);color:#fff}
.hero{position:relative}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(105%)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.85))}
.hero-inner{position:relative;padding:6rem 0 5rem}
.badge{display:inline-flex;gap:.5rem;align-items:center;border:1px solid #e2e8f0;background:rgba(255,255,255,.7);backdrop-filter:blur(4px);border-radius:999px;padding:.35rem .75rem;font-size:.75rem}
.section{padding:4rem 0}
.section.alt{background:#f8fafc;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.grid{display:grid;gap:1.25rem}
.grid.cols-2{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:768px){.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:#fff;border-radius:16px;border:1px solid #e5e7eb;padding:1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card:hover{box-shadow:0 8px 24px rgba(15,23,42,.06)}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.25rem}
footer{border-top:1px solid #e5e7eb;padding:2.5rem 0}
.small{font-size:.875rem;color:#64748b}
figure.ratio-4x3{position:relative;padding-top:75%;overflow:hidden;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 4px 16px rgba(0,0,0,.05)}
figure.ratio-4x3 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
*/