/* =========================================================
   ZONAPRODUKID V2 PREMIUM
   STYLE.CSS - PART 1
   Mentor Edition by BOS 😎
========================================================= */

/* ================= RESET ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#FFF8F3;
    color:#1E293B;
    overflow-x:hidden;
}

/* ================= WARNA BRAND ================= */

:root{

    --primary:#EA580C;
    --primary-dark:#C2410C;
    --secondary:#FB923C;
    --light:#FFF7ED;
    --white:#FFFFFF;
    --dark:#0F172A;
    --gray:#64748B;
    --gray-light:#F8FAFC;
    --border:#F1F5F9;
    --success:#16A34A;

    --shadow:0 20px 40px rgba(0,0,0,.08);
    --shadow-orange:0 15px 35px rgba(234,88,12,.18);

}

/* ================= CONTAINER ================= */

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

/* ================= TOPBAR ================= */

.topbar{

    background:linear-gradient(90deg,#EA580C,#FB923C);
    color:#fff;
    text-align:center;
    padding:12px;
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;

}

/* ================= NAVBAR ================= */

.navbar{

    position:sticky;
    top:0;
    z-index:999;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(0,0,0,.05);

}

.nav-wrapper{

    display:flex;
    justify-content:space-between;
    align-items:center;
    height:80px;

}

.logo{

    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;

}

.logo img{

    width:46px;
    height:46px;
    border-radius:50%;

}

.logo span{

    font-size:24px;
    font-weight:800;
    color:var(--primary);

}

.nav-menu{

    display:flex;
    gap:28px;

}

.nav-menu a{

    text-decoration:none;
    color:#334155;
    font-weight:600;
    position:relative;
    transition:.3s;

}

.nav-menu a:hover{

    color:var(--primary);

}

.nav-menu a::after{

    content:"";
    position:absolute;
    width:0%;
    height:3px;
    left:0;
    bottom:-10px;
    background:var(--primary);
    border-radius:20px;
    transition:.3s;

}

.nav-menu a:hover::after{

    width:100%;

}

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

.nav-action{

    display:flex;
    align-items:center;
    gap:12px;

}

.btn-login{

    padding:12px 22px;
    border:2px solid #E2E8F0;
    background:#fff;
    border-radius:50px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;

}

.btn-login:hover{

    border-color:var(--primary);
    color:var(--primary);

}

.btn-orange{

    padding:14px 28px;
    background:linear-gradient(135deg,#EA580C,#FB923C);
    border:none;
    color:#fff;
    border-radius:50px;
    cursor:pointer;
    font-weight:700;
    text-decoration:none;
    box-shadow:var(--shadow-orange);
    transition:.3s;

}

.btn-orange:hover{

    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(234,88,12,.35);

}

.btn-outline{

    padding:14px 28px;
    border:2px solid var(--primary);
    color:var(--primary);
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;

}

.btn-outline:hover{

    background:var(--primary);
    color:#fff;

}

.menu-toggle{

    display:none;
    font-size:28px;
    cursor:pointer;

}

/* ================= HERO ================= */
.hero{

    padding:90px 0 60px;
    background:
    radial-gradient(circle at top right,#FFE3CF,transparent 40%),
    radial-gradient(circle at bottom left,#FFF0E2,transparent 35%),
    #FFF8F3;

}

.hero-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;

}

/* HERO LEFT */

.hero-label{

    display:inline-block;
    background:#FFF1E6;
    color:var(--primary);
    padding:10px 18px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:24px;
    font-size:14px;

}

.hero-text h1{

    font-size:62px;
    line-height:1.1;
    color:var(--dark);
    margin-bottom:22px;
    font-weight:800;

}

.hero-text h1 span{

    color:var(--primary);

}

.hero-text p{

    font-size:18px;
    line-height:34px;
    color:#475569;
    margin-bottom:36px;

}

.hero-button{

    display:flex;
    gap:16px;
    flex-wrap:wrap;

}

/* HERO INFO */

.hero-info{

    margin-top:45px;
    display:flex;
    gap:25px;
    flex-wrap:wrap;

}

.hero-info div{

    background:#fff;
    padding:18px 24px;
    border-radius:20px;
    box-shadow:var(--shadow);
    min-width:140px;

}

.hero-info h2{

    color:var(--primary);
    font-size:30px;
    margin-bottom:6px;

}

.hero-info p{

    font-size:14px;
    margin:0;
    color:#64748B;
    line-height:20px;

}

/* HERO IMAGE */

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;
    border-radius:32px;
    box-shadow:0 35px 60px rgba(234,88,12,.18);

}

/* FLOAT CARD */

.hero-image::before{

    content:"📚 Ebook Premium";
    position:absolute;
    top:20px;
    left:-25px;
    background:#fff;
    padding:15px 22px;
    border-radius:20px;
    box-shadow:var(--shadow);
    font-weight:700;
    color:var(--primary);

}

.hero-image::after{

    content:"🤖 Prompt AI";
    position:absolute;
    bottom:25px;
    right:-25px;
    background:#fff;
    padding:15px 22px;
    border-radius:20px;
    box-shadow:var(--shadow);
    font-weight:700;
    color:#7C3AED;

}


/* ================= FIX HERO HP ================= */

@media (max-width: 768px){

  .hero{
      padding:30px 20px 60px;
      overflow:hidden;
  }

  .hero-grid{
      display:flex !important;
      flex-direction:column !important;
      align-items:flex-start !important;
      width:100%;
  }

  .hero-left{
      width:100% !important;
      margin:0 !important;
      padding:0 !important;
      transform:none !important;
      position:static !important;
  }

  .hero-left h1{
      font-size:42px !important;
      line-height:1.08 !important;
      margin:0 0 20px !important;
      padding:0 !important;
      width:100% !important;
      max-width:100% !important;
      transform:none !important;
      letter-spacing:-1px;
  }

  .hero-left p{
      margin-top:16px;
      width:100%;
      max-width:100%;
  }

  .hero-right{
      width:100%;
      display:flex;
      justify-content:center;
      margin-top:25px;
  }

  .hero-right img{
      width:100%;
      max-width:320px;
      height:auto;
  }

}

/* ================= TRUST BAR ================= */

.trust-bar{

    padding:35px 0;
    background:#fff;

}

.trust-wrapper{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;

}

.trust-wrapper div{

    background:#FFF7ED;
    padding:20px;
    border-radius:18px;
    text-align:center;
    font-weight:700;
    color:#C2410C;
    transition:.3s;

}

.trust-wrapper div:hover{

    transform:translateY(-5px);
    box-shadow:var(--shadow-orange);

}

/* ================= SEARCH ================= */

.search-section{

    padding:70px 0;

}

.search-card{

    background:linear-gradient(135deg,#EA580C,#FB923C);
    border-radius:32px;
    padding:60px;
    color:#fff;
    text-align:center;
    box-shadow:var(--shadow-orange);

}

.search-card h2{

    font-size:38px;
    margin-bottom:14px;

}

.search-card p{

    opacity:.95;
    margin-bottom:30px;

}

.search-box{

    max-width:700px;
    margin:auto;
    display:flex;
    background:#fff;
    border-radius:60px;
    padding:8px;

}

.search-box input{

    flex:1;
    border:none;
    outline:none;
    padding:18px 25px;
    border-radius:60px;
    font-size:16px;

}

.search-box button{

    border:none;
    background:var(--primary);
    color:#fff;
    padding:0 30px;
    border-radius:50px;
    cursor:pointer;
    font-weight:700;
    transition:.3s;

}

.search-box button:hover{

    background:var(--primary-dark);

}

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

.section-title{

    text-align:center;
    margin-bottom:60px;

}

.section-title span{

    color:var(--primary);
    font-weight:700;
    letter-spacing:2px;
    font-size:14px;

}

.section-title h2{

    font-size:42px;
    margin:15px 0;
    color:var(--dark);

}

.section-title p{

    color:#64748B;
    max-width:650px;
    margin:auto;
    line-height:30px;

}

/* ================= EBOOK ================= */

.ebook-section{

    padding:90px 0;

}

.ebook-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;

}

.ebook-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.ebook-card:hover{

    transform:translateY(-10px);
    box-shadow:0 25px 45px rgba(234,88,12,.18);

}

.ebook-card img{
    width:100%;
    aspect-ratio:4 / 5;   /* Rasio portrait */
    object-fit:contain;   /* Jangan dipotong */
    background:#FFF8F3;
    padding:8px;
    border-radius:18px;
    display:block;

}

.ebook-card h4,
.ebook-card h3{

    padding:22px 20px 10px;

}

.ebook-card p{

    padding:0 20px;
    color:#64748B;
    line-height:24px;
    min-height:55px;

}

.price{

    display:block;
    color:var(--primary);
    font-size:24px;
    font-weight:800;
    padding:15px 20px 0;

}

.old-price{

    padding:20px 20px 0;
    display:block;
    color:#94A3B8;
    text-decoration:line-through;

}

.badge{

    position:absolute;
    top:18px;
    left:18px;
    background:#DC2626;
    color:#fff;
    padding:8px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:700;

}

.featured{

    border:3px solid var(--primary);
    grid-column:span 2;
    background:linear-gradient(180deg,#FFFDFB,#FFF5EE);

}

.featured img{

    height:320px;

}

.featured .btn-orange{

    margin:20px;

}

/* =========================================================
   ZONAPRODUKID V2 PREMIUM
   STYLE.CSS - PART 2
   Bundle • AI Prompt • Template • Category • Affiliate
========================================================= */


/* ===========================
        AI PROMPT STORE
=========================== */

.prompt-section{

    padding:110px 0;
    background:#FFF8F3;

}

.prompt-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;

}

.prompt-card{

    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.35s;
    text-align:center;
    position:relative;

}

.prompt-card:hover{

    transform:translateY(-10px);
    box-shadow:0 25px 45px rgba(124,58,237,.18);

}

.prompt-card::before{

    content:"AI";
    position:absolute;
    top:18px;
    right:18px;
    background:#7C3AED;
    color:#fff;
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:700;

}

.prompt-card img{

    width:100%;
    aspect-ratio:4 / 5;   /* Rasio portrait */
    object-fit:contain;   /* Jangan dipotong */
    background:#FFF8F3;
    padding:8px;
    border-radius:18px;
    display:block;

}

.prompt-card h3{

    padding:22px 20px 8px;
    font-size:18px;
    color:#1E293B;

}

.prompt-card span{

    display:block;
    color:#EA580C;
    font-size:22px;
    font-weight:800;
    margin-bottom:20px;

}

.prompt-card button{

    margin-bottom:24px;
    padding:12px 28px;
    background:#7C3AED;
    color:#fff;
    border:none;
    border-radius:40px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;

}

.prompt-card button:hover{

    background:#6D28D9;

}


/* ===========================
        TEMPLATE STORE
=========================== */

.template-section{

    padding:110px 0;
    background:#fff;

}

.template-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;

}

.template-card{

    background:#fff;
    border:1px solid #F1F5F9;
    border-radius:26px;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.template-card:hover{

    transform:translateY(-8px);
    border-color:#EA580C;
    box-shadow:var(--shadow-orange);

}

.template-card img{

    width:100%;
    aspect-ratio:4 / 5;   /* Rasio portrait */
    object-fit:contain;   /* Jangan dipotong */
    background:#FFF8F3;
    padding:8px;
    border-radius:18px;
    display:block;

}

.template-card h3{

    padding:20px;
    font-size:18px;
    color:#0F172A;

}

.template-card span{

    display:block;
    padding:0 20px;
    color:#EA580C;
    font-size:22px;
    font-weight:700;

}

.template-card button{

    margin:22px 20px;
    width:calc(100% - 40px);
    padding:14px;
    border:none;
    background:#EA580C;
    color:#fff;
    border-radius:16px;
    cursor:pointer;
    font-weight:700;
    transition:.3s;

}

.template-card button:hover{

    background:#C2410C;

}


/* ===========================
        CATEGORY SECTION
=========================== */

.category-section{

    padding:110px 0;
    background:#FFF7ED;

}

.category-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;

}

.category-card{

    background:#fff;
    border-radius:28px;
    text-align:center;
    padding:45px 25px;
    transition:.35s;
    cursor:pointer;
    box-shadow:var(--shadow);

}

.category-card:hover{

    transform:translateY(-10px);
    background:#EA580C;
    color:#fff;

}

.category-card .icon{

   width:100%;
    aspect-ratio:4 / 5;   /* Rasio portrait */
    object-fit:contain;   /* Jangan dipotong */
    background:#FFF8F3;
    padding:8px;
    border-radius:18px;
    display:block;

}

.category-card h3{

    margin-bottom:10px;
    font-size:22px;

}

.category-card p{

    color:#64748B;
    line-height:24px;
    font-size:15px;

}

.category-card:hover p{

    color:#fff;

}


/* ===========================
      AFFILIATE SECTION
=========================== */

.affiliate-section{

    padding:120px 0;
    background:#fff;

}

.affiliate-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.product-card{

    background:#fff;
    border-radius:28px;
    overflow:hidden;
    position:relative;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.product-card:hover{

    transform:translateY(-12px);
    box-shadow:0 25px 45px rgba(234,88,12,.16);

}

.product-card img{

   width:100%;
    aspect-ratio:4 / 5;   /* Rasio portrait */
    object-fit:contain;   /* Jangan dipotong */
    background:#FFF8F3;
    padding:8px;
    border-radius:18px;
    display:block;

}

.product-card:hover img{

    transform:scale(1.05);

}

/* Badge Diskon */

.discount{

    position:absolute;
    top:18px;
    left:18px;
    background:#DC2626;
    color:#fff;
    padding:8px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:700;
    z-index:5;

}

/* Wishlist */

.product-card::before{

    content:"♡";
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:#EA580C;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    cursor:pointer;
    z-index:5;

}

.product-card h4{

    padding:22px 18px 10px;
    font-size:18px;
    min-height:60px;

}

.rating{

    padding:0 18px;
    color:#F59E0B;
    font-size:14px;
    margin-bottom:12px;

}

.product-card .price{

    padding:0 18px;
    color:#EA580C;
    font-size:26px;
    font-weight:800;

}

.product-card button{

    margin:22px 18px 22px;
    width:calc(100% - 36px);
    padding:15px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,#EA580C,#FB923C);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:.3s;

}

.product-card button:hover{

    transform:translateY(-3px);

}


/* ===========================
      FEATURE BANNER
=========================== */

.feature-banner{

    padding:100px 0;

}

.feature-wrapper{

    background:linear-gradient(135deg,#FFF4EC,#FFFFFF);
    border-radius:32px;
    padding:55px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    box-shadow:var(--shadow);

}

.feature-item{

    text-align:center;

}

.feature-item .icon{

    width:70px;
    height:70px;
    border-radius:50%;
    margin:auto;
    background:#FFE7D5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:18px;

}

.feature-item h4{

    color:#0F172A;
    margin-bottom:8px;

}

.feature-item p{

    color:#64748B;
    font-size:14px;
    line-height:24px;

}

/* =========================================================
   ZONAPRODUKID V2 PREMIUM
   STYLE.CSS - PART 3
   Article • Newsletter • Footer • Floating CTA • Animation
========================================================= */


/* =========================================================
   ARTICLE SECTION (SEO BLOG)
========================================================= */

.article-section{
    padding:120px 0;
    background:#FFF8F3;
}

.article-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.article-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.35s;
}

.article-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 45px rgba(234,88,12,.15);
}

.article-card img{
     width:100%;
    aspect-ratio:4 / 5;   /* Rasio portrait */
    object-fit:contain;   /* Jangan dipotong */
    background:#FFF8F3;
    padding:8px;
    border-radius:18px;
    display:block;

}

.article-card h3{
    padding:22px 22px 12px;
    font-size:20px;
    line-height:30px;
    color:#0F172A;
}

.article-card p{
    padding:0 22px;
    color:#64748B;
    line-height:28px;
    font-size:15px;
}

.article-card a{
    display:inline-block;
    margin:22px;
    text-decoration:none;
    color:var(--primary);
    font-weight:700;
    transition:.3s;
}

.article-card a:hover{
    color:#C2410C;
}


/* =========================================================
   NEWSLETTER PREMIUM
========================================================= */

.newsletter{
    padding:120px 0;
    background:linear-gradient(135deg,#EA580C,#FB923C);
    position:relative;
    overflow:hidden;
}

.newsletter::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-220px;
    right:-120px;
}

.newsletter-box{
    position:relative;
    z-index:2;
    background:#fff;
    padding:70px;
    border-radius:36px;
    text-align:center;
    box-shadow:0 35px 60px rgba(0,0,0,.15);
}

.newsletter-box h2{
    font-size:42px;
    color:#EA580C;
    margin-bottom:15px;
}

.newsletter-box p{
    color:#64748B;
    max-width:600px;
    margin:0 auto 35px;
    line-height:30px;
}

.newsletter-box form{
    display:flex;
    max-width:700px;
    margin:auto;
    background:#FFF8F3;
    border-radius:60px;
    padding:8px;
}

.newsletter-box input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    padding:20px 25px;
    font-size:16px;
    font-family:'Poppins',sans-serif;
}

