/* =========================================
   1. ROOT VARIABLES & RESET DASAR
   ========================================= */
:root {
    --primary: #4F46E5;
    --secondary: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
    --bg: #F8FAFC;
    --sidebar-bg: #1E293B;
    --sidebar-hover: #334155;
    --domino-bg: #FFFBEB;
    --domino-border: #D97706;
}

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

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: var(--bg);
    color: #333;
    display: flex; 
    min-height: 100vh;
}

/* =========================================
   2. LAYOUT UTAMA (SIDEBAR, WRAPPER, FOOTER)
   ========================================= */
.sidebar {
    width: 250px;
    background-color: var(--sidebar-bg);
    color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    z-index: 100;
}

.sidebar-brand {
    padding: 20px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 1px solid #334155;
    letter-spacing: 1px;
    color: #38BDF8;
}

.sidebar-menu { list-style: none; margin-top: 15px; flex: 1; }
.sidebar-menu li a {
    display: block; padding: 15px 25px; color: #CBD5E1;
    text-decoration: none; font-weight: 500; transition: 0.3s;
    border-left: 4px solid transparent;
}
.sidebar-menu li a:hover { background-color: var(--sidebar-hover); color: white; }

.menu-utama {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 25px; color: #CBD5E1; font-weight: 500;
    cursor: pointer; transition: 0.3s; border-left: 4px solid transparent;
}
.menu-utama:hover, .menu-utama.active { background-color: var(--sidebar-hover); color: white; }
.menu-utama i { transition: transform 0.3s ease; }
.menu-utama.active i { transform: rotate(180deg); }

