/* =========================================================
   Ana sayfa düzeni
   Mobil öncelikli yazılmıştır: varsayılan kurallar telefon
   içindir, geniş ekran kuralları @media bloklarındadır.
   Tasarım karşılığı: tasarim/ana-sayfa.html
   ========================================================= */

.ozi-anasayfa > section {
	max-width: var(--ozi-genislik);
	margin: 0 auto;
	/* Mobilde daha dar; 600px'ten itibaren 32, 900px'ten itibaren 56. */
	padding: 24px var(--ozi-bosluk) 0;
}

/*
 * Boşluk ritmi. Her bölüm arasında aynı boşluk olunca sayfa tek
 * düze akıyordu. Kültür-Sanat haberlerin devamı sayılır, ona yakın
 * duruyor; üye ol çağrısı konu değişimi, önünde nefes var.
 */
/* .ozi-anasayfa > section seçicisini yenebilmek için iki sınıf. */
.ozi-anasayfa > .ozi-kultur {
	padding-top: 14px;
}

.ozi-anasayfa > .ozi-uye-ol {
	padding-top: 36px;
}

/*
 * Kart ve düğme bağlantılarının altı çizilmez. Ana temanın bağlantı
 * stiline güvenmiyoruz; Kadence yerine GeneratePress kullanılsa da
 * ana sayfa aynı görünsün diye burada açıkça tanımlı.
 */
.ozi-manset__ana,
.ozi-yan-haber,
.ozi-kart a,
.ozi-duyuru-liste a,
.ozi-avantaj a,
.ozi-etkinlik a,
.ozi-bolum-basligi a,
.ozi-dugme,
.ozi-whatsapp {
	text-decoration: none;
}

/* Fareyle üzerine gelince yalnızca başlık metni altı çizili olur. */
.ozi-yan-haber:hover .ozi-yan-haber__baslik,
.ozi-kart a:hover .ozi-kart__baslik,
.ozi-duyuru-liste a:hover .ozi-duyuru-liste__baslik,
.ozi-etkinlik a:hover .ozi-etkinlik__baslik,
.ozi-bolum-basligi a:hover {
	text-decoration: underline;
}

/* Bölüm başlığı -------------------------------------------------- */

.ozi-bolum-basligi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

/*
 * Başlık kademeleri. Kullanıcı başlıktan başlığa tarıyor; hepsi aynı
 * boyda olunca tarama hiçbir öncelik sinyali vermiyordu.
 *   k1 Haberler — sendikanın canlı olduğunun kanıtı
 *   k2 Duyurular, Yaklaşan Faaliyetler — üyenin eyleme geçeceği bilgi
 *   k3 Gezilerimiz, Kültür-Sanat, Genel Başkan — gezinti içeriği
 * Üye Avantajları da k1: Haberler ile aynı boyda, ayrımı lacivert bant
 * ve altın başlık yapıyor. İki birincil var, biri açık zeminde biri
 * koyu; boyutla değil yüzeyle ayrılıyorlar.
 */
.ozi-bolum-basligi h2 {
	margin: 0;
	font-size: 28px;
	text-transform: uppercase;
	color: var(--ozi-lacivert);
}

.ozi-bolum-basligi--k1 h2 {
	font-size: 26px;
}

.ozi-bolum-basligi--k2 h2 {
	font-size: 22px;
}

.ozi-bolum-basligi--k3 h2 {
	font-size: 20px;
}

/*
 * Dokunma hedefi: metin 22px yüksekliğindeydi, 44px kuralının altında
 * kalıyordu. Görünüm aynı, tıklama alanı büyüdü.
 */
.ozi-bolum-basligi a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ozi-dokunma);
	padding: 0 2px;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
}

/* Lacivert zeminde başlık altın: logodaki altın yazının karşılığı (10.2:1). */
.ozi-bolum-basligi--koyu h2 {
	color: var(--ozi-altin);
}

.ozi-bolum-basligi--koyu a {
	color: var(--ozi-beyaz);
}

.ozi-tarih {
	display: block;
	font-size: 13px;
	color: var(--ozi-metin-ikincil);
}

/* Manşet --------------------------------------------------------- */

.ozi-manset {
	display: grid;
	gap: var(--ozi-bosluk);
}

.ozi-manset__ana {
	position: relative;
	display: block;
	border-radius: var(--ozi-radius);
	overflow: hidden;
	background: linear-gradient(160deg, #1B2459 0%, var(--ozi-lacivert) 60%, #131B45 100%);
	color: var(--ozi-beyaz);
	/* Sayfanın odak noktası: en yüksek katman. */
	box-shadow: var(--ozi-golge-3);
}

/*
 * Mobilde görsel üstte, metin altında düz lacivert zemindedir.
 * Metin fotoğrafın üzerine binmediği için kontrast, hangi görsel
 * yüklenirse yüklensin 4.5:1'in üzerinde kalır.
 */
.ozi-manset__gorsel {
	display: block;
	width: 100%;
	/*
	 * height:auto şart: the_post_thumbnail() görsele width ve height
	 * özniteliği basar, bunlar temizlenmezse aspect-ratio yok sayılır
	 * ve görsel 700px yüksekliğinde kalır.
	 */
	height: auto;
	aspect-ratio: 12 / 7;
	object-fit: cover;
}

.ozi-manset__metin {
	padding: 20px;
}

.ozi-manset__baslik {
	margin: 6px 0 8px;
	font-size: 26px;
	line-height: 1.15;
	color: var(--ozi-beyaz);
}

.ozi-manset__ozet {
	margin: 0;
	font-size: 15px;
	color: var(--ozi-metin-koyu-zemin);
}

.ozi-etiket {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--ozi-radius-kucuk);
	background: var(--ozi-altin);
	color: var(--ozi-lacivert);
	font-size: 13px;
	font-weight: 700;
}

