/* ══════════════════════════════════════════════════════════════════════════
   SEER PEOPLE — Stylesheet bersama untuk halaman artikel
   Dipakai oleh: /artikel/index.html dan semua file artikel.
   Tema warna & tipografi mengikuti halaman depan.
   JANGAN diedit saat menambah artikel — cukup edit /artikel/artikel.js
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --orange:#FF6B00; --orange2:#FF8C00; --orange-lt:#FFF3E8;
  --g1:#0A0A0A; --g2:#1D1D1F; --g3:#424245;
  --g4:#6E6E73; --g5:#AEAEB2; --g6:#D1D1D6; --g7:#F2F2F7;
  --white:#FFFFFF; --red:#FF3B30; --green:#34C759; --wa:#25D366;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --line:rgba(10,10,10,0.09);
  --line-d:rgba(255,255,255,0.10);
  --grid:rgba(10,10,10,0.035);
  --grid-d:rgba(255,255,255,0.05);
  --ease:cubic-bezier(.16,1,.3,1);
  --sp:0; --pp:0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;scroll-padding-top:96px;}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--g1);overflow-x:hidden;}
img{max-width:100%;}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px;}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.vis{opacity:1;transform:none;}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;}
  html{scroll-behavior:auto;}
}

/* ══ NAV + LOGO ANIMASI SCROLL ══ */
nav{position:fixed;top:0;left:0;right:0;z-index:300;height:76px;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
  transition:height .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
  display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
nav.scrolled{height:62px;box-shadow:0 10px 40px -18px rgba(10,10,10,0.35);background:rgba(255,255,255,0.88);}
nav::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--orange),var(--orange2));transform:scaleX(var(--pp));transform-origin:0 50%;}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;}
.brand-mark{position:relative;width:44px;height:44px;flex-shrink:0;display:block;
  transform:scale(calc(1 - .16 * var(--sp)));}
.brand-mark img{width:100%;height:100%;display:block;border-radius:13px;box-shadow:0 6px 18px -8px rgba(255,107,0,.85);}
.brand-mark::after{content:'';position:absolute;inset:-14px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,107,0,.45),transparent 68%);opacity:var(--sp);filter:blur(2px);}
.brand-ring{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;
  transform:rotate(calc(-90deg + var(--sp) * 240deg));}
.brand-ring circle{fill:none;stroke-linecap:round;}
.brand-ring .rt{stroke:rgba(255,107,0,.16);stroke-width:1.5;}
.brand-ring .rp{stroke:var(--orange);stroke-width:2;stroke-dasharray:150.8;stroke-dashoffset:calc(150.8 - 150.8 * var(--sp));}
.brand-ring .rd{stroke:rgba(255,107,0,.35);stroke-width:1;stroke-dasharray:2 7;animation:spin 14s linear infinite;transform-origin:50% 50%;}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-txt{font-size:1.02rem;font-weight:800;color:var(--g1);letter-spacing:-0.02em;line-height:1.1;}
.brand-txt span{color:var(--orange);}
.brand-txt small{display:block;font-family:var(--mono);font-size:0.55rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g5);margin-top:2px;
  opacity:calc(1 - var(--sp) * 1.15);transform:translateY(calc(var(--sp) * -3px));}
.nav-links{display:flex;gap:22px;align-items:center;}
.nav-links a{font-size:0.83rem;font-weight:500;color:var(--g3);text-decoration:none;transition:color .2s;position:relative;padding:4px 0;}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease);}
.nav-links a:not(.nav-cta):hover{color:var(--orange);}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1);}
.nav-cta{background:var(--orange)!important;color:var(--white)!important;padding:10px 22px!important;border-radius:100px;
  font-weight:700!important;box-shadow:0 8px 22px -10px rgba(255,107,0,0.95);transition:transform .2s,box-shadow .2s;}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(255,107,0,1);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--g1);}
