/* ==========================================================
   HIMABAJA — Identitas Visual "KIZUNA"
   Terinspirasi dari warna PDH (Pakaian Dinas Harian):
   mauve dusty rose sebagai warna utama, hijau lambang sebagai
   aksen, dengan sentuhan merah bendera Indonesia & Jepang.
   Palet: awa mauve, sumi ink, midori (hijau lambang), sakura pink,
          hi (merah bendera — aksen tipis)
   Tipografi: Shippori Mincho (display) + Zen Kaku Gothic New (body)
   Signature: motif kotak genkouyoushi (kertas manuskrip),
              ombak seigaiha, kelopak sakura melayang, percikan
              hanabi, dan meterai kanji 絆 (kizuna — "ikatan")
              sebagai identitas kabinet tahun ini.
   ========================================================== */

:root {
    --washi: #F7F1F2;
    --washi-deep: #EEE0E4;
    --sumi: #2A232A;
    --sumi-soft: #6C5A63;
    --aizome: #6B4059;
    --aizome-light: #8C5A74;
    --hanko: #2E7A54;
    --sakura: #D98BA4;
    --hi: #BE1E3C;
    --line: #DCC6CC;
    --white: #FFFFFF;
    /* Warna teks di atas latar aksen berwarna (aizome/hanko/hi) — sengaja
       TIDAK ikut berubah di dark mode, karena --white sendiri dipakai juga
       sebagai warna permukaan kartu (yang memang harus jadi gelap di dark
       mode). Tanpa variabel terpisah ini, teks di atas widget kosakata,
       tombol utama, dsb ikut jadi gelap dan tak terbaca saat dark mode. */
    --on-accent: #FFFFFF;

    --font-display: 'Shippori Mincho', serif;
    --font-body: 'Zen Kaku Gothic New', 'Noto Sans', sans-serif;

    --radius: 3px;

    color-scheme: light;
}

/* ---------- Dark mode (mode gelap) ----------
   Nuansa "yoru" (malam) — mauve jadi lebih cerah agar tetap terbaca
   di atas gelap, hijau lambang & sakura tetap jadi aksen supaya
   identitas visual tidak hilang. */
html[data-theme="dark"] {
    --washi: #1E171B;
    --washi-deep: #271E23;
    --sumi: #F2E6EA;
    --sumi-soft: #C7AFB8;
    --aizome: #D99DB6;
    --aizome-light: #E6B7CB;
    --hanko: #6FCB9B;
    --sakura: #E8A9C0;
    --hi: #FF6B82;
    --line: #40323A;
    --white: #271E23;

    color-scheme: dark;
}
html[data-theme="dark"] .site-header { background: rgba(30, 23, 27, 0.94); }
html[data-theme="dark"] footer.site-footer { background: #150F12; }
html[data-theme="dark"] .footer-grid { border-bottom-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .form-msg.ok { background: #1E2E24; color: #B4E0C6; border-color: #3E8A5F; }
html[data-theme="dark"] .form-msg.err { background: #362026; color: #F2B7C4; border-color: var(--hi); }

/* ---------- Theme toggle button ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--aizome);
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.theme-toggle:hover { border-color: var(--hanko); transform: rotate(12deg); }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--washi);
    color: var(--sumi);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--aizome);
    line-height: 1.28;
    letter-spacing: 0.1px;
    margin: 0 0 0.5em;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- genkouyoushi grid texture ---------- */
.genkou-bg {
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 42px 42px;
    background-position: center;
}

/* ---------- Motif Jepang tipis: ombak (seigaiha) ----------
   Sengaja dibuat sangat halus (opacity rendah) supaya tetap terasa
   modern & tidak berlebihan — cukup jadi sentuhan tekstur. */
.seigaiha-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%236B4059' stroke-width='1.1' opacity='0.16'%3E%3Cpath d='M0 40 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0'/%3E%3Cpath d='M-20 50 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 120px 60px;
}

/* ---------- Ombak (seigaiha) di tepi hero — representasi laut/gelombang ---------- */
.hero { position: relative; }
.hero::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%232E7A54' stroke-width='1.4' opacity='0.22'%3E%3Cpath d='M0 40 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0'/%3E%3Cpath d='M-20 50 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 110px 55px;
    z-index: 0;
    pointer-events: none;
}
html[data-theme="dark"] .hero::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%236FCB9B' stroke-width='1.4' opacity='0.28'%3E%3Cpath d='M0 40 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0'/%3E%3Cpath d='M-20 50 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0'/%3E%3C/g%3E%3C/svg%3E");
}

.sakura-corner {
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}
.sakura-corner svg { display: block; }
html[data-theme="dark"] .sakura-corner { opacity: 0.3; }

.petal-drift {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.petal {
    position: absolute;
    top: -20px;
    font-size: 14px;
    opacity: 0.4;
    color: var(--sakura);
    animation: petal-fall linear infinite;
    user-select: none;
}
@keyframes petal-fall {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); }
    100% { transform: translateY(340px) translateX(24px) rotate(200deg); }
}
@media (prefers-reduced-motion: reduce) {
    .petal { animation: none; display: none; }
}

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 241, 242, 0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: 1080px;
    margin: 0 auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-seal {
    width: 42px;
    height: 42px;
    border: 2px solid var(--hanko);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hanko);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--white);
}
.brand-seal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brand-text .brand-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--aizome);
    letter-spacing: 0.5px;
    display: block;
}

.brand-text .brand-sub {
    font-size: 11px;
    color: var(--sumi-soft);
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    gap: 28px;
    font-size: 14.5px;
}

