/* ==========================================================================
   POR — Gantt jadwal harian (por.php, section #jadwal). Kelas gt-*.
   Hanya transform/opacity yang dianimasikan. Pop-up detail (gd-) ada di blok terpisah di akhir berkas.
   ========================================================================== */

:root {
  --gt-label-w: 56px;
  --gt-bar-h: 58px;
  --gt-pad: 11px;
  --gt-row-h: 76px;
  --gt-hour-w: 112px;
  --gt-fs: 17px;
  --gt-id-fs: 20px;
  --gt-id-w: 36px;
}
@media (min-width: 400px) { :root { --gt-label-w: 72px; --gt-bar-h: 58px; --gt-pad: 9px; --gt-row-h: 76px; } }
@media (min-width: 768px) { :root { --gt-label-w: 132px; --gt-bar-h: 62px; --gt-pad: 9px; --gt-row-h: 80px; --gt-fs: 18px; --gt-id-fs: 22px; --gt-id-w: 42px; } }

/* ---------- Sakelar Gantt / Daftar ---------- */
.gt-switch { display: inline-flex; flex: none; align-self: flex-start; background: #e8edf5; padding: 3px; gap: 3px; border: 1px solid #d3dcea; }
.gt-switch[hidden] { display: none; }
.gt-sw-btn { min-width: 84px; min-height: 40px; padding: 0 16px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #475569; background: transparent; border: 0; cursor: pointer; transition: background-color .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.gt-sw-btn:hover { color: #003366; }
.gt-sw-btn[aria-pressed="true"] { background: #003366; color: #fff; box-shadow: inset 0 -3px 0 #f57c00; }
.gt-sw-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.gt-view-in { animation: gt-fade .2s ease-out; }
.gt-wrap[hidden], #jadwalDaftar[hidden], #jadwalDaftarKosong[hidden] { display: none; }
#jadwalDaftarKosong { padding: 28px 16px; text-align: center; font-size: 14px; font-weight: 600; color: #6b7280; background: #f8fafc; border: 1px dashed #cbd5e1; }

/* ---------- Kerangka ---------- */
.gt-root { position: relative; width: 100%; max-width: 100%; min-width: 0; }
.gt-root * { box-sizing: border-box; }

/* ---------- Chip hari ---------- */
.gt-days { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 2px 2px 10px; margin: 0 0 6px; scrollbar-width: thin; }
.gt-days[hidden] { display: none; }
.gt-day { flex: 0 0 auto; min-width: 92px; min-height: 56px; padding: 7px 14px 7px 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; text-align: left; background: #fff; border: 1.5px solid #dbe3ee; border-left: 5px solid #cbd5e1; color: #374151; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.gt-day:hover { border-color: #003366; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.gt-day:focus-visible, .gt-label:focus-visible, .gt-zbtn:focus-visible, .gt-empty-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.gt-day-w { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #6b7280; }
.gt-day-d { font-size: 22px; line-height: 1; color: #003366; }
.gt-day-n { font-size: 11px; font-weight: 700; color: #6b7280; }
.gt-day-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #16a34a; animation: gt-pulse 1.6s ease-in-out infinite; }
.gt-day.is-on { background: #003366; border-color: #003366; border-left-color: #f57c00; color: #fff; }
.gt-day.is-on .gt-day-w, .gt-day.is-on .gt-day-n { color: rgba(255, 255, 255, .78); }
.gt-day.is-on .gt-day-d { color: #fff; }
.gt-day.is-on .gt-day-dot { background: #4ade80; }

/* ---------- Bagan ---------- */
.gt-chart { position: relative; background: #fff; border: 1px solid #dbe3ee; border-top: 3px solid #003366; }
.gt-scroll { position: relative; overflow: auto; max-height: min(78vh, 760px); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.gt-scroll[hidden], .gt-skel[hidden], .gt-empty[hidden], .gt-extra[hidden] { display: none; }
.gt-chart.is-loading .gt-scroll { display: none; }
.gt-grid { position: relative; min-width: 100%; }

.gt-sh { position: absolute; top: 0; bottom: 0; width: 14px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 7; }
.gt-sh-l { left: var(--gt-label-w); background: linear-gradient(90deg, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)); }
.gt-sh-r { right: 0; background: linear-gradient(270deg, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)); }
.gt-chart.can-l .gt-sh-l, .gt-chart.can-r .gt-sh-r { opacity: 1; }
.gt-chart.is-empty .gt-sh { display: none; }

/* Kepala jam */
.gt-head { position: sticky; top: 0; z-index: 5; display: flex; height: 32px; background: #003366; color: #fff; }
.gt-corner { position: sticky; left: 0; z-index: 6; flex: none; width: var(--gt-label-w); display: flex; align-items: center; justify-content: center; background: #00264d; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.gt-corner span { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: rgba(255, 255, 255, .7); }
.gt-ticks { position: relative; flex: none; height: 100%; }
.gt-tick { position: absolute; top: 0; bottom: 0; padding: 11px 0 0 5px; border-left: 1px solid rgba(255, 255, 255, .4); font-family: 'Barlow Condensed', 'Plus Jakarta Sans', sans-serif; font-style: italic; font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: .03em; white-space: nowrap; }
.gt-tick.is-end { padding: 11px 5px 0 0; border-left: 0; border-right: 1px solid rgba(255, 255, 255, .4); transform: translateX(-100%); }
.gt-now-tag { position: absolute; top: 2px; z-index: 2; padding: 3px 7px 3px 6px; background: #f57c00; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1; white-space: nowrap; margin-left: -1px; clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%); animation: gt-tag 2.4s ease-in-out infinite; }
.gt-now-tag[hidden] { display: none; }
.gt-now-tag.is-flip { margin-left: 0; transform: translateX(calc(-100% + 1px)); clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%); }

/* Badan & garis */
.gt-body { position: relative; }
.gt-lines { position: absolute; top: 0; bottom: 0; left: var(--gt-label-w); pointer-events: none; background-repeat: repeat-x; background-image: linear-gradient(90deg, #c3cddb 1px, transparent 1px), linear-gradient(90deg, #e9eef5 1px, transparent 1px); }
.gt-now { position: absolute; top: 0; bottom: 0; left: var(--gt-label-w); width: 2px; margin-left: -1px; background: #f57c00; z-index: 3; pointer-events: none; will-change: transform; }
.gt-now[hidden] { display: none; }

.gt-row { position: relative; display: flex; min-height: var(--gt-row-h); border-bottom: 1px solid #e3e9f1; }
.gt-row:last-child { border-bottom: 0; }
.gt-track { position: relative; flex: none; height: calc(2 * var(--gt-pad) + var(--n, 1) * (var(--gt-bar-h) + 4px) - 4px); }

/* Label cabor (lengket di kiri) */
.gt-label { position: sticky; left: 0; z-index: 4; flex: none; width: var(--gt-label-w); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 8px 4px 4px; border: 0; margin: 0; color: #fff; text-align: center; cursor: pointer; background: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)), var(--c, #003366); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); -webkit-tap-highlight-color: transparent; }
.gt-label:focus-visible { outline-offset: -4px; outline-color: #fff; }
.gt-l-ic { display: inline-flex; flex: none; }
.gt-l-ic svg, .gt-l-ic .por-mask { width: 20px; height: 20px; }
.gt-l-sing { font-size: 13px; line-height: 1.02; max-width: 100%; overflow-wrap: anywhere; letter-spacing: .02em; }
.gt-l-nama { display: none; }
.gt-l-ex { position: absolute; top: 3px; right: 10px; padding: 1px 4px; background: #ffd700; color: #3b2f00; font-family: 'Plus Jakarta Sans', sans-serif; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; }
.gt-label[aria-pressed="true"] { box-shadow: inset 4px 0 0 #ffd700; }
@media (min-width: 768px) {
  .gt-label { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 4px 14px 4px 14px; text-align: left; }
  .gt-l-ic svg, .gt-l-ic .por-mask { width: 24px; height: 24px; }
  .gt-l-sing { display: none; }
  .gt-l-nama { display: block; font-size: 18px; line-height: 1; }
  .gt-l-ex { top: 5px; right: 14px; }
}

/* ---------- Batang laga ---------- */
.gt-bar { position: absolute; top: calc(var(--gt-pad) + var(--l, 0) * (var(--gt-bar-h) + 4px)); height: var(--gt-bar-h); min-width: 28px; margin: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; z-index: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .15s ease-out, filter .15s ease-out; }
.gt-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)), var(--c, #003366); clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%); }
.gt-bg::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #ffd700; opacity: 0; }
.gt-in { position: relative; display: flex; align-items: center; gap: 5px; width: 100%; height: 100%; padding: 0 8px 0 10px; font-size: 12px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.gt-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gt-id { font-family: 'Barlow Condensed', 'Plus Jakarta Sans', sans-serif; font-style: italic; font-weight: 800; font-size: var(--gt-id-fs, 20px); line-height: 1; letter-spacing: .02em; }
.gt-sk { flex: none; font-weight: 800; }
.gt-txt.is-2 { display: flex; flex-direction: row; align-items: stretch; flex: 1 1 auto; align-self: stretch; font-family: 'Barlow Condensed', 'Plus Jakarta Sans', sans-serif; font-style: normal; }
.gt-idc { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: var(--gt-id-w, 36px); min-width: 0; }
.gt-txt:not(.is-2) .gt-idc { width: auto; }
.gt-id-ic { display: inline-flex; align-items: center; justify-content: center; }
.gt-id-ic svg, .gt-id-ic .por-mask { width: 20px; height: 20px; }
.gt-sep { flex: none; align-self: stretch; width: 1px; margin: 8px 8px 8px 0; background: rgba(255, 255, 255, .45); }
.gt-bar.is-selesai .gt-sep { background: rgba(31, 41, 55, .35); }
.gt-names { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.gt-names > .gt-tn { font-size: var(--gt-fs, 17px); line-height: 1.12; font-weight: 700; }
.gt-tl { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: var(--gt-fs, 17px); line-height: 1.12; font-weight: 700; }
.gt-tn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-win { font-weight: 800; }
.gt-hint { font-style: italic; font-weight: 600; opacity: .7; }
.gt-ex { flex: none; padding: 1px 4px; background: #ffd700; color: #3b2f00; font-size: 9px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-shadow: none; }
.gt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); animation: gt-pulse 1.4s ease-in-out infinite; }

@media (hover: hover) {
  .gt-bar:hover { transform: translateY(-1px); filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .3)); z-index: 2; }
}
.gt-bar:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; z-index: 6; }

/* Keadaan */
.gt-bar.is-berlangsung .gt-bg::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 20px); background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 7.07px, transparent 7.07px 14.14px); animation: gt-stripe 1.1s linear infinite; }
.gt-bar.is-selesai { color: #1f2937; }
.gt-bar.is-selesai .gt-bg { opacity: .38; }
.gt-bar.is-selesai .gt-in { text-shadow: none; }
.gt-bar.is-selesai .gt-ex { color: #3b2f00; }
.gt-bar.is-ex .gt-bg { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .26) 0 3px, transparent 3px 8px), linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)), var(--c, #003366); }
.gt-bar.is-perk .gt-bg { border-right: 2px dashed rgba(255, 255, 255, .8); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), rgba(0, 0, 0, .55)); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), rgba(0, 0, 0, .55)); }
.gt-bar.is-selesai.is-perk .gt-bg { border-right-color: var(--c, #003366); }
.gt-bar.is-perlu_cek .gt-bg { box-shadow: inset 0 0 0 2px #facc15; }
.gt-bar.gt-flash .gt-bg::before { animation: gt-flash .6s ease-out; }

/* ---------- Kartu kosong ---------- */
.gt-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 18px 34px; text-align: center; }
.gt-empty-ic { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; color: #003366; background: #e8edf5; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.gt-empty-ic svg { width: 26px; height: 26px; }
.gt-empty-t { margin: 6px 0 0; font-size: 26px; color: #003366; overflow-wrap: anywhere; }
.gt-empty-d { margin: 0; max-width: 34ch; font-size: 14px; font-weight: 500; color: #6b7280; }
.gt-empty-btn { margin-top: 10px; min-height: 44px; padding: 0 20px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #003366; border: 0; box-shadow: inset 0 -3px 0 #f57c00; cursor: pointer; transition: background-color .2s; }
.gt-empty-btn:hover { background: #00264d; }

/* ---------- Skeleton ---------- */
.gt-skel { padding: 6px 0; }
.gt-skel-row { position: relative; display: flex; align-items: center; height: var(--gt-row-h); border-bottom: 1px solid #eef2f7; overflow: hidden; }
.gt-skel-l { flex: none; width: var(--gt-label-w); height: 100%; background: #e5eaf2; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.gt-skel-b { position: relative; flex: none; width: var(--w, 40%); height: var(--gt-bar-h); margin-left: var(--x, 10%); background: #e5eaf2; overflow: hidden; }
.gt-skel-b::after, .gt-skel-l::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: gt-shimmer 1.3s ease-in-out infinite; }
.gt-skel-l { position: relative; overflow: hidden; }

/* ---------- Kaki: catatan basi & zoom ---------- */
.gt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; min-height: 36px; }
.gt-stale { font-size: 12px; font-weight: 700; color: #92400e; opacity: 0; }
.gt-stale.is-on { opacity: 1; padding: 3px 8px; background: #fef3c7; border: 1px solid #fcd34d; }
.gt-zoom { display: inline-flex; gap: 6px; margin-left: auto; }
.gt-zbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #003366; background: #fff; border: 1.5px solid #cbd5e1; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.gt-zbtn svg { width: 18px; height: 18px; }
.gt-zbtn:hover:not(:disabled) { background: #003366; border-color: #003366; color: #fff; }
.gt-zbtn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Waktu belum pasti ---------- */
.gt-extra { margin-top: 12px; padding: 10px 14px 12px; background: #fffbeb; border: 1px solid #fcd34d; border-left: 5px solid #f57c00; }
.gt-extra-h { margin: 0 0 4px; font-size: 18px; color: #92400e; }
.gt-extra-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.gt-extra-i { font-size: 13px; font-weight: 500; color: #4b5563; overflow-wrap: anywhere; }
.gt-extra-i b { font-weight: 800; color: #111827; }

/* ---------- Animasi ---------- */
.gt-enter .gt-row { animation: gt-row-in .32s ease-out backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.gt-enter .gt-bar { transform-origin: left center; animation: gt-bar-in .38s ease-out backwards; animation-delay: calc(var(--i, 0) * 40ms + 90ms); }
.gt-in-r { animation: gt-slide-r .24s ease-out; }
.gt-in-l { animation: gt-slide-l .24s ease-out; }
.gt-out-r, .gt-out-l { opacity: 0; transition: opacity .11s ease-in, transform .11s ease-in; }
.gt-out-r { transform: translateX(-28px); }
.gt-out-l { transform: translateX(28px); }
.gt-fade { animation: gt-fade .25s ease-out backwards; }

@keyframes gt-row-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes gt-bar-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes gt-slide-r { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes gt-slide-l { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes gt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@keyframes gt-stripe { to { transform: translateX(-20px); } }
@keyframes gt-flash { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
@keyframes gt-tag { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@keyframes gt-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .gt-root *, .gt-root *::before, .gt-root *::after, .gt-view-in { animation: none !important; transition: none !important; }
  .gt-bar:hover { transform: none; }
}

/* ===== POP-UP DETAIL (gd-) ===== */

.gd-overlay {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 23, 42, .55); animation: gd-fade .2s ease-out backwards;
}
.gd-overlay.is-out { opacity: 0; animation: gd-fade-out .22s ease-in forwards; }
.gd-sheet {
  --c: #003366;
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 100%;
  max-height: 92vh; max-height: 92dvh; background: #fff; color: #0f172a; overflow: hidden;
  box-shadow: 0 -10px 40px rgba(15, 23, 42, .3); touch-action: pan-y;
  animation: gd-up .3s cubic-bezier(.2, .8, .2, 1) backwards;
}
.gd-overlay.is-out .gd-sheet { animation: gd-down .22s cubic-bezier(.4, 0, 1, 1) forwards; }
.gd-sheet:focus { outline: none; }
.gd-ic { width: 20px; height: 20px; flex: none; }

/* gagang kecil (HP) */
.gd-grip {
  position: absolute; top: 6px; left: 50%; width: 44px; height: 4px; margin-left: -22px; z-index: 2;
  background: rgba(255, 255, 255, .6);
}

/* kepala berwarna cabor */
.gd-head {
  position: relative; flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 12px 16px 20px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--c), var(--c)); background-color: var(--c);
}
.gd-head::before { /* garis miring putih tipis */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, .2) 58% 59.4%, transparent 59.4% 66%, rgba(255, 255, 255, .11) 66% 67%, transparent 67% 100%);
}
.gd-head::after { /* peredam bawah agar teks terbaca */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .18), transparent 70%);
}
.gd-head-ic { position: absolute; right: 36px; top: 50%; width: 130px; height: 130px; margin-top: -65px; color: #fff; opacity: .16; pointer-events: none; }
.gd-bgic { width: 100%; height: 100%; display: block; }
.gd-head-text { position: relative; z-index: 1; min-width: 0; flex: 1; }
.gd-title {
  margin: 0; font-family: 'Teko', 'Oswald', 'Impact', sans-serif; font-size: 34px; line-height: 1; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere;
}
.gd-sub { margin: 6px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .95; }
.gd-close {
  position: relative; z-index: 1; flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .45); cursor: pointer;
}
.gd-close:hover { background: rgba(255, 255, 255, .32); }
.gd-close:focus-visible, .gd-navbtn:focus-visible, .gd-bagan:focus-visible { outline: 3px solid var(--por-gold, #ffd700); outline-offset: 2px; }

/* isi */
.gd-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gd-content { padding: 4px 20px 16px; }
.gd-sec { padding: 16px 0; }
.gd-sec + .gd-sec { border-top: 1px solid #e2e8f0; }
.gd-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #64748b; }

/* waktu */
.gd-date { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--por-blue, #003366); }
.gd-bar-wrap { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.gd-bar-t { flex: none; font-family: 'Teko', 'Oswald', 'Impact', sans-serif; font-size: 24px; line-height: 1; font-weight: 600; color: #0f172a; min-width: 2.6em; }
.gd-bar-end { text-align: right; }
.gd-wita { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .1em; padding: 2px 6px; background: #fef3c7; color: #92400e; }
.gd-bar { position: relative; flex: 1 1 auto; min-width: 0; height: 8px; background: #e2e8f0; overflow: hidden; }
.gd-bar-fill { position: absolute; inset: 0; background: var(--c); transform: scaleX(0); transform-origin: left center; transition: transform .6s ease-out; }
.gd-bar.st-selesai .gd-bar-fill { background: #94a3b8; }
.gd-bar.st-perlu_cek .gd-bar-fill { background: #f57c00; }
.gd-bar.st-berlangsung .gd-bar-fill { background: var(--por-green, #2e7d32); }
.gd-time-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.gd-time-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: #475569; }
.gd-dur { font-weight: 700; }
.gd-cd { font-weight: 800; color: var(--por-blue, #003366); }
.gd-cd:empty { display: none; }
.gd-status { flex: none; padding: 5px 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: #dbeafe; color: #1e40af; }
.gd-status.st-berlangsung { background: var(--por-green, #2e7d32); color: #fff; }
.gd-status.st-selesai { background: #e2e8f0; color: #475569; }
.gd-status.st-perlu_cek { background: #fff7ed; color: #b45309; box-shadow: inset 0 0 0 1px #f57c00; }
.gd-note-est { margin: 8px 0 0; padding: 6px 10px; font-size: 12px; line-height: 1.4; color: #92400e; background: #fffbeb; border-left: 3px solid var(--por-gold, #ffd700); }

/* peserta */
.gd-teams { display: grid; gap: 8px; }
.gd-team { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 14px 8px 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1; }
.gd-team.is-win { background: #f0fdf4; border-color: #bbf7d0; border-left-color: var(--por-green, #2e7d32); }
.gd-team.is-lose .gd-team-name, .gd-team.is-lose .gd-score { color: #64748b; }
.gd-team-trophy { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #e0a800; }
.gd-team-trophy .gd-ic { width: 24px; height: 24px; filter: drop-shadow(0 1px 0 rgba(180, 120, 0, .35)); }
.gd-team-col { flex: 1 1 auto; min-width: 0; }
.gd-team-name { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--por-blue, #003366); overflow-wrap: anywhere; }
.gd-team-kode { margin-top: 2px; font-size: 12px; font-weight: 600; color: #64748b; }
.gd-team-name.is-hint { font-weight: 700; font-style: italic; color: #64748b; }
.gd-team.is-win .gd-team-name { color: #166534; }
.gd-score { flex: none; min-width: 1.4em; text-align: right; font-family: 'Teko', 'Oswald', 'Impact', sans-serif; font-size: 44px; line-height: 1; font-weight: 700; color: #0f172a; }
.gd-score.is-empty { color: #cbd5e1; }
.gd-team.is-win .gd-score { color: #166534; }
.gd-detail { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 8px 12px; font-size: 13px; background: #eff6ff; border-left: 3px solid var(--por-blue, #003366); }
.gd-detail-k { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.gd-detail-v { font-weight: 700; color: #1e293b; overflow-wrap: anywhere; }

/* lokasi & catatan */
.gd-loc { display: flex; align-items: center; gap: 12px; }
.gd-loc-ic { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--c); color: #fff; }
.gd-loc-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gd-loc-v { font-size: 15px; font-weight: 800; color: #0f172a; overflow-wrap: anywhere; }
.gd-loc-v.is-empty { font-weight: 700; font-style: italic; color: #64748b; }
.gd-catatan-v { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #334155; overflow-wrap: anywhere; white-space: pre-line; }

/* kaki: lihat bagan + navigasi */
.gd-foot {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #f8fafc; border-top: 1px solid #e2e8f0;
}
.gd-bagan {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  background: var(--por-blue, #003366); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: background .15s;
}
.gd-bagan:hover { background: #004a94; }
.gd-nav { display: inline-flex; align-items: center; gap: 6px; }
.gd-navbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; cursor: pointer;
  background: #fff; color: var(--por-blue, #003366); border: 1px solid #cbd5e1; font-size: 12px; font-weight: 800;
}
.gd-navbtn:hover:not(:disabled) { background: #eef2f7; }
.gd-navbtn:disabled { opacity: .4; cursor: default; }
.gd-count { min-width: 3.2em; text-align: center; font-size: 12px; font-weight: 800; color: #64748b; }
.gd-sheet[data-nav="0"] .gd-nav { display: none; }

@media (max-width: 479px) {
  .gd-foot { flex-direction: column; align-items: stretch; }
  .gd-nav { justify-content: space-between; }
  .gd-navbtn { flex: 1 1 0; justify-content: center; }
  .gd-count { flex: none; }
  .gd-title { font-size: 30px; }
  .gd-head-ic { right: 56px; width: 110px; height: 110px; margin-top: -55px; }
}

/* desktop: modal tengah */
@media (min-width: 768px) {
  .gd-overlay { align-items: center; padding: 24px; }
  .gd-sheet { max-width: 560px; max-height: 88vh; max-height: 88dvh; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .5); animation: gd-pop .24s cubic-bezier(.2, .8, .2, 1) backwards; }
  .gd-overlay.is-out .gd-sheet { animation: gd-pop-out .18s ease-in forwards; }
  .gd-grip { display: none; }
  .gd-head { padding-top: 18px; }
}

/* animasi (hanya transform/opacity) */
.gd-content.gd-in-next { animation: gd-in-next .26s cubic-bezier(.2, .8, .2, 1) backwards; }
.gd-content.gd-in-prev { animation: gd-in-prev .26s cubic-bezier(.2, .8, .2, 1) backwards; }
.gd-flashlayer { position: absolute; inset: 0; pointer-events: none; background: var(--por-gold, #ffd700); opacity: 0; }
.gd-flashlayer.gd-flash { animation: gd-flash .7s ease-out; }
.gd-status.st-berlangsung::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: #fff; vertical-align: 1px;
  animation: gd-pulse 1.4s ease-in-out infinite;
}
@keyframes gd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gd-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gd-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes gd-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes gd-pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gd-pop-out { from { transform: scale(1); opacity: 1; } to { transform: scale(.96); opacity: 0; } }
@keyframes gd-in-next { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes gd-in-prev { from { transform: translateX(-28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes gd-flash { 0% { opacity: .35; } 100% { opacity: 0; } }
@keyframes gd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .gd-overlay, .gd-sheet, .gd-content, .gd-flashlayer, .gd-status::before, .gd-bar-fill,
  .gd-overlay.is-out, .gd-overlay.is-out .gd-sheet { animation: none !important; transition: none !important; }
}

/* ===== PENCARIAN PEMAIN (gt-cari, gt-card, gt-hit/gt-dim/gt-maybe) ===== */

.gt-cari { position: relative; margin: 0 0 14px; z-index: 30; background: #fff; }
.gt-cari[hidden] { display: none; }
@media (max-width: 767px) {
  .gt-cari { position: sticky; top: 0; padding: 8px 0; margin-bottom: 8px; box-shadow: 0 6px 8px -8px rgba(15, 23, 42, .35); }
}
.gt-cari-in { position: relative; display: flex; align-items: center; min-height: 48px; background: #fff; border: 1.5px solid #cbd5e1; border-left: 5px solid #f57c00; transition: border-color .2s, box-shadow .2s; }
.gt-cari-in:focus-within { border-color: #003366; border-left-color: #f57c00; box-shadow: 0 2px 10px rgba(0, 51, 102, .15); }
.gt-cari-ic { flex: none; width: 40px; display: inline-flex; align-items: center; justify-content: center; color: #64748b; }
.gt-cari-ic svg { width: 20px; height: 20px; }
.gt-cari-input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 4px; border: 0; background: transparent; color: #0f172a; font: inherit; font-size: 16px; font-weight: 600; outline: none; }
.gt-cari-input::placeholder { color: #94a3b8; font-weight: 500; }
.gt-cari-x { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #64748b; cursor: pointer; }
.gt-cari-x[hidden] { display: none; }
.gt-cari-x:hover { color: #0f172a; background: #f1f5f9; }
.gt-cari-x:focus-visible, .gt-row-btn:focus-visible, .gt-card-x:focus-visible { outline: 3px solid #f59e0b; outline-offset: -3px; }
.gt-cari-x svg { width: 18px; height: 18px; }
.gt-cari-list { position: absolute; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none; max-height: 60vh; overflow-y: auto; background: #fff; border: 1.5px solid #003366; box-shadow: 0 12px 28px -8px rgba(15, 23, 42, .35); z-index: 31; }
.gt-cari-list[hidden] { display: none; }
.gt-sug { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'n c' 's c'; column-gap: 12px; align-items: center; min-height: 52px; padding: 7px 14px; cursor: pointer; border-bottom: 1px solid #eef2f7; }
.gt-sug:last-child { border-bottom: 0; }
.gt-sug:hover, .gt-sug.is-act { background: #eaf1fb; }
.gt-sug-n { grid-area: n; font-size: 15px; font-weight: 800; color: #003366; overflow-wrap: anywhere; }
.gt-sug-s { grid-area: s; font-size: 12px; font-weight: 600; color: #64748b; }
.gt-sug-c { grid-area: c; font-size: 12px; font-weight: 800; color: #92400e; background: #fef3c7; padding: 3px 8px; white-space: nowrap; }
.gt-sug-none { padding: 14px; font-size: 14px; font-weight: 600; color: #475569; }

/* kartu jadwal orang */
.gt-card { margin: 0 0 14px; background: #fff; border: 1.5px solid #f5b301; border-left: 6px solid #f5b301; box-shadow: 0 3px 12px rgba(15, 23, 42, .08); }
.gt-card[hidden] { display: none; }
.gt-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; background: #fffbeb; border-bottom: 1px solid #fde68a; }
.gt-card-t { margin: 0; min-width: 0; font-size: 24px; line-height: 1.1; color: #003366; overflow-wrap: anywhere; }
.gt-card-s { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: #64748b; letter-spacing: 0; }
.gt-card-x { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid #cbd5e1; background: #fff; color: #003366; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.gt-card-x:hover { background: #eef2f7; }
.gt-card-none { margin: 0; padding: 14px; font-size: 14px; font-weight: 600; color: #475569; }
.gt-card-warn { margin: 0; padding: 8px 14px; font-size: 13px; font-weight: 700; color: #b91c1c; background: #fef2f2; border-bottom: 1px solid #fecaca; }
.gt-card-l { margin: 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.gt-card-d { position: sticky; top: 0; z-index: 1; padding: 5px 14px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #475569; background: #f1f5f9; border-top: 1px solid #e2e8f0; }
.gt-card-i { border-top: 1px solid #eef2f7; }
.gt-row-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; margin: 0; border: 0; background: #fff; text-align: left; font: inherit; color: #0f172a; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gt-row-btn:hover { background: #f8fafc; }
.gt-ri-jam { flex: none; min-width: 6.6em; font-size: 20px; line-height: 1; font-weight: 600; color: #003366; white-space: nowrap; }
.gt-ri-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gt-ri-t { font-size: 14px; font-weight: 800; color: #0f172a; overflow-wrap: anywhere; }
.gt-ri-v { font-size: 12.5px; font-weight: 600; color: #64748b; overflow-wrap: anywhere; }
.gt-ri-w { font-size: 12.5px; font-weight: 800; color: #b91c1c; overflow-wrap: anywhere; }
.gt-ri-x { font-size: 12.5px; font-weight: 700; color: #1e40af; overflow-wrap: anywhere; }
.gt-ri-jm { display: inline-block; margin-right: 6px; padding: 1px 6px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #92400e; background: #fef3c7; }
.gt-ri-bang { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: #dc2626; color: #fff; font-size: 16px; font-weight: 900; line-height: 1; }
.gt-row-btn.is-clash { background: #fff8f8; box-shadow: inset 4px 0 0 #dc2626; }
.gt-row-btn.is-maybe { background: #fcfcf6; }
.gt-row-btn.is-maybe .gt-ri-t, .gt-row-btn.is-maybe .gt-ri-jam { color: #64748b; font-weight: 700; }
@media (max-width: 479px) {
  .gt-row-btn { gap: 8px; padding: 8px 10px; }
  .gt-ri-jam { min-width: 5.4em; font-size: 17px; }
  .gt-card-t { font-size: 21px; }
}

/* chip hari: jumlah laga orang terpilih */
.gt-day.has-cari { border-color: #f5b301; border-left-color: #f5b301; background: #fffbeb; }
.gt-day.has-cari .gt-day-n { color: #92400e; font-weight: 800; }
.gt-day.no-cari { opacity: .7; }
.gt-day.is-on.has-cari, .gt-day.is-on.no-cari { background: #003366; border-color: #003366; border-left-color: #f5b301; opacity: 1; }
.gt-day.is-on.has-cari .gt-day-n { color: #ffd700; }

/* batang: milik orang / jika menang / pudar */
.gt-bar { scroll-margin-top: 120px; scroll-margin-left: calc(var(--gt-label-w) + 12px); }
.gt-bar.gt-hit .gt-bg { outline: 4px solid #ffd700; outline-offset: -4px; }
.gt-bar.gt-hit { z-index: 3; }
.gt-bar.gt-maybe .gt-bg { outline: 3px dashed #ffd700; outline-offset: -3px; }
.gt-bar.gt-maybe { z-index: 3; }
.gt-bar.gt-dim { opacity: .25; transition: opacity .2s ease-out, transform .15s ease-out, filter .15s ease-out; }
.gt-bar.gt-dim:hover, .gt-bar.gt-dim:focus-visible { opacity: .7; }

/* catatan di tampilan Daftar */
.gt-cari-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 10px 14px; background: #fffbeb; border: 1px solid #fcd34d; border-left: 5px solid #f5b301; font-size: 14px; font-weight: 600; color: #3f3f46; }
.gt-cari-note[hidden] { display: none; }
.gt-cari-note b { color: #003366; font-weight: 800; }
.gt-cari-note button { min-height: 40px; padding: 0 14px; border: 1px solid #003366; background: #003366; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.gt-cari-note button:hover { background: #004a94; }
.gt-cari-note-t { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }

/* pop-up: bagian Pemain */
.gd-pem-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.gd-pem-h:focus-visible { outline: 3px solid var(--por-gold, #ffd700); outline-offset: 2px; }
.gd-pem-chev { flex: none; width: 20px; height: 20px; color: #64748b; transition: transform .2s ease-out; }
.gd-pem-h[aria-expanded="true"] .gd-pem-chev { transform: rotate(90deg); }
.gd-pem-body { display: grid; gap: 12px; margin-top: 6px; }
.gd-pem-body[hidden] { display: none; }
.gd-pem-tim { min-width: 0; }
.gd-pem-tn { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: var(--por-blue, #003366); overflow-wrap: anywhere; }
.gd-pem-l { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.gd-pem-i { padding: 3px 8px; font-size: 13px; font-weight: 600; color: #334155; background: #f1f5f9; overflow-wrap: anywhere; }
.gd-pem-i.is-hit { font-weight: 900; color: #0f172a; background: #fde68a; box-shadow: inset 0 0 0 2px #f5b301; }
.gd-pem-kosong { margin: 0; font-size: 13px; font-weight: 600; font-style: italic; color: #64748b; }

@media (prefers-reduced-motion: reduce) {
  .gt-bar.gt-dim, .gd-pem-chev { transition: none !important; }
}

/* ===== MODE TV (is-tv) ===== */
/* Pembungkus #ganttTv (elemen layar penuh). Di luar mode TV hanya pembungkus biasa; bilah/legenda tersembunyi. */
.gt-tvbar, .gt-tvleg, .gt-tvdots, .gt-tvribbon, .gt-tvstart { display: none; }
.gt-tv.is-tv, body.is-tv .gt-tv { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; flex-direction: column; background: #f4f7fb; overflow: hidden; }
body.is-tv { overflow: hidden; }
/* TV tidak boleh menunggu animasi reveal-on-scroll (IntersectionObserver): layar harus langsung tampil */
body.is-tv #jadwal, body.is-tv .por-lembar { transform: none !important; animation: none !important; will-change: auto !important; opacity: 1 !important; filter: none !important; }   /* leluhur bertransformasi akan menjadikan 'fixed' relatif terhadapnya (tinggi 0) */
body.is-tv .rv, .gt-tv.is-tv.rv, .gt-tv.is-tv .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
body.is-tv > nav, body.is-tv > footer, body.is-tv .por-hero, body.is-tv #medali, body.is-tv #cabor, body.is-tv #funmatch,
body.is-tv #jadwal .max-w-6xl > :not(#ganttTv) { display: none !important; }
body.is-tv #jadwal { padding: 0; background: transparent; }

.gt-tv.is-tv .gt-tvbar, body.is-tv .gt-tvbar { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 2vw; height: max(15vh, 108px); padding: 0 2vw 0 2.4vw; overflow: hidden; color: #fff; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px), linear-gradient(100deg, #00264d 0%, #003366 55%, #004a94 100%); border-bottom: .6vh solid #f57c00; }
.gt-tvbar-slash { position: absolute; top: -12%; right: 22vw; width: 16vw; height: 124%; z-index: 0; pointer-events: none; transform: skewX(-24deg); background: linear-gradient(90deg, transparent 0 8%, rgba(245, 124, 0, .9) 8% 30%, transparent 30% 38%, rgba(255, 215, 0, .85) 38% 52%, transparent 52% 100%); animation: tv-slash-in .9s ease-out both; }
.gt-tvbar-l, .gt-tvbar-r { position: relative; z-index: 1; min-width: 0; }
.gt-tvbar-l { animation: tv-title-in .7s ease-out both; }
.gt-tvbar-t { position: relative; margin: 0; overflow: hidden; font-size: 5vh; line-height: 1.05; font-style: italic; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.gt-tvbar-t span { color: #ffd700; }
.gt-tvbar-t::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-120%) skewX(-20deg); animation: tv-shine 20s ease-in-out 4s infinite; pointer-events: none; }
.gt-tvbar-s { margin: .6vh 0 0; font-size: 2vh; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff9a3c; }
.gt-tvbar-r { flex: none; display: flex; align-items: center; gap: 2.4vw; }
.gt-tvbar-time { display: flex; flex-direction: column; align-items: flex-end; gap: .4vh; }
.gt-tvbar-date { font-size: 2.2vh; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.gt-tvbar-clock { display: inline-flex; align-items: baseline; gap: .8vh; line-height: 1; }
.gt-tvbar-clock #tvJam { font-size: 7vh; font-style: italic; font-weight: 800; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.gt-tvbar-clock small { font-size: 2vh; font-weight: 800; letter-spacing: .12em; color: #ffd700; }
.tv-colon { display: inline-block; margin: 0 .04em; animation: tv-blink 1s steps(1, end) infinite; }
.gt-tvbar-live { display: inline-flex; align-items: center; gap: .8vh; padding: .5vh 1.2vh; font-size: 1.9vh; font-weight: 800; color: #fff; background: #16a34a; animation: gt-tag 1.8s ease-in-out infinite; }
.gt-tvbar-live[hidden] { display: none; }
.gt-tvbar-live::before { content: ''; width: 1.1vh; height: 1.1vh; border-radius: 50%; background: #fff; }
.gt-tvbar-qr { display: flex; align-items: center; gap: 1vw; }
.gt-tvbar-qr img { display: block; flex: none; box-sizing: content-box; width: max(11.4vh, 88px); height: max(11.4vh, 88px); padding: .8vh; background: #fff; border: 0; }
.gt-tvbar-qr span { position: relative; z-index: 2; max-width: 11vw; font-size: 1.9vh; font-weight: 800; line-height: 1.2; color: #fff; text-shadow: 0 1px 3px rgba(0, 20, 50, .85), 0 0 10px rgba(0, 20, 50, .7); }
.gt-tvbar-qr img { position: relative; z-index: 2; }
.gt-tvstart.is-pudar { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
@media (max-width: 767px) { .gt-tvbar-qr { display: none; } }

/* Isi: Gantt memenuhi sisa tinggi layar */
.gt-tv.is-tv .gt-wrap:not([hidden]), body.is-tv .gt-tv .gt-wrap:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.gt-root.is-tv { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; height: 100%;
  --gt-fs: 2.4vh; --gt-id-fs: 3.2vh; --gt-id-w: 6vh; --gt-bar-h: 7.6vh; --gt-pad: 1vh; --gt-row-h: 9.6vh; --gt-label-w: 17vw; }
.gt-root.is-tv .gt-cari, .gt-root.is-tv .gt-days, .gt-root.is-tv .gt-card, .gt-root.is-tv .gt-foot, .gt-root.is-tv .gt-extra,
body.is-tv #jadwalCari, body.is-tv #jadwalCariNote { display: none !important; }
.gt-root.is-tv .gt-chart { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border: 0; }
.gt-root.is-tv .gt-scroll { flex: 1 1 0; min-height: 0; max-height: none; overflow: hidden; }
.gt-root.is-tv .gt-sh { display: none; }
.gt-root.is-tv .gt-row.tv-off { display: none; }
.gt-root.is-tv .gt-head { height: 4.6vh; }
.gt-root.is-tv .gt-tick { padding-top: 1.2vh; font-size: 2.3vh; }
.gt-root.is-tv .gt-tick.is-end { padding-top: 1.2vh; }
.gt-root.is-tv .gt-corner span { font-size: 1.6vh; }
.gt-root.is-tv .gt-now-tag { font-size: 1.6vh; padding: .5vh 1vh; }
.gt-root.is-tv .gt-label { flex-direction: row; justify-content: flex-start; gap: 1vh; padding: 4px 1.6vh; text-align: left; pointer-events: none; }
.gt-root.is-tv .gt-l-ic svg, .gt-root.is-tv .gt-l-ic .por-mask { width: 3.6vh; height: 3.6vh; }
.gt-root.is-tv .gt-l-sing { display: none; }
.gt-root.is-tv .gt-l-nama { display: block; font-size: 2.7vh; line-height: 1.05; }
.gt-root.is-tv .gt-l-ex { top: .6vh; right: 1.6vh; font-size: 1.3vh; }
.gt-root.is-tv .gt-bar:hover { transform: none; filter: none; }
.gt-root.is-tv .gt-body.tv-pg { animation: tv-pg-in .55s ease-out; }

/* Legenda, indikator halaman, pita koneksi, tombol mulai */
.gt-tv.is-tv .gt-tvleg, body.is-tv .gt-tvleg { flex: none; display: flex; align-items: center; gap: 2vw; height: max(5vh, 36px); padding: 0 2vw; color: #fff; background: #00264d; font-size: 1.9vh; font-weight: 700; }
.gt-leg { display: inline-flex; align-items: center; gap: 1vh; white-space: nowrap; }
.gt-leg-sw { display: inline-block; width: 3.4vh; height: 2vh; background: #0b5cad; }
.gt-leg-sw.is-live { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 4px, transparent 4px 8px), #0b5cad; }
.gt-leg-sw.is-done { opacity: .45; }
.gt-leg-sw.is-ex { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 3px, transparent 3px 7px), #0b5cad; }
.gt-leg-upd { margin-left: auto; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.gt-tv-exit { flex: none; min-height: 3.6vh; padding: 0 1.4vh; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; font-size: 1.7vh; font-weight: 800; cursor: pointer; }
.gt-tv-exit[hidden] { display: none; }
.gt-tv.is-tv .gt-tvdots, body.is-tv .gt-tvdots { position: absolute; right: 2vw; bottom: max(6.2vh, 44px); z-index: 15; display: inline-flex; gap: 1vh; padding: .8vh 1.2vh; background: rgba(0, 38, 77, .85); }
.gt-tv .gt-tvdots[hidden], .gt-tv .gt-tvribbon[hidden], .gt-tv .gt-tvstart[hidden] { display: none !important; }
.tv-dot { display: block; width: 1.5vh; height: 1.5vh; border-radius: 50%; border: .25vh solid #fff; opacity: .6; }
.tv-dot.is-on { background: #f57c00; border-color: #f57c00; opacity: 1; }
.gt-tv.is-tv .gt-tvribbon, body.is-tv .gt-tvribbon { position: absolute; top: max(16vh, 118px); left: 50%; z-index: 30; display: block; transform: translateX(-50%); padding: .8vh 2vh; background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; font-size: 2vh; font-weight: 800; white-space: nowrap; }
.gt-tv.is-tv .gt-tvstart, body.is-tv .gt-tvstart { position: absolute; top: 55%; left: 50%; z-index: 40; display: block; transform: translate(-50%, -50%); padding: 2vh 4vw; border: 0; background: #f57c00; color: #fff; font-size: 4.4vh; font-style: italic; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 1vh 4vh rgba(0, 0, 0, .35); cursor: pointer; }
.gt-tv.tv-idle, .gt-tv.tv-idle * { cursor: none !important; }
.gt-tv.tv-idle .gt-tv-exit { opacity: 0; }

@keyframes tv-title-in { from { opacity: 0; transform: translateX(-6vw); } to { opacity: 1; transform: none; } }
@keyframes tv-slash-in { from { opacity: 0; transform: translateX(30vw) skewX(-24deg); } to { opacity: 1; transform: skewX(-24deg); } }
@keyframes tv-shine { 0%, 90%, 100% { transform: translateX(-120%) skewX(-20deg); } 96% { transform: translateX(420%) skewX(-20deg); } }
@keyframes tv-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
@keyframes tv-pg-in { from { opacity: 0; transform: translateX(3vw); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gt-tvbar-slash, .gt-tvbar-l, .gt-tvbar-t::after, .tv-colon, .gt-tvbar-live, .gt-root.is-tv .gt-body.tv-pg { animation: none !important; }
}

/* ----- Bilah judul TV: putih bersih + logo CAN (menimpa gaya biru sebelumnya) ----- */
.gt-tv.is-tv .gt-tvbar, body.is-tv .gt-tvbar { background: #fff; color: #003366; border-bottom: .5vh solid #f57c00; box-shadow: 0 .6vh 2vh -1vh rgba(0, 38, 77, .25); }
.gt-tvbar-slash { display: none; }
.gt-tvbar-l { display: flex; align-items: center; gap: 1.6vw; }
.gt-tvbar-logo { display: block; flex: none; height: max(9.2vh, 64px); width: auto; object-fit: contain; }
.gt-tvbar-tt { min-width: 0; border-left: .35vh solid #e2e8f0; padding-left: 1.6vw; }
.gt-tvbar-t { color: #003366; }
.gt-tvbar-t span { color: #f57c00; }
.gt-tvbar-t::after { background: linear-gradient(100deg, transparent, rgba(245, 124, 0, .28), transparent); }
.gt-tvbar-s { color: #64748b; }
.gt-tvbar-date { color: #475569; }
.gt-tvbar-clock #tvJam { color: #003366; text-shadow: none; }
.gt-tvbar-clock small { color: #f57c00; }
.gt-tvbar-qr img { border: .25vh solid #cbd5e1; box-shadow: none; }
.gt-tvbar-qr span { color: #003366; text-shadow: none; }
.gt-tvbar-time { padding: .7vh 0; gap: .2vh; }
.gt-tvbar-date { font-size: 2vh; }
.gt-tvbar-clock #tvJam { font-size: 6vh; }
.gt-tvbar-live { margin-top: .2vh; }