/* CSS by Core Natives behind the scenes warrior - style.css */
/*
  Table of Contents:
  1. Reset & Base Styles
  2. Variables (Custom Properties)
  3. Utility Classes
  4. Typography
  5. General Layout & Container
  6. Header & Navigation
  7. Hero Section
  8. Services Section
  9. Portfolio Section (Video Portfolio & Video Testimonials)
  10. Text Testimonials Section
  11. Destinations Section
  12. About Us Snippet Section (Parallax)
  13. Blog Section
  14. SEO Content Power Section
  15. Contact Form & Consultation Section
  16. Google Maps Section
  17. Footer
  18. Back to Top Button
  19. Video Modal
  20. Animations & Keyframes
  21. Accessibility Enhancements
  22. Responsive Design (Media Queries)
*/

/* 1. Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-body);
    background-color: var(--color-primary-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--color-text-primary); 
    transition: color var(--transition-speed-fast) ease-in-out;
}

a:hover, a:focus-visible {
    color: var(--color-accent);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input, textarea, button {
    font-size: 1rem;
}

/* 2. Variables (Custom Properties) */
:root {
    --color-primary-bg: #000000;
    --color-accent: #936d2e; 
    --color-accent-darker: #7a5a21; /* Darker gold for better contrast with white text */
    --color-text-primary: #bebebe; 
    --color-text-secondary: #FFFFFF; 
    --color-text-on-accent: #000000; 
    --color-text-muted: #888888; 
    --color-overlay-dark: rgba(0, 0, 0, 0.7);
    --color-card-bg: #0D0D0D; 
    --color-card-bg-hover: #141414;
    --color-border: #2a2a2a;
    --color-border-accent: rgba(147, 109, 46, 0.5);
    --color-error: #ff4d4d;
    --color-success: #4CAF50;

    --font-primary: 'Poppins', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-secondary: 'Playfair Display', 'Lora', 'Georgia', serif;
    --font-body: var(--font-primary);

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --fs-base: 1rem;
    --fs-sm: 0.875rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-h1: clamp(2.5rem, 6vw, 4.5rem);
    --fs-h2: clamp(2rem, 5vw, 3.5rem);
    --fs-h3: clamp(1.5rem, 4vw, 2.25rem);

    --transition-speed-fast: 0.2s;
    --transition-speed-medium: 0.35s;
    --transition-speed-slow: 0.6s;

    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.3);
    --shadow-accent: 0 4px 15px rgba(147, 109, 46, 0.2);
    --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.5);

    --border-radius-sm: 5px;
    --border-radius-md: 10px;
    --border-radius-lg: 15px;

    --max-width-container: 1280px;
    --padding-container-x: clamp(1rem, 5vw, 3rem);
    --padding-container-y: clamp(3rem, 8vh, 6rem);
    --section-spacing: clamp(4rem, 10vh, 8rem);
}

/* 3. Utility Classes */
.container {
    width: 100%;
    max-width: var(--max-width-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-container-x);
    padding-right: var(--padding-container-x);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.content-section {
    padding-top: var(--section-spacing);
    padding-bottom: var(--section-spacing);
    position: relative;
}

.section-title {
    font-family: var(--font-secondary);
    font-size: var(--fs-h2);
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    font-weight: var(--fw-bold);
    letter-spacing: 1px;
}
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--color-accent);
    margin: 0.75rem auto 0;
    border-radius: var(--border-radius-sm);
}

.section-intro {
    font-size: var(--fs-lg);
    color: var(--color-text-primary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    line-height: 1.7;
}

.btn {
    display: inline-block;
    padding: 0.8em 1.8em;
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-speed-medium) ease-in-out;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 2px solid transparent;
}
/* Remove ::before effect for .btn general if it causes issues with direct bg changes */
/*
.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--color-accent-darker); 
    transition: width var(--transition-speed-medium) ease-in-out;
    z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before {
    width: 100%;
}
*/

.btn-primary {
    background-color: var(--color-accent-darker); /* CHANGED: Darker gold for normal state */
    color: var(--color-text-secondary); /* White text on darker gold */
    border-color: var(--color-accent-darker); /* Border matches new bg */
}
.btn-primary:hover, .btn-primary:focus-visible {
    background-color: var(--color-accent); /* Lighter gold on hover */
    color: var(--color-text-on-accent); /* Black text on lighter gold for hover (good contrast) */
    border-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
}


.btn-secondary {
    background-color: transparent;
    color: var(--color-text-secondary); 
    border: 2px solid var(--color-accent);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent); 
    border-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
}


.section-cta-container {
    text-align: center;
    margin-top: 3rem;
}

/* 6. Header & Navigation */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 0; /* Reduced padding */
    transition: all var(--transition-speed-medium) ease-in-out;
    box-shadow: var(--shadow-light);
}
#main-header.header-scrolled {
    background-color: var(--color-primary-bg);
    padding: 0.3rem 0; /* Reduced padding */
    box-shadow: var(--shadow-medium);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link .logo-image {
    height: 65px; 
    width: auto;
    transition: transform var(--transition-speed-medium) ease;
}
.logo-link:hover .logo-image, .logo-link:focus-visible .logo-image {
    transform: scale(1.05);
}

#main-nav .nav-list {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

#main-nav .nav-link {
    font-family: var(--font-primary);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    padding: 0.5rem 0;
    position: relative;
    text-transform: uppercase;
    font-size: var(--fs-sm);
    letter-spacing: 0.5px;
}
#main-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-speed-medium) ease-in-out;
}
#main-nav .nav-link:hover::after,
#main-nav .nav-link:focus-visible::after,
#main-nav .nav-link.active::after {
    width: 100%;
}
#main-nav .nav-link:hover, #main-nav .nav-link:focus-visible {
    color: var(--color-text-secondary);
}

.nav-item.dropdown {
    position: relative;
}
.dropdown-arrow {
    font-size: 0.7em;
    margin-left: 0.3em;
    transition: transform var(--transition-speed-fast) ease;
}
.nav-item.dropdown:hover .dropdown-arrow,
.nav-item.dropdown:focus-within .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-accent);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    min-width: 220px;
    padding: 0.5rem 0;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-speed-medium) ease, transform var(--transition-speed-medium) ease, visibility 0s var(--transition-speed-medium) linear;
    z-index: 1001;
}
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
}
.dropdown-menu .dropdown-link {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--color-text-primary);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.dropdown-menu .dropdown-link:hover,
.dropdown-menu .dropdown-link:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent); 
}

.header-cta { 
    /* Inherits .btn-primary styles now for consistency */
    padding: 0.6em 1.5em !important;
    font-size: var(--fs-sm) !important;
    text-transform: uppercase;
}


.nav-toggle {
    display: none;
    z-index: 1002;
    padding: 0.5rem;
}
.hamburger-icon {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--color-text-secondary);
    position: relative;
    transition: background-color 0s var(--transition-speed-medium);
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-secondary);
    transition: transform var(--transition-speed-medium) ease, top var(--transition-speed-medium) ease, bottom var(--transition-speed-medium) ease;
}
.hamburger-icon::before {
    top: -8px;
}
.hamburger-icon::after {
    bottom: -8px;
}
.nav-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent;
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::after {
    bottom: 0;
    transform: rotate(-45deg);
}


/* 7. Hero Section */
#hero {
    height: 100vh;
    min-height: 600px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    z-index: -2;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay-dark);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    color: var(--color-text-secondary);
    animation: fadeInFromBottom 1s ease-out forwards;
    opacity: 0;
}

#hero-title {
    font-size: var(--fs-h1);
    font-family: var(--font-secondary);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.hero-title-main {
    display: block;
    letter-spacing: 1px;
}
.hero-title-sub {
    display: block;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-family: var(--font-primary);
    font-weight: var(--fw-light);
    color: var(--color-text-primary);
    margin-top: 0.5rem;
    letter-spacing: 0.5px;
}

.subheadline {
    font-size: var(--fs-lg);
    color: var(--color-text-primary);
    max-width: 750px;
    margin: 1.5rem auto 2.5rem;
    line-height: 1.7;
    font-weight: var(--fw-normal);
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.hero-cta-group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-cta { /* This will use .btn-primary or .btn-secondary styles */
    padding: 1em 2.5em;
    font-size: var(--fs-lg);
    min-width: 220px;
}

.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 24px;
    height: 40px;
}
.mousey {
    width: 3px;
    padding: 6px 10px;
    height: 35px;
    border: 2px solid var(--color-text-secondary);
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
}
.scroller {
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background-color: var(--color-text-secondary);
    animation: scrollanim 2.2s infinite;
}

