/* ==========================================================================
   SDGs CENTER UKAW — Lapisan Modernisasi UI/UX
   Dimuat paling akhir sehingga menimpa gaya tema lama tanpa mengubahnya.
   Palet mengacu pada warna resmi UN SDGs (un.org/sustainabledevelopment)
   dengan warna institusi (#0e5278) sebagai warna utama.
   ========================================================================== */

:root {
    /* Warna institusi */
    --pri: #0e5278;
    --pri-700: #0a3f5e;
    --pri-500: #14688f;
    --navy: #0a2f4a;

    /* Aksen resmi UN SDGs */
    --sdg-red: #E5243B;
    --sdg-gold: #DDA63A;
    --sdg-blue: #0A97D9;

    /* Netral modern */
    --ink: #1d2939;
    --muted: #667085;
    --line: #e7edf3;
    --soft: #f7fafc;

    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(16, 42, 67, .06);
    --shadow-md: 0 4px 16px -4px rgba(16, 42, 67, .14);
    --shadow-lg: 0 18px 40px -18px rgba(16, 42, 67, .30);

    --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font) !important;
    color: var(--ink);
    background-color: var(--soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font) !important;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--ink);
}

a {
    transition: color .2s ease, box-shadow .2s ease;
}

::selection {
    background: rgba(14, 82, 120, .16);
}

/* Aksesibilitas: cincin fokus terlihat untuk navigasi keyboard */
:focus-visible {
    outline: 3px solid rgba(14, 82, 120, .45);
    outline-offset: 2px;
    border-radius: 4px;
}

/* -------------------------------------------------
   Skip to content (WCAG 2.4.1)
   ------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--pri);
    color: #fff;
    padding: .65rem 1.1rem;
    border-radius: 0 0 10px 0;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

/* -------------------------------------------------
   Topbar & navigasi utama
   ------------------------------------------------- */
#page-topbar {
    background: #fff !important;
    box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(10, 47, 74, .55);
}

.navbar-header .menudge li {
    white-space: nowrap;
}

.navbar-header .menudge li a {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .015em;
    text-transform: uppercase;
    color: #334155 !important;
    padding: 25px 8px;
    border-bottom: 3px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.navbar-header .menudge li a:hover,
.navbar-header .menudge li:hover > a,
.navbar-header .menudge li a.dgeaktif {
    color: var(--pri) !important;
    background: transparent !important;
    border-bottom-color: var(--sdg-red);
}

.navbar-header .menudge ul {
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    padding: 6px 0;
}

.navbar-header .menudge ul li a {
    border-bottom: none;
    padding: 9px 16px;
    font-size: .85rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #475467 !important;
}

.navbar-header .menudge ul li a:hover {
    background: var(--soft) !important;
    color: var(--pri) !important;
}

/* -------------------------------------------------
   Judul section (——— BERITA UTAMA ———)
   ------------------------------------------------- */
.section-heading .title-konten,
.title-konten {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: .12em;
    color: var(--pri);
    align-items: center;
}

.title-konten:before,
.title-konten:after {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(14, 82, 120, .08), rgba(14, 82, 120, .35));
}

.title-konten:before {
    background: linear-gradient(90deg, rgba(14, 82, 120, .35), rgba(14, 82, 120, .08));
}

/* -------------------------------------------------
   Kartu konten
   ------------------------------------------------- */
.card {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* -------------------------------------------------
   Tombol
   ------------------------------------------------- */
.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .55rem 1.35rem;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--pri-500), var(--pri)) !important;
    border: none !important;
    box-shadow: 0 6px 16px -8px rgba(14, 82, 120, .75);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(14, 82, 120, .8);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4457, var(--sdg-red)) !important;
    border: none !important;
}

/* -------------------------------------------------
   Hero berita utama
   ------------------------------------------------- */
.kategori {
    background: linear-gradient(135deg, #ef4457, var(--sdg-red)) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px -4px rgba(229, 36, 59, .55);
    font-weight: 700;
    letter-spacing: .06em;
}

.ketberita {
    background: linear-gradient(180deg, rgba(6, 32, 51, 0) 0%, rgba(6, 32, 51, .55) 55%, rgba(6, 32, 51, .92) 100%) !important;
}

.ketberita p {
    line-height: 1.6 !important;
}

.ketberita a {
    font-weight: 700;
}

/* -------------------------------------------------
   Bar pengumuman (running text) — pengganti <marquee>
   ------------------------------------------------- */
.pengumuman {
    background: linear-gradient(90deg, var(--pri) 0%, var(--navy) 100%);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.pengumuman .info-dinas-header .re-info {
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
}

.pengumuman .dinas-info .item span[style*="orange"] {
    border-radius: 6px;
    font-weight: 600;
    background: var(--sdg-gold) !important;
    color: #1d2939 !important;
}

.ticker {
    overflow: hidden;
    white-space: nowrap;
}

.ticker-track {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    animation: sdgs-ticker 38s linear infinite;
    will-change: transform;
}

.ticker:hover .ticker-track {
    animation-play-state: paused;
}

@keyframes sdgs-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* -------------------------------------------------
   Tautan mitra/instansi (sinergi)
   ------------------------------------------------- */
.sinergi .sinergi-logo img {
    filter: grayscale(100%);
    opacity: .72;
    transition: all .3s ease;
}

.sinergi .sinergi-logo:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}

/* -------------------------------------------------
   Footer
   ------------------------------------------------- */
.footer-area {
    background: linear-gradient(180deg, #314963 0%, var(--navy) 100%) !important;
    border-top: 4px solid var(--sdg-gold) !important;
}

.footer-area a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* -------------------------------------------------
   Tombol kembali ke atas
   ------------------------------------------------- */
#myBtn {
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pri-500), var(--pri)) !important;
    box-shadow: var(--shadow-md);
    font-weight: 600;
}

#myBtn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--pri), var(--pri-700)) !important;
}

/* -------------------------------------------------
   Hormati preferensi pengguna: kurangi animasi
   ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ticker-track {
        animation: none;
        padding-left: 0;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* -------------------------------------------------
   Responsif
   ------------------------------------------------- */
@media (max-width: 767.98px) {
    .navbar-header .menudge li a {
        padding: 16px 10px;
        font-size: .74rem;
    }

    .title-konten {
        font-size: .92rem !important;
        letter-spacing: .08em;
    }
}