:root{
  --sidebar-w: 200px;
  --ease: cubic-bezier(.4,0,.2,1);
  --bg: #9c9387;
  --text-clr: #000;
}
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Plus Jakarta Sans",sans-serif;
  background:var(--bg);
  color: var(--text-clr);
}

/* ===== MOBILE HEADER ===== */
.mobile-header{ display:none; }

.app{ display:flex; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-w);
  background:var(--bg);
  padding:48px 50px;
  z-index:3000;
}

.main-menu a{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-decoration:none;
  color:#000;
  cursor:pointer;
}
.main-menu a:hover{ opacity:.7; }

/* ===== MAIN MENU ACTIVE ===== */
.main-menu .navlink{
  color: #fff;
  opacity: .35;
  transition: color 200ms ease, opacity 200ms ease;
}

.main-menu .navlink:hover{
  opacity: .9;
}

/* ACTIVE STATE */
.main-menu .navlink.active{
  color: #000;
  opacity: 1;
}

/* optional: underline tipis seperti reference */
.main-menu .navlink.active::after{
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: #000;
  margin-top: 6px;
}

.logo{
  position:absolute;
  bottom:32px;
  left:50px;
}
.logo img{ width:80px; }

/* ===== CONTENT ===== */
.content{
  margin-left: var(--sidebar-w);
  width: 100%;
  height: 100vh;        /* penting */
  overflow-y: auto;     /* penting */
  overflow-x: hidden;
}

/* ===== SLIDER ===== */
.slider{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.03);
  transition:opacity 700ms var(--ease),transform 900ms var(--ease);
  cursor:pointer;
}
.slide.active{
  opacity:1;
  transform:scale(1);
}

/* ===== CAPTION LEFT BOTTOM ===== */
.slide-caption{
  position:absolute;
  left:44px;
  bottom:34px;
  z-index:5;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.slide-caption .title{
  font-size:12px;
  font-weight:600;
  /*margin-bottom:10px;*/
}
.slide-caption a{
  font-size:10px;
  color:#fff;
  text-decoration:none;
  text-transform:none;
  /*border-bottom:1px solid rgba(255,255,255,.4);*/
  padding-bottom:2px;
}

/* ===== PAGINATION RIGHT BOTTOM ===== */
.slider-pagination{
  position:absolute;
  right:42px;
  bottom:34px;
  z-index:6;
  display:flex;
  gap:18px;
}
.slider-pagination button{
  background:none;
  border:0;
  font-size:12px;
  letter-spacing:.25em;
  color:rgba(255,255,255,.8);
  cursor:pointer;
  position:relative;
}
.slider-pagination button.active{
  color:#fff;
}
.slider-pagination button.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:1px;
  background:#fff;
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .mobile-header{
    display:flex;
    position:fixed;
    top:0; left:0; right:0;
    height:64px;
    background:var(--bg);
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    z-index:5000;
  }
  .app{ padding-top:64px; }

  .burger{
    width:26px;
    height:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:0;
    background:none;
  }
  .burger span{
    height:2px;
    background:#000;
  }

  .sidebar{
    top:64px;
    left:-100%;
    width:85%;
    transition:left .4s var(--ease);
  }
  .sidebar.active{ left:0; }

  .content{ margin-left:0; }
  .slider{ height:calc(100vh - 64px); }

  .logo{ display:none; }
  .slide-caption{ left:20px; bottom:22px; }
  .slider-pagination{ right:20px; bottom:22px; }
}

/* ==========================================
   ABOUT LAYOUT (TEXT LEFT / IMAGE RIGHT)
========================================== */
.about-layout{
  display: grid;
  grid-template-columns: 1fr 1fr; /* kiri teks, kanan image */
  min-height: 100vh;             /* biar full tinggi layar */
}

.about-image{
  height: 100vh;                 /* area image full */
  overflow: hidden;
}

.about-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* ini kunci biar full cover */
  display: block;
}

.about-text{
  padding: 43px 5px;
  max-width: 720px;
  font-size: 11px;
  line-height: 1.85;
  letter-spacing: .02em;
  margin-right: 50px;
}

.about-text h1{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 6px 0 22px;
}

.about-text p{
  font-size: 11px;
  line-height: 1.85;
  margin: 0 0 18px;
  /*opacity: .95;*/
  color: #000;
}

/* ==========================================
   PROJECTS GRID (thumbnail page)
========================================== */
.projects-grid{
  padding: 43px 42px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* ==========================================
   PROJECT TILE
========================================== */
/* ===== PROJECT TILE ===== */
.project-tile{
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,0.08);

  /* bikin stacking context sendiri supaya z-index rapi */
  isolation: isolate;
}

/* LINK harus berada paling atas dan bisa klik */
.project-link{
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* IMAGE */
.project-link img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform 300ms var(--ease), opacity 250ms ease;
}

/* hover zoom */
.project-tile:hover img{
  transform: scale(1.02);
  opacity: .96;
}

/* ==========================================
   !!! KUNCI: MATIKAN SEMUA OVERLAY LAMA
   Kalau kamu pernah punya .project-tile::before,
   ini akan memastikan dia TIDAK blok klik.
========================================== */
.project-tile::before,
.project-tile::after{
  pointer-events: none !important;
}

/* OVERLAY gelap (di dalam link, aman untuk klik) */
.project-link::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.70) 65%,
    rgba(0,0,0,0.82) 100%
  );
  opacity:0;
  transition: opacity 280ms var(--ease);
  z-index: 2;
  pointer-events: none; /* overlay tidak menangkap klik */
}

.project-tile:hover .project-link::before{
  opacity:1;
}

/* INFO TEXT */
.project-info{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;

  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;

  color:#fff;
  text-transform: uppercase;
  letter-spacing:.10em;
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);

  z-index: 3;
  pointer-events: none; /* biar klik tetap tembus ke <a> */

  opacity:0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 260ms var(--ease);
}

.project-tile:hover .project-info{
  opacity:1;
  transform: translateY(0);
}

/* ==========================================
   PROJECTS LAYOUT (DEFAULT PAGE)
   sidebar | text | images stack
========================================== */
.projects-layout{
  align-items: start; /* wajib untuk grid */
}

.projects-text{
  position: sticky;
  top: 43px;          /* jarak dari atas content */
  align-self: start;
}
.projects-layout{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: 42px;
  padding: 43px 42px;
  min-height:100vh;
}

/* TEXT COLUMN */
.projects-text{
  font-size:11px;
  line-height:1.85;
  letter-spacing:.02em;
  color:#000;
}

.projects-text .title{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  margin:0 0 22px;
}

.projects-meta{
  margin-top:32px;
  font-size:11px;
  letter-spacing:.06em;
}
.projects-meta b{ font-weight:800; }

/* IMAGE COLUMN */
.projects-images{
  display:grid;
  gap:26px;
}

.projects-images figure{
  margin:0;
}

.projects-images img{
  width:100%;
  height:auto;
  display:block;
}

/* ==========================================
   PROJECT TILE HOVER OVERLAY
========================================== */

/* overlay layer */
.project-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.65) 100%
  );
  opacity: 0;
  transition: opacity 280ms var(--ease);
  z-index:1;
}

/* munculkan overlay saat hover */
.project-tile:hover::before{
  opacity:1;
}

/* pastikan image di bawah overlay */
.project-tile img{
  position:relative;
  z-index:0;
}

/* konten overlay (text) di atas overlay */
.project-info{
  z-index:2;;
}

/* optional: animasi text naik dikit */
.project-tile:hover .project-info{
  transform: translateY(-4px);
}

/* optional: cursor visual */
.project-tile{
  cursor:pointer;
}

/* ==============================
   PRESS GRID
============================== */
.press-grid{
  padding: 43px 42px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* tile press: landscape editorial */
.press-grid .press-tile{
  width: 100%;
  aspect-ratio: 16 / 10;
  /*background: rgba(255,255,255,0.08);*/
  overflow: visible;
  margin-bottom: 35px;
}

/* link & image full area */
.press-grid .press-link{
  display: block;
  width: 100%;
  height: 100%;
  color: #000;
}

.press-grid .press-link img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* matikan overlay & hover lama */
.press-grid .press-info{ display:none !important; }
.press-grid .press-link::before{ display:none !important; }
.press-grid .press-tile::before{ display:none !important; }

/* meta di bawah gambar (reuse edition style) */
.press-grid .edition-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 16px;

  margin-top: 12px;
  padding: 0 2px;

  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 600;
  color: #000;
}

.press-grid .edition-meta .title{
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 14px;
}

/*.press-grid .edition-meta .year{*/
/*  font-size: 9px;*/
/*  text-transform: lowercase;*/
  /*opacity: .65;*/
/*}*/

.press-grid .edition-meta .link{
  font-size: 10px;
  /*opacity: .6;*/
}

.press-tile .edition-meta .year{
  font-size: 10px;          /* samakan dengan meta lain */
  font-weight: 800;
  letter-spacing: .14em;
  opacity: 1;

  white-space: nowrap;     /* 🔑 paksa 1 baris */
  flex-shrink: 0;          /* 🔑 jangan mengecil */
  text-transform: lowercase;
}

/* ==========================================
   CONTACT WITH IMAGE (LEFT TEXT / RIGHT IMAGE)
========================================== */
.contact-layout{
  padding-top: 35px;
}

/* LEFT TEXT */
.contact-text{
  padding: 15px 5px;
}

.contact-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-list{
  display: flex;
  flex-direction: column;
}

.contact-item{
  align-items: flex-start;
  font-size: 11px;
  letter-spacing: .02em;
}
.contact-item p{margin-bottom:0px;}

.contact-item .icon{
  font-size: 14px;
  margin-top: 2px;
}

.contact-item .label{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 4px;
}

.contact-item a{
  color: #000;
  text-decoration: none;
}
.contact-item a:hover{ opacity:.7; }

/* RIGHT IMAGE */
.contact-image{
  height: 100vh;
  overflow: hidden;
}

.contact-image img{
  width: 100%;
  height: 150%;
  object-fit: cover;
  display: block;
}

/* ==========================================
   IMAGE ZOOM (+ icon) + LIGHTBOX
========================================== */

/* wrapper figure */
.zoom-figure{ margin:0; }

/* button full area */
.zoom-btn{
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  overflow: hidden;
}

/* image */
.zoom-btn img{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform 320ms var(--ease), filter 320ms var(--ease);
}

/* subtle zoom on hover */
.zoom-btn:hover img{
  transform: scale(1.02);
  filter: brightness(.92);
}

/* elegant plus icon */
.zoom-plus{
  position: absolute;
  left: 18px;
  bottom: 16px;
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.65);
  color: rgba(255,255,255,.95);
  border-radius: 999px;

  font-size: 18px;
  font-weight: 500;
  line-height: 1;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 260ms var(--ease), background 220ms ease, border-color 220ms ease;
}

/* show + on hover */
.zoom-btn:hover .zoom-plus{
  opacity: 1;
  transform: translateY(0);
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.85);
}

/* ================= LIGHTBOX ================= */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.lightbox.is-open{
  display: block;
}

.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

.lightbox-dialog{
  position: relative;
  z-index: 2;
  width: min(980px, 92vw);
  height: min(78vh, 720px);
  margin: 6vh auto 0;
  display: grid;
  place-items: center;

  border-radius: 14px;
  overflow: hidden;
  background: rgba(10,10,10,.35);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 280ms var(--ease);
}

.lightbox.is-open .lightbox-dialog{
  opacity: 1;
  transform: translateY(0);
}

.lightbox-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(0,0,0,.35);
}
.zoom-plus svg{
  display:block;
}
.lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.25);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease;
  z-index: 3;
}
.lightbox-close:hover{
  opacity: .9;
  border-color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.35);
}
/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width: 1100px){
  .projects-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ===============================
   MOBILE
=============================== */
@media (max-width: 768px){
  .content{ margin-left:0 !important; padding-top: 15px;   height: auto; }

  .about-layout{
    grid-template-columns: 1fr;
  }

  .about-image{
    min-height: 55vh;   /* penting supaya terlihat */
    height: auto;
  }

  .about-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
  }
  .about-text {
    padding: 5px 25px;
  }

  .logo{ display:none; }

  .projects-layout{
    grid-template-columns:1fr;
    gap:22px;
    padding:18px 22px;
  }

  .projects-grid{
    padding: 18px 22px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* di mobile tile agak landscape */
  .project-tile{
    aspect-ratio: 4 / 3;
  }
  
  .press-grid{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 22px;
  }

  .press-grid .press-tile{
    aspect-ratio: 4 / 3;
  }

  .contact-layout{
    grid-template-columns: 1fr;
  }

  .contact-image{
    height: 55vh;
  }

  .contact-text{
    padding: 18px 22px;
  }
}