/* Orta panel bileşenleri — tasarım artboardlarındaki kompozisyon.

   Kaynak: fonkrizi tasarım artboardları (Main / Aciklama / Takip / Sirketler).
   Oradaki kuruluş birebir taşındı: iri display başlık, noktalı üst etiket,
   kutu yerine çizgiyle ayrılmış liste, belge başlıklı kart, ÖNCE→SONRA
   karşılaştırması, "BU NE DEMEK?" açıklama bloğu, sayaç ızgarası, numaralı
   zaman çizelgesi.

   Renk artboardlardan DEĞİL, sitenin karanlık paletinden gelir. Artboardlar
   açık renkliydi; site karanlığa çevrildi ve iki dilin aynı olması için
   bileşenler koyu zeminde yeniden tonlandı. Kontrastlar fonkrizi.css'te
   ölçülmüş tokenlarla kurulu. */

/* ——————————————————————————————————————— üst etiket (nokta + mono) */

.ust-etiket {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
}
.ust-etiket__nokta {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--menekse);
  box-shadow: 0 0 0 4px var(--menekse-zar);
}
.ust-etiket__yazi {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--menekse);
  letter-spacing: .17em;
  text-transform: uppercase;
}

/* ——————————————————————————————————————— display başlık ve giriş */

.dev-baslik {
  font-family: var(--baslik);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--murekkep);
  margin: 0 0 20px;
}
.giris {
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.6;
  color: var(--ikincil);
  max-width: 56ch;
  margin: 0 0 32px;
}

/* ——————————————————————————————————————— çizgiyle ayrılmış liste

   Artboardda bu satırlar kutu içinde değil; yalnızca ince çizgilerle
   ayrılmış. Kutusuz olması sayfayı sakinleştiriyor. */

.bolum-liste { border-top: 1px solid var(--cizgi); }
.bolum-liste__oge {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--cizgi);
  color: inherit;
}
a.bolum-liste__oge { transition: padding-left .16s ease; }
a.bolum-liste__oge:hover { text-decoration: none; padding-left: 8px; }
.bolum-liste__ad {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--murekkep);
  margin-bottom: 5px;
}
.bolum-liste__alt { font-size: 14.5px; line-height: 1.5; color: var(--yardimci); }

/* ——————————————————————————————————————— belge kartı

   Üstte mono bir künye bandı — resmî evrak hissi. Artboarddaki
   "SERMAYE PİYASASI KURULU BÜLTENİ / 2026/62" başlığının karşılığı. */

.belge { padding: 0; overflow: hidden; }
.belge__bant {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 23px;
  border-bottom: 1px solid var(--kart-cizgi);
  background: rgba(var(--dip-rgb), .34);
}
.belge__kunye {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--yardimci);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.belge__govde { padding: 23px; }
.belge__tarih {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--kunye);
  letter-spacing: .1em;
  margin-bottom: 13px;
}
/* Bandın sağ tarafı: ilişki etiketi, katman rozeti, belge kimliği.
   Belge kimliği bazen bir cümle kadar uzun — SPK duyurularının kimliği
   adresinden türüyor. Geniş ekranda sağa yaslı tek satır; dar ekranda
   alta iner ve sarar. Kesilen kimlik işe yaramaz: okuyan belgeyi
   ayırt edemez. */
.belge__isaretler {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 760px) {
  .belge__bant { flex-direction: column; align-items: flex-start; gap: 11px; }
  /* Sütuna dönen bantta genişliği kendi içeriğinden alıyordu; kimlik
     çipi kartı taşırıyordu. Tam genişlik verilince max-width işliyor. */
  .belge__isaretler { width: 100%; justify-content: flex-start; }
  .belge__isaretler .cip {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
}

.belge__basi {
  font-family: var(--baslik);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.24;
  font-weight: 600;
  color: var(--murekkep);
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

/* ——————————————————————————————————————— mono çip */

.cip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
}
.cip--menekse { background: var(--menekse-zar); border-color: rgba(var(--menekse-rgb), .38); color: var(--menekse); }
.cip--siena   { background: var(--siena-zar);   border-color: rgba(var(--siena-rgb), .42);  color: var(--siena); }
.cip--uyari   { background: var(--uyari-zar);   border-color: rgba(var(--uyari-rgb), .42); color: var(--uyari); }
.cip--sessiz  { background: rgba(var(--sis-rgb), .10); border-color: var(--cizgi-koyu); color: var(--yardimci); }

/* ——————————————————————————————————————— eski → yeni karşılaştırması */

.degisim {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border-radius: 12px;
  background: rgba(var(--dip-rgb), .40);
  border: 1px solid var(--kart-cizgi);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .26);
  margin-bottom: 18px;
}
.degisim__yan { flex: 1 1 0; min-width: 0; }
.degisim__ad {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--kunye);
}
.degisim__deger {
  font-family: var(--baslik);
  font-size: 19px;
  font-weight: 600;
  color: var(--murekkep);
}
.degisim__yan--eski .degisim__deger { color: var(--kunye); text-decoration: line-through; }
.degisim__yan--yeni .degisim__ad { color: var(--siena); }
.degisim__ok { flex: 0 0 auto; color: var(--siena); display: flex; }

