/* SoftKita responsive corrections — main website only */
*,*::before,*::after{box-sizing:border-box}
html{max-width:100%;overflow-x:clip}
body{max-width:100%;min-width:0;overflow-x:clip}
img,video,iframe,svg{max-width:100%}
img,video{height:auto}
.hero-split-grid>*,.footer-grid>*,.grid-3-col>*,.iron-cards-grid>*,.nav-dropdown-grid>*{min-width:0}
.footer-col-title,.footer-links-list a,.footer-grid p,.footer-grid a{overflow-wrap:anywhere}
@media(max-width:900px){
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
 .footer-bottom-row{flex-direction:column;align-items:flex-start;gap:18px}
 .nav-menu{max-width:100vw;max-height:calc(100dvh - 78px);bottom:auto;overscroll-behavior:contain}
 .nav-dropdown-menu{min-width:0;max-width:100%;overflow-wrap:anywhere}
 .nav-dropdown-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
 .site-footer{padding:40px 20px 24px;margin-top:32px}
 .footer-container{width:100%;max-width:100%}
 .footer-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-bottom:32px}
 .footer-grid>div{width:100%;min-width:0}
 .footer-bottom-row{font-size:.78rem;line-height:1.65;gap:16px}
 .footer-bottom-row>div{min-width:0;max-width:100%;flex-wrap:wrap}
 .footer-bottom-row>div:last-child{display:flex!important;flex-wrap:wrap;gap:10px 18px!important}
 .grid-3-col,.iron-cards-grid{grid-template-columns:minmax(0,1fr)!important}
 .hero-split-grid,.hero-trust-strip{grid-template-columns:minmax(0,1fr)}
 .hero-split-left,.hero-split-right,.hero-actions-row{min-width:0;max-width:100%}
 .hero-actions-row{flex-wrap:wrap;gap:12px}
 .hero-actions-row>a,.hero-actions-row>button{max-width:100%;white-space:normal;text-align:center}
 .trust-badges-row{flex-wrap:wrap}
 .trust-final-slogan{overflow-wrap:anywhere}
 .top-bar-inner{min-width:0;flex-wrap:wrap;gap:8px}
 .nav-container{min-width:0;max-width:100%;gap:10px}
 .nav-menu{padding:18px 20px}
 .nav-dropdown-grid{grid-template-columns:minmax(0,1fr)}
 .nav-dropdown-menu{padding:12px}
 .site-footer .btn-wa-action,.site-footer .btn-shopee{max-width:100%;white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:380px){
 .site-footer{padding-inline:16px}
 .nav-menu{padding-inline:16px}
 .brand-logo-text{font-size:clamp(1rem,5vw,1.3rem)}
}

/* Mobile layout refinement v2: header, CTA, ribbon, floating contact */
@media(max-width:900px){
 .nav-container{height:68px;padding-inline:18px;display:flex;justify-content:space-between;gap:12px}
 .nav-container .brand-logo{min-width:0;flex:0 1 auto}
 .nav-container .mobile-nav-toggle{display:inline-flex!important;flex:0 0 44px;width:44px;height:44px;align-items:center;justify-content:center;margin-left:auto;border:1px solid rgba(255,255,255,.2);border-radius:10px}
 .nav-container>.nav-actions{display:none!important}
 .nav-menu{top:68px;max-height:calc(100dvh - 68px);padding:20px;overflow-y:auto}
 .nav-menu .mobile-action-link{display:flex;align-items:center;justify-content:center;min-height:46px;padding:12px 16px;border-radius:9px;font-weight:800;text-align:center;text-decoration:none;color:#fff}
 .nav-menu .mobile-action-shopee{background:#ee4d2d}
 .nav-menu .mobile-action-contact{background:#e50914}
 .iron-action-ribbon{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:22px 18px;text-align:center}
 .ribbon-item-strong{display:flex;flex-direction:column;justify-content:center;gap:12px;font-size:clamp(1.2rem,4.5vw,1.65rem);line-height:1.35;letter-spacing:.6px;min-width:0}
 .ribbon-item-strong svg{flex-shrink:0}
 .ribbon-badge-red{align-self:center;max-width:100%;padding:10px 14px;font-size:clamp(1rem,4vw,1.2rem);line-height:1.3;white-space:normal}
 .iron-action-ribbon>.btn-iron-red{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:50px;padding:12px 16px;text-align:center;white-space:normal}
}
@media(max-width:640px){
 .hero-actions-row{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:12px}
 .hero-actions-row>a,.hero-actions-row>button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;padding:12px 14px!important;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
 .iron-ribbon-wrapper{padding-inline:16px;margin-block:24px 36px}
 .floating-wa-wrapper{right:16px;bottom:16px}
 .floating-wa-btn{width:54px;height:54px;min-width:54px;min-height:54px;padding:10px;justify-content:center;border-radius:50%}
 .floating-wa-info{display:none!important}
 .floating-wa-icon{width:28px;height:28px}
 .floating-wa-pulse{border-radius:50%}
 .content-section,.iron-hero-section{max-width:100%}
 .hero-mega-headline,.section-title-center{overflow-wrap:break-word}
}
@media(max-width:380px){
 .nav-container{padding-inline:12px}
 .brand-logo{gap:8px}
 .brand-logo-icon{flex-shrink:0}
 .brand-logo-sub{font-size:.6rem}
}
@media(min-width:901px){.mobile-only-nav-action{display:none!important}}

/* Mobile navigation: independent slide-in drawer */
@media(max-width:900px){
 body.softkita-drawer-open{overflow:hidden!important}
 .mobile-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.74);z-index:9997;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s}
 body.softkita-drawer-open .mobile-drawer-overlay{opacity:1;visibility:visible;pointer-events:auto}
 .nav-menu{position:fixed!important;inset:0 0 0 auto!important;top:0!important;bottom:0!important;left:auto!important;right:0!important;width:min(88vw,390px)!important;max-width:390px!important;height:100dvh!important;max-height:100dvh!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:thin;scrollbar-color:#e50920 #19191f;padding:18px 18px 28px!important;margin:0!important;background:#141419!important;border-left:3px solid #e50920!important;box-shadow:-16px 0 55px rgba(0,0,0,.65)!important;z-index:9998!important;transform:translateX(105%)!important;opacity:1!important;visibility:hidden!important;pointer-events:none!important;transition:transform .27s ease,visibility .27s!important}
 .nav-menu.open{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important}
 .nav-menu .mobile-drawer-heading{display:flex!important;align-items:center;justify-content:space-between;min-height:54px;margin:0 0 14px!important;padding:0 2px 12px!important;border-bottom:2px solid #e50920;color:#fff;font-weight:800;letter-spacing:1px}
 #mobileDrawerClose{width:42px;height:42px;border:1px solid #44444d;border-radius:10px;background:#23232b;color:white;font-size:30px;line-height:1;cursor:pointer}
 .nav-menu>li:not(.mobile-drawer-heading){width:100%!important;min-width:0!important;flex:none!important}
 .nav-menu>li>.nav-link{display:flex!important;align-items:center!important;width:100%!important;min-height:48px!important;padding:13px 12px!important;border-bottom:1px solid #303039!important;white-space:normal!important}
 .nav-menu .nav-item-dropdown{position:relative!important}
 .nav-menu .nav-dropdown-menu{position:static!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;min-width:0!important;max-width:100%!important;max-height:none!important;box-shadow:none!important;margin:6px 0 12px!important;overflow:visible!important}
 .nav-menu .nav-dropdown-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
 .nav-menu .nav-dropdown-item{min-width:0!important;overflow-wrap:anywhere}
 .nav-menu .mobile-only-nav-action{margin-top:12px!important}
 .nav-menu .mobile-action-link{width:100%!important}
}
@media(prefers-reduced-motion:reduce){.nav-menu,.mobile-drawer-overlay{transition:none!important}}

/* Drawer V3: desktop elements must never participate in header flex layout. */
.mobile-drawer-overlay{display:none;}
.nav-menu>.mobile-drawer-heading{display:none!important;}
@media(min-width:901px){
 .nav-container>.mobile-nav-toggle{display:none!important;}
 .nav-container>.mobile-drawer-overlay{display:none!important;}
 .nav-menu>.mobile-drawer-heading{display:none!important;}
 .nav-menu>.mobile-only-nav-action{display:none!important;}
 .nav-menu{transform:none!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}
}
@media(max-width:900px){
 .mobile-drawer-overlay{display:block;}
 .nav-menu{width:95vw!important;max-width:95vw!important;}
 .nav-menu>.mobile-drawer-heading{display:flex!important;}
}

/* Recovery: native button must inherit the existing navigation design. */
button.nav-dropdown-toggle { appearance:none; -webkit-appearance:none; background:transparent; border:0; border-radius:0; font-family:inherit; cursor:pointer; text-align:left; }
#klien-kami { scroll-margin-top:110px; }

/* Mobile recovery: stack contact columns and let hero media use its full track. */
@media(max-width:900px){
 .grid-2-col { grid-template-columns:minmax(0,1fr); }
 .grid-2-col>* { min-width:0; }
 .contact-layout { gap:22px; }
 .contact-content .dark-iron-card { min-width:0; padding:24px!important; }
 .contact-content h3 { font-size:1.85rem!important; line-height:1.25; }
 .contact-content h4 { font-size:1.6rem!important; line-height:1.3; }
 .contact-content input,.contact-content select,.contact-content textarea { min-width:0; max-width:100%; font-size:16px!important; }
 .contact-content .btn-wa-action,.contact-content .btn-shopee { width:100%; white-space:normal; overflow-wrap:anywhere; text-align:center; min-height:48px; }
 .contact-content a { overflow-wrap:anywhere; }
 .hero-split-right { width:100%; max-width:100%; margin-inline:0; }
 .laptop-cover-wrapper { width:100%; max-width:100%; }
 .nav-menu { height:100vh!important; height:100dvh!important; touch-action:pan-y; -webkit-overflow-scrolling:touch; padding-top:max(18px,env(safe-area-inset-top))!important; padding-bottom:max(28px,env(safe-area-inset-bottom))!important; }
 .nav-menu .mobile-drawer-heading { flex-shrink:0; }
}
@media(max-width:640px){
 .contact-content { width:100%; padding-inline:16px; }
 .contact-content .dark-iron-card { padding:20px!important; }
 .contact-content .contact-field-row { grid-template-columns:minmax(0,1fr)!important; gap:18px!important; }
 .contact-field-row>* { min-width:0; }
 .hero-split-grid { width:100%; grid-template-columns:minmax(0,1fr); }
 .hero-trust-strip { grid-template-columns:minmax(0,1fr); }
 .hero-device-floating-badge { gap:8px; padding:8px; font-size:.65rem; flex-wrap:wrap; }
 .hero-device-floating-badge-left { min-width:0; flex:1 1 160px; }
 .hero-device-floating-badge-left .live-pulse { flex-shrink:0; }
 .iron-ribbon-wrapper { width:100%; max-width:100%; }
}