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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#050816;
    color:white;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

/* NAVBAR */
.navbar{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    background:rgba(5,8,22,0.78);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:white;
    font-size:18px;
    font-weight:700;
}

.logo img{
    height:48px;
    width:auto;
}

.nav-links{
    display:flex;
    gap:30px;
    list-style:none;
}

.nav-links a{
    text-decoration:none;
    color:#cbd5e1;
    transition:0.3s;
    font-weight:500;
}

.nav-links a:hover{
    color:#3b82f6;
}

.menu-toggle{
    display:none;
    background:rgba(255,255,255,0.08);
    color:white;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    padding:8px 12px;
    font-size:24px;
    cursor:pointer;
}

/* HERO */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:130px 8% 90px;
    gap:60px;
}

.hero-left{
    flex:1;
}

.mini-text{
    color:#3b82f6;
    margin-bottom:20px;
    letter-spacing:2px;
    font-size:14px;
    font-weight:700;
}

.hero-left h1{
    font-size:clamp(42px, 7vw, 64px);
    line-height:1.1;
    margin-bottom:25px;
    letter-spacing:-2px;
}

.hero-desc{
    color:#94a3b8;
    font-size:18px;
    line-height:1.8;
    max-width:600px;
}

.hero-buttons{
    margin-top:40px;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
    padding:15px 30px;
    border-radius:14px;
    text-decoration:none;
    font-weight:700;
    transition:0.3s;
}

.btn-primary{
    background:#3b82f6;
    color:white;
    box-shadow:0 0 25px rgba(59,130,246,0.4);
}

.btn-primary:hover,
.btn-secondary:hover{
    transform:translateY(-3px);
}

.btn-secondary{
    border:1px solid rgba(255,255,255,0.15);
    color:rgb(240, 234, 231);
    background:rgba(224, 228, 16, 0.05);
}

.btn-secondary:hover{
    background:rgba(255,255,255,0.05);
}

/* HERO IMAGE */
.hero-right{
    flex:1;
    position:relative;
}

.hero-right img{
    width:100%;
    min-height:360px;
    object-fit:cover;
    border-radius:30px;
    position:relative;
    z-index:2;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 24px 80px rgba(0,0,0,0.35);
}

.glow{
    width:350px;
    height:350px;
    background:#2563eb;
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    opacity:0.35;
}

/* SERVICES */
.services{
    padding:100px 8%;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:clamp(34px, 5vw, 42px);
    margin-bottom:15px;
}

.section-title p{
    color:#94a3b8;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.card{
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.08);
    padding:35px;
    border-radius:24px;
    transition:0.3s;
}

.card:hover{
    transform:translateY(-8px);
    border-color:#3b82f6;
    background:rgba(59,130,246,0.08);
}

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

.card p{
    color:#94a3b8;
    line-height:1.7;
}

/* ABOUT */
.about{
    padding:100px 8%;
}

.about-box{
    background:linear-gradient(135deg, rgba(255,255,255,0.045), rgba(59,130,246,0.08));
    border-radius:30px;
    padding:60px;
    border:1px solid rgba(255,255,255,0.08);
}

.about-box h2{
    text-align:center;
    margin-bottom:50px;
    font-size:clamp(34px, 5vw, 42px);
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.about-card{
    background:#0f172a;
    padding:35px;
    border-radius:24px;
    text-align:center;
    border:1px solid rgba(255,255,255,0.06);
}

.about-card span{
    font-size:40px;
}

.about-card h3{
    margin-top:20px;
}

/* FOOTER */
footer{
    padding:50px 20px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,0.08);
}

footer h3{
    margin-bottom:10px;
    font-size:28px;
}

footer p{
    color:#94a3b8;
    margin:8px 0;
}

footer a{
    color:#93c5fd;
    text-decoration:none;
}

.small-text{
    font-size:14px;
}

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

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

/* RESPONSIVE */
@media(max-width:950px){
    .hero{
        flex-direction:column;
        text-align:center;
    }

    .hero-desc{
        margin:0 auto;
    }

    .hero-buttons{
        justify-content:center;
    }
}