/* ——————————————————————————————————————— "bu ne demek?" bloğu */

.ne-demek {
  padding: 15px 17px;
  border-radius: 12px;
  background: var(--menekse-zar);
  border-left: 3px solid var(--menekse);
  margin-bottom: 20px;
}
.ne-demek__ad {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--menekse);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ne-demek__yazi { font-size: 14.5px; line-height: 1.58; color: var(--murekkep); }
.ne-demek--siena { background: var(--siena-zar); border-left-color: var(--siena); }
.ne-demek--siena .ne-demek__ad { color: var(--siena); }

/* ——————————————————————————————————————— düğme */

.dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(168deg, var(--dugme-ust), var(--dugme-alt));
  border: 1px solid rgba(var(--menekse-rgb), .40);
  color: var(--dugme-yazi);
  font-size: 15.5px;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 1px 0 var(--dugme-kenar-1),
    0 2px 0 var(--dugme-kenar-2),
    0 3px 0 var(--dugme-kenar-3),
    0 16px 30px -18px rgba(0, 0, 0, .6);
  transition: transform .16s ease, box-shadow .16s ease;
}
.dugme:hover {
  text-decoration: none;
  color: var(--dugme-yazi);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 1px 0 var(--dugme-kenar-1),
    0 3px 0 var(--dugme-kenar-2),
    0 5px 0 var(--dugme-kenar-3),
    0 22px 40px -18px rgba(0, 0, 0, .65);
}
.dugme:active { transform: translateY(1px); }

/* ——————————————————————————————————————— sayaç ızgarası */

.sayaclar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: var(--bosluk);
}
.sayac {
  padding: 21px;
  border-radius: 14px;
  background: linear-gradient(168deg, var(--kart-ust), var(--kart-alt));
  border: 1px solid var(--kart-kenar);
  box-shadow: var(--kabartma-sig);
}
.sayac__deger {
  font-family: var(--baslik);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--murekkep);
}
.sayac__deger--menekse { color: var(--menekse); }
.sayac__deger--siena { color: var(--siena); }
.sayac__ad { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--yardimci); }

/* ——————————————————————————————————————— zaman çizelgesi */

.adimlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.adim {
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(168deg, var(--kart-ust), var(--kart-alt));
  border: 1px solid var(--kart-kenar);
  box-shadow: var(--kabartma-sig);
}
.adim--bekleniyor {
  background: rgba(var(--siena-rgb), .08);
  border: 1px dashed rgba(var(--siena-rgb), .48);
  box-shadow: none;
}
.adim__ust { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.adim__no {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid;
}
.adim__no--1 { background: var(--uyari-zar);   border-color: rgba(var(--uyari-rgb), .40); color: var(--uyari); }
.adim__no--2 { background: var(--menekse-zar); border-color: rgba(var(--menekse-rgb), .40); color: var(--menekse); }
.adim__no--3 { background: var(--siena-zar);   border-color: rgba(var(--siena-rgb), .40);  color: var(--siena); }
.adim__no--4 { background: rgba(var(--sis-rgb), .10); border-color: var(--cizgi-koyu);  color: var(--yardimci); }
.adim__tarih {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--kunye);
  letter-spacing: .08em;
}
.adim--bekleniyor .adim__tarih { color: var(--siena); }
.adim__ad { font-size: 15.5px; font-weight: 600; color: var(--murekkep); line-height: 1.38; margin-bottom: 8px; }
.adim__yazi { font-size: 13.5px; line-height: 1.55; color: var(--yardimci); }

