@charset "utf-8";

/* Şenkal Yapı - güvenli responsive düzeltmeleri */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body { min-width: 0; }

.container {
    width: min(1200px, calc(100% - 40px));
    max-width: none;
    margin-inline: auto;
}

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

@media (max-width: 1200px) {
    .hero-left h1 { font-size: 56px; }
    .hero-right { width: 320px; flex: 0 0 320px; }
}

@media (max-width: 992px) {
    .container { width: calc(100% - 32px); }

    #header {
        width: 100%;
        max-width: 100vw;
        padding: 8px 0;
    }

    .header-container { min-width: 0; }
    .logo { width: 145px; height: 68px; flex: 0 0 145px; }
    .header-right { display: none; }
    .mobile-menu { display: block; cursor: pointer; flex: 0 0 auto; }

    .navbar {
        display: block;
        position: fixed;
        top: 84px;
        left: -100%;
        width: 100%;
        max-width: 100vw;
        padding: 30px 24px;
        background: #111827;
        transition: left .35s ease;
        visibility: hidden;
    }
    .navbar.show { left: 0; visibility: visible; }
    .navbar ul { flex-direction: column; gap: 24px; }
    #header.active .navbar a { color: #fff; }

    #hero {
        width: 100%;
        max-width: 100vw;
        min-height: 100svh;
        height: auto;
        overflow: hidden;
    }
    .hero-video, #hero .overlay { inset: 0; width: 100%; height: 100%; }
    .hero-container {
        width: calc(100% - 32px);
        min-height: 100svh;
        height: auto;
        padding-top: 120px;
        padding-bottom: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 38px;
        text-align: center;
    }
    .hero-left, .hero-right {
        width: 100%;
        max-width: 100%;
        flex: 0 1 auto;
        min-width: 0;
    }
    .hero-left p { width: 100%; max-width: 720px; margin-inline: auto; }
    .hero-buttons { justify-content: center; flex-wrap: wrap; gap: 14px; }
    .hero-right { max-width: 520px; margin-inline: auto; }

    .about-wrapper, #contact .container { grid-template-columns: minmax(0, 1fr); gap: 42px; }
    .about-image, .about-content, .contact-left, .contact-right { min-width: 0; }
    .services-grid, .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-grid, .testimonial-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    section { scroll-margin-top: 80px; }
    #about, #services, #why-us, #projects, #testimonials, #contact { padding: 80px 0; }
    .section-title { margin-bottom: 45px; }
    .section-title h2 { font-size: clamp(28px, 8vw, 36px); }

    .hero-left h1 {
        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.12;
        overflow-wrap: normal;
        word-break: normal;
    }
    .hero-left p { font-size: 15px; line-height: 1.8; }
    .hero-subtitle { font-size: 13px; letter-spacing: 1.8px; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .hero-buttons .btn, .hero-buttons .btn-outline {
        width: min(100%, 300px);
        margin: 0;
    }
    .hero-card { padding: 24px 20px; }
    .card-item { gap: 14px; margin-bottom: 18px; text-align: left; }
    .card-item i { width: 54px; height: 54px; flex: 0 0 54px; font-size: 21px; }

    .services-grid, .project-grid, .why-grid, .testimonial-wrapper, .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .about-list { grid-template-columns: minmax(0, 1fr); }
    .project-card { height: 290px; }
    .contact-right { padding: 26px; }
    .footer-grid { text-align: center; }
    .footer-grid img { margin-inline: auto; }
    #cta h2 { font-size: 28px; line-height: 1.45; }
}

@media (max-width: 576px) {
    .container, .hero-container { width: calc(100% - 28px); }
    .logo { width: 125px; height: 58px; flex-basis: 125px; }
    .mobile-menu { font-size: 25px; }
    .navbar { top: 74px; }
    .hero-container { padding-top: 105px; padding-bottom: 64px; gap: 28px; }
    .hero-left h1 { font-size: clamp(31px, 10vw, 39px); }
    .hero-left p { font-size: 14px; line-height: 1.75; margin-bottom: 28px; }
    .btn, .btn-outline { padding: 15px 22px; font-size: 15px; }
    .about-content h3 { font-size: 27px; }
    .service-card { padding: 32px 20px; }
    .service-card h3 { font-size: 21px; }
    .project-card { height: 250px; }
    .project-overlay { padding: 20px; }
    .project-overlay h3 { font-size: 20px; }
    .contact-info > div { gap: 14px; }
    .contact-info i { width: 52px; height: 52px; flex: 0 0 52px; }
    .contact-info p { overflow-wrap: anywhere; }
    .whatsapp { width: 55px; height: 55px; right: 15px; bottom: 15px; font-size: 26px; }
    #scrollTop { width: 48px; height: 48px; right: 18px; bottom: 80px; }
    .scroll-down { display: none; }
}

@media (max-width: 400px) {
    .hero-card { padding: 20px 16px; }
    .card-item h3 { font-size: 16px; }
    .project-card { height: 220px; }
    .contact-right { padding: 20px 16px; }
}