/*
 * Yan haberler karttir (0.17.0, Musa'nin karari).
 *
 * 0.6.0'da bilerek karttan cikarilmislardi: dort golgeli kart
 * mansetin yaninda onunla yarisiyor diye ince cizgili satira
 * dondurulmuslerdi. Ama satir hali "duz metin" gibi duruyordu ve
 * sayfadaki butun baslik listeleri (Duyurular, Kultur-Sanat sag
 * sutunu) kart. Bu liste de ayni isi yapiyor, farkli gorunmesi
 * icin sebep yoktu.
 *
 * Olculeri Duyurular kartiyla birebir ayni: ayni yuzey, cerceve,
 * yaricap, golge ve hover. Mansetle yarismamasi golge kademesiyle
 * cozuluyor: manset kademe 3, bu kartlar kademe 1.
 */
.ozi-manset__yan {
	display: grid;
	gap: 12px;
	align-content: start;
}

.ozi-yan-haber {
	display: flex;
	gap: 14px;
	align-items: center;
	min-height: var(--ozi-dokunma);
	padding: 12px 14px;
	background: var(--ozi-yuzey);
	border: 1px solid var(--ozi-cizgi);
	border-radius: var(--ozi-radius);
	box-shadow: var(--ozi-golge-1);
}

.ozi-yan-haber:hover,
.ozi-yan-haber:focus-visible {
	transform: translateY(-2px);
	border-color: var(--ozi-lacivert-acik);
	box-shadow: var(--ozi-golge-2);
}

/*
 * Kucuk kare yuva. Kaynak 'medium' (300px, kirpilmamis); once
 * 'ozi-liste' (160x120 sert kirpim) basiliyordu ve ustune bu
 * cerceve bir kez daha kirpiyordu — afislerin kenari gidiyordu.
 */
.ozi-yan-haber__gorsel {
	width: 72px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--ozi-radius-kucuk);
	flex: none;
}

.ozi-yan-haber__baslik {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

/* Resmî ilan şeridi ------------------------------------------------ */

/*
 * Yasal ilanlar için ince bir şerit. Manşetin hemen altında durur ve
 * yalnızca tarihi gelmemiş bir ilan varsa basılır. Altın etiket
 * kurumsal işaret kuralına uyuyor; kırmızı burada kullanılmıyor,
 * çünkü bu bir eylem değil bildirim.
 */
.ozi-ilan__ic {
	display: grid;
	gap: 12px;
	padding: 20px 22px;
	border-radius: var(--ozi-radius);
	background: linear-gradient(135deg, #1D2763 0%, var(--ozi-lacivert) 60%, #131B45 100%);
	border: 1px solid rgba(233, 208, 142, 0.45);
	color: var(--ozi-beyaz);
}

.ozi-ilan__etiket {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ozi-altin);
}

.ozi-ilan__baslik {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ozi-beyaz);
}

/*
 * Seritteki tek baglanti: tum resmi ilanlar arsivi. Yaninda bir de
 * "Ilan metni" dugmesi vardi, Musa'nin istegiyle kaldirildi (0.18.1).
 * Kaydin kendi sayfasina artik arsiv uzerinden gidiliyor.
 * Altin lacivertte 10.23:1; alti cizili, cunku bu seritte oktan
 * baska isaret yok.
 */
.ozi-ilan__arsiv {
	display: inline-flex;
	align-items: center;
	min-height: var(--ozi-dokunma);
	color: var(--ozi-altin);
	font-weight: 600;
	text-decoration: underline;
}

.ozi-ilan__arsiv:hover,
.ozi-ilan__arsiv:focus-visible {
	color: var(--ozi-altin-acik);
}

.ozi-ilan__bilgi {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ozi-metin-koyu-zemin);
}

@media (min-width: 900px) {
	.ozi-ilan__ic {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 24px;
		padding: 18px 24px;
	}

	/* Etiket solda dikey şerit gibi durur. */
	.ozi-ilan__etiket {
		white-space: nowrap;
	}
}

/* Haberler ve duyurular ------------------------------------------ */

.ozi-haberler {
	display: grid;
	gap: 32px;
}

.ozi-kart-izgara {
	display: grid;
	gap: 16px;
}

.ozi-kart {
	background: var(--ozi-yuzey);
	border: 1px solid var(--ozi-cizgi);
	border-radius: var(--ozi-radius);
	overflow: hidden;
	box-shadow: var(--ozi-golge-1);
}

/*
 * Mobilde haber kartı yatay: görsel solda, metin sağda. Dikey düzende
 * üç kart tek başına ~990px yer kaplıyordu ve sayfa telefonda 11 ekrana
 * çıkıyordu. Yatay düzen manşetin yanındaki haber kartlarıyla aynı dili
 * konuşuyor, içerikten bir şey eksiltmiyor. 600px'ten itibaren dikeye
 * dönüyor.
 */
