/* ============================================
   İÇ SAYFA BAŞLIK BİLEŞENLERİ
   Inner Page Heading Components
   ============================================ */

/* ==========================================
   0. SECTION CARD WRAPPER
   Her section için otomatik kart görünümü
   ========================================== */

.section-card {
  background: transparent;
  border: none;
  margin-bottom: var(--space-8);
  overflow: visible;
}

/* Section Card Body - İçerik alanı (border burada) */
.section-card-body {
  padding: var(--space-6);
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 0 0 1rem 1rem;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-soft);
}

.section-card:hover .section-card-body {
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

/* Section içindeki ilk heading - üst köşeler rounded */
.section-card .component-heading {
  margin-bottom: 0;
  border-radius: 1rem 1rem 0 0;
}

/* Section card içindeki diğer componentler için padding ayarı */
.section-card-body > *:first-child {
  margin-top: 0;
}

.section-card-body > *:last-child {
  margin-bottom: 0;
}

/* ==========================================
   Bölüm Yerleşimi (section.layout)
   column (varsayılan) · row · grid-2 · grid-3 · cell
   ========================================== */
.section-card-body.layout-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.section-card-body.layout-row > * {
  flex: 1 1 280px;
  width: auto;
}

.section-card-body.layout-grid-2,
.section-card-body.layout-grid-3 {
  display: grid;
  gap: var(--space-6);
}

.section-card-body.layout-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.section-card-body.layout-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.section-card-body.layout-cell {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (max-width: 768px) {
  .section-card-body.layout-grid-2,
  .section-card-body.layout-grid-3,
  .section-card-body.layout-row {
    display: block;
  }

  .section-card-body.layout-grid-2 > *,
  .section-card-body.layout-grid-3 > * {
    margin-bottom: var(--space-6);
  }
}

/* ==========================================
   1. BAŞLIK BİLEŞENLERİ (Heading Components)
   ========================================== */

/* Base Heading Styles */
.component-heading {
  margin-bottom: var(--space-6);
  position: relative;
}

/* 1.1 Tek Satır - İkonlu (Primary Color) - Kompakt Versiyon */
.component-heading.single-icon {
  background: var(--primary-color);
  color: white;
  padding: 0.65rem var(--space-4);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: 1rem 1rem 0 0;
}

.component-heading.single-icon h2,
.component-heading.single-icon h3 {
  color: white;
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-7);
  flex: 1;
}

.component-heading.single-icon i,
.component-heading.single-icon .component-icon-char {
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
  min-width: 35px;
  text-align: center;
}

/* İkon alanı bir CSS sınıfı yerine doğrudan bir im (emoji) taşıyabilir;
   bu durumda <i> yerine .component-icon-char basılır. Ölçüsü ikonla aynı
   kalmalı ki başlıklar aynı görünsün. */
.component-icon-char {
  display: inline-block;
  line-height: 1;
  font-style: normal;
}

/* 1.1b YUMUSAK bant — tablo basligi gorunumu (2026-09-25).
   Dolu lacivert bant her bolumun ustunde tekrarlaninca sayfa agir
   gorunuyordu; kullanici "soft tablo basligi gibi" bir secenek
   istedi. Acik zemin + koyu yazi + alt cizgi: ayni hiyerarsiyi
   kuruyor ama one cikmiyor.
   Renkler DEGISKENDEN geliyor; editor bgColor/textColor verirse
   inline stil bunlari ezer. */
.component-heading.soft-icon,
.component-heading.soft-plain {
  background: var(--surface-alt, #f1f5f9);
  color: var(--primary-color);
  padding: 0.6rem var(--space-4);
  font-weight: 600;
  border-bottom: 2px solid var(--border-color, #e2e8f0);
  border-radius: 1rem 1rem 0 0;
}

.component-heading.soft-icon {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.component-heading.soft-icon h2,
.component-heading.soft-plain h2 {
  color: inherit;
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-7);
  flex: 1;
}

.component-heading.soft-icon i,
.component-heading.soft-icon .component-icon-char {
  font-size: 1.35rem;
  color: inherit;
  flex-shrink: 0;
  min-width: 35px;
  text-align: center;
}

/* 1.2 Tek Satır - İkonsuz (Primary Color) - Kompakt Versiyon */
.component-heading.single-plain {
  background: var(--primary-color);
  color: white;
  padding: 0.65rem var(--space-4);
  font-weight: 600;
  border-radius: 1rem 1rem 0 0;
}

.component-heading.single-plain h2,
.component-heading.single-plain h3 {
  color: white;
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-7);
}

/* 1.3 Çift Satır - İkonlu */
.component-heading.double-icon {
  background: var(--primary-color);
  color: white;
  padding: var(--space-6);
  border-radius: 1rem 1rem 0 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: space-between;
}

.component-heading.double-icon .heading-icon {
  font-size: 2.5rem;
  color: white;
  min-width: 60px;
  text-align: center;
}

.component-heading.double-icon .heading-text {
  flex: 1;
}

.component-heading.double-icon .heading-text h3 {
  margin: 0;
  font-size: var(--fs-10);
  font-weight: 700;
  color: white;
}

.component-heading.double-icon .heading-text p {
  margin: var(--space-2) 0 0 0;
  opacity: 0.9;
  font-size: var(--fs-7);
  color: white;
}

/* Status badge inside heading */
.component-heading .component-status-badge {
  margin-left: auto;
}

/* 1.4 Çift Satır - İkonsuz (Primary Color - Gradyansız) */
.component-heading.double-plain {
  background: var(--primary-color);
  padding: var(--space-6);
  border-radius: 1rem 1rem 0 0;
}

.component-heading.double-plain h3 {
  margin: 0;
  font-size: var(--fs-10);
  font-weight: 700;
  color: white;
}

.component-heading.double-plain p {
  margin: var(--space-2) 0 0 0;
  color: white;
  opacity: 0.9;
  font-size: var(--fs-7);
}

/* Organizasyon Şeması için kompakt heading */
.organizasyon-page .section-card .component-heading.double-plain {
  padding: var(--space-4) var(--space-6);
  min-height: auto;
}

.organizasyon-page .section-card .component-heading.double-plain h3 {
  font-size: var(--fs-9);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.organizasyon-page .section-card .component-heading.double-plain p {
  font-size: var(--fs-6);
  margin: 0;
  line-height: 1.4;
}

/* Dark Theme Support for Headings - Artık gerek yok, hepsi primary color */


/* ==========================================
   2. ALERT BİLEŞENİ (Alert Component)
   ========================================== */

.component-alert {
  padding: var(--space-5);
  margin: var(--space-4) 0;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-left: 4px solid;
  position: relative;
}

.component-alert:hover {
  border-left-width: 8px;
  padding-left: calc(1.25rem - 4px); /* Border 4px büyüdü, padding'i 4px azalt */
}

.component-alert > i {
  font-size: 1.5rem;
  flex-shrink: 0;
  align-self: center;
}

/* Alert Variants */
.component-alert.default {
  background: var(--tertiary-color);
  border-left-color: var(--border-color);
}

.component-alert.default > i {
  color: var(--text-secondary-color);
}

.component-alert.info {
  background: var(--tertiary-color);
  border-left-color: var(--primary-color);
}

.component-alert.info > i {
  color: var(--primary-color);
}

.component-alert.warning {
  background: var(--tertiary-color);
  border-left-color: var(--accent-color);
}

.component-alert.warning > i {
  color: var(--accent-color);
}

.component-alert.success {
  background: #d1e7dd;
  border-left-color: #198754;
}

.component-alert.success > i {
  color: #198754;
}

.component-alert.danger {
  background: #f8d7da;
  border-left-color: #dc3545;
}

.component-alert.danger > i {
  color: #dc3545;
}

.component-alert.primary {
  background: var(--tertiary-color);
  border-left-color: var(--primary-color);
}

.component-alert.primary > i {
  color: var(--primary-color);
}

/* Alert Content */
.alert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.alert-content strong {
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.alert-content p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-color);
}

.alert-content ul {
  margin: var(--space-2) 0 0 0;
  padding-left: var(--space-5);
  list-style: disc;
}

.alert-content ul li {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

/* Alert Link */
.component-alert .alert-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem var(--space-5);
  background: white;
  color: var(--primary-color);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  margin-top: var(--space-3);
  transition: all 0.3s ease;
  border: 2px solid var(--primary-color);
  font-size: var(--fs-5);
  align-self: flex-start;
}

.component-alert .alert-link:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.25);
}

.component-alert .alert-link i {
  font-size: 1rem;
  color: var(--primary-color);
  transition: color 0.3s ease;
}

.component-alert .alert-link:hover i {
  color: white;
}

/* ==========================================
   3. ICON-LIST BİLEŞENİ (Icon List Component)
   ========================================== */

.component-icon-list {
  margin: var(--space-4) 0;
}

.component-icon-list .list-title {
  font-size: var(--fs-7);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.component-icon-list .list-title i {
  font-size: 1.1rem;
}

.component-icon-list .list-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* Rules variant - Tek sütun, daha geniş kartlar */
.component-icon-list.rules-variant .list-wrapper {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* contact-grid varyantının BÜTÜN kuralları tek yerde: "Icon List Grid Variant"
   başlığı altında (bu dosyanın ilerisinde). Burada ikinci bir tanım DURUYORDU;
   ikisi çelişiyordu (repeat(3,1fr) + dikey + ortalı ↔ auto-fit minmax(280px) +
   yatay + min-height) ve tarayıcı ikisini birleştirip kimsenin yazmadığı üçüncü
   bir düzen üretiyordu. Birleştirmede hesaplanan değerler birebir korundu.
   Bir varyantın kuralları ikiye bölünmesin — 2026-09-23. */

/* Rules Horizontal variant - Kurallar sayfası için yatay dikdörtgen kartlar */
.component-icon-list.rules-horizontal-variant .list-wrapper {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.component-icon-list.rules-horizontal-variant .list-item {
  flex-direction: row;
  align-items: flex-start;
  padding: var(--space-5);
  gap: var(--space-4);
}

.component-icon-list.rules-horizontal-variant .list-item i {
  font-size: 2rem;
  min-width: 45px;
  color: var(--primary-color);
}

.component-icon-list.rules-horizontal-variant .list-item span {
  flex: 1;
  text-align: left;
}

.component-icon-list.rules-horizontal-variant .list-item strong {
  font-size: var(--fs-7);
  color: var(--primary-color);
  display: block;
  margin-bottom: var(--space-2);
}

/* Responsive for rules-horizontal */
@media (max-width: 768px) {
  .component-icon-list.rules-horizontal-variant .list-item {
    padding: var(--space-4);
  }

  .component-icon-list.rules-horizontal-variant .list-item i {
    font-size: 1.75rem;
    min-width: 40px;
  }
}

/* Warning variant - Accent color ile vurgu */
.component-icon-list.warning-variant .list-title {
  color: var(--accent-color);
}

.component-icon-list.warning-variant .list-title i {
  color: var(--accent-color);
}

.component-icon-list.warning-variant .list-item {
  border-left: 3px solid var(--accent-color);
}

.component-icon-list.warning-variant .list-item:hover {
  border-color: var(--accent-color);
  box-shadow: var(--shadow-hover);
}

.component-icon-list.warning-variant .list-item i {
  color: var(--accent-color);
}

.component-icon-list .list-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
}

.component-icon-list .list-item:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

.component-icon-list .list-item i {
  color: var(--primary-color);
  font-size: 1.8rem;
  flex-shrink: 0;
  align-self: center;
  min-width: 30px;
  text-align: center;
}

.component-icon-list .list-item span {
  flex: 1;
  line-height: 1.6;
}

.component-icon-list .list-item strong {
  display: block;
  color: var(--primary-color);
  margin-bottom: var(--space-1);
  font-size: var(--fs-7);
}

/* Horizontal variant - Öğeleri yan yana göster (kompakt, ikon solda) */
.component-icon-list.horizontal-variant .list-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.component-icon-list.horizontal-variant .list-item {
  display: flex;
  flex-direction: row; /* Yatay düzen: ikon solda, text sağda */
  align-items: center;
  justify-content: flex-start;
  text-align: left; /* Sol hizalı */
  padding: var(--space-3);
  min-height: auto; /* Otomatik yükseklik */
  gap: var(--space-3);
}

.component-icon-list.horizontal-variant .list-item i {
  font-size: 1.5rem;
  margin-bottom: 0; /* Margin kaldır, gap kullanıyoruz */
  flex-shrink: 0; /* İkon küçülmesin */
}

.component-icon-list.horizontal-variant .list-item span {
  font-size: var(--fs-4);
  line-height: 1.4;
  flex: 1; /* Text tüm alanı kaplasın */
}

/* Mobile için tek kolon */
@media (max-width: 768px) {
  .component-icon-list.horizontal-variant .list-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   3B. ICON-LIST GRID BİLEŞENİ (Icon List Grid Component)
   Yan yana icon-list gösterimi
   ========================================== */

.component-icon-list-grid {
  display: grid;
  margin: var(--space-6) 0;
}

/* ==========================================
   3C. RESOURCE LINKS BİLEŞENİ (Resource Links Component)
   Kaynak bağlantısı kartları
   ========================================== */

.component-resource-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.component-resource-link {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.component-resource-link:hover {
  border-color: var(--primary-color);
  color: var(--text-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.component-resource-link.disabled {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

.component-resource-link .resource-icon {
  font-size: 2rem;
  color: var(--primary-color);
  min-width: 50px;
  text-align: center;
}

.component-resource-link .resource-content h6 {
  color: var(--primary-color);
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: var(--fs-7);
}

.component-resource-link .resource-content p {
  color: var(--text-muted);
  margin: 0;
  font-size: var(--fs-5);
  line-height: 1.4;
}

.component-resource-link .resource-content small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-4-koru);
}

/* ==========================================
   3D. TAG LIST BİLEŞENİ (Tag List Component)
   Etiket/rozet rozeti (free, discount, vb.)
   ========================================== */

.component-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.component-tag {
  padding: 0.4rem var(--space-3);
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--fs-3-koru);
  color: white;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  background: var(--primary-color);
}

.component-tag.tag-success {
  background: #198754;
}

.component-tag.tag-info {
  background: #0dcaf0;
  color: #000;
}

.component-tag.tag-warning {
  background: #ffc107;
  color: #000;
}

.component-tag.tag-danger {
  background: #dc3545;
}

.component-tag.tag-discount {
  background: var(--primary-color);
}

.component-numbered-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.component-numbered-list .numbered-item {
  background: var(--tertiary-color);
  padding: var(--space-5);
  border-radius: var(--border-radius);
  border-left: 4px solid var(--primary-color);
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.component-numbered-list .numbered-item:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-soft);
}

.component-numbered-list .numbered-badge {
  background: var(--primary-color);
  color: white;
  min-width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--fs-5-koru);
  flex-shrink: 0;
  margin-top: 2px;
}

.component-numbered-list .numbered-content {
  flex: 1;
}

.component-numbered-list .numbered-title {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--space-2);
  font-size: var(--fs-7);
}

.component-numbered-list .numbered-description {
  color: var(--text-muted);
  margin: 0;
  font-size: var(--fs-6);
  line-height: 1.5;
}

/* Grid sütun sayıları */
.component-icon-list-grid.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.component-icon-list-grid.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.component-icon-list-grid.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Gap varyantları */
.component-icon-list-grid.gap-sm {
  gap: var(--space-4);
}

.component-icon-list-grid.gap-md {
  gap: var(--space-6);
}

.component-icon-list-grid.gap-lg {
  gap: var(--space-8);
}

/* Grid kolonları */
.component-icon-list-grid .grid-column {
  display: flex;
  flex-direction: column;
}

/* İçteki icon-list'lerin marjinini sıfırla */
.component-icon-list-grid .component-icon-list {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-5);
  transition: all 0.3s ease;
}

.component-icon-list-grid .component-icon-list:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

/* Title stilleri grid içinde */
.component-icon-list-grid .component-icon-list .list-title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--border-color);
}

/* Wrapper flex-grow ile tüm alanı kaplasın */
.component-icon-list-grid .component-icon-list .list-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: flex-start; /* İtemler üstten başlasın */
}

/* Grid içindeki list item'lar - eşit yükseklik için */
.component-icon-list-grid .component-icon-list .list-item {
  flex: 0 0 auto; /* Sabit yükseklik */
}

/* Varyantlar: Primary & Tertiary (Site renk paletine uygun) */
.component-icon-list-grid .component-icon-list.positive-variant {
  border-color: var(--primary-color);
}

.component-icon-list-grid .component-icon-list.positive-variant:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
}

.component-icon-list-grid .component-icon-list.positive-variant .list-title {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  opacity: 0.9;
}

.component-icon-list-grid .component-icon-list.positive-variant .list-title i {
  color: var(--primary-color);
}

.component-icon-list-grid .component-icon-list.negative-variant {
  border-color: var(--tertiary-color);
}

.component-icon-list-grid .component-icon-list.negative-variant:hover {
  border-color: var(--tertiary-color);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
}

.component-icon-list-grid .component-icon-list.negative-variant .list-title {
  color: var(--text-primary);
  border-bottom-color: var(--tertiary-color);
}

.component-icon-list-grid .component-icon-list.negative-variant .list-title i {
  color: var(--tertiary-color);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .component-icon-list-grid.grid-cols-2,
  .component-icon-list-grid.grid-cols-3,
  .component-icon-list-grid.grid-cols-4 {
    grid-template-columns: 1fr;
  }

  .component-icon-list-grid.gap-md,
  .component-icon-list-grid.gap-lg {
    gap: var(--space-4);
  }
}

/* Tablet için 2 kolon */
@media (min-width: 769px) and (max-width: 1024px) {
  .component-icon-list-grid.grid-cols-3,
  .component-icon-list-grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Dark mode */
[data-theme="dark"] .component-icon-list-grid .component-icon-list {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .component-icon-list-grid .component-icon-list:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

/* ==========================================
   4. STEP-CARDS BİLEŞENİ (Step Cards Component)
   ========================================== */

.component-step-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.component-step-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all 0.3s ease;
}

.component-step-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-soft);
}

.component-step-card .step-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

.component-step-card .step-header:hover {
  background: var(--tertiary-color);
}

.component-step-card .step-number {
  width: 40px;
  height: 40px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-9);
  font-weight: 700;
  flex-shrink: 0;
}

.component-step-card .step-title {
  flex: 1;
  font-size: var(--fs-8);
  font-weight: 600;
  color: var(--primary-color);
}

.component-step-card .step-toggle {
  font-size: var(--fs-9);
  color: var(--primary-color);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.component-step-card.open .step-toggle {
  transform: rotate(180deg);
}

.component-step-card .step-content {
  padding: 0 var(--space-5);
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.component-step-card.open .step-content {
  padding: var(--space-5);
  max-height: 500px;
}

.component-step-card .step-content p {
  margin: 0;
  line-height: 1.6;
}

.component-step-card .step-content .external-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.component-step-card .step-content .external-link:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

.component-step-card .step-content .external-link i {
  font-size: 0.85rem;
  margin-right: var(--space-1);
}

/* ==========================================
   5. INFO-BOX BİLEŞENİ (Info Box Component)
   ========================================== */

.component-info-box {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-5);
  margin: var(--space-4) 0;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.component-info-box:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

.component-info-box .info-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-7);
  font-weight: 600;
  color: var(--primary-color);
  margin: 0;
}

.component-info-box .info-title i {
  font-size: 1.8rem;
  color: var(--primary-color);
  flex-shrink: 0;
  min-width: 30px;
  text-align: center;
}

.component-info-box .info-content {
  flex: 1;
}

.component-info-box .info-content p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-color);
}

.component-info-box .info-content strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* Info-Box Variants - Artık kullanılmıyor, tüm info-box'lar aynı */

/* ==========================================
   5. TABLO BİLEŞENİ (Table Component)
   ========================================== */

.component-table-container {
  margin: var(--space-4) 0;
}

.component-table-container .table-title {
  font-size: var(--fs-7);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
}

.component-table-container .table-responsive {
  overflow-x: auto;
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
}

.component-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  margin: 0;
}

