:root{--ink:#28344a;--pink:#f8b9cc;--rose:#ef7da4;--cream:#fffaf4;--blue:#c9ddf6;--yellow:#f9dd88;--line:#eddcd1}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:'DM Sans',sans-serif}.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,6vw,86px);position:fixed;top:0;width:100%;z-index:10;background:rgba(255,250,244,.89);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.25s}.site-header.scrolled{border-color:var(--line)}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-weight:700;font-size:.93rem}
.brand-mark{

    width:45px;
    height:45px;

    display:flex;

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

    border-radius:50%;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(239,125,164,.25);

}


.brand-mark img{

    width:100%;

    height:100%;

    object-fit:cover;

}
.nav{display:flex;align-items:center;gap:25px}.nav-link{font-size:.86rem;color:var(--ink);text-decoration:none;position:relative}.nav-link:not(.nav-contact):after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--rose);transform:scaleX(0);transition:.25s}.nav-link.active:after,.nav-link:hover:after{transform:scaleX(1)}.nav-contact{color:#fff;background:var(--rose);padding:10px 15px;border-radius:99px}.menu-toggle{display:none}.section{padding:118px clamp(22px,10vw,150px);scroll-margin-top:55px}.hero{min-height:690px;position:relative;display:flex;align-items:center;overflow:hidden;background:linear-gradient(117deg,#fff7f8 0%,#fff9ef 63%,#d7e9ff 100%)}.hero-copy{max-width:620px;z-index:1}.eyebrow{margin:0 0 13px;color:var(--rose);letter-spacing:.13em;text-transform:uppercase;font-weight:700;font-size:.7rem}.hero h1,.section-heading h2,.contact h2{font:700 clamp(3rem,6vw,5.8rem)/.98 'Playfair Display',serif;letter-spacing:-.055em;margin:0}.hero h1 em{color:var(--rose)}.lead{max-width:485px;font-size:1.05rem;line-height:1.7;margin:25px 0 30px;color:#536074}.button{display:inline-flex;gap:23px;align-items:center;padding:15px 19px 15px 22px;background:var(--ink);color:#fff;border-radius:99px;text-decoration:none;font-weight:700;font-size:.88rem;transition:.25s}.button:hover{transform:translateY(-3px);background:var(--rose)}.button span{font-size:1.2rem}.hero-note{position:absolute;right:10%;top:30%;width:236px;padding:25px;background:#fff;border:1px solid var(--line);box-shadow:12px 13px 0 #fbd8e2;transform:rotate(4deg);z-index:1}.note-icon{color:var(--rose);font-size:1.6rem}.hero-note p{font:600 1.15rem/1.4 'Playfair Display',serif}.hero-note small{color:var(--rose)}.hero-pattern{position:absolute;border-radius:50%;opacity:.5}.pattern-one{width:460px;height:460px;right:-130px;bottom:-170px;background:repeating-radial-gradient(circle,#f7b3c9 0 5px,transparent 6px 21px)}.pattern-two{width:250px;height:250px;right:23%;top:-125px;background:#f9db82}.flower-row{position:absolute;bottom:34px;left:0;width:100%;color:#ef8bb0;text-align:center;font-size:2rem;letter-spacing:.15em}.section-heading h2{font-size:clamp(2.5rem,4.4vw,4.2rem)}.profile{background:#fff}.profile-grid{max-width:900px;margin:55px auto 80px;display:grid;grid-template-columns:280px 1fr;gap:80px;align-items:center}.portrait-wrap{position:relative}.portrait-frame{padding:10px;background:#fff;box-shadow:10px 10px 0 var(--blue);transform:rotate(-3deg)}.portrait-frame img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}.portrait-caption{display:inline-block;margin:20px 0 0 11px;font:600 1rem 'Playfair Display',serif;color:var(--rose)}.profile-copy h3,.education h3{font:600 2.1rem 'Playfair Display',serif;margin:0 0 13px}.profile-copy>p{line-height:1.75;color:#566276}.bio-list{margin:25px 0 0;border-top:1px solid var(--line)}.bio-list div{display:grid;grid-template-columns:150px 1fr;gap:15px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.88rem}.bio-list dt{color:var(--rose);font-weight:700}.bio-list dd{margin:0}.education{max-width:900px;margin:auto;padding:34px 40px;display:grid;grid-template-columns:1fr 1.2fr;gap:30px;border-radius:16px;background:#fff4d8}.education h3{font-size:1.7rem}.education ul{margin:0;padding:0;list-style:none}.education li{padding:8px 0;border-bottom:1px dashed #ddc782}.education li:last-child{border:0}.education b{float:right;color:var(--rose)}.materials{background:#fce5ed}.centered{text-align:center}.centered>p:last-child{margin:12px auto 0;color:#566276}.material-intro{max-width:750px;margin:44px auto 35px;display:flex;gap:24px;align-items:flex-start}.material-intro span{font:600 2rem 'Playfair Display',serif;color:var(--rose)}.material-intro p{margin:0;font:600 1.25rem/1.5 'Playfair Display',serif}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.card{min-height:250px;padding:22px;position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff;border-radius:10px;transition:.3s;box-shadow:0 4px 0 rgba(213,152,173,.1)}.card:hover{transform:translateY(-8px);box-shadow:0 15px 25px rgba(98,65,75,.14)}.card-number{font-size:.72rem;color:#a6afba}.card-icon{font-size:2rem;margin:37px 0 16px;color:var(--rose)}.card h3{font:600 1.35rem 'Playfair Display',serif;margin:0}.card p{margin:8px 0;color:#748096;font-size:.83rem}.card-arrow{position:absolute;right:21px;bottom:18px;font-size:1.25rem}.resources{background:#fff}.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px;margin-top:45px}.resource{min-height:210px;border:1px solid var(--line);padding:27px;border-radius:12px;transition:.25s}.resource:hover{border-color:var(--pink);transform:translateY(-4px)}.resource>span{font-size:1.55rem}.resource h3{font:600 1.35rem 'Playfair Display',serif;margin:13px 0}.resource a{display:block;color:#64728a;margin:8px 0;font-size:.88rem;text-decoration-color:#f0a5bd;text-underline-offset:4px}.resource p{color:#64728a;line-height:1.6;font-size:.9rem}.contact{min-height:430px;background:var(--ink);color:white;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}.contact .eyebrow{color:var(--pink)}.contact h2{font-size:clamp(2.6rem,4.7vw,4.8rem)}.contact-copy>p:last-child{color:#c8d0dd;line-height:1.6;max-width:400px}.email-link{color:white;text-decoration:none;padding:21px 0;border-bottom:1px solid #647085;font-size:clamp(.9rem,1.6vw,1.2rem);display:flex;gap:13px;align-items:center;word-break:break-word}.email-link b{margin-left:auto;font-size:1.4rem}.email-link:hover{color:var(--pink)}footer{padding:23px;text-align:center;color:#687489;background:#f6e3e9;font-size:.77rem}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.24s}.delay-3{transition-delay:.36s}@media(max-width:800px){.site-header{height:66px}.menu-toggle{display:grid;gap:5px;padding:8px;border:0;background:none}.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink)}.nav{position:absolute;top:66px;right:16px;left:16px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #46333a18}.nav.open{display:flex}.nav-link{padding:12px}.nav-contact{text-align:center;margin:4px 8px 8px}.hero{min-height:655px}.hero-note{display:none}.flower-row{font-size:1.5rem}.profile-grid,.education,.contact{grid-template-columns:1fr;gap:35px}.profile-grid{max-width:500px}.portrait-wrap{max-width:260px;margin:auto}.cards{grid-template-columns:repeat(2,1fr)}.contact{gap:28px}.section{padding-top:90px;padding-bottom:90px}}@media(max-width:480px){.brand>span:last-child{font-size:.78rem}.hero h1{font-size:3.3rem}.section-heading h2{font-size:2.7rem}.cards,.resource-grid{grid-template-columns:1fr}.education{padding:26px}.bio-list div{grid-template-columns:1fr;gap:4px}.material-intro p{font-size:1.1rem}.card{min-height:205px}}

/* HERO BARU */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(
        120deg,
        #fffaf7,
        #fff0f5,
        #eef7ff
    );
}


