/* ============================================================
   PHOENIX NEWS — sistem desain
   Dipisah dari index.html supaya bisa di-cache browser & lebih mudah dirawat.
   Font: Plus Jakarta Sans (teks) + Cinzel (wordmark) — self-host /fonts/.

   Tiga zona di desktop (sidebar · konten · rail), satu kolom + tab bawah di HP.
   ============================================================ */

:root{
  /* --- warna --- */
  --bg:#060911; --bg2:#0A0F1C; --panel:#0B1120;
  --hair:rgba(255,255,255,.055);      /* garis paling halus */
  --edge:rgba(255,255,255,.10);       /* garis terlihat */
  --edge2:rgba(255,255,255,.17);      /* garis menonjol */
  --s1:rgba(255,255,255,.038);        /* permukaan kartu */
  --s2:rgba(255,255,255,.065);        /* permukaan terangkat */
  --silver:#EDF0F7; --text2:#C2CADB; --muted:#8E98AE; --muted2:#5A6580;
  --blue:#5B86FF; --blue2:#7BA3FF; --gold:#FFD56A; --gold2:#F5B740;
  --green:#2FE3A0; --red:#FF6B85;

  /* --- bentuk --- */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;
  --sh1:0 2px 10px rgba(0,0,0,.30);
  --sh2:0 12px 34px rgba(0,0,0,.42);
  --sh3:0 28px 70px rgba(0,0,0,.55);

  /* --- gerak --- */
  --e1:cubic-bezier(.22,1,.36,1);     /* keluar, terasa ringan */
  --e2:cubic-bezier(.4,0,.2,1);       /* standar */
  --t1:.16s; --t2:.26s; --t3:.42s;

  --navh:60px;
  --safeb:env(safe-area-inset-bottom,0px);
  --safet:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--silver);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.5; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;letter-spacing:inherit}
input{font:inherit}
::selection{background:rgba(255,213,106,.26)}

/* Gambar muncul dengan lembut, bukan muncul mendadak saat selesai dimuat. */
img.rdy{animation:imgIn .5s var(--e1) both}
@keyframes imgIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

/* ============================================================
   Kerangka tab
   ============================================================ */
.pane{display:none;position:fixed;inset:0 0 calc(var(--navh) + var(--safeb)) 0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pane.on{display:block}
.pane::-webkit-scrollbar{width:8px}
.pane::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:4px}
.pane::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}
#paneFx{overflow:hidden}
#fxFrame{width:100%;height:100%;border:0;display:block;background:var(--bg)}

/* ============================================================
   Nav bawah (HP)
   ============================================================ */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--navh) + var(--safeb));padding-bottom:var(--safeb);
  display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(7,11,20,.9);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid var(--hair);
}
.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--muted2);transition:color var(--t1) var(--e2);position:relative}
.nav button .ic{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t2) var(--e1)}
.nav button .lb{font-size:10.5px;font-weight:600;letter-spacing:.01em}
.nav button.on{color:var(--gold)}
.nav button.on .ic{transform:translateY(-1px) scale(1.06)}
.nav button:active .ic{transform:scale(.9)}
/* Garis penanda tab aktif yang bergeser, bukan muncul-hilang. */
.nav::before{content:'';position:absolute;top:0;height:2px;width:26px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  left:calc((100% / 3) * var(--navi,0) + (100% / 6) - 13px);
  transition:left var(--t3) var(--e1);box-shadow:0 0 14px rgba(255,213,106,.5)}

/* ============================================================
   Header
   ============================================================ */
.hd{position:sticky;top:0;z-index:30;padding-top:var(--safet);
  background:rgba(6,9,17,.72);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color var(--t2),background var(--t2)}
.hd.stuck{border-bottom-color:var(--hair);background:rgba(6,9,17,.88)}
.hd-in{display:flex;align-items:center;gap:10px;padding:13px 16px 10px}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0}
.brand img{width:28px;height:28px;border-radius:8px}
.brand b{font-family:'Cinzel',Georgia,serif;font-size:15px;font-weight:600;letter-spacing:.09em}
.brand b i{font-style:normal;color:var(--gold)}
.hd-sp{flex:1;min-width:0}

