/**
 * Kurumsal / yasal sayfalar — tablet & mobil
 * Yatay hiza: header .header-container ile aynı iç kenar (çift padding yok)
 */

/* ─── Header ile aynı iç kenar (≤1024) ─── */
@media (max-width: 1024px) {
    html body main.hakkimizda-main,
    html body main.hk-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip;
        box-sizing: border-box;
    }

    html body .hakkimizda-main > .container,
    html body .hk-page > .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    html body:has(.hakkimizda-main) .breadcrumb .container,
    html body:has(.hk-page) .breadcrumb .container {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    html body:has(.hakkimizda-main) header .header-container,
    html body:has(.hk-page) header .header-container {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    .hakkimizda-main {
        padding-top: 12px;
        padding-bottom: 24px;
        min-height: 0;
    }

    .page-layout {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .content-area {
        margin-left: 0;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .sidebar-menu {
        position: static;
        top: auto;
        padding: 12px;
        margin-bottom: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .menu-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
        max-width: 100%;
    }

    .menu-nav::-webkit-scrollbar {
        display: none;
    }

    .menu-item {
        flex: 0 0 auto;
        white-space: nowrap;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 16px;
        border-radius: 8px;
        font-size: 0.8rem;
        max-width: none;
    }

    .menu-item::before {
        display: none;
    }

    .menu-item.active {
        box-shadow: inset 0 0 0 2px rgba(74, 158, 255, 0.45);
    }

    .hero-section,
    .section-card,
    .iptal-iade-content,
    .contact-content {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .hero-section,
    .section-card {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 0;
        padding: 24px 20px;
    }

    .section-card.reverse .section-content,
    .section-card.reverse .section-illustration {
        order: unset;
    }

    .section-image {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
        display: block;
    }

    .section-illustration {
        width: 100%;
    }

    .iptal-iade-content {
        padding: 24px 20px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .security-sections {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .security-section {
        padding: 16px;
        min-width: 0;
    }
}

/* Tablet header: responsive-chrome 16px */
@media (min-width: 768px) and (max-width: 1024px) {
    html body .hakkimizda-main > .container,
    html body .hk-page > .container {
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    html body:has(.hakkimizda-main) .breadcrumb .container,
    html body:has(.hk-page) .breadcrumb .container {
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    html body:has(.hakkimizda-main) header .header-container,
    html body:has(.hk-page) header .header-container {
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }
}

@media (max-width: 767px) {
    .hakkimizda-main {
        padding-top: 8px;
        padding-bottom: 20px;
    }

    .page-layout {
        gap: 10px;
    }

    .sidebar-menu {
        padding: 10px;
    }

    .menu-item {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .hero-content h2,
    .section-content h2 {
        font-size: 1.35rem;
    }

    .hero-content p,
    .section-content p {
        font-size: 0.9rem;
    }

    .hero-section,
    .section-card {
        padding: 20px 16px;
        gap: 16px;
    }

    .section-image {
        max-width: 200px;
    }

    .iptal-iade-content {
        padding: 20px 16px;
        margin-bottom: 20px;
    }

    .iptal-iade-content h3 {
        font-size: 1rem !important;
        margin-top: 20px !important;
    }

    .iptal-iade-content p,
    .iptal-iade-content ul li {
        font-size: 0.85rem !important;
    }

    .iptal-iade-content ul {
        padding-left: 18px;
    }
}

@media (max-width: 480px) {
    html body .hakkimizda-main > .container,
    html body .hk-page > .container {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    html body:has(.hakkimizda-main) .breadcrumb .container,
    html body:has(.hk-page) .breadcrumb .container {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    .menu-item {
        padding: 8px 10px;
        font-size: 0.7rem;
    }

    .hero-content h2,
    .section-content h2 {
        font-size: 1.2rem;
    }

    .hero-section,
    .section-card {
        padding: 16px 12px;
    }

    .iptal-iade-content {
        padding: 16px 12px;
        border-radius: 4px !important;
    }

    .security-section {
        padding: 12px;
    }
}