/* =================================================
   Mysosmed - Custom CSS (Tambahan)
   Tailwind CSS di-load dari public/css/tailwind.css
   ================================================= */

body {
    overflow-x: hidden;
    overscroll-behavior-y: none;
}

/* Support safe area untuk notch iOS/Android */
main, nav, header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Desktop Mode - Force Mobile View */
@media (min-width: 401px) {
    body {
        background: #f8f9ff;
        background-image: 
            radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
            radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.08) 0px, transparent 50%);
    }
    
    .desktop-wrapper {
        max-width: 430px;
        width: 100%;
        margin: 0 auto;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
        min-height: 100vh;
        position: relative;
        background: white;
        padding-bottom: 24px;
    }
    
    .desktop-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 20px;
        background: #f8f9ff;
        border-radius: 0 0 16px 16px;
        z-index: 100;
    }
}