/* =============================================================
   GÖKHAN METAL — Responsive CSS
   Breakpoints:
   - Tablet     : max-width: 991px
   - Tablet only: min-width: 768px & max-width: 991px
   - Mobile     : max-width: 767px
   - Small mob  : max-width: 480px
   ============================================================= */

/* -------------------------------------------------------
   GENEL — Görsel taşmayı önle
   ------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------
   HEADER
   ------------------------------------------------------- */
@media (max-width: 991px) {
    .header-middle .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .header-middle .megamenu {
        font-size: 1.2rem;
    }
    .header-middle .megamenu ul > li > a {
        padding: 0.5rem 0 0.5rem 0.8rem;
        font-size: 1.2rem;
    }
    .header-middle .megamenu ul .submenu li a {
        font-size: 1.1rem;
        padding-left: 1.2rem;
    }
}

/* -------------------------------------------------------
   ANA SAYFA — SLIDER
   ------------------------------------------------------- */

/* Taşmayı önle — tüm ekranlarda */
.intro-slider {
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

.intro-slider .owl-stage-outer {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}

.intro-slider .owl-stage {
    display: flex !important;
}

.intro-slider .owl-item {
    overflow: hidden !important;
    position: relative !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

/* Aktif olmayan slide'lar görünmez değil ama z-index düşük */
.intro-slider .owl-item:not(.active) {
    z-index: 1 !important;
}
.intro-slider .owl-item.active {
    z-index: 2 !important;
}

.intro-slider .mobile-slide-img {
    display: none;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .intro-slider .banner-slide {
        height: 420px !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    .intro-slider .mobile-slide-img {
        display: none !important;
    }
}

/* Mobil */
@media (max-width: 767px) {
    .intro-slider .banner-slide {
        height: 260px !important;
        background-image: none !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .intro-slider .banner-slide .mobile-slide-img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    .intro-slider .owl-nav {
        display: none !important;
    }
    .intro-slider .owl-dots {
        bottom: 10px !important;
    }
}

/* Küçük mobil */
@media (max-width: 480px) {
    .intro-slider .banner-slide {
        height: 220px !important;
    }
    .intro-slider .banner-slide .mobile-slide-img {
        height: 220px !important;
    }
}

/* -------------------------------------------------------
   ANA SAYFA — KATEGORİ GÖRSELLERİ
   ------------------------------------------------------- */

/* Container: taşmayı önle ve sabit yükseklik garantisi */
.category-media {
    overflow: hidden !important;
    display: block !important;
}

.category-media img {
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Desktop — orijinal yükseklik korunuyor */
@media (min-width: 992px) {
    .category-media {
        height: 400px !important;
    }
    .category-media img {
        height: 400px !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .category-media {
        height: 280px !important;
    }
    .category-media img {
        height: 280px !important;
    }
}

/* Mobil */
@media (max-width: 767px) {
    .category-media {
        height: 200px !important;
    }
    .category-media img {
        height: 200px !important;
    }
}

/* Küçük mobil */
@media (max-width: 480px) {
    .category-media {
        height: 170px !important;
    }
    .category-media img {
        height: 170px !important;
    }
}

/* -------------------------------------------------------
   ANA SAYFA — KATEGORİ OWL CAROUSEL (tek sütun mobilde)
   ------------------------------------------------------- */
@media (max-width: 767px) {
    .categories-section .owl-carousel .category {
        margin-bottom: 0;
    }
    .categories-section .title-wrapper {
        padding: 0 1rem;
    }
    .categories-section .title-wrapper h2 {
        font-size: 2rem;
    }
}

/* -------------------------------------------------------
   ANA SAYFA — İŞ ORTAKLARI (BRANDS)
   ------------------------------------------------------- */
@media (max-width: 767px) {
    .brands-list .brand-item {
        padding: 10px;
    }
    .brands-list .brand-item img {
        max-width: 120px;
        height: auto;
    }
    .brands-list h2.title {
        font-size: 2rem;
    }
}

/* -------------------------------------------------------
   ANA SAYFA — CTA BANNER
   ------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .banner-cta2 {
        padding: 70px 0 !important;
    }
    .banner-cta2 .banner-title {
        font-size: 2.8rem !important;
    }
    .banner-cta2 .banner-subtitle {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 767px) {
    .banner-cta2 {
        padding: 50px 0 !important;
    }
    .banner-cta2 .banner-title {
        font-size: 2rem !important;
        margin-bottom: 1.5rem !important;
    }
    .banner-cta2 .banner-subtitle {
        font-size: 1.2rem !important;
    }
    .banner-cta2 .banner-content {
        padding: 0 1.5rem;
    }
}

/* -------------------------------------------------------
   PAGE HEADER (category, hakkimizda, iletisim, referanslar)
   ------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .page-header {
        min-height: 200px !important;
        padding: 3rem 2rem !important;
        background-size: cover !important;
        background-position: center !important;
    }
    .page-header .page-title {
        font-size: 2.4rem !important;
    }
    .page-header .page-desc {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 767px) {
    .page-header {
        min-height: 160px !important;
        padding: 2.5rem 1.5rem !important;
        background-size: cover !important;
        background-position: center !important;
    }
    .page-header .page-title {
        font-size: 2rem !important;
    }
    .page-header .page-desc {
        font-size: 1.2rem !important;
    }
}

/* -------------------------------------------------------
   CATEGORY.PHP — ÜRÜN GÖRSELLERİ
   ------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .products-gallery .product-media img {
        height: 230px !important;
    }
}

@media (max-width: 767px) {
    .products-gallery .product-media img {
        height: 190px !important;
    }
}

@media (max-width: 480px) {
    .products-gallery .product-media img {
        height: 160px !important;
    }
}

/* -------------------------------------------------------
   HAKKIMİZDA — FEATURE & SERVICE BOXES
   ------------------------------------------------------- */
@media (max-width: 767px) {
    .feature-box,
    .service-box {
        padding: 1.5rem !important;
        margin-bottom: 0;
    }
    .feature-box i,
    .service-box i {
        font-size: 2rem !important;
        margin-bottom: 0.8rem !important;
    }
    .about-section .row.align-items-center .col-lg-6:first-child {
        margin-bottom: 2rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .feature-box,
    .service-box {
        padding: 1.8rem !important;
    }
}

/* -------------------------------------------------------
   İLETİŞİM — GOOGLE HARİTA
   ------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .grey-section iframe {
        height: 360px !important;
    }
}

@media (max-width: 767px) {
    .grey-section iframe {
        height: 280px !important;
    }
    /* İletişim kartı padding */
    .contact-section .grey-section {
        padding: 2rem 1.5rem !important;
    }
    /* Gönder butonu tam genişlik */
    .contact-section .btn.btn-dark {
        width: 100%;
        justify-content: center;
    }
}

/* -------------------------------------------------------
   REFERANSLAR — LOGO KARTLARI
   ------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .reference-card {
        padding: 25px 15px !important;
    }
    .reference-media img {
        max-width: 140px !important;
    }
    .counter-title {
        font-size: 34px !important;
    }
}

@media (max-width: 767px) {
    .reference-card {
        padding: 20px 12px !important;
    }
    .reference-media {
        min-height: 70px !important;
        margin-bottom: 15px !important;
    }
    .reference-media img {
        max-width: 120px !important;
    }
    .reference-name {
        font-size: 12px !important;
    }
    .reference-category {
        font-size: 11px !important;
    }
    .counter-title {
        font-size: 28px !important;
    }
    .counter-item {
        padding: 20px 8px !important;
    }
    /* CTA Banner */
    .references-grid ~ * .banner-cta2,
    section.banner.banner-cta2 {
        padding: 50px 0 !important;
    }
}

/* -------------------------------------------------------
   FOOTER — Tüm şube sütunlarını göster
   ------------------------------------------------------- */
@media (max-width: 991px) {
    /* Tüm footer sütunlarını görünür yap (display:none'ı override et) */
    .footer-middle .col-lg-2 {
        display: block !important;
    }
    /* 2'li grid düzeni */
    .footer-middle .col-lg-3,
    .footer-middle .col-lg-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .footer-middle .widget-title {
        font-size: 1.5rem;
    }
    .footer-middle .address-list li {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    /* Küçük mobilede tek sütun */
    .footer-middle .col-lg-3,
    .footer-middle .col-lg-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Footer bottom copyright */
@media (max-width: 767px) {
    .footer-bottom .copyright {
        text-align: center;
        font-size: 1.1rem;
        padding: 0 1rem;
    }
}

/* -------------------------------------------------------
   WHATSAPP BUTONU — İçerikle çakışmayı önle
   ------------------------------------------------------- */
@media (max-width: 767px) {
    .whatsapp-button {
        bottom: 20px !important;
        right: 15px !important;
        width: 52px !important;
        height: 52px !important;
        z-index: 9999 !important;
    }
    .whatsapp-button i {
        font-size: 26px !important;
    }
}

/* -------------------------------------------------------
   SCROLL TOP BUTONU
   ------------------------------------------------------- */
@media (max-width: 767px) {
    .scroll-top {
        bottom: 85px;
        right: 15px;
    }
}

/* -------------------------------------------------------
   GENEL SAYFA BOŞLUKLARI
   ------------------------------------------------------- */
@media (max-width: 767px) {
    .mt-10 { margin-top: 4rem !important; }
    .mb-10 { margin-bottom: 4rem !important; }
    .pt-10 { padding-top: 4rem !important; }
    .pb-10 { padding-bottom: 4rem !important; }
    .mt-8  { margin-top: 3rem !important; }
    .mb-8  { margin-bottom: 3rem !important; }
    .mt-5  { margin-top: 2rem !important; }
    .pt-5  { padding-top: 2rem !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .mt-10 { margin-top: 6rem !important; }
    .mb-10 { margin-bottom: 6rem !important; }
    .pt-10 { padding-top: 6rem !important; }
    .pb-10 { padding-bottom: 6rem !important; }
}