/* CSS Variables & Core Styles matching index (2).html */
:root{
  --deep:#0B2A3A; --navy:#0E4F73; --brand:#0E6C9F; --brand-2:#146FA3;
  --cyan:#23B0E0; --cyan-soft:#6DB1D5; --tint:#EAF5FB; --tint-2:#F4FAFD;
  --ink:#13323F; --muted:#5B7282; --line:#E2ECF2; --white:#fff;
  --cta:#F5A623; --cta-dark:#D98A0B; --ok:#1FA463; --danger:#D93025; --warning:#FCE8E6;
  --grad:linear-gradient(135deg,#0E6C9F 0%,#23B0E0 100%);
  --grad-deep:linear-gradient(135deg,#0B2A3A 0%,#0E4F73 55%,#0E6C9F 100%);
  --shadow:0 10px 30px rgba(14,79,115,.10); --shadow-lg:0 24px 60px rgba(11,42,58,.18);
  --radius:16px; --maxw:1180px;
  --font:'Inter', 'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* SEO Standard Base Font Size */
body{font-family:var(--font);color:var(--ink);font-size:16px;line-height:1.65;background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:80px 0}
h1,h2,h3{line-height:1.3;color:var(--deep);letter-spacing:-.01em;font-weight:800}
h2{font-size:32px;margin-bottom:12px}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:var(--tint);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.lead{font-size:18px;color:var(--muted)}
.center{text-align:center}
.center .lead{max-width:660px;margin:10px auto 0}

/* Buttons - SEO touch targets */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;padding:16px 28px;border-radius:999px;cursor:pointer;border:0;transition:.2s;white-space:nowrap;justify-content:center;min-height:48px}
.btn-cta{background:var(--cta);color:#3a2600;box-shadow:0 8px 20px rgba(245,166,35,.35)}
.btn-cta:hover{background:var(--cta-dark);transform:translateY(-2px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(14,108,159,.35)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* Hero - Premium Deep Navy with Background Image */
.hero{background:var(--grad-deep);color:#fff;position:relative;overflow:hidden;padding:0 0 100px}
.hero::before{content:'';position:absolute;inset:0;background:url('https://www.banyumedia.co.id/wp-content/uploads/2021/06/jasa-pasang-iklan-google-ads-indonesia-murah.jpg') center/cover;opacity:0.25;mix-blend-mode:luminosity}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, transparent, var(--deep));opacity:0.8}
.hero .wrap{margin-top:50px;position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{color:#fff;font-size:46px;line-height:1.2;margin-bottom:16px}
.hero h1 span{background:linear-gradient(90deg,#7FE0FF,#23B0E0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:18px;line-height:1.6;color:#D6EAF4;margin-bottom:30px;max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.badges{display:flex;gap:24px;margin-top:40px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:10px;font-size:14px;color:#EaF5FB}
.badge b{display:block;font-size:20px;color:#fff;line-height:1;margin-bottom:4px}
.hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:30px;backdrop-filter:blur(6px)}
.gp{display:flex;align-items:center;gap:16px;background:#fff;color:var(--ink);border-radius:16px;padding:16px 20px;margin-bottom:20px}
.gp .g{font-size:28px}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini div{background:rgba(255,255,255,.1);border-radius:12px;padding:16px}
.mini b{font-size:22px;color:#7FE0FF;display:block;margin-bottom:4px}
.mini small{color:#C9E3F0;font-size:13px;line-height:1.4}

/* Urgent Warning Box */
.warning-wrap{padding:40px 0 0;}
.urgent-notice{display:flex;gap:20px;align-items:center;background:var(--warning);border:1px solid #fad2cf;border-left:6px solid var(--danger);border-radius:16px;padding:24px 30px;box-shadow:var(--shadow)}
.urgent-notice .ic{flex:0 0 auto;font-size:40px;animation: pulse 2s infinite}
.urgent-notice h3{color:var(--danger);font-size:18px;margin-bottom:6px;font-weight:800}
.urgent-notice p{color:#8a1c13;font-size:15px;margin:0;line-height:1.5}
@keyframes pulse { 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} }

/* Sapaan (Greeting) */
/* Smart Section (Modern Stats & Agitation) */
.smart-section { padding: 100px 0; background: #fcfdfe; position: relative; }
.smart-header { text-align: center; margin-bottom: 60px; }
.smart-header h2 { font-size: 38px; line-height: 1.3; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 60px; }
.stat-card { background: var(--white); padding: 40px 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(11, 42, 58, 0.05); text-align: center; transition: transform 0.3s; border: 1px solid var(--line); }
.stat-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(11, 42, 58, 0.08); }
.stat-icon { font-size: 40px; margin-bottom: 20px; }
.stat-card h3 { font-size: 48px; color: var(--brand); margin-bottom: 12px; background: var(--grad); -webkit-background-clip: text; color: transparent; font-weight: 800; }
.stat-card p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.agitation-box { background: var(--tint); border: 1px solid var(--line); border-radius: 20px; padding: 40px; margin-bottom: 60px; box-shadow: 0 10px 30px rgba(11, 42, 58, 0.05); }
.agitation-content h3 { color: var(--brand); font-size: 26px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
.agitation-content ul { list-style: none; padding: 0; }
.agitation-content li { font-size: 18px; color: var(--ink); margin-bottom: 16px; display: flex; align-items: flex-start; gap: 14px; background: #fff; padding: 16px 20px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.agitation-content li i { color: var(--cta); font-size: 20px; font-weight: bold; font-style: normal; margin-top: 2px; }
.smart-quote { text-align: center; margin-bottom: 60px; }
.smart-quote blockquote { font-size: 28px; font-weight: 800; color: var(--deep); max-width: 800px; margin: 0 auto; line-height: 1.4; position: relative; }
.smart-quote blockquote::before, .smart-quote blockquote::after { content: '"'; color: var(--cyan-soft); opacity: 0.3; font-size: 60px; position: absolute; }
.smart-quote blockquote::before { top: -20px; left: -30px; }
.smart-quote blockquote::after { bottom: -40px; right: -30px; }
.smart-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.st-card { background: var(--white); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(11, 42, 58, 0.05); border-top: 4px solid var(--brand); }
.st-card.warning { border-top: 4px solid var(--cta); }
.st-card h4 { font-size: 22px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.st-card p { color: var(--muted); font-size: 16px; line-height: 1.7; }
@media (max-width: 920px) {
  .smart-section { padding: 60px 0; }
  .stats-grid, .smart-text-grid { grid-template-columns: 1fr; }
  .smart-header h2 { font-size: 28px; }
  .smart-quote blockquote { font-size: 20px; padding: 0 20px; }
  .stat-card h3 { font-size: 38px; }
  .agitation-box { padding: 24px; }
  .st-card { padding: 24px; }
}

/* Banyumedia itu Apa (AI Overview Optimized) */
.about-ai{background:var(--tint-2);padding:80px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-ai h2{font-size:32px;margin-bottom:20px}
.about-ai p{font-size:16px;margin-bottom:16px;color:var(--muted);line-height:1.7}
.about-ai strong{color:var(--deep)}

/* Grid System (Cards) */
.grid{display:grid;gap:24px}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#CFE6F2}
.ic-box{width:54px;height:54px;border-radius:14px;background:var(--tint);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px}
.card h3{font-size:19px;margin-bottom:10px;color:var(--deep)}
.card p{color:var(--muted);font-size:15px;line-height:1.6}

/* Tim Beraktivitas (Gallery Masonry-ish) */
.gallery-section{background:var(--white)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gal-item{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative;group}
.gal-item img{width:100%;height:260px;object-fit:cover;transition:transform 0.5s}
.gal-item:hover img{transform:scale(1.05)}
.gal-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top, rgba(11,42,58,0.95), transparent);color:#fff;padding:40px 20px 20px;font-size:15px;font-weight:600;transform:translateY(10px);opacity:0;transition:all 0.3s;line-height:1.4}
.gal-item:hover .gal-caption{transform:translateY(0);opacity:1}

/* HTML Stepper (SEO Steps) */
.process{background:var(--tint-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.steps::before{content:'';position:absolute;top:28px;left:50px;right:50px;height:2px;background:var(--line);z-index:1}
.step{position:relative;z-index:2;text-align:center;background:#fff;padding:30px 20px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
.step .n{width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 6px 15px rgba(35,176,224,.3)}
.step h3{font-size:18px;margin-bottom:10px}
.step p{font-size:15px;color:var(--muted);line-height:1.6}

/* Testimonials (WA Masonry) */
.testi-section{background:var(--deep);color:#fff}
.testi-section h2{color:#fff}
.testi-section .lead{color:#D6EAF4}
.testi-section .eyebrow{background:rgba(255,255,255,.1);color:#7FE0FF}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wa-mockup{background:#e5ddd5;border-radius:24px;padding:16px;box-shadow:var(--shadow-lg);border:6px solid #222;display:flex;align-items:center;justify-content:center}
.wa-mockup img{width:100%;border-radius:12px;object-fit:contain}

/* Pricing / Investasi */
.pricing-section{background:var(--white)}
.price-box{background:var(--grad);border-radius:24px;padding:50px;color:#fff;text-align:center;max-width:800px;margin:0 auto;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.price-box::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--cta)}
.price-box h3{color:#fff;font-size:28px;margin-bottom:16px}
.price-val{font-size:42px;font-weight:900;margin:20px 0;text-shadow:0 2px 10px rgba(0,0,0,0.2);line-height:1}
.price-val span{font-size:18px;font-weight:400;opacity:0.8;display:inline-block;margin-left:6px}
.price-desc{font-size:17px;color:#EaF5FB;max-width:600px;margin:0 auto 30px;line-height:1.6}

/* Clients (Sleek Full Color) */
.clients-section{background:var(--tint-2)}
.client-wrap{background:#fff;border-radius:24px;padding:50px;box-shadow:var(--shadow);border:1px solid var(--line)}
.client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:center;justify-items:center;margin-top:30px}
.client-logo img{max-height:60px;transition:all 0.3s ease}
.client-logo:hover img{transform:scale(1.08)}

/* FAQ (Accordion) */
.faq-section{background:var(--white)}
.faq-wrapper{max-width:800px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:16px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,0.02)}
.faq-summary{cursor:pointer;padding:20px 24px;font-weight:700;color:var(--deep);display:flex;justify-content:space-between;align-items:center;font-size:17px}
.faq-summary::after{content:'+';font-size:24px;color:var(--brand);transition:transform 0.3s;line-height:1}
.faq-item.active .faq-summary::after{transform:rotate(45deg)}
.faq-content{padding:0 24px 24px;color:var(--muted);font-size:16px;display:none;line-height:1.6}
.faq-item.active .faq-content{display:block}

/* Blog */
.blog-section{background:var(--tint-2)}
.blog-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column}
.blog-img{height:200px;background:var(--line);overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-body{padding:26px;flex:1;display:flex;flex-direction:column}
.blog-cat{display:inline-block;font-size:13px;font-weight:700;color:var(--brand);background:var(--tint);padding:6px 12px;border-radius:6px;margin-bottom:14px;align-self:flex-start}
.blog-body h3{font-size:19px;margin-bottom:12px;line-height:1.4}
.blog-body p{color:var(--muted);font-size:15px;margin-bottom:20px;line-height:1.6;flex:1}

/* Final CTA */
.cta-band{background:var(--grad-deep);color:#fff;text-align:center;border-radius:24px;padding:70px 40px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:40px}
.cta-band h2{color:#fff;font-size:36px;margin-bottom:20px}
.cta-band p{color:#D6EAF4;font-size:18px;max-width:600px;margin:0 auto 34px;line-height:1.6}

/* MOBILE RESPONSIVE OPTIMIZATION (SEO Standards) */
@media(max-width:920px){
  .hero .wrap, .about-grid{grid-template-columns:1fr;gap:40px}
  .g3, .gal-grid, .testi-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps::before{display:none}
  .client-grid{grid-template-columns:repeat(3,1fr)}
  h2{font-size:30px}
  .hero h1{font-size:40px}
  .hero .wrap{text-align:center}
  .hero p{margin-left:auto; margin-right:auto}
  .hero-cta{justify-content:center}
  .badges{justify-content:center}
}
@media(max-width:600px){
  section{padding:50px 0}
  h2{font-size:26px;margin-bottom:10px}
  .lead{font-size:16px}
  
  .hero{padding:90px 0 50px}
  .hero h1{font-size:32px;line-height:1.3}
  .hero p{font-size:16px;margin-bottom:24px}
  .hero-card{padding:24px}
  
  .g3, .gal-grid, .testi-grid, .steps{grid-template-columns:1fr}
  .client-grid{grid-template-columns:repeat(2,1fr); gap:20px}
  .client-wrap{padding:30px 20px}
  
  .price-box{padding:34px 20px}
  .price-box h3{font-size:24px}
  .price-val{font-size:32px}
  .price-desc{font-size:15px}
  
  .cta-band{padding:40px 20px}
  .cta-band h2{font-size:26px}
  .cta-band p{font-size:16px}
  
  .urgent-notice{flex-direction:column; text-align:center; padding:24px 20px}
  .urgent-notice .ic{font-size:36px}
  
  .badges{gap:12px; flex-direction:column; align-items:center}
  .badge{flex-direction:column; gap:4px; text-align:center}
  .badge b{font-size:22px}
  
  .btn{width:100%; justify-content:center; font-size:16px; padding:16px 20px}
  .hero-cta{flex-direction:column; width:100%}
  .hero-cta .btn{width:100%}
  
  .mini{grid-template-columns:1fr}
  .gp{flex-direction:column; text-align:center; padding:16px}
  
  .faq-summary{padding:18px 20px; font-size:16px}
  .faq-content{padding:0 20px 20px; font-size:15px}
  
  .card{padding:24px}
  .step{padding:24px 20px}
  
  .letter{font-size:16px}
  .letter h2{font-size:26px}
  .letter ul{padding-left:20px}
  
  .blog-img{height:180px}
  .blog-body{padding:20px}
  .blog-body h3{font-size:18px}
  
  .wa-mockup{border-width:4px; padding:10px}
}