/* =========================================================
   Born To Inspire — Landing Page
   Palet dan tipografi diambil langsung dari file desain Figma
   ========================================================= */

/* ---------- 1. Token ---------- */
:root{
  --blue:#0D5388;
  --blue-bright:#1A7EC9;
  --navy:#0A2540;
  --navy-deep:#071E3D;
  --slate:#3D5A73;
  --muted:#6B8299;
  --ice:#EBF4FD;
  --ice-soft:#F0F7FD;
  --line:#D9E8F4;
  --cream:#EFDECC;
  --cream-soft:#F7F0E8;
  --gold:#D7B48E;
  --white:#fff;

  --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  --wrap:1120px;
  --pad:24px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-pill:100px;

  --shadow-sm:0 2px 10px rgba(10,37,64,.06);
  --shadow-md:0 12px 32px rgba(10,37,64,.10);
  --shadow-lg:0 24px 60px rgba(10,37,64,.16);

  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px; /* tinggi navbar + napas */
}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p,blockquote,figure{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;}

:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:4px;}

.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:var(--white);color:var(--blue);
  padding:12px 20px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;box-shadow:var(--shadow-md);
}
.skip-link:focus{left:24px;}

/* ---------- 3. Layout & utilitas ---------- */
.container{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--pad);
}

.eyebrow{
  font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.eyebrow--light{color:rgba(255,255,255,.72);}

.h2{
  font-family:var(--font-serif);
  font-size:clamp(30px,4.1vw,48px);
  font-weight:600;line-height:1.15;
  letter-spacing:-.01em;color:var(--navy);
  overflow-wrap:break-word;
  text-wrap:balance;
}
.h2 em{font-style:italic;font-weight:500;color:var(--blue);}
.h2--light{color:var(--white);}
.h2--light em{color:var(--gold);}

.lede{font-size:15px;line-height:1.8;color:var(--slate);}

/* Poppins melompat dari 500 ke 700, dan 700 terasa berteriak di badan teks.
   600 sudah cukup menonjol tanpa memutus alur bacaan.
   Dulu aturan ini cuma dipasang di .lede. Sejak penebalan menyebar ke kartu
   pilar, kartu layanan, dan paragraf CTA, menambalnya satu per satu jadi
   tidak masuk akal, jadi dijadikan satu aturan untuk seluruh halaman. */
strong{font-weight:600;}

/* Judul yang cuma dibutuhkan pembaca layar, supaya urutan h1 sampai h3
   tetap utuh tanpa menambah tulisan di layar. */
.sr-only{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

.sec-head{max-width:640px;margin-bottom:56px;}
.sec-head__sub{margin-top:16px;font-size:15px;color:var(--muted);}

/* Tombol */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 28px;
  border-radius:var(--r-pill);
  font-size:14px;font-weight:600;line-height:1;
  white-space:nowrap;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),
             background-color .25s var(--ease),color .25s var(--ease);
}
.btn--sm{height:40px;padding:0 20px;font-size:13px;}
.btn:hover{transform:translateY(-2px);}

.btn--primary{background:var(--blue);color:var(--white);box-shadow:0 6px 18px rgba(13,83,136,.28);}
.btn--primary:hover{background:var(--blue-bright);box-shadow:0 10px 26px rgba(13,83,136,.34);}

.btn--white{background:var(--white);color:var(--blue);box-shadow:0 6px 20px rgba(0,0,0,.14);}
.btn--white:hover{box-shadow:0 12px 30px rgba(0,0,0,.2);}

.btn--outline-white{color:var(--white);border:1px solid rgba(255,255,255,.45);}
.btn--outline-white:hover{background:rgba(255,255,255,.14);}

.pill{
  display:inline-block;
  padding:6px 14px;border-radius:var(--r-pill);
  background:var(--ice);color:var(--blue);
  font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}

/* Animasi muncul saat scroll */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto !important;}
}

/* ---------- 4. Navbar ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-stuck{box-shadow:0 4px 20px rgba(10,37,64,.07);border-bottom-color:var(--line);}

.nav__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--pad);height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.brand{display:inline-flex;align-items:center;gap:10px;}
.brand__mark{
  width:32px;height:32px;flex:none;
  display:grid;place-items:center;
  background:var(--blue);border-radius:8px;
}
.brand__mark img{width:18px;height:18px;}
.brand__name{
  font-family:var(--font-serif);
  font-size:19px;font-weight:600;color:var(--navy);
  line-height:1.1;letter-spacing:.01em;
}
.brand--light .brand__name{color:var(--white);}
.brand--light .brand__mark{background:rgba(255,255,255,.14);}

.nav__menu{display:flex;align-items:center;gap:32px;}
.nav__menu a{
  font-size:14px;font-weight:500;color:var(--slate);
  position:relative;transition:color .22s var(--ease);
  /* Label menu tidak boleh patah jadi dua baris, karena tinggi navbar
     ikut berubah dan garis bawah penanda halaman aktif jadi miring. */
  white-space:nowrap;
}
.nav__menu a:not(.btn)::after{
  content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--blue);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__menu a:not(.btn):hover,
.nav__menu a.is-active{color:var(--blue);}
.nav__menu a:not(.btn):hover::after,
.nav__menu a.is-active::after{transform:scaleX(1);}
.nav__cta{margin-left:4px;color:var(--white) !important;}

.nav__toggle{
  display:none;width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  margin-right:-10px;
}
.nav__toggle span{
  width:22px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__toggle.is-open span:nth-child(2){opacity:0;}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 5. Hero ---------- */
/* Latarnya gradien navy kehitaman, bukan biru rata seperti section lain.
   Diambil dari halaman Konser Pulih yang dipakai sebagai rujukan, supaya
   section event ini terasa beda dari sisa situs yang lebih terang. */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#0A0F2E 0%,#12103A 45%,#0B2340 100%);
  color:var(--white);
  padding:150px 0 90px;
}
/* Dua bulatan cahaya kabur, ungu di kiri atas dan biru di kanan bawah,
   supaya gradiennya tidak terasa datar. Sengaja sangat samar. */