/* 8. Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.service-card {
    background-color: var(--color-card-bg);
    padding: 2.5rem 2rem;
    border-radius: var(--border-radius-lg);
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
    border: 1px solid var(--color-border);
}
.service-card:hover, .service-card:focus-within {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 10px 30px rgba(147, 109, 46, 0.15);
    border-color: var(--color-border-accent);
}

.service-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(147, 109, 46, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: background-color var(--transition-speed-medium) ease;
}
.service-icon svg {
    width: 28px;
    height: 28px;
    fill: var(--color-accent);
    transition: transform var(--transition-speed-medium) ease;
}
.service-card:hover .service-icon svg, .service-card:focus-within .service-icon svg {
    transform: scale(1.1) rotate(5deg);
}
.service-card:hover .service-icon {
    background-color: rgba(147, 109, 46, 0.2);
}

.service-card-title {
    font-size: var(--fs-xl);
    font-family: var(--font-secondary);
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    font-weight: var(--fw-semibold);
}

.service-card-description {
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.service-card-link {
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary); 
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--transition-speed-medium) ease, transform var(--transition-speed-medium) ease;
}
.service-card-link span {
    transition: transform var(--transition-speed-medium) ease;
}
.service-card-link:hover, .service-card-link:focus-visible {
    color: var(--color-accent); 
}
.service-card-link:hover span, .service-card-link:focus-visible span {
    transform: translateX(5px);
}

/* 9. Portfolio Section (Video Portfolio & Video Testimonials) */
.portfolio-grid, .video-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.portfolio-item {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    cursor: pointer;
    background-color: var(--color-card-bg);
    aspect-ratio: 16 / 9;
    box-shadow: var(--shadow-light);
    transition: transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
}
.portfolio-item:hover, .portfolio-item:focus-within {
    transform: scale(1.03);
    box-shadow: var(--shadow-accent);
}

.portfolio-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed-slow) ease;
}
.portfolio-item:hover .portfolio-thumbnail, .portfolio-item:focus-within .portfolio-thumbnail {
    transform: scale(1.1);
}

.portfolio-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
    opacity: 1;
    transition: opacity var(--transition-speed-medium) ease;
}

.play-button {
    background-color: rgba(147, 109, 46, 0.8);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: background-color var(--transition-speed-medium) ease, 
                transform var(--transition-speed-medium) ease, 
                box-shadow var(--transition-speed-medium) ease;
    box-shadow: 0 0 15px rgba(147, 109, 46, 0.5);
    z-index: 1;
}

.play-icon-svg {
    width: 28px;
    height: 28px;
    fill: var(--color-text-secondary);
}

.portfolio-item:hover .play-button,
.portfolio-item:focus-within .play-button,
.play-button:hover, 
.play-button:focus-visible {
    background-color: var(--color-accent);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 20px rgba(147, 109, 46, 0.7);
}

.portfolio-item-title {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    font-weight: var(--fw-semibold);
    margin-top: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    position: relative;
    z-index: 0;
}


/* 10. Text Testimonials Section */
#text-testimonials-section {
    background-color: var(--color-card-bg);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background-color: var(--color-primary-bg);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    border-left: 5px solid var(--color-accent);
    box-shadow: var(--shadow-medium);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    background-color: rgba(0,0,0,0.7);
}
.testimonial-card::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background-image: var(--card-bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
    border-radius: var(--border-radius-lg);
}
.testimonial-content {
    position: relative; z-index: 1;
}

.testimonial-quote p {
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-style: italic;
}
.testimonial-quote p::before {
    content: '“';
    font-size: 2.5em;
    color: var(--color-accent);
    font-family: var(--font-secondary);
    display: inline-block;
    margin-right: 0.1em;
    line-height: 0;
    vertical-align: -0.2em;
}

.testimonial-author {
    margin-top: auto;
}
.author-name {
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
    font-size: var(--fs-lg);
}
.author-company {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.testimonial-rating {
    margin-top: 1rem;
    position: relative; z-index: 1;
}
.testimonial-rating .star {
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-right: 0.2rem;
    text-shadow: 0 0 5px rgba(147, 109, 46, 0.7);
}

/* 11. Destinations Section */
.destinations-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.destination-card {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
}
.destination-card:hover, .destination-card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(147, 109, 46, 0.2);
}

.destination-card-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform var(--transition-speed-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.destination-card:hover .destination-card-image,
.destination-card:focus-within .destination-card-image {
    transform: scale(1.1);
}

.destination-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
    color: var(--color-text-secondary);
    transform: translateY(30%);
    opacity: 0;
    transition: transform var(--transition-speed-medium) ease, opacity var(--transition-speed-medium) ease;
}
.destination-card:hover .destination-card-content,
.destination-card:focus-within .destination-card-content {
    transform: translateY(0);
    opacity: 1;
}

.destination-card-name {
    font-family: var(--font-secondary);
    font-size: var(--fs-h3);
    margin-bottom: 0.5rem;
    font-weight: var(--fw-bold);
}
.destination-card-description {
    font-size: var(--fs-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
    margin-bottom: 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed-medium) ease-in-out;
}
.destination-card:hover .destination-card-description,
.destination-card:focus-within .destination-card-description {
    max-height: 100px;
}
.destination-card-link {
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary); 
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.destination-card-link:hover, .destination-card-link:focus-visible {
    color: var(--color-accent); 
}
.destination-card-link span {
    transition: transform var(--transition-speed-medium) ease;
}
.destination-card-link:hover span, .destination-card-link:focus-visible span {
    transform: translateX(4px);
}


/* 12. About Us Snippet Section (Parallax) */
.parallax-section {
    background-image: var(--parallax-bg-image);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: var(--color-text-secondary);
    text-align: center;
}
.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay-dark);
    z-index: 0;
}
.about-snippet-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}
.about-snippet-content #about-title {
    color: var(--color-text-secondary);
}
.about-snippet-content p {
    font-size: var(--fs-lg);
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* 13. Blog Section */
#blog-section {
    background-color: var(--color-primary-bg);
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.blog-card {
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
    display: flex;
    flex-direction: column;
}
.blog-card:hover, .blog-card:focus-within {
    transform: translateY(-5px);
    box-shadow: var(--shadow-accent);
}

.blog-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-title {
    font-family: var(--font-secondary);
    font-size: var(--fs-xl);
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

.blog-card-excerpt {
    font-size: var(--fs-sm);
    color: var(--color-text-primary);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.blog-card-link {
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary); 
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.blog-card-link span {
    transition: transform var(--transition-speed-medium) ease;
}
.blog-card-link:hover, .blog-card-link:focus-visible {
    color: var(--color-accent); 
}
.blog-card-link:hover span, .blog-card-link:focus-visible span {
    transform: translateX(5px);
}

/* css/style.css - TAMBAHAN UNTUK HALAMAN ARTIKEL BLOG TUNGGAL */

/* Main Content Padding for Single Article Page */
/* (main#main-content padding-top sudah diatur sebelumnya, pastikan cukup) */
.single-article-page main#main-content {
    /* padding-top: 85px; /* Pastikan ini cukup untuk header fixed */
}

/* Article Hero/Header Section */
.article-hero {
    position: relative;
    height: 65vh; /* Tinggi hero yang cukup imersif */
    min-height: 450px;
    display: flex;
    align-items: flex-end; /* Konten di bagian bawah hero */
    justify-content: center;
    text-align: center;
    color: var(--color-text-secondary);
    padding-bottom: 4rem; /* Padding bawah untuk konten hero */
}

.article-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: -2;
    filter: brightness(0.6) contrast(1.1); /* Gelapkan sedikit untuk kontras teks */
    /* Efek Ken Burns halus (opsional) */
    /* animation: kenBurnsEffect 20s infinite alternate ease-in-out; */
}
/*
@keyframes kenBurnsEffect {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.1) rotate(1deg); }
}
*/

.article-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 40%, transparent 70%);
    z-index: -1;
}

.article-hero-content {
    max-width: 800px; /* Lebar konten hero */
    animation: fadeInFromBottom 0.8s ease-out 0.3s forwards;
    opacity: 0;
}

.article-metadata-top {
    margin-bottom: 1rem;
}
.article-category {
    display: inline-block;
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    padding: 0.4em 1em;
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 1rem;
    text-decoration: none;
    transition: background-color var(--transition-speed-fast) ease;
}
.article-category:hover {
    background-color: var(--color-accent-darker);
}
.article-date {
    font-size: var(--fs-sm);
    color: var(--color-text-primary);
    opacity: 0.9;
}

.article-title-main {
    font-family: var(--font-secondary);
    font-size: clamp(2.2rem, 5.5vw, 4rem); /* Judul besar dan impactful */
    line-height: 1.15;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.article-author-line {
    font-size: var(--fs-lg);
    color: var(--color-text-primary);
    font-style: italic;
}
.article-author-line a {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-author-line a:hover {
    color: var(--color-accent);
}


/* Article Body Content Area */
#article-body-container {
    background-color: var(--color-primary-bg); /* Atau sedikit berbeda jika diinginkan */
    padding-top: var(--section-spacing);
    padding-bottom: var(--section-spacing);
}

.article-layout {
    /* Untuk layout dengan sidebar opsional */
    /* display: grid; */
    /* grid-template-columns: 1fr; */ /* Mobile first */
    /* gap: 3rem; */
}
/*
@media (min-width: 1024px) {
    .article-layout {
        grid-template-columns: 250px 1fr; // Sidebar | Main Content (jika sidebar kiri)
        // atau grid-template-columns: 1fr 250px; // Main Content | Sidebar (jika sidebar kanan)
    }
    .article-content-main {
        // grid-column: 2 / 3; // Jika sidebar kiri
    }
    .article-sidebar {
        // grid-column: 1 / 2; // Jika sidebar kiri
        // position: -webkit-sticky;
        // position: sticky;
        // top: 100px; // Sesuaikan dengan tinggi header
        // align-self: start;
    }
}
*/

.article-content-main {
    max-width: 750px; /* Lebar optimal untuk membaca teks panjang */
    margin-left: auto;
    margin-right: auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
    margin-bottom: 2.5rem; /* Spasi setelah header dan sebelum konten utama */
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}
.breadcrumb-nav ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Agar tidak overflow di mobile */
    align-items: center;
}
.breadcrumb-nav li {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.breadcrumb-nav li a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease;
}
.breadcrumb-nav li a:hover {
    color: var(--color-accent);
}
.breadcrumb-nav li + li::before { /* Separator */
    content: '/';
    padding: 0 0.75em;
    color: var(--color-text-muted);
    font-size: 0.9em;
}
.breadcrumb-nav li [aria-current="page"] {
    color: var(--color-text-muted);
    font-weight: var(--fw-normal);
}


