/* Cari Dealer directory: mobile-first, same dark violet+gold tokens as assets/site.css.
   Baseline 390px, verify 360/320. Phone: one column, area chips scroll sideways.
   From 1000px: search beside the title, area list as a sticky rail, two-across cards.
   Shape rule: buttons 12px, cards 18px, inputs 14px, chips pill. */
body{padding-bottom:24px}
.frame{max-width:430px;margin:0 auto;min-height:100vh;position:relative}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:rgba(25,10,51,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brandmark{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;min-height:44px}
.brandmark .sub{font-weight:600;font-size:12px;color:var(--muted)}

/* hero: title, one line, and the search field (the page's one job) */
.hero{padding:22px 18px 14px}
h1{font-weight:800;font-size:30px;line-height:1.08;letter-spacing:-.03em;margin:0;color:#fff;text-wrap:balance}
h1 .gold{background:linear-gradient(100deg,var(--gold) 10%,#FFF3D0 50%,var(--gold2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lede{margin:10px 0 0;color:var(--muted);font-size:14.5px;max-width:44ch}

.search-wrap{position:relative;margin-top:18px}
.search-wrap svg{position:absolute;left:16px;top:24px;transform:translateY(-50%);width:20px;height:20px;color:var(--gold);pointer-events:none}
.search-input{width:100%;min-height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);color:#fff;padding:0 16px 0 46px;font-size:16px;box-sizing:border-box;font-family:inherit;outline:0;
  transition:border-color .2s,box-shadow .3s}
.search-input::placeholder{color:#C8B8EA}
.search-input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(243,210,122,.16)}
.search-wrap small{display:block;margin-top:8px;font-size:12px;color:var(--muted)}

.dir-main{padding:6px 0 0}
.rail-title{display:none}
.area-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 18px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.area-chips::-webkit-scrollbar{display:none}
.area-chips .chip{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:0 16px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;font-family:inherit}
.area-chips .chip small{opacity:.75;font-weight:700}
.area-chips .chip.active{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2A1259;border-color:transparent}

.result-count{padding:0 18px;margin:4px 0 12px;font-size:13px;color:var(--muted);font-weight:600}

.dealer-list{display:flex;flex-direction:column;gap:12px;padding:0 18px}
.dealer-card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s}
.dealer-card::after{content:"\1F4CD";position:absolute;right:-6px;bottom:-14px;font-size:92px;line-height:1;opacity:.07;
  transform:rotate(-10deg);filter:saturate(.6);pointer-events:none;z-index:-1}
@media(hover:hover){.dealer-card:hover{transform:translateY(-3px);border-color:rgba(243,210,122,.4)}}
.dealer-head{display:flex;align-items:center;gap:12px}
.avatar{position:relative;overflow:hidden;flex:0 0 auto;width:48px;height:48px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;
  background:linear-gradient(155deg,hsl(var(--h,275) 75% 55%),hsl(calc(var(--h,275) + 50) 70% 40%))}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dealer-id{min-width:0}
.dealer-card-name{font-weight:800;font-size:16px;line-height:1.25;letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.dcode{margin-top:2px;font-weight:600;font-size:12px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dealer-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dealer-card-region{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--gold)}
.dealer-card-region svg{flex:0 0 auto}
/* a pulse only where it is true: the directory lists dealers marked aktif for the current month */
.live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#8FF0B3;white-space:nowrap}
.live i{position:relative;width:8px;height:8px;border-radius:50%;background:#3DDC84}
.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3DDC84;opacity:.6}

.card-actions{display:flex;gap:8px;margin-top:auto}
.btn2{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:12px;font-size:14px;font-weight:800;text-decoration:none;box-sizing:border-box;white-space:nowrap;cursor:pointer;
  font-family:inherit;transition:transform .15s}
.btn2:active{transform:scale(.98)}
.btn2-primary{position:relative;overflow:hidden;isolation:isolate;flex:1;padding:0 16px;color:#2A1259;border:0;
  background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:0 10px 24px -12px rgba(217,169,59,.6)}
.btn2-primary::after{content:"";position:absolute;top:0;left:-70%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)}
.btn2-icon{flex:0 0 46px;width:46px;padding:0}
.btn2-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--line)}
.btn2-wa{background:rgba(37,211,102,.14);color:var(--wa);border:1px solid rgba(37,211,102,.5)}
.btn2-wa svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover){.btn2-wa:hover svg{transform:rotate(-12deg) scale(1.15)}}

