:root {
  --antrasit: #26262a;
  --zemin: #f4f3f0;
  --pah: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--zemin);
  color: var(--antrasit);
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }

/* Başlık */
.baslik {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  background: #fff; border-bottom: 3px solid #e8611a;
}
.baslik img { width: 150px; height: auto; }
.tel {
  text-decoration: none; color: #fff; background: var(--antrasit);
  font-weight: 700; font-size: 15px; padding: 10px 18px;
  clip-path: var(--pah); white-space: nowrap;
}
.tel:hover { background: #e8611a; }

/* Giriş */
.giris { text-align: center; padding: 34px 20px 6px; }
.giris h1 {
  margin: 0 0 6px; font-size: clamp(26px, 5vw, 40px);
  font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
}
.giris h1::after {
  content: ''; display: block; width: 52px; height: 4px;
  background: #e8611a; margin: 10px auto 0;
}
.giris p { margin: 10px 0 0; color: #55555c; }
.giris a { color: #e8611a; font-weight: 700; text-decoration: none; }

/* Izgara */
.izgara {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  padding: 24px 14px 10px;
  max-width: 1240px; margin: 0 auto;
}
@media (min-width: 600px)  { .izgara { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 28px 20px 10px; } }
@media (min-width: 900px)  { .izgara { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .izgara { grid-template-columns: repeat(6, 1fr); } }

/* Kutu */
.kutu {
  background: var(--renk, #55555c);
  clip-path: var(--pah);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 92px;
  transition: transform .15s ease, filter .15s ease;
}
.kutu:hover { transform: translateY(-4px); filter: saturate(1.15); }

.kutu-baslik { padding: 12px 14px; color: #fff; text-align: center; }
.kutu-baslik h2 {
  margin: 0; font-size: 15.5px; font-weight: 800;
  text-transform: uppercase; line-height: 1.22; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.kutu-baslik span {
  display: inline-block; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85);
}

/* Görsel: beyaz zemin multiply ile kaybolur -> şeffaf etkisi */


/* Taban */
.taban {
  margin-top: 44px; padding: 36px 20px 26px;
  background: var(--antrasit); color: #c9c9cf;
  text-align: center; font-size: 14.5px;
  border-top: 4px solid #e8611a;
}
.taban p { margin: 0 0 8px; }
.taban-marka { font-weight: 800; color: #fff; font-size: 15px; letter-spacing: .02em; }
.taban a { color: #fff; text-decoration: none; }
.taban a:hover { color: #e8611a; }
.mini { margin-top: 14px; font-size: 12.5px; color: #8d8d93; }

/* ---- Kutu renkleri (değiştirmek için burayı düzenle) ---- */
.k-asindirici-malzemeler { --renk: #e8611a; }  /* Aşındırıcı Malzemeler */
.k-boyalar { --renk: #0f7b6c; }  /* Boyalar */
.k-civata-baglanti-elemanlari { --renk: #2c5f8a; }  /* Civata & Bağlantı Elemanları */
.k-capak-almalar { --renk: #a83a3a; }  /* Çapak Almalar */
.k-cektirme-ekipmanlari { --renk: #6b4fa0; }  /* Çektirme Ekipmanları */
.k-el-aletleri { --renk: #b07d10; }  /* El Aletleri */
.k-elektrik-malzemeleri-ve-kablolar { --renk: #3a7d44; }  /* Elektrik Malzemeleri Ve Kablolar */
.k-elektrod-ve-sasi-pensler { --renk: #8a3a6b; }  /* Elektrod ve Şasi Pensler */
.k-hassas-olcu-aletleri { --renk: #1f6f8b; }  /* Hassas Ölçü Aletleri */
.k-havali-aletler { --renk: #c2542c; }  /* Havalı Aletler */
.k-hirdavat-malzemeleri { --renk: #4a6b2a; }  /* Hırdavat Malzemeleri */
.k-hortumlar { --renk: #7a4a2a; }  /* Hortumlar */
.k-kaldirma-ekipmanlari { --renk: #2a5a9a; }  /* Kaldırma Ekipmanları */
.k-kesici-takimlar-ve-urunler { --renk: #9a2a4a; }  /* Kesici Takımlar ve Ürünler */
.k-lastik-servis-ekipmanlari { --renk: #417505; }  /* Lastik Servis Ekipmanları */
.k-makine-aksamlari-ve-sifirlama-saatleri { --renk: #8c5e1a; }  /* Makine Aksamları ve Sıfırlama Saatleri */
.k-manyetik-ekipmanlar { --renk: #20818f; }  /* Manyetik Ekipmanlar */
.k-motor-servis-ekipmanlari { --renk: #7d3c98; }  /* Motor Servis Ekipmanları */
.k-pnomatik-malzemeler { --renk: #b3541e; }  /* Pnömatik Malzemeler */
.k-pompa-grubu { --renk: #2e6b5e; }  /* Pompa Grubu */
.k-teknik-hirdavat { --renk: #5d4a9c; }  /* Teknik Hırdavat */
.k-tezgah-ekipmanlari { --renk: #a04000; }  /* Tezgah Ekipmanları */
.k-ustyapi-tesisat-malzemeleri { --renk: #1a6b3c; }  /* Üstyapı Tesisat Malzemeleri */

/* ---- Hero ---- */
.kahraman {
  background:
    linear-gradient(180deg, rgba(23,23,26,0) 45%, rgba(23,23,26,.82) 100%),
    url('hero.webp') center / cover no-repeat;
  color: #fff;
  min-height: clamp(240px, 46vw, 560px);
  display: flex; align-items: flex-end;
  padding: 22px;
}
.kahraman-metin { max-width: 1240px; margin: 0 auto; width: 100%; }
.ustyazi {
  margin: 0 0 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #e8611a;
}
.ustyazi::before {
  content: ''; display: inline-block; width: 24px; height: 3px;
  background: #e8611a; vertical-align: middle; margin-right: 10px;
}
.kahraman h1 {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 46px);
  font-weight: 800; line-height: 1.05; text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
@media (min-width: 900px) { .kahraman { padding: 34px 40px; } }

/* ---- Tüm kategoriler (metin listesi) ---- */
.tum-kat { max-width: 1240px; margin: 48px auto 0; padding: 0 20px; }
.tum-kat h2 {
  margin: 0 0 20px; font-size: clamp(22px, 3vw, 30px);
  font-weight: 800; text-transform: uppercase;
}
.tum-kat h2::after { content: ''; display: block; width: 44px; height: 4px; background: #e8611a; margin-top: 8px; }
.tk-sutunlar { columns: 4; column-gap: 28px; }
@media (max-width: 1100px) { .tk-sutunlar { columns: 3; } }
@media (max-width: 780px)  { .tk-sutunlar { columns: 2; } }
@media (max-width: 480px)  { .tk-sutunlar { columns: 1; } }
.tk-grup { break-inside: avoid; margin-bottom: 18px; }
.tk-grup h3 {
  margin: 0 0 4px; font-size: 14.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .01em;
  border-bottom: 2px solid #e4e2dd; padding-bottom: 4px;
}
.tk-grup ul { list-style: none; margin: 4px 0 0; padding: 0; }
.tk-grup li {
  font-size: 13.5px; color: #55555c; padding: 2.5px 0 2.5px 12px;
  position: relative;
}
.tk-grup li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 5px; height: 5px; background: #e8611a;
}

.wa { color: #4fce5d !important; font-weight: 700; }
.wa:hover { color: #7ee88a !important; }