.ozi-kart a {
	display: flex;
	gap: 14px;
	align-items: center;
}

.ozi-kart__gorsel {
	flex: none;
	width: 112px;
	height: 90px;
	object-fit: cover;
	display: block;
}

.ozi-kart__govde {
	min-width: 0;
	padding: 12px 14px 12px 0;
}

/*
 * Özet dar sütunda iki satıra kırpılıyor. Metin DOM'da tam duruyor,
 * yalnızca görsel olarak kısalıyor; ekran okuyucu tamamını okur.
 */
.ozi-kart__ozet {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Başlık en çok üç satır. Ölçüldüğünde ızgaradaki üç kartın başlıkları
 * 3, 2 ve 5 satırdı; beş satırlık başlık kartı metin duvarına çeviriyor
 * ve yanındaki kartla hiçbir hizası tutmuyordu. Metin DOM'da tam duruyor,
 * yalnızca görsel olarak kısalıyor — ekran okuyucu tamamını okur.
 */
.ozi-kart__baslik {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 6px 0 8px;
	font-size: 20px;
	line-height: 1.25;
	color: var(--ozi-lacivert);
}

.ozi-kart__ozet {
	margin: 0;
	font-size: 15px;
	color: var(--ozi-metin-ikincil);
}

/*
 * Duyurular tek kutu içinde ince çizgilerle ayrılıyordu ve satırlar
 * birbirine yapışık görünüyordu. Artık her duyuru kendi kartı —
 * sayfadaki haber, gezi ve avantaj kartlarıyla aynı dil.
 */
.ozi-duyuru-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ozi-duyuru-liste li {
	background: var(--ozi-yuzey);
	border: 1px solid var(--ozi-cizgi);
	border-radius: var(--ozi-radius);
	box-shadow: var(--ozi-golge-1);
	transition:
		transform var(--ozi-gecis) var(--ozi-egri),
		box-shadow var(--ozi-gecis) var(--ozi-egri),
		border-color var(--ozi-gecis) var(--ozi-egri);
}

.ozi-duyuru-liste li:hover,
.ozi-duyuru-liste li:focus-within {
	transform: translateY(-2px);
	border-color: var(--ozi-lacivert-acik);
	box-shadow: var(--ozi-golge-2);
}

.ozi-duyuru-liste a {
	display: block;
	padding: 16px 18px;
	min-height: var(--ozi-dokunma);
}

.ozi-duyuru-liste__baslik {
	display: block;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 5px;
}

/* Kültür-Sanat ----------------------------------------------------- */

/*
 * Sayfanın en sessiz bölümü. Kart yok, gölge yok, fotoğraf yok,
 * hover'da kalkma yok. İçerik söyleşi ve anma yazısı; bir vefat
 * yazısının zıplayan kartta durması yanlış olur. Ayrım yalnızca
 * tipografi ve boşlukla kuruluyor.
 */
.ozi-kultur__ic {
	display: grid;
	gap: 28px;
	padding: 28px 0 4px;
	border-top: 1px solid var(--ozi-cizgi);
	border-bottom: 1px solid var(--ozi-cizgi);
}

.ozi-kultur__baslik {
	margin: 6px 0 12px;
	font-size: 28px;
	line-height: 1.2;
}

/*
 * Başlık bağlantısı 34px ölçülmüştü (28px punto × 1.2 satır yüksekliği).
 * Tek başına duran bir başlık bağlantısı, paragraf içi bağlantı değil;
 * dokunma hedefi 44px olmalı. inline-flex metni yerinden oynatmadan
 * dokunulabilir alanı büyütüyor.
 */
.ozi-kultur__baslik a {
	color: var(--ozi-lacivert);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--ozi-dokunma);
}

.ozi-kultur__baslik a:hover,
.ozi-kultur__baslik a:focus-visible {
	text-decoration: underline;
}

.ozi-kultur__ozet {
	margin: 0 0 16px;
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.68;
	color: var(--ozi-metin-ikincil);
}

/*
 * Altı çizili duruyor. Önce ok vardı ve bağlantı olduğunu o söylüyordu;
 * ok kaldırılınca geriye yalnızca kalın lacivert metin kaldı ve
 * tıklanabilir olduğu hiçbir şeyden anlaşılmıyordu. Bu bölümde kart ve
 * düğme yok (bilerek sessiz), o yüzden işaret altı çizgi: en sessiz
 * dürüst bağlantı göstergesi.
 */
.ozi-kultur__devam {
	display: inline-flex;
	align-items: center;
	min-height: var(--ozi-dokunma);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition: text-decoration-thickness var(--ozi-gecis) var(--ozi-egri), color var(--ozi-gecis) var(--ozi-egri);
}

.ozi-kultur__devam:hover,
.ozi-kultur__devam:focus-visible {
	color: var(--ozi-kirmizi);
	text-decoration-thickness: 2px;
}