.hero__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(22rem 22rem at 34% 0%,rgba(79,70,229,.30),transparent 68%),
    radial-gradient(22rem 22rem at 88% 100%,rgba(37,99,235,.28),transparent 68%);
  filter:blur(24px);
}
.hero__grid{
  position:relative;
  display:grid;grid-template-columns:1fr 1.06fr;
  gap:64px;align-items:center;
}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.badge__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);flex:none;
  box-shadow:0 0 0 0 rgba(215,180,142,.65);
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(215,180,142,.6);}
  70%{box-shadow:0 0 0 9px rgba(215,180,142,0);}
  100%{box-shadow:0 0 0 0 rgba(215,180,142,0);}
}

.hero__eyebrow{
  margin:26px 0 12px;
  font-family:var(--font-serif);
  font-style:italic;font-size:20px;
  color:var(--gold);
  text-wrap:balance;
}
.hero__title{
  font-family:var(--font-serif);
  font-size:clamp(40px,5.6vw,64px);
  font-weight:600;line-height:1.08;
  letter-spacing:-.015em;color:var(--white);
}
.hero__title em{font-style:normal;color:var(--gold);}

.hero__meta{
  margin:34px 0 0;
  display:flex;flex-direction:column;gap:14px;
}
.hero__meta li{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:rgba(255,255,255,.9);
}
.hero__meta svg{
  width:20px;height:20px;flex:none;
  color:var(--gold);stroke-width:1.6;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}

/* Baris logo mitra di hero. Dibiarkan flex meski isinya tinggal satu logo,
   supaya jaraknya ke oval penanda di atas tetap terkendali.

   Jangan pasang filter brightness(0) invert(1) di sini. Berkas logonya sudah
   berwarna emas bergradasi, dan filter itu akan memaksanya jadi putih polos. */
.hero__by{
  display:flex;align-items:center;
  margin-top:22px;
}
.hero__logo{
  height:64px;width:auto;
}
/* Konser Pulih dibuat lebih pendek karena bentuknya melebar. */
.hero__logo--konser{height:58px;}
.hero__visual{display:flex;flex-direction:column;gap:20px;}

.hero__figure{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
.hero__figure img{width:100%;height:min(58vh,470px);object-fit:cover;}
.hero__figure figcaption{
  position:absolute;inset:auto 0 0;
  padding:52px 26px 24px;
  background:linear-gradient(transparent,rgba(7,30,61,.82));
  display:flex;flex-direction:column;gap:5px;
}
.hero__figure strong{
  font-family:var(--font-serif);
  font-style:italic;font-size:19px;font-weight:600;
  color:var(--white);
}
.hero__figure span{font-size:12.5px;color:rgba(255,255,255,.8);line-height:1.6;}

.hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.stat{
  padding:20px 22px;border-radius:var(--r-md);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
}
.stat b{
  display:block;
  font-family:var(--font-serif);
  font-size:34px;font-weight:600;line-height:1;
  color:var(--gold);margin-bottom:8px;
}
.stat span{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.8);}

/* ---------- 6. Tentang ---------- */
.tentang{position:relative;padding:110px 0;overflow:hidden;background:var(--white);}
.tentang__bg{
  position:absolute;inset:-2%;
  background:url('../assets/img/tentang-latar.jpg') center/cover no-repeat;
  filter:blur(3px) saturate(.82);
}
.tentang__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(247,240,232,.95) 0%,rgba(247,240,232,.86) 48%,rgba(239,222,204,.76) 100%);
}
.tentang__grid{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  gap:40px;align-items:start;
}
.tentang__left{display:flex;flex-direction:column;gap:24px;}

