/* ========================================================================== */
/* 1) THEME TOKENS / ROOT VARS                                                */
/* ========================================================================== */
:root{
  --bg:#ffffff;
  --surface:#f6f8fb;
  --text:#0e1a2b;
  --muted:#5b6b82;
  --primary:#004DCC;
  --accent:#70B0C7;
  --accent-2:#A5C1E6;
  --shadow:0 10px 30px rgba(15,35,80,.1);
  --radius:14px;
  --transition:.28s cubic-bezier(.2,.8,.2,1);
  --header-h:64px;
  --header-h-mobile:56px;
  --portrait-ring: #3c6ab86b;
}

/* Dark theme tokens */
body.dark{
  --bg:#0b1220; --surface:#111a2c; --text:#e6edf7; --muted:#95a4c2;
  --primary:#A5C1E6; --accent:#70B0C7; --accent-2:#2b3b63;
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --portrait-ring: #a7c4ff77;
}

/* ========================================================================== */
/* 2) GLOBAL RESETS & LAYOUT PRIMITIVES                                       */
/* ========================================================================== */
*{ box-sizing:border-box }
html,body{ height:100%; max-width:100%; overflow-x:hidden }
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }

.container{ width:min(1120px,92%); margin-inline:auto }
.section{
  padding:72px 0;
  border-top:1px solid color-mix(in oklab,var(--text) 10%,transparent)
}
.section h2{ font-size:clamp(22px,3.6vw,28px); margin-bottom:16px }
.lead{ color:var(--muted); max-width:72ch }
.muted{ color:var(--muted) }
.section-sub{ margin-top:-6px; margin-bottom:8px }

/* Scroll anchor offset */
.section, section[id]{ scroll-margin-top:calc(var(--header-h) + 12px) }
@media (max-width:860px){
  .section, section[id]{ scroll-margin-top:calc(var(--header-h-mobile) + 12px) }
}

/* ========================================================================== */
/* 3) HEADER / NAV                                                            */
/* ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  display:flex; align-items:center;
  backdrop-filter:saturate(1.2) blur(10px);
  background:color-mix(in oklab,var(--bg) 85%,transparent);
  border-bottom:1px solid color-mix(in oklab,var(--text) 10%,transparent);
}
.site-header .container{
  width:min(1120px,92%); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:0 16px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800 }
.brand-logo{ width:32px; height:32px; display:block; border-radius:50%; box-shadow:var(--shadow) }

.nav-links{ display:flex; align-items:center; gap:20px }
.nav-links a{ padding:6px 8px; color:var(--muted); font-weight:600 }
.nav-links a:hover{ color:var(--primary) }

#themeToggle,.toggle{
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px; cursor:pointer;
  border:1px solid color-mix(in oklab,var(--text) 14%,transparent);
  background:var(--surface); color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  font-size:18px; line-height:1;
}
#themeToggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.burger{ display:none; background:transparent; border:0; cursor:pointer }
.burger span{
  display:block; width:24px; height:2px; background:var(--text);
  margin:5px 0; transition:var(--transition); border-radius:3px
}
.burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger.active span:nth-child(2){ opacity:0 }
.burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:860px){
  .site-header{ height:var(--header-h-mobile) }
  .site-header .container{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .burger{ display:block }
  .nav-links{
    position:fixed; inset:var(--header-h-mobile) 0 auto 0; background:var(--bg);
    border-bottom:1px solid color-mix(in oklab,var(--text) 10%,transparent);
    transform:translateY(-120%); transition:var(--transition);
    padding:18px; gap:14px; flex-direction:column; align-items:flex-start;
  }
  .nav-links.open{ transform:translateY(0) }
}

/* ========================================================================== */
/* 4) HERO                                                                    */
/* ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center; isolation:isolate; overflow:hidden
}

/* (Legacy) dekorasi hero */
.hero-bg{
  position:absolute; inset:-20% -10% auto -10%; height:70%;
  background:
    radial-gradient(1200px 600px at 20% 10%, color-mix(in oklab,var(--accent) 35%,transparent), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, color-mix(in oklab,var(--primary) 25%,transparent), transparent 60%);
  filter:saturate(1.15) blur(30px); z-index:-1; opacity:.7;
}
body.dark .hero-bg{ opacity:.35 }