.nav-toggle svg{display:block;width:26px;height:26px;}
@media(max-width:900px){
  nav{padding:0 18px;height:66px;}nav.scrolled{height:58px;}
  .nav-toggle{display:block;margin-left:auto;}
  .brand-mark{width:38px;height:38px;}
  .nav-links{position:fixed;top:66px;left:0;right:0;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
    flex-direction:column;align-items:stretch;gap:0;padding:0;max-height:0;overflow:hidden;
    transition:max-height .35s var(--ease);box-shadow:0 20px 40px -20px rgba(0,0,0,.35);border-bottom:1px solid var(--line);}
  .nav-links.open{max-height:400px;padding:8px 0 14px;}
  .nav-links a{padding:14px 22px;width:100%;}
  .nav-links a:not(.nav-cta)::after{display:none;}
  .nav-links a.nav-cta{margin:8px 22px 4px;width:calc(100% - 44px);text-align:center;}
}

/* ══ HERO HALAMAN ══ */
.page-hero{padding:150px 24px 60px;text-align:center;position:relative;isolation:isolate;}
.page-hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 55% 60% at 50% -10%,rgba(255,107,0,0.13),transparent 70%),
             linear-gradient(to bottom,transparent,rgba(242,242,247,.6));}
.page-hero::after{content:'';position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 20%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 20%,#000 20%,transparent 78%);}
.page-eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.8);border:1px solid var(--line);
  font-family:var(--mono);font-size:0.67rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);
  padding:8px 18px;border-radius:100px;margin-bottom:24px;}
.page-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,0,.18);}
.page-hero h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:850;letter-spacing:-0.035em;line-height:1.08;
  max-width:820px;margin:0 auto 18px;}
.page-hero h1 .serif{color:var(--orange);font-size:1.05em;}
.page-hero>p{font-size:1rem;color:var(--g4);line-height:1.78;max-width:600px;margin:0 auto;}

/* ══ GRID KARTU ARTIKEL ══ */
.post-grid{max-width:1080px;margin:0 auto;padding:20px 24px 90px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:26px 24px 24px;
  text-decoration:none;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;}
.post-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--orange),transparent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--ease);}
.post-card:hover{transform:translateY(-6px);box-shadow:0 30px 56px -30px rgba(0,0,0,0.5);border-color:rgba(255,107,0,.3);}
.post-card:hover::before{transform:scaleX(1);}
.post-icon{width:42px;height:42px;border-radius:13px;background:var(--orange-lt);border:1px solid rgba(255,107,0,.22);
  display:flex;align-items:center;justify-content:center;color:var(--orange);margin-bottom:16px;}
.post-icon .ic{width:20px;height:20px;}
.post-tag{font-family:var(--mono);font-size:0.63rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);margin-bottom:10px;display:block;}
.post-card h2{font-size:1.02rem;font-weight:800;color:var(--g1);line-height:1.32;letter-spacing:-0.02em;margin-bottom:10px;}
.post-card p{font-size:0.83rem;color:var(--g4);line-height:1.68;margin-bottom:18px;flex:1;}
.post-meta{font-family:var(--mono);font-size:0.68rem;color:var(--g5);padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.post-meta b{font-weight:600;color:var(--g4);}
@media(max-width:960px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr;}}
.post-more{padding:0 24px 80px;text-align:center;font-family:var(--mono);font-size:0.78rem;color:var(--g5);}

/* ══════════════════════════════════════════════════════════════════════════
   ISI SATU ARTIKEL
   Nama class di bawah SAMA PERSIS dengan artikel lama, jadi artikel lama
   maupun baru sama-sama tampil dengan desain ini.
   ══════════════════════════════════════════════════════════════════════════ */
.crumb{max-width:760px;margin:112px auto 0;padding:0 24px;font-family:var(--mono);font-size:0.72rem;color:var(--g5);letter-spacing:.02em;}
.crumb a{color:var(--g4);text-decoration:none;transition:color .2s;}
.crumb a:hover{color:var(--orange);}
article{max-width:760px;margin:0 auto;padding:20px 24px 70px;}
.art-icon{width:60px;height:60px;border-radius:18px;background:var(--orange-lt);border:1px solid rgba(255,107,0,.22);
  display:flex;align-items:center;justify-content:center;margin:26px 0 4px;
  box-shadow:0 16px 34px -20px rgba(255,107,0,.9);}