/*
 * Sag sutun kart. Once ince cizgiyle ayrilmis duz satirlardi ve
 * "duz metin" gibi duruyordu (Musa'nin karari, 21 Ekim 2026).
 * Olculer Duyurular kartiyla birebir ayni: ayni yuzey, ayni cerceve,
 * ayni yaricap, ayni golge, ayni hover. Iki liste de ayni iste —
 * kisa baslik listesi — farkli gorunmeleri icin sebep yoktu.
 *
 * One cikan yazi (sol sutun) kart olmadi: o uzun bir okuma girisi,
 * kisa bir baslik degil. Bolumun sessiz karakteri orada duruyor.
 */
/*
 * One cikan yazi: gorsel varsa yanda, yoksa metin tam genislikte.
 * Mobilde ustte, 600px'ten itibaren yanda.
 *
 * Fotografta hover yakinlasmasi YOK. Bolumde anma ve vefat yazilari
 * oluyor; buyuyen fotograf o tona uymuyor. Haber ve gezi kartlarinda
 * var, burada bilerek yok.
 */
.ozi-kultur__one-cikan--gorselli {
	display: grid;
	gap: 16px;
}

@media (min-width: 600px) {
	.ozi-kultur__one-cikan--gorselli {
		grid-template-columns: 240px 1fr;
		gap: 24px;
		align-items: start;
	}
}

.ozi-kultur__gorsel {
	display: block;
	overflow: hidden;
	border-radius: var(--ozi-radius);
}

.ozi-kultur__gorsel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ozi-kultur__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	align-content: start;
}

.ozi-kultur__liste li {
	background: var(--ozi-yuzey);
	border: 1px solid var(--ozi-cizgi);
	border-radius: var(--ozi-radius);
	box-shadow: var(--ozi-golge-1);
	transition:
		transform var(--ozi-gecis) var(--ozi-egri),
		box-shadow var(--ozi-gecis) var(--ozi-egri),
		border-color var(--ozi-gecis) var(--ozi-egri);
}

.ozi-kultur__liste li:hover,
.ozi-kultur__liste li:focus-within {
	transform: translateY(-2px);
	border-color: var(--ozi-lacivert-acik);
	box-shadow: var(--ozi-golge-2);
}

.ozi-kultur__liste a {
	display: block;
	padding: 16px 18px;
	min-height: var(--ozi-dokunma);
	text-decoration: none;
}

/* Tarih üstte: boşluk alta değil üste verilir. */
.ozi-kultur__liste-baslik {
	display: block;
	margin-top: 5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ozi-metin);
}

.ozi-kultur__liste a:hover .ozi-kultur__liste-baslik,
.ozi-kultur__liste a:focus-visible .ozi-kultur__liste-baslik {
	text-decoration: underline;
}

/* Üye avantajları ------------------------------------------------ */

/*
 * Bölüm açık zeminden lacivert bloğa bıçak gibi giriyordu. Artık iki
 * şey yumuşatıyor: bloğun kendi içinde yukarıdan aşağı koyulaşan bir
 * degrade, ve üst kenarda uçlara doğru sönen altın bir dikiş.
 * Altın dikiş logodaki altın halkadan geliyor, dekorasyon değil.
 */
.ozi-avantajlar {
	position: relative;
	max-width: none !important;
	margin-top: 56px !important;
	padding: 0 !important;
	background: linear-gradient(170deg, #1C2660 0%, var(--ozi-lacivert) 42%, #121941 100%);
	color: var(--ozi-beyaz);
	/* Üst kenarda ince bir ışık çizgisi: yüzey düz değil, aydınlanıyor. */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.ozi-avantajlar::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--ozi-altin) 22%,
		var(--ozi-altin-acik) 50%,
		var(--ozi-altin) 78%,
		transparent 100%
	);
}

.ozi-avantajlar__ic {
	max-width: var(--ozi-genislik);
	margin: 0 auto;
	padding: 40px var(--ozi-bosluk);
}

.ozi-filtre {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.ozi-chip {
	min-height: var(--ozi-dokunma);
	padding: 0 18px;
	border-radius: var(--ozi-radius-hap);
	border: 1px solid #4A5590;
	background: transparent;
	color: var(--ozi-beyaz);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.ozi-chip--acik,
.ozi-chip[aria-pressed="true"] {
	background: var(--ozi-altin);
	border-color: var(--ozi-altin);
	color: var(--ozi-lacivert);
}

.ozi-avantaj-izgara {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

/*
 * Kart tipografiyle taşınıyor, görselle değil. Gerekçe
 * `template-parts/avantaj-kart.php` başında: kart görseli yalnızca
 * gerçek kurum logosu yüklendiğinde basılıyor, duyuru afişine
 * düşülmüyor.
 */
/* Kartın içeriği ortalı (Musa'nın kararı, 0.15.0). */
.ozi-avantaj a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 18px;
	background: var(--ozi-yuzey);
	border-radius: var(--ozi-radius);
	color: var(--ozi-metin);
	text-align: center;
	box-shadow: var(--ozi-golge-1);
}

.ozi-avantaj__govde {
	display: block;
	width: 100%;
}

.ozi-avantaj__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	margin-bottom: 12px;
}

.ozi-avantaj__logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 40px;
	object-fit: contain;
}

/*
 * Kartın taşıyıcısı marka adı. Başlık yazı tipi burada bilerek
 * kullanılıyor: ızgarada on beş adı ayırt eden tek şey bu ve gövde
 * yazı tipiyle 15px kalın metin, listeyi tek düze bir blok yapıyordu.
 */
