/* ══════════════════════════════════════════
   TV MODE — RESPONSIVE + GOLDEN RATIO
   Semua ukuran berbasis clamp() + vw/vh
   ══════════════════════════════════════════ */

#tvModeInner {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #1a2018;
  color: #eef2ea;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1.5vw, 24px) clamp(12px, 2vw, 32px) clamp(8px, 1.2vw, 18px);
  position: relative;
  box-sizing: border-box;

  --bg: #1a2018;
  --mid: #2a3525;
  --brand: #8b997c;
  --light: #a8b89a;
  --glow: #c2cfb5;
  --accent: #6b7f5c;
  --gold: #f59e0b;
  --glass-border: rgba(255,255,255,0.13);
  --glass-card: rgba(139,153,124,0.13);
  --text: #eef2ea;
  --muted: rgba(210,220,200,0.45);
  --muted2: rgba(210,220,200,0.70);
  --green: #4ade80;
}

#tvModeInner .tv-bg-scene { position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; }
#tvModeInner .tv-bg-scene::before {
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%,rgba(107,127,92,.55) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%,rgba(139,153,124,.35) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 30%,rgba(42,53,37,.9) 0%,transparent 70%),
    linear-gradient(160deg,#1a2018 0%,#222d1e 50%,#141910 100%);
}
#tvModeInner .tv-bg-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
}
#tvModeInner .tv-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.3;animation:tv-orb-drift 12s ease-in-out infinite alternate;}
#tvModeInner .tv-orb-1{width:40vw;height:40vw;background:radial-gradient(circle,#6b7f5c,transparent);top:-10vh;left:-8vw;}
#tvModeInner .tv-orb-2{width:30vw;height:30vw;background:radial-gradient(circle,#8b997c,transparent);bottom:-8vh;right:-6vw;animation-delay:-5s;}
#tvModeInner .tv-orb-3{width:22vw;height:22vw;background:radial-gradient(circle,#a8b89a,transparent);top:50%;left:55%;animation-delay:-9s;opacity:.18;}
@keyframes tv-orb-drift{from{transform:translate(0,0)scale(1)}to{transform:translate(28px,18px)scale(1.07)}}
#tvModeInner>*:not(.tv-bg-scene){position:relative;z-index:1;}

#tvModeInner .tv-glass{
  background:var(--glass-card);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border);border-radius:clamp(10px,1.2vw,18px);
}

/* HEADER */
#tvModeInner header{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:clamp(8px,1vw,14px);border-bottom:1px solid var(--glass-border);
  margin-bottom:clamp(8px,1vw,16px);flex-shrink:0;gap:clamp(8px,1.5vw,20px);
}
#tvModeInner .clock-panel{
  display:flex;align-items:center;gap:clamp(8px,1.2vw,18px);
  padding:clamp(6px,0.7vw,10px) clamp(10px,1.4vw,20px);flex-shrink:0;
}
#tvModeInner .date-wrap{
  text-align:left;padding-right:clamp(8px,1.2vw,18px);border-right:1px solid var(--glass-border);
}
#tvModeInner .date-day{font-size:clamp(8px,0.8vw,11px);color:var(--muted2);letter-spacing:1px;text-transform:uppercase;}
#tvModeInner .date-full{font-size:clamp(10px,1.1vw,15px);font-weight:700;color:var(--text);margin-top:2px;}
#tvModeInner .clock-time{
  font-size:clamp(24px,3.2vw,50px);font-weight:800;letter-spacing:-2px;color:var(--glow);
  line-height:1;text-shadow:0 0 36px rgba(194,207,181,.25);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;
}
#tvModeInner .clock-time .ck-hm{display:inline-block;min-width:2.1ch;text-align:center;}
#tvModeInner .clock-time .ck-sep{display:inline-block;width:.5ch;text-align:center;}
#tvModeInner .clock-sec{
  font-size:clamp(12px,1.4vw,22px);font-weight:400;color:var(--muted);margin-left:1px;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;
}
#tvModeInner .clock-sec .ck-dtk{display:inline-block;min-width:2.1ch;text-align:center;}

