/* =========================================================
   TOKEN — palet warna & tipografi terinspirasi Persona 3
   ========================================================= */
:root{
  --navy-deep:   #080b1a;
  --navy-mid:    #10152e;
  --navy-panel:  #161c3d;
  --blue-electric:#2c4fa8;
  --blue-glow:   #4d78e0;
  --gold:        #e6c874;
  --red-velvet:  #7d1f3d;
  --moss:        #8fa876;
  --white:       #f2f1ea;
  --gray:        #8891ad;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Noto Sans', sans-serif;
  --font-hud: 'Chakra Petch', sans-serif;

  --nav-height: 76px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--navy-deep);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

/* garis diagonal tipis di seluruh halaman, khas menu Persona 3 */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    115deg,
    rgba(77,120,224,0.05) 0px,
    rgba(77,120,224,0.05) 2px,
    transparent 2px,
    transparent 64px
  );
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:0.02em; }

a{ color:inherit; text-decoration:none; }

/* =========================================================
   INTRO
   ========================================================= */
.intro-overlay{
  position:fixed; inset:0; z-index:999;
  pointer-events:none;
}
.slash-panel{
  position:absolute; top:0; height:100%; width:40%;
  background:var(--navy-mid);
  transform:translateX(0);
}
.panel-a{ left:0; background:var(--navy-deep); animation:slide-left 0.9s 0.4s cubic-bezier(.77,0,.18,1) forwards; }
.panel-b{ left:30%; width:40%; background:var(--blue-electric); animation:slide-left 0.9s 0.25s cubic-bezier(.77,0,.18,1) forwards; }
.panel-c{ left:60%; width:40%; background:var(--navy-deep); animation:slide-right 0.9s 0.4s cubic-bezier(.77,0,.18,1) forwards; }

@keyframes slide-left{ to{ transform:translateX(-115%) skewX(-8deg); } }
@keyframes slide-right{ to{ transform:translateX(115%) skewX(-8deg); } }

.intro-mark{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  animation:fade-out 0.5s 0.5s ease forwards;
}
.intro-moon{
  display:inline-block; width:34px; height:34px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 24px var(--gold);
  margin-bottom:14px;
}
.intro-text{
  font-family:var(--font-display);
  letter-spacing:0.35em; font-size:0.8rem; color:var(--white);
}
.intro-sub{
  margin-top:8px;
  font-family:var(--font-hud);
  letter-spacing:0.25em; font-size:0.65rem; color:var(--moss);
}
@keyframes fade-out{ to{ opacity:0; } }

/* =========================================================
   MUSIK — tombol putar/jeda mengambang
   ========================================================= */
.music-toggle{
  position:fixed; z-index:90;
  right:6vw; bottom:28px;
  display:flex; align-items:center; gap:10px;
  padding:10px 18px 10px 12px;
  background:rgba(8,11,26,0.85);
  border:1px solid rgba(230,200,116,0.4);
  backdrop-filter:blur(6px);
  cursor:pointer;
  clip-path:polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  transition:border-color 0.25s ease, background 0.25s ease;
}
.music-toggle:hover{ border-color:var(--gold); }
.music-icon{
  width:16px; height:16px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 2px rgba(230,200,116,0.25);
  position:relative;
  flex-shrink:0;
}
.music-icon::before{
  content:'';
  position:absolute; inset:0; margin:auto;
  width:5px; height:5px; border-radius:50%;
  background:var(--navy-deep);
}
.music-toggle.playing .music-icon{
  animation:pulse-moon 1.6s ease-in-out infinite;
}
.music-label{
  font-family:var(--font-hud); font-size:0.68rem; letter-spacing:0.15em;
  color:var(--white); white-space:nowrap;
}

/* =========================================================
   NAV
   ========================================================= */
.main-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-height);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6vw;
  background:linear-gradient(to bottom, rgba(8,11,26,0.95), rgba(8,11,26,0.75));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(77,120,224,0.25);
}
.nav-brand{
  font-family:var(--font-display); font-size:1.3rem; font-weight:700;
  letter-spacing:0.05em;
}
.nav-brand span{ color:var(--gold); }

.nav-menu{
  display:flex; gap:2.2vw; list-style:none;
}
.nav-item{
  position:relative;
  font-family:var(--font-display);
  font-size:0.85rem; letter-spacing:0.08em;
  padding:10px 4px;
}
.nav-item::before{
  content:attr(data-num);
  font-family:var(--font-hud);
  font-size:0.65rem; color:var(--gray);
  margin-right:6px;
}
.nav-item::after{
  content:'';
  position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--blue-glow);
  transform:skewX(-20deg);
  transition:width 0.3s ease;
}
.nav-item:hover::after,
.nav-item.active::after{ width:100%; }
.nav-item.active{ color:var(--gold); }
.nav-item.active::before{ color:var(--gold); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer;
}
.nav-toggle span{ width:26px; height:2px; background:var(--white); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:0 8vw;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(77,120,224,0.18), transparent 55%),
    var(--navy-deep);
}
.hero-stripes{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    -35deg,
    transparent 0px,
    transparent 46px,
    rgba(77,120,224,0.06) 46px,
    rgba(77,120,224,0.06) 48px
  );
  z-index:0;
}
.hero-diagonal{
  position:absolute; top:0; right:-10%;
  width:55%; height:100%;
  background:linear-gradient(160deg, var(--navy-panel) 0%, var(--blue-electric) 120%);
  clip-path:polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
  opacity:0.55;
}
.hero-hud{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hud-corner{
  position:absolute; width:64px; height:64px;
  border:1px solid rgba(230,200,116,0.35);
}
.hud-tl{ top:calc(var(--nav-height) + 28px); left:4vw; border-right:none; border-bottom:none; }
.hud-br{ bottom:28px; right:4vw; border-left:none; border-top:none; }

.hero-moon{
  position:absolute; top:16%; right:10%;
  width:min(30vw, 320px);
}
.moon-svg{ width:100%; height:auto; }
.moon-ring{
  fill:none; stroke:var(--blue-glow); stroke-width:1.5; opacity:0.5;
  animation:spin 26s linear infinite;
  transform-origin:100px 100px;
}
.moon-ring-outer{
  fill:none; stroke:var(--gold); stroke-width:0.75; opacity:0.3;
  stroke-dasharray:2 10;
  animation:spin 40s linear infinite reverse;
  transform-origin:100px 100px;
}
.moon-core{
  fill:var(--gold); opacity:0.9;
  filter:drop-shadow(0 0 30px var(--gold));
  animation:pulse-moon 4s ease-in-out infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse-moon{ 0%,100%{ opacity:0.85; } 50%{ opacity:1; } }

.hero-content{ position:relative; z-index:2; max-width:640px; }
.hero-eyebrow{
  font-family:var(--font-hud);
  letter-spacing:0.18em; font-size:0.7rem; color:var(--moss);
  margin-bottom:18px;
}
.hero-title{
  font-size:clamp(3rem, 8vw, 6rem);
  line-height:0.95;
  text-transform:uppercase;
}
.hero-subtitle{
  margin-top:24px; max-width:44ch;
  color:var(--gray); font-size:1.05rem;
}
.hero-cta{
  display:inline-block; margin-top:36px;
  padding:14px 34px;
  background:var(--blue-electric);
  font-family:var(--font-display); letter-spacing:0.06em; font-size:0.9rem;
  clip-path:polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
  transition:background 0.25s ease, transform 0.25s ease;
}
.hero-cta:hover{ background:var(--gold); color:var(--navy-deep); transform:translateX(4px); }

.hero-scroll{
  position:absolute; bottom:36px; left:8vw; z-index:2;
  font-family:var(--font-hud);
  font-size:0.75rem; letter-spacing:0.2em; color:var(--gray);
}

/* =========================================================
   SECTION helpers
   ========================================================= */
.section{
  padding:120px 8vw;
  position:relative;
  z-index:1;
}
.section-head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:56px;
}
.section-num{
  font-family:var(--font-hud); font-size:1rem; color:var(--blue-glow);
}
.section-head h2{
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  text-transform:uppercase;
  position:relative;
}
.section-head h2::after{
  content:''; display:block; width:60px; height:4px;
  background:var(--gold); margin-top:10px;
  clip-path:polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

/* =========================================================
   ABOUT / STATUS PANEL
   ========================================================= */
.about-grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:60px;
  align-items:start;
}
.about-text{ color:var(--gray); font-size:1.05rem; max-width:60ch; }

.status-panel{
  background:var(--navy-panel);
  border:1px solid rgba(77,120,224,0.3);
  clip-path:polygon(0 0, 100% 0, 100% 92%, 94% 100%, 0 100%);
}
.status-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  background:linear-gradient(90deg, var(--blue-electric), transparent);
  border-bottom:1px solid rgba(230,200,116,0.25);
}
.status-title{
  font-family:var(--font-hud); letter-spacing:0.3em; font-size:0.8rem; color:var(--white);
}
.status-corner{ width:8px; height:8px; background:var(--gold); }
.status-corner-r{ margin-left:auto; }
.status-rows{ padding:8px 20px 18px; }
.status-row{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:14px 0;
  border-bottom:1px dashed rgba(136,145,173,0.25);
}
.status-row:last-child{ border-bottom:none; }
.status-label{ color:var(--gray); font-size:0.9rem; }
.status-value{ font-family:var(--font-hud); font-size:1.4rem; color:var(--gold); }

