/* ME — gaya toko aplikasi: latar putih, teks gelap, hijau untuk aksi utama dan nama developer. */
:root {
  --bg: #ffffff;
  --surface: #f8f9fa;
  --surface-2: #f1f3f4;
  --surface-3: #e8eaed;
  --ink: #202124;
  --teks: #3c4043;
  --dim: #5f6368;
  --hijau: #0b8457;
  --hijau-tua: #086b46;
  --hijau-latar: #e6f4ea;
  --hijau-teks: #0d6b45;
  --biru: var(--hijau);            /* nama lama, dipakai beberapa halaman */
  --biru-latar: var(--hijau-latar);
  --accent: var(--hijau);
  --soft: #9aa0a6;
  --on-accent: #ffffff;
  --on-hijau: #ffffff;
  --sampul-teks: rgba(32, 33, 36, .55);
  --bayang: rgba(60, 64, 67, .18);
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  color-scheme: light;
}
/* Mode gelap (tombol di kanan atas, atau mengikuti perangkat) */
:root[data-tema="gelap"] {
  --bg: #131314;
  --surface: #1b1c1d;
  --surface-2: #282a2c;
  --surface-3: #333537;
  --ink: #e8eaed;
  --teks: #c4c7c5;
  --dim: #9aa0a6;
  --hijau: #4fc28e;
  --hijau-tua: #6fd3a5;
  --hijau-latar: rgba(79, 194, 142, .16);
  --hijau-teks: #8ee0b8;
  --soft: #5f6368;
  --on-hijau: #062b1a;
  --bayang: rgba(0, 0, 0, .5);
  --sampul-teks: rgba(232, 234, 237, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body { min-height: 100vh; background: var(--bg); color: var(--teks); font: 400 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* Lebar sama dengan ai.syaiful.dev */
main, .foot { width: min(1400px, 100% - 48px); margin-inline: auto; }
main { padding-top: 28px; }

/* ---- Profil developer ---- */
.profil { display: flex; align-items: center; gap: 16px; }
.profil-ava {
  flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px;
  background: var(--hijau); color: var(--on-hijau); font: 800 28px/1 var(--font); box-shadow: 0 2px 8px var(--bayang); overflow: hidden;
}
.profil-ava img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.profil h1 { margin: 0; font: 700 24px/1.2 var(--font); color: var(--ink); letter-spacing: -.01em; }
.profil p { font-size: 14px; color: var(--dim); }

/* Dipakai halaman artikel dan game */
.kicker { font: 600 12px/1 var(--font); letter-spacing: .04em; color: var(--dim); }
.lead { margin-top: 12px; max-width: 62ch; font-size: 16px; color: var(--dim); }

/* ---- Bagian: tanpa judul, dipisah jarak ---- */
.blok { padding-top: 28px; scroll-margin-top: 16px; }
.blok + .blok { padding-top: 48px; }
.blok:last-child { padding-bottom: 72px; }

/* ---- Potongan bersama ---- */
.mono-cover {
  display: grid; place-items: center; width: 100%; height: 100%;
  font: 800 96px/1 var(--font); color: var(--sampul-teks);
}
[data-tone="0"] { background: linear-gradient(135deg, #d7f0e3, #b9e2cd); }
[data-tone="1"] { background: linear-gradient(135deg, #e3ecf9, #c8d9f1); }
[data-tone="2"] { background: linear-gradient(135deg, #fbecd5, #f3d7ab); }
.badge {
  position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 8px; border-radius: 6px;
  font: 700 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(32, 33, 36, .75); color: #fff;
}
.badge.kecil { position: static; display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 6px; font-size: 10px; background: var(--surface-3); color: var(--dim); }

/* Tag berupa pil abu muda */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font: 500 12px/1.3 var(--font); color: var(--teks); }

.status { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--font); color: var(--dim); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--soft); }
.status[data-status="rilis"]::before { background: var(--hijau); }
.status[data-status="awal"]::before { background: #e37400; }

.harga { font: 700 14px/1 var(--font); color: var(--hijau); }

/* Tombol: hijau penuh untuk aksi utama, teks hijau untuk lainnya */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px;
  border: 0; border-radius: 8px; cursor: pointer; text-decoration: none;
  font: 600 14px/1 var(--font); color: var(--hijau); background: transparent;
}
.btn:hover { background: var(--hijau-latar); }
.btn.utama { background: var(--hijau); color: var(--on-hijau); }
.btn.utama:hover { background: var(--hijau-tua); }

/* ---- Game: sorotan besar ---- */
.sorot {
  display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); text-decoration: none;
  background: var(--bg); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 3px var(--bayang), 0 6px 20px rgba(60, 64, 67, .08);
  transition: box-shadow .2s;
}
.sorot:hover { box-shadow: 0 2px 6px var(--bayang), 0 12px 32px rgba(60, 64, 67, .14); }
.sorot-utama { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.sorot-utama img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sorot-utama .mono-cover { font-size: 140px; }
.sorot-sisi { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 18px; }
.sorot-sisi h3 { font: 700 22px/1.25 var(--font); color: var(--ink); }
.sorot-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sorot-shots > * { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; }
.sorot-shots img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sorot-status { font-size: 13px; color: var(--dim); }
.sorot-bawah { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.platform { font: 500 12px/1.3 var(--font); color: var(--dim); }

/* ---- Game: rak kartu ---- */
.rak { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 26px 18px; margin-top: 28px; }
.kartu-game { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.kg-sampul { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; transition: box-shadow .2s; }
.kg-sampul img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kg-sampul .mono-cover { font-size: 60px; }
.kartu-game:hover .kg-sampul { box-shadow: 0 6px 18px var(--bayang); }
.kg-info { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.ikon { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; display: block; box-shadow: 0 1px 3px var(--bayang); }
.mono-ikon { display: grid; place-items: center; font: 800 22px/1 var(--font); color: var(--sampul-teks); }
.kg-info h3 { font: 600 15px/1.3 var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-genre { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-meta { display: flex; gap: 10px; align-items: center; margin-top: 3px; font-size: 12px; color: var(--dim); }
.kg-meta .gratis { color: var(--hijau); font-weight: 600; }

/* ---- Artikel ---- */
.saring { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.saring[hidden] { display: none; }
.saring button {
  padding: 8px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); color: var(--teks); font: 600 13px/1 var(--font);
}
.saring button:hover { background: var(--surface-3); }
.saring button[aria-pressed="true"] { background: var(--hijau-latar); color: var(--hijau-teks); }
.list-blog { display: grid; gap: 4px; }
.post {
  display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 10px; border-radius: 12px; text-decoration: none;
}
a.post:hover { background: var(--surface); }
.post-gambar { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; }
.post-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-gambar .mono-cover { font-size: 26px; }
.post-teks { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.post-judul { font: 600 17px/1.35 var(--font); color: var(--ink); }
.post-ringkas { font-size: 14px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--dim); }

.kosong { color: var(--dim); }
/* Halaman tanpa isi: satu tulisan besar di tengah */
.tunggu {
  display: grid; place-items: center; min-height: 58vh; text-align: center;
  font: 800 clamp(40px, 8vw, 112px)/1 var(--font); letter-spacing: -.03em; color: var(--ink);
}

/* ---- Navigasi situs di bawah ---- */
.foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 28px 0 44px;
  font: 500 12px/1 var(--font); color: var(--dim);
}
.foot a { text-decoration: none; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-nav a { padding: 10px 14px; border-radius: 8px; background: var(--surface-2); font: 600 13px/1 var(--font); color: var(--teks); }
.foot-nav a:hover { background: var(--hijau-latar); color: var(--hijau-teks); }

@media (max-width: 760px) {
  main, .foot { width: min(1400px, 100% - 24px); }
  .sorot { grid-template-columns: 1fr; }
  .sorot-utama .mono-cover { font-size: 96px; }
  .post { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sorot, .kg-sampul { transition: none; }
}

/* Warna sampul sementara di mode gelap (ditaruh paling akhir supaya menimpa versi terang) */
:root[data-tema="gelap"] [data-tone="0"] { background: linear-gradient(135deg, #1d3b2e, #15291f); }
:root[data-tema="gelap"] [data-tone="1"] { background: linear-gradient(135deg, #1f2a3d, #161e2c); }
:root[data-tema="gelap"] [data-tone="2"] { background: linear-gradient(135deg, #3a2e1b, #291f12); }