/* ==========================================================================
   Hobili Tasarım Sistemi v1 — gonderi.css
   Yalnızca gönderi detay sayfasına (gonderi.html) özgü küçük eklemeler.
   Yükleme sırası: Bootstrap CSS → hobili.css → bu dosya.
   Renkler yalnızca --hb-* belirteçlerinden gelir; açık ve koyu temada çalışır.
   Paylaşılan bileşenler (metin içi kart başlıkları, PDF kartı ve yazdırma ipucu,
   Pinterest düğmesi, üst bilgi bağlantıları, içindekiler açma düğmesi, görselin altındaki
   kısa eylem satırı .hb-share--top) hobili.css'tedir.

   İçindekiler
   1. Düzen (ortalanmış makale bloğu)
   2. Başlık alanı: üst bilgi satırı
   3. Bölüm ritmi ve metin içi kartlar
   4. Adım bölümleri (bölüm etiketi, ayraç)
   5. Kapanış kutusu ve kaynak
   6. Gönderi sonu (etiketler, paylaş, önceki/sonraki)
   7. Yazdırma
   ========================================================================== */


/* 1. Düzen: içindekiler + metin bloğu sayfada ortalanır (Pinterest Newsroom makale düzeni).
   Makalenin altında, renkli "Benzer projeler" bandından önce boşluk bırakılır. */
.hb-post {
  padding-bottom: var(--hb-section-y-sm);
}

.hb-article-layout {
  max-width: 68rem;
  margin-inline: auto;
}

.hb-post-main {
  min-width: 0;
}


/* 2. Başlık alanı: üst bilgi satırı dengeli sarılır.
   Esnek kutu yerine satır içi öğeler + text-wrap: balance kullanılır; böylece beş öğe
   iki satıra dengeli dağılır ve son öğe ("0 yorum") alt satırda tek başına kalmaz.
   Desteklemeyen tarayıcıda öğeler olağan biçimde sarılır. */
.hb-article-head .hb-meta {
  display: block;
  text-wrap: balance;
}

.hb-article-head .hb-meta > li {
  margin: .25rem .625rem;
  vertical-align: middle;
}


/* 3. Bölüm ritmi ve metin içi kartlar: üst düzey bölümler arasında düzenli boşluk */
.hb-post-body > section + section {
  margin-top: clamp(2.75rem, 2rem + 2vw, 4rem);
}

/* "Kısaca", kalıp kartı ve proje bilgileri birbirine yakın durur */
.hb-post-body > .hb-summary + .hb-download,
.hb-post-body > .hb-download + .hb-facts {
  margin-top: 1.25rem;
}

.hb-post-body section > :last-child {
  margin-bottom: 0;
}

/* Metin içindeki kartlarda, düğmelerde ve sözlük başlıklarında kısaltma çizgisi yok
   (akan metin dışı; title kalır). Açılımlar "Kısaltmalar" bölümünde görünür metindir (3.1.4). */
.hb-prose :is(.btn, .hb-download, .hb-facts, .hb-glossary dt) abbr[title] {
  text-decoration: none;
  cursor: inherit;
}


/* 4. Adım bölümleri */
.hb-step-section ~ .hb-step-section {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--hb-border);
}

/* Başlık içindeki "Bölüm 1" etiketi (chip-text / chip-bg 8,1:1) */
.hb-part {
  display: block;
  width: fit-content;
  margin-bottom: .5rem;
  padding: .125rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-pill);
  background-color: var(--hb-chip-bg);
  color: var(--hb-chip-text);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
}


/* 5. Kapanış kutusu ve kaynak (kutunun temel stili hobili.css'te) */
.hb-callout {
  margin-top: 2.5rem;
  margin-bottom: 0;
}

.hb-source {
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--hb-muted);
}


/* 6. Gönderi sonu: etiketler, paylaş, önceki/sonraki */
.hb-post-end {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.75rem, 2rem + 2vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hb-border);
}

.hb-post-end__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
}

.hb-post-end__label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}


/* 8. Pinegrap kayıt görünümü: form alanlarından gelen içerik (hobili.js "m) Gönderi alanları") */
.hb-intro {
  margin-bottom: 2rem;
}

.hb-intro > :last-child,
.hb-tips .hb-callout > div > :last-child {
  margin-bottom: 0;
}

.hb-steps > li > h4 {
  margin: .5rem 0;
  font-size: 1.125rem;
  line-height: 1.4;
}

.hb-step-list {
  margin: 0 0 .75rem;
  padding-left: 1.25rem;
}

.hb-step-list > li + li {
  margin-top: .25rem;
}

.hb-steps-body > h4,
.hb-step-section > h4 {
  margin-top: 2rem;
}

.hb-tips {
  margin-top: 2.5rem;
}

.hb-tips .hb-callout + .hb-callout {
  margin-top: 1rem;
}

.hb-tips .hb-callout h3 {
  margin: 0 0 .5rem;
  font-size: 1.125rem;
}

.hb-edit-link {
  margin: .75rem 0 0;
}

/* İçerik türünün kendi sayfası yoksa çip bağlantı değildir */
span.hb-chip {
  cursor: default;
}

span.hb-chip:hover {
  background-color: var(--hb-soft-bg);
}

/* Yorumlar: Pinegrap yorum bloğu aynı form diliyle */
.hb-comments .software_comments {
  display: grid;
  gap: 1.5rem;
}

.hb-comments .add_comment_form {
  margin: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
  box-shadow: none;
}

.hb-comments .add_comment_heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.hb-comments .add_comment_form .btn,
.hb-comments .add_comment_form [type="submit"] {
  min-height: 44px;
}

.hb-comments .watcher_container {
  color: var(--hb-muted);
}

/* Yalnız editörün gördüğü "Yeni Yorum Kabul Etme" düğmesi: Bootstrap gri tonu AAA kontrastı tutmaz */
.hb-comments .software_input_submit_secondary {
  min-height: 44px;
  color: var(--hb-text);
  border-color: var(--hb-control-border);
}

.hb-comments .software_input_submit_secondary:hover,
.hb-comments .software_input_submit_secondary:focus-visible {
  color: var(--hb-text);
  background-color: var(--hb-soft-bg-hover);
  border-color: var(--hb-control-border);
}


/* 7. Yazdırma */
@media print {
  .hb-post {
    padding-bottom: 0;
  }

  .hb-article-layout {
    max-width: none;
  }

  .hb-callout,
  .hb-step-section > h3 {
    break-inside: avoid;
  }

  .hb-step-section ~ .hb-step-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  .hb-part {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}