/* =========================================================
   SKILLS — gauge bergaya HP/SP
   ========================================================= */
.skills-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:24px;
}
.skill-card{
  background:var(--navy-panel);
  padding:22px 24px;
  clip-path:polygon(0 0, 96% 0, 100% 100%, 0% 100%);
}
.skill-top{ display:flex; align-items:baseline; justify-content:space-between; }
.skill-name{ font-family:var(--font-display); font-size:0.95rem; letter-spacing:0.03em; }
.skill-pct{ font-family:var(--font-hud); font-size:0.8rem; color:var(--blue-glow); }
.skill-bar{
  margin-top:14px; height:10px; width:100%;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
  position:relative;
}
.skill-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--blue-electric), var(--blue-glow));
  transition:width 1.1s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.skill-fill.in-view{ width:var(--level); }
/* notch segmen di atas fill, meniru meteran HP/SP */
.skill-bar::after{
  content:'';
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 17px,
    rgba(8,11,26,0.85) 17px, rgba(8,11,26,0.85) 19px
  );
  pointer-events:none;
}

/* =========================================================
   PROJECTS — kartu Arcana yang bisa dibalik
   ========================================================= */
.projects-hint{ color:var(--gray); font-size:0.85rem; margin:-32px 0 32px; }
.projects-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:28px;
}
.arcana-card{
  perspective:1400px;
  height:320px;
  cursor:pointer;
}
.arcana-card:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
.arcana-inner{
  position:relative; width:100%; height:100%;
  transition:transform 0.6s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.arcana-card:hover .arcana-inner,
.arcana-card:focus-visible .arcana-inner,
.arcana-card.is-flipped .arcana-inner{
  transform:rotateY(180deg);
}
.arcana-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  background:var(--navy-panel);
  border:1px solid rgba(230,200,116,0.3);
  padding:28px 24px;
  display:flex; flex-direction:column;
}
.arcana-front{
  align-items:flex-start;
  background:
    linear-gradient(155deg, rgba(77,120,224,0.16), transparent 60%),
    var(--navy-panel);
}
.arcana-front::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--blue-glow);
}
.arcana-numeral{
  font-family:var(--font-display); font-size:2.4rem; color:var(--gold);
  line-height:1;
}
.arcana-emblem{
  width:34px; height:34px; margin:20px 0;
  background:var(--blue-electric);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.arcana-front h3{ font-size:1.15rem; }
.arcana-flip-hint{
  margin-top:auto; font-family:var(--font-hud); font-size:0.75rem;
  color:var(--gray); letter-spacing:0.12em;
}
.arcana-back{
  transform:rotateY(180deg);
  justify-content:flex-start;
  background:linear-gradient(155deg, var(--blue-electric), var(--navy-mid) 70%);
}
.arcana-back .arcana-numeral{ color:rgba(242,241,234,0.35); font-size:1.6rem; }
.arcana-back h3{ margin:10px 0 14px; }
.arcana-back p{ color:rgba(242,241,234,0.85); font-size:0.92rem; flex:1; }
.project-link{ font-size:0.85rem; color:var(--gold); margin-top:12px; }
.project-link:hover{ color:var(--white); }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-desc{ color:var(--gray); max-width:60ch; margin-bottom:28px; }
.gallery-controls{ display:flex; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.gallery-add-btn, .gallery-clear-btn{
  font-family:var(--font-display); font-size:0.85rem; letter-spacing:0.05em;
  padding:12px 26px; cursor:pointer; border:none;
}
.gallery-add-btn{
  background:var(--blue-electric); color:var(--white);
  clip-path:polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
}
.gallery-add-btn:hover{ background:var(--gold); color:var(--navy-deep); }
.gallery-clear-btn{
  background:transparent; color:var(--gray); border:1px solid rgba(255,255,255,0.15);
}
.gallery-clear-btn:hover{ color:var(--red-velvet); border-color:var(--red-velvet); }

.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:18px;
}
.gallery-empty{ color:var(--gray); grid-column:1/-1; }
.photo-card{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--navy-panel);
  border:1px solid rgba(230,200,116,0.2);
  animation:photo-in 0.4s ease;
}
@keyframes photo-in{ from{ opacity:0; transform:scale(0.9); } to{ opacity:1; transform:scale(1); } }
.photo-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-remove{
  position:absolute; top:6px; right:6px;
  width:26px; height:26px; border:none; border-radius:50%;
  background:rgba(8,11,26,0.75); color:var(--white); cursor:pointer;
  font-size:0.9rem; line-height:1;
  opacity:0; transition:opacity 0.2s ease;
}
.photo-card:hover .photo-remove{ opacity:1; }

