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

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        padding: 0 16px;
    }

    .section {
        padding: 42px 0;
    }

    /* ===============================
            HEADER (MOBILE)
    =============================== */

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

    /* İç hizalama */
    .nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 16px;
        /* 🔥 Mobilde güzel bir sağ-sol boşluk */
        gap: 10px;
        /* İç elemanlar arasında nefes alan boşluk */
    }

    /* LOGO */
    .logo img {
        height: 46px;
        /* Mobil için ideal yükseklik */
    }

    /* Desktop menüyü gizle */
    .main-nav {
        display: none !important;
    }

    /* DİL BUTONLARI */
    .lang-switch {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .lang-switch button {
        width: auto;
        height: 32px;
        padding: 0 10px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .lang-switch button img {
        width: 14px;
        height: 14px;
    }

    /* HAMBURGER BUTTON */
    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 32px;
        height: 28px;

        background: transparent;
        border: none;
        cursor: pointer;

        margin-left: auto;
        /* 🔥 Hamburger her zaman sağa yaslanır */
        z-index: 2000;
    }

    .mobile-menu-btn span {
        width: 100%;
        height: 3.5px;
        background: #b5121b;
        border-radius: 4px;
        transition: .3s ease;
    }

    /* X animasyonu */
    .mobile-menu-btn.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* MOBİL MENÜ AÇILIR ALAN */
    .mobile-nav {
        position: fixed;
        top: 72px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 20px 18px;

        display: none;
        flex-direction: column;
        gap: 14px;

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        z-index: 1999;
    }

    /* Açık hal */
    .mobile-nav.show {
        display: flex !important;
    }

    .mobile-nav a {
        text-decoration: none;
        color: #1f2933;
        padding: 10px 0;
        font-size: 1rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .mobile-nav a:last-child {
        border-bottom: none;
    }

    /* ===============================
           HERO TAM EKRAN
    =============================== */

    .hero-video-wrapper {
        width: 100%;
        height: 100vh;
        max-height: 780px;
        position: relative;
    }

    .hero-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .hero-text-content {
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 0 20px;
        width: 90%;
        text-align: center;
    }

    .hero-text-content h1 {
        font-size: 2rem;
        line-height: 1.25;
    }

    .hero-text-content p {
        font-size: 1rem;
        margin-bottom: 22px;
    }

    .hero-btn {
        padding: 12px 24px;
        font-size: 1rem;
    }

    /* ===============================
           ABOUT
    =============================== */

    .split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .image-frame {
        height: auto;
    }

    .image-frame img {
        width: 100%;
    }

    .about-list li {
        font-size: 0.9rem;
        transform: translateY(18px);
    }

    /* ===============================
          PROJECTS
    =============================== */

    .project-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .project-img {
        height: 160px;
    }

    .project-card {
        padding: 16px;
    }

    .project-card:hover {
        transform: none;
        box-shadow: var(--shadow-soft);
    }

    /* ===============================
           NEWS
    =============================== */

    .news-slider {
        height: 220px;
    }

    .news-title {
        font-size: 1.2rem;
    }

    .news-arrow {
        padding: 6px 10px;
        font-size: 1.4rem;
    }

    .news-pagination span {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

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

    .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

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

    .about-bullets li {
        font-size: 0.9rem;
    }

    .about-ribbon {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .about-ribbon-text {
        text-align: center;
    }

    /* ===============================
           STATS
    =============================== */

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .stat-box {
        padding: 12px;
    }

    .stat-box h3 {
        font-size: 1.4rem;
    }

    /* ===============================
           STORY & MV
    =============================== */

    .about-story {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mv-box {
        padding: 16px;
    }

    /* ===============================
           CONTACT
    =============================== */

    .contact-form {
        padding: 16px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 0.9rem;
    }

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

    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-social img {
        width: 22px;
        height: 22px;
    }
}