/* KabarLagi 3.4.2 — definitive mobile drawer + comfortable mobile spacing */

/* --------------------------------------------------------------------------
   1. Drawer: neutralise the old V6 off-canvas transform on the OUTER node.
   -------------------------------------------------------------------------- */
#resp-menu[hidden]{display:none!important}

@media (max-width:1023px){
  html.kl-drawer-is-open,
  html.kl-drawer-is-open body,
  body.kl-drawer-open{overflow:hidden!important;overscroll-behavior:none!important}

  body .menu-button.menu-trigger,
  body a.menu-button.menu-trigger,
  body .site-header .menu-button.menu-trigger,
  body .nav .menu-button.menu-trigger,
  body .nav-1 .menu-button.menu-trigger,
  body .nav-2 .menu-button.menu-trigger{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--kl-border,rgba(15,23,42,.10))!important;
    border-radius:13px!important;
    background:var(--kl-surface,#fff)!important;
    color:var(--kl-text,#111827)!important;
    box-shadow:0 3px 12px rgba(15,23,42,.06)!important;
    cursor:pointer!important;
  }

  /* Critical fix: V6 placed transform:translateX(-100%) on #resp-menu itself. */
  #resp-menu.kl-drawer:not([hidden]),
  #resp-menu.kl-v6-app-drawer:not([hidden]){
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:2147483600!important;
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
    transition:none!important;
    background:transparent!important;
    color:var(--kl-text,#111827)!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  #resp-menu .kl-drawer__backdrop{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    background:rgba(2,6,23,.54)!important;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }

  #resp-menu .kl-drawer__surface{
    position:relative!important;
    z-index:1!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    width:min(88vw,400px)!important;
    max-width:calc(100vw - 24px)!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    overflow:hidden!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    background:var(--kl-surface,#fff)!important;
    color:var(--kl-text,#111827)!important;
    border:0!important;
    border-right:1px solid var(--kl-border,rgba(15,23,42,.10))!important;
    border-radius:0 22px 22px 0!important;
    box-shadow:28px 0 70px rgba(2,6,23,.24)!important;
  }

  #resp-menu .kl-drawer__header{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    min-height:72px!important;
    padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px!important;
    border-bottom:1px solid var(--kl-border,rgba(15,23,42,.10))!important;
    background:var(--kl-surface,#fff)!important;
  }

  #resp-menu .kl-drawer__brand{
    min-width:0!important;
    overflow:hidden!important;
    color:var(--kl-text,#111827)!important;
    font-size:18px!important;
    font-weight:900!important;
    line-height:1.2!important;
    letter-spacing:-.02em!important;
    text-decoration:none!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  #resp-menu .close-menu,
  #resp-menu .kl-icon-button.close-menu{
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--kl-border,rgba(15,23,42,.10))!important;
    border-radius:13px!important;
    background:var(--kl-surface-2,#f1f5f9)!important;
    color:var(--kl-text,#111827)!important;
    box-shadow:none!important;
  }

  #resp-menu .kl-drawer__body{
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:18px 16px 22px!important;
    background:var(--kl-surface,#fff)!important;
  }

  #resp-menu .kl-drawer__description{
    margin:0 0 16px!important;
    color:var(--kl-muted,#64748b)!important;
    font-size:13px!important;
    line-height:1.65!important;
  }

  #resp-menu .kl-drawer__primary,
  #resp-menu .kl-drawer-menu,
  #resp-menu .kl-drawer-menu ul{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
  }

  #resp-menu .kl-drawer-menu > li{
    position:relative!important;
    margin:0!important;
    padding:0!important;
    border-bottom:1px solid var(--kl-border,rgba(15,23,42,.08))!important;
  }

  #resp-menu .kl-drawer-menu li > a{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    min-height:50px!important;
    margin:0!important;
    padding:12px 48px 12px 2px!important;
    color:var(--kl-text,#111827)!important;
    font-size:15px!important;
    font-weight:750!important;
    line-height:1.35!important;
    text-decoration:none!important;
    overflow-wrap:anywhere!important;
  }

  #resp-menu .kl-drawer-menu li.current-menu-item > a,
  #resp-menu .kl-drawer-menu li.current_page_item > a{
    color:var(--kl-action,var(--kl-brand,#e6480f))!important;
  }

  #resp-menu .kl-drawer-submenu-toggle{
    position:absolute!important;
    top:5px!important;
    right:0!important;
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:var(--kl-muted,#64748b)!important;
    font:inherit!important;
    cursor:pointer!important;
  }

  #resp-menu .kl-drawer-submenu-toggle span{
    display:block!important;
    font-size:20px!important;
    line-height:1!important;
    transition:transform .18s ease!important;
  }
  #resp-menu .kl-drawer-submenu-toggle[aria-expanded="true"] span{transform:rotate(180deg)!important}

  #resp-menu .kl-drawer-menu .sub-menu,
  #resp-menu .kl-drawer-menu .children{
    margin:0 0 8px!important;
    padding:4px 0 5px 14px!important;
    border-left:2px solid var(--kl-border,rgba(15,23,42,.10))!important;
  }
  #resp-menu .kl-drawer-menu .sub-menu[hidden],
  #resp-menu .kl-drawer-menu .children[hidden]{display:none!important}
  #resp-menu .kl-drawer-menu .sub-menu li > a,
  #resp-menu .kl-drawer-menu .children li > a{min-height:42px!important;padding-block:8px!important;font-size:14px!important;font-weight:650!important}

  #resp-menu .kl-network-menu{margin-top:22px!important;padding-top:18px!important;border-top:1px solid var(--kl-border,rgba(15,23,42,.10))!important}
  #resp-menu .kl-network-menu__list{display:grid!important;gap:5px!important;margin:8px 0 0!important;padding:0!important}
  #resp-menu .kl-network-menu__list a{min-height:42px!important;padding:8px 6px!important;border-radius:10px!important}

  #resp-menu .kl-drawer__footer{
    display:grid!important;
    gap:12px!important;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid var(--kl-border,rgba(15,23,42,.10))!important;
    background:var(--kl-surface,#fff)!important;
  }

  #resp-menu .kl-drawer__socials{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  #resp-menu .kl-drawer__socials a{
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    border:1px solid var(--kl-border,rgba(15,23,42,.10))!important;
    border-radius:12px!important;
    background:var(--kl-surface-2,#f1f5f9)!important;
    color:var(--kl-text,#111827)!important;
  }
  #resp-menu .kl-drawer__socials svg{width:18px!important;height:18px!important}

  #resp-menu .kl-drawer__mode{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    width:100%!important;
    min-height:44px!important;
    padding:9px 14px!important;
    border:1px solid var(--kl-border,rgba(15,23,42,.10))!important;
    border-radius:12px!important;
    background:var(--kl-surface-2,#f1f5f9)!important;
    color:var(--kl-text,#111827)!important;
    font-weight:750!important;
  }
}

/* --------------------------------------------------------------------------
   2. Mobile rhythm: one predictable outer gutter, no nested double-shrinking.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  :root{
    --kl-layout-gutter-mobile:var(--kl-mobile-safe-gutter,18px)!important;
    --kl-mobile-gutter:var(--kl-mobile-safe-gutter,18px)!important;
  }

  html,body,#page{max-width:100%!important;overflow-x:hidden!important}

  body.kl-modern-ui .container,
  body.kl-v6-active .container,
  body.kl-v6-active #main > .container,
  body.kl-modern-ui .kl-v5-footer-inner,
  body.kl-v6-active .kl-v5-footer .container,
  body.kl-modern-ui .kl-home-magazine-v6{
    width:calc(100% - (var(--kl-mobile-safe-gutter,18px) * 2))!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Builder sections already live inside the bounded landing wrapper. */
  body.kl-modern-ui :where(.kl-v6-section,.kl-v6-story-section,.kl-v6-category-tiles){
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  body.kl-modern-ui .main-row,
  body.kl-modern-ui :where(#primary,#content,#container,#sidebar,#sidebar-b,.primary-row){
    min-width:0!important;
    max-width:100%!important;
  }

  /* The outer container now supplies the safe gutter; remove the legacy second inset. */
  body.kl-modern-ui.single :where(.entry-header,.article-body,.entry-content.article-body){
    max-width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  body.kl-modern-ui :where(.widget,.kl-news-card,.kl33-author-card,.kl33-location-card,.kl34-location-card){
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow-wrap:anywhere!important;
    box-sizing:border-box!important;
  }

  body.kl-modern-ui #sidebar,
  body.kl-modern-ui #sidebar-b{margin-top:26px!important}
  body.kl-modern-ui #sidebar .widget,
  body.kl-modern-ui #sidebar-b .widget{margin-bottom:18px!important}

  body.kl-modern-ui :where(input[type="text"],input[type="email"],input[type="search"],input[type="url"],input[type="password"],select,textarea){
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body.kl-modern-ui :where(img,video,iframe,embed,object,table,pre){max-width:100%!important}
  body.kl-modern-ui table{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  body.kl-modern-ui pre{overflow-x:auto!important}

  body.kl-modern-ui .site-header .container.has-menu-trigger{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:58px!important;
  }

  body.kl-modern-ui .single-post-title{
    margin-bottom:14px!important;
    font-size:clamp(28px,8.2vw,42px)!important;
    line-height:1.1!important;
    letter-spacing:-.025em!important;
  }

  body.kl-modern-ui .entry-sub-title{margin-bottom:14px!important}
  body.kl-modern-ui .entry-content.article-body{font-size:16px!important;line-height:1.75!important}
  body.kl-modern-ui .entry-content.article-body > *{max-width:100%!important}
  body.kl-modern-ui .entry-content.article-body :where(p,ul,ol,blockquote,figure,table,pre){margin-bottom:1.25em}
}

@media (max-width:420px){
  #resp-menu .kl-drawer__surface{width:min(91vw,370px)!important;max-width:calc(100vw - 12px)!important;border-radius:0 18px 18px 0!important}
  #resp-menu .kl-drawer__body{padding:16px 14px 20px!important}
  #resp-menu .kl-drawer__header{padding-left:14px!important;padding-right:14px!important}
  #resp-menu .kl-drawer__footer{padding-left:14px!important;padding-right:14px!important}
}

@media (prefers-reduced-motion:reduce){
  #resp-menu *,#resp-menu *::before,#resp-menu *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}

@media print{#resp-menu,.menu-button.menu-trigger{display:none!important}}