.card{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.card--welcome{padding:40px;}
.card--welcome .h2{margin-bottom:20px;}
.card--welcome .lede{margin-bottom:28px;}

.quote-figure{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.quote-figure img{width:100%;height:270px;object-fit:cover;}
.quote-figure figcaption{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:12px;padding:32px;text-align:center;
  background:linear-gradient(rgba(7,30,61,.55),rgba(7,30,61,.72));
}
.quote-figure blockquote{
  font-family:var(--font-serif);
  font-style:italic;font-size:clamp(17px,2vw,22px);
  line-height:1.4;color:var(--white);
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.quote-figure cite{
  font-style:normal;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.card--pillars{
  background:var(--line);
  padding:16px;
  box-shadow:var(--shadow-md);
}
.pillars{display:flex;flex-direction:column;gap:12px;}
.pillars li{
  display:flex;gap:16px;
  padding:24px;border-radius:var(--r-md);
  background:var(--white);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pillars li:hover{transform:translateX(4px);box-shadow:var(--shadow-sm);}
.pillars__ic{
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--ice);color:var(--blue);
}
.pillars__ic svg{width:21px;height:21px;}
.pillars h3{
  font-size:15px;font-weight:600;color:var(--navy);
  margin-bottom:7px;line-height:1.4;
}
/* Judul kartu sudah 600, jadi menebalkan satu kata di dalamnya tidak akan
   terbaca bedanya pada 15px. Penonjolannya dipindah ke warna, memakai biru
   aksen yang sudah dipakai di tempat lain. */
.pillars h3 em{font-style:normal;color:var(--blue);}
.pillars p{font-size:13.5px;line-height:1.72;color:var(--muted);}

/* ---------- 7. Layanan ---------- */
.layanan{padding:110px 0;background:var(--ice-soft);}
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.svc{
  display:flex;flex-direction:column;
  padding:32px;border-radius:var(--r-lg);
  background:var(--white);
  border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent;}
.svc__ic{
  width:56px;height:56px;margin-bottom:22px;
  display:grid;place-items:center;
  border-radius:14px;background:var(--ice);color:var(--blue);
}
/* Kelima ikon kartu layanan berbentuk SVG, bukan gambar, supaya warnanya
   ikut currentColor dan tetap tajam di layar rapat. */
.svc__ic svg{width:28px;height:28px;}
.svc__kicker{
  font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-bright);margin-bottom:8px;
}
.svc__title{
  font-family:var(--font-serif);
  font-size:23px;font-weight:600;line-height:1.25;
  color:var(--navy);margin-bottom:8px;
}
.svc__tags{font-size:12px;color:var(--muted);margin-bottom:14px;}
.svc__desc{font-size:13.5px;line-height:1.75;color:var(--slate);margin-bottom:22px;}
/* kartu layanan berakhir di deskripsi, jadi jarak bawahnya tidak perlu */
.svc__desc:last-child{margin-bottom:0;}
.svc--soon{opacity:.82;}

/* Kartu berlatar foto.
   Fotonya sendiri terlalu terang untuk menahan teks, jadi di atasnya ada
   lapisan navy yang menebal ke bawah, tempat teks paling padat berada.
   Isi kartu dinaikkan z-index-nya supaya tidak ikut tertutup lapisan itu. */
.svc--bg{
  position:relative;
  background-color:var(--navy-deep);
  background-size:cover;
  background-position:center;
  border-color:transparent;
}
/* Ketebalan lapisan ini diukur, bukan dikira kira. Titik paling terang
   dari kelima foto dicampur dengan lapisan di ruang sRGB, lalu kontras
   tiap warna teks dihitung. Pada .70 di atas dan .95 di bawah, teks
   putih mencapai 6.3 dan krem 4.8, keduanya lolos ambang 4.5.
   Kalau foto diganti dengan yang lebih terang, ukur ulang. */
.svc--bg::before{
  content:'';position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(7,30,61,.70) 0%,
    rgba(7,30,61,.86) 45%,
    rgba(7,30,61,.95) 100%);
}
.svc--bg > *{position:relative;z-index:1;}

/* Ikonnya tetap di atas keping terang, karena berkas PNG-nya berupa
   garis biru. Kalau kepingnya ikut digelapkan, ikonnya hilang. */
.svc--bg .svc__ic{background:rgba(255,255,255,.93);color:var(--blue);}
/* Krem, bukan emas. Emas cuma mencapai kontras 3.3 di atas foto paling
   terang, padahal penanda ini berukuran 11px dan huruf besar semua. */
.svc--bg .svc__kicker{color:var(--cream);}
.svc--bg .svc__title{color:var(--white);}
.svc--bg .svc__tags{color:rgba(255,255,255,.82);}
.svc--bg .svc__desc{color:rgba(255,255,255,.88);}
.svc--bg:hover{box-shadow:0 18px 40px rgba(7,30,61,.34);}

.svc--ruang-pulih{background-image:url('../assets/img/layanan-ruang-pulih.webp');}
.svc--holistic{background-image:url('../assets/img/layanan-holistic-program.webp');}
.svc--corporate{background-image:url('../assets/img/layanan-corporate-training.webp');}
.svc--workshop{background-image:url('../assets/img/layanan-workshop-seminar.webp');}
.svc--product{background-image:url('../assets/img/layanan-product-support.webp');}

.svc--cta{
  background:var(--blue);border-color:transparent;color:var(--white);
  justify-content:center;
}
.svc--cta .svc__title{color:var(--white);font-size:25px;margin-bottom:14px;}
.svc--cta .svc__desc{color:rgba(255,255,255,.82);margin-bottom:26px;}
.svc--cta:hover{box-shadow:0 18px 40px rgba(13,83,136,.32);}
.svc__actions{display:flex;flex-wrap:wrap;gap:10px;}

/* ---------- 8. Tim terapis ---------- */
.tim{padding:110px 0;background:var(--cream);}

.founder{
  display:grid;grid-template-columns:300px 1fr;
  gap:40px;align-items:center;
  padding:32px;margin-bottom:32px;
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.founder__photo{border-radius:var(--r-md);overflow:hidden;}
.founder__photo img{width:100%;height:340px;object-fit:cover;object-position:top center;}
.founder__name{
  font-family:var(--font-serif);
  font-size:clamp(24px,2.7vw,30px);font-weight:600;
  color:var(--navy);margin:16px 0 6px;
}
.founder__role{font-size:13px;color:var(--blue-bright);font-weight:500;margin-bottom:16px;}
.founder__bio{font-size:14px;line-height:1.8;color:var(--slate);margin-bottom:22px;}

.tagset{display:flex;flex-wrap:wrap;gap:9px;}
.tagset li{
  padding:7px 15px;border-radius:var(--r-pill);
  background:var(--ice);color:var(--blue);
  font-size:12px;font-weight:500;
}

.team-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.member{
  padding:18px 14px;text-align:center;
  background:var(--white);border-radius:var(--r-md);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.member img{
  width:74px;height:74px;margin:0 auto 14px;
  border-radius:50%;object-fit:cover;
  border:3px solid var(--ice);
}
.member h4{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.35;margin-bottom:4px;}
.member p{font-size:11px;color:var(--muted);line-height:1.4;}
.member span{font-size:11px;font-weight:600;color:var(--blue);}

/* ---------- 9. Testimoni ---------- */
.testimoni{padding:110px 0;background:var(--white);}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi{
  position:relative;
  padding:36px 32px 32px;border-radius:var(--r-lg);
  background:var(--ice-soft);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.testi:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.testi__mark{
  font-family:var(--font-serif);
  font-size:64px;line-height:.6;color:var(--line);
  margin-bottom:10px;display:block;
}
.testi blockquote{font-size:14px;line-height:1.8;color:var(--slate);margin-bottom:24px;flex:1;}
.testi footer{display:flex;flex-direction:column;gap:2px;}
.testi footer b{font-size:13.5px;font-weight:600;color:var(--navy);}
.testi footer span{font-size:12px;color:var(--muted);}

.testi--dark{background:var(--blue);border-color:transparent;}
.testi--dark .testi__mark{color:rgba(255,255,255,.3);}
.testi--dark blockquote{color:rgba(255,255,255,.92);}
.testi--dark footer b{color:var(--white);}
.testi--dark footer span{color:rgba(255,255,255,.65);}

.trust__label{
  margin:64px 0 28px;text-align:center;
  font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.trust{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:26px 40px;
}
.trust img{
  max-height:34px;width:auto;
  filter:grayscale(1);opacity:.5;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
.trust li:hover img{filter:none;opacity:1;}

/* ---------- 10. FAQ ---------- */
.faq{padding:110px 0;background:var(--cream-soft);}
.faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;}
.faq__intro .lede{margin:18px 0 32px;}

.contact-card{
  padding:28px;border-radius:var(--r-lg);
  background:var(--blue);color:var(--white);
  box-shadow:0 14px 34px rgba(13,83,136,.24);
}
.contact-card__title{
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.65);margin-bottom:18px;
}
.contact-card ul{display:flex;flex-direction:column;gap:15px;}
.contact-card li{display:flex;align-items:center;gap:13px;font-size:13.5px;}
.contact-card svg{width:18px;height:18px;flex:none;color:var(--gold);}
.contact-card a{
  color:rgba(255,255,255,.92);
  transition:color .2s var(--ease);
  word-break:break-word;
}
.contact-card a:hover{color:var(--gold);}

.faq__list{
  padding:14px;border-radius:var(--r-lg);
  background:var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.qa{
  background:var(--white);border-radius:var(--r-md);
  overflow:hidden;
  transition:box-shadow .3s var(--ease);
}
.qa[open]{box-shadow:var(--shadow-sm);}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 24px;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:500;color:var(--navy);line-height:1.5;
  transition:color .2s var(--ease);
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:hover{color:var(--blue);}
.qa summary i{
  position:relative;width:24px;height:24px;flex:none;
  border-radius:50%;background:var(--ice);
  transition:background .25s var(--ease),transform .3s var(--ease);
}
.qa summary i::before,
.qa summary i::after{
  content:'';position:absolute;top:50%;left:50%;
  width:10px;height:2px;border-radius:2px;background:var(--blue);
  transform:translate(-50%,-50%);
  transition:opacity .25s var(--ease),transform .3s var(--ease);
}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg);}
.qa[open] summary i{background:var(--blue);transform:rotate(180deg);}
.qa[open] summary i::before,
.qa[open] summary i::after{background:var(--white);}
.qa[open] summary i::after{opacity:0;}
.qa__body{padding:0 24px 22px;}
.qa__body p{font-size:13.5px;line-height:1.85;color:var(--slate);}
.qa__body a{color:var(--blue);font-weight:500;text-decoration:underline;text-underline-offset:3px;}

/* ---------- 11. CTA penutup ---------- */
.cta{
  position:relative;overflow:hidden;
  padding:100px 0;text-align:center;
  background:linear-gradient(160deg,var(--blue) 0%,var(--blue-bright) 100%);
  color:var(--white);
}
.cta__glow{
  position:absolute;inset:-40% 20% auto;height:120%;
  background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 70%);
  pointer-events:none;
}
.cta__inner{position:relative;max-width:660px;}
.cta__lede{
  margin:20px auto 34px;max-width:520px;
  font-size:15px;line-height:1.8;color:rgba(255,255,255,.85);
}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* ---------- 11a. Ruang Pulih: untuk siapa & kondisi (sebelum kartu) ----------
   Latar putih supaya terpisah dari FAQ (krem) di atasnya dan CTA biru di bawahnya. */
.kondisi{padding:110px 0;background:var(--white);}
.kondisi__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;}
.kondisi__intro{position:sticky;top:110px;}
.kondisi__intro .lede{margin-top:18px;}
.kondisi__approach{
  margin-top:22px;font-family:var(--font-serif);font-style:italic;
  font-size:21px;font-weight:500;color:var(--blue);
}
.kondisi__q{
  font-family:var(--font-serif);font-size:26px;font-weight:600;line-height:1.25;
  color:var(--navy);margin-bottom:20px;text-wrap:balance;
}
.kondisi__items{display:flex;flex-direction:column;gap:12px;}
.kondisi__items li{
  display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  padding:20px 22px;border-radius:var(--r-md);
  background:var(--ice-soft);border:1px solid var(--line);
}
.kondisi__no{font-family:var(--font-serif);font-size:24px;font-weight:600;line-height:1.1;color:var(--blue-bright);}
.kondisi__items p{font-size:13.5px;line-height:1.75;color:var(--slate);}
.kondisi__items strong{color:var(--navy);}
.kondisi__close{max-width:760px;margin:64px auto 0;text-align:center;}
.kondisi__close p{font-size:15px;line-height:1.85;color:var(--slate);}
.kondisi__close strong{color:var(--navy);}
.kondisi__tagline{
  margin-top:26px;font-family:var(--font-serif);
  font-size:clamp(26px,3.2vw,36px) !important;font-weight:600;line-height:1.2 !important;
  color:var(--navy) !important;text-wrap:balance;
}
.kondisi__tagline em{font-style:italic;font-weight:500;color:var(--blue);}

/* ---------- 11b. CTA penutup: dua kartu konsultasi ----------
   Kiri terang (Professional Team), kanan premium (Elite: navy gelap + emas, sama dengan aksen "besar.").
   Tinggi kartu ikut yang terpanjang; tombol didorong ke dasar supaya sejajar. */
.kons-grid{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;
  align-items:stretch;margin-top:52px;text-align:left;
}
.kons{
  display:flex;flex-direction:column;
  padding:36px;border-radius:var(--r-lg);
  background:var(--white);color:var(--slate);
  box-shadow:var(--shadow-lg);
}
.kons__title{
  font-family:var(--font-serif);font-size:28px;font-weight:600;line-height:1.2;
  color:var(--navy);text-wrap:balance;
}
.kons__price{
  margin-top:12px;font-family:var(--font-serif);
  font-size:30px;font-weight:600;line-height:1.1;color:var(--blue);
}
.kons__price span{
  display:block;margin-bottom:4px;font-family:var(--font-sans);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.kons__desc{margin-top:18px;display:flex;flex-direction:column;gap:12px;}
.kons__desc p{font-size:13.5px;line-height:1.8;}
.kons__label{
  margin:26px 0 12px;padding-top:22px;border-top:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);
}
.kons__steps,.kons__menu,.kondisi__items{margin:0;padding:0;list-style:none;}
.kons__steps{counter-reset:k;display:flex;flex-direction:column;gap:8px;}
.kons__steps li{counter-increment:k;position:relative;padding-left:36px;min-height:24px;font-size:13.5px;line-height:1.6;}
.kons__steps li::before{
  content:counter(k);position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;
  background:var(--ice);color:var(--blue);
}
.kons__issues{display:flex;flex-direction:column;gap:10px;}
.kons__issues li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.7;}
.kons__issues li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold);}
.kons__menu{display:flex;flex-direction:column;}
.kons__menu > li{padding:12px 0;border-bottom:1px dashed var(--line);}
.kons__menu > li:first-child{padding-top:0;}
.kons__menu li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;}
.kons__group{flex-direction:column;align-items:stretch !important;}
.kons__group ul{margin-top:8px;display:flex;flex-direction:column;gap:6px;padding-left:16px;border-left:2px solid var(--ice);}
.kons__name{font-size:14px;font-weight:600;color:var(--navy);}
.kons__group ul .kons__name{font-weight:500;color:var(--slate);font-size:13.5px;}
.kons__sesi{font-size:12px;font-weight:600;color:var(--blue);background:var(--ice);padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap;}
.kons > :nth-last-child(2){margin-bottom:32px;}  /* jarak minimum ke tombol */
.kons__btn{margin-top:auto;align-self:stretch;}   /* tombol di dasar kartu, sejajar kiri-kanan */
/* Teks tombol kalimat panjang: boleh 2 baris, tetap di tengah, tinggi minimal sama dengan .btn */
.kons__btn{height:auto;min-height:50px;padding:14px 26px;white-space:normal;text-align:center;line-height:1.4;}