.nav-links a {
    position: relative;
    padding: 4px 0;
    color: var(--sumi);
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    height: 1px; width: 0;
    background: var(--hanko);
    transition: width 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-links a.active { color: var(--aizome); font-weight: 700; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}
.nav-toggle span {
    width: 24px; height: 2px; background: var(--sumi);
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 90px 24px 100px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.hero-inner {
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hanko);
    margin-bottom: 18px;
    font-weight: 700;
}
.eyebrow::before {
    content: '';
    width: 22px; height: 2px;
    background: linear-gradient(90deg, var(--hi), var(--hanko));
    border-radius: 2px;
}

.hero h1 {
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.18;
    margin-bottom: 22px;
    letter-spacing: 0.2px;
}

.hero .jp {
    display: block;
    font-size: clamp(18px, 2vw, 24px);
    color: var(--aizome);
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 10px;
    opacity: 0.9;
}

.hero p.lead {
    font-size: 17px;
    line-height: 1.75;
    color: var(--sumi-soft);
    max-width: 44ch;
    margin-bottom: 32px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: var(--radius);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid var(--aizome);
    transition: all 0.2s ease;
}
.btn-primary {
    background: var(--aizome);
    color: var(--on-accent);
}
.btn-primary:hover { background: var(--aizome-light); border-color: var(--aizome-light); }
.btn-ghost {
    background: transparent;
    color: var(--aizome);
}
.btn-ghost:hover { background: var(--aizome); color: var(--on-accent); }

.hero-seal-card {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 32px;
    position: relative;
    overflow: hidden;
}
.hero-seal-card::before {
    /* percikan hanabi — halus di balik meterai */
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 150px; height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg transform='translate(75,75)' stroke='%236B4059' stroke-width='1.4' opacity='0.14'%3E%3Cline x1='0' y1='0' x2='0' y2='-60'/%3E%3Cline x1='0' y1='0' x2='42' y2='-42'/%3E%3Cline x1='0' y1='0' x2='60' y2='0'/%3E%3Cline x1='0' y1='0' x2='42' y2='42'/%3E%3Cline x1='0' y1='0' x2='0' y2='60'/%3E%3Cline x1='0' y1='0' x2='-42' y2='42'/%3E%3Cline x1='0' y1='0' x2='-60' y2='0'/%3E%3Cline x1='0' y1='0' x2='-42' y2='-42'/%3E%3Ccircle cx='0' cy='-60' r='2.4' fill='%232E7A54' stroke='none'/%3E%3Ccircle cx='42' cy='-42' r='2.4' fill='%232E7A54' stroke='none'/%3E%3Ccircle cx='60' cy='0' r='2.4' fill='%232E7A54' stroke='none'/%3E%3Ccircle cx='42' cy='42' r='2.4' fill='%232E7A54' stroke='none'/%3E%3Ccircle cx='0' cy='60' r='2.4' fill='%232E7A54' stroke='none'/%3E%3Ccircle cx='-42' cy='42' r='2.4' fill='%232E7A54' stroke='none'/%3E%3Ccircle cx='-60' cy='0' r='2.4' fill='%232E7A54' stroke='none'/%3E%3Ccircle cx='-42' cy='-42' r='2.4' fill='%232E7A54' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
html[data-theme="dark"] .hero-seal-card::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg transform='translate(75,75)' stroke='%23D99DB6' stroke-width='1.4' opacity='0.16'%3E%3Cline x1='0' y1='0' x2='0' y2='-60'/%3E%3Cline x1='0' y1='0' x2='42' y2='-42'/%3E%3Cline x1='0' y1='0' x2='60' y2='0'/%3E%3Cline x1='0' y1='0' x2='42' y2='42'/%3E%3Cline x1='0' y1='0' x2='0' y2='60'/%3E%3Cline x1='0' y1='0' x2='-42' y2='42'/%3E%3Cline x1='0' y1='0' x2='-60' y2='0'/%3E%3Cline x1='0' y1='0' x2='-42' y2='-42'/%3E%3Ccircle cx='0' cy='-60' r='2.4' fill='%236FCB9B' stroke='none'/%3E%3Ccircle cx='42' cy='-42' r='2.4' fill='%236FCB9B' stroke='none'/%3E%3Ccircle cx='60' cy='0' r='2.4' fill='%236FCB9B' stroke='none'/%3E%3Ccircle cx='42' cy='42' r='2.4' fill='%236FCB9B' stroke='none'/%3E%3Ccircle cx='0' cy='60' r='2.4' fill='%236FCB9B' stroke='none'/%3E%3Ccircle cx='-42' cy='42' r='2.4' fill='%236FCB9B' stroke='none'/%3E%3Ccircle cx='-60' cy='0' r='2.4' fill='%236FCB9B' stroke='none'/%3E%3Ccircle cx='-42' cy='-42' r='2.4' fill='%236FCB9B' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-seal-card > * { position: relative; z-index: 1; }
.hero-seal-card .big-seal {
    width: 96px; height: 96px;
    border: 3px solid var(--hanko);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--hanko);
    font-family: var(--font-display);
    font-size: 34px;
    margin: 0 auto 18px;
    background: var(--white);
}
.hero-seal-card h3 {
    text-align: center;
    font-size: 17px;
    margin-bottom: 6px;
}
.hero-seal-card p {
    text-align: center;
    font-size: 13.5px;
    color: var(--sumi-soft);
    margin: 0;
}
.hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed var(--line);
}
.hero-stats div { text-align: center; }
.hero-stats .num {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--aizome);
    display: block;
}
.hero-stats .label { font-size: 11.5px; color: var(--sumi-soft); }

/* ---------- Section shells ---------- */
section.block { padding: 70px 24px; }
section.block.alt { background: var(--washi-deep); }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 12px;
}
.section-head .kicker {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hanko);
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}
.section-head h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0; }
.section-head .more { font-size: 14px; color: var(--aizome); font-weight: 700; white-space: nowrap; }
.section-head .more:hover { text-decoration: underline; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.card {
    background: var(--white);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--hanko); transform: translateY(-2px); }
.card-media {
    aspect-ratio: 16/10;
    background: var(--washi-deep);
    display: flex; align-items: center; justify-content: center;
    color: var(--line);
    font-family: var(--font-display);
    font-size: 40px;
    overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.card-date { font-size: 12px; color: var(--hanko); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 8px; }
.card h3 { font-size: 18px; margin-bottom: 10px; }
.card p { font-size: 14px; color: var(--sumi-soft); margin: 0 0 14px; flex: 1; }
.card .read-more { font-size: 13.5px; font-weight: 700; color: var(--aizome); align-self: flex-start; }
.card .read-more:hover { text-decoration: underline; }

/* ---------- Struktur / Anggota ---------- */
.member-card { text-align: center; }
.member-photo {
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--washi-deep);
    display: flex; align-items: center; justify-content: center;
    color: var(--line); font-size: 40px; font-family: var(--font-display);
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--line);
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-card h4 { font-size: 16px; margin-bottom: 4px; color: var(--sumi); font-family: var(--font-body); font-weight: 700; }
.member-card .jabatan { font-size: 13px; color: var(--hanko); font-weight: 700; margin-bottom: 2px; }
.member-card .divisi { font-size: 12.5px; color: var(--sumi-soft); }

/* ---------- Struktur Organisasi — pohon (family tree), tumbuh ke bawah ---------- */
.org-tree-hint {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--sumi-soft);
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}
.org-tree-scroll {
    padding: 10px 10px 36px;
    display: flex;
    justify-content: center;
}

/* Satu "cabang" = kartu (atau kartu+wakil sejajar) di atas, lalu panel
   berisi seluruh anaknya persis di bawahnya. Tidak ada lagi pohon yang
   melebar tak berujung ke kiri/kanan — kalau anak banyak, panelnya
   membungkus (wrap) ke baris baru, tumbuh ke BAWAH. */
.org-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.org-branch-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}
/* garis vertikal pendek dari kartu turun ke panel anak-anaknya */
.org-branch-connector {
    width: 0;
    height: 26px;
    border-left: 2px solid var(--line);
}
.org-group-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px 26px;
    padding: 22px 18px 18px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    background: rgba(42, 35, 42, 0.02);
    position: relative;
}
html[data-theme="dark"] .org-group-panel { background: rgba(255, 255, 255, 0.03); }
.org-branch-child { display: flex; }

