/*
 * INKRAH Web Design Open Source Project
 * https://inkrah.com
 *
 * Design tokens ---------------------------------------------------------
 * Signature: an ink-stroke rule that draws itself under the masthead on
 * load, and reappears as a hover underline on headlines — literalising
 * "INKRAH" as a mark made with ink, not decoration for its own sake.
 * No external fonts/CDNs (project requirement) — the system stack is
 * used deliberately: a wide type scale + tight tracking on display type
 * carries the personality instead of an exotic webfont.
 */

:root{
  --paper:#f7f6f2; --paper-raised:#ffffff; --ink-900:#16181c; --ink-600:#565b64; --ink-400:#8a8f98;
  --line:#e4e2da; --line-strong:#d3d0c6;
  --accent:#a6192e; --accent-2:#7a1222; --accent-soft:rgba(166,25,46,.08);
  --gold:#a9822f; --gold-dark:#2e2205; --gold-dark-2:#4a3810; --gold-text:#e9d8a6;
  --inkrah-accent-a:#a6192e; --inkrah-accent-b:#e0475f;

  --font-display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --radius:6px;
  --shadow-sm:0 1px 2px rgba(15,14,10,.05);
  --shadow-md:0 6px 24px rgba(15,14,10,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --paper:#111214; --paper-raised:#191a1d; --ink-900:#eef0f3; --ink-600:#a7acb6; --ink-400:#767c86;
  --line:#26282d; --line-strong:#34363c;
  --accent-soft:rgba(224,71,95,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 12px 32px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111214; --paper-raised:#191a1d; --ink-900:#eef0f3; --ink-600:#a7acb6; --ink-400:#767c86;
    --line:#26282d; --line-strong:#34363c;
    --accent-soft:rgba(224,71,95,.14);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 12px 32px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink-900);font-family:var(--font-sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;transition:background .25s var(--ease),color .25s var(--ease)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.container{padding:0 18px}}

::selection{background:var(--accent);color:#fff}

/* Visible keyboard focus everywhere — never suppressed. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;
}

/* ---------------------------------------------------------------------
   Header / masthead
--------------------------------------------------------------------- */
header.site-header{position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(180%) blur(6px)}
.site-header__row{display:flex;align-items:center;justify-content:space-between;padding:20px 0 16px}
.site-title{font-family:var(--font-display);font-size:1.85rem;font-weight:700;letter-spacing:-.015em}
.site-title .accent-dot{color:var(--accent)}

/* Hamburger Toggle & Slide-out Nav */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;width:34px;height:34px;cursor:pointer;color:var(--ink-900)}

.site-nav{position:fixed;inset:0 0 0 28%;background:var(--paper-raised);
  box-shadow:-12px 0 40px rgba(0,0,0,.35);
  display:flex;flex-direction:column;align-items:stretch;padding:88px 26px 24px;
  transform:translateX(100%);transition:transform .35s var(--ease);z-index:29}
.site-nav.is-open{transform:translateX(0)}
.site-nav a{margin:2px 0;padding:14px 16px;font-size:1.05rem;color:var(--gold-text);background:linear-gradient(165deg,var(--gold-dark-2),var(--gold-dark) 60%);
  border-bottom:1px solid rgba(255,255,255,.12);border-radius:var(--radius);letter-spacing:.01em;transition:background .2s var(--ease),color .2s var(--ease)}
.site-nav a:hover{background:var(--gold);color:#fff}

.nav-scrim{position:fixed;inset:0;background:rgba(10,8,2,.5);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);z-index:28}
.nav-scrim.is-open{opacity:1;pointer-events:auto}

@media (min-width:761px){
  .site-nav{left:auto;right:0;width:360px}
}

.theme-toggle{border:1px solid var(--line);background:var(--paper-raised);color:var(--ink-600);
  width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;margin-left:10px;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.theme-toggle:hover{border-color:var(--accent);transform:rotate(-14deg)}
.theme-toggle svg{width:16px;height:16px}
[data-theme="dark"] .theme-toggle .icon-sun,:root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}}

/* The ink-stroke signature: an SVG path that draws itself on load. */
.ink-stroke{display:block;width:100%;height:6px;overflow:visible}
.ink-stroke path{fill:none;stroke:url(#inkStrokeGrad);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:inkDraw 1.1s var(--ease) .15s forwards}
@keyframes inkDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.ink-stroke path{animation:none;stroke-dashoffset:0}}

/* ---------------------------------------------------------------------
   Hero + home grid
--------------------------------------------------------------------- */
.hero{padding-top:44px;padding-bottom:8px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-40%;right:-10%;width:60%;height:180%;
  background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);pointer-events:none;z-index:-1}
.hero__eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.hero__eyebrow::before{content:'';width:22px;height:1px;background:var(--accent)}
.hero h1{font-family:var(--font-display);font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.08;
  letter-spacing:-.02em;margin:0 0 16px;max-width:16ch}
.hero h1 a{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;
  background-position:0 100%;background-size:0% 2px;transition:background-size .35s var(--ease)}
.hero h1 a:hover{background-size:100% 2px}
.hero p{color:var(--ink-600);font-size:1.05rem;max-width:52ch;margin:0 0 28px}

.grid{display:grid;grid-template-columns:2fr 1fr;gap:48px;padding:36px 0 56px}
@media (max-width:860px){.grid{grid-template-columns:1fr;gap:8px}}

.section-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.section-label::after{content:'';flex:1;height:1px;background:var(--line)}

.card{padding:20px 0;border-bottom:1px solid var(--line);transition:padding-left .25s var(--ease)}
.card:hover{padding-left:6px}
.js-reveal-ready .card{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),padding-left .25s var(--ease)}
.js-reveal-ready .card.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.card{opacity:1;transform:none;transition:none}}
.card h2,.card h3{font-family:var(--font-display);margin:0 0 8px;line-height:1.28}
.card h2{font-size:1.55rem}
.card h3{font-size:1.12rem}
.card h3 a,.card h2 a{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;
  background-position:0 100%;background-size:0% 1.5px;transition:background-size .3s var(--ease)}