/* Kartu premium */
.kons--elite{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);color:rgba(255,255,255,.86);border:1px solid rgba(215,180,142,.35);}
.kons--elite .kons__title{color:var(--white);}
.kons--elite .kons__price{color:var(--gold);}
.kons--elite .kons__price span{color:rgba(255,255,255,.6);}
.kons--elite .kons__label{color:var(--gold);border-top-color:rgba(255,255,255,.14);}
.kons--elite strong{color:var(--white);}
.kons--elite .kons__steps li::before{background:rgba(215,180,142,.16);color:var(--gold);}
.kons__btn--gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 6px 18px rgba(0,0,0,.22);}
.kons__btn--gold:hover{background:var(--cream);box-shadow:0 12px 28px rgba(0,0,0,.28);}

/* ---------- 12. Footer ---------- */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.66);padding:72px 0 0;}
.footer__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:48px;padding-bottom:52px;
}
.footer__brand .brand{margin-bottom:20px;}
.footer__brand p{font-size:13.5px;line-height:1.8;max-width:300px;}
.footer__quote{
  margin-top:18px !important;
  font-family:var(--font-serif);
  font-style:italic;font-size:17px;color:var(--gold);
}
.footer__col h3{
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);margin-bottom:20px;
}
.footer__col ul{display:flex;flex-direction:column;gap:12px;}
.footer__col a{
  font-size:13.5px;
  transition:color .22s var(--ease),padding-left .22s var(--ease);
  word-break:break-word;
}
.footer__col a:hover{color:var(--gold);padding-left:4px;}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;
  padding-block:24px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:12.5px;color:rgba(255,255,255,.45);
}