.newsletter-box button{
    padding:18px 34px;
    border:none;
    background:#EA580C;
    color:#fff;
    border-radius:50px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.newsletter-box button:hover{
    background:#C2410C;
    transform:translateY(-2px);
}


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

.footer{
    background:#0F172A;
    color:#CBD5E1;
    padding-top:90px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:45px;
    padding-bottom:60px;
}

.footer h3{
    color:#fff;
    font-size:30px;
    margin-bottom:15px;
}

.footer h4{
    color:#fff;
    margin-bottom:20px;
    font-size:18px;
}

.footer p{
    line-height:30px;
    color:#94A3B8;
}

.footer ul{
    list-style:none;
}

.footer ul li{
    margin-bottom:15px;
}

.footer ul li a{
    text-decoration:none;
    color:#CBD5E1;
    transition:.3s;
}

.footer ul li a:hover{
    color:#FB923C;
    padding-left:8px;
}

/* Social Icon */

.social-icons{
    display:flex;
    gap:14px;
    margin-top:25px;
}

.social-icons a{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#1E293B;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#fff;
    font-size:20px;
    transition:.3s;
}

.social-icons a:hover{
    background:#EA580C;
    transform:translateY(-4px);
}


/* Footer Bottom */

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding:28px 0;
    text-align:center;
    font-size:14px;
    color:#94A3B8;
}


