/* =========================================================
   DEKAER GROUP PREMIUM THEME
========================================================= */
:root{
    --maroon:#760d1d;
    --maroon-dark:#4d0712;
    --gold:#d6ad36;
    --gold-light:#efd275;
    --cream:#fffaf1;
    --ink:#241b1c;
    --muted:#6d6464;
    --white:#ffffff;
    --shadow:0 18px 50px rgba(70,26,30,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:"Poppins",sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.7;
}
body.admin-bar .site-header{top:32px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.container{width:min(1180px,92%);margin-inline:auto}
.section{padding:96px 0}
.screen-reader-text{
    position:absolute!important;
    width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
}

/* Header */
.site-header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    transition:.3s ease;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid rgba(118,13,29,.08);
}
.site-header.is-scrolled{
    box-shadow:0 10px 35px rgba(58,13,20,.14);
    backdrop-filter:blur(16px);
}
.navbar{
    min-height:86px;
    display:flex;
    align-items:center;
    gap:34px;
}
.site-logo{display:flex;align-items:center;flex:0 0 auto}
.site-logo img,
.site-logo .custom-logo{
    width:auto;
    height:70px;
    max-width:230px;
    object-fit:contain;
}
.main-nav{margin-left:auto}
.menu{
    display:flex;
    align-items:center;
    gap:32px;
    list-style:none;
}
.menu a{
    font-size:14px;
    font-weight:600;
    color:#281e20;
    position:relative;
}
.menu a::after{
    content:"";
    position:absolute;
    left:0;right:100%;bottom:-8px;
    height:2px;background:var(--gold);
    transition:.25s ease;
}
.menu a:hover::after,
.menu .current-menu-item>a::after{right:0}
.header-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:0 22px;
    border-radius:10px;
    background:var(--maroon);
    color:var(--white);
    font-size:14px;
    font-weight:700;
    box-shadow:0 9px 22px rgba(118,13,29,.18);
}
.header-cta:hover{transform:translateY(-2px);background:var(--maroon-dark)}
.menu-toggle{
    display:none;
    width:44px;height:44px;
    border:0;background:transparent;
    cursor:pointer;
}
.menu-toggle span:not(.screen-reader-text){
    display:block;width:24px;height:2px;
    background:var(--maroon);
    margin:5px auto;
}

