/* =====================================================
   ATAHOST - Kapsamlı Mobil Uyumluluk CSS
   Tüm sayfalar için col → row responsive düzeltmeleri
   ===================================================== */

/* =====================================================
   GENEL TEMEL KURALLAR
   ===================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

/* =====================================================
   ANA SAYFA (index.php)
   ===================================================== */

/* Hero Container - 2 col → 1 col */
@media (max-width: 992px) {
    .hero-container {
        flex-direction: column !important;
        text-align: center;
        gap: 40px;
    }

    .hero-content {
        order: 1;
    }

    .hero-visual {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 768px) {

    /* Hero stats bar */
    .hero-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    .stat-divider {
        display: none !important;
    }

    /* Hero h1 */
    .hero h1,
    .hero-content h1,
    .hero-corporate h1 {
        font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    }

    /* Hero buttons */
    .hero-btns {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .hero-btns .btn {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
    }

    /* Announcement bar */
    .announcement-bar {
        font-size: 0.82rem !important;
        padding: 8px 12px !important;
    }
}

/* Dense grid (features) - 3 col → 2 col → 1 col */
@media (max-width: 992px) {
    .dense-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .dense-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Steps container */
@media (max-width: 768px) {
    .steps-container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .steps-line {
        display: none !important;
    }

    .step-item {
        width: 100% !important;
        flex-direction: row !important;
        gap: 15px !important;
    }
}

/* Dark developer section */
@media (max-width: 768px) {
    .section-padding .container[style*="display:flex"] {
        flex-wrap: wrap !important;
    }
}

/* =====================================================
   HERGELİN SAYFALAR - hero-corporate
   ===================================================== */

@media (max-width: 992px) {
    .hero-container-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 30px;
    }

    .hero-breadcrumb {
        justify-content: center !important;
    }

    .hero-visual-col {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-corporate {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }

    .hero-text-col h1 {
        font-size: 2rem !important;
    }

    .terminal-card-light {
        max-width: 100% !important;
    }

    /* Trust badges inside hero */
    .hero-text-col [style*="display: flex"][style*="opacity: 0.8"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* =====================================================
   HAKKIMIZDA SAYFASI
   ===================================================== */

/* Brand hero */
@media (max-width: 768px) {
    .brand-hero {
        padding: 100px 0 60px !important;
        text-align: center;
    }

    .brand-hero h1 {
        font-size: 2rem !important;
    }
}

/* trust-grid - BTK / Trustpilot / Şikayetvar cards */
@media (max-width: 768px) {
    .trust-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* services-grid */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* =====================================================
   CONTACT GRID (İletişim & Hakkımızda)
   ===================================================== */

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* İletişim formu içindeki yan yana inputlar */
@media (max-width: 600px) {

    .contact-grid form>div[style*="display: flex"][style*="gap: 15px"],
    form>div[style*="display: flex"][style*="gap: 15px"] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .contact-grid form>div[style*="display: flex"] input,
    form>div[style*="display: flex"] input {
        flex: 1 1 100% !important;
    }
}

/* Map container */
@media (max-width: 768px) {
    .map-container {
        height: 300px !important;
    }
}

/* =====================================================
   BLOG SAYFASI (blog.php & blog-detail.php)
   ===================================================== */

/* Blog hero h1 */
@media (max-width: 768px) {
    .hero-section h1[style*="3.5rem"] {
        font-size: 2.2rem !important;
    }
}

/* Blog grid - inline minmax(350px,1fr) → 1col */
@media (max-width: 700px) {
    .grid[style*="minmax(350px"] {
        grid-template-columns: 1fr !important;
    }

    .blog-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   HOSTING & SUNUCU TEMPLATE SAYFALAR
   ===================================================== */

/* feature-grid-modern */
@media (max-width: 700px) {
    .feature-grid-modern {
        grid-template-columns: 1fr !important;
    }
}

/* Modern card min-width */
@media (max-width: 640px) {
    .modern-card {
        min-width: 100% !important;
    }
}

/* Infra feature grid (1fr 1fr inline) */
@media (max-width: 768px) {
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Flex rows with min-width:300px → stack */
@media (max-width: 768px) {

    [style*="flex: 1"][style*="min-width: 300px"],
    [style*="flex:1"][style*="min-width:300px"] {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    [style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 50px"],
    [style*="display: flex"][style*="flex-wrap: wrap"][style*="gap:50px"] {
        gap: 25px !important;
    }
}

/* =====================================================
   PRICING GRIDS
   ===================================================== */

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }

    .processor-toggle-container {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .proc-toggle-btn {
        flex: 1 1 calc(50% - 10px) !important;
        justify-content: center !important;
    }

    .pricing-period-selector {
        flex-wrap: wrap !important;
        border-radius: 12px !important;
    }
}

/* =====================================================
   SERVER TABLE - MOBILE CARD VIEW
   ===================================================== */

@media (max-width: 768px) {
    #pricing .container {
        padding: 0 15px !important;
    }

    .server-table-container {
        overflow-x: hidden !important;
        border-radius: 12px;
    }

    .server-table-header {
        display: none !important;
    }

    .server-table-row:not([style*="display:none"]):not([style*="display: none"]) {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        gap: 10px !important;
        min-width: unset !important;
        border-bottom: 1px solid #e2e8f0 !important;
        border-radius: 0 !important;
    }

    .server-row-name h4 {
        font-size: 1rem !important;
        white-space: normal !important;
    }

    .server-row-name p {
        white-space: normal !important;
    }

    .server-table-row .server-row-spec {
        display: inline-flex !important;
        white-space: nowrap;
        font-size: 0.85rem !important;
        padding: 6px 12px;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        flex: 0 0 auto;
    }

    .server-row-price .amount {
        font-size: 1.6rem !important;
    }

    .server-row-action {
        width: 100%;
    }

    .server-table-row .btn {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

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

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-bottom-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
}

/* =====================================================
   GENEL SECTION & CONTAINER
   ===================================================== */

@media (max-width: 768px) {
    .section-padding {
        padding: 50px 0 !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px !important;
    }
}

/* =====================================================
   LEGAL PAGES
   ===================================================== */

@media (max-width: 768px) {
    .legal-content {
        padding: 30px 20px !important;
    }
}

/* =====================================================
   STAT GRID (inside dashboard / spec cards)
   ===================================================== */

@media (max-width: 480px) {
    .stat-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   BUTTONS - Genel
   ===================================================== */

@media (max-width: 480px) {

    .btn-group,
    .action-btns {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-group .btn,
    .action-btns .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* =====================================================
   TABLES - HTML <table> elements
   ===================================================== */

@media (max-width: 768px) {
    table:not(.server-table-header):not(.server-table-row) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* =====================================================
   WHATSAPP FLOAT
   ===================================================== */

@media (max-width: 480px) {
    .whatsapp-float {
        bottom: 20px;
        left: 15px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* =====================================================
   PAGE HERO (İletişim, Blog vs. sayfalardaki hero)
   ===================================================== */

@media (max-width: 768px) {
    .page-hero {
        padding: 100px 0 50px !important;
        text-align: center;
    }

    .page-hero h1 {
        font-size: 2rem !important;
    }
}

/* =====================================================
   ACCORDION (FAQ)
   ===================================================== */

@media (max-width: 480px) {
    .accordion-header {
        font-size: 0.95rem !important;
        padding: 15px !important;
        line-height: 1.4;
    }

    .accordion-body {
        padding: 15px !important;
        font-size: 0.9rem !important;
    }
}

/* =====================================================
   BLOG CARD GRID - homepage latest posts
   ===================================================== */

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   SPEC GRID INSIDE TERMINAL CARDS
   ===================================================== */

@media (max-width: 480px) {
    .spec-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   SECTION HEADING FONT SIZES
   ===================================================== */

@media (max-width: 768px) {

    h2[style*="2.5rem"],
    h2[style*="2.8rem"],
    h2[style*="3rem"],
    h2[style*="3.5rem"] {
        font-size: 1.8rem !important;
    }

    h1[style*="3.5rem"],
    h1[style*="3.2rem"] {
        font-size: 2rem !important;
    }
}

@media (max-width: 480px) {

    h2[style*="2.5rem"],
    h2[style*="2.8rem"] {
        font-size: 1.6rem !important;
    }
}

/* =====================================================
   ABOUT PAGE CONTACT GRID INNER CARD
   ===================================================== */

@media (max-width: 768px) {

    .premium-card[style*="min-height:350px"],
    .premium-card[style*="min-height: 350px"] {
        min-height: 200px !important;
    }
}

/* =====================================================
   RYZEN / SERVER DETAIL - SPEC TABLE
   ===================================================== */

@media (max-width: 768px) {
    .specs-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .spec-row {
        flex-direction: column !important;
        gap: 5px !important;
    }
}

/* =====================================================
   HOSTING PAGE - INFRA SECTION  (flex row → col)
   ===================================================== */

@media (max-width: 768px) {

    /* Infra feature 1fr 1fr inline grid in hosting page */
    div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}