/* Idnew Lab — shared stylesheet for every page (index + 8 app pages + 404).
   Edit here once; every page picks it up via <link rel="stylesheet" href="/style.css">. */

:root{
  --ink:#141B1D;
  --ink-soft:#374440;
  --paper:#F1F4F0;
  --paper-raised:#FFFFFF;
  --accent:#0F6D5C;
  --accent-strong:#0A4F42;
  --accent-tint:#E4EEE9;
  --gold:#C98A2C;
  --line:#D9DFD9;
  --muted:#57625B;
  --shadow: 0 1px 2px rgba(20,27,29,0.04), 0 8px 24px -12px rgba(20,27,29,0.16);
  --radius-card: 14px;
  --radius-pill: 999px;
  --maxw: 1120px;

  /* Fixed-contrast panel (newsletter): deliberately stays a deep teal
     spotlight in both themes rather than flipping with ink/paper. */
  --contrast-bg:#10221D;
  --contrast-fg:#F1F4F0;
  --contrast-fg-soft:rgba(241,244,240,0.72);
  --contrast-border:rgba(241,244,240,0.22);
  --contrast-input-bg:rgba(241,244,240,0.08);
  --contrast-placeholder:rgba(241,244,240,0.5);
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#EDF1EE;
    --ink-soft:#C4CDC7;
    --paper:#11201C;
    --paper-raised:#16231F;
    --accent:#3FB795;
    --accent-strong:#7FD2B6;
    --accent-tint:#1B332C;
    --gold:#E3AE5E;
    --line:#294038;
    --muted:#93A69C;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.55);
  }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Archivo', 'Public Sans', sans-serif;
  font-weight:700;
  text-wrap:balance;
  margin:0;
  letter-spacing:-0.01em;
}

p{ margin:0; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:500; }

.eyebrow{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-strong);
}

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

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:1.05rem;
  text-decoration:none;
  color:var(--ink);
}
.brand-mark{
  width:30px; height:30px;
  border-radius:8px;
  background:var(--accent);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
  padding:5px;
  flex:none;
}
.brand-mark span{ background:var(--paper-raised); border-radius:2px; }
.brand-mark span:nth-child(2), .brand-mark span:nth-child(3){ opacity:0.55; }
.brand small{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-weight:500;
  font-size:0.68rem;
  letter-spacing:0.06em;
  color:var(--muted);
  text-transform:none;
}
.navlinks{ display:flex; align-items:center; gap:30px; font-size:0.92rem; font-weight:600; }
.navlinks a{ text-decoration:none; color:var(--ink-soft); transition:color .15s ease; }
.navlinks a:hover{ color:var(--accent-strong); }
.navlinks .domain-pill{
  font-family:'IBM Plex Mono', monospace;
  font-weight:500;
  font-size:0.78rem;
  color:var(--accent-strong);
  background:var(--accent-tint);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:var(--radius-pill);
}
@media (max-width:720px){
  .navlinks a:not(.domain-pill){ display:none; }
}

.nav-right{ display:flex; align-items:center; gap:20px; }

.lang-switch{
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--accent-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.lang-switch .lang-option{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--muted);
}
.lang-switch .lang-option.active{
  background: var(--paper-raised);
  color: var(--accent-strong);
  font-weight: 700;
}

