/* =====================================================================
   ANTESE — TASARIM SİSTEMİ
   Antalya Tüccar ve Esnaflar Dayanışma Derneği

   NEDEN BAŞTAN YAZILDI
   Eski style.css'te tek bir CSS değişkeni yoktu: renkler, boşluklar ve
   punto değerleri 34 KB boyunca tek tek sabit yazılmış, çakışmalar
   `!important` ile bastırılmıştı. Bir rengi değiştirmek onlarca yerde
   arama yapmayı gerektiriyordu ve sayfalar arasında aynı bileşen farklı
   ölçülerle çiziliyordu.

   SINIF ADLARI KORUNDU. 55 PHP dosyasında 221 projeye özel sınıf
   kullanılıyor; adlar değiştirilseydi hepsinin elden geçirilmesi
   gerekirdi. Değişen şey ADLAR değil, o adların GÖRÜNÜMÜ.

   YÖN: kurumsal-editoryal. Dernek bir ticaret kuruluşu ve sayfanın asıl
   içeriği günlük fiyat verisi; tasarım bu veriyi otoriter ve okunur
   kılmak üzerine kurulu. Süs değil, hiyerarşi.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BELİRTEÇLER (tokens)
   Tek kaynak. Bir rengi ya da boşluğu değiştirmek isteyen buraya bakar.
   --------------------------------------------------------------------- */
:root {
  /* Marka — logodaki yaprak yeşili ve turuncu.
     Yeşil KURUMSAL taşıyıcı, turuncu YALNIZCA vurgu: turuncu geniş
     alanlara yayıldığında sayfa uyarı levhasına benziyordu. */
  --yesil-900: #10291b;
  --yesil-800: #16452b;
  --yesil-700: #1c5c39;
  --yesil-600: #237347;
  --yesil-500: #2e8b57;
  --yesil-100: #e3f2e9;
  --yesil-50:  #f1f9f4;

  --turuncu-700: #b8480a;
  --turuncu-600: #d9560c;
  --turuncu-500: #f26b1d;
  --turuncu-100: #fdeade;
  --turuncu-50:  #fef5ef;

  /* Nötrler — sıcak tarafa kaydırılmış gri. Saf gri, yeşil-turuncu
     paletin yanında mavi ve soğuk duruyordu. */
  --murekkep:  #14201a;
  --koyu:      #24322b;
  --orta:      #55655c;
  --soluk:     #7d8b83;
  --cizgi:     #e2e8e4;
  --cizgi-acik:#eef2ef;
  --yuzey:     #ffffff;
  --zemin:     #f6f8f6;

  --kirmizi-600: #c0392b;
  --kirmizi-50:  #fdecea;

  /* Tipografi — 1.25 oranlı ölçek, akıcı (clamp) */
  --yazi: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p-xs:  0.75rem;
  --p-sm:  0.8125rem;
  --p-md:  0.9375rem;
  --p-lg:  1.0625rem;
  --p-xl:  clamp(1.125rem, 0.9rem + 0.7vw, 1.375rem);
  --p-2xl: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
  --p-3xl: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);

  /* Boşluk ölçeği — 4px tabanlı, ara değer uydurulmuyor */
  --b-1: 0.25rem;  --b-2: 0.5rem;   --b-3: 0.75rem;  --b-4: 1rem;
  --b-5: 1.5rem;   --b-6: 2rem;     --b-7: 2.5rem;   --b-8: 3.5rem;
  --b-9: 5rem;

  /* Köşe — üç değer. Dördüncüsü gerekiyorsa ölçek yanlıştır. */
  --k-sm: 8px;
  --k-md: 14px;
  --k-lg: 22px;
  --k-tam: 999px;

  /* Gölge — YUMUŞAK VE AZ. Eski temada her kart aynı sert gölgeyi
     taşıyordu ve hiçbir şey öne çıkmıyordu. */
  --g-1: 0 1px 2px rgba(20, 32, 26, .04);
  --g-2: 0 2px 8px rgba(20, 32, 26, .06), 0 1px 2px rgba(20, 32, 26, .04);
  --g-3: 0 12px 32px -12px rgba(20, 32, 26, .18), 0 2px 6px rgba(20, 32, 26, .05);
  --g-yesil: 0 10px 26px -12px rgba(35, 115, 71, .55);

  --gecis: 180ms cubic-bezier(.4, 0, .2, 1);
  --en: 1200px;
}

/* ---------------------------------------------------------------------
   2. TABAN
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body, html {
  font-family: var(--yazi) !important;
  color: var(--koyu);
  background-color: var(--zemin) !important;
  /* Sebze deseni markanın parçası; görünür kalmalı. Kontrast, üstteki
     perdeyle ayarlanıyor (bkz. body::before). */
  background-image: url(../resimler/bg2.webp) !important;
  background-repeat: repeat !important;
  background-size: 240px auto !important;
  background-attachment: scroll !important;
  font-size: var(--p-md);
  line-height: 1.65;
  margin: 0;
}

body::before {
  /*
   * Desenin üzerine ince bir perde.
   *
   * İLK DEĞER ÇOK YÜKSEKTİ (.93–.97): kontrast kazanmak isterken sebze
   * deseni tamamen kayboluyordu — arka plan düz gri bir yüzeye
   * dönüşmüştü. Perde artık deseni yumuşatıyor ama örtmüyor; okunurluk
   * zaten içerik kartlarının opak beyaz zemininden geliyor.
   */
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(246,248,246,.55), rgba(246,248,246,.70));
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--yazi) !important;
  color: var(--murekkep);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 var(--b-3);
}
h1 { font-size: var(--p-3xl); }
h2 { font-size: var(--p-2xl); }
h3 { font-size: var(--p-xl); font-weight: 700; }
h4 { font-size: var(--p-lg); font-weight: 700; }

p { margin: 0 0 var(--b-4); max-width: 70ch; }

a {
  font-family: var(--yazi) !important;
  color: var(--yesil-600);
  text-decoration: none;
  transition: color var(--gecis);
}
a:hover { color: var(--turuncu-600); }

ul { list-style: none; margin: 0; padding: 0; }

img { max-width: 100%; height: auto; }

/* Klavyeyle gezen için görünür odak — eski temada hiç yoktu */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--turuncu-500);
  outline-offset: 2px;
  border-radius: var(--k-sm);
}

::selection { background: var(--yesil-100); color: var(--yesil-900); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cizgi-acik); }
::-webkit-scrollbar-thumb { background: var(--soluk); border-radius: var(--k-tam); border: 2px solid var(--cizgi-acik); }
::-webkit-scrollbar-thumb:hover { background: var(--orta); }

/* Hareketi azalt tercihi — dekoratif geçişler kapanır */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   3. DÜZEN
   --------------------------------------------------------------------- */
.container {
  max-width: var(--en) !important;
  margin-inline: auto !important;
  padding-inline: var(--b-4) !important;
  width: 100% !important;
}

.page-section { padding-block: var(--b-7); }

/* Kart — sitenin en çok tekrar eden kabı */
.page-card,
.admin-card,
.fiyatlar-card,
.contact-info-card {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-lg);
  box-shadow: var(--g-2);
  padding: var(--b-6);
}

.page-card-title {
  font-size: var(--p-2xl);
  margin-bottom: var(--b-2);
}

.page-card-description {
  color: var(--orta);
  font-size: var(--p-md);
  margin-bottom: var(--b-5);
  max-width: 68ch;
}

