/* ==================================================================
   kurumsal.css — hizmetler.php, sayfa.php ve iletisim.php'ye ÖZGÜ
   bileşenler (hizmet listesi satırları/grupları, sayfa içeriği
   tipografisi, içindekiler, iletişim formu, harita). Kapsayıcı/
   boşluk/hizalama/tipografi/buton/breadcrumb/kart temel.css'te —
   burada tekrar tanımlanmaz, aynı hz- tasarım dili kullanılır.
   ================================================================== */

@import url('temel.css');

/* ------------------------------------------------------------------
   ALT HİZMET GRUPLARI — ana hizmete göre gruplanmış bağlantı listesi
------------------------------------------------------------------ */
.hz-hizmet-gruplari { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hz-4) var(--hz-4); }
@media (max-width: 900px) { .hz-hizmet-gruplari { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hz-hizmet-gruplari { grid-template-columns: 1fr; } }
.hz-hizmet-grup__baslik {
  font-family: var(--hz-font-baslik);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hz-metin-soluk);
  padding-bottom: var(--hz-2);
  border-bottom: 1px solid var(--hz-cizgi-acik);
  margin-bottom: var(--hz-2);
}
.hz-hizmet-grup__liste { display: flex; flex-direction: column; gap: var(--hz-1); }
.hz-hizmet-grup__liste a { font-size: 0.9375rem; color: var(--hz-metin); transition: color var(--hz-gecis); }
.hz-hizmet-grup__liste a:hover { color: var(--hz-mavi); }

/* ------------------------------------------------------------------
   SAYFA İÇERİĞİ — sayfa.php'nin uzun metin gövdesi (68ch dar sütun)
------------------------------------------------------------------ */
.hz-icerik ul, .hz-icerik ol { margin-bottom: var(--hz-3); padding-left: 1.2em; }
.hz-icerik ul { list-style: disc; }
.hz-icerik ol { list-style: decimal; }
.hz-icerik li { margin-bottom: var(--hz-1); }
.hz-icerik a { color: var(--hz-mavi); text-decoration: underline; text-underline-offset: 2px; }
.hz-icerik h2 { scroll-margin-top: 100px; }
.hz-icerik h3 { scroll-margin-top: 100px; }
.hz-icerik h2:not(:first-child) { padding-top: var(--hz-5); }
.hz-icerik h3:not(:first-child) { padding-top: var(--hz-2); }
.hz-icerik blockquote {
  padding-left: var(--hz-3);
  border-left: 2px solid var(--hz-mavi);
  font-style: italic;
  color: var(--hz-metin-soluk);
  margin-bottom: var(--hz-3);
}
.hz-icerik table { width: 100%; border-collapse: collapse; margin-bottom: var(--hz-3); font-size: 0.9375rem; }
.hz-icerik th, .hz-icerik td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hz-cizgi-acik); }
.hz-icerik th { font-weight: 700; }

.hz-icerik__logo { display: block; margin-bottom: var(--hz-5); }

/* İçindekiler kutusu — yalnızca h2 sayısı fazla olan uzun sayfalarda, yan sütunda yer alır */
.hz-icindekiler {
  border: 1px solid var(--hz-cizgi-acik);
  padding: var(--hz-3);
}
.hz-icindekiler__baslik {
  font-family: var(--hz-font-baslik);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hz-metin-soluk);
  margin-bottom: var(--hz-2);
}
.hz-icindekiler ol { display: flex; flex-direction: column; gap: var(--hz-1); margin-bottom: 0; padding-left: 1.2em; }
.hz-icindekiler a { font-size: 0.9375rem; color: var(--hz-mavi); text-decoration: none; }
.hz-icindekiler a:hover { text-decoration: underline; }

/* Ana metin + yan sütun ızgarası — dar okuma sütununun yanındaki boşluğu
   yan bilgi kutularıyla doldurur (Hakkımızda, Gizlilik Politikası, KVKK) */
