/* =============================================================
   PAPAN KURS — SIGNAGE STYLE
   Enterprise banking look · Glassmorphism · Landscape & Portrait
   ============================================================= */

:root{
  --accent:#c9a227;              /* emas (di-override dari setting) */
  --accent-2:#e8cf7a;
  --bg-0:#070b16;
  --bg-1:#0d1426;
  --bg-2:#131c33;
  --ink:#eef2ff;
  --ink-dim:#9aa6c4;
  --up:#37e0a6;                  /* naik / jual */
  --down:#ff6b7d;                /* turun / beli */
  --glass:rgba(255,255,255,.055);
  --glass-brd:rgba(255,255,255,.10);
  --radius:22px;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --gap: clamp(10px, 1.4vw, 22px);
  --font: "Sora", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

body.theme-light{
  --bg-0:#eef1f8; --bg-1:#ffffff; --bg-2:#f3f6ff;
  --ink:#141a2e; --ink-dim:#5b6580;
  --glass:rgba(20,26,46,.04); --glass-brd:rgba(20,26,46,.10);
  --shadow:0 18px 44px rgba(30,40,80,.15);
}
body.theme-royal{ --bg-0:#0a0f2c; --bg-1:#0e1747; --bg-2:#122060; }

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%; width:100%; overflow:hidden}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  letter-spacing:.2px;
}

