/* ==========================================================
   /modules/kategori/css/03-layout.css  (FULL PRO / MAGAZA-LIKE)
   - Header boşluklarını MAGAZA ile aynı hizaya getirir
   - Sol filtre + sağ içerik grid düzeni
   - Responsive kırılımlar + taşma/overflow önlemleri
   ========================================================== */

/* Form ve ana düzen */
.kategori-page .kategori-form{ margin:0; }

/* =========================
   HEADER (MAGAZA LIKE FIX)
   ========================= */
.kategori-page .head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
  min-width:0;
}

/* kategori üst başlık bloğu */
.kategori-page .head.page-head{
  margin-top: 0;
  padding-top: 0;
}

/* başlık yazısı: boşluk/bol görünüm fix */
.kategori-page .page-title{
  margin:0;
  line-height: 1.15;
  letter-spacing: -0.01em;
  min-width:0;
  overflow-wrap:anywhere;
}

/* mobil filtre butonu (header içinde) */
.kategori-page .filter-toggle{
  display:none; /* mobilde açılacak (aşağıda) */
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: var(--r-md);

  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);

  font-weight: var(--w-black);
  box-shadow: var(--sh-xs);
  cursor:pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =========================
   LAYOUT GRID
   ========================= */

/* 2 kolon grid: filter + content */
.kategori-page .layout{
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--s4);
  align-items:start;
  min-width:0;
}

/* Sağ içerik */
.kategori-page .content{ min-width:0; }

/* Sol sidebar */
.kategori-page .sidebar{ min-width:0; }

/* Taşmaları engelle */
.kategori-page :is(.layout,.sidebar,.content,.head,.filter-body,.grid3){
  min-width:0;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1024px){
  .kategori-page .layout{
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--s3);
  }
}

/* Mobile: tek kolon + toggle görünür */
@media (max-width: 920px){
  .kategori-page .filter-toggle{ display:inline-flex; }

  .kategori-page .layout{
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}