/* 1. Pengaturan Dasar & Full Screen */
body {
    /* Pastikan penulisan path benar, gunakan garis miring (/) agar kompatibel di browser */
    background-image: url('../asset/perkamen.jpg');
    
    /* Agar gambar menutupi seluruh layar dan tetap diam saat silsilah digeser */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    
    /* Warna cadangan jika gambar gagal dimuat (senada dengan kertas) */
    background-color: #022c22; 
    
    /* Font klasik agar serasi dengan perkamen */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sedikit tips: tambahkan overlay halus agar silsilah lebih mudah dibaca */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /*background: rgba(0, 0, 0, 0.05); /* Gelap tipis agar teks lebih kontras */
    pointer-events: none;
    z-index: -1;
}
	

        #panzoom-parent { 
        width: 99.5dvw; height: 94dvh; 
 
        overflow: hidden; position: fixed; 
        top: 0; left: 0; border: none; cursor: grab; 
        z-index: 0; 
		border: 3px solid #d3a66f;
		margin-top: 32px;
		margin-left: 2px;
        border-radius: 10px;
    }
    #panzoom-element {justify-content: center; visibility: hidden; padding: 60%; }

    /* 2. Sidebar yang Bisa Mengecil (Collapse) */
    #sidebarMenu {
    position: fixed;
    top: 0; 
    left: 0;
    height: 100dvh;
    width: 230px;
    background: #95440c;
    backdrop-filter: blur(0px);
    border-right: 0px solid rgba(180, 83, 9, 0.3);
    transition: all 0.5s cubic-bezier(0.175, 1, 0.175, 1);
    z-index: 100;
    box-shadow: 5px 0px 16px rgba(0, 0, 0, 1);
    transform: translateX(-330px);
    padding: 5px;
    
    /* TAMBAHKAN DUA BARIS INI AGAR BISA DI-SCROLL */
    overflow-y: auto; 
    scrollbar-width: none; /* Untuk Firefox */
}
#sidebarMenu.show {
    transform: translateX(0);
}
    /* Saat sidebar tertutup, geser 300px ke kiri */
    #sidebarMenu.collapsed {
        transform: translateX(-300px);
    }

    /* Tombol Pemicu yang Menempel di Samping Sidebar */
   /* Tombol pemicu (Hamburger) di Tengah Kiri */