.org-node {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 14px 16px;
    width: 156px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.org-node:hover { border-color: var(--hanko); transform: translateY(-2px); }
.org-node.is-root {
    background: var(--aizome);
    border-color: var(--aizome);
    width: 168px;
}
.org-node .org-photo {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--washi-deep);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--line);
}
.org-node .org-photo img { width: 100%; height: 100%; object-fit: cover; }
.org-node.is-root .org-photo { color: var(--on-accent); background: transparent; }
.org-node .org-name { font-size: 13px; font-weight: 700; color: var(--sumi); margin-bottom: 2px; line-height: 1.3; }
.org-node.is-root .org-name { color: var(--on-accent); font-family: var(--font-display); font-size: 17px; }
.org-node .org-jabatan { font-size: 11px; color: var(--hanko); font-weight: 700; }
.org-node.is-root .org-jabatan { color: #E3C8D2; }
.org-node .org-divisi { font-size: 10.5px; color: var(--sumi-soft); margin-top: 2px; }

@media (max-width: 640px) {
    .org-node { width: 128px; padding: 10px 8px; }
    .org-node.is-root { width: 140px; }
    .org-node .org-photo { width: 42px; height: 42px; font-size: 15px; margin-bottom: 6px; }
    .org-node .org-name { font-size: 11.5px; }
    .org-group-panel { gap: 14px 16px; padding: 18px 10px 12px; }
    .org-branch-connector { height: 18px; }
}

/* ---------- Timeline kegiatan ---------- */
.timeline { position: relative; padding-left: 28px; border-left: 2px solid var(--line); }
.timeline-item { position: relative; padding-bottom: 36px; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -34px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--washi);
    border: 2px solid var(--hanko);
}
.timeline-item .tl-date { font-size: 12.5px; color: var(--hanko); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 6px; }
.timeline-item h4 { font-size: 18px; margin-bottom: 8px; }
.timeline-item p { color: var(--sumi-soft); font-size: 14px; margin: 0 0 6px; }
.timeline-item .tl-loc { font-size: 13px; color: var(--sumi-soft); }
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border: 1px solid var(--aizome);
    color: var(--aizome);
    letter-spacing: 0.3px;
    margin-top: 8px;
}

