/* PANTAU - "Redaksi": tinta & newsprint. Prinsip: sudut siku, garis rambut sebagai pemisah (bukan kotak melayang), serif untuk judul berita, monospace untuk metadata. Tanpa gradien, tanpa glow, tanpa emoji - hierarki dibentuk oleh tipografi dan garis. */ :root { --bg: #0E1114; --panel: #161A1F; --panel2: #1B2027; --rule: #262B32; /* garis rambut */ --rule2: #343A42; /* garis tegas */ --text: #E8E6E1; /* putih kertas, sedikit hangat */ --muted: #8B8F96; --faint: #5C6169; --accent: #C8442E; /* merah masthead */ --accent-soft: #E0654C; --st-peristiwa: #7A8FA6; --st-respons: #B8892B; --st-dampak: #C8442E; --st-lainnya: #5C6169; --on-accent: #14100F; /* teks di atas blok aksen */ --serif: "Noto Serif", Georgia, "Liberation Serif", serif; --mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --sans: "Noto Sans", system-ui, sans-serif; } /* ---------- mode terang: newsprint di atas kertas ---------- Cuma SATU blok - skrip inline di menstempel data-theme dari preferensi tersimpan atau OS, jadi tak perlu menduplikasi palet ke dalam @media (prefers-color-scheme). Semua pasangan warna di bawah sudah diukur rasio kontrasnya (teks 16.1:1, redup 6.6:1, aksen 6.0:1, tahap ≥5.7:1). */ :root[data-theme="light"] { --bg: #F5F4F1; /* kertas */ --panel: #FFFFFF; --panel2: #EFEDE8; --rule: #DDDAD4; --rule2: #B4AFA6; --text: #1A1815; /* tinta */ --muted: #5A5751; --faint: #7D7972; --accent: #A8341F; --accent-soft: #8C2917; --st-peristiwa: #4A6076; --st-respons: #7E5A12; --st-dampak: #A8341F; --st-lainnya: #7D7972; --on-accent: #FFFFFF; } :root[data-theme="light"] .q:focus, :root[data-theme="light"] .row2 input:focus, :root[data-theme="light"] .row2 select:focus { border-color: var(--accent); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* Label metadata: mono, kapital, dilebarkan - dipakai berulang di seluruh UI */ .k, .card .meta, .stage-count, .chip, .preset-label, .row2 label, .mode-btn, .primary, .ai, .md, .ghost, .foot { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; } /* ---------- masthead ---------- */ .topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 28px 12px; border-bottom: 2px solid var(--rule2); background: var(--bg); /* sengaja TIDAK sticky: masthead itu kepala halaman, bukan bilah alat - dan versi lengket sebelumnya menutupi judul laporan saat digulir. */ } .brand { display: flex; align-items: baseline; gap: 14px; } .logo { display: none; } /* wordmark menggantikan emoji */ .brand h1 { font-family: var(--serif); font-size: 25px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .tagline { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border-left: 1px solid var(--rule2); padding-left: 14px; } .mast-tools { display: flex; align-items: stretch; gap: 8px; } .keybox { display: flex; gap: 0; } .keybox input { width: 280px; padding: 7px 11px; background: var(--panel); color: var(--text); border: 1px solid var(--rule); border-right: none; border-radius: 0; font-family: var(--mono); font-size: 12px; } .keybox input:focus { outline: none; border-color: var(--accent); } .ghost { background: var(--panel); border: 1px solid var(--rule); color: var(--muted); cursor: pointer; padding: 0 11px; font-size: 11px; } .ghost:hover { color: var(--accent); border-color: var(--accent); } /* Sakelar tema: satu segmen per tema, yang aktif diblok warna aksen. */ .themeswitch { display: flex; gap: 2px; padding: 2px; background: var(--panel); border: 1px solid var(--rule); } .themeswitch button { display: grid; place-items: center; /* min-height memberi tinggi minimum saat sakelar ini satu-satunya isi masthead (kotak API key disembunyikan kalau auth mati); align-self membuatnya ikut memanjang saat kotak itu muncul. */ width: 30px; min-height: 28px; padding: 0; align-self: stretch; background: none; border: none; color: var(--faint); cursor: pointer; transition: color .15s ease, background-color .15s ease; } .themeswitch button:hover { color: var(--text); } .themeswitch button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .themeswitch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } .themeswitch svg { width: 15px; height: 15px; display: block; } @media (prefers-reduced-motion: reduce) { .themeswitch button { transition: none; } } /* ---------- main ---------- */ /* Lebarnya naik dari 900px karena sekarang menampung dua kolom. Kolom utama tetap ~900px, jadi panjang baris teks berita tidak berubah sama sekali. */ main { flex: 1; width: 100%; max-width: 1264px; margin: 0 auto; padding: 26px 28px 56px; } .layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 34px; align-items: start; } /* minmax(0, 1fr) bukan 1fr: tanpa itu kolom grid punya lebar minimum sebesar isinya, dan satu judul panjang tanpa spasi melebarkan seluruh halaman sampai muncul gulir horizontal. */ .kolom-utama { min-width: 0; } .kolom-sisi { position: sticky; top: 20px; } @media (max-width: 1080px) { /* Satu kolom. Panel samping jatuh ke bawah mengikuti urutan DOM, dan sticky-nya dilepas supaya tidak mengambang di tengah daftar berita. */ .layout { grid-template-columns: 1fr; gap: 0; } .kolom-sisi { position: static; margin-top: 30px; } } /* ---------- panel pencarian ---------- */ .searchcard { background: var(--panel); border-top: 1px solid var(--rule2); border-bottom: 1px solid var(--rule2); padding: 18px 20px 20px; } .mode-switch { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--rule); } .mode-btn { padding: 7px 16px 9px; font-size: 11px; font-weight: 500; background: none; color: var(--faint); border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .mode-btn:hover { color: var(--muted); } .mode-btn.active { color: var(--text); border-bottom-color: var(--accent); } .row1 { display: flex; gap: 8px; } .q { flex: 1; padding: 12px 14px; font-family: var(--serif); font-size: 17px; background: var(--bg); color: var(--text); border: 1px solid var(--rule); border-radius: 0; } .q::placeholder { color: var(--faint); font-style: italic; } .q:focus { outline: none; border-color: var(--accent); } .primary, .ai, .md { padding: 12px 18px; font-size: 11px; font-weight: 500; border-radius: 0; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } .primary { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); } .primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); } .primary:disabled { opacity: .45; cursor: wait; } .ai { background: transparent; color: var(--text); border: 1px solid var(--rule2); } .ai:hover { border-color: var(--accent); color: var(--accent); } .md { background: transparent; color: var(--muted); border: 1px solid var(--rule); } .md:hover { border-color: var(--muted); color: var(--text); } .row2 { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; align-items: flex-end; } .row2 label { display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: var(--faint); } .row2 input, .row2 select { padding: 7px 9px; background: var(--bg); color: var(--text); border: 1px solid var(--rule); border-radius: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: none; } .row2 input:focus, .row2 select:focus { outline: none; border-color: var(--accent); } .checklabel { flex-direction: row !important; align-items: center; gap: 7px !important; cursor: pointer; color: var(--muted) !important; padding-bottom: 7px; } .checklabel input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; } .row3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); } .preset-label { font-size: 10px; color: var(--faint); margin-right: 6px; } .chip { padding: 5px 11px; font-size: 10px; border-radius: 0; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--rule); } .chip:hover { color: var(--text); border-color: var(--muted); } .chip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .chip:disabled { cursor: default; border-style: dashed; } .chip.more { border-style: dashed; color: var(--faint); } .chip.more:hover { color: var(--accent); border-color: var(--accent); } /* ---------- baris status ---------- */ .status { margin: 22px 0 0; padding: 10px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .status b { color: var(--text); font-weight: 500; } .status .hl { color: var(--accent); } /* ---------- yang sedang ramai (kolom kanan) ---------- */ .trending { border: 1px solid var(--rule); background: var(--panel); padding: 14px 4px 6px; } .trending h2 { font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: .04em; padding: 0 10px; } .trending-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-top: 4px; padding: 0 10px; line-height: 1.5; } .trending ol { list-style: none; margin-top: 8px; } .trend { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; gap: 0 9px; width: 100%; text-align: left; padding: 8px 10px; background: none; border: none; border-top: 1px solid var(--rule); cursor: pointer; transition: background-color .12s ease; } .trending li:first-child .trend { border-top: none; } .trend:hover { background: var(--bg); } .trend:hover .trend-topik { color: var(--accent); } .trend:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .trend-rank { grid-row: 1 / 3; align-self: center; font-family: var(--mono); font-size: 14px; color: var(--faint); } /* Tanpa text-transform: ejaannya sudah dikembalikan server dari judul asli, jadi akronim tetap kapital ("HIV AIDS", bukan "Hiv Aids"). overflow-wrap: nama panjang di kolom 288px harus patah, bukan melebarkan grid dan menyeret gulir horizontal ke seluruh halaman. */ .trend-topik { font-family: var(--serif); font-size: 14px; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; } .trend-meta { font-family: var(--mono); font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-top: 2px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; } /* filter tahap duduk tepat di atas daftar tahap (di dalam #results), bukan di puncak halaman - di mode Analisis AI laporannya ~3000px dan filter jadi jauh */ .stage-filter { margin: 26px 0 4px; padding-top: 16px; border-top: 1px solid var(--rule); } /* ---------- hasil ---------- */ .results { display: flex; flex-direction: column; margin-top: 6px; } /* ---------- tahap alur ---------- */ .stage { margin-top: 30px; } .stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--stage-color, var(--rule2)); } .stage-head h2 { font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stage-color, var(--text)); } .stage-count { font-size: 10px; color: var(--faint); white-space: nowrap; } .stage-cards { display: flex; flex-direction: column; } /* ---------- kartu berita: baris berpemisah, bukan kotak melayang ---------- */ .card { padding: 13px 0; border-bottom: 1px solid var(--rule); transition: none; } .card:hover { background: var(--panel); } .card:hover .meta .outlet { color: var(--accent); } .card .meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; font-size: 10px; color: var(--faint); } .badge { /* outlet: label teks, bukan pil warna */ color: var(--muted); font-weight: 500; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-sosial { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--st-respons); border: 1px solid var(--st-respons); padding: 1px 5px; white-space: nowrap; } /* post medsos ditandai garis tepi: klaim belum terverifikasi, bukan berita redaksi */ .card.sosial { border-left: 2px solid var(--st-respons); padding-left: 11px; } .card.sosial h3 { font-family: var(--sans); font-size: 14.5px; } .card .time { color: var(--faint); } .card .time .rel { color: var(--faint); margin-left: 8px; } .card h3 { font-family: var(--serif); font-size: 16.5px; font-weight: 400; line-height: 1.42; } .card h3 a { color: var(--text); text-decoration: none; } .card h3 a:hover { color: var(--accent); } .card .snippet { color: var(--muted); font-size: 13px; margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--rule); } @media (max-width: 560px) { .card { padding: 12px 0; } } /* ---------- laporan AI ---------- */ .ai-report { background: var(--panel); border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); padding: 22px 24px 24px; margin-bottom: 8px; } .ai-report h2 { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; } .ai-report .ai-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; } .ai-report h3 { font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin: 20px 0 8px; } .ai-report h3:first-of-type { margin-top: 0; } .ai-report p { font-size: 14.5px; line-height: 1.72; margin-bottom: 10px; } .ai-report p.warn { font-family: var(--mono); font-size: 11px; line-height: 1.6; text-transform: none; letter-spacing: 0; color: var(--st-respons); border-left: 2px solid var(--st-respons); padding: 8px 0 8px 12px; margin-top: 14px; } .ai-report ol, .ai-report ul { margin: 0 0 4px 18px; } .ai-report li { font-size: 14px; margin: 7px 0; line-height: 1.65; } .ai-report li b { color: var(--accent); font-weight: 500; } .ai-report ul.sumber { list-style: none; margin-left: 0; } .ai-report ul.sumber li { font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--rule); } .ai-report ul.sumber li a { color: var(--text); text-decoration: none; } .ai-report ul.sumber li a:hover { color: var(--accent); } .ai-report .src { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .ai-report pre.raw { background: var(--bg); border: 1px solid var(--rule); border-radius: 0; padding: 12px; font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; color: var(--muted); margin-top: 12px; } /* ---------- halaman analisis satu berita ---------- */ .detail { max-width: 720px; margin: 0 auto; padding-top: 4px; } .detail-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--rule2); margin-bottom: 18px; } .detail-buka { text-decoration: none; display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .detail-meta { display: flex; align-items: center; gap: 10px; font-size: 10px; margin-bottom: 8px; } .detail-meta .time { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .detail-judul { font-family: var(--serif); font-size: 25px; font-weight: 700; line-height: 1.32; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); } .detail-body h3 { font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin: 22px 0 8px; } .detail-body h3:first-child { margin-top: 0; } .detail-body p { font-size: 15px; line-height: 1.75; margin-bottom: 10px; } .detail-body ul { margin: 0 0 4px 18px; } .detail-body li { font-size: 14.5px; line-height: 1.7; margin: 8px 0; } .detail-body p.warn { font-family: var(--mono); font-size: 11px; line-height: 1.6; text-transform: none; letter-spacing: 0; color: var(--st-respons); border-left: 2px solid var(--st-respons); padding: 8px 0 8px 12px; margin-top: 18px; } .detail-sumber { font-family: var(--mono); font-size: 10px !important; color: var(--faint); margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule); word-break: break-all; } .detail-sumber a { color: var(--faint); } .detail-sumber a:hover { color: var(--accent); } @media (max-width: 560px) { .detail-judul { font-size: 20px; } .detail-nav { flex-wrap: wrap; } } /* ---------- sentimen ---------- */ .sentimen { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .sen-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border: 1px solid currentColor; white-space: nowrap; } .sen-positif { color: #4E8C6A; } .sen-negatif { color: var(--st-dampak); } .sen-netral { color: var(--st-peristiwa); } .sen-alasan { font-size: 13.5px; color: var(--muted); } /* Batang distribusi di mode Sentimen. Lebar tiap ruas = flex:, jadi proporsinya dihitung browser tanpa perlu persen di JS. */ .sen-bar { display: flex; height: 8px; margin: 12px 0 8px; gap: 2px; } .sen-seg { background: currentColor; min-width: 3px; } .sen-angka { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; } .sen-angka b { font-weight: 600; margin-right: 2px; } .sen-gagal { color: var(--st-dampak); } /* ---------- komentar di halaman detail ---------- */ .komentar-list { list-style: none; padding: 0; margin: 14px 0 0; } .komentar { padding: 14px 0; border-top: 1px solid var(--rule); } .komentar:first-child { border-top: none; } .komentar-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; } .komentar-penulis { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .komentar-suka { font-family: var(--mono); font-size: 11px; color: var(--faint); } /* komentar ditampilkan UTUH: memotongnya merusak sentimen yang justru dinilai */ .komentar-teks { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; } .komentar-alasan { margin: 6px 0 0; font-size: 12.5px; color: var(--faint); font-style: italic; } /* keluar dari font mono .status: ini kalimat penjelas, bukan angka */ .sen-catatan { display: block; margin-top: 8px; max-width: 68ch; font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; line-height: 1.5; color: var(--faint); } /* Label sentimen di kartu berita: lebih rapat dari versi halaman detail */ .card .sentimen { margin-top: 10px; gap: 9px; } /* ---------- memuat / kosong / galat ---------- */ .loading { text-align: center; margin-top: 60px; color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .spinner { width: 26px; height: 26px; margin: 0 auto 16px; border: 1px solid var(--rule2); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .empty { text-align: center; margin-top: 64px; color: var(--faint); } .empty-icon { display: none; } .empty p { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .error { margin-top: 22px; padding: 12px 14px; background: transparent; border-left: 2px solid var(--accent); border-radius: 0; color: var(--accent-soft); font-family: var(--mono); font-size: 12px; } .hidden { display: none !important; } /* ---------- kaki ---------- */ .foot { text-align: center; padding: 20px; color: var(--faint); font-size: 9.5px; border-top: 1px solid var(--rule); } /* ---------- responsif ---------- */ @media (max-width: 720px) { .topbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 10px; } .brand h1 { font-size: 21px; } .tagline { border-left: none; padding-left: 0; } .mast-tools { justify-content: flex-end; } .keybox { flex: 1; } .keybox input { width: 100%; } main { padding: 18px 16px 44px; } .searchcard { padding: 14px 14px 16px; } /* Kotak pencarian penuh selebar layar, tombolnya BERBAGI satu baris di bawah. Sebelumnya tiap tombol memakan satu baris sendiri, sehingga panel pencarian menghabiskan seluruh layar pertama sebelum satu berita pun terlihat. */ .row1 { flex-wrap: wrap; } .q { flex: 1 1 100%; font-size: 16px; } /* 16px: di bawah itu iOS auto-zoom */ .primary, .ai, .md { flex: 1 1 0; min-width: 0; padding: 12px 8px; } /* dua kolom, bukan satu kendali per baris */ .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; } .checklabel { grid-column: 1 / -1; padding-bottom: 0; } /* :not(checkbox) penting. Tanpa itu kotak centang "Frasa persis" ikut melar 100%, sehingga tulisannya terdorong ke tepi kanan, terpisah jauh dari kotaknya, lalu pecah jadi dua baris. Terlihat di ketiga tema. */ .row2 input:not([type="checkbox"]), .row2 select { width: 100%; } } /* Sasaran sentuh. Dipicu oleh JENIS PENUNJUK, bukan lebar layar - laptop layar sentuh ikut kebagian, dan jendela desktop yang disempitkan tidak. Terukur sebelumnya: chip 25px, tombol tema 16px, checkbox 14px; panduan aksesibilitas minta minimal 24px. */ @media (pointer: coarse) { .chip { padding: 9px 13px; } .ghost { padding: 0 14px; min-height: 34px; } .themeswitch button { width: 38px; min-height: 34px; } .checklabel input { width: 20px; height: 20px; } /* seluruh baris label jadi sasaran sentuh, bukan cuma kotak 20px-nya */ .checklabel { min-height: 36px; align-items: center; } .mode-btn { padding: 11px 18px 13px; } .card h3 a { display: inline-block; padding: 2px 0; } } /* Chip platform ikut membungkus seperti .row3 induknya. Tanpa flex sendiri, span pembungkusnya jadi satu blok kaku dan chipnya meluber di layar sempit. */ #platformChips { display: flex; flex-wrap: wrap; gap: 6px; } /* ═══════════════════════════════════════════════════════════════════════ TEMA "SIBER" · data-theme="siber" Diadaptasi dari github.com/fsrsr/PANTAU-- ("Dark Cyber Intelligence"): navy pekat, aksen biru-sian-ungu, panel kaca, sudut membulat, cahaya halus. Diadaptasi, BUKAN disalin. Empat hal dari sumbernya sengaja tidak dibawa karena justru itu yang membuat asetnya bertabrakan: 1. .theme-toggle di sana position:absolute top/right, jadi menimpa judul dan tagline begitu layar menyempit. Di sini tombolnya tetap ikut flex .topbar. 2. -webkit-line-clamp:2 pada judul kartu memotong judul berita Indonesia yang memang panjang, diam-diam. Judul di sini tetap utuh. 3. white-space:nowrap + ellipsis pada URL: URL Google News ~200 karakter, jadi yang tersisa cuma titik-titik. PANTAU memang tidak menampilkan URL mentah. 4. @import Google Fonts: menarik font dari jaringan tiap muat. Alat lokal tidak boleh bergantung pada itu, dan tumpukan font di :root sudah cukup. Semua pasangan warna diperiksa kontrasnya terhadap --bg / --panel. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="siber"] { --bg: #0A0E1A; --panel: #111827; --panel2: #1A2035; --rule: #1F2A44; /* garis rambut, kebiruan */ --rule2: #2C3B5E; /* garis tegas */ --text: #F1F5F9; --muted: #94A3B8; --faint: #64748B; --accent: #3B82F6; --accent-soft: #60A5FA; --st-peristiwa: #60A5FA; --st-respons: #F59E0B; --st-dampak: #F87171; --st-lainnya: #64748B; --on-accent: #0A0E1A; /* Satu font untuk semua peran: Fira Code. Seluruh UI lewat tiga token ini, jadi menyamakan ketiganya cukup untuk mengubah tema ini saja, tanpa menyentuh terang/gelap. Serif "koran" memang bertabrakan dengan bahasa panel intelijen di sini. Dimuat dari sistem, tanpa @import: alat lokal tidak boleh menarik font dari jaringan tiap muat. Kalau Fira Code tidak terpasang, tumpukan di bawahnya tetap menghasilkan monospace yang layak. */ --serif: "Fira Code", "JetBrains Mono", ui-monospace, monospace; --mono: "Fira Code", "JetBrains Mono", ui-monospace, monospace; --sans: "Fira Code", "JetBrains Mono", ui-monospace, monospace; --sb-radius: 12px; --sb-radius-sm: 8px; --sb-glass: rgba(17, 24, 39, .72); --sb-gradient: linear-gradient(135deg, #3B82F6 0%, #06B6D4 55%, #8B5CF6 100%); --sb-glow: 0 0 24px rgba(59, 130, 246, .18); } /* Latar ambien. z-index -1, BUKAN 0 seperti di sumbernya: di sana ia hanya tertutup karena seluruh aplikasi dibungkus satu #root ber-z-index 1. PANTAU tidak punya pembungkus itu, jadi nilai 0 akan menutupi isi halaman. */ :root[data-theme="siber"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, .10) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 85% 100%, rgba(139, 92, 246, .08) 0%, transparent 55%); } :root[data-theme="siber"] .topbar { border-bottom: 1px solid var(--rule2); background: linear-gradient(180deg, rgba(26, 32, 53, .55) 0%, transparent 100%); } :root[data-theme="siber"] .brand h1 { background: var(--sb-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: .02em; } /* Wordmark bergradien kehilangan warna kalau -webkit-text-fill-color tidak didukung; tagline tetap solid supaya identitasnya tidak ikut hilang. */ :root[data-theme="siber"] .tagline { color: var(--muted); } /* Margin HORIZONTAL harus nol.
sudah memberi padding 28px, jadi margin samping di sini membuat panel pencarian masuk 28px lebih dalam daripada daftar berita di bawahnya. Terlihat jelas sebagai dua tepi kiri yang tidak sejajar. */ :root[data-theme="siber"] .searchcard { background: var(--sb-glass); border: 1px solid var(--rule); border-radius: var(--sb-radius); margin: 0 0 4px; box-shadow: var(--sb-glow); backdrop-filter: blur(10px); } :root[data-theme="siber"] .q, :root[data-theme="siber"] .row2 input, :root[data-theme="siber"] .row2 select, :root[data-theme="siber"] .keybox input { border-radius: var(--sb-radius-sm); background: rgba(10, 14, 26, .6); } :root[data-theme="siber"] .q { border-right: 1px solid var(--rule); } :root[data-theme="siber"] .primary, :root[data-theme="siber"] .ai, :root[data-theme="siber"] .md, :root[data-theme="siber"] .ghost, :root[data-theme="siber"] .themeswitch, :root[data-theme="siber"] .chip { border-radius: var(--sb-radius-sm); } :root[data-theme="siber"] .themeswitch { background: rgba(10, 14, 26, .6); } :root[data-theme="siber"] .themeswitch button { border-radius: 6px; } :root[data-theme="siber"] .themeswitch button[aria-pressed="true"] { background: var(--sb-gradient); color: #fff; box-shadow: var(--sb-glow); } :root[data-theme="siber"] .primary { background: var(--sb-gradient); border-color: transparent; color: #fff; box-shadow: var(--sb-glow); } :root[data-theme="siber"] .primary:hover { filter: brightness(1.12); } :root[data-theme="siber"] .chip.active { border-color: var(--accent); color: var(--accent-soft); background: rgba(59, 130, 246, .12); } :root[data-theme="siber"] .trending { background: var(--sb-glass); border: 1px solid var(--rule); border-radius: var(--sb-radius); padding: 16px 18px; backdrop-filter: blur(10px); } :root[data-theme="siber"] .trending h2 { background: var(--sb-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="siber"] .trend { border-radius: var(--sb-radius-sm); } :root[data-theme="siber"] .trend:hover { background: rgba(59, 130, 246, .1); } :root[data-theme="siber"] .trend-rank { color: var(--accent); } :root[data-theme="siber"] .mode-btn.active { color: var(--text); border-bottom-color: var(--accent); text-shadow: 0 0 12px rgba(59, 130, 246, .5); } /* Kartu jadi panel terpisah, bukan baris berpemisah garis. Padding kiri diberi ke SEMUA kartu supaya kartu sosial (yang punya garis tepi) tidak bergeser 4px dari tetangganya, hal yang terlihat jelas saat daftarnya bercampur. */ :root[data-theme="siber"] .card { border: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: var(--sb-radius); background: var(--sb-glass); padding: 14px 16px; margin-bottom: 10px; transition: border-color .2s ease, box-shadow .2s ease; } :root[data-theme="siber"] .card:hover { background: var(--sb-glass); border-color: rgba(59, 130, 246, .45); box-shadow: var(--sb-glow); } :root[data-theme="siber"] .card.sosial { border-left: 3px solid var(--st-respons); padding-left: 14px; } :root[data-theme="siber"] .card h3 { font-weight: 600; font-size: 15.5px; } :root[data-theme="siber"] .detail, :root[data-theme="siber"] .ai-report, :root[data-theme="siber"] .komentar { border-radius: var(--sb-radius); } :root[data-theme="siber"] .ai-report { background: var(--sb-glass); border: 1px solid var(--rule); box-shadow: var(--sb-glow); } :root[data-theme="siber"] .sen-bar { border-radius: 999px; overflow: hidden; } :root[data-theme="siber"] .logo { display: none; } /* Sentuhan kaca dimatikan saat pengguna meminta gerakan/efek minimum. backdrop-filter mahal di GPU terintegrasi dan bikin gulir tersendat. */ @media (prefers-reduced-motion: reduce) { :root[data-theme="siber"] .searchcard { backdrop-filter: none; } :root[data-theme="siber"] .card { transition: none; } }