/* ---- Latar dekoratif ---- */
.bg-aurora{
  position:fixed; inset:-20%; z-index:0; filter:blur(70px); opacity:.55;
  background:
    radial-gradient(40% 40% at 18% 20%, color-mix(in srgb,var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(38% 38% at 82% 15%, #3a63ff55, transparent 70%),
    radial-gradient(45% 45% at 75% 85%, #12d1a955, transparent 70%),
    radial-gradient(40% 40% at 25% 90%, #8a2be255, transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{ from{transform:translate3d(-2%, -1%,0) scale(1)} to{transform:translate3d(3%,2%,0) scale(1.08)} }
.bg-grid{
  position:fixed; inset:0; z-index:0; opacity:.05;
  background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(circle at 50% 40%,#000 40%,transparent 85%);
}

.glass{
  background:linear-gradient(160deg, var(--glass), rgba(255,255,255,.02));
  border:1px solid var(--glass-brd);
  border-radius:var(--radius);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- Grid layout ---- */
.signage{
  position:relative; z-index:1;
  height:100vh; width:100vw;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:var(--gap);
  padding:var(--gap);
}

/* ============ HEADER ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(10px,1.4vh,20px) clamp(16px,2vw,30px);
}
.brand{display:flex; align-items:center; gap:clamp(12px,1.4vw,20px); min-width:0}
.brand-logo{
  flex:none;
  width:clamp(48px,4.2vw,78px); height:clamp(48px,4.2vw,78px);
  display:grid; place-items:center; border-radius:16px;
  font-size:clamp(24px,2.4vw,40px); font-weight:800; color:#1a1400;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
  box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 40%,transparent), inset 0 2px 4px #fff8;
  overflow:hidden;
}
.brand-logo img{width:100%; height:100%; object-fit:contain; background:#fff}
.brand-text{min-width:0}
.brand-text h1{font-size:clamp(20px,2.3vw,42px); font-weight:800; line-height:1.05; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-text p{font-size:clamp(11px,1vw,17px); color:var(--ink-dim); font-weight:400; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Logo kanan (Danantara dll) — kotak transparan, gambar contain */
.brand-logo-2{
  flex:none; height:clamp(46px,4vw,72px); max-width:min(30vw,320px);
  display:flex; align-items:center; padding:6px 4px;
}
.brand-logo-2 img{height:100%; width:auto; max-width:100%; object-fit:contain; display:block}

/* ============ CONTENT ============ */
.content{ display:grid; gap:var(--gap); min-height:0; grid-template-columns:1.45fr 1fr; }
.panel{padding:clamp(12px,1.5vw,24px); min-height:0; display:flex; flex-direction:column; overflow:hidden}
.panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:clamp(8px,1vh,16px)}
.panel-head h2{font-size:clamp(16px,1.7vw,30px); font-weight:700; white-space:nowrap}
.panel-head h2::before{content:""; display:inline-block; width:10px; height:10px; margin-right:10px; border-radius:3px; background:linear-gradient(145deg,var(--accent-2),var(--accent)); transform:translateY(-2px)}
.head-right{display:flex; align-items:center; gap:12px}
.panel-sub{font-size:clamp(10px,.9vw,14px); color:var(--ink-dim); font-weight:500; white-space:nowrap}

/* ---- Pager dots ---- */
.pager-dots{display:inline-flex; gap:6px}
.pager-dots i{width:8px; height:8px; border-radius:50%; background:var(--glass-brd); transition:.3s; display:inline-block}
.pager-dots i.on{background:var(--accent); box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent); transform:scale(1.15)}

/* ---- Pager fade ---- */
.pager{position:relative}
.pager.fading{opacity:0; transition:opacity .35s ease}
.pager{transition:opacity .35s ease}

/* ---- KURS ---- */
.kurs-table-head{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:10px;
  padding:6px clamp(10px,1.1vw,18px); color:var(--ink-dim);
  font-size:clamp(10px,.85vw,13px); font-weight:600; letter-spacing:.6px; text-transform:uppercase;
}
.col-num{text-align:right}
.kurs-list{display:flex; flex-direction:column; gap:clamp(6px,.8vh,12px); overflow:hidden; flex:1; justify-content:space-evenly}
.kurs-row{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:10px; align-items:center;
  padding:clamp(8px,1vh,16px) clamp(10px,1.1vw,18px);
  border-radius:16px; border:1px solid transparent;
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  transition:background .4s, border-color .4s;
}
.kurs-cur{display:flex; align-items:center; gap:clamp(10px,1.1vw,16px); min-width:0}
.cur-meta{flex:1 1 auto}
/* Sparkline tren */
.spark{flex:none; width:clamp(64px,6vw,110px); height:clamp(20px,2.2vw,30px); opacity:.95}
.spark-empty{display:inline-block}
/* Panah tren naik/turun */
.tr{font-style:normal; font-size:.62em; margin-left:4px; vertical-align:middle}
.tr.up{color:var(--up)}
.tr.down{color:var(--down)}
.tr.flat{color:var(--ink-dim); font-size:.5em}
.flag{
  flex:none; width:clamp(34px,3.4vw,54px); height:clamp(24px,2.4vw,38px);
  border-radius:6px; overflow:hidden; background:var(--bg-2);
  box-shadow:0 3px 8px #0006, inset 0 0 0 1px rgba(255,255,255,.12);
}
.flag img{width:100%; height:100%; object-fit:cover; display:block}
.flag.txt{display:grid; place-items:center; font-weight:800; font-size:clamp(11px,1vw,15px); color:var(--ink-dim); letter-spacing:1px}
.cur-meta{min-width:0}
.cur-code{font-weight:800; font-size:clamp(15px,1.5vw,26px); letter-spacing:.5px}
.cur-code small{font-size:.6em; color:var(--accent-2); font-weight:600; margin-left:5px}
.cur-name{font-size:clamp(10px,.9vw,15px); color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rate{ font-family:var(--mono); text-align:right; font-weight:700; font-size:clamp(15px,1.55vw,28px); font-variant-numeric:tabular-nums; }
.rate.beli{color:var(--down)}
.rate.jual{color:var(--up)}
.rate.flash{animation:flash .9s ease}
@keyframes flash{0%{background:color-mix(in srgb,var(--accent) 30%,transparent); border-radius:8px}100%{background:transparent}}

/* ---- SIDECOL ---- */
.sidecol{display:grid; grid-template-rows:1fr auto; gap:var(--gap); min-height:0}
.panel-media{padding:0; overflow:hidden; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; background:#05070d}
.media-stage{width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden}
/* PROPORSIONAL (default): jaga rasio 16:9, letterbox halus */
.media-stage.fit-contain .media-frame{ width:100%; height:auto; aspect-ratio:16/9; max-height:100%; }
.media-stage.fit-contain .media-frame video{ object-fit:contain }
/* PENUH: isi seluruh panel (mungkin terpotong) */
.media-stage.fit-cover .media-frame{ width:100%; height:100% }
.media-stage.fit-cover .media-frame video{ object-fit:cover }
.media-frame{position:relative; background:#000; border-radius:var(--radius); overflow:hidden}
.media-frame iframe,.media-frame video{position:absolute; inset:0; width:100%; height:100%; border:0}
.media-empty{display:grid; place-items:center; width:100%; height:100%; color:var(--ink-dim); font-size:14px; gap:8px}
.sound-cta{
  position:absolute; right:12px; bottom:12px; z-index:5;
  padding:8px 14px; border-radius:999px; border:1px solid var(--glass-brd); cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-family:var(--font); font-size:13px; font-weight:600;
  backdrop-filter:blur(6px);
}

/* ---- SUKU BUNGA ---- */
.panel-bunga{max-height:42%}
.bunga-wrap{display:flex; flex-direction:column; gap:clamp(6px,.8vh,12px); overflow:hidden; flex:1}
.bunga-group-title{font-size:clamp(11px,.95vw,15px); font-weight:700; color:var(--accent-2); text-transform:uppercase; letter-spacing:1px; margin-top:4px}
.bunga-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:clamp(6px,.8vh,12px) clamp(10px,1vw,16px); border-radius:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
.bunga-info{min-width:0}
.bunga-produk{font-weight:600; font-size:clamp(12px,1.05vw,18px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bunga-tenor{font-size:clamp(10px,.85vw,13px); color:var(--ink-dim)}
.bunga-rate{font-family:var(--mono); font-weight:800; font-size:clamp(15px,1.5vw,26px); color:var(--accent-2); white-space:nowrap}

/* ============ RUNNING TEXT + JAM (sudut bawah) ============ */
.ticker{display:flex; align-items:stretch; gap:0; padding:0; overflow:hidden}
.ticker-tag{
  flex:none; display:flex; align-items:center;
  padding:0 clamp(14px,1.4vw,24px); font-weight:800; letter-spacing:2px;
  font-size:clamp(11px,1vw,16px); color:#1a1400;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
}
.ticker-viewport{flex:1; overflow:hidden; white-space:nowrap; display:flex; align-items:center; min-width:0}
.ticker-track{display:inline-block; padding-left:100%; font-size:clamp(14px,1.3vw,22px); font-weight:500; will-change:transform; animation:ticker linear infinite;}
@keyframes ticker{from{transform:translate3d(0,0,0)} to{transform:translate3d(-100%,0,0)}}

/* Jam + LIVE kompak di sudut kanan bawah (bagian dari bar bawah) */
.ticker-clock{
  flex:none; display:flex; align-items:center; gap:clamp(8px,1vw,16px);
  padding:0 clamp(12px,1.4vw,22px); border-left:1px solid var(--glass-brd);
  background:rgba(0,0,0,.15);
}
.mini-live{display:inline-flex; align-items:center; gap:6px; font-size:clamp(10px,.85vw,13px); font-weight:700; letter-spacing:1px; color:var(--up)}
.mini-live .dot{width:8px; height:8px; border-radius:50%; background:currentColor; animation:pulse 1.8s infinite}
.mini-live.stale{color:var(--down)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mini-time{font-family:var(--mono); font-size:clamp(15px,1.4vw,24px); font-weight:700; letter-spacing:1px}
.mini-date{font-size:clamp(10px,.82vw,13px); color:var(--ink-dim); white-space:nowrap}
/* Posisi kiri-bawah */
body[data-clock="kiri-bawah"] .ticker-clock{order:-1; border-left:0; border-right:1px solid var(--glass-brd)}

/* ---- Toast koneksi ---- */
.conn-toast{
  position:fixed; bottom:calc(var(--gap) + 70px); left:50%; transform:translateX(-50%);
  z-index:9; padding:10px 20px; border-radius:999px; font-size:14px; font-weight:600;
  background:color-mix(in srgb,var(--down) 22%,#000); color:#fff;
  border:1px solid color-mix(in srgb,var(--down) 50%,transparent); backdrop-filter:blur(8px);
}

/* =============================================================
   RESPONSIVE — PORTRAIT (9:16)
   ============================================================= */
@media (orientation:portrait){
  .content{grid-template-columns:1fr; grid-template-rows:auto auto auto}
  .sidecol{grid-template-rows:auto auto}
  .panel-media{aspect-ratio:16/9; height:auto}
  .panel-bunga{max-height:none}
  .brand-text p{display:none}
  .mini-date{display:none}
}
body[data-orientation="portrait"] .content{grid-template-columns:1fr; grid-template-rows:auto auto auto}
body[data-orientation="portrait"] .sidecol{grid-template-rows:auto auto}
body[data-orientation="portrait"] .panel-media{aspect-ratio:16/9; height:auto}
body[data-orientation="portrait"] .panel-bunga{max-height:none}
body[data-orientation="landscape"] .content{grid-template-columns:1.45fr 1fr}
body[data-orientation="landscape"] .panel-media{aspect-ratio:auto; height:auto}

@media (max-width:760px){
  :root{--radius:16px}
  .content{grid-template-columns:1fr}
  .cur-name{display:none}
  .mini-date{display:none}
  .spark{display:none}
}