/* =========================================================
   CONTACT — bingkai Velvet Room
   ========================================================= */
.velvet-frame{
  position:relative;
  max-width:680px;
  border:1px solid rgba(77,120,224,0.35);
  background:linear-gradient(165deg, rgba(77,120,224,0.08), transparent 55%);
  padding:44px 44px 36px;
}
.velvet-corner{
  position:absolute; width:22px; height:22px;
  border:2px solid var(--gold);
}
.vc-tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.vc-tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.vc-bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.vc-br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.contact-wrap{ max-width:640px; }
.contact-text{ color:var(--gray); margin-bottom:28px; }

.contact-links{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.contact-link{
  display:flex; align-items:center; gap:16px;
  background:var(--navy-panel);
  border:1px solid rgba(255,255,255,0.08);
  border-left:3px solid var(--blue-glow);
  padding:16px 18px;
  transition:border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.contact-link:hover{
  border-color:var(--gold);
  background:var(--navy-mid);
  transform:translateX(4px);
}
.contact-icon{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(77,120,224,0.15);
  border:1px solid rgba(77,120,224,0.4);
  position:relative;
}
.contact-link:hover .contact-icon{ border-color:var(--gold); background:rgba(230,200,116,0.12); }
.contact-icon::before{
  content:'';
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:14px; height:14px;
  background:var(--blue-glow);
}
.contact-link:hover .contact-icon::before{ background:var(--gold); }
.contact-icon-mail::before{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); mask:none; border-radius:2px; height:10px; }
.contact-icon-instagram::before{ border-radius:50%; }
.contact-icon-facebook::before{ clip-path:polygon(30% 0,70% 0,70% 40%,100% 40%,100% 60%,70% 60%,70% 100%,30% 100%,30% 60%,0 60%,0 40%,30% 40%); }
.contact-icon-github::before{ clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }

.contact-link-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.contact-link-label{
  font-family:var(--font-hud); font-size:0.68rem; letter-spacing:0.16em; color:var(--gray);
}
.contact-link-value{
  font-family:var(--font-display); font-size:0.95rem; color:var(--white);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.contact-link:hover .contact-link-value{ color:var(--gold); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  text-align:center; padding:32px 8vw;
  color:var(--gray); font-size:0.85rem;
  border-top:1px solid rgba(255,255,255,0.06);
  position:relative; z-index:1;
}
.footer-mark{
  display:inline-block; width:8px; height:8px;
  background:var(--gold);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  margin-bottom:14px;
}

/* =========================================================
   Keyboard focus visibility
   ========================================================= */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, label:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
  .nav-menu{
    position:fixed; top:var(--nav-height); right:0;
    flex-direction:column; gap:0;
    background:var(--navy-mid);
    width:min(70vw,300px);
    transform:translateX(100%);
    transition:transform 0.3s ease;
    padding:12px 0;
  }
  .nav-menu.open{ transform:translateX(0); }
  .nav-item{ padding:16px 24px; width:100%; }
  .nav-toggle{ display:flex; }
  .hero-moon{ opacity:0.5; }
  .contact-links{ grid-template-columns:1fr; }
  .hud-corner{ width:40px; height:40px; }
  .velvet-frame{ padding:32px 24px 28px; }
  .music-toggle{ right:5vw; bottom:20px; padding:9px 14px 9px 10px; }
  .music-label{ font-size:0.6rem; }
}