/* =============================================
   THE ICON! CREATIVE SERVICES – projects.css
   Spesifik untuk projects.php
   Requires: style.css
   ============================================= */

/* =============================================
   HERO SECTION
   ============================================= */

.proj-hero {
  position: relative;
  background: #0d0d0d;
  min-height: 750px;
  overflow: hidden;
  padding-top: 180px; /* ruang navbar + nav-links */
}

/* Image webp full width, posisi dari kiri-bawah navbar */
.proj-hero__collage {
  position: absolute;
  left: 0;        /* rapat kiri */
  top: 10px;     /* sama dengan padding-top hero */
  width: 100%;    
  z-index: 1;
}

@media screen and (max-width: 1366px) {
	.proj-hero__collage {
	  position: absolute;
	  left: 0;
	  top: 40px;
	  width: 100%;
	  z-index: 1;
	}
}

.proj-hero__collage img {
  width: 100%;
  height: auto;   /* ← pakai auto supaya proporsional */
  display: block;
  object-fit: unset; /* ← reset object-fit */
}

/* Teks kanan overlay */
.proj-hero__content {
  position: absolute;
  left: 63%;        /* mulai setelah image */
  padding-left: 50px; /* spasi 40px dari image */
  top: 63%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: left;
}

.proj-hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.proj-hero__title span {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 65px;
  line-height: 1;
  letter-spacing: -1px;
}

.proj-hero__title--white { color: #ffffff; }
.proj-hero__title--lime  { color: var(--lime); }

/* =============================================
   FEATURED PROJECTS
   ============================================= */

.proj-featured {
  display: flex;
  flex-direction: column;
}

/* Setiap project item — sticky */
.proj-item {
  position: sticky;
  padding: 50px 0;
}

.proj-item:nth-child(1) { top: 0;   z-index: 1; }
.proj-item:nth-child(2) { top: 20px; z-index: 2; }
.proj-item:nth-child(3) { top: 40px; z-index: 3; }

.proj-item--purple { background: var(--purple); }
.proj-item--lime   { background: var(--lime); }
.proj-item--pink   { background: var(--pink); }

.proj-item__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 40px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;  /* ← column supaya tombol di bawah */
  overflow: hidden;
  min-height: 360px;
}

/* Wrapper foto + konten dalam satu row */
.proj-item__body {
  display: flex;
  align-items: stretch;
  flex: 1;
  gap: 0;
}

/* Foto */
.proj-item__photo {
  flex: 0 0 50%;
  overflow: hidden;
}

.proj-item__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* Konten */
.proj-item__content {
  flex: 1;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.proj-item__logo {
  /*max-height: 50px;*/
  max-width: 180px;
  object-fit: contain;
  margin-bottom: 4px;
}

.proj-item__client {
  font-size: 13px;
  font-weight: 800;
  color: var(--purple);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.proj-item--lime .proj-item__client { color: var(--purple); }
.proj-item--pink .proj-item__client { color: var(--purple); }

.proj-item__title {
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 900;
  color: #111;
  line-height: 1.2;
}

/* Garis pemisah */
.proj-item__divider {
  height: 1.5px;
  background: #e0e0e0;
  margin: 4px 0;
}

/* Meta info */
.proj-item__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proj-item__meta-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.proj-item__meta-key {
  font-size: 20px;
  font-weight: 800;
  color: var(--purple);
  letter-spacing: 0.8px;
  min-width: 120px;
  padding-top: 2px;
}

.proj-item__meta-val {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
  flex: 1;
}

/* CTA button full width — row terpisah di bawah */
.proj-item__btn {
  width: 100%;
  text-align: center;
  margin-top: 30px;
  font-size: 20px;
  font-weight: 600;
  padding: 14px 20px;
  display: block;
}

/* ===== PROJECT LINKS ===== */
.proj-item__links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.project-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}

.project-link img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: opacity 0.2s;
  margin-top: -5px;
}

.project-link:hover img { opacity: 0.4; }

/* tooltip yutup / ig */
.project-link {
  position: relative;
}

.project-link__tooltip {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%);
  background: #FF6600;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding: 10px 10px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  border: solid 1px #FF6600;
}

.project-link__tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #FF6600;
}

@keyframes tooltip-nudge {
  0%    { transform: translateY(-50%) translateX(0); }   /* diam 2 detik */
  40%   { transform: translateY(-50%) translateX(0); }
  45%   { transform: translateY(-50%) translateX(-8px); } /* tabrak kiri */
  50%   { transform: translateY(-50%) translateX(0); }   /* balik */
  55%   { transform: translateY(-50%) translateX(-8px); } /* tabrak kiri 2 */
  60%   { transform: translateY(-50%) translateX(0); }   /* balik */
  100%  { transform: translateY(-50%) translateX(0); }   /* diam 2 detik, loop */
}