/* =========================================================
   FLOATING CTA BUTTON
========================================================= */

.floating-button{
    position:fixed;
    bottom:25px;
    right:25px;
    background:linear-gradient(135deg,#EA580C,#FB923C);
    color:#fff;
    padding:16px 24px;
    border-radius:60px;
    text-decoration:none;
    font-weight:700;
    box-shadow:0 20px 40px rgba(234,88,12,.35);
    z-index:999;
    transition:.35s;
    animation:pulse 2.5s infinite;
}

.floating-button:hover{
    transform:translateY(-5px) scale(1.05);
}


/* =========================================================
   SCROLL TO TOP BUTTON
========================================================= */

.scroll-top{
    position:fixed;
    left:25px;
    bottom:25px;
    width:55px;
    height:55px;
    border-radius:50%;
    background:#fff;
    color:#EA580C;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:999;
}

.scroll-top.show{
    opacity:1;
    visibility:visible;
}


/* =========================================================
   ANIMATION
========================================================= */

.fade-up{
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp .8s ease forwards;
}

.fade-left{
    opacity:0;
    transform:translateX(60px);
    animation:fadeLeft 1s ease forwards;
}

.zoom-in{
    opacity:0;
    transform:scale(.9);
    animation:zoomIn .8s ease forwards;
}

.delay-1{animation-delay:.2s;}
.delay-2{animation-delay:.4s;}
.delay-3{animation-delay:.6s;}
.delay-4{animation-delay:.8s;}

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeLeft{
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes zoomIn{
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(234,88,12,.45);
    }

    70%{
        box-shadow:0 0 0 20px rgba(234,88,12,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(234,88,12,0);
    }

}


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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#FFF4EC;
}

::-webkit-scrollbar-thumb{
    background:#EA580C;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#C2410C;
}

/* =========================================
   STICKY NAVBAR
========================================= */

.navbar.sticky{
    position:fixed;
    top:0;
    width:100%;
    background:#ffffffee;
    backdrop-filter:blur(16px);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    animation:slideDown .4s;
    z-index:999;
}

@keyframes slideDown{
    from{
        transform:translateY(-100%);
    }
    to{
        transform:translateY(0);
    }
}


/* =========================================
   REVEAL ANIMATION
========================================= */

.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:1s ease;
}