.hz-sayfa-izgara { display: grid; grid-template-columns: 1fr; gap: var(--hz-5); }
@media (min-width: 900px) {
  .hz-sayfa-izgara { grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); align-items: start; gap: var(--hz-6); }
}
.hz-sayfa-yan { display: flex; flex-direction: column; gap: var(--hz-3); }
@media (min-width: 900px) {
  .hz-sayfa-yan { position: sticky; top: 100px; }
}
.hz-yan-kutu {
  display: flex;
  flex-direction: column;
  gap: var(--hz-2);
  border: 1px solid var(--hz-cizgi-acik);
  padding: var(--hz-3);
}
.hz-yan-kutu__baslik {
  font-family: var(--hz-font-baslik);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hz-metin-soluk);
}
.hz-yan-iletisim { display: flex; flex-direction: column; gap: var(--hz-2); }
.hz-yan-iletisim__satir { font-size: 0.9375rem; line-height: 1.4; }
.hz-yan-iletisim__etiket { display: block; font-size: 0.75rem; color: var(--hz-metin-soluk); }
.hz-yan-iletisim a { color: var(--hz-mavi); text-decoration: none; }
.hz-yan-iletisim a:hover { text-decoration: underline; }
.hz-yan-kutu .hz-buton { align-self: flex-start; }

.hz-buton-grup { display: flex; gap: var(--hz-2); flex-wrap: wrap; }

/* ------------------------------------------------------------------
   İLETİŞİM — bilgi/form iki sütun, harita
------------------------------------------------------------------ */
.hz-iletisim-izgara { display: grid; grid-template-columns: 1fr; gap: var(--hz-5); }
@media (min-width: 900px) { .hz-iletisim-izgara { grid-template-columns: 38fr 62fr; gap: var(--hz-6); } }

.hz-iletisim-satir {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: var(--hz-3);
  border-bottom: 1px solid var(--hz-cizgi-acik);
}
.hz-iletisim-satir:first-child { padding-top: 0; }
.hz-iletisim-satir__etiket {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hz-metin-soluk);
}
.hz-iletisim-satir__deger { font-size: 1.0625rem; color: var(--hz-metin); }
.hz-iletisim-satir__deger a:hover { color: var(--hz-mavi); }

/* Form */
.hz-form-izgara { display: grid; grid-template-columns: 1fr; gap: 0 var(--hz-3); }
@media (min-width: 600px) { .hz-form-izgara { grid-template-columns: 1fr 1fr; } }
.hz-form-alan {
  display: flex;
  flex-direction: column;
  gap: var(--hz-1);
  margin-bottom: var(--hz-3);
}
.hz-form-alan--tam { grid-column: 1 / -1; }
.hz-form-alan label { font-size: 0.875rem; font-weight: 600; color: var(--hz-metin); }
.hz-form-alan input,
.hz-form-alan select,
.hz-form-alan textarea {
  padding: 0.7em 0.85em;
  border: 1px solid var(--hz-cizgi-acik);
  border-radius: var(--hz-kose);
  background: var(--hz-zemin-beyaz);
  color: var(--hz-metin);
  transition: border-color var(--hz-gecis);
}
.hz-form-alan input:hover, .hz-form-alan select:hover, .hz-form-alan textarea:hover,
.hz-form-alan input:focus, .hz-form-alan select:focus, .hz-form-alan textarea:focus { border-color: var(--hz-mavi); }
.hz-form-alan textarea { resize: vertical; min-height: 7rem; }
.hz-form-alan--hata input,
.hz-form-alan--hata select,
.hz-form-alan--hata textarea { border-color: var(--hz-uyari); }
.hz-form-alan__hata { font-size: 0.8125rem; color: var(--hz-uyari); }

.hz-form-onay {
  display: flex;
  align-items: flex-start;
  gap: var(--hz-2);
  margin-bottom: var(--hz-4);
  font-size: 0.875rem;
  color: var(--hz-metin-soluk);
}
.hz-form-onay input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--hz-cizgi-acik);
  accent-color: var(--hz-mavi);
}
.hz-form-onay a { color: var(--hz-mavi); text-decoration: underline; }

