/* =====================================================
       RESET
    ===================================================== */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      scroll-behavior: smooth;
    }

    body {
      font-family: "Poppins", sans-serif;
      color: #21445c;
      background:
        radial-gradient(circle at 10% 10%, #c9efff 0%, transparent 25%),
        radial-gradient(circle at 90% 20%, #dcefff 0%, transparent 25%),
        radial-gradient(circle at 20% 90%, #d4f5ff 0%, transparent 25%),
        linear-gradient(135deg, #f8fdff, #e9f8ff, #f7fcff);

      min-height: 100vh;
      overflow-x: hidden;
    }


    /* =====================================================
       BACKGROUND BUBBLES
    ===================================================== */

    .bubble {
      position: fixed;
      border-radius: 50%;
      background: rgba(110, 204, 247, .18);
      filter: blur(1px);
      z-index: -1;
      animation: floating 8s infinite ease-in-out;
    }

    .bubble.one {
      width: 180px;
      height: 180px;
      top: 10%;
      left: -70px;
    }

    .bubble.two {
      width: 250px;
      height: 250px;
      right: -100px;
      top: 40%;
      animation-delay: 2s;
    }

    .bubble.three {
      width: 130px;
      height: 130px;
      bottom: 5%;
      left: 20%;
      animation-delay: 4s;
    }

    @keyframes floating {
      0%, 100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-30px);
      }
    }


    /* =====================================================
       NAVBAR
    ===================================================== */

    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;

      display: flex;
      justify-content: space-between;
      align-items: center;

      padding: 18px 8%;

      background: rgba(255, 255, 255, .72);
      backdrop-filter: blur(18px);

      border-bottom: 1px solid rgba(105, 192, 230, .2);
    }

    .logo {
      font-size: 25px;
      font-weight: 800;
      color: #2585bb;
    }

    .logo span {
      color: #71cdf7;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 28px;
    }

    nav a {
      text-decoration: none;
      color: #416b82;
      font-size: 13px;
      font-weight: 600;
      transition: .3s;
    }

    nav a:hover {
      color: #159bdc;
    }


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

    .hero {
      min-height: 100vh;

      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 70px;

      padding: 130px 10% 80px;
    }

    .hero-content {
      max-width: 650px;
    }

    .mini-title {
      color: #32a7e3;
      letter-spacing: 4px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .hero h1 {
      font-size: clamp(42px, 6vw, 75px);
      line-height: 1.08;
      color: #193f57;
    }

    .hero h1 span {
      color: #55bdf0;
    }

    .hero-description {
      margin-top: 25px;
      max-width: 570px;

      color: #6c8798;
      line-height: 1.9;
      font-size: 15px;
    }


    /* =====================================================
       BUTTON
    ===================================================== */

    .buttons {
      margin-top: 32px;

      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn {
      text-decoration: none;
      padding: 13px 23px;
      border-radius: 30px;
      font-size: 13px;
      font-weight: 600;

      transition: .3s;
    }

    .btn-primary {
      color: white;

      background:
        linear-gradient(
          135deg,
          #35a9e8,
          #7bd5ff
        );

      box-shadow:
        0 12px 30px rgba(43, 167, 226, .25);
    }

    .btn-primary:hover {
      transform: translateY(-5px);
    }

    .btn-outline {
      color: #2988b8;
      background: rgba(255,255,255,.65);
      border: 1px solid #9edcf5;
    }

    .btn-outline:hover {
      background: #e6f8ff;
      transform: translateY(-5px);
    }


    /* =====================================================
       PROFILE PHOTO
    ===================================================== */

    .profile-wrapper {
      position: relative;
    }

    .profile-card {
      width: 350px;
      height: 430px;

      padding: 11px;

      border-radius: 55px;

      background:
        linear-gradient(
          145deg,
          #d5f4ff,
          white
        );

      box-shadow:
        0 30px 70px rgba(48, 158, 207, .25);

      transform: rotate(3deg);

      cursor: pointer;

      transition: .5s;
    }

    .profile-card:hover {
      transform:
        rotate(0deg)
        translateY(-12px)
        scale(1.02);
    }

    .profile-card img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      border-radius: 45px;
    }

    .photo-badge {
      position: absolute;

      bottom: -20px;
      left: 50%;

      transform: translateX(-50%);

      background: white;

      padding: 11px 20px;

      border-radius: 30px;

      color: #2689b9;

      font-size: 12px;
      font-weight: 600;

      box-shadow:
        0 10px 30px rgba(60, 150, 190, .18);

      white-space: nowrap;
    }

    .sparkle {
      position: absolute;
      font-size: 30px;
      animation: spin 4s linear infinite;
    }

    .sparkle.one {
      top: -35px;
      right: -25px;
    }

    .sparkle.two {
      bottom: 15px;
      left: -45px;
      animation-delay: 1s;
    }

    @keyframes spin {
      0%, 100% {
        transform: rotate(0deg) scale(1);
      }

      50% {
        transform: rotate(20deg) scale(1.15);
      }
    }


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

    section {
      padding: 100px 9%;
    }

    .section-title {
      text-align: center;
      margin-bottom: 55px;
    }

    .section-title small {
      color: #31a7e2;
      letter-spacing: 4px;
      font-size: 11px;
      font-weight: 700;
    }

    .section-title h2 {
      margin-top: 7px;
      color: #204b64;
      font-size: 38px;
    }

    .section-title p {
      color: #7a94a3;
      font-size: 14px;
      margin-top: 8px;
    }


    /* =====================================================
       QUICK INFO
    ===================================================== */

    .quick-info {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .info-card {
      padding: 30px 20px;
      text-align: center;

      border-radius: 25px;

      background: rgba(255,255,255,.72);

      border: 1px solid rgba(130,210,240,.25);

      box-shadow:
        0 15px 40px rgba(63, 147, 181, .08);

      transition: .35s;
    }

    .info-card:hover {
      transform: translateY(-10px);
      background: rgba(255,255,255,.95);
    }

    .info-card .emoji {
      font-size: 35px;
      margin-bottom: 12px;
    }

    .info-card h3 {
      font-size: 15px;
      color: #2c6987;
    }

    .info-card p {
      color: #7d96a5;
      font-size: 12px;
      margin-top: 7px;
    }


    /* =====================================================
       BIODATA POPUP
    ===================================================== */

    .modal {
      display: none;

      position: fixed;

      inset: 0;

      z-index: 3000;

      background:
        rgba(19, 67, 91, .55);

      backdrop-filter: blur(10px);

      align-items: center;
      justify-content: center;

      padding: 20px;
    }

    .modal.active {
      display: flex;
      animation: fadeIn .3s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .modal-box {
      position: relative;

      width: min(900px, 100%);

      max-height: 90vh;

      overflow-y: auto;

      padding: 40px;

      border-radius: 35px;

      background:
        linear-gradient(
          135deg,
          #ffffff,
          #effaff
        );

      box-shadow:
        0 30px 90px rgba(14, 80, 110, .3);

      animation: popup .4s ease;
    }

    @keyframes popup {
      from {
        transform: scale(.8) translateY(30px);
      }

      to {
        transform: scale(1) translateY(0);
      }
    }

    .close {
      position: absolute;

      top: 18px;
      right: 22px;

      width: 40px;
      height: 40px;

      border: none;

      border-radius: 50%;

      background: #e1f6ff;

      color: #2585b4;

      font-size: 20px;

      cursor: pointer;
    }

    .modal-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .modal-header h2 {
      color: #237aa5;
      font-size: 30px;
    }

    .modal-header p {
      color: #7893a2;
      font-size: 13px;
    }


    /* BIODATA GRID */

    .biodata-grid {
      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 15px;
    }

    .biodata-item {
      padding: 20px;

      border-radius: 18px;

      background: white;

      border: 1px solid #d9f2fb;
    }

    .biodata-item span {
      display: block;

      color: #43aede;

      font-size: 11px;

      font-weight: 600;

      margin-bottom: 6px;
    }

    .biodata-item strong {
      color: #315b70;
      font-size: 14px;
    }


    /* =====================================================
       EDUCATION
    ===================================================== */

    .education {
      background:
        rgba(218, 246, 255, .4);
    }

    .timeline {
      max-width: 800px;
      margin: auto;
      position: relative;
    }

    .timeline::before {
      content: "";

      position: absolute;

      left: 17px;

      top: 0;
      bottom: 0;

      width: 2px;

      background:
        linear-gradient(
          #53bced,
          #cbefff
        );
    }

    .timeline-item {
      position: relative;

      padding-left: 60px;

      margin-bottom: 30px;
    }

    .dot {
      position: absolute;

      left: 7px;
      top: 5px;

      width: 22px;
      height: 22px;

      border-radius: 50%;

      background: #54bced;

      border: 5px solid #e6f9ff;

      box-shadow:
        0 0 0 3px #b5e7fa;
    }

    .timeline-card {
      padding: 25px;

      background:
        rgba(255,255,255,.8);

      border-radius: 22px;

      box-shadow:
        0 10px 35px rgba(65, 145, 180, .08);

      transition: .3s;
    }

    .timeline-card:hover {
      transform: translateX(8px);
    }

    .timeline-card span {
      color: #36a8df;
      font-size: 12px;
      font-weight: 700;
    }

    .timeline-card h3 {
      color: #285770;
      margin: 7px 0;
    }

    .timeline-card p {
      color: #7893a3;
      font-size: 13px;
    }


    /* =====================================================
       FAVORITE SECTION
    ===================================================== */

    .favorite-intro {
      text-align: center;

      color: #728d9c;

      max-width: 650px;

      margin:
        -25px auto 45px;

      font-size: 14px;
    }

    .favorite-grid {
      display: grid;

      grid-template-columns:
        repeat(4, 1fr);

      gap: 22px;
    }

    .favorite-card {
      position: relative;

      padding: 35px 20px;

      min-height: 220px;

      display: flex;
      flex-direction: column;

      align-items: center;
      justify-content: center;

      text-align: center;

      border-radius: 28px;

      background:
        linear-gradient(
          145deg,
          rgba(255,255,255,.9),
          rgba(232,248,255,.75)
        );

      border: 1px solid #d2f0fc;

      cursor: pointer;

      overflow: hidden;

      transition: .4s;
    }

    .favorite-card::before {
      content: "";

      position: absolute;

      width: 100px;
      height: 100px;

      border-radius: 50%;

      background: #c5edff;

      top: -50px;
      right: -50px;

      transition: .4s;
    }

    .favorite-card:hover {
      transform:
        translateY(-12px)
        scale(1.02);

      box-shadow:
        0 20px 50px rgba(43, 151, 194, .15);
    }

    .favorite-card:hover::before {
      transform: scale(2);
    }

    .favorite-icon {
      font-size: 48px;
      position: relative;
      z-index: 1;
    }

    .favorite-card h3 {
      color: #287398;

      margin-top: 15px;

      position: relative;
      z-index: 1;
    }

    .favorite-card p {
      color: #8198a6;

      font-size: 12px;

      margin-top: 6px;

      position: relative;
      z-index: 1;
    }


    /* =====================================================
       FAVORITE DETAIL POPUP
    ===================================================== */

    .detail-content {
      text-align: center;
    }

    .detail-big-icon {
      font-size: 75px;
      margin-bottom: 15px;
    }

    .detail-content h2 {
      color: #277aa5;
      margin-bottom: 10px;
    }

    .detail-content p {
      color: #708b9a;
      line-height: 1.8;
    }

    .favorite-list {
      list-style: none;

      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 12px;

      margin-top: 25px;
    }

    .favorite-list li {
      padding: 14px;

      border-radius: 15px;

      background: #eefaff;

      color: #427086;

      font-size: 13px;
    }


    /* =====================================================
       SOCIAL MEDIA
    ===================================================== */

    .social-section {
      background:
        rgba(220, 247, 255, .5);
    }

    .social-grid {
      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 18px;
    }

    .social-card {
      padding: 25px;

      border-radius: 23px;

      background: rgba(255,255,255,.82);

      text-decoration: none;

      color: #315d73;

      display: flex;

      align-items: center;

      gap: 15px;

      transition: .3s;

      border: 1px solid #d9f2fa;
    }

    .social-card:hover {
      transform: translateY(-8px);
      box-shadow:
        0 15px 40px rgba(57, 145, 184, .15);
    }

    .social-icon {
      width: 50px;
      height: 50px;

      display: flex;

      justify-content: center;
      align-items: center;

      border-radius: 15px;

      background: #e2f7ff;

      font-size: 24px;
    }

    .social-card h3 {
      font-size: 14px;
    }

    .social-card p {
      color: #8198a6;
      font-size: 11px;
    }


    /* =====================================================
       MAP
    ===================================================== */

    .map-box {
      max-width: 1000px;

      height: 400px;

      margin: auto;

      overflow: hidden;

      border-radius: 30px;

      border: 7px solid white;

      box-shadow:
        0 20px 60px rgba(45, 135, 175, .15);
    }

    .map-box iframe {
      width: 100%;
      height: 100%;

      border: 0;
    }

    .address {
      text-align: center;

      margin-top: 18px;

      color: #6e8b9a;

      font-size: 13px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    footer {
      text-align: center;

      padding: 60px 20px;

      background:
        linear-gradient(
          135deg,
          #d9f4ff,
          #edfaff
        );
    }

    footer h2 {
      color: #267aa5;

      font-size: 30px;
    }

    footer h2 span {
      color: #65c9f4;
    }

    footer p {
      color: #7894a3;

      font-size: 13px;

      margin-top: 8px;
    }

    .heart {
      color: #55b9e8;
    }


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

    @media (max-width: 950px) {

      .hero {
        flex-direction: column;
        text-align: center;
      }

      .hero-description {
        margin-left: auto;
        margin-right: auto;
      }

      .buttons {
        justify-content: center;
      }

      .quick-info,
      .favorite-grid,
      .social-grid {
        grid-template-columns: repeat(2, 1fr);
      }

    }


    @media (max-width: 650px) {

      nav {
        padding: 15px 5%;
      }

      nav ul {
        gap: 10px;
      }

      nav a {
        font-size: 10px;
      }

      .hero {
        padding:
          120px 6% 70px;
      }

      .profile-card {
        width: 280px;
        height: 350px;
      }

      section {
        padding: 70px 6%;
      }

      .section-title h2 {
        font-size: 29px;
      }

      .quick-info,
      .favorite-grid,
      .social-grid {
        grid-template-columns: 1fr;
      }

      .biodata-grid {
        grid-template-columns: 1fr;
      }

      .modal-box {
        padding: 28px 20px;
      }

      .favorite-list {
        grid-template-columns: 1fr;
      }

      .map-box {
        height: 300px;
      }

    }