/* ==========================================================================
   Divitp Railway Shop — gaya sisi publik
   Token warna & tipografi diambil dari brosur dan logo toko.
   ========================================================================== */

:root{
  --blue:#1D8FE0; --blue-dark:#1273B8; --blue-soft:#E4F1FB;
  --navy:#122A4E; --navy-2:#0C1E3A;
  --red:#D7263D; --red-soft:#FBE7EA;
  --yellow:#F5A81C; --yellow-soft:#FEF3DC;
  --green:#1FAF54; --green-dark:#15883F; --green-soft:#E4F6EB;
  --bg:#F6F9FD; --card:#FFFFFF; --ink:#1A2233; --muted:#5B6B82; --line:#E3EAF3;
  --f-head:'Baloo 2','Segoe UI',system-ui,sans-serif;
  --f-body:'Inter','Segoe UI',system-ui,sans-serif;
  --fs-1:16px; --fs-2:20px; --fs-3:25px; --fs-4:31px; --fs-5:39px; --fs-6:49px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --r:14px; --r-pill:999px;
  --sh:0 1px 3px rgba(18,42,78,.06),0 8px 24px rgba(18,42,78,.08);
  --sh-lg:0 2px 6px rgba(18,42,78,.08),0 16px 40px rgba(18,42,78,.12);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:var(--fs-1);line-height:1.65;color:var(--ink);background:var(--bg)}
::selection{background:var(--yellow);color:var(--navy)}
img{display:block;max-width:100%}
a{color:var(--blue-dark);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.15;letter-spacing:-.01em;color:var(--navy)}
button{font-family:var(--f-body);cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.skip{position:absolute;left:-9999px;background:var(--yellow);color:var(--navy);padding:10px 18px;border-radius:0 0 10px 0;font-weight:700;z-index:200}
.skip:focus{left:0;top:0}

/* ---------------------------------------------------------------- NAV ---- */
.site-nav{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(18,42,78,.05)}
.nav-in{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.brand b{font-family:var(--f-head);font-size:var(--fs-2);color:var(--navy);line-height:1.1;display:block}
.brand span{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--red);text-transform:uppercase}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--muted);padding:9px 14px;border-radius:var(--r-pill);text-decoration:none;transition:all .18s ease}
.nav-links a:hover{color:var(--blue-dark);background:var(--blue-soft)}
.nav-links a.on{color:#fff;background:var(--blue)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--navy)}
.nav-toggle svg{width:22px;height:22px}
.buka-badge{font-size:11.5px;font-weight:700;border-radius:var(--r-pill);padding:3px 10px}
.buka-badge.ya{background:var(--green-soft);color:var(--green-dark)}
.buka-badge.tidak{background:var(--red-soft);color:var(--red)}

/* --------------------------------------------------------------- BASE ---- */
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--s3)}
.sec{padding:var(--s7) 0}
.sec.tight{padding:var(--s6) 0}
.kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:var(--red-soft);border-radius:var(--r-pill);padding:5px 16px;margin-bottom:var(--s2)}
.sec h2{font-size:var(--fs-5);margin-bottom:var(--s2)}
.sec .lead{color:var(--muted);max-width:65ch;font-size:17px}
.sec-head{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.sec-head .right{margin-left:auto}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;border:none;border-radius:var(--r-pill);padding:12px 24px;transition:all .18s ease;text-decoration:none;cursor:pointer}
.btn-wa{background:var(--green);color:#fff}
.btn-wa:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn-main{background:var(--yellow);color:var(--navy)}
.btn-main:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-line{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--blue);color:var(--blue-dark)}
.btn svg{width:18px;height:18px;flex:none}