/* LOGO — GOLDEN RATIO: tinggi logo ≈ tinggi blok teks (nama+subjudul) × φ(1.618) */
#tvModeInner .logo-wrap{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);margin-left:auto;flex-shrink:0;
}
#tvModeInner .logo-wrap img{
  height:clamp(48px,5.4vw,84px);width:auto;object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(107,127,92,0.55));flex-shrink:0;
}
#tvModeInner .school-name{
  /* nama = logo-height × golden-ratio ≈ font 1.45vw */
  font-size:clamp(13px,1.45vw,22px);font-weight:800;letter-spacing:-.3px;line-height:1.1;
  background:linear-gradient(90deg,#eef2ea 40%,var(--light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  white-space:nowrap;
}
#tvModeInner .school-sub{
  font-size:clamp(8px,0.75vw,11px);color:var(--muted2);margin-top:2px;letter-spacing:.4px;white-space:nowrap;
}

/* MAIN */
#tvModeInner main{
  flex:1;display:grid;
  grid-template-columns:1fr clamp(200px,20vw,310px);
  gap:clamp(8px,1vw,16px);min-height:0;
}
#tvModeInner .col-left{display:flex;flex-direction:column;gap:clamp(6px,0.7vw,10px);min-height:0;}

/* TOP BAR */
#tvModeInner .top-bar{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
#tvModeInner .tab-row{display:flex;align-items:center;gap:clamp(6px,0.8vw,10px);}
#tvModeInner .jenjang-tabs{
  display:flex;align-items:center;flex-wrap:wrap;gap:2px;
  background:rgba(255,255,255,.04);border:1px solid var(--glass-border);
  border-radius:clamp(6px,0.8vw,10px);padding:3px;
}
#tvModeInner .tab-btn{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(8px,0.8vw,11px);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted2);background:transparent;border:none;cursor:pointer;
  padding:clamp(3px,0.4vw,5px) clamp(8px,1vw,14px);border-radius:clamp(4px,0.6vw,7px);transition:all .2s;
}
#tvModeInner .tab-btn.active{background:var(--glass-card);color:var(--glow);border:1px solid var(--glass-border);}
#tvModeInner .panel-info{font-size:clamp(8px,0.8vw,11px);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);}
#tvModeInner .panel-info span{color:var(--glow);}
#tvModeInner .live-badge{
  display:flex;align-items:center;gap:clamp(4px,0.6vw,7px);
  background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.18);
  color:var(--green);padding:clamp(2px,0.3vw,4px) clamp(8px,1vw,12px);border-radius:50px;
  font-size:clamp(8px,0.8vw,11px);font-weight:600;letter-spacing:.4px;
}
#tvModeInner .live-dot{width:clamp(5px,0.5vw,7px);height:clamp(5px,0.5vw,7px);background:var(--green);border-radius:50%;animation:tv-pulse 1.5s ease-in-out infinite;flex-shrink:0;}
@keyframes tv-pulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}50%{box-shadow:0 0 0 5px rgba(74,222,128,0)}}

/* ROTATE BAR */
#tvModeInner .rotate-bar-wrap{height:2px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;flex-shrink:0;}
#tvModeInner .rotate-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--light));border-radius:2px;width:0%;transition:width .1s linear;}

/* PANELS */
#tvModeInner .jenjang-panel{display:none;flex:1;min-height:0;}
#tvModeInner .jenjang-panel.active{display:block;}