.iconbtn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--edge);background:var(--s1);transition:all var(--t1) var(--e2)}
.iconbtn svg{width:17px;height:17px;stroke:var(--text2);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t1)}
.iconbtn:hover{background:var(--s2);border-color:var(--edge2)}
.iconbtn:hover svg{stroke:var(--silver)}
.iconbtn:active{transform:scale(.92)}
.iconbtn.spin svg{animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.srch{padding:0 16px 10px;display:none}
.srch.on{display:block;animation:drop .28s var(--e1) both}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}
.srch-in{display:flex;align-items:center;gap:10px;background:var(--s1);
  border:1px solid var(--edge);border-radius:var(--r-md);padding:10px 13px;
  transition:border-color var(--t1),background var(--t1)}
.srch-in:focus-within{border-color:rgba(255,213,106,.45);background:var(--s2)}
.srch-in svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;flex-shrink:0}
.srch-in input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--silver);font-size:14px}
.srch-in input::placeholder{color:var(--muted2)}

/* ============================================================
   Ticker harga (marquee)
   ============================================================ */
.tkr{display:none;align-items:center;padding:0;margin-bottom:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.tkr.on{display:flex}
.tkr-live{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;
  letter-spacing:.13em;color:var(--muted);flex-shrink:0;padding:10px 13px 10px 16px;
  position:relative;z-index:2;background:inherit}
.tkr-live i{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(47,227,160,.5);animation:tkp 2s infinite}
@keyframes tkp{0%{box-shadow:0 0 0 0 rgba(47,227,160,.45)}
  70%{box-shadow:0 0 0 7px rgba(47,227,160,0)}100%{box-shadow:0 0 0 0 rgba(47,227,160,0)}}
.tkr-vp{flex:1;min-width:0;overflow:hidden;position:relative}
.tkr-vp::before,.tkr-vp::after{content:'';position:absolute;top:0;bottom:0;width:30px;z-index:2;pointer-events:none}
.tkr-vp::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.tkr-vp::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.tkr-tr{display:flex;width:max-content;animation:tkm var(--tkd,40s) linear infinite}
.tkr:hover .tkr-tr{animation-play-state:paused}
/* Digeser sejauh LEBAR SATU SALINAN (px), bukan -50%: dengan -50% jumlah
   salinan terkunci di dua, dan kalau isinya lebih pendek dari layar ujung
   kanan jadi kosong. Lihat tkFit() di index.html. */
@keyframes tkm{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--tkw,50%)))}}
.tkr-half{display:flex;gap:26px;padding:10px 26px 10px 0}
.tk{display:flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0}
.tk b{color:var(--muted);font-weight:600;font-size:10.5px;letter-spacing:.06em}
.tk .px{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;color:var(--silver);font-weight:500;font-variant-numeric:tabular-nums}
.tk .d{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.tk .d.up{color:var(--green)} .tk .d.dn{color:var(--red)}
.tk.flash .px{animation:tkf .7s var(--e2)}
@keyframes tkf{0%{color:var(--gold)}100%{color:var(--silver)}}
@media (prefers-reduced-motion:reduce){
  .tkr-tr{animation:none!important}
  .tkr-vp{overflow-x:auto;scrollbar-width:none}
  .tkr-vp::-webkit-scrollbar{display:none}
}

/* ============================================================
   Chip kategori
   ============================================================ */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 13px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:8px 14px;
  border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;
  border:1px solid var(--edge);color:var(--muted);background:var(--s1);
  transition:all var(--t2) var(--e1)}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--cc,var(--muted2));
  flex-shrink:0;transition:all var(--t2)}
.chip .n{font-size:10.5px;opacity:.55;font-weight:600;font-variant-numeric:tabular-nums}
.chip:hover{color:var(--text2);border-color:var(--edge2);background:var(--s2)}
.chip.on{background:linear-gradient(135deg,var(--gold),var(--gold2));border-color:transparent;
  color:#1A1206;font-weight:700;box-shadow:0 5px 18px rgba(255,213,106,.26)}
.chip.on i{background:rgba(26,18,6,.55);transform:scale(.8)}
.chip.on .n{opacity:.6}
.chip:active{transform:scale(.95)}

/* ============================================================
   Badge kategori
   ============================================================ */
.tag{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;
  letter-spacing:.07em;padding:4px 8px;border-radius:6px;text-transform:uppercase;white-space:nowrap}
/* "BARU" untuk berita yang benar-benar baru terbit. */
.tag.nu{background:rgba(47,227,160,.15);color:var(--green);gap:5px}
.tag.nu::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);
  animation:nup 1.8s infinite}
@keyframes nup{0%,100%{opacity:1}50%{opacity:.3}}

/* Lencana sumber: logo asli media, dengan inisial berwarna sebagai cadangan
   bila berkas logo tak ada. Logo dilapis di ATAS inisial — kalau gambarnya
   gagal dimuat, elemennya dibuang dan inisial yang tampil. */