.component-table thead {
  background: var(--primary-color);
  color: white;
}

.component-table thead tr th {
  padding: var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-6);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.component-table tbody tr {
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--border-color);
}

.component-table tbody tr:last-child {
  border-bottom: none;
}

.component-table tbody tr:hover {
  background: var(--tertiary-color);
}

.component-table tbody tr td {
  padding: var(--space-4);
  font-size: var(--fs-6);
  color: var(--text-color);
  vertical-align: middle;
}

/* Hücre yazısı Utils.mdToHtml ile <p>'ye sarılıyor; paragrafın alt boşluğu (16 px)
   yazıyı yukarı itiyor, ilk hücrede ikon ortada kalıp kayık görünüyordu (2026-10-01,
   kullanıcı bildirdi; ölçüldü: 8 px masaüstü, 27 px'e kadar mobil). Yalnız SON
   paragraf: hücrede birden çok paragraf varsa aralarındaki boşluk korunur. */
.component-table tbody tr td > p:last-child {
  margin-bottom: 0;
}

.component-table tbody tr td:first-child {
  font-weight: 600;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Yazı Boyutu ayarını izler: sabit 1.3rem iken hücre yazısı %85-%125
   arasında 12,9-19 px oynuyor, ikon 20,8 px'te kalıyordu (ölçüldü). */
.component-table tbody tr td i {
  font-size: calc(1.3rem * var(--carpan-serbest));
  color: var(--primary-color);
  flex-shrink: 0;
}

.component-table tbody tr td.highlight {
  background: var(--tertiary-color);
  font-weight: 600;
  color: var(--primary-color);
}

/* ==========================================
   6. AYIRICI BİLEŞENİ (Divider Component)
   ========================================== */

.component-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-6) 0;
  opacity: 0.5;
}

.component-divider.thick {
  height: 2px;
  opacity: 0.7;
}

.component-divider.dashed {
  height: 0;
  border-top: 2px dashed var(--border-color);
  opacity: 0.5;
}

/* ==========================================
   7. RESPONSIVE DESIGN
   ========================================== */

/* Heading Responsive */
@media (max-width: 768px) {
  .component-heading.double-icon {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }

  .component-heading.single-icon,
  .component-heading.single-plain {
    padding: 0.6rem 0.85rem;
  }

  .component-heading.single-icon h2,
  .component-heading.single-icon h3,
  .component-heading.single-plain h2,
  .component-heading.single-plain h3 {
    font-size: var(--fs-7);
  }

  .component-heading.single-icon i {
    font-size: 1.3rem;
    min-width: 30px;
  }

  /* Icon-List Responsive */
  .component-icon-list .list-wrapper {
    grid-template-columns: 1fr;
  }

  /* Step-Cards Responsive */
  .component-step-card .step-header {
    padding: var(--space-4);
  }

  .component-step-card.open .step-content {
    padding: var(--space-4);
  }

  /* Info-Box Responsive */
  .component-info-box {
    padding: var(--space-5);
  }

  /* Table Responsive */
  .component-table thead tr th,
  .component-table tbody tr td {
    padding: var(--space-3);
    font-size: var(--fs-5);
  }
}

@media (max-width: 576px) {
  .component-heading.double-icon .heading-icon {
    font-size: 2rem;
  }

  .component-heading.double-icon .heading-text h3 {
    font-size: var(--fs-9);
  }

  /* Alert Responsive */
  .component-alert {
    padding: var(--space-4);
  }

  /* Icon-List Responsive */
  .component-icon-list .list-item {
    padding: var(--space-3);
  }

  /* Search Box Responsive */
  .search-section {
    max-width: 95%;
  }

  /* Department Cards Responsive */
  .contact-info {
    flex-direction: column;
    gap: var(--space-3);
  }

  .contact-item, .btn-contact {
    width: 100%;
    justify-content: center;
  }

  .card-body-custom {
    padding: var(--space-4);
  }
}

/* ==========================================
   8. ARAMA KUTUSU BİLEŞENİ (Search Box Component)
   ========================================== */

.search-section {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: var(--space-4);
  /* Hero ile arasındaki boşluğun TEK otoritesi Genel Ayarlar > Hero >
     "İçerikle Arasındaki Boşluk" (contentGap). Burada -3rem vardı; ayarın
     üstüne binip arama kutulu sayfaları hero kutusuna yapıştırıyordu. */
  margin-top: 0;
  margin-bottom: var(--space-8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.search-wrapper {
  width: 100%;
  flex: 1;
  min-width: 0;
}

.search-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  height: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-input-group:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(31, 76, 138, 0.1);
  outline: none;
}

.search-icon {
  color: var(--text-muted);
  font-size: 1rem;
  margin-left: 12px;
  pointer-events: none;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 12px;
  font-size: var(--fs-7);
  background: transparent;
  color: var(--text-color);
  height: 100%;
}

.search-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.clear-search-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
   background:  var(--primary-color);
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.clear-search-btn:hover {
  background:  var(--primary-color);
  opacity: 0.8;
}

.clear-search-btn i {
  font-size: 0.75rem;
}

/* ==========================================
   9. İLETİŞİM/TELEFON BUTONLARI (Contact Buttons)
   Hemen Ara butonu stili - global kullanım için
   ========================================== */

.btn-contact {
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-5);

  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(31, 76, 138, 0.1);
  text-decoration: none;
}

.btn-contact i {
  font-size: 1.1rem;
  color: var(--primary-color);
  transition: color 0.3s ease;
}

.btn-contact:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.25);
  text-decoration: none;
}

.btn-contact:hover i {
  color: white;
}


.contact-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.contact-item {
  background: transparent;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 2px solid var(--primary-color);
  font-size: var(--fs-5);
}

.contact-item:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.25);
}

.contact-icon {
  font-size: 1.1rem;
}

/* ==========================================
   10. AKORDEON BİLEŞENİ (Accordion Component)
   Bootstrap accordion için global stiller
   ========================================== */

/* Accordion Category Header - Kategori başlıkları için */
.category-header {
  background: var(--primary-color);
  color: white;
  padding: var(--space-3) var(--space-5);
  border-radius: 10px;
  margin-bottom: var(--space-4);
  text-align: left;
  font-size: var(--fs-8);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-soft);
}

.category-header i {
  color: white;
  font-size: 1.4rem;
}

.category-header h3 {
  color: white;
  margin: 0;
  font-size: var(--fs-8);
}

/* Accordion Items */
.accordion-item {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius) !important;
  margin-bottom: var(--space-3);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
  background: var(--bg-card);
}

.accordion-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Accordion Buttons */
.accordion-button {
  background: var(--bg-card);
  border: none;
  padding: var(--space-5) var(--space-6);
  font-weight: 600;
  color: var(--primary-color);
  font-size: var(--fs-7);
  transition: all 0.3s ease;
  border-radius: var(--border-radius) !important;
}

.accordion-button:not(.collapsed) {
  background: var(--tertiary-color);
  color: var(--primary-dark);
  box-shadow: none;
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(31, 76, 138, 0.25);
  border-color: var(--primary-color);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23153a6d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  flex-shrink: 0;
}

/* Accordion Body */
.accordion-body {
  padding: var(--space-6);
  background: var(--bg-card);
  border-top: 2px solid var(--primary-color);
}

/* FAQ Container */
.faq-container {
  max-width: 1200px;
  margin: 0 auto;
}

.faq-category {
  margin-bottom: var(--space-10);
}

/* Dark Theme Support for Accordion */
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: var(--tertiary-dark);
}

/* ==========================================
   15. STAFF LIST BİLEŞENİ (Staff List Component)
   Personel kartları - grid layout (Kompakt Versiyon)
   ========================================== */

.staff-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.staff-card {
  background: var(--tertiary-color);
  border-radius: var(--border-radius);
  padding: var(--space-4);
  border-left: 3px solid var(--primary-color);
  display: flex;
  gap: var(--space-3);
  transition: all 0.2s ease;
}

.staff-card:hover {
  box-shadow: var(--shadow-soft);
  border-left-width: 4px;
}

.staff-icon {
  flex-shrink: 0;
}

.staff-icon i {
  font-size: 2rem;
  color: var(--primary-color);
}

.staff-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.staff-name {
  font-size: var(--fs-7);
  font-weight: 600;
  color: var(--primary-dark);
  margin: 0;
  line-height: 1.3;
}

.staff-title {
  font-size: var(--fs-4);
  font-weight: 500;
  color: var(--primary-color);
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-color);
}

.staff-contact-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-3);
  color: var(--text-color);
  line-height: 1.4;
}

.staff-contact-item i {
  color: var(--primary-color);
  font-size: 0.85rem;
  width: 16px;
  flex-shrink: 0;
}

.staff-contact-item a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.staff-contact-item a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 992px) {
  .staff-list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .staff-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .staff-card {
    padding: 0.85rem;
  }

  .staff-icon i {
    font-size: 1.75rem;
  }

  .staff-name {
    font-size: var(--fs-6);
  }
}

/* Dark Theme Support for Staff List */
[data-theme="dark"] .staff-name {
  color: var(--primary-light);
}

[data-theme="dark"] .staff-card {
  background: var(--tertiary-dark);
}

[data-theme="dark"] .staff-contact-item,
[data-theme="dark"] .staff-contact-item a {
  color: var(--text-color);
}

/* ==========================================
   15b. PERSONEL LİSTESİ (staff-list varyantı: "list")

   Bölüm başlığının altında hizalı sütunlar: ad, ünvan, dahili, e-posta.
   Eski kdm sitesindeki liste düzeninin yeni tasarımdaki hâli.

   Yukarıdaki KARTLI görünüm yedek olarak duruyor; bu blok ona dokunmuyor.
   Renkler token'dan geliyor, karanlık temada kendiliğinden dönüyor.
   ========================================== */

/* Tablonun KENDI kutusu YOK: kartı `.section-card-body` sağlıyor
   (arka plan + 2px kenarlık + radius + gölge). Ölçüldü: tabloya ayrıca
   kenarlık/radius verilince iki sorun birden çıkıyordu — kart içinde kart
   görünüyor, ayrıca `border-collapse: collapse` yüzünden `border-radius`
   köşeleri hiç yuvarlamıyor (sessiz bir kusur). */
/* table-layout: fixed — her bölüm AYRI bir tablo; otomatik düzende sütun
   genişliği o tablonun içeriğinden hesaplanıyor, "1733" ile "1731-1705"
   farklı genişlik verip ünvan/dahili sütunlarını bölümden bölüme
   kaydırıyordu (2026-09-30, kullanıcı bildirdi). Sabit düzende genişlik
   aşağıdaki sütun kurallarından gelir, bütün bölümlerde aynıdır. */
.personel-liste {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: transparent;
}

.personel-liste th,
.personel-liste td {
  /* 44 px: e-posta ikonunun dokunma hedefi satıra sığsın. */
  height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--fs-5);
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid var(--border-color);
}

.personel-liste tbody tr:first-child th,
.personel-liste tbody tr:first-child td {
  border-top: 0;
}

.personel-liste tbody tr:nth-child(even) th,
.personel-liste tbody tr:nth-child(even) td {
  background: var(--tertiary-color);
}

.personel-liste .pl-ad {
  width: 38%;
  font-weight: var(--font-weight-semibold);
  color: var(--text-color);
}

/* Ünvan genişlik almaz: sabit sütunlardan artan yeri o doldurur. */
.personel-liste .pl-unvan {
  overflow-wrap: anywhere;
  font-size: var(--fs-4-koru);
  color: var(--text-muted);
}

.personel-liste .pl-tel {
  width: 7.5rem;
  font-size: var(--fs-4-koru);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.personel-liste .pl-tel i {
  margin-right: 0.4rem;
  color: var(--primary-color);
}

.personel-liste .pl-eposta {
  width: 44px;
  /* İç boşluk YOK: hücre 44 px ve border-box; ortak hücre boşluğu (2 x 12,8 px)
     kalınca 44 px'lik düğme hücreden ve tablonun sağ kenarından 12,8 px
     taşıyordu, ikon da hücre ortasından 12,8 px kayıktı (ölçüldü 2026-10-01,
     47 satırın 47'si). */
  padding: 0;
  text-align: center;
  white-space: nowrap;
}

.personel-liste.eposta-duz .pl-eposta {
  width: 17rem;
  /* Düz modda adres METİN: ortak hücre boşluğu ve sola hizalama geri gelir. */
  padding: 0 var(--space-4);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personel-liste .pl-yok {
  color: var(--text-muted);
  opacity: 0.55;
  text-align: center;
}

/* İkon modu (varsayılan): bağlantının görünür metni yok,
   adres title ve aria-label içinde. */
.personel-liste .pl-mail {
  /* Dokunma hedefi 44 x 44 px kalır; GÖRÜNEN vurgu içeride 32 px'lik kutudur
     (::before). Vurgu düğmenin tamamına verilince satırı (44,5 px) boydan boya
     kaplayıp çizgilere değiyordu. */
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition-fast);
}

.personel-liste .pl-mail::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: var(--transition-fast);
}

.personel-liste .pl-mail > * {
  position: relative;
}

.personel-liste .pl-mail:hover,
.personel-liste .pl-mail:focus-visible {
  color: var(--primary-dark);
}

.personel-liste .pl-mail:hover::before,
.personel-liste .pl-mail:focus-visible::before {
  background: var(--tertiary-dark);
}

/* Düz mod: adres metin olarak görünür, [at] biçimi korunur. */
.personel-liste .pl-mail-duz {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-4-koru);
  color: var(--primary-color);
  text-decoration: none;
}

.personel-liste .pl-mail-duz:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Kimsede ünvan, dahili ve e-posta yoksa tablo kurulmaz:
   adlar çok sütunlu ızgaraya girer. */
/* Kutusu yok, aynı sebeple: kartı `.section-card-body` sağlıyor. */
.personel-ad-izgara {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-1) var(--space-6);
}

.personel-ad-izgara li {
  padding: 0.35rem 0;
  font-size: var(--fs-5);
  font-weight: var(--font-weight-medium);
}

/* "Görünüm: Ad ızgarası" (staff-list data.gorunum = "adlar").
   Üç sütun; dar ekranda iki, telefonda bir. */
.personel-adlar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 var(--space-4);
}

.personel-adlar li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.personel-adlar .pa-ad {
  min-width: 0;
  overflow-wrap: anywhere;
}

.personel-adlar .pa-tel {
  font-size: var(--fs-4-koru);
  font-weight: normal;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.personel-adlar .pa-tel i {
  margin-right: 0.3rem;
  color: var(--primary-color);
}

.personel-adlar .pa-mail {
  color: var(--primary-color);
  text-decoration: none;
}

/* Ortak dahili: bölüm başlığının sağında hap. Başlık bandı dolu
   (lacivert) olduğu için renk başlıktan alınır, zemin yarı saydam. */
.personel-baslik-tel {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: var(--fs-4-koru);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Başlığın ikon kuralı (.component-heading.single-icon i) büyük boy ve
   sabit renk veriyor; hapın ikonu yazıyla aynı boyda kalsın. */
.component-heading .personel-baslik-tel i {
  font-size: 1em;
  min-width: 0;
  color: inherit;
}

/* Başlıksız bölümde hap gövdenin başında, sağda durur. */
.personel-baslik-tel-satir {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-2);
}

.personel-baslik-tel-satir .personel-baslik-tel {
  color: var(--primary-color);
  border-color: var(--border-color);
  background: var(--tertiary-color);
}

/* Başlığa bağlı kişinin telefonu ve e-postası (data.kisi). İçerik personel
   sayfasının verisinden sonradan dolar (core/personel-rehberi.js); dolana
   kadar ve kişi bulunamazsa yer tutucu boştur, yer kaplamaz. */
.component-heading .baslik-kisi {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  color: inherit;
}

.component-heading .baslik-kisi:empty {
  display: none;
}

.component-heading.double-plain .baslik-kisi {
  color: white;
}

.baslik-kisi .ki-tel,
.baslik-kisi .ki-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: var(--fs-4-koru);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
}

.baslik-kisi .ki-mail:hover,
.baslik-kisi .ki-mail:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  color: inherit;
}

/* İkon yazıyla aynı boyda; genel başlık ikon kuralları buraya sızmasın. */
.component-heading .baslik-kisi i {
  font-size: 1em;
  min-width: 0;
  color: inherit;
}

/* Yumuşak (açık zeminli) bantlarda beyaz saydam hap görünmez. */
.component-heading.soft-icon .baslik-kisi .ki-tel,
.component-heading.soft-icon .baslik-kisi .ki-mail,
.component-heading.soft-plain .baslik-kisi .ki-tel,
.component-heading.soft-plain .baslik-kisi .ki-mail {
  border-color: var(--border-color);
  background: var(--tertiary-color);
}

/* Yalnızca ikon (personel listesindeki zarf düğmesi gibi): yuvarlak hap. */
.baslik-kisi .ki-mail.ki-ikon {
  padding: 0;
  width: 1.9em;
  height: 1.9em;
  justify-content: center;
}

.baslik-kisi a.ki-tel:hover,
.baslik-kisi a.ki-tel:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  color: inherit;
}

/* İki satırlı düz başlık, kişi bağlıyken TEK SATIR olur: ünvan, ad ve
   iletişim yan yana; bant kısalır. Sığmazsa ad ve iletişim alt satıra iner
   (flex-wrap), yatay taşma olmaz. YALNIZCA kişi bağlıyken. */
.component-heading.double-plain.kisili {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 0.35rem;
}

.component-heading.double-plain.kisili > h3,
.component-heading.double-plain.kisili > p,
.organizasyon-page .section-card .component-heading.double-plain.kisili > h3,
.organizasyon-page .section-card .component-heading.double-plain.kisili > p {
  margin: 0;
}

/* Ünvan ile ad arasında ince ayraç (ad alt satıra inse de zararsız). */
.component-heading.double-plain.kisili > p {
  padding-left: var(--space-3);
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}

/* Dar ekranda ad alt satıra iner; satır başında ayraç anlamsız kalır. */
@media (max-width: 768px) {
  .component-heading.double-plain.kisili > p {
    padding-left: 0;
    border-left: 0;
    flex-basis: 100%;
  }
}

@media (max-width: 992px) {
  .personel-adlar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* Mobil: sütun hizası bırakılır, kişi iki satıra katlanır. */
@media (max-width: 768px) {
  .personel-liste,
  .personel-liste tbody {
    display: block;
    width: 100%;
  }

  .personel-liste tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "ad unvan-bos mail"
      "unvan tel mail";
    align-items: center;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-color);
  }

  .personel-liste tbody tr:first-child {
    border-top: 0;
  }

  .personel-liste tbody tr:nth-child(even) {
    background: var(--tertiary-color);
  }

  .personel-liste th,
  .personel-liste td {
    display: block;
    height: auto;
    padding: 0;
    border-top: 0;
    background: transparent;
  }

  .personel-liste .pl-ad { grid-area: ad; width: auto; }
  .personel-liste .pl-unvan { grid-area: unvan; width: auto; }
  .personel-liste .pl-tel { grid-area: tel; width: auto; padding-left: var(--space-3); }
  .personel-liste .pl-eposta { grid-area: mail; width: auto; }

  /* Düz modda adres uzun: kendi satırına iner. */
  .personel-liste.eposta-duz tr {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "ad tel"
      "unvan tel"
      "mail mail";
  }

  .personel-liste.eposta-duz .pl-eposta {
    padding-top: var(--space-1);
  }
}

/* Karanlık tema: token'lar zaten dönüyor; yalnızca vurgu rengi
   karanlıkta yeterince ayrışmadığı için düzeltiliyor. */
[data-theme="dark"] .personel-liste .pl-mail:hover,
[data-theme="dark"] .personel-liste .pl-mail:focus-visible,
[data-theme="dark"] .personel-liste .pl-mail-duz:hover {
  color: var(--primary-light);
}

/* ==========================================
   11. KATEGORI FİLTRELEME BİLEŞENİ (Category Filter Component)
   Kategori filtre butonları için global stiller
   ========================================== */

.category-filters {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--space-4) 0;
}