@media(max-width:720px){
    .navbar{
        padding:16px 6%;
    }

    .logo span{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .nav-links{
        position:absolute;
        top:82px;
        left:6%;
        right:6%;
        display:none;
        flex-direction:column;
        gap:14px;
        padding:20px;
        border-radius:20px;
        background:#0f172a;
        border:1px solid rgba(255,255,255,0.08);
    }

    .nav-links.active{
        display:flex;
    }

    .hero{
        padding-top:120px;
    }

    .about-box{
        padding:35px 22px;
    }
}


.nav-cta{
    padding:10px 16px;
    border-radius:999px;
    background:rgba(59,130,246,0.16);
    color:#bfdbfe !important;
    border:1px solid rgba(147,197,253,0.22);
}

.order-cta{
    padding:40px 8% 110px;
}

.order-cta-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:42px;
    border-radius:30px;
    background:linear-gradient(135deg, rgba(59,130,246,0.18), rgba(255,255,255,0.035));
    border:1px solid rgba(147,197,253,0.18);
    box-shadow:0 24px 80px rgba(0,0,0,0.25);
}

.order-cta-box h2{
    font-size:clamp(30px, 5vw, 44px);
    margin-bottom:14px;
    letter-spacing:-1px;
}

.order-cta-box p:not(.mini-text){
    color:#94a3b8;
    line-height:1.7;
    max-width:720px;
}

.order-hero{
    min-height:100vh;
    padding:140px 8% 90px;
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:48px;
    align-items:start;
}

.order-intro{
    position:sticky;
    top:130px;
}

.order-intro h1{
    font-size:clamp(42px, 6vw, 64px);
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:22px;
}

.order-intro p:not(.mini-text){
    color:#94a3b8;
    line-height:1.8;
    font-size:18px;
}

.order-form{
    background:linear-gradient(135deg, rgba(255,255,255,0.055), rgba(15,23,42,0.92));
    border:1px solid rgba(255,255,255,0.1);
    border-radius:30px;
    padding:34px;
    box-shadow:0 24px 80px rgba(0,0,0,0.35);
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-bottom:20px;
}

.form-group label{
    color:#e2e8f0;
    font-weight:700;
    font-size:14px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    border:1px solid rgba(255,255,255,0.12);
    background:#0f172a;
    color:white;
    border-radius:16px;
    padding:15px 16px;
    font:inherit;
    outline:none;
    transition:0.25s;
}

.form-group textarea{
    resize:vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 4px rgba(59,130,246,0.14);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#64748b;
}

.form-note{
    color:#cbd5e1;
    background:rgba(59,130,246,0.1);
    border:1px solid rgba(147,197,253,0.16);
    padding:15px 18px;
    border-radius:16px;
    line-height:1.6;
    margin-bottom:24px;
}

.form-submit{
    border:none;
    cursor:pointer;
    width:100%;
    font-size:16px;
}
/* Banner Google Review */
.google-review-section {
  padding: 0 8% 40px;
}

.google-review-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 34px;
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    rgba(250, 204, 21, 0.12),
    rgba(59, 130, 246, 0.1)
  );
  border: 1px solid rgba(250, 204, 21, 0.18);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}

.google-review-box h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 10px;
  letter-spacing: -1px;
}

.google-review-box p:not(.mini-text) {
  color: #cbd5e1;
  line-height: 1.7;
  max-width: 720px;
}

/* Tombol ke Ulasan Google berwarna emas/kuning */
.btn-google-review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  padding: 15px 24px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  color: #0f172a;
  background: #facc15;
  transition: 0.3s;
}

.btn-google-review:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(250, 204, 21, 0.18);
}

@media(max-width:950px){
    .order-cta-box,
    .order-hero{
        grid-template-columns:1fr;
    }

    .order-cta-box{
        flex-direction:column;
        text-align:center;
    }

    .order-intro{
        position:static;
        text-align:center;
    }
}

@media(max-width:720px){
    .form-grid{
        grid-template-columns:1fr;
    }

    .order-form{
        padding:24px;
    }

    .order-hero{
        padding-left:6%;
        padding-right:6%;
    }
}


/* TESTIMONI */
.testimoni-hero{
    min-height:100vh;
    padding:140px 8% 80px;
}

.testimoni-hero .section-title h1{
    font-size:clamp(42px, 6vw, 64px);
    line-height:1.08;
    letter-spacing:-2px;
    margin-bottom:18px;
}

.testimoni-hero .section-title p:not(.mini-text){
    color:#94a3b8;
    max-width:760px;
    margin:0 auto;
    line-height:1.8;
}

