/* ══════════════════════════════════════════════════════════════════════
   HİZMET KÜNYESİ  (`templates/parts/hizmet-kunye.php`)
   Açıklama sekmesinin gövdesi: sayı şeridi · güvence rozetleri ·
   açıklama metni · rehber bağlantısı. Altında yapay zekâ şeridi.

   ── Renk ──────────────────────────────────────────────────────────────
   Üç vurgu rengi de `tokens.css`te zaten var ve her biri bir işi anlatır:

     yeşil   `--brand`  satılan şey (paket, fiyat) — fiyat tablosu da
                        seçili satırı zaten `--brand` ile basıyor
     turuncu `--org`    ölçü ve zaman (adet aralığı, destek saati)
     altın   `--gold`   puan — `.c-yildiz__dolu` zaten `--gold`

   Rastgele renk yok; dördüncü bir ton eklenmesi gerekiyorsa önce
   `tokens.css`e girmeli.

   ── İkon ──────────────────────────────────────────────────────────────
   Hepsi `Icon.php`nin kendi glifleri. `Icon::svg()` yalnızca `viewBox`
   döndürüyor — genişlik/yükseklik BURADAN gelir, aksi hâlde ikon 300px
   çizilir. (Bu tuzağa daha önce düşüldü.)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Sayı şeridi ────────────────────────────────────────────────────── */

.s-kunye {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card-2);
}

.s-kunye__h {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-7) var(--sp-8);
  border-radius: var(--r-lg);
  min-width: 0;
}
/* Ayraç `border` değil `box-shadow`: kutu ölçüsünü büyütmediği için
   satır sonuna sarılan hücrede yarım piksel kayması olmuyor. */
.s-kunye__h + .s-kunye__h { box-shadow: inset 1px 0 0 var(--line); }

.s-kunye__cip {
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.s-kunye__cip svg { width: 20px; height: 20px; }

.s-kunye__cip[data-renk='yesil']   { background: var(--brand-l); color: var(--brand); }
.s-kunye__cip[data-renk='turuncu'] { background: rgba(255, 154, 87, .14); color: var(--org); }
.s-kunye__cip[data-renk='altin']   { background: rgba(245, 196, 81, .14); color: var(--gold); }

.s-kunye__ic { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.s-kunye__sayi {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
}
.s-kunye__bolu { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--mute); }
.s-kunye__etiket { font-size: 12.5px; color: var(--mute); }
.s-kunye__ek { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }

/* ── Güvence rozetleri ──────────────────────────────────────────────── */

.s-rzt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-12);
  padding: var(--sp-9) 2px;
  border-block-end: 1px solid var(--line);
}
.s-rzt__i {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: var(--lh-body);
}
.s-rzt__i b { color: var(--ink); font-weight: var(--fw-semibold); }
.s-rzt__cip {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.s-rzt__cip svg { width: 15px; height: 15px; }
.s-rzt__cip[data-renk='yesil']   { background: var(--brand-l); color: var(--brand); }
.s-rzt__cip[data-renk='turuncu'] { background: rgba(255, 154, 87, .14); color: var(--org); }

/* ── Metin + rehber bağlantısı ──────────────────────────────────────── */

.s-kunye__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-9) var(--sp-14);
  margin-block-start: var(--sp-9);
}
/* 66ch: satır uzunluğu okunur kalsın. Kalan genişliği rehber düğmesi
   dolduruyor, yani sağ taraf boşta durmuyor. */
.s-kunye__metin { margin: 0; color: var(--ink-2); max-width: 66ch; flex: 1 1 420px; }

.s-kunye__rehber {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  height: 44px;
  padding: 0 var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card-2);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.s-kunye__rehber:hover { border-color: var(--brand); color: var(--ink); }
.s-kunye__rehber svg { width: 17px; height: 17px; color: var(--brand); flex: none; }

/* ── Yapay zekâ şeridi ────────────────────────────────────────────────
   Paketteki `.s-ozet*` kuralları ALINMADI: o şerit beş ayrı marka logosu
   (varlik/ikon/ai/*.svg) istiyor ve adresleri doğrulanmamıştı. Bizde
   zaten çalışan bir blok var — `parts/yz-ozet.php`, adresleri
   `BrandIcon::AI` sabitinden geliyor ve rozetler dosya gerektirmiyor.
   Onun tek satıra inen düzeni `site.css` içindeki `.s-yz*` altında.  */

/* ── Dar ekran ──────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  /* İkon sayının ÜSTÜNE geçiyor: 160px'lik hücrede yan yana dururken
     "80 – 521.600 ₺" ayraca değiyordu. */
  .s-kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-kunye__h { flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-6) 13px; }
  .s-kunye__h + .s-kunye__h { box-shadow: none; }
  .s-kunye__h:nth-child(even) { box-shadow: inset 1px 0 0 var(--line); }
  .s-kunye__h:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--line); }
  .s-kunye__h:nth-child(even):nth-child(n+3) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
  .s-kunye__cip { width: 32px; height: 32px; }
  .s-kunye__cip svg { width: 17px; height: 17px; }
  .s-kunye__sayi { font-size: 18px; white-space: normal; }

  .s-rzt { flex-direction: column; gap: var(--sp-5); }
  .s-kunye__alt { flex-direction: column; align-items: stretch; }
  .s-kunye__metin { flex: 1 1 auto; }
  .s-kunye__rehber { justify-content: center; }
}