.hero-inner{ display:grid; gap:36px; grid-template-columns:1.4fr .9fr; align-items:center }
@media (max-width:860px){ .hero-inner{ grid-template-columns:1fr; gap:24px } }

.eyebrow{ color:var(--primary); font-weight:800; letter-spacing:1.2px; text-transform:uppercase; font-size:12px }

/* H1 + underline */
.hero h1{
  display:inline-block;
  position:relative;
  font-size:clamp(38px,8vw,64px);
  margin:6px 0 8px;
  line-height:1.05;
}
.h1-text{ display:block }

/* Underline wrapper */
.sig-underline{
  position:absolute; left:0; right:0; bottom:-6px;
  display:block; height:10px; pointer-events:none;
}
.sig-underline svg{ width:100%; height:100%; display:block }

/* Base line (statis) + Runner (loop) */
.sig-underline .ul-base{
  stroke: currentColor;
  stroke-width: 3.25;
  stroke-linecap: round;
  opacity:.9;
}
.sig-underline .ul-runner{
  stroke: var(--primary);
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-dasharray: 160 640;
  stroke-dashoffset: 640;
  animation: underline-run 2.2s linear infinite;
  opacity:.9;
}
@keyframes underline-run{ to{ stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce){
  .sig-underline .ul-runner{ animation:none }
}

.typing{ min-height:34px; color:var(--muted); font-size:clamp(16px,2.6vw,18px); margin-top:8px }
.caret{ display:inline-block; width:2px; height:1.1em; background:var(--primary); margin-left:6px; animation:blink 1s step-end infinite }
@keyframes blink{ 50%{ opacity:0 } }

.cta{ display:flex; gap:12px; margin-top:18px }
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow:var(--shadow)
}
.btn.primary{ background:var(--primary); color:#fff }
.btn.primary:hover{ transform:translateY(-2px) }
.btn.ghost{ border:1px solid color-mix(in oklab,var(--text) 15%,transparent); background:var(--surface); color:var(--text) }
.btn.ghost:hover{ transform:translateY(-2px); color:var(--primary) }
.btn.small{ padding:9px 14px; border-radius:10px }

/* Hero card (gunakan .glass-card di HTML agar efek kaca aktif) */
.hero-card{
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.stat{ padding:12px; border-radius:12px }
.stat + .stat{
  margin-top:10px;
  border-top:1px dashed color-mix(in oklab,var(--text) 16%,transparent);
  padding-top:16px; opacity:.95;
}
.kicker{ display:block; color:var(--muted); font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:1px }

/* Orbit chips */
.hero-text{ position:relative }
.hero-orbit{
  position:absolute; inset:-32px; z-index:-1; pointer-events:none;
}
.chip{
  position:absolute; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:28px; padding:0 10px; border-radius:999px;
  font-weight:800; font-size:12px; letter-spacing:.2px;
  color: color-mix(in oklab, var(--text) 55%, transparent);
  background: rgba(255,255,255,.65);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  box-shadow:0 6px 18px rgba(15,35,80,.08);
  backdrop-filter: blur(6px);
  opacity:.28;
  --r:20px; --dur:28s;
  animation: chip-drift var(--dur) linear infinite;
}
@keyframes chip-drift{
  from{ transform: translate(-50%,-50%) rotate(0deg)   translateX(var(--r)) rotate(0deg) }
  to  { transform: translate(-50%,-50%) rotate(360deg) translateX(var(--r)) rotate(-360deg) }
}
body.dark .chip{
  background: rgba(17,26,44,.55);
  color: color-mix(in oklab, #ffffff 85%, transparent);
  opacity:.40; border-color: rgba(255,255,255,.08);
}
@media (prefers-reduced-motion: reduce){ .chip{ animation:none } }

/* Tilt hook (keep text crisp) */
.hero-card-tilt{
  transition: transform .18s ease-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ========================================================================== */
/* 5) SKILLS                                                                  */
/* ========================================================================== */
.skills-grid{
  list-style:none; padding:0; margin:8px 0 0;
  display:grid; gap:20px; grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:520px){ .skills-grid{ grid-template-columns:1fr } }
@media (min-width:900px){ .skills-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.skill{
  display:flex; gap:16px; align-items:center;
  background:var(--surface);
  border:1px solid color-mix(in oklab,var(--text) 12%,transparent);
  border-radius:var(--radius);
  padding:16px 20px;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.skill:hover{ transform:translateY(-3px) }
.skill h3{ margin:0 0 6px; font-size:17px }
.skill p{ margin:0; font-size:14px; color:var(--muted) }
.skill .skill-icon{ width:40px; height:40px; object-fit:contain; flex-shrink:0 }
.skill-emoji{ font-size:28px; line-height:1; display:block }

/* ========================================================================== */
/* 6) PROJECTS / GENERIC CARDS                                                */
/* ========================================================================== */
.card-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:18px;
}
.card{
  background:var(--surface);
  border:1px solid color-mix(in oklab,var(--text) 10%, transparent);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.thumb{ width:100%; aspect-ratio:16/9; object-fit:contain; display:block; background:none; padding:12px }
.card-body{ padding:16px }
.card h3{ margin:0 0 6px }
.card p{ color:var(--muted); margin:0 0 12px }
.actions{ display:flex; gap:10px; flex-wrap:wrap }

/* Gradient header khusus Nextcloud card */
.thumb-center{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 30%, #cfe1ff),
    color-mix(in oklab, var(--accent) 35%, #e6f3ff));
}
.thumb-logo{ width:clamp(180px, 42%, 360px); height:auto; object-fit:contain; display:block; opacity:.95 }
@media (max-width:700px){ .thumb-logo{ width:clamp(140px, 55%, 280px) } }

/* Perbesar header image untuk TemankuWebApp */
.thumb--big{ padding:0 }
@media (max-width:700px){ .thumb--big{ padding:4px } }
.thumb[src$="financeapp.svg"]{ padding:0 }

/* ========================================================================== */
/* 6.1) SOCIALS (Contact chips)                                               */
/* ========================================================================== */
.socials{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }
.social{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; background:var(--surface);
  border:1px solid color-mix(in oklab,var(--text) 12%,transparent);
  font-weight:600; box-shadow:var(--shadow);
}
.social:hover{ color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow) }
.social img{ width:20px; height:20px; object-fit:contain }

/* Dark-mode fix for black icons */
body.dark img.skill-icon[src*="github"],
body.dark .social img[src*="github"],
body.dark img.skill-icon[src*="linux"],
body.dark img.skill-icon[src*="nextcloud"]{
  filter: invert(1) brightness(1.2);
}

/* ========================================================================== */
/* 7) EXPERIENCE (TIMELINE)                                                   */
/* ========================================================================== */
#experience{ padding-bottom:80px }

#experience .timeline{ position:relative; margin-top:18px; padding-left:56px }
#experience .tl-axis{
  position:absolute; left:28px; width:2px; height:0;
  background:color-mix(in oklab,var(--primary) 85%,transparent);
  opacity:.65; pointer-events:none; z-index:0;
}
#experience .tl-item{ position:relative; margin:20px 0 28px }
#experience .tl-marker{
  position:absolute; left:calc(28px - 9px); top:6px;
  width:18px; height:18px; border-radius:50%;
  background:var(--bg);
  border:3px solid var(--primary);
  box-shadow:var(--shadow);
  z-index:2;
}
#experience .tl-card{
  position:relative; background:var(--surface);
  border:1px solid color-mix(in oklab,var(--text) 12%,transparent);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; margin:0;
}
#experience .tl-head{
  display:flex; align-items:baseline; gap:12px; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:4px
}
#experience .tl-role{ margin:0; font-size:clamp(16px,2.6vw,18px); color:var(--primary) }
#experience .tl-date{ font-size:13px; color:var(--muted); font-weight:600 }
#experience .tl-place{ margin:4px 0 10px; color:var(--muted) }
#experience .tl-points{ margin:0; padding-left:18px; color:var(--text) }
#experience .tl-points li{ margin:6px 0 }

/* Desktop center line + zig-zag */
@media (min-width:920px){
  #experience .timeline{ padding-left:0 }
  #experience .tl-axis{ left:50%; transform:translateX(-1px) }
  #experience .tl-item{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
  #experience .tl-marker{ left:calc(50% - 9px) }
  #experience .tl-card{ grid-column:2 }
  #experience .tl-item:nth-child(even) .tl-card{ grid-column:1 }
}

/* Future node look */
#experience .tl-item.tl-future .tl-card{
  background:color-mix(in oklab,var(--surface) 88%,var(--primary) 12%);
  border-style:dashed; opacity:.9
}
#experience .tl-item.tl-future .tl-role{
  color:color-mix(in oklab,var(--primary) 70%,var(--text) 30%)
}
#experience .tl-item.tl-future .tl-place,
#experience .tl-item.tl-future .tl-date{
  color:color-mix(in oklab,var(--muted) 85%,var(--text) 15%)
}
#experience .tl-item.tl-future .tl-marker{ border-style:dashed; opacity:.85 }

/* Mobile: hide timeline rail & dots */
@media (max-width:919px){
  #experience .tl-axis, #experience .tl-marker{ display:none !important }
  #experience .timeline{ padding-left:0 }
}

/* ========================================================================== */
/* 8) FOOTER                                                                  */
/* ========================================================================== */
.site-footer{
  padding:28px 0;
  border-top:1px solid color-mix(in oklab,var(--text) 10%,transparent);
  text-align:center; color:var(--muted)
}

/* ========================================================================== */
/* 9) REVEAL ANIMATIONS & A11Y                                                */
/* ========================================================================== */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease }
.reveal.is-visible{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none }
  .btn{ transition:none }
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden
}
.skip-link:focus{
  position:static; width:auto; height:auto; padding:.5rem 1rem;
  background:#ffd54f; color:#000; border-radius:.4rem; z-index:1000
}

/* ========================================================================== */
/* 10) BACKGROUNDS: GRADIENT + FLOW + PARTICLES                               */
/* ========================================================================== */
:root{
  --grad-1: 14 165 233;   /* #0ea5e9 */
  --grad-2: 37 99 235;    /* #2563eb */
  --grad-3: 34 211 238;   /* #22d3ee */
  --grad-alpha: 0.28;
  --grad-dark-boost: rgba(0, 0, 0, 0.18);
}