.card h3 a:hover,.card h2 a:hover{background-size:100% 1.5px}
.card p{color:var(--ink-600);font-size:.94rem;margin:0}
.card .meta{color:var(--ink-400);font-size:.76rem;margin-top:8px;font-family:var(--font-mono);
  letter-spacing:.02em}

.card--first{padding-top:0}
.card--first h2{font-size:clamp(1.5rem,2.6vw,2.05rem)}

.older-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.82rem;color:var(--accent);
  font-weight:600}
.older-link::after{content:'→';transition:transform .2s var(--ease)}
.older-link:hover::after{transform:translateX(3px)}

.rail-empty{color:var(--ink-400);font-size:.85rem;font-style:italic}

/* Category chip strip on the homepage */
.category-strip{display:flex;flex-wrap:wrap;gap:8px;padding:20px 0;border-bottom:1px solid var(--line)}
.category-chip{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.03em;padding:6px 13px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink-600);
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease)}
.category-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ---------------------------------------------------------------------
   Article page
--------------------------------------------------------------------- */
.reading-progress{position:fixed;top:0;left:0;height:2.5px;background:linear-gradient(90deg,var(--accent),var(--inkrah-accent-b));
  width:0%;z-index:40;transition:width .1s linear}
@media (prefers-reduced-motion: reduce){.reading-progress{transition:none}}

.article-header{max-width:720px;margin:44px auto 0;padding:0 24px}
.article-header__eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px}
.article-header h1{font-family:var(--font-display);font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1.15;
  letter-spacing:-.015em;margin:0 0 16px}
.article-header .meta{color:var(--ink-400);font-size:.82rem;font-family:var(--font-mono)}

.article-body{font-family:var(--font-display);font-size:1.18rem;line-height:1.8;max-width:720px;
  margin:32px auto 0;padding:0 24px 64px;color:var(--ink-900)}
.article-body p{margin:0 0 1.4em}
.article-body h2,.article-body h3{font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em;
  margin:1.8em 0 .7em;line-height:1.3}
.article-body h2{font-size:1.5rem}
.article-body h3{font-size:1.2rem}
.article-body blockquote{margin:1.8em 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);
  font-style:italic;color:var(--ink-600);font-size:1.15rem}
.article-body a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-soft);
  text-underline-offset:3px;transition:text-decoration-color .15s var(--ease)}
.article-body a:hover{text-decoration-color:var(--accent)}
.article-body figure{margin:2em 0}
.article-body figure img{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.article-body figcaption{font-family:var(--font-sans);font-size:.82rem;color:var(--ink-400);margin-top:8px}
.article-body pre{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;overflow-x:auto;font-family:var(--font-mono);font-size:.88rem}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

.embed{position:relative;aspect-ratio:16/9;margin:1.8em 0;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm)}
.embed iframe{width:100%;height:100%;border:0}

/* ---------------------------------------------------------------------
   Search
--------------------------------------------------------------------- */
.search-form{display:flex;gap:10px;margin:28px 0 8px;max-width:520px}
.search-form input[type="search"]{flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-raised);color:var(--ink-900);font-size:.95rem}
.search-form button{padding:12px 20px;border-radius:var(--radius);border:0;background:var(--accent);color:#fff;
  font-weight:600;cursor:pointer;transition:background .15s var(--ease)}
.search-form button:hover{background:var(--accent-2)}

/* ---------------------------------------------------------------------
   404
--------------------------------------------------------------------- */
.error-page{padding:100px 0;text-align:center}
.error-page h1{font-family:var(--font-display);font-size:5rem;margin:0;color:var(--line-strong)}
.error-page p{color:var(--ink-600);margin-top:8px}

/* ---------------------------------------------------------------------
   Footer + INKRAH mark
--------------------------------------------------------------------- */
footer.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:36px 0 28px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.footer-logo{height:32px;width:auto;display:block}
.footer-brand__name{font-family:var(--font-display);font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding-top:18px;border-top:1px solid var(--line)}
.footer-copy{color:var(--ink-400);font-size:.82rem}

