/* ==========================================================================
   KartIshi — Global responsive foundation (320px → 4K)
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: clip;
    min-width: 320px;
}

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

/* Long text / URLs */
p, h1, h2, h3, h4, h5, h6, li, td, th, label, span, a, div {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Tables */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Touch-friendly controls */
@media (max-width: 767.98px) {
    .btn,
    .btn-corporate,
    .btn-auth,
    .btn-wizard,
    .menu-link,
    .form-control,
    .form-select {
        min-height: 44px;
    }

    .form-control,
    .form-select,
    textarea.form-control {
        width: 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Page headers (panel + admin)
   -------------------------------------------------------------------------- */
.page-header,
.admin-content > .d-flex.justify-content-between.align-items-center.mb-4,
.admin-content > .d-flex.justify-content-between.align-items-center.mb-5,
.main-content .d-flex.justify-content-between.align-items-center.mb-4,
.main-content .d-flex.justify-content-between.align-items-center.mb-5,
.container-fluid > .d-flex.justify-content-between.align-items-center.mb-4,
.container-fluid > .d-flex.justify-content-between.align-items-center.mb-5,
.container > .d-flex.justify-content-between.align-items-center.mb-4,
.container > .d-flex.justify-content-between.align-items-center.mb-5 {
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 767.98px) {
    .page-header,
    .admin-content > .d-flex.justify-content-between.align-items-center.mb-4,
    .admin-content > .d-flex.justify-content-between.align-items-center.mb-5,
    .main-content .d-flex.justify-content-between.align-items-center.mb-4,
    .main-content .d-flex.justify-content-between.align-items-center.mb-5,
    .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4,
    .container-fluid > .d-flex.justify-content-between.align-items-center.mb-5,
    .container > .d-flex.justify-content-between.align-items-center.mb-4,
    .container > .d-flex.justify-content-between.align-items-center.mb-5 {
        flex-direction: column;
        align-items: stretch !important;
    }

    .page-header .btn,
    .page-header .btn-group,
    .admin-content > .d-flex.justify-content-between.align-items-center.mb-4 > .btn,
    .admin-content > .d-flex.justify-content-between.align-items-center.mb-5 > .btn,
    .main-content .d-flex.justify-content-between.align-items-center.mb-4 > .btn,
    .main-content .d-flex.justify-content-between.align-items-center.mb-5 > .btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Admin card toolbars (search + filters)
   -------------------------------------------------------------------------- */
.admin-card > .p-4.border-bottom.bg-light.d-flex {
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 767.98px) {
    .admin-card > .p-4.border-bottom.bg-light.d-flex {
        flex-direction: column;
        align-items: stretch !important;
    }

    .admin-card > .p-4.border-bottom.bg-light .position-relative,
    .admin-card > .p-4.border-bottom.bg-light .d-flex.gap-2,
    .admin-card > .p-4.border-bottom.bg-light .form-control,
    .admin-card > .p-4.border-bottom.bg-light .form-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .admin-card > .p-4.border-bottom.bg-light .d-flex.gap-2 {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Dropdowns / notifications
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  #userNotificationList,
  #adminNotificationList,
  #userDropdown,
  #userDropdownMenu,
  .dropdown-menu-custom {
    width: min(100vw - 2rem, 20rem) !important;
    max-width: calc(100vw - 2rem);
  }
}

/* --------------------------------------------------------------------------
   Sidebar overlay (main + admin)
   -------------------------------------------------------------------------- */
.sidebar-backdrop,
.admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1095;
}

@media (max-width: 991.98px) {
    .sidebar-backdrop.is-visible,
    .admin-sidebar-backdrop.is-visible {
        display: block;
    }

    .admin-content {
        padding: 1rem;
    }

    .main-content {
        padding: 1rem 0;
    }

    .admin-topnav {
        padding: 0 1rem;
    }
}

/* --------------------------------------------------------------------------
   Landing — mobile header CTA
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    #guestNav .btn-corporate,
    #userNav .btn-corporate {
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
        border-radius: 9999px !important;
    }

    #mainHeader nav {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* Landing mobile drawer */
#mobileNavPanel {
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

#mobileNavPanel.is-open {
    transform: translateX(0);
}

#mobileNavBackdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#mobileNavBackdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Page builder (Sayfa Düzenle)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body:has(.builder-header) {
        overflow: auto !important;
    }

    .builder-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: calc(100vh - var(--header-height, 64px));
    }

    .panel-left,
    .panel-right {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        position: relative !important;
        height: auto !important;
        max-height: none !important;
    }

    .panel-center {
        min-height: 50vh;
    }
}

/* --------------------------------------------------------------------------
   Kart tasarımı wizard
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .stepper-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .stepper-item {
        flex: 0 0 auto;
    }

    .stepper-progress {
        display: none;
    }

    .summary-card {
        position: static !important;
        margin-top: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Home — feature decorative typography
   -------------------------------------------------------------------------- */
.feature-copy-block {
    position: relative;
    overflow: hidden;
    padding-top: 0.5rem;
}

.feature-deco-title {
    display: none;
}

@media (min-width: 640px) {
    .feature-deco-title {
        display: block;
        position: absolute;
        top: -1.5rem;
        left: 0;
        z-index: 0;
        pointer-events: none;
        font-size: clamp(4rem, 12vw, 9rem);
        line-height: 1;
        margin: 0;
        white-space: nowrap;
        opacity: 0.35;
    }
}

.feature-showcase-img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .feature-showcase-img {
        max-width: min(1100px, 100%);
    }
}

/* Mesh blobs — reduce overflow on small screens */
@media (max-width: 767.98px) {
    .mesh-gradient-blob {
        width: 70vw !important;
        height: 70vw !important;
    }
}

/* Stat / flex rows in cards */
@media (max-width: 575.98px) {
    .stat-card.d-flex.align-items-center.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .stat-card .d-flex.gap-2,
    .stat-card .d-flex.flex-wrap.gap-2 {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Invoice / proforma summary blocks */
@media (max-width: 575.98px) {
    .invoice-box .d-flex.justify-content-between.align-items-start,
    .invoice-box .row.mb-5 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Dashboard / statistics card selector */
@media (max-width: 767.98px) {
    #cardSelect,
    .page-header .form-select,
    .d-flex.justify-content-between .form-select[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }

    .page-header .d-flex.align-items-center.gap-3,
    .page-header .d-flex.align-items-center.gap-2 {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
    }
}

/* Panel sidebar above backdrop */
@media (max-width: 991.98px) {
    .sidebar,
    .admin-sidebar {
        z-index: 1100;
    }
}