/* ==========================================================================
   MARKA İNİSİYATİFİ : BİLGİ BANKASI · editoryal yayın sistemi
   mi.css üzerine yüklenir. Tüm sınıflar .bb- ön eki taşır, mevcut
   sayfaların hiçbir stilini etkilemez.

   Palet   : #FC5200 / #FFFFFF / #000000
   Geometri: köşeli (4px), ince çizgi, beyaz zemin
   Turuncu : yalnızca etkin durum, bağlantı, işaret ve etkileşimde
   ========================================================================== */

.bb {
  /* Sitenin diğer sayfalarındaki kapla aynı ölçü: max-w-7xl (1280px) ve
     px-4 / sm:px-6 / lg:px-8. Böylece içerik başlıktaki logo ile aynı
     eksene oturur, Bilgi Bankası sayfaları diğerlerinden kaymaz. */
  --bb-max: 1280px;
  --bb-read: 820px;          /* uzun metin okuma genişliği */
  --bb-pad: 16px;
  --bb-line: rgba(0, 0, 0, 0.12);
  --bb-line-soft: rgba(0, 0, 0, 0.08);
  --bb-ink-1: rgba(0, 0, 0, 0.92);
  --bb-ink-2: rgba(0, 0, 0, 0.62);
  --bb-ink-3: rgba(0, 0, 0, 0.44);
}

.bb-shell {
  max-width: var(--bb-max);
  margin-inline: auto;
  padding-inline: var(--bb-pad);
}

@media (min-width: 640px)  { .bb { --bb-pad: 24px; } }
@media (min-width: 1024px) { .bb { --bb-pad: 32px; } }

/* --- Etiket : çerçeveli bölüm etiketi -----------------------------------
   Sitenin diğer sayfalarındaki .tag etiketiyle aynı görünüm: ince çerçeve,
   turuncu nokta, mono büyük harf. Ölçüler mi.css 29. bölümden alınmıştır. */
.bb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-r-sharp);
  background: transparent;
  font-family: var(--mi-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mi-ink-2);
  line-height: 1;
  max-width: max-content;
}

/* Turuncu işaret noktası (.tag-dot karşılığı) */
.bb-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mi-grad);
  flex-shrink: 0;
}

/* --- Yapışkan içindekiler için kaydırma bağlamı --------------------------
   Sayfa şablonundaki html,body{overflow-x:hidden} kuralı bir kaydırma
   bağlamı oluşturuyor ve position:sticky bu bağlam içinde etkisiz kalıyor.
   clip aynı yatay taşma korumasını kaydırma bağlamı oluşturmadan verir. */
html.bb-page,
html.bb-page body {
  overflow-x: clip;
}

/* ==========================================================================
   1. HERO : kompakt, tam ekran yükseklik yok
   ========================================================================== */

.bb-hero {
  padding-block: clamp(40px, 6vw, 76px) clamp(32px, 4.5vw, 56px);
  border-bottom: 1px solid var(--bb-line-soft);
  text-align: center;
}

.bb-hero h1 {
  max-width: 19ch;
  margin: 22px auto 0;
  font-size: clamp(32px, 4.4vw, 54px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.034em !important;
}

.bb-hero p {
  max-width: 58ch;
  margin: 20px auto 0;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.7 !important;
  color: var(--bb-ink-2) !important;
}

/* ==========================================================================
   2. ÖNE ÇIKAN YAZI : iki sütun, editoryal kompozisyon
   ========================================================================== */

.bb-featured {
  padding-block: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--bb-line-soft);
}

.bb-featured-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
}

@media (min-width: 900px) {
  .bb-featured-inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
}

.bb-featured-media {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--bb-line);
  border-radius: var(--mi-r-card);
  background: #fff;
  aspect-ratio: 3 / 2;
}

.bb-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--mi-ease);
}

.bb-featured-media:hover img { transform: scale(1.02); }

.bb-featured-body h2 {
  margin-block: 18px 0;
  font-size: clamp(23px, 2.5vw, 34px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.03em !important;
}

.bb-featured-body h2 a { color: inherit; text-decoration: none; }

.bb-featured-body p {
  margin-top: 16px;
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: var(--bb-ink-2) !important;
}

/* --- Künye satırı : tarih, süre, kategori ------------------------------- */
.bb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mi-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-3);
}

