/* ==========================================================
   HERO - biru navy polos + ikon dekorasi + kotak cari
   Teks diatur di app/config/home.php
   ========================================================== */
.hero{position:relative;overflow:hidden;padding:48px 0 52px;color:#fff;text-align:center;border-radius:0 0 60px 60px;background:linear-gradient(180deg,#12286a 0%,#0e2152 100%)}
.hero .wrap{position:relative}

.hero-badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;padding:4px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.07);font-size:11px;font-weight:500;color:#c9d8f6}
.hero-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#8fb0ee;box-shadow:0 0 0 3px rgba(143,176,238,.22)}

/* jarak: judul -> paragraf -> kotak cari (ubah angka margin di bawah kalau mau lebih rapat/renggang) */
.hero h1{margin:0 auto 14px;font-size:clamp(26px,7.4vw,41px);line-height:1.08;font-weight:800;letter-spacing:-.005em;text-transform:uppercase;text-shadow:0 3px 14px rgba(5,15,50,.35)}
.hero h1 span{color:#fff}
.hero p{margin:0 auto 28px;max-width:34em;font-size:10px;font-weight:400;line-height:1.65;color:#dbe5fb}

/* ikon dekorasi besar & samar di kiri-kanan */
.hero-deco i{position:absolute;display:none;color:#fff;opacity:.07}
.hero-deco svg{width:48px;height:48px}
.hero-deco i:nth-child(-n+3){display:block}
.hero-deco i:nth-child(1){left:5%;top:48%}      /* play    */
.hero-deco i:nth-child(2){left:18%;top:10%}     /* music   */
.hero-deco i:nth-child(3){right:4%;top:50%}     /* palette */
.hero-deco i:nth-child(4){right:15%;top:56%}    /* video   */
.hero-deco i:nth-child(5){right:20%;top:8%}     /* tv      */
.hero-deco i:nth-child(6){left:12%;top:58%}     /* chat    */

/* kotak cari: kaca transparan, tombol biru tua (ukuran dikecilkan) */
.hero-search{display:flex;gap:4px;max-width:440px;margin:0 auto;padding:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;box-shadow:0 12px 30px rgba(5,15,50,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s,box-shadow .15s}
.hero-search input{flex:1;min-width:0;width:100%;min-height:38px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:#fff;font-size:12.5px;font-weight:500}
.hero-search input::placeholder{color:#b9c9ee}
.hero-search input:focus{outline:none}
.hero-search:focus-within{border-color:rgba(160,190,240,.6);box-shadow:0 12px 30px rgba(5,15,50,.28),0 0 0 4px rgba(120,160,235,.18)}
.hero-search .btn{flex:none;width:38px;min-height:38px;padding:0;border-radius:9px;background:linear-gradient(135deg,#27489f,#16306e);box-shadow:0 6px 16px rgba(10,25,80,.45),inset 0 1px 0 rgba(255,255,255,.14)}

@media (min-width:700px){
  .hero{padding:66px 0 70px}
  .hero-deco i{display:block}
  .hero-deco svg{width:84px;height:84px}
  .hero-deco i:nth-child(1){left:13%;top:50%}
  .hero-deco i:nth-child(2){left:23%;top:12%}
  .hero-deco i:nth-child(3){right:3%;top:52%}
  .hero-deco i:nth-child(4){right:14%;top:46%}
  .hero-deco i:nth-child(5){right:22%;top:10%}
  .hero-deco i:nth-child(6){left:4%;top:34%}
  .hero p{font-size:14px}
}

/* search bar lebih kecil di mode HP */
@media (max-width:699px){
  .hero-search{max-width:300px;padding:3px;border-radius:10px;gap:3px}
  .hero-search input{min-height:32px;padding:0 10px;font-size:11.5px;border-radius:8px}
  .hero-search .btn{width:32px;min-height:32px;border-radius:8px}
  .hero-search .btn svg{width:15px;height:15px}
}

/* ikon dekorasi bergerak pelan (nonaktif kalau pengguna pilih "kurangi gerakan") */
.hero-deco i{opacity:.11;animation:deco-float 8s ease-in-out infinite;will-change:transform}
.hero-deco i:nth-child(1){animation-duration:7s;--dx:10px;--dy:-18px;--r:-6deg}
.hero-deco i:nth-child(2){animation-duration:9s;animation-delay:-2s;--dx:-12px;--dy:14px;--r:8deg}
.hero-deco i:nth-child(3){animation-duration:8s;animation-delay:-4s;--dx:8px;--dy:-14px;--r:6deg}
.hero-deco i:nth-child(4){animation-duration:10s;animation-delay:-1s;--dx:-10px;--dy:-16px;--r:-8deg}
.hero-deco i:nth-child(5){animation-duration:8.5s;animation-delay:-5s;--dx:12px;--dy:12px;--r:5deg}
.hero-deco i:nth-child(6){animation-duration:9.5s;animation-delay:-3s;--dx:-8px;--dy:-18px;--r:-5deg}
@keyframes deco-float{
  0%,100%{transform:translate(0,0) rotate(0);opacity:.08}
  50%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.16}
}
@media (prefers-reduced-motion:reduce){.hero-deco i{animation:none;opacity:.07}}

/* ==========================================================
   PAGE HERO - pita biru navy di atas halaman navbar (Cek Pesanan, Reseller, FAQ, Pusat Bantuan, panduan)
   Satu keluarga dengan hero beranda: warna sama, ikon dekorasi sama. Partial: views/partials/page-hero.php
   Ikon, badge, dan warna per halaman: 'hero_icons', 'hero_badge', 'hero_tone' di app/config/routes.php. Tidak dipakai di beranda & login.
   Warna (tone): kosong = navy. Tambah warna baru = tambah satu baris [data-tone] di bawah.
   ========================================================== */
.page-hero{--ph-a:#12286a;--ph-b:#0e2152;position:relative;overflow:hidden;min-height:96px;border-radius:0 0 36px 36px;
  background:
    radial-gradient(60% 140% at 88% -20%,rgba(96,135,235,.22),transparent 62%),
    radial-gradient(50% 120% at 6% 120%,rgba(70,110,220,.16),transparent 60%),
    linear-gradient(180deg,var(--ph-a) 0%,var(--ph-b) 100%)}
.page-hero[data-tone="red"]{--ph-a:#7a1a1a;--ph-b:#3f0c0c}
.page-hero[data-tone="green"]{--ph-a:#0f5a3a;--ph-b:#073423}
.page-hero[data-tone="purple"]{--ph-a:#4a1d96;--ph-b:#2a1060}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 70%,transparent 100%)}
.page-hero .hero-deco svg{width:40px;height:40px}
.page-hero .hero-deco i:nth-child(1){left:6%;top:24%}
.page-hero .hero-deco i:nth-child(2){left:38%;top:48%}
.page-hero .hero-deco i:nth-child(3){right:8%;top:20%}
@media (min-width:700px){
  .page-hero{min-height:132px;border-radius:0 0 60px 60px}
  .page-hero .hero-deco svg{width:64px;height:64px}
  .page-hero .hero-deco i:nth-child(1){left:12%;top:26%}
  .page-hero .hero-deco i:nth-child(2){left:26%;top:55%}
  .page-hero .hero-deco i:nth-child(3){right:4%;top:30%}
  .page-hero .hero-deco i:nth-child(4){right:15%;top:48%}
  .page-hero .hero-deco i:nth-child(5){right:26%;top:14%}
  .page-hero .hero-deco i:nth-child(6){left:3%;top:50%}
}

/* hero berisi judul: UKURAN SAMA di semua halaman (ikut tinggi hero Cek Pesanan yang berisi kolom cari).
   Ruang kosong di bawah dipakai kartu/kotak isi halaman yang menumpuk di tepinya (margin-top negatif di css tiap halaman).
   Mau ubah tinggi semua hero sekaligus: ubah min-height & padding-bottom di sini. */
.page-hero--content{min-height:300px;padding:34px 0 84px;text-align:center;color:#fff;border-radius:0}
.page-hero--content .wrap{position:relative}
/* tepi bawah bergelombang: lapisan warna latar halaman yang dipotong bentuk gelombang (ikut mode terang/gelap) */
.page-hero--content::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:36px;pointer-events:none;background:var(--bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46C240 92 480 92 720 54C960 16 1200 16 1440 62V80H0Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46C240 92 480 92 720 54C960 16 1200 16 1440 62V80H0Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
.ph-badge{margin-bottom:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ph-title{margin:0 0 6px;font-size:clamp(28px,7vw,42px);line-height:1.1;font-weight:800;letter-spacing:-.005em;text-transform:uppercase;text-shadow:0 3px 14px rgba(5,15,50,.35)}
.ph-lead{margin:0 auto;max-width:36em;font-size:13px;font-weight:500;line-height:1.7;color:#cfdcf8}
@media (min-width:700px){
  .page-hero--content{min-height:360px;padding:48px 0 110px}
  .page-hero--content::after{height:64px}
  .ph-lead{font-size:15px}
}

/* isi halaman yang tidak punya kolom cari di hero (FAQ, Pusat Bantuan, panduan, Reseller): ditarik naik supaya jarak ke judul hero pas.
   Cek Pesanan tidak pakai ini karena kolom cari mengisi hero. Ubah angka kalau mau lebih dekat/jauh. */
.pull-up{position:relative;margin-top:-120px}
@media (min-width:700px){.pull-up{margin-top:-150px}}