.art-icon svg{width:28px;height:28px;stroke:var(--orange);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.art-eyebrow{display:inline-block;font-family:var(--mono);font-size:0.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);background:var(--orange-lt);border:1px solid rgba(255,107,0,.2);
  padding:6px 14px;border-radius:100px;margin:20px 0 16px;}
h1.art-title{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:850;letter-spacing:-0.035em;line-height:1.12;margin-bottom:16px;}
h1.art-title .serif{color:var(--orange);}
.art-lead{font-size:1.06rem;color:var(--g4);line-height:1.8;margin-bottom:20px;}
.art-meta{font-family:var(--mono);font-size:0.74rem;color:var(--g5);margin-bottom:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.art-meta strong{color:var(--g2);font-weight:600;}
.share-row{display:flex;gap:9px;align-items:center;margin-bottom:36px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid var(--line);}
.share-label{font-family:var(--mono);font-size:0.7rem;color:var(--g5);font-weight:500;margin-right:2px;}
.share-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--g7);border:1px solid transparent;color:var(--g3);text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;}
.share-btn:hover{background:var(--orange);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(255,107,0,1);}
.share-btn svg{width:17px;height:17px;fill:currentColor;}
.share-btn.copied{background:var(--green);color:#fff;}
article p{font-size:1.02rem;color:var(--g3);line-height:1.86;margin-bottom:20px;}
article h2{font-size:1.52rem;font-weight:800;letter-spacing:-0.028em;color:var(--g1);line-height:1.25;margin:46px 0 15px;position:relative;padding-left:18px;}
article h2::before{content:'';position:absolute;left:0;top:.28em;bottom:.28em;width:3px;border-radius:2px;
  background:linear-gradient(var(--orange),var(--orange2));}
article h2 .serif{color:var(--orange);}
article h3{font-size:1.14rem;font-weight:800;letter-spacing:-0.02em;color:var(--g1);margin:30px 0 11px;}
article ul,article ol{margin:0 0 22px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
article ul li{display:flex;gap:12px;font-size:1rem;color:var(--g3);line-height:1.75;margin:0;}
article ul li::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--orange);flex-shrink:0;margin-top:9px;}
article ol{counter-reset:n;}
article ol li{display:flex;gap:14px;font-size:1rem;color:var(--g3);line-height:1.75;counter-increment:n;margin:0;}
article ol li::before{content:counter(n);font-family:var(--mono);font-size:0.74rem;font-weight:700;color:var(--orange);
  background:var(--orange-lt);border:1px solid rgba(255,107,0,.25);border-radius:8px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
article strong{color:var(--g1);font-weight:700;}
article a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(255,107,0,.35);}
article a:hover{border-color:var(--orange);}
article hr{border:none;height:1px;background:var(--line);margin:44px 0;}
article img{border-radius:20px;display:block;margin:32px 0;box-shadow:0 26px 54px -30px rgba(0,0,0,.6);}
.pullquote{font-family:var(--serif);font-style:italic;font-size:1.55rem;color:var(--g1);line-height:1.5;
  padding:30px 0 30px 26px;margin:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;}
.pullquote::before{content:'';position:absolute;left:0;top:30px;bottom:30px;width:3px;border-radius:2px;
  background:linear-gradient(var(--orange),transparent);}
.pullquote span{color:var(--orange);}
.callout{margin:32px 0;background:linear-gradient(120deg,rgba(255,107,0,.09),rgba(255,107,0,.03));
  border:1px solid rgba(255,107,0,.25);border-radius:20px;padding:24px 28px;display:flex;gap:16px;align-items:flex-start;}
.callout .ic{width:24px;height:24px;color:var(--orange);margin-top:3px;}
.callout p{font-size:0.97rem;color:var(--g3);line-height:1.74;margin:0;}
.callout strong{color:var(--g1);}
/* FAQ artikel (bagus untuk SEO) */
.faq-item{border-top:1px solid var(--line);padding:20px 0;}
.faq-item:last-of-type{border-bottom:1px solid var(--line);}
.faq-q{font-weight:700;font-size:0.99rem;color:var(--g1);margin-bottom:8px;line-height:1.45;}
.faq-a{font-size:0.93rem;color:var(--g4);line-height:1.78;}
/* CTA di dalam artikel */
.cta-box{background:var(--g1);border-radius:26px;padding:44px 34px;margin:48px 0;text-align:center;position:relative;overflow:hidden;}
.cta-box::before{content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:520px;height:400px;
  background:radial-gradient(ellipse,rgba(255,107,0,.22),transparent 65%);}