.toggle-sidebar {
    position: fixed;
    top: 50%; /* Letakkan di 50% dari atas layar */
    left: -20px; /* Jarak dari tepi kiri */
    transform: translateY(-50%); /* Geser ke atas 50% dari tinggi tombol agar pas di tengah */
    width: 45px; 
    height: 45px;
    background: #b45309;
    color: white;
    border: 3px solid #fffbeb;
    border-radius: 50%;
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 20px;
    z-index: 1050; 
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Sembunyikan tombol saat sidebar muncul */
.toggle-sidebar.hidden {
    opacity: 0;
    pointer-events: none;
    /* Tetap jaga posisi tengah saat mengecil/menghilang */
    transform: translateY(-50%) scale(0.5); 
}
.toggle-sidebar:hover {
    background: #fbbf24;
    transform: translateY(-50%) scale(1.3);
	left: 5px; /* Jarak dari tepi kiri */
}

/* Header di dalam sidebar */
.sidebar-header {
    background: linear-gradient(135deg, #b45309, #78350f);
    color: white;
    padding: 7px;
    border-radius: 7px;
    margin-bottom: 5px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(120, 53, 15, 0.2);
}

    /* 3. Navigasi Zoom (Kanan Bawah agar Tidak Tabrakan) */
    .zoom-controls { 
        position: fixed; 
        bottom: 20px; 
        right: 20px; 
        z-index: 1050; 
    }
    .btn-group-vertical { box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; }
    .btn-gold { background: #b45309; color: white; border: 1px solid #fbbf24; }
    .btn-gold:hover { background: #fbbf24; color: #78350f; }

    /* 4. Tree Styling (Aksen Emas) */
    .tree ul { padding-top: 20px; position: relative; display: flex; justify-content: center; }
    .tree li { text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; }
    .tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #FFF8A6; width: 50%; height: 20px; }
    .tree li::after { right: auto; left: 50%; border-left: 2px solid #FFF8A6; }
    .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 #FFF8A6; border-radius: 0 15px 0 0; }
    .tree li:first-child::after { border-radius: 15px 0 0 0; }
    .tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #FFF8A6; width: 0; height: 20px; }
    /* 5. Node Card Styling (Aksen Arab) */
    .node-card {
    background: #fffbeb;
    border: 1px solid #d4af37; /* Garis emas tipis */
    padding: 3px 8px;
    display: inline-block;
    min-width: 140px;
    border-radius: 5px; /* Sudut lebih tegas/minimalis */
   
    position: relative;
    transition: all 0.3s ease;
}
   
    /* Gaya Khusus untuk Parent Utama (Mewah) */
.node-root {
    background: #fffbeb !important;
    border: 5px solid #fbbf24 !important; /* Bingkai Emas Tebal */
    box-shadow: 0 0 20px 9px #FFCC00 !important; /* Efek Cahaya Emas */
    transform: scale(1.15); /* Ukuran lebih besar 15% */
    z-index: 10;
}

/* Ornamen khusus di atas Parent Utama */
.node-root::before {
    content: '👑' !important; /* Mahkota sebagai pembeda */
    font-size: 24px !important;
    top: -25px !important;
}

/* Efek saat dipilih tetap ada */
.node-root.selected {
    box-shadow: 0 0 40px #fbbf24 !important;
    border: 1px solid #ffffff !important;
}

	
    .selected { box-shadow: 0 0 20px #fbbf24 !important; border: 2px solid #fbbf24 !important; transform: scale(1.05); }
    .name-main {
    font-size: 0.7rem;
    font-weight: 700;
    color: #1e293b;
    padding: 0 2px;
    border-left: 0px solid #b45309;
    border-right: 0px solid #b45309;
}
/* Warna Berbeda Per Generasi (Nuansa Hijau & Emas) */
.gen-1 { background: #fef3c7; border-color: #b45309; } /* Generasi 1 - Emas Tua */
.gen-2 { background: #ecfdf5; border-color: #059669; } /* Generasi 2 - Hijau Emerald */
.gen-3 { background: #f0fdf4; border-color: #16a34a; } /* Generasi 3 - Hijau Segar */
.gen-4 { background: #fff7ed; border-color: #ea580c; } /* Generasi 4 - Oranye Sand */
.gen-5 { background: #fdf2f8; border-color: #db2777; } /* Generasi 5 - Rose Wine */

/* Gender Marker Minimalis (Garis Bawah) */
.node-L { border-bottom: 4px solid #006302 !important; }
.node-P { border-bottom: 4px solid #b45309 !important; }

/* Parent Utama Tetap Mewah namun Simpel */
.node-root {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    border: 2px solid #d4af37 !important; }
    .name-spouse { color: #be185d; border-top: 1px double #b45309; margin-top: 1px; padding-top: 2px; font-size: 0.6em; font-style: italic; }
	.floating-title {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90; /* Di bawah menu tapi di atas bagan */
    background: rgba(180, 83, 9, 0.65); /* Emas transparan */
    color: white;
    padding: 7px 30px;
    border-radius: 50px;
    border: 2px solid #fbbf24;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    font-family: 'Georgia', serif;
    letter-spacing: 2px;
    backdrop-filter: blur(5px);
    pointer-events: none; /* Agar tidak menghalangi klik bagan di bawahnya */
}

/* Pembeda Gender yang Elegan & Minimalis */
/* Pembeda Gender: Hijau untuk Laki-laki, Merah untuk Perempuan */
/* Kita gunakan border kiri dan kanan agar sangat kontras */

.node-card[data-gender="L"] { 
    border-left: 1px solid #065f46 !important; 
    border-right: 1px solid #065f46 !important;
    
} 

.node-card[data-gender="P"] { 
    border-left: 1px solid #be185d !important; 
    border-right: 1px solid #be185d !important;
    
}

/* Warna Teks Nama agar kontras */
.node-card[data-gender="L"] .name-main { 
    color: #064e3b !important; 
    border-color: #064e3b !important; 
}

.node-card[data-gender="P"] .name-main { 
    color: #831843 !important; 
    border-color: #831843 !important; 
}

/* Warna Generasi (Dibuat sebagai background-color standar) */
.gen-1 { background-color: #fef3c7 !important; }
.gen-2 { background-color: #ecfdf5 !important; }
.gen-3 { background-color: #f0fdf4 !important; }
.gen-4 { background-color: #fff7ed !important; }
.gen-5 { background-color: #fdf2f8 !important; }
.modal-dialog { top: 60px; 
		background: #Transparent;}
	#sidebarMenu {
    display: flex;
    flex-direction: column;
}

.mt-auto-custom {
    margin-top: auto;
    padding-bottom: 20px;
}
/* Media Query untuk Perangkat Mobile */
@media screen and (max-width: 768px) {
    /* 1. Sesuaikan Ukuran Sidebar agar tidak menutup seluruh layar */
    #sidebarMenu {
        width: 230px;
        transform: translateX(-290px);
		z-index: 100;
    }
    
    /* 2. Kecilkan Ukuran Node Card agar muat lebih banyak di layar HP */
    .node-card {
        min-width: 100px !important;
        padding: 5px !important;
    }
    
    .name-main {
        font-size: 0.6rem !important;
    }
    
    .name-spouse {
        font-size: 0.5rem !important;
    }

    /* 3. Atur Jarak antar cabang agar tidak terlalu lebar */
    .tree li {
        padding: 18px 5px 0 5px;
    }

    /* 4. Sesuaikan Judul Melayang */
    .floating-title {
        width: 90%;
        padding: 5px 15px;
    }
    
    .floating-title h4 {
        font-size: 0.9rem;
    }
	.modal {transform: scaleX(0.9); overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}
    .modal::-webkit-scrollbar {display: none;}
	.scroll-paper {background-image: url('../asset/perkament_mobile.png') !important;}
}

/* Container Modal Modern Glass */
.modal-content {
    background: rgba(229, 220, 162, 0.2) !important; /* Transparansi rendah */
    backdrop-filter: blur(15px) saturate(180%); /* Efek Kaca */
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    color: #fff !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Header Modal */
.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: .5rem;
}

/* Judul Nama */
.view-nama {
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    color: #fcd34d; /* Warna emas */
}

/* Body Modal */
.modal-body {
    padding: 1.5rem;
}

/* Baris Detail (List) */
.info-row {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 15px; /* Padding sedikit diperbesar agar lega */
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    display: flex !important;
    justify-content: space-between !important;
    
    /* INI KUNCINYA: Memaksa semua konten nempel ke atas */
    align-items: flex-start !important; 
}

.info-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.info-value {
    font-weight: 500;
    color: #fff;
}

/* Badge Status */
.view-status-badge {
    padding: 5px 15px;
    font-size: 0.7rem;
    letter-spacing: 1px;
    backdrop-filter: blur(5px);
}

/* Tombol Close Modern */
.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.fw-set {	
		border: 1px solid #fff;
		font-size: 16px;
		text-align: right;
		padding-right: 5px;
		text-transform: uppercase;
		vertical-align: top;
		}
.fw-ket {
		border: 1px solid #fff;
		font-size: 16px;
		vertical-align: top;
		padding-left: 5px;
		}
.btn-red {background: #A10000; border: 1px solid #9E8A02;}
.btn-red:hover {background: #ff0000}
.btn-green {background: #0D7901; border: 1px solid #9E8A02;}
.btn-green:hover {background: #13B303}
.modal-backdrop.show {
    opacity: 0.7; /* Angka 0.1 (sangat terang) sampai 1.0 (hitam pekat) */
    background-color: #000; /* Warna dasarnya hitam */
}



/* 1. Atur jarak antar saudara (Sangat Rapat) */
.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 15px 0 0 0;
    /* Margin negatif ditingkatkan agar kotak saling selip lebih dalam */
    margin: 0 -20px; 
    transition: all 0.3s;
}

/* 2. KELOMPOK KELUARGA (UL) */
.tree ul ul {
    /* Jarak antar kelompok keluarga (antar sepupu) tetap dijaga agar tidak tabrakan */
    margin-left: 25px; 
    margin-right: 25px;
    display: inline-flex; 
    justify-content: center;
}

/* 3. Penyesuaian batas agar selipan tetap rapat di ujung */
.tree li:first-child {
    margin-left: 5px; /* Perkecil jarak tarik dari keluarga sebelah */
}
.tree li:last-child {
    margin-right: 5px; /* Perkecil jarak tarik dari keluarga sebelah */
}

/* 4. Logika Zig-Zag (Batu Bata) - Dibuat lebih kontras agar selipan pas */
.tree li:nth-child(odd) > .node-card {
    margin-top: 55px; /* Naikkan sedikit agar ada ruang untuk kotak genap di atasnya */
    z-index: 10;
}
.tree li:nth-child(even) > .node-card {
    margin-top: 30;
    z-index: 12; /* Pastikan kotak atas selalu di depan kotak bawah */
}

/* 5. Garis Penghubung Vertikal (Sesuaikan dengan margin-top) */
.tree li:nth-child(odd)::before, 
.tree li:nth-child(odd)::after {
    height: 90px; 
}

/* 6. Tambahan: Pastikan lebar kotak tetap konsisten */
.node-card {
    width: 125px; /* Ukuran ideal untuk selipan rapat */
    background: #fff;
    border: 1px solid #ccc;
    position: relative;
}

/* Mode Filter Aktif */
.filter-active .hv-wrapper ul {
    display: flex !important;
    justify-content: center !important;
    width: fit-content !important;
    margin: 0 auto !important;
}

/* Sembunyikan yang tidak perlu */
li.filtered-out {
    display: none !important;
}

/* Tetap luruskan garis */
.filter-active .hv-wrapper li::before, 
.filter-active .hv-wrapper li::after {
    width: 50% !important;
}

@keyframes highlight-fade {
    0% { background-color: #ffeb3b; transform: scale(1.1); box-shadow: 0 0 20px #ffeb3b; }
    100% { transform: scale(1); box-shadow: none; }
}

.search-highlight {
    animation: highlight-fade 2s ease-out;
    border: 3px solid #fbc02d !important;
    z-index: 999;
}

#panzoom-element {
    z-index: 10;
    position: relative;
    transform-origin: 0 0; /* Penting agar zoom tidak melompat */
    will-change: transform;
}

/* Pastikan input pencarian selalu di depan (paling atas) */
.search-container {
    position: relative;
    z-index: 9999 !important;
}
.search-highlight {
    background-color: #ffeb3b !important;
    color: #000 !important;
    border: 4px solid #fbc02d !important;
    transition: all 0.5s ease;
	box-shadow: 0 0 20px 9px #09ff00 !important; /* Efek Cahaya Emas */
    transform: scale(1.2) !important; /* Membuat kotak yang dicari sedikit lebih besar */
    z-index: 9999 !important;
}
/* --- GAYA GULUNGAN SLIM PETA KUNU BY AIRA --- */

/* Font elegan & kuno (Hanya satu saja agar ringan) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');

.floating-title.map-scroll-slim {
    position: fixed;
    top: 8px; /* Lebih mepet ke atas layar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    width: auto;
    min-width: 220px; /* Lebar minimal agar nama tidak patah */
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25)); /* Bayangan lembut */
}

/* Bagian Tengah (Badan Kertas Gepeng) */
.scroll-body-slim {
    background-color: #f4e4bc; /* Warna kertas tua */
    background-image: linear-gradient(to bottom, #f4e4bc, #e2cf9f);
    padding: 6px 15px; /* Padding vertikal sangat kecil */
    border-top: 1px solid #a67c52;
    border-bottom: 1px solid #a67c52;
    text-align: center;
    position: relative;
    box-shadow: inset 0 0 10px rgba(166, 124, 82, 0.4); /* Efek terbakar halus */
}

/* Bagian Ujung Gulungan (Kiri & Kanan - Lebih Slim) */
.scroll-edge-slim {
    width: 10px; /* Sangat ramping */
    height: calc(100% + 4px); /* Hanya lebih tinggi sedikit */
    background: #a67c52;
    background-image: linear-gradient(to right, #8b6b4f, #c0a080, #8b6b4f);
    border-radius: 3px;
    box-shadow: 1px 0 3px rgba(0,0,0,0.15);
}

.scroll-edge-slim.left {
    margin-right: -3px; /* Menempel ke badan */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.scroll-edge-slim.right {
    margin-left: -3px; /* Menempel ke badan */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Teks Utama (Gaya Romawi - Satu Baris) */
.map-title-slim {
    font-family: 'JawaPalsu', serif; /* Font elegan & kuno */
    font-size: 0.9rem; /* Ukuran font diperkecil agar pas */
    color: #3e2723; /* Cokelat sangat tua */
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    white-space: nowrap; /* Paksa teks jadi satu baris */
}
.person-node {
    background: #fdf5e6 !important; /* Warna tulang/creme */

    color: #3e2723 !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2); /* Shadow lebih tipis dan halus */
}

/* Custom Scrollbar Kuno by Aira */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f4e4bc; /* Warna kertas */
}
::-webkit-scrollbar-thumb {
    background: #a67c52; /* Warna cokelat gulungan */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #8b6b4f;
}

/* Kotak pembungkus hasil (update yang sudah ada) */
#search-results-count {
	width: 100dvh;
    /*background: #ffffff;*/
    /*border: 1px solid #d2b48c;*/
    border-radius: 0px;
    padding: 0px;
    max-height: 150px; /* Biar gak kepanjangan kalau hasil banyak */
    overflow-y: auto;  /* Bisa di-scroll */
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.2);*/
    margin-top: 2px;
	color: #fff;
}

/* Item nama di dalam list */
.search-result-item {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
    color: #fff;
    transition: all 0.2s;
    text-align: left;
}

.search-result-item:hover {
    background-color: #f0f7f4;
    color: #065f46;
    font-weight: bold;
    padding-left: 15px; /* Efek geser dikit saat hover */
}

/* Scrollbar cantik buat list */
#search-results-count::-webkit-scrollbar { width: 5px; }
#search-results-count::-webkit-scrollbar-thumb { background: #d2b48c; border-radius: 10px; }

.badge-cross {
    cursor: pointer;
    color: #2563eb !important; /* Warna biru */
    font-weight: bold;
    font-size: 0.85em;
    margin-left: 5px;
    padding: 2px 5px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 4px;
    display: inline-block;
}
.badge-cross:hover {
    background: #2563eb;
    color: white !important;
}

/* Badge yang hanya tulisan saja */
.badge-cross-static {
    color: #64748b;
    font-size: 0.75em;
    margin-left: 5px;
    font-weight: normal;
}

/* Logika untuk Anak Tunggal agar garis lurus dan rapi */
.tree ul li:only-child::before, 
.tree ul li:only-child::after {
    display: none !important;
}

.tree ul li:only-child {
    padding-top: 0;
}

/* Membuat garis vertikal lurus penyambung dari atas */
.tree ul li:only-child > .node-card::before {
    content: '';
    position: absolute;
    top: -63px; /* Jarak ke atas */
    left: 50%;
    border-left: 2px solid #FFF8A6; /* Warna emas garis kamu */
    height: 63px;
}


/* --- SATU KESATUAN CSS GULUNGAN BERGERAK --- */

/* 1. Modal Container (Transparan total) */
#welcomeModal .modal-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Batang Kayu ARTEFAK (Atas & Bawah) */
.scroll-wood-top, .scroll-wood-bottom {
    /* Menggunakan Gambar image_0.png */
    background-image: url('../asset/kayu.png') !important; 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    /* Sesuaikan tinggi agar proporsional dengan gambar ukiran */
    height: 45px; 
    width: 133%; /* Lebih lebar sedikit dari kertas agar pegangannya menonjol */
    left: -16%;  /* Geser ke kiri agar simetris */
    position: relative;
    z-index: 10;
    
    /* Tambahkan bayangan realistik mengikuti bentuk ukiran */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
    border-radius: 0; /* Hapus radius lama karena sudah ada gambar */
    background-color: transparent !important; 
}

/* Batang Bawah: Harus ikut meluncur bersama kertas */
.scroll-wood-bottom {
    position: absolute;
    bottom: -11px; /* Menempel di bawah kertas */
    box-shadow: none;
    filter: drop-shadow(0 -4px 6px rgba(0,0,0,0.4));
}

/* Hapus Knobs Lama (Karena image_0 sudah punya ukiran ujung) */
.scroll-wood-top::before, .scroll-wood-top::after, 
.scroll-wood-bottom::before, .scroll-wood-bottom::after {
    display: none !important;
}

.scroll-paper {
background-image: url('../asset/perkament1.png');}


/* 3. Kertas Perkamen & Animasi Meluncur */
.scroll-paper {
    background-size: cover;
    padding: 8px 40px 31px 40px !important; /* Ruang bawah untuk batang kayu */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
    position: relative;
    margin-top: -33px;
    
    /* Setting Awal Animasi */
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
}
.scroll-paper.fade {
    transform: none; /* Override unroll animation */
    opacity: 0;
}

/* Jalankan Animasi saat Modal Tampil */
.modal.show .scroll-paper {
    animation: unrollScroll 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes unrollScroll {
    0% { transform: scaleY(0); opacity: 0.5; }
    100% { transform: scaleY(1); opacity: 1; }
}
.modal.show .scroll-paper.fade {
    animation: fadeInContent 1.5s ease-out forwards; /* Use fade animation */
    animation-delay: 0.5s; /* Delay to match content fade */
}

/* 4. Isi Teks (Muncul belakangan) */
.scroll-content-wrapper {
    opacity: 0;
}

.modal.show .scroll-content-wrapper {
    animation: fadeInContent 1.2s ease-out 1.2s forwards;
}

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

/* 5. Dekorasi Teks & Tombol */
.scroll-wood-top, .scroll-wood-bottom {
    /* Default style for wood */
    background-image: url('../asset/kayu.png') !important; 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 45px; 
    width: 133%; 
    left: -16%;  
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
    border-radius: 0; 
    background-color: transparent !important; 
}

.scroll-wood-bottom {
    position: absolute;
    bottom: -11px; 
    box-shadow: none;
    filter: drop-shadow(0 -4px 6px rgba(0,0,0,0.4));
}

/* Style for simple wood (if chosen) */
.scroll-wood-top.simple, .scroll-wood-bottom.simple {
    background-image: none !important;
    background-color: #8B4513 !important; /* Brown color */
    border-radius: 5px;
    height: 20px;
    width: 100%; left: 0;
}
.scroll-title { color: #8b4513; font-family: 'Georgia', serif; }
.scroll-divider { height: 2px; background: linear-gradient(to right, transparent, #B8860B, transparent); margin: 15px auto; width: 70%; }
.scroll-quote { color: #5d4037; font-style: italic; font-size: 0.95em; line-height: 1.6; }
.scroll-instruction { background: rgba(184, 134, 11, 0.1); border-radius: 8px; padding: 5px; color: #3e2723; font-size: 1em; }
.btn-scroll-close { font-family: serif !important; text-decoration: none; background: #transparent; color: #8b4513; border: 2px; padding: 10px 30px; border-radius: 5px; font-weight: bold; text-transform: ; }

@font-face {
    font-family: 'JawaPalsu';
    /* Sesuaikan dengan nama file yang sudah diubah jadi kecil semua */
    src: url('../asset/fonts/jawa.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}
/* Judul Utama */
#welcomeModal .scroll-title {
    font-family: 'JawaPalsu', serif !important;
    font-size: clamp(1.1rem, 5vw, 1.7rem) !important;
    color: #8b4513 !important;
    margin-bottom: 5px;
}

/* Kutipan "Selamat Datang..." */
#welcomeModal .scroll-quote {
    font-family: 'JawaPalsu', serif !important;
    color: #3e2723 !important;
    font-size: clamp(1rem, 4vw, 0.3rem) !important;
    line-height: 1.6 !important;
    text-align: center;
    margin-top: 15px;
}

/* Kalimat "Menyambung yang putus..." */
#welcomeModal .highlight-java {
    font-family: 'JawaPalsu', serif !important;
    font-weight: bold !important;
    color: #8b4513 !important;
    display: block;
    margin-top: 10px;
    /* Memberikan sedikit ukuran lebih besar untuk penekanan */
    font-size: 1em; 
}