/* ==========================
   GLOBAL STYLE
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
}

/* BACKGROUND FIXED */
body{
    background:url('Background.png') center/cover no-repeat fixed;
    position:relative;
    
}


/* Overlay gelap lembut */
body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45); /* opacity bisa disesuaikan */
    backdrop-filter:blur(1.5px); /* efek blur lembut */
    z-index:-1;
}

/* LAPIS BAYANGAN */
.darken-bg{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1;
}

/* ==========================
   CONTAINER TENGAH SCROLLABLE
========================== */
.container{
    position:relative;
    z-index:2;
    height:100vh;
    width:100%;
    padding-bottom: 230px;
    display:flex;
    flex-direction:column;
    justify-content:center;  /* Tengah vertikal */
    align-items:center;      /* Tengah horizontal */
    text-align:center;

    overflow-y:auto;         /* hanya konten yg scroll */
    padding:60px 25px;
}

/* ==========================
   TEKS UTAMA
========================== */
h1{
    font-size:45px;
    font-weight:700;
    color:#ffffff;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.content{
    max-width:850px;
    font-size:18px;
    color:white;
    line-height:1.6;
    margin-bottom:35px;
}

/* ==========================
   CARD
========================== */
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:28px;
    width:100%;
    max-width:1050px;
}

.card{
    background:white;
    padding:22px;
    border-radius:18px;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:.45s ease;
}
.card-icon{
    font-size:40px;
    color:#18a736;
    margin-bottom:14px;
    transition:.3s;
}

/* Hover effect ikut menyala */
.card:hover .card-icon{
    transform:scale(1.3) rotate(-3deg);
    color:#12e85c;
}

/* Bamboo Shadow Wave Hover */
.card:hover{
    transform:translateY(-12px) scale(1.05);
    box-shadow:0 30px 55px rgba(0,0,0,.30),
               0 0 32px rgba(29,145,29,.45);
}

h3{
    color:#148a14;
    font-size:20px;
    margin-bottom:8px;
}

p{
    color:#333;
    font-size:15px;
}


/* ==========================
   MODAL STYLE PREMIUM
========================== */
.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(4px);        /* efek kaca belakang */
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    animation:fadeModal .3s ease forwards;
}

.modal-content{
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(6px);
    border-radius:22px;
    max-width:520px;
    width:90%;
    box-shadow:0 28px 55px rgba(0,0,0,.35);
    position:relative;
    overflow:hidden; /* penting agar sticky tidak keluar */
}

/* HEADER MODAL — STICKY */
/* HEADER STICKY + FLEX ALIGN */
.modal-header{
    position:sticky;
    top:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(6px);

    padding:18px 22px;
    border-bottom:1px solid rgba(0,0,0,.07);
    z-index:10;
}

.modal-header h2{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:#148a14;
}

/* tombol close */
.modal-header .close{
    background:#148a14;
    color:white;
    border:none;
    font-size:22px;
    width:34px;
    height:34px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.28s;
}

.modal-header .close:hover{
    background:#0f6b17;
    transform:rotate(95deg) scale(1.1);
}

/* area yang scroll HANYA gallery */
.modal-body{
    padding:20px;
    max-height:70vh;
    overflow-y:auto;
}


/* styling gallery tetap berlaku */


/* Tombol close */
.close{
    position:absolute;
    top:12px;
    right:18px;
    font-size:26px;
    font-weight:bold;
    cursor:pointer;
    color:#fff;
    background:#158f24;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.close:hover{
    background:#0c701a;
    transform:rotate(90deg);
}

/* ANIMASI POPUP */
@keyframes modalZoom{
    0%{opacity:0;transform:scale(.4);}
    100%{opacity:1;transform:scale(1);}
}

@keyframes fadeModal{
    from{opacity:0;}
    to{opacity:1;}
}
/* GALLERY RAPIH, SIMETRIS & RESPONSIVE */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
    gap:18px;
    margin-top:15px;
    width:100%;
}

