/* ────────────────────────────────────────────────────────────────────────
   Komuniti Peniaga Anak Terengganu — design system
   Warm community · forest + cream + songket gold
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Forest greens (Tranung laut deep) */
  --pkt-forest:        #1c3528;
  --pkt-forest-2:      #2d5240;
  --pkt-forest-3:      #4d8869;
  --pkt-forest-tint:   #e6ede8;

  /* Paper / cream neutrals */
  --pkt-bg:            #faf8f3;
  --pkt-paper:         #f3eee2;
  --pkt-paper-2:       #ebe5d4;
  --pkt-card:          #ffffff;

  /* Ink */
  --pkt-ink:           #0d100e;
  --pkt-ink-2:         #3a3d36;
  --pkt-ink-3:         #6b6e64;
  --pkt-ink-4:         #9a9c8e;

  /* Lines */
  --pkt-line:          rgba(13, 16, 14, 0.10);
  --pkt-line-2:        rgba(13, 16, 14, 0.18);

  /* Accents */
  --pkt-songket:       #b8893d;        /* sparing — only for highlights */
  --pkt-songket-soft:  #ecd9b0;
  --pkt-wa:            #1d9d56;        /* WhatsApp, slightly muted for warm palette */
  --pkt-wa-2:          #157c43;
  --pkt-rose:          #c14b3b;        /* used for hearts / support */

  /* Type */
  --pkt-serif:         "Instrument Serif", "Source Serif Pro", Georgia, serif;
  --pkt-sans:          "DM Sans", -apple-system, "Helvetica Neue", sans-serif;
  --pkt-mono:          "JetBrains Mono", ui-monospace, monospace;

  /* Radius */
  --pkt-r-sm: 6px;
  --pkt-r:    10px;
  --pkt-r-lg: 16px;
  --pkt-r-xl: 22px;

  /* Shadow — warm, low-contrast */
  --pkt-shadow-sm: 0 1px 2px rgba(13,16,14,0.04), 0 1px 1px rgba(13,16,14,0.03);
  --pkt-shadow:    0 2px 4px rgba(13,16,14,0.04), 0 6px 16px rgba(13,16,14,0.06);
  --pkt-shadow-lg: 0 4px 8px rgba(13,16,14,0.05), 0 16px 40px rgba(13,16,14,0.10);
}

.pkt-dark {
  --pkt-forest:        #6ba88a;
  --pkt-forest-2:      #4d8869;
  --pkt-forest-3:      #2d5240;
  --pkt-forest-tint:   #1b2a23;

  --pkt-bg:            #0b0e0c;
  --pkt-paper:         #14181a;
  --pkt-paper-2:       #1a1f22;
  --pkt-card:          #181c1d;

  --pkt-ink:           #f3efe6;
  --pkt-ink-2:         #d4ccba;
  --pkt-ink-3:         #9a9181;
  --pkt-ink-4:         #6b6660;

  --pkt-line:          rgba(243, 239, 230, 0.10);
  --pkt-line-2:        rgba(243, 239, 230, 0.18);

  --pkt-songket:       #d4a04f;
  --pkt-songket-soft:  #463720;
  --pkt-wa:            #26b366;
  --pkt-wa-2:          #1d9d56;
  --pkt-rose:          #de6e5e;

  --pkt-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --pkt-shadow:    0 2px 4px rgba(0,0,0,0.3), 0 6px 16px rgba(0,0,0,0.4);
  --pkt-shadow-lg: 0 4px 8px rgba(0,0,0,0.4), 0 16px 40px rgba(0,0,0,0.6);
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--pkt-sans);
  background: var(--pkt-bg);
  color: var(--pkt-ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain on body */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(13,16,14,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  z-index: 0;
}
.pkt-dark body::before {
  background-image: radial-gradient(rgba(243,239,230,0.022) 1px, transparent 1px);
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--pkt-songket); color: var(--pkt-ink); }

/* Typography helpers */
.pkt-serif { font-family: var(--pkt-serif); font-weight: 400; letter-spacing: -0.005em; }
.pkt-mono  { font-family: var(--pkt-mono); }
.pkt-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 600;
  color: var(--pkt-ink-3);
}

.pkt-h1 { font-family: var(--pkt-serif); font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; font-weight: 400; }
.pkt-h2 { font-family: var(--pkt-serif); font-size: 40px; line-height: 1.05; letter-spacing: -0.015em; font-weight: 400; }
.pkt-h3 { font-family: var(--pkt-serif); font-size: 28px; line-height: 1.1;  letter-spacing: -0.01em;  font-weight: 400; }
.pkt-h4 { font-family: var(--pkt-sans);  font-size: 18px; line-height: 1.25; font-weight: 600; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.pkt-btn {
  font-family: var(--pkt-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--pkt-line-2);
  background: transparent;
  color: var(--pkt-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s, transform 0.05s, box-shadow 0.15s;
  white-space: nowrap;
}
.pkt-btn:hover { background: var(--pkt-paper); }
.pkt-btn:active { transform: translateY(1px); }

.pkt-btn--primary {
  background: var(--pkt-forest);
  color: #faf8f3;
  border-color: var(--pkt-forest);
}
.pkt-dark .pkt-btn--primary { color: var(--pkt-bg); }
.pkt-btn--primary:hover { background: var(--pkt-forest-2); border-color: var(--pkt-forest-2); }

.pkt-btn--wa {
  background: var(--pkt-wa);
  color: #fff;
  border-color: var(--pkt-wa);
}
.pkt-btn--wa:hover { background: var(--pkt-wa-2); border-color: var(--pkt-wa-2); }

.pkt-btn--ghost { border-color: transparent; }
.pkt-btn--ghost:hover { background: var(--pkt-paper); }

.pkt-btn--sm { padding: 6px 12px; font-size: 13px; }
.pkt-btn--lg { padding: 14px 24px; font-size: 16px; }
.pkt-btn--full { width: 100%; }

/* ─── Surfaces ───────────────────────────────────────────────────────────── */
.pkt-card {
  background: var(--pkt-card);
  border-radius: var(--pkt-r-lg);
  border: 1px solid var(--pkt-line);
  box-shadow: var(--pkt-shadow-sm);
}
.pkt-card--paper { background: var(--pkt-paper); border-color: transparent; box-shadow: none; }

/* ─── Pills / chips ─────────────────────────────────────────────────────── */
.pkt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--pkt-line-2);
  font-size: 13px;
  font-weight: 500;
  background: var(--pkt-card);
  color: var(--pkt-ink-2);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.pkt-chip:hover { border-color: var(--pkt-ink-3); color: var(--pkt-ink); }
.pkt-chip--active {
  background: var(--pkt-forest);
  color: #faf8f3;
  border-color: var(--pkt-forest);
}
.pkt-dark .pkt-chip--active { color: var(--pkt-bg); }
.pkt-chip--sm { padding: 4px 10px; font-size: 11px; }

/* Badge variants */
.pkt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  font-family: var(--pkt-sans);
  background: var(--pkt-paper-2);
  color: var(--pkt-ink-2);
  letter-spacing: 0.02em;
}
.pkt-badge--verified {
  background: var(--pkt-forest-tint);
  color: var(--pkt-forest);
}
.pkt-badge--gold {
  background: var(--pkt-songket-soft);
  color: var(--pkt-songket);
}

/* ─── Inputs ─────────────────────────────────────────────────────────────── */
.pkt-input {
  font-family: var(--pkt-sans);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--pkt-r);
  border: 1px solid var(--pkt-line-2);
  background: var(--pkt-card);
  color: var(--pkt-ink);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pkt-input:focus {
  outline: none;
  border-color: var(--pkt-forest);
  box-shadow: 0 0 0 3px rgba(28,53,40,0.10);
}
.pkt-dark .pkt-input:focus {
  box-shadow: 0 0 0 3px rgba(107,168,138,0.18);
}
.pkt-input::placeholder { color: var(--pkt-ink-4); }
.pkt-input--search {
  padding-left: 40px;
}

/* ─── Stars ──────────────────────────────────────────────────────────────── */
.pkt-stars { display: inline-flex; gap: 1px; color: var(--pkt-songket); }
.pkt-stars--ink { color: var(--pkt-ink); }

/* ─── Image placeholder slot ─────────────────────────────────────────────── */
.pkt-img {
  background: var(--pkt-paper);
  background-image: linear-gradient(135deg, var(--pkt-paper) 0%, var(--pkt-paper-2) 100%);
  color: var(--pkt-ink-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pkt-mono);
  font-size: 11px;
  border-radius: var(--pkt-r);
  position: relative;
  overflow: hidden;
}
.pkt-img::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg,
    transparent 0 12px,
    rgba(13,16,14,0.025) 12px 13px);
  pointer-events: none;
}
.pkt-dark .pkt-img::after {
  background-image: repeating-linear-gradient(45deg,
    transparent 0 12px,
    rgba(243,239,230,0.03) 12px 13px);
}
.pkt-img-emoji {
  font-size: 38px;
  filter: grayscale(0.15);
}

/* ─── Layout helpers ─────────────────────────────────────────────────────── */
.pkt-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) {
  .pkt-container { padding: 0 18px; }
}

/* ─── Nav bar (shared) ───────────────────────────────────────────────────── */
.pkt-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--pkt-bg);
  border-bottom: 1px solid var(--pkt-line);
  backdrop-filter: blur(8px);
}
.pkt-nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.pkt-nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--pkt-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.pkt-nav-links { display: flex; gap: 22px; }
.pkt-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--pkt-ink-2);
  padding: 6px 0;
  position: relative;
  cursor: pointer;
}
.pkt-nav-link:hover { color: var(--pkt-ink); }
.pkt-nav-link--active { color: var(--pkt-ink); }
.pkt-nav-link--active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -15px;
  height: 2px; background: var(--pkt-forest);
}

@media (max-width: 768px) {
  .pkt-nav-inner { padding: 12px 18px; }
  .pkt-nav-links { display: none; }
  .pkt-h1 { font-size: 26px !important; line-height: 1.2 !important; }
}

/* ─── Mobile-friendly grid breakpoints ───────────────────────────────────── */
.pkt-grid {
  display: grid;
  gap: 18px;
}

/* ─── Avatar ─────────────────────────────────────────────────────────────── */
.pkt-avatar {
  border-radius: 50%;
  background: var(--pkt-forest-tint);
  color: var(--pkt-forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

/* ─── Sections ──────────────────────────────────────────────────────────── */
.pkt-section-title {
  font-family: var(--pkt-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ─── Underline serif "·" separator ─────────────────────────────────────── */
.pkt-dot { color: var(--pkt-ink-4); margin: 0 6px; }

/* ─── Smooth route transitions ──────────────────────────────────────────── */
.pkt-route-enter { animation: pktFade 0.28s cubic-bezier(0.2,0.7,0.3,1) both; }
@keyframes pktFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* hide vertical scrollbar for inner horizontal scrollers */
.pkt-scroll-x { overflow-x: auto; }
.pkt-scroll-x::-webkit-scrollbar { display: none; }
.pkt-scroll-x { scrollbar-width: none; }

/* Hero responsive */
.pkt-hero-inner {
  position: relative;
  z-index: 1;
}
.pkt-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin-top: 20px;
  max-width: 320px;
}

@media (min-width: 768px) {
  .pkt-hero-inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  .pkt-hero-inner > div:first-child {
    flex: 1;
  }
  .pkt-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    margin-top: 0;
    max-width: none;
    min-width: 140px;
  }
  .pkt-stats-grid > div {
    text-align: right;
  }
}

/* Stats responsive */
@media (max-width: 767px) {
  .pkt-h1 { font-size: 36px !important; }
}

/* Hero flex responsive */
@media (max-width: 767px) {
  .pkt-container > div[style*="display: flex"][style*="gap: 40"] {
    flex-direction: column !important;
  }
  .pkt-container > div[style*="display: flex"][style*="gap: 40"] > div:last-child {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 16px 24px !important;
    min-width: unset !important;
  }
  .pkt-container > div[style*="display: flex"][style*="gap: 40"] > div:last-child > div {
    text-align: left !important;
  }
}

/* Hero responsive layout */
.pkt-hero-container { position: relative; z-index: 1; }
.pkt-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin-top: 20px;
  max-width: 400px;
}

@media (min-width: 768px) {
  .pkt-hero-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  .pkt-hero-container > div:first-child { flex: 1; }
  .pkt-hero-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    margin-top: 0;
    max-width: none;
    min-width: 160px;
  }
  .pkt-hero-stats > div { text-align: right; }
}

