/*====================================================

PADEPOKAN ABAH ANOM
Version 1.0

====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap');

:root{

    --gold:#d8b45a;
    --gold2:#b7892d;
    --white:#ffffff;
    --black:#050505;
    --dark:#0b0b0b;
    --card:#111111;
    --border:rgba(216,180,90,.25);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#050505;
    color:#fff;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;

}

/*=========================
SCROLLBAR
=========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#000;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);
    border-radius:50px;

}

/*=========================
BACKGROUND
=========================*/

.background{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-10;

    background:
    radial-gradient(circle at top,#2f2413 0%,#090909 45%,#000 100%);

}

/*=========================
OVERLAY
=========================*/

.overlay{

    position:absolute;
    inset:0;

    background:

    linear-gradient(to bottom,

    rgba(0,0,0,.35),

    rgba(0,0,0,.70));

}

/*=========================
FOG
=========================*/

.fog{

    position:absolute;

    width:900px;

    height:900px;

    filter:blur(70px);

    opacity:.18;

}

.fog-left{

    left:-250px;

    bottom:-180px;

    background:#b08fff;

    animation:fogLeft 20s linear infinite alternate;

}

.fog-right{

    right:-250px;

    top:80px;

    background:#8f5dff;

    animation:fogRight 25s linear infinite alternate;

}

@keyframes fogLeft{

0%{

transform:translateX(0);

}

100%{

transform:translateX(120px);

}

}

@keyframes fogRight{

0%{

transform:translateY(0);

}

100%{

transform:translateY(80px);

}

}

/*=========================
MOON
=========================*/

.moon{

    position:absolute;

    right:7%;

    top:90px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    #fff 0%,

    #ddd 40%,

    #aaa 100%);

    box-shadow:

    0 0 120px rgba(255,255,255,.15),

    0 0 250px rgba(255,255,255,.08);

}

/*=========================
PARTICLE
=========================*/

.particles{

position:absolute;

inset:0;

background-image:

radial-gradient(#ffffff 1px,transparent 1px);

background-size:120px 120px;

opacity:.12;

}

/*=========================
PRELOADER
=========================*/

#preloader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#000;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:99999;

}

.loader-logo{

width:120px;

height:120px;

border-radius:50%;

overflow:hidden;

margin-bottom:25px;

border:2px solid var(--gold);

animation:rotateLogo 10s linear infinite;

}

.loader-logo img{

width:100%;

height:100%;

object-fit:cover;

}

@keyframes rotateLogo{

100%{

transform:rotate(360deg);

}

}

#preloader h2{

font-family:'Cinzel',serif;

letter-spacing:3px;

color:var(--gold);

font-size:30px;

margin-bottom:10px;

}

#preloader p{

color:#ccc;

}

/*=========================
HEADER
=========================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:20px 0;

z-index:999;

background:rgba(0,0,0,.18);

backdrop-filter:blur(15px);

border-bottom:1px solid rgba(255,255,255,.05);

}

.container{

width:1200px;

max-width:92%;

margin:auto;

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

width:55px;

}

.logo h2{

font-family:'Cinzel',serif;

font-size:22px;

color:var(--gold);

}

.logo span{

font-size:13px;

letter-spacing:3px;

color:#ddd;

}

nav ul{

display:flex;

list-style:none;

gap:35px;

}

nav ul li a{

text-decoration:none;

color:#fff;

font-size:15px;

transition:.35s;

letter-spacing:1px;

}

nav ul li a:hover{

color:var(--gold);

}

.menu{

display:none;

font-size:28px;

cursor:pointer;

}
/*======================================================
HERO
======================================================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding-top:120px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/*=========================
HERO KIRI
=========================*/

.hero-left{

    position:relative;

    z-index:10;

}

.subtitle{

    display:inline-block;

    color:var(--gold);

    font-size:15px;

    letter-spacing:4px;

    margin-bottom:25px;

}

.hero-left h1{

    font-family:'Cinzel',serif;

    font-size:78px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:20px;

    text-transform:uppercase;

    text-shadow:

    0 0 20px rgba(216,180,90,.20),

    0 0 50px rgba(216,180,90,.12);

}

