@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--navy:#172f78;--navy2:#0c1d50;--ink:#18213a;--muted:#68728a;--line:#e7eaf1;--soft:#f5f7fb}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Inter,Arial,sans-serif}
.site-header {
  height: 94px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  box-shadow: 0 2px 12px #101d3810;
}

.brand{display:flex;align-items:center;text-decoration:none}.brand img {
  display: block;
  width: 150px;
  max-width: 150px;
  height: auto;
  max-height: 70px;
  object-fit: contain;
}.menu-btn{width:48px;height:46px;border:1px solid #e6e8ef;border-radius:9px;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px;cursor:pointer;order:1}.menu-btn span{height:3px;background:var(--navy2);width:100%;border-radius:5px}
.menu-panel{display:none;position:absolute;left:max(22px,calc((100% - 1120px)/2));top:82px;width:min(310px,calc(100vw - 44px));padding:10px;background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 35px #101d3820}.menu-panel.open{display:grid}.menu-panel a{padding:14px 13px;text-decoration:none;color:var(--ink);font-weight:600;border-radius:8px}.menu-panel a:hover{background:var(--soft);color:var(--navy)}
.container{max-width:1120px;margin:0 auto;padding:56px 28px 30px}.eyebrow{font-size:clamp(23px,4vw,34px);font-weight:800;color:var(--navy);margin:0 0 28px}h1{font-size:30px;margin:0 0 24px}.operator{color:#d71935;background:#ffe7eb;padding:3px 8px}.tagline{font-size:clamp(17px,2.4vw,23px);font-weight:700;font-style:italic;margin:0 0 35px}

.banner {
  width: 100vw;
  height: 230px;
  margin: 0 0 32px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  line-height: 0;
}

.banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.banner-copy{position:relative;z-index:2}.banner-kicker{display:inline-block;background:#f2a51b;color:#15234b;padding:9px 13px;border-radius:4px;font-weight:800;font-size:12px;letter-spacing:.5px}.banner h2{font-size:clamp(24px,4vw,38px);line-height:1.18;margin:18px 0 10px}.banner h2 em{color:#ffc64a;font-style:normal}.banner p{color:#e1e9ff;margin:0}.banner-art{width:32%;height:220px;position:relative;display:grid;place-items:center}.orb{width:190px;height:190px;border-radius:50%;background:#eaf4ff;position:absolute;right:8%;bottom:-34px}.phone{z-index:1;width:100px;height:165px;border:8px solid #152b67;border-radius:20px;background:linear-gradient(#fff 0 32%,#e9efff 32%);box-shadow:12px 14px 0 #061238;color:#123477;text-align:center;padding-top:18px;font-size:35px;transform:rotate(8deg)}.phone b{display:block;font-size:18px}.spark{position:absolute;color:#ffc64a;font-size:35px;z-index:2}.s1{right:12%;top:10px}.s2{left:8%;top:60px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}.tab{border:1px solid var(--navy);background:#fff;color:var(--navy);padding:16px 12px;border-radius:9px;font-size:16px;font-weight:700;cursor:pointer;transition:.2s}.tab:hover,.tab.active{background:var(--navy);color:#fff;box-shadow:0 7px 18px #172f7826}.other-menu{border:1px solid var(--line);border-radius:12px;padding:8px;margin:0 0 20px;background:#fff;box-shadow:0 5px 18px #14234a0a}.other-menu button{width:100%;text-align:left;padding:16px 18px;border:0;border-bottom:1px solid var(--line);background:#fff;color:var(--navy2);font-weight:700;font-size:15px;cursor:pointer}.other-menu button:last-child{border-bottom:0}.other-menu button:hover{background:var(--soft);border-radius:7px}
.section-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;padding:16px 20px;background:var(--navy);color:white;border-radius:9px}.section-heading h2{font-size:19px;margin:0}.count{font-size:12px;opacity:.8}.product-list{display:grid;gap:12px}.product-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:13px;padding:22px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 4px 15px #14234a0a}.product-card:nth-child(even){background:var(--soft)}.product-info{display:flex;align-items:center;gap:15px;min-width:0}.operator-icon{width:48px;height:48px;flex:none;border-radius:14px;background:linear-gradient(145deg,#f34b39,#c90028);color:#fff;display:grid;place-items:center;font-weight:800;font-size:23px}.product-name{font-size:16px;color:#424b60;margin-bottom:7px}.product-quota{font-weight:800;color:#1d2945}.duration{font-weight:700;text-align:right;white-space:nowrap;grid-column:2;grid-row:1}.price{font-weight:800;font-size:17px;white-space:nowrap;color:var(--navy2);grid-column:1;grid-row:2;padding-left:63px}.buy-btn{background:var(--navy);color:white;text-decoration:none;padding:13px 17px;border-radius:10px;font-size:14px;font-weight:700;white-space:nowrap;grid-column:2;grid-row:2}.buy-btn:hover{background:var(--navy2)}.empty{padding:35px;text-align:center;color:var(--muted);background:var(--soft);border-radius:10px}.page-content{min-height:55vh}.page-content h2{color:var(--navy)}footer{text-align:center;color:var(--muted);font-size:13px;padding:42px 0 10px}
@media(min-width:700px){.product-card{grid-template-columns:minmax(0,1fr) auto auto auto}.duration,.price,.buy-btn{grid-row:1}.price{grid-column:3;padding:0}.buy-btn{grid-column:4}.duration{grid-column:2}}
@media(max-width:650px){
  .site-header{height:78px;padding:10px 18px}
  .brand img {
  width: 155px;
  max-width: 155px;
  max-height: 610px;
}
  .container{padding:42px 17px 25px}
  .banner{height:100px}
  .banner-art{display:none !important}
  .banner p{max-width:235px;font-size:13px}
  .tabs{gap:8px}
  .tab{font-size:14px;padding:13px 5px}
  .product-card{padding:17px 14px}
  .product-info{gap:11px}
  .operator-icon{width:40px;height:40px}
  .product-name{font-size:14px}
  .price{padding-left:51px}
  .buy-btn{padding:11px 12px;font-size:12px}
  .section-heading h2{font-size:16px}
}

.operator-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}

.operator-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.operator-category {
  background: #102b5c;
  color: #fff;
  padding: 18px;
  border-radius: 14px;
  margin-top: 28px;
}

.operator-category[hidden] {
  display: none !important;
}

.operator-category h2 {
  color: #fff;
  font-size: 18px;
  margin: 0 0 16px;
}

.operator-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.operator-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: #102b5c;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.operator-buttons a:hover {
  background: #e5edff;
  transform: translateY(-2px);
}

/* Ukuran tombol kategori */
.tab {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 10px;
}

/* Ukuran tombol Beli via WhatsApp */
.buy-btn {
  min-height: 42px;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 9px;
  line-height: 1.3;
}

/* Penyesuaian tombol di layar HP */
@media (max-width: 600px) {
  .tab {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 13px;
  }
  
  .buy-btn {
    min-height: 40px;
    padding: 9px 11px;
    font-size: 13px;
  }
}

.special-operator-category {
  margin-bottom: 28px;
}

.special-operator-category .section-heading {
  margin-bottom: 14px;
}

/* =========================================================
   TAMPILAN KHUSUS PULSA - HALAMAN UTAMA
   Tidak mengubah Paket Data dan Lainnya
   ========================================================= */

.pulse-list .product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 7px;
  align-items: center;
}