.bb-meta .bb-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.bb-tag {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid rgba(251, 97, 0, 0.32);
  border-radius: 2px;
  font-family: var(--mi-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mi-orange);
  white-space: nowrap;
}

/* --- Ok bağlantısı ------------------------------------------------------ */
.bb-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--bb-ink-1);
  text-decoration: none;
  border-bottom: 1px solid var(--mi-orange);
  padding-bottom: 4px;
  transition: color 0.25s var(--mi-ease);
}

.bb-arrow-link svg { transition: transform 0.25s var(--mi-ease); }
.bb-arrow-link:hover { color: var(--mi-orange); }
.bb-arrow-link:hover svg { transform: translateX(5px); }

/* ==========================================================================
   3. ARAÇ ÇUBUĞU : arama ve kategori süzgeci
   ========================================================================== */

.bb-list { padding-block: clamp(36px, 5vw, 64px); }

.bb-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.bb-list-head h2 {
  margin-top: 16px;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  letter-spacing: -0.03em !important;
}

.bb-search {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.bb-search input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--bb-line);
  border-radius: var(--mi-r-sharp);
  background: #fff;
  font-size: 14px;
  font-weight: 300;
  color: var(--bb-ink-1);
  transition: border-color 0.25s var(--mi-ease);
}

.bb-search input::placeholder { color: var(--bb-ink-3); }

.bb-search input:focus {
  outline: none;
  border-color: var(--mi-orange);
}

.bb-search svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bb-ink-3);
  pointer-events: none;
}

/* --- Kategori süzgeci : mobilde yatay kaydırma -------------------------- */
.bb-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bb-filters::-webkit-scrollbar { display: none; }

.bb-filter {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--bb-line);
  border-radius: var(--mi-r-sharp);
  background: #fff;
  font-family: var(--mi-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.22s var(--mi-ease), color 0.22s var(--mi-ease),
              background 0.22s var(--mi-ease);
}

.bb-filter:hover { border-color: var(--mi-orange); color: var(--mi-orange); }

.bb-filter[aria-pressed='true'] {
  background: var(--mi-grad);
  border-color: var(--mi-orange);
  color: #fff;
}

/* ==========================================================================
   4. YAZI KARTLARI : köşeli, ince çizgili
   ========================================================================== */

.bb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2vw, 26px);
}

@media (min-width: 620px)  { .bb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bb-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bb-line);
  border-radius: var(--mi-r-card);
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.28s var(--mi-ease);
}

.bb-card:hover { border-color: rgba(0, 0, 0, 0.28); }

.bb-card-media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--bb-line-soft);
}

.bb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--mi-ease);
}

.bb-card:hover .bb-card-media img { transform: scale(1.02); }

.bb-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(18px, 2vw, 24px);
}

.bb-card-body h3 {
  margin-block: 14px 0;
  font-size: 17px !important;
  line-height: 1.32 !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  color: var(--bb-ink-1) !important;
  transition: color 0.22s var(--mi-ease);
}

.bb-card:hover .bb-card-body h3 { color: var(--mi-orange) !important; }

.bb-card-body p {
  margin-top: 10px;
  font-size: 13.5px !important;
  line-height: 1.66 !important;
  color: var(--bb-ink-2) !important;
}

.bb-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.bb-card-read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mi-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mi-orange);
}

.bb-card-read svg { transition: transform 0.25s var(--mi-ease); }
.bb-card:hover .bb-card-read svg { transform: translateX(4px); }

/* --- Sonuç yok ---------------------------------------------------------- */
.bb-empty {
  padding: clamp(40px, 6vw, 72px) 24px;
  border: 1px dashed var(--bb-line);
  border-radius: var(--mi-r-card);
  text-align: center;
}

.bb-empty p { font-size: 14px !important; color: var(--bb-ink-2) !important; }

/* --- Giriş hareketi : ince, tek seferlik -------------------------------- */
.bb-enter {
  opacity: 0;
  transform: translateY(10px);
}

@media (prefers-reduced-motion: no-preference) {
  .bb-enter { transition: opacity 0.5s var(--mi-ease), transform 0.5s var(--mi-ease); }
}

.bb-enter.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bb-enter { opacity: 1; transform: none; }
  .bb-featured-media img,
  .bb-card-media img,
  .bb-arrow-link svg,
  .bb-card-read svg { transition: none !important; }
  .bb-featured-media:hover img,
  .bb-card:hover .bb-card-media img { transform: none; }
}