/* Hero */
.hero{
    position:relative;
    min-height:780px;
    display:flex;
    align-items:center;
    padding-top:86px;
    background:
        url("../images/hero/hero.jpg") center center/cover no-repeat;
    overflow:hidden;
}
.hero-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(20,4,8,.90) 0%,
        rgba(30,6,10,.76) 35%,
        rgba(30,6,10,.34) 64%,
        rgba(30,6,10,.05) 100%
    );
}
.hero-inner{position:relative;z-index:2}
.hero-copy{
    width:min(610px,100%);
    padding:72px 0;
    color:var(--white);
}
@media (min-width: 1100px){
    .hero-copy{
        margin-left:42%;
        width:54%;
    }

    .hero-shade{
        background:linear-gradient(
            90deg,
            rgba(20,4,8,.30) 0%,
            rgba(20,4,8,.38) 38%,
            rgba(20,4,8,.76) 60%,
            rgba(20,4,8,.90) 100%
        );
    }
}
.eyebrow,
.section-kicker{
    display:inline-block;
    color:var(--gold);
    font-weight:700;
    font-size:13px;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.hero h1{
    margin-top:16px;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(54px,6vw,82px);
    line-height:.98;
    font-weight:700;
}
.hero h2{
    margin-top:10px;
    font-family:"Cormorant Garamond",serif;
    color:var(--gold-light);
    font-size:clamp(34px,3.6vw,50px);
    line-height:1.05;
}
.hero-copy>p{
    max-width:590px;
    margin-top:24px;
    color:rgba(255,255,255,.86);
    font-size:17px;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:32px;
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 28px;
    border-radius:9px;
    font-weight:700;
    transition:.25s ease;
}
.button:hover{transform:translateY(-2px)}
.button-primary{
    background:var(--maroon);
    color:var(--white);
    box-shadow:0 10px 24px rgba(72,4,16,.24);
}
.button-primary:hover{background:#920f25}
.button-outline{
    border:1px solid var(--gold);
    color:var(--white);
    background:rgba(0,0,0,.12);
}
.button-outline:hover{background:var(--gold);color:#281e20}
.button-light{background:var(--white);color:var(--maroon)}
.hero-rating{
    display:grid;
    grid-template-columns:auto auto;
    gap:0 12px;
    align-items:center;
    width:max-content;
    max-width:100%;
    margin-top:34px;
    padding:12px 18px;
    border:1px solid rgba(214,173,54,.7);
    border-radius:12px;
    background:rgba(15,4,7,.5);
}
.hero-rating strong{color:var(--gold);letter-spacing:2px}
.hero-rating span{font-weight:700}
.hero-rating small{
    grid-column:1/-1;
    color:rgba(255,255,255,.72);
}

/* Features */
.features-section{
    position:relative;
    z-index:5;
    margin-top:-58px;
}
.features-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    background:rgba(255,255,255,.98);
    border:1px solid rgba(214,173,54,.18);
    border-radius:18px;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.feature-item{
    min-height:146px;
    padding:24px 14px;
    text-align:center;
    position:relative;
}
.feature-item:not(:last-child)::after{
    content:"";
    position:absolute;right:0;top:26px;bottom:26px;
    width:1px;background:rgba(118,13,29,.12);
}
.feature-icon{display:block;color:var(--maroon);font-size:30px;line-height:1}
.feature-item h3{margin-top:13px;font-size:14px}
.feature-item p{margin-top:5px;color:var(--muted);font-size:12px;line-height:1.45}

/* Shared headings */
.section-heading{
    max-width:760px;
    margin:0 auto 52px;
    text-align:center;
}
.section-heading h2,
.about-copy h2,
.cta-inner h2{
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(40px,4.7vw,60px);
    line-height:1.05;
    color:var(--maroon-dark);
}
.section-heading h2{margin-top:10px}
.section-heading p{margin-top:14px;color:var(--muted)}

/* About */
.about-section{background:var(--cream)}
.about-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:center;
}
.about-copy h2{margin:8px 0 20px}
.about-copy p{color:var(--muted);margin-bottom:16px}
.about-copy .button{margin-top:14px}
.about-media{position:relative}
.about-media::before{
    content:"";
    position:absolute;
    left:-20px;bottom:-20px;
    width:120px;height:120px;
    border-left:3px solid var(--gold);
    border-bottom:3px solid var(--gold);
    border-radius:0 0 0 28px;
}
.about-media img{
    width:100%;
    min-height:420px;
    object-fit:cover;
    border-radius:24px;
    box-shadow:var(--shadow);
}

/* Business */
.business-section{
    background:
        radial-gradient(circle at 10% 10%,rgba(214,173,54,.08),transparent 28%),
        #fff;
}
.business-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}
.business-card{
    border-radius:22px;
    background:#fff;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid rgba(118,13,29,.08);
    transition:.3s ease;
}
.business-card:hover{transform:translateY(-8px)}
.business-card img{
    width:100%;
    height:270px;
    object-fit:cover;
}
.business-card-content{padding:26px}
.business-card h3{
    font-family:"Cormorant Garamond",serif;
    color:var(--maroon-dark);
    font-size:34px;
    line-height:1;
}
.business-card p{margin-top:14px;color:var(--muted);font-size:14px}
.business-card a{
    display:inline-flex;
    margin-top:20px;
    color:var(--maroon);
    font-weight:700;
}

/* Statistics */
.statistics-section{
    padding:54px 0;
    color:#fff;
    background:linear-gradient(110deg,var(--maroon-dark),var(--maroon));
}
.statistics-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
}
.statistics-grid article{
    padding:10px 18px;
    text-align:center;
}
.statistics-grid article:not(:last-child){
    border-right:1px solid rgba(255,255,255,.18);
}
.statistics-grid strong,
.statistics-grid span{
    font-family:"Cormorant Garamond",serif;
    color:var(--gold-light);
    font-size:42px;
    font-weight:700;
}
.statistics-grid p{font-size:13px;color:rgba(255,255,255,.82)}