/* Logo + nama + nominal pulsa */
.pulse-list .product-info {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Nama produk */
.pulse-list .product-name {
  margin-bottom: 4px;
}

/* Nominal pulsa */
.pulse-list .product-quota {
  font-size: 16px;
  font-weight: 800;
}

/* Masa aktif */
.pulse-list .duration {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: left;
  white-space: normal;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* Harga jual */
.pulse-list .price {
  grid-column: 1;
  grid-row: 3;
  padding-left: 0;
  text-align: left;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy2);
  white-space: nowrap;
}

/* Tombol WhatsApp */
.pulse-list .buy-btn {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 650px) {
  
  .pulse-list .product-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 7px;
    padding: 17px 14px;
  }
  
  .pulse-list .product-info {
    gap: 11px;
  }
  
  .pulse-list .operator-icon {
    width: 50px;
    height: 50px;
  }
  
  .pulse-list .product-name {
    font-size: 14px;
  }
  
  .pulse-list .product-quota {
    font-size: 15px;
  }
  
  .pulse-list .duration {
    font-size: 12px;
  }
  
  .pulse-list .price {
    font-size: 16px;
  }
  
  .pulse-list .buy-btn {
    padding: 9px 11px;
    font-size: 12px;
    min-height: 40px;
  }
}


/* =========================================================
   HP SANGAT KECIL
   ========================================================= */

@media (max-width: 380px) {
  
  .pulse-list .product-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  
  .pulse-list .product-info {
    grid-column: 1;
    grid-row: 1;
  }
  
  .pulse-list .duration {
    grid-column: 1;
    grid-row: 2;
  }
  
  .pulse-list .price {
    grid-column: 1;
    grid-row: 3;
  }
  
  .pulse-list .buy-btn {
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    justify-self: stretch;
    text-align: center;
  }
}

/* =========================================================
   KHUSUS 3 TOMBOL KATEGORI
   Paket Data - Pulsa - Lainnya
   ========================================================= */

.tabs .tab {
  color: #f5b800;
  font-size: 17px;
  font-weight: 800;
}

/* Tombol kategori yang sedang aktif */
.tabs .tab.active {
  background: #f5b800;
  color: #fff;
  border-color: #f5b800;
  box-shadow: 0 7px 18px rgba(245, 184, 0, 0.25);
}

/* Saat disentuh / diarahkan */
.tabs .tab:hover {
  background: #f5b800;
  color: #fff;
  border-color: #f5b800;
}

/* HP */
@media (max-width: 650px) {
  .tabs .tab {
    font-size: 16px;
    font-weight: 800;
  }
}

/* Garis tombol kategori menjadi coklat tua */
.tabs .tab {
  border-color: #5a3518;
}

/* Saat tombol aktif tetap garis coklat tua */
.tabs .tab.active {
  border-color: #5a3518;
}

/* Metode Pembayaran */
.payment-method {
  margin-top: 32px;
  padding: 22px 0 10px;
}

.payment-method h2 {
  margin: 0 0 16px;
  color: var(--navy2);
  font-size: 18px;
  font-weight: 800;
}

.payment-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.qris-logo {
  display: block;
  width: 130px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 600px) {
  .payment-method {
    margin-top: 28px;
  }
  
  .payment-method h2 {
    font-size: 16px;
  }
  
  .qris-logo {
    width: 75px;
  }
}