/* ---------- Buttons / status pill (shared) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  border-radius:10px;
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  font-family:'Public Sans', sans-serif;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#FFFFFF; }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }

.playstore-badge-link{ display:inline-flex; align-items:center; }
.playstore-badge{ height:54px; width:auto; }

.status{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.03em;
  color:var(--accent-strong);
  background:var(--accent-tint);
  border-radius:var(--radius-pill);
  padding:5px 10px;
}
.status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-strong); }

/* ---------- Hero (home) ---------- */
.hero{
  padding:88px 0 96px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
@media (max-width:880px){
  .hero{ grid-template-columns:1fr; padding:56px 0 64px; gap:44px; }
}
.hero h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.06; margin:16px 0 22px; }
.hero h1 em{ font-style:normal; color:var(--accent-strong); }
.hero-lede{ max-width:52ch; color:var(--ink-soft); font-size:1.08rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

.hero-meta{
  display:flex;
  gap:26px;
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.hero-meta div{ font-size:0.82rem; color:var(--muted); }
.hero-meta strong{
  display:block;
  font-family:'Archivo', sans-serif;
  font-size:1.4rem;
  color:var(--ink);
  font-weight:700;
}

/* App grid motif (home hero) */
.grid-motif{
  position:relative;
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.tile{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:22%;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18%;
}
.tile svg{ width:100%; height:100%; stroke:var(--accent-strong); }
.tile.filled{ background:var(--accent); border-color:var(--accent); }
.tile.filled svg{ stroke:#FFFFFF; }
.tile.gold{ background:var(--gold); border-color:var(--gold); }
.tile.gold svg{ stroke:#251804; }
.tile.ghost{ background:transparent; border-style:dashed; opacity:0.55; }
@media (prefers-reduced-motion: no-preference){
  .tile{ animation:float 7s ease-in-out infinite; }
  .tile:nth-child(2n){ animation-delay:-1.6s; }
  .tile:nth-child(3n){ animation-delay:-3.2s; }
  .tile:nth-child(4n){ animation-delay:-4.8s; }
}
@keyframes float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ---------- Section shell ---------- */
section{ padding:76px 0; border-top:1px solid var(--line); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); margin-top:10px; }
.section-head .lede{ max-width:46ch; color:var(--muted); font-size:0.98rem; }

/* ---------- About / principles (shared: home + app pages) ---------- */
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; }
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }
.about-copy p{ color:var(--ink-soft); font-size:1.03rem; max-width:56ch; }
.about-copy p + p{ margin-top:16px; }

.principle-list{ display:flex; flex-direction:column; gap:0; }
.principle{ display:grid; grid-template-columns:120px 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
.principle:last-child{ border-bottom:1px solid var(--line); }
.principle .tag{ font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--muted); padding-top:3px; }
.principle h3{ font-size:1.08rem; margin-bottom:6px; }
.principle p{ color:var(--muted); font-size:0.94rem; max-width:44ch; }

/* ---------- Apps grid (home) ---------- */
.app-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.app-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:26px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:16px;
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.app-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent-strong);
  box-shadow:0 2px 4px rgba(20,27,29,0.06), 0 18px 32px -16px rgba(20,27,29,0.24);
}
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.view-link{ font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--muted); transition:color .15s ease, transform .15s ease; }
.app-card:hover .view-link{ color:var(--accent-strong); transform:translateX(2px); }
.app-icon{
  width:52px; height:52px;
  border-radius:26%;
  background:var(--accent-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.app-icon svg{ width:26px; height:26px; stroke:var(--accent-strong); }
.app-icon img{ width:100%; height:100%; object-fit:cover; }
.app-card h3{ font-size:1.08rem; }
.app-card p.desc{ color:var(--muted); font-size:0.92rem; flex:1; }

/* ---------- Newsletter (shared: home + app pages) ---------- */
.newsletter{
  background:var(--contrast-bg);
  color:var(--contrast-fg);
  border-radius:20px;
  padding:52px 44px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
}
@media (max-width:880px){ .newsletter{ grid-template-columns:1fr; padding:40px 28px; } }
.newsletter h2{ color:var(--contrast-fg); font-size:clamp(1.4rem, 2.4vw, 1.9rem); }
.newsletter p{ color:var(--contrast-fg-soft); margin-top:10px; max-width:42ch; }
.nl-form{ display:flex; gap:10px; flex-wrap:wrap; }
.nl-form input[type="email"]{
  flex:1;
  min-width:200px;
  padding:13px 16px;
  border-radius:10px;
  border:1px solid var(--contrast-border);
  background:var(--contrast-input-bg);
  color:var(--contrast-fg);
  font-family:'Public Sans', sans-serif;
  font-size:0.95rem;
}
.nl-form input[type="email"]::placeholder{ color:var(--contrast-placeholder); }
.nl-form button{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:13px 20px;
  border-radius:10px;
  font-weight:700;
  font-size:0.95rem;
  cursor:pointer;
  font-family:'Public Sans', sans-serif;
  transition:background .15s ease;
}
.nl-form button:disabled{ opacity:0.6; cursor:progress; }
.nl-form button:hover:not(:disabled){ background:var(--accent-strong); }
.nl-note{ margin-top:10px; font-size:0.8rem; color:var(--contrast-fg-soft); }
.nl-success{ font-size:0.92rem; color:#8FE0C4; background:rgba(63,183,149,0.16); display:none; padding:12px 16px; border-radius:10px; }
.nl-success.show{ display:block; }
.nl-error{ font-size:0.85rem; color:#F3B7A8; margin-top:10px; display:none; }
.nl-error.show{ display:block; }

/* ---------- Contact (home) ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
@media (max-width:720px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ border:1px solid var(--line); border-radius:var(--radius-card); padding:24px; background:var(--paper-raised); }
.contact-card .eyebrow{ display:block; margin-bottom:10px; }
.contact-card a{ font-family:'Archivo', sans-serif; font-weight:600; font-size:1.02rem; text-decoration:none; color:var(--ink); }
.contact-card a:hover{ color:var(--accent-strong); }
.contact-card p.hint{ margin-top:8px; color:var(--muted); font-size:0.86rem; }

/* ---------- App detail pages ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--muted);
  margin-bottom:30px; transition:color .15s ease;
}
.back-link:hover{ color:var(--accent-strong); }
.detail-hero{ padding:52px 0 60px; border-top:none; }
.detail-top{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.detail-icon{ width:64px; height:64px; border-radius:26%; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; flex:none; box-shadow:var(--shadow); overflow:hidden; }
.detail-icon svg{ width:32px; height:32px; stroke:var(--accent-strong); }
.detail-icon img{ width:100%; height:100%; object-fit:cover; }
.detail-title{ font-size:clamp(2rem, 4.2vw, 2.9rem); line-height:1.08; margin-bottom:16px; }
.detail-tagline{ color:var(--ink-soft); font-size:1.1rem; max-width:58ch; margin-bottom:22px; }
.detail-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }

.detail-copy p{ color:var(--ink-soft); font-size:1.02rem; max-width:62ch; }
.detail-copy p + p{ margin-top:16px; }

/* Feature graphic — real banner image from the app's own store listing.
   Fixed at the real feature-graphic ratio (1024x500) with object-fit:cover
   so a mis-sized upload (e.g. a portrait screenshot dropped in by mistake)
   gets cropped to a sane banner shape instead of stretching to its full
   natural height. */
.feature-banner{
  width:100%;
  max-width:var(--maxw);
  aspect-ratio:1024/500;
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-bottom:28px;
  border:1px solid var(--line);
}
.feature-banner img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Screenshots inside "Tentang aplikasi" — a grid that fills the available
   width rather than fixed-size thumbnails, so on-screen text in the shot
   itself (watermark, UI labels) stays legible. Four across on desktop,
   two on tablet, one full-width per row on phones (scroll down through
   them like a feed rather than sideways). Each image links to its own
   full-resolution file in a new tab for a true close-up look. */
.screenshot-gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-top:24px;
}
.screenshot-gallery a{
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:var(--paper-raised);
}
.screenshot-gallery img{ display:block; width:100%; height:auto; }
@media (max-width:900px){
  .screenshot-gallery{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .screenshot-gallery{ grid-template-columns:1fr; gap:20px; }
}

.status-note{
  display:flex; align-items:center; gap:10px; font-size:0.86rem; color:var(--muted);
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:14px 18px; margin-top:36px;
}

/* ---------- 404 ---------- */
.notfound{ padding:120px 0 140px; border-top:none; text-align:left; }
.notfound .eyebrow{ margin-bottom:18px; }
.notfound h1{ font-size:clamp(2.4rem, 5vw, 3.6rem); margin-bottom:18px; }
.notfound p.lede{ color:var(--ink-soft); font-size:1.08rem; max-width:56ch; margin-bottom:36px; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:34px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:0.85rem; color:var(--muted); }
.footer-row .brand{ font-size:0.95rem; }