/* ==========================================================================
   Bursa Özel Direksiyon Eğitimi — rehber.css
   Rehber (makale) sayfalarına özel katman. site.css'ten SONRA yüklenir;
   token'ları, temel kuralları, başlık/alt bilgi bileşenlerini oradan devralır.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Yerleşim
   -------------------------------------------------------------------------- */

/* Rehber ölçüsü anasayfadan dar — okuma satırı 760px'te tutuluyor. */
.wrap--article { max-width: 1120px; }

.post { padding-top: 56px; }

.post__body {
  display: grid;
  grid-template-columns: minmax(0, 760px) 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 44px;
}

.post__main { min-width: 0; }

.post__section { margin-bottom: 48px; }
.post__section--tight { margin-bottom: 44px; }
.post__section:last-child { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   2. Sayfa yolu (breadcrumb)
   -------------------------------------------------------------------------- */

.crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted2);
  margin-bottom: 30px;
}

.crumb__current { color: var(--text); }

/* --------------------------------------------------------------------------
   3. Makale başlığı
   -------------------------------------------------------------------------- */

.post__head { max-width: 760px; }

.post__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 20px;
}

.post__title {
  font-family: Newsreader, Georgia, serif;
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.05;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin-bottom: 24px;
}

.post__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
  margin-bottom: 26px;
}

.post__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted2);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.post__meta strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   4. Metin
   -------------------------------------------------------------------------- */

.post__h2 {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.15;
  margin-bottom: 20px;
}

.post__h2--spaced { margin-bottom: 24px; }

.post__p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 18px;
}

.post__p:last-child { margin-bottom: 0; }
.post__p--lead-out { margin-bottom: 28px; }
.post__p--tight { margin-bottom: 22px; }
.post__p--list-in { margin-bottom: 20px; }
.post__p strong { color: var(--text); font-weight: 700; }

/* --------------------------------------------------------------------------
   5. İçindekiler
   -------------------------------------------------------------------------- */

.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 30px;
  margin-bottom: 44px;
}

.toc__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 16px;
}

.toc__list {
  display: grid;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 600;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. Puanlama şiddeti satırları
   -------------------------------------------------------------------------- */

.sev { display: grid; gap: 12px; }

.sev__row {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
}

.sev__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
}

