/* =============================================================
   YILMEK — Components
   ============================================================= */

/* ---------- HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--antrasit);
}
.brand:hover { text-decoration: none; }

/* İki logo AYRI bağlantıdır (belediye → resmî site, YILMEK → ana sayfa).
   `display: flex` şart: satır içi <a>, <img>'i metin taban çizgisine oturtur
   ve altında birkaç piksellik açıklanamayan boşluk bırakır. */
.brand-baglanti {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
}
.brand-baglanti:hover { text-decoration: none; opacity: .85; }
.brand-baglanti:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
}
/* Koyu alt bilgi zemininde petrol rengi odak halkası seçilmez. */
.footer-brand .brand-baglanti:focus-visible {
  outline-color: white;
}

.brand-mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--petrol);
  color: white;
  border-radius: var(--radius-md);
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.brand-logo {
  height: 48px;
  width: auto;
  max-width: 280px;
  display: block;
  object-fit: contain;
}
.brand-logo-belediye {
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
}
.brand-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 var(--space-2);
}
@media (max-width: 1024px) {
  .brand-logo, .brand-logo-belediye { height: 40px; }
  .brand-divider { height: 30px; }
}
@media (max-width: 480px) {
  .brand-logo { height: 32px; max-width: 160px; }
  .brand-logo-belediye { height: 32px; }
  .brand-divider { height: 24px; margin: 0 6px; }
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--petrol-koyu);
  letter-spacing: -0.01em;
}
.brand-tag {
  font-size: 0.72rem;
  color: var(--tas-grisi);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---------- ANA MENÜ (tek işaretleme, iki görünüm) ----------
   Aynı <nav> hem masaüstünde satır içi hem mobilde açılır çekmece olur.
   Mobilde position:fixed olduğu için DOM'daki yeri görünümü etkilemez —
   bu yüzden ayrı bir mobil kopya GEREKMEZ. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.site-nav a {
  padding: var(--space-2) var(--space-3);
  color: var(--antrasit);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition);
}
.site-nav a:hover {
  background: var(--petrol-soluk);
  color: var(--petrol-koyu);
  text-decoration: none;
}
.site-nav a.active {
  color: var(--petrol);
  background: var(--petrol-soluk);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: white;
  border-radius: var(--radius-md);
  color: var(--antrasit);
  cursor: pointer;
  transition: all var(--transition);
}
.icon-btn:hover {
  background: var(--petrol-soluk);
  border-color: var(--petrol);
  color: var(--petrol);
}

.mobile-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-toggle { display: grid; }

  /* Aynı menü — bu kez çekmece olarak. Kapalıyken display:none olduğu için
     bağlantılar klavye sırasına da girmez (erişilebilirlik). */
  .site-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: white;
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--space-5);
    z-index: 99;
    box-shadow: var(--shadow-lg);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: var(--space-3); font-size: 1rem; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-govde);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--petrol);
  color: white;
  box-shadow: var(--shadow-petrol);
}
.btn-primary:hover {
  background: var(--petrol-koyu);
  color: white;
}

.btn-secondary {
  background: var(--egitim-yesili);
  color: white;
}
.btn-secondary:hover { background: var(--egitim-yesili-koyu); color: white; }

.btn-altin {
  background: var(--altin);
  color: var(--antrasit);
}
.btn-altin:hover { background: var(--altin-koyu); color: white; }

.btn-outline {
  background: transparent;
  border-color: var(--petrol);
  color: var(--petrol);
}
.btn-outline:hover {
  background: var(--petrol);
  color: white;
}

.btn-ghost {
  background: transparent;
  color: var(--antrasit);
}
.btn-ghost:hover { background: var(--petrol-soluk); }

.btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-lg); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

.btn-block { width: 100%; }

/* ---------- BADGES / ROZET ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}
.badge-petrol { background: var(--petrol-soluk); color: var(--petrol-koyu); }
.badge-yesil { background: var(--egitim-yesili-acik); color: var(--egitim-yesili-koyu); }
.badge-altin { background: var(--altin-acik); color: var(--altin-koyu); }
.badge-turkuaz { background: var(--turkuaz-acik); color: var(--turkuaz-koyu); }
.badge-antrasit { background: var(--antrasit-yumusak); color: white; }
.badge-beyaz { background: white; color: var(--antrasit); border: 1px solid var(--border); }
.badge-soft { background: var(--buz-mavisi-koyu); color: var(--tas-grisi); }

/* ---------- ROZET (Kurs için) ---------- */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.rozet-meb {
  background: var(--altin-acik);
  color: var(--altin-koyu);
}
.rozet-ucretsiz {
  background: var(--turkuaz-acik);
  color: var(--turkuaz-koyu);
}

/* ---------- CARDS ---------- */
.card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--border-petrol);
}

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

/* Grid utilities */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- HERO: SLIDER + DUYURU ---------- */
.hero {
  padding: var(--space-6) 0 var(--space-7);
  background: linear-gradient(180deg, var(--petrol-soluk) 0%, var(--buz-mavisi) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

/* --- Slider (Split hero — legacy) --- */
.hero-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--petrol-koyu);
  aspect-ratio: 16/10;
  min-height: 400px;
}

.slider-track {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
}
.slide.is-active { opacity: 1; }
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  background: rgba(34, 51, 59, 0.5);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.slider-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background var(--transition);
  padding: 0;
}
.slider-dot.is-active { background: white; }

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--antrasit);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 5;
}
.hero-slider:hover .slider-arrow { opacity: 1; }
.slider-arrow:hover { background: white; }
.slider-arrow.prev { left: var(--space-3); }
.slider-arrow.next { right: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}

/* --- Duyuru Paneli --- */
.hero-duyuru {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.duyuru-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--petrol-soluk);
}
.duyuru-head h2 {
  font-size: var(--text-lg);
  color: var(--petrol-koyu);
  margin: 0;
}
.duyuru-count {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  background: var(--petrol-soluk);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.duyuru-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.duyuru-item {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--buz-mavisi);
  border-left: 3px solid var(--petrol);
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}
.duyuru-item:hover {
  background: var(--petrol-soluk);
  text-decoration: none;
  transform: translateX(2px);
}
.duyuru-item time {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  font-weight: 500;
}
.duyuru-item h3 {
  font-size: var(--text-sm);
  font-family: var(--font-govde);
  font-weight: 600;
  color: var(--antrasit);
  margin: var(--space-1) 0;
  line-height: 1.3;
}
.duyuru-item p {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  margin: 0;
  line-height: 1.4;
}

.duyuru-tumu {
  display: block;
  text-align: center;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--petrol);
  text-decoration: none;
}
.duyuru-tumu:hover { color: var(--petrol-koyu); text-decoration: none; }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-slider { min-height: 300px; aspect-ratio: 16/9; }
  .hero-duyuru { max-height: 400px; }
}

/* ---------- STATS MINIMAL ---------- */
.stats-minimal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-5);
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.stat-min {
  text-align: center;
}
.stat-min strong {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--petrol);
  line-height: 1;
}
.stat-min span {
  font-size: var(--text-sm);
  color: var(--tas-grisi);
  font-weight: 500;
  margin-top: var(--space-1);
  display: block;
}
.stat-sep {
  width: 1px;
  height: 48px;
  background: var(--border);
}

@media (max-width: 640px) {
  .stats-minimal { gap: var(--space-5); }
  .stat-sep { display: none; }
}

/* ---------- KURS KART ---------- */
.brans-kart {
  display: flex;
  gap: var(--space-4);
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}
.brans-kart:hover {
  border-color: var(--border-petrol);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}

.kart-simge {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: var(--petrol-soluk);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-size: 1.75rem;
}

.brans-kart-body {
  flex: 1;
}
.brans-kart-body h3 {
  font-size: var(--text-lg);
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--antrasit);
  margin-bottom: var(--space-1);
}

.kurs-meta {
  color: var(--tas-grisi);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 var(--space-3);
}

.kurs-rozetler {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- MERKEZ KART ---------- */
.merkez-kart {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}
.merkez-kart:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--border-petrol);
  text-decoration: none;
}

.merkez-foto {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--petrol-soluk);
  position: relative;
}
.merkez-foto-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--petrol), var(--petrol-acik));
  display: grid;
  place-items: center;
  font-size: 3rem;
}

.merkez-kart-body {
  padding: var(--space-4);
}
.merkez-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.merkez-mahalle {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  font-weight: 500;
}
.merkez-kart-body h3 {
  font-size: var(--text-base);
  font-family: var(--font-govde);
  font-weight: 600;
  color: var(--antrasit);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.merkez-kart-body p {
  font-size: var(--text-sm);
  color: var(--tas-grisi);
  margin: 0;
  line-height: 1.4;
}

/* ---------- HABER KART ---------- */
.haber-kart {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.haber-kart:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.haber-foto {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--petrol-soluk);
}
.haber-foto-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--petrol-acik), var(--turkuaz));
  display: grid;
  place-items: center;
  font-size: 3rem;
}

.haber-body {
  padding: var(--space-4);
}
.haber-body time {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  font-weight: 500;
}
.haber-body h3 {
  font-size: var(--text-base);
  font-family: var(--font-govde);
  font-weight: 600;
  color: var(--antrasit);
  margin: var(--space-1) 0;
  line-height: 1.3;
}
.haber-body p {
  font-size: var(--text-sm);
  color: var(--tas-grisi);
  margin: 0;
  line-height: 1.4;
}

/* ---------- KOOPERATİF KART ---------- */
.koop-kart {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--transition);
}
.koop-kart:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-petrol);
}

.koop-kart-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
}
.koop-ikon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  background: var(--egitim-yesili-acik);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-size: 1.5rem;
}
.koop-kart-head h3 {
  font-size: var(--text-lg);
  font-family: var(--font-baslik);
  font-weight: 600;
  color: var(--antrasit);
  margin: var(--space-1) 0 0;
}
.koop-kart p {
  font-size: var(--text-sm);
  color: var(--tas-grisi);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.koop-bilgi {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}
.koop-bilgi li {
  padding: var(--space-1) 0;
  color: var(--tas-grisi);
}
.koop-bilgi strong {
  color: var(--antrasit);
  font-weight: 600;
}
.koop-cta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- BAŞKAN BÖLÜMÜ (ÖNE ÇIKAN) ---------- */
.section-baskan {
  padding: var(--space-9) 0;
  background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-koyu) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.section-baskan::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--turkuaz) 0%, transparent 70%);
  opacity: 0.12;
  pointer-events: none;
}
.section-baskan::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--altin) 0%, transparent 70%);
  opacity: 0.08;
  pointer-events: none;
}

