/* ==================================================================
   hizmet.css — Hizmet detay sayfasına ÖZGÜ bileşenler (hero, veri
   şeridi, ana anlatım/çerçeve, iki sütun, tablo, alıntı, kapsam,
   standartlar, sss, cta). Kapsayıcı/boşluk/hizalama/tipografi/buton/
   breadcrumb/kart gibi ORTAK altyapı assets/css/temel.css'te —
   burada tekrar tanımlanmaz, tek kaynak orasıdır.
   ================================================================== */

@import url('temel.css');

/* ------------------------------------------------------------------
   1) HERO — tam genişlik, koyu zemin, düşük opaklıkta arka plan görseli
------------------------------------------------------------------ */
.hz-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding-block: var(--hz-5);
}
.hz-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 42, 77, 0.74);
}
.hz-hero .hz-kapsayici { position: relative; z-index: 1; }
.hz-hero h1 { color: var(--hz-metin-ters); margin-bottom: var(--hz-2); }
.hz-hero p { color: var(--hz-metin-ters); font-size: 1.1875rem; line-height: 1.7; max-width: var(--hz-dar); margin-bottom: var(--hz-3); }
.hz-hero p:last-child { margin-bottom: 0; }

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

.hz-rozet {
  display: inline-block;
  padding: 0.3em 0.85em;
  border: 1px solid var(--hz-yesil);
  border-radius: var(--hz-kose);
  color: var(--hz-yesil);
  font-family: var(--hz-font-metin);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--hz-3);
}

/* ------------------------------------------------------------------
   2) VERİ ŞERİDİ — üç hücre, dikey hairline, değerler asla kırmaz
------------------------------------------------------------------ */
.hz-veri-serit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--hz-cizgi-acik);
}
.hz-veri-oge {
  padding-block: var(--hz-3);
  padding-inline: var(--hz-3);
  border-left: 1px solid var(--hz-cizgi-acik);
}
.hz-veri-oge:first-child { border-left: none; padding-inline-start: 0; }
.hz-veri-deger {
  display: block;
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
  font-weight: 700;
  color: var(--hz-lacivert);
  white-space: nowrap;
  margin-bottom: 4px;
}
.hz-veri-etiket { display: block; font-size: 0.8125rem; color: var(--hz-metin-soluk); white-space: nowrap; }
@media (max-width: 700px) {
  .hz-veri-serit { grid-template-columns: 1fr; }
  .hz-veri-oge { border-left: none; border-top: 1px solid var(--hz-cizgi-acik); padding-inline: 0; }
  .hz-veri-oge:first-child { border-top: none; padding-block-start: 0; }
  .hz-veri-deger, .hz-veri-etiket { white-space: normal; }
}

/* ------------------------------------------------------------------
   3) ALT HİZMETLER — .hz-kartlar/.hz-kart artık temel.css'te (ortak,
   hizmetler.php de kullanıyor), burada tekrar tanımlanmaz.
------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   4) ANA ANLATIM — Bir gövde görseli varsa (hero'dakinden FARKLI bir
   fotoğraf) metin solda / görsel sağda eşleşir, ikisi de aynı
   yükseklikte (stretch); 55/45 grid sütunu metni zaten yeterince
   daraltır, ayrıca max-width gerekmez. Görsel yoksa metin kapsayıcının
   tam genişliğini kullanır. style.css de yüklendiği için onun genel
   "p { max-width: 68ch }" kuralı burada AÇIKÇA iptal edilir — aksi
   halde görsel yokken sağ taraf boş bir sütunmuş gibi durur. */
.hz-anlatim h2,
.hz-anlatim p { max-width: none; }

.hz-anlatim-govde { display: grid; grid-template-columns: 1fr; gap: var(--hz-4); }
@media (min-width: 900px) {
  .hz-anlatim-govde { grid-template-columns: 55fr 45fr; gap: var(--hz-5); }
}
.hz-anlatim-govde__gorsel { min-width: 0; }

/* İki çerçeve: tek düz fotoğraf yerine, hizmete özgü iki kare —
   biri büyük, biri küçük ve onun sol-alt köşesine BİNEREK oturur
   (bkz. onaylanan referans görünüm). Her ikisi de mutlak konumlu
   olduğu için kapsayıcının kendi yüksekliğini ARTIRMAZLAR —
   kapsayıcı grid satırıyla birlikte metin sütunuyla aynı yükseklikte
   kalır, bölüm aşağı doğru uzamaz. */
.hz-anlatim-cerceve {
  position: relative;
  height: 100%;
  min-height: 320px;
}
.hz-anlatim-cerceve__oge {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--hz-cizgi-acik);
}
.hz-anlatim-cerceve__oge img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hz-anlatim-cerceve__oge--iki {
  z-index: 1;
  width: 52%;
  height: 44%;
  border: 6px solid var(--hz-zemin-beyaz);
}

/* Üç yerleşim varyantı — hizmete göre değişir (bkz. hizmet.php),
   aynı iki-çerçeve fikri her sayfada farklı bir köşeden kurulur. */
.hz-anlatim-cerceve--v1 .hz-anlatim-cerceve__oge--bir { top: 0; right: 0; width: 84%; height: 80%; }
.hz-anlatim-cerceve--v1 .hz-anlatim-cerceve__oge--iki { left: 0; bottom: 0; }

.hz-anlatim-cerceve--v2 .hz-anlatim-cerceve__oge--bir { top: 0; left: 0; width: 84%; height: 80%; }
.hz-anlatim-cerceve--v2 .hz-anlatim-cerceve__oge--iki { right: 0; bottom: 0; }