.srcav{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;flex-shrink:0;
  font-size:8.5px;font-weight:700;color:#fff;letter-spacing:.02em;position:relative;overflow:hidden}
.srcav img,.rd-av img,.cov .cv-av img,.ph-lg img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#fff;border-radius:inherit}
/* Latar putih dipakai karena favicon media dirancang untuk tab browser terang:
   yang berlatar solid menutupi putihnya, yang transparan tetap terbaca. */
.srcav img{padding:1.5px}
.rd-av,.cov .cv-av{position:relative;overflow:hidden}
.rd-av img{padding:5px} .cov .cv-av img{padding:4px}

/* ============================================================
   Hero
   ============================================================ */
.hero{margin:12px 16px 4px;position:relative;overflow:hidden;border-radius:var(--r-xl);
  box-shadow:var(--sh2);border:1px solid var(--hair)}
.hero-tr{display:flex;transition:transform .5s var(--e1)}
.hero-s{flex:0 0 100%;position:relative;height:245px;background:var(--panel);cursor:pointer;overflow:hidden}
.hero-s img,.hero-s .ph{width:100%;height:100%;object-fit:cover}
/* Zoom sangat pelan pada slide aktif — memberi kesan hidup tanpa mengganggu. */
.hero-s.act img{animation:kb 9s var(--e2) both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-s .ov{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,9,17,.28) 0%,rgba(6,9,17,0) 34%,rgba(6,9,17,.72) 70%,rgba(6,9,17,.96) 100%)}
.hero-s .tx{position:absolute;left:0;right:0;bottom:0;padding:16px 17px 32px}
.hero-s h2{margin:8px 0 0;font-size:19px;line-height:1.28;font-weight:700;letter-spacing:-.028em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-s .mt{font-size:11.5px;color:var(--text2);display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:500}
.hero-s.act .tx>*{animation:hUp .55s var(--e1) both}
.hero-s.act .tx>*:nth-child(2){animation-delay:.07s}
@keyframes hUp{from{opacity:0;transform:translateY(10px)}}

/* Titik = bilah yang terisi sesuai sisa waktu slide. */
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:5px;z-index:2}
.dots i{width:20px;height:3px;border-radius:2px;background:rgba(255,255,255,.26);
  overflow:hidden;transition:width var(--t3) var(--e1)}
.dots i.on{width:30px}
.dots i b{display:block;height:100%;width:0;background:var(--gold);border-radius:2px}
.dots i.on b{animation:dfill var(--hdur,5.2s) linear both}
@keyframes dfill{to{width:100%}}

.hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border-radius:50%;display:none;place-items:center;z-index:3;
  background:rgba(6,9,17,.5);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:all var(--t2) var(--e2)}
.hero:hover .hero-nav{opacity:1}
.hero-nav svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-nav.pv{left:14px}.hero-nav.nx{right:14px}
.hero-nav:hover{background:rgba(6,9,17,.82);transform:translateY(-50%) scale(1.08)}

/* ============================================================
   Judul seksi
   ============================================================ */
.sec-h,.rail-h{display:flex;align-items:center;gap:9px;margin:22px 0 12px}
.sec-h b,.rail-h b{font-size:16px;font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:7px}
.sec-h .n,.rail-h .n{font-size:11px;color:var(--muted2);font-weight:600;
  padding:3px 8px;border-radius:999px;background:var(--s1);border:1px solid var(--hair)}
.rail-h{margin:22px 16px 12px}
/* Bilah aksen kecil di kiri judul. */
.sec-h b::before,.rail-h b::before{content:'';width:3px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--gold2))}

/* ============================================================
   Rel "Sedang Ramai"
   ============================================================ */