.baskan-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
  z-index: 1;
}

.baskan-portret {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 4px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  position: relative;
}
.baskan-portret::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 2px solid var(--turkuaz);
  border-radius: 50%;
  opacity: 0.4;
}
.baskan-portret-ic {
  font-size: 5rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* ⚠️ 22.08.2026: GERÇEK PORTRE FOTOĞRAFI.
   Yuva DAİREDİR; fotoğraf yüklendiğinde `border-radius` ve `object-fit: cover`
   olmadan kare kalıyor ve dairenin içinde köşeleri taşarak duruyordu.
   `cover` şart: kaynak fotoğraf kare değilse `fill` yüzü ezer, `contain` ise
   dairenin içinde boşluk bırakır. */
.baskan-portret-foto,
.baskan-portret-buyuk-foto {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* Yüz genelde üst yarıdadır: kırpma alttan yapılsın. */
  object-position: center 20%;
  display: block;
}

.baskan-mesaj {
  position: relative;
}

.eyebrow-light {
  color: var(--turkuaz-acik) !important;
}
.eyebrow-light::before {
  background: var(--turkuaz) !important;
}

.baskan-alinti {
  font-family: var(--font-baslik);
  font-size: var(--text-2xl);
  line-height: 1.4;
  color: white;
  font-style: italic;
  position: relative;
  padding-left: var(--space-6);
  border-left: 4px solid var(--turkuaz);
  margin: var(--space-4) 0 var(--space-5);
}
.baskan-alinti::before {
  content: "\201C";
  position: absolute;
  top: -20px;
  left: 10px;
  font-size: 5rem;
  font-family: var(--font-baslik);
  color: var(--turkuaz);
  opacity: 0.3;
  line-height: 1;
}
.baskan-alinti strong {
  color: var(--altin-acik);
  font-weight: 600;
}

.baskan-imza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.baskan-ad-büyük {
  font-family: var(--font-baslik);
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  margin: 0;
}
.baskan-unvan {
  font-size: var(--text-sm);
  color: var(--turkuaz-acik);
  margin: 2px 0 0;
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .baskan-feature {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: var(--space-5);
  }
  .baskan-portret {
    width: 140px;
    height: 140px;
  }
  .baskan-portret-ic {
    font-size: 3.5rem;
  }
  .baskan-alinti {
    font-size: var(--text-lg);
    text-align: left;
  }
  .baskan-imza {
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
}

/* ---------- BAŞKAN BÖLÜMÜ (legacy mini) ---------- */
.baskan-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: center;
}

/* ---------- BAŞKAN MESAJI SAYFASI HERO ---------- */
.baskan-hero {
  padding: var(--space-7) 0 var(--space-8);
  background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-koyu) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.baskan-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--turkuaz) 0%, transparent 70%);
  opacity: 0.12;
  pointer-events: none;
}
.baskan-hero .container {
  position: relative;
  z-index: 1;
}
.breadcrumb-light a,
.breadcrumb-light span {
  color: rgba(255,255,255,0.7) !important;
}
.breadcrumb-light a:hover {
  color: white !important;
}

.baskan-hero-ic {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-5);
}
.baskan-portret-buyuk {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 4px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  position: relative;
}
.baskan-portret-buyuk::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 2px solid var(--turkuaz);
  border-radius: 50%;
  opacity: 0.4;
}
.baskan-portret-buyuk-ic {
  font-size: 4.5rem;
}
.baskan-hero-bilgi h1 {
  color: white;
  font-size: var(--text-4xl);
  margin: var(--space-2) 0 var(--space-3);
}
.baskan-hero-unvan {
  font-size: var(--text-lg);
  color: var(--turkuaz-acik);
  font-style: italic;
  margin: 0;
  max-width: 500px;
}

.baskan-metni {
  font-size: var(--text-lg);
  line-height: 1.8;
}
.baskan-metni p {
  margin-bottom: var(--space-4);
}
.baskan-metni strong {
  color: var(--petrol);
  font-weight: 600;
}
.baskan-imza-kutu {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--petrol-soluk);
  border-left: 4px solid var(--petrol);
  border-radius: var(--radius-md);
}
.baskan-imza-soz {
  font-family: var(--font-baslik);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--petrol);
  margin: 0 0 var(--space-2);
}
.baskan-imza-ad {
  font-weight: 700;
  color: var(--antrasit);
  margin: 0;
}
.baskan-imza-unvan {
  font-size: var(--text-sm);
  color: var(--tas-grisi);
  margin: 2px 0 0;
}

@media (max-width: 768px) {
  .baskan-hero-ic {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: var(--space-4);
  }
  .baskan-portret-buyuk {
    width: 130px;
    height: 130px;
  }
  .baskan-portret-buyuk-ic {
    font-size: 3rem;
  }
  .baskan-hero-bilgi h1 {
    font-size: var(--text-3xl);
  }
}
.baskan-portret-mini {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--petrol), var(--petrol-acik));
  display: grid;
  place-items: center;
  font-size: 4rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-petrol);
}
.baskan-soz blockquote {
  font-family: var(--font-baslik);
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--antrasit);
  font-style: italic;
  border-left: 4px solid var(--petrol);
  padding-left: var(--space-4);
  margin-bottom: var(--space-3);
}
.baskan-ad {
  font-weight: 600;
  color: var(--petrol-koyu);
  margin-bottom: var(--space-3);
}

@media (max-width: 768px) {
  .baskan-mini {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .baskan-soz blockquote { text-align: left; }
}

/* ---------- ACCORDION ---------- */
.accordion-item {
  border-bottom: 1px solid var(--border);
}
.accordion-item:first-child {
  border-top: 1px solid var(--border);
}
.accordion-trigger {
  width: 100%;
  padding: var(--space-4) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-baslik);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--antrasit);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  transition: color var(--transition);
}
.accordion-trigger:hover { color: var(--petrol); }
.accordion-icon {
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--petrol);
}
.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }
.accordion-panel {
  padding-bottom: var(--space-4);
  color: var(--tas-grisi);
  display: none;
  line-height: 1.6;
}
.accordion-panel.open { display: block; }

/* ---------- PILLS / TABS ---------- */
.pill-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.pill {
  padding: var(--space-2) var(--space-4);
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  color: var(--tas-grisi);
  transition: all var(--transition);
}
.pill:hover { border-color: var(--petrol); color: var(--petrol); }
.pill.active {
  background: var(--petrol);
  border-color: var(--petrol);
  color: white;
}

/* ---------- PAGE HERO (alt sayfalar için) ---------- */
.page-hero {
  padding: var(--space-7) 0 var(--space-6);
  background: linear-gradient(180deg, var(--petrol-soluk) 0%, var(--buz-mavisi) 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-3);
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--tas-grisi);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--tas-grisi); }
.breadcrumb a:hover { color: var(--petrol); }
.breadcrumb-sep { color: var(--tas-grisi-acik); }

/* ---------- KONUM / HARİTA ----------
   ⚠️ 22.08.2026: GÖMÜLÜ HARİTA (iframe) KALDIRILDI.
   Önce sayfada "Haritayı göster" onay kutusu vardı: tıklayan her ziyaretçinin
   IP'si Google'a gidiyordu ve ziyaretçiye çözmesi gereken bir soru soruluyordu.
   Yerine, sunucunun KAYDETME ANINDA ürettiği ve KENDİ diskimizde duran statik
   OpenStreetMap görseli geldi. Ziyaretçiden harita sağlayıcısına giden istek
   SIFIR (K141/KVKK); dış servisler yalnızca TIKLANIRSA açılır (üç düğme).
   Eski `.harita-embed` kuralları silindi — kullanan kalmadı. */
.konum-kutusu {
  display: flex;
  flex-direction: column;
}
.konum-baslik {
  margin: 0 0 var(--space-2);
}
.konum-adres {
  margin: 0 0 var(--space-3);
  color: var(--tas-grisi);
  line-height: 1.5;
}
.konum-harita {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
/* ⚠️ `width/height` HTML'de veriliyor (CLS önlemi) — CSS burada yalnızca
   ölçeklendirir. `height:auto` olmadan görsel, HTML'deki 512px'e kilitlenip
   dar ekranda ezilirdi. */
.konum-harita img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── DIŞ HARİTA BAĞLANTILARI — simge düğmeleri ───────────────────────────
   ⚠️ 44px DOKUNMA HEDEFİ: simgenin kendisi 22px. Bağlantı o boyutta
      bırakılsaydı parmakla isabet ettirmek zorlaşırdı.
   ⚠️ Erişilebilir ad `aria-label`dadır (bkz. _KonumHaritasi.cshtml); CSS
      burada yalnızca hedefi büyütür, ad taşımaz. */
.konum-baglantilar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  /* ⚠️ SARMA ZORUNLU. Bu blok artık iki BAMBAŞKA genişlikte kullanılıyor:
     /iletisim'de geniş bir sütunda, /merkezler'de dar bir kart ızgarasında
     (üç sütun). Sarma olmadan dar kartta üçüncü düğme ("OpenStreetMap")
     kartın dışına taşıyordu — ölçüldü 24.08.2026, tarayıcıda görüldü.
     Düğme metnini kısaltmak yerine sarma seçildi: metin, bağlantının
     görünen adıdır ve kısaltmak erişilebilirliği düşürürdü. */
  flex-wrap: wrap;
}
/* ⚠️ Metin + simge: sabit 44px KARE DEĞİL, en az 44px YÜKSEKLİK.
   Genişlik metne göre uzar; dokunma hedefi yine 44px'in altına düşmez. */
.konum-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--petrol);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.konum-dugme:hover {
  background: var(--petrol-soluk);
  border-color: var(--border-petrol);
}
/* ⚠️ Odak halkası AÇIKÇA verilir: klavyeyle gezen ziyaretçi hangi harita
   servisinde olduğunu görmeli — simge tek başına konum bilgisi vermez. */
.konum-dugme:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 2px;
}
.konum-dugme svg { width: 20px; height: 20px; flex-shrink: 0; }
/* ⚠️ Dar ekranda metin gizlenir, düğme kareye döner — üç düğme yan yana
   sığmadığında alt alta kayıp sayfayı uzatmasın diye. `aria-label` yerinde
   kaldığı için ekran okuyucu adı YİNE okur; kaybolan yalnızca görsel metin. */
@media (max-width: 480px) {
  .konum-dugme { padding: 0; width: 44px; }
  .konum-dugme-ad { display: none; }
}

.iletisim-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.iletisim-bilgi h2 {
  margin-bottom: var(--space-4);
}
.iletisim-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.iletisim-liste li {
  padding: var(--space-2) 0;
  color: var(--tas-grisi);
  line-height: 1.5;
}
.iletisim-liste strong {
  color: var(--antrasit);
  display: inline-block;
  min-width: 80px;
}
@media (max-width: 768px) {
  .iletisim-grid { grid-template-columns: 1fr; }
}

/* ---------- SOSYAL MEDYA BAĞLANTILARI ----------
   ⚠️ 22.08.2026: bu blok EKSİKTİ ve eksikliği görünmüyordu.
   Kural `wwwroot/css/site.css` içinde vardı ama O DOSYA YÜKLENMİYOR
   (şablon artığı; `--renk-*` belirteçlerini kullanıyor, bu tema `--petrol`
   ailesini kullanıyor). Yani `.footer-sosyal` sınıfı yazılıydı, karşılığı
   yoktu: liste madde imli, dikey ve stilsiz çiziliyordu. Hata vermez —
   yalnızca yanlış görünür.
   Ders: bir sınıfın CSS'te TANIMLI olması yetmez; o dosyanın YÜKLENDİĞİ de
   doğrulanmalı (bkz. _Layout.cshtml'deki <link> listesi). */
.footer-sosyal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}
.footer-sosyal a {
  color: inherit;
  text-decoration: none;
  opacity: .85;
  transition: opacity var(--transition), background-color var(--transition);

  /* Dokunma hedefi: 44×44 (WCAG 2.5.8 / KAMİS). Simge 20px, kalanı boşluk.
     Simge kadar küçük bir hedef masaüstünde tıklanır, telefonda tıklanmaz. */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}
.footer-sosyal a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}
/* ⚠️ text-decoration: underline KALDIRILDI — içerik artık metin değil simge,
   altı çizilecek bir şey yok. Vurgu zemin rengiyle veriliyor. */

/* Odak halkası AYRI TANIMLANIR: :hover ile aynı bırakılsaydı klavye kullanıcısı
   nerede olduğunu yalnızca hafif bir zemin farkından anlamak zorunda kalırdı. */
.footer-sosyal a:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
  opacity: 1;
}

.sosyal-simge {
  width: 20px;
  height: 20px;
  display: block;
  /* fill="currentColor" yolda; renk buradan miras alınır. */
}

/* Tanınmayan platformun harf rozeti — simgeyle aynı kutuda, aynı ağırlıkta. */
.sosyal-harf {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* Sütun başlığı görünümünü .footer-col h4'ten miras alır; yalnızca
   üstündeki iletişim listesinden ayrılmak için boşluk ister. */
.footer-sosyal-baslik {
  margin-top: var(--space-5);
}

/* İletişim sayfasındaki sürüm: koyu zeminde değil, kart içinde —
   düğme görünümü verilir. Ayrı sınıf, çünkü footer'ınkiyle aynı
   görünmesi GEREKMİYOR; aynı sınıfı paylaşsalardı biri değişince
   diğeri sessizce bozulurdu. */
.iletisim-sosyal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--antrasit);
  color: var(--tas-grisi-acik);
  padding: var(--space-8) 0 var(--space-5);
  margin-top: var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.footer-brand .brand-mark,
.footer-brand .brand-logo,
.footer-brand .brand-logo-belediye {
  margin-bottom: var(--space-3);
  background: white;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  height: 48px;
}
.footer-brand .brand-divider {
  background: var(--border-petrol);
}
.footer-brand p {
  color: var(--tas-grisi-acik);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}
.footer-col h4 {
  color: white;
  font-size: var(--text-sm);
  font-family: var(--font-govde);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}
.footer-col ul {
  list-style: none;
  padding: 0;
}
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a {
  color: var(--tas-grisi-acik);
  font-size: var(--text-sm);
  text-decoration: none;
}
.footer-col a:hover { color: white; text-decoration: none; }

.footer-bottom {
  padding-top: var(--space-5);
  border-top: 1px solid var(--antrasit-yumusak);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.footer-bottom a {
  color: var(--tas-grisi-acik);
  text-decoration: none;
}

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- ACCESSIBILITY FAB ---------- */
.a11y-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 56px; height: 56px;
  background: var(--petrol);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-petrol);
  z-index: 90;
  transition: transform var(--transition);
}
.a11y-fab:hover { transform: scale(1.05); }

.a11y-panel {
  position: fixed;
  bottom: 96px;
  left: 24px;
  width: 320px;
  max-width: calc(100vw - 48px);
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  z-index: 90;
  display: none;
}
.a11y-panel.open { display: block; }
.a11y-panel h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
  font-family: var(--font-govde);
}
.a11y-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.a11y-row:last-child { border-bottom: none; }
.a11y-row label { font-size: var(--text-sm); font-weight: 500; }
.a11y-btn-group {
  display: flex;
  gap: 4px;
}
.a11y-btn {
  padding: 4px 10px;
  background: var(--petrol-soluk);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  color: var(--antrasit);
}
.a11y-btn:hover, .a11y-btn.active {
  background: var(--petrol);
  color: white;
}

/* ---------- CALLOUT ---------- */
.callout {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin: var(--space-4) 0;
}
.callout-info { background: #E6F2FE; border-color: var(--bilgi); }
.callout-success { background: var(--egitim-yesili-acik); border-color: var(--yaprak-yesili); }
.callout-warning { background: var(--altin-acik); border-color: var(--uyari); }

/* ---------- HELPER ---------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-petrol { color: var(--petrol); }
.text-yesil { color: var(--egitim-yesili); }
.text-altin { color: var(--altin-koyu); }
.text-gray { color: var(--tas-grisi); }
.text-small { font-size: var(--text-sm); }
.text-lead { font-size: var(--text-lg); color: var(--tas-grisi); line-height: 1.5; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none; }
.w-full { width: 100%; }

/* ---------- TAM GENİŞLİK SLIDER (GASMEK tarzı) ---------- */
/* ⚠️ `max-height` KUTUNUN ORANINI BOZAR — ve bu, "21:9 görsel yükleyin"
   talimatını geniş ekranda sessizce geçersiz kılar. Sınıra çarpıldığı andan
   itibaren kutu artık 21:9 değildir: yükseklik sabitlenir, genişlik büyümeye
   devam eder. Ölçüldü 31.08.2026, 21:9 bir görselin DİKEY kırpılma oranı:

       max-height   tam 21:9 kalan     1440px      1920px      2560px
          600px        ≤1400px           %3         %27         %45
          680px        ≤1587px           %0         %17         %38   ← seçilen
          760px        ≤1773px           %0          %8         %31

   680 seçildi: yaygın dizüstü genişliklerinde (1440/1536) kırpma SIFIRLANIR,
   1920'de yarıya iner. 760 daha da iyi olurdu ama 1080p ekranda slider
   içerik alanının üçte ikisini kaplardı — ilk ekranda başka hiçbir şey
   görünmezdi.
   ⚠️ Sınır tamamen kaldırılamaz: 2560px'te kutu 1097px yüksekliğe çıkardı.
   ⚠️ Kırpma DİKEY ve ortadan olduğu için, görselde önemli olan her şey
   (metin, logo) dikey ortada kalmalıdır. Bu kural docs/gorsel-olculeri.md'de
   yazılı; ikisi birlikte değişir. */
.hero-slider-full {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--petrol-koyu);
  aspect-ratio: 21/9;
  max-height: 680px;
  min-height: 350px;
}
.hero-slider-full .slider-track {
  position: absolute;
  inset: 0;
}
.hero-slider-full .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}
.hero-slider-full .slide.is-active { opacity: 1; }
.hero-slider-full .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slider-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(31, 92, 120, 0.3) 100%);
  pointer-events: none;
}
.hero-slider-full .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--antrasit);
  opacity: 0.7;
  transition: opacity var(--transition), background var(--transition);
  z-index: 5;
}
.hero-slider-full:hover .slider-arrow { opacity: 1; }
.hero-slider-full .slider-arrow:hover { background: white; }
.hero-slider-full .slider-arrow.prev { left: var(--space-4); }
.hero-slider-full .slider-arrow.next { right: var(--space-4); }

.hero-slider-full .slider-dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  background: rgba(34, 51, 59, 0.4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
}

/* ⚠️ MOBİLDE ORAN 4:3 — ve bu BİLİNÇLİ, 21:9'un küçültülmüşü DEĞİL.
   390px genişlikte 21:9 bir kutu 167px yüksekliğinde bir şerit olurdu; o
   yükseklikte ne görsel okunur ne de üzerindeki başlık.
   ⚠️ BUNUN BEDELİ VAR: mobil için AYRI görsel yüklenmemişse masaüstü görseli
   (21:9) bu kutuya sokulur ve yanlardan ~%65'i kırpılır. Ölçüldü 31.08.2026:
   canlıdaki dört slaytın `mobile_media_id` alanı DOLU ama masaüstüyle AYNI
   dosyayı gösteriyor; Index.cshtml `mobile_image_path != image_path` diye
   baktığı için <picture> hiç devreye girmiyor. Yani mobil desteği kodda var,
   VERİDE yok — panelde ayrı bir mobil kırpım yüklenmeli.
   ⚠️ Mobil ölçü docs/gorsel-olculeri.md'de bu orana göre verilir (1080×810).
   Belge 26.08'de 21:9 diyordu; kodla çelişiyordu, 31.08'de düzeltildi. */
@media (max-width: 768px) {
  .hero-slider-full { aspect-ratio: 4/3; max-height: 400px; }
  .hero-slider-full .slider-arrow { width: 36px; height: 36px; }
}

/* ---------- DUYURU KART GRID ---------- */
.duyuru-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1024px) {
  .duyuru-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .duyuru-grid { grid-template-columns: 1fr; }
}

.duyuru-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: white;
  border: 1px solid var(--border);
  border-top: 3px solid var(--petrol);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}