.ozi-avantaj__kurum {
	display: block;
	font-family: var(--ozi-baslik-font);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ozi-lacivert);
}

/* Kategori sessiz destek: ızgarada kartları birbirinden ayırıyor. */
.ozi-avantaj__tur {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--ozi-metin-ikincil);
}

/* Kartın tek vurgusu. On beş kayıttan dördünde var, o yüzden işe yarıyor. */
.ozi-avantaj__indirim {
	display: inline-block;
	margin-top: 12px;
	padding: 3px 10px;
	border-radius: var(--ozi-radius-kucuk);
	background: var(--ozi-kirmizi);
	color: var(--ozi-beyaz);
	font-size: 13px;
	font-weight: 600;
}

.ozi-avantaj--doldu a {
	opacity: 0.55;
}

.ozi-avantaj__uyari {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--ozi-kirmizi);
}

.ozi-avantaj-bos {
	margin: 24px 0 0;
	color: var(--ozi-metin-koyu-zemin);
}

/* Faaliyetler ve tanıtım ----------------------------------------- */

.ozi-faaliyetler {
	display: grid;
	gap: 32px;
}

.ozi-etkinlik-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ozi-etkinlik a {
	display: flex;
	gap: 14px;
	align-items: center;
	min-height: var(--ozi-dokunma);
	padding: 12px;
	background: var(--ozi-yuzey);
	border: 1px solid var(--ozi-cizgi);
	border-radius: var(--ozi-radius);
	box-shadow: var(--ozi-golge-1);
}

.ozi-etkinlik__tarih {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: var(--ozi-radius-kucuk);
	background: linear-gradient(150deg, #1D2763 0%, var(--ozi-lacivert) 100%);
	color: var(--ozi-beyaz);
	line-height: 1.1;
}

/* Gun numarasi altin: logodaki ikinci kurumsal renk, lacivert zeminde 10.2:1. */
.ozi-etkinlik__tarih strong {
	font-family: var(--ozi-baslik-font);
	font-size: 24px;
	color: var(--ozi-altin);
}

.ozi-etkinlik__tarih small {
	font-size: 12px;
	text-transform: uppercase;
}

.ozi-etkinlik__baslik {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.ozi-etkinlik__yer {
	display: block;
	font-size: 13px;
	color: var(--ozi-metin-ikincil);
}

.ozi-tanitim__kutu {
	padding: 24px;
	border-radius: var(--ozi-radius);
	background: linear-gradient(150deg, #1B2459 0%, var(--ozi-lacivert-koyu) 100%);
	border: 1px solid rgba(233, 208, 142, 0.45);
	color: var(--ozi-metin-koyu-zemin);
	box-shadow:
		var(--ozi-golge-1),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ozi-tanitim__soz {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.5;
}

/* Genel Başkan ve yönetim kurulu ---------------------------------- */

/*
 * Portre + ad yan yana. Fotoğraf girilmemişse satır tek çocukla kalır
 * ve kutu eskisi gibi görünür — boşluk ya da kayma oluşmaz.
 */
.ozi-baskan-satir {
	display: flex;
	gap: 16px;
	align-items: center;
}

.ozi-baskan__portre {
	flex: none;
	width: 88px;
	height: 88px;
	overflow: hidden;
	border-radius: var(--ozi-radius-hap);
	/* Kutunun kendi çerçevesiyle aynı değer, yeni bir renk eklenmedi. */
	border: 1px solid rgba(233, 208, 142, 0.45);
}

.ozi-baskan__portre img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Yatay kaynaklarda ortadan kırpınca çene hizasından kesiliyor. */
	object-position: center 25%;
}

.ozi-baskan {
	margin: 0;
	min-width: 0;
}

.ozi-baskan__ad {
	display: block;
	font-family: var(--ozi-baslik-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ozi-beyaz);
}

.ozi-baskan__unvan {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ozi-altin);
}

.ozi-baskan__not {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.5;
}

.ozi-kurul {
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid rgba(233, 208, 142, 0.3);
}

.ozi-kurul li {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	justify-content: space-between;
	align-items: baseline;
	padding: 3px 0;
}

.ozi-kurul__ad {
	font-weight: 600;
	color: var(--ozi-beyaz);
}

.ozi-kurul__unvan {
	font-size: 13px;
	color: var(--ozi-metin-koyu-zemin);
}

/*
 * Diğer kurullar: Denetim, Disiplin, Kurucular. Yönetim kurulu
 * listesiyle aynı ince altın çizgiyle ayrılıyor, yeni bir ayraç
 * deseni eklenmedi.
 *
 * Liste ad-unvan çifti değil, düz isim listesi: bir kurulun bütün
 * asıl üyeleri aynı unvanı taşıyor ve onu başlık söylüyor. Bu yüzden
 * satırlar `space-between` ile iki uca yaslanmıyor — yaslansaydı
 * yönetim kurulu listesindeki gibi ad ile unvan arası açılırdı,
 * burada ikinci bir sütun yok.
 */
.ozi-kurullar {
	display: grid;
	gap: 18px 28px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(233, 208, 142, 0.3);
}

.ozi-kurullar__baslik {
	margin: 0 0 6px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ozi-altin);
}

.ozi-kurullar__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ozi-kurullar__liste li {
	padding: 2px 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ozi-beyaz);
}

