/* ============================================================
   FILE: assets/css/public.css
   Stylesheet untuk halaman publik: index.php, detail.php, tracking.php
   ============================================================ */

/* ===== BASE SHARED (Navbar, body, heading) ===== */
:root {
    --navy:   #0d2137;
    --blue:   #1a5276;
    --accent: #f0a500;
    --light:  #f4f7fb;
    --white:  #ffffff;
    --text:   #2c3e50;
    --muted:  #7f8c8d;
    --radius: 14px;
    --shadow: 0 4px 24px rgba(13,33,55,.10);
}
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--light); color: var(--text); }
h1,h2,h3,h4,h5 { font-family: 'Sora', sans-serif; }

/* ===== NAVBAR ===== */
.navbar { background: var(--navy) !important; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.navbar-brand span { color: var(--accent); }
.navbar-nav .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 500; transition: color .2s; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--accent) !important; }

/* ===== HERO (shared pattern) ===== */
.hero, .hero-section {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    position: relative; overflow: hidden;
}
.hero::before, .hero-section::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ===== FOOTER ===== */
footer { border-top: 1px solid #e2e8f0; padding: 20px 0; text-align: center; color: #94a3b8; font-size: .82rem; }

/* ===== EMPTY STATE ===== */
.empty-state { text-align: center; padding: 60px 20px; color: #94a3b8; max-width: 460px; margin: 40px auto; }
.empty-state i { font-size: 4rem; opacity: .25; display: block; margin-bottom: 16px; }
.empty-state p { font-size: .95rem; line-height: 1.7; }