/* Gradient layer (bottom) */
.bg-gradient{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  overflow:hidden; clip-path:inset(0); contain:paint;
  will-change:transform, background-position;
  background:
    radial-gradient(42% 62% at 18% 18%, rgba(var(--grad-1) / var(--grad-alpha)) 0%, transparent 60%),
    radial-gradient(36% 56% at 82% 12%, rgba(var(--grad-2) / var(--grad-alpha)) 0%, transparent 60%),
    radial-gradient(52% 72% at 62% 82%, rgba(var(--grad-3) / var(--grad-alpha)) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.40));
  filter:blur(30px) saturate(90%) brightness(1.03);
  opacity:.75;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 65%, transparent 100%);
          mask-image: radial-gradient(120% 120% at 50% 40%, #000 65%, transparent 100%);
  transform:translateZ(0);
  animation:bg-drift 80s ease-in-out infinite alternate;
}

body.dark .bg-gradient{
  background:
    radial-gradient(42% 62% at 18% 18%, rgba(var(--grad-1) / calc(var(--grad-alpha) * 0.8)) 0%, transparent 60%),
    radial-gradient(36% 56% at 82% 12%, rgba(var(--grad-2) / calc(var(--grad-alpha) * 0.8)) 0%, transparent 60%),
    radial-gradient(52% 72% at 62% 82%, rgba(var(--grad-3) / calc(var(--grad-alpha) * 0.8)) 0%, transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  filter:blur(28px) saturate(100%) brightness(0.92);
  opacity:.85;
}

@media (max-width:767px){
  .bg-gradient{
    filter:blur(28px) saturate(88%) brightness(1.02);
    opacity:.7; animation-duration:110s;
    background:
      radial-gradient(circle 36% at 20% 16%, rgba(var(--grad-1) / var(--grad-alpha)) 0%, transparent 60%),
      radial-gradient(circle 30% at 82% 12%, rgba(var(--grad-2) / var(--grad-alpha)) 0%, transparent 62%),
      radial-gradient(circle 42% at 60% 86%, rgba(var(--grad-3) / var(--grad-alpha)) 0%, transparent 65%),
      linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.40));
    -webkit-mask-image: radial-gradient(circle 120% at 50% 42%, #000 72%, transparent 100%);
            mask-image: radial-gradient(circle 120% at 50% 42%, #000 72%, transparent 100%);
  }
}
@keyframes bg-drift{
  0%{   background-position:0% 0%, 100% 0%, 50% 100%, 0% 0%; transform:scale(1) }
  50%{  background-position:10% 5%, 95% 10%, 55% 95%, 0% 0%; transform:scale(1.02) }
  100%{ background-position:15% 10%, 90% 15%, 60% 90%, 0% 0%; transform:scale(1.04) }
}

/* Flow & particles */
.bg-flow{ position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.38; clip-path:inset(0) }
@media (max-width:767px){ .bg-flow{ opacity:.30 } }
body.dark .bg-flow{ opacity:.26 }

.bg-particles{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55; clip-path:inset(0) }
@media (max-width:767px){ .bg-particles{ opacity:.45 } }
body.dark .bg-particles{ opacity:.38 }

/* ========================================================================== */
/* 12) GLASSMORPHISM CARD                                                     */
/* ========================================================================== */
:root{
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-stroke: rgba(15, 23, 42, 0.10);
  --glass-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  --glass-radius: 16px;
  --glass-blur: 14px;
}
.glass-card{
  position: relative;
  border-radius: var(--glass-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.45));
  backdrop-filter: blur(var(--glass-blur)) saturate(110%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(110%);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-stroke);
}
.glass-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), transparent 24%);
  mix-blend-mode: screen; opacity: 0.7;
}
.glass-card hr,.glass-card .separator,.glass-card .dashed{
  border:0; height:1px;
  background-image: linear-gradient(90deg, rgba(15,23,42,0.16) 25%, rgba(15,23,42,0.00) 0%);
  background-size:8px 1px; background-repeat:repeat-x; opacity:0.8;
}
.glass-card h4,.glass-card h5,.glass-card strong{ color:#0f172a }
.glass-card p,.glass-card li,.glass-card small,.glass-card span{ color:rgba(15,23,42,0.82) }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass-card{ background:rgba(255,255,255,0.92) }
}
body.dark .glass-card{
  background: linear-gradient(180deg, rgba(15,23,42,0.65), rgba(15,23,42,0.45));
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
body.dark .glass-card h4,
body.dark .glass-card h5,
body.dark .glass-card strong{ color:rgba(255,255,255,0.96) }
body.dark .glass-card p,
body.dark .glass-card li,
body.dark .glass-card small,
body.dark .glass-card span{ color:rgba(255,255,255,0.86) }

@media (max-width:767px){
  .glass-card{
    --glass-radius:14px;
    --glass-blur:12px;
    padding:18px 16px; /* bila hero-card sudah punya padding, boleh diabaikan */
  }
}

/* ===== Mobile: matikan semua animasi untuk hemat baterai/CPU ===== */
@media (max-width: 767px){
  /* underline runner & caret */
  .sig-underline .ul-runner{ animation: none !important; }
  .caret{ animation: none !important; }

  /* orbit chips: nonaktif (boleh hide agar benar2 ringan) */
  .hero-orbit{ display:none !important; }
  .chip{ animation: none !important; }

  /* reveal / transition */
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

  /* tombol & tilt */
  .btn{ transition:none !important; }
  .hero-card-tilt{ transition: none !important; transform: none !important; }
}

/* Mobile: underline jadi 1 warna hitam (tanpa runner biru) */
@media (max-width: 767px){
  /* sembunyikan garis runner (biru) */
  .sig-underline .ul-runner{ display:none !important; }

  /* paksa base line jadi hitam di semua tema */
  .sig-underline .ul-base{ stroke:#000 !important; opacity:.95; }

  /* kalau dark mode aktif, tetap hitam */
  body.dark .sig-underline .ul-base{ stroke:#cfe1ff !important; }
}

/* ===== About layout ===== */
.about-grid{
  display:grid;
  grid-template-columns: 1fr 240px;
  grid-template-areas:
    "title  title"      /* judul span 2 kolom */
    "copy   portrait";  /* teks kiri, foto kanan */
  column-gap:20px;
  row-gap:14px;
  align-items:center;
}

/* Promote children of .about-copy to grid items */
.about-copy{ display: contents; }

/* Map elemen ke area grid */
.about-copy > h2{ grid-area:title; margin:0; }
.about-copy > .lead{ grid-area:copy; }

.about-portrait{
  grid-area:portrait;
  margin:0;
  justify-self:end;
}

/* Foto profil */
.about-portrait img{
  width: clamp(150px, 20vw, 220px);
  max-width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  border:5px solid var(--portrait-ring);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}

/* ===== Mobile: About → Foto → Paragraf ===== */
@media (max-width:900px){
  .about-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "portrait"
      "copy";
    row-gap:12px;
  }
  .about-portrait{ justify-self:center; }
  .about-portrait img{ width:160px; }
}