/*==============================
Override khusus Basecamp Outdoor Kendari di atas style.css tema asli.
PENTING: file ini WAJIB di-link di app/layout.tsx SETELAH style.css.
style.css sendiri men-declare "--theme-color" dkk di :root (default oranye
tema aslinya, lihat style.css baris ~89) -- kalau override warna ditaruh di
app/globals.css (di-bundle Next lewat yang muncul
LEBIH DULU di , sebelum manual), cascade :root vs :root kalah
karena urutan source, bukan specificity. Makanya token warna brand & semua
override tema hidup di sini sebagai plain stylesheet, bukan di
app/globals.css. Lihat PRD bagian 12 (Preferensi Desain & Palet Warna).
Hanya 2 warna brand resmi (#023E25 hijau tua, #DFCDA1 krem) + netral
hitam/putih/abu -- tidak ada warna ketiga (terracotta/oranye dihapus).
============================== */
:root {
--theme-color: #023e25;
/* hijau tua brand -- tombol utama, ikon, aksen, hover link */
--theme-color2: #dfcda1;
/* krem brand -- aksen/badge di atas latar hijau tua atau gelap */
--title-color: #111111;
/* judul & overlay hero -- netral nyaris hitam, bukan warna brand */
--body-color: #262626;
/* teks body -- abu gelap netral (bnw) */
--smoke-color: #fafafa;
/* bg section alternatif -- off-white netral */
--smoke-color2: #f5f5f4;
/* bg section lembut -- abu sangat muda netral (bnw, tanpa rona krem) */
--th-border-color: #e5e5e5;
/* garis pembatas -- abu muda netral */
--th-border-color2: rgba(2, 62, 37, 0.12);
--th-border-color3: rgba(2, 62, 37, 0.08);
--white-color: #ffffff;
--black-color4: #023e25;
/* dipakai .footer-default sebagai bg -- disamakan dgn --theme-color */
}
.text-cream {
color: #dfcda1 !important;
}
.bg-cream {
background-color: #dfcda1 !important;
}
/* ==============================
Perbaikan komposisi warna khusus footer (bg hijau tua brand)
Beberapa elemen di template asli mewarisi warna teks netral gelap
(--body-color) atau warna aksen yang kebetulan sama dengan warna
latar (--theme-color di atas --theme-color / --black-color4),
sehingga nyaris tak terbaca di atas footer hijau tua. Dipaksa
netral terang / krem brand di sini, tanpa menambah warna baru.
============================== */
.footer-default {
color: rgba(255, 255, 255, 0.75);
}
.footer-default .widget_nav_menu a {
color: rgba(255, 255, 255, 0.75);
}
.footer-default .widget_nav_menu a:hover,
.footer-default .widget_nav_menu a:hover:before {
color: var(--theme-color2);
opacity: 1;
}
.footer-default .copyright-text a {
color: var(--white-color);
}
.footer-default .copyright-text a:hover {
color: var(--theme-color2);
}
.footer-default .th-social a:hover {
background-color: var(--theme-color2);
border-color: var(--theme-color2);
color: var(--title-color);
}
/* ==============================
Matikan custom scrollbar bawaan style.css (track merah + thumb
bergaris di tepi kanan browser) -- kembali ke scrollbar default
browser.
============================== */
body::-webkit-scrollbar {
width: auto;
height: auto;
}
body::-webkit-scrollbar-track {
background: transparent;
box-shadow: none;
-webkit-box-shadow: none;
}
body::-webkit-scrollbar-thumb {
background-color: initial;
background-image: none;
}
/* ==============================
Komponen spinning "*** DIPERCAYA SEJAK TAHUN 2022" di hero
(.circle-title-anime, lihat components/home/CircleTitleAnime.tsx) --
40 slot huruf berjarak tetap 11deg/karakter (lihat style.css asli).
style.css nge-posisikan .hero-1 .circle-tag selalu position:absolute
dengan patokan "bottom:Npx" dari bawah foto hero, dan angka itu (220px
di <=1199px, 225px di <=575px, 315px di <=440px) ternyata menimpa
tombol CTA "Sewa Sekarang/Lihat Katalog" begitu teks judul & tombol
kepakai konten Bahasa Indonesia kita (beda dari teks demo asli yang
lebih pendek) -- makanya dulu solusinya cuma disembunyikan total di
<=575px.
Sekarang panjang title1/title2/text di komponen Hero.tsx sudah
disamakan antar slide (lihat komentar di sana) sehingga tinggi foto
hero TIDAK berubah dari slide ke slide -- jadi kita bisa pasang satu
angka "bottom" tetap yang selalu jatuh di ruang kosong padding-bawah
foto, di bawah baris tombol, bukan cuma pas di satu ukuran layar yang
kebetulan dites.
Satu jebakan yang perlu diinget: "bottom" pada position:absolute itu
dihitung dari containing block-nya. .hero-1 (elemen paling luar) BUKAN
containing block yang aman dipakai di sini, karena di <=1199px
.client-group-wrap (kartu rating) ikut alur normal/flow di bawah foto
(lihat style.css), jadi tinggi .hero-1 = tinggi foto + tinggi kartu
rating itu -- "bottom" yang dihitung dari situ bisa jatuh di LUAR foto
(nimpa kartu rating), bukan di dalamnya. Makanya di Hero.tsx, Swiper +
.icon-box + .circle-tag dibungkus .hero-photo-frame (position:relative,
tingginya presis setinggi foto/autoHeight slide aktif, lihat komentar
di sana) -- .circle-tag jadi diposisikan relatif ke foto itu sendiri,
bukan ke .hero-1, di breakpoint manapun. Sudah diverifikasi lewat
pengukuran getBoundingClientRect tiap breakpoint & tiap slide: jarak ke
baris tombol CTA di atasnya selalu >35px.
Di <=1199px posisinya digeser ke pojok KIRI (bukan di-tengah) supaya
tidak berebut ruang dengan .icon-box (panah slider) -- keduanya
sama-sama nempel di bawah foto sekarang (lihat aturan .icon-box di
bawah) tapi beda sisi kiri/kanan, jadi tidak pernah bertumpuk
horizontal maupun vertikal (sudah dicek lewat getBoundingClientRect).
.icon-box (panah slider) sendiri ikut jebakan containing-block yang
sama: nilai "bottom" bawaan style.css (227px desktop, 220px di
<=1199px) awalnya diniatkan buat naruhnya di bagian bawah foto, tapi
karena foto hero kita jauh lebih tinggi dari demo asli (judul 3 baris,
padding gede), angka itu malah mendarat di TENGAH foto secara visual
di mobile/tablet -- bukan di bawah. Sama seperti .circle-tag, di
<=1199px angka itu diganti "bottom:24px" (relatif ke .hero-photo-frame
yang presisi setinggi foto) supaya konsisten nempel di bawah.
============================== */
.hero-1 .hero-photo-frame {
position: relative;
}
@media (max-width: 1199px) {
.hero-1 .circle-tag {
bottom: 24px;
left: 15px;
right: auto;
transform: none;
}
.hero-1 .icon-box {
bottom: 24px;
}
}
/* ==============================
Badge Google Review di .client-group-wrap (lihat Hero.tsx) --
gantiin foto avatar-1.jpg bawaan template dengan logo
assets/img/icon/google-review.svg.
avatar-1.jpg lama kebetulan file-nya persis 100x100px, jadi .thumb
di style.css TIDAK PERNAH punya aturan ukuran sendiri -- ukurannya
cuma numpang ukuran asli file gambarnya. google-review.svg cuma
punya viewBox (tanpa width/height intrinsik) dan rasio lebar:tinggi
beda jauh dari foto lama (kotak vs persegi panjang ~1.8:1), jadi
begitu ditaruh tanpa ukuran eksplisit dia jatuh ke default browser
300x150 -- makanya perlu diatur manual di sini, sekalian dibikin
lebih besar & teks di sampingnya (.box-text, base-nya 18px di
style.css) diperkecil biar proporsional.
.thumb & img-nya dikasih flex:none/flex-shrink:0 supaya ukurannya
FIX di semua lebar layar -- tanpa ini .thumb (flex item, tanpa
flex-basis) ikut mengecil kalau baris "[icon] 4.9 dari 240+ ulasan
pelanggan, 3 cabang" kepanjangan buat kontainernya (kejadian di
375-575px), jadi ukuran logo tidak konsisten tiap breakpoint --
ini penyebab tampilannya kerasa "berubah-ubah" dibanding dulu.
============================== */
.hero-1 .client-group-wrap .thumb {
flex: none;
}
.hero-1 .client-group-wrap .thumb img {
width: 96px;
height: auto;
}
.hero-1 .client-group-wrap .box-text {
font-size: 14px;
}
/* ==============================
Kata highlight di judul hero (Hero.tsx, "Siapkan"/"Dekat"/"Tanpa") pakai
class ".text-theme2" (krem brand) alih-alih ".text-theme" (hijau tua)
bawaan tema -- kata itu "mengapung" di atas foto, dan hijau tua nyaris
tak terbaca kalau foto slide kebetulan gelap.
style.css sendiri punya "display: inline-block" khusus buat
".hero-title span .text-theme" (baris ~14153) supaya kata highlight
tidak ikut kena "display: block" dari aturan umum ".hero-title span"
(baris ~14150). Aturan itu men-target nama class ".text-theme" secara
harfiah, jadi TIDAK match lagi begitu class-nya ".text-theme2" -- kata
highlight jatuh balik ke display:block (ambil baris sendiri), yang
menggeser wrap teks title2. Direplikasi di sini khusus utk
".text-theme2" supaya behavior layout-nya identik, cuma warnanya beda.
============================== */
.hero-title span .text-theme2 {
display: inline-block;
}
/* ==============================
Tombol "Sewa Sekarang" di hero (Hero.tsx, .th-btn.th-btn-lg tanpa
.style-border) -- default-nya solid hijau tua (--theme-color), sama
masalahnya kayak highlight judul di atas: nyaris menyatu kalau foto
slide kebetulan gelap. Diganti krem (--theme-color2) di sini.
PENTING: HANYA background/color yang di-override (+ warna sweep hover
lewat :before/:after) -- TIDAK menambah border/padding apa pun. Sempat
dicoba pakai varian ".style3" bawaan tema (bg krem juga), tapi
".style3" ikut bawa "border: 2px solid" (lihat style.css) yang beda
dari tombol sebelahnya ".style-border" (cuma 1px) -- bikin dua tombol
jadi tidak sama tinggi/spacing. Jadi di sini box tombol dijaga persis
sama seperti ".th-btn.th-btn-lg" default, cuma warnanya beda. Scoped ke
".hero-style1" + ":not(.style-border)" supaya tombol outline
"Lihat Katalog" di sebelahnya tidak ikut kena.
============================== */
.hero-style1 .btn-wrap > .th-btn:not(.style-border) {
background: var(--theme-color2);
color: var(--title-color);
}
.hero-style1 .btn-wrap > .th-btn:not(.style-border):before,
.hero-style1 .btn-wrap > .th-btn:not(.style-border):after {
background: var(--title-color);
}
.hero-style1 .btn-wrap > .th-btn:not(.style-border):focus,
.hero-style1 .btn-wrap > .th-btn:not(.style-border):hover,
.hero-style1 .btn-wrap > .th-btn:not(.style-border):active {
background: var(--theme-color2);
color: var(--white-color);
}
/* ==============================
HALAMAN KATALOG (/katalog)
Semua di bawah ini scoped ke class-class halaman katalog saja. Prinsipnya
sama seperti sisa project: bentuk & tipografi tetap pinjam komponen tema
(".th-btn", ".filter-menu", ".th-sort-bar", ".th-product"), yang ditulis di
sini cuma yang memang tidak disediakan tema.
============================== */
/* Pil ".breadcumb-menu" itu bidang ber-mask yang sisi bawahnya menyatu
dengan halaman, jadi warnanya HARUS sama dengan section tepat di bawahnya.
Default tema mengikuti -- benar untuk shop.html
(section produknya transparan/abu), tapi section katalog kita ".bg-white"
biar sebaris dengan section-section beranda. Lihat prop "latarBawah" di
components/layout/Breadcumb.tsx. */
.bg-smoke2 .breadcumb-on-white .breadcumb-menu:before {
background: var(--white-color);
}
/* ------ Chip filter kategori ------
".filter-menu" tema aslinya buat filter isotope: rata tengah, dan state
"active"-nya cuma mengubah warna border + teks jadi putih TANPA mengisi
latarnya (di tema, chip aktif hanya terbaca karena ikut hover). Teks putih
di atas chip transparan = tidak terbaca, jadi state aktif di sini diisi
solid hijau brand. Sekalian ":after" (sweep hover kanan) disamakan ke hijau
-- tema cuma meng-override ":before", sisanya ketinggalan hitam. */
.katalog-filter {
justify-content: flex-start;
gap: 12px;
margin-bottom: 28px;
}
/* Padding & gap-nya lebih ketat dari default ".filter-menu .th-btn" (15px
30px) supaya 8 chip (Semua + 7 kategori) muat satu baris penuh di container
lebar; dengan ukuran default, chip terakhir jatuh sendirian ke baris kedua. */
.katalog-filter .th-btn {
padding: 11px 16px;
font-size: 14px;
gap: 8px;
}
.katalog-filter .th-btn:before,
.katalog-filter .th-btn:after {
background-color: var(--theme-color);
}
.katalog-filter .th-btn.active {
background-color: var(--theme-color);
border-color: var(--theme-color);
color: var(--white-color);
}
/* Ikon kategori dipakai sebagai MASK (lihat components/ui/MaskIcon.tsx):
warna stroke di file svg-nya hardcoded #123D2C, bukan hijau brand -- yang
dipakai cuma bentuknya, warnanya dari background-color di sini. Gara-gara
itu juga ikonnya bisa ikut berubah putih saat chip aktif/hover. */
.katalog-filter .katalog-filter-icon {
width: 20px;
height: 20px;
flex: none;
background-color: var(--theme-color);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
transition: background-color 0.4s linear;
}
.katalog-filter .th-btn:hover .katalog-filter-icon,
.katalog-filter .th-btn.active .katalog-filter-icon {
background-color: var(--white-color);
}
.katalog-filter-count {
font-size: 12px;
font-weight: 600;
line-height: 1;
padding: 5px 8px;
border-radius: 20px;
background-color: var(--smoke-color2);
color: var(--body-color);
transition: all 0.4s linear;
}
.katalog-filter .th-btn:hover .katalog-filter-count,
.katalog-filter .th-btn.active .katalog-filter-count {
background-color: rgba(255, 255, 255, 0.2);
color: var(--white-color);
}
/* Di layar kecil 8 chip akan menumpuk jadi 3-4 baris dan mendorong grid
produk jauh ke bawah -- diubah jadi satu strip yang digeser horizontal
(scrollbar-nya disembunyikan, geser pakai jari/trackpad). Margin negatif
kiri-kanan (persis sebesar padding .container, 12px) bikin strip-nya
"menabrak" tepi layar biar kelihatan memang
bisa digeser, bukan terpotong. */
@media (max-width: 991px) {
.katalog-filter {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0 -12px 24px;
padding: 2px 12px;
gap: 10px;
}
.katalog-filter::-webkit-scrollbar {
display: none;
}
.katalog-filter .th-btn {
flex: none;
padding: 11px 16px;
}
}
/* ------ Baris jumlah hasil + pengurut ------ */
.katalog-sort {
border-top: 1px solid var(--th-border-color);
padding-top: 22px;
margin-bottom: 32px;
}
.katalog-sort .col-md-auto {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.katalog-sort-label {
margin: 0;
font-size: 14px;
color: var(--body-color);
white-space: nowrap;
}
/* Select tema latarnya putih tanpa garis -- di atas section putih jadi
tidak kelihatan bidangnya sama sekali. */
.katalog-sort select {
border: 1px solid var(--th-border-color);
min-width: 200px;
}
/* Di bawah md, dua kolom baris ini menumpuk jadi dua baris penuh: label +
select dibikin mengisi lebar biar sejajar dengan teks jumlah hasil di
atasnya, bukan menggantung di kiri. */
@media (max-width: 767px) {
.katalog-sort .col-md-auto {
justify-content: center;
}
.katalog-sort select {
min-width: 0;
flex: 1;
}
}
/* ------ Bidang foto produk ------
Foto alat dari pemilik latarnya TRANSPARAN (webp 1200x1200), jadi kartunya
butuh bidang sendiri: rasio dikunci 1:1 dengan latar netral supaya tinggi
kartu di grid seragam dan alatnya tidak melayang di putih polos. Alat yang
fotonya belum ada (lihat data/produk.ts) memakai bidang yang sama persis
dengan satu foto placeholder bersama (tenda hijau) -- tidak dipinjami foto
alat lain yang sekadar mirip. */
.product-img-bidang {
position: relative;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--smoke-color2);
background-image: radial-gradient(
circle at 50% 42%,
rgba(2, 62, 37, 0.07),
rgba(2, 62, 37, 0) 62%
);
}
/* Selectornya panjang supaya menang dari ".th-product .product-img img"
(width:100%) milik tema -- foto 1:1 di bidang 1:1 harus disisakan napas
sedikit, bukan mepet ke tepi kartu. */
.th-product .product-img .product-img-foto {
display: block;
width: 92%;
height: 92%;
object-fit: contain;
/* Hover-nya sama dengan foto produk di tema (.th-product:hover
.product-img img), cuma lebih halus karena fotonya "contain". */
transition: transform 0.4s ease;
}
.th-product:hover .product-img .product-img-foto {
transform: scale(1.04);
}
/* ------ Hasil filter kosong ------ */
.katalog-kosong {
text-align: center;
padding: 64px 24px;
border: 1px dashed var(--th-border-color);
border-radius: 24px;
}
.katalog-kosong p {
max-width: 420px;
margin: 0 auto 24px;
}
/* ------ Ringkasan syarat sewa di kaki halaman ------ */
.kotak-catatan {
margin-top: 60px;
padding: 48px;
border-radius: 24px;
background-color: var(--smoke-color2);
}
.kotak-catatan-title {
font-size: 30px;
margin: 0 0 24px;
/* Tanpa ini judul 3 kata ini pecah jadi 2 baris timpang ("... Catat" +
"Ini") di lebar kolom lg. */
text-wrap: balance;
}
.kotak-catatan-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 16px;
border-radius: 50%;
background-color: var(--theme-color);
color: var(--theme-color2);
font-family: var(--title-font);
font-size: 13px;
font-weight: 600;
}
.kotak-catatan-item-title {
font-size: 18px;
margin: 0 0 8px;
}
.kotak-catatan-text {
font-size: 15px;
margin: 0;
}
@media (max-width: 767px) {
.kotak-catatan {
margin-top: 48px;
padding: 32px 24px;
}
.kotak-catatan-title {
font-size: 26px;
}
}
/* ------ Paginasi katalog (hanya muncul di mobile) ------
Bentuknya pinjam ".th-pagination" tema (lingkaran 48px, aktif = hijau
solid), tapi tema cuma menata elemen "a" dan "span" -- di sini kontrolnya
"button" supaya bisa di-disable & tetap kebaca keyboard/screen reader
(ini tombol aksi, bukan tautan ke URL lain), jadi deklarasinya ditulis
ulang di sini. Nilai-nilainya sengaja sama persis dengan style.css biar
tidak jadi komponen yang bentuknya beda sendiri. */
.katalog-pagination {
margin: 40px 0 0;
text-align: center;
}
.katalog-pagination button {
position: relative;
z-index: 1;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid var(--th-border-color2);
border-radius: 50%;
background-color: transparent;
color: var(--title-color);
font-family: var(--body-font);
font-size: 18px;
font-weight: 400;
transition: all 0.4s ease;
}
.katalog-pagination button.active,
.katalog-pagination button:hover:not(:disabled) {
background-color: var(--theme-color);
color: var(--white-color);
}
.katalog-pagination button:disabled {
opacity: 0.35;
cursor: default;
}
/* ==============================
HALAMAN CABANG (/cabang & /cabang/[slug])
Sama seperti blok katalog di atas: bentuk dasarnya pinjam komponen tema
(".info-wrap" + ".info-box" dari contact.html, ".contact-map" untuk embed
peta, ".th-btn", blok breadcumb), yang ditulis di sini cuma yang memang
tidak ada di tema -- kartu cabang yang bisa dipilih, kaki peta, dan kotak
tautan antar cabang.
============================== */
/* ------ Kartu cabang (dipakai di /cabang, sekaligus pemilih peta) ------ */
.cabang-kartu {
display: flex;
flex-direction: column;
height: 100%;
padding: 28px;
border: 1px solid var(--th-border-color3);
border-radius: 24px;
background-color: var(--white-color);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.cabang-kartu.active {
border-color: var(--theme-color);
box-shadow: 0 12px 30px rgba(2, 62, 37, 0.08);
}
.cabang-kartu-wilayah {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--theme-color);
}
.cabang-kartu-nama {
font-size: 22px;
margin: 0 0 10px;
}
.cabang-kartu-nama a {
color: inherit;
}
.cabang-kartu-nama a:hover {
color: var(--theme-color);
}
.cabang-kartu-alamat {
font-size: 15px;
margin: 0 0 14px;
}
.cabang-kartu-jam {
display: flex;
gap: 10px;
font-size: 14px;
margin: 0 0 22px;
color: var(--body-color);
}
.cabang-kartu-jam i {
margin-top: 4px;
color: var(--theme-color);
}
.cabang-kartu-aksi {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
/* Baris "Lihat di peta" didorong ke dasar kartu (margin-top:auto) supaya 3
kartu yang panjang alamatnya beda-beda tetap punya baris tombol yang rata
segaris -- kalau tidak, tiap kartu tombolnya berhenti di ketinggian yang
berbeda dan barisannya kelihatan miring. */
.cabang-kartu-peta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: auto;
padding: 16px 0 0;
border: 0;
border-top: 1px dashed var(--th-border-color);
background: transparent;
font-family: var(--title-font);
font-size: 14px;
font-weight: 500;
color: var(--title-color);
transition: color 0.3s ease;
}
.cabang-kartu-peta:hover,
.cabang-kartu.active .cabang-kartu-peta {
color: var(--theme-color);
}
/* ------ Peta ------
Tinggi bawaan ".contact-map iframe" (550px) dibuat untuk halaman kontak yang
isinya cuma peta; di sini peta selalu berdampingan/di bawah konten lain,
jadi diturunkan biar satu layar masih memuat konteksnya. */
.cabang-peta iframe {
height: 460px;
border-radius: 24px;
}
@media (max-width: 575px) {
.cabang-peta iframe {
height: 320px;
}
}
.cabang-peta-wrap {
margin-top: 40px;
}
.cabang-peta-kaki {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
}
.cabang-peta-catatan {
max-width: 520px;
margin: 16px 0 0;
font-size: 14px;
}
.cabang-peta-kaki .cabang-peta-catatan {
margin-top: 0;
}
.cabang-peta-catatan a {
color: var(--theme-color);
text-decoration: underline;
}
.cabang-peta-aksi {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ------ Panel alamat & kontak (/cabang/[slug]) ------
".info-wrap" tema mengharapkan ![]()
di dalam ".box-icon"; di sini isinya
ikon Font Awesome (sama seperti blok alamat/WA di footer), jadi warna &
perataannya diatur sendiri -- tanpa ini ikonnya mewarisi warna teks gelap
di atas lingkaran hijau tua. */
.cabang-info {
border-radius: 24px;
}
.cabang-info .box-icon i {
color: var(--white-color);
font-size: 18px;
}
.cabang-info .info-box .content .box-title {
color: var(--body-color);
font-weight: 400;
margin-bottom: 6px;
}
.cabang-info .info-box .content .box-text {
color: var(--title-color);
font-weight: 500;
margin-bottom: 0;
}
.cabang-info .info-box .content .box-text a {
color: var(--title-color);
display: inline;
}
.cabang-info .info-box .content .box-text a:hover {
color: var(--theme-color);
}
.cabang-info-aksi {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 36px;
}
/* ------ Kotak "alat yang tersedia di sini" ------ */
.cabang-stok {
margin-top: 28px;
padding: 28px;
border-radius: 24px;
background-color: var(--smoke-color2);
}
.cabang-stok-title {
font-size: 20px;
margin: 0 0 10px;
}
.cabang-stok p {
font-size: 15px;
margin-bottom: 20px;
}
.cabang-stok-aksi {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ------ Tautan ke cabang lain ------ */
.cabang-lain {
margin-top: 60px;
padding: 36px;
border: 1px solid var(--th-border-color);
border-radius: 24px;
background-color: var(--white-color);
}
.cabang-lain-title {
font-size: 20px;
margin: 0 0 20px;
}
.cabang-lain-item {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px 24px;
border: 1px solid var(--th-border-color3);
border-radius: 16px;
background-color: var(--smoke-color2);
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.cabang-lain-item:hover {
border-color: var(--theme-color);
background-color: var(--white-color);
}
.cabang-lain-nama {
font-family: var(--title-font);
font-size: 18px;
font-weight: 500;
color: var(--title-color);
}
.cabang-lain-alamat {
margin-top: 4px;
font-size: 14px;
color: var(--body-color);
}
.cabang-lain-tautan {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 14px;
font-weight: 500;
color: var(--theme-color);
}
.cabang-lain-item:hover .cabang-lain-tautan i {
transform: translateX(4px);
}
.cabang-lain-tautan i {
transition: transform 0.3s ease;
}
@media (max-width: 767px) {
.cabang-kartu,
.cabang-lain {
padding: 24px;
}
.cabang-lain {
margin-top: 48px;
}
}
/* ==============================
MONOGRAM DI KARTU TESTIMONI
Kutipan di kartu testimoni sekarang ulasan Google asli dari orang sungguhan
(lihat data/testimoni.ts), dan foto profil pengulas TIDAK disalin. Slot foto
di ".testi-card-avater" diisi huruf depan namanya.
Ukurannya wajib ditulis di sini: di template asli slot itu tidak punya
aturan lebar/tinggi sama sekali -- ukurannya cuma numpang ukuran asli file
avatar (100x100), jadi begitu isinya bukan ![]()
lagi, kotaknya kolaps.
============================== */
.testi-card .testi-card-avater {
width: 76px;
height: 76px;
}
.testi-monogram {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--theme-color);
color: var(--theme-color2);
font-family: var(--title-font);
font-size: 30px;
font-weight: 600;
line-height: 1;
}
/* ==============================
HALAMAN FORM SEWA (/sewa)
Pola sama dengan halaman lain: kontrol form dasar (".form-control", checkbox
lingkaran, ".th-btn") tetap punya tema; yang ditulis di sini cuma komponen
yang memang tidak ada di tema -- baris alat + stepper jumlah, kartu pilihan
cabang, panel ringkasan yang menempel, dan bilah bawah khusus mobile.
============================== */
.sewa-blok:not(:last-child) {
margin-bottom: 56px;
}
.sewa-blok-judul {
display: flex;
align-items: center;
gap: 14px;
font-size: 30px;
margin: 0 0 12px;
}
/* Nomor langkah memakai bahasa visual yang sama dengan nomor di kotak
catatan /katalog & /cabang (lingkaran hijau, angka krem). */
.sewa-langkah {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
background-color: var(--theme-color);
color: var(--theme-color2);
font-size: 15px;
font-weight: 600;
}
.sewa-blok-teks {
max-width: 560px;
margin-bottom: 24px;
}
/* ------ Pintasan kategori ------ */
.sewa-pintasan {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.sewa-pintasan-item {
padding: 8px 14px;
border: 1px solid var(--th-border-color);
border-radius: 30px;
font-size: 13px;
color: var(--body-color);
transition: all 0.3s ease;
}
.sewa-pintasan-item:hover {
border-color: var(--theme-color);
background-color: var(--theme-color);
color: var(--white-color);
}
/* ------ Kelompok & baris alat ------ */
.sewa-kelompok:not(:last-child) {
margin-bottom: 36px;
}
.sewa-kelompok-judul {
display: flex;
align-items: center;
gap: 12px;
font-size: 20px;
margin: 0 0 14px;
scroll-margin-top: 120px;
}
.sewa-kelompok-ikon {
width: 26px;
height: 26px;
flex: none;
background-color: var(--theme-color);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.sewa-kelompok-jumlah {
margin-left: auto;
font-family: var(--body-font);
font-size: 13px;
font-weight: 400;
color: var(--body-color);
}
.sewa-daftar {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--th-border-color);
border-radius: 20px;
overflow: hidden;
}
.sewa-item {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
scroll-margin-top: 120px;
transition: background-color 0.3s ease;
}
.sewa-item:not(:last-child) {
border-bottom: 1px solid var(--th-border-color);
}
.sewa-item.dipilih {
background-color: rgba(2, 62, 37, 0.04);
}
/* Alat yang datang dari ?item= -- kedip sekali supaya kelihatan mana
yang sudah tercentang otomatis, lalu diam (bukan animasi berulang yang
mengganggu saat mengisi form). */
.sewa-item.disorot {
animation: sewa-sorot 2.4s ease-out 1;
}
@keyframes sewa-sorot {
0%,
40% {
background-color: rgba(223, 205, 161, 0.55);
}
100% {
background-color: rgba(2, 62, 37, 0.04);
}
}
/* Ditulis sebagai ".sewa-item .sewa-item-label" (bukan class tunggal) supaya
menang atas aturan tema "input[type=checkbox] ~ label { display: block }" --
selector tema itu specificity-nya lebih tinggi dari satu class, dan tanpa ini
nama alat & harganya nempel jadi satu baris. padding-left dari tema sengaja
DIBIARKAN: itu yang menyediakan ruang buat lingkaran centangnya. */
.sewa-item .sewa-item-label {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
}
.sewa-item-nama {
font-family: var(--title-font);
font-weight: 500;
color: var(--title-color);
}
.sewa-item-harga {
font-size: 14px;
color: var(--body-color);
}
/* ------ Stepper jumlah ------ */
.sewa-stepper {
display: flex;
align-items: center;
gap: 4px;
flex: none;
}
.sewa-stepper button,
.sewa-durasi button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--th-border-color);
border-radius: 50%;
background-color: var(--white-color);
color: var(--title-color);
font-size: 12px;
transition: all 0.3s ease;
}
.sewa-stepper button:hover:not(:disabled),
.sewa-durasi button:hover:not(:disabled) {
border-color: var(--theme-color);
background-color: var(--theme-color);
color: var(--white-color);
}
.sewa-stepper button:disabled,
.sewa-durasi button:disabled {
opacity: 0.35;
}
.sewa-stepper-nilai {
min-width: 28px;
text-align: center;
font-family: var(--title-font);
font-weight: 600;
}
/* ------ Isian data penyewa ------ */
.sewa-label {
display: block;
margin-bottom: 8px;
font-family: var(--title-font);
font-size: 15px;
font-weight: 500;
color: var(--title-color);
}
.sewa-opsional {
font-weight: 400;
color: var(--body-color);
}
.sewa-bantuan {
margin: 10px 0 0;
font-size: 14px;
color: var(--body-color);
}
.form-control.tidak-valid {
border-color: #b42318;
}
.sewa-galat-kecil {
margin: 10px 0 0;
font-size: 14px;
color: #b42318;
}
.sewa-durasi {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
height: 56px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 30px;
background-color: var(--smoke-color);
}
.sewa-durasi-nilai {
font-family: var(--title-font);
font-size: 18px;
font-weight: 600;
}
.sewa-durasi-nilai small {
font-size: 14px;
font-weight: 400;
color: var(--body-color);
}
/* ------ Kartu pilihan cabang ------ */
.sewa-cabang {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 767px) {
.sewa-cabang {
grid-template-columns: 1fr;
}
}
.sewa-cabang-opsi input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* Sama seperti baris alat: tema punya aturan "input[type=radio] ~ label"
yang specificity-nya di atas satu class, jadi selectornya harus menyertakan
input-nya. Kalau tidak, isi kartu (nama, alamat, jam) jatuh sebaris. */
.sewa-cabang-opsi input[type="radio"] + label {
display: flex;
flex-direction: column;
gap: 4px;
height: 100%;
margin: 0;
padding: 16px 18px;
border: 1px solid var(--th-border-color);
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.sewa-cabang-opsi input[type="radio"]:checked + label {
border-color: var(--theme-color);
background-color: rgba(2, 62, 37, 0.04);
}
/* Fokus keyboard: radio-nya disembunyikan, jadi cincin fokusnya dipindah ke
kartu -- tanpa ini pengguna keyboard tidak tahu sedang di opsi yang mana. */
.sewa-cabang-opsi input[type="radio"]:focus-visible + label {
outline: 2px solid var(--theme-color);
outline-offset: 2px;
}
.sewa-cabang-nama {
font-family: var(--title-font);
font-weight: 500;
color: var(--title-color);
}
.sewa-cabang-alamat,
.sewa-cabang-jam {
font-size: 13px;
color: var(--body-color);
}
.sewa-cabang-jam i {
color: var(--theme-color);
}
/* ------ Panel ringkasan ------ */
.sewa-ringkasan {
padding: 32px;
border: 1px solid var(--th-border-color);
border-radius: 24px;
background-color: var(--smoke-color2);
}
@media (min-width: 1200px) {
.sewa-ringkasan {
position: sticky;
top: 100px;
}
}
.sewa-ringkasan .sewa-blok-judul {
font-size: 24px;
margin-bottom: 20px;
}
.sewa-ringkasan-daftar {
margin: 0 0 20px;
padding: 0;
list-style: none;
max-height: 260px;
overflow-y: auto;
}
.sewa-ringkasan-daftar li {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 10px 0;
border-bottom: 1px dashed var(--th-border-color);
font-size: 15px;
}
.sewa-ringkasan-nama b {
font-weight: 600;
}
.sewa-ringkasan-harga {
white-space: nowrap;
font-family: var(--title-font);
font-weight: 500;
color: var(--title-color);
}
.sewa-ringkasan-harga small {
font-weight: 400;
color: var(--body-color);
}
.sewa-ringkasan-kosong {
margin-bottom: 20px;
padding: 18px;
border: 1px dashed var(--th-border-color);
border-radius: 16px;
font-size: 14px;
}
.sewa-ringkasan-info {
margin: 0 0 20px;
font-size: 14px;
}
.sewa-ringkasan-info > div {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 6px 0;
}
.sewa-ringkasan-info dt {
font-weight: 400;
color: var(--body-color);
}
.sewa-ringkasan-info dd {
margin: 0;
text-align: right;
font-weight: 500;
color: var(--title-color);
}
.sewa-total {
padding: 18px;
border-radius: 16px;
background-color: var(--white-color);
}
.sewa-total-baris {
display: flex;
justify-content: space-between;
gap: 14px;
font-size: 14px;
color: var(--body-color);
}
.sewa-total-baris.utama {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--th-border-color);
font-family: var(--title-font);
font-size: 18px;
color: var(--title-color);
}
.sewa-total-baris.utama strong {
font-size: 22px;
}
.sewa-total-catatan {
margin: 12px 0 0;
font-size: 13px;
line-height: 1.5;
}
.sewa-setuju {
margin: 22px 0;
font-size: 14px;
}
.sewa-setuju label {
line-height: 1.6;
}
.sewa-galat {
margin-bottom: 18px;
padding: 16px 18px;
border: 1px solid rgba(180, 35, 24, 0.3);
border-radius: 16px;
background-color: rgba(180, 35, 24, 0.05);
font-size: 14px;
}
.sewa-galat ul {
margin: 8px 0 0;
padding-left: 18px;
}
/* Tombol kirim sengaja tidak memakai atribut "disabled": kalau mati total,
menekannya tidak memberi tahu apa-apa. Yang dipakai "aria-disabled" -- tombol
tetap bisa diklik, lalu form menampilkan daftar apa saja yang kurang. */
.sewa-kirim[aria-disabled="true"] {
background-color: #9aa39e;
}
.sewa-kirim[aria-disabled="true"]:before,
.sewa-kirim[aria-disabled="true"]:after {
background-color: #7d857f;
}
.sewa-kirim-catatan {
margin: 12px 0 0;
font-size: 13px;
text-align: center;
}
.sewa-pratinjau {
margin-top: 18px;
font-size: 14px;
}
.sewa-pratinjau summary {
cursor: pointer;
font-family: var(--title-font);
font-weight: 500;
color: var(--theme-color);
}
.sewa-pratinjau pre {
margin: 12px 0 0;
padding: 16px;
border-radius: 12px;
background-color: var(--white-color);
font-family: var(--body-font);
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
/* ------ Pesanan tersimpan (pelanggan lama, PRD bagian 10) ------ */
.sewa-simpanan {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
padding: 18px 22px;
border: 1px solid var(--th-border-color2);
border-radius: 16px;
background-color: rgba(223, 205, 161, 0.25);
font-size: 14px;
}
.sewa-simpanan strong {
display: block;
}
.sewa-simpanan-aksi {
display: flex;
align-items: center;
gap: 10px;
}
.sewa-simpanan-tutup {
border: 0;
background: transparent;
color: var(--body-color);
font-size: 16px;
}
/* ------ Bilah bawah (mobile & tablet) ------
Ringkasan ada di kolom kanan yang di bawah 1200px jatuh ke bawah daftar 24
alat -- jauh dari pandangan. Bilah ini menjaga total & tombol kirim tetap
terlihat sambil memilih. */
.sewa-bilah {
display: none;
}
@media (max-width: 1199px) {
.sewa-bilah {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 41;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 16px;
background-color: var(--white-color);
border-top: 1px solid var(--th-border-color);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}
.sewa-bilah-info strong {
display: block;
font-family: var(--title-font);
font-size: 16px;
}
.sewa-bilah-info span {
font-size: 12px;
color: var(--body-color);
}
/* Ruang ekstra supaya isi terakhir halaman tidak ketutupan bilah. */
#sewa-sec {
padding-bottom: 140px;
}
}
/* ------ Cadangan tanpa JavaScript ------ */
.sewa-cadangan {
max-width: 620px;
margin: 0 auto;
padding: 40px;
border: 1px dashed var(--th-border-color);
border-radius: 24px;
text-align: center;
}
.sewa-cadangan-aksi {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
/* ==============================
HALAMAN CARA SEWA & FAQ (/cara-sewa)
Akordeon FAQ memakai / bawaan browser, bukan accordion
Bootstrap (yang butuh JS). Class ".accordion-card" & ".accordion-button" tema
tetap dipakai supaya bentuk & tipografinya identik dengan halaman FAQ tema;
yang ditulis di sini cuma perkara : menghilangkan segitiga bawaan
dan mengurus tanda +/- (tema mengaitkannya ke class ".collapsed" milik
Bootstrap yang tidak ada di sini).
============================== */
/* ------ Kolom kiri: daftar isi ------ */
@media (min-width: 992px) {
.cara-sisi {
position: sticky;
top: 100px;
}
}
.cara-sisi-teks {
margin-bottom: 24px;
}
.cara-daftar-isi {
display: flex;
flex-direction: column;
border-left: 2px solid var(--th-border-color);
margin-bottom: 32px;
}
.cara-daftar-isi a {
padding: 10px 18px;
margin-left: -2px;
border-left: 2px solid transparent;
font-family: var(--title-font);
font-weight: 500;
color: var(--body-color);
transition: all 0.3s ease;
}
.cara-daftar-isi a:hover {
border-left-color: var(--theme-color);
color: var(--theme-color);
}
.cara-sisi-kotak {
padding: 26px;
border-radius: 24px;
background-color: var(--smoke-color2);
}
.cara-sisi-kotak h3 {
font-size: 20px;
margin: 0 0 8px;
}
.cara-sisi-kotak p {
font-size: 14px;
margin-bottom: 18px;
}
.cara-sisi-aksi {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cara-sisi-aksi .th-btn {
min-width: auto;
}
/* ------ Blok isi ------ */
.cara-blok:not(:last-child) {
margin-bottom: 60px;
}
.cara-blok-judul {
font-size: 30px;
margin: 0 0 14px;
/* Judul jadi target lompatan dari daftar isi -- diberi jarak supaya tidak
ketutupan header sticky saat halaman melompat ke anchor. */
scroll-margin-top: 110px;
}
.cara-blok {
scroll-margin-top: 110px;
}
.cara-blok-teks {
max-width: 620px;
margin-bottom: 28px;
}
/* ------ Alur sewa (garis waktu) ------ */
.cara-alur {
list-style: none;
margin: 0;
padding: 0;
}
.cara-alur-item {
position: relative;
display: flex;
gap: 20px;
padding-bottom: 32px;
}
/* Garis penghubung antar langkah: ditarik dari nomor ke bawah, dan
dimatikan di langkah terakhir supaya tidak menggantung. */
.cara-alur-item:not(:last-child):before {
content: "";
position: absolute;
left: 23px;
top: 48px;
bottom: 8px;
width: 2px;
background-color: var(--th-border-color);
}
.cara-alur-nomor {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--theme-color);
color: var(--theme-color2);
font-family: var(--title-font);
font-size: 15px;
font-weight: 600;
}
.cara-alur-judul {
font-size: 20px;
margin: 10px 0 8px;
}
.cara-alur-teks {
margin-bottom: 0;
}
.cara-alur-tautan {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-family: var(--title-font);
font-weight: 500;
font-size: 15px;
color: var(--theme-color);
}
.cara-alur-tautan i {
transition: transform 0.3s ease;
}
.cara-alur-tautan:hover i {
transform: translateX(4px);
}
/* ------ Kartu kebijakan ------ */
.cara-kebijakan {
height: 100%;
padding: 26px;
border: 1px solid var(--th-border-color3);
border-radius: 24px;
background-color: var(--smoke-color2);
}
.cara-kebijakan-nomor {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 16px;
border-radius: 50%;
background-color: var(--theme-color);
color: var(--theme-color2);
font-family: var(--title-font);
font-size: 13px;
font-weight: 600;
}
.cara-kebijakan-judul {
font-size: 18px;
margin: 0 0 8px;
}
.cara-kebijakan-teks {
font-size: 15px;
margin: 0;
}
/* ------ FAQ ------ */
.cara-faq-item {
border: 1px solid var(--th-border-color);
}
.cara-faq-item summary {
display: block;
cursor: pointer;
list-style: none;
}
/* Segitiga bawaan : Safari/iOS memakai ::-webkit-details-marker,
browser lain ::marker. Keduanya dimatikan supaya yang tampil cuma tanda
+/- bergaya tema di sisi kanan. */
.cara-faq-item summary::-webkit-details-marker {
display: none;
}
.cara-faq-item summary::marker {
content: "";
}
/* Tanda buka/tutup.
Tema menentukan tanda "-" lewat selector
".accordion-card .accordion-button:not(.collapsed):after". Class
".collapsed" itu milik Bootstrap dan TIDAK pernah dipasang di sini (kita
pakai , bukan accordion Bootstrap) -- jadi ":not(.collapsed)"
selalu cocok dan SEMUA item, terbuka maupun tertutup, memakai tanda minus
yang sama. Sudah kejadian sekali: seluruh FAQ kelihatan seperti terbuka.
Selector di bawah karenanya sengaja panjang: harus lebih tinggi
specificity-nya dari (0,3,1) milik aturan tema itu, jadi ikut menyertakan
".cara-faq" dan "summary.accordion-button". Kode ikonnya ditulis eksplisit
(f067 plus, f068 minus) dengan font-weight 900 -- karakter "+" biasa yang
dipakai tema tidak punya glif di "Font Awesome 6 Pro". */
.cara-faq .cara-faq-item > summary.accordion-button:after {
content: "\f067";
font-weight: 900;
transform: none;
}
.cara-faq .cara-faq-item[open] > summary.accordion-button:after {
content: "\f068";
}
.cara-faq-item .accordion-body {
margin: 0 30px;
padding: 0 0 14px;
}
.cara-faq-item .accordion-button .count {
color: var(--theme-color);
}
@media (max-width: 575px) {
.cara-faq-item .accordion-body {
margin: 0 20px;
}
}
.cara-faq-catatan {
margin: 28px 0 0;
font-size: 15px;
}
.cara-faq-catatan a {
color: var(--theme-color);
text-decoration: underline;
}
/* ==============================
HALAMAN DETAIL PRODUK (/produk/[slug])
Halaman statis penuh. Bentuk dasar tetap pinjam tema (".th-btn", kartu
produk, blok breadcumb); yang ditulis di sini bagian yang tidak ada
padanannya di tema: bidang foto besar + placeholder-nya, blok hitungan
sewa, daftar "tanya stok" per cabang, dan strip kebijakan.
============================== */
/* Tingginya dikunci, bukan mengikuti tinggi asli fotonya. Semua foto produk
1:1 (1200x1200, latar transparan), jadi kalau dibiarkan "height:auto" bidang
fotonya jauh lebih tinggi daripada kolom info di sebelahnya dan menyisakan
lubang putih besar. Fotonya dipasang "contain" -- bukan "cover" -- supaya
alatnya tidak kepotong; sisa ruangnya jadi bingkai netral yang memang
terlihat disengaja. Latarnya sama persis dengan bidang foto di kartu
katalog (.product-img-bidang), termasuk alat yang fotonya masih placeholder. */
.produk-foto {
display: flex;
align-items: center;
justify-content: center;
height: 480px;
padding: 12px;
border: 1px solid var(--th-border-color3);
border-radius: 24px;
overflow: hidden;
background-color: var(--smoke-color2);
background-image: radial-gradient(
circle at 50% 42%,
rgba(2, 62, 37, 0.07),
rgba(2, 62, 37, 0) 62%
);
}
.produk-foto img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 16px;
object-fit: contain;
}
@media (max-width: 575px) {
.produk-foto {
height: 340px;
}
}
/* ------ Kolom kanan: info & aksi ------ */
.produk-kategori {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
margin-bottom: 20px;
border: 1px solid var(--th-border-color);
border-radius: 30px;
font-size: 14px;
color: var(--body-color);
transition: all 0.3s ease;
}
.produk-kategori:hover {
border-color: var(--theme-color);
color: var(--theme-color);
}
.produk-kategori-ikon {
display: block;
width: 20px;
height: 20px;
background-color: var(--theme-color);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.produk-harga {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
.produk-harga-angka {
font-family: var(--title-font);
font-size: 40px;
font-weight: 600;
line-height: 1;
color: var(--title-color);
}
.produk-harga-satuan {
font-size: 16px;
color: var(--body-color);
}
.produk-deskripsi {
max-width: 560px;
margin-bottom: 26px;
}
.produk-sub-judul {
font-size: 18px;
margin: 0 0 14px;
}
.produk-durasi {
padding: 24px;
border-radius: 24px;
background-color: var(--smoke-color2);
}
.produk-durasi-daftar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 575px) {
.produk-durasi-daftar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.produk-durasi-daftar li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border-radius: 14px;
background-color: var(--white-color);
font-size: 13px;
color: var(--body-color);
}
.produk-durasi-daftar strong {
font-family: var(--title-font);
font-size: 16px;
color: var(--title-color);
}
.produk-durasi-catatan {
margin: 14px 0 0;
font-size: 13px;
}
.produk-aksi {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
/* ------ Blok "tersedia di cabang mana" ------ */
.produk-stok {
margin-top: 60px;
padding: 40px;
border-radius: 24px;
background-color: var(--smoke-color2);
}
.produk-stok-judul {
font-size: 26px;
margin: 0 0 12px;
text-wrap: balance;
}
.produk-stok-teks {
margin: 0;
font-size: 15px;
}
.produk-stok-cabang {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 767px) {
.produk-stok-cabang {
grid-template-columns: 1fr;
}
.produk-stok {
padding: 28px 24px;
}
}
.produk-stok-item {
display: flex;
flex-direction: column;
gap: 4px;
height: 100%;
padding: 18px;
border: 1px solid var(--th-border-color);
border-radius: 16px;
background-color: var(--white-color);
transition: border-color 0.3s ease;
}
.produk-stok-item:hover {
border-color: var(--theme-color);
}
.produk-stok-nama {
font-family: var(--title-font);
font-weight: 500;
color: var(--title-color);
}
.produk-stok-alamat {
font-size: 13px;
color: var(--body-color);
}
.produk-stok-tautan {
margin-top: 10px;
font-size: 14px;
font-weight: 500;
color: var(--theme-color);
}
/* ------ Strip kebijakan ------ */
.produk-kebijakan {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid var(--th-border-color);
}
@media (max-width: 767px) {
.produk-kebijakan {
grid-template-columns: 1fr;
gap: 22px;
}
}
.produk-kebijakan-item {
display: flex;
gap: 14px;
}
.produk-kebijakan-nomor {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: var(--theme-color);
color: var(--theme-color2);
font-family: var(--title-font);
font-size: 12px;
font-weight: 600;
}
.produk-kebijakan-judul {
font-size: 16px;
margin: 6px 0 6px;
}
.produk-kebijakan-teks {
margin: 0;
font-size: 14px;
}
/* Tautan ini anak ke-4 di grid 3 kolom -- dibentangkan supaya duduk di baris
sendiri, bukan menggantung di kolom pertama baris kedua. */
.produk-kebijakan-tautan {
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--title-font);
font-weight: 500;
color: var(--theme-color);
}
.produk-kebijakan-tautan i {
transition: transform 0.3s ease;
}
.produk-kebijakan-tautan:hover i {
transform: translateX(4px);
}
/* ------ Produk terkait ------ */
.produk-terkait-judul {
font-size: 30px;
margin: 0 0 30px;
}
@media (max-width: 767px) {
.produk-terkait-judul {
font-size: 26px;
margin-bottom: 20px;
}
}