/* KELAS GRID */
#tvModeInner .kelas-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(5px,0.7vw,10px);height:100%;
}
#tvModeInner .kelas-card{
  position:relative;overflow:hidden;border-radius:clamp(8px,1vw,14px);
  padding:clamp(8px,1vw,13px) clamp(8px,1vw,14px);
  display:flex;flex-direction:column;justify-content:space-between;
}
#tvModeInner .kelas-card::before{
  content:'';position:absolute;inset:0;background:var(--glass-card);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-radius:inherit;z-index:0;
}
#tvModeInner .kelas-card>*{position:relative;z-index:1;}
#tvModeInner .kc-accent{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:14px 0 0 14px;background:var(--kc-color,var(--accent));z-index:3;}
#tvModeInner .kc-glow{display:none;}
#tvModeInner .kc-border{position:absolute;inset:0;border-radius:inherit;border:1px solid var(--glass-border);pointer-events:none;z-index:2;}
#tvModeInner .kelas-card.empty::before{background:rgba(255,255,255,.02);}
#tvModeInner .kelas-card.empty .kc-border{border-style:dashed;opacity:.35;}
#tvModeInner .kc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(3px,0.4vw,6px);}
#tvModeInner .kc-id{font-size:clamp(7px,0.7vw,10px);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);}
#tvModeInner .kc-dot{width:clamp(5px,0.5vw,7px);height:clamp(5px,0.5vw,7px);border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);}
#tvModeInner .kc-dot.idle{background:var(--muted);box-shadow:none;}
#tvModeInner .kc-mapel{font-size:clamp(10px,1vw,14px);font-weight:800;line-height:1.2;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:clamp(2px,0.3vw,3px);}
#tvModeInner .kc-mapel.empty{color:var(--muted);font-weight:400;font-size:clamp(8px,0.8vw,12px);}
#tvModeInner .kc-guru{font-size:clamp(7px,0.7vw,10px);color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:clamp(4px,0.6vw,8px);}
#tvModeInner .kc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(4px,0.6vw,8px);}
#tvModeInner .kc-time{font-size:clamp(8px,0.85vw,11px);font-weight:700;color:var(--glow);letter-spacing:-.2px;flex-shrink:0;}
#tvModeInner .kc-time.empty{color:var(--muted);font-weight:400;}
#tvModeInner .kc-prog{flex:1;}
#tvModeInner .kc-prog-track{height:clamp(2px,0.3vw,4px);background:rgba(255,255,255,.07);border-radius:10px;overflow:hidden;}
#tvModeInner .kc-prog-fill{height:100%;border-radius:10px;}
#tvModeInner .kc-prog-label{font-size:clamp(6px,0.65vw,9px);color:var(--muted);margin-top:clamp(2px,0.25vw,3px);}
#tvModeInner .kc-ruang{font-size:clamp(6px,0.65vw,9px);color:var(--muted);margin-top:2px;}

/* RIGHT SIDEBAR */
#tvModeInner .col-right{display:flex;flex-direction:column;gap:clamp(8px,1vw,12px);min-height:0;}
#tvModeInner .sidebar-box{padding:clamp(8px,1vw,14px);flex-shrink:0;}
#tvModeInner .sidebar-title{
  font-size:clamp(7px,0.7vw,9px);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:clamp(6px,0.8vw,11px);
  display:flex;align-items:center;gap:8px;
}
#tvModeInner .sidebar-title::after{content:'';flex:1;height:1px;background:var(--glass-border);}

