/* overrides.css — loaded after built child CSS
   Purpose: quick fixes and compact layout overrides applied after minified stylesheet
*/

/* Fix duplicated divider */
.usp,
.services,
.testi { border-bottom: none !important; }

.seo-content,
.contact,
.footGlass,
footer .footer-inner { border-top: none !important; }

section + section { border-top: none !important; }

/* Compact layout adjustments */
section { padding-top: clamp(20px, 3.5vw, 40px) !important; padding-bottom: clamp(20px, 3.5vw, 40px) !important; }
.section-title { margin-bottom: 12px !important; }
.section-desc { margin-bottom: 12px !important; max-width: 56ch; color: var(--muted) !important; }


h1{
  margin-top:0;
  margin-bottom:0.6rem;
  /* default H1 gradient (light-blue → yellow) */
  background: linear-gradient(90deg,#62d3ff 0%, #ffd34d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 6px 18px rgba(2,6,23,0.24) !important;
}
h2{margin-top:1.6rem;margin-bottom:0.9rem}
h3{margin-top:1.2rem;margin-bottom:0.75rem}
h4{margin-top:1rem;margin-bottom:0.6rem}
h5,h6{margin-top:0.8rem;margin-bottom:0.5rem;font-weight:600}
@media (max-width:720px){h1{margin-top:0}h2{margin-top:1.2rem}h3{margin-top:1rem}h4{margin-top:0.9rem}}
.hero { padding-top: clamp(40px, 8vw, 88px) !important; padding-bottom: clamp(32px, 6vw, 72px) !important; margin-top: 0 !important; }
/* Front‑page: avoid being covered by header/chips — keep hero below header on desktop */

/* junk: tweak hero container padding on home/front – significantly shorter background */
body.home .hero, body.front-page .hero { padding-top: clamp(44px, 6vw, 68px) !important; padding-bottom: clamp(30px, 5vw, 52px) !important; }

/* center the layanan lengkap description on homepage */
body.home .services .section-desc,
body.front-page .services .section-desc { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }

/* also center descriptions for pricing packages and templates shop on home/front page */
body.home .pricing .section-desc,
body.front-page .pricing .section-desc,
body.home .templates .section-desc,
body.front-page .templates .section-desc,
body.home .jasa-website .section-desc,
body.front-page .jasa-website .section-desc {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 720px !important;
}

@media (min-width:901px){
  /* pull the outer hero frame up so it sits directly below the header bar */
  body.home .hero, body.front-page .hero {
    /* keep the container padding defined above; do not reset it */
    /* lift the frame up by the header height so hero background sits beneath header */
    margin-top: 0 !important;

    /* inner top padding left intact for home’s downward shift */

    /* further reduced bottom spacing (user requested smaller gap) */
    padding-bottom: clamp(18px, 3vw, 38px) !important;
  }

}   

/* Tablet: 721px — 900px — keep frame attached but adjust spacing/layout */
@media (min-width:721px) and (max-width:900px) {
  body.front-page .hero {
    margin-top: 0 !important;

    padding-top: clamp(52px, 9vw, 84px) !important;

    padding-bottom: clamp(16px, 3vw, 28px) !important;
  }

  /* layout: maintain two columns with comfortable gap */
  body.front-page .hero .hero-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; align-items: center; }
  body.front-page .hero .hero-card { padding: 28px 18px 18px !important; border-radius: 16px !important; }

  /* chips: ensure consistent placement on tablet */
  .chips { top: calc(var(--headH) + 10px) !important; height: var(--chipsH,48px); }
}

/* CPT-specific: slightly raise hero area on desktop for single CPT pages */
@media (min-width:901px){
  body.single-layanan .layanan-hero { margin-top: -32px !important; }
  body.single-paket_harga .pkg-hero { margin-top: -72px !important; }
  body.single-lp_template .cpt-hero { margin-top: -32px !important; }
}

/* paket-tier: responsive refinements (moved from templates/paket-harga/paket-tier.php)
   - smoother fluid scaling for hero, tier-grid, and paket cards
   - improved touch/scroll behaviour and no horizontal overflow
   - scoped to `.paket-tier-base` / related selectors to avoid site-wide effects
*/
.paket-tier-base{overflow-x:hidden}
.paket-hero__inner{grid-template-columns:1fr minmax(220px, min(420px, 42%));gap:clamp(16px,2.5vw,28px)}
.paket-hero__visual{max-width:min(420px,42%);width:100%;height:auto;margin:0 auto}
.paket-hero__left h1{font-size:clamp(1.45rem,3.8vw,2.1rem)}

/* tier-grid: smoother horizontal scrolling and better tap targets */
.tier-grid{ -webkit-overflow-scrolling:touch; scroll-padding-left:12px; gap:12px; padding-bottom:6px }
.tier-card{ min-width:110px; scroll-snap-align:start; flex:0 0 auto }

/* paket cards: fluid heights, clamp price sizes, improved CTAs on mobile */
.paket-tier-base .jz-price{font-size:clamp(1.05rem,2.6vw,3.2rem);white-space:nowrap}
@media (max-width:1100px){
  .paket-listing .jz-paket-cards.jz-cols-4{grid-template-columns:repeat(3,1fr);gap:20px}
  .paket-tier-base .jz-paket-card{min-height:440px}
}
@media (max-width:900px){
  .paket-listing .jz-paket-cards.jz-cols-4{grid-template-columns:repeat(2,1fr);gap:16px}
  .paket-tier-base .jz-paket-card{min-height:360px;padding:20px}
}
@media (max-width:600px){
  .paket-listing .jz-paket-cards.jz-cols-4{grid-template-columns:1fr;gap:14px}
  .paket-tier-base .jz-paket-card{min-height:auto;padding:14px}
  .jz-card-price{min-height:0}
  .jz-card-footer .jz-card-cta{display:block;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;text-align:center}
  .paket-hero__actions{flex-direction:column;gap:10px;align-items:center}
  .paket-hero__visual{max-width:320px}
}

/* accessibility: visible focus for keyboard users */
.tier-card:focus-visible, .jz-card-cta:focus-visible, .paket-hero__actions .btn:focus-visible{outline:3px solid rgba(99,102,241,0.18);outline-offset:4px}

/* defensive: prevent accidental horizontal overflow on small devices */
html,body{ -webkit-overflow-scrolling:touch }
.paket-tier-base, .paket-listing, .paket-service-row{ overflow-x:hidden }

/* ensure hero illustration scales cleanly */
.hero-illustration{width:100%;height:auto;max-width:420px;display:block;margin:0 auto}

@media (max-width:900px){ .hero { margin-top: 0 !important; } }
@media (max-width:600px){ .hero { margin-top: 0 !important; } }

