@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../font/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../font/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../font/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../font/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Open Sans', sans-serif;
    background: radial-gradient(circle at center, #1a3822 0%, #0d1a11 100%);
    color: #e0e0e0; min-height: 100vh; overflow-x: hidden;
}

/* KUSTOMISASI SCROLLBAR (Biar makin keren saat digeser) */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: #0d1a11; }
::-webkit-scrollbar-thumb { background: #1a7a27; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #4CAF50; }

/* =========================================
   NAVBAR PREMIUM (RATA KANAN & STICKY)
   ========================================= */
nav { 
    display: flex; 
    justify-content: flex-start; /* Mengatur isi ke kiri, nanti nav-links di dorong ke kanan */
    align-items: center; 
    padding: 15px 50px; /* Sedikit lebih ramping */
    background: rgba(10, 20, 13, 0.7); /* Efek gelap elegan */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    position: sticky; /* Menempel di atas saat discroll */
    top: 0; 
    z-index: 1000;
    border-bottom: 1px solid rgba(76, 175, 80, 0.15); /* Garis kaca tipis */
}

.nav-logo { 
    font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: 900; 
    color: white; text-decoration: none; display: flex; align-items: center; gap: 10px; 
}
.nav-logo img { width: 35px; }

/* Kunci Rata Kanan */
.nav-links { 
    display: flex; gap: 35px; align-items: center; 
    margin-left: auto; /* Ini yang mendorong semua menu ke kanan! */
    margin-right: 30px; /* Jarak antara menu dan tombol Discord */
}

/* Animasi Link Garis Tengah (Lebih Premium) */
.nav-item {
    position: relative;
    color: #d1d1d1; text-decoration: none; font-weight: 600; font-size: 0.9rem;
    padding-bottom: 5px; cursor: pointer; transition: color 0.3s;
}
.nav-item:hover, .nav-item.active { color: #4CAF50; }

.nav-item::after {
    content: ''; position: absolute; width: 0; height: 2px;
    bottom: 0; left: 50%; background-color: #4CAF50;
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%); /* Garis animasi melebar dari tengah */
}
.nav-item:hover::after, .nav-item.active::after { width: 100%; }

/* Dropdown Menu (Tetap Pakai Jembatan Anti Hilang) */
.dropdown { 
    position: relative; display: inline-block; 
    padding-bottom: 15px; margin-bottom: -15px; 
}
.dropbtn { display: flex; align-items: center; gap: 5px; }

.dropdown-content {
    display: none; position: absolute; top: 100%; left: -10px;
    background-color: rgba(13, 26, 17, 0.95); min-width: 170px;
    box-shadow: 0px 8px 25px rgba(0,0,0,0.7); z-index: 100;
    border-radius: 8px; border: 1px solid rgba(76, 175, 80, 0.3);
    overflow: hidden; margin-top: 0px; 
    animation: fadeInDown 0.3s ease forwards;
}

.dropdown-content a {
    color: #bbb; padding: 12px 20px; text-decoration: none; display: block; font-size: 0.85rem;
    border-bottom: 1px solid rgba(76, 175, 80, 0.1); transition: all 0.3s;
}
.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover { 
    background-color: rgba(76, 175, 80, 0.15); 
    color: #4CAF50; 
    padding-left: 25px; /* Efek geser indent */
}

.dropdown:hover .dropdown-content { display: block; }

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tombol Discord Premium Minimalis */
.btn-discord { 
    background-color: transparent; 
    color: #4CAF50; 
    padding: 8px 18px; 
    border-radius: 20px; /* Bentuk membulat oval */
    text-decoration: none; 
    font-weight: 600; 
    font-size: 0.8rem; /* Ukuran teks diperkecil */
    transition: all 0.3s; 
    border: 1px solid #4CAF50; 
    display: flex; align-items: center; gap: 8px;
}
.btn-discord:hover { 
    background-color: #4CAF50; 
    color: white; 
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4); 
    transform: translateY(-2px); /* Efek melayang tipis saat diklik */
}