.hero-content{

    width:100%;
    max-width:1200px;
    margin:auto;

    padding:120px 70px 80px;

    display:grid;
    grid-template-columns:1fr 430px;

    gap:80px;

    align-items:center;

}


/* TEXT */

.hero-text h1{

    font-family:'Playfair Display',serif;

    font-size:clamp(2.8rem,5vw,5rem);

    line-height:1.05;

    margin:15px 0;

    color:#28344a;

}


.hero-text h1 span{

    color:#ef7da4;

}



.hero-text h2{

    font-size:1.5rem;

    font-weight:500;

    margin:20px 0;

    color:#536074;

}



.typing{

    color:#ef7da4;

    font-weight:700;

}



.hero-description{

    max-width:500px;

    line-height:1.8;

    color:#667085;

    font-size:1rem;

}



.hero-button{

    display:inline-block;

    margin-top:25px;

    padding:14px 28px;

    background:#ef7da4;

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.hero-button-group{
    display:flex;
    gap:20px;
}


.hero-button:hover{

    transform:translateY(-5px);

    background:#28344a;

}



/* FOTO */


.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

}



.photo-frame{

    width:350px;

    height:450px;

    padding:12px;

    background:white;

    border-radius:180px 180px 30px 30px;

    box-shadow:

    15px 15px 0 #f8b9cc;

    transform:rotate(3deg);

}



