/* ============================================================
   VergiBulustayi.com — "Kurumsal Modern" Tema Katmanı  (v1)
   ------------------------------------------------------------
   Bu dosya mevcut stillerin ÜZERİNE yüklenir (head.php'de en son).
   Tüm tasarım yenilemesi bu tek dosyada toplanmıştır.
   Geri dönüş: head.php'deki theme.css satırını kaldırmak yeterli
   (veya frontend_backups/.../RESTORE.sh).
   ============================================================ */

/* ------------------------------------------------------------
   1. TASARIM DEĞİŞKENLERİ (Design Tokens)
   ------------------------------------------------------------ */
:root {
	/* Marka renkleri — mevcut lacivert kimlik korunarak rafine edildi */
	--vb-primary: #0e3f83;
	--vb-primary-dark: #0a2f63;
	--vb-primary-darker: #082548;
	--vb-primary-light: #1a5fb4;
	--vb-primary-050: #eef4fd;
	--vb-primary-100: #dbe8fa;
	--vb-primary-200: #bfd6f3;

	/* Nötr skala */
	--vb-bg: #f2f4f8;
	--vb-surface: #ffffff;
	--vb-ink: #0f172a;          /* ana metin */
	--vb-ink-2: #334155;        /* ikincil metin */
	--vb-ink-3: #64748b;        /* meta / soluk metin */
	--vb-line: #e2e8f0;         /* çizgiler ve kart kenarları */
	--vb-line-soft: #eef2f7;

	/* Durum renkleri */
	--vb-success: #16a34a;
	--vb-danger: #dc2626;
	--vb-warning: #d97706;

	/* Tipografi */
	--vb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Köşe yarıçapları */
	--vb-r-sm: 8px;
	--vb-r-md: 12px;
	--vb-r-lg: 16px;
	--vb-r-pill: 999px;

	/* Gölgeler (katmanlı, yumuşak) */
	--vb-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
	--vb-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
	--vb-shadow-md: 0 4px 10px rgba(15, 23, 42, 0.07), 0 12px 32px rgba(15, 23, 42, 0.07);
	--vb-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10), 0 24px 56px rgba(15, 23, 42, 0.10);

	/* Odak halkası */
	--vb-ring: 0 0 0 3px rgba(26, 95, 180, 0.28);
}

/* ------------------------------------------------------------
   2. GENEL TABAN (tipografi, arkaplan, seçim, odak, scrollbar)
   ------------------------------------------------------------ */
html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--vb-font);
	background-color: var(--vb-bg);
	color: var(--vb-ink);
	-webkit-tap-highlight-color: transparent;
	text-rendering: optimizeLegibility;
}

button, input, select, textarea {
	font-family: inherit;
}

::selection {
	background: var(--vb-primary-100);
	color: var(--vb-primary-dark);
}

/* Klavye odak halkası — erişilebilirlik */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--vb-ring);
	border-radius: var(--vb-r-sm);
}

