/* ==========================================================================
   Hobili Tasarım Sistemi v1 — hobili.css
   Bootstrap 5.3.8 üzerine ince bir katman. Derleme adımı yoktur.
   Yükleme sırası: Bootstrap CSS → bu dosya.

   İçindekiler
   01. Belirteçler (açık / koyu tema)
   02. Bootstrap değişken eşlemesi
   03. Temel öğeler, tipografi, odak halkası
   04. Düğmeler, rozetler
   05. Açılır menü, akordeon, modal, offcanvas, sayfalama, içerik yolu
   06. Form denetimleri
   07. Atlama bağlantısı, yardımcı sınıflar, simgeler
   08. Üst gezinme (yüzen hap menü), mega menü, mobil menü, arama, tema
   09. Bölümler, bantlar, kahraman alanı, bölüm başlığı
   10. Öne çıkanlar kaydırıcısı ve kartı
   11. Filtre çipleri, etiketler, sıralama
   12. Masonry ızgara ve pin kartları (pin, not, tanıtım, reklam)
   13. Kategori karoları, bağlantı kartları, bülten
   14. Gönderi: başlık, metin (prose), içindekiler, Kısaca, bilgi kartı,
       PDF kartı, malzeme listesi, adımlar, sözlük, paylaş, önceki/sonraki,
       yorumlar
   15. Formlar: alan, hata, hata özeti, kontrol paneli, başarı paneli, sayaç
   16. SSS, iletişim kartları
   17. Alt bilgi (footer)
   18. Stil rehberi sayfasına özgü yardımcılar
   19. Erişilebilirlik ortam sorguları (hareket, zorlanmış renkler, kontrast)
   20. Yazdırma
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. Belirteçler
   Kontrast oranları memory/website/design.md tablosuyla aynıdır; yeni eklenen
   çiftler (tehlike, başarı, not, tanıtım) 7:1 üzerinde ölçülmüştür.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  color-scheme: light;

  --hb-bg: #fbf8f4;
  --hb-bg-rgb: 251, 248, 244;
  --hb-surface: #ffffff;
  --hb-surface-rgb: 255, 255, 255;
  --hb-surface-2: #f3ede6;
  --hb-surface-2-rgb: 243, 237, 230;
  --hb-surface-3: #ebe3d9;
  --hb-surface-3-rgb: 235, 227, 217;

  --hb-text: #1f1a17;          /* bg üzerinde 16,28:1 */
  --hb-text-rgb: 31, 26, 23;
  --hb-muted: #4a413b;         /* bg 9,40:1 · surface-2 8,56:1 · surface-3 7,83:1 */
  --hb-muted-rgb: 74, 65, 59;

  --hb-primary: #1b1464;       /* bg 14,91:1 · üzerindeki beyaz 15,78:1 */
  --hb-primary-rgb: 27, 20, 100;
  --hb-primary-hover: #2a2185; /* üzerindeki beyaz 12,69:1 */
  --hb-primary-hover-rgb: 42, 33, 133;
  --hb-on-primary: #ffffff;
  --hb-link-hover: #7c2a0b;    /* bg 9,04:1 · not yüzeyi 8,02:1 · surface-3 7,53:1 */
  --hb-link-hover-rgb: 124, 42, 11;
  --hb-accent: #7c2a0b;        /* bg 9,04:1 · surface 9,58:1 · çip zemini 8,10:1 */
  --hb-accent-rgb: 124, 42, 11;

  --hb-chip-bg: #fde8dd;
  --hb-chip-text: #7c2a0b;     /* 8,10:1 */
  --hb-control-border: #8a817a;/* bg 3,61:1 (metin dışı öğe, 3:1) */
  --hb-border: #e6ddd3;        /* yalnızca süs amaçlı ince çizgi */
  --hb-brand: #e2582d;         /* yalnızca süs; metin için kullanılmaz (3,5:1) */
  --hb-logo-ink: #1b1464;
  --hb-logo-accent: #e2582d;
  --hb-focus: #1b1464;         /* odak halkası bg üzerinde 14,91:1 */
  --hb-focus-rgb: 27, 20, 100;

  --hb-inverse-bg: #1f1a17;
  --hb-inverse-text: #ffffff;  /* 17,24:1 */
  --hb-note-bg: #ece9f8;       /* metin 14,43:1 · ikincil 8,33:1 */
  --hb-promo-bg: #1b1464;
  --hb-promo-text: #ffffff;    /* 15,78:1 */
  --hb-promo-muted: #d9d6f0;   /* 11,14:1 */
  --hb-promo-btn-bg: #ffffff;
  --hb-promo-btn-text: #1b1464;
  --hb-promo-focus: #ffffff;

  --hb-danger: #8a1616;        /* surface 9,52:1 · danger-bg 8,32:1 */
  --hb-danger-rgb: 138, 22, 22;
  --hb-danger-bg: #fdecea;
  --hb-success: #18522a;       /* surface 9,21:1 · success-bg 8,14:1 */
  --hb-success-rgb: 24, 82, 42;
  --hb-success-bg: #e8f4ea;
  --hb-pinterest: #ad081b;     /* üzerindeki beyaz 7,43:1 */
  --hb-pinterest-hover: #8c0615;

  --hb-shadow-rgb: 31, 26, 23;
  --hb-shadow-xs: 0 1px 2px rgba(31, 26, 23, .06);
  --hb-shadow-sm: 0 1px 2px rgba(31, 26, 23, .05), 0 3px 10px rgba(31, 26, 23, .06);
  --hb-shadow: 0 2px 6px rgba(31, 26, 23, .05), 0 12px 32px rgba(31, 26, 23, .08);
  --hb-shadow-lg: 0 4px 12px rgba(31, 26, 23, .06), 0 24px 56px rgba(31, 26, 23, .14);

  /* Bootstrap SVG simgeleri (seç oku, akordeon, onay kutusu) */
  --hb-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f1a17' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --hb-accordion-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f1a17' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --hb-check-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  --hb-radio-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* Koyu tema yalnızca ekranda geçerlidir; yazdırırken açık tema belirteçleri kullanılır. */
@media screen {
  [data-bs-theme="dark"] {
    color-scheme: dark;

    --hb-bg: #141216;
    --hb-bg-rgb: 20, 18, 22;
    --hb-surface: #1d1b20;
    --hb-surface-rgb: 29, 27, 32;
    --hb-surface-2: #27242b;
    --hb-surface-2-rgb: 39, 36, 43;
    --hb-surface-3: #322e37;
    --hb-surface-3-rgb: 50, 46, 55;

    --hb-text: #f6f2ed;          /* bg 16,71:1 · surface-3 11,91:1 */
    --hb-text-rgb: 246, 242, 237;
    --hb-muted: #d8d0c8;         /* bg 12,21:1 · surface-3 8,71:1 */
    --hb-muted-rgb: 216, 208, 200;

    --hb-primary: #ffb59c;       /* bg 10,94:1 · üzerindeki #141216 10,94:1 */
    --hb-primary-rgb: 255, 181, 156;
    --hb-primary-hover: #ffc9b6; /* üzerindeki #141216 12,66:1 */
    --hb-primary-hover-rgb: 255, 201, 182;
    --hb-on-primary: #141216;
    --hb-link-hover: #ffd9c9;    /* bg 14,2:1 */
    --hb-link-hover-rgb: 255, 217, 201;
    --hb-accent: #ffb59c;
    --hb-accent-rgb: 255, 181, 156;

    --hb-chip-bg: #3a2219;
    --hb-chip-text: #ffd9c9;     /* 11,26:1 */
    --hb-control-border: #8c8279;/* bg 4,95:1 */
    --hb-border: #34303a;
    --hb-brand: #f08a63;
    --hb-logo-ink: #f6f2ed;
    --hb-logo-accent: #f08a63;
    --hb-focus: #ffb59c;         /* bg 10,94:1 */
    --hb-focus-rgb: 255, 181, 156;

    --hb-inverse-bg: #f6f2ed;
    --hb-inverse-text: #141216;  /* 16,71:1 */
    --hb-note-bg: #25223a;       /* metin 13,77:1 · ikincil 10,07:1 */
    --hb-promo-bg: #3a2219;
    --hb-promo-text: #f6f2ed;    /* 13,24:1 */
    --hb-promo-muted: #ffd9c9;   /* 11,26:1 */
    --hb-promo-btn-bg: #ffb59c;
    --hb-promo-btn-text: #141216;
    --hb-promo-focus: #ffb59c;   /* promo zemininde 8,67:1 */

    --hb-danger: #ffb4ab;        /* surface 10,06:1 · danger-bg 9,17:1 */
    --hb-danger-rgb: 255, 180, 171;
    --hb-danger-bg: #3b1a1a;
    --hb-success: #9fdcab;       /* surface 10,81:1 · success-bg 9,02:1 */
    --hb-success-rgb: 159, 220, 171;
    --hb-success-bg: #16301d;
    --hb-pinterest: #ad081b;
    --hb-pinterest-hover: #8c0615; /* üzerindeki beyaz 9,76:1 */

    --hb-shadow-rgb: 0, 0, 0;
    --hb-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --hb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .3);
    --hb-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .4);
    --hb-shadow-lg: 0 4px 12px rgba(0, 0, 0, .4), 0 24px 56px rgba(0, 0, 0, .55);

    --hb-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6f2ed' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --hb-accordion-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f6f2ed' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --hb-check-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23141216' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --hb-radio-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23141216'/%3e%3c/svg%3e");
  }
}

/* Ölçü ve aralık belirteçleri (temadan bağımsız) */
:root {
  --hb-radius-sm: 12px;
  --hb-radius: 16px;
  --hb-radius-card: 24px;
  --hb-radius-xl: 32px;
  --hb-radius-pill: 999px;

  --hb-nav-gap: .75rem;          /* üst gezinmenin üstündeki boşluk */
  --hb-nav-h: 4rem;              /* üst gezinme yüksekliği */
  /* 2.4.12: odaklanan öğe yapışkan menünün altında kalmasın (menü + 24px + pay) */
  --hb-scroll-offset: calc(var(--hb-nav-gap) + var(--hb-nav-h) + 1.5rem + 1rem);

  --hb-space-1: .25rem;
  --hb-space-2: .5rem;
  --hb-space-3: .75rem;
  --hb-space-4: 1rem;
  --hb-space-5: 1.5rem;
  --hb-space-6: 2rem;
  --hb-space-7: 3rem;
  --hb-space-8: 4rem;
  --hb-section-y: clamp(3rem, 2rem + 4vw, 6rem);
  --hb-section-y-sm: clamp(2rem, 1.5rem + 2vw, 3.5rem);

  --hb-ease: cubic-bezier(.2, .7, .2, 1);
  --hb-check-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
}

/* Kısa ekranlarda (ör. %400 yakınlaştırma) menü yapışkan olmaz; alan kazanılır. */
@media (max-height: 30rem) {
  :root {
    --hb-scroll-offset: 1rem;
  }
}


