/* ===================================================================== */
/* 1. VARIABEL & PENGATURAN DASAR
/* ===================================================================== */
:root {
    --primary-color: #8C1427; /* Merah Marun Kebesaran Bengkulu */
    --secondary-color: #F8D7DA; /* Merah muda lembut untuk hover/aksen */
    --background-color: #F8F9FA;
    --text-color: #212529;
    --border-color: #DEE2E6;
    --font-latin: 'Poppins', sans-serif;
    --font-aksara-rejang: 'Noto Sans Rejang', serif; 
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-latin); background-color: var(--background-color); color: var(--text-color); line-height: 1.6; margin: 0; padding: 0; overflow-x: hidden; }

/* ===================================================================== */
/* 2. STRUKTUR UTAMA
/* ===================================================================== */
/* .container { max-width: 1200px; margin: 0 auto; padding: 15px; }  */
/* header { text-align: center; } 
header h1 { color: var(--primary-color); margin-bottom: 5px; font-weight: 600; font-size: 1.8em; } 
header p { color: #6C757D; font-size: 1em; max-width: 600px; margin: 0 auto; }
*/
.main-layout-grid { display: grid; grid-template-columns: 1fr; gap: 20px; min-width: 0; /* MANTRA AJAIB 1 */ max-width: 100%; }
.main-content-column, .sidebar-column { min-width: 0; display: grid; grid-template-columns: 1fr; gap: 20px; align-content: start; }
.card { max-width: 100%; /* Cegah Card menembus layar */ overflow-wrap: break-word; /* Paksa teks panjang turun ke bawah */
background-color: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 25px rgba(0,0,0,0.08); border: 1px solid var(--border-color); margin-bottom: 0; }
.card h2 { margin-top: 0; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; font-size: 1.4em; }
.card h3 { color: var(--primary-color); font-size: 1.2em; }