.hz-anlatim-cerceve--v3 .hz-anlatim-cerceve__oge--bir { bottom: 0; right: 0; width: 84%; height: 80%; }
.hz-anlatim-cerceve--v3 .hz-anlatim-cerceve__oge--iki { left: 0; top: 0; }

/* ------------------------------------------------------------------
   5) İKİ SÜTUNLU BÖLÜM — eşit sütun, geniş boşluk, ayraç yok
------------------------------------------------------------------ */
.hz-iki-sutun { display: grid; grid-template-columns: 1fr; gap: var(--hz-4); }
@media (min-width: 700px) {
  .hz-iki-sutun { grid-template-columns: 1fr 1fr; gap: var(--hz-5); }
}
.hz-iki-sutun h3 { margin-bottom: var(--hz-2); }
.hz-iki-sutun p { margin-bottom: 0; max-width: none; }

/* ------------------------------------------------------------------
   6) TESLİM ŞEKLİ TABLOSU — kenarlıksız, satır arası hairline
------------------------------------------------------------------ */
.hz-tablo-sarici { overflow-x: auto; }
.hz-tablo { width: 100%; border-collapse: collapse; }
.hz-tablo th, .hz-tablo td {
  text-align: left;
  padding-block: var(--hz-2);
  padding-inline-end: var(--hz-4);
  border-bottom: 1px solid var(--hz-cizgi-acik);
  white-space: nowrap;
}
.hz-tablo th {
  font-family: var(--hz-font-metin);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hz-metin-soluk);
  border-bottom: 1px solid var(--hz-metin-soluk);
}
.hz-tablo td:first-child { font-weight: 600; }
.hz-tablo tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------------
   7) ALINTI — tek cümle, 40ch, sol kenardan başlar
------------------------------------------------------------------ */
.hz-alinti {
  max-width: var(--hz-alinti-genislik);
  font-family: var(--hz-font-baslik);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  line-height: 1.35;
  color: var(--hz-lacivert);
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   8) KAPSAM LİSTESİ — üç sütun, YUKARIDAN AŞAĞIYA (columns, grid değil)
------------------------------------------------------------------ */
.hz-kapsam { columns: 1; column-gap: var(--hz-4); border-top: 1px solid var(--hz-cizgi-acik); }
@media (min-width: 700px)  { .hz-kapsam { columns: 2; } }
@media (min-width: 1000px) { .hz-kapsam { columns: 3; } }
.hz-kapsam li {
  padding-block: var(--hz-2);
  padding-inline-start: var(--hz-3);
  position: relative;
  border-bottom: 1px solid var(--hz-cizgi-acik);
  break-inside: avoid;
}
.hz-kapsam li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.4em;
  width: 6px;
  height: 6px;
  background: var(--hz-mavi);
}

/* ------------------------------------------------------------------
   9) STANDARTLAR — üç sütun grid, sol mavi şerit
------------------------------------------------------------------ */
.hz-standartlar { display: grid; grid-template-columns: 1fr; gap: var(--hz-4); }
@media (min-width: 700px) { .hz-standartlar { grid-template-columns: repeat(3, 1fr); } }
.hz-standart-oge { border-left: 2px solid var(--hz-mavi); padding-inline-start: var(--hz-2); }
.hz-standart-no { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--hz-lacivert); margin-bottom: 4px; }
.hz-standart-aciklama { display: block; font-size: 0.9375rem; color: var(--hz-metin-soluk); }

/* ------------------------------------------------------------------
   10) SSS — iki sütun, details/summary, sol hizalı
------------------------------------------------------------------ */
.hz-sss { display: grid; grid-template-columns: 1fr; gap: 0 var(--hz-5); }
@media (min-width: 700px) { .hz-sss { grid-template-columns: 1fr 1fr; } }
.hz-sss-blok { border-top: 1px solid var(--hz-cizgi-acik); }
.hz-sss-blok details { border-bottom: 1px solid var(--hz-cizgi-acik); }
.hz-sss-blok summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hz-2);
  padding-block: var(--hz-2);
  font-family: var(--hz-font-baslik);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.hz-sss-blok summary::-webkit-details-marker { display: none; }
.hz-sss-blok summary::after { content: '+'; color: var(--hz-mavi); font-weight: 700; }
.hz-sss-blok details[open] summary::after { content: '\2212'; }
.hz-sss-blok details > div { padding-bottom: var(--hz-2); color: var(--hz-metin-soluk); font-size: 0.9375rem; }

/* ------------------------------------------------------------------
   11) CTA — mavi zemin. Hem hero/footer'ın koyu lacivertinden hem de
   üstündeki bölümün açık/beyaz zemininden bilerek farklı tutulur ki
   art arda iki bölüm (footer dahil) aynı renkte kalmasın.
------------------------------------------------------------------ */
.hz-cta { background: var(--hz-mavi); }
.hz-cta__ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hz-cta h2 { color: var(--hz-metin-ters); max-width: var(--hz-dar); }
.hz-cta p { color: var(--hz-metin-ters); opacity: 0.85; max-width: var(--hz-dar); margin-bottom: var(--hz-4); }

.hz-cta__telefon {
  display: inline-flex;
  align-items: center;
  gap: var(--hz-2);
  font-family: var(--hz-font-baslik);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 2vw, 2.375rem);
  letter-spacing: 0.01em;
  color: var(--hz-metin-ters);
  margin-bottom: var(--hz-4);
  transition: color var(--hz-gecis);
}
.hz-cta__telefon:hover { color: var(--hz-lacivert); }
.hz-cta__telefon svg { flex-shrink: 0; width: 0.78em; height: 0.78em; }

.hz-cta__ayrac {
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin-bottom: var(--hz-4);
}