.sub-menu { display: none; background-color: #0F172A; list-style: none; }
.sub-menu li a { padding: 12px 25px 12px 45px; font-size: 0.95rem; border-left: none; }
.sub-menu li a.active { background-color: var(--primary); color: white; }

.main-wrapper { flex: 1; display: flex; flex-direction: column; overflow-x: hidden; }
.main-content {
    flex: 1; padding: 30px; max-width: 1200px; margin: 0 auto;
    width: 100%; display: flex; flex-direction: column; align-items: center;
}

.footer {
    background-color: white; color: #64748B; text-align: center;
    padding: 15px 20px; border-top: 1px solid #E2E8F0;
    font-size: 0.9rem; margin-top: auto; 
}
.footer a { color: inherit; text-decoration: none; font-weight: bold; transition: color 0.2s; }
.footer a:hover { color: var(--primary); }

/* =========================================
   3. KOMPONEN UMUM (CARD, HEADER, BUTTON, BOX)
   ========================================= */
.header { text-align: center; margin-bottom: 25px; width: 100%; }
.header h2 { margin: 0; color: var(--primary); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase;}
.header p { color: #64748B; margin-top: 5px; font-size: 1.1rem; }

.card {
    background: white; padding: 25px; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); width: 100%; max-width: 950px;
    display: flex; flex-direction: column; gap: 20px; margin-bottom: 25px;
}
.card h2 { text-align: center; margin-top: 0; margin-bottom: 20px; color: var(--primary); }
.card h3 { color: var(--primary); margin-top: 0; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #E2E8F0; padding-bottom: 10px;}

.materi-box {
    background: #EEF2FF; border-left: 5px solid var(--primary);
    padding: 20px 25px; border-radius: 8px; color: #374151; line-height: 1.6; margin-bottom: 15px;
}
.materi-box h3 { color: var(--primary); margin-top: 0; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; border-bottom: none;}
.materi-list { margin-left: 20px; margin-top: 10px; color: #4B5563; }
.materi-list li { margin-bottom: 8px; }

.rumus-box {
    background: white; padding: 15px; border-radius: 8px; text-align: center;
    font-size: 1.3rem; font-weight: bold; border: 2px dashed #CBD5E1;
    margin: 15px 0; color: var(--primary); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px;
}

.highlight-badge { background-color: #FEF3C7; color: #B45309; padding: 2px 8px; border-radius: 4px; font-weight: bold; border: 1px solid #FDE68A; }

.pemantik-container { display: flex; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; }
.pemantik-box { flex: 1; min-width: 250px; background: #FFFBEB; border-left: 5px solid var(--warning); padding: 20px; border-radius: 8px; }
.pemantik-kiri { flex: 1; min-width: 250px; background: #EEF2FF; border-left: 5px solid var(--primary); padding: 20px; border-radius: 8px; }
.pemantik-penutup { margin-top: 25px; background: #FFFBEB; border: 2px dashed var(--warning); border-left: 6px solid var(--warning); padding: 25px; border-radius: 8px; width: 100%; }

.soal-box {
    background-color: #F8FAFC; border: 1px solid #E2E8F0; padding: 25px;
    border-radius: 8px; margin-top: 20px; width: 100%;
}
.quiz-item { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #CBD5E1; }
.quiz-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.quiz-item label { display: block; margin-bottom: 8px; line-height: 1.5; color: #334155; }
.quiz-input { width: 100%; max-width: 250px; padding: 10px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 1rem; }
.quiz-input:focus { border-color: var(--primary); outline: none; }
.quiz-feedback { margin-top: 8px; font-size: 0.95rem; font-weight: bold; display: none; }
.benar { color: var(--secondary); }
.salah { color: var(--danger); }

button.btn-blue, button.btn-green, button.btn-next-level, button.btn-aksi {
    border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.2s;
}
button.btn-blue { padding: 12px 20px; background: var(--primary); color: white; font-size: 1rem; display: block; margin: 15px auto; width: 100%; max-width: 300px; }
button.btn-blue:hover { background: #4338CA; }
button.btn-green { padding: 12px 20px; background: var(--secondary); color: white; font-size: 1rem; display: block; width: 100%; max-width: 250px; margin: 15px auto; }
button.btn-green:hover { background: #059669; }
button.btn-next-level { padding: 10px 20px; background: var(--secondary); color: white; font-size: 1rem; margin-top: 15px; display: inline-block; box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3); }
button.btn-next-level:hover { background: #059669; transform: translateY(-2px); }
button.btn-aksi { background-color: var(--primary); color: white; padding: 8px 15px; font-size: 0.9rem; text-decoration: none; display: inline-block; }
button.btn-aksi:hover { background-color: #4338CA; }

#answer-box {
    padding: 20px; border-radius: 8px; background-color: #F1F5F9; border-left: 5px solid #94A3B8;
    text-align: center; font-size: 1rem; min-height: 60px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; width: 100%;
}
.success-box { background-color: #F0FDF4 !important; border-left-color: var(--secondary) !important; color: #065F46 !important; border: 1px solid #A7F3D0; }
.error-box { background-color: #FEF2F2 !important; border-left-color: var(--danger) !important; color: #991B1B !important; border: 1px solid #FECACA; }

/* =========================================
   4. SPESIFIK: ALJABAR & KUADRAT (WORKSPACE & TILES)
   ========================================= */
#workspace {
    position: relative; width: 100%; background-color: #F8FAFC;
    border: 2px dashed #94A3B8; border-radius: 8px; overflow: hidden; touch-action: none;
}

/* Modifikasi otomatis jika workspace dipakai untuk Aljabar (ada pool-area) */
#workspace:has(#pool-area) { height: 500px; display: flex; flex-direction: column; }
#pool-area { height: 180px; width: 100%; border-bottom: 2px dashed #CBD5E1; background-image: radial-gradient(#CBD5E1 1px, transparent 1px); background-size: 20px 20px; position: relative; }
#drop-zones { display: flex; flex: 1; width: 100%; }
.zone { flex: 1; border-right: 2px dashed #CBD5E1; position: relative; display: flex; flex-direction: column; align-items: center; background-color: rgba(255,255,255,0.6); padding-top: 40px; padding-bottom: 50px; }
.zone:last-child { border-right: none; }
.zone.hovered { background-color: #E0E7FF; }
.zone-title { position: absolute; top: 10px; font-weight: bold; color: #64748B; background: white; padding: 5px 15px; border-radius: 20px; border: 1px solid #E2E8F0; z-index: 10; font-size: 0.9rem; }
.zone-input-container { position: absolute; bottom: 15px; width: 100%; text-align: center; z-index: 20; }
.zone-input { width: 70%; padding: 8px; border: 2px solid #CBD5E1; border-radius: 6px; text-align: center; font-weight: bold; }

/* Modifikasi otomatis jika workspace dipakai untuk Kuadrat (tanpa pool-area) */
#workspace:not(:has(#pool-area)) {
    height: 350px; background-color: #ffffff;
    background-image: linear-gradient(#F1F5F9 1px, transparent 1px), linear-gradient(90deg, #F1F5F9 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Base Tile (Kepingan) */
.tile {
    position: absolute; display: flex; justify-content: center; align-items: center; color: white;
    font-weight: bold; cursor: grab; user-select: none; transition: transform 0.1s, box-shadow 0.1s;
}
.tile:active { cursor: grabbing; transform: scale(1.1); box-shadow: 0 8px 15px rgba(0,0,0,0.2); }

/* Tile khusus Aljabar */
#workspace:has(#pool-area) .tile { width: 60px; height: 60px; font-size: 1.2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 2px solid rgba(255,255,255,0.5); }
#workspace:has(#pool-area) .tile-x { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.tile-y { background: linear-gradient(135deg, #10B981, #059669); }
.tile-c { background: linear-gradient(135deg, #F59E0B, #D97706); }

/* Tile khusus Kuadrat */
#workspace:not(:has(#pool-area)) .tile { border: 1px solid rgba(0,0,0,0.5); font-size: 18px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); }
.tile-x2 { width: 100px; height: 100px; background-color: var(--primary); }
#workspace:not(:has(#pool-area)) .tile-x { width: 25px; height: 100px; background-color: var(--secondary); font-size: 14px;}
.tile-1 { width: 25px; height: 25px; background-color: var(--warning); color: #000; font-size: 12px;}
.tile.neg { background-color: var(--danger) !important; color: white; }

/* =========================================
   5. SPESIFIK: BILANGAN BULAT (KODOK & KARTU)
   ========================================= */
.ruler-container { position: relative; width: 100%; height: 60px; background: #FDE047; border: 2px solid #CA8A04; border-radius: 6px; margin: 20px 0 40px 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.tick { position: absolute; top: 0; width: 2px; height: 15px; background: #000; }
.tick-label { position: absolute; top: 22px; transform: translateX(-50%); font-size: 0.85rem; font-weight: bold; color: #111; }
.tick-center { height: 25px; width: 3px; background: var(--danger); }
#kodok { position: absolute; top: -40px; left: 50%; font-size: 2.5rem; transform: translateX(-50%); transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; cursor: pointer; filter: drop-shadow(0 4px 2px rgba(0,0,0,0.2)); }
.kontrol-kodok { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }
.btn-lompat { background-color: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 0 #3730A3; transition: 0.1s;}
.btn-lompat:active { transform: translateY(4px); box-shadow: 0 0 0; }
.btn-lompat.kiri { background-color: var(--danger); box-shadow: 0 4px 0 #B91C1C; }
.btn-lompat.reset { background-color: #64748B; box-shadow: 0 4px 0 #475569; }

.level-nav { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.btn-level { text-decoration: none; padding: 8px 16px; border-radius: 20px; background-color: #E2E8F0; color: #475569; font-weight: bold; transition: all 0.2s; border: 2px solid transparent; }
.btn-level:hover { background-color: #CBD5E1; }
.btn-level.aktif { background-color: var(--primary); color: white; box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3); }
.btn-level.terkunci { background-color: #F1F5F9; color: #94A3B8; cursor: not-allowed; border: 1px dashed #CBD5E1; }

.info-panel { display: flex; justify-content: space-between; align-items: center; background: #EEF2FF; padding: 15px 20px; border-radius: 8px; border-left: 5px solid var(--primary); margin-bottom: 20px; flex-wrap: wrap; gap: 15px; width: 100%; }
.papan-permainan { display: flex; justify-content: space-around; gap: 20px; flex-wrap: wrap; width: 100%;}
.area-kartu { flex: 1; min-width: 300px; background: #F8FAFC; padding: 20px; border-radius: 8px; border: 1px solid #E2E8F0; text-align: center; }
.grid-kartu { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.kartu { background-color: #fff; border: 2px solid #CBD5E1; border-radius: 8px; padding: 15px 5px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; user-select: none; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; min-height: 55px; }
.kartu.soal:hover { border-color: var(--primary); background-color: #EEF2FF; }
.kartu.jawaban:hover { border-color: var(--warning); background-color: #FFFBEB; }
.kartu.terpilih-soal { background-color: var(--primary); color: white; border-color: var(--primary); transform: scale(1.05); }
.kartu.terpilih-jawaban { background-color: var(--warning); color: white; border-color: var(--warning); transform: scale(1.05); }
.kartu.hilang { visibility: hidden; opacity: 0; transition: opacity 0.3s; }

#menang-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.8); z-index: 1000; justify-content: center; align-items: center; }
.modal-content { background: white; padding: 40px; border-radius: 12px; text-align: center; max-width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.2);}

/* =========================================
   6. SPESIFIK: GARIS LURUS & SUDUT (CANVAS)
   ========================================= */
canvas { background: #fff; border-radius: 8px; border: 1px solid #CBD5E1; touch-action: none; max-width: 100%; height: auto; }
#canvas { cursor: crosshair; }
#canvasSudut, #canvasSudut360, #canvasPecahan, #canvasSejajar, #canvasOperasi { cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
#canvasSudut:active, #canvasSudut360:active, #canvasPecahan:active, #canvasSejajar:active, #canvasOperasi:active { cursor: grabbing; }

.content-wrapper { display: flex; gap: 30px; align-items: flex-start; }
.left-panel { flex: 1; display: flex; flex-direction: column; }
.right-panel { flex: 0 0 auto; position: sticky; top: 20px; }
.input-group { display: flex; justify-content: space-between; margin-bottom: 15px; }

.formula-box { margin-top: 15px; padding: 20px; background: #FEF3C7; border-left: 5px solid var(--warning); border-radius: 6px; }
.math-row { display: flex; align-items: center; margin: 12px 0; font-size: 1.1rem; }
.pecahan { display: inline-block; vertical-align: middle; text-align: center; margin: 0 10px; }
.pecahan-atas { border-bottom: 2px solid #1E293B; padding: 2px 10px; display: block; width: 100%; }
.pecahan-bawah { padding: 2px 10px; display: block; width: 100%; }

.explanation { width: 100%; margin-top: 10px; padding: 20px 25px; background-color: #EEF2FF; border-left: 5px solid var(--primary); border-radius: 8px; line-height: 1.6; }
.math-text { display: inline-block; font-size: 1.2rem; font-weight: bold; color: var(--primary); background: rgba(255,255,255,0.7); padding: 5px 15px; border-radius: 6px; border: 1px dashed #94A3B8; margin-top: 5px; }
.calc-box { font-size: 1.05rem; background: #F0FDF4; border-left: 4px solid var(--secondary); padding: 15px; border-radius: 6px; margin-top: 10px; }

/* =========================================
   7. SPESIFIK: PIZZA (DOMINO PECAHAN)
   ========================================= */
.settings-panel { margin-bottom: 15px; background: #F8FAFC; padding: 20px; border-radius: 8px; border: 1px solid #E2E8F0; width: 100%; }
.controls-top { margin-bottom: 15px; display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }
.controls-top select { padding: 8px 12px; border-radius: 6px; border: 1px solid #CBD5E1; font-size: 1rem; font-weight: bold; }
.pizza-controls-wrapper { display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; }
.pizza-control-box { background: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #E2E8F0; min-width: 200px; }
.control-row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.control-row button { background-color: var(--secondary); color: white; border: none; width: 30px; height: 30px; border-radius: 4px; font-weight: bold; font-size: 1.2rem; cursor: pointer; transition: 0.2s; }

.domino-header { background-color: #F0FDF4; border-top: 5px solid var(--secondary); padding: 20px; border-radius: 8px; text-align: center; width: 100%; font-size: 1.1rem; color: #065F46; font-weight: bold; margin-bottom: 10px; position: relative; }
#domino-workspace { position: relative; width: 100%; background-color: #F8FAFC; padding: 20px; border: 2px dashed #94A3B8; border-radius: 8px; display: flex; flex-direction: column; gap: 20px; }
#domino-pool { min-height: 140px; width: 100%; border-bottom: 2px dashed #CBD5E1; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; align-items: center; padding-bottom: 20px; }
#domino-zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; }

.domino-card-container { display: flex; align-items: stretch; background: var(--domino-bg); border: 3px solid var(--domino-border); border-radius: 12px; min-height: 100px; }
.domino-left { flex: 1; display: flex; align-items: center; justify-content: center; border-right: 3px dashed var(--domino-border); padding: 10px; font-size: 1.1rem; font-weight: bold; color: #78350F; background: #FEF3C7; }
.domino-right-zone { flex: 1; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.7); position: relative; }
.domino-tile { position: absolute; width: 80px; height: 80px; background: white; border: 2px solid var(--domino-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--primary); cursor: grab; z-index: 10; }

.math-expr { display: flex; align-items: center; justify-content: center; gap: 8px; }
.html-frac { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.html-frac-num, .html-frac-den { padding: 0 4px; font-size: 1.15rem; }
.html-frac-line { border-top: 2px solid currentColor; width: 100%; margin: 2px 0; }
.math-op { font-size: 1.2rem; font-weight: bold; margin: 0 2px; }

/* =========================================
   8. SPESIFIK: TENTANG KAMI
   ========================================= */
.visi-misi-box { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.vm-item { flex: 1; min-width: 280px; background: #EEF2FF; padding: 20px; border-radius: 10px; border-top: 4px solid var(--primary); }
.vm-item h4 { color: var(--primary); margin-bottom: 10px; font-size: 1.2rem; }
.solusi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 10px; }
.solusi-card { background: #F0FDF4; padding: 20px; border-radius: 10px; border-left: 5px solid var(--secondary); }
.profile-section { display: flex; gap: 30px; align-items: flex-start; }
.profile-img { width: 180px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: 4px solid white; }
.cta-box { background: linear-gradient(135deg, #4F46E5 0%, #3B82F6 100%); color: white; text-align: center; padding: 40px; border-radius: 15px; margin-top: 20px; }
.cta-btn { display: inline-block; padding: 12px 30px; background: var(--warning); color: #78350F; font-weight: bold; text-decoration: none; border-radius: 50px; margin-top: 15px; transition: 0.3s; }
.cta-btn:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* =========================================
   9. MEDIA QUERIES (RESPONSIF MOBILE)
   ========================================= */
@media (max-width: 768px) {
    body { flex-direction: column; }
    .sidebar { width: 100%; }
    .sidebar-brand { padding: 15px; border-bottom: none; }
    .main-content { padding: 15px; }
    .card, .pemantik-penutup { padding: 15px; }
    
    /* Aljabar */
    .pemantik-container, #drop-zones { flex-direction: column; }
    .zone { border-right: none; border-bottom: 2px dashed #CBD5E1; min-height: 120px; padding-top: 10px;}
    .zone-title { position: relative; top: 0; margin-bottom: 10px; }
    .zone:last-child { border-bottom: none; }
    #workspace:has(#pool-area) { height: auto; min-height: 700px; }
    
    /* Bilbul */
    .papan-permainan { flex-direction: column; }
    .info-panel { flex-direction: column; align-items: stretch; text-align: center;}
    
    /* Garislurus */
    .content-wrapper { flex-direction: column; align-items: center; }
    .left-panel, .right-panel { width: 100%; position: static; }
    .input-group { flex-wrap: nowrap; overflow-x: auto; justify-content: center; gap: 10px; }
    .input-box { width: auto; margin-bottom: 0; white-space: nowrap; }
    
    /* Kuadrat */
    .input-section { gap: 10px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;}
    .method-container { flex-direction: column; }
    
    /* Pizza */
    .pizza-controls-wrapper { gap: 15px; flex-direction: column; align-items: center;}
    .pizza-control-box { width: 100%; max-width: 300px; }
    .controls-top { flex-direction: column; gap: 10px; align-items: flex-start;}
    #domino-zones { grid-template-columns: 1fr; } 
    .domino-card-container { min-height: 90px; }
    .domino-tile { width: 70px; height: 70px; }
    
    /* Tentang */
    .profile-section { flex-direction: column; align-items: center; text-align: center; }
    
    /* Global Elements */
    .quiz-input { max-width: 100%; margin-right: 0; }
}