/* =========================================================
WONDERFUL WEST PAPUA — TEMA NAVY + TEAL
Redesign menyeluruh dari tema hijau sebelumnya.
Struktur class TIDAK berubah (kompatibel dengan blade lama),
hanya palet warna, tipografi, dan beberapa aksen signature
yang diperbarui: aksen emas "bulu cendrawasih" pada label
& pembatas section, sebagai identitas visual baru.
Cara pakai: tambahkan di layout utama, di ATAS
pemanggilan file CSS lama (atau ganti sepenuhnya):
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: 'Inter', Arial, Helvetica, sans-serif;
color: #16232c;
line-height: 1.6;
background-color: #f7f4ec;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page-main {
flex: 1 0 auto;
}
.footer-tasik {
flex-shrink: 0;
}
h1, h2, h3 {
font-family: 'Poppins', 'Inter', Arial, sans-serif;
font-weight: 700;
letter-spacing: -0.01em;
}
/* Wordmark logo: "wonderful" tipis miring, "west papua" tebal — meniru gaya mockup */
.brand-text-wrap {
line-height: 1.05;
}
.brand-sub {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 13px;
color: var(--teal-muda);
}
.brand-title {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: 19px;
color: var(--putih-cerah);
margin-top: -2px;
}
/* =========================================================
PALET WARNA — NAVY GELAP + TEAL, AKSEN EMAS
========================================================= */
:root {
--navy-tua: #071c2e;
--navy-utama: #0e3450;
--navy-lembut: #17547d;
--teal-utama: #17a398;
--teal-muda: #6fe3d4;
--teal-sangat-muda: #e1f7f3;
--teal-transparan: rgba(23, 163, 152, 0.18);
--navy-transparan: rgba(14, 52, 80, 0.22);
--navy-transparan-kuat: rgba(7, 28, 46, 0.72);
--emas-aksen: #d8ae5d;
--putih-cerah: #ffffff;
--putih-lembut: #f7f4ec;
}
/* ===== NAVBAR DASAR (kaca navy transparan, mengambang) ===== */
.navbar-tasik {
background: transparent;
backdrop-filter: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
padding-top: 12px;
padding-bottom: 12px;
animation: turunNavbar 0.5s ease forwards;
transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.navbar-tasik.scrolled {
background: linear-gradient(120deg, var(--navy-utama) 0%, var(--navy-tua) 100%);
backdrop-filter: blur(10px);
padding-top: 6px;
padding-bottom: 6px;
box-shadow: 0 4px 16px rgba(7, 28, 46, 0.35);
}
.navbar-tasik .dropdown-menu {
z-index: 1060;
}
@keyframes turunNavbar {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
/* Halaman tanpa hero (form admin: kategori, atraksi, destinasi create/edit, dsb)
butuh jarak dari navbar yang fixed, karena tidak ada hero foto yang otomatis
kasih ruang di atas */
body.no-hero-page {
padding-top: 78px;
}
@media (max-width: 991px) {
body.no-hero-page {
padding-top: 66px;
}
}
/* ===== LOGO BULAT ESTETIK ===== */
.logo-ring {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
margin-right: 10px;
background: linear-gradient(135deg, var(--emas-aksen), var(--teal-muda));
padding: 2px;
box-shadow: 0 2px 8px rgba(7, 28, 46, 0.45);
transition: transform 0.35s ease, box-shadow 0.35s ease;
position: relative;
}
.brand-logo {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid var(--putih-cerah);
display: block;
}
.navbar-brand:hover .logo-ring {
transform: scale(1.08) rotate(8deg);
box-shadow: 0 4px 14px rgba(216, 174, 93, 0.5);
}
.logo-ring::before {
content: "";
position: absolute;
width: 42px;
height: 42px;
border-radius: 50%;
border: 2px solid rgba(216, 174, 93, 0.7);
animation: denyutLogo 2.4s ease-out infinite;
}
@keyframes denyutLogo {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.4); opacity: 0; }
}
.navbar-decor svg {
width: 100%;
height: 40px;
display: block;
}
/* ===== MENU / NAV-LINK ===== */
.navbar-nav .nav-link {
position: relative;
color: var(--teal-sangat-muda);
font-weight: 500;
transition: color 0.25s ease;
}
.navbar-brand {
color: var(--putih-cerah) !important;
}
.navbar-nav .nav-link::after {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 0%;
height: 2px;
background-color: var(--emas-aksen);
transition: width 0.25s ease, left 0.25s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--putih-cerah) !important;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
width: 60%;
left: 20%;
}
/* ===== NAVBAR MOBILE — dropdown menu solid, gak transparan/numpuk hero ===== */
@media (max-width: 991px) {
.navbar-collapse.show,
.navbar-collapse.collapsing {
background: linear-gradient(120deg, var(--navy-utama) 0%, var(--navy-tua) 100%);
margin-top: 12px;
padding: 16px 20px;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(7, 28, 46, 0.4);
}
.navbar-nav .nav-link {
padding: 10px 6px;
}
}
@media (max-width: 768px) {
.navbar-tasik {
animation: none;
}
}
/* Tombol ikon menu (☰) di ujung kanan navbar, tampil di semua ukuran layar */
.navbar-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 0;
border: none;
background: transparent;
color: var(--putih-cerah);
font-size: 22px;
transition: opacity 0.2s ease;
}
.navbar-menu-toggle:hover {
opacity: 0.75;
}
.brand-logo-full {
height: 62px;
width: auto;
display: block;
transition: transform 0.3s ease, opacity 0.25s ease;
}
.footer-logo {
height: 48px;
width: auto;
display: block;
}
.navbar-brand:hover .brand-logo-full {
transform: scale(1.04);
opacity: 0.92;
}
@media (max-width: 576px) {
.brand-logo-full {
height: 46px;
}
}
/* ===== HERO / FOTO UTAMA ===== */
.hero-tasik-foto {
position: relative;
min-height: 500px;
padding: 60px 20px;
overflow: hidden;
background-image: url('/Images/papua 6.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
animation: zoomBackground 20s ease-in-out infinite alternate;
}
@keyframes zoomBackground {
from { background-size: 100%; }
to { background-size: 115%; }
}
/* Lapisan navy transparan di atas foto: kesan malam tropis & laut dalam */
.hero-tasik-foto .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,52,80,0.4) 0%, rgba(7,28,46,0.82) 100%);
z-index: 1;
}
.hero-content {
padding-top: 90px;
opacity: 0;
transform: translateY(25px);
animation: munculTeks 1s ease forwards;
animation-delay: 0.3s;
}
@media (max-width: 991px) {
.hero-content {
padding-top: 78px;
}
}
@keyframes munculTeks {
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-tasik-foto h1,
.hero-tasik-foto p {
text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
/* (garis aksen bawah judul hero sudah dihapus, tidak dipakai lagi) */
.scroll-indicator {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 26px;
height: 40px;
border: 2px solid rgba(255,255,255,0.7);
border-radius: 14px;
}
.scroll-indicator span {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 8px;
background-color: var(--emas-aksen);
border-radius: 3px;
animation: turunNaik 1.6s ease-in-out infinite;
}
@keyframes turunNaik {
0% { top: 6px; opacity: 1; }
70% { top: 18px; opacity: 0.3; }
100% { top: 6px; opacity: 0; }
}
@media (max-width: 768px) {
.hero-tasik-foto {
background-attachment: scroll;
min-height: 400px;
animation: none;
}
.scroll-indicator {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-tasik-foto,
.navbar-tasik,
.hero-content,
.tentang-content,
.kontak-content,
.kartu,
.footer-col,
.logo-ring::before,
.scroll-indicator span {
animation: none !important;
}
}
/* ===== SECTION TENTANG ===== */
.tentang {
padding: 70px 40px;
background: linear-gradient(180deg, var(--putih-lembut) 0%, var(--teal-sangat-muda) 100%);
}
.tentang-content {
max-width: 1000px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
animation: munculTentang 0.7s ease forwards;
}
@keyframes munculTentang {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Label section — aksen garis emas kecil sebelum teks, menggantikan gaya polos */
.tentang-label,
.destinasi-label,
.kontak-label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--teal-utama);
font-weight: 600;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 8px;
}
.tentang-label::before,
.destinasi-label::before,
.kontak-label::before {
content: "";
display: inline-block;
width: 18px;
height: 2px;
background: var(--emas-aksen);
border-radius: 2px;
}
.tentang h2 {
font-size: 30px;
margin-bottom: 16px;
color: var(--navy-tua);
}
.tentang-intro {
color: #4a6572;
max-width: 600px;
font-size: 16px;
}
/* ===== BINGKAI FOTO MODERN (foto section Tentang) ===== */
.tentang-gambar {
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 14px;
box-shadow:
0 0 0 4px rgba(255,255,255,0.9),
0 0 0 8px var(--teal-transparan),
0 14px 30px rgba(7, 28, 46, 0.3);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tentang-gambar:hover {
transform: scale(1.015);
box-shadow:
0 0 0 4px rgba(255,255,255,0.9),
0 0 0 8px rgba(23,163,152,0.35),
0 18px 36px rgba(7, 28, 46, 0.4);
}
.tentang h3 {
color: var(--navy-tua);
font-size: 22px;
}
.tentang-text {
color: #33475a;
line-height: 1.7;
font-size: 15px;
}
/* ===== KARTU STATISTIK (kaca navy transparan) ===== */
.tentang-stat {
padding: 20px 10px;
background: rgba(255,255,255,0.6);
backdrop-filter: blur(6px);
border: 1px solid var(--teal-transparan);
border-radius: 10px;
box-shadow: 0 4px 12px rgba(7, 28, 46, 0.12);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tentang-stat:hover {
transform: translateY(-6px);
box-shadow: 0 10px 20px rgba(7, 28, 46, 0.22);
}
.tentang-stat h3 {
color: var(--teal-utama);
font-size: 30px;
font-weight: 700;
margin-bottom: 4px;
}
.tentang-stat p {
color: #4a6572;
font-size: 13px;
margin-bottom: 0;
}
/* ===== KARTU VISI & MISI ===== */
.tentang-card {
background: rgba(255,255,255,0.7);
backdrop-filter: blur(6px);
border-left: 4px solid var(--emas-aksen);
border-radius: 8px;
padding: 24px;
height: 100%;
box-shadow: 0 4px 12px rgba(7, 28, 46, 0.1);
transition: transform 0.3s ease;
}
.tentang-card:hover {
transform: translateY(-4px);
}
.tentang-card h4 {
color: var(--navy-tua);
margin-bottom: 10px;
}
.tentang-card p {
color: #33475a;
font-size: 15px;
line-height: 1.6;
}
/* ===== SECTION DESTINASI ===== */
.destinasi {
background: linear-gradient(180deg, var(--putih-cerah) 0%, var(--teal-sangat-muda) 100%);
padding: 60px 40px;
}
.destinasi h2 {
text-align: center;
font-size: 30px;
margin-bottom: 40px;
color: var(--navy-tua);
}
.destinasi-section {
position: relative;
overflow: hidden;
}
.destinasi-bg {
position: absolute;
inset: 0;
background-image: url('/images/Pulau Triton.jpg');
background-size: cover;
background-position: center;
z-index: 0;
}
/* Lapisan navy gelap, biar judul & kartu tetap kebaca di atas foto */
.destinasi-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,52,80,0.55) 0%, var(--navy-transparan-kuat) 100%);
}
.destinasi-subtitle {
color: #4a6572;
font-size: 15px;
}
/* ===== KARTU DESTINASI ===== */
.kartu-container {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.kartu {
background: rgba(255,255,255,0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 14px;
width: 280px;
padding: 20px;
text-align: center;
box-shadow: 0 8px 24px rgba(7, 28, 46, 0.22);
opacity: 0;
transform: translateY(30px);
animation: munculKartu 0.8s ease forwards;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kartu p {
text-align: justify;
}
.kartu:nth-child(2) { animation-delay: 0.2s; }
.kartu:nth-child(3) { animation-delay: 0.4s; }
.kartu:hover {
transform: translateY(-10px);
box-shadow: 0 16px 32px rgba(7, 28, 46, 0.35);
}
@keyframes munculKartu {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kartu-img-wrap {
padding: 4px;
background: linear-gradient(135deg, var(--teal-muda) 0%, var(--teal-utama) 100%);
border-radius: 14px;
overflow: hidden;
margin-bottom: 12px;
box-shadow: 0 6px 16px rgba(7, 28, 46, 0.25);
transition: box-shadow 0.3s ease;
}
.kartu:hover .kartu-img-wrap {
box-shadow: 0 10px 22px rgba(7, 28, 46, 0.4);
}
.kartu img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
border-radius: 11px;
transition: transform 0.5s ease;
}
.kartu:hover img {
transform: scale(1.1);
}
.kartu h3 {
color: var(--navy-tua);
margin-bottom: 8px;
}
/* ===== SECTION KONTAK ===== */
.kontak {
padding: 70px 40px;
background: linear-gradient(180deg, var(--teal-sangat-muda) 0%, var(--putih-cerah) 100%);
}
.kontak-content {
max-width: 1000px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
animation: munculKontak 0.7s ease forwards;
}
@keyframes munculKontak {
to {
opacity: 1;
transform: translateY(0);
}
}
.kontak h2 {
font-size: 30px;
margin-bottom: 12px;
color: var(--navy-tua);
}
.kontak-intro {
color: #4a6572;
max-width: 500px;
font-size: 16px;
}
/* ===== KARTU INFO KONTAK (gradien navy tua → navy utama, aksen emas) ===== */
.kontak-info-card {
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--navy-lembut) 100%);
color: var(--putih-cerah);
border-radius: 12px;
padding: 32px;
border: 1px solid rgba(216, 174, 93, 0.25);
}
.kontak-info-card h4 {
color: var(--putih-cerah);
}
.kontak-item {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 22px;
}
.kontak-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(216, 174, 93, 0.2);
color: var(--emas-aksen);
border-radius: 50%;
font-size: 16px;
}
.kontak-item h6 {
color: var(--teal-muda);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 3px;
}
.kontak-item p {
color: var(--putih-cerah);
font-size: 14px;
margin-bottom: 0;
}
/* ===== KARTU FORM ===== */
.kontak-card {
background-color: rgba(255,255,255,0.9);
backdrop-filter: blur(6px);
border: 1px solid var(--teal-transparan);
border-radius: 12px;
padding: 32px;
height: 100%;
box-shadow: 0 4px 16px rgba(7, 28, 46, 0.12);
}
.kontak-card .form-control {
border: 1px solid #cfe6e2;
border-radius: 6px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.kontak-card .form-control:focus {
border-color: var(--teal-utama);
box-shadow: 0 0 0 3px rgba(23, 163, 152, 0.18);
}
.kontak-card .form-floating label {
color: #7c93a0;
}
/* ===== TOMBOL KIRIM (gradien navy → teal) ===== */
.btn-kirim {
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--teal-utama) 100%);
color: var(--putih-cerah);
border: none;
padding: 12px;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
transition: opacity 0.25s ease;
}
.btn-kirim:hover {
opacity: 0.9;
}
/* ===== FOOTER DASAR ===== */
.footer-tasik {
background: linear-gradient(120deg, var(--navy-utama) 0%, var(--navy-tua) 100%);
position: relative;
overflow: hidden;
}
.footer-wave {
position: absolute;
top: -1px;
left: 0;
width: 100%;
line-height: 0;
transform: translateY(-99%);
}
.footer-wave svg {
width: 100%;
height: 50px;
display: block;
}
.footer-col {
opacity: 0;
transform: translateY(20px);
animation: munculFooter 0.7s ease forwards;
animation-delay: var(--delay);
}
@keyframes munculFooter {
to {
opacity: 1;
transform: translateY(0);
}
}
.footer-text {
color: var(--teal-sangat-muda);
font-size: 14px;
}
.footer-icon {
display: inline-block;
margin-right: 6px;
color: var(--emas-aksen);
}
.footer-link {
position: relative;
color: var(--teal-sangat-muda);
text-decoration: none;
font-size: 14px;
padding-bottom: 2px;
transition: color 0.25s ease, padding-left 0.25s ease;
}
.footer-link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0%;
height: 1.5px;
background-color: var(--emas-aksen);
transition: width 0.3s ease;
}
.footer-link:hover {
color: var(--putih-cerah);
padding-left: 6px;
}
.footer-link:hover::after {
width: 100%;
}
.footer-divider {
border-top: 1px solid rgba(216, 174, 93, 0.25);
margin: 24px 0 16px;
}
.footer-copy {
color: var(--teal-sangat-muda);
font-size: 13px;
}
/* ===== TOMBOL KEMBALI KE ATAS ===== */
.btn-back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--teal-utama) 100%);
color: var(--putih-cerah);
border: none;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(7, 28, 46, 0.5);
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 999;
}
.btn-back-to-top.tampil {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.btn-back-to-top:hover {
opacity: 0.9;
transform: translateY(-4px);
}
@media (max-width: 768px) {
.footer-col {
animation-delay: 0s;
}
}
/* ===== IKON SOSIAL MEDIA DI FOOTER ===== */
.footer-sosmed {
display: flex;
gap: 12px;
margin-top: 8px;
}
.footer-sosmed-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: rgba(216, 174, 93, 0.15);
color: var(--putih-cerah);
font-size: 18px;
text-decoration: none;
transition: transform 0.25s ease, background-color 0.25s ease;
}
.footer-sosmed-icon:hover {
background-color: var(--emas-aksen);
color: var(--navy-tua);
transform: translateY(-4px);
}
/* ===== KARTU DESTINASI GAYA BARU (foto penuh + teks menumpuk) ===== */
.kartu-destinasi {
position: relative;
width: 300px;
height: 380px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(7, 28, 46, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kartu-destinasi:hover {
transform: translateY(-8px);
box-shadow: 0 16px 32px rgba(7, 28, 46, 0.45);
}
.kartu-destinasi-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.kartu-destinasi:hover .kartu-destinasi-img {
transform: scale(1.08);
}
.kartu-destinasi-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 20px 18px;
background: linear-gradient(180deg, rgba(7,28,46,0) 0%, rgba(7,28,46,0.9) 70%);
color: var(--putih-cerah);
}
.kartu-destinasi-overlay h3 {
color: var(--putih-cerah);
font-size: 20px;
margin-bottom: 10px;
}
.info-jam-operasional {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(216, 174, 93, 0.6);
border-radius: 30px;
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
backdrop-filter: blur(4px);
}
.info-jam-operasional i {
color: var(--teal-muda);
font-size: 15px;
}
/* ===== BREADCRUMB ===== */
.breadcrumb-tasik {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 16px;
background: rgba(255,255,255,0.75);
border: 1px solid var(--teal-transparan);
border-radius: 30px;
list-style: none;
margin: 0;
}
.breadcrumb-tasik .breadcrumb-item {
display: flex;
align-items: center;
gap: 6px;
}
.breadcrumb-tasik .breadcrumb-item + .breadcrumb-item::before {
content: "/";
color: #9fb4c0;
}
.breadcrumb-tasik a {
color: var(--teal-utama);
text-decoration: none;
font-weight: 500;
padding: 2px 4px;
border-radius: 4px;
transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
display: inline-block;
}
.breadcrumb-tasik a:hover {
color: var(--navy-tua);
background-color: var(--teal-sangat-muda);
transform: translateY(-2px);
}
.breadcrumb-tasik .breadcrumb-item.active {
color: var(--navy-tua);
font-weight: 600;
}
/* ===== TEKS PROFIL DAERAH ===== */
.tentang-text-justify {
text-align: justify;
margin-bottom: 16px;
}
.tentang-text-justify:last-child {
margin-bottom: 0;
}
/* ===== UKURAN GAMBAR SERAGAM ===== */
.gambar-destinasi-seragam {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
/* ===== FOTO DESTINASI DETAIL ===== */
.foto-destinasi-wrap {
display: block;
aspect-ratio: 4 / 3;
border-radius: 16px;
padding: 6px;
background: var(--putih-cerah);
border: 1px solid #dceceb;
box-shadow: 0 8px 24px rgba(7, 28, 46, 0.2);
overflow: hidden;
transition: box-shadow 0.35s ease;
}
.foto-destinasi-wrap:hover {
box-shadow: 0 14px 34px rgba(7, 28, 46, 0.32);
}
.foto-destinasi {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 12px;
border: 3px solid var(--putih-cerah);
transition: transform 0.5s ease;
}
.foto-destinasi-wrap:hover .foto-destinasi {
transform: scale(1.06);
}
/* ===== INFO DESTINASI ===== */
.info-destinasi-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.info-destinasi-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
margin-bottom: 10px;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(6px);
border: 1px solid var(--teal-transparan);
border-radius: 10px;
box-shadow: 0 4px 12px rgba(7, 28, 46, 0.1);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.info-destinasi-item:hover {
transform: translateX(4px);
box-shadow: 0 6px 16px rgba(7, 28, 46, 0.18);
}
.info-destinasi-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--teal-utama) 100%);
color: var(--putih-cerah);
font-size: 17px;
}
.info-destinasi-text strong {
color: var(--navy-tua);
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-destinasi-text span {
color: #33475a;
font-size: 15px;
}
/* ===== FASILITAS TERSEDIA ===== */
.fasilitas-card {
border: none;
background: linear-gradient(180deg, var(--putih-cerah) 0%, var(--teal-sangat-muda) 100%);
border-radius: 14px;
box-shadow: 0 8px 20px rgba(7, 28, 46, 0.15);
}
.fasilitas-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 18px 10px;
border-radius: 12px;
text-align: center;
background: rgba(255,255,255,0.65);
border: 1px solid var(--teal-transparan);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fasilitas-item:hover {
transform: translateY(-6px);
box-shadow: 0 10px 20px rgba(7, 28, 46, 0.22);
}
.fasilitas-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--teal-muda) 0%, var(--teal-utama) 100%);
color: var(--navy-tua);
font-size: 20px;
box-shadow: 0 4px 10px rgba(7, 28, 46, 0.25);
}
.fasilitas-label {
color: var(--navy-tua);
font-weight: 600;
font-size: 14px;
}
/* ===== SECTION KULINER KHAS ===== */
.kuliner-section {
padding: 60px 40px;
background: linear-gradient(180deg, var(--putih-cerah) 0%, var(--teal-sangat-muda) 100%);
}
.kuliner-section h2 {
text-align: center;
font-size: 30px;
margin-bottom: 8px;
color: var(--navy-tua);
}
.kuliner-subtitle {
text-align: center;
color: #4a6572;
max-width: 550px;
margin: 0 auto 40px;
}
.kuliner-container {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.kartu-kuliner {
background: rgba(255,255,255,0.9);
backdrop-filter: blur(6px);
border: 1px solid var(--teal-transparan);
border-radius: 16px;
width: 320px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(7, 28, 46, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kartu-kuliner:hover {
transform: translateY(-8px);
box-shadow: 0 16px 32px rgba(7, 28, 46, 0.3);
}
.kartu-kuliner-img-wrap {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.kartu-kuliner-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.kartu-kuliner:hover .kartu-kuliner-img-wrap img {
transform: scale(1.08);
}
.kartu-kuliner-body {
padding: 18px 20px 22px;
}
.kartu-kuliner-badge {
display: inline-block;
background: var(--teal-sangat-muda);
color: var(--navy-tua);
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 10px;
}
.kartu-kuliner h3 {
color: var(--navy-tua);
font-size: 19px;
margin-bottom: 8px;
}
.kartu-kuliner p {
color: #33475a;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* ===== SEARCH BAR MODERN ===== */
.search-destinasi {
max-width: 500px;
margin: 0 auto;
}
.search-destinasi .input-group-text {
background-color: var(--putih-cerah);
border: 1px solid #cfe6e2;
border-right: none;
color: var(--teal-utama);
}
.search-destinasi .form-control {
border: 1px solid #cfe6e2;
border-left: none;
border-right: none;
box-shadow: none;
padding: 12px 8px;
}
.search-destinasi .form-control:focus {
border-color: var(--teal-utama);
box-shadow: none;
}
.btn-cari {
background-color: var(--teal-utama);
color: var(--putih-cerah);
border: 1px solid var(--teal-utama);
padding: 0 24px;
font-weight: 600;
transition: background-color 0.25s ease;
}
.btn-cari:hover {
background-color: var(--navy-tua);
border-color: var(--navy-tua);
color: var(--putih-cerah);
}
/* ===== FILTER KATEGORI DESTINASI — pill navy-teal ===== */
.filter-kategori-wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.filter-kategori-pill {
display: inline-flex;
align-items: center;
padding: 8px 22px;
border-radius: 30px;
border: 1.5px solid var(--teal-transparan);
background: rgba(255,255,255,0.7);
color: var(--navy-tua);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: all 0.25s ease;
}
.filter-kategori-pill:hover {
border-color: var(--teal-utama);
background: var(--teal-sangat-muda);
color: var(--navy-tua);
transform: translateY(-2px);
}
.filter-kategori-pill.active {
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--teal-utama) 100%);
border-color: transparent;
color: var(--putih-cerah);
box-shadow: 0 4px 12px rgba(7, 28, 46, 0.25);
}
.filter-kategori-pill.active:hover {
transform: translateY(-2px);
color: var(--putih-cerah);
}
/* ===== BADGE STATUS DI KARTU ===== */
.badge-status {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
padding: 5px 14px;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(4px);
background-color: rgba(14, 52, 80, 0.75); /* navy transparan, senada tema */
color: var(--putih-cerah);
}
.status-buka {
background-color: rgba(23, 163, 152, 0.9);
color: var(--putih-cerah);
}
.status-tutup {
background-color: rgba(120, 120, 120, 0.75);
color: var(--putih-cerah);
}
.badge-kategori {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
padding: 5px 14px;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(4px);
background-color: rgba(14, 52, 80, 0.75);
color: #ffffff;
}
/* ===== BADGE KATEGORI DI KARTU ATRAKSI ===== */
.badge-kategori-atraksi {
display: inline-block;
background-color: var(--teal-sangat-muda);
color: var(--navy-tua);
border: 1px solid var(--teal-transparan);
font-size: 11.5px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
}
/* ===== TEKS RAPI (justify) UNTUK DESKRIPSI ===== */
.text-justify {
text-align: justify;
}
/* ===== TOMBOL "LIHAT DETAIL" DI KARTU ===== */
.btn-lihat-detail {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
color: var(--putih-cerah);
font-size: 13px;
font-weight: 600;
text-decoration: none;
opacity: 0.9;
transition: opacity 0.25s ease, gap 0.25s ease;
}
.btn-lihat-detail:hover {
opacity: 1;
gap: 10px;
color: var(--emas-aksen);
}
/* ===== PAGINATION MODERN ===== */
.pagination {
gap: 6px;
}
.pagination .page-item .page-link {
color: var(--navy-tua);
background-color: var(--putih-cerah);
border: 1px solid #cfe6e2;
border-radius: 10px;
padding: 8px 16px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 2px 6px rgba(7, 28, 46, 0.08);
}
.pagination .page-item .page-link:hover {
background-color: var(--teal-sangat-muda);
border-color: var(--teal-utama);
color: var(--navy-tua);
transform: translateY(-2px);
}
.pagination .page-item.active .page-link {
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--teal-utama) 100%);
border-color: var(--teal-utama);
color: var(--putih-cerah);
box-shadow: 0 4px 12px rgba(7, 28, 46, 0.3);
}
.pagination .page-item.disabled .page-link {
color: #a9c0c9;
background-color: var(--putih-lembut);
border-color: #e3f0ee;
box-shadow: none;
cursor: not-allowed;
}
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
display: flex;
align-items: center;
gap: 4px;
}
/* Fokus keyboard tetap terlihat jelas di seluruh elemen interaktif */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.page-link:focus-visible {
outline: 2px solid var(--emas-aksen);
outline-offset: 2px;
}
/* =========================================================
ADMIN / DASHBOARD — halaman manajemen (Daftar User, dsb.)
Dipakai bersama Bootstrap 5 bawaan, disesuaikan ke tema
navy + teal supaya panel admin senada dengan halaman publik.
========================================================= */
.admin-wrapper {
background: linear-gradient(180deg, var(--putih-lembut) 0%, var(--teal-sangat-muda) 100%);
min-height: 100vh;
padding-bottom: 40px;
}
.admin-card {
background: rgba(255,255,255,0.92);
border: 1px solid var(--teal-transparan);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(7, 28, 46, 0.1);
}
.admin-title {
color: var(--navy-tua);
font-weight: 700;
}
.admin-title::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin-top: 8px;
background: linear-gradient(90deg, var(--emas-aksen) 0%, var(--teal-utama) 100%);
border-radius: 2px;
}
.table-navy thead {
background: linear-gradient(120deg, var(--navy-tua) 0%, var(--navy-utama) 100%);
}
.table-navy thead th {
color: var(--putih-cerah);
font-weight: 600;
border: none;
padding: 14px 16px;
}
.table-navy tbody td {
vertical-align: middle;
padding: 12px 16px;
color: #16232c;
}
.table-navy tbody tr:hover {
background-color: var(--teal-sangat-muda);
}
.badge-role-admin {
background-color: rgba(216, 174, 93, 0.18);
color: #8a6417;
border: 1px solid rgba(216, 174, 93, 0.5);
font-weight: 600;
padding: 5px 12px;
border-radius: 20px;
}
.badge-role-user {
background-color: var(--teal-sangat-muda);
color: var(--navy-tua);
border: 1px solid var(--teal-transparan);
font-weight: 600;
padding: 5px 12px;
border-radius: 20px;
}
.btn-navy {
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--teal-utama) 100%);
color: var(--putih-cerah);
border: none;
font-weight: 600;
transition: opacity 0.25s ease, transform 0.2s ease;
}
.btn-navy:hover {
opacity: 0.92;
transform: translateY(-1px);
color: var(--putih-cerah);
}
.btn-outline-navy {
color: var(--navy-tua);
border: 1px solid var(--navy-lembut);
background: transparent;
font-weight: 600;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-outline-navy:hover {
background-color: var(--navy-tua);
color: var(--putih-cerah);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(7, 28, 46, 0.25);
}
.btn-outline-danger-soft {
color: #b3423a;
border: 1px solid #e3a89f;
background: transparent;
font-weight: 600;
transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-outline-danger-soft:hover {
background-color: #b3423a;
color: var(--putih-cerah);
}
.btn-outline-danger-soft:hover {
background-color: #b3423a;
color: var(--putih-cerah);
}
.btn-logout-sidebar {
background: none;
border: none;
color: rgba(255,255,255,0.85);
text-decoration: none;
display: block;
width: 100%;
text-align: left;
padding: 0.6rem 0.8rem;
border-radius: 8px;
}
.btn-logout-sidebar:hover {
background: #b91c1c;
color: #fff;
}
/* =========================================================
OVERRIDE CLASS BOOTSTRAP BAWAAN
Supaya user.blade.php (Daftar User) & edit.blade.php ikut
tema navy + teal TANPA mengubah markup / class di file blade
sama sekali — cukup pakai file CSS ini.
========================================================= */
/* Breadcrumb bawaan Bootstrap */
nav[aria-label="breadcrumb"] .breadcrumb {
background: rgba(255,255,255,0.8);
border: 1px solid var(--teal-transparan);
border-radius: 30px;
padding: 10px 18px;
}
nav[aria-label="breadcrumb"] .breadcrumb-item a {
color: var(--teal-utama);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
color: var(--navy-tua);
}
nav[aria-label="breadcrumb"] .breadcrumb-item.active {
color: var(--navy-tua);
font-weight: 600;
}
nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
color: #9fb4c0;
}
/* Judul halaman (h2 "Daftar User" / "Edit User") */
.container h2 {
color: var(--navy-tua);
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
}
/* Tabel bawaan (.table.table-bordered + thead.table-dark) */
.container table.table {
background-color: var(--putih-cerah);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(7, 28, 46, 0.12);
}
.container table.table thead.table-dark {
background: linear-gradient(120deg, var(--navy-tua) 0%, var(--navy-utama) 100%) !important;
}
.container table.table thead.table-dark th {
color: var(--putih-cerah);
border: none;
font-weight: 600;
}
.container table.table tbody td {
vertical-align: middle;
}
.container table.table tbody tr:hover {
background-color: var(--teal-sangat-muda);
}
/* Tombol bawaan (btn-primary / btn-outline-primary / btn-outline-danger / btn-outline-secondary) */
.container .btn-primary {
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--teal-utama) 100%);
border: none;
font-weight: 600;
}
.container .btn-primary:hover {
opacity: 0.92;
}
.container .btn-outline-primary {
color: var(--navy-tua);
border-color: var(--navy-lembut);
font-weight: 600;
}
.container .btn-outline-primary:hover {
background-color: var(--navy-tua);
border-color: var(--navy-tua);
color: var(--putih-cerah);
}
.container .btn-outline-danger {
color: #b3423a;
border-color: #e3a89f;
font-weight: 600;
}
.container .btn-outline-danger:hover {
background-color: #b3423a;
border-color: #b3423a;
color: var(--putih-cerah);
}
.container .btn-outline-secondary {
color: var(--navy-lembut);
border-color: #cfd8e0;
font-weight: 600;
}
.container .btn-outline-secondary:hover {
background-color: var(--navy-lembut);
border-color: var(--navy-lembut);
color: var(--putih-cerah);
}
/* Badge role (bg-danger untuk admin, bg-secondary untuk user) */
.container .badge.bg-danger {
background-color: rgba(216, 174, 93, 0.18) !important;
color: #8a6417 !important;
border: 1px solid rgba(216, 174, 93, 0.5);
font-weight: 600;
}
.container .badge.bg-secondary {
background-color: var(--teal-sangat-muda) !important;
color: var(--navy-tua) !important;
border: 1px solid var(--teal-transparan);
font-weight: 600;
}
/* Kartu form edit (.card.shadow-sm) */
.container .card.shadow-sm {
border: 1px solid var(--teal-transparan);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(7, 28, 46, 0.1) !important;
}
.container .card-title {
color: var(--navy-tua);
font-family: 'Fraunces', Georgia, serif;
}
/* Input & select bawaan */
.container .form-control:focus,
.container .form-select:focus {
border-color: var(--teal-utama);
box-shadow: 0 0 0 3px rgba(23, 163, 152, 0.18);
}
.container .form-text {
color: #7c93a0;
}
/* ===== MODAL KONFIRMASI HAPUS — pop-up center tema navy + teal ===== */
.modal-hapus-tasik {
border: none;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(7, 28, 46, 0.35);
}
.modal-hapus-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgba(179, 66, 58, 0.12);
color: #b3423a;
font-size: 24px;
}
.modal-hapus-title {
color: var(--navy-tua);
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
}
.modal-hapus-text {
color: #4a6572;
font-size: 14.5px;
}
.modal-backdrop.show {
background-color: rgba(7, 28, 46, 0.55);
opacity: 1;
}
/* =========================================================
BERANDA — hero eyebrow, subtitle, CTA, baris fitur ikon
========================================================= */
.hero-tasik-foto {
text-align: left;
}
.hero-eyebrow {
display: inline-block;
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 26px;
color: var(--teal-muda);
margin-bottom: 4px;
}
/* Judul besar hero, gaya "PAPUA BARAT" bertumpuk seperti mockup */
.hero-title {
font-family: 'Poppins', 'Inter', sans-serif;
font-weight: 800;
font-size: clamp(2.4rem, 6vw, 4.2rem);
line-height: 1.05;
text-transform: uppercase;
margin-bottom: 14px;
letter-spacing: -0.01em;
}
.hero-subtitle-bold {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 18px;
color: rgba(255,255,255,0.95);
margin-bottom: 12px;
}
.hero-desc {
max-width: 560px;
font-size: 15px;
color: rgba(255,255,255,0.75);
}
.hero-subtitle {
max-width: 560px;
font-size: 17px;
color: rgba(255,255,255,0.85);
}
.btn-jelajahi {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--teal-utama);
color: var(--putih-cerah);
padding: 13px 28px;
border-radius: 30px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.5px;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.25s ease, transform 0.2s ease;
}
.btn-jelajahi:hover {
background-color: var(--navy-lembut);
color: var(--putih-cerah);
transform: translateY(-2px);
}
.hero-fitur-row {
display: flex;
gap: 30px;
flex-wrap: wrap;
margin-top: 40px;
position: relative;
z-index: 2;
}
.hero-fitur-item {
display: flex;
align-items: flex-start;
gap: 12px;
max-width: 230px;
}
.hero-fitur-icon {
font-size: 22px;
color: var(--teal-muda);
margin-top: 2px;
}
.hero-fitur-item h6 {
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--putih-cerah);
margin-bottom: 4px;
font-family: 'Inter', sans-serif;
font-weight: 700;
}
.hero-fitur-item p {
font-size: 12.5px;
color: rgba(255,255,255,0.75);
margin: 0;
line-height: 1.5;
}
@media (max-width: 768px) {
.hero-fitur-row {
gap: 22px;
}
.hero-fitur-item {
max-width: 100%;
}
}
/* Tombol arrow bulat di pojok kartu destinasi (kartu-destinasi gaya overlay) */
.kartu-destinasi-arrow {
position: absolute;
bottom: 18px;
right: 16px;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.8);
color: var(--putih-cerah);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(4px);
transition: background-color 0.25s ease, transform 0.25s ease;
}
.kartu-destinasi:hover .kartu-destinasi-arrow {
background-color: var(--teal-utama);
border-color: var(--teal-utama);
transform: translateX(3px);
}
/* Tombol "Lihat Semua Destinasi" — pill outline teal */
.btn-lihat-semua {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--teal-utama);
color: var(--putih-cerah);
padding: 12px 28px;
border-radius: 30px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.5px;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.25s ease, transform 0.2s ease;
}
.btn-lihat-semua:hover {
background-color: var(--navy-tua);
color: var(--putih-cerah);
transform: translateY(-2px);
}
/* =========================================================
HALAMAN DESTINASI (DAFTAR) — kartu bernomor gaya terang
========================================================= */
.kartu-destinasi-numbered {
background: var(--putih-cerah);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(7, 28, 46, 0.12);
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 320px;
display: flex;
flex-direction: column;
}
.kartu-destinasi-numbered:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(7, 28, 46, 0.22);
}
.kartu-destinasi-numbered .foto-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.kartu-destinasi-numbered .foto-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.kartu-destinasi-numbered:hover .foto-wrap img {
transform: scale(1.08);
}
.kartu-nomor {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--navy-tua);
color: var(--putih-cerah);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
box-shadow: 0 4px 10px rgba(7, 28, 46, 0.3);
}
.kartu-destinasi-numbered .body {
padding: 18px 20px 22px;
}
.kartu-destinasi-numbered h3 {
color: var(--navy-tua);
font-size: 19px;
margin-bottom: 6px;
}
.kartu-destinasi-numbered p {
color: #4a6572;
font-size: 14px;
line-height: 1.55;
margin-bottom: 10px;
}
.info-jam-operasional-inline {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--teal-utama);
font-size: 12.5px;
font-weight: 600;
margin-bottom: 10px;
}
.btn-lihat-detail-terang {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--navy-tua);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: gap 0.25s ease, color 0.25s ease;
}
.btn-lihat-detail-terang:hover {
gap: 10px;
color: var(--teal-utama);
}
/* Judul kartu fasilitas di halaman detail destinasi */
.fasilitas-card .card-title {
color: var(--navy-tua);
}
/* Badge status non-absolute, dipakai di atas judul halaman detail destinasi */
.badge-status-inline {
display: inline-block;
padding: 5px 14px;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-status-inline.status-buka {
background-color: rgba(23, 163, 152, 0.15);
color: var(--teal-utama);
border: 1px solid rgba(23, 163, 152, 0.35);
}
.badge-status-inline.status-tutup {
background-color: rgba(120, 120, 120, 0.12);
color: #6b6b6b;
border: 1px solid rgba(120, 120, 120, 0.3);
}
/* =========================================================
HERO HALAMAN DALAM — dipakai bareng di Tentang, Destinasi,
Kuliner, Kontak (dan halaman lain selain Beranda).
Background foto diatur lewat inline style per halaman
(style="background-image:url(...)") supaya satu class bisa
dipakai ulang dengan foto berbeda-beda.
========================================================= */
.page-hero {
position: relative;
min-height: 260px;
display: flex;
align-items: center;
padding: 130px 20px 50px;
overflow: hidden;
background-size: cover;
background-position: center;
}
.page-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(7,28,46,0.92) 0%, rgba(14,52,80,0.75) 100%);
z-index: 1;
}
.page-hero h1 {
text-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.page-hero-subtitle {
max-width: 560px;
color: rgba(255,255,255,0.85);
font-size: 16px;
}
@media (max-width: 768px) {
.page-hero {
min-height: 200px;
padding: 110px 16px 35px;
}
.scroll-indicator {
display: none;
}
}
/* Breadcrumb versi terang, dipakai di atas foto gelap (hero tentang) */
.breadcrumb-tasik-dark {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
}
.breadcrumb-tasik-dark a {
color: var(--teal-muda);
}
.breadcrumb-tasik-dark a:hover {
color: var(--putih-cerah);
background-color: rgba(255,255,255,0.15);
}
.breadcrumb-tasik-dark .breadcrumb-item.active {
color: var(--putih-cerah);
}
.breadcrumb-tasik-dark .breadcrumb-item + .breadcrumb-item::before {
color: rgba(255,255,255,0.5);
}
/* Ikon di setiap kartu statistik "Tentang" */
.tentang-stat-icon {
font-size: 26px;
color: var(--teal-utama);
margin-bottom: 8px;
display: block;
}
/* ===== AKTIVITAS & FASILITAS — kotak grid bersih ===== */
.fitur-grid-card {
background: var(--putih-cerah);
border: 1px solid var(--teal-transparan);
border-radius: 14px;
padding: 22px;
box-shadow: 0 4px 14px rgba(7, 28, 46, 0.08);
}
.fitur-grid-card h5 {
color: var(--navy-tua);
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
margin-bottom: 16px;
}
.fitur-grid-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 8px;
border: 1px solid var(--teal-transparan);
border-radius: 12px;
background: rgba(255,255,255,0.6);
text-align: center;
height: 100%;
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.fitur-grid-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 18px rgba(7, 28, 46, 0.15);
background-color: var(--teal-sangat-muda);
}
.fitur-grid-icon {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--teal-utama);
color: var(--teal-utama);
background: var(--putih-cerah);
font-size: 18px;
}
.fitur-grid-label {
font-size: 12.5px;
font-weight: 600;
color: var(--navy-tua);
}
/* ===== ULASAN PENGUNJUNG ===== */
.ulasan-card {
background: var(--teal-sangat-muda);
border-radius: 14px;
padding: 20px;
height: 100%;
}
.ulasan-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--teal-utama), var(--navy-lembut));
color: var(--putih-cerah);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.ulasan-nama {
font-weight: 600;
color: var(--navy-tua);
font-size: 14px;
}
.ulasan-waktu {
font-size: 12px;
color: #6b8894;
}
.ulasan-stars {
color: var(--emas-aksen);
font-size: 13px;
}
.ulasan-teks {
font-size: 14px;
color: #33475a;
line-height: 1.6;
}
/* ===== GALERI FOTO — SCROLL GESER (DRAG) ===== */
.galeri-scroll {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 8px;
cursor: grab;
user-select: none;
}
.galeri-scroll.dragging {
cursor: grabbing;
scroll-behavior: auto;
}
.galeri-scroll::-webkit-scrollbar {
height: 6px;
}
.galeri-scroll::-webkit-scrollbar-thumb {
background: var(--teal-transparan);
border-radius: 10px;
}
.galeri-foto-item {
position: relative;
flex: 0 0 auto;
width: 220px;
aspect-ratio: 4 / 3;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 16px rgba(7, 28, 46, 0.15);
}
.galeri-foto-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.galeri-hapus-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 5;
}
@media (max-width: 576px) {
.galeri-foto-item {
width: 160px;
}
}
/* Pastikan navbar + dropdown selalu di lapisan paling atas */
header {
position: relative;
z-index: 2000;
}
/* =========================================================
HALAMAN AUTH — Login & Register
Tambahkan blok ini di paling bawah file style.css kamu.
Pakai variabel warna & font yang SAMA dengan tema utama
(navy + teal), supaya konsisten dengan halaman lain.
========================================================= */
.auth-page {
position: relative;
min-height: calc(100vh - 90px);
display: flex;
align-items: center;
padding: 60px 20px;
overflow: hidden;
background-size: cover;
background-position: center;
}
.auth-overlay {
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(7,28,46,0.35) 0%, rgba(14,52,80,0.15) 100%);
z-index: 1;
}
.auth-card {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px 36px;
box-shadow: 0 20px 50px rgba(7, 28, 46, 0.3);
text-align: center;
opacity: 0;
transform: translateY(20px);
animation: munculAuthCard 0.6s ease forwards;
}
@keyframes munculAuthCard {
to { opacity: 1; transform: translateY(0); }
}
.auth-icon-circle {
width: 64px;
height: 64px;
margin: 0 auto 18px;
border-radius: 50%;
background: var(--teal-sangat-muda);
color: var(--teal-utama);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
.auth-title {
font-family: 'Fraunces', Georgia, serif;
color: var(--navy-tua);
font-size: 26px;
margin-bottom: 8px;
}
.auth-subtitle {
color: #4a6572;
font-size: 14px;
max-width: 340px;
margin: 0 auto 16px;
}
.auth-divider-mini {
width: 40px;
height: 3px;
background: var(--emas-aksen);
border-radius: 2px;
margin-bottom: 24px;
}
.auth-card form {
text-align: left;
}
.auth-card .form-label {
font-size: 13px;
font-weight: 600;
color: var(--navy-tua);
margin-bottom: 6px;
}
.auth-input-group .input-group-text {
background-color: var(--putih-cerah);
border: 1px solid #cfe6e2;
color: var(--teal-utama);
}
.auth-input-group .form-control {
border: 1px solid #cfe6e2;
box-shadow: none;
}
.auth-input-group .form-control:focus {
border-color: var(--teal-utama);
box-shadow: 0 0 0 3px rgba(23, 163, 152, 0.18);
}
.auth-input-group .form-control:focus ~ .input-group-text,
.auth-input-group:focus-within .input-group-text {
border-color: var(--teal-utama);
}
.auth-toggle-eye {
cursor: pointer;
background-color: var(--putih-cerah);
border: 1px solid #cfe6e2;
border-left: none;
}
.auth-link-small {
font-size: 13px;
color: var(--teal-utama);
text-decoration: none;
font-weight: 600;
}
.auth-link-small:hover {
color: var(--navy-tua);
}
.btn-auth-primary {
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--teal-utama) 100%);
color: var(--putih-cerah);
border: none;
padding: 12px;
border-radius: 8px;
font-weight: 700;
font-size: 15px;
transition: opacity 0.25s ease, transform 0.2s ease;
}
.btn-auth-primary:hover {
opacity: 0.92;
transform: translateY(-1px);
color: var(--putih-cerah);
}
.auth-divider-text {
display: flex;
align-items: center;
text-align: center;
color: #9fb4c0;
font-size: 13px;
margin: 18px 0;
}
.auth-divider-text::before,
.auth-divider-text::after {
content: "";
flex: 1;
border-bottom: 1px solid #e3ecef;
}
.auth-divider-text span {
padding: 0 12px;
}
.btn-auth-google {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background-color: var(--putih-cerah);
border: 1px solid #cfe6e2;
border-radius: 8px;
padding: 11px;
font-weight: 600;
font-size: 14px;
color: #33475a;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-auth-google:hover {
background-color: var(--teal-sangat-muda);
border-color: var(--teal-utama);
}
.auth-bottom-text {
font-size: 13.5px;
color: #4a6572;
margin-top: 18px;
margin-bottom: 0;
}
.auth-bottom-text a {
color: var(--teal-utama);
font-weight: 700;
text-decoration: none;
}
.auth-bottom-text a:hover {
color: var(--navy-tua);
}
@media (max-width: 767px) {
.auth-card {
padding: 30px 24px;
}
.auth-page {
padding: 40px 16px;
}
}
/* =========================================================
HALAMAN KONTAK — REDESAIN (tambahkan di PALING BAWAH style.css)
Struktur baru: hero foto + form mengambang + strip info kontak
4 kolom + section peta & ajakan jelajahi destinasi.
Tidak menghapus class kontak-* lama, hanya menambah class baru.
========================================================= */
.page-hero-kontak {
min-height: 340px;
padding-bottom: 60px;
}
/* Kolom kiri hero: teks + strip info diregangkan agar dasarnya
sejajar dengan dasar kartu form di kolom kanan */
.kontak-hero-kiri {
min-height: 100%;
}
/* Label kecil di atas judul hero, mis. "Kami Siap Membantu Anda" */
.kontak-hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--teal-muda);
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 12px;
}
/* ===== KARTU FORM "KIRIM PESAN" — mengambang di sisi kanan hero ===== */
.kontak-form-card {
background: rgba(255,255,255,0.97);
backdrop-filter: blur(8px);
border-radius: 16px;
padding: 30px;
box-shadow: 0 20px 45px rgba(7, 28, 46, 0.35);
}
.kontak-form-card-head {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 22px;
}
.kontak-form-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--teal-utama) 100%);
color: var(--putih-cerah);
font-size: 17px;
}
.kontak-form-card-head h4 {
color: var(--navy-tua);
font-size: 19px;
margin-bottom: 2px;
}
.kontak-form-card-head p {
color: #6b8894;
font-size: 13.5px;
margin: 0;
}
/* Input dengan ikon di kiri, dipakai di form kirim pesan */
.kontak-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.kontak-input-wrap i {
position: absolute;
left: 14px;
color: #9fb4c0;
font-size: 15px;
pointer-events: none;
}
.kontak-input-wrap.kontak-input-wrap-textarea i {
top: 14px;
align-self: flex-start;
}
.kontak-input-wrap .form-control {
padding-left: 40px;
border: 1px solid #dceceb;
border-radius: 8px;
}
.kontak-input-wrap .form-control:focus {
border-color: var(--teal-utama);
box-shadow: 0 0 0 3px rgba(23, 163, 152, 0.15);
}
.btn-kirim {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* ===== STRIP INFO KONTAK — kotak putih solid, model sama seperti kartu form ===== */
.kontak-info-strip {
background: rgba(255,255,255,0.97);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 16px;
padding: 22px 20px;
margin-top: 24px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 16px;
box-shadow: 0 20px 45px rgba(7, 28, 46, 0.35);
}
.kontak-info-strip-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.kontak-info-strip-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--teal-utama) 0%, var(--navy-lembut) 100%);
color: var(--putih-cerah);
font-size: 16px;
}
.kontak-info-strip-item h6 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--navy-tua);
font-weight: 700;
margin-bottom: 2px;
}
.kontak-info-strip-item p {
font-size: 13px;
color: #4a6572;
margin: 0;
line-height: 1.4;
}
@media (max-width: 576px) {
.kontak-info-strip {
grid-template-columns: 1fr;
}
}
/* ===== SECTION BAWAH: PETA + AJAKAN JELAJAHI DESTINASI ===== */
.kontak-bawah {
padding: 100px 40px 70px;
background: linear-gradient(180deg, var(--putih-lembut) 0%, var(--teal-sangat-muda) 100%);
}
@media (max-width: 576px) {
.kontak-bawah {
padding-top: 60px;
}
}
.kontak-peta-card {
background: linear-gradient(135deg, var(--navy-tua) 0%, var(--navy-lembut) 100%);
color: var(--putih-cerah);
border-radius: 16px 16px 0 0;
padding: 26px 28px;
}
.kontak-peta-head {
display: flex;
align-items: flex-start;
gap: 14px;
}
.kontak-peta-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.15);
color: var(--teal-muda);
font-size: 17px;
}
.kontak-peta-head h5 {
color: var(--putih-cerah);
margin-bottom: 6px;
}
.kontak-peta-head p {
color: rgba(255,255,255,0.8);
font-size: 13.5px;
margin: 0;
}
.kontak-peta-embed {
border-radius: 0 0 16px 16px;
overflow: hidden;
box-shadow: 0 10px 26px rgba(7, 28, 46, 0.2);
line-height: 0;
}
/* Kartu ajakan "Jelajahi Papua Barat" dengan foto latar */
.kontak-jelajah-card {
position: relative;
height: 100%;
min-height: 340px;
border-radius: 16px;
overflow: hidden;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
box-shadow: 0 10px 26px rgba(7, 28, 46, 0.25);
}
.kontak-jelajah-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7,28,46,0.3) 0%, rgba(7,28,46,0.92) 85%);
}
.kontak-jelajah-content {
position: relative;
z-index: 2;
padding: 30px 28px;
color: var(--putih-cerah);
}
.kontak-jelajah-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255,255,255,0.15);
color: var(--teal-muda);
font-size: 16px;
margin-bottom: 12px;
}
.kontak-jelajah-content h4 {
color: var(--putih-cerah);
margin-bottom: 8px;
}
.kontak-jelajah-content p {
color: rgba(255,255,255,0.85);
font-size: 14px;
max-width: 420px;
margin-bottom: 18px;
}
/* =========================================================
CTA "ADA PERTANYAAN?" DI BERANDA — banner ringkas ke halaman
Kontak (menggantikan form kontak penuh di beranda lama).
Tambahkan di PALING BAWAH style.css.
========================================================= */
.cta-kontak {
position: relative;
padding: 90px 20px;
background-size: cover;
background-position: center;
background-attachment: fixed;
text-align: center;
}
.cta-kontak-overlay {
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(7,28,46,0.88) 0%, rgba(14,52,80,0.8) 100%);
}
.cta-kontak-box {
position: relative;
z-index: 2;
max-width: 620px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
animation: munculKontak 0.7s ease forwards;
}
.cta-kontak-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(216, 174, 93, 0.5);
color: var(--teal-muda);
font-size: 22px;
margin-bottom: 18px;
}
.cta-kontak-box h2 {
color: var(--putih-cerah);
font-size: 30px;
margin-bottom: 12px;
}
.cta-kontak-box p {
color: rgba(255,255,255,0.8);
font-size: 15.5px;
margin-bottom: 26px;
}
@media (max-width: 768px) {
.cta-kontak {
padding: 60px 16px;
background-attachment: scroll;
}
}
/* =========================================================
SECTION "LEBIH DARI SEKADAR DESTINASI" — kenapa Papua Barat
+ kartu video di beranda. Tambahkan di PALING BAWAH style.css.
========================================================= */
.kenapa-section {
padding: 70px 40px;
background: linear-gradient(180deg, var(--putih-cerah) 0%, var(--teal-sangat-muda) 100%);
}
.kenapa-title {
font-size: 30px;
color: var(--navy-tua);
margin-bottom: 14px;
}
.kenapa-text {
color: #4a6572;
font-size: 15px;
max-width: 460px;
margin-bottom: 24px;
}
/* ===== 3 STATISTIK — angka + label, ikon di kiri ===== */
.kenapa-stat-row {
display: flex;
flex-wrap: wrap;
gap: 28px;
margin-bottom: 26px;
}
.kenapa-stat-item {
display: flex;
align-items: center;
gap: 10px;
}
.kenapa-stat-item i {
font-size: 20px;
color: var(--teal-utama);
}
.kenapa-stat-item h3 {
font-size: 20px;
color: var(--navy-tua);
font-weight: 700;
margin: 0;
line-height: 1.1;
}
.kenapa-stat-item p {
font-size: 12.5px;
color: #6b8894;
margin: 0;
}
/* ===== KARTU VIDEO — foto + tombol play bulat di tengah ===== */
.kenapa-video-card {
position: relative;
display: block;
aspect-ratio: 16 / 10;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 16px 36px rgba(7, 28, 46, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
/* Foto thumbnail sebagai layer terpisah, supaya gampang disembunyikan
saat iframe video dimasukkan setelah tombol play diklik */
.kenapa-video-thumb {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.5s ease;
}
.kenapa-video-card:hover .kenapa-video-thumb {
transform: scale(1.03);
}
.kenapa-video-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(7,28,46,0) 40%, rgba(7,28,46,0.85) 100%);
transition: opacity 0.3s ease;
}
.kenapa-video-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(7, 28, 46, 0.35);
}
.kenapa-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 68px;
height: 68px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.95);
color: var(--navy-tua);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
padding-left: 4px; /* biar ikon segitiga play kelihatan center */
box-shadow: 0 8px 20px rgba(7, 28, 46, 0.35);
transition: transform 0.3s ease, background-color 0.3s ease;
}
.kenapa-video-card:hover .kenapa-play-btn {
transform: translate(-50%, -50%) scale(1.08);
background-color: var(--teal-utama);
color: var(--putih-cerah);
}
.kenapa-video-caption {
position: absolute;
left: 20px;
bottom: 18px;
z-index: 2;
color: var(--putih-cerah);
}
.kenapa-video-caption h6 {
font-size: 15px;
font-weight: 700;
margin-bottom: 2px;
}
.kenapa-video-caption span {
font-size: 12.5px;
color: rgba(255,255,255,0.8);
}
/* ===== SAAT VIDEO DIPUTAR — sembunyikan thumbnail/tombol/caption,
tampilkan iframe penuh satu kartu ===== */
.kenapa-video-card.is-playing {
cursor: default;
}
.kenapa-video-card.is-playing::before,
.kenapa-video-card.is-playing .kenapa-video-thumb,
.kenapa-video-card.is-playing .kenapa-play-btn,
.kenapa-video-card.is-playing .kenapa-video-caption {
opacity: 0;
pointer-events: none;
}
.kenapa-video-iframe {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 991px) {
.kenapa-text {
max-width: 100%;
}
}
/* =========================================================
SECTION "AKTIVITAS MENARIK" (5 ikon) + "RASA & BUDAYA"
(kuliner khas, budaya lokal, kerajinan tangan) di beranda.
Tambahkan di PALING BAWAH style.css.
========================================================= */
/* ===== AKTIVITAS MENARIK ===== */
.aktivitas-section {
padding: 70px 40px;
background: var(--putih-cerah);
}
.aktivitas-title {
font-size: 28px;
color: var(--navy-tua);
margin-bottom: 8px;
}
.aktivitas-subtitle {
color: #4a6572;
font-size: 15px;
max-width: 480px;
margin: 0 auto;
}
.aktivitas-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 0 8px;
}
.aktivitas-item i {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1.5px solid var(--teal-transparan);
background: var(--teal-sangat-muda);
color: var(--teal-utama);
font-size: 22px;
transition: transform 0.25s ease, background-color 0.25s ease;
}
.aktivitas-item:hover i {
transform: translateY(-4px);
background-color: var(--teal-utama);
color: var(--putih-cerah);
}
.aktivitas-item h6 {
font-size: 14px;
font-weight: 700;
color: var(--navy-tua);
margin: 0;
}
.aktivitas-item p {
font-size: 12.5px;
color: #6b8894;
margin: 0;
line-height: 1.5;
}
/* ===== RASA & BUDAYA ===== */
.rasa-budaya-section {
padding: 70px 40px;
background: linear-gradient(180deg, var(--putih-cerah) 0%, var(--teal-sangat-muda) 100%);
}
.rasa-budaya-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.rasa-budaya-card {
position: relative;
display: block;
aspect-ratio: 3 / 4;
border-radius: 14px;
overflow: hidden;
background-size: cover;
background-position: center;
box-shadow: 0 10px 24px rgba(7, 28, 46, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rasa-budaya-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7,28,46,0) 45%, rgba(7,28,46,0.9) 100%);
}
.rasa-budaya-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(7, 28, 46, 0.32);
}
.rasa-budaya-caption {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 2;
color: var(--putih-cerah);
}
.rasa-budaya-caption h6 {
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
}
.rasa-budaya-caption span {
font-size: 11.5px;
color: rgba(255,255,255,0.8);
line-height: 1.4;
display: block;
}
@media (max-width: 767px) {
.rasa-budaya-grid {
grid-template-columns: repeat(2, 1fr);
}
.rasa-budaya-grid a:last-child {
grid-column: span 2;
}
}
/* =========================================================
HALAMAN TENTANG — REDESAIN LENGKAP
Tambahkan di PALING BAWAH style.css.
(kartu video kenapa-video-card sudah ada dari kenapa-section.css,
jadi tidak perlu didefinisikan ulang di sini)
========================================================= */
/* ===== BARIS 3 IKON DI DALAM HERO ===== */
.page-hero-fitur-row {
display: flex;
flex-wrap: wrap;
gap: 26px;
margin-top: 6px;
}
.page-hero-fitur-item {
display: flex;
align-items: flex-start;
gap: 12px;
max-width: 240px;
}
.page-hero-fitur-item i {
font-size: 20px;
color: var(--teal-muda);
margin-top: 3px;
flex-shrink: 0;
}
.page-hero-fitur-item h6 {
font-size: 13px;
font-weight: 700;
color: var(--putih-cerah);
margin-bottom: 3px;
}
.page-hero-fitur-item p {
font-size: 12.5px;
color: rgba(255,255,255,0.75);
margin: 0;
line-height: 1.5;
}
/* ===== FOTO SHOWCASE (Sekilas Tentang) — foto statis, tanpa tombol play ===== */
.tentang-foto-showcase {
position: relative;
display: block;
aspect-ratio: 16 / 10;
border-radius: 18px;
overflow: hidden;
background-size: cover;
background-position: center;
box-shadow: 0 16px 36px rgba(7, 28, 46, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tentang-foto-showcase::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7,28,46,0) 55%, rgba(7,28,46,0.85) 100%);
}
.tentang-foto-showcase:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(7, 28, 46, 0.35);
}
.tentang-foto-showcase-caption {
position: absolute;
left: 20px;
bottom: 18px;
z-index: 2;
color: var(--putih-cerah);
}
.tentang-foto-showcase-caption h6 {
font-size: 15px;
font-weight: 700;
margin-bottom: 2px;
}
.tentang-foto-showcase-caption span {
font-size: 12.5px;
color: rgba(255,255,255,0.8);
}
/* ===== MINI STAT CARD (Sekilas Tentang) ===== */
.mini-stat-card {
background: var(--putih-cerah);
border: 1px solid var(--teal-transparan);
border-radius: 12px;
padding: 16px 18px;
box-shadow: 0 4px 12px rgba(7, 28, 46, 0.06);
}
.mini-stat-card i {
color: var(--teal-utama);
font-size: 18px;
margin-bottom: 8px;
display: block;
}
.mini-stat-card h3 {
font-size: 22px;
font-weight: 700;
color: var(--navy-tua);
margin-bottom: 2px;
}
.mini-stat-card p {
font-size: 12px;
color: #6b8894;
margin: 0;
}
/* ===== ALASAN MEMILIH — 6 kartu ikon ===== */
.alasan-section {
padding: 70px 40px;
background: linear-gradient(180deg, var(--putih-cerah) 0%, var(--teal-sangat-muda) 100%);
}
.alasan-card {
background: var(--putih-cerah);
border: 1px solid var(--teal-transparan);
border-radius: 14px;
padding: 24px 16px;
height: 100%;
text-align: center;
box-shadow: 0 4px 14px rgba(7, 28, 46, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.alasan-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 22px rgba(7, 28, 46, 0.15);
}
.alasan-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--teal-sangat-muda);
color: var(--teal-utama);
font-size: 22px;
margin-bottom: 14px;
}
.alasan-card h6 {
font-size: 14px;
font-weight: 700;
color: var(--navy-tua);
margin-bottom: 6px;
}
.alasan-card p {
font-size: 12.5px;
color: #6b8894;
margin: 0;
line-height: 1.5;
}
/* ===== PESONA YANG TAK TERGANTIKAN — 5 kartu foto ===== */
.pesona-section {
padding: 70px 40px;
background: var(--putih-cerah);
}
.pesona-card {
background: var(--putih-cerah);
border: 1px solid var(--teal-transparan);
border-radius: 14px;
overflow: hidden;
height: 100%;
box-shadow: 0 6px 18px rgba(7, 28, 46, 0.08);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pesona-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 26px rgba(7, 28, 46, 0.18);
}
.pesona-card img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}
.pesona-card-body {
padding: 14px 14px 16px;
}
.pesona-card-body h6 {
font-size: 13.5px;
font-weight: 700;
color: var(--navy-tua);
margin-bottom: 4px;
}
.pesona-card-body p {
font-size: 11.5px;
color: #6b8894;
margin: 0;
line-height: 1.45;
}
/* ===== KOMITMEN KAMI — pariwisata berkelanjutan ===== */
.komitmen-section {
padding: 20px 40px 70px;
background: var(--putih-cerah);
}
.komitmen-box {
background: var(--teal-sangat-muda);
border-radius: 18px;
padding: 40px;
}
.komitmen-icon-besar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--putih-cerah);
color: var(--teal-utama);
font-size: 42px;
box-shadow: 0 10px 24px rgba(7, 28, 46, 0.1);
}
.komitmen-chip-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.komitmen-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--putih-cerah);
border: 1px solid var(--teal-transparan);
border-radius: 30px;
padding: 8px 18px;
font-size: 13px;
font-weight: 600;
color: var(--navy-tua);
}
.komitmen-chip i {
color: var(--teal-utama);
}
/* ===== CTA AKHIR: "SIAP MENJELAJAHI PAPUA BARAT?" ===== */
.cta-tentang {
position: relative;
padding: 90px 20px;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.cta-tentang-overlay {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(7,28,46,0.9) 0%, rgba(14,52,80,0.55) 100%);
}
.cta-tentang-box {
position: relative;
z-index: 2;
max-width: 560px;
opacity: 0;
transform: translateY(20px);
animation: munculKontak 0.7s ease forwards;
}
.cta-tentang-box h2 {
color: var(--putih-cerah);
font-size: 32px;
margin-bottom: 12px;
}
.cta-tentang-box p {
color: rgba(255,255,255,0.85);
font-size: 15.5px;
margin-bottom: 26px;
}
@media (max-width: 768px) {
.cta-tentang {
padding: 60px 16px;
background-attachment: scroll;
}
}
/* ===== STRIP 4 FITUR DI BAWAH CTA AKHIR ===== */
.cta-tentang-strip {
padding: 40px 40px 60px;
background: var(--putih-cerah);
}
.cta-strip-item {
display: flex;
align-items: flex-start;
gap: 12px;
justify-content: center;
}
@media (min-width: 768px) {
.cta-strip-item {
justify-content: flex-start;
}
}
.cta-strip-item i {
font-size: 20px;
color: var(--teal-utama);
margin-top: 2px;
flex-shrink: 0;
}
.cta-strip-item h6 {
font-size: 13.5px;
font-weight: 700;
color: var(--navy-tua);
margin-bottom: 2px;
}
.cta-strip-item p {
font-size: 12px;
color: #6b8894;
margin: 0;
}
/* =========================================================
ULASAN PENGUNJUNG — perbaikan tampilan (eyebrow, tombol,
kartu ulasan diperkaya dari class ulasan-* yang sudah ada)
========================================================= */
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--teal-utama);
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px;
}
.btn-tulis-ulasan {
display: inline-flex;
align-items: center;
background: var(--teal-utama);
color: var(--putih-cerah);
border: none;
padding: 10px 22px;
border-radius: 30px;
font-weight: 700;
font-size: 13px;
text-decoration: none;
transition: background-color 0.25s ease, transform 0.2s ease;
}
.btn-tulis-ulasan:hover {
background-color: var(--navy-tua);
color: var(--putih-cerah);
transform: translateY(-2px);
}
/* Perkaya .ulasan-card yang sudah ada: kasih border + hover, bukan flat polos */
.ulasan-card {
border: 1px solid var(--teal-transparan);
box-shadow: 0 4px 14px rgba(7, 28, 46, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ulasan-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 22px rgba(7, 28, 46, 0.14);
}
.ulasan-avatar {
width: 44px;
height: 44px;
font-size: 16px;
}
.ulasan-kosong {
color: #6b8894;
background: rgba(255,255,255,0.6);
border: 1px dashed var(--teal-transparan);
border-radius: 14px;
}
.ulasan-kosong i {
color: var(--teal-utama);
}
/* =========================================================
DESTINASI LAINNYA — badge status, rating pill, deskripsi
dibatasi 2 baris supaya tinggi kartu konsisten
========================================================= */
.kartu-destinasi-numbered .foto-wrap {
position: relative; /* dibutuhkan supaya badge-status & rating-pill nempel di foto ini saja */
}
.rating-pill-lain {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255,255,255,0.92);
color: var(--navy-tua);
font-size: 12px;
font-weight: 700;
padding: 4px 10px;
border-radius: 30px;
backdrop-filter: blur(4px);
}
.rating-pill-lain i {
color: var(--emas-aksen);
font-size: 12px;
}
/* Override posisi badge-status KHUSUS di dalam kartu Destinasi Lainnya,
supaya tidak numpuk dengan rating-pill-lain yang sama-sama di kanan */
.kartu-destinasi-numbered .foto-wrap .badge-status {
left: 14px;
right: auto;
}
.deskripsi-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.9em; /* jaga tinggi tetap sama walau teks pendek */
}
/* =========================================================
LOKASI & TIPS BERKUNJUNG — kartu sejajar tinggi + list
tips bergaya, konsisten navy+teal (ganti text-success hijau)
========================================================= */
.lokasi-tips-row {
align-items: stretch;
}
.lokasi-card,
.tips-card {
background: var(--putih-cerah);
border: 1px solid var(--teal-transparan);
border-radius: 16px;
padding: 20px;
height: 100%;
box-shadow: 0 6px 18px rgba(7, 28, 46, 0.08);
}
.tips-list {
list-style: none;
padding: 0;
margin: 0;
}
.tips-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 0;
border-bottom: 1px dashed var(--teal-transparan);
font-size: 14.5px;
color: #33475a;
line-height: 1.5;
}
.tips-list li:last-child {
border-bottom: none;
}
.tips-list li i {
color: var(--teal-utama);
font-size: 16px;
margin-top: 2px;
flex-shrink: 0;
}
/* Jarak lebih lega antara section Lokasi&Tips dan Ulasan Pengunjung */
.lokasi-tips-row {
margin-bottom: 4.5rem !important;
}
/* =========================================================
GALERI FOTO — badge jumlah, tombol panah, hover zoom +
overlay perbesar, tombol hapus lebih halus, lightbox modal
========================================================= */
.galeri-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
background: var(--teal-sangat-muda);
color: var(--teal-utama);
border-radius: 20px;
font-size: 13px;
font-weight: 700;
vertical-align: middle;
margin-left: 8px;
}
.galeri-wrap {
position: relative;
}
/* Fade halus di tepi kiri/kanan strip foto, kasih sinyal "bisa digeser" */
.galeri-wrap::before,
.galeri-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 8px;
width: 48px;
z-index: 2;
pointer-events: none;
}
.galeri-wrap::before {
left: 0;
background: linear-gradient(90deg, var(--putih-lembut) 0%, rgba(247,244,236,0) 100%);
}
.galeri-wrap::after {
right: 0;
background: linear-gradient(270deg, var(--putih-lembut) 0%, rgba(247,244,236,0) 100%);
}
.galeri-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--putih-cerah);
color: var(--navy-tua);
box-shadow: 0 6px 16px rgba(7, 28, 46, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.galeri-nav:hover {
background-color: var(--teal-utama);
color: var(--putih-cerah);
transform: translateY(-50%) scale(1.08);
}
.galeri-nav-prev { left: -6px; }
.galeri-nav-next { right: -6px; }
@media (max-width: 767px) {
.galeri-nav { display: none; } /* di mobile cukup swipe/drag langsung */
.galeri-wrap::before,
.galeri-wrap::after { width: 24px; }
}
/* Scrollbar custom, tipis dan senada tema */
.galeri-scroll::-webkit-scrollbar {
height: 5px;
}
.galeri-scroll::-webkit-scrollbar-track {
background: transparent;
}
.galeri-scroll::-webkit-scrollbar-thumb {
background: var(--teal-transparan);
border-radius: 10px;
}
.galeri-scroll::-webkit-scrollbar-thumb:hover {
background: var(--teal-utama);
}
/* Hover zoom + overlay ikon perbesar */
.galeri-foto-item {
cursor: pointer;
}
.galeri-foto-item img {
transition: transform 0.4s ease;
}
.galeri-foto-item:hover img {
transform: scale(1.08);
}
.galeri-foto-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(7, 28, 46, 0);
color: var(--putih-cerah);
font-size: 22px;
opacity: 0;
transition: background-color 0.3s ease, opacity 0.3s ease;
pointer-events: none;
}
.galeri-foto-item:hover .galeri-foto-overlay {
background: rgba(7, 28, 46, 0.28);
opacity: 1;
}
/* Tombol hapus foto (admin) — bulat, muncul halus saat hover */
.btn-hapus-foto {
position: absolute;
top: 8px;
right: 8px;
z-index: 5;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: rgba(179, 66, 58, 0.9);
color: var(--putih-cerah);
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.85);
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.galeri-foto-item:hover .btn-hapus-foto {
opacity: 1;
transform: scale(1);
}
.btn-hapus-foto:hover {
background-color: #8f2e28;
}
/* State kosong, konsisten dengan .ulasan-kosong */
.galeri-kosong {
color: #6b8894;
background: rgba(255,255,255,0.6);
border: 1px dashed var(--teal-transparan);
border-radius: 14px;
}
.galeri-kosong i {
color: var(--teal-utama);
}
/* ===== LIGHTBOX MODAL — background gelap, foto full, navigasi ===== */
.modal-lightbox-content {
background: transparent;
border: none;
box-shadow: none;
}
.modal-lightbox-content .modal-body {
border-radius: 14px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-lightbox-content img {
display: block;
max-height: 80vh;
object-fit: contain;
background: #000;
}
.galeri-lightbox-close {
position: absolute;
top: -42px;
right: 0;
z-index: 4;
opacity: 0.9;
}
.galeri-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(4px);
color: var(--putih-cerah);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.galeri-lightbox-nav:hover {
background-color: var(--teal-utama);
}
.galeri-lightbox-prev { left: 14px; }
.galeri-lightbox-next { right: 14px; }
.galeri-lightbox-counter {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
background: rgba(7, 28, 46, 0.6);
color: var(--putih-cerah);
font-size: 12.5px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
}
/* =========================================================
AKTIVITAS & FASILITAS — versi lebih hidup: icon solid,
hover invert warna, subjudul ajakan, dua kartu sejajar
========================================================= */
.fitur-row {
align-items: stretch;
}
.fitur-grid-head {
margin-bottom: 18px;
}
.fitur-grid-card h5 {
margin-bottom: 2px;
}
.fitur-grid-subtitle {
font-size: 13px;
color: #6b8894;
margin: 0;
}
/* Icon jadi lingkaran solid berisi, bukan outline tipis */
.fitur-grid-icon {
width: 52px;
height: 52px;
border: none;
background: var(--teal-sangat-muda);
color: var(--teal-utama);
font-size: 21px;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
/* Saat hover kartu item: icon "membalik" jadi solid teal + putih, plus sedikit rotasi */
.fitur-grid-item:hover .fitur-grid-icon {
background: linear-gradient(135deg, var(--teal-utama) 0%, var(--navy-lembut) 100%);
color: var(--putih-cerah);
transform: scale(1.08) rotate(-4deg);
box-shadow: 0 6px 16px rgba(23, 163, 152, 0.35);
}
.fitur-grid-item {
cursor: default;
}
.fitur-grid-label {
transition: color 0.25s ease;
}
.fitur-grid-item:hover .fitur-grid-label {
color: var(--teal-utama);
}
@media (max-width: 480px) {
.fitur-grid-icon {
width: 44px;
height: 44px;
font-size: 18px;
}
}