/* İnce, modern scrollbar */
* {
	scrollbar-width: thin;
	scrollbar-color: #c3ccd9 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
	background: #c3ccd9;
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #9aa7ba; }

/* Ana içerik alanı — eski üçlü degrade yerine sakin tek zemin */
.main {
	background: var(--vb-bg);
	padding-top: 24px;
}

/* İçerik görselleri taşmasın */
.right-post-box-content img,
.comment-container img,
.post-detail img {
	max-width: 100%;
	height: auto;
	border-radius: var(--vb-r-sm);
}

/* Uzun linkler / kelimeler kartı patlatmasın */
.right-post-box .right-post-box-content .content-text,
.right-post-box .right-post-box-headline .headline-text {
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   3. HEADER — sakin, derin lacivert; rafine arama ve butonlar
   ------------------------------------------------------------ */
header {
	background: linear-gradient(180deg, #0d3a78 0%, var(--vb-primary-dark) 100%);
	padding: 10px 24px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 24px rgba(8, 37, 72, 0.28);
	transition: box-shadow 0.25s ease, padding 0.25s ease;
}

/* theme.js scroll ile ekler — sayfa kayınca daha belirgin gölge */
header.vb-scrolled {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 30px rgba(8, 37, 72, 0.45);
}

.logo img {
	height: 42px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.logo a {
	font-family: var(--vb-font);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-shadow: none;
}

/* Sürüm rozeti */
.header-content .logo .changelog {
	margin-left: 8px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 2px 8px;
	border-radius: var(--vb-r-pill);
	transition: background 0.2s ease;
}
.header-content .logo .changelog:hover {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* Arama çubuğu — büyüteç ikonu gömülü, sakin cam görünümü */
.search-bar { width: 26%; }

.search-bar input {
	padding: 10px 18px 10px 42px;
	border-radius: var(--vb-r-md);
	background: rgba(255, 255, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dbe8fa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 15px center;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 13.5px;
	box-shadow: none;
}
.search-bar input::placeholder { color: rgba(255, 255, 255, 0.6); }
.search-bar input:focus {
	background-color: rgba(255, 255, 255, 0.98);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e3f83' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	color: var(--vb-ink);
	border-color: transparent;
	transform: none;
	box-shadow: var(--vb-shadow-md);
}
.search-bar input:focus::placeholder { color: var(--vb-ink-3); }

/* Araçlar butonu — gri bootstrap yerine cam (ghost) buton */
/* styles.css'teki !important'lı gri degradeyi ezmek için !important gerekli */
.araclar-dropdown .btn-secondary,
.araclar-dropdown .btn-secondary:focus {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	box-shadow: none !important;
	color: #fff;
	font-weight: 600;
	font-size: 13.5px;
	border-radius: var(--vb-r-md);
	padding: 9px 16px;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.araclar-dropdown .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.22) !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
	box-shadow: none !important;
	color: #fff;
	transform: none;
}

/* Araçlar açılır menüsü */
.araclar-dropdown .dropdown-menu {
	min-width: 250px;
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-r-md);
	box-shadow: var(--vb-shadow-lg);
	padding: 8px;
	top: 48px;
	animation: vbDropIn 0.16s ease-out;
}
.araclar-dropdown .dropdown-item {
	color: var(--vb-ink-2);
	font-size: 13.5px;
	font-weight: 500;
	padding: 9px 12px;
	border-radius: var(--vb-r-sm);
	transition: background 0.15s ease, color 0.15s ease;
}
.araclar-dropdown .dropdown-item:hover {
	background: var(--vb-primary-050);
	color: var(--vb-primary);
}
.araclar-dropdown .dropdown-item i {
	width: 20px;
	text-align: center;
	margin-right: 6px;
	color: var(--vb-ink-3);
	transition: color 0.15s ease;
}
.araclar-dropdown .dropdown-item:hover i { color: var(--vb-primary); }

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

/* Giriş / Kayıt butonları — kırmızı degrade yerine kurumsal ikili */
.user-controls .login-button,
.user-controls .signup-button,
.user-controls button {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff;
	padding: 9px 20px;
	border-radius: var(--vb-r-md);
	font-weight: 600;
	font-size: 13.5px;
	box-shadow: none;
	letter-spacing: 0.2px;
}
.user-controls .login-button:hover,
.user-controls button:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.7);
	transform: none;
	box-shadow: none;
}
.user-controls .signup-button {
	background: #fff;
	border-color: #fff;
	color: var(--vb-primary);
}
.user-controls .signup-button:hover {
	background: var(--vb-primary-050);
	border-color: var(--vb-primary-050);
	color: var(--vb-primary-dark);
	transform: none;
	box-shadow: var(--vb-shadow-sm);
}
.user-controls .login-button::before,
.user-controls .signup-button::before,
.user-controls button::before { display: none; }

/* Üye kutusu (avatar + isim) */
.userInfo .link.loggedInLink {
	border-radius: var(--vb-r-md);
	transition: background 0.2s ease;
}
.userInfo .link.loggedInLink:hover {
	background: rgba(255, 255, 255, 0.10);
}

/* Üye açılır menüsü */
.dropdownMenu {
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-r-md);
	box-shadow: var(--vb-shadow-lg);
	overflow: hidden;
	animation: vbDropIn 0.16s ease-out;
}
.dropdownMenu .dropdownItem {
	transition: background 0.15s ease;
}
.dropdownMenu .dropdownItem:hover {
	background: var(--vb-primary-050);
}
.dropdownMenu .dropdownItem h3 {
	font-family: var(--vb-font);
	font-weight: 500;
}

/* ------------------------------------------------------------
   4. SOL MENÜ — panel görünümü, rafine hover/aktif durumlar
   ------------------------------------------------------------ */
.menubar {
	border-right: 1px solid var(--vb-line);
	padding: 28px 22px;
}

.app-menu a {
	color: var(--vb-ink-2);
	font-weight: 500;
	font-size: 13.5px;
	padding: 9px 14px;
	border-radius: var(--vb-r-sm);
	transition: background 0.15s ease, color 0.15s ease;
}

.app-menu .menu-icon {
	color: var(--vb-ink-3);
	width: 1.15rem;
	margin-right: 7px;
	transition: color 0.15s ease;
}

.menubar .app-menu li a:hover {
	background-color: var(--vb-primary-050);
	color: var(--vb-primary);
	font-weight: 500;
	border-radius: var(--vb-r-sm);
}
.menubar .app-menu li a:hover .menu-icon { color: var(--vb-primary); }

.menu-header { color: var(--vb-ink); font-weight: 600; }

/* Aktif sayfa vurgusu (theme.js işaretler) */
.active .menu-header,
.has-submenu.active .menu-header {
	background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-primary-light) 100%);
	color: #fff;
	border-radius: var(--vb-r-sm);
	box-shadow: 0 3px 10px rgba(14, 63, 131, 0.28);
}
.active .menu-header .menu-icon,
.has-submenu.active .menu-header .menu-icon { color: rgba(255, 255, 255, 0.9); }