.cta-box::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%);}
.cta-box>*{position:relative;}
.cta-box h3{color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-0.03em;line-height:1.22;margin-bottom:11px;}
.cta-box h3 .serif{color:var(--orange);}
.cta-box p{color:rgba(255,255,255,0.52);font-size:0.92rem;line-height:1.7;max-width:460px;margin:0 auto 24px;}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.cta-btn{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff;font-weight:700;font-size:0.93rem;
  padding:15px 30px;border-radius:100px;text-decoration:none;box-shadow:0 18px 38px -18px rgba(255,107,0,1);
  transition:transform .2s,box-shadow .2s;}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 26px 48px -18px rgba(255,107,0,1);}
.cta-btn-wa{display:inline-flex;align-items:center;gap:9px;background:var(--wa);color:#fff;font-weight:700;font-size:0.93rem;
  padding:15px 30px;border-radius:100px;text-decoration:none;box-shadow:0 18px 38px -18px rgba(37,211,102,.95);transition:transform .2s;}
.cta-btn-wa:hover{transform:translateY(-3px);}
.share-row-bottom{display:flex;gap:9px;align-items:center;margin:40px 0;padding:20px 0;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.author-box{display:flex;gap:16px;align-items:flex-start;background:var(--g7);border:1px solid var(--line);
  border-radius:22px;padding:24px;margin-top:44px;}
.author-box .initials{width:52px;height:52px;border-radius:16px;background:var(--g1);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:1rem;flex-shrink:0;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.8);}
.author-box strong{display:block;font-size:0.95rem;color:var(--g1);margin-bottom:3px;}
.author-box span{font-size:0.8rem;color:var(--g4);line-height:1.62;}

/* ══ ARTIKEL LAINNYA ══ */
.more-articles{max-width:1080px;margin:0 auto;padding:20px 24px 80px;}
.more-articles h2{font-family:var(--mono);font-size:0.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);margin-bottom:20px;}
.more-articles .post-grid{padding:0;}

/* ══ FOOTER ══ */
footer{padding:52px 24px 44px;background:#050505;text-align:center;position:relative;overflow:hidden;}
footer::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent);}
.footer-mark{width:46px;height:46px;border-radius:14px;margin:0 auto 20px;display:block;position:relative;
  box-shadow:0 14px 30px -14px rgba(255,107,0,.9);}
footer p{font-size:0.77rem;color:rgba(255,255,255,0.28);line-height:1.9;position:relative;}
footer strong{color:rgba(255,255,255,0.55);}
footer a{color:rgba(255,255,255,0.45);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.15);}
footer a:hover{color:var(--orange);border-color:var(--orange);}

/* ══ Penyetelan keterbacaan (selaras dengan halaman depan) ══ */
:root{--orange-txt:#B54B00;--orange-lg:#E85D00;}
.page-eyebrow,.art-eyebrow,.post-tag,.more-articles h2,
.article-back,.crumb a:hover{color:var(--orange-txt);}
.page-hero h1 .serif,h1.art-title .serif,article h2 .serif{color:var(--orange-lg);}
.pullquote span{color:var(--orange-lg);}
.post-meta,.art-meta{color:var(--g4);}
.brand-txt small{color:var(--g4);}
article ol li::before{color:var(--orange-txt);}
/* kursor terminal pada label */
.page-eyebrow::after{content:'';display:inline-block;width:7px;height:11px;background:currentColor;
  border-radius:1px;animation:blink 1.15s steps(2,start) infinite;}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.page-eyebrow::after{animation:none;opacity:.4;}}

/* ══ Teks gelap di atas permukaan oranye (selaras halaman depan) ══ */
.nav-cta,.cta-btn,.btn-orange{color:#0A0A0A !important;}
.cta-btn-wa,.btn-wa-line{color:#0A0A0A !important;}