/* Roku Studio Blog — identitas mengikuti rokustudio.com */

/* ── Font footer: file self-hosted yang SAMA PERSIS dengan rokuwebsite ──
   Bukan Google Fonts Inter biasa — file "Inter_24pt_Regular.woff" di
   rokuwebsite didaftarkan untuk rentang weight 400–600 sekaligus (satu
   glyph statis dipakai untuk regular/medium/semibold), jadi kalau footer
   di sini pakai Inter variable asli dari Google, angka font-weight yang
   sama (500) akan tampil LEBIH TEBAL dari rokuwebsite. Supaya identik,
   footer pakai file font yang sama, bukan cuma nilai font-weight yang sama. */
@font-face {
  font-family: 'InterFooter';
  src: url('../fonts/Inter_24pt_Regular.woff') format('woff');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* weight 700 (bold) — dipakai watermark "roku" & label kolom seperti
     "LOCATION". Wajib file terpisah ini, bukan interpolasi dari face
     400-600 di atas, sama seperti setup asli rokuwebsite. */
  font-family: 'InterFooter';
  src: url('../fonts/Inter_18pt_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PixelifySansFooter';
  src: url('../fonts/PixelifySans_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #dae5ea;
  --ink: #18181b;        /* zinc-900 */
  --ink-soft: #52525b;   /* zinc-600 */
  --ink-muted: #a1a1aa;  /* zinc-400 */
  --footer-label: #71717a; /* zinc-500 — label kolom footer (LOCATION, dst), sama seperti rokuwebsite */
  --card: rgba(255, 255, 255, 0.3);
  --card-hover: rgba(255, 255, 255, 0.55);
  --line: rgba(24, 24, 27, 0.12);
  --container: 1280px;
  --pad: 24px; /* padding horizontal seragam — semua elemen rata di garis kiri yang sama */
  --radius-card: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --nav-glass: rgba(255, 255, 255, 0.6);
  --nav-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  --toggle-bg: rgba(24, 24, 27, 0.06);
  --thumb-bg: #fff;
  --noimg-a: #f4f4f5;
  --noimg-b: #e4e4e7;
  --body-text: #27272a;
  --footer-bg: rgba(255, 255, 255, 0.2);
  --footer-border: rgba(255, 255, 255, 0.4); /* border-white/40 rokuwebsite */
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --bg: #101518;
  --ink: #f4f4f5;
  --ink-soft: #a1a1aa;
  --ink-muted: #71717a;
  --footer-label: #a1a1aa;
  --card: rgba(255, 255, 255, 0.05);
  --card-hover: rgba(255, 255, 255, 0.1);
  --line: rgba(244, 244, 245, 0.14);
  --footer-border: rgba(244, 244, 245, 0.14);

  --nav-glass: rgba(28, 34, 38, 0.6);
  --nav-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  --toggle-bg: rgba(255, 255, 255, 0.08);
  --thumb-bg: #303a40;
  --noimg-a: #1a2125;
  --noimg-b: #232c31;
  --body-text: #d4d4d8;
  --footer-bg: rgba(255, 255, 255, 0.03);
}

html { background: var(--bg); }
body, .post-row-title, .btn-read, .footer, .nav-glass {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Navbar glass (mengikuti navbar rokustudio.com) ── */
@media (min-width: 768px)  { :root { --pad: 48px; } }
@media (min-width: 1024px) { :root { --pad: 80px; } }

.nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  padding: 16px 0;
  pointer-events: none;
}
.nav-bar {
  pointer-events: auto;
  /* max-w-[1440px] rokuwebsite — sama seperti footer, beda dari
     var(--container) (1280px) yang dipakai isi blog (hero/article/dst). */
  max-width: 1440px; margin: 0 auto;
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.nav-glass {
  padding: 5px;
  border-radius: 999px;
  background: var(--nav-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--nav-shadow);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
}
.nav-logo img { display: block; }
.nav-logo em {
  font-style: normal; font-weight: 700;
  color: var(--ink-muted); margin-left: 3px;
  font-size: 10px;
  vertical-align: super;
}

.nav-controls { display: flex; align-items: center; gap: 8px; }

/* Toggle bahasa ENG/ID — segmented pill */
.lang-toggle {
  position: relative;
  display: flex; align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--toggle-bg);
}
.lang-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center;
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 7px 13px; border-radius: 999px;
  color: var(--ink-muted);
  transition: color 0.25s;
}
.lang-btn.active { color: var(--ink); }
.lang-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--thumb-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s var(--ease-out);
}
.lang-thumb[data-active="id"] { transform: translateX(100%); }