/* Semua gambar konsisten bentuknya */
.gallery img{
    width:100%;
    height:150px;                 /* seragam */
    object-fit:cover;             /* crop rapi */
    border-radius:14px;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

/* Hover style */
.gallery img:hover{
    transform:scale(1.07);
    box-shadow:0 18px 35px rgba(0,0,0,.35);
}

/* MODAL – SCROLL KHUSUS KONTEN SAJA */
.modal-content{
    max-height:85vh;
    overflow-y:auto;
    padding-bottom:30px;
    scrollbar-width:thin;
}

/* Custom scrollbar minimalis */
.modal-content::-webkit-scrollbar{
    width:6px;
}
.modal-content::-webkit-scrollbar-thumb{
    background:#1b8c22;
    border-radius:10px;
}


@keyframes fadeZoom{
    from{opacity:0;transform:scale(.5);}
    to{opacity:1;transform:scale(1);}
}
.btn-pesan{
    margin-top:8px;
    background:#30d545;
    color:white;
    border:none;
    padding:6px 14px;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
    font-size:13px;
}

.btn-pesan:hover{
    background:#129e26;
    transform:scale(1.06);
}
#orderForm{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

#orderForm textarea{
    grid-column:span 2;
    height:85px;
}

/* ============================
   BUTTON GROUP LEBIH RAPIH
============================ */
.form-btn-group{
    display:flex;
    justify-content:center;  /* tombol rata tengah */
    gap:18px;
    margin-top:30px;
}

/* Tombol WA */
.submitWA{
    flex:1;
    width:160px;
    background:#26b33a;
    color:white;
    border:none;
    padding:14px 0;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
    text-align:center;
}
.submitWA:hover{
    background:#1f9e30;
    transform:translateY(-2px) scale(1.03);
}

/* Tombol Invoice */
.pdfBtn{
    flex:1;
    max-width:160;
    background:#333;
    color:white;
    border:none;
    padding:14px 0;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}
.pdfBtn:hover{
    background:#161616;
    transform:translateY(-2px) scale(1.03);
}


.modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

/* ====== RESPONSIVE ORDER FORM ====== */
#orderModal .modal-content{
    width:90%;
    max-width:420px;
    border-radius:18px;
    padding:18px 22px;
}

/* Form layout */
#orderForm{
    display:flex;
    flex-direction:column;
    gap:14px;
}

#orderForm label{
    font-size:15px;
    font-weight:600;
    color:#222;
}

/* input lebih nyaman disentuh jari */
#orderForm input,
#orderForm textarea{
    width:100%;
    padding:10px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:15px;
}

/* tombol responsive */
.form-btn-group{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    margin-top:10px;
}

.form-btn-group button{
    padding:12px 18px;
    border-radius:10px;
    font-size:15px;
    font-weight:700;
    width:48%;
    min-width:130px;
}

/* Warna tombol */
.submitWA{
    background:#27ae60;
    color:#fff;
}
.pdfBtn{
    background:#2b2b2b;
    color:#fff;
}


/* === MODAL UPLOAD DP === */
#modalDP .modal-content{
    width:90%;
    max-width:430px;
    border-radius:22px;
    overflow:hidden;
    background:#fff;
    animation:fadeUp .35s ease;
}

#modalDP .modal-header{
    background:#ffffff;
    padding:18px 22px;
    border-bottom:1px solid #ddd;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

#modalDP .modal-header h2{
    font-size:20px;
    font-weight:700;
    text-align:center;
    color:#198c19;
    line-height:1.3;
}

#modalDP .close{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    background:#198c19;
    width:32px;
    height:32px;
    border-radius:50%;
    color:#fff;
    border:none;
    font-size:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}

#modalDP .modal-body{
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

#modalDP label{
    font-size:15px;
    font-weight:600;
    color:#333;
}

#modalDP input[type="file"],
#modalDP input[type="number"]{
    width:100%;
    padding:12px;
    border-radius:10px;
    border:1px solid #ccc;
    outline:none;
    font-size:15px;
}

#modalDP input[type="number"]::placeholder{
    color:#888;
}

#modalDP button.submitWA{
    width:100%;
    padding:12px;
    font-size:16px;
    font-weight:700;
    background:#21b34e;
    border-radius:10px;
    border:none;
    color:#fff;
    cursor:pointer;
}

#modalDP button.submitWA:hover{
    background:#1d983f;
}

/* Animasi */
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes popup{ from{transform:scale(.7);} to{transform:scale(1);} }


