/* ============================================================
   SIPAS — Sistem Informasi Pemanfaatan Aset Negara
   Design system: "Kartografis" (contour lines), DJKN palette
   ============================================================ */

:root{
  /* Surfaces */
  --cream:        #f4efe3;
  --cream-2:      #efe8d8;
  --paper:        #ffffff;
  --paper-soft:   #faf7ef;

  /* Forest greens */
  --forest-900:   #14201a;   /* top bar, footer */
  --forest-800:   #18382a;
  --forest-700:   #1d3b2d;   /* hero / dark sections */
  --forest-600:   #245138;

  /* Accents */
  --gold:         #c9a24b;
  --gold-2:       #d8b766;
  --gold-soft:    #ecdcb2;

  /* Text */
  --ink:          #1c2620;
  --ink-soft:     #51564e;
  --muted:        #7c7a6e;
  --on-dark:      #eef1ea;
  --on-dark-soft: #a9b6ab;

  /* Lines */
  --line:         #e4dcc8;
  --line-2:       #d8cfb8;
  --line-dark:    rgba(255,255,255,.14);

  /* Status */
  --ok:           #3f8f5f;
  --ok-bg:        #e3efe2;
  --live:         #d98324;
  --live-bg:      #f6e6cf;

  /* Type */
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;

  --radius:   14px;
  --radius-sm: 9px;
  --shadow:   0 1px 2px rgba(20,32,26,.05), 0 10px 30px rgba(20,32,26,.06);
  --shadow-lg:0 18px 50px rgba(20,32,26,.14);
  --maxw: 1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--gold); display:inline-block; }

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.topbar{
  background:var(--forest-900); color:var(--on-dark-soft);
  font-size:12px;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.topbar .left{ display:flex; align-items:center; gap:8px; }
.topbar .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.18); }
.topbar .ver{ font-family:var(--mono); font-size:11px; opacity:.65; }
.topbar .right{ display:flex; align-items:center; gap:18px; }
.topbar .right a:hover{ color:var(--on-dark); }
.topbar .sep{ opacity:.3; }
.topbar .auth a{ color:var(--gold-2); }

/* ============================================================
   MAIN NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--cream); border-bottom:1px solid var(--line);
}
.nav.on-dark{ background:transparent; border-bottom-color:var(--line-dark); position:relative; }
.nav .wrap{ display:flex; align-items:center; gap:28px; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .glyph{
  width:42px; height:42px; border-radius:11px;
  background:linear-gradient(150deg,var(--gold-2),var(--gold));
  display:grid; place-items:center; color:#3a2f12; flex-shrink:0;
  box-shadow:0 6px 16px rgba(201,162,75,.35);
}
.brand .glyph svg{ width:22px; height:22px; }
.brand .name{ line-height:1; }
.brand .name b{ font-family:var(--serif); font-size:22px; letter-spacing:.01em; display:block; }
.brand .name span{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
.nav.on-dark .brand .name{ color:var(--on-dark); }
.nav.on-dark .brand .name span{ color:var(--on-dark-soft); }

.menu{ display:flex; align-items:center; gap:26px; margin-left:8px; }
.menu a{ font-size:14px; font-weight:500; color:var(--ink-soft); padding:6px 0; position:relative; white-space:nowrap; }
.menu a:hover{ color:var(--ink); }
.menu a.active{ color:var(--ink); }
.menu a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--gold); border-radius:2px;
}
.nav.on-dark .menu a{ color:var(--on-dark-soft); }
.nav.on-dark .menu a:hover, .nav.on-dark .menu a.active{ color:var(--on-dark); }

.nav .actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:1px solid var(--line-2); color:var(--ink-soft);
  padding:9px 15px; border-radius:9px; font-size:13px; font-weight:600;
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--ink); }
.nav.on-dark .btn-ghost{ border-color:var(--line-dark); color:var(--on-dark); }
.nav.on-dark .btn-ghost:hover{ border-color:var(--gold); }
.btn-gold{
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(160deg,var(--gold-2),var(--gold)); color:#3a2f12;
  padding:10px 18px; border:0; border-radius:9px; font-size:13px; font-weight:700;
  box-shadow:0 6px 16px rgba(201,162,75,.3);
}
.btn-gold:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.btn-gold, .btn-ghost, .btn-dark{ transition:.18s ease; }
.btn-dark{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  background:var(--forest-700); color:var(--on-dark);
  padding:10px 18px; border:0; border-radius:9px; font-size:13px; font-weight:600;
}
.btn-dark:hover{ background:var(--forest-600); }

.hamburger{ display:none; margin-left:auto; background:none; border:0; padding:8px; color:var(--ink); }
.nav.on-dark .hamburger{ color:var(--on-dark); }

/* ============================================================
   CARTOGRAPHIC CARD MEDIA (contour pattern)
   ============================================================ */