/* ---------- Galeri ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-item {
    aspect-ratio: 1/1;
    background: var(--washi-deep);
    overflow: hidden;
    border: 1px solid var(--line);
    position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, rgba(42,35,42,0.72));
    color: #fff; font-size: 12px; padding: 18px 10px 8px;
}

/* ---------- Forms ---------- */
.form-box {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 36px;
}
label { display: block; font-size: 13.5px; font-weight: 700; color: var(--aizome); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], textarea, select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--washi);
    font-family: var(--font-body);
    font-size: 14.5px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    color: var(--sumi);
}
textarea { resize: vertical; min-height: 130px; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--aizome);
    background: var(--white);
}
.form-msg { padding: 14px 18px; margin-bottom: 20px; font-size: 14px; border-radius: var(--radius); }
.form-msg.ok { background: #E5F0E9; border: 1px solid #6FAE87; color: #245239; }
.form-msg.err { background: #F7E2E6; border: 1px solid var(--hi); color: #7A1D31; }

/* ---------- Footer ---------- */
footer.site-footer {
    background: var(--aizome);
    color: #ECD9E0;
    padding: 56px 24px 28px;
    position: relative;
    overflow: hidden;
}
footer.site-footer::before {
    /* garis ombak tipis di tepi atas footer */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.2' opacity='0.14'%3E%3Cpath d='M0 40 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: top;
    background-size: 110px 55px;
    pointer-events: none;
}
.footer-grid, .footer-bottom { position: relative; z-index: 1; }
.footer-grid {
    max-width: 1080px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-grid h4 { color: #fff; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.5px; margin-bottom: 16px; }
.footer-grid p, .footer-grid a { color: #E3C8D2; font-size: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a:hover { color: #fff; }
.footer-map {
    margin-top: 16px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.footer-map iframe { filter: grayscale(0.15) contrast(1.05); }
.footer-map-link {
    display: block;
    text-align: center;
    font-size: 12.5px !important;
    font-weight: 700;
    padding: 9px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    letter-spacing: 0.2px;
}

.footer-bottom {
    max-width: 1080px; margin: 20px auto 0;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    font-size: 12.5px; color: #C9A6B4;
}

/* ---------- Detail berita ---------- */
.article-header { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.article-body { max-width: 760px; margin: 0 auto; font-size: 16px; }
.article-body p { margin-bottom: 20px; white-space: pre-line; color: var(--sumi); }
.article-meta { font-size: 13px; color: var(--sumi-soft); margin-bottom: 20px; }

/* ---------- Page header (halaman dalam) ---------- */
.page-header {
    position: relative;
    padding: 56px 24px 40px;
    border-bottom: 1px solid var(--line);
    text-align: center;
    overflow: hidden;
}
.page-header h1 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 10px; }
.page-header p { color: var(--sumi-soft); max-width: 60ch; margin: 0 auto; position: relative; z-index: 2; }
.page-header .eyebrow, .page-header h1 { position: relative; z-index: 2; }
.page-header::before {
    /* 桜 — sakura, mekar di sudut kiri atas */
    content: '桜';
    position: absolute;
    top: -34px; left: 3%;
    font-family: var(--font-display);
    font-size: 130px;
    color: var(--sakura);
    opacity: 0.16;
    z-index: 1;
    pointer-events: none;
}
.page-header::after {
    /* 絆 — kizuna, "ikatan", kanji kabinet tahun ini */
    content: '絆';
    position: absolute;
    bottom: -46px; right: 3%;
    font-family: var(--font-display);
    font-size: 150px;
    color: var(--aizome);
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
}
@media (max-width: 640px) {
    .page-header::before, .page-header::after { font-size: 80px; }
}

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center; padding: 60px 20px; color: var(--sumi-soft);
    border: 1px dashed var(--line);
}

/* ---------- Toggle tampilan (List / Kalender, dsb) ---------- */
.view-switch {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 30px;
}
.view-switch a {
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sumi-soft);
    background: var(--white);
}
.view-switch a.active { background: var(--aizome); color: var(--on-accent); }
.view-switch a + a { border-left: 1px solid var(--line); }

/* ---------- Kalender kegiatan ---------- */
.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.cal-head h3 { margin: 0; font-size: 20px; }
.cal-head .cal-nav a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
    color: var(--aizome);
}
.cal-head .cal-nav a:hover { border-color: var(--hanko); }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.cal-dow {
    background: var(--washi-deep);
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--sumi-soft);
    padding: 8px 4px;
}
.cal-cell {
    background: var(--white);
    min-height: 92px;
    padding: 6px 8px;
    font-size: 12px;
}
.cal-cell.empty { background: var(--washi); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--hi); }
.cal-daynum { font-family: var(--font-display); font-size: 14px; color: var(--sumi-soft); margin-bottom: 4px; display: block; }
.cal-cell.today .cal-daynum { color: var(--hi); font-weight: 700; }
.cal-event {
    display: block;
    background: var(--aizome);
    color: var(--on-accent);
    font-size: 10.5px;
    padding: 2px 5px;
    margin-bottom: 3px;
    border-radius: 2px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Pencarian & filter berita ---------- */
.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    align-items: center;
}
.filter-bar input[type=text] { margin-bottom: 0; max-width: 320px; }
.filter-bar select { margin-bottom: 0; max-width: 200px; width: auto; }
.filter-bar button.btn { border: 1px solid var(--aizome); background: var(--aizome); color: var(--on-accent); cursor: pointer; padding: 12px 22px; font-family: var(--font-body); }
.tag-chip {
    display: inline-block;
    font-size: 11px;
    padding: 2px 9px;
    border: 1px solid var(--line);
    color: var(--sumi-soft);
    margin: 0 6px 0 0;
    border-radius: 20px;
}
.card-cat { color: var(--aizome); font-weight: 700; }

/* ---------- Halaman unduhan dokumen ---------- */
.doc-group { margin-bottom: 44px; }
.doc-group h3 { font-size: 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border: 1px solid var(--line);
    padding: 16px 20px;
}
.doc-icon {
    width: 42px; height: 42px;
    border: 2px solid var(--aizome);
    color: var(--aizome);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; font-family: var(--font-display);
    flex-shrink: 0;
}
.doc-info { flex: 1; }
.doc-info h4 { margin: 0 0 3px; font-size: 15px; color: var(--sumi); font-family: var(--font-body); font-weight: 700; }
.doc-info p { margin: 0; font-size: 12.5px; color: var(--sumi-soft); }
.doc-meta { font-size: 11.5px; color: var(--sumi-soft); white-space: nowrap; }
.doc-dl {
    padding: 9px 18px;
    border: 1px solid var(--aizome);
    color: var(--aizome);
    font-size: 13px; font-weight: 700; white-space: nowrap;
}
.doc-dl:hover { background: var(--aizome); color: var(--on-accent); }

/* ---------- Feed Instagram — embed resmi (interaktif, bisa diklik) ---------- */
.ig-embed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: start;
    padding: 6px 0 0;
}
.ig-embed-item {
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.ig-embed-item iframe { max-width: 100%; }

@media (max-width: 640px) {
    .ig-embed-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Widget kosakata JLPT harian ---------- */
.kosakata-widget {
    background: var(--aizome);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1' opacity='0.08'%3E%3Cpath d='M0 40 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0'/%3E%3Cpath d='M-20 50 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 110px 55px;
    color: var(--on-accent);
    padding: 34px 36px;
    position: relative;
    overflow: hidden;
    max-width: 560px;
}
.kosakata-widget .kw-label {
    font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: #E3C8D2; margin-bottom: 14px; display: block; font-weight: 700;
}
.kosakata-widget .kw-word {
    font-family: var(--font-display);
    font-size: 40px;
    display: block;
    margin-bottom: 4px;
}
.kosakata-widget .kw-reading { color: #E3C8D2; font-size: 15px; margin-bottom: 10px; }
.kosakata-widget .kw-meaning { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.kosakata-widget .kw-example { font-size: 13px; color: #E3C8D2; border-top: 1px dashed rgba(255,255,255,0.25); padding-top: 14px; }
.kosakata-widget .kw-level {
    position: absolute; top: 28px; right: 32px;
    border: 1px solid rgba(255,255,255,0.5); color: #fff;
    font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 700;
}
.kosakata-widget .kw-mascot {
    position: absolute; bottom: 10px; right: 14px; width: 72px; opacity: 0.95;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
    pointer-events: none;
}
@media (max-width: 560px) { .kosakata-widget .kw-mascot { width: 52px; } }

/* ==========================================================
   Animasi interaksi — muncul saat scroll & respons saat diklik
   (bukan cuma kelopak sakura jatuh di hero, tapi dipakai di
   seluruh halaman: kartu, timeline, galeri, tabel unduhan,
   struktur organisasi, form, dsb.)
   ========================================================== */

/* ---------- Reveal saat elemen masuk viewport ---------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(.21,.86,.35,1),
                transform 0.7s cubic-bezier(.21,.86,.35,1);
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Header dapat bayangan halus saat halaman discroll ---------- */
.site-header {
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.site-header.is-scrolled {
    box-shadow: 0 6px 20px rgba(42, 35, 42, 0.10);
}
html[data-theme="dark"] .site-header.is-scrolled {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ---------- Efek ripple saat elemen interaktif diklik ---------- */
.ripple-host { position: relative; overflow: hidden; }
span.ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.28;
    transform: scale(0);
    animation: ripple-anim 0.65s ease-out forwards;
    pointer-events: none;
}
@keyframes ripple-anim {
    to { transform: scale(1); opacity: 0; }
}

/* ---------- Sedikit "tekan" saat tombol diklik ---------- */
.btn, .doc-dl { transition: all 0.2s ease, transform 0.12s ease; }
.btn:active, .doc-dl:active, .view-switch a:active { transform: scale(0.96); }

/* ---------- Kartu & node struktur sedikit membesar + bayangan saat hover ---------- */
.card, .org-node, .doc-item {
    transition: border-color 0.2s ease, transform 0.3s cubic-bezier(.21,.86,.35,1), box-shadow 0.3s ease;
}
.card:hover, .doc-item:hover {
    box-shadow: 0 14px 30px rgba(42, 35, 42, 0.08);
}
html[data-theme="dark"] .card:hover, html[data-theme="dark"] .doc-item:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* ---------- Widget kosakata & kartu meterai "napas" halus supaya terasa hidup ---------- */
.kosakata-widget, .hero-seal-card { transition: transform 0.3s ease; }
.kosakata-widget:hover, .hero-seal-card:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    span.ripple { display: none; }
    .card:hover, .doc-item:hover, .kosakata-widget:hover, .hero-seal-card:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .hero-inner { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
    .nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--washi); flex-direction: column;
        padding: 20px 24px; border-bottom: 1px solid var(--line);
        display: none;
    }
    .nav-links.open { display: flex; }
    .nav-toggle { display: flex; }
    .hero h1 { font-size: 32px; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr 1fr; }
    .cal-cell { min-height: 60px; font-size: 10.5px; }
    .cal-dow { font-size: 9.5px; padding: 6px 2px; }
    .cal-event { display: none; }
    .cal-cell.has-event { box-shadow: inset 0 0 0 2px var(--aizome); }
    .filter-bar input[type=text], .filter-bar select { max-width: 100%; width: 100%; }
    .doc-item { flex-wrap: wrap; }
    .kosakata-widget { padding: 26px 22px; max-width: 100%; }
    .kosakata-widget .kw-word { font-size: 32px; }
}

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--hi);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ==========================================================
   Audit visual — dekorasi tambahan pengisi ruang kosong
   (menambah, tidak mengganti, sistem "Kizuna" yang sudah ada)
   ========================================================== */

/* ---------- Texture washi sangat halus di seluruh body ---------- */
body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ---------- Reusable: karakter kanji outline sebagai watermark ---------- */
.corner-glyph {
    position: absolute;
    font-family: var(--font-display);
    color: var(--aizome);
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    line-height: 1;
}
html[data-theme="dark"] .corner-glyph { opacity: 0.08; }

/* ---------- Hero: ambient glow di belakang judul + torii tipis pojok kanan-atas ---------- */
.hero-inner > div:first-child { position: relative; }
.hero-inner > div:first-child::before {
    content: '';
    position: absolute;
    top: -50px; left: -60px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, var(--sakura) 0%, transparent 70%);
    opacity: 0.14;
    filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}
html[data-theme="dark"] .hero-inner > div:first-child::before { opacity: 0.22; }

.hero-torii-mark {
    position: absolute;
    top: -26px; right: -30px;
    width: 220px; height: 220px;
    opacity: 0.06;
    z-index: 0;
    pointer-events: none;
}
html[data-theme="dark"] .hero-torii-mark { opacity: 0.1; }
@media (max-width: 860px) { .hero-torii-mark { display: none; } }

/* ---------- Section kosakata: kanji besar mengisi ruang kosong di sekitar kartu ---------- */
.kw-section { position: relative; overflow: hidden; }
.kw-section .kosakata-widget { position: relative; z-index: 1; }

/* ---------- Berita: stempel "baru" pada kartu paling terkini ---------- */
.card { position: relative; }
.card-stamp {
    position: absolute; top: 12px; right: 12px;
    width: 40px; height: 40px;
    border: 1.5px solid var(--hi);
    border-radius: 50%;
    color: var(--hi);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    transform: rotate(-8deg);
    background: var(--white);
    opacity: 0.92;
    z-index: 2;
}

/* ---------- Agenda: titik timeline "berdenyut" pelan + torii kecil di ujung ---------- */
.timeline-item::before {
    animation: tl-breathe 3.2s ease-in-out infinite;
}
@keyframes tl-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 139, 164, 0.22); }
    50%      { box-shadow: 0 0 0 5px rgba(217, 139, 164, 0.16); }
}
.timeline { padding-bottom: 34px; }
.timeline::after {
    content: '⛩';
    position: absolute;
    left: -34px; bottom: 0;
    width: 12px; height: 12px;
    font-size: 18px;
    line-height: 1;
    color: var(--aizome);
    opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
    .timeline-item::before { animation: none; }
}