.photo-frame img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:160px 160px 20px 20px;

}



.photo-note{

    position:absolute;

    bottom:40px;

    left:30px;

    background:white;

    padding:15px 22px;

    border-radius:20px;

    box-shadow:0 10px 25px #0002;

    font-weight:700;

    color:#ef7da4;

}



.photo-decoration{

    position:absolute;

    top:-50px;

    right:20px;

    font-size:4rem;

    animation:float 3s infinite ease-in-out;

}


/* BUNGA */

.hero-decoration{

    position:absolute;

    font-size:3rem;

}


.flower-1{

    top:120px;

    left:60px;

}


.flower-2{

    bottom:80px;

    right:100px;

}


.leaf{

    top:200px;

    right:40%;

}



@keyframes float{

    50%{

        transform:translateY(-15px);

    }

}



/* RESPONSIVE */


@media(max-width:850px){


.hero-content{

    grid-template-columns:1fr;

    text-align:center;

    padding:100px 25px;

}



.hero-description{

    margin:auto;

}


.hero-image{

    order:-1;

}



.photo-frame{

    width:280px;

    height:360px;

}


}

.typing::after{

    content:"|";

    margin-left:5px;

    color:#ef7da4;

    animation:blink .7s infinite;

}


@keyframes blink{

    50%{

        opacity:0;

    }

}

.typing{
    display:inline-block;
    min-width:250px;
}


.typing::after{
    content:"|";
    color:#ef7da4;
    animation:cursor .7s infinite;
}


@keyframes cursor{

    50%{
        opacity:0;
    }

}


/* PROFILE DECORATION */

.profile{
    position:relative;
    overflow:hidden;
    background:#fff;
}


.profile-flower{

    position:absolute;
    font-size:4rem;
    opacity:.8;

}


.flower-left{

    top:80px;
    left:30px;

}


.flower-right{

    bottom:50px;
    right:50px;

}


.profile-leaf{

    position:absolute;
    right:15%;
    top:120px;
    font-size:3rem;

}



.portrait-wrap{
    position:relative;
}



.flower-around{

    position:absolute;
    top:-40px;
    right:-20px;

    font-size:3.5rem;

    animation:float 3s infinite;

}



.portrait-frame{

    border-radius:30px;

    overflow:hidden;

}



.portrait-caption{

    background:#fff;

    padding:12px 22px;

    border-radius:30px;

    box-shadow:0 8px 20px #0002;

}



/* BIODATA */

.bio-list{

    margin-top:30px;

}



.bio-list div{

    display:flex;

    justify-content:space-between;

    padding:15px 0;

    border-bottom:1px dashed #efd5dc;

}



.bio-list span{

    color:#ef7da4;

    font-weight:700;

}



.bio-list b{

    font-weight:500;

    text-align:right;

}



/* TIMELINE */

.timeline{

    margin-top:20px;

}



.timeline div{

    display:flex;

    justify-content:space-between;

    padding:15px;

    margin-bottom:10px;

    background:#fff;

    border-radius:15px;

    border-left:5px solid #ef7da4;

}



.timeline span{

    color:#ef7da4;

    font-weight:bold;

}

/* =========================
   BAHAN AJAR IPAS
========================= */