.has-submenu.active .submenu {
	background: transparent;
}

.submenu.open li.active a.active,
.submenu li a.active {
	background-color: var(--vb-primary-050);
	color: var(--vb-primary);
	border-radius: var(--vb-r-sm);
	font-weight: 600;
}

/* Menü bölüm ayraçları */
.menubar hr {
	border: none;
	border-top: 1px solid var(--vb-line);
	margin: 12px 4px;
}

/* Menü daraltma yüzen butonu */
.menu-collapse-icon {
	background: var(--vb-primary);
	box-shadow: var(--vb-shadow-md);
	transition: transform 0.2s ease, background 0.2s ease;
}
.menu-collapse-icon:hover {
	background: var(--vb-primary-light);
	transform: scale(1.08);
}

/* ------------------------------------------------------------
   5. ORTA BÖLÜM — konu oluştur, sıralama, kartlar
   ------------------------------------------------------------ */

/* "Konu oluştur" kutusu */
.createTitleMenu {
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-r-lg);
	box-shadow: var(--vb-shadow-xs);
	height: 62px;
}
.createTitleMenu:hover { box-shadow: var(--vb-shadow-sm); }

.createTitleMenu input {
	background: var(--vb-line-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") no-repeat 14px center;
	border: 1px solid transparent;
	border-radius: var(--vb-r-md);
	height: 40px;
	padding-left: 40px;
	font-family: var(--vb-font);
	font-size: 14px;
	color: var(--vb-ink-3);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.createTitleMenu input:hover {
	background-color: #fff;
	border-color: var(--vb-primary-200);
	box-shadow: var(--vb-shadow-xs);
}

/* Sıralama çubuğu — segment görünümü */
.sortBar {
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-r-lg);
	box-shadow: var(--vb-shadow-xs);
	height: 58px;
	padding: 0 10px;
}
.sortBar:hover { box-shadow: var(--vb-shadow-sm); }

.sortBar .left .sortButton,
.sortBar .right .sortButton {
	border-radius: var(--vb-r-pill);
	padding: 7px 16px;
	gap: 6px;
	transition: background 0.15s ease;
}

/* Eski PNG ikonlar yerine temiz metin segmentleri */
.sortBar .sortButton .icon { display: none; }

.sortBar .left .sortButton p,
.sortBar .right .sortButton p {
	font-family: var(--vb-font);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--vb-ink-3);
	padding: 0;
}