/* ---------- Struktur organisasi: watermark 絆 di belakang area scroll ---------- */
.org-tree-scroll { position: relative; }
.org-tree-scroll::before {
    content: '絆';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: min(34vw, 380px);
    color: var(--aizome);
    opacity: 0.035;
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
}
html[data-theme="dark"] .org-tree-scroll::before { opacity: 0.06; }
.org-tree-scroll .org-branch.is-top { position: relative; z-index: 1; }

/* ---------- Halaman Tentang: divider & dekorasi asimetris ---------- */
.container-tentang { position: relative; }
.tentang-brush-divider {
    width: 180px; height: 14px;
    margin: 40px auto;
    opacity: 0.4;
    display: block;
}
html[data-theme="dark"] .tentang-brush-divider { opacity: 0.6; }
.tentang-side-deco {
    position: absolute;
    right: -84px; top: 10px;
    width: 78px;
    opacity: 0.35;
    pointer-events: none;
}
html[data-theme="dark"] .tentang-side-deco { opacity: 0.5; }
@media (max-width: 960px) { .tentang-side-deco { display: none; } }

/* ---------- Footer: divider kelopak sakura kecil sebelum bottom bar ---------- */
.footer-divider {
    text-align: center;
    color: var(--sakura);
    font-size: 10px;
    letter-spacing: 8px;
    opacity: 0.6;
    padding: 4px 0 0;
    position: relative;
    z-index: 1;
}

/* ==========================================================
   Redesign Pass 2 — hierarchy, layout editorial, micro-interaksi
   premium (kompetisi desain web). Tidak mengubah warna utama,
   struktur navigasi, atau konten — murni memperkuat eksekusi.
   ========================================================== */

/* ---------- Hero: enso ring sebagai signature kedua, sangat halus ---------- */
.hero-enso {
    position: absolute;
    left: -40px; bottom: -60px;
    width: 180px; height: 180px;
    opacity: 0.08;
    z-index: 0;
    pointer-events: none;
}
html[data-theme="dark"] .hero-enso { opacity: 0.14; }
@media (max-width: 860px) { .hero-enso { display: none; } }

/* ---------- Hero seal card: sheen tipis di bagian atas, kesan premium/glass ---------- */
.hero-seal-card {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 40%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}
html[data-theme="dark"] .hero-seal-card {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
}

/* ---------- Cards: elevasi lebih kuat + gradient ring saat hover ---------- */
.card, .org-node {
    box-shadow: 0 1px 2px rgba(42,35,42,0.04);
}
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--white), var(--white)) padding-box,
        linear-gradient(120deg, var(--sakura), var(--hanko)) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.card:hover::after { opacity: 0.55; }
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 36px rgba(42,35,42,0.10);
}
html[data-theme="dark"] .card:hover { box-shadow: 0 20px 36px rgba(0,0,0,0.4); }

/* ---------- Section divider: sapuan kuas tipis di atas section beralternasi ---------- */
section.block.alt { position: relative; }
section.block.alt::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 220px; height: 3px;
    background: linear-gradient(90deg, transparent, var(--sakura), transparent);
    opacity: 0.5;
}

/* ---------- Buttons: glow halus saat hover, kesan lebih hidup ---------- */
.btn-primary:hover {
    box-shadow: 0 8px 22px rgba(107, 64, 89, 0.28);
    transform: translateY(-1px);
}
html[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 8px 22px rgba(217, 157, 182, 0.28);
}
.btn { transition: all 0.25s cubic-bezier(.21,.86,.35,1); }

/* ---------- Timeline: garis vertikal gradasi + dot lebih hidup ---------- */
.timeline {
    border-left: none;
    background-image: linear-gradient(180deg, var(--hanko), var(--line) 85%);
    background-repeat: no-repeat;
    background-size: 2px 100%;
    background-position: left top;
}
.timeline-item {
    transition: transform 0.25s ease;
}
.timeline-item:hover { transform: translateX(4px); }
.timeline-item:hover h4 { color: var(--hanko); }
.timeline-item h4 { transition: color 0.2s ease; }