.alert{border-radius:10px;padding:14px 18px;margin-bottom:var(--s3);font-size:14.5px}
.alert.ok{background:var(--green-soft);border:1px solid #BFE7CE;color:var(--green-dark)}
.alert.error{background:var(--red-soft);border:1px solid #F2C4CB;color:var(--red)}

/* --------------------------------------------------------------- HERO ---- */
.hero{background:linear-gradient(160deg,var(--navy) 0%,#17407A 45%,var(--blue) 100%);color:#fff;overflow:hidden;position:relative}
.hero-in{max-width:1160px;margin:0 auto;padding:var(--s7) var(--s3);display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:center}
.hero .kicker{background:rgba(255,255,255,.14);color:var(--yellow)}
.hero h1{color:#fff;font-size:var(--fs-6);margin-bottom:var(--s2)}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero p{color:#D9E6F5;max-width:52ch;margin-bottom:var(--s4);font-size:17px}
.hero-cta{display:flex;gap:var(--s2);flex-wrap:wrap}
.hero-img{position:relative}
.hero-img img{border-radius:24px;box-shadow:var(--sh-lg);transform:rotate(2deg);width:100%;aspect-ratio:4/3;object-fit:cover;background:#fff}
.hero-badge{position:absolute;left:-14px;bottom:18px;background:var(--red);color:#fff;font-family:var(--f-head);font-weight:700;font-size:15px;padding:10px 20px;border-radius:var(--r-pill);box-shadow:var(--sh);transform:rotate(-3deg)}

.trust{background:var(--navy-2);color:#fff}
.trust-in{max-width:1160px;margin:0 auto;padding:var(--s3);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.trust-item{display:flex;gap:12px;align-items:center;font-size:14px;padding:6px 0}
.trust-item svg{width:34px;height:34px;flex:none;color:var(--yellow)}
.trust-item b{display:block;font-size:14.5px}
.trust-item span{color:#AABBD3;font-size:13px}

/* ------------------------------------------------------------- PRODUK ---- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.pcard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.pimg{position:relative;background:var(--blue-soft);display:block}
.pimg img{width:100%;aspect-ratio:1;object-fit:cover}
.disc{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-weight:700;font-size:12.5px;border-radius:var(--r-pill);padding:4px 12px}
.pbody{padding:var(--s3);display:flex;flex-direction:column;gap:10px;flex:1}
.ptype{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-dark)}
.pname{font-family:var(--f-head);font-size:var(--fs-2);color:var(--navy);line-height:1.2}
.pname a{color:inherit;text-decoration:none}
.pname a:hover{color:var(--blue-dark)}
.pprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pprice .now{font-family:var(--f-head);font-size:var(--fs-3);color:var(--red);font-weight:800}
.pprice .was{color:var(--muted);text-decoration:line-through;font-size:14.5px}
.pcard .btn-wa{margin-top:auto;justify-content:center}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s4)}
.chip{border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:var(--muted);padding:9px 20px;border-radius:var(--r-pill);text-decoration:none;transition:all .15s ease}
.chip:hover{border-color:var(--blue);color:var(--blue-dark)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* Detail produk */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.pd-main{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:#fff}
.pd-main img{width:100%;aspect-ratio:1;object-fit:cover}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd-thumbs button{width:72px;height:72px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:#fff}
.pd-thumbs button.on{border-color:var(--blue)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
.pd-info h1{font-size:var(--fs-5);margin-bottom:12px}
.pd-price{display:flex;align-items:baseline;gap:12px;margin:var(--s2) 0;flex-wrap:wrap}
.pd-price .now{font-family:var(--f-head);font-size:var(--fs-5);color:var(--red);font-weight:800}
.pd-price .was{color:var(--muted);text-decoration:line-through;font-size:var(--fs-2)}
.spec-tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin:var(--s3) 0}
.spec-tbl th{text-align:left;color:var(--muted);font-weight:500;padding:9px 0;width:40%;border-bottom:1px solid var(--line)}
.spec-tbl td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--navy);font-weight:600}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:var(--s2)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue-dark)}

/* ------------------------------------------------------------ ARTIKEL ---- */
.acard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease}
.acard:hover{transform:translateY(-4px)}
.acover{height:170px;display:flex;align-items:flex-end;padding:var(--s2);background-size:cover;background-position:center;background-color:var(--navy)}
.acover .cat{background:rgba(255,255,255,.92);color:var(--navy);font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:4px 12px;text-decoration:none}
.abody{padding:var(--s3);display:flex;flex-direction:column;gap:8px;flex:1}
.abody h3{font-size:var(--fs-2)}
.abody h3 a{color:inherit;text-decoration:none}
.abody h3 a:hover{color:var(--blue-dark)}
.abody p{color:var(--muted);font-size:14.5px}
.ameta{display:flex;gap:12px;font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:6px;flex-wrap:wrap}
.tagrow{display:flex;gap:6px;flex-wrap:wrap}
.tagp{font-size:12px;font-weight:600;color:var(--blue-dark);background:var(--blue-soft);border-radius:var(--r-pill);padding:3px 11px;text-decoration:none}
.tagp:hover{background:var(--blue);color:#fff}

.art-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--s5);align-items:start}
.art-detail{max-width:760px}
.art-detail h1{font-size:var(--fs-5);margin-bottom:var(--s2)}
.art-detail .ameta{margin:0 0 var(--s3)}
.art-cover{border-radius:var(--r);box-shadow:var(--sh);margin-bottom:var(--s4);width:100%;aspect-ratio:16/9;object-fit:cover}
.prose{font-size:16.5px}
.prose h2{font-size:var(--fs-3);margin:var(--s4) 0 var(--s2)}
.prose h3{font-size:var(--fs-2);margin:var(--s3) 0 var(--s1)}
.prose p{margin-bottom:var(--s2);max-width:70ch}
.prose ul,.prose ol{margin:0 0 var(--s2) 22px}
.prose li{margin-bottom:6px}
.prose img{border-radius:10px;margin:var(--s2) 0;box-shadow:var(--sh)}
.prose blockquote{border-left:4px solid var(--yellow);background:var(--yellow-soft);padding:var(--s2) var(--s3);border-radius:0 10px 10px 0;margin:var(--s3) 0;color:#6B4E12}
.prose table{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:14.5px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--blue-soft);color:var(--navy)}
.prose iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;margin:var(--s3) 0}
.art-cta{background:var(--green-soft);border:1px solid #BFE7CE;border-radius:var(--r);padding:var(--s3);display:flex;gap:var(--s2);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:var(--s4)}
.sidebar .side-box{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s3);margin-bottom:var(--s2)}
.sidebar h4{font-size:14px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-body);font-weight:700;color:var(--navy)}
.sidebar ul{list-style:none}
.sidebar li{margin-bottom:9px;font-size:14.5px}
.sidebar li a{color:var(--ink);text-decoration:none}
.sidebar li a:hover{color:var(--blue-dark)}
.sidebar .jml{color:var(--muted);font-size:12.5px}

.pager{display:flex;gap:8px;justify-content:center;margin-top:var(--s5);flex-wrap:wrap}
.pager a,.pager span{min-width:42px;text-align:center;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600}
.pager a:hover{border-color:var(--blue);color:var(--blue-dark)}
.pager .on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ------------------------------------------------------------ TENTANG ---- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:center}
.about-grid img{border-radius:var(--r);box-shadow:var(--sh-lg);width:100%}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.stat{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s3);text-align:center}
.stat b{font-family:var(--f-head);font-size:var(--fs-4);color:var(--blue-dark);display:block}
.stat span{color:var(--muted);font-size:14px}

/* ---------------------------------------------------------------- FAQ ---- */
.faq{max-width:760px;margin:0 auto}
.faq-item{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:var(--s2);overflow:hidden}
.faq-q{width:100%;background:none;border:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:18px var(--s3);font-size:16px;font-weight:600;color:var(--navy);text-align:left}
.faq-q svg{width:20px;height:20px;color:var(--blue);transition:transform .2s ease;flex:none}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{display:none;padding:0 var(--s3) 18px;color:var(--muted)}
.faq-item.open .faq-a{display:block}
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s4)}
.step{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s3)}
.step::before{counter-increment:st;content:counter(st);font-family:var(--f-head);font-weight:800;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--navy);font-size:var(--fs-2);margin-bottom:12px}
.step b{display:block;margin-bottom:6px;color:var(--navy)}
.step span{font-size:14px;color:var(--muted)}