.ozi-kurullar__unvan {
	display: block;
	font-size: 12px;
	color: var(--ozi-metin-koyu-zemin);
}

.ozi-tanitim__dugmeler {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* Geziler --------------------------------------------------------- */

/*
 * Gezi kartı haber kartından bilerek farklı: fotoğraf kartın tamamını
 * kaplar, başlık üstüne biner. İçerik fotoğraf olduğu için beyaz gövdeli
 * haber kartı bu içeriği küçültüyordu. Manşetle aynı dil.
 */
.ozi-gezi-izgara {
	display: grid;
	gap: 16px;
}

.ozi-gezi a {
	position: relative;
	display: block;
	/*
	 * min-height taban değer; gerçek yükseklik aşağıdaki görselin
	 * en-boy oranından geliyor.
	 */
	min-height: 180px;
	border-radius: var(--ozi-radius);
	overflow: hidden;
	background: var(--ozi-lacivert);
	color: var(--ozi-beyaz);
	text-decoration: none;
}

/* Mobilde 16/9 (175px), 600px'ten itibaren 3/2. Telefonda üç kartta
   ~100px kazandırıyor, fotoğraf yine rahat görünüyor. */
.ozi-gezi__gorsel {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform var(--ozi-gecis-yavas) var(--ozi-egri);
}

.ozi-gezi__metin {
	position: absolute;
	inset: auto 0 0 0;
	display: block;
	padding: 16px;
	background: linear-gradient(to top, rgba(14, 20, 50, 0.95), rgba(14, 20, 50, 0.6) 60%, rgba(14, 20, 50, 0));
}

.ozi-gezi__baslik {
	display: block;
	margin-top: 8px;
	font-family: var(--ozi-baslik-font);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
}

.ozi-gezi a:hover,
.ozi-gezi a:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--ozi-golge-2);
}

.ozi-gezi a:hover .ozi-gezi__gorsel,
.ozi-gezi a:focus-visible .ozi-gezi__gorsel {
	transform: scale(1.04);
}

/* Üye ol bandı ---------------------------------------------------- */

.ozi-uye-ol__ic {
	display: grid;
	gap: 20px;
	padding: 28px;
	border-radius: var(--ozi-radius);
	background: linear-gradient(135deg, #1D2763 0%, var(--ozi-lacivert) 55%, #131B45 100%);
	border: 1px solid rgba(233, 208, 142, 0.45);
	color: var(--ozi-beyaz);
	box-shadow:
		var(--ozi-golge-2),
		inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.ozi-uye-ol h2 {
	margin: 0 0 8px;
	font-size: 30px;
	color: var(--ozi-altin);
}

.ozi-uye-ol p {
	margin: 0;
	color: var(--ozi-metin-koyu-zemin);
	line-height: 1.5;
}

.ozi-uye-ol__dugmeler {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Düğmeler -------------------------------------------------------- */

.ozi-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ozi-dokunma);
	padding: 0 22px;
	border-radius: var(--ozi-radius-kucuk);
	font-weight: 700;
	font-size: 16px;
}

.ozi-dugme--kirmizi {
	background: var(--ozi-kirmizi);
	color: var(--ozi-beyaz);
}

.ozi-dugme--kirmizi:hover,
.ozi-dugme--kirmizi:focus-visible {
	background: var(--ozi-kirmizi-koyu);
	color: var(--ozi-beyaz);
}

.ozi-dugme--cizgi {
	border: 1px solid var(--ozi-lacivert);
	color: var(--ozi-lacivert);
}

.ozi-dugme--cizgi-beyaz {
	border: 1px solid var(--ozi-beyaz);
	color: var(--ozi-beyaz);
}

.ozi-dugme--cizgi-beyaz:hover,
.ozi-dugme--cizgi-beyaz:focus-visible {
	background: var(--ozi-beyaz);
	color: var(--ozi-lacivert);
}

.ozi-tanitim__kutu .ozi-dugme--cizgi {
	border-color: var(--ozi-beyaz);
	color: var(--ozi-beyaz);
}

/* Sabit WhatsApp düğmesi ------------------------------------------ */

.ozi-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--ozi-radius-hap);
	background: var(--ozi-whatsapp);
	color: var(--ozi-beyaz);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.ozi-whatsapp:hover,
.ozi-whatsapp:focus-visible {
	color: var(--ozi-beyaz);
	transform: scale(1.05);
}

/* =========================================================
   Hareket ve geri bildirim

   Ölçüm: sayfadaki 242 elemandan hiçbirinde geçiş yoktu, bu yüzden
   her hover anında sıçrıyordu. Aşağıdaki kurallar yalnızca transform,
   opacity, renk ve gölge animasyonluyor (düzen özelliği animasyonlu
   değil, yoksa her karede yeniden yerleşim olur).

   Kural: hareket bilgi taşıdığı yerde var. Sayfada tek bir yazılı
   giriş anı var (manşet), her bölüme ayrı animasyon konmadı.
   ========================================================= */

.ozi-yan-haber,
.ozi-kart,
.ozi-avantaj a,
.ozi-etkinlik a,
.ozi-gezi a,
.ozi-dugme,
.ozi-chip,
.ozi-whatsapp {
	transition:
		transform var(--ozi-gecis) var(--ozi-egri),
		box-shadow var(--ozi-gecis) var(--ozi-egri),
		border-color var(--ozi-gecis) var(--ozi-egri),
		background-color var(--ozi-gecis) var(--ozi-egri),
		color var(--ozi-gecis) var(--ozi-egri);
}

.ozi-manset__gorsel,
.ozi-kart__gorsel {
	transition: transform var(--ozi-gecis-yavas) var(--ozi-egri);
}

/*
 * Kart yüzeyleri. Tıklanabilir oldukları yalnızca metnin altı
 * çizilerek belli oluyordu; artık kart da tepki veriyor.
 */
.ozi-kart:hover,
.ozi-etkinlik a:hover,
.ozi-etkinlik a:focus-visible {
	transform: translateY(-2px);
	border-color: var(--ozi-lacivert-acik);
	box-shadow: var(--ozi-golge-2);
}

.ozi-avantaj a:hover,
.ozi-avantaj a:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}

/* Kart artık kendisi kalkıyor; satırın ayrıca zemin değiştirmesine gerek yok. */

/* Görsel, kendi kutusunun içinde hafifçe yaklaşır. */
.ozi-kart:hover .ozi-kart__gorsel,
.ozi-manset__ana:hover .ozi-manset__gorsel,
.ozi-manset__ana:focus-visible .ozi-manset__gorsel {
	transform: scale(1.04);
}

.ozi-dugme--kirmizi:hover,
.ozi-dugme--kirmizi:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(192, 29, 46, 0.32);
}

.ozi-chip:hover {
	border-color: var(--ozi-beyaz);
}

/*
 * Tek yazılı hareket anı: manşet metni sayfa açılırken yerine oturur.
 * Bitiş durumu elemanın normal hali, yani animasyon hiç çalışmazsa
 * (eski tarayıcı, hareket azaltma) metin yine tam görünür.
 */
