/* ===== BRIDE & GROOM INFO (PAGE 3) ===== */
    .bride-groom-section {
        margin: 10px 0;
    }

    .person-card {
        margin: 10px 0;
        padding: 20px;
        /*background: rgba(255,255,255,0.05);*/
        border-radius: 15px;
    }
    
    .person-card-cowok {
        margin: 10px 0;
        /*padding: 20px;*/
        /*background: rgba(255,255,255,0.05);*/
        border-radius: 15px;
    }

    .person-photo {
        width: 120px;
        height: 120px;
        border-radius: 25%;
        border: 0px solid #aaa;
        margin: 0 auto 15px;
        object-fit: cover;
        background-position: center 30%;
        /*background-image: url('../catin/catin-cewek.png');*/
        background-image: url('../catin/Desain tanpa judul (1).svg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .person-photo-cowok {
        width: 120px;
        height: 120px;
        border-radius: 25%;
        border: 0px solid #aaa;
        margin: 0 auto 15px;
        object-fit: cover;
        background-position: center 10%;
        /*background-image: url('../catin/catin-cowok.png');*/
        background-image: url('../catin/Desain tanpa judul (3).svg');
        background-size: cover;
        background-repeat: no-repeat;
    }

    .person-name {
        font-family: "Zeyada", cursive;
        font-size: 28px;
        color: #d4af37;
    }

    .person-title {
        font-family: "Playfair Display", serif;
        font-size: 11px;
        color: #ccc;
    }

    .person-parents {
        font-family: "Playfair Display", serif;
        font-size: 13px;
        line-height: 1.6;
        color: #ffffff;
    }
    
    
    /* Base style tanpa animasi */
    .person-card,
    .person-card-cowok {
      opacity: 0;
    }
    
    .person-card.animate {
      animation: fadeInFromLeft 3s ease-out forwards;
    }
    .person-card-cowok.animate {
      animation: fadeInFromRight 3s ease-out forwards;
    }
    
    .pengantar-section,
    .value-section {
      position: relative;
      opacity: 0;
      pointer-events: none;
    }
    
    .pengantar-section.show {
      animation: pengantarIn 1.2s ease-out forwards;
    }
    
    .pengantar-section.hide {
      animation: pengantarOut 1s ease-in forwards;
    }
    
    @keyframes pengantarIn {
      from {
        opacity: 0;
        transform: scale(0.92);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    
    @keyframes pengantarOut {
      from {
        opacity: 1;
        transform: scale(1);
      }
      to {
        opacity: 0;
        transform: scale(1.05);
      }
    }
    
    /* ================= VALUE SECTION ================= */
    
    .value-section.show {
      animation: valueIn 1.2s ease-out forwards;
      pointer-events: auto;
    }
    
    @keyframes valueIn {
      from {
        opacity: 0;
        transform: translateY(25px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }