/* ==================================================
   TATSYAFIRA DESIGN SYSTEM
   ================================================== */

:root {

    --pink: #F3C9D9;
    --pink-soft: #F9E7EE;

    --yellow: #FFE49A;
    --yellow-soft: #FFF4D3;

    --blue: #CFE9E2;
    --blue-soft: #E7F4F0;

    --lavender: #E8E0F5;

    --cream: #FCFBFF;

    --black: #202027;
    --gray: #68666D;
    --white: #FFFFFF;

    --border: rgba(32, 32, 39, 0.08);

    --radius-small: 14px;
    --radius-medium: 24px;
    --radius-large: 32px;

    --shadow:
        0 15px 50px rgba(50, 40, 60, 0.08);
}


/* ================================
   GLOBAL
   ================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    color: var(--black);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--cream);

    position: relative;

    isolation: isolate;
}


/* ================================
   ATMOSPHERIC BACKGROUND
   ================================ */

body::before {

    content: "";

    position: fixed;

    inset: -25%;

    z-index: -1;

    background:

        radial-gradient(
            ellipse at 15% 5%,
            #F3C9D9 0%,
            transparent 50%
        ),

        radial-gradient(
            ellipse at 85% 5%,
            #FFE49A 0%,
            transparent 50%
        ),

        radial-gradient(
            ellipse at 50% 45%,
            #E8E0F5 0%,
            transparent 55%
        ),

        radial-gradient(
            ellipse at 50% 100%,
            #CFE9E2 0%,
            transparent 60%
        );

    filter: blur(90px);

    transform: scale(1.1);
}


/* ================================
   NAVIGATION
   ================================ */

nav {

    position: sticky;

    top: 0;

    z-index: 1000;

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    padding: 12px 40px;

    background:
        rgba(255, 255, 255, 0.72);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.8);

    backdrop-filter:
        blur(18px);
}


/* Logo */

.logo {

    display: flex;

    align-items: center;
}

.logo img {

    display: block;

    width: 130px;

    height: auto;
}


/* Navigation links */

.nav-links {

    display: flex;

    align-items: center;

    gap: 5px;
}

.nav-links a {

    color: var(--black);

    text-decoration: none;

    font-size: 14px;

    padding: 9px 14px;

    border-radius: 999px;

    transition:
        0.2s ease;
}

.nav-links a:hover {

    background:
        rgba(243, 201, 217, 0.35);
}

.nav-links a.active {

    background:
        rgba(243, 201, 217, 0.65);
}


/* ================================
   MAIN
   ================================ */

main {

    max-width: 1150px;

    margin: auto;
}


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

.hero {

    min-height: 72vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding:
        70px 30px;
}


/* Hero photo */

.hero-photo {

    width: 170px;

    height: 170px;

    margin-bottom: 28px;

    overflow: hidden;

    border-radius: 50%;

    border:
        6px solid
        rgba(255, 255, 255, 0.7);

    box-shadow:
        0 15px 40px
        rgba(80, 60, 100, 0.14);
}


.hero-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* Hero heading */

.hero h1 {

    margin:
        10px 0 25px;

    font-size:
        clamp(42px, 6vw, 72px);

    line-height: 1;

    letter-spacing:
        -2px;

    font-weight:
        700;
}


/* Hero description */

.hero-description {

    max-width: 720px;

    margin:
        0 auto 30px;

    font-size:
        17px;

    line-height:
        1.7;

    color:
        #45434A;
}


/* ================================
   BUTTONS
   ================================ */

.hero-buttons {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    justify-content: center;
}


.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        13px 22px;

    border-radius:
        999px;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.button:hover {

    transform:
        translateY(-3px);
}


.button.primary {

    background:
        var(--black);

    color:
        white;

    box-shadow:
        0 10px 25px
        rgba(32, 32, 39, 0.15);
}


.button.secondary {

    background:
        rgba(255, 255, 255, 0.65);

    color:
        var(--black);

    border:
        1px solid var(--border);
}


/* ================================
   GENERAL SECTIONS
   ================================ */

.content-section {

    padding:
        110px 30px;
}


.section-heading {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap: 30px;

    margin-bottom:
        40px;
}


.section-heading h2 {

    margin: 0;

    font-size:
        clamp(10px, 5vw, 52px);

    line-height:
        1.05;

    letter-spacing:
        -1.5px;
}


.text-link {

    color:
        var(--black);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

    white-space:
        nowrap;
}


/* ================================
   ARTICLE CARDS
   ================================ */

.article-grid {

    display:
        grid;

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

    gap:
        20px;
}


.article-card {

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.62);

    border:
        1px solid
        rgba(255, 255, 255, 0.8);

    border-radius:
        var(--radius-medium);

    box-shadow:
        var(--shadow);

    transition:
        transform 0.25s ease;
}