.rail{display:flex;gap:11px;overflow-x:auto;padding:0 16px 8px;scrollbar-width:none;
  scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{display:none}
.mini{flex:0 0 224px;height:136px;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:var(--panel);cursor:pointer;border:1px solid var(--hair);scroll-snap-align:start;
  transition:transform var(--t2) var(--e1),border-color var(--t2)}
.mini img,.mini .ph{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e1)}
.mini:hover{transform:translateY(-3px);border-color:var(--edge2)}
.mini:hover img{transform:scale(1.07)}
.mini .ov{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,9,17,.06) 24%,rgba(6,9,17,.9) 96%)}
.mini .tx{position:absolute;left:0;right:0;bottom:0;padding:10px 12px}
.mini h5{margin:5px 0 0;font-size:12.5px;line-height:1.34;font-weight:600;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini .src{font-size:10px;color:var(--text2);font-weight:600;display:flex;align-items:center;gap:6px}

/* ============================================================
   Kartu berita
   ============================================================ */
.sec{padding:4px 16px 0}
.feed{display:block}

/* muncul berurutan saat daftar dirender */
.rise{animation:rise .5s var(--e1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
  .rise,.hero-s.act .tx>*,.hero-s.act img{animation:none!important}
}

.card{display:block;width:100%;text-align:left;background:var(--s1);border:1px solid var(--hair);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:13px;cursor:pointer;
  transition:transform var(--t2) var(--e1),border-color var(--t2),background var(--t2)}
.card:hover{border-color:var(--edge2);background:var(--s2)}
.card:active{transform:scale(.99)}
.card .thw{position:relative;overflow:hidden}
.card .th,.card .thw .ph{width:100%;height:186px;object-fit:cover;background:var(--panel);
  transition:transform .65s var(--e1)}
.card:hover .th{transform:scale(1.045)}
.card .thw .tag{position:absolute;top:11px;left:11px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card .bd{padding:13px 15px 14px}
.card h4{margin:0 0 7px;font-size:16px;line-height:1.35;font-weight:700;letter-spacing:-.026em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card p{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--muted);font-weight:400;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.rowc{display:grid;grid-template-columns:minmax(0,1fr) 98px;gap:13px;width:100%;text-align:left;
  padding:13px 0;border-bottom:1px solid var(--hair);cursor:pointer;transition:opacity var(--t1)}
.rowc:active{opacity:.7}
.rowc .rb{min-width:0;display:flex;flex-direction:column}
.rowc .tags{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.rowc h4{margin:0 0 7px;font-size:14.5px;line-height:1.38;font-weight:600;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rowc .rt{width:98px;height:98px;border-radius:var(--r-md);overflow:hidden;background:var(--panel);
  align-self:center;border:1px solid var(--hair)}
.rowc .rt img,.rowc .rt .ph{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e1)}
.rowc:hover .rt img{transform:scale(1.06)}

/* Sudah dibaca: diredupkan + centang kecil. Ditandai di localStorage. */
.card.seen h4,.rowc.seen h4{color:var(--muted)}
.card.seen .thw,.rowc.seen .rt{opacity:.55}
.seen .meta::after{content:'✓ dibaca';color:var(--muted2);font-size:10.5px;font-weight:600}

.meta{margin-top:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;
  color:var(--muted2);flex-wrap:wrap;font-weight:500}
.meta b{color:var(--text2);font-weight:600}
/* Kartu tanpa gambar: alih-alih huruf polos, tampilkan logo media + namanya.
   Sebagian feed memang tak menyertakan gambar, jadi keadaan ini harus tetap
   terlihat disengaja, bukan seperti gambar yang gagal dimuat. */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.2);font-size:22px;
  position:relative;overflow:hidden}
.ph::after{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 40%,rgba(255,255,255,.07),transparent 70%)}
.ph-lg{width:46px;height:46px;border-radius:13px;position:relative;overflow:hidden;flex-shrink:0;
  box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:1}
.ph-lg img{padding:6px}
.ph-nm{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.42);z-index:1;max-width:82%;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nama media pada petak HANYA ditampilkan bila petaknya berdiri sendiri
   (kartu besar & baris kompak). Di hero dan rel, judul berita menumpuk di
   atas petak — nama media di tengah akan bertabrakan dengan judulnya. */
.rowc .rt .ph{gap:0} .rowc .rt .ph-nm{display:none}
.rowc .rt .ph-lg{width:38px;height:38px;border-radius:11px}
.srcav .ph-nm{display:none}
.mini .ph-nm,.hero-s .ph-nm{display:none}
/* Logo digeser naik supaya tetap terlihat di atas kabut gradien. */
.mini .ph,.hero-s .ph{justify-content:flex-start;padding-top:26px}
.mini .ph-lg{width:40px;height:40px;border-radius:12px}
.hero-s .ph{padding-top:52px}
.hero-s .ph-lg{width:62px;height:62px;border-radius:17px}

.more{display:block;width:100%;padding:14px;border-radius:var(--r-md);border:1px solid var(--edge);
  background:var(--s1);font-size:13.5px;font-weight:600;color:var(--text2);margin:16px 0 18px;
  text-align:center;transition:all var(--t1) var(--e2)}
.more:hover{background:var(--s2);border-color:var(--edge2);color:var(--silver)}
.more:active{transform:scale(.985)}

/* ============================================================
   Keadaan kosong / memuat
   ============================================================ */
.empty{text-align:center;padding:56px 24px;color:var(--muted)}
.empty svg{width:44px;height:44px;stroke:var(--muted2);fill:none;stroke-width:1.3;margin:0 auto 14px;
  stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.empty b{display:block;font-size:15.5px;color:var(--silver);margin-bottom:6px;font-weight:600}
.empty span{font-size:13px;line-height:1.6}

.skl{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-lg);
  position:relative;overflow:hidden}
.skl::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  animation:sh 1.4s var(--e2) infinite}
@keyframes sh{to{transform:translateX(100%)}}
.skl.hero-sk{height:245px;margin:12px 16px 4px;border-radius:var(--r-xl)}
.skl.row-sk{height:98px;margin:13px 0;border-radius:var(--r-md)}

.upd{text-align:center;font-size:11.5px;color:var(--muted2);padding:6px 16px 18px;font-weight:500}
.disc{margin:0 16px 22px;padding:14px 15px;border:1px solid var(--hair);border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(255,213,106,.05),rgba(255,213,106,.015));
  font-size:11.5px;line-height:1.65;color:var(--muted)}