/* Article Content Typography & Elements */
.article-lead { /* Paragraf pembuka/lead */
    font-size: var(--fs-lg);
    color: var(--color-text-primary);
    line-height: 1.7;
    margin-bottom: 2rem;
    font-style: italic;
    /* border-left: 3px solid var(--color-accent); */
    /* padding-left: 1rem; */
}

.article-content-main h2,
.article-content-main h3,
.article-content-main h4 {
    font-family: var(--font-secondary);
    color: var(--color-text-secondary);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    font-weight: var(--fw-semibold);
}
.article-content-main h2 {
    font-size: var(--fs-h3); /* Atau clamp(1.8rem, 4vw, 2.5rem); */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.article-content-main h3 {
    font-size: var(--fs-xl); /* Atau clamp(1.5rem, 3.5vw, 2rem); */
}
.article-content-main h4 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--color-accent);
}

.article-content-main p {
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}
.article-content-main p:last-child {
    margin-bottom: 0;
}

.article-content-main blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background-color: var(--color-card-bg);
    border-left: 5px solid var(--color-accent);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    font-style: italic;
    position: relative;
}
.article-content-main blockquote p {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    margin-bottom: 0;
    line-height: 1.6;
}
.article-content-main blockquote::before { /* Optional: Large quote mark */
    content: "“";
    font-family: var(--font-secondary);
    font-size: 4rem;
    color: var(--color-accent);
    opacity: 0.2;
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
    line-height: 1;
    z-index: 0;
}
.article-content-main blockquote p {
    position: relative; z-index: 1;
}


.article-content-main ul,
.article-content-main ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}
.article-content-main ul li,
.article-content-main ol li {
    margin-bottom: 0.75rem;
    color: var(--color-text-primary);
    line-height: 1.7;
}
.article-content-main ul li::marker { /* Modern bullet styling */
    color: var(--color-accent);
    font-size: 1.2em;
}
.article-content-main ol {
    /* Custom counter styling for OL if desired */
}

.article-content-main figure {
    margin: 2.5rem 0;
}
.article-image-fullwidth img,
.article-image-offset-right img,
.article-image-offset-left img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-medium);
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.article-image-fullwidth {
    /* For images that break out of the main text column */
    /* width: 100vw; */
    /* position: relative; */
    /* left: 50%; */
    /* right: 50%; */
    /* margin-left: -50vw; */
    /* margin-right: -50vw; */
    /* max-width: 1200px; /* Cap width */
    /* margin: 2.5rem auto; */
}
.article-content-main figcaption {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}
@media (min-width: 768px) {
    .article-image-offset-right {
        float: right;
        width: 45%; /* Adjust width */
        margin-left: 2rem;
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }
    .article-image-offset-left {
        float: left;
        width: 45%;
        margin-right: 2rem;
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }
    .article-content-main p:has(+ figure.article-image-offset-right),
    .article-content-main p:has(+ figure.article-image-offset-left) {
        /* Add more bottom margin to p before a floated figure */
        /* margin-bottom: 1rem; */
    }
}


.article-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, var(--color-border-accent), transparent);
    margin: 3rem 0;
}

/* Article Footer Meta: Tags & Share */
#article-footer-meta .container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}
.article-tags span, .article-share span {
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
    margin-right: 0.75rem;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.article-tags a {
    display: inline-block;
    background-color: var(--color-card-bg);
    color: var(--color-text-primary);
    padding: 0.4em 0.9em;
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-sm);
    margin-right: 0.5rem;
    margin-bottom: 0.5rem; /* For wrapping */
    text-decoration: none;
    border: 1px solid var(--color-border);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.article-tags a:hover {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent);
}
.article-share .social-icon { /* Reusing from footer styles */
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-left: 0.75rem; /* Space between icons */
    transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
}
.article-share a:hover .social-icon {
    color: var(--color-accent);
    transform: scale(1.15);
}

/* Related Articles Section */
#related-articles {
    /* .dark-accent-bg class already applied */
}
#related-articles .section-title {
    /* Styles already applied */
}
.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.related-article-card { /* Uses .blog-card-item styles */
    /* Minor adjustments if needed for related cards */
}
.related-article-card .blog-card-title {
    font-size: var(--fs-lg); /* Slightly smaller than main blog grid titles */
}
.related-article-card .blog-card-readmore.mini {
    font-size: calc(var(--fs-sm) * 0.9);
}

/* Optional Sidebar Styles */
.article-sidebar {
    /* Placeholder for sidebar styles, see .legal-sidebar for an idea */
}
.article-sidebar h4 {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-accent);
}
.article-sidebar .social-share-buttons a {
    display: inline-block; /* Or flex */
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
.article-sidebar #article-toc ul {
    list-style: none; padding-left: 0;
}
.article-sidebar #article-toc ul li a {
    /* Similar to .legal-sidebar nav ul li a */
}

/* 14. SEO Content Power Section */
#seo-power-content {
    background-color: var(--color-card-bg);
}
.seo-content-container {
    max-width: 900px;
}
.seo-paragraphs p {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}
.seo-paragraphs p:last-child {
    margin-bottom: 0;
}
.seo-paragraphs strong {
    color: var(--color-text-secondary); 
    font-weight: var(--fw-semibold);
}

/* 15. Contact Form & Consultation Section */
#contact-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text-secondary);
}
.contact-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary-bg);
    background-image: var(--contact-bg-image);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}
.contact-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr 1.2fr;
        gap: 4rem;
    }
}

.contact-info-column #contact-title,
.contact-info-column .section-intro {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.contact-info-column #contact-title::after {
    margin-left: 0;
}

.contact-details {
    margin-top: 2rem;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: var(--fs-lg);
}
.contact-item .contact-icon {
    font-size: 1.5em;
    color: var(--color-accent);
    line-height: 1;
}
.contact-item a {
    color: var(--color-text-primary);
    transition: color var(--transition-speed-fast) ease;
}
.contact-item a:hover, .contact-item a:focus-visible {
    color: var(--color-accent);
}
.contact-item address {
    font-style: normal;
    color: var(--color-text-primary);
}

.contact-form-column {
    background-color: rgba(13, 13, 13, 0.8);
    padding: clamp(1.5rem, 5vw, 3rem);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--color-border);
}

.form-group {
    margin-bottom: 1.5rem;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.9em 1em;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    transition: border-color var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-muted);
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(147, 109, 46, 0.3);
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.error-message {
    font-size: var(--fs-sm);
    color: var(--color-error);
    margin-top: 0.5rem;
    min-height: 1.2em;
}
.success-message {
    font-size: var(--fs-base);
    color: var(--color-success);
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: rgba(76, 175, 80, 0.1);
    border: 1px solid var(--color-success);
    border-radius: var(--border-radius-sm);
    text-align: center;
}

.form-submit-btn { /* Uses .btn-primary styling */
    width: 100%;
    padding: 1em 1.5em;
    font-size: var(--fs-lg);
}


/* 16. Google Maps Section */
#google-map-section iframe {
    filter: grayscale(100%) invert(90%) contrast(80%);
    display: block;
    height: 450px;
}
@media (max-width: 767px) {
    #google-map-section iframe {
        height: 300px;
    }
}


/* 17. Footer */
#main-footer {
    background-color: #050505;
    padding: var(--padding-container-y) 0 calc(var(--padding-container-y) / 2);
    color: var(--color-text-muted); 
    text-align: center;
    border-top: 1px solid var(--color-border);
}
.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}
.footer-logo-slogan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.footer-logo {
    height: 150px; 
    opacity: 0.8;
}
.footer-slogan {
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--color-text-primary); 
}
.footer-socials {
    display: flex;
    gap: 1.5rem;
}
.footer-socials .social-icon {
    font-size: 1.5rem;
    color: var(--color-text-primary); 
    transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
}
.footer-socials a:hover .social-icon,
.footer-socials a:focus-visible .social-icon {
    color: var(--color-accent);
    transform: scale(1.1);
}

.footer-bottom {
    width: 100%;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-sm);
}
.copyright {
    margin-bottom: 0.5rem;
    color: var(--color-text-primary); 
}
.credits {
    font-size: 0.75rem; 
    margin-bottom: 1rem;
    color: var(--color-text-muted); 
}
.footer-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-link {
    color: var(--color-text-primary); 
    transition: color var(--transition-speed-fast) ease;
}
.footer-link:hover, .footer-link:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
}


/* 18. Back to Top Button */
#backToTopBtn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
    background-color: var(--color-accent-darker); /* CHANGED: Darker gold for normal state */
    color: var(--color-text-secondary); /* White text on darker gold */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--transition-speed-medium) ease, visibility 0s var(--transition-speed-medium) linear, transform var(--transition-speed-medium) ease, background-color var(--transition-speed-medium) ease, color var(--transition-speed-medium) ease;
    z-index: 999;
}
#backToTopBtn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s, 0s, 0s;
}
.back-to-top-icon {
    width: 24px;
    height: 24px;
    fill: currentColor; 
}
#backToTopBtn:hover, #backToTopBtn:focus-visible {
    background-color: var(--color-accent); /* Lighter gold on hover */
    color: var(--color-text-on-accent); /* Black text on lighter gold */
    transform: scale(1.1) translateY(0) !important;
}


