/* CoreV2 content-shell.css
 * Ortak yerlesim (genislik) sistemi — TEK kaynak.
 *
 * Amac: baslik / filtre / icerik / sekme / paket alanlarinin
 * max-width, width, margin, padding ve gap degerlerini tek dosyada toplamak.
 * Daha once bu kurallar home.css, hosting.css, footer.css, cv2-pack-filters.css,
 * cv2-shared-pack.css ve head-critical-styles-consolidated.css icinde dagilmisti.
 *
 * Kural: bu dosyada !important KULLANILMAZ. Sayfa CSS'leri bu tabanin
 * uzerine yalnizca gorsel (renk, golge, tipografi) ekler; genislik vermez.
 *
 * Manifest stem: content-shell — cekirdek CSS (her sayfa), base.css'ten SONRA.
 */

:root {
  /* Kabuk genisligi: mevcut --CoreV2-container-width degeri korunur */
  --cv2-shell-max: var(--CoreV2-container-width, 1300px);
  /* Masaustu / tablet / mobil kenar bosluklari */
  --cv2-shell-gutter: 12px;
  --cv2-shell-gutter-mobile: var(--cv2-mobile-pack-gutter, 14px);
  /* Bolumler arasi ortak bosluk */
  --cv2-shell-gap: 24px;
}

/* ── Ortak kabuk: icerik + sekme + paket + editorial sayfalar ── */
.miotab-contents.content-wrapper,
.corev2-pack-wrapper,
.ref-outer,
.ys-page-wrapper,
.kb-wrap,
.kbd-wrap,
.cv2n-wrap,
.sw-page {
  width: 100%;
  max-width: min(100%, var(--cv2-shell-max));
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cv2-shell-gutter);
  padding-right: var(--cv2-shell-gutter);
  box-sizing: border-box;
}

.miotab-contents.content-wrapper {
  overflow-wrap: break-word;
}

.corev2-pack-wrapper {
  clear: both;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

/* Ic ice kenar boslugu birikmesini onle: kabuk zaten gutter veriyor,
   icteki katmanlar (sekme icerigi, slider, filtre, kart izgarasi)
   ek padding/margin almadan ayni sol-sag hizada durur. */
.corev2-pack-wrapper .miotab-contents.content-wrapper {
  padding-left: 0;
  padding-right: 0;
}

.corev2-pack-wrapper .miotab-content,
.corev2-pack-wrapper .packs-slider-container,
.corev2-pack-wrapper .cv2-pack-listing-filters,
.corev2-pack-wrapper .vertical--packs,
.corev2-pack-wrapper .packs-slider-body,
.corev2-pack-wrapper .packs-cards-panel,
.corev2-pack-wrapper .packs-cards-viewport,
.corev2-pack-wrapper .packs-cards-track {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* ── Filtre alani: kabukla ayni hizada ─────────────────────────── */
.corev2-pack-wrapper .CoreV2-filter-wrap,
.CoreV2-filter-wrap {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Filtre kabugu: tek kaynak (hosting.css / server.css / cv2-packs-row.css /
   cv2-pack-filters.css icindeki cakisan width-max-width-margin kurallari
   kaldirildi; burada toplandi). */
.CoreV2-filter-wrap,
.cv2-pack-listing-filters {
  margin: 0 0 var(--sp-5, 20px);
}

.cv2-pack-listing-filters .CoreV2-filter-wrap {
  max-width: min(100%, var(--cv2-shell-max));
  margin-inline: auto;
}

.CoreV2-filter-wrap .CoreV2-filter,
.cv2-pack-listing-filters .CoreV2-filter {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.CoreV2-filter-wrap .CoreV2-filter .CoreV2-filter-options,
.cv2-pack-listing-filters .CoreV2-filter .CoreV2-filter-options {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .CoreV2-filter-wrap,
  .cv2-pack-listing-filters,
  .cv2-pack-listing-filters .CoreV2-filter-wrap,
  .CoreV2-filter-wrap .CoreV2-filter,
  .cv2-pack-listing-filters .CoreV2-filter {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .CoreV2-filter-wrap,
  .cv2-pack-listing-filters {
    margin-bottom: var(--sp-3, 12px);
  }
}

.CoreV2-filter.CoreV2-filter-mobile .CoreV2-filter-header {
  gap: var(--sp-3, 12px);
  padding: var(--sp-2, 8px);
  width: 100%;
  box-sizing: border-box;
}

/* ── Tablet ────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .miotab-contents.content-wrapper,
  .corev2-pack-wrapper,
  .ref-outer,
  .ys-page-wrapper,
  .kb-wrap,
  .kbd-wrap,
  .cv2n-wrap,
  .sw-page {
    max-width: 100%;
  }

  .corev2-pack-wrapper .CoreV2-filter-wrap {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── Mobil ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .miotab-contents.content-wrapper,
  .corev2-pack-wrapper,
  .ref-outer,
  .ys-page-wrapper,
  .kb-wrap,
  .kbd-wrap,
  .cv2n-wrap,
  .sw-page {
    padding-left: var(--cv2-shell-gutter-mobile);
    padding-right: var(--cv2-shell-gutter-mobile);
  }
}

/* ── Tek kaynak gutter: ic ice padding birikmesini engelle ───────
   Sorun: .products_list + .tablopaketler + .corev2-pack-wrapper +
   .packs-cards-track hepsi ayri ayri sol/sag padding veriyordu; mobilde
   kartlar 50px+ iceriden basliyor ve filtre/baslik ile hizasi bozuluyordu.
   Cozum: kenar boslugunu SADECE .corev2-pack-wrapper verir. */
html body .products_list,
html body .tablopaketler,
html body .packs-slider-container,
html body .corecartpkts-wrapper,
html body .corecartpkts-container,
html body .coreservercart-container,
html body .coreservercart-home-servers,
html body .corev2-pack-wrapper .corev2-pack-wrapper,
html body .corev2-pack-wrapper .packs-cards-viewport,
html body .corev2-pack-wrapper .packs-cards-track,
html body .corev2-pack-wrapper .coreservercart-server-grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body .corev2-pack-wrapper {
  padding-left: var(--cv2-shell-gutter) !important;
  padding-right: var(--cv2-shell-gutter) !important;
}

@media (max-width: 767px) {
  html body .corev2-pack-wrapper {
    padding-left: var(--cv2-shell-gutter-mobile) !important;
    padding-right: var(--cv2-shell-gutter-mobile) !important;
  }

  html body .packs-cards-track,
  html body .packs-slider-body--3v .packs-cards-panel--3v .packs-cards-track {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}