.testimoni-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
    margin:10px auto 50px;
    max-width:980px;
}

.testimoni-stats div{
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:22px;
    padding:24px;
    text-align:center;
}

.testimoni-stats strong{
    display:block;
    font-size:24px;
    margin-bottom:8px;
}

.testimoni-stats span{
    color:#94a3b8;
    font-size:14px;
}

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:25px;
}

.testimonial-card{
    background:linear-gradient(135deg, rgba(255,255,255,0.055), rgba(15,23,42,0.92));
    border:1px solid rgba(255,255,255,0.09);
    border-radius:26px;
    padding:30px;
    box-shadow:0 22px 70px rgba(0,0,0,0.24);
    transition:0.3s;
}

.testimonial-card:hover{
    transform:translateY(-7px);
    border-color:rgba(147,197,253,0.35);
}

.stars{
    color:#facc15;
    letter-spacing:3px;
    margin-bottom:18px;
}

.testimonial-card p{
    color:#cbd5e1;
    line-height:1.8;
    margin-bottom:24px;
}

.customer{
    display:flex;
    align-items:center;
    gap:14px;
}

.customer span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(59,130,246,0.16);
    border:1px solid rgba(147,197,253,0.2);
    color:#bfdbfe;
    font-weight:800;
}

.customer strong,
.customer small{
    display:block;
}

.customer small{
    color:#94a3b8;
    margin-top:4px;
}

@media(max-width:720px){
    .testimoni-stats{
        grid-template-columns:1fr;
    }

    .testimoni-hero{
        padding-left:6%;
        padding-right:6%;
    }
}

/* BRAND REFINEMENT */
.hero-left h1 span{
    color:#93c5fd;
}

.company-name{
    color:#e2e8f0 !important;
    font-weight:700;
}

.brand-visual-card{
    width:100%;
    min-height:390px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:26px;
    padding:42px;
    border-radius:34px;
    position:relative;
    z-index:2;
    background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(226,232,240,0.94));
    border:1px solid rgba(255,255,255,0.22);
    box-shadow:0 28px 90px rgba(0,0,0,0.35);
    overflow:hidden;
}

.brand-visual-card::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(37,99,235,0.14);
    right:-90px;
    top:-90px;
}

.brand-logo-large{
    max-width:min(100%, 560px);
    max-height:230px;
    object-fit:contain;
    position:relative;
    z-index:1;
}

.brand-card-copy{
    text-align:center;
    color:#0f172a;
    position:relative;
    z-index:1;
}

.brand-card-copy span{
    display:block;
    color:#475569;
    font-size:18px;
    margin-bottom:8px;
}

.brand-card-copy strong{
    display:block;
    font-size:clamp(20px, 3vw, 30px);
    letter-spacing:-0.5px;
}

/* SERVICE DROPDOWN: different style from about cards */
.service-accordion-grid{
    align-items:start;
}

.service-drop{
    border:none;
    padding:0;
    border-radius:26px;
    background:linear-gradient(180deg, rgba(15,23,42,0.96), rgba(30,41,59,0.72));
    border:1px solid rgba(147,197,253,0.14);
    overflow:hidden;
    box-shadow:0 18px 55px rgba(0,0,0,0.18);
    transition:0.28s ease;
}

.service-drop:hover,
.service-drop[open]{
    transform:translateY(-5px);
    border-color:rgba(59,130,246,0.55);
    box-shadow:0 24px 70px rgba(37,99,235,0.14);
}

.service-drop summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:16px;
    padding:26px;
    min-height:120px;
}

.service-drop summary::-webkit-details-marker,
.about-card summary::-webkit-details-marker{
    display:none;
}

.service-drop summary::after{
    content:"+";
    margin-left:auto;
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(59,130,246,0.14);
    color:#bfdbfe;
    font-weight:800;
    font-size:20px;
    flex:0 0 auto;
    transition:0.25s;
}

.service-drop[open] summary::after{
    content:"−";
    background:#3b82f6;
    color:white;
}

.service-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:rgba(59,130,246,0.16);
    border:1px solid rgba(147,197,253,0.18);
    font-size:26px;
    flex:0 0 auto;
}

.service-drop strong{
    display:block;
    font-size:22px;
    margin-bottom:7px;
}

.service-drop small{
    color:#94a3b8;
    line-height:1.5;
}