/* --------------------------------------------------------------------------
   02. Bootstrap değişken eşlemesi
   [data-bs-theme] seçicisi iç içe tema kapsayıcılarında da yeniden çözülür.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme] {
  --bs-font-sans-serif: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.65;

  --bs-body-color: var(--hb-text);
  --bs-body-color-rgb: var(--hb-text-rgb);
  --bs-body-bg: var(--hb-bg);
  --bs-body-bg-rgb: var(--hb-bg-rgb);
  --bs-emphasis-color: var(--hb-text);
  --bs-emphasis-color-rgb: var(--hb-text-rgb);
  --bs-heading-color: var(--hb-text);
  --bs-secondary-color: var(--hb-muted);
  --bs-secondary-color-rgb: var(--hb-muted-rgb);
  --bs-secondary-bg: var(--hb-surface-3);
  --bs-secondary-bg-rgb: var(--hb-surface-3-rgb);
  --bs-tertiary-color: var(--hb-muted);
  --bs-tertiary-color-rgb: var(--hb-muted-rgb);
  --bs-tertiary-bg: var(--hb-surface-2);
  --bs-tertiary-bg-rgb: var(--hb-surface-2-rgb);

  --bs-link-color: var(--hb-primary);
  --bs-link-color-rgb: var(--hb-primary-rgb);
  --bs-link-hover-color: var(--hb-link-hover);
  --bs-link-hover-color-rgb: var(--hb-link-hover-rgb);
  --bs-link-decoration: underline;
  --bs-code-color: var(--hb-accent);
  --bs-highlight-color: var(--hb-text);
  --bs-highlight-bg: var(--hb-chip-bg);

  --bs-border-color: var(--hb-border);
  --bs-border-color-translucent: var(--hb-border);
  --bs-border-radius: var(--hb-radius-sm);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--hb-radius);
  --bs-border-radius-xl: var(--hb-radius-card);
  --bs-border-radius-xxl: var(--hb-radius-xl);
  --bs-border-radius-2xl: var(--hb-radius-xl);
  --bs-border-radius-pill: var(--hb-radius-pill);
  --bs-box-shadow: var(--hb-shadow);
  --bs-box-shadow-sm: var(--hb-shadow-sm);
  --bs-box-shadow-lg: var(--hb-shadow-lg);

  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--hb-focus);

  --bs-primary: var(--hb-primary);
  --bs-primary-rgb: var(--hb-primary-rgb);
  --bs-primary-text-emphasis: var(--hb-primary);
  --bs-primary-bg-subtle: var(--hb-note-bg);
  --bs-primary-border-subtle: var(--hb-border);
  --bs-secondary: var(--hb-muted);
  --bs-secondary-rgb: var(--hb-muted-rgb);
  --bs-secondary-text-emphasis: var(--hb-text);
  --bs-secondary-bg-subtle: var(--hb-surface-2);
  --bs-secondary-border-subtle: var(--hb-border);
  --bs-danger: var(--hb-danger);
  --bs-danger-rgb: var(--hb-danger-rgb);
  --bs-danger-text-emphasis: var(--hb-danger);
  --bs-danger-bg-subtle: var(--hb-danger-bg);
  --bs-danger-border-subtle: var(--hb-danger);
  --bs-success: var(--hb-success);
  --bs-success-rgb: var(--hb-success-rgb);
  --bs-success-text-emphasis: var(--hb-success);
  --bs-success-bg-subtle: var(--hb-success-bg);
  --bs-success-border-subtle: var(--hb-success);

  --bs-form-valid-color: var(--hb-success);
  --bs-form-valid-border-color: var(--hb-success);
  --bs-form-invalid-color: var(--hb-danger);
  --bs-form-invalid-border-color: var(--hb-danger);

  /* Bağlama duyarlı yumuşak zemin: renkli (surface-2, not, çip) kapsayıcılarda
     çip, yumuşak düğme ve nötr etiket kaybolmasın diye aşağıda yüzey rengine döner. */
  --hb-soft-bg: var(--hb-surface-2);
  --hb-soft-bg-hover: var(--hb-surface-3);
  --hb-soft-border: transparent;
  --hb-tag-bg: var(--hb-chip-bg);
}

/* Renkli kapsayıcılar: içlerindeki çip, yumuşak düğme ve etiketler yüzey rengini alır (+ ince kenar) */
.hb-band,
.hb-footer,
.hb-review,
.hb-empty,
.hb-filter-empty,
.hb-callout,
.hb-newsletter,
.hb-summary,
.hb-download,
.hb-pin--note,
.hb-glossary > div,
.hb-facts__item {
  --hb-soft-bg: var(--hb-surface);
  --hb-soft-bg-hover: var(--hb-surface-3);
  --hb-soft-border: var(--hb-border);
}

/* Çip renginde (sıcak) zeminler: içerik türü etiketi yüzey rengine döner */
.hb-band--warm,
.hb-newsletter,
.hb-download {
  --hb-tag-bg: var(--hb-surface);
}

/* Bootstrap'in sabit renkli yardımcılarını belirteçlere bağla */
.text-bg-primary {
  color: var(--hb-on-primary) !important;
  background-color: var(--hb-primary) !important;
}

.text-body-secondary,
.text-muted {
  color: var(--hb-muted) !important;
}


/* --------------------------------------------------------------------------
   03. Temel öğeler, tipografi, odak halkası
   -------------------------------------------------------------------------- */
html {
  scroll-padding-top: var(--hb-scroll-offset);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/* Hiçbir metin iki yana yaslanmaz (1.4.8). Yalnızca akan metinde, özgüllüğü sıfır bir
   koruma: ortalanmış kapsayıcılardan (başlık alanı, boş durum) devralınan hizayı bozmaz. */
:where(.hb-prose) :where(p, li, dd, td, blockquote) {
  text-align: start;
}

p {
  text-wrap: pretty;
}

img,
svg,
video {
  max-width: 100%;
}

img {
  height: auto;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

h1, .h1 {
  font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
}

h2, .h2 {
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

h3, .h3 {
  font-size: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  line-height: 1.25;
}

h4, .h4 {
  font-size: 1.1875rem;
  line-height: 1.3;
}

h5, .h5,
h6, .h6 {
  font-size: 1.0625rem;
  line-height: 1.35;
}

.hb-display {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lead,
.hb-lead {
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--hb-muted);
}

small,
.small {
  font-size: .9375rem;
}

.hb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--hb-accent);
}

a {
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Kısaltmalar: noktalı alt çizgi yalnızca akan metinde ve yardım metinlerinde.
   Çip, etiket, rozet, başlık, düğme ve menülerde çizgi gürültü yaratır; title kalır.
   3.1.4: her sayfada kısaltmanın açılımı en az bir kez görünür metinde yazılmalıdır. */
abbr[title] {
  text-decoration: none;
  cursor: inherit;
}

:is(.hb-prose, .hb-help, .form-text, .accordion-body, .hb-guide__intro, .hb-demo-note) abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: .2em;
  cursor: help;
}

/* Akan metnin içindeki düğme, çip ve etiketlerde de çizgi olmaz (ör. indirme kartı düğmeleri). */
:is(.btn, .hb-chip, .hb-tag, .hb-pin__badge, .hb-label) abbr[title] {
  text-decoration: none;
  cursor: inherit;
}

/* Simge + metin denetimlerinde metin tek öğe olmalıdır: <span class="hb-label">…</span>.
   Esnek kutu (flex) içindeki her metin parçası ayrı öğe olur ve "gap" çift boşluk gibi görünür. */
.hb-label {
  min-width: 0;
}

::selection {
  background-color: var(--hb-chip-bg);
  color: var(--hb-text);
}

hr {
  border-color: var(--hb-border);
  opacity: 1;
}

/* Odak halkası: 3px düz çizgi + 3px boşluk; asla kaldırılmaz (2.4.7, 2.4.13) */
:focus-visible {
  outline: 3px solid var(--hb-focus);
  outline-offset: 3px;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn,
.btn-close:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.navbar-toggler:focus-visible {
  outline: 3px solid var(--hb-focus);
  outline-offset: 3px;
  box-shadow: none;
}

.dropdown-item:focus-visible {
  outline-offset: -3px;
}

.accordion-button:focus-visible {
  outline-offset: -3px;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none; /* yalnızca programla odaklanan başlık/özet kutuları; klavye odağı yukarıdaki kuralı kullanır */
}


/* --------------------------------------------------------------------------
   04. Düğmeler, rozetler
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-padding-x: 1.375rem;
  --bs-btn-padding-y: .625rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.4;
  --bs-btn-border-radius: var(--hb-radius-pill);
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  text-decoration: none;
}

.btn-lg {
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-padding-y: .8125rem;
  --bs-btn-font-size: 1.0625rem;
  --bs-btn-border-radius: var(--hb-radius-pill);
  min-height: 52px;
}

.btn-sm {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: .9375rem;
  --bs-btn-border-radius: var(--hb-radius-pill);
  min-height: 44px;
}

.btn .hb-icon {
  width: 1.125em;
  height: 1.125em;
}

.btn-primary {
  --bs-btn-color: var(--hb-on-primary);
  --bs-btn-bg: var(--hb-primary);
  --bs-btn-border-color: var(--hb-primary);
  --bs-btn-hover-color: var(--hb-on-primary);
  --bs-btn-hover-bg: var(--hb-primary-hover);
  --bs-btn-hover-border-color: var(--hb-primary-hover);
  --bs-btn-active-color: var(--hb-on-primary);
  --bs-btn-active-bg: var(--hb-primary-hover);
  --bs-btn-active-border-color: var(--hb-primary-hover);
  --bs-btn-disabled-color: var(--hb-on-primary);
  --bs-btn-disabled-bg: var(--hb-primary);
  --bs-btn-disabled-border-color: var(--hb-primary);
}

.btn-outline-primary {
  --bs-btn-border-width: 2px;
  --bs-btn-color: var(--hb-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--hb-primary);
  --bs-btn-hover-color: var(--hb-on-primary);
  --bs-btn-hover-bg: var(--hb-primary);
  --bs-btn-hover-border-color: var(--hb-primary);
  --bs-btn-active-color: var(--hb-on-primary);
  --bs-btn-active-bg: var(--hb-primary-hover);
  --bs-btn-active-border-color: var(--hb-primary-hover);
  --bs-btn-disabled-color: var(--hb-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--hb-primary);
}

/* Yumuşak ikincil düğme (Pinterest'teki gri hap). Renkli kapsayıcıda yüzey rengine döner. */
.hb-btn-soft,
.btn-secondary,
.btn-light {
  --bs-btn-color: var(--hb-text);
  --bs-btn-bg: var(--hb-soft-bg);
  --bs-btn-border-color: var(--hb-soft-border);
  --bs-btn-hover-color: var(--hb-text);
  --bs-btn-hover-bg: var(--hb-soft-bg-hover);
  --bs-btn-hover-border-color: var(--hb-soft-border);
  --bs-btn-active-color: var(--hb-text);
  --bs-btn-active-bg: var(--hb-soft-bg-hover);
  --bs-btn-active-border-color: var(--hb-soft-border);
  --bs-btn-disabled-color: var(--hb-muted);
  --bs-btn-disabled-bg: var(--hb-soft-bg);
  --bs-btn-disabled-border-color: var(--hb-soft-border);
}

/* Pinterest'e kaydet (paylaş çubuğu): görünür metinli kırmızı hap.
   Beyaz yazı Pinterest kırmızısı üzerinde 7,43:1, üzerine gelince 9,76:1; iki temada aynı. */
.hb-btn-pinterest {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--hb-pinterest);
  --bs-btn-border-color: var(--hb-pinterest);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--hb-pinterest-hover);
  --bs-btn-hover-border-color: var(--hb-pinterest-hover);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--hb-pinterest-hover);
  --bs-btn-active-border-color: var(--hb-pinterest-hover);
  font-weight: 700;
}

.hb-btn-pinterest:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Zeminsiz düğme */
.hb-btn-ghost {
  --bs-btn-color: var(--hb-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--hb-text);
  --bs-btn-hover-bg: var(--hb-surface-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--hb-text);
  --bs-btn-active-bg: var(--hb-surface-3);
  --bs-btn-active-border-color: transparent;
}

/* Ters renkli düğme (koyu zemin / açık yazı) */
.hb-btn-inverse {
  --bs-btn-color: var(--hb-inverse-text);
  --bs-btn-bg: var(--hb-inverse-bg);
  --bs-btn-border-color: var(--hb-inverse-bg);
  --bs-btn-hover-color: var(--hb-inverse-text);
  --bs-btn-hover-bg: var(--hb-inverse-bg);
  --bs-btn-hover-border-color: var(--hb-inverse-bg);
  --bs-btn-active-color: var(--hb-inverse-text);
  --bs-btn-active-bg: var(--hb-inverse-bg);
  --bs-btn-active-border-color: var(--hb-inverse-bg);
}

.hb-btn-inverse:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.btn-link {
  --bs-btn-color: var(--hb-primary);
  --bs-btn-hover-color: var(--hb-link-hover);
  --bs-btn-active-color: var(--hb-link-hover);
  --bs-btn-disabled-color: var(--hb-muted);
  font-weight: 600;
}

/* 44 × 44 yuvarlak simge düğmesi */
.hb-icon-btn {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-color: var(--hb-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--hb-text);
  --bs-btn-hover-bg: var(--hb-surface-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--hb-text);
  --bs-btn-active-bg: var(--hb-surface-3);
  --bs-btn-active-border-color: transparent;
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: none;
  border-radius: 50%;
}

.hb-icon-btn .hb-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.hb-icon-btn.dropdown-toggle::after,
.hb-no-caret.dropdown-toggle::after {
  display: none;
}

/* Kaydırıcı ve benzeri yerler için yüzeyli yuvarlak düğme (48 × 48) */
.hb-round-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  border: 1px solid var(--hb-border);
  border-radius: 50%;
  background-color: var(--hb-surface);
  color: var(--hb-text);
  box-shadow: var(--hb-shadow-sm);
  cursor: pointer;
}

.hb-round-btn:hover {
  background-color: var(--hb-surface-2);
}

.hb-round-btn:disabled {
  cursor: not-allowed;
  box-shadow: none;
  background-color: var(--hb-surface-2);
  color: var(--hb-muted);
}

.hb-round-btn .hb-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.badge {
  --bs-badge-padding-x: .75em;
  --bs-badge-padding-y: .4em;
  --bs-badge-font-size: .8125rem;
  --bs-badge-font-weight: 600;
  --bs-badge-color: var(--hb-chip-text);
  --bs-badge-border-radius: var(--hb-radius-pill);
  background-color: var(--hb-chip-bg);
  border: 1px solid transparent;
}


/* --------------------------------------------------------------------------
   05. Açılır menü, akordeon, modal, offcanvas, sayfalama, içerik yolu
   -------------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--hb-surface);
  --bs-dropdown-color: var(--hb-text);
  --bs-dropdown-border-color: var(--hb-border);
  --bs-dropdown-border-radius: 20px;
  --bs-dropdown-inner-border-radius: 19px;
  --bs-dropdown-box-shadow: var(--hb-shadow-lg);
  --bs-dropdown-padding-x: .5rem;
  --bs-dropdown-padding-y: .5rem;
  --bs-dropdown-spacer: .5rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-link-color: var(--hb-text);
  --bs-dropdown-link-hover-color: var(--hb-text);
  --bs-dropdown-link-hover-bg: var(--hb-surface-2);
  --bs-dropdown-link-active-color: var(--hb-text);
  --bs-dropdown-link-active-bg: var(--hb-surface-3);
  --bs-dropdown-link-disabled-color: var(--hb-muted);
  --bs-dropdown-item-padding-x: .875rem;
  --bs-dropdown-item-padding-y: .5rem;
  --bs-dropdown-item-border-radius: var(--hb-radius-sm);
  --bs-dropdown-header-color: var(--hb-muted);
  --bs-dropdown-divider-bg: var(--hb-border);
  box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 44px;
  font-weight: 500;
  white-space: normal;
}

.dropdown-item .hb-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.accordion {
  --bs-accordion-color: var(--hb-text);
  --bs-accordion-bg: var(--hb-surface);
  --bs-accordion-border-color: var(--hb-border);
  --bs-accordion-border-radius: 20px;
  --bs-accordion-inner-border-radius: 19px;
  --bs-accordion-btn-color: var(--hb-text);
  --bs-accordion-btn-bg: var(--hb-surface);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1.125rem;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1.25rem;
  --bs-accordion-active-color: var(--hb-text);
  --bs-accordion-active-bg: var(--hb-surface);
}

[data-bs-theme] .accordion-button::after {
  --bs-accordion-btn-icon: var(--hb-accordion-icon);
  --bs-accordion-btn-active-icon: var(--hb-accordion-icon);
}

.accordion-button {
  font-weight: 700;
  font-size: 1.0625rem;
  min-height: 56px;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

.modal {
  --bs-modal-bg: var(--hb-surface);
  --bs-modal-color: var(--hb-text);
  --bs-modal-border-color: var(--hb-border);
  --bs-modal-border-radius: 28px;
  --bs-modal-inner-border-radius: 27px;
  --bs-modal-box-shadow: var(--hb-shadow-lg);
  --bs-modal-padding: 1.5rem;
  --bs-modal-header-padding: 1.25rem 1.25rem 0 1.5rem;
  --bs-modal-header-border-color: transparent;
  --bs-modal-footer-border-color: var(--hb-border);
}

.modal-backdrop {
  --bs-backdrop-bg: #0f0d10;
  --bs-backdrop-opacity: .55;
}

.offcanvas,
.offcanvas-lg,
.offcanvas-md {
  --bs-offcanvas-bg: var(--hb-surface);
  --bs-offcanvas-color: var(--hb-text);
  --bs-offcanvas-border-color: var(--hb-border);
  --bs-offcanvas-width: min(24rem, 100vw);
  --bs-offcanvas-padding-x: 1.25rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-box-shadow: var(--hb-shadow-lg);
}

.btn-close {
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-focus-shadow: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background-size: 1rem;
}

.pagination {
  --bs-pagination-padding-x: .75rem;
  --bs-pagination-padding-y: .5rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--hb-text);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: transparent;
  --bs-pagination-border-radius: var(--hb-radius-pill);
  --bs-pagination-hover-color: var(--hb-text);
  --bs-pagination-hover-bg: var(--hb-surface-2);
  --bs-pagination-hover-border-color: transparent;
  --bs-pagination-focus-color: var(--hb-text);
  --bs-pagination-focus-bg: var(--hb-surface-2);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--hb-inverse-text);
  --bs-pagination-active-bg: var(--hb-inverse-bg);
  --bs-pagination-active-border-color: var(--hb-inverse-bg);
  --bs-pagination-disabled-color: var(--hb-muted);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent;
}

/* Hap sayfalama: her hedef en az 44 × 44 */
.hb-pagination {
  flex-wrap: wrap;
  gap: .375rem;
  margin: 0;
}

.hb-pagination .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-width: 44px;
  min-height: 44px;
  margin-left: 0;
  border-radius: var(--hb-radius-pill);
  font-weight: 600;
  text-decoration: none;
}

.hb-pagination .page-item .page-link:hover {
  text-decoration: underline;
}

/* Etkin sayfa: ters renk + kalın yazı + alt çizgi (yalnızca renge dayanmaz) */
.hb-pagination .page-item.active .page-link {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}

.hb-pagination .page-link .hb-icon {
  width: 1rem;
  height: 1rem;
}

.breadcrumb {
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-item-padding-x: .375rem;
  --bs-breadcrumb-divider-color: var(--hb-muted);
  --bs-breadcrumb-item-active-color: var(--hb-muted);
}

/* İçerik yolu (2.4.8): bağlantılar 44px yüksekliğinde, ayırıcı ekran okuyucudan gizli */
.hb-breadcrumb {
  align-items: center;
  font-size: .9375rem;
}

.hb-breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.hb-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  content: "›";
  content: "›" / "";
  padding-right: var(--bs-breadcrumb-item-padding-x);
  font-weight: 700;
  color: var(--hb-muted);
}

.hb-breadcrumb a {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* kısa bağlantılarda 44px genişlik boşluğu iki yana eşit dağılsın */
  min-width: 44px;
  min-height: 44px;
  color: var(--hb-text);
  text-decoration: underline;
}

.hb-breadcrumb a:hover {
  color: var(--hb-text);
  text-decoration-thickness: 2px;
}

.hb-breadcrumb .breadcrumb-item.active {
  color: var(--hb-muted);
}

.hb-breadcrumb--center {
  justify-content: center;
}


/* --------------------------------------------------------------------------
   06. Form denetimleri
   -------------------------------------------------------------------------- */
.form-label {
  margin-bottom: .375rem;
  font-weight: 600;
}

.form-text {
  margin-top: .375rem;
  font-size: .9375rem;
  color: var(--hb-muted);
}

.form-control,
.form-select {
  min-height: 48px;
  padding: .625rem 1rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--hb-text);
  background-color: var(--hb-surface);
  border: 1px solid var(--hb-control-border);
  border-radius: var(--hb-radius-sm);
}

.form-select {
  padding-right: 2.75rem;
  background-position: right 1rem center;
  background-size: 14px 14px;
}

[data-bs-theme] .form-select {
  --bs-form-select-bg-img: var(--hb-select-arrow);
}

.form-control-lg,
.form-select-lg {
  min-height: 56px;
  padding: .75rem 1.25rem;
  font-size: 1.125rem;
  border-radius: 14px;
}

textarea.form-control {
  min-height: 10rem;
  line-height: 1.6;
}

.form-control::placeholder {
  color: var(--hb-muted);
  opacity: 1;
}

.form-control:hover,
.form-select:hover {
  border-color: var(--hb-text);
}

.form-control:focus,
.form-select:focus {
  color: var(--hb-text);
  background-color: var(--hb-surface);
  border-color: var(--hb-focus);
  box-shadow: none;
  outline: 3px solid var(--hb-focus);
  outline-offset: 2px;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--hb-surface-2);
  color: var(--hb-muted);
}

.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: var(--hb-danger);
  border-width: 2px;
  padding-left: calc(1rem - 1px);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 44px;
  padding-left: 0;
  margin-bottom: 0;
}

.form-check .form-check-input {
  float: none;
  flex: none;
  margin: .6875rem 0 0;
}

.form-check-label {
  padding-block: .5rem;
  cursor: pointer;
}

/* Malzeme listesi: 22px kutu yerine etiket 44px yüksekliğinde hedef olur (2.5.5) */
.hb-checklist .form-check-label {
  padding-block: .625rem;
}

.form-check-input {
  width: 1.375rem;
  height: 1.375rem;
  background-color: var(--hb-surface);
  border: 2px solid var(--hb-control-border);
}

.form-check-input[type="checkbox"] {
  border-radius: 6px;
}

.form-check-input:checked {
  background-color: var(--hb-primary);
  border-color: var(--hb-primary);
}

[data-bs-theme] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: var(--hb-check-img);
}

[data-bs-theme] .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: var(--hb-radio-img);
}

.form-check-input:focus {
  border-color: var(--hb-focus);
  box-shadow: none;
  outline: 3px solid var(--hb-focus);
  outline-offset: 2px;
}

.form-check-input[aria-invalid="true"] {
  border-color: var(--hb-danger);
}

fieldset {
  min-width: 0;
}

legend {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}


/* --------------------------------------------------------------------------
   07. Atlama bağlantısı, yardımcı sınıflar, simgeler
   -------------------------------------------------------------------------- */
.hb-skip-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .625rem 1.25rem;
  border-radius: var(--hb-radius-pill);
  background-color: var(--hb-inverse-bg);
  color: var(--hb-inverse-text);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-300%);
}

.hb-skip-link:focus,
.hb-skip-link:focus-visible {
  transform: none;
  color: var(--hb-inverse-text);
}

.hb-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
  vertical-align: -.125em;
}

.hb-icon--lg {
  width: 1.25em;
  height: 1.25em;
}

.hb-icon--xl {
  width: 1.75rem;
  height: 1.75rem;
}

/* Yalnızca JS varken görünenler / JS yokken görünenler */
html:not(.hb-js) .hb-js-only,
html:not(.hb-js) [data-hb-filter],
html:not(.hb-js) [data-hb-sort],
html:not(.hb-js) [data-hb-scroller-prev],
html:not(.hb-js) [data-hb-scroller-next],
html:not(.hb-js) [data-hb-copy-link],
html:not(.hb-js) [data-hb-print],
html:not(.hb-js) [data-hb-theme-value],
html:not(.hb-js) [data-hb-checklist-reset] {
  display: none !important;
}

html.hb-js .hb-nojs-only {
  display: none !important;
}

/* Bootstrap JS gerektirenler (menü, arama modalı, açılır menüler): JS yoksa ya da
   Bootstrap yüklenemediyse (html.hb-no-bs) gizlenir; yerine .hb-nobs-only bağlantıları görünür. */
html:not(.hb-js) .hb-bs-only,
html.hb-no-bs .hb-bs-only,
html.hb-no-bs [data-bs-toggle="offcanvas"],
html.hb-no-bs [data-bs-toggle="modal"],
html.hb-no-bs .hb-toc__toggle {
  display: none !important;
}

html.hb-js:not(.hb-no-bs) .hb-nobs-only {
  display: none !important;
}

/* Numaralı sayfalama yalnızca JS yokken gerekir ("Daha fazla yükle" varken gizlenir) */
html.hb-js [data-hb-pages] {
  display: none !important;
}

/* Küçük ekranda görsel olarak gizlenen ama ekran okuyucuya kalan etiketler */
@media (max-width: 575.98px) {
  .hb-hide-xs {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (max-width: 399.98px) {
  .hb-hide-xxs {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

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

.hb-surface {
  background-color: var(--hb-surface);
}

.hb-surface-2 {
  background-color: var(--hb-surface-2);
}

.hb-rounded {
  border-radius: var(--hb-radius-card);
}

.hb-rounded-xl {
  border-radius: var(--hb-radius-xl);
}

.hb-shadow {
  box-shadow: var(--hb-shadow);
}

.hb-narrow {
  max-width: 48rem;
  margin-inline: auto;
}

.hb-measure {
  max-width: 65ch;
}

.hb-stack > * + * {
  margin-top: var(--hb-stack-gap, 1rem);
}

/* Kart içindeki ana bağlantı: tüm kartı tıklanabilir yapar (Bootstrap .stretched-link ile).
   Odak halkası bağlantı metni yerine kartın tamamını çevreler (yerine konan halka). */
.hb-stretched {
  color: inherit;
  text-decoration: none;
}

.hb-stretched:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.hb-stretched:focus-visible {
  outline: none; /* yerine aşağıdaki ::after halkası kartın tamamını çevreler */
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.hb-stretched:focus-visible::after {
  outline: 3px solid var(--hb-focus);
  outline-offset: 4px;
  border-radius: calc(var(--hb-radius-card) + 4px);
}


/* --------------------------------------------------------------------------
   08. Üst gezinme
   -------------------------------------------------------------------------- */
.hb-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding-top: var(--hb-nav-gap);
  pointer-events: none; /* menü çevresindeki boşluk altındaki içeriği engellemesin */
}

.hb-header > .container-xl,
.hb-header > .container {
  pointer-events: none;
}

@media (max-height: 30rem) {
  .hb-header {
    position: relative;
  }
}

.hb-navbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: var(--hb-nav-h);
  padding: .5rem .5rem .5rem .75rem;
  background-color: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-radius: 20px;
  box-shadow: var(--hb-shadow);
  pointer-events: auto;
}

@media (min-width: 576px) {
  .hb-navbar {
    padding-left: 1.25rem;
    gap: .375rem;
  }
}

.hb-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .25rem;
  margin-right: auto;
  border-radius: var(--hb-radius-sm);
  color: inherit;
  text-decoration: none;
}

.hb-logo {
  display: block;
  width: auto;
  height: 32px;
}

@media (min-width: 576px) {
  .hb-logo {
    height: 34px;
  }
}

.hb-logo__ink {
  fill: var(--hb-logo-ink);
}

.hb-logo__accent {
  fill: var(--hb-logo-accent);
}

.hb-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  .hb-navbar .hb-nav-wrap {
    margin-inline: auto;
  }

  .hb-brand {
    margin-right: 0;
  }
}

.hb-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 0;
  border-radius: var(--hb-radius-pill);
  background-color: transparent;
  color: var(--hb-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.hb-nav-link:hover,
.hb-nav-link[aria-expanded="true"] {
  background-color: var(--hb-surface-2);
  color: var(--hb-text);
}

/* Etkin sayfa: zemin + kalın alt çizgi (yalnızca renge dayanmaz) */
.hb-nav-link[aria-current="page"] {
  background-color: var(--hb-surface-2);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

.hb-nav-link.dropdown-toggle::after {
  display: none;
}

.hb-chevron {
  width: .875rem;
  height: .875rem;
}

[aria-expanded="true"] > .hb-chevron {
  transform: rotate(180deg);
}

.hb-nav-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
}

@media (min-width: 992px) {
  .hb-nav-actions {
    margin-left: 0;
  }
}

/* Arama düğmesi: sm üstünde "Ara" yazısı görünür */
.hb-search-btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
}

@media (max-width: 575.98px) {
  .hb-search-btn {
    --bs-btn-padding-x: 0;
    width: 44px;
    border-radius: 50%;
  }
}

.hb-menu-btn {
  --bs-btn-padding-x: .875rem;
  --bs-btn-padding-y: .5rem;
}

@media (max-width: 399.98px) {
  .hb-menu-btn {
    --bs-btn-padding-x: 0;
    width: 44px;
    border-radius: 50%;
  }
}

/* Mega menü (Kategoriler) */
.hb-mega {
  position: static;
}

.hb-navbar .hb-mega-menu,
.hb-navbar .hb-mega-menu[data-bs-popper] {
  top: calc(100% + .5rem);
  left: 50%;
  right: auto;
  width: min(54rem, calc(100vw - 2rem));
  margin-top: 0;
  padding: 1.5rem;
  border-radius: var(--hb-radius-card);
  transform: translateX(-50%);
}

.hb-mega-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: 0 .875rem 1rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--hb-border);
}

.hb-mega-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.hb-mega-desc {
  margin: 0;
  font-size: .9375rem;
  color: var(--hb-muted);
}

/* Sütunlar yukarıdan aşağı akar: DOM sırası = okuma sırası */
.hb-mega-grid {
  columns: 3;
  column-gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-mega-grid > li {
  break-inside: avoid;
}

.hb-mega-foot .dropdown-item {
  width: auto;
  font-weight: 700;
}

.hb-mega-grid ul {
  margin: 0 0 .25rem;
  padding: 0 0 0 1rem;
  list-style: none;
}

.hb-mega .dropdown-item.hb-mega-cat {
  font-weight: 700;
}

.hb-mega .dropdown-item.hb-mega-sub {
  font-size: .9375rem;
  color: var(--hb-muted);
}

.hb-mega .dropdown-item.hb-mega-sub:hover,
.hb-mega .dropdown-item.hb-mega-sub:focus {
  color: var(--hb-text);
}

/* Mega menüde etkin kategori: zemin + kalın alt çizgi */
.hb-mega .dropdown-item[aria-current="page"] {
  background-color: var(--hb-surface-2);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
}

.hb-mega-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1rem .875rem 0;
  margin-top: .75rem;
  border-top: 1px solid var(--hb-border);
}

/* Mobil menü (offcanvas) */
.hb-offcanvas.offcanvas-end {
  border-top-left-radius: var(--hb-radius-card);
  border-bottom-left-radius: var(--hb-radius-card);
}

.hb-offcanvas .offcanvas-header {
  gap: 1rem;
  border-bottom: 1px solid var(--hb-border);
}

.hb-offcanvas .offcanvas-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.hb-mobile-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-mobile-nav ul {
  margin: 0;
  padding: 0 0 0 1rem;
  list-style: none;
}

.hb-mobile-heading {
  margin: 1.25rem 0 .5rem;
  padding-inline: .75rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--hb-muted);
}

.hb-mobile-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .5rem .75rem;
  border-radius: 14px;
  color: var(--hb-text);
  font-weight: 600;
  text-decoration: none;
}

.hb-mobile-link:hover {
  background-color: var(--hb-surface-2);
  color: var(--hb-text);
}

.hb-mobile-link[aria-current="page"] {
  background-color: var(--hb-surface-2);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
}

.hb-mobile-link--sub {
  min-height: 44px;
  font-weight: 500;
  color: var(--hb-muted);
}

/* Arama modalı */
.hb-search-modal .modal-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.hb-search-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .375rem .375rem 1.25rem;
  border: 2px solid var(--hb-control-border);
  border-radius: var(--hb-radius-pill);
  background-color: var(--hb-surface-2);
}

.hb-search-field:hover {
  border-color: var(--hb-text);
}

/* İç alanın halkası yerine kapsayıcının tamamı halka alır (yerine konan odak göstergesi) */
.hb-search-field:focus-within {
  border-color: var(--hb-focus);
  outline: 3px solid var(--hb-focus);
  outline-offset: 3px;
}

.hb-search-field > .hb-icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--hb-muted);
}

.hb-search-field .form-control {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0 .25rem;
  border: 0;
  background-color: transparent;
  font-size: 1.25rem;
}

.hb-search-field .form-control:focus {
  outline: none; /* yerine .hb-search-field:focus-within halkası */
  box-shadow: none;
  background-color: transparent;
}

.hb-search-field .btn {
  flex: none;
}

/* Dar ekran (< 400px): alan tam genişlikte hap, "Ara" düğmesi hapın dışında, altında tam genişlikte.
   Kapsayıcının çerçevesi ve halkası kalkar; çerçeve ve odak halkası girdinin kendisine geçer. */
@media (max-width: 399.98px) {
  .hb-search-field,
  .hb-home-search .hb-search-field {
    flex-wrap: wrap;
    gap: .75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .hb-search-field:focus-within {
    outline: none;
  }

  .hb-search-field > .hb-icon {
    display: none;
  }

  .hb-search-field .form-control {
    flex-basis: 100%;
    padding-inline: 1.25rem;
    border: 2px solid var(--hb-control-border);
    border-radius: var(--hb-radius-pill);
    background-color: var(--hb-surface);
  }

  .hb-search-field .form-control:focus {
    border-color: var(--hb-focus);
    outline: 3px solid var(--hb-focus);
    outline-offset: 3px;
    background-color: var(--hb-surface);
  }

  .hb-search-field .btn {
    width: 100%;
  }
}

.hb-search-suggest {
  margin-top: 1.75rem;
}

.hb-search-suggest h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .75rem;
}

/* Tema seçici */
.hb-theme-menu .dropdown-item .hb-check {
  margin-left: auto;
  visibility: hidden;
}

.hb-theme-menu .dropdown-item[aria-pressed="true"] {
  font-weight: 700;
  background-color: var(--hb-surface-2);
}

.hb-theme-menu .dropdown-item[aria-pressed="true"] .hb-check {
  visibility: visible;
}

/* Pinegrap tema seçicisi: Bootstrap Icons yazı tipi simgeleri, taslaktaki SVG simgelerle aynı boyutta */
.hb-theme .hb-icon-btn .bi {
  font-size: 1.25rem;
  line-height: 1;
}

.hb-theme-menu .dropdown-item .bi {
  font-size: 1.125rem;
  line-height: 1;
}


/* --------------------------------------------------------------------------
   09. Bölümler, bantlar, kahraman alanı, bölüm başlığı
   -------------------------------------------------------------------------- */
.hb-main {
  display: block;
}

.hb-main:focus {
  outline: none; /* atlama bağlantısının hedefi; yalnızca programatik odak */
}

.hb-section {
  padding-block: var(--hb-section-y);
}

.hb-section--sm {
  padding-block: var(--hb-section-y-sm);
}

/* Art arda iki düz bölüm boşluğu ikilemez (zemin rengi değişen bantlar hariç) */
.hb-section:not(.hb-band) + .hb-section:not(.hb-band) {
  padding-top: 0;
}

/* Tam genişlikte açık renkli bant */
.hb-band {
  background-color: var(--hb-surface-2);
  border-block: 1px solid transparent;
}

.hb-band--warm {
  background-color: var(--hb-chip-bg);
}

.hb-band--note {
  background-color: var(--hb-note-bg);
}

/* Kap içinde yuvarlak bant */
.hb-band--rounded {
  border: 1px solid transparent;
  border-radius: var(--hb-radius-xl);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

.hb-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1.25rem + 3vw, 4rem);
}

.hb-hero__title {
  margin-bottom: 1.25rem;
}

.hb-hero__lead {
  max-width: 40rem;
  margin-bottom: 0;
}

.hb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.hb-hero--center {
  text-align: center;
}

.hb-hero--center .hb-hero__lead {
  margin-inline: auto;
}

.hb-hero--center .hb-hero__actions {
  justify-content: center;
}

/* Kahraman görsel kolajı: bir büyük, iki küçük yuvarlak görsel */
.hb-collage {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-collage > :first-child {
  grid-row: span 2;
}

.hb-collage img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 9rem;
  object-fit: cover;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
}

/* Bölüm başlığı satırı + "Tümünü gör" */
.hb-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.hb-section-head__title {
  margin: 0;
}

.hb-section-head__desc {
  max-width: 65ch;
  margin: .5rem 0 0;
  color: var(--hb-muted);
}

.hb-section-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.hb-more-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1.125rem;
  border: 1px solid var(--hb-soft-border);
  border-radius: var(--hb-radius-pill);
  background-color: var(--hb-soft-bg);
  color: var(--hb-text);
  font-weight: 600;
  text-decoration: none;
}

.hb-more-link:hover {
  background-color: var(--hb-soft-bg-hover);
  color: var(--hb-text);
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   10. Öne çıkanlar kaydırıcısı ve kartı
   -------------------------------------------------------------------------- */
.hb-scroller-controls {
  display: flex;
  gap: .5rem;
}

/* scroll-padding-inline = iç boşluk: yakalama noktası iç kenara hizalanır, açılışta
   scrollLeft 0 olur ("Önceki" devre dışı başlar) ve 7px'lik odak halkası kırpılmaz. */
.hb-scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .5rem;
  padding: .5rem .5rem 1.25rem;
  margin-inline: -.5rem;
  border-radius: var(--hb-radius-card);
  scrollbar-width: thin;
  scrollbar-color: var(--hb-control-border) transparent;
}

.hb-scroller__track {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-scroller__item {
  flex: 0 0 min(82%, 22rem);
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .hb-scroller__item {
    flex-basis: calc((100% - 1.25rem) / 2);
  }
}

@media (min-width: 992px) {
  .hb-scroller__track {
    gap: 1.5rem;
  }

  .hb-scroller__item {
    flex-basis: calc((100% - 3rem) / 3);
  }
}

.hb-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hb-feature__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
  box-shadow: var(--hb-shadow-xs);
}

.hb-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hb-feature__body {
  padding: 1.125rem .25rem 0;
}

.hb-feature__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}

.hb-feature__title {
  margin-bottom: .5rem;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  line-height: 1.22;
}

.hb-feature__excerpt {
  margin-bottom: .75rem;
  color: var(--hb-muted);
}

.hb-feature__meta {
  font-size: .9375rem;
  color: var(--hb-muted);
}

.hb-feature--lg .hb-feature__media {
  aspect-ratio: 16 / 10;
}


/* --------------------------------------------------------------------------
   11. Filtre çipleri, etiketler, sıralama
   -------------------------------------------------------------------------- */
.hb-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.hb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.hb-chips > legend {
  float: none;
  width: auto;
  margin: 0;
}

.hb-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1.125rem;
  border: 1px solid var(--hb-soft-border);
  border-radius: var(--hb-radius-pill);
  background-color: var(--hb-soft-bg);
  color: var(--hb-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

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

.hb-chip__count {
  font-weight: 500;
}

/* Seçili çip: ters renk + onay işareti (yalnızca renge dayanmaz) */
.btn-check:checked + .hb-chip,
.hb-chip[aria-current],
.hb-chip[aria-pressed="true"],
.hb-chip.active {
  background-color: var(--hb-inverse-bg);
  color: var(--hb-inverse-text);
}

.btn-check:checked + .hb-chip::before,
.hb-chip[aria-current]::before,
.hb-chip[aria-pressed="true"]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--hb-check-mask) center / contain no-repeat;
  mask: var(--hb-check-mask) center / contain no-repeat;
}

.btn-check:focus-visible + .hb-chip {
  outline: 3px solid var(--hb-focus);
  outline-offset: 3px;
}

.btn-check:disabled + .hb-chip {
  cursor: not-allowed;
  color: var(--hb-muted);
}

/* Yatay kayan çip satırı (odak halkası kırpılmasın diye iç boşluklu) */
.hb-chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: .5rem;
  margin: -.5rem;
  scrollbar-width: thin;
}

/* Etkileşimsiz etiketler (kategori, içerik türü) */
.hb-tag {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-pill);
  background-color: var(--hb-tag-bg);
  color: var(--hb-chip-text);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.hb-tag--neutral {
  border-color: var(--hb-soft-border);
  background-color: var(--hb-soft-bg);
  color: var(--hb-text);
}

.hb-tag--note {
  background-color: var(--hb-note-bg);
  color: var(--hb-primary);
}

.hb-tag .hb-icon {
  width: .875rem;
  height: .875rem;
}

.hb-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}

.hb-sort .form-label {
  margin: 0;
}

.hb-sort .form-select {
  width: auto;
  min-width: 12rem;
  border-radius: var(--hb-radius-pill);
}

.hb-filter-status {
  margin: 0 0 1.25rem;
  font-size: .9375rem;
  color: var(--hb-muted);
}

.hb-filter-empty {
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--hb-control-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
  text-align: center;
}

.hb-load-more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}


/* --------------------------------------------------------------------------
   12. Masonry ızgara ve pin kartları
   Varsayılan: normal CSS ızgarası (JS yokken de düzgün görünür).
   JS, .is-masonry sınıfını ekleyip her öğeye grid-row-end: span N yazar.
   DOM sırası = görsel sıra.
   -------------------------------------------------------------------------- */
.hb-masonry {
  --hb-cols: 1;
  --hb-masonry-gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(var(--hb-cols), minmax(0, 1fr));
  gap: var(--hb-masonry-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Telefonlarda (dikey, 576px altı) tek sütun: okunabilirlik öncelikli (kullanıcı kararı, 2026-10-23). */
@media (min-width: 576px) {
  .hb-masonry {
    --hb-cols: 2;
    --hb-masonry-gap: 1rem;
  }
}

@media (min-width: 768px) {
  .hb-masonry {
    --hb-cols: 3;
    --hb-masonry-gap: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .hb-masonry {
    --hb-cols: 4;
  }
}

@media (min-width: 1400px) {
  .hb-masonry--wide {
    --hb-cols: 5;
  }
}

/* En çok 3 sütun (ör. 6 öğelik "Benzer projeler": 2 sıra × 3, boşluk kalmaz) */
@media (min-width: 1200px) {
  .hb-masonry--3 {
    --hb-cols: 3;
  }
}

.hb-masonry > * {
  min-width: 0;
  align-self: start;
}

/* 1px satır: öğe (yükseklik + boşluk) kadar satır kaplar; dikey boşluk sütun boşluğuna eşit olur */
.hb-masonry.is-masonry {
  grid-auto-rows: 1px;
  row-gap: 0;
}

@supports (grid-template-rows: masonry) {
  .hb-masonry {
    grid-template-rows: masonry;
  }
}

/* Pin kartı */
.hb-pin {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-bottom: .25rem;
}

.hb-pin__media {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
  box-shadow: var(--hb-shadow-xs);
  isolation: isolate;
}

.hb-pin__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hafif iç kenar: açık görsellerin zeminden ayrılması için */
.hb-pin__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--hb-shadow-rgb), .06);
  pointer-events: none;
}

/* Görsel üstü içerik türü rozeti: düz zemin, metin 7:1 üzeri.
   Sol altta durur; sağ üstteki "Kaydet" düğmesiyle dar sütunda da çakışmaz. */
.hb-pin__badge {
  position: absolute;
  bottom: .75rem;
  left: .75rem;
  z-index: 1;
  max-width: calc(100% - 1.5rem);
  box-shadow: var(--hb-shadow-sm);
  white-space: normal;
}

.hb-pin__body {
  padding-inline: .25rem;
}

.hb-pin__title {
  margin: 0 0 .5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
}

.hb-pin__excerpt {
  margin: 0 0 .625rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--hb-muted);
}

.hb-pin__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .75rem;
  font-size: .875rem;
  color: var(--hb-muted);
}

.hb-pin:hover .hb-pin__title .hb-stretched {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Not pini: yalnızca metin, renkli yüzey */
.hb-pin--note {
  gap: .75rem;
  padding: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-note-bg);
}

.hb-pin__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--hb-primary);
}

.hb-pin__quote {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.01em;
}

.hb-pin--note .hb-pin__meta {
  color: var(--hb-muted);
}

/* Tanıtım pini */
.hb-pin--promo {
  --hb-focus: var(--hb-promo-focus);
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-promo-bg);
  color: var(--hb-promo-text);
}

.hb-pin--promo .hb-pin__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: inherit;
}

.hb-pin--promo p {
  margin: 0;
  color: var(--hb-promo-muted);
}

.hb-pin--promo .hb-pin__eyebrow {
  color: var(--hb-promo-muted);
}

.hb-pin--promo .btn {
  --bs-btn-color: var(--hb-promo-btn-text);
  --bs-btn-bg: var(--hb-promo-btn-bg);
  --bs-btn-border-color: var(--hb-promo-btn-bg);
  --bs-btn-hover-color: var(--hb-promo-btn-text);
  --bs-btn-hover-bg: var(--hb-promo-btn-bg);
  --bs-btn-hover-border-color: var(--hb-promo-btn-bg);
  --bs-btn-active-color: var(--hb-promo-btn-text);
  --bs-btn-active-bg: var(--hb-promo-btn-bg);
  --bs-btn-active-border-color: var(--hb-promo-btn-bg);
  align-self: stretch;
  text-wrap: balance;
}

.hb-pin--promo .btn:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Reklam alanı yer tutucusu (AdSense kararı bekleniyor): yer ayrılır, düzen kaymaz */
.hb-ad {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: var(--hb-ad-h, 250px);
  padding: 2.25rem 1rem 1.25rem;
  border: 2px dashed var(--hb-control-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
  color: var(--hb-muted);
  font-size: .875rem;
  text-align: center;
}

.hb-ad__label {
  position: absolute;
  top: .625rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--hb-muted);
}

.hb-ad--pin {
  --hb-ad-h: 320px;
}

.hb-ad--banner {
  --hb-ad-h: 120px;
}

@media (min-width: 768px) {
  .hb-ad--banner {
    --hb-ad-h: 110px;
  }
}


/* --------------------------------------------------------------------------
   13. Kategori karoları, bağlantı kartları, bülten
   -------------------------------------------------------------------------- */
.hb-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .hb-cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (min-width: 1200px) {
  .hb-cat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.hb-cat-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
  color: var(--hb-text);
  text-decoration: none;
  isolation: isolate;
  box-shadow: var(--hb-shadow-xs);
}

.hb-cat-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hb-cat-tile__label {
  position: absolute;
  left: .625rem;
  bottom: .625rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  max-width: calc(100% - 1.25rem);
  min-height: 44px;
  padding: .5rem 1rem;
  border-radius: var(--hb-radius-pill);
  background-color: var(--hb-surface);
  color: var(--hb-text);
  font-weight: 700;
  line-height: 1.25;
  box-shadow: var(--hb-shadow-sm);
}

.hb-cat-tile:hover .hb-cat-tile__label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.hb-cat-tile__label .hb-icon {
  width: 1rem;
  height: 1rem;
}

/* Karo etiketindeki proje sayısı ("4 proje"; ana sayfa ve kategori sayfası): adla aynı etiketin içinde,
   daha ince ve ikincil renkte. --hb-muted, etiketin yüzeyinde iki temada da 7:1 üzerindedir. */
.hb-cat-tile__count {
  font-weight: 500;
  color: var(--hb-muted);
}

/* Metin karosu (görselsiz kategori bağlantısı) */
.hb-cat-tile--text {
  aspect-ratio: auto;
  display: flex;
  align-items: flex-end;
  min-height: 7rem;
  padding: 1.25rem;
  background-color: var(--hb-chip-bg);
  color: var(--hb-chip-text);
  font-weight: 700;
  font-size: 1.125rem;
}

/* "Başka bir şey mi arıyorsunuz?" bağlantı kartları */
.hb-link-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
  box-shadow: var(--hb-shadow-xs);
}

.hb-link-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--hb-radius);
  background-color: var(--hb-chip-bg);
  color: var(--hb-chip-text);
}

.hb-link-card__icon .hb-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.hb-link-card__title {
  margin: 0;
  font-size: 1.1875rem;
}

.hb-link-card p {
  margin: 0;
  color: var(--hb-muted);
}

.hb-link-card__arrow {
  margin-top: auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--hb-primary);
}

/* Kartın eylem metni (kartı kaplayan bağlantı): kartın altına yaslanır; tek başına anlamlıdır (2.4.9) */
.hb-link-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .25rem;
  color: var(--hb-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.hb-link-card__cta.hb-stretched {
  color: var(--hb-primary);
  text-decoration: underline;
}

.hb-link-card__cta:hover {
  color: var(--hb-link-hover);
  text-decoration-thickness: 2px;
}

.hb-link-card__cta .hb-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Kartta kısa destek listesi (ör. üç kılavuz ya da üç kategori) */
.hb-link-card__list {
  display: grid;
  gap: .25rem;
  margin: 0;
  padding: 0 0 0 1.125rem;
  color: var(--hb-muted);
}

/* Kartı kaplayan bağlantısı olmayan kartta ayrı bağlantı listesi (ana sayfadaki "Yeni başlayanlar için kılavuzlar").
   Her kılavuz ayrı bağlantıdır; dokunma alanı en az 44px, renkler bağlantı belirteçlerinden gelir. */
.hb-home-guides {
  display: grid;
  gap: .125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-home-guides a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding-block: .375rem;
  font-weight: 600;
  line-height: 1.5;
}

.hb-home-guides .hb-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* Bülten bandı */
.hb-newsletter {
  display: grid;
  gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border: 1px solid transparent;
  border-radius: var(--hb-radius-xl);
  background-color: var(--hb-chip-bg);
  color: var(--hb-text);
}

@media (min-width: 992px) {
  .hb-newsletter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

.hb-newsletter__title {
  margin-bottom: .75rem;
}

.hb-newsletter__text {
  margin: 0;
  color: var(--hb-muted);
}

.hb-newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hb-newsletter__row .form-control {
  flex: 1 1 14rem;
  min-width: 0;
  border-radius: var(--hb-radius-pill);
  padding-inline: 1.25rem;
}

.hb-newsletter__row .btn {
  flex: 0 0 auto;
}

@media (max-width: 399.98px) {
  .hb-newsletter__row .btn {
    flex-basis: 100%;
  }
}

.hb-newsletter .hb-help {
  margin-top: .5rem;
}


/* --------------------------------------------------------------------------
   14. Gönderi bileşenleri
   -------------------------------------------------------------------------- */
.hb-article-head {
  max-width: 56rem;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
}

.hb-article-head__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.hb-article-head__title {
  margin-bottom: 1.25rem;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
}

.hb-article-head__lead {
  max-width: 42rem;
  margin: 0 auto;
}

/* Hazırlayan satırı (başlık alanında ortalı) */
.hb-byline {
  margin: 1rem 0 0;
  color: var(--hb-muted);
}

.hb-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  color: var(--hb-muted);
}

.hb-meta li {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

/* Üst bilgi satırındaki bağlantılar en az 44px yükseklikte */
.hb-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.hb-meta--start {
  justify-content: flex-start;
}

.hb-article-hero {
  max-width: 72rem;
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* Görsel doğal boyutundan büyütülmez (bulanıklaşmaz) */
.hb-article-hero img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-xl);
  background-color: var(--hb-surface-2);
}

.hb-article-hero figcaption {
  margin-top: .75rem;
  font-size: .9375rem;
  color: var(--hb-muted);
  text-align: center;
}

/* Gönderi düzeni: içindekiler + metin (+ isteğe bağlı yan sütun).
   Tek sütunda da minmax(0, 1fr): uzun içerik izi genişletip sayfayı taşırmaz. */
.hb-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 992px) {
  .hb-article-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
  }
}

@media (min-width: 1200px) {
  .hb-article-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 4.5rem;
  }
}

/* Okunabilir metin (1.4.8): ≤ ~75 karakter satır, satır aralığı 1.7,
   paragraf aralığı satır aralığının 1,5 katından fazla (1.7em + 1.6em). */
.hb-prose {
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.7;
}

.hb-prose > * {
  margin-top: 0;
}

.hb-prose p,
.hb-prose ul,
.hb-prose ol,
.hb-prose dl,
.hb-prose blockquote,
.hb-prose figure,
.hb-prose table,
.hb-prose pre {
  margin-bottom: 1.6em;
}

.hb-prose h2 {
  margin-top: 2.25em;
  margin-bottom: .7em;
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
}

.hb-prose h3 {
  margin-top: 1.9em;
  margin-bottom: .6em;
  font-size: clamp(1.25rem, 1.15rem + .45vw, 1.4375rem);
}

.hb-prose h4 {
  margin-top: 1.6em;
  margin-bottom: .5em;
}

.hb-prose > :first-child,
.hb-prose section > :first-child {
  margin-top: 0;
}

.hb-prose ul,
.hb-prose ol {
  padding-left: 1.5em;
}

.hb-prose li + li {
  margin-top: .5em;
}

.hb-prose li::marker {
  color: var(--hb-accent);
  font-weight: 700;
}

.hb-prose a {
  font-weight: 500;
}

/* ".hb-prose a" yazı kalınlığı düğmeleri inceltmesin */
.hb-prose .btn {
  font-weight: var(--bs-btn-font-weight);
}

/* Metin içindeki kart başlıkları ".hb-prose h2" ölçülerini değil kendi ölçülerini kullanır */
.hb-prose .hb-summary__title,
.hb-prose .hb-facts__title,
.hb-prose .hb-checklist__title,
.hb-prose .hb-download__title {
  margin-top: 0;
  font-size: clamp(1.375rem, 1.25rem + .5vw, 1.625rem);
  line-height: 1.25;
}

.hb-prose .hb-summary__title {
  margin-bottom: .75rem;
}

.hb-prose .hb-facts__title {
  margin-bottom: 1rem;
}

.hb-prose .hb-checklist__title {
  margin-bottom: 0;
}

.hb-prose .hb-download__title {
  margin-bottom: .25rem;
}

/* Sözlük terimine bağlantı: noktalı alt çizgi; gizli metin "(terimler sözlüğünde açıklaması)" */
.hb-term,
.hb-prose .hb-term {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}

.hb-term:hover {
  text-decoration-style: solid;
}

.hb-prose strong {
  font-weight: 700;
}

.hb-prose blockquote {
  padding-left: 1.25rem;
  border-left: 4px solid var(--hb-brand);
  font-size: 1.25rem;
  font-weight: 500;
}

.hb-figure img,
.hb-prose figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
}

.hb-figure figcaption,
.hb-prose figcaption {
  margin-top: .75rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--hb-muted);
}

.hb-figure--narrow,
.hb-prose .hb-figure--narrow {
  max-width: 28rem;
}

.hb-prose > section {
  margin-bottom: 0;
}

/* İçindekiler (yapışkan; Bootstrap ScrollSpy ile etkin bağlantı) */
.hb-toc {
  padding: 1.25rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
}

@media (min-width: 992px) {
  .hb-toc {
    position: sticky;
    top: calc(var(--hb-nav-gap) + var(--hb-nav-h) + 1.5rem);
    max-height: calc(100vh - var(--hb-nav-gap) - var(--hb-nav-h) - 3rem);
    overflow-y: auto;
  }
}

@media (max-height: 30rem) {
  .hb-toc {
    position: static;
    max-height: none;
  }
}

.hb-toc__title {
  margin: 0 0 .5rem;
  padding-inline: .75rem;
  font-size: 1rem;
  font-weight: 700;
}

.hb-toc ol,
.hb-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-toc ol ol,
.hb-toc ul ul {
  padding-left: .75rem;
}

.hb-toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .75rem;
  border-left: 3px solid transparent;
  border-radius: var(--hb-radius-sm);
  color: var(--hb-muted);
  font-size: .9375rem;
  line-height: 1.35;
  text-decoration: none;
}

.hb-toc a:hover {
  background-color: var(--hb-surface-2);
  color: var(--hb-text);
  text-decoration: underline;
}

/* Etkin bölüm: kalın yazı + sol çubuk + zemin */
.hb-toc a.active,
.hb-toc a[aria-current="location"] {
  border-left-color: var(--hb-primary);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: var(--hb-surface-2);
  color: var(--hb-text);
  font-weight: 700;
}

.hb-toc__extra {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hb-border);
}

/* İçindekiler lg altında açılır-kapanır (Bootstrap collapse), lg ve üstünde hep açık.
   Açma düğmesi .hb-bs-only alır; JS ya da Bootstrap yoksa liste her zaman görünür. */
.hb-toc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.hb-toc__chevron {
  width: 1rem;
  height: 1rem;
}

.hb-toc__toggle[aria-expanded="true"] .hb-toc__chevron {
  transform: rotate(180deg);
}

html:not(.hb-js) .hb-toc__collapse,
html.hb-no-bs .hb-toc__collapse {
  display: block;
}

@media (max-width: 991.98px) {
  .hb-toc__head .hb-toc__title {
    margin-bottom: 0;
  }

  .hb-toc__collapse > ol {
    padding-top: .75rem;
  }
}

/* "Kısaca" özet kutusu (3.1.5) */
.hb-summary {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-note-bg);
}

.hb-summary__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  font-size: 1.25rem;
}

.hb-summary__title .hb-icon {
  color: var(--hb-primary);
}

.hb-prose .hb-summary ul,
.hb-summary ul {
  margin: 0;
  padding-left: 1.25rem;
}

.hb-summary li + li {
  margin-top: .375rem;
}

/* Bilgi kutusu (bütün sayfalar; gönderi sayfası üst boşluğu hb-gonderi.css'te ayarlar) */
.hb-callout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
}

.hb-callout__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: .125rem;
  color: var(--hb-accent);
}

.hb-callout p:last-child {
  margin-bottom: 0;
}

/* Proje bilgi kartı */
.hb-facts {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
}

.hb-facts__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.hb-facts__list,
.hb-prose .hb-facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: .75rem;
  margin: 0;
}

.hb-facts__item {
  padding: .875rem 1rem;
  border-radius: var(--hb-radius);
  background-color: var(--hb-surface-2);
}

.hb-facts__item dt {
  font-size: .875rem;
  font-weight: 600;
  color: var(--hb-muted);
}

.hb-facts__item dd {
  margin: .125rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Cümle uzunluğunda yanıtlı bilgi kartı (yasal metinler): tek sütun, normal ağırlık */
.hb-facts--text .hb-facts__list,
.hb-prose .hb-facts--text .hb-facts__list {
  grid-template-columns: 1fr;
}

.hb-facts--text .hb-facts__item dd {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

/* PDF indirme kartı
   Esnek satır: simge + başlık/bilgi ilk satırı paylaşır; başlık sütunu 12rem'in altına
   inemez (yer yoksa simgenin altına geçer). Düğmeler ve yazdırma ipucu her zaman kendi
   satırındadır ve gerektiğinde alt alta sarılır; uzun düğme metni başlığı daraltamaz. */
.hb-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-chip-bg);
  color: var(--hb-text);
}

.hb-download__icon {
  flex: none;
}

.hb-download__text {
  flex: 1 1 12rem;
  min-width: 0;
}

.hb-download__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background-color: var(--hb-surface);
  color: var(--hb-accent);
}

.hb-download__icon .hb-icon {
  width: 2rem;
  height: 2rem;
}

.hb-download__title {
  margin: 0 0 .25rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.hb-download__meta {
  margin: 0;
  font-size: .9375rem;
  color: var(--hb-muted);
}

/* Başlık/bilgi kutusu .hb-download__text sınıfı almamış eski işaretlemede de 12rem kuralı geçerli */
.hb-download > div:not([class]) {
  flex: 1 1 12rem;
  min-width: 0;
}

.hb-download__actions {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  gap: .75rem;
  min-width: 0;
}

.hb-download__actions .btn {
  white-space: normal;
  text-align: start;
}

/* Yazdırma ipucu kartın tüm satırını kaplar */
.hb-download__tip {
  display: flex;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--hb-text);
}

.hb-download__tip .hb-icon {
  margin-top: .2em;
  color: var(--hb-accent);
}

/* Malzeme kontrol listesi */
.hb-checklist {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
}

.hb-checklist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: .75rem;
}

.hb-checklist__title {
  margin: 0;
  font-size: 1.25rem;
}

.hb-checklist__status {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
}

.hb-progress {
  height: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: var(--hb-radius-pill);
  background-color: var(--hb-surface-3);
}

.hb-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--hb-primary);
}

.hb-checklist__list,
.hb-prose .hb-checklist__list {
  display: grid;
  gap: .125rem 1rem;
  margin: 0 0 .5rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .hb-checklist__list,
  .hb-prose .hb-checklist__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hb-prose .hb-checklist__list li + li {
  margin-top: 0;
}

.hb-checklist .form-check {
  padding-inline: .5rem;
  border-radius: var(--hb-radius-sm);
  font-size: 1rem;
  line-height: 1.5;
}

.hb-checklist .form-check:hover {
  background-color: var(--hb-surface-2);
}

.hb-checklist .form-check-input:checked + .form-check-label {
  color: var(--hb-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.hb-checklist__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

/* Numaralı adım listesi (büyük sayaçlar) */
.hb-steps,
.hb-prose .hb-steps {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  counter-reset: hb-step;
}

.hb-steps > li {
  position: relative;
  min-height: 2.75rem;
  padding-left: 4rem;
  counter-increment: hb-step;
}

.hb-steps > li + li,
.hb-prose .hb-steps > li + li {
  margin-top: 1.75rem;
}

.hb-steps > li::before {
  content: counter(hb-step);
  content: counter(hb-step) / "";
  position: absolute;
  top: -.0625rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: var(--hb-chip-bg);
  color: var(--hb-chip-text);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
}

/* Adımlar arası ince bağlantı çizgisi (süs) */
.hb-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.25rem;
  bottom: -1.25rem;
  left: calc(1.375rem - 1px);
  width: 2px;
  border-radius: 2px;
  background-color: var(--hb-border);
}

.hb-steps p {
  margin-bottom: .75rem;
}

.hb-steps > li > :last-child {
  margin-bottom: 0;
}

.hb-steps figure {
  margin: 1rem 0 0;
}

.hb-step__title {
  display: block;
  margin-bottom: .25rem;
  font-weight: 700;
}

/* Terimler sözlüğü (3.1.3) */
.hb-glossary,
.hb-prose .hb-glossary {
  display: grid;
  gap: .75rem;
  margin: 0 0 2rem;
}

@media (min-width: 768px) {
  .hb-glossary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hb-glossary > div {
  padding: 1rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--hb-radius);
  background-color: var(--hb-surface-2);
}

.hb-glossary dt {
  font-weight: 700;
}

.hb-glossary dd {
  margin: .25rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* Paylaş çubuğu */
.hb-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
}

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

.hb-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hb-soft-border);
  border-radius: 50%;
  background-color: var(--hb-soft-bg);
  color: var(--hb-text);
  text-decoration: none;
}

.hb-share__btn:hover {
  background-color: var(--hb-inverse-bg);
  color: var(--hb-inverse-text);
}

.hb-share__btn .hb-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.hb-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Gönderi görselinin altındaki kısa eylem satırı ("Pinterest'e kaydet", "Yazdır"); tam paylaş çubuğu yazının sonundadır.
   Satır görsele yakın dursun diye, ardından bu satır gelen görselin alt boşluğu küçülür. :has() desteklemeyen
   tarayıcıda görselin olağan alt boşluğu kalır; düzen bozulmaz. */
.hb-article-hero:has(+ .hb-share--top) {
  margin-bottom: 1.25rem;
}

.hb-share--top {
  justify-content: center;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* Önceki / sonraki gönderi */
.hb-post-nav {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .hb-post-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hb-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  height: 100%;
  min-height: 44px;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
  color: var(--hb-text);
  text-decoration: none;
}

.hb-post-nav__link:hover {
  background-color: var(--hb-surface-2);
  color: var(--hb-text);
}

.hb-post-nav__link:hover .hb-post-nav__title {
  text-decoration: underline;
}

.hb-post-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--hb-muted);
}

.hb-post-nav__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .hb-post-nav__link--next {
    align-items: flex-end;
    text-align: end;
  }

  .hb-post-nav > li:only-child .hb-post-nav__link--next {
    grid-column: 2;
  }
}

/* Yorumlar ve boş durum */
.hb-comments__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: 1.5rem;
}

.hb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--hb-control-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
  text-align: center;
}

.hb-empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--hb-surface);
  color: var(--hb-primary);
}

.hb-empty__icon .hb-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.hb-empty__title {
  margin: 0;
  font-size: 1.1875rem;
}

.hb-empty p {
  max-width: 32rem;
  margin: 0;
  color: var(--hb-muted);
}

.hb-comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--hb-border);
}

.hb-comment__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--hb-chip-bg);
  color: var(--hb-chip-text);
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   15. Formlar
   -------------------------------------------------------------------------- */
.hb-form {
  display: grid;
  gap: 1.5rem;
}

.hb-form fieldset {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Grup başlığı ilk alandan alanlar arası boşluk kadar ayrılır (gap, işlenen legend'e uygulanmaz) */
.hb-form fieldset > legend {
  float: none;
  margin-bottom: .75rem;
}

.hb-form fieldset + fieldset {
  padding-top: .5rem;
}

.hb-form-card {
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
  box-shadow: var(--hb-shadow-xs);
}

.hb-field {
  display: grid;
  gap: .375rem;
}

.hb-field > .form-label {
  margin-bottom: 0;
}

/* Zorunlu / isteğe bağlı işareti metinle yazılır: "(zorunlu)" */
.hb-req,
.hb-opt {
  font-weight: 500;
  color: var(--hb-muted);
}

.hb-help {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--hb-muted);
}

.hb-field-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .hb-field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Satır içi hata: simge + metin (yalnızca renge dayanmaz) */
.hb-field-error {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .25rem 0 0;
  padding: .5rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--hb-radius-sm);
  background-color: var(--hb-danger-bg);
  color: var(--hb-danger);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.hb-field-error .hb-icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1em;
}

.hb-field.is-invalid > .form-label {
  color: var(--hb-danger);
}

/* Hata özeti kutusu */
.hb-error-summary {
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--hb-danger);
  border-radius: 20px;
  background-color: var(--hb-danger-bg);
  color: var(--hb-text);
}

.hb-error-summary:focus {
  outline: 3px solid var(--hb-focus);
  outline-offset: 3px;
}

.hb-error-summary__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  color: var(--hb-danger);
}

.hb-error-summary p {
  margin: 0 0 .5rem;
}

.hb-error-summary ul {
  margin: 0;
  padding-left: 1.25rem;
}

.hb-error-summary a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hb-danger);
  font-weight: 600;
  text-decoration: underline;
}

/* Gönderim öncesi kontrol paneli (3.3.6) */
.hb-review {
  padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface-2);
}

.hb-review__title {
  margin: 0 0 .5rem;
  font-size: 1.375rem;
}

.hb-review__list {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: .75rem 1.5rem;
  margin: 1.25rem 0 1.5rem;
}

.hb-review__list dt {
  font-weight: 600;
  color: var(--hb-muted);
}

.hb-review__list dd {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .hb-review__list {
    grid-template-columns: minmax(0, 1fr);
    gap: .125rem;
  }

  .hb-review__list dd {
    margin-bottom: .75rem;
  }
}

.hb-review__actions,
.hb-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* Başarı paneli */
.hb-success {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border: 2px solid var(--hb-success);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-success-bg);
  color: var(--hb-text);
}

.hb-success__icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--hb-success);
}

.hb-success__title {
  margin: 0 0 .375rem;
  font-size: 1.25rem;
  color: var(--hb-success);
}

.hb-success p {
  margin: 0 0 .75rem;
}

.hb-success > div > :last-child {
  margin-bottom: 0;
}

/* Karakter sayacı */
.hb-counter {
  margin: 0;
  font-size: .9375rem;
  color: var(--hb-muted);
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   16. SSS, iletişim kartları
   -------------------------------------------------------------------------- */
.hb-faq {
  display: grid;
  gap: .75rem;
}

.hb-faq .accordion-item {
  border: 1px solid var(--hb-border);
  border-radius: 20px;
}

.hb-faq .accordion-item .accordion-button,
.hb-faq .accordion-item .accordion-button.collapsed {
  border-radius: 19px;
}

.hb-faq .accordion-item .accordion-button:not(.collapsed) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.hb-faq .accordion-body {
  padding-top: 0;
  line-height: 1.7;
}

/* Okunabilir satır uzunluğu bileşenden gelir (1.4.8); sayfada .hb-measure gerekmez */
.hb-faq .accordion-body > * {
  max-width: 65ch;
}

.hb-faq .accordion-body > :last-child {
  margin-bottom: 0;
}

/* JS ya da Bootstrap yoksa bütün yanıtlar açık; açma/kapama oku gizlenir (aşamalı geliştirme) */
html:not(.hb-js) .hb-faq .accordion-collapse,
html.hb-no-bs .hb-faq .accordion-collapse {
  display: block;
}

html:not(.hb-js) .hb-faq .accordion-button,
html.hb-no-bs .hb-faq .accordion-button {
  cursor: default;
}

html:not(.hb-js) .hb-faq .accordion-button::after,
html.hb-no-bs .hb-faq .accordion-button::after {
  display: none;
}

.hb-contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-contact-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  height: 100%;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
  box-shadow: var(--hb-shadow-xs);
}

.hb-contact-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background-color: var(--hb-note-bg);
  color: var(--hb-primary);
}

.hb-contact-card__icon .hb-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.hb-contact-card__title {
  margin: 0;
  font-size: 1.25rem;
}

.hb-contact-card p {
  margin: 0;
  color: var(--hb-muted);
}

.hb-contact-card__action {
  margin-top: auto;
  padding-top: .25rem;
}

.hb-contact-card__value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   17. Alt bilgi
   -------------------------------------------------------------------------- */
/* Üst boşluğu sayfanın son bölümünün alt iç boşluğu verir (ikilenmesin diye margin yok) */
.hb-footer {
  margin-top: 0;
  padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-top: 1px solid transparent;
  border-radius: var(--hb-radius-xl) var(--hb-radius-xl) 0 0;
  background-color: var(--hb-surface-2);
  color: var(--hb-text);
}

.hb-footer .hb-logo {
  height: 40px;
}

.hb-footer__blurb {
  max-width: 26rem;
  margin: 1rem 0 0;
  color: var(--hb-muted);
}

.hb-footer__slogan {
  margin: .75rem 0 0;
  font-weight: 700;
}

.hb-footer__title {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
}

.hb-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-footer__links--2col {
  columns: 2;
  column-gap: 1.5rem;
}

.hb-footer__links li {
  break-inside: avoid;
}

.hb-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 44px;
  min-height: 44px;
  color: var(--hb-text);
  text-decoration: none;
}

.hb-footer__links a:hover {
  color: var(--hb-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.hb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-block: 1rem 1.5rem;
  border-top: 1px solid var(--hb-control-border);
  font-size: .9375rem;
  color: var(--hb-muted);
}

.hb-footer__bottom p {
  margin: 0;
}

.hb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-footer__legal a,
.hb-footer__credit a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--hb-text);
}

.hb-to-top {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}


/* --------------------------------------------------------------------------
   18. Stil rehberi sayfasına özgü yardımcılar
   -------------------------------------------------------------------------- */
/* Tek sütunda da minmax(0, 1fr): içerik sütunu (kaydırıcı, renk örnekleri) izi genişletmez */
.hb-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.hb-guide > * {
  min-width: 0;
}

@media (min-width: 992px) {
  .hb-guide {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
  }
}

.hb-guide__section {
  padding-block: 0 clamp(2.5rem, 2rem + 2vw, 4rem);
}

.hb-guide__section + .hb-guide__section {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--hb-border);
}

.hb-guide__section > h2 {
  margin-bottom: .5rem;
}

.hb-guide__intro {
  max-width: 65ch;
  margin-bottom: 2rem;
  color: var(--hb-muted);
}

.hb-guide__sub {
  margin: 2.5rem 0 1rem;
  font-size: 1.25rem;
}

.hb-demo {
  padding: clamp(1rem, .75rem + 1.5vw, 1.75rem);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
}

.hb-demo--bg {
  background-color: var(--hb-bg);
}

.hb-demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.hb-demo-note {
  margin: .75rem 0 0;
  font-size: .9375rem;
  color: var(--hb-muted);
}

/* Örnek kutusunun son öğesi olan kısa eylem satırı kutunun altında fazladan boşluk bırakmaz */
.hb-demo > .hb-share--top:last-child {
  margin-bottom: 0;
}

/* Sayfa düzeyindeki parçalar (bölüm + kap içeren) rehber sütununda kendi boşluklarını taşımaz */
.hb-guide__parca > .hb-section {
  padding-block: 0;
}

.hb-guide__parca .container-xl {
  padding-inline: 0;
}

.hb-theme-panels {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 1200px) {
  .hb-theme-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* İç içe tema kapsayıcısı: kendi temasının zeminini ve yazısını taşır */
.hb-theme-panel {
  padding: 1.5rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-bg);
  color: var(--hb-text);
}

.hb-theme-panel__title {
  margin: 0 0 1rem;
  font-size: 1.1875rem;
}

.hb-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-swatch {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .9375rem;
}

.hb-swatch__chip {
  display: grid;
  place-items: center;
  height: 64px;
  margin-bottom: .375rem;
  border: 1px solid var(--hb-control-border);
  border-radius: var(--hb-radius);
  font-size: 1.25rem;
  font-weight: 700;
}

.hb-swatch__name {
  font-weight: 700;
}

.hb-swatch__hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .875rem;
  color: var(--hb-muted);
}

.hb-swatch__ratio {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--hb-muted);
}

.hb-type-scale {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-type-scale li {
  display: grid;
  gap: .25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hb-border);
}

.hb-type-scale .hb-type-meta {
  font-size: .875rem;
  color: var(--hb-muted);
}

.hb-type-scale p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   19. Erişilebilirlik ortam sorguları
   -------------------------------------------------------------------------- */

/* Hareket: yalnızca kullanıcı azaltılmış hareket istemiyorsa (≤ 4px kalkış) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .hb-pin,
  .hb-feature__media,
  .hb-cat-tile,
  .hb-link-card,
  .hb-contact-card,
  .hb-post-nav__link,
  .hb-round-btn,
  .hb-chip,
  .hb-more-link,
  .hb-nav-link,
  .hb-mobile-link,
  .hb-share__btn,
  .hb-icon-btn,
  .hb-toc a {
    transition:
      transform .25s var(--hb-ease),
      box-shadow .25s var(--hb-ease),
      background-color .2s ease,
      color .2s ease;
  }

  .hb-toc__chevron,
  .hb-chevron,
  .hb-more-link .hb-icon,
  .hb-link-card__arrow,
  .hb-link-card__cta .hb-icon,
  .hb-cat-tile__label .hb-icon {
    transition: transform .2s var(--hb-ease);
  }

  .hb-pin:hover {
    transform: translateY(-3px);
  }

  .hb-pin:hover .hb-pin__media {
    box-shadow: var(--hb-shadow);
  }

  .hb-feature:hover .hb-feature__media,
  .hb-cat-tile:hover,
  .hb-link-card:hover,
  .hb-contact-card:hover,
  .hb-post-nav__link:hover {
    transform: translateY(-4px);
    box-shadow: var(--hb-shadow);
  }

  .hb-more-link:hover .hb-icon,
  .hb-link-card:hover .hb-link-card__arrow,
  .hb-link-card:hover .hb-link-card__cta .hb-icon,
  .hb-cat-tile:hover .hb-cat-tile__label .hb-icon {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  .modal.fade .modal-dialog,
  .hb-pin:hover,
  .hb-feature:hover .hb-feature__media,
  .hb-cat-tile:hover,
  .hb-link-card:hover {
    transform: none;
  }
}

/* Zorlanmış renkler (Windows yüksek karşıtlık): saydam kenarlıklar görünür olur */
@media (forced-colors: active) {
  :focus-visible,
  .btn:focus-visible,
  .btn-check:focus-visible + .hb-chip,
  .form-control:focus,
  .form-select:focus,
  .form-check-input:focus,
  .hb-search-field:focus-within,
  .hb-stretched:focus-visible::after {
    outline: 3px solid Highlight;
  }

  /* Onay kutusu ve radyo: yerel denetim sistem renkleriyle çizilir (işaret kaybolmaz) */
  .form-check-input {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none !important;
  }

  .hb-navbar,
  .hb-pin__media,
  .hb-pin--note,
  .hb-pin--promo,
  .hb-feature__media,
  .hb-cat-tile,
  .hb-cat-tile__label,
  .hb-link-card,
  .hb-contact-card,
  .hb-newsletter,
  .hb-summary,
  .hb-facts,
  .hb-download,
  .hb-checklist,
  .hb-toc,
  .hb-tag,
  .hb-chip,
  .hb-more-link,
  .hb-share__btn,
  .hb-round-btn,
  .hb-band,
  .hb-footer,
  .hb-steps > li::before,
  .hb-glossary > div,
  .hb-post-nav__link {
    border: 1px solid CanvasText;
  }

  .btn-check:checked + .hb-chip,
  .hb-chip[aria-current],
  .hb-chip[aria-pressed="true"],
  .hb-pagination .page-item.active .page-link {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  .hb-toc a.active,
  .hb-toc a[aria-current="location"] {
    border-left-color: Highlight;
  }

  .hb-logo__ink,
  .hb-logo__accent {
    fill: CanvasText;
  }

  .hb-progress__bar {
    forced-color-adjust: none;
    background-color: Highlight;
  }

  .hb-pin__media::after,
  .hb-steps > li:not(:last-child)::after {
    display: none;
  }
}

/* Yüksek kontrast tercihi: süs çizgileri belirginleşir */
@media (prefers-contrast: more) {
  :root,
  [data-bs-theme="light"] {
    --hb-border: #8a817a;
    --hb-muted: #2f2925;
  }
}

/* Koyu tema değerleri yalnızca ekranda (yazdırırken açık tema belirteçleri kalır) */
@media screen and (prefers-contrast: more) {
  [data-bs-theme="dark"] {
    --hb-border: #8c8279;
    --hb-muted: #ece6df;
  }
}

@media (prefers-contrast: more) {
  .hb-pin__media,
  .hb-feature__media,
  .hb-cat-tile,
  .hb-pin--note,
  .hb-summary,
  .hb-download,
  .hb-newsletter,
  .hb-tag,
  .hb-chip,
  .hb-share__btn,
  .hb-glossary > div {
    border-color: var(--hb-control-border);
  }

  a {
    text-decoration-thickness: 2px;
  }
}


/* --------------------------------------------------------------------------
   20. Yazdırma
   -------------------------------------------------------------------------- */
@media print {
  [data-bs-theme] {
    color-scheme: light;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 12pt;
  }

  .hb-header,
  .hb-skip-link,
  .offcanvas,
  .modal,
  .hb-share,
  .hb-comments,
  .hb-newsletter,
  .hb-ad,
  .hb-scroller-controls,
  .hb-filterbar,
  .hb-load-more,
  .hb-toc,
  .hb-post-nav,
  .hb-footer__top,
  .hb-footer__legal,
  .hb-to-top,
  .hb-checklist__foot,
  [data-hb-print],
  [data-hb-copy-link],
  .hb-no-print {
    display: none !important;
  }

  .hb-footer {
    margin-top: 2rem;
    border-radius: 0;
    background: none;
  }

  .hb-article-layout {
    display: block;
  }

  .hb-prose {
    max-width: none;
    font-size: 11.5pt;
  }

  /* Gönderi içi bağlantıların adresini göster */
  .hb-prose a[href]:not([href^="#"]):not([href^="javascript"])::after,
  .hb-download a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    font-weight: 400;
    word-break: break-all;
  }

  figure,
  img,
  .hb-steps > li,
  .hb-summary,
  .hb-facts,
  .hb-download,
  .hb-checklist,
  .hb-glossary > div,
  .hb-pin {
    break-inside: avoid;
  }

  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
  }

  .hb-masonry {
    display: block;
    columns: 2;
  }

  .hb-masonry > * {
    break-inside: avoid;
    margin-bottom: 1rem;
  }

  .hb-steps > li::before,
  .hb-progress__bar,
  .form-check-input {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .hb-pin,
  .hb-feature__media,
  .hb-pin__media {
    box-shadow: none !important;
    transform: none !important;
  }

  /* SSS yanıtları ve içindekiler kâğıtta açık; açma okları gizli */
  .hb-faq .accordion-collapse,
  .hb-toc__collapse {
    display: block !important;
  }

  .hb-faq .accordion-button::after {
    display: none;
  }

  [data-hb-pages],
  .hb-nobs-only {
    display: none !important;
  }
}