/* ---------------------------------------------------------------------
   3b. İLETİŞİM SAYFASI
   Kurallar style.css'ten taşındı; sabit renkler belirteçlere çevrildi.
   Liste haberler.php'de de kullanıldığı için başlık hem h3 hem h4
   olarak hedefleniyor (iletişim sayfası h2 → h3 hiyerarşisine geçti,
   haberler sayfası hâlâ h4 kullanıyor).
   --------------------------------------------------------------------- */
.iletisim-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--b-5);
}
.iletisim-yan { display: grid; gap: var(--b-4); }

.iletisim-bilgi-baslik {
  font-size: var(--p-lg);
  margin: 0 0 var(--b-4);
  color: var(--murekkep);
}

.contact-info-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--b-4);
}
.contact-info-item { display: flex; gap: var(--b-3); align-items: flex-start; }
.contact-info-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--k-md);
  background: var(--turuncu-50);
  color: var(--turuncu-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.contact-info-content { flex: 1; min-width: 0; }
.contact-info-content h3,
.contact-info-content h4 {
  margin: 0;
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soluk);
}
.contact-info-content p { margin: .3rem 0 0; font-size: var(--p-sm); color: var(--orta); }
.contact-info-content a { color: var(--yesil-700); font-weight: 700; }
.contact-info-content a:hover { color: var(--turuncu-600); }

/* Telefon rehberi — dört kalemlik liste, satır satır ezilmesin diye
   kendi kartında ve numaralar dokunma hedefi büyüklüğünde. */
.iletisim-tel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-3); }
.iletisim-tel-liste > li {
  padding-bottom: var(--b-3);
  border-bottom: 1px solid var(--cizgi);
}
.iletisim-tel-liste > li:last-child { border-bottom: 0; padding-bottom: 0; }
.iletisim-tel-sahip {
  display: block;
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: .35rem;
}
.iletisim-tel-nolar { display: flex; flex-wrap: wrap; gap: .4rem; }
.iletisim-tel-nolar a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--k-tam);
  background: var(--yesil-50);
  color: var(--yesil-700);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}
.iletisim-tel-nolar a:hover,
.iletisim-tel-nolar a:focus-visible {
  background: var(--yesil-700);
  border-color: var(--yesil-700);
  color: #fff;
}
.iletisim-tel-nolar a > i { font-size: .85em; opacity: .75; }
.iletisim-tel-not { margin: var(--b-3) 0 0; font-size: var(--p-xs); color: var(--soluk); }

.iletisim-ipucu {
  display: flex;
  gap: .6rem;
  margin: 0;
  padding: var(--b-3) var(--b-4);
  border-left: 3px solid var(--turuncu-500);
  background: var(--turuncu-50);
  border-radius: 0 var(--k-md) var(--k-md) 0;
  font-size: var(--p-sm);
  color: var(--orta);
}
.iletisim-ipucu > i { margin-top: .2em; color: var(--turuncu-700); }

/* Bal küpü: ekrandan ve ekran okuyucudan uzak, ama `display:none`
   değil — bazı botlar gizlenmiş alanları atlıyor. */
.iletisim-balkupu {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.page-form-help--uyari { color: var(--turuncu-700); font-weight: 700; }

/* Güvenlik sorusu: işlem solda sabit genişlikte, cevap alanı yanında.
   Alan kasten dar — beklenen girdi bir-iki karakter, geniş bir kutu
   uzun bir cevap bekleniyormuş izlenimi verirdi. */
.iletisim-soru-satir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-3); }
.iletisim-soru-metin {
  flex: 0 0 auto;
  padding: .65rem 1rem;
  border: 1px dashed var(--yesil-500);
  border-radius: var(--k-md);
  background: var(--yesil-50);
  color: var(--yesil-700);
  font-size: var(--p-lg);
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  /* Seçilip kopyalanması engelleniyor: soruyu makineye yapıştırmayı
     bir adım zorlaştırır, insan için bir kaybı yok. */
  user-select: none;
}
.iletisim-soru-alan { flex: 0 1 9rem; }

@media (max-width: 400px) {
  .iletisim-soru-alan { flex: 1 1 100%; }
}

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

/* ---------------------------------------------------------------------
   4. SAYFA BAŞLIĞI (page-hero)
   Eskiden her sayfada ortalanmış, bol boşluklu ve içeriksiz bir kutuydu.
   Şimdi sola hizalı ve daha sıkı: bilgi yoğunluğu arttı.
   --------------------------------------------------------------------- */
/* Eski kural `margin-top: 120px` veriyordu; başlık ile üst çubuk
   arasında koca bir boşluk kalıyordu. Başlık zaten kendi içinde nefes
   alıyor. */
.page-hero { margin-top: 0; padding-block: var(--b-6) var(--b-5); }

.page-hero-card {
  background: linear-gradient(135deg, var(--yesil-800) 0%, var(--yesil-600) 100%);
  border-radius: var(--k-lg);
  padding: var(--b-7) var(--b-6);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--g-3);
  /* SOLA HİZALI — eski kural ortalıyordu. Ortalanmış uzun paragraf
     satır başlarını her seferinde yeniden aratıyor; kurumsal bir
     sayfada okuma sola dayalı başlar. */
  text-align: left;
}

/* Köşedeki yumuşak ışık — düz yeşil blok cansız duruyordu */
.page-hero-card::after {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(242,107,29,.28) 0%, rgba(242,107,29,0) 70%);
  pointer-events: none;
}

.page-hero-card > * { position: relative; }

.page-hero-card h1 { color: #fff; margin-bottom: var(--b-3); }

.page-hero-card p {
  color: rgba(255,255,255,.86);
  font-size: var(--p-lg);
  max-width: 62ch;
  margin-bottom: var(--b-5);
}

.page-hero-card p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.page-hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: var(--b-4);
}
.page-hero-breadcrumb a { color: rgba(255,255,255,.72); }
.page-hero-breadcrumb a:hover { color: #fff; }

.page-hero-actions { display: flex; flex-wrap: wrap; gap: var(--b-3); justify-content: flex-start; margin-top: 0; }

/* ---------------------------------------------------------------------
   4b. ANA SAYFA KAHRAMANI
   Sayfa eskiden doğrudan haber kaydırıcısıyla açılıyordu; ziyaretçi
   sitenin ne olduğunu anlamadan slayt izliyordu.
   --------------------------------------------------------------------- */
.anasayfa-hero { padding-block: var(--b-7) var(--b-6); }

.anasayfa-hero-ic {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: var(--b-6);
  align-items: center;
  background: linear-gradient(135deg, var(--yesil-900) 0%, var(--yesil-700) 55%, var(--yesil-600) 100%);
  border-radius: var(--k-lg);
  padding: var(--b-8) var(--b-7);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--g-3);
}
.anasayfa-hero-ic::after {
  content: '';
  position: absolute;
  top: -45%; right: -8%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(242,107,29,.30) 0%, rgba(242,107,29,0) 68%);
  pointer-events: none;
}
.anasayfa-hero-ic > * { position: relative; }

@media (max-width: 991.98px) {
  .anasayfa-hero-ic { grid-template-columns: 1fr; padding: var(--b-6) var(--b-5); }
}

.anasayfa-hero-etiket {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 var(--b-4);
  padding: .35rem .9rem;
  border-radius: var(--k-tam);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

.anasayfa-hero-metin h1 { color: #fff; margin-bottom: var(--b-4); }

.anasayfa-hero-aciklama {
  color: rgba(255,255,255,.82);
  font-size: var(--p-lg);
  max-width: 56ch;
  margin-bottom: var(--b-5);
}

.anasayfa-hero-eylem { display: flex; flex-wrap: wrap; gap: var(--b-3); }

.btn-hero-ikincil {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
}
.btn-hero-ikincil:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Günün özeti kartı — camsı değil, okunur. Rakamlar veri. */
.anasayfa-ozet {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--k-md);
  padding: var(--b-5);
  backdrop-filter: blur(6px);
}

.anasayfa-ozet-baslik {
  margin: 0;
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.anasayfa-ozet-tarih {
  margin: 0 0 var(--b-4);
  font-size: var(--p-xl);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.anasayfa-ozet-liste { margin: 0 0 var(--b-4); }
.anasayfa-ozet-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--b-3);
  padding-block: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.anasayfa-ozet-satir:last-child { border-bottom: 0; }
.anasayfa-ozet-satir dt { font-size: var(--p-sm); color: rgba(255,255,255,.72); font-weight: 600; }
.anasayfa-ozet-satir dd {
  margin: 0;
  font-size: var(--p-lg);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
/* Yön hem renkle hem okla — renk tek başına taşımıyor */
.anasayfa-ozet-artis { color: #ffb4a3 !important; }
.anasayfa-ozet-dusus { color: #9fe3bd !important; }
.anasayfa-ozet-artis i, .anasayfa-ozet-dusus i { font-size: 13px; }
/* Kıyas verisi yoksa: sayı değil, durum bildirimi */
.anasayfa-ozet-yok {
  font-size: var(--p-sm) !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.55) !important;
  font-style: italic;
}

.anasayfa-ozet-baglanti {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--p-sm);
  font-weight: 700;
  color: #fff;
}
.anasayfa-ozet-baglanti:hover { color: var(--turuncu-500); }

/* Bölüm etiketi — başlıkların üstündeki küçük kılavuz */
.bolum-etiket {
  margin: 0 0 var(--b-2);
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turuncu-600);
}

/* ---------------------------------------------------------------------
   4c. YÖNETİM ÖZETİ (ana sayfa)
   --------------------------------------------------------------------- */
.yonetim-ozet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--b-6);
  align-items: center;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-lg);
  box-shadow: var(--g-2);
  padding: var(--b-6);
}
@media (max-width: 991.98px) {
  .yonetim-ozet { grid-template-columns: 1fr; }
}
.yonetim-ozet-metin p { color: var(--orta); }
.yonetim-ozet-metin h2 { margin-bottom: var(--b-3); }

/* Avatar şeridi — üst üste binen daireler, ekip hissi */
.yonetim-ozet-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-left: 10px;
}
.yonetim-ozet-serit li {
  margin-left: -10px;
  transition: transform var(--gecis);
}
.yonetim-ozet-serit li:hover { transform: translateY(-4px); z-index: 1; }
.yonetim-ozet-serit .yonetim-photo,
.yonetim-ozet-serit .yonetim-bashari { margin: 0; }

.yonetim-ozet-kalan {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--p-md);
  color: var(--orta);
  background: var(--cizgi-acik);
  border: 3px solid var(--yuzey);
  box-shadow: var(--g-1);
}

/* Ekran okuyucuya görünür, gözle görünmez */
.gorsel-gizli {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Geniş tablo dar ekranda kendi içinde kaysın, sayfa kaymasın */
.fiyatlar-tablo-kaydir { overflow-x: auto; }

/* ---------------------------------------------------------------------
   5. DÜĞMELER
   Bootstrap'in .btn'i taban; görünümü tamamen burada tanımlanıyor.
   --------------------------------------------------------------------- */
.btn {
  font-family: var(--yazi) !important;
  font-weight: 700;
  font-size: var(--p-sm);
  letter-spacing: .01em;
  border-radius: var(--k-tam);
  padding: .7rem 1.5rem;
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: transform var(--gecis), box-shadow var(--gecis), background-color var(--gecis), color var(--gecis);
}
.btn:active { transform: translateY(1px); }

.btn-warning,
.btn-featured-news,
.btn-haberler {
  background: var(--turuncu-500) !important;
  border-color: var(--turuncu-500) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(242,107,29,.8);
}
.btn-warning:hover,
.btn-featured-news:hover,
.btn-haberler:hover {
  background: var(--turuncu-600) !important;
  border-color: var(--turuncu-600) !important;
  color: #fff !important;
}

.btn-success, .fiyatlar-excel-btn {
  background: var(--yesil-600) !important;
  border-color: var(--yesil-600) !important;
  color: #fff !important;
  box-shadow: var(--g-yesil);
}
.btn-success:hover, .fiyatlar-excel-btn:hover {
  background: var(--yesil-700) !important;
  border-color: var(--yesil-700) !important;
  color: #fff !important;
}

.btn-outline-dark {
  background: transparent !important;
  border-color: rgba(255,255,255,.45) !important;
  color: #fff !important;
}
.btn-outline-dark:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* page-hero DIŞINDA kullanılan ana hat düğmesi koyu zemin varsaymaz */
.page-card .btn-outline-dark,
.page-section .btn-outline-dark {
  border-color: var(--cizgi) !important;
  color: var(--koyu) !important;
}
.page-card .btn-outline-dark:hover,
.page-section .btn-outline-dark:hover {
  background: var(--yesil-50) !important;
  border-color: var(--yesil-500) !important;
  color: var(--yesil-700) !important;
}

/* ---------------------------------------------------------------------
   6. ÜRÜN KARTLARI  (urunler.php)
   Eski hâli: 12 özdeş beyaz kutu, minik ikon, alt kenarda yarım kalmış
   gri "Aktif" şeridi. Yeni hâli: ikon kartın kimliği hâline geldi,
   durum rozete indi, birim ikincil bilgi olarak konumlandı.
   --------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--b-4);
}

.product-card {
  position: relative;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-md);
  padding: var(--b-5) var(--b-4) var(--b-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--b-3);
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

/* Üstteki ince yeşil şerit — kartlara tek tek çerçeve çizmeden
   hepsini aynı aileye bağlıyor */
.product-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yesil-500), var(--turuncu-500));
  opacity: 0;
  transition: opacity var(--gecis);
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--g-3);
  border-color: var(--yesil-100);
}
.product-card:hover::before { opacity: 1; }

.product-card-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--k-md);
  background: linear-gradient(135deg, var(--yesil-50), var(--yesil-100));
  color: var(--yesil-600);
  font-size: 26px;
  flex: none;
}

.product-card-title {
  font-size: var(--p-lg);
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  /* Ürün adları büyük harfle geliyor (SIVRI BIBER); tam büyük harf
     okumayı yavaşlatıyor, ilk harf büyük hâline çevriliyor. */
  text-transform: lowercase;
}
.product-card-title::first-letter { text-transform: uppercase; }

.product-card-unit {
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soluk);
}

.product-card-status {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--p-xs);
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: var(--k-tam);
  background: var(--yesil-100);
  color: var(--yesil-700);
}
.product-card-status i { font-size: 11px; }

.product-card.inactive { opacity: .62; }
.product-card.inactive .product-card-icon {
  background: var(--cizgi-acik);
  color: var(--soluk);
}
.product-card.inactive .product-card-status {
  background: var(--cizgi-acik);
  color: var(--orta);
}

/* ---------------------------------------------------------------------
   7. YÖNETİCİ KARTLARI  (yoneticiler.php, index.php)
   Eski hâli: 12 kartın 11'i aynı turuncu kontur `user.png` yer
   tutucusunu gösteriyordu ve başkanın hiçbir görsel önceliği yoktu.
   Fotoğrafı olmayan üye artık BAŞ HARFLERİYLE çiziliyor — tekrar eden
   bir görsel yerine kişiye özel bir işaret.
   --------------------------------------------------------------------- */
.yonetim, .alt-yonetim {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--b-4);
}

