/* Smartphones (portrait & landscape) ----------- */
  
  @media only screen and (max-device-width:823px) and (min-device-width:320px) {
    .header-top-right,
    .promo img {
      width:100%;
    }
    .bottom:first-child {
      flex:auto;
      height:auto;
      width:100%;
      margin-bottom:15px;
    }
    .bottom {
      width:30%;
      margin:0;
      flex:none;
      display:block;
    }
    .bottom img {
      position:relative;
      width:100%;
      left:0;
      transform:inherit;
    }
    .logo {
      width:85%;
      margin-left:auto;
    }
    .wrapper {
      width:90%;
    }
    .nav a {
      flex:none;
      font-size:17pt;
      width:100%;
      padding:10px 0;
      border-right:none;
      border-bottom:1px solid #565656;
      color:#ff0000;
    }
    .navbar a {
      background-position:left;
      text-align:left;
      justify-content:flex-start;
      padding:10px 0 10px 40px;
    }
    .nav {
      height:auto;
      background:none;
      box-shadow:none;
    }
    form.flex.form {
      flex-wrap:wrap;
      width:100%;
    }
    .login,
    .daftar {
      width:48%;
    }
    .promo,
    .username,
    .password {
      width:100%;
    }
    .login,
    .daftar,
    .promo,
    .username,
    .password {
      border-radius:5px;
      margin:5px 0;
    }
    /*responsive nav*/.toggle,
    label.lbl-toggle {
      position:relative;
      display:block;
      width:0;
    }
    input[type='checkbox'] {
      display:none;
    }
    .wrap-collabsible {
      margin:0;
      position:absolute;
      z-index:99;
      top:0;
      left:0;
      right:0;
      margin-left:auto;
      margin-right:auto;
      height:0;
    }
    .lbl-toggle {
      display:block;
      font-weight:bold;
      font-size:18px;
      text-transform:uppercase;
      text-align:left;
      padding:15px 10px;
      margin-bottom:20px;
      cursor:pointer;
      transition:all 0.25s ease-out;
    }
    .lbl-toggle:hover {
      color:#ffffff;
    }
    .lbl-toggle::after {
      color:#ff0000;
      position:absolute;
      bottom:auto;
      top:auto;
      font-size:30pt;
      margin-top:0;
      margin-bottom:0;
      left:15px;
      content:"\f0c9";
      font-family:"Font Awesome 5 Free";
      transform:translateY(-2px);
      transition:transform .2s ease-out;
    }
    .toggle:checked+.lbl-toggle::after {
      content:"\f057";
      transform:rotate(90deg) translateX(-3px);
    }
    .collapsible-content {
      max-height:0;
      overflow:hidden;
      transition:max-height .25s ease-in-out;
      width:90%;
      margin:0 auto;
    }
    .toggle:checked + .lbl-toggle + .collapsible-content {
      width:90%;
      margin:0 auto;
      max-height:750px;
      box-shadow:#000 0 0 15px;
      border-radius:10px;
      border:1px solid #444444;
    }
    .collapsible-content .content-inner {
      background:#000000f5;
      padding:10px 20px;
    }
    .contact a {
      padding:10px 0 10px 85px;
      width:100%;
      flex:none;
      font-size:19pt;
    }
    .contact h4 {
      font-size:21pt;
    }
    .contact i {
      font-size:50pt;
    }
    .image-slide img {
      width:100%;
    }
    .labels {
      bottom:0;
    }
    .bottom h3 {
      width:100%;
      display:block;
      padding:5px 0;
      font-size:15pt;
    }
    .bottom a {
      width:100%;
      display:block;
    }
    .header {
      position:relative;
    }
    input#CaptchaInput {
      margin:0;
    }
    div#CaptchaDiv {
      margin-left:3%;
    }
    .form-item.captcha.flex {
      width:100%;
    }
    marquee,
    a.livechat {
      width:90%;
      margin:0 auto;
    }
    a.livechat {
      order:1;
    }
    marquee {
      order:2;
      padding:10px 0;
    }
  }
/* ===== SARANA365 mobile navigation repair ===== */
@media only screen and (max-width:823px){
  /* Keep existing ASF badge untouched. The hamburger remains clickable above the header. */
  .wrap-collabsible{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:0 !important;
    margin:0 !important;
    z-index:1000000 !important;
    pointer-events:none;
  }

  #collapsible.toggle{
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  label.lbl-toggle{
    pointer-events:auto !important;
    position:absolute !important;
    top:4px !important;
    left:18px !important;
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
    border-radius:2px !important;
    background:#1a1a1a !important;
    border:1px solid rgba(255,255,255,.05) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.35) !important;
    cursor:pointer !important;
    z-index:1000002 !important;
  }

  /* Hamburger is drawn with CSS, so it no longer depends on Font Awesome. */
  label.lbl-toggle::before,
  label.lbl-toggle::after{
    content:"" !important;
    position:absolute !important;
    left:13px !important;
    width:30px !important;
    height:4px !important;
    border-radius:1px !important;
    background:#ff7a00 !important;
    transform:none !important;
    transition:transform .2s ease, top .2s ease, opacity .2s ease !important;
  }

  label.lbl-toggle::before{
    top:16px !important;
    box-shadow:0 10px 0 #ff7a00, 0 20px 0 #ff7a00 !important;
  }

  label.lbl-toggle::after{
    display:none !important;
  }

  #collapsible:checked + label.lbl-toggle::before{
    top:26px !important;
    box-shadow:none !important;
    transform:rotate(45deg) !important;
  }

  #collapsible:checked + label.lbl-toggle::after{
    display:block !important;
    top:26px !important;
    transform:rotate(-45deg) !important;
  }

  .collapsible-content{
    pointer-events:auto !important;
    position:absolute !important;
    top:64px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-height:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    transition:max-height .28s ease, opacity .2s ease, visibility .2s ease !important;
    z-index:1000001 !important;
  }

  #collapsible:checked + label.lbl-toggle + .collapsible-content{
    max-height:78vh !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow-y:auto !important;
    border:1px solid #c77b00 !important;
    border-radius:5px !important;
    background:linear-gradient(180deg,#170b03 0%,#070302 100%) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.62), 0 0 16px rgba(255,137,0,.15) !important;
  }

  .collapsible-content .content-inner{
    padding:5px !important;
    background:transparent !important;
  }

  .collapsible-content .nav.header-menu-scroll-host{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .header-menu-scroll-host .header-menu-scroll__viewport{
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
  }

  .header-menu-scroll-host #main-menu,
  .header-menu-scroll-host .header-menu-scroll__list{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
  }

  #main-menu > .menu-item{
    display:block !important;
    width:100% !important;
    flex:0 0 auto !important;
    border-bottom:1px solid rgba(255,172,35,.22) !important;
  }

  #main-menu > .menu-item:last-child{
    border-bottom:0 !important;
  }

  #main-menu > .menu-item > a{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:42px !important;
    padding:9px 12px 9px 16px !important;
    margin:0 !important;
    text-align:left !important;
    justify-content:flex-start !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    color:#ffd24a !important;
    background:linear-gradient(90deg,rgba(255,111,0,.12),transparent 68%) !important;
    border:0 !important;
    text-decoration:none !important;
  }

  #main-menu > .menu-item > a:hover{
    color:#fff !important;
    background:linear-gradient(90deg,rgba(255,133,0,.28),rgba(255,183,0,.06)) !important;
  }

  /* Do not let desktop submenu flyouts cover the whole phone screen. */
  #main-menu .sub-menu{
    display:none !important;
  }

  #main-menu > .menu-item > a:hover > .sub-menu,
  #main-menu > .menu-item:hover > a > .sub-menu{
    display:none !important;
  }

  .header-menu-scroll__button{
    display:none !important;
  }
}


/* ===== Mobile header v4: logo own row, form below, menu right ===== */
@media only screen and (max-width:823px){

  /* Header becomes two clean rows:
     1) logo area
     2) login form area */
  .header-top{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    min-height:0 !important;
    padding:8px 14px 10px !important;
    box-sizing:border-box !important;
    background:#111 !important;
  }

  /* Logo gets its own dedicated row and stays centered. */
  .header-top .logo{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:min(78%,420px) !important;
    max-width:420px !important;
    margin:2px auto 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:10 !important;
  }

  .header-top .logo a{
    display:block !important;
    width:100% !important;
  }

  .header-top .logo img{
    width:100% !important;
    height:auto !important;
    display:block !important;
  }

  /* Everything from username/password downward sits below the logo. */
  .header-top-right{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    z-index:5 !important;
  }

  .header-top-right form.flex.form{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:0 !important;
    margin:0 !important;
  }

  .header-top-right .username,
  .header-top-right .password{
    width:100% !important;
    margin:3px 0 !important;
  }

  .header-top-right .captcha{
    width:100% !important;
    margin:3px 0 !important;
  }

  .header-top-right .login,
  .header-top-right .daftar{
    width:48% !important;
    margin:3px 0 !important;
  }

  .header-top-right .daftar{
    margin-left:auto !important;
  }

  /* Keep the existing collapse system but anchor hamburger on the right. */
  .wrap-collabsible{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:0 !important;
    margin:0 !important;
    z-index:1000000 !important;
    pointer-events:none !important;
  }

  label.lbl-toggle{
    pointer-events:auto !important;
    position:fixed !important;
    top:16px !important;
    right:12px !important;
    left:auto !important;
    width:46px !important;
    height:42px !important;
    min-width:46px !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    cursor:pointer !important;
    z-index:1000002 !important;
  }

  label.lbl-toggle::before,
  label.lbl-toggle::after{
    content:"" !important;
    position:absolute !important;
    left:7px !important;
    width:31px !important;
    height:4px !important;
    background:#ff7a00 !important;
    border-radius:2px !important;
    box-shadow:none !important;
    transition:transform .2s ease, top .2s ease !important;
  }

  label.lbl-toggle::before{
    top:7px !important;
    box-shadow:0 10px 0 #ff7a00, 0 20px 0 #ff7a00 !important;
  }

  label.lbl-toggle::after{
    display:none !important;
  }

  #collapsible:checked + label.lbl-toggle::before{
    top:17px !important;
    box-shadow:none !important;
    transform:rotate(45deg) !important;
  }

  #collapsible:checked + label.lbl-toggle::after{
    display:block !important;
    top:17px !important;
    transform:rotate(-45deg) !important;
  }
}

/* ===== Mobile polish v5: menu spacing + unified buttons ===== */
@media only screen and (max-width:823px){

  /* Move hamburger slightly inward from the right edge. */
  label.lbl-toggle{
    right:22px !important;
  }

  /* Login and register use the same rounded rectangular shape. */
  .header-top-right .login,
  .header-top-right .daftar,
  #btnSignIn,
  #btnReg{
    border-radius:5px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Give Livechat breathing room before the banner below. */
  a.livechat{
    display:block !important;
    width:90% !important;
    margin:10px auto 12px !important;
    border-radius:5px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
}