/* ====================================================
   1. SETTING FONT & DASAR
   ==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Poppins:wght@300;400;500;600&display=swap');

body { 
    margin: 0; 
    overflow: hidden; 
    background-color: #0a0a0a; 
    font-family: 'Poppins', sans-serif; 
    color: #ffffff; 
    -webkit-tap-highlight-color: transparent; 
}

.font-aesthetic { font-family: 'Dancing Script', cursive; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ====================================================
   2. BACKGROUND BATA ANIMASI (LANDING PAGE)
   ==================================================== */
.brick-background { 
    position: absolute; 
    top: -10%; 
    left: -10%; 
    width: 120%; 
    height: 120%; 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    opacity: 0.2; 
    transform: rotate(-5deg); 
    pointer-events: none; 
}

.brick-row { display: flex; gap: 1rem; width: max-content; }
.brick-row:nth-child(even) { margin-left: -100px; }
.brick-row.move-left { animation: scroll-left 50s linear infinite; }
.brick-row.move-right { animation: scroll-right 50s linear infinite; }

@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

.brick-item { width: 200px; height: 140px; border-radius: 12px; overflow: hidden; background-color: #222; }
.brick-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(80%); transition: filter 0.3s ease; }
.brick-item img:hover { filter: none; }

/* ====================================================
   3. GLASSMORPHISM BOX (KOTAK TRANSPARAN MENU)
   ==================================================== */
.glass-box { 
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px); 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); 
    border-radius: 30px; 
    padding: 3rem 4rem; 
    text-align: center; 
    position: relative; 
    z-index: 10; 
}

/* ====================================================
   4. TOMBOL & UI UMUM
   ==================================================== */
.start-btn { 
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05)); 
    border: 1px solid rgba(255,255,255,0.3); 
    backdrop-filter: blur(10px); 
    transition: all 0.3s ease; 
}
.start-btn:hover { 
    background: rgba(255,255,255,0.9); 
    color: #000; 
    transform: translateY(-2px); 
    box-shadow: 0 10px 25px rgba(255,255,255,0.2); 
}
.pb-box { background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; }

/* ====================================================
   5. AR CAMERA TRACKING & CONTAINER (camera.php)
   ==================================================== */
.mindar-ui-overlay { display: none !important; }

/* Mencegah kamera mirror agar tulisan tidak terbalik */
#ar-container video, 
#ar-container .a-canvas {
    transform: scaleX(1) !important; 
}

/* Layer 1: Video kamera asli di posisi paling bawah */
#ar-container video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important; 
}

/* Layer 2: Canvas tempat model 3D muncul, harus mutlak di atas video */
#ar-container .a-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 10 !important; 
    background-color: transparent !important;
    pointer-events: none !important;
}

/* Memastikan sistem AR tidak merusak ukuran layar */
a-scene {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important;
}

/* Layer 3: Elemen UI kamera (tombol, hitung mundur) paling atas */
.camera-ui-layer { z-index: 9999 !important; }

/* ====================================================
   6. 4R PRINT SETTINGS (CETAK FOTO)
   ==================================================== */
@media print {
    @page { size: 4in 6in; margin: 0; }
    body { background: white !important; margin: 0 !important; padding: 0 !important; }
    
    /* Sembunyikan semua kecuali layar hasil */
    body > *:not(#result-screen) { display: none !important; }
    
    #result-screen { 
        display: block !important; 
        position: absolute !important; 
        inset: 0 !important; 
        background: white !important; 
        padding: 0 !important; 
        margin: 0 !important; 
    }
    
    #result-screen h2, #result-screen .flex, #result-screen > button { display: none !important; }
    
    #result-screen > div { 
        max-width: none !important; 
        width: 100% !important; 
        height: 100% !important; 
        margin: 0 !important; 
        box-shadow: none !important; 
        border-radius: 0 !important; 
        aspect-ratio: auto !important; 
    }
    
    #final-image { 
        width: 100% !important; 
        height: 100% !important; 
        object-fit: cover !important; 
    }
}