.sortBar .left .sortButton:hover,
.sortBar .right .sortButton:hover {
	background-color: var(--vb-line-soft) !important;
}
.sortBar .left .sortButton:active,
.sortBar .right .sortButton:active {
	background-color: var(--vb-primary-100) !important;
}

.sortBar .left .sortButton.selected {
	background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-primary-light) 100%) !important;
	box-shadow: 0 3px 10px rgba(14, 63, 131, 0.30);
}
.sortBar .left .sortButton.selected p,
.sortBar .left .sortButton p.selected {
	color: #fff;
}
.sortBar .left .sortButton.selected:hover {
	background: linear-gradient(135deg, var(--vb-primary-dark) 0%, var(--vb-primary) 100%) !important;
}

/* Konu kartları */
.post-item {
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-r-lg);
	box-shadow: var(--vb-shadow-xs);
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.post-item:hover {
	transform: translateY(-2px);
	border-color: var(--vb-primary-200);
	box-shadow: var(--vb-shadow-md);
}

.post-item .post-box { border-radius: var(--vb-r-lg); }

/* Oy sütunu */
.left-post-box {
	background: #fbfcfe;
	border-right: 1px solid var(--vb-line-soft);
	border-top-left-radius: var(--vb-r-lg);
	border-bottom-left-radius: var(--vb-r-lg);
	width: 52px;
}

/* Üst meta satırı: width:100% + padding taşmasını önle */
.right-post-box-header-start {
	box-sizing: border-box;
}

/* Kategori etiketi: "Üst Kategori -> Alt" metni rozet olur */
.right-post-box .right-post-box-header .subName {
	font-family: var(--vb-font);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--vb-primary);
	background: var(--vb-primary-050);
	border: 1px solid var(--vb-primary-100);
	padding: 3px 10px;
	border-radius: var(--vb-r-pill);
	white-space: nowrap;
}

.right-post-box .right-post-box-header .author,
.right-post-box .right-post-box-header .creationDate {
	font-family: var(--vb-font);
	color: var(--vb-ink-3);
	font-size: 11.5px;
}

/* Başlık ve içerik tipografisi */
.right-post-box .right-post-box-headline .headline-text {
	font-family: var(--vb-font);
	font-size: 16.5px;
	font-weight: 650;
	color: var(--vb-ink);
	line-height: 1.45;
	letter-spacing: -0.01em;
}
.post-item:hover .right-post-box .right-post-box-headline .headline-text {
	color: var(--vb-primary);
}

.right-post-box .right-post-box-content .content-text {
	font-family: var(--vb-font) !important;
	font-size: 13.5px;
	color: var(--vb-ink-2);
	line-height: 1.6;
}
.right-post-box .right-post-box-content .content-text a {
	font-family: var(--vb-font) !important;
	color: var(--vb-primary-light);
}

/* Kart altı aksiyon çipleri */
.right-post-box .right-post-box-footer {
	padding: 4px 10px 10px;
	gap: 6px;
}
.right-post-box .right-post-box-footer .post-footer-div {
	border-radius: var(--vb-r-sm);
	padding: 4px 10px;
	transition: background 0.15s ease;
}
.right-post-box-footer .post-footer-div:hover {
	background-color: var(--vb-line-soft);
}
.right-post-box .right-post-box-footer .post-footer-div h4 {
	font-family: var(--vb-font);
	font-size: 12px;
	font-weight: 600;
	color: var(--vb-ink-3);
}

/* Görünürlük rozetleri (Herkes / VUK 5) — inline stilleri yumuşat */
.visibility-badge {
	box-shadow: none !important;
	font-family: var(--vb-font) !important;
}