.sev__dot--red { background: #C81E1E; }
.sev__dot--yellow { background: #E0A016; }
.sev__dot--blue { background: #0B4FA0; }

.sev__text { font-size: 15.5px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   7. Doğrudan başarısızlık kartları
   -------------------------------------------------------------------------- */

.fails { display: grid; gap: 16px; }

.fail {
  border-left: 3px solid #C81E1E;
  padding: 4px 0 4px 22px;
}

.fail__title { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.fail__text { font-size: 16px; line-height: 1.65; color: var(--muted); }

/* --------------------------------------------------------------------------
   8. Puan kaybettiren hatalar (sade başlık + metin)
   -------------------------------------------------------------------------- */

.notes { display: grid; gap: 20px; }
.note__title { font-size: 18.5px; font-weight: 700; margin-bottom: 7px; }
.note__text { font-size: 16px; line-height: 1.65; color: var(--muted); }

/* --------------------------------------------------------------------------
   9. Onay işaretli liste (açık zeminde)
   -------------------------------------------------------------------------- */

.tips {
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tips--tight { gap: 12px; }

.tip {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.tip svg { flex: none; margin-top: 4px; }

.tip span {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}

.tip strong { color: var(--text); font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Vurgu kutusu
   -------------------------------------------------------------------------- */

.callout {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 22px 26px;
}

.callout p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   11. Karşılaştırma tablosu
   -------------------------------------------------------------------------- */

.cmp {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.cmp__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.cmp__row--head {
  background: var(--ink);
  color: var(--on-ink);
  border-top: 0;
}

.cmp__row > * { padding: 16px 20px; }

.cmp__row--head > * {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cmp__key { font-size: 15px; font-weight: 700; }
.cmp__val { font-size: 15px; color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Kademeli program adımları
   -------------------------------------------------------------------------- */

.prog {
  display: grid;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.prog__item {
  background: var(--surface);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.prog__num {
  font-family: Newsreader, Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--accent-text);
  line-height: 1;
}

.prog__title { font-size: 18.5px; font-weight: 700; margin-bottom: 8px; }
.prog__text { font-size: 16px; line-height: 1.65; color: var(--muted); }

/* --------------------------------------------------------------------------
   13. Koyu çağrı kutusu
   -------------------------------------------------------------------------- */

.cta-box {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 22px;
  padding: 40px 38px;
  margin-bottom: 48px;
}

.cta-box__title {
  font-family: Newsreader, Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.cta-box__text {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--on-ink-muted);
  margin-bottom: 26px;
  max-width: 52ch;
}

.cta-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-box__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  background: var(--accent-solid);
  color: #fff;
  transition: filter .2s ease;
}

.cta-box__btn:hover { filter: brightness(1.1); color: #fff; }

.cta-box__btn--ghost {
  background: none;
  color: inherit;
  border: 1.5px solid var(--on-ink-line3);
  padding: 14px 24px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cta-box__btn--ghost:hover {
  filter: none;
  background: var(--on-ink);
  color: #1A1A1A;
  border-color: var(--on-ink);
}

/* --------------------------------------------------------------------------
   14. S.S.S. — açık zemin çeşitlemesi
   site.css'teki .faq koyu bölüm için yazılmış; renkleri burada çeviriyoruz.
   -------------------------------------------------------------------------- */

.faq--light { border-top-color: var(--line); }
.faq--light .faq__item { border-bottom-color: var(--line); }
.faq--light .faq__head { padding: 22px 0; }
.faq--light .faq__head > span:first-child { font-size: 17.5px; }
.faq--light .faq__icon { width: 28px; height: 28px; border-color: var(--line); }
.faq--light .faq__body p { color: var(--muted); padding-bottom: 24px; }

.faq--light .faq__head[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
  background: var(--accent-solid);
  border-color: var(--accent-text);
  color: #fff;
}

/* --------------------------------------------------------------------------
   15. Yan sütun
   -------------------------------------------------------------------------- */

.side {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 16px;
}

.side__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
}

.side__card--band { background: var(--bg2); }

.side__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 16px;
}

.side__links { display: grid; gap: 16px; }
.side__links a { font-size: 15.5px; font-weight: 700; line-height: 1.4; }

.side__title { font-size: 15px; font-weight: 800; margin-bottom: 8px; }

.side__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 16px;
}

.side__cta {
  display: block;
  text-align: center;
  background: var(--ink);
  color: #fff;
  padding: 13px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 700;
  transition: background .2s ease;
}

.side__cta:hover { background: var(--accent-solid); color: #fff; }

/* --------------------------------------------------------------------------
   16. Rehber alt bilgisi — anasayfadakinin sade sürümü
   -------------------------------------------------------------------------- */

.footer--slim {
  margin-top: 80px;
  padding-top: 60px;
  padding-bottom: 30px;
}

.footer__top--slim {
  display: flex;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  padding-bottom: 34px;
}

.footer__top--slim > div { max-width: 34ch; }

.footer__name--slim {
  font-family: Newsreader, Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--on-ink);
  margin-bottom: 12px;
}

.footer__bottom--slim { padding-top: 22px; }

/* --------------------------------------------------------------------------
   17. Duyarlı — site.css'teki kırılımların ardından gelmeli
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .post__body { grid-template-columns: minmax(0, 1fr); }

  .side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .post__body { grid-template-columns: minmax(0, 1fr); }
  .side { grid-template-columns: minmax(0, 1fr); }
  .cta-box { padding: 32px 26px; }
  .cta-box__title { font-size: 26px; }
}

@media (max-width: 620px) {
  .cmp__row > * { padding: 13px 11px; font-size: 13.5px; }
  .cmp__key, .cmp__val { font-size: 13.5px; }

  .prog__item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 20px;
  }

  .prog__num { font-size: 26px; }
  .toc { padding: 22px 20px; }
}

@media (max-width: 560px) {
  .post { padding-top: 40px; }
  .fail { padding-left: 18px; }
}

/* --------------------------------------------------------------------------
   Koyu zeminli kutularda metin rengi devralınmalı

   .post__p rengini `var(--muted)` olarak sabitliyor. Koyu .cta-box içine
   girdiğinde bu koyu zeminde koyu yazı demek oluyordu — ölçülen kontrast
   2.18:1, okunamaz. Kutu kendi renk ölçeğini dayatıyor.
   -------------------------------------------------------------------------- */

.cta-box .post__p,
.cta-box p {
  color: var(--on-ink-muted);
}

.cta-box .post__p strong,
.cta-box strong {
  color: var(--on-ink);
}