/* ===================================
 TABLET (max 1024px)
=================================== */

@media(max-width:1024px){

    .calculator-wrapper,
    .result-wrapper{
        padding:45px 40px;
        margin:40px 20px 70px;
    }

    .form-grid{
        gap:22px;
    }

    .hero-content h1{
        font-size:34px;
    }

    .hero-content p{
        font-size:18px;
    }

}

/* ===================================
 MOBILE (max 768px)
=================================== */

@media(max-width:768px){

    .tazminat-hero{
        height:260px;
    }

    .hero-content{
        width:90%;
    }

    .hero-content h1{
        font-size:26px;
        line-height:1.3;
    }

    .hero-content p{
        font-size:16px;
    }

    .calculator-wrapper{
        margin:-40px 15px 50px;
        padding:35px 25px 45px;
    }

    .calculator-wrapper h2{
        font-size:24px;
        margin-bottom:28px;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .input-box input{
        font-size:15px;
        padding:13px 14px;
    }

    .btn-hesapla{
        padding:16px;
        font-size:17px;
    }

    /* =========================
       SONUÇLAR
    ========================= */

    .result-wrapper{
        padding:35px 25px;
        margin:20px 15px 60px;
    }

    .result-wrapper h2{
        font-size:24px;
        margin-bottom:30px;
    }

    .result-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .result-box{
        padding:26px 22px;
    }

    .result-box h3{
        font-size:20px;
    }

    .result-box li{
        font-size:15px;
    }

    .total-result{
        font-size:22px;
    }

    .btn-print{
        padding:14px 30px;
        font-size:16px;
    }

    /* =========================
       BİLGİ ALANI
    ========================= */

    .info-section{
        padding:0 18px;
        margin-bottom:80px;
    }

    .info-section h2{
        font-size:26px;
    }

    .info-section h3{
        font-size:20px;
    }

    .info-section p,
    .info-section li{
        font-size:16px;
    }

}

/* ===================================
 SMALL MOBILE (max 480px)
=================================== */

@media(max-width:480px){

    .hero-content h1{
        font-size:22px;
    }

    .hero-content p{
        font-size:14px;
    }

    .calculator-wrapper{
        padding:28px 18px 38px;
    }

    .btn-hesapla{
        font-size:16px;
    }

    .result-box{
        padding:22px 18px;
    }

    .total-result{
        font-size:20px;
    }

}