/* ==========================================================================
   UX Enhancements — telegramgrupbul.com
   Site geneli iyileştirmeler: Dark mode, sticky mobil arama, kart hover,
   skeleton loader, mikro-etkileşimler. Mevcut style.css'in üstüne biner.
   ========================================================================== */

/* ---------- 1. Tema değişkenleri (Dark mode altyapısı) ---------- */
:root {
	--ux-bg: #ffffff;
	--ux-surface: #ffffff;
	--ux-surface-2: #f7f7fa;
	--ux-text: #2b2b35;
	--ux-text-muted: #6b6b78;
	--ux-border: #e6e6ee;
	--ux-primary: #f25391;
	--ux-shadow: 0 4px 18px rgba(20, 20, 40, 0.08);
	--ux-shadow-hover: 0 12px 32px rgba(20, 20, 40, 0.16);
}

html[data-theme="dark"] {
	--ux-bg: #14141b;
	--ux-surface: #1d1d27;
	--ux-surface-2: #24242f;
	--ux-text: #e8e8f0;
	--ux-text-muted: #a0a0b0;
	--ux-border: #32323f;
	--ux-primary: #ff6aa3;
	--ux-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
	--ux-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Dark mode: ana yüzeyleri uyarla (mevcut tema beyaz tasarlanmış) */
html[data-theme="dark"] body {
	background: var(--ux-bg) !important;
	color: var(--ux-text);
}

/* TÜM section/sarmalayıcı açık zeminleri koyulaştır — "dark dark'tır" (inline style dahil) */
html[data-theme="dark"] section,
html[data-theme="dark"] .section-bg,
html[data-theme="dark"] [class*="section-padding"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"] {
	background-color: var(--ux-bg) !important;
	background-image: none !important;
}

/* Koyulaştırdığımız inline-beyaz kutuların İÇİNDEKİ metinler açık renk olsun */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #f8f9fa"] {
	color: var(--ux-text) !important;
}
html[data-theme="dark"] [style*="background: #fff"] h1,
html[data-theme="dark"] [style*="background: #fff"] h2,
html[data-theme="dark"] [style*="background: #fff"] h3,
html[data-theme="dark"] [style*="background: #fff"] h4,
html[data-theme="dark"] [style*="background: #fff"] h5,
html[data-theme="dark"] [style*="background: #fff"] label,
html[data-theme="dark"] [style*="background: #f8f9fa"] h1,
html[data-theme="dark"] [style*="background: #f8f9fa"] h2,
html[data-theme="dark"] [style*="background: #f8f9fa"] h3,
html[data-theme="dark"] [style*="background: #f8f9fa"] h4 {
	color: var(--ux-text) !important;
}

/* Grup ekleme MODERN FORM sayfası — tüm beyaz/açık kutular koyu yüzeye */
html[data-theme="dark"] .modern-add-group-form,
html[data-theme="dark"] .modern-form-section,
html[data-theme="dark"] .modern-form-header,
html[data-theme="dark"] .modern-checkbox-wrapper,
html[data-theme="dark"] .modern-file-upload-label,
html[data-theme="dark"] .modern-image-preview,
html[data-theme="dark"] .modern-character-count {
	background-color: var(--ux-surface) !important;
	background-image: none !important;
	border-color: var(--ux-border) !important;
}
/* Modern form metinleri ve etiketleri açık renk */
html[data-theme="dark"] .modern-form-header h2,
html[data-theme="dark"] .modern-form-section-title,
html[data-theme="dark"] .modern-form-label,
html[data-theme="dark"] .modern-checkbox-wrapper,
html[data-theme="dark"] .modern-checkbox-wrapper label,
html[data-theme="dark"] .modern-file-upload-label span {
	color: var(--ux-text) !important;
}
html[data-theme="dark"] .modern-form-header p,
html[data-theme="dark"] .modern-form-help,
html[data-theme="dark"] .modern-character-count {
	color: var(--ux-text-muted) !important;
}
/* Modern form input/textarea/select koyu zemin */
html[data-theme="dark"] .modern-form-control,
html[data-theme="dark"] .modern-form-select,
html[data-theme="dark"] .modern-form-textarea {
	background-color: var(--ux-surface-2) !important;
	color: var(--ux-text) !important;
	border-color: var(--ux-border) !important;
}
/* Beyaz/açık zeminli YÜZEYLER → koyu yüzeye çevir (metin okunabilir kalsın) */
html[data-theme="dark"] .group-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .post--card,
html[data-theme="dark"] .grid-single,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .sidebar-widget-new,
html[data-theme="dark"] .listings-sidebar,
html[data-theme="dark"] .sidebar-category-item,
html[data-theme="dark"] .sidebar-post-item,
html[data-theme="dark"] .advertisement-placeholder,
html[data-theme="dark"] .group-card-content {
	background-color: var(--ux-surface) !important;
	background-image: none !important;
	color: var(--ux-text);
	border-color: var(--ux-border) !important;
}

/* Reklam alanının kesik çizgili kenarı dark'ta da görünür kalsın */
html[data-theme="dark"] .advertisement-placeholder {
	border: 3px dashed var(--ux-primary) !important;
}

/* Açık gri/gradient iç alanlar (arama input zemini, kategori satırı) */
html[data-theme="dark"] .sidebar-widget-new-content,
html[data-theme="dark"] .sidebar-category-list {
	background-color: var(--ux-surface) !important;
	background-image: none !important;
}

/* Kategori satırları: açık gri zemin (#f8f9fa) + koyu metin (#555) → koyu zemin + açık metin */
html[data-theme="dark"] .sidebar-category-link {
	background-color: var(--ux-surface-2) !important;
	color: var(--ux-text) !important;
}
html[data-theme="dark"] .sidebar-category-link:hover {
	background-color: var(--ux-primary) !important;
	color: #fff !important;
}

