/* ==========================================================================
   MST Holland - Responsive Override CSS
   Mevcut ana CSS dosyalarını bozmadan sadece gerekli alanları override eder.
   Breakpoints: 1299px, 1024px, 992px, 768px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Genel: Yatay taşmayı engelle
   -------------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   1) 1024px – 1299px arası
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1299px) {

    /* ---- Container ---- */
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 980px;
    }
    .header-area-1 .container {
        max-width: 1020px;
    }

    /* ---- Header ---- */
    .header-area-1__inner {
        gap: 16px;
        padding: 0 16px;
    }
    .header-area-1 .header__logo {
        padding: 14px 14px 14px 0;
    }
    .header-area-1 .header__logo img {
        max-width: 120px;
    }
    .header-area-1 .main-menu li a {
        font-size: 14px;
        padding: 30px 8px;
    }
    .header-area-1 .header-right {
        gap: 14px;
    }
    .header-area-1 .header-right .rr-btn-green {
        font-size: 13px;
        padding: 10px 16px;
    }

    /* ---- Hero / Video Slider ---- */
    .mst-video-hero__title {
        font-size: clamp(30px, 4.5vw, 52px);
    }
    .mst-video-hero__desc {
        font-size: clamp(15px, 1.6vw, 18px);
        max-width: 540px;
    }
    .mst-video-hero__content {
        padding: 140px 0 80px;
    }
    .mst-video-hero__inner {
        max-width: 650px;
    }
    .hero__content .title {
        font-size: 48px;
        line-height: 56px;
    }
    .hero__content .desc {
        font-size: 16px;
    }
    .hero__content-wrap {
        margin-top: 32px;
        gap: 20px;
    }

    /* ---- Sections ---- */
    .section-spacing {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .section-spacing-120 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    /* ---- Steps Slider (Sistemler) ---- */
    .mst-steps-slider {
        padding: 80px 0 70px;
    }
    .mst-step-card {
        flex: 0 0 calc(50% - 12px);
    }
    .mst-step-content h3 {
        font-size: 24px;
    }
    .mst-step-content p {
        font-size: 15px;
    }
    .mst-step-media {
        max-width: 260px;
    }

    /* ---- Service Slider ---- */
    .service__item .title a {
        font-size: 20px;
    }
    .service__item .desc {
        font-size: 15px;
    }

    /* ---- Technology / Parallax ---- */
    .technology__card {
        padding: 40px 30px;
    }
    .technology__wrapper {
        min-height: 400px;
    }

    /* ---- Counter / Funfact ---- */
    .counter__item {
        padding: 30px 20px;
    }
    .counter__item h2 {
        font-size: 50px;
        line-height: 56px;
    }

    /* ---- Cards / Grids ---- */
    .mst-card-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    /* ---- Blog ---- */
    .blog__content {
        padding: 30px 24px;
    }

    /* ---- Footer ---- */
    .footer-3__big-text {
        font-size: 130px;
        line-height: 130px;
    }
    .footer-3__widget.widget-col_1 {
        gap: 24px;
    }
    .footer-3__widget.widget-col_2 {
        margin-left: 0;
        margin-right: 0;
    }
    .footer-3__widget.widget-col_3 {
        margin-left: 0;
    }

    /* ---- Banner (Alt sayfa) ---- */
    .mst-banner {
        height: 400px;
    }
    .mst-banner-title {
        font-size: 60px;
    }

    /* ---- Proje Detay ---- */
    .mst-project-showcase-swiper .swiper-slide,
    .mst-project-showcase__single {
        aspect-ratio: 16 / 9;
    }

    /* ---- FNP Detail ---- */
    .fnp_detail h2,
    .fnp_detail h3,
    .fnp_detail h4,
    .fnp_detail h5,
    .fnp_detail h6 {
        font-size: 36px;
        line-height: 44px;
    }
}

/* ==========================================================================
   2) 1024px ve altı
   ========================================================================== */