.duyuru-card:hover {
  box-shadow: var(--shadow-md);
  border-top-color: var(--altin);
  transform: translateY(-2px);
  text-decoration: none;
}
.duyuru-card-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-1);
}
.duyuru-card time {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  font-weight: 500;
}
.duyuru-card h3 {
  font-size: var(--text-sm);
  font-family: var(--font-govde);
  font-weight: 600;
  color: var(--antrasit);
  line-height: 1.3;
  margin: 0;
}
.duyuru-card p {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  margin: 0;
  line-height: 1.4;
}

/* ---------- BAŞARI HİKÂYELERİ ŞERİT ---------- */
.basari-serit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1024px) {
  .basari-serit { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .basari-serit { grid-template-columns: 1fr; }
}

.basari-kart {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.basari-kart:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--border-petrol);
}

.basari-foto {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--petrol-soluk);
  position: relative;
}
.basari-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20, 60, 100, 0.5) 100%);
}

.basari-tip {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.basari-tip-video {
  background: rgba(220, 38, 38, 0.9);
  color: white;
}
.basari-tip-yazi {
  background: rgba(255, 255, 255, 0.9);
  color: var(--antrasit);
}

.basari-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.basari-body h3 {
  font-family: var(--font-baslik);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--petrol-koyu);
  line-height: 1.3;
  margin-bottom: var(--space-2);
}
.basari-meta {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.basari-soz {
  font-size: var(--text-sm);
  color: var(--tas-grisi);
  line-height: 1.5;
  font-style: italic;
  margin: 0;
}

/* ---------- BAŞARI HİKÂYESİ DETAY SAYFASI ---------- */
.basari-buyuk-kart {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.basari-buyuk-kart:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-petrol);
}
.basari-buyuk-foto {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--petrol-soluk);
  position: relative;
}
.basari-buyuk-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.basari-buyuk-body h3 {
  font-family: var(--font-baslik);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--petrol-koyu);
  line-height: 1.3;
  margin-bottom: var(--space-2);
}
.basari-buyuk-body p {
  font-size: var(--text-sm);
  color: var(--tas-grisi);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

/* ---------- BAŞARI HİKÂYELERİ — YOUTUBE ŞERİT ---------- */
.basari-strip-outer {
  position: relative;
  padding: 0 var(--space-5);
}
.basari-strip {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--space-3) 0 var(--space-5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--petrol) var(--buz-mavisi-koyu);
}
.basari-strip::-webkit-scrollbar { height: 6px; }
.basari-strip::-webkit-scrollbar-track { background: var(--buz-mavisi-koyu); border-radius: 3px; }
.basari-strip::-webkit-scrollbar-thumb { background: var(--border-petrol); border-radius: 3px; }
.basari-strip::-webkit-scrollbar-thumb:hover { background: var(--petrol); }

.basari-thumb {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.basari-thumb:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--border-petrol);
  text-decoration: none;
}

/* Thumbnail foto alanı (16:9) */
.basari-thumb-foto {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--petrol-soluk);
  position: relative;
  display: grid;
  place-items: center;
}

/* Play overlay (video için) */
.play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 60, 100, 0.25);
  transition: background var(--transition);
}
.basari-thumb-video:hover .play-overlay {
  background: rgba(20, 60, 100, 0.1);
}
.play-overlay svg {
  width: 56px;
  height: 56px;
  color: white;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  transition: transform var(--transition);
}
.basari-thumb-video:hover .play-overlay svg {
  transform: scale(1.15);
}

/* Video süre rozeti */
.duration {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  background: rgba(0,0,0,0.8);
  color: white;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Yazı kartı kapak alanı */
.basari-thumb-yazi-kapak {
  background: linear-gradient(135deg, var(--petrol-soluk), var(--turkuaz-acik));
}
.yazi-ikon {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Thumb body */
.basari-thumb-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.basari-thumb-body h3 {
  font-family: var(--font-baslik);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--antrasit);
  line-height: 1.3;
  margin-bottom: var(--space-1);
}
.basari-thumb-meta {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  margin-bottom: var(--space-1);
}
.basari-thumb-soz {
  font-size: var(--text-xs);
  color: var(--tas-grisi);
  line-height: 1.4;
  font-style: italic;
  margin: 0;
}

/* Şerit navigasyon okları */
.strip-nav {
  position: absolute;
  top: calc(50% - 60px);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--petrol);
  box-shadow: var(--shadow-md);
  z-index: 5;
  transition: all var(--transition);
  opacity: 0;
}
.basari-strip-outer:hover .strip-nav { opacity: 1; }
.strip-nav:hover {
  background: var(--petrol);
  color: white;
  border-color: var(--petrol);
}
.strip-nav svg { width: 20px; height: 20px; }
.strip-prev { left: var(--space-2); }
.strip-next { right: var(--space-2); }

@media (max-width: 768px) {
  .basari-thumb { flex: 0 0 240px; }
  .strip-nav { display: none; }
  .basari-strip-outer { padding: 0 var(--space-4); }
}


/* =============================================================================
   Onaylı harita (tıkla-yükle) — K141 / KVKK
   =============================================================================
   Harita yüklenmeden önceki yer tutucu. Ziyaretçi düğmeye basana kadar Google'a
   istek gitmez; bu blok o "önce" durumunun görünümüdür.
   ========================================================================== */
.harita-onay {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--harita-yukseklik, 420px);
    background: var(--buz-mavisi, #F5F8FA);
    border: 1px dashed rgba(31, 92, 120, 0.35);
    border-radius: var(--radius-lg, 12px);
    text-align: center;
    padding: 2rem 1.25rem;
}

.harita-onay-ic { max-width: 30rem; }

.harita-onay-ikon {
    color: var(--petrol, #1F5C78);
    opacity: 0.55;
    margin-bottom: 0.75rem;
}

.harita-onay-baslik {
    font-weight: 600;
    color: var(--petrol, #1F5C78);
    margin: 0 0 0.35rem;
}

.harita-onay-metin {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--antrasit-yumusak, #5a6673);
    margin: 0 0 1.15rem;
}

.harita-onay-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

/* Harita yüklendikten sonra iframe kutuyu tamamen doldurur. */
.harita-embed iframe { display: block; width: 100%; border: 0; border-radius: var(--radius-lg, 12px); }


/* =============================================================================
   Hata sayfası (/hata/{code})
   ========================================================================== */
.hata-sayfa {
    text-align: center;
    max-width: 46rem;
    padding-top: var(--space-8, 3rem);
    padding-bottom: var(--space-8, 3rem);
}

.hata-kod {
    font-family: var(--font-baslik);
    font-size: clamp(4rem, 14vw, 7rem);
    font-weight: 700;
    line-height: 1;
    color: var(--petrol);
    opacity: 0.18;
    margin: 0 0 0.5rem;
}

.hata-sayfa h1 {
    color: var(--petrol);
    margin: 0 0 0.75rem;
}

.hata-aciklama {
    color: var(--antrasit-yumusak);
    max-width: 38rem;
    margin: 0 auto 1.75rem;
    line-height: 1.6;
}

.hata-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* ─── MERKEZ KONUM MODALI ──────────────────────────────────────────────────
   Harita kartta değil, modalda gösterilir (24.08.2026). 16 kartın her birinde
   bir harita görseli sayfayı ~1,8 MB'a çıkarıyor ve kart metnini boğuyordu.
   Görsel yine üretiliyor ve yine kendi sunucumuzdan geliyor — değişen yalnızca
   ne zaman indirileceği: ziyaretçi "Konumu göster" demeden hiç istenmiyor. */
.merkez-adres {
  margin: var(--space-2) 0 0;
  color: var(--tas-grisi);
  line-height: 1.5;
}

/* ⚠️ Kart gövdesi de tıklanabilir (JS `data-konum-ac` okur); imleç bunu
   göstermeli, yoksa tıklanabilirlik keşfedilemez. Klavye için gerçek düğme
   kartın içindedir. */
.merkez-kart[data-konum-ac] {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   MERKEZ DETAY MODALI
   ⚠️ Ortalama AÇIKÇA yazılır: `width` verilince tarayıcının <dialog>
      varsayılanı (`width: fit-content; margin: auto`) bozulur ve kutu sol üst
      köşeye yapışır — bu projede 24.08.2026'da ölçülmüş bir kusur.
      `tools/dialog-ortalama-kontrol.py` kapısı bu dört kuralı arar.
   ⚠️ Konum modalından GENİŞ (760px): burada tam boy fotoğraf var.
   --------------------------------------------------------------------------- */
.merkez-modal {
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, .25));

  position: fixed;
  inset: 0;
  margin: auto;

  width: 100%;
  max-width: min(760px, 94vw);

  height: fit-content;
  max-height: 90vh;
  overflow-y: auto;
}
.merkez-modal::backdrop { background: rgba(0, 0, 0, .55); }

.merkez-modal-ic { padding: var(--space-4); }

/* ⚠️ 16:9 SABİT: fotoğraf yüklenene kadar modalın yüksekliği bilinir, açılırken
   ZIPLAMAZ. Oran içeriğe bırakılsaydı her merkezde farklı sıçrardı. */
.merkez-modal-foto {
  margin: 0 0 var(--space-4);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--petrol-soluk);
}
.merkez-modal-foto img {
  width: 100%;
  height: 100%;
  /* cover: modalın oranı sabit, görselin oranı editörün elinde. */
  object-fit: cover;
  display: block;
}

.merkez-modal-ozet {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--tas-grisi);
  line-height: 1.6;
}

/* İletişim listesi — etiket/değer çiftleri.
   ⚠️ <dl> kullanıldı, <table> değil: bu bir veri tablosu değil, ad-değer
      kümesi. Ekran okuyucu "Adres: … Telefon: …" diye okur. */
.merkez-iletisim {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: .92rem;
}
.merkez-iletisim dt {
  font-weight: 600;
  color: var(--tas-grisi);
  white-space: nowrap;
}
.merkez-iletisim dd { margin: 0; line-height: 1.5; }

/* Dar ekranda etiket üstte, değer altta — iki sütun sığmaz. */
@media (max-width: 520px) {
  .merkez-iletisim { grid-template-columns: 1fr; gap: .15rem; }
  .merkez-iletisim dd { margin-bottom: .5rem; }
}

/* Kart artık tıklanabilir: imleç bunu söylemeli. */
.merkez-kart[data-detay-ac] { cursor: pointer; }