.subject-detail{

    position:relative;
    overflow:hidden;
    padding:120px clamp(22px,8vw,120px);

    background:#fffaf7;

}


/* ORNAMEN */

.subject-decoration{

    position:absolute;
    font-size:3.5rem;
    opacity:.7;

}


.flower-a{

    top:80px;
    left:50px;

}


.flower-b{

    bottom:80px;
    right:70px;

}



/* HEADER IPAS */


.subject-header{

    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 420px;

    gap:70px;

    align-items:center;

}



.subject-info h2{

    font-family:'Playfair Display',serif;

    font-size:clamp(2.5rem,4vw,4rem);

    line-height:1.1;

    margin:15px 0;

    color:#28344a;

}



.subject-info h2::first-line{

    color:#28344a;

}



.subject-info>p:not(.eyebrow){

    max-width:500px;

    line-height:1.8;

    color:#687489;

    font-size:1rem;

}




/* BUTTON */

.subject-button{

    display:flex;

    gap:18px;

    margin-top:30px;

}



.btn-primary,
.btn-secondary{

    text-decoration:none;

    padding:15px 25px;

    border-radius:40px;

    font-weight:700;

    transition:.3s;

}



.btn-primary{

    background:#ef7da4;

    color:white;

}



.btn-secondary{

    background:white;

    color:#ef7da4;

    border:2px solid #ef7da4;

}



.btn-primary:hover,
.btn-secondary:hover{

    transform:translateY(-5px);

}



/* GAMBAR PIRAMIDA */


.subject-image{

    display:flex;

    justify-content:center;

}