.reveal.show{
    opacity:1;
    transform:translateY(0);
}


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

.voucher-popup{
    position:fixed;
    bottom:100px;
    right:25px;
    width:300px;
    background:white;
    padding:20px;
    border-radius:20px;
    box-shadow:0 25px 40px rgba(0,0,0,.15);
    transform:translateY(150%);
    transition:.5s;
    z-index:999;
}

.voucher-popup.show{
    transform:translateY(0);
}

.close-popup{
    cursor:pointer;
    float:right;
    font-size:20px;
}


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

.btn{
    position:relative;
    overflow:hidden;
}

.ripple{
    position:absolute;
    width:10px;
    height:10px;
    background:rgba(255,255,255,.6);
    border-radius:50%;
    transform:scale(0);
    animation:ripple .6s linear;
}

@keyframes ripple{

    to{
        transform:scale(30);
        opacity:0;
    }

}

/* ==========================================
   NAVBAR MOBILE
========================================== */

@media (max-width:768px){

    .nav-menu{
        display:none;
    }

    .nav-actions{
        display:none;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        border-radius:50%;
        background:#EA580C;
        color:white;
        font-size:22px;
        cursor:pointer;
    }

}

@media (max-width:768px){

    .search-box{

        width:100%;
        margin-top:20px;

    }

    .search-box input{
        width:100%;
    }

}