/* Gallery */
.gallery-section{background:var(--cream)}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:14px;
}
.gallery-grid figure{
    min-height:220px;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(66,22,28,.12);
}
.gallery-grid figure:nth-child(1),
.gallery-grid figure:nth-child(4){grid-column:span 5}
.gallery-grid figure:nth-child(2),
.gallery-grid figure:nth-child(3){grid-column:span 7}
.gallery-grid figure:nth-child(5),
.gallery-grid figure:nth-child(6){grid-column:span 6}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:.35s ease}
.gallery-grid figure:hover img{transform:scale(1.04)}

/* CTA */
.cta-section{
    padding:78px 0;
    background:
        linear-gradient(110deg,rgba(78,5,17,.98),rgba(118,13,29,.94));
    color:#fff;
}
.cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}
.cta-inner h2{color:#fff;margin-top:8px}
.cta-inner p{color:rgba(255,255,255,.78);margin-top:10px}

/* Footer */
.site-footer{
    background:#26050c;
    color:#fff;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:42px;
    padding:68px 0 54px;
}
.footer-brand img{height:76px;width:auto;object-fit:contain}
.footer-brand p{margin-top:18px;color:rgba(255,255,255,.68);font-size:13px;max-width:360px}
.site-footer h3{font-size:14px;color:var(--gold-light);margin-bottom:18px}
.footer-menu,
.footer-links,
.footer-contact{list-style:none}
.footer-menu .menu{display:block}
.footer-menu li,
.footer-links li,
.footer-contact li{margin:8px 0;color:rgba(255,255,255,.76);font-size:13px}
.footer-menu a:hover,
.footer-links a:hover{color:var(--gold-light)}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    padding:18px 0;
    text-align:center;
    color:rgba(255,255,255,.58);
    font-size:12px;
}
.floating-wa{
    position:fixed;
    right:22px;bottom:22px;
    z-index:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 20px;
    border-radius:999px;
    background:#1db954;
    color:#fff;
    font-weight:700;
    box-shadow:0 14px 30px rgba(0,0,0,.2);
}

/* Basic content pages */
.page-section{padding-top:150px;min-height:70vh}
.content-area{max-width:850px}
.content-area h1,
.error-page h1{
    font-family:"Cormorant Garamond",serif;
    color:var(--maroon-dark);
    font-size:54px;
}
.error-page{text-align:center;padding-top:180px;min-height:75vh}
.error-page p{margin:16px 0 26px;color:var(--muted)}
/* =========================================================
   FINAL HOMEPAGE POLISH
========================================================= */

/* Logo header lebih jelas */
.site-logo img,
.site-logo .custom-logo{
    height:72px;
    max-width:255px;
}

/* Header transparan saat di posisi teratas */
.site-header{
    background:rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
}

.site-header .menu a{
    color:#fff;
}