.article-card:hover {

    transform:
        translateY(-6px);
}


.article-image {

    height:
        220px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        40px;
}


.pink-card {

    background:
        linear-gradient(
            135deg,
            #F3C9D9,
            #F9E7EE
        );
}


.yellow-card {

    background:
        linear-gradient(
            135deg,
            #FFE49A,
            #FFF4D3
        );
}


.blue-card {

    background:
        linear-gradient(
            135deg,
            #CFE9E2,
            #E7F4F0
        );
}


.article-content {

    padding:
        25px;
}


.article-category {

    margin:
        0 0 10px;

    font-size:
        10px;

    letter-spacing:
        2px;

    font-weight:
        700;

    color:
        var(--gray);
}


.article-content h3 {

    margin:
        0 0 10px;

    font-size:
        22px;
}


.article-content p {

    margin:
        0 0 20px;

    color:
        var(--gray);

    line-height:
        1.6;

    font-size:
        14px;
}


.article-content a,
.class-card a,
.resource-card a {

    color:
        var(--black);

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;
}


/* ================================
   ENGLISH TEST
   ================================ */

.test-section {

    margin:
        50px 30px;

    padding:
        70px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        60px;

    align-items:
        center;

    border-radius:
        var(--radius-large);

    background:
        linear-gradient(
            135deg,
            rgba(243, 201, 217, 0.65),
            rgba(255, 244, 211, 0.75),
            rgba(207, 233, 226, 0.7)
        );

    border:
        1px solid
        rgba(255,255,255,0.8);
}


.test-content h2 {

    margin:
        0 0 20px;

    font-size:
        clamp(34px, 5vw, 55px);

    line-height:
        1;

    letter-spacing:
        -2px;
}


.test-content > p:not(.eyebrow) {

    max-width:
        500px;

    color:
        var(--gray);

    line-height:
        1.7;

    margin-bottom:
        25px;
}


.test-preview {

    padding:
        35px;

    text-align:
        center;

    border-radius:
        var(--radius-medium);

    background:
        rgba(255,255,255,0.6);

    box-shadow:
        var(--shadow);
}


.test-circle {

    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 20px;

    border-radius:
        50%;

    background:
        var(--white);

    font-size:
        25px;
}


.test-preview p {

    font-size:
        10px;

    letter-spacing:
        2px;

    color:
        var(--gray);
}


.test-preview h3 {

    font-size:
        25px;
}


.level-row {

    display:
        flex;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        25px;
}


.level-row span {

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,0.8);

    font-size:
        12px;
}


/* ================================
   CLASSES
   ================================ */

.class-grid {

    display:
        grid;

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

    gap:
        20px;
}


.class-card {

    position:
        relative;

    padding:
        35px;

    min-height:
        280px;

    display:
        flex;

    flex-direction:
        column;

    border-radius:
        var(--radius-medium);

    background:
        rgba(255,255,255,0.62);

    border:
        1px solid
        rgba(255,255,255,0.8);

    box-shadow:
        var(--shadow);
}


.class-card.featured-class {

    background:
        linear-gradient(
            145deg,
            rgba(243,201,217,0.7),
            rgba(255,255,255,0.65)
        );
}


.class-number {

    position:
        absolute;

    top:
        25px;

    right:
        25px;

    font-size:
        12px;

    color:
        var(--gray);
}


.class-type {

    font-size:
        10px;

    letter-spacing:
        2px;

    font-weight:
        700;

    color:
        var(--gray);
}


.class-card h3 {

    font-size:
        25px;

    margin:
        20px 0 10px;
}


.class-card > p:not(.class-type) {

    color:
        var(--gray);

    line-height:
        1.6;

    font-size:
        14px;
}


.class-card a {

    margin-top:
        auto;
}


/* ================================
   TESTIMONIAL
   ================================ */

.testimonial {

    max-width:
        750px;

    margin:
        80px auto 0;

    text-align:
        center;
}


.quote-mark {

    font-family:
        Georgia, serif;

    font-size:
        70px;

    line-height:
        0;

    color:
        var(--pink);
}


.testimonial blockquote {

    margin:
        30px 0 15px;

    font-family:
        Georgia, serif;

    font-size:
        clamp(24px, 4vw, 38px);

    line-height:
        1.3;
}


.testimonial p {

    color:
        var(--gray);

    font-size:
        13px;
}


/* ================================
   RESOURCES
   ================================ */

.resource-grid {

    display:
        grid;

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

    gap:
        20px;
}


.resource-card {

    padding:
        30px;

    border-radius:
        var(--radius-medium);

    background:
        rgba(255,255,255,0.65);

    border:
        1px solid
        rgba(255,255,255,0.8);

    box-shadow:
        var(--shadow);
}


.resource-card h3 {

    margin:
        20px 0 10px;

    font-size:
        22px;
}