.subject-image img{

    width:100%;

    max-width:420px;

    filter:drop-shadow(0 15px 20px #0002);

    animation:float 4s infinite ease-in-out;

}




/* MEDIA */

.learning-media{

    margin-top:100px;

}



.learning-media h3{

    text-align:center;

    font-family:'Playfair Display',serif;

    font-size:2.5rem;

    color:#28344a;

    margin-bottom:40px;

}




.media-grid{

    display:grid;

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

    gap:25px;

}




.media-card{

    background:white;

    text-decoration:none;

    color:#28344a;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}



.media-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 35px rgba(239,125,164,.2);

}



.media-card img{

    width:100%;

    height:180px;

    object-fit:cover;

}




.media-card h4{

    font-family:'Playfair Display',serif;

    font-size:1.3rem;

    margin:18px 20px 5px;

}



.media-card p{

    margin:0 20px 20px;

    color:#687489;

    font-size:.9rem;

}




/* TUJUAN PEMBELAJARAN */


.learning-objective{

    margin-top:90px;

    background:#fff0d8;

    padding:45px;

    border-radius:30px;

    display:grid;

    grid-template-columns:350px 1fr;

    gap:50px;

    align-items:center;

}




.objective-title{

    text-align:center;

}



.objective-title span{

    font-size:3rem;

}



.objective-title h3{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    color:#ef7da4;

}




.learning-objective ol{

    margin:0;

    padding-left:25px;

}



.learning-objective li{

    margin-bottom:18px;

    line-height:1.7;

    color:#4f5d73;

}




/* RESPONSIVE */


@media(max-width:900px){


.subject-header{

    grid-template-columns:1fr;

    text-align:center;

}



.subject-info>p:not(.eyebrow){

    margin:auto;

}



.subject-button{

    justify-content:center;

}



.media-grid{

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

}



.learning-objective{

    grid-template-columns:1fr;

}



}



@media(max-width:500px){


.subject-button{

    flex-direction:column;

}



.media-grid{

    grid-template-columns:1fr;

}



.learning-objective{

    padding:30px 20px;

}


}

/* POPUP MINDMAP */


.modal{

    display:none;

    position:fixed;

    z-index:100;

    inset:0;

    background:rgba(40,52,74,.75);

    justify-content:center;

    align-items:center;

    padding:30px;

}



.modal.active{

    display:flex;

}



.modal-image{

    max-width:90%;

    max-height:85vh;

    border-radius:20px;

    background:white;

    padding:10px;

    box-shadow:0 20px 50px rgba(0,0,0,.3);

    animation:zoom .3s ease;

}



.close-modal{

    position:absolute;

    top:30px;

    right:45px;

    font-size:3rem;

    color:white;

    cursor:pointer;

}



.mindmap-card{

    cursor:pointer;

}



@keyframes zoom{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* TUJUAN PEMBELAJARAN BARU */


.learning-objective{

    margin-top:90px;

    background:#fff5ea;

    padding:50px;

    border-radius:35px;

    position:relative;

    overflow:hidden;

    display:grid;

    grid-template-columns:350px 1fr;

    gap:50px;

    align-items:center;

}



.learning-objective::before{

    content:"❀";

    position:absolute;

    top:20px;

    right:35px;

    font-size:3rem;

    color:#ef7da4;

    opacity:.5;

}



.learning-objective::after{

    content:"✿";

    position:absolute;

    bottom:20px;

    left:30px;

    font-size:2.5rem;

    color:#ef7da4;

    opacity:.4;

}



.flower-decoration{

    font-size:3rem;

    color:#ef7da4;

    animation:float 3s infinite ease-in-out;

}



.objective-title h3{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    color:#28344a;

    margin:15px 0;

}



.objective-title p{

    color:#687489;

    line-height:1.7;

}



.objective-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    background:white;

    padding:18px 22px;

    margin-bottom:15px;

    border-radius:18px;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}



.flower-dot{

    width:14px;

    height:14px;

    background:#ef7da4;

    border-radius:50% 50% 50% 0;

    transform:rotate(-45deg);

    margin-top:7px;

    flex-shrink:0;

}



.objective-item p{

    margin:0;

    color:#536074;

    line-height:1.6;

}

.material-heading{
    text-align:center;
    max-width:750px;
    margin:0 auto 70px;
    margin-top:-40px;
}


.material-heading h2{

    font-family:'Playfair Display',serif;
    font-size:clamp(2.5rem,4vw,4rem);
    color:#28344a;
    margin:15px 0;

}


.material-heading p:last-child{

    color:#687489;
    line-height:1.8;
    font-size:1rem;

}

/* =========================
   SUMBER AJAR BARU
========================= */


.resources{

    position:relative;

    padding:120px clamp(22px,10vw,150px);

    background:#fffaf7;

    overflow:hidden;

}



.resources-flower{

    position:absolute;

    color:#ef7da4;

    font-size:4rem;

    opacity:.35;

}



.flower-top{

    top:80px;

    right:80px;

}



.flower-bottom{

    bottom:70px;

    left:60px;

}




.resource-title{

    text-align:center;

    max-width:700px;

    margin:auto;
    
    margin-top:-120px;

}



.resource-title h2{

    font-family:'Playfair Display',serif;

    font-size:clamp(2.5rem,4vw,4rem);

    margin:0;

}



.resource-title>p:last-child{

    color:#687489;

    line-height:1.8;

    margin-top:20px;

}




.resource-books{

    margin-top:60px;

    display:grid;

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

    gap:25px;

}




.source-card{

    background:white;

    padding:35px 25px;

    min-height:330px;

    border-radius:30px;

    position:relative;

    text-align:center;

    border:1px solid #f5dce2;

    transition:.35s;

}



.source-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 40px rgba(239,125,164,.15);

}




.source-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:70px;

    height:5px;

    background:#ef7da4;

    transform:translateX(-50%);

    border-radius:20px;

}



.source-icon{

    margin-top:10px;

    font-size:3rem;

    color:#ef7da4;

}



.source-card h3{

    font-family:'Playfair Display',serif;

    font-size:1.5rem;

    margin:15px 0;

}



.source-card p{

    color:#687489;

    line-height:1.7;

    font-size:.9rem;

}



.source-link{

    margin-top:25px;

}



.source-link a{

    display:block;

    color:#ef7da4;

    text-decoration:none;

    margin:12px 0;

    font-weight:600;

}



.source-link a:hover{

    text-decoration:underline;

}



.tool{

    margin-top:25px;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

}



.tool span{

    background:#fff0d8;

    padding:8px 15px;

    border-radius:30px;

    font-size:.85rem;

}





@media(max-width:1000px){

    .resource-books{

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

    }

}



@media(max-width:600px){

    .resource-books{

        grid-template-columns:1fr;

    }

}

/* =================
   CONTACT COLOR VARIATION
================= */

.contact{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #fbe4ec,
        #fff4e8
    );

    display:grid;

    grid-template-columns:1fr 450px;

    gap:80px;

    align-items:center;

}


/* ornamen bunga */