/* 19. Video Modal */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed-medium) ease, visibility 0s var(--transition-speed-medium) linear;
}
.video-modal.open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
}

.video-modal-content {
    position: relative;
    background-color: var(--color-primary-bg);
    width: 90%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 20px rgba(0,0,0,0.4); 
    transform: scale(0.9);
    transition: transform var(--transition-speed-medium) ease;
}
.video-modal.open .video-modal-content {
    transform: scale(1);
}

.close-modal-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: var(--color-accent-darker); /* CHANGED: Darker gold for normal state */
    color: var(--color-text-secondary); /* White text on darker gold */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-medium);
    transition: background-color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease;
}
.close-modal-btn:hover, .close-modal-btn:focus-visible {
    background-color: var(--color-accent); /* Lighter gold */
    color: var(--color-text-on-accent); /* Black text */
    transform: rotate(90deg) scale(1.1);
}

.video-modal-body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-md);
}
.video-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* 20. Animations & Keyframes */
@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollanim {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        transform: translateY(0);
        opacity: 1;
    }
    90% {
        transform: translateY(12px);
        opacity: 0;
    }
    100% {
        transform: translateY(12px);
        opacity: 0;
    }
}

/* 21. Accessibility Enhancements */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(147, 109, 46, 0.3);
}
.btn:focus-visible, .play-button:focus-visible, #backToTopBtn:focus-visible, .close-modal-btn:focus-visible {
    outline: none;
}
.form-group input:focus-visible, .form-group textarea:focus-visible {
    outline: none;
}

/* css/style.css - TAMBAHAN UNTUK HALAMAN LAYANAN (our-services.html) */

/* Page Hero Section (Generic for subpages like Our Services) */
.page-hero-section {
    height: 60vh; /* Shorter than main hero */
    min-height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: var(--page-hero-bg, url('../assets/10.webp')); /* Fallback image */
}
/* .hero-overlay can be reused from index.html styles */

.page-hero-section .hero-content { /* Reusing .hero-content structure */
    max-width: 900px;
}

.page-hero-title {
    font-size: clamp(2.2rem, 5.5vw, 4rem); /* Slightly smaller than main hero H1 */
    font-family: var(--font-secondary);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.page-hero-subheadline {
    font-size: var(--fs-lg);
    color: var(--color-text-primary);
    max-width: 700px;
    margin: 0 auto 1.5rem;
    line-height: 1.7;
    font-weight: var(--fw-normal);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}


/* Service Detail Sections General Styling */
.service-detail-section {
    padding-top: var(--section-spacing);
    padding-bottom: var(--section-spacing);
    overflow: hidden; /* To contain floated or absolutely positioned elements if any */
}

.service-detail-section:nth-child(even) {
    background-color: var(--color-card-bg); /* Alternate background for sections */
}

.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first */
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .service-detail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
    .service-detail-section.layout-image-right .service-detail-image-wrapper {
        grid-column: 2 / 3;
        grid-row: 1 / 2; /* Ensure image is on the right */
    }
    .service-detail-section.layout-image-right .service-detail-content {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
}

.service-detail-image-wrapper {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    aspect-ratio: 4/3; /* Maintain a consistent aspect ratio */
}

.service-detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed-slow) ease;
}
.service-detail-image-wrapper:hover .service-detail-image {
    transform: scale(1.05);
}

.service-detail-content {
    text-align: left;
}

.service-detail-title {
    font-family: var(--font-secondary);
    font-size: var(--fs-h2); /* Match section titles */
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    position: relative;
    font-weight: var(--fw-bold);
}
.service-detail-title::after { /* Subtle accent line, left aligned */
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-accent);
    margin: 0.75rem 0 0; /* Remove auto margins */
    border-radius: var(--border-radius-sm);
}

.service-detail-content p {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}

.service-features-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
    columns: 2; /* For two-column list on wider screens */
    column-gap: 2rem;
}
.service-features-list li {
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 0.75rem;
}
.service-features-list li::before {
    content: '✓'; /* Checkmark or other icon */
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

@media (max-width: 575px) {
    .service-features-list {
        columns: 1; /* Single column on small mobile */
    }
}


.service-cta { /* This uses .btn .btn-primary styles */
    margin-top: 1rem;
}

/* Layout: Full Width Banner for a Service */
.service-detail-section.layout-full-width-banner {
    padding: 0; /* Remove default section padding */
    position: relative;
    color: var(--color-text-secondary);
    text-align: center;
    min-height: 50vh; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-image: var(--service-banner-bg);
}
.service-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay-dark); /* Re-use hero overlay color */
    z-index: 0;
}
.service-banner-content {
    position: relative;
    z-index: 1;
    padding: var(--padding-container-y) var(--padding-container-x);
    max-width: 800px;
}
.service-banner-content .service-detail-title {
    text-align: center;
}
.service-banner-content .service-detail-title::after {
    margin-left: auto;
    margin-right: auto; /* Center the underline */
}
.service-banner-content p {
    color: var(--color-text-primary);
}

/* Services Final CTA Section (re-uses parallax styles if needed) */
#services-final-cta .section-title {
    color: var(--color-text-secondary); /* Ensure visibility on parallax */
}
#services-final-cta p {
    color: var(--color-text-primary); /* Ensure visibility on parallax */
    font-size: var(--fs-lg);
    margin-bottom: 2rem;
}

/* Ensure main content starts below fixed header */
main#main-content {
    padding-top: 70px; /* Adjust based on your final fixed header height */
}
@media (max-width: 991.98px) {
    main#main-content {
         /* Header height might be different on mobile if padding changes */
        padding-top: 60px;
    }
}
/* AKHIR css/style.css - TAMBAHAN UNTUK HALAMAN LAYANAN (our-services.html) */


/* css/style.css - TAMBAHAN UNTUK HALAMAN PORTFOLIO (portfolio.html) */

/* Portfolio Page Hero (uses .page-hero-section from our-services.html styles) */
/* No additional specific styles needed unless design dictates */

/* Portfolio Full Grid Section */
#video-gallery .portfolio-full-grid {
    display: grid;
    /* Masonry-like attempt with CSS Grid - can be enhanced with JS for true masonry */
    /* For a more static but varied grid: */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem; /* Gap between portfolio items */
    margin-top: 3rem;
}

/* Individual portfolio items reuse .portfolio-item styling from index.html,
   including visible play button and hover effects.
   If further distinction is needed for this page:
*/
.portfolio-full-grid .portfolio-item {
    /* Example: slightly different shadow or border for this page */
    /* box-shadow: 0 8px 25px rgba(147, 109, 46, 0.1); */
    /* aspect-ratio: 16/9; /* Ensure all items maintain this if not already set */
}

/* Client Logos Section - "Orbiting Galaxy" Concept */
#client-logos {
    background-color: var(--color-card-bg); /* Slightly different background */
    position: relative;
    overflow: hidden; /* Important for containing animated logos */
}

.client-logo-galaxy {
    position: relative;
    width: 100%;
    min-height: 400px; /* Adjust based on number of logos and desired density */
    display: flex; /* Fallback for simple display if animation is too complex/heavy */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem; /* Fallback gap */
    padding: 2rem 0;
    /* For a true orbiting effect, items would be positioned absolutely
       and animated with JS or complex CSS animations.
       The current HTML structure with inline styles for --logo-delay
       is for a staggered animation entrance, not continuous orbit.
       Let's start with a more manageable animated grid/flex layout first.
    */
}

.client-logo-item {
    background-color: rgba(255, 255, 255, 0.03); /* Very subtle bg for each logo */
    padding: 1rem;
    border-radius: var(--border-radius-md);
    /* width: 150px; /* Fixed width for logos for uniformity in a grid/flex */
    /* height: 80px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Start hidden for animation */
    transform: translateY(20px) scale(0.95);
    animation: fadeInLogo var(--transition-speed-slow) ease-out forwards;
    animation-delay: var(--logo-delay, 0s); /* Staggered animation */
    transition: transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
}

.client-logo-item img {
    max-width: 120px; /* Control max width of the logo image itself */
    max-height: 60px; /* Control max height */
    object-fit: contain; /* Ensure logo is not stretched */
    filter: grayscale(80%) brightness(1.5); /* Subtle desaturation, slight brightness for dark theme */
    opacity: 0.7;
    transition: filter var(--transition-speed-medium) ease, opacity var(--transition-speed-medium) ease;
}

.client-logo-item:hover {
    transform: translateY(0) scale(1.05); /* Slight lift and scale on hover */
    box-shadow: 0 0 15px rgba(147, 109, 46, 0.2);
}

.client-logo-item:hover img {
    filter: grayscale(0%) brightness(1); /* Full color and normal brightness on hover */
    opacity: 1;
}

/* Keyframe for logo fade-in */
@keyframes fadeInLogo {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Specific styles for portfolio CTA if different from services CTA */
#portfolio-final-cta .section-title {
    color: var(--color-text-secondary);
}
#portfolio-final-cta p {
    color: var(--color-text-primary);
    font-size: var(--fs-lg);
    margin-bottom: 2rem;
}

