/* ==========================================================================
   Yenikent Bülten — etkileşim ve yorumlar

   Sitenin mevcut görünümüne KATILIYOR, onu ezmiyor: yuvarlak köşe,
   ince gri çizgi, yumuşak gölge — akış kartlarındaki dil.

   Yalnızca yeni öğeleri boyuyor. .yk-action-btn zaten sitede var;
   burada sadece ikon ve sayı hizası ekleniyor.
   ========================================================================== */

:root {
	--yb-cizgi: #e5e7eb;
	--yb-sonuk: #6b7280;
	--yb-metin: #102033;
	--yb-kirmizi: #e0245e;
	--yb-mavi: #2563eb;
	--yb-zemin: #f8fafc;
}

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

.yk-action-btn.yb-etk {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	line-height: 1;
}

.yb-etk svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	flex: 0 0 auto;
	transition: transform .18s ease;
}

.yb-etk .yb-sayi {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 13.5px;
}

/* Beğenilmiş kalp doluyor — dolu/boş ayrımı renkten daha okunur. */
[data-yb-begeni].aktif { color: var(--yb-kirmizi); }
[data-yb-begeni].aktif svg { fill: var(--yb-kirmizi); stroke: var(--yb-kirmizi); }

[data-yb-kaydet].aktif { color: var(--yb-mavi); }
[data-yb-kaydet].aktif svg { fill: var(--yb-mavi); stroke: var(--yb-mavi); }

.yk-share-btn.aktif { color: var(--yb-mavi); }

/* Tıklamanın karşılığı görünsün: küçük bir sıçrama. */
.yb-titre svg { transform: scale(1.28); }

.yk-action-form { display: inline-flex; margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.yb-etk svg { transition: none; }
	.yb-titre svg { transform: none; }
}

/* ------------------------------------------------------------- Yorumlar */

.yb-yorumlar {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--yb-cizgi);
}

.yb-yorum-kutu {
	margin-top: 4px;
	padding: 4px 18px 16px;
	border-top: 1px solid var(--yb-cizgi);
}
.yb-yorum-kutu .yb-yorumlar { border-top: 0; padding-top: 8px; margin-top: 0; }

.yb-yorumlar-bas {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--yb-sonuk);
	margin-bottom: 12px;
}
.yb-yorumlar-bas b { color: var(--yb-metin); font-size: 15px; }