/* states: loading placeholders, empty result */
.dealer-skel{display:grid;gap:14px;min-height:170px;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.dealer-skel i{display:block;border-radius:10px;background:linear-gradient(100deg,rgba(255,255,255,.06) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.06) 70%);background-size:220% 100%}
.dealer-skel .s1{height:48px;width:70%}.dealer-skel .s2{height:14px;width:45%}.dealer-skel .s3{height:46px}
.dir-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:18px;padding:26px 20px;text-align:center;color:var(--muted);font-size:14px}
.dir-empty b{display:block;color:#fff;font-size:17px;margin-bottom:6px}
.dir-empty .btn2{display:inline-flex;margin-top:14px;padding:0 22px}
#load-more-btn{margin:16px auto}

.dir-band{margin:22px 18px 0;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(120deg,rgba(124,58,237,.5),rgba(243,210,122,.16));border:1px solid var(--line)}
.dir-band h2{margin:0;font-size:22px;letter-spacing:-.025em;line-height:1.15;color:#fff}
.dir-band p{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.dir-band .btn2{align-self:flex-start;flex:0 0 auto;padding:0 22px}
.dir-fine{margin:22px 18px 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:#A99BCB;line-height:1.5}

@media(prefers-reduced-motion:no-preference){
  .dealer-card{animation:dir-up .6s cubic-bezier(.16,1,.3,1) both}
  .dealer-card:nth-child(2){animation-delay:.06s}.dealer-card:nth-child(3){animation-delay:.12s}
  .dealer-card:nth-child(4){animation-delay:.18s}.dealer-card:nth-child(n+5){animation-delay:.24s}
  .live i::after{animation:dir-ping 2s ease-out infinite}
  .btn2-primary::after{animation:dir-shine 5s ease-in-out infinite}
  .dealer-skel i{animation:dir-shim 1.4s linear infinite}
  .avatar{animation:dir-pop .6s cubic-bezier(.34,1.56,.64,1) both}
}
@keyframes dir-up{from{opacity:0;transform:translateY(12px)}}
@keyframes dir-ping{to{transform:scale(2.6);opacity:0}}
@keyframes dir-shine{0%,60%{left:-70%}100%{left:140%}}
@keyframes dir-shim{to{background-position:-220% 0}}
@keyframes dir-pop{from{transform:scale(.6);opacity:0}}

@media(min-width:700px){
  .frame{max-width:760px}
  .dealer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Desktop: search beside the title, area list as a sticky rail, two-across cards */
@media(min-width:1000px){
  .frame{max-width:1120px}
  .topbar{padding:10px 40px}
  .hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;padding:48px 40px 28px}
  h1{font-size:48px}
  .hero-lede{font-size:16px}
  .search-wrap{margin-top:0}
  .search-wrap svg{top:28px}
  .search-input{min-height:56px}
  .dir-main{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;align-items:start;padding:8px 40px 24px}
  .dir-rail{position:sticky;top:76px}
  .rail-title{display:block;margin:6px 0 8px 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .area-chips{flex-direction:column;gap:6px;overflow:visible;padding:0}
  .area-chips .chip{justify-content:space-between;border-radius:12px;border-color:transparent;background:none;padding:0 14px;font-size:14px}
  .area-chips .chip:not(.active):hover{background:rgba(255,255,255,.06)}
  .result-count,.dealer-list{padding-left:0;padding-right:0}
  .dealer-list{gap:14px}
  .dealer-card{padding:18px}
  .dir-band{margin:28px 0 0;flex-direction:row;align-items:center;justify-content:space-between;padding:28px 30px}
  .dir-band h2{font-size:28px}
  .dir-fine{margin:0 40px;padding:18px 0 34px;max-width:80ch}
}