@media (max-width:768px){

    .floating-button{

        right:14px;
        bottom:18px;
        padding:12px 18px;
        font-size:13px;
        border-radius:50px;

    }

}

/* ============================
   BUTTON CARD ZONAPRODUKID
============================ */

.btn-card{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width:100%;
    margin-top:18px;
    padding:13px 20px;

    background:linear-gradient(135deg,#ff6200,#ff8a24);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:15px;

    border-radius:14px;

    transition:.3s ease;
    box-shadow:0 12px 24px rgba(255,98,0,.25);
}

.btn-card:hover{
    transform:translateY(-3px);
    background:linear-gradient(135deg,#ff7b00,#ff5100);
    box-shadow:0 18px 35px rgba(255,98,0,.35);
}

/* ===========================================
   ZONAPRODUKID MOBILE RESPONSIVE PREMIUM
   Tempel PALING BAWAH style.css
=========================================== */

@media (max-width: 768px){

  html,body{
      overflow-x:hidden;
      width:100%;
  }

  .container{
      width:100%;
      padding:0 18px;
  }

  section{
      padding:60px 0;
  }

  /* ================= NAVBAR ================= */

  .navbar{
      padding:12px 18px;
  }

  .logo img{
      width:38px;
  }

  .logo h2{
      font-size:22px;
  }

  .nav-menu{
      position:fixed;
      top:72px;
      right:-100%;
      width:260px;
      height:100vh;
      background:#fff;
      display:flex;
      flex-direction:column;
      padding:30px;
      gap:20px;
      box-shadow:-10px 0 25px rgba(0,0,0,.08);
      transition:.35s;
      z-index:999;
  }

  .nav-menu.active{
      right:0;
  }

  .menu-toggle{
      display:flex;
  }

  .btn-login,
  .btn-belajar{
      display:none;
  }

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

  .hero{
      padding-top:40px;
  }

  .hero-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:40px;
  }

  .hero-left h1{
      font-size:40px;
      line-height:1.15;
  }

  .hero-left p{
      font-size:15px;
  }

  .hero-buttons{
      flex-direction:column;
      gap:14px;
  }

  .hero-buttons a{
      width:100%;
      justify-content:center;
  }

  .hero-right img{
      width:100%;
      max-width:340px;
      margin:auto;
      display:block;
  }

  .hero-stats{
      grid-template-columns:repeat(3,1fr);
      gap:10px;
  }

  .hero-stats .stat{
      padding:15px 10px;
  }

  .hero-stats h3{
      font-size:24px;
  }

  /* ================= SEARCH ================= */

  .search-box{
      flex-direction:column;
      padding:15px;
  }

  .search-box input{
      width:100%;
  }

  .search-box button{
      width:100%;
  }

  /* ================= GRID PRODUK ================= */

  .ebook-grid,
  .prompt-grid,
  .template-grid,
  .affiliate-grid,
  .article-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
  }

  .product-card{
      border-radius:22px;
  }

  .product-card img{
      width:100%;
      aspect-ratio:4/5;
      object-fit:cover;
  }

  .product-card h3{
      font-size:15px;
      min-height:44px;
  }

  .price{
      font-size:22px;
  }

  .btn-buy{
      width:100%;
      padding:12px;
      font-size:14px;
  }

  /* ================= BUNDLE BESAR ================= */

  .bundle-card{
      grid-column:span 2;
  }

  .bundle-card img{
      aspect-ratio:16/9;
      object-fit:cover;
  }

  /* ================= PROMPT AI ================= */

  .prompt-card img{
      aspect-ratio:1/1;
  }

  /* ================= TEMPLATE ================= */

  .template-card img{
      aspect-ratio:1/1;
  }

  /* ================= KATEGORI ================= */

  .category-grid{
      grid-template-columns:repeat(2,1fr);
      gap:16px;
  }

  /* ================= CTA ================= */

  .cta-box{
      padding:35px 20px;
      text-align:center;
  }

  .cta-box h2{
      font-size:34px;
  }

  .cta-form{
      flex-direction:column;
      gap:15px;
  }

  .cta-form input,
  .cta-form button{
      width:100%;
  }

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

  .footer-grid{
      grid-template-columns:1fr;
      gap:30px;
      text-align:center;
  }

  .footer-social{
      justify-content:center;
  }

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

  .floating-ebook{
      right:15px;
      bottom:15px;
      padding:12px 18px;
      font-size:14px;
  }

}