.disc b{color:var(--gold);font-weight:600}

/* Tombol kembali ke atas (HP) */
.top{position:fixed;right:16px;bottom:calc(var(--navh) + var(--safeb) + 16px);z-index:55;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,17,32,.92);border:1px solid var(--edge2);box-shadow:var(--sh2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;transform:translateY(10px) scale(.9);
  transition:all var(--t2) var(--e1)}
.top.on{opacity:1;pointer-events:auto;transform:none}
.top svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.top:active{transform:scale(.9)}

/* ============================================================
   Halaman baca
   ============================================================ */
.rd{position:fixed;inset:0;z-index:70;transform:translateX(102%);
  transition:transform var(--t3) var(--e1)}
.rd.on{transform:translateX(0)}
.rd-panel{width:100%;height:100%;background:var(--bg);display:flex;flex-direction:column;position:relative}
/* Bilah kemajuan baca di paling atas panel. */
.rd-prog{position:absolute;top:0;left:0;height:2.5px;width:0;z-index:6;
  background:linear-gradient(90deg,var(--gold2),var(--gold));box-shadow:0 0 12px rgba(255,213,106,.55)}
.rd-sc{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(92px + var(--safeb))}
.rd-sc::-webkit-scrollbar{width:8px}
.rd-sc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:4px}
.rd-hero{position:relative;height:275px;background:var(--panel);overflow:hidden}
.rd-hero img,.rd-hero .ph{width:100%;height:100%;object-fit:cover}
.rd-hero .ov{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(6,9,17,.5) 0%,rgba(6,9,17,0) 32%,rgba(6,9,17,.4) 70%,var(--bg) 100%)}
.rd-back{position:absolute;top:calc(var(--safet) + 13px);left:15px;width:39px;height:39px;
  border-radius:var(--r-md);display:grid;place-items:center;z-index:4;
  background:rgba(6,9,17,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);transition:all var(--t1) var(--e2)}
.rd-back:hover{background:rgba(6,9,17,.8)}
.rd-back:active{transform:scale(.9)}
.rd-back svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.rd-share{left:auto;right:15px}
.rd-share.done{border-color:var(--gold);background:rgba(255,213,106,.16)}
.rd-share.done svg{stroke:var(--gold)}

.rd-bd{padding:6px 19px 0;margin-top:-38px;position:relative;z-index:2}
.rd-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.rd-bd h1{margin:0 0 15px;font-size:23px;line-height:1.26;font-weight:700;letter-spacing:-.035em}
.rd-src{display:flex;align-items:center;gap:12px;padding:13px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rd-av{width:42px;height:42px;border-radius:var(--r-md);flex-shrink:0;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:#fff;box-shadow:var(--sh1)}
.rd-si{flex:1;min-width:0}
.rd-si b{display:block;font-size:13.5px;font-weight:600}
.rd-si span{font-size:11.5px;color:var(--muted2);font-weight:500}
.rd-lead{font-size:16px;line-height:1.75;color:var(--text2);margin:18px 0 8px;font-weight:400}
.rd-note{font-size:11.5px;color:var(--muted2);line-height:1.6;margin:0 0 20px;
  padding-left:11px;border-left:2px solid var(--edge)}
.rd-sec{margin:24px 0 0}
.rd-sec>b{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;
  letter-spacing:-.02em;margin-bottom:11px}
.rd-sec>b::before{content:'';width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--gold2))}
.cov{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 13px;
  border:1px solid var(--hair);border-radius:var(--r-md);background:var(--s1);margin-bottom:8px;
  cursor:pointer;transition:all var(--t1) var(--e2)}