/* ---------- 13. Tombol WhatsApp melayang ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:var(--white);
  box-shadow:0 8px 24px rgba(37,211,102,.4);
  transform:translateY(80px);opacity:0;
  transition:transform .4s var(--ease),opacity .4s var(--ease),box-shadow .3s var(--ease);
}
.wa-float.is-shown{transform:none;opacity:1;}
.wa-float:hover{box-shadow:0 12px 32px rgba(37,211,102,.55);}
.wa-float svg{width:28px;height:28px;fill:currentColor;stroke:none;}

/* =========================================================
   14. Halaman tiket
   Nuansa krem emas, bukan biru seperti beranda. Warnanya diambil dari
   frame Figma "Website Page Ticketing". Tokennya sengaja dikurung di
   .tiket, bukan ditaruh di :root, supaya palet brand tidak ikut berubah.
   ========================================================= */
.tiket{
  --tk-bg:#0A0A0C;
  --tk-ink:#F6F0E4;
  --tk-body:#BEB3A2;
  --tk-soft:#8B8171;
  --tk-gold:#E3BE68;
  --tk-gold-deep:#F0D48F;
  --tk-gold-line:#6E5A2E;
  --tk-gold-pale:#3A3020;
  --tk-line:#2B2823;
  --tk-card:#151417;
  --tk-card-warm:#1C1913;

  position:relative;overflow:hidden;
  padding:132px 0 110px;
  background:var(--tk-bg);
}
.tiket__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 28% at 88% 6%,rgba(233,197,150,.36),transparent 70%),
    radial-gradient(34% 26% at 6% 74%,rgba(240,214,178,.34),transparent 70%);
}
.tiket .container{position:relative;}

/* Kepala halaman */
.tiket__head{text-align:center;margin-bottom:64px;}

.tk-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 18px;border-radius:var(--r-pill);
  background:#2A2113;border:1px solid var(--tk-gold-line);
  font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--tk-gold-deep);
}
.tk-badge i{
  width:6px;height:6px;border-radius:50%;
  background:var(--tk-gold);flex:none;
}

.tiket__eyebrow{
  margin:26px 0 10px;
  font-family:var(--font-serif);
  font-style:italic;font-size:19px;
  color:var(--tk-gold);
  text-wrap:balance;
}
.tiket__title{
  font-family:var(--font-serif);
  font-size:clamp(28px,3.6vw,42px);
  font-weight:600;line-height:1.12;
  letter-spacing:-.01em;color:var(--tk-ink);
  text-wrap:balance;
}
.tiket__title em{font-style:italic;font-weight:500;color:var(--tk-gold);}
/* Urutan ukuran (revisi 8 Okt): baris biru (.tiket__sub) >= judul Konser Pulih 2026 >= tagline merah (.tiket__eyebrow); tagline hijau (.tiket__tag) < biru */
.tiket__sub{
  margin:8px 0 0;
  font-family:var(--font-serif);
  font-size:clamp(34px,4.6vw,54px);
  font-weight:600;line-height:1.12;
  letter-spacing:-.01em;color:var(--tk-ink);
  text-wrap:balance;
}
.tiket__sub em{font-style:italic;font-weight:500;color:var(--tk-gold);}
.tiket__tag{
  margin:14px 0 0;
  font-family:var(--font-serif);
  font-style:italic;font-size:clamp(17px,1.8vw,21px);
  color:var(--tk-gold);
  text-wrap:balance;
}
.tiket__lede{
  margin:18px auto 0;max-width:440px;
  font-size:15px;line-height:1.8;color:var(--tk-body);
}

/* Baris tanggal, tempat, jam */
.tk-meta{
  display:inline-flex;flex-wrap:wrap;align-items:center;
  margin-top:34px;
  background:var(--tk-card);
  border:1px solid var(--tk-gold-line);
  border-radius:var(--r-pill);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  overflow:hidden;
}
.tk-meta li{
  display:flex;align-items:center;gap:10px;
  padding:14px 24px;
  font-size:13.5px;color:var(--tk-body);
}
.tk-meta li + li{border-left:1px solid var(--tk-line);}
.tk-meta b{font-weight:600;color:var(--tk-ink);}
.tk-meta svg{
  width:17px;height:17px;flex:none;
  color:var(--tk-gold);stroke-width:1.7;
}

/* Kartu tier */
/* Lima tiket dibagi dua kelompok bersusun, tiga kartu lalu dua kartu.
   Lima kartu sebaris menyisakan sekitar 200px per kartu, terlalu sempit,
   dan kalau dibiarkan membungkus akan ada dua kartu tertinggal sendirian. */
.paket{margin-bottom:56px;}
.paket:last-child{margin-bottom:0;}
.paket__head{
  max-width:1020px;margin:0 auto 24px;
  text-align:center;
}
.paket__name{
  font-family:var(--font-serif);
  font-size:clamp(24px,3.2vw,32px);
  font-weight:600;color:var(--tk-gold-deep);
  line-height:1.2;
}
.paket__note{
  margin-top:6px;
  font-size:13.5px;color:#9C9080;
}
.paket__cta{
  margin-top:28px;
  display:flex;justify-content:center;
}

.tier-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:26px;align-items:stretch;
  max-width:1020px;margin-inline:auto;
}
/* Paket Eksklusif cuma dua kartu, jadi keduanya dibuat lebih lebar.
   Kebetulan cocok, isinya memang lebih panjang dari kartu Ultimate. */
.tier-grid--dua{grid-template-columns:1fr 1fr;}
.tier{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);
  background:var(--tk-card);
  border:1px solid var(--tk-line);
  box-shadow:0 10px 30px rgba(120,92,52,.07);
  overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tier:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(120,92,52,.14);}

