/* ==========================================================
   S121 — "Satu keluarga dengan aplikasi Sarah"
   Lapisan di atas style.css/adegan.css/tema.css. Token warna lama
   (--malam, --emas, --emas-muda, --emas-tua, --gading, --redup,
   --redup-2, --garis, --garis-halus, --tepi, --nav-h) SENGAJA tidak
   diubah: /edukasi menyalinnya (killer S114 N7). Token baru ber-awalan --s-.
   CSP ketat: tanpa atribut style; gaya dinamis lewat CSSOM di s121.js.
   ========================================================== */
:root {
  --s-hitam: #0b0b0c;
  --s-zamrud: #06231a;
  --s-zamrud-2: #0d3a2b;
  --s-kaca: rgba(18, 20, 18, .62);
  --s-kaca-2: rgba(24, 24, 21, .82);
  --s-garis: rgba(214, 170, 90, .26);
  --s-garis-2: rgba(214, 170, 90, .12);
  --s-emas-grad: linear-gradient(135deg, #f1d08b, #c9963d);
  --s-emas-teks: #e5c27c;
  --s-di-emas: #1d1406;
  --s-naik: #6fc0ea;
  --s-turun: #f08d66;
  --s-bull: #36c29d;
  --s-bear: #ec6a72;
  --s-bayang: 0 40px 90px -40px rgba(0, 0, 0, .85);
  --s-kilap: inset 0 1px 0 rgba(255, 255, 255, .05);
  /* ponsel & laptop = layar aplikasi (gelap) */
  --p-bg: #0b0b0c; --p-kepala: #0f0f10; --p-garis: rgba(214, 170, 90, .18); --p-teks: #f3ede2; --p-sub: #a99f8d;
  --p-me: #3a2f1b; --p-her: #1b1a17; --p-pil: #18181a; --p-avatar: #0f4a3a; --p-avatar-teks: #8ee6c0;
}
html[data-tema="terang"] {
  --s-kaca: rgba(255, 252, 245, .74);
  --s-kaca-2: rgba(255, 252, 245, .9);
  --s-garis: rgba(150, 112, 40, .26);
  --s-garis-2: rgba(150, 112, 40, .12);
  --s-emas-teks: #7d5a17;
  --s-naik: #11608a;
  --s-turun: #9e4019;
  --s-bull: #11896a;
  --s-bear: #c2414c;
  --s-bayang: 0 30px 70px -36px rgba(90, 64, 20, .45);
  --s-kilap: inset 0 1px 0 rgba(255, 255, 255, .7);
  --p-bg: #f6f1e7; --p-kepala: #fbf7ee; --p-garis: rgba(150, 112, 40, .2); --p-teks: #1f1a12; --p-sub: #6f6553;
  --p-me: #f1dfb6; --p-her: #fffdf8; --p-pil: #efe7d8; --p-avatar: #0f4a3a; --p-avatar-teks: #bff3dc;
}

/* ---------- bahan bersama ---------- */
.kaca {
  background: var(--s-kaca); border: 1px solid var(--s-garis); border-radius: 24px;
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: var(--s-kilap), var(--s-bayang);
}
.tombol-emas { background: var(--s-emas-grad); color: var(--s-di-emas); }
html[data-tema="terang"] .tombol-emas { background: linear-gradient(135deg, #e7c47c, #c9973f); color: #2a1d06; }
.nav.padat { background: rgba(8, 9, 8, .9); }
html[data-tema="terang"] .nav.padat { background: rgba(246, 241, 231, .92); }
.judul-bab { letter-spacing: -.015em; }

/* ==========================================================
   PEMBUKA SINEMATIK (intro)
   ========================================================== */
.intro { display: none; }
html.intro-main .intro {
  display: grid; position: fixed; inset: 0; z-index: 400; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 46%, #0d3a2b 0%, #06231a 34%, #020806 82%);
  animation: introTutup .85s cubic-bezier(.6, 0, .3, 1) 2.15s forwards;
}
html.intro-main .intro-pusat { animation: pusatTerbang .85s cubic-bezier(.6, 0, .3, 1) 2.15s forwards; }
html.intro-main.intro-lewat .intro, html.intro-main.intro-lewat .intro-pusat { animation-duration: .5s; animation-delay: 0s; }
@keyframes introTutup { to { opacity: 0; visibility: hidden; } }
@keyframes pusatTerbang { to { transform: scale(4.5); opacity: 0; filter: blur(6px); } }
.intro-sinar {
  position: absolute; inset: -60%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(241, 223, 174, .11) 0deg 2.2deg, transparent 2.2deg 15deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 52%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 52%);
  animation: putarPelan 46s linear infinite, introHadir 1.4s ease .05s both;
}
.intro-debu, .sh-debu-css {
  position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(241, 223, 174, .9), transparent 60%),
    radial-gradient(1.2px 1.2px at 32% 72%, rgba(241, 223, 174, .7), transparent 60%),
    radial-gradient(2px 2px at 58% 36%, rgba(241, 223, 174, .8), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 82%, rgba(143, 230, 192, .55), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 22%, rgba(241, 223, 174, .75), transparent 60%),
    radial-gradient(1px 1px at 46% 92%, rgba(241, 223, 174, .7), transparent 60%),
    radial-gradient(1.4px 1.4px at 6% 58%, rgba(143, 230, 192, .5), transparent 60%);
  background-size: 260px 260px;
  animation: debuNaik 16s linear infinite, introHadir 1.6s ease both;
}
@keyframes debuNaik { from { background-position: 0 0; } to { background-position: 40px -260px; } }
.intro-pusat { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 24px; }
.intro-cincin { position: absolute; left: 50%; top: 50%; width: 168%; height: auto; transform: translate(-50%, -50%) rotate(-90deg); overflow: visible; pointer-events: none; }
.intro-cincin circle { fill: none; stroke: url(#gIntro); stroke-linecap: round; }
.intro-cincin .ic-1 { stroke-width: 1.6; stroke-dasharray: 654; stroke-dashoffset: 654; animation: cincinTarik 1.5s cubic-bezier(.6, 0, .2, 1) .05s forwards; filter: drop-shadow(0 0 6px rgba(241, 208, 139, .6)); }
.intro-cincin .ic-2 { stroke-width: .8; opacity: .45; stroke-dasharray: 2 7; animation: introHadir 1s ease .7s both; }
@keyframes cincinTarik { to { stroke-dashoffset: 0; } }
.intro-mono { position: relative; width: clamp(150px, 22vw, 240px); aspect-ratio: 300 / 237; animation: monoMasuk 1.4s cubic-bezier(.2, .8, .2, 1) .12s both; }
.intro-mono img { width: 100%; height: 100%; filter: drop-shadow(0 0 28px rgba(212, 178, 106, .38)); }
.intro-kilau {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 249, 228, .95) 50%, transparent 62%) 140% 0 / 260% 100% no-repeat;
  -webkit-mask: url("/img/s121/monogram-300.webp") center / contain no-repeat; mask: url("/img/s121/monogram-300.webp") center / contain no-repeat;
  animation: kilauLewat 1.1s ease-in-out .8s both;
}
@keyframes kilauLewat { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@keyframes monoMasuk { from { opacity: 0; transform: scale(1.14) translateY(6px); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
.intro-nama { margin: 6px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.15rem, 2.4vw, 1.6rem); letter-spacing: .55em; padding-inline-start: .55em; color: #ead5a0; animation: namaMasuk 1.2s cubic-bezier(.2, .8, .2, 1) .75s both; }
@keyframes namaMasuk { from { opacity: 0; letter-spacing: 1.1em; } to { opacity: 1; letter-spacing: .55em; } }
.intro-garis { display: block; margin-top: clamp(64px, 9vw, 104px); height: 1px; width: 180px; background: linear-gradient(90deg, transparent, #d4b26a, transparent); animation: garisMasuk .9s ease .85s both; }
@keyframes garisMasuk { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.intro-pasar { margin: 0; color: rgba(234, 213, 160, .82); font-size: .74rem; font-weight: 700; letter-spacing: .38em; padding-inline-start: .38em; animation: introHadir .8s ease 1.1s both; min-height: 1.2em; }
.intro-pasar::before { content: "FOREX · SAHAM AS · KRIPTO"; }
html[lang="en"] .intro-pasar::before, html[lang="fil"] .intro-pasar::before { content: "FOREX · US STOCKS · CRYPTO"; }
html[lang="es"] .intro-pasar::before { content: "FOREX · ACCIONES EE. UU. · CRIPTO"; }
html[lang="de"] .intro-pasar::before { content: "FOREX · US-AKTIEN · KRYPTO"; }
html[lang="ar"] .intro-pasar::before { content: "فوركس · أسهم أمريكية · عملات مشفرة"; }
html[lang="zh"] .intro-pasar::before { content: "外汇 · 美股 · 加密货币"; }
html[lang="th"] .intro-pasar::before { content: "ฟอเร็กซ์ · หุ้นสหรัฐฯ · คริปโต"; }
html:is([lang="ar"], [lang="zh"], [lang="th"]) .intro-pasar { letter-spacing: .12em; font-size: .85rem; }
@keyframes introHadir { from { opacity: 0; } to { opacity: 1; } }
@keyframes putarPelan { to { transform: rotate(360deg); } }

/* ==========================================================
   HERO
   ========================================================== */
.hero-s121 { isolation: isolate; flex-direction: column; justify-content: center; align-items: stretch; padding: calc(var(--nav-h) + 30px) 0 0; background: #030a08; }
.hero-s121 .hero-kabut, .hero-s121 .gulir { display: none; }
.sh-latar { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sh-foto-bungkus { position: absolute; inset: -4% -3% -8%; will-change: transform; }
.sh-foto-bungkus picture, .sh-foto { display: block; width: 100%; height: 100%; }
.sh-foto { object-fit: cover; object-position: 62% 58%; filter: saturate(1.08) contrast(1.08) brightness(1.04); animation: fotoMasuk 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fotoMasuk { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.sh-tirai {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 10, 8, .9) 0%, rgba(3, 10, 8, .28) 26%, rgba(3, 10, 8, .18) 52%, rgba(3, 10, 8, .72) 82%, var(--malam) 100%),
    linear-gradient(90deg, rgba(3, 10, 8, .92) 0%, rgba(3, 10, 8, .66) 34%, rgba(3, 10, 8, .12) 66%, rgba(3, 10, 8, 0) 100%);
}
html[dir="rtl"] .sh-tirai {
  background:
    linear-gradient(180deg, rgba(3, 10, 8, .9) 0%, rgba(3, 10, 8, .28) 26%, rgba(3, 10, 8, .18) 52%, rgba(3, 10, 8, .72) 82%, var(--malam) 100%),
    linear-gradient(270deg, rgba(3, 10, 8, .92) 0%, rgba(3, 10, 8, .66) 34%, rgba(3, 10, 8, .12) 66%, rgba(3, 10, 8, 0) 100%);
}
.sh-tirai::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 22% 70%, #0e5a40, #07261c 70%); mix-blend-mode: color; opacity: .42; }
.sh-sinar { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.sh-kabut-bawah { position: absolute; inset-inline: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, transparent, var(--malam)); }

.sh-grid { position: relative; display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .sh-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.hero-s121 .hero-teks, .hero-s121 .jam { animation: none; }
.sh-teks { max-width: 660px; }
.sh-teks .kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--s-emas-teks); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.sh-teks .kicker::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--emas)); }
html:is([lang="ar"], [lang="zh"], [lang="th"]) .sh-teks .kicker { letter-spacing: .06em; }
.sh-judul { font-family: var(--serif); font-weight: 500; font-size: clamp(2.7rem, 5.6vw + .4rem, 6rem); line-height: 1; letter-spacing: -.02em; margin: 0 0 .32em; max-width: 12ch; }
html:is([lang="de"], [lang="es"], [lang="fil"]) .sh-judul { max-width: 14ch; font-size: clamp(2.5rem, 5vw + .4rem, 5.4rem); }
html:is([lang="ar"], [lang="zh"], [lang="th"]) .sh-judul { line-height: 1.25; letter-spacing: 0; max-width: 13em; font-size: clamp(2.3rem, 4.4vw + .4rem, 4.6rem); }
.sh-judul-isi {
  background: linear-gradient(100deg, #b8893a 0%, #f3dfa6 16%, #d4b26a 30%, #fff4d2 42%, #c99a48 56%, #f1dfae 74%, #a77d33 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .45));
  animation: judulKilau 9s ease-in-out 1s infinite;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@keyframes judulKilau { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
html[data-tema="terang"] .sh-judul-isi { background-image: linear-gradient(100deg, #7a5718 0%, #b8892f 22%, #8c6a22 40%, #c99a48 58%, #6b5019 100%); filter: none; }
.sh-lead { font-family: var(--serif); font-size: clamp(1.25rem, .9vw + .95rem, 1.75rem); line-height: 1.3; color: var(--gading); max-width: 32ch; margin-bottom: .5em; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
html:is([lang="de"], [lang="es"], [lang="fil"]) .sh-lead { max-width: 36ch; }
.sh-sub { color: #c5cfc8; max-width: 46ch; font-size: 1.04em; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

/* kotak tanya ala beranda aplikasi */
.sh-tanya {
  position: relative; display: flex; align-items: center; gap: 12px; max-width: 560px; min-height: 64px; margin-top: 26px;
  padding-block: 7px; padding-inline: 20px 7px; border-radius: 999px;
  background: rgba(12, 12, 13, .58); border: 1px solid var(--s-garis);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--s-kilap), 0 20px 50px -24px rgba(0, 0, 0, .9);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.sh-tanya:focus-within { border-color: var(--emas); box-shadow: 0 0 0 4px rgba(212, 178, 106, .14), 0 20px 50px -24px rgba(0, 0, 0, .9); }
.sh-tanya-ikon { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--emas); stroke-width: 1.6; stroke-linejoin: round; }
.sh-tanya input { flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--gading); font-size: 1.02rem; outline: none; }
.sh-tanya input::placeholder { color: #a99f8d; opacity: 1; }
.sh-tanya input:focus-visible { outline: none; }
.sh-tanya-contoh { display: none; }
.sh-tanya-kirim { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--s-emas-grad); box-shadow: 0 8px 26px -8px rgba(212, 178, 106, .8); transition: transform .25s ease; }
.sh-tanya-kirim:hover { transform: scale(1.06); }
.sh-tanya-kirim svg { width: 22px; height: 22px; fill: none; stroke: var(--s-di-emas); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .sh-tanya-kirim svg { transform: scaleX(-1); }
.hero-s121 .hero-aksi { margin-top: 20px; }

/* tokoh: Sarah v2 di cincin 24 jam + tiga pasar mengorbit */
.sh-jam { width: min(100%, 470px); }
.sh-jam .jam-potret { inset: 12.5%; box-shadow: 0 0 0 2px rgba(232, 196, 120, .85), 0 0 0 7px rgba(212, 178, 106, .12), 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 110px -10px rgba(212, 178, 106, .45); background: #0b0b0c; }
.sh-jam .jam-potret img { object-position: 50% 40%; }
.sh-jam .jam-potret::after { background: radial-gradient(circle at 50% 120%, rgba(4, 14, 11, .7), transparent 50%); }
.sh-orbit { position: absolute; inset: -5%; pointer-events: none; animation: putarPelan 70s linear infinite; }
.sh-satelit { position: absolute; inset: 0; }
.sh-sat-1 { --a: -38deg; transform: rotate(-38deg); }
.sh-sat-2 { --a: 82deg; transform: rotate(82deg); }
.sh-sat-3 { --a: 202deg; transform: rotate(202deg); }
.sh-satelit > i {
  position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; gap: 7px; font-style: normal; white-space: nowrap;
  padding: 7px 13px 7px 9px; border-radius: 999px; background: rgba(12, 12, 13, .78); border: 1px solid var(--s-garis);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--emas-muda); font-size: .78rem; font-weight: 600;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .9);
  animation: satelitLawan 70s linear infinite;
}
@keyframes satelitLawan { from { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); } to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 - 360deg)); } }
.sh-satelit svg { width: 18px; height: 18px; padding: 2px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; background: rgba(212, 178, 106, .14); box-sizing: content-box; }
.sh-satelit b { font-weight: 600; }
.sh-jam .gt { z-index: 2; }
.sh-jam .jam-pil { z-index: 2; }
@media (max-width: 999px) {
  .sh-grid { justify-items: center; text-align: start; }
  .sh-teks { justify-self: stretch; }
  .sh-jam { width: min(72vw, 400px); margin-top: 14px; }
}
@media (max-width: 600px) {
  .sh-satelit > i { font-size: .68rem; padding: 5px 10px 5px 7px; gap: 5px; }
  .sh-satelit svg { width: 14px; height: 14px; }
  .sh-orbit { inset: -1%; }
}

/* dok pintasan ala beranda aplikasi */
.sh-dok { position: relative; display: flex; justify-content: center; gap: clamp(10px, 3vw, 34px); margin: clamp(28px, 4vw, 44px) auto clamp(30px, 4vw, 48px); padding-inline: var(--tepi); max-width: 100%; }
.sh-dok a { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 56px; text-decoration: none; color: #c9c1b0; font-size: .82rem; letter-spacing: .02em; white-space: nowrap; }
.sh-dok-ikon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--s-garis); background: rgba(12, 12, 13, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease; box-shadow: var(--s-kilap); }
.sh-dok-ikon svg { width: 24px; height: 24px; fill: none; stroke: #f0e6d2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-dok a:hover .sh-dok-ikon, .sh-dok a:focus-visible .sh-dok-ikon { transform: translateY(-4px); border-color: var(--emas); box-shadow: 0 0 0 4px rgba(212, 178, 106, .12), 0 0 30px -6px rgba(212, 178, 106, .6); }
.sh-dok a:focus-visible { outline: none; }
.sh-dok-utama .sh-dok-ikon { border: 1.5px solid #e2b866; box-shadow: 0 0 26px -6px rgba(226, 184, 102, .75), inset 0 0 18px -8px rgba(226, 184, 102, .6); }
.sh-dok-utama .sh-dok-ikon svg { stroke: #f1d08b; }
.sh-dok-utama { color: var(--emas-muda) !important; }
@media (max-width: 420px) { .sh-dok-ikon { width: 52px; height: 52px; } .sh-dok-ikon svg { width: 21px; height: 21px; } .sh-dok a { font-size: .72rem; min-width: 52px; } }

/* masuk bertahap sesudah pembuka (CSS murni: tak bergantung JS) */
.sh-teks > *, .sh-jam, .sh-dok a { animation: shNaik 1s cubic-bezier(.2, .8, .2, 1) both; }
.sh-teks > :nth-child(1) { animation-delay: .1s; } .sh-teks > :nth-child(2) { animation-delay: .16s; } .sh-teks > :nth-child(3) { animation-delay: .24s; }
.sh-teks > :nth-child(4) { animation-delay: .34s; } .sh-teks > :nth-child(5) { animation-delay: .42s; } .sh-teks > :nth-child(6) { animation-delay: .5s; } .sh-teks > :nth-child(7) { animation-delay: .58s; }
.sh-jam { animation: shPotret 1.4s cubic-bezier(.2, .8, .2, 1) .2s both; }
.sh-dok a:nth-child(1) { animation-delay: .5s; } .sh-dok a:nth-child(2) { animation-delay: .56s; } .sh-dok a:nth-child(3) { animation-delay: .62s; } .sh-dok a:nth-child(4) { animation-delay: .68s; } .sh-dok a:nth-child(5) { animation-delay: .74s; }
html.intro-main:not(.intro-lewat) .sh-teks > *, html.intro-main:not(.intro-lewat) .sh-jam, html.intro-main:not(.intro-lewat) .sh-dok a { animation-delay: calc(2.35s + var(--tunda, 0s)); }
html.intro-main:not(.intro-lewat) .sh-teks > :nth-child(2) { --tunda: .06s; } html.intro-main:not(.intro-lewat) .sh-teks > :nth-child(3) { --tunda: .14s; }
html.intro-main:not(.intro-lewat) .sh-teks > :nth-child(4) { --tunda: .24s; } html.intro-main:not(.intro-lewat) .sh-teks > :nth-child(5) { --tunda: .32s; }
html.intro-main:not(.intro-lewat) .sh-teks > :nth-child(6) { --tunda: .4s; } html.intro-main:not(.intro-lewat) .sh-teks > :nth-child(7) { --tunda: .48s; }
html.intro-main:not(.intro-lewat) .sh-jam { --tunda: -.35s; }
html.intro-main:not(.intro-lewat) .sh-dok a { --tunda: .5s; }
@keyframes shNaik { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes shPotret { from { opacity: 0; transform: scale(.86) rotate(-6deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* tema terang: gunung jadi pagi berkabut keemasan, seperti aplikasi mode terang */
html[data-tema="terang"] .hero-s121 { background: #f6f0e4; }
html[data-tema="terang"] .sh-foto { filter: sepia(.45) saturate(.75) brightness(1.18) contrast(.82); opacity: .9; }
html[data-tema="terang"] .sh-tirai {
  background:
    linear-gradient(180deg, rgba(246, 240, 228, .96) 0%, rgba(246, 240, 228, .5) 28%, rgba(246, 240, 228, .3) 55%, rgba(246, 240, 228, .8) 84%, var(--malam) 100%),
    linear-gradient(90deg, rgba(246, 240, 228, .97) 0%, rgba(246, 240, 228, .8) 36%, rgba(246, 240, 228, .2) 70%, rgba(246, 240, 228, 0) 100%);
}
html[data-tema="terang"][dir="rtl"] .sh-tirai {
  background:
    linear-gradient(180deg, rgba(246, 240, 228, .96) 0%, rgba(246, 240, 228, .5) 28%, rgba(246, 240, 228, .3) 55%, rgba(246, 240, 228, .8) 84%, var(--malam) 100%),
    linear-gradient(270deg, rgba(246, 240, 228, .97) 0%, rgba(246, 240, 228, .8) 36%, rgba(246, 240, 228, .2) 70%, rgba(246, 240, 228, 0) 100%);
}
html[data-tema="terang"] .sh-tirai::after { background: radial-gradient(90% 70% at 70% 40%, #f3d6a6, #efe2c6 70%); mix-blend-mode: soft-light; opacity: .8; }
html[data-tema="terang"] .sh-sinar { mix-blend-mode: multiply; opacity: .55; }
html[data-tema="terang"] .sh-lead { color: #1f1a12; text-shadow: none; }
html[data-tema="terang"] .sh-sub { color: #4a4436; text-shadow: none; }
html[data-tema="terang"] .sh-teks .kicker { text-shadow: none; }
html[data-tema="terang"] .sh-tanya { background: rgba(255, 252, 245, .8); box-shadow: var(--s-kilap), 0 16px 40px -24px rgba(90, 64, 20, .5); }
html[data-tema="terang"] .sh-tanya input { color: #1f1a12; }
html[data-tema="terang"] .sh-tanya input::placeholder { color: #7a6f5c; }
html[data-tema="terang"] .sh-tanya-ikon { stroke: #a8792a; }
html[data-tema="terang"] .sh-dok a { color: #4a4436; }
html[data-tema="terang"] .sh-dok-ikon { background: rgba(255, 252, 245, .78); }
html[data-tema="terang"] .sh-dok-ikon svg { stroke: #3b3122; }
html[data-tema="terang"] .sh-dok-utama .sh-dok-ikon svg { stroke: #a8792a; }
html[data-tema="terang"] .sh-dok-utama { color: #7d5a17 !important; }
html[data-tema="terang"] .sh-satelit > i { background: rgba(255, 252, 245, .9); color: #7d5a17; box-shadow: 0 12px 26px -16px rgba(90, 64, 20, .6); }

/* ==========================================================
   SEGMEN (ala tab Forex | Saham | Kripto di aplikasi)
   ========================================================== */
.segmen { position: relative; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(12, 12, 13, .55); border: 1px solid var(--s-garis); max-width: 100%; overflow-x: auto; scrollbar-width: none; box-shadow: var(--s-kilap); }
.segmen::-webkit-scrollbar { display: none; }
.segmen button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #b9b09e; font-weight: 600; font-size: .93rem; white-space: nowrap; transition: color .35s ease; }
.segmen button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.segmen button[aria-selected="true"], .segmen button[aria-pressed="true"] { color: var(--s-di-emas); background: var(--s-emas-grad); }
.segmen.segmen-siap button[aria-selected="true"], .segmen.segmen-siap button[aria-pressed="true"] { background: transparent; }
.segmen-sorot { position: absolute; z-index: 0; top: 5px; height: calc(100% - 10px); left: 0; width: 0; border-radius: 999px; background: var(--s-emas-grad); box-shadow: 0 8px 24px -10px rgba(212, 178, 106, .8); transition: left .5s cubic-bezier(.3, .9, .2, 1), width .5s cubic-bezier(.3, .9, .2, 1), top .5s cubic-bezier(.3, .9, .2, 1), height .5s cubic-bezier(.3, .9, .2, 1); opacity: 0; }
.segmen.segmen-siap .segmen-sorot { opacity: 1; }
.segmen button:focus-visible { outline: 2px solid var(--emas-muda); outline-offset: -3px; }
html[data-tema="terang"] .segmen { background: rgba(255, 252, 245, .8); }
html[data-tema="terang"] .segmen button { color: #6f6553; }
html[data-tema="terang"] .segmen button[aria-selected="true"], html[data-tema="terang"] .segmen button[aria-pressed="true"] { color: #2a1d06; }
.segera-titik { display: none; width: 8px; height: 8px; border-radius: 50%; background: #e2b866; box-shadow: 0 0 0 2px rgba(12, 12, 13, .9); margin-inline-start: -2px; align-self: flex-start; margin-top: 10px; }
#pasar[data-segera~="saham"] #tabSaham .segera-titik, #pasar[data-segera~="kripto"] #tabKripto .segera-titik { display: block; }
@media (max-width: 460px) { .segmen-pasar button { padding: 0 12px; font-size: .84rem; gap: 6px; } .segmen-pasar button svg { display: none; } }

/* ==========================================================
   PASAR — satu Sarah, tiga pasar
   ========================================================== */
.bab-pasar { overflow: hidden; }
.pasar-cahaya { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 520px at 74% 50%, rgba(14, 90, 64, .38), transparent 70%), radial-gradient(520px 420px at 78% 42%, rgba(212, 178, 106, .12), transparent 70%); }
html[dir="rtl"] .pasar-cahaya { transform: scaleX(-1); }
.pasar-grid { position: relative; display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .pasar-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); } }
.pasar-kartu { margin-top: 22px; padding: clamp(22px, 3vw, 30px); max-width: 560px; min-height: 17.5em; }
.pasar-kartu-kepala { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pasar-kartu h3 { font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); color: var(--gading); }
.pasar-kartu p { color: var(--redup); margin-bottom: 14px; }
.pasar-poin { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pasar-poin li { position: relative; padding-inline-start: 32px; color: var(--gading); line-height: 1.45; }
.pasar-poin li::before { content: ""; position: absolute; inset-inline-start: 0; top: .12em; width: 20px; height: 20px; border-radius: 50%; background: rgba(212, 178, 106, .14); border: 1px solid var(--s-garis); }
.pasar-poin li::after { content: ""; position: absolute; inset-inline-start: 6.5px; top: calc(.12em + 5px); width: 6px; height: 9px; border: solid var(--emas); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.pasar-kartu.ganti > * { animation: kartuGanti .55s cubic-bezier(.2, .8, .2, 1) both; }
.pasar-kartu.ganti > :nth-child(2) { animation-delay: .05s; } .pasar-kartu.ganti > :nth-child(3) { animation-delay: .1s; }
@keyframes kartuGanti { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.segera-lencana, .segera-teks { display: none; }
.segera-lencana { align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--s-emas-grad); color: var(--s-di-emas); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html:is([lang="ar"], [lang="zh"], [lang="th"]) .segera-lencana { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.segera-teks { color: var(--s-emas-teks) !important; font-size: .86rem; margin: 14px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--s-garis-2); }
#pasar[data-segera~="saham"] .pasar-kartu[data-pasar-aktif="saham"] :is(.segera-lencana, .segera-teks),
#pasar[data-segera~="kripto"] .pasar-kartu[data-pasar-aktif="kripto"] :is(.segera-lencana, .segera-teks) { display: inline-flex; }
#pasar[data-segera~="saham"] .pasar-kartu[data-pasar-aktif="saham"] .segera-teks,
#pasar[data-segera~="kripto"] .pasar-kartu[data-pasar-aktif="kripto"] .segera-teks { display: block; }

.pasar-panggung { position: relative; display: grid; justify-items: center; padding-block: 10px; }
.pasar-lajur { position: absolute; inset: 8% -12%; display: grid; align-content: center; gap: 14px; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); transition: opacity .6s ease; }
.pasar-lajur.redup { opacity: 0; }
.lajur { display: flex; width: max-content; white-space: nowrap; font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.05; color: transparent; -webkit-text-stroke: 1px rgba(212, 178, 106, .22); animation: lajurJalan 38s linear infinite; direction: ltr; }
.lajur:nth-child(2) { animation-direction: reverse; animation-duration: 46s; -webkit-text-stroke-color: rgba(143, 230, 192, .14); }
.lajur:nth-child(3) { animation-duration: 54s; }
.lajur span { padding-inline-end: .5em; }
@keyframes lajurJalan { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[data-tema="terang"] .lajur { -webkit-text-stroke-color: rgba(150, 112, 40, .26); }
html[data-tema="terang"] .lajur:nth-child(2) { -webkit-text-stroke-color: rgba(17, 96, 74, .18); }
.pasar-catatan { position: relative; text-align: center; margin-top: 18px; }

/* ==========================================================
   PONSEL & LAPTOP = layar aplikasi Sarah (direka ulang hidup, teks i18n)
   ========================================================== */
.ponsel-s121 {
  position: relative; width: min(334px, 80vw); aspect-ratio: 9 / 18.6; padding: 10px; border-radius: 48px; container-type: inline-size;
  background: linear-gradient(150deg, #3a3833, #121212 40%, #26241f);
  box-shadow: 0 0 0 1px rgba(214, 170, 90, .38), inset 0 0 0 2px rgba(0, 0, 0, .6), 0 60px 120px -40px rgba(0, 0, 0, .95), 0 0 120px -30px rgba(212, 178, 106, .4);
  transform: perspective(1400px) rotateY(var(--ry, -9deg)) rotateX(var(--rx, 4deg)); transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.ponsel-s121::before { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 3; }
.ps-layar, .la-layar { height: 100%; border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; background: var(--p-bg); color: var(--p-teks); font-family: var(--sans); font-size: 4.1cqw; line-height: 1.38; text-align: start; }
.ps-status { display: flex; justify-content: space-between; align-items: center; padding: 4.8cqw 7cqw 1cqw; font-size: 3.6cqw; font-weight: 700; direction: ltr; }
.ps-status i { display: inline-flex; gap: 1.2cqw; }
.ps-status i b { width: 4cqw; height: 2.6cqw; border-radius: 1cqw; background: currentColor; opacity: .8; }
.ps-kepala { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 4cqw 3cqw; background: var(--p-kepala); border-bottom: 1px solid var(--p-garis); }
.ps-balik { color: var(--emas); font-size: 6cqw; line-height: 1; }
html[dir="rtl"] .ps-balik { transform: scaleX(-1); }
.ps-ava { width: 11cqw; height: 11cqw; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--p-avatar); color: var(--p-avatar-teks); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 6.4cqw; }
.ps-nama { display: grid; min-width: 0; }
.ps-nama b { font-family: var(--serif); font-size: 5cqw; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-nama small { color: var(--p-sub); font-size: 3.3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-tab { display: flex; gap: 1.8cqw; padding: 2.6cqw 3cqw; border-bottom: 1px solid var(--p-garis); }
.ps-tab span { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 9.5cqw; padding: 0 1.5cqw; border-radius: 999px; border: 1px solid var(--p-garis); background: var(--p-pil); color: var(--p-sub); font-size: 3.3cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .4s ease, color .4s ease; }
.ps-tab span.aktif { background: var(--s-emas-grad); color: var(--s-di-emas); border-color: transparent; }
.ps-tab span.titik::after { content: ""; position: absolute; top: 1.2cqw; inset-inline-end: 2.6cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: #e2b866; }
.ps-isi { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2.6cqw; padding: 3.4cqw 3.4cqw 2cqw; }
.ps-hari { align-self: center; padding: 1cqw 3.4cqw; border-radius: 999px; border: 1px solid var(--p-garis); color: var(--s-emas-teks); font-size: 2.9cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ps-g { max-width: 90%; padding: 3cqw 3.8cqw; border-radius: 3.8cqw; font-size: 4.5cqw; line-height: 1.42; animation: gelembungMasuk .5s cubic-bezier(.2, .8, .2, 1) both; overflow-wrap: anywhere; }
.ps-g.saya { align-self: flex-end; background: var(--p-me); border-end-end-radius: 1cqw; }
.ps-g.dia { align-self: flex-start; background: var(--p-her); border: 1px solid var(--p-garis); border-end-start-radius: 1cqw; }
.ps-g.dia > b { display: block; color: var(--s-emas-teks); font-size: 3.6cqw; margin-bottom: .6cqw; }
.ps-g ul { margin: 1cqw 0; padding-inline-start: 4cqw; }
.ps-g li { margin: .4cqw 0; }
.ps-g li strong, .ps-g p strong { font-weight: 800; }
.ps-g p { margin: 1cqw 0 0; }
.ps-g .ps-kecil { color: var(--p-sub); }
.ps-ketik { align-self: flex-start; display: inline-flex; gap: 1.2cqw; padding: 3cqw 4cqw; border-radius: 3.6cqw; background: var(--p-her); border: 1px solid var(--p-garis); }
.ps-ketik i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--s-emas-teks); animation: ketikTitik 1s ease-in-out infinite; }
.ps-ketik i:nth-child(2) { animation-delay: .15s; } .ps-ketik i:nth-child(3) { animation-delay: .3s; }
@keyframes ketikTitik { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-.8cqw); } }
@keyframes gelembungMasuk { from { opacity: 0; transform: translateY(3cqw) scale(.97); } to { opacity: 1; transform: none; } }
.ps-tulis { display: flex; align-items: center; gap: 2.4cqw; padding: 2.6cqw 3.4cqw 4.6cqw; border-top: 1px solid var(--p-garis); }
.ps-tulis .ps-plus { color: var(--emas); font-size: 6cqw; line-height: 1; }
.ps-tulis span.ps-kolom { flex: 1 1 auto; min-width: 0; padding: 2.6cqw 4cqw; border-radius: 999px; border: 1px solid var(--p-garis); color: var(--p-sub); font-size: 3.5cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-tulis .ps-kirim { width: 10cqw; height: 10cqw; flex: 0 0 auto; border-radius: 50%; background: var(--s-emas-grad); display: grid; place-items: center; }
.ps-tulis .ps-kirim::after { content: ""; border-style: solid; border-width: 1.6cqw 0 1.6cqw 2.8cqw; border-color: transparent transparent transparent var(--s-di-emas); margin-inline-start: .6cqw; }
html[dir="rtl"] .ps-tulis .ps-kirim::after { transform: scaleX(-1); }
@media (max-width: 959px) { .ponsel-s121 { --ry: 0deg; --rx: 0deg; } }

/* laptop di bagian "Di mana saja": layar aplikasi Sarah dua panel (gelap-emas) */
.alat-laptop .laptop-layar { display: block; background: var(--p-bg); border-color: #1c1c1d; container-type: inline-size; position: relative; }
.laptop-app { position: absolute; inset: 0; }
.la-layar { border-radius: 0; flex-direction: row; font-size: 2cqw; }
.la-sisi { width: 35%; flex: 0 0 auto; display: flex; flex-direction: column; gap: 1.4cqw; padding: 2cqw 1.8cqw; border-inline-end: 1px solid var(--p-garis); background: var(--p-kepala); }
.la-merek { display: flex; align-items: center; gap: 1.2cqw; font-family: "Cormorant Garamond", Georgia, serif; letter-spacing: .3em; font-size: 2.3cqw; color: var(--s-emas-teks); }
.la-merek img { width: 4cqw; height: auto; }
.la-cari { padding: 1cqw 1.6cqw; border-radius: 999px; border: 1px solid var(--p-garis); color: var(--p-sub); font-size: 1.6cqw; }
.la-baris { display: flex; gap: 1.2cqw; align-items: center; padding: 1cqw 1.2cqw; border-radius: 1.4cqw; transition: background .4s ease; }
.la-baris.aktif { background: rgba(212, 178, 106, .12); box-shadow: inset 0 0 0 1px var(--p-garis); }
.la-baris .ps-ava { width: 4.6cqw; height: 4.6cqw; font-size: 2.6cqw; }
.la-baris div { display: grid; min-width: 0; }
.la-baris b { font-size: 1.8cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-baris small { font-size: 1.45cqw; color: var(--p-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-utama { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.la-utama .ps-kepala { padding: 1.4cqw 2cqw; gap: 1.4cqw; }
.la-utama .ps-ava { width: 5cqw; height: 5cqw; font-size: 2.8cqw; }
.la-utama .ps-nama b { font-size: 2.2cqw; } .la-utama .ps-nama small { font-size: 1.5cqw; }
.la-utama .ps-isi { padding: 2cqw 2.6cqw; gap: 1.3cqw; }
.la-utama .ps-hari { font-size: 1.4cqw; padding: .5cqw 1.6cqw; }
.la-utama .ps-g { font-size: 1.7cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.6cqw; max-width: 78%; }
.la-utama .ps-g.dia > b { font-size: 1.5cqw; }
.la-utama .ps-ketik { padding: 1.4cqw 2cqw; } .la-utama .ps-ketik i { width: .9cqw; height: .9cqw; }
.la-utama .ps-tulis { padding: 1.2cqw 2cqw; gap: 1.2cqw; }
.la-utama .ps-tulis .ps-plus { font-size: 2.6cqw; } .la-utama .ps-tulis span.ps-kolom { font-size: 1.6cqw; padding: 1cqw 2cqw; }
.la-utama .ps-tulis .ps-kirim { width: 4.4cqw; height: 4.4cqw; }
.la-utama .ps-tulis .ps-kirim::after { border-width: .8cqw 0 .8cqw 1.3cqw; }

/* ==========================================================
   FUNDAMENTAL — rantai makro hidup
   ========================================================== */
.bab-fund { overflow: hidden; }
.bab-fund::after { content: ""; position: absolute; inset: auto 0 0; height: 60%; pointer-events: none; z-index: -1; background: radial-gradient(60% 80% at 50% 100%, rgba(14, 90, 64, .28), transparent 70%); }
.fund-kepala { display: grid; gap: 18px 40px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 1000px) { .fund-kepala { grid-template-columns: minmax(0, 1fr) auto; } }
.fund-kepala .kapsi { margin-bottom: 0; }
.fund-petunjuk { margin: 0 0 10px; color: var(--redup); font-size: .86rem; }
.segmen-kecil button { min-height: 46px; font-size: .88rem; padding: 0 16px; }
@media (max-width: 640px) {
  .segmen-kecil { display: flex; flex-direction: column; align-items: stretch; border-radius: 26px; width: 100%; overflow: visible; }
  .segmen-kecil button { justify-content: flex-start; white-space: normal; text-align: start; padding: 8px 16px; }
}
.fs-titik { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.fs-panas { background: var(--s-turun); box-shadow: 0 0 10px var(--s-turun); }
.fs-dingin { background: var(--s-naik); box-shadow: 0 0 10px var(--s-naik); }
.rantai { list-style: none; margin: clamp(34px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; counter-reset: mata; }
.mata { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; padding-bottom: 26px; }
.mata-simpul { position: relative; z-index: 1; grid-row: span 4; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--s-kaca-2); border: 1px solid var(--s-garis); box-shadow: var(--s-kilap), 0 16px 40px -20px rgba(0, 0, 0, .9); transition: box-shadow .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1), border-color .5s ease; }
.mata-simpul svg { width: 30px; height: 30px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .7s cubic-bezier(.5, 1.6, .4, 1), stroke .4s ease; }
.mata[data-arah="naik"] .mata-simpul svg { stroke: var(--s-naik); }
.mata[data-arah="turun"] .mata-simpul svg { stroke: var(--s-turun); transform: rotate(180deg); }
.mata-no { position: absolute; top: -6px; inset-inline-end: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--s-emas-grad); color: var(--s-di-emas); font-size: .72rem; font-weight: 800; }
.mata-label { font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; color: var(--gading); margin: 6px 0 4px; }
.mata-arah { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; border: 1px solid currentColor; }
.mata[data-arah="naik"] .mata-arah { color: var(--s-naik); background: color-mix(in srgb, var(--s-naik) 10%, transparent); }
.mata[data-arah="turun"] .mata-arah { color: var(--s-turun); background: color-mix(in srgb, var(--s-turun) 10%, transparent); }
.mata-spark { width: 100%; max-width: 160px; height: 38px; margin: 8px 0 2px; overflow: visible; }
.mata-spark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 220; }
.mata[data-arah="naik"] .mata-spark path { stroke: var(--s-naik); }
.mata[data-arah="turun"] .mata-spark path { stroke: var(--s-turun); }
.mata.nyala .mata-spark path { animation: garisTarik 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes garisTarik { to { stroke-dashoffset: 0; } }
.mata-teks { color: var(--redup); font-size: .9rem; line-height: 1.5; margin: 4px 0 0; }
.mata.nyala .mata-simpul { border-color: var(--emas); box-shadow: 0 0 0 5px rgba(212, 178, 106, .12), 0 0 38px -4px rgba(212, 178, 106, .55); animation: simpulDenyut .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes simpulDenyut { 0% { transform: scale(.9); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* penghubung: garis emas mengalir + denyut berjalan */
.mata::after { content: ""; position: absolute; inset-inline-start: 35px; top: 76px; bottom: 4px; width: 2px; background: linear-gradient(180deg, var(--s-garis), var(--s-garis-2)); }
.mata:last-child::after { display: none; }
.mata::before { content: ""; position: absolute; z-index: 2; inset-inline-start: 32px; top: 76px; width: 8px; height: 8px; border-radius: 50%; background: #fff3cf; box-shadow: 0 0 14px 4px rgba(241, 208, 139, .8); opacity: 0; }
.mata.mengalir::before { animation: denyutTurun .7s ease-in forwards; }
.mata:last-child::before { display: none; }
@keyframes denyutTurun { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--panjang, 80px))); } }
@media (min-width: 680px) and (max-width: 1099px) {
  .rantai { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .mata { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 0 12px; }
  .mata-simpul { grid-row: auto; }
  .mata-arah { justify-self: center; }
  .mata::after { top: 35px; bottom: auto; inset-inline-start: calc(50% + 46px); width: calc(100% - 92px); height: 2px; background: repeating-linear-gradient(90deg, var(--emas) 0 6px, transparent 6px 12px); opacity: .45; animation: alirMendatar 1.2s linear infinite; }
  .mata:nth-child(3n)::after, .mata:nth-child(3n)::before { display: none; }
  .mata::before { top: 31px; inset-inline-start: calc(50% + 46px); }
  .mata.mengalir::before { animation: denyutMendatar .7s ease-in forwards; }
}
@media (min-width: 1100px) {
  .rantai { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mata { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 0 10px; }
  .mata-simpul { grid-row: auto; }
  .mata-arah { justify-self: center; }
  .mata::after { top: 35px; bottom: auto; inset-inline-start: calc(50% + 46px); width: calc(100% - 92px); height: 2px; background: repeating-linear-gradient(90deg, var(--emas) 0 6px, transparent 6px 12px); opacity: .45; animation: alirMendatar 1.2s linear infinite; }
  .mata::before { top: 31px; inset-inline-start: calc(50% + 46px); }
  .mata.mengalir::before { animation: denyutMendatar .7s ease-in forwards; }
}
@keyframes alirMendatar { from { background-position: 0 0; } to { background-position: 12px 0; } }
@keyframes denyutMendatar { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--panjang, 80px)); } }
.fund-catatan { margin-top: 26px; text-align: center; }

/* ==========================================================
   TEKNIKAL — chart ilustrasi yang menggambar bertahap
   ========================================================== */
.tek-grid { display: grid; gap: clamp(22px, 3vw, 36px); grid-template-columns: minmax(0, 1fr); margin-top: clamp(26px, 4vw, 44px); align-items: start; }
@media (min-width: 1000px) { .tek-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.tek-chart { margin: 0; padding: 14px; overflow: hidden; background: rgba(9, 13, 12, .78); }
html[data-tema="terang"] .tek-chart { background: #0f1513; }
.tek-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 4px 12px; }
.tek-tf { padding: 4px 10px; border-radius: 8px; background: rgba(212, 178, 106, .14); color: #f1d08b; font-weight: 700; font-size: .8rem; }
.tek-ilustrasi { color: #a99f8d; font-size: .8rem; }
.tek-ulang { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(214, 170, 90, .3); background: rgba(255, 255, 255, .03); color: #f1d08b; font-size: .82rem; font-weight: 600; }
.tek-ulang svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tek-ulang:hover { border-color: #d4b26a; }
.tek-kanvas { position: relative; border-radius: 14px; overflow: hidden; background: #0a0f0e; }
#tekSvg { width: 100%; height: auto; display: block; direction: ltr; font-family: var(--sans); }
#tekSvg text { font-family: "Manrope", var(--sans); }
.tk-grid line { stroke: rgba(255, 255, 255, .05); }
.tk-lilin { opacity: 0; transform: scaleY(.2); transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2); }
.tk-lilin.tampil { opacity: 1; transform: none; }
.tk-lilin .badan-naik { fill: var(--s-bull); } .tk-lilin .badan-turun { fill: var(--s-bear); }
.tk-lilin line { stroke-width: 1.4; }
.tk-lilin .sumbu-naik { stroke: var(--s-bull); } .tk-lilin .sumbu-turun { stroke: var(--s-bear); }
html[data-tema="terang"] .tk-lilin .badan-naik { fill: #36c29d; } html[data-tema="terang"] .tk-lilin .badan-turun { fill: #ec6a72; }
html[data-tema="terang"] .tk-lilin .sumbu-naik { stroke: #36c29d; } html[data-tema="terang"] .tk-lilin .sumbu-turun { stroke: #ec6a72; }
.lapis { opacity: 0; transition: opacity .6s ease; }
.tek-svg-1 .lapis-1, .tek-svg-2 .lapis-1, .tek-svg-2 .lapis-2, .tek-svg-3 .lapis-1, .tek-svg-3 .lapis-2, .tek-svg-3 .lapis-3,
.tek-svg-4 .lapis-1, .tek-svg-4 .lapis-2, .tek-svg-4 .lapis-3, .tek-svg-4 .lapis-4 { opacity: 1; }
.fokus-1 .lapis.aktif:not(.lapis-1), .fokus-2 .lapis.aktif:not(.lapis-2), .fokus-3 .lapis.aktif:not(.lapis-3) { opacity: .3; }
.tk-tumbuh { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.3, .8, .2, 1); }
.tampil-lapis .tk-tumbuh, .lapis.aktif .tk-tumbuh { transform: scaleX(1); }
.tk-tarik { stroke-dasharray: var(--pj, 900); stroke-dashoffset: var(--pj, 900); transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.lapis.aktif .tk-tarik { stroke-dashoffset: 0; }
.tk-zona { fill: rgba(54, 194, 157, .14); stroke: rgba(54, 194, 157, .55); stroke-width: 1; }
.tk-fvg { fill: rgba(212, 178, 106, .16); stroke: rgba(241, 208, 139, .6); stroke-width: 1; stroke-dasharray: 5 4; }
.lapis-2.aktif .tk-fvg { animation: fvgDenyut 2.4s ease-in-out infinite; }
@keyframes fvgDenyut { 0%, 100% { fill: rgba(212, 178, 106, .12); } 50% { fill: rgba(212, 178, 106, .26); } }
.tk-likuid { stroke: #f1d08b; stroke-width: 1.4; stroke-dasharray: 3 5; fill: none; }
.tk-titik { fill: #f1d08b; }
.tk-sapu { fill: none; stroke: #fff3cf; stroke-width: 2; }
.lapis-3.aktif .tk-sapu-cincin { animation: sapuCincin 1.8s ease-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes sapuCincin { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.tk-masuk { fill: rgba(212, 178, 106, .2); stroke: #d4b26a; stroke-width: 1.4; }
.tk-sl { stroke: #ec6a72; stroke-width: 1.6; }
.tk-tp { stroke: #e2b866; stroke-width: 1.3; stroke-dasharray: 7 6; }
.tk-jalur-rev { fill: none; stroke: #f1d08b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tk-jalur-bo { fill: none; stroke: #8fe6c0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 6; }
.tk-panah-rev { fill: #f1d08b; } .tk-panah-bo { fill: #8fe6c0; }
.tk-tag rect { fill: #e2b866; } .tk-tag text { fill: #1d1406; font-size: 12.5px; font-weight: 800; }
.tk-tag.sl rect { fill: #ec6a72; } .tk-tag.sl text { fill: #fff; }
.tk-label { fill: #f3ede2; font-size: 13px; font-weight: 700; paint-order: stroke; stroke: rgba(10, 15, 14, .85); stroke-width: 4px; stroke-linejoin: round; }
.tk-label.emas { fill: #f1d08b; } .tk-label.hijau { fill: #8fe6c0; } .tk-label.redup { fill: #a99f8d; font-weight: 600; font-size: 12px; }
.tk-sekarang { stroke: rgba(255, 255, 255, .28); stroke-dasharray: 2 4; }
.tek-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: tl; }
.tek-langkah button { position: relative; width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; text-align: start; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--s-garis-2); background: transparent; color: inherit; overflow: hidden; transition: background .4s ease, border-color .4s ease; }
.tek-langkah button:hover { border-color: var(--s-garis); }
.tek-langkah button[aria-pressed="true"] { background: var(--s-kaca); border-color: var(--s-garis); box-shadow: var(--s-kilap), 0 20px 50px -30px rgba(0, 0, 0, .8); }
.tl-no { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--s-garis); color: var(--s-emas-teks); font-family: "Manrope", var(--sans); font-size: .95rem; font-weight: 700; transition: background .4s ease, color .4s ease; }
.tek-langkah button[aria-pressed="true"] .tl-no { background: var(--s-emas-grad); color: var(--s-di-emas); border-color: transparent; }
.tl-judul { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--gading); }
.tl-teks { color: var(--redup); font-size: .9rem; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s ease, opacity .5s ease; }
.tek-langkah button[aria-pressed="true"] .tl-teks { max-height: 12em; opacity: 1; }
.tl-maju { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--s-emas-grad); transform: scaleX(0); transform-origin: 0 50%; }
html[dir="rtl"] .tl-maju { transform-origin: 100% 50%; }
.tek-langkah button.jalan .tl-maju { animation: majuIsi var(--lama, 3.2s) linear forwards; }
@keyframes majuIsi { to { transform: scaleX(1); } }
.tek-penafian { margin-top: 22px; text-align: center; }
@media (max-width: 999px) { .tl-teks { max-height: none; opacity: 1; } .tek-langkah button:not([aria-pressed="true"]) .tl-teks { display: none; } }

/* ==========================================================
   Tokoh & avatar Sarah v2 di bagian lama
   ========================================================== */
.tokoh-bingkai { background: #0b0b0c; }
@media (min-width: 1000px) { .tokoh-bingkai { aspect-ratio: 550 / 600; } }
.tokoh-bingkai img { object-position: 42% 18%; }
@media (max-width: 999px) { .tokoh-bingkai img { object-position: 42% 14%; } }

/* ==========================================================
   Gerak dikurangi & perangkat lemah
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html.intro-main .intro { display: none !important; }
  .sh-orbit, .sh-satelit > i, .lajur, .intro-sinar { animation: none !important; }
  .sh-satelit > i { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); }
  .tk-lilin { opacity: 1; transform: none; }
  .mata-spark path { stroke-dashoffset: 0; }
  .tk-tarik { stroke-dashoffset: 0; }
  .tk-tumbuh { transform: none; }
  .ponsel-s121 { transform: none; }
}
html.hemat .sh-orbit, html.hemat .sh-satelit > i, html.hemat .lajur { animation: none; }
html.hemat .sh-satelit > i { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); }
html.tanpa-js .lapis, html.tanpa-js .tk-lilin { opacity: 1; transform: none; }

/* ritme bab baru: lebih rapat dari bab lama */
.bab-pasar, .bab-fund, .bab-tek { padding-block: clamp(72px, 8vw, 120px); }
.bab-pasar .judul-bab, .bab-fund .judul-bab, .bab-tek .judul-bab { max-width: 16ch; }
html:is([lang="de"], [lang="es"], [lang="fil"]) :is(.bab-pasar, .bab-fund, .bab-tek) .judul-bab { max-width: 20ch; }

/* ==========================================================
   Kulit aplikasi Sarah v2 (hitam-emas / krem-emas) untuk komponen lama:
   ponsel chat (#kemampuan) & Command Center (#cc). Dulu meniru UI hijau lama.
   ========================================================== */
.pc-ponsel { background: linear-gradient(150deg, #3a3833, #121212 40%, #26241f); box-shadow: 0 0 0 1px rgba(214, 170, 90, .34), 0 40px 90px -36px rgba(0, 0, 0, .9), 0 0 90px -30px rgba(212, 178, 106, .35); }
.pc-layar { background: var(--p-bg); color: var(--p-teks); }
.pc-status { background: var(--p-kepala); color: var(--p-teks); }
.pc-status-ikon svg { fill: currentColor; }
.pc-kepala { background: var(--p-kepala); color: var(--p-teks); box-shadow: none; border-bottom: 1px solid var(--p-garis); }
.pc-kembali { color: var(--emas); }
.pc-nama { font-family: var(--serif); }
.pc-hikon svg { fill: #d6aa5a; }
.pc-chat { background-color: var(--p-bg); background-image: none; }
.pc-tgl span { background: transparent; border: 1px solid var(--p-garis); color: var(--s-emas-teks); box-shadow: none; }
.pc-gelembung { box-shadow: none; }
.pc-saya .pc-gelembung { background: var(--p-me); }
.pc-dia .pc-gelembung { background: var(--p-her); box-shadow: inset 0 0 0 1px var(--p-garis); }
.pc-saya .pc-gelembung::before { background: radial-gradient(circle at bottom left, transparent 8px, var(--p-me) 0); }
.pc-dia .pc-gelembung::before { background: radial-gradient(circle at bottom right, transparent 8px, var(--p-her) 0); }
.pc-akar[dir="rtl"] .pc-saya .pc-gelembung::before { background: radial-gradient(circle at bottom right, transparent 8px, var(--p-me) 0); }
.pc-akar[dir="rtl"] .pc-dia .pc-gelembung::before { background: radial-gradient(circle at bottom left, transparent 8px, var(--p-her) 0); }
.pc-butir::before { color: var(--s-emas-teks); }
.pc-catatan { color: var(--p-sub); border-top-color: var(--p-garis); }
.pc-waktu { color: var(--p-sub); }
.pc-titik i { background: var(--s-emas-teks); }
.pc-putar { color: var(--s-emas-teks); }
.pc-gelombang i { background: rgba(214, 170, 90, .35); }
.pc-gelombang i.pc-diputar { background: #e2b866; }
.pc-kaki { background: var(--p-kepala); border-top: 1px solid var(--p-garis); }
.pc-kolom { background: var(--p-pil); color: var(--p-sub); box-shadow: none; border: 1px solid var(--p-garis); }
.pc-kolom svg { fill: var(--p-sub); }
.pc-isian.pc-terisi { color: var(--p-teks); }
.pc-kirim { background: var(--s-emas-grad); box-shadow: 0 6px 16px -6px rgba(212, 178, 106, .7); }
.pc-kirim svg { fill: var(--s-di-emas); }
.pc-garis-rumah { background: rgba(255, 255, 255, .35); }
html[data-tema="terang"] .pc-garis-rumah { background: rgba(0, 0, 0, .35); }

.cc-akar {
  --cc-go: #d6aa5a; --cc-go-2: #e2b866; --cc-hijau: #36c29d; --cc-hijau-t: #36c29d; --cc-merah: #ec6a72;
  --cc-bg: var(--p-bg); --cc-kartu: var(--p-her); --cc-garis: var(--p-garis); --cc-teks: var(--p-teks); --cc-redup: var(--p-sub);
  --cc-chip: transparent; --cc-wm: var(--s-emas-teks);
}
html[data-tema="terang"] .cc-akar { --cc-go: #a8792a; --cc-hijau: #11896a; --cc-hijau-t: #11896a; --cc-merah: #c2414c; }
.cc-bingkai { background: linear-gradient(150deg, #3a3833, #121212 40%, #26241f); }
.cc-kepala { background: var(--p-kepala); color: var(--p-teks); border-bottom: 1px solid var(--p-garis); }
.cc-judul { font-family: var(--serif); font-size: 16.5px; }
.cc-logo { background: var(--s-emas-grad); color: var(--s-di-emas); }
.cc-jembatan { background: color-mix(in srgb, var(--cc-hijau) 9%, transparent); border-bottom-color: var(--p-garis); color: var(--cc-hijau); }
.cc-pita { background: rgba(212, 178, 106, .1); border-bottom-color: var(--p-garis); color: var(--s-emas-teks); }
.cc-kanan .cc-gelembung { background: var(--p-me); }
.cc-titik3 i { background: var(--s-emas-teks); }
.cc-chip { border-color: var(--s-garis); color: var(--s-emas-teks); }
.cc-chip:hover:not(:disabled) { background: var(--s-emas-grad); color: var(--s-di-emas); border-color: transparent; }
.cc-chip.cc-abu { border-color: var(--p-garis); background: var(--p-pil); color: var(--p-sub); }
.cc-chip.cc-dipilih:disabled { background: var(--s-emas-grad); border-color: transparent; color: var(--s-di-emas); }
.cc-chip.cc-buy:hover:not(:disabled), .cc-chip.cc-buy.cc-dipilih:disabled { background: var(--cc-hijau); color: #06140f; }
.cc-chip.cc-sell:hover:not(:disabled), .cc-chip.cc-sell.cc-dipilih:disabled { background: var(--cc-merah); color: #fff; }
.cc-chip.cc-go { background: var(--s-emas-grad); color: var(--s-di-emas); }
.cc-chip.cc-go:hover:not(:disabled), .cc-chip.cc-go.cc-dipilih:disabled { background: linear-gradient(135deg, #f6dc9f, #d3a24a); color: var(--s-di-emas); }
.cc-chip.cc-batal { background: var(--p-pil); color: var(--p-sub); }
.cc-wm b { color: var(--s-emas-teks); }
.cc-ringkas { background: var(--p-pil); border-color: var(--p-garis); }
.cc-rb { border-bottom-color: var(--p-garis); }
.cc-trail { background: var(--p-pil); }
.cc-sw { background: rgba(255, 255, 255, .18); }
.cc-terbuka { border-color: var(--p-garis); }
.cc-tb-kepala { background: rgba(212, 178, 106, .1); color: var(--s-emas-teks); }
.cc-tb-badan { background: var(--p-her); }
.cc-grid { background: var(--p-garis); border-color: var(--p-garis); }
.cc-sel { background: var(--p-her); }
.cc-jaga { background: rgba(212, 178, 106, .08); color: var(--s-emas-teks); }
.cc-push-ikon { background: var(--s-emas-grad); color: var(--s-di-emas); }
.cc-bar { background: var(--p-kepala); border-top-color: var(--p-garis); }
.cc-mini { border-color: var(--s-garis); background: transparent; color: var(--s-emas-teks); }
.cc-mini:hover { background: var(--s-emas-grad); color: var(--s-di-emas); }
.cc-akar button:focus-visible { outline-color: #e2b866; }
.kom-cahaya { background: radial-gradient(circle, rgba(212, 178, 106, .2), rgba(14, 90, 64, .22) 42%, transparent 70%) !important; }

/* target sentuh tombol nav >= 44px (sebelumnya 36-40px) */
.tema-tombol { width: 44px; height: 44px; }
.bahasa-tombol { height: 44px; }
@media (max-width: 420px) { .tema-tombol { width: 44px; height: 44px; } .nav-aksi { gap: 6px; } }
.sh-lead, .sh-sub, .mata-teks, .mata-label, .tl-teks, .pasar-poin li, .pasar-kartu p, .kapsi { -webkit-hyphens: manual; hyphens: manual; }

/* ==========================================================
   LAB SKILL (dikembalikan utuh atas permintaan Prof) — kulit S121
   + "kebaca semuanya": tanpa ellipsis, tanpa line-clamp, tinggi ikut isi.
   ========================================================== */
.bab-lab { padding-block: clamp(72px, 8vw, 120px); }
.bab-lab .judul-bab { max-width: 20ch; }
.ls-akar { --ls-ubin-bg: var(--s-kaca); --ls-ubin-garis: var(--s-garis-2); }
.ls-kaca { border-radius: 24px; border-color: var(--s-garis); background: radial-gradient(120% 90% at 85% -10%, rgba(212, 178, 106, .14), transparent 55%), radial-gradient(90% 70% at 0% 110%, rgba(14, 90, 64, .22), transparent 60%), linear-gradient(180deg, #0c1513 0%, #090d0c 55%, #070908 100%); }
.ls-ubin { border-radius: 16px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* kepala chart: status boleh turun baris, tidak dipotong */
.ls-kepala { flex-wrap: wrap; row-gap: 4px; }
.ls-status, .ls-status-teks { white-space: normal; overflow: visible; text-overflow: clip; }
/* keterangan di bawah chart: tinggi ikut isi (min-height menahan lompatan) */
.ls-kapsi { height: auto; min-height: calc(14px + 1.9rem + 3.1em); overflow: visible; }
.ls-kapsi-nama { white-space: normal; height: auto; min-height: 1.9rem; overflow: visible; text-overflow: clip; }
.ls-kapsi-ket { display: block; -webkit-line-clamp: unset; line-clamp: none; height: auto; min-height: 3.1em; overflow: visible; }
@container (max-width: 519px) { .ls-kapsi { height: auto; min-height: calc(10px + 1.6rem + 3.1em); } .ls-kapsi-nama { height: auto; min-height: 1.6rem; } }
/* ubin kecakapan: nama utuh, tinggi ikut isi */
.ls-ubin { height: auto; min-height: 58px; }
.ls-ubin-nama { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
@container (min-width: 880px) {
  .ls-ubin-daftar { grid-template-rows: none; grid-auto-rows: minmax(44px, auto); align-content: start; }
  .ls-ubin { min-height: 44px; }
}

/* ==========================================================
   Revisi Prof 2: bilah bawah SEMUA ponsel tiruan = "+" | kotak ketik | kirim emas.
   Mikrofon/pesan suara, gambar, stiker ada di dalam menu "+".
   ========================================================== */
.ps-layar { position: relative; }
.ps-ava-sa, .la-baris .ps-ava-sa { background: #0b0b0d; box-shadow: inset 0 0 0 1px rgba(214, 170, 90, .35); }
.ps-ava-sa img { width: 72%; height: 72%; object-fit: contain; display: block; }
button.ps-plus, .pc-plus {
  flex: 0 0 auto; width: 48px; height: 48px; min-width: 48px; padding: 0; margin-inline: -7px -3px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: #e2b866; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .25s ease, transform .25s ease;
}
button.ps-plus svg, .pc-plus svg { width: 26px; height: 26px; fill: currentColor; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
button.ps-plus:hover, .pc-plus:hover { background: rgba(212, 178, 106, .12); }
button.ps-plus[aria-expanded="true"] svg, .pc-plus[aria-expanded="true"] svg { transform: rotate(45deg); }
button.ps-plus:focus-visible, .pc-plus:focus-visible { outline: 2px solid #e2b866; outline-offset: -2px; }
html[data-tema="terang"] button.ps-plus, html[data-tema="terang"] .pc-plus { color: #a8792a; }
span.ps-plus { display: grid; place-items: center; color: #e2b866; }
span.ps-plus svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.la-utama span.ps-plus { font-size: 2.6cqw; }
.ps-tulis { gap: 2cqw; }
.pc-kaki { gap: .35em; align-items: center; }
.pc-kolom { min-height: 2.6em; }
.pc-kirim { width: 2.6em; height: 2.6em; }
.pc-kirim-rekam { animation: kirimDenyut 1.2s ease-in-out infinite; }
@keyframes kirimDenyut { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 184, 102, .55); } 50% { box-shadow: 0 0 0 6px rgba(226, 184, 102, 0); } }
.plus-menu {
  position: absolute; z-index: 6; inset-inline-start: 8px; bottom: 64px; min-width: min(220px, calc(100% - 16px)); max-width: calc(100% - 16px);
  display: grid; gap: 2px; padding: 6px; border-radius: 18px;
  background: color-mix(in srgb, var(--p-kepala) 94%, transparent); border: 1px solid var(--s-garis);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05);
  font-family: var(--sans); font-size: 14px; line-height: 1.25; color: var(--p-teks); text-align: start;
  transform-origin: 0 100%; animation: plusMuncul .24s cubic-bezier(.2, .9, .3, 1.2) both;
}
html[dir="rtl"] .plus-menu, [dir="rtl"] .plus-menu { transform-origin: 100% 100%; }
.plus-menu[hidden] { display: none; }
@keyframes plusMuncul { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } }
.plus-butir { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 14px 6px 6px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
html[dir="rtl"] .plus-butir { padding: 6px 6px 6px 14px; }
.plus-butir:hover, .plus-butir:focus-visible { background: rgba(212, 178, 106, .13); outline: none; }
.plus-butir:focus-visible { box-shadow: inset 0 0 0 1.5px #e2b866; }
.plus-ikon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--s-emas-grad); box-shadow: 0 6px 14px -6px rgba(212, 178, 106, .8); }
.plus-ikon svg { width: 18px; height: 18px; fill: var(--s-di-emas); }
.plus-label { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .plus-menu { animation: none; } .pc-kirim-rekam { animation: none; } }