/* =========================================================
   KOCIPEDIA.ID · MEJA SIARAN (hero beranda)
   Dulu berdiri sendiri sebagai opsi tampilan. Sekarang jadi hero
   beranda, jadi seluruh gayanya dilipat ke sistem desain situs:
   token warna dan huruf diambil dari base.css, bukan dari palet
   sendiri, supaya satu situs cuma punya satu keluarga huruf.

   Elemen tanda tangan: MEJA. Adegannya foto asli dari character
   sheet, jadi satu benda tidak bisa dibesarkan sendiri. Gantinya
   seluruh ruangan mendorong maju ke benda itu, tirai gelap menutup
   sisanya, lingkaran cahaya menyala, dan lambang unitnya muncul.
   ========================================================= */

.studio{position:relative;z-index:2;background:var(--navy-deep);color:var(--on-dark);
  padding-block:clamp(26px,4vw,48px) clamp(30px,4vw,52px)}
.studio>.wrap{position:relative;z-index:1}
.studio .judul .kicker{color:var(--orange)}
.studio .judul .h1{margin-top:12px;color:#fff;max-width:17ch;
  font-size:clamp(2.3rem,5.2vw,4.1rem)}
.studio .judul .h1 em{font-style:normal;color:var(--orange)}
.studio .judul .lede{margin-top:16px;max-width:52ch;color:var(--on-dark-2)}
.studio .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------- meja ---------- */
.meja{position:relative;margin-top:clamp(16px,2.4vw,28px);max-width:1000px}
.adegan{position:relative;overflow:hidden;border-radius:14px 14px 0 0;
  background:#0B1226;line-height:0}
.adegan img{display:block;width:100%;height:auto;
  transform-origin:var(--fx,50%) var(--fy,50%);
  transition:transform .65s var(--ease)}
.meja[data-fokus] .adegan img{transform:scale(1.16)}

.tirai{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease);
  background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),
    rgba(14,23,49,0) 0 var(--r,15%), rgba(14,23,49,.78) calc(var(--r,15%) + 22%))}
.meja[data-fokus] .tirai{opacity:1}

.titik-lapis{position:absolute;inset:0;z-index:4}
.titik{position:absolute;left:var(--x);top:var(--y);width:var(--d,20%);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;cursor:pointer}
.titik::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(242,117,33,0);box-shadow:0 0 0 0 rgba(242,117,33,0);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
/* enam pintu harus kelihatan ADA sebelum disorot satu per satu, tapi
   cincinnya cuma muncul saat kursor sudah masuk adegan */
.meja:hover .titik::after{border-color:rgba(242,117,33,.32)}
.meja[data-fokus] .titik::after{border-color:rgba(242,117,33,0)}
.titik.aktif::after,.meja[data-fokus] .titik.aktif::after{
  border-color:rgba(242,117,33,.9);box-shadow:0 0 34px 6px rgba(242,117,33,.28)}

.titik .lambang{position:absolute;left:50%;top:50%;width:var(--lw,58%);height:auto;
  transform:translate(-50%,-50%) scale(.72);opacity:0;pointer-events:none;
  filter:drop-shadow(0 6px 18px rgba(6,10,26,.8));
  transition:opacity .38s var(--ease),transform .38s var(--ease)}
.titik.aktif .lambang{opacity:1;transform:translate(-50%,-50%) scale(1)}

.titik .ket{position:absolute;top:50%;width:max-content;max-width:min(240px,42vw);
  pointer-events:none;opacity:0;background:rgba(11,18,40,.95);
  border:1px solid rgba(242,117,33,.5);border-radius:11px;padding:11px 14px;
  box-shadow:0 18px 40px rgba(4,8,22,.55);transform:translateY(-44%);
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.titik.kanan .ket{left:calc(100% + 10px)}
.titik.kiri  .ket{right:calc(100% + 10px)}
.titik.aktif .ket{opacity:1;transform:translateY(-50%)}
.titik .ket b{display:block;font-family:var(--fd);font-weight:800;font-size:16px;
  line-height:1.12;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.titik .ket em{display:block;margin-top:5px;font-style:normal;font-family:var(--fm);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}

/* ---------- panel lower-third ---------- */
.siaran{position:relative;z-index:3;max-width:1000px;border-radius:0 0 14px 14px;
  border-top:3px solid var(--orange);background:rgba(14,23,49,.92);
  backdrop-filter:blur(7px);display:grid;grid-template-columns:auto 1fr auto;
  gap:8px 26px;align-items:center;padding:16px clamp(16px,2.4vw,26px)}
.siaran .nomor{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,3.6vw,2.8rem);
  line-height:.8;color:var(--orange);font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.siaran .mahkota{width:26px;height:15px;display:block}
.siaran .isi{min-width:0}
.siaran .isi b{display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1;color:#fff;
  text-transform:uppercase;letter-spacing:.02em}
.siaran .isi span{display:block;margin-top:6px;font-size:14.6px;color:var(--on-dark-2)}
.siaran .pergi{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark);display:inline-flex;align-items:center;
  gap:9px;border:1px solid var(--line-dark);border-radius:99px;padding:10px 17px;
  white-space:nowrap;transition:border-color .26s var(--ease),
  background-color .26s var(--ease),gap .26s var(--ease)}
.siaran .pergi:hover{border-color:var(--orange);background:rgba(242,117,33,.13);gap:14px}
@media (max-width:720px){
  .siaran{grid-template-columns:auto 1fr;padding-block:14px}
  .siaran .pergi{grid-column:1/-1;justify-self:start;margin-top:4px}
}

/* ---------- kredit media ---------- */
.kredit{margin-top:16px;font-family:var(--fm);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-2)}
.kredit b{font-weight:500;color:var(--on-dark)}

/* ---------- layar sentuh tidak punya kursor ---------- */
.sentuh{display:none;margin-top:18px;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sentuh a{border:1px solid var(--line-dark);border-radius:11px;padding:13px 15px;
  display:flex;flex-direction:column;gap:3px;background:rgba(27,41,88,.5)}
.sentuh a b{font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:.02em;
  text-transform:uppercase;color:#fff}
.sentuh a span{font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-2)}
@media (hover:none){
  .sentuh{display:grid}
  .titik{display:none}
}
@media (prefers-reduced-motion:reduce){
  .adegan img,.tirai,.titik::after,.titik .lambang,.titik .ket{transition:none}
  .meja[data-fokus] .adegan img{transform:none}
}