/* ——————————————————————————————————————— önce → sonra */

.sira { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.sira__yan {
  flex: 1 1 260px;
  min-width: 0;
  padding: 21px;
  border-radius: 14px;
  background: linear-gradient(168deg, var(--kart-ust), var(--kart-alt));
  border: 1px solid var(--kart-kenar);
  box-shadow: var(--kabartma-sig);
}
.sira__yan--once { border-color: rgba(var(--mor-orta-rgb), .34); }
.sira__ok {
  display: flex;
  align-items: center;
  color: var(--kunye);
  flex: 0 0 auto;
}
.sira__ad { font-size: 16px; font-weight: 600; color: var(--murekkep); line-height: 1.4; margin: 13px 0 9px; }
.sira__yazi { font-size: 13.5px; line-height: 1.58; color: var(--ikincil); }
.sira__yazi strong { color: var(--murekkep); }

/* ——————————————————————————————————————— bölüm başlığı */

.bolum { margin-bottom: 34px; }
.bolum__basi {
  font-family: var(--baslik);
  font-size: clamp(22px, 2.7vw, 32px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--murekkep);
  margin: 0 0 5px;
}
.bolum__alt { font-size: 15px; color: var(--yardimci); margin: 0 0 22px; }

/* Fon sayfasındaki bildirim öbekleri: "doğrudan bu fonu anan",
   "131 fonu kapsayan", "dolaylı", "çıkarım yapılmamış". Başlık ile
   altındaki kartlar arasındaki boşluk, öbekler arasındakinden küçük —
   hangi açıklamanın hangi kartlara ait olduğu boşluktan okunsun. */
.bildirim-obek { margin-bottom: 30px; }
.bildirim-obek:last-child { margin-bottom: 0; }
.bildirim-obek__alt {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kunye);
  max-width: 68ch;
}

@media (max-width: 900px) {
  .sira__ok { display: none; }
  .degisim { flex-wrap: wrap; }
}

/* ——————————————————————————————————————— fon çıkışları */

/* Tutar: sayı metin yazı karakterinde ve eşit genişlikli rakamlarla,
   ölçek birimi (milyar/milyon) küçük ve soluk. */
.akis { font-family: var(--govde); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.akis__sayi { font-weight: 600; }
.akis__birim { font-size: .72em; font-weight: 400; color: var(--yardimci); }
.sayac__deger .akis__birim { font-size: .42em; letter-spacing: 0; }
.akis--cikis, .akis--cikis .akis__sayi { color: var(--uyari); }
.akis--giris, .akis--giris .akis__sayi { color: var(--olumlu); }
.akis--yok { color: var(--kunye); }
.akis--belirsiz { color: var(--siena); font-size: 12.5px; }
.akis__eksik { color: var(--siena); margin-left: 2px; }

.akis-tablo { width: 100%; font-size: 13.5px; }
.akis-tablo th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cizgi-koyu);
  white-space: nowrap;
}
.akis-tablo td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--kart-cizgi);
  vertical-align: middle;
}
.akis-tablo__sira { width: 1%; text-align: right; color: var(--kunye); padding-left: 0; }
/* Fon adı tek satır: satır yüksekliği fiyatlar tablosuyla aynı (42px).
   Sığmayan ad "…" ile kısalır, tamamı title'da. max-width:0 + width:100%
   hücreyi kalan genişliğe sabitler; yoksa ad tabloyu genişletir. */
.akis-tablo__fon {
  color: var(--ikincil);
  width: 100%;
  max-width: 0;
  min-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tarih ve toplam sütunları ortalı. Hücredeki blok sabit genişlikte:
   sayı sağa, birim sola yaslı — ortalanmış sütunda da rakamlar hizalı. */
.akis-tablo th.akis-tablo__tutar,
.akis-tablo td.akis-tablo__tutar { text-align: center; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.akis-hucre {
  display: inline-grid;
  grid-template-columns: 4.2em 3.4em;
  column-gap: .35em;
  align-items: baseline;
}
.akis-hucre .akis__sayi { text-align: right; }
.akis-hucre .akis__birim { text-align: left; font-size: .78em; }
.akis-hucre .akis__eksik { margin-left: 3px; font-size: 1.2em; }
.akis-tablo__toplam { background: rgba(var(--menekse-rgb), .06); }
.akis-tablo__dipnot {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--kart-cizgi);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--kunye);
}