.service-drop p{
    color:#cbd5e1;
    line-height:1.75;
    padding:0 26px 28px 96px;
}

/* ABOUT DROPDOWN */
.about-card{
    text-align:left;
}

.about-card summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0;
}

.about-card summary::after{
    content:"Lihat detail";
    display:inline-flex;
    margin-top:16px;
    padding:8px 13px;
    border-radius:999px;
    font-size:12px;
    color:#bfdbfe;
    background:rgba(59,130,246,0.13);
    border:1px solid rgba(147,197,253,0.16);
}

.about-card[open] summary::after{
    content:"Sembunyikan";
}

.about-card p{
    margin-top:20px;
    color:#cbd5e1;
    line-height:1.75;
    text-align:center;
}

/* PROFILE VIDEO */
.profile-video{
    padding:60px 8% 100px;
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:36px;
    align-items:center;
}

.video-copy h2{
    font-size:clamp(32px, 5vw, 48px);
    line-height:1.1;
    letter-spacing:-1px;
    margin-bottom:18px;
}

.video-copy p:not(.mini-text){
    color:#94a3b8;
    line-height:1.8;
    font-size:17px;
}

.video-frame{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    border-radius:30px;
    overflow:hidden;
    border:1px solid rgba(147,197,253,0.18);
    box-shadow:0 26px 90px rgba(0,0,0,0.34);
    background:#0f172a;
}

.video-frame iframe{
    width:100%;
    height:100%;
    border:0;
}

@media(max-width:950px){
    .profile-video{
        grid-template-columns:1fr;
        text-align:center;
        padding-top:30px;
    }

    .brand-visual-card{
        min-height:330px;
    }
}