.hz-form-mesaj {
  padding: var(--hz-3);
  border: 1px solid var(--hz-cizgi-acik);
  margin-bottom: var(--hz-4);
  font-size: 0.9375rem;
}
.hz-form-mesaj--basari { border-color: var(--hz-yesil); color: var(--hz-lacivert); }
.hz-form-mesaj--hata { border-color: var(--hz-uyari); color: var(--hz-uyari); }

/* Koyu zemin üstünde form — bu bileşenler aslen açık/beyaz zeminli
   iletişim formu için tasarlandı (koyu metin). Ürün teklif formu gibi
   koyu zeminli bölümlerde yeniden kullanıldığında etiket/alan/onay
   metinleri görünür kalsın diye burada geçersiz kılınır. */
.hz-bolum--koyu .hz-form-alan label { color: var(--hz-metin-ters); }
.hz-bolum--koyu .hz-form-alan input,
.hz-bolum--koyu .hz-form-alan select,
.hz-bolum--koyu .hz-form-alan textarea {
  background: var(--hz-lacivert);
  border-color: var(--hz-cizgi-koyu);
  color: var(--hz-metin-ters);
}
.hz-bolum--koyu .hz-form-alan input::placeholder,
.hz-bolum--koyu .hz-form-alan textarea::placeholder { color: var(--hz-metin-ters); opacity: 0.55; }
.hz-bolum--koyu .hz-form-alan input:hover, .hz-bolum--koyu .hz-form-alan select:hover, .hz-bolum--koyu .hz-form-alan textarea:hover,
.hz-bolum--koyu .hz-form-alan input:focus, .hz-bolum--koyu .hz-form-alan select:focus, .hz-bolum--koyu .hz-form-alan textarea:focus { border-color: var(--hz-mavi); }
.hz-bolum--koyu .hz-form-onay { color: var(--hz-metin-ters); opacity: 0.85; }
.hz-bolum--koyu .hz-form-onay a { color: var(--hz-metin-ters); }
.hz-bolum--koyu .hz-form-mesaj--basari { border-color: var(--hz-yesil); color: var(--hz-metin-ters); }
.hz-bolum--koyu .hz-form-mesaj--hata { border-color: var(--hz-uyari); color: var(--hz-metin-ters); }

/* Bal küpü — yalnızca botlar görsün diye ekrandan tamamen çıkarılır */
.hz-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Harita */
.hz-harita { width: 100%; height: 420px; border: 1px solid var(--hz-cizgi-acik); }

/* ------------------------------------------------------------------
   BLOG — kategori şeridi, öne çıkan yazı, etiket/tarih, sayfalama
------------------------------------------------------------------ */
.hz-bolum--serit { padding-block: var(--hz-3); }

.hz-kategori-seridi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hz-1) var(--hz-3);
  overflow-x: auto;
}
.hz-kategori-seridi a {
  font-family: var(--hz-font-baslik);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--hz-metin-soluk);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--hz-gecis), border-color var(--hz-gecis);
}
.hz-kategori-seridi a:hover { color: var(--hz-metin); }
.hz-kategori-seridi__aktif { color: var(--hz-lacivert) !important; border-color: var(--hz-mavi) !important; }
.hz-kategori-seridi--alt { padding-top: var(--hz-1); }

.hz-yazi-etiket {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hz-mavi);
  margin-bottom: var(--hz-1);
}
.hz-yazi-tarih { font-size: 0.8125rem; color: var(--hz-metin-soluk); }
.hz-bolum--koyu .hz-yazi-etiket { color: var(--hz-metin-ters); opacity: 0.75; }

/* Öne çıkan (ilk) yazı — iki sütun, solda görsel sağda başlık/özet */
.hz-yazi-one-cikan {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hz-3);
  margin-bottom: var(--hz-4);
  padding-bottom: var(--hz-4);
  border-bottom: 1px solid var(--hz-cizgi-acik);
}
@media (min-width: 700px) {
  .hz-yazi-one-cikan { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--hz-5); }
}
.hz-yazi-one-cikan__gorsel { aspect-ratio: 16 / 10; overflow: hidden; }
.hz-yazi-one-cikan__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.hz-yazi-one-cikan h2 { margin-bottom: var(--hz-2); }
.hz-yazi-one-cikan__ozet { color: var(--hz-metin-soluk); margin-bottom: var(--hz-2); }

/* Yazı sayfası: üst meta satırı ve tam genişlik kapak görseli */
.hz-yazi-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hz-3);
  margin-bottom: var(--hz-2);
  font-size: 0.875rem;
  color: var(--hz-metin-ters);
  opacity: 0.85;
}
.hz-yazi-kapak { width: 100%; max-height: 520px; overflow: hidden; }
.hz-yazi-kapak img { width: 100%; height: 100%; object-fit: cover; }

/* Sayfalama */
.hz-sayfalama { display: flex; gap: var(--hz-1); flex-wrap: wrap; padding-top: var(--hz-4); }
.hz-sayfalama a, .hz-sayfalama span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 8px;
  border: 1px solid var(--hz-cizgi-acik);
  font-size: 0.9375rem;
  color: var(--hz-metin);
}
.hz-sayfalama a:hover { border-color: var(--hz-mavi); color: var(--hz-mavi); }
.hz-sayfalama__aktif { background: var(--hz-lacivert); border-color: var(--hz-lacivert) !important; color: var(--hz-zemin-beyaz) !important; }

/* ------------------------------------------------------------------
   ÜRÜNLER — kart, galeri, künye, teknik özellik tablosu
------------------------------------------------------------------ */
.hz-kart--urun .hz-kart__gorsel { aspect-ratio: 4 / 3; }
.hz-urun-kart__ozet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--hz-metin-soluk);
  font-size: 0.875rem;
  margin-bottom: var(--hz-1);
}
.hz-urun-kart__stok { font-size: 0.8125rem; color: var(--hz-metin-soluk); margin-bottom: var(--hz-1); }

/* Görsel ve künye — 55/45 iki sütun */
.hz-urun-izgara { display: grid; grid-template-columns: 1fr; gap: var(--hz-4); }
@media (min-width: 900px) { .hz-urun-izgara { grid-template-columns: 55fr 45fr; gap: var(--hz-5); } }

.hz-urun-galeri { display: flex; flex-direction: column; gap: var(--hz-2); }
.hz-urun-galeri__buyuk { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--hz-cizgi-acik); background: var(--hz-zemin-acik); }
.hz-urun-galeri__buyuk img { width: 100%; height: 100%; object-fit: cover; }
.hz-urun-galeri__serit { display: flex; gap: var(--hz-1); flex-wrap: wrap; }
.hz-urun-galeri__kucuk {
  width: 72px;
  height: 54px;
  overflow: hidden;
  border: 1px solid var(--hz-cizgi-acik);
  padding: 0;
  background: none;
  cursor: pointer;
  transition: border-color var(--hz-gecis);
}
.hz-urun-galeri__kucuk img { width: 100%; height: 100%; object-fit: cover; }
.hz-urun-galeri__kucuk--aktif { border-color: var(--hz-mavi); border-width: 2px; }
.hz-urun-galeri__bos {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hz-cizgi-acik);
  background: var(--hz-zemin-acik);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hz-metin-soluk);
  font-size: 0.875rem;
}

.hz-kunye { display: flex; flex-direction: column; }
.hz-kunye .hz-buton { align-self: flex-start; margin-top: var(--hz-2); }
.hz-kunye__katalog { font-size: 0.875rem; margin-top: var(--hz-2); }

/* Teknik özellikler — anahtar/değer, kenarlıksız, hairline satır arası */
.hz-teknik-tablo { width: 100%; border-collapse: collapse; }
.hz-teknik-tablo tr { border-bottom: 1px solid var(--hz-cizgi-acik); }
.hz-teknik-tablo tr:last-child { border-bottom: none; }
.hz-teknik-tablo th, .hz-teknik-tablo td { text-align: left; padding-block: var(--hz-2); font-weight: 400; }
.hz-teknik-tablo th { color: var(--hz-metin-soluk); width: 45%; padding-inline-end: var(--hz-3); }