.project-link__tooltip.visible {
  opacity: 1;
  animation: tooltip-nudge 5s 2s infinite;
}

/* =============================================
   MORE TO SEE
   ============================================= */

.proj-more {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  padding: 80px 0 60px;
}

.proj-more__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.proj-more__header {
  margin-top: -40px;
  margin-bottom: 50px;
  text-align: center;
}

.proj-more__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 100px;
  line-height: 0.85;
  letter-spacing: 1px;
}

.proj-more__title--black  { color: #111; display: block; }
.proj-more__title--purple { color: var(--purple); display: block; }

/* Slider area */
.proj-more__slider-area {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Arrow */
.proj-more__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #bbb;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
  padding: 0;
  margin-top: -210px;
}

.proj-more__arrow:hover {
  border-color: var(--purple);
  color: var(--purple);
}

/* Track */
.proj-more__track {
  flex: 1;
  overflow: hidden;
  cursor: grab;
}

.proj-more__track:active { cursor: grabbing; }

/* Track inner — semua slide jejer horizontal */
.proj-more__track-inner {
  display: flex;
  gap: 24px;
  will-change: transform;
}

/* Slide */
.proj-more__slide {
  flex: 0 0 100%;
  display: flex;
  gap: 24px;
}

/* Card */
.proj-more__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  text-align: center;
}

.proj-more__card-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
}

.proj-more__card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.proj-more__card:hover .proj-more__card-photo img {
  transform: scale(1.05);
}

.proj-more__card-cat {
  font-size: 20px;
  font-weight: 800;
  color: var(--purple);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.proj-more__card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
}

/* Empty card placeholder — jaga layout 3 kolom */
.proj-more__card--empty {
  flex: 1;
  pointer-events: none;
  visibility: hidden;
}

/* Dots */
.proj-more__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.proj-more__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: none;
}

.proj-more__dot.active {
  background: var(--purple);
  transform: scale(1.3);
}

/* =============================================
   RESPONSIVE
   ============================================= */

/* ===== TABLET 768px ===== */
@media (max-width: 768px) {

  /* HERO */
  .proj-hero {
    min-height: auto;
    padding-top: 80px;
    overflow: visible;
  }

  .proj-hero__collage {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 280px;
    overflow: hidden;
  }

  .proj-hero__collage img {
    width: 550px;
    height: 100%;
    object-fit: cover;
    object-position: left center; /* ← ambil area kiri-tengah */
  }

  .proj-hero__content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    padding: 24px 24px 40px;
    text-align: left;
    margin-top: -40px; /* ← overlap sedikit ke atas foto */
    z-index: 2;
  }

  .proj-hero__title { align-items: flex-start; }
  .proj-hero__title span { font-size: 52px; }

  /* FEATURED PROJECTS */
  .proj-item {
    position: relative; /* ← nonaktifkan sticky */
    top: auto !important;
    padding: 20px 16px;
  }

  .proj-item__inner {
    padding: 24px 20px;
    border-radius: 16px;
    min-height: auto;
  }

  .proj-item__body { flex-direction: column; }

  .proj-item__photo {
    flex: none;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
  }

  .proj-item__content {
    padding: 20px 0 0;
    gap: 8px;
  }

  .proj-item__logo   { max-width: 70px; }
  .proj-item__title  { font-size: 26px; }

  .proj-item__meta-key { font-size: 13px; min-width: 90px; }
  .proj-item__meta-val { font-size: 13px; }

  .proj-item__btn {
    font-size: 16px;
    padding: 12px 16px;
    margin-top: 16px;
  }

  /* MORE TO SEE */
  .proj-more { padding: 90px 0 40px; }

  .proj-more__title { font-size: 64px; }

  .proj-more__arrow {
    width: 36px;
    height: 36px;
    font-size: 22px;
    margin-top: -60px;
  }

  .proj-more__slide {
    flex-direction: column;
    gap: 16px;
  }

  .proj-more__card-photo { aspect-ratio: 16/9; }
  .proj-more__card-cat   { font-size: 13px; margin-top: -12px;}
  .proj-more__card-title { font-size: 22px; }
  
	.project-link img {
	  margin-top: -2px;
	  margin-left: -2px;
	} 
}

/* ===== MOBILE 480px ===== */
@media (max-width: 480px) {

  .proj-hero__collage { height: 220px; }
  .proj-hero__content { padding: 20px 16px 32px; }
  .proj-hero__title span { font-size: 40px; }

  .proj-item { padding: 16px 12px; }
  .proj-item__inner { padding: 20px 16px; }
  .proj-item__photo { height: 180px; }
  .proj-item__title { font-size: 22px; }

  .proj-more__title { font-size: 48px; }
  .proj-more__card-title { font-size: 18px; }
  
	.project-link img {
	  margin-top: -3px;
	  margin-left: -2px;
	}   
}