/* =========================================
   FONDASI DESAIN GLOBAL
   Tema: putih hangat + slate, minimal & playful.
   Light mode saja — tidak ada token maupun aturan dark mode.
   ========================================= */

:root {
    --bg: #fdfdfc;
    --ink: #0f172a;           /* slate-900 */
    --ink-soft: #475569;      /* slate-600 */
    --muted: #64748b;         /* slate-500 */
    --faint: #94a3b8;         /* slate-400 */
    --border: #f1f5f9;        /* slate-100 */
    --border-strong: #e2e8f0; /* slate-200 */
    --accent: #2563eb;        /* blue-600 */
    --accent-soft: #dbeafe;   /* blue-100 */

    /* Easing khas: lembut di ujung (expo-out) & kenyal (spring) */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08),
                 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.1),
                 0 4px 8px -4px rgba(15, 23, 42, 0.05);

    /* "Bibir" 3D ala kartu Duo — dipakai berulang di seluruh situs */
    --lip: 0 3px 0 var(--border-strong);
}

html { scroll-behavior: smooth; }

body {
    /* Nunito: font bulat — nyawa tema (fallback Inter) */
    font-family: 'Nunito', 'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- Judul & label section ------------------------------------------- */
.section-eyebrow {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--faint);
    margin-bottom: 0.375rem;
}
.section-eyebrow.centered { text-align: center; }

.section-title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-block { margin-bottom: 4rem; }

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    transition: color 0.2s ease;
}
.view-all-link:hover { color: var(--accent); }
.view-all-link .arrow-icon { transition: transform 0.2s var(--ease-out); }
.view-all-link:hover .arrow-icon { transform: translateX(2px); }

/* --- Kartu dasar ------------------------------------------------------ */
.surface-card {
    background-color: #fff;
    border: 2px solid var(--border-strong);
    border-radius: 1rem;
    box-shadow: var(--lip);
}

/* --- Badge jenis (Journal / Speaker / IP / dst.) ---------------------- */
.kind-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1.5px solid transparent;
    white-space: nowrap;
    user-select: none;
}
.kind-badge--journal     { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.kind-badge--proceeding  { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.kind-badge--thesis      { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.kind-badge--certification { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.kind-badge--speaker     { background: #ffe4e6; color: #be123c; border-color: #fecdd3; }
.kind-badge--ip          { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }

/* --- Scrollbar ramping ------------------------------------------------ */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* --- Fokus keyboard --------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

img { -webkit-user-drag: none; }

/* Teks khusus pembaca layar — tersembunyi secara visual, tetap terbaca
   oleh teknologi bantu. Dipakai lintas halaman, jadi ditaruh global. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lompat ke konten — hanya terlihat saat difokus lewat keyboard */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: 0 0 0.75rem 0;
    font-weight: 800;
    color: var(--accent);
}
.skip-link:focus { left: 0; }

/* =========================================
   ANIMASI MASUK
   ========================================= */
.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUpSoft 0.7s var(--ease-out) both;
}

@keyframes fadeInUpSoft {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section di bawah layar ditahan JS, baru main saat di-scroll */
.rv-wait { animation-play-state: paused; }
.rv-wait.in-view { animation-play-state: running; }

/* =========================================
   NAVBAR
   ========================================= */
#site-nav {
    transition: box-shadow 0.3s var(--ease-out), background-color 0.3s ease;
}
#site-nav.nav-scrolled {
    box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.12);
}

.nav-link { position: relative; padding: 0.25rem 0; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out);
}
.nav-link:hover::after,
.nav-link.nav-active::after { transform: scaleX(1); }
.nav-link.nav-active { color: var(--ink); font-weight: 700; }

/* =========================================
   BACK TO TOP
   ========================================= */
#back-to-top {
    position: fixed;
    bottom: calc(1.5rem + var(--footer-lift, 0px));
    left: max(1.5rem, calc(50vw - 452px));
    z-index: 9998;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: var(--muted);
    border: 2px solid var(--border-strong);
    border-radius: 999px;
    box-shadow: var(--lip);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s var(--ease-out),
                transform 0.3s var(--ease-out),
                visibility 0.3s, color 0.2s, border-color 0.2s;
}
#back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover {
    color: var(--ink);
    border-color: #cbd5e1;
    transform: translateY(1px);
    box-shadow: 0 2px 0 var(--border-strong);
}
#back-to-top:active { transform: translateY(3px); box-shadow: none; }

@media (max-width: 640px) {
    #back-to-top { left: 1rem; }
}

/* =========================================
   SCROLL PROGRESS BAR
   ========================================= */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 60;
    pointer-events: none;
}

/* =========================================
   FLASH MESSAGE
   ========================================= */
.flash-stack {
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(92vw, 30rem);
}
.flash-item {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid var(--border-strong);
    background: #fff;
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
}
.flash-item--success { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.flash-item--danger  { border-color: #fecdd3; background: #fff1f2; color: #be123c; }
.flash-item--warning { border-color: #fde68a; background: #fffbeb; color: #b45309; }

/* =========================================
   AKSESIBILITAS: hormati preferensi reduksi gerakan
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .animate-fade-in-up { animation: none; opacity: 1; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}