.carto{ position:relative; overflow:hidden; }
.carto svg.lines{ position:absolute; inset:0; width:100%; height:100%; }
.carto .center-ico{
  position:absolute; inset:0; display:grid; place-items:center;
  color:rgba(255,255,255,.85);
}
.carto .center-ico svg{ width:46px; height:46px; }
.carto.t-green  { background:linear-gradient(135deg,#2f6b4a,#54996c); }
.carto.t-teal   { background:linear-gradient(135deg,#173f37,#2c6358); }
.carto.t-gold   { background:linear-gradient(135deg,#9c7a35,#caa258); }
.carto.t-slate  { background:linear-gradient(135deg,#3f4456,#5d6175); }
.carto.t-blue   { background:linear-gradient(135deg,#3a5876,#587a9c); }
.carto.t-leaf   { background:linear-gradient(135deg,#4f7a2f,#7ba84f); }
.carto .code-tag{
  position:absolute; left:14px; bottom:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:rgba(255,255,255,.9);
}
.carto .fav{
  position:absolute; right:12px; bottom:12px;
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92);
  display:grid; place-items:center; color:var(--ink-soft); border:0;
}
.carto .fav:hover{ color:#c0392b; }
.carto .status-pill{
  position:absolute; right:12px; top:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  padding:4px 9px; border-radius:20px; backdrop-filter:blur(4px);
}
.pill-ok  { background:rgba(255,255,255,.85); color:var(--ok); }
.pill-live{ background:rgba(217,131,36,.92); color:#fff; }

/* ============================================================
   ASSET CARD
   ============================================================ */
.acard{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); transition:.2s ease;
  display:flex; flex-direction:column;
}
.acard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--line-2); }
.acard .carto{ height:152px; }
.acard .body{ padding:16px 17px 17px; display:flex; flex-direction:column; gap:11px; flex:1; }
.acard .loc{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.acard .loc svg{ width:13px; height:13px; color:var(--gold); flex-shrink:0; }
.acard h3{ font-family:var(--serif); font-size:19px; line-height:1.18; margin:0; font-weight:600; }
.specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:11px 0; }
.specs .s{ }
.specs .s .k{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-bottom:3px; }
.specs .s .v{ font-size:14px; font-weight:700; }
.acard .foot{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:auto; gap:12px; }
.acard .price .pk{ font-size:11px; color:var(--muted); margin-bottom:1px; }
.acard .price .pv{ font-family:var(--serif); font-size:21px; font-weight:700; line-height:1; }
.detail-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--forest-700); color:var(--on-dark);
  padding:9px 15px; border-radius:9px; font-size:12.5px; font-weight:600; flex-shrink:0;
}
.detail-btn:hover{ background:var(--forest-600); }
.detail-btn svg{ width:13px; height:13px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--forest-900); color:var(--on-dark-soft); padding:64px 0 28px; }
.footer .grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; }
.footer .brand .name b{ color:var(--on-dark); }
.footer .tagline{ font-size:13.5px; line-height:1.7; margin-top:18px; max-width:300px; }
.footer h5{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:6px 0 16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer ul a{ font-size:13.5px; }
.footer ul a:hover{ color:var(--on-dark); }
.footer .bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:22px; border-top:1px solid var(--line-dark); font-size:12px; }
.footer .bottom .mono{ font-size:11px; letter-spacing:.1em; opacity:.6; display:flex; gap:14px; }

/* ============================================================
   GENERIC SECTION
   ============================================================ */
.section{ padding:76px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.section-head h2{ font-family:var(--serif); font-size:34px; font-weight:600; margin:8px 0 0; line-height:1.1; }
.see-all{ font-size:13.5px; font-weight:600; color:var(--forest-700); display:inline-flex; align-items:center; gap:6px; }
.see-all:hover{ color:var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .footer .grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:920px){
  .menu, .topbar .left .ver{ display:none; }
  .hamburger{ display:block; }
  .nav .actions{ display:none; }
  .nav.show .menu{
    display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column;
    align-items:flex-start; gap:4px; background:var(--paper); border-bottom:1px solid var(--line);
    padding:14px 24px 18px; box-shadow:var(--shadow);
  }
  .nav.show .menu a{ padding:10px 0; width:100%; }
  .nav.show .actions{ display:flex; }
  .nav.show.on-dark .menu{ background:var(--forest-800); }
}
@media (max-width:640px){
  .wrap{ padding:0 18px; }
  .section{ padding:52px 0; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .section-head h2{ font-size:27px; }
  .topbar .right .help, .topbar .sep.s1{ display:none; }
  .footer .grid{ grid-template-columns:1fr; gap:26px; }
  .footer .bottom{ flex-direction:column; gap:10px; align-items:flex-start; }
}

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero{ position:relative; background:var(--forest-700); color:var(--on-dark); overflow:hidden; }
.hero .bg-lines{ position:absolute; inset:0; opacity:.4; }
.hero .wrap{ position:relative; padding:60px 24px 72px; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.hero h1{ font-family:var(--serif); font-weight:600; font-size:54px; line-height:1.04; margin:20px 0 0; letter-spacing:-.01em; }
.hero h1 em{ color:var(--gold-2); font-style:italic; }
.hero .lede{ color:var(--on-dark-soft); font-size:16px; line-height:1.7; max-width:460px; margin:20px 0 0; }

.search-bar{
  background:var(--paper); border-radius:14px; padding:10px; margin-top:30px;
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:6px; box-shadow:var(--shadow-lg); max-width:640px;
}
.search-bar .field{ padding:9px 14px; border-radius:9px; }
.search-bar .field:hover{ background:var(--cream); }
.search-bar .field .fk{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.search-bar .field select{ border:0; background:none; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); width:100%; padding:2px 0 0; outline:none; cursor:pointer; }
.search-bar .go{ align-self:stretch; }

.hero-stats{ display:flex; gap:34px; margin-top:38px; flex-wrap:wrap; }
.hero-stats .st .n{ font-family:var(--serif); font-size:30px; font-weight:700; line-height:1; }
.hero-stats .st .n .u{ color:var(--gold-2); }
.hero-stats .st .l{ font-size:12px; color:var(--on-dark-soft); margin-top:5px; }
.hero-stats .verified{
  background:var(--paper); color:var(--ink); border-radius:11px; padding:13px 17px;
  display:flex; align-items:center; gap:12px; box-shadow:var(--shadow);
}
.hero-stats .verified .ic{ width:38px; height:38px; border-radius:9px; background:var(--ok-bg); color:var(--ok); display:grid; place-items:center; }
.hero-stats .verified .vk{ font-size:11px; color:var(--muted); }
.hero-stats .verified .vv{ font-family:var(--serif); font-size:17px; font-weight:700; }

/* floating preview card */
.hero-card{
  background:var(--paper); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
  max-width:330px; margin-left:auto;
}
.hero-card .carto{ height:150px; }
.hero-card .carto .coord{
  position:absolute; left:14px; top:13px; font-family:var(--mono); font-size:11px;
  color:rgba(255,255,255,.92); background:rgba(0,0,0,.28); padding:4px 9px; border-radius:7px;
}
.hero-card .info{ padding:15px 17px 17px; color:var(--ink); }
.hero-card .info .loc{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.hero-card .info .loc svg{ width:13px; height:13px; color:var(--gold); }
.hero-card .info .row{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:12px; }
.hero-card .info .pk{ font-size:11px; color:var(--muted); }
.hero-card .info .pv{ font-family:var(--serif); font-size:22px; font-weight:700; line-height:1; margin-top:2px; }
.hero-card .info .cert{ font-family:var(--mono); font-size:11px; color:var(--ok); display:flex; align-items:center; gap:5px; }
.hero-card .info .cert::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); }

/* ============================================================
   CATEGORY STRIP
   ============================================================ */
.cats{ background:var(--cream); padding:30px 0; }
.cats .row{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.cat{
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px;
  display:flex; align-items:center; gap:13px; transition:.18s ease;
}
.cat:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow); }
.cat .ic{ width:38px; height:38px; border-radius:9px; background:var(--cream-2); color:var(--forest-700); display:grid; place-items:center; flex-shrink:0; }
.cat .ic svg{ width:20px; height:20px; }
.cat>span:last-child{ display:block; }
.cat .t{ display:block; font-size:13.5px; font-weight:700; line-height:1.2; }
.cat .c{ display:block; font-size:11px; color:var(--muted); margin-top:3px; }

/* asset grids */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:36px; }
.step .num{
  width:46px; height:46px; border-radius:50%; border:1.5px solid var(--gold);
  display:grid; place-items:center; font-family:var(--mono); font-size:14px; color:var(--gold);
  margin-bottom:18px;
}
.step h4{ font-family:var(--serif); font-size:20px; font-weight:600; margin:0 0 9px; }
.step p{ font-size:14px; color:var(--ink-soft); line-height:1.65; margin:0; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-wrap{ padding:0 0 76px; }
.cta{
  background:var(--forest-700); color:var(--on-dark); border-radius:18px; overflow:hidden;
  position:relative; padding:48px 52px; display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.cta .bg-lines{ position:absolute; inset:0; opacity:.35; }
.cta .txt{ position:relative; }
.cta h3{ font-family:var(--serif); font-size:30px; font-weight:600; margin:0 0 10px; }
.cta p{ color:var(--on-dark-soft); font-size:15px; max-width:440px; margin:0; }
.cta .acts{ position:relative; display:flex; gap:12px; flex-shrink:0; }

@media (max-width:960px){
  .hero .wrap{ grid-template-columns:1fr; gap:34px; }
  .hero h1{ font-size:42px; }
  .hero-card{ max-width:100%; margin:0; }
  .cats .row{ grid-template-columns:repeat(3,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .cta{ flex-direction:column; align-items:flex-start; padding:36px 30px; }
}
@media (max-width:640px){
  .hero h1{ font-size:33px; }
  .search-bar{ grid-template-columns:1fr 1fr; }
  .search-bar .go{ grid-column:1/-1; }
  .cats .row{ grid-template-columns:repeat(2,1fr); }
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  .section-head h2{ font-size:25px; }
}

/* ============================================================
   LISTING (Jelajah Aset)
   ============================================================ */
.page-head{ padding:34px 0 26px; border-bottom:1px solid var(--line); }
.breadcrumb{ font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb .cur{ color:var(--ink); font-weight:600; }
.breadcrumb svg{ width:13px; height:13px; opacity:.5; }
.page-head .row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:14px; flex-wrap:wrap; }
.page-head h1{ font-family:var(--serif); font-size:38px; font-weight:600; margin:0; }
.page-head .sub{ font-size:14px; color:var(--ink-soft); margin-top:6px; }
.page-head .sub b{ color:var(--ink); }
.toolbar{ display:flex; gap:10px; align-items:center; }
.toolbar .sort{ background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:9px 13px; font-size:13px; font-weight:600; display:flex; gap:8px; align-items:center; }
.toolbar .sort select{ border:0; background:none; font-family:inherit; font-weight:600; outline:none; }
.viewtog{ display:flex; background:var(--paper); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.viewtog button{ background:none; border:0; padding:9px 13px; font-size:13px; font-weight:600; color:var(--ink-soft); display:flex; gap:6px; align-items:center; }
.viewtog button.on{ background:var(--forest-700); color:var(--on-dark); }
.viewtog svg{ width:14px; height:14px; }

.listing{ display:grid; grid-template-columns:268px 1fr 360px; gap:24px; align-items:start; padding:30px 0 70px; }

/* filters */
.filters{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; position:sticky; top:90px; }
.filters .fhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.filters .fhead b{ font-size:16px; }
.filters .reset{ font-size:12px; color:var(--gold); font-weight:600; }
.search-input{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:9px; padding:10px 12px; margin-bottom:20px; }
.search-input svg{ width:15px; height:15px; color:var(--muted); }
.search-input input{ border:0; outline:none; font-family:inherit; font-size:13px; width:100%; background:none; }
.fgroup{ border-top:1px solid var(--line); padding:16px 0; }
.fgroup:first-of-type{ border-top:0; padding-top:0; }
.fgroup .ftitle{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.fopt{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:13.5px; cursor:pointer; }
.fopt label{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.fopt input{ accent-color:var(--forest-700); width:15px; height:15px; }
.fopt .ct{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.more-link{ font-size:12.5px; color:var(--forest-700); font-weight:700; margin-top:6px; display:inline-block; }
.range{ margin-top:6px; }
.range input{ width:100%; accent-color:var(--gold); }
.range .vals{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:4px; }
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{ border:1px solid var(--line); border-radius:8px; padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--ink-soft); background:none; }
.chip.on{ background:var(--forest-700); color:var(--on-dark); border-color:var(--forest-700); }
.apply-btn{ width:100%; margin-top:18px; }

/* listing card grid (2-up) */
.list-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-content:start; }

/* map panel */
.map-panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:sticky; top:90px; }
.map-panel .mhead{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; }
.map-panel .mhead b{ font-size:15px; }
.map-panel .mhead .ct{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.mapbox{ position:relative; height:520px; background:#e8efe6; overflow:hidden; }
.mapbox svg.streets{ position:absolute; inset:0; width:100%; height:100%; }
.pin{ position:absolute; transform:translate(-50%,-50%); }
.pin .dot{ width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.pin.ok .dot{ background:var(--gold); }
.pin.live .dot{ background:var(--forest-700); width:22px; height:22px; }
.pin .bubble{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:8px 11px; white-space:nowrap; box-shadow:var(--shadow); }
.pin .bubble .c{ font-family:var(--mono); font-size:10px; color:var(--muted); }
.pin .bubble .p{ font-family:var(--serif); font-size:16px; font-weight:700; }
.map-legend{ display:flex; gap:18px; padding:13px 18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft); }
.map-legend span{ display:flex; align-items:center; gap:6px; }
.map-legend .d{ width:9px; height:9px; border-radius:50%; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:34px; }
.pagination a{ min-width:40px; height:40px; padding:0 8px; border:1px solid var(--line); border-radius:9px; display:grid; place-items:center; font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.pagination a:hover{ border-color:var(--gold); }
.pagination a.on{ background:var(--forest-700); color:var(--on-dark); border-color:var(--forest-700); }

@media (max-width:1180px){
  .listing{ grid-template-columns:240px 1fr; }
  .map-panel{ display:none; }
}
@media (max-width:880px){
  .listing{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .page-head h1{ font-size:30px; }
}
@media (max-width:560px){
  .list-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   DETAIL
   ============================================================ */
.detail-top{ padding:22px 0 8px; }
.tag-row{ display:flex; gap:9px; margin:14px 0 12px; flex-wrap:wrap; }
.tag{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:5px 11px; border-radius:20px; display:flex; align-items:center; gap:6px; }
.tag::before{ content:""; width:6px; height:6px; border-radius:50%; }
.tag.live{ background:var(--live-bg); color:#a8631a; } .tag.live::before{ background:var(--live); }
.tag.ok{ background:var(--ok-bg); color:var(--ok); } .tag.ok::before{ background:var(--ok); }
.tag.cert{ background:var(--cream-2); color:var(--ink-soft); } .tag.cert::before{ background:var(--gold); }
.detail-top h1{ font-family:var(--serif); font-size:40px; font-weight:600; line-height:1.08; margin:0; max-width:760px; }
.detail-meta{ display:flex; align-items:center; gap:14px; margin-top:14px; font-size:13.5px; color:var(--ink-soft); flex-wrap:wrap; }
.detail-meta .loc{ display:flex; align-items:center; gap:6px; }
.detail-meta .loc svg{ width:14px; height:14px; color:var(--gold); }
.detail-meta .mono{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.detail-top .share{ display:flex; gap:8px; }
.detail-top .share button{ width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:var(--paper); display:grid; place-items:center; color:var(--ink-soft); }
.detail-top .share button:hover{ border-color:var(--gold); color:var(--ink); }
.detail-top .head-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }

/* gallery */
.gallery{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; margin:22px 0 30px; height:430px; }
.gallery .carto{ border-radius:13px; }
.gallery .main{ grid-row:1/3; }
.gallery .main .coord{ position:absolute; left:16px; top:15px; font-family:var(--mono); font-size:12px; color:#fff; background:rgba(0,0,0,.3); padding:5px 11px; border-radius:8px; }
.gallery .more{ display:grid; place-items:center; font-family:var(--serif); font-size:22px; font-weight:700; color:#fff; }

/* detail layout */
.detail-grid{ display:grid; grid-template-columns:1fr 360px; gap:30px; align-items:start; padding-bottom:70px; }
.panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin-bottom:22px; }
.panel h2{ font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 18px; }
.summary-table{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.summary-table .cell{ background:var(--paper); padding:15px 16px; }
.summary-table .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.summary-table .v{ font-size:15px; font-weight:700; }
.summary-table .v small{ font-weight:500; color:var(--muted); font-size:12px; }
.panel p{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); margin:0 0 14px; }
.panel p:last-child{ margin-bottom:0; }

/* location */
.dmap{ position:relative; height:300px; border-radius:12px; overflow:hidden; background:#e8efe6; margin-bottom:16px; }
.dmap svg.streets{ position:absolute; inset:0; width:100%; height:100%; }
.dmap .badge{ position:absolute; left:16px; bottom:14px; background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:8px 12px; font-family:var(--mono); font-size:12px; display:flex; gap:6px; align-items:center; }
.dmap .badge svg{ width:13px; height:13px; color:var(--gold); }
.dmap .here{ position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); }
.dmap .here .tip{ background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:7px 11px; text-align:center; box-shadow:var(--shadow); margin-bottom:6px; }
.dmap .here .tip .c{ font-family:var(--mono); font-size:10px; color:var(--gold); }
.dmap .here .tip .id{ font-family:var(--serif); font-weight:700; font-size:14px; }
.dmap .here .pindot{ width:20px; height:20px; border-radius:50%; background:var(--forest-700); border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.3); margin:0 auto; }
.access{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.access .a{ background:var(--cream); border-radius:10px; padding:12px 15px; display:flex; gap:10px; align-items:baseline; }
.access .a .km{ font-family:var(--serif); font-size:17px; font-weight:700; }
.access .a .lbl{ font-size:13px; color:var(--ink-soft); }

/* documents */
.doc{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.doc:first-of-type{ border-top:0; }
.doc .fi{ width:36px; height:42px; border:1px solid var(--line-2); border-radius:7px; display:grid; place-items:center; color:var(--gold); flex-shrink:0; }
.doc .fi svg{ width:17px; height:17px; }
.doc .meta b{ font-size:14.5px; display:block; }
.doc .meta .m{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px; }
.doc .dl{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--forest-700); }
.doc .dl:hover{ color:var(--gold); }
.doc .dl svg{ width:14px; height:14px; }

/* auction sidebar */
.aside{ position:sticky; top:90px; }
.bid-card{ background:var(--forest-700); color:var(--on-dark); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }
.bid-card .top{ padding:22px 24px; border-bottom:1px solid var(--line-dark); }
.bid-card .lk{ font-size:12px; color:var(--on-dark-soft); }
.bid-card .lv{ font-family:var(--serif); font-size:34px; font-weight:700; line-height:1; margin:6px 0 10px; }
.bid-card .sub{ font-size:12px; color:var(--on-dark-soft); }
.bid-card .sub b{ color:var(--gold-2); }
.bid-card .body{ padding:20px 24px 24px; }
.cd-label{ font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.countdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.countdown .u{ background:var(--cream); border-radius:10px; padding:11px 0; text-align:center; }
.countdown .u .num{ font-family:var(--serif); font-size:24px; font-weight:700; line-height:1; color:var(--ink); }
.countdown .u .lab{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.bid-actions{ display:flex; flex-direction:column; gap:9px; }
.bid-actions .b1{ background:linear-gradient(160deg,var(--gold-2),var(--gold)); color:#3a2f12; border:0; padding:13px; border-radius:10px; font-weight:700; font-size:14px; }
.bid-actions .b2{ background:var(--forest-900); color:var(--on-dark); border:0; padding:13px; border-radius:10px; font-weight:600; font-size:14px; }
.bid-actions .b3{ background:transparent; color:var(--on-dark); border:1px solid var(--line-dark); padding:12px; border-radius:10px; font-weight:600; font-size:13.5px; display:flex; align-items:center; justify-content:center; gap:7px; }
.bid-actions .b1:hover{ filter:brightness(1.05); } .bid-actions .b2:hover{ background:#0e1813; } .bid-actions .b3:hover{ border-color:var(--gold); }
.bid-note{ font-size:11.5px; color:var(--ink-soft); line-height:1.6; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; gap:8px; }
.bid-note svg{ width:15px; height:15px; color:var(--gold); flex-shrink:0; margin-top:1px; }
.manager{ display:flex; align-items:center; gap:13px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-top:18px; }
.manager .av{ width:42px; height:42px; border-radius:10px; background:var(--forest-700); color:var(--on-dark); display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:15px; }
.manager .mn b{ font-size:14.5px; }
.manager .mn .m{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px; }

@media (max-width:960px){
  .detail-grid{ grid-template-columns:1fr; }
  .aside{ position:static; }
  .gallery{ grid-template-columns:1fr 1fr; grid-template-rows:200px 110px; height:auto; }
  .gallery .main{ grid-row:1; grid-column:1/3; }
  .summary-table{ grid-template-columns:repeat(2,1fr); }
  .detail-top h1{ font-size:30px; }
}
@media (max-width:560px){
  .gallery{ grid-template-columns:1fr 1fr; }
  .access{ grid-template-columns:1fr; }
  .detail-top .head-row{ flex-direction:column; }
}

/* ============================================================
   SHARED SUBPAGE HEADER (dark band)
   ============================================================ */
.subhero{ background:var(--forest-700); color:var(--on-dark); position:relative; overflow:hidden; }
.subhero .bg-lines{ position:absolute; inset:0; opacity:.32; }
.subhero .wrap{ position:relative; padding:30px 24px 40px; }
.subhero .breadcrumb{ color:var(--on-dark-soft); }
.subhero .breadcrumb a:hover{ color:#fff; }
.subhero .breadcrumb .cur{ color:#fff; }
.subhero .breadcrumb svg{ color:var(--on-dark-soft); }
.subhero h1{ font-family:var(--serif); font-size:42px; font-weight:600; margin:16px 0 0; line-height:1.08; }
.subhero h1 em{ color:var(--gold-2); font-style:italic; }
.subhero .sub{ color:var(--on-dark-soft); font-size:15.5px; max-width:560px; margin:14px 0 0; line-height:1.65; }
@media(max-width:640px){ .subhero h1{ font-size:30px; } }

/* ============================================================
   PETA — full map explorer
   ============================================================ */
.explorer{ display:grid; grid-template-columns:380px 1fr; height:calc(100vh - 112px); min-height:560px; }
.exp-list{ border-right:1px solid var(--line); background:var(--paper); overflow-y:auto; }
.exp-list .eh{ padding:18px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:2; }
.exp-list .eh b{ font-size:16px; }
.exp-list .eh .c{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.exp-chips{ display:flex; gap:7px; padding:14px 20px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.exp-item{ display:flex; gap:13px; padding:15px 20px; border-bottom:1px solid var(--line); cursor:pointer; transition:.15s; }
.exp-item:hover{ background:var(--paper-soft); }
.exp-item.active{ background:var(--cream); border-left:3px solid var(--gold); }
.exp-item .thumb{ width:78px; height:64px; border-radius:9px; flex-shrink:0; }
.exp-item .ei b{ font-size:14.5px; display:block; line-height:1.2; }
.exp-item .ei .l{ font-size:11.5px; color:var(--muted); margin:3px 0 7px; display:flex; gap:4px; align-items:center; }
.exp-item .ei .l svg{ width:11px; height:11px; color:var(--gold); }
.exp-item .ei .p{ font-family:var(--serif); font-size:17px; font-weight:700; }
.exp-item .ei .p span{ font-family:var(--sans); font-size:11px; color:var(--muted); font-weight:500; }
.exp-map{ position:relative; background:#e8efe6; overflow:hidden; }
.exp-map svg.streets{ position:absolute; inset:0; width:100%; height:100%; }
.exp-map .map-controls{ position:absolute; right:18px; top:18px; display:flex; flex-direction:column; gap:1px; background:var(--paper); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.exp-map .map-controls button{ width:38px; height:38px; background:var(--paper); border:0; border-bottom:1px solid var(--line); font-size:18px; color:var(--ink-soft); }
.exp-map .map-controls button:last-child{ border-bottom:0; }
.exp-map .map-legend{ position:absolute; left:18px; bottom:18px; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:11px 15px; box-shadow:var(--shadow); }
@media(max-width:880px){ .explorer{ grid-template-columns:1fr; height:auto; } .exp-list{ max-height:420px; border-right:0; border-bottom:1px solid var(--line);} .exp-map{ height:460px; } }

/* ============================================================
   LELANG — auction list
   ============================================================ */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.tabs button{ background:none; border:0; padding:13px 18px; font-size:14px; font-weight:600; color:var(--muted); position:relative; }
.tabs button.on{ color:var(--ink); }
.tabs button.on::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2.5px; background:var(--gold); border-radius:2px; }
.tabs button .b{ font-family:var(--mono); font-size:10px; background:var(--cream-2); padding:2px 7px; border-radius:20px; margin-left:7px; color:var(--ink-soft); }
.auc-card{ display:grid; grid-template-columns:200px 1fr 230px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:18px; box-shadow:var(--shadow); transition:.18s; }
.auc-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.auc-card .carto{ min-height:170px; }
.auc-card .mid{ padding:20px 24px; }
.auc-card .mid .l{ font-size:12px; color:var(--muted); display:flex; gap:5px; align-items:center; }
.auc-card .mid .l svg{ width:13px; height:13px; color:var(--gold); }
.auc-card .mid h3{ font-family:var(--serif); font-size:21px; font-weight:600; margin:6px 0 12px; }
.auc-meta{ display:flex; gap:26px; flex-wrap:wrap; }
.auc-meta .m .k{ font-family:var(--mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.auc-meta .m .v{ font-size:14px; font-weight:700; margin-top:2px; }
.auc-card .right{ background:var(--paper-soft); border-left:1px solid var(--line); padding:20px 22px; display:flex; flex-direction:column; justify-content:center; }
.auc-card .right .lk{ font-size:11px; color:var(--muted); }
.auc-card .right .lv{ font-family:var(--serif); font-size:26px; font-weight:700; line-height:1; margin:3px 0 12px; }
.mini-cd{ display:flex; gap:6px; margin-bottom:13px; }
.mini-cd .u{ background:var(--forest-700); color:#fff; border-radius:7px; padding:6px 0; text-align:center; flex:1; }
.mini-cd .u .num{ font-family:var(--mono); font-size:15px; font-weight:700; line-height:1; }
.mini-cd .u .lab{ font-size:8px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-top:3px; }
@media(max-width:820px){ .auc-card{ grid-template-columns:1fr; } .auc-card .carto{ min-height:130px;} .auc-card .right{ border-left:0; border-top:1px solid var(--line);} }

/* ============================================================
   PEMANFAATAN — schemes
   ============================================================ */
.scheme-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.scheme{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:.18s; }
.scheme:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow); }
.scheme .ic{ width:48px; height:48px; border-radius:12px; background:var(--cream); color:var(--forest-700); display:grid; place-items:center; margin-bottom:16px; }
.scheme .ic svg{ width:24px; height:24px; }
.scheme h3{ font-family:var(--serif); font-size:21px; font-weight:600; margin:0 0 6px; }
.scheme .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--gold); margin-bottom:12px; display:inline-block; }
.scheme p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin:0 0 14px; }
.scheme ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.scheme ul li{ font-size:13px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; }
.scheme ul li svg{ width:15px; height:15px; color:var(--ok); flex-shrink:0; margin-top:1px; }
.cmp{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cmp th,.cmp td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); font-size:13.5px; }
.cmp thead th{ font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); background:var(--paper-soft); }
.cmp td:first-child{ font-weight:700; }
.cmp tr:last-child td{ border-bottom:0; }
@media(max-width:820px){ .scheme-grid{ grid-template-columns:1fr; } .cmp{ display:block; overflow-x:auto; } }

/* ============================================================
   TENTANG
   ============================================================ */
.mission{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mcard{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.mcard .ic{ width:44px; height:44px; border-radius:11px; background:var(--cream); color:var(--forest-700); display:grid; place-items:center; margin-bottom:15px; }
.mcard .ic svg{ width:22px; height:22px; }
.mcard h3{ font-family:var(--serif); font-size:20px; font-weight:600; margin:0 0 8px; }
.mcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin:0; }
.statband{ background:var(--forest-700); color:var(--on-dark); border-radius:18px; padding:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative; overflow:hidden; }
.statband .bg-lines{ position:absolute; inset:0; opacity:.3; }
.statband .s{ position:relative; }
.statband .s .n{ font-family:var(--serif); font-size:38px; font-weight:700; line-height:1; }
.statband .s .n .u{ color:var(--gold-2); }
.statband .s .l{ font-size:13px; color:var(--on-dark-soft); margin-top:7px; }
.legal{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.legal li{ display:flex; gap:13px; background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:16px 18px; }
.legal li .fi{ width:34px; height:40px; border:1px solid var(--line-2); border-radius:6px; color:var(--gold); display:grid; place-items:center; flex-shrink:0; }
.legal li .fi svg{ width:16px; height:16px; }
.legal li b{ font-size:14px; display:block; }
.legal li span{ font-size:12.5px; color:var(--muted); }
@media(max-width:820px){ .mission{ grid-template-columns:1fr; } .statband{ grid-template-columns:1fr 1fr; padding:30px; gap:24px;} .legal{ grid-template-columns:1fr; } }

/* ============================================================
   BANTUAN
   ============================================================ */
.help-search{ max-width:560px; margin:22px 0 0; background:var(--paper); border-radius:12px; padding:6px; display:flex; gap:6px; box-shadow:var(--shadow-lg); }
.help-search input{ flex:1; border:0; outline:none; padding:13px 16px; font-family:inherit; font-size:14.5px; background:none; }
.help-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.help-cat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:left; transition:.18s; }
.help-cat:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow); }
.help-cat .ic{ width:42px; height:42px; border-radius:11px; background:var(--cream); color:var(--forest-700); display:grid; place-items:center; margin-bottom:14px; }
.help-cat h4{ font-size:15px; margin:0 0 5px; }
.help-cat p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.55; }
.faq{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:0; padding:20px 0; font-size:15.5px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq-q svg{ width:18px; height:18px; color:var(--gold); flex-shrink:0; transition:.2s; }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:320px; }
.faq-a p{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin:0; padding:0 0 20px; }
.channels{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.channel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; }
.channel .ic{ width:48px; height:48px; border-radius:50%; background:var(--cream); color:var(--forest-700); display:grid; place-items:center; margin:0 auto 14px; }
.channel h4{ font-size:15px; margin:0 0 5px; }
.channel p{ font-size:13px; color:var(--muted); margin:0 0 12px; }
.channel a{ font-size:13.5px; font-weight:700; color:var(--forest-700); }
@media(max-width:880px){ .help-cats{ grid-template-columns:1fr 1fr;} .channels{ grid-template-columns:1fr; } }

/* ============================================================
   AUTH (masuk/daftar)
   ============================================================ */
.auth-wrap{ display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 38px); }
.auth-side{ background:var(--forest-700); color:var(--on-dark); position:relative; overflow:hidden; padding:54px; display:flex; flex-direction:column; }
.auth-side .bg-lines{ position:absolute; inset:0; opacity:.32; }
.auth-side .inner{ position:relative; margin-top:auto; }
.auth-side h2{ font-family:var(--serif); font-size:34px; font-weight:600; line-height:1.15; margin:0 0 14px; }
.auth-side p{ color:var(--on-dark-soft); font-size:15px; line-height:1.7; max-width:380px; }
.auth-side .feats{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:13px; }
.auth-side .feats li{ display:flex; gap:11px; font-size:14px; }
.auth-side .feats svg{ width:19px; height:19px; color:var(--gold-2); flex-shrink:0; }
.auth-main{ display:flex; align-items:center; justify-content:center; padding:40px; background:var(--cream); }
.auth-box{ width:100%; max-width:380px; }
.auth-box .brand{ margin-bottom:28px; }
.auth-box h1{ font-family:var(--serif); font-size:28px; font-weight:600; margin:0 0 6px; }
.auth-box .lede{ font-size:14px; color:var(--ink-soft); margin:0 0 26px; }
.auth-toggle{ display:flex; background:var(--cream-2); border-radius:10px; padding:4px; margin-bottom:24px; }
.auth-toggle button{ flex:1; padding:10px; border:0; background:none; border-radius:7px; font-weight:600; font-size:13.5px; color:var(--ink-soft); }
.auth-toggle button.on{ background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
.field-l{ margin-bottom:16px; }
.field-l label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field-l input{ width:100%; border:1px solid var(--line-2); border-radius:9px; padding:12px 14px; font-family:inherit; font-size:14px; outline:none; background:var(--paper); }
.field-l input:focus{ border-color:var(--gold); }
.auth-box .submit{ width:100%; margin-top:6px; padding:13px; }
.auth-box .alt{ text-align:center; font-size:13px; color:var(--muted); margin-top:20px; }
.auth-box .alt a{ color:var(--forest-700); font-weight:700; }
.ssolist{ display:flex; gap:10px; margin-top:18px; }
.sso{ flex:1; border:1px solid var(--line-2); border-radius:9px; padding:11px; background:var(--paper); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--ink-soft); }
.divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--muted); font-size:12px; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--line); }
@media(max-width:880px){ .auth-wrap{ grid-template-columns:1fr; } .auth-side{ display:none; } }

/* ============================================================
   AKUN — dashboard
   ============================================================ */
.dash{ display:grid; grid-template-columns:240px 1fr; gap:28px; padding:30px 0 70px; align-items:start; }
.dash-nav{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px; position:sticky; top:90px; }
.dash-user{ display:flex; gap:12px; align-items:center; padding:10px 10px 16px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.dash-user .av{ width:44px; height:44px; border-radius:11px; background:linear-gradient(150deg,var(--gold-2),var(--gold)); color:#3a2f12; display:grid; place-items:center; font-family:var(--serif); font-weight:700; }
.dash-user b{ font-size:14px; display:block; }
.dash-user span{ font-size:11.5px; color:var(--muted); }
.dash-nav a{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.dash-nav a svg{ width:17px; height:17px; }
.dash-nav a:hover{ background:var(--paper-soft); }
.dash-nav a.on{ background:var(--forest-700); color:#fff; }
.dash-nav a .b{ margin-left:auto; font-family:var(--mono); font-size:10px; background:rgba(0,0,0,.07); padding:2px 7px; border-radius:20px; }
.dash-nav a.on .b{ background:rgba(255,255,255,.18); }
.kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi .k{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
.kpi .k .ic{ width:34px; height:34px; border-radius:9px; background:var(--cream); color:var(--forest-700); display:grid; place-items:center; margin-bottom:12px; }
.kpi .k .n{ font-family:var(--serif); font-size:28px; font-weight:700; line-height:1; }
.kpi .k .l{ font-size:12px; color:var(--muted); margin-top:5px; }
.dash-panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:20px; }
.dash-panel .ph{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.dash-panel .ph h2{ font-family:var(--serif); font-size:20px; font-weight:600; margin:0; }
.dash-panel .ph a{ font-size:13px; font-weight:600; color:var(--forest-700); }
.saved-row{ display:flex; gap:14px; align-items:center; padding:13px 0; border-top:1px solid var(--line); }
.saved-row:first-of-type{ border-top:0; }
.saved-row .thumb{ width:64px; height:52px; border-radius:8px; flex-shrink:0; }
.saved-row .info{ flex:1; }
.saved-row .info b{ font-size:14px; display:block; }
.saved-row .info .l{ font-size:11.5px; color:var(--muted); }
.saved-row .price{ font-family:var(--serif); font-size:16px; font-weight:700; }
.statuspill{ font-family:var(--mono); font-size:10px; padding:4px 10px; border-radius:20px; font-weight:700; }
.sp-live{ background:var(--live-bg); color:#a8631a; } .sp-ok{ background:var(--ok-bg); color:var(--ok); } .sp-wait{ background:#eef1f4; color:#5b6b80; }
.timeline{ position:relative; padding-left:26px; }
.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line); }
.tl{ position:relative; padding:0 0 20px; }
.tl::before{ content:""; position:absolute; left:-22px; top:3px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--gold); }
.tl.done::before{ background:var(--ok); border-color:var(--ok); }
.tl b{ font-size:14px; display:block; }
.tl span{ font-size:12px; color:var(--muted); }
@media(max-width:880px){ .dash{ grid-template-columns:1fr; } .dash-nav{ position:static; } .kpi{ grid-template-columns:1fr 1fr; } }