@media(max-width:720px){
    .hero{
        gap:34px;
        padding:112px 6% 65px;
    }

    .hero-left h1{
        letter-spacing:-1px;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary,
    .order-cta-box .btn-primary{
        width:100%;
        text-align:center;
    }

    .brand-visual-card{
        min-height:260px;
        padding:26px 18px;
        border-radius:26px;
    }

    .brand-logo-large{
        max-height:150px;
    }

    .brand-card-copy span{
        font-size:14px;
    }

    .services,
    .about,
    .profile-video{
        padding-left:6%;
        padding-right:6%;
    }

    .service-grid{
        grid-template-columns:1fr;
    }

    .service-drop summary{
        padding:22px;
        min-height:auto;
    }

    .service-drop p{
        padding:0 22px 24px 22px;
    }

    .service-icon{
        width:48px;
        height:48px;
        border-radius:16px;
        font-size:23px;
    }

    .service-drop strong{
        font-size:19px;
    }

    .about-grid{
        grid-template-columns:1fr;
    }

    .about-card{
        padding:28px 22px;
    }

    .video-frame{
        border-radius:22px;
    }

    .order-cta{
        padding-left:6%;
        padding-right:6%;
    }

    .order-cta-box{
        padding:28px 20px;
    }
}

@media(max-width:420px){
    .nav-links{
        top:72px;
    }

    .hero-desc,
    .video-copy p:not(.mini-text),
    .order-cta-box p:not(.mini-text){
        font-size:15px;
    }

    .section-title{
        margin-bottom:34px;
    }
}

/* Fix brand logo inside hero card so it is not treated like a photo */
.hero-right .brand-logo-large{
    width:auto;
    min-height:0;
    border:none;
    box-shadow:none;
    border-radius:0;
}


/* =========================================
   14. SEO CONTENT, LOCAL AREA & FAQ
   ========================================= */
.seo-local-section,
.faq-section {
  padding: 30px 8% 80px;
}

.seo-local-box {
  border-radius: 30px;
  padding: 42px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(59, 130, 246, 0.12));
  border: 1px solid rgba(147, 197, 253, 0.16);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.seo-local-box h2 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.seo-local-box p {
  max-width: 920px;
  color: #cbd5e1;
  line-height: 1.8;
}

.keyword-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.keyword-pills span {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(147, 197, 253, 0.18);
  color: #dbeafe;
  font-weight: 700;
  font-size: 14px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.faq-card {
  border-radius: 22px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-card summary {
  cursor: pointer;
  font-weight: 800;
  color: #e2e8f0;
}

.faq-card p {
  color: #cbd5e1;
  line-height: 1.75;
  margin-top: 16px;
}

@media (max-width: 860px) {
  .seo-local-section,
  .faq-section {
    padding-left: 6%;
    padding-right: 6%;
  }

  .seo-local-box {
    padding: 28px 20px;
    text-align: center;
  }

  .keyword-pills {
    justify-content: center;
  }
}


/* =========================================
   15. NAVBAR RINGKAS + PROGRAM REFERRAL
   ========================================= */
.navbar{
    gap:24px;
}

.nav-links{
    align-items:center;
    gap:18px;
}

.nav-links a{
    font-size:14px;
    white-space:nowrap;
}

.nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(59,130,246,0.16);
    color:#bfdbfe !important;
    border:1px solid rgba(147,197,253,0.22);
}

.nav-cta:hover{
    background:#3b82f6;
    color:white !important;
}

.input-hint,
.optional-label{
    color:#94a3b8;
    font-size:12px;
    font-weight:500;
}

.section-anchor{
    position:relative;
    top:-110px;
}

.order-referral-alert{
    margin-top:24px;
    padding:16px 18px;
    border-radius:18px;
    color:#dbeafe;
    background:rgba(59,130,246,0.12);
    border:1px solid rgba(147,197,253,0.18);
    line-height:1.6;
}

.referral-preview{
    padding:40px 8% 80px;
}

.referral-preview-box,
.referral-calculator,
.mini-referral-cta{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:34px;
    align-items:center;
    border-radius:32px;
    padding:42px;
    background:linear-gradient(135deg, rgba(59,130,246,0.15), rgba(15,23,42,0.94));
    border:1px solid rgba(147,197,253,0.18);
    box-shadow:0 24px 80px rgba(0,0,0,0.25);
}

.referral-preview h2,
.referral-calculator h2,
.mini-referral-cta h2{
    font-size:clamp(30px, 5vw, 44px);
    line-height:1.1;
    letter-spacing:-1px;
    margin-bottom:16px;
}

.referral-preview p,
.referral-calculator p,
.mini-referral-cta p{
    color:#cbd5e1;
    line-height:1.8;
}

.referral-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:28px;
}

.referral-mini-card,
.commission-card,
.calculator-box,
.referral-form-card{
    background:linear-gradient(180deg, rgba(15,23,42,0.96), rgba(30,41,59,0.72));
    border:1px solid rgba(147,197,253,0.16);
    border-radius:28px;
    padding:30px;
    box-shadow:0 20px 70px rgba(0,0,0,0.22);
}

.referral-badge,
.commission-number{
    display:inline-grid;
    place-items:center;
    width:92px;
    height:92px;
    border-radius:26px;
    background:#3b82f6;
    color:white;
    font-size:34px;
    font-weight:900;
    box-shadow:0 18px 45px rgba(59,130,246,0.25);
    margin-bottom:20px;
}

.referral-mini-card h3,
.commission-card h2,
.referral-form-card h3{
    font-size:26px;
    margin-bottom:12px;
}

.referral-mini-card ul{
    margin-top:18px;
    padding-left:20px;
    color:#cbd5e1;
    line-height:1.9;
}

.referral-hero{
    min-height:100vh;
    padding:140px 8% 90px;
    display:grid;
    grid-template-columns:1fr 0.82fr;
    gap:46px;
    align-items:center;
}

.referral-intro h1{
    font-size:clamp(42px, 6vw, 66px);
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:24px;
}

.referral-intro p{
    color:#94a3b8;
    line-height:1.85;
    font-size:18px;
    max-width:680px;
}

.commission-card{
    position:relative;
    overflow:hidden;
}

.commission-card::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-100px;
    top:-100px;
    border-radius:50%;
    background:rgba(59,130,246,0.16);
    filter:blur(8px);
}

.commission-card > *{
    position:relative;
    z-index:1;
}

.commission-example{
    margin-top:22px;
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.08);
}

.commission-example span,
.commission-example small{
    display:block;
    color:#94a3b8;
}

.commission-example strong{
    display:block;
    margin:8px 0;
    color:#e2e8f0;
    font-size:18px;
}

.referral-flow,
.referral-forms,
.referral-terms{
    padding:80px 8%;
}

.flow-grid,
.terms-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:22px;
}

.flow-card{
    padding:28px;
    border-radius:26px;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.08);
    transition:0.3s;
}

.flow-card:hover{
    transform:translateY(-6px);
    border-color:rgba(147,197,253,0.35);
}