.category-btn {
  padding: 0.6rem var(--space-5);
  border: 2px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 25px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: var(--fs-6-koru);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.category-btn i {
  font-size: 1rem;
  color: var(--primary-color);
  transition: color 0.3s ease;
}

.category-btn:hover,
.category-btn.active {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.category-btn:hover i,
.category-btn.active i {
  color: white;
}

/* Responsive for Category Filters */
@media (max-width: 768px) {
  .category-filters {
    justify-content: flex-start;
  }

  .category-btn {
    font-size: var(--fs-4-koru);
    padding: var(--space-2) var(--space-4);
  }
}

/* ==========================================
   12. NO RESULTS COMPONENT (Global)
   Arama sonucu bulunamadığında gösterilecek alert
   Sol hizalı, border-left tasarım (SSS eski tasarımı)
   ========================================== */

.no-results {
  padding: var(--space-5);
  margin: var(--space-8) 0;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: all 0.2s ease;
  border-left: 4px solid var(--primary-color);
  background: var(--tertiary-color);
}

.no-results > i {
  font-size: 1.8rem;
  flex-shrink: 0;
  color: var(--primary-color);
  animation: searchPulse 1.5s ease-in-out infinite;
  margin-top: 0;
}

/* Arama animasyonu - sürekli arama yapıyor efekti */
@keyframes searchPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

.no-results-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.no-results h4,
.no-results h3 {
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
  font-size: var(--fs-8);
}

.no-results p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-color);
  opacity: 0.85;
}

/* ==========================================
   13. STATUS BADGE BİLEŞENİ (Status Badge Component)
   Açık/Kapalı durumu gösteren dinamik rozet
   ========================================== */

.component-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: 20px;
  font-weight: 600;
  font-size: var(--fs-6-koru);
  transition: all 0.3s ease;
}

.component-status-badge.open {
  background: #d4edda;
  color: #155724;
  border: 2px solid #28a745;
}

.component-status-badge.open i {
  color: #28a745;
  animation: pulse-open 2s ease-in-out infinite;
}

.component-status-badge.closed {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #dc3545;
}

.component-status-badge.closed i {
  color: #dc3545;
  animation: pulse-closed 2s ease-in-out infinite;
}

.component-status-badge.lunch {
  background: #fff3cd;
  color: #856404;
  border: 2px solid #ffc107;
}

.component-status-badge.lunch i {
  color: #ffc107;
  animation: pulse-lunch 2s ease-in-out infinite;
}

.component-status-badge i {
  font-size: 0.5rem;
}

/* Pulse animations */
@keyframes pulse-open {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes pulse-closed {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes pulse-lunch {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ==========================================
   14. CONTENT BİLEŞENİ (Content Component)
   Basit metin içeriği
   ========================================== */

.component-content {
  line-height: var(--line-height-normal);
  color: var(--text-color);
}

.component-content p {
  margin-bottom: var(--space-4);
}

.component-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================
   15. STATS GRID BİLEŞENİ (Stats Grid Component)
   İstatistik kartları - responsive grid layout
   ========================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin: 0;
}

.stat-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 1.75rem;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

.stat-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon i {
  font-size: 1.75rem;
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: var(--fs-5-koru);
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.stat-value {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.2;
}

/* Responsive for Stats Grid */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .stat-card {
    padding: var(--space-5);
  }

  .stat-icon {
    width: 50px;
    height: 50px;
  }

  .stat-icon i {
    font-size: 1.5rem;
  }

  .stat-value {
    font-size: var(--fs-9);
  }
}

/* Dark Theme Support for Stats Grid */
[data-theme="dark"] .stat-card {
  background: var(--bg-card-dark);
  border-color: var(--border-color-dark);
}

/* ==========================================
   16. DARK THEME SUPPORT
   ========================================== */

/* Alert Dark Theme */
[data-theme="dark"] .component-alert.info {
  background: rgba(13, 110, 253, 0.15);
}

[data-theme="dark"] .component-alert.warning {
  background: rgba(13, 110, 253, 0.15);
}

[data-theme="dark"] .component-alert.success {
  background: rgba(25, 135, 84, 0.15);
}

[data-theme="dark"] .component-alert.danger {
  background: rgba(220, 53, 69, 0.15);
}

/* Info-Box Dark Theme */
[data-theme="dark"] .component-info-box.warning-single {
  background: rgba(255, 193, 7, 0.15);
}

/* Search Box Dark Theme */
[data-theme="dark"] .search-input-group,
[data-theme="dark"] .search-section {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .search-input {
  color: var(--text-color);
}

[data-theme="dark"] .search-input::placeholder {
  color: var(--text-muted);
}

/* Department Cards Dark Theme */
[data-theme="dark"] .department-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* ==========================================
   17. CONTACT BOX BİLEŞENİ (Contact Box Component)
   İletişim kutusu - başlık, açıklama ve linkler
   ========================================== */

.component-contact-box {
  background: var(--tertiary-color);
  border-radius: var(--border-radius);
  padding: var(--space-6);
  margin-top: var(--space-6);
  border-left: 4px solid var(--primary-color);
  text-align: center;
}

.component-contact-box h5 {
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-8);
}

.component-contact-box p {
  color: var(--text-color);
  margin-bottom: var(--space-4);
  font-size: var(--fs-6);
}

.component-contact-box .contact-links {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.component-contact-box .contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1.2rem;
  background: var(--bg-card);
  color: var(--primary-color) !important;
  text-decoration: none;
  border-radius: 20px;
  transition: all 0.3s ease;
  font-weight: 600;
  border: 2px solid var(--primary-color);
  font-size: var(--fs-5);
}

.component-contact-box .contact-link:hover {
  background: var(--primary-color);
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.25);
}

/* Responsive */
@media (max-width: 768px) {
  .component-contact-box .contact-links {
    flex-direction: column;
    align-items: stretch;
  }

  .component-contact-box .contact-link {
    justify-content: center;
  }

  .component-contact-box {
    padding: var(--space-5);
  }

  .component-contact-box h5 {
    font-size: var(--fs-7);
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* Help-Section Style variant - Help section butonları gibi */
.component-contact-box.help-section-style-variant {
  background: transparent;
  border: none;
  border-left: none;
  padding: 0;
  margin-top: 0;
  text-align: left;
}

.component-contact-box.help-section-style-variant h5 {
  justify-content: flex-start;
  margin-bottom: var(--space-4);
}

.component-contact-box.help-section-style-variant .contact-links {
  justify-content: flex-start;
  gap: var(--space-3);
}

.component-contact-box.help-section-style-variant .contact-link {
  background: transparent;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 2px solid var(--primary-color);
  font-size: var(--fs-5);
  border-radius: 20px;
}

.component-contact-box.help-section-style-variant .contact-link:hover {
  background: var(--primary-color);
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.25);
}

.component-contact-box.help-section-style-variant .contact-link i {
  font-size: 1.1rem;
  color: var(--primary-color);
  transition: color 0.3s ease;
}

.component-contact-box.help-section-style-variant .contact-link:hover i {
  color: white;
}

/* Responsive for help-section-style */
@media (max-width: 768px) {
  .component-contact-box.help-section-style-variant .contact-links {
    flex-direction: column;
    align-items: stretch;
  }

  .component-contact-box.help-section-style-variant .contact-link {
    justify-content: center;
  }
}

/* Dark Theme Support */
[data-theme="dark"] .component-contact-box {
  background: var(--tertiary-color);
}

[data-theme="dark"] .component-contact-box .contact-link {
  background: var(--bg-card);
  border-color: var(--primary-light);
  color: var(--primary-light) !important;
}

[data-theme="dark"] .component-contact-box .contact-link:hover {
  background: var(--primary-light);
  color: var(--bg-card) !important;
}

[data-theme="dark"] .component-contact-box.help-section-style-variant .contact-link {
  border-color: var(--primary-light);
  color: var(--primary-light);
}

[data-theme="dark"] .component-contact-box.help-section-style-variant .contact-link:hover {
  background: var(--primary-light);
  color: var(--bg-card) !important;
}

[data-theme="dark"] .component-contact-box.help-section-style-variant .contact-link i {
  color: var(--primary-light);
}

[data-theme="dark"] .component-contact-box.help-section-style-variant .contact-link:hover i {
  color: var(--bg-card);
}

/* ==========================================
   13. NEWS GRID COMPONENT
   Haberler grid layout ve filtreleme
   ========================================== */

/* Sticky Section Container */
#search-filter-section {
  position: sticky;
  top: 70px; /* Header yüksekliği kadar */
  z-index: 100;
  background: var(--bg-card);
  transition: all 0.3s ease;
  border-radius: 0;
  margin-bottom: 0;
}

#search-filter-section.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#search-filter-section .section-card {
  margin-bottom: 0;
  border-radius: 0;
}

/* Kontrol Wrapper */
.news-controls-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 100%;
}

/* Top Row - Arama + Action Buttons */
.news-top-row {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

/* Arama kutusu container */
.news-search-container {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Action Buttons (Sort + View Toggle) */
.news-action-buttons {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
}

/* Filter Row */
.news-filter-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.news-search-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4) 0 2.75rem;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  font-size: var(--fs-7);
  transition: all 0.3s ease;
  background: white;
  color: var(--text-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.news-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(31, 76, 138, 0.1);
}

.news-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
  pointer-events: none;
}

/* Sıralama Butonu */
.news-sort-btn {
  background: white;
  border: 2px solid var(--border-color);
  color: var(--text-color);
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  font-weight: 600;
  font-size: var(--fs-5);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  height: 48px;
  flex-shrink: 0;
}

.news-sort-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: white;
}

.news-sort-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

/* Filtre butonları - Chip Stil */
.news-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.news-filter-btn {
  background: var(--bg-body);
  border: 2px solid var(--border-color);
  color: var(--text-color);
  padding: 0.4rem var(--space-4);
  border-radius: 20px;
  font-weight: 500;
  font-size: var(--fs-4-koru);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.news-filter-btn:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.25);
}

.news-filter-btn.active {
  background: var(--primary-color);
  color: white;
}

.news-filter-btn i {
  font-size: 1rem;
}

/* News Grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
  margin-top: 0;
}

/* News Card */
.news-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: visible;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

.news-card-image {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.news-card-image {
  width: 100%;
  height: 200px;
  /* contain: gorsel KIRPILMAZ. cover ile genis logolar kesiliyordu
     (2026-09-23: Kezana logosunun yarisi yoktu). */
  object-fit: contain;
  background: var(--tertiary-color);
}

.news-card-content {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  gap: var(--space-2);
}

.news-card-category {
  display: inline-block;
  padding: 0.35rem var(--space-3);
  border-radius: 15px;
  font-size: var(--fs-3-koru);
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

.news-card-date {
  font-size: var(--fs-4-koru);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.news-card-date i {
  font-size: 0.9rem;
}

.news-card-title {
  font-size: var(--fs-8);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.news-card-description {
  font-size: var(--fs-6);
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: var(--space-4);
  flex: 1;
}

.news-card-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.news-card-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: 20px;
  font-weight: 600;
  font-size: var(--fs-5);
  text-decoration: none;
  transition: all 0.3s ease;
  color: white;
  border: 2px solid transparent;
}

.news-card-btn:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: white;
}

.news-card-btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.news-card-btn:hover i {
  transform: translateX(3px);
}

/* No Results Message */
.no-results {
  text-align: center;
  padding: var(--space-12) var(--space-4);
}

.no-results .alert {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-7);
}

/* Responsive */
@media (max-width: 768px) {
  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-filter-buttons {
    flex-direction: column;
  }

  .news-filter-btn {
    width: 100%;
    justify-content: center;
  }

  .news-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Dark Theme Support */
[data-theme="dark"] .news-filter-btn {
  border-color: var(--primary-light);
  color: var(--primary-light);
}

[data-theme="dark"] .news-filter-btn:hover,
[data-theme="dark"] .news-filter-btn.active {
  background: var(--primary-light);
  color: var(--bg-card);
}

[data-theme="dark"] .news-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .news-card:hover {
  border-color: var(--primary-light);
}

[data-theme="dark"] .news-card-title {
  color: var(--primary-light);
}

/* Duyurular sayfasinda kart basligi ana renk degil koyu gri (2026-10-02).
   Haberler sayfasi etkilenmez. Koyu temada koyu gri okunmaz; orada
   acik gri (--text-muted) kullanilir. Secici ozgullugu mobil (768px)
   kuralini da gectigi icin iki gorunumde de gecerlidir. */
body[data-page-name="duyurular"] .news-card-title {
  color: #343a40;
}

[data-theme="dark"] body[data-page-name="duyurular"] .news-card-title {
  color: var(--text-muted);
}

/* View Toggle Buttons */
.news-view-toggle {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
}

.view-toggle-btn {
  background: white;
  border: 2px solid var(--border-color);
  color: var(--text-color);
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--fs-5);
  height: 48px;
  white-space: nowrap;
  flex-shrink: 0;
}

.view-toggle-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.view-toggle-btn:hover {
  border-color: var(--primary-color);
  background: white;
}

.view-toggle-btn.active {
  background: white;
  color: var(--text-color);
  border-color: var(--primary-color);
}

.view-toggle-btn:hover i {
  transform: scale(1.2) rotate(5deg);
}

/* Liste Görünümü */
.news-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.news-grid.list-view .news-card {
  flex-direction: row;
  height: auto;
}

.news-grid.list-view .news-card-image {
  width: 200px;
  height: 150px;
  flex-shrink: 0;
}

.news-grid.list-view .news-card-content {
  flex: 1;
}

.news-grid.list-view .news-card-title {
  font-size: var(--fs-7);
}

.news-grid.list-view .news-card-description {
  font-size: var(--fs-5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive - Liste görünümü mobilde */
@media (max-width: 768px) {
  .news-search-filter-row {
    flex-direction: column;
  }

  .news-search-container {
    width: 100%;
  }

  .news-filter-buttons {
    width: 100%;
  }

  .news-view-toggle {
    justify-content: center;
  }

  .news-grid.list-view .news-card {
    flex-direction: column;
  }

  .news-grid.list-view .news-card-image {
    width: 100%;
    height: 200px;
  }
}

/* Dark Theme - View Toggle */
[data-theme="dark"] .control-btn {
  border-color: var(--primary-light);
  color: var(--primary-light);
  background: var(--bg-card);
}

[data-theme="dark"] .control-btn:hover {
  background: var(--primary-light);
  color: var(--bg-primary);
}

[data-theme="dark"] .view-toggle-btn {
  border-color: var(--border-color);
  color: var(--text-muted);
  background: var(--bg-card);
}

[data-theme="dark"] .view-toggle-btn:hover {
  border-color: var(--primary-light);
  color: var(--primary-light);
  background: var(--bg-card);
}

[data-theme="dark"] .view-toggle-btn.active {
  background: var(--primary-light);
  color: var(--bg-primary);
  border-color: var(--primary-light);
}

[data-theme="dark"] .news-search-input {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-color);
}

[data-theme="dark"] .news-search-input:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(100, 150, 200, 0.1);
}

[data-theme="dark"] .news-controls-sticky {
  background: var(--bg-card);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .news-sort-btn {
  border-color: var(--primary-light);
  color: var(--primary-light);
}

[data-theme="dark"] .news-sort-btn:hover {
  background: var(--primary-light);
  color: var(--bg-card);
}

/* ==========================================
   14. NEWS MODAL COMPONENT
   Haber detay modal
   ========================================== */

.news-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.news-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.news-modal {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  max-width: 900px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.news-modal-overlay.active .news-modal {
  transform: translateY(0);
}

.news-modal-header {
  position: relative;
  padding: var(--space-6);
  border-bottom: 2px solid var(--border-color);
}

.news-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  font-size: var(--fs-10);
  color: white;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.news-modal-close:hover {
  background: var(--primary-color);
  transform: rotate(90deg) scale(1.1);
}

.news-modal-image {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
  background: var(--tertiary-color);
  padding: var(--space-4);
}

.news-modal-image:hover {
  opacity: 0.95;
}

.news-modal-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.news-modal-category {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 15px;
  font-size: var(--fs-4-koru);
  font-weight: 600;
  color: white;
}

.news-modal-date {
  font-size: var(--fs-5-koru);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.news-modal-title {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
  padding-right: var(--space-8);
}

.news-modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.news-modal-content {
  font-size: var(--fs-7);
  line-height: 1.8;
  color: var(--text-color);
  white-space: pre-line;
}

.news-modal-footer {
  padding: var(--space-6);
  border-top: 2px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.news-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem var(--space-6);
  border-radius: 20px;
  font-weight: 600;
  font-size: var(--fs-6);
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.news-modal-btn.primary {
  background: var(--primary-color);
  color: white;
}

.news-modal-btn.primary:hover {
  background: var(--primary-dark);
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.3);
}

.news-modal-btn.secondary {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.news-modal-btn.secondary:hover {
  background: var(--primary-color);
  color: white;
}

/* Lightbox (Resim Büyütme) */
.news-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--space-8);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.news-lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.news-lightbox-image {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.news-lightbox-overlay.active .news-lightbox-image {
  transform: scale(1);
}

.news-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: var(--fs-12);
  color: white;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.news-lightbox-close:hover {
  background: var(--primary-color);
  transform: rotate(90deg) scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
  .news-modal {
    max-height: 90vh;
    margin: var(--space-2);
  }

  .news-modal-title {
    font-size: var(--fs-8);
    padding-right: var(--space-12);
  }

  .news-modal-image {
    max-height: 180px;
  }

  .news-modal-footer {
    flex-direction: column;
  }

  .news-modal-btn {
    width: 100%;
    justify-content: center;
  }

  .news-controls-sticky {
    top: 60px;
    padding: var(--space-3) var(--space-4);
  }

  .news-top-row {
    flex-direction: column;
    gap: var(--space-3);
  }

  .news-search-container {
    max-width: 100%;
    width: 100%;
  }

  .news-action-buttons {
    width: 100%;
    justify-content: space-between;
  }

  .news-sort-btn {
    flex: 1;
  }

  .news-lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }
}

/* Dark Theme */
[data-theme="dark"] .news-modal {
  background: var(--bg-card);
}

[data-theme="dark"] .news-modal-title {
  color: var(--primary-light);
}

[data-theme="dark"] .news-modal-btn.primary {
  background: var(--primary-light);
  color: var(--bg-card);
}

[data-theme="dark"] .news-modal-btn.primary:hover {
  background: var(--primary-color);
}

[data-theme="dark"] .news-modal-btn.secondary {
  border-color: var(--primary-light);
  color: var(--primary-light);
}

[data-theme="dark"] .news-modal-btn.secondary:hover {
  background: var(--primary-light);
  color: var(--bg-card);
}

/* ============================================
   GÜNCEL HABERLER SAYFASI BİLEŞENLERİ
   News Page Components - Global Styles
   ============================================ */

/* SEARCH SECTION - Veritabanlari gibi */

.search-section {
  margin-bottom: var(--space-8);
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: var(--space-4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

.search-and-controls {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: 0;
}

.search-wrapper {
  flex: 1;
  min-width: 0;
}

.search-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  height: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-input-group:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(31, 76, 138, 0.1);
  outline: none;
}

.search-icon {
  color: var(--text-muted);
  font-size: 1rem;
  margin-left: 12px;
  pointer-events: none;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 12px;
  font-size: var(--fs-7);
  background: transparent;
  color: var(--text-color);
  height: 100%;
}

.search-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* Clear Search Button */
.clear-search-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #ef4444;
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.clear-search-btn:hover {
  background: var(--primary-color);
  transform: translateY(-50%) scale(1.1);
}

.clear-search-btn i {
  font-size: 0.75rem;
}

/* Controls Group - Sıralama ve Görünüm Butonları */
.controls-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* Sort Button */
.sort-btn {
  background: white;
  border: 2px solid var(--border-color);
  color: var(--text-color);
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: var(--fs-5);
  height: 48px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sort-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sort-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.sort-btn:hover i {
  transform: translateY(-2px);
}

/* Control Buttons (Sort button style) */
.control-btn {
  background: white;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: var(--fs-5);
  height: 48px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  flex-shrink: 0;
}

.control-btn:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.2);
}

.control-btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.control-btn:hover i {
  transform: translateY(-2px);
}

/* View Toggle Group */
.view-toggle-group {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.view-toggle-btn {
  background: white;
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  padding: var(--space-3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  flex-shrink: 0;
}

.view-toggle-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.view-toggle-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: white;
}

.view-toggle-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.view-toggle-btn:hover i {
  transform: scale(1.1);
}

/* View Toggle (eski stil - backward compatibility) */
.view-toggle {
  display: flex;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.view-btn {
  background: white;
  border: 2px solid var(--border-color);
  color: var(--text-color);
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: var(--fs-5);
  height: 48px;
  white-space: nowrap;
  flex-shrink: 0;
}

.view-btn.active {
  background: white;
  color: var(--text-color);
  border-color: var(--primary-color);
}

.view-btn:hover {
  border-color: var(--primary-color);
  background: white;
}

.view-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.view-btn:hover i {
  transform: scale(1.2) rotate(5deg);
}

/* STICKY SCROLL BEHAVIOR */

.search-section.sticky {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: white;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: var(--space-4) 0;
  transition: top 0.3s ease;
  border-radius: 0;
  margin-bottom: 0;
  border: 1px solid #e9ecef;
  border-left: none;
  border-right: none;
}

/* Header gizlendiğinde sticky element üste taşı */
.header-hide ~ * .search-section.sticky,
body:has(.header-hide) .search-section.sticky {
  top: 0;
}

.search-section.sticky .search-and-controls {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Sticky olduğunda kategori filtreleri gizle */
.search-section.sticky .category-filters {
  display: none;
}

/* FILTERS SECTION */

.news-filters-container {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.news-filters-container:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

.news-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.news-filter-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid #e9ecef;
  background: white;
  color: var(--text-color);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: var(--fs-5-koru);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.news-filter-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.news-filter-btn:hover:not(.active) {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: #f8f9ff;
}

/* NEWS GRID & CARDS */

.news-grid-container {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.news-grid-container:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-6);
}

/* List View */
.news-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* News Card */
.news-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  border-top: 3px solid transparent;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
  border: 2px solid var(--primary-color);
}

.news-card-image {
  width: 100%;
  height: 200px;
  /* contain: gorsel KIRPILMAZ. cover ile genis logolar kesiliyordu
     (2026-09-23: Kezana logosunun yarisi yoktu). */
  object-fit: contain;
}

.news-card-content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
  flex-wrap: wrap;
}

.news-card-category {
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  font-size: var(--fs-3-koru);
  font-weight: 600;
  color: white;
}

.news-card-date {
  color: var(--text-muted);
  font-size: var(--fs-4-koru);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.news-card-title {
  font-size: var(--fs-9);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.news-card-description {
  color: var(--text-muted);
  font-size: var(--fs-6);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  flex: 1;
}

.news-card-footer {
  margin-top: auto;
}

.news-card-btn {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  font-size: var(--fs-5);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.news-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* List View Specific Styles */
.news-grid.list-view .news-card {
  flex-direction: row;
  align-items: center;
}

.news-grid.list-view .news-card-image {
  width: 200px;
  height: 150px;
  flex-shrink: 0;
}

.news-grid.list-view .news-card-content {
  padding: var(--space-5);
}

.news-grid.list-view .news-card-btn {
  width: auto;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-4);
}

/* MODAL STYLES - Based on veritabanlari.html */

.news-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
}

.news-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.news-modal {
  background: white;
  border-radius: 20px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: newsSlideUp 0.4s ease;
  position: relative;
}

@keyframes newsSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.news-modal-image {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 20px 20px 0 0;
}

.news-modal-header {
  padding: var(--space-6) var(--space-8);
  position: relative;
}

.news-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.news-modal-close:hover {
  background: var(--primary-color);
  color: white;
  transform: rotate(90deg);
}

.news-modal-close i {
  font-size: 1.2rem;
}

.news-modal-title {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 var(--space-4) 0;
  padding-right: 50px;
  line-height: 1.3;
}

.news-modal-meta {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.news-modal-category {
  padding: var(--space-2) var(--space-4);
  border-radius: 15px;
  font-size: var(--fs-5-koru);
  font-weight: 600;
  color: white;
}

.news-modal-date {
  color: var(--text-muted);
  font-size: var(--fs-6-koru);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.news-modal-body {
  padding: 0 var(--space-8) var(--space-6) var(--space-8);
}

.news-modal-content {
  color: var(--text-color);
  font-size: var(--fs-7);
  line-height: 1.8;
}

.news-modal-content p {
  margin-bottom: var(--space-4);
}

.news-modal-content ul,
.news-modal-content ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-8);
}

.news-modal-content li {
  margin-bottom: var(--space-2);
}

/* Modal icerigindeki alt basliklar (mdToHtml: ## -> h4). Sayfadaki tek h1
   hero basligi, h2'ler bolum basliklari; icerik metni h3'ten asagi kullanir. */
.news-modal-content h3,
.news-modal-content h4,
.news-modal-content h5,
.news-modal-content h6 {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--primary-color);
  font-weight: 700;
  line-height: 1.35;
}
.news-modal-content h3 { font-size: var(--fs-8); }
.news-modal-content h4 { font-size: var(--fs-7); }
.news-modal-content h5,
.news-modal-content h6 { font-size: var(--fs-7); }

/* Tarih araligi satiri: "Deneme erisimi: 23 Eylul - 30 Ekim 2026" */
.news-modal-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--tertiary-color);
  border-left: 3px solid var(--primary-color);
  border-radius: var(--border-radius);
  color: var(--text-color);
  font-weight: 600;
}
.news-modal-range i { color: var(--primary-color); }

[data-theme="dark"] .news-modal-range { background: var(--bg-card); }

.news-modal-footer {
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: var(--space-4);
  justify-content: flex-end;
}

.news-modal-btn {
  padding: var(--space-3) var(--space-6);
  border-radius: 10px;
  font-weight: 600;
  font-size: var(--fs-6);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.news-modal-btn.secondary {
  background: #6c757d;
  color: white;
  border: none;
}

.news-modal-btn.secondary:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.news-modal-btn.primary {
  background: var(--primary-color);
  color: white;
  border: none;
}

.news-modal-btn.primary:hover {
  background: var(--primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.3);
}

/* LIGHTBOX STYLES */

.news-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1060;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
}

.news-lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.news-lightbox-image {
  max-width: 95%;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.news-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.news-lightbox-close:hover {
  background: var(--primary-color);
  color: white;
  transform: rotate(90deg) scale(1.1);
}

.news-lightbox-close i {
  font-size: 1.5rem;
}

/* NO RESULTS */

.no-results {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-muted);
}

.no-results i {
  font-size: 4rem;
  color: var(--primary-color);
  margin-bottom: var(--space-4);
}

.no-results h3 {
  color: var(--primary-color);
  margin-bottom: var(--space-2);
}

/* RESPONSIVE - Güncel Haberler */

@media (max-width: 992px) {
  .controls-group {
    flex-wrap: nowrap;
  }

  .sort-btn .sort-text {
    display: none;
  }

  .control-btn .sort-text {
    display: none;
  }

  .control-btn {
    padding: var(--space-3);
    width: 48px;
    justify-content: center;
  }

  .sort-btn {
    padding: var(--space-3);
    width: 48px;
    justify-content: center;
  }

  .view-btn span {
    display: none;
  }

  .view-btn {
    padding: var(--space-3);
    width: 48px;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-grid.list-view .news-card {
    flex-direction: column;
  }

  .news-grid.list-view .news-card-image {
    width: 100%;
    height: 200px;
  }

  .news-modal {
    max-width: 95%;
  }

  .news-modal-title {
    font-size: var(--fs-10);
  }

  .news-modal-header,
  .news-modal-body,
  .news-modal-footer {
    padding: var(--space-4) var(--space-6);
  }

  .search-and-controls {
    flex-direction: column;
  }

  .controls-group {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 576px) {
  .news-filter-buttons {
    justify-content: flex-start;
  }

  .news-modal-footer {
    flex-direction: column;
  }

  .news-modal-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Dark Theme Support - Güncel Haberler */
[data-theme="dark"] .search-section,
[data-theme="dark"] .news-filters-container,
[data-theme="dark"] .news-grid-container {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .search-input-group {
  background: var(--bg-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .search-input {
  color: var(--text-color);
  background: transparent;
}

[data-theme="dark"] .search-section.sticky {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .header-hide ~ * .search-section.sticky,
[data-theme="dark"] body:has(.header-hide) .search-section.sticky {
  border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .news-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .news-modal {
  background: var(--bg-card);
}

[data-theme="dark"] .news-modal-close {
  background: rgba(0, 0, 0, 0.8);
  color: white;
}

[data-theme="dark"] .news-modal-close:hover {
  background: var(--primary-color);
}

/* ========================================
   UZAKTAN ERİŞİM SAYFA BİLEŞENLERİ
   Remote Access Page Components
   ======================================== */

/* Step Guide Container */
.step-guide-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: var(--space-8) 0;
}

/* Step Card */
.step-card {
  position: relative;
  display: flex;
  gap: var(--space-8);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.step-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Step Number Circle */
.step-number {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-color), #2563a8);
  color: white;
  border-radius: 50%;
  font-size: var(--fs-10);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(31, 76, 138, 0.3);
  position: relative;
  z-index: 2;
}

/* Step Connector Line */
.step-connector {
  position: absolute;
  left: 28px;
  top: 56px;
  width: 2px;
  height: calc(100% + 3rem - 56px);
  background: linear-gradient(to bottom, var(--primary-color) 0%, #e0e7ef 100%);
  z-index: 1;
}

/* Step Content */
.step-content {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: var(--space-8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.step-title {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--space-4);
}

.step-description {
  font-size: var(--fs-7);
  line-height: 1.7;
  color: var(--text-color);
  margin-bottom: var(--space-6);
}

.step-description strong {
  color: var(--primary-color);
  font-weight: 600;
}

.step-description code {
  background: rgba(31, 76, 138, 0.1);
  color: var(--primary-color);
  padding: 0.2rem var(--space-2);
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

/* Step Image Container */
.step-guide-image {
  position: relative;
  margin: var(--space-6) 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;
  border: 1px solid var(--border-color);
}

.step-guide-image img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.step-guide-image img.loaded {
  opacity: 1;
}

.step-guide-image img:hover {
  transform: scale(1.02);
}

/* Image Placeholder */
.image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #6c757d;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.step-guide-image img.loaded ~ .image-placeholder {
  opacity: 0;
}

.image-placeholder i {
  font-size: 3rem;
  opacity: 0.5;
}

.image-placeholder span {
  font-size: var(--fs-5);
}

/* Image Error State */
.step-guide-image.image-error::after {
  content: 'Görsel yüklenemedi';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  padding: var(--space-4) var(--space-8);
  border-radius: 8px;
  font-size: var(--fs-5);
}

/* Step Note */
.step-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(31, 76, 138, 0.05) 0%, rgba(37, 99, 168, 0.03) 100%);
  border-left: 4px solid var(--primary-color);
  border-radius: 0;
  margin-top: var(--space-6);
}

.step-note i {
  color: var(--primary-color);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.step-note span {
  font-size: var(--fs-6);
  line-height: 1.6;
  color: var(--text-color);
}

/* Lightbox */
.image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-lightbox.active {
  opacity: 1;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(31, 76, 138, 0.95);
  cursor: zoom-out;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 2;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  display: block;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.lightbox-close:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  transform: rotate(90deg);
}

.lightbox-close i {
  font-size: 1.2rem;
}

.lightbox-caption {
  margin-top: var(--space-4);
  color: white;
  text-align: center;
  font-size: var(--fs-6-koru);
}

/* Accordion Section */
.accordion-section {
  margin: var(--space-8) 0;
}

.accordion-title {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: var(--space-6);
}

.accordion-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px !important;
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.accordion-button {
  background: var(--bg-card);
  color: var(--text-color);
  font-weight: 600;
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-7);
  border: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(31, 76, 138, 0.08) 0%, rgba(37, 99, 168, 0.05) 100%);
  color: var(--primary-color);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231F4C8A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:hover {
  background: rgba(31, 76, 138, 0.05);
}

.accordion-body {
  padding: var(--space-6);
  font-size: var(--fs-7);
  line-height: 1.7;
  color: var(--text-color);
}

.accordion-body a {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: 600;
}

.accordion-body a:hover {
  color: #2563a8;
}

/* Collapsible Section */
.collapsible-section {
  margin: var(--space-8) 0;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
}

.collapsible-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-card);
  border: none;
  color: var(--text-color);
  font-size: var(--fs-8);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.collapsible-toggle:hover {
  background: rgba(31, 76, 138, 0.05);
}

.collapsible-toggle i:first-child {
  color: var(--primary-color);
  font-size: 1.3rem;
}

.collapsible-toggle .toggle-icon {
  margin-left: auto;
  transition: transform 0.3s ease;
  color: var(--primary-color);
}

/* Ok yönünün tek kaynağı Bootstrap'in yönettiği `collapsed` sınıfı.
   Eski `.active` kuralı kaldırıldı: Bootstrap o sınıfı yönetmiyor, açık
   gelen bölüm kapatılınca ok dönük kalıyordu (çizici artık kapalı bölüme
   `collapsed` sınıfını baştan yazıyor). */
.collapsible-toggle:not(.collapsed) .toggle-icon {
  transform: rotate(180deg);
}

.collapsible-content {
  padding: var(--space-6);
  border-top: 1px solid var(--border-color);
}

.collapsible-content p {
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.collapsible-content ol,
.collapsible-content ul {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.collapsible-content li {
  margin-bottom: var(--space-2);
  line-height: 1.6;
}

.collapsible-image {
  margin: var(--space-6) 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

/* Link Cards Section */
.link-cards-section {
  margin: var(--space-8) 0;
}

.link-cards-title {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: var(--space-6);
}

/* Kolon sayisi ICERIGE gore hesaplanir; sabit kolon KULLANILMAZ.
   Eskiden Bootstrap `row g-3` + `col-lg-3` ile satir basina her zaman 4 kolon
   vardi: 3 kartlik grup 291px, 2 kartlik 567px, 1 kartlik 843px bos birakiyordu
   (2026-09-25, 1366px'te tarayicida olculdu). */
.link-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  /* Satirdaki kartlar ESIT boyda (varsayilan stretch) ve icerik kartin
     ORTASINDA (2026-10-01, kullanici: "satir kutuyu bozmamali, icerik tam
     ortalanmali"). Eskiden `align-items: start` + ust hizali icerikti; esit
     boyda en kisa kartin altinda 208px bosluk kaliyordu. Ortalayinca o bosluk
     ustle alt arasinda bolunuyor. */
}

/* Tek kartlik grup auto-fit ile 1087px'lik bir afise donuyordu (olculdu).
   `:only-child` sart: kapak butun kartlara uygulanirsa 2 kartlik grupta delik
   geri geliyor (1366'da 231px, 1100'de 116px olculdu). */
.link-cards-grid > .link-card:only-child {
  max-width: 420px;
}

/* 991px altinda taban 280px. 200px'te birakilirsa 4 kartlik gruplar 950-900px
   arasinda 3+1'e bolunuyor ve son satirda 586px yetim kaliyor (olculdu).
   280 ile 2+2 kaliyorlar, yani bugunku davranis korunuyor. */
@media (max-width: 991px) {
  .link-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.link-card {
  /* Icerik yatay ve dikey ORTADA. Dolgu SIMETRIK: ok artik sag UST kosede
     (ortalanmis icerigin disinda) durdugu icin alta ayrilan pay kalkti;
     eskiden alt dolgu fazlasi icerigi ortanin 12px ustune itiyordu. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  /* `height: 100%` YOK: kart artik dogrudan izgara ogesi ve
     `.link-cards-grid { align-items: start }` ile icerigi kadar uzuyor. */
  position: relative;
  overflow: hidden;
}

.link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--card-color, var(--primary-color));
}

.link-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 76, 138, 0.1);
  color: var(--card-color, var(--primary-color));
  border-radius: 10px;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  transition: all 0.3s ease;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.link-card:hover .link-card-icon {
  background: var(--card-color, var(--primary-color));
  color: white;
  animation: pulse 1s ease-in-out infinite;
}

.link-card-title {
  font-size: var(--fs-8);
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: var(--space-2);
}

/* Ust secici `.link-card` ile: kartlar acilir bolumun icindeyken
   `.collapsible-content p` (daha ozgul) alt boslugu 12,8px yapiyor, icerik
   ortadan kayiyordu (olculdu: kutuphane-kullanim-rehberi). */
.link-card .link-card-description {
  font-size: var(--fs-5);
  color: var(--text-muted);
  /* Alt bosluk YOK: okun yeri artik `.link-card` alt dolgusunda ayriliyor. */
  margin-bottom: 0;
  line-height: 1.5;
}

/* Ok DUZENDE YER KAPLAMAZ. `opacity: 0` gorunmez yapiyor ama satir ici bir
   <span> olarak her kartta 42px ayiriyordu (olculdu). Mutlak konumlandirilinca
   o 42px geri kazaniliyor; yerini `.link-card` alt dolgusu ayiriyor. */
/* ---- Kart iç düzeni seçenekleri (link-cards > duzen) ----
   Varsayılan ("") eski ortalı görünümdür ve hiçbir sınıf basılmaz; bu
   kurallar yalnızca duzen-… sınıfı taşıyan ızgarada çalışır.
   baslik-ustte: ikon + başlık üstte SABİT satır — kart boyları farklıyken
   başlıklar aynı hizada kalır; metin altta, sola hizalı.
   ikon-solda : ikon sol sütun, başlık + metin sağda. */
.link-cards-grid.duzen-baslik-ustte .link-card,
.link-cards-grid.duzen-ikon-solda .link-card {
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
}

.link-card-ust {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.duzen-baslik-ustte .link-card .link-card-icon {
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
  margin-bottom: 0;
  flex: none;
}

.duzen-baslik-ustte .link-card .link-card-title {
  margin-bottom: 0;
}

.duzen-ikon-solda .link-card {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}

.duzen-ikon-solda .link-card .link-card-icon {
  margin-bottom: 0;
  flex: none;
}

/* Uzun başlık/adres sütunu sayfadan taşırmasın (md: min-width tuzağı) */
.link-card-metin {
  min-width: 0;
}

.link-card-arrow {
  position: absolute;
  right: var(--space-4);
  top: var(--space-3);
  color: var(--card-color, var(--primary-color));
  font-size: 1.2rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.link-card:hover .link-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .step-card {
    flex-direction: column;
    gap: var(--space-6);
  }

  .step-connector {
    display: none;
  }

  .step-content {
    padding: var(--space-6);
  }

  .step-title {
    font-size: var(--fs-9);
  }

  .step-description {
    font-size: var(--fs-7);
  }

  .lightbox-content img {
    max-height: 70vh;
  }

  .link-card {
    padding: var(--space-5);
  }
}

@media (max-width: 576px) {
  .step-number {
    width: 48px;
    height: 48px;
    font-size: var(--fs-9);
  }

  .step-guide-container {
    gap: var(--space-8);
  }

  .step-content {
    padding: var(--space-5);
  }

  .accordion-button,
  .collapsible-toggle {
    font-size: var(--fs-7);
    padding: var(--space-4) var(--space-5);
  }

  .accordion-body,
  .collapsible-content {
    padding: var(--space-5);
  }
}

/* Dark Mode Support */
[data-theme="dark"] .step-content {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .step-title {
  color: var(--primary-color);
}

[data-theme="dark"] .step-description {
  color: var(--text-color);
}

[data-theme="dark"] .step-description code {
  background: rgba(31, 76, 138, 0.2);
}

[data-theme="dark"] .step-note {
  background: rgba(31, 76, 138, 0.1);
}

[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: rgba(31, 76, 138, 0.15);
}

[data-theme="dark"] .collapsible-section {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .collapsible-toggle {
  background: var(--bg-card);
}

[data-theme="dark"] .collapsible-content {
  border-color: var(--border-color);
}

[data-theme="dark"] .link-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .link-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .link-card-icon {
  background: rgba(31, 76, 138, 0.2);
}

/* ==========================================
   18. DAİRESEL PROGRESS BİLEŞENİ
   Circular Progress Component (Faaliyet Raporu Benzeri)
   ========================================== */

.circular-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-8);
  margin: var(--space-8) 0;
}

.circular-progress-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all 0.3s ease;
  border: 2px solid var(--border-color);
}

.circular-progress-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.circular-progress-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto var(--space-6);
}

.circular-progress-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.circular-progress-svg circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.progress-bg {
  stroke: #e9ecef;
}

.progress-bar-circular {
  transition: stroke-dashoffset 2s ease-in-out;
}

.progress-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-number {
  font-size: var(--fs-12);
  font-weight: 900;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.progress-label-small {
  font-size: var(--fs-5-koru);
  color: var(--text-muted);
}

.circular-card-title {
  font-size: var(--fs-8);
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: var(--space-2);
}

.circular-card-description {
  font-size: var(--fs-4);
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .circular-progress-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
  }

  .circular-progress-wrapper {
    width: 120px;
    height: 120px;
  }

  .progress-number {
    font-size: var(--fs-10);
  }
}

@media (max-width: 576px) {
  .circular-progress-grid {
    grid-template-columns: 1fr;
  }

  .circular-progress-wrapper {
    width: 140px;
    height: 140px;
  }
}

/* Dark Theme */
[data-theme="dark"] .progress-bg {
  stroke: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .circular-progress-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .circular-progress-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .circular-card-title {
  color: var(--text-light);
}

/* ============================================
   PROCESS LIST & ICON LIST GRID SİSTEMİ
   Eşit Yükseklik & Responsive Grid
   ============================================ */

/* Process List Container (Üyelik sayfası gibi) */
.process-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Process Item Kartları */
.process-item {
  background: var(--tertiary-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  transition: all 0.3s ease;
  min-height: 100px; /* Minimum yükseklik */
}

.process-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

.process-item i {
  color: var(--primary-color);
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.process-item span {
  flex: 1;
  line-height: 1.6;
  color: var(--text-color);
}

/* Icon List Grid Variant (İletişim bilgileri için) */
.component-icon-list.contact-grid-variant .list-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.component-icon-list.contact-grid-variant .list-item {
  background: var(--tertiary-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  transition: all 0.3s ease;
  min-height: 100px;
  /* Aşağıdaki dört kural bu dosyanın başındaki İKİNCİ contact-grid
     tanımından taşındı; orada çelişen değerler zaten buradakilerin altında
     kalıyordu, dolayısıyla görünüm değişmedi. */
  flex-direction: column;
  text-align: center;
  justify-content: center;
  min-width: 0;
}

/* Column flex'te span büyümesin — içerik kartta ortalanmış kalsın, uzun
   e-posta/telefon taşmasın */
.component-icon-list.contact-grid-variant .list-item span {
  flex: 0 0 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.component-icon-list.contact-grid-variant .list-item i {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
}

.component-icon-list.contact-grid-variant .list-item strong {
  font-size: var(--fs-8);
  margin-bottom: var(--space-2);
}

.component-icon-list.contact-grid-variant .list-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

/* Responsive Grid Ayarları */
@media (max-width: 992px) {
  .process-list,
  .component-icon-list.contact-grid-variant .list-wrapper {
    grid-template-columns: 1fr; /* Tablet'te tek sütun */
    gap: var(--space-4);
  }
}

@media (max-width: 576px) {
  .process-item,
  .component-icon-list.contact-grid-variant .list-item {
    padding: var(--space-4);
    min-height: 80px;
  }

  .process-list,
  .component-icon-list.contact-grid-variant .list-wrapper {
    gap: var(--space-3);
  }
}

/* Dark Theme Support */
[data-theme="dark"] .process-item,
[data-theme="dark"] .component-icon-list.contact-grid-variant .list-item {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* ---- Contact Compact varyantı (2026-09-23) ----------------------------
   contact-grid'in sıkı hâli: kart yerine satır. İkon solda küçük, etiket ve
   değer yan yana. Yönetim aracında Varyant açılır listesinden seçilir;
   contact-grid olduğu gibi duruyor, beğenilmezse tek seçimle geri dönülür.

   NOT — neden span içinde <p> hedefleniyor: renderIconList, markdown'ı
   mdToHtml ile çevirip baştaki <p> ile sondaki </p>'yi kırpıyor. "**Etiket**
   \n[değer](tel:…)" iki paragraf ürettiği için kırpma sonrası span içinde
   <strong> ile bir <p> yan yana kalıyor (node ile çalıştırılıp ölçüldü).
   Bu CSS o yapıyı olduğu gibi kabul eder; renderer'a DOKUNMAZ, çünkü
   renderIconList'i değiştirmek icon-list kullanan bütün sayfaları etkiler. */
.component-icon-list.contact-compact-variant .list-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.component-icon-list.contact-compact-variant .list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--tertiary-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  text-align: left;
  transition: border-color 0.2s ease;
}

.component-icon-list.contact-compact-variant .list-item:hover {
  border-color: var(--primary-color);
}

.component-icon-list.contact-compact-variant .list-item i {
  flex: 0 0 auto;
  width: 1.5rem;
  margin: 0;
  font-size: 1.1rem;
  text-align: center;
  color: var(--primary-color);
}

.component-icon-list.contact-compact-variant .list-item span {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

.component-icon-list.contact-compact-variant .list-item span strong {
  flex: 0 0 auto;
  min-width: 10rem;
  margin: 0;
  font-size: var(--fs-7);
}

.component-icon-list.contact-compact-variant .list-item span p {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}

/* Dar ekranda etiket kendi satırına geçsin, değer altına insin */
@media (max-width: 576px) {
  .component-icon-list.contact-compact-variant .list-item span strong {
    min-width: 100%;
  }
}

[data-theme="dark"] .component-icon-list.contact-compact-variant .list-item {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* ============================================
   KAT PLANI BİLEŞENİ (Component Floor Plan)
   ============================================ */
.component-floor-plan {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
  margin-bottom: var(--space-12);
  min-height: 600px;
  align-items: start;
}

/* Sol Navigasyon */
.component-floor-navigation {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  height: fit-content;
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  overflow: hidden;
}

.component-floor-nav-header {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: var(--text-light);
  padding: var(--space-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.component-floor-nav-header h3 {
  margin: 0;
  font-size: var(--fs-8);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-light);
}

.component-floor-nav-header i {
  font-size: 1.25rem;
}

.component-floor-nav-list {
  padding: var(--space-2);
}

.component-floor-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.875rem var(--space-4);
  margin-bottom: var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: var(--transition-fast);
  color: var(--text-color);
  position: relative;
}

.component-floor-nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background: var(--primary-color);
  border-radius: 0 4px 4px 0;
  transition: var(--transition-fast);
}

.component-floor-nav-item:hover {
  background: var(--bg-hover);
}

.component-floor-nav-item:hover::before {
  height: 60%;
}

.component-floor-nav-item.active {
  background: var(--tertiary-color);
  color: var(--primary-color);
  font-weight: var(--font-weight-semibold);
}

.component-floor-nav-item.active::before {
  height: 100%;
}

.component-floor-nav-item:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.component-floor-number-badge {
  min-width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  border-radius: 50%;
  font-size: var(--fs-8);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
  transition: var(--transition-fast);
}

.component-floor-nav-item.active .component-floor-number-badge {
  background: var(--primary-color);
  color: white;
}

.component-floor-nav-item-text {
  flex: 1;
}

.component-floor-nav-item-name {
  display: block;
  font-size: var(--fs-6-koru);
  margin-bottom: 0.125rem;
}

.component-floor-nav-item-count {
  display: block;
  font-size: var(--fs-3-koru);
  color: var(--text-muted);
}

/* Sağ İçerik Panelleri */
.component-floor-content {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.component-floor-panel {
  display: none;
}

.component-floor-panel.active {
  display: block;
  animation: floorFadeInUp 0.4s ease;
}

@keyframes floorFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.component-floor-header {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: var(--text-light);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

.component-floor-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.component-floor-header-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}

.component-floor-number-large {
  min-width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  font-size: var(--fs-11);
  font-weight: var(--font-weight-bold);
  color: white;
}

.component-floor-title {
  font-size: var(--fs-11);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: white;
}

.component-floor-description {
  font-size: var(--fs-7);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: var(--line-height-normal);
  position: relative;
  z-index: 1;
}

/* Bölüm Kartları Grid */
.component-floor-sections {
  padding: var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.component-floor-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.component-floor-section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}

.component-floor-section-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.component-floor-section-card:hover::before {
  transform: scaleX(1);
}

.component-floor-section-card:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.component-floor-section-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tertiary-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  color: var(--primary-color);
  font-size: 1.75rem;
  transition: var(--transition-fast);
}

.component-floor-section-card:hover .component-floor-section-icon {
  background: var(--primary-color);
  color: white;
  transform: scale(1.1);
}

.component-floor-section-title {
  font-size: var(--fs-8);
  font-weight: var(--font-weight-semibold);
  color: var(--text-color);
  margin-bottom: var(--space-2);
}

.component-floor-section-description {
  font-size: var(--fs-5-koru);
  color: var(--text-muted);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-4);
}

.component-floor-section-details {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.component-floor-section-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.component-floor-section-details li {
  font-size: var(--fs-4);
  color: var(--text-color);
  padding: 0.375rem 0;
  padding-left: var(--space-6);
  position: relative;
  line-height: var(--line-height-normal);
}

.component-floor-section-details li::before {
  content: '\F285';
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-size: var(--fs-2);
}

/* Responsive */
@media (max-width: 991px) {
  .component-floor-plan {
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
  }

  .component-floor-sections {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    padding: var(--space-6);
  }

  .component-floor-header {
    padding: var(--space-6);
  }

  .component-floor-number-large {
    min-width: 56px;
    height: 56px;
    font-size: var(--fs-10);
  }

  .component-floor-title {
    font-size: var(--fs-10);
  }
}

@media (max-width: 767px) {
  .component-floor-plan {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .component-floor-navigation {
    position: static;
  }

  .component-floor-nav-header h3 {
    font-size: var(--fs-7);
  }

  .component-floor-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .component-floor-nav-item {
    flex-direction: column;
    text-align: center;
    padding: var(--space-4) var(--space-3);
    margin-bottom: 0;
  }

  .component-floor-nav-item::before {
    display: none;
  }

  .component-floor-number-badge {
    min-width: 48px;
    height: 48px;
    font-size: var(--fs-9);
  }

  .component-floor-nav-item-name {
    font-size: var(--fs-4-koru);
  }

  .component-floor-nav-item-count {
    font-size: var(--fs-2-koru);
  }

  .component-floor-header {
    padding: var(--space-6) var(--space-5);
  }

  .component-floor-header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .component-floor-number-large {
    min-width: 48px;
    height: 48px;
    font-size: var(--fs-9);
  }

  .component-floor-title {
    font-size: var(--fs-9);
  }

  .component-floor-description {
    font-size: var(--fs-5-koru);
  }

  .component-floor-sections {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .component-floor-section-card {
    padding: var(--space-5);
  }

  .component-floor-section-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }

  .component-floor-section-title {
    font-size: var(--fs-7);
  }

  .component-floor-section-description {
    font-size: var(--fs-4-koru);
  }
}

@media (max-width: 480px) {
  .component-floor-nav-list {
    grid-template-columns: 1fr;
  }

  .component-floor-nav-item {
    flex-direction: row;
    text-align: left;
  }

  .component-floor-number-badge {
    min-width: 42px;
    height: 42px;
    font-size: var(--fs-8);
  }
}

/* Kat başlığı boyutu (2026-10-05): varsayılan KOMPAKT (`kat-baslik-kompakt`), eski görünüm
   `kat-baslik-buyuk` (yukarıdaki kurallar). İki sınıflı seçici her ekran kırılımında yukarıdaki
   tek sınıflı kuralları geçer; numara ile başlık dar ekranda da yan yana kalır.
   Kompakt işaretleme: numara | (kat adı / açıklama alt alta); numara iki satıra dikey ortalı. */
.component-floor-plan.kat-baslik-kompakt .component-floor-header {
  padding: var(--space-4) var(--space-6);
}
.component-floor-plan.kat-baslik-kompakt .component-floor-header::before {
  width: 180px;
  height: 180px;
}
.component-floor-plan.kat-baslik-kompakt .component-floor-header-top {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: 0;
}
.component-floor-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.component-floor-plan.kat-baslik-kompakt .component-floor-number-large {
  flex: 0 0 auto;
  min-width: 48px;
  height: 48px;
  padding: 0 var(--space-2);
  border-radius: 24px;
  font-size: var(--fs-8);
}
.component-floor-plan.kat-baslik-kompakt .component-floor-title {
  font-size: var(--fs-9);
  line-height: 1.25;
}
.component-floor-plan.kat-baslik-kompakt .component-floor-description {
  font-size: var(--fs-5-koru);
  line-height: 1.4;
}
/* Bölüm kartı düzeni ve ikon boyutu (2026-10-05): ComponentRenderer.katKartiDuzeni.
   Sınıfsız kart = bugünkü görünüm (ikon üstte, 56 px). */
.component-floor-section-card.kat-ikon-orta .component-floor-section-icon {
  width: 44px;
  height: 44px;
  font-size: 1.35rem;
}
.component-floor-section-card.kat-ikon-kucuk .component-floor-section-icon {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}
.component-floor-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.component-floor-section-head .component-floor-section-title {
  margin-bottom: 0;
  min-width: 0;
}
/* Başlık yanında: ikon kutusu satır yüksekliğine iner (boyut seçilmediyse küçük). */
.component-floor-section-head .component-floor-section-icon {
  flex: 0 0 auto;
  margin-bottom: 0;
  width: 32px;
  height: 32px;
  font-size: 1rem;
}
.component-floor-section-card.kat-ikon-orta .component-floor-section-head .component-floor-section-icon {
  width: 44px;
  height: 44px;
  font-size: 1.35rem;
}
.component-floor-section-card.kat-ikon-buyuk .component-floor-section-head .component-floor-section-icon {
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
}
/* Kartın üzerine gelince ikonun büyümesi küçük ikonda başlığa taşmasın. */
.component-floor-section-card:hover .component-floor-section-head .component-floor-section-icon {
  transform: none;
}

/* Açıklama kabı <div>; mdToHtml'in <p>'si kendi boşluğunu getirmesin. */
.component-floor-description p,
.component-floor-section-description p {
  margin: 0;
}
/* Açıklama boşsa başlık satırının alt boşluğu kalmasın (iki boyutta da). */
.component-floor-header-top:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 767px) {
  .component-floor-plan.kat-baslik-kompakt .component-floor-header {
    padding: var(--space-4) var(--space-5);
  }
}

/* Dark Theme */
html[data-theme="dark"] .component-floor-nav-item:hover {
  background: var(--bg-hover);
}

html[data-theme="dark"] .component-floor-section-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

html[data-theme="dark"] .component-floor-section-icon {
  background: rgba(31, 76, 138, 0.2);
}

html[data-theme="dark"] .component-floor-section-card:hover .component-floor-section-icon {
  background: var(--primary-color);
}

/* Print */
@media print {
  .component-floor-navigation {
    display: none;
  }

  .component-floor-plan {
    grid-template-columns: 1fr;
  }

  .component-floor-panel {
    display: block !important;
  }

  .component-floor-content {
    box-shadow: none;
    page-break-inside: avoid;
  }

  .component-floor-section-card {
    page-break-inside: avoid;
    box-shadow: none;
  }
}



/* İkon alanı bir CSS sınıfı yerine Material ligatürü ya da doğrudan bir im
   (emoji) taşıyabilir. Bileşen CSS'i ikonları `i` etiketine göre boyutluyor;
   bu iki tür ise <span> olarak basılıyor ve kural dışı kalıp blok gibi
   yayılıyordu. Aşağıdaki kural onları ikonla aynı satır-içi davranışa sokar;
   boyut/renk yine bulundukları bileşenin `i` kuralından gelir. */
.material-symbols-outlined,
.component-icon-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  font-style: normal;
  flex: 0 0 auto;
}
.material-symbols-outlined { font-variation-settings: 'opsz' 24; }


/* Dis baglanti kartlarinda dugme gercek bir <a>; gorunumu dugmeyle ayni kalsin */
a.news-card-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ============================================================
   APC ÖZET TABLOSU (apc-ozet)
   Sayfanın en üstündeki kompakt "Oku & Yayımla" özeti.
   Renk, rozet biçimi, satır vurgusu ve ikonlar yönetimden seçilir
   (bkz. renderApcOzet, APC_SECENEK). Renkler serbest HEX değil TONDUR:
   her ton açık ve koyu tema için aşağıda tanımlı, yani editörün seçimi
   koyu temada da okunur kalır. Renk tek başına anlam taşımasın diye
   rozette her zaman metin de vardır.
   Rozetler bilerek .component-tag KULLANMAZ: aynı sayfadaki tag-list
   bileşenleri o sınıfları paylaşıyor.
   ============================================================ */

.component-apc-ozet {
  margin: var(--space-4) 0 var(--space-6);
}

/* ---- Tonlar: --apc-guclu (dolu zemin / şerit), --apc-uzerine (dolu
   zemin üstündeki yazı), --apc-acik (açık rozet zemini), --apc-yazi
   (açık zemin ve düz metin rengi), --apc-zemin (satır zemini) ---- */
.component-apc-ozet .apc-ton-yesil {
  --apc-guclu: #198754; --apc-uzerine: #fff;
  --apc-acik: rgba(25, 135, 84, 0.12); --apc-yazi: #146c43; --apc-zemin: rgba(25, 135, 84, 0.06);
}
.component-apc-ozet .apc-ton-sari {
  --apc-guclu: #ffc107; --apc-uzerine: #000;
  --apc-acik: rgba(255, 193, 7, 0.2); --apc-yazi: #7a5b00; --apc-zemin: rgba(255, 193, 7, 0.08);
}
.component-apc-ozet .apc-ton-mavi {
  --apc-guclu: #0d6efd; --apc-uzerine: #fff;
  --apc-acik: rgba(13, 110, 253, 0.12); --apc-yazi: #0a58ca; --apc-zemin: rgba(13, 110, 253, 0.06);
}
.component-apc-ozet .apc-ton-kirmizi {
  --apc-guclu: #dc3545; --apc-uzerine: #fff;
  --apc-acik: rgba(220, 53, 69, 0.12); --apc-yazi: #b02a37; --apc-zemin: rgba(220, 53, 69, 0.06);
}
.component-apc-ozet .apc-ton-turuncu {
  --apc-guclu: #fd7e14; --apc-uzerine: #000;
  --apc-acik: rgba(253, 126, 20, 0.15); --apc-yazi: #a14c05; --apc-zemin: rgba(253, 126, 20, 0.07);
}
.component-apc-ozet .apc-ton-gri {
  --apc-guclu: #6c757d; --apc-uzerine: #fff;
  --apc-acik: rgba(108, 117, 125, 0.14); --apc-yazi: #495057; --apc-zemin: rgba(108, 117, 125, 0.06);
}
.component-apc-ozet .apc-ton-camgobegi {
  --apc-guclu: #0dcaf0; --apc-uzerine: #000;
  --apc-acik: rgba(13, 202, 240, 0.15); --apc-yazi: #087990; --apc-zemin: rgba(13, 202, 240, 0.07);
}
.component-apc-ozet .apc-ton-ana {
  --apc-guclu: var(--primary-color); --apc-uzerine: #fff;
  --apc-acik: color-mix(in srgb, var(--primary-color) 12%, transparent);
  --apc-yazi: var(--primary-color);
  --apc-zemin: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

.component-apc-ozet .apc-ozet-intro {
  margin-bottom: var(--space-4);
  color: var(--text-muted, #6c757d);
  font-size: var(--fs-6);
}

.component-apc-ozet .apc-ozet-intro p:last-child,
.component-apc-ozet .apc-ozet-not p:last-child {
  margin-bottom: 0;
}

.apc-ozet-tablo {
  font-size: var(--fs-5);
}

/* ---- Başlık satırı biçimi (baslikStili) ---- */
/* ana: sitenin bütün tablolarındaki koyu zemin (.component-table thead) */
.apc-ozet-tablo.apc-baslik-acik thead {
  background: var(--tertiary-color);
  color: var(--text-color);
}

.apc-ozet-tablo.apc-baslik-cizgi thead {
  background: transparent;
  color: var(--text-color);
}

.apc-ozet-tablo.apc-baslik-cizgi thead tr th {
  border-bottom: 2px solid var(--primary-color);
}

.apc-ozet-tablo tbody tr td {
  vertical-align: middle;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.apc-ozet-tablo .apc-hucre-yayinci {
  min-width: 180px;
}

.apc-ozet-tablo .apc-yayinci {
  font-weight: 700;
}

.apc-ozet-tablo a.apc-yayinci-baglanti {
  color: var(--primary-color);
  text-decoration: none;
}

.apc-ozet-tablo a.apc-yayinci-baglanti:hover {
  text-decoration: underline;
}

.apc-ozet-tablo .apc-yayinci-not {
  display: block;
  font-size: var(--fs-3);
  font-weight: 400;
  color: var(--text-muted, #6c757d);
  margin-top: 0.15rem;
}

.apc-ozet-tablo .apc-yayinci-ikon {
  margin-right: 0.4rem;
  color: var(--primary-color);
}

/* ---- Durum rozeti (rozetStili) ---- */
.apc-ozet-tablo .apc-rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-2-koru);
  font-weight: 600;
  line-height: 1.3;
  padding: 0.25rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  /* Hap biçimi iki satıra kırılınca topaklı duruyordu (ölçüldü: 41 px'e
     karşı 26 px). Geniş ekranda tek satır; 900 px altında kırılır — yoksa
     641 px'te tablo kendi içinde 44 px yatay kayıyordu (ölçüldü). */
  white-space: nowrap;
}

@media (max-width: 900px) {
  .apc-ozet-tablo .apc-rozet {
    white-space: normal;
  }
}

.apc-ozet-tablo .apc-rozet-acik {
  background: var(--apc-acik);
  color: var(--apc-yazi);
}

.apc-ozet-tablo .apc-rozet-dolu {
  background: var(--apc-guclu);
  color: var(--apc-uzerine);
  border-radius: 6px;
}

.apc-ozet-tablo .apc-rozet-cerceve {
  background: transparent;
  border-color: var(--apc-guclu);
  color: var(--apc-yazi);
}

.apc-ozet-tablo .apc-rozet-metin {
  background: transparent;
  color: var(--apc-yazi);
  padding: 0;
  border-radius: 0;
}

/* ---- Kalan kota / token (kalanGosterimi) ---- */
.apc-ozet-tablo .apc-kalan {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-7);
  line-height: 1;
}

.apc-ozet-tablo .apc-kalan-kutu {
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: var(--apc-acik);
  color: var(--apc-yazi);
}

.apc-ozet-tablo .apc-kalan-etiket {
  display: block;
  font-size: var(--fs-2-koru);
  color: var(--text-muted, #6c757d);
  margin-top: 0.2rem;
}

.apc-ozet-tablo .apc-kalan-uyari {
  display: block;
  font-size: var(--fs-2-koru);
  font-weight: 700;
  color: var(--apc-yazi);
  margin-top: 0.2rem;
}

.apc-ozet-tablo .apc-kalan-metin {
  font-size: var(--fs-4);
}

.apc-ozet-tablo .apc-kalan-yok {
  color: var(--text-muted, #6c757d);
}

.apc-ozet-tablo .apc-detay {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-3);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--primary-color);
}

.apc-ozet-tablo .apc-detay:hover {
  text-decoration: underline;
}

/* ---- Yazının yanındaki ikonlar: boyut ve renk YAZIDAN ----
   Genel tablo kuralı (.component-table tbody tr td i) hücredeki her ikonu
   1.3rem ve ana renk yapıyor; ilk hücredeki büyük ikon için yazılmıştı.
   Ölçüldü (2026-09-29): 11 px'lik bağlantı yazısının yanında ok 20,8 px,
   kırmızı rozetin içindeki ikon lacivert. İki sınıf o kuralın tek sınıfını
   ezer; yayıncı ikonu bilerek dışarıda (genel kuralın hedefi o). */
.apc-ozet-tablo .apc-detay i,
.apc-ozet-tablo .apc-rozet i,
.apc-ozet-tablo .apc-kalan i {
  font-size: 1em;
  color: inherit;
}

/* ---- Satır vurgusu (satirVurgusu) — rengi satırın tonundan ---- */
.apc-ozet-tablo tbody tr.apc-vurgu-serit,
.apc-ozet-tablo tbody tr.apc-vurgu-ikisi {
  box-shadow: inset 3px 0 0 0 var(--apc-guclu);
}

.apc-ozet-tablo tbody tr.apc-vurgu-zemin,
.apc-ozet-tablo tbody tr.apc-vurgu-ikisi {
  background: var(--apc-zemin);
}

.component-apc-ozet .apc-ozet-not {
  margin-top: var(--space-3);
  font-size: var(--fs-4);
  color: var(--text-muted, #6c757d);
}

.component-apc-ozet .apc-ozet-guncelleme {
  margin-top: var(--space-2);
  font-size: var(--fs-3);
  color: var(--text-muted, #6c757d);
}

/* ---- Koyu tema: aynı tonların koyu zemin karşılıkları ---- */
[data-theme="dark"] .component-apc-ozet .apc-ton-yesil { --apc-acik: rgba(25, 135, 84, 0.24); --apc-yazi: #75d69c; --apc-zemin: rgba(25, 135, 84, 0.14); }
[data-theme="dark"] .component-apc-ozet .apc-ton-sari { --apc-acik: rgba(255, 193, 7, 0.2); --apc-yazi: #ffda6a; --apc-zemin: rgba(255, 193, 7, 0.1); }
[data-theme="dark"] .component-apc-ozet .apc-ton-mavi { --apc-acik: rgba(13, 110, 253, 0.26); --apc-yazi: #8bb9fe; --apc-zemin: rgba(13, 110, 253, 0.14); }
[data-theme="dark"] .component-apc-ozet .apc-ton-kirmizi { --apc-acik: rgba(220, 53, 69, 0.24); --apc-yazi: #ff8b95; --apc-zemin: rgba(220, 53, 69, 0.14); }
[data-theme="dark"] .component-apc-ozet .apc-ton-turuncu { --apc-acik: rgba(253, 126, 20, 0.22); --apc-yazi: #ffb074; --apc-zemin: rgba(253, 126, 20, 0.12); }
[data-theme="dark"] .component-apc-ozet .apc-ton-gri { --apc-acik: rgba(173, 181, 189, 0.2); --apc-yazi: #ced4da; --apc-zemin: rgba(173, 181, 189, 0.08); }
[data-theme="dark"] .component-apc-ozet .apc-ton-camgobegi { --apc-acik: rgba(13, 202, 240, 0.2); --apc-yazi: #6edff6; --apc-zemin: rgba(13, 202, 240, 0.1); }
[data-theme="dark"] .component-apc-ozet .apc-ton-ana { --apc-acik: color-mix(in srgb, var(--primary-color) 35%, transparent); --apc-yazi: #9ec5fe; --apc-zemin: color-mix(in srgb, var(--primary-color) 18%, transparent); }

/* ============================================================
   CREATIVE COMMONS LİSANS TABLOSU (cc-lisans)
   ============================================================ */

.component-cc-lisans {
  margin: var(--space-4) 0;
}

.component-cc-lisans .cc-intro {
  margin-bottom: var(--space-4);
  color: var(--text-muted, #6c757d);
  font-size: var(--fs-6);
}

.component-cc-lisans .cc-intro p:last-child,
.component-cc-lisans .cc-not p:last-child,
.cc-lisans-tablo .cc-aciklama p:last-child {
  margin-bottom: 0;
}

.cc-lisans-tablo .cc-hucre-rozet {
  width: 120px;
  white-space: nowrap;
  vertical-align: middle;
}

.cc-lisans-tablo .cc-rozet-gorsel {
  width: 88px;
  height: 31px;
  display: block;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 2px;
}

.cc-lisans-tablo .cc-rozet-link {
  display: inline-block;
  line-height: 0;
}

.cc-lisans-tablo .cc-rozet-link:hover .cc-rozet-gorsel {
  border-color: var(--primary-color);
}

.cc-lisans-tablo .cc-rozet-yazi {
  font-weight: 700;
}

.cc-lisans-tablo .cc-kod {
  display: inline-block;
  font-weight: 700;
  color: var(--primary-color);
  margin-right: 0.4rem;
}

.cc-lisans-tablo .cc-aciklama {
  font-size: var(--fs-5);
}

.cc-lisans-tablo .cc-aciklama p {
  display: inline;
}

.component-cc-lisans .cc-not {
  margin-top: var(--space-3);
  font-size: var(--fs-3);
  color: var(--text-muted, #6c757d);
}

/* ---- Küçük ekran: iki tablo da kart düzenine geçer ---- */
@media (max-width: 640px) {
  .apc-ozet-tablo thead,
  .cc-lisans-tablo thead {
    display: none;
  }

  .apc-ozet-tablo,
  .apc-ozet-tablo tbody,
  .apc-ozet-tablo tr,
  .apc-ozet-tablo td,
  .cc-lisans-tablo,
  .cc-lisans-tablo tbody,
  .cc-lisans-tablo tr,
  .cc-lisans-tablo td {
    display: block;
    width: 100%;
  }

  .apc-ozet-tablo tbody tr,
  .cc-lisans-tablo tbody tr {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    margin-bottom: var(--space-3);
    padding: 0.4rem 0.2rem;
  }

  .apc-ozet-tablo tbody tr td,
  .cc-lisans-tablo tbody tr td {
    border: none;
    padding: 0.35rem 0.75rem;
  }

  /* Temel kural td:first-child'i flex yapiyor: ad ile kisa not yan yana
     kaliyor ve dar ekranda sag taraf kirpiliyordu. */
  .apc-ozet-tablo tbody tr td:first-child,
  .cc-lisans-tablo tbody tr td:first-child {
    display: block;
  }

  .apc-ozet-tablo .apc-hucre-yayinci {
    min-width: 0;
  }

  .apc-ozet-tablo .apc-yayinci-not {
    margin-top: 0.25rem;
  }

  .apc-ozet-tablo .apc-rozet {
    border-radius: 8px;
  }

  .apc-ozet-tablo tbody tr td[data-label]::before,
  .cc-lisans-tablo tbody tr td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #6c757d);
    margin-bottom: 0.15rem;
  }

  .apc-ozet-tablo tbody tr td.apc-hucre-yayinci::before,
  .cc-lisans-tablo tbody tr td.cc-hucre-rozet::before {
    display: none;
  }

  .cc-lisans-tablo .cc-hucre-rozet {
    width: auto;
  }
}

/* ---- Koyu tema ---- */
[data-theme="dark"] .cc-lisans-tablo .cc-rozet-gorsel {
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   VİDEO GALERİSİ BİLEŞENİ (video-gallery)
   Renkler değişkenlerden gelir; koyu tema için ayrı kural
   yazılmaz (variables.css html[data-theme="dark"] altında
   aynı adları yeniden tanımlıyor).
   ============================================================ */

.component-video-gallery {
  --video-columns: 3;
  margin-bottom: var(--space-8);
}

/* ---- Üst çubuk: arama + kategoriler ---- */
.video-gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.video-gallery-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

.video-gallery-search .bi-search {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--space-3);
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: var(--fs-6-koru);
}

.video-gallery-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-color);
  font-size: var(--font-size-sm);
  transition: var(--transition-fast);
}

.video-gallery-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(31, 76, 138, 0.15);
}

.video-gallery-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.video-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.video-category-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
}

.video-category-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.video-category-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
}

.video-category-count {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 var(--space-1);
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: var(--fs-2-koru);
  line-height: 1.6;
  text-align: center;
}

.video-category-btn.active .video-category-count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--text-light);
}

/* ---- Izgara ---- */
.video-gallery-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

@media (min-width: 992px) {
  .component-video-gallery.grid-variant .video-gallery-grid {
    grid-template-columns: repeat(var(--video-columns), minmax(0, 1fr));
  }
}

/* ---- Kart ---- */
.video-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.video-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Kapak alanı: 16/9, tıklanabilir düğme */
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  margin: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

/* YouTube hqdefault 4:3'tür ve üst/alt siyah bant taşır; `cover`
   tam olarak o bantları kırpar (hesaplandı: 3/32 genişlik, iki yandan). */
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.video-card:hover .video-thumb img {
  transform: scale(1.04);
}

.video-thumb video,
.video-thumb iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.video-thumb-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: 2rem;
  line-height: 1;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(192, 50, 33, 0.92);
  color: #fff;
  font-size: var(--fs-11);
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: var(--transition-fast);
  pointer-events: none;
}

.video-thumb:hover .video-play-btn,
.video-thumb:focus-visible .video-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--secondary-color);
}

.video-thumb:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: -3px;
}

.video-duration {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: var(--fs-2-koru);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.video-thumb.is-file,
.video-thumb.is-playing,
.video-thumb.is-broken {
  cursor: default;
}

.video-thumb.is-broken .video-thumb-blank {
  color: var(--secondary-color);
}

.video-broken-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-3);
  text-align: center;
  color: #fff;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

/* ---- Kart gövdesi ---- */
.video-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
  flex: 1;
}

.video-card-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-color);
  line-height: 1.35;
}

.video-card-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.video-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-3-koru);
}

.video-source-badge {
  display: inline-flex;
  align-items: center;
  color: var(--primary-color);
  font-size: var(--fs-7);
}

/* ---- Liste görünümü ---- */
.component-video-gallery.list-variant .video-gallery-grid {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .component-video-gallery.list-variant .video-card {
    flex-direction: row;
    align-items: stretch;
  }

  .component-video-gallery.list-variant .video-thumb {
    width: 300px;
    flex: 0 0 300px;
  }
}

/* ---- Boş durum ve kanal bağlantısı ---- */
.video-gallery-empty,
.video-gallery-empty-text {
  margin: var(--space-8) 0 0;
  padding: var(--space-6);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--text-muted);
}

.video-gallery-channel {
  margin-top: var(--space-6);
  text-align: center;
}

.video-gallery-channel a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: var(--transition-fast);
}

.video-gallery-channel a:hover {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.video-gallery-channel .bi-youtube {
  color: #ff0000;
  font-size: var(--fs-8);
}

@media (prefers-reduced-motion: reduce) {
  .video-card,
  .video-thumb img,
  .video-play-btn {
    transition: none;
  }

  .video-card:hover {
    transform: none;
  }

  .video-card:hover .video-thumb img {
    transform: none;
  }
}

/* ====================================================================
   HABER MODALI — çizime göre düzen (2026-09-24)

   Sıra: tarih + kategori + başlık TEK satır · çerçeveli
   görsel · çerçeveli içerik · ayraçlı tarih aralığı · tek eylem düğmesi.

   Görsel artık tam taşan bir başlık resmi değil, çerçeveli bir kutu:
   çizimde "VERİTABANI GÖRSELİ" ayrı bir kutu olarak duruyor ve logo tipi
   görsellerde tam taşma zaten kırpma üretiyordu.
   ==================================================================== */



/* Kapat düğmesi artık akışın içinde; mutlak konumlandırma yok.
   Eskiden görselin üstünde yüzüyordu ve açık görsellerde kayboluyordu. */


.news-modal-head {
  padding: var(--space-3) var(--space-5) 0;
}

/* Rozet BAŞLIĞIN ÜSTÜNDE — çizimde [DENEME VERİTABANI] en üstte duruyor */
.news-modal-head .news-modal-category {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-3-koru);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.news-modal-head .news-modal-title {
  margin: 0;
  color: var(--primary-color);
  font-size: var(--fs-10);
  font-weight: 800;
  line-height: 1.25;
}

/* Görsel: çerçeveli kutu, kırpmasız (logo + afiş karışık geliyor) */
.news-modal-figure {
  margin: var(--space-4) var(--space-5) 0;
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--tertiary-color);
  text-align: center;
}

.news-modal-figure img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: calc(var(--border-radius) - 2px);
}

/* İçerik kutusu — çizimde çerçeveli */
.news-modal .news-modal-body {
  margin: var(--space-4) var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

/* Tarih aralığı: üstünde ve altında ayraç, çizimdeki gibi */
.news-modal .news-modal-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) var(--space-5) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: none;
  border-left: none;
  border-radius: 0;
  color: var(--text-color);
  font-weight: 700;
}

.news-modal .news-modal-range i { color: var(--primary-color); }

/* Eylem alanı: kısa yönlendirme satırı + tek birincil düğme */
.news-modal .news-modal-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: none;
}

.news-modal-note {
  margin: 0;
  color: var(--text-muted, #6b7280);
  font-size: var(--fs-5);
  text-align: center;
}

.news-modal .news-modal-footer .news-modal-btn {
  min-width: 220px;
  justify-content: center;
}

@media (max-width: 575.98px) {
    .news-modal-figure,
  .news-modal .news-modal-body,
  .news-modal .news-modal-range { margin-left: var(--space-4); margin-right: var(--space-4); }
  .news-modal-head .news-modal-title { font-size: var(--fs-9); }
  .news-modal .news-modal-footer .news-modal-btn { min-width: 100%; }
}

[data-theme="dark"] .news-modal-figure { background: var(--bg-card); }

/* ---- Modal içeriği: tipografi ritmi (2026-09-24) --------------------

   ÖNEMLİ — white-space: normal. Dosyanın yukarısında .news-modal-content
   için `white-space: pre-line` tanımlı (satır 3048). O kural içerik DÜZ
   METİNKEN doğruydu: elle konan satır sonlarını koruyordu. Ama içerik artık
   mdToHtml'den geçiyor ve o, ürettiği etiketleri newline ile birleştiriyor
   (out.join). pre-line bu birleştirme satır sonlarını GERÇEK BOŞ SATIR
   olarak çiziyordu: her başlık/paragraf/liste arasına marjın üstüne bir
   satır daha biniyor ve arada kocaman boşluklar kalıyordu. Kullanıcı
   ürün üzerinde gördü.

   Marjlar da sıkılaştırıldı: başlık üstü space-4, altı space-1; paragraf
   space-3; liste space-2. İlk öğenin üst, son öğenin alt marjı sıfır —
   kutu kenarıyla metin arasında çift boşluk olmasın.
   -------------------------------------------------------------------- */
.news-modal-content {
  white-space: normal;
  line-height: 1.65;
}

.news-modal-content > *:first-child { margin-top: 0; }
.news-modal-content > *:last-child  { margin-bottom: 0; }

.news-modal-content p {
  margin: 0 0 var(--space-3);
}

.news-modal-content h3,
.news-modal-content h4,
.news-modal-content h5,
.news-modal-content h6 {
  margin: var(--space-4) 0 var(--space-1);
}

.news-modal-content ul,
.news-modal-content ol {
  margin: var(--space-2) 0 var(--space-3);
  padding-left: 1.4rem;
}

.news-modal-content li {
  margin-bottom: var(--space-1);
}

/* Liste, yüzen görselin YANINDA da düzgün dursun (2026-10-01).
   Listenin iç boşluğu (padding-left) görselin ALTINDA kalıyordu: görselin
   yanına denk gelen maddenin işareti görsele yapışıyor, girintisi
   kayboluyor, alttaki maddeler ise girintili çiziliyordu (Kezana haberi,
   ölçüldü). Her madde kendi biçimlendirme bağlamını kurar (flow-root): kutusu
   görselin yanında daralır, altında tam genişliğe döner; girinti ve işaret
   maddenin KENDİ içindedir, iki durumda da aynı. */
.news-modal-content ul,
.news-modal-content ol {
  padding-left: 0;
  list-style: none;
}

.news-modal-content ol {
  counter-reset: haber-madde;
}

.news-modal-content li {
  display: flow-root;
  position: relative;
  padding-left: 1.4rem;
}

.news-modal-content li::before {
  position: absolute;
  left: 0.35rem;
  top: 0;
}

.news-modal-content ul > li::before {
  content: "\2022";
}

.news-modal-content ol > li {
  counter-increment: haber-madde;
}

.news-modal-content ol > li::before {
  content: counter(haber-madde) ".";
  left: 0;
}

.news-modal-content a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ====================================================================
   HABER MODALI — düzen İÇERİĞE göre (2026-09-24)

   Editör bir şey seçmiyor. guncel-haberler.js `data-duzen` koyuyor:
     metin    → görsel yok, metin tam genişlik
     yanyara  → (yanyana) metin kısa, görsel ve metin yan yana
     kaydir   → görsel solda yüzer, metin etrafından akar ve görselin
                altında tam satır olarak devam eder (Word'deki "metni kaydır")
   Yüzen kutunun genişliği görselin oranından geliyor (--fig-w):
   yatık 320 · kare 260 · dikey 200 px.

   Bu blok dosyanın SONUNDA: aynı sınıflar için yukarıda tanımlı eski
   kurallar var (tam taşan başlık görseli, çerçeveli içerik kutusu, meta
   satırı). Aynı özgüllükte sonraki kazanır.
   ==================================================================== */

/* Başlık satırı: tarih + kategori + başlık AYNI satırda; başlık sığmazsa
   kendi satırına iner (toplam iki satır). X mutlak, sağ üstte. */
.news-modal .news-modal-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) 60px var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-color);
}

.news-modal .news-modal-head .news-modal-date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-3-koru);
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

.news-modal .news-modal-head .news-modal-category {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-1-koru);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.news-modal .news-modal-head .news-modal-title {
  flex: 1 1 22ch;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-8);
  font-weight: 800;
  line-height: 1.3;
  color: var(--primary-color);
  text-wrap: balance;
}

/* Kapat düğmesi başlık şeridinin İÇERİĞİNE dikey ortalı (2026-10-01).
   Eskiden `top: 12px` sabitti: 46 px'lik şeritte düğme ortadan 5 px aşağıda
   duruyordu (üstte 12, altta 2 px boşluk; ölçüldü). Şeridin üst ve alt iç
   boşluğu farklı (space-4 / space-3), bu yüzden kutunun değil içeriğin
   ortası alınır. transform KULLANILMAZ: hover kuralı düğmeyi döndürüyor
   (transform: rotate) ve ortalamayı ezerdi. 16px = düğme yüksekliğinin yarısı. */
.news-modal .news-modal-head .news-modal-close {
  position: absolute;
  top: calc(50% + (var(--space-4) - var(--space-3)) / 2 - 16px);
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
}

.news-modal .news-modal-head .news-modal-close:hover {
  background: var(--tertiary-color);
  border-color: var(--primary-color);
}

/* Gövde: çerçevesiz, yüzdürmeyi kendi içinde kapatır */
.news-modal .news-modal-body {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-1);
  border: none;
  border-radius: 0;
}

