:root{
  --bg:#0a0a08;
  --bg-2:#0f0e0b;
  --surface:#151310;
  --surface-2:#1c1912;
  --gold:#c9a961;
  --gold-bright:#e6c987;
  --emerald:#3f6b54;
  --emerald-dim:#2a4a3a;
  --ivory:#ede7d8;
  --muted:#8a8375;
  --line: rgba(201,169,97,0.16);
  --line-strong: rgba(201,169,97,0.35);
  --font-display:'Fraunces', serif;
  --font-sans:'Space Grotesk', sans-serif;
  --font-ar:'Amiri', serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--font-sans);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold); color:#12100c;}

.bg-texture{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(201,169,97,0.11) 0%, transparent 42%),
    radial-gradient(circle at 85% 75%, rgba(63,107,84,0.14) 0%, transparent 48%),
    radial-gradient(ellipse at 55% 45%, rgba(93,72,36,0.08) 0%, transparent 38%);
  background-size:145% 145%, 135% 135%, 125% 125%;
  overflow:hidden;
  animation:spaceDrift 9s ease-in-out infinite alternate;
}
.bg-texture::before{
  content:''; position:absolute; inset:-25%; opacity:.85;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(237,231,216,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 72%, rgba(201,169,97,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 57% 16%, rgba(237,231,216,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 44%, rgba(201,169,97,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 91% 82%, rgba(237,231,216,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 91%, rgba(237,231,216,.65) 0 1px, transparent 1.5px);
  background-size:240px 210px, 310px 280px, 370px 330px, 290px 260px, 420px 380px, 340px 300px;
  animation:starField 16s linear infinite alternate;
}
.bg-texture::after{
  content:''; position:absolute; top:12%; left:-18%; width:170px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,201,135,.75), transparent);
  box-shadow:0 0 14px rgba(230,201,135,.5);
  transform:rotate(-28deg); opacity:0;
  animation:meteor 8s ease-in-out 2s infinite;
}
.opening-screen{
  position:fixed; inset:0; z-index:500; display:grid; place-items:center;
  background:radial-gradient(circle at center, #19170f 0%, var(--bg) 48%, #050504 100%);
  color:var(--gold-bright); overflow:hidden;
  animation:openingExit 1s cubic-bezier(.76,0,.24,1) 4s forwards;
}
.opening-screen::before, .opening-screen::after{
  content:''; position:absolute; width:34vw; height:34vw; border:1px solid var(--line);
  border-radius:50%; animation:openingOrbit 2.4s ease-in-out infinite alternate;
}
.opening-screen::after{ width:52vw; height:52vw; animation-delay:-.8s; opacity:.45; }
.scan-loader{ position:relative; z-index:1; width:220px; height:220px; border:1px solid rgba(201,169,97,.18); border-radius:50%; animation:scanAppear 1.2s ease both; }
.scan-loader::before, .scan-loader::after{ content:''; position:absolute; background:var(--line-strong); }
.scan-loader::before{ width:1px; height:100%; left:50%; top:0; }
.scan-loader::after{ height:1px; width:100%; top:50%; left:0; }
.scan-ring{ position:absolute; border:1px solid var(--line-strong); border-radius:50%; inset:50%; transform:translate(-50%,-50%); }
.ring-outer{ width:100%; height:100%; opacity:.35; animation:scanRing 3.8s ease-in-out infinite; }
.ring-middle{ width:72%; height:72%; opacity:.55; animation:scanRing 3.8s .3s ease-in-out infinite; }
.ring-inner{ width:42%; height:42%; opacity:.8; animation:scanRing 3.8s .6s ease-in-out infinite; }
.scan-crosshair{ position:absolute; inset:calc(50% - 12px); border:1px solid var(--gold); opacity:.9; animation:scanFocus 2s ease-in-out infinite; }
.scan-sweep{ position:absolute; left:50%; top:50%; width:50%; height:1px; transform-origin:left center; background:linear-gradient(90deg, var(--gold-bright), transparent); box-shadow:0 0 12px var(--gold); animation:scanSweep 2.4s linear infinite; }
.scan-point{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 10px var(--gold); animation:scanPoint 2.4s ease-in-out infinite; }
.point-one{ top:24%; left:69%; }
.point-two{ top:69%; left:27%; animation-delay:1.1s; }
.opening-screen p{ position:absolute; bottom:14vh; color:var(--muted); font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; animation:openingText 1.4s .4s ease both; }
.opening-screen p span{ color:var(--gold-bright); }
@keyframes openingExit{ to{ opacity:0; visibility:hidden; pointer-events:none; transform:scale(1.06); } }
@keyframes openingOrbit{ from{ transform:scale(.8) rotate(0deg); } to{ transform:scale(1.12) rotate(180deg); } }
@keyframes openingPulse{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes openingSpin{ to{ transform:rotate(360deg); } }
@keyframes openingText{ from{ opacity:0; letter-spacing:.5em; } to{ opacity:1; letter-spacing:.2em; } }
@keyframes scanAppear{ from{ opacity:0; transform:scale(.65); } to{ opacity:1; transform:scale(1); } }
@keyframes scanRing{ 0%,100%{ transform:translate(-50%,-50%) scale(.92); opacity:.3; } 50%{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
@keyframes scanFocus{ 0%,100%{ transform:scale(.7); opacity:.35; } 50%{ transform:scale(1); opacity:1; } }
@keyframes scanSweep{ to{ transform:rotate(360deg); } }
@keyframes scanPoint{ 0%,100%{ transform:scale(.6); opacity:.2; } 50%{ transform:scale(1.8); opacity:1; } }
@keyframes spaceDrift{ from{ background-position:0 0, 0 0, 0 0; } to{ background-position:18% -12%, -12% 18%, 10% 8%; } }
@keyframes starField{ from{ transform:translate3d(-4%,2%,0) rotate(-2deg) scale(1); } to{ transform:translate3d(8%,-5%,0) rotate(3deg) scale(1.08); } }
@keyframes meteor{ 0%,55%,100%{ left:-18%; top:12%; opacity:0; } 61%{ opacity:1; } 74%{ left:115%; top:48%; opacity:0; } }

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw;
  background:rgba(10,10,8,0.7);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, background .4s ease;
  animation:headerArrive 1s cubic-bezier(.2,.8,.2,1) 4.25s both;
}
header.scrolled{ border-bottom-color:var(--line); background:rgba(10,10,8,0.92); }
.logo{
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:500; letter-spacing:0.02em;
  color:var(--ivory); text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.logo svg{width:22px; height:22px;}
nav.links{
  position:fixed; top:76px; left:50%; z-index:110; transform:translateX(-50%); display:flex; gap:4px; align-items:stretch;
  padding:6px; border:1px solid rgba(237,231,216,.13); border-radius:18px;
  background:rgba(18,17,13,.42); box-shadow:0 10px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%);
}
nav.links::before{
  content:''; position:absolute; inset:6px auto 6px 6px; width:var(--liquid-width, 78px);
  transform:translateX(var(--liquid-x, 0px)); border-radius:12px; pointer-events:none;
  background:linear-gradient(135deg, rgba(230,201,135,.24), rgba(63,107,84,.2));
  border:1px solid rgba(230,201,135,.35); box-shadow:0 0 22px rgba(201,169,97,.1), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .55s cubic-bezier(.2,.8,.2,1), width .55s cubic-bezier(.2,.8,.2,1);
}
nav.links a{
  min-width:78px; padding:8px 11px 7px; color:var(--muted); text-decoration:none; font-size:0.65rem; border-radius:12px;
  letter-spacing:0.1em; text-transform:uppercase; font-weight:500; text-align:center;
  position:relative; z-index:1; border:1px solid transparent; background:transparent; transition:color .3s ease, border-color .3s ease, background .3s ease;
}
nav.links a::after{
  content:'\2193'; position:absolute; left:50%; bottom:-18px; transform:translateX(-50%);
  color:var(--gold-bright); font-size:.85rem; line-height:1; opacity:0;
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
nav.links a.active::after{ opacity:1; transform:translateX(-50%) translateY(3px); }
nav.links a:hover, nav.links a:focus-visible, nav.links a.active{ color:var(--gold-bright); border-color:transparent; background:rgba(255,255,255,.035); outline:none; }
.nav-icon{ display:grid; place-items:center; height:24px; margin-bottom:4px; }
.nav-icon svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s ease; }
nav.links a:hover .nav-icon svg, nav.links a:focus-visible .nav-icon svg{ transform:translateY(-2px) scale(1.08); }
.menu-toggle{ display:none; place-items:center; width:38px; height:38px; padding:0; color:var(--gold-bright); background:transparent; border:1px solid var(--line-strong); border-radius:50%; cursor:pointer; z-index:200; transition:color .35s ease, border-color .35s ease, transform .35s ease; }
.menu-toggle svg{ width:28px; height:28px; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.menu-toggle:hover, .menu-toggle[aria-expanded="true"]{ color:var(--ivory); border-color:var(--gold); }
.menu-toggle:hover svg, .menu-toggle[aria-expanded="true"] svg{ transform:rotate(90deg); }

/* ---------- HERO ---------- */
.hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; padding:130px 6vw 90px; text-align:left;
  scroll-snap-align:start;
}
.profile-hero{ width:min(1100px,100%); display:grid; grid-template-columns:minmax(280px, .82fr) minmax(420px, 1.18fr); gap:clamp(50px,8vw,125px); align-items:center; position:relative; z-index:2; }
.profile-photo-wrap{ width:100%; max-width:360px; justify-self:center; animation:photoArrive 1.3s cubic-bezier(.2,.8,.2,1) 4.35s both; }
.profile-photo-frame{ position:relative; aspect-ratio:4/5; padding:10px; background:var(--surface); border:1px solid var(--line-strong); box-shadow:18px 18px 0 rgba(63,107,84,.28); cursor:pointer; }
.profile-photo-frame:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:5px; }
.profile-photo-frame::before{ content:''; position:absolute; inset:20px; border:1px solid rgba(201,169,97,.4); z-index:1; pointer-events:none; }
.profile-photo-frame::after{ content:''; position:absolute; inset:-8px; border:1px solid var(--line-strong); opacity:.7; pointer-events:none; animation:photoFramePulse 3.5s ease-in-out 5s infinite; }
.profile-photo-frame img{ width:100%; height:100%; display:block; object-fit:cover; filter:grayscale(20%) sepia(12%) contrast(1.03); transition:opacity .55s ease, transform .55s ease; }
.profile-photo-frame img.profile-photo-secondary{ position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); opacity:0; z-index:2; filter:grayscale(0) sepia(0) contrast(1.04); }
.profile-photo-frame:hover img.profile-photo-secondary, .profile-photo-frame:focus-visible img.profile-photo-secondary{ opacity:1; }
.profile-photo-frame:hover img#profilePhoto, .profile-photo-frame:focus-visible img#profilePhoto{ opacity:0; transform:scale(1.03); }
.photo-index{ position:absolute; bottom:22px; right:24px; z-index:2; color:var(--ivory); font-size:.72rem; letter-spacing:.12em; }
.photo-caption{ display:flex; justify-content:space-between; align-items:center; padding-top:16px; color:var(--muted); font-size:.68rem; letter-spacing:.14em; }
.photo-caption b{ color:var(--gold); font-weight:400; }
.live-dot{ width:7px; height:7px; margin-right:7px; border-radius:50%; display:inline-block; background:#80b77d; box-shadow:0 0 0 4px rgba(128,183,125,.12); }
.hero-content{ position:relative; z-index:2; max-width:660px; animation:heroContentArrive 1.2s cubic-bezier(.2,.8,.2,1) 4.45s both; }
.hero-content > .role-line, .hero-content > .hero-desc, .hero-content > .cta-row{ opacity:0; animation:heroItemArrive .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-content > .role-line{ animation-delay:5.85s; }
.hero-content > .hero-desc{ animation-delay:6.05s; }
.hero-content > .cta-row{ animation-delay:6.25s; }
.writer-kicker.typing::after{ content:'|'; margin-left:3px; color:var(--gold-bright); animation:writerCaret .75s steps(1) infinite; }
.eyebrow{
  font-family:var(--font-ar); color:var(--gold-bright); font-size:1.3rem;
  letter-spacing:0.02em; margin-bottom:22px; opacity:0.9; display:flex; align-items:center; gap:12px;
}
.eyebrow-line{ display:inline-block; width:52px; height:1px; background:var(--line-strong); }
h1.name{
  font-family:var(--font-display); font-weight:400; font-size:clamp(3.1rem, 6.2vw, 5.9rem);
  line-height:.91; color:var(--ivory); margin-bottom:27px; letter-spacing:-.045em;
}
h1.name .name-line{ display:inline-block; animation:nameLineArrive .9s cubic-bezier(.2,.8,.2,1) both; }
h1.name .name-line:nth-child(1){ animation-delay:4.65s; }
h1.name .name-line:nth-child(3){ animation-delay:4.85s; }
h1.name .name-line:nth-child(5){ animation-delay:5.05s; }
h1.name .name-gold{ color:var(--gold-bright); }
h1.name em{ font-style:italic; color:var(--ivory); font-weight:300; }
.role-line{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  justify-content:flex-start; font-size:0.95rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:28px;
}
.role-line span{
  padding:6px 16px; border:1px solid var(--line-strong); border-radius:2px;
  color:var(--ivory); font-size:0.78rem;
}
.hero-desc{ color:var(--muted); font-size:1.02rem; max-width:560px; min-height:4.8em; margin:0 0 34px; }
.writer-text.typing::after{ content:'|'; display:inline-block; margin-left:3px; color:var(--gold-bright); animation:writerCaret .75s steps(1) infinite; }
.cta-row{ display:flex; gap:18px; justify-content:flex-start; flex-wrap:wrap; }
.btn{
  font-family:var(--font-sans); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:14px 30px; text-decoration:none; border-radius:2px; font-weight:500;
  transition:all .35s ease; display:inline-block;
}
.btn-primary{ background:var(--gold); color:#161208; border:1px solid var(--gold); }
.btn-primary:hover{ background:transparent; color:var(--gold-bright); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }
.btn span{ margin-left:8px; color:var(--gold-bright); }
.profile-meta{ width:min(1100px,100%); margin-top:72px; padding-top:18px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative; z-index:2; }
.profile-meta > div{ display:flex; flex-direction:column; gap:5px; }
.meta-label{ color:var(--muted); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.profile-meta strong{ color:var(--ivory); font-family:var(--font-display); font-size:.98rem; font-weight:400; }
.profile-meta strong i{ display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#80b77d; vertical-align:middle; }

.scroll-hint{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  color:var(--muted); font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;
}
.scroll-hint .line{ width:1px; height:36px; background:linear-gradient(var(--gold), transparent); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }
@keyframes headerArrive{ from{ opacity:0; transform:translateY(-18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes photoArrive{ from{ opacity:0; transform:translateY(34px) rotate(-2deg); } to{ opacity:1; transform:translateY(0) rotate(0); } }
@keyframes photoFramePulse{ 0%,100%{ opacity:.25; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.015); } }
@keyframes heroContentArrive{ from{ opacity:0; transform:translateX(32px); } to{ opacity:1; transform:translateX(0); } }
@keyframes nameLineArrive{ from{ opacity:0; transform:translateY(32px); filter:blur(6px); } to{ opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes heroItemArrive{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes writerCaret{ 0%,45%{ opacity:1; } 46%,100%{ opacity:0; } }

/* ---------- SECTION SHARED ---------- */
section{ position:relative; z-index:1; padding:140px 6vw; max-width:1240px; margin:0 auto; scroll-margin-top:170px; }
.section-head{ margin-bottom:70px; }
.section-num{
  font-family:var(--font-sans); font-size:0.75rem; color:var(--gold); letter-spacing:0.2em;
  text-transform:uppercase; display:block; margin-bottom:14px;
}
.section-title{
  font-family:var(--font-display); font-size:clamp(2rem, 4vw, 3rem); font-weight:400;
  color:var(--ivory);
}
.section-title em{ font-style:italic; color:var(--gold-bright); }
.section-head .section-num, .section-head .section-title{ opacity:0; transform:translateY(16px); }
.section-head .section-num{ transition:opacity .7s ease, transform .7s ease; }
.section-head .section-title{ transition:opacity .9s ease .12s, transform .9s cubic-bezier(.2,.8,.2,1) .12s; }
.section-head.in .section-num, .section-head.in .section-title{ opacity:1; transform:translateY(0); }
.reveal{
  opacity:0; transform:translateY(28px); transition:opacity .9s ease var(--reveal-delay, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
.reveal[data-reveal="left"]{ transform:translateX(-38px); }
.reveal[data-reveal="right"]{ transform:translateX(38px); }
.reveal[data-reveal="scale"]{ transform:scale(.92) translateY(18px); }
.reveal.in{ opacity:1; transform:translate(0) scale(1); }

/* ---------- TENTANG ---------- */
.about-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:70px; align-items:start; }
.about-text p{ color:var(--muted); font-size:1.05rem; margin-bottom:20px; max-width:520px; }
.about-text strong{ color:var(--ivory); font-weight:500; }
.stat-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.stat-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.stat-row .label{ color:var(--muted); font-size:0.85rem; letter-spacing:0.05em; text-transform:uppercase; }
.stat-row .value{ font-family:var(--font-display); font-size:1.4rem; color:var(--gold-bright); }

/* ---------- KARYA / PORTFOLIO ---------- */
.filter-row{ display:flex; gap:12px; margin-bottom:50px; flex-wrap:wrap; }
.filter-btn{
  font-family:var(--font-sans); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  background:none; border:1px solid var(--line-strong); color:var(--muted); padding:10px 20px;
  border-radius:2px; cursor:pointer; transition:all .3s ease;
}
.filter-btn.active, .filter-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
.upload-panel{ display:flex; justify-content:space-between; align-items:center; gap:25px; padding:20px 22px; margin-bottom:38px; border:1px solid var(--line-strong); background:linear-gradient(105deg, rgba(201,169,97,.08), rgba(63,107,84,.08)); }
.upload-copy{ display:flex; align-items:center; gap:14px; }
.upload-icon{ display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--gold); color:var(--gold-bright); font-size:1.4rem; line-height:1; }
.upload-copy strong, .upload-copy small{ display:block; }
.upload-copy strong{ color:var(--ivory); font-family:var(--font-display); font-size:1rem; font-weight:400; }
.upload-copy small{ color:var(--muted); font-size:.72rem; margin-top:3px; }
.upload-fields{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.upload-fields input[type="text"], .upload-fields select{ height:39px; padding:0 12px; border:1px solid var(--line-strong); background:var(--bg-2); color:var(--ivory); font-family:var(--font-sans); font-size:.75rem; outline:none; }
.upload-fields input[type="text"]{ width:150px; }
.upload-fields select{ width:145px; }
.upload-fields input[type="text"]:focus, .upload-fields select:focus{ border-color:var(--gold); }
.upload-btn{ display:inline-flex; align-items:center; height:39px; padding:0 14px; background:var(--gold); color:#161208; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; transition:background .3s ease; }
.upload-btn:hover{ background:var(--gold-bright); }
.upload-btn input{ display:none; }
.upload-note{ color:var(--muted); font-size:.68rem; margin:8px 0 0; text-align:right; }
.card-thumb.has-image{ display:block; }
.card-thumb.has-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.card:hover .card-thumb.has-image img{ transform:scale(1.04); }
.uploaded-card{ animation:cardIn .5s ease both; }
@keyframes cardIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
.grid-portfolio{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.card{
  position:relative; border-radius:3px; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--surface);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), border-color .5s ease;
}
.card.filter-out{ opacity:0; transform:scale(.94) translateY(14px); pointer-events:none; }
.card.filter-in{ animation:filterCardIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes filterCardIn{ from{ opacity:0; transform:scale(.94) translateY(18px); } to{ opacity:1; transform:scale(1) translateY(0); } }
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); }
.card-thumb{
  aspect-ratio:4/5; position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-thumb svg{ position:absolute; inset:0; width:100%; height:100%; opacity:0.5; }
.card-thumb img{ width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.82) contrast(1.03); transition:transform .5s ease, filter .5s ease; }
.card:hover .card-thumb img{ transform:scale(1.04); filter:saturate(1) contrast(1.05); }
.card-thumb .cat-icon{ display:none; }
.card-thumb .cat-icon{ position:relative; z-index:2; font-family:var(--font-display); font-size:1rem; color:var(--gold-bright); opacity:0.85; letter-spacing:0.05em;}
.card-body{ padding:20px 22px 24px; border-top:1px solid var(--line); }
.card-tag{ font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; display:block;}
.card-title{ font-family:var(--font-display); font-size:1.15rem; color:var(--ivory); }
.card-year{ color:var(--muted); font-size:0.78rem; margin-top:4px; }
.card[data-cat="desain"] .card-thumb{ background:linear-gradient(145deg, #1c1912, #241f16); }
.card[data-cat="foto"] .card-thumb{ background:linear-gradient(145deg, #12160f, #1a2118); }

/* ---------- PRESTASI ---------- */
.ach-list{ border-top:1px solid var(--line); }
.ach-item{
  display:grid; grid-template-columns: 110px minmax(0,1fr) 120px 150px; gap:24px; align-items:center;
  padding:28px 0; border-bottom:1px solid var(--line);
  transition:padding-left .4s ease;
}
.ach-item:hover{ padding-left:14px; }
.ach-year{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold-bright); font-weight:300; }
.ach-main .ach-title{ font-size:1.05rem; color:var(--ivory); margin-bottom:4px; font-weight:500; }
.ach-main .ach-desc{ color:var(--muted); font-size:0.9rem; }
.ach-badge{
  justify-self:end; min-width:104px; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold-bright); border:1px solid var(--gold); background:rgba(201,169,97,.1);
  padding:10px 16px; border-radius:2px; text-align:center; font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(230,201,135,.08);
}
.ach-proof{
  position:relative; display:block; width:150px; aspect-ratio:16/10; padding:0; overflow:hidden;
  border:1px solid var(--line-strong); background:var(--surface-2); cursor:pointer; text-align:left;
}
.ach-proof::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(10,10,8,.88)); opacity:.72; transition:opacity .35s ease; }
.ach-proof img{ width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.7) sepia(.12); transition:transform .5s ease, filter .5s ease; }
.ach-proof:hover img, .ach-proof:focus-visible img{ transform:scale(1.08); filter:saturate(1) sepia(0); }
.ach-proof:hover::after, .ach-proof:focus-visible::after{ opacity:.9; }
.ach-proof:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:4px; }
.proof-label{ position:absolute; z-index:1; left:12px; bottom:9px; color:var(--ivory); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }
.proof-label b{ color:var(--gold-bright); font-size:.85rem; margin-left:4px; }
.proof-lightbox{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:6vw; background:rgba(5,5,4,.9); backdrop-filter:blur(14px); opacity:1; transition:opacity .3s ease; }
.proof-lightbox[hidden]{ display:none; }
.proof-lightbox figure{ max-width:min(860px,92vw); max-height:88vh; margin:0; text-align:center; }
.proof-lightbox img{ display:block; max-width:100%; max-height:78vh; object-fit:contain; border:1px solid var(--line-strong); box-shadow:18px 18px 0 rgba(63,107,84,.22); }
.proof-lightbox figcaption{ margin-top:16px; color:var(--muted); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.lightbox-close{ position:absolute; top:28px; right:5vw; width:42px; height:42px; border:1px solid var(--line-strong); background:transparent; color:var(--ivory); font-size:1.7rem; line-height:1; cursor:pointer; transition:.3s ease; }
.lightbox-close:hover, .lightbox-close:focus-visible{ border-color:var(--gold); color:var(--gold-bright); outline:none; }

/* ---------- KONTAK ---------- */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact-info p{ color:var(--muted); max-width:420px; margin-bottom:36px; }
.contact-list{ display:flex; flex-direction:column; gap:20px; }
.contact-list a{
  color:var(--ivory); text-decoration:none; font-size:1.05rem; display:flex; align-items:center; gap:14px;
  border-bottom:1px solid transparent; transition:.3s;
}
.contact-list a:hover{ color:var(--gold-bright); border-color:var(--line-strong); }
.contact-list .ic{ color:var(--gold); font-family:var(--font-display); font-style:italic; }
form{ display:flex; flex-direction:column; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.field input, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  color:var(--ivory); font-family:var(--font-sans); font-size:1rem; padding:10px 2px;
  outline:none; transition:border-color .3s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:90px; }
.send-btn{
  align-self:flex-start; margin-top:8px; background:none; border:1px solid var(--gold);
  color:var(--gold-bright); font-family:var(--font-sans); font-size:0.85rem; letter-spacing:0.08em;
  text-transform:uppercase; padding:14px 32px; cursor:pointer; border-radius:2px; transition:.35s;
}
.send-btn:hover{ background:var(--gold); color:#161208; }
.form-status{ color:var(--gold-bright); font-size:.82rem; line-height:1.5; border-left:2px solid var(--gold); padding:10px 14px; background:rgba(201,169,97,.08); }
.form-status[hidden]{ display:none; }

footer{
  border-top:1px solid var(--line); padding:40px 6vw; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:0.8rem;
  position:relative; z-index:1;
}
footer .foot-star{ width:16px; height:16px; opacity:0.6; }

@media (max-width: 880px){
  nav.links{
    top:84px; right:auto; height:auto; width:calc(100% - 20px); background:rgba(15,14,11,.97);
    left:50%; transform:translateX(-50%) !important; flex-direction:row; justify-content:center; align-items:stretch; padding:5px;
    transition:none; border:1px solid var(--line); gap:2px; overflow-x:auto; pointer-events:auto;
  }
  nav.links::before{ display:none; }
  nav.links a{ min-width:0; width:auto; flex:1 1 0; padding:8px 3px 7px; font-size:.52rem; letter-spacing:.06em; }
  nav.links a::after{ left:50%; right:auto; bottom:-12px; transform:translateX(-50%); }
  nav.links a.active::after{ transform:translateX(-50%) translateY(2px); }
  nav.links.open{ transform:translateX(-50%) !important; }
  .menu-toggle{ display:none; }
  .about-grid, .contact-wrap{ grid-template-columns:1fr; gap:44px; }
  .grid-portfolio{ grid-template-columns:repeat(2, 1fr); }
  .ach-item{ grid-template-columns:70px 1fr 120px; }
  .ach-badge{ grid-column:1/-1; justify-self:start; margin-top:6px; min-width:104px; }
  .ach-proof{ grid-column:3; grid-row:1 / span 2; width:120px; }
  section{ padding:90px 6vw; }
  .hero{ min-height:100svh; overflow:visible; padding:86px 5vw 42px; }
  .profile-hero{ width:min(680px,100%); grid-template-columns:190px minmax(0,1fr); gap:24px; align-items:start; transform:none; }
  .profile-photo-wrap{ max-width:190px; }
  .hero-content{ display:flex; flex-direction:column; align-items:flex-start; }
  h1.name{ font-size:clamp(2.15rem,5vw,3.5rem); margin-bottom:14px; }
  .role-line{ gap:7px; margin-bottom:18px; }
  .role-line span{ font-size:.6rem; padding:5px 7px; }
  .hero-desc{ max-width:360px; font-size:.78rem; line-height:1.4; margin-bottom:14px; }
  .profile-meta{ position:relative; left:auto; right:auto; bottom:auto; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px; margin-top:32px; }
  .profile-meta strong{ font-size:.78rem; line-height:1.2; }
  .scroll-hint{ display:none; }
  .upload-panel{ align-items:flex-start; flex-direction:column; }
  .upload-fields{ width:100%; justify-content:flex-start; }
  .upload-note{ text-align:left; }
}
@media (max-width: 560px){
  .grid-portfolio{ grid-template-columns:1fr; }
  .logo{ font-size:.92rem; }
  .logo svg{ width:19px; height:19px; }
  .hero{ min-height:100svh; padding:92px 5vw 48px; }
  .profile-hero{ width:100%; display:flex; flex-direction:column; align-items:stretch; gap:20px; }
  .profile-photo-wrap{ width:min(62vw,220px); max-width:none; align-self:center; }
  .hero-content{ width:100%; min-width:0; }
  .hero .eyebrow-line{ width:28px; }
  h1.name{ font-size:clamp(2.55rem,12vw,4rem); line-height:.94; margin-bottom:14px; letter-spacing:-.03em; }
  .role-line{ gap:5px; margin-bottom:15px; }
  .role-line span{ font-size:0.58rem; padding:4px 6px; }
  .hero-desc{ font-size:.72rem; line-height:1.4; margin-bottom:16px; min-height:5.6em; }
  .btn{ font-size:.64rem; padding:10px 12px; }
  .cta-row{ gap:7px; }
  .profile-meta{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; margin-top:28px; }
  .meta-label{ font-size:.5rem; letter-spacing:.06em; }
  .profile-meta strong{ font-size:.68rem; line-height:1.2; }
  .profile-meta strong i{ width:4px; height:4px; margin-right:2px; }
  .photo-caption{ font-size:.48rem; letter-spacing:.07em; padding-top:9px; }
  .live-dot{ width:5px; height:5px; margin-right:3px; }
  .upload-copy{ align-items:flex-start; }
  .upload-copy small{ max-width:210px; line-height:1.35; }
  .upload-fields{ display:grid; grid-template-columns:1fr 1fr; }
  .upload-fields input[type="text"], .upload-fields select{ width:100%; }
  .upload-btn{ grid-column:1/-1; justify-content:center; }
  .ach-item{ grid-template-columns:58px 1fr; gap:12px; padding:22px 0; }
  .ach-year{ font-size:1.25rem; }
  .ach-main .ach-title{ font-size:.9rem; line-height:1.35; }
  .ach-main .ach-desc{ font-size:.75rem; line-height:1.4; }
  .ach-badge{ grid-column:1; grid-row:2; justify-self:start; margin-top:0; min-width:82px; padding:7px 10px; font-size:.66rem; }
  .ach-proof{ grid-column:2; grid-row:2; width:100%; max-width:150px; justify-self:end; }
}
@media (max-width: 700px){
  .hero{ min-height:100svh; padding:92px 6vw 52px; }
  .profile-hero{ width:100%; display:flex; flex-direction:column; align-items:stretch; gap:24px; }
  .profile-photo-wrap{ width:min(58vw,230px); max-width:230px; align-self:center; }
  .hero-content{ width:100%; min-width:0; }
  h1.name{ font-size:clamp(2.7rem,12vw,4.1rem); line-height:.94; }
  .role-line{ gap:7px; }
  .role-line span{ font-size:.62rem; padding:5px 8px; }
  .hero-desc{ max-width:100%; font-size:.8rem; line-height:1.45; }
  .profile-meta{ width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; margin-top:28px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .opening-screen{ display:none; }
}