.cov:hover{background:var(--s2);border-color:var(--edge2);transform:translateX(2px)}
.cov .cv-av{width:35px;height:35px;border-radius:var(--r-sm);flex-shrink:0;display:grid;
  place-items:center;font-size:12px;font-weight:700;color:#fff}
.cov .cv-b{flex:1;min-width:0}
.cov .cv-b b{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-bottom:2px}
.cov .cv-b span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.8px;line-height:1.4;font-weight:600;color:var(--silver)}
.cov svg{width:15px;height:15px;stroke:var(--muted2);fill:none;stroke-width:2.2;flex-shrink:0}

.rd-cta{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:14px 16px calc(15px + var(--safeb));
  background:linear-gradient(180deg,rgba(6,9,17,0),var(--bg) 42%)}
.rd-go{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px;
  border-radius:var(--r-md);background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1A1206;font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(255,213,106,.28);transition:all var(--t1) var(--e2)}
.rd-go:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(255,213,106,.36)}
.rd-go:active{transform:scale(.985)}
.rd-go svg{width:16px;height:16px;stroke:#1A1206;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rd-cta small{display:block;text-align:center;font-size:10.5px;color:var(--muted2);margin-top:8px;font-weight:500}

/* ============================================================
   Profil
   ============================================================ */
.pf-top{padding:calc(var(--safet) + 28px) 18px 26px;
  background:radial-gradient(120% 90% at 20% 0%,rgba(91,134,255,.16),transparent 60%),
             radial-gradient(90% 70% at 90% 10%,rgba(255,213,106,.09),transparent 60%)}
.pf-id{display:flex;align-items:center;gap:15px;margin-bottom:19px}
.pf-av{width:64px;height:64px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--gold));font-size:23px;font-weight:700;
  color:#0A0E18;box-shadow:0 8px 26px rgba(91,134,255,.28)}