.inkrah-mark{display:inline-flex;align-items:center;gap:9px;opacity:.8;transition:opacity .2s var(--ease)}
.inkrah-mark:hover{opacity:1}
.inkrah-mark__glyph{flex-shrink:0;transition:transform .3s var(--ease)}
.inkrah-mark:hover .inkrah-mark__glyph{transform:rotate(8deg) scale(1.08)}
.inkrah-mark__text{font-size:.78rem;letter-spacing:.02em;color:var(--ink-600)}
.inkrah-mark__muted{opacity:.65}
@media (prefers-reduced-motion: reduce){.inkrah-mark__glyph,.inkrah-mark{transition:none}}

/* ---------------------------------------------------------------------
   Ambient scale animation
--------------------------------------------------------------------- */
.ambient-scale{
  position:fixed;bottom:-60px;width:45px;height:45px;
  color:var(--gold);opacity:0;pointer-events:none;z-index:5;
  animation:ambientRise 18s ease-in-out infinite;
}
@keyframes ambientRise{
  0%{bottom:-60px;opacity:0;transform:rotate(-7deg)}
  6%{opacity:.3}
  25%{transform:rotate(6deg)}
  50%{transform:rotate(-5deg)}
  75%{transform:rotate(5deg)}
  94%{opacity:.3}
  100%{bottom:105%;opacity:0;transform:rotate(-7deg)}
}

/* =========================================
   STYLING LOGO FOOTER (GLOW & GOYANG)
   ========================================= */
.footer-logo {
    display: block;
    margin: 0 auto 20px auto;
    max-width: 180px;
    height: auto;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: 
        goyangElegan 5s ease-in-out infinite, 
        glowPulse 2s ease-in-out infinite alternate;
}

@keyframes goyangElegan {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@keyframes glowPulse {
    0% { 
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)) drop-shadow(0 0 10px rgba(184, 134, 11, 0.4)); 
    }
    100% { 
        filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(184, 134, 11, 0.9)); 
    }
}

.footer-logo.logo-interaktif {
    animation: none;
    transform: scale(1.08) rotate(0deg);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.6)) drop-shadow(0 0 35px rgba(184, 134, 11, 1));
}

/* ---------------------------------------------------------------------
   Ad slots
--------------------------------------------------------------------- */
.ad-slot-wrap{padding:28px 0}
.ad-slot-wrap--single{max-width:720px;margin:0 auto;border-top:1px solid var(--line)}
.ad-slot-wrap--strip{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.ad-slot{position:relative;display:block;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ad-slot--image{max-width:100%}
.ad-slot--image img{display:block;width:100%;max-width:560px;height:auto}
.ad-slot--image:hover{transform:translateY(-3px) scale(1.012);
  box-shadow:0 0 0 1px var(--accent-soft),0 8px 28px rgba(166,25,46,.22),0 0 40px rgba(224,71,95,.18)}
[data-theme="dark"] .ad-slot--image:hover,
:root:not([data-theme="light"]) .ad-slot--image:hover{
  box-shadow:0 0 0 1px rgba(224,71,95,.3),0 8px 28px rgba(224,71,95,.28),0 0 46px rgba(224,71,95,.28)}
.ad-slot__badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:#fff;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;backdrop-filter:blur(2px)}
.ad-slot--adsense{background:var(--paper-raised);border:1px solid var(--line);padding:8px;
  box-shadow:none;min-width:250px;text-align:center}
@media (prefers-reduced-motion: reduce){.ad-slot{transition:none}}

/* ---------------------------------------------------------------------
   Ad rails
--------------------------------------------------------------------- */
.ad-rail{
  position:fixed; top:110px; width:160px; z-index:6;
  display:flex; flex-direction:column; gap:16px;
  max-height:calc(100vh - 130px); overflow:hidden;
}
.ad-rail .ad-slot--image{width:160px;height:160px}
.ad-rail .ad-slot--image img{width:160px;height:160px;object-fit:cover}
.ad-rail--left{left:max(16px, calc(50vw - 580px - 176px))}
.ad-rail--right{right:max(16px, calc(50vw - 580px - 176px))}
@media (max-width:1560px){.ad-rail{display:none}}

/* ---------------------------------------------------------------------
   Ambient ⚖️ animation
--------------------------------------------------------------------- */
.timbangan-animasi{
  position:fixed;bottom:-60px;left:50%;
  font-size:2.1rem;line-height:1;opacity:0;pointer-events:none;z-index:5;
  animation:timbanganNaik 15s ease-in-out forwards;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
@keyframes timbanganNaik{
  0%{bottom:-60px;opacity:0;transform:translateX(-50%) rotate(-8deg)}
  8%{opacity:.5}
  25%{transform:translateX(-50%) rotate(7deg)}
  50%{transform:translateX(-50%) rotate(-6deg)}
  75%{transform:translateX(-50%) rotate(6deg)}
  92%{opacity:.5}
  100%{bottom:105%;opacity:0;transform:translateX(-50%) rotate(-8deg)}
}
@media (max-width:640px){.timbangan-animasi{font-size:1.6rem}}