:root {
      --dark: #3f3b41;
      --dark2: #2f2c30;
      --text: #ffffff;
      --muted: #d7d7d7;

      --gold: #d6ad48;
      --gold2: #f0c66a;
      --orange: #f0a328;

      --soft: #f6edd4;
      --soft2: #f2e0b0;

      --wa: #2db742;
      --tel: #caa44a;

      --shadow: 0 12px 28px rgba(0, 0, 0, .18);
      --shadow2: 0 16px 34px rgba(0, 0, 0, .22);
      --radius: 18px;
      --max: 1200px;
  }

  * {
      box-sizing: border-box
  }

  body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: #1d1d1d;
      background: #fff;
      overflow-x: hidden;
  }

  a {
      color: inherit;
      text-decoration: none
  }

  img {
      max-width: 100%;
      display: block
  }

  .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 20px
  }

  section {
      padding: 72px 0
  }

  /* ==== Titles ==== */
  .title {
      text-align: center;
      font-weight: 900;
      color: var(--gold);
      font-size: 26px;
      margin: 0 0 10px;
  }

  .subline {
      width: 110px;
      height: 4px;
      border-radius: 999px;
      background: #60606a;
      opacity: .7;
      margin: 12px auto 0;
  }

  .serif {
      font-family: Georgia, "Times New Roman", serif, "Poppins", "Raleway";

  }

  .serif .judul {
      display: block;
      font-size: 36px;
      font-weight: 800;
      color: #fff;
      font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  }

  .serif .hl {
      font-family: "Poppins";
      line-height: 42px;
      font-weight: 500;
      font-size: 42px;
  }

  /* ==== HERO (NO NAVBAR) ==== */
  .hero {
      background: var(--dark);
      color: var(--text);
      padding: 46px 0 28px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
  }

  .hero:before {
      content: "";
      position: absolute;
      inset: -60px -120px auto auto;
      width: 520px;
      height: 520px;
      background: radial-gradient(circle at 35% 35%, rgba(214, 173, 72, .30), rgba(214, 173, 72, 0) 65%);
      transform: rotate(12deg);
      pointer-events: none;
  }

  .hero-grid {
      width: 100%;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 34px;
      align-items: center;
  }


  .logoBox {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 5px;
  }

  .logoMark {
      width: 20%;
      height: 20%;
      border-radius: 14px;
      overflow: hidden;
      /* background: rgba(255,255,255,.06); */
      /* background: rgba(255, 255, 255, 0.06); */
      background: rgba(255, 255, 255, 0.37);
      border: 1px solid rgba(255, 255, 255, .15);
      box-shadow: var(--shadow2);
      display: grid;
      place-items: center;
  }

  .logoMark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 8px
  }

  .brandTxt {
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: .3px
  }

  .brandTxt .small {
      font-size: 13px;
      opacity: .85;
      font-weight: 800
  }

  .brandTxt .big {
      font-size: 16px
  }

  .hero h1 {
      margin: 1px 0 18px;
      line-height: 1.1;
      font-size: 48px;
      font-weight: 900;
  }


  .hero h1 .hl {
      color: var(--gold)
  }

  .hero p {
      color: #fff;
      /* font-size: 15px; */
      margin: 0;
  }

  .hero .penjelasan_hero {
      font-size: 18px;
      font-family: "Raleway";
      line-height: 27px;
      max-width: 62ch;
      font-weight: 600;
      margin: 0 0 14px;

  }

  .promoLine {
      margin: 14px 0 18px;
      font-size: 22px;
      font-weight: 900;
      color: #F1FF00;
  }

  .promoLine .red {
      color: #ff3b30;
      text-decoration: underline
  }

  .ctaRow {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 10px;
  }


  .btn {
      border: none;
      border-radius: 999px;
      padding: 13px 22px;
      font-weight: 900;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      letter-spacing: .2px;
      transition: .15s transform ease, .15s opacity ease, .15s filter ease;
      user-select: none;
  }

  .btn:active {
      transform: translateY(1px)
  }

  .btnWA {
      background: var(--wa);
      color: #fff;
      box-shadow: var(--shadow2);
      min-width: 200px;
  }

  .btn ion-icon,
  a ion-icon {
      font-size: 20px;
      flex-shrink: 0;
      line-height: 1;
  }


  .btnOutline {
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255, 255, 255, .35);
      min-width: 200px
  }

  /* tombol pelajari dulu versi ikon panah lingkaran */
  .btnLearn {
      gap: 12px;
  }

  .downIcon {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, .55);
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      transition: .15s ease;
  }

  .downIcon .chev {
      width: 10px;
      height: 10px;
      border-right: 3px solid rgba(255, 255, 255, .95);
      border-bottom: 3px solid rgba(255, 255, 255, .95);
      transform: rotate(45deg);
      margin-top: -2px;
  }

  .btnLearn:hover .downIcon {
      border-color: rgba(255, 255, 255, .75);
      transform: translateY(-1px);
  }

  .btnLearn:hover {
      filter: brightness(1.03);
  }

  /* ==== HERO COLLAGE SLIDER ==== */
  /* ===== COLLAGE (HERO) ===== */
  .collageViewport {
      width: 100%;
      /* tinggi ngikut lebar biar tidak “kepotong” saat responsive */
      aspect-ratio: 16 / 11;
      height: auto;
      overflow: hidden;
      position: relative;
      border-radius: 18px;
  }

  @media (max-width:980px) {
      .collage {
          max-width: 100%;
          margin-left: 0;
      }

      .collageViewport {
          aspect-ratio: 4 / 3;
      }
  }

  .collageTrack {
      display: flex;
      width: 100%;
      height: 100%;
      transform: translateX(0);
      transition: transform .35s ease;
  }

  /* Default: 1 baris (full image) — ini yang bikin tidak krop */
  .collageSlide {
      min-width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: 1fr;
      background: #111;
  }

  /* Kalau suatu slide benar-benar pakai topGrid, tambahkan class withTop */
  .collageSlide.withTop {
      grid-template-rows: 0.85fr 2.35fr;
  }

  /* gambar utama: biar tidak krop */
  .mainImg {
      position: relative;
      width: 100%;
      height: 100%;
  }

  .mainImg img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      /* penting: tidak crop */
      object-position: center;
      display: block;
  }


  /* ===== TOP GRID (thumbnail) ===== */
  .topGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-bottom: 2px solid rgba(255, 255, 255, .12);
  }

  .topGrid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* thumbnail tetap cover biar penuh */
      display: block;
  }

  /* ===== MAIN IMAGE (UTUH / TIDAK KEPOTONG) ===== */
  .mainImg {
      position: relative;
      width: 100%;
      height: 100%;
      background: #0f0f0f;
      /* background saat image contain (ada space) */
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /* ini kuncinya: CONTAIN supaya gambar tidak kepotong */
  .mainImg img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      /* <-- tidak crop */
      object-position: center center;
      display: block;
  }

  /* jika slide tanpa topGrid */
  .collageSlide.noTop {
      grid-template-rows: 1fr;
  }

  .collageSlide.noTop .topGrid {
      display: none;
  }

  /* watermark */
  .wm {
      position: absolute;
      left: 14px;
      top: 14px;
      width: 20%;
      height: 10%;
      border-radius: 14px;
      background: rgba(160, 153, 153, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.788);
      display: grid;
      place-items: center;
      overflow: hidden;
      backdrop-filter: blur(6px);
  }

  .wm img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 10px;
  }

  /* nav buttons */
  .navBtn {
      position: absolute;
      top: 62%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: none;
      background: rgba(255, 255, 255, 0.233);
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      display: grid;
      place-items: center;
      backdrop-filter: blur(6px);
  }

  .navBtn:hover {
      background: rgba(255, 255, 255, 0.425)
  }

  .navBtn.prev {
      left: 10px
  }

  .navBtn.next {
      right: 10px
  }

  /* dots */
  .heroDots {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      display: flex;
      justify-content: center;
      gap: 8px;
      z-index: 3;
      pointer-events: auto;
  }

  .heroDots button {
      width: 8px;
      height: 8px;
      border: none;
      border-radius: 999px;
      background: rgba(255, 255, 255, .35);
      cursor: pointer;
  }

  .heroDots button.active {
      background: rgba(255, 255, 255, .90);
      width: 18px;
  }


  /* ==== Sticky CTA bottom ==== */
  .sticky {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 22px;
      /* lebih naik biar tidak nutup konten */
      z-index: 99;
      pointer-events: none;
  }

  .sticky .wrap {
      display: flex;
      justify-content: center;
      gap: 18px;
      pointer-events: auto;
  }

  /* ==== Sticky Button Upgrade (Premium Hover) ==== */
  .pill {
      width: min(560px, 46vw);
      padding: 14px 18px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #fff;
      border: 2px solid rgba(255, 255, 255, .9);
      font-weight: 950;
      letter-spacing: .3px;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
      transition:
          transform .35s cubic-bezier(.2, .8, .2, 1),
          box-shadow .35s cubic-bezier(.2, .8, .2, 1),
          filter .25s ease;
  }

  /* Hover: naik + shadow lebih dalam */
  .pill:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
      filter: brightness(1.05);
      color: #312727;
  }

  /* Saat ditekan */
  .pill:active {
      transform: translateY(-2px) scale(.98);
      box-shadow: 0 10px 20px rgba(0, 0, 0, .20);
  }

  .pill.wa {
      background: var(--wa)
  }

  .pill.tel {
      background: var(--tel)
  }

  @media (max-width:720px) {
      .sticky .wrap {
          gap: 10px
      }

      .pill {
          width: 48vw;
          padding: 12px 14px;
          font-size: 14px
      }
  }

  /* ==== Section: lead checklist ==== */
  .lead {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: center;
  }

  .person {
      display: flex;
      justify-content: center;
  }

  .circle {
      width: 360px;
      height: 360px;
      /* border-radius: 999px; */
      /* background: radial-gradient(circle at 35% 35%, #ffd27a, #f1b93f); */
      display: grid;
      place-items: center;
      overflow: hidden;
  }

  .circle img {
      width: 88%;
      height: 88%;
      object-fit: contain
  }

  .lead h2 {
      margin: 0 0 10px;
      font-size: 28px;
      font-weight: 900;
      color: #1d1d1d;
  }

  .checks {
      display: grid;
      gap: 12px;
      margin-top: 12px
  }

  .check {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: #333;
      font-size: 15px;
      line-height: 1.45;
      font-weight: 600;
  }

  .check i {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: #22c55e;
      display: inline-grid;
      place-items: center;
      color: #fff;
      font-style: normal;
      font-weight: 950;
      flex: 0 0 auto;
      margin-top: 1px;
  }

  .lead p {
      margin: 14px 0 0;
      line-height: 1.75;
      font-weight: 600;
      color: #333;
  }

  /* ==== About + portfolio ==== */
  .about {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 28px;
      align-items: center;
  }



  .about h3 {
      margin: 0 0 12px;
      font-size: 28px;
      font-weight: 900;
  }

  .about p {
      margin: 0;
      color: #333;
      line-height: 1.75;
      font-weight: 600;
      max-width: 76ch
  }

  /* 
  .strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 22px;
  }

  @media (max-width:980px) {
      .strip {
          grid-template-columns: repeat(2, 1fr)
      }
  }

  @media (max-width:520px) {
      .strip {
          grid-template-columns: 1fr
      }
  }

  .strip img {
      border-radius: 16px;
      box-shadow: var(--shadow);
      height: 150px;
      object-fit: cover;
      border: 1px solid rgba(0, 0, 0, .08);
  } */

  /* ===== CTA PORTO (mirip hargakubah #CTA) ===== */
  /* .ctaPorto{ padding: 40px 0; background:#fff; } */
  .ctaTitle {
      text-align: center;
      font-weight: 700;
      margin: 0 0 10px;
      color: var(--gold);
      font-size: 26px;
      line-height: 1.2;
  }

  .ctaLine {
      width: 92px;
      height: 4px;
      margin: 0 auto 22px;
      background: #6b7785;
      border-radius: 999px;
      opacity: .7;
  }

  /* Desktop: 4 kolom */
  .ctaGrid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
  }

  .ctaItem {
      display: block;
      border-radius: 0;
      /* di contoh terlihat kotak */
      overflow: hidden;
      background: #fff;
      /* border: 3px solid #e4b86a; */
      /* garis emas tipis seperti contoh */
  }

  .ctaItem img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
  }



  /* Android: 2 kolom (jadi 2x2 kalau 4 item) */
  @media (max-width: 820px) {
      .ctaTitle {
          font-size: 20px;
          padding: 0 12px;
      }

      .ctaGrid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
      }

      .ctaItem img {
          height: 120px;
      }
  }

  /* ===== LIGHTBOX: counter 1/4 + panah ===== */
  .ctaLightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .85);
      display: none;
      z-index: 99999;
  }

  .ctaLightbox.isOpen {
      display: block;
  }

  .ctaLbImg {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(980px, 92vw);
      height: auto;
      max-height: 86vh;
      object-fit: contain;
      /* background: rgba(255,255,255,.04); */
  }

  .ctaCaption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 18px;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      font-weight: 700;
      text-align: center;
  }


  .ctaLbCounter {
      position: absolute;
      left: 16px;
      top: 16px;
      color: #fff;
      font-size: 14px;
      opacity: .95;
  }

  .ctaLbClose {
      position: absolute;
      right: 14px;
      top: 10px;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-size: 28px;
      line-height: 44px;
      background: rgba(255, 255, 255, .12);
      color: #fff;
  }

  .ctaLbNav {
      position: absolute;
      top: 50%;
      /* transform: translateY(-50%); */
      width: 52px;
      height: 52px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-size: 38px;
      background: rgba(255, 255, 255, .12);
      color: #fff;
  }

  .ctaLbPrev {
      left: 10px;
  }

  .ctaLbNext {
      right: 10px;
  }

  @media (max-width: 520px) {
      .ctaLbNav {
          width: 46px;
          height: 46px;
          font-size: 34px;
          line-height: 45px;
      }

      .ctaLbClose {
          width: 42px;
          height: 42px;
          font-size: 26px;
          line-height: 42px;
      }
  }

  /* ==== Struktur frame ==== */
  .row {
      display: flex;
      align-items: flex-start;
  }

  .frame {
      margin: 24px auto 0;
      /* max-width: 880px; */
      border-radius: 22px;
      padding: 16px;
      background: linear-gradient(90deg, #ffcc4d, #ff9f33);
      box-shadow: var(--shadow2);
  }

  .frame .inner {
      background: #fff;
      border-radius: 18px;
      padding: 14px;
  }

  .frame img {
      border-radius: 14px
  }

  /* ==== 3 bahan cards ==== */
  .soft {
      background: var(--soft)
  }

  .cards3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 26px;
  }

  /* === Hover putih untuk card bahan === */
  .cards3 .card {
      transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      /* cursor: pointer; */
  }

  /* Card yang awalnya gold, ketika hover jadi putih */
  .cards3 .card.gold {
      background: #d7b05b;
  }

  /* Hover: semua card jadi putih */
  .cards3 .card:hover {
      background: #fff;
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
      border-color: rgba(0, 0, 0, .10);
  }

  /* Saat hover, teks & list di card gold tetap terbaca */
  .cards3 .card.gold:hover h4,
  .cards3 .card.gold:hover .list {
      color: #1d1d1d;
  }

  /* Biar border gambar lebih soft saat hover */
  .cards3 .card:hover .imgbox img {
      border-color: rgba(255, 140, 0, .35);
  }

  /* === Mode "aktif" setelah diklik (tetap putih) === */
  .cards3 .card.is-active {
      background: #fff !important;
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
      border-color: rgba(0, 0, 0, .10);
  }


  .card {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, .06);
  }

  .card.gold {
      background: #d7b05b
  }

  .card .imgbox {
      padding: 16px
  }

  .card .imgbox img {
      border-radius: 14px;
      border: 3px solid rgba(255, 140, 0, .55);
      height: 190px;
      object-fit: cover;
      width: 100%;
      background: #f3f3f3;
  }

  .card .pad {
      padding: 18px
  }

  .card h4 {
      margin: 0 0 8px;
      font-size: 20px;
      font-weight: 900;
      text-align: center;
  }

  .mini-line {
      width: 64px;
      height: 3px;
      margin: 10px auto 0;
      background: #2b2b2b22;
      border-radius: 999px
  }

  .list {
      margin: 14px 0 0;
      display: grid;
      gap: 8px;
      font-size: 14px;
      font-weight: 650
  }

  .li {
      display: flex;
      gap: 10px;
      align-items: center
  }

  .li b {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: #7c3aed;
      display: inline-grid;
      place-items: center;
      color: #fff;
      font-size: 12px;
  }

  .card.gold h4,
  .card.gold .list {
      color: #1d1d1d
  }

  .card.gold .imgbox img {
      border-color: rgba(255, 255, 255, .65)
  }

  .card .desc {
      margin-top: 14px;
      font-size: 14px;
      line-height: 1.6;
      font-weight: 600;
  }

  .card .desc h5 {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 900;
  }

  .card .desc p {
      margin: 0 0 10px;
      color: #333;
  }

  .card.gold .desc p,
  .card.gold .desc h5 {
      color: #1d1d1d;
  }

  /* ==== Model section ==== */
  .models {
      background: var(--soft2)
  }

  .modelRow {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 24px;
  }

  .modelNav {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      background: rgba(0, 0, 0, .22);
      color: #fff;
      font-size: 20px;
      transition: transform .12s ease, filter .12s ease;
  }

  .modelNav:hover {
      filter: brightness(1.05);
      transform: translateY(-1px);
  }

  .modelNav:active {
      transform: translateY(1px);
      filter: brightness(.98);
  }

  .modelGrid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
  }

  /* ===== Models seperti gambar ===== */
  .modelsClean {
      background: var(--soft2);
      /* seperti gambar */
  }

  .modelsHead {
      text-align: center;
      margin-bottom: 26px;
  }

  .modelsHead .kicker {
      font-weight: 800;
      letter-spacing: .8px;
      font-size: 12px;
      color: #2a2a2a;
      opacity: .85;
      text-transform: uppercase;
      margin-bottom: 10px;
  }

  .modelsHead .modelsTitle {
      margin: 0;
      font-weight: 950;
      color: #111;
      font-size: 44px;
      line-height: 1.05;
  }

  .modelsHead .modelsDesc {
      margin: 14px auto 0;
      max-width: 80ch;
      color: #666;
      font-weight: 600;
      line-height: 1.6;
      font-size: 14px;
  }

  /* grid card */
  .modelCards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      margin-top: 20px;
  }

  .mCard {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .08);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
      overflow: hidden;
  }

  .mImg {
      height: 240px;
      overflow: hidden;
      background: #f2f2f2;
  }

  .mImg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1);
      transition: transform .25s ease;
  }

  .mCard:hover .mImg img {
      transform: scale(1.04);
  }

  /* caption bar bawah (biru muda seperti gambar) */
  .mCap {
      background: #eaf2ff;
      padding: 12px 12px;
      font-weight: 800;
      color: #2a2a2a;
      font-size: 16px;
      border-top: 1px solid rgba(0, 0, 0, .06);
  }

  /* responsive */
  @media (max-width: 980px) {
      .modelCards {
          grid-template-columns: repeat(2, 1fr);
      }

      .modelsHead .modelsTitle {
          font-size: 34px;
      }

      .mImg {
          height: 220px;
      }
  }

  @media (max-width: 520px) {
      .modelCards {
          grid-template-columns: 1fr;
      }

      .modelsHead .modelsTitle {
          font-size: 30px;
      }

      .mImg {
          height: 210px;
      }
  }


  @media (max-width:980px) {
      .modelGrid {
          grid-template-columns: repeat(2, 1fr)
      }
  }

  @media (max-width:520px) {
      .modelGrid {
          grid-template-columns: 1fr
      }
  }

  .thumb {
      border-radius: 18px;
      overflow: hidden;
      border: 2px solid rgba(255, 140, 0, .55);
      box-shadow: var(--shadow);
      background: #fff;
  }

  .thumb img {
      width: 100%;
      height: 170px;
      object-fit: cover
  }

  /* ==== 6 alasan ==== */
  /* 1) Reason: hover hanya shadow */
  .reason {
      transition: box-shadow .28s cubic-bezier(.2, .8, .2, 1);
  }

  .reason:hover {
      box-shadow: 0 18px 36px rgba(0, 0, 0, .18);
  }

  /* 2) Iconbox: default (tetap seperti sebelumnya) */
  .iconbox {
      transition: background-color .25s ease, color .25s ease;
      transform-origin: center;
  }

  /* Saat hover card -> iconbox jadi hitam */
  .reason:hover .iconbox {
      color: #111;
  }

  /* 3) Animasi zoom hanya saat hover iconbox */
  @keyframes iconZoomOnce {
      0% {
          transform: scale(1);
      }

      45% {
          transform: scale(1.18);
      }

      100% {
          transform: scale(1);
      }
  }

  .iconbox:hover {
      animation: iconZoomOnce .42s cubic-bezier(.2, .8, .2, 1);
  }

  /* ===== 6 ALASAN: dibuat mirip hargakubah ===== */
  .reasons .grid6 {
      gap: 26px;
      margin-top: 34px;
  }

  .reasons .reason {
      border-radius: 22px;
      padding: 34px 34px 30px;
      min-height: 240px;
      box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
  }

  .reasons .iconbox {
      width: auto;
      height: auto;
      border-radius: 0;
      margin: 6px auto 16px;
      background: transparent;
      font-size: 56px;
      line-height: 1;
      color: #fff;
  }

  .reasons .reason h5 {
      font-size: 18px;
      margin: 0 0 12px;
      letter-spacing: .4px;
  }

  .reasons .reason p {
      font-size: 14.5px;
      line-height: 1.65;
      font-weight: 650;
      text-align: center;
      max-width: 40ch;
      /* KUNCI biar rapi */
      margin: 0 auto;
  }

  .reasons {
      /* background: var(--soft2); */
      padding-top: 5%
  }

  .grid6 {
      margin-top: 26px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
  }

  @media (max-width:760px) {
      .grid6 {
          grid-template-columns: 1fr
      }
  }

  .reason {
      background: #d7b05b;
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 20px 18px;
      color: #fff;
      position: relative;
      overflow: hidden;
  }

  .reason:before {
      content: "";
      position: absolute;
      inset: -40px -50px auto auto;
      width: 140px;
      height: 140px;
      background: rgba(255, 255, 255, .12);
      border-radius: 999px;
      transform: rotate(10deg);
  }

  .iconbox {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      /* background: rgba(255, 255, 255, .18); */
      margin: 0 auto 12px;
      display: grid;
      place-items: center;
      font-size: 26px;
  }

  .reason h5 {
      margin: 0 0 10px;
      text-align: center;
      font-weight: 950;
      font-size: 14px;
      letter-spacing: .4px;
      text-transform: uppercase;
  }

  .reason p {
      margin: 0;
      color: rgba(255, 255, 255, .92);
      font-size: 13px;
      line-height: 1.6;
      font-weight: 650;
  }

  /* ==== Benefits (4 card) ==== */
  /* .benefitGrid {
      margin-top: 26px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
  } */
  .benefitGrid {
      margin-top: 34px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
  }

  /* @media (max-width:980px) {
      .benefitGrid {
          grid-template-columns: repeat(2, 1fr);
      }
  } */

  @media (max-width:520px) {
      .benefitGrid {
          grid-template-columns: 1fr;
      }

      .benefit {
          padding: 22px 18px 20px;
          /* sedikit lebih rapat agar proporsional */
      }

      .benefit h6 {
          font-size: 20px;
          /* jangan kebesaran */
          line-height: 1.15;
      }

      .benefit p {
          max-width: 100% !important;
          /* KUNCI: jangan pakai 32ch di mobile */
          font-size: 13.5px;
          line-height: 1.6;
          margin: 0 auto;
      }
  }

  /* CARD default */
  .benefit {
      background: #fff;
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 10px;
      box-shadow: 0 12px 22px rgba(0, 0, 0, .12);
      padding: 26px 22px 24px;
      text-align: center;
      text-align: center;
      border: 1px solid rgba(0, 0, 0, .06);

      /* taruh transition di sini (bukan di :hover) */
      transition: background-color .18s ease,
          transform .18s ease,
          box-shadow .18s ease,
          border-color .18s ease;
  }

  /* HOVER card */
  .benefit:hover {
      background: var(--gold);
      border-color: rgba(0, 0, 0, .10);
  }

  /* ICON default */
  .bicon {
      /* width: 74px;
      height: 74px;
      border-radius: 999px;
      background: #b08a6e;
      margin: 0 auto 10px;
      display: grid;
      place-items: center;
      font-size: 28px;
      color: #fff; */
      width: 92px;
      height: 92px;
      border-radius: 999px;
      background: #b08a6e;
      /* coklat seperti referensi */
      margin: 6px auto 16px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 40px;
  }

  /* ICON ikut hover */
  .benefit:hover .bicon {
      background: #646e78;
      color: #fff;
  }

  /* JUDUL default */
  .benefit h6 {
      /* margin: 8px 0 8px;
      font-size: 16px;
      font-weight: 950;
      color: #1f1f1f;
      transition: color .18s ease; */
      margin: 10px 0 10px;
      font-size: 22px;
      font-weight: 900;
      color: #2a2a2a;
      line-height: 1.15;
  }

  /* PARAGRAF default */
  .benefit p {
      margin: 0 auto;
      max-width: 32ch;
      color: #666;
      font-size: 14px;
      line-height: 1.6;
      font-weight: 600;
      /* margin: 0;
      color: #444;
      font-size: 13px;
      line-height: 1.55;
      font-weight: 650; */
      /* transition: color .18s ease; */
  }

  /* TEKS ikut hover */
  .benefit:hover h6 {
      color: #1a1a1a;
  }

  .benefit:hover p {
      color: rgba(0, 0, 0, .75);
  }

  /* ==== Workshop slider ==== */
  .wsHead {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 22px;
      color: #555;
      font-weight: 800;
  }

  .wsSlider {
      margin: 18px auto 0;
      max-width: 920px;
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      gap: 12px;
      align-items: center;
  }

  .wsStage {
      background: #fff;
      border-radius: 18px;
      border: 2px solid rgba(255, 140, 0, .4);
      box-shadow: var(--shadow);
      overflow: hidden;
  }

  .wsStage img {
      width: 100%;
      height: 280px;
      object-fit: cover
  }

  .wsDots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 10px
  }

  .wsDot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #bbb
  }

  .wsDot.active {
      background: var(--gold)
  }

  /* ==== Final CTA + countdown (FIX SPACING) ==== */
  /* ==== Final CTA + countdown (TATA LETAK LEBIH MIRIP REFERENSI) ==== */
  .final {
      background: radial-gradient(circle at 35% 20%, rgba(214, 173, 72, .18), rgba(214, 173, 72, 0) 55%),
          linear-gradient(180deg, var(--dark2), #1f1e20);
      color: #fff;

      /* lebih lega atas & bawah */
      padding: 92px 0 220px;
      /* bawah aman dari sticky */
  }

  .final h2 {
      text-align: center;
      margin: 0;
      font-size: 36px;
      font-weight: 900;
      color: var(--gold2);
  }

  .final .sub {
      text-align: center;
      margin: 16px auto 0;
      color: rgba(255, 255, 255, .9);
      max-width: 74ch;
      line-height: 1.7;
      font-weight: 650;
      font-size: 15px;
  }

  /* countdown jangan terlalu mepet ke konten bawah/atas */
  .countdown {
      margin: 34px auto 26px;
      /* atas lebih jauh, bawah lebih lega */
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
  }

  .box {
      width: 124px;
      background: #5b5f66;
      border-radius: 10px;
      padding: 12px 10px 14px;
      text-align: center;
      box-shadow: var(--shadow2);
  }

  .box .num {
      font-size: 34px;
      font-weight: 950;
      color: #ff3b30
  }

  .box .lbl {
      font-size: 12px;
      opacity: .9;
      font-weight: 900;
      letter-spacing: .4px;
      text-transform: uppercase
  }

  /* jarak countdown ke card */
  .ctaStack {
      margin-top: 16px;
      display: flex;
      justify-content: center;
  }

  .promoCard {
      width: min(720px, 92vw);
      background: #fff;
      border-radius: 20px;
      padding: 40px 34px 34px;
      /* lebih lega biar "premium" */
      color: #222;
      box-shadow: var(--shadow2);
      text-align: center;
  }

  /* Mobile spacing biar tetap enak */
  @media (max-width:720px) {
      .final {
          padding: 70px 0 210px;
      }

      .final h2 {
          font-size: 30px;
      }

      .promoCard {
          padding: 32px 20px 26px;
      }

      .box {
          width: 112px;
      }
  }

  .promoCard .tag {
      font-weight: 950;
      margin-bottom: 10px
  }

  .promoCard .big {
      font-size: 74px;
      font-weight: 950;
      color: var(--wa);
      margin: 10px 0 14px;
      line-height: 1
  }

  .plist {
      display: grid;
      gap: 10px;
      justify-content: center;
      margin: 16px auto 22px;
      text-align: left;
      max-width: 460px;
  }

  .plist .row {
      display: flex;
      gap: 10px;
      align-items: center;
      font-weight: 800;
      font-size: 14px;
  }

  .plist .row span {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #22c55e;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 950;
      flex: 0 0 auto;
  }

  /* Chevron 3 lapis + animasi (mirip referensi) */
  /* ===== Triple Chevron SOLID (seperti hargakubah) ===== */
  .tripleChevron {
      width: 160px;
      margin: 18px auto 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      pointer-events: none;
  }

  /* tiap span = 1 chevron solid */
  .tripleChevron span {
      width: 140px;
      height: 54px;
      background: var(--wa);
      /* hijau utama */
      clip-path: polygon(0% 0%,
              50% 42%,
              100% 0%,
              100% 55%,
              50% 100%,
              0% 55%);
      opacity: .25;
      transform: translateY(-10px);
      animation: hkSolidChevron 1.2s infinite ease-in-out;
      will-change: transform, opacity;
  }

  /* urutan animasi + tingkat opacity seperti referensi */
  .tripleChevron span:nth-child(1) {
      opacity: .18;
      filter: saturate(0.9);
      animation-delay: 0s;
  }

  .tripleChevron span:nth-child(2) {
      opacity: .85;
      animation-delay: .16s;
  }

  .tripleChevron span:nth-child(3) {
      opacity: .65;
      animation-delay: .32s;
  }

  /* animasi turun + fade */
  @keyframes hkSolidChevron {
      0% {
          transform: translateY(-12px);
          opacity: .10;
      }

      35% {
          transform: translateY(0px);
          opacity: 1;
      }

      70% {
          transform: translateY(14px);
          opacity: .25;
      }

      100% {
          transform: translateY(16px);
          opacity: 0;
      }
  }

  /* .tripleChevron{
      width:72px;
      margin:14px auto 18px;
      display:grid;
      gap:10px;
      justify-items:center;
    }
  .tripleChevron span{
  width:56px;
  height:20px;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:16px solid rgba(34,197,94,1); 
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.12));
  border-radius:2px;
  animation: chevDrop 1.15s infinite ease-in-out;
  will-change: transform, opacity;
}

@keyframes chevDrop{
  0%   { transform: translateY(-10px); opacity:.12; }
  35%  { transform: translateY(0);     opacity:1; }
  75%  { transform: translateY(12px);  opacity:.18; }
  100% { transform: translateY(14px);  opacity:0; }
}

    .tripleChevron span:nth-child(1){ animation-delay: 0s; }
    .tripleChevron span:nth-child(2){ animation-delay: .18s; }
    .tripleChevron span:nth-child(3){ animation-delay: .36s; } */

  /* @keyframes chevDrop{
      0%   { transform: translateY(-8px); opacity:.18; }
      35%  { transform: translateY(0);    opacity:1; }
      70%  { transform: translateY(10px); opacity:.25; }
      100% { transform: translateY(12px); opacity:0; }
    } */

  .promoBtn {
      width: 100%;
      justify-content: center;
      padding: 15px 20px;
      border-radius: 999px;
      font-weight: 950;
      letter-spacing: .2px;
      box-shadow: none;
      margin-top: 6px;
  }

  .promoBtn:hover {
      filter: brightness(1.05);
      transform: translateY(-1px);
  }

  .promoBtn:active {
      transform: translateY(1px);
      filter: brightness(.98);
  }

  .waDot {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: #fff;
      display: inline-block;
  }

  /* ==== Footer ==== */
  footer {
      background: #141414;
      color: #e9e9e9;
      /* padding: 54px 0 130px; */
      padding: 54px 0 110px;
      /* space for sticky */
      position: relative;
      overflow: hidden;
  }

  footer:before {
      content: "";
      position: absolute;
      inset: 0;
      background:
          linear-gradient(180deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .92)),
          url("assets/img/bg-footer.jpg");
      background-size: cover;
      background-position: center;
      opacity: .5;
      pointer-events: none;
  }

  .foot {
      position: relative;
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
      gap: 22px;
  }


  .foot h4 {
      margin: 0 0 10px;
      color: var(--gold);
      font-size: 16px;
      font-weight: 950
  }

  .foot p,
  .foot a {
      /* color: #d7d7d7; */
      color: #fff;
      font-size: 15px;
      font-family: 'Lora', serif;
      /* line-height: 1.65; */
      line-height: 16.5px;
      font-weight: normal
  }

  /* .foot a:hover {
      text-decoration: underline
  } */

  footer a {
      position: relative;
      display: inline-block;
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      transition: color .3s ease;
      font-family: 'Lora', serif;
  }

  /* Hover warna emas */
  footer a:hover {
      transition: color .3s ease;
      color: #d4af37;
  }

  /* Underline animasi */
  /* footer a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: #d4af37;
  transition: width .3s ease;
} */
  footer .informasi p:hover {
      color: #d4af37;
      transition: color .3s ease;
  }

  footer a:hover::after {
      width: 100%;
  }

  /* Heading footer lebih tegas */
  footer h4 {
      color: #fff;
      font-weight: 800;
      margin-bottom: 12px;
      position: relative;
  }


  .logoRow {
      display: flex;
      width: 100%;
      gap: 12px;
      align-items: center
  }

  .badge {
      width: 55%;
      height: 60%;
      border-radius: 14px;
      /* background: linear-gradient(135deg, var(--gold), #a67c1a); */
      padding: 10px;
      background: rgba(255, 255, 255, 0.26);
      display: grid;
      place-items: center;
      font-weight: 950;
      color: #2a1e00;
      box-shadow: var(--shadow2);
  }

  .small {
      opacity: .7;
      font-size: 12px;
      margin-top: 14px
  }

  /* socials */
  .foot .socialRow {
      display: flex;
      gap: 10px;
      margin-top: 12px;
  }

  .foot .soc {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      text-decoration: none;
      color: #fff;
      box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
      transition: transform .16s ease, filter .16s ease;
  }

  .foot .soc:hover {
      transform: translateY(-2px);
      filter: brightness(1.06);
  }

  .foot .soc.wa {
      background: var(--wa);
  }

  .foot .soc.fb {
      background: #1877F2;
  }

  .foot .soc i {
      font-size: 16px;
  }

  /* ==== spacer bottom to avoid sticky overlap ==== */
  .spacer {
      height: 1px
  }

  .copyright {
      background: #0e0e0e;
      text-align: center;
      padding: 16px 20px;
      font-size: 13px;
      font-weight: 600;
      color: #bdbdbd;
      border-top: 1px solid rgba(255, 255, 255, .08);
  }


  /* portofolio */
  /* ===== PORTOFOLIO CARD ===== */
  .portoGrid {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 18px;
  }

  .portoCard {
      margin: 0;
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, .08);
      box-shadow: var(--shadow);
      transition: transform .18s ease, box-shadow .18s ease;
  }

  .portoCard img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      display: block;
  }

  .portoCard figcaption {
      padding: 12px 14px;
      font-weight: 800;
      color: #2a2a2a;
      background: #f7f7f7;
      border-top: 1px solid rgba(0, 0, 0, .06);
  }

  .portoCard:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 38px rgba(0, 0, 0, .18);
  }

  /* ===== WORKSHOP (MULTI PANEL CAROUSEL) ===== */
  .workshop {
      padding: 56px 0;
  }

  .wk {
      position: relative;
      margin-top: 22px;
  }

  /* area terlihat */
  .wkViewport {
      overflow: hidden;
      border-radius: 22px;
  }

  /* track geser */
  .wkTrack {
      display: flex;
      gap: 18px;
      transition: transform .45s ease;
      will-change: transform;
      padding: 6px;
      /* biar shadow tidak kepotong */
  }

  /* item = 1 card */
  .wkItem {
      flex: 0 0 calc((100% - 36px) / 3);
      /* 3 item terlihat (gap 18*2 = 36) */
  }

  /* card style */
  .wkCard {
      background: #fff;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, .08);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
  }

  /* gambar single */
  .wkCard>img {
      width: 100%;
      height: 420px;
      /* BESAR seperti referensi */
      object-fit: cover;
      display: block;
  }

  /* kolase 2x2 */
  .wkCollage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 10px;
  }

  .wkCollage img {
      width: 100%;
      height: 202px;
      /* 2 baris -> total mendekati tinggi single */
      object-fit: cover;
      border-radius: 16px;
      display: block;
  }

  /* tombol panah */
  .wkNav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      border: none;
      border-radius: 999px;
      background: rgba(0, 0, 0, .45);
      color: #fff;
      font-size: 28px;
      cursor: pointer;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .wkNav.prev {
      left: 10px;
  }

  .wkNav.next {
      right: 10px;
  }

  .wkNav:hover {
      background: rgba(0, 0, 0, .60);
  }

  /* dots */
  .wkDots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
  }

  .wkDots button {
      width: 8px;
      height: 8px;
      border: none;
      border-radius: 999px;
      background: rgba(0, 0, 0, .25);
      cursor: pointer;
  }

  .wkDots button.active {
      background: rgba(0, 0, 0, .60);
      width: 22px;
      /* dot memanjang */
  }

  /* RESPONSIVE */
  @media (max-width: 980px) {
      .wkItem {
          flex-basis: calc((100% - 18px) / 2);
      }

      /* 2 item */
      .wkCard>img {
          height: 360px;
      }

      .wkCollage img {
          height: 170px;
      }
  }

  @media (max-width: 600px) {
      .wkItem {
          flex-basis: 100%;
      }

      /* 1 item */
      .wkCard>img {
          height: 280px;
      }

      .wkCollage img {
          height: 130px;
      }
  }

  /* ===== FULLSCREEN VIEWER ===== */
  .img-viewer {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .94);
      z-index: 99999;

      align-items: center;
      justify-content: center;
  }

  /* kotak tengah */
  .viewer-box {
      text-align: center;
      max-width: 90%;
  }

  /* nomor halaman kiri atas */
  .viewer-count {
      position: absolute;
      top: 18px;
      left: 22px;
      color: #fff;
      font-size: 14px;
      opacity: .8;
      letter-spacing: .5px;
  }


  /* gambar */
  .viewer-content {
      max-width: 100%;
      max-height: 80vh;
      /* border:4px solid #f59e0b;  */
      border-radius: 6px;
  }

  /* judul bawah */
  .viewer-title {
      margin-top: 12px;
      color: #fff;
      font-size: 16px;
      opacity: .85;
  }

  /* tombol close */
  .img-viewer .close {
      position: absolute;
      top: 18px;
      right: 28px;
      color: #fff;
      font-size: 42px;
      cursor: pointer;
  }

  /* tombol navigasi */
  .img-viewer .nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.15);
      border: none;
      color: #fff;
      font-size: 42px;
      padding: 12px 18px;
      cursor: pointer;
      transition: .2s;
      border-radius: 10px;
  }

  .img-viewer .nav:hover {
      background: rgba(255, 255, 255, 0.35);
  }

  .img-viewer .prev {
      left: 20px;
  }

  .img-viewer .next {
      right: 20px;
  }


  /* ===== KHUSUS STRUKTUR: 2 gambar sejajar & tidak kebesaran ===== */
  .struktur .row {
      display: flex;
      /* tetap row menyamping */
      gap: 26px;
      /* jarak antar kolom */
      align-items: stretch;
  }

  .struktur .col {
      flex: 1;
      /* bagi rata 2 kolom */
      min-width: 0;
  }

  .struktur .frame {
      width: 100%;
      margin: 24px 0 0;
      /* jangan auto center */
  }

  .struktur .frame .inner {
      height: 360px;
      /* KUNCI: samakan tinggi + kecilkan */
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .struktur .frame img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      /* utuh */
  }


  /* lokasi */
  /* =========================
   FOOTER INFORMASI KONTAK
========================= */

  .informasi {
      display: flex;
      font-family: 'Lora', serif;
      flex-direction: column;
      gap: 14px;
  }

  .informasi h4 {
      color: #d4af37;
      font-weight: 800;
      margin-bottom: 10px;
  }

  .informasi .info-item {
      display: flex;
      font-size: 15px;
      align-items: flex-start;
      gap: 10px;
      color: #fff;
      text-decoration: none;
      transition: all .3s ease;
      line-height: 16.5px;
  }

  .informasi .icon {
      color: #d4af37;
      font-size: 16px;
      min-width: 20px;
  }

  /* paksa semua svg di .icon jadi emas */
  .icon svg,
  .icon svg * {
      fill: #d4af37 !important;
      stroke: #d4af37 !important;
      /* jaga-jaga kalau icon pakai stroke */
  }

  .informasi .info-item:hover {
      color: #d4af37;
  }

  /* Scroll reveal */
  .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .6s ease, transform .6s ease;
  }

  .reveal.is-inview {
      opacity: 1;
      transform: none;
  }

  .reveal[data-delay="1"] {
      transition-delay: .08s
  }

  .reveal[data-delay="2"] {
      transition-delay: .16s
  }

  .reveal[data-delay="3"] {
      transition-delay: .24s
  }


  /* 
   KONSULTAN CTA
 */
  .konsultanCta {
      background: #fff;
      padding: 70px 0
  }

  /* .konsultanWrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center} */

  .konsultanCopy .title {
      margin: 0 0 10px
  }

  .konsultanCopy .modelsDesc {
      /* max-width:620px; */
      text-align: center;
  }

  /* .konsultanArrows {
      display: flex;
      gap: 22px;
      align-items: center;
      justify-content: center;
      margin-top: 14px
  } */

  /* ==== PANAH KONSULTAN ==== */
  /* Panah di tengah */
  .konsultanArrows {
      display: flex;
      justify-content: center;
      gap: 50px;
      margin-top: 45px;
      margin-bottom: 25px;
  }

  /* bentuk panah */
  .konsultanArrows span {
      position: relative;
      width: 0;
      height: 0;
  }

  /* batang panah */
  .konsultanArrows span::before {
      content: "";
      position: absolute;
      left: -5px;
      top: -35px;
      width: 10px;
      height: 40px;
      background: #ff2c2c;
      border-radius: 5px;
  }

  /* segitiga ujung panah */
  .konsultanArrows span::after {
      content: "";
      position: absolute;
      top: 0;
      left: -15px;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 20px solid #ff2c2c;
  }

  /* animasi naik turun */
  @keyframes arrowMove {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(12px);
      }
  }

  .konsultanArrows span {
      animation: arrowMove 1.2s ease-in-out infinite;
  }

  /* delay berbeda agar bergantian */
  /* .konsultanArrows span:nth-child(1) { animation-delay: 0s; }
.konsultanArrows span:nth-child(2) { animation-delay: .12s; }
.konsultanArrows span:nth-child(3) { animation-delay: .24s; } */

  /* kalau user pilih reduced-motion */
  @media (prefers-reduced-motion: reduce) {
      .konsultanArrows span {
          animation: none;
      }
  }

  /* .konsultanArrows span {
      width: 0;
      height: 0;
      border-left: 18px solid transparent;
      border-right: 18px solid transparent;
      border-top: 32px solid #e11;
      filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18));
      animation: kArrow 1.2s infinite ease-in-out
  } */

  /* .konsultanArrows span:nth-child(2) {
      animation-delay: .15s
  }

  .konsultanArrows span:nth-child(3) {
      animation-delay: .3s
  } */

  /* @keyframes kArrow {

      0%,
      100% {
          transform: translateY(0)
      }

      50% {
          transform: translateY(8px)
      }
  } */
  /* ==== ANIMASI PANAH NAIK-TURUN ==== */
  @keyframes arrowBob {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(10px);
      }

      /* turun 10px */
  }

  .konsultanArrows span {
      animation: arrowBob 1s ease-in-out infinite;
      will-change: transform;
  }

  /* bikin efek gelombang (tidak bareng) */
  /* .konsultanArrows span:nth-child(1) { animation-delay: 0s; }
.konsultanArrows span:nth-child(2) { animation-delay: .15s; }
.konsultanArrows span:nth-child(3) { animation-delay: .30s; } */

  /* optional: kalau user pilih reduce motion, matikan animasi */
  @media (prefers-reduced-motion: reduce) {
      .konsultanArrows span {
          animation: none;
      }
  }

  /* .konsultanSection{
  display: flex;
  justify-content: center;
} */

  /* .konsultanCard{
  max-width: 420px;
  width: 100%;
} */
  /* .konsultanCard {
    
      background: #f6f6f6;
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 18px
  } */
  /* card: auto rapi + bisa ditengah */
  .konsultanCard {
      width: 100%;
      max-width: 420px;
      /* kunci: batas lebar biar rapi */
      margin-inline: auto;
      /* center */
      background: #f6f6f6;
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 15px;
  }

  .konsultanCardInner {
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, .06)
  }

  .konsultanPhoto {
      display: flex;
      justify-content: center;
      background: linear-gradient(180deg, #dfe7ef, #f7fafc);
      padding: 18px
  }

  .konsultanPhoto img {
      width: min(260px, 100%);
      height: auto;
      border-radius: 14px;
      box-shadow: 0 12px 24px rgba(0, 0, 0, .18)
  }

  .konsultanMeta {
      padding: 16px 18px 18px;
      text-align: center
  }

  .konsultanName {
      font-weight: 900;
      letter-spacing: .3px;
      font-size: 18px
  }

  .konsultanRole {
      font-weight: 700;
      color: #4b5563;
      margin-top: 4px
  }

  .konsultanNote {
      color: #6b7280;
      font-size: 13px;
      margin-top: 6px
  }

  .btnWaBig {
      margin-top: 14px;
      display: inline-flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      background: var(--wa);
      color: #fff;
      text-decoration: none;
      padding: 12px 16px;
      border-radius: 12px;
      font-weight: 900
  }

  .btnWaBig:hover {
      filter: brightness(.95)
  }

  .btnWaBig .waIco {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .14);
      display: inline-flex;
      align-items: center;
      justify-content: center
  }

  .miniHint {
      margin-top: 10px;
      color: #6b7280;
      font-size: 12px
  }

  @media (max-width: 980px) {
      .konsultanWrap {
          grid-template-columns: 1fr
      }

      .konsultanArrows {
          justify-content: center
      }
  }


  /* 
   CONTACT FORM
 */
  .contactSection {
      background: #fff;
      padding: 70px 0
  }

  .contactGrid {
      margin-top: 26px;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 18px;
      align-items: start
  }

  .contactInfoCard {
      background: var(--dark2);
      color: #fff;
      border-radius: 18px;
      padding: 20px;
      box-shadow: var(--shadow)
  }

  .contactHead {
      margin: 0 0 8px;
      font-size: 20px
  }

  .contactDesc {
      margin: 0 0 14px;
      color: #d1d5db;
      font-size: 14px;
      line-height: 1.7
  }

  .contactRow {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin: 10px 0;
      color: #e5e7eb
  }

  .contactRow i {
      color: var(--gold);
      margin-top: 3px
  }

  .contactRow a {
      color: #e5e7eb;
      text-decoration: none
  }

  .contactRow a:hover {
      color: var(--gold)
  }

  .contactQuickBtns {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap
  }

  .contactQuickBtns .cbtn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      font-weight: 700;
      padding: 10px 14px;
      border-radius: 12px;
      color: #fff
  }

  .contactQuickBtns .cbtn.wa {
      background: var(--wa)
  }

  .contactQuickBtns .cbtn.tel {
      background: var(--tel)
  }

  .contactForm {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .10);
      border-radius: 18px;
      padding: 18px;
      box-shadow: var(--shadow)
  }

  .fgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
  }

  .frow {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px
  }

  .frow label {
      font-weight: 900;
      color: #374151
  }

  .frow input,
  .frow textarea {
      border: 1px solid rgba(0, 0, 0, .18);
      border-radius: 12px;
      padding: 12px 12px;
      font-size: 14px;
      outline: none
  }

  .frow input:focus,
  .frow textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(214, 173, 72, .18)
  }

  .formBtn {
      width: 100%;
      border: 0;
      border-radius: 14px;
      background: var(--wa);
      color: #fff;
      font-weight: 950;
      padding: 13px 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px
  }

  .formBtn:hover {
      filter: brightness(.96)
  }

  .formNote {
      margin-top: 10px;
      color: #6b7280;
      font-size: 12px;
      text-align: center
  }

  @media (max-width: 980px) {
      .contactGrid {
          grid-template-columns: 1fr
      }

      .fgrid {
          grid-template-columns: 1fr
      }
  }


  /* ================= FAQ ================= */
  .faqSection {
      background: #f7f4ea;
  }

  .faqList {
      margin-top: 30px;
      max-width: 980px;
      margin-left: auto;
      margin-right: auto;
      column-count: 2;
      /* jadi 2 kolom */
      column-gap: 16px;
  }

  /* Mobile balik 1 kolom */
  @media (max-width: 820px) {
      .faqList {
          column-count: 1;
      }
  }

  .faqItem {
      display: inline-block;
      width: 100%;
      margin-bottom: 16px;
      break-inside: avoid;

      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  }

  .faqAnswer {
      padding: 0 20px 16px;
      line-height: 1.7;
  }

  .faqAnswer p {
      margin: 10px 0;
      color: #444;
  }

  .faqAnswer ol,
  .faqAnswer ul {
      margin: 10px 0 10px 18px;
      padding: 0;
  }

  .faqAnswer li {
      margin: 8px 0;
      color: #444;
  }

  .faqAnswer b {
      color: #222;
  }


  .faqQuestion {
      width: 100%;
      background: #fff;
      border: none;
      padding: 16px 20px;
      font-weight: 700;
      font-size: 15px;
      display: flex;
      justify-content: space-between;
      align-items: start;
      text-align: left;
      cursor: pointer;
  }

  .faqIcon {
      font-weight: 900;
      font-size: 18px;
      transition: transform .2s ease;
  }

  .faqAnswer {
      display: none;
      padding: 0 20px 16px;
      background: #fff;
      font-size: 14px;
      line-height: 1.6;
  }

  .faqItem.active .faqAnswer {
      display: block;
  }

  .faqItem.active .faqIcon {
      transform: rotate(45deg);
      /* plus jadi X */
  }

  /* ================= BLOG ================= */

  .blogSection {
      background: var(--soft2);
  }

  .blogGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 30px;
  }

  @media (max-width:980px) {
      .blogGrid {
          grid-template-columns: 1fr;
      }
  }

  .blogCard {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: .2s ease;
  }

  .blogCard:hover {
      transform: translateY(-4px);
  }

  .blogCard img {
      width: 100%;
      height: 200px;
      object-fit: cover;
  }

  .blogContent {
      padding: 18px;
  }

  .blogContent h3 {
      margin: 0 0 10px;
      font-size: 17px;
      font-weight: 900;
  }

  .blogContent p {
      font-size: 14px;
      color: #555;
      margin-bottom: 12px;
  }

  .blogContent a {
      font-weight: 700;
      color: var(--gold);
  }


  /* MOBILE RESPONSIVE*/

  /* Tablet kecil / HP besar */
  @media (max-width: 768px) {
      .hero {
          padding: 30px 0 14px;
          min-height: auto;
      }

      .spacer {
          height: 1px;
      }

      .hero {
          min-height: auto;
          padding: 34px 0 18px;
      }

      .hero-grid {
          grid-template-columns: 1fr;
          gap: 22px
      }

      /* hero jadi fokus teks dulu, rata tengah */
      .logoBox {
          justify-content: center;
          margin-bottom: 5px;
      }

      .lead {
          grid-template-columns: 1fr
      }

      .ctaPorto .about {
          grid-template-columns: 1fr;
          justify-items: center;
          text-align: center;
          gap: 18px;
      }

      .ctaPorto .about .person {
          grid-row: 1;
      }

      .ctaPorto .about>div:first-child {
          grid-row: 2;
      }

      .ctaPorto .about p {
          text-align: left;
      }

      /* logo jangan pakai % di mobile (biar tidak aneh) */
      .logoMark {
          width: 92px;
          height: 92px;
          border-radius: 18px;
      }

      .hero h1,
      .hero p,
      .promoLine {
          text-align: center;
      }

      /* override ukuran judul yg masih inline di HTML */
      .hero .judul {
          font-size: 26px !important;
          line-height: 28.6px;
          display: block;
          font-family: "Playfair";
          font-weight: 800;
      }

      .hero .hl {
          font-size: 35px !important;
          line-height: 35px;
          display: block;
          font-family: "Poppins";
          font-weight: 500;
      }

      .hero p {
          font-weight: 600;
          max-width: 42ch;
          margin-left: auto;
          margin-right: auto;
          font-size: 16px;
          font-family: "Raleway";
          line-height: 24px;
      }

      .promoLine {
          font-size: 20px;
      }

      /* tombol jadi 1 kolom penuh seperti contoh */
      .ctaRow {
          flex-direction: column;
          align-items: stretch;
          gap: 12px;
      }

      .ctaRow .btn {
          width: 100%;
          min-width: 0;
          padding: 14px 18px;
      }

      /* collage ikut full width (kalau tetap mau tampil di mobile besar) */
      .collage {
          max-width: 100%;
          margin: 12px auto 0;
      }

      .struktur .row {
          flex-direction: column;
      }

      .struktur .frame .inner {
          height: 320px;
      }

      .foot .socialRow {
          justify-content: center;
      }

      .foot {
          grid-template-columns: 1fr
      }

  }

  /* HP (layout benar-benar “android” seperti screenshot kamu) */
  @media (max-width: 520px) {

      /* biasanya di hargakubah hero mobile fokus teks + CTA,
     jadi slider/collage bisa disembunyikan */
      /* .collage{
    display: none;
  } */
      .cards3 {
          grid-template-columns: 1fr
      }

      .btn ion-icon,
      a ion-icon {
          font-size: 20px;
      }


      .sticky {
          bottom: 12px;
      }

      .sticky .wrap {
          padding: 0 12px;
          gap: 10px;
      }

      .pill {
          width: calc(50% - 6px);
          max-width: 220px;
          padding: 12px 14px;
          font-size: 14px;
      }

      .logoMark {
          width: 40%;
          height: 40%;
      }

      .foot {
          grid-template-columns: 1fr
      }
  }

  /* HP kecil */
  @media (max-width: 380px) {
      .hero .judul {
          font-size: 26px !important;
      }

      .hero .hl {
          font-size: 35px !important;
      }

      .promoLine {
          font-size: 18px;
      }
  }