/*
Theme Name: Stroban App Landing
Theme URI: https://bengkelstroban.com
Author: Stroban Auto
Author URI: https://bengkelstroban.com
Description: Landing page tema WordPress untuk mengenalkan Aplikasi Stroban — booking servis tanpa antre, poin & reward, promo bulanan. Dibangun sebagai single-page landing dengan gaya visual "tiket servis bengkel".
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stroban-app
*/

/* ==========================================================================
   0. TOKENS
   ========================================================================== */
:root{
  /* colors */
  --ink:        #14171A;   /* near-black, warm */
  --asphalt:    #1F2328;   /* dark panel bg */
  --asphalt-2:  #2A2F36;
  --orange:     #FF5A1F;   /* signal orange - primary accent */
  --orange-dim: #FF7A45;
  --gold:       #D4A93E;   /* poin / reward accent */
  --steel:      #6B7480;   /* muted secondary text on light */
  --steel-lt:   #9AA3AF;   /* muted secondary text on dark */
  --paper:      #F6F4EF;   /* warm off-white bg */
  --paper-dim:  #ECE8DF;
  --line:       #DEDACF;   /* hairline on paper */
  --line-dark:  #3A3F46;   /* hairline on dark */
  --white:      #FFFFFF;

  /* type */
  --f-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* layout */
  --maxw: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--f-display); margin:0; line-height:1.08; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:16px; height:1px;
  background:var(--orange);
  display:inline-block;
}
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(28px,4vw,40px); margin-top:14px; }
.section-head p{ color:var(--steel); margin-top:14px; font-size:16.5px; }
.section-head.on-dark p{ color:var(--steel-lt); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

section{ padding:88px 0; }
@media (max-width:720px){ section{ padding:60px 0; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px;
  border-radius:100px;
  font-weight:600; font-size:15px;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--orange); color:var(--white); }
.btn-primary:hover{ background:var(--orange-dim); }
.btn-outline-dark{ border-color:var(--line-dark); color:var(--white); }
.btn-outline-dark:hover{ border-color:var(--orange); }
.btn-outline-light{ border-color:var(--line); color:var(--ink); }
.btn-outline-light:hover{ border-color:var(--orange); color:var(--orange); }
.btn-ghost{ color:var(--ink); padding:15px 4px; }
.btn-ghost svg{ transition:transform .15s ease; }
.btn-ghost:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   1. HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(20,23,26,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:700; font-size:20px;
  color:var(--white);
}
.logo .dot{ color:var(--orange); }
.main-nav ul{ display:flex; gap:34px; }
.main-nav a{
  color:var(--steel-lt); font-size:14.5px; font-weight:500;
  transition:color .15s ease;
}
.main-nav a:hover{ color:var(--white); }
.header-actions{ display:flex; align-items:center; gap:18px; }
.nav-toggle{
  display:none; background:none; border:0; padding:8px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:var(--white);
  position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

@media (max-width:900px){
  .main-nav{
    position:fixed; inset:76px 0 0 0; background:var(--ink);
    padding:32px 24px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:.2s ease;
  }
  .main-nav ul{ flex-direction:column; gap:22px; }
  .main-nav a{ font-size:20px; }
  body.nav-open .main-nav{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-toggle{ display:block; }
  .header-actions .btn-primary{ padding:11px 18px; font-size:13.5px; }
}

/* ==========================================================================
   2. HERO
   ========================================================================== */
.hero{
  background:var(--ink);
  color:var(--white);
  padding:76px 0 0;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px;
  align-items:center;
}
.hero-copy h1{
  font-size:clamp(36px,5.4vw,58px);
  margin-top:20px;
}
.hero-copy h1 em{
  font-style:normal; color:var(--orange);
}
.hero-copy p{
  margin-top:20px; font-size:18px; color:var(--steel-lt);
  max-width:460px;
}
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-proof{
  margin-top:40px; display:flex; align-items:center; gap:14px;
  color:var(--steel-lt); font-size:13.5px;
}
.hero-proof .stars{ color:var(--gold); letter-spacing:2px; font-size:14px; }

.hero-visual{ position:relative; padding:40px 0 0; }
.phone{
  position:relative; z-index:2;
  width:250px; margin:0 auto;
  border-radius:34px;
  background:var(--asphalt-2);
  border:6px solid #33383F;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.phone::before{
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:70px; height:6px; border-radius:6px; background:#14171A;
}
.phone-screen{
  margin:26px 10px 10px; border-radius:20px 20px 12px 12px;
  background:linear-gradient(160deg,#FF5A1F 0%,#1F2328 65%);
  min-height:420px; padding:22px 16px; color:#fff;
}
.phone-screen .ph-label{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; opacity:.75; }
.phone-screen .ph-title{ font-family:var(--f-display); font-size:19px; margin-top:6px; }
.ph-card{
  margin-top:18px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:14px;
  backdrop-filter:blur(4px);
}
.ph-card + .ph-card{ margin-top:10px; }
.ph-card .r1{ display:flex; justify-content:space-between; font-size:11px; font-family:var(--f-mono); opacity:.8; }
.ph-card .r2{ margin-top:8px; font-size:14px; font-weight:600; }
.ph-bar{ margin-top:10px; height:5px; border-radius:6px; background:rgba(255,255,255,.18); overflow:hidden; }
.ph-bar span{ display:block; height:100%; background:var(--orange); }

/* the ticket stub — signature element */
.ticket{
  position:absolute; z-index:1; top:64px; right:-6px;
  width:250px; background:var(--paper);
  color:var(--ink); border-radius:12px;
  padding:18px 18px 20px;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.5);
  transform:rotate(6deg);
  font-family:var(--f-mono);
}
.ticket::after{
  content:""; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; background:var(--ink);
}
.ticket .t-top{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:.08em; color:var(--steel); }
.ticket .t-num{ font-family:var(--f-display); font-size:22px; margin-top:8px; color:var(--ink); letter-spacing:0; }
.ticket .t-status{
  margin-top:10px; display:inline-flex; align-items:center; gap:6px;
  background:#EAF6EC; color:#1C8C4B; font-size:10.5px; padding:5px 10px; border-radius:100px;
}
.ticket .t-status i{ width:6px; height:6px; border-radius:50%; background:#1C8C4B; display:inline-block; }
.ticket .t-foot{ margin-top:14px; border-top:1px dashed var(--line); padding-top:10px; font-size:10.5px; color:var(--steel); }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy p{ max-width:none; }
  .hero-visual{ margin-top:20px; padding-bottom:60px; }
  .ticket{ right:8px; top:20px; }
}

/* ==========================================================================
   3. BENEFIT STRIP (4 icons)
   ========================================================================== */
.benefits{ background:var(--paper); }
.benefit-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.benefit-card{ background:var(--white); padding:32px 26px; }
.benefit-card .ic{
  width:44px; height:44px; border-radius:12px; background:var(--paper-dim);
  display:flex; align-items:center; justify-content:center; color:var(--orange);
}
.benefit-card h3{ font-size:16.5px; margin-top:18px; }
.benefit-card p{ font-size:14px; color:var(--steel); margin-top:8px; }

@media (max-width:900px){ .benefit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .benefit-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   4. FEATURES (phone + list)
   ========================================================================== */
.features{ background:var(--white); }
.features-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;
}
.features-visual .phone{ margin:0; }
.feature-list{ display:flex; flex-direction:column; gap:4px; }
.feature-row{
  display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--line);
}
.feature-row:first-child{ padding-top:0; }
.feature-row .ic{
  flex:none; width:38px; height:38px; border-radius:10px; background:var(--paper-dim);
  display:flex; align-items:center; justify-content:center; color:var(--orange);
}
.feature-row h4{ font-family:var(--f-body); font-weight:600; font-size:15.5px; }
.feature-row p{ font-size:14px; color:var(--steel); margin-top:4px; }

@media (max-width:900px){
  .features-grid{ grid-template-columns:1fr; }
  .features-visual{ order:2; display:flex; justify-content:center; margin-top:12px; }
}

/* ==========================================================================
   5. HOW IT WORKS (numbered — real sequence)
   ========================================================================== */
.how{ background:var(--ink); color:var(--white); }
.how-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:8px; }
.how-step{ position:relative; padding-top:20px; border-top:1px solid var(--line-dark); }
.how-step .num{ font-family:var(--f-mono); color:var(--orange); font-size:13px; }
.how-step h4{ font-family:var(--f-display); font-size:19px; margin-top:14px; }
.how-step p{ font-size:14px; color:var(--steel-lt); margin-top:10px; }
@media (max-width:900px){ .how-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .how-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   6. PROMO BANNER
   ========================================================================== */
.promo{ background:var(--paper); }
.promo-card{
  background:linear-gradient(120deg,#FF5A1F,#D4451A);
  border-radius:20px; padding:52px; color:var(--white);
  display:grid; grid-template-columns:1.3fr auto; gap:30px; align-items:center;
  position:relative; overflow:hidden;
}
.promo-card::after{
  content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px;
  border:1px dashed rgba(255,255,255,.35); border-radius:50%;
}
.promo-card .eyebrow{ color:rgba(255,255,255,.85); }
.promo-card .eyebrow::before{ background:rgba(255,255,255,.85); }
.promo-card h3{ font-size:clamp(24px,3.4vw,32px); margin-top:12px; max-width:480px; }
.promo-card p{ margin-top:12px; color:rgba(255,255,255,.85); max-width:440px; }
@media (max-width:760px){ .promo-card{ grid-template-columns:1fr; padding:34px 26px; } }

/* ==========================================================================
   7. TESTIMONIALS (ticket-stub cards)
   ========================================================================== */
.testi{ background:var(--white); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; position:relative; background:var(--paper);
}
.testi-card .stars{ color:var(--gold); font-size:14px; letter-spacing:2px; }
.testi-card p.quote{ margin-top:16px; font-size:15px; color:var(--ink); }
.testi-card .who{
  margin-top:20px; padding-top:16px; border-top:1px dashed var(--line);
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-mono); font-size:12px; color:var(--steel);
}
.testi-card .who b{ font-family:var(--f-body); color:var(--ink); font-size:14px; display:block; }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   8. TRUST / CITIES
   ========================================================================== */
.trust{ background:var(--paper-dim); padding:56px 0; }
.trust .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:24px 40px; justify-content:space-between; }
.trust p{ font-size:13.5px; color:var(--steel); font-family:var(--f-mono); }
.city-chips{ display:flex; flex-wrap:wrap; gap:12px; }
.city-chips span{
  font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--ink);
  padding:6px 4px;
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */
.faq{ background:var(--white); }
.faq-list{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 0; font-family:var(--f-display);
  font-size:17px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:22px; color:var(--orange); flex:none; transition:transform .15s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .a{ padding:0 0 24px; color:var(--steel); font-size:15px; max-width:640px; }

/* ==========================================================================
   10. DOWNLOAD CTA
   ========================================================================== */
.download{ background:var(--ink); color:var(--white); }
.download-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
}
.download h2{ font-size:clamp(28px,4vw,42px); margin-top:14px; }
.download p{ color:var(--steel-lt); margin-top:16px; max-width:440px; }
.store-badges{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.store-badge{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line-dark); border-radius:12px; padding:11px 18px;
  transition:border-color .15s ease;
}
.store-badge:hover{ border-color:var(--orange); }
.store-badge small{ display:block; font-size:10px; color:var(--steel-lt); }
.store-badge strong{ display:block; font-size:15px; font-family:var(--f-display); }

.qr-box{
  justify-self:end; text-align:center; font-family:var(--f-mono); font-size:11px; color:var(--steel-lt);
}
.qr{
  width:150px; height:150px; border-radius:14px; background:
    repeating-linear-gradient(45deg, #2A2F36 0 8px, #1F2328 8px 16px);
  border:1px solid var(--line-dark);
}
.qr-box p{ margin-top:12px; }
@media (max-width:900px){ .download-grid{ grid-template-columns:1fr; } .qr-box{ justify-self:start; } }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer{ background:#101215; color:var(--steel-lt); padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
.footer-grid h5{ color:var(--white); font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.footer-grid ul li{ margin-bottom:10px; font-size:14px; }
.footer-grid ul a:hover{ color:var(--white); }
.footer-about p{ font-size:14px; max-width:280px; margin-top:14px; }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.footer-social a:hover{ border-color:var(--orange); color:var(--orange); }
.footer-bottom{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px;
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   12. REVEAL ANIMATION (respects reduced motion)
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}