.yonetim-ic {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-md);
  padding: var(--b-5) var(--b-4);
  text-align: center;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.yonetim-ic:hover {
  transform: translateY(-3px);
  box-shadow: var(--g-3);
  border-color: var(--yesil-100);
}

.yonetim-photo {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  /* Kaynak fotoğraflar 600×400 (yatay); `cover` olmadan daire içinde
     eziliyorlardı. */
  object-position: center top;
  margin: 0 auto var(--b-3);
  display: block;
  border: 3px solid var(--yuzey);
  box-shadow: 0 0 0 2px var(--yesil-100), var(--g-2);
  background: var(--yesil-50);
}

.yonetim-photo--sm,
.yonetim-bashari.yonetim-photo--sm { width: 68px; height: 68px; font-size: 22px; }

.yonetim-ic-bilgi { min-width: 0; }

/* Eski başkan kartı — görev dönemi asıl ayırt edici bilgi */
.yonetim-donem {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: var(--b-2) !important;
  font-size: var(--p-xs);
  font-weight: 700;
  color: var(--yesil-700);
  background: var(--yesil-50);
  border: 1px solid var(--yesil-100);
  border-radius: var(--k-tam);
  padding: .25rem .6rem;
  line-height: 1.4;
  text-align: left;
}

/* Fotoğrafsız üye: baş harfler */
.yonetim-bashari {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin: 0 auto var(--b-3);
  display: grid;
  place-items: center;
  /* Kontrast ölçüldü: koyu yeşil yazı açık yeşil zemin üzerinde ~7:1 */
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--yesil-700);
  background: linear-gradient(135deg, var(--yesil-100), #cfe7d9);
  border: 3px solid var(--yuzey);
  box-shadow: 0 0 0 2px var(--yesil-100), var(--g-2);
}

.yonetim-ic h2, .yonetim-ic h3 {
  font-size: var(--p-md);
  font-weight: 800;
  margin: 0 0 var(--b-1);
  letter-spacing: -0.01em;
}

/*
 * `:not(.yonetim-bashari)` ŞART: baş harf rozeti de bir <span> ve bu
 * kural onu 12 piksele düşürüp soluk griye çeviriyordu — daire içinde
 * neredeyse görünmez oluyordu.
 */
.yonetim-ic p,
.yonetim-ic span:not(.yonetim-bashari) {
  display: block;
  font-size: var(--p-xs);
  color: var(--soluk);
  font-weight: 600;
  margin: 0;
}

/* Başkan kartı — vitrindeki tek öncelikli kişi */
.yonetim-ic--baskan {
  grid-column: span 2;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--b-4);
  background: linear-gradient(135deg, var(--yesil-800), var(--yesil-600));
  border-color: transparent;
  color: #fff;
}
.yonetim-ic--baskan .yonetim-photo,
.yonetim-ic--baskan .yonetim-bashari {
  width: 104px; height: 104px; margin: 0; flex: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.4);
}
.yonetim-ic--baskan h2,
.yonetim-ic--baskan h3 { color: #fff; font-size: var(--p-xl); }
.yonetim-ic--baskan p,
.yonetim-ic--baskan span { color: rgba(255,255,255,.8); font-size: var(--p-sm); }

@media (max-width: 575.98px) {
  .yonetim-ic--baskan { flex-direction: column; text-align: center; }
  .yonetim-ic--baskan .yonetim-photo,
  .yonetim-ic--baskan .yonetim-bashari { margin-inline: auto; }
}

/* ---------------------------------------------------------------------
   8. FİYAT TABLOSU  (index.php, fiyatlar.php)
   Sitenin asıl içeriği. Sayılar TABULAR: orantılı rakamlarla sütun
   hizası kayıyor ve karşılaştırma zorlaşıyordu.
   --------------------------------------------------------------------- */
.fiyatlar-section { padding-block: var(--b-6); }

.fiyatlar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--b-4);
  margin-bottom: var(--b-5);
}

.fiyatlar-heading h1,
.fiyatlar-heading h2 { margin-bottom: var(--b-1); }

.fiyatlar-heading p { color: var(--orta); margin: 0; font-size: var(--p-sm); }
.fiyatlar-heading p span { color: var(--turuncu-600); font-weight: 700; }

.fiyatlar-actions { display: flex; flex-wrap: wrap; gap: var(--b-3); align-items: center; }

/* Ürün süzgeci */
.fiyatlar-suzgec { position: relative; display: flex; align-items: center; }
.fiyatlar-suzgec > i {
  position: absolute;
  left: 1rem;
  font-size: 13px;
  color: var(--soluk);
  pointer-events: none;
}
.fiyatlar-suzgec input {
  border: 1.5px solid var(--cizgi);
  border-radius: var(--k-tam);
  padding: .6rem 1.1rem .6rem 2.5rem;
  font-size: var(--p-sm);
  font-weight: 600;
  font-family: var(--yazi);
  color: var(--koyu);
  background: var(--yuzey);
  min-width: 200px;
}
.fiyatlar-suzgec input::placeholder { color: var(--soluk); font-weight: 500; }
.fiyatlar-suzgec input:focus {
  border-color: var(--yesil-500);
  box-shadow: 0 0 0 4px var(--yesil-100);
  outline: none;
}

.fiyatlar-sonuc {
  margin: var(--b-3) 0 0;
  font-size: var(--p-sm);
  font-weight: 600;
  color: var(--orta);
}

.fiyatlar-bos { color: var(--soluk); }

.fiyatlar-degisim { white-space: nowrap; }

.fiyatlar-select, .form-select {
  border: 1.5px solid var(--cizgi);
  border-radius: var(--k-tam);
  padding: .6rem 2.2rem .6rem 1.1rem;
  font-size: var(--p-sm);
  font-weight: 600;
  color: var(--koyu);
  background-color: var(--yuzey);
  min-width: 190px;
}
.fiyatlar-select:focus, .form-select:focus {
  border-color: var(--yesil-500);
  box-shadow: 0 0 0 4px var(--yesil-100);
  outline: none;
}

/*
 * GRID SIFIRLANIYOR — eski kural kalıntısı.
 *
 * Liste eskiden div'lerden kuruluydu ve style.css `.fiyatlar-table`,
 * `.fiyatlar-table-head`, `.fiyatlar-row` için `display: grid` +
 * `grid-template-columns` veriyordu. Yapı gerçek <table>'a çevrilince
 * bu kurallar tablo düzenini çökertiyor: hücreler alt alta kayıyor,
 * "BİRİM" sütunu ikinci satıra düşüyordu.
 */
.fiyatlar-table,
.fiyatlar-table thead.fiyatlar-table-head,
.fiyatlar-table tr.fiyatlar-row,
.fiyatlar-table tr.fiyatlar-row--empty {
  display: revert;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  border: 0;
}
.fiyatlar-table { display: table; }
.fiyatlar-table thead.fiyatlar-table-head { display: table-header-group; }
.fiyatlar-table tr.fiyatlar-row,
.fiyatlar-table tr.fiyatlar-row--empty { display: table-row; }

.fiyatlar-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--b-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-md);
  overflow: hidden;
}

.fiyatlar-table-head th {
  background: var(--yesil-800);
  color: rgba(255,255,255,.9);
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--b-3) var(--b-4);
  text-align: left;
  border: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.fiyatlar-table-head th:first-child { border-radius: var(--k-sm) 0 0 0; }
.fiyatlar-table-head th:last-child  { border-radius: 0 var(--k-sm) 0 0; text-align: right; }
.fiyatlar-table-head th:not(:first-child) { text-align: right; }