.site-header .site-logo img{
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

.site-header.is-scrolled{
    background:rgba(255,255,255,.97);
    border-bottom:1px solid rgba(118,13,29,.08);
}

.site-header.is-scrolled .menu a{
    color:#281e20;
}

/* Hero lebih hidup */
.hero-shade{
    background:linear-gradient(
        90deg,
        rgba(20,4,8,.82) 0%,
        rgba(20,4,8,.65) 38%,
        rgba(20,4,8,.20) 72%,
        rgba(20,4,8,.04) 100%
    );
}

/* Floating WhatsApp lebih proporsional */
.floating-wa{
    min-height:44px;
    padding:0 17px;
    font-size:14px;
    right:18px;
    bottom:18px;
}

/* Business card lebih premium */
.business-card{
    position:relative;
}

.business-card img{
    transition:transform .45s ease;
}

.business-card:hover img{
    transform:scale(1.045);
}

.business-card-content{
    position:relative;
    z-index:2;
}

/* Animasi section */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.is-visible{
    opacity:1;
    transform:none;
}
/* =========================================================
   HERO PREMIUM FINAL
========================================================= */

.site-logo img,
.site-logo .custom-logo{
    height:72px;
    width:auto;
    max-width:260px;
    object-fit:contain;
}

/* Hero utama */
.hero{
    position:relative;
    isolation:isolate;
    min-height:790px;
    overflow:hidden;
}

/* Gradient dibuat lebih halus */
.hero-shade{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            90deg,
            rgba(22,3,7,.96) 0%,
            rgba(53,7,16,.90) 34%,
            rgba(53,7,16,.70) 52%,
            rgba(53,7,16,.28) 72%,
            rgba(53,7,16,.06) 100%
        );
}

/* Logo watermark samar di sisi kiri */
.hero-watermark{
    position:absolute;
    z-index:2;
    left:-170px;
    top:50%;
    width:650px;
    height:650px;
    transform:translateY(-50%);
    background:
        url('../images/logo/logo-dkrgroup.png')
        center / contain no-repeat;
    opacity:.045;
    filter:grayscale(1) brightness(2);
    pointer-events:none;
}

/* Garis lengkung dekoratif */
.hero-lines{
    position:absolute;
    z-index:3;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.hero-lines span{
    position:absolute;
    left:-180px;
    width:680px;
    height:680px;
    border:1px solid rgba(215,173,53,.45);
    border-radius:50%;
    transform:rotate(-18deg);
}

.hero-lines span:nth-child(1){
    top:-390px;
}

.hero-lines span:nth-child(2){
    top:-315px;
    left:-130px;
    opacity:.65;
}

.hero-lines span:nth-child(3){
    bottom:-490px;
    top:auto;
    left:-210px;
    opacity:.5;
}

/* Partikel emas */
.hero-particles{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
}

.hero-particles i{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 14px rgba(215,173,53,.8);
    animation:heroSparkle 3.6s ease-in-out infinite;
}

.hero-particles i:nth-child(1){left:8%;top:20%}
.hero-particles i:nth-child(2){left:19%;top:34%;animation-delay:.5s}
.hero-particles i:nth-child(3){left:33%;top:18%;animation-delay:1s}
.hero-particles i:nth-child(4){left:42%;top:28%;animation-delay:1.4s}
.hero-particles i:nth-child(5){left:12%;top:68%;animation-delay:.8s}
.hero-particles i:nth-child(6){left:27%;top:77%;animation-delay:1.8s}
.hero-particles i:nth-child(7){left:47%;top:62%;animation-delay:.3s}
.hero-particles i:nth-child(8){left:54%;top:22%;animation-delay:1.1s}
.hero-particles i:nth-child(9){left:38%;top:48%;animation-delay:2s}
.hero-particles i:nth-child(10){left:16%;top:47%;animation-delay:1.3s}
.hero-particles i:nth-child(11){left:51%;top:76%;animation-delay:.7s}
.hero-particles i:nth-child(12){left:6%;top:84%;animation-delay:1.6s}

@keyframes heroSparkle{
    0%,100%{
        opacity:.25;
        transform:scale(.75);
    }

    50%{
        opacity:1;
        transform:scale(1.4);
    }
}

.hero-inner{
    position:relative;
    z-index:5;
}

.hero-copy{
    width:min(720px,100%);
    padding:84px 0 62px;
}

.hero-eyebrow-row{
    display:flex;
    align-items:center;
    gap:16px;
}

.eyebrow-line{
    width:150px;
    height:1px;
    background:linear-gradient(
        90deg,
        var(--gold),
        rgba(215,173,53,0)
    );
}

.hero h1{
    max-width:700px;
    font-size:clamp(60px,6vw,88px);
}

.hero h2{
    max-width:730px;
}

.hero-divider{
    display:flex;
    align-items:center;
    gap:12px;
    max-width:470px;
    margin:24px 0 20px;
}

.hero-divider span{
    flex:1;
    height:1px;
    background:rgba(215,173,53,.72);
}

.hero-divider b{
    color:var(--gold);
    font-size:12px;
}

.hero-copy > p{
    max-width:650px;
}

.hero-actions{
    margin-top:28px;
}

/* Statistik di dalam hero */
.hero-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    max-width:760px;
    margin-top:50px;
    padding-top:26px;
    border-top:1px solid rgba(215,173,53,.28);
}