/* ===================================================================== */
/* 3. ALAT TRANSLITERASI & EFEK NASKAH KUNO
/* ===================================================================== */
.io-container { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 15px; } 
textarea, .output-box { width: 100%; height: 250px; padding: 15px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 16px; resize: vertical; transition: all 0.2s ease; }
textarea { font-family: var(--font-latin); }
textarea:focus, .output-box:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--secondary-color); }
textarea::placeholder { color: #ADB5BD; font-size: 15px; font-style: italic; }

/* Menyesuaikan Tinggi Baris Karena Noto Rejang butuh ruang */
/* ===================================================================== */
/* EFEK "NASKAH KUNO" PADA OUTPUT TRANSLITERASI (ADOPSI)
/* ===================================================================== */

/* Container Utama Output */
.output-box { background-color: #F8F9FA; overflow-y: auto; font-size: 26px; line-height: 2.2;  width: 100%; height: 250px; resize: vertical; } 
.output-box.font-noto {
    line-height: 1.5; /* Memberi ruang untuk sandhangan atas/bawah */
    background-color: #fdf6e3; /* Warna kertas kuno/parchment */
    background-image: radial-gradient(#e5deca 1px, transparent 1px); /* Tekstur halus */
    background-size: 20px 20px;
    border: 1px solid #e0d5b1;
    border-left: 6px solid var(--primary-color); /* Aksen Rejang */
    border-radius: 8px;
    font-size: 2.2rem;
    color: #2c3e50;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.05); /* Efek kedalaman ukiran */
    transition: all 0.3s ease;
    overflow-y: auto;
}
.output-box.font-noto:focus, .output-box.font-noto:hover {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(140, 20, 39, 0.15); /* Cahaya Marun */
}
@keyframes fadeInAksara {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/*.output-box .word {
    display: inline-block;
    animation: fadeInAksara 0.3s ease-out forwards; 
    cursor: pointer; 
    position: relative; 
    transition: background-color 0.2s, transform 0.2s; 
    border-radius: 4px; 
    padding: 0 4px; 
    margin: 0 -2px;
}

.output-box .word:hover { 
    background-color: rgba(140, 20, 39, 0.1); 
    transform: scale(1.02);
}
*/

/* PEMBUNGKUS KATA (Hanya bertugas menjaga agar kata tidak turun baris di tengah-tengah) */
/* =======================================================
   1. STYLING PEMBUNGKUS KATA (Menyala saat di-hover)
======================================================= */
.output-box .rejang-word {
    display: inline-block;
    cursor: pointer;
    padding: 2px 4px; /* Ruang agar blok hover terlihat rapi */
    margin: 0 2px 4px 0; /* Jarak antar kata */
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
}

/* Hover menyorot SATU KATA PENUH (Sesuai Konsep Batak) */
.output-box .rejang-word:hover {
    background-color: rgba(220, 53, 69, 0.15); /* Merah muda lembut */
    transform: scale(1.02);
}
/* 2. HILANGKAN Hover pada Per-Karakter agar tidak membingungkan */
.rejang-char {
    display: inline-block;
    padding: 0 1px; /* Jarak super tipis antar huruf */
    /* Hapus cursor: help dan background hover dari sini */
}

/* 3. PEWARNAAN KARAKTER (Tetap dipertahankan agar cantik) */
.rejang-suku-kata { color: #2c3e50; }
.rejang-konsonan-mati { color: #e74c3c; } 
.rejang-tanda-panyigeg { color: #2980b9; } 
.rejang-vokal-awal-ka { color: #8e44ad; } 
.rejang-konsonan-ganda-ngimbang { color: #27ae60; }


.font-noto { font-family: var(--font-aksara-rejang); } 
/* ===================================================================== */
/* STYLE ARAH KONVERSI (FRESH THEMATIC OUTLINE)
/* ===================================================================== */

.controls { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 10px; 
    margin-top: 15px; 
    margin-bottom: 25px;
}

.controls strong {
    font-size: 0.95em;
    color: var(--text-color);
    font-weight: 600;
}

.controls .radio-group-wrapper { 
    display: flex; 
    gap: 15px; /* Memberi jarak tegas antar pilihan */
    width: 100%;
}

/* Sembunyikan bulatan radio asli */
.controls .radio-group-wrapper input[type="radio"] {
    display: none;
}

/* Kotak Pilihan Standalone */
.controls .radio-group-wrapper label { 
    flex: 1; /* Lebar seimbang */
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 12px 20px; 
    cursor: pointer; 
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    background-color: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.controls .radio-group-wrapper .radio-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border-radius: 50px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
	border: 1px solid transparent;
	background-color: #F8F9FA5E;
	color: #8C1427;
	/* box-shadow: 0 2px 4px rgba(221, 34, 34, 0.14); */
	border-color: #F8D7DA;
}

/* Hover pada tombol yang tidak aktif */
.controls .radio-group-wrapper .radio-tab:hover:not(:has(input:checked)) {
    background-color: #e2e8f0;
    color: var(--primary-color);
}

/* STYLE SAAT AKTIF (Merah Marun Solid - Persis Gambar Batak) */
.controls .radio-group-wrapper .radio-tab:has(input:checked) {
    background-color: var(--primary-color); /* #8C1427 */
    color: #ffffff !important; /* Teks putih bersih */
    box-shadow: 0 4px 12px rgba(140, 20, 39, 0.4); /* Shadow merah menyala */
    transform: translateY(-1px);
}

.controls .radio-group-wrapper label i, 
.controls .radio-group-wrapper .label-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

/* STATE AKTIF: Transformasi Ukuran & Warna */
.controls .radio-group-wrapper label:has(input:checked) {
    background-color: var(--primary-color); /* Marun */
    color: #ffffff !important; /* Teks putih tegas */
    transform: scale(1.05); /* Membesar sedikit */
    box-shadow: 0 5px 15px rgba(140, 20, 39, 0.35); /* Glow Marun */
}

/* Efek Hover untuk kotak yang belum dipilih */
.controls .radio-group-wrapper label:hover:not(:has(input:checked)) {
    border-color: #adb5bd;
    background-color: #f8f9fa;
  background-color: var(--secondary-color); /* Warna pink lembut dari tema */
}

/* Menambahkan Indikator Panah di Tengah (Optional) */
.controls .radio-group-wrapper label:first-child::after {
	/* content: "\f061"; */
	/* font-family: "Font Awesome 6 Free"; */
	font-weight: 900;
	margin-left: 10px;
	opacity: 0.3;
	color: #6c757d;
}

/* Hilangkan panah jika dipilih */
.controls .radio-group-wrapper label:has(input:checked)::after {
    display: none;
}

/* Animasi khusus ikon Rejang */
.label-icon {
    font-family: var(--font-rejang-noto);
    font-weight: normal;
}
/* STATE AKTIF (Sangat Jelas & Menonjol) */
.controls .radio-group-wrapper label:has(input[type="radio"]:checked) {
    border-color: var(--primary-color);
    background-color: rgba(140, 20, 39, 0.05); /* Marun sangat transparan */
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(140, 20, 39, 0.15);
}

/* Beri indikator visual berupa centang (opsional, sangat bagus untuk UX) */
.controls .radio-group-wrapper label:has(input[type="radio"]:checked)::before {
    content: "✓";
    margin-right: 8px;
    font-weight: bold;
    font-size: 1.1em;
}


/* Mengubah border luar saat di-hover/aktif */
.controls .radio-group-wrapper:hover {
    border-color: var(--primary-color); /* Garis tepi menyala saat disentuh */
}

.controls label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* FRASE POPULER (PILL BUTTONS) */
.popular-phrases-wrapper {
    margin-top: 15px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

.phrases-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.phrases-header i {
    color: #f39c12;
}

.phrases-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.phrase-pill {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-family: var(--font-latin);
    cursor: pointer;
    transition: 0.2s ease;
    white-space: nowrap;
}

.phrase-pill:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.phrase-pill:active {
    transform: translateY(0);
}

/* =======================================================
   TOOLTIP AI (Kecil, Rapi, dan Elegan)
======================================================= */
.word-tooltip { 
    position: absolute; 
    background: #ffffff; 
    color: #333; 
    padding: 10px 14px; /* Padding diperkecil */
    border-radius: 8px; /* Ujung sedikit lebih tegas */
    z-index: 9999999 !important; 
    pointer-events: none !important; 
    /* Shadow lembut modern */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.05); 
    border: 1px solid #e2e8f0; /* Border abu-abu sangat muda */
    width: max-content; /* Lebar menyesuaikan isi kotak */
    max-width: 90%; /* Agar tidak lebih lebar dari layar HP */
    opacity: 0; 
    transform: translateY(5px) scale(0.98); 
    transition: opacity 0.15s ease-out, transform 0.15s ease-out; 
}
.word-tooltip.tooltip-visible { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
}


.tooltip-title { 
    font-weight: 600; 
    margin-bottom: 12px; 
    padding-bottom: 10px; 
    border-bottom: 1px solid #f1f3f5; 
    color: var(--primary-color);
}
.word-tooltip .tooltip-analysis { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.word-tooltip .tooltip-item { 
    display: flex; flex-direction: column; padding: 6px 10px; 
    border-radius: 8px; background: #f8f9fa; text-align: center; 
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05); 
}
.word-tooltip .tooltip-item .rejang { font-size: 1.6em; font-family: var(--font-aksara-rejang); color: var(--primary-color); line-height: 1.2; }
.word-tooltip .tooltip-item .latin { font-size: 0.85em; color: #495057; font-weight: 600;}
.word-tooltip .tooltip-item .type { font-size: 0.65em; color: #888; margin-top: 2px;}

.pemisah { font-family: var(--font-latin); color: #6C757D; font-weight: 500; margin: 0 4px; }
/* =======================================================
   MODERN SMART TOOLTIP (HOVER TOMBOL)
======================================================= */
.kd-smart-tooltip-wrap { position: relative; }
.kd-smart-tooltip-wrap::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(15px) scale(0.9);
    /* Desain Modern: Gradient Marun Bercahaya */
    background: linear-gradient(135deg, #8C1427 0%, #b31b34 100%);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    /* Animasi membal (bouncy) */
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999999 !important; /* PASTI PALING ATAS */
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(140, 20, 39, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.kd-smart-tooltip-wrap::before { 
    content: ''; 
    position: absolute; 
    bottom: 110%; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border-width: 7px; 
    border-style: solid;
    border-color: #8C1427 transparent transparent transparent;
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease-out;
    z-index: 9999999 !important;
}
.kd-smart-tooltip-wrap:hover::after {
    opacity: 1; 
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}
.kd-smart-tooltip-wrap:hover::before {
    opacity: 1; 
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* =======================================================
   MODERN TOOLTIP AI (SAAT HOVER TEKS REJANG)
======================================================= */
.word-tooltip { 
    position: absolute; 
    background: #ffffff; /* Putih bersih */
    color: var(--text-color); 
    padding: 16px 20px; 
    border-radius: 12px; 
    font-size: 14px; 
    z-index: 9999999 !important; /* PASTI PALING ATAS */
    pointer-events: none !important; 
    /* Bayangan 3D Modern */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15), 0 5px 15px rgba(0,0,0,0.05); 
    max-width: 320px; 
    opacity: 0; 
    transform: translateY(10px) scale(0.95); 
    transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    border: 2px solid var(--primary-color); /* Garis tepi Marun */
}
.word-tooltip.tooltip-visible { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
}
.tooltip-title { 
    font-weight: 600; 
    margin-bottom: 12px; 
    padding-bottom: 10px; 
    border-bottom: 1px solid #f1f3f5; 
    color: var(--primary-color);
}

/* ===================================================================== */
/* 4. BUTTONS DECK & KEYBOARD VIRTUAL
/* ===================================================================== */
.control-deck { background-color: #FFF; border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin-top: 25px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.deck-title { margin-top: 0; margin-bottom: 15px; font-size: 1em; font-weight: 500; color: #6c757d; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.features-cohesive { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.btn-cohesive { display: flex; align-items: center; justify-content: center; width: 100%; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px 16px; cursor: pointer; gap: 10px; color: #495057; font-size: 14px; font-weight: 500; transition: 0.2s; white-space: nowrap; }
.btn-cohesive:hover { border-color: #ced4da; background-color: #e9ecef; color: #212529; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.btn-cohesive svg { width: 18px; height: 18px; color: #6c757d; flex-shrink: 0; transition: 0.2s; }
.btn-cohesive:hover svg { color: var(--primary-color); }

.custom-dropdown-wrapper { position: relative; display: flex; }
#font-selector-btn { justify-content: space-between; width: 100%; }
.dropdown-menu { position: absolute; top: 105%; left: 0; width: 100%; background: #FFF; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 10; overflow: hidden; }
.dropdown-item { display: block; padding: 10px 16px; color: var(--text-color); text-decoration: none; font-size: 14px; }
.dropdown-item:hover { background-color: #f8f9fa; }
.dropdown-item.active { background-color: var(--secondary-color); color: var(--primary-color); font-weight: 500; }

.tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 0; overflow-x: auto; }
.tab-button { padding: 8px 12px; cursor: pointer; border: none; background-color: transparent; border-bottom: 3px solid transparent; font-size: 0.9em; color: #6C757D; white-space: nowrap; font-weight: 500; transition: 0.2s; }
.tab-button:hover { color: var(--primary-color); }
.tab-button.active { border-bottom: 3px solid var(--primary-color); font-weight: 600; color: var(--primary-color); }
.tab-content { display: none; } .tab-content.active { display: block; padding-top: 15px; }
.keyboard-row { display: flex; justify-content: center; gap: 5px; margin-bottom: 5px; flex-wrap: wrap; }
.key { background-color: #fff; border: 1px solid #ccc; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; gap: 2px; flex-grow: 1; padding: 5px; min-width: 28px; transition: 0.2s; }
.key:hover { background-color: var(--secondary-color); border-color: var(--primary-color); }
.key .rejang { font-family: var(--font-aksara-rejang); font-size: 22px; line-height: 1; }
.key .latin { font-size: 10px; color: #6C757D; line-height: 1; }

/* ===================================================================== */
/* 5. SIDEBAR & INFORMASI EDUKATIF
/* ===================================================================== */
textarea:focus, textarea:hover, 
.output-box.font-noto:focus, .output-box.font-noto:hover { 
    outline: none; 
    border-color: var(--primary-color) !important; /* Memastikan berubah #8c1427 */
    box-shadow: 0 0 0 4px rgba(140, 20, 39, 0.15) !important; 
}

#aksara-hari-ini .aksara { font-size: 6em; color: var(--primary-color); line-height: 1.5; text-align: center; margin: -10px 0; }
.contoh-fokus { background-color: #F8F9FA; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; }
.label-contoh { font-size: 0.8em; font-weight: 500; color: #6C757D; margin-bottom: 8px; }
.breakdown-contoh { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1.1em; }
.hasil-rejang { font-weight: 600; color: var(--primary-color); font-size: 1.2em; }

.analysis-container { margin-top: 0; padding: 15px; background-color: #F8F9FA; border-radius: 8px; min-height: 50px; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start;text-align: left;}
.analysis-item { display: inline-flex; flex-direction: column; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; background: white; text-align: center; }
.analysis-item .rejang { font-size: 1.4em; color: var(--primary-color); } .analysis-item .latin { font-size: 0.8em; color: #555; font-weight: 500; }
.analysis-item .type { font-size: 0.7em; color: #888; font-style: italic; }
.info-list { list-style: none; padding-left: 0; } 
.info-list li { padding-left: 1.5em; position: relative; margin-bottom: 10px; } 
.info-list li::before { content: '✓'; color: var(--primary-color); font-weight: bold; position: absolute; left: 0; }

/* FAQ Accordion */
.faq-container { margin-top: 15px; }
.faq-item { border-bottom: 1px solid var(--border-color); } 
.faq-question { padding: 15px 0; font-weight: 600; cursor: pointer; position: relative; color: var(--text-color); transition: 0.2s; padding-right: 20px;} 
.faq-question:hover { color: var(--primary-color); }
.faq-question::after { content: '+'; position: absolute; right: 5px; font-size: 1.2em; transition: 0.3s; color: var(--primary-color); } 
.faq-question.active::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: 0.3s; } 
.faq-answer p { padding-bottom: 15px; margin: 0; color: #495057; }

/* =========================================
   SLIDER CONTOH TULISAN (DESAIN KARTU + ANIMASI PULSE)
========================================= */
#example-content-wrapper {
    position: relative;
    min-height: 140px;
    overflow: hidden;
    margin-top: 10px;
}

.example-slide {
    display: none;
    cursor: pointer;
    animation: fadeInSlide 0.3s ease-in-out;
}

.example-slide.active {
    display: block;
}

/* Desain Kotak Detail Contoh */
.example-detail-card {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--border-color);
    transition: all 0.2s ease;
}

/* Efek Hover pada Kotak */
.example-slide:hover .example-detail-card {
    background-color: #fdfdfd;
    border-left: 4px solid var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(140, 20, 39, 0.08); /* Marun Shadow */
}

/* Struktur Baris (Label & Konten) */
.ex-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center; 
    margin-bottom: 10px;
    border-bottom: 1px dashed #e9ecef;
    padding-bottom: 10px;
    gap: 15px;
}

.ex-row:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Desain Label (Kiri) */
.ex-label {
    width: 65px !important; 
    flex-shrink: 0 !important;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--primary-color);
    position: relative;
}

.ex-label::after {
    content: ":";
    position: absolute;
    right: 0;
}

/* Desain Konten (Kanan) */
.ex-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: break-word;
    text-align: left;
}

/* Tipografi Konten */
.ex-rejang-text {
    font-size: 24px; 
    color: var(--primary-color);
    line-height: 1.2;
    display: block;
    margin-top: -3px;
}

.ex-latin-text {
    font-weight: 600;
    color: #333;
    display: block;
    font-size: 15px;
}

.ex-arti-text {
    font-size: 0.9em;
    color: #6C757D;
    font-style: italic;
    display: block;
}

/* CTA & Animasi Denyut (Pulse) */
.ex-cta-text {
    margin-top: 15px;
    text-align: center;
    font-size: 0.85em;
    color: #ffffff;
    background-color: var(--primary-color);
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 500;
    display: block;
    width: 100%;
    box-sizing: border-box;
    transition: 0.2s;
}

.pulse-animation {
    animation: pulseBtn 2s infinite;
}

/* Keyframes Animasi */
@keyframes fadeInSlide {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Animasi Pulse Menggunakan Warna Marun Rejang */
@keyframes pulseBtn {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(140, 20, 39, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(140, 20, 39, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(140, 20, 39, 0); }
}

/* Carousel Tips */
.tip-carousel-header { text-align: center; }
#tip-content-wrapper { min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: 0.2s; }
.tip-content-fade-out { opacity: 0; }
.tip-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.tip-example { background-color: var(--background-color); box-shadow: 0 0 0 1px rgba(0,0,0,0.08); padding: 15px; border-radius: 8px; text-align: center; border-left: 4px solid; }
.tip-benar { border-left-color: #28a745; } .tip-benar .tip-label { color: #28a745; font-weight:600; font-size:0.8em; display:block; margin-bottom:10px; }
.tip-salah { border-left-color: #dc3545; } .tip-salah .tip-label { color: #dc3545; font-weight:600; font-size:0.8em; display:block; margin-bottom:10px; }
.tip-text-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; min-height: 60px; }
.tip-rejang-text { font-size: 1.8em; margin: 0; word-break: break-all; color: var(--primary-color); line-height:1.2; }
.tip-latin-text { font-size: 0.85em; color: #6C757D; font-style: italic; margin: 0; }
.tip-carousel-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--border-color); padding-top: 15px; margin-top: 20px; }
.tip-nav-btn-new { background: transparent; border: 1px solid var(--border-color); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.tip-nav-btn-new:hover { background-color: var(--secondary-color); border-color: var(--primary-color); }
.tip-nav-btn-new svg { width: 24px; height: 24px; fill: var(--primary-color); }
.tip-progress-container { flex-grow: 1; height: 6px; background-color: #e9ecef; border-radius: 3px; }
#tip-progress-bar { width: 0%; height: 100%; background-color: var(--primary-color); border-radius: 3px; transition: 0.3s; }
#tip-counter { font-size: 0.9em; font-weight: 500; color: #6C757D; }

/* Kuis */
.quiz-container { display: flex; flex-direction: column; gap: 15px; }
.quiz-question-wrapper, .quiz-input-wrapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
#quiz-input { flex-grow: 1; font-size: 1.2em; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px; }
.quiz-input:focus { outline: none; border-color: var(--primary-color); }
.quiz-feedback { padding: 10px; border-radius: 6px; display: none; }
.quiz-feedback.correct { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.quiz-feedback.incorrect { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.quiz-controls { display: flex; gap: 10px; }
#footer-aksara { text-align: center; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--border-color); font-size: 0.9em; color: #6C757D; }

/* ===================================================================== */
/* 6. MODALS & TOASTS
/* ===================================================================== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 2000; padding: 15px; }
.modal-content { background-color: white; padding: 30px; border-radius: 12px; max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.modal-close-btn { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 2em; cursor: pointer; color: #888; transition: 0.2s; }
.modal-close-btn:hover { color: var(--primary-color); transform: scale(1.1); }
.glossary-section { margin-bottom: 25px; }
.glossary-grid { 
    display: grid; 
    /* Mengecilkan lebar minimum kotak dari 120px menjadi 75px */
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); 
    gap: 10px; 
}
.glossary-item { 
    background-color: #f8f9fa; border: 1px solid var(--border-color); 
    border-radius: 8px; padding: 8px 5px; /* Kurangi padding */
    text-align: center; transition: 0.2s;
}
.glossary-item:hover {
    border-color: var(--primary-color);
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}
.glossary-item .g-rejang { 
    font-size: 1.6em; /* Kurangi ukuran font aksara */
    display: block; color: var(--primary-color); line-height: 1.2;
}
.glossary-item .g-latin { 
    font-size: 0.8em; color: #555; font-weight: 500; 
}


.collection-list { margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: 15px; }
.collection-item { border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; position: relative; cursor: pointer; transition: 0.2s; }
.collection-item:hover { background-color: #F8F9FA; transform: translateY(-2px); border-color: var(--primary-color); }
.collection-item .c-rejang { font-size: 1.8em; color: var(--primary-color); display: block; margin-bottom: 5px; line-height: 1.2; }
.collection-item-delete { position: absolute; top: 8px; right: 8px; background: #F8D7DA; color: #721C24; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.2s; }
.collection-item:hover .collection-item-delete { opacity: 1; }

.share-options { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
.share-option-btn { display: block; padding: 12px 15px; border-radius: 8px; text-align: center; font-weight: 500; text-decoration: none; color: #fff; transition: 0.2s; }
.share-option-btn:hover { transform: scale(1.03); opacity: 0.9; }
.share-option-btn.whatsapp { background-color: #25D366; }
.share-option-btn.twitter  { background-color: #1DA1F2; }
.share-option-btn.facebook { background-color: #1877F2; }
.share-option-btn.copy-link { background-color: #6c757d; border: none; width: 100%; cursor: pointer; font-size: 16px;}



/* ===================================================================== */
/* MODERN SMART TOAST NOTIFICATION
/* ===================================================================== */
.kd-toast { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    background: #ffffff; /* Latar Putih Bersih */
    color: #1f2937; /* Teks Gelap Tegas */
    padding: 16px 24px; 
    border-radius: 12px; 
    z-index: 9999999 !important; /* MUSTAHIL TERTUTUP HEADER/FOOTER */
    opacity: 0; 
    /* Muncul meluncur dari samping kanan */
    transform: translateX(50px) scale(0.9); 
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    /* Bayangan elegan */
    box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 5px 15px rgba(0,0,0,0.05); 
    font-family: var(--font-latin);
    font-weight: 600;
    font-size: 14.5px;
    border-left: 6px solid #28a745; /* Garis warna default */
}

.kd-toast.show { 
    opacity: 1; 
    transform: translateX(0) scale(1); 
}

/* Varian Sukses (Hijau Emerald) */
.kd-toast-success { 
    border-left-color: #10B981; 
} 
.kd-toast-success .kd-toast-icon svg { 
    color: #10B981; 
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}

/* Varian Error (Merah Ruby) */
.kd-toast-error { 
    border-left-color: #EF4444; 
} 
.kd-toast-error .kd-toast-icon svg { 
    color: #EF4444; 
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}

/* Varian Peringatan (Kuning Amber) */
.kd-toast-warning { 
    border-left-color: #F59E0B; 
} 
.kd-toast-warning .kd-toast-icon svg { 
    color: #F59E0B; 
}

.kd-toast-icon svg { 
    width: 26px; 
    height: 26px; 
}


/* ===================================================================== */
/* ACCESSIBILITY */
/* ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .output-box .word {
        animation: none !important;
        transform: none !important;
    }
}

/* ===================================================================== */
/* 7. MEDIA QUERIES (PENYEMPURNAAN MOBILE HP)
/* ===================================================================== */
@media (max-width: 480px) {
    /* 1. Penghematan Ruang Layar (Padding & Margin) */
    .container { padding: 0 10px; }
    .card { padding: 15px; } /* Kurangi padding agar area konten lebih luas */
    
    /* 2. Optimasi Kotak Input & Output agar tidak memakan 1 layar penuh */
    textarea, .output-box { height: 160px; padding: 10px; }
    .output-box.font-noto { font-size: 1.8rem; } /* Ukuran huruf sedikit disesuaikan untuk HP */

    /* 3. Tombol Tools & Ekspor */
    .features-cohesive { grid-template-columns: 1fr 1fr; gap: 8px; }
    .btn-cohesive { white-space: normal; font-size: 12px; padding: 8px; }

    /* 4. FIX KRUSIAL: Slider Contoh Kata (Memaksa turun ke bawah) */
    /* .ex-row {  */
        /* flex-direction: column !important; /* Wajib pakai !important untuk menimpa CSS atas */ */
        /* align-items: flex-start !important;  */
        /* gap: 2px !important;  */
        /* padding-bottom: 12px; */
    /* } */
    /* .ex-label { width: auto !important; } */
    /* .ex-label::after { display: none; } /* Hilangkan titik dua (:) saat layout bertumpuk */ */
    /* .ex-rejang-text { font-size: 20px; } /* Sesuaikan ukuran font aksara contoh */ */

    /* 5. Perbaikan Modal & Pop-up di Layar Kecil */
    .modal-content { 
        padding: 20px 15px; /* Kurangi jarak tepi pop up */
        margin: 10px; 
        width: 100%;
    }
    .modal-close-btn { top: 10px; right: 15px; }

    /* 6. Arah Konversi (Pilihan Latin ke Rejang) */
    .controls .radio-group-wrapper {
        flex-direction: column; /* Ditumpuk atas bawah di HP agar sangat mudah dipencet */
        gap: 8px;
    }
    .controls .radio-group-wrapper label {
        flex: 1;
        padding: 10px 5px;
        font-size: 13px;
    }

    /* 7. Menu Tab (Keyboard & Analisis) agar bisa digeser (Swipe) */
    .tabs { padding-bottom: 5px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-button { font-size: 0.85em; padding: 6px 10px; }

    /* 8. Tips Penulisan */
    .tip-comparison { grid-template-columns: 1fr; gap: 10px;} 
    .tip-rejang-text { font-size: 1.6em; }

    /* 9. Smart Toast Notification */
    .kd-toast { 
        bottom: 20px; 
        right: 15px; 
        left: 15px; /* Lebarkan memenuhi layar HP */
        justify-content: flex-start; 
        transform: translateY(30px) scale(0.9);
        padding: 12px 16px;
    }
    .kd-toast.show {
        transform: translateY(0) scale(1);
    }
}

/* ===================================================================== */
/* 7. MEDIA QUERIES (SUPER RESPONSIVE MOBILE FIX - SAPU JAGAT)
/* ===================================================================== */

@media (max-width: 768px) {
    /* --- 1. PENGUNCIAN LAYAR UTAMA (ANTI-GOYANG) --- */
    html, body { overflow-x: hidden !important; width: 100vw !important; max-width: 100% !important; margin: 0; padding: 0; }
    .container { padding: 0 10px !important; overflow-x: hidden !important; max-width: 100vw !important; }
    .card { padding: 15px !important; max-width: 100% !important; overflow: hidden !important; }

    /* --- 2. KOTAK INPUT & OUTPUT (Pas 1 Layar) --- */
    textarea, .output-box { height: 160px !important; padding: 12px !important; font-size: 16px !important; width: 100% !important; box-sizing: border-box !important;}
    .output-box.font-noto { font-size: 2rem !important; }

    /* --- 3. ARAH KONVERSI (Ditumpuk Penuh) --- */
    .controls .radio-group-wrapper { 
        flex-direction: column !important; /* Paksa tumpuk atas-bawah */
        gap: 8px !important; 
        width: 100% !important; 
    }
    .controls .radio-group-wrapper label { 
        width: 100% !important; 
        padding: 10px !important; 
        justify-content: center !important; 
        box-sizing: border-box !important;
    }

    /* --- 4. TOOLS & EKSPOR (2 Kolom Terkunci) --- */
    .features-cohesive { 
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; /* Wajib minmax(0) agar tidak menjebol */
        gap: 8px !important; 
        width: 100% !important;
    }
    .btn-cohesive { 
        padding: 8px 4px !important; /* Kurangi padding dalam */
        font-size: 11px !important; /* Ukuran teks diperkecil */
        white-space: normal !important; /* Izinkan teks panjang turun baris (PENTING!) */
        text-align: center !important; 
        min-width: 0 !important; 
        word-wrap: break-word !important;
        line-height: 1.2 !important;
        display: flex !important;
        flex-direction: column !important; /* Susun Ikon di atas Teks */
        gap: 4px !important;
    }
    .btn-cohesive svg, .btn-cohesive i { margin-bottom: 2px !important; }

    /* --- 5. KEYBOARD VIRTUAL & MODE ANALISIS (Tab Anti-Menjebol) --- */
    .tabs { 
        flex-wrap: nowrap !important; /* Tetap sejajar... */
        overflow-x: auto !important; /* ...TAPI izinkan scroll/geser ke samping! */
        -webkit-overflow-scrolling: touch !important; 
        padding-bottom: 8px !important; 
        width: 100% !important;
        /* Sembunyikan scrollbar agar rapi */
        scrollbar-width: none; 
    }
    .tabs::-webkit-scrollbar { display: none; }
    
    .tab-button { 
        font-size: 12px !important; 
        padding: 8px 10px !important; 
        white-space: nowrap !important; /* Jangan lipat teks tab */
    }

    /* Baris Keyboard Virtual (Pas di layar HP) */
    .keyboard-row {
        gap: 4px !important;
        justify-content: flex-start !important; /* Mulai dari kiri */
        flex-wrap: wrap !important;
    }
    .key {
        flex: 1 1 18% !important; /* Lebar tombol menyesuaikan, maks 5 tombol sebaris */
        min-width: 0 !important;
        padding: 4px !important;
    }

    /* Mode Analisis (Per Kata / Per Karakter) */
    .analysis-container {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* Cegah kata panjang merusak layar */
    }
    .analysis-item {
        max-width: 100% !important; /* Jika ada kata yg sangat panjang, jangan jebol kotak */
        word-wrap: break-word !important;
    }

    /* --- 6. SLIDER CONTOH KATA (Memaksa Turun ke Bawah) --- */
    /* .ex-row {  */
        /* flex-direction: column !important; Paksa teks Latin/Aksara turun ke baris baru */
        /* align-items: flex-start !important;  */
        /* gap: 4px !important;  */
        /* padding-bottom: 10px !important; */
        /* width: 100% !important; */
    /* } */
    /* .ex-label { width: 100% !important; } */
    /* .ex-label::after { display: none !important; } Hilangkan titik dua (:) agar rapi */
    /* .ex-rejang-text { font-size: 22px !important; margin-top: 0 !important; } */
    /* .ex-cta-text { padding: 10px !important; font-size: 12px !important; width: 100% !important; } */

    /* --- 7. TIPS PENULISAN --- */
    .tip-comparison { grid-template-columns: 1fr 1fr !important; gap: 15px !important;} 
    .tip-rejang-text { font-size: 1.8em !important; }

    /* --- 8. KUIS LATIHAN --- */
    .quiz-controls { flex-wrap: wrap !important; width: 100% !important; }
    .quiz-controls button { flex: 1 1 100% !important; margin-bottom: 5px !important; }
    .quiz-input-wrapper { flex-direction: column !important; align-items: flex-start !important; width: 100% !important;}
    #quiz-input { width: 100% !important; box-sizing: border-box !important; }

    /* --- 9. MODAL / POP UP --- */
    .modal-content { width: 95% !important; padding: 20px !important; margin: 10px auto !important; box-sizing: border-box !important;}
    .modal-close-btn { top: 10px !important; right: 15px !important; }

    /* --- 10. TOAST NOTIFICATION --- */
    .kd-toast { 
        bottom: 20px !important; right: 20px !important; left: 20px !important; 
        width: auto !important;
        transform: translateY(30px) scale(0.9) !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }
    .kd-toast.show { transform: translateY(0) scale(1) !important; }
}


@media (min-width: 1024px) {
    .io-container { grid-template-columns: 1fr 1fr; }
    .card { padding: 25px 30px; }
    .main-layout-grid { grid-template-columns: 2fr 1fr; gap: 20px; }
}