.konum-modal {
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, .25));

  /* ⚠️ ORTALAMA AÇIKÇA YAZILIYOR. Tarayıcının <dialog> varsayılanı
     `width: fit-content; margin: auto` ile ortalar — ama biz `width` verince
     o varsayılan bozuluyordu ve kutu sol üst köşeye yapışıyordu (ölçüldü
     24.08.2026, tarayıcıda görüldü). `inset: 0` + `margin: auto` dörtlü
     boşluğu eşitleyerek hem yatayda hem dikeyde ortalar. */
  position: fixed;
  inset: 0;
  margin: auto;

  width: 100%;
  max-width: min(680px, 92vw);

  /* ⚠️ Yükseklik içeriğe göre, ama ekranı aşmasın: uzun adresli bir merkezde
     harita + üç düğme küçük ekranda taşardı ve modalın altı erişilemez
     kalırdı. `height: fit-content` olmadan `inset: 0` kutuyu dikeyde gerer. */
  height: fit-content;
  max-height: 90vh;
  overflow: auto;
}
/* ⚠️ ::backdrop tarayıcının kendi katmanıdır; elle bir örtü <div>'i
   eklenmedi çünkü o örtü odak sırasına girer ve tab ile ulaşılabilir olurdu. */
.konum-modal::backdrop {
  background: rgba(0, 0, 0, .55);
}
.konum-modal-ic {
  padding: var(--space-4);
}
.konum-modal-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.konum-modal-baslik {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
}
/* ⚠️ 44px dokunma hedefi — simge 22px; düğme o boyutta bırakılsaydı
   parmakla kapatmak zorlaşırdı. */
.konum-modal-kapat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--petrol);
  cursor: pointer;
}
.konum-modal-kapat:hover {
  background: var(--petrol-soluk);
}

/* ═══════════════════════════════════════════════════════════════════════
   DUYURU / HABER LİSTE VE DETAY SAYFALARI (24.08.2026)
   Ana sayfa yalnızca en yeni birkaç kaydı gösteriyordu; kalanına ulaşmanın
   yolu yoktu. Liste ve detay sayfaları eklendi.
   ⚠️ KART GÖRÜNÜMÜ YENİDEN TASARLANMADI: ana sayfadaki .duyuru-card ve
      .haber-kart aynen kullanılır. Aşağıdakiler yalnızca "kart artık bir
      BAĞLANTI" olmasının gerektirdiği eklerdir.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠️ Kartın tamamı <a> oldu. Bağlantının varsayılan alt çizgisi ve rengi
   kart içindeki başlığı/metni bozardı; devralınan renk geri veriliyor. */
.duyuru-card-link,
.haber-kart-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.duyuru-card-link:hover h3,
.haber-kart-link:hover h3 {
  color: var(--petrol);
}
/* ⚠️ Odak halkası AÇIKÇA veriliyor: kart bağlantısı büyük bir alan ve
   klavyeyle gezen ziyaretçi nerede olduğunu görmeli. */
.duyuru-card-link:focus-visible,
.haber-kart-link:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 3px;
}

/* Başvuru dönemi satırı — iki tarih de boşsa şablon bu satırı hiç basmaz. */
.duyuru-donem {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--tas-grisi);
}

/* ─── Sayfa başlığı bandı (liste sayfaları) ─────────────────────────── */
.section-hero-sade {
  padding: var(--space-6) 0 var(--space-4);
  background: var(--buz, #f7f9fb);
  border-bottom: 1px solid var(--border);
}

/* ─── Metin ağırlıklı sayfalar için dar kap ─────────────────────────── */
/* ⚠️ 72ch: uzun metinde satır uzunluğu okunabilirliğin birinci belirleyeni.
   Tam genişlikte bir haber gövdesi 1400 px'e yayılır ve göz satır sonundan
   başına dönerken kaybolur. */
.container-dar {
  max-width: 72ch;
}

.icerik-ozet {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--tas-grisi);
  margin: var(--space-3) 0;
}
.icerik-gorsel {
  margin: var(--space-4) 0;
}
.icerik-gorsel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
/* ⚠️ Gövde editörden gelen HTML'dir; içindeki öğelerin sayfa tipografisine
   uyması gerekir. Verilmezse başlıklar ve listeler tarayıcı varsayılanıyla
   çizilir ve sayfanın geri kalanından kopuk görünür. */
.icerik-govde {
  line-height: 1.75;
}
.icerik-govde h2,
.icerik-govde h3 {
  margin: var(--space-5) 0 var(--space-2);
}
.icerik-govde p {
  margin: 0 0 var(--space-3);
}
.icerik-govde ul,
.icerik-govde ol {
  margin: 0 0 var(--space-3) var(--space-4);
}
.icerik-govde img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.icerik-govde a {
  color: var(--petrol);
}

/* ─── SAYFALAMA ─────────────────────────────────────────────────────── */
/* ⚠️ 44px dokunma hedefi: numaralar küçük metindir, parmakla isabet
   ettirmek için kutu büyütülür. */
.sayfalama {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.sayfalama-no,
.sayfalama-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--petrol);
  text-decoration: none;
  font-weight: 600;
}
.sayfalama-no:hover,
.sayfalama-ok:hover {
  background: var(--petrol-soluk);
}
.sayfalama-aktif {
  background: var(--petrol);
  border-color: var(--petrol);
  color: #fff;
  cursor: default;
}
/* ⚠️ Pasif ok bir <span>'dir, <a> değil — devre dışı bağlantı klavyeyle
   yine odaklanır ve gidecek yeri olmadan "bağlantı" diye duyurulur. */
.sayfalama-pasif {
  opacity: .45;
  cursor: default;
}
.sayfalama-bosluk {
  padding: 0 var(--space-1);
  color: var(--tas-grisi);
}

/* ─── POPUP AFİŞİ ──────────────────────────────────────────────────────────
   Site açılışında gösterilen tek afiş (25.08.2026'da eklendi — o güne kadar
   API ucu vardı ama sitede hiçbir karşılığı yoktu).

   ⚠️ ÖLÇÜ GÖRSELE GÖRE, KUTUYA GÖRE DEĞİL. Afişler editörün yüklediği hazır
      görsellerdir ve oranları önceden bilinmez (dikey afiş, yatay banner…).
      Sabit bir en/boy verilseydi görsel ya kırpılır ya ezilirdi; bu yüzden
      pencere içeriğe göre büyür ve yalnızca EKRANI aşmasına izin verilmez.

   ⚠️ max-height: 90vh + object-fit: contain birlikte gerekli. Yalnızca genişlik
      sınırlansaydı uzun dikey bir afiş ekranı taşar, kapatma düğmesi ve
      "bir daha gösterme" kutusu görünmez yerde kalırdı — ziyaretçi pencereyi
      yalnızca Esc ile kapatabilirdi, dokunmatik ekranda hiç kapatamazdı.
   ────────────────────────────────────────────────────────────────────────── */
.afis-modal {
  border: 0;
  padding: 0;
  background: transparent;

  /* ⚠️ ORTALAMA AÇIKÇA YAZILIYOR — tarayıcı varsayılanına GÜVENİLMEZ.
     <dialog> varsayılanı `width/height: fit-content` + `inset: 0` + `margin: auto`
     ile ortalar; kendi ölçü kuralımızı verdiğimiz anda o hesap bozulabiliyor ve
     kutu köşeye kayıyor.

     ⚠️ BU HATA BU PROJEDE İKİNCİ KEZ YAPILDI. Birincisi konum modalıydı
     (24.08.2026, arşivde kayıtlı, önlemi de yazılıydı: "ortalama artık açıkça
     yazılıyor"). Afiş modalı 25.08.2026'da yazılırken aynı tuzağa düşüldü —
     çünkü arşiv DÜZYAZIDIR ve düzyazı kural atlanır. Kusur yalnızca tarayıcıda
     görülür: HTML doğru, sınıf yerinde, `curl` ile yapılan hiçbir sayım yakalamaz.
     Kullanıcı bildirdi.

     ⚠️ `height: fit-content` ŞART: `inset: 0` tek başına kutuyu dikeyde gerer ve
     afiş, penceresinden büyük bir kutunun içinde asılı kalır. */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;

  width: fit-content;
  max-width: min(92vw, 720px);
  max-height: 92vh;

  /* ⚠️ `overflow: visible` bilinçli: kapatma düğmesi kutunun KÖŞESİNE taşıyor.
     `auto` yapılsaydı düğme kırpılır ya da gereksiz kaydırma çubuğu çıkardı.
     Taşmanın ekran dışına düşmemesi küçük ekran kuralıyla (aşağıda) sağlanır. */
  overflow: visible;
}

.afis-modal::backdrop {
  background: rgba(0, 0, 0, .6);
}

.afis-ic {
  position: relative;
  background: var(--surface-0, #fff);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  padding: 0 0 .35rem;
  display: flex;
  flex-direction: column;
}

.afis-ic img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px 10px 0 0;
}

.afis-bag { display: block; line-height: 0 }

/* ⚠️ Düğme afişin İÇİNE değil, KÖŞESİNE taşar. Görselin üstüne binseydi koyu
      zeminli bir afişte görünmez olurdu; afişin rengi editörün elinde ve
      önceden bilinemez. Kendi zemini + gölgesi var, her afişte okunur. */