/* ------------------------------------------------------------- KONTAK ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:var(--s4)}
.field{margin-bottom:var(--s2)}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--navy)}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:inherit;font-size:14.5px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.hp{position:absolute;left:-9999px}
.info-line{display:flex;gap:12px;margin-bottom:var(--s2);align-items:flex-start}
.info-line svg{width:22px;height:22px;color:var(--blue);flex:none;margin-top:2px}
.info-line b{display:block;font-size:14.5px;color:var(--navy)}
.info-line span{color:var(--muted);font-size:14px}
.info-line a{color:var(--blue-dark)}
.jam-tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.jam-tbl td{padding:6px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.jam-tbl td:last-child{text-align:right;color:var(--navy);font-weight:600}
.map-embed{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin-top:var(--s3);background:var(--blue-soft);min-height:260px}
.map-embed iframe{width:100%;height:320px;border:0;display:block}

/* ------------------------------------------------------------- FOOTER ---- */
.foot{background:var(--navy-2);color:#B9C6DA;margin-top:var(--s6)}
.foot-in{max-width:1160px;margin:0 auto;padding:var(--s6) var(--s3) var(--s3);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s4)}
.foot h4{color:#fff;font-size:var(--fs-2);margin-bottom:var(--s2)}
.foot li{list-style:none;margin-bottom:8px;font-size:14px}
.foot a{color:#B9C6DA;text-decoration:none}
.foot a:hover{color:var(--yellow)}
.foot-bot{border-top:1px solid #22406B;text-align:center;font-size:13px;padding:var(--s2);color:#7C8FAB}
.foot .fbrand{display:flex;align-items:center;gap:10px;margin-bottom:var(--s2)}
.foot .fbrand img{width:52px;height:52px;border-radius:50%}
.foot .fbrand b{color:#fff;font-family:var(--f-head);font-size:var(--fs-2)}

.fab-wa{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-lg);transition:transform .18s ease}
.fab-wa:hover{transform:scale(1.08)}
.fab-wa svg{width:30px;height:30px;color:#fff}

.kosong{text-align:center;padding:var(--s6) var(--s3);color:var(--muted)}
.kosong h3{margin-bottom:8px}

/* --------------------------------------------------------- RESPONSIVE ---- */
@media(max-width:900px){
  .hero-in,.about-grid,.contact-grid,.pd-grid,.art-layout{grid-template-columns:1fr}
  .grid3,.steps,.foot-in{grid-template-columns:1fr 1fr}
  .trust-in{grid-template-columns:1fr 1fr}
  .sec{padding:var(--s5) 0}
  .hero-in{padding:var(--s5) var(--s3)}
  .nav-toggle{display:block}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;margin:0;padding-top:var(--s2);gap:2px}
  .nav-links.open{display:flex}
  .nav-in{flex-wrap:wrap}
  .art-layout .sidebar{order:2}
}
@media(max-width:560px){
  .grid3,.grid2,.steps,.foot-in,.trust-in{grid-template-columns:1fr}
  .hero h1{font-size:var(--fs-5)}
  .sec h2{font-size:var(--fs-4)}
  .pd-info h1{font-size:var(--fs-4)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

@media print{
  .site-nav,.foot,.fab-wa,.art-cta{display:none}
}