/* ==========================================================================
SL Indonesia — style kustom homepage (di luar utility class Tailwind CDN)
========================================================================== */
:root {
--merah: #C8102E; /* merah pita pada logo */
--emas-tua: #8B6B3D; /* perunggu/emas gelap pada logo */
--emas-muda: #E9C88A; /* emas terang pada logo */
--ink: #2A1B12; /* teks utama, pengganti navy lama */
}
/* Menu header/footer selalu mengarah ke "/#section" (lihat site_header()
& site_footer()) supaya tetap jalan dari halaman mana pun, bukan cuma
dari beranda. scroll-behavior + scroll-padding-top di sini yang membuat
lompatannya mulus dan tidak ketutup header sticky, baik saat klik di
beranda maupun setelah pindah halaman lalu mendarat di section tujuan. */
html {
scroll-behavior: smooth;
scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
* {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, transform, box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 180ms;
}
body, nav, p, button, a, input, textarea, li, span {
font-family: 'Inter', system-ui, sans-serif;
}
.logo-font {
font-family: 'Righteous', 'Verdana', sans-serif;
font-weight: 400;
letter-spacing: 0.2px;
}
h1, h2, h3, h4 {
font-family: 'Inter', system-ui, sans-serif;
font-optical-sizing: auto;
font-weight: 700 !important;
letter-spacing: -0.02em;
line-height: 1.22 !important;
}
/* Judul hero & section pakai clamp supaya ukurannya mengalir mulus di
semua lebar layar, bukan cuma loncat di breakpoint tertentu — dan
ukurannya sengaja dibuat lebih kecil/terkendali (bukan raksasa) supaya
judul hero yang sudah dipecah manual lewat
konsisten tampil
maksimal 2 baris, tidak ikut membungkus jadi baris tambahan.
Inter tampil lebih rapat — ukuran clamp di bawah tetap pas di semua
lebar layar tanpa perlu koreksi tambahan. */
.hero-slide h1,
.hero-slide p.hero-title {
font-size: clamp(1.5rem, 3vw + 0.8rem, 2.5rem);
}
/* Semua judul section (kecuali hero) DISAMAKAN dalam satu skala clamp
supaya konsisten dari #tentang sampai #kontak — sebelumnya tiap section
punya ukuran sendiri (ada yang mini 1.35rem, ada yang raksasa 3.5rem),
sekarang satu bahasa tipografi untuk seluruh halaman. */
#tentang h2,
#kenapa h2,
#brand h2,
#layanan h2,
#galeri h2,
#lokasi h2,
#kontak h2 {
font-size: clamp(1.75rem, 2.4vw + 0.95rem, 2.75rem);
}
#kontak p.kontak-lede {
font-size: 1.0625rem;
line-height: 1.75;
}
/* ==========================================================================
Section "Kenapa Pilih Kami" (#kenapa) — bahasa visual dekoratif SENGAJA
dibuat berbeda dari #tentang di atasnya (bukan blob+ring+target yang
sama), supaya tiap section terasa punya identitas sendiri:
- #tentang → blob organik + cincin bersarang (bulat, lembut)
- #kenapa → pola "kertas berlian" bertitik + sudut bracket presisi
+ kerlip bintang 4-sisi + pita diagonal di sudut
Elemen dekoratif dibuat tetap TAMPIL (versi lebih kecil/tenang) di
mobile, bukan disembunyikan total, sesuai permintaan.
========================================================================== */
/* Wash gradasi lembut dua warna menyilang sudut — bentuknya elips memanjang
(bukan lingkaran blob seperti #tentang) supaya kesan lebih "kain"/halus. */
.kenapa-bg-dots {
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(rgba(200, 16, 46, 0.10) 1.2px, transparent 1.2px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 70% 55% at 12% 88%, #000 30%, transparent 78%);
mask-image: radial-gradient(ellipse 70% 55% at 12% 88%, #000 30%, transparent 78%);
}
.kenapa-blob {
position: absolute;
border-radius: 44% 56% 62% 38% / 48% 40% 60% 52%;
filter: blur(95px);
pointer-events: none;
}
.kenapa-blob--gold { width: 360px; height: 300px; top: -90px; right: -90px; background: var(--emas-muda); opacity: 0.30; animation: kenapaWash 20s ease-in-out infinite alternate; }
.kenapa-blob--red { width: 300px; height: 340px; bottom: -110px; left: -80px; background: var(--merah); opacity: 0.14; animation: kenapaWash 24s ease-in-out infinite alternate-reverse; }
@keyframes kenapaWash {
0% { transform: rotate(0deg) scale(1); }
100% { transform: rotate(14deg) scale(1.08); }
}
@media (max-width: 767px) {
.kenapa-blob--gold { width: 220px; height: 190px; top: -60px; right: -60px; opacity: 0.24; }
.kenapa-blob--red { width: 200px; height: 220px; bottom: -70px; left: -50px; opacity: 0.12; }
}
@media (prefers-reduced-motion: reduce) {
.kenapa-blob--gold, .kenapa-blob--red { animation: none; }
}
/* Kerlip bintang 4-sisi (sparkle) — pengganti titik bulat polos #tentang,
selaras dengan tema "ulasan bintang lima" pada section ini. Tetap
tampil (diperkecil, tenang) di mobile, tidak disembunyikan total. */
.kenapa-particle {
position: absolute;
pointer-events: none;
z-index: 1;
color: var(--merah);
opacity: .5;
}
.kenapa-particle svg { display: block; width: 100%; height: 100%; }
.kenapa-particle--1 { width: 16px; height: 16px; top: 14%; left: 6%; color: var(--merah); animation: kenapaTwinkle 4.5s ease-in-out infinite; }
.kenapa-particle--2 { width: 11px; height: 11px; top: 66%; left: 3.5%; color: var(--emas-tua); animation: kenapaTwinkle 5.5s ease-in-out infinite .8s; }
.kenapa-particle--3 { width: 20px; height: 20px; top: 9%; right: 5%; color: var(--emas-muda); animation: kenapaTwinkle 6s ease-in-out infinite 1.4s; }
.kenapa-particle--4 { width: 10px; height: 10px; top: 82%; right: 8%; color: var(--merah); animation: kenapaTwinkle 5s ease-in-out infinite 2.1s; }
@keyframes kenapaTwinkle {
0%, 100% { opacity: .28; transform: scale(.82) rotate(0deg); }
50% { opacity: .75; transform: scale(1) rotate(12deg); }
}
@media (max-width: 767px) {
.kenapa-particle { opacity: .38; }
.kenapa-particle--1 { width: 11px; height: 11px; top: 6%; left: 5%; }
.kenapa-particle--2 { width: 8px; height: 8px; top: 68%; left: 4%; }
.kenapa-particle--3 { width: 13px; height: 13px; top: 5%; right: 6%; }
.kenapa-particle--4 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kenapa-particle { animation: none !important; } }
/* Bracket sudut presisi (seperti frame viewfinder) — motif geometris baru
yang tegas & modern, kontras dengan cincin bulat #tentang. Diletakkan
mengapit badge judul. Tetap terlihat (versi kecil) di mobile. */
.kenapa-corner {
position: absolute;
width: 46px;
height: 46px;
pointer-events: none;
z-index: 1;
opacity: .5;
}
.kenapa-corner::before,
.kenapa-corner::after {
content: '';
position: absolute;
background: transparent;
}
.kenapa-corner--tl { top: 4%; left: 3%; border-top: 2.5px solid var(--emas-tua); border-left: 2.5px solid var(--emas-tua); border-radius: 8px 0 0 0; }
.kenapa-corner--br { bottom: 8%; right: 4%; border-bottom: 2.5px solid var(--merah); border-right: 2.5px solid var(--merah); border-radius: 0 0 8px 0; }
.kenapa-diamond {
position: absolute;
top: 20%;
right: 9%;
width: 22px;
height: 22px;
border: 2px solid rgba(200, 16, 46, .38);
transform: rotate(45deg);
border-radius: 4px;
pointer-events: none;
z-index: 1;
animation: kenapaDiamondFloat 7s ease-in-out infinite;
}
@keyframes kenapaDiamondFloat {
0%, 100% { transform: rotate(45deg) translateY(0); }
50% { transform: rotate(45deg) translateY(-10px); }
}
@media (max-width: 1023px) {
.kenapa-corner { width: 34px; height: 34px; }
.kenapa-diamond { width: 16px; height: 16px; right: 5%; }
}
@media (max-width: 640px) {
.kenapa-corner { width: 24px; height: 24px; opacity: .38; }
.kenapa-corner--tl { top: 1.5%; left: 2%; }
.kenapa-corner--br { display: none; }
.kenapa-diamond { width: 12px; height: 12px; top: 3%; right: 4%; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .kenapa-diamond { animation: none !important; } }
/* Pita diagonal tipis di pojok kanan-atas — aksen garis bergaris (bukan
lingkaran), identitas visual baru khusus section ini. */
.kenapa-ribbon {
position: absolute;
top: 6%;
right: -2%;
width: 130px;
height: 130px;
pointer-events: none;
z-index: 1;
opacity: .5;
background:
repeating-linear-gradient(-45deg,
rgba(212,162,76,.55) 0 2px,
transparent 2px 14px);
-webkit-mask-image: linear-gradient(to bottom left, #000 0%, transparent 60%);
mask-image: linear-gradient(to bottom left, #000 0%, transparent 60%);
}
@media (max-width: 1023px) { .kenapa-ribbon { width: 90px; height: 90px; opacity: .4; } }
@media (max-width: 640px) { .kenapa-ribbon { width: 60px; height: 60px; top: 2%; right: -1%; } }
/* Judul section — kata terakhir diberi gradient teks yang bergeser halus,
sedikit "hidup" tanpa mengganggu keterbacaan. */
.kenapa-heading-accent {
background: linear-gradient(90deg, #C8102E 0%, #D4A24C 50%, #C8102E 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: kenapaShine 5s linear infinite;
display: inline-block;
}
@keyframes kenapaShine { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .kenapa-heading-accent { animation: none; } }
/* ==========================================================================
Grid "bento" untuk kartu keunggulan — 2 kartu unggulan besar (baris atas)
+ 3 kartu kecil (baris bawah). Konsep kartu dirombak total dari versi
sebelumnya (watermark angka raksasa transparan + garis atas yang cuma
tumbuh saat hover — tidak terlihat di mobile karena hover tidak ada):
- Aksen warna kini berupa BILAH DI SISI KIRI kartu, SELALU terlihat
(bukan cuma saat hover) — identitas warna tiap kartu langsung
jelas & rapi, di desktop maupun mobile.
- Nomor urut kini berupa BADGE BULAT KECIL solid di pojok kanan-atas
(bukan watermark raksasa pudar) — lebih rapi & profesional, tetap
terbaca jelas di layar kecil.
- Ikon, judul, teks tetap jadi fokus utama, dengan jarak & tipografi
yang lebih lega.
========================================================================== */
.kenapa-bento {
display: grid;
grid-template-columns: 1fr;
gap: 1.1rem;
}
@media (min-width: 640px) {
.kenapa-bento { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
.kenapa-bento { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }
}
.kenapa-item {
position: relative;
grid-column: 1 / -1;
}
@media (min-width: 640px) {
.kenapa-item--sm { grid-column: span 1; }
}
@media (min-width: 1024px) {
.kenapa-item--lg { grid-column: span 3; }
.kenapa-item--sm { grid-column: span 2; }
}
/* Halo lembut di belakang kartu saat hover/tap — dipertahankan tapi lebih
tenang, sebagai sibling di bawah kartu solid. */
.kenapa-card-glow {
position: absolute;
inset: 6px;
border-radius: 1.4rem;
opacity: 0;
filter: blur(24px);
transform: scale(.96);
transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.kenapa-item:hover .kenapa-card-glow { opacity: .5; transform: scale(1.03); }
@media (hover: none) { .kenapa-item:hover .kenapa-card-glow { opacity: 0; transform: scale(.96); } }
/* Kartu keunggulan — lapisan atas, solid. Bilah warna kiri jadi penanda
identitas utama, tebal & selalu tampil. */
.kenapa-card {
position: relative;
background: #fff;
border-radius: 1.25rem;
padding: 1.9rem 1.65rem 1.9rem 1.9rem;
border: 1.5px solid #F3E6C8;
overflow: hidden;
isolation: isolate;
height: 100%;
transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .45s ease;
}
.kenapa-card--lg { padding: 2.1rem 2rem 2.1rem 2.25rem; }
/* Bilah aksen gradasi mengambang di tepi atas kartu — menggantikan garis
solid di sisi kiri, terasa lebih ringan & "futuristik". Melebar penuh
dan menebal saat hover. */
.kenapa-card::before {
content: '';
position: absolute;
top: 0; left: 1.6rem; right: 1.6rem;
height: 3px;
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, var(--accent, var(--merah)), var(--accent2, var(--emas-tua)));
box-shadow: 0 0 0 0 transparent;
transition: left .5s cubic-bezier(.16,1,.3,1), right .5s cubic-bezier(.16,1,.3,1), height .35s ease, box-shadow .45s ease;
z-index: 1;
}
.kenapa-item:hover .kenapa-card {
transform: translateY(-6px);
box-shadow: 0 22px 42px -16px rgba(42,27,18,.18), 0 6px 14px rgba(42,27,18,.06);
border-color: color-mix(in srgb, var(--accent, var(--merah)) 32%, #F3E6C8);
}
.kenapa-item:hover .kenapa-card::before {
left: 0; right: 0; height: 4px;
box-shadow: 0 2px 14px -2px var(--accent, var(--merah));
}
/* Elemen dekoratif geometris — lingkaran outline & pola titik, mengisi
sudut kartu yang kosong dengan nuansa "tech/futuristic" tanpa mengganggu
keterbacaan konten. Diam di belakang konten (urutan DOM lebih dulu). */
.kenapa-card-decor {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.kenapa-decor-circle {
position: absolute;
border-radius: 50%;
border: 1.5px solid var(--accent, var(--merah));
opacity: .13;
transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.kenapa-decor-circle--1 { width: 132px; height: 132px; right: -48px; top: -50px; }
.kenapa-decor-circle--2 {
width: 66px; height: 66px; right: 22px; top: 30px;
border-style: dashed;
border-color: var(--accent2, var(--emas-muda));
opacity: .18;
}
.kenapa-item:hover .kenapa-decor-circle--1 { transform: scale(1.12) rotate(14deg); opacity: .22; }
.kenapa-item:hover .kenapa-decor-circle--2 { transform: rotate(-24deg) scale(1.06); opacity: .3; }
.kenapa-decor-dots {
position: absolute;
left: -8px;
bottom: -8px;
width: 96px;
height: 96px;
background-image: radial-gradient(circle, var(--accent, var(--merah)) 1.4px, transparent 1.6px);
background-size: 13px 13px;
opacity: .16;
-webkit-mask-image: radial-gradient(circle at 0% 100%, #000 40%, transparent 76%);
mask-image: radial-gradient(circle at 0% 100%, #000 40%, transparent 76%);
}
@media (max-width: 640px) {
.kenapa-decor-circle--1 { width: 92px; height: 92px; right: -34px; top: -36px; }
.kenapa-decor-circle--2 { width: 44px; height: 44px; right: 14px; top: 20px; }
.kenapa-decor-dots { width: 66px; height: 66px; }
}
/* Badge nomor urut — pil kecil solid berwarna aksen, pojok kanan-atas.
Selalu jelas terbaca, jadi elemen "editorial" yang rapi tanpa jadi
watermark raksasa yang mengganggu di layar sempit. */
.kenapa-card-num {
position: absolute;
top: 1.1rem;
right: 1.1rem;
min-width: 2.1rem;
height: 2.1rem;
padding: 0 .55rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Righteous', sans-serif;
font-size: .8rem;
line-height: 1;
color: var(--accent, var(--merah));
background: rgba(200, 16, 46, .08);
background: color-mix(in srgb, var(--accent, var(--merah)) 12%, #fff);
border: 1px solid rgba(200, 16, 46, .22);
border: 1px solid color-mix(in srgb, var(--accent, var(--merah)) 28%, transparent);
z-index: 2;
user-select: none;
transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.kenapa-item:hover .kenapa-card-num { transform: scale(1.08) rotate(-4deg); }
/* Ikon badge */
.kenapa-icon {
position: relative;
width: 52px;
height: 52px;
border-radius: .9rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 8px 18px -6px rgba(0,0,0,.28);
transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.kenapa-icon svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.kenapa-card--lg .kenapa-icon { width: 60px; height: 60px; }
.kenapa-card--lg .kenapa-icon svg { width: 28px; height: 28px; }
.kenapa-item:hover .kenapa-icon { transform: scale(1.1) rotate(-6deg); }
/* Bingkai geometris berputar pelan di belakang ikon — kesan "futuristic
badge" alih-alih kotak polos. Warnanya semi-transparan putih supaya
tetap kontras di atas gradasi apa pun. */
.kenapa-icon-ring {
position: absolute;
inset: -9px;
border: 1.5px dashed rgba(255,255,255,.55);
border-radius: .65rem;
transform: rotate(12deg);
animation: kenapaIconSpin 16s linear infinite;
}
.kenapa-icon-ring::after {
content: '';
position: absolute;
inset: 3px;
border: 1px solid rgba(255,255,255,.3);
border-radius: 50%;
}
@keyframes kenapaIconSpin { to { transform: rotate(372deg); } }
/* Ring yang berdenyut halus di sekitar ikon saat hover — hidup tanpa ramai */
.kenapa-icon::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 1.1rem;
border: 1.5px solid var(--accent, var(--merah));
opacity: 0;
animation: kenapaPulse 2.4s ease-out infinite;
}
.kenapa-item:hover .kenapa-icon::after { opacity: .5; }
@keyframes kenapaPulse {
0% { transform: scale(.85); opacity: .5; }
100% { transform: scale(1.4); opacity: 0; }
}
@media (max-width: 640px) {
.kenapa-card { padding: 1.6rem 1.35rem 1.6rem 1.5rem; }
.kenapa-card--lg { padding: 1.7rem 1.5rem 1.7rem 1.65rem; }
.kenapa-card-num { top: .9rem; right: .9rem; min-width: 1.85rem; height: 1.85rem; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
.kenapa-card, .kenapa-icon, .kenapa-card-num, .kenapa-card-glow, .kenapa-icon::after,
.kenapa-icon-ring, .kenapa-card::before, .kenapa-decor-circle {
transition: none !important; animation: none !important;
}
}
/* Inter lebih kompak dari Verdana — leading & ukuran paragraf tetap
dijaga supaya nyaman dibaca di semua lebar layar. */
p, li, input, textarea {
line-height: 1.65;
}
#tentang p, .hero-slide p:not(.hero-title), #layanan p, #galeri p, #kontak p {
font-size: 0.9375rem;
}
/* Batasi lebar baca supaya paragraf tidak melebar penuh di layar besar
maupun mepet-pendek di layar kecil. */
#tentang p, #tentang .max-w-lg, .hero-slide p:not(.hero-title) {
max-width: 58ch;
}
/* ======================================================
HERO FX — lapisan dekoratif animasi di atas foto hero:
ring melingkar berputar pelan, blob cahaya lembut yang
"bernapas", partikel melayang, dan pola titik halus.
Semua pointer-events:none & warna netral supaya tidak
mengganggu keterbacaan teks maupun foto di baliknya.
====================================================== */
.hero-fx {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.hero-fx-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.45;
animation: heroFxDrift 16s ease-in-out infinite;
}
.hero-fx-blob-1 {
width: 360px; height: 360px;
top: -110px; right: -80px;
background: radial-gradient(circle, rgba(233, 200, 138, 0.55), transparent 70%);
animation-duration: 17s;
}
.hero-fx-blob-2 {
width: 300px; height: 300px;
bottom: -100px; left: -70px;
background: radial-gradient(circle, rgba(200, 16, 46, 0.45), transparent 70%);
animation-duration: 21s;
animation-direction: reverse;
}
.hero-fx-blob-3 {
width: 220px; height: 220px;
top: 35%; left: 55%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 70%);
animation-duration: 13s;
}
@keyframes heroFxDrift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(24px, -28px) scale(1.1); }
}
.hero-fx-ring {
position: absolute;
opacity: 0.55;
animation: heroFxSpin 46s linear infinite;
}
.hero-fx-ring-1 { width: 230px; height: 230px; top: 6%; right: 5%; }
.hero-fx-ring-2 { width: 160px; height: 160px; bottom: 8%; left: 4%; animation-duration: 60s; animation-direction: reverse; }
.hero-fx-ring-3 { width: 90px; height: 90px; top: 46%; left: 12%; animation-duration: 30s; }
@keyframes heroFxSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-fx-dot {
position: absolute;
bottom: -20px;
width: 5px; height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.45);
opacity: 0;
animation: heroFxFloat 8s ease-in infinite;
}
@keyframes heroFxFloat {
0% { opacity: 0; transform: translateY(0) scale(0.8); }
12% { opacity: 0.9; }
85% { opacity: 0.35; }
100% { opacity: 0; transform: translateY(-180px) scale(1.1); }
}
.hero-fx-dotgrid {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
background-size: 26px 26px;
opacity: 0.3;
-webkit-mask-image: radial-gradient(circle at 28% 38%, black, transparent 65%);
mask-image: radial-gradient(circle at 28% 38%, black, transparent 65%);
}
@media (prefers-reduced-motion: reduce) {
.hero-fx-blob, .hero-fx-ring, .hero-fx-dot {
animation: none !important;
}
}
.sticky-header {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* ================= HERO SLIDER (crossfade + soft zoom, bukan geser kasar) ================= */
.hero-slide {
transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1), transform 1.6s cubic-bezier(0.22, 1, 0.36, 1), filter 1.4s ease;
transform: scale(1.08);
opacity: 0;
filter: blur(8px);
pointer-events: none;
z-index: 1;
}
.hero-slide.slide-active {
transform: scale(1);
opacity: 1;
filter: blur(0);
pointer-events: auto;
z-index: 2;
}
.hero-slide.slide-exit {
transform: scale(0.98);
opacity: 0;
filter: blur(3px);
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.hero-slide { transition: opacity 0.4s ease; transform: none !important; filter: none !important; }
}
/* Progress bar tipis di dasar hero — mengisi penuh selama slide aktif tampil,
memberi rasa "smooth & terkendali" (mirip story bar), lalu reset instan
saat pindah slide (lihat resetHeroProgress() di script.js). */
#heroProgressTrack {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: rgba(255, 255, 255, 0.18);
z-index: 20;
}
#heroProgressBar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #FFFFFF, #E9C88A);
transition: width 6s linear;
}
@media (prefers-reduced-motion: reduce) {
#heroProgressBar { transition: none !important; }
}
.btn-gold {
background: linear-gradient(90deg, var(--emas-muda), var(--emas-tua));
color: #111111;
font-weight: 600;
letter-spacing: -0.3px;
}
.btn-gold:hover {
box-shadow: 0 10px 30px -10px var(--emas-muda);
transform: translateY(-3px);
}
.mobile-menu {
animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
background: linear-gradient(180deg, #FFFCF6, #FFF6E7);
max-height: calc(100vh - 64px);
overflow-y: auto;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Menu mobile berbentuk list vertikal — tiap baris kartu tipis dengan
ikon bulat bertema emas/merah di kiri, label di tengah, chevron di
kanan sebagai penanda bisa ditekan. Rapi atas-ke-bawah, mudah dipindai. */
/* Elemen dekoratif latar di panel menu mobile — ring melingkar tipis
berputar pelan + pola titik + blob cahaya samar, mengintip di balik
& di sela-sela kartu menu (kartu tetap solid putih di atasnya). */
.menu-fx {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.menu-fx-dotgrid {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(139, 107, 61, 0.22) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.6;
-webkit-mask-image: radial-gradient(circle at 88% 4%, black, transparent 55%);
mask-image: radial-gradient(circle at 88% 4%, black, transparent 55%);
}
.menu-fx-blob {
position: absolute;
width: 220px; height: 220px;
top: -60px; right: -70px;
border-radius: 50%;
background: radial-gradient(circle, rgba(233, 200, 138, 0.45), transparent 70%);
filter: blur(40px);
opacity: 0.8;
animation: heroFxDrift 15s ease-in-out infinite;
}
.menu-fx-ring {
position: absolute;
opacity: 0.8;
animation: heroFxSpin 50s linear infinite;
}
.menu-fx-ring-1 { width: 180px; height: 180px; top: -55px; right: -55px; }
.menu-fx-ring-2 { width: 130px; height: 130px; bottom: -35px; left: -35px; animation-duration: 38s; animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
.menu-fx-blob, .menu-fx-ring { animation: none !important; }
}
.mob-row {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.7rem 0.85rem;
border-radius: 0.9rem;
background: #FFFFFF;
border: 1px solid rgba(139, 107, 61, 0.12);
box-shadow: 0 2px 8px -6px rgba(42, 27, 18, 0.15);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.mob-row:hover, .mob-row:focus-visible {
background-color: rgba(233, 200, 138, 0.12);
box-shadow: 0 6px 16px -8px rgba(42, 27, 18, 0.28);
}
.mob-row:active {
transform: scale(0.98);
}
.mob-row-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: linear-gradient(135deg, rgba(200, 16, 46, 0.10), rgba(212, 162, 76, 0.22));
color: var(--merah);
}
.mob-row-icon svg {
width: 18px;
height: 18px;
}
.mob-row-label {
flex: 1 1 auto;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: -0.1px;
color: var(--ink);
}
.mob-row-chevron {
width: 16px;
height: 16px;
flex-shrink: 0;
color: rgba(42, 27, 18, 0.35);
}
.mob-reserve-btn {
background: linear-gradient(90deg, var(--emas-muda), var(--emas-tua));
color: #2A1B12 !important;
box-shadow: 0 10px 24px -10px rgba(139, 107, 61, 0.6);
}
.mob-reserve-btn:active {
transform: scale(0.98);
}
/* ======================================================
FOOTER — Latar belakang kaya & tipografi Righteous
====================================================== */
footer {
background:
radial-gradient(ellipse at 15% 90%, rgba(200, 16, 46, 0.10) 0%, transparent 55%),
radial-gradient(ellipse at 85% 10%, rgba(139, 107, 61, 0.18) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, rgba(58, 30, 10, 0.5) 0%, transparent 80%),
linear-gradient(160deg, #1c0e06 0%, #2a1507 25%, #3b2010 55%, #25110a 80%, #150b04 100%);
position: relative;
overflow: hidden;
}
/* Pola titik-titik emas halus di seluruh footer */
footer::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(233, 200, 138, 0.18) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
}
/* Garis kilauan di bagian atas footer */
footer::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(200, 16, 46, 0.6) 20%,
rgba(233, 200, 138, 0.9) 50%,
rgba(200, 16, 46, 0.6) 80%,
transparent 100%);
z-index: 1;
}
/* Semua konten footer di atas layer dekorasi */
footer > * { position: relative; z-index: 2; }
/* ===== DEKORASI LATAR FOOTER ===== */
/* Bintang-bintang dekoratif (seperti di header hero) */
/* ===== LINGKARAN KONSENTRIS ABSTRAK (gaya landing page modern) ===== */
/* Kontainer semua elemen dekorasi lingkaran */
.footer-deco-rings {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
/* Lingkaran konsentris besar — pojok kanan bawah (merah-coklat) */
.footer-deco-ring-right {
position: absolute;
right: -120px;
bottom: -120px;
width: 480px;
height: 480px;
pointer-events: none;
z-index: 1;
border-radius: 50%;
background: transparent;
box-shadow:
0 0 0 1px rgba(200, 16, 46, 0.22),
0 0 0 30px transparent,
0 0 0 31px rgba(200, 16, 46, 0.17),
0 0 0 61px transparent,
0 0 0 62px rgba(200, 16, 46, 0.13),
0 0 0 92px transparent,
0 0 0 93px rgba(200, 16, 46, 0.10),
0 0 0 123px transparent,
0 0 0 124px rgba(200, 16, 46, 0.07),
0 0 0 154px transparent,
0 0 0 155px rgba(200, 16, 46, 0.05),
0 0 0 185px transparent,
0 0 0 186px rgba(200, 16, 46, 0.03);
}
/* Lingkaran konsentris sedang — pojok kiri atas (emas) */
.footer-deco-ring-left {
position: absolute;
left: -80px;
top: -80px;
width: 340px;
height: 340px;
pointer-events: none;
z-index: 1;
border-radius: 50%;
background: transparent;
box-shadow:
0 0 0 1px rgba(212, 162, 76, 0.20),
0 0 0 24px transparent,
0 0 0 25px rgba(212, 162, 76, 0.15),
0 0 0 49px transparent,
0 0 0 50px rgba(212, 162, 76, 0.11),
0 0 0 74px transparent,
0 0 0 75px rgba(212, 162, 76, 0.08),
0 0 0 99px transparent,
0 0 0 100px rgba(212, 162, 76, 0.05),
0 0 0 124px transparent,
0 0 0 125px rgba(212, 162, 76, 0.03);
}
/* Lingkaran kecil sendirian di area tengah kanan — aksen bulat tunggal */
.footer-deco-ring-sm {
position: absolute;
right: 22%;
top: 15%;
width: 60px;
height: 60px;
pointer-events: none;
z-index: 1;
border-radius: 50%;
border: 1.5px solid rgba(233, 200, 138, 0.22);
background: transparent;
}
.footer-deco-ring-sm::after {
content: '';
position: absolute;
inset: 10px;
border-radius: 50%;
border: 1px solid rgba(233, 200, 138, 0.14);
}
/* Pola diagonal halus di seluruh area */
.footer-deco-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background-image:
repeating-linear-gradient(
-45deg,
rgba(212, 162, 76, 0.035) 0px,
rgba(212, 162, 76, 0.035) 1px,
transparent 1px,
transparent 22px
);
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.3) 70%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.3) 70%, transparent 100%);
}
/* Div placeholder — tidak terpakai, dijaga agar HTML tidak perlu diubah lagi */
.footer-deco-stars { display: none; }
.footer-deco-star-big { display: none; }
.footer-deco-star-left { display: none; }
/* Judul seksi footer: MENU · BRAND UNGGULAN · HUBUNGI KAMI */
.footer-section-title {
font-family: 'Righteous', 'Verdana', sans-serif !important;
font-weight: 400;
letter-spacing: 0.20em;
font-size: 0.78rem;
color: var(--emas-muda) !important;
text-shadow:
0 0 18px rgba(233, 200, 138, 0.50),
0 1px 3px rgba(0, 0, 0, 0.60);
position: relative;
padding-bottom: 8px;
}
/* Garis bawah dekoratif di bawah judul seksi */
.footer-section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 32px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--merah), var(--emas-muda));
}
/* ======================================================
DOT GEMPA — gelombang seismik berlapis-lapis
====================================================== */
.dot {
display: inline-block;
width: 7px;
height: 7px;
background: #C8102E;
border-radius: 50%;
margin-right: 10px;
flex-shrink: 0;
position: relative;
vertical-align: middle;
box-shadow: 0 0 6px rgba(200, 16, 46, 0.80);
animation: seismic-core 2.4s ease-in-out infinite;
}
/* Gelombang 1 — merah */
.dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1.5px solid rgba(200, 16, 46, 0.85);
transform: translate(-50%, -50%) scale(1);
animation: seismic-ring 2.4s ease-out infinite;
}
/* Gelombang 2 — emas, agak tertunda */
.dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1.5px solid rgba(233, 200, 138, 0.60);
transform: translate(-50%, -50%) scale(1);
animation: seismic-ring 2.4s ease-out infinite 0.75s;
}
@keyframes seismic-core {
0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(200,16,46,0.80); }
40% { transform: scale(1.25); box-shadow: 0 0 14px rgba(200,16,46,0.50); }
80% { transform: scale(0.90); box-shadow: 0 0 4px rgba(200,16,46,0.60); }
}
@keyframes seismic-ring {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
70% { transform: translate(-50%, -50%) scale(4.5); opacity: 0.15; }
100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; }
}
/* Delay berbeda tiap item supaya tidak sinkron semuanya */
li:nth-child(2) .dot,
a:nth-child(2) .dot { animation-delay: 0.3s; }
li:nth-child(2) .dot::before,
a:nth-child(2) .dot::before { animation-delay: 0.3s; }
li:nth-child(2) .dot::after,
a:nth-child(2) .dot::after { animation-delay: 1.05s; }
li:nth-child(3) .dot,
a:nth-child(3) .dot { animation-delay: 0.6s; }
li:nth-child(3) .dot::before,
a:nth-child(3) .dot::before { animation-delay: 0.6s; }
li:nth-child(3) .dot::after,
a:nth-child(3) .dot::after { animation-delay: 1.35s; }
li:nth-child(4) .dot,
a:nth-child(4) .dot { animation-delay: 0.9s; }
li:nth-child(4) .dot::before,
a:nth-child(4) .dot::before { animation-delay: 0.9s; }
li:nth-child(4) .dot::after,
a:nth-child(4) .dot::after { animation-delay: 1.65s; }
li:nth-child(5) .dot,
a:nth-child(5) .dot { animation-delay: 1.2s; }
li:nth-child(5) .dot::before,
a:nth-child(5) .dot::before { animation-delay: 1.2s; }
li:nth-child(5) .dot::after,
a:nth-child(5) .dot::after { animation-delay: 1.95s; }
li:nth-child(6) .dot,
a:nth-child(6) .dot { animation-delay: 1.5s; }
li:nth-child(6) .dot::before,
a:nth-child(6) .dot::before { animation-delay: 1.5s; }
li:nth-child(6) .dot::after,
a:nth-child(6) .dot::after { animation-delay: 2.25s; }
/* Hormati preferensi reduced motion */
@media (prefers-reduced-motion: reduce) {
.dot, .dot::before, .dot::after { animation: none; }
}
/* ======================================================
FOOTER LINKS & ICONS
====================================================== */
.footer-link {
display: flex;
align-items: center;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.01em;
}
.footer-link:hover {
color: white !important;
padding-left: 6px;
text-shadow: 0 0 12px rgba(233, 200, 138, 0.50);
}
.footer-link:hover .dot {
background: var(--emas-muda);
box-shadow: 0 0 10px rgba(233, 200, 138, 0.80);
}
.social-icon { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.social-icon:hover { transform: scale(1.25) rotate(10deg); background-color: #C8102E !important; }
/* ======================================================
FOOTER — ikon sosial media (SVG ringan, warna brand asli)
====================================================== */
.footer-social {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #fff;
flex-shrink: 0;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.footer-social svg { width: 19px; height: 19px; }
.footer-social:hover,
.footer-social:focus-visible {
transform: translateY(-3px) scale(1.08);
border-color: transparent;
}
.footer-social.is-instagram:hover { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); box-shadow: 0 8px 20px rgba(238, 42, 123, 0.4); }
.footer-social.is-facebook:hover { background: #1877F2; box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4); }
.footer-social.is-tiktok:hover { background: #000000; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); }
.footer-social.is-youtube:hover { background: #FF0000; box-shadow: 0 8px 20px rgba(255, 0, 0, 0.35); }
.footer-social.is-whatsapp:hover { background: #25D366; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); }
@media (prefers-reduced-motion: reduce) {
.footer-social { transition: background 0.2s ease, border-color 0.2s ease; }
.footer-social:hover { transform: none; }
}
/* ======================================================
FOOTER — ikon kontak (alamat, WhatsApp, email, jam buka)
====================================================== */
.footer-contact-icon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.10);
color: var(--emas-muda);
flex-shrink: 0;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.footer-contact-icon svg { width: 17px; height: 17px; }
a:hover > .footer-contact-icon {
background: var(--merah);
border-color: transparent;
color: #fff;
}
.hero-text { text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background-color: #C8102E; border-radius: 20px; }
@media (max-width: 640px) {
/* Hanya layout 2-kolom utama (konten + card) yang jadi 1 kolom di mobile.
Stats grid (.tentang-stats) TIDAK disentuh — tetap 2x2. */
#tentang .lg\:grid-cols-2 { grid-template-columns: 1fr !important; }
#tentang .bg-white { padding: 1.2rem !important; }
}
/* Angka statistik (2013 / brand / pelanggan): jarak & garis pemisah
supaya rapi & simetris di semua lebar layar, bukan cuma numpuk rapat.
Border pemisah cuma tampil di layar cukup lebar (md+) supaya di
layar sedang/kecil tidak memicu wrap yang bikin salah satu angka
turun sendirian ke baris baru. */
#tentang .stat-group {
flex-wrap: nowrap;
row-gap: 1.25rem;
column-gap: clamp(1rem, 4vw, 2rem);
overflow-x: auto;
}
@media (min-width: 768px) {
#tentang .stat-group > div:not(:last-child) {
border-right: 1px solid rgba(30, 58, 138, 0.12);
padding-right: clamp(1rem, 2vw, 1.5rem);
}
}
/* ==========================================================================
LATAR SEKSYEN #brand — dirombak total, bukan lagi blob blur bulat
("bulan") seperti sebelumnya. Sekarang: dasar gradasi diagonal baru,
dua EMBLEM gradien tegas (conic-gradient, bukan blur radial) yang
berputar pelan seperti roda warna di pojok — bentuknya jelas seperti
lingkaran/medali dengan cincin, bukan gumpalan kabur — plus panel kaca
(glassmorphism) tempat grid brand "mengambang" di atas latar.
========================================================================== */
.brand-section {
/* Titik awal (#E9C88A) disamakan persis dengan warna akhir gradasi
#kenapa di atasnya supaya batas antar section menyatu mulus,
bukan "reset" balik terang lalu gelap lagi. */
background: linear-gradient(150deg, #E9C88A 0%, #F0D9A0 30%, #F2CE8E 68%, #E6B872 100%);
}
.brand-shape {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.brand-shape-spin {
width: 100%;
height: 100%;
border-radius: 50%;
animation: brandShapeSpin 26s linear infinite;
}
.brand-shape::before {
/* cincin tipis di dalam emblem, menegaskan bentuk "koin/medali" */
content: '';
position: absolute;
inset: 26px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.brand-shape::after {
/* titik terang di tepi cincin, jadi penanda arah putaran emblem */
content: '';
position: absolute;
top: 22px; left: 50%;
width: 8px; height: 8px;
margin-left: -4px;
border-radius: 50%;
background: #FFF3D6;
box-shadow: 0 0 12px 3px rgba(255, 243, 214, 0.9);
}
.brand-shape--tr {
top: -180px;
right: -180px;
width: 460px;
height: 460px;
box-shadow: 0 30px 90px -20px rgba(200, 16, 46, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.brand-shape--tr .brand-shape-spin {
background: conic-gradient(from 210deg, #FFC773, #FF7A45 22%, #E8416A 45%, #C8102E 68%, #7A0F27 88%, #FFC773 100%);
}
.brand-shape--bl {
bottom: -170px;
left: -170px;
width: 400px;
height: 400px;
box-shadow: 0 30px 90px -20px rgba(139, 107, 61, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.brand-shape--bl .brand-shape-spin {
background: conic-gradient(from 40deg, #F0D9A0, #D4A24C 30%, #8B6B3D 58%, #5C4426 82%, #F0D9A0 100%);
animation-direction: reverse;
animation-duration: 32s;
}
@keyframes brandShapeSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.brand-shape-spin { animation: none; }
}
@media (max-width: 767px) {
.brand-shape--tr { width: 300px; height: 300px; top: -120px; right: -130px; }
.brand-shape--bl { width: 260px; height: 260px; bottom: -110px; left: -110px; }
}
/* Panel brand: tanpa latar/kaca — kartu langsung di atas latar seksyen
supaya ornamen (cabai, daun, bunga lawang) tetap terlihat. */
.brand-panel { position: relative; z-index: 1; }
/* Taburan titik halus (dot-grid) sebagai tekstur latar tambahan yang
modern & rapi, memudar ke tepi supaya tidak keras. */
.brand-dotgrid {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(42, 27, 18, 0.14) 1.4px, transparent 1.4px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 78%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 78%);
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
html, body { overflow-x: clip; }
* { max-width: 100%; }
/* ==========================================================================
Animasi scroll-reveal — elemen fade+slide masuk saat discroll ke layar.
Class `.reveal` di HTML, dipicu lewat IntersectionObserver di script.js
(lihat revealOnScroll()). prefers-reduced-motion dihormati.
========================================================================== */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger.is-visible > * {
animation: revealFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 450ms; }
.reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 540ms; }
.reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 630ms; }
/* Item dengan --d custom property (mis. grid brand, yang jumlahnya bisa
berapa saja) pakai delay presisi dari PHP, bukan hanya 8 nth-child
pertama seperti aturan generik di atas. */
@keyframes revealFade {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}
/* ==========================================================================
Section "Tentang Kami" (#tentang) — ditulis sebagai CSS custom (bukan
utility Tailwind) supaya dijamin tampil, karena tailwind.css di proyek
ini adalah bundel hasil build yang sudah di-purge: utility yang tidak
terdeteksi dipakai saat build (spt. flex-1, justify-end, scale-[1.01])
dibuang dan jadi tidak berefek sama sekali walau ditulis di HTML.
========================================================================== */
.tentang-bg-dots {
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(rgba(139, 107, 61, 0.16) 1px, transparent 1px);
background-size: 24px 24px;
-webkit-mask-image: radial-gradient(ellipse 65% 55% at 28% 35%, #000 40%, transparent 78%);
mask-image: radial-gradient(ellipse 65% 55% at 28% 35%, #000 40%, transparent 78%);
}
.tentang-blob {
position: absolute;
border-radius: 9999px;
filter: blur(90px);
pointer-events: none;
}
.tentang-blob--gold { width: 420px; height: 420px; top: -140px; left: -140px; background: var(--emas-muda); opacity: 0.32; }
.tentang-blob--red { width: 380px; height: 380px; bottom: -150px; right: -110px; background: var(--merah); opacity: 0.14; }
/* Partikel dekoratif melayang — motif yang sama dgn section Kenapa supaya
terasa konsisten satu bahasa desain di seluruh halaman. Disembunyikan
di mobile. Memakai keyframe kenapaFloat yang sudah ada. */
.tentang-particle {
position: absolute;
border-radius: 9999px;
pointer-events: none;
z-index: 1;
opacity: .5;
}
.tentang-particle--1 { width: 9px; height: 9px; top: 8%; right: 14%; background: var(--merah); animation: kenapaFloat 8s ease-in-out infinite; }
.tentang-particle--2 { width: 12px; height: 12px; top: 46%; right: 3%; background: var(--emas-muda); animation: kenapaFloat 10s ease-in-out infinite 1s; }
.tentang-particle--3 { width: 6px; height: 6px; bottom: 12%; left: 42%; background: var(--emas-tua); animation: kenapaFloat 7s ease-in-out infinite .5s; }
.tentang-particle--4 { width: 5px; height: 5px; top: 22%; left: 36%; background: var(--merah); animation: kenapaFloat 9s ease-in-out infinite 1.6s; }
.tentang-particle--5 { width: 14px; height: 14px; bottom: 30%; right: 22%; background: var(--emas-muda); animation: kenapaFloat 11s ease-in-out infinite .8s; }
@media (max-width: 767px) {
.tentang-particle { opacity: 0.3; }
.tentang-particle--1 { top: 5%; right: 8%; }
.tentang-particle--2 { top: 50%; right: 4%; }
.tentang-particle--3 { bottom: 8%; left: 8%; }
.tentang-particle--4 { display: none; }
.tentang-particle--5 { bottom: 35%; right: 6%; }
}
@media (prefers-reduced-motion: reduce) { .tentang-particle { animation: none !important; } }
/* Ornamen cincin/lingkaran ala referensi (ring outline + target bersarang)
— dikombinasikan dengan titik-titik di atas supaya section terasa lebih
dekoratif tanpa menutupi konten. Disembunyikan di bawah lg supaya tidak
berdesakan dengan layout 1-kolom. */
.tentang-ring {
position: absolute;
border-radius: 9999px;
border: 2px solid transparent;
pointer-events: none;
z-index: 1;
}
.tentang-ring--1 { width: 120px; height: 120px; top: 4%; right: 8%; left: auto; border-color: rgba(212, 162, 76, .55); animation: tentangRingSpin 32s linear infinite; }
.tentang-ring--2 { width: 34px; height: 34px; top: 1%; right: 16%; left: auto; border-color: rgba(200, 16, 46, .45); border-width: 2.5px; }
.tentang-ring--3 { width: 190px; height: 190px; bottom: 2%; left: 4%; border-color: rgba(139, 107, 61, .35); animation: tentangRingSpin 42s linear infinite reverse; }
@keyframes tentangRingSpin { to { transform: rotate(360deg); } }
.tentang-target {
position: absolute;
top: 3%;
left: 42%;
width: 150px;
height: 150px;
pointer-events: none;
z-index: 1;
}
.tentang-target span {
position: absolute;
inset: 0;
margin: auto;
border-radius: 9999px;
border: 1.5px solid rgba(200, 16, 46, .25);
}
.tentang-target span:nth-child(1) { width: 150px; height: 150px; }
.tentang-target span:nth-child(2) { width: 98px; height: 98px; border-color: rgba(212, 162, 76, .35); }
.tentang-target span:nth-child(3) { width: 48px; height: 48px; border-color: rgba(200, 16, 46, .45); }
/* Ornamen ring & target: tersembunyi di bawah 1024px (sebelumnya),
sekarang tampil di semua ukuran dengan posisi yang disesuaikan untuk mobile */
@media (max-width: 1023px) {
.tentang-ring--1 { width: 90px; height: 90px; top: 2%; left: auto; right: 4%; }
.tentang-ring--2 { width: 26px; height: 26px; top: 0.5%; left: auto; right: 11%; }
.tentang-ring--3 { width: 130px; height: 130px; bottom: 2%; left: 2%; }
.tentang-target { width: 110px; height: 110px; top: 2%; right: 2%; }
.tentang-target span:nth-child(1) { width: 110px; height: 110px; }
.tentang-target span:nth-child(2) { width: 72px; height: 72px; }
.tentang-target span:nth-child(3) { width: 36px; height: 36px; }
}
@media (max-width: 480px) {
.tentang-ring--1 { width: 70px; height: 70px; }
.tentang-ring--2 { width: 20px; height: 20px; }
.tentang-ring--3 { width: 100px; height: 100px; }
.tentang-target { width: 80px; height: 80px; }
.tentang-target span:nth-child(1) { width: 80px; height: 80px; }
.tentang-target span:nth-child(2) { width: 52px; height: 52px; }
.tentang-target span:nth-child(3) { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .tentang-ring { animation: none !important; } }
/* ==========================================================================
Eyebrow badge (ikon bulat + label di pil kaca) — versi UMUM dipakai di
SEMUA section (#kenapa, #brand, #galeri, #lokasi, #kontak) supaya bahasa
desain badge-nya benar-benar SAMA dengan #tentang ("SEJAK 2013 ·
PURWOKERTO"), bukan lagi macam-macam gaya chip solid berbeda-beda.
========================================================================== */
.sec-eyebrow {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 1.15rem 0.5rem 0.5rem;
border-radius: 9999px;
background: linear-gradient(90deg, rgba(200, 16, 46, 0.08), rgba(212, 162, 76, 0.14));
border: 1px solid rgba(200, 16, 46, 0.22);
color: var(--merah);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
overflow: hidden;
isolation: isolate;
}
.sec-eyebrow-icon {
width: 24px;
height: 24px;
border-radius: 9999px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--merah), var(--emas-muda));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px -2px rgba(200, 16, 46, 0.5);
}
.sec-eyebrow-icon svg { width: 12px; height: 12px; }
.sec-eyebrow::after {
content: '';
position: absolute;
inset: 0;
left: -70%;
width: 45%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
animation: tentangEyebrowShine 3.4s ease-in-out infinite;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) { .sec-eyebrow::after { animation: none; display: none; } }
/* Varian untuk section gelap (#lokasi, #kontak) — kaca keemasan transparan
di atas latar gelap, bukan merah di atas terang. */
.sec-eyebrow--dark {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(233, 200, 138, 0.16));
border-color: rgba(233, 200, 138, 0.32);
color: var(--emas-muda);
}
.sec-eyebrow--dark .sec-eyebrow-icon {
background: linear-gradient(135deg, var(--merah), var(--emas-tua));
}
/* Aksen garis tipis menyala di batas atas #kenapa/#brand/#galeri — penanda
transisi antar-section yang halus & konsisten (senada .kontak-seam di
section gelap), bukan lagi batas lurus polos tanpa aksen apa pun. */
#kenapa::before,
#brand::after,
#galeri::after {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: min(320px, 60%);
height: 3px;
border-radius: 9999px;
background: linear-gradient(90deg, transparent, var(--merah), var(--emas-tua), var(--emas-muda), transparent);
opacity: 0.55;
box-shadow: 0 0 20px 3px rgba(200, 16, 46, 0.18);
pointer-events: none;
z-index: 2;
}
/* Batas #tentang → #kenapa sebelumnya benar-benar rata (warna akhir
#tentang sama persis dgn warna awal #kenapa), jadi terasa menyatu
tanpa batas sama sekali. Warna awal #kenapa sudah digeser sedikit
lebih tua di HTML; garis bayangan lembut ini menegaskan batasnya
di SELURUH lebar layar (bukan cuma aksen 320px di tengah di atas). */
#kenapa {
box-shadow: inset 0 10px 18px -14px rgba(74, 56, 38, 0.4);
}
.tentang-eyebrow {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 1.15rem 0.5rem 0.5rem;
border-radius: 9999px;
background: linear-gradient(90deg, rgba(200, 16, 46, 0.08), rgba(212, 162, 76, 0.14));
border: 1px solid rgba(200, 16, 46, 0.22);
color: var(--merah);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
margin-bottom: 1.75rem;
overflow: hidden;
isolation: isolate;
}
.tentang-eyebrow-icon {
width: 24px;
height: 24px;
border-radius: 9999px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--merah), var(--emas-muda));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px -2px rgba(200, 16, 46, 0.5);
}
.tentang-eyebrow-icon svg { width: 12px; height: 12px; }
/* kilau tipis yang lewat berulang di badge — sentuhan hidup tanpa mengganggu keterbacaan teks */
.tentang-eyebrow::after {
content: '';
position: absolute;
inset: 0;
left: -70%;
width: 45%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
animation: tentangEyebrowShine 3.4s ease-in-out infinite;
z-index: 1;
}
@keyframes tentangEyebrowShine {
0% { left: -70%; }
55% { left: 130%; }
100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
.tentang-eyebrow::after { animation: none; display: none; }
}
.tentang-heading {
/* Disamakan dengan section lain yang semua pakai .logo-font (Righteous) —
sebelumnya section ini sendirian masih pakai Inter. */
font-family: 'Righteous', 'Verdana', sans-serif;
font-weight: 700;
line-height: 1.12;
color: #2A1B12;
margin-bottom: 1.75rem;
}
/* Kata kunci pada judul diberi gradient teks yang bergeser halus — memakai
keyframe kenapaShine yang sama supaya konsisten dgn section Kenapa. */
.tentang-heading-accent {
background: linear-gradient(90deg, #C8102E 0%, #D4A24C 50%, #C8102E 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: kenapaShine 5s linear infinite;
display: inline-block;
}
@media (prefers-reduced-motion: reduce) { .tentang-heading-accent { animation: none; } }
.tentang-lead {
font-size: 1.0625rem;
line-height: 1.8;
color: #3A2A1C;
max-width: 48ch;
margin-bottom: 2.75rem;
}
.tentang-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
width: 100%;
box-sizing: border-box;
}
.tentang-stat {
position: relative;
display: flex;
align-items: center;
gap: 0.85rem;
background: rgba(255, 255, 255, 0.28);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 1rem;
padding: 0.9rem 1.25rem;
box-shadow: 0 10px 24px -16px rgba(42, 27, 18, 0.12);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
width: 100%;
box-sizing: border-box;
min-width: 0;
}
.tentang-stat:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.45);
box-shadow: 0 18px 34px -16px rgba(42, 27, 18, 0.16);
border-color: rgba(255, 255, 255, 0.6);
}
.tentang-stat-icon {
width: 38px;
height: 38px;
border-radius: 0.7rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.28);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tentang-stat-icon svg { width: 18px; height: 18px; }
.tentang-stat:hover .tentang-stat-icon { transform: scale(1.1) rotate(-6deg); }
.tentang-stat-num {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
color: var(--merah);
line-height: 1;
margin-bottom: 0.2rem;
white-space: nowrap;
}
.tentang-stat-label {
font-size: 0.72rem;
font-weight: 400;
color: #9A8570;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.tentang-stat, .tentang-stat-icon { transition: none !important; }
}
.tentang-card-wrap { position: relative; perspective: 1200px; }
.tentang-card-glow {
position: absolute;
inset: -6px;
border-radius: 2rem;
background: linear-gradient(120deg, rgba(200, 16, 46, 0.35), rgba(212, 162, 76, 0.35), rgba(139, 107, 61, 0.35));
filter: blur(22px);
opacity: 0.55;
animation: tentangGlowBreathe 5s ease-in-out infinite;
transition: opacity 0.5s ease;
pointer-events: none;
}
.tentang-card-wrap:hover .tentang-card-glow { opacity: 1; animation-play-state: paused; }
@keyframes tentangGlowBreathe {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) { .tentang-card-glow { animation: none; } }
/* Chip "10+ Tahun" yang melayang di sudut kartu — aksen kecil yang bikin
kartu terasa lebih hidup dan tidak polos. */
.tentang-card-badge {
position: absolute;
top: -14px;
left: 1.75rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border-radius: 9999px;
background: linear-gradient(90deg, var(--merah), var(--emas-tua));
color: #fff;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.04em;
box-shadow: 0 8px 18px -6px rgba(200, 16, 46, 0.55);
animation: tentangBadgeFloat 3.5s ease-in-out infinite;
}
@keyframes tentangBadgeFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { .tentang-card-badge { animation: none; } }
.tentang-card {
position: relative;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 1.75rem;
padding: 1.75rem;
overflow: hidden;
box-shadow: 0 25px 50px -22px rgba(42, 27, 18, 0.4);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
@media (min-width: 640px) { .tentang-card { padding: 2.5rem; } }
.tentang-card-wrap:hover .tentang-card {
transform: translateY(-4px) rotateX(1.5deg) rotateY(-1.5deg);
box-shadow: 0 32px 60px -20px rgba(42, 27, 18, 0.48);
}
.tentang-card-topbar {
position: absolute; top: 0; left: 0; right: 0; height: 6px;
background: linear-gradient(90deg, var(--merah), var(--emas-muda), var(--emas-tua));
}
.tentang-card-blob { position: absolute; width: 160px; height: 160px; border-radius: 9999px; filter: blur(55px); pointer-events: none; }
.tentang-card-blob--gold { top: -55px; right: -55px; background: var(--emas-muda); opacity: 0.25; }
.tentang-card-blob--red { bottom: -55px; left: -55px; background: var(--merah); opacity: 0.2; }
.tentang-card-head {
position: relative; z-index: 1;
display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
margin-bottom: 1.75rem;
}
.tentang-card-icon {
width: 60px; height: 60px; border-radius: 9999px; flex-shrink: 0;
background: linear-gradient(135deg, var(--merah), var(--emas-tua));
color: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 12px 28px -8px rgba(200, 16, 46, 0.5);
}
@media (min-width: 640px) { .tentang-card-icon { width: 72px; height: 72px; } }
.tentang-card-kicker { color: var(--merah); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; }
.tentang-card-city {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 700;
font-size: clamp(1.35rem, 2.6vw, 2rem);
color: #2A1B12;
margin-top: 0.3rem;
}
.tentang-card-text { position: relative; z-index: 1; font-size: 1.0625rem; line-height: 1.8; color: #4A3826; }
.tentang-card-foot {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 0.6rem;
margin-top: 1.5rem; padding-top: 1.25rem;
border-top: 1px solid rgba(42, 27, 18, 0.08);
font-size: 0.85rem; color: #6B5B43;
}
.tentang-dot {
width: 8px; height: 8px; border-radius: 9999px; background: var(--emas-muda); flex-shrink: 0;
animation: tentangDotPulse 1.8s ease-in-out infinite;
}
@keyframes tentangDotPulse {
0%, 100% { opacity: 0.45; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.tentang-dot { animation: none; }
}
/* Kilau emas tipis yang lewat sekali di badge label section (mis. "GALERI",
"LAYANAN KAMI") — sentuhan premium tanpa mengganggu keterbacaan. */
.badge-shine {
position: relative;
overflow: hidden;
}
.badge-shine::after {
content: '';
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine {
0% { left: -60%; }
35% { left: 130%; }
100% { left: 130%; }
}
/* Tombol "RESERVASI" di header: kapsul (pill) putih tegas dengan shadow
yang lebih dalam supaya terlihat "melayang" di atas header, senada
dengan bentuk kapsul grup menu nav di bawah ini. */
.btn-reserve {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 700;
font-size: 0.8125rem;
letter-spacing: 0.6px;
border-radius: 9999px;
background: linear-gradient(115deg, var(--emas-muda) 0%, var(--emas-tua) 55%, var(--merah) 100%);
background-size: 200% 200%;
background-position: 0% 50%;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 10px 24px -8px rgba(42, 27, 18, 0.55);
text-shadow: 0 1px 2px rgba(42, 27, 18, 0.35);
transition: background-position 0.6s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.btn-reserve:hover, .btn-reserve:focus-visible {
background-position: 100% 50%;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 16px 32px -8px rgba(42, 27, 18, 0.6);
transform: translateY(-2px);
}
/* Menu nav TIDAK dibungkus satu kotak besar — tiap item punya "bungkus"
badge kecil sendiri-sendiri, senada dengan tampilan badge "Group" di
sebelah logo (kapsul tipis semi-transparan), dan jaraknya dirapatkan
supaya tidak terlihat lebar/renggang. */
nav[aria-label="Menu utama"] {
display: flex;
align-items: center;
gap: 0.3rem;
}
.nav-menu-wrap {
flex: 1 1 0%;
justify-content: flex-end;
padding-right: 0.75rem;
}
/* Tombol Reservasi kini berlatar gradien warna brand, jadi sweep shine
dibuat putih terang supaya kontras & tetap kelihatan berjalan di atasnya. */
.btn-reserve.badge-shine::after {
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.75), transparent);
}
.nav-link {
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: normal;
padding: 0.25rem 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
min-width: 5.75rem;
border-radius: 9999px;
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
white-space: nowrap;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.nav-link:hover, .nav-link:focus-visible {
background-color: rgba(255, 255, 255, 0.95);
color: var(--emas-tua);
border-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 6px 14px -4px rgba(42, 27, 18, 0.4);
transform: translateY(-1px);
}
.nav-link.active {
background-color: rgba(255, 255, 255, 0.95);
color: var(--merah);
border-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 6px 14px -4px rgba(42, 27, 18, 0.4);
}
/* Efek perbesaran perlahan (Ken Burns) pada foto latar hero — kesan
sinematik & premium, cocok untuk brand kuliner high-end. */
.hero-slide {
animation: fadeIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hero-slide.kenburns { animation: kenburns 14s ease-in-out infinite alternate; }
@keyframes kenburns {
from { background-size: 100% 100%; }
to { background-size: 112% 112%; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide.kenburns { animation: none; }
}
/* ==========================================================================
ORNAMEN LATAR PER SECTION — sentuhan visual khas usaha kuliner multi-brand
& multi-cabang. Semua dekoratif (aria-hidden secara efek, pointer-events
none), tidak mengganggu keterbacaan konten yang berada di atasnya.
========================================================================== */
#tentang, #brand, #layanan, #galeri, #kontak {
position: relative;
overflow: hidden;
}
#tentang > .max-w-7xl, #brand > .max-w-7xl, #layanan > .max-w-7xl,
#galeri > .max-w-7xl, #kontak > .max-w-7xl {
position: relative;
z-index: 1;
}
/* Tentang: gumpalan (blob) lembut yang "bernapas" pelan-pelan di pojok
kanan atas — bentuknya organik, bukan kotak/lingkaran kaku, ditambah
taburan daun & cabai tipis sebagai aksen kuliner. */
#tentang::before {
content: '';
position: absolute;
top: -12%; right: -10%;
width: 58%; height: 78%;
background: radial-gradient(closest-side, rgba(212, 162, 76, 0.22), rgba(200, 16, 46, 0.06) 65%, transparent 78%);
border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
animation: blobMorph 16s ease-in-out infinite alternate;
}
#tentang::after {
content: '';
position: absolute;
bottom: -6%; left: -8%;
width: 46%; height: 55%;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%0A%3Cg%20fill%3D%22%238B6B3D%22%20opacity%3D%220.8%22%3E%0A%3Cg%20transform%3D%22translate%2824%2C20%29%20rotate%2815%29%22%3E%0A%3Cpath%20d%3D%22M7%200C11%200%2014%206%2014%2011%2014%2016%2011%2022%207%2022%203%2022%200%2016%200%2011%200%206%203%200%207%200Z%22%2F%3E%0A%3Cline%20x1%3D%227%22%20y1%3D%221%22%20x2%3D%227%22%20y2%3D%2221%22%20stroke%3D%22%23FDF9F2%22%20stroke-opacity%3D%220.6%22%20stroke-width%3D%220.8%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23C8102E%22%20opacity%3D%220.7%22%3E%0A%3Cg%20transform%3D%22translate%28120%2C50%29%20rotate%28-25%29%20scale%280.8%29%22%3E%0A%3Cpath%20d%3D%22M2%202C6-1%2011%201%2013%205%2016%2010%2015%2017%2010%2021%207%2023%203%2022%201%2019%20-1%2016%200%2011%203%209%201%207%200%204%202%202Z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%238B6B3D%22%20opacity%3D%220.6%22%3E%0A%3Cg%20transform%3D%22translate%2860%2C110%29%20rotate%2840%29%20scale%280.7%29%22%3E%0A%3Cpath%20d%3D%22M7%200C11%200%2014%206%2014%2011%2014%2016%2011%2022%207%2022%203%2022%200%2016%200%2011%200%206%203%200%207%200Z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
background-size: 180px 180px;
background-repeat: repeat;
opacity: 0.5;
-webkit-mask-image: radial-gradient(circle, black, transparent 75%);
mask-image: radial-gradient(circle, black, transparent 75%);
}
/* Brand: taburan ikon cabai, daun, dan bunga lawang (khas dapur Nusantara)
melayang perlahan — menggantikan pin lokasi, kini lebih terasa "kuliner". */
#brand::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%0A%3Cg%20fill%3D%22%23C8102E%22%3E%0A%3Cg%20transform%3D%22translate%2828%2C26%29%20rotate%28-12%29%20scale%281.05%29%22%3E%0A%3Cpath%20d%3D%22M2%202C6-1%2011%201%2013%205%2016%2010%2015%2017%2010%2021%207%2023%203%2022%201%2019%20-1%2016%200%2011%203%209%201%207%200%204%202%202Z%22%2F%3E%0A%3Cpath%20d%3D%22M2%202C0%200-2-1-4-3%22%20stroke%3D%22%237A9E5C%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%238B6B3D%22%3E%0A%3Cg%20transform%3D%22translate%28150%2C20%29%20rotate%2820%29%22%3E%0A%3Cpath%20d%3D%22M7%200C11%200%2014%206%2014%2011%2014%2016%2011%2022%207%2022%203%2022%200%2016%200%2011%200%206%203%200%207%200Z%22%2F%3E%0A%3Cline%20x1%3D%227%22%20y1%3D%221%22%20x2%3D%227%22%20y2%3D%2221%22%20stroke%3D%22%23FDF6E8%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%220.9%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20stroke%3D%22%238B6B3D%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20transform%3D%22translate%2895%2C80%29%22%3E%0A%3Cline%20x1%3D%220%22%20y1%3D%22-6%22%20x2%3D%220%22%20y2%3D%22-2%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%226%22%20x2%3D%220%22%20y2%3D%222%22%2F%3E%0A%3Cline%20x1%3D%22-6%22%20y1%3D%220%22%20x2%3D%22-2%22%20y2%3D%220%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%220%22%20x2%3D%222%22%20y2%3D%220%22%2F%3E%0A%3Cline%20x1%3D%22-4.2%22%20y1%3D%22-4.2%22%20x2%3D%22-1.4%22%20y2%3D%22-1.4%22%2F%3E%3Cline%20x1%3D%224.2%22%20y1%3D%224.2%22%20x2%3D%221.4%22%20y2%3D%221.4%22%2F%3E%0A%3Cline%20x1%3D%22-4.2%22%20y1%3D%224.2%22%20x2%3D%22-1.4%22%20y2%3D%221.4%22%2F%3E%3Cline%20x1%3D%224.2%22%20y1%3D%22-4.2%22%20x2%3D%221.4%22%20y2%3D%22-1.4%22%2F%3E%0A%3Ccircle%20r%3D%221.6%22%20fill%3D%22%238B6B3D%22%20stroke%3D%22none%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23C8102E%22%3E%0A%3Cg%20transform%3D%22translate%28190%2C110%29%20rotate%28-30%29%20scale%280.85%29%22%3E%0A%3Cpath%20d%3D%22M2%202C6-1%2011%201%2013%205%2016%2010%2015%2017%2010%2021%207%2023%203%2022%201%2019%20-1%2016%200%2011%203%209%201%207%200%204%202%202Z%22%2F%3E%0A%3Cpath%20d%3D%22M2%202C0%200-2-1-4-3%22%20stroke%3D%22%237A9E5C%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%238B6B3D%22%20opacity%3D%220.9%22%3E%0A%3Cg%20transform%3D%22translate%2840%2C150%29%20rotate%28-25%29%20scale%280.8%29%22%3E%0A%3Cpath%20d%3D%22M7%200C11%200%2014%206%2014%2011%2014%2016%2011%2022%207%2022%203%2022%200%2016%200%2011%200%206%203%200%207%200Z%22%2F%3E%0A%3Cline%20x1%3D%227%22%20y1%3D%221%22%20x2%3D%227%22%20y2%3D%2221%22%20stroke%3D%22%23FDF6E8%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%220.9%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20stroke%3D%22%23C8102E%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20transform%3D%22translate%28175%2C190%29%20scale%280.9%29%22%3E%0A%3Cline%20x1%3D%220%22%20y1%3D%22-6%22%20x2%3D%220%22%20y2%3D%22-2%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%226%22%20x2%3D%220%22%20y2%3D%222%22%2F%3E%0A%3Cline%20x1%3D%22-6%22%20y1%3D%220%22%20x2%3D%22-2%22%20y2%3D%220%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%220%22%20x2%3D%222%22%20y2%3D%220%22%2F%3E%0A%3Cline%20x1%3D%22-4.2%22%20y1%3D%22-4.2%22%20x2%3D%22-1.4%22%20y2%3D%22-1.4%22%2F%3E%3Cline%20x1%3D%224.2%22%20y1%3D%224.2%22%20x2%3D%221.4%22%20y2%3D%221.4%22%2F%3E%0A%3Cline%20x1%3D%22-4.2%22%20y1%3D%224.2%22%20x2%3D%22-1.4%22%20y2%3D%221.4%22%2F%3E%3Cline%20x1%3D%224.2%22%20y1%3D%22-4.2%22%20x2%3D%221.4%22%20y2%3D%22-1.4%22%2F%3E%0A%3Ccircle%20r%3D%221.6%22%20fill%3D%22%23C8102E%22%20stroke%3D%22none%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%238B6B3D%22%3E%0A%3Cg%20transform%3D%22translate%2895%2C205%29%20rotate%2860%29%20scale%280.75%29%22%3E%0A%3Cpath%20d%3D%22M2%202C6-1%2011%201%2013%205%2016%2010%2015%2017%2010%2021%207%2023%203%2022%201%2019%20-1%2016%200%2011%203%209%201%207%200%204%202%202Z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
background-size: 220px 220px;
opacity: 0.16;
animation: driftSlow 42s linear infinite;
}
/* Layanan: watermark siluet meja makan (piring + sendok-garpu-pisau)
yang lebih utuh & elegan di pojok bawah, aksen kuliner high-end. */
#layanan::after {
content: '';
position: absolute;
bottom: -10%; right: -8%;
width: clamp(280px, 36vw, 520px);
height: clamp(280px, 36vw, 520px);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%200%20400%20400%22%20fill%3D%22none%22%20stroke%3D%22%238B6B3D%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22118%22%20stroke-width%3D%224%22%20opacity%3D%220.55%22%2F%3E%0A%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%2272%22%20stroke-width%3D%223%22%20opacity%3D%220.35%22%2F%3E%0A%3Cg%20transform%3D%22translate%2896%2C96%29%22%3E%0A%3Cline%20x1%3D%228%22%20y1%3D%220%22%20x2%3D%228%22%20y2%3D%2270%22%2F%3E%0A%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2228%22%2F%3E%0A%3Cline%20x1%3D%2216%22%20y1%3D%220%22%20x2%3D%2216%22%20y2%3D%2228%22%2F%3E%0A%3Cpath%20d%3D%22M0%2028C0%2034%204%2038%208%2038%2012%2038%2016%2034%2016%2028%22%2F%3E%0A%3Cline%20x1%3D%228%22%20y1%3D%2238%22%20x2%3D%228%22%20y2%3D%2270%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20transform%3D%22translate%28296%2C96%29%20scale%28-1%2C1%29%22%3E%0A%3Cpath%20d%3D%22M0%200C16%204%2022%2016%2020%2030%2018%2042%2010%2046%204%2044L4%2070%22%20%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20transform%3D%22translate%28230%2C140%29%22%3E%0A%3Cellipse%20cx%3D%2214%22%20cy%3D%2216%22%20rx%3D%2213%22%20ry%3D%2219%22%2F%3E%0A%3Cline%20x1%3D%2214%22%20y1%3D%2235%22%20x2%3D%2214%22%20y2%3D%2296%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: contain;
opacity: 0.14;
pointer-events: none;
}
#layanan::before {
content: '';
position: absolute;
top: -15%; left: -12%;
width: 40%; height: 60%;
background: radial-gradient(closest-side, rgba(200, 16, 46, 0.08), transparent 72%);
border-radius: 58% 42% 38% 62% / 55% 45% 60% 40%;
animation: blobMorph 20s ease-in-out infinite alternate-reverse;
pointer-events: none;
}
/* Galeri: tekstur titik halus + aksen sapuan kuas tinta di dua sudut grid
foto (ganti bingkai siku kaku), kesan "contact sheet" studio foto artisan. */
#galeri::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(139, 107, 61, 0.3) 1.6px, transparent 1.6px);
background-size: 30px 30px;
-webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
mask-image: linear-gradient(to bottom, black, transparent 85%);
opacity: 0.6;
}
#gallery-grid { position: relative; }
#gallery-grid::before, #gallery-grid::after {
content: '';
position: absolute;
width: 42px; height: 42px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%20fill%3D%22none%22%20stroke%3D%22%238B6B3D%22%20stroke-width%3D%224.5%22%20stroke-linecap%3D%22round%22%3E%0A%3Cpath%20d%3D%22M4%2062C4%2030%2030%204%2062%204%22%20opacity%3D%220.75%22%2F%3E%0A%3Cpath%20d%3D%22M4%2046C4%2026%2026%204%2046%204%22%20stroke-width%3D%223%22%20opacity%3D%220.4%22%2F%3E%0A%3Ccircle%20cx%3D%2262%22%20cy%3D%224%22%20r%3D%223.5%22%20fill%3D%22%23C8102E%22%20stroke%3D%22none%22%2F%3E%0A%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: contain;
opacity: 0.7;
pointer-events: none;
}
#gallery-grid::before {
top: -16px; left: -16px;
}
#gallery-grid::after {
bottom: -16px; right: -16px;
transform: rotate(180deg);
}
/* Kontak: bahasa visual disamakan dengan section Lokasi tepat di atasnya
(garis grid halus + gradasi cahaya melayang) supaya dua section gelap
yang bersebelahan terasa satu kesatuan, bukan dua gaya berbeda. Taburan
biji kopi/bintang (.pattern-confetti) diperbesar & dipertipis + dikasih
mask supaya jadi aksen halus di pinggiran, tidak lagi terasa seperti
pola "confetti" penuh yang bertabrakan dengan teks di atasnya. */
#kontak::before {
content: '';
position: absolute;
top: 8%; left: -12%;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(233, 200, 138, 0.16), transparent 70%);
filter: blur(20px);
animation: floatSlow 14s ease-in-out infinite;
pointer-events: none;
}
#kontak::after {
content: '';
position: absolute;
bottom: -18%; right: -10%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(200, 16, 46, 0.14), transparent 70%);
filter: blur(20px);
animation: floatSlow 17s ease-in-out infinite reverse;
pointer-events: none;
}
/* Garis sambungan #lokasi → #kontak — pengganti wave-divider.svg lama yang
filenya kosong/rusak (makanya dulu tampil "bolong" di atas Kontak).
Sekarang murni CSS: pita gradasi tiga warna brand yang menyala lembut,
dijamin selalu tampil karena tidak bergantung file gambar eksternal. */
.kontak-seam {
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: min(360px, 70%);
height: 3px;
border-radius: 9999px;
background: linear-gradient(90deg, transparent, var(--merah), var(--emas-muda), var(--emas-tua), transparent);
opacity: 0.55;
box-shadow: 0 0 26px 4px rgba(212, 162, 76, 0.35);
pointer-events: none;
z-index: 2;
}
.kontak-grid {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(233, 200, 138, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(233, 200, 138, 0.06) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(ellipse 80% 65% at 22% 30%, transparent 25%, #000 78%);
mask-image: radial-gradient(ellipse 80% 65% at 22% 30%, transparent 25%, #000 78%);
}
#kontak .pattern-confetti {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%0A%3Cg%20fill%3D%22%23E9C88A%22%20opacity%3D%220.9%22%3E%0A%3Cg%20transform%3D%22translate%2822%2C26%29%20rotate%28-20%29%22%3E%0A%3Cellipse%20cx%3D%2212%22%20cy%3D%2217%22%20rx%3D%2212%22%20ry%3D%2217%22%2F%3E%0A%3Cpath%20d%3D%22M12%200C8%207%208%2027%2012%2034%22%20stroke%3D%22%232A1B12%22%20stroke-width%3D%222%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23D4A24C%22%3E%0A%3Cpath%20d%3D%22M132%2030l3.2%207.8%207.8%203.2-7.8%203.2-3.2%207.8-3.2-7.8-7.8-3.2%207.8-3.2z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23E9C88A%22%20opacity%3D%220.8%22%3E%0A%3Cg%20transform%3D%22translate%2878%2C104%29%20rotate%2818%29%20scale%280.9%29%22%3E%0A%3Cellipse%20cx%3D%2212%22%20cy%3D%2217%22%20rx%3D%2212%22%20ry%3D%2217%22%2F%3E%0A%3Cpath%20d%3D%22M12%200C8%207%208%2027%2012%2034%22%20stroke%3D%22%232A1B12%22%20stroke-width%3D%222%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23C8102E%22%20opacity%3D%220.85%22%3E%0A%3Ccircle%20cx%3D%22165%22%20cy%3D%22140%22%20r%3D%223.4%22%2F%3E%0A%3Ccircle%20cx%3D%2240%22%20cy%3D%22160%22%20r%3D%222.6%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23E9C88A%22%20opacity%3D%220.6%22%3E%0A%3Ccircle%20cx%3D%22170%22%20cy%3D%2270%22%20r%3D%222.4%22%2F%3E%0A%3Ccircle%20cx%3D%2220%22%20cy%3D%22120%22%20r%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%22110%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
background-size: 280px 280px;
opacity: 0.18;
-webkit-mask-image: radial-gradient(ellipse 78% 65% at 25% 32%, transparent 30%, #000 80%);
mask-image: radial-gradient(ellipse 78% 65% at 25% 32%, transparent 30%, #000 80%);
}
/* Panel info kontak (alamat/WA/email/jam) — dibungkus jadi satu kartu kaca
dengan pembatas tipis antar-item, senada dengan .lokasi-info-card di
section sebelumnya, supaya dua-duanya terasa satu bahasa desain. */
.kontak-info-panel {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 1.5rem;
padding: 1.5rem 1.75rem;
box-shadow: 0 14px 32px -18px rgba(42, 27, 18, 0.25);
}
.kontak-info-item + .kontak-info-item {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px dashed rgba(42, 27, 18, 0.14);
}
.kontak-info-icon {
background: linear-gradient(135deg, #C8102E, #D4A24C);
color: #fff;
}
.kontak-info-icon svg { width: 1.2rem; height: 1.2rem; }
/* Ornamen tambahan (senada #lokasi tepat di atasnya) — titik-titik,
lingkaran konsentris, garis "komet" diagonal, dan cincin melayang.
Diposisikan di kolom kiri/atas supaya tidak tabrakan dengan kartu
form putih di kolom kanan. */
.kontak-dots {
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(rgba(139, 107, 61, 0.20) 1.4px, transparent 1.6px);
background-size: 20px 20px;
-webkit-mask-image: radial-gradient(ellipse 50% 45% at 10% 88%, #000 30%, transparent 78%);
mask-image: radial-gradient(ellipse 50% 45% at 10% 88%, #000 30%, transparent 78%);
}
.kontak-target {
position: absolute;
top: 6%;
right: 8%;
width: 110px;
height: 110px;
pointer-events: none;
}
.kontak-target span {
position: absolute;
inset: 0;
margin: auto;
border-radius: 9999px;
border: 1.5px solid rgba(212, 162, 76, 0.32);
}
.kontak-target span:nth-child(1) { width: 110px; height: 110px; animation: lokasiSpin 42s linear infinite reverse; }
.kontak-target span:nth-child(2) { width: 72px; height: 72px; border-color: rgba(200, 16, 46, 0.28); animation: lokasiSpin 30s linear infinite; }
.kontak-target span:nth-child(3) { width: 34px; height: 34px; border-color: rgba(200, 16, 46, 0.4); }
.kontak-comet {
position: absolute;
width: 60px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--merah));
pointer-events: none;
animation: lokasiCometFade 4.8s ease-in-out infinite;
}
.kontak-comet::after {
content: '';
position: absolute;
right: -2px; top: 50%;
width: 6px; height: 6px;
background: var(--merah);
border-radius: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px 2px rgba(200, 16, 46, 0.5);
}
.kontak-comet--1 { top: 14%; left: 6%; transform: rotate(35deg); }
.kontak-comet--2 {
bottom: 18%; left: 22%; transform: rotate(-120deg);
background: linear-gradient(90deg, transparent, var(--emas-tua));
animation-delay: 2s;
}
.kontak-comet--2::after { background: var(--emas-tua); box-shadow: 0 0 10px 2px rgba(139, 107, 61, 0.5); }
.kontak-ring-outline {
position: absolute;
border-radius: 9999px;
pointer-events: none;
}
.kontak-ring-outline--1 {
width: 36px; height: 36px;
top: 46%; left: 3%;
border: 2px solid rgba(212, 162, 76, 0.5);
animation: lokasiFloat 7.5s ease-in-out infinite;
}
.kontak-ring-outline--2 {
width: 16px; height: 16px;
top: 10%; left: 32%;
background: var(--merah);
opacity: 0.45;
animation: lokasiFloat 6s ease-in-out infinite .5s;
}
@media (prefers-reduced-motion: reduce) {
.kontak-target span, .kontak-comet, .kontak-ring-outline { animation: none !important; }
}
@media (max-width: 767px) {
.kontak-target { width: 78px; height: 78px; top: 3%; right: 4%; }
.kontak-target span:nth-child(1) { width: 78px; height: 78px; }
.kontak-target span:nth-child(2) { width: 52px; height: 52px; }
.kontak-target span:nth-child(3) { width: 26px; height: 26px; }
.kontak-comet { width: 40px; }
}
/* Field form — sedikit lebih ringkas (padding & radius) dari versi lama
supaya proporsional dengan kartu, tidak terasa terlalu besar/kosong. */
.kontak-input { font-size: 0.95rem; }
@media (max-width: 640px) {
.kontak-info-panel { padding: 1.25rem 1.4rem; }
}
@keyframes floatSlow {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-24px) translateX(14px); }
}
@keyframes driftSlow {
from { background-position: 0 0; }
to { background-position: 220px 220px; }
}
@keyframes blobMorph {
0% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; transform: rotate(0deg) scale(1); }
50% { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; transform: rotate(6deg) scale(1.05); }
100% { border-radius: 48% 52% 55% 45% / 40% 55% 45% 60%; transform: rotate(-4deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
#kontak::before, #kontak::after, #brand::before, #tentang::before, #layanan::before { animation: none; }
}
/* ==========================================================================
Tombol mengambang (WhatsApp + Back to Top) — muncul di semua halaman
publik, pojok kanan bawah, ditumpuk rapi dalam satu wrapper supaya
jaraknya konsisten dan tidak saling tindih di layar kecil.
========================================================================== */
.float-stack {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 60;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
@media (max-width: 767px) {
.float-stack { right: 14px; bottom: 14px; gap: 10px; }
}
/* Tombol dasar bersama (ukuran, bentuk, efek klik) dipakai oleh
.wa-float dan .back-to-top supaya keduanya selalu senada. */
.float-btn {
position: relative;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
flex-shrink: 0;
padding: 0;
margin: 0;
font: inherit;
-webkit-tap-highlight-color: transparent;
}
.float-btn:active { transform: scale(0.94); }
.float-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
.float-btn { width: 50px; height: 50px; }
}
.float-btn-icon {
width: 26px;
height: 26px;
position: relative;
z-index: 2;
display: inline-flex;
}
.float-btn-icon svg { width: 100%; height: 100%; display: block; }
@media (max-width: 767px) {
.float-btn-icon { width: 23px; height: 23px; }
}
.float-btn-tooltip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(6px);
background: #1A1108;
color: #fff;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 7px 14px;
border-radius: 10px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.float-btn:hover .float-btn-tooltip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
@media (max-width: 767px) {
.float-btn-tooltip { display: none; }
}
/* ---------- WhatsApp ---------- */
.wa-float {
background: linear-gradient(150deg, #2CE374 0%, #22C35E 55%, #1AA34E 100%);
box-shadow: 0 10px 26px rgba(29, 168, 85, 0.42), 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.wa-float:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(29, 168, 85, 0.5), 0 3px 8px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.wa-float .float-btn-icon { color: #fff; }
.wa-float-ring {
position: absolute;
inset: 0;
border-radius: 999px;
background: #25D366;
opacity: 0.5;
animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(1.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.wa-float-ring { animation: none; opacity: 0; }
}
/* ---------- Back to top ---------- */
.back-to-top {
background: linear-gradient(150deg, #D4A24C 0%, var(--merah) 100%);
box-shadow: 0 8px 20px rgba(200, 16, 46, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.25);
border: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(14px) scale(0.85);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.3s,
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.25s ease;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.back-to-top:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 26px rgba(200, 16, 46, 0.45), 0 3px 8px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.back-to-top .float-btn-icon { color: #fff; }
@media (prefers-reduced-motion: reduce) {
.back-to-top { transition: opacity 0.2s ease, visibility 0.2s; }
}
/* ==========================================================================
Section Testimoni — kartu ulasan pelanggan dengan rating bintang.
========================================================================== */
.testi-stars {
display: inline-flex;
gap: 2px;
color: #D4A24C;
}
.testi-card {
display: flex;
flex-direction: column;
height: 100%;
}
.testi-quote {
flex-grow: 1;
}
.testi-avatar {
width: 52px;
height: 52px;
border-radius: 999px;
object-fit: cover;
flex-shrink: 0;
}
.testi-avatar-fallback {
width: 52px;
height: 52px;
border-radius: 999px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
color: #fff;
background: linear-gradient(135deg, #C8102E, #D4A24C);
}
/* Kartu peta di section Kontak. */
.map-embed-wrap {
position: relative;
width: 100%;
padding-top: 62%;
border-radius: 1.5rem;
overflow: hidden;
}
.map-embed-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ==========================================================================
Section "Lokasi Kami" (#lokasi) — muncul di antara Testimoni dan FAQ.
Bahasa visual SENGAJA dibuat beda dari section lain: bukan blob organik
(#tentang), bukan kertas berlian (#kenapa), bukan confetti (#kontak) —
di sini pakai kombinasi bentuk geometris garis (outline) + solid tipis
ala landing page modern: kotak berputar, lingkaran dashed, segitiga,
heksagon, dan garis grid halus, melayang lambat di atas latar gelap
supaya peta Google Maps di tengah tetap jadi fokus utama.
========================================================================== */
#lokasi {
position: relative;
overflow: hidden;
}
.lokasi-bg {
/* Diganti dari gradasi gelap (wine/maroon-black) ke tema terang
krem-keemasan, senada dengan section #tentang, supaya seluruh
halaman konsisten satu bahasa warna (bukan lagi selang-seling
terang/gelap). */
background:
radial-gradient(120% 90% at 12% 0%, rgba(200, 16, 46, 0.10), transparent 55%),
radial-gradient(110% 90% at 100% 100%, rgba(212, 162, 76, 0.18), transparent 55%),
linear-gradient(135deg, #FDF9F2 0%, #FAF0DC 55%, #F3E6C8 100%);
}
/* Sambungan halus dari #galeri (terang) ke #lokasi (gelap) — pudar lembut
di 130px pertama supaya batasnya tidak terasa "terpotong" kasar. */
#lokasi::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 130px;
background: linear-gradient(to bottom, rgba(253, 246, 232, 0.85), rgba(253, 246, 232, 0));
pointer-events: none;
z-index: 1;
}
.lokasi-grid {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(233, 200, 138, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(233, 200, 138, 0.08) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 82%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 82%);
}
.lokasi-shape {
position: absolute;
pointer-events: none;
opacity: 0.85;
}
.lokasi-shape--sq1 {
top: 8%; left: 5%;
width: 90px; height: 90px;
border: 2.5px solid var(--emas-tua);
border-radius: 18px;
opacity: 0.35;
animation: lokasiSpin 26s linear infinite;
}
.lokasi-shape--sq2 {
bottom: 10%; left: 10%;
width: 46px; height: 46px;
background: var(--merah);
border-radius: 10px;
opacity: 0.16;
animation: lokasiFloat 9s ease-in-out infinite;
}
.lokasi-shape--circle1 {
top: 14%; right: 8%;
width: 130px; height: 130px;
border: 2px dashed var(--emas-tua);
border-radius: 50%;
opacity: 0.30;
animation: lokasiSpin 40s linear infinite reverse;
}
.lokasi-shape--circle2 {
bottom: 16%; right: 16%;
width: 26px; height: 26px;
background: var(--emas-tua);
border-radius: 50%;
opacity: 0.4;
animation: lokasiFloat 7s ease-in-out infinite .6s;
}
.lokasi-shape--tri {
top: 46%; left: 3%;
width: 0; height: 0;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
border-bottom: 44px solid var(--merah);
opacity: 0.18;
animation: lokasiFloat 11s ease-in-out infinite 1.2s;
}
.lokasi-shape--hex {
bottom: 6%; right: 4%;
width: 70px; height: 70px;
background: transparent;
border: 2px solid var(--merah);
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
opacity: 0.28;
animation: lokasiSpin 32s linear infinite;
}
/* Ornamen tambahan ala referensi "landing page abstract" — titik-titik
halus, lingkaran konsentris (target), garis diagonal "komet" dengan
ujung menyala, dan cincin tipis melayang — semua pakai warna brand
(merah/emas) supaya menyatu dengan tema terang section ini, bukan
sekadar ditempel dari desain aslinya yang gelap/neon. */
.lokasi-dots {
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(rgba(139, 107, 61, 0.22) 1.4px, transparent 1.6px);
background-size: 20px 20px;
-webkit-mask-image: radial-gradient(ellipse 55% 50% at 88% 12%, #000 30%, transparent 78%);
mask-image: radial-gradient(ellipse 55% 50% at 88% 12%, #000 30%, transparent 78%);
}
.lokasi-target {
position: absolute;
top: 5%;
left: 6%;
width: 130px;
height: 130px;
pointer-events: none;
}
.lokasi-target span {
position: absolute;
inset: 0;
margin: auto;
border-radius: 9999px;
border: 1.5px solid rgba(200, 16, 46, 0.22);
}
.lokasi-target span:nth-child(1) { width: 130px; height: 130px; animation: lokasiSpin 46s linear infinite; }
.lokasi-target span:nth-child(2) { width: 86px; height: 86px; border-color: rgba(212, 162, 76, 0.32); animation: lokasiSpin 34s linear infinite reverse; }
.lokasi-target span:nth-child(3) { width: 42px; height: 42px; border-color: rgba(200, 16, 46, 0.42); }
.lokasi-comet {
position: absolute;
width: 64px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--merah));
pointer-events: none;
animation: lokasiCometFade 4.5s ease-in-out infinite;
}
.lokasi-comet::after {
content: '';
position: absolute;
right: -2px; top: 50%;
width: 6px; height: 6px;
background: var(--merah);
border-radius: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px 2px rgba(200, 16, 46, 0.55);
}
.lokasi-comet--1 { top: 22%; left: 20%; transform: rotate(45deg); }
.lokasi-comet--2 {
top: 58%; right: 14%; transform: rotate(-135deg);
background: linear-gradient(90deg, transparent, var(--emas-tua));
animation-delay: 1.6s;
}
.lokasi-comet--2::after { background: var(--emas-tua); box-shadow: 0 0 10px 2px rgba(139, 107, 61, 0.5); }
@keyframes lokasiCometFade {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.95; }
}
.lokasi-ring-outline {
position: absolute;
border-radius: 9999px;
pointer-events: none;
}
.lokasi-ring-outline--1 {
width: 40px; height: 40px;
top: 42%; left: 44%;
border: 2px solid rgba(212, 162, 76, 0.55);
animation: lokasiFloat 8s ease-in-out infinite;
}
.lokasi-ring-outline--2 {
width: 18px; height: 18px;
bottom: 22%; left: 50%;
background: var(--merah);
opacity: 0.5;
animation: lokasiFloat 6.5s ease-in-out infinite .4s;
}
@media (prefers-reduced-motion: reduce) {
.lokasi-target span, .lokasi-comet, .lokasi-ring-outline { animation: none !important; }
}
@media (max-width: 767px) {
.lokasi-target { width: 90px; height: 90px; }
.lokasi-target span:nth-child(1) { width: 90px; height: 90px; }
.lokasi-target span:nth-child(2) { width: 60px; height: 60px; }
.lokasi-target span:nth-child(3) { width: 30px; height: 30px; }
.lokasi-comet { width: 42px; }
}
@keyframes lokasiSpin {
to { transform: rotate(360deg); }
}
@keyframes lokasiFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-16px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.lokasi-shape { animation: none !important; }
}
@media (max-width: 767px) {
.lokasi-shape--sq1 { width: 56px; height: 56px; }
.lokasi-shape--circle1 { width: 80px; height: 80px; }
.lokasi-shape--hex { width: 46px; height: 46px; }
}
/* Panel Lokasi: peta di kiri, kartu info di kanan, sejajar (bukan overlap)
supaya rapi di semua lebar layar — ganti dari layout lama yang bikin
kartu info melayang dengan margin negatif di atas peta. */
.lokasi-panel {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: stretch;
}
@media (min-width: 1024px) {
.lokasi-panel {
grid-template-columns: 1.65fr 1fr;
gap: 2rem;
}
}
.lokasi-map-card {
position: relative;
border-radius: 1.5rem;
overflow: hidden;
border: 1px solid rgba(200, 16, 46, 0.15);
box-shadow: 0 24px 48px -20px rgba(42, 27, 18, 0.28);
}
.lokasi-map-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
}
@media (min-width: 640px) {
.lokasi-map-wrap { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
.lokasi-map-wrap { aspect-ratio: auto; height: 100%; min-height: 420px; }
}
.lokasi-map-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Kartu info (alamat/jam/WA/CTA) — glassmorphism gelap, ditumpuk vertikal
dan jelas terpisah dari peta supaya tidak berantakan di layar sempit. */
.lokasi-info-card {
position: relative;
display: flex;
flex-direction: column;
gap: 1.5rem;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 1.5rem;
padding: 1.75rem;
box-shadow: 0 18px 40px -18px rgba(42, 27, 18, 0.35);
}
.lokasi-info-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.lokasi-info-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
min-width: 0;
}
.lokasi-info-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #C8102E, #D4A24C);
color: #fff;
}
.lokasi-info-icon svg { width: 1.15rem; height: 1.15rem; }
.lokasi-info-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--merah);
}
.lokasi-info-value {
font-size: 0.92rem;
color: #4A3826;
line-height: 1.45;
margin-top: 0.15rem;
word-break: break-word;
}
.lokasi-info-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-top: 1.5rem;
border-top: 1px dashed rgba(42, 27, 18, 0.14);
}
.lokasi-info-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.85rem 1.4rem;
font-weight: 700;
font-size: 0.85rem;
border-radius: 999px;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.lokasi-info-cta--wa {
background: linear-gradient(135deg, #25D366, #1DA851);
color: #fff;
box-shadow: 0 8px 18px -6px rgba(37, 211, 102, 0.55);
}
.lokasi-info-cta--wa:hover {
transform: translateY(-2px);
box-shadow: 0 12px 22px -6px rgba(37, 211, 102, 0.6);
}
.lokasi-info-cta--outline {
background: rgba(255, 255, 255, 0.7);
color: var(--ink);
border: 1px solid rgba(42, 27, 18, 0.15);
}
.lokasi-info-cta--outline:hover {
background: #fff;
border-color: rgba(200, 16, 46, 0.4);
color: var(--merah);
transform: translateY(-2px);
}
.lokasi-info-cta svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
/* ── Mobile menu icons & links ───────────────────────────── */
.mob-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #FDF9F2, #F3E6C8);
border-radius: 8px;
color: #6B4226;
padding: 6px;
transition: background 0.2s, color 0.2s;
}
.mob-link:hover .mob-icon,
.mob-link:focus .mob-icon {
background: linear-gradient(135deg, #C8102E, #D4A24C);
color: #ffffff;
}
/* ==========================================================================
Titik Lokasi — halaman detail QR (titik-lokasi.php) & daftar lokasi
(titik-lokasi-list.php). Palet & bahasa visual sama persis dengan
section lain (lihat --merah/--emas-tua/--emas-muda di atas).
========================================================================== */
/* Lebar & jarak section halaman detail dikunci lewat CSS tulisan tangan
(bukan utility Tailwind arbitrary seperti max-w-4xl/py-10/min-h-[70vh])
karena assets/tailwind.css adalah file hasil build statis — kelas yang
tidak ada di file itu saat build terakhir TIDAK IKUT TER-COMPILE dan
akhirnya tidak berefek sama sekali di browser (ini akar masalah lebar
konten yang melebar penuh & QR tampil raksasa sebelumnya). Dengan class
di sini, tampilannya selalu konsisten walau tailwind.css belum di-build
ulang. Lebar disamakan dengan halaman daftar lokasi (titik-lokasi-list.php,
max-w-5xl/1024px) supaya konsisten dengan lebar tema di halaman lain. */
.loc-detail-wrap { max-width: 80rem; margin-left: auto; margin-right: auto; }
.loc-detail-section { padding-top: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 768px) {
.loc-detail-section { padding-top: 3rem; padding-bottom: 4rem; }
}
/* Bingkai kartu QR — kartu polos senada tema situs (putih, border tipis
emas, shadow halus), sama seperti kartu lain di situs (faq-item, dll).
Tanpa glow/blob tambahan supaya latar tetap latar tema asli. */
.loc-qr-frame {
position: relative;
padding: 18px;
border-radius: 24px;
background: #ffffff;
border: 1px solid #EDE0CC;
box-shadow: 0 14px 30px -18px rgba(42, 27, 18, .28);
}
/* Ukuran tampil QR dikunci lewat CSS (bukan utility Tailwind arbitrary yang
tidak ikut ter-compile), supaya QR TIDAK tampil besar di halaman —
file yang diunduh (PNG/SVG) tetap resolusi penuh/asli, hanya besar saat
diunduh, bukan saat ditampilkan. */
.loc-qr-img-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #fff; width: 168px; height: 168px; }
.loc-qr-img-wrap img { display: block; width: 168px; height: 168px; }
@media (min-width: 640px) {
.loc-qr-img-wrap { width: 200px; height: 200px; }
.loc-qr-img-wrap img { width: 200px; height: 200px; }
}
.loc-qr-corner { position: absolute; width: 22px; height: 22px; border: 3px solid var(--merah); z-index: 2; opacity: .9; }
.loc-qr-corner--tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.loc-qr-corner--tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; border-color: var(--emas-tua); }
.loc-qr-corner--bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; border-color: var(--emas-tua); }
.loc-qr-corner--br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.loc-qr-scanline {
position: absolute;
left: 9%; right: 9%; height: 3px; top: 12%;
border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--merah), var(--emas-muda), transparent);
box-shadow: 0 0 12px 1px rgba(200, 16, 46, .55);
opacity: 0;
z-index: 2;
animation: locScan 3.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes locScan {
0% { top: 12%; opacity: 0; }
10% { opacity: .9; }
50% { top: 84%; opacity: .9; }
60% { opacity: 0; }
100% { top: 12%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.loc-qr-scanline { animation: none !important; opacity: 0; }
}
/* Badge "Pindai kamera HP" mengambang di atas kartu QR */
.loc-scan-badge {
display: inline-flex; align-items: center; gap: .4rem;
padding: .3rem .8rem; border-radius: 9999px;
background: rgba(255,255,255,.9); border: 1px solid rgba(212,162,76,.4);
color: var(--merah); font-size: .68rem; font-weight: 800; letter-spacing: .08em;
box-shadow: 0 8px 18px -10px rgba(42,27,18,.4);
}
.loc-scan-badge .dot {
width: 6px; height: 6px; border-radius: 9999px;
background: var(--merah);
margin-right: 4px;
/* Override animasi seismik — badge cukup pakai denyut sederhana */
animation: badge-pulse 2s infinite ease-in-out;
box-shadow: none;
}
.loc-scan-badge .dot::before,
.loc-scan-badge .dot::after { display: none; }
@keyframes badge-pulse {
0%, 100% { transform: scale(1); opacity: 0.65; }
50% { transform: scale(1.7); opacity: 1; }
}
/* ============================================================
Halaman detail /titik-lokasi/{slug} — v2 (rapi, tanpa geser samping,
tombol ikon SVG). Semua ukuran/huruf dikunci di sini (bukan utility
Tailwind yang bisa tidak ter-compile). Sistem font halaman ini:
judul = Righteous (font brand, satu bobot 400), semua lainnya =
Inter dengan bobot 500/600/700 saja supaya seragam.
============================================================ */
.loc-detail-section { font-family: 'Inter', system-ui, sans-serif; overflow-x: clip; }
.loc-detail-wrap { width: 100%; min-width: 0; box-sizing: border-box; }
.loc-detail-section .loc-ico { display: block; flex-shrink: 0; }
/* breadcrumb */
.loc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; margin-bottom: 1.25rem; font-size: .8125rem; line-height: 1.4; color: #8A7B66; }
.loc-crumbs a { display: inline-flex; align-items: center; gap: .4rem; color: #6B5B43; font-weight: 500; }
.loc-crumbs a:hover { color: var(--merah); }
.loc-crumbs a .loc-ico { color: var(--merah); }
.loc-crumbs .sep { color: #CDBFA8; }
.loc-crumbs .cur { color: var(--ink); font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
/* kartu utama */
.loc-main-card {
position: relative;
padding: 1.5rem 1.25rem;
border-radius: 28px;
border: 1px solid #EDE0CC;
background: linear-gradient(180deg, #FFFDF8 0%, #FFFFFF 60%);
box-shadow: 0 24px 50px -32px rgba(42, 27, 18, .35);
}
@media (min-width: 640px) { .loc-main-card { padding: 2rem 2rem; } }
@media (min-width: 900px) { .loc-main-card { padding: 2.5rem 2.75rem; } }
.loc-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 820px) {
.loc-detail-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2.5rem; }
.loc-qr-col { position: relative; }
.loc-qr-col::before { content: ''; position: absolute; left: -1.25rem; top: 6%; bottom: 6%; width: 0; border-left: 1px dashed #E5D6BC; }
}
.loc-info, .loc-qr-col { min-width: 0; }
/* judul & teks */
.loc-detail-section .tentang-eyebrow { margin-bottom: 1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.loc-title {
margin: 0 0 1rem;
font-size: clamp(1.65rem, 1.05rem + 2.4vw, 2.6rem);
font-weight: 400 !important; /* Righteous hanya punya 1 bobot — cegah bold palsu */
line-height: 1.15 !important;
letter-spacing: .2px;
color: var(--ink);
overflow-wrap: anywhere;
}
.loc-address { display: flex; align-items: flex-start; gap: .65rem; margin: 0 0 1rem; font-size: .9375rem; line-height: 1.6; font-weight: 500; color: #3A2A1C; overflow-wrap: anywhere; }
.loc-address-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 9999px; background: rgba(200, 16, 46, .08); color: var(--merah); margin-top: -1px; }
.loc-desc { margin: 0 0 1.5rem; font-size: .9375rem; line-height: 1.7; font-weight: 400; color: #6B5B43; white-space: pre-line; overflow-wrap: anywhere; }
.loc-address + .loc-cta, .loc-desc + .loc-cta { margin-top: 0; }
.loc-address:last-of-type { margin-bottom: 1.5rem; }
/* tombol utama */
.loc-cta {
display: inline-flex; align-items: center; gap: .65rem; max-width: 100%;
padding: .5rem .6rem .5rem .5rem; border-radius: 9999px;
background: linear-gradient(135deg, var(--merah) 0%, #B8452F 45%, #C9963F 100%);
color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.2; letter-spacing: .005em;
box-shadow: 0 16px 28px -14px rgba(200, 16, 46, .65);
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, filter .3s ease;
}
.loc-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 34px -14px rgba(200, 16, 46, .7); filter: saturate(1.08); color: #fff; }
.loc-cta:active { transform: scale(.97); }
.loc-cta-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; background: rgba(255, 255, 255, .2); flex-shrink: 0; }
.loc-cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9999px; background: #fff; color: var(--merah); margin-left: .25rem; flex-shrink: 0; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.loc-cta:hover .loc-cta-arrow { transform: translateX(3px); }
/* kontak & sosmed */
.loc-contact-block { margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px dashed #E5D6BC; }
.loc-caption-label { margin: 0 0 .9rem; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; color: #8A7B66; }
.loc-contact-row { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.loc-contact-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 9999px;
background: #fff; border: 1.5px solid #EDE0CC; color: #8A7B66;
box-shadow: 0 8px 18px -12px rgba(42, 27, 18, .4);
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.loc-contact-btn:hover { transform: translateY(-4px) scale(1.06); color: #fff; border-color: transparent; box-shadow: 0 16px 26px -12px rgba(0, 0, 0, .4); }
.loc-contact-btn:focus-visible, .loc-action-btn:focus-visible, .loc-cta:focus-visible, .loc-phone-pill:focus-visible { outline: 3px solid rgba(200, 16, 46, .35); outline-offset: 3px; }
.loc-contact-btn.tel { color: var(--merah); background: rgba(200, 16, 46, .07); border-color: rgba(200, 16, 46, .18); }
.loc-contact-btn.tel { color: var(--merah); background: rgba(200, 16, 46, .07); border-color: rgba(200, 16, 46, .18); }
.loc-contact-btn.wa { color: #1FAF54; background: rgba(37, 211, 102, .09); border-color: rgba(37, 211, 102, .28); }
.loc-contact-btn.ig { color: #dd2a7b; background: rgba(221, 42, 123, .07); border-color: rgba(221, 42, 123, .2); }
.loc-contact-btn.tt { color: #111; background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .14); }
.loc-contact-btn.fb { color: #1877F2; background: rgba(24, 119, 242, .07); border-color: rgba(24, 119, 242, .22); }
/* Hover: latar warna merek penuh + ikon PUTIH. Selektor sengaja lebih spesifik
(.loc-contact-btn.xx:hover) dan ditulis SETELAH warna dasar, jadi ikon tidak
lagi tertimpa warna merek yang sama dengan latarnya. */
.loc-contact-btn.tel:hover, .loc-contact-btn.wa:hover, .loc-contact-btn.ig:hover, .loc-contact-btn.tt:hover, .loc-contact-btn.fb:hover { color: #fff; border-color: transparent; }
.loc-contact-btn.tel:hover { background: linear-gradient(135deg, var(--merah), #B8452F 55%, var(--emas-tua)); }
.loc-contact-btn.wa:hover { background: #1FAF54; }
.loc-contact-btn.ig:hover { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.loc-contact-btn.tt:hover { background: #111; box-shadow: 0 16px 26px -12px rgba(0,0,0,.55), inset 0 0 0 1.5px #25F4EE; }
.loc-contact-btn.fb:hover { background: #1877F2; }
.loc-contact-btn:hover .loc-ico { color: #fff; fill: #fff; transform: scale(1.1); }
.loc-contact-btn .loc-ico { position: relative; z-index: 1; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
/* ikon garis (telepon) memakai stroke, bukan fill */
.loc-contact-btn.tel:hover .loc-ico { fill: none; stroke: #fff; }
/* label kecil saat hover */
.loc-contact-btn[data-tip]::after {
content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px);
padding: .3rem .65rem; border-radius: 8px; background: var(--ink); color: #fff;
font-size: .72rem; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0;
transition: opacity .2s ease, transform .2s ease;
}
.loc-contact-btn[data-tip]:hover::after, .loc-contact-btn[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .loc-contact-btn[data-tip]::after { display: none; } }
.loc-phone-pill {
display: inline-flex; align-items: center; gap: .5rem; height: 46px; max-width: 100%;
padding: 0 1.1rem 0 .95rem; border-radius: 9999px;
background: #fff; border: 1.5px solid #EDE0CC;
font-size: .875rem; font-weight: 600; color: #3A2A1C; font-variant-numeric: tabular-nums;
box-shadow: 0 8px 18px -12px rgba(42, 27, 18, .4);
transition: color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.loc-phone-pill .loc-ico { color: var(--merah); }
.loc-phone-pill:hover { color: var(--merah); border-color: var(--merah); transform: translateY(-2px); }
/* kolom QR */
.loc-qr-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.loc-qr-col .loc-scan-badge { margin-bottom: 1.1rem; }
.loc-hint-text { max-width: 260px; margin: 1rem 0 0; font-size: .78rem; line-height: 1.55; font-weight: 400; color: #8A7B66; }
/* tombol unduh / cetak / salin */
.loc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; width: 100%; max-width: 21rem; margin-top: 1.25rem; }
.loc-action-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .55rem 1rem; font-family: inherit; font-size: .84375rem; font-weight: 600; line-height: 1.2;
color: var(--ink); background: #fff; border: 1.5px solid #E5D6BC; border-radius: 9999px; cursor: pointer;
box-shadow: 0 6px 14px -10px rgba(42, 27, 18, .35);
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), border-color .25s ease, color .25s ease, background .25s ease, box-shadow .25s ease;
}
.loc-action-btn .loc-ico { color: var(--merah); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.loc-action-btn:hover { transform: translateY(-2px); border-color: var(--merah); color: var(--merah); background: rgba(200, 16, 46, .05); box-shadow: 0 12px 20px -12px rgba(200, 16, 46, .45); }
.loc-action-btn:hover .loc-ico { transform: scale(1.12); }
.loc-action-btn:active { transform: scale(.97); }
.loc-action-btn--lg { padding: .75rem 1.5rem; font-size: .9375rem; }
.loc-action-btn .loc-arrow { display: inline-flex; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.loc-action-btn:hover .loc-arrow { transform: translateX(-3px); }
.loc-back { margin-top: 2.25rem; text-align: center; }
/* toast salin link */
.loc-toast {
position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 16px);
padding: .65rem 1.1rem; border-radius: 9999px; background: var(--ink); color: #fff;
font-size: .84375rem; font-weight: 600; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5);
opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.loc-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
.loc-cta, .loc-contact-btn, .loc-action-btn, .loc-phone-pill, .loc-toast { transition: none !important; }
}
@media (max-width: 420px) {
.loc-cta { font-size: .875rem; }
}
/* ============================================================
Halaman daftar /titik-lokasi — form pencarian & kartu outlet.
Kartu dibuat vertikal & ringkas (QR kecil + nama + alamat +
footer CTA) supaya 4 kartu muat rapi sebaris di layar besar;
tinggi kartu seragam lewat grid stretch + flex-column, jadi
selalu 2 baris yang pas sebelum area scroll di bawahnya.
============================================================ */
/* ============================================================
Ornamen ambient section /titik-lokasi (list & detail) — div-nya
sudah ada di HTML sejak awal (loc-blob) tapi belum pernah punya
CSS sama sekali, jadi efeknya tidak pernah tampil. Dibuat senada
dengan bahasa visual section Tentang/Kenapa di homepage: blob
blur besar di pojok + cincin melayang tipis. Disembunyikan
animasinya kalau prefers-reduced-motion. */
.loc-blob {
position: absolute; border-radius: 9999px; filter: blur(90px);
pointer-events: none; z-index: 0;
}
.loc-blob--a { width: 380px; height: 380px; top: -120px; left: -120px; background: var(--emas-muda); opacity: .30; animation: kenapaWash 22s ease-in-out infinite alternate; }
.loc-blob--b { width: 340px; height: 340px; bottom: -130px; right: -100px; background: var(--merah); opacity: .13; animation: kenapaWash 26s ease-in-out infinite alternate-reverse; }
@media (max-width: 767px) {
.loc-blob--a { width: 220px; height: 220px; top: -70px; left: -70px; opacity: .22; }
.loc-blob--b { width: 200px; height: 200px; bottom: -80px; right: -60px; opacity: .10; }
}
@media (prefers-reduced-motion: reduce) { .loc-blob { animation: none !important; } }
.loc-ring {
position: absolute; border-radius: 9999px; border: 2px solid transparent;
pointer-events: none; z-index: 0;
}
.loc-ring--1 { width: 108px; height: 108px; top: 4%; right: 6%; border-color: rgba(212, 162, 76, .45); animation: tentangRingSpin 30s linear infinite; }
.loc-ring--2 { width: 56px; height: 56px; bottom: 8%; left: 3%; border-color: rgba(200, 16, 46, .35); border-width: 2.5px; animation: tentangRingSpin 36s linear infinite reverse; }
@media (max-width: 767px) {
.loc-ring--1 { width: 66px; height: 66px; top: 2%; right: 3%; }
.loc-ring--2 { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .loc-ring { animation: none !important; } }
/* Chip "X titik lokasi tersedia" — dijadikan pil dengan border lembut
transparan + latar kaca tipis, bukan teks polos menggantung. */
.loc-search-count {
display: inline-flex; align-items: center; gap: .35rem;
padding: .5rem 1.15rem;
border-radius: 9999px;
border: 1px solid rgba(212, 162, 76, .32);
background: rgba(255, 255, 255, .6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 8px 18px -14px rgba(42, 27, 18, .35);
font-size: .78rem; color: #8A8F9E;
}
.loc-search-count strong { color: #3A2A1C; font-weight: 700; }
/* --- Kartu outlet --- */
.loc-card {
position: relative; overflow: hidden;
display: flex; flex-direction: column;
}
.loc-card::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 40%, rgba(212, 162, 76, .10) 100%);
opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: 0;
}
.loc-card:hover::before { opacity: 1; }
/* Blob dekoratif halus di pojok kartu — versi mini dari tentang-card-blob
pada kartu "Asal Kami" di homepage, supaya kartu outlet terasa lebih
hidup/premium, bukan cuma kotak putih polos. Diklip oleh overflow:hidden
di atas jadi tidak pernah menutupi teks. */
.loc-card::after {
content: '';
position: absolute; top: -26px; left: -26px;
width: 76px; height: 76px; border-radius: 9999px;
background: var(--emas-muda);
filter: blur(20px);
opacity: .22;
pointer-events: none; z-index: 0;
transition: opacity .4s ease, transform .4s ease;
}
.loc-card:hover::after { opacity: .38; transform: scale(1.15); }
/* Aksen garis gradasi tipis di puncak kartu — motif sama seperti
tentang-card-topbar pada kartu "Asal Kami" di homepage, supaya
kartu outlet terasa lebih lengkap & berkarakter, bukan polos. */
.loc-card-topbar {
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--merah), var(--emas-muda), var(--emas-tua));
z-index: 2;
}
.loc-card-top { display: flex; align-items: center; gap: .65rem; margin-bottom: .7rem; position: relative; z-index: 1; }
.loc-card-qr {
position: relative; width: 42px; height: 42px; padding: 2px;
border-radius: 11px; overflow: hidden; flex-shrink: 0;
background: #fff; border: 1px solid #F3E6C8;
}
.loc-card-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.loc-card-name {
min-width: 0; font-weight: 600; color: #2A1B12;
font-size: .86rem; line-height: 1.24rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
transition: color .25s ease;
}
.loc-card:hover .loc-card-name { color: var(--merah); }
.loc-card-address {
position: relative; z-index: 1;
font-size: .73rem; line-height: 1.15rem; color: #8A8F9E;
min-height: 2.3rem; margin-bottom: .75rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.loc-card-footer {
position: relative; z-index: 1; margin-top: auto;
display: flex; align-items: center; justify-content: space-between;
padding-top: .65rem; border-top: 1px dashed #F0E4C8;
}
.loc-card-cta {
font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--emas-tua); transition: color .25s ease;
}
.loc-card:hover .loc-card-cta { color: var(--merah); }
.loc-card-arrow { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.loc-card:hover .loc-card-arrow { transform: translateX(5px); }
@media (min-width: 640px) {
.loc-card-name { font-size: .9rem; line-height: 1.3rem; }
.loc-card-address { font-size: .76rem; }
}
/* --- Area scroll grid kartu: tampilkan kira-kira 2 baris, sisanya
di-scroll (bukan halaman jadi memanjang tak berujung kalau outlet
sudah banyak). Scrollbar didandani tipis senada tema situs. --- */
.loc-grid-scroll {
max-height: 30rem;
overflow-y: auto;
padding: .3rem .6rem .3rem .1rem;
margin: 0 -.6rem 0 -.1rem;
scrollbar-width: thin;
scrollbar-color: var(--emas-tua) transparent;
}
.loc-grid-scroll::-webkit-scrollbar { width: 7px; }
.loc-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.loc-grid-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--emas-muda), var(--emas-tua));
border-radius: 9999px;
}
.loc-grid-scroll::-webkit-scrollbar-thumb:hover { background: var(--merah); }
/* --- Form pencarian: dibungkus jadi satu "panel" pil supaya ikon,
input, tombol hapus & tombol cari terasa satu kesatuan yang halus,
dengan micro-interaction lembut saat fokus. --- */
.loc-search-panel {
position: relative;
display: flex; align-items: center; gap: .2rem;
background: #fff;
border: 2px solid #EDE0CC;
border-radius: 9999px;
padding: .3rem .3rem .3rem 1.25rem;
box-shadow: 0 12px 30px -18px rgba(42, 27, 18, .28);
transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
}
.loc-search-panel:focus-within {
border-color: var(--merah);
box-shadow: 0 0 0 6px rgba(200, 16, 46, .10), 0 20px 40px -18px rgba(200, 16, 46, .30);
transform: translateY(-2px);
}
.loc-search-icon { color: #C8B48A; flex-shrink: 0; transition: color .3s ease; }
.loc-search-panel:focus-within .loc-search-icon { color: var(--merah); }
.loc-search-input {
border: 0; outline: 0; background: transparent;
flex: 1 1 auto; min-width: 0;
padding: .8rem .5rem; font-size: .95rem; color: #2A1B12;
transition: all .3s ease;
}
.loc-search-input::placeholder { color: #B3A88E; }
.loc-search-clear {
display: inline-flex; align-items: center; justify-content: center;
width: 2.1rem; height: 2.1rem; border-radius: 9999px; flex-shrink: 0;
color: #8A8F9E; transition: all .25s ease;
}
.loc-search-clear:hover { background: rgba(42, 27, 18, .06); color: var(--merah); }
.loc-search-submit {
display: inline-flex; align-items: center; justify-content: center;
width: 2.85rem; height: 2.85rem; border-radius: 9999px; flex-shrink: 0;
background: linear-gradient(135deg, var(--merah), var(--emas-tua));
color: #fff; box-shadow: 0 10px 22px -10px rgba(200, 16, 46, .55);
transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
}
.loc-search-submit:hover { transform: scale(1.07) rotate(-6deg); box-shadow: 0 16px 30px -12px rgba(200, 16, 46, .6); }
.loc-search-submit:active { transform: scale(.94); }
/* ==========================================================================
/titik-lokasi — daftar outlet versi kartu QR + pagination (locations.js)
Kartu memakai bahasa visual "Kenapa Pilih Kami": border krem, bilah
aksen di atas, lingkaran & titik dekoratif, badge nomor, warna aksen
bergantian (--accent / --accent2). Tampilan: grid 2 / 3 / 4 kolom.
========================================================================== */
.loc-hub[hidden], .loc-empty[hidden], .loc-pager[hidden], .loc-search-clear[hidden] { display: none !important; }
.loc-hub { position: relative; display: flex; align-items: center; gap: 1rem; }
.loc-viewport { flex: 1 1 auto; min-width: 0; }
.loc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .85rem;
padding: .5rem .15rem 1rem;
}
@media (min-width: 640px) { .loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; } }
@media (min-width: 1024px) { .loc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; } }
/* animasi ganti halaman */
.loc-grid.is-next > .loc-tile { animation: locInNext .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms); }
.loc-grid.is-prev > .loc-tile { animation: locInPrev .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms); }
.loc-grid.is-fade > .loc-tile { animation: locInFade .45s ease both; animation-delay: var(--d, 0ms); }
@keyframes locInNext { from { opacity: 0; transform: translateX(46px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes locInPrev { from { opacity: 0; transform: translateX(-46px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes locInFade { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .loc-grid > .loc-tile { animation: none !important; } }
/* kartu */
.loc-tile.kenapa-item { grid-column: auto; display: block; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.loc-tile:focus-visible { outline: none; }
.loc-tile:focus-visible .kenapa-card { box-shadow: 0 0 0 3px rgba(200, 16, 46, .35); }
.loc-tile-card {
display: flex; flex-direction: column; align-items: center;
padding: 1.35rem .9rem .95rem !important;
border-radius: 1.25rem;
}
.loc-tile-card::before { left: 1.1rem; right: 1.1rem; }
.loc-tile .kenapa-card-num { top: .65rem; right: .65rem; min-width: 1.7rem; height: 1.7rem; font-size: .66rem; }
.loc-tile-qr {
position: relative; z-index: 1;
width: 100%; max-width: 148px; aspect-ratio: 1 / 1;
padding: 12px; border-radius: 1.05rem; background: #fff;
border: 1.5px solid #F3E6C8;
border-color: color-mix(in srgb, var(--accent, var(--merah)) 26%, #F3E6C8);
box-shadow: 0 12px 22px -16px rgba(42, 27, 18, .35);
transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}
.loc-tile-qr img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.loc-tile:hover .loc-tile-qr { transform: scale(1.04) rotate(-1.5deg); box-shadow: 0 18px 30px -16px var(--accent, var(--merah)); }
.loc-tq-c { position: absolute; width: 15px; height: 15px; border: 2.5px solid var(--accent, var(--merah)); z-index: 2; pointer-events: none; }
.loc-tq-c--tl { top: 3px; left: 3px; border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
.loc-tq-c--tr { top: 3px; right: 3px; border-left: 0; border-bottom: 0; border-top-right-radius: 7px; border-color: var(--accent2, var(--emas-tua)); }
.loc-tq-c--bl { bottom: 3px; left: 3px; border-right: 0; border-top: 0; border-bottom-left-radius: 7px; border-color: var(--accent2, var(--emas-tua)); }
.loc-tq-c--br { bottom: 3px; right: 3px; border-left: 0; border-top: 0; border-bottom-right-radius: 7px; }
.loc-tile-foot {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
width: 100%; margin-top: .85rem; padding-top: .7rem;
min-height: calc(2.2rem + .7rem); /* tinggi baris sama di semua kartu = tinggi tombol panah */
border-top: 1px dashed #EBDDBB;
}
.loc-tile-name {
flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; text-align: left;
align-self: center; /* pusat teks = pusat tombol panah */
font-family: 'Barlow Semi Condensed', 'Inter', system-ui, sans-serif;
font-size: 1rem; font-weight: 600 !important; letter-spacing: .005em; color: #2A1B12;
line-height: 1.2 !important;
overflow: hidden; overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
transition: color .25s ease;
}
/* Desktop (kartu 4 kolom): nama outlet dipaksa SATU baris. Ukuran huruf mengikuti
lebar kartu (cqw) supaya nama terpanjang tetap muat; bila masih kepanjangan
dipotong dengan "…" agar tidak merusak layout. */
@media (min-width: 1024px) {
.loc-tile-foot { container-type: inline-size; }
.loc-tile .loc-tile-name {
display: block; white-space: nowrap; text-overflow: ellipsis;
font-size: clamp(.78rem, 6.8cqw, 1.02rem);
}
}
.loc-tile-name mark { background: color-mix(in srgb, var(--accent2, var(--emas-muda)) 32%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.loc-tile:hover .loc-tile-name { color: var(--accent, var(--merah)); }
.loc-tile-arrow {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem; border-radius: 9999px; color: #fff;
background: linear-gradient(135deg, var(--accent, var(--merah)), var(--accent2, var(--emas-tua)));
box-shadow: 0 8px 16px -8px var(--accent, var(--merah));
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.loc-tile:hover .loc-tile-arrow { transform: translateX(3px) scale(1.1); }
.loc-tile:active .loc-tile-arrow { transform: scale(.92); }
@media (min-width: 640px) {
.loc-tile-card { padding: 1.6rem 1.15rem 1.1rem !important; }
.loc-tile-name { font-size: 1.02rem; }
.loc-tile-arrow { width: 2.2rem; height: 2.2rem; }
}
@media (max-width: 380px) {
.loc-tile-card { padding: 1.2rem .7rem .8rem !important; }
.loc-tile-qr { padding: 9px; }
.loc-tile-name { font-size: .86rem; }
}
/* tombol panah samping (desktop) */
.loc-nav {
flex: 0 0 auto; display: none; align-items: center; justify-content: center;
width: 3.1rem; height: 3.1rem; border-radius: 9999px; color: #fff; border: 0; cursor: pointer;
background: linear-gradient(135deg, var(--merah), var(--emas-tua));
box-shadow: 0 14px 26px -12px rgba(200, 16, 46, .55);
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, opacity .3s ease, filter .3s ease;
}
@media (min-width: 1100px) { .loc-nav { display: inline-flex; } }
.loc-nav:hover:not(:disabled) { transform: scale(1.1); box-shadow: 0 18px 32px -12px rgba(200, 16, 46, .7); }
.loc-nav--prev:hover:not(:disabled) { transform: scale(1.1) translateX(-2px); }
.loc-nav--next:hover:not(:disabled) { transform: scale(1.1) translateX(2px); }
.loc-nav:active:not(:disabled) { transform: scale(.94); }
.loc-nav:disabled { opacity: .3; cursor: not-allowed; filter: grayscale(.6); box-shadow: none; }
.loc-nav:focus-visible, .loc-pg-btn:focus-visible { outline: 3px solid rgba(200, 16, 46, .4); outline-offset: 2px; }
.loc-hub.is-single .loc-nav { visibility: hidden; }
/* pager bawah — dock kaca, tombol kecil berwarna per angka, indikator meluncur */
@property --ir { syntax: ''; inherits: false; initial-value: 200; }
@property --ig { syntax: ''; inherits: false; initial-value: 16; }
@property --ib { syntax: ''; inherits: false; initial-value: 46; }
@property --jr { syntax: ''; inherits: false; initial-value: 232; }
@property --jg { syntax: ''; inherits: false; initial-value: 65; }
@property --jb { syntax: ''; inherits: false; initial-value: 106; }
.loc-pager { max-width: 34rem; margin: 1.5rem auto 0; padding: 0 .25rem; }
.loc-pager.is-all { margin-top: 2.25rem; }
.loc-pager-bar {
position: relative; height: 4px; border-radius: 9999px; margin: 0 auto 1.1rem; max-width: 24rem;
background: rgba(139, 107, 61, .16); overflow: visible;
}
.loc-pager-bar span {
position: relative; display: block; height: 100%; width: 0; border-radius: inherit;
background: linear-gradient(90deg, var(--merah), var(--emas-muda), var(--emas-tua));
transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
.loc-pager-bar span::after {
content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
border-radius: 50%; background: #fff; border: 2px solid var(--merah);
box-shadow: 0 0 0 4px rgba(200, 16, 46, .14), 0 4px 10px -2px rgba(200, 16, 46, .5);
animation: locKnob 2.4s ease-in-out infinite;
}
@keyframes locKnob { 0%, 100% { box-shadow: 0 0 0 3px rgba(200, 16, 46, .14), 0 4px 10px -2px rgba(200, 16, 46, .5); } 50% { box-shadow: 0 0 0 7px rgba(200, 16, 46, .05), 0 4px 10px -2px rgba(200, 16, 46, .5); } }
.loc-pager-dock {
display: flex; align-items: center; justify-content: center; gap: .3rem;
width: fit-content; max-width: 100%; margin: 0 auto; padding: .3rem;
border-radius: 9999px;
background: rgba(255, 255, 255, .8);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(235, 221, 187, .95);
box-shadow: 0 22px 44px -26px rgba(139, 107, 61, .6), 0 2px 0 rgba(255, 255, 255, .9) inset;
}
.loc-pg-nums { position: relative; display: flex; align-items: center; justify-content: center; gap: .28rem; }
/* indikator aktif: meluncur antar nomor, warnanya ikut nomor yang dipilih */
.loc-pg-ink {
position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 0; pointer-events: none;
border-radius: 9999px; opacity: 0; will-change: transform, width;
background: linear-gradient(135deg, rgb(var(--ir), var(--ig), var(--ib)), rgb(var(--jr), var(--jg), var(--jb)));
box-shadow:
0 10px 18px -8px rgba(var(--ir), var(--ig), var(--ib), .8),
0 0 0 3px rgba(var(--ir), var(--ig), var(--ib), .13),
inset 0 1px 0 rgba(255, 255, 255, .4);
transition:
transform .55s cubic-bezier(.34, 1.35, .5, 1), width .55s cubic-bezier(.34, 1.35, .5, 1), opacity .3s ease,
--ir .55s ease, --ig .55s ease, --ib .55s ease, --jr .55s ease, --jg .55s ease, --jb .55s ease;
}
.loc-pg-btn {
position: relative; z-index: 1; overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
min-width: 2.15rem; height: 2.15rem; padding: 0 .4rem; display: inline-flex; align-items: center; justify-content: center;
border-radius: 9999px; cursor: pointer; border: 0; background: transparent; box-shadow: none;
font-family: 'Righteous', sans-serif; font-size: .8rem; line-height: 1; color: #6B4226;
transition: color .3s ease, background-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
}
.loc-pg-btn:active:not(:disabled) { transform: scale(.9); }
.loc-pg-btn:focus-visible { outline: 3px solid rgba(200, 16, 46, .4); outline-offset: 2px; z-index: 2; }
.loc-pg-btn:disabled { opacity: .3; cursor: not-allowed; }
/* angka: tiap nomor punya warna sendiri (--rgb diisi locations.js) */
.loc-pg-num {
--rgb: 200, 16, 46;
color: rgb(var(--rgb));
color: color-mix(in srgb, rgb(var(--rgb)) 78%, #2A1B12);
background: linear-gradient(145deg, rgba(var(--rgb), .17), rgba(var(--rgb), .06));
box-shadow:
0 6px 12px -7px rgba(var(--rgb), .8),
inset 0 0 0 1px rgba(var(--rgb), .2),
inset 0 1px 0 rgba(255, 255, 255, .75);
}
.loc-pg-num:hover:not(:disabled):not(.is-active) {
transform: translateY(-2px) scale(1.07);
background: linear-gradient(145deg, rgba(var(--rgb), .28), rgba(var(--rgb), .1));
box-shadow:
0 11px 18px -8px rgba(var(--rgb), .9),
inset 0 0 0 1px rgba(var(--rgb), .36),
inset 0 1px 0 rgba(255, 255, 255, .8);
}
.loc-pg-btn.is-active {
color: #fff; cursor: default; background: transparent; box-shadow: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, .28); animation: locPop .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes locPop { 0% { transform: scale(.82); } 100% { transform: scale(1); } }
.loc-pg-gap { min-width: 1.6rem; padding: 0; color: #B3A88E; letter-spacing: .05em; background: transparent; }
.loc-pg-gap:hover:not(:disabled) { color: var(--merah); }
.loc-pg-btn--arrow {
flex: 0 0 auto; width: 2.15rem; padding: 0; color: var(--merah);
background: rgba(200, 16, 46, .07); box-shadow: inset 0 0 0 1px rgba(200, 16, 46, .15);
}
.loc-pg-btn--arrow svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.loc-pg-btn--arrow:hover:not(:disabled) {
color: #fff; background: linear-gradient(135deg, var(--merah), var(--emas-tua));
box-shadow: 0 10px 18px -8px rgba(200, 16, 46, .75);
}
.loc-pg-btn--prev:hover:not(:disabled) svg { transform: translateX(-2px); }
.loc-pg-btn--next:hover:not(:disabled) svg { transform: translateX(2px); }
.loc-pg-btn--arrow:disabled { background: transparent; box-shadow: none; }
/* riak sentuh */
.loc-rip {
position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
background: currentColor; opacity: .28; transform: scale(0);
animation: locRip .6s ease-out forwards;
}
@keyframes locRip { to { transform: scale(1); opacity: 0; } }
.loc-pager-info { text-align: center; margin-top: .9rem; font-size: .78rem; color: #8A7B66; letter-spacing: .01em; }
.loc-pager-info.is-tick { animation: locTick .45s ease both; }
@keyframes locTick { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* tombol "Lihat semua" / "Tampilkan per halaman" */
.loc-pager-extra { display: flex; justify-content: center; margin-top: .8rem; }
.loc-viewall {
display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem .3rem .3rem;
border: 0; border-radius: 9999px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
font-size: .78rem; font-weight: 600; line-height: 1; color: #6B4226; background: #fff;
box-shadow: 0 12px 22px -16px rgba(139, 107, 61, .8), inset 0 0 0 1.5px #EBDDBB;
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, color .25s ease, background .3s ease;
}
.loc-viewall-ico {
display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
color: #fff; background: linear-gradient(135deg, var(--merah), var(--emas-tua));
box-shadow: 0 7px 12px -6px rgba(200, 16, 46, .75);
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .3s ease;
}
.loc-viewall-ico svg { width: .85rem; height: .85rem; }
.loc-viewall .ico-rows { display: none; }
.loc-viewall[aria-pressed="true"] .ico-rows { display: block; }
.loc-viewall[aria-pressed="true"] .ico-grid { display: none; }
.loc-viewall-count {
min-width: 1.4rem; padding: .18rem .45rem; border-radius: 9999px; text-align: center;
font-size: .68rem; font-weight: 700; color: var(--merah); background: rgba(200, 16, 46, .09);
}
.loc-viewall[aria-pressed="true"] .loc-viewall-count { display: none; }
.loc-viewall:hover { transform: translateY(-2px); color: var(--merah); box-shadow: 0 16px 26px -14px rgba(200, 16, 46, .55), inset 0 0 0 1.5px rgba(200, 16, 46, .45); }
.loc-viewall:hover .loc-viewall-ico { transform: rotate(-10deg) scale(1.1); }
.loc-viewall:active { transform: scale(.96); }
.loc-viewall:focus-visible { outline: 3px solid rgba(200, 16, 46, .4); outline-offset: 3px; }
.loc-viewall[aria-pressed="true"] {
color: #fff; background: linear-gradient(135deg, var(--merah), var(--emas-tua)); padding-right: 1rem;
box-shadow: 0 14px 24px -12px rgba(200, 16, 46, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.loc-viewall[aria-pressed="true"] .loc-viewall-ico { background: rgba(255, 255, 255, .22); box-shadow: none; }
.loc-viewall[aria-pressed="true"]:hover { color: #fff; }
/* petunjuk geser (layar sentuh saja) */
.loc-pager-hint { display: none; text-align: center; margin-top: .55rem; font-size: .7rem; color: #B3A88E; transition: opacity .4s ease, max-height .4s ease; max-height: 2rem; }
.loc-pager-hint span { display: inline-block; color: var(--merah); animation: locNudge 1.6s ease-in-out infinite; }
.loc-pager-hint span:last-child { animation-direction: reverse; }
@keyframes locNudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
.loc-pager-hint.is-gone { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
@media (hover: none) and (pointer: coarse) { .loc-pager-hint { display: block; } }
/* mode "semua": dock, progress bar, dan petunjuk geser tidak dipakai */
.loc-pager.is-all .loc-pager-dock,
.loc-pager.is-all .loc-pager-bar,
.loc-pager.is-all .loc-pager-hint { display: none; }
/* layar sempit: dock dipusatkan (tidak tertutup tombol melayang di kanan bawah) */
@media (max-width: 520px) {
.loc-pager { margin-top: 1.25rem; padding: 0; }
.loc-pager-dock { gap: .25rem; padding: .28rem; }
.loc-pg-nums { gap: .22rem; }
.loc-pg-btn { min-width: 2rem; height: 2rem; font-size: .78rem; padding: 0 .3rem; }
.loc-pg-btn--arrow { width: 2rem; }
.loc-pg-gap { min-width: 1.35rem; }
}
@media (max-width: 360px) {
.loc-pg-btn { min-width: 1.85rem; height: 1.85rem; }
.loc-pg-btn--arrow { width: 1.85rem; }
}
@media (prefers-reduced-motion: reduce) {
.loc-pg-ink, .loc-pg-btn, .loc-pager-bar span, .loc-viewall, .loc-viewall-ico { transition: none !important; }
.loc-pg-btn.is-active, .loc-pager-info.is-tick, .loc-pager-hint span, .loc-pager-bar span::after { animation: none !important; }
}
/* kosong */
.loc-empty { text-align: center; padding: 2.5rem 1rem 1rem; }
.loc-empty-icon {
width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 9999px;
display: flex; align-items: center; justify-content: center; color: var(--merah);
background: rgba(200, 16, 46, .07); border: 1.5px dashed rgba(200, 16, 46, .35);
}
.loc-empty-title { font-weight: 700; color: #2A1B12; font-size: 1.05rem; }
.loc-empty-text { color: #6B5B43; font-size: .9rem; margin: .3rem 0 1.25rem; }
/* pencarian: tombol submit tidak wajib di layar sempit, tetap tampil */
.loc-search-input::-webkit-search-cancel-button { display: none; }
/* ==========================================================================
"BRAND KAMI" (beranda) — kartu berbingkai + pagination (assets/brand.js)
10 brand per halaman di semua layar: mobile 2 kolom x 5 baris, tablet &
desktop 5 kolom x 2 baris. Kartu TANPA isi/latar sendiri: hanya bingkai
(garis luar + garis putus-putus di dalamnya), sehingga ornamen latar
seksyen tetap tampak menembus. Logo dibuat besar, teks dibuat ringkas.
Baris terakhir yang tidak penuh dipusatkan. Pager = gaya .loc-pager*
dari halaman /titik-lokasi. Tanpa JS: semua kartu tampil biasa.
========================================================================== */
.brand-panel[hidden], .brand-pager[hidden], .brand-tile[hidden], .brand-pager .loc-viewall[hidden] { display: none !important; }
.brand-viewport { position: relative; }
.brand-grid {
--cols: 2; --gap: 10px; --logo: 96px;
display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
}
@media (min-width: 640px) { .brand-grid { --cols: 5; --gap: 12px; --logo: 84px; } }
@media (min-width: 900px) { .brand-grid { --gap: 16px; --logo: 100px; } }
@media (min-width: 1200px) { .brand-grid { --gap: 20px; --logo: 116px; } }
.brand-tile {
--a1: #C8102E; --a2: #E8416A;
position: relative; isolation: isolate;
box-sizing: border-box; min-width: 0;
flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 14px 8px 12px; border-radius: 22px; text-decoration: none; color: inherit; cursor: pointer;
background: transparent;
border: 1.5px solid rgba(139, 107, 61, .42);
-webkit-tap-highlight-color: transparent;
transition: transform .45s cubic-bezier(.34, 1.4, .5, 1), border-color .3s ease, background-color .35s ease, box-shadow .4s ease;
}
.brand-tile:nth-child(6n+1) { --a1: #C8102E; --a2: #E8416A; }
.brand-tile:nth-child(6n+2) { --a1: #2E7D32; --a2: #7CB342; }
.brand-tile:nth-child(6n+3) { --a1: #B8862B; --a2: #F0C572; }
.brand-tile:nth-child(6n+4) { --a1: #1565C0; --a2: #4FA8E8; }
.brand-tile:nth-child(6n+5) { --a1: #6B4226; --a2: #C8794A; }
.brand-tile:nth-child(6n+6) { --a1: #E65100; --a2: #FF9A3C; }
/* garis putus-putus tipis di dalam bingkai (kesan label/stempel) */
.brand-tile::after {
content: ''; position: absolute; inset: 5px; z-index: -1; pointer-events: none;
border-radius: 17px; border: 1px dashed rgba(139, 107, 61, .30);
transition: border-color .3s ease;
}
/* penanda warna kecil yang duduk di atas garis bingkai */
.brand-tile::before {
content: ''; position: absolute; left: 50%; top: -2px; height: 3.5px; width: 30%;
transform: translateX(-50%); border-radius: 0 0 6px 6px;
background: linear-gradient(90deg, var(--a1), var(--a2));
transition: width .5s cubic-bezier(.16, 1, .3, 1);
}
.brand-tile-glow, .brand-tile-spot, .brand-tile-ring { display: none; }
/* logo: besar, mengisi lebar kartu, tanpa kotak pembungkus tebal */
.brand-tile-logo {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: var(--logo); max-width: 100%; aspect-ratio: 1 / 1; margin-bottom: 8px;
border-radius: 24%; overflow: hidden; padding: 5px;
background: rgba(255, 251, 243, .78);
box-shadow: 0 10px 18px -12px rgba(42, 27, 18, .55), inset 0 0 0 1px rgba(255, 255, 255, .8);
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
}
.brand-tile-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-tile-name {
font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
line-height: 1.25; color: #1E1208; margin: 0; width: 100%;
min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
align-content: center; transition: color .3s ease;
}
.brand-tile-area {
display: inline-flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%;
margin: 4px 0 0; font-family: 'Inter', system-ui, sans-serif; font-size: 10.5px; font-weight: 500;
line-height: 1.2; color: #7A6248;
}
.brand-tile-area svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--a1); }
.brand-tile-area span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (min-width: 900px) { .brand-tile-name { font-size: 13.5px; } .brand-tile-area { font-size: 11px; } }
/* panah kecil di pojok */
.brand-tile-go {
position: absolute; right: 9px; top: 9px; width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; color: #fff;
background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 8px 14px -6px var(--a1);
opacity: 0; transform: translateY(6px) scale(.6);
transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.brand-tile-go svg { width: 12px; height: 12px; }
@media (hover: hover) {
.brand-tile:hover, .brand-tile:focus-visible {
transform: translateY(-6px);
background-color: rgba(255, 255, 255, .5);
border-color: var(--a1);
box-shadow: 0 22px 34px -22px color-mix(in srgb, var(--a1) 75%, #2A1B12);
}
.brand-tile:hover::after { border-color: color-mix(in srgb, var(--a1) 45%, transparent); }
.brand-tile:hover::before, .brand-tile:focus-visible::before { width: 56%; }
.brand-tile:hover .brand-tile-logo { transform: scale(1.07) rotate(-3deg); box-shadow: 0 16px 24px -12px var(--a1), inset 0 0 0 1px rgba(255, 255, 255, .8); }
.brand-tile:hover .brand-tile-name { color: var(--a1); }
.brand-tile:hover .brand-tile-go { opacity: 1; transform: none; }
}
.brand-tile:active { transform: scale(.965); transition-duration: .15s; }
/* ---- Logo brand: bulat, cincin warna berputar pelan, muncul membal ---- */
.brand-tile-logo {
position: relative; overflow: visible; padding: 0; border-radius: 50%;
background: none; box-shadow: none;
transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.brand-tile-logo img {
position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
background: rgba(255, 251, 243, .96);
box-shadow: 0 0 0 3px rgba(255, 251, 243, .95), 0 12px 20px -10px rgba(42, 27, 18, .6);
transition: box-shadow .4s ease, filter .4s ease;
}
.brand-tile-logo.is-ph img { object-fit: contain; padding: 9px; }
/* cincin gradasi (warna aksen kartu) yang berputar */
.brand-tile-logo::before {
content: ''; position: absolute; inset: -6px; z-index: 0; border-radius: 50%; pointer-events: none;
background: conic-gradient(from 0deg, var(--a1), var(--a2), color-mix(in srgb, var(--a1) 8%, transparent) 58%, var(--a1));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
opacity: .85; animation: brandRing 7s linear infinite;
transition: opacity .35s ease, inset .45s cubic-bezier(.34, 1.56, .64, 1);
}
/* kilau kecil yang berkeliling di cincin */
.brand-tile-logo::after {
content: ''; position: absolute; z-index: 2; left: 50%; top: -8px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
background: #fff; box-shadow: 0 0 8px 2px var(--a2);
transform-origin: 50% calc(var(--logo) / 2 + 8px);
animation: brandRing 7s linear infinite; pointer-events: none;
}
@keyframes brandRing { to { transform: rotate(360deg); } }
@keyframes brandLogoPop {
0% { opacity: 0; transform: scale(.55) rotate(-24deg); }
60% { opacity: 1; }
100% { opacity: 1; transform: none; }
}
.brand-grid.is-fade .brand-tile-logo,
.brand-grid.is-next .brand-tile-logo,
.brand-grid.is-prev .brand-tile-logo {
animation: brandLogoPop .8s cubic-bezier(.34, 1.56, .64, 1) backwards;
animation-delay: calc(var(--d, 0ms) + 170ms);
}
@media (hover: hover) {
.brand-tile:hover .brand-tile-logo, .brand-tile:focus-visible .brand-tile-logo { transform: scale(1.08); box-shadow: none; }
.brand-tile:hover .brand-tile-logo::before, .brand-tile:focus-visible .brand-tile-logo::before { opacity: 1; inset: -8px; }
.brand-tile:hover .brand-tile-logo img, .brand-tile:focus-visible .brand-tile-logo img { box-shadow: 0 0 0 3px #fff, 0 18px 26px -12px var(--a1); filter: saturate(1.08); }
}
.brand-tile:focus-visible { outline: 3px solid rgba(200, 16, 46, .4); outline-offset: 3px; }
@media (hover: none) {
.brand-tile-go { opacity: .9; transform: none; width: 20px; height: 20px; right: 7px; top: 7px; box-shadow: none; }
.brand-tile-go svg { width: 10px; height: 10px; }
}
/* animasi masuk. Tanpa JS kartu langsung tampil; dengan JS, kartu
disembunyikan sampai panel terlihat di layar atau halaman berganti. */
.brand-js .brand-grid:not(.is-live) .brand-tile { opacity: 0; }
.brand-grid.is-fade .brand-tile,
.brand-grid.is-next .brand-tile,
.brand-grid.is-prev .brand-tile {
animation: brandIn .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms);
}
.brand-grid.is-next .brand-tile { --fx: 34px; }
.brand-grid.is-prev .brand-tile { --fx: -34px; }
.brand-grid.is-fade .brand-tile { --fx: 0px; }
@keyframes brandIn {
0% { opacity: 0; transform: translate(var(--fx, 0), 26px) scale(.92); }
100% { opacity: 1; transform: none; }
}
.brand-pager { margin-top: 1.75rem; }
@media (min-width: 768px) { .brand-pager { margin-top: 2.25rem; } }
@media (prefers-reduced-motion: reduce) {
.brand-js .brand-grid:not(.is-live) .brand-tile { opacity: 1; }
.brand-tile, .brand-tile *, .brand-grid .brand-tile { animation: none !important; transition: none !important; }
.brand-tile-logo, .brand-tile-logo::before, .brand-tile-logo::after { animation: none !important; transition: none !important; }
.brand-tile-logo::after { display: none; }
}
/* ==========================================================================
GALERI (beranda) — grid foto + pagination (assets/galeri.js)
10 foto per halaman: desktop 5x2, mobile 2x5. Pager memakai gaya
.loc-pager* yang sama dengan "Brand Kami" & /titik-lokasi. Tanpa JS:
semua foto tampil biasa.
========================================================================== */
.gal-panel { position: relative; z-index: 1; }
.gal-panel[hidden], .gal-pager[hidden], .gal-item[hidden], .gal-pager .loc-viewall[hidden] { display: none !important; }
.gal-viewport { position: relative; }
.gal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .gal-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 900px) { .gal-grid { gap: 16px; } }
.gal-pager { margin-top: 2rem; }
@media (min-width: 768px) { .gal-pager { margin-top: 2.75rem; } }
.gal-pager .loc-pager-info { color: #6B5B43; }
.gal-js .gal-grid:not(.is-live) .gal-item { opacity: 0; }
.gal-grid.is-fade .gal-item,
.gal-grid.is-next .gal-item,
.gal-grid.is-prev .gal-item {
animation: galIn .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms);
}
.gal-grid.is-next .gal-item { --fx: 34px; }
.gal-grid.is-prev .gal-item { --fx: -34px; }
.gal-grid.is-fade .gal-item { --fx: 0px; }
@keyframes galIn {
0% { opacity: 0; transform: translate(var(--fx, 0), 26px) scale(.94); }
100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.gal-js .gal-grid:not(.is-live) .gal-item { opacity: 1; }
.gal-grid .gal-item { animation: none !important; }
}
/* ===== Slot iklan (dikelola dari Admin -> Iklan) =====
Kartu kosong tidak mencetak apa pun, jadi aturan ini hanya berlaku saat ada iklan.
Pembungkus polos supaya iklan pihak ketiga tidak bentrok dengan warna section di sekitarnya. */
.ad-slot { position: relative; clear: both; padding: 20px 16px 24px; text-align: center; background: #fff; border-block: 1px solid rgba(139, 107, 61, .12); overflow-x: clip; }
.ad-slot::before { content: "Iklan"; display: block; margin-bottom: 8px; font: 500 11px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; color: rgba(107, 91, 67, .65); }
.ad-slot__inner { max-width: 970px; margin-inline: auto; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-slot--top { background: #FDF9F2; }
.ad-slot--brand { max-width: 64rem; margin: 3rem auto 0; padding-inline: 1rem; background: transparent; border-block: 0; }
.ad-slot--lokasi-list { margin: 0 0 2rem; padding: 0; background: transparent; border-block: 0; }
.ad-slot--lokasi-detail { margin: 1.75rem 0 0; padding: 0; background: transparent; border-block: 0; }
@media print { .ad-slot { display: none !important; } }
/* ===== Lightbox galeri: foto selebar aslinya (area kosong di sekitarnya = area tutup), tombol tutup selalu terlihat ===== */
html.lb-open, html.lb-open body { overflow: hidden; }
#lightbox { cursor: zoom-out; padding: 56px 0 24px; overflow-y: auto; }
#lightbox > div { margin: auto; }
#lightbox-image { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 150px); margin: 0 auto; cursor: default; }
#lightbox-caption { cursor: default; width: fit-content; margin-left: auto; margin-right: auto; }
#lightbox > div > button[aria-label="Tutup"] { position: fixed; top: 14px; right: 14px; left: auto; width: 44px; height: 44px; border-radius: 9999px; background: rgba(255,255,255,.12); cursor: pointer; }
#lightbox > div > button[aria-label="Tutup"]:hover { background: rgba(255,255,255,.28); }
#lightbox > div > button[aria-label="Tutup"] svg { width: 22px; height: 22px; }
/* ===== Kontak di HP: semua kolom & kartu dipaksa simetris di tengah (tidak ada yang melebihi lebar layar) ===== */
#kontak .max-w-7xl > .grid > * { min-width: 0; }
#kontak .max-w-7xl { width: 100%; box-sizing: border-box; }
.kontak-info-item > div:not(.kontak-info-icon) { min-width: 0; overflow-wrap: anywhere; }
#kontak .cf-turnstile { max-width: 100%; }
@media (max-width: 480px) {
#kontak > .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
#kontak .kontak-info-item { gap: 0.9rem; }
#kontak .kontak-info-panel { padding: 1.1rem 1.1rem; }
#kontak .reveal.bg-white.rounded-3xl { padding: 1.25rem; }
#kontak .cf-turnstile { display: flex; justify-content: center; transform-origin: top center; }
}
/* Widget Turnstile lebarnya tetap 300px: di HP sempit diperkecil sedikit (bukan dipotong) supaya muat di dalam kartu. */
@media (max-width: 380px) { #kontak .cf-turnstile { zoom: 0.93; } }
@media (max-width: 340px) { #kontak .cf-turnstile { zoom: 0.8; } }