/* ═══════════════════════════════════════════════════════
   ALTUCLASHA DIGITAL STUDIO — SHARED STYLES
   Dipakai di semua halaman. Ubah di sini, berlaku di mana-mana.
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Base ── */
    --bg:          #080808;
    --bg-2:        #0f0f0f;
    --bg-3:        #141414;
    --bg-4:        #1a1a1a;
    --line:        rgba(255,255,255,0.07);
    --line-2:      rgba(255,255,255,0.14);
    --txt:         #f2f2f2;
    --txt-2:       #8a8a8a;
    --txt-3:       #555;
    --r:           0px;

    /* ── Accent: Digital Development Services (kode) ── */
    --acc-dev:      #4f6ef7;
    --acc-dev-dim:  rgba(79,110,247,0.12);
    --acc-dev-line: rgba(79,110,247,0.35);

    /* ── Accent: Digital Library (naskah) ── */
    --acc-lib:      #c99a4b;
    --acc-lib-dim:  rgba(201,154,75,0.12);
    --acc-lib-line: rgba(201,154,75,0.38);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--txt);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

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

.badge {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--txt-3);
}
.badge::before, .badge::after {
    content: ''; width: 28px; height: 1px; background: var(--line-2);
}

/* ─────────────────────────────────────────────
   REVEAL ON SCROLL (dipakai assets/js/reveal.js)
   Tempel data-reveal="up|left|right" di elemen mana pun,
   di halaman mana pun — otomatis muncul halus saat di-scroll.
───────────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }

[data-reveal].is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ─────────────────────────────────────────────
   NAV (partials/header.html)
───────────────────────────────────────────── */
nav#mainNav {
    position: fixed; top: 0; left: 0; width: 100%;
    height: 64px;
    padding: 0 5%;
    display: flex; align-items: flex-start; justify-content: space-between;
    z-index: 1000;
    transition: background 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid transparent;
}

nav#mainNav.scrolled {
    background: rgba(8,8,8,0.94);
    border-bottom-color: var(--line-2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.logo-link {
    display: flex; align-items: center; text-decoration: none; flex-shrink: 0;
}

/* Logo lebih besar dari nav-bar & "menggantung" turun — mengecil rapi saat discroll */
.main-logo {
    height: 92px;
    width: auto;
    display: block;
    margin-top: 16px;
    filter: invert(1) brightness(1);
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

nav#mainNav.scrolled .main-logo {
    height: 42px;
    margin-top: 11px;
}

/* Nav-links & toggle tetap sejajar tengah meski logo membesar */
.main-nav-links,
.nav-toggle {
    margin-top: 15px;
}

.main-nav-links {
    display: flex; align-items: center; gap: 8px;
}

.nav-link {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--txt-2);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.nav-dot {
    width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
}
.nav-dot.dot-dev { background: var(--acc-dev); box-shadow: 0 0 6px var(--acc-dev-line); }
.nav-dot.dot-lib { background: var(--acc-lib); box-shadow: 0 0 6px var(--acc-lib-line); }

.nav-link:hover {
    color: var(--txt);
    background: var(--bg-2);
    border-color: var(--line-2);
}

.nav-link.active {
    color: var(--txt);
    background: var(--bg-2);
    border-color: var(--line-2);
}

/* Mobile hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--line-2);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.nav-toggle span {
    display: block;
    width: 16px; height: 1px;
    background: var(--txt-2);
    margin: 0 auto;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
    nav#mainNav { height: 58px; }

    .main-logo {
        height: 108px;
        margin-top: 6px;
    }
    nav#mainNav.scrolled .main-logo {
        height: 50px;
        margin-top: 6px;
    }

    .main-nav-links,
    .nav-toggle { margin-top: 11px; }

    .nav-toggle { display: flex; }
    .main-nav-links {
        position: fixed;
        top: 58px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1px;
        background: var(--bg-2);
        border-bottom: 1px solid var(--line-2);
        padding: 8px;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }
    .main-nav-links.open {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    .nav-link { justify-content: flex-start; padding: 13px 14px; }
}

/* ─────────────────────────────────────────────
   FOOTER (partials/footer.html)
───────────────────────────────────────────── */
footer#siteFooter {
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    padding: 22px 5% 26px;
    margin-top: auto;
    position: relative;
    z-index: 3;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.footer-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--txt-3);
    text-align: center;
}

.footer-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.footer-contact a {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    color: var(--txt-2);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
    font-size: 14px;
}
.footer-contact a:hover {
    color: var(--txt);
    border-color: var(--line-2);
    background: var(--bg-4);
    transform: translateY(-2px);
}

.footer-copyright {
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--txt-3);
    text-align: center;
}

@media (max-width: 720px) {
    footer#siteFooter {
        padding: 16px 6% 18px;
    }
    .footer-inner {
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}