.fiyatlar-row td {
  padding: var(--b-3) var(--b-4);
  border-bottom: 1px solid var(--cizgi-acik);
  vertical-align: middle;
  font-size: var(--p-md);
}
.fiyatlar-row td:not(:first-child) { text-align: right; }
.fiyatlar-row:hover td { background: var(--yesil-50); }
.fiyatlar-row:last-child td { border-bottom: 0; }

/*
 * HÜCRELER TABLO HÜCRESİ OLARAK KALMALI.
 *
 * style.css `.fiyatlar-product`a `display: flex` veriyor (div'li
 * dönemden kalma). Bir <th>/<td> flex kabına çevrildiğinde tablo
 * düzeninden ÇIKIYOR: satırdaki hücreler alt alta kayıyor, sütun
 * hizası tamamen bozuluyordu. Bu yüzden hizalama flex ile değil,
 * satır içi öğelerle kuruluyor.
 */
.fiyatlar-table th,
.fiyatlar-table td { display: table-cell; vertical-align: middle; }

.fiyatlar-product {
  font-weight: 700;
  color: var(--murekkep);
  white-space: nowrap;
}
.fiyatlar-product .urun-rozet {
  display: inline-grid;
  vertical-align: middle;
  margin-right: var(--b-3);
}
.fiyatlar-urun-ad { vertical-align: middle; white-space: normal; }

/* ---------------------------------------------------------------------
   ÜRÜN ROZETİ — PNG'nin yerini alan ikon + aile rengi
   Renk TEK BAŞINA anlam taşımıyor; ürün adı hemen yanında yazılı.
   --------------------------------------------------------------------- */
.urun-rozet {
  display: grid;
  place-items: center;
  border-radius: var(--k-sm);
  flex: none;
  line-height: 1;
}
.urun-rozet--sm { width: 40px; height: 40px; font-size: 17px; }
.urun-rozet--md { width: 58px; height: 58px; font-size: 24px; border-radius: var(--k-md); }

.urun-rozet--kirmizi { background: #fdeceb; color: #c0392b; }
.urun-rozet--yesil   { background: var(--yesil-100); color: var(--yesil-700); }
.urun-rozet--cimen   { background: #e6f6e0; color: #3d7a1f; }
.urun-rozet--mor     { background: #f0e9f7; color: #6b3fa0; }
.urun-rozet--sari    { background: #fdf4d7; color: #a17800; }
.urun-rozet--turuncu { background: var(--turuncu-100); color: var(--turuncu-700); }
.urun-rozet--kahve   { background: #f2ebe3; color: #8a5a2b; }
.urun-rozet--mavi    { background: #e6eff7; color: #2b5f8a; }

/* Fiyatlar: sabit genişlikli rakam — sütunlar hizalı kalsın */
.fiyatlar-price,
.fiyatlar-price--today,
.fiyatlar-price--yesterday,
.fiyat-diff {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.fiyatlar-price--today {
  font-weight: 800;
  font-size: var(--p-lg);
  color: var(--murekkep);
}
.fiyatlar-price--yesterday { color: var(--soluk); font-weight: 600; }

.fiyat-diff {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: var(--p-xs);
  font-weight: 800;
  padding: .15rem .5rem;
  border-radius: var(--k-tam);
  margin-left: .4rem;
}
/* Yön RENKLE DEĞİL, ok işaretiyle de belli oluyor — renk körlüğü */
.fiyat-diff--up    { background: var(--kirmizi-50); color: var(--kirmizi-600); }
.fiyat-diff--down  { background: var(--yesil-100);  color: var(--yesil-700); }
.fiyat-diff--sabit { background: var(--cizgi-acik); color: var(--soluk); }
.fiyat-diff i { font-size: 10px; }

.fiyatlar-unit {
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soluk);
}

.fiyatlar-row--empty td {
  text-align: center;
  color: var(--soluk);
  padding-block: var(--b-8);
}

/* Yükselen / düşenler kartları */
.fiyatlar-trend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--b-4);
  margin-top: var(--b-5);
}
.fiyatlar-trend-card {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--soluk);
  border-radius: var(--k-md);
  padding: var(--b-4);
}
.fiyatlar-trend-card--up   { border-left-color: var(--kirmizi-600); }
.fiyatlar-trend-card--down { border-left-color: var(--yesil-500); }
.fiyatlar-trend-title {
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: var(--b-3);
}
.fiyatlar-trend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-3);
  padding-block: .4rem;
  border-bottom: 1px dashed var(--cizgi-acik);
  font-size: var(--p-sm);
}
.fiyatlar-trend-item:last-child { border-bottom: 0; }
.fiyatlar-trend-value { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   9. HABER KARTLARI  (haberler.php, index.php)
   --------------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--b-5);
}

.news-grid-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-lg);
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.news-grid-card:hover { transform: translateY(-4px); box-shadow: var(--g-3); }

.news-grid-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--cizgi-acik);
  display: block;
}

.news-grid-body { padding: var(--b-5); display: flex; flex-direction: column; gap: var(--b-2); flex: 1; }

.news-grid-date {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--soluk);
}

.news-grid-title {
  font-size: var(--p-lg);
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}
.news-grid-title a { color: var(--murekkep); }
.news-grid-title a:hover { color: var(--yesil-600); }

.news-grid-excerpt {
  color: var(--orta);
  font-size: var(--p-sm);
  margin: 0;
  /* Üç satırda kes: kartlar farklı yükseklikte olunca ızgara bozuluyordu */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-grid-badge,
.news-featured-badge {
  position: absolute;
  top: var(--b-3); left: var(--b-3);
  z-index: 1;
  background: var(--turuncu-500);
  color: #fff;
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: var(--k-tam);
  box-shadow: var(--g-2);
}

.news-grid-more { margin-top: var(--b-6); text-align: center; }

/* ---------------------------------------------------------------------
   9b. YAZI IZGARASI (ana sayfa) — karışık boyutlu
   Kaydırıcının yerini aldı: hiyerarşi dönen slaytla değil, kart
   boyutuyla kuruluyor.
   --------------------------------------------------------------------- */
.gundem-baslik {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--b-4);
  margin-bottom: var(--b-5);
}
.gundem-baslik h2 { margin: 0; }

.yazi-izgara {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--b-4);
}
@media (max-width: 1199.98px) { .yazi-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px)  { .yazi-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .yazi-izgara { grid-template-columns: 1fr; } }

/*
 * AZ YAZI VARSA MOZAİK YOK.
 *
 * Dört sütunlu mozaik çok yazı varsayıyor: büyük kart 2×2 kaplayınca
 * elde iki yazı kaldığında sağ tarafta koca bir boşluk oluşuyordu.
 * Üçten az yazıda kartlar eşit genişlikte ve geniş çiziliyor.
 */
.yazi-izgara--az { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 575.98px) { .yazi-izgara--az { grid-template-columns: 1fr; } }
.yazi-izgara--az .yazi-kart-gorsel { aspect-ratio: 16 / 9; }
.yazi-izgara--az .yazi-kart-baslik { font-size: var(--p-lg); }

.yazi-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-lg);
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.yazi-kart:hover {
  transform: translateY(-4px);
  box-shadow: var(--g-3);
  border-color: var(--yesil-100);
}

/* Büyük kart 2×2; küçük kartların yüksekliği satırı belirliyor, bu
   yüzden büyük kart kendi en-boy oranını DAYATMIYOR. */
.yazi-kart--buyuk { grid-column: span 2; grid-row: span 2; }
@media (max-width: 575.98px) {
  .yazi-kart--buyuk { grid-column: span 1; grid-row: span 1; }
}

.yazi-kart-gorsel {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--cizgi-acik);
  overflow: hidden;
}
.yazi-kart--buyuk .yazi-kart-gorsel { aspect-ratio: 16 / 9; flex: 1; }
.yazi-kart-gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
.yazi-kart:hover .yazi-kart-gorsel img { transform: scale(1.05); }