.resource-card p {

    color:
        var(--gray);

    line-height:
        1.6;

    font-size:
        14px;
}


.resource-card strong {

    display:
        block;

    margin:
        20px 0;

    font-size:
        18px;
}


.resource-label {

    display:
        inline-block;

    padding:
        6px 10px;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1px;
}


.resource-label.free {

    background:
        var(--blue-soft);

    color:
        #527C71;
}


.resource-label.paid {

    background:
        var(--pink-soft);

    color:
        #A65E78;
}


/* ================================
   SHOP
   ================================ */

.shop-section {

    margin:
        50px 30px 110px;

    padding:
        80px 50px;

    border-radius:
        var(--radius-large);

    background:
        rgba(255,255,255,0.55);

    border:
        1px solid
        rgba(255,255,255,0.8);
}


.shop-heading {

    max-width:
        650px;

    margin-bottom:
        45px;
}


.shop-heading h2 {

    font-size:
        clamp(35px, 5vw, 55px);

    line-height:
        1;

    margin:
        0 0 20px;
}


.shop-heading > p:last-child {

    color:
        var(--gray);

    line-height:
        1.6;
}


.shop-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;
}


.product-card {

    overflow:
        hidden;

    border-radius:
        var(--radius-medium);

    background:
        white;

    box-shadow:
        var(--shadow);
}


.product-visual {

    height:
        300px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    font-size:
        40px;

    font-weight:
        700;

    line-height:
        0.9;
}


.book-product .product-visual {

    background:
        linear-gradient(
            135deg,
            #F3C9D9,
            #FFE49A
        );
}


.merchandise-product .product-visual {

    background:
        linear-gradient(
            135deg,
            #CFE9E2,
            #E8E0F5
        );
}


.product-info {

    padding:
        30px;
}


.product-info p {

    margin:
        0;

    font-size:
        10px;

    letter-spacing:
        2px;

    color:
        var(--gray);

    font-weight:
        700;
}


.product-info h3 {

    font-size:
        24px;

    line-height:
        1.2;

    margin:
        15px 0 25px;
}


/* ================================
   SOCIALS
   ================================ */

.social-section {

    padding:
        100px 30px;

    text-align:
        center;
}


.social-section h2 {

    font-size:
        clamp(32px, 5vw, 52px);

    margin:
        0 0 35px;

    letter-spacing:
        -1px;
}


.social-links {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;
}


.social-links a {

    padding:
        12px 20px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,0.7);

    color:
        var(--black);

    text-decoration:
        none;

    border:
        1px solid var(--border);

    transition:
        0.2s ease;
}


.social-links a:hover {

    transform:
        translateY(-3px);

    background:
        var(--pink-soft);
}


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

footer {

    padding:
        60px 40px 30px;

    background:
        rgba(255,255,255,0.7);

    border-top:
        1px solid var(--border);
}


.footer-logo img {

    width:
        120px;

    height:
        auto;
}


.footer-logo p {

    color:
        var(--gray);

    font-size:
        13px;
}


.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        20px;

    margin:
        35px 0;
}


.footer-links a {

    color:
        var(--black);

    text-decoration:
        none;

    font-size:
        13px;
}


.copyright {

    margin:
        0;

    color:
        var(--gray);

    font-size:
        11px;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 800px) {

    nav {

        padding:
            12px 20px;
    }


    .logo img {

        width:
            105px;
    }


    .nav-links {

        gap:
            0;
    }


    .nav-links a {

        padding:
            7px 8px;

        font-size:
            11px;
    }


    .hero {

        min-height:
            70vh;

        padding:
            60px 20px;
    }


    .hero-photo {

        width:
            140px;

        height:
            140px;
    }


    .hero h1 {

        font-size:
            clamp(40px, 12vw, 60px);

        letter-spacing:
            -1.5px;
    }


    .hero-description {

        font-size:
            15px;
    }


    .content-section {

        padding:
            80px 20px;
    }


    .section-heading {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .article-grid,
    .class-grid,
    .resource-grid {

        grid-template-columns:
            1fr;
    }


    .test-section {

        margin:
            30px 20px;

        padding:
            45px 25px;

        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .shop-section {

        margin:
            30px 20px 80px;

        padding:
            50px 25px;
    }


    .shop-grid {

        grid-template-columns:
            1fr;
    }


    .social-section {

        padding:
            80px 20px;
    }


    footer {

        padding:
            50px 25px 25px;
    }

}
.handwriting-label {
    width: 200px;
    height: auto;
    display: block;
    margin-bottom: 12px;
}
/* ===== CATATAN TYPOGRAPHY ===== */

#catatan .section-heading h2 {
    font-size: 25px !important;
    line-height: 1.08;
    letter-spacing: -1px;
}

#catatan .handwriting-label {
    width: 230px;
}