:root {
    /* Neko Series Japanese Dark Chocolate Palette */
    --neko-choco: #552e27;
    --neko-cream: #c2bbab;
    --neko-blossom: #c5a79f;
    --neko-coffee: #ad8f77;
    
    --bg-color: #3e221d; /* Very dark chocolate background */
    --panel-bg: #f9f6f0; /* Warm paper cream */
    --text-dark: #3e221d;
    --border-color: #2b1612;
    --shadow: 0 8px 24px rgba(0,0,0,0.15);
    --border-radius: 24px;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    margin: 0;
    padding: 20px;
    /* Pola titik krem samar di atas latar cokelat */
    background-image: radial-gradient(rgba(194, 187, 171, 0.15) 2px, transparent 2px);
    background-size: 25px 25px;
    box-sizing: border-box;
    min-height: 100vh;
    
    /* FIX LAYOUT: Memaksa susunan Navbar dan Builder menumpuk atas ke bawah */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* NAVBAR GLOBAL */
.navbar-container { 
    width: 100%;
    display: flex; 
    justify-content: center; 
    position: sticky; 
    top: 15px; 
    z-index: 1000; 
    margin-bottom: 30px; 
}

nav { 
    width: 100%; 
    max-width: 1000px; 
    background: var(--panel-bg); 
    border: 4px solid var(--border-color); 
    border-radius: 20px; 
    padding: 10px 25px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 6px 6px 0px var(--neko-blossom); 
    box-sizing: border-box;
}

.logo { text-decoration: none; display: flex; align-items: center; transition: transform 0.2s;}
.logo:hover { transform: scale(1.05); }
.logo img { height: 45px; border-radius: 8px; object-fit: contain; }

.nav-links { display: flex; gap: 10px; }
.nav-order-btn { text-decoration: none; font-weight: 900; padding: 10px 20px; border-radius: 14px; border: 3px solid var(--border-color); font-family: 'Fredoka', sans-serif; transition: all 0.2s; font-size: 1.05em; text-align: center;}
.btn-classic { background: #f1f2f6; color: var(--text-dark); box-shadow: 3px 3px 0px #bdc3c7; }
.btn-neko { background: var(--neko-choco); color: var(--neko-cream); box-shadow: 3px 3px 0px var(--neko-coffee); }
.nav-order-btn:hover { transform: translate(-2px, -2px); }
.nav-order-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 transparent; }

/* LAYOUT UTAMA BUILDER */
.lab-container { display: flex; gap: 30px; max-width: 1000px; width: 100%; }
.left-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; height: fit-content; }
.right-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; }

/* BOB BOX (Themed) */
.bob-box { background: var(--panel-bg); border-radius: var(--border-radius); padding: 20px; box-shadow: 6px 6px 0px var(--border-color); display: flex; align-items: center; gap: 15px; border: 4px solid var(--border-color); }
.bob-face { font-size: 3em; background: var(--neko-cream); border-radius: 50%; padding: 10px; line-height: 1; border: 3px solid var(--border-color); width: 1.5em; }
.bob-bubble { background: #fff; padding: 12px 20px; border-radius: 16px; border-bottom-left-radius: 4px; font-weight: 800; font-size: 1.1em; color: var(--text-dark); flex: 1; border: 2px dashed var(--neko-coffee); }

/* PREVIEW BOX */
.preview-box { background: var(--panel-bg); border-radius: var(--border-radius); height: 420px; box-shadow: 8px 8px 0px var(--border-color); position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; border: 4px solid var(--border-color); }
#caseslot { 
    position: absolute; 
    width: 250px; 
    z-index: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    top: 0px; /* <--- INI KUNCI FIX-NYA */
}
.key { position: absolute; width: 65px; z-index: 1; left: 50%; transform: translateX(-50%); transition: top 0.3s ease; }
.word { position: absolute; z-index: 10; font-weight: 900; font-size: 1.8em; left: 50%; transform: translateX(-50%); transition: top 0.3s ease; text-transform: uppercase; text-align: center; width: 80px;}

/* KONTROL */
.control-box { background: var(--panel-bg); border-radius: var(--border-radius); padding: 30px; box-shadow: 8px 8px 0px var(--border-color); border: 4px solid var(--border-color); display: flex; flex-direction: column; gap: 20px; }
h3 { font-family: 'Fredoka', sans-serif; font-size: 1.4em; color: var(--neko-choco); margin: 0 0 10px 0; }

.tab-buttons { display: flex; gap: 10px; background: var(--neko-cream); padding: 8px; border-radius: 20px; border: 3px solid var(--border-color);}
.tab-btn { flex: 1; padding: 12px; border: none; border-radius: 14px; font-weight: 800; font-size: 1.1em; cursor: pointer; background: transparent; color: var(--neko-choco); transition: all 0.2s; font-family: 'Fredoka', sans-serif;}
.tab-btn.active { background: var(--neko-choco); color: var(--neko-cream); }

