/**
 * Çözüm İletişim Balonu — ön yüz biçimlendirmesi.
 *
 * Renkler ve kenar boşlukları, ayarlardan gelen CSS değişkenleriyle
 * belirlenir (bkz. inc/on-yuz.php). Buradaki değerler yalnızca yedektir.
 */

#cozum-ib {
	--cib-vurgu: #004a8a;
	--cib-vurgu-koyu: #00365f;
	--cib-kart: #12233a;
	--cib-alt: 24px;
	--cib-yan: 24px;

	--cib-cizgi: rgba(255, 255, 255, .1);
	--cib-yuzey: rgba(255, 255, 255, .05);
	--cib-sonuk: rgba(255, 255, 255, .6);
	--cib-yesil: #34d399;

	/* Yan boşluğun geçerli değeri. Telefonlarda daraltılır (aşağıdaki medya
	   sorgusuna bakınız); alt boşluk daraltılmaz, çünkü çerez çubuğu gibi
	   engelleri aşmak için yönetimden büyütülmüş olabilir. */
	--cib-yan-etkin: var(--cib-yan);

	position: fixed;
	/* Telefonlarda ekranın alt çentiği/çubuğu hesaba katılır. */
	bottom: max(var(--cib-alt), env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

#cozum-ib.cib-sag { right: max(var(--cib-yan-etkin), env(safe-area-inset-right, 0px)); }

#cozum-ib.cib-sol {
	left: max(var(--cib-yan-etkin), env(safe-area-inset-left, 0px));
	align-items: flex-start;
}

#cozum-ib *,
#cozum-ib *::before,
#cozum-ib *::after { box-sizing: border-box; }

/* Tema, tüm düğmelere min-height/min-width ve harf aralığı uygular; bu
   değerler balonun ölçülerini bozduğu için sıfırlanır. Daha özgül olan
   kendi kurallarımız (aşağıda) bunların üzerine yazar. */
#cozum-ib button,
#cozum-ib a {
	min-width: 0;
	min-height: 0;
	letter-spacing: normal;
	text-transform: none;
}

/* ============================================================ BALON
   Kapalı hâl beğenildiği için biçimi korunmuştur. */

#cozum-ib .cib-balon {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: min(292px, calc(100vw - 2 * var(--cib-yan-etkin)));
	margin: 0;
	padding: 8px 16px 8px 8px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--cib-vurgu), var(--cib-vurgu-koyu));
	color: #fff;
	font: inherit;
	text-align: start;
	cursor: pointer;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .16) inset,
		0 10px 28px -8px rgba(0, 0, 0, .5),
		0 2px 8px -2px rgba(0, 0, 0, .3);
	transition: transform .22s cubic-bezier(.34, 1.4, .64, 1), box-shadow .22s ease;
}

#cozum-ib .cib-balon:hover {
	transform: translateY(-3px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .2) inset,
		0 16px 34px -8px rgba(0, 0, 0, .55),
		0 3px 10px -2px rgba(0, 0, 0, .34);
}

#cozum-ib .cib-balon:active { transform: translateY(-1px); }
#cozum-ib .cib-balon:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

#cozum-ib .cib-balon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(0, 74, 138, .5);
	animation: cib-cagri 2.6s ease-out 1.2s 3;
	pointer-events: none;
}

@keyframes cib-cagri {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .34); }
	70%  { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

#cozum-ib .cib-balon .cib-foto-cerceve {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 42px;
	height: 42px;
}

#cozum-ib .cib-foto {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

#cozum-ib .cib-balon .cib-foto { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

#cozum-ib .cib-nokta {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 12px;
	height: 12px;
	border: 2.5px solid var(--cib-vurgu-koyu);
	border-radius: 50%;
	background: var(--cib-yesil);
}

#cozum-ib.cib-kapali .cib-nokta { background: #94a3b8; }

#cozum-ib .cib-balon-metin {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#cozum-ib .cib-balon-etiket {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
}

#cozum-ib .cib-balon-alt {
	font-size: 11.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .78);
}

#cozum-ib .cib-ok {
	flex: 0 0 auto;
	display: flex;
	color: rgba(255, 255, 255, .7);
	transition: transform .22s ease;
}

#cozum-ib .cib-balon:hover .cib-ok { transform: translateX(2px); }
#cozum-ib.cib-sol .cib-ok { transform: scaleX(-1); }
#cozum-ib.cib-sol .cib-balon:hover .cib-ok { transform: scaleX(-1) translateX(2px); }

#cozum-ib.cib-acik .cib-balon {
	opacity: 0;
	transform: scale(.86) translateY(6px);
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}

/* ============================================================= KART */

#cozum-ib .cib-kart {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 344px;
	max-width: calc(100vw - 2 * var(--cib-yan-etkin));
	/* Kısa ekranlarda (yatay telefon) kart ekranı taşırmaz, içi kayar. */
	max-height: calc(100vh - var(--cib-alt) - 20px);
	max-height: calc(100dvh - var(--cib-alt) - 20px);
	border: 1px solid var(--cib-cizgi);
	border-radius: 18px;
	background: var(--cib-kart);
	color: #fff;
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .06) inset,
		0 24px 56px -14px rgba(0, 0, 0, .6),
		0 6px 18px -6px rgba(0, 0, 0, .38);
}

#cozum-ib .cib-kart[hidden] { display: none; }

#cozum-ib.cib-acik .cib-kart {
	animation: cib-gir .26s cubic-bezier(.22, 1, .36, 1);
	transform-origin: bottom right;
}

#cozum-ib.cib-sol.cib-acik .cib-kart { transform-origin: bottom left; }

@keyframes cib-gir {
	from { opacity: 0; transform: translateY(12px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------- Kapatma düğmesi
   Sade tutulur: çerçevesiz, sönük, yalnızca üzerine gelince belirir.
   Dokunmatik hedefi 40px olsun diye simgeden büyük tutulmuştur. */

#cozum-ib .cib-kapat {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

#cozum-ib .cib-kapat:hover {
	background: rgba(255, 255, 255, .09);
	color: rgba(255, 255, 255, .9);
}

#cozum-ib .cib-kapat:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .8);
	outline-offset: -2px;
	color: #fff;
}

/* --------------------------------------------------- Başlık şeridi
   Kişi bilgisi kartın başlığıdır; ayrı bir kutuya konmaz. */

#cozum-ib .cib-ust {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	padding: 16px 52px 16px 18px;
	border-bottom: 1px solid var(--cib-cizgi);
	background: rgba(255, 255, 255, .035);
}

#cozum-ib .cib-ust .cib-foto {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .14);
}

#cozum-ib .cib-kisi-bilgi { min-width: 0; flex: 1 1 auto; }

#cozum-ib .cib-kisi-ad {
	margin: 0;
	color: #fff;
	font-size: 14.5px;
	font-weight: 650;
	letter-spacing: -.01em;
	line-height: 1.25;
}

#cozum-ib .cib-kisi-unvan {
	margin: 3px 0 0;
	color: var(--cib-sonuk);
	font-size: 12px;
	line-height: 1.25;
}

#cozum-ib .cib-rozet {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(52, 211, 153, .14);
	color: var(--cib-yesil);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

#cozum-ib .cib-rozet::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

#cozum-ib.cib-kapali .cib-rozet {
	background: rgba(148, 163, 184, .16);
	color: #cbd5e1;
}

/* ------------------------------------------------------------ Gövde */

#cozum-ib .cib-govde {
	flex: 1 1 auto;
	padding: 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#cozum-ib .cib-baslik {
	margin: 0 0 6px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.3;
}

#cozum-ib .cib-durum {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	color: var(--cib-sonuk);
	font-size: 12.5px;
	line-height: 1.45;
}

#cozum-ib .cib-halka {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 7px;
	height: 7px;
	margin-top: 1px;
	align-self: flex-start;
}

#cozum-ib .cib-halka-ic {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--cib-yesil);
}

#cozum-ib .cib-halka::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: rgba(52, 211, 153, .28);
	animation: cib-nabiz 2.4s ease-out infinite;
}

#cozum-ib.cib-kapali .cib-halka-ic { background: #94a3b8; }
#cozum-ib.cib-kapali .cib-halka::after { display: none; }

@keyframes cib-nabiz {
	0%   { transform: scale(.6); opacity: .85; }
	70%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}

/* Kullanılmayan ayraç; eski işaretlemeyle uyum için sıfırlanır. */
#cozum-ib .cib-ayrac { display: none; }

/* ---------------------------------------------------- Kanal listesi
   Her satırın ayrı çerçevesi yoktu; tek bir liste kutusu içinde ince
   çizgilerle ayrılırlar. Kart böylece "kutu içinde kutu" görünmez. */

#cozum-ib .cib-eylemler {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--cib-cizgi);
	border-radius: 14px;
	background: var(--cib-yuzey);
	overflow: hidden;
}

#cozum-ib .cib-eylem {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 0;
	border-radius: 0;
	background: none;
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease;
}

#cozum-ib .cib-eylem + .cib-eylem { border-top: 1px solid var(--cib-cizgi); }

#cozum-ib .cib-eylem:hover,
#cozum-ib .cib-eylem:focus-visible {
	background: rgba(255, 255, 255, .07);
	color: #fff;
	text-decoration: none;
}

#cozum-ib .cib-eylem:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: -2px; }

#cozum-ib .cib-eylem-simge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--cib-vurgu);
	color: #fff;
}

/* WhatsApp satırı kendi rengini alır; tanınırlık tıklamayı kolaylaştırır. */
#cozum-ib .cib-eylem[href*="wa.me"] .cib-eylem-simge { background: #25d366; }

#cozum-ib .cib-eylem-metin {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

#cozum-ib .cib-eylem-etiket {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.005em;
}

