/* ============================================================
     PROJECTS SECTION
  ============================================================ */
  .projects {
    position: relative;
    padding: clamp(60px, 10vw, 120px) clamp(20px, 6vw, 72px) clamp(60px, 10vw, 100px);
    background: linear-gradient(150deg, #fdf0e8 0%, #fff0f5 40%, #fce8ef 100%);
    overflow: hidden;
  }

  /* BG text */
  .proj-bg-text {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(80px, 18vw, 220px);
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(196,88,128,.22);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    line-height: 1;
  }

  /* ── Header ── */
  .proj-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: clamp(36px, 5vw, 60px);
  }

  .proj-eyebrow {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(10px, 1.2vw, 13px);
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--pink-deep);
    background: rgba(196,88,128,.10);
    border: 1px solid rgba(196,88,128,.22);
    border-radius: 999px;
    padding: 5px 18px;
    margin-bottom: 14px;
    margin-top: 170px;
  }

  .proj-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 7vw, 86px);
    font-weight: 900;
    line-height: .95;
    color: var(--text-dark);
    letter-spacing: -2px;
    margin: 25px 0 14px;
  }
  .proj-title em {
    font-style: italic;
    color: var(--pink-deep);
  }

  .proj-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(12px, 1.3vw, 15px);
    color: var(--text-soft);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
  }

  /* ── Cards Slider ── */
  .proj-grid {
    position: relative;
    z-index: 1;
    display: flex;
    gap: clamp(16px, 2.5vw, 28px);
    max-width: 100%;
    margin: 0 auto clamp(40px, 6vw, 64px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px clamp(20px, 6vw, 72px) 20px;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
  }
  .proj-grid::-webkit-scrollbar { display: none; }
  .proj-grid:active { cursor: grabbing; }

  /* ── Card ── */
  .proj-card {
    flex: 0 0 clamp(280px, 38vw, 480px);
    background: rgba(255, 248, 251, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255,255,255,.92);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 28px rgba(196,88,128,.10), inset 0 1px 0 rgba(255,255,255,.95);
    transition: transform .35s var(--spring), box-shadow .35s var(--spring);
  }
  .proj-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 56px rgba(196,88,128,.18), inset 0 1px 0 rgba(255,255,255,.98);
  }

  /* Image area */
  .proj-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg, #fce4f0 0%, #f5c6de 50%, #eeb5d0 100%);
  }
  .proj-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--smooth);
    /* Bila gambar belum ada/error, tetap terlihat bagus */
    background: transparent;
  }
  /* Shimmer placeholder saat gambar load */
  .proj-card-img img:not([src]),
  .proj-card-img img[src=""],
  .proj-card-img img[src*="project"] {
    /* tidak override — biarkan gambar tampil normal */
  }
  /* Subtle bottom fade agar card body nyambung ke image */
  .proj-card-img::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(255,248,251,.55));
    pointer-events: none;
    z-index: 1;
  }
  .proj-card:hover .proj-card-img img {
    transform: scale(1.06);
  }

  /* Overlay on hover */
  .proj-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(196,88,128,.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s var(--smooth);
  }
  .proj-card:hover .proj-card-overlay { opacity: 1; }

  .proj-overlay-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.2);
    border: 1.5px solid rgba(255,255,255,.6);
    border-radius: 999px;
    padding: 10px 22px;
    text-decoration: none;
    transition: background .2s;
  }
  .proj-overlay-btn:hover { background: rgba(255,255,255,.35); }

  /* Card number badge */
  .proj-card-num {
    position: absolute;
    top: 12px; left: 14px;
    font-family: 'Playfair Display', serif;
    font-size: 11px;
    font-weight: 900;
    font-style: italic;
    color: rgba(255,255,255,.9);
    background: rgba(196,88,128,.55);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 3px 10px;
    letter-spacing: .5px;
  }

  /* Card body */
  .proj-card-body {
    padding: clamp(16px, 2.5vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }

  .proj-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .proj-card-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -.3px;
    margin: 0;
    line-height: 1.2;
  }

  .proj-card-type {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pink-deep);
    background: rgba(196,88,128,.10);
    border: 1px solid rgba(196,88,128,.22);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .proj-card-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(11px, 1.1vw, 13px);
    line-height: 1.65;
    color: var(--text-mid);
    margin: 0;
    flex: 1;
  }

  /* Tech chips */
  .proj-tech-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .proj-tech {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-mid);
    background: rgba(196,88,128,.07);
    border: 1px solid rgba(196,88,128,.18);
    border-radius: 999px;
    padding: 3px 10px;
    letter-spacing: .3px;
    white-space: nowrap;
  }

  /* Links */
  .proj-links {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
  }

  .proj-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(11px, 1.1vw, 13px);
    font-weight: 500;
    text-decoration: none;
    border-radius: 999px;
    padding: 7px 16px;
    transition: transform .3s var(--spring), box-shadow .3s var(--spring);
  }
  .proj-link:hover { transform: translateY(-2px); }

  .proj-link--github {
    color: var(--text-mid);
    background: rgba(196,88,128,.08);
    border: 1px solid rgba(196,88,128,.20);
  }
  .proj-link--github:hover {
    background: rgba(196,88,128,.14);
  }

  .proj-link--demo {
    color: #fff;
    background: linear-gradient(135deg, var(--pink-mid), var(--pink-deep));
    box-shadow: 0 4px 14px rgba(196,88,128,.35);
  }
  .proj-link--demo:hover {
    box-shadow: 0 8px 24px rgba(196,88,128,.50);
  }

  /* Auto-scroll pause on hover/drag */
  .proj-grid.is-dragging { scroll-snap-type: none; }

  /* Slider dot indicators */
  .proj-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: -clamp(20px, 3vw, 30px);
    margin-bottom: clamp(24px, 4vw, 40px);
    position: relative;
    z-index: 1;
  }
  .proj-slider-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: rgba(196,88,128,.25);
    border: none; cursor: pointer; padding: 0;
    transition: background .3s, width .3s;
  }
  .proj-slider-dot.active {
    background: var(--pink-deep);
    width: 24px;
  }

  /* Fade edges */
  .proj-slider-wrap {
    position: relative;
    z-index: 1;
  }
  .proj-slider-wrap::before,
  .proj-slider-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 20px;
    width: clamp(32px, 6vw, 72px);
    z-index: 2;
    pointer-events: none;
  }
  .proj-slider-wrap::before {
    left: 0;
    background: linear-gradient(to right, #fdf0e8, transparent);
  }
  .proj-slider-wrap::after {
    right: 0;
    background: linear-gradient(to left, #fce8ef, transparent);
  }

  /* ── CTA ── */
  .proj-cta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .proj-cta-text {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(13px, 1.3vw, 16px);
    color: var(--text-soft);
    font-style: italic;
  }

  .proj-cta-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--pink-mid), var(--pink-deep));
    border-radius: 999px;
    padding: 14px 32px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(196,88,128,.38), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .3s var(--spring), box-shadow .3s var(--spring);
    letter-spacing: .3px;
  }
  .proj-cta-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 36px rgba(196,88,128,.50);
  }
  .proj-cta-btn:active { transform: scale(.97); }

  /* ── Stiker pojok kanan bawah ── */
  .proj-sticker {
    position: absolute;
    bottom: clamp(-80px, -2vw, -56px);
    right: -9px;
    width: clamp(250px, 14vw, 300px);
    z-index: 2;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 8px 18px rgba(196,88,128,.22));
    transform-origin: bottom right;
    transform: rotate(8deg);
  }
  .proj-sticker img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ============================================================
     PROJECTS — RESPONSIVE
  ============================================================ */

  /* Tablet ≤ 860px */
  @media (max-width: 860px) {
    .proj-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .proj-sticker {
      width: clamp(250px, 14vw, 300px);
      bottom: -56px;
    }
  }

  /* Mobile ≤ 640px */
  @media (max-width: 640px) {
    .projects {
      padding: 50px 0px 60px;
    }
    .proj-grid {
      padding: 12px 18px 20px;
      gap: 14px;
    }
    .proj-card      { flex: 0 0 82vw; }
    .proj-eyebrow   { margin-top: 70px; font-size: clamp(8px, 2.8vw, 10px); letter-spacing: 2px; padding: 4px 13px; }
    .proj-title     { margin-top: 10px; }
    .proj-card-body { padding: 16px; gap: 10px; }
    .proj-links     { flex-wrap: wrap; gap: 8px; }
    .proj-link      { font-size: 11px; padding: 6px 14px; }
    .proj-sticker {
      width: clamp(170px, 22vw, 130px);
      bottom: -38px;
      right: -15px;
      transform: rotate(6deg);
    }
  }

  /* Very small ≤ 380px */
  @media (max-width: 380px) {
    .proj-title     { font-size: 32px; }
    .proj-card      { border-radius: 18px; }
    .proj-card-name { font-size: 15px; }
    .proj-sticker   { width: 75px; bottom: -10px; }
  }