.flow-card span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:rgba(59,130,246,0.16);
    border:1px solid rgba(147,197,253,0.2);
    color:#bfdbfe;
    font-weight:900;
    margin-bottom:20px;
}

.flow-card h3{
    font-size:22px;
    margin-bottom:12px;
}

.flow-card p{
    color:#94a3b8;
    line-height:1.75;
}

.referral-calculator{
    margin:20px 8% 50px;
}

.calculator-box{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.calculator-box label{
    font-weight:800;
}

.calculator-box input{
    width:100%;
    border:1px solid rgba(255,255,255,0.12);
    background:#0f172a;
    color:white;
    border-radius:16px;
    padding:15px 16px;
    font:inherit;
    outline:none;
}

.calculator-box strong{
    font-size:24px;
    color:#bfdbfe;
}

.calculator-box small{
    color:#94a3b8;
    line-height:1.6;
}

.referral-form-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:26px;
    align-items:start;
}

.form-card-desc{
    color:#94a3b8;
    line-height:1.7;
    margin-bottom:24px;
}

.referral-code-preview{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:18px 0 24px;
    padding:18px;
    border-radius:18px;
    background:rgba(59,130,246,0.1);
    border:1px solid rgba(147,197,253,0.16);
    overflow-wrap:anywhere;
}

.referral-code-preview span,
.referral-code-preview small{
    color:#94a3b8;
}

.referral-code-preview strong{
    font-size:24px;
    color:#dbeafe;
}

.btn-copy{
    align-self:flex-start;
    border:none;
    cursor:pointer;
    border-radius:12px;
    padding:10px 14px;
    color:#0f172a;
    background:#facc15;
    font-weight:800;
}

.mini-referral-cta{
    margin:0 8% 50px;
}

@media(max-width:1050px){
    .nav-links{
        gap:12px;
    }

    .nav-links a{
        font-size:13px;
    }
}

@media(max-width:950px){
    .referral-hero,
    .referral-preview-box,
    .referral-calculator,
    .mini-referral-cta{
        grid-template-columns:1fr;
        text-align:center;
    }

    .referral-intro p{
        margin:0 auto;
    }

    .referral-actions,
    .mini-referral-cta{
        justify-content:center;
    }

    .referral-form-grid{
        grid-template-columns:1fr;
    }

    .commission-card,
    .referral-mini-card,
    .calculator-box{
        text-align:left;
    }
}

@media(max-width:720px){
    .nav-links{
        gap:12px;
    }

    .nav-links a,
    .nav-links .nav-cta{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:12px 14px;
        border-radius:14px;
        background:rgba(255,255,255,0.035);
    }

    .nav-links .nav-cta{
        justify-content:center;
        background:#3b82f6;
        color:white !important;
    }

    .referral-hero,
    .referral-flow,
    .referral-forms,
    .referral-terms,
    .referral-preview{
        padding-left:6%;
        padding-right:6%;
    }

    .referral-hero{
        padding-top:120px;
    }

    .referral-preview-box,
    .referral-calculator,
    .mini-referral-cta{
        padding:28px 20px;
        border-radius:26px;
    }

    .referral-calculator,
    .mini-referral-cta{
        margin-left:6%;
        margin-right:6%;
    }

    .referral-actions .btn-primary,
    .referral-actions .btn-secondary,
    .referral-hero .btn-primary,
    .referral-hero .btn-secondary,
    .mini-referral-cta .btn-secondary{
        width:100%;
        text-align:center;
    }
}


/* =========================================
   BLOG & ARTICLE PAGES
   ========================================= */
.footer-links{
    margin-top:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.footer-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 13px;
    border-radius:999px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.08);
    color:#bfdbfe;
    font-weight:700;
    font-size:14px;
}

.blog-preview,
.blog-page,
.article-page{
    padding-left:8%;
    padding-right:8%;
}

.blog-preview{
    padding-top:40px;
    padding-bottom:90px;
}

.blog-page{
    min-height:100vh;
    padding-top:140px;
    padding-bottom:100px;
}

.blog-hero,
.article-hero{
    max-width:930px;
    margin:0 auto 52px;
    text-align:center;
}

.blog-hero h1,
.article-hero h1{
    font-size:clamp(40px, 6vw, 64px);
    line-height:1.08;
    letter-spacing:-2px;
    margin-bottom:20px;
}