#cozum-ib .cib-eylem-deger {
	color: var(--cib-sonuk);
	font-size: 12px;
	overflow-wrap: anywhere;
}

#cozum-ib .cib-eylem-ok {
	flex: 0 0 auto;
	display: flex;
	color: rgba(255, 255, 255, .3);
	transition: transform .15s ease, color .15s ease;
}

#cozum-ib .cib-eylem:hover .cib-eylem-ok {
	color: rgba(255, 255, 255, .65);
	transform: translateX(2px);
}

#cozum-ib.cib-sol .cib-eylem-ok { transform: scaleX(-1); }
#cozum-ib.cib-sol .cib-eylem:hover .cib-eylem-ok { transform: scaleX(-1) translateX(2px); }

/* --------------------------------------------------- Düğme ve not */

#cozum-ib .cib-dugme {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 13px 18px;
	border-radius: 12px;
	background: var(--cib-vurgu);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -.005em;
	text-decoration: none;
	transition: background-color .16s ease;
}

#cozum-ib .cib-dugme:hover,
#cozum-ib .cib-dugme:focus-visible {
	background: var(--cib-vurgu-koyu);
	color: #fff;
	text-decoration: none;
}

#cozum-ib .cib-dugme:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#cozum-ib .cib-dugme svg { transition: transform .16s ease; }
#cozum-ib .cib-dugme:hover svg { transform: translateX(3px); }

#cozum-ib .cib-not {
	margin: 12px 2px 0;
	color: rgba(255, 255, 255, .42);
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}

/* ====================================================== RESPONSIVE */

/* Tablet ve küçük dizüstü: kart biraz daralır. */
@media (max-width: 900px) {
	#cozum-ib .cib-kart { width: 328px; }
}

/* Telefon: kart neredeyse tam genişlik, balon da sığacak kadar. */
@media (max-width: 560px) {
	/* Seçici ".cib" sınıfını da içerir: yönetimden gelen satır içi stil
	   "#cozum-ib" ile yazıldığı ve bu dosyadan sonra yüklendiği için, eşit
	   özgüllükte kalsaydı bu kırılım hiç uygulanmazdı. */
	#cozum-ib.cib {
		--cib-yan-etkin: min(var(--cib-yan), 14px);
		gap: 10px;
	}

	#cozum-ib .cib-kart {
		width: calc(100vw - 2 * var(--cib-yan-etkin));
		border-radius: 16px;
	}

	#cozum-ib .cib-ust { padding: 14px 48px 14px 14px; }
	#cozum-ib .cib-ust .cib-foto { width: 40px; height: 40px; }
	#cozum-ib .cib-govde { padding: 15px 14px; }
	#cozum-ib .cib-baslik { font-size: 16px; }
	#cozum-ib .cib-eylem { padding: 12px; }
	#cozum-ib .cib-balon { padding: 7px 14px 7px 7px; }
	#cozum-ib .cib-balon .cib-foto-cerceve { width: 38px; height: 38px; }
}

/* Dar telefon: rozet başlık şeridini taşırmasın, alta iner. */
@media (max-width: 380px) {
	#cozum-ib .cib-ust { flex-wrap: wrap; }
	#cozum-ib .cib-kisi-bilgi { flex: 1 1 auto; }
	#cozum-ib .cib-rozet { order: 3; margin-left: 52px; }
	#cozum-ib .cib-balon-alt { display: none; }
}

/* Yatay telefon / kısa ekran: gövde kayar, başlık şeridi sabit kalır. */
@media (max-height: 520px) {
	/* Alt boşluk da düşülmelidir; yoksa kart yukarıdan ekranı taşar. */
	#cozum-ib .cib-kart { max-height: calc(100dvh - var(--cib-alt) - 12px); }
	#cozum-ib .cib-ust { padding-block: 11px; }
	#cozum-ib .cib-govde { padding-block: 14px; }
	#cozum-ib .cib-not { display: none; }
}

/* Dokunmatik cihazlarda hover durumları takılı kalmasın. */
@media (hover: none) {
	#cozum-ib .cib-balon:hover { transform: none; }
	#cozum-ib .cib-eylem:hover { background: none; }
	#cozum-ib .cib-eylem:hover .cib-eylem-ok { transform: none; }
	#cozum-ib .cib-dugme:hover svg { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#cozum-ib .cib-balon,
	#cozum-ib .cib-balon::after,
	#cozum-ib .cib-kart,
	#cozum-ib .cib-halka::after,
	#cozum-ib .cib-eylem,
	#cozum-ib .cib-eylem-ok,
	#cozum-ib .cib-dugme,
	#cozum-ib .cib-dugme svg,
	#cozum-ib .cib-kapat,
	#cozum-ib .cib-ok {
		animation: none !important;
		transition: none !important;
	}

	#cozum-ib .cib-balon:hover { transform: none; }
}

@media print {
	#cozum-ib { display: none !important; }
}