/* ═══════════════════════════════════════════════════════════════════════════ GAYA UNTUK HALAMAN SELAIN BERANDA Halaman detail produk, artikel tunggal, arsip blog, dan korsel artikel. Semua memakai token yang SAMA dengan beranda (--brown, --gold, --cream, Arsenal) supaya seluruh situs terasa satu, bukan tempelan. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Jejak navigasi ───────────────────────────────────────────────────────── */ .jejak{ display:flex;align-items:center;gap:9px;flex-wrap:wrap; margin-bottom:22px;font-size:.85rem;font-weight:650;color:var(--muted); } .jejak a{color:var(--brown);text-decoration:underline;text-underline-offset:3px} .jejak a:hover{color:var(--gold)} .jejak span[aria-hidden]{opacity:.5} /* ── Hero halaman produk ─────────────────────────────────────────────────── */ .hero-produk{padding:44px 0 58px} .hero-produk h1{font-size:clamp(2.1rem,4.4vw,3.5rem);margin:16px 0 18px} .hero-produk-grid{ display:grid;grid-template-columns:1.15fr .85fr; gap:48px;align-items:center; } .hero-produk-gambar{ display:grid;place-items:center; padding:26px;border-radius:var(--radius); background:#fff;border:1px solid var(--line);box-shadow:var(--shadow); } .hero-produk-gambar img{ width:100%;height:auto;max-width:330px; object-fit:contain; /* rasio asli terjaga — pelajaran dari bug regangan */ } @media(max-width:980px){ .hero-produk-grid{grid-template-columns:1fr;gap:28px} .hero-produk-gambar{order:-1;padding:18px} .hero-produk-gambar img{max-width:260px} } /* ── Kartu aplikasi (tanpa gambar, hanya teks) ───────────────────────────── */ .aplikasi-item{padding:20px 22px !important} .aplikasi-item b{ display:block;margin:0 !important; color:var(--brown);font-size:1rem;line-height:1.4; } .aplikasi-item:before{ content:"";display:block; width:9px;height:9px;border-radius:50%; background:var(--gold);margin-bottom:12px; } /* ── Kartu "produk lain" ─────────────────────────────────────────────────── */ .produk-lain-item{display:block;text-align:left} .produk-lain-item img{ aspect-ratio:1 !important;object-fit:contain; padding:14px;background:#fff; } .produk-lain-item b{margin:12px 22px 18px !important} /* ── KORSEL ARTIKEL ────────────────────────────────────────────────────── Scroll-snap murni CSS: tanpa pustaka JavaScript sama sekali, jadi tidak menambah bobot dan tetap bekerja walau JS gagal dimuat. Tombol panah hanya pemanis; menggeser dengan jari atau trackpad sudah cukup tanpa itu. */ .korsel-bungkus{position:relative;margin-top:24px} .korsel{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(285px,1fr); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 4px 16px; scrollbar-width:thin; scrollbar-color:rgba(119,62,29,.3) transparent; } /* Di desktop lebar kartu harus TETAP, bukan 1fr. Versi pertama memakai minmax(0,1fr) di sini — aturan itu ditulis untuk grid 3 kartu, lalu ikut terpakai saat korsel berisi 9. Akibatnya sembilan kolom 1fr membagi habis lebar container: kartu menjadi 114px lebar dan 690px tinggi, korsel tidak bisa digeser, dan kedua tombol panah mati — persis di ukuran layar yang paling sering dipakai. Terukur di viewport 1440px. Dengan lebar tetap, jalur korsel melampaui container sehingga ia menggeser sebagaimana mestinya. */ @media(min-width:981px){ .korsel{grid-auto-columns:clamp(300px,24vw,340px)} } .korsel::-webkit-scrollbar{height:7px} .korsel::-webkit-scrollbar-track{background:rgba(119,62,29,.07);border-radius:99px} .korsel::-webkit-scrollbar-thumb{background:rgba(119,62,29,.3);border-radius:99px} .korsel > *{scroll-snap-align:start} /* KARTU ARTIKEL — nama kelas HARUS sama dengan yang dikeluarkan nrv_kartu_artikel() di tampilan.php. Versi pertama CSS ini menargetkan .pos-kartu-gambar dan .pos-kartu-isi b/p/time, sementara PHP mengeluarkan .pos-kartu-media/-judul/-cuplik/-meta — kartunya tampil TANPA gaya sama sekali, dan uji berbasis hitungan elemen tidak akan pernah menangkapnya. Semua anak kartu adalah (karena seluruh kartu berada di dalam , dan tidak boleh memuat

atau blok lain). Jadi display-nya WAJIB ditulis eksplisit; tanpa itu semuanya mengalir sebagai satu baris teks. */ .pos-kartu{ display:flex;flex-direction:column; border-radius:22px;overflow:hidden; background:#fff;border:1px solid var(--line); transition:.22s ease;height:100%;text-decoration:none; } .pos-kartu:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .pos-kartu:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .pos-kartu-media{ display:block; aspect-ratio:1200/630; /* rasio gambar utama kita — tidak ada regangan */ background:var(--cream); overflow:hidden; } .pos-kartu-img{ display:block;width:100%;height:100%; object-fit:cover; /* DIPOTONG, tidak pernah diregangkan */ transition:.35s ease; } .pos-kartu:hover .pos-kartu-img{transform:scale(1.05)} /* Kartu tanpa gambar utama tetap harus setinggi yang lain, kalau tidak tinggi kartu di dalam korsel akan tidak rata. */ .pos-kartu-kosong{ background:linear-gradient(135deg,rgba(192,144,80,.18),rgba(119,62,29,.10)); } .pos-kartu-isi{display:flex;flex-direction:column;gap:9px;flex:1;padding:20px 22px 22px} .pos-kartu-judul{ display:block;color:var(--brown);font-weight:700; font-size:1.02rem;line-height:1.35; } .pos-kartu-cuplik{display:block;color:var(--muted);font-size:.88rem;line-height:1.55} .pos-kartu-meta{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin-top:auto;padding-top:4px; } .pos-kartu-meta time{color:var(--muted);font-size:.81rem} .pos-kartu-baca{color:var(--gold);font-weight:800;font-size:.8rem;white-space:nowrap} .korsel-nav{display:flex;gap:10px;margin-top:16px} .korsel-tombol{ width:42px;height:42px;border-radius:12px; border:1px solid rgba(119,62,29,.22); background:#fff;color:var(--brown); font-size:1.5rem;line-height:1; cursor:pointer;display:grid;place-items:center; transition:.2s ease; } .korsel-tombol:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:#fff} .korsel-tombol:disabled{opacity:.35;cursor:default} @media (prefers-reduced-motion:reduce){ .korsel{scroll-behavior:auto} .pos-kartu:hover{transform:none} .pos-kartu:hover .pos-kartu-img{transform:none} } /* ── ARTIKEL TUNGGAL ─────────────────────────────────────────────────────── */ .pos-hero{padding:40px 0 0;background:linear-gradient(180deg,#fffaf2,var(--cream-2))} .pos-hero h1{ font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12;letter-spacing:-.03em; margin:14px 0 16px;max-width:24ch; } @media(min-width:981px){ .pos-hero h1{max-width:30ch} } .pos-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px; color:var(--muted);font-size:.87rem;font-weight:650; } .pos-meta .titik{opacity:.45} .pos-utama{ margin:26px 0 0;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line);box-shadow:var(--shadow); aspect-ratio:1200/630;background:var(--cream); } .pos-utama img{width:100%;height:100%;object-fit:cover} .pos-tata{ display:grid;grid-template-columns:minmax(0,1fr) 300px; gap:52px;padding:52px 0 70px;align-items:start; } @media(max-width:1080px){ .pos-tata{grid-template-columns:1fr;gap:34px} } /* Badan artikel — dibuat nyaman dibaca panjang. */ .pos-isi{max-width:70ch;font-size:1.045rem;line-height:1.78;color:#3E3128} .pos-isi > *:first-child{margin-top:0} .pos-isi p{margin:0 0 1.15em} .pos-isi h2{ margin:2.1em 0 .7em;font-size:1.62rem;line-height:1.25; color:var(--brown);letter-spacing:-.02em;scroll-margin-top:100px; } .pos-isi h3{ margin:1.8em 0 .55em;font-size:1.24rem;line-height:1.3;color:var(--brown); scroll-margin-top:100px; } .pos-isi h4{margin:1.5em 0 .5em;font-size:1.07rem;color:var(--brown)} .pos-isi ul,.pos-isi ol{margin:0 0 1.2em;padding-left:1.35em} .pos-isi li{margin-bottom:.5em} .pos-isi li::marker{color:var(--gold)} .pos-isi a{color:var(--brown);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px} .pos-isi a:hover{color:var(--gold)} .pos-isi strong{color:var(--brown)} .pos-isi img{ height:auto;border-radius:18px;margin:1.6em 0; border:1px solid var(--line); } .pos-isi figure{margin:1.6em 0} .pos-isi figcaption{margin-top:9px;font-size:.85rem;color:var(--muted);text-align:center} .pos-isi blockquote{ margin:1.7em 0;padding:20px 24px; border-left:4px solid var(--gold);border-radius:0 16px 16px 0; background:var(--cream);color:var(--brown);font-size:1.02rem; } .pos-isi blockquote p:last-child{margin-bottom:0} .pos-isi table{ width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.94rem; display:block;overflow-x:auto; } .pos-isi th,.pos-isi td{padding:12px 15px;border:1px solid var(--line);text-align:left} .pos-isi th{background:var(--cream);color:var(--brown);font-weight:800} .pos-isi hr{border:0;border-top:1px solid var(--line);margin:2.2em 0} .pos-isi code{ background:var(--cream);padding:2px 6px;border-radius:6px; font-size:.92em;color:var(--brown); } /* Sisi kanan artikel */ .pos-sisi{position:sticky;top:100px;display:grid;gap:18px} @media(max-width:1080px){ .pos-sisi{position:static} } .sisi-kotak{ padding:24px;border-radius:22px; background:#fff;border:1px solid var(--line); } .sisi-kotak h3{margin:0 0 12px;font-size:1.05rem;color:var(--brown)} .sisi-kotak p{margin:0 0 14px;font-size:.9rem;line-height:1.6;color:var(--muted)} .sisi-kotak .btn{width:100%} .sisi-cta{background:var(--brown);border-color:var(--brown);color:#fff} .sisi-cta h3{color:#fff} .sisi-cta p{color:rgba(255,255,255,.78)} .sisi-produk a{ display:block;padding:11px 0;font-size:.92rem;font-weight:650; color:var(--brown);border-bottom:1px solid var(--line); } .sisi-produk a:last-child{border-bottom:0} .sisi-produk a:hover{color:var(--gold)} /* Daftar isi otomatis */ .pos-daftarisi{ margin:0 0 30px;padding:20px 24px; border-radius:20px;background:var(--cream);border:1px solid var(--line); } .pos-daftarisi b{display:block;margin-bottom:10px;color:var(--brown);font-size:.95rem} .pos-daftarisi ol{margin:0;padding-left:1.2em} .pos-daftarisi li{margin-bottom:6px;font-size:.91rem} .pos-daftarisi a{color:var(--muted);text-decoration:none} .pos-daftarisi a:hover{color:var(--brown);text-decoration:underline} /* ── ARSIP / DAFTAR ARTIKEL ──────────────────────────────────────────────── */ .arsip-hero{padding:52px 0 34px;background:linear-gradient(180deg,#fffaf2,var(--cream-2))} .arsip-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:20px;padding:34px 0 20px; } @media(max-width:980px){ .arsip-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .arsip-grid{grid-template-columns:1fr} } .halaman-nav{ display:flex;flex-wrap:wrap;gap:8px; justify-content:center;padding:16px 0 70px; } .halaman-nav .page-numbers{ display:inline-grid;place-items:center; min-width:42px;height:42px;padding:0 13px; border-radius:12px;border:1px solid var(--line); background:#fff;color:var(--brown);font-weight:700;font-size:.92rem; } .halaman-nav .page-numbers:hover{border-color:var(--gold);color:var(--gold)} .halaman-nav .page-numbers.current{background:var(--brown);color:#fff;border-color:var(--brown)} .halaman-nav .dots{border:0;background:transparent} /* ── Halaman sederhana (Tentang, Kontak) ─────────────────────────────────── */ .sederhana{padding:52px 0 64px} /* Kolom isi DIPUSATKAN. Sebelumnya rata kiri di dalam container 1180px, jadi separuh kanan halaman kosong melompong dan halamannya terasa lepas dari beranda yang bagian-bagiannya penuh. Lebar baca tetap dijaga ~68ch. */ .sederhana-isi{max-width:68ch;margin-inline:auto} .sederhana-isi > *:first-child{margin-top:0} .sederhana-isi h2{margin:1.9em 0 .6em;font-size:1.5rem;color:var(--brown)} .sederhana-isi h3{margin:1.6em 0 .5em;font-size:1.14rem;color:var(--brown)} .sederhana-isi p{margin:0 0 1.1em;line-height:1.75;color:#3E3128} .sederhana-isi ul,.sederhana-isi ol{margin:0 0 1.2em;padding-left:1.35em;line-height:1.7} .sederhana-isi li::marker{color:var(--gold)} .sederhana-isi img{height:auto;border-radius:18px;margin:1.4em 0} .sederhana-isi a{color:var(--brown);text-decoration:underline;text-underline-offset:3px} .sederhana-isi iframe{max-width:100%;border:0;border-radius:18px;margin:1.4em 0} /* ── Formulir dua kolom (dipakai template produk) ────────────────────────── */ .form-baris{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){ .form-baris{grid-template-columns:1fr} } .lead-grid label{display:block;margin-bottom:14px;font-size:.87rem;font-weight:700;color:rgba(255,255,255,.9)} .lead-grid input,.lead-grid select,.lead-grid textarea{ width:100%;margin-top:7px;padding:13px 15px; border-radius:13px;border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1);color:#fff;font-size:.95rem; } .lead-grid input::placeholder,.lead-grid textarea::placeholder{color:rgba(255,255,255,.5)} .lead-grid textarea{resize:vertical;min-height:100px} /* color:var(--ink), BUKAN var(--brown). Terukur di halaman hidup: cokelat merek #773E1D di atas emas #C09050 hanya 2,95:1 — gagal AA untuk teks tombol 16px (ambang 4,5 karena di bawah 18,66px). --ink #2d201a memberi 5,51:1 dan 7,79:1 saat hover ke --gold-2. Kandidat diukur, tidak ditebak: 773E1D=2,95 · 5E2F16=3,88 · 4A2411=4,73 · 2d201a=5,51 ← dipakai · hitam=7,35. Ini cacat SISTEMIK: .btn-gold dipakai di CTA alur maklon, sisi artikel, dan penutup halaman — satu perbaikan di sini memperbaiki ketiganya. */ .btn-gold{background:var(--gold);color:var(--ink);width:100%;font-weight:850} .btn-gold:hover{background:var(--gold-2)} .lead-grid{ display:grid;grid-template-columns:.85fr 1.15fr;gap:52px; padding:52px;border-radius:38px;background:var(--brown);color:#fff; } .lead-grid h2{color:#fff} @media(max-width:980px){ .lead-grid{grid-template-columns:1fr;gap:26px;padding:30px 22px;border-radius:28px} } /* ── PENANGKAL ATURAN TINGKAT ELEMEN DARI LUAR ─────────────────────────── Tema popularfx menyuntikkan CSS inline berisi: aside { width:20%; float:right } main { width:79% !important; display:inline-block; float:left } Handle-nya sudah dilepas di tampilan.php, jadi ini lapisan KEDUA — bukan duplikasi. Alasannya: selektor tingkat elemen seperti main/aside bisa datang dari plugin mana pun kapan pun, dan kalau itu terjadi lagi kerusakannya tidak tampak sebagai error melainkan sebagai tata letak yang diam-diam berantakan (dan sudah terjadi:

mengapung membuat