.blog-hero p:not(.mini-text),
.article-hero p:not(.mini-text){
    color:#94a3b8;
    line-height:1.8;
    font-size:18px;
}

.article-list,
.blog-preview-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
}

.article-card{
    background:linear-gradient(135deg, rgba(255,255,255,0.055), rgba(15,23,42,0.94));
    border:1px solid rgba(147,197,253,0.13);
    border-radius:26px;
    padding:20px;
    box-shadow:0 24px 72px rgba(0,0,0,0.24);
    transition:0.28s ease;
    overflow:hidden;
}

.article-card:hover{
    transform:translateY(-7px);
    border-color:rgba(59,130,246,0.45);
}

.article-card-image{
    display:block;
    margin:-20px -20px 20px;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#0f172a;
}

.article-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.45s ease;
}

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

.blog-category{
    display:inline-flex;
    align-items:center;
    margin-bottom:14px;
    padding:8px 12px;
    border-radius:999px;
    color:#bfdbfe;
    background:rgba(59,130,246,0.14);
    border:1px solid rgba(147,197,253,0.16);
    font-size:13px;
    font-weight:800;
}

.article-card h2,
.article-card h3{
    font-size:clamp(22px, 3vw, 28px);
    line-height:1.18;
    letter-spacing:-0.5px;
    margin-bottom:14px;
}

.article-card h2 a,
.article-card h3 a{
    color:white;
    text-decoration:none;
}

.article-card h2 a:hover,
.article-card h3 a:hover{
    color:#93c5fd;
}

.article-card p{
    color:#94a3b8;
    line-height:1.75;
    margin-bottom:18px;
}

.read-more{
    display:inline-flex;
    color:#93c5fd;
    text-decoration:none;
    font-weight:800;
}

.read-more::after{
    content:"→";
    margin-left:8px;
    transition:0.25s;
}

.read-more:hover::after{
    transform:translateX(4px);
}

.blog-more{
    margin-top:34px;
    display:flex;
    justify-content:center;
}

.article-page{
    padding-top:140px;
    padding-bottom:95px;
}

.article-shell{
    max-width:980px;
    margin:0 auto;
    overflow:hidden;
    border-radius:32px;
    background:linear-gradient(135deg, rgba(255,255,255,0.055), rgba(15,23,42,0.94));
    border:1px solid rgba(147,197,253,0.14);
    box-shadow:0 28px 90px rgba(0,0,0,0.28);
}

.article-cover{
    margin:0;
    background:#0f172a;
}

.article-cover img{
    width:100%;
    max-height:430px;
    object-fit:cover;
}

.article-cover figcaption{
    color:#94a3b8;
    font-size:13px;
    line-height:1.6;
    padding:12px 22px 0;
}

.article-content{
    padding:46px;
}

.article-content p,
.article-content li{
    color:#cbd5e1;
    line-height:1.9;
    font-size:17px;
}

.article-content p{
    margin-bottom:20px;
}

.article-content h2{
    font-size:clamp(27px, 4vw, 34px);
    line-height:1.18;
    margin:36px 0 16px;
    letter-spacing:-0.7px;
}

.article-content ul{
    margin:0 0 22px 22px;
}

.article-content li{
    margin-bottom:10px;
}

.article-cta{
    margin-top:44px;
    padding:30px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(59,130,246,0.16), rgba(255,255,255,0.04));
    border:1px solid rgba(147,197,253,0.18);
}

.article-cta h2{
    margin-top:0;
}

.related-articles{
    max-width:980px;
    margin:36px auto 0;
    padding:26px;
    border-radius:26px;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.08);
}

.related-articles h2{
    margin-bottom:16px;
    font-size:26px;
}

.related-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.related-links a{
    color:#bfdbfe;
    text-decoration:none;
    font-weight:800;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(59,130,246,0.12);
    border:1px solid rgba(147,197,253,0.16);
}

@media(max-width:1050px){
    .article-list,
    .blog-preview-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:720px){
    .blog-preview,
    .blog-page,
    .article-page{
        padding-left:6%;
        padding-right:6%;
    }

    .blog-page,
    .article-page{
        padding-top:120px;
    }

    .article-list,
    .blog-preview-grid{
        grid-template-columns:1fr;
    }

    .article-content{
        padding:28px 22px;
    }

    .article-cover img{
        max-height:280px;
    }

    .article-cover figcaption{
        padding:10px 18px 0;
    }

    .article-cta{
        padding:24px 20px;
    }

    .article-cta .btn-primary,
    .blog-more .btn-secondary{
        width:100%;
        text-align:center;
    }
}