.afis-kapat {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-0, #fff);
  color: #222;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.afis-kapat:hover { background: #f1f1f1 }

/* Klavye odağı GÖRÜNÜR kalmalı (KAMIS/WCAG 2.4.7). Tarayıcı varsayılan
   halkası beyaz zeminde zayıf kaldığı için açıkça tanımlanıyor. */
.afis-kapat:focus-visible,
.afis-bir-daha input:focus-visible {
  outline: 3px solid var(--primary-color, #0d6efd);
  outline-offset: 2px;
}

.afis-bir-daha {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem .3rem;
  font-size: .88rem;
  color: var(--text-color-secondary, #555);
  cursor: pointer;
}

.afis-bir-daha input { cursor: pointer; width: 16px; height: 16px }

/* Küçük ekranda köşeye taşan düğme ekran dışında kalabilir — içeri alınır. */
@media (max-width: 480px) {
  .afis-modal { max-width: 94vw }
  .afis-kapat { top: 6px; right: 6px }
}

/* ─── KURS KARTI — GÖRSELLİ ─────────────────────────────────────────────────
   26.08.2026'da eklendi. Taslaktaki kurs kartı YATAY idi ve solunda 56×56'lık
   bir emoji vardı; kursun kendi görseli o kutuya sığmıyordu (16:9 bir fotoğraf
   kareye kırpılınca kursu anlatan kısım kayboluyordu).

   ⚠️ ORAN 16:9 ve bu ekibe verilen ölçüyle (1600×900) AYNI. İkisi ayrışırsa
      yüklenen görsel kırpılır ve kimse sebebini bilmez.
   ⚠️ `aspect-ratio` sabittir: görsel yüklenene kadar kart yüksekliği bilinir,
      sayfa ZIPLAMAZ (CLS). Yüksekliği içeriğe bıraksaydık liste her görselde
      bir kez sıçrardı.
   ────────────────────────────────────────────────────────────────────────── */
.brans-kart {
  /* Taslaktaki yatay dizilim dikeye çevrildi — görsel üstte, metin altta. */
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.brans-kart-foto {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--petrol-soluk);
  overflow: hidden;
}

.brans-kart-foto img {
  width: 100%;
  height: 100%;
  /* ⚠️ cover: kart oranı sabit, görsel oranı editörün elinde. `contain`
     olsaydı yanlış oranlı görselin kenarlarında boş bantlar kalırdı. */
  object-fit: cover;
  display: block;
}

/* Görselsiz branş — boş kutu yerine okunabilir yer tutucu. */
.brans-kart-foto-bos {
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  opacity: .55;
}

/* ---------------------------------------------------------------------------
   CMS GÖVDESİ — editörün yazdığı serbest içerik
   ⚠️ 72ch: satır uzunluğu okunabilirliğin birinci belirleyenidir. Bu sınır
      OLMADAN gövde 1200 px'e yayılıyordu ve göz satır sonundan başına dönerken
      kayboluyordu. (`container-dar` ile aynı ölçü — kasten aynı.)
   ⚠️ SINIR METİNDE, KAPTA DEĞİL — ve `margin: 0 auto` YOK. Kaba verilseydi
      içerik ortalanır, sayfa başlığının soluyla hizasını kaybederdi. Sola yaslı
      kalması, hero'lu sayfalarda (kurs detayı) hizayı korur.
   ⚠️ Bu kural `cms-icerik` kullanan BÜTÜN sayfaları etkiler: /sayfa/{slug},
      Hakkımızda, Başkanın Mesajı, Kooperatifler. Hepsinde aynı sorun vardı.
   --------------------------------------------------------------------------- */
.cms-icerik {
  max-width: 72ch;
}

/* ---------------------------------------------------------------------------
   YATAY SÜZGEÇ ŞERİDİ (`.brans-suzgec*`)
   ⚠️ ADI "brans" AMA BRANŞ SAYFASI ARTIK KULLANMIYOR (31.08.2026). Tek
      kullanıcısı GALERİ sayfasıdır (Tümü / Fotoğraf / Video). Adı branş
      sayfasında doğduğu için öyle kaldı; SİLİNMEZ ya da branş sayfasıyla
      birlikte değiştirilmez — Galeri sessizce biçimsiz kalır.
   ⚠️ NEDEN BRANŞTA BIRAKILDI: şerit AZ SEÇENEKTE iyi çalışır. Galeri'de üç
      seçenek var, hepsi tek bakışta görünür. Branşta 13 kategoriye çıkınca
      sağdaki yedisi ekran dışında kaldı ve gizli kaydırma çubuğu yüzünden var
      oldukları belli olmadı; orası dikey yan sütuna taşındı (`.brans-yan*`).
      Yani sorun şeridin kendisi değil, SEÇENEK SAYISIYDI.
   ⚠️ Etiketler BAĞLANTIDIR, düğme değil — imleç, odak halkası ve klavye
      davranışı bu yüzden tarayıcının kendi bağlantı davranışıdır; taklit
      edilmez.
   ⚠️ Dar ekranda satır ALTINA SARMAZ, YATAY KAYAR. Az seçenekte doğru olan bu:
      üç etiket telefonda tek satırda durur.
   ⚠️ `scrollbar-width: none` yalnızca ÇUBUĞU gizler, kaydırmayı değil;
      dokunmatikte parmakla, masaüstünde shift+tekerlekle kayar.
   --------------------------------------------------------------------------- */
.brans-suzgec {
  border-bottom: 1px solid var(--border);
  background: white;
}
.brans-suzgec-liste {
  display: flex;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: .85rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.brans-suzgec-liste::-webkit-scrollbar { display: none }

.brans-suzgec-etiket {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* ⚠️ nowrap: "Müzik ve Sahne Sanatları" gibi uzun ad iki satıra bölünürse
     şeridin yüksekliği etiketten etikete değişir. */
  white-space: nowrap;
  padding: .4rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--antrasit);
  text-decoration: none;
  transition: all var(--transition);
}
.brans-suzgec-etiket:hover {
  border-color: var(--border-petrol);
  background: var(--petrol-soluk);
  text-decoration: none;
}
.brans-suzgec-etiket.aktif {
  background: var(--antrasit, #1f2b3a);
  border-color: var(--antrasit, #1f2b3a);
  color: white;
}
/* Sayı: etiketin içinde, ikincil. Ziyaretçi tıklamadan kaç kurs çıkacağını görür. */
.brans-suzgec-adet {
  font-size: .72rem;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.brans-suzgec-etiket.aktif .brans-suzgec-adet { opacity: .75 }

/* ═══════════════════════════════════════════════════════════════════════════
   BRANŞ SAYFASI — İKİ SÜTUN DÜZEN (yan süzgeç + kart ızgarası)
   ═══════════════════════════════════════════════════════════════════════════
   31.08.2026'da eklendi. Kategoriler yatay kayan bir şeritteydi; 13 kategoriye
   çıkınca yetmedi (yukarıdaki `.brans-suzgec` bloğunun notuna bakın).

   ⚠️ SÜTUN GENİŞLİĞİ SABİT, İÇERİK ESNEK. `240px minmax(0, 1fr)`. İkinci
      sütuna `1fr` değil `minmax(0, 1fr)` verilir: `1fr`'in alt sınırı `auto`dur
      ve içerideki uzun bir başlık ya da özet sütunu şişirip ızgarayı taşırır —
      hata vermez, yalnızca sayfa yana kayar.
   ⚠️ `align-items: start`: yan sütun, kart ızgarası kadar UZAMASIN. Varsayılan
      `stretch` ile sticky çalışmaz (kutu zaten tüm yüksekliği kaplar).
   --------------------------------------------------------------------------- */
.brans-duzen {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* ⚠️ min-width:0 — yukarıdaki `minmax(0,1fr)` ile aynı işin ikinci yarısı.
   Izgara ÖĞESİNİN kendi en küçük içerik genişliği de sıfırlanmazsa taşma
   sütun tanımından değil öğeden gelir. */
.brans-icerik { min-width: 0 }

/* ---------------------------------------------------------------------------
   YAN SÜTUN
   ⚠️ SAYFAYLA BİRLİKTE KAYMAZ, EKRANDA KALIR (`sticky`). 24 kartlık bir ızgarayı
      aşağı kaydıran ziyaretçi kategori değiştirmek için başa dönmek zorunda
      kalmasın.
   ⚠️ `top` SABİT DEĞİL: başlık çubuğu da `sticky` ve `z-index: 100`. Düz bir
      `top: 1rem` verilseydi sütunun üstü başlık çubuğunun ARKASINA girerdi —
      ilk kategori okunmaz olurdu ama hiçbir yerde hata çıkmazdı.
   ⚠️ `max-height` + `overflow-y` ŞART. 14 satır (Tümü + 13 kategori) kısa bir
      ekranda görüntü alanından uzun olur; `sticky` böyle bir kutuyu yapıştırmaz,
      normal akışta bırakır ve özellik sessizce çalışmaz görünür.
   --------------------------------------------------------------------------- */
.brans-yan {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  max-height: calc(100vh - var(--header-height) - var(--space-6));
  overflow-y: auto;
}

.brans-yan-baslik {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tas-grisi);
  margin: 0 0 var(--space-3);
}

.brans-yan-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brans-yan-oge {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .5rem;
  border-radius: 10px;
  color: var(--antrasit);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.brans-yan-oge:hover {
  background: var(--petrol-soluk);
  border-color: var(--border-petrol);
  text-decoration: none;
}
.brans-yan-oge.aktif {
  background: var(--antrasit);
  border-color: var(--antrasit);
  color: white;
}

/* Kategori görseli — 4:3 küçük kare. ⚠️ Oran karta (16:9) uydurulmadı: 40×22
   bir şeritte fotoğrafın konusu seçilemiyordu. Kırpma `cover` ile yapılır. */
.brans-yan-gorsel {
  flex-shrink: 0;
  width: 40px;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--petrol-soluk);
  display: grid;
  place-items: center;
}
.brans-yan-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Görseli olmayan kategori — boş kutu değil, adının ilk harfi.
   ⚠️ 13 kategorinin 8'inde görsel YOK; boş bırakılsaydı satırlar hizalı ama
      yarısı delik görünürdü. */
.brans-yan-gorsel-harf {
  font-weight: 700;
  font-size: .95rem;
  color: var(--petrol);
}
/* "Tümü" bir kategori değil, kapsayıcı — fotoğraf verilseydi 14. kategori gibi
   okunurdu. */
.brans-yan-gorsel-tumu {
  color: var(--petrol);
  font-size: .7rem;
}
/* Etkin satırda görsel kutusu koyu zemine gömülmesin. */
.brans-yan-oge.aktif .brans-yan-gorsel-harf,
.brans-yan-oge.aktif .brans-yan-gorsel-tumu {
  background: rgba(255, 255, 255, .16);
  color: white;
}

.brans-yan-ad {
  flex: 1;
  font-size: .875rem;
  line-height: 1.25;
  font-weight: 500;
}

/* Sayı: satırın içinde, ikincil. Ziyaretçi tıklamadan kaç branş çıkacağını görür.
   ⚠️ `tabular-nums`: rakamlar eşit genişlikte olsun, sağ kenar zıplamasın. */
.brans-yan-adet {
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--tas-grisi);
  font-variant-numeric: tabular-nums;
}
.brans-yan-oge.aktif .brans-yan-adet { color: rgba(255, 255, 255, .8) }

/* ---------------------------------------------------------------------------
   DAR EKRAN — sütun yukarı çıkar, satırlar etikete dönüşür
   ⚠️ YATAY KAYDIRMAYA DÖNÜLMEZ, SARILIR. Sayfanın baştaki derdi buydu: gizli
      kaydırma çubuğu, ekran dışındaki kategorilerin VAR OLDUĞUNU saklıyordu.
      Sarma iki satır fazla yer kaplar ama hiçbir kategoriyi gizlemez.
   ⚠️ `position: static` GERİ VERİLİR: tek sütunda yapışkan bir blok, kartların
      üstünde ekranın yarısını kaplardı.
   --------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .brans-duzen { grid-template-columns: 1fr }

  .brans-yan {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: var(--space-5);
  }
  .brans-yan-liste {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .4rem;
  }
  .brans-yan-oge {
    border-color: var(--border);
    border-radius: 999px;
    padding: .25rem .75rem .25rem .3rem;
  }
  .brans-yan-gorsel { width: 26px; height: 26px; border-radius: 50% }
  .brans-yan-ad { flex: 0 0 auto; font-size: .82rem }
}

/* ---------------------------------------------------------------------------
   BRANŞ DETAYI — gövde + başvuru çağrısı
   ⚠️ Çağrı LİSTEDE DEĞİL DETAYDA: ziyaretçi başvuru kararını listeye bakarken
      değil, bir branşı okuduktan sonra verir.
   ⚠️ SAĞDAKİ ALAN ZATEN BOŞTU: gövde `.cms-icerik` ile 72ch'e sınırlı ama kap
      tam genişlikte. Kutu o kullanılmayan oluğa oturur; sayfa genişlemez.
   ⚠️ Sol sütun `minmax(0, 1fr)`: `1fr`in alt sınırı `auto`dur, uzun bir kod
      bloğu ya da tablo sütunu şişirip ızgarayı taşırırdı.
   --------------------------------------------------------------------------- */
.brans-detay-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-6);
  align-items: start;
}
.brans-detay-govde { min-width: 0 }

/* Dar ekranda tek sütun; çağrı gövdenin ALTINA düşer — DOM sırası zaten öyle.
   ⚠️ Burada `order` ile öne alınmaz: listede kutu 24 kartın altında kalacağı
      için öne alınmıştı, burada altındaki tek şey gövdenin sonu. Okumadan önce
      "başvur" demek, çağrının gerekçesini (branşı tanımak) atlatmak olurdu. */
@media (max-width: 900px) {
  .brans-detay-duzen { grid-template-columns: 1fr }
  .brans-detay-duzen .brans-cta { position: static; margin-top: var(--space-5) }
}

/* ---------------------------------------------------------------------------
   BAŞVURU ÇAĞRISI — sağ sütun
   ⚠️ Kurs vitrini (/kurslar) yayından kaldırıldıktan sonra başvuruya giden tek
      yol öğrenci paneli. Bu kutu o yolu branş sayfasında görünür tutar.
   ⚠️ Yan sütunla AYNI `top` hesabı: başlık çubuğu da yapışkan (z-index 100);
      düz bir `top` değeri kutuyu onun arkasına sokardı.
   --------------------------------------------------------------------------- */
.brans-cta {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

.brans-cta-kutu {
  background: var(--petrol-soluk);
  border: 1px solid var(--border-petrol);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.brans-cta-simge {
  font-size: 1.8rem;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-3);
}

.brans-cta-baslik {
  font-size: 1rem;
  font-weight: 700;
  color: var(--antrasit);
  margin: 0 0 var(--space-2);
}

.brans-cta-metin {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--tas-grisi);
  margin: 0 0 var(--space-4);
}

/* Düğme kutunun genişliğini alır: ortalanmış dar bir düğme, kutunun içinde
   tıklanacak yeri aramaya çevirir. */
.brans-cta-dugme {
  display: block;
  width: 100%;
  text-align: center;
}

/* "77 branştan 1–24 arası" — basılan aralık ile toplamın yan yana durduğu satır.
   ⚠️ Bu satır SÜS DEĞİL: sayfa 31.08.2026'ya kadar 77 branşın 50'sini basıp
      başlıkta "77" yazıyordu ve 27 branşın kaybı hiçbir yerde görünmüyordu. */
.brans-aralik {
  font-size: .82rem;
  color: var(--tas-grisi);
  margin: 0 0 var(--space-4);
}

/* Kategori görselinin vekil olarak kullanımı (kart + branş detayı).
   ⚠️ Olduğu gibi basılmaz: aynı kategorideki 20 branş aynı fotoğrafı paylaşır.
      Tam doygunlukta basılsaydı "bunlar aynı kurs" ya da daha kötüsü "bu, o
      branşın kendi fotoğrafı" diye okunurdu. Hafif bir soluklaştırma + renk
      katmanı onu zemin dokusuna yaklaştırır; başlık ve etiket öne çıkar.
   ⚠️ 31.08.2026 — DEĞERLER YUMUŞATILDI (opacity .5→.8, katman .30→.14).
      İlk ayar fotoğrafı tanınmayacak kadar silikleştiriyordu: vekil olduğunu
      anlatmak için görseli işe yaramaz hâle getirmek, çözdüğünden fazlasını
      bozuyordu. Yeni değerler fotoğrafı okunur bırakır ama gerçek (branşın
      kendi) görselinden hâlâ ayırt edilebilir kılar — kademeler arasındaki
      fark KORUNUR, yalnızca dozu düşer.
   ⚠️ Şablonda `alt=""` ile eşleşir — süs olan şey ekran okuyucuya da süstür. */
.brans-kart-foto-vekil,
.kurs-kart-foto-vekil,
.icerik-gorsel-vekil { position: relative }

/* ⚠️ DETAY SAYFASINDAKİ VEKİL SINIRLANIR. `.icerik-gorsel` gerçek görsel için
   tam genişlik/serbest yüksekliktedir — orada doğrudur, çünkü o fotoğraf
   içeriğin kendisidir. Vekil ise SÜS: 1200px genişlikte, oranı serbest bir
   kategori fotoğrafı sayfanın üstünü kaplar ve asıl içeriği (gövde metnini)
   ekranın dışına iter. `max-height` + `cover` onu bir başlık şeridine çevirir.
   ⚠️ `border-radius` KAPTA da tanımlı: `img` zaten yuvarlak köşeli ama kap
   değildi; `::after` katmanı `inherit` ile kaptan miras aldığı için köşeli
   kalır ve görselin köşelerinden taşardı. */
.icerik-gorsel-vekil {
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 320px;
}
.icerik-gorsel-vekil img {
  max-height: 320px;
  object-fit: cover;
}
.brans-kart-foto-vekil img,
.kurs-kart-foto-vekil img,
.icerik-gorsel-vekil img { opacity: .8 }
.brans-kart-foto-vekil::after,
.kurs-kart-foto-vekil::after,
.icerik-gorsel-vekil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(20, 60, 100, .14), rgba(20, 60, 100, .02));
  /* Detay sayfasındaki figure yuvarlak köşeli; katman taşmasın. */
  border-radius: inherit;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   BRANŞ IZGARASI
   ⚠️ Sütun sayısı YAZILMAZ, genişlikten türetilir. Sabit `.grid-2` ile kart
      ~550px'e çıkıyor ve 16:9 foto alanı ~310px oluyordu: bir kurs kayıtlıyken
      sayfa boş görünüyordu. `auto-fill` + `minmax` geniş ekranda 4, tablette 2,
      telefonda 1 sütun verir — kırılma noktası yazmadan.
   ⚠️ Alt sınır 240px: bundan darda 16:9 foto ~135px'e iner ve kartın kendisi
      okunmaz hâle gelir.
   --------------------------------------------------------------------------- */
.brans-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

/* Kart içi ölçüler küçülen karta göre kısıldı. */
.brans-kart-body { padding: var(--space-3) var(--space-4) var(--space-4) }
.brans-kart-body h3 { font-size: var(--text-base, 1rem); line-height: 1.35 }
.brans-kart-foto-bos { font-size: 1.9rem }
.brans-ozet {
  color: var(--text-2, #555);
  font-size: .86rem;
  line-height: 1.5;
  margin-top: .3rem;
  /* ⚠️ Özet 3 satırda kesilir: editörler farklı uzunlukta yazıyor ve kısıtsız
     bırakılırsa ızgaradaki kartlar birbirinden farklı yükseklikte olur. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Boş durum ve geri bağlantısı — kurslarda ve ileride benzer listelerde. */
.bos-durum {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-2, #666);
  background: var(--surface-ground, #f8f9fa);
  border: 1px dashed var(--border, #dee2e6);
  border-radius: var(--radius-lg, 10px);
}
.geri-baglanti { margin-top: 2rem }

/* ---------------------------------------------------------------------------
   BRANŞ KATEGORİ ETİKETİ
   ⚠️ Bu bir BAĞLANTI DEĞİL, etikettir: tıklanabilir görünmemeli. Kart zaten
      bir <a>; etiket de bağlantı gibi dursaydı ziyaretçi "kategoriye göre
      süz" bekler, tıklar ve kurs detayına düşerdi.
   --------------------------------------------------------------------------- */
.brans-etiket {
    display: inline-block;
    margin-bottom: 0.45rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: var(--renk-vurgu-soluk, #eef2ff);
    color: var(--renk-vurgu-koyu, #3730a3);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.6;
}

/* ===========================================================================
   KURS İLANLARI — /kurslar ve /kurs/{slug}   (27.08.2026)
   ---------------------------------------------------------------------------
   ⚠️ BRANŞ KARTLARINDAN AYRI SINIFLAR. `.brans-*` yeniden kullanılabilirdi ama
      kullanılmadı: kurs kartı bir DURUM taşır (açık/yakında/doldu/kapandı) ve
      bir SAYAÇ gösterir; branş kartı ikisini de göstermez. Ortak sınıf, iki
      bileşenden birinde yapılan bir değişikliği sessizce diğerine taşırdı.
   =========================================================================== */

/* --- Süzgeç şeridi ------------------------------------------------------- */
.kurs-suzgec {
  border-bottom: 1px solid var(--border);
  background: white;
  padding-bottom: .5rem;
}
.kurs-suzgec-satir { margin: 0; padding: .85rem 0 .25rem }
.kurs-suzgec-baslik {
  margin: .5rem 0 .25rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2, #667);
}
.kurs-suzgec-liste {
  display: flex;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem;
  /* ⚠️ Yatay kaydırma: "Bilgisayar Okuryazarlığı" gibi uzun adlar telefonda
     satır sonunu aşar; sarmalansaydı şeridin yüksekliği süzgeçten süzgece
     değişir ve altındaki liste zıplardı. */
  overflow-x: auto;
  scrollbar-width: none;
}
.kurs-suzgec-liste::-webkit-scrollbar { display: none }

.kurs-suzgec-etiket {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;   /* uzun ad iki satıra bölünmesin */
  padding: .4rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--antrasit);
  text-decoration: none;
  transition: all var(--transition);
}
.kurs-suzgec-etiket:hover {
  border-color: var(--border-petrol);
  background: var(--petrol-soluk);
  text-decoration: none;
}
.kurs-suzgec-etiket.aktif {
  background: var(--antrasit, #1f2b3a);
  border-color: var(--antrasit, #1f2b3a);
  color: white;
}
.kurs-suzgec-adet {
  font-size: .72rem;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.kurs-suzgec-etiket.aktif .kurs-suzgec-adet { opacity: .75 }

/* --- Kart ızgarası ------------------------------------------------------- */
/* ⚠️ Sütun sayısı YAZILMAZ, genişlikten türetilir — branş ızgarasıyla aynı
   gerekçe. Alt sınır 260px: kurs kartı branş kartından bir bilgi listesi
   fazla taşır, 240px'te satırlar sarmalanıyordu. */
.kurs-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.kurs-kart {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}
.kurs-kart:hover {
  border-color: var(--border-petrol);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}

.kurs-kart-foto {
  width: 100%;
  /* ⚠️ aspect-ratio sabit: görsel gelene kadar sayfa ZIPLAMAZ (CLS). */
  aspect-ratio: 16/9;
  background: var(--petrol-soluk);
  overflow: hidden;
}
.kurs-kart-foto img {
  width: 100%; height: 100%;
  object-fit: cover;   /* kart oranı sabit, görsel oranı editörün elinde */
  display: block;
}
.kurs-kart-foto-bos {
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  opacity: .55;
}

.kurs-kart-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  /* Kartlar aynı yükseklikte dursun: kota satırı en alta itilir. */
  flex: 1;
}
.kurs-kart-body h3 {
  font-size: var(--text-base, 1rem);
  font-family: var(--font-baslik);
  font-weight: 600;
  line-height: 1.35;
  color: var(--antrasit);
  margin: 0;
}

.kurs-kart-bilgi {
  list-style: none;
  margin: .15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .84rem;
  color: var(--text-2, #555);
}
.kurs-kart-bilgi li { display: flex; gap: .4rem; align-items: flex-start }

.kurs-kota {
  margin: auto 0 0;
  padding-top: .5rem;
  border-top: 1px dashed var(--border);
  font-size: .8rem;
  color: var(--text-2, #666);
  font-variant-numeric: tabular-nums;
}

/* --- Durum rozeti -------------------------------------------------------- */
/* ⚠️ RENK TEK BAŞINA ANLAM TAŞIMAZ — her rozet METNİ de yazar. Yalnızca renkle
   ayrılsaydı renk körü bir ziyaretçi "açık" ile "kapandı"yı ayırt edemezdi. */
.kurs-rozet {
  align-self: flex-start;
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.kurs-rozet-acik    { background: #e6f4ea; color: #1e7d34; }
.kurs-rozet-yakinda { background: #e8f0fe; color: #1a56b8; }
.kurs-rozet-doldu   { background: #fdf0e3; color: #a35a10; }
.kurs-rozet-kapali  { background: #f1f2f4; color: #5a6472; }

/* --- Detay sayfası ------------------------------------------------------- */
.kurs-detay {
  display: grid;
  /* ⚠️ Yan sütun SABİT genişlikte değil, minmax ile: özet kutusundaki en uzun
     satır ("Yıldırım İnovasyon ve Girişimcilik Merkezi") sabit 280px'te üç
     satıra bölünüyordu. */
  grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  /* Telefonda özet kutusu ÖNE alınır: "başvurabilir miyim" sorusu, uzun
     açıklamayı okumadan cevaplanmalı. */
  .kurs-detay { grid-template-columns: 1fr }
  .kurs-detay-yan { order: -1 }
}

.kurs-detay-foto {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--petrol-soluk);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.kurs-detay-foto img { width: 100%; height: 100%; object-fit: cover; display: block }

.kurs-detay-baslik {
  font-family: var(--font-baslik);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--antrasit);
  margin: var(--space-5) 0 var(--space-2);
}
.kurs-detay-yan .kurs-detay-baslik { margin-top: 0 }

.kurs-detay-aciklama { line-height: 1.7; max-width: 72ch }

.kurs-detay-not {
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--text-2, #666);
  font-style: italic;
}

.kurs-gun-liste { list-style: none; margin: 0; padding: 0 }
.kurs-gun-liste li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 26rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

/* Ön şartlar: zorunlu olan görsel olarak ÖNE çıkar — "tercih sebebi" ile
   "olmazsa olmaz" aynı görünseydi ikisi de göz ardı edilirdi. */
.kurs-sart-liste { list-style: none; margin: 0; padding: 0 }
.kurs-sart-liste li {
  padding: .6rem .85rem;
  border-radius: var(--radius-md);
  margin-bottom: .5rem;
  border-left: 3px solid var(--border);
  background: var(--petrol-soluk);
}
.kurs-sart-liste li.sart-zorunlu { border-left-color: #c0392b }
.kurs-sart-liste li p { margin: .25rem 0 0; font-size: .86rem; color: var(--text-2, #555) }

.sart-etiket {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  background: white;
  border: 1px solid var(--border);
  color: var(--text-2, #555);
}
.sart-zorunlu .sart-etiket { color: #c0392b; border-color: #e8b4ae }
.sart-belge { font-weight: 500 }

.kurs-ozet-kutu {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  /* Uzun bir açıklamada özet kutusu ekranda kalsın. */
  position: sticky;
  top: var(--space-4);
}
.kurs-ozet-liste { margin: 0 0 var(--space-4) }
.kurs-ozet-liste dt {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-2, #667);
  margin-top: .8rem;
}
.kurs-ozet-liste dt:first-child { margin-top: 0 }
.kurs-ozet-liste dd { margin: .15rem 0 0; font-size: .92rem; color: var(--antrasit) }
.kurs-ozet-alt {
  display: block;
  font-size: .82rem;
  color: var(--text-2, #666);
  margin-top: .15rem;
}

.kurs-basvur { display: block; width: 100%; text-align: center }
/* ⚠️ Pasif düğme <span>'dir, devre dışı <a> DEĞİL: HTML'de <a> disabled
   olamaz — sadece soluk görünür ama yine tıklanırdı. */
.kurs-basvur-pasif {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.kurs-basvur-not {
  margin: .6rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-2, #666);
  text-align: center;
}

.kurs-detay-geri { margin-top: var(--space-4); font-size: .9rem }

/* Detayın ana sütunu — okunabilir satır uzunluğu için üst sınır. */
.kurs-detay-ana { min-width: 0 }
/* ⚠️ `sart-tercih` görünüşte varsayılanla aynıdır ama SINIF YİNE DE TANIMLI:
   şablonda kullanılıp CSS'te hiç geçmeyen bir ad, sonradan "bu ne işe yarıyor"
   sorusunu doğurur ve yanlışlıkla silinir. */
.kurs-sart-liste li.sart-tercih { border-left-color: var(--border) }

/* ---------------------------------------------------------------------------
   GALERİ — /galeri ve /galeri/{slug}
   ⚠️ Albüm KARTLARI kendi sınıflarını kullanmaz: /galeri dizininde branş
      ızgarası (.brans-izgara / .brans-kart) yeniden kullanılıyor. Aynı işi
      yapan ikinci bir kart ailesi, biri düzeltildiğinde diğeri eskiyeceği
      için sessizce ayrışırdı. Buradaki sınıflar YALNIZCA albüm İÇİ ızgara
      için — onun karşılığı sitede yoktu.
--------------------------------------------------------------------------- */

/* ⚠️ Sütun sayısı yazılmaz, genişlikten türetilir (branş ızgarasıyla aynı
   gerekçe): tek fotoğraflı bir albümde sabit 4 sütun sayfayı boş gösterirdi. */
.galeri-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.galeri-oge {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: white;
}

/* ⚠️ aspect-ratio + object-fit: albümdeki fotoğraflar farklı oranlarda gelir.
   Oran sabitlenmezse ızgara satırları birbirini iter ve sayfa dalgalanır. */
.galeri-oge img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--petrol-soluk, #eef3f5);
}

.galeri-oge figcaption {
  padding: var(--space-3);
  font-size: var(--text-sm, .875rem);
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.galeri-oge figcaption span { color: var(--tas-grisi); }

.galeri-oge-bos {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  font-size: 2.5rem;
  background: var(--petrol-soluk, #eef3f5);
}

/* Video öğesi bir BAĞLANTIDIR (iframe değil — K141). */
.galeri-oge-video {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}
.galeri-oge-video:hover {
  border-color: var(--border-petrol);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* ⚠️ Oynat işareti KÜÇÜK GÖRSELİN üstünde durur ama bağlantının dışarı
   gittiğini gizlemez: alt satırda "dış bağlantı ↗" yazar. Gizlenseydi
   ziyaretçi sitede kalacağını sanırdı. */
.galeri-oynat {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: white;
  font-size: 1.1rem;
  pointer-events: none;
}

.galeri-oge-alt {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: var(--space-3);
  font-size: var(--text-sm, .875rem);
}
.galeri-oge-alt small { color: var(--tas-grisi); font-size: .78rem; }

.galeri-ust-meta { margin-top: .35rem; font-size: .9rem; }

/* ⚠️ ALBÜM KARTI İÇİN AYRI KURAL YOK ve olmamalı: `.brans-kart` zaten
   `flex-direction: column; gap: 0; padding: 0` diyor. Buraya `.galeri-kart`
   diye ikinci bir kural yazılsaydı, kart düzeni iki yerden yönetilir ve biri
   değiştiğinde diğeri sessizce eskirdi. */