@media (max-width: 1024px) {

    /* ---- Header ---- */
    .header-area-1__inner {
        gap: 12px;
        padding: 0 14px;
    }
    .header-area-1 .header__logo {
        padding: 10px 10px 10px 0;
    }
    .header-area-1 .header__logo img {
        max-width: 110px;
    }
    .header-area-1 .main-menu li a {
        font-size: 14px;
        padding: 28px 7px;
    }
    .header-area-1 .header-right .rr-btn-green {
        font-size: 13px;
        padding: 8px 14px;
    }

    /* ---- Hero / Video Slider ---- */
    .mst-video-hero {
        min-height: 80vh;
    }
    .mst-video-hero__title {
        font-size: clamp(28px, 4vw, 44px);
    }
    .mst-video-hero__desc {
        font-size: 16px;
        max-width: 500px;
    }
    .mst-video-hero__content {
        padding: 130px 0 70px;
    }
    .mst-video-hero__inner {
        max-width: 600px;
        padding-left: 0;
    }
    .mst-video-hero__badge {
        font-size: 11px;
        padding: 6px 14px;
        margin-bottom: 20px;
    }
    .hero__content .title {
        font-size: 42px;
        line-height: 50px;
    }
    .hero__content .desc {
        font-size: 15px;
        line-height: 24px;
    }
    .hero__content-wrap {
        margin-top: 28px;
        gap: 16px;
    }

    /* ---- Sections ---- */
    .section-spacing {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .section-spacing-120,
    .section-spacing-top-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .section-title__wrapper .title {
        font-size: 32px;
        line-height: 40px;
    }

    /* ---- About Section ---- */
    .about-section-2__wrapper {
        flex-direction: column;
    }

    /* ---- Steps Slider ---- */
    .mst-steps-slider {
        padding: 70px 0 60px;
    }
    .mst-steps-heading h2 {
        font-size: clamp(28px, 3.5vw, 48px);
    }

    /* ---- Technology / Parallax ---- */
    .technology__card .section-title__wrapper .title {
        font-size: 28px;
    }
    .technology__card .decs {
        font-size: 15px;
    }

    /* ---- Counter ---- */
    .counter__item h2 {
        font-size: 44px;
        line-height: 48px;
    }
    .counter__item .sub-title {
        font-size: 16px;
    }

    /* ---- Testimonial ---- */
    .testimonial__item .desc {
        font-size: 16px;
    }

    /* ---- Blog ---- */
    .blog__item .content .title {
        font-size: 20px;
    }

    /* ---- Banner ---- */
    .mst-banner {
        height: 350px;
    }
    .mst-banner-title {
        font-size: 50px;
    }

    /* ---- Footer ---- */
    .footer-3__big-text {
        font-size: 100px;
        line-height: 100px;
    }
    .footer-3__wrapper {
        padding-top: 120px;
    }

    /* ---- Görsel / Video taşma önleme ---- */
    video,
    iframe {
        max-width: 100%;
    }
    .mst-video-hero__video {
        object-fit: cover;
    }

    /* ---- FNP Detail ---- */
    .fnp_detail h2,
    .fnp_detail h3,
    .fnp_detail h4,
    .fnp_detail h5,
    .fnp_detail h6 {
        font-size: 32px;
        line-height: 40px;
    }
    .fnp_detail p,
    .fnp_detail ul li {
        font-size: 16px;
    }

    /* ---- Modal ---- */
    .mst-modal {
        width: min(920px, 94vw);
    }
}

/* ==========================================================================
   3) 992px ve altı
   ========================================================================== */
@media (max-width: 992px) {

    /* ---- Header ---- */
    .header-area-1 .header__nav {
        display: none;
    }
    .header-area-1__inner {
        padding: 8px 14px;
    }
    .header-area-1 .header__logo {
        border-right: none;
        padding: 8px 0;
    }
    .header-area-1 .header__logo img {
        max-width: 100px;
    }
    .header-area-1 .header-right {
        gap: 12px;
        border-left: none;
    }
    .header-area-1 .header-right .rr-btn-green {
        display: none;
    }
    .header-area-1 .header__navicon {
        display: block;
    }

    /* ---- Hero / Video Slider ---- */
    .mst-video-hero {
        min-height: 70vh;
    }
    .mst-video-hero__title {
        font-size: clamp(26px, 4vw, 38px);
    }
    .mst-video-hero__desc {
        font-size: 15px;
        max-width: 460px;
    }
    .mst-video-hero__content {
        padding: 120px 0 60px;
    }
    .hero__content .title {
        font-size: 36px;
        line-height: 44px;
    }
    .hero__content-wrap {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* ---- Sections ---- */
    .section-spacing {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .section-title__wrapper .title {
        font-size: 28px;
        line-height: 36px;
    }

    /* ---- About: İçerik + görsel yan yana → alt alta ---- */
    .about-section-2__wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .about-section-2__item,
    .about-section-2__box {
        width: 100%;
        max-width: 100%;
    }

    /* ---- Technology: 2 kolon → alt alta ---- */
    .technology .row .col-lg-7,
    .technology .row .col-lg-5 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .technology__wrapper {
        margin-top: 30px;
    }

    /* ---- Proje / Globe: 2 kolon → alt alta ---- */
    .rr-bg-gray .row .col-lg-5,
    .rr-bg-gray .row .col-lg-7 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    #globe {
        max-width: 600px;
        margin: 0 auto;
    }

    /* ---- Testimonial: 2 kolon → alt alta ---- */
    .testimonial .row .col-lg-5,
    .testimonial .row .col-lg-7 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .testimonial__content {
        margin-bottom: 30px;
    }

    /* ---- FAQ: 2 kolon → alt alta ---- */
    .faq .row .col-lg-5,
    .faq .row .col-lg-7 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .faq__content {
        margin-bottom: 30px;
    }

    /* ---- Blog: 2 kolon → alt alta ---- */
    .blog .row .col-lg-5,
    .blog .row .col-lg-7 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .blog__content {
        margin-bottom: 30px;
    }

    /* ---- Steps Slider: 2 kart ---- */
    .mst-step-card {
        flex: 0 0 calc(50% - 12px);
    }
    .mst-step-content h3 {
        font-size: 22px;
    }
    .mst-step-content p {
        font-size: 14px;
    }

    /* ---- Counter ---- */
    .counter__item h2 {
        font-size: 38px;
        line-height: 42px;
    }

    /* ---- Cards / Grids ---- */
    .mst-card-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .mst-card {
        grid-column: span 6;
    }

    /* ---- Service 2 (Hizmet detay) ---- */
    .service-2__item {
        margin-bottom: 20px;
    }

    /* ---- Footer: 2 kolon ---- */
    .footer-3__wrap .row .col-lg-4,
    .footer-3__wrap .row .col-lg-3,
    .footer-3__wrap .row .col-lg-5 {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }
    .footer-3__big-text {
        font-size: 80px;
        line-height: 80px;
    }
    .footer-3__widget.widget-col_1 {
        flex-direction: column;
        gap: 24px;
    }
    .footer-3__widget.widget-col_1::before {
        display: none;
    }
    .footer-3__widget.widget-col_2 {
        margin-left: 0;
        margin-right: 0;
    }
    .footer-3__widget.widget-col_3 {
        margin-left: 0;
    }

    /* ---- Forms ---- */
    .footer-3__input {
        border-radius: 12px;
    }
    .footer-3__input input {
        height: 56px;
        font-size: 14px;
    }

    /* ---- Banner ---- */
    .mst-banner {
        height: 300px;
        margin: 0 10px;
    }
    .mst-banner-title {
        font-size: 42px;
        margin-top: 30px;
    }

    /* ---- Service Detay ---- */
    .service-details .row .col-lg-8,
    .service-details .row .col-lg-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .servc_sticky {
        position: relative;
        top: 0;
        margin-top: 30px;
    }

    /* ---- Slider / Galeri taşma ---- */
    .swiper {
        overflow: hidden;
    }

    /* ---- Proje Detay ---- */
    .mst-project-showcase-swiper .swiper-slide,
    .mst-project-showcase__single {
        aspect-ratio: 16 / 10;
    }
    .mst-project-info-card {
        padding: 18px 20px;
        gap: 14px;
    }

    /* ---- Sertifika ---- */
    .mst-certificate-gallery .col-lg-4 {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }

    /* ---- Modal ---- */
    .mst-modal {
        width: min(880px, 95vw);
        max-height: 88vh;
    }
    .mst-modal-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   4) 768px ve altı
   ========================================================================== */
@media (max-width: 768px) {

    /* ---- Header ---- */
    .header-area-1__inner {
        padding: 6px 10px;
        gap: 8px;
    }
    .header-area-1 .header__logo {
        padding: 6px 0;
    }
    .header-area-1 .header__logo img {
        max-width: 90px;
    }
    .header-area-1 .header-right .rr-btn-green {
        display: none;
    }
    .header-top__wrap {
        padding: 4px 0;
    }
    .header-top__dec {
        font-size: 12px;
    }

    /* ---- Hero / Video Slider ---- */
    .mst-video-hero {
        min-height: 65vh;
    }
    .mst-video-hero__title {
        font-size: clamp(24px, 6vw, 34px);
        margin-bottom: 16px;
    }
    .mst-video-hero__desc {
        font-size: 14px;
        line-height: 1.55;
        max-width: 100%;
    }
    .mst-video-hero__content {
        padding: 110px 0 60px;
    }
    .mst-video-hero__inner {
        max-width: 100%;
        padding-left: 0;
    }
    .mst-video-hero__badge {
        font-size: 10px;
        padding: 5px 12px;
        margin-bottom: 14px;
    }
    .mst-video-hero__scroll {
        bottom: 16px;
    }
    .mst-video-hero .hero__content-wrap {
        margin-top: 24px;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    .hero__content .title {
        font-size: 28px;
        line-height: 36px;
    }
    .hero__content .desc {
        font-size: 14px;
        line-height: 22px;
    }
    .hero__content-wrap {
        margin-top: 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .hero__content-wrap .rr-btn-green {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ---- Sections ---- */
    .section-spacing {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .section-spacing-120,
    .section-spacing-top-120,
    .section-spacing-top,
    .section-spacing-bottom {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .section-title__wrapper .title {
        font-size: 24px;
        line-height: 32px;
    }
    .section-title__wrapper .sub-title {
        font-size: 12px;
    }

    /* ---- About ---- */
    .about-section-2__wrapper {
        flex-direction: column;
        gap: 20px;
    }
    .about-section__content .title {
        font-size: 26px;
    }

    /* ---- Steps Slider: tek kart ---- */
    .mst-steps-slider {
        padding: 50px 0 40px;
    }
    .mst-steps-container {
        width: calc(100% - 16px);
    }
    .mst-steps-heading h2 {
        font-size: clamp(24px, 5vw, 34px);
    }
    .mst-step-card {
        flex: 0 0 100%;
    }
    .mst-step-content {
        padding: 20px 18px;
    }
    .mst-step-content h3 {
        font-size: 20px;
    }
    .mst-step-content p {
        font-size: 14px;
        margin-bottom: 18px;
    }
    .mst-step-media {
        max-width: 220px;
    }
    .mst-slider-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 18px;
    }
    .mst-steps-slider-area {
        gap: 8px;
    }

    /* ---- Service ---- */
    .service__item {
        padding: 24px 18px;
    }
    .service__item .icon {
        width: 48px;
        height: 48px;
    }
    .service__arrow {
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ---- Technology / Parallax ---- */
    .technology .row .col-lg-7,
    .technology .row .col-lg-5 {
        width: 100%;
        flex: 0 0 100%;
    }
    .technology__card {
        padding: 30px 20px;
        border-radius: 16px;
    }
    .technology__card .section-title__wrapper .title {
        font-size: 24px;
    }
    .technology__wrapper {
        margin-top: 20px;
        min-height: 300px;
    }

    /* ---- Tüm kolonlar tek kolona ---- */
    .row [class*="col-lg-"],
    .row [class*="col-md-6"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* ---- Counter ---- */
    .counter__item {
        padding: 24px 16px;
        margin-bottom: 12px;
    }
    .counter__item h2 {
        font-size: 32px;
        line-height: 36px;
    }
    .counter__item .sub-title {
        font-size: 14px;
    }
    .funfact__content {
        padding: 24px 16px;
    }

    /* ---- Testimonial ---- */
    .testimonial__inner {
        padding: 30px 0;
    }
    .testimonial__item .desc {
        font-size: 14px;
        line-height: 22px;
    }
    .testimonial__info__content .title {
        font-size: 18px;
    }

    /* ---- FAQ ---- */
    .faq-2-area .accordion-body {
        padding: 0 16px 16px 16px;
    }
    .global-accordion-button .question {
        font-size: 15px;
    }

    /* ---- Blog ---- */
    .blog__content {
        padding: 24px 18px;
        margin-bottom: 20px;
    }
    .blog__item .content .title {
        font-size: 18px;
    }
    .blog__item .content .desc {
        font-size: 14px;
    }
    .blog-3__item {
        margin-bottom: 16px;
    }

    /* ---- Globe ---- */
    #globe {
        max-width: 100%;
    }
    .proje_detail_home p {
        font-size: 14px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    /* ---- Cards / Grids: Tek kolon ---- */
    .mst-card-grid {
        grid-template-columns: 1fr;
    }
    .mst-card {
        grid-column: span 1;
    }
    .mst-card h4 {
        font-size: 18px;
    }

    /* ---- Footer: Tek kolon ---- */
    .footer-3__wrap .row .col-lg-4,
    .footer-3__wrap .row .col-lg-3,
    .footer-3__wrap .row .col-lg-5,
    .footer-3__wrap .row .col-md-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .footer-3__big-text {
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 10px;
    }
    .footer-3__wrapper {
        margin: 0;
        padding-top: 80px;
        margin-top: -40px;
        border-radius: 0;
    }
    .footer-3__wrap {
        padding-top: 24px;
        padding-bottom: 30px;
    }
    .footer-3__widget.widget-col_1 {
        flex-direction: column;
        gap: 20px;
    }
    .footer-3__widget.widget-col_2 {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
    }
    .footer-3__widget.widget-col_3 {
        margin-left: 0;
    }
    .footer-3__title {
        font-size: 18px;
    }
    .footer-3__dec {
        font-size: 14px;
    }
    .footer-3__input {
        border-radius: 10px;
    }
    .footer-3__input input {
        height: 50px;
        font-size: 14px;
        padding-left: 16px;
    }
    .copyright-3__menu ul {
        flex-direction: column;
        gap: 8px;
    }
    .copyright-3__text {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    .copyright-3__text p {
        font-size: 13px;
        text-align: center;
    }
    .copyright-3__fnp {
        font-size: 12px;
    }

    /* ---- Forms ---- */
    .comment-form-wrap input,
    .comment-form-wrap textarea {
        font-size: 14px;
    }
    .contact-us-wrapper .contact-us__info {
        margin-bottom: 24px;
    }

    /* ---- Banner ---- */
    .mst-banner {
        height: 240px;
        margin: 0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }
    .mst-banner-title {
        font-size: 30px;
        margin-top: 20px;
    }
    .breadcrumb-section__page {
        margin-top: 20px;
    }

    /* ---- Görseller ---- */
    .about-section-2__box img,
    .funfact__media img,
    .blog__item .media img,
    .service-details .image img {
        width: 100%;
        height: auto;
    }

    /* ---- Video alanları ---- */
    video {
        max-width: 100%;
        height: auto;
    }
    .mst-video-hero__video {
        object-fit: cover;
    }
    .mst-step-media video {
        max-width: 100%;
        object-fit: cover;
    }

    /* ---- Buttons ---- */
    .rr-btn-green {
        font-size: 14px;
        padding: 12px 20px;
    }
    .rr-btn-green .btn-wrap .text-one,
    .rr-btn-green .btn-wrap .text-two {
        font-size: 14px;
    }

    /* ---- Proje Detay ---- */
    .mst-project-showcase-swiper .swiper-slide,
    .mst-project-showcase__single {
        aspect-ratio: 16 / 10;
    }
    .mst-project-showcase-prev,
    .mst-project-showcase-next {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }
    .mst-project-showcase-prev {
        left: 10px;
    }
    .mst-project-showcase-next {
        right: 10px;
    }
    .mst-project-showcase-thumbs img {
        height: 48px;
    }
    .mst-project-info-card {
        padding: 16px 14px;
        gap: 12px;
    }
    .mst-project-info-card__icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .mst-project-info-card__value {
        font-size: 15px;
    }
    .mst-project-lead {
        font-size: 16px;
        padding: 18px 20px;
    }
    .mst-project-detail__head .title {
        font-size: clamp(24px, 5vw, 36px);
    }
    .mst-project-gallery-card__media {
        border-radius: 12px;
    }

    /* ---- Sertifika ---- */
    .mst-certificate-gallery .col-lg-4,
    .mst-certificate-gallery .col-md-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* ---- Hizmet detay ---- */
    .service-2__item .title {
        font-size: 18px;
        margin-top: 16px;
    }

    /* ---- Blog 3 ---- */
    .blog-3__meta-list .date {
        font-size: 12px;
    }
    .blog-3 .blog_button {
        font-size: 14px;
    }

    /* ---- Modal ---- */
    .mst-modal {
        width: 96vw;
        max-height: 90vh;
    }
    .mst-modal-header {
        padding: 14px 16px;
    }
    .mst-modal-title {
        font-size: 20px;
    }
    .mst-modal-body {
        padding: 12px 14px 16px;
    }

    /* ---- Side Info (Mobile Menu) ---- */
    .side-info {
        width: 300px;
    }
    .offset-logo {
        width: 120px;
    }

    /* ---- FNP Detail ---- */
    .fnp_detail h2,
    .fnp_detail h3,
    .fnp_detail h4,
    .fnp_detail h5,
    .fnp_detail h6 {
        font-size: 24px;
        line-height: 32px;
    }
    .fnp_detail p,
    .fnp_detail ul li {
        font-size: 15px;
        line-height: 1.6;
    }

    /* ---- Proje Yıl Filtre ---- */
    .mst-project-year-filter {
        gap: 6px;
    }
    .mst-project-year-btn {
        font-size: 13px;
        padding: 9px 16px;
    }

    /* ---- Yatay scroll sorunlarını gider ---- */
    main {
        overflow-x: hidden;
    }
    .container,
    .rr-container-1350,
    .rr-container-1800 {
        overflow-x: hidden;
    }
}

/* ==========================================================================
   Ekstra: 480px ve altı (küçük telefonlar)
   ========================================================================== */
@media (max-width: 480px) {

    .mst-video-hero__title {
        font-size: 22px;
    }
    .mst-video-hero__desc {
        font-size: 13px;
    }
    .mst-video-hero__content {
        padding: 100px 0 50px;
    }
    .hero__content .title {
        font-size: 24px;
        line-height: 30px;
    }
    .section-title__wrapper .title {
        font-size: 20px;
        line-height: 28px;
    }
    .counter__item h2 {
        font-size: 28px;
        line-height: 32px;
    }
    .footer-3__big-text {
        font-size: 36px;
        line-height: 36px;
    }
    .mst-banner {
        height: 200px;
    }
    .mst-banner-title {
        font-size: 24px;
    }
    .mst-step-content h3 {
        font-size: 18px;
    }
    .rr-btn-green {
        font-size: 13px;
        padding: 10px 16px;
    }
    .mst-modal-title {
        font-size: 18px;
    }
}