@keyframes ozi-manset-belir {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

.ozi-manset__metin {
	animation: ozi-manset-belir 700ms var(--ozi-egri);
}

/* Geniş ekranlar --------------------------------------------------- */

@media (min-width: 600px) {
	.ozi-anasayfa > section {
		padding-top: 32px;
	}

	/* Avantaj kartı ferahlar. */
	.ozi-avantaj a {
		padding: 22px;
	}

	.ozi-avantaj__kurum {
		font-size: 23px;
	}

	.ozi-avantaj__logo {
		height: 52px;
	}

	.ozi-avantaj__logo img {
		max-height: 52px;
	}

	.ozi-gezi a {
		min-height: 220px;
	}

	.ozi-gezi__gorsel {
		aspect-ratio: 3 / 2;
	}

	/* Haber kartı dikeye döner: görsel üstte, metin altta. */
	.ozi-kart a {
		display: block;
	}

	/*
	 * Cerceve olculeri degismedi: kart yapisi standart kalsin.
	 * Degisen tek sey kaynak. Once 'ozi-kart' (600x380 sert kirpim)
	 * basiliyordu ve uzerine CSS bir kez daha kirpiyordu; iki kirpim
	 * ust uste binince afislerin kenarindaki yazi kesiliyordu.
	 * Artik kaynak kirpilmamis 'medium_large' (768px) ve kirpimi
	 * yalnizca bu cerceve yapiyor -- gorsel ortadan buyutulup
	 * cerceveyi dolduruyor, hem daha az kayip hem daha net.
	 */
	/*
	 * Sabit 180px yükseklik yerine oran. Ölçüm: haber ızgarası
	 * Duyurular sütunuyla satırı paylaştığı için kart 247px geliyor,
	 * yani çerçeve 245x180 = 1.36 oranındaydı. Haber görselleri ise
	 * 1.78 ile 1.99 arasında; `cover` bu farkı kapatmak için görselin
	 * **genişliğinin %32'sini** kesiyordu ve afişlerdeki yazı iki
	 * yandan kırpılıyordu.
	 *
	 * 16/9 çerçeve kaynakların kendi oranına çok yakın: kayıp %32'den
	 * %11'e iniyor, 1.78'lik görsellerde sıfır. Kart yapısı değişmedi,
	 * görsel yine `cover` ile çerçeveyi dolduruyor — yalnızca çerçeve
	 * artık içeriğin şekline uygun. Sütun genişledikçe (Duyurular boşsa
	 * kart 387px oluyor) görsel de büyüyor, sabit yükseklikte orantı
	 * bozuluyordu.
	 */
	.ozi-kart__gorsel {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.ozi-kart__govde {
		padding: 16px;
	}

	/*
	 * Özet masaüstünde de kırpılıyor. Kırpma kalkınca özetler 5-6
	 * satıra çıkıyor, kartların alt hizası dağılıyor ve ızgara bir
	 * metin bloğuna dönüyordu. Üç satır başlığı tanıtmaya yetiyor;
	 * devamı zaten bir tık uzakta.
	 */
	.ozi-kart__ozet {
		-webkit-line-clamp: 3;
	}

	.ozi-avantaj-izgara {
		grid-template-columns: repeat(3, 1fr);
	}

	.ozi-kart-izgara {
		grid-template-columns: repeat(2, 1fr);
	}

	.ozi-gezi-izgara {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.ozi-anasayfa > section {
		padding-top: 56px;
	}

	.ozi-bolum-basligi--k1 h2 {
		font-size: 30px;
	}

	.ozi-bolum-basligi--k2 h2 {
		font-size: 24px;
	}

	.ozi-bolum-basligi--k3 h2 {
		font-size: 22px;
	}

	.ozi-anasayfa > .ozi-kultur {
		padding-top: 36px;
	}

	.ozi-anasayfa > .ozi-uye-ol {
		padding-top: 76px;
	}

	.ozi-manset {
		grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	}

	/*
	 * Geniş ekranda metin görselin üzerine biner; okunabilirliği
	 * alttan yukarı koyulaşan geçiş sağlar.
	 */
	.ozi-manset__ana {
		min-height: 440px;
	}

	.ozi-manset__gorsel {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.ozi-manset__metin {
		position: absolute;
		inset: auto 0 0 0;
		padding: 24px;
		/*
		 * Orta durak 0.72 iken manşet başlığının okunabilirliği fotoğrafın
		 * koyuluğuna bağlıydı. Başlık örtünün %30'unda başlıyor, orada
		 * alfa ≈ 0.48 oluyordu; açık renkli bir fotoğrafta beyaz başlık
		 * ~3:1'e, yani büyük metin eşiğinin tam sınırına iniyordu.
		 * 0.85 ile aynı noktada alfa ≈ 0.57 ve oran ~4:1'e çıkıyor.
		 * Koyu fotoğraflarda gözle fark edilmiyor.
		 */
		background: linear-gradient(to top, rgba(14, 20, 50, 0.96), rgba(14, 20, 50, 0.85) 55%, rgba(14, 20, 50, 0));
	}

	.ozi-manset__baslik {
		font-size: 34px;
	}

	.ozi-haberler {
		grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	}

	/* Duyuru yokken haber izgarasi iki yerine uc sutuna yayilir. */
	.ozi-haberler--tam {
		grid-template-columns: minmax(0, 1fr);
	}

	.ozi-kart-izgara {
		grid-template-columns: repeat(3, 1fr);
	}

	.ozi-avantaj-izgara {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	.ozi-gezi-izgara {
		grid-template-columns: repeat(3, 1fr);
	}

	.ozi-faaliyetler {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
	}

	.ozi-kultur__ic {
		grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
		gap: 44px;
	}

	.ozi-tanitim--tam {
		grid-column: 1 / -1;
	}

	/*
	 * Kutu tüm genişliği aldığında listeler sütunlara ayrılır. Tek
	 * sütunda kalsalardı yedi satırlık yönetim kurulu listesinde ad
	 * solda, unvan 1192px ötede sağda duruyordu; göz ikisini aynı
	 * satıra bağlayamıyordu (Musa'nın bulgusu, 30 Ekim 2026).
	 *
	 * `columns` kullanıldı, grid değil: satır sayısı içeriğe göre
	 * değişiyor ve sütunları tarayıcı dengeliyor; grid'de her satırı
	 * elle yerleştirmek gerekirdi.
	 */
	.ozi-tanitim--tam .ozi-kurul {
		columns: 2;
		column-gap: 48px;
	}

	.ozi-tanitim--tam .ozi-kurul li {
		break-inside: avoid;
	}

	.ozi-tanitim--tam .ozi-kurullar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Yönetim kurulu listesi panelden boşaltılırsa faaliyetler tek başına
	   kalıyor; yarım sütunda asılı durmasın diye tüm genişliği alır. */
	.ozi-faaliyetler__liste--tam {
		grid-column: 1 / -1;
	}

	.ozi-uye-ol__ic {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding: 36px 40px;
	}
}

/* Hareket azaltma tercihi ------------------------------------------ */

/*
 * İşletim sisteminde "hareketi azalt" açıksa bütün kayma, büyüme ve
 * giriş animasyonu kapanır. Renk ve gölge geri bildirimi kalır:
 * onlar hareket değil, durum bilgisi.
 */
@media (prefers-reduced-motion: reduce) {
	.ozi-anasayfa *,
	.ozi-whatsapp {
		animation: none !important;
		transition-duration: 1ms !important;
	}

	.ozi-yan-haber:hover,
	.ozi-yan-haber:focus-visible,
	.ozi-duyuru-liste li:hover,
	.ozi-duyuru-liste li:focus-within,
	.ozi-kultur__liste li:hover,
	.ozi-kultur__liste li:focus-within,
	.ozi-kart:hover,
	.ozi-etkinlik a:hover,
	.ozi-etkinlik a:focus-visible,
	.ozi-avantaj a:hover,
	.ozi-avantaj a:focus-visible,
	.ozi-gezi a:hover,
	.ozi-gezi a:focus-visible,
	.ozi-dugme--kirmizi:hover,
	.ozi-dugme--kirmizi:focus-visible,
	.ozi-whatsapp:hover,
	.ozi-whatsapp:focus-visible {
		transform: none;
	}

	.ozi-gezi a:hover .ozi-gezi__gorsel,
	.ozi-gezi a:focus-visible .ozi-gezi__gorsel,
	.ozi-kart:hover .ozi-kart__gorsel,
	.ozi-manset__ana:hover .ozi-manset__gorsel {
		transform: none;
	}
}