/* Responsive adjustments for Client Logos if needed */
@media (max-width: 767px) {
    .client-logo-galaxy {
        min-height: auto; /* Allow it to shrink */
        gap: 1.5rem;
    }
    .client-logo-item {
        /* Adjust width/height for smaller screens if using fixed sizes */
        /* width: 120px; */
        /* height: 60px; */
        padding: 0.75rem;
    }
    .client-logo-item img {
        max-width: 100px;
        max-height: 50px;
    }
}

@media (max-width: 480px) {
    .portfolio-full-grid {
        grid-template-columns: 1fr; /* Single column for very small screens */
        gap: 1.5rem;
    }
    .client-logo-galaxy {
        gap: 1rem;
    }
     .client-logo-item img {
        max-width: 80px;
        max-height: 40px;
    }
}

/* AKHIR css/style.css - TAMBAHAN UNTUK HALAMAN PORTFOLIO (portfolio.html) */

/* css/style.css - TAMBAHAN UNTUK HALAMAN ABOUT US (about-us.html) */

/* About Us Page Hero (uses .page-hero-section styles, specific bg via inline style) */

/* Our Story Section */
.about-story-section .story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 768px) {
    .about-story-section .story-grid {
        grid-template-columns: 1fr 1.2fr; /* Image | Content */
        gap: 4rem;
    }
    /* To alternate image position, you could add a modifier class
       .story-grid.image-right and swap grid-column values */
}
.story-image-wrapper {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-accent);
    aspect-ratio: 16/10;
}
.story-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed-slow) ease;
}
.story-image-wrapper:hover img {
    transform: scale(1.05);
}
.story-content .section-title-left-aligned { /* For titles not centered */
    text-align: left;
    margin-bottom: 1.5rem;
}
.story-content .section-title-left-aligned::after {
    margin: 0.75rem 0 0; /* Align underline to left */
}
.story-content p {
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

/* Common Dark Accent Background for Sections */
.dark-accent-bg {
    background-color: var(--color-card-bg); /* Or a slightly different dark shade */
}
.dark-accent-bg .section-title,
.dark-accent-bg .section-intro {
    /* Ensure titles and intros are visible on this darker bg */
}

/* Mission & Vision Section */
#mission-vision .section-title { /* Main title for this section */
    margin-bottom: 3rem;
}
.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 768px) {
    .mission-vision-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}
.mission-card, .vision-card {
    background-color: rgba(20, 20, 20, 0.5); /* Slightly transparent dark card */
    padding: 2.5rem 2rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
}
.mission-card:hover, .vision-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-accent);
}
.mv-icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    background-color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(147, 109, 46, 0.3);
}
.mv-icon {
    font-size: 2.5rem; /* Adjust for emoji/SVG size */
    color: var(--color-text-on-accent);
}
.mv-title {
    font-family: var(--font-secondary);
    font-size: var(--fs-h3);
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}
.mission-card p, .vision-card p {
    color: var(--color-text-primary);
    font-size: var(--fs-base);
}

/* Core Values Section */
.core-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.value-card {
    background-color: var(--color-card-bg);
    padding: 2rem;
    border-radius: var(--border-radius-md);
    text-align: center;
    border: 1px solid transparent; /* Placeholder for hover effect */
    transition: transform var(--transition-speed-medium) ease, border-color var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
    position: relative;
    overflow: hidden; /* For pseudo-elements */
}
.value-card::before { /* Subtle background pattern/glow on hover */
    content: '';
    position: absolute;
    top: -50%; right: -50%; bottom: -50%; left: -50%;
    background: radial-gradient(circle, rgba(147, 109, 46, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-speed-medium) ease;
    z-index: 0;
    transform: scale(0.5);
}
.value-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-border-accent);
    box-shadow: var(--shadow-medium);
}
.value-card:hover::before {
    opacity: 1;
    transform: scale(1);
}
.value-card > * { /* Ensure content is above pseudo-element */
    position: relative;
    z-index: 1;
}
.value-icon {
    font-size: 2.8rem; /* Adjust for emoji/SVG size */
    color: var(--color-accent);
    margin-bottom: 1rem;
    display: inline-block; /* To allow margin */
    transition: transform var(--transition-speed-medium) ease;
}
.value-card:hover .value-icon {
    transform: scale(1.1) rotate(5deg);
}
.value-name {
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xl);
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}
.value-description {
    font-size: var(--fs-sm);
    color: var(--color-text-primary);
    line-height: 1.6;
}

/* Meet the Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem; /* Increased gap */
    margin-top: 3rem;
}
@media (min-width: 992px) {
    .team-grid {
        /* For 4 items, can explicitly set to 2 or 4 columns */
        grid-template-columns: repeat(2, 1fr); /* Example: 2 columns on larger screens */
    }
}
@media (min-width: 1200px) {
    .team-grid {
        /* Or 4 columns if space allows and cards are not too wide */
        /* grid-template-columns: repeat(4, 1fr); */
    }
}

.team-member-card {
    background-color: var(--color-primary-bg); /* Slightly different from section bg if section is dark-accent-bg */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-speed-medium) cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow var(--transition-speed-medium) ease;
    display: flex;
    flex-direction: column;
}
.team-member-card:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(-3deg); /* Subtle 3D tilt */
    box-shadow: 0 15px 30px rgba(147, 109, 46, 0.2);
}
.team-member-photo-wrapper {
    width: 100%;
    aspect-ratio: 1/1; /* Square or slightly rectangular photos */
    overflow: hidden;
    position: relative;
}
.team-member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Often better for portraits */
    transition: transform var(--transition-speed-slow) ease, filter var(--transition-speed-medium) ease;
}
.team-member-card:hover .team-member-photo {
    transform: scale(1.08);
    filter: saturate(1.2);
}
.team-member-info {
    padding: 1.5rem;
    text-align: center;
    flex-grow: 1; /* Ensures info part takes remaining space if card height is fixed */
    background-color: var(--color-card-bg); /* Info section background */
}
.team-member-name {
    font-family: var(--font-secondary);
    font-size: var(--fs-xl);
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}
.team-member-title {
    font-size: var(--fs-sm);
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.team-member-bio {
    font-size: var(--fs-sm);
    color: var(--color-text-primary);
    line-height: 1.7;
}

/* Why Choose Us - Accordion Section */
.why-us-accordion {
    max-width: 800px;
    margin: 3rem auto 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden; /* To clip accordion item borders */
}
.accordion-item {
    border-bottom: 1px solid var(--color-border);
}
.accordion-item:last-child {
    border-bottom: none;
}
.accordion-header {
    width: 100%;
    background-color: var(--color-card-bg);
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-family: var(--font-primary);
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-speed-fast) ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header:hover, .accordion-header:focus-visible {
    background-color: var(--color-card-bg-hover);
}
.accordion-icon {
    margin-right: 1rem;
    color: var(--color-accent);
    font-size: 1.5em; /* Adjust for emoji/SVG size */
}
.accordion-toggle-icon {
    font-size: 1.5em;
    transition: transform var(--transition-speed-medium) cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: var(--color-accent);
}
.accordion-header[aria-expanded="true"] .accordion-toggle-icon {
    transform: rotate(45deg);
}
.accordion-content {
    background-color: var(--color-primary-bg); /* Or a slightly lighter dark shade */
    padding: 0 1.5rem; /* Padding will be applied on inner p */
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed-medium) ease-in-out, padding var(--transition-speed-medium) ease-in-out;
}
.accordion-content p {
    padding: 1.5rem 0;
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    line-height: 1.7;
    margin: 0;
}
.accordion-header[aria-expanded="true"] + .accordion-content {
    /* max-height will be set by JS, but this allows for transition */
    /* padding: 1.5rem; /* Apply padding when open */
}

/* Final CTA on About Page (uses .parallax-section styles) */
/* AKHIR css/style.css - TAMBAHAN UNTUK HALAMAN ABOUT US (about-us.html) */

/* css/style.css - TAMBAHAN UNTUK HALAMAN DESTINATIONS (destinations.html) */

/* Destination Page Hero (uses .page-hero-section styles, specific bg via inline style) */
/* No additional specific styles needed unless design dictates for this hero */

/* Optional Destinations Overview Section */
.visually-hidden-for-now { /* Helper class to hide section if not ready */
    display: none !important;
}
/* Styles for .interactive-map-placeholder would be custom based on chosen design */


/* Destination Detail Sections General Styling */
.destination-detail-section {
    position: relative; /* For absolute positioned backgrounds or overlays */
    overflow: hidden;
}

/* --- Layout Type A (e.g., Lombok, Bali, Java) --- */
/* Full-width background image/video, content overlayed or structured within */
.destination-detail-section.layout-type-a {
    min-height: 80vh; /* Ensure section has some height */
    display: flex; /* To center content vertically if needed */
    align-items: center;
    padding: var(--section-spacing) 0;
}

.destination-background-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: -2; /* Behind content and potential overlay */
    filter: brightness(0.6) contrast(1.1); /* Adjust for legibility */
}
.destination-detail-section.layout-type-a::after { /* Dark overlay for text legibility */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.55); /* Dark overlay */
    z-index: -1;
}

.destination-content-wrapper {
    position: relative; /* To be above pseudo-elements */
    z-index: 1;
    width: 100%;
}