/* HP kecil */

@media (max-width:480px){

  .hero-left h1{
      font-size:34px;
  }

  .section-title{
      font-size:32px;
  }

  .ebook-grid,
  .prompt-grid,
  .template-grid,
  .affiliate-grid,
  .article-grid{
      gap:14px;
  }

  .product-card{
      padding:12px;
  }

  .product-card h3{
      font-size:14px;
  }

  .price{
      font-size:19px;
  }

}

/* ==========================================
   HERO MOBILE FIX - ZONAPRODUKID
   (GANTI BAGIAN FIX HERO LAMA)
========================================== */

@media (max-width:768px){

  .hero{
      padding:40px 0 50px;
      overflow:hidden;
  }

  /* HERO DESKTOP 2 KOLOM -> HP JADI 1 KOLOM */
  .hero-wrapper{
      display:flex;
      flex-direction:column;
      gap:35px;
      align-items:center;
  }

  /* BAGIAN TEKS */
  .hero-text{
      width:100%;
      order:1;
  }

  .hero-label{
      font-size:12px;
      padding:8px 14px;
      margin-bottom:18px;
  }

  .hero-text h1{
      font-size:40px;
      line-height:1.08;
      margin-bottom:18px;
      word-break:normal;
      overflow-wrap:break-word;
  }

  .hero-text p{
      font-size:15px;
      line-height:28px;
      margin-bottom:28px;
  }

  /* TOMBOL */
  .hero-button{
      display:flex;
      flex-direction:column;
      width:100%;
      gap:14px;
  }

  .hero-button a{
      width:100%;
      text-align:center;
  }

  /* INFO ANGKA */
  .hero-info{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
      width:100%;
  }

  .hero-info div{
      min-width:auto;
      padding:15px;
      text-align:center;
  }

  .hero-info h2{
      font-size:22px;
  }

  /* GAMBAR HERO */
  .hero-image{
      order:2;
      width:100%;
      text-align:center;
  }

  .hero-image img{
      width:100%;
      max-width:330px;
      height:auto;
  }

  /* Hilangkan badge yang bikin keluar layar */
  .hero-image::before,
  .hero-image::after{
      display:none;
  }

}

