/* ============================================================
   Kanto Indonesia — landing page
   Mobile-first. Base styles target small screens; media queries
   at the bottom scale up for tablet/desktop.
   ============================================================ */

:root {
  --text: #222e1d;          /* body text / headings */
  --bg: #cde2a0;            /* page background */
  --card: #f4f9ea;          /* card / surface on top of bg */
  --card-border: #b6cf86;
  --accent: #222e1d;        /* buttons */
  --accent-text: #cde2a0;
  --radius: 14px;
  --gap: 16px;
  --maxw: 640px;            /* the page is a narrow single column even on desktop */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- sections (tight on mobile; scaled up in the min-width query below) ---- */
.section { padding: 18px 0; text-align: center; }

.hero { padding-top: 24px; padding-bottom: 12px; }
.hero .logo { width: 150px; max-width: 60%; height: auto; margin: 0 auto 14px; }

h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 8px; }
h2 { font-size: 1.35rem; font-weight: 600; margin: 0 0 6px; }
h3.subhead { font-size: 1rem; font-weight: 600; margin: 18px 0 10px; opacity: .85; }

.subtitle { font-size: 1rem; opacity: .85; margin: 0; }
.tagline { font-size: .95rem; opacity: .8; margin: 0 0 14px; }

.loading { opacity: .5; font-size: .9rem; }

/* ---- horizontal sliders via CSS scroll-snap (native touch swipe) ---- */
.slider {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 14px;
  scrollbar-width: thin;
}
.slider::-webkit-scrollbar { height: 6px; }
.slider::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }

.card {
  scroll-snap-align: center;
  flex: 0 0 78%;            /* one-and-a-bit cards visible on mobile */
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.card img { border-radius: 8px; margin: 0 auto 12px; width: 100%; height: 160px; object-fit: cover; background: #fff; }
.card .card-title { font-weight: 600; font-size: 1rem; margin: 0 0 4px; }
.card .card-sub { font-size: .85rem; opacity: .75; margin: 0; }

/* ---- pill links (marketplaces / socials): logo + name, rounded ---- */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: .95rem;
}
.pill img { height: 22px; width: 22px; object-fit: contain; border-radius: 4px; }
.pill span { white-space: nowrap; }

/* ---- buttons ---- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

.footer { padding-top: 22px; padding-bottom: 28px; font-size: .85rem; opacity: .7; }

/* ============================================================
   Larger screens — scale up from the mobile base
   ============================================================ */
@media (min-width: 600px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.6rem; }
  .section { padding: 30px 0; }          /* more breathing room on desktop */
  .hero { padding-top: 44px; padding-bottom: 20px; }
  .card { flex-basis: 300px; }           /* fixed card width, multiple visible */
}