/* Front‑page hero — mobile tidy overrides (apply only to front page/home) */
@media (max-width:900px) {
  /* mobile: raise hero so it's directly below chips by eliminating top padding */
  body.front-page .hero {
    padding: 0 0 !important; /* no top padding on home/front page */
    margin-top: 0 !important;
  }

  body.front-page .hero .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.front-page .hero .hero-card {
    padding: 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
    box-shadow: none !important;
  }

  body.front-page .hero .hero-card .title {
    font-size: 20px !important;
    line-height: 1.12 !important;
    margin-bottom: 6px !important;
  }

  body.front-page .hero .hero-card .lead {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
    color: var(--muted) !important;
  }

  body.front-page .hero .hero-card .pill {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* primary hero CTA only when explicitly marked full-width */
  body.front-page .hero .hero-card a.cta-btn.full-width {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* also nudge the shop-specific hero up below chips */
  .beli-hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* generic fix: if a hero appears immediately after chips on mobile, remove its
     built-in vertical padding so there’s no blank gap beneath the nav strip */
  .chips + .hero,
  .chips + .beli-hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
    text-align: center !important;
    margin-bottom: 8px !important;
  }
  /* keep secondary hero button compact */
  body.front-page .hero .hero-card a.btn {
    display: inline-flex !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* stronger, more specific fallback for hero CTAs on front page */
  .hero-ctas { gap: 10px; }
  @media (max-width:900px) {
    body.front-page .hero .hero-card .hero-ctas { flex-direction: column !important; align-items: stretch !important; justify-content: center !important; }
    /* primary CTA -> full width; secondary stays compact */
    body.front-page .hero .hero-card .hero-ctas .hero-cta.cta-btn.full-width { display: block !important; width: 100% !important; box-sizing: border-box !important; }
    body.front-page .hero .hero-card .hero-ctas .hero-cta.btn { display: inline-flex !important; width: auto !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
    body.front-page .hero .hero-card .hero-ctas .hero-cta.cta-btn { padding: 12px 14px !important; border-radius: 12px !important; }

    /* extra safety for very small screens */
    @media (max-width:480px) {
      body.front-page .hero .hero-card .hero-ctas { gap: 8px !important; }
      body.front-page .hero .hero-card .hero-ctas .hero-cta { padding: 12px 12px !important; font-size: 15px !important; }
    }
  }

  /* hide decorative texture/hairlines for small screens */
  body.front-page .hero::before,
  body.front-page .hero .hero-card::before { display: none !important; }

  /* ensure image/card keeps rounded corners */
  body.front-page .hero .hero-card:nth-child(2) > div { border-radius: 12px !important; overflow: hidden !important; }

  /* Mobile: make front-page/home hero full-bleed and left-aligned */
  @media (max-width:900px) {
    body.front-page .hero {
      position: relative !important;
      left: 50% !important;
      right: 50% !important;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      width: 100vw !important;
      border-radius: 0 !important;
      padding-left: 0 !important; /* flush to viewport on small screens */
      padding-right: 0 !important; /* flush to viewport on small screens */
      box-shadow: none !important;
      overflow: visible !important;
    }

    body.front-page .hero .wrap.hero-grid {
      max-width: none !important;
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    /* left-align hero content on mobile */
    body.front-page .hero .hero-card { text-align: left !important; }
    body.front-page .hero .hero-card .title { text-align: left !important; }
    body.front-page .hero .hero-card .lead { text-align: left !important; }

    /* make the inner hero-card edge-to-edge on mobile */
    body.front-page .hero .wrap.hero-grid { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
    body.front-page .hero .hero-card {
      width: 100% !important;
      margin: 0 !important;
      border-radius: 16px !important;
      box-shadow: 0 10px 30px rgba(2,6,23,0.45) !important;
      background-clip: padding-box !important;
      overflow: hidden !important;
      border-left: none !important;
      border-right: none !important;
    }
    /* ensure the hero image/frame preserves rounded corners */
    body.front-page .hero .hero-card > div[style] { border-radius: 16px !important; }

    /* keep comfortable inner padding for content */
    body.front-page .hero .hero-card .title,
    body.front-page .hero .hero-card .lead,
    body.front-page .hero .hero-card .hero-ctas { padding-left: 16px !important; padding-right: 16px !important; }
  }

  /* front/home hero pills — enforce very small horizontal text and 3-equal columns */
  body.front-page .hero .grid { gap: 8px !important; }
  body.front-page .hero .grid .pill,
  body.front-page .hero .hero-card .pill {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 8px !important;
    font-size: 10px !important;           /* much smaller text */
    font-weight: 800 !important;          /* bold */
    border-radius: 10px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #eaf6ff !important;
    line-height: 1 !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }

  /* Ensure 3 equal-width pills on small screens (keeps them horizontal) */
  @media (max-width:900px) {
    body.front-page .hero .grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
    body.front-page .hero .grid .pill,
    body.front-page .hero .hero-card .pill { width: 100% !important; padding: 6px 6px !important; font-size: 10px !important; }
  }

  /* smallest fallback */
  @media (max-width:420px) {
    body.front-page .hero .grid .pill,
    body.front-page .hero .hero-card .pill { padding: 4px 6px !important; font-size: 9px !important; min-height: 28px !important; }
  }
}

/* Specific compact overrides */
.usp, .services, .pricing, .testi, .faq, .templates, .templates-shop, .seo-content { padding: 16px 0 !important; }
.contact { padding: 40px 0 !important; }

/* Jasa Website — section content: features, references, tips */
body.front-page .jasa-website { padding: clamp(32px, 4.2vw, 56px) 0 !important; }
body.front-page .jasa-website .jasa-grid{ display:grid; grid-template-columns: 1fr 360px; gap:32px; align-items:start; }
body.front-page .jasa-website .jasa-intro { max-width:880px; }
body.front-page .jasa-website .section-desc { margin-bottom:18px; color:var(--muted); }
/* cards-combo: modern mix — large rounded, 3-column tile card, small landscape, testimonial */
body.front-page .jasa-website .cards-combo{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: auto; gap:32px 20px; align-items:start; }
/* fallback for cases where `body.front-page` class is not present */
.jasa-website .cards-combo{ grid-template-columns: repeat(4,minmax(0,1fr)); gap:32px; }
body.front-page .jasa-website .card{ margin:8px 0; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border:1px solid rgba(255,255,255,0.03); border-radius:14px; padding:16px; box-shadow:0 12px 36px rgba(2,6,23,0.12); display:flex; flex-direction:column; gap:10px; transition:transform .16s ease, box-shadow .16s ease; }
body.front-page .jasa-website .card:hover{ transform:translateY(-6px); box-shadow:0 28px 60px rgba(2,6,23,0.28); }

/* Big landscape rounded hero (no price) */
body.front-page .jasa-website .card--hero-rounded{ grid-column: 1 / span 2; display:flex; gap:20px; align-items:center; padding:22px; margin-bottom:12px; border-radius:20px; min-height:180px; background:linear-gradient(135deg, rgba(98,211,255,0.06), rgba(255,211,77,0.03)); box-shadow:0 22px 60px rgba(2,6,23,0.28); }
body.front-page .jasa-website .card--hero-rounded .hero-media{ width:120px; height:88px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:900; background:linear-gradient(135deg,#62d3ff,#8be6ff); color:#041124; }
body.front-page .jasa-website .card--hero-rounded .hero-body .card-kicker{ display:inline-block; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,0.9); font-weight:900; color:#041124; font-size:0.78rem; }
body.front-page .jasa-website .card--hero-rounded .pill{ display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); font-weight:800; font-size:12px; }

/* hero + small-feature-cards layout */
body.front-page .jasa-website .card--hero-rounded.card--three{
  display: grid;
  grid-template-columns: 120px 1fr 360px;
  gap: 20px;
  align-items: center;
}
body.front-page .jasa-website .card--hero-rounded.card--three .three-wrap{
  margin: 0;
  gap: 12px;
}
body.front-page .jasa-website .card--hero-rounded.card--three .card--tile{
  padding: 12px;
  border-radius: 12px;
  box-shadow: none;
  background: rgba(255,255,255,0.01);
  border: 1px solid rgba(255,255,255,0.02);
}
@media (max-width:980px){
  body.front-page .jasa-website .card--hero-rounded.card--three{ grid-template-columns: 1fr; }
}


/* three-wrap: three standalone cards (3 col inner at desktop) */
/* larger gutter + modern accents */
.jasa-website .three-wrap{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
body.front-page .jasa-website .three-wrap{ grid-column: 3 / span 2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; margin-top:6px; }

/* tile — increased padding, subtle elevation and decorative gradient accent */
body.front-page .jasa-website .card--tile, .jasa-website .card--tile{
  position: relative;
  min-width: 0;
  padding: 18px 16px 16px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.00));
  box-shadow: 0 12px 40px rgba(2,6,23,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: visible;
}

/* small decorative gradient line inside the tile (modern accent) */
body.front-page .jasa-website .card--tile::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 14px;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,#62d3ff 0%, #9b72ff 50%, #ffd34d 100%);
  box-shadow: 0 10px 30px rgba(98,211,255,0.05);
  pointer-events: none;
  transform-origin: center;
  transition: transform .18s ease, opacity .18s ease;
  opacity: 0.98;
}

/* hover — lift + colorful glow */
body.front-page .jasa-website .card--tile:hover{
  transform: translateY(-8px);
  box-shadow: 0 34px 80px rgba(2,6,23,0.28), 0 6px 30px rgba(98,211,255,0.04);
}
body.front-page .jasa-website .card--tile:hover::before{
  transform: translateY(-4px) scaleX(1.08);
  opacity: 1;
}

body.front-page .jasa-website .card--tile h5{ margin:0 0 8px; font-weight:900; padding-top:6px; }
@media (max-width:720px){
  body.front-page .jasa-website .card--tile::before{ display:none; }
  body.front-page .jasa-website .three-wrap{ gap:12px; }
  body.front-page .jasa-website .card--tile{ padding:14px; border-radius:12px; }
}

/* Small landscape cards */
body.front-page .jasa-website .card--landscape{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:14px; min-height:86px; }
body.front-page .jasa-website .card--landscape .land-left{ width:56px; height:56px; border-radius:10px; background:linear-gradient(135deg,#ffd166,#ffbf33); display:flex; align-items:center; justify-content:center; font-weight:900; color:#041124; }
body.front-page .jasa-website .card--landscape .land-left svg{ width:28px; height:28px; display:block; fill:currentColor; }
body.front-page .jasa-website .card--hero-rounded .hero-media svg{ width:48px; height:48px; display:block; fill:currentColor; }
body.front-page .jasa-website .card--landscape h5{ margin:0; font-size:1rem; font-weight:800; }
body.front-page .jasa-website .card--landscape p{ margin:0; color:var(--muted); font-size:0.95rem; }
/* fallback selectors */
.jasa-website .card--landscape .land-left svg{ width:28px; height:28px; display:block; fill:currentColor; }
.jasa-website .card--hero-rounded .hero-media svg{ width:48px; height:48px; display:block; fill:currentColor; }

/* Testimonial */
body.front-page .jasa-website .card--testimonial blockquote{ margin:0; color:var(--muted); font-style:normal; }

/* Rounded utility */
body.front-page .jasa-website .card--rounded{ border-radius:18px; }

@media (max-width:980px){
  body.front-page .jasa-website .cards-combo{ grid-template-columns:repeat(2,1fr); gap:20px; }
  body.front-page .jasa-website .card{ margin:10px 0; }
  body.front-page .jasa-website .card--hero-rounded{ grid-column:1 / span 2; margin-bottom:12px; }
  body.front-page .jasa-website .card--three{ grid-column: 1 / span 2; }
  body.front-page .jasa-website .card--three .three-wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  body.front-page .jasa-website .cards-combo{ grid-template-columns:1fr; gap:16px; }
  body.front-page .jasa-website .card--hero-rounded, body.front-page .jasa-website .card--landscape, body.front-page .jasa-website .card--three, body.front-page .jasa-website .card--testimonial{ grid-column:auto !important; margin:10px 0 !important; }
  body.front-page .jasa-website .card--three .three-wrap{ grid-template-columns:1fr; }
  body.front-page .jasa-website .card--three .three-wrap > .card--tile{
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  body.front-page .jasa-website .card--three .three-wrap > .card--tile h5,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile p,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile .small-muted,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.front-page .jasa-website .jasa-side{ order:2; margin-top:20px; }
}
body.front-page .jasa-website .jasa-side { background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border:1px solid rgba(255,255,255,0.03); padding:18px; border-radius:12px; }

/* wrap reference & tips into distinct large cards */
body.front-page .jasa-website .ref-box.card,
body.front-page .jasa-website .tips-box.card{
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius:14px;
  box-shadow: 0 12px 30px rgba(2,6,23,0.08);
  margin-bottom:14px;
}

/* header inside the card stays centered; list grid is constrained and centered horizontally */
body.front-page .jasa-website .ref-box.card h3,
body.front-page .jasa-website .tips-box.card h3{ text-align:center; margin:0 0 12px; font-weight:800; }

body.front-page .jasa-website .ref-box.card .ref-list,
body.front-page .jasa-website .tips-box.card .tips-list{
  max-width:720px; /* centers the two-column grid while list text remains left-aligned */
  margin:0 auto;
}

/* responsive: single column on small screens */
@media (max-width:720px){
  body.front-page .jasa-website .ref-box.card .ref-list,
  body.front-page .jasa-website .tips-box.card .tips-list{ grid-template-columns:1fr; max-width:none; }
}

/* fallback selectors (if body.front-page absent) */
.jasa-website .ref-box.card,
.jasa-website .tips-box.card{ padding:18px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border: 1px solid rgba(255,255,255,0.03); border-radius:14px; box-shadow: 0 12px 30px rgba(2,6,23,0.08); margin-bottom:14px; }
.jasa-website .ref-box.card h3, .jasa-website .tips-box.card h3{ text-align:center; margin:0 0 12px; font-weight:800; }
.jasa-website .ref-box.card .ref-list, .jasa-website .tips-box.card .tips-list{ max-width:720px; margin:0 auto; }
@media (max-width:720px){ .jasa-website .ref-box.card .ref-list, .jasa-website .tips-box.card .tips-list{ grid-template-columns:1fr; max-width:none; } }
/* Convert reference & tips lists into 2-column card grid (desktop) */
body.front-page .jasa-website .ref-list,
body.front-page .jasa-website .tips-list {
  margin: 0 0 12px 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
/* fallback (no `body.front-page` present) */
.jasa-website .ref-list,
.jasa-website .tips-list {
  margin: 0 0 12px 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

/* individual list items become compact cards (more visible) */
body.front-page .jasa-website .ref-list li,
body.front-page .jasa-website .tips-list li {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  padding: 14px 18px 14px 32px; /* extra left padding for stripe */
  border-radius: 14px;
  position: relative;
  min-height: 64px;
  display: flex;
  align-items: center; /* vertical center content */
  gap: 12px;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 30px rgba(2,6,23,0.12);
  overflow: visible;
}
/* ensure card children render above decorative stripe */
body.front-page .jasa-website .ref-list li > *,
body.front-page .jasa-website .tips-list li > * { position: relative; z-index: 1; }
/* make link area fill the card for easier tap/click */
body.front-page .jasa-website .ref-list li a,
body.front-page .jasa-website .tips-list li a { display: inline-block; width: 100%; }
@media (max-width:720px){
  body.front-page .jasa-website .ref-list li,
  body.front-page .jasa-website .tips-list li{ min-height:54px; padding-left:24px; }
} 

/* left color stripe (brand palette) — more visible */
body.front-page .jasa-website .ref-list li::before,
body.front-page .jasa-website .tips-list li::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  bottom: 12px;
  width: 8px;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(2,6,23,0.18);
  opacity: 1;
  transition: transform .18s ease, opacity .18s ease;
  z-index: 0;
}
body.front-page .jasa-website .ref-list li:hover::before,
body.front-page .jasa-website .tips-list li:hover::before{ transform: translateY(-4px) scaleY(1.02); opacity: 1; }
@media (max-width:720px){
  body.front-page .jasa-website .ref-list li::before,
  body.front-page .jasa-website .tips-list li::before{ left:12px; width:6px; }
}
/* cycle brand accents */
body.front-page .jasa-website .ref-list li:nth-child(1)::before,
body.front-page .jasa-website .tips-list li:nth-child(1)::before,
.jasa-website .ref-list li:nth-child(1)::before,
.jasa-website .tips-list li:nth-child(1)::before { background: linear-gradient(180deg,#62d3ff,#8be6ff); }
body.front-page .jasa-website .ref-list li:nth-child(2)::before,
body.front-page .jasa-website .tips-list li:nth-child(2)::before,
.jasa-website .ref-list li:nth-child(2)::before,
.jasa-website .tips-list li:nth-child(2)::before { background: linear-gradient(180deg,#9b72ff,#cfa6ff); }
body.front-page .jasa-website .ref-list li:nth-child(3)::before,
body.front-page .jasa-website .tips-list li:nth-child(3)::before,
.jasa-website .ref-list li:nth-child(3)::before,
.jasa-website .tips-list li:nth-child(3)::before { background: linear-gradient(180deg,#ffd34d,#ffbf33); }

/* Home articles (Blog + Templates) */
.home-articles{ padding: clamp(24px,3.6vw,48px) 0; background: #0b3a2e; color: #e6f7ef; }
.home-articles .wrap{ position:relative; z-index:1; }
.home-articles .section-title{ text-align:center; margin-bottom:6px; color: #eaf7ef; }
.home-articles .section-desc{ text-align:center; color: rgba(234,247,239,0.85); margin:0 auto 18px; max-width:720px; }
.home-articles .posts-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:20px; align-items:stretch; }
@media (max-width:1199px){ .home-articles .posts-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:980px){ .home-articles .posts-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.home-articles .post-card{ display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border:1px solid rgba(255,255,255,0.04); box-shadow: 0 12px 36px rgba(2,6,23,0.12); min-height:320px; overflow:visible; }
/* full-bleed thumbnail inside the post card (touch left & right edges) */
.home-articles .post-thumb{ border-radius:14px 14px 0 0; overflow:hidden; height:180px; background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.12)); margin: -16px -16px 12px -16px; width: calc(100% + 32px); display:block; }
.home-articles .post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.home-articles .post-meta{ font-size:0.85rem; color: rgba(255,255,255,0.75); display:flex; gap:8px; align-items:center; }
.home-articles .post-title{ margin:6px 0 6px; font-size:1.05rem; font-weight:800; color: #fff; }
.home-articles .post-title a{ color: #fff; }
.home-articles .post-excerpt{ color: rgba(255,255,255,0.85); font-size:0.95rem; flex:1; }
.home-articles .post-card .btn.small{ align-self:flex-start; margin-top:8px; }
@media (max-width:980px){ .home-articles .posts-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .home-articles .posts-grid{ grid-template-columns: 1fr; } .home-articles .post-thumb{ height:160px; margin: -12px -12px 12px -12px; width: calc(100% + 24px); border-radius:12px 12px 0 0; } }

/* fallbacks (no body.front-page) */
/* empty selector removed */
.home-articles .posts-grid{ gap:18px; }
@media (max-width:980px){ .home-articles .posts-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .home-articles .posts-grid{ grid-template-columns: 1fr; } }
body.front-page .jasa-website .ref-list li:nth-child(4)::before,
body.front-page .jasa-website .tips-list li:nth-child(4)::before,
.jasa-website .ref-list li:nth-child(4)::before,
.jasa-website .tips-list li:nth-child(4)::before { background: linear-gradient(180deg,#4dd9a6,#9feed0); } 

body.front-page .jasa-website .ref-list a{ color:#9fdcff; font-weight:700; }
body.front-page .jasa-website .tips-list li{ list-style:none; }

body.front-page .jasa-website .ref-list li:hover,
body.front-page .jasa-website .tips-list li:hover,
.jasa-website .ref-list li:hover,
.jasa-website .tips-list li:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 54px rgba(2,6,23,0.28);
}

/* DEBUG: force-visible cards for ref/tips — high-specificity + !important */
html body .jasa-website .ref-list li,
html body .jasa-website .tips-list li {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(2,6,23,0.32) !important;
  padding: 14px 18px 14px 40px !important;
  border-radius: 14px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
}
html body .jasa-website .ref-list li::before,
html body .jasa-website .tips-list li::before {
  width: 10px !important;
  left: 12px !important;
  top: 12px !important;
  bottom: 12px !important;
  border-radius: 8px !important;
  opacity: 1 !important;
  display: block !important;
}
html body .jasa-website .ref-list li > *,
html body .jasa-website .tips-list li > * { position: relative !important; z-index: 2 !important; }

/* remove debug after verification */

@media (max-width:720px){
  body.front-page .jasa-website .ref-list,
  body.front-page .jasa-website .tips-list { grid-template-columns: 1fr; gap:12px; }
  body.front-page .jasa-website .ref-list li::before,
  body.front-page .jasa-website .tips-list li::before{ left:12px; top:12px; bottom:12px; width:5px; }
}

/* Desktop: center the 2‑column grid horizontally while keeping text left-aligned */
@media (min-width:721px){
  body.front-page .jasa-website .ref-box,
  body.front-page .jasa-website .tips-box { text-align: center; }
  /* make the grid shrink-to-fit and center via inline-grid */
  body.front-page .jasa-website .ref-list,
  body.front-page .jasa-website .tips-list { display: inline-grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; justify-items: start; }
  /* ensure card content remains left-aligned */
  body.front-page .jasa-website .ref-list li,
  body.front-page .jasa-website .tips-list li { text-align: left; margin-left: 18px; }
  /* fallback selectors if body.front-page missing */
  .jasa-website .ref-box,
  .jasa-website .tips-box { text-align: center; }
  .jasa-website .ref-list,
  .jasa-website .tips-list { display: inline-grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; justify-items: start; }
  .jasa-website .ref-list li,
  .jasa-website .tips-list li { text-align: left; margin-left: 18px; }
}
body.front-page .jasa-website .btn-cta{ display:flex; width:fit-content; margin:18px auto 0; justify-content:center; align-items:center; padding:10px 20px; border-radius:999px; background:linear-gradient(90deg,#1faaff 0%,#4dd9a6 100%); color:#041124; font-weight:900; text-decoration:none; box-shadow:0 14px 40px rgba(13,90,78,0.12); border:0; transition:transform .14s ease, box-shadow .14s ease; }
body.front-page .jasa-website .btn-cta:hover{ transform:translateY(-3px); box-shadow:0 22px 56px rgba(13,90,78,0.18); }
/* fallback (no body.front-page) */
.jasa-website .btn-cta{ display:flex; width:fit-content; margin:18px auto 0; justify-content:center; align-items:center; padding:10px 20px; border-radius:999px; background:linear-gradient(90deg,#1faaff 0%,#4dd9a6 100%); color:#041124; font-weight:900; text-decoration:none; box-shadow:0 14px 40px rgba(13,90,78,0.12); border:0; transition:transform .14s ease, box-shadow .14s ease; }
.jasa-website .btn-cta:hover{ transform:translateY(-3px); box-shadow:0 22px 56px rgba(13,90,78,0.18); }
@media (max-width:980px){ body.front-page .jasa-website .jasa-grid{ grid-template-columns:1fr 1fr; } body.front-page .jasa-website .features-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ body.front-page .jasa-website .jasa-grid{ grid-template-columns:1fr; } body.front-page .jasa-website .features-list{ grid-template-columns:1fr; } body.front-page .jasa-website .jasa-side{ order:2; } }

/* Hard fallback: ensure 3 feature cards never stay 3-up on mobile (home/front-page/any body class) */
@media (max-width:900px){
  body.front-page .jasa-website .card--hero-rounded.card--three,
  body.home .jasa-website .card--hero-rounded.card--three,
  .jasa-website .card--hero-rounded.card--three{
    grid-template-columns: 1fr !important;
  }

  body.front-page .jasa-website .card--three .three-wrap,
  body.home .jasa-website .card--three .three-wrap,
  .jasa-website .card--three .three-wrap{
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100%;
  }

  body.front-page .jasa-website .card--three .three-wrap > .card--tile,
  body.home .jasa-website .card--three .three-wrap > .card--tile,
  .jasa-website .card--three .three-wrap > .card--tile{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  body.front-page .jasa-website .card--three .three-wrap > .card--tile h5,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile p,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile .small-muted,
  body.front-page .jasa-website .card--three .three-wrap > .card--tile a,
  body.home .jasa-website .card--three .three-wrap > .card--tile h5,
  body.home .jasa-website .card--three .three-wrap > .card--tile p,
  body.home .jasa-website .card--three .three-wrap > .card--tile .small-muted,
  body.home .jasa-website .card--three .three-wrap > .card--tile a,
  .jasa-website .card--three .three-wrap > .card--tile h5,
  .jasa-website .card--three .three-wrap > .card--tile p,
  .jasa-website .card--three .three-wrap > .card--tile .small-muted,
  .jasa-website .card--three .three-wrap > .card--tile a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* home-services styles removed — duplicate of existing layanan section */
.wrap.contact .contact-form-wrapper { padding: 24px !important; margin: 0; max-width: 720px; }
.wrap.contact .contact-form-wrapper .form-group { margin-bottom: 12px !important; }

  /* Modern quote styles for `.seo-content` — supports Gutenberg `wp-block-quote` and editors' `.pull-quote` */
  .seo-content blockquote,
  .seo-content .wp-block-quote,
  .seo-content .wp-block-pullquote,
  .seo-content .pull-quote {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.008));
    border-left: 6px solid rgba(98,211,255,0.12);
    padding: 22px 26px;
    border-radius: 14px;
    color: #eaf6ff;
    font-style: italic;
    font-size: clamp(1rem, 1.02rem + 0.6vw, 1.18rem);
    line-height: 1.6;
    margin: 1.25rem 0;
    box-shadow: 0 18px 40px rgba(2,6,23,0.55);
    overflow: hidden;
    backdrop-filter: blur(4px);
  }

  .seo-content blockquote::before,
  .seo-content .wp-block-quote::before,
  .seo-content .wp-block-pullquote::before,
  .seo-content .pull-quote::before {
    content: "“";
    position: absolute;
    left: 18px;
    top: -6px;
    font-size: 76px;
    color: rgba(98,211,255,0.06);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    transform: translateY(0);
  }

  .seo-content blockquote p,
  .seo-content .wp-block-quote p,
  .seo-content .wp-block-pullquote p,
  .seo-content .pull-quote p { margin: 0; font-weight: 700; }

  .seo-content blockquote cite,
  .seo-content .wp-block-quote cite,
  .seo-content .wp-block-pullquote cite { display: block; margin-top: 10px; color: var(--muted); font-weight: 700; font-style: normal; }

  @media (max-width:720px) {
    .seo-content blockquote,
    .seo-content .wp-block-quote,
    .seo-content .wp-block-pullquote,
    .seo-content .pull-quote {
      padding: 16px 18px;
      border-radius: 12px;
      font-size: 1rem;
    }
    .seo-content blockquote::before,
    .seo-content .wp-block-quote::before, .seo-content .wp-block-pullquote::before { font-size: 44px; left: 12px; top: -8px; opacity: 0.9; }
  }

  /* utility: editors can add `.pull-quote` in content to get the same look */
  .seo-content .pull-quote { display: block; }

  /* Paragraph spacing inside SEO content — single Enter provides visible gap */
  .seo-content p { margin: 0 0 1rem !important; /* one-line gap */ line-height: 1.8; }
  .seo-content p + p { margin-top: 1rem !important; }
  .seo-content p:first-child { margin-top: 0 !important; }
  .seo-content p:last-child { margin-bottom: 0 !important; }

  /* Keep headings inside seo-content compact but separated from paragraphs */
  .seo-content h2, .seo-content h3, .seo-content h4 { margin: 1.1rem 0 0.6rem !important; }
  .seo-content h2 + p, .seo-content h3 + p { margin-top: 0.6rem !important; }

  /* Anchor/link color for text inside SEO content: green default, blue on hover/focus */
  .seo-content a:not(.btn):not(.cta-btn) {
    color: #4dd9a6 !important; /* green */
    text-decoration: none !important;
    font-weight: 800 !important;
    transition: color .14s ease, transform .12s ease;
  }
  .seo-content a:not(.btn):not(.cta-btn):hover,
  .seo-content a:not(.btn):not(.cta-btn):focus {
    color: #62d3ff !important; /* blue on hover */
    text-decoration: underline !important;
    transform: translateY(-1px);
  }
  .seo-content a:not(.btn):not(.cta-btn):focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(98,211,255,0.08) !important;
    border-radius: 6px !important;
  }
  .seo-content a:not(.btn):not(.cta-btn):visited { color: #3bb388 !important; }

  @media (max-width:720px) {
    .seo-content a:not(.btn):not(.cta-btn) { font-weight: 700 !important; }
  }

  /* Modern list styles inside `.seo-content` — bullets & numbered lists */
  .seo-content ul,
  .seo-content ol { margin: 0 0 1rem 0; padding: 0; list-style: none; }

  .seo-content ul li,
  .seo-content ol li {
    position: relative;
    padding-left: 58px; /* shift list content to the right */
    margin: 0 0 0.9rem;
    color: #dbe6ff;
    font-weight: 700;
    line-height: 1.6;
  }

  /* custom circular bullet */
  .seo-content ul li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(90deg,#62d3ff 0%,#8be6ff 100%);
    box-shadow: 0 6px 18px rgba(98,211,255,0.12);
    border: 2px solid rgba(255,255,255,0.02);
  }

  /* numbered badge */
  .seo-content ol { counter-reset: seo-ol; }
  .seo-content ol li { counter-increment: seo-ol; }
  .seo-content ol li::before {
    content: counter(seo-ol);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: #041124;
    background: linear-gradient(90deg,#ffd34d 0%, #ffbf66 100%);
    box-shadow: 0 8px 30px rgba(2,6,23,0.45);
  }

  /* nested lists: subtler markers */
  .seo-content ul ul li::before,
  .seo-content ol ol li::before {
    width: 8px; height: 8px; left: 20px; background: rgba(255,255,255,0.06); box-shadow: none; border: 0; transform: translateY(-50%);
  }

  .seo-content ul ul li,
  .seo-content ol ol li { padding-left: 48px; font-weight: 600; }

  /* keep strong/emphasis visible inside lists */
  .seo-content ul li strong,
  .seo-content ol li strong { color: #ffffff; font-weight: 900; }

  @media (max-width:720px) {
    .seo-content ul li,
    .seo-content ol li { padding-left: 46px; }
    .seo-content ul li::before,
    .seo-content ol li::before { left: 12px; }
    .seo-content ol li::before { width: 30px; height: 30px; font-size: 0.95rem; }
  }
  .section-title{margin-bottom:10px}
  .section-desc{margin-bottom:10px}
  .wrap.contact .contact-form-wrapper{padding:20px}
  section{padding-top:20px;padding-bottom:20px}
}

/* Chips placement moved to `assets/css/components/chips.css` — keep page‑specific tweaks below */

/* Fix: ensure header chips are correctly positioned on paket single pages where
   the hero uses a negative margin; scope narrowly to avoid site-wide shifts. */
.single-paket_harga .chips {
  top: calc(var(--headH) + 10px) !important;
}
@media (max-width:900px){
  .single-paket_harga .chips { top: calc(var(--headH) + 10px) !important; }
}

/* FAQ styles removed from child theme */


/* Testimonial (Apa Kata Klien) — avatar + improved cards */
.testi-grid { gap:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.testi .price-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px; gap:12px; border-radius:14px; transition:transform .18s ease, box-shadow .18s ease; }
.testi .price-card .price-body { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.testi .price-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,6,23,0.45); }
.testi-avatar { width:72px; height:72px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--text); margin:0 auto; margin-bottom:6px }
.testi-avatar img{ width:100%; height:100%; object-fit:cover; display:block; margin:0 auto }
.testi-avatar--fallback{ background:linear-gradient(135deg,#62d3ff,#ffd34d); color:#061022 }
.testi-content{ color:var(--muted); line-height:1.6; max-width:48ch; text-align:center }
.testi-cite{ display:block; margin-top:8px; color:var(--muted); font-weight:700; }
@media (max-width:980px){ .testi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:720px){
  body.front-page #testi .testi-grid,
  body.home #testi .testi-grid,
  #testi .testi-grid,
  .testi .testi-grid{
    grid-template-columns: 1fr !important;
  }

  body.front-page #testi .price-card,
  body.home #testi .price-card,
  #testi .price-card,
  .testi .price-card{
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.front-page #testi .testi-content,
  body.home #testi .testi-content,
  #testi .testi-content,
  .testi .testi-content{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* Make archive / paket-tier badges match the same centered top style */
.jz-paket-card .lp-badge, .paket-tier-base .lp-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:12}


/* When both recommended + visible badge are present, push the visible badge lower so nothing overlaps */

/* description / features separator */





/* Sidebar layout & search styles moved to `assets/css/components/sidebar.css` */
/* (see `assets/css/components/sidebar.css`) */
@media (max-width:480px){ .jzv2-search-input-wrap input[type="search"]{padding:10px 12px;border-radius:12px} .jzv2-search-btn{padding:8px 10px} }
/* Service tier grid: 4 cols on desktop, 2 cols on mobile */
.service-tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.tier-card{padding:20px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.03);min-height:220px;display:flex;flex-direction:column}
.tier-head{font-weight:800;margin-bottom:8px}
.tier-price{font-weight:900;font-size:1.15rem;margin-bottom:8px}
.tier-features{list-style:none;padding:0;margin:0 0 12px 0;display:grid;gap:8px}
.tier-cta{margin-top:auto}
@media (max-width:720px){ .service-tier-grid{grid-template-columns:repeat(2,1fr)} .tier-card{min-height:200px;padding:14px} }
@media (max-width:420px){ .service-tier-grid{grid-template-columns:repeat(1,1fr)} }
@media (max-width:360px){ .pricing .pricing-grid, .service-packages .pricing-grid, .all-packages .pricing-grid{grid-template-columns:repeat(1,1fr) !important} .service-packages .price-card{padding:12px} }

/* Pricing page hero specifics */
.hero-pricing{background:linear-gradient(180deg, rgba(6,16,34,0.9), rgba(6,16,34,0.85));color:#fff;padding:48px 0;border-radius:12px;margin-bottom:18px;border:1px solid rgba(255,255,255,0.03)}
.hero-pricing .hero-grid{display:grid;grid-template-columns:1fr minmax(320px,560px);gap:48px;align-items:start;align-content:center}
.hero-pricing .hero-text{padding:6px 6px;display:flex;flex-direction:column;gap:18px;justify-content:flex-start;max-width:64ch}
/* Large screens: give image a stable column width */
@media (min-width:1200px){ .hero-pricing .hero-grid{grid-template-columns:1fr 520px;gap:56px} }
/* Ensure hero keeps two columns even on small phones (min image width preserved) */
@media (max-width:720px){
  .hero-pricing .hero-grid{grid-template-columns:1fr minmax(220px,420px);gap:28px}
  .hero-pricing .hero-title{font-size:clamp(1.6rem,4.6vw,2.6rem)}
  .hero-pricing .hero-lead{font-size:0.98rem}
}
@media (max-width:420px){
  .hero-pricing .hero-grid{grid-template-columns:1fr minmax(180px,320px);gap:18px}
  .hero-pricing .hero-title{font-size:1.4rem}
  .hero-pricing .hero-lead{font-size:0.9rem}
}
.hero-pricing .hero-title{font-size:clamp(2.4rem,6.6vw,4.2rem);margin:0 0 12px;line-height:1.02;font-weight:900;background:linear-gradient(90deg,#7fe7ff,#fff59a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-pricing .hero-lead{margin:0 0 18px;color:var(--muted);max-width:64ch;font-size:1.05rem}
.hero-pricing .hero-features{display:flex;gap:12px;margin-top:10px;margin-bottom:14px;flex-wrap:wrap}
.hero-pricing .hero-features .pill{padding:10px 18px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);color:#e6f7ff;font-weight:700;font-size:0.98rem}
.hero-pricing .hero-features .pill:first-child{background:linear-gradient(90deg,#0fd3ff,#4cc9ff);color:#04182a;box-shadow:0 6px 30px rgba(9,49,72,0.35)}
.hero-pricing .hero-actions{display:none !important}
/* Desktop: primary on left, secondary pushed to right for compact hero */

/* Button visuals */
.hero-pricing .hero-actions .btn-primary{padding:14px 34px;border-radius:24px;font-weight:900;background:linear-gradient(90deg,#19c7ff,#1faaff);color:#041124;box-shadow:0 10px 30px rgba(15,89,124,0.35);border:0}
.hero-pricing .hero-actions .btn-outline{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:#dfe9f5;padding:12px 20px;border-radius:20px}
/* Mobile: stacked full-width */
@media (max-width:720px){
  .hero-pricing .hero-actions{flex-direction:column;align-items:stretch}
  .hero-pricing .hero-actions .btn-primary{width:100%}
  .hero-pricing .hero-actions .btn-outline{width:100%;margin-left:0;margin-top:10px}
}
.hero-pricing .hero-media{display:block}
.hero-pricing .hero-media{display:flex;align-items:flex-start;justify-content:flex-end;padding-top:6px}
.hero-pricing .hero-image{width:100%;max-width:520px;height:auto;border-radius:18px;box-shadow:0 30px 80px rgba(2,6,23,0.65);display:block;border:10px solid rgba(255,255,255,0.03);object-fit:cover}
.hero-pricing .hero-placeholder{height:300px;min-width:260px;border-radius:18px;background:linear-gradient(135deg,#0e1a2b,#08101a)}
@media (max-width:980px){ .hero-pricing .hero-image{max-width:420px} }
@media (max-width:720px){ .hero-pricing .hero-image{max-width:340px} }
@media (max-width:420px){ .hero-pricing .hero-image{max-width:300px} }
@media (max-width:980px){ .hero-pricing .hero-title{font-size:clamp(1.8rem,6vw,2.6rem); } .hero-pricing .hero-placeholder{height:260px} }
@media (max-width:480px){ .hero-pricing .hero-title{font-size:1.6rem} .hero-pricing .hero-lead{font-size:0.98rem} }
@media (max-width:980px){ .hero-pricing .hero-grid{grid-template-columns:1fr 340px} }
@media (max-width:720px){
  .hero-pricing .hero-grid{grid-template-columns:1fr; }
  .hero-pricing .hero-media{order:-1;margin-bottom:18px;justify-content:center;padding:0}
  /* Make hero image full-width inside its column and reduce heavy framing so it blends */
  .hero-pricing .hero-image{width:100%;max-width:100%;border-radius:14px;border:8px solid rgba(255,255,255,0.02);box-shadow:0 18px 44px rgba(2,6,23,0.45)}
  .hero-pricing .hero-placeholder{height:auto;min-height:160px}
  .hero-pricing .hero-inner{align-items:flex-start}
}

/* Extra override applied when JS detects small viewport to avoid caching issues */
.jz-mobile-hero .hero-pricing .hero-media{justify-content:center!important;padding:0!important}
.jz-mobile-hero .hero-pricing .hero-media .hero-image{display:block;width:100%!important;max-width:100%!important;border-radius:12px!important;border:6px solid rgba(255,255,255,0.02)!important;box-shadow:0 14px 36px rgba(2,6,23,0.45)!important;margin:0 auto!important}
.jz-mobile-hero .hero-pricing .wrap{padding-left:12px!important;padding-right:12px!important}
.jz-mobile-hero .hero-pricing .hero-inner{align-items:flex-start!important}
@media (max-width:480px){ .hero-pricing .hero-grid{grid-template-columns:1fr} .hero-pricing .hero-title{font-size:1.6rem} }

/* Pricing page hero */
.hero-pricing{background-size:cover;background-position:center;color:#fff;padding:64px 0;border-radius:12px;margin-bottom:18px}
.hero-pricing .hero-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hero-pricing .hero-title{font-size:clamp(1.4rem,2.6vw,2.2rem);margin:0 0 10px;line-height:1.03;font-weight:700;max-width:48ch;background:linear-gradient(90deg,#7fe7ff,#fff59a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-pricing .hero-lead{margin:0;color:var(--muted);max-width:56ch}
@media (max-width:980px){.hero-pricing .hero-inner{flex-direction:column;align-items:flex-start}}
.hero-pricing .btn-primary{background:var(--brand);border:0;padding:12px 18px;border-radius:10px;color:#042033}

/* Hide the generic "Postingan Terbaru" widget on lp_template single pages (child override)
  This avoids editing parent templates — non-destructive and easily reversible. */
.single-lp_template .widget-latest { display: none !important; }
/* Broad hide for any remaining 'latest posts' markup in sidebar columns */
.single-lp_template .col-aside .latest-posts,
.single-lp_template .latest-posts,
.single-lp_template .col-aside .widget-latest,
.col-aside .latest-posts { display: none !important; }

/* Product panel styling for single lp_template */
.product-panel{border-radius:12px;border:0;overflow:hidden;background:linear-gradient(180deg,#ffffff,#fbfdff);padding:0;color:#0b1220;box-shadow:0 14px 36px rgba(2,6,23,0.08)}
.product-panel .product-gallery{display:flex;gap:8px;padding:12px;background:transparent;border-bottom:1px solid rgba(6,16,34,0.04);overflow:auto}
.product-panel .pg-item{flex:0 0 96px;border-radius:8px;overflow:hidden}
.product-panel .pg-item img{display:block;width:100%;height:64px;object-fit:cover}
.product-panel .product-body{padding:16px}
.product-panel .product-title h3{margin:0 0 8px;font-size:1.15rem;color:#061124}
.product-panel .product-rating{color:#ffb020;margin-bottom:8px}
.product-panel .product-price{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.product-panel .price-now{font-weight:900;font-size:1.2rem;color:#061124}
.product-panel .price-old{text-decoration:line-through;color:#7b8691;opacity:0.9}
.product-panel .product-features ul,.product-panel .product-includes ul{margin:6px 0 0 0;padding-left:18px;color:#0f1724}
.product-panel .product-features h4,.product-panel .product-includes h4{margin:0 0 6px;font-size:0.98rem;color:#0b1220}
.product-panel .product-actions{display:flex;gap:8px;margin-top:12px}
.product-panel .btn{padding:8px 12px;border-radius:8px;text-decoration:none;border:1px solid rgba(6,16,34,0.06);background:transparent;color:#061124}
.product-panel .btn-primary{background:linear-gradient(90deg,#62d3ff,#1faaff);color:#041124;border:0}
.product-panel .rating-stars{font-size:1rem}

/* Finalize modern solid gold stars: stronger contrast, size, and subtle glow */
.col-aside .product-panel .rating-stars,
.product-panel .rating-stars {
  display: inline-block !important;
  font-size: 1.28rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  color: #ffbf33 !important; /* warm gold */
  -webkit-text-fill-color: #ffbf33 !important;
  background-image: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.06) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 6px 18px rgba(255,191,51,0.10) !important;
  transform: translateY(0) scale(1) !important;
  animation: none !important;
}

/* Modern feature list: turn simple bullets into responsive feature cards */
.col-aside .product-panel .product-features{
  padding-top:6px; padding-bottom:6px;
}
.col-aside .product-panel .product-features h4{
  margin:0 0 12px; font-size:1.02rem; font-weight:800; color: rgba(255,255,255,0.96);
}

/* ensure cart button is colored even if parent rules override */
.product-price .product-actions .add-to-cart,
.product-price .product-actions .add-to-cart-btn {
    background: var(--jz-primary) !important;
    color: white !important;
}

/* hard-fix single shop CTA visibility on live pages */
.jz-single-product .product-price .product-actions .add-to-cart,
.jz-single-product .product-price .product-actions .add-to-cart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  min-height: 48px !important;
  padding: .85rem 1.25rem !important;
  border: 0 !important;
  border-radius: .55rem !important;
  background: var(--jz-primary) !important;
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

.jz-single-product .product-price .product-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  gap: .6rem !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: auto !important;
  align-items: center !important;
}

.jz-single-product .product-price .product-actions > button,
.jz-single-product .product-price .product-actions > a {
  width: 100% !important;
  min-height: 44px !important;
  max-height: 46px !important;
  height: 46px !important;
  padding: .65rem .9rem !important;
  border-radius: .5rem !important;
  flex: none !important;
}

.jz-single-product .product-price .product-actions .add-to-cart.disabled,
.jz-single-product .product-price .product-actions .add-to-cart-btn.disabled {
  background: var(--jz-gray-300) !important;
  color: var(--jz-gray-700) !important;
  cursor: not-allowed !important;
}

@media (max-width: 768px) {
  .jz-single-product .product-price .product-actions {
    grid-template-columns: 1fr !important;
  }
}

.col-aside .product-panel .product-features ul{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.col-aside .product-panel .product-features li{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04); color:#fff; font-weight:700; font-size:0.98rem;
  box-shadow: 0 6px 20px rgba(2,6,23,0.45); transition:transform .16s ease, box-shadow .16s ease;
}
.col-aside .product-panel .product-features li:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,6,23,0.6); }
.col-aside .product-panel .product-features li::before{
  content:"✓"; color:#ffbf33; font-weight:900; font-size:1.05rem; margin-right:6px; display:inline-block; transform:translateY(-1px);
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}

/* Keep includes list visually similar but slightly lighter */
.col-aside .product-panel .product-includes h4{ margin:0 0 8px; color:rgba(255,255,255,0.92); }
.col-aside .product-panel .product-includes ul{ list-style:none; margin:0; padding:0; }
.col-aside .product-panel .product-includes li{ padding:6px 0; color:rgba(255,255,255,0.92); font-weight:600 }

@media (max-width:520px){
  .col-aside .product-panel .product-features ul{ grid-template-columns: repeat(2, 1fr); }
  .col-aside .product-panel .product-features li{ padding:10px; font-size:0.95rem }
}

/* Main content 'Fitur' section: modern responsive feature cards */
.template-section#features { padding-top: 18px; padding-bottom: 8px; }
.template-section#features .features-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.template-section#features .features-list li{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); padding:16px 18px; border-radius:12px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 12px 40px rgba(2,6,23,0.45); transition:transform .16s ease, box-shadow .16s ease; color: #eaf6ff; font-weight:700 }
.template-section#features .features-list li:hover{ transform:translateY(-6px); box-shadow:0 22px 60px rgba(2,6,23,0.6) }
.template-section#features .features-list li::before{ content:''; width:14px; height:14px; border-radius:50%; flex:0 0 auto; background:linear-gradient(90deg,#ffd166 0%,#ffbf33 100%); box-shadow:0 6px 18px rgba(255,191,51,0.12); margin-top:6px }
.template-section#features h2{ margin-bottom:12px; font-weight:900 }
@media (max-width:520px){ .template-section#features .features-list{ grid-template-columns:repeat(1,1fr); } }

@media (max-width:900px){
  .product-panel .pg-item{flex:0 0 80px}
  .product-panel .pg-item img{height:56px}
}

/* Ensure titles inside dark card containers remain visible (white text) */
.card h3,
.card .card-title,
.layanan-card__title,
.layanan-card h3,
.col-aside .card h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Ensure layanan FAQ H2 is visible and centered on dark/gradient FAQ backgrounds */
.layanan-faq #layanan-faq-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: center !important;
}

/* Exceptions: force dark text for known white/aside cards */
.pkg-aside__card h3,
.product-panel .product-title h3,
.paket-intro__card h3,
.pkg-related-card__title,
.pkg-card__title {
  color: #0f1724 !important;
  -webkit-text-fill-color: #0f1724 !important;
}

/* Ensure sidebar card containers don't add extra framed background */
.col-aside .card, .col-aside .card * { background: transparent !important; box-shadow: none !important; border: 0 !important }
.col-aside .product-panel { margin: 0; }
.col-aside .product-panel .product-gallery{padding:10px}
.col-aside .product-panel .pg-item img{border-radius:6px}

/* Improve contrast for lists inside product panel */
.product-panel ul li{color:#0f1724;line-height:1.5}

/* Final fix: lock hero position directly below chips (home/front) */
/* Home/front-page hero rules have been moved to assets/css/home-hero.css
   to keep home-specific layout separate for maintainability. */

/* Cloud hosting hero positioning with padding on background only */
@media (min-width: 721px) {
  .ch-hero {
    margin-top: 0 !important;
    padding-top: 80px !important;
  }
  
  .ch-hero__bg {
    padding-top: 320px !important;
    top: -320px !important;
    height: calc(100% + 320px) !important;
  }
  
  .ch-hero__image {
    margin-top: -60px !important;
  }
}