:root {
    /* Warna Primer (dari teks "ARASY" dan bagian gelap grafis) */
    --arasy-primary: #0D5C52; 
    --arasy-primary-darker: #0A473F;
    
    /* Warna Aksen Oranye (dari "TOUR AND TRAVEL" dan jadi aksen utama) */
    --arasy-accent-orange: #F5A623;
    --arasy-accent-orange-darker: #D48E1F;

    /* Variabel --arasy-secondary-accent SEKARANG MENUNJUK ke warna oranye sebagai aksen utama.
       Ini menggantikan peran "ungu muda" atau teal sekunder sebelumnya. */
    --arasy-secondary-accent: var(--arasy-accent-orange);
    --arasy-secondary-accent-darker: var(--arasy-accent-orange-darker);

    /* Warna Netral & Teks */
    --arasy-text-on-primary: #ffffff; /* Teks putih di atas hijau */
    --arasy-text-on-accent: #ffffff;  /* Teks putih di atas oranye */
    /* Pertimbangkan --arasy-text-on-accent: #333333; jika oranye terlalu terang untuk teks putih */
    --arasy-text-dark: #2c3e50;
    --arasy-text-light: #f8f9fa;
    --arasy-bg-soft: #f4f9f8; /* Background sangat lembut dari turunan hijau primer */
    --arasy-border-soft: #d1e7e4;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--arasy-text-dark);
    background-color: #fff; 
}

a {
    color: var(--arasy-secondary-accent); /* Link utama pakai warna aksen (ORANYE) */
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--arasy-primary); /* Hover link menjadi warna primer (hijau tua) */
}

/* Header & Navbar */
.header {
    background-color: var(--arasy-primary);
    padding: 15px 0;
    transition: all 0.5s;
    z-index: 997;
}
.header .logo {
    display: flex;
    align-items: center;
}
.header .logo img {
     max-height: 50px;
     margin-right: 10px;
     transition: all 0.3s ease;
}
.header .logo h1, 
.header .logo a.brand-name {
    color: var(--arasy-text-on-primary);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    font-family: 'Raleway', sans-serif;
}

.navbar ul > li > a {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.navbar ul > li > a:hover,
.navbar ul > li > a.active,
.navbar ul > li.active > a {
    color: var(--arasy-text-on-primary);
}

/* Tombol "Get Started" di Navbar menggunakan aksen ORANYE */
.navbar .getstarted { 
    background: var(--arasy-accent-orange);
    color: var(--arasy-text-on-accent);
    border: 2px solid var(--arasy-accent-orange);
    padding: 8px 25px;
    border-radius: 50px;
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.navbar .getstarted:hover {
    background: var(--arasy-accent-orange-darker);
    border-color: var(--arasy-accent-orange-darker);
    color: var(--arasy-text-on-accent);
}
.navbar .dropdown ul {
    background: var(--arasy-primary); 
}
.navbar .dropdown ul a {
    color: rgba(255, 255, 255, 0.9);
}
.navbar .dropdown ul a:hover {
    color: var(--arasy-text-on-primary);
    background-color: var(--arasy-primary-darker); 
}

.mobile-nav-toggle {
    color: var(--arasy-text-on-primary);
}

/* Tombol Utama (CTA, Submit, Get Started di luar navbar) menggunakan aksen ORANYE */
.btn-get-started, 
.php-email-form button[type="submit"],
.cta .cta-btn,
.btn-primary-custom /* Tambahkan class .btn-primary-custom jika ada tombol primer lain */
 {
    background-color: var(--arasy-accent-orange);
    color: var(--arasy-text-on-accent);
    border: 2px solid var(--arasy-accent-orange);
    padding: 10px 30px; 
    border-radius: 6px; /* Atau 50px jika ingin semua tombol utama rounded */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-weight: 600;
    text-transform: uppercase; /* Membuat teks tombol lebih tegas */
    letter-spacing: 0.5px;
}
.btn-get-started:hover,
.php-email-form button[type="submit"]:hover,
.cta .cta-btn:hover,
.btn-primary-custom:hover {
    background-color: var(--arasy-accent-orange-darker);
    border-color: var(--arasy-accent-orange-darker);
    color: var(--arasy-text-on-accent);
}

/* Tombol "Read More" atau tombol sekunder (menggunakan warna primer, BUKAN oranye) */
.read-more, .btn-secondary-custom {
    background-color: transparent;
    color: var(--arasy-primary);
    border: 2px solid var(--arasy-primary);
    padding: 10px 30px; 
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-weight: 600;
}
.read-more:hover, .btn-secondary-custom:hover {
    background-color: var(--arasy-primary);
    color: var(--arasy-text-on-primary);
    border-color: var(--arasy-primary);
}


/* Section Titles */
.section-title h2, .section-title h3, .section-header h2, .section-header h3 {
    color: var(--arasy-primary);
}
.section-title p, .section-header p {
    color: #587169; 
}
.section-title h2::after, .section-header h2::after {
    background: var(--arasy-bg-soft); 
}
/* Garis aksen di bawah judul section menggunakan ORANYE */
.section-title h2::after::after, .section-header h2::after::after {
     background: var(--arasy-accent-orange); 
}

/* Icon Box & Features Items (Ikon) menggunakan aksen ORANYE */
.icon-box i,
.features-item i,
.info-item i, 
.stats-item i {
    color: var(--arasy-accent-orange); 
    background-color: #fff7eb; /* Background ikon ORANYE SANGAT MUDA (turunan dari #F5A623) */
    padding: 15px; 
    border-radius: 50%; 
    width: 60px; 
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease-out;
    box-shadow: 0 4px 10px rgba(245, 166, 35, 0.1); /* Shadow lembut oranye */
}
.icon-box.highlight {
    border-color: var(--arasy-accent-orange); 
    box-shadow: 0 0 25px 0 rgba(245, 166, 35, 0.2); 
}
 .icon-box:hover,
 .features-item:hover {
     border-color: var(--arasy-accent-orange); 
     transform: translateY(-5px); 
 }
 .icon-box:hover h3 a, .features-item:hover h4 a {
    color: var(--arasy-primary); 
 }
 .icon-box:hover i, .features-item:hover i {
    background-color: var(--arasy-accent-orange); 
    color: var(--arasy-text-on-accent); 
    transform: scale(1.1); 
 }


/* Hero Section */
.hero h1 {
     color: var(--arasy-primary); 
}
.hero p {
    color: var(--arasy-text-dark);
}


/* Section dengan Background Gelap */
.section.dark-background,
#hero.dark-background,
#testimonials.dark-background,
#call-to-action.dark-background {
     background-color: var(--arasy-primary); 
}
.section.dark-background h1, .section.dark-background h2, .section.dark-background h3, 
.section.dark-background p, .section.dark-background .icon-box h3, .section.dark-background .testimonial-item h3,
.section.dark-background .testimonial-item h4 {
    color: var(--arasy-text-light); 
}
/* Ikon di section gelap tetap menggunakan ORANYE agar menonjol */
.section.dark-background .icon-box i {
    background-color: rgba(255,255,255,0.1); 
    color: var(--arasy-accent-orange); 
}
 .section.dark-background .testimonial-item .stars i.bi-star-fill {
     color: var(--arasy-accent-orange); 
 }
 .section.dark-background .testimonial-item .stars i.bi-star {
     color: rgba(245, 166, 35, 0.5); 
 }
.section.dark-background .testimonial-item .quote-icon-left,
.section.dark-background .testimonial-item .quote-icon-right {
    color: rgba(255, 255, 255, 0.5); 
}

#hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.zoom-effect {
  animation: zoomInOut 20s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
}
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Overlay */
  z-index: 2;
}

.logo-floating {
  animation: float 4s ease-in-out infinite;
  z-index: 3;
  position: relative;
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.hero .container {
  position: relative;
  z-index: 3;
}

     
     
/* Footer */
.footer {
    background-color: var(--arasy-bg-soft); 
    color: var(--arasy-text-dark);
    padding: 60px 0 30px 0;
    font-size: 14px;
    border-top: 5px solid var(--arasy-primary); 
}
.footer .footer-top {
    /* Struktur opsional */
}
.footer h4, .footer .footer-info h3 {
    color: var(--arasy-primary);
    font-size: 18px;
    font-weight: 600;
    position: relative;
    padding-bottom: 12px;
}

/* Social links di Footer menggunakan aksen ORANYE */
.footer .social-links a {
    background-color: var(--arasy-accent-orange); 
    color: var(--arasy-text-on-accent); 
    border: 1px solid var(--arasy-accent-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 6px;
    transition: all 0.3s;
}
.footer .social-links a:hover {
    background-color: var(--arasy-primary); 
    border-color: var(--arasy-primary);
    color: var(--arasy-text-on-primary); 
}

/* Ikon pada list link di Footer menggunakan ORANYE */
.footer .footer-links ul li, 
.footer .widget_nav_menu ul li, 
.footer .footer-contact p {
    padding: 8px 0; 
    display: flex;
    align-items: center;
}
.footer .footer-links ul i,
.footer .widget_nav_menu ul i,
.footer .footer-contact p i {
    padding-right: 6px; 
    color: var(--arasy-accent-orange); 
    font-size: 14px;
    line-height: 0; 
}

.footer .footer-links ul a,
.footer .widget_nav_menu ul a {
    color: var(--arasy-text-dark); 
    transition: 0.3s;
    display: inline-block;
    line-height: 1;
}
/* Link di footer saat hover menjadi ORANYE */
.footer .footer-links ul a:hover,
.footer .widget_nav_menu ul a:hover {
    color: var(--arasy-accent-orange); 
}

.footer .copyright, .footer .credits {
    padding-top: 20px;
    text-align: center;
    color: #555; 
}
.footer .credits a {
    color: var(--arasy-primary); 
    transition: 0.3s;
}
/* Link credits saat hover menjadi ORANYE */
.footer .credits a:hover {
    color: var(--arasy-accent-orange); 
}


/* Tombol Scroll Top menggunakan aksen ORANYE */
.scroll-top, #scroll-top {
    background-color: var(--arasy-accent-orange); 
    color: var(--arasy-text-on-accent); 
}
.scroll-top:hover, #scroll-top:hover {
    background-color: var(--arasy-primary); 
    color: var(--arasy-text-on-primary);
}

   
    /* bantu style */
    .bimbingan-manasik-page .section-title h2 {
        color: #333; /* Sesuaikan dengan tema Anda */
        font-weight: 700;
    }
    .manasik-hero-image {
        width: 100%;
        max-height: 450px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 30px;
    }
    .manasik-content-block {
        background-color: #fff;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08);
        margin-bottom: 30px;
    }
    .manasik-content-block h3 {
        font-size: 1.5rem; /* 24px */
        color: var(--accent-color); /* Gunakan variabel warna dari main2.css jika ada, atau definisikan */
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--accent-color-light, #eef0f2); /* Warna border lebih soft */
    }
    .manasik-content-block p, 
    .manasik-content-block .jadwal_manasik_content, 
    .manasik-content-block .materi_manasik_content {
        line-height: 1.7;
        color: #555;
    }
    .jadwal_manasik_content ul, .materi_manasik_content ul {
        padding-left: 20px; /* Indentasi untuk list */
    }
    .jadwal_manasik_content ul li, .materi_manasik_content ul li {
        margin-bottom: 8px;
    }
    .materi_manasik_content .bi {
        margin-right: 8px;
        color: var(--accent-color, #0d6efd); /* Warna ikon */
    }
    .video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        border-radius: 8px;
    }
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .terakhir-diperbarui {
        font-size: 0.85em;
        color: #777;
        margin-top: 15px;
    }
    /* Menyesuaikan dengan struktur template main2.css jika ada section-bg */
    .section-bg {
        background-color: #f7f8f9; /* Warna background lembut untuk section */
    }
    /* Breadcrumbs styling (jika ada di header.php) */
    .breadcrumbs { margin-bottom: 20px; } 
    .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .breadcrumbs ol li + li { padding-left: 10px; }
    .breadcrumbs ol li + li::before { display: inline-block; padding-right: 10px; color: #6c757d; content: "/"; }

    .flipbook-manasik-container {
    margin: 30px auto; 
    width: 90%; 
    max-width: 900px; /* Anda mungkin ingin ini lebih kecil untuk tampilan single page agar tidak terlalu lebar */
                     /* Misal: max-width: 700px; atau 800px; */
    min-height: 250px; 
    position: relative; 
}
#flipbook-manasik {
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    background-color: #fdfdfd; 
}
#flipbook-manasik .page {
    background-color:white;
    background-repeat:no-repeat;
    background-size: contain; 
    background-position: center center; 
    overflow: hidden; 
}
    #flipbook-manasik .page img { /* Jika Anda memasukkan tag <img> langsung di dalam .page */
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
    }
    #flipbook-manasik .odd { /* Halaman ganjil (kanan) */
        /* Bisa ditambahkan style khusus jika perlu */
    }
    #flipbook-manasik .even { /* Halaman genap (kiri) */
        /* Bisa ditambahkan style khusus jika perlu */
    }
    /* Styling untuk shadow saat halaman dibalik (opsional, Turn.js mungkin sudah punya) */
    #flipbook-manasik .shadow{
        -webkit-box-shadow:0 4px 10px #666;
        -moz-box-shadow:0 4px 10px #666;
        -ms-box-shadow:0 4px 10px #666;
        -o-box-shadow:0 4px 10px #666;
        box-shadow:0 4px 10px #666;
    }
    /* Tombol Navigasi Flipbook (Opsional) */
    .flipbook-nav {
        text-align: center;
        margin-top: 15px;
    }
    .flipbook-nav button {
        background-color: var(--arasy-primary);
        color: var(--arasy-text-on-primary);
        border: none;
        padding: 8px 15px;
        margin: 0 5px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9em;
    }
    .flipbook-nav button:hover {
        background-color: var(--arasy-primary-darker);
    }
    .flipbook-nav button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }