:root{
  --bg: #f1f1f1;
  --bg-alt: #ffffff;
  --bg-alt2: #e6e6e6;
  --text: #232323;
  --text-dim: #6f6f6f;
  --line: #dcdcdc;
  --cyan: #6666cd;
  --cyan-dim: rgba(102,102,205,0.10);
  --on-accent: #f1f1f1;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', sans-serif;
  color:var(--text);
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
}
h1, h2, .brand{ font-family:'Space Grotesque', 'Inter', sans-serif; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--cyan); color:var(--on-accent); }

/* ---------- NAV ---------- */
header.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(255,255,255,0.68);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(35,35,35,0.08);
}
.nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:1.4rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--text);
}
.brand img{
  width:26px; height:26px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.nav-links{ display:flex; gap:2.2rem; }
.nav-links a{
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--text-dim);
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:color 0.2s, border-color 0.2s;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}

main{ padding-top:78px; min-height:100vh; }

/* ---------- ABOUT / HOME ---------- */
#about{ padding:5rem 2rem 5rem; }
.about-wrap{ max-width:900px; margin:0 auto; }
.about-top{
  display:flex;
  gap:2.2rem;
  align-items:flex-start;
  margin-bottom:4rem;
  padding-bottom:3rem;
  border-bottom:1px solid var(--line);
}
.avatar{
  width:110px; height:110px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--bg-alt2);
  border:1px solid var(--line);
  object-fit:cover;
}
.about-top h1{ font-size:1.8rem; font-weight:800; }
.name-row{ display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; }
.mini-socials{ display:flex; align-items:center; gap:0.7rem; }
.mini-socials a{ color:var(--text-dim); display:inline-flex; transition:color 0.2s; }
.mini-socials a svg{ width:16px; height:16px; fill:currentColor; }
.mini-socials a:hover{ color:var(--cyan); }
.role{
  margin-top:0.3rem;
  font-size:0.88rem;
  color:var(--text-dim);
  font-weight:500;
}
.bio{
  margin-top:1rem;
  max-width:32rem;
  line-height:1.75;
  font-size:0.94rem;
  color:var(--text-dim);
}

.about-wrap h2{ font-size:1.3rem; font-weight:800; margin-bottom:1.2rem; }

/* ---------- SHOWREEL (About page) ---------- */
.showreel{ margin-bottom:3.8rem; }
.showreel-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:6px;
  overflow:hidden;
  background:var(--bg-alt2);
  border:1px solid var(--line);
}
.showreel-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- SELECTED WORKS (About page) ---------- */
.selected-works{ margin-bottom:1rem; }
.selected-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.8rem 1.4rem;
  margin-bottom:1.4rem;
}

.see-more{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin-top:2.2rem;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--cyan);
  padding:0.8rem 1.4rem;
  border:1px solid var(--cyan);
  border-radius:2px;
  transition:background 0.2s, color 0.2s;
}
.see-more:hover{ background:var(--cyan); color:var(--on-accent); }
.see-more .arrow{ transition:transform 0.2s; }
.see-more:hover .arrow{ transform:translateX(4px); }

/* ---------- WORKS PAGE ---------- */
.works-header{ max-width:1200px; margin:0 auto; padding:4.5rem 2rem 2.5rem; }
.works-eyebrow{ color:var(--cyan); font-size:0.8rem; font-weight:700; letter-spacing:0.1em; margin-bottom:0.8rem; }
.works-header h1{ font-size:2.2rem; font-weight:800; margin-bottom:1rem; }
.works-header p{ max-width:36rem; color:var(--text-dim); font-size:0.95rem; line-height:1.7; }

.filter-bar{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem 2.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  border-bottom:1px solid var(--line);
  padding-bottom:2rem;
}
.filter-btn{
  font-family:'Inter', sans-serif;
  font-size:0.8rem;
  font-weight:600;
  padding:0.55rem 1.1rem;
  border-radius:2px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}
.filter-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.filter-btn.active{
  background:var(--cyan-dim);
  border-color:var(--cyan);
  color:var(--cyan);
}

.works-grid{
  max-width:1200px;
  margin:0 auto;
  padding:3rem 2rem 5rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.2rem 1.6rem;
}
.work-item.hidden{ display:none; }
.work-thumb{
  position:relative;
  aspect-ratio:16/9;
  border-radius:4px;
  background-size:cover;
  background-position:center;
  margin-bottom:0.9rem;
  transition:opacity 0.2s ease;
}
.work-item:hover .work-thumb{ opacity:0.85; }
/* play-button overlay: nunjukkin kalau thumbnail ini link ke video */
.work-thumb::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:50px; height:50px;
  border-radius:50%;
  background:rgba(35,35,35,0.55);
}
.work-thumb::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-38%,-50%);
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #f1f1f1;
}
.wt1{ background:linear-gradient(135deg,#2b3a42,#43616b); }
.wt2{ background:linear-gradient(135deg,#2c2b42,#4a4a7a); }
.wt3{ background:linear-gradient(135deg,#1f3a3a,#2f6363); }
.wt4{ background:linear-gradient(135deg,#3a2b34,#6b435c); }
.wt5{ background:linear-gradient(135deg,#2b2f3a,#4a5a7a); }
.wt6{ background:linear-gradient(135deg,#233a2f,#3f6b52); }
.work-sub{ font-size:0.75rem; color:var(--text-dim); margin-bottom:0.35rem; line-height:1.4; }
.work-title{
  font-size:0.95rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.work-title .arrow{ color:var(--cyan); }
.work-meta{ font-size:0.8rem; color:var(--text-dim); margin-top:0.25rem; line-height:1.5; }
.work-platform{ font-size:0.78rem; color:var(--text-dim); margin-top:0.4rem; display:flex; align-items:center; gap:0.3rem; }

/* ---------- CONTACT PAGE ---------- */
#contact{ padding:5rem 2rem 6rem; }
.contact-wrap{ max-width:760px; margin:0 auto; }
.contact-wrap h1{ font-size:1.9rem; font-weight:800; margin-bottom:1.4rem; }
.contact-wrap p{ font-size:0.95rem; line-height:1.8; color:var(--text-dim); }
.email-line{ margin-top:1.6rem; font-size:1.1rem; font-weight:600; color:var(--text); }
.email-line a{ border-bottom:1px solid var(--text); }
.email-line a:hover{ color:var(--cyan); border-color:var(--cyan); }
hr{ border:none; border-top:1px solid var(--line); margin:2.5rem 0; }
.updated{ font-size:0.8rem; color:var(--text-dim); margin-bottom:0.6rem; }
.status-heading{ color:var(--cyan); font-size:1.05rem; font-weight:700; margin-bottom:1rem; }
.status-note{ font-weight:600; color:var(--text); margin-bottom:0.3rem; }
.status-sub{ font-size:0.82rem; color:var(--text-dim); margin-bottom:1.4rem; }
.status-list{ list-style:none; }
.status-list li{ font-size:0.9rem; margin-bottom:0.6rem; padding-left:1.4rem; position:relative; color:var(--text); }
.status-list li::before{ content:"☑"; position:absolute; left:0; color:var(--cyan); }
.status-list span{ color:var(--text-dim); }
.note{ margin-top:1.6rem; font-size:0.88rem; }

/* ---------- REQUEST FORM ---------- */
.form-hidden{ position:absolute; left:-9999px; }
.request-form{ margin-top:1.6rem; max-width:34rem; }
.form-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.form-row .form-field{ flex:1 1 200px; }
.form-field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.1rem; }
.form-field span{ font-size:0.82rem; font-weight:600; color:var(--text); }
.form-field input,
.form-field select,
.form-field textarea{
  font-family:'Inter', sans-serif;
  font-size:0.9rem;
  color:var(--text);
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:4px;
  padding:0.7rem 0.9rem;
  transition:border-color 0.2s;
}
.form-field select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236f6f6f' stroke-width='1.6'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.8rem center;
  background-size:14px;
  padding-right:2.2rem;
}
.form-field textarea{ resize:vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ outline:none; border-color:var(--cyan); }
.form-submit{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin-top:0.4rem;
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--on-accent);
  background:var(--cyan);
  border:1px solid var(--cyan);
  border-radius:2px;
  padding:0.8rem 1.4rem;
  cursor:pointer;
  transition:opacity 0.2s;
}
.form-submit:hover{ opacity:0.85; }
.form-submit .arrow{ transition:transform 0.2s; }
.form-submit:hover .arrow{ transform:translateX(4px); }

.channels{ margin-top:2.8rem; display:flex; flex-wrap:wrap; gap:0.7rem; }
.channels a{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  font-size:0.85rem;
  font-weight:600;
  color:var(--text);
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.65rem 1.1rem;
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}
.channels a svg{ width:18px; height:18px; fill:currentColor; flex-shrink:0; }
.channels a:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--on-accent); }
.channels a.channel-cta{ background:var(--cyan); border-color:var(--cyan); color:var(--on-accent); }
.channels a.channel-cta:hover{ opacity:0.85; }

footer.site-footer{
  text-align:center;
  padding:2.2rem;
  font-size:0.75rem;
  color:var(--text-dim);
  border-top:1px solid var(--line);
}

/* ---------- PAGE TRANSITIONS (native, no JS) ---------- */
@view-transition{
  navigation:auto;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:0.45s;
  animation-timing-function:cubic-bezier(0.4,0,0.2,1);
}
::view-transition-old(root){ animation-name:pm-slide-out; }
::view-transition-new(root){ animation-name:pm-slide-in; }
@keyframes pm-slide-out{
  from{ opacity:1; transform:translateX(0); }
  to{ opacity:0; transform:translateX(-16px); }
}
@keyframes pm-slide-in{
  from{ opacity:0; transform:translateX(16px); }
  to{ opacity:1; transform:translateX(0); }
}

/* ---------- VIDEO MODAL ---------- */
.video-modal{
  position:fixed; inset:0; z-index:200;
  display:none;
  align-items:center; justify-content:center;
  padding:1.5rem;
}
.video-modal.open{ display:flex; }
.video-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(35,35,35,0.75);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.video-modal-content{
  position:relative;
  width:100%; max-width:900px;
  background:var(--bg-alt);
  border-radius:8px;
  padding:1rem;
  z-index:1;
  animation:pm-modal-in 0.25s ease;
}
@keyframes pm-modal-in{
  from{ opacity:0; transform:scale(0.96); }
  to{ opacity:1; transform:scale(1); }
}
.video-modal-close{
  position:absolute;
  top:-14px; right:-14px;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:var(--text);
  color:var(--bg);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.video-modal-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:4px;
  overflow:hidden;
  background:#000;
}
.video-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal-external{
  display:inline-flex;
  margin-top:0.9rem;
  font-size:0.85rem;
  font-weight:600;
  color:var(--text-dim);
}
.video-modal-external:hover{ color:var(--cyan); }

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

.reveal-grid .work-item{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.reveal-grid.in-view .work-item{ opacity:1; transform:translateY(0); }
.reveal-grid .work-item:nth-child(1){ transition-delay:0.05s; }
.reveal-grid .work-item:nth-child(2){ transition-delay:0.1s; }
.reveal-grid .work-item:nth-child(3){ transition-delay:0.15s; }
.reveal-grid .work-item:nth-child(4){ transition-delay:0.2s; }
.reveal-grid .work-item:nth-child(5){ transition-delay:0.25s; }
.reveal-grid .work-item:nth-child(6){ transition-delay:0.3s; }
.reveal-grid .work-item:nth-child(7){ transition-delay:0.35s; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px){
  .nav-inner{ padding:1.1rem 1.4rem; }
  .nav-links{ gap:1.2rem; }
  .about-top{ flex-direction:column; gap:1.1rem; }
  .works-grid, .selected-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 480px){
  .works-grid, .selected-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal, .reveal-grid .work-item{ opacity:1 !important; transform:none !important; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
  .video-modal-content{ animation:none !important; }
}