/* ============================================================
   mz-durum.css — Mezad V2 · DURUMLAR (status / story) seridi.

   KAYNAK: tasarim odasi, "Durumlar — sahibin ekrani" sayfasi,
   "ANASAYFA SERIDI ONIZLEME" blogu. Olculer ve renkler tasarimdan
   BIREBIR alindi; tahmin edilen tek bir deger yok:

     kap        beyaz, 1px #dfe5ec, radius 11px, dolgu 17px/19px
     baslik     15px / 650
     alt metin  11.5px #8a93a0
     sag not    11px #a3abb6
     oge eni    78px, aralik 16px
     halka      66x66, radius 999, dolgu 2.5px,
                linear-gradient(135deg, #efc307, #d64545)
     ic daire   2.5px beyaz cerceve, zemin #e8ebef
     rozet      20x20, beyaz, 1.5px #dfe5ec, ikon #d64545
     etiket     10.5px / 650 / #1f2933, ust bosluk 7px

   NEDEN SABIT DEGERLER: bu serit tasarimin kendi olcu sistemine
   ait; --mz-* jetonlarina baglamak onu tema paletiyle birlikte
   kaydirirdi ve tasarimla ayrisirdi. Marka rengine baglanan tek
   sey yok - halkanin altin/kirmizi gecisi durumun KENDI kimligi.

   KAPSAM: her kural ".mz-durum" altinda.
   YON: yalnizca mantiksal ozellikler; halka ve rozet RTL'de de
   dogru yerde durur.
   ============================================================ */

.mz-durum {
	background: #fff;
	border: 1px solid #dfe5ec;
	border-radius: 11px;
	padding: 17px 19px;
	margin-block-end: 14px;
}

/* ---------- Baslik satiri ---------- */
.mz-durum__ust {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: 14px;
	flex-wrap: wrap;
	gap: 8px;
}
.mz-durum__sol {display: flex; align-items: baseline; gap: 10px;}
.mz-durum__h {
	font-size: 15px;
	font-weight: 650;
	margin: 0;
	color: #1f2933;
}
.mz-durum__alt {font-size: 11.5px; color: #8a93a0;}
.mz-durum__not {font-size: 11px; color: #a3abb6;}

/* ---------- Serit ---------- */
/* Tasarimda "overflow: hidden" var cunku orada bir ONIZLEME.
   Gercek sayfada serit KAYABILMELI, yoksa altinci durumdan sonrasi
   erisilemez olur. Dikey tasma kapali: acik birakilirsa tarayici
   onu "auto"ya cevirir ve fare tekerlegi sayfayi degil bu kabi
   kaydirir - ayni tuzak kategori seridinde yasandi. */
.mz-durum__serit {
	display: flex;
	/* AZ OGE VARKEN ORTALANIYOR. Serit tam genislige tasindiktan
	   sonra alti oge 1300px'lik bandin sag ucunda kumelenip geri
	   kalani bos birakiyordu; sahip buna "مكسور وعريض جدا" dedi.
	   "safe" ONEMLI: duz "center", icerik tastiginda ilk ogeleri
	   kaydirilamaz hale getirir (klasik tuzak). "safe center"
	   tasma halinde basa hizalamaya doner. */
	justify-content: safe center;
	gap: 16px;
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block-end: 2px;
}
.mz-durum__serit::-webkit-scrollbar {display: none;}

.mz-durum__oge {
	inline-size: 78px;
	flex-shrink: 0;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
.mz-durum__oge:hover,
.mz-durum__oge:focus {text-decoration: none; color: inherit;}
.mz-durum__oge:focus-visible {
	outline: 2px solid #d64545;
	outline-offset: 3px;
	border-radius: 12px;
}

/* ---------- Halka ---------- */
.mz-durum__halka {
	/* SPAN VARSAYILAN OLARAK SATIR ICI: o haldeyken inline-size ve
	   block-size YOK SAYILIR ve "margin: 0 auto" da islemez. Kural
	   yazilmisti ama hic uygulanmiyordu - olculen boyut 78x65, yani
	   daire degil KAPSUL. Sahip iki kez bildirdi ("وان تكون على شكل
	   دوائر"), ben CSS'i okuyup "zaten daire" demistim; olctugumde
	   cikan 78 sayisini da onemsememistim. Tek satirlik eksik buydu.
	   Duzeltmeden sonra olculen: 66x66. */
	display: block;
	inline-size: 66px;
	block-size: 66px;
	margin: 0 auto;
	border-radius: 999px;
	padding: 2.5px;
	background: linear-gradient(135deg, #efc307, #d64545);
}
/* Izlenmis durum: halka soluklasir - kullanici nerede kaldigini
   bilir. Tasarimda ayri bir ornek yok ama serit bu ayrim olmadan
   ikinci gun anlamsizlasir. */
.mz-durum__oge--izlendi .mz-durum__halka {
	background: #d8dde4;
}
.mz-durum__ic {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 999px;
	border: 2.5px solid #fff;
	background: #e8ebef;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.mz-durum__ic img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Rozet (ilana bagli durum / yeni ekle) ---------- */
.mz-durum__rozet {
	position: absolute;
	inset-block-end: -2px;
	inset-inline-end: -2px;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid #dfe5ec;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Etiket ---------- */
.mz-durum__ad {
	font-size: 10.5px;
	font-weight: 650;
	color: #1f2933;
	margin-block-start: 7px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Mobil ---------- */
/* Dar ekranda kap kenarlara yapissin, serit kenardan baslasin -
   tasarimin masaustu dolgusu telefonda yeri bosa harciyor. */
@media (max-width: 767px) {
	.mz-durum {padding: 13px 12px; border-radius: 9px;}
	.mz-durum__ust {margin-block-end: 11px;}
	.mz-durum__not {display: none;}
	.mz-durum__serit {gap: 13px;}
	.mz-durum__oge {inline-size: 70px;}
	.mz-durum__halka {inline-size: 60px; block-size: 60px;}
}

@media (prefers-reduced-motion: reduce) {
	.mz-durum__serit {scroll-behavior: auto;}
}