/* ==========================================================================
   5. YAZI SAYFASI : uzun metin şablonu
   ========================================================================== */

.bb-article-head {
  padding-block: clamp(28px, 4vw, 48px) clamp(26px, 3.4vw, 40px);
  border-bottom: 1px solid var(--bb-line-soft);
  text-align: center;
}

.bb-article-head h1 {
  max-width: 24ch;
  margin: 20px auto 0;
  font-size: clamp(28px, 3.7vw, 46px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.032em !important;
}

.bb-lede {
  max-width: 62ch;
  margin: 22px auto 0;
  font-size: clamp(16px, 1.3vw, 18px) !important;
  line-height: 1.66 !important;
  font-weight: 300 !important;
  color: var(--bb-ink-2) !important;
}

.bb-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--bb-line-soft);
}

.bb-cover {
  margin-block: clamp(28px, 3.6vw, 48px);
  border: 1px solid var(--bb-line);
  border-radius: var(--mi-r-card);
  overflow: hidden;
  background: #fff;
}

.bb-cover img { display: block; width: 100%; height: auto; }

/* Yazı başındaki kapak görseli tam genişlikte çok baskındı. Metin sütunuyla
   aynı ölçüye çekilir, ortalanmış başlıkla aynı eksende durur. */
.bb-article-head + .bb-cover {
  max-width: var(--bb-read);
  margin-inline: auto;
}

.bb-cover figcaption {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid var(--bb-line-soft);
  font-family: var(--mi-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bb-ink-3) !important;
}

/* --- Gövde ızgarası : metin + yapışkan içindekiler ---------------------- */
.bb-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

@media (min-width: 1060px) {
  .bb-article-grid { grid-template-columns: minmax(0, 1fr) 244px; }
  .bb-toc-wrap { order: 2; }
  .bb-prose    { order: 1; }
}

/* --- Uzun metin tipografisi --------------------------------------------- */
.bb-prose { max-width: var(--bb-read); }

.bb-prose > p {
  margin-block: 0 22px;
  font-size: 17px !important;
  line-height: 1.82 !important;
  font-weight: 300 !important;
  color: var(--bb-ink-1) !important;
}

.bb-prose h2 {
  margin-block: clamp(44px, 4.4vw, 64px) 18px;
  padding-top: 22px;
  border-top: 1px solid var(--bb-line-soft);
  font-size: clamp(21px, 2vw, 27px) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.028em !important;
}

.bb-prose h3 {
  margin-block: 34px 14px;
  font-size: 18px !important;
  line-height: 1.34 !important;
  font-weight: 600 !important;
}

.bb-prose strong {
  font-weight: 600 !important;
  color: var(--bb-ink-1) !important;
}

.bb-prose a {
  color: var(--mi-orange);
  text-decoration: none;
  background-image: var(--mi-grad);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.3s var(--mi-ease);
}

.bb-prose a:hover { background-size: 100% 1px; }

.bb-prose ul { margin-block: 0 22px; padding-left: 0; list-style: none; }

.bb-prose li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 22px;
  font-size: 16px !important;
  line-height: 1.76 !important;
  color: var(--bb-ink-1) !important;
}

.bb-prose li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 12px;
  width: 5px;
  height: 5px;
  background: var(--mi-grad);
}

/* --- Öne çıkan cümle ---------------------------------------------------- */
.bb-pull {
  margin-block: clamp(32px, 3.6vw, 46px);
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 34px);
  border-left: 2px solid var(--mi-orange);
  background: rgba(0, 0, 0, 0.025);
}

.bb-pull p {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 20px) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em;
  color: var(--bb-ink-1) !important;
}

/* ==========================================================================
   6. İÇİNDEKİLER : baskın olmayan, yapışkan
   ========================================================================== */

.bb-toc {
  border: 1px solid var(--bb-line-soft);
  border-radius: var(--mi-r-sharp);
  padding: 20px;
  background: #fff;
}

@media (min-width: 1060px) {
  .bb-toc { position: sticky; top: 118px; max-height: calc(100vh - 150px); overflow-y: auto; }
}

.bb-toc-title {
  font-family: var(--mi-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-ink-3) !important;
  margin-bottom: 14px;
}

