/* =========================================
   1. CSS VARIABLES (Tema Light & Dark)
   ========================================= */
:root {
    /* --- LIGHT MODE (DEFAULT) --- */
    --header-bg: #003366;        /* BARU: Khusus Latar Header/Footer */
    --primary-color: #003366;    /* Warna Teks Utama/Judul (Navy) */
    --accent-color: #008CBA;     /* Biru Muda */
    --bg-color: #ffffff;         /* Background Putih */
    --text-color: #333333;       /* Teks Hitam */
    --card-bg: #f4f4f4;          /* Abu-abu muda */
    --border-color: #ddd;        
    --header-text: #ffffff;
    --input-bg: #ffffff;
    --button-text: #ffffff;
    --shadow: 0 2px 5px rgba(0,0,0,0.1);
    --hero-bg: #f4f4f4;          /* Background Hero */
}

[data-theme="dark"] {
    /* --- DARK MODE (FINAL: SAFE & VISIBLE) --- */
    
    /* 1. Header & Footer: Tetap Hitam/Sangat Gelap untuk batas tegas */
    --header-bg: #0a0a0a;        
    
    /* 2. Primary Color (Judul/Email): JADI PUTIH (Agar terbaca) */
    /* PENTING: Ini yang bikin teks tidak hilang */
    --primary-color: #ffffff;    
    
    /* 3. Aksen Biru Terang (Cyan) */
    --accent-color: #4cc9f0;     
    
    /* 4. BACKGROUND BODY: Dark Grey (Bukan Hitam Pekat - Anti Bleeding) */
    --bg-color: #121212;         
    
    /* 5. TEKS: Off-White (Putih Gading Terang - Anti Silau) */
    --text-color: #e6e6e6;       
    
    /* 6. Latar Kotak/Card: Sedikit lebih terang dari body */
    --card-bg: #1e1e1e;          
    
    /* 7. Border */
    --border-color: #444;        
    
    /* 8. Header Text */
    --header-text: #f4f4f4;
    
    --input-bg: #2c2c2c;
    --button-text: #121212;      
    --shadow: 0 4px 6px rgba(0,0,0,0.3);
    --hero-bg: #121212;          
}

/* =========================================
   2. RESET & BASE STYLES
   ========================================= */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s; /* Efek transisi halus */
}

/* =========================================
   3. HEADER & NAVIGASI
   ========================================= */
header {
    /* PENTING: Menggunakan variabel baru --header-bg */
    background: var(--header-bg); 
    color: var(--header-text);
    padding: 1rem 0;
    border-bottom: 5px solid var(--accent-color);
}

.container {
    width: 90%;
    max-width: 1000px;
    margin: auto;
    padding: 0 1rem;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Brand Style */
.brand {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--header-text);
}

.brand img {
    height: 50px;
    width: auto;
    background: white; /* Logo tetap butuh background putih */
    padding: 4px;
    border-radius: 4px;
}

.brand h1 {
    font-size: 1.2rem;
    margin: 0;
}

/* Menu Navigasi */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
}

nav a {
    color: var(--header-text);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
}

nav a:hover, nav a:focus, nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    color: #ffd700; /* Kuning emas */
}

/* =========================================
   4. AREA KONTEN (HERO & GRID)
   ========================================= */
/* Hero Section */
.hero {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--hero-bg);
    margin-bottom: 2rem;
    border-radius: 8px;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 2rem;
}

/* Card Style */
.card {
    background: var(--card-bg);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
    transition: transform 0.2s, border-color 0.2s;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.card h3 {
    margin-top: 0;
    color: var(--accent-color);
}

/* =========================================
   5. UI ELEMENTS (Input, Button, ToolBox)
   ========================================= */
/* Tool Box */
.tool-box {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--accent-color);
    margin: 2rem 0;
    box-shadow: var(--shadow);
}

/* Input Fields */
input, textarea, select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    background-color: var(--input-bg);
    color: var(--text-color);
    box-sizing: border-box;
}