.contact-flower{

    position:absolute;

    color:#d86f98;

    font-size:4rem;

    opacity:.25;

}


.contact-copy h2{

    font-family:'Playfair Display',serif;

    font-size:clamp(2.5rem,4vw,4rem);

    color:#543b4a;

    line-height:1.15;

    margin:15px 0;

}



.contact-copy p:last-child{

    color:#725b68;

    line-height:1.8;

    max-width:500px;

}




/* CARD KONTAK */

.contact-card{

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

    padding:22px 25px;

    border-radius:25px;

    display:flex;

    align-items:center;

    gap:20px;

    text-decoration:none;

    color:#543b4a;

    box-shadow:

    0 10px 25px rgba(216,111,152,.15);

    transition:.3s;

}



.contact-card:hover{

    transform:translateY(-8px);

    background:white;

    box-shadow:

    0 18px 35px rgba(216,111,152,.25);

}




.contact-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8c7d8;

    color:#b64d78;

    font-size:1.5rem;

}



.contact-card small{

    color:#b64d78;

    font-weight:700;

}



.contact-card p{

    margin:5px 0 0;

    color:#6d5865;

}



.contact-card b{

    margin-left:auto;

    color:#b64d78;

}

.contact-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* =========================
   RESPONSIVE TAMBAHAN ALL SECTION
========================= */

/* Tablet */
@media (max-width: 1024px){

    .section{
        padding-left:40px;
        padding-right:40px;
    }

    .hero-content{
        grid-template-columns:1fr 350px;
        gap:40px;
        padding-left:40px;
        padding-right:40px;
    }

    .photo-frame{
        width:300px;
        height:390px;
    }

    .profile-grid{
        grid-template-columns:240px 1fr;
        gap:40px;
    }

    .subject-header{
        grid-template-columns:1fr 350px;
        gap:40px;
    }

    .media-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .resource-books{
        grid-template-columns:repeat(2,1fr);
    }

    .contact{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

}


/* Mobile besar */
@media (max-width: 768px){

    .section{
        padding:90px 25px;
    }

    .site-header{
        padding:0 25px;
    }

    .hero-content{
        display:flex;
        flex-direction:column;
        text-align:center;
        padding:100px 25px 60px;
    }

    .hero-image{
        order:-1;
    }

    .hero-text h1{
        font-size:3rem;
    }

    .hero-button-group{
        justify-content:center;
        flex-wrap:wrap;
    }

    .photo-frame{
        width:260px;
        height:340px;
    }


    .profile-grid,
    .education,
    .subject-header,
    .learning-objective,
    .contact{
        grid-template-columns:1fr;
    }


    .profile-grid{
        margin-top:35px;
    }


    .bio-list div{
        display:flex;
        flex-direction:column;
        gap:5px;
    }


    .subject-info{
        text-align:center;
    }


    .subject-info>p:not(.eyebrow){
        margin-left:auto;
        margin-right:auto;
    }


    .subject-button{
        justify-content:center;
        flex-wrap:wrap;
    }


    .media-grid,
    .resource-books{
        grid-template-columns:1fr;
    }


    .learning-objective{
        padding:30px 22px;
    }


    .contact{
        gap:35px;
    }


    .contact-copy h2{
        font-size:2.7rem;
    }


    .contact-card{
        padding:22px;
    }

}


/* Mobile kecil */
@media (max-width:480px){

    .brand{
        font-size:.8rem;
    }


    .hero-text h1{
        font-size:2.5rem;
    }


    .hero-text h2{
        font-size:1.2rem;
    }


    .hero-description{
        font-size:.9rem;
    }


    .hero-button{
        width:100%;
        justify-content:center;
    }


    .photo-frame{
        width:220px;
        height:300px;
    }


    .material-heading h2,
    .resource-title h2{
        font-size:2.5rem;
    }


    .subject-info h2{
        font-size:2.4rem;
    }


    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }


    .subject-button{
        flex-direction:column;
    }


    .media-card img{
        height:160px;
    }


    .source-card{
        min-height:auto;
        padding:30px 20px;
    }


    .contact-card{
        gap:15px;
    }


    .contact-card p{
        font-size:.85rem;
        word-break:break-word;
    }


}


@media(max-width:768px){

    .contact-list.reveal{

        opacity:1;

        transform:none;

    }

}