/* ==========================================================================
   HIZIRBEY DESIGN SYSTEM - CONTENT

   Proje: HIZIRBEY Portal
   Paket: HIZIRBEY Design System
   Bileşen: HDS Content Renderer
   Dosya: themes/default/assets/css/hds/content/base.css
   Açıklama: App\HDS\Content\Renderer çıktısının yapısal foundation'ı.
   Tipografi/renk tüketici bağlamına (forum, makale, profil...) aittir;
   burada yalnız taşma ve kenar boşluğu güvenliği vardır.
   Yazar: Mehmet Kalli
   Oluşturuldu: 07.10.2026
   Sürüm: 1.0.0

   Contract:
   Root: .hds-content (içerik semantik etiketlerdir, class taşımaz)
========================================================================== */

.hds-content {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hds-content > :first-child {
  margin-top: 0;
}

.hds-content > :last-child {
  margin-bottom: 0;
}

.hds-content figure {
  margin-left: 0;
  margin-right: 0;
}

.hds-content img {
  max-width: 100%;
  height: auto;
}

.hds-content pre {
  max-width: 100%;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Görsel sunumu (Paket 6G) — yalnız Renderer'ın sabit sınıfları
   (App\HDS\Content\ImageSource::PRESENTATION). Sınıfsız <figure> (eski
   kayıt) bu kurallardan etkilenmez. Oran: img height auto; taşma yok.
   Aynı sınıflar TextEditor içeriğinde de (.hds-content) kullanılır.
   -------------------------------------------------------------------------- */

/* Yüzen görseller içeriğin dışına taşmasın. */
.hds-content {
  display: flow-root;
}

.hds-content figure.hds-content-image {
  box-sizing: border-box;
  max-width: 100%;
  margin-block: 0.5em;
}

.hds-content figure.hds-content-image > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Boyut: kapsayıcı genişliğinin oranı (mobilde kendiliğinden küçülür). */
.hds-content figure.hds-content-image--size-small { width: 25%; min-width: 4rem; }
.hds-content figure.hds-content-image--size-medium { width: 50%; }
.hds-content figure.hds-content-image--size-large { width: 75%; }
.hds-content figure.hds-content-image--size-full { width: 100%; }

/* Boyutsuz ama hizalı görsel: doğal genişlik, en fazla kapsayıcı. */
.hds-content figure.hds-content-image:not([class*="hds-content-image--size-"]) {
  width: fit-content;
}

.hds-content figure.hds-content-image:not([class*="hds-content-image--size-"]) > img {
  width: auto;
  max-width: 100%;
}

/* Hiza (blok yerleşim). */
.hds-content figure.hds-content-image--align-left { margin-left: 0; margin-right: auto; }
.hds-content figure.hds-content-image--align-center { margin-left: auto; margin-right: auto; }
.hds-content figure.hds-content-image--align-right { margin-left: auto; margin-right: 0; }

/* Yerleşim: blok (kendi satırı) / metin sağdan (görsel solda) / metin soldan (görsel sağda). */
.hds-content figure.hds-content-image--layout-block {
  float: none;
  clear: both;
}

.hds-content figure.hds-content-image--layout-wrap-left {
  float: left;
  margin: 0.25em 1em 0.5em 0;
}

.hds-content figure.hds-content-image--layout-wrap-right {
  float: right;
  margin: 0.25em 0 0.5em 1em;
}

/* Dar ekran: metin sarma bloğa döner (görsel tarafında hizalı), taşma yok. */
@media (max-width: 600px) {
  .hds-content figure.hds-content-image--layout-wrap-left,
  .hds-content figure.hds-content-image--layout-wrap-right {
    float: none;
    margin-block: 0.5em;
  }

  .hds-content figure.hds-content-image--layout-wrap-left { margin-left: 0; margin-right: auto; }
  .hds-content figure.hds-content-image--layout-wrap-right { margin-left: auto; margin-right: 0; }

  .hds-content figure.hds-content-image--size-small { width: 40%; }
}

/* --------------------------------------------------------------------------
   Vurgu kutusu (callout): <aside class="hds-content-callout hds-content-callout--{important|quote|hadith|verse}">
   (App\HDS\Content\CalloutSource::VARIANTS). Nötr yüzey + türe göre tek kenar
   vurgusu; renkler tüketicinin geçersiz kılabileceği değişkenlerdir.
   -------------------------------------------------------------------------- */

.hds-content .hds-content-callout {
  --hds-content-callout-accent: #8a949b;
  --hds-content-callout-surface: #f6f7f8;
  --hds-content-callout-ink: inherit;
  --hds-content-callout-muted: #5f6b73;
  margin: 1em 0;
  padding: 0.75em 1em;
  border-left: 4px solid var(--hds-content-callout-accent);
  border-radius: 0.375rem;
  background: var(--hds-content-callout-surface);
  color: var(--hds-content-callout-ink);
}

.hds-content .hds-content-callout--important { --hds-content-callout-accent: #b7791f; --hds-content-callout-surface: #fbf6ea; }
.hds-content .hds-content-callout--quote { --hds-content-callout-accent: #8a949b; }
.hds-content .hds-content-callout--hadith { --hds-content-callout-accent: #2f7d5b; --hds-content-callout-surface: #f0f7f3; }
.hds-content .hds-content-callout--verse { --hds-content-callout-accent: #1f7a8c; --hds-content-callout-surface: #eff7f9; }

.hds-content .hds-content-callout--quote .hds-content-callout__body { font-style: italic; }
.hds-content .hds-content-callout--hadith .hds-content-callout__body,
.hds-content .hds-content-callout--verse .hds-content-callout__body { font-size: 1.0625em; line-height: 1.7; }

.hds-content .hds-content-callout__body > * + * { margin-top: 0.5em; }
.hds-content .hds-content-callout__body > :first-child { margin-top: 0; }
.hds-content .hds-content-callout__body > :last-child { margin-bottom: 0; }

.hds-content .hds-content-callout__source {
  margin-top: 0.5em;
  color: var(--hds-content-callout-muted);
  font-size: 0.875em;
}

.hds-content .hds-content-callout__source cite { font-style: normal; }
.hds-content .hds-content-callout__source cite::before { content: "— "; }