/* ==================================================
   İŞ ORTAĞIM - KAPSAMLI MOBİL UYUMLULUK CSS
   Tüm sayfalar için responsive düzenlemeler
   ================================================== */

/* =============================================
   GENEL MOBİL DÜZENLEMELER
   ============================================= */

/* Yatay scroll engelle */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Tüm görseller responsive */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* =============================================
   MOBİL NAVBAR (768px ve altı)
   ============================================= */
@media (max-width: 768px) {
    /* Üst navbar'ı mobilde gizle - mobil navbar var zaten */
    .header-wrapper,
    .header,
    header.header,
    .main-header,
    .desktop-header,
    .nav-menu,
    nav.navbar:not(.mobile-navbar),
    #header,
    .header-area {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Mobil navbar görünsün */
    .mobile-navbar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9998 !important;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
        padding: 12px 15px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
        border-bottom: 1px solid rgba(212, 210, 91, 0.3) !important;
    }
    
    .mobile-navbar-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    
    /* Hamburger butonu gizle - bottom nav var */
    .mobile-navbar-toggle {
        display: none !important;
    }
    
    /* Logo ortalansın */
    .mobile-navbar-logo-wrapper {
        flex: 1 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
    
    .mobile-navbar-logo {
        height: 35px !important;
        width: auto !important;
    }
    
    /* Sağ taraf - Giriş Yap / Hesabım butonu */
    .mobile-navbar-actions {
        display: flex !important;
        align-items: center !important;
    }
    
    .mobile-navbar-login-btn,
    .mobile-navbar-user-btn {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 14px !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-navbar-login-btn {
        background: linear-gradient(135deg, #d4d25b 0%, #c4c24b 100%) !important;
        color: #000 !important;
        box-shadow: 0 4px 15px rgba(212, 210, 91, 0.4) !important;
    }
    
    .mobile-navbar-login-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(212, 210, 91, 0.6) !important;
    }
    
    .mobile-navbar-login-btn i {
        font-size: 16px !important;
    }
    
    .mobile-navbar-user-btn {
        background: rgba(212, 210, 91, 0.2) !important;
        color: #d4d25b !important;
        border: 1px solid rgba(212, 210, 91, 0.5) !important;
    }
    
    .mobile-navbar-user-btn:hover {
        background: rgba(212, 210, 91, 0.3) !important;
    }
    
    .mobile-navbar-user-btn i {
        font-size: 18px !important;
    }
    
    /* Body padding - üst ve alt navbar için */
    body {
        padding-top: 60px !important;
        padding-bottom: 75px !important;
    }
    
    /* Bottom nav görünsün ve tüm cihazlara uyumlu */
    .mobile-bottom-nav {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
    }
    
    .mobile-bottom-nav-items {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .mobile-bottom-nav-item {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* =============================================
   ANA SAYFA - MOBİL
   ============================================= */
@media (max-width: 768px) {
    /* Domain Hero Section */
    section.search-domain.domain-hero,
    .search-domain {
        padding: 80px 15px 50px 15px !important;
        min-height: auto !important;
    }
    
    .search-domain .domain-hero-head h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
    
    .search-domain .domain-hero-head p {
        font-size: 14px !important;
    }
    
    /* Domain arama formu */
    .search-domain-content {
        padding: 20px !important;
        border-radius: 15px !important;
    }
    
    .search-domain-content form {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .search-domain-content input,
    .search-domain-content select,
    .search-domain-content button {
        width: 100% !important;
        flex: none !important;
        min-width: 100% !important;
    }
    
    /* Domain uzantı kartları */
    .domain-type {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .single-domain-type {
        height: auto !important;
        min-height: 90px !important;
        padding: 15px !important;
    }
    
    .single-domain-type h3 {
        font-size: 14px !important;
    }
    
    .single-domain-type span {
        font-size: 15px !important;
    }
    
    /* Paketler bölümü */
    section.sec-normal {
        padding: 50px 15px !important;
    }
    
    .section-heading {
        font-size: 24px !important;
    }
    
    .section-subheading {
        font-size: 14px !important;
    }
    
    /* Paket kartları - tek sütun */
    section.sec-normal .row .col-md-4,
    section.sec-normal .row .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* Referanslar ve Blog kartları */
    section.services div[style*="grid-template-columns"],
    section.blog div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Bilgilendirme kartları */
    .help-card-modern {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }
    
    .help-card-icon {
        margin-bottom: 15px !important;
    }
}

/* =============================================
   PAKETLER SAYFASI - MOBİL
   ============================================= */
@media (max-width: 768px) {
    /* Sidebar'ı mobilde gizle */
    .col-md-4.d-none.d-lg-block,
    .sidebar {
        display: none !important;
    }
    
    /* Ana içerik tam genişlik */
    .col-md-8,
    .col-md-8.col-sm-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* Paketler sayfası container */
    div[style*="padding: 60px 0"] {
        padding: 30px 0 !important;
    }
    
    /* Filtre bloğu - daha kompakt */
    div[style*="background: rgba(30, 40, 60, 0.95)"][style*="border-radius: 20px"] {
        padding: 15px !important;
        border-radius: 15px !important;
        margin-bottom: 20px !important;
    }
    
    /* Filtre grid'i tek sütun */
    div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Filtre input ve select'leri */
    div[style*="display: grid"] select,
    div[style*="display: grid"] input {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    /* Filtre butonu tam genişlik */
    div[style*="display: grid"] button {
        margin-top: 5px !important;
    }
    
    /* Paket kartları - tam genişlik */
    .col-md-4.col-sm-6,
    .paketler-page .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin-bottom: 20px !important;
    }
    
    /* Paket kartı boyutları */
    .paket-karti {
        min-height: 280px !important;
        border-radius: 12px !important;
    }
    
    .paket-resim-container {
        padding-top: 75% !important;
    }
    
    .paket-icerik {
        padding: 12px !important;
    }
    
    .paket-baslik,
    .paket-karti h3,
    .paket-karti h4 {
        font-size: 14px !important;
    }
    
    /* Kategori badge */
    .paket-kategori-badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    
    /* Fiyat */
    .paket-fiyat {
        font-size: 13px !important;
        padding: 5px 10px !important;
    }
    
    /* Header'ı mobilde küçült */
    .top-header.overlay {
        padding: 100px 15px 40px 15px !important;
        min-height: auto !important;
    }
    
    .top-header .heading {
        font-size: 26px !important;
    }
    
    .top-header .subheading {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Breadcrumb */
    .ustbanner {
        padding: 10px 15px !important;
        font-size: 12px !important;
    }
}

/* =============================================
   PAKET DETAY SAYFASI - MOBİL
   ============================================= */
@media (max-width: 768px) {
    /* Detay sayfası ana içerik */
    .section.single-wrap {
        padding: 20px 10px !important;
    }
    
    /* Paket detay grid */
    .section.single-wrap .row {
        flex-direction: column !important;
        margin: 0 !important;
    }
    
    .section.single-wrap .col-md-8,
    .section.single-wrap .col-md-4,
    .section.single-wrap .col-lg-8,
    .section.single-wrap .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Galeri layout */
    .paket-gallery-layout {
        flex-direction: column !important;
    }
    
    .paket-gallery-main {
        width: 100% !important;
    }
    
    .paket-gallery-main img {
        max-height: 280px !important;
    }
    
    .paket-gallery-thumbs {
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        max-height: none !important;
        padding: 10px 0 !important;
    }
    
    .paket-gallery-thumb {
        flex: 0 0 70px !important;
    }
    
    .paket-gallery-thumb img {
        height: 50px !important;
    }
    
    /* Paket başlık */
    .section.single-wrap h1,
    .section.single-wrap .paket-baslik {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    
    /* Paket açıklama */
    .section.single-wrap .paket-aciklama,
    .section.single-wrap .paket-icerik {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* Fiyat kutusu */
    .paket-fiyat-box,
    .price-box,
    .modern-card {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    /* Büyük fiyat */
    .fiyat-buyuk,
    .price-large {
        font-size: 28px !important;
    }
    
    /* Satın al butonu */
    .btn-satin-al,
    .btn-buy,
    .section.single-wrap .btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }
    
    /* Özellikler listesi */
    .paket-ozellikler li,
    .features-list li {
        padding: 10px 0 !important;
        font-size: 13px !important;
    }
    
    /* Kategori listesi */
    .kategori-liste,
    .category-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .kategori-liste a,
    .category-list a {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* =============================================
   BLOG SAYFASI - MOBİL
   ============================================= */
@media (max-width: 768px) {
    /* Blog kartları tek sütun */
    .blog .row .col-md-4,
    .blog .row .col-lg-4,
    .blog-list .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    /* Blog kartı */
    .blog-card,
    .blog-item {
        border-radius: 12px !important;
    }
    
    .blog-card img,
    .blog-item img {
        height: 180px !important;
        object-fit: cover !important;
    }
    
    .blog-card h3,
    .blog-item h3 {
        font-size: 16px !important;
    }
    
    /* Blog detay */
    .blog-detay .row {
        flex-direction: column !important;
    }
    
    .blog-detay .col-md-8,
    .blog-detay .col-md-4,
    .blog-detay .col-lg-8,
    .blog-detay .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* Blog içerik */
    .blog-content,
    .blog-detay-content {
        padding: 15px !important;
    }
    
    .blog-content h1,
    .blog-detay h1 {
        font-size: 22px !important;
    }
    
    .blog-content p,
    .blog-detay p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    
    /* Sidebar widget'ları */
    .sidebar-widget {
        margin-bottom: 20px !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .sidebar-widget h5 {
        font-size: 16px !important;
    }
    
    /* Son yazılar listesi */
    .sidebar-widget ul li {
        padding: 10px 0 !important;
    }
    
    .sidebar-widget ul li a {
        font-size: 13px !important;
    }
}

/* =============================================
   HOSTİNG SAYFASI - MOBİL
   ============================================= */
@media (max-width: 768px) {
    /* Hosting kartları */
    .plan-container,
    .hosting-card {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    /* Slider - mobilde kaydırma yerine alt alta */
    .slider {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .slick-slide {
        width: 100% !important;
    }
}

/* =============================================
   İLETİŞİM SAYFASI - MOBİL
   ============================================= */
@media (max-width: 768px) {
    .iletisim-form,
    .contact-form {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .iletisim-form .row,
    .contact-form .row {
        margin: 0 !important;
    }
    
    .iletisim-form .col-md-6,
    .contact-form .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .iletisim-form input,
    .iletisim-form textarea,
    .contact-form input,
    .contact-form textarea {
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    .iletisim-form button,
    .contact-form button {
        width: 100% !important;
        padding: 14px !important;
    }
    
    /* Harita */
    .map-container,
    .google-map {
        height: 220px !important;
        border-radius: 12px !important;
    }
    
    /* İletişim bilgileri */
    .iletisim-bilgi,
    .contact-info {
        padding: 15px !important;
    }
    
    .iletisim-bilgi h3,
    .contact-info h3 {
        font-size: 18px !important;
    }
    
    .iletisim-bilgi p,
    .contact-info p {
        font-size: 13px !important;
    }
}

/* =============================================
   HESABIM / KULLANICI PANELİ - MOBİL
   ============================================= */
@media (max-width: 768px) {
    /* Panel layout */
    .hesabim-layout,
    .panel-layout {
        flex-direction: column !important;
    }
    
    /* Panel menü - mobilde tam genişlik */
    .hesabim-menu,
    .panel-menu,
    .user-menu {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .hesabim-menu ul,
    .panel-menu ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .hesabim-menu ul li,
    .panel-menu ul li {
        flex: 0 0 calc(50% - 4px) !important;
    }
    
    .hesabim-menu ul li a,
    .panel-menu ul li a {
        padding: 10px 12px !important;
        font-size: 12px !important;
        text-align: center !important;
        border-radius: 8px !important;
    }
    
    /* Panel içerik */
    .hesabim-content,
    .panel-content {
        width: 100% !important;
        padding: 15px !important;
    }
    
    /* Siparişler tablosu */
    .siparisler-tablo,
    .orders-table {
        display: block !important;
        overflow-x: auto !important;
    }
    
    .siparisler-tablo td,
    .orders-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
}

/* =============================================
   SEPET SAYFASI - MOBİL
   ============================================= */
@media (max-width: 768px) {
    .sepet-container,
    .cart-container {
        padding: 15px !important;
    }
    
    .sepet-item,
    .cart-item {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .sepet-item-resim,
    .cart-item-image {
        width: 100% !important;
        height: 150px !important;
    }
    
    .sepet-item-bilgi,
    .cart-item-info {
        width: 100% !important;
    }
    
    .sepet-item-fiyat,
    .cart-item-price {
        font-size: 18px !important;
    }
    
    .sepet-toplam,
    .cart-total {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .sepet-toplam h3,
    .cart-total h3 {
        font-size: 20px !important;
    }
    
    .sepet-btn,
    .cart-btn {
        width: 100% !important;
        padding: 14px !important;
    }
}

/* =============================================
   KULLANICI PANELİ - MOBİL
   ============================================= */
@media (max-width: 768px) {
    /* Panel sidebar gizle */
    .panel-sidebar,
    .user-sidebar {
        display: none !important;
    }
    
    /* Panel içerik tam genişlik */
    .panel-content,
    .user-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
    }
    
    /* Panel kartları */
    .panel-card,
    .dashboard-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Tablo scroll */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* =============================================
   FOOTER - MOBİL
   ============================================= */
@media (max-width: 768px) {
    .footer,
    footer {
        padding: 40px 15px 90px 15px !important; /* Bottom nav için alan */
    }
    
    .footer .row .col-md-3,
    .footer .row .col-md-4,
    .footer .row .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }
    
    .footer-logo {
        max-width: 150px !important;
        margin: 0 auto 20px auto !important;
    }
    
    .footer-links {
        text-align: center !important;
    }
    
    .footer-social {
        justify-content: center !important;
    }
}

/* =============================================
   BUTONLAR VE FORMLAR - MOBİL
   ============================================= */
@media (max-width: 768px) {
    /* Tüm butonlar dokunmaya uygun boyut */
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
    
    /* Input'lar */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        min-height: 44px !important;
        padding: 12px 15px !important;
        font-size: 16px !important; /* iOS zoom engellemek için */
    }
    
    /* Select dropdown arrow */
    select {
        padding-right: 35px !important;
    }
}

/* =============================================
   MODAL VE POPUP'LAR - MOBİL
   ============================================= */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    
    .modal-content {
        border-radius: 15px !important;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 15px !important;
    }
    
    /* SweetAlert */
    .swal2-popup {
        width: 90% !important;
        max-width: 340px !important;
        padding: 20px !important;
    }
}

/* =============================================
   GENEL DÜZELTMELER - MOBİL
   ============================================= */
@media (max-width: 768px) {
    /* Yatay scroll engelleyici */
    .container,
    .container-fluid {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Metin boyutları */
    h1 { font-size: 28px !important; }
    h2 { font-size: 24px !important; }
    h3 { font-size: 20px !important; }
    h4 { font-size: 18px !important; }
    h5 { font-size: 16px !important; }
    h6 { font-size: 14px !important; }
    
    p, li, span, a {
        font-size: 14px;
        line-height: 1.6;
    }
    
    /* Breadcrumb */
    .breadcrumb {
        font-size: 12px !important;
        padding: 10px 15px !important;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    
    .pagination .page-link {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

/* =============================================
   TABLET (769px - 1024px)
   ============================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Paket kartları 2 sütun */
    .col-md-4.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Domain uzantı kartları 3 sütun */
    .domain-type {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Referans ve Blog kartları 2 sütun */
    section.services div[style*="grid-template-columns"],
    section.blog div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Sidebar daralt */
    .col-md-4.d-none.d-lg-block {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }
    
    .col-md-8 {
        flex: 0 0 70% !important;
        max-width: 70% !important;
    }
}

/* =============================================
   KÜÇÜK TELEFONLAR (480px ve altı)
   ============================================= */
@media (max-width: 480px) {
    /* Daha küçük padding'ler */
    section,
    .section {
        padding: 30px 10px !important;
    }
    
    /* Daha küçük başlıklar */
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    
    /* Domain uzantıları tek sütun */
    .domain-type {
        grid-template-columns: 1fr !important;
    }
    
    /* Kartlar daha kompakt */
    .paket-karti {
        min-height: 280px !important;
    }
    
    .modern-card {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    /* Butonlar */
    .btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* =============================================
   LANDSCAPE MOD
   ============================================= */
@media (max-width: 768px) and (orientation: landscape) {
    /* Landscape modda hero section daha kısa */
    section.search-domain.domain-hero {
        min-height: auto !important;
        padding: 60px 15px 40px 15px !important;
    }
    
    .search-domain .domain-hero-head h1 {
        font-size: 22px !important;
    }
    
    /* Domain kartları 3 sütun */
    .domain-type {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* =============================================
   PRİNT STYLES
   ============================================= */
@media print {
    .mobile-navbar,
    .mobile-bottom-nav,
    .mobile-menu,
    .mobile-menu-overlay,
    header,
    footer,
    .no-print {
        display: none !important;
    }
    
    body {
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }
}