/*! rebana-tour 1.0.0 — styles. Paper register of the Rebana marketing identity
 *  (reference/DESIGN.md). Tokens are scoped to `.rt` so the file can sit inside
 *  an Angular app without touching the app's own --rp-* tokens.
 *  Dark: the site's teal band, not an inversion (same as the brochure rule). */

.rt {
  --rt-ink: #0b2f34;      --rt-ink-deep: #07252a;  --rt-ink-soft: #4a6a6e;
  --rt-teal-900: #0e3d42; --rt-teal-800: #14555e;  --rt-teal-600: #1f7d7e;
  --rt-teal-500: #2b9d94; --rt-teal-300: #6cc5bd;  --rt-teal-150: #c4e4df; --rt-teal-100: #ddefec;
  --rt-paper: #f7f4ec;    --rt-paper-hi: #fdfcf8;
  --rt-line: #e0d9c8;     --rt-line-soft: #eae4d6;
  --rt-ochre: #c9862b;    --rt-ochre-ink: #8a5a14;
  --rt-on-dark: #f3efe4;  --rt-on-dark-soft: #a8c8c2;
  --rt-shadow-frame: 0 24px 60px -24px rgba(15,20,20,.26), 0 4px 16px rgba(15,20,20,.06);
  --rt-shadow-btn: 0 3px 14px rgba(15,20,20,.22);
  --rt-shadow-tip: 0 18px 44px -18px rgba(7,37,42,.45), 0 4px 14px rgba(7,37,42,.12);
  --rt-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --rt-sans: "Instrument Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rt-fade: 450ms; --rt-zoom: 700ms;
  font-family: var(--rt-sans); color: var(--rt-ink); line-height: 1.55; font-size: 1rem;
  -webkit-font-smoothing: antialiased; box-sizing: border-box;
}
.rt *, .rt *::before, .rt *::after { box-sizing: inherit; }
.rt img { max-width: 100%; display: block; }
:where(.rt) button { font: inherit; color: inherit; }
.rt :is(a, button):focus-visible { outline: 3px solid var(--rt-ochre); outline-offset: 3px; border-radius: 4px; }
.rt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) { .rt { --rt-fade: 0ms; --rt-zoom: 0ms; } }

/* Dark — teal band. Marketing surfaces (hub, inline story) follow the OS scheme unless the
   page pins data-theme="light". In-app surfaces (guide, modal story) follow the app only:
   the design kit's html.app-dark or data-theme="dark" — never the OS, or a light app would
   get a dark tooltip. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.rt-hub, .rt-story.rt-inline) { --rt-paper: #07252a; --rt-paper-hi: #0e3d42; --rt-ink: #f2efe6; --rt-ink-deep: #fdfcf8; --rt-ink-soft: #a9c6c4; --rt-line: rgba(247,244,236,.16); --rt-line-soft: rgba(247,244,236,.1); --rt-teal-800: #6cc5bd; --rt-teal-600: #8fd4cd; --rt-ochre: #e0a44a; --rt-ochre-ink: #e0a44a; --rt-teal-100: rgba(108,197,189,.14); } }
:root[data-theme="dark"] .rt, html.app-dark .rt { --rt-paper: #07252a; --rt-paper-hi: #0e3d42; --rt-ink: #f2efe6; --rt-ink-deep: #fdfcf8; --rt-ink-soft: #a9c6c4; --rt-line: rgba(247,244,236,.16); --rt-line-soft: rgba(247,244,236,.1); --rt-teal-800: #6cc5bd; --rt-teal-600: #8fd4cd; --rt-ochre: #e0a44a; --rt-ochre-ink: #e0a44a; --rt-teal-100: rgba(108,197,189,.14); }

/* ---------- shared type ---------- */
.rt-marker { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rt-teal-800); }
.rt-bubble-title, .rt-cover-title, .rt-end-title, .rt-hub-title {
  font-family: var(--rt-serif); font-weight: 400; letter-spacing: -0.01em; color: var(--rt-ink-deep); margin: 0; text-wrap: balance;
}
.rt-bubble-title { font-size: 1.25rem; line-height: 1.15; }
.rt-bubble-body { margin: 6px 0 0; font-size: .95rem; color: var(--rt-ink-soft); line-height: 1.5; }
.rt-count { white-space: nowrap; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rt-ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- buttons: pills, the one interactive silhouette ---------- */
.rt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1.5px solid transparent; padding: 8px 18px; font-weight: 600; font-size: .9rem;
  cursor: pointer; text-decoration: none; transition: background .18s, transform .18s, box-shadow .18s, border-color .18s;
  background: transparent;
}
.rt-btn.rt-lg { padding: 13px 26px; font-size: .98rem; }
/* The forward action (Mula / Seterusnya / Selesai / Mohon demo) is always a cream pill with
   fixed ink — scheme-fixed on purpose, so it reads the same on paper, in the teal-band dark
   theme and over the ink scrim (brochure rule: fixed background needs fixed ink). */