@media (max-width: 767px) {
  .pkt-hero-stats { display: none !important; }
}

@media (max-width: 767px) {
  .pkt-h1 { font-size: 32px !important; line-height: 1.15 !important; }
  .pkt-nav { display: flex !important; }
}

/* Show nav links on mobile */

/* Reduce hero padding desktop */
@media (min-width: 768px) {
  section[style*="52px 0 28px"] { padding: 28px 0 20px !important; }
}

/* Hamburger */
.pkt-hamburger { display: none; font-size: 18px; }
.pkt-mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--pkt-paper);
  border-top: 1px solid var(--pkt-line);
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.pkt-mobile-menu-item {
  padding: 12px 20px;
  font-size: 15px;
  cursor: pointer;
  color: var(--pkt-ink-2);
}
.pkt-mobile-menu-item.active { color: var(--pkt-ink); font-weight: 600; }
.pkt-mobile-menu-item:hover { background: var(--pkt-bg); }

@media (max-width: 768px) {
  .pkt-hamburger { display: flex !important; }
  .pkt-mobile-menu { display: flex; }
}
/* ============================================================
/* ============================================================
/* ============================================================
   CARI KAWASAN — MOBILE (bottom-sheet experience)
   Semua class prefix `pktm-` supaya TAK clash dengan desktop.
   .pktm-screen = overlay penuh skrin (mobile sahaja, render bila <768px)
   ============================================================ */

.pktm-screen {
  --pg900:#1f3329; --pg700:#2c5443; --pg:#2f6b4f; --gpill:#1e4533;
  --pwa:#1fa855; --pcream:#f6f2e9; --pbeige:#ece3d1;
  --psurf:#ffffff; --psurf2:#faf7ef;
  --pink:#1c2620; --pinks:#46514a; --pmuted:#8b9389;
  --pline:rgba(20,35,28,.10); --ptint:#e9f1ea; --ptintbd:#c7d9cb;
  --pshadow:0 8px 30px rgba(20,40,30,.16);
  position:fixed; inset:0; z-index:2000; overflow:hidden;
  background:var(--pcream); color:var(--pink);
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.pktm-screen * { box-sizing:border-box; }
.pktm-screen.dark {
  --pg900:#0e1611; --pg700:#1b3327; --pg:#5aa581; --gpill:#1f4233;
  --pwa:#23a85c; --pcream:#10140f; --pbeige:#161b14;
  --psurf:#191f18; --psurf2:#1d231b;
  --pink:#eef2e8; --pinks:#bcc5b9; --pmuted:#869081;
  --pline:rgba(255,255,255,.10); --ptint:#1c2a22; --ptintbd:#2e4d3d;
  --pshadow:0 12px 36px rgba(0,0,0,.55);
}

/* ── map ── */
.pktm-map { position:absolute; inset:0; z-index:0; background:var(--pbeige); }
.pktm-map__fade { position:absolute; top:0; left:0; right:0; height:160px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--pg900) 32%, transparent), transparent); }
.pktm-screen .leaflet-container { background:var(--pbeige); font-family:inherit; }
.pktm-screen .leaflet-top.leaflet-left { top:152px; left:10px; }
.pktm-screen .leaflet-bar { border:none !important; box-shadow:var(--pshadow) !important; border-radius:13px !important; overflow:hidden; }
.pktm-screen .leaflet-bar a {
  background:var(--psurf) !important; color:var(--pink) !important;
  width:38px !important; height:38px !important; line-height:38px !important;
  font-size:20px !important; border-bottom:1px solid var(--pline) !important;
}
.pktm-screen .leaflet-bar a:hover { background:var(--psurf2) !important; }

/* ── pins ── */
.pktm-pin-wrap { background:none !important; border:none !important; }
.pktm-pin { position:relative; width:38px; height:38px; border-radius:50%;
  background:var(--psurf); border:2.5px solid var(--pg);
  display:grid; place-items:center; box-shadow:0 4px 10px rgba(0,0,0,.32);
  transition:transform .18s cubic-bezier(.3,1.4,.5,1); }
.pktm-pin::after { content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid var(--pg); }
.pktm-pin__emoji { font-size:18px; line-height:1; }
.pktm-pin__num { position:absolute; top:-7px; right:-7px; background:var(--gpill); color:#fff;
  font:700 10px/1 'Hanken Grotesk'; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; border:1.5px solid var(--psurf); }
.pktm-pin--active { transform:scale(1.22); border-color:var(--gpill); z-index:999; }
.pktm-pin--active::after { border-top-color:var(--gpill); }