/* UPCOMING — jam besar + mapel + guru */
#tvModeInner .upcoming-list{display:flex;flex-direction:column;gap:clamp(4px,0.5vw,7px);}
#tvModeInner .upcoming-item{
  display:flex;align-items:flex-start;gap:clamp(6px,0.8vw,9px);
  padding:clamp(6px,0.7vw,9px) clamp(6px,0.8vw,10px);
  background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:clamp(6px,0.7vw,9px);
}
#tvModeInner .upd{width:clamp(5px,0.5vw,7px);height:clamp(5px,0.5vw,7px);border-radius:50%;flex-shrink:0;margin-top:5px;}
#tvModeInner .up-time-badge{
  font-size:clamp(12px,1.2vw,16px);font-weight:800;color:var(--glow);
  letter-spacing:-.3px;line-height:1;flex-shrink:0;
  min-width:clamp(38px,3.8vw,52px);
  padding-top:1px;
}
#tvModeInner .up-body{flex:1;min-width:0;}
#tvModeInner .up-subj{
  font-size:clamp(10px,0.95vw,13px);font-weight:700;color:var(--text);
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#tvModeInner .up-guru{
  font-size:clamp(8px,0.75vw,10px);color:var(--muted2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#tvModeInner .tv-fixed-countdown-wrap{
  grid-column:1/-1;
  min-height:clamp(190px,28vh,320px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,2vw,28px);
}
#tvModeInner .tv-fixed-countdown-card{
  width:min(620px,92%);
  text-align:center;
  padding:clamp(28px,4vw,54px) clamp(30px,5vw,72px);
  border-radius:20px;
  border:1.5px solid rgba(251,191,36,0.28);
  background:linear-gradient(135deg,rgba(250,204,21,0.08),rgba(16,185,129,0.07));
  box-shadow:0 0 42px rgba(250,204,21,0.08);
}
#tvModeInner .tv-fixed-countdown-card.green{
  border-color:rgba(52,211,153,0.32);
  background:linear-gradient(135deg,rgba(16,185,129,0.09),rgba(56,189,248,0.06));
  box-shadow:0 0 42px rgba(16,185,129,0.08);
}
#tvModeInner .tv-fixed-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:clamp(7px,0.9vw,12px);
  min-height:clamp(34px,4vw,58px);
  margin-bottom:clamp(10px,1.2vw,16px);
  font-size:clamp(30px,3.6vw,52px);
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
#tvModeInner .tv-fixed-icon.jelajah{
  font-size:clamp(28px,3.3vw,48px);
}
#tvModeInner .tv-fixed-icon span{
  display:inline-block;
  line-height:1;
}
#tvModeInner .tv-fixed-kicker{
  font-size:clamp(10px,1vw,14px);
  font-weight:800;
  letter-spacing:.22em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:8px;
}
#tvModeInner .tv-fixed-countdown-card.green .tv-fixed-kicker{color:var(--green);}
#tvModeInner .tv-fixed-title{
  font-size:clamp(22px,3vw,42px);
  font-weight:900;
  color:#f9fafb;
  line-height:1.1;
  letter-spacing:.03em;
  text-transform:uppercase;
}
#tvModeInner .tv-fixed-sub{
  color:var(--muted);
  font-size:clamp(10px,1vw,14px);
  margin-top:8px;
  margin-bottom:clamp(18px,2.4vw,30px);
}
#tvModeInner .tv-fixed-count{
  font-size:clamp(44px,7vw,94px);
  font-weight:950;
  line-height:1;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  text-shadow:0 0 26px rgba(251,191,36,0.42);
}
#tvModeInner .tv-fixed-countdown-card.green .tv-fixed-count{
  color:var(--green);
  text-shadow:0 0 26px rgba(52,211,153,0.38);
}
#tvModeInner .tv-fixed-hint{
  color:var(--muted);
  font-size:clamp(9px,.85vw,12px);
  margin-top:10px;
  margin-bottom:18px;
}
#tvModeInner .tv-fixed-track{
  height:7px;
  border-radius:99px;
  overflow:hidden;
  background:rgba(255,255,255,0.1);
}
#tvModeInner .tv-fixed-fill{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--green));
  transition:width .9s ease;
}
#tvModeInner .tv-fixed-countdown-card.green .tv-fixed-fill{
  background:linear-gradient(90deg,var(--green),var(--light));
}