.rt-primary { background: #f7f4ec; color: #07252a; border-color: var(--rt-teal-500); box-shadow: var(--rt-shadow-btn); }
.rt-primary:hover { background: #ffffff; border-color: var(--rt-teal-800); transform: translateY(-1px); }
.rt-ghost { border-color: var(--rt-teal-500); color: var(--rt-teal-800); }
.rt-ghost:hover { background: var(--rt-teal-100); }
.rt-ghost:disabled { opacity: .4; cursor: default; }
.rt-ghost:disabled:hover { background: transparent; }
.rt-link { color: var(--rt-ink-soft); padding-inline: 10px; }
.rt-link:hover { color: var(--rt-teal-800); }
.rt-icon {
  width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid var(--rt-line); background: var(--rt-paper-hi);
  cursor: pointer; display: grid; place-items: center; position: relative;
}
.rt-icon:hover { border-color: var(--rt-teal-500); }
.rt-icon::before { content: ""; width: 10px; height: 12px; border-left: 3px solid var(--rt-teal-800); border-right: 3px solid var(--rt-teal-800); }
.rt-icon.rt-paused::before { width: 0; height: 0; border: 0; border-left: 11px solid var(--rt-teal-800); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

/* ============================================================================
 * STORY
 * ========================================================================== */
.rt-story { display: block; width: 100%; }

/* browser-chrome evidence frame */
.rt-chrome {
  background: var(--rt-paper-hi); border: 1px solid var(--rt-line); border-radius: 16px;
  box-shadow: var(--rt-shadow-frame); overflow: hidden;
}
.rt-chrome-bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--rt-line-soft); }
.rt-chrome-dots { display: flex; gap: 7px; }
.rt-chrome-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.rt-chrome-dots i:nth-child(1) { background: var(--rt-ochre); }
.rt-chrome-dots i:nth-child(2) { background: var(--rt-teal-300); }
.rt-chrome-dots i:nth-child(3) { background: var(--rt-teal-500); }
.rt-chrome-url {
  flex: 1; max-width: 440px; margin: 0 auto; background: var(--rt-paper); border: 1px solid var(--rt-line-soft);
  border-radius: 999px; font-size: .78rem; color: var(--rt-ink-soft); text-align: center; padding: 4px 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rt-chrome-url b { color: var(--rt-teal-800); font-weight: 600; }
.rt-chrome-sample { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-ochre-ink); background: #f6e8cf; border-radius: 999px; padding: 3px 10px; }
html.app-dark .rt-chrome-sample, :root[data-theme="dark"] .rt-chrome-sample { background: rgba(224,164,74,.16); }

.rt-stage-wrap { position: relative; }
.rt-stage { position: relative; background: #fff; overflow: hidden; outline-offset: -3px; }
.rt-layer { position: absolute; inset: 0; transition: transform var(--rt-zoom) cubic-bezier(.16,1,.3,1); will-change: transform; }
.rt-shot { position: absolute; inset: 0; opacity: 0; transition: opacity var(--rt-fade) ease; }
.rt-shot.rt-on { opacity: 1; }
/* the frame itself is never cropped; a blurred blow-up of the same frame fills whatever it leaves */
.rt-shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.rt-shot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: blur(22px) saturate(.9); transform: scale(1.12); opacity: .75; }

/* the spot: ochre ring, one per step — percussion, not paint */
.rt-spot { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.rt-spot i { position: absolute; inset: 0; border: 2px solid var(--rt-ochre); border-radius: 10px; box-shadow: 0 0 0 9999px rgba(7,37,42,.28); }
.rt-spot i + i { box-shadow: none; opacity: 0; }
.rt-spot.rt-spot-pulse i + i { animation: rt-pulse 1.8s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes rt-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }

/* caption bubble, anchored near the spot; docks under the stage when narrow */
.rt-bubble {
  position: absolute; z-index: 3; width: clamp(280px, 44%, 360px); background: var(--rt-paper-hi); color: var(--rt-ink);
  border: 1px solid var(--rt-line); border-radius: 12px; padding: 14px 16px 12px; box-shadow: var(--rt-shadow-tip);
  transform: translate(-50%, 0); transition: left var(--rt-zoom), top var(--rt-zoom), opacity var(--rt-fade);
}
.rt-bubble.rt-above { transform: translate(-50%, -100%); }
.rt-bubble.rt-left { transform: translate(-18%, 0); }
.rt-bubble.rt-left.rt-above { transform: translate(-18%, -100%); }
.rt-bubble.rt-right { transform: translate(-82%, 0); }
.rt-bubble.rt-right.rt-above { transform: translate(-82%, -100%); }
.rt-bubble.rt-docked, .rt-story:not(.rt-live) .rt-bubble, .rt-story.rt-ended .rt-bubble { display: none; }
.rt-story:not(.rt-live) .rt-spot { display: none; }
.rt-bubble-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-top: 12px; }
.rt-bubble-actions { display: flex; gap: 6px; }
.rt-caption { display: none; margin: 14px 4px 0; font-size: .95rem; color: var(--rt-ink-soft); }
.rt-caption b { color: var(--rt-ink-deep); font-weight: 600; }
@media (max-width: 679px) {
  .rt-story .rt-caption { display: block; }
}

/* cover + end card: paper objects over the stage */
.rt-cover, .rt-end {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; padding: 24px;
  background: rgba(7,37,42,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.rt-cover[hidden], .rt-end[hidden] { display: none; }
.rt-cover-inner, .rt-end-inner { max-width: 520px; display: grid; gap: 12px; justify-items: center; }
.rt-cover .rt-marker { color: var(--rt-teal-300); }
.rt-cover-title, .rt-end-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.08; color: var(--rt-on-dark); }
.rt-cover-lede, .rt-end-body { margin: 0; color: var(--rt-on-dark-soft); font-size: 1rem; max-width: 46ch; }
.rt-cover-meta { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-teal-300); font-variant-numeric: tabular-nums; }
.rt-cover-meta i, .rt-menu-meta i { width: 5px; height: 5px; border-radius: 50%; background: var(--rt-ochre); display: inline-block; }
/* scheme-fixed: the scrim is always ink, so the pill is always paper-on-ink (brochure rule) */
.rt-cover .rt-primary, .rt-end .rt-primary { border-color: transparent; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
/* the cover's Mula beckons: a teal ring pulses out of it until it is hovered or focused */
.rt-cover .rt-primary { animation: rt-beckon 1.8s ease-out infinite; }
.rt-cover .rt-primary:hover, .rt-cover .rt-primary:focus-visible { animation: none; }
@keyframes rt-beckon {
  0%   { box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(108,197,189,.6); }
  70%  { box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 16px rgba(108,197,189,0); }
  100% { box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(108,197,189,0); }
}
@media (prefers-reduced-motion: reduce) { .rt-cover .rt-primary { animation: none; } }
.rt-end .rt-ghost { border-color: var(--rt-teal-300); color: var(--rt-on-dark); }
.rt-end .rt-ghost:hover { background: rgba(108,197,189,.14); }
.rt-end .rt-link { color: var(--rt-on-dark-soft); }
.rt-end-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

/* bar: segmented progress (time, not just count) + chapters + controls */
.rt-bar { margin-top: 14px; }
.rt-progress { display: flex; gap: 5px; height: 4px; }
.rt-seg { flex: 1; background: var(--rt-line); border-radius: 999px; overflow: hidden; position: relative; }
.rt-seg::after { content: ""; position: absolute; inset: 0; background: var(--rt-teal-500); transform: scaleX(0); transform-origin: left; }
.rt-seg.rt-done::after { transform: scaleX(1); }
.rt-seg.rt-now::after { background: var(--rt-ochre); }
.rt-seg.rt-run::after { animation: rt-fill var(--rt-dwell, 6000ms) linear forwards; }
@keyframes rt-fill { to { transform: scaleX(1); } }
.rt-bar-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rt-grow { flex: 1; }
.rt-chapters { display: flex; gap: 6px; flex-wrap: wrap; }
.rt-pill {
  border-radius: 999px; border: 1.5px solid var(--rt-line); background: var(--rt-paper-hi); color: var(--rt-ink);
  padding: 6px 14px; font-size: .82rem; font-weight: 500; cursor: pointer; transition: border-color .18s, background .18s;
}
.rt-pill:hover { border-color: var(--rt-teal-500); }
.rt-pill[aria-pressed="true"] { background: var(--rt-teal-800); border-color: var(--rt-teal-800); color: #fff; }
html.app-dark .rt-pill[aria-pressed="true"], :root[data-theme="dark"] .rt-pill[aria-pressed="true"] { color: #07252a; }
@media (max-width: 679px) {
  .rt-chapters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
  .rt-chapters::-webkit-scrollbar { display: none; }
  .rt-bar-row { flex-wrap: wrap; }
}

/* modal host (in-app "Lihat cerita") */
.rt-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; }
.rt-modal-scrim { position: absolute; inset: 0; background: rgba(7,37,42,.62); backdrop-filter: blur(2px); }
.rt-modal-box { position: relative; width: min(1120px, 100%); max-height: 100%; overflow: auto; }
.rt-modal .rt-story { background: var(--rt-paper); padding: 18px; border-radius: 20px; }

/* ============================================================================
 * HUB — product title, story menu left, player right
 * ========================================================================== */
.rt-hub { display: block; width: 100%; background: var(--rt-paper); border-radius: 20px; padding: clamp(14px, 2vw, 24px); }
.rt-hub-head { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--rt-line); margin-bottom: 22px; }
.rt-hub-logo { width: 48px; height: 48px; object-fit: contain; }
.rt-hub-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.08; }
.rt-hub-lede { margin: 6px 0 0; color: var(--rt-ink-soft); max-width: 58ch; }
.rt-hub-body { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 24px; align-items: stretch; }
/* the menu is as tall as the tour screen beside it, and scrolls inside that height */
.rt-menu-col { position: relative; min-height: 0; }
.rt-menu { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rt-line) transparent; padding-right: 6px; display: flex; flex-direction: column; }
.rt-menu::-webkit-scrollbar { width: 6px; }
.rt-menu::-webkit-scrollbar-thumb { background: var(--rt-line); border-radius: 999px; }
.rt-menu-head { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-ochre-ink); padding: 14px 12px 6px; }
.rt-menu-head + .rt-menu-item { border-top: 0; }
.rt-menu-head:first-child { padding-top: 0; }
.rt-menu-item {
  display: grid; gap: 3px; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--rt-line-soft);
  padding: 14px 12px; cursor: pointer; border-radius: 10px; transition: background .18s;
}
.rt-menu-item:last-child { border-bottom: 1px solid var(--rt-line-soft); }
.rt-menu-item:hover { background: var(--rt-paper-hi); }
.rt-menu-item[aria-pressed="true"] { background: var(--rt-paper-hi); box-shadow: inset 3px 0 0 var(--rt-ochre); }
.rt-menu-title { font-family: var(--rt-serif); font-size: 1.2rem; line-height: 1.15; color: var(--rt-ink-deep); }
.rt-menu-item[aria-pressed="true"] .rt-menu-title { color: var(--rt-teal-800); }
.rt-menu-lede { font-size: .88rem; color: var(--rt-ink-soft); }
.rt-menu-meta { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-ink-soft); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rt-menu-seen { color: var(--rt-teal-600); font-weight: 700; margin-left: 4px; }
.rt-menu-seen[hidden] { display: none; }
.rt-player { min-width: 0; }
@media (max-width: 819px) {
  .rt-hub-body { grid-template-columns: 1fr; gap: 18px; }
  .rt-menu { position: static; inset: auto; overflow-y: visible; padding-right: 0; flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 4px; }
  .rt-menu::-webkit-scrollbar { display: none; }
  .rt-menu-head { display: none; }
  .rt-menu-item, .rt-menu-item:last-child { border: 1.5px solid var(--rt-line); border-radius: 14px; min-width: 220px; padding: 12px 14px; }
  .rt-menu-item[aria-pressed="true"] { border-color: var(--rt-teal-800); box-shadow: none; }
  .rt-menu-lede { display: none; }
}