.hero-left h3{

    color:var(--gold);

    font-size:24px;

    font-weight:500;

    margin-bottom:20px;

    letter-spacing:2px;

}

.line{

    width:130px;

    height:3px;

    background:linear-gradient(to right,var(--gold),transparent);

    margin:30px 0;

}

.hero-left p{

    color:#d5d5d5;

    font-size:17px;

    line-height:2;

    margin-bottom:40px;

}

/*=========================
BUTTON
=========================*/

.hero-button{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 42px;

    background:linear-gradient(135deg,#d8b45a,#b7892d);

    color:#111;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

    box-shadow:

    0 10px 35px rgba(216,180,90,.35);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:

    0 20px 50px rgba(216,180,90,.45);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 42px;

    border:1px solid var(--gold);

    color:var(--gold);

    text-decoration:none;

    border-radius:50px;

    transition:.35s;

}

.btn-outline:hover{

    background:var(--gold);

    color:#111;

}

/*=========================
INFO AUDIO
=========================*/

.audio-info{

    margin-top:35px;

    color:#bbb;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:14px;

}

.audio-info i{

    color:var(--gold);

}

/*=========================
KANAN HERO
=========================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.altar{

    position:relative;

    width:520px;

    animation:floatImage 6s ease-in-out infinite;

}

.altar img{

    width:100%;

    display:block;

    filter:

    drop-shadow(0 0 35px rgba(216,180,90,.18));

}

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================
CAHAYA BELAKANG ALTAR
=========================*/

.hero-right::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(216,180,90,.18),

    transparent 70%);

    filter:blur(40px);

    z-index:-1;

}

/*=========================
MUSIC BUTTON
=========================*/

#musicButton{

    position:fixed;

    right:30px;

    bottom:160px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:linear-gradient(135deg,#d8b45a,#b7892d);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    color:#111;

    font-size:22px;

    z-index:999;

    transition:.35s;

    box-shadow:

    0 10px 35px rgba(216,180,90,.35);

}

#musicButton:hover{

    transform:scale(1.1);

}

/*=========================
SECTION TITLE
=========================*/

.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading span{

    color:var(--gold);

    letter-spacing:4px;

    font-size:14px;

}

.section-heading h2{

    font-family:'Cinzel',serif;

    font-size:48px;

    margin:20px 0;

}

.gold-line{

    width:120px;

    height:3px;

    background:var(--gold);

    margin:20px auto;

}

.section-heading p{

    max-width:700px;

    margin:auto;

    color:#d5d5d5;

    line-height:1.9;

}
/*======================================================
LAYANAN
======================================================*/

.services{

    position:relative;

    padding:120px 0;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.service-card{

    position:relative;

    padding:45px 35px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(216,180,90,.18);

    border-radius:20px;

    backdrop-filter:blur(15px);

    overflow:hidden;

    transition:.45s;

}

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(90deg,

    transparent,

    rgba(216,180,90,.12),

    transparent);

    transition:.7s;

}

.service-card:hover::before{

    left:100%;

}

.service-card:hover{

    transform:translateY(-15px);

    border-color:var(--gold);

    box-shadow:

    0 20px 45px rgba(216,180,90,.20);

}

.icon-box{

    width:85px;

    height:85px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    font-size:34px;

    color:var(--gold);

    background:rgba(216,180,90,.08);

    border:1px solid rgba(216,180,90,.25);

}

.service-card h3{

    font-family:'Cinzel',serif;

    font-size:24px;

    margin-bottom:18px;

}

.service-card p{

    color:#d4d4d4;

    line-height:1.9;

    margin-bottom:30px;

}

.service-card a{

    color:var(--gold);

    text-decoration:none;

    display:inline-flex;

    gap:10px;

    align-items:center;

    transition:.3s;

}

.service-card:hover a{

    transform:translateX(10px);

}

/*======================================================
QUOTE
======================================================*/

.quote-section{

    padding:120px 0;

}

.quote-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    padding:70px;

    border-radius:25px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(216,180,90,.20);

}

