/* ==========================================================
   KENAPA SARAH — "Jujur saja."
   Pembuka sinematik -> lima momen (jam, rasa sakit dicoret,
   jawaban emas) -> penutup garis emas lurus.
   Garis denyut: kacau -> tenang. Selalu mendatar & simetris.
   Semua grid minmax(0,1fr); tidak ada yang lebih lebar dari layar.
   ========================================================== */
.bab-kenapa {
  padding-block: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 80px);
}

.kz {
  --kz-sakit: #c99d93;
  --kz-coret: var(--emas);
  --kz-jawab: var(--emas-muda);
  --kz-warna: var(--emas);
  width: min(var(--lebar), 100% - 2 * var(--tepi));
  margin-inline: auto;
  position: relative;
}
/* tanpa pemenggalan kata otomatis: kalimat emosional harus utuh */
.kz p, .kz span, .kz h2 { -webkit-hyphens: manual; hyphens: manual; }

/* ---------------- pembuka: tenang, bukan teriak ---------------- */
.kz-buka {
  position: relative;
  text-align: center;
  padding: clamp(52px, 6.5vw, 96px) 0;
}
/* dua garis rambut emas: bingkai "layar bioskop" yang nyaris tak terlihat */
.kz-buka::before {
  content: ""; position: absolute; inset-inline: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--garis), transparent);
  transform: scaleX(0); transition: transform 1.6s cubic-bezier(.6, 0, .2, 1);
}
.kz-buka::before { top: 0; }
.kz-buka.kz-on::before { transform: scaleX(1); }
/* cahaya lilin samar di belakang kalimat (tema gelap saja) */
.kz-buka > .kz-judul { position: relative; }

.kz-label {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; max-width: 100%;
  margin: 0 0 clamp(18px, 2.2vw, 26px); color: var(--emas); font-size: .74rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  opacity: 0; transition: opacity 1s ease;
}
.kz-label::before, .kz-label::after { content: ""; flex: 0 0 auto; width: clamp(20px, 4vw, 40px); height: 1px; background: var(--garis); }
html:is([lang="ar"], [lang="zh"], [lang="th"]) .kz-label { letter-spacing: .08em; font-size: .86rem; }
.kz-buka.kz-on .kz-label { opacity: 1; }

.kz-judul {
  font-family: var(--serif); font-weight: 400; color: var(--gading);
  font-size: clamp(1.9rem, 2.4vw + 1rem, 3.2rem); line-height: 1.16; letter-spacing: -.005em;
  max-width: 24ch; margin: 0 auto; text-wrap: balance;
}
html:is([lang="de"], [lang="es"], [lang="fil"]) .kz-judul { max-width: 28ch; }
html[lang="zh"] .kz-judul { max-width: 16em; line-height: 1.4; letter-spacing: .02em; font-size: clamp(1.7rem, 2vw + 1rem, 2.7rem); }
html:is([lang="ar"], [lang="th"]) .kz-judul { line-height: 1.5; letter-spacing: 0; max-width: 20em; font-size: clamp(1.7rem, 2vw + 1rem, 2.7rem); }
.kz-kata {
  display: inline-block; opacity: 0; transform: translate3d(0, .28em, 0); filter: blur(6px);
  transition: opacity 1s ease var(--d, 0s), transform 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), filter 1s ease var(--d, 0s);
}
.kz-buka.kz-on .kz-kata { opacity: 1; transform: none; filter: blur(0); }
.kz-sub {
  color: var(--redup); font-size: clamp(1rem, .3vw + .92rem, 1.14rem); line-height: 1.65;
  max-width: 40ch; margin: clamp(16px, 2vw, 22px) auto 0;
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity 1.2s ease var(--d, 1s), transform 1.2s cubic-bezier(.2, .7, .2, 1) var(--d, 1s);
}
.kz-buka.kz-on .kz-sub { opacity: 1; transform: none; }

/* ---------------- lima momen ---------------- */
.kz-daftar { list-style: none; margin: clamp(28px, 4vw, 56px) auto 0; max-width: 1080px; padding: 0; counter-reset: none; }
.kz-momen {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "jam nadi" "teks teks";
  column-gap: clamp(16px, 3vw, 32px);
  row-gap: 14px;
  align-items: center;
  padding-block: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--garis-halus);
}
.kz-momen:last-child { border-bottom: 1px solid var(--garis-halus); }
.kz-kiri { grid-area: jam; min-width: 0; }
.kz-tengah { grid-area: nadi; min-width: 0; }
.kz-kanan { grid-area: teks; min-width: 0; }
@media (min-width: 1000px) {
  .kz-momen {
    grid-template-columns: minmax(0, 8.5rem) minmax(0, .7fr) minmax(0, 1.3fr);
    grid-template-areas: "jam nadi teks";
    column-gap: clamp(24px, 3vw, 48px);
  }
}