.bb-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: bbtoc; }

.bb-toc li { margin: 0; padding: 0; }

.bb-toc a {
  display: block;
  padding: 7px 0 7px 12px;
  border-left: 1px solid var(--bb-line);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--bb-ink-2);
  text-decoration: none;
  transition: color 0.22s var(--mi-ease), border-color 0.22s var(--mi-ease);
}

.bb-toc a:hover { color: var(--mi-orange); border-color: var(--mi-orange); }

.bb-toc a.is-active {
  color: var(--mi-orange);
  border-left-color: var(--mi-orange);
  font-weight: 500;
}

/* Mobilde açılır kutu, gövdenin üstünde */
.bb-toc-mobile { margin-bottom: 30px; }
.bb-toc-mobile summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--bb-line);
  border-radius: var(--mi-r-sharp);
  font-family: var(--mi-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-ink-1);
}

.bb-toc-mobile summary::-webkit-details-marker { display: none; }
.bb-toc-mobile summary svg { transition: transform 0.25s var(--mi-ease); }
.bb-toc-mobile[open] summary svg { transform: rotate(180deg); }
.bb-toc-mobile .bb-toc { border-top: 0; border-radius: 0 0 var(--mi-r-sharp) var(--mi-r-sharp); }

@media (min-width: 1060px) { .bb-toc-mobile { display: none; } }
@media (max-width: 1059px) { .bb-toc-wrap { display: none; } }

/* ==========================================================================
   7. İLGİLİ YAZILAR ve PARTNER ÇAĞRISI
   ========================================================================== */

.bb-related {
  padding-block: clamp(40px, 5vw, 68px);
  border-top: 1px solid var(--bb-line-soft);
}

.bb-related h2 {
  margin-top: 16px;
  margin-bottom: 28px;
  font-size: clamp(20px, 2vw, 26px) !important;
  letter-spacing: -0.028em !important;
}

.bb-cta {
  /* Alt boşluk: panelin çerçevesi footer'a veya sonraki bölüme değmesin */
  margin-block: clamp(44px, 5vw, 68px) clamp(56px, 6vw, 88px);
  padding: clamp(30px, 4vw, 56px);
  border: 1px solid var(--bb-line);
  border-radius: var(--mi-r-panel);
  background: #fff;
}

.bb-cta h2 {
  margin-block: 18px 0;
  max-width: 20ch;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.03em !important;
}

.bb-cta p {
  max-width: 68ch;
  margin-top: 18px;
  font-size: 15px !important;
  line-height: 1.76 !important;
  color: var(--bb-ink-2) !important;
}

.bb-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.bb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--mi-r-sharp);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.25s var(--mi-ease), color 0.25s var(--mi-ease),
              border-color 0.25s var(--mi-ease);
}

.bb-btn svg { transition: transform 0.25s var(--mi-ease); }
.bb-btn:hover svg { transform: translateX(4px); }

.bb-btn--primary {
  background: var(--mi-grad);
  border: 1px solid var(--mi-orange);
  color: #fff;
}

.bb-btn--primary:hover { background: var(--mi-grad-hover); border-color: var(--mi-orange-hover); }

.bb-btn--ghost {
  background: transparent;
  border: 1px solid var(--bb-line-strong, rgba(0, 0, 0, 0.2));
  color: var(--bb-ink-1);
}

.bb-btn--ghost:hover { border-color: var(--mi-orange); color: var(--mi-orange); }

/* Sayfanın son bölümü ile footer arasında nefes payı */
.bb > *:last-child {
  margin-bottom: clamp(40px, 4vw, 64px);
}

/* --- Kırıntı yolu -------------------------------------------------------- */
.bb-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 18px;
  font-family: var(--mi-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bb-ink-3);
}

.bb-crumbs a { color: var(--bb-ink-2); text-decoration: none; transition: color 0.2s var(--mi-ease); }
.bb-crumbs a:hover { color: var(--mi-orange); }
.bb-crumbs span[aria-current] { color: var(--bb-ink-1); }

/* --- Odak görünürlüğü ---------------------------------------------------- */
.bb a:focus-visible,
.bb button:focus-visible,
.bb input:focus-visible,
.bb summary:focus-visible {
  outline: 2px solid var(--mi-orange);
  outline-offset: 3px;
}