.selector-group { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.slot-btn { width: 50px; height: 50px; border-radius: 15px; border: 3px solid var(--border-color); background: white; font-weight: 900; font-size: 1.2em; cursor: pointer; transition: 0.2s; color: var(--text-dark);}
.slot-btn.active { background: var(--neko-blossom); color: white; transform: scale(1.1); box-shadow: 3px 3px 0px var(--border-color);}

/* Neko Color Grid */
.color-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px;}
.color-btn { width: 100%; padding: 15px; border-radius: 15px; border: 3px solid var(--border-color); cursor: pointer; transition: 0.2s; font-weight: 800; text-align: center; color: white; font-size: 1.1em; text-transform: capitalize; box-sizing: border-box; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);}
.color-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 0px rgba(0,0,0,0.2); }
.color-btn.active { border: 4px solid #fff; outline: 3px solid var(--border-color); transform: scale(1.05); }

.input-box { width: 100%; padding: 15px; border-radius: 15px; border: 3px solid var(--border-color); font-size: 1.2em; font-weight: 900; text-align: center; margin-bottom: 15px; box-sizing: border-box; font-family: 'Nunito', sans-serif; text-transform: uppercase; background: #fff;}

.btn-image-toggle { width: 100%; padding: 12px; border-radius: 12px; border: 3px dashed var(--neko-coffee); background: var(--neko-cream); color: var(--neko-choco); font-size: 1em; font-weight: 800; cursor: pointer; transition: all 0.2s; margin-bottom: 20px; font-family: 'Nunito', sans-serif;}
.btn-image-toggle:hover { background: var(--neko-coffee); color: white; }

/* CHECKOUT AREA */
.checkout-box { background: var(--panel-bg); padding: 25px; border-radius: var(--border-radius); border: 4px solid var(--border-color); box-shadow: 8px 8px 0px var(--border-color); }
.price-display { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.current-price { font-size: 1.5em; font-weight: 900; color: var(--neko-choco); font-family: 'Fredoka', sans-serif;}

.btn-add { width: 100%; padding: 15px; border: 3px solid var(--border-color); border-radius: 15px; background: var(--neko-blossom); color: white; font-size: 1.2em; font-weight: 900; cursor: pointer; transition: 0.2s; margin-bottom: 20px; box-shadow: 4px 4px 0px var(--border-color); font-family: 'Fredoka', sans-serif;}
.btn-add:active { transform: translateY(4px); box-shadow: 0px 0px 0px transparent; }

.cart-area { border-top: 3px dashed var(--neko-coffee); padding-top: 20px; margin-top: 10px; }
.cart-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; padding-right: 5px; }

/* Custom Scrollbar */
.cart-list::-webkit-scrollbar { width: 6px; }
.cart-list::-webkit-scrollbar-track { background: var(--neko-cream); border-radius: 10px; }
.cart-list::-webkit-scrollbar-thumb { background: var(--neko-coffee); border-radius: 10px; }

.cart-item { display: flex; justify-content: space-between; background: #fff; padding: 12px 15px; border-radius: 12px; font-size: 0.9em; font-weight: 800; align-items: center; border: 2px solid var(--neko-cream); gap: 10px;}
.cart-item-format { font-family: monospace; color: var(--neko-choco); font-size: 0.85em; flex: 1; word-break: break-all;}
.btn-remove { background: #ff4757; color: white; border: 2px solid var(--border-color); border-radius: 8px; padding: 5px 10px; font-weight: bold; cursor: pointer; flex-shrink: 0;}

.total-price { font-size: 1.5em; font-weight: 900; text-align: right; margin-bottom: 15px; color: var(--neko-choco); font-family: 'Fredoka', sans-serif;}

.btn-copy { width: 100%; padding: 12px; border: 3px solid var(--neko-coffee); border-radius: 15px; background: transparent; color: var(--neko-choco); font-size: 1.1em; font-weight: 900; cursor: pointer; transition: 0.2s; margin-bottom: 10px; font-family: 'Nunito', sans-serif;}
.btn-wa { width: 100%; padding: 15px; border: 3px solid var(--border-color); border-radius: 15px; background: #2ed573; color: white; font-size: 1.2em; font-weight: 900; cursor: pointer; transition: 0.2s; box-shadow: 4px 4px 0px var(--border-color); }
.btn-shopee { width: 100%; padding: 15px; border: 3px solid var(--border-color); border-radius: 15px; background: #ee4d2d; color: white; font-size: 1.1em; font-weight: 900; cursor: pointer; transition: 0.2s; margin-top: 10px; box-shadow: 4px 4px 0px var(--border-color); }

.btn-wa:active, .btn-shopee:active, .btn-copy:active { transform: translateY(4px); box-shadow: none; }
.hidden { display: none !important; }

/* ==========================================================================
    RESPONSIVE MOBILE TWEAKS
    ========================================================================== */
@media (max-width: 768px) {
    body { padding: 15px 10px; }
    
    /* Navbar Mobile: Posisi diam agar tidak melompat, melipat rapi */
    .navbar-container { position: static; margin-bottom: 20px; top: 0;}
    nav { flex-direction: column; gap: 15px; padding: 15px; border-radius: 20px; }
    .logo img { height: 40px; }
    .nav-links { flex-wrap: wrap; justify-content: center; width: 100%; gap: 8px;}
    .nav-order-btn { font-size: 0.9em; padding: 10px 15px; flex: 1; min-width: 120px;}

    /* Layout Utama Mobile: Berubah menjadi urutan vertikal */
    .lab-container { flex-direction: column; gap: 20px; }
    .left-panel { position: static; width: 100%; }
    .preview-box { height: 350px; } /* Diperpendek agar pas di layar HP */
    
    /* Bob Box Mobile */
    .bob-box { padding: 15px; }
    .bob-face { font-size: 2.5em; padding: 8px; }
    .bob-bubble { font-size: 1em; padding: 10px 15px; }
    
    /* Kontrol Mobile */
    .control-box { padding: 20px; }
    h3 { font-size: 1.2em; }
    .color-grid { grid-template-columns: 1fr 1fr; gap: 10px;}
    .color-btn { padding: 12px; font-size: 1em; }
    
    /* Checkout Mobile */
    .checkout-box { padding: 20px; }
    .current-price, .total-price { font-size: 1.3em; }
    .btn-add, .btn-wa, .btn-shopee, .btn-copy { padding: 12px; font-size: 1.05em;}
}