/* ============================================================================
 * GUIDE — spotlight over the live UI (or inside a frame: .rt-within)
 * ========================================================================== */
.rt-guide { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
.rt-guide.rt-within { position: absolute; z-index: 5; }
.rt-guide-shell { position: relative; overflow: hidden; background: #fff; }
.rt-guide-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.rt-guide-player .rt-caption { display: block; }
.rt-guide.rt-within .rt-tip { width: min(320px, 60%); }
.rt-guide[hidden] { display: none; }
.rt-mask { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-mask-path { fill: rgba(7,37,42,.55); pointer-events: auto; transition: d var(--rt-zoom) ease; }
.rt-guide.rt-ending .rt-mask-path { fill: rgba(7,37,42,.72); }
.rt-ring { position: absolute; border: 2px solid var(--rt-ochre); box-shadow: 0 0 0 4px rgba(201,134,43,.18); pointer-events: none; transition: left var(--rt-zoom), top var(--rt-zoom), width var(--rt-zoom), height var(--rt-zoom); }
.rt-tip {
  position: absolute; left: 0; top: 0; width: min(360px, calc(100vw - 24px)); pointer-events: auto;
  background: var(--rt-paper-hi); color: var(--rt-ink); border: 1px solid var(--rt-line); border-radius: 12px;
  padding: 16px 18px 12px; box-shadow: var(--rt-shadow-tip); transition: transform var(--rt-zoom) cubic-bezier(.16,1,.3,1);
  outline: none;
}
.rt-tip-arrow { position: absolute; width: 14px; height: 14px; background: var(--rt-paper-hi); border: 1px solid var(--rt-line); transform: rotate(45deg); }
.rt-tip[data-place="bottom"] .rt-tip-arrow { top: -8px; left: calc(var(--rt-ax, 50%) - 7px); border-right: 0; border-bottom: 0; }
.rt-tip[data-place="top"] .rt-tip-arrow { bottom: -8px; left: calc(var(--rt-ax, 50%) - 7px); border-left: 0; border-top: 0; }
.rt-tip[data-place="right"] .rt-tip-arrow { left: -8px; top: calc(var(--rt-ay, 50%) - 7px); border-right: 0; border-top: 0; }
.rt-tip[data-place="left"] .rt-tip-arrow { right: -8px; top: calc(var(--rt-ay, 50%) - 7px); border-left: 0; border-bottom: 0; }
.rt-tip[data-place="center"] .rt-tip-arrow { display: none; }
.rt-tip[data-place="center"] { text-align: center; }
.rt-tip[data-place="center"] .rt-bubble-foot { justify-content: center; }
.rt-hint { margin: 10px 0 0; font-size: .78rem; color: var(--rt-ochre-ink); font-style: italic; font-family: var(--rt-serif); font-size: .95rem; }
.rt-hint[hidden] { display: none; }
.rt-tip-skip { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rt-line-soft); display: flex; justify-content: flex-end; }
.rt-tip-skip [hidden], .rt-tip [hidden] { display: none; }