/* Buttons */
.button {
    display: inline-block;
    background: var(--accent-color);
    color: var(--button-text);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.button:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* Ads Slot */
.ads-slot {
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    padding: 1rem;
    text-align: center;
    margin: 2rem 0;
    min-height: 100px;
    color: #888;
}

.content-article {
    margin-top: 3rem;
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
}

/* =========================================
   6. FOOTER & ACCESSIBILITY
   ========================================= */
footer {
    /* PENTING: Menggunakan variabel baru --header-bg */
    background: var(--header-bg);
    color: var(--header-text);
    text-align: center;
    padding: 2rem 0;
    margin-top: 3rem;
}

footer a {
    color: var(--accent-color);
    text-decoration: none;
}

/* Link Footer di Dark Mode jadi Kuning (High Contrast) */
[data-theme="dark"] footer a {
    color: #ffd700; 
    text-decoration: underline;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-color);
    color: var(--button-text);
    padding: 8px;
    z-index: 1000;
    text-decoration: none;
    transition: top 0.3s;
}
.skip-link:focus {
    top: 0;
}

/* =========================================
   7. THEME SWITCHER BUTTON
   ========================================= */
#theme-toggle {
    background: transparent;
    border: 2px solid var(--header-text);
    color: var(--header-text);
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
}
#theme-toggle:hover {
    background: rgba(255,255,255,0.1);
    color: #ffd700;
}
/* =========================================
   8. PERBAIKAN LINK DALAM ARTIKEL (GLOBAL)
   ========================================= */

/* Link standar di dalam paragraf agar ikut warna aksen */
a {
    color: var(--accent-color);
    text-decoration: none; /* Opsional: hilangkan garis bawah default */
}

a:hover {
    text-decoration: underline; /* Muncul garis saat di-hover */
}

/* Pastikan Heading (H1-H6) di dalam artikel selalu kontras */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color); 
    /* Di Dark Mode ini akan jadi Putih, di Light Mode jadi Navy */
}

/* Khusus Dark Mode: Link di dalam artikel biar makin 'pop' */
[data-theme="dark"] a {
    color: #ffd700; /* Kuning Emas (Opsional: Jika ingin beda dengan Cyan) */
    /* Atau hapus baris ini jika ingin tetap pakai Cyan (--accent-color) */
}
/* =========================================
   9. EMERGENCY FIX (VERSI AMAN)
   ========================================= */

/* 1. Paksa Teks Konten jadi Terbaca */
/* Kita target elemen spesifik saja, jangan 'div' sembarangan */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th {
    color: var(--text-color) !important;
}

/* 2. Paksa Judul jadi Putih Terang */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--primary-color) !important;
}

/* =========================================
   PENGEUALIAN PENTING (SUPAYA TIDAK RUSAK)
   ========================================= */

/* A. JANGAN GANGGU TOMBOL */
/* Biarkan tombol mengikuti warna aslinya agar tetap kontras */
[data-theme="dark"] .button,
[data-theme="dark"] button {
    color: var(--button-text) !important;
}

/* B. JANGAN GANGGU LINK */
/* Biarkan link tetap Kuning/Cyan sesuai settingan sebelumnya */
[data-theme="dark"] a {
    color: #ffd700 !important; /* Paksa kuning emas untuk link */
}
[data-theme="dark"] .button {
    color: var(--button-text) !important; /* Kecuali tombol, kembalikan ke warna tombol */
    text-decoration: none !important;      /* Tombol jangan digarisbawah */
}

/* C. JANGAN GANGGU TOOL CONTRAST CHECKER */
/* PENTING: ID 'previewBox' tidak boleh kena override, */
/* karena warnanya diatur oleh JavaScript */
[data-theme="dark"] #previewBox,
[data-theme="dark"] #previewBox * {
    color: unset !important; /* Lepaskan paksaan warna */
}

/* D. JANGAN GANGGU HASIL BRAILLE/DYSLEXIA */
/* Biarkan kotak hasil mengikuti variabel input-bg */
[data-theme="dark"] #outputText,
[data-theme="dark"] #brailleOutput,
[data-theme="dark"] #displayArea {
    color: var(--text-color) !important;
    background-color: var(--input-bg) !important;
}
/* =========================================
   10. STYLE KHUSUS SIGN LANGUAGE SIMULATOR
   ========================================= */
.sign-output {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    min-height: 100px;
    align-items: center;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.sign-card {
    text-align: center;
    width: 80px; /* Lebar per kartu */
}

.sign-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #ffffff; /* Latar gambar tetap putih agar kontras */
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sign-card span {
    display: block;
    font-weight: bold;
    margin-top: 5px;
    font-size: 1.2rem;
    color: var(--text-color);
}
/* =========================================
   11. CUSTOM LANGUAGE BUTTON (FINAL)
   ========================================= */

/* 1. Style Tombol Bahasa (ID/EN) */
#lang-toggle {
    background: transparent;
    border: 2px solid var(--header-text); /* Ikut warna tema */
    color: var(--header-text);
    padding: 5px 10px;
    border-radius: 20px; /* Kembar dengan tombol dark mode */
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-width: 45px; /* Supaya ukuran stabil saat ganti teks */
    font-family: inherit;
}