.news-modal .news-modal-body::after {
  content: "";
  display: block;
  clear: both;
}

/* Görsel kutusu — ortak */
.news-modal .news-modal-figure {
  margin: 0;
  padding: var(--space-3);
  background: var(--tertiary-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.news-modal .news-modal-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--border-radius) - 2px);
  cursor: zoom-in;
}

/* DÜZEN: kaydır */
.news-modal[data-duzen="kaydir"] .news-modal-figure {
  float: left;
  width: var(--fig-w, 320px);
  max-width: 46%;
  margin: 4px var(--space-5) var(--space-3) 0;
}

/* DÜZEN: yan yana */
.news-modal[data-duzen="yanyana"] .news-modal-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.news-modal[data-duzen="yanyana"] .news-modal-figure {
  flex: 0 0 var(--fig-w, 260px);
  max-width: 46%;
}

.news-modal[data-duzen="yanyana"] .news-modal-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tarih aralığı ve alt alan gövdenin dışında, tam genişlikte */
.news-modal .news-modal-range {
  margin: var(--space-4) var(--space-5) 0;
}

/* Dar ekranda HER düzen alt alta iner: dar sütunda metin sıkışmasın */
@media (max-width: 575.98px) {
  /* Seçicide [data-duzen] ŞART (2026-10-01): onsuz bu kural yukarıdaki
     `.news-modal[data-duzen="kaydir"] .news-modal-figure` kuralından zayıftı
     ve HİÇ işlemiyordu; 390 px'te görsel 138 px genişlikte yüzmeye devam
     ediyor, metin yanında 150 px'e sıkışıyordu (ölçüldü). */
  .news-modal[data-duzen] .news-modal-figure {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--space-4);
  }
  /* Dikey afiş ekranı doldurup metni aşağı itmesin: yükseklik sınırlı, ortalı. */
  .news-modal[data-duzen] .news-modal-figure img {
    width: auto;
    max-width: 100%;
    max-height: 45vh;
    margin: 0 auto;
  }
  .news-modal[data-duzen="yanyana"] .news-modal-body { display: block; }
  .news-modal .news-modal-head { padding-right: 54px; padding-left: var(--space-4); }
  .news-modal .news-modal-head .news-modal-title { font-size: var(--fs-7); }
}

[data-theme="dark"] .news-modal .news-modal-figure { background: var(--bg-card); }

/* ÇOK YATAY KART GÖRSELİ (banner, en/boy >= 2) — 2026-09-29
   Kutu 200x150 (4:3) sabitti; 3360x1280 (2,62:1) haber görselleri sığınca
   üstte ve altta boşluk kalıyordu (contain kırpmadığı için bilerek). Çok yatay
   görselde kutu görselin OWN oranını alır: yükseklik otomatik, boşluk yok.
   Sınıfı core/modal-duzen.js > kartGorselleriniIsaretle koyar; dikey afişler
   ve 16:9 görseller eski kutuda kalır. Liste görünümünde görsel sütunu
   200 yerine 340 px: 340x130 (2,62:1). `align-self` şart: flex satırında
   `height: auto` görsel karta kadar UZAYIP boşluğu geri getirirdi. */
.news-card-image.news-card-image--yatay {
  height: auto;
}

.news-grid.list-view .news-card-image.news-card-image--yatay {
  width: 340px;
  height: auto;
  align-self: center;
}

@media (max-width: 768px) {
  .news-grid.list-view .news-card-image.news-card-image--yatay {
    width: 100%;
    height: auto;
  }
}

/* =====================================================================
   KİTAP GALERİSİ (kapak + PDF) — component: kitap-galerisi
   Kaynak: eski sitedeki TurkKlasikleri.html "magazine-block" ızgarası.
   Kartın TAMAMI bağlantıdır; eskiden kapak ve başlık iki ayrı bağlantıydı.
   Ölçü birimleri ve renkler değişkenlerden gelir, sabit renk yazılmaz —
   koyu tema bedava gelsin.
   ===================================================================== */