.destination-intro-box {
    background-color: rgba(13, 13, 13, 0.7); /* Semi-transparent dark box for intro */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 2rem;
    border-radius: var(--border-radius-md);
    margin-bottom: 2.5rem;
    max-width: 700px; /* Control width of intro text */
}
.destination-intro-box.text-right {
    margin-left: auto; /* Align to right */
    text-align: right;
}
.destination-intro-box.text-right .destination-name::after {
    margin-left: auto; /* Align underline to right */
    margin-right: 0;
}


.destination-name {
    font-family: var(--font-secondary);
    font-size: var(--fs-h2);
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
    position: relative;
}
.destination-name.alt-font { /* For variety in some sections */
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.destination-name::after { /* Underline for destination name */
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--color-accent);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.destination-tagline {
    font-size: var(--fs-xl);
    color: var(--color-accent);
    font-weight: var(--fw-medium);
    margin-bottom: 1rem;
    font-style: italic;
}

.destination-description {
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    line-height: 1.7;
}

.destination-highlights-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.destination-highlights-gallery.alt-layout {
    /* Example alternative layout: 2 main images, 1 text block */
}
.destination-highlights-gallery .highlight-item {
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    text-align: center;
    padding: 1rem; /* For text-based highlights */
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.destination-highlights-gallery .highlight-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-accent);
}
.destination-highlights-gallery .highlight-item img {
    width: 100%;
    height: 150px; /* Adjust as needed */
    object-fit: cover;
    border-radius: var(--border-radius-sm); /* If image is direct child */
    margin-bottom: 0.5rem; /* If caption is below */
}
.highlight-caption {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-primary);
    margin-top: 0.5rem;
}
.highlight-icon {
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}
.highlight-title {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.3rem;
}
.highlight-desc {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.destination-cta-wrapper {
    text-align: center; /* Default */
}
.destination-cta-wrapper.text-right {
    text-align: right;
}
.destination-cta { /* Uses .btn .btn-primary styling */
    font-size: var(--fs-lg);
}


/* --- Layout Type B (e.g., Labuan Bajo, Bintan) --- */
/* More structured grid with distinct text and visual content areas */
.destination-detail-section.layout-type-b {
    padding: var(--section-spacing) 0;
}
.destination-grid-b {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first */
    gap: 2rem;
    align-items: center;
}
@media (min-width: 992px) {
    .destination-grid-b {
        grid-template-columns: 1.2fr 1fr; /* Text | Visuals */
        gap: 4rem;
    }
    .destination-grid-b.image-right .destination-visual-content-b {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
     .destination-grid-b.image-right .destination-text-content-b {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
}

.destination-text-content-b .destination-name {
    text-align: left;
}
.destination-text-content-b .destination-name::after {
    margin-left: 0; /* Align underline to left */
}
.destination-text-content-b .destination-description {
    margin-bottom: 2rem;
}

.destination-feature-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
}
.destination-feature-list li {
    font-size: var(--fs-lg);
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}
.feature-icon {
    font-size: 1.5em; /* For emoji/SVG */
    color: var(--color-accent);
    margin-right: 0.75rem;
    line-height: 1;
}

.destination-visual-content-b {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* For smaller items */
    grid-template-rows: auto auto;
    gap: 1rem;
    align-items: stretch; /* Make items fill height of their row */
}
.destination-visual-content-b .visual-item {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    position: relative; /* For play button */
}
.destination-visual-content-b .visual-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed-medium) ease;
}
.destination-visual-content-b .visual-item:hover img {
    transform: scale(1.05);
}
.destination-visual-content-b .visual-item.large {
    grid-column: 1 / -1; /* Span full width */
    grid-row: 1 / 2;
    aspect-ratio: 16/9;
}
.destination-visual-content-b .visual-item.small {
    aspect-ratio: 4/3; /* Or 1/1 for square */
}
.destination-visual-content-b .video-placeholder .play-button {
    /* Uses .play-button styles from main CSS */
    width: 50px; /* Adjust size for smaller context */
    height: 50px;
}
.destination-visual-content-b .video-placeholder .play-icon-svg {
    width: 24px; /* Adjust size */
    height: 24px;
}


/* Final CTA on Destinations Page (uses .parallax-section styles) */
#destinations-final-cta .section-title {
    color: var(--color-text-secondary);
}
#destinations-final-cta p {
    color: var(--color-text-primary);
    font-size: var(--fs-lg);
    margin-bottom: 2rem;
}

/* Ensure correct main content padding for this page too */
/* main#main-content rule is already in the CSS from about-us additions */
/* AKHIR css/style.css - TAMBAHAN UNTUK HALAMAN DESTINATIONS (destinations.html) */

/* css/style.css - TAMBAHAN UNTUK HALAMAN BLOG (blog.html) */

/* Blog Page Hero (uses .page-hero-section styles, specific bg via inline style) */
/* Optional: Specific styling for blog hero search if implemented */
.blog-hero-search {
    margin-top: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.blog-hero-search input[type="search"] {
    width: 100%;
    padding: 0.8em 3em 0.8em 1.5em; /* Space for icon */
    background-color: rgba(255,255,255,0.1);
    border: 1px solid var(--color-border-accent);
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
}
.blog-hero-search input[type="search"]::placeholder {
    color: var(--color-text-muted);
}
.blog-hero-search button[type="submit"] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 1.2em;
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
}
.blog-hero-search button[type="submit"] svg { /* Assuming SVG icon for search */
    width: 20px;
    height: 20px;
    fill: currentColor;
}


/* Blog Post Listing Section */
#blog-post-listing .section-title.visually-hidden + .blog-grid-layout {
    margin-top: 0; /* Remove top margin if section title is hidden */
}

.blog-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem; /* Gap between blog cards */
    margin-top: 3rem; /* If section title is visible */
}

/* Unconventional Blog Card Item */
.blog-card-item {
    background-color: var(--color-card-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: transform var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
    display: flex; /* To make the <a> take full height */
    flex-direction: column; /* For content flow within card */
    position: relative; /* For pseudo-elements or absolute links */
}
.blog-card-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 10px 30px rgba(147, 109, 46, 0.2); /* Accent shadow */
}

.blog-card-link-wrapper { /* The <a> tag wrapping the card content */
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure link wrapper takes full card height */
    color: var(--color-text-primary); /* Default text color for content */
    text-decoration: none;
}
.blog-card-link-wrapper:hover .blog-card-title {
    color: var(--color-accent); /* Title color change on hover */
}

.blog-card-image-wrapper {
    width: 100%;
    aspect-ratio: 16/10; /* Or 16/9, adjust as needed */
    overflow: hidden;
    position: relative; /* For potential overlay effects */
}
.blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed-slow) cubic-bezier(0.165, 0.84, 0.44, 1);
}
.blog-card-item:hover .blog-card-image {
    transform: scale(1.1);
}

.blog-card-content-wrapper {
    padding: 1.5rem 1.75rem 2rem; /* More padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows readmore to be pushed to bottom */
}

.blog-card-header {
    margin-bottom: 1rem;
}

.blog-card-category {
    display: inline-block;
    background-color: rgba(147, 109, 46, 0.15); /* Subtle accent bg */
    color: var(--color-accent);
    padding: 0.3em 0.8em;
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-card-title {
    font-family: var(--font-secondary);
    font-size: var(--fs-xl); /* Slightly larger title */
    color: var(--color-text-secondary);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    margin-bottom: 0.5rem;
    transition: color var(--transition-speed-fast) ease;
}

.blog-card-meta {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}
.blog-card-meta time {
    /* Specific styling for time if needed */
}

.blog-card-excerpt {
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Pushes readmore to bottom */
    /* Clamp text to a few lines if desired, requires JS or more CSS */
    /* display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden; */
}

.blog-card-readmore {
    display: inline-block;
    font-weight: var(--fw-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--fs-sm);
    margin-top: auto; /* Pushes to bottom of flex container */
    transition: transform var(--transition-speed-fast) ease;
}
.blog-card-link-wrapper:hover .blog-card-readmore span {
    transform: translateX(5px);
}

/* Pagination Styling */
.pagination-container {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between; /* Or center */
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
}
.pagination-link {
    color: var(--color-text-primary);
    padding: 0.5em 1em;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed-fast) ease, color var(--transition-speed-fast) ease, border-color var(--transition-speed-fast) ease;
    font-weight: var(--fw-medium);
}
.pagination-link:hover, .pagination-link:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent);
}
.pagination-link.disabled {
    color: var(--color-text-muted);
    border-color: var(--color-text-muted);
    opacity: 0.6;
    pointer-events: none;
}
.pagination-current {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* Subscribe Section (uses .dark-accent-bg) */
#blog-subscribe .section-title {
    /* Style specifically if needed on this bg */
}
.subscribe-form {
    max-width: 600px;
    margin: 2rem auto 0;
}
.subscribe-form-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
#subscribeEmail { /* General input styling from previous additions */
    flex-grow: 1;
    padding: 0.9em 1em;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    transition: border-color var(--transition-speed-medium) ease, box-shadow var(--transition-speed-medium) ease;
}
#subscribeEmail::placeholder {
    color: var(--color-text-muted);
}
#subscribeEmail:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(147, 109, 46, 0.3);
}
#subscribeEmail.input-error {
    border-color: var(--color-error) !important; 
}
#blog-subscribe .subscribe-form button[type="submit"] {
    padding: 0.9em 1.5em;
    white-space: nowrap;
    /* .btn .btn-primary styles apply */
}
#subscribeEmailError, #subscribeSuccessMessage {
    /* General .error-message and .success-message styles from main CSS apply */
    /* You can add specific alignment or margin here if needed for this form */
    text-align: center; /* Example */
    margin-top: 1rem;
}