/* Görseli olmayan yazı: gerilmiş logo yerine marka ikonu */
.yazi-kart-ikon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  color: var(--yesil-500);
  background: linear-gradient(135deg, var(--yesil-50), var(--yesil-100));
}
.yazi-kart--buyuk .yazi-kart-ikon { font-size: 56px; }

.yazi-kart-rozet {
  position: absolute;
  top: var(--b-3); left: var(--b-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--turuncu-500);
  color: #fff;
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--k-tam);
  box-shadow: var(--g-2);
}

.yazi-kart-govde {
  padding: var(--b-4);
  display: flex;
  flex-direction: column;
  gap: var(--b-2);
}
.yazi-kart--buyuk .yazi-kart-govde { padding: var(--b-5); }

.yazi-kart-tarih {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--soluk);
}

.yazi-kart-baslik {
  margin: 0;
  font-size: var(--p-md);
  font-weight: 800;
  line-height: 1.3;
}
.yazi-kart--buyuk .yazi-kart-baslik { font-size: var(--p-2xl); }
.yazi-kart-baslik a { color: var(--murekkep); }
.yazi-kart-baslik a:hover { color: var(--yesil-600); }

.yazi-kart-ozet {
  margin: 0;
  font-size: var(--p-sm);
  color: var(--orta);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yazi-kart--buyuk .yazi-kart-ozet { font-size: var(--p-md); -webkit-line-clamp: 4; }

.news-detail-image {
  width: 100%;
  border-radius: var(--k-lg);
  margin-bottom: var(--b-5);
}

/* ---------------------------------------------------------------------
   9c. ÜST BAR — DUYURU
   Eskiden Bootstrap'in `alert` bileşeniydi: sarı zemin, kalın çerçeve,
   sayfanın en üstünde uyarı kutusu gibi duruyordu. Duyuru bir uyarı
   değil, sürekli görünen bir bilgi şeridi.
   --------------------------------------------------------------------- */
.header { padding: 0 !important; }

.duyuru {
  position: relative;
  margin: 0 !important;
  padding: .55rem clamp(1rem, 4vw, 2.5rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--yesil-900) 0%, var(--yesil-700) 100%) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: var(--p-sm);
  box-shadow: none !important;
}
.duyuru .row { align-items: center; }
.duyuru p { margin: 0; max-width: none; }
.duyuru a { color: #fff; text-decoration: none; }
.duyuru a:hover { color: var(--turuncu-500); }

/* "DUYURU »" rozeti */
.duyurusu strong {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--turuncu-500);
  color: #fff;
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .1em;
  padding: .2rem .6rem;
  border-radius: var(--k-tam);
  margin-right: .6rem;
}
.duyurusu strong i { font-size: 9px; }

.announcement-message-container { font-weight: 600; }

.zaman { text-align: right; }
.zaman p {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: var(--p-xs);
  color: rgba(255,255,255,.66);
}
.announcement-meta-container { display: inline-flex; align-items: center; gap: .4rem; }
.announcement-contact a { font-weight: 700; }

@media (max-width: 767.98px) {
  .zaman { text-align: left; margin-top: .35rem; }
}

.duyuru .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .5;
  padding: .6rem !important;
}
.duyuru .btn-close:hover { opacity: 1; }

/* ---------------------------------------------------------------------
   9d. MENÜ
   --------------------------------------------------------------------- */
.navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi);
}

.navbar.menu { padding-block: var(--b-3); }

.navbar-brand img {
  /* Logo 504×172 basılıyordu; yükseklikten sınırlanınca oran korunuyor */
  height: 58px;
  width: auto;
}

.navbar-nav .nav-link {
  position: relative;
  font-weight: 700;
  font-size: var(--p-md);
  color: var(--koyu) !important;
  padding: .5rem .9rem !important;
  border-radius: var(--k-sm);
  transition: color var(--gecis), background-color var(--gecis);
}
.navbar-nav .nav-link:hover { color: var(--yesil-600) !important; background: var(--yesil-50); }

/* Etkin sayfa: altında kısa bir çizgi — renk tek başına taşımıyor */
.navbar-nav .nav-link.active { color: var(--yesil-700) !important; }
.navbar-nav .nav-link.active::after {
  content: '';
  position: absolute;
  left: .9rem; right: .9rem; bottom: .15rem;
  height: 3px;
  border-radius: var(--k-tam);
  background: linear-gradient(90deg, var(--yesil-500), var(--turuncu-500));
}

.navbar-toggler {
  border: 1.5px solid var(--cizgi);
  border-radius: var(--k-sm);
  padding: .45rem .7rem;
  color: var(--koyu);
  font-size: 18px;
  line-height: 1;
}
.navbar-toggler:focus { box-shadow: 0 0 0 4px var(--yesil-100); }

/* ---------------------------------------------------------------------
   Piyasa şeridi — hava, döviz/altın, belgeler

   Kalem sayısı 2'den 10'a çıktı (gram/çeyrek/yarım/tam/cumhuriyet/
   bilezik/gümüş eklendi). Eski düzen `flex-wrap: wrap` idi: kalemler
   alt satıra taşıyor, şerit üç sıra yüksekliğe çıkıp gezinme çubuğunu
   aşağı itiyordu. Artık orta blok TEK SATIR ve yatay kaydırılabilir;
   kenarlarda maske devamı olduğunu gösteriyor.
   --------------------------------------------------------------------- */
.market-bar {
  /* DÜZ zemin, dikey degrade değil. Rayın sağındaki solma maskesi tek
     bir renge doğru kaybolmak zorunda; degrade zeminde maskenin üst
     ucu ile çubuğun üst ucu farklı renk oluyor ve köşede görünür bir
     bant kalıyordu. */
  background: var(--yesil-50);
  border-bottom: 1px solid var(--cizgi);
  font-size: var(--p-xs);
}
.market-bar-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--b-3);
  padding-block: .5rem;
}

/* Ray: esneyen tek alan. min-width:0 şart — flex öğesi varsayılan
   olarak içeriğinden küçülmez ve taşma yerine konteyneri genişletirdi. */
.market-bar-rail {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.market-bar-rail::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 2.5rem;
  pointer-events: none;
  /* Çubuğun zemin rengiyle aynı; #f1f9f4 = var(--yesil-50). Şeffaf uç
     için rgba yazmak zorundayız, `transparent` Safari'de siyaha doğru
     solar. */
  background: linear-gradient(90deg, rgba(241, 249, 244, 0), rgba(241, 249, 244, 1));
}

.market-bar-items {
  display: flex;
  /* `nowrap` AÇIKÇA yazılıyor. Varsayılan zaten bu, ama style.css'te
     duran eski kopya `wrap` bildiriyordu ve bu kuralı sessizce eziyordu
     (şerit 171px'e çıkıyordu). Eski blok kaldırıldı; yine de bildirimi
     burada tutmak, aynı çakışmanın tekrar sızmasını engelliyor. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* Kaydırma çubuğu gizli ama kaydırma açık; klavye odağı görünür. */
}
.market-bar-item--loading,
.market-bar-item--empty { opacity: .7; }
.market-bar-items::-webkit-scrollbar { display: none; }
.market-bar-items:focus-visible {
  outline: 2px solid var(--yesil-500);
  outline-offset: 2px;
  border-radius: var(--k-sm);
}