.component-kitap-galerisi {
  --kitap-columns: 4;
  margin-bottom: var(--space-8);
}

.kitap-galerisi-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}

@media (min-width: 992px) {
  .kitap-galerisi-grid {
    grid-template-columns: repeat(var(--kitap-columns), minmax(0, 1fr));
  }
}

.kitap-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.kitap-card:hover,
.kitap-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
  text-decoration: none;
  color: inherit;
}

.kitap-card:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Bağlantısı olmayan kitap: kart yine çizilir ama tıklanamaz görünür. */
.kitap-card-pasif {
  opacity: 0.7;
  cursor: default;
}

/* ---- Kapak ---- */
.kitap-kapak {
  position: relative;
  aspect-ratio: 3 / 4;
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
  line-height: 0;
}

.kitap-kapak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.kitap-card:hover .kitap-kapak img {
  transform: scale(1.04);
}

/* Kapağı olmayan kitap: kırık resim ikonu yerine kitap ikonu. */
.kitap-kapak-yok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  font-size: 2.5rem;
  line-height: 1;
}

/* Rozet: "Yeni Yazılı" / "Eski/Yeni Yazılı". Eski sayfada kapağın altında
   ayrı bir şerit (issn-bar) vardı; kapağın üstüne alındı, kart kısaldı. */
.kitap-rozet {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: var(--fs-2-koru);
  font-weight: var(--font-weight-medium);
  text-align: center;
  line-height: 1.3;
}

/* ---- Bilgi ---- */
.kitap-bilgi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  flex: 1 1 auto;
}

.kitap-ad {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
  line-height: 1.3;
}

.kitap-yazar {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.kitap-aciklama {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-color);
  line-height: 1.45;
}

/* İndirme satırı en alta yapışır; kartlar farklı metin uzunluklarında da
   aynı hizada bitsin. */
.kitap-eylem {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--primary-color);
}

.kitap-eylem .bi {
  font-size: 1.05em;
}

.kitap-sayfa {
  margin-inline-start: auto;
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

.component-kitap-galerisi.is-empty .kitap-galerisi-empty-text {
  margin: 0;
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
}

[data-theme="dark"] .kitap-card {
  background: var(--bg-card);
}

[data-theme="dark"] .kitap-ad {
  color: var(--text-color);
}

[data-theme="dark"] .kitap-kapak {
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 575px) {
  .kitap-galerisi-grid {
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  }

  .kitap-bilgi {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
}

/* Rozetin IKINCI bicimi: ESKI SITEDEKI `issn-bar`in birebir kopyasi.
   Degerler gercek sayfadan OLCULDU (2026-09-26, Playwright, 1400px):
   mutlak konum, beyaz zemin, #333 metin, SOLA hizali, 5px/10px ic bosluk,
   ustte 1px #e6e7e8 cizgi, metinle ayni renkte bilgi ikonu; bant kapagin
   alt kenarina BINIYOR. Ilk denemede bunlarin hicbiri yoktu — isaretlemeye
   bakip gorunus varsayilmisti.

   Tek bilincli ayrilik: yazi boyutu sabit 16px degil var(--fs-7-koru).
   Bugun tam 16px ediyor; Genel Ayarlar > Yazi Boyutu buyutulurse birlikte
   buyusun diye. Sabit piksel, o ayari bu eleman icin sessizce kapatirdi. */
.kitap-rozet-eski {
  position: absolute;
  inset-inline: 0;
  /* Eski sayfada bant kapagin EN ALTINDA degil, alt kenardan biraz
     yukarida duruyor ve altinda bir serit kapak gorunuyor (olculdu:
     359 px'lik kapakta 27 px = %7,5). Piksel degil yuzde yazildi;
     kart genisligi ekrana gore degisiyor. */
  bottom: 7.5%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 5px 10px;
  background: #fff;
  color: #333;
  border-top: 1px solid #e6e7e8;
  font-size: var(--fs-7-koru);
  line-height: 1.35;
  text-align: start;
}

.kitap-rozet-eski .bi {
  color: inherit;
  font-size: 1em;
}

/* Koyu temada bembeyaz bir bant goz alirdi; eski sitenin koyu temasi
   yoktu, bu yuzden karsiligi burada TASARLANDI (olcum degil, karar). */
[data-theme="dark"] .kitap-rozet-eski {
  background: #1b1f24;
  color: #e6e7e8;
  border-top-color: rgba(255, 255, 255, 0.15);
}

/* Bağlantı metni kendi kutusunda: metin boş bırakılabiliyor (kodda gömülü
   yazı YOK), o durumda yalnızca ikon kalır ve satır dar görünmemeli. */
.kitap-eylem-metin {
  min-width: 0;
}

/* Modal Düğmesi (modal-dugme, 2026-09-29): kütüphaneden modal açan düğme ya
   da bağlantı. Açma işi core/modal-kutuphanesi.js'te; burada yalnızca yer. */
.component-modal-dugme {
  margin: 0.75rem 0;
}
.component-modal-dugme.hiza-orta {
  text-align: center;
}
.component-modal-dugme.hiza-sag {
  text-align: right;
}
.component-modal-dugme .modal-dugme-link {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
}

/* ============================================
   Görsel (gorsel) — tek resim bileşeni
   Kutu dili: varsayılan yumuşak köşe + hafif gölge; "kenarsiz" çıplak.
   Genişlik figure'a, hizalama margin'e; sütun içinde her zaman sığar.
   ============================================ */
.component-gorsel {
  margin: var(--space-4) 0;
  max-width: 100%;
}

.component-gorsel.genislik-genis { max-width: 720px; }
.component-gorsel.genislik-orta  { max-width: 480px; }
.component-gorsel.genislik-kucuk { max-width: 320px; }

.component-gorsel.hiza-orta { margin-left: auto; margin-right: auto; }
.component-gorsel.hiza-sag  { margin-left: auto; }

.component-gorsel .gorsel-kap {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  width: 100%;
  cursor: default;
}

.component-gorsel a.gorsel-kap { cursor: pointer; }
.component-gorsel .gorsel-buyut { cursor: zoom-in; }

.component-gorsel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.component-gorsel.kenarsiz img {
  border-radius: 0;
  box-shadow: none;
}

.component-gorsel figcaption {
  font-size: var(--fs-4-koru);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* Lightbox örtüsü — dış kitaplık yok. Z katmanı sitenin modallarının
   üstünde kalmak zorunda değil (ikisi aynı anda açılmaz); 1200 yeterli. */
.gorsel-lb {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(10, 15, 22, 0.85);
  display: grid;
  place-items: center;
  padding: 24px;
}

.gorsel-lb figure { margin: 0; max-width: min(92vw, 960px); }

.gorsel-lb img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-sm);
}

.gorsel-lb figcaption {
  color: #cfd8e3;
  text-align: center;
  font-size: var(--fs-4-koru);
  margin-top: var(--space-2);
}

.gorsel-lb-kapat {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 1.6rem;
  line-height: 1;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .gorsel-lb { animation: gorsel-lb-ac 0.15s ease-out; }
  @keyframes gorsel-lb-ac { from { opacity: 0; } to { opacity: 1; } }
}

/* ============================================
   Yerleşim (yerlesim) — sütunlu kap
   Sütun payları satır içi flex değerinden (şablon tablosu JS'te);
   burada yalnız dizilim, boşluk, hiza ve mobil kırılım var.
   min-width: 0 şart: uzun içerik sütunu sayfadan taşırmasın.
   ============================================ */
.component-yerlesim {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: var(--space-4) 0;
}

.component-yerlesim > .yrl-sutun { min-width: 0; }

.component-yerlesim.hiza-ortala { align-items: center; }
.component-yerlesim.hiza-uzat   { align-items: stretch; }
.component-yerlesim.bosluk-dar   { gap: var(--space-2); }
.component-yerlesim.bosluk-genis { gap: var(--space-6); }

/* Sütundaki ilk/son bileşenin kendi dikey margin'i sütunları kaydırmasın */
.component-yerlesim > .yrl-sutun > :first-child { margin-top: 0; }
.component-yerlesim > .yrl-sutun > :last-child { margin-bottom: 0; }

/* "uzat" hizasında görsel sütunu komşusunun boyuna uyar: figure sütunu
   doldurur, resim kalan alanı kaplar (Self Check'teki "3 kutu boyunda
   resim"). Mobilde sütunlar alt alta inince doğal yüksekliğe döner. */
.component-yerlesim.hiza-uzat > .yrl-sutun > .component-gorsel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.component-yerlesim.hiza-uzat > .yrl-sutun > .component-gorsel .gorsel-kap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.component-yerlesim.hiza-uzat > .yrl-sutun > .component-gorsel .gorsel-kap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .component-yerlesim { flex-direction: column; }
  .component-yerlesim.mobil-ters { flex-direction: column-reverse; }
  .component-yerlesim > .yrl-sutun { flex: 1 1 auto !important; width: 100%; }

  .component-yerlesim.hiza-uzat > .yrl-sutun > .component-gorsel { height: auto; display: block; }
  .component-yerlesim.hiza-uzat > .yrl-sutun > .component-gorsel .gorsel-kap { position: static; }
  .component-yerlesim.hiza-uzat > .yrl-sutun > .component-gorsel .gorsel-kap img {
    position: static;
    height: auto;
  }
}


/* ==========================================
   KOMPAKT GÖRÜNÜM AYARLARI (2026-10-07)
   İkonlu liste (ikl-*), bilgi kutusu (bkt-*), akordeon cevabı (govde-dar).
   Sınıfları basan TEK yer: ComponentRenderer.gorunumSiniflari (ikonlu liste,
   bilgi kutusu) ve accordion/sss.js'teki govdeBoslugu. Ayar boşsa hiçbir sınıf
   basılmaz; bu bloğun bugünkü görünüme etkisi yoktur. Her ayar AYRI çalışır:
   yoğunluk, başlık düzeni ve sütun birbirinden bağımsız seçilir.
   Bu blok VARYANT kurallarından SONRA durmalı: aynı özgüllükte, sonra geldiği
   için kazanır. Zaman çizelgesi bloğundan ÖNCE kalır (o test kendi başlığından
   dosya sonuna kadar her seçiciyi kendine ait sayar).
   ========================================== */

/* Ayarlı listede açıklama kabı <div> (<p> içinde <p> bölünüyordu). İçindeki
   kalın yazı satır içinde kalır; eski kural her <strong>'u blok yapıp ayrı
   satıra itiyordu ("Eğer bina dışındaysanız / www... / adresinden"). */
.component-icon-list .list-item .list-item-aciklama > p {
  margin: 0;
}

.component-icon-list .list-item .list-item-aciklama strong {
  display: inline;
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* --- İkonlu liste: yoğunluk --- */
.component-icon-list.ikl-kompakt {
  margin: var(--space-3) 0;
}

.component-icon-list.ikl-kompakt .list-title {
  margin-bottom: var(--space-2);
}

.component-icon-list.ikl-kompakt .list-wrapper {
  gap: var(--space-2);
}

.component-icon-list.ikl-kompakt .list-item {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-3);
  border-width: 1px;
  min-height: 0;
}

.component-icon-list.ikl-kompakt .list-item > i {
  font-size: calc(1.15rem * var(--carpan-serbest));
  min-width: 1.5em;
}

.component-icon-list.ikl-kompakt .list-item span,
.component-icon-list.ikl-kompakt .list-item-content {
  line-height: 1.45;
}

.component-icon-list.ikl-kompakt .list-item-content > strong {
  margin-bottom: 0;
}

/* --- İkonlu liste: öğe başlığı açıklamayla aynı satırda --- */
.component-icon-list.ikl-yaninda .list-item-content {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-width: 0;
}

.component-icon-list.ikl-yaninda .list-item-content > strong {
  flex: 0 0 auto;
  margin: 0;
}

.component-icon-list.ikl-yaninda .list-item-content > .list-item-aciklama {
  flex: 1 1 12rem;
  min-width: 0;
}

/* --- İkonlu liste: sütun sayısı --- */
.component-icon-list.ikl-sutun-1 .list-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

.component-icon-list.ikl-sutun-2 .list-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.component-icon-list.ikl-sutun-3 .list-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .component-icon-list.ikl-sutun-2 .list-wrapper,
  .component-icon-list.ikl-sutun-3 .list-wrapper {
    grid-template-columns: 1fr;
  }
}

/* --- Bilgi kutusu: yoğunluk --- */
.component-info-box.bkt-kompakt {
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  gap: var(--space-1);
  border-width: 1px;
}

.component-info-box.bkt-kompakt .info-title {
  gap: var(--space-2);
}

.component-info-box.bkt-kompakt .info-title i {
  font-size: calc(1.15rem * var(--carpan-serbest));
  min-width: 1.5em;
}

/* --- Bilgi kutusu: başlık içerikle aynı satırda --- */
.component-info-box.bkt-yaninda {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
}

.component-info-box.bkt-yaninda .info-title {
  flex: 0 0 auto;
}

.component-info-box.bkt-yaninda .info-content {
  flex: 1 1 14rem;
  min-width: 0;
}

/* --- Akordeon: cevabın iç boşluğu "dar" --- */
.accordion-body.govde-dar {
  padding: var(--space-3) var(--space-4);
}