.pf-nm{min-width:0}
.pf-nm .hi{font-size:12px;color:var(--gold);font-weight:600;margin-bottom:3px;letter-spacing:.02em}
.pf-nm .nm{font-size:21px;font-weight:700;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-nm .em{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.btn{padding:13px;border-radius:var(--r-md);font-size:14px;font-weight:600;text-align:center;
  border:1px solid transparent;transition:all var(--t1) var(--e2)}
.btn.pri{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1A1206;
  box-shadow:0 6px 20px rgba(255,213,106,.22)}
.btn.pri:hover{transform:translateY(-1px)}
.btn.gho{border-color:var(--edge2);color:var(--text2);background:var(--s1)}
.btn.gho:hover{background:var(--s2);color:var(--silver)}
.btn:active{transform:scale(.97)}
.btn.blk{grid-column:1/-1}
.btn[disabled]{opacity:.55;pointer-events:none}
.pf-note{margin:13px 0 0;font-size:11.5px;line-height:1.65;color:var(--muted);text-align:center}
.pf-note b{color:var(--text2);font-weight:600}

.grp{margin:20px 16px 0}
.grp .lbl{font-size:10.5px;font-weight:700;letter-spacing:.11em;color:var(--muted2);
  text-transform:uppercase;margin:0 4px 9px}
.grp .box{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
.row{display:flex;align-items:center;gap:13px;padding:14px 15px;border-bottom:1px solid var(--hair);
  width:100%;text-align:left;transition:background var(--t1)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--s2)}
.row svg.li{width:19px;height:19px;stroke:var(--muted);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.row .tx{flex:1;min-width:0;font-size:14px;font-weight:600}
.row .tx small{display:block;font-size:11.5px;font-weight:400;color:var(--muted2);margin-top:2px}
.row .ar{width:16px;height:16px;stroke:var(--muted2);fill:none;stroke-width:2.2;flex-shrink:0;
  transition:transform var(--t1)}
.row:hover .ar{transform:translateX(2px)}
.row .val{font-size:12px;color:var(--muted2);flex-shrink:0;font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot.ok{background:var(--green);box-shadow:0 0 8px rgba(47,227,160,.5)}
.dot.no{background:var(--red)}
.ver{text-align:center;padding:28px 20px 32px;font-size:11.5px;color:var(--muted2);line-height:1.75}
.ver b{display:block;color:var(--muted);font-weight:600;margin-top:4px}

/* ============================================================
   Modal auth
   ============================================================ */
.mask{position:fixed;inset:0;z-index:90;background:rgba(3,6,12,.74);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:flex-end}
.mask.on{display:flex;animation:fadeIn var(--t2) var(--e2) both}
@keyframes fadeIn{from{opacity:0}}
.sheet{width:100%;max-height:92vh;overflow-y:auto;background:var(--panel);
  border:1px solid var(--edge);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:9px 19px calc(26px + var(--safeb));box-shadow:var(--sh3);
  animation:up .34s var(--e1) both}
@keyframes up{from{transform:translateY(34px);opacity:.4}}
.grab{width:38px;height:4px;border-radius:3px;background:var(--edge2);margin:0 auto 17px}
.sheet h3{margin:0 0 5px;font-size:21px;font-weight:700;letter-spacing:-.035em}
.sheet .sub{margin:0 0 19px;font-size:13px;color:var(--muted);line-height:1.6}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:7px}
.fld input{width:100%;min-width:0;padding:13px 14px;border-radius:var(--r-md);
  background:rgba(255,255,255,.045);border:1px solid var(--edge);color:var(--silver);outline:none;
  transition:border-color var(--t1),background var(--t1)}
.fld input:focus{border-color:var(--blue);background:rgba(91,134,255,.07)}
.fld .hint{font-size:11px;color:var(--muted2);margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{padding:12px 14px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.55;
  margin-bottom:13px;display:none}
.msg.on{display:block;animation:drop .24s var(--e1) both}
.msg.err{background:rgba(255,107,133,.11);color:var(--red);border:1px solid rgba(255,107,133,.24)}
.msg.ok{background:rgba(47,227,160,.1);color:var(--green);border:1px solid rgba(47,227,160,.22)}
.swap{text-align:center;font-size:13px;color:var(--muted);padding:17px 0 4px;cursor:pointer}
.swap b{color:var(--gold);font-weight:700}

/* ============================================================
   Sidebar (desktop)
   ============================================================ */
.sb{display:none;position:fixed;left:0;top:0;bottom:0;width:256px;z-index:65;flex-direction:column;
  background:linear-gradient(180deg,rgba(10,15,28,.9),rgba(6,9,17,.9));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-right:1px solid var(--hair);padding:26px 14px 18px;overflow-y:auto}
.sb::-webkit-scrollbar{width:0}
.sb-brand{display:flex;align-items:center;gap:11px;padding:2px 10px 22px}
.sb-brand img{width:32px;height:32px;border-radius:9px}
.sb-brand b{font-family:'Cinzel',Georgia,serif;font-size:15px;font-weight:600;letter-spacing:.1em}
.sb-brand b i{font-style:normal;color:var(--gold)}
.sb-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;
  border-radius:var(--r-md);color:var(--muted);font-size:14px;font-weight:600;margin-bottom:3px;
  text-align:left;position:relative;transition:all var(--t1) var(--e2)}
.sb-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sb-item:hover{background:var(--s2);color:var(--silver)}
.sb-item.on{background:linear-gradient(90deg,rgba(255,213,106,.13),rgba(255,213,106,.04));color:var(--gold)}
.sb-item.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:19px;border-radius:0 2px 2px 0;background:var(--gold);box-shadow:0 0 12px rgba(255,213,106,.55)}
.sb-div{height:1px;background:var(--hair);margin:14px 6px}
.sb-lbl{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted2);
  text-transform:uppercase;padding:2px 13px 9px}
.sb-user{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:14px;margin-top:auto}
.sb-user .u1{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.sb-uav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(140deg,var(--blue),var(--gold));font-weight:700;font-size:14px;color:#0A0E18}
.sb-user b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.sb-user span{font-size:10.5px;color:var(--muted2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .btn{padding:9px;font-size:12.5px;border-radius:var(--r-sm)}
.sb-user .b2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sb-user .hint{font-size:11px;color:var(--muted);line-height:1.55;margin:0 0 10px}
.sb-foot{font-size:10px;color:var(--muted2);line-height:1.7;padding:15px 10px 0}

/* ============================================================
   Rail kanan (desktop)
   ============================================================ */
.nwrap{display:block}
.nside{display:none}
.ns-box{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-lg);padding:15px}
.ns-h{font-size:14px;font-weight:700;margin:0 0 12px;display:flex;gap:8px;align-items:center;letter-spacing:-.02em}
.nside .card{margin-bottom:0;background:rgba(255,255,255,.025)}
.nside .card .th,.nside .card .thw .ph{height:155px}
.nside .card h4{font-size:14.5px;-webkit-line-clamp:3}
.tr-row{display:flex;gap:11px;width:100%;text-align:left;padding:10px 0;
  border-bottom:1px solid var(--hair);cursor:pointer;align-items:flex-start;
  transition:opacity var(--t1)}
.tr-row:last-child{border-bottom:0;padding-bottom:2px}
.tr-row:first-of-type{padding-top:2px}
.tr-row:hover{opacity:.78}
.tr-n{font-size:16px;font-weight:700;width:22px;flex-shrink:0;line-height:1.3;
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tr-b{min-width:0}
.tr-b .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.8px;font-weight:600;line-height:1.42;color:var(--silver);letter-spacing:-.015em}
.tr-b small{display:block;font-size:10.5px;color:var(--muted2);margin-top:4px;font-weight:500}

/* ============================================================
   Tablet (kolom tengah)
   ============================================================ */
@media(min-width:720px) and (max-width:1079px){
  .pane,.rd-panel{max-width:660px;margin:0 auto;
    border-left:1px solid var(--hair);border-right:1px solid var(--hair)}
  .nav{max-width:660px;margin:0 auto}
  .sheet{max-width:520px;margin:0 auto 26px;border-radius:var(--r-xl)}
  .mask{align-items:center}
  .hero-s{height:310px}
  .hero-s h2{font-size:22px}
  .rd-hero{height:340px}
  .top{right:calc(50% - 330px + 16px)}
}

/* ============================================================
   Desktop
   ============================================================ */
@media(min-width:1080px){
  .nav,.top{display:none}
  .sb{display:flex}
  .pane{inset:0 0 0 256px}
  .hd{position:static;background:none;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hd-in{max-width:1200px;margin:0 auto;padding:28px 32px 4px;gap:14px}
  .hd-in .brand{display:none}
  #btnSearch{display:none}
  .srch{display:block!important;flex:1;min-width:0;padding:0}
  .srch-in{padding:12px 16px}
  /* 1136 = 1200 − (2×32) padding zona konten, supaya sejajar chips & feed */
  .tkr{max-width:1136px;margin:16px auto 0;padding:2px 18px;border:1px solid var(--hair);
    border-radius:var(--r-md);background:var(--s1);gap:22px}
  .tkr-vp::before{background:linear-gradient(90deg,#0E1421,transparent)}
  .tkr-vp::after{background:linear-gradient(270deg,#0E1421,transparent)}
  .chips{max-width:1200px;margin:0 auto;padding:16px 32px 6px;flex-wrap:wrap}
  .nwrap{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:30px;align-items:start;
    max-width:1200px;margin:0 auto;padding:4px 32px 48px}
  .nside{display:flex;flex-direction:column;gap:16px;position:sticky;top:24px}
  .hero{margin:16px 0 4px}
  .hero-s{height:400px}
  .hero-s .tx{padding:22px 24px 36px}
  .hero-s h2{font-size:25px;max-width:84%;letter-spacing:-.035em}
  .hero-nav{display:grid}
  .rail-h{margin:24px 0 12px}
  .rail{padding:0 0 8px}
  .mini{flex:0 0 248px;height:146px}
  .sec{padding:0}
  .feed{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .feed .card{margin-bottom:0}
  .feed .card .th,.feed .card .thw .ph{height:172px}
  .more{margin:20px 0 8px}
  .upd{padding:12px 0 6px}
  .disc{margin:16px 0 0}
  /* halaman baca = panel tengah dengan latar redup */
  .rd{background:rgba(3,6,12,.76);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transform:none;opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity var(--t2) var(--e2),visibility var(--t2)}
  .rd.on{opacity:1;pointer-events:auto;visibility:visible}
  .rd-panel{width:min(820px,94vw);height:94vh;margin:3vh auto;border-radius:var(--r-xl);
    border:1px solid var(--edge);overflow:hidden;box-shadow:var(--sh3)}
  .rd.on .rd-panel{animation:pop .34s var(--e1) both}
  @keyframes pop{from{transform:translateY(16px) scale(.985);opacity:.6}}
  .rd-hero{height:350px}
  .rd-bd{padding:6px 34px 0}
  .rd-bd h1{font-size:27px}
  .rd-lead{font-size:16.5px}
  #panePf .pf-top,#panePf .grp,#panePf .ver{max-width:700px;margin-left:auto;margin-right:auto}
  #panePf .grp{margin-top:20px}
  .sheet{max-width:520px;margin:0 auto;border-radius:var(--r-xl)}
  .mask{align-items:center}
}