@font-face {
  font-family: "FontPertama";
  src: url("fonts/AlteHaasGroteskRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FontPertama";
  src: url("fonts/AlteHaasGroteskBold.ttf") format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "FontKedua";
  src: url("fonts/Velvelyne-Bold.ttf") format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "FontKedua";
  src: url("fonts/Velvelyne-Regular.ttf") format("truetype");
  font-weight: normal;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ffffff; /* kalau mau putih di area selain footer, biarkan; ganti kalau mau */
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "FontPertama", sans-serif;
  background-color: #fff;
  color: #5c1833;
}

/* --- NAVIGATION BAR --- */
nav {
  display: flex;
  justify-content: flex-end;
  padding: 30px 80px;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  display: inline-block;
  text-decoration: none;
  color: #5c1833;
  font-weight: 400;
  line-height: 110%;
  transition: 
    font-weight 0.2s ease,
    transform 0.2s ease;
  transform-origin: center;  
}

.works-link {
  display: inline-block;
  position: relative;
}

.dropdown {
  display: inline-flex;     /* mengikuti ukuran teks */
  flex-direction: column;   /* agar dropdown muncul di bawah anchor */
  align-items: center;      /* pusatkan anak-anaknya */
  position: relative;       /* anchor untuk dropdown */
}

.nav-menu a:hover {
  font-weight: 700;
  transform: scale(1.08);
}

.nav-image img.hitme-img {
  margin-left: -20px;
  top: 2px;
  width: 112px;
  height: auto;
  display: block;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.nav-image:hover img.hitme-img {
  content: url("homepage-assets/hitmeup-bold.png");
  transform: scale(1);
  opacity: 1;
}

.dropdown-menu {
  font-family: "FontPertama", sans-serif;
  position: absolute;
  top: 100%;
  left: 10%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;          
  pointer-events: none; 
  padding-top: 10px;
  list-style: none;
  margin: 0;
  background: transparent;
  text-align: center;
  transition: 
    opacity 0.25s ease,
    transform 0.25s ease; 
}

.dropdown:hover > .dropdown-menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto; 
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: 5px 0;
  color: #5c1833;
  text-decoration: none;
  font-weight: 400;
  opacity: 0.7;   
  transition: 
    opacity 0.2s ease,
    font-weight 0.2s ease;
}

.dropdown-menu a:hover {
  font-weight: 700;
   opacity: 1;   
}

/* MULAI LAYOUT */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#fff;color:#5c1833;font-family:"FontPertama",system-ui,Helvetica,Arial}
a{color:inherit;text-decoration:none}

/* header/nav (keperluan konsistensi, bisa dikurangi) */
header{position:fixed;left:0;right:0;top:0;height:84px;z-index:2000;background:transparent}
.topnav{height:100%;display:flex;align-items:center;padding:0 80px}
.nav-menu{display:flex;align-items:center;gap:36px;list-style:none;margin:0;padding:0}
.nav-menu a{color:#5c1833;font-weight:400;transition:transform .18s}
.nav-menu a:hover{transform:scale(1.06);font-weight:700}
.nav-image img{width:112px}

/* slides viewport */
.slides-viewport{
  padding-top:calc(70px + 28px);
  overflow:hidden;
  min-height: auto;
  height: auto;
  background:#fff;
}

/* slides row (horizontal) */
.slides{
  display:flex;
  transition:transform 640ms cubic-bezier(.22,.9,.33,1);
  will-change:transform;
  width:100%;
}

/* each slide fills viewport */
.slide{min-width:100%; display:flex; align-items:flex-start; justify-content:center; padding:60px 80px 90px;}

/* inner two-column: left text, right image */
.slide-inner{
  width:100%;
  max-width:1500px;
  display:grid;
  grid-template-columns:420px 1fr;
  gap:48px;
  align-items:start;
}

/* LEFT column */
.left-col{padding-top:28px}
.work-title{
  font-family:"FontKedua","FontPertama",sans-serif;
  font-weight:700;
  font-size:32px;
  margin:6px 0 22px;
  color:#5c1833;
  line-height:1.02;
}

/* two-row paragraphs: second row indented */
.work-desc{font-size:15px;color:rgba(92,24,51,0.94);line-height:110%;letter-spacing: -3%;max-width:270px}
.work-desc .row1{margin:0 0 18px 0}
.work-desc .row2{margin:0 0 0 36px} /* menjorok ke dalam */

/* RIGHT column (image and tags) */
.right-col{position:relative;display:flex;align-items:center;justify-content:center;padding:12px 40px}

/* main image area */
.work-image{
  width:820px;
  max-width:88%;
  overflow:hidden;
  background:#fff;
}
.work-image img{display:block;width:100%;height:auto;}

/*POSISI IMAGE PER SLIDENYA (mau diadjust sendiri ndiri)*/
/* SLIDE 1 (SURI) */
[data-key="slide1"] .work-image{
  width: 800px;            /* ukuran area gambar khusus slide1 (sesuaikan jika perlu) */
  overflow: visible;       /* sangat penting: biar rotasi/overflow nggak terpotong */
  margin-right: 50px;      /* geser container sedikit ke kiri/kanan bila perlu */
  margin-bottom: 20px;    /* beri ruang bawah supaya bayangan/bawah gambar tidak terpotong */
}

/* geser isi gambar (lebih presisi) */
[data-key="slide1"] .work-image img{
  transform: translateY(-150px) translateX(-300px);
  transform-origin: center;
  width: 130%;             /* buat sedikit lebih besar agar tampak seperti di mockup */
  transition: transform .45s ease;
}

/* SLIDE 2 (CNY) */
[data-key="slide2"] .work-image{
  width: 800px;            /* ukuran area gambar khusus slide1 (sesuaikan jika perlu) */
  overflow: visible;       /* sangat penting: biar rotasi/overflow nggak terpotong */
  margin-right: 50px;      /* geser container sedikit ke kiri/kanan bila perlu */
  margin-bottom: 20px;    /* beri ruang bawah supaya bayangan/bawah gambar tidak terpotong */
}

[data-key="slide2"] .work-image img{
  transform: translateY(-280px) translateX(10px);
  transform-origin: center;
  width: 80%;             /* buat sedikit lebih besar agar tampak seperti di mockup */
  transition: transform .45s ease;
}

/* gambar jadi absolute sehingga bisa diangkat bebas */
[data-key="slide3"] .work-image img {
  position: absolute;
  right: 80px;           /* geser horizontal visual (sesuaikan) */
  top: -100px;            /* angkat gambar: nilai negatif = naik */
  width: 96%;            /* buat lebih besar agar mirip mockup */
  transform-origin: center;
  pointer-events: none;   /* biar klik arrow/area tidak terhalang */
  transition: transform .35s ease, top .2s ease;
}

/* small tag boxes (neon-ish) */
.tag{
  position:absolute;
  background:#DDF75A;
  color:#5c1833;
  padding:3px 5px;
  font-family:"FontPertama",sans-serif;
  font-size:9px;
  letter-spacing: -3%;
  white-space:nowrap;
  transform:translate(-50%,-50%);
  border: 1px solid #5c1833;
}

/* POSISI TAG PER SLIDE (adjust to visually match screenshots) */
/* SLIDE 1 (Shio) */
[data-key="slide1"] .tag--slide1.t1{ right:64%; top:-1% } /* Booklet: Shio */
[data-key="slide1"] .tag--slide1.t2{ right:66%; top:2% } /* A5 Booklet */
[data-key="slide1"] .tag--slide1.t3{ right:26%; top:32% } /* Adobe inDesign */
[data-key="slide1"] .tag--slide1.t4{ right:23%; top:36% } /* Adobe Photoshop */
[data-key="slide1"] .tag--slide1.t5{ right:37%; top:40% } /* 2024 */

/* SLIDE 2 (DIN) */
[data-key="slide2"] .tag--slide2.t1{ right:75%; top:32% } /* DIN Website */
[data-key="slide2"] .tag--slide2.t2{ right:80%; top:36% } /* website */
[data-key="slide2"] .tag--slide2.t3{ right:83%; top:45% } /* 1920x1080 */

/* RIGHT arrow only (fixed at edge) */
.arrow{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  right:44px;
  width:72px;height:72px;border-radius:32px;border:none;
  background:transparent;color:#5c1833;font-size:44px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:3000;
  font-family:"FontKedua",sans-serif;
  line-height:1;
}
.arrow:active{transform:translateY(-50%) scale(.98)}

/* responsive adjustments */
@media (max-width:1200px){
  .slide-inner{grid-template-columns:340px 1fr}
  .work-image{width:640px}
  .work-title{font-size:40px}
}
@media (max-width:880px){
  .slide-inner{grid-template-columns:1fr;gap:26px}
  .left-col{order:2}
  .right-col{order:1}
  .work-image{max-width:100%;width:100%}
  /* hide tags on small screens (optional) */
  .tag{display:none}
  .arrow{right:18px}
  .work-title{font-size:34px}
  .work-desc .row2{margin-left:0}
}

/* ===== FOOTER ===== */
.footer-section {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;

  /* background image (responsive) */
  background-image: url("homepage-assets/footer.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;               /* COVER = responsif */
  background-position: center 20%;      /* ubah "top" ke % kalau mau crop naik */
  /* background-position: center 20%; */ /* contoh bila mau 'naikkan' crop */

  /* penting: jangan pakai padding negatif */
  padding: 0 0 25px;     /* atas:0, kanan:0, bawah:120px (ubah sesuai kebutuhan) */
  margin-top: 0px;
  /* pastikan footer cukup tinggi untuk menampung rotated panel */
  min-height: 200px;      /* naikkan kalau masih muncul putih (mis. 600px) */
  position: relative;
}

/* container di dalam footer */
.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 130px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  position: relative;
  z-index: 2;            /* konten di atas bg */
  box-sizing: border-box;
}

/* hit me text */
.footer-hit {
  font-family: "FontKedua";
  font-size: 90px;
  font-weight: 70;
  color: #DDF75A;
  transform: rotate(-deg);
  line-height: 0.9;

  /* jangan pakai margin-top besar; kontrol vertikal lewat padding/min-height footer */
  margin: 0;                 /* reset */
  padding-top: 250px;         /* kalau butuh kecilkan/tingkatkan, atur di sini */
}

/* naik/turunkan letter 'u' */
.footer-hit .u-up {
  display: inline-block;
  transform: translateY(-18px) rotate(-7deg);
}

/* ---------- CONTACT columns in footer (new) ---------- */
.footer-right {
  display: flex;
  align-items: left;      /* supaya kolom vertikal center relatif to panel */
  justify-content: flex-start;
  padding-right: 110px;      /* geser kontak sedikit ke kiri / ke dalam */
  padding-top: 280px;
  box-sizing: border-box;
  pointer-events: auto;
  z-index: 90;
}

.contact-details {
  display: flex;
  gap: 80px;                /* jarak antar kolom */
  align-items: left;      /* center vertically inside footer-right */
}

/* each column */
.contact-column {
  display: flex;
  flex-direction: column;
  gap: 20px;                /* jarak antar field di tiap kolom */
  text-align: left;
  min-width: 200px;         /* jaga lebar agar rapi */
  box-sizing: border-box;
}

/* each field */
.contact-item { 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* small label (telp / email etc) */
.contact-item .label {
  font-size: 11px;
  color: #DDF75A;  /* bisa set jadi slightly muted maroon, atau #DDF75A jika mau terang */
  opacity: 0.75;
  margin-bottom: 3px;
}

/* value (nomor / alamat) */
.contact-item .value {
  font-size: 13px;
  color: #DDF75A;
  line-height: -3%;
  letter-spacing: 0;
}

.contact-item a.value {
  color: #DDF75A;
  text-decoration: none;
}

.contact-item a.value:hover {
  opacity: 0.7;
}

/* Responsive: stack column on small screens */
@media (max-width: 980px) {
  .footer-right { padding-right: 24px; }
  .contact-details {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .contact-column { min-width: 100%; text-align: left; }
  .contact-item .label { text-align: left; }
  .contact-item .value { text-align: left; }
}


/* responsive tweaks (sesuaikan bila perlu) */
@media (max-width: 980px) {
  .footer-section { padding: 40px 20px 90px; min-height: 420px; background-position: center center; }
  .footer-hit { font-size: 60px; transform: rotate(-6deg); padding-top: 16px; }
  .contact-panel::before { top: 28px; height: 320px; width: calc(100% - 10px); }
}

/* ===== quick fix: kecilin gap antara slides dan footer ===== */

/* kurangi padding bawah tiap slide (dari 90 ke 48) */
.slide {
  padding-bottom: 30px !important;
}

/* SLIDE3 spacer: set default yg moderat (ubah angka kalau masih perlu) */
[data-key="slide3"] .work-image::after {
  content: "";
  display: block;
  width: 1px;
  height: 200px !important; /* <--- turunkan jika gap masih besar (coba 320/300) */
  visibility: hidden;
}

/* turunkan file footer padding-top yang terlalu besar (bikin footer 'naik') */
.footer-hit { padding-top: 300px !important; }      /* dari 250 -> 120 */
.footer-right { padding-top: 300px !important; }    /* dari 280 -> 120 */

/* kurangi footer bottom padding */
.footer-section { padding: 0 0 36px !important; min-height: 220px !important; }

/* pastikan viewport slides tidak memaksa tinggi yang besar */
.slides-viewport {
  min-height: auto !important;
  height: auto !important;
  padding-top: calc(70px + 28px) !important;
}

/* --- LABEL KIRI ATAS --- */
.top-left-label {
  position: fixed;
  top: 40px;       /* geser vertikal */
  left: 60px;      /* geser horizontal */
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.top-left-label .label-text {
  font-family: "FontPertama", sans-serif;
  font-size: 10px;
  letter-spacing: -3%;
  color: #5c1833;
  opacity: 0.8;
}

.top-left-label .label-line {
  display: block;
  width: 1.3px;
  height: 70px;            /* panjang garis */
  background-color: #5c1833;
  transform: rotate(-20deg);
  transform-origin: top;
  opacity: 0.8;
}

/* ---------- FLOATING DOTS (for layout page) ---------- */
/* container inside .work-image (positioned by script) */
.work-image { position: relative; overflow: visible; }

/* dot elements */
.layout-float-dot {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5c1833;
  box-shadow: 0 8px 20px rgba(92,24,51,0.07);
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 1;
  transform-origin: center;
}

.slide-dot {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #5c1833;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(92,24,51,0.1);
  pointer-events: none;
}

/* make dots slightly smaller on narrow screens */
@media (max-width: 980px) {
  .layout-float-dot { width: 10px; height: 10px; }
}