/* jam */
.kz-jam { margin: 0; line-height: 1; transform: translate3d(0, var(--kz-py, 0px), 0); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.kz-jam-angka {
  display: inline-flex; align-items: baseline; direction: ltr; unicode-bidi: isolate;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400;
  font-size: clamp(2.1rem, 1.3vw + 1.65rem, 3.1rem); letter-spacing: .02em; line-height: .9;
  font-variant-numeric: lining-nums tabular-nums; color: var(--gading);
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.kz-titik2 { color: var(--kz-warna); margin-inline: .04em; position: relative; top: -.06em; animation: kz-kedip 2s ease-in-out infinite; }
@keyframes kz-kedip { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.kz-on .kz-jam-angka { opacity: 1; transform: none; }

/* garis denyut */
.kz-nadi { display: block; width: 100%; height: clamp(38px, 3.4vw, 50px); overflow: visible; color: var(--kz-warna); }
.kz-stop { stop-color: currentColor; }
.kz-nadi-poros { stroke: currentColor; stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 1 5; }
.kz-nadi-garis { fill: none; stroke-width: 1.35; stroke-linejoin: round; stroke-linecap: round; }
.kz-nadi-bayang { fill: none; stroke-width: 7; stroke-linejoin: round; opacity: .16; filter: blur(3px); }
.kz-nadi-titik { fill: currentColor; filter: drop-shadow(0 0 5px currentColor); }
.kz-m1 { --kz-warna: #e27d6c; }
.kz-m2 { --kz-warna: #dc9870; }
.kz-m3 { --kz-warna: #d8ab70; }
.kz-m4 { --kz-warna: #d6b770; }
.kz-m5 { --kz-warna: #e6cd8e; }

/* rasa sakit -> dicoret */
.kz-sakit {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.14rem, .55vw + 1rem, 1.42rem); line-height: 1.32; color: var(--kz-sakit);
  margin: 0 0 .55em;
  opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .8s ease .12s, transform .9s cubic-bezier(.2, .7, .2, 1) .12s;
}
html:is([lang="ar"], [lang="zh"], [lang="th"]) .kz-sakit { font-style: normal; line-height: 1.55; font-size: clamp(1.05rem, .5vw + .92rem, 1.3rem); }
.kz-sakit-teks {
  background-image: linear-gradient(var(--kz-coret), var(--kz-coret));
  background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 58%;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  transition: background-size 1.05s cubic-bezier(.65, .05, .3, 1) .75s, opacity 1s ease 1.6s;
}
html[dir="rtl"] .kz-sakit-teks { background-position: 100% 58%; }
.kz-on .kz-sakit { opacity: 1; transform: none; }
.kz-on .kz-sakit-teks { background-size: 100% 1.5px; opacity: .6; }

/* jawaban Sarah */
.kz-jawab {
  display: flex; align-items: flex-start; gap: .8em; margin: 0;
  color: var(--kz-jawab); font-size: clamp(.95rem, .2vw + .9rem, 1.04rem); line-height: 1.6; font-weight: 500;
  max-width: 46ch;
  opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .9s ease 1.7s, transform 1s cubic-bezier(.2, .7, .2, 1) 1.7s;
}
.kz-on .kz-jawab { opacity: 1; transform: none; }
.kz-ikon {
  flex: 0 0 auto; width: 2em; height: 2em; margin-top: -.2em; border-radius: 50%;
  display: grid; place-items: center; color: var(--emas);
  border: 1px solid var(--garis);
  background: radial-gradient(circle at 50% 40%, rgba(212, 178, 106, .16), rgba(212, 178, 106, 0) 70%);
}
.kz-ikon-svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.kz-ikon-svg > * { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s ease 1.85s; }
.kz-on .kz-ikon-svg > * { stroke-dashoffset: 0; }
.kz-jawab-teks { min-width: 0; }

/* ---------------- penutup ---------------- */
.kz-tutup { text-align: center; padding-top: clamp(40px, 5vw, 76px); background: radial-gradient(closest-side, rgba(212, 178, 106, .075), rgba(212, 178, 106, 0)); }
.kz-tenang { position: relative; display: grid; place-items: center; height: clamp(84px, 7vw, 100px); margin-bottom: clamp(18px, 2.4vw, 28px); }
.kz-lurus {
  position: absolute; inset-inline: 0; top: 50%; width: 100%; height: 20px; margin-top: -10px; overflow: visible; color: var(--emas);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.kz-lurus line { fill: none; }
.kz-lurus-dasar {
  stroke: currentColor; stroke-width: 1.3; stroke-opacity: .85;
  transform-box: view-box; transform-origin: 50% 50%; transform: scaleX(0);
  transition: transform 1.8s cubic-bezier(.6, 0, .2, 1) .1s;
}
.kz-lurus-cahaya { stroke: var(--emas-muda); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 14 200; stroke-dashoffset: 14; opacity: 0; }
.kz-tutup.kz-on .kz-lurus-dasar { transform: scaleX(1); animation: kz-napas 4.8s ease-in-out 2s infinite; }
.kz-tutup.kz-on .kz-lurus-cahaya { animation: kz-cahaya 4.8s cubic-bezier(.4, 0, .3, 1) 1.9s infinite; }
@keyframes kz-napas { 0%, 100% { stroke-opacity: .85; } 50% { stroke-opacity: .45; } }
@keyframes kz-cahaya { 0% { stroke-dashoffset: 14; opacity: 0; } 12% { opacity: 1; } 80% { opacity: .7; } 100% { stroke-dashoffset: -100; opacity: 0; } }

.kz-potret {
  position: relative; z-index: 1; width: clamp(64px, 5.4vw, 80px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  background: #0c241b;
  box-shadow: 0 0 0 5px var(--malam), 0 0 0 6px rgba(212, 178, 106, .55), 0 0 50px -6px rgba(212, 178, 106, .4);
  opacity: 0; transform: scale(.82);
  transition: opacity 1.2s ease 1s, transform 1.4s cubic-bezier(.2, .8, .2, 1) 1s;
}
.kz-potret img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.kz-tutup.kz-on .kz-potret { opacity: 1; transform: none; }
/* riak lembut dari Sarah, seirama cahaya garis */
.kz-tenang::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: clamp(64px, 5.4vw, 80px); aspect-ratio: 1 / 1;
  border-radius: 50%; border: 1px solid rgba(212, 178, 106, .55); transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none;
}
.kz-tutup.kz-on .kz-tenang::after { animation: kz-riak 4.8s ease-out 1.9s infinite; }
@keyframes kz-riak { 0% { transform: translate(-50%, -50%) scale(1.08); opacity: .7; } 70%, 100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } }

.kz-tutup-1, .kz-tutup-2 {
  font-family: var(--serif); font-size: clamp(1.1rem, .6vw + .95rem, 1.4rem); line-height: 1.4;
  max-width: 46ch; margin: 0 auto; text-wrap: balance;
  opacity: 0; transform: translate3d(0, 12px, 0);
}
.kz-tutup-1 { color: var(--redup); transition: opacity 1s ease .25s, transform 1.1s cubic-bezier(.2, .7, .2, 1) .25s; }
.kz-tutup-2 { color: var(--gading); margin-top: .25em; transition: opacity 1s ease .8s, transform 1.1s cubic-bezier(.2, .7, .2, 1) .8s; }
html:is([lang="ar"], [lang="zh"], [lang="th"]) :is(.kz-tutup-1, .kz-tutup-2) { line-height: 1.6; max-width: 26em; }
.kz-itulah {
  font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -.01em;
  font-size: clamp(2.3rem, 2.6vw + 1.3rem, 3.9rem);
  margin: clamp(12px, 1.6vw, 18px) auto clamp(20px, 2.4vw, 28px); padding-bottom: .08em;
  background: linear-gradient(180deg, #fbf3dc 0%, #efdca9 40%, #d4b26a 75%, #8f7133 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(6px);
  transition: opacity 1.4s ease 1.35s, transform 1.6s cubic-bezier(.2, .7, .2, 1) 1.35s, filter 1.4s ease 1.35s;
}
html:is([lang="ar"], [lang="zh"], [lang="th"]) .kz-itulah { letter-spacing: 0; line-height: 1.35; font-size: clamp(2rem, 2.2vw + 1.2rem, 3.3rem); }
.kz-tutup.kz-on :is(.kz-tutup-1, .kz-tutup-2) { opacity: 1; transform: none; }
.kz-tutup.kz-on .kz-itulah { opacity: 1; transform: none; filter: blur(0); }

.kz-aksi { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 1s ease 2s, transform 1.1s cubic-bezier(.2, .7, .2, 1) 2s; }
.kz-cta { min-width: min(100%, 240px); padding-inline: 2em; }
.kz-cta-kecil { color: var(--redup); font-size: .86rem; margin: 0; letter-spacing: .02em; }
.kz-catatan {
  color: var(--redup); font-size: .8rem; line-height: 1.55; max-width: 60ch; margin: clamp(26px, 3.4vw, 40px) auto 0; padding-top: 16px; text-wrap: balance;
  border-top: 1px solid var(--garis-halus); opacity: 0; transition: opacity 1s ease 2.3s;
}
.kz-tutup.kz-on .kz-aksi { opacity: 1; transform: none; }
.kz-tutup.kz-on .kz-catatan { opacity: .92; }

/* ---------------- hemat: berhenti saat di luar layar ---------------- */
.kz-jeda *, .kz-jeda *::before, .kz-jeda *::after,
.diluar .kz *, .diluar .kz *::before, .diluar .kz *::after { animation-play-state: paused !important; }

/* ---------------- gerak dikurangi: keadaan akhir, diam ---------------- */
.kz-diam *, .kz-diam *::before, .kz-diam *::after { transition: none !important; animation: none !important; }
.kz-diam .kz-lurus-cahaya { opacity: 0; }
.kz-diam .kz-titik2 { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .kz .kz-kata, .kz .kz-sub, .kz .kz-label, .kz .kz-jam-angka, .kz .kz-sakit, .kz .kz-jawab,
  .kz .kz-potret, .kz .kz-tutup-1, .kz .kz-tutup-2, .kz .kz-itulah, .kz .kz-aksi { opacity: 1; transform: none; filter: none; }
  .kz .kz-sakit-teks { background-size: 100% 1.5px; opacity: .6; }
  .kz .kz-ikon-svg > * { stroke-dashoffset: 0; }
  .kz .kz-lurus-dasar { transform: none; }
  .kz .kz-catatan { opacity: .92; }
}

/* ---------------- HP ---------------- */
@media (max-width: 480px) {
  .kz-buka::before { inset-inline: 10%; }
  .kz-label { letter-spacing: .22em; }
  .kz-jawab { gap: .7em; }
}
@media (max-width: 359px) {
  .kz-judul { font-size: 1.75rem; }
  .kz-jam-angka { font-size: 1.95rem; }
  .kz-momen { column-gap: 12px; }
}

/* ---------------- TEMA TERANG ---------------- */
html[data-tema="terang"] .kz { --kz-sakit: #92584c; --kz-jawab: #6b5019; --kz-coret: #a8832f; }
html[data-tema="terang"] .kz-m1 { --kz-warna: #b4513f; }
html[data-tema="terang"] .kz-m2 { --kz-warna: #ad6437; }
html[data-tema="terang"] .kz-m3 { --kz-warna: #a8762f; }
html[data-tema="terang"] .kz-m4 { --kz-warna: #a0802c; }
html[data-tema="terang"] .kz-m5 { --kz-warna: #8c6a22; }
html[data-tema="terang"] .kz-nadi-bayang { opacity: .12; }
html[data-tema="terang"] .kz-ikon { color: #8c6a22; background: radial-gradient(circle at 50% 40%, rgba(212, 178, 106, .28), rgba(255, 255, 255, .4) 75%); border-color: rgba(140, 106, 34, .3); }
html[data-tema="terang"] .kz-lurus { color: #a8832f; }
html[data-tema="terang"] .kz-lurus-cahaya { stroke: #d4b26a; }
html[data-tema="terang"] .kz-potret { box-shadow: 0 0 0 6px var(--malam), 0 0 0 7px rgba(168, 131, 47, .6), 0 0 60px -6px rgba(168, 131, 47, .45); }
html[data-tema="terang"] .kz-tenang::after { border-color: rgba(168, 131, 47, .55); }
html[data-tema="terang"] .kz-itulah { background: linear-gradient(180deg, #c9a45a 0%, #a8832f 45%, #6b5019 100%); -webkit-background-clip: text; background-clip: text; }
html[data-tema="terang"] .kz-tutup { background: radial-gradient(closest-side, rgba(212, 178, 106, .16), rgba(212, 178, 106, 0)); }