/* Daha fazla göster */
#load-more {
	display: block;
	margin: 8px auto 24px;
	padding: 11px 32px;
	background: var(--vb-surface);
	color: var(--vb-primary);
	border: 1px solid var(--vb-primary-200);
	border-radius: var(--vb-r-pill);
	font-family: var(--vb-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--vb-shadow-xs);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
#load-more:hover {
	background: var(--vb-primary);
	color: #fff;
	border-color: var(--vb-primary);
	box-shadow: var(--vb-shadow-md);
}

/* Boş durum kutusu */
.post-container .alert.alert-info {
	background: var(--vb-primary-050);
	border: 1px dashed var(--vb-primary-200);
	color: var(--vb-primary-dark);
	border-radius: var(--vb-r-lg);
	padding: 28px 20px;
	text-align: center;
}
.post-container .alert.alert-info h4 {
	font-family: var(--vb-font);
	font-size: 15px;
	font-weight: 500;
}

/* ------------------------------------------------------------
   6. SAĞ PANEL
   ------------------------------------------------------------ */
.right-sidebar .create-title-container {
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-r-lg);
	box-shadow: var(--vb-shadow-xs);
	overflow: hidden;
	background: var(--vb-surface);
}

.right-sidebar .home-headline {
	font-family: var(--vb-font);
	font-weight: 700;
	color: var(--vb-ink);
}
.right-sidebar .home-content {
	font-family: var(--vb-font);
	color: var(--vb-ink-3);
	font-weight: 400;
	line-height: 1.55;
}

.right-sidebar .home-create {
	font-family: var(--vb-font);
	font-weight: 600;
	border-radius: var(--vb-r-pill);
	transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.right-sidebar a.home-create.create-post {
	background: linear-gradient(135deg, var(--vb-primary) 0%, var(--vb-primary-light) 100%);
	color: #fff;
	border: none;
	box-shadow: 0 3px 10px rgba(14, 63, 131, 0.28);
}
.right-sidebar a.home-create.create-post:hover {
	background: linear-gradient(135deg, var(--vb-primary-dark) 0%, var(--vb-primary) 100%);
	box-shadow: var(--vb-shadow-md);
}
.right-sidebar button.home-create.create-community {
	background: var(--vb-surface);
	color: var(--vb-primary);
	border: 1px solid var(--vb-primary-200);
}
.right-sidebar button.home-create.create-community:hover {
	background: var(--vb-primary-050);
}

/* ------------------------------------------------------------
   7. GLOBAL BİLEŞENLER — buton, form, modal, tablo, toast
   ------------------------------------------------------------ */

/* Bootstrap birincil butonlar marka rengine çekilir */
.btn { border-radius: var(--vb-r-sm); font-weight: 600; }
.btn-primary {
	background-color: var(--vb-primary);
	border-color: var(--vb-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--vb-primary-dark);
	border-color: var(--vb-primary-dark);
}
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: var(--vb-ring);
}

/* Form elemanları */
.form-control {
	border-radius: var(--vb-r-sm);
	border-color: var(--vb-line);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
	border-color: var(--vb-primary-light);
	box-shadow: var(--vb-ring);
}

/* Yorum kutusu */
.hoverArea .comment-box,
.submit-comment .comment-box {
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-r-md);
	font-family: var(--vb-font);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hoverArea .comment-box:focus,
.submit-comment .comment-box:focus {
	border-color: var(--vb-primary-light);
	box-shadow: var(--vb-ring);
}

/* Modallar */
.modal-content {
	border: none;
	border-radius: var(--vb-r-lg);
	box-shadow: var(--vb-shadow-lg);
}
.modal-header {
	border-bottom: 1px solid var(--vb-line-soft);
	border-radius: var(--vb-r-lg) var(--vb-r-lg) 0 0;
}
.modal-footer {
	border-top: 1px solid var(--vb-line-soft);
	border-radius: 0 0 var(--vb-r-lg) var(--vb-r-lg);
}