.market-bar-item {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  flex: 0 0 auto;
  padding-inline: .8rem;
  scroll-snap-align: start;
  white-space: nowrap;
}
/* Ayırıcı çizgi: ayrı bir öğe eklemeden, ilk kalem hariç. */
.market-bar-items .market-bar-item + .market-bar-item {
  border-left: 1px solid var(--cizgi);
}
.market-bar-item > i { align-self: center; color: var(--soluk); font-size: .95em; }

.market-bar-label {
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soluk);
}
.market-bar-value {
  font-weight: 800;
  color: var(--murekkep);
  font-variant-numeric: tabular-nums;
}
.market-bar-change {
  margin-left: .35rem;
  font-weight: 700;
  font-size: .85em;
  font-variant-numeric: tabular-nums;
}
/* Yön rengi yalnız değişim rozetinde; sayının kendisi nötr kalıyor ki
   şerit alacalı görünmesin. Ok işareti renge bağlı olmayan ikinci
   göstergedir (renk körlüğü). */
.market-bar-item.is-up .market-bar-change { color: var(--yesil-700); }
.market-bar-item.is-down .market-bar-change { color: #c0392b; }
.market-bar-item.is-flat .market-bar-change { color: var(--soluk); }

.market-bar-item--weather { flex: 0 0 auto; padding-inline: 0; }
.market-bar-item--weather > i { color: var(--turuncu-600); }

.market-bar-divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: var(--cizgi);
}

.market-bar-membership { display: flex; flex: 0 0 auto; gap: var(--b-3); }
/* Bağlantı `.market-bar-item--membership` sınıfını KENDİSİ taşıyor.
   Önceki kural `… --membership a` idi ve hiçbir zaman eşleşmiyordu;
   evrak bağlantıları biçimsiz kalmıştı. */
a.market-bar-item--membership {
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orta);
  text-decoration: none;
  transition: color var(--gecis);
}
a.market-bar-item--membership:hover,
a.market-bar-item--membership:focus-visible { color: var(--turuncu-600); }
a.market-bar-item--membership > i { color: #c0392b; }

/* Dar ekranda evrak bağlantıları şeridi tıkıyor; asıl işlevleri alt
   bilgide ve menüde de var. Hava + kurlar öncelikli. */
@media (max-width: 991.98px) {
  .market-bar-membership,
  .market-bar-membership + .market-bar-divider,
  .market-bar-container > .market-bar-divider:last-of-type { display: none; }
}
@media (max-width: 575.98px) {
  .market-bar-item { padding-inline: .6rem; }
  .market-bar-item--weather .market-bar-label { display: none; }
}

/* ---------------------------------------------------------------------
   Tam piyasa paneli (fiyatlar sayfası)
   Şerit tek satır olduğu için 10 kalemi kırpmadan gösteremiyor; burada
   her kalem alış fiyatı ve günlük değişimiyle birlikte veriliyor.
   --------------------------------------------------------------------- */
.piyasa-panel { margin-top: var(--b-7); }

.piyasa-panel-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--b-3);
  margin-bottom: var(--b-5);
  padding-bottom: var(--b-3);
  border-bottom: 2px solid var(--yesil-100);
}
.piyasa-eyebrow {
  display: block;
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turuncu-600);
  margin-bottom: .25rem;
}
.piyasa-panel-bas h2 { margin: 0; font-size: var(--p-2xl); color: var(--murekkep); }
.piyasa-guncelleme {
  margin: 0;
  font-size: var(--p-xs);
  font-weight: 700;
  color: var(--soluk);
  font-variant-numeric: tabular-nums;
}

.piyasa-izgara {
  display: grid;
  /* 158px eşiği telefonda İKİ sütun veriyor. 190px'te tek sütuna
     düşüyordu ve on kalem ekranca uzun bir şerit oluyordu. */
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--b-3);
}

.piyasa-kart {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "ikon ad"
    "deger deger"
    "alt alt";
  align-items: center;
  gap: .35rem .6rem;
  padding: var(--b-4);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-md);
  /* Sol kenarda yön şeridi — kartlar bir örnek olmasın diye tek
     renkli vurgu; kutunun tamamını renklendirmek gürültü yaratıyordu. */
  border-left: 3px solid var(--cizgi);
  transition: box-shadow var(--gecis), transform var(--gecis);
}
.piyasa-kart:hover { box-shadow: var(--g-2); transform: translateY(-2px); }
.piyasa-kart.is-up { border-left-color: var(--yesil-500); }
.piyasa-kart.is-down { border-left-color: #c0392b; }

.piyasa-kart-ikon {
  grid-area: ikon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--k-sm);
  background: var(--yesil-50);
  color: var(--yesil-700);
  font-size: 14px;
}
.piyasa-kart--altin .piyasa-kart-ikon { background: var(--turuncu-50); color: var(--turuncu-700); }

.piyasa-kart-ad {
  grid-area: ad;
  margin: 0;
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--soluk);
}
.piyasa-kart-deger {
  grid-area: deger;
  margin: .2rem 0 0;
  font-size: var(--p-xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--murekkep);
  font-variant-numeric: tabular-nums;
}
.piyasa-kart-birim { margin-left: .15rem; font-size: .6em; font-weight: 700; color: var(--soluk); }

