/* --------------------------------------------------------------------- Printsoft — tema situs publik, versi 2 (29-09-2026) Bagian 1 disalin APA ADANYA dari printsoft-redesign-slideshow-only.html supaya rancangannya tetap bisa dibandingkan baris per baris dengan berkas referensinya. Jangan menyisipkan penyesuaian di tengah bagian itu. Bagian 2 menata ulang kelas-kelas yang SUDAH dipakai view halaman lain (page/, article/). Halaman-halaman itu CMS-driven dan markup-nya tidak ditulis ulang: mengubahnya berarti membongkar pengikatan datanya demi perubahan yang bisa diselesaikan di stylesheet. Tema lama ada di backup/landingpage-2026-09-29/ — lihat README di sana untuk cara memulihkan. --------------------------------------------------------------------- */ /* ===================================================================== BAGIAN 1 — rancangan baru, salinan dari berkas referensi ===================================================================== */ :root{ --paper:#EBEDEF; --paper-alt:#DFE3E6; --surface:#F7F8F9; --ink:#141821; --ink-soft:#4C5058; --cyan:#0092C7; --cyan-dark:#00719C; --cyan-tint:#DCEDF5; --magenta:#D6006C; --magenta-tint:#F3DCE7; --yellow:#FFC800; --yellow-tint:#FAEFCE; --line:#D1D6DA; --line-on-ink:rgba(255,255,255,0.14); --radius:14px; --maxw:1180px; --ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,.brand-word{font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-0.01em;} h1{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.08;} h2{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.15;} h3{font-size:1.15rem;font-weight:600;} p{color:var(--ink-soft);} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;} .visually-hidden{position:absolute;left:-9999px;} :focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px;} /* header */ header{ position:sticky;top:0;z-index:50; background:rgba(235,237,239,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); } .nav-row{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;} .logo{display:flex;align-items:center;gap:10px;} .logo-img{height:34px;width:auto;} .logo-img-invert{filter:brightness(0) invert(1);} nav.primary{display:flex;gap:28px;font-size:0.94rem;font-weight:500;} nav.primary a{color:var(--ink-soft);position:relative;padding-bottom:4px;transition:color .18s;} nav.primary a::after{ content:"";position:absolute;left:0;bottom:0;width:0;height:2px; background:var(--cyan);border-radius:2px;transition:width .22s var(--ease); } nav.primary a:hover{color:var(--ink);} nav.primary a:hover::after{width:100%;} .nav-cta{display:flex;align-items:center;gap:14px;} .btn{ display:inline-flex;align-items:center;gap:8px; padding:11px 20px;border-radius:8px; font-size:0.92rem;font-weight:600; border:1px solid transparent;cursor:pointer; transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s, color .16s; } .btn:active{transform:scale(0.96);} .btn-primary{background:var(--cyan);color:#fff;} .btn-primary:hover{background:var(--cyan-dark);box-shadow:0 6px 18px rgba(0,146,199,0.28);transform:translateY(-1px);} .btn-outline{border-color:var(--ink);color:var(--ink);} .btn-outline:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px);} .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;} .menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:background .15s;} /* showcase */ .showcase{padding:0;} .showcase-frame{ position:relative;border-radius:var(--radius);overflow:hidden; aspect-ratio:21/8;border:1px solid var(--line);background:var(--paper-alt); } .showcase-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease);} .showcase-slide.active{opacity:1;} .showcase-slide img{width:100%;height:100%;object-fit:cover;} .showcase-slide::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:56%; background:linear-gradient(to top, rgba(20,24,33,0.5), transparent); pointer-events:none; } .showcase-caption{ position:absolute;left:22px;bottom:16px;color:#fff; font-weight:500;font-size:0.85rem;letter-spacing:0.01em; } .showcase-nav{ position:absolute;top:50%;transform:translateY(-50%); width:32px;height:32px;border-radius:50%;border:none; background:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center; cursor:pointer;font-size:1.05rem;line-height:1;color:var(--ink); opacity:0;transition:opacity .2s, background .18s; } .showcase-frame:hover .showcase-nav,.showcase-frame:focus-within .showcase-nav{opacity:1;} .showcase-nav:hover{background:#fff;} .showcase-nav.prev{left:14px;} .showcase-nav.next{right:14px;} .showcase-dots{display:flex;gap:6px;justify-content:center;margin-top:14px;} .showcase-dot{width:6px;height:6px;border-radius:50%;background:var(--line);border:none;cursor:pointer;padding:0;transition:background .2s,width .2s;} .showcase-dot.active{background:var(--cyan);width:16px;border-radius:3px;} /* stat strip */ .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-alt);} .stats-row{display:flex;justify-content:space-between;padding:26px 0;gap:20px;flex-wrap:wrap;} .stat-item{flex:1;min-width:150px;border-left:3px solid var(--stat-color,var(--cyan));padding-left:16px;} .stat-item .num{font-family:'Sora';font-weight:700;font-size:1.5rem;color:var(--stat-color,var(--cyan));display:block;} .stat-item .lbl{font-size:0.85rem;color:var(--ink-soft);} /* section heading pattern */ .section{padding:88px 0;} .section-head{max-width:640px;margin-bottom:48px;} .section-head p{margin-top:12px;font-size:1.02rem;} /* products */ .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .product-card{ border:1px solid var(--line);border-top:4px solid var(--accent,var(--cyan));border-radius:var(--radius); padding:30px 28px;background:var(--surface);position:relative; transition:border-color .2s, transform .22s var(--ease), box-shadow .22s var(--ease); } .product-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(20,24,33,0.1);} .chip{ position:absolute;top:20px;right:24px;font-size:0.72rem;font-weight:600; padding:4px 10px;border-radius:20px;background:var(--chip-bg);color:var(--chip-fg); } .p-icon-wrap{ width:52px;height:52px;border-radius:14px;background:var(--accent-tint,var(--cyan-tint)); display:flex;align-items:center;justify-content:center;margin-bottom:20px; transition:transform .25s var(--ease); } .product-card:hover .p-icon-wrap{transform:rotate(-6deg) scale(1.06);} .p-icon{width:26px;height:26px;} .product-card h3{margin-bottom:10px;} .product-card p{font-size:0.94rem;margin-bottom:16px;} .product-list{list-style:none;font-size:0.86rem;color:var(--ink-soft);margin-bottom:20px;} .product-list li{padding:4px 0 4px 16px;position:relative;} .product-list li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent,var(--magenta));} .card-link{font-size:0.9rem;font-weight:600;color:var(--accent,var(--cyan-dark));display:inline-flex;align-items:center;gap:6px;} .card-link .go{transition:transform .18s var(--ease);} .card-link:hover .go{transform:translateX(4px);} /* why us */ .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 44px;} .why-item{display:flex;gap:18px;align-items:flex-start;} .why-icon-wrap{ width:48px;height:48px;border-radius:12px;background:var(--accent-tint,var(--cyan-tint)); display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:transform .22s var(--ease); } .why-item:hover .why-icon-wrap{transform:rotate(-6deg) scale(1.06);} .why-icon{width:24px;height:24px;} .why-item h3{margin-bottom:6px;} .why-item p{font-size:0.94rem;} /* how it works */ .flow{background:var(--ink);color:var(--paper);} .flow .section-head p{color:#B9BCC4;} .flow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;} .flow-step{padding:0 28px 0 0;position:relative;} .flow-step:not(:last-child){border-right:1px solid var(--line-on-ink);} .flow-step + .flow-step{padding-left:28px;} .flow-num{ font-family:'Sora';font-weight:700;font-size:0.9rem;color:var(--ink); width:34px;height:34px;border-radius:50%;background:var(--step-color,var(--cyan)); display:flex;align-items:center;justify-content:center;margin-bottom:16px; } .flow-step h3{color:var(--paper);margin-bottom:10px;} .flow-step p{color:#AEB2BC;font-size:0.94rem;} /* testimonials */ .testi-track{display:flex;gap:20px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;} .testi-track::-webkit-scrollbar{height:6px;} .testi-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;} .testi-card{ flex:0 0 340px;scroll-snap-align:start; border:1px solid var(--line);border-radius:var(--radius); padding:26px 26px;background:var(--paper-alt); transition:transform .2s var(--ease), border-color .2s; } .testi-card:hover{transform:translateY(-4px);border-color:var(--testi-color,var(--cyan));} .testi-quote{font-size:0.95rem;color:var(--ink);margin-bottom:18px;} .testi-who{display:flex;align-items:center;gap:12px;} .testi-avatar{ width:42px;height:42px;border-radius:50%;background:var(--testi-color,var(--ink));color:#fff; display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;font-family:'Sora';flex-shrink:0; overflow:hidden;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--testi-color,var(--ink)); } .testi-avatar img{width:100%;height:100%;object-fit:cover;} .testi-name{font-size:0.88rem;font-weight:600;} .testi-loc{font-size:0.8rem;color:var(--ink-soft);} /* cta band */ .cta-band{ background:var(--ink);color:var(--paper);border-radius:20px; padding:56px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; margin:0 auto;max-width:var(--maxw);position:relative;overflow:hidden; } .cta-band h2{color:var(--paper);} .cta-band p{color:#B9BCC4;} .cta-band::before{ content:"";position:absolute;right:-50px;top:-60px;width:200px;height:200px; border-radius:50%;border:1.5px solid var(--cyan);opacity:0.5; } .cta-band::after{ content:"";position:absolute;right:20px;bottom:-70px;width:140px;height:140px; border-radius:50%;border:1.5px solid var(--magenta);opacity:0.4; } .cta-band h2{margin-bottom:8px;} .cta-actions{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1;} .cta-band .btn-outline{border-color:var(--paper);color:var(--paper);} .cta-band .btn-outline:hover{background:var(--paper);color:var(--ink);} /* footer */ footer{background:var(--ink);color:#C7C9CF;padding:64px 0 28px;} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:48px;} .foot-brand p{color:#9EA1AA;font-size:0.9rem;max-width:280px;margin-top:14px;} .foot-col h4{font-family:'Sora';font-size:0.85rem;color:var(--paper);margin-bottom:16px;font-weight:600;} .foot-col ul{list-style:none;font-size:0.9rem;} .foot-col li{margin-bottom:10px;} .foot-col a{color:#9EA1AA;transition:color .15s;} .foot-col a:hover{color:var(--cyan);} .foot-bottom{border-top:1px solid var(--line-on-ink);padding-top:22px;display:flex;justify-content:space-between;font-size:0.82rem;color:#7D808A;flex-wrap:wrap;gap:10px;} .foot-social{display:flex;gap:14px;} .foot-social a{width:32px;height:32px;border:1px solid var(--line-on-ink);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s;} .foot-social a:nth-child(1):hover{background:var(--magenta);border-color:var(--magenta);} .foot-social a:nth-child(2):hover{background:var(--cyan);border-color:var(--cyan);} .foot-social a:nth-child(3):hover{background:var(--yellow);border-color:var(--yellow);} .foot-social a:hover svg{fill:#fff;} .foot-social svg{width:15px;height:15px;fill:#C7C9CF;transition:fill .18s;} @media(max-width:920px){ .product-grid{grid-template-columns:1fr;} .flow-steps{grid-template-columns:1fr;gap:28px;} .why-grid{grid-template-columns:1fr;gap:28px;} .flow-step{border-right:none!important;padding:0!important;} .foot-grid{grid-template-columns:1fr 1fr;} nav.primary{display:none;} .menu-toggle{display:block;} } @media(max-width:600px){ .stats-row{justify-content:flex-start;} .cta-band{padding:40px 26px;flex-direction:column;align-items:flex-start;} .foot-grid{grid-template-columns:1fr;} .showcase-frame{aspect-ratio:4/5;} .showcase-nav{opacity:1;width:30px;height:30px;font-size:0.95rem;} .showcase-caption{font-size:0.78rem;left:14px;bottom:12px;} } /* ===================================================================== BAGIAN 2 — penyesuaian untuk halaman yang sudah ada Bootstrap 3 masih dimuat (datatables, select2, datetimepicker ikut bergantung padanya lewat js_css.php), jadi .container dan grid-nya tetap hidup. Yang dilakukan di sini hanya menyelaraskan lebar, warna, dan jarak halaman-halaman itu dengan rancangan baru. ===================================================================== */ /* Lebar isi disamakan dengan .wrap supaya halaman dalam tidak lebih lebar atau lebih sempit daripada beranda. */ .container { max-width: var(--maxw); width: 100%; padding-left: 24px; padding-right: 24px; } /* ---- breadcrumb ---- */ .container-breadcrumb { background: var(--paper-alt); border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--ink-soft); padding: 14px 0; } .container-breadcrumb a { color: var(--ink-soft); } .container-breadcrumb a:hover { color: var(--cyan-dark); } .container-breadcrumb .fa { font-size: .7rem; color: var(--line); } /* ---- kerangka halaman dalam ---- */ .container-page, .container-body { padding: 56px 0 88px; } .wrap-page { max-width: 820px; } .page-title h3, .container-page h3, .container-page h1.title, .title { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.01em; color: var(--ink); font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; margin: 0 0 8px; } .page-title { margin-bottom: 24px; } .page-content { font-size: 1rem; color: var(--ink-soft); } .page-content h1, .page-content h2, .page-content h3, .page-content h4 { font-family: 'Sora', sans-serif; color: var(--ink); margin: 28px 0 10px; } .page-content p { margin-bottom: 14px; } .page-content img { border-radius: var(--radius); } .page-content a { color: var(--cyan-dark); text-decoration: underline; } /* ---- kartu artikel (beranda + daftar artikel memakai kelas yang sama) ---- */ .container-article-wrapper .row, .container-article .row { display: flex; flex-wrap: wrap; } .container-article-wrapper [class*='col-'], .container-article [class*='col-'] { display: flex; margin-bottom: 24px; } .box-article { display: flex; flex-direction: column; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease); } .box-article:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(20,24,33,.1); } .box-article-image { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--paper-alt); } .box-article-image img { width: 100%; height: 100%; object-fit: cover; } .container-btn-readmore { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20,24,33,.45); opacity: 0; transition: opacity .2s; } .box-article:hover .container-btn-readmore { opacity: 1; } .box-article-text { padding: 20px 22px 24px; flex: 1 1 auto; } .box-article-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.05rem; margin-bottom: 8px; } .box-article-title a { color: var(--ink); } .box-article-title a:hover { color: var(--cyan-dark); } .box-article-description { font-size: .92rem; color: var(--ink-soft); } .container-more-article { text-align: center; margin-top: 8px; } /* ---- testimoni (halaman Testimoni memakai kelas lama) ---- */ .container-page .container-testimonial { background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 20px; height: auto; } .testimonial-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .testimonial-photo { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--cyan); } .testimonial-photo img { width: 100%; height: 100%; object-fit: cover; } .testimonial-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: .92rem; } .testimonial-desc { font-size: .8rem; font-weight: 400; } .testimonial-desc a { color: var(--ink-soft); text-decoration: underline; } .testimonial-text { font-size: .95rem; color: var(--ink); } /* ---- daftar produk ---- */ .product-wrap { --accent: var(--cyan); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; } /* Kotak gambar produk: BINGKAINYA yang dikunci, bukan gambarnya. Berkas thumbnail produk berbeda-beda ukuran dan rasionya, dan sebelum ini dipasang apa adanya sehingga tiap kartu punya tinggi sendiri. Dengan aspect-ratio tetap + object-fit:contain, semua kartu sejajar tanpa satu gambar pun terpotong — dan yang TIDAK punya gambar mengisi bingkai yang sama persis, jadi barisnya tetap rata. */ .container-product-image { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--line); } .container-product-image img { width: 100%; height: 100%; object-fit: contain; padding: 14px; border-radius: 0; } /* Pengganti saat produk belum punya gambar. Inisial, bukan ikon "gambar rusak" atau kotak abu kosong: kotak kosong terbaca sebagai halaman yang gagal memuat, sedangkan inisial terbaca sebagai pilihan. */ .product-image-kosong { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: .04em; } /* Nama produk dicetak untuk SEMUA kartu. Sebelum ini kartunya hanya memuat short_description, jadi identitas produk sepenuhnya menumpang gambar. */ .product-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); margin: 0 0 10px; } .product-description { font-size: .96rem; color: var(--ink-soft); } .container-readmore-product { margin-top: 18px; } @media (max-width: 991px) { /* satu kolom: bingkai 4:3 selebar layar jadi terlalu tinggi */ .container-product-image { aspect-ratio: 16 / 7; margin-bottom: 16px; } } /* ---- halaman detail produk --------------------------------------------- Sebelum ini sama sekali tidak punya gaya di tema v2: sidebar-nya sederet

telanjang yang dilengketkan lewat position:fixed dari JS, dan isinya HTML CKEditor yang judulnya semua

. Hasilnya dua kolom yang sama-sama rata kiri tanpa hierarki apa pun. */ .container-product-show { padding-bottom: var(--sp-section); } .product-show-head { padding: 8px 0 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line); } .product-show-head h1 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: var(--fs-h1); line-height: 1.2; color: var(--ink); margin: 0; } /* Grid, bukan kolom bootstrap: sidebarnya lebar tetap supaya judul panjang tidak menggeser lebar kolom isi dari satu produk ke produk lain. */ .product-show-grid { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: start; } .product-show-grid.no-toc { grid-template-columns: 1fr; } /* position:sticky menggantikan seluruh vjs_product_show.php — JS lama mengukur lebar pembantu lalu menyetel width/top dalam px pada tiap scroll dan resize. Sticky melakukan hal yang sama tanpa satu baris JS pun, dan tidak bisa meleset saat header berubah tinggi. */ .container-menu-product { position: sticky; top: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; } .cmp-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 8px; } .separate-page-title { height: 3px; width: 34px; background: var(--cyan); border-radius: 2px; margin-bottom: 14px; } .container-menu-product nav { display: flex; flex-direction: column; } .btn-menu-product { display: block; padding: 7px 10px; margin: 0 -10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); text-decoration: none; transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); } .btn-menu-product:hover, .btn-menu-product:focus { background: var(--cyan-tint); border-left-color: var(--cyan); color: var(--cyan-dark); text-decoration: none; } /* judul tingkat dua dan tiga dijorokkan supaya susunannya terbaca */ .btn-menu-product.lv-2 { padding-left: 22px; } .btn-menu-product.lv-3 { padding-left: 34px; font-size: var(--fs-xs); } /* ---- isi konten CMS produk ---- Deskripsi produk ditulis di CKEditor dan hampir seluruh judulnya

— kalau dibiarkan, tiap bagian tampil sebesar judul halaman dan tidak ada hierarki sama sekali. Ukurannya diturunkan di sini, BUKAN dengan mengubah isi CMS: yang tersimpan itu tulisan pemiliknya, dan mengubah tag di database berarti menyunting naskah orang demi tampilan. */ .container-product-content { min-width: 0; font-size: var(--fs-base); line-height: 1.7; color: var(--ink-soft); } .container-product-content h1, .container-product-content h2 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); margin: 38px 0 14px; scroll-margin-top: 24px; } .container-product-content h3 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: var(--fs-md); line-height: 1.35; color: var(--ink); margin: 28px 0 10px; scroll-margin-top: 24px; } .container-product-content > :first-child { margin-top: 0; } .container-product-content p { margin: 0 0 15px; } .container-product-content ul, .container-product-content ol { margin: 0 0 15px; padding-left: 22px; } .container-product-content ul { list-style: disc; } .container-product-content ol { list-style: decimal; } .container-product-content li { margin-bottom: 6px; } /* CKEditor menuliskan width/height px pada tiap gambar (mis. 800x533); tanpa ini gambar produk menonjol keluar kolom di layar sempit. */ .container-product-content img { max-width: 100%; height: auto !important; width: auto; border-radius: 10px; border: 1px solid var(--line); margin: 6px 0 4px; } .container-product-content table { max-width: 100%; } /* `:not(.btn)` WAJIB di sini. Tanpa itu selektor ini (0,1,1) mengalahkan `.btn-info` (0,1,0), dan tombol di .product-show-cta — yang memang berada DI DALAM blok konten ini — kehilangan warna teks putihnya: cyan gelap di atas latar cyan, praktis tidak terbaca. Pola yang sama berlaku untuk tiap aturan ` a { color }` yang di dalamnya mungkin ada tombol. */ .container-product-content a:not(.btn) { color: var(--cyan-dark); } .product-kosong { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px; color: var(--ink-soft); } .product-show-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); } @media (max-width: 991px) { /* daftar isi pindah ke atas isinya, dan berhenti lengket: di layar sempit panel lengket memakan tinggi layar yang justru dibutuhkan isinya */ .product-show-grid { grid-template-columns: 1fr; gap: 24px; } .container-menu-product { position: static; } .container-menu-product nav { max-height: 240px; overflow: auto; } } /* ---- tombol bootstrap disamakan dengan .btn rancangan baru ---- */ .btn-info, .btn-warning, .btn-primary.btn, .btn-default { border-radius: 8px; font-weight: 600; font-size: .92rem; padding: 10px 20px; border: 1px solid transparent; transition: background .16s, box-shadow .16s var(--ease), transform .16s var(--ease); } .btn-info { background: var(--cyan); color: #fff; } .btn-default { background: transparent; border-color: var(--line); color: var(--ink); } .btn-default:hover, .btn-default:focus { background: var(--paper-alt); color: var(--ink); border-color: var(--line); } .btn-info:hover, .btn-info:focus { background: var(--cyan-dark); color: #fff; box-shadow: 0 6px 18px rgba(0,146,199,.28); transform: translateY(-1px); } .btn-warning { background: var(--yellow); color: var(--ink); } .btn-warning:hover, .btn-warning:focus { background: #E6B400; color: var(--ink); transform: translateY(-1px); } .form-control { border-radius: 8px; border-color: var(--line); box-shadow: none; } .form-control:focus { border-color: var(--cyan); box-shadow: none; } /* ---- pagination ---- */ .container-pagination { margin-top: 32px; } .container-pagination a, .container-pagination strong { display: inline-block; padding: 7px 13px; margin-right: 6px; border: 1px solid var(--line); border-radius: 8px; font-size: .88rem; color: var(--ink-soft); background: var(--surface); } .container-pagination strong { background: var(--cyan); border-color: var(--cyan); color: #fff; } .container-pagination a:hover { border-color: var(--cyan); color: var(--cyan-dark); } /* ---- tabel di dalam konten CMS (halaman harga memakainya) ---- */ .container-page table { background: var(--surface); } .container-page .table > thead > tr > th { border-bottom-color: var(--line); color: var(--ink); } .container-page .table > tbody > tr > td { border-top-color: var(--line); } /* Sisa header lama yang tidak dipakai lagi. Disembunyikan, bukan dihapus dari view: kalau temanya dipulihkan, markup-nya harus utuh. */ .helper-container-header { display: none; } /* ---- ikon sosmed dari CMS memakai Font Awesome, bukan SVG mati ---- Jumlah akunnya ditentukan menu Admin, jadi warna hover-nya dioper lewat --sos-color dari view; aturan :nth-child di bagian 1 hanya benar untuk tepat tiga ikon. */ .foot-social a i { font-size: 15px; color: #C7C9CF; transition: color .18s; } .foot-social a:hover { background: var(--sos-color, var(--cyan)); border-color: var(--sos-color, var(--cyan)); } .foot-social a:hover i { color: #fff; } /* Menu atas yang sedang dibuka ditandai — az_get_menu mengirim penandanya lewat class="active", dan tanpa aturan ini penandanya tidak terlihat. */ nav.primary a.active { color: var(--ink); } nav.primary a.active::after { width: 100%; } .foot-bottom a { color: #7D808A; } .foot-bottom a:hover { color: var(--cyan); } /* Menu mobile dibuka lewat KELAS, bukan gaya inline seperti di berkas rancangan: dengan gaya inline, menutup menu lalu melebarkan layar meninggalkan display:none yang menempel dan navigasi desktop ikut hilang. */ @media (max-width: 920px) { nav.primary.is-open { display: flex; flex-direction: column; gap: 14px; position: absolute; top: 76px; left: 0; right: 0; background: var(--paper); padding: 20px 24px; border-bottom: 1px solid var(--line); } } /* ---- pita subscribe (beranda) ---- Bentuknya mengikuti .cta-band tapi bertumpu pada .surface, bukan tinta: dua blok gelap berturut-turut di ujung halaman membuat CTA utama kehilangan penekanannya. */ .subscribe-band { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .subscribe-band h3 { font-family: 'Sora', sans-serif; margin-bottom: 4px; } .subscribe-band p { font-size: .92rem; margin: 0; } .subscribe-form { display: flex; gap: 10px; flex: 0 1 420px; } .subscribe-form .form-control { height: 42px; } .subscribe-form .btn { white-space: nowrap; } @media (max-width: 600px) { .subscribe-band { padding: 26px; } .subscribe-form { flex: 1 1 100%; } } /* Judul bagian artikel di beranda memakai .section-head, jadi .container bootstrap di dalamnya tidak boleh menambah lebar atau padding lagi. */ .section .container-article, .section .container-article .container { padding: 0; width: 100%; } /* ===================================================================== BAGIAN 3 — perapian teks dan footer (29-09-2026, menyusul) Rancangan aslinya satu halaman buatan tangan: setiap teksnya punya kelas sendiri, jadi `*{margin:0;padding:0}` di bagian 1 tidak merugikan apa pun di sana. Di sini beda — sebagian besar isi halaman datang dari editor CMS sebagai HTML mentah (

,