/* ═══════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN - TABLET (768px - 1024px)                            */
/* ═══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1024px) {
    /* NAVBAR */
    .navbar-container {
        padding: 0 15px;
        height: 70px;
    }

    .company-name {
        font-size: 18px;
    }

    .tagline {
        font-size: 11px;
    }

    .nav-links {
        gap: 20px;
    }

    .nav-link {
        font-size: 14px;
    }

    /* HERO */
    .hero {
        height: 500px;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    /* SECTION TITLES */
    .section-title {
        font-size: 36px;
    }

    /* ABOUT */
    .about-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    /* SERVICES */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .service-card {
        padding: 30px;
    }

    .service-icon {
        width: 70px;
        height: 70px;
        font-size: 35px;
    }

    /* PROJECTS */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .project-card {
        height: 250px;
    }

    /* GALLERY */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    /* ADVANTAGES */
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* CONTACT */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* FOOTER */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN - MOBİL (0px - 767px)                                */
/* ═══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 767px) {
    /* ─────────────────────────────────────────────────────────────────── */
    /* NAVBAR - MOBİL MENÜ                                               */
    /* ─────────────────────────────────────────────────────────────────── */

    .navbar-container {
        padding: 0 15px;
        height: 60px;
        flex-wrap: nowrap;
    }

    .company-name {
        font-size: 16px;
    }

    /* Tagline mobilde küçük ve tek satır */
    .tagline {
        display: block;
        font-size: 9px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
        line-height: 1.2;
    }

    .logo-img {
        width: 40px;
        height: 40px;
    }

    /* Logo bölümünü kompakt tut */
    .logo-section {
        gap: 10px;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }

    /* HAMBURGER MENÜ GÖSTER */
    .hamburger {
        display: flex;
    }

    /* MENÜ LİNKLERİNİ GİZLE VE MENÜ YAPIN */
    .nav-links {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: #1a472a;
        gap: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease, visibility 0.3s ease;
        z-index: 999;
        list-style: none;
        display: flex;
        box-shadow: none;
    }

    /* MENÜ AÇIK DURUMU */
    .nav-links.active {
        max-height: 500px;
        padding: 10px 0;
        visibility: visible;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    /* MOBIL MENÜ LİNKLERİ */
    .nav-links li {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .nav-links .nav-link {
        display: block;
        padding: 15px 20px;
        color: white;
    }

    .nav-links .nav-link::after {
        display: none;
    }

    .nav-links .cta-button {
        margin: 10px 20px;
        display: inline-flex;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* HERO - MOBİL                                                       */
    /* ─────────────────────────────────────────────────────────────────── */

    .hero {
        height: auto;
        min-height: 400px;
        padding: 60px 0 40px;
    }

    .hero-bg {
        background-attachment: scroll;
    }

    .hero-content {
        padding: 20px;
        position: relative;
        z-index: 2;
        width: 100%;
    }

    .hero-title {
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .hero-subtitle {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .hero-buttons {
        gap: 10px;
        margin-bottom: 20px;
    }

    .btn {
        padding: 12px 25px;
        font-size: 14px;
    }

    .scroll-arrow {
        display: none;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* BÖLÜM BAŞLIKLARI - MOBİL                                           */
    /* ─────────────────────────────────────────────────────────────────── */

    .section-header {
        margin-bottom: 30px;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .section-subtitle {
        font-size: 14px;
        margin-bottom: 15px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* HAKKIMIZDA - MOBİL                                                */
    /* ─────────────────────────────────────────────────────────────────── */

    .about {
        padding: 50px 20px;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-subtitle {
        font-size: 22px;
    }

    .about-description {
        font-size: 15px;
    }

    .statistics {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .stat-item {
        padding: 15px;
    }

    .stat-number {
        font-size: 28px;
    }

    .stat-label {
        font-size: 12px;
    }

    .responsive-image {
        border-radius: 8px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* HİZMETLER - MOBİL                                                  */
    /* ─────────────────────────────────────────────────────────────────── */

    .services {
        padding: 50px 20px;
    }

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

    .service-card {
        padding: 25px;
    }

    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 30px;
        margin-bottom: 15px;
    }

    .service-title {
        font-size: 18px;
    }

    .service-description {
        font-size: 14px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* PROJELER - MOBİL                                                   */
    /* ─────────────────────────────────────────────────────────────────── */

    .projects {
        padding: 50px 20px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .project-card {
        height: 200px;
    }

    .project-title {
        font-size: 18px;
    }

    .project-description {
        font-size: 13px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* GALERİ - MOBİL                                                     */
    /* ─────────────────────────────────────────────────────────────────── */

    .gallery {
        padding: 50px 20px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .gallery-overlay {
        font-size: 30px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* NEDEN BİZ - MOBİL                                                  */
    /* ─────────────────────────────────────────────────────────────────── */

    .why-us {
        padding: 50px 20px;
    }

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

    .advantage-item {
        padding: 20px;
        border-left: none;
        border-top: 4px solid #FF7A3D;
    }

    .advantage-icon {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }

    .advantage-title {
        font-size: 18px;
    }

    .advantage-description {
        font-size: 13px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* İLETİŞİM - MOBİL                                                   */
    /* ─────────────────────────────────────────────────────────────────── */

    .contact {
        padding: 50px 20px;
    }

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

    .contact-form-title {
        font-size: 20px;
    }

    .form-label {
        font-size: 13px;
    }

    .form-input {
        padding: 10px;
        font-size: 16px;
    }

    .contact-info-title {
        font-size: 20px;
    }

    .contact-info-item {
        gap: 12px;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
        flex-shrink: 0;
    }

    .contact-label {
        font-size: 12px;
    }

    .contact-value {
        font-size: 14px;
    }

    .social-links {
        flex-wrap: wrap;
    }

    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* FOOTER - MOBİL                                                     */
    /* ─────────────────────────────────────────────────────────────────── */

    .footer {
        padding: 40px 20px 20px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 0;
    }

    .footer-title {
        font-size: 16px;
    }

    .footer-description {
        font-size: 13px;
    }

    .footer-links {
        gap: 8px;
    }

    .footer-links a {
        font-size: 13px;
    }

    .footer-bottom {
        padding-top: 20px;
    }

    .copyright {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .footer-info {
        font-size: 12px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* BAŞARI MESAJI - MOBİL                                              */
    /* ─────────────────────────────────────────────────────────────────── */

    .success-message {
        top: auto;
        bottom: 20px;
        right: 20px;
        left: 20px;
        max-width: none;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* LIGHTBOX - MOBİL                                                   */
    /* ─────────────────────────────────────────────────────────────────── */

    .lightbox-content {
        max-width: 95%;
    }

    .lightbox-image {
        max-height: 70vh;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
        font-size: 30px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN - ÇOOK KÜÇÜK MOBİL (0px - 480px)                    */
/* ═══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 480px) {
    /* ─────────────────────────────────────────────────────────────────── */
    /* NAVBAR - ÇOOK KÜÇÜK                                                */
    /* ─────────────────────────────────────────────────────────────────── */

    .navbar-container {
        height: 55px;
    }

    /* İsmi gizleme - küçük font ile göster */
    .company-name {
        font-size: 12px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    .logo-section {
        gap: 8px;
    }

    /* Navbar 55px yüksekliğinde, dropdown buna göre */
    .nav-links {
        top: 55px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* HERO - ÇOOK KÜÇÜK                                                  */
    /* ─────────────────────────────────────────────────────────────────── */

    .hero {
        height: auto;
        min-height: 320px;
        padding: 50px 0 35px;
    }

    .hero-title {
        font-size: 22px;
    }

    .hero-subtitle {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .hero-buttons {
        flex-direction: column;
        margin-bottom: 15px;
    }

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

    /* ─────────────────────────────────────────────────────────────────── */
    /* BÖLÜM BAŞLIKLARI - ÇOOK KÜÇÜK                                      */
    /* ─────────────────────────────────────────────────────────────────── */

    .section-title {
        font-size: 24px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* HAKKIMIZDA - ÇOOK KÜÇÜK                                            */
    /* ─────────────────────────────────────────────────────────────────── */

    .about {
        padding: 40px 15px;
    }

    .about-subtitle {
        font-size: 18px;
    }

    .about-description {
        font-size: 14px;
    }

    .stat-number {
        font-size: 24px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* HİZMETLER - ÇOOK KÜÇÜK                                             */
    /* ─────────────────────────────────────────────────────────────────── */

    .services {
        padding: 40px 15px;
    }

    .service-card {
        padding: 20px;
    }

    .service-icon {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }

    .service-title {
        font-size: 16px;
    }

    .service-description {
        font-size: 13px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* PROJELER - ÇOOK KÜÇÜK                                              */
    /* ─────────────────────────────────────────────────────────────────── */

    .projects {
        padding: 40px 15px;
    }

    .project-card {
        height: 180px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* GALERİ - ÇOOK KÜÇÜK                                                */
    /* ─────────────────────────────────────────────────────────────────── */

    .gallery {
        padding: 40px 15px;
    }

    .gallery-grid {
        gap: 8px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* İLETİŞİM - ÇOOK KÜÇÜK                                              */
    /* ─────────────────────────────────────────────────────────────────── */

    .contact {
        padding: 40px 15px;
    }

    .contact-form-title {
        font-size: 18px;
    }

    .contact-info-title {
        font-size: 18px;
    }

    .contact-icon {
        width: 40px;
        height: 40px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* FOOTER - ÇOOK KÜÇÜK                                                */
    /* ─────────────────────────────────────────────────────────────────── */

    .footer {
        padding: 30px 15px 15px;
    }

    .footer-content {
        gap: 20px;
    }

    .footer-title {
        font-size: 14px;
    }

    /* ─────────────────────────────────────────────────────────────────── */
    /* BAŞARI MESAJI - ÇOOK KÜÇÜK                                         */
    /* ─────────────────────────────────────────────────────────────────── */

    .success-message {
        padding: 20px 15px;
        max-width: none;
    }

    .success-content {
        gap: 10px;
    }

    .success-content i {
        font-size: 24px;
    }

    .success-content h3 {
        font-size: 16px;
    }

    .success-content p {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* UTILITY CLASSES (YARDIMCI SINIFLAR)                                    */
/* ═══════════════════════════════════════════════════════════════════════ */

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media print {
    body {
        background: white;
    }

    .navbar {
        display: none;
    }

    .hero {
        display: none;
    }

    .footer {
        display: none;
    }
}