/* =========================================================================== ui-fixes.css — perbaikan tata letak terukur. Dimuat PALING AKHIR di supaya menang cascade tanpa perlu `!important`. Setiap blok di bawah menyebutkan angka hasil pengukuran browser nyata (Chromium headless, reload penuh per lebar viewport) yang menjadi dasarnya. Hanya selektor yang benar-benar ada di index.html yang dipakai. =========================================================================== */ /* --------------------------------------------------------------------------- Tinggi bilah footer melayang, dipakai bersama oleh BUG 1 dan BUG 2. Aslinya tinggi .jbg-bejo-fixed-footer TIDAK tetap: 87px di 320-390, 67px di 582, 73px di 768-1440. Penyebabnya label "Link Alternatif" membungkus 1 atau 2 baris tergantung lebar, ditambah line-height body yang berubah di breakpoint 749px. Tinggi yang berubah-ubah membuat mustahil memesan ruang (BUG 2) atau menumpuk bottom-nav di atasnya (BUG 1) tanpa angka tebakan. Karena itu tinggi tautannya dikunci lebih dulu di blok BUG 3, sehingga satu variabel ini berlaku untuk semua lebar. --------------------------------------------------------------------------- */ :root { /* Tinggi nyata bilah footer, diukur di browser dan KONSTAN 320-1920. Nilainya 75px (bukan 78px seperti sebelum poles) karena border 2px dashed di keempat sisi diganti garis rambut 1px di sisi atas saja, sehingga tinggi kotak berkurang 3px. Angka ini dipakai bottom-nav dan padding-bottom body, jadi wajib ikut diperbarui setiap kali padding/border bilah berubah. */ --jbg-ff-h: 75px; /* jarak nafas antara konten terakhir / bottom-nav dengan bilah footer */ --jbg-ff-gap: 16px; } /* --------------------------------------------------------------------------- BUG 3 — hover footer memicu reflow global. fixed-footer.css memberi `a:hover { font-weight: bold }`. Bold melebarkan teks, "Link Alternatif" pindah dari 1 ke 2 baris (w 79.5 h 17 -> w 58.7 h 43), dan karena bilahnya position:fixed bottom:0 SELURUH bilah bergeser: footerY 827 -> 801, footerH 73 -> 99. Hover seharusnya tidak pernah mengubah metrik teks. Perbaikan akar masalah: afordans hover diganti dengan properti yang sama sekali tidak mempengaruhi kotak — garis bawah, warna latar, dan cincin. font-weight dikembalikan ke normal saat hover/fokus. Latar hover sengaja memakai ungu semi-transparan (bukan memutihkan) supaya kontras teks putih terhadap gradien ungu-hitam tidak turun. --------------------------------------------------------------------------- */ .jbg-bejo-fixed-footer a:hover, .jbg-bejo-fixed-footer a:focus-visible { font-weight: 400; text-decoration: none !important; background-color: rgba(var(--c-accent-rgb), .18); box-shadow: inset 0 0 0 1px rgba(199, 125, 255, .25); border-radius: 12px; transform: translateY(-2px); } /* Cincin fokus terpisah agar pengguna keyboard tetap punya jejak yang jelas. */ .jbg-bejo-fixed-footer a:focus-visible { outline: 2px solid var(--c-accent-light); outline-offset: -2px; } /* Tinggi tautan dikunci lewat min-height sehingga tinggi bilah KONSTAN dari 320 sampai 1920 (terverifikasi; sebelumnya 87 / 67 / 73px tergantung lebar). Angka tetap inilah yang membuat --jbg-ff-h di atas sah dipakai sebagai satu nilai untuk BUG 1 dan BUG 2. Nilai tinggi terkini ada di --jbg-ff-h. */ .jbg-bejo-fixed-footer a { line-height: 1.2; min-height: 58px; box-sizing: border-box; padding: 0 2px; } /* Catatan: dulu di sini ada @media (max-width:374px) yang menurunkan font ke 12px khusus layar sempit. Aturan itu dihapus karena blok poles di bawah sudah menetapkan 12px untuk SEMUA lebar, jadi menyisakannya berarti dua sumber kebenaran untuk nilai yang sama. */ /* --------------------------------------------------------------------------- BUG 1 — bilah footer membajak klik bottom-nav di mobile. Terukur 390x900: .iNhugoa2 (position:sticky, z-index:2) berada di y=841 h=59, sedangkan .jbg-bejo-fixed-footer (position:fixed, z-index:99) di y=813 h=87. Tumpang tindih 59px = 100% tinggi bottom-nav, jadi elementFromPoint di pusat tombol "Home" mengenai tautan "Bonus" milik footer, "Daftar" -> "Login", "Login" -> "Live Chat". Perbaikan: keduanya tidak lagi berebut ruang yang sama. Bottom-nav tetap sticky (perilaku aslinya) tetapi berhenti TEPAT DI ATAS bilah footer, dan z-index-nya dinaikkan melewati 99 supaya tidak ada lagi elemen footer yang menutupinya bila terjadi pembulatan subpiksel. --------------------------------------------------------------------------- */ .iNhugoa2 { bottom: calc(var(--jbg-ff-h) + env(safe-area-inset-bottom, 0px)); z-index: 100; } /* --------------------------------------------------------------------------- BUG 2 — bilah footer menutupi konten terakhir halaman. Tidak ada padding-bottom penyeimbang di html/body/#app (0 hasil pencarian), padahal footer position:fixed dicabut dari alur. Terukur 1440x900 pada scroll mentok: teks "Copyright (c) 2026 ULTRAMAN." tertutup 9px dan tombol "English" tertutup 2px. Ruang dipesan di , bukan di #app, karena bottom-nav (.iNhugoa2) berada di dalam #app: memberi padding pada #app akan ikut mendorong bottom-nav dan menciptakan celah ganda. Nilainya persis setinggi bilah plus satu jarak nafas, jadi tidak ada ruang kosong berlebih. --------------------------------------------------------------------------- */ body { padding-bottom: calc(var(--jbg-ff-h) + var(--jbg-ff-gap) + env(safe-area-inset-bottom, 0px)); } /* Halaman postingan (post.html) tidak memakai sticky footer melayang */ body.page-post { padding-bottom: 0 !important; } /* --------------------------------------------------------------------------- BUG 5 — logo di dalam lebar tetap 437.5px. index.html menulis . `width="auto"` bukan nilai yang sah untuk atribut dimensi HTML sehingga diabaikan, tinggal height=100 yang memaksa penskalaan dari rasio asli: hasilnya 437.5px KONSTAN dari 320 sampai 1920. Terukur: di 320px img.right = 453.5 (melewati wadah 305px, dibuang diam-diam oleh body{overflow-x:hidden}); di 1440px masih 38px melewati sidebar 400px. Gambar juga di-upscale 3.13x sehingga buram. CSS penulis mengalahkan petunjuk presentasi dari atribut width/height, jadi masalah ini bisa diperbaiki penuh tanpa menyentuh index.html. width/height auto = tidak pernah di-upscale (buram hilang); max-width mengikat pada wadah; max-height menjaga maksud desain 100px. --------------------------------------------------------------------------- */ center img { display: block; margin-inline: auto; width: auto; height: auto; max-width: 100%; max-height: 100px; object-fit: contain; } /* --------------------------------------------------------------------------- BUG 4a — rentang di bawah ambang grid ANTI-RESPONSIF. Terukur dengan reload penuh: mainH 700 -> 1533, 800 -> 1602.7, 900 -> 1669.3, 1000 -> 1736, 1006 -> 1740. Halaman justru makin TINGGI ketika layar makin lebar. Sebabnya banner selalu selebar wadah (681 -> 987) sementara rasionya dikunci oleh spacer .ynS4JIIF{padding-top:66.6667%}, jadi tingginya ikut tumbuh 454 -> 658; sedangkan kolom teks di bawahnya terkunci pada max-width:700px (app-shell.css:1542) sehingga lebar tambahan itu tidak dipakai untuk apa pun kecuali menambah tinggi. Perbaikan: pertumbuhan tinggi banner DIBATASI. Rasio 3:2 tetap dihormati selama masih di bawah batas; setelah itu banner berhenti meninggi dan gambar menyesuaikan diri (.ChQPRw21 sudah object-fit:contain, jadi tidak ada bagian yang terpotong). .lv1wPoZv adalah tempat yang benar untuk membatasinya karena ia yang overflow:hidden dan membungkus spacer rasio. Hasil terukur: tinggi halaman berhenti naik — mainH 450 -> 1467.3, 500 -> 1440, 519 -> 1368 (sebelumnya terus naik sampai 1740). --------------------------------------------------------------------------- */ /* Banner memakai rasio 1:1 kotak persegi di semua ukuran kontainer. */ .E6Cg_QZL .lv1wPoZv { max-height: none; aspect-ratio: 1 / 1; } /* --------------------------------------------------------------------------- BUG 4b — lompatan 678px di batas grid. Terukur: 1006 -> mainH 1740 dengan H1 di y=814; 1008 -> mainH 914.7 dengan H1 di y=136. Tambahan 2px lebar memindahkan konten 678px. Sebabnya app-shell.css:1549 baru beralih ke 2 kolom pada @container (inline-size >= 960px): tata letak melompat sekaligus dari "tiga blok bertumpuk" ke "dua kolom". Perbaikan: tata letak dua kolom dimulai pada lebar kontainer 700px, dengan struktur area yang SAMA persis seperti mode >=960px ("item aside" / "content aside"). Karena strukturnya identik, melewati ambang 960px hanya mengubah ukuran kolom, bukan susunan. MENGAPA 700px dan bukan 520px seperti versi pertama: pada kontainer 552px, sidebar minmax(230px,34%) memangkas kolom artikel menjadi hanya 282px. Terukur, itu menjatuhkan keterbacaan badan artikel ke 35 karakter per baris — lebih buruk daripada saat masih satu kolom (69). Jadi ambang 520px memenuhi tujuan "hilangkan lompatan" tapi merusak tujuan lain yang lebih penting: teks yang nyaman dibaca. Dengan 700px, kolom artikel pada viewport 599 menjadi 552px dan keterbacaan naik 35 -> 61 karakter, sementara lompatan di batas 960px tetap kecil. Lebar sidebar memakai minmax(230px, 34%) supaya ikut tumbuh mulus menuju 400px milik mode besar, bukan melompat. Banner ikut dibatasi 420px di rentang ini: nilai itu dipilih karena membuat tinggi tepat menyambung dengan mode >=960px. Terukur di batasnya: 1006 -> 922.6 dan 1008 -> 914.7, jadi lompatan tinggal 7.9px (sebelumnya 678px). .cfZgU5t8 diberi width:100% + align-self:stretch karena induknya .QejAgNG_ adalah flex column: lebar banner berasal dari stretch bawaan, dan sekadar membatasi max-width tanpa width eksplisit membuatnya menciut ke lebar intrinsik (terukur 371px -> 32px). --------------------------------------------------------------------------- */ @container (inline-size >= 700px) and (inline-size < 960px) { .nkkKcJBw { display: grid; grid-template-areas: "item aside" "content aside"; grid-template-columns: minmax(0, 1fr) minmax(230px, 34%); grid-template-rows: max-content 1fr; } /* Margin negatif full-bleed hanya masuk akal saat blok ini selebar layar; di dalam grid ia harus rapi mengikuti kolomnya. min-width:0 mencegah gambar lebar memaksa kolom melebar (min-width:auto bawaan grid item). */ .E6Cg_QZL { grid-area: item; margin: 0; min-width: 0; } .gnkwdbQG { grid-area: content; margin: 0; max-width: 100%; } ._l9nSumF { grid-area: aside; align-self: start; margin: 0; max-width: none; position: sticky; top: var(--spacing-3x); } .E6Cg_QZL .cfZgU5t8 { width: 100%; max-width: none; align-self: stretch; } .E6Cg_QZL .lv1wPoZv { max-height: none; aspect-ratio: 1 / 1; } } /* --------------------------------------------------------------------------- GAMBAR BANNER 1:1 (KOTAK PERSEGI) Mengubah rasio banner dari persegi panjang bawaan (66.6667% = 3:2) menjadi kotak persegi murni (1:1 / 100%). Gambar memakai object-fit: cover agar mengisi penuh bidang kotak tanpa terdistorsi. --------------------------------------------------------------------------- */ .E6Cg_QZL .ynS4JIIF { padding-top: 100% !important; } .E6Cg_QZL .ChQPRw21 { max-height: none !important; } .E6Cg_QZL .ChQPRw21.UTPiqHpf { object-fit: cover !important; aspect-ratio: 1 / 1; } .E6Cg_QZL .cfZgU5t8 { border: 1px solid rgba(var(--c-accent-rgb), .35); box-shadow: 0 4px 24px rgba(123, 44, 191, .07); background: #ffffff; overflow: hidden; } /* --------------------------------------------------------------------------- BUG 6 — sidebar sticky menyisakan 136px kosong. app-shell.css:1561-1567 memberi ._l9nSumF top:calc(64px + 40px + 32px) = 136px. Offset sebesar itu hanya masuk akal bila ada header yang menempel di atas layar, padahal header template ini position:static — ia ikut tergulir hilang. Bukti piksel pada scrollY=400: area x=993 w=400 y=0..136 100% putih polos. Diturunkan ke 16px, sama dengan jarak nafas yang dipakai tata letak antara di atas, sehingga sidebar berhenti tepat di bawah tepi layar. --------------------------------------------------------------------------- */ @container (inline-size >= 960px) { ._l9nSumF { top: var(--spacing-3x); } } /* --------------------------------------------------------------------------- POLES TAMPILAN BILAH FOOTER MELAYANG Tiga cacat presentasi yang terukur, bukan soal tata letak: 1. `border: 2px dashed #fff` — garis putus-putus putih mengelilingi bilah. Ini gaya wireframe/penanda kerja, bukan gaya produksi: terukur 859 piksel putih murni (2,8% bidang bilah) yang bersaing perhatian dengan ikon dan teks. Diganti garis rambut semitransparan di tepi atas saja — cukup untuk memisahkan bilah dari konten tanpa membingkai. 2. `border-radius: 40px 40px 0 0` — lengkung 40px pada bilah setinggi 78px memotong sudut tepat di area tautan pertama dan terakhir, sehingga "Bonus" dan "Live Chat" terlihat terjepit. Diturunkan ke 16px: masih lembut, tidak lagi memakan ruang tautan. 3. `font-family: Ubuntu, ...` — Ubuntu bukan bagian dari sistem tipografi template dan TIDAK punya @font-face di css-assets/fonts/. Di mesin tanpa Ubuntu terpasang, bilah ini jatuh ke Arial sementara seluruh situs memakai PolySans. Disamakan dengan token tipografi template. Tinggi kotak berubah 78px -> 75px karena border 2px di empat sisi diganti 1px di sisi atas saja; --jbg-ff-h sudah disesuaikan agar bottom-nav dan padding-bottom body tetap sinkron. min-height tautan tidak diubah. --------------------------------------------------------------------------- */ .jbg-bejo-fixed-footer { border: 0; border-top: 1px solid rgba(199, 125, 255, .35); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .7), 0 0 24px rgba(157, 78, 221, .2), inset 0 1px 0 rgba(255, 255, 255, .1); } /* Tipografi disamakan dengan sistem token; berat 500 membuat label kecil tetap terbaca di atas gradien tanpa perlu bold (bold mengubah metrik dan dulu menggeser seluruh bilah 26px saat hover). */ .jbg-bejo-fixed-footer a { font-family: var(--font-family-label-small, "PolySans", "Helvetica Neue", Arial, sans-serif); font-weight: 500; border-radius: 12px; transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color .2s ease, box-shadow .2s ease; } /* Label "Link Alternatif" butuh 80px sedangkan kotaknya hanya 77px di viewport 390, sehingga ia SATU-SATUNYA tautan yang pecah menjadi dua baris: ikonnya naik 8px dan deretan terlihat tidak rata (terukur imgY 841/841/841/833/841). Diuji empat pendekatan di browser; hanya yang terakhir berhasil: text-wrap: balance -> tetap 2 baris, ikon tidak rata letter-spacing: -.02em -> tetap 2 baris max-width: none -> tetap 2 baris (kotak dibatasi flex-basis) white-space: nowrap + font 12px -> SEMUA label 1 baris, ikon rata Jadi label dipaksa satu baris dan ukuran huruf diturunkan satu tingkat agar kata terpanjang tetap muat tanpa terpotong. */ .jbg-bejo-fixed-footer a { white-space: nowrap; font-size: 12px; } /* Ikon diberi bidang lembut supaya tidak melayang telanjang di atas gradien, dan ukurannya dipatok agar deretan tetap rata bila favicon punya rasio lain. */ .jbg-bejo-fixed-footer img { width: 24px; height: 24px; object-fit: contain; margin-bottom: 4px; border-radius: 6px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1), filter .2s ease; } .jbg-bejo-fixed-footer a:hover img, .jbg-bejo-fixed-footer a:focus-visible img { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 4px 10px rgba(157, 78, 221, .6)); } /* Latar hover TIDAK didefinisikan ulang di sini: blok BUG 3 di atas sudah menetapkan rgba(--c-accent-rgb,.25) beserta radius-nya. Menuliskannya dua kali hanya menciptakan dua sumber kebenaran untuk nilai yang sama. */ /* --------------------------------------------------------------------------- BREADCRUMB ARTIKEL (post.html) Envato aslinya memasang direction: rtl pada .HCzoCZuh sehingga breadcrumb terdorong ke pojok kanan atas. Di bawah ini kita paksa direction: ltr agar breadcrumb tampil normal di sebelah kiri atas sejajar dengan banner hero. --------------------------------------------------------------------------- */ .breadcrumb-container, .HCzoCZuh { direction: ltr !important; text-align: left !important; } .breadcrumb { direction: ltr !important; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: var(--spacing-4x, 24px); font-size: 0.875rem; color: var(--color-content-secondary, #5c5a66); } .breadcrumb a { color: var(--c-accent-mid, #7b2cbf); text-decoration: none; font-weight: 500; transition: color .16s ease; } .breadcrumb a:hover { color: var(--c-accent, #9d4edd); text-decoration: underline; } .breadcrumb-separator { color: rgba(var(--c-accent-rgb), .45); font-size: 1rem; } /* --------------------------------------------------------------------------- KARTU ARTIKEL & KANVAS EDITORIAL Kanvas bacaan berlatar abu-mutiara sejuk #f4f3f8. Kartu artikel berbentuk kotak persegi putih bersih #ffffff, bergaris tepi ungu neon Kompas rgba(157,78,221,.35), dengan bayangan lembut. Memberikan kontras optimal dan kenyamanan maksimal untuk membaca artikel panjang tanpa mata lelah. --------------------------------------------------------------------------- */ .article { background: var(--color-surface-elevated, #ffffff); border: 1px solid rgba(var(--c-accent-rgb), .35); border-radius: 0; padding: var(--spacing-4x, 24px); box-shadow: 0 4px 24px rgba(123, 44, 191, .07); } /* Tipografi badan artikel. MENGAPA max-width, bukan sekadar mewarisi lebar kolom: terukur di 1440 kolom artikel selebar 700px dengan font 16px menghasilkan ~88 karakter per baris. Standar keterbacaan adalah 45-75 karakter; di atas itu mata kesulitan menemukan awal baris berikutnya. Dibatasi 68ch sehingga turun ke kisaran optimal, sementara di 390 (49 kar.) dan 768 (54 kar.) yang sudah optimal tidak terpengaruh karena lebarnya memang di bawah batas. Ukuran huruf TIDAK dinaikkan di sini — lihat blok mobile di bawah untuk alasannya. Jarak baris dilonggarkan ke 1.75 karena badan artikel adalah teks terpanjang di halaman dan jarak baris longgar membantu mata berpindah baris. */ .article .gMoJXr6D { max-width: 68ch; line-height: 1.75; color: var(--color-content-primary, #1e1b2e); text-align: left; overflow-wrap: break-word; } /* Tautan di dalam artikel: ungu royal dengan garis bawah lembut */ .article .gMoJXr6D a { color: var(--c-accent-mid, #7b2cbf); text-decoration: underline; text-decoration-color: rgba(var(--c-accent-rgb), .35); text-underline-offset: 2px; transition: color .18s ease, text-decoration-color .18s ease; } .article .gMoJXr6D a:hover { color: var(--c-accent, #9d4edd); text-decoration-color: var(--c-accent, #9d4edd); } /* Huruf dibesarkan hanya ketika KARTUNYA sendiri cukup lebar. MENGAPA bukan di semua lebar: di 390px kolom artikel hanya 343px dan setelah padding tersisa ~307px. Terukur, menaikkan font 14px -> 17px di sana justru MENURUNKAN keterbacaan dari 49 ke 36 karakter per baris — jauh di bawah ambang nyaman 45-75. Padding hanya menyumbang 5 karakter dari penurunan itu; sisanya murni akibat huruf yang melebar. MENGAPA @container, bukan @media: lebar kartu TIDAK berbanding lurus dengan lebar layar. Terukur, begitu grid 2 kolom menyala di ~567px, sidebar 230px memangkas kolom artikel menjadi 282px — lebih sempit daripada saat viewport masih 560px (513px). Ambang berbasis viewport karena itu salah sasaran: @media(min-width:600px) justru membesarkan huruf tepat di titik kartu paling sempit, menghasilkan 27 karakter per baris. Dengan @container, aturan mengikuti lebar kartu yang sebenarnya, berapa pun lebar layarnya. */ .article { container-type: inline-size; container-name: kartu-artikel; } @container kartu-artikel (min-width: 440px) { .article .gMoJXr6D { font-size: 1.0625rem; } } /* Judul di atas kartu diberi jarak dan garis pemisah tipis supaya terbaca sebagai kepala artikel, bukan paragraf pertama yang kebetulan lebih tebal. */ .ShHUN_t_ > .QejAgNG_ > .jcI_vEqq { color: var(--color-content-neutral-strong, #14121f); margin-bottom: var(--spacing-3x, 16px); padding-bottom: var(--spacing-2x, 8px); border-bottom: 0; position: relative; font-size: 1.375rem; line-height: 1.3; } /* Di layar sempit padding besar memakan lebar teks yang sudah terbatas (343px di 390), jadi dikurangi. Sudut tetap siku seperti lebar lain. */ @media (max-width: 599px) { .article { padding: var(--spacing-3x, 16px); } } /* --------------------------------------------------------------------------- HIASAN KARTU ARTIKEL Semua hiasan di bawah memakai pseudo-element dan warna saja. Tidak ada yang mengubah geometri kartu: bentuk tetap kotak persegi bersudut siku, lebar dan tinggi tidak bergeser sedikit pun (diverifikasi dengan A/B di browser). Palet mengikuti token --c-* (ungu neon Kompas), jadi kartu terasa satu keluarga dengan header, popup, dan tombol aksi. --------------------------------------------------------------------------- */ /* 1. Pita aksen di tepi atas. Dipasang sebagai ::before absolut di dalam kartu, BUKAN border-top tebal, supaya tinggi kotak tidak bertambah. Gradien brass memberi titik masuk visual di sisi atas tanpa memecah kesan kotak. */ .article { position: relative; } .article::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-light) 45%, rgba(157, 78, 221, 0) 100%); pointer-events: none; } /* 2. Tanda kutip besar sebagai latar dekoratif di pojok kanan atas. opacity rendah supaya tidak bersaing dengan teks; aria-hidden tidak perlu karena pseudo-element tidak pernah dibacakan pembaca layar. */ .article::after { content: "\201D"; position: absolute; top: -8px; right: 12px; font-size: 88px; line-height: 1; color: var(--c-accent); opacity: .10; pointer-events: none; user-select: none; } /* 3. Huruf pertama diperbesar (drop cap). Sentuhan editorial klasik yang menandai awal artikel. Hanya menyala saat kartu cukup lebar: di kolom sempit drop cap memakan terlalu banyak ruang baris dan justru mengacaukan alur baca. Warnanya memakai --c-accent-mid (#7b2cbf). Drop cap adalah huruf yang benar-benar dibaca, bukan ornamen, jadi tunduk pada ambang kontras: #7b2cbf di atas putih = 7.19:1, lulus AAA penuh. */ @container kartu-artikel (min-width: 440px) { .article .gMoJXr6D::first-letter { float: left; font-size: 3.1em; line-height: .82; padding: 4px 10px 0 0; color: var(--c-accent-mid, #7b2cbf); font-weight: 700; } } /* 4. Garis bawah judul diganti gradien yang memudar. Dimulai tegas dengan ungu terang lalu menghilang, jadi mata terbawa dari judul menuju badan teks. */ .ShHUN_t_ > .QejAgNG_ > .jcI_vEqq { border-bottom: 0; position: relative; } .ShHUN_t_ > .QejAgNG_ > .jcI_vEqq::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px; background: linear-gradient(90deg, var(--c-accent, #9d4edd), rgba(var(--c-accent-rgb), 0)); } /* Kotak ringkasan/harga di sidebar kanvas Editorial */ ._l9nSumF [data-testid="sidebar-container"] .XOPcX5VD { background: #ffffff; border: 1px solid rgba(var(--c-accent-rgb), .35); box-shadow: 0 4px 20px rgba(123, 44, 191, .07); } ._l9nSumF [data-testid="sidebar-container"] .XOPcX5VD svg { fill: var(--c-accent, #9d4edd); color: var(--c-accent, #9d4edd); } ._l9nSumF h1, ._l9nSumF h2 { color: var(--color-content-neutral-strong, #14121f); } ._l9nSumF .oddFflBz a { color: var(--c-accent-mid, #7b2cbf); transition: color .18s ease; } ._l9nSumF .oddFflBz a:hover { color: var(--c-accent, #9d4edd); } /* --------------------------------------------------------------------------- FOOTER DALAM KANVAS EDITORIAL Panel tautan bawah berlatar hitam pekat Kompas (#0a0612), membingkai kanvas bacaan terang di atasnya dan menyambung mulus dengan bilah footer melayang. --------------------------------------------------------------------------- */ .LBfqNhja { background-color: var(--c-bg-panel, #0a0612); border-top: 1px solid rgba(var(--c-accent-rgb), .35); color: var(--c-text-body, #e4d9f2); } .LBfqNhja .Qu5eWXzk, .LBfqNhja .NDazUVew, .LBfqNhja h2, .LBfqNhja .LEo3ecOM { color: #ffffff; } .LBfqNhja a, .LBfqNhja a.MwuuClIh, .LBfqNhja .oddFflBz a { color: var(--c-text-muted, #b9a6d1); text-decoration: none; transition: color .16s ease; } .LBfqNhja a:hover, .LBfqNhja a:focus-visible, .LBfqNhja a.MwuuClIh:hover, .LBfqNhja .oddFflBz a:hover { color: var(--c-accent-light, #c77dff); text-decoration: none; } .LBfqNhja .hfldU1gb { color: var(--c-text-faint, #8f6bb5); } .LBfqNhja input.TRF40A6T { background: rgba(var(--c-accent-rgb), .08); border: 1px solid rgba(var(--c-accent-rgb), .35); color: #ffffff; } .LBfqNhja input.TRF40A6T:focus { border-color: var(--c-accent-light); box-shadow: 0 0 0 2px rgba(var(--c-accent-rgb), .3); outline: none; } /* --------------------------------------------------------------------------- HEADER KHUSUS HALAMAN POSTINGAN (post.html - Sleek Reader Sticky Header) --------------------------------------------------------------------------- */ .E2ql0nWs { position: sticky !important; top: 0 !important; z-index: 200 !important; background: rgba(10, 6, 18, 0.94) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(157, 78, 221, 0.35) !important; height: 64px !important; box-sizing: border-box !important; } .E2ql0nWs header { height: 64px !important; min-height: 64px !important; padding: 0 !important; } .c79hz7DG { display: flex !important; justify-content: space-between !important; align-items: center !important; height: 64px !important; gap: 16px !important; padding: 0 !important; } .c79hz7DG .o6A1CHw4 { flex-shrink: 0 !important; } .c79hz7DG .sLDX3lNH { flex: 1 1 auto !important; display: flex !important; align-items: center !important; margin: 0 !important; } .c79hz7DG .S9P4QlOv { flex-shrink: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; margin-left: auto !important; } /* Indikator Kemajuan Membaca (Reading Progress Bar) */ #reading-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--c-accent, #9d4edd), var(--c-accent-light, #c77dff)); box-shadow: 0 0 10px rgba(199, 125, 255, 0.9); transition: width 0.08s ease-out; pointer-events: none; z-index: 205; } /* Kotak pencarian kompak di baris header desktop */ .post-header-search { position: relative; display: flex; align-items: center; max-width: 210px; width: 100%; } .post-header-search input { width: 100%; height: 36px; padding: 0 32px 0 14px; border-radius: 999px; background: rgba(var(--c-accent-rgb), 0.12); border: 1px solid rgba(var(--c-accent-rgb), 0.35); color: #ffffff; font-family: inherit; font-size: 0.8125rem; outline: none; transition: all 0.2s ease; box-sizing: border-box; } .post-header-search input::placeholder { color: var(--c-text-muted, #b9a6d1); } .post-header-search input:focus { background: rgba(10, 6, 18, 0.98); border-color: var(--c-accent-light, #c77dff); box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.28); max-width: 250px; } .post-header-search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--c-accent-light, #c77dff); cursor: pointer; border-radius: 50%; padding: 0; transition: color 0.16s ease, background-color 0.16s ease; } .post-header-search button:hover { color: #ffffff; background: rgba(var(--c-accent-rgb), 0.2); } .post-header-search button svg { width: 15px; height: 15px; } @media (max-width: 1024px) { .post-header-search { display: none !important; } } /* Navigasi tengah: tautan menu konten bersih dan teratur */ @media (min-width: 769px) { .sLDX3lNH { display: flex !important; align-items: center; } } .post-nav-list { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; } .post-nav-item a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; color: var(--c-text-muted, #b9a6d1); text-decoration: none !important; transition: color .16s ease, background-color .16s ease; } .post-nav-item a:hover, .post-nav-item a:focus-visible { color: var(--c-accent-light, #c77dff); background-color: rgba(var(--c-accent-rgb), .12); } /* Titik status hijau pada Live Chat */ .nav-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; display: inline-block; animation: navPulse 1.8s infinite; } @keyframes navPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(0.85); } } /* Badge mini pada Link Alternatif */ .nav-mini-badge { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: rgba(var(--c-accent-rgb), .2); color: var(--c-accent-light, #c77dff); border: 1px solid rgba(var(--c-accent-rgb), .4); } /* Tombol Aksi Autentikasi Kanan: LOGIN (Secondary Ghost) & DAFTAR (Primary CTA) */ .header-btn-login { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--c-accent-light, #c77dff) !important; background: rgba(var(--c-accent-rgb), .08); border: 1px solid rgba(var(--c-accent-rgb), .45); text-decoration: none !important; transition: all .2s ease; white-space: nowrap; } .header-btn-login:hover, .header-btn-login:focus-visible { color: #ffffff !important; background: rgba(var(--c-accent-rgb), .22); border-color: var(--c-accent-light, #c77dff); box-shadow: 0 0 12px rgba(157, 78, 221, .3); transform: translateY(-1px); } .header-btn-register { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 20px; border-radius: 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #ffffff !important; background: var(--c-btn-gradient); border: 1px solid var(--c-btn-border); box-shadow: 0 4px 16px rgba(157, 78, 221, .45); text-decoration: none !important; transition: all .2s ease; white-space: nowrap; } .header-btn-register:hover, .header-btn-register:focus-visible { background: var(--c-btn-gradient-hover); box-shadow: 0 6px 22px rgba(157, 78, 221, .7); transform: translateY(-1px); } @media (max-width: 1024px) { .post-nav-list { display: none !important; } } @media (max-width: 768px) { .header-btn-login { display: none !important; } .header-btn-register { height: 34px !important; padding: 0 14px !important; font-size: 0.75rem !important; } .c79hz7DG .o6A1CHw4 { max-width: 150px !important; } .c79hz7DG .o6A1CHw4 img { max-height: 36px !important; width: auto !important; } } /* --------------------------------------------------------------------------- LAYOUT POSTINGAN SEIMBANG (post.html - Editorial Blog Layout) --------------------------------------------------------------------------- */ .post-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: rgba(var(--c-accent-rgb), .12); color: var(--c-accent, #9d4edd); border: 1px solid rgba(var(--c-accent-rgb), .35); margin-bottom: 10px; } .post-title { font-size: 2.25rem; font-weight: 700; line-height: 1.25; color: var(--color-content-neutral-strong, #14121f); margin: 0 0 14px; letter-spacing: -0.01em; } .post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; font-size: 0.875rem; color: var(--color-content-secondary, #5c5a66); } .post-meta-author { display: inline-flex; align-items: center; gap: 6px; color: var(--c-accent-mid, #7b2cbf); font-weight: 600; } .post-meta-author a { color: inherit; text-decoration: none; } .post-meta-author a:hover { color: var(--c-accent, #9d4edd); text-decoration: underline; } /* Grid Seimbang: Kolom Utama Artikel (68%) + Sidebar Menempel (32%) */ .post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; } @media (max-width: 960px) { .post-grid { grid-template-columns: 1fr; gap: 28px; } .post-title { font-size: 1.75rem; } } /* Banner Hero 1:1 Kotak Persegi Seimbang */ .post-hero-banner { width: 100%; max-width: 520px; margin: 0 auto 24px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(var(--c-accent-rgb), .35); box-shadow: 0 8px 30px rgba(123, 44, 191, .1); background: #ffffff; aspect-ratio: 1 / 1; position: relative; } .post-hero-banner img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; display: block; } /* Bar Tombol Aksi Cepat di bawah Banner */ .post-action-bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 28px; max-width: 520px; } .post-btn { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border-radius: 10px; font-size: 0.9375rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; box-sizing: border-box; } .post-btn--primary { color: #ffffff !important; background: var(--c-btn-gradient); border: 1px solid var(--c-btn-border); box-shadow: 0 6px 20px rgba(157, 78, 221, .4); } .post-btn--primary:hover { background: var(--c-btn-gradient-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(157, 78, 221, .6); } .post-btn--secondary { color: var(--c-accent-mid, #7b2cbf) !important; background: #ffffff; border: 1px solid rgba(157, 78, 221, .45); box-shadow: 0 2px 8px rgba(0, 0, 0, .04); } .post-btn--secondary:hover { background: rgba(var(--c-accent-rgb), .08); border-color: var(--c-accent-mid); transform: translateY(-2px); } /* Kartu Artikel di Kolom Utama */ .post-main-column .article { background: #ffffff; border: 1px solid rgba(var(--c-accent-rgb), .35); border-radius: 14px; padding: 32px 36px; box-shadow: 0 4px 24px rgba(123, 44, 191, .07); margin-bottom: 28px; } @media (max-width: 600px) { .post-main-column .article { padding: 20px 16px; border-radius: 10px; } } /* Bar Bagikan Artikel */ .post-share-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 24px; background: #ffffff; border: 1px solid rgba(var(--c-accent-rgb), .25); border-radius: 12px; margin-bottom: 28px; box-shadow: 0 2px 12px rgba(0, 0, 0, .03); } .post-share-title { font-size: 0.875rem; font-weight: 600; color: var(--color-content-neutral-strong, #14121f); } .post-share-links { display: flex; align-items: center; gap: 8px; margin-left: auto; } .post-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--c-accent-rgb), .08); color: var(--c-accent-mid, #7b2cbf); text-decoration: none !important; transition: background .16s ease, transform .16s ease, color .16s ease; } .post-share-btn:hover { background: var(--c-accent); color: #ffffff; transform: translateY(-2px); } .post-share-btn svg { width: 18px; height: 18px; } /* Sidebar Seimbang (Menempel Halus / Sticky) */ .post-sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; } .post-sidebar-card { background: #ffffff; border: 1px solid rgba(var(--c-accent-rgb), .35); border-radius: 14px; padding: 24px; box-shadow: 0 4px 20px rgba(123, 44, 191, .07); box-sizing: border-box; } .post-sidebar-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(var(--c-accent-rgb), .2); } .post-sidebar-title { font-size: 1.0625rem; font-weight: 700; color: var(--color-content-neutral-strong, #14121f); margin: 0; } .post-live-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 1px; color: #22c55e; background: rgba(34, 197, 94, .12); padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(34, 197, 94, .3); } .post-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; } .post-checklist { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; } .post-checklist li { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--color-content-primary, #1e1b2e); } .post-checklist-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--c-accent-rgb), .12); color: var(--c-accent, #9d4edd); flex-shrink: 0; } .post-checklist-icon svg { width: 12px; height: 12px; }