/*
 * V20.0.6 - Mobil ve Tablet Responsive Yeniden Yapilandirma
 * Telefon: 360-767px | Tablet: 768-1024px | Masaustu: 1025px+
 * Bu dosya public profil CSS'lerinden sonra yuklenir ve yalniz responsive
 * yerlesimi birlestirir. Is mantigi veya masaustu gorunumu degistirmez.
 */

html,
body {
  max-width: 100%;
}

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

body .container,
body .container.narrow {
  min-width: 0;
}

/* Tablet: masaustu menusu yerine kontrollu mobil menu ve iki kademeli header. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .container,
  body .container.narrow {
    width: calc(100% - 32px) !important;
  }

  body .header-row {
    display: grid !important;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand actions"
      "search search" !important;
    gap: 10px 14px !important;
    align-items: center !important;
    padding: 10px 0 !important;
  }

  body .brand-logo-link {
    grid-area: brand;
    justify-content: flex-start !important;
  }

  body .site-logo {
    width: min(180px, 100%) !important;
    max-height: 62px !important;
  }

  body .site-search {
    grid-area: search;
    width: 100% !important;
  }

  body .header-actions {
    grid-area: actions;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .header-actions .mini-action {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
  }

  body .header-actions .mini-action-copy,
  body .header-actions .mini-action-copy strong {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body .mobile-nav-head {
    display: block !important;
    padding: 7px 0 !important;
  }

  body .mobile-nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 40px !important;
    border: 1px solid var(--line) !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--dark) !important;
  }

  body .main-nav > .nav-row {
    display: none !important;
    width: calc(100% - 32px) !important;
    max-height: min(62vh, 560px) !important;
    overflow: auto !important;
    white-space: normal !important;
  }

  body .main-nav > .nav-row.is-open {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px 0 12px !important;
  }

  body .main-nav > .nav-row > a,
  body .main-nav > .nav-row > .nav-dropdown,
  body .main-nav > .nav-row > .nav-category-dropdown {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .nav-category-dropdown {
    display: block !important;
    grid-column: 1 / -1 !important;
  }

  body .main-nav:not(.dealer-main-nav) .nav-member-social-group {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  body .nav-category-trigger {
    width: 100% !important;
  }

  body .nav-category-panel {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 6px !important;
    box-shadow: none !important;
  }

  body .footer-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
  }

  body .product-grid,
  body .product-list-managed {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body .product-detail,
  body .product-detail-sales,
  body .product-detail-search-layout,
  body .checkout-modern-grid,
  body .checkout-payment-layout,
  body .cart-modern-layout,
  body .account-auth-grid,
  body .account-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  body .checkout-summary-sticky,
  body .cart-modern-summary {
    position: static !important;
    top: auto !important;
  }

  body .cart-modern-table-head {
    display: none !important;
  }

  body .cart-modern-line {
    grid-template-columns: 34px 96px minmax(0, 1fr) 132px 112px 44px !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  body .cart-modern-line .cart-thumb {
    width: 96px !important;
    height: 86px !important;
    min-width: 96px !important;
    padding: 8px !important;
  }

  body .cart-modern-line .cart-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-height: 70px !important;
    object-fit: contain !important;
  }

  body .cart-modern-line .cart-total-price {
    min-width: 0 !important;
    white-space: normal !important;
  }
}

/* Telefon: kompakt header, gercek dikey sepet karti ve tek kolon formlar. */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: clip !important;
  }

  body {
    font-size: 13px !important;
  }

  body .container,
  body .container.narrow {
    width: calc(100% - 20px) !important;
  }

  body .topbar-row {
    min-height: 28px !important;
    padding: 5px 0 !important;
    overflow: hidden !important;
  }

  body .topbar-contact {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .header-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "search"
      "actions" !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  body .brand-logo-link {
    grid-area: brand;
    justify-content: center !important;
  }

  body .site-logo {
    width: min(154px, 62vw) !important;
    max-height: 54px !important;
  }

  body .site-search {
    grid-area: search;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 62px !important;
    width: 100% !important;
    min-height: 40px !important;
    overflow: visible !important;
  }

  body .site-search input {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  body .site-search button {
    min-width: 0 !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  body .header-actions {
    grid-area: actions;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body .header-actions .mini-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    padding: 5px 6px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  body .header-actions .mini-action-icon {
    flex: 0 0 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
  }

  body .header-actions .mini-action-copy {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body .header-actions .mini-action-copy span {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  body .header-actions .mini-action-copy strong {
    max-width: 100% !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .mobile-nav-head {
    display: block !important;
    padding: 6px 0 !important;
  }

  body .mobile-nav-toggle {
    display: flex !important;
    width: 100% !important;
    min-height: 38px !important;
  }

  body .main-nav > .nav-row {
    display: none !important;
    width: calc(100% - 20px) !important;
    max-height: 65vh !important;
    overflow: auto !important;
    white-space: normal !important;
  }

  body .main-nav > .nav-row.is-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 7px 0 10px !important;
  }

  body .main-nav > .nav-row > *,
  body .nav-category-trigger,
  body .nav-category-dropdown {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .main-nav:not(.dealer-main-nav) .nav-member-social-group {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  body .nav-category-panel {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-shadow: none !important;
  }

  body .page {
    padding: 12px 0 !important;
  }

  body .page-card {
    min-width: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  body .page-title-row,
  body .cart-modern-head,
  body .card-title-action,
  body .account-card-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 9px !important;
  }

  body .cart-modern-actions,
  body .account-title-actions,
  body .account-b2b-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 7px !important;
  }

  body .cart-modern-actions > *,
  body .cart-modern-actions .cart-outline-action,
  body .account-title-actions .btn,
  body .account-b2b-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    font-size: 10.5px !important;
    white-space: normal !important;
  }

  body .cart-modern-layout,
  body .checkout-modern-grid,
  body .checkout-payment-layout,
  body .account-auth-grid,
  body .account-dashboard-grid,
  body .product-detail,
  body .product-detail-sales,
  body .product-detail-search-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body .cart-modern-table-head {
    display: none !important;
  }

  body .cart-modern-list {
    display: grid !important;
    gap: 10px !important;
  }

  body .cart-modern-line {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 28px 88px minmax(0, 1fr) 38px !important;
    grid-template-areas:
      "select image info remove"
      "qty qty unit unit"
      "qty qty total total" !important;
    gap: 8px 10px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 11px !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 13px !important;
    background: #fff !important;
  }

  body .cart-modern-line .cart-row-select {
    grid-area: select !important;
    align-self: start !important;
  }

  body .cart-modern-line .cart-thumb {
    grid-area: image !important;
    display: grid !important;
    place-items: center !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  body .cart-modern-line .cart-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 74px !important;
    max-height: 68px !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  body .cart-modern-line .cart-product-info {
    grid-area: info !important;
    align-self: start !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  body .cart-modern-line .cart-product-name {
    display: -webkit-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  body .cart-modern-line .cart-product-meta {
    display: flex !important;
    gap: 3px 6px !important;
    margin-top: 4px !important;
    overflow-wrap: anywhere !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }

  body .cart-modern-line .cart-qty-wrap {
    grid-area: qty !important;
    display: grid !important;
    grid-template-columns: 34px 48px 34px !important;
    justify-content: start !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body .cart-modern-line .qty-step,
  body .cart-modern-line .qty-input {
    height: 34px !important;
    min-height: 34px !important;
  }

  body .cart-modern-line .cart-unit-price {
    grid-area: unit !important;
    justify-self: end !important;
    min-width: 0 !important;
    font-size: 11px !important;
    text-align: right !important;
    white-space: normal !important;
  }

  body .cart-modern-line .cart-unit-price::before {
    content: "Birim: ";
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
  }

  body .cart-modern-line .cart-total-price {
    grid-area: total !important;
    justify-self: end !important;
    min-width: 0 !important;
    font-size: 13px !important;
    text-align: right !important;
    white-space: normal !important;
  }

  body .cart-modern-line .cart-total-price::before {
    content: "Toplam: ";
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
  }

  body .cart-modern-line .cart-icon-remove {
    grid-area: remove !important;
    align-self: start !important;
    justify-self: end !important;
    position: static !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
  }

  body .cart-modern-summary,
  body .checkout-summary-sticky {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  body .form-grid,
  body .checkout-payment-form,
  body .address-preview-grid,
  body .track-meta-grid,
  body .b2b-open-account-grid {
    grid-template-columns: 1fr !important;
  }

  body .field,
  body .field.full,
  body .tr-address-field,
  body .tr-address-line,
  body .billing-address-fields {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  body input,
  body select,
  body textarea,
  body button {
    max-width: 100%;
  }

  body .checkout-steps {
    gap: 5px !important;
  }

  body .checkout-steps .step em {
    font-size: 9px !important;
  }

  body .product-grid,
  body .product-list-managed {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body .product-card,
  body .r27-product-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body .product-card .product-info,
  body .r27-product-card .product-info {
    min-width: 0 !important;
    padding: 9px !important;
  }

  body .product-card .product-actions,
  body .r27-product-card .product-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body .product-detail-gallery,
  body .product-detail-info,
  body .product-detail-main-image {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .product-detail-main-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 340px !important;
    object-fit: contain !important;
  }

  body .detail-actions-premium,
  body .detail-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body .detail-actions-premium > *,
  body .detail-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body .account-section-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: thin !important;
  }

  body .account-section-tabs a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body .account-order-row,
  body .account-operation-row {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  body .footer-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 14px !important;
    padding: 24px 0 20px !important;
  }

  body .footer-col h3 {
    margin-bottom: 9px !important;
    font-size: 13px !important;
  }

  body .footer-link-list {
    gap: 6px !important;
  }

  body .footer-link-list a,
  body .footer-address,
  body .footer-work-hours {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  body .footer-contact-col {
    grid-column: 1 / -1 !important;
  }

  body .footer-payment-row,
  body .footer-cargo-logos {
    gap: 7px !important;
  }

  body .premium-footer .footer-bottom {
    display: grid !important;
    gap: 6px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 390px) {
  body .container,
  body .container.narrow {
    width: calc(100% - 16px) !important;
  }

  body .header-actions .mini-action {
    padding-inline: 4px !important;
  }

  body .header-actions .mini-action-copy strong {
    font-size: 9px !important;
  }

  body .cart-modern-line {
    grid-template-columns: 26px 76px minmax(0, 1fr) 34px !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  body .cart-modern-line .cart-thumb {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
  }

  body .cart-modern-line .cart-thumb img {
    max-width: 64px !important;
    max-height: 62px !important;
  }
}

@media (max-width: 359px) {
  body .product-grid,
  body .product-list-managed,
  body .footer-main-grid,
  body .cart-modern-actions,
  body .account-title-actions,
  body .account-b2b-actions {
    grid-template-columns: 1fr !important;
  }

  body .header-actions .mini-action-copy span {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    scroll-behavior: auto !important;
  }
}