/* =====================================================================
   GTech3D parça arşivi yerleşimleri (yalnız parcalar/index.html yükler)
   Ortak bileşenler gtech.css içindedir (parça kartı .part, çerçeve .frame, çip .chip, sayfa yolu .iz).
   Sıra: üst başlık, arama çubuğu (header'ın altına yapışır), marka çipleri,
         marka başlıkları ve kart ızgaraları, boş sonuç, son çağrı
   Uzun liste bu sayfadadır: ana sayfaya taşınmaz.
   ===================================================================== */

:root { --ara-h: 70px; }
/* Çapaya gidince başlık, yapışkan header ile arama çubuğunun altında kalsın */
html { scroll-padding-top: calc(var(--hdr-h) + var(--ara-h) + 14px); }

/* Üst başlık ---------------------------------------------------------- */
.kat-ust { padding: clamp(14px, 1.8vw, 24px) 0 clamp(14px, 1.6vw, 20px); }
.kat__h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.25rem); }
.kat-ust .lede { max-width: 68ch; margin-top: clamp(10px, 1.2vw, 16px); }

/* Arama çubuğu -------------------------------------------------------- */
/* JS yoksa çubuk gizlenir (liste yine eksiksiz görünür). */
.ara { position: sticky; top: var(--hdr-h); z-index: 40; background: var(--paper); border-block: 1px solid var(--line-2); }
html:not(.js) .ara { display: none; }
.ara__in { display: flex; align-items: center; gap: 12px 20px; min-height: var(--ara-h); padding-block: 10px; }
.ara__kutu { position: relative; flex: 1 1 auto; min-width: 0; max-width: 560px; }
.ara__kutu > svg {
  position: absolute; left: 13px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  fill: none; stroke: var(--ink-2); stroke-width: 1.75; stroke-linecap: round; pointer-events: none;
}
.ara__alan { padding-left: 42px; padding-right: 46px; border-color: var(--ink); appearance: none; -webkit-appearance: none; }
.ara__alan::-webkit-search-cancel-button, .ara__alan::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.ara__sil {
  position: absolute; right: 4px; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0;
  border: 0; border-radius: var(--r); background: transparent; color: var(--ink);
}
.ara__sil:hover { background: var(--ink); color: var(--paper); }
.ara__sil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ara__say { flex: none; margin: 0; color: var(--steel-text); white-space: nowrap; }
@media (max-width: 719px) { .ara__say:not(.is-sonuc) { display: none; } }

/* Marka çipleri -------------------------------------------------------- */
/* Dar ekranda tek sıra, yana kaydırılır. 860 px üstünde alt alta sarar. Çip, marka başlığına götürür. */
.markalar { padding: 14px 0 0; }
.markalar__liste {
  display: flex; gap: 8px; list-style: none;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut);
}
.markalar__liste::-webkit-scrollbar { display: none; }
.markalar__liste > li { flex: none; }
.markalar .chip { background: var(--white); }
.markalar .chip b { font: 500 .6875rem/1 var(--f-mono); letter-spacing: .04em; color: var(--steel-text); }
.markalar .chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.markalar .chip:hover b { color: var(--on-ink-2); }
.markalar .chip.is-bos { opacity: .38; pointer-events: none; }
.markalar__ayrac { width: 1px; margin: 4px 4px; background: var(--line-2); }
@media (min-width: 860px) {
  .markalar__liste { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; }
}

/* Marka grupları ve kartlar -------------------------------------------- */
.kat-liste { padding-bottom: clamp(8px, 1vw, 16px); }
.marka { padding-top: clamp(28px, 3.4vw, 46px); }
.marka__h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1.5px solid var(--ink);
  font: 800 clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem)/1.15 var(--f-head); letter-spacing: -.016em;
}
.marka__h span {
  margin-left: auto; font: 500 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel-text); white-space: nowrap;
}
/* Arama süzerken marka toplamı yanıltmasın diye gizlenir (görünen kart sayısı arama çubuğunda yazar) */
.kat-liste.is-suzuldu .marka__h span { display: none; }
/* Telefonda 2 sütun. Kart görseli 4/3 alanda, kare görsel %118 gösterilir (kenar payı %11: kırpılmaz). */
.kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; }
.kartlar > .part { --part-ratio: 4 / 3; --part-zoom: 118%; }
.kartlar .part__body { gap: 4px; padding: 10px 11px 12px; }
.kartlar .part__name { font-size: .875rem; }
.kart__no { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kart__no b { font-weight: 600; color: var(--ink); }
a.part__fig { cursor: pointer; }
@media (hover: hover) { .kartlar a.part__fig .part__img { transition: transform .3s var(--ease); } .kartlar a.part__fig:hover .part__img { transform: translate(-50%, -50%) scale(1.05); } }
@media (min-width: 560px) { .kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 800px) { .kartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .kartlar .part__body { padding: 12px 13px 14px; } }
@media (min-width: 1000px) { .kartlar { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kartlar { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }

/* Boş sonuç ------------------------------------------------------------ */
.bos { display: grid; gap: 16px; justify-items: start; margin-top: clamp(22px, 3vw, 36px); padding: clamp(20px, 3vw, 36px); }
.bos p { max-width: 62ch; margin: 0; color: var(--ink-2); }
.bos b { display: block; margin-bottom: 6px; font: 800 var(--fs-h3)/1.2 var(--f-head); letter-spacing: -.008em; color: var(--ink); }
.bos span { font-weight: 600; color: var(--ink); }
.bos span:not(:empty)::before { content: "\201C"; }
.bos span:not(:empty)::after { content: "\201D"; }

/* Son çağrı ------------------------------------------------------------- */
.kat-son__kutu {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 48px; align-items: center; padding: clamp(20px, 3vw, 40px);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center;
}
.kat-son__kutu > * { min-width: 0; }
.kat-son__kutu .lede { margin-top: 12px; }
.kat-son__not { margin: 14px 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
@media (max-width: 479px) { .kat-son__kutu .btn { width: 100%; } }
@media (min-width: 900px) { .kat-son__kutu { grid-template-columns: minmax(0, 1fr) auto; } }