/* 2. Efek Hover & Focus */
#lang-toggle:hover {
    background: rgba(128, 128, 128, 0.2);
    color: #ffd700; /* Warna emas saat disentuh */
    border-color: #ffd700;
}

#lang-toggle:focus {
    outline: 2px solid #ffd700; /* Fokus keyboard jelas (Aksesibilitas) */
}

/* 3. Sembunyikan Elemen Sampah Google */
/* Hilangkan Top Bar Google yang suka muncul di atas */
.goog-te-banner-frame { display: none !important; }
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; }

/* Hilangkan tooltip hover Google yang mengganggu */
#goog-gt-tt { display: none !important; }
/* =========================================
   12. HEADER CLEANUP (PENGGANTI INLINE STYLE)
   ========================================= */

/* Wrapper Utama Logo & Teks */
.brand-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Judul Website */
.brand-title {
    text-decoration: none; 
    color: var(--header-text);
}

.brand-title h1 {
    margin: 0; 
    font-size: 1.2rem;
}

/* Subtitle "by Dimaster" - PENTING UNTUK KONTRAS */
/* Karena Header Anda background-nya Biru Gelap (Navy) & Hitam, 
   maka teks subtitle harus selalu TERANG (Putih/Abu Terang). */
.brand-subtitle {
    display: block;
    font-size: 0.85rem;
    color: #e0e0e0; /* Abu sangat terang (Hampir putih) */
    margin-top: 2px;
}

.brand-subtitle a {
    color: #fff; /* Putih bersih untuk link */
    font-weight: bold;
    text-decoration: underline;
}

/* Wrapper Menu & Tombol Kanan */
.nav-controls {
    display: flex; 
    align-items: center; 
    gap: 15px;
}

/* Utilitas Sembunyikan Elemen (untuk Google Translate div) */
.visually-hidden {
    display: none;
}


/* =========================================
   13. ACCESSIBLE DROPDOWN MENU (FITUR TOOLS)
   ========================================= */

/* Wadah Dropdown */
.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

/* Tombol Pemicu Tools */
#tools-btn {
    background: none;
    border: none;
    color: var(--header-text);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    font-weight: bold; /* Samakan dengan link menu lain */
}

#tools-btn:hover, #tools-btn:focus {
    text-decoration: underline;
    color: #ffd700; /* Emas saat di-hover */
}

/* Kotak Isi Dropdown (Default: Sembunyi) */
.dropdown-content {
    display: none; /* Sembunyi */
    position: absolute;
    background-color: var(--card-bg); /* Ikut tema (Putih/Hitam) */
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000; /* Pastikan di atas elemen lain */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    top: 100%; /* Muncul persis di bawah tombol */
    left: 0;
    padding: 10px 0;
    list-style: none;
    margin-top: 10px;
    text-align: left;
}

/* Tampilan Link di dalam Dropdown */
.dropdown-content li {
    display: block;
    margin: 0;
}

.dropdown-content li a {
    color: var(--text-color); /* Warna teks standar (Hitam/Putih) */
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.95rem;
    font-weight: normal; /* Jangan terlalu tebal */
}

.dropdown-content li a:hover, 
.dropdown-content li a:focus {
    background-color: var(--accent-color); /* Biru saat disorot */
    color: #fff !important; /* Teks jadi putih saat disorot */
    outline: none;
}

/* KELAS AKTIF (Dimunculkan oleh JavaScript) */
.dropdown-content.show {
    display: block;
}

/* Highlight Tombol Tools jika anak-anaknya sedang dibuka */
#tools-btn.active-parent {
    color: #ffd700; /* Emas */
    text-decoration: underline;
    text-decoration-thickness: 2px;
}


/* =========================================
   14. INDIKATOR HALAMAN AKTIF (NAVIGASI)
   ========================================= */
/* Memberi tanda pada menu yang sedang dibuka */
nav ul li a.active,
nav ul li a[aria-current="page"] {
    color: #ffd700; /* Kuning Emas */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}