/* Merahmerona - perbaikan layout desktop (2026-10-12)
   Scope: desktop. Tidak mengubah file CSS atau pengaturan lain. */
@media screen and (min-width: 1001px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .wrapper { min-width: 0; }

  /* Baris 1: logo, navigasi dan promosi. Baris 2: form login. */
  .wrapper > .header {
    height: auto !important;
    min-height: 158px;
    width: 100%;
    overflow: visible;
  }
  .header > .header-content {
    width: min(1220px, calc(100% - 40px)) !important;
    max-width: 1220px;
    min-height: 158px;
    padding: 5px 0 12px;
    height: auto;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    grid-template-rows: 76px auto;
    grid-template-areas:
      "logo menu promosi"
      "login login login";
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
  }
  .header .logo { min-width: 0; overflow: hidden; }
  .header .logoimg { width: 210px; height: 62px; object-fit: contain; object-position: left center; }
  .header .menu {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
  }
  .header .menu > span.desktop-only { display: none !important; }
  .header .menu .menu-item {
    flex: 0 0 auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: auto !important;
    min-width: 55px;
    height: 44px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 12px;
  }
  .header .menu .menu-item label,
  .header .menu .menu-item a { font-size: 12px; white-space: nowrap; cursor: pointer; }
  .header .promosi { justify-self: end; padding-left: 2px; }
  .header .promosi .btn-promosi { white-space: nowrap; font-size: 14px !important; }

  .header .login {
    grid-area: login;
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
  }
  .header .login > .desktop-only { width: 100%; }
  .header .login > .desktop-only > .login-form {
    width: 100% !important;
    max-width: 1220px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-height: 54px;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 12px;
    background: linear-gradient(120deg, #260609, #510b16);
  }
  .header .login > .desktop-only > .login-form > .login-field {
    width: 174px !important;
    flex: 0 0 174px;
    height: 38px;
    margin: 0 !important;
    min-width: 0;
  }
  .header .login > .desktop-only .input-group-text.prepend {
    width: 39px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    flex: 0 0 39px;
    border-radius: 8px 0 0 8px !important;
  }
  .header .login > .desktop-only .login-input-field {
    width: 100%;
    min-width: 0;
    height: 38px !important;
    font-size: 13px;
    padding: 0 8px;
    border-radius: 0 8px 8px 0 !important;
  }
  .header .login > .desktop-only .verifikasiform.w-100 {
    width: auto !important;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .header .login > .desktop-only #verifikasi {
    width: 100px;
    height: 38px;
    display: block;
    flex: 0 0 100px;
    overflow: hidden;
    border-radius: 8px;
  }
  .header .login > .desktop-only #verifikasi img {
    width: 100%; height: 38px !important; object-fit: contain;
  }
  .header .login > .desktop-only .verifikasiform .login-field {
    width: 138px !important;
    height: 38px;
    flex: 0 0 138px;
    margin: 0 !important;
  }
  .header .login > .desktop-only .login-form > button {
    height: 38px !important;
    flex: 0 0 auto;
    min-width: 95px;
    padding: 0 13px !important;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
  }
  /* Kotak unduh dengan href kosong tidak menjadi grid item desktop. */
  .header .header-download-apk { display: none !important; }

  /* Banner mengambil tabel slide, tidak lagi path gambar demo yang hilang. */
  .contentdata .desktop-slider-wrap {
    width: min(1220px, calc(100% - 40px)) !important;
    max-width: 1220px;
    margin: 14px auto 18px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,212,92,.35);
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
  }
  .desktop-slider-wrap #desktop-slider,
  .desktop-slider-wrap .carousel-inner,
  .desktop-slider-wrap .carousel-item { width: 100%; }
  .desktop-slider-wrap .desktop-slide-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 286;
    object-fit: cover;
  }
  .desktop-slider-fallback {
    width: 100%;
    aspect-ratio: 1280 / 286;
    min-height: 180px;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at 50% 30%, #8b0f1f, #39070c 55%, #170304);
    color: #ffd45c;
  }
  .desktop-slider-fallback-text {
    font-weight: 900;
    font-size: clamp(26px, 4vw, 56px);
    letter-spacing: .04em;
    text-align: center;
    text-shadow: 0 3px 1px #1d0003, 0 0 18px rgba(255,212,92,.35);
  }
}
@media screen and (min-width: 1001px) and (max-width: 1279px) {
  .header > .header-content { grid-template-columns: 175px minmax(0, 1fr) auto; gap: 6px; }
  .header .logoimg { width: 168px; }
  .header .menu { gap: 2px; }
  .header .menu .menu-item { padding: 6px 7px; font-size: 11px; min-width: 47px; }
  .header .menu .menu-item label, .header .menu .menu-item a { font-size: 11px; }
  .header .login > .desktop-only > .login-form { gap: 6px; }
}