.btn-primary { background-color: #1a7a27; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s; border: 1px solid #28a745; }
.btn-primary:hover { background-color: #28a745; box-shadow: 0 0 15px rgba(40, 167, 69, 0.5); }
/* ANIMASI */
.fade-in-up { animation: fadeInUp 1s ease-out forwards; opacity: 0; }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }

/* =========================================
   HERO SECTION (BERANDA / INDEX) -- SUDAH KEMBALI!
   ========================================= */
.hero-container {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1200px; margin: 80px auto; padding: 0 50px;
}
.hero-text { flex: 1; max-width: 600px; }
.hero-text h1 { font-family: 'Montserrat', sans-serif; font-size: 4rem; line-height: 1.1; margin-bottom: 20px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.hero-text h1 span { color: transparent; -webkit-text-stroke: 2px #4CAF50; }
.hero-text p { font-size: 1.1rem; margin-bottom: 30px; color: #bbb; line-height: 1.8; }
.hero-buttons { display: flex; gap: 15px; }
.hero-image { flex: 1; display: flex; justify-content: flex-end; }
.hero-image img { max-width: 100%; width: 450px; filter: drop-shadow(0 0 20px rgba(76, 175, 80, 0.3)); }
.btn-outline { background-color: transparent; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: bold; border: 2px solid #555; transition: 0.3s; }
.btn-outline:hover { border-color: #28a745; }


/* =========================================
   KANVAS RAKSASA (STRUKTUR POHON)
   ========================================= */
.org-chart-wrapper {
    width: 100%;
    overflow-x: auto; /* Scrollbar hanya akan muncul di area ini */
    padding: 20px 0;
}

.org-chart-canvas {
    min-width: 1400px; /* GARANSI area luas! Kotak tidak akan pernah terlipat/hancur */
    padding: 40px;     /* Ruang bernapas agar animasi hover tidak membuat layar goyang */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

/* STRUKTUR POHON INTI */
.tree-container { display: flex; justify-content: center; width: 100%; }
.tree ul { padding-top: 20px; position: relative; display: flex; justify-content: center; transition: all 0.5s; width: 100%; }
.tree li { text-align: center; list-style-type: none; position: relative; padding: 20px 2px 0 2px; transition: all 0.5s; }
.tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #4CAF50; width: 50%; height: 20px; }
.tree li::after { right: auto; left: 50%; border-left: 2px solid #4CAF50; }
.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid #4CAF50; border-radius: 0 5px 0 0; }
.tree li:first-child::after { border-radius: 5px 0 0 0; }
.tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #4CAF50; width: 0; height: 20px; }

/* KOTAK PROFIL */
.group-node { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; position: relative; z-index: 2; }
.tree li a, .group-node a, .grid-box a {
    border: 2px solid #555; padding: 8px 4px; text-decoration: none; color: #e0e0e0;
    display: inline-block; border-radius: 8px; background: #112215;
    transition: all 0.3s; min-width: 105px; margin: 0 2px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); text-align: center; position: relative; z-index: 2;
}
.tree li a:hover, .group-node a:hover, .grid-box a:hover { 
    background: #1a4a27; border-color: #4CAF50; 
    transform: scale(1.1); /* Hover bebas diperbesar, kanvas aman dari goyang */
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.6); z-index: 10; 
}
.tree li a img, .group-node a img, .grid-box a img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; margin-bottom: 5px; border: 2px solid #4CAF50; }
.tree li a strong, .group-node a strong, .grid-box a strong { display: block; color: #4CAF50; margin-bottom: 3px; font-size: 0.75rem; text-transform: uppercase; }
.tree li a span, .group-node a span, .grid-box a span { font-size: 0.7rem; color: #bbb; display: block; }

/* Kepadatan Khusus Koordinator */
.koor-node a { min-width: 75px; padding: 6px 2px; }
.koor-node a img { width: 30px; height: 30px; }
.koor-node a strong { font-size: 0.65rem; }

/* =========================================
   SISTEM PERSIMPANGAN 3 (MAGIC T-JUNCTION)
   ========================================= */
.massive-section { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; margin-top: -10px;}
.center-line { width: 2px; background-color: #4CAF50; margin: 0 auto; z-index: 0; }

.magic-wrapper { position: relative; width: 100%; display: flex; justify-content: center; margin-bottom: -20px; }
.magic-line { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background-color: #4CAF50; transform: translateX(-50%); z-index: 0; }
.half-width { flex: 1; width: 50%; }

/* Perisai Kuat Anti-Tabrak Garis Tengah */
.magic-branch.left-side { padding-right: 60px !important; }
.magic-branch.right-side { padding-left: 60px !important; }

/* =========================================
   BAGIAN BAWAH MASIF (KIRI & KANAN) -- FIX CENTER & NAMA PANJANG
   ========================================= */
.section-title {
    background: #0d1a11; border: 2px solid #4CAF50; color: #4CAF50;
    padding: 5px 20px; border-radius: 20px; font-weight: bold; font-size: 0.8rem;
    margin: 10px 0; z-index: 2; text-transform: uppercase; letter-spacing: 1px;
}

.split-layout { 
    display: flex; 
    gap: 30px; 
    justify-content: center; 
    flex-wrap: wrap; /* Jika layar kecil otomatis turun */
    width: 100%; 
    margin-bottom: 20px; 
}

/* KUNCI RAPIH: Ganti Grid ke Flex Center agar baris ganjil pas di tengah */
.split-group { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10px; 
    max-width: 500px; /* Lebar maksimal grup kiri/kanan */
}

/* Memaksa kotak punya lebar seragam dan teks sejajar */
.grid-box a { 
    width: 110px; /* Lebar dikunci! Tidak akan mekar */
    padding: 10px 5px; 
    display: flex !important; /* Timpa display inline-block dari atas */
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; /* Foto selalu di atas, nama mengikuti di bawah */
    border: 2px solid #555;
    border-radius: 8px;
    background: #112215;
    text-decoration: none;
    transition: all 0.3s;
}

.grid-box a:hover { 
    background: #1a4a27; border-color: #4CAF50; 
    transform: scale(1.1); box-shadow: 0 0 15px rgba(76, 175, 80, 0.6); z-index: 10; 
}

.grid-box a img { 
    width: 45px; 
    height: 45px; 
    object-fit: cover; 
    border-radius: 50%; 
    margin-bottom: 8px; 
    border: 2px solid #4CAF50; 
}

.grid-box a strong { 
    font-size: 0.65rem; 
    text-align: center; 
    margin-bottom: 4px; 
    line-height: 1.2; 
    color: #4CAF50;
}

.grid-box a span { 
    font-size: 0.7rem; 
    color: #bbb;
    text-align: center; 
    word-wrap: break-word; /* Teks panjang otomatis turun, tak menabrak */
    width: 100%;
    line-height: 1.3;
}
/* MODAL / POP-UP */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 1000; justify-content: center; align-items: center; animation: fadeIn 0.3s ease-out; }
.modal-content { background: #112215; border: 2px solid #4CAF50; border-radius: 15px; padding: 30px; width: 90%; max-width: 400px; text-align: center; position: relative; box-shadow: 0 0 30px rgba(76, 175, 80, 0.4); animation: scaleUp 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleUp { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.close-btn { position: absolute; top: 10px; right: 15px; color: #bbb; font-size: 1.5rem; cursor: pointer; transition: 0.3s; font-weight: bold; }
.close-btn:hover { color: #4CAF50; }
.modal-content img { width: 120px; height: 120px; border-radius: 50%; border: 3px solid #4CAF50; object-fit: cover; margin-bottom: 15px; }
.modal-content h3 { color: white; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; }
.modal-content .role { color: #4CAF50; font-weight: bold; margin-bottom: 15px; font-size: 0.9rem; text-transform: uppercase; }
.modal-content .desc { color: #ccc; font-size: 0.9rem; line-height: 1.5; }
/* =========================================
   HALAMAN PERATURAN (IC & OOC)
   ========================================= */
/* =========================================
    HALAMAN PERATURAN (IC & OOC) - UKURAN PREMIUM
   ========================================= */
/* =========================================
    HALAMAN PERATURAN (IC & OOC) - VERSI FIX
   ========================================= */
.rules-container {
    max-width: 750px; 
    margin: 50px auto;
    padding: 0 20px;
    padding-bottom: 80px;
}

.page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    color: white;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}

.page-subtitle {
    text-align: center;
    color: #bbb;
    margin-bottom: 40px;
    font-size: 0.95rem;
}

.rule-card {
    background: rgba(17, 34, 21, 0.85);
    border-left: 3px solid #4CAF50;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.rule-card:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.2);
    border-color: #28a745;
}

/* Header Card / Trigger Dropdown */
.rule-card h2 {
    color: #4CAF50;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    margin-bottom: 0; 
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

/* Icon Panah Dropdown */
.rule-card h2::after {
    content: '▼';
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: #4CAF50;
}

/* Efek saat Card Terbuka */
.rule-card.active h2 {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}

.rule-card.active h2::after {
    transform: rotate(180deg);
}

/* RESET LIST: Menghapus Titik Putih Bawaan */
.rule-card ul, 
.rule-card .main-list, 
.rule-card .sub-list {
    list-style: none !important; /* Mematikan bullet poin default */
    padding-left: 0;
    margin: 0;
    display: none; /* Sembunyi default untuk JS dropdown */
}

/* Tampilkan isi saat card aktif */
.rule-card.active ul, 
.rule-card.active .main-list {
    display: block;
    padding-top: 15px;
    animation: fadeIn 0.4s ease;
}

.rule-card ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: #d1d1d1;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Panah Kustom ➔ */
.rule-card ul li::before {
    content: '➔';
    position: absolute;
    left: 0;
    top: 1px;
    color: #1a7a27;
    font-size: 0.85rem;
}

/* Sub-list (Anak Peraturan) */
.rule-card .sub-list {
    display: block; /* Selalu block karena induknya sudah dikontrol active */
    margin-top: 10px;
    margin-left: 20px;
}

.rule-card .sub-list li::before {
    content: '○'; /* Gunakan simbol lingkaran kecil agar beda dengan list utama */
    color: #4CAF50;
}

/* FOOTER NOTE */
.rules-footer-note {
    max-width: 500px;
    margin: 40px auto;
    padding: 15px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed #4CAF50;
    border-radius: 10px;
    text-align: center;
}

.rules-footer-note p {
    color: #ffcc00;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* =========================================
   BUKU SAKU (SISTEM TAB INTERAKTIF)
   ========================================= */
.buku-saku-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
    padding-bottom: 80px;
}

.tabs-header {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab-btn {
    background: rgba(17, 34, 21, 0.8);
    border: 2px solid #1a7a27;
    color: #ccc;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    background: #1a7a27;
    color: white;
}

.tab-btn.active {
    background: #4CAF50;
    color: white;
    border-color: #4CAF50;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}

.tab-content {
    display: none; /* Sembunyikan semua konten default */
    background: rgba(17, 34, 21, 0.85);
    border-left: 4px solid #4CAF50;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    animation: fadeIn 0.4s ease;
    backdrop-filter: blur(5px);
}

.tab-content.active {
    display: block; /* Tampilkan hanya yang aktif */
}

.tab-content h3 {
    color: #4CAF50;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(76, 175, 80, 0.3);
    padding-bottom: 10px;
}

/* Kotak-kotak Kode Radio */
.radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.radio-item {
    background: rgba(0,0,0,0.4);
    padding: 15px;
    border-radius: 5px;
    border-left: 3px solid #1a7a27;
}

.radio-item strong {
    color: #4CAF50;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
}

/* Kotak Contoh RP */
.rp-example {
    background: rgba(0,0,0,0.4);
    padding: 15px;
    border-radius: 5px;
    border-left: 3px solid #ffcc00; /* Warna kuning peringatan */
    margin-bottom: 15px;
}

.rp-example .command {
    color: #ffcc00;
    font-family: monospace;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 5px;
}
/* =========================================
   STYLE TABEL MEDIS BUKU SAKU
   ========================================= */
.med-table-container {
    overflow-x: auto;
    margin-top: 20px;
}

.med-table {
    width: 100%;
    border-collapse: collapse;
    color: #e0e0e0;
    font-size: 0.9rem;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.med-table th {
    background: #1a7a27;
    color: white;
    padding: 12px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #28a745;
}

.med-table td {
    padding: 12px;
    border: 1px solid rgba(76, 175, 80, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

.med-table tr:nth-child(even) td {
    background: rgba(17, 34, 21, 0.4);
}

.med-table tr:hover td {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    transition: 0.2s;
}
/* =========================================
   ANIMASI KHUSUS BERANDA (INDEX.PHP)
   ========================================= */

/* Animasi Melayang untuk Gambar Hero */
.floating-img {
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); filter: drop-shadow(0 0 30px rgba(76, 175, 80, 0.6)); }
    100% { transform: translateY(0px); }
}

/* Animasi Cahaya Berdenyut untuk Teks Utama */
.glow-text {
    color: transparent;
    -webkit-text-stroke: 2px #4CAF50;
    animation: pulseGlow 2s infinite alternate;
}
@keyframes pulseGlow {
    from { text-shadow: 0 0 10px rgba(76, 175, 80, 0.5), 0 0 20px rgba(76, 175, 80, 0.3); }
    to { text-shadow: 0 0 20px rgba(76, 175, 80, 0.8), 0 0 30px rgba(76, 175, 80, 0.6), 0 0 40px rgba(76, 175, 80, 0.4); }
}

/* Animasi Muncul Bergantian (Staggered Fade) */
.fade-in-up.delay-1 { animation-delay: 0.2s; }
.fade-in-up.delay-2 { animation-delay: 0.4s; }
.fade-in-up.delay-3 { animation-delay: 0.6s; }

/* Efek Partikel Latar (Opsional untuk memperkeren Beranda) */
.hero-container {
    position: relative;
    z-index: 10;
}
/* =========================================
   STRUKTUR TREE & IGO FIX (KMT/EMT)
   ========================================= */
.cabang-lebar { padding: 20px 80px 0 80px !important; }
.igo-li::before, .igo-li::after { border-left: none !important; border-right: none !important; }
.igo-wrapper { position: relative; transform: translateX(110px); z-index: 3; }
.igo-wrapper > a::before { display: none !important; }
.igo-wrapper::before { content: ''; position: absolute; top: -20px; left: -110px; width: calc(110px + 50%); height: 2px; background: #4CAF50; z-index: 1; }
.igo-wrapper::after { content: ''; position: absolute; top: -20px; left: 50%; width: 2px; height: 20px; background: #4CAF50; transform: translateX(-50%); z-index: 1; }

/* =========================================
   DESAIN FITUR MODAL POPUP (PREMIUM V2)
   ========================================= */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.6); /* Latar gelap transparan */
    backdrop-filter: blur(6px); /* Efek blur premium di background */
    justify-content: center; 
    align-items: center; 
}

.modal-content { 
    background: linear-gradient(145deg, rgba(16, 30, 20, 0.95), rgba(10, 20, 13, 0.95)); 
    padding: 40px 30px 35px 30px; 
    border-radius: 16px; 
    border: 1px solid rgba(76, 175, 80, 0.3); /* Garis tepi hijau lebih halus */
    text-align: center; 
    position: relative; 
    width: 340px; /* LEBAR DIKUNCI DI SINI AGAR TIDAK MELAR */
    max-width: 85%; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 20px rgba(76, 175, 80, 0.15); /* Shadow elegan */
    animation: modalFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Animasi muncul super mulus */
}

@keyframes modalFadeIn { 
    from { transform: translateY(20px) scale(0.95); opacity: 0; } 
    to { transform: translateY(0) scale(1); opacity: 1; } 
}

.close-btn { 
    color: rgba(255, 255, 255, 0.4); 
    position: absolute; 
    top: 12px; 
    right: 18px; 
    font-size: 28px; 
    font-weight: normal; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    line-height: 1;
}

.close-btn:hover, .close-btn:focus { 
    color: #ff4c4c; 
    transform: scale(1.1); /* Efek membesar dikit saat disentuh mouse */
}

#modalImg { 
    width: 130px; 
    height: 130px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 3px solid #4CAF50; 
    margin-bottom: 18px; 
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
    background: #111;
}

#modalRole { 
    color: #4CAF50; 
    margin: 0 0 8px 0; 
    font-size: 0.9rem; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    font-weight: 600;
}

#modalName { 
    color: #ffffff; 
    margin: 0; 
    font-size: 1.4rem; 
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.portal-body {
  display: flex; flex-direction: column; min-height: 100vh;
}

.ic { vertical-align: -0.125em; flex-shrink: 0; }

/* Tautan ke editor surat. Situs aslinya tidak punya ini; ditambahkan karena
   portal kini menempati "/" sementara editornya pindah ke "/editor" — tanpa
   tautan di sini tidak ada jalan masuk dari halaman publik. */
.btn-editor {
    background-color: #4CAF50;
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    margin-left: 10px;
    transition: all 0.3s ease;
}
.btn-editor:hover {
    background-color: #45a049;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
    transform: translateY(-2px);
}

/* Mode edit isi portal (public/js/portal.js). Ditulis paling akhir dan dengan
   kekhususan yang sengaja lebih tinggi dari aturan portal (`.pe-editing .x`,
   bukan `.x`) supaya tidak kalah oleh selector seperti `.profile-card span`. */

/* Pil pembuka, hanya ada untuk admin. Di kiri-bawah supaya sepihak dengan
   panelnya yang juga di kiri. */
.pe-open {
    position: fixed; left: 16px; bottom: 16px; z-index: 9999;
    font: 600 14px 'Open Sans', sans-serif; cursor: pointer;
    padding: 10px 18px; border-radius: 22px; border: none;
    background: #4CAF50; color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.pe-open:hover { background: #45a049; }
body.pe-side-open .pe-open { display: none; }

/* Panel samping KIRI yang MENDORONG isi, bukan menutupinya — pola `.app-body`
   di /editor: bilah atas selebar layar, di bawahnya panel satu kolom dan isi
   satu kolom di sebelahnya. Saat mode edit, body menjadi baris flex BERLIPAT:
   nav mengambil satu baris penuh, lalu panel dan isi berbagi baris kedua. Isi
   halaman dibungkus `.pe-content` oleh `portal.js`, jadi isinya menyempit dan
   tetap terbaca penuh, bukan tertutup panel. Panelnya `sticky` setinggi layar
   supaya tetap terlihat saat digulir.

   Sebelumnya panel ini `position: fixed` di kanan dan menumpuk di atas isi;
   itu yang membuat isinya tertutup. */
.pe-side {
    display: none; flex-direction: column;
    width: 340px; max-width: 88vw;
    height: 100vh; height: 100dvh;
    background: #0a140d; color: #e8f5e9;
    border-right: 1px solid #4CAF50;
    font-family: 'Open Sans', sans-serif; font-size: 14px; text-align: left;
}
body.pe-side-open { display: flex; flex-wrap: wrap; align-items: flex-start; flex-direction: row; }
body.pe-side-open nav { flex: 0 0 100%; order: -2; }
body.pe-side-open .pe-side {
    /* `order: -1` menaruh panel di KIRI tanpa mengubah urutan DOM. Urutan DOM
       harus tetap (isi dulu, panel di akhir) supaya jalur DOM yang jadi kunci
       daftar tersimpan tidak bergeser antara pengunjung anonim dan admin. */
    display: flex; order: -1; flex-shrink: 0;
    /* Nav tetap `sticky` dan punya `z-index: 1000`, jadi panel yang menempel di
       `top: 0` akan tergelincir DI BAWAHNYA begitu halaman digulir — kepala
       panel ("Edit isi halaman") hilang di balik nav. Karena tinggi nav
       bergantung isinya, tingginya diukur `portal.js` dan ditulis ke
       `--pe-nav-h`; panel menempel di bawah nav, bukan di bawah layar. */
    position: sticky; top: var(--pe-nav-h, 0px);
    height: calc(100dvh - var(--pe-nav-h, 0px));
}
/* Pembungkus isi halaman. Saat panel tertutup ia hanya `<div>` biasa, jadi
   tata letak halaman tidak berubah sama sekali. */
.pe-content { flex: 1; min-width: 0; }

/* Di layar sempit tidak ada ruang untuk mendorong: panel kembali jadi laci
   yang menumpuk di atas isi, dan nav kembali mengalir biasa. */
@media (max-width: 900px) {
    body.pe-side-open { display: block; }
    body.pe-side-open .pe-side {
        position: fixed; top: 0; left: 0; z-index: 10000;
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.55);
    }
}

.pe-side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid rgba(76, 175, 80, 0.35);
    font-weight: 700;
}
.pe-close {
    background: transparent; border: none; color: #e8f5e9;
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.pe-close:hover { color: #4CAF50; }

.pe-side-body { flex: 1; overflow: auto; padding: 14px 16px; }
.pe-hint {
    margin: 0 0 14px; font-size: 12px; line-height: 1.55; opacity: 0.75;
}
.pe-group { margin-bottom: 16px; }
.pe-group h4 {
    margin: 0 0 6px; font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; opacity: 0.6; font-weight: 700;
}
.pe-entry {
    display: block; width: 100%; text-align: left; cursor: pointer;
    margin-bottom: 4px; padding: 8px 10px; border-radius: 8px;
    background: rgba(76, 175, 80, 0.1); color: #e8f5e9;
    border: 1px solid rgba(76, 175, 80, 0.28);
    font: inherit; font-size: 13px; text-transform: capitalize;
}
.pe-entry:hover { background: rgba(76, 175, 80, 0.24); }
.pe-entry-open {
    background: rgba(76, 175, 80, 0.24);
    border-color: rgba(76, 175, 80, 0.7);
}

/* ---------- formulir kolom sebuah item ---------- */
/* Menggantikan "ketik langsung di halaman" sebagai jalur utama: tiap kolom
   punya label dan kotaknya sendiri, jadi nama, jabatan, dan alamat foto
   terbaca sebagai kolom — bukan sebagai tiga tempat berbeda di halaman yang
   harus dicari satu per satu. Mengetik di halaman TETAP bekerja; keduanya
   menunjuk simpul DOM yang sama. */
.pe-form {
    margin: 0 0 6px; padding: 10px 12px;
    border: 1px solid rgba(76, 175, 80, 0.35);
    border-left: 3px solid #4CAF50;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
}
.pe-field { display: block; margin-bottom: 8px; }
.pe-field:last-child { margin-bottom: 0; }
.pe-field-label {
    display: block; margin-bottom: 3px;
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    opacity: 0.65; font-weight: 700;
}
/* `<strong>` pemisah di dalam baris poin ("A. ", "DIREKTUR: "). Ditampilkan
   sebagai label tetap, bukan ikut disunting: kalau ia masuk ke dalam kotak
   teks, mengetik satu huruf akan menghapus penandanya dan tampilannya rusak. */
.pe-field-lead {
    display: inline-block; margin-bottom: 3px; padding: 1px 6px;
    border-radius: 4px; background: rgba(76, 175, 80, 0.2);
    font-size: 11px; font-weight: 700;
}
.pe-form input {
    display: block; width: 100%; box-sizing: border-box;
    padding: 7px 9px; border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.45);
    background: #06100a; color: #e8f5e9;
    font: inherit; font-size: 13px;
}
.pe-form input:focus {
    outline: none; border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.25);
}

.pe-side-foot {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 16px; border-top: 1px solid rgba(76, 175, 80, 0.35);
}
.pe-side-foot button {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
}
.pe-save { background: #4CAF50; color: #ffffff; }
.pe-save:hover { background: #45a049; }
.pe-save[disabled] { opacity: 0.6; cursor: default; }
.pe-cancel {
    background: transparent; color: #e8f5e9;
    border-color: rgba(76, 175, 80, 0.6);
}
.pe-cancel:hover { background: rgba(76, 175, 80, 0.15); }
.pe-status { flex-basis: 100%; font-size: 12px; opacity: 0.85; }

/* Sorotan region yang sedang disunting. */
.pe-editing [data-portal-block],
.pe-editing [data-portal-item] {
    outline: 1px dashed rgba(76, 175, 80, 0.55);
    outline-offset: 2px; border-radius: 4px;
}
.pe-editing [data-portal-item] { position: relative; }
.pe-editing [data-portal-block]:focus,
.pe-editing [data-portal-item]:focus {
    outline: 2px solid #4CAF50; background: rgba(76, 175, 80, 0.1);
}
.pe-flash { animation: pe-flash 1.2s ease; }
@keyframes pe-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
    35% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0.55); }
}

/* Kanvas pohon struktur dipatok `min-width: 1400px` di stylesheet aslinya
   ("GARANSI area luas!") dan digulir mendatar oleh pembungkusnya. Begitu kolom
   isi menyempit — panel dibuka, atau layar sempit — pohonnya terpotong dan
   harus digulir.

   Melepas `min-width` saja tidak cukup untuk menskalakannya: baris pohon
   memakai lebar PERSENTASE (`.half-width { flex: 1; width: 50% }`), jadi lebar
   yang dibutuhkan ikut TUMBUH saat wadahnya melebar. Selama kanvasnya masih
   ikut melebar-menyempit, memperkecilnya dengan `zoom` malah melapangkan
   wadahnya, isinya melebar lagi, dan faktornya tidak pernah bertemu — sudah
   dicoba dan melenceng terus.

   Jadi lebarnya dipatok TETAP pada lebar desainnya, baru `portal.js`
   menskalakannya. `min-width: 100%` menjaga perilaku lama di layar lebar: di
   atas 1400px kanvasnya tetap selebar wadah dan tidak diskalakan. */
.org-chart-canvas { width: 1400px; min-width: 100%; }
/* Di layar lebar skalanya pas, jadi tidak ada yang perlu digulir. Di ponsel
   TIDAK: `portal.js` memberi lantai pada faktornya (lihat `fitCharts`), karena
   pohon yang diperkecil sampai ~0,23 membuat jabatan dan nama jadi ~2,6px —
   muat, tapi tak terbaca. Begitu lantainya kena, pohonnya memang lebih lebar
   dari layar, dan menggulir mendatar adalah jawaban yang jujur untuk bagan
   organisasi. Jadi `auto` dikembalikan: ia hanya bekerja di lebar yang
   benar-benar butuh, dan tidak pernah muncul di layar lebar. */
.org-chart-wrapper { overflow-x: auto; }

.pe-editing .pe-photo { cursor: pointer; outline: 2px dashed rgba(76, 175, 80, 0.85); }
.pe-editing .pe-item-btn {
    width: 20px; height: 20px; line-height: 19px;
    text-align: center; border-radius: 50%; font-size: 13px; font-weight: 700;
    cursor: pointer; z-index: 10; user-select: none;
}
/* Satu pil di tengah-bawah item. Sudut atas tertutup nav yang menempel, dan
   sudut-sudut bersebelahan (kanan item ini, kiri item berikutnya) saling
   menimpa; tengah-bawah bebas dari keduanya. */
.pe-editing .pe-item-tools {
    position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 4px; z-index: 10;
}
.pe-editing .pe-add { background: #4CAF50; color: #06100a; }
.pe-editing .pe-del { background: #c62828; color: #ffffff; }

/* ==========================================================================
   RESPONSIF
   ==========================================================================
   Berkas aslinya nol media query, dan `body { overflow-x: hidden }` menutupi
   akibatnya: yang tidak muat bukan digulir, tapi DIPOTONG — dan yang terpotong
   selalu tepi kanan, yaitu tombol "Masuk"/"MDT" dan dua menu terakhir. Jadi
   halaman ini bukan cuma "kurang enak di ponsel"; ada bagian yang tidak bisa
   dijangkau sama sekali.

   Dua ambang, sengaja sedikit dan tidak bertabrakan dengan 900px milik panel
   sunting: 900px (tata letak berubah bentuk) dan 520px (jarak dirapatkan).

   Blok ini ditaruh paling AKHIR supaya menang urutan atas aturan yang sama
   spesifikasinya. Satu pengecualian: `buku_saku_emt` menulis gayanya di blok
   <style> halaman yang datang SESUDAH berkas ini, jadi dua aturan di sana
   diberi selektor `body ...` supaya menang lewat kekhususan, bukan urutan. */

@media (max-width: 900px) {
    /* ---------- bilah nav ---------- */
    /*
       Membungkus jadi dua baris: lambang + kedua tombol di atas, seluruh menu
       di bawahnya. Tanpa tombol hamburger — menu ini cuma lima tautan dan tiga
       di antaranya punya submenu, jadi menyembunyikannya di balik satu ikon
       justru menambah satu ketukan untuk hal yang di desktop terlihat
       sekaligus. Yang penting bukan "terlihat rapi", tapi "semuanya terjangkau",
       dan membungkus sudah mencapai itu tanpa JavaScript.
    */
    nav {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 8px 12px;
    }
    .nav-logo { font-size: 1rem; }
    .nav-links {
        /* `order: 3` + `flex-basis: 100%`: satu baris penuh SENDIRI, di bawah
           lambang dan tombol-tombolnya. */
        order: 3;
        flex-basis: 100%;
        margin: 0;
        gap: 4px 18px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    /* Sasaran jari. Tinggi 44px adalah angka yang dipakai seluruh aplikasi KMS
       di `app/globals.css`, jadi kedua sisi situs ini sama-sama nyaman
       disentuh. */
    .nav-item {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 0.85rem;
    }
    .btn-discord,
    .btn-editor,
    .btn-primary,
    .btn-outline {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 14px;
    }

    /* ---------- submenu yang bisa dibuka jari ---------- */
    /*
       `.dropdown-content` aslinya hanya muncul dari `:hover`. Di layar sentuh
       itu berarti submenu tak bisa dibuka sama sekali: ketukan memicu hover
       sesaat lalu langsung hilang, dan `.dropbtn` adalah <a> tanpa href
       sehingga tidak bisa difokus. `:focus-within` adalah jalur yang bekerja
       untuk jari maupun papan ketik, dan ia tidak butuh JavaScript — cukup
       `tabindex="0"` pada pemicunya (ditambahkan `build.py`).

       Di ponsel isinya dibuat mengalir (`position: static`), bukan mengambang:
       daftar 170px yang melayang di layar 320px pasti menutupi sesuatu.
    */
    .dropdown {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .dropdown-content {
        position: static;
        left: auto;
        min-width: 0;
        margin-top: 4px;
        animation: none;
        box-shadow: none;
    }
    .dropdown:focus-within .dropdown-content { display: block; }
    .dropdown-content a { padding: 12px 14px; }

    /* ---------- hero (beranda) ---------- */
    /*
       Hero adalah dua kolom flex yang sama-sama `flex: 1`, jadi di ponsel
       keduanya BERBAGI ruang dan menyusut bersama, bukan bertumpuk: di 320px
       kolom teks tinggal ~110px dan judul 4rem-nya pecah. Bertumpuk adalah
       satu-satunya bentuk yang masuk akal untuk teks di samping gambar.

       `min-width: 0` pada kedua kolom itu wajib, dan itu sebab kedua dari
       masalah yang sama: flex item default-nya `min-width: auto`, dan
       `max-width: 100%` pada gambar ber-`width: 450px` tidak menurunkan
       min-content-nya — jadi kolom gambar mengunci lebar minimum ~450px dan
       MEMAKSA hero melebar, bukan sekadar menyusut.
    */
    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 28px;
        margin: 48px auto;
        padding: 0 20px;
    }
    .hero-text,
    .hero-image { min-width: 0; max-width: 100%; }
    /* Judul tetap boleh besar, tapi tidak boleh melebihi layar. `clamp` dengan
       suku `vw` membuatnya mengikuti lebar alih-alih dipatok 4rem. */
    .hero-text h1 { font-size: clamp(2rem, 9vw, 3rem); }
    .hero-text p { font-size: 1rem; line-height: 1.7; }
    .hero-image { justify-content: center; }
    .hero-image img { width: 100%; max-width: 320px; }
    .hero-buttons { justify-content: center; flex-wrap: wrap; }

    /* ---------- judul halaman (peraturan & buku saku) ---------- */
    .page-title {
        font-size: clamp(1.4rem, 6.5vw, 2.2rem);
        /* Judulnya panjang dan `text-transform: uppercase` membuatnya lebih
           panjang lagi; jangan sampai ada satu kata yang melebihi layar. */
        overflow-wrap: anywhere;
    }

    /* ---------- halaman peraturan ---------- */
    /* 45px per sisi (wadah 20 + kartu 25) membuang 28% lebar di layar 320px. */
    .rules-container { margin: 32px auto; padding: 0 14px; padding-bottom: 56px; }
    .rule-card { padding: 16px 18px; }
    /* Indentasi bertingkat menumpuk tiap lapis (25px + 20px). Halaman OOC
       punya tiga tingkat, jadi lapis terdalamnya bisa kehabisan ruang. */
    .rule-card ul li { padding-left: 18px; }
    .rule-card .sub-list { margin-left: 10px; }
    .rule-card h2 { font-size: 1.05rem; min-height: 44px; display: flex; align-items: center; }

    /* ---------- buku saku: tab & tabel ---------- */
    .tab-content { padding: 18px; }
    .tab-btn { padding: 10px 16px; min-height: 44px; }
    .med-table th,
    .med-table td { padding: 8px; }
    .med-table { font-size: 0.82rem; }

    /* ---------- panel sunting (admin) ---------- */
    .pe-open { min-height: 44px; }
    .pe-entry { min-height: 44px; }
    .pe-close { min-width: 44px; min-height: 44px; }
    .pe-side .pe-save,
    .pe-side .pe-cancel { min-height: 44px; }

    /* ---------- jaring pengaman gambar ---------- */
    /* Tidak ada satu pun gambar yang boleh lebih lebar dari wadahnya. Aturan
       per gambar tetap ada dan lebih spesifik; ini hanya lantai. */
    img { max-width: 100%; }
}

/* ---------- halaman "coming soon" (buku_saku_emt) ---------- */
/*
 * Judulnya `font-size: 4rem` + `letter-spacing: 8px` di blok <style> halaman
 * itu, jadi satu barisnya 634px — dan wadahnya `flex-direction: column;
 * align-items: center`, sehingga judul TIDAK direntangkan dan TIDAK dipaksa
 * menyusut: ia mengambil lebar max-content-nya dan meluber keluar layar.
 * Terukur: pada viewport 521px (satu piksel di atas ambang 520px yang lama)
 * judulnya 634px, dan `body { overflow-x: hidden }` memotong 145px-nya tanpa
 * cara apa pun untuk melihatnya.
 *
 * Karena itu aturannya tidak dipatok pada satu ambang lebar: ukurannya
 * mengikuti viewport sepanjang waktu, dan `max-width: 100%` jadi jaring
 * pengaman terakhir — kalau fontnya berubah dan perhitungannya meleset,
 * judulnya membungkus dua baris, bukan terpotong. Ambang 520px yang lama juga
 * salah tempat: pada 521px masalahnya justru paling parah.
 *
 * Kekhususan `body …` dipakai untuk menang atas blok <style> halaman, yang
 * datang SESUDAH berkas ini — bukan `!important`.
 */
body .coming-soon-title {
    font-size: clamp(1.8rem, 9vw, 4rem);
    letter-spacing: clamp(2px, 1.1vw, 8px);
    max-width: 100%;
}

@media (max-width: 520px) {
    .rules-container { margin: 24px auto; padding: 0 12px; padding-bottom: 40px; }
    .rule-card { padding: 14px 14px; }
    .tab-content { padding: 14px; }
    .med-table th,
    .med-table td { padding: 6px; }
    .hero-container { margin: 32px auto; padding: 0 14px; gap: 20px; }
    .hero-text h1 { font-size: clamp(1.7rem, 10vw, 2.4rem); }
    .hero-image img { max-width: 240px; }

    /* Halaman "coming soon" — lihat blok `coming-soon-title` di atas. */
    body .coming-soon-sub { font-size: 1rem; letter-spacing: 1px; }
    body .coming-soon-container { padding: 0 16px; }

    /* Dialog foto di pohon struktur: `min-width: 300px` tetap di blok <style>
       halaman itu tidak muat di layar 320px. */
    body .modal-content { min-width: 0; padding: 24px 18px; }
}