/* Responsive adjustments for blog grid */
@media (max-width: 767px) {
    .blog-grid-layout {
        grid-template-columns: 1fr; /* Single column on smaller tablets/mobiles */
        gap: 2rem;
    }
    .blog-card-content-wrapper {
        padding: 1.25rem 1.5rem 1.5rem;
    }
    .blog-card-title {
        font-size: var(--fs-lg);
    }
}

/* css/style.css - CSS LENGKAP TAMBAHAN UNTUK PRIVACY POLICY & LEGAL TEXT PAGES */

/* Pastikan main content didorong ke bawah header fixed dengan benar */
main#main-content {
    padding-top: 85px; /* Sesuaikan nilai ini hingga konten hero tidak tertutup header */
                       /* Contoh: 80px, 85px, 90px, atau 95px */
}
@media (max-width: 991.98px) {
    main#main-content {
        padding-top: 75px; /* Sesuaikan juga untuk mobile jika header mobile lebih pendek */
    }
}


/* Hero Section for Simple Pages (like Privacy, Terms) */
.page-hero-section.simple-hero {
    height: auto; /* Tinggi hero ditentukan oleh konten dan padding internal */
    min-height: 280px; /* Tinggi minimal untuk memastikan ada ruang visual */
    background-image: none !important; /* Menghapus gambar latar dari gaya .page-hero-section umum */
    background-color: var(--color-card-bg); /* Warna solid gelap sebagai latar belakang */
    /* Alternatif: Gradasi Halus jika diinginkan */
    /* background-image: linear-gradient(135deg, #1a1a1a 0%, #080808 100%) !important; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Padding atas dan bawah untuk hero itu sendiri, bisa dihilangkan jika padding content cukup */
    /* padding-top: 2rem; */
    /* padding-bottom: 2rem; */
}

.page-hero-section.simple-hero .hero-overlay {
    display: none; /* Tidak perlu overlay tambahan jika latar belakang sudah gelap */
}

.page-hero-section.simple-hero .hero-content {
    padding-top: 3rem;    /* Padding atas di dalam konten hero untuk jarak dari atas hero */
    padding-bottom: 2.5rem; /* Padding bawah di dalam konten hero */
    width: 100%; 
}

.page-hero-section.simple-hero .page-hero-title {
    font-size: clamp(2rem, 5vw, 3.2rem); 
    text-shadow: none; 
    margin-bottom: 0.75rem; 
}

.page-hero-section.simple-hero .page-hero-subheadline {
    font-size: var(--fs-lg);
    color: var(--color-text-muted); 
    text-shadow: none;
    max-width: 600px; /* Batasi lebar subjudul agar mudah dibaca */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.page-hero-section.simple-hero .page-hero-subheadline time {
    display: block;
    font-size: var(--fs-sm);
    margin-top: 0.75rem; 
    opacity: 0.8;
}


/* Legal Text Container and Content Styling */
.legal-text-container {
    /* Untuk masa depan jika ingin ada layout sidebar + content: */
    /* display: grid; */
    /* grid-template-columns: 1fr; */ /* Default mobile */
    /* gap: 2rem; */
}
/*
@media (min-width: 1024px) {
    .legal-text-container .container { // Target container di dalam section
        display: grid;
        grid-template-columns: 250px 1fr; // Sidebar | Content
        gap: 3rem;
    }
}
*/

.legal-content {
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75; 
    /* Jika menggunakan layout grid dengan sidebar: */
    /* max-width: none; */
    /* grid-column: 2 / 3; // Jika sidebar adalah kolom pertama */
}

.legal-intro {
    font-size: var(--fs-lg);
    color: var(--color-text-primary);
    margin-bottom: 2.5rem; /* Tambah spasi setelah intro */
    border-left: 4px solid var(--color-accent); /* Pertebal border */
    padding-left: 1.5rem;
    font-style: italic;
    background-color: rgba(147, 109, 46, 0.05); /* Latar belakang sangat halus untuk intro */
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.legal-content section {
    margin-bottom: 3rem; 
}

.legal-section-title { /* Untuk H3 di teks legal */
    font-family: var(--font-secondary);
    font-size: clamp(1.5rem, 3.5vw, 2rem); /* Sesuaikan ukuran H3 legal */
    color: var(--color-text-secondary);
    margin-top: 2.5rem; 
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem; /* Perbesar padding bawah */
    border-bottom: 2px solid var(--color-border-accent); 
    font-weight: var(--fw-semibold);
    letter-spacing: 0.5px;
}

.legal-content h4 {
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    font-size: calc(var(--fs-lg) * 1.1); /* Sedikit lebih besar dari paragraf */
    color: var(--color-text-secondary);
    margin-top: 2rem; /* Tambah spasi atas H4 */
    margin-bottom: 1rem;
}

.legal-content p {
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    margin-bottom: 1.25rem;
}

.legal-content ul {
    list-style: none; 
    padding-left: 1.5rem; 
    margin-bottom: 1.25rem;
}
.legal-content ul li {
    position: relative;
    padding-left: 1.75em; /* Tambah ruang untuk bullet yang lebih besar */
    margin-bottom: 0.85rem; /* Tambah spasi antar item list */
    color: var(--color-text-primary);
}
.legal-content ul li::before {
    content: '▹'; /* Ganti bullet dengan karakter yang lebih menarik */
    color: var(--color-accent);
    position: absolute;
    left: 0;
    top: 0.05em; /* Penyesuaian vertikal halus */
    font-size: 1.4em; 
    line-height: inherit;
    font-weight: bold;
}
.legal-content ul ul { 
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    padding-left: 1rem; /* Indentasi lebih lanjut untuk sub-list */
}
.legal-content ul li ul li::before {
    content: '›'; /* Bullet berbeda untuk sub-list */
    font-size: 1.5em;
}


.legal-content a,
.privacy-contact-link { 
    color: var(--color-accent);
    text-decoration: none; /* Hapus garis bawah default */
    border-bottom: 1px solid var(--color-border-accent); /* Garis bawah kustom */
    padding-bottom: 1px; /* Jarak garis bawah dari teks */
    transition: color var(--transition-speed-fast) ease, border-bottom-color var(--transition-speed-fast) ease;
}
.legal-content a:hover, .legal-content a:focus-visible,
.privacy-contact-link:hover, .privacy-contact-link:focus-visible {
    color: var(--color-accent-darker);
    border-bottom-color: var(--color-accent-darker);
}

/* Opsional: Sticky Sidebar untuk Navigasi On-Page */
.legal-sidebar {
    /*
    position: -webkit-sticky;
    position: sticky;
    top: 100px; 
    width: 250px; 
    padding: 1rem;
    border-left: 1px solid var(--color-border);
    max-height: calc(100vh - 120px); 
    overflow-y: auto;
    grid-column: 1 / 2; // Jika menggunakan layout grid
    align-self: start; // Agar menempel di atas
    */
}
.legal-sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.legal-sidebar nav ul li a {
    display: block;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.25rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    border-left: 3px solid transparent; /* Indikator aktif */
    transition: color 0.2s ease, border-left-color 0.2s ease, background-color 0.2s ease;
    border-radius: var(--border-radius-sm);
}
.legal-sidebar nav ul li a:hover {
    color: var(--color-text-secondary);
    background-color: rgba(147, 109, 46, 0.1);
}
.legal-sidebar nav ul li a.active-legal-section { 
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    font-weight: var(--fw-semibold);
    background-color: rgba(147, 109, 46, 0.05);
}

/* css/style.css - PEMBARUAN CSS HALAMAN 404 */

.page-404-body {
    background-color: var(--color-primary-bg);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column; /* Mengizinkan footer untuk berada di bawah jika konten pendek */
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    overflow-x: hidden; /* Hanya hidden untuk horizontal */
    overflow-y: auto; /* Izinkan scroll vertikal jika konten melebihi viewport */
    font-family: var(--font-primary);
}

.notfound-container {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 700px; 
    width: 100%;
    padding: 2rem;
    display: flex; /* Menggunakan flex untuk mengatur konten internal */
    flex-direction: column; /* Konten ditumpuk secara vertikal */
    align-items: center; /* Pusatkan item flex */
}

/* Area untuk visual/grafis */
.notfound-visual-area {
    margin-bottom: 2rem; 
    position: relative;
    height: 120px; /* Disesuaikan agar tidak terlalu dominan */
    width: 120px; /* Beri lebar agar terpusat dengan benar */
    display: flex;
    align-items: center;
    justify-content: center;
}

.notfound-background-effect { 
    position: absolute;
    top: -50%; /* Perluas area efek */
    left: -50%;
    width: 200%;
    height: 200%;
    overflow: visible; /* Izinkan partikel keluar dari batas ini jika diperlukan */
    z-index: -1;
}
.notfound-background-effect::before,
.notfound-background-effect::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--color-text-muted);
    border-radius: 50%;
    opacity: 0;
    animation: sparkle 10s infinite linear; /* Durasi lebih lama */
}
.notfound-background-effect::before {
    top: 30%; left: 20%;
    animation-delay: 0s;
}
.notfound-background-effect::after {
    top: 60%; left: 75%;
    animation-delay: 5s; 
    width: 3px; height: 3px; 
}
/* Untuk lebih banyak bintang, tambahkan span di HTML atau lebih banyak pseudo-elements */
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0.5) translateY(0px); }
    50% { opacity: 0.8; transform: scale(1.2) translateY(-10px); } /* Sedikit gerakan naik */
}


