/* Latar Belakang Luar (Desktop) */
body { 
    background-color: #0f172a; /* Slate 900 untuk tema dark desktop yang elegan */
    display: flex; 
    justify-content: center; 
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Tampilan Utama di HP (Layar Kecil) */
.mobile-frame { 
    width: 100%; 
    max-width: 100%; /* Penuh 100% di HP asli */
    height: 100vh; /* WAJIB height: 100vh agar area scroll hanya terjadi DI DALAM frame HP */
    background-color: #f9fafb; 
    position: relative; 
    overflow: hidden; 
    box-shadow: none;
    transition: all 0.3s ease;
}

/* Tampilan Responsif Simulasi Bingkai HP di Laptop / Tablet (Layar >= 768px) */
@media (min-width: 768px) {
    body {
        padding: 1.5rem;
    }

    .mobile-frame { 
        max-width: 414px; 
        height: 844px; /* Tinggi proporsional HP modern */
        max-height: 90vh;
        border-radius: 32px; /* Sudut melengkung khas smartphone */
        border: 8px solid #1e293b; /* Bingkai luar tebal khas HP */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); 
    }
}

.font-arabic {
    font-family: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
}

/* Sembunyikan Scrollbar */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* STYLING KHUSUS CETAK PRINTER */
@media print {
    body {
        background-color: #ffffff !important;
        padding: 0 !important;
    }

    /* Hilangkan Bingkai HP Saat Mencetak */
    .mobile-frame {
        max-width: 100% !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    body * {
        visibility: hidden !important;
    }

    #ktaPrintArea, #ktaPrintArea * {
        visibility: visible !important;
    }

    #ktaPrintArea {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        background: #ffffff !important;
    }

    .kta-card {
        box-shadow: none !important;
        border: 1px solid #9ca3af !important;
        page-break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* 1. Kunci posisi Bottom Navigation di bagian bawah layar */
.bottom-nav, nav.fixed-bottom, footer.bottom-navigation {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 500px; /* Batasi lebar jika dibuka di layar lebar/tablet */
    margin: 0 auto;
    z-index: 9999 !important; /* Pastikan selalu berada di lapisan paling atas */
    background-color: #ffffff;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08); /* Efek bayangan melayang */
}