.hero-stats article{
    padding:0 20px;
    text-align:left;
}

.hero-stats article:first-child{
    padding-left:0;
}

.hero-stats article:not(:last-child){
    border-right:1px solid rgba(255,255,255,.18);
}

.hero-stats strong{
    display:block;
    color:var(--white);
    font-family:'Cormorant Garamond',serif;
    font-size:34px;
    line-height:1;
}

.hero-stats span{
    display:block;
    margin-top:7px;
    color:rgba(255,255,255,.72);
    font-size:12px;
}

/* Header logo lebih terbaca */
.navbar{
    min-height:96px;
}
/* === Sari Laut Mbak Nung: 4-card business grid override === */
.business-grid.four-items{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){
    .business-grid.four-items{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
    .business-grid.four-items{grid-template-columns:1fr}
}

/* === Sari Laut Mbak Nung: product catalog page === */
.product-catalog-hero{
    text-align:center;
    margin-bottom:48px;
}
.product-catalog-hero .section-kicker{display:inline-block;margin-bottom:10px}
.product-catalog-hero h1{
    font-family:"Cormorant Garamond",serif;
    color:var(--maroon-dark);
    font-size:48px;
    line-height:1.1;
}
.product-catalog-hero p{color:var(--muted);margin-top:14px;max-width:640px;margin-left:auto;margin-right:auto}
.product-category{margin-top:56px}
.product-category:first-of-type{margin-top:0}
.product-category h2{
    font-family:"Cormorant Garamond",serif;
    color:var(--maroon);
    font-size:30px;
    border-bottom:2px solid var(--gold-light);
    padding-bottom:10px;
    margin-bottom:24px;
}
.product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.product-card{
    border-radius:16px;
    background:#fff;
    padding:22px 24px;
    border:1px solid rgba(118,13,29,.08);
    box-shadow:var(--shadow);
    transition:.3s ease;
}
.product-card:hover{transform:translateY(-4px)}
.product-card h3{
    font-family:"Poppins",sans-serif;
    font-weight:600;
    color:var(--ink);
    font-size:16px;
    margin-bottom:8px;
}
.product-card .price{
    color:var(--maroon);
    font-weight:700;
    font-size:17px;
}
.product-catalog-cta{
    margin-top:56px;
    text-align:center;
    padding:36px;
    border-radius:20px;
    background:linear-gradient(110deg,var(--maroon-dark),var(--maroon));
    color:#fff;
}
.product-catalog-cta h3{
    font-family:"Cormorant Garamond",serif;
    font-size:28px;
    margin-bottom:10px;
}
.product-catalog-cta a{
    display:inline-flex;
    margin-top:16px;
    background:var(--gold);
    color:var(--maroon-dark);
    font-weight:700;
    padding:12px 28px;
    border-radius:30px;
    text-decoration:none;
}
@media (max-width:860px){
    .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
    .product-grid{grid-template-columns:1fr}
    .product-catalog-hero h1{font-size:36px}
}