/* ==========================================
   MOBILE CLEAN VERSION - ZONAPRODUKID
========================================== */

@media (max-width:768px){

  /* ===== HILANGKAN BEST SELLER ===== */
  .promo-badge,
  .best-seller,
  .badge-best,
  .badge-seller{
      display:none !important;
  }

  /* ===== HILANGKAN TOMBOL NAVBAR HP ===== */
  .btn-belajar,
  .nav-action,
  .header-button{
      display:none !important;
  }

  /* ===== LOGO + NAMA TENGAH ===== */
  .navbar{
      justify-content:center;
      gap:12px;
      padding:16px 20px;
  }

  .logo{
      margin:0 auto;
  }

  /* ===== HERO BUNDLE ===== */
  .bundle-hero,
  .bundle-section{
      overflow:hidden;
      position:relative;
  }

  /* Lingkaran bonus AI */
  .bundle-bonus,
  .bonus-circle,
  .bonus-badge{
      display:none !important;
  }

  /* Ebook kecil kanan */
  .bundle-books,
  .bundle-image-small,
  .bundle-floating{
      display:none !important;
  }

  /* Tombol bonus jadi full */
  .bundle-buttons{
      display:flex;
      flex-direction:column;
      gap:14px;
  }

  .bundle-buttons a{
      width:100%;
      justify-content:center;
  }

}