/* ---------- Layout editorial: sedikit zig-zag pada grid dua kolom di halaman Tentang ---------- */
.container-tentang .grid-2 .card:nth-child(even) { margin-top: 30px; }
@media (max-width: 860px) {
    .container-tentang .grid-2 .card:nth-child(even) { margin-top: 0; }
}

/* ---------- Footer: baris ikon sosial generik (bukan logo brand) ---------- */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.footer-social a {
    width: 34px; height: 34px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #F3DCE5;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.footer-social a:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }

/* ---------- Readability: batasi lebar paragraf panjang di seluruh halaman ---------- */
.article-body p, .form-box p { max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
    .timeline-item:hover { transform: none; }
    .btn-primary:hover { transform: none; }
    .card:hover { transform: none; }
}

/* ==========================================================
   v7 — Lapisan pengalaman tambahan:
   scroll progress, back-to-top, ambient cursor glow, galeri
   masonry + lightbox, featured news editorial, section divider,
   footer closing message, halaman 404.
   ========================================================== */

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--hanko), var(--aizome));
    z-index: 999;
    transition: width 0.08s linear;
}

/* ---------- Ambient cursor glow (desktop only, sangat halus) ---------- */
.cursor-glow {
    position: fixed;
    top: 0; left: 0;
    width: 460px; height: 460px;
    margin-left: -230px; margin-top: -230px;
    background: radial-gradient(circle, rgba(107,64,89,0.10) 0%, rgba(107,64,89,0) 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-1000px, -1000px);
    will-change: transform;
}
html[data-theme="dark"] .cursor-glow {
    background: radial-gradient(circle, rgba(217,157,182,0.09) 0%, rgba(217,157,182,0) 70%);
}
@media (max-width: 900px), (hover: none) {
    .cursor-glow { display: none; }
}

/* ---------- Back to top ---------- */
.back-to-top {
    position: fixed;
    right: 22px; bottom: 22px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--aizome);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 18px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    z-index: 400;
    box-shadow: 0 8px 20px rgba(42,35,42,0.22);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--hanko); }
.back-to-top svg { width: 18px; height: 18px; }

/* ---------- Section divider (ombak/brush) — variasi antar section ---------- */
.section-divider {
    height: 46px;
    background-repeat: repeat-x;
    background-position: center;
    opacity: 0.5;
    pointer-events: none;
}
.section-divider.wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 26 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0 a20 20 0 0 1 40 0' fill='none' stroke='%236B4059' stroke-width='1.4' opacity='0.25'/%3E%3C/svg%3E");
    background-size: 100px 34px;
}
.section-divider.brush {
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='24' viewBox='0 0 300 24'%3E%3Cpath d='M2 14 Q40 4 80 14 T160 12 T240 16 T298 10' fill='none' stroke='%232A232A' stroke-width='2.4' stroke-linecap='round' opacity='0.16'/%3E%3C/svg%3E");
    background-size: 300px 24px;
}