.notfound-graphic {
    /* Styling untuk SVG kompas atau gambar kustom lainnya */
}
.notfound-compass-svg {
    width: 100px; 
    height: 100px;
    animation: gentleSpin 25s linear infinite alternate; 
}
.notfound-compass-svg .compass-needle-n,
.notfound-compass-svg .compass-needle-n-head {
    transform-origin: 50px 50px; 
    animation: compassWobble 7s ease-in-out infinite alternate; /* Sedikit lebih cepat */
}
.compass-text {
    font-family: var(--font-secondary);
    font-weight: bold;
    fill: var(--color-accent); /* Pastikan warna teks kompas terlihat */
}
/* Pastikan fill dan stroke pada SVG di HTML juga mendukung visibilitas */
.notfound-compass-svg circle[stroke="var(--color-accent)"] { opacity: 0.5; }
.notfound-compass-svg circle[stroke="var(--color-text-muted)"] { opacity: 0.7; }


.notfound-content {
    width: 100%; /* Ambil lebar penuh dari .notfound-container */
}

.notfound-title {
    font-family: var(--font-secondary); 
    font-size: clamp(5rem, 18vw, 10rem); /* Ukuran disesuaikan agar tidak terlalu besar di mobile */
    font-weight: var(--fw-bold);
    color: var(--color-text-secondary);
    line-height: 1; /* Disesuaikan */
    margin-bottom: 1rem; /* Jarak ke subjudul */
    position: relative;
    display: flex; 
    justify-content: center;
    align-items: baseline;
}
.notfound-title span {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    margin: 0 0.05em; /* Jarak antar digit */
}
.notfound-title span:hover {
    transform: scale(1.1) rotate(-3deg);
    color: var(--color-accent);
}
.notfound-title .digit-0 {
    animation: glitchEffect 4s infinite steps(1, end) alternate; /* Dibuat alternate */
    position: relative;
}
@keyframes glitchEffect {
    0%, 100% { transform: translateX(0) skew(0); color: var(--color-text-secondary); }
    20% { transform: translateX(-2px) skew(-3deg); color: var(--color-accent); }
    40% { transform: translateX(2px) skew(3deg); color: var(--color-text-secondary); }
    60% { transform: translateX(-1px) skew(-2deg); color: var(--color-text-muted); }
    80% { transform: translateX(0) skew(0); color: var(--color-text-secondary); }
}


.notfound-subtitle {
    font-family: var(--font-secondary);
    font-size: clamp(1.5rem, 5vw, 2.25rem); /* Disesuaikan */
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    font-weight: var(--fw-semibold);
}

.notfound-message {
    font-size: var(--fs-lg);
    line-height: 1.7;
    color: var(--color-text-primary);
    margin-bottom: 3rem; /* Jarak lebih besar ke tombol */
    max-width: 550px; 
    margin-left: auto;
    margin-right: auto;
}

.notfound-actions {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 1.25rem; /* Jarak antar tombol sedikit ditambah */
    margin-bottom: 3rem; /* Jarak ke footer links */
    width: 100%; /* Pastikan kontainer tombol mengambil lebar */
}

.notfound-action-btn {
    padding: 0.9em 2em; 
    min-width: 220px; /* Lebar minimal tombol disesuaikan */
    flex-grow: 0; /* Jangan biarkan tombol memanjang secara berlebihan jika hanya ada satu baris */
    flex-shrink: 0;
}
/* Kontras tombol sudah diatur di .btn-primary dan .btn-secondary global */


.notfound-footer-links {
    font-size: var(--fs-base); /* Sedikit diperbesar untuk keterbacaan */
    color: var(--color-text-muted);
    margin-top: 2rem; /* Jarak dari tombol jika konten sangat pendek */
    width: 100%; /* Ambil lebar penuh */
}
.notfound-footer-links p {
    margin-bottom: 0.75rem; /* Jarak antar baris di footer */
}
.notfound-footer-links a {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px; /* Sedikit lebih jauh */
}
.notfound-footer-links a:hover {
    color: var(--color-accent);
}
.notfound-copyright {
    margin-top: 2rem; /* Jarak dari link kontak */
    font-size: var(--fs-sm); 
    opacity: 0.8; /* Sedikit lebih jelas */
}

/* Responsif untuk halaman 404 */
@media (max-width: 767px) {
    .notfound-container {
        padding: 1rem; /* Kurangi padding container di mobile */
    }
    .notfound-title {
        font-size: clamp(4rem, 20vw, 6rem); /* Kurangi ukuran 404 di mobile */
        margin-bottom: 0.5rem;
    }
    .notfound-subtitle {
        font-size: clamp(1.25rem, 6vw, 1.75rem); /* Ukuran subjudul mobile */
    }
    .notfound-message {
        font-size: var(--fs-base);
        margin-bottom: 2rem;
    }
    .notfound-actions {
        flex-direction: column; 
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .notfound-action-btn {
        width: 100%;
        max-width: 320px; 
        min-width: auto; /* Hapus min-width agar bisa full */
    }
    .notfound-visual-area {
        height: 100px;
        width: 100px;
        margin-bottom: 1.5rem;
    }
    .notfound-compass-svg {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    .page-404-body {
        padding: 1rem; /* Kurangi padding body di mobile kecil */
    }
     .notfound-title {
        font-size: clamp(3.5rem, 22vw, 5rem);
    }
    .notfound-subtitle {
        font-size: clamp(1.1rem, 5.5vw, 1.5rem);
    }
}

/* 22. Responsive Design (Media Queries) */

@media (max-width: 991.98px) {
    :root {
        --section-spacing: clamp(3rem, 8vh, 6rem);
    }
    .header-container {
        padding-left: var(--padding-container-x);
        padding-right: var(--padding-container-x);
    }
    .nav-toggle {
        display: block;
    }
    #main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(75vw, 350px);
        height: 100vh;
        background-color: var(--color-card-bg);
        padding: 6rem 2rem 2rem;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        transition: right var(--transition-speed-medium) ease-in-out;
        overflow-y: auto;
    }
    #main-nav.nav-open {
        right: 0;
    }
    #main-nav .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    #main-nav .nav-link {
        font-size: var(--fs-lg);
        padding: 0.8rem 0;
        width: 100%;
    }
    #main-nav .nav-link::after {
        left: 0;
        bottom: 0;
    }
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--color-border);
        background-color: transparent;
        padding-left: 1rem;
        width: 100%;
        display: none;
    }
    .nav-item.dropdown.open .dropdown-menu {
        display: block;
    }
    .dropdown-menu .dropdown-link {
        padding: 0.6rem 0;
    }

    .hero-content {
        padding: 0 var(--padding-container-x);
    }
    #hero-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }
    .hero-title-sub {
         font-size: clamp(1rem, 4vw, 1.5rem);
    }
    .subheadline {
        font-size: var(--fs-base);
    }
    .hero-cta {
        font-size: var(--fs-base);
        padding: 0.8em 2em;
    }

    .services-grid, .portfolio-grid, .video-testimonials-grid, .testimonials-grid, .destinations-layout, .blog-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .contact-info-column #contact-title {
        text-align: center;
    }
    .contact-info-column #contact-title::after {
        margin: 0.75rem auto 0;
    }
    .contact-info-column .section-intro {
        text-align: center;
    }
    .contact-details {
        align-items: center;
        text-align: center; 
    }
    .contact-item {
        justify-content: center; 
        flex-direction: column;
        gap: 0.5rem;
    }
    .contact-item address {
        text-align: center;
    }


    .footer-top {
        flex-direction: column;
    }
    .footer-socials {
        margin-top: 1rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --padding-container-x: clamp(0.8rem, 4vw, 1.5rem);
        --section-spacing: clamp(2.5rem, 6vh, 4rem);
    }
    .section-title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }
    .section-intro {
        font-size: var(--fs-base);
        margin-bottom: 2rem;
    }

    #main-header {
        padding: 0.4rem 0; /* Reduced padding for mobile */
    }
    .logo-link .logo-image {
        height: 50px; 
    }

    #hero {
        min-height: 550px;
    }
    .hero-cta-group {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    .hero-cta {
        width: 100%;
        max-width: 300px;
    }
    .scroll-down-indicator {
        bottom: 20px;
    }

    .service-card {
        padding: 2rem 1.5rem;
    }

    .portfolio-grid, .video-testimonials-grid, .testimonials-grid, .destinations-layout, .blog-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        padding: 1.5rem;
    }

    .destination-card-content {
        padding: 1.5rem 1rem 1rem;
        transform: translateY(0);
        opacity: 1;
    }
    .destination-card-description {
        max-height: 100px;
    }

    .contact-form-column {
        padding: 1.5rem;
    }
    .form-group input, .form-group textarea {
        padding: 0.8em;
    }

    #backToTopBtn {
        bottom: 15px;
        left: 15px;
        width: 40px;
        height: 40px;
    }
    .back-to-top-icon {
        width: 20px;
        height: 20px;
    }

    .close-modal-btn {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        font-size: 1.5rem;
    }
    .video-modal-content {
        width: 95%;
    }

    .footer-container {
        gap: 1.5rem;
    }
    .footer-bottom {
        padding-top: 1.5rem;
    }
    .footer-nav {
        flex-direction: column;
        gap: 0.5rem;
    }
}