/* Toggle tema */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--toggle-bg);
  color: var(--ink-soft);
  transition: color 0.25s, background 0.25s;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.page { flex: 1; padding-top: 84px; }

/* ── Hero ── */
.hero { position: relative; max-width: var(--container); margin: 0 auto; padding: 56px var(--pad) 0; }

/* Animasi ikan transparan — dekoratif, mengambang di atas teks hero */
.hero-fish {
  position: absolute;
  top: 50%; right: clamp(0px, 6vw, 120px);
  width: clamp(160px, 20vw, 320px);
  height: auto;
  transform: translateY(-58%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: var(--fish-blend, normal);
}
@media (max-width: 767px) {
  /* Di mobile: lebih besar & sengaja "menabrak" teks hero statement di
     area tengah — efek playful, bukan lagi disembunyikan di pojok. */
  .hero-fish {
    top: 42%;
    right: 8%;
    width: clamp(120px, 34vw, 180px);
    transform: translateY(-50%);
  }
}

/* Maskot ikan berenang lintas layar — dari kanan luar-frame ke kiri luar-frame,
   berulang terus. fixed (bukan absolute) supaya tetap "berenang" melintasi
   layar terlepas dari posisi scroll saat membaca blog list. Sprite sumbernya
   sudah menghadap kiri, jadi tidak perlu di-flip. */
/* Siklus 2 fase dalam satu animation-duration: 0-50% = berenang melintas
   (6 detik desktop / 4 detik mobile), 50-100% = diam di luar layar kanan
   menunggu sebelum spawn lagi (gap sama panjangnya) — total siklus jadi
   12 detik desktop / 8 detik mobile, jangan disamakan dengan durasi
   berenangnya saja. */
.swim-fish {
  position: fixed;
  top: 55%;
  left: 0;
  width: clamp(90px, 11vw, 170px);
  height: auto;
  pointer-events: none;
  z-index: 5;
  animation: swim-across 12s linear infinite;
}
@keyframes swim-across {
  0%      { transform: translateX(100vw); }   /* mulai di luar kanan */
  50%     { transform: translateX(-140%); }   /* selesai berenang, di luar kiri */
  50.001% { transform: translateX(100vw); }   /* loncat balik ke luar kanan (tak kasat mata) */
  100%    { transform: translateX(100vw); }   /* diam menunggu — gap sebelum spawn lagi */
}
@media (max-width: 767px) {
  .swim-fish {
    top: 62%;
    animation-duration: 8s;
  }
}

.hero-row { display: flex; flex-direction: column; gap: 16px; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px;
}
.hero-title {
  font-size: clamp(72px, 12vw, 144px);
  font-weight: 800; letter-spacing: -0.045em; line-height: 0.95;
}
.hero-title.small { font-size: clamp(48px, 8vw, 96px); }
.hero-title.statement {
  font-size: clamp(44px, 6.4vw, 92px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.04;
  text-align: left;
  text-wrap: balance;
}
.hero-sub { color: var(--ink-soft); font-size: 17px; max-width: 320px; line-height: 1.6; }

@media (min-width: 768px) {
  .hero-row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .hero-sub { text-align: right; }
}

/* ── Content (terikat 1280px) ── */
.content { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad) 96px; width: 100%; }

/* ── Bloglist ── */
.post-list { margin-top: 56px; border-bottom: 1px solid var(--line); }
.post-list .post-row:first-child { border-top: none; }

.post-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .post-row { grid-template-columns: 420px 1fr; gap: 56px; padding: 56px 0; }
}

/* Seluruh baris bisa diklik */
.post-row-link { position: absolute; inset: 0; z-index: 2; }

/* Thumbnail — tanpa rounded, dimiringkan seperti StackCard di halaman Works
   (konsep sama biar konsisten satu identitas: rotate per-index, lurus +
   terangkat saat hover). Rotasi di .post-row-thumb sendiri, bukan di
   .post-row, supaya body teks di sebelahnya tetap lurus normal. */
.post-row-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 0;
  overflow: hidden;
  background: var(--noimg-b);
  box-shadow: 0 4px 18px rgba(0, 50, 90, 0.10);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
/* Pola rotasi bergantian, identik dengan ROTATE_PATTERN di WorksPage.jsx */
.post-list .post-row:nth-of-type(10n+1) .post-row-thumb { transform: rotate(-4deg); }
.post-list .post-row:nth-of-type(10n+2) .post-row-thumb { transform: rotate(3deg); }
.post-list .post-row:nth-of-type(10n+3) .post-row-thumb { transform: rotate(-2deg); }
.post-list .post-row:nth-of-type(10n+4) .post-row-thumb { transform: rotate(5deg); }
.post-list .post-row:nth-of-type(10n+5) .post-row-thumb { transform: rotate(-3deg); }
.post-list .post-row:nth-of-type(10n+6) .post-row-thumb { transform: rotate(4deg); }
.post-list .post-row:nth-of-type(10n+7) .post-row-thumb { transform: rotate(-5deg); }
.post-list .post-row:nth-of-type(10n+8) .post-row-thumb { transform: rotate(2deg); }
.post-list .post-row:nth-of-type(10n+9) .post-row-thumb { transform: rotate(-4deg); }
.post-list .post-row:nth-of-type(10n+10) .post-row-thumb { transform: rotate(3deg); }

.post-row:hover .post-row-thumb {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow: 0 20px 48px rgba(0, 50, 90, 0.18);
}
.post-row-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.9s var(--ease-out);
}
.post-row:hover .post-row-thumb img { transform: scale(1.06); }
.post-row-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--noimg-a), var(--noimg-b));
}
.post-row-noimg span { color: var(--ink-muted); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; }

/* Body */
.post-row-body { display: flex; flex-direction: column; align-items: flex-start; }

.post-row-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}

/* Capsule kategori — soft pastel */
.tag-pill {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tag-default-bg, rgba(24, 24, 27, 0.06));
  color: var(--tag-default-fg, #52525b);
}
.tag-branding  { background: #fbe3e6; color: #a04e58; }
.tag-design    { background: #e3e9fb; color: #4d5fa3; }
.tag-marketing { background: #ddf2e5; color: #3e7a55; }
.tag-business  { background: #fbeed6; color: #96713a; }

[data-theme="dark"] .tag-pill      { background: rgba(255, 255, 255, 0.08); color: #a1a1aa; }
[data-theme="dark"] .tag-branding  { background: rgba(251, 113, 133, 0.16); color: #f8a8b3; }
[data-theme="dark"] .tag-design    { background: rgba(129, 140, 248, 0.16); color: #b2bafb; }
[data-theme="dark"] .tag-marketing { background: rgba(74, 222, 128, 0.14); color: #94d9ad; }
[data-theme="dark"] .tag-business  { background: rgba(251, 191, 36, 0.14); color: #e4c184; }

.post-row-title {
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.12;
  margin-bottom: 16px;
  max-width: 560px;
  text-wrap: balance;
  transition: transform 0.5s var(--ease-out);
}
.post-row:hover .post-row-title { transform: translateX(6px); }

.post-row-excerpt {
  color: var(--ink-soft);
  font-size: 15px; line-height: 1.7;
  max-width: 460px;
  text-wrap: pretty;
  margin-bottom: 28px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Tombol Read More */
.btn-read {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding: 11px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.btn-read-arrow {
  display: inline-flex;
  transition: transform 0.35s var(--ease-out);
}
.post-row:hover .btn-read { background: var(--ink); color: var(--bg); }
.post-row:hover .btn-read-arrow { transform: translateX(4px); }

/* Pager */
/* Load More */
.load-more-wrap { display: flex; justify-content: center; margin-top: 48px; }
.btn-load-more {
  cursor: pointer;
  font-family: inherit;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), opacity 0.2s;
}
.btn-load-more:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.btn-load-more:disabled { opacity: 0.6; cursor: default; }
.btn-load-more.is-loading .btn-read-arrow { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Artikel ── */
.article { max-width: 760px; margin: 0 auto; padding: 48px 24px 96px; }
.article-header { margin-bottom: 36px; }
.article-tags { display: flex; gap: 14px; margin-bottom: 16px; }
.card-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-muted);
}
a.card-tag:hover { color: var(--ink-soft); }
.article-title {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: 20px;
  text-wrap: balance;
}
.article-byline { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 14px; }
.card-author { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.dot { color: var(--ink-muted); }
.article-cover { border-radius: var(--radius-card); overflow: hidden; margin-bottom: 40px; }
.article-cover img { width: 100%; }

.article-body { font-size: 17px; line-height: 1.8; color: var(--body-text); }
.article-body p { text-wrap: pretty; }
/* H1-H5 dari editor CMS — H1 sengaja lebih kecil dari .article-title (judul
   artikel sungguhan) supaya tidak bersaing secara visual, tapi tetap
   heading TERBESAR di antara isi body. */
.article-body h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 48px 0 18px; }
.article-body h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 40px 0 16px; }
.article-body h3 { font-size: 21px; font-weight: 700; margin: 32px 0 12px; }
.article-body h4 { font-size: 19px; font-weight: 600; margin: 28px 0 10px; }
.article-body h5 { font-size: 17px; font-weight: 600; color: var(--ink-soft); margin: 24px 0 8px; }
.article-body p { margin-bottom: 20px; }
.article-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article-body img { border-radius: 12px; margin: 28px auto; max-width: 100%; height: auto; }
.article-body video {
  border-radius: 12px; margin: 28px auto; max-width: 100%; height: auto; display: block;
  background: #000;
}
.article-body blockquote {
  border-left: 3px solid var(--ink); padding-left: 20px; margin: 28px 0;
  color: var(--ink-soft); font-style: italic;
}
/* Caption — keterangan singkat berdiri sendiri, bukan hasil <figcaption>
   (Quill tidak punya figure/figcaption), jadi cukup paragraf kecil beda gaya. */
.article-body .ql-caption-block {
  font-size: 13px; letter-spacing: 0.01em; line-height: 1.5;
  font-weight: 500; font-style: normal; color: var(--ink-muted);
  margin: -12px 0 24px;
}
.article-body ul, .article-body ol { margin: 0 0 20px 24px; }
.article-body li { margin-bottom: 8px; }
.article-body pre {
  background: #18181b; color: #e4e4e7; border-radius: 12px;
  padding: 20px; overflow-x: auto; font-size: 14px; margin: 28px 0;
}
.article-footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.back-home { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.back-home:hover { color: var(--ink); }

/* ── Empty & 404 ── */
.empty { text-align: center; padding: 120px 0; color: var(--ink-muted); }
.empty.tall { padding: 160px 0; }
.empty-code { font-size: 80px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.empty-title { font-size: 18px; font-weight: 500; color: var(--ink-soft); }
.empty-sub { font-size: 14px; margin-top: 6px; }
.empty-sub a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Footer (mengikuti footer rokustudio.com — lihat Footer.jsx / StaticFooter.jsx
   di project rokuwebsite untuk spec sumber kebenarannya) ── */
.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100dvh;
  padding-top: 96px;
  background: var(--footer-bg);
  backdrop-filter: blur(24px); /* backdrop-blur-xl rokuwebsite = 24px, bukan 20px */
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--footer-border); /* border-white/40 rokuwebsite */
  overflow: hidden;
  font-family: 'InterFooter', 'Inter', sans-serif;
}

.footer-main {
  /* position:relative + z-10 rokuwebsite — supaya konten selalu di atas
     watermark "roku" (absolute) kalau kebetulan overlap di layar pendek. */
  position: relative;
  z-index: 10;
  /* max-w-[1440px] rokuwebsite — sengaja tidak pakai var(--container) (1280px)
     yang dipakai elemen lain di blog, supaya lebar footer identik dengan
     situs utama di layar lebar, bukan ikut lebar kontainer blog. */
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  padding: 0 var(--pad) 128px; /* pb-32 rokuwebsite — konstan di semua breakpoint */
}

.footer-headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-col {
  /* flex flex-col gap-2 rokuwebsite — sebelumnya tidak ada display:flex sama
     sekali, jadi (a) jarak label→isi cuma dari margin-bottom h4 (4px) padahal
     seharusnya + gap 8px = 12px, dan (b) .footer-col-end{justify-content:flex-end}
     di bawah ini tidak efektif karena parent-nya bukan flex container. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-cta {
  font-size: 12vw;
  line-height: 0.85; font-weight: 500; letter-spacing: -0.05em;
  color: var(--ink);
}
@media (min-width: 1024px) {
  .footer-cta { font-size: 8vw; }
}
.footer-headline .footer-cta:last-of-type {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}
@media (min-width: 1024px) {
  .footer-headline .footer-cta:last-of-type { gap: 8px; }
}
.footer-cta .pixel-e {
  font-family: 'PixelifySansFooter', 'Pixelify Sans', sans-serif;
  font-weight: 700;
  margin-top: 0.15em;
}

.footer-cols {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
  max-width: 672px; /* max-w-2xl rokuwebsite (42rem) — bukan 640px */
  margin-top: 80px; /* mt-20 rokuwebsite */
}
/* md:grid-cols-3 rokuwebsite → breakpoint 768px, bukan 640px */
@media (min-width: 768px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); margin-top: 128px; } /* md:mt-32 rokuwebsite */
}

.footer-col h4 {
  /* text-xs font-bold uppercase tracking-widest text-zinc-500 mb-1 rokuwebsite —
     text-xs Tailwind bawaannya line-height 1rem (16px) walau tidak ditulis
     eksplisit di class; tanpa ini browser jatuh ke "normal" (~13.8px). */
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--footer-label); margin-bottom: 4px;
}
.footer-col p, .footer-col a {
  /* text-sm font-normal text-zinc-900 leading-relaxed rokuwebsite */
  display: block;
  font-size: 14px; font-weight: 400; color: var(--ink); line-height: 1.625;
}
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-social { display: flex; flex-direction: column; gap: 4px; }
.footer-col-end { justify-content: flex-end; align-self: end; }
/* roku®studio / Gositus pakai warna sama seperti kolom lain (text-zinc-900),
   bukan warna redup. Link Gositus inline di dalam paragraf, bukan block. */
.footer-col-end p { color: var(--ink); }
.footer-col-end a { display: inline; color: var(--ink); }

/* Watermark: dipin ke bawah footer (absolute, bukan block normal) supaya posisi
   & crop-nya identik dengan versi React — bukan cuma "kira-kira sama". */
.footer-watermark {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  display: flex; justify-content: center; align-items: flex-end;
  pointer-events: none;
  overflow: hidden;
}
.footer-watermark span {
  display: block;
  font-size: 42vw;
  line-height: 0.8;
  font-weight: 700; letter-spacing: -0.05em;
  color: var(--ink);
  opacity: 0.95;
  white-space: nowrap;
  margin-bottom: -3vw;
  transform: translateY(28%);
}
@media (min-width: 768px) {
  .footer-watermark span { transform: translateY(32%); }
}