.quote-box i{

    font-size:45px;

    color:var(--gold);

    margin-bottom:30px;

}

.quote-box h2{

    font-family:'Cinzel',serif;

    font-size:38px;

    line-height:1.6;

    margin-bottom:25px;

}

.quote-box span{

    color:var(--gold);

    letter-spacing:3px;

}

/*======================================================
COUNTER
======================================================*/

.counter{

    padding:100px 0;

}

.counter-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.counter-item{

    padding:45px 20px;

    text-align:center;

    background:rgba(255,255,255,.03);

    border-radius:18px;

    border:1px solid rgba(216,180,90,.18);

}

.counter-item h2{

    font-family:'Cinzel',serif;

    color:var(--gold);

    font-size:52px;

    margin-bottom:10px;

}

.counter-item p{

    color:#cfcfcf;

}

/*======================================================
GALERI
======================================================*/

.gallery{

    padding:120px 0;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

}

.gallery-item img{

    width:100%;

    display:block;

    transition:.6s;

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

    transparent,

    rgba(0,0,0,.55));

}

.gallery-item:hover img{

    transform:scale(1.12);

}

/*======================================================
TESTIMONI
======================================================*/

.testimonial{

    padding:120px 0;

}

.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.testimonial-card{

    padding:40px;

    border-radius:20px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(216,180,90,.18);

    transition:.4s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

}

.quote-icon{

    color:var(--gold);

    font-size:30px;

    margin-bottom:20px;

}

.testimonial-card p{

    line-height:1.9;

    margin-bottom:30px;

}

.client{

    display:flex;

    gap:15px;

    align-items:center;

}

.client img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

}

.client h4{

    margin-bottom:5px;

}

.client span{

    color:#bbb;

    font-size:14px;

}
/*======================================================
FAQ
======================================================*/

.faq{

    padding:120px 0;

}

.faq-item{

    margin-bottom:20px;

    border-radius:18px;

    overflow:hidden;

    border:1px solid rgba(216,180,90,.18);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(15px);

}

.faq-question{

    width:100%;

    background:transparent;

    color:#fff;

    border:none;

    outline:none;

    cursor:pointer;

    padding:25px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:18px;

    font-weight:600;

    transition:.35s;

}

.faq-question:hover{

    color:var(--gold);

}

.faq-question i{

    color:var(--gold);

    font-size:18px;

}

.faq-answer{

    padding:0 30px 30px;

    color:#d4d4d4;

    line-height:1.9;

}

/*======================================================
CONTACT
======================================================*/

