/* Gayrimenkul modülü — GayrimenkulKayseri (Argos) ilan sisteminin birebir portu.
   Self-contained: kendi tokenları + component stilleri. Harita2 tema CSS'inden bağımsız. */
.gm-root {
  --color-ink: #17181c;
  --color-cream: #faf5f5;
  --color-altin: #d50a11;
  --color-altin-2: #a50009;
  --color-metin: #1c1d22;
  --color-metin-soft: #6c6a70;
  --color-cizgi: #ebdddd;
  --color-surface: #ffffff;
  --color-panel-bg: #faf5f5;
  --radius-kutu: 6px;
  color: var(--color-metin);
  background: var(--color-cream);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
.gm-root *, .gm-root *::before, .gm-root *::after { box-sizing: border-box; }
.gm-root a { color: inherit; text-decoration: none; }
.gm-root button { font-family: inherit; cursor: pointer; }
.gm-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.gm-tnum { font-variant-numeric: tabular-nums; }

/* Üst şerit / başlık */
.gm-head { border-bottom: 1px solid var(--color-cizgi); background: var(--color-cream); }
.gm-head-in { max-width: 1120px; margin: 0 auto; padding: 28px 20px; }
.gm-bc { font-size: 13px; color: var(--color-metin-soft); }
.gm-bc a:hover { color: var(--color-metin); }
.gm-bc .sep { margin: 0 8px; }
.gm-h1 { margin: 8px 0 0; font-size: 28px; font-weight: 800; color: var(--color-metin); }
.gm-search { margin-top: 16px; display: flex; max-width: 520px; align-items: stretch;
  overflow: hidden; border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: #fff; }
.gm-search input { height: 44px; width: 100%; border: 0; background: transparent; padding: 0 16px; font-size: 14px; outline: none; }
.gm-search .cnt { display: flex; align-items: center; padding: 0 16px; font-size: 13px; color: var(--color-metin-soft); white-space: nowrap; }

/* Grid: sol filtre + sağ sonuç */
.gm-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 32px 0; }
@media (max-width: 900px) { .gm-grid { grid-template-columns: 1fr; } }

/* Filtre */
.gm-mobil-toggle { display: none; }
@media (max-width: 900px) {
  .gm-mobil-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between;
    margin-bottom: 12px; border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi);
    background: #fff; padding: 12px 16px; font-size: 14px; font-weight: 700; }
  .gm-filtre-box { display: none; }
  .gm-filtre-box.acik { display: block; }
}
@media (min-width: 901px) { .gm-filtre-col { position: sticky; top: 20px; align-self: start; } }
.gm-filtre { overflow: hidden; border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: var(--color-surface); }
.gm-filtre-baslik { display: flex; align-items: center; justify-content: space-between;
  background: var(--color-panel-bg); padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--color-metin); }
.gm-temizle { font-size: 12px; font-weight: 400; color: var(--color-altin); background: none; border: 0; }
.gm-temizle:hover { text-decoration: underline; }
.gm-grup { border-bottom: 1px solid var(--color-cizgi); padding: 12px 16px; }
.gm-grup-bas { display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: 0; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-metin-soft); }
.gm-grup-bas:hover { color: var(--color-metin); }
.gm-grup-bas .ok { font-size: 10px; }
.gm-grup-govde { margin-top: 10px; }
.gm-grup.kapali .gm-grup-govde { display: none; }
.gm-radios { display: flex; flex-direction: column; gap: 6px; }
.gm-radios label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.gm-radios input { accent-color: var(--color-altin); }
.gm-seg { display: flex; gap: 4px; }
.gm-seg button { flex: 1; border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi);
  background: #fff; color: var(--color-metin-soft); padding: 8px; font-size: 12px; }