/* DataTables / genel tablolar */
table.dataTable thead th,
table.dataTable thead td {
	background: #f8fafc;
	color: var(--vb-ink-2);
	border-bottom: 1px solid var(--vb-line);
	font-weight: 600;
}
table.dataTable tbody tr:hover {
	background-color: var(--vb-primary-050);
}

/* Alt bilgi şeridi */
#footer {
	background: var(--vb-primary-darker);
	box-shadow: none;
}

/* ------------------------------------------------------------
   8. YUKARI ÇIK BUTONU (theme.js enjekte eder)
   ------------------------------------------------------------ */
#vbBackToTop {
	position: fixed;
	right: 20px;
	bottom: 24px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vb-primary);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: var(--vb-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
	z-index: 1200;
	font-size: 15px;
}
#vbBackToTop.vb-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#vbBackToTop:hover { background: var(--vb-primary-light); }

/* ------------------------------------------------------------
   9. RESPONSIVE DÜZELTMELER VE İYİLEŞTİRMELER
   ------------------------------------------------------------ */

/* — Yatay kaydırma hatalarının kalıcı çözümü — */
@media only screen and (max-width: 1023px) {
	/* styles.css'teki "html{width:fit-content}" kuralı mobilde yatay
	   kaydırmaya yol açıyordu */
	html { width: auto !important; }

	.main {
		height: auto !important;
		min-height: calc(100vh - 60px);
	}

	body { background-color: var(--vb-bg) !important; }
}

@media (max-width: 768px) {
	header {
		padding: 8px 12px;
		padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
	}

	.logo img { height: 34px; }

	/* Hamburger butonuna dokunma alanı */
	.mobile-menu-toggle {
		width: 40px;
		height: 40px;
		border-radius: var(--vb-r-sm);
		transition: background 0.15s ease;
	}
	.mobile-menu-toggle:active { background: rgba(255, 255, 255, 0.15); }

	/* Offcanvas sol menü: tepeden başlasın, beyaz panel + gölge */
	#menubar {
		top: 0;
		background: var(--vb-surface);
		box-shadow: var(--vb-shadow-lg);
		border-right: none;
		padding: 16px 14px;
		padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
		z-index: 1100;
	}

	.mobile-menu-backdrop {
		background: rgba(8, 37, 72, 0.45);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		z-index: 1050;
	}

	/* Menü elemanlarına daha rahat dokunma alanı */
	.app-menu a { padding: 12px 14px; font-size: 14px; }

	/* Kart köşeleri mobilde biraz daha sıkı */
	.post-item { border-radius: var(--vb-r-md); margin: 0; }
	.post-item .post-box { border-radius: var(--vb-r-md); }
	.post-item:hover { transform: none; }

	.sortBar { height: auto; min-height: 52px; padding: 4px 6px; }
	.sortBar .left { flex-wrap: wrap; }
	.sortBar .left .sortButton { padding: 8px 14px; }

	.createTitleMenu { height: 56px; }

	/* Yukarı çık butonu, menü daraltma ikonuyla çakışmasın */
	#vbBackToTop {
		right: 14px;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
		width: 42px;
		height: 42px;
	}
}

@media only screen and (max-width: 600px) {
	/* Giriş/Kayıt butonları alt alta değil yan yana — header kısalır */
	.user-controls {
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px;
	}
}

@media only screen and (max-width: 480px) {
	/* styles.css'te .center-box{min-width:430px} küçük telefonlarda
	   yatay taşmaya neden oluyordu */
	.center-box {
		min-width: 0 !important;
		width: 100% !important;
	}

	.right-post-box .right-post-box-headline .headline-text { font-size: 15px; }
	.right-post-box .right-post-box-content .content-text { font-size: 13px; }

	.user-controls .login-button,
	.user-controls .signup-button {
		padding: 8px 14px;
		font-size: 12.5px;
	}
}

/* ------------------------------------------------------------
   10. ERİŞİLEBİLİRLİK — hareket azaltma tercihi
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}