/* Yazma kutusu — en üstte. Yorum yazmak için listeyi geçmek gerekmesin. */
.yb-yorum-yaz {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.yb-yorum-yaz-govde { flex: 1; min-width: 0; }

.yb-yorum-yaz textarea {
	width: 100%;
	min-height: 42px;
	padding: 11px 14px;
	border: 1px solid var(--yb-cizgi);
	border-radius: 14px;
	background: var(--yb-zemin);
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	resize: none;
	overflow: hidden;
	box-sizing: border-box;
}
.yb-yorum-yaz textarea:focus {
	outline: 0;
	border-color: #9ca3af;
	background: #fff;
}

.yb-yorum-yaz-alt {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.yb-yorum-uyari { font-size: 13px; color: #b91c1c; flex: 1; }
.yb-yorum-gonder { margin-left: auto; }
.yb-yorum-gonder[disabled] { opacity: .55; cursor: default; }

/* Avatar — akış kartındaki harf işaretiyle aynı dil. */
.yb-yorum-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	background: #e8ecf1;
	color: #334155;
	font-weight: 800;
	text-decoration: none;
}
.yb-yorum-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tek yorum */
.yb-yorum { display: flex; gap: 10px; padding: 10px 0; }
.yb-yorum-govde { flex: 1; min-width: 0; }

.yb-yorum-ust {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 3px;
}
.yb-yorum-ust .ad { font-weight: 750; font-size: 14.6px; color: var(--yb-metin); text-decoration: none; }
.yb-yorum-ust .ad:hover { text-decoration: underline; }
.yb-yorum-ust .unvan {
	font-size: 11.4px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	background: #eef2ff;
	color: #4338ca;
}
.yb-yorum-ust .zaman { font-size: 12.4px; color: var(--yb-sonuk); }

.yb-yorum-metin { font-size: 15px; line-height: 1.6; color: #1f2937; }
.yb-yorum-metin p { margin: 0 0 6px; }
.yb-yorum-metin p:last-child { margin-bottom: 0; }

.yb-yorum-alt { margin-top: 4px; }
.yb-yanitla {
	background: 0;
	border: 0;
	padding: 4px 0;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--yb-sonuk);
}
.yb-yanitla:hover { color: var(--yb-metin); text-decoration: underline; }

/* Yanıtlar tek seviye girintili.

   Sınırsız iç içe yanıt küçük bir toplulukta okunmaz hale gelir:
   telefonda dördüncü seviye ekranın yarısını girintiye harcar. */
.yb-yanitlar {
	margin-top: 6px;
	padding-left: 14px;
	border-left: 2px solid var(--yb-cizgi);
}
.yb-yanitlar .yb-yorum-avatar { width: 32px; height: 32px; font-size: 13px; }
.yb-yanitlar .yb-yorum-metin { font-size: 14.4px; }

.yb-yanit-form { margin-top: 10px; }

.yb-yorum-bos, .yb-yorum-kapali, .yb-yorum-giris {
	font-size: 14.4px;
	color: var(--yb-sonuk);
	padding: 6px 0;
}

/* Yeni gelen yorum belli olsun — ama bir kez, dikkat çalmadan. */
.yb-yeni { animation: yb-belir .5s ease; }

@keyframes yb-belir {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.yb-yeni { animation: none; }
}

/* ==========================================================================
   İşletmelerim — canlı arama
   Kaynak: İşletmelerim snippet'inin sayfaya gömülü <style> bloğu.
   Aynı stil, artık her açılışta HTML'in içinde tekrar inmiyor.
   ========================================================================== */

.yk-isletme-search-wrap {
	position: sticky;
	top: 64px;
	z-index: 30;
	background: #fff;
	padding: 10px 0 14px;
	margin-bottom: 12px;
	border-bottom: 1px solid #e5e7eb;
}

.yk-isletme-search-wrap input {
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	padding: 13px 18px;
	font-size: 15px;
	font-weight: 800;
	outline: none;
}

.yk-isletme-search-wrap input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, .12 );
}

.yk-isletme-search-wrap span {
	display: block;
	margin-top: 8px;
	color: #64748b;
	font-size: 13px;
	font-weight: 800;
}

.yk-isletme-empty {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
	border-radius: 14px;
	padding: 14px;
	font-weight: 800;
}

.yk-isletme-listesi {
	display: grid;
	gap: 12px;
}

/* ==========================================================================
   UYGULAMA OLARAK EKLE — alttaki davet kutusu

   Ekranın altında, içeriğin üstünde duran ince bir şerit. Amaç dikkat
   çekmek ama yolu kapatmamak: tek satır başlık, tek satır açıklama,
   bir düğme ve bir kapatma işareti.
   ========================================================================== */

.yb-pwa {
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 99990;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 40px 13px 14px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	box-shadow: 0 14px 38px rgba( 15, 23, 42, .18 );
	transform: translateY( 130% );
	opacity: 0;
	transition: transform .28s ease, opacity .28s ease;
}

.yb-pwa-acik {
	transform: none;
	opacity: 1;
}

.yb-pwa-ikon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	object-fit: cover;
	background: #f1f5f9;
}

