/* ============================================================= Central Cat's — assets/css/main.css (base bersama) HANYA rule identik di 8/8 halaman konten -- semuanya memuatnya. @media DIMENSI tetap inline per halaman (membalik cascade kalau dipindah ke sini). @media KAPABILITAS -- hover/pointer/prefers-* -- boleh di sini. Lihat CLAUDE.md sec.2; dijaga tests/konvensi.test.js. ============================================================= */ :root{ color-scheme:only light; --primary:#1e3a8a;--accent:#d4af37;--light:#f3f4f6;--text:#111;--drawer-w:50%; --shine-base:var(--primary);--shine-hi:var(--accent); /* default kilau judul; main.js menimpa per elemen */ /* --- token permukaan & teks (2026-08-04, dasar mode gelap) --- */ --bg:#fff;--surface:#f3f4f6;--surface-soft:#f9fafb;--surface-raised:#fff; --border:#e5e7eb;--border-soft:#eef0f4; --text-muted:#333;--text-soft:#444;--text-dim:#6b7280;--text-faint:#9aa1ad; --text-mid:#555;--text-gray:#666;--text-hint:#888; --heading-deep:#0f1f4b;--primary-hover:#162d6b;--on-primary:#fff; --hero-from:#1e3a8a;--hero-to:#243c94; --header-scrolled:rgba(30,58,138,.92);--header-scrolled-solid:rgba(30,58,138,.97); --header-solid:#1e3a8a;--footer-bg:#1e3a8a;--logo-plate:#fff; --badge-fg:#b8860b; --cream-bg:#faf9f5;--cream-border:#f0ebda; --chip-bg:#eef2ff;--chip-border:#c7d2fe; --faq-bg:#ece5dd;--faq-chat-bg:#dfe7ec;--faq-bot-bg:#fff;--faq-user-bg:#d9fdd3; --faq-bubble-fg:#111;--faq-link:#1e3a8a;--faq-divider-bg:rgba(225,245,254,.85);--faq-divider-fg:#546e7a; } /* ============================================================= MODE GELAP (2026-08-04) Terang = default di :root, gelap = blok override di bawah. Berlaku 8/8 halaman: semuanya sudah ditokenkan (tahap 2, 2026-08-04), jadi gate sementara [data-cc-theme] yang dipakai saat baru index.html sudah dilepas. Konsekuensinya: SETIAP warna baru di halaman mana pun wajib lewat token, bukan literal -- literal tidak ikut berubah dan akan jadi bercak terang. TIDAK LAGI MENGIKUTI PENGATURAN OS/CHROME (2026-09-19, permintaan user). Dulu ada blok kembar berbasis media query skema warna yang menggelapkan situs otomatis kalau browser bertema gelap. Blok itu DICABUT: default sekarang SELALU terang, gelap HANYA lewat tombol tema (atribut data-theme + localStorage). Jangan hidupkan lagi tanpa diskusi. Efek sampingnya bagus: tinggal SATU blok token gelap, jadi kelas bug "dua blok kembar tidak sinkron" -- yang pernah kejadian dan dijaga tes -- hilang dengan sendirinya. Kalau suatu saat ikut-OS dihidupkan lagi, hidupkan lagi juga tes kembarannya di tests/konvensi.test.js. ============================================================= */ :root[data-theme="light"]{color-scheme:only light;} :root[data-theme="dark"]{color-scheme:only dark;} :root[data-theme="dark"]{ --primary:#8ba4ff;--accent:#e2c25c;--light:#1a2231;--text:#e6eaf2; --bg:#0e1320;--surface:#171f2e;--surface-soft:#121927;--surface-raised:#1a2331; --border:#2b3446;--border-soft:#242d3d; --text-muted:#c6ccd8;--text-soft:#b4bccb;--text-dim:#98a2b4;--text-faint:#7e8899; --text-mid:#aeb7c6;--text-gray:#a2acbb;--text-hint:#8b95a4; --heading-deep:#c3cfff;--primary-hover:#a8bcff;--on-primary:#0e1320; --hero-from:#141d3f;--hero-to:#182450; --header-scrolled:rgba(14,19,32,.92);--header-scrolled-solid:rgba(14,19,32,.97); --header-solid:#131a2a;--footer-bg:#101728;--logo-plate:#e9ecf2; --badge-fg:#e2c25c; --cream-bg:#1d2130;--cream-border:#2f3446; --chip-bg:#232e4a;--chip-border:#35426a; --faq-bg:#101b21;--faq-chat-bg:#0d171d;--faq-bot-bg:#1f2c33;--faq-user-bg:#005c4b; --faq-bubble-fg:#e9edef;--faq-link:#8ba4ff;--faq-divider-bg:rgba(29,45,55,.9);--faq-divider-fg:#a4b4bd; } /* Pola titik SVG di latar chat FAQ itu abu TERANG (dipanggang di data URI, tidak bisa ditokenkan). Di latar gelap polanya jadi berisik, jadi dimatikan -- area chat cukup rata. */ :root[data-theme="dark"] .faq-chat-body{background-image:none;} /* Tombol tema. Warnanya putih transparan karena selalu duduk di atas header navy (atau drawer navy) -- di kedua mode latarnya gelap, jadi tidak ikut ditokenkan. Ada di 8/8 halaman. */ .theme-toggle{display:inline-flex;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;padding:0;margin-left:18px;flex-shrink:0;transition:background .25s ease,transform .2s ease;} /* Varian header (bulat, desktop) vs varian drawer (baris penuh, mobile). Keduanya .theme-toggle -- main.js mengikat SEMUANYA, jadi menekan yang mana pun hasilnya sama. Yang mana tampil diatur breakpoint: aturan mobile ada INLINE di tiap halaman (@media dimensi dilarang di main.css, CLAUDE.md sec.2). */ /* Varian drawer TANPA teks (2026-09-19). Dulu tombol ini selebar drawer dan memuat label "Mode Gelap"/"Mode Terang" -- teksnya turun dua baris di layar sempit dan bentuknya beda sendiri di antara tautan nav yang polos. Sekarang bentuknya sama persis dengan varian header (bulat 34px, warisan .theme-toggle); yang tersisa di sini hanya beda posisi. Statusnya tetap terbaca pembaca layar lewat aria-label/title yang disetel main.js, jadi label visual tidak perlu. */ .theme-toggle-drawer{display:none;margin-left:0;} @media(hover:hover){.theme-toggle:hover{background:rgba(212,175,55,.45);}} .theme-toggle:active{transform:scale(.92);} /* Tombol ganti bahasa ID · EN (2026-09-20, bersama halaman Inggris). Sengaja sekeluarga dengan .theme-toggle: warna putih transparan yang sama karena latarnya juga header/drawer navy, dan TINGGI 34px yang sama. Tingginya bukan selera -- drawer mobile meratakan logo, tombol tema, dan hamburger pada pusat y=34 (CLAUDE.md sec.4); elemen setinggi lain akan merusak perataan itu. Bentuknya pil, bukan lingkaran, karena memuat dua label teks. */ .lang-switch{display:inline-flex;align-items:center;height:34px;margin-left:18px;padding:2px;gap:2px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:17px;flex-shrink:0;} .lang-opt{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:28px;padding:0 9px;border-radius:14px;font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.72);text-decoration:none;transition:background .25s ease,color .25s ease;} /* Bahasa yang sedang dibuka: emas, dan BUKAN tautan (dirender ) supaya tidak ada tautan yang menunjuk ke halaman itu sendiri. */ .lang-opt.is-active{background:var(--accent);color:#1e3a8a;cursor:default;} .lang-opt::after{display:none;} @media(hover:hover){.lang-opt:not(.is-active):hover{background:rgba(212,175,55,.45);color:#fff;}} .lang-opt:not(.is-active):active{transform:scale(.94);} /* Varian drawer disembunyikan di desktop; breakpoint-nya INLINE di tiap halaman karena @media dimensi dilarang di main.css (CLAUDE.md sec.2). */ .lang-switch-drawer{display:none;margin-left:0;} /* Baris kontrol di dalam drawer: tombol tema + tombol bahasa BERSEBELAHAN. Tanpa pembungkus ini keduanya jadi dua anak terpisah dari .mobile-nav yang flex-column ber-gap:18px, sehingga tombol bahasa turun ke baris sendiri dan pusatnya jatuh di y=86 — melanggar perataan y=34 yang dipakai drawer untuk menyamakan logo, kontrol, dan hamburger (CLAUDE.md sec.4). Aman di desktop: .mobile-nav sendiri display:none di sana (baris 139). */ .drawer-controls{display:flex;align-items:center;gap:12px;} .theme-ico{width:17px;height:17px;display:block;} .theme-ico-sun{display:none;} :root[data-theme="dark"] .theme-ico-sun{display:block;} :root[data-theme="dark"] .theme-ico-moon{display:none;} :root[data-theme="light"] .theme-ico-sun{display:none;} :root[data-theme="light"] .theme-ico-moon{display:block;} *{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;} h1,h2,h3{font-family:'Fraunces',Georgia,'Times New Roman',serif;} /* Nama legal PT di footer — font brand Archivo (senada situs Ecoplast, PT sama) */ .pt-name{font-family:'Archivo','Poppins',sans-serif;letter-spacing:.2px;} html{scroll-behavior:smooth;} .header-inner{width:100%;max-width:1200px;height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;} .logo-area{display:flex;align-items:center;} .logo-link{display:flex;align-items:center;background:var(--logo-plate);padding:0 4px;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.10);} /* Hover HANYA untuk perangkat berpointer (2026-08-02). Di layar sentuh :hover menyala saat jari menempel lalu NYANGKUT sampai elemen lain disentuh -- kartu tertinggal terangkat, nav tertinggal emas. @media(hover:hover) mematikan itu di perangkat sentuh; mouse & trackpad laptop tetap lolos, jadi tampilan desktop TIDAK berubah. Pasangannya :active = umpan balik saat ditekan, tanpa media query, jalan di sentuh maupun mouse. Ini media query KAPABILITAS, bukan dimensi -- tidak ikut menentukan layout, jadi tidak bisa membalik cascade mobile. Lihat tests/konvensi.test.js. */ @media(hover:hover){.logo-link:hover .logo-img{transform:scale(1.06);filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));}} .logo-link:active .logo-img{transform:scale(.97);} /* margin-left:auto mengumpulkan nav + tombol tema di kanan (2026-09-19). Sebelumnya .header-inner space-between dengan TIGA anak (logo | nav | tombol tema) menaruh nav di tengah dan membagi sisa ruang rata ke kiri & kanannya -- jadi nav terasa kurang ke kanan DAN tombol tema terpisah jauh (~200 px) dari "Artikel". Dengan auto, seluruh sisa ruang pindah ke depan nav; jarak nav ke tombol tinggal margin-left:18px milik .theme-toggle. Tidak berpengaruh di mobile: .desktop-nav di-display:none di sana. */ nav.desktop-nav{display:flex;align-items:center;margin-left:auto;} .mobile-nav{display:none;z-index:1500;} .hamburger{display:none;} nav a{color:white;text-decoration:none;margin-left:20px;font-weight:500;transition:.3s ease;position:relative;font-size:12px;padding:6px 0;display:flex;align-items:center;} nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .25s ease;border-radius:2px;} nav a.active::after{width:100%;} @media(hover:hover){nav a:hover::after{width:100%;}} @media(hover:hover){nav a:hover{color:var(--accent);}} nav a:active{color:var(--accent);} .nav-item{position:relative;} .nav-dropdown a{color:var(--text);margin:0;padding:10px 14px;font-size:12px;} @media(hover:hover){.nav-dropdown a:hover{background:var(--surface);color:var(--primary);}} .nav-dropdown a:active{background:var(--surface);color:var(--primary);} @media(hover:hover){.nav-item:hover .nav-dropdown{display:flex;}} /* Geometri disamakan dengan .header-inner (2026-09-20, permintaan user): 1200px + padding 20 = isi 1160. Dulu 1100px tanpa padding, sehingga footer 100px lebih sempit daripada header dan tepinya tidak pernah segaris dengan logo. Lihat blok "LEBAR KONTEN" di bawah. */ .footer-container{max-width:1200px;width:100%;margin:auto;padding-left:20px;padding-right:20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:60px;align-items:flex-start;} .footer-brand .logo-link{display:inline-flex;width:fit-content;padding:6px 10px;} .footer-brand .logo-img{height:46px;width:auto;} .footer-social{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px;align-items:center;max-width:440px;padding-left:6px;} .footer-social-item{display:flex;align-items:center;gap:10px;font-size:13px;color:#fff;text-decoration:none;white-space:nowrap;} .footer-social-icon{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;} @media(hover:hover){.footer-social-item:hover .footer-social-icon{background:var(--accent);box-shadow:0 0 10px rgba(212,175,55,.55);}} .footer-social-item:active .footer-social-icon{background:var(--accent);} @media(hover:hover){.footer-social-item:hover{opacity:.8;}} .footer-social-item:active{opacity:.6;} .footer-bottom{text-align:center;margin-top:50px;font-size:10px;opacity:.85;border-top:1px solid rgba(255,255,255,.15);padding-top:22px;} /* footer kontak: 4 class ekstrak dari inline footer (nilai copy byte). Hanya elemen footer; ikon FAQ emas TETAP inline (varian beda). */ .footer-ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;} .footer-divider{border:none;border-top:1px solid rgba(255,255,255,.25);margin:10px 0 10px 46px;} .footer-label{font-size:13px;opacity:.85;} .footer-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;} .footer-contact svg{transition:transform .2s ease;} @media(hover:hover){.footer-contact div:hover svg{transform:scale(1.15);}} .faq-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:2000;backdrop-filter:blur(3px);} .faq-overlay.show{display:block;} .faq-popup.show{display:flex;} @keyframes popUp{from{opacity:0;transform:translateY(20px) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}} .faq-popup-header{background:linear-gradient(135deg,#1e3a8a,#1e5fa8);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;} .faq-chat-agent{display:flex;align-items:center;gap:10px;} .faq-agent-avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid rgba(255,255,255,.4);} .faq-agent-name{color:#fff;font-size:13px;font-weight:700;} .faq-agent-status{color:rgba(255,255,255,.75);font-size:11px;margin-top:1px;} .faq-popup-close{background:rgba(255,255,255,.15);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:white;font-size:14px;transition:background .2s;} @media(hover:hover){.faq-popup-close:hover{background:rgba(255,255,255,.3);}} .faq-popup-close:active{background:rgba(255,255,255,.3);} .faq-date-divider{text-align:center;margin:4px 0 8px;} .faq-msg-bot{display:flex;align-items:flex-end;gap:6px;align-self:flex-start;max-width:88%;} .faq-msg-bot-avatar{width:28px;height:28px;border-radius:50%;background:#1e3a8a;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-bottom:2px;} .faq-bubble-bot a{color:var(--faq-link);font-weight:600;text-decoration:none;} .faq-bubble-bot strong{color:var(--faq-link);} .faq-bubble-time{font-size:10px;color:#8696a0;text-align:right;margin-top:3px;} .faq-msg-user{display:flex;justify-content:flex-end;align-self:flex-end;max-width:88%;} .faq-typing span{width:7px;height:7px;border-radius:50%;background:#90a4ae;animation:typing 1.2s infinite;} .faq-typing span:nth-child(2){animation-delay:.2s;} .faq-typing span:nth-child(3){animation-delay:.4s;} @keyframes typing{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}} .faq-quick-replies{background:var(--surface-raised);padding:10px 10px 12px;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--border);flex-shrink:0;} .faq-chip{background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--primary);padding:7px 13px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Poppins',sans-serif;transition:all .2s ease;white-space:nowrap;} @media(hover:hover){.faq-chip:hover{background:var(--primary);color:var(--on-primary);border-color:var(--primary);transform:translateY(-1px);}} /* FAQ top-level (diangkat dari inline index = sumber tunggal 8/8; @media tetap inline per halaman) */ .faq-popup{display:none;position:fixed;bottom:28px;right:28px;width:360px;height:520px;background:var(--faq-bg);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.22);z-index:2100;flex-direction:column;overflow:hidden;animation:popUp .3s cubic-bezier(.34,1.56,.64,1);} .faq-chat-body{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:6px;background:var(--faq-chat-bg) url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8d5da' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");} .faq-chat-body::-webkit-scrollbar{width:4px;} .faq-chat-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;} .faq-date-divider span{background:var(--faq-divider-bg);color:var(--faq-divider-fg);font-size:11px;padding:3px 10px;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.08);} .faq-bubble-bot{background:var(--faq-bot-bg);color:var(--faq-bubble-fg);padding:8px 12px;border-radius:0 12px 12px 12px;font-size:13px;line-height:1.6;box-shadow:0 1px 3px rgba(0,0,0,.1);position:relative;} .faq-bubble-bot::before{content:"";position:absolute;left:-6px;top:0;border-top:6px solid var(--faq-bot-bg);border-left:6px solid transparent;} @media(hover:hover){.faq-bubble-bot a:hover{text-decoration:underline;}} .faq-bubble-bot a:active{text-decoration:underline;} .faq-bubble-user{background:var(--faq-user-bg);color:var(--faq-bubble-fg);padding:8px 12px;border-radius:12px 0 12px 12px;font-size:13px;line-height:1.6;box-shadow:0 1px 3px rgba(0,0,0,.1);position:relative;} .faq-bubble-user::after{content:"";position:absolute;right:-6px;top:0;border-top:6px solid var(--faq-user-bg);border-right:6px solid transparent;} .faq-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;background:var(--faq-bot-bg);border-radius:0 12px 12px 12px;width:fit-content;box-shadow:0 1px 3px rgba(0,0,0,.1);} .faq-chip:active{background:var(--primary);color:var(--on-primary);border-color:var(--primary);transform:translateY(0);} @media(hover:hover){#faqTrigger:hover > div:first-child{background:rgba(212,175,55,.4) !important;}} #faqTrigger:active > div:first-child{background:rgba(212,175,55,.4) !important;} /* entrance animation: fade + slide-up. opacity:0 di-scope ke .js (di-set main.js) -> tanpa JS konten tampil normal (no LCP/SEO risk). Hanya transform+opacity -> no CLS. Tambah class "fade-section" ke elemen BELOW-FOLD; JANGAN ke hero/h1 (LCP). */ .js .fade-section{opacity:0;transform:translateY(40px);transition:opacity .8s ease, transform .8s ease;} .js .fade-section.show{opacity:1;transform:none;} /* kilau judul (2026-09-18): satu keluarga dengan hero beranda. main.js memberi .cc-shine + warna --shine-base (warna asli elemen) & --shine-hi (emas; atau biru bila teksnya sendiri emas), lalu .go: judul halaman (h1) saat dimuat, sub judul (h2) saat masuk layar. Teks TAK PERNAH transparan (gradien selalu terisi) -> aman LCP/SEO. Garis emas ::after h2 tumbuh dari tengah. Class dicabut sesudah selesai supaya ganti tema tetap memakai warna CSS asli. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .js .cc-shine.go{background:linear-gradient(100deg,var(--shine-base) 38%,var(--shine-hi) 50%,var(--shine-base) 62%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:ccShine 1.6s ease .15s both;} } @keyframes ccShine{from{background-position:100% 0;}to{background-position:0 0;}} .js h2.cc-shine::after{transform:scaleX(0);transform-origin:center;} .js h2.cc-shine.go::after{animation:ccLine .7s cubic-bezier(.2,.8,.2,1) .35s both;} @keyframes ccLine{from{transform:scaleX(0);}to{transform:scaleX(1);}} @media (prefers-reduced-motion:reduce){.js .cc-shine.go{animation:none !important;}.js h2.cc-shine::after{transform:none !important;animation:none !important;}} /* mobile drawer overlay (di-toggle main.js bersama .mobile-nav.open). top:68px = di bawah header mobile; z-index 990 < header(1000); right:var(--drawer-w) = overlay hanya di area halaman, drawer bebas. */ .mobile-overlay{position:fixed;top:68px;left:0;right:var(--drawer-w);bottom:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .35s ease;z-index:990;} .mobile-overlay.show{opacity:1;visibility:visible;} /* ============================================================= HERO JUDUL HALAMAN (2026-08-04) Satu pola untuk halaman non-index. Sebelumnya ada 4 pola berbeda: banner bergradien (layanan), judul-di-seksi (tentang/lokasi), judul telanjang (syarat/kerjasama), dan coming-soon terpusat (karir/toko) -- dengan 3 ukuran h1 desktop (2.8/2.2/1.9rem), 2 ukuran mobile (1.6/1.5rem), 2 mekanisme aksen emas (::after 60px vs
50px), dan 3 jarak judul dari atas (138/163/260px). index.html SENGAJA dikecualikan -- hero-nya identitas beranda. tentang.html juga tidak dikonversi walau ikut pola ini: nilainya sudah identik lewat .section h1 miliknya sendiri, sementara latar seksinya bergantung :nth-child -- menyisipkan satu elemen membalik parity SEMUA seksi di halaman itu. Tidak sepadan untuk kerapian kode semata. Ukuran mobile ada di @media inline tiap halaman (CLAUDE.md sec.2). ============================================================= */ .page-hero{background:var(--surface-soft);padding:70px 20px 44px;text-align:center;width:100%;} .page-hero h1{font-size:2.2rem;font-weight:700;color:var(--primary);letter-spacing:.3px;display:inline-block;margin:0;} .page-hero h1 span{color:var(--accent);} .page-hero h1::after{content:"";display:block;width:60px;height:4px;background:var(--accent);margin:12px auto 0;border-radius:4px;} .page-hero p{max-width:700px;margin:18px auto 0;line-height:1.7;font-size:15px;color:var(--text-soft);} /* ============================================================ LEBAR KONTEN — disejajarkan dengan header (2026-09-20) ============================================================ Permintaan user: di lebar desktop, isi halaman harus segaris dengan header, di semua halaman. Masalahnya nyata dan besar di layar lebar. Diukur pada viewport 1920px sebelum perbaikan: .header-inner 353 -> 1553 (1200px) .grid beranda 20 -> 1885 (1865px!) <- nyaris selebar layar .footer-container 403 -> 1503 (1100px) Kartu layanan melebar hampir dua kali lipat header, sementara footer justru lebih sempit. Tidak ada satu pun tepi yang segaris. ASAL ANGKA 1160px, bukan 1200px: .header-inner memang max-width:1200px, TAPI ia punya padding 0 20px, jadi isi yang terlihat (logo, nav) mulai di 373, bukan 353. Yang dibandingkan mata adalah tepi logo, bukan tepi kotak tak terlihat. Kontainer selebar 1160px yang dipusatkan mendarat tepat di 373 -> 1533. Segaris dengan logo. KENAPA SELEKTORNYA "main .x", BUKAN ".x": Sebagian halaman mendefinisikan .grid{max-width:1200px} di