/*
 * 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)}

.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{margin-left:6px;padding:8px 12px;font-size:.86rem;color:var(--ink-600);border-radius:var(--radius);
  transition:color .15s var(--ease),background .15s var(--ease)}
.site-nav a:hover{color:var(--ink-900);background:var(--accent-soft)}

.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}}

.nav-toggle{display:none;border:0;background:none;width:34px;height:34px;cursor:pointer;color:var(--ink-900)}

/* 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}}

@media (max-width:760px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .site-nav{position:fixed;inset:0 0 0 28%;background:transparent;
    /*border-left:1px solid rgba(255,255,255,.08);box-shadow:-12px 0 40px rgba(0,0,0,.35);*/
    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 6px;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);letter-spacing:.01em}
  .site-nav a:hover{background:#a9822f;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}
}

/* ---------------------------------------------------------------------
   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 — one instance drifting from footer to header,
   subtle wobble via rotation, low opacity throughout so it never competes
   with reading content. Single element + infinite loop = only ever one
   visible at a time, by construction.
--------------------------------------------------------------------- */
.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)}
}
/*
@media (max-width:900px){.ambient-scale{display:none}}
@media (prefers-reduced-motion: reduce){.ambient-scale{display:none}}
*/

/* =========================================
   4. STYLING LOGO FOOTER
   ========================================= 
.footer-logo {
    display: block;
    margin: 0 auto 20px auto;
    max-width: 180px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
*/

/* =========================================
   STYLING LOGO FOOTER (GLOW & GOYANG)
   ========================================= */
.footer-logo {
    display: block;
    margin: 0 auto 20px auto;
    max-width: 180px;
    height: auto;
    cursor: pointer;
    /* Transisi agar perubahan ke mode hover terasa sangat halus (elegan) */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Menjalankan 2 animasi sekaligus: Goyang dan Glow */
    animation: 
        goyangElegan 5s ease-in-out infinite, 
        glowPulse 2s ease-in-out infinite alternate;
}

/* 1. Animasi Goyang (Wobble) Elegan */
@keyframes goyangElegan {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* 2. Animasi Cahaya (Glow) dan Bayangan (Shadow) */
/* Menggunakan warna Dark Gold (rgb: 184, 134, 11) agar senada dengan menu */
@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)); 
    }
}

/* Class tambahan yang akan dipicu oleh JavaScript saat di-hover */
.footer-logo.logo-interaktif {
    animation: none; /* Matikan animasi looping saat disentuh */
    transform: scale(1.08) rotate(0deg); /* Membesar sedikit dan posisinya lurus */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.6)) drop-shadow(0 0 35px rgba(184, 134, 11, 1));
}
/* ---------------------------------------------------------------------
   Ad slots — image banners get a soft glow on hover; AdSense slots stay
   visually neutral since Google renders their own creative inside.
   (Re-added — needed by public/templates/_ad-slot.php, included from
   article.php and _footer.php.)
--------------------------------------------------------------------- */
.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 — square-format ads pinned in the page margins, only where
   there's real empty space to show them (wide desktop viewports). Below
   the breakpoint they simply never render — the below-article/before-
   footer ad slots elsewhere on the page still show normally everywhere,
   mobile included.
--------------------------------------------------------------------- */
.ad-rail{position:fixed;top:50%;transform:translateY(-50%);width:180px;z-index:4;display:none}
.ad-rail--left{left:calc(50% - 580px - 200px)}
.ad-rail--right{right:calc(50% - 580px - 200px)}
.ad-rail .ad-slot{box-shadow:0 2px 10px rgba(0,0,0,.08)}
@media (min-width:1600px){.ad-rail{display:block}}

/* ---------------------------------------------------------------------
   Skyscraper sidebar ad rails — sit in the unused margin space beside
   the centred content column on wide desktop screens. Fixed to the
   viewport edges (calculated relative to the container's own centring,
   so they stay correctly placed at any viewport width) and hidden below
   the point where they'd risk overlapping content.
--------------------------------------------------------------------- */
.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))}
/* Only show once there's genuinely clear space beside the 1160px container
   on both sides — below this, a rail would start crowding the content. */
@media (max-width:1560px){.ad-rail{display:none}}

/* ---------------------------------------------------------------------
   Ambient ⚖️ animation (JS-spawned, one at a time — see site.js
   spawnTimbangan()). Position/animation live here since the JS only sets
   the horizontal starting point.
--------------------------------------------------------------------- */
.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}}