.piyasa-kart-alt {
  grid-area: alt;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin: .2rem 0 0;
  font-size: var(--p-xs);
  font-variant-numeric: tabular-nums;
}
.piyasa-kart-degisim { font-weight: 800; color: var(--soluk); }
.piyasa-kart.is-up .piyasa-kart-degisim { color: var(--yesil-700); }
.piyasa-kart.is-down .piyasa-kart-degisim { color: #c0392b; }
.piyasa-kart-alis { color: var(--soluk); font-weight: 600; }

.piyasa-not {
  margin: var(--b-4) 0 0;
  font-size: var(--p-xs);
  color: var(--soluk);
}

@media (prefers-reduced-motion: reduce) {
  .piyasa-kart, .piyasa-kart:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------
   9e. BAŞKAN MESAJI
   Eski hâli: solda gerilmiş bir fotoğraf, sağda gri istatistik kutuları
   ve düz bir metin bloğu. Fotoğraf 600×400 kaynaktan 474×668'e
   esnetiliyordu — yüz orantısı bozuluyordu.
   --------------------------------------------------------------------- */
.baskan { padding-block: var(--b-7); }

.baskan-kart {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--k-lg);
  box-shadow: var(--g-3);
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .baskan-kart { grid-template-columns: 1fr; }
}

/* --- Portre: karta TAM KANIYOR, ad fotoğrafın üzerinde --- */
.baskan-portre {
  position: relative;
  margin: 0;
  min-height: 440px;
  background: linear-gradient(135deg, var(--yesil-800), var(--yesil-600));
}
@media (max-width: 991.98px) { .baskan-portre { min-height: 340px; } }

.baskan-portre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `cover` ŞART: kaynak yatay (600×400), kap dikey — olmadan yüz
     eziliyordu. Odak yüze göre üstte tutuluyor. */
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

/* Alt perde: ad okunsun diye. Düz siyah yerine markanın koyu yeşili —
   sıcak tonlu fotoğrafta siyah perde kirli duruyor. */
.baskan-portre figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--b-7) var(--b-5) var(--b-4);
  background: linear-gradient(180deg, rgba(16,41,27,0) 0%, rgba(16,41,27,.82) 55%, rgba(16,41,27,.95) 100%);
  color: #fff;
}
.baskan-portre-ad {
  display: block;
  font-family: var(--yazi);
  font-size: var(--p-xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.baskan-portre-unvan {
  display: block;
  margin-top: 2px;
  font-size: var(--p-sm);
  font-weight: 600;
  color: rgba(255,255,255,.72);
}
/* Ad ile unvan arasında kısa marka çizgisi */
.baskan-portre figcaption::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  border-radius: var(--k-tam);
  background: linear-gradient(90deg, var(--honey, var(--turuncu-500)), var(--yesil-500));
  margin-bottom: var(--b-3);
}

/* --- İçerik --- */
.baskan-icerik {
  display: flex;
  flex-direction: column;
  padding: var(--b-7) var(--b-6);
}
@media (max-width: 991.98px) { .baskan-icerik { padding: var(--b-5); } }

.baskan-icerik h2 { margin-bottom: var(--b-4); }

/* Alıntı işareti metnin başında, akışın içinde */
.baskan-mesaj {
  position: relative;
  padding-top: var(--b-5);
  font-size: var(--p-md);
  line-height: 1.9;
  color: var(--orta);
  max-width: 66ch;
  /*
   * SOLA DAYALI — eski kural `justify` veriyordu. İki yana yaslama
   * kelime aralıklarını satır satır değiştiriyor; uzun paragrafta
   * metnin içinde dikey beyaz nehirler oluşuyor ve okuma yavaşlıyor.
   */
  text-align: left !important;
  hyphens: none;
}
.baskan-mesaj::before {
  content: '\201C';
  position: absolute;
  top: -14px; left: -4px;
  font-size: 76px;
  line-height: 1;
  font-weight: 800;
  color: var(--yesil-100);
  pointer-events: none;
}

/* --- Sayılar: kutu değil, ince şerit --- */
.baskan-sayilar {
  display: flex;
  flex-wrap: wrap;
  margin: var(--b-6) 0 0;
  padding-top: var(--b-5);
  border-top: 1px solid var(--cizgi-acik);
  gap: var(--b-5);
}
.baskan-sayi { min-width: 120px; }
.baskan-sayi dt {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: var(--b-1);
}
.baskan-sayi dt i { color: var(--yesil-500); font-size: 12px; }
.baskan-sayi dd {
  margin: 0;
  font-size: var(--p-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--murekkep);
  font-variant-numeric: tabular-nums;
}

/* Eski `baskan-*` kuralları için sıfırlama — style.css'te
   `.baskan-card`, `.baskan-figure`, `.baskan-stat-card` hâlâ tanımlı
   ve yeni yapıya karışmasınlar diye burada etkisizleştiriliyor. */
.baskan .row { display: block; margin: 0; }

/* ---------------------------------------------------------------------
   10. ALTBİLGİ
   --------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--yesil-900);
  color: rgba(255,255,255,.72);
  padding-block: var(--b-8) var(--b-5);
  margin-top: var(--b-9);
  overflow: hidden;
}
/* Üstte ince marka şeridi ve köşede yumuşak ışık */
.footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--yesil-500), var(--turuncu-500), var(--yesil-500));
}
.footer::after {
  content: '';
  position: absolute;
  bottom: -30%; left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 420px;
  background: radial-gradient(ellipse, rgba(46,139,87,.22) 0%, rgba(46,139,87,0) 70%);
  pointer-events: none;
}
.footer > * { position: relative; }

.footer a { color: rgba(255,255,255,.82); }
.footer a:hover { color: var(--turuncu-500); }

/*
 * DÖRT SÜTUNLU ALT BİLGİ.
 *
 * Eski düzen tek sütunluk bir yığındı (ortalanmış logo → ortalanmış
 * bağlantı satırı → dört telefon kartı → telif). Rengi yenilenmişti ama
 * yapısı değişmemişti; adres, e-posta ve çalışma saatleri veritabanında
 * dolu olduğu hâlde altbilgide hiç görünmüyordu.
 *
 * Sütun oranları eşit değil: marka sütunu metin taşıdığı için daha
 * geniş, bağlantı sütunları dar. Eşit dörtlü ızgara, kısa listelerin
 * yanında geniş boşluk bırakıyordu.
 */
.alt-ust {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: var(--b-6) var(--b-5);
  padding-bottom: var(--b-7);
}

.alt-marka { max-width: 42ch; }
.footer-logo {
  max-width: 190px;
  width: 100%;
  height: auto;
  margin-bottom: var(--b-4);
}
.alt-ozet {
  margin: 0;
  font-size: var(--p-sm);
  line-height: 1.75;
  color: rgba(255,255,255,.62);
}

.alt-belgeler { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-4); }
.alt-belge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--k-tam);
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color var(--gecis), border-color var(--gecis);
}
.alt-belge:hover, .alt-belge:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
}
.alt-belge > i { color: var(--turuncu-500); }

/* Sütun başlıkları <h2>: altbilgi bölümleri belge ana hattında da
   adlandırılmış olsun (ekran okuyucu gezinmesi). Görsel ağırlıkları
   içerik başlıklarıyla yarışmasın diye küçük ve harf aralıklı. */
.alt-baslik {
  margin: 0 0 var(--b-3);
  font-size: var(--p-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.alt-baslik::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin-top: .5rem;
  background: var(--turuncu-500);
}

.alt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-2); }
.alt-liste a { text-decoration: none; }
.alt-liste > li { font-size: var(--p-sm); line-height: 1.6; }

/* Bağlantılar için ince bir kayma göstergesi — altbilgide alt çizgi
   kalabalık görünüyor, ok yerine boşluk hareketi yeterli. */
.alt-sutun .alt-liste a {
  display: inline-block;
  transition: transform var(--gecis), color var(--gecis);
}
.alt-sutun .alt-liste a:hover,
.alt-sutun .alt-liste a:focus-visible { transform: translateX(3px); }

.alt-iletisim > li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start; }
.alt-iletisim > li > i { margin-top: .25em; color: var(--yesil-500); }

.alt-tel > li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-bottom: var(--b-2);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.alt-tel > li:last-child { border-bottom: 0; padding-bottom: 0; }
.alt-tel-sahip {
  font-size: var(--p-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesil-500);
}
/* Numaralar ayrı satırlarda değil, aynı satırda ayrık — tek alanda iki
   numara olabiliyor ("0242 … - 0530 …"). */
.alt-tel-nolar { display: flex; flex-wrap: wrap; gap: .15rem .75rem; }
.alt-tel-nolar a {
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.alt-tel-nolar a:hover { color: var(--turuncu-500); }

/* Telif şeridi */
.alt-serit {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: var(--b-4);
}
.alt-serit-ic {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--b-2) var(--b-5);
  font-size: var(--p-xs);
  line-height: 1.7;
}
.alt-telif { margin: 0; color: rgba(255,255,255,.6); }
.alt-uyari { margin: 0; max-width: 62ch; color: rgba(255,255,255,.38); }

@media (max-width: 991.98px) {
  .alt-ust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Marka sütunu iki hücreyi kaplasın; tek başına dar kalınca özet
     metni beş kelimelik satırlara düşüyordu. */
  .alt-marka { grid-column: 1 / -1; max-width: 60ch; }
}
@media (max-width: 575.98px) {
  .alt-ust { grid-template-columns: minmax(0, 1fr); gap: var(--b-5); }
  .alt-serit-ic { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .alt-sutun .alt-liste a:hover,
  .alt-sutun .alt-liste a:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------
   11. YARDIMCILAR
   --------------------------------------------------------------------- */
.golge { box-shadow: var(--g-2); }

.page-status {
  border-radius: var(--k-md);
  padding: var(--b-3) var(--b-4);
  font-weight: 600;
  font-size: var(--p-sm);
  margin-bottom: var(--b-4);
  border: 1px solid transparent;
}
.page-status--success { background: var(--yesil-50); color: var(--yesil-700); border-color: var(--yesil-100); }
.page-status--error   { background: var(--kirmizi-50); color: var(--kirmizi-600); border-color: #f6c9c3; }