.contact{

    padding:130px 0;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.contact-info span{

    color:var(--gold);

    letter-spacing:3px;

}

.contact-info h2{

    font-family:'Cinzel',serif;

    font-size:50px;

    margin:20px 0;

}

.contact-info p{

    line-height:2;

    color:#d0d0d0;

    margin-bottom:35px;

}

.contact-info ul{

    list-style:none;

}

.contact-info li{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

    color:#ddd;

}

.contact-info li i{

    color:var(--gold);

    width:25px;

}

.contact-form{

    background:rgba(255,255,255,.03);

    padding:45px;

    border-radius:22px;

    border:1px solid rgba(216,180,90,.20);

    backdrop-filter:blur(18px);

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px 20px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    background:#0d0d0d;

    color:#fff;

    outline:none;

    transition:.35s;

    font-size:15px;

}

.contact-form textarea{

    resize:none;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:var(--gold);

    box-shadow:0 0 20px rgba(216,180,90,.15);

}

.contact-form button{

    margin-top:10px;

    cursor:pointer;

    border:none;

}

/*======================================================
FOOTER
======================================================*/

footer{

    padding-top:90px;

    background:#030303;

    border-top:1px solid rgba(216,180,90,.15);

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:40px;

    padding-bottom:60px;

}

.footer-logo img{

    width:70px;

    margin-bottom:20px;

}

.footer-logo h3{

    font-family:'Cinzel',serif;

    color:var(--gold);

    margin-bottom:20px;

    font-size:26px;

}

.footer-logo p{

    color:#bbb;

    line-height:1.9;

}

.footer-grid h4{

    color:var(--gold);

    margin-bottom:25px;

    font-size:18px;

}

.footer-grid a{

    display:block;

    color:#ccc;

    text-decoration:none;

    margin-bottom:14px;

    transition:.3s;

}

.footer-grid a:hover{

    color:var(--gold);

    padding-left:8px;

}

.copyright{

    text-align:center;

    padding:25px;

    border-top:1px solid rgba(255,255,255,.06);

    color:#999;

    font-size:14px;

}

/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:1100px){

.hero-grid,
.contact-grid{

    grid-template-columns:1fr;

}

.hero-right{

    margin-top:60px;

}

.services-grid{

    grid-template-columns:repeat(2,1fr);

}

.gallery-grid{

    grid-template-columns:repeat(2,1fr);

}

.testimonial-grid{

    grid-template-columns:1fr;

}

.counter-grid{

    grid-template-columns:repeat(2,1fr);

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

header{

    padding:18px 0;

}

nav{

    display:none;

}

.menu{

    display:block;

}

.hero{

    text-align:center;

}

.hero-left h1{

    font-size:48px;

}

.hero-left h3{

    font-size:20px;

}

.hero-button{

    justify-content:center;

}

.services-grid{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.counter-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

}

.contact-form{

    padding:30px;

}

.contact-info h2{

    font-size:36px;

}

.section-heading h2{

    font-size:36px;

}

.moon{

    width:260px;

    height:260px;

}

.altar{

    width:320px;

}

}

/*======================================================
ANIMASI
======================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.glow{

    animation:glow 3s ease-in-out infinite;

}

@keyframes glow{

0%,100%{

box-shadow:0 0 15px rgba(216,180,90,.20);

}

50%{

box-shadow:0 0 40px rgba(216,180,90,.45);

}

}
#preloader{

    transition:opacity .8s ease,
               visibility .8s ease;

}
/*==========================================
POPUP PREMIUM
==========================================*/

/*==================================================
POPUP
==================================================*/

.consult-popup{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.82);

    backdrop-filter:blur(8px);

    z-index:999999;

}

.consult-popup.show{

    display:flex;

}

.consult-card{

    width:430px;

    max-width:92%;

    background:#111;

    border-radius:20px;

    border:1px solid rgba(216,180,90,.30);

    padding:35px;

    text-align:center;

    position:relative;

    animation:popup .4s;

}

@keyframes popup{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.consult-logo{

    width:95px;

    height:95px;

    object-fit:contain;

    display:block;

    margin:0 auto 20px;

}

.popup-badge{

    display:block;

    color:#d8b45a;

    margin-bottom:15px;

}

.consult-card h2{

    font-family:'Cinzel',serif;

    font-size:30px;

    margin-bottom:15px;

}

.consult-card p{

    color:#ddd;

    line-height:1.8;

    margin-bottom:30px;

}

#waButton{

    width:100%;

    padding:16px;

    border:none;

    border-radius:40px;

    background:#d8b45a;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

}

#closePopup{

    position:absolute;

    top:15px;

    right:15px;

    width:35px;

    height:35px;

    border:none;

    border-radius:50%;

    cursor:pointer;

}
/*====================================
WHATSAPP LIVE CHAT
====================================*/

.wa-chat{

    position:fixed;

    right:25px;

    bottom:25px;

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    z-index:99999;

}

.wa-text{

    background:#111;

    border:1px solid rgba(216,180,90,.25);

    padding:12px 18px;

    border-radius:15px;

    color:#fff;

    backdrop-filter:blur(10px);

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.wa-text span{

    display:block;

    font-weight:600;

    color:#d8b45a;

}

.wa-text small{

    color:#ddd;

}

.wa-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:34px;

    box-shadow:0 10px 35px rgba(37,211,102,.45);

    animation:waPulse 2s infinite;

    transition:.3s;

}

.wa-chat:hover .wa-icon{

    transform:scale(1.1);

}

@keyframes waPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

@media(max-width:768px){

.wa-text{

display:none;

}

.wa-icon{

width:60px;

height:60px;

font-size:30px;

}

}