.accordion-body.govde-dar > [class*="component-"],
.accordion-body.govde-dar > [data-mgr-path] > [class*="component-"] {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.accordion-body.govde-dar > :first-child,
.accordion-body.govde-dar > [data-mgr-path]:first-child > [class*="component-"] {
  margin-top: 0;
}

.accordion-body.govde-dar > :last-child,
.accordion-body.govde-dar > [data-mgr-path]:last-child > [class*="component-"] {
  margin-bottom: 0;
}

/* "Dar" gövdede uyarı kutusu da daralır. Kenarlık hover'da 4px -> 8px kalınlaşır;
   sol dolgu aynı miktarda azalır ki içerik kaymasın (temel kuralın aynısı). */
.accordion-body.govde-dar .component-alert {
  padding: var(--space-3) var(--space-4);
}

.accordion-body.govde-dar .component-alert:hover {
  padding-left: calc(var(--space-4) - 4px);
}

.accordion-body.govde-dar .alert-content ul li {
  margin-bottom: var(--space-1);
}

/* ==========================================
   SIZINTI DÜZELTMELERİ + KOMPAKT (2026-10-15)
   ========================================== */

/* Adım kartı (step-cards): .step-content / .step-title / .step-number adlarını
   "Adım Rehberi" (step-guide) de kullanıyor ve onun kuralları KAPSAMSIZ yazılmış.
   Ölçüldü: kart içeriğine 1px çerçeve + 12px köşe + üzerine gelince kayma,
   başlığa 12.8px alt boşluk, numaraya gölge sızıyordu (kartın içinde ikinci kutu).
   Adım Rehberi'ne dokunulmaz; sızan özellikler burada kart için geri alınır. */
.component-step-card .step-content {
  flex: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: none;
}

.component-step-card .step-content:hover {
  transform: none;
  box-shadow: none;
}

.component-step-card .step-title {
  margin-bottom: 0;
}

.component-step-card .step-number {
  box-shadow: none;
}

.component-step-card .step-content > p:last-child {
  margin-bottom: 0;
}

/* Numaralı liste: açıklama mdToHtml'den <p> olarak gelir; son paragrafın alt
   boşluğu kutunun altında boşluk bırakıyordu. */
.component-numbered-list .numbered-description > p:last-child {
  margin-bottom: 0;
}

/* Yatay ikonlu liste (telefon / e-posta kutuları): öğe tek metinden gelir
   ("**Telefon**\n\n[numara]"); mdToHtml iki paragraf üretir, ilk <p>'nin açılışı
   kırpıldığı için araya BOŞ bir <p> girer. Ölçüldü: başlıkla numara arası bir
   satır boşluk. Kalın başlık kendi satırında kalır, boş paragraf düşer. */
.component-icon-list.horizontal-variant .list-item span > p {
  margin: 0;
}

.component-icon-list.horizontal-variant .list-item span > p:empty {
  display: none;
}

.component-icon-list.horizontal-variant .list-item span > strong {
  margin-bottom: 0;
}

/* --- Adım kartı: yoğunluk --- */
.component-step-cards.adm-kompakt {
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.component-step-cards.adm-kompakt .component-step-card {
  border-width: 1px;
}

.component-step-cards.adm-kompakt .step-header {
  padding: var(--space-2) var(--space-4);
  gap: var(--space-3);
}

.component-step-cards.adm-kompakt .step-number {
  width: 28px;
  height: 28px;
  font-size: var(--fs-5-koru);
}

.component-step-cards.adm-kompakt .step-title {
  font-size: var(--fs-7);
}

.component-step-cards.adm-kompakt .step-toggle {
  font-size: var(--fs-6);
}

/* İçerik başlığın hizasından başlar: numara (28px) + boşluk. */
.component-step-cards.adm-kompakt .component-step-card.open .step-content {
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 28px + var(--space-3));
}

/* Dar ekranda girinti yer yiyor (390px'te satır başına ~6 karakter): içerik kenardan. */
@media (max-width: 576px) {
  .component-step-cards.adm-kompakt .component-step-card.open .step-content {
    padding-left: var(--space-4);
  }
}

/* --- Numaralı liste: yoğunluk --- */
.component-numbered-list.nml-kompakt {
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.component-numbered-list.nml-kompakt .numbered-item {
  padding: var(--space-2) var(--space-4);
  gap: var(--space-3);
  align-items: center;
}

.component-numbered-list.nml-kompakt .numbered-badge {
  min-width: 28px;
  height: 28px;
  font-size: var(--fs-5-koru);
  margin-top: 0;
}

.component-numbered-list.nml-kompakt .numbered-title {
  margin-bottom: 0;
}

/* --- Yatay ikonlu liste: yoğunluk (iletişim / telefon kutuları) --- */
.component-icon-list.horizontal-variant.ikl-kompakt .list-item {
  padding: var(--space-2) var(--space-3);
}

.component-icon-list.horizontal-variant.ikl-kompakt .list-item > i {
  font-size: calc(1.15rem * var(--carpan-serbest));
  min-width: 1.5em;
}

.component-icon-list.horizontal-variant.ikl-kompakt .list-item span {
  line-height: 1.4;
}

/* Tablo başlık hücresi de mdToHtml'den <p> olarak gelir; gövde hücresindeki
   aynı düzeltmenin (td > p:last-child) başlıktaki eşi. Ölçüldü: "Gün / Saat"
   satırı paragraf boşluğuyla gereksiz yüksekti. */
.component-table thead tr th > p:last-child {
  margin-bottom: 0;
}

/* --- Tablo: görünüm ayarları (tbl-*) — çalışma saatleri vb. ---
   APC özet tablosu ve CC lisans tablosu bu sınıfları ALMAZ (kendi çizicileri). */
.component-table-container.tbl-kompakt {
  margin: var(--space-3) 0;
}

.component-table-container.tbl-kompakt .table-title {
  margin-bottom: var(--space-2);
}

.component-table-container.tbl-kompakt .table-responsive {
  border-width: 1px;
}

.component-table-container.tbl-kompakt .component-table thead tr th,
.component-table-container.tbl-kompakt .component-table tbody tr td {
  padding: var(--space-2) var(--space-4);
}

.component-table-container.tbl-kompakt .component-table tbody tr td:first-child {
  gap: var(--space-2);
}

/* "td i" ile bitmez: ApcOzetGorunumTesti en özgül genel "td i" kuralını eşik
   alır; bu kural yalnız tbl-kompakt kabında geçerli, APC tablosuna uygulanmaz. */
.component-table-container.tbl-kompakt .component-table i {
  font-size: calc(1.05rem * var(--carpan-serbest));
}

/* Başlık satırı: açık zemin (yumuşak) */
.component-table-container.tbl-baslik-acik .component-table thead {
  background: var(--tertiary-color);
  color: var(--primary-color);
}

.component-table-container.tbl-baslik-acik .component-table thead tr th {
  border-bottom: 2px solid var(--primary-color);
}

/* Başlık satırı: zeminsiz, yalnız alt çizgi */
.component-table-container.tbl-baslik-cizgi .component-table thead {
  background: transparent;
  color: var(--primary-color);
}

.component-table-container.tbl-baslik-cizgi .component-table thead tr th {
  border-bottom: 2px solid var(--primary-color);
  font-size: var(--fs-5-koru);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.component-table-container.tbl-baslik-acik .component-table thead tr th > *,
.component-table-container.tbl-baslik-cizgi .component-table thead tr th > * {
  color: inherit;
}

/* Satırlar dönüşümlü zemin */
.component-table-container.tbl-zebra .component-table tbody tr:nth-child(even) {
  background: var(--tertiary-color);
}

/* İlk sütun dışındaki sütunların hizası */
.component-table-container.tbl-hiza-orta .component-table tr > :not(:first-child) {
  text-align: center;
}

.component-table-container.tbl-hiza-sag .component-table tr > :not(:first-child) {
  text-align: right;
}

/* --- Çift satırlı başlık bandı: yoğunluk (bsl-kompakt) --- */
.component-heading.double-icon.bsl-kompakt,
.component-heading.double-plain.bsl-kompakt {
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}

.component-heading.double-icon.bsl-kompakt .heading-icon {
  font-size: calc(1.35rem * var(--carpan-serbest));
  min-width: 35px;
}

.component-heading.double-icon.bsl-kompakt .heading-text h3,
.component-heading.double-plain.bsl-kompakt h3 {
  font-size: var(--fs-8);
}

.component-heading.double-icon.bsl-kompakt .heading-text p,
.component-heading.double-plain.bsl-kompakt p {
  margin-top: 0;
  font-size: var(--fs-6);
}

.component-heading.bsl-kompakt .component-status-badge {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-5-koru);
  border-width: 1px;
}

/* --- Personel listesi: sütun başlıkları + "dört sütun" düzeni ---
   Sayfa ayarı personelListesi.sutunBasliklari / sutunDuzeni. Başlık satırı
   yalnız bir metin girilmişse çizilir; mobilde (kişi iki satıra katlanır)
   sütun hizası olmadığı için gizlenir. Seçici [scope] taşır: .pl-ad/.pl-tel
   gibi sütun kurallarının (yazı rengi/boyu) başlık hücresini ezmemesi için. */
.personel-liste thead th[scope="col"] {
  height: 32px;
  border-top: 0;
  border-bottom: 2px solid var(--primary-color);
  font-size: var(--fs-4-koru);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: transparent;
}

.personel-liste.eposta-ikon thead th[scope="col"].pl-eposta {
  padding: 0;
  text-align: center;
}

/* Dört sütun: ad %32, ünvan %32, telefon %18, e-posta %18 — telefon ve e-posta
   sağ kenara yaslanmaz, kendi sütunlarında durur. */
/* Yalnız masaüstü: mobilde kişi ızgaraya katlanır, yüzde genişlikler orada adı
   0px'e sıkıştırıyordu (ölçüldü 390px). */
@media (min-width: 769px) {
  /* Başlık varken e-posta sütunu başlık yazısı kadar genişler (44px'e sığmıyordu). */
  .personel-liste:has(> thead) .pl-eposta {
    width: 6rem;
  }

  .personel-liste.pl-esit .pl-ad {
    width: 32%;
  }

  .personel-liste.pl-esit .pl-unvan {
    width: 32%;
  }

  .personel-liste.pl-esit .pl-tel {
    width: 18%;
  }

  .personel-liste.pl-esit .pl-eposta,
  .personel-liste.pl-esit:has(> thead) .pl-eposta {
    width: 18%;
  }
}

@media (max-width: 768px) {
  .personel-liste thead {
    display: none;
  }
}

/* --- Arama bölümü (haberler, duyurular, SSS, kime sormalıyım): kompakt ---
   Veriden gelmez, dört sayfanın ortak görünümü (kullanıcı kararı 2026-10-15:
   "fazla büyük"). 48px'lik girdi/düğmeler 40px, kategori hapları ince. */
.search-section {
  padding: var(--space-3);
}

.search-section .search-and-controls {
  gap: var(--space-2);
}

.search-section .search-input-group {
  height: 40px;
}

.search-section .sort-btn,
.search-section .control-btn,
.search-section .view-btn {
  height: 40px;
  padding: var(--space-2) var(--space-3);
  border-width: 1px;
}

.search-section .search-and-controls {
  margin-bottom: 0;
}

/* Görünüm düğmeleri grubu çerçeve + iç boşlukla 50px'ti, sıralama düğmesi 40px
   (2026-10-15, kullanıcı: "eşit değil"). Grup dışı 40px: 1 + 2 + 34 + 2 + 1. */
.search-section .view-toggle-group {
  gap: var(--space-1);
  padding: 2px;
  box-sizing: border-box;
  height: 40px;
}

.search-section .view-toggle-btn {
  height: 34px;
  width: 34px;
  min-width: 34px;
  padding: 0;
  border-width: 1px;
}

/* Arama satırı ile kategori hapları arası: 35px idi (grup 50px + 16px dış +
   9.6px iç boşluk). */
.search-section .category-filters {
  padding: var(--space-2) 0 0;
  gap: var(--space-2);
}

.search-section .category-btn {
  padding: var(--space-1) var(--space-4);
  border-width: 1px;
  font-size: var(--fs-5-koru);
}

.search-section .category-btn:hover,
.search-section .category-btn.active {
  transform: none;
}

@media (max-width: 992px) {
  .search-section .sort-btn,
  .search-section .control-btn,
  .search-section .view-btn {
    width: 40px;
    padding: var(--space-2);
  }
}

/* Dar ekranda arama tam satır; sıralama ve görünüm düğmeleri ALTINDA TEK
   satırda (eskiden üst üste üç satıra düşüyordu: ölçüldü 390px'te 176px). */
@media (max-width: 768px) {
  .search-section .search-and-controls {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .search-section .search-and-controls > .search-wrapper {
    flex: 1 1 100%;
  }

  .search-section .search-and-controls > .view-toggle-group {
    margin-left: auto;
  }
}

/* Yapışkan hâl: tam genişlik ince şerit, içerik normal hâldeki hizada.
   Konum yalnızca CSS'ten (search-filter-manager.js satır içi top yazmaz):
   header görünürken altında, gizlenince en üstte; geçiş header'la (0.4 sn) aynı. */
.search-section.sticky {
  top: var(--header-height);
  max-width: none;
  padding: var(--space-2) 0;
  transition: top 0.4s ease;
}

/* --yapiskan-x / --yapiskan-w: search-filter-manager.js yer tutucudan ölçer.
   SSS ve "Kime Sormalıyım"da kabın doğrudan çocuğu .search-wrapper'dır. */
.search-section.sticky > .search-and-controls,
.search-section.sticky > .search-wrapper {
  max-width: none;
  width: var(--yapiskan-w, auto);
  margin: 0 0 0 var(--yapiskan-x, 0);
  padding: 0 calc(var(--space-3) + 1px);
  box-sizing: border-box;
}

body:has(.header-hide) .search-section.sticky {
  top: 0;
}

/* ============================================================
   Bölüm sekmeleri (core/bolum-sekme.js, 2026-10-15) — sayfanın içerik
   bölümleri "Sekme Adı" taşıyorsa sekme olarak gösterilir (bugün Koleksiyon
   & Kat Planı: Koleksiyon | İdari Birimler). Panel `hidden` ile gizlenir;
   `display` veren bir sınıf [hidden]'ı ezmesin diye açıkça yazılır.
   ============================================================ */
.bolum-sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  border-bottom: 2px solid var(--border-color);
}

.bolum-sekme {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 0.75rem 1.25rem;
  font: inherit;
  font-size: calc(1.05rem * var(--carpan-serbest, 1));
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.bolum-sekme:hover {
  color: var(--primary-color);
  background: var(--bg-hover);
}

.bolum-sekme[aria-selected="true"] {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.bolum-sekme:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.bolum-sekme-paneli[hidden] {
  display: none !important;
}

/* ============================================================
   Zaman Çizelgesi (zaman-cizelgesi, 2026-09-29) — CodePen'den UYARLANDI:
   tutsplus, https://codepen.io/tutsplus/pen/QNeJgR (herkese açık kalem, MIT).
   Süreç ve gerekçeler: BILESEN-EKLEME.md. Kalemdeki genel seçiciler
   (*, body, a, h1, time, .container) ATILDI; her kural bu bileşenin sınıfı
   altında. Renkler site değişkenlerinden (koyu tema kendiliğinden).
   ============================================================ */
.component-zaman-cizelgesi {
  margin: 1.5rem 0;
}
.component-zaman-cizelgesi .zc-baslik {
  margin: 0 0 1rem;
  text-align: center;
  color: var(--primary-color);
}
.component-zaman-cizelgesi .zc-liste {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
/* Orta çizgi (kalemde her <li> 6px genişliğinde bir çubuktu) */
.component-zaman-cizelgesi .zc-liste::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background: var(--border-color);
  border-radius: 2px;
}
/* Kalemdeki 400px / -439px sihirli sayılar yerine yarım genişlik */
.component-zaman-cizelgesi .zc-oge {
  position: relative;
  width: 50%;
  padding: 0 2.25rem 1.5rem 0;
}
.component-zaman-cizelgesi .zc-oge:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 1.5rem 2.25rem;
}
/* Çizgi üzerindeki işaret */
.component-zaman-cizelgesi .zc-oge::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-color);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--primary-color);
  z-index: 1;
  transition: background 0.5s ease-in-out;
}
.component-zaman-cizelgesi .zc-oge:nth-child(even)::after {
  right: auto;
  left: -11px;
}
.component-zaman-cizelgesi.zc-isaret-kare .zc-oge::after {
  border-radius: 3px;
}
/* clip-path'li işaretlerde çerçeve/gölge görünmez: düz renk */
.component-zaman-cizelgesi.zc-isaret-eskenar-dortgen .zc-oge::after,
.component-zaman-cizelgesi.zc-isaret-yildiz .zc-oge::after,
.component-zaman-cizelgesi.zc-isaret-yedigen .zc-oge::after {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--primary-color);
}
.component-zaman-cizelgesi.zc-isaret-eskenar-dortgen .zc-oge::after {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.component-zaman-cizelgesi.zc-isaret-yildiz .zc-oge::after {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.component-zaman-cizelgesi.zc-isaret-yedigen .zc-oge::after {
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
/* Kart ve çizgiye bakan ok */
.component-zaman-cizelgesi .zc-kart {
  position: relative;
  background: var(--bg-card);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.component-zaman-cizelgesi .zc-kart::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  right: -7px;
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  transform: rotate(45deg);
}
.component-zaman-cizelgesi .zc-oge:nth-child(even) .zc-kart::before {
  right: auto;
  left: -7px;
  transform: rotate(-135deg);
}
.component-zaman-cizelgesi .zc-tarih {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  font-size: var(--fs-6);
  color: var(--primary-color);
}
.component-zaman-cizelgesi .zc-oge-baslik {
  margin: 0 0 0.35rem;
  font-size: var(--fs-6);
}
.component-zaman-cizelgesi .zc-metin > :last-child {
  margin-bottom: 0;
}
/* Kaydırınca belirme — YALNIZCA gözlemci kurulunca (.zc-hazir). Gözlemci
   yoksa, hareket azaltılmışsa ya da kurulum hata verirse içerik GÖRÜNÜR kalır
   (kalemde varsayılan gizliydi; bir betik hatası içeriği kalıcı saklardı). */
.component-zaman-cizelgesi.zc-hazir .zc-kart {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.component-zaman-cizelgesi.zc-hazir .zc-oge:nth-child(odd) .zc-kart {
  transform: translateX(-40px);
}
.component-zaman-cizelgesi.zc-hazir .zc-oge.zc-gorundu .zc-kart {
  opacity: 1;
  transform: none;
}
.component-zaman-cizelgesi.zc-hazir .zc-oge.zc-gorundu::after {
  background: var(--secondary-color);
}
@media (prefers-reduced-motion: reduce) {
  .component-zaman-cizelgesi.zc-hazir .zc-kart,
  .component-zaman-cizelgesi.zc-hazir .zc-oge:nth-child(odd) .zc-kart {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Dar ekran: çizgi sola, bütün kartlar sağda (kalemdeki 600px kırılımı) */
@media (max-width: 700px) {
  .component-zaman-cizelgesi .zc-liste::before {
    left: 11px;
    transform: none;
  }
  .component-zaman-cizelgesi .zc-oge,
  .component-zaman-cizelgesi .zc-oge:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 1.25rem 2.5rem;
  }
  .component-zaman-cizelgesi .zc-oge::after,
  .component-zaman-cizelgesi .zc-oge:nth-child(even)::after {
    right: auto;
    left: 2px;
  }
  .component-zaman-cizelgesi .zc-kart::before,
  .component-zaman-cizelgesi .zc-oge:nth-child(even) .zc-kart::before {
    right: auto;
    left: -7px;
    transform: rotate(-135deg);
  }
  .component-zaman-cizelgesi.zc-hazir .zc-kart,
  .component-zaman-cizelgesi.zc-hazir .zc-oge:nth-child(odd) .zc-kart {
    transform: translateX(20px);
  }
  /* Yukaridaki kural ayni ozgullukte ve SONRA geldigi icin "gorundu"daki
     transform: none'u ezerdi; kartlar mobilde 20px kaymis kalirdi. */
  .component-zaman-cizelgesi.zc-hazir .zc-oge.zc-gorundu .zc-kart {
    transform: none;
  }
}