.gm-seg button:hover { border-color: var(--color-altin); }
.gm-seg button[aria-pressed="true"] { border-color: var(--color-altin); background: var(--color-altin); color: #fff; font-weight: 700; }
.gm-input { width: 100%; border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi);
  background: #fff; padding: 8px 10px; font-size: 13px; outline: none; }
.gm-input:focus { border-color: var(--color-altin); }
.gm-input:disabled { opacity: .5; }
.gm-oda-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-oda { border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: #fff;
  color: var(--color-metin-soft); padding: 6px 10px; font-size: 12px; }
.gm-oda:hover { border-color: var(--color-altin); }
.gm-oda[aria-pressed="true"] { border-color: var(--color-altin); background: var(--color-altin); color: #fff; font-weight: 700; }
.gm-range { display: flex; align-items: center; gap: 6px; }
.gm-range span { color: var(--color-metin-soft); }

/* Sonuç barı + tablo */
.gm-sonuc-bar { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: var(--color-surface); padding: 12px 16px; }
.gm-sonuc-bar p { margin: 0; font-size: 14px; }
.gm-sirala-mobil { display: none; align-items: center; gap: 8px; font-size: 14px; color: var(--color-metin-soft); }
@media (max-width: 640px) { .gm-sirala-mobil { display: flex; } }
.gm-sirala-mobil select { border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: #fff; padding: 6px 10px; font-size: 14px; }

.gm-tablo { overflow: hidden; border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: var(--color-surface); }
.gm-thead { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-cizgi);
  background: var(--color-panel-bg); padding: 8px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--color-metin-soft); }
@media (max-width: 640px) { .gm-thead { display: none; } }
.gm-thead .sp-img { width: 112px; flex-shrink: 0; }
.gm-th { display: flex; align-items: center; gap: 4px; background: none; border: 0; color: inherit;
  font: inherit; text-transform: inherit; letter-spacing: inherit; padding: 0; }
.gm-th:hover { color: var(--color-altin); }
.gm-th.basl { flex: 1; text-align: left; }
.gm-th.m2 { width: 64px; justify-content: flex-end; }
.gm-th.fiyat { width: 128px; justify-content: flex-end; }
.gm-th .yon { color: var(--color-altin); }
.gm-thead .oda { width: 64px; text-align: center; }
.gm-thead .ilce { width: 112px; }
.gm-th.tarih { width: 80px; justify-content: flex-end; }
@media (max-width: 1024px) { .gm-th.tarih, .gm-row .c-tarih { display: none !important; } }

/* İlan satırı */
.gm-row { border-bottom: 1px solid var(--color-cizgi); transition: background .15s; }
.gm-row:last-child { border-bottom: 0; }
.gm-row:hover { background: var(--color-panel-bg); }
.gm-row a { display: flex; align-items: stretch; gap: 12px; padding: 12px; }
.gm-row .foto { position: relative; height: 84px; width: 112px; flex-shrink: 0; overflow: hidden;
  border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: var(--color-panel-bg); }
.gm-row .foto img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; }
.gm-row a:hover .foto img { transform: scale(1.05); }
.gm-row .fcount { position: absolute; bottom: 4px; right: 4px; border-radius: 999px;
  background: rgba(23,24,28,.7); padding: 1px 6px; font-size: 10px; font-weight: 500; color: #fff; }
.gm-row .orta { display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: center; gap: 4px; }
.gm-row .rozetler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gm-row .rz { border-radius: 999px; background: var(--color-panel-bg); padding: 1px 8px; font-size: 10px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-altin); }
.gm-row .rz.yeni { background: var(--color-altin); color: #fff; }
.gm-row .rbaslik { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--color-metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-row a:hover .rbaslik { color: var(--color-altin); }
.gm-row .rkonum { margin: 0; font-size: 12px; color: var(--color-metin-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-row .mobil-ozet { margin-top: 4px; display: none; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--color-metin-soft); }
.gm-row .mobil-ozet strong { color: var(--color-metin); }
.gm-row .mobil-ozet .fy { font-weight: 700; color: var(--color-metin); }
@media (max-width: 640px) { .gm-row .mobil-ozet { display: flex; } }
.gm-row .col { display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; }
@media (max-width: 640px) { .gm-row .col { display: none; } }
.gm-row .c-m2 { width: 64px; align-items: flex-end; text-align: right; }
.gm-row .c-oda { width: 64px; align-items: center; text-align: center; }
.gm-row .c-fiyat { width: 128px; align-items: flex-end; text-align: right; }
.gm-row .c-ilce { width: 112px; }
.gm-row .c-tarih { width: 80px; align-items: flex-end; text-align: right; font-size: 11px; color: var(--color-metin-soft); }
.gm-row .big { font-size: 14px; font-weight: 600; color: var(--color-metin); }
.gm-row .big.fy { font-size: 16px; font-weight: 700; }
.gm-row .sub { font-size: 11px; color: var(--color-metin-soft); }
.gm-bos { border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: #fff;
  padding: 48px; text-align: center; color: var(--color-metin-soft); }
.gm-bos button { border: 0; background: none; font-weight: 600; color: var(--color-altin); }

/* ---------- İLAN DETAY ---------- */
.gm-d-wrap { max-width: 1120px; margin: 0 auto; padding: 16px 16px 40px; }
.gm-d-bc { margin-bottom: 12px; font-size: 12px; color: var(--color-metin-soft); }
.gm-d-bc a { color: var(--color-altin); }
.gm-d-bc a:hover { text-decoration: underline; }
.gm-d-bc .sep { padding: 0 6px; }
.gm-d-bc .kirmizi { color: var(--color-altin); }
.gm-card { border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: #fff; }
.gm-card-bas { border-bottom: 1px solid var(--color-cizgi); background: var(--color-cream);
  padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--color-metin); }
.gm-d-baslikbar { margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; border-radius: var(--radius-kutu);
  border: 1px solid var(--color-cizgi); background: #fff; padding: 16px; }
@media (min-width: 640px) { .gm-d-baslikbar { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.gm-d-baslikbar h1 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--color-metin); }
.gm-d-konum { margin: 4px 0 0; font-size: 13px; color: var(--color-altin); }
.gm-d-konum .g { color: var(--color-metin-soft); }
.gm-d-fiyat-box { flex-shrink: 0; text-align: left; }
@media (min-width: 640px) { .gm-d-fiyat-box { text-align: right; } }
.gm-d-fiyat { margin: 0; font-size: 26px; font-weight: 700; line-height: 1; color: var(--color-metin); }
.gm-d-fiyat .tl { font-size: 18px; }
.gm-d-fiyat .ay { font-size: 14px; font-weight: 400; color: var(--color-metin-soft); }
.gm-d-ilanno { margin: 4px 0 0; font-size: 12px; color: var(--color-metin-soft); }

.gm-d-main { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 12px; }
@media (max-width: 900px) { .gm-d-main { grid-template-columns: 1fr; } }
.gm-d-galeri { border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: #fff; padding: 12px; }
.gm-d-buyuk { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-kutu);
  background: var(--color-panel-bg); }
.gm-d-buyuk img { width: 100%; height: 100%; object-fit: contain; background: var(--color-panel-bg); }
.gm-d-buyuk .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: 999px; border: 0; background: rgba(23,24,28,.55); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.gm-d-buyuk .nav.prev { left: 10px; } .gm-d-buyuk .nav.next { right: 10px; }
.gm-d-buyuk .sayac { position: absolute; bottom: 10px; right: 10px; border-radius: 999px; background: rgba(23,24,28,.7);
  padding: 3px 10px; font-size: 12px; color: #fff; }
.gm-d-thumbs { margin-top: 10px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gm-d-thumbs img { height: 60px; width: 80px; flex-shrink: 0; object-fit: contain; background: var(--color-panel-bg); border-radius: 4px;
  border: 2px solid transparent; cursor: pointer; }
.gm-d-thumbs img.aktif { border-color: var(--color-altin); }
.gm-d-noimg { display: flex; aspect-ratio: 4/3; align-items: center; justify-content: center;
  border-radius: var(--radius-kutu); background: var(--color-panel-bg); color: var(--color-metin-soft); font-size: 14px; }

.gm-d-aside { display: flex; flex-direction: column; gap: 12px; }
.gm-bilgi-list { list-style: none; margin: 0; padding: 0; }
.gm-bilgi-list li { display: flex; padding: 8px 12px; font-size: 13px; }
.gm-bilgi-list li:nth-child(odd) { background: #fff; }
.gm-bilgi-list li:nth-child(even) { background: var(--color-cream); }
.gm-bilgi-list .k { width: 46%; font-weight: 600; color: var(--color-metin-soft); }
.gm-bilgi-list .v { flex: 1; color: var(--color-metin); }
.gm-danisman { padding: 16px; }
.gm-danisman .top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding-bottom: 12px; }
.gm-danisman .ad { font-size: 15px; font-weight: 700; }
.gm-danisman .rozet { border-radius: var(--radius-kutu); background: var(--color-altin); padding: 2px 8px; font-size: 11px; font-weight: 700; color: #fff; }
.gm-danisman .rol { margin: 12px 0 0; font-size: 12px; color: var(--color-metin-soft); }
.gm-danisman .tel { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; color: var(--color-altin); }
.gm-danisman .tel:hover { text-decoration: underline; }
.gm-btns { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.gm-btn { border-radius: var(--radius-kutu); padding: 10px 16px; text-align: center; font-size: 14px; font-weight: 700; color: #fff; }
.gm-btn.ara { background: var(--color-altin); }
.gm-btn.ara:hover { background: var(--color-altin-2); }
.gm-btn.wa { background: #25d366; }
.gm-btn.wa:hover { background: #1eb457; }

.gm-aciklama { white-space: pre-line; padding: 16px; font-size: 13px; line-height: 1.7; color: var(--color-metin); }
.gm-ozellik-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px 32px; padding: 16px; }
@media (max-width: 900px) { .gm-ozellik-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .gm-ozellik-grid { grid-template-columns: 1fr; } }
.gm-ozellik-grid h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--color-metin); }
.gm-ozellik-grid ul { list-style: none; margin: 0; padding: 0; }
.gm-ozellik-grid li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-metin); margin-bottom: 6px; }
.gm-ozellik-grid .tik { font-weight: 700; color: #4a913c; }
.gm-cevre { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 32px; }
@media (max-width: 640px) { .gm-cevre { grid-template-columns: 1fr; } }
.gm-cevre li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid #f0f0f0; padding-bottom: 6px; font-size: 13px; }
.gm-cevre .mes { flex-shrink: 0; font-weight: 600; color: var(--color-altin); }
.gm-konum-bas { display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--color-cizgi); background: var(--color-cream); padding: 10px 16px; }
.gm-konum-bas .yol { font-size: 13px; font-weight: 600; color: var(--color-altin); }
.gm-konum-bas .yol:hover { text-decoration: underline; }
.gm-konum iframe { height: 360px; width: 100%; border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); }
.gm-konum .p { margin: 8px 0 0; padding: 0 12px 12px; font-size: 12px; color: var(--color-metin-soft); }
.gm-mt { margin-top: 12px; }

/* Benzer ilanlar */
.gm-benzer { margin-top: 24px; }
.gm-benzer h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.gm-benzer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 900px) { .gm-benzer-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .gm-benzer-grid { grid-template-columns: 1fr; } }
.gm-bcard { border-radius: var(--radius-kutu); border: 1px solid var(--color-cizgi); background: #fff; overflow: hidden; }
.gm-bcard .im { aspect-ratio: 4/3; background: var(--color-panel-bg); overflow: hidden; }
.gm-bcard .im img { width: 100%; height: 100%; object-fit: cover; }
.gm-bcard .bd { padding: 10px 12px; }
.gm-bcard .t { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--color-metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-bcard .f { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--color-altin); }


/* ===== Albaksat / sahibinden vitrin kart ızgarası (ilanlar) ===== */
.gm-cardgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 14px;
  align-items: start;
}
.gm-vcard { display: block; text-decoration: none; }
.gm-vcard-img {
  display: block; position: relative; width: 100%; aspect-ratio: 4 / 3;
  border: 1px solid var(--color-cizgi); border-radius: var(--radius-kutu);
  background: #ececec; overflow: hidden;
}
.gm-vcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-vcard:hover .gm-vcard-img { border-color: var(--color-altin); }
.gm-vcard-img .badge {
  position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.6);
  color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;
}
.gm-vcard-img .price {
  position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.62);
  color: #fff; font-size: 12px; font-weight: 700; padding: 3px 6px;
}
.gm-vcard-title {
  display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.3;
  color: var(--color-metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-vcard:hover .gm-vcard-title { color: var(--color-altin); text-decoration: underline; }
@media (max-width: 1100px) { .gm-cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .gm-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .gm-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sıralama seçici her ekranda görünür (vitrin başlığı) */
.gm-sirala-mobil { display: inline-flex; align-items: center; gap: 6px; }


/* ============================================================
   ALBAKSAT / SAHIBINDEN kategori (ilanlar) düzeni — birebir port
   Kaynak: GayrimenkulKayseri app/globals.css .shb kapsamı
   ============================================================ */
.shb {
  --shb-yellow: var(--color-altin);
  --shb-yellow-2: var(--color-altin-2);
  --shb-on-accent: #ffffff;
  --shb-link: var(--color-altin);
  --shb-title: var(--color-metin);
  --shb-text: var(--color-metin);
  --shb-muted: var(--color-metin-soft);
  --shb-border: var(--color-cizgi);
  --shb-border-2: var(--color-cizgi);
  --shb-panel: var(--color-panel-bg);
  --shb-panel-2: #ffffff;
  --shb-hover: var(--color-cream);
  --shb-vitrin: var(--color-cream);
  --shb-red: var(--color-altin);
  --shb-th-text: var(--color-metin-soft);
  --shb-radius: var(--radius-kutu);
  background: var(--color-cream);
  color: var(--shb-text);
  font-size: 13px;
  line-height: 1.5;
}
.shb a { color: var(--shb-link); text-decoration: none; }
.shb a:hover { text-decoration: underline; }
.shb ::selection { background: var(--shb-yellow); color: #fff; }

.shb-main { max-width: 1120px; margin: 0 auto; padding: 24px 20px 48px; }
.shb-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.shb-mobil-toggle { display: none; width: 100%; height: 34px; margin-bottom: 8px;
  background: var(--color-altin); color: #fff; border: 0; border-radius: var(--radius-kutu);
  font-size: 13px; font-weight: 700; cursor: pointer; }
@media (max-width: 900px) {
  .shb-layout { grid-template-columns: 1fr; }
  .shb-mobil-toggle { display: block; }
  #shb-filtre-col.kapali #shb-filtre { display: none; }
}

/* Breadcrumb */
.shb-crumb { font-size: 12px; color: var(--shb-muted); margin-bottom: 12px; }
.shb-crumb a { color: var(--shb-link); }
.shb-crumb .sep { margin: 0 5px; color: #bbb; }

/* Arama */
.shb-search {
  display: flex; align-items: stretch; height: 34px; max-width: 520px; margin-bottom: 16px;
  border: 1px solid var(--shb-border-2); border-radius: 3px; overflow: hidden; background: #fff;
}
.shb-search input { border: 0; padding: 0 10px; font-size: 13px; outline: none; flex: 1; min-width: 0; }
.shb-search button {
  border: 0; background: var(--shb-yellow); color: var(--shb-on-accent); font-weight: 700;
  padding: 0 20px; font-size: 13px; cursor: pointer;
}
.shb-search button:hover { background: var(--shb-yellow-2); }

/* Sol panel (filtre) */
.shb-side { border: 1px solid var(--shb-border); background: #fff; border-radius: 3px; overflow: hidden; }
.shb-side + .shb-side { margin-top: 10px; }
.shb-side-head {
  background: var(--shb-panel); border-bottom: 1px solid var(--shb-border);
  padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--shb-th-text);
  text-transform: uppercase; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: space-between;
}
.shb-side-body { padding: 8px 10px; }
.shb-tree a { display: block; padding: 3px 0; font-size: 12px; color: var(--shb-link); }
.shb-tree a.active { color: var(--color-metin); font-weight: 700; }
.shb-tree .cnt { color: var(--shb-muted); font-size: 11px; }

.shb-field { margin-bottom: 9px; }
.shb-field:last-child { margin-bottom: 0; }
.shb-label { display: block; font-size: 11px; font-weight: 700; color: #666; margin-bottom: 3px; }
.shb-input, .shb-select {
  width: 100%; height: 28px; border: 1px solid var(--shb-border-2); border-radius: 2px;
  padding: 0 6px; font-size: 12px; color: #333; background: #fff; outline: none;
}
.shb-input:focus, .shb-select:focus { border-color: var(--color-altin); }
.shb-range { display: flex; align-items: center; gap: 5px; }
.shb-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; cursor: pointer; color: #333; }
.shb-chk input { accent-color: var(--shb-link); }
.shb-btn-apply {
  width: 100%; height: 32px; background: var(--shb-yellow); border: 1px solid var(--shb-yellow-2);
  border-radius: var(--shb-radius); font-size: 12px; font-weight: 700; color: var(--shb-on-accent); cursor: pointer;
}
.shb-btn-apply:hover { background: var(--shb-yellow-2); }
.shb-btn-clear { background: none; border: 0; color: var(--shb-link); font-size: 11px; font-weight: 400; cursor: pointer; }
.shb-btn-clear:hover { text-decoration: underline; }

/* Zaman filtreleri */
.shb-time { padding: 4px 0 2px; }
.shb-time-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 12px; color: #444; }
.shb-time-ico {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ececec; color: #888; font-size: 11px; font-weight: 700;
}
.shb-time-links a { color: var(--shb-link); font-size: 12px; }
.shb-time-links a.active { color: var(--color-metin); font-weight: 700; }
.shb-time-links .sep { color: #ccc; margin: 0 4px; }
.shb-time-row a.active { color: var(--color-metin); font-weight: 700; }

/* Kategori ağacı ikon başlığı */
.shb-cat-ico {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--shb-yellow); color: #fff; font-size: 12px;
}
.shb-cat-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.shb-cat-head b { font-size: 13px; color: var(--color-metin); }
.shb-cat-head .cnt { color: var(--shb-muted); font-size: 11px; font-weight: 400; }

/* Vitrin başlığı + sıralama */
.shb-vitrin-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 4px; flex-wrap: wrap; gap: 8px;
}
.shb-vitrin-head h1 { font-size: 15px; font-weight: 700; color: var(--color-metin); }
.shb-sort select { height: 26px; border: 1px solid var(--shb-border-2); border-radius: 2px; font-size: 12px; padding: 0 6px; }

/* Kart ızgarası */
.shb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; align-items: start; }
.shb-card { display: block; }
.shb-card-img {
  display: block; position: relative; width: 100%; aspect-ratio: 4 / 3;
  border: 1px solid var(--shb-border); border-radius: var(--shb-radius);
  background: #ececec; overflow: hidden;
}
.shb-card-img img { display: block; width: 100%; height: 100%; object-fit: contain; background: #ececec; }
.shb-card:hover .shb-card-img { border-color: var(--shb-yellow-2); }
.shb-card-img .badge {
  position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.6);
  color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 2px;
}
.shb-card-img .price {
  position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.62);
  color: #fff; font-size: 11px; font-weight: 700; padding: 2px 5px;
}
.shb-card-title {
  display: block; margin-top: 5px; font-size: 12px; line-height: 1.3;
  color: var(--color-metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shb-card:hover .shb-card-title { color: var(--shb-link); text-decoration: underline; }
@media (max-width: 1100px) { .shb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .shb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .shb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pagination */
.shb-pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 14px 0; }
.shb-pager button {
  min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--shb-border-2); border-radius: var(--shb-radius); font-size: 12px;
  color: var(--shb-link); padding: 0 6px; background: #fff; font-family: inherit; cursor: pointer;
}
.shb-pager button:hover:not(.cur):not(:disabled) { border-color: var(--shb-yellow); color: var(--shb-yellow); }
.shb-pager button:disabled { opacity: .4; cursor: default; }
.shb-pager .cur { background: var(--shb-yellow); border-color: var(--shb-yellow-2); color: var(--shb-on-accent); font-weight: 700; }
.tnum { font-variant-numeric: tabular-nums; }