/* ── header ── */
.pktm-hdr { position:absolute; top:0; left:0; right:0; z-index:30;
  padding:max(14px, env(safe-area-inset-top)) 14px 11px; display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, var(--pg900), color-mix(in srgb, var(--pg900) 94%, #000));
  color:#f3efe4; box-shadow:0 2px 14px rgba(15,25,20,.28); }
.pktm-hdr__back { display:flex; align-items:center; gap:2px; background:none; border:none;
  color:rgba(243,239,228,.85); font:600 13.5px 'Hanken Grotesk'; padding:6px 4px; cursor:pointer; }
.pktm-hdr__back svg { width:17px; height:17px; }
.pktm-hdr__brand { display:flex; align-items:center; gap:8px; margin-left:auto; margin-right:auto; }
.pktm-hdr__mark { width:26px; height:26px; border-radius:8px; background:#3c7d5c;
  color:#fff; font:800 15px 'Newsreader',serif; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18); }
.pktm-hdr__name { font:600 18px/1 'Newsreader',serif; letter-spacing:.2px; color:#f6f2e7; }
.pktm-hdr__moon { width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:#f3efe4; display:grid; place-items:center; }
.pktm-hdr__moon:active { transform:scale(.92); }

/* ── filter bar ── */
.pktm-fbar { position:absolute; top:calc(max(14px, env(safe-area-inset-top)) + 48px); left:0; right:0; z-index:25;
  padding:10px 14px; display:flex; align-items:center; gap:10px;
  background:color-mix(in srgb, var(--pbeige) 90%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--pline); }
.pktm-fbar__title { display:flex; align-items:baseline; gap:8px; min-width:0; }
.pktm-fbar__h { font:600 18px 'Newsreader',serif; color:var(--pink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pktm-fbar__count { font:500 12px 'Hanken Grotesk'; color:var(--pmuted); white-space:nowrap; }
.pktm-fbtn { margin-left:auto; display:flex; align-items:center; gap:6px;
  background:var(--psurf); color:var(--pink); border:1px solid var(--pline);
  border-radius:11px; padding:8px 13px; font:600 13px 'Hanken Grotesk'; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.06); position:relative; }
.pktm-fbtn--on { border-color:var(--pg); color:var(--pg); }
.pktm-fbtn__badge { background:var(--pg); color:#fff; font:700 10px/1 'Hanken Grotesk';
  min-width:16px; height:16px; padding:0 4px; border-radius:8px; display:grid; place-items:center; }

/* ── locate fab ── */
.pktm-fab { position:absolute; right:14px; z-index:26; width:46px; height:46px; border-radius:14px;
  background:var(--psurf); color:var(--pg); border:1px solid var(--pline);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--pshadow);
  transition:bottom .28s cubic-bezier(.32,.72,0,1); }
.pktm-fab:active { transform:scale(.93); }

/* ── bottom sheet ── */
.pktm-sheet { position:absolute; left:0; right:0; bottom:0; z-index:28;
  background:var(--psurf); border-radius:24px 24px 0 0;
  box-shadow:0 -10px 36px rgba(15,30,22,.20); display:flex; flex-direction:column;
  transition:height .28s cubic-bezier(.32,.72,0,1); overflow:hidden; }
.pktm-sheet__grab { padding:9px 0 3px; display:grid; place-items:center; cursor:grab; touch-action:none; }
.pktm-grab { width:38px; height:5px; border-radius:3px; background:color-mix(in srgb, var(--pmuted) 55%, transparent); }
.pktm-sheet__head { display:flex; align-items:center; justify-content:space-between;
  padding:4px 18px 12px; cursor:grab; touch-action:none; }
.pktm-sheet__count { font:500 14px 'Hanken Grotesk'; color:var(--pinks); }
.pktm-sheet__count b { font-weight:700; color:var(--pink); }
.pktm-seg { display:flex; background:var(--pbeige); border-radius:10px; padding:3px; gap:2px; }
.pktm-seg button { border:none; background:none; font:600 12.5px 'Hanken Grotesk'; color:var(--pmuted);
  padding:5px 13px; border-radius:8px; cursor:pointer; }
.pktm-seg button.on { background:var(--psurf); color:var(--pg); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.pktm-sheet__list { flex:1; overflow-y:auto; padding:2px 12px 28px; -webkit-overflow-scrolling:touch; }

/* ── row ── */
.pktm-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:none; border:none; border-radius:16px; padding:11px 12px; cursor:pointer;
  position:relative; transition:background .15s; }
.pktm-row + .pktm-row { border-top:1px solid var(--pline); }
.pktm-row:active { background:var(--psurf2); }
.pktm-row--active { background:var(--ptint); border:1px solid var(--ptintbd); border-radius:16px; }
.pktm-row--active + .pktm-row { border-top-color:transparent; }
.pktm-row__num { width:22px; height:22px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--pmuted);
  color:var(--pmuted); font:700 11px 'Hanken Grotesk'; display:grid; place-items:center; }
.pktm-row--active .pktm-row__num { background:var(--gpill); border-color:var(--gpill); color:#fff; }
.pktm-row__thumb { width:46px; height:46px; flex-shrink:0; border-radius:13px; background:var(--pbeige);
  display:grid; place-items:center; font-size:23px; }
.pktm-row__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pktm-row__name { font:600 15px 'Newsreader',serif; color:var(--pink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pktm-row__loc { font:500 12.5px 'Hanken Grotesk'; color:var(--pmuted); }
.pktm-row__pin { display:flex; align-items:center; gap:4px; font:500 11px 'Hanken Grotesk'; margin-top:1px; }
.pktm-row__pin svg { width:12px; height:12px; }
.pktm-row__pin.ok { color:var(--pg); }
.pktm-row__pin.no { color:#c08a3e; }
.pktm-screen.dark .pktm-row__pin.no { color:#d6a85e; }
.pktm-row__status { flex-shrink:0; font:700 10px 'Hanken Grotesk'; padding:4px 8px; border-radius:7px; letter-spacing:.3px; }
.pktm-row__status.sah { background:var(--ptint); color:var(--pg); }
.pktm-empty { text-align:center; color:var(--pmuted); padding:40px 20px; font-size:14px; }
.pktm-empty b { color:var(--pink); }

/* matched hit chips */
.pktm-row__match { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:4px; }
.pktm-hit { display:inline-flex; align-items:center; gap:3px; font-style:normal; white-space:nowrap;
  font:600 10.5px 'Hanken Grotesk'; border-radius:6px; padding:2px 7px; letter-spacing:.2px; }
.pktm-hit svg { width:10px; height:10px; }
.pktm-hit--produk { color:var(--pg); background:var(--ptint); border:1px solid var(--ptintbd); }
.pktm-hit--loc { color:#2f6aa8; background:#e7f0fa; border:1px solid #c5dbf0; }
.pktm-hit--cat { color:#9a6b1f; background:#f6edd9; border:1px solid #e6d4ad; }
.pktm-hit--name, .pktm-hit--more { color:var(--pinks); background:var(--psurf2); border:1px solid var(--pline); }
.pktm-screen.dark .pktm-hit--loc { color:#86b6e6; background:#16263a; border-color:#27425f; }
.pktm-screen.dark .pktm-hit--cat { color:#d9b873; background:#2c2614; border-color:#4a3f22; }

/* ── detail card ── */
.pktm-detailWrap { position:absolute; left:0; right:0; bottom:0; z-index:40;
  transform:translateY(110%); transition:transform .32s cubic-bezier(.32,.72,0,1); pointer-events:none; }
.pktm-detailWrap--on { transform:translateY(0); pointer-events:auto; }
.pktm-detail { margin:0 12px calc(20px + env(safe-area-inset-bottom)); background:var(--psurf); border-radius:22px;
  box-shadow:0 -6px 30px rgba(15,30,22,.24), 0 0 0 1px var(--pline); padding:16px 16px 14px; }
.pktm-detail__top { display:flex; gap:12px; align-items:flex-start; }
.pktm-detail__thumb { width:54px; height:54px; flex-shrink:0; border-radius:15px; background:var(--pbeige);
  display:grid; place-items:center; font-size:27px; }
.pktm-detail__info { flex:1; min-width:0; }
.pktm-detail__name { font:600 16.5px/1.2 'Newsreader',serif; color:var(--pink); }
.pktm-detail__loc { display:flex; align-items:center; gap:4px; font:500 12.5px 'Hanken Grotesk'; color:var(--pmuted); margin-top:3px; }
.pktm-detail__loc svg, .pktm-detail__hours svg { width:13px; height:13px; flex-shrink:0; }
.pktm-detail__hours { display:flex; align-items:center; gap:5px; font:600 10.5px 'Hanken Grotesk';
  color:var(--pg); letter-spacing:.3px; margin-top:5px; }
.pktm-detail__x { color:var(--pmuted); flex-shrink:0; }
.pktm-detail__acts { display:flex; gap:8px; margin-top:14px; }

/* ── buttons ── */
.pktm-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:13px; padding:12px 10px; font:600 13.5px 'Hanken Grotesk';
  cursor:pointer; text-decoration:none; white-space:nowrap; }
.pktm-btn--primary { background:var(--gpill); color:#fff; }
.pktm-screen.dark .pktm-btn--primary { background:var(--pg); color:#0e1611; }
.pktm-btn--wa { background:var(--pwa); color:#fff; }
.pktm-btn--ghost { background:var(--psurf2); color:var(--pink); border:1px solid var(--pline); flex:0 0 auto; padding:12px 16px; }
.pktm-btn--lg { padding:15px; font-size:15px; border-radius:15px; }
.pktm-btn:active { transform:scale(.97); }
.pktm-iconbtn { width:34px; height:34px; border-radius:50%; border:none; background:var(--psurf2);
  color:var(--pink); display:grid; place-items:center; cursor:pointer; }

/* ── scrim + filter sheet ── */
.pktm-scrim { position:absolute; inset:0; z-index:50; background:rgba(15,25,20,0); visibility:hidden;
  transition:background .3s, visibility .3s; }
.pktm-scrim--on { background:rgba(15,25,20,.45); visibility:visible; }
.pktm-fsheet { position:absolute; left:0; right:0; bottom:0; background:var(--psurf);
  border-radius:26px 26px 0 0; padding:8px 20px calc(20px + env(safe-area-inset-bottom)); transform:translateY(100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1); box-shadow:0 -10px 40px rgba(0,0,0,.3); max-height:88%; overflow-y:auto; }
.pktm-fsheet--on { transform:translateY(0); }
.pktm-fsheet .pktm-grab { margin:0 auto 12px; }
.pktm-fsheet__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.pktm-fsheet__head h3 { font:600 21px 'Newsreader',serif; margin:0; color:var(--pink); white-space:nowrap; }
.pktm-fsheet__label { font:700 11px 'Hanken Grotesk'; text-transform:uppercase; letter-spacing:.6px;
  color:var(--pmuted); margin:16px 0 9px; }

/* dropdown fields */
.pktm-fgrid { display:grid; grid-template-columns:1fr 1fr; gap:11px; align-items:start; }
.pktm-field { position:relative; display:block; }
.pktm-field--full { grid-column:1 / -1; }
.pktm-field__sel { width:100%; appearance:none; -webkit-appearance:none; background:var(--psurf2);
  border:1.5px solid var(--pline); border-radius:13px; padding:13px 38px 13px 14px; cursor:pointer;
  font:600 14px 'Hanken Grotesk'; color:var(--pink); }
.pktm-field__sel:focus { outline:none; border-color:var(--pg); }
.pktm-field__sel option { color:#1c2620; background:#fff; }
.pktm-field__chev { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--pmuted); pointer-events:none; }

/* product search in filter */
.pktm-psearch { display:flex; align-items:center; gap:9px; background:var(--psurf2);
  border:1.5px solid var(--pline); border-radius:13px; padding:0 12px; height:48px; }
.pktm-psearch:focus-within { border-color:var(--pg); }
.pktm-psearch__ico { color:var(--pmuted); display:grid; place-items:center; flex-shrink:0; }
.pktm-psearch:focus-within .pktm-psearch__ico { color:var(--pg); }
.pktm-psearch__in { flex:1; border:none; background:none; outline:none; min-width:0;
  font:500 15px 'Hanken Grotesk'; color:var(--pink); }
.pktm-psearch__in::placeholder { color:var(--pmuted); }
.pktm-psearch__clr { flex-shrink:0; border:none; cursor:pointer; width:24px; height:24px; border-radius:50%;
  background:color-mix(in srgb, var(--pmuted) 22%, transparent); color:var(--pinks);
  display:grid; place-items:center; }
.pktm-psearch__clr svg { width:13px; height:13px; }
.pktm-psearch__hint { font:500 11.5px 'Hanken Grotesk'; color:var(--pmuted); margin-top:7px; }
.pktm-sugg { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.pktm-schip { border:1px solid var(--pline); background:var(--psurf); color:var(--pinks);
  border-radius:20px; padding:7px 13px; font:600 12.5px 'Hanken Grotesk'; cursor:pointer; }
.pktm-schip--on { background:var(--gpill); border-color:var(--gpill); color:#fff; }
.pktm-screen.dark .pktm-schip--on { background:var(--pg); color:#0e1611; }
.pktm-fsheet__foot { display:flex; gap:10px; margin-top:26px; }

/* ── profile sheet (slide-in dari kanan) ── */
.pktm-profile { position:absolute; inset:0; z-index:60; background:var(--pcream);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.32,.72,0,1);
  overflow-y:auto; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; }
.pktm-profile--on { transform:translateX(0); }
.pktm-profile__hero { height:200px; position:relative; flex-shrink:0;
  background:linear-gradient(135deg, var(--pg700), var(--pg900)); display:grid; place-items:center; }
.pktm-profile__heroEmoji { font-size:74px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.3)); }
.pktm-profile__back { position:absolute; top:max(52px, calc(env(safe-area-inset-top) + 16px)); left:16px;
  background:rgba(255,255,255,.92) !important; color:#1c2620 !important; width:38px; height:38px; }
.pktm-profile__body { flex:1; background:var(--pcream); border-radius:24px 24px 0 0; margin-top:-22px;
  position:relative; padding:20px 20px calc(34px + env(safe-area-inset-bottom)); }
.pktm-chip { display:inline-block; font:700 11px 'Hanken Grotesk'; padding:5px 11px; border-radius:8px; }
.pktm-chip--sah { background:var(--ptint); color:var(--pg); }
.pktm-profile__name { font:600 25px/1.15 'Newsreader',serif; color:var(--pink); margin:11px 0 8px; }
.pktm-profile__loc { display:flex; align-items:center; gap:5px; font:500 13.5px 'Hanken Grotesk'; color:var(--pmuted); }
.pktm-profile__loc svg { width:14px; height:14px; flex-shrink:0; }
.pktm-profile__hours { display:flex; align-items:center; gap:6px; font:600 12px 'Hanken Grotesk';
  color:var(--pg); letter-spacing:.3px; margin-top:8px; }
.pktm-profile__hours svg { width:14px; height:14px; flex-shrink:0; }
.pktm-profile__tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.pktm-profile__tags .pktm-tag { font:600 12.5px 'Hanken Grotesk'; color:var(--pinks); background:var(--psurf);
  border:1px solid var(--pline); border-radius:9px; padding:7px 12px; }
.pktm-profile__acts { display:flex; gap:9px; margin-top:22px; }
.pktm-profile__full { width:100%; margin-top:11px; }
.pktm-profile__full svg { transform:rotate(180deg); }
/* ===== TRANUNG-MOBILE-CSS (jangan edit manual) ===== */
.trm-screen {
    --green-900:#1f3329; --green-700:#2c5443; --green:#2f6b4f; --green-pill:#1e4533;
    --wa:#1fa855; --cream:#f6f2e9; --beige:#ece3d1;
    --surface:#ffffff; --surface-2:#faf7ef;
    --ink:#1c2620; --ink-soft:#46514a; --muted:#8b9389;
    --line:rgba(20,35,28,.10); --tint:#e9f1ea; --tint-bd:#c7d9cb;
    --orange:#cf6b32; --gold:#c79a3a;
    --shadow:0 8px 30px rgba(20,40,30,.16);
    position:absolute; inset:0; overflow:hidden;
    background:var(--cream); color:var(--ink);
    display:flex; flex-direction:column;
  }
  .trm-screen.trm-dark {
    --green-900:#0e1611; --green-700:#1b3327; --green:#5aa581; --green-pill:#244e3b;
    --wa:#23a85c; --cream:#10140f; --beige:#161b14;
    --surface:#191f18; --surface-2:#1d231b;
    --ink:#eef2e8; --ink-soft:#bcc5b9; --muted:#869081;
    --line:rgba(255,255,255,.10); --tint:#1c2a22; --tint-bd:#2e4d3d;
    --orange:#dd8a55; --gold:#d9b260;
    --shadow:0 12px 36px rgba(0,0,0,.55);
  }

  /* ── top bar ── */
  .trm-tbar { flex-shrink:0; background:var(--green-900); color:#cdd8cf; padding:46px 14px 11px;
    display:flex; align-items:center; gap:12px; font:600 13.5px 'Hanken Grotesk'; }
  .trm-tbar__back { display:flex; align-items:center; gap:6px; color:#f3efe4; text-decoration:none; }
  .trm-tbar__back svg { width:17px; height:17px; }
  .trm-tbar__sep { width:1px; height:15px; background:rgba(255,255,255,.22); }
  .trm-tbar__page { color:rgba(243,239,228,.62); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ── brand header ── */
  .trm-brand { flex-shrink:0; position:relative; z-index:30; background:var(--cream);
    padding:12px 16px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--line); }
  .trm-brand__mark { width:30px; height:30px; border-radius:9px; background:#2f6b4f; color:#fff;
    font:800 17px 'Newsreader'; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18); }
  .trm-brand__name { font:600 21px/1 'Newsreader'; color:var(--ink); letter-spacing:.2px; }
  .trm-brand__sp { flex:1; }
  .trm-brand__btn { width:38px; height:38px; border-radius:10px; border:none; cursor:pointer; background:none;
    color:var(--ink); display:grid; place-items:center; }
  .trm-brand__btn:active { transform:scale(.92); }
  .trm-brand__btn--x { background:var(--beige); }

  /* ── dropdown menu ── */
  .trm-menu { flex-shrink:0; background:var(--cream); overflow:hidden; max-height:0;
    transition:max-height .34s cubic-bezier(.32,.72,0,1); }
  .trm-menu--on { max-height:340px; border-bottom:1px solid var(--line); box-shadow:0 12px 22px rgba(15,25,20,.09); }
  .trm-menu__inner { padding:6px 0 12px; }
  .trm-menu__item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
    background:none; border:none; padding:15px 22px; font:600 17px 'Hanken Grotesk'; color:var(--ink-soft); }
  .trm-menu__item--on { color:var(--ink); font-weight:700; }
  .trm-menu__item--on .trm-menu__dot { opacity:1; }
  .trm-menu__dot { width:7px; height:7px; border-radius:50%; background:var(--green); opacity:0; flex-shrink:0; }
  .trm-menu__item--cta { color:var(--orange); font-weight:700; }
  .trm-menu__div { height:1px; background:var(--line); margin:4px 22px; }

  /* ── scroll body ── */
  .trm-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; position:relative; }
  .trm-view { }

  /* ── hero ── */
  .trm-hero { background:var(--cream); padding:26px 18px 22px; position:relative; overflow:hidden;
    border-bottom:1px solid var(--line); }
  .trm-hero::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:repeating-linear-gradient(135deg, transparent 0 21px, color-mix(in srgb, var(--orange) 22%, transparent) 21px 22px); }
  .trm-hero > * { position:relative; }
  .trm-eyebrow { font:700 11.5px 'Hanken Grotesk'; letter-spacing:1.2px; color:var(--orange); text-transform:uppercase; }
  .trm-hero__h { font:500 39px/1.08 'Newsreader'; color:var(--ink); margin:13px 0 0; letter-spacing:-.5px; text-wrap:balance; }
  .trm-hero__h em { font-style:italic; }
  .trm-hero__p { font:400 16px/1.5 'Hanken Grotesk'; color:var(--ink-soft); margin:15px 0 0; max-width:42ch; }

  /* ── search ── */
  .trm-search { display:flex; align-items:center; gap:11px; margin-top:20px; background:var(--surface);
    border:1px solid var(--line); border-radius:15px; padding:0 15px; height:54px; box-shadow:0 2px 10px rgba(20,40,30,.05); }
  .trm-search svg { width:19px; height:19px; color:var(--muted); flex-shrink:0; }
  .trm-search input { flex:1; min-width:0; border:none; background:none; outline:none;
    font:500 15px 'Hanken Grotesk'; color:var(--ink); }
  .trm-search input::placeholder { color:var(--muted); }

  /* ── stats ── */
  .trm-stats { display:grid; grid-template-columns:1fr 1fr; margin-top:24px;
    border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface-2); }
  .trm-stat { padding:16px 18px; display:flex; flex-direction:column; align-items:center; text-align:center;
    border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .trm-stat:nth-child(2n) { border-right:none; }
  .trm-stat:nth-child(n+3) { border-bottom:none; }
  .trm-stat__n { font:500 34px/1 'Newsreader'; color:var(--ink); }
  .trm-stat__l { font:700 10.5px 'Hanken Grotesk'; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-top:7px; }

  /* ── filter panel ── */
  .trm-filt { background:var(--beige); padding:20px 0 18px; border-bottom:1px solid var(--line); }
  .trm-filt__lbl { font:700 11.5px 'Hanken Grotesk'; letter-spacing:.9px; text-transform:uppercase; color:var(--muted);
    padding:0 18px; display:flex; align-items:center; justify-content:space-between; }
  .trm-filt__map { display:inline-flex; align-items:center; gap:5px; color:var(--green); font:700 11.5px 'Hanken Grotesk';
    letter-spacing:.2px; text-transform:none; text-decoration:none; cursor:pointer; }
  .trm-filt__map svg { width:14px; height:14px; }
  .trm-filt__lbl + .trm-chipwrap { margin-top:11px; }
  .trm-filt__lbl:not(:first-child) { margin-top:18px; }

  .trm-chipwrap { position:relative; }
  .trm-chipwrap::after { content:''; position:absolute; top:0; right:0; bottom:0; width:30px; pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--beige)); }
  .trm-chiprow { display:flex; gap:9px; overflow-x:auto; scrollbar-width:none; padding:2px 18px 5px; }
  .trm-chiprow::-webkit-scrollbar { display:none; }
  .trm-chip { flex-shrink:0; display:flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap;
    background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:22px;
    padding:11px 17px; font:600 13.5px 'Hanken Grotesk'; }
  .trm-chip--on { background:var(--green-pill); border-color:var(--green-pill); color:#fff; }
  .trm-screen.trm-dark .trm-chip--on { background:var(--green); color:#0e1611; }
  .trm-chip__em { font-size:15px; }

  /* ── listing ── */
  .trm-list { padding:22px 16px 30px; background:var(--cream); }
  .trm-list__head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
  .trm-list__h { font:500 27px/1 'Newsreader'; color:var(--ink); }
  .trm-list__sub { font:500 13px 'Hanken Grotesk'; color:var(--muted); margin-top:5px; }
  .trm-sortwrap { position:relative; margin:15px 0 4px; }
  .trm-sortwrap::after { content:''; position:absolute; top:0; right:0; bottom:0; width:30px; pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--cream)); }
  .trm-sortrow { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-right:24px; }
  .trm-sortrow::-webkit-scrollbar { display:none; }
  .trm-sort { flex-shrink:0; cursor:pointer; white-space:nowrap; background:var(--surface); border:1px solid var(--line);
    color:var(--ink-soft); border-radius:10px; padding:8px 14px; font:600 12.5px 'Hanken Grotesk'; }
  .trm-sort--on { background:var(--green-pill); border-color:var(--green-pill); color:#fff; }
  .trm-screen.trm-dark .trm-sort--on { background:var(--green); color:#0e1611; }

  /* ── peniaga card ── */
  .trm-pcards { display:flex; flex-direction:column; gap:13px; margin-top:18px; }
  .trm-pcard { background:var(--surface); border:1px solid var(--line); border-radius:19px; padding:14px;
    box-shadow:0 2px 12px rgba(20,40,30,.05); display:flex; flex-direction:column; gap:13px; }
  .trm-pcard__top { display:flex; gap:13px; align-items:flex-start; }
  .trm-pcard__thumb { width:60px; height:60px; flex-shrink:0; border-radius:15px; display:grid; place-items:center; font-size:30px; position:relative; }
  .trm-pcard__feat { position:absolute; top:-6px; right:-6px; background:var(--gold); color:#fff; font-size:11px;
    width:21px; height:21px; border-radius:50%; display:grid; place-items:center; box-shadow:0 2px 5px rgba(0,0,0,.2); }
  .trm-pcard__mid { flex:1; min-width:0; }
  .trm-pcard__name { font:600 17px/1.22 'Newsreader'; color:var(--ink); }
  .trm-pcard__meta { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
  .trm-catpill { display:inline-flex; align-items:center; gap:5px; font:700 11px 'Hanken Grotesk';
    border-radius:7px; padding:4px 9px; }
  .trm-pcard__loc { display:inline-flex; align-items:center; gap:4px; font:500 12.5px 'Hanken Grotesk'; color:var(--muted); }
  .trm-pcard__loc svg { width:13px; height:13px; }
  .trm-pcard__rate { display:flex; align-items:center; gap:5px; margin-top:9px; }
  .trm-pcard__star { color:var(--gold); display:flex; }
  .trm-pcard__star svg { width:14px; height:14px; }
  .trm-pcard__rnum { font:700 13px 'Hanken Grotesk'; color:var(--ink); }
  .trm-pcard__rev { font:500 12px 'Hanken Grotesk'; color:var(--muted); }
  .trm-pcard__open { margin-left:auto; font:700 10.5px 'Hanken Grotesk'; padding:4px 9px; border-radius:7px; }
  .trm-pcard__open.trm-y { background:var(--tint); color:var(--green); }
  .trm-pcard__open.trm-n { background:color-mix(in srgb, var(--muted) 16%, transparent); color:var(--muted); }
  .trm-pcard__acts { display:flex; gap:9px; border-top:1px solid var(--line); padding-top:13px; }
  .trm-pcard__btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
    border-radius:12px; padding:12px; font:700 13.5px 'Hanken Grotesk'; text-decoration:none; border:1px solid var(--line); }
  .trm-pcard__btn--wa { background:var(--wa); color:#fff; border-color:transparent; }
  .trm-pcard__btn--wa svg { width:17px; height:17px; }
  .trm-pcard__btn--view { background:var(--surface-2); color:var(--ink); flex:0 0 auto; padding:12px 18px; }

  /* ── kategori grid ── */
  .trm-khead { padding:24px 18px 6px; background:var(--cream); }
  .trm-khead__h { font:500 30px/1.05 'Newsreader'; color:var(--ink); letter-spacing:-.4px; }
  .trm-khead__sub { font:500 14px 'Hanken Grotesk'; color:var(--muted); margin-top:7px; }
  .trm-kgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:18px 16px 32px; background:var(--cream); }
  .trm-ktile { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:17px 15px 15px;
    cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:11px; box-shadow:0 2px 10px rgba(20,40,30,.05);
    transition:transform .12s; position:relative; overflow:hidden; }
  .trm-ktile:active { transform:scale(.97); }
  .trm-ktile__ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:25px; }
  .trm-ktile__name { font:600 16px/1.2 'Newsreader'; color:var(--ink); }
  .trm-ktile__count { font:600 12px 'Hanken Grotesk'; color:var(--muted); display:flex; align-items:center; gap:5px; }
  .trm-ktile__chev { position:absolute; top:16px; right:14px; color:var(--muted); opacity:.5; }
  .trm-ktile__chev svg { width:18px; height:18px; }

  /* ── kategori detail (drill) ── */
  .trm-kdetail { position:absolute; inset:0; z-index:40; background:var(--cream); overflow-y:auto;
    transform:translateX(100%); transition:transform .34s cubic-bezier(.32,.72,0,1); }
  .trm-kdetail--on { transform:translateX(0); }
  .trm-kdhero { padding:22px 18px 20px; color:#f4f1e8; position:relative; overflow:hidden; }
  .trm-kdhero::before { content:''; position:absolute; inset:0; opacity:.16;
    background-image:repeating-linear-gradient(135deg, transparent 0 18px, #fff 18px 19px); }
  .trm-kdhero > * { position:relative; }
  .trm-kdback { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16); color:#fff;
    border:none; border-radius:11px; padding:9px 14px 9px 11px; font:600 13px 'Hanken Grotesk'; cursor:pointer; }
  .trm-kdback svg { width:17px; height:17px; }
  .trm-kdhero__ic { font-size:46px; margin-top:16px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
  .trm-kdhero__name { font:600 27px/1.1 'Newsreader'; margin:10px 0 0; }
  .trm-kdhero__desc { font:400 14px/1.5 'Hanken Grotesk'; opacity:.9; margin:8px 0 0; max-width:38ch; }
  .trm-kdbar { padding:18px 16px 6px; font:700 11.5px 'Hanken Grotesk'; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); }
  .trm-kdlist { padding:6px 16px 32px; display:flex; flex-direction:column; gap:13px; }
  .trm-rankcard { position:relative; }
  .trm-rankcard__n { position:absolute; top:14px; left:14px; z-index:2; font:600 13px 'Newsreader'; color:var(--muted);
    background:var(--surface); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); }
  .trm-rankcard .trm-pcard__top { padding-left:38px; }
  .trm-kdempty { text-align:center; color:var(--muted); padding:40px 24px; font:500 14px 'Hanken Grotesk'; line-height:1.6; }

/* ===== production overrides ===== */
.trm-screen { position:fixed; inset:0; z-index:1500; width:100%; height:100%; }

/* ===== Check-in kedai (profil peniaga) ===== */
.pkt-ci-kol { display:flex; flex-direction:column; gap:8px; flex-shrink:0; align-items:stretch; min-width:200px; }
.pkt-ci-kol .pkt-btn { justify-content:center; white-space:nowrap; }
.pkt-ci-sudah { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 16px; border-radius:var(--pkt-r-lg);
  background:var(--pkt-forest-tint); color:var(--pkt-forest); font-weight:600; font-size:14px; white-space:nowrap; }
.pkt-ci-nota { font-size:12px; color:var(--pkt-ink-3); text-align:center; max-width:240px; margin:0 auto; line-height:1.4; }
.pkt-ci-nota--ralat { color:#a3342b; }
.pkt-ci-latar { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.pkt-ci-dialog { width:100%; max-width:380px; padding:28px 24px; text-align:center; }
.pkt-ci-dialog--senarai { max-width:440px; max-height:80vh; overflow-y:auto; text-align:left; }
.pkt-ci-ikon { width:60px; height:60px; border-radius:50%; background:var(--pkt-forest-tint); color:var(--pkt-forest);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.pkt-ci-senarai { display:flex; flex-direction:column; gap:8px; }
.pkt-ci-baris { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--pkt-paper); }
.pkt-ci-nama { font-weight:600; font-size:14px; color:var(--pkt-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 640px) {
  .pkt-profil-hdr { flex-wrap:wrap; }
  .pkt-ci-kol { width:100%; min-width:0; }
  .pkt-ci-kol .pkt-btn { min-height:44px; }
}
.pkt-dark .pkt-ci-nota--ralat { color:#e8897f; }

/* === Profil kedai: header, ikon, Tentang, Navigasi telefon + footer ringkas (port dari prod) === */
.pkt-profil-hdr { margin-top: -48px; }
.pkt-profil-ikon { width: 96px; height: 96px; font-size: 36px; }
.pkt-about-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.pkt-about-info { max-width: 380px; }
.pkt-only-mobile { display: none; }
.pkt-footer-slim { padding: 14px 0 !important; }
.pkt-footer-slim p { margin-top: 2px !important; }
@media (max-width: 767px) {
  .pkt-profil-hdr { margin-top: 8px !important; align-items: flex-start !important; }
  .pkt-profil-ikon { width: 60px !important; height: 60px !important; font-size: 26px !important; }
  .pkt-profil-hdr h1.pkt-h3 { font-size: 22px !important; line-height: 1.15 !important; }
  .pkt-about-grid { grid-template-columns: 1fr; }
  .pkt-about-info { max-width: none; }
  .pkt-only-mobile { display: block; }
  .pkt-profil-lencana { position: static !important; display: flex; justify-content: flex-end; padding: 8px 18px 0; }
}