/* ---------- Featured News — editorial (1 besar + sisanya kecil) ---------- */
.featured-news {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 28px;
    margin-bottom: 44px;
    align-items: stretch;
}
.featured-news .card-featured {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    overflow: hidden;
}
.featured-news .fn-media {
    position: relative;
    aspect-ratio: 16/10;
    background: var(--washi-deep);
    overflow: hidden;
}
.featured-news .fn-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.22,1,.36,1); }
.featured-news .card-featured:hover .fn-media img { transform: scale(1.04); }
.featured-news .fn-badge {
    position: absolute; top: 16px; left: 16px;
    background: var(--hi); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    padding: 5px 12px; border-radius: 2px;
}
.featured-news .fn-body { padding: 26px 28px 30px; }
.featured-news .fn-body h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 12px; }
.featured-news .fn-body p { color: var(--sumi-soft); font-size: 15.5px; margin-bottom: 16px; }
.fn-secondary { display: flex; flex-direction: column; gap: 18px; }
.fn-secondary .card { flex-direction: row; }
.fn-secondary .card-media { width: 120px; min-width: 120px; height: auto; aspect-ratio: 1/1; }
.fn-secondary .card-body { padding: 14px 18px; }
.fn-secondary .card h3 { font-size: 15px; margin-bottom: 6px; }
.fn-secondary .card p { display: none; }
@media (max-width: 860px) {
    .featured-news { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .fn-secondary .card { flex-direction: column; }
    .fn-secondary .card-media { width: 100%; aspect-ratio: 16/10; }
}

/* ---------- Galeri masonry + lightbox ---------- */
.gallery-grid.masonry {
    display: block;
    column-count: 4;
    column-gap: 14px;
}
.gallery-grid.masonry .gallery-item {
    aspect-ratio: auto;
    break-inside: avoid;
    margin-bottom: 14px;
    cursor: zoom-in;
}
.gallery-grid.masonry .gallery-item:nth-child(3n+1) img { aspect-ratio: 3/4; object-fit: cover; }
.gallery-grid.masonry .gallery-item:nth-child(3n+2) img { aspect-ratio: 1/1; object-fit: cover; }
.gallery-grid.masonry .gallery-item:nth-child(3n) img { aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 900px) { .gallery-grid.masonry { column-count: 3; } }
@media (max-width: 640px) { .gallery-grid.masonry { column-count: 2; } }

.lightbox-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(20, 15, 18, 0.92);
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-overlay img {
    max-width: 90vw; max-height: 82vh;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    transform: scale(0.96);
    transition: transform 0.28s cubic-bezier(.22,1,.36,1);
}
.lightbox-overlay.open img { transform: scale(1); }
.lightbox-caption { position: absolute; bottom: 34px; left: 0; right: 0; text-align: center; color: #F3E6EA; font-size: 14px; }
.lightbox-close {
    position: absolute; top: 22px; right: 28px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,0.16); }

/* ---------- Footer thank-you / closing message ---------- */
.footer-closing {
    max-width: 1080px; margin: 26px auto 0;
    text-align: center;
    position: relative; z-index: 1;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-closing .fc-jp {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.footer-closing .fc-id { font-size: 13.5px; color: #E3C8D2; }

/* ---------- Halaman 404 ---------- */
.error-page {
    min-height: 60vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 60px 24px;
    position: relative;
    overflow: hidden;
}
.error-page .err-glyph {
    font-family: var(--font-display);
    font-size: clamp(90px, 18vw, 200px);
    color: var(--aizome);
    opacity: 0.14;
    line-height: 1;
    margin-bottom: -20px;
}
.error-page h1 { font-size: clamp(26px, 3vw, 36px); }
.error-page p { color: var(--sumi-soft); max-width: 46ch; margin: 0 auto 26px; }

@media (prefers-reduced-motion: reduce) {
    .cursor-glow, .back-to-top, .scroll-progress { transition: none; }
}

/* ==========================================================
   FASE 2 — Sistem Musim, Waktu, Maskot Companion, Konten Harian,
   Struktur Interaktif, Agenda Hidup, Micro-interaction lanjutan.
   Semua ditambahkan sebagai lapisan baru di atas identitas visual
   "Kizuna" yang sudah ada — variabel warna dasar tidak diubah.
   ========================================================== */

/* ---------- Sistem Musim (otomatis dari tanggal, lihat main.js) ----------
   Mengubah warna partikel & tint ambient dekorasi latar. Tidak mengubah
   palet utama teks/tombol supaya kontras & keterbacaan tetap aman. */
html[data-season="spring"] { --season-particle: #F3B8CE; --season-glyph: '桜'; --season-tint: 217,139,164; }
html[data-season="summer"] { --season-particle: #6FCB9B; --season-glyph: '夏'; --season-tint: 111,203,155; }
html[data-season="autumn"] { --season-particle: #C97A3D; --season-glyph: '紅'; --season-tint: 201,122,61; }
html[data-season="winter"] { --season-particle: #BFD9E8; --season-glyph: '雪'; --season-tint: 143,181,209; }
:root { --season-particle: #D98BA4; --season-glyph: '絆'; --season-tint: 217,139,164; }

.petal.season-particle { color: var(--season-particle); }
.season-badge {
    position: fixed; right: 16px; bottom: 16px; z-index: 40;
    display: none;
}

/* ---------- Tema waktu (pagi/siang/sore/malam) ----------
   Overlay tipis di atas seluruh halaman, tidak mengganggu dark mode manual
   (kalau user sudah pilih dark mode, overlay waktu jadi lebih redup). */
.time-ambient {
    position: fixed; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: multiply; opacity: 0;
    transition: opacity 1.4s ease, background 1.4s ease;
}
html[data-time="pagi"] .time-ambient { opacity: 0.05; background: radial-gradient(ellipse at 20% 0%, #FFE8B0, transparent 60%); }
html[data-time="siang"] .time-ambient { opacity: 0; }
html[data-time="sore"] .time-ambient { opacity: 0.09; background: radial-gradient(ellipse at 80% 10%, #FFB37A, transparent 65%); }
html[data-time="malam"] .time-ambient { opacity: 0.16; background: radial-gradient(ellipse at 50% 0%, #2A3560, transparent 70%); mix-blend-mode: multiply; }
html[data-theme="dark"] .time-ambient { opacity: 0.06; mix-blend-mode: screen; }

/* ---------- Variasi background dekoratif per section ----------
   Dipakai bergantian di tiap section (jangan sama semua) — opacity rendah,
   blur halus, posisi absolute, tidak mengganggu keterbacaan teks. */
.deco-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.deco-bg svg { position: absolute; opacity: 0.07; filter: blur(0.4px); }
html[data-theme="dark"] .deco-bg svg { opacity: 0.1; }

.deco-torii svg { width: 220px; height: 220px; top: -30px; right: 4%; }
.deco-bamboo svg { width: 140px; height: 100%; left: 0; top: 0; }
.deco-momiji svg { width: 180px; height: 180px; bottom: -20px; left: 6%; }
.deco-seigaiha { background-image: repeating-radial-gradient(circle at 0 100%, transparent 0, transparent 14px, rgba(var(--season-tint),0.06) 15px, rgba(var(--season-tint),0.06) 16px, transparent 17px); background-size: 42px 42px; opacity: 1; }
.deco-kumiko svg { width: 260px; height: 260px; top: 10%; right: -40px; }
.deco-asanoha svg { width: 240px; height: 240px; bottom: -40px; right: 10%; }
.deco-cloud svg { width: 300px; height: 140px; top: 6%; left: -60px; }
.deco-washi { background: repeating-linear-gradient(115deg, rgba(var(--season-tint),0.035) 0 2px, transparent 2px 26px); opacity: 1; }

/* ---------- Parallax layer (kecepatan berbeda per layer saat scroll) ---------- */
.parallax-slow { will-change: transform; }
.parallax-mid { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .parallax-slow, .parallax-mid { transform: none !important; } }

/* ---------- Maskot Companion mengambang ----------
   Yuuki: menyapa/membaca/menunjuk/berpikir. Fukumaru: terbang/menunjuk/
   memberi semangat (aset ilustrasi belum tersedia — pakai ikon placeholder
   sampai ada gambar resmi, lihat komentar di main.js). */
.mascot-companion {
    position: fixed; left: 18px; bottom: 18px; z-index: 45;
    display: flex; align-items: flex-end; gap: 10px;
    transform: translateY(0); transition: transform .5s cubic-bezier(.2,.9,.3,1.3);
}
.mascot-companion.hidden-scroll { transform: translateY(140%); }
.mascot-companion .mc-figure {
    width: 62px; height: 62px; display: flex; align-items: flex-end; justify-content: center;
    cursor: pointer; filter: drop-shadow(0 6px 10px rgba(42,35,42,0.18));
    animation: mcBob 3.2s ease-in-out infinite;
    transition: transform .3s ease;
}
.mascot-companion .mc-figure:hover { transform: scale(1.08) rotate(-3deg); }
.mascot-companion .mc-figure img { width: 100%; height: auto; object-fit: contain; }
@keyframes mcBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.mc-bubble {
    max-width: 220px; background: var(--white); border: 1px solid var(--line);
    border-radius: 14px 14px 14px 3px; padding: 10px 14px; font-size: 13px;
    color: var(--sumi); box-shadow: 0 8px 22px rgba(42,35,42,0.12);
    opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .35s ease, transform .35s ease;
    margin-bottom: 6px;
}
.mc-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.mc-bubble .mc-jp { display:block; font-family: var(--font-display); color: var(--aizome); font-size: 12.5px; margin-bottom: 2px; }
.mascot-companion .mc-close {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--aizome); color: #fff; border: none; font-size: 10px; line-height: 1; cursor: pointer;
    display: none; align-items: center; justify-content: center;
}
@media (max-width: 640px) {
    .mascot-companion { left: 10px; bottom: 10px; }
    .mascot-companion .mc-figure { width: 48px; height: 48px; }
    .mc-bubble { max-width: 168px; font-size: 12px; }
}

/* ---------- Konten Harian: Kanji / Quote / Fakta / Idiom / Ungkapan ---------- */
.daily-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px; margin-top: 28px;
}
.daily-card {
    position: relative; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px 20px; overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.daily-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(42,35,42,0.1); border-color: var(--hanko); }
.daily-card .dc-glyph {
    position: absolute; right: -6px; bottom: -18px; font-family: var(--font-display);
    font-size: 92px; color: var(--aizome); opacity: 0.06; line-height: 1; pointer-events: none;
}
.daily-card .dc-kicker { display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px; }
.daily-card .dc-tag { font-size: 11px; letter-spacing: .06em; color: var(--hanko); border: 1px solid var(--hanko); border-radius: 20px; padding: 2px 9px; }
.daily-card .dc-level { font-size: 11px; color: var(--sumi-soft); }
.daily-card .dc-main { font-family: var(--font-display); font-size: 26px; color: var(--aizome); margin-bottom: 4px; }
.daily-card .dc-reading { font-size: 12.5px; color: var(--sumi-soft); margin-bottom: 8px; }
.daily-card .dc-meaning { font-size: 14.5px; margin-bottom: 8px; }
.daily-card .dc-example { font-size: 12.5px; color: var(--sumi-soft); border-top: 1px dashed var(--line); padding-top: 8px; }
.daily-card .dc-mascot { position: absolute; right: 10px; top: 10px; width: 30px; opacity: 0.9; }

/* ---------- Struktur Organisasi Interaktif ---------- */
.org-node { cursor: pointer; position: relative; }
.org-node .org-photo { transition: transform .3s ease, box-shadow .3s ease; }
.org-node:hover .org-photo { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(42,35,42,0.16); }
.org-node .org-line-pulse { position:absolute; inset:0; pointer-events:none; }
.org-tooltip {
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px);
    width: 220px; background: var(--sumi); color: var(--washi); border-radius: 10px; padding: 12px 14px;
    font-size: 12.5px; line-height: 1.55; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease; z-index: 20; text-align: left;
    box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}
.org-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--sumi);
}
.org-node.expanded .org-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.org-tooltip .ot-jobdesk { color: #E3C8D2; margin-top: 4px; display:block; }
.org-tooltip .ot-kontak { color: var(--sakura); margin-top: 6px; display:block; font-size: 11.5px; }

/* ---------- Agenda lebih hidup: countdown, progress, badge ---------- */
.tl-badge { display:inline-block; font-size: 10.5px; letter-spacing:.05em; padding: 2px 9px; border-radius: 20px; margin-bottom: 6px; margin-right:6px; }
.tl-badge.status-akan_datang { background: rgba(46,122,84,0.12); color: var(--hanko); }
.tl-badge.status-berlangsung { background: rgba(190,30,60,0.12); color: var(--hi); }
.tl-badge.status-selesai { background: rgba(108,90,99,0.12); color: var(--sumi-soft); }
.tl-badge.kategori { background: rgba(107,64,89,0.1); color: var(--aizome); border:1px solid var(--line); }
.tl-countdown { font-size: 12px; color: var(--hi); margin: 6px 0; display:flex; gap:8px; }
.tl-countdown b { font-family: var(--font-display); font-size: 15px; color: var(--sumi); }
.tl-progress { height: 4px; border-radius: 4px; background: var(--washi-deep); overflow:hidden; margin-top: 10px; }
.tl-progress > span { display:block; height:100%; background: linear-gradient(90deg, var(--hanko), var(--sakura)); border-radius: 4px; transition: width .6s ease; }

/* ---------- Berita: reading time & editorial polish ---------- */
.read-time { font-size: 11.5px; color: var(--sumi-soft); }
.read-time::before { content: '⏱ '; }
.card-date + .read-time, .fn-body .read-time { margin-left: 10px; }

/* ---------- Footer: maskot & pattern ---------- */
.footer-mascot-row { display:flex; align-items:flex-end; gap:14px; justify-content:center; margin: 6px 0 4px; }
.footer-mascot-row img { width: 54px; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25)); }
.footer-pattern { position:absolute; inset:0; opacity:0.05; pointer-events:none; background-image: repeating-radial-gradient(circle at 0 100%, transparent 0, transparent 12px, rgba(255,255,255,0.5) 13px, rgba(255,255,255,0.5) 14px, transparent 15px); background-size: 34px 34px; }
footer.site-footer { position: relative; overflow: hidden; }

/* ---------- Loading screen (mascot) ---------- */
.site-loading {
    position: fixed; inset: 0; z-index: 999; background: var(--washi);
    display: flex; flex-direction: column; align-items:center; justify-content:center; gap: 14px;
    transition: opacity .5s ease, visibility .5s ease;
}
.site-loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loading .sl-mascot { width: 84px; animation: mcWalk 1.1s steps(2) infinite; }
.site-loading .sl-jp { font-family: var(--font-display); color: var(--aizome); letter-spacing: .1em; font-size: 14px; }
.site-loading .sl-bar { width: 140px; height: 3px; background: var(--washi-deep); border-radius: 3px; overflow: hidden; }
.site-loading .sl-bar span { display:block; height:100%; width: 40%; background: var(--hanko); animation: slBar 1.1s ease-in-out infinite; }
@keyframes mcWalk { 0%,100% { transform: translateY(0) rotate(-2deg);} 50% { transform: translateY(-5px) rotate(2deg);} }
@keyframes slBar { 0% { transform: translateX(-120%);} 100% { transform: translateX(340%);} }

/* ---------- Skeleton loading ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--washi-deep); border-radius: var(--radius); }
.skeleton::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: skeletonShine 1.4s infinite;
}
html[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
@keyframes skeletonShine { 100% { transform: translateX(100%); } }

/* ---------- Magnetic button ---------- */
.btn.magnetic { transition: transform .15s ease-out; }

/* ---------- Page transition ---------- */
.page-fade-out { animation: pageFadeOut .35s ease forwards; }
@keyframes pageFadeOut { to { opacity: 0; transform: translateY(6px); } }
body { animation: pageFadeIn .4s ease; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform:none; } }

/* ---------- Empty state dengan maskot ---------- */
.empty-state { text-align:center; padding: 50px 20px; color: var(--sumi-soft); }
.empty-state .es-mascot { width: 90px; margin: 0 auto 14px; opacity: .95; }
.empty-state .es-jp { display:block; font-family: var(--font-display); color: var(--aizome); font-size: 13px; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
    .mascot-companion .mc-figure, .site-loading .sl-mascot, .skeleton::after { animation: none; }
}

/* ---------- Hero stagger animation ---------- */
.hero-inner .eyebrow { opacity:0; animation: heroUp .6s ease forwards; animation-delay: .15s; }
.hero-inner h1 { opacity:0; animation: heroUp .7s ease forwards; animation-delay: .32s; }
.hero-inner p.lead { opacity:0; animation: heroFade .7s ease forwards; animation-delay: .52s; }
.hero-inner .hero-actions { opacity:0; animation: heroFade .6s ease forwards; animation-delay: .7s; }
.hero-seal-card { opacity:0; animation: heroFade .8s ease forwards; animation-delay: .55s; }
.hero-mascot-greet { opacity:0; animation: heroFade .7s ease forwards; animation-delay: .95s; position:absolute; right:6%; bottom:-6px; width:96px; z-index:2; }
@keyframes heroUp { from { opacity:0; transform: translateY(16px);} to { opacity:1; transform:none; } }
@keyframes heroFade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
    .hero-inner .eyebrow, .hero-inner h1, .hero-inner p.lead, .hero-inner .hero-actions, .hero-seal-card, .hero-mascot-greet { animation: none; opacity: 1; }
}
@media (max-width: 780px) { .hero-mascot-greet { display:none; } }