/* === WINNERVM-HEADER — hanya header store Winner VM (gid 38) ======================
   Pagar TIGA lapis:
     html.wv-cart                      -> orderform winnervps_cart
                                          (dipasang templates/winnervps2026/header.tpl:2)
     #order-standard_cart.wv-winnervm  -> gid 38 (products.tpl:3)
     .header-lined                     -> kotak header saja
   NOL selektor global: nol h1 telanjang, nol .page-header, nol body, nol .products.
   Navbar, tab kategori, kartu harga, View Cart, footer, dan alur order nol tersentuh.
   templates/winnervps2026/css/custom.css NOL diubah.

   CATATAN NILAI: angka crop, lebar kolom, dan opasitas overlay di bawah adalah
   TITIK AWAL yang diturunkan dari rasio gambar dan perkiraan kontras - BELUM
   diverifikasi secara visual di halaman nyata. Setel setelah dilihat.
   ================================================================================= */

html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined {
  position: relative;
  overflow: hidden;
  text-align: left;                   /* desktop: rata kiri, mengikuti ruang kosong gambar */
  padding: 64px 32px 56px;
  margin-bottom: 18px;                /* SAMA dengan nilai yang berlaku sebelumnya, supaya
                                         pergeseran ke bawah murni dari tinggi header */
  border-radius: 14px;
  /* FALLBACK: bila gambar gagal dimuat (404, MIME salah, peramban tanpa WebP),
     warna ini yang tampil - teks putih tetap terbaca di atasnya. */
  background-color: #17122E;
  background-image: url(../../../../assets/img/kb/webp/serverawan.webp);
  background-size: cover;
  background-position: center 45%;    /* desktop: pemotongan vertikal, pita badan server */
  background-repeat: no-repeat;
  /* NOL height / min-height: tinggi digerakkan isi (padding + judul + deskripsi yang
     membungkus), jadi nol asumsi angka tinggi di layar mana pun. */
}

/* Overlay gradasi gelap DARI KIRI, menipis ke kanan -> ilustrasi server tetap terlihat.
   Plateau gelap bertahan melewati kolom teks 46%, baru jatuh sebelum rak server. */
html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: linear-gradient(90deg,
      rgba(8,5,20,.90) 0%,
      rgba(8,5,20,.82) 46%,
      rgba(8,5,20,.40) 64%,
      rgba(8,5,20,.12) 88%,
      rgba(8,5,20,.06) 100%);
  pointer-events: none;
}
html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined > * {
  position: relative;
  z-index: 1;
}

/* Kolom teks dibatasi supaya berhenti sebelum ilustrasi server (mulai ~52% lebar). */
html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined h1,
html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined .wv-vm-sub,
html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined p:not(.wv-vm-sub) {
  max-width: 46%;
  margin-left: 0;
  margin-right: auto;
}

/* JUDUL — !important WAJIB di sini, lihat catatan cascade di akhir berkas. */
html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined h1 {
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: 12px;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}

/* DESKRIPSI (.wv-vm-sub) */
html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined .wv-vm-sub {
  color: #E6E2F2;
  margin-bottom: 0;
  font-size: 15.5px;
  line-height: 1.6;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}

/* TAGLINE opsional: <p> telanjang dari {if $productGroup.tagline}. Saat ini KOSONG
   untuk gid 38; aturan defensif supaya ia nol hilang bila nanti diisi lewat
   pengaturan grup produk. */
html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined p:not(.wv-vm-sub) {
  color: #E6E2F2;
  margin-bottom: 6px;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}

/* ---- TABLET ---------------------------------------------------------------------
   Kolom teks melebar ke 64%, jadi plateau gelap overlay WAJIB ikut melebar sampai 66%
   - kalau tidak, tepi kanan teks jatuh di wilayah terang dan hilang. Konsekuensinya
   rak server lebih redup di sini daripada di desktop; itu harga dari kolom 64%. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined {
    padding: 52px 26px 44px;
    background-position: 62% 45%;
  }
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined::before {
    background-image: linear-gradient(90deg,
        rgba(8,5,20,.90) 0%,
        rgba(8,5,20,.84) 40%,
        rgba(8,5,20,.82) 66%,
        rgba(8,5,20,.40) 82%,
        rgba(8,5,20,.14) 100%);
  }
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined h1,
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined .wv-vm-sub,
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined p:not(.wv-vm-sub) {
    max-width: 64%;
  }
}

/* ---- MOBILE ---------------------------------------------------------------------
   Di sini pemotongan beralih jadi HORIZONTAL. Crop digeser ke KIRI (langit) supaya
   teks nol duduk di atas rak server, dan overlay berganti jadi VERTIKAL karena teks
   kini selebar kotak. Pertukaran sadar: keterbacaan didahulukan; rak server mungkin
   hanya mengintip di tepi kanan. Ingin rak tetap tampak? ganti 28% -> 62% dan
   naikkan dua nilai overlay ke .86 / .90.
   Tetap NOL height: deskripsi boleh membungkus 3-4 baris, kotak ikut tumbuh. */
@media (max-width: 767.98px) {
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined {
    padding: 40px 20px 34px;
    border-radius: 12px;
    background-position: 28% center;
  }
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined::before {
    background-image: linear-gradient(180deg,
        rgba(8,5,20,.70) 0%, rgba(8,5,20,.80) 60%, rgba(8,5,20,.86) 100%);
  }
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined h1,
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined .wv-vm-sub,
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined p:not(.wv-vm-sub) {
    max-width: 100%;
  }
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined h1 {
    font-size: 26px;                  /* (2,3,2) > .font-size-36 (1,1,0), nol !important */
  }
  html.wv-cart #main-body #order-standard_cart.wv-winnervm .header-lined .wv-vm-sub {
    font-size: 14px;
  }
}

/* CATATAN CASCADE — kenapa tepat SATU !important dipakai di berkas ini:
   templates/winnervps2026/css/custom.css:1721-1724 memuat
       #order-standard_cart h1 { color: #000 !important; }
   Deklarasi !important penulis mengalahkan deklarasi normal penulis BERAPA PUN
   spesifisitasnya, jadi warna judul mustahil menang tanpa !important. Berkas global
   itu NOL disentuh. Deklarasi lain di sini menang murni lewat spesifisitas:
     .header-lined  PRICING-B2 (2,2,0) vs berkas ini (2,3,1)
     .wv-vm-sub     PRICING-B2 (2,3,0) vs berkas ini (2,4,1)
     h1 font-size   all.css    (1,1,0) vs berkas ini (2,3,2)                       */