/* Animation smooth */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
}
.maps-field{
    display:flex;
    gap:10px;
    margin-top:8px;
}

.maps-field input{
    flex:1;
    padding:10px;
    border:1.5px solid #aaa;
    border-radius:8px;
    font-size:16px;
}

.maps-btn{
    background:#1CA73A;
    color:white;
    border:none;
    padding:10px 14px;
    border-radius:8px;
    font-size:16px;
    cursor:pointer;
    white-space:nowrap;
    transition:.3s;
}

.maps-btn:hover{
    background:#128429;
}
.social-icons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:45px;
}

/* Shape & Base Style */
.social-icons .icon{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:25px;
    color:white;
    cursor:pointer;
    transition:.35s;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* Brand Colors */
.icon.wa{ background:#25D366; }
.icon.ig{ background:#E4405F; }
.icon.fb{ background:#1877F2; }
.icon.tk{ background:#000; }

/* Hover neon glow */
.social-icons .icon:hover{
    transform:scale(1.22) translateY(-5px);
    box-shadow:0 12px 30px rgba(0,0,0,.4),
               0 0 18px rgba(0,255,123,.55);
}

/* Efek saat header mengecil waktu discroll */
/* Header box */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    height: 75px; /* tinggi konsisten */
    display: flex;
    justify-content: center;   /* tengah horizontal */
    align-items: center;       /* tengah vertikal */
    font-size: 22px;
    font-weight: 700;
    color: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding-top: 17px;
}

h1{
    color: #161616;
}
/* Sticky Footer */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    color: #333;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.12);
    z-index: 999;
}

@media(max-width:600px){
    .social-icons .icon{
        width:46px;
        height:46px;
        font-size:20px;
    }
}
/* Animasi Fade-in */
.content {
    opacity: 0;
    animation: fadeIn 1.4s ease forwards;
}
h1 {
    opacity: 0;
    animation: fadeIn 1.4s ease forwards;
}

/* Keyframes animasi */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ===========================================
   🌿 RESPONSIVE LAYOUT FIXED & IMPROVED
=========================================== */

/* ====== 1024px ke bawah (Laptop kecil) ====== */
@media(max-width:1024px){
    h1{ font-size:38px; }
    .content{ font-size:17px; }
}


/* ====== 820–900px (Tablet landscape) ====== */
@media(max-width:900px){
    .cards{ grid-template-columns:repeat(2,1fr); gap:22px;}
    h1{ font-size:32px; }
    .content{ font-size:15.5px; max-width:90%; }
}


/* ====== 768px — Portrait Tablet ====== */
@media(max-width:768px){
    h1{ font-size:28px; }
    .content{ font-size:15px; max-width:92%; }
    .cards{ grid-template-columns:1fr; max-width:500px; }

    .floating-footer{
        width:90%;
        padding:14px 22px;
        gap:20px;
        border-radius:24px;
    }
    .ff-box{ font-size:14px; }
}


/* ====== 600px — Mid Range Phones ====== */
@media(max-width:600px){

    /* ruang bawah agar tidak ketutup footer */
    .container{
        padding:25px 14px 190px;
        height:auto; min-height:100vh;
    }

    h1{ font-size:25px; }
    .content{ font-size:14px; line-height:20px; }

    .card{
        width:94%; margin:auto;
        padding:17px 15px;
        border-radius:16px;
    }
    .card h3{ font-size:18px; }
    .card p{ font-size:13px; }

    /* Footer berubah ke mode compact */
    .floating-footer{
        width:92%;
        bottom:20px;
        flex-direction:column;
        padding:14px 16px;
        border-radius:20px;
        gap:12px;
    }
    .ff-box{ font-size:13px; }
    .floating-footer i{ font-size:17px; }

    .ff-box.alamat{ max-width:100%; }
}


/* ====== 480px — Small Devices ====== */
@media(max-width:480px){

    h1{ font-size:23px; }
    .content{ font-size:13px; }

    .cards{ gap:15px; }

    .social-icons .icon{
        width:40px; height:40px; font-size:18px;
    }

    .floating-footer{
        width:94%;
        gap:10px;
        padding:12px 14px;
        border-radius:16px;
    }
    .ff-box{ font-size:12.7px; }
}


/* ====== 360px — Ultra Small Phones ====== */
@media(max-width:360px){
    h1{ font-size:21px; }
    .content{ font-size:12px; }

    .floating-footer{
        width:96%;
        padding:10px 12px;
        gap:8px;
    }
    .ff-box{ font-size:12px; }
    .floating-footer i{ font-size:15px; }
}
/* ============================
   📱 FIX CARD UNTUK MOBILE
============================ */
@media(max-width:600px){

    /* card jadi lebih kecil */
    .card{
        transform: scale(0.90);        /* perkecil 10% */
        padding: 14px 12px;            /* kurangi padding */
        border-radius: 14px;
    }

    /* icon dalam card */
    .card-icon{
        font-size: 28px;               /* dari 40px → 28px */
        margin-bottom: 8px;
    }

    /* judul card */
    .card h3{
        font-size: 16px;
        margin-bottom: 6px;
    }

    /* teks card */
    .card p{
        font-size: 12px;
        line-height: 1.4;
    }

    /* grid card jarak lebih rapat */
    .cards{
        gap: 16px;
    }

    /* Sesuaikan container agar muat + icon sosmed muncul */
    .container{
        padding-bottom: 140px !important; /* sebelumnya terlalu besar */
        margin-top: 10px;
    }

    /* ikon sosmed lebih dekat ke card */
    .social-icons{
        margin-top: 25px;
    }
}
/* ============================
   📱 CARD LEBIH KECIL 20% (FINAL)
============================ */
@media(max-width:600px){

    .card{
        transform: scale(0.72);      /* DARI 0.90 → 0.72 (20% lebih kecil) */
        padding: 12px 10px;          /* padding ikut diperkecil */
        border-radius: 14px;
        margin: 0 auto;
    }

    .card-icon{
        font-size: 24px;             /* icon lebih kecil */
        margin-bottom: 6px;
    }

    .card h3{
        font-size: 15px;
        margin-bottom: 5px;
    }

    .card p{
        font-size: 11px;
        line-height: 1.35;
    }

    .cards{
        gap: 12px;                   /* jarak antar card lebih rapat */
    }

    /* Supaya ikon sosial media tidak terdorong ke bawah */
    .container{
        padding-bottom: 110px !important; 
        margin-top: 5px;
    }

    /* Sosial media icon tampil lebih dekat */
    .social-icons{
        margin-top: 18px;
        transform: scale(0.90);     /* sedikit kecil agar pas */
    }
}
/* =====================================
   📱 DESAIN MOBILE LEBIH RAPIH — FINAL
===================================== */
@media(max-width:600px){

    /* ====== PERBAIKI CONTAINER ====== */
    .container{
        padding-top: 20px;
        padding-bottom: 90px !important; /* supaya footer tidak menutup konten */
        gap: 0;
        height: auto !important;
        min-height: 100vh;
    }

    /* ====== TEKS UTAMA ====== */
    h1{
        font-size: 24px !important;
        margin-bottom: 14px;
    }

    .content{
        font-size: 14px !important;
        line-height: 1.45;
        padding: 0 8px;
        margin-bottom: 25px;
        max-width: 90%;
    }

    /* ====== CARD LEBIH KOTAK & RAPIH ====== */
    .cards{
        width: 100%;
        gap: 12px !important;
    }

    .card{
        width: 92%;
        padding: 14px 12px !important;
        margin: auto;
        border-radius: 10px !important;  /* lebih kotak */
        transform: scale(0.95);
        box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    }

    .card-icon{
        font-size: 26px !important;
        margin-bottom: 6px;
    }

    .card h3{
        font-size: 16px !important;
        margin-bottom: 4px;
    }

    .card p{
        font-size: 12px !important;
        line-height: 1.35;
    }

    /* ====== SOSIAL MEDIA LEBIH DEKAT KE CARD ====== */
    .social-icons{
        margin-top: 18px !important;
        transform: scale(0.92);
        gap: 14px !important;
    }

    .social-icons .icon{
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    /* ====== FOOTER ====== */
    .sticky-footer{
        font-size: 11.5px !important;
        padding: 10px 0 !important;
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}