/* ===== merged from style-fix.css (contrast & polish patch) ===== */
/* OTWIT.ID UI polish patch
   Letakkan setelah style.css dan ecommerce.css:
   <link rel="stylesheet" href="style-fix.css?v=1">
*/
:root{
  --otw-bg:#050816;
  --otw-surface:#0f172a;
  --otw-surface-soft:rgba(255,255,255,.045);
  --otw-border:rgba(147,197,253,.18);
  --otw-text:#f8fafc;
  --otw-muted:#94a3b8;
  --otw-primary:#3b82f6;
  --otw-primary-dark:#2563eb;
  --otw-primary-soft:rgba(59,130,246,.14);
  --otw-accent:#facc15;
}

body{background:var(--otw-bg);color:var(--otw-text);}

.navbar{
  background:rgba(5,8,22,.86);
  border-bottom:1px solid rgba(147,197,253,.12);
}
.nav-links{gap:18px;align-items:center;}
.nav-links a{color:#cbd5e1;font-weight:600;}
.nav-links a:hover{color:#bfdbfe;}
.nav-links .nav-cta,
.nav-cta{
  background:linear-gradient(135deg,var(--otw-primary),var(--otw-primary-dark));
  color:#fff!important;
  border:1px solid rgba(191,219,254,.28);
  box-shadow:0 12px 32px rgba(37,99,235,.28);
}

.btn-primary,
.product-actions .btn-primary,
.detail-actions .btn-primary{
  background:linear-gradient(135deg,var(--otw-primary),var(--otw-primary-dark));
  color:#fff!important;
  border:1px solid rgba(191,219,254,.22);
  box-shadow:0 16px 40px rgba(37,99,235,.26);
}
.btn-primary:hover,
.product-actions .btn-primary:hover,
.detail-actions .btn-primary:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
}

.btn-secondary,
.product-actions .btn-secondary,
.detail-actions .btn-secondary{
  color:#dbeafe!important;
  background:rgba(15,23,42,.58);
  border:1px solid rgba(147,197,253,.24);
  box-shadow:none;
}
.btn-secondary:hover,
.product-actions .btn-secondary:hover,
.detail-actions .btn-secondary:hover{
  background:rgba(59,130,246,.12);
  border-color:rgba(147,197,253,.42);
}

.btn-google-review,
.btn-copy{
  background:var(--otw-accent);
  color:#0f172a!important;
  border:0;
}

.card,
.about-card,
.faq-card,
.article-card,
.product-card,
.checkout-card,
.status-card,
.shop-note-card,
.info-note,
.article-content,
.order-form{
  background:var(--otw-surface-soft);
  border-color:rgba(147,197,253,.14);
}
.card:hover,
.article-card:hover,
.product-card:hover{
  border-color:rgba(147,197,253,.42);
  background:rgba(59,130,246,.075);
}

.hero-desc,
.section-title p,
.card p,
.article-card p,
.product-card p,
.article-content p,
.order-form label,
.input-hint,
.optional-label,
footer p{color:var(--otw-muted);}

.product-price{color:#bfdbfe;letter-spacing:-.3px;}
.product-badge,
.product-category-pill,
.blog-category,
.keyword-pills span{
  color:#dbeafe;
  background:rgba(59,130,246,.14);
  border:1px solid rgba(147,197,253,.18);
}

input,select,textarea{
  background:#08111f!important;
  color:#f8fafc!important;
  border-color:rgba(147,197,253,.18)!important;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(59,130,246,.32);
  border-color:rgba(147,197,253,.42)!important;
}

footer a{color:#bfdbfe;}
footer a:hover{color:#fff;}

@media(max-width:720px){
  .nav-links{
    background:#0b1227;
    border:1px solid rgba(147,197,253,.16);
    box-shadow:0 20px 60px rgba(0,0,0,.35);
  }
  .nav-links a,
  .nav-links .nav-cta{
    justify-content:center;
    text-align:center;
  }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary,
  .product-actions .btn-primary,
  .product-actions .btn-secondary,
  .detail-actions .btn-primary,
  .detail-actions .btn-secondary{
    width:100%;
    text-align:center;
  }
}