/* PENGUMUMAN */
#tvModeInner .ann-box{flex:1;min-height:0;display:flex;flex-direction:column;}
#tvModeInner .ann-content{
  background:rgba(255,255,255,.03);border:1px solid var(--glass-border);
  border-radius:clamp(6px,0.7vw,9px);padding:clamp(8px,1vw,12px);
  flex:1;display:flex;flex-direction:column;gap:clamp(6px,0.7vw,10px);
}
#tvModeInner .ann-header{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-shrink:0;}
#tvModeInner .ann-icon{
  width:clamp(20px,2vw,28px);height:clamp(20px,2vw,28px);
  background:rgba(107,127,92,.2);border:1px solid rgba(139,153,124,.25);
  border-radius:clamp(5px,0.6vw,8px);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#tvModeInner .ann-icon svg{width:clamp(10px,1vw,14px);height:clamp(10px,1vw,14px);}
#tvModeInner .ann-edit-btn{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(7px,0.7vw,9px);font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted2);background:rgba(255,255,255,.04);border:1px solid var(--glass-border);
  border-radius:clamp(4px,0.5vw,6px);padding:clamp(2px,0.3vw,4px) clamp(6px,0.8vw,10px);
  cursor:pointer;transition:all .2s;flex-shrink:0;margin-left:auto;
}
#tvModeInner .ann-edit-btn:hover{background:rgba(139,153,124,.2);color:var(--glow);border-color:rgba(139,153,124,.4);}
#tvModeInner .ann-text{
  font-size:clamp(9px,0.9vw,12px);color:var(--muted2);line-height:1.6;
  flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;
}
#tvModeInner .ann-input{
  display:none;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(9px,0.9vw,12px);color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid rgba(139,153,124,.35);
  border-radius:clamp(4px,0.5vw,7px);padding:clamp(5px,0.6vw,8px);
  resize:none;flex:1;min-height:clamp(50px,6vh,90px);outline:none;line-height:1.5;
}
#tvModeInner .ann-input:focus{border-color:rgba(139,153,124,.6);background:rgba(255,255,255,.09);}
#tvModeInner .ann-actions{display:none;gap:clamp(4px,0.5vw,6px);flex-shrink:0;}
#tvModeInner .ann-btn-save,
#tvModeInner .ann-btn-cancel{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(7px,0.75vw,10px);font-weight:700;letter-spacing:.5px;
  border-radius:clamp(4px,0.5vw,6px);padding:clamp(3px,0.4vw,5px) clamp(8px,1vw,12px);
  cursor:pointer;border:none;transition:all .2s;flex:1;
}
#tvModeInner .ann-btn-save{background:rgba(107,127,92,.35);color:var(--glow);border:1px solid rgba(139,153,124,.4);}
#tvModeInner .ann-btn-save:hover{background:rgba(107,127,92,.55);}
#tvModeInner .ann-btn-cancel{background:rgba(255,255,255,.05);color:var(--muted2);border:1px solid var(--glass-border);}
#tvModeInner .ann-btn-cancel:hover{background:rgba(255,255,255,.1);}
#tvModeInner .ann-chip{
  display:inline-block;background:rgba(107,127,92,.15);border:1px solid rgba(139,153,124,.25);
  color:var(--glow);font-size:clamp(7px,0.7vw,10px);font-weight:600;padding:2px 8px;border-radius:5px;flex-shrink:0;
}

/* FOOTER */
#tvModeInner footer{
  padding-top:clamp(6px,0.8vw,12px);border-top:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
#tvModeInner .ticker-wrap{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,black 7%,black 93%,transparent 100%);}
#tvModeInner .ticker{display:flex;gap:60px;animation:tv-ticker 35s linear infinite;white-space:nowrap;}
#tvModeInner .ticker span{font-size:clamp(8px,0.8vw,11px);color:var(--muted);letter-spacing:.4px;flex-shrink:0;}
#tvModeInner .ticker span strong{color:var(--muted2);font-weight:500;}
@keyframes tv-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#tvModeInner .footer-right{font-size:clamp(7px,0.7vw,10px);color:var(--muted);margin-left:clamp(10px,1.5vw,18px);flex-shrink:0;}