.tier--premium{
  background:var(--tk-card-warm);
  border-color:#7A6435;
  box-shadow:0 14px 34px rgba(120,92,52,.11);
}
.tier--diamond{
  background:linear-gradient(180deg,#241F16,#15130F);
  border:2px solid var(--tk-gold-line);
  box-shadow:0 20px 44px rgba(120,92,52,.16);
}

/* Harga coret. Dipakai di dua kartu Eksklusif yang sedang berpromo.
   Memakai <s> supaya pembaca layar ikut mengumumkan harga itu sudah
   tidak berlaku, bukan sekadar dicoret secara visual. */
.tier__was{
  display:block;
  font-size:14px;color:#9A8F7E;
  text-decoration:line-through;
  margin-bottom:2px;
}
/* Baris keterangan di bawah harga. Hurufnya dikembalikan ke sans tegak,
   kalau tidak dia mewarisi serif miring dari .tier__price dan terbaca
   seperti bagian dari angkanya. */
/* Syarat harga Premium & Diamond, menempel di samping harga (bukan di stiker diskon) karena
   syaratnya melekat ke harga. Sans tebal miring emas supaya terbaca sebagai label, bukan angka.
   nowrap: kalau tidak muat di samping harga (HP), labelnya turun utuh ke baris berikut. */
.tier__ref{
  display:inline-block;margin-left:6px;
  font-family:var(--font-sans);font-style:italic;font-weight:600;
  font-size:11.5px;letter-spacing:.02em;line-height:1.4;
  color:var(--tk-gold);white-space:nowrap;vertical-align:.1em;
}
.tier__note{
  display:block;margin-top:5px;
  font-family:var(--font-sans);font-style:normal;
  font-size:11.5px;line-height:1.5;color:#9C9080;
}
.tier__promo{
  display:block;margin-top:5px;
  font-family:var(--font-sans);font-style:normal;font-weight:600;
  font-size:11.5px;letter-spacing:.02em;line-height:1.5;
  color:var(--tk-gold);
}

/* Banner promo tiket Awareness (10 sampai 12 Nov 2026) */
.promo-banner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 20px;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(7,30,61,.92) 0%,rgba(10,37,64,.95) 100%);
  border:1px solid rgba(215,180,142,.48);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  color:var(--cream-soft);
}
.promo-banner--hero{
  margin-top:20px;
  flex-direction:column;align-items:flex-start;gap:14px;
}
.promo-banner--tiket{
  max-width:1020px;margin:0 auto 36px;
  padding:18px 24px;
  background:linear-gradient(135deg,#241F16 0%,#171410 100%);
  border-color:var(--tk-gold-line);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  color:var(--tk-ink);
}
.promo-banner[hidden],
.tier__promo[hidden]{display:none;}
.promo-banner__text{
  font-size:13.5px;line-height:1.65;
  color:inherit;overflow-wrap:break-word;
}
.promo-banner__text strong{
  color:var(--gold);font-weight:600;
}
.promo-banner--tiket .promo-banner__text strong{
  color:var(--tk-gold-deep);
}
.promo-banner__btn{
  flex:none;
  background:var(--gold);color:var(--navy-deep);
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.promo-banner__btn:hover{
  background:var(--cream);color:var(--navy-deep);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}

/* Stiker diskon bulat di pojok kiri atas tiap kartu. Merah dipilih karena
   di atas latar hitam ini dialah satu satunya aksen non emas, sehingga
   langsung menarik mata tanpa bersaing dengan kartu emasnya. */
.tier__disc{
  position:absolute;top:16px;left:16px;z-index:3;
  width:58px;height:58px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 26%,#E8543F,#B92718);
  border:2px solid rgba(255,255,255,.24);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  color:#fff;line-height:1;
}
.tier__disc b{font-size:14px;font-weight:700;letter-spacing:-.02em;}
.tier__disc small{font-size:8px;font-weight:600;letter-spacing:.14em;margin-top:2px;}

/* Ribbon diagonal di pojok kanan atas, menggantikan tanda Most Complete.
   Most Complete dibuang karena tidak akurat, Premium justru punya lebih
   banyak baris fasilitas daripada Diamond. */
.tier__ribbon{
  position:absolute;top:0;right:0;z-index:3;
  width:132px;height:132px;overflow:hidden;pointer-events:none;
}
.tier__ribbon span{
  position:absolute;top:24px;right:-36px;
  display:block;width:172px;padding:7px 0;
  transform:rotate(45deg);text-align:center;
  background:linear-gradient(180deg,#E9C87A,#C99A2C);
  color:#1A1408;
  font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}

/* Rincian di bawah Lensa Jiwa. Ketiganya isi dari Lensa Jiwa, bukan paket
   terpisah, jadi ditulis sebagai anak daftar bukan baris bercentang. */
.tier__sub{
  margin-top:6px;padding-left:14px;
  display:flex;flex-direction:column;gap:3px;
}
.tier__sub li{
  position:relative;display:block;padding-left:11px;
  font-size:12px;line-height:1.5;color:var(--tk-body);
}
.tier__sub li::before{
  content:"";position:absolute;left:0;top:7px;
  width:4px;height:4px;border-radius:50%;
  background:var(--tk-gold);
}

.tier__flag{
  position:absolute;top:16px;right:16px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#D2A63C,#BC8D20);
  color:var(--white);
  font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(174,132,32,.34);
}

/* Kotak tempat gambar voucher ditaruh nanti */
.voucher{
  position:relative;padding:12px;
  background:#111015;
  border-bottom:1px solid var(--tk-line);
}
.tier--premium .voucher{background:#171410;}
.tier--diamond .voucher{background:#1C1810;border-bottom-color:var(--tk-gold-line);}

.voucher__frame{
  position:relative;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;
  aspect-ratio:16/10;padding:14px;
  border:1px dashed #4A4132;border-radius:10px;
  text-align:center;
}
.tier--diamond .voucher__frame{border-color:var(--tk-gold-line);}

/* Gambar voucher, 1000x625 WebP dengan rasio terkunci 16:10.
   Sengaja tanpa hiasan sudut, karena tiap voucher sudah punya bingkai
   sendiri di dalam gambarnya. */
.voucher__img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;
  border-radius:10px;
}

.voucher__ic{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#332A18;color:var(--tk-gold-deep);
}
.voucher__ic svg{width:19px;height:19px;}
.voucher__title{
  font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--tk-soft);
}
.voucher__note{font-size:11px;font-style:italic;color:#7A7062;}

.tier__body{
  flex:1;display:flex;flex-direction:column;
  display:flex;flex-direction:column;
  padding:26px 24px 24px;flex:1;
}
.tier__label{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--tk-soft);margin-bottom:10px;
}
.tier__label i{
  width:5px;height:5px;border-radius:50%;
  background:var(--tk-gold-line);flex:none;
}
.tier__name{
  font-family:var(--font-serif);
  font-size:29px;font-weight:600;line-height:1.1;
  color:var(--tk-ink);
}
.tier--diamond .tier__name{color:var(--tk-gold-deep);}
/* Harga promo dibuat terang (krem tinta) dan sedikit lebih besar supaya jadi fokus kartu (revisi San 14 Okt).
   Harga coret (.tier__was) tetap redup sebagai pembanding; aturannya sendiri ada di atas. */
.tier__price{
  margin-top:5px;min-height:83px;
  font-family:var(--font-serif);
  font-style:italic;font-size:22px;font-weight:500;line-height:1.3;color:var(--tk-ink);
}
.tier__rule{
  height:1px;border:0;margin:20px 0 18px;
  background:var(--tk-line);
}
.tier--diamond .tier__rule{background:var(--tk-gold-pale);}

.tier__fac{
  font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--tk-soft);margin-bottom:14px;
}
.tier__list{
  display:flex;flex-direction:column;gap:12px;
  margin-bottom:26px;flex:1;
}
.tier__list li{display:flex;gap:10px;align-items:flex-start;}
.tier__list b{
  display:block;
  font-size:13px;font-weight:600;line-height:1.5;color:var(--tk-ink);
}
.tier__list b span{font-weight:400;color:var(--tk-body);}
.tier__list small{
  display:block;margin-top:2px;
  font-size:12px;line-height:1.6;color:var(--tk-body);
}
.tick{
  width:18px;height:18px;flex:none;margin-top:2px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#3A3120;color:#E3BE68;
}
.tier--premium .tick{background:#4A3D1F;color:#F0D48F;}
.tier--diamond .tick{background:var(--tk-gold);color:var(--white);}
.tick svg{width:10px;height:10px;stroke-width:2.6;}

.tbtn{
  margin-top:auto;
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 20px;
  border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;line-height:1;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),
             filter .25s var(--ease);
}
.tbtn:hover{transform:translateY(-2px);}
.tbtn--regular{background:#2E2A22;color:#EBDFC8;border:1px solid #4A4132;}
.tbtn--premium{background:linear-gradient(180deg,#EFDCAC,#E5CB93);color:#59461F;}
.tbtn--diamond{
  background:linear-gradient(180deg,#D2A63C,#BC8D20);color:var(--white);
  box-shadow:0 8px 20px rgba(174,132,32,.32);
}
.tbtn--regular:hover,.tbtn--premium:hover{filter:brightness(.97);}
.tbtn--diamond:hover{box-shadow:0 12px 28px rgba(174,132,32,.44);}

/* Ajakan bertanya di bawah kartu */
.tiket__help{
  margin-top:44px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.tiket__help p{font-size:13.5px;color:var(--tk-body);}
.tiket__help a{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;color:var(--tk-gold);
  transition:color .22s var(--ease);
}
.tiket__help a:hover{color:var(--tk-gold-deep);}
.tiket__help svg{width:18px;height:18px;fill:currentColor;stroke:none;}

/* Seat plan */
.seat{margin-top:96px;text-align:center;}
.seat__title{
  font-family:var(--font-serif);
  font-size:clamp(30px,4.1vw,44px);
  font-weight:600;line-height:1.15;
  color:var(--tk-ink);margin-bottom:34px;
}
.seat__box{
  max-width:1020px;margin-inline:auto;
  border-radius:var(--r-lg);
  overflow:hidden;
  /* Latar gelap ini bukan sisa placeholder. Gambarnya sendiri berlatar
     hitam, jadi warna inilah yang terlihat selama gambar belum termuat,
     dan itu mencegah kotak putih berkedip di tengah halaman yang terang. */
  background:#141317;
}
.seat__box img{display:block;width:100%;height:auto;}

/* =========================================================
   15. Responsif
   ========================================================= */

@media (max-width:1080px){
  .founder{grid-template-columns:250px 1fr;gap:32px;}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px;}

  /* kartu Diamond berhenti dilebihkan supaya tiga kolom tetap muat */
  .tier-grid{grid-template-columns:repeat(3,1fr);gap:18px;}
  /* Wajib diulang di sini. Aturan .tier-grid di atas kekhususannya sama
     tapi letaknya lebih belakang, jadi tanpa baris ini paket Eksklusif
     ikut jadi tiga kolom padahal isinya cuma dua kartu. */
  .tier-grid--dua{grid-template-columns:1fr 1fr;}
  .tier__body{
  flex:1;display:flex;flex-direction:column;padding:24px 20px 22px;}
  .tier__name{font-size:26px;}
}

@media (max-width:920px){
  .kondisi__grid{grid-template-columns:1fr;gap:40px;}
  .kondisi__intro{position:static;}
  .kons-grid{grid-template-columns:1fr;max-width:600px;margin-inline:auto;}
  .nav__menu{
    position:fixed;inset:68px 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    padding:16px var(--pad) 28px;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .3s var(--ease),opacity .3s var(--ease),visibility .3s;
  }
  .nav__menu.is-open{transform:none;opacity:1;visibility:visible;}
  .nav__menu a:not(.btn){padding:15px 4px;border-bottom:1px solid var(--ice);font-size:15px;}
  .nav__menu a:not(.btn)::after{display:none;}
  .nav__cta{margin-top:18px;align-self:flex-start;}
  .nav__toggle{display:flex;}

  .hero{padding:120px 0 72px;}
  .hero__grid{grid-template-columns:1fr;gap:44px;}
  .hero__figure img{height:380px;}

  .tentang__grid,
  .faq__grid{grid-template-columns:1fr;gap:28px;}

  .svc-grid,
  .testi-grid{grid-template-columns:repeat(2,1fr);}

  /* tiga tier tidak dipecah jadi dua kolom, karena satu kartu akan
     tertinggal sendirian di baris kedua */
  .tiket{padding:108px 0 84px;}
  .tier-grid{grid-template-columns:1fr;gap:20px;max-width:430px;}
  .tier--diamond{border-width:1px;}
  .seat{margin-top:72px;}
}

@media (max-width:680px){
  :root{--pad:20px;}

  body{font-size:15px;}
  /* sedikit lebih kecil supaya tetap muat walau font serif gagal termuat
     dan browser memakai font cadangan yang lebih lebar */
  .h2{font-size:clamp(23px,6.1vw,30px);}
  .svc__title{font-size:21px;}

  .hero{padding:104px 0 60px;}
  .hero__title{font-size:clamp(34px,9.5vw,44px);}
  .hero__eyebrow{font-size:17px;}
  .hero__actions .btn{width:100%;}
  .hero__figure img{height:300px;}
  .hero__by{gap:18px;margin-top:18px;}
  .hero__logo{height:52px;}
  .hero__logo--konser{height:43px;}

  .tentang,.layanan,.tim,.testimoni,.faq{padding:72px 0;}
  .cta{padding:76px 0;}

  .sec-head{margin-bottom:36px;}
  .card--welcome{padding:28px 24px;}
  .quote-figure img{height:230px;}
  .card--pillars{padding:12px;}
  .pillars li{padding:20px;gap:14px;}

  .svc-grid,.testi-grid{grid-template-columns:1fr;gap:16px;}
  .svc{padding:26px 24px;}
  .svc__actions .btn{flex:1;}

  .founder{grid-template-columns:1fr;gap:24px;padding:24px;text-align:center;}
  .founder__photo img{height:300px;object-position:center 15%;}
  .tagset{justify-content:center;}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:12px;}

  .trust{gap:22px 30px;}
  .trust img{max-height:26px;}
  .trust__label{margin:48px 0 24px;}

  .contact-card{padding:24px 22px;}
  .faq__list{padding:10px;}
  .qa summary{padding:17px 18px;font-size:14px;gap:14px;}
  .qa__body{padding:0 18px 20px;}

  .cta__actions .btn{width:100%;}

  .kondisi{padding:72px 0;}
  .kondisi__grid{grid-template-columns:1fr;gap:36px;}
  .kondisi__q{font-size:22px;}
  .kondisi__items li{grid-template-columns:34px 1fr;gap:10px;padding:16px 18px;}
  .kondisi__no{font-size:20px;}
  .kondisi__close{margin-top:44px;}
  .kons-grid{grid-template-columns:1fr;gap:18px;margin-top:40px;}
  .kons{padding:28px 22px;}
  .kons__title{font-size:24px;}
  .kons__price{font-size:26px;}
  .kons__btn{white-space:normal;}

  .tiket{padding:96px 0 72px;}
  .tiket__head{margin-bottom:44px;}
  .promo-banner--tiket{
    flex-direction:column;align-items:stretch;gap:14px;
    padding:16px 18px;margin-bottom:28px;
  }
  .promo-banner--hero{
    align-items:stretch;padding:16px 18px;
  }
  .promo-banner__btn{
    width:100%;white-space:normal;text-align:center;
    height:auto;min-height:42px;padding:10px 18px;
  }
  .tiket__eyebrow{font-size:16px;}
  .tiket__title{font-size:clamp(24px,6.6vw,32px);}
  .tiket__sub{font-size:clamp(27px,7.6vw,36px);}
  .tiket__tag{font-size:16px;}
  .tk-meta{
    display:flex;flex-direction:column;align-items:stretch;
    width:100%;border-radius:var(--r-md);margin-top:28px;
  }
  .tk-meta li{padding:13px 18px;}
  .tk-meta li + li{border-left:0;border-top:1px solid var(--tk-line);}
  .seat{margin-top:60px;}
  .seat__title{font-size:clamp(26px,7vw,34px);margin-bottom:24px;}

  .footer{padding-top:56px;}
  .footer__grid{grid-template-columns:1fr;gap:34px;padding-bottom:36px;}
  .footer__bottom{justify-content:center;text-align:center;}

  .wa-float{right:16px;bottom:16px;width:50px;height:50px;}
}

/* Dua kartu angka dijadikan satu kolom lebih awal, dari 400px naik ke 520px.
   Angkanya sekarang "300.000+", dan pada dua kolom ruangnya cuma sekitar
   130px. Cormorant masih muat di 115px, tapi kalau font itu gagal termuat
   browser jatuh ke Georgia yang melebar sampai 176px dan angkanya tembus
   keluar kartu. Satu kolom membuat lebarnya tidak lagi jadi soal. */
@media (max-width:520px){
  .hero__stats{grid-template-columns:1fr;}
}

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

/* Beranda: tagline kecil dihapus, jarak judul dari logo Konser Pulih dipertahankan */
.hero__by + .hero__title{margin-top:26px;}