.yb-pwa-metin {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.yb-pwa-metin strong {
	font-size: 14.5px;
	line-height: 1.3;
	font-weight: 800;
	color: #0f172a;
}

.yb-pwa-aciklama {
	font-size: 12.5px;
	line-height: 1.45;
	color: #64748b;
}

.yb-pwa-btn {
	flex: 0 0 auto;
	padding: 11px 18px;
	border: 0;
	border-radius: 999px;
	background: #16a34a;
	color: #fff;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}

.yb-pwa-btn:hover {
	background: #15803d;
}

.yb-pwa-kapat {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: #94a3b8;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}

.yb-pwa-kapat:hover {
	background: #f1f5f9;
	color: #0f172a;
}

/* iOS'ta düğme yok, yerine yönerge var: metne biraz daha yer. */
.yb-pwa-ios {
	padding-right: 40px;
}

.yb-pwa-ios .yb-pwa-aciklama {
	font-size: 12.5px;
	color: #475569;
}

/* Dar ekranda düğme alta iniyor ki başlık kırpılmasın. */
@media ( max-width: 420px ) {
	.yb-pwa {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.yb-pwa-btn {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.yb-pwa {
		transition: none;
	}
}

/* ==========================================================================
   FOTOĞRAF GALERİSİ — tam ekran gezinme

   Kutucuk artık düğme; tıklanınca fotoğraf tam ekranda açılıyor ve
   oklarla diğerlerine geçiliyor.
   ========================================================================== */

.yk-gallery-card {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: 14px;
	overflow: hidden;
	line-height: 0;
}

.yk-gallery-card img {
	transition: transform .35s ease;
}

.yk-gallery-card:hover img,
.yk-gallery-card:focus-visible img {
	transform: scale( 1.04 );
}

.yk-gallery-buyut {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba( 15, 23, 42, .62 );
	color: #fff;
	opacity: 0;
	transform: translateY( 6px );
	transition: opacity .2s ease, transform .2s ease;
}

.yk-gallery-card:hover .yk-gallery-buyut,
.yk-gallery-card:focus-visible .yk-gallery-buyut {
	opacity: 1;
	transform: none;
}

.yk-gallery-not {
	margin: 14px 0 0;
	font-size: 13px;
	color: #64748b;
}

/* --- Tam ekran --- */

.yb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 8, 15, 26, .94 );
	opacity: 0;
	transition: opacity .22s ease;
}

.yb-lightbox-acik {
	opacity: 1;
}

.yb-lb-sahne {
	margin: 0;
	max-width: min( 1100px, 92vw );
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.yb-lb-sahne img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: 10px;
	background: #0f172a;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, .5 );
}

.yb-lb-yazi {
	margin: 0;
	max-width: 720px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: #cbd5e1;
}

.yb-lb-dugme {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background .16s ease;
}

.yb-lb-dugme:hover {
	background: rgba( 255, 255, 255, .24 );
}

.yb-lb-onceki { left: 16px; }
.yb-lb-sonraki { right: 16px; }

.yb-lb-kapat {
	top: 16px;
	right: 16px;
	font-size: 26px;
}

.yb-lb-sayac {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX( -50% );
	font-size: 13px;
	letter-spacing: .1em;
	color: #94a3b8;
}

.yb-lb-tek .yb-lb-onceki,
.yb-lb-tek .yb-lb-sonraki,
.yb-lb-tek .yb-lb-sayac {
	display: none;
}

body.yb-lightbox-kilit {
	overflow: hidden;
}

@media ( max-width: 640px ) {
	.yb-lb-dugme {
		width: 42px;
		height: 42px;
		font-size: 26px;
	}

	.yb-lb-onceki { left: 8px; }
	.yb-lb-sonraki { right: 8px; }

	.yb-lb-sahne img {
		max-height: 70vh;
	}

	.yk-gallery-buyut {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.yb-lightbox,
	.yk-gallery-card img,
	.yk-gallery-buyut {
		transition: none;
	}
}

/* ==========================================================================
   PAYLAŞIM HAKKI SAYACI

   Paylaşım Yap ve İşletme Adına Paylaşım sayfalarının üstünde duruyor.
   Amacı tek şey: üyenin iki ayrı hakkı olduğunu, birinin diğerini
   eksiltmediğini ve kampanyanın ayrı bir kotası olmadığını görmesi.
   ========================================================================== */

.yb-hak-sayac {
	margin: 0 0 20px;
	padding: 14px 16px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-left: 4px solid #16a34a;
	border-radius: 12px;
}

.yb-hak-sayac-satir {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-bottom: 8px;
	font-size: 15px;
	color: #14532d;
}

.yb-hak-sayac p {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #3f6212;
}