/* Başlıklar ve linkler: açık metin */
html[data-theme="dark"] .group-card-title,
html[data-theme="dark"] .group-card-content h1,
html[data-theme="dark"] .group-card-content h2,
html[data-theme="dark"] .group-card-content h3,
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .ad-placeholder-title,
html[data-theme="dark"] .sidebar-category-link,
html[data-theme="dark"] .sidebar-post-content a {
	color: var(--ux-text) !important;
}

/* Soluk/ikincil metinler: muted ama OKUNABİLİR */
html[data-theme="dark"] .group-card-description,
html[data-theme="dark"] .group-card-meta,
html[data-theme="dark"] .ad-placeholder-text,
html[data-theme="dark"] .sidebar-post-meta {
	color: var(--ux-text-muted) !important;
}

/* Form alanları */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
	background-color: var(--ux-surface-2) !important;
	color: var(--ux-text) !important;
	border-color: var(--ux-border) !important;
}
html[data-theme="dark"] ::placeholder { color: var(--ux-text-muted) !important; opacity: 1; }

/* Mor gradient header'lar (Arama / Kategoriler başlığı) KORUNUR — zaten koyu/kontrastlı.
   Reklam alanının açık gradient'i ise yukarıda koyuya çevrildi. */

/* Tema geçişini yumuşat */
body, .group-card, .card, .widget, .sidebar-widget-new, input, textarea {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ---------- 2. Dark mode toggle butonu ---------- */
.ux-theme-toggle {
	position: fixed;
	right: 18px;
	bottom: 84px;
	z-index: 1040;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--ux-primary);
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	box-shadow: var(--ux-shadow-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, background .25s ease;
}
.ux-theme-toggle:hover { transform: scale(1.08) rotate(8deg); }
.ux-theme-toggle:active { transform: scale(.94); }
@media (min-width: 992px) { .ux-theme-toggle { bottom: 24px; } }

/* ---------- 3. Grup kartı ek dokunuşlar ----------
   NOT: kart hover/translateY ve image zoom efektleri zaten index.php içindeki
   inline stillerde tanımlı. Burada SADECE onlarda olmayan ekleri tanımlıyoruz
   (ok animasyonu, klavye odağında da hover, "yeni" rozeti). */
.group-card { will-change: transform; }
/* Klavye ile odaklanınca da hover efekti tetiklensin (erişilebilirlik) */
.group-card-link:focus-visible .group-card {
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.group-card-arrow { transition: transform .25s ease; display: inline-flex; gap: 4px; }
.group-card-link:hover .group-card-arrow { transform: translateX(4px); }

/* "Yeni" rozeti — kart açıklamasına ux-badge-new sınıfı eklenince görünür */
.ux-badge-new {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	background: var(--ux-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	padding: 3px 9px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ---------- 4. Skeleton loader ---------- */
.ux-skeleton {
	background: linear-gradient(90deg, var(--ux-surface-2) 25%, var(--ux-border) 37%, var(--ux-surface-2) 63%);
	background-size: 400% 100%;
	animation: ux-shimmer 1.3s ease-in-out infinite;
	border-radius: 8px;
}
@keyframes ux-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}
.ux-skeleton-card { height: 320px; margin-bottom: 24px; }

/* ---------- 5. Mobil sticky alt arama/menü çubuğu ---------- */
.ux-bottombar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 1050;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
	background: var(--ux-surface);
	border-top: 1px solid var(--ux-border);
	box-shadow: 0 -4px 18px rgba(20,20,40,.10);
}
.ux-bottombar form { flex: 1; display: flex; }
.ux-bottombar input[type="search"],
.ux-bottombar input[type="text"] {
	flex: 1;
	height: 42px;
	border: 1px solid var(--ux-border);
	border-radius: 24px 0 0 24px;
	padding: 0 16px;
	font-size: 15px;
	outline: none;
	background: var(--ux-surface-2);
	color: var(--ux-text);
}
.ux-bottombar button[type="submit"] {
	height: 42px;
	width: 48px;
	border: none;
	border-radius: 0 24px 24px 0;
	background: var(--ux-primary);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
}
.ux-bottombar .ux-bb-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	height: 42px;
	color: var(--ux-text-muted);
	font-size: 11px;
	text-decoration: none;
	line-height: 1.1;
}
.ux-bottombar .ux-bb-link i { font-size: 19px; margin-bottom: 2px; }
.ux-bottombar .ux-bb-link:hover { color: var(--ux-primary); }

/* Bottombar sadece mobil/tablet'te görünür; masaüstünde gizli */
@media (min-width: 992px) { .ux-bottombar { display: none; } }
/* Bottombar varken sayfa altına nefes payı (içerik gizlenmesin) */
@media (max-width: 991px) { body { padding-bottom: 70px; } }

/* ---------- 6. Mikro-etkileşimler ---------- */
html { scroll-behavior: smooth; }
a, button { transition: color .2s ease, background-color .2s ease, transform .15s ease; }
.btn:active { transform: scale(.97); }

/* Erişilebilirlik: klavye odak halkası */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--ux-primary);
	outline-offset: 2px;
}

/* "Kopyalandı" toast bildirimi */
.ux-toast {
	position: fixed;
	left: 50%;
	bottom: 90px;
	transform: translateX(-50%) translateY(20px);
	background: #2b2b35;
	color: #fff;
	padding: 10px 18px;
	border-radius: 24px;
	font-size: 14px;
	z-index: 1060;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.ux-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }