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

  /* Giant BG text */
  .about-bg-text {
    position: absolute;
    top: 40px;
    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,.28);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    line-height: 1;
  }

  /* Inner layout: 2 kolom */
  .about-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
  }

  /* ── LEFT: Photos ── */
  .about-photos {
    position: relative;
    height: clamp(340px, 50vw, 560px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Star decorations */
  .about-star {
    position: absolute;
    font-size: clamp(18px, 3vw, 32px);
    color: var(--pink-deep);
    pointer-events: none;
    animation: fblob 6s ease-in-out infinite;
    z-index: 5;
  }
  .about-star--1 { top: 8%;  left: 8%;  font-size: clamp(22px, 3.5vw, 38px); animation-delay: 0s; }
  .about-star--2 { top: 12%; right: 6%; font-size: clamp(16px, 2.5vw, 26px); animation-delay: 1.2s; }
  .about-star--3 { bottom: 10%; right: 18%; font-size: clamp(20px, 3vw, 30px); animation-delay: 2.4s; }

  /* Polaroid base */
  .about-polaroid {
    position: absolute;
    background: #fff;
    padding: clamp(8px, 1.5vw, 14px) clamp(8px, 1.5vw, 14px) clamp(28px, 4vw, 44px);
    border-radius: 4px;
    box-shadow:
      0 8px 32px rgba(196,88,128,.18),
      0 2px 8px rgba(0,0,0,.08);
    width: clamp(150px, 22vw, 240px);
    transition: transform .4s var(--spring);
  }
  .about-polaroid:hover { transform: rotate(0deg) scale(1.04) !important; z-index: 10 !important; }

  .about-polaroid--back {
    transform: rotate(-6deg);
    top: 4%;
    left: 4%;
    z-index: 2;
  }
  .about-polaroid--front {
    transform: rotate(5deg);
    bottom: 4%;
    right: 4%;
    z-index: 3;
  }

  .about-polaroid-img {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 2px;
    background: var(--pink-light);
  }
  .about-polaroid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }

  .about-polaroid-caption {
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(9px, 1.1vw, 13px);
    color: var(--text-mid);
    margin-top: clamp(6px, 1vw, 10px);
    letter-spacing: .5px;
    font-weight: 400;
  }

  /* ── RIGHT: Info ── */
  .about-info {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 22px);
  }

  /* Badge "about me" pojok kanan */
  .about-badge {
    display: inline-block;
    align-self: flex-end;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pink-deep);
    border: 1.5px solid var(--pink-mid);
    border-radius: 999px;
    padding: 4px 14px;
  }

  /* Nama */
  .about-name-block { display: flex; flex-direction: column; gap: 0; margin-top: 200px; }
  .about-hello {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(12px, 1.4vw, 16px);
    font-weight: 300;
    color: var(--text-soft);
    font-style: italic;
    /* border pill */
    display: inline-block;
    border: 1px solid rgba(196,88,128,.3);
    border-radius: 999px;
    padding: 3px 14px;
    width: fit-content;
    margin-bottom: 4px;
  }

  .about-name {
    font-family: 'Playfair Display', serif;
    line-height: .95;
    margin: 0;
  }
  .about-name em {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: clamp(22px, 5vw, 40px);
    font-weight: 900;
    font-style: italic;
    color: var(--pink-deep);
    letter-spacing: -2px;
  }
  .about-name span {
    display: block;
    font-size: clamp(28px, 4.5vw, 60px);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px var(--pink-deep);
    letter-spacing: -1px;
  }

  /* Bio */
  .about-bio {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .about-bio p {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(12px, 1.2vw, 14px);
    line-height: 1.7;
    color: var(--text-mid);
  }
  .about-bio strong { color: var(--pink-deep); font-weight: 500; }

  /* Tags tahun, zodiak, genZ */
  .about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .about-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(11px, 1.1vw, 13px);
    font-weight: 500;
    color: var(--pink-deep);
    background: rgba(196,88,128,.10);
    border: 1px solid rgba(196,88,128,.25);
    border-radius: 999px;
    padding: 4px 14px;
    letter-spacing: .3px;
  }

  /* Kontak */
  .about-contacts {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .about-contacts li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(11px, 1.2vw, 13px);
    color: var(--text-mid);
  }
  .about-contact-icon { font-size: 14px; flex-shrink: 0; }
  .about-contacts a {
    color: var(--pink-deep);
    text-decoration: none;
    transition: opacity .2s;
  }
  .about-contacts a:hover { opacity: .7; }

  /* Education */
  .about-section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 900;
    font-style: italic;
    color: var(--text-dark);
    margin: 0 0 10px;
    letter-spacing: -.3px;
  }

  .about-edu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .about-edu-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .about-edu-school {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: 600;
    color: var(--pink-deep);
  }
  .about-edu-year {
    font-size: clamp(10px, 1vw, 12px);
    color: var(--text-soft);
    letter-spacing: .5px;
  }
  .about-edu-major {
    font-size: clamp(10px, 1vw, 12px);
    color: var(--text-mid);
  }

  /* Skills row */
  .about-skills-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
  }

  /* Software skill icons */
  .about-skill-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .about-skill-icon {
    width: clamp(38px, 5vw, 52px);
    height: clamp(38px, 5vw, 52px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(9px, 1vw, 11px);
    font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    transition: transform .3s var(--spring);
    cursor: default;
  }
  .about-skill-icon:hover { transform: translateY(-4px) scale(1.08); }
  .about-skill-icon--html  { background: linear-gradient(135deg,#e44d26,#f16529); }
  .about-skill-icon--css   { background: linear-gradient(135deg,#264de4,#2965f1); }
  .about-skill-icon--js    { background: linear-gradient(135deg,#f0db4f,#e6b800); color: #333; }
  .about-skill-icon--react { background: linear-gradient(135deg,#00bcd4,#0097a7); }

  /* Personal skill tags */
  .about-personal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  .about-personal-tags span {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(9px, 1vw, 11px);
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, var(--pink-mid), var(--pink-deep));
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
    letter-spacing: .3px;
  }

  /* ── Stiker dekorasi pojok kanan bawah ── */
  .about-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;
  }
  .about-sticker img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ============================================================
     ABOUT — RESPONSIVE
  ============================================================ */

  /* Tablet ≤ 860px */
  @media (max-width: 860px) {
    .about-inner {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .about-photos {
      height: clamp(280px, 60vw, 400px);
      max-width: 480px;
      margin: 0 auto;
      width: 100%;
    }
    .about-info { align-items: flex-start; }
    .about-skills-row { grid-template-columns: 1fr 1fr; }
  }

  /* Mobile ≤ 640px */
  @media (max-width: 640px) {
    .about {
      padding: 50px 18px 60px;
      margin-top: -134px;
    }
    .about-photos {
      height: clamp(260px, 75vw, 360px);
      margin-top: 70px;
    }
    .about-polaroid {
      width: clamp(130px, 38vw, 190px);
    }
    .about-polaroid--back  { top: 20px; left: 2%; }
    .about-polaroid--front { bottom: 2%; right: 30px; z-index: 4; }
    .about-edu-grid        { grid-template-columns: 1fr; gap: 10px; }
    .about-skills-row      { grid-template-columns: 1fr; gap: 16px; }
    .about-bio p           { font-size: 13px; }

    /* FIX: range sempit + nilai fixed agar konsisten di semua Android */
    .about-name em         { font-size: clamp(28px, 7vw, 42px); gap: 8px; }
    .about-name span       { font-size: clamp(22px, 6.5vw, 36px); }
    .about-name-block      { margin-top: 0; }

    .about-bg-text         { top: 25px; }
    .about-sticker         { width: clamp(170px, 22vw, 130px); right: -15px; bottom: -38px; }
  }

  /* Very small ≤ 380px */
  @media (max-width: 380px) {
    .about-photos   { height: 240px; }
    .about-polaroid { width: clamp(110px, 34vw, 150px); }
    .about-name em  { font-size: 26px; }
    .about-name span { font-size: 22px; }
  }