/* WowTurkce core.bundle.css — otomatik üretim; elle düzenlemeyin. */
/* Build: 2026-09-10T15:02:44+00:00 */

/* === assets/css/layout/base.css === */
/* --- 1. RESET & BASE --- */
*, ::before, ::after { box-sizing: border-box; }
html { overflow-y: scroll !important; overflow-x: hidden !important; scrollbar-gutter: stable !important; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { overflow-x: hidden !important; padding-right: 0 !important; margin-right: 0 !important; }
html.is-locked,html.fancybox-is-open,html.fancybox-is-lock{overflow-y:scroll !important;scrollbar-gutter:stable !important;}body.fancybox-active,body.compensate-for-scrollbar{padding-right:0 !important;margin-right:0 !important;}::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:.48s;animation-timing-function:cubic-bezier(0.33,0,0.2,1);animation-fill-mode:both;}::view-transition-old(root){z-index:1;animation-name:theme-fade-out;}::view-transition-new(root){z-index:2;animation-name:theme-fade-in;}@keyframes theme-fade-out{from{opacity:1}to{opacity:0}}@keyframes theme-fade-in{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important;}}::view-transition-group(theme-switch-toggle){animation-duration:.48s;animation-timing-function:cubic-bezier(0.22,1,0.36,1)}.theme-soft-veil{position:fixed;inset:0;z-index:10000;pointer-events:none;opacity:0;background:color-mix(in srgb,var(--background-color,#0b1220) 72%,#000 28%);transition:opacity .38s cubic-bezier(0.33,0,0.2,1)}.theme-soft-veil.is-in{opacity:.42}.theme-soft-veil.is-out{opacity:0;transition-duration:.42s}html.theme-switching #wowBgCanvas{opacity:0!important;visibility:hidden!important;pointer-events:none!important}html.theme-switching body :where(.btn,.card,.badge,a,button,.category-panel,.topic-list-item,.topic-card,.list-group-item,.form-control,.navbar-brand){transition:none!important;animation:none!important}html.theme-switching #mainNavbar{transition:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}html.theme-switching #themeSwitchToggle,html.theme-switching #themeSwitchToggle .slider-knob,html.theme-switching #themeSwitchToggle .knob-craters,html.theme-switching #themeSwitchToggle .decor-clouds,html.theme-switching #themeSwitchToggle .decor-stars{transition:background .48s cubic-bezier(0.22,1,0.36,1),border-color .48s cubic-bezier(0.22,1,0.36,1),box-shadow .48s cubic-bezier(0.22,1,0.36,1),transform .48s cubic-bezier(0.22,1,0.36,1),opacity .4s ease!important}html.theme-switching #themeSwitchToggle .cloud,html.theme-switching #themeSwitchToggle .decor-clouds-drift{transition:none!important}:root{--dark-bg:#070e1a;--glass-bg:rgba(255,255,255,0.7);--glass-border:rgba(255,255,255,0.4);--bg-overlay:rgba(0,0,0,0.08);--lm-bg:var(--background-color);--lm-card-bg:rgb(var(--background-color-rgb));--lm-card-border:rgba(var(--primary-color-rgb),0.25);--lm-text:var(--text-color);--lm-accent:var(--primary-color);--lm-accent2:var(--secondary-color);--lm-hover:rgba(var(--primary-color-rgb),0.12);--lm-nav-bg:rgba(var(--primary-color-rgb),var(--header-opacity,0.85));--lm-nav-border:rgba(var(--primary-color-rgb),0.3);--site-box-radius:4px;--bs-border-radius:4px;--bs-border-radius-sm:4px;--bs-border-radius-lg:4px;--bs-border-radius-xl:4px;--bs-border-radius-2xl:4px;}#mainNavbar{transition:background-color 0.28s cubic-bezier(0.4,0,0.2,1),box-shadow 0.28s cubic-bezier(0.4,0,0.2,1),border-color 0.28s cubic-bezier(0.4,0,0.2,1);background:var(--dm-nav-bg) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-bottom:1px solid var(--dark-section-header-color);box-shadow:0 8px 32px rgba(0,0,0,0.2);z-index:1030;}[data-bs-theme="light"] #mainNavbar{background:var(--lm-nav-bg) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-bottom:1px solid var(--section-header-color) !important;box-shadow:0 4px 24px rgba(var(--primary-color-rgb),0.15) !important;}[data-bs-theme="light"] .navbar-brand span{text-shadow:0 1px 2px rgba(255,255,255,0.4);}[data-bs-theme="light"] .auth-button{background:var(--lm-glass-accent) !important;border-color:var(--lm-glass-border) !important;color:var(--lm-text) !important;}[data-bs-theme="light"] .auth-button:hover{background:rgba(var(--primary-color-rgb),0.25) !important;color:var(--lm-text) !important;}[data-bs-theme="light"] .auth-button.filled{background:rgba(255,255,255,0.98) !important;color:#0f172a !important;border:1px solid rgba(0,0,0,0.12) !important;font-weight:600 !important;box-shadow:0 1px 3px rgba(0,0,0,0.12);}
[data-bs-theme="light"] .profile-name,[data-bs-theme="light"] .profile-role{color:#2c1e0f !important;}[data-bs-theme="light"] .notification-button,[data-bs-theme="light"] #darkModeToggle{background:var(--lm-glass-secondary) !important;border-color:var(--lm-glass-secondary-border) !important;color:var(--lm-text) !important;}body{display:flex;flex-direction:column;min-height:100vh;background:none;color:var(--text-color);font-family:var(--site-font-body);margin:0;}.text-muted { color: var(--lm-text-muted) !important; } .btn, .card, .badge, a, button {
    transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.18s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Arka plan: html üzerinde background-attachment:fixed yerine sabit ::before katmanı.
   Tema geçişinde fixed↔scroll / cover yeniden ölçeklenme sıçramasını önler (mobildeki yaklaşımın desktop’a taşınmış hali). */
html{
    background-color:var(--background-color);
    background-image:none;
    min-height:100vh;
}
html::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    min-height:100vh;
    z-index:-2;
    pointer-events:none;
    background-color:var(--background-color);
    background-image:linear-gradient(var(--bg-overlay,rgba(0,0,0,0.08)),var(--bg-overlay,rgba(0,0,0,0.08))),var(--pattern-day-url);
    background-size:100% 100%,var(--pattern-day-layer-size,cover);
    background-repeat:no-repeat,var(--pattern-day-layer-repeat,no-repeat);
    background-position:0 0,var(--pattern-day-layer-position,center center);
    background-origin:border-box,border-box;
}
html[data-bs-theme="dark"]{
    background-color:var(--dark-background-color)!important;
}
html[data-bs-theme="dark"]::before{
    background-color:var(--dark-background-color);
    background-image:linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.25)),var(--pattern-night-url);
    background-size:100% 100%,var(--pattern-night-layer-size,cover);
    background-repeat:no-repeat,var(--pattern-night-layer-repeat,no-repeat);
    background-position:0 0,var(--pattern-night-layer-position,center center);
}
body{background:transparent !important;}body::before{display:none;}main,.container.py-4{flex:1 0 auto;}
#main-content {
    padding-top: 0.75rem;
}
@media (max-width: 991.98px) {
    #main-content {
        padding-top: 0.25rem;
    }
}
@media (min-width:1200px){.container{max-width:1360px;}}@media (min-width:1400px){.container{max-width:1560px;}}/* ==============================================================   ULTRA-WIDE MONITOR SUPPORT (27" & 21:9 Displays)   ============================================================== */@media (min-width:1920px){body::before{background-size:640px 640px;}}.container,.container-fluid{position:relative;}.card, .category-panel, .updates-box {
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.15) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout style;
}

/* Premium glass effect - used selectively for high-visibility components to maintain performance */
.glass-effect-premium {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/*
 * Kaydırma performansı: backdrop-filter, özellikle sabit üst bar ve uzun kart listelerinde
 * her karede bulanık katman bileşiklemesi yapar; 30 FPS hissi yaratabilir.
 * Renkler theme-vars’ta zaten rgba — cam etkisi yerine düz yarı saydam katman yeterli.
 */
#mainNavbar,
#mainNavbar.navbar,
.footer,
[data-bs-theme="light"] .footer,
[data-bs-theme="dark"] .footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card:not(.glass-effect-premium) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-bs-theme="dark"] .card{background:var(--dm-card-bg) !important;border:1px solid rgba(var(--primary-color-rgb),0.2) !important;box-shadow:0 4px 24px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.04) !important;}.card-header .card-title{font-family:var(--site-font-title);font-weight:500;}[data-bs-theme="dark"] .card-header{background:var(--surface-card-header) !important;border-bottom:1px solid rgba(var(--primary-color-rgb),0.2) !important;color:var(--dark-text-color) !important;}[data-bs-theme="dark"] .card-footer{background:var(--surface-card-footer) !important;border-top:1px solid rgba(var(--primary-color-rgb),0.15) !important;}[data-bs-theme="light"] .card{background:var(--lm-card-bg) !important;border:1px solid var(--lm-card-border) !important;box-shadow:0 4px 20px rgba(var(--primary-color-rgb),0.12) !important;color:var(--lm-text) !important;}[data-bs-theme="light"] .card-header{background:var(--surface-card-header) !important;border-bottom:1px solid rgba(var(--primary-color-rgb),0.3) !important;color:var(--lm-text) !important;font-weight:500;}[data-bs-theme="light"] .card-footer{background:var(--surface-card-footer) !important;border-top:1px solid rgba(var(--primary-color-rgb),0.2) !important;}[data-bs-theme="light"] .form-control,[data-bs-theme="light"] .form-select{background-color:rgb(var(--background-color-rgb)) !important;border-color:rgba(var(--primary-color-rgb),0.4) !important;color:var(--lm-text) !important;}[data-bs-theme="light"] .form-control:focus,[data-bs-theme="light"] .form-select:focus{background-color:rgb(var(--background-color-rgb)) !important;border-color:var(--lm-accent) !important;box-shadow:0 0 0 0.2rem rgba(var(--primary-color-rgb),0.2) !important;color:var(--lm-text) !important;}[data-bs-theme="light"] .form-control::placeholder{color:rgba(var(--text-color-rgb),0.6) !important;}[data-bs-theme="light"] .form-label{color:var(--lm-text) !important;font-weight:500;}.footer{margin-top:2rem !important;background:var(--dm-footer-bg) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;color:var(--text-color);border-top:1px solid var(--dark-section-header-color);padding:2rem 0 1rem 0;position:relative;z-index:2;}[data-bs-theme="light"] .footer{background:var(--lm-footer-bg) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-top:1px solid var(--section-header-color) !important;color:var(--lm-text) !important;}
[data-bs-theme="dark"] .footer{background:var(--dm-footer-bg) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-top:1px solid var(--dark-section-header-color) !important;box-shadow:0 -10px 40px rgba(0,0,0,0.4);}.footer-minimalist-bottom{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding-top:2rem;border-top:1px solid rgba(var(--primary-color-rgb),0.1);}.footer-brand-mini{display:flex;align-items:center;gap:1rem;}.footer-logo-minimal{max-height:40px;filter:drop-shadow(0 0 5px rgba(var(--primary-color-rgb),0.3));}.brand-name-mini{font-family:var(--site-font-title);font-size:1.5rem;font-weight:700;letter-spacing:1px;background:linear-gradient(to bottom,#fff,#ccc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));}[data-bs-theme="light"] .brand-name-mini{background:linear-gradient(to bottom,var(--lm-text),var(--lm-text-muted));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}.footer-copyright-mini{text-align:center;font-size:0.9rem;color:inherit;}.footer-divider{display:none;}.footer-widget.glass-card{background:var(--lm-card-bg);border:1px solid var(--lm-glass-border);border-radius:4px;}.text-accent{color:var(--lm-accent);}[data-bs-theme="dark"] .text-accent{color:var(--dark-primary-color);}.bg-accent{background-color:var(--lm-accent) !important;}[data-bs-theme="dark"] .bg-accent{background-color:var(--dark-primary-color) !important;}.stats-container{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto;gap:2rem;padding:0 2rem;}.stats-box{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--lm-card-bg);border:1px solid var(--lm-glass-border);border-radius:4px;transition:all 0.2s ease;}[data-bs-theme="light"] .stats-box{background:var(--lm-card-bg) !important;border-color:var(--lm-glass-border) !important;}
.stats-box:hover{transform:translateY(-2px);}.icon-wrapper{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;flex-shrink:0;}.icon-wrapper i{font-size:1.1rem;color:white;}.icon-wrapper.blue{background:linear-gradient(135deg,#4e73df,#224abe);}.icon-wrapper.green{background:linear-gradient(135deg,#1cc88a,#13855c);}.icon-wrapper.purple{background:linear-gradient(135deg,#7c4dff,#5627ff);}.icon-wrapper.orange{background:linear-gradient(135deg,#f6c23e,#dfa408);}.stats-content{min-width:0;}.stats-number{font-size:1.25rem;font-weight:600;color:var(--secondary-text-color-hex) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stats-label{font-size:0.8rem;color:var(--text-color) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stats-user{font-size:1.1rem;font-weight:500;color:var(--secondary-text-color-hex) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-bs-theme="dark"] .stats-number,
[data-bs-theme="dark"] .stats-user{color:var(--dark-secondary-text-color-hex) !important;}
.footer-copyright{text-align:center;font-size:0.85rem;opacity:0.5;margin-top:2rem;}[data-bs-theme="dark"] .stats-box{background:var(--dm-card-bg) !important;border-color:var(--dm-glass-border) !important;}@media (max-width:992px){.stats-container{grid-template-columns:repeat(2,1fr);gap:1rem;}}@media (max-width:576px){.stats-container{grid-template-columns:1fr;padding:0 1rem;}.stats-box{padding:0.5rem 0.75rem;}.icon-wrapper{width:36px;height:36px;}.stats-number{font-size:1.1rem;}}.navbar{min-height:64px;padding:0.42rem 0;z-index:1030;position:relative;overflow:visible !important;}.navbar>.container,.navbar>.container-fluid{overflow:visible !important;}.navbar-brand{font-weight:700;font-size:1.5rem;color:#fff !important;text-decoration:none;display:flex;align-items:center;gap:0.25rem;transition:transform 0.2s ease;font-family:var(--site-font-body);letter-spacing:-0.025em;text-shadow:0 2px 4px rgba(0,0,0,0.1);}.navbar-brand:hover{transform:translateY(-1px);color:#fff !important;}.navbar-brand img{border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform 0.2s ease;}
.site-logo-img{border-radius:0 !important;box-shadow:none !important;background:transparent !important;}
/* Rank Colors */
.bg-rank-crown { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: #fff; }
.bg-rank-medal { background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%); color: #fff; }
.bg-rank-star { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: #fff; }
.bg-rank-trophy { background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%); color: #fff; }
.bg-rank-award { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
.bg-rank-shield { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: #fff; }
.bg-rank-gem { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: #fff; }
.bg-rank-certificate { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); color: #fff; }

/* Profile Card Enhancements */
.profile-card-premium {
    background: var(--lm-card-bg);
    border: 1px solid var(--lm-glass-border);
    border-radius: 4px;
    overflow: hidden;
}

[data-bs-theme="dark"] .profile-card-premium {
    background: var(--dm-card-bg);
}
.profile-button{display:flex;align-items:center;gap:0.5rem;padding:0;border:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;box-shadow:none;color:inherit;cursor:pointer}.profile-button:hover,.profile-button:focus-visible{background:transparent !important;border-color:transparent !important;transform:none;box-shadow:none !important}.profile-avatar{width:32px;height:32px;border-radius:var(--site-box-radius,4px);object-fit:cover;aspect-ratio:1/1;}.profile-info{text-align:left;line-height:1.2;}.profile-name{font-weight:500;color:var(--text-color);}.profile-role{font-size:0.75rem;opacity:0.8;}.notification-menu{width:min(320px,calc(100vw - 1rem));max-width:320px;}.notifications-list{background-color:transparent;}.notification-item{background-color:transparent;transition:background-color 0.2s ease;max-width:100%;overflow:hidden;color:var(--bs-body-color) !important;cursor:pointer;}.notification-item:hover{background-color:rgba(var(--bs-primary-rgb),0.1);}.notification-item .notification-text,.notification-item .text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%;}.notification-item .flex-grow-1{min-width:0;}.notification-item .notification-text,.notification-item .text-truncate,.notification-item .notification-time{word-break:break-word;overflow-wrap:anywhere;}.notification-item.unread-notification{background-color:rgba(var(--primary-color-rgb),0.06) !important;}[data-bs-theme="dark"] .notification-item:hover{background:rgba(255,255,255,0.1) !important;}[data-bs-theme="dark"] .notification-item.unread-notification{background:rgba(255,255,255,0.05) !important;}[data-bs-theme="dark"] .notification-menu .border-top{border-color:rgba(255,255,255,0.1) !important;}#darkModeToggle{position:relative;padding:0.625rem;background:var(--dm-glass-secondary);border:1px solid var(--dm-glass-secondary-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:50%;color:#fff;cursor:pointer;transition:all 0.3s ease;width:44px;height:44px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.1);}#darkModeToggle:hover{background:var(--dm-glass-secondary-border);border-color:var(--dm-glass-secondary-border);transform:translateY(-2px) rotate(15deg);box-shadow:0 8px 25px rgba(0,0,0,0.15);}.auth-button{padding:0.625rem 1.25rem;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:4px;color:#fff;cursor:pointer;transition:all 0.3s ease;text-decoration:none;display:flex;align-items:center;gap:0.75rem;font-size:1rem;font-weight:500;white-space:nowrap;box-shadow:0 44px 12px rgba(0,0,0,0.1);}.auth-button:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.15);}.auth-button.filled{background:rgba(255,255,255,0.95);color:var(--primary-color);border-color:rgba(255,255,255,0.3);font-weight:600;}
.auth-button.filled:hover{background:rgba(255,255,255,1);color:var(--primary-color);border-color:rgba(255,255,255,0.5);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.2);}@media (max-width:768px){.navbar{min-height:56px;padding:0.38rem 0;}.navbar-brand{font-size:1.25rem;gap:0.2rem;}.profile-info{display:none !important;}.header-buttons-group{gap:0.5rem !important;}}@media (max-width:576px){.navbar>.container{flex-wrap:nowrap !important;padding-left:0.5rem;padding-right:0.5rem;}.header-buttons-group{gap:0.25rem !important;flex-shrink:0;}.auth-button{padding:0.5rem 0.875rem;font-size:0.9rem;gap:0.5rem;}.profile-button{padding:0;gap:0.35rem}.notification-button,#darkModeToggle{width:40px;height:40px;padding:0.5rem;}.navbar-brand{font-size:1.1rem;gap:0.15rem;flex-grow:1;min-width:0;margin-right:0.5rem;}.navbar-brand span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}.navbar-brand img{max-height:32px !important;flex-shrink:0;}}.custom-dropdown{position:relative;}.custom-dropdown .dropdown-menu{min-width:220px;border:1px solid rgba(255,255,255,0.12);border-radius:4px;box-shadow:0 15px 35px rgba(0,0,0,0.6);background:var(--bs-card-bg, #161a20) !important;overflow:visible;z-index:1070;padding:0.5rem 0;}[data-bs-theme="light"] .custom-dropdown .dropdown-menu{background:var(--lm-card-bg) !important;border-color:var(--lm-card-border) !important;box-shadow:0 10px 30px rgba(var(--primary-color-rgb),0.2) !important;}.custom-dropdown .dropdown-menu.show{animation:fadeInSimple 0.2s ease-out;}@keyframes fadeInSimple{from{opacity:0;}to{opacity:1;}}.custom-dropdown .dropdown-toggle::after{display:none !important;}.custom-dropdown .dropdown-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1.25rem;color:var(--dm-text,#f5f6fa);text-decoration:none;transition:all 0.2s ease;border:none;background:transparent;width:100%;text-align:left;}[data-bs-theme="light"] .custom-dropdown .dropdown-item{color:var(--lm-text) !important;}[data-bs-theme="light"] .custom-dropdown .dropdown-item:hover{background:rgba(var(--primary-color-rgb),0.06) !important;color:var(--lm-text) !important;}.custom-dropdown .dropdown-item:hover{background:rgba(var(--primary-color-rgb),0.08);}.custom-dropdown .dropdown-item i{width:18px;text-align:center;font-size:1rem;color:inherit;opacity:0.8;transition:all 0.2s ease;}.custom-dropdown .dropdown-item:hover i{color:var(--primary-color);opacity:1;}.custom-dropdown .dropdown-item .badge{margin-left:auto;font-size:0.7rem;padding:0.25rem 0.5rem;}.custom-dropdown .dropdown-divider{margin:0.5rem 0;border-color:rgba(255,255,255,0.1);}.badge{--badge-color:#6c757d;font-family:var(--site-font-body) !important;font-size:0.65rem !important;font-weight:600 !important;text-transform:uppercase;letter-spacing:0.03em;padding:0.3em 0.6em !important;border-radius:4px !important;display:inline-flex;align-items:center;gap:4px;position:relative;background:rgba(var(--dark-primary-color-rgb),0.28) !important;border:1px solid rgba(255,255,255,0.16) !important;color:#a0b8cf !important;transition:all 0.2s ease;text-shadow:none !important;box-shadow:none !important;}.badge-premium{background:rgba(var(--badge-color),0.1) !important;border:1px solid rgba(var(--badge-color),0.3) !important;color:var(--badge-color) !important;box-shadow:none !important;filter:none !important;}[data-bs-theme="dark"] .badge-premium{background:rgba(0,0,0,0.25) !important;border:1px solid var(--badge-color) !important;color:var(--badge-color) !important;}[data-bs-theme="light"] .badge-premium{background:rgba(255,255,255,0.5) !important;border:1px solid var(--badge-color) !important;color:var(--badge-color) !important;}.badge-premium i{color:var(--badge-color);}[data-bs-theme="light"] .badge:not(.badge-premium){background:rgba(var(--primary-color-rgb),0.22) !important;border-color:rgba(var(--primary-color-rgb),0.32) !important;color:var(--lm-text) !important;box-shadow:none;text-shadow:none;}.badge:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 4px 8px rgba(0,0,0,0.3),inset 0 1px 1px rgba(255,255,255,0.3);}.rounded-pill{border-radius:var(--site-box-radius,4px) !important;}.badge img{width:14px;height:14px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.5));}.btn-primary{background:var(--btn-bg) !important;border:1px solid rgba(var(--btn-bg-rgb),0.2) !important;color:var(--btn-text) !important;padding:0.55rem 1.4rem;border-radius:4px;font-size:0.82rem;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;transition:all 0.3s ease;}.btn-primary:hover,.btn-primary:focus{filter:brightness(1.1);transform:translateY(-1px);}.btn-primary:active{transform:translateY(0);}#wowBgCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:-1;opacity:0;transition:opacity 1s ease;}[data-bs-theme="dark"] #wowBgCanvas{opacity:1;}body>*:not(#wowBgCanvas):not(#mainNavbar):not(.fancybox__container):not(.glightbox-container):not(.modal):not(.modal-backdrop){position:relative;}/* ==============================================================   INDEX.PHP SPECIFIC STYLES (Migrated from inline)   ============================================================== */.updates-box .card-body{--bs-card-spacer-y:0;--bs-card-spacer-x:0;padding:0;background-color:var(--bs-card-bg);border-radius:0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);}.updates-box .list-group-item{background-color:var(--bs-card-bg);border-color:var(--bs-border-color);cursor:pointer;}.updates-box .list-group-item:hover{background-color:var(--bs-gray-100);}[data-bs-theme=dark] .updates-box .list-group-item:hover{background-color:var(--bs-gray-800);}.updates-box .list-group-item:last-child{border-bottom:none;border-radius:0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);}.recent-topics.card{background-color:transparent;}.recent-topics .card-body{background-color:transparent;}.search-box.card{background-color:transparent;}.search-box .card-body{background-color:transparent;}.pagination .page-link{color:var(--bs-gray-700);background-color:transparent;padding:0.25rem 0.5rem;font-size:0.875rem;min-width:28px;text-align:center;border:none;}.pagination .page-link:hover{background-color:var(--bs-gray-100);color:var(--bs-primary);border-radius:4px;}.pagination .page-item.active .page-link{background-color:var(--bs-primary);color:#fff;border-radius:4px;font-weight:500;}.pagination .page-item.disabled .page-link{color:var(--bs-gray-400);background-color:transparent;cursor:not-allowed;}.pagination.gap-1 .page-item:not(:last-child){margin-right:0.15rem;}.pagination .page-link i.fas{font-size:0.75rem;}.topic-card{border-radius:4px;overflow:hidden;background:var(--bs-card-bg);border:1px solid var(--bs-border-color);transition:box-shadow 0.3s ease;position:relative;z-index:1;transform:none;}[data-bs-theme=dark] .topic-card{border-color:transparent;}[data-bs-theme=dark] .topic-card::after{content:"";position:absolute;inset:0;border-radius:4px;padding:1px;background:linear-gradient(135deg,var(--dark-primary-color),var(--dark-secondary-color),var(--dark-primary-color));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2;}[data-bs-theme=dark] .topic-card:hover{background:var(--dm-card-bg);box-shadow:0 12px 28px rgba(0,0,0,0.55);transform:translateY(-2px);}[data-bs-theme=light] .topic-card::after{content:"";position:absolute;inset:0;border-radius:4px;padding:1px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color),var(--primary-color));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2;opacity:0.6;transition:opacity 0.3s ease;}[data-bs-theme=light] .topic-card{border-color:transparent;}[data-bs-theme=light] .topic-card:hover{background:var(--lm-card-bg);box-shadow:0 10px 24px rgba(var(--secondary-color-rgb),0.12);transform:translateY(-2px);}[data-bs-theme=light] .topic-card:hover::after{opacity:1;}[data-bs-theme=dark] .topic-card .card-title,[data-bs-theme=dark] .topic-card .card-title a{color:var(--secondary-text-color) !important;text-decoration:none;}
[data-bs-theme=dark] .topic-card .card-text{color:var(--dm-text-muted);opacity:0.85;}[data-bs-theme=dark] .topic-card .topic-footer span,[data-bs-theme=dark] .topic-card small.text-muted{color:var(--dm-text-muted);}[data-bs-theme=light]{--bs-primary:var(--primary-color);--bs-primary-rgb:var(--primary-color-rgb);--bs-link-color:color-mix(in srgb,var(--primary-color) 88%,#0f172a 12%);--bs-link-hover-color:color-mix(in srgb,var(--primary-color) 70%,#0f172a 30%);--bs-body-bg:var(--background-color);--bs-body-color:var(--text-color);--bs-secondary-bg:rgba(var(--primary-color-rgb),0.6);--bs-tertiary-bg:rgba(var(--primary-color-rgb),0.4);--bs-border-color:rgba(var(--primary-color-rgb),0.3);--bs-card-bg:var(--lm-card-bg);--bs-card-border-color:rgba(var(--primary-color-rgb),0.25);}[data-bs-theme=dark]{--primary-color:#3498db;--text-muted:var(--dm-text-muted);}[data-bs-theme=light] .topic-card .card-title a{color:var(--secondary-text-color-hex) !important;text-decoration:none;}
[data-bs-theme=light] .topic-card:hover .card-title a{color:var(--secondary-text-color-hex) !important;}[data-bs-theme=dark] .topic-card .card-title a{color:var(--dark-secondary-text-color-hex) !important;text-decoration:none;}[data-bs-theme=dark] .topic-card:hover .card-title a{color:var(--dark-secondary-text-color-hex) !important;}[data-bs-theme=light] .topic-card .card-text{color:var(--lm-text-muted);opacity:0.85;}[data-bs-theme=light] .topic-card .topic-footer span,[data-bs-theme=light] .topic-card small.text-muted{color:var(--lm-text-muted);}
[data-bs-theme=light] .topic-card .topic-divider,[data-bs-theme=light] .topic-card .topic-divider-bottom{background:linear-gradient(90deg,transparent 0%,rgba(var(--primary-color-rgb),0.3) 50%,transparent 100%);}[data-bs-theme=light] .list-group-item{background-color:var(--lm-card-bg);border-color:var(--lm-glass-border);color:var(--lm-text);}[data-bs-theme=light] .list-group-item:hover{background-color:rgba(var(--primary-color-rgb),0.85);color:var(--text-color);}[data-bs-theme=light] .list-group-item.active{background-color:rgba(var(--primary-color-rgb),0.85);border-color:rgba(var(--primary-color-rgb),0.6);color:#fff;}[data-bs-theme=light] .table{color:var(--text-color) !important;--bs-table-bg:rgba(var(--background-color-rgb),0.5);--bs-table-striped-bg:rgba(var(--primary-color-rgb),0.4);--bs-table-hover-bg:rgba(var(--primary-color-rgb),0.25);--bs-table-border-color:rgba(var(--primary-color-rgb),0.2);}[data-bs-theme=light] .page-link{background-color:rgba(var(--background-color-rgb),0.85) !important;border-color:rgba(var(--primary-color-rgb),0.3) !important;color:var(--primary-color) !important;}[data-bs-theme=light] .page-link:hover{background-color:rgba(var(--primary-color-rgb),0.5) !important;color:var(--text-color) !important;}[data-bs-theme=light] .page-item.active .page-link{background-color:var(--primary-color) !important;border-color:rgba(var(--primary-color-rgb),0.72) !important;color:#fff !important;}[data-bs-theme=light] .alert-primary{background-color:rgba(var(--primary-color-rgb),0.2) !important;border-color:rgba(var(--primary-color-rgb),0.4) !important;color:var(--text-color) !important;}[data-bs-theme=light] .dropdown-menu{background-color:var(--lm-card-bg) !important;border-color:var(--lm-card-border) !important;box-shadow:0 8px 24px rgba(var(--primary-color-rgb),0.18) !important;}[data-bs-theme=light] .dropdown-item{color:var(--lm-text) !important;}[data-bs-theme=light] .dropdown-item:hover{background-color:var(--lm-hover) !important;color:var(--lm-text) !important;}[data-bs-theme=light] .dropdown-divider{border-color:rgba(var(--primary-color-rgb),0.2) !important;}/* ==============================================================   PREMIUM UPDATE MODAL STYLES   ============================================================== */body.modal-open{overflow:hidden !important;padding-right:0 !important;}.modal-backdrop.update-backdrop-premium{background-color:rgba(var(--background-color-rgb),0.7) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;z-index:1040 !important;}.modal.update-modal-premium{z-index:1060 !important;left:0 !important;right:0 !important;}.modal.update-modal-premium .modal-dialog{max-width:600px;margin-left:auto !important;margin-right:auto !important;}.modal.update-modal-premium .modal-content{background:var(--dm-card-bg) !important;border:1px solid rgba(var(--primary-color-rgb),0.2) !important;box-shadow:0 15px 50px rgba(0,0,0,0.8),0 0 30px rgba(var(--primary-color-rgb),0.1) !important;border-radius:4px !important;overflow:hidden;}[data-bs-theme=light] .modal.update-modal-premium .modal-content{background:var(--lm-card-bg) !important;border:1px solid var(--lm-card-border) !important;box-shadow:0 15px 50px rgba(var(--primary-color-rgb),0.2),0 0 30px rgba(var(--primary-color-rgb),0.05) !important;}.modal.update-modal-premium .modal-header{background:var(--surface-card-header) !important;border-bottom:1px solid rgba(var(--primary-color-rgb),0.2) !important;padding:1.5rem;position:relative;color:var(--dark-text-color) !important;}[data-bs-theme=light] .modal.update-modal-premium .modal-header{background:var(--surface-card-header) !important;border-bottom:1px solid var(--lm-card-border) !important;color:var(--lm-text) !important;}.modal.update-modal-premium .modal-title{font-weight:700;letter-spacing:0.5px;display:flex;align-items:center;gap:12px;}.modal.update-modal-premium .modal-body{padding:2rem;line-height:1.7;font-size:1.05rem;}.modal.update-modal-premium .update-content-text{color:var(--dark-text-color);}[data-bs-theme=light] .modal.update-modal-premium .update-content-text{color:var(--lm-text);}.modal.update-modal-premium .update-meta{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(var(--dark-primary-color-rgb),0.15);display:flex;justify-content:space-between;align-items:center;}[data-bs-theme=light] .modal.update-modal-premium .update-meta{border-top-color:rgba(var(--primary-color-rgb),0.15);}.modal.update-modal-premium .btn-close{filter:invert(1) grayscale(100%) brightness(200%);opacity:0.6;transition:all 0.3s ease;}[data-bs-theme=light] .modal.update-modal-premium .btn-close{filter:none;opacity:0.5;}.modal.update-modal-premium .btn-close:hover{opacity:1;transform:rotate(90deg);}.modal.update-modal-premium.fade .modal-dialog{transform:scale(0.9) translateY(20px);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);}.modal.update-modal-premium.show .modal-dialog{transform:scale(1) translateY(0);}.modal.update-modal-premium .modal-body::-webkit-scrollbar{width:6px;}.modal.update-modal-premium .modal-body::-webkit-scrollbar-thumb{background:rgba(var(--primary-color-rgb),0.3);border-radius:4px;}.topic-owner-avatar img{transition:transform 0.3s ease;}.topic-owner-avatar img:hover{transform:scale(1.1) rotate(5deg);}.sidebar-recent-comments .list-group-item{transition:all 0.2s ease;background:transparent !important;}.sidebar-recent-comments .list-group-item:hover{background:rgba(var(--primary-color-rgb),0.05) !important;transform:translateX(2px);}[data-bs-theme="dark"] .sidebar-recent-comments .list-group-item:hover{background:rgba(var(--primary-color-rgb),0.08) !important;}.sidebar-recent-comments .list-group-item:last-child{border-bottom:none !important;}#siteBrandContainer{text-decoration:none !important;}.brand-wrapper{display:flex;align-items:center;gap:12px;}.site-logo-img{max-height:36px;width:auto;display:block;}.site-logo-img.is-wide{max-height:50px !important;width:auto !important;}.brand-icon-fallback{width:32px;height:32px;background:var(--primary-color);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;}.brand-text-wrapper{display:flex;align-items:center;}.brand-name-text{font-family:var(--site-font-title);font-weight:700;font-size:1.35rem;letter-spacing:0.5px;color:var(--text-color);text-shadow:1px 1px 2px rgba(0,0,0,0.8);transition:color 0.3s ease;line-height:1;padding-top:4px;}
[data-bs-theme="dark"] .brand-name-text{color:var(--text-color);}
[data-bs-theme="light"] .brand-name-text{color:var(--text-color);text-shadow:none;}.brand-wrapper:hover .brand-name-text{filter:brightness(1.2);}@media (max-width:768px){.brand-name-text{font-size:0.95rem;padding-top:1px;letter-spacing:0.2px;}.site-logo-img{max-height:22px;}.site-logo-img.is-wide{max-height:32px !important;}.brand-wrapper{gap:6px;}}.ql-align-center{text-align:center;}.ql-align-right{text-align:right;}.ql-align-justify{text-align:justify;}.ql-direction-rtl{direction:rtl;text-align:inherit;}.ql-indent-1{padding-left:3em;}.ql-indent-2{padding-left:6em;}.ql-indent-3{padding-left:9em;}.ql-indent-4{padding-left:12em;}.ql-indent-5{padding-left:15em;}.ql-indent-6{padding-left:18em;}.ql-indent-7{padding-left:21em;}.ql-indent-8{padding-left:24em;}.cache-notice-wrapper{position:fixed !important;bottom:20px !important;left:50% !important;transform:translateX(-50%) translateY(120%);z-index:9999 !important;width:92%;max-width:420px;transition:opacity .24s ease,visibility .24s ease,transform .24s ease;visibility:hidden;opacity:0;pointer-events:none;}.cache-notice-wrapper.show{transform:translateX(-50%) translateY(0);visibility:visible;opacity:1;pointer-events:auto;}.cache-notice-card.category-panel{margin-bottom:0;}.cache-notice-header i{font-size:0.95rem;}.cache-notice-header span{font-size:0.8rem;text-transform:none;letter-spacing:normal;font-weight:400;}.cache-notice-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;padding:0.75rem 0.85rem;}@media (max-width:576px){.cache-notice-actions{justify-content:stretch;}.cache-notice-actions .btn-fantasy{flex:1;justify-content:center}.cache-notice-btn{min-height:34px!important;padding:.32rem .42rem!important;font-size:.74rem!important;line-height:1.22!important;gap:.35rem!important}.cache-notice-btn i{flex-shrink:0;width:.85rem;font-size:.72rem;text-align:center}}[data-bs-theme="dark"] [data-bs-theme="dark"] .skeleton{background:linear-gradient(90deg,rgba(var(--primary-color-rgb),0.05) 25%,rgba(var(--primary-color-rgb),0.1) 37%,rgba(var(--primary-color-rgb),0.05) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:4px;}@keyframes skeleton-loading{0%{background-position:100% 50%;}100%{background-position:0% 50%;}}#topicsLoadingPlaceholder .topic-card{border:1px solid rgba(var(--primary-color-rgb),0.1);background:rgba(var(--dm-glass-accent),0.02);}.skeleton-text{height:12px;margin-bottom:8px;width:100%;}.skeleton-title{height:20px;margin-bottom:12px;width:80%;}.skeleton-avatar{width:24px;height:24px;border-radius:50%;aspect-ratio:1/1;}.skeleton-badge{width:60px;height:18px;border-radius:4px;}
/* Icon & Avatar Fixes for LCP and Image Efficiency */
.avatar-40 { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; aspect-ratio: 1/1; }
.rank-icon-fixed { 
    width: 38px; 
    height: 38px; 
    object-fit: contain; 
    display: inline-block; 
    vertical-align: middle;
    aspect-ratio: 1/1;
}
.rpg-cat-img { width: 32px; height: 32px; object-fit: contain; aspect-ratio: 1/1; }

/* Profil avatarı (forum): assets/css/components/user-avatar-forum.css — main.css'ten hemen sonra yüklenir */

/* === assets/css/components/topic-list-classic.css === */
/* ==============================================================
   CLASSIC TOPIC LIST STYLES (Forum Classic) — zarif liste paneli
   ============================================================== */
.topic-list-classic {
    background: var(--lm-card-bg);
    border: 1px solid var(--lm-glass-border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .topic-list-classic {
    background: var(--dm-card-bg);
    border-color: var(--dm-glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.topic-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.07);
    transition: background 0.22s ease, border-color 0.22s ease;
    background: transparent;
}

.topic-list-item:last-child {
    border-bottom: none;
}

.topic-list-item:hover {
    background: rgba(var(--primary-color-rgb), 0.055);
    border-bottom-color: rgba(var(--primary-color-rgb), 0.1);
    box-shadow: none;
    transform: none;
}

[data-bs-theme="dark"] .topic-list-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .topic-list-item:hover {
    background: rgba(255, 255, 255, 0.035);
}

/* Leaderboard (index?view=leaderboard): dış kutu + satır çizgileri birincil metin rengiyle */
.topic-list-classic.leaderboard-fragment {
    border-color: rgba(var(--text-color-rgb), 0.2);
}

[data-bs-theme="dark"] .topic-list-classic.leaderboard-fragment {
    border-color: rgba(var(--dark-text-color-rgb), 0.2);
}

.topic-list-classic.leaderboard-fragment .topic-list-item {
    border-bottom-color: rgba(var(--text-color-rgb), 0.2);
}

.topic-list-classic.leaderboard-fragment .topic-list-item:hover {
    border-bottom-color: rgba(var(--text-color-rgb), 0.3);
}

[data-bs-theme="dark"] .topic-list-classic.leaderboard-fragment .topic-list-item {
    border-bottom-color: rgba(var(--dark-text-color-rgb), 0.2);
}

[data-bs-theme="dark"] .topic-list-classic.leaderboard-fragment .topic-list-item:hover {
    border-bottom-color: rgba(var(--dark-text-color-rgb), 0.3);
}

.topic-list-classic.leaderboard-fragment .leaderboard-user-head {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.42rem;
}

.topic-list-classic.leaderboard-fragment .leaderboard-user-name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--secondary-text-color-hex) !important;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.topic-list-classic.leaderboard-fragment .leaderboard-user-name:hover {
    color: var(--text-color) !important;
    opacity: 0.95;
}

[data-bs-theme="dark"] .topic-list-classic.leaderboard-fragment .leaderboard-user-name {
    color: var(--dark-secondary-text-color-hex) !important;
}

[data-bs-theme="dark"] .topic-list-classic.leaderboard-fragment .leaderboard-user-name:hover {
    color: var(--dark-text-color) !important;
}

.topic-list-classic.leaderboard-fragment .leaderboard-user-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Ana sayfa / konu akışı: arada ekstra liste kutusu yok — sadece satır kartları; dışarı site kartı (card-body) görünür */
.topic-list-classic.topic-list-feed,
#topicsSkeleton.topics-skeleton-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

[data-bs-theme="dark"] .topic-list-classic.topic-list-feed,
[data-bs-theme="dark"] #topicsSkeleton.topics-skeleton-block {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Konu kutusu satırı: sol şerit (ana sayfa / arama / profil aynı) */
.topic-list-feed {
    contain: layout style;
}

.topic-list-feed .topic-list-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--text-color) 18%, var(--background-color));
    padding: 0.52rem 1rem 0.52rem 0.58rem;
    background: var(--topic-feed-box-bg-light, var(--lm-card-bg));
    box-shadow: none;
}

.topic-list-feed .topic-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    border-radius: 0;
    background: var(--topic-feed-box-hover-border-light);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-color) 4%, var(--background-color));
}

.topic-list-feed .topic-list-item.topic-box-effect--onemli::before {
    z-index: 6;
}

[data-bs-theme="dark"] .topic-list-feed .topic-list-item:not(.is-unread-topic)::before {
    background: var(--topic-feed-box-hover-border-dark);
}

.topic-list-feed .topic-list-item.is-unread-topic::before {
    width: 3px;
    background: var(--wow-section-header-text);
    box-shadow: none;
    animation: topicFeedUnreadBarBlink 2.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

@keyframes topicFeedUnreadBarBlink {
    0%, 100% {
        opacity: 0.65;
        box-shadow: none;
    }
    50% {
        opacity: 1;
        box-shadow: none;
    }
}

/* Eski ad (blog-list vb.) */
@keyframes homeTopicUnreadBarBlink {
    0%, 100% {
        opacity: 0.65;
        box-shadow: none;
    }
    50% {
        opacity: 1;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topic-list-feed .topic-list-item.is-unread-topic::before {
        animation: none;
        opacity: 0.95;
        filter: none;
        box-shadow: none;
    }
}

html.is-scrolling .topic-list-feed .topic-list-item.is-unread-topic::before {
    animation: none;
    opacity: 1;
}

html.is-scrolling .topic-list-feed .topic-list-item {
    transition: none !important;
}

[data-bs-theme="dark"] .topic-list-feed .topic-list-item {
    background: var(--topic-feed-box-bg-dark, color-mix(in srgb, #ffffff 3%, var(--background-color)));
    border-color: color-mix(in srgb, var(--text-color) 20%, var(--background-color));
    box-shadow: none;
}

.topic-list-feed .topic-list-item:hover {
    border-color: var(--topic-feed-box-hover-border-light, color-mix(in srgb, var(--text-color) 30%, var(--background-color)));
    background: var(--topic-feed-box-hover-bg-light, color-mix(in srgb, var(--text-color) 4.5%, var(--background-color)));
    box-shadow: none;
}

[data-bs-theme="dark"] .topic-list-feed .topic-list-item:hover {
    border-color: var(--topic-feed-box-hover-border-dark, color-mix(in srgb, var(--text-color) 34%, var(--background-color)));
    background: var(--topic-feed-box-hover-bg-dark, color-mix(in srgb, #ffffff 4.5%, var(--background-color)));
    box-shadow: none;
}

/* Konu akışı — taban (dar ekran): flex; geniş ekranda grid ile aşağıda ezilir */
.topic-list-feed .topic-list-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.32rem 0.58rem;
}

.topic-list-feed .topic-list-content {
    flex: 1 1 0;
    min-width: 0;
}

.topic-list-feed .topic-list-meta.topic-list-meta-feed {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.topic-list-feed .topic-list-title-row {
    margin-bottom: 0;
}

#topicsSkeleton .topics-skeleton-row {
    padding: 0.52rem 1rem 0.52rem 0.58rem !important;
    margin: 0 !important;
    border: 1px solid rgba(var(--text-color-rgb), 0.22) !important;
    border-radius: 4px !important;
    background: rgba(var(--background-color-rgb), 0.35);
    box-sizing: border-box;
}

[data-bs-theme="dark"] #topicsSkeleton .topics-skeleton-row {
    border-color: rgba(var(--text-color-rgb), 0.22) !important;
    background: rgba(255, 255, 255, 0.03);
}

.topic-list-main {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex: 1;
    min-width: 0;
}

.topic-list-avatar {
    flex-shrink: 0;
}

.topic-list-content {
    min-width: 0;
}

.topic-list-title-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
    gap: 0.35rem 0.42rem;
}

.topic-list-status-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.topic-list-status-badges .user-badge-v4 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.topic-list-status-badges .user-badge-v4:hover {
    filter: brightness(1.06);
}

.topic-list-status-badges .user-badge-v4 .user-badge-v4-rank-icon i {
    font-size: 0.62rem !important;
}

.topic-list-status-badges .topic-list-status-group-inner img {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle;
}

[data-bs-theme="light"] .topic-list-status-badges .user-badge-v4:hover {
    filter: brightness(0.97);
}

@media (max-width: 767.98px) {
    .topic-list-status-badges {
        gap: 0.26rem;
        margin-top: 0.04rem;
    }

    .topic-list-status-badges .user-badge-v4.staff-role-badge-v4--icon-only {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 18px !important;
    }

    .topic-list-status-badges .user-badge-v4.staff-role-badge-v4--icon-only .user-badge-v4-rank-icon {
        width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
    }

    .topic-list-status-badges .user-badge-v4 .user-badge-v4-rank-icon i {
        font-size: 0.52rem !important;
    }

    .topic-list-status-badges .topic-list-status-group-inner img {
        width: 12px !important;
        height: 12px !important;
    }

    .topic-list-status-badges .topic-list-status-group-inner > .rounded {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
    }

    .topic-list-status-badges .topic-list-status-group-inner .fas,
    .topic-list-status-badges .topic-list-status-group-inner .far {
        font-size: 0.5rem !important;
    }
}

.topic-list-title-row .topic-list-title {
    flex: 1 1 0;
    min-width: 0;
}

.topic-list-title {
    font-size: 0.94rem !important;  /* h4 tarayıcı varsayılanını (1.5rem) eze */
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--site-font-body);
}

@media (max-width: 768px) {
    /* Mobilde konu listesi kartini biraz genislet ve basliklari kucult */
    .topic-list-classic {
        width: calc(100% + 12px);
        margin-left: -6px;
        margin-right: -6px;
        border-radius: 4px;
    }

    /* Konu akışı: ara kutu kalktığında negatif margine gerek yok */
    .topic-list-classic.topic-list-feed {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }

    .topic-list-item {
        padding: 0.72rem 0.9rem;
    }

    .topic-list-main {
        gap: 0.62rem;
    }

    .topic-list-feed .topic-list-main {
        gap: 0.28rem 0.52rem;
    }

    .topic-list-title {
        font-size: 0.82rem !important;
        line-height: 1.25;
    }

    .topic-list-meta {
        font-size: 0.68rem;
        line-height: 1.3;
    }

    /* "Tum Konular" basligi ile liste kutusu arasi boslugu azalt — feed gap ile aynı */
    .recent-topics.card > .card-body#topicsContainer {
        padding-top: 0.42rem !important;
    }

    .topic-list-classic.topic-list-feed,
    #topicsSkeleton.topics-skeleton-block {
        gap: 0.42rem;
        padding: 0;
        border-radius: 0 !important;
    }

    .topic-list-feed .topic-list-item {
        padding: 0.5rem 0.85rem 0.48rem 0.52rem;
        border-radius: 4px;
    }

    #topicsSkeleton .topics-skeleton-row {
        padding: 0.5rem 0.85rem 0.48rem 0.52rem !important;
        border-radius: 4px !important;
    }
}

.topic-list-title a {
    color: var(--secondary-text-color-hex) !important;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.topic-list-title a:hover {
    color: var(--text-color) !important;
    opacity: 0.95;
}

[data-bs-theme="dark"] .topic-list-title a {
    color: var(--dark-secondary-text-color-hex) !important;
}

[data-bs-theme="dark"] .topic-list-title a:hover {
    color: var(--dark-text-color) !important;
}

/* Grup listesi — konu başlığı link renkleri !important; grup rengi için değişken */
.topic-list-classic.groups-fragment .topic-list-title a.group-name-link {
    color: var(--group-name-color, var(--primary-color)) !important;
}
.topic-list-classic.groups-fragment .topic-list-title a.group-name-link:hover {
    color: var(--group-name-color, var(--primary-color)) !important;
    opacity: 0.88;
}

/* Gruplar: feed’in grid + mobil flex kuralları (align-items:start) ikonu yukarı iter; daha yüksek özgüllük gerekir */
.topic-list-feed.groups-fragment .topic-list-main {
    align-items: center;
}

.topic-list-meta {
    font-size: 0.74rem;
    color: var(--text-color) !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    line-height: 1.35;
}

[data-bs-theme="dark"] .topic-list-meta {
    color: var(--text-color) !important;
}

/* Liste paneli: başlık altı (tarih, kategori) ana metin rengi — kritik CSS üzerine */
[data-bs-theme="light"] .topic-list-classic .topic-list-meta,
[data-bs-theme="dark"] .topic-list-classic .topic-list-meta {
    color: var(--text-color) !important;
}

.topic-list-meta .mx-1 {
    opacity: 0.4;
    font-size: 0.35rem;
    user-select: none;
    color: inherit;
}

.topic-list-category {
    color: inherit;
}

/*
 * Ana sayfa feed meta: tek satırda kalabildiğince tutar (gereksiz kırılım azalır);
 * üst kategori › alt kategori flex içinde kopmadan tek blok gibi küçülür.
 */
.topic-list-meta.topic-list-meta-feed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.22rem 0.45rem;
}

.topic-list-meta-feed > .topic-list-meta-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}

.topic-list-meta-feed .topic-list-meta-chip.topic-list-meta-primary {
    flex: 0 1 auto;
    gap: 0;
    min-width: 0;
}

.topic-list-meta-feed .topic-list-meta-chip.topic-list-meta-primary .topic-list-author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.topic-list-meta-feed .topic-list-meta-chip.topic-list-meta-primary .topic-list-date {
    flex-shrink: 0;
    white-space: nowrap;
}

.topic-list-meta-feed .topic-list-meta-dot {
    opacity: 0.4;
    font-size: 0.35rem;
    user-select: none;
    flex-shrink: 0;
    line-height: 1;
}

/* Nokta ayraç: sol/sağ metne simetrik boşluk (merkeze yakın görünüm) */
.topic-list-meta-feed .topic-list-meta-dot.topic-list-meta-dot--pad {
    padding: 0 0.5em;
    font-size: 0.42rem;
}

.topic-list-meta-feed .topic-list-meta-chip.topic-list-meta-category {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    gap: 0.35rem;
}

.topic-list-meta-feed .topic-list-meta-chip.topic-list-meta-category .topic-list-category-chevron {
    font-size: 0.6rem;
    flex-shrink: 0;
    opacity: 0.75;
    margin: 0 !important;
}

.topic-list-meta-feed .topic-list-meta-chip.topic-list-meta-category .topic-list-category-parent {
    flex: 0 1 auto;
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.topic-list-meta-feed .topic-list-meta-chip.topic-list-meta-category .topic-list-category-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-list-stats {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: 1rem;
    min-width: 0;
    justify-content: flex-end;
    flex-shrink: 0;
}

.topic-stat {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--secondary-text-color-hex) !important;
    min-width: 0;
    padding: 0.22rem 0.5rem;
    border-radius: 4px;
    background: rgba(var(--background-color-rgb), 0.55);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    transition: border-color 0.2s ease, background 0.2s ease;
}

[data-bs-theme="dark"] .topic-stat {
    color: var(--dark-secondary-text-color-hex) !important;
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.08);
}

.topic-list-item:hover .topic-stat {
    border-color: rgba(var(--primary-color-rgb), 0.18);
    background: rgba(var(--background-color-rgb), 0.75);
}

[data-bs-theme="dark"] .topic-list-item:hover .topic-stat {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.topic-date {
    font-size: 0.67rem;
    white-space: nowrap;
    color: var(--lm-text-muted) !important;
}

.topic-card-stats {
    flex-shrink: 0;
    color: var(--lm-text-muted) !important;
    font-size: 0.72rem;
}

.topic-stat i {
    font-size: 0.72rem;
    margin-bottom: 0;
    opacity: 0.72;
    color: inherit;
}

/* Ana sayfa konu listesi: yorum / beğeni / görüntülenme tek kapsülde */
.topic-list-stats.topic-list-stats--compact {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    background: rgba(var(--background-color-rgb), 0.55);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.topic-list-stats.topic-list-stats--compact .topic-stat {
    padding: 0.16rem 0.52rem;
    border: none !important;
    background: transparent !important;
    border-radius: 0;
    box-shadow: none;
}

.topic-list-stats.topic-list-stats--compact .topic-stat + .topic-stat {
    border-left: 1px solid rgba(var(--primary-color-rgb), 0.12) !important;
}

[data-bs-theme="dark"] .topic-list-stats.topic-list-stats--compact {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .topic-list-stats.topic-list-stats--compact .topic-stat + .topic-stat {
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* Konu akışı: tam çerçeveli kutu — istatistik bandı düğme/hap görünümünden çıkar */
.topic-list-feed .topic-list-stats.topic-list-stats--compact {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.14rem 0;
    box-shadow: none;
}

.topic-list-feed .topic-list-stats.topic-list-stats--compact .topic-stat + .topic-stat {
    border-left-color: rgba(var(--text-color-rgb), 0.14) !important;
}

[data-bs-theme="dark"] .topic-list-feed .topic-list-stats.topic-list-stats--compact {
    background: transparent;
    border: none;
}

[data-bs-theme="dark"] .topic-list-feed .topic-list-stats.topic-list-stats--compact .topic-stat + .topic-stat {
    border-left-color: rgba(var(--text-color-rgb), 0.16) !important;
}

.topic-list-feed .topic-list-item:hover .topic-list-stats.topic-list-stats--compact {
    border: none;
    box-shadow: none;
    background: transparent;
}

[data-bs-theme="dark"] .topic-list-feed .topic-list-item:hover .topic-list-stats.topic-list-stats--compact {
    background: transparent;
    border: none;
}

.topic-list-item:hover .topic-list-stats.topic-list-stats--compact {
    border-color: rgba(var(--primary-color-rgb), 0.22);
    background: rgba(var(--background-color-rgb), 0.82);
    box-shadow: 0 1px 0 rgba(var(--primary-color-rgb), 0.06);
}

[data-bs-theme="dark"] .topic-list-item:hover .topic-list-stats.topic-list-stats--compact {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.topic-list-item:hover .topic-list-stats.topic-list-stats--compact .topic-stat {
    border-color: transparent !important;
    background: transparent !important;
}

/* Konu akışı — tablet/telefon: istatistikler alta, başlığa tam genişlik */
@media (max-width: 991.98px) {
    .topic-list-feed .topic-list-item {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
    }

    .topic-list-feed .topic-list-main {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start;
        /* Başlık ↔ meta dikey aralık (mobil/tablet) */
        gap: 0.36rem 0.9rem;
    }

    .topic-list-feed .topic-list-content {
        min-width: 0;
        flex: 1;
    }

    .topic-list-feed .topic-list-avatar {
        align-self: flex-start;
        margin-top: 0;
    }

    /* Gruplar: mobilde avatar align-self yüzünden ikon üstte kalmasın */
    .topic-list-feed.groups-fragment .topic-list-avatar {
        align-self: center;
        margin-top: 0;
    }

    .topic-list-feed .topic-list-title-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .topic-list-feed .topic-list-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.38;
        overflow-wrap: break-word;
    }

    .topic-list-feed .topic-list-meta:not(.topic-list-meta-feed) {
        flex-wrap: wrap;
        row-gap: 0.08rem;
        column-gap: 0.25rem;
    }

    /* Mobil/tablet: yazar · süre · kategori tek satır (taşan kategori uçları kısaltılır) */
    .topic-list-feed .topic-list-meta.topic-list-meta-feed {
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        /* Chip arası: süre–kategori noktasında biriken boşluk azalsın */
        gap: 0.2rem 0.22rem;
        line-height: 1.2;
    }

    /* Süre ile kategori arasındaki •: sol tarafta chip gap + 0.5em birikmesin; yazı–süre noktası aynı kalır */
    .topic-list-feed
        .topic-list-meta-feed
        > .topic-list-meta-chip.topic-list-meta-category
        > .topic-list-meta-dot.topic-list-meta-dot--pad:first-child {
        padding-left: 0.08em;
        /* Nokta–kategori metni: sağ padding + chip gap birikmesin */
        padding-right: 0.12em;
    }

    .topic-list-feed .topic-list-meta-feed > .topic-list-meta-chip.topic-list-meta-primary {
        flex: 0 1 auto;
        min-width: 0;
    }

    .topic-list-feed .topic-list-meta-feed > .topic-list-meta-chip.topic-list-meta-category {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        flex-wrap: nowrap;
        gap: 0.16rem;
    }

    /* Üst kategori kısayken > solunda boşluk kalmasın: üst kutusu genişlemesin, alt kategori kalanı doldursun */
    .topic-list-feed .topic-list-meta-feed > .topic-list-meta-chip.topic-list-meta-category .topic-list-category-parent {
        flex: 0 1 auto;
        max-width: min(72%, 12.5rem);
        min-width: 0;
    }

    .topic-list-feed .topic-list-meta-feed > .topic-list-meta-chip.topic-list-meta-category .topic-list-category-name {
        flex: 1 1 0;
        min-width: 0;
    }

    .topic-list-feed .topic-list-stats.topic-list-stats--compact {
        display: flex !important;
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0.26rem;
        justify-content: space-around !important;
        align-items: center !important;
        align-self: stretch !important;
        box-sizing: border-box;
        border-radius: 0 !important;
        padding: 0.28rem 0.15rem !important;
        gap: 0 !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid rgba(var(--text-color-rgb), 0.14) !important;
        box-shadow: none !important;
    }

    .topic-list-feed .topic-list-stats.topic-list-stats--compact .topic-stat {
        flex: 1 1 0;
        justify-content: center !important;
        padding: 0.12rem 0.28rem !important;
        font-size: 0.65rem !important;
        gap: 0.24rem !important;
    }

    .topic-list-feed .topic-list-stats.topic-list-stats--compact .topic-stat + .topic-stat {
        border-left: 1px solid rgba(var(--text-color-rgb), 0.14) !important;
    }

    [data-bs-theme="dark"]
        .topic-list-feed
        .topic-list-stats.topic-list-stats--compact {
        border-top-color: rgba(var(--text-color-rgb), 0.16) !important;
    }

    [data-bs-theme="dark"]
        .topic-list-feed
        .topic-list-stats.topic-list-stats--compact
        .topic-stat
        + .topic-stat {
        border-left-color: rgba(var(--text-color-rgb), 0.16) !important;
    }

    .topic-list-feed .topic-list-stats.topic-list-stats--compact .topic-stat:first-child {
        padding-left: 0.35rem !important;
    }

    .topic-list-feed .topic-list-stats.topic-list-stats--compact .topic-stat:last-child {
        padding-right: 0.35rem !important;
    }

    .topic-list-feed .topic-list-stats.topic-list-stats--compact .topic-stat i {
        font-size: 0.7rem !important;
    }
}

/* Konu akışı — geniş ekran: meta başlıkla aynı sütunda (avatar sol şeridinde değil) */
@media (min-width: 992px) {
    .topic-list-feed .topic-list-main {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 0.3rem 0.58rem;
        align-items: start;
    }

    .topic-list-feed .topic-list-avatar {
        grid-column: 1;
        grid-row: 1 / -1;
    }

    .topic-list-feed .topic-list-content {
        grid-column: 2;
        grid-row: 1;
        flex: unset;
        min-width: 0;
    }

    .topic-list-feed .topic-list-meta.topic-list-meta-feed {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
        flex: unset;
    }

    .topic-list-feed .topic-list-meta-feed > .topic-list-meta-chip.topic-list-meta-category {
        flex: 0 1 auto;
        flex-basis: auto;
        max-width: 100%;
        overflow: visible;
    }
}

/* Ana sayfa konu kutuları — mobil: başlık en fazla 2 satır */
@media (max-width: 767.98px) {
    .home-page .topic-list-feed .topic-list-title {
        display: flex !important;
        align-items: center;
        gap: 0.48rem;
        min-width: 0;
        overflow: visible !important;
        overflow-wrap: break-word;
    }

    .home-page .topic-list-feed .topic-list-title > a {
        flex: 1 1 auto;
        min-width: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

@media (max-width: 768px) {
    .topic-list-stats {
        display: none;
    }

    /* Sıralama (leaderboard): mobilde puan satırı gizlenmesin */
    .topic-list-classic.leaderboard-fragment .topic-list-stats {
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 0.2rem;
        margin-left: 0.35rem;
    }
    .topic-list-classic.leaderboard-fragment .topic-list-stats .topic-stat {
        padding: 0.14rem 0.38rem;
        font-size: 0.62rem;
    }
}

/* === assets/css/components/topic-box-effects.css === */
/* Konu kutusu efektleri — gerçekçi şerit / rozet / hafif vurgu */

:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
}

/* Ana sayfa okunmamış şeridi ::before — efektler ::after + border/background */
:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 4;
}

:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect > * {
    position: relative;
    z-index: 2;
}

/* ── 1. ACİL — sağ üst çapraz kırmızı şerit ── */
:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--acil {
    border-color: color-mix(in srgb, #dc2626 45%, transparent) !important;
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, #ef4444 18%, transparent) 0%,
        color-mix(in srgb, #ef4444 7%, transparent) 28%,
        transparent 52%
    );
}

:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--acil::after {
    content: "ACİL";
    top: 10px;
    right: -30px;
    width: 96px;
    padding: 3px 0;
    text-align: center;
    transform: rotate(45deg);
    background: #c62828;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

[data-bs-theme="dark"] :is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--acil {
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, #ef4444 24%, transparent) 0%,
        color-mix(in srgb, #ef4444 10%, transparent) 30%,
        transparent 55%
    );
}

[data-bs-theme="dark"] :is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--acil::after {
    background: #e53935;
}

/* ── 2. SATIŞ — yeşil sol rozet şeridi (tam yükseklik, sol çizginin sağında) ── */
:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--satis {
    border-color: color-mix(in srgb, #15803d 40%, transparent) !important;
}

:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--satis::after {
    content: "SATIŞ";
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 1.05rem;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    transform-origin: center center;
    background: #16794a;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    border-radius: 0;
    box-shadow: none;
    z-index: 3;
}

[data-bs-theme="dark"] :is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--satis::after {
    background: #1f9d5c;
}

.topic-list-item.topic-box-effect--satis .topic-list-main {
    padding-left: 1.25rem;
}

.admin-tbe-preview.topic-box-effect--satis,
.tbe-effect-preview.topic-box-effect--satis {
    padding-left: 1.45rem !important;
}

/* ── 2b. ALIŞ — mavi sol rozet şeridi (tam yükseklik, sol çizginin sağında) ── */
:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--alis {
    border-color: color-mix(in srgb, #1d4ed8 40%, transparent) !important;
}

:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--alis::after {
    content: "ALIŞ";
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 1.05rem;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    transform-origin: center center;
    background: #1e5bb8;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    border-radius: 0;
    box-shadow: none;
    z-index: 3;
}

[data-bs-theme="dark"] :is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--alis::after {
    background: #2563eb;
}

.topic-list-item.topic-box-effect--alis .topic-list-main {
    padding-left: 1.25rem;
}

.admin-tbe-preview.topic-box-effect--alis,
.tbe-effect-preview.topic-box-effect--alis {
    padding-left: 1.45rem !important;
}

/*
 * Alış/Satış — sol çizgi forumun standart ::before rengi (okunmamışta bildirim rengi).
 * Şerit kendi yeşil/mavi renginde; çizgi ile aynı renk olmaz.
 * Şerit çizginin hemen sağında (boşluk yok).
 */
.topic-list-feed .topic-list-item.topic-box-effect--satis::before,
.topic-list-feed .topic-list-item.topic-box-effect--alis::before {
    z-index: 6;
    box-shadow: none; /* gölge boşluk gibi görünmesin */
}

.topic-list-feed .topic-list-item.topic-box-effect--satis::after,
.topic-list-feed .topic-list-item.topic-box-effect--alis::after {
    left: 2px; /* okunmuş sol çizgi genişliği */
}

.topic-list-feed .topic-list-item.is-unread-topic.topic-box-effect--satis::after,
.topic-list-feed .topic-list-item.is-unread-topic.topic-box-effect--alis::after {
    left: 3px; /* okunmamış çizgi 3px */
}

/* ── 3. ÖNEMLİ — üst amber uyarı bandı ── */
:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--onemli {
    border-color: color-mix(in srgb, #d97706 42%, transparent) !important;
}

:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--onemli::after {
    content: "ÖNEMLİ";
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: auto;
    padding: 0.18rem 0.55rem 0.2rem;
    text-align: center;
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    color: #1c1917;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    border-radius: 0 inherit 0 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.topic-list-item.topic-box-effect--onemli .topic-list-main {
    padding-top: 1.15rem;
}

/* Okunmamış sol çizgi önemli bandının üstünde kalsın */
.topic-list-feed .topic-list-item.is-unread-topic.topic-box-effect--onemli::after {
    left: 3px;
}

.admin-tbe-preview.topic-box-effect--onemli,
.tbe-effect-preview.topic-box-effect--onemli {
    padding-top: 1.35rem !important;
}

[data-bs-theme="dark"] :is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--onemli::after {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    color: #1c1917;
}

/* ── 4. VIP — sağ üst altın köşe şeridi ── */
:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--vip {
    border-color: color-mix(in srgb, #b45309 48%, transparent) !important;
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, #fbbf24 10%, transparent) 0%,
        transparent 42%
    );
}

:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--vip::after {
    content: "VIP";
    top: 11px;
    right: -28px;
    width: 88px;
    padding: 3px 0;
    text-align: center;
    transform: rotate(45deg);
    background: linear-gradient(180deg, #f6d86b 0%, #c9a227 55%, #a67c00 100%);
    color: #3b2f0b;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] :is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--vip {
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, #fbbf24 14%, transparent) 0%,
        transparent 45%
    );
}

/* ── 5. VİTRİN — ince çerçeve vurgusu + köşe etiketi ── */
:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--vitrin {
    border-color: color-mix(in srgb, var(--primary-color, #4f46e5) 58%, transparent) !important;
    background-image:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--primary-color, #4f46e5) 55%, transparent),
            color-mix(in srgb, var(--primary-color, #4f46e5) 55%, transparent)
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--primary-color, #4f46e5) 8%, transparent) 0%,
            transparent 48%
        );
    background-size: 3px 100%, 100% 100%;
    background-position: left top, center top;
    background-repeat: no-repeat;
}

:is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--vitrin::after {
    content: "VİTRİN";
    top: 0;
    right: 0;
    left: auto;
    padding: 0.2rem 0.55rem 0.22rem 0.7rem;
    border-radius: 0 0 0 6px;
    background: color-mix(in srgb, var(--primary-color, #4f46e5) 92%, #111 8%);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.35;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

[data-bs-theme="dark"] :is(.topic-list-item, .admin-tbe-preview, .tbe-effect-preview, .sidebar-topic-ad, .home-blog-card).topic-box-effect--vitrin {
    background-image:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--primary-color, #818cf8) 70%, transparent),
            color-mix(in srgb, var(--primary-color, #818cf8) 70%, transparent)
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--primary-color, #818cf8) 12%, transparent) 0%,
            transparent 50%
        );
    background-size: 3px 100%, 100% 100%;
    background-position: left top, center top;
    background-repeat: no-repeat;
}

.topic-list-item.topic-box-effect--vitrin .topic-list-title-row {
    padding-right: 3.4rem;
}

.admin-tbe-preview.topic-box-effect--vitrin,
.tbe-effect-preview.topic-box-effect--vitrin {
    padding-right: 3.6rem !important;
}

/* Vitrin + konu kutusu: sol şerit ile ::before çift çizgi olmasın (Alış/Satış ile aynı mantık) */
.topic-list-feed .topic-list-item.topic-box-effect--vitrin {
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary-color, #4f46e5) 8%, transparent) 0%,
        transparent 48%
    );
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

[data-bs-theme="dark"] .topic-list-feed .topic-list-item.topic-box-effect--vitrin {
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary-color, #818cf8) 12%, transparent) 0%,
        transparent 50%
    );
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

.topic-list-feed .topic-list-item.topic-box-effect--vitrin:not(.is-unread-topic)::before {
    content: none;
    display: none;
}

.topic-list-feed .topic-list-item.topic-box-effect--vitrin:not(.is-unread-topic) {
    border-left: 3px solid color-mix(in srgb, var(--primary-color, #4f46e5) 72%, transparent) !important;
}

[data-bs-theme="dark"] .topic-list-feed .topic-list-item.topic-box-effect--vitrin:not(.is-unread-topic) {
    border-left-color: color-mix(in srgb, var(--primary-color, #818cf8) 78%, transparent) !important;
}

.topic-list-feed .topic-list-item.is-unread-topic.topic-box-effect--vitrin::before {
    display: block;
    content: "";
    z-index: 6;
}

/* Acil / VIP: köşe şeridi başlığı kesmesin */
.topic-list-item.topic-box-effect--acil .topic-list-title,
.topic-list-item.topic-box-effect--vip .topic-list-title {
    padding-right: 2.6rem;
}

/* Form / admin önizleme kutuları */
.tbe-effect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 0.65rem;
}

.tbe-effect-option {
    margin: 0;
    cursor: pointer;
}

.tbe-effect-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
    background: color-mix(in srgb, var(--background-color) 92%, var(--text-color) 8%);
    transition: border-color 0.18s ease;
    min-height: 100%;
}

.tbe-effect-option:hover .tbe-effect-card {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.tbe-effect-card--active {
    border-color: color-mix(in srgb, var(--primary-color) 72%, transparent) !important;
}

.tbe-effect-preview-wrap {
    min-height: 52px;
    display: flex;
    align-items: stretch;
}

.tbe-effect-preview {
    flex: 1 1 auto;
    min-height: 52px;
    border-radius: 4px;
    background: var(--topic-feed-box-bg-light, var(--lm-card-bg, var(--background-color)));
    border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
    padding: 0.45rem 0.55rem;
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-color);
    overflow: hidden;
}

[data-bs-theme="dark"] .tbe-effect-preview {
    background: var(--topic-feed-box-bg-dark, var(--dm-card-bg, var(--background-color)));
}

.tbe-effect-preview--none {
    justify-content: center;
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.tbe-effect-name {
    font-size: 0.74rem;
    font-weight: 600;
    text-align: center;
    color: var(--bs-secondary-color);
}

.tbe-effect-quota {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    z-index: 2;
    min-width: 1.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text-color) 82%, transparent);
    color: var(--background-color, #fff);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.02em;
}

.tbe-effect-option--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.tbe-effect-card--disabled {
    pointer-events: none;
}

.admin-tbe-preview {
    min-height: 56px;
    border-radius: 4px;
    padding: 0.55rem 0.65rem;
    background: var(--topic-feed-box-bg-light, var(--lm-card-bg, var(--background-color)));
    border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    display: block;
}

[data-bs-theme="dark"] .admin-tbe-preview {
    background: var(--topic-feed-box-bg-dark, var(--dm-card-bg, var(--background-color)));
}


/* Kampanya / Öne Çıkanlar kutuları — şerit ve bant için iç boşluk */
.sidebar-topic-ad.topic-box-effect--satis,
.sidebar-topic-ad.topic-box-effect--alis {
    padding-left: 1.55rem;
}

/* Alış/Satış: sol çizgi (::before) görünsün; şerit hemen sağında (konu listesiyle aynı) */
.sidebar-topic-ad.topic-box-effect--satis::before,
.sidebar-topic-ad.topic-box-effect--alis::before {
    z-index: 6;
    box-shadow: none;
}

.sidebar-topic-ad.topic-box-effect--satis::after,
.sidebar-topic-ad.topic-box-effect--alis::after {
    left: 3px;
}

.sidebar-topic-ad.topic-box-effect--onemli {
    padding-top: 1.45rem !important;
}

/* Önemli bandı içerik altında kalmasın */
.sidebar-topic-ad.topic-box-effect--onemli::after {
    left: 0 !important;
    z-index: 5 !important;
}

.sidebar-topic-ad.topic-box-effect--vitrin .sidebar-topic-ad-title {
    padding-right: 3.2rem;
}

/* Kampanya kutusunda varsayılan ::before gizli; vitrin sol şeridi + soft glow */
.sidebar-topic-ad.topic-box-effect--vitrin {
    background-image:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--primary-color, #4f46e5) 55%, transparent),
            color-mix(in srgb, var(--primary-color, #4f46e5) 55%, transparent)
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--primary-color, #4f46e5) 8%, transparent) 0%,
            transparent 48%
        );
    background-size: 3px 100%, 100% 100%;
    background-position: left top, center top;
    background-repeat: no-repeat;
    border-left-color: color-mix(in srgb, var(--primary-color, #4f46e5) 72%, var(--ad-accent));
}

[data-bs-theme="dark"] .sidebar-topic-ad.topic-box-effect--vitrin {
    background-image:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--primary-color, #818cf8) 70%, transparent),
            color-mix(in srgb, var(--primary-color, #818cf8) 70%, transparent)
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--primary-color, #818cf8) 12%, transparent) 0%,
            transparent 50%
        );
    background-size: 3px 100%, 100% 100%;
    background-position: left top, center top;
    background-repeat: no-repeat;
    border-left-color: color-mix(in srgb, var(--primary-color, #818cf8) 78%, var(--ad-accent));
}

.sidebar-topic-ad.topic-box-effect--acil .sidebar-topic-ad-title,
.sidebar-topic-ad.topic-box-effect--vip .sidebar-topic-ad-title {
    padding-right: 2.4rem;
}


/* Blog kartları — kapak + gövde düzenine uyum */
.home-blog-card.topic-box-effect {
    text-decoration: none !important;
}


.home-blog-card.topic-box-effect--satis .home-blog-card-main,
.home-blog-card.topic-box-effect--alis .home-blog-card-main,
.home-blog-card.topic-box-effect--satis .home-blog-card-media,
.home-blog-card.topic-box-effect--alis .home-blog-card-media {
    padding-left: 1.15rem;
}


.home-blog-card.topic-box-effect--acil .home-blog-card-title,
.home-blog-card.topic-box-effect--vip .home-blog-card-title,
.home-blog-card.topic-box-effect--vitrin .home-blog-card-title {
    padding-right: 2.8rem;
}

/* Blog okunmamış çizgisi + Alış/Satış: çizgi standart, şerit yanında */
.home-blog-card--unread.topic-box-effect--satis::before,
.home-blog-card--unread.topic-box-effect--alis::before,
.home-blog-card--unread.topic-box-effect--vitrin::before,
.home-blog-card--unread.topic-box-effect--onemli::before {
    z-index: 6;
    box-shadow: none;
}

.home-blog-card--unread.topic-box-effect--satis::after,
.home-blog-card--unread.topic-box-effect--alis::after {
    left: 3px;
}

.home-blog-card--unread.topic-box-effect--onemli::after {
    left: 3px;
}

/* Vitrin: blogda okunmamış çizgi varken ekstra sol şerit çift çizgi yapmasın */
.home-blog-card.topic-box-effect--vitrin {
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary-color, #4f46e5) 8%, transparent) 0%,
        transparent 48%
    );
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

[data-bs-theme="dark"] .home-blog-card.topic-box-effect--vitrin {
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary-color, #818cf8) 12%, transparent) 0%,
        transparent 50%
    );
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

.home-blog-card.topic-box-effect--vitrin:not(.home-blog-card--unread) {
    border-left: 3px solid color-mix(in srgb, var(--primary-color, #4f46e5) 72%, transparent) !important;
}

[data-bs-theme="dark"] .home-blog-card.topic-box-effect--vitrin:not(.home-blog-card--unread) {
    border-left-color: color-mix(in srgb, var(--primary-color, #818cf8) 78%, transparent) !important;
}

/* === assets/css/components/home-toolbar.css === */
/* btn-fantasy, auth-duo, navbar-auth — site geneli (iskelet: home-index-skeleton.css) */
/* Rastgele / sıralama / gruplar / sırala açılır — premium modern buton */
/* Ortak premium aksiyon butonu tabani */
:is(.btn-fantasy, .btn-fantasy:visited, .btn-new-topic, .btn-new-topic.btn-primary) {
    color: var(--btn-secondary-text) !important;
    text-decoration: none !important;
    box-sizing: border-box;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
    will-change: auto !important;
}

.btn:focus,
.btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.btn-fantasy,
.btn-fantasy:visited {
    background: linear-gradient(135deg, rgba(var(--secondary-color-rgb), 0.7), rgba(var(--secondary-color-rgb), 0.3)) !important;
    border: 1px dashed rgba(var(--text-color-rgb), 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
[data-bs-theme="dark"] .btn-fantasy,
[data-bs-theme="dark"] .btn-fantasy:visited {
    border-color: rgba(var(--text-color-rgb), 0.42) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
.btn-fantasy:hover,
.btn-fantasy:focus-visible {
    transform: none !important;
    background: linear-gradient(135deg, rgba(var(--secondary-color-rgb), 0.9), rgba(var(--secondary-color-rgb), 0.5)) !important;
    border: 1px dashed rgba(var(--text-color-rgb), 0.82) !important;
    color: var(--btn-secondary-text) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    filter: none !important;
}
[data-bs-theme="dark"] .btn-fantasy:hover,
[data-bs-theme="dark"] .btn-fantasy:focus-visible {
    border-color: rgba(var(--text-color-rgb), 0.68) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
.btn-fantasy:active {
    transform: none !important;
    filter: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
.btn-fantasy i {
    color: inherit !important;
    opacity: 0.8;
    transform: none !important;
    transition: opacity 0.15s ease;
}
.btn-fantasy:hover i,
.btn-fantasy:focus-visible i {
    opacity: 1 !important;
    transform: none !important;
}

.topic-header-status-btn {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font: inherit;
    color: inherit !important;
    opacity: 0.65;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    margin: 0;
    border: none !important;
    border-radius: 4px;
    background: transparent !important;
    box-shadow: none !important;
    transition: opacity 0.15s ease;
}

.topic-header-status-btn:hover {
    opacity: 0.95;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
}

.topic-header-status-btn:focus-visible {
    opacity: 1;
    outline: 2px solid color-mix(in srgb, currentColor 40%, transparent);
    outline-offset: 2px;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
}

.topic-header-status-btn i {
    display: block;
    font-size: 0.95rem;
    line-height: 1;
}

.topic-header-status-btn.dropdown-toggle::after {
    display: none !important;
}

#mainNavbar .navbar-auth-cluster {
    min-width: 0;
}

#mainNavbar .navbar-auth-btn {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.15;
    padding: 0.28rem 0.65rem !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    border-radius: 6px !important;
    min-height: 0 !important;
    gap: 0.35rem !important;
}
#mainNavbar .navbar-auth-btn i {
    font-size: 0.78rem !important;
}

@media (max-width: 575.98px) {
    #mainNavbar .navbar-auth-cluster {
        gap: 0.2rem !important;
    }

    #mainNavbar .navbar-auth-btn.btn-sm {
        min-height: 0;
        padding: 0.32rem 0.45rem !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        text-transform: none !important;
        line-height: 1.15 !important;
    }

    #mainNavbar .navbar-auth-btn.btn-sm i {
        font-size: 0.78rem !important;
    }

    #mainNavbar .navbar-auth-btn .navbar-auth-label {
        max-width: 4.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    #mainNavbar .navbar-auth-btn .navbar-auth-label {
        display: none !important;
    }

    #mainNavbar .navbar-auth-btn.btn-sm {
        padding: 0.4rem 0.48rem !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #mainNavbar .navbar-auth-btn.btn-sm {
        min-height: 0;
        padding: 0.4rem 0.65rem !important;
        font-size: 0.68rem !important;
    }
}

#mainNavbar .navbar-auth-btn i {
    opacity: 0.8;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
#mainNavbar .navbar-auth-btn.btn-new-topic i {
    transform: translateY(0.08em);
}
#mainNavbar .navbar-auth-btn:hover i,
#mainNavbar .navbar-auth-btn:focus-visible i {
    opacity: 1 !important;
    transform: scale(1.15) rotate(-5deg) !important;
}
#mainNavbar .navbar-auth-btn.btn-new-topic:hover i,
#mainNavbar .navbar-auth-btn.btn-new-topic:focus-visible i {
    transform: translateY(0.08em) scale(1.15) rotate(-5deg) !important;
}

#mainNavbar .navbar-auth-btn.btn-new-topic {
    border: 1px solid color-mix(in srgb, var(--text-color) 58%, var(--background-color)) !important;
}
#mainNavbar .navbar-auth-btn.btn-new-topic:hover,
#mainNavbar .navbar-auth-btn.btn-new-topic:focus-visible {
    border-color: color-mix(in srgb, var(--text-color) 88%, var(--background-color)) !important;
}
#mainNavbar .navbar-auth-btn.btn-new-topic:active {
    border-color: color-mix(in srgb, var(--text-color) 42%, var(--background-color)) !important;
}

.auth-duo {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-family: var(--site-font-title, inherit);
}
.auth-duo__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}
.auth-duo__btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.auth-duo__btn--ghost {
    color: color-mix(in srgb, var(--text-color) 75%, transparent);
    background: transparent;
}
.auth-duo__btn--ghost:hover,
.auth-duo__btn--ghost:focus-visible {
    color: var(--text-color);
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
}
[data-bs-theme="dark"] .auth-duo__btn--ghost {
    color: rgba(255, 255, 255, 0.7);
}
[data-bs-theme="dark"] .auth-duo__btn--ghost:hover,
[data-bs-theme="dark"] .auth-duo__btn--ghost:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.auth-duo__btn--solid {
    color: #fff;
    background: linear-gradient(135deg,
        var(--primary-color),
        color-mix(in srgb, var(--primary-color) 80%, #000));
    box-shadow: 0 4px 14px rgba(var(--primary-color-rgb), 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.auth-duo__btn--solid:hover,
.auth-duo__btn--solid:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color) 95%, #fff),
        var(--primary-color));
    box-shadow: 0 8px 22px rgba(var(--primary-color-rgb), 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.auth-duo__btn--solid:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.32);
}
[data-bs-theme="light"] .auth-duo__btn--solid {
    color: #1a1a1a;
}
[data-bs-theme="light"] .auth-duo__btn--solid:hover {
    color: #000;
}
.auth-duo__arrow {
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-weight: 700;
    opacity: 0.9;
}
.auth-duo__btn--solid:hover .auth-duo__arrow,
.auth-duo__btn--solid:focus-visible .auth-duo__arrow {
    transform: translateX(3px);
    opacity: 1;
}

@media (max-width: 575.98px) {
    .auth-duo__btn {
        padding: 0.36rem 0.7rem;
        font-size: 0.72rem;
    }
    .auth-duo__btn--ghost .auth-duo__label::after { content: ''; }
}
@media (max-width: 380px) {
    .auth-duo__btn--ghost .auth-duo__label {
        display: none;
    }
    .auth-duo__btn--ghost::before {
        content: '↪';
        font-size: 0.9rem;
        line-height: 1;
    }
}

/* === assets/css/main.css === */
/* ==============================================================
   MAIN.CSS — Site çekirdek stilleri (Faz 2 parçalandı)
   Parçalar: assets/css/components/home-toolbar.css, home-index-skeleton.css,
   scroll-ui.css, list-badges.css, section-headers.css,
   user-hover-preview.css, username-effects.css, navbar-menus-extra.css,
   scroll-perf.css — includes/assets.php (bkz. docs/CSS_HARITASI.md)
   ============================================================== */

/* ==============================================================
   MAIN.CSS - Site Stilleri
   Bölümler:
   1. Reset & Base (satır 8-20)
   2. Layout & Container (satır 21-30)
   3. Cards, Footer, Stats (satır 31-70)
   4. Navbar & Header (satır 71-95)
   5. Badges, Buttons, Dropdowns (satır 96-120)
   6. Index/Topic Card & Pagination (satır 121-160)
   7. Light/Dark Theme Overrides (satır 161-180)
   8. Modals (genel kabuk: assets/css/components/site-modals.css), Brand, Cache, Skeleton (satır 181-230)
   9. Topic List Classic (satır 231-320)
   10. List Toggle, Mobile Fixes (satır 321-370)
   11. Scroll Performance (satır 371-385)
   12. Scroll To Top Button (satır 386+)
   ============================================================== */


#mainNavbar .profile-button {
    border: none !important;
    /* Soft cam zemin — header ile bütünleşir, efektleri öldürmez */
    background: color-mix(in srgb, var(--background-color) 42%, transparent) !important;
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent) !important;
    border-radius: 0 !important;
    min-height: unset !important;
    padding: 0 !important;
    gap: 0.35rem !important;
}

[data-bs-theme="dark"] #mainNavbar .profile-button {
    background: color-mix(in srgb, #000 28%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent) !important;
}

#mainNavbar .profile-button:hover,
#mainNavbar .profile-button:focus-visible,
#mainNavbar .profile-button:active {
    transform: none !important;
    filter: none !important;
    border: none !important;
    background: color-mix(in srgb, var(--background-color) 52%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent) !important;
}

[data-bs-theme="dark"] #mainNavbar .profile-button:hover,
[data-bs-theme="dark"] #mainNavbar .profile-button:focus-visible,
[data-bs-theme="dark"] #mainNavbar .profile-button:active {
    background: color-mix(in srgb, #000 36%, transparent) !important;
}

/* Rol metni okunaklı kalsın; kullanıcı adı efektine color zorlaması yok */
#mainNavbar .profile-button .profile-role {
    color: var(--text-color) !important;
}

#mainNavbar .profile-button .profile-name:not(.username-effect) {
    color: var(--text-color) !important;
    text-shadow:
        0 1px 1px color-mix(in srgb, var(--background-color) 65%, transparent),
        0 0 10px color-mix(in srgb, var(--background-color) 45%, transparent);
}

@media (min-width: 577px) {
    #mainNavbar .profile-button {
        gap: 0.42rem !important;
    }

    #mainNavbar .profile-button .profile-info {
        line-height: 1.02 !important;
    }

    #mainNavbar .profile-button .profile-name {
        font-size: 0.89rem !important;
        font-weight: 400 !important;
        margin-bottom: 0 !important;
    }

    #mainNavbar .profile-button .profile-role {
        font-size: 0.68rem !important;
        opacity: 0.72 !important;
        margin-top: 0 !important;
    }

    #mainNavbar .profile-button .fa-chevron-down {
        font-size: 0.68rem !important;
        opacity: 0.78;
        margin-left: 0.2rem !important; /* ms-2 yerine daha sıkı */
    }
}


#mainNavbar :where(.notification-button, .mod-reports-button) .badge {
    border-color: var(--btn-secondary-text) !important;
    font-size: 0.58rem !important;
    min-width: 1rem;
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.28rem !important;
}

[data-bs-theme="light"] #mainNavbar :where(.notification-button, .mod-reports-button) .badge.bg-danger {
    background-color: #e11d48 !important;
    color: #fff !important;
    border-color: #fff !important;
}


/* Gündüz/gece anahtarı — gerçekçi güneş/ay + bulut/yıldız */
#mainNavbar .modern-slider-switch {
    --theme-switch-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    width: 52px;
    height: 27px;
    padding: 0;
    border-radius: 999px;
    border: 2px solid #5ec8f5;
    background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 55%, #e0f2fe 100%);
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.18);
    transition:
        border-color 0.5s var(--theme-switch-ease),
        background 0.5s var(--theme-switch-ease),
        box-shadow 0.5s var(--theme-switch-ease) !important;
    flex: 0 0 auto;
    isolation: isolate;
    contain: paint;
}

#mainNavbar .modern-slider-switch.is-dark {
    border-color: #2e3d58;
    background:
        radial-gradient(130% 100% at 18% -10%, rgba(110, 90, 190, 0.1) 0%, transparent 50%),
        radial-gradient(100% 70% at 78% 110%, rgba(40, 110, 190, 0.12) 0%, transparent 55%),
        linear-gradient(165deg, #060b18 0%, #0c1628 50%, #101d34 78%, #0a1222 100%);
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.06),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35),
        0 2px 10px rgba(0, 0, 0, 0.35);
}

#mainNavbar .slider-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

#mainNavbar .decor-clouds {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 0.4s ease;
}

#mainNavbar .modern-slider-switch.is-dark .decor-clouds {
    opacity: 0;
    pointer-events: none;
}

#mainNavbar .decor-clouds-drift {
    position: absolute;
    inset: 0;
    animation: theme-clouds-slide 5s ease-in-out infinite alternate;
}

#mainNavbar .modern-slider-switch.is-dark .decor-clouds-drift {
    animation: none;
}

/* Bulutlar — klasik kabarık bulut silueti (düz taban + yuvarlak tepeler) */
#mainNavbar .cloud {
    position: absolute;
    background: #ffffff;
    border-radius: 999px;
}

#mainNavbar .cloud::before,
#mainNavbar .cloud::after {
    content: '';
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
}

/* Ana bulut — alt sağda, iki tepeli */
#mainNavbar .cloud-1 {
    width: 13px;
    height: 5px;
    bottom: 4px;
    left: 23px;
    opacity: 0.97;
}

#mainNavbar .cloud-1::before {
    width: 6px;
    height: 6px;
    top: -3px;
    left: 2px;
}

#mainNavbar .cloud-1::after {
    width: 4.5px;
    height: 4.5px;
    top: -2px;
    left: 7px;
}

/* Orta boy bulut — sağ üstte, tek tepeli */
#mainNavbar .cloud-2 {
    width: 9px;
    height: 3.5px;
    top: 5px;
    left: 36px;
    opacity: 0.85;
}

#mainNavbar .cloud-2::before {
    width: 4px;
    height: 4px;
    top: -2px;
    left: 2.5px;
}

#mainNavbar .cloud-2::after {
    display: none;
}

/* Küçük bulut — sağ ortada */
#mainNavbar .cloud-3 {
    width: 7px;
    height: 3px;
    bottom: 10px;
    left: 41px;
    opacity: 0.7;
}

#mainNavbar .cloud-3::before {
    width: 3.5px;
    height: 3.5px;
    top: -1.5px;
    left: 2px;
}

#mainNavbar .cloud-3::after {
    display: none;
}

/* Uzak minik bulut — üstte, detay */
#mainNavbar .cloud-4 {
    width: 5px;
    height: 2px;
    top: 4px;
    left: 27px;
    opacity: 0.5;
}

#mainNavbar .cloud-4::before,
#mainNavbar .cloud-4::after {
    display: none;
}

@keyframes theme-clouds-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    #mainNavbar .decor-clouds-drift {
        animation: none !important;
    }
}

#mainNavbar .decor-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#mainNavbar .modern-slider-switch.is-dark .decor-stars {
    opacity: 1;
}

/* Yıldız tozu — az sayıda, soluk uzak yıldız */
#mainNavbar .decor-stars::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        4px 6px 0 0 rgba(255, 255, 255, 0.3),
        9px 17px 0 0 rgba(255, 255, 255, 0.22),
        13px 3px 0 0 rgba(220, 230, 255, 0.32),
        17px 12px 0 0 rgba(255, 255, 255, 0.2),
        22px 20px 0 0 rgba(255, 255, 255, 0.24),
        25px 5px 0 0 rgba(230, 238, 255, 0.28),
        7px 11px 0 0 rgba(255, 255, 255, 0.18),
        29px 8px 0 0 rgba(255, 255, 255, 0.35),
        33px 14px 0 0 rgba(220, 230, 255, 0.28),
        31px 19px 0 0 rgba(255, 255, 255, 0.22),
        36px 6px 0 0 rgba(255, 255, 255, 0.26);
}

/* Yakın yıldızlar — yumuşak ışıklı yuvarlak noktalar */
#mainNavbar .star {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle,
        #ffffff 0%,
        rgba(255, 255, 255, 0.85) 38%,
        rgba(200, 220, 255, 0.35) 65%,
        transparent 100%);
    clip-path: none;
    transform: translateZ(0);
}

#mainNavbar .modern-slider-switch.is-dark .star:not(.star-spark) {
    animation: star-twinkle 6s ease-in-out infinite;
}

#mainNavbar .star-1 { width: 2.5px; height: 2.5px; top: 4px;  left: 7px;  animation-delay: 0s;   opacity: 0.85; }
#mainNavbar .star-2 { width: 2px;   height: 2px;   top: 15px; left: 4px;  animation-delay: 2.4s; opacity: 0.5; }
#mainNavbar .star-3 { width: 2.5px; height: 2.5px; top: 9px;  left: 15px; animation-delay: 4.1s; opacity: 0.75; }
#mainNavbar .star-4 { width: 2px;   height: 2px;   top: 19px; left: 11px; animation-delay: 1.5s; opacity: 0.45; }
#mainNavbar .star-5 { width: 2px;   height: 2px;   top: 3px;  left: 21px; animation-delay: 5s;   opacity: 0.6; }
/* Hilalin içindeki (ışırmasız) gökyüzüne serpiştirilmiş yıldızlar */
#mainNavbar .star-6 { width: 2px;   height: 2px;   top: 8px;  left: 29px; animation-delay: 2.8s; opacity: 0.55; }
#mainNavbar .star-7 { width: 1.5px; height: 1.5px; top: 16px; left: 32px; animation-delay: 0.7s; opacity: 0.5; }

/* Tek kahraman yıldız — 4 köşeli parıltı + hafif glow */
#mainNavbar .star-spark {
    background: #ffffff;
    border-radius: 0;
    clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
    filter: drop-shadow(0 0 1.5px rgba(190, 215, 255, 0.7));
    transform: translateZ(0) rotate(var(--star-rot, 0deg));
}

#mainNavbar .star-spark::before,
#mainNavbar .star-spark::after {
    display: none;
}

#mainNavbar .modern-slider-switch.is-dark .star-spark {
    animation: star-spark-twinkle 6s ease-in-out infinite;
}

#mainNavbar .star-8 { width: 4px; height: 4px; top: 6px;  left: 11px; --star-rot: -12deg; animation-delay: 1s; }
#mainNavbar .star-9 { width: 3px; height: 3px; top: 12px; left: 34px; --star-rot: 28deg;  animation-delay: 3.8s; opacity: 0.75; }

@keyframes star-twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.95; }
}

@keyframes star-spark-twinkle {
    0%, 100% { opacity: 0.65; transform: translateZ(0) rotate(var(--star-rot, 0deg)) scale(0.92); }
    50% { opacity: 1; transform: translateZ(0) rotate(var(--star-rot, 0deg)) scale(1); }
}

/* Kayan yıldızlar — arada bir çapraz süzülür */
#mainNavbar .star-shoot {
    position: absolute;
    width: 10px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 0%, rgba(220, 235, 255, 0.4) 45%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transform: rotate(24deg);
}

#mainNavbar .star-shoot-1 { top: 3px; left: 2px; }
#mainNavbar .star-shoot-2 { top: 9px; left: 7px; width: 8px; transform: rotate(18deg); }

#mainNavbar .modern-slider-switch.is-dark .star-shoot-1 {
    animation: star-shoot-a 9s linear infinite 2s;
}

#mainNavbar .modern-slider-switch.is-dark .star-shoot-2 {
    animation: star-shoot-b 14s linear infinite 7s;
}

@keyframes star-shoot-a {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(24deg); }
    1.5% { opacity: 0.95; }
    6%   { opacity: 0; transform: translate3d(24px, 11px, 0) rotate(24deg); }
    100% { opacity: 0; transform: translate3d(24px, 11px, 0) rotate(24deg); }
}

@keyframes star-shoot-b {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(18deg); }
    1.2% { opacity: 0.8; }
    5%   { opacity: 0; transform: translate3d(19px, 7px, 0) rotate(18deg); }
    100% { opacity: 0; transform: translate3d(19px, 7px, 0) rotate(18deg); }
}

@media (prefers-reduced-motion: reduce) {
    #mainNavbar .modern-slider-switch.is-dark .star,
    #mainNavbar .modern-slider-switch.is-dark .star-spark {
        animation: none !important;
        opacity: 0.9;
    }
    #mainNavbar .modern-slider-switch.is-dark .star-shoot {
        animation: none !important;
        opacity: 0;
    }
}

/* Güneş / Ay topuzu */
#mainNavbar .slider-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: linear-gradient(160deg, #ffe566 0%, #f5c518 55%, #e8b006 100%);
    border: none;
    box-shadow:
        0 1px 3px rgba(180, 120, 0, 0.3),
        0 0 8px 1px rgba(255, 200, 60, 0.4);
    transition:
        transform 0.55s var(--theme-switch-ease),
        background 0.5s var(--theme-switch-ease),
        box-shadow 0.5s var(--theme-switch-ease) !important;
    z-index: 3;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
}

#mainNavbar .knob-sun-glow {
    display: none;
}

#mainNavbar .modern-slider-switch.is-dark .slider-knob {
    transform: translate3d(25px, 0, 0);
    /* Yalnızca hilal parçası görünür — ısırık alanı tamamen şeffaf (yıldızlar görünür) */
    background: radial-gradient(circle at 62% 62%, #ffffff 0%, #e9eef8 42%, #cbd6e4 76%, #a4b2c6 100%);
    box-shadow: none;
    -webkit-mask-image: radial-gradient(circle 10.5px at 24% 26%, transparent 0 9.2px, #000 9.4px);
    mask-image: radial-gradient(circle 10.5px at 24% 26%, transparent 0 9.2px, #000 9.4px);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#mainNavbar .knob-craters {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

#mainNavbar .modern-slider-switch.is-dark .knob-craters {
    opacity: 1;
}

#mainNavbar .crater {
    position: absolute;
    background: radial-gradient(circle at 30% 30%, #b8c4d4 0%, #8a9bb0 70%);
    border-radius: 50%;
    box-shadow: inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.22);
}

/* Kraterler yalnızca hilalin aydınlık (sağ alt) yüzünde */
#mainNavbar .crater-1 { width: 3.5px; height: 3.5px; bottom: 4px; right: 5px; }
#mainNavbar .crater-2 { width: 2.5px; height: 2.5px; top: 9px; right: 3px; opacity: 0.9; }
#mainNavbar .crater-3 { width: 2px; height: 2px; bottom: 8px; right: 10px; opacity: 0.8; }
#mainNavbar .crater-4 { display: none; }

#mainNavbar .modern-slider-switch:hover {
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.28);
}
#mainNavbar .modern-slider-switch.is-dark:hover {
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.08),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 2px 14px rgba(0, 0, 0, 0.45);
}
#mainNavbar .modern-slider-switch:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.7);
    outline-offset: 2px;
}

/* Araç çubuğu dışındaki navbar dropdown’ları — bildirim / hızlı arama / profil kart panelde; burada quick-search/profile hariç (ana sayfa toolbar vb.) */
#mainNavbar .custom-dropdown:not(.notification-dropdown):not(.quick-search-dropdown):not(.profile-dropdown) .dropdown-menu, .home-toolbar-cluster .custom-dropdown:not(.sort-dropdown) .dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 4px !important;
    padding: 0.3rem !important;
    box-shadow: none !important;
    background: rgba(18, 22, 30, 0.96) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-bs-theme="light"] #mainNavbar .custom-dropdown:not(.notification-dropdown):not(.quick-search-dropdown):not(.profile-dropdown) .dropdown-menu, [data-bs-theme="light"] .home-toolbar-cluster .custom-dropdown:not(.sort-dropdown) .dropdown-menu {
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

#mainNavbar .custom-dropdown:not(.notification-dropdown):not(.quick-search-dropdown) .dropdown-item, .home-toolbar-cluster .custom-dropdown .dropdown-item {
    border-radius: 4px !important;
    padding: 0.42rem 0.58rem !important;
    font-size: 0.8rem !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

#mainNavbar .custom-dropdown:not(.notification-dropdown):not(.quick-search-dropdown) .dropdown-item:hover,
#mainNavbar .custom-dropdown:not(.notification-dropdown):not(.quick-search-dropdown) .dropdown-item:focus-visible,
.home-toolbar-cluster .custom-dropdown .dropdown-item:hover,
.home-toolbar-cluster .custom-dropdown .dropdown-item:focus-visible {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="light"] #mainNavbar .custom-dropdown:not(.notification-dropdown):not(.quick-search-dropdown) .dropdown-item:hover,
[data-bs-theme="light"] #mainNavbar .custom-dropdown:not(.notification-dropdown):not(.quick-search-dropdown) .dropdown-item:focus-visible,
[data-bs-theme="light"] .home-toolbar-cluster .custom-dropdown .dropdown-item:hover,
[data-bs-theme="light"] .home-toolbar-cluster .custom-dropdown .dropdown-item:focus-visible {
    border-color: rgba(0, 0, 0, 0.14) !important;
    background: rgba(0, 0, 0, 0.03) !important;
}

#mainNavbar .custom-dropdown:not(.notification-dropdown):not(.quick-search-dropdown) .dropdown-divider, .home-toolbar-cluster .custom-dropdown .dropdown-divider {
    margin: 0.3rem 0 !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="light"] #mainNavbar .custom-dropdown:not(.notification-dropdown):not(.quick-search-dropdown) .dropdown-divider, [data-bs-theme="light"] .home-toolbar-cluster .custom-dropdown .dropdown-divider {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* Hafif köşe L token’ları — categories.css ile aynı; bundle’da erken tanımlı olsun */
:root,
[data-bs-theme="light"] {
    --site-wow-corner-lines-bg:
        linear-gradient(90deg, rgba(var(--primary-color-rgb), .26), transparent) top 3px left 3px / 12px 1px no-repeat,
        linear-gradient(180deg, rgba(var(--primary-color-rgb), .26), transparent) top 3px left 3px / 1px 12px no-repeat,
        linear-gradient(270deg, rgba(var(--primary-color-rgb), .26), transparent) top 3px right 3px / 12px 1px no-repeat,
        linear-gradient(180deg, rgba(var(--primary-color-rgb), .26), transparent) top 3px right 3px / 1px 12px no-repeat,
        linear-gradient(90deg, rgba(var(--primary-color-rgb), .26), transparent) bottom 3px left 3px / 12px 1px no-repeat,
        linear-gradient(0deg, rgba(var(--primary-color-rgb), .26), transparent) bottom 3px left 3px / 1px 12px no-repeat,
        linear-gradient(270deg, rgba(var(--primary-color-rgb), .26), transparent) bottom 3px right 3px / 12px 1px no-repeat,
        linear-gradient(0deg, rgba(var(--primary-color-rgb), .26), transparent) bottom 3px right 3px / 1px 12px no-repeat;
    --site-wow-corner-rivets-bg:
        radial-gradient(circle at top 3px left 3px, rgba(var(--primary-color-rgb), .16) 0 1.25px, transparent 2.75px),
        radial-gradient(circle at top 3px right 3px, rgba(var(--primary-color-rgb), .16) 0 1.25px, transparent 2.75px),
        radial-gradient(circle at bottom 3px left 3px, rgba(var(--primary-color-rgb), .16) 0 1.25px, transparent 2.75px),
        radial-gradient(circle at bottom 3px right 3px, rgba(var(--primary-color-rgb), .16) 0 1.25px, transparent 2.75px);
    --site-wow-corner-lines-bg-on-fill:
        linear-gradient(90deg, rgba(255, 255, 255, .42), transparent) top 3px left 3px / 12px 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .42), transparent) top 3px left 3px / 1px 12px no-repeat,
        linear-gradient(270deg, rgba(255, 255, 255, .42), transparent) top 3px right 3px / 12px 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .42), transparent) top 3px right 3px / 1px 12px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, .42), transparent) bottom 3px left 3px / 12px 1px no-repeat,
        linear-gradient(0deg, rgba(255, 255, 255, .42), transparent) bottom 3px left 3px / 1px 12px no-repeat,
        linear-gradient(270deg, rgba(255, 255, 255, .42), transparent) bottom 3px right 3px / 12px 1px no-repeat,
        linear-gradient(0deg, rgba(255, 255, 255, .42), transparent) bottom 3px right 3px / 1px 12px no-repeat;
    --site-wow-corner-rivets-bg-on-fill:
        radial-gradient(circle at top 3px left 3px, rgba(255, 255, 255, .28) 0 1.25px, transparent 2.75px),
        radial-gradient(circle at top 3px right 3px, rgba(255, 255, 255, .28) 0 1.25px, transparent 2.75px),
        radial-gradient(circle at bottom 3px left 3px, rgba(255, 255, 255, .28) 0 1.25px, transparent 2.75px),
        radial-gradient(circle at bottom 3px right 3px, rgba(255, 255, 255, .28) 0 1.25px, transparent 2.75px);
}

[data-bs-theme="dark"] {
    --site-wow-corner-lines-bg:
        linear-gradient(90deg, color-mix(in srgb, var(--wow-section-header-text) 28%, transparent), transparent) top 3px left 3px / 12px 1px no-repeat,
        linear-gradient(180deg, color-mix(in srgb, var(--wow-section-header-text) 28%, transparent), transparent) top 3px left 3px / 1px 12px no-repeat,
        linear-gradient(270deg, color-mix(in srgb, var(--wow-section-header-text) 28%, transparent), transparent) top 3px right 3px / 12px 1px no-repeat,
        linear-gradient(180deg, color-mix(in srgb, var(--wow-section-header-text) 28%, transparent), transparent) top 3px right 3px / 1px 12px no-repeat,
        linear-gradient(90deg, color-mix(in srgb, var(--wow-section-header-text) 28%, transparent), transparent) bottom 3px left 3px / 12px 1px no-repeat,
        linear-gradient(0deg, color-mix(in srgb, var(--wow-section-header-text) 28%, transparent), transparent) bottom 3px left 3px / 1px 12px no-repeat,
        linear-gradient(270deg, color-mix(in srgb, var(--wow-section-header-text) 28%, transparent), transparent) bottom 3px right 3px / 12px 1px no-repeat,
        linear-gradient(0deg, color-mix(in srgb, var(--wow-section-header-text) 28%, transparent), transparent) bottom 3px right 3px / 1px 12px no-repeat;
    --site-wow-corner-rivets-bg:
        radial-gradient(circle at top 3px left 3px, color-mix(in srgb, var(--wow-section-header-text) 20%, transparent) 0 1.25px, transparent 2.75px),
        radial-gradient(circle at top 3px right 3px, color-mix(in srgb, var(--wow-section-header-text) 20%, transparent) 0 1.25px, transparent 2.75px),
        radial-gradient(circle at bottom 3px left 3px, color-mix(in srgb, var(--wow-section-header-text) 20%, transparent) 0 1.25px, transparent 2.75px),
        radial-gradient(circle at bottom 3px right 3px, color-mix(in srgb, var(--wow-section-header-text) 20%, transparent) 0 1.25px, transparent 2.75px);
}

/* Navbar + ana sayfa sıralama kart panelleri — aynı radius, köşe çizgileri, tema arka planı; position:relative verme */
#mainNavbar .notification-dropdown .dropdown-menu.notification-menu,
#mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu,
#mainNavbar .profile-dropdown .dropdown-menu.profile-menu,
.recent-topics .home-toolbar-cluster .sort-dropdown .dropdown-menu.sort-dropdown-menu,
.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel,
.home-page .last-members-box .last-members-online-dropdown .dropdown-menu.notification-menu,
.giveaway-participants-dropdown .dropdown-menu.notification-menu,
.home-page .giveaway-embed--minimal .giveaway-card--minimal {
    isolation: isolate;
    border-radius: 4px !important;
    border: 1px solid var(--lm-glass-border) !important;
    background: rgb(var(--background-color-rgb)) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow-x: hidden;
}

#mainNavbar .notification-dropdown .dropdown-menu.notification-menu,
#mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu,
.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel,
.home-page .last-members-box .last-members-online-dropdown .dropdown-menu.notification-menu,
.giveaway-participants-dropdown .dropdown-menu.notification-menu,
.home-page .giveaway-embed--minimal .giveaway-card--minimal {
    padding: 0 !important;
}

#mainNavbar .profile-dropdown .dropdown-menu.profile-menu,
.recent-topics .home-toolbar-cluster .sort-dropdown .dropdown-menu.sort-dropdown-menu {
    padding: 0.3rem !important;
}

[data-bs-theme="dark"] #mainNavbar .notification-dropdown .dropdown-menu.notification-menu,
[data-bs-theme="dark"] #mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu,
[data-bs-theme="dark"] #mainNavbar .profile-dropdown .dropdown-menu.profile-menu,
[data-bs-theme="dark"] .recent-topics .home-toolbar-cluster .sort-dropdown .dropdown-menu.sort-dropdown-menu,
[data-bs-theme="dark"] .topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel,
[data-bs-theme="dark"] .group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel,
[data-bs-theme="dark"] .group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel,
[data-bs-theme="dark"] .group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel,
[data-bs-theme="dark"] .home-page .last-members-box .last-members-online-dropdown .dropdown-menu.notification-menu,
[data-bs-theme="dark"] .giveaway-participants-dropdown .dropdown-menu.notification-menu,
[data-bs-theme="dark"] .home-page .giveaway-embed--minimal .giveaway-card--minimal {
    border-color: rgba(68, 110, 160, 0.2) !important;
    background: var(--dark-background-color) !important;
}

#mainNavbar .notification-dropdown .dropdown-menu.notification-menu::before,
#mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu::before,
#mainNavbar .profile-dropdown .dropdown-menu.profile-menu::before,
.recent-topics .home-toolbar-cluster .sort-dropdown .dropdown-menu.sort-dropdown-menu::before,
.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel::before,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel::before,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel::before,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel::before,
.home-page .last-members-box .last-members-online-dropdown .dropdown-menu.notification-menu::before,
.giveaway-participants-dropdown .dropdown-menu.notification-menu::before,
.home-page .giveaway-embed--minimal .giveaway-card--minimal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    border-radius: 4px;
    background: var(--site-wow-corner-lines-bg);
}

#mainNavbar .notification-dropdown .dropdown-menu.notification-menu::after,
#mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu::after,
#mainNavbar .profile-dropdown .dropdown-menu.profile-menu::after,
.recent-topics .home-toolbar-cluster .sort-dropdown .dropdown-menu.sort-dropdown-menu::after,
.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel::after,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel::after,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel::after,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel::after,
.home-page .last-members-box .last-members-online-dropdown .dropdown-menu.notification-menu::after,
.giveaway-participants-dropdown .dropdown-menu.notification-menu::after,
.home-page .giveaway-embed--minimal .giveaway-card--minimal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    border-radius: 4px;
    background: var(--site-wow-corner-rivets-bg);
}

/* Köşe süsü ::before/::after z-index:4 (opak başlık altında kalmaması için); doğrudan çocuklar z-index:2; pointer-events:none */
#mainNavbar .notification-dropdown .dropdown-menu.notification-menu > *,
#mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu > *,
#mainNavbar .profile-dropdown .dropdown-menu.profile-menu > *,
.recent-topics .home-toolbar-cluster .sort-dropdown .dropdown-menu.sort-dropdown-menu > *,
.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel > *,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel > *,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel > *,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel > *,
.home-page .last-members-box .last-members-online-dropdown .dropdown-menu.notification-menu > *,
.giveaway-participants-dropdown .dropdown-menu.notification-menu > *,
.home-page .giveaway-embed--minimal .giveaway-card--minimal > * {
    position: relative;
    z-index: 2;
}

#mainNavbar .notification-dropdown .dropdown-menu.notification-menu {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Liste kendi içinde kaydırılsın — başlık ve "Tüm Bildirimler" alt satırı her zaman görünür kalsın */
#mainNavbar .notification-dropdown .notifications-list {
    max-height: min(380px, 60vh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Bildirim satırı: profil kutusu ile metin — inline img taban boşluğu kalksın */
#mainNavbar .notification-dropdown .notification-item .topic-list-avatar {
    line-height: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#mainNavbar .notification-dropdown .notification-item .topic-list-avatar img {
    display: block;
}

/* Bildirim tipi: avatar kutusu içi ikon rozeti (notifications.php renkleri ile uyumlu) */
#mainNavbar .notification-dropdown .notification-item .notification-avatar-with-type.topic-list-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

#mainNavbar .notification-dropdown .notification-item .notification-avatar-type-icon {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 17px;
    height: 17px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

#mainNavbar .notification-dropdown .notification-item .notification-avatar-type-icon i {
    font-size: 0.58rem;
}

/* Bildirim satırları arası — birincil metin rengi, çok hafif */
#mainNavbar .notification-dropdown .notifications-list .notification-item:not(:last-child) {
    border-bottom: 1px solid rgba(var(--text-color-rgb), 0.1);
}

/* Bildirim menüsü tipografi: navbar profil menüsü satırlarıyla aynı kompakt ölçü (mobil + masaüstü) */
#mainNavbar .notification-dropdown .notification-menu-title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.25;
}
#mainNavbar .notification-dropdown .notification-item .notification-text {
    font-size: 0.8rem !important;
    line-height: 1.3;
}
#mainNavbar .notification-dropdown .notification-item .notification-text .notification-actor-name {
    font-size: inherit;
    font-weight: 600;
}
#mainNavbar .notification-dropdown .notification-item:has(.username-effect) {
    overflow: visible;
}
#mainNavbar .notification-dropdown .notification-item .notification-text .notification-actor-name.username-effect {
    overflow: visible !important;
}
#mainNavbar .notification-dropdown .notification-item .flex-grow-1 .text-truncate.text-muted {
    font-size: 0.72rem !important;
    margin-top: 0.08rem;
}
#mainNavbar .notification-dropdown .notification-item .notification-time {
    font-size: 0.66rem !important;
}
#mainNavbar .notification-dropdown .notification-menu-footer a {
    font-size: 0.8rem !important;
}
#mainNavbar .notification-dropdown .notifications-list .p-3.text-center {
    font-size: 0.8rem !important;
}

/* Navbar profil menüsü: tüm genişliklerde bildirim paneliyle aynı gövde boyutu */
#mainNavbar .profile-dropdown .dropdown-menu.profile-menu .dropdown-item {
    font-size: 0.8rem !important;
}

#mainNavbar .notification-menu-close,
.welcome-modal .notification-menu-close {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid rgba(var(--text-color-rgb), 0.1);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    opacity: 0.9;
    cursor: pointer;
    line-height: 0;
    overflow: hidden;
}

#mainNavbar .notification-menu-close .notification-menu-close-glyph,
.welcome-modal .notification-menu-close .notification-menu-close-glyph {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 0;
    /* × glifi çoğu fontta optik olarak aşağıda kalır */
    transform: translateY(-0.06em);
}

/* Push opt-in butonundaki fa-bell ikonu: üstteki font-size × glifi için ayarlı,
   ikon için büyük kalıyor — sadece bu ikona özel küçültme. */
#mainNavbar #pushOptInBtn .notification-menu-close-glyph {
    transform: none;
}

#mainNavbar #pushOptInBtn .notification-menu-close-glyph i {
    font-size: 0.72rem;
    /* fa-bell glifi kendi em kutusunda hafif üstte durur, optik dikey ortalama */
    transform: translateY(0.06em);
}

#mainNavbar .notification-menu-close:hover,
#mainNavbar .notification-menu-close:focus-visible,
.welcome-modal .notification-menu-close:hover,
.welcome-modal .notification-menu-close:focus-visible {
    opacity: 1;
    background: rgba(var(--text-color-rgb), 0.12);
    border-color: rgba(var(--text-color-rgb), 0.16);
    outline: none;
}

/* Karşılama modalı — CLS için boyut rezervi; yatay ortalı */
.welcome-modal-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    object-position: center center;
}

/* Header'daki Giriş yap / Üye ol kapsülü modal alt kısmında (ve admin önizlemesinde) da
   aynı görünsün, dikey ortalı */
.welcome-modal-footer {
    padding: 1.1rem;
    min-height: 4.5rem;
}

[data-bs-theme="dark"] #mainNavbar .notification-menu-close:hover,
[data-bs-theme="dark"] #mainNavbar .notification-menu-close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(var(--text-color-rgb), 0.18);
}

.push-optin-status {
    font-size: 0.7rem;
    color: rgba(var(--text-color-rgb), 0.75);
    white-space: nowrap;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact {
    --bs-dropdown-min-width: 0 !important;
    width: fit-content !important;
    max-width: min(260px, calc(100vw - 1rem));
    min-width: 0 !important;
}

/* Açıkken: gövde inline-flex yüzünden dar kalıyordu; sütun flex ile başlık genişliğine yayılır */
.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact.show,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact.show,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact.show,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact.show {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Konu / grup compact panel: fit-content genişlik başlıktan gelince gövdeyi tam genişlikte yay */
.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-heading,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-heading,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-heading,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-heading {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.65rem !important;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-body,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-body,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-body,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-body {
    padding: 0.3rem 0.35rem 0.45rem !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-item,
.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-item-text,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-item,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-item,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-item,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-item-text,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-item-text,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-item-text {
    width: 100% !important;
    max-width: 100%;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-header,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-header,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-header,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .dropdown-header {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-body > .px-3,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-body > .px-3,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-body > .px-3,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel.topic-status-panel--compact .topic-status-panel-body > .px-3 {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading {
    border-bottom-color: rgba(var(--text-color-rgb), 0.12);
}

[data-bs-theme="light"] .topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading,
[data-bs-theme="light"] .group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading,
[data-bs-theme="light"] .group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading,
[data-bs-theme="light"] .group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading__title,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading__title,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading__title,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-heading__title {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.85;
    line-height: 1.25;
    white-space: nowrap;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-body,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-body,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-body,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .topic-status-panel-body {
    padding: 0.35rem 0.45rem 0.55rem;
    box-sizing: border-box;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .dropdown-item,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .dropdown-item {
    border-radius: 4px !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box !important;
    padding: 0.42rem 0.58rem !important;
    font-size: 0.8rem !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .dropdown-item:hover,
.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .dropdown-item:focus-visible,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item:hover,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item:hover,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .dropdown-item:hover,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item:focus-visible,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item:focus-visible,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .dropdown-item:focus-visible {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="light"] .topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .dropdown-item:hover,
[data-bs-theme="light"] .topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .dropdown-item:focus-visible,
[data-bs-theme="light"] .group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item:hover,
[data-bs-theme="light"] .group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item:hover,
[data-bs-theme="light"] .group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .dropdown-item:hover,
[data-bs-theme="light"] .group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item:focus-visible,
[data-bs-theme="light"] .group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-item:focus-visible,
[data-bs-theme="light"] .group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .dropdown-item:focus-visible {
    border-color: rgba(0, 0, 0, 0.14) !important;
    background: rgba(0, 0, 0, 0.03) !important;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .dropdown-divider,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-divider,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-divider,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .dropdown-divider {
    margin: 0.3rem 0 !important;
    border-top-color: rgba(var(--text-color-rgb), 0.12) !important;
}

[data-bs-theme="light"] .topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .dropdown-divider,
[data-bs-theme="light"] .group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-divider,
[data-bs-theme="light"] .group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-divider,
[data-bs-theme="light"] .group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .dropdown-divider {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

.topic-page-card .topic-status-dropdown .dropdown-menu.topic-status-panel .dropdown-header,
.group-page-header-row .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-header,
.group-info-sidebar-card.group-page-card .group-manage-dropdown .dropdown-menu.topic-status-panel .dropdown-header,
.group-chat-card .group-chat-msg__actions-dropdown .dropdown-menu.topic-status-panel .dropdown-header {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Yeni Konu: premium ana buton */
.btn-new-topic.btn-primary,
.btn-new-topic {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 80%, var(--background-color)), color-mix(in srgb, var(--primary-color) 40%, var(--background-color))) !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 60%, var(--background-color)) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.15) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
[data-bs-theme="dark"] .btn-new-topic.btn-primary,
[data-bs-theme="dark"] .btn-new-topic {
    border-color: color-mix(in srgb, var(--primary-color) 50%, var(--background-color)) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.btn-new-topic.btn-primary:hover,
.btn-new-topic.btn-primary:focus-visible,
.btn-new-topic:hover,
.btn-new-topic:focus-visible {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 95%, var(--background-color)), color-mix(in srgb, var(--primary-color) 60%, var(--background-color))) !important;
    color: var(--btn-secondary-text) !important;
    border-color: color-mix(in srgb, var(--primary-color) 90%, var(--background-color)) !important;
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.3) !important;
}
[data-bs-theme="dark"] .btn-new-topic.btn-primary:hover,
[data-bs-theme="dark"] .btn-new-topic.btn-primary:focus-visible,
[data-bs-theme="dark"] .btn-new-topic:hover,
[data-bs-theme="dark"] .btn-new-topic:focus-visible {
    border-color: color-mix(in srgb, #ffffff 30%, var(--background-color)) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(var(--primary-color-rgb), 0.4) !important;
}
.btn-new-topic.btn-primary:active,
.btn-new-topic:active {
    transform: translateY(0) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 80%, var(--background-color)), color-mix(in srgb, var(--primary-color) 40%, var(--background-color))) !important;
    color: var(--btn-secondary-text) !important;
    border-color: color-mix(in srgb, var(--primary-color) 50%, var(--background-color)) !important;
    filter: brightness(0.94);
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.1) !important;
}
[data-bs-theme="dark"] .btn-new-topic.btn-primary:active,
[data-bs-theme="dark"] .btn-new-topic:active {
    border-color: color-mix(in srgb, #ffffff 10%, var(--background-color)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.btn-new-topic i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-new-topic:hover i {
    transform: scale(1.15) rotate(90deg);
}


[data-bs-theme="light"] .btn-new-topic,
[data-bs-theme="light"] .btn-new-topic.btn-primary,
[data-bs-theme="light"] .btn-new-topic:hover,
[data-bs-theme="light"] .btn-new-topic:focus-visible,
[data-bs-theme="light"] .btn-new-topic:active {
    color: #fff !important;
}
[data-bs-theme="light"] .btn-new-topic i {
    color: #fff !important;
}

/* Çekiliş Butonu Özel Vurgu - Gelişmiş Şeffaf Gökkuşağı Çerçeve */
.btn-giveaway-highlight {
    position: relative;
    border: none !important;
    background: rgba(var(--secondary-color-rgb), 0.1) !important;
    overflow: hidden;
    z-index: 1;
}

.btn-giveaway-highlight:hover,
.btn-giveaway-highlight:focus-visible,
.btn-giveaway-highlight:active {
    border: none !important;
    box-shadow: none !important;
}

.btn-giveaway-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px; /* Çerçeve kalınlığı */
    border-radius: inherit;
    background: conic-gradient(from 0deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rainbow-spin 4s linear infinite;
    pointer-events: none;
}

@keyframes rainbow-spin {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

.btn-giveaway-highlight i {
    color: #f1c40f !important;
    filter: drop-shadow(0 0 3px rgba(241, 196, 15, 0.4));
}

[data-bs-theme="light"] .btn-giveaway-highlight {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-color) !important;
}

[data-bs-theme="light"] .btn-giveaway-highlight i {
    color: var(--primary-color) !important;
}

@keyframes rainbow-glow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

[data-bs-theme="light"] #mainNavbar .profile-button,
[data-bs-theme="light"] #mainNavbar .profile-button:hover {
    color: var(--text-color) !important;
}
[data-bs-theme="light"] #mainNavbar .profile-button .profile-role {
    color: var(--text-color) !important;
}
[data-bs-theme="light"] #mainNavbar .profile-button .profile-name:not(.username-effect) {
    color: var(--text-color) !important;
}

[data-bs-theme="light"] #mainNavbar .navbar-brand,
[data-bs-theme="light"] #mainNavbar .navbar-brand:hover {
    color: var(--text-color) !important;
}
[data-bs-theme="light"] #mainNavbar .brand-name-text {
    color: var(--text-color) !important;
    text-shadow: none !important;
}
[data-bs-theme="light"] #mainNavbar .brand-icon-fallback,
[data-bs-theme="light"] #mainNavbar .brand-icon-fallback i {
    color: var(--text-color) !important;
}

/* Mobile Header Button Fixes */
@media (max-width: 576px) {
    .header-buttons-group {
        gap: 0.5rem !important;
        margin-left: 0.25rem !important;
    }
    /* Profil: dış kutu yok; köşede açılır menü göstergesi */
    #mainNavbar .profile-button {
        position: relative;
        width: auto !important;
        height: auto !important;
        min-width: unset !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
    }
    #mainNavbar .profile-button .fa-chevron-down {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 0 !important;
        width: 14px;
        height: 14px;
        font-size: 0.45rem !important;
        line-height: 1;
        color: #fff !important;
        background: rgba(0, 0, 0, 0.62);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
        pointer-events: none;
        z-index: 2;
    }
}

/* Bootstrap caret + Font Awesome chevron çiftliği */
#mainNavbar .profile-button.dropdown-toggle::after {
    display: none !important;
}

/* Disable Hover Effects on Touch Devices (Fixes Sticky Hover) */
@media (hover: none) {
[data-bs-theme="light"] #mainNavbar .profile-button:hover {
        color: var(--text-color) !important;
    }
}



/* Konu hover özet tooltip — ilk görsel */
.custom-topic-tooltip--has-image {
    max-width: 280px;
    padding: 8px;
}
.custom-topic-tooltip__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
    border-radius: 4px;
    margin: 0 0 8px;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
}
.custom-topic-tooltip__text {
    display: block;
}

/* === assets/css/components/scroll-ui.css === */
/* Scroll performance + scroll-to-top — main.css Faz 2 */
/* ==============================================================
   SCROLL PERFORMANCE OPTIMIZATION
   content-visibility: auto prevents the browser from rendering
   content that isn't on screen, significantly improving speed
   on long pages with many images/comments.
   ============================================================== */
.topic-content-container, .comment-card, .reply-card, .topic-card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 200px; /* Provides a size estimate to avoid scroll jumping */
}

/* Ensure images don't break content-visibility when loading */
.topic-content img, .comment-card img {
    min-height: 50px;
    background: rgba(var(--primary-color-rgb), 0.05);
}


/* ==============================================================
   SCROLL TO TOP BUTTON – Modern fill style
   ============================================================== */
.scroll-top-btn {
--scroll-pct: 0;
position: fixed !important;
right: 24px !important;
bottom: 24px !important;
left: auto !important;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: rgba(var(--text-color-rgb), 0.1);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
}
.scroll-top-btn.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top-btn:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
.scroll-top-fill {
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(
  from 0deg,
  var(--secondary-text-color-hex) 0deg,
  var(--secondary-text-color-hex) calc(var(--scroll-pct) * 360deg),
  transparent calc(var(--scroll-pct) * 360deg) 360deg
);
opacity: 0.92;
transition: background 0.12s ease-out;
}
.scroll-top-icon {
position: relative;
z-index: 1;
font-size: 17px;
font-weight: 600;
color: var(--text-color);
line-height: 1;
transition: transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-top-icon i {
font-size: inherit;
}
.scroll-top-btn:hover .scroll-top-icon {
transform: translateY(-1px);
}
[data-bs-theme="dark"] .scroll-top-btn {
background: rgba(255,255,255,0.05);
box-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
[data-bs-theme="dark"] .scroll-top-fill {
background: conic-gradient(
  from 0deg,
  var(--dark-secondary-text-color-hex) 0deg,
  var(--dark-secondary-text-color-hex) calc(var(--scroll-pct) * 360deg),
  transparent calc(var(--scroll-pct) * 360deg) 360deg
);
}
[data-bs-theme="light"] .scroll-top-btn {
background: rgba(0,0,0,0.04);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
[data-bs-theme="light"] .scroll-top-fill {
background: conic-gradient(
  from 0deg,
  var(--secondary-text-color-hex) 0deg,
  var(--secondary-text-color-hex) calc(var(--scroll-pct) * 360deg),
  transparent calc(var(--scroll-pct) * 360deg) 360deg
);
}
@media (max-width: 768px) {
    .scroll-top-btn {
        right: 16px !important;
        bottom: 16px !important;
        width: 44px;
        height: 44px;
    }
    .scroll-top-icon { font-size: 13px; }
}

/* === assets/css/components/list-badges.css === */
/* Avatar utils, favorite badge, last members, user-badge-v4 — main.css Faz 2 */
/* ==============================================================
   13. Avatar & Icon Utility Classes (statik inline → sınıf)
   ============================================================== */
.avatar-11 { width: 11px; height: 11px; object-fit: cover; flex-shrink: 0; border-radius: 4px; }
.avatar-14 { width: 14px; height: 14px; object-fit: cover; }
.avatar-20 { width: 20px; height: 20px; object-fit: cover; }
.avatar-24 { width: 24px; height: 24px; object-fit: cover; }
.avatar-28 { width: 28px; height: 28px; object-fit: cover; }
.avatar-32 { width: 32px; height: 32px; object-fit: cover; }
.avatar-40 { width: 40px; height: 40px; object-fit: cover; }
.avatar-48 { width: 48px; height: 48px; object-fit: cover; }
.avatar-64 { width: 64px; height: 64px; object-fit: cover; }
.avatar-150 { width: 150px; height: 150px; object-fit: cover; border-radius: var(--site-box-radius, 4px); }
.icon-11 { width: 11px; height: 11px; object-fit: contain; }
.icon-14 { width: 14px; height: 14px; object-fit: contain; }
.icon-16 { width: 16px; height: 16px; object-fit: contain; }
.icon-20 { width: 20px; height: 20px; object-fit: contain; }
.icon-24 { width: 24px; height: 24px; object-fit: contain; }
.icon-32 { width: 32px; height: 32px; object-fit: contain; }
.icon-48 { width: 48px; height: 48px; object-fit: contain; }
.w-50px { width: 50px !important; }
.w-70px { width: 70px !important; }
.w-320px { width: 320px; }
.max-h-480 { max-height: 480px; }
.cursor-pointer { cursor: pointer; }

/* ==============================================================
   Favorite Badge (topic listing) – clean/classic
   Overrides earlier inline/minified rules safely.
   ============================================================== */
.favorite-badge:not(.action-badge){
  --fav:#d64f85;
  --fav-rgb:214, 79, 133;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0 !important;
  border-radius:4px;
  border:1px solid rgba(var(--fav-rgb), 0.45) !important;
  background:rgba(var(--fav-rgb), 0.16) !important;
  color:var(--fav) !important;
  cursor:pointer;
  user-select:none;
  line-height:1;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease !important;
}
[data-bs-theme="dark"] .favorite-badge:not(.action-badge){
  --fav:#f073a0;
  --fav-rgb:240, 115, 160;
}
.favorite-badge:not(.action-badge):hover{
  background:rgba(var(--fav-rgb), 0.28) !important;
  border-color:rgba(var(--fav-rgb), 0.65) !important;
  transform:translateY(-1px);
}
.favorite-badge:not(.action-badge):active{transform:translateY(0);}
.favorite-badge:not(.action-badge) i{font-size:0.78rem !important;transition:none !important;}

/* Inactive state can come as text-muted in list view */
.favorite-badge:not(.action-badge).text-muted{
  border-color:rgba(var(--fav-rgb), 0.28) !important;
  background:rgba(var(--fav-rgb), 0.1) !important;
  color:rgba(var(--fav-rgb), 0.72) !important;
}
[data-bs-theme="light"] .favorite-badge:not(.action-badge).text-muted{
  border-color:rgba(var(--fav-rgb), 0.32) !important;
  background:rgba(var(--fav-rgb), 0.08) !important;
  color:rgba(var(--fav-rgb), 0.82) !important;
}

/* Active (favorited) */
.favorite-badge:not(.action-badge).is-favorited,
.favorite-badge:not(.action-badge).bg-warning{
  background:var(--fav) !important;
  border-color:var(--fav) !important;
  color:#fff !important;
}

@media (max-width: 576px){
  .favorite-badge:not(.action-badge){width:26px;height:26px;border-radius:4px;}
  .favorite-badge:not(.action-badge) i{font-size:0.74rem !important;}
}

/* --- Last Members Section (Sade/Minimalist) --- */
.last-members-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.member-badge-sade {
    display: flex;
    align-items: center;
    padding: 2px 8px 2px 2px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    border-radius: 4px;
    text-decoration: none !important;
    gap: 6px;
    background: rgba(var(--primary-color-rgb), 0.03);
    transition: all 0.2s ease;
    min-width: 90px;
}

.avatar-sade {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
}

.name-sade {
    font-size: 0.68rem;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1;
}

[data-bs-theme="dark"] .member-badge-sade {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .name-sade {
    color: rgba(255, 255, 255, 0.8);
}

.member-badge-sade:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

[data-bs-theme="light"] .member-badge-sade:hover {
    border-color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), 0.05) !important;
}

.last-members-inline-stats {
    width: 100%;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--lm-glass-border);
}

[data-bs-theme="dark"] .last-members-inline-stats {
    border-top-color: rgba(30, 60, 95, 0.5);
}

/* Üye rozetleriyle aynı satır düzeni; tıklanamaz */
.member-stat-sade.member-badge-sade {
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.member-stat-sade.member-badge-sade:hover {
    border-color: rgba(var(--primary-color-rgb), 0.1) !important;
    background: rgba(var(--primary-color-rgb), 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .member-stat-sade.member-badge-sade:hover {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="light"] .member-stat-sade.member-badge-sade:hover {
    border-color: rgba(var(--primary-color-rgb), 0.1) !important;
    background: rgba(var(--primary-color-rgb), 0.03) !important;
}

/* Avatar-sade ile aynı yükseklik; ikon yerine rakam */
.member-stat-num-chip {
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.58rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-color);
    background: rgba(var(--primary-color-rgb), 0.14);
    border: 1px solid rgba(var(--primary-color-rgb), 0.22);
}

[data-bs-theme="dark"] .member-stat-num-chip {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.member-stat-sade .name-sade {
    min-width: 0;
}

/* Çevrim içi sayı rozeti — modal */
button.member-badge-sade {
    border-style: solid;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
}

.member-badge-sade.member-stat-sade.member-stat-sade--online-toggle {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

.member-badge-sade.member-stat-sade.member-stat-sade--online-toggle:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

[data-bs-theme="light"] .member-badge-sade.member-stat-sade.member-stat-sade--online-toggle:hover {
    border-color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), 0.05) !important;
}

/* Sayfa altında: panel yukarı açılsın (dropup). Yan sütun genişliğine hizala (toggle soluna yapışmasın). */
.home-page .last-members-box .last-members-online-dropdown.dropup > .dropdown-menu.last-members-online-menu {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important;
    left: 0 !important;
    right: auto !important;
    min-width: 15.5rem;
    max-width: min(22rem, calc(100vw - 1.25rem));
    transform: none !important;
    z-index: 1080;
}

/* Yan sütun — çevrim içi üyeler (liste: şeffaf, kompakt user-badge-v4) */
.home-page .last-members-box .last-members-online-scroll,
.giveaway-participants-dropdown .giveaway-participants-scroll {
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
}

.home-page .last-members-box .last-members-online-ul,
.giveaway-participants-dropdown .last-members-online-ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
    background: transparent;
}

.home-page .last-members-box .last-members-online-item,
.giveaway-participants-dropdown .last-members-online-item {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    background: transparent;
    border: none;
}

.home-page .last-members-box .last-members-online-pager {
    border-top: 1px solid rgba(var(--text-color-rgb), 0.08);
    padding: 0.45rem 0.75rem 0.55rem;
    margin-top: 0;
}

.home-page .last-members-box .last-members-online-pager .last-members-pager-btn {
    min-width: 2rem;
    padding: 0.2rem 0.45rem;
    line-height: 1.2;
}

.home-page .last-members-box .last-members-online-link,
.giveaway-participants-dropdown .last-members-online-link {
    border-radius: 4px !important;
    max-width: min(11rem, 100%);
}

/* Çekiliş katılımcı listesi: kart üstü dolu rozet stilinden ayrı — çevrim içi üyeler ile aynı */
.giveaway-card .giveaway-participants-dropdown .last-members-online-link.user-badge-v4 {
    background: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.22) !important;
    border: 1px solid rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.38) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    color: var(--badge-v4-color, var(--bs-primary)) !important;
}

.giveaway-card .giveaway-participants-dropdown .last-members-online-link.user-badge-v4:hover {
    background: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.34) !important;
    border-color: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.55) !important;
    color: var(--badge-v4-color, var(--bs-primary)) !important;
}

[data-bs-theme="light"] .giveaway-card .giveaway-participants-dropdown .last-members-online-link.user-badge-v4 {
    background: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.18) !important;
    border-color: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.34) !important;
}

.home-page .last-members-box .notification-menu-title,
.giveaway-participants-dropdown .notification-menu-title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.25;
    color: #a0d468 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-page .last-members-box .notification-menu-close,
.giveaway-participants-dropdown .notification-menu-close {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid rgba(var(--text-color-rgb), 0.1);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    opacity: 0.9;
    cursor: pointer;
    line-height: 0;
    overflow: hidden;
}

.home-page .last-members-box .notification-menu-close .notification-menu-close-glyph,
.giveaway-participants-dropdown .notification-menu-close .notification-menu-close-glyph {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 0;
    transform: translateY(-0.06em);
}

.home-page .last-members-box .notification-menu-close:hover,
.home-page .last-members-box .notification-menu-close:focus-visible,
.giveaway-participants-dropdown .notification-menu-close:hover,
.giveaway-participants-dropdown .notification-menu-close:focus-visible {
    opacity: 1;
    background: rgba(var(--text-color-rgb), 0.12);
    border-color: rgba(var(--text-color-rgb), 0.16);
    outline: none;
}

[data-bs-theme="dark"] .home-page .last-members-box .notification-menu-close:hover,
[data-bs-theme="dark"] .home-page .last-members-box .notification-menu-close:focus-visible,
[data-bs-theme="dark"] .giveaway-participants-dropdown .notification-menu-close:hover,
[data-bs-theme="dark"] .giveaway-participants-dropdown .notification-menu-close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(var(--text-color-rgb), 0.18);
}

.last-members-empty {
    font-size: 0.75rem;
    font-style: italic;
}

/* Modern Clean Premium Badge */
.badge-premium {
    background: rgba(var(--badge-color), 0.22) !important;
    border: 1px solid rgba(var(--badge-color), 0.42) !important;
    color: var(--badge-color) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .badge-premium {
    background: rgba(0, 0, 0, 0.38) !important;
    border: 1px solid var(--badge-color) !important;
    color: var(--badge-color) !important;
}

[data-bs-theme="light"] .badge-premium {
    background: color-mix(in srgb, var(--lm-card-bg) 72%, #ffffff 28%) !important;
    border: 1px solid var(--badge-color) !important;
    color: var(--badge-color) !important;
}

.badge-premium i {
    color: var(--badge-color);
}

/* Bootstrap badge tonlari tek kaynak */
.badge.bg-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: #495057 !important;
    color: #fff !important;
}

.badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #fff !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* Aydınlık: soft .badge kuralı bg-danger’ı eziyordu — kırmızı + beyaz sayı zorunlu */
[data-bs-theme="light"] .badge.bg-danger,
[data-bs-theme="light"] .badge.bg-danger:not(.badge-premium) {
    background-color: #e11d48 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    text-shadow: none !important;
}

.badge.bg-success {
    background-color: #198754 !important;
    color: #fff !important;
}

[data-bs-theme="light"] .badge.bg-success,
[data-bs-theme="light"] .badge.bg-success:not(.badge-premium) {
    background-color: #198754 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

[data-bs-theme="light"] .badge.bg-warning,
[data-bs-theme="light"] .badge.bg-warning:not(.badge-premium) {
    background-color: #ffc107 !important;
    color: #111 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Minify .footer: margin-top 4rem + padding-top 2rem — telif üstü boşluğu */
footer.footer {
    margin-top: 0.5rem !important;
    padding: 0.5rem 0 1rem 0 !important;
}

.footer .footer-minimalist-bottom {
    padding-top: 0.35rem !important;
    gap: 0.35rem !important;
    border-top: none !important;
}

.footer-copyright-mini {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-color);
}

/* WCAG: yasal bağlantılar birincil metin rengi + alt çizgi (text-muted kontrast yetersizdi) */
.footer .footer-legal-link {
    color: var(--text-color) !important;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
.footer .footer-legal-link:hover {
    color: var(--text-color) !important;
    text-decoration-thickness: 2px;
}
.footer .footer-legal-sep {
    color: var(--text-color);
    opacity: 0.55;
}

/* Navbar marka yazisi: premium ama sade oyun hissi */
#siteBrandContainer,
#siteBrandContainer .brand-wrapper,
#siteBrandContainer .brand-text-wrapper {
    overflow: visible !important;
}

/* Logo titremesin: genel .navbar-brand:hover translateY bu linkte uygulanmasın (telafi transformu alt pikselde kıpırdatıyordu) */
#siteBrandContainer:hover {
    transform: none !important;
}

#siteBrandContainer .brand-text-wrapper {
    position: relative;
    padding-left: 4px;
}

#siteBrandContainer .brand-name-text {
    color: transparent !important;
    display: inline-block;
    overflow: visible !important;
    padding-left: 1px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: normal;
    font-size: 1.2rem;
    transition: text-shadow 0.16s ease;
}

[data-bs-theme="light"] #siteBrandContainer .brand-name-text {
    background-image: linear-gradient(120deg, #43345f 0%, #2f2546 58%, #221a33 100%);
    text-shadow: 0 0 1px rgba(34, 26, 51, 0.1);
}

[data-bs-theme="dark"] #siteBrandContainer .brand-name-text {
    background-image: linear-gradient(120deg, #9ec7ff 0%, #6ea2de 52%, #c8d3e6 100%);
    text-shadow: 0 0 2px rgba(110, 162, 222, 0.12);
}

#siteBrandContainer .brand-subtitle-text {
    font-size: 10px;
    opacity: 0.7;
    letter-spacing: 0.2px;
    transition: opacity 0.18s ease;
}

[data-bs-theme="light"] #siteBrandContainer .brand-subtitle-text {
    color: #4a3f65;
}

[data-bs-theme="dark"] #siteBrandContainer .brand-subtitle-text {
    color: #9eb6d8;
}

#siteBrandContainer .brand-text-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, currentColor 22%, currentColor 78%, transparent 100%);
    opacity: 0.28;
    transition: width 0.16s ease;
}

#siteBrandContainer:hover .brand-name-text {
    letter-spacing: normal;
}

#siteBrandContainer:hover .brand-subtitle-text {
    opacity: 0.76;
}

#siteBrandContainer:hover .brand-text-wrapper::after {
    width: 100%;
}

@media (max-width: 768px) {
    #siteBrandContainer .brand-name-text {
        font-size: 1.12rem;
    }
    #siteBrandContainer .brand-subtitle-text {
        font-size: 9px;
        opacity: 0.68;
    }
}

/* Footer hukuk bağlantıları — satır içi boyut yerine tema */
.footer-links-mini {
    font-size: 0.75rem;
}

/* Footer istatistikleri: arka plan birincil tona yakın olduğundan metin birincil renk (WCAG) */
.footer .stats-number,
.footer .stats-user {
    color: var(--text-color) !important;
}
[data-bs-theme="dark"] .footer .stats-number,
[data-bs-theme="dark"] .footer .stats-user {
    color: var(--dark-text-color) !important;
}

/* Karanlık mod: Üye Ol — siyah metin ve ikon (font ağırlığı .auth-button ile aynı kalır) */
[data-bs-theme="dark"] .auth-button.filled {
    color: #0d0d0d !important;
}
[data-bs-theme="dark"] .auth-button.filled i {
    color: #0d0d0d !important;
}
[data-bs-theme="dark"] .auth-button.filled:hover,
[data-bs-theme="dark"] .auth-button.filled:hover i {
    color: #0d0d0d !important;
}

/* ═══ Composited Animation Hints (Lighthouse: non-composited animations) ═══ */
.topic-card,
.topic-card::after,
.badge:hover,
.btn-primary:hover,
.admin-badge:hover,
.auth-button:hover,
.scroll-top-btn,
.list-group-item {
    will-change: transform, opacity;
}

/* Use transform instead of top/left for scroll-top animation — transform scroll-ui.css'te tanımlı */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══ Form controls — çerçeve tema birincil metin rengi (text-color-rgb; dark’ta otomatik koyu metin) ═══
   !important yok: .is-valid / .is-invalid ve .was-validated :valid|:invalid Bootstrap sınırlarını ezmeyelim. */
.form-control:not(.form-control-plaintext):not(.is-valid):not(.is-invalid),
.form-select:not(.is-valid):not(.is-invalid) {
    border-color: rgba(var(--text-color-rgb), 0.3);
}

.form-control:not(.form-control-plaintext):not(.is-valid):not(.is-invalid):focus,
.form-select:not(.is-valid):not(.is-invalid):focus {
    border-color: rgba(var(--text-color-rgb), 0.52);
    box-shadow: 0 0 0 0.2rem rgba(var(--text-color-rgb), 0.14);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: rgba(var(--dark-background-color-rgb), 0.6) !important;
    color: var(--dark-text-color) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: rgba(var(--dark-background-color-rgb), 0.8) !important;
    color: var(--dark-text-color) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: rgba(var(--dark-text-color-rgb), 0.45) !important;
}

/* Ana sayfa: sıralama açılır menüsü — sol sütundaki sticky arama (z-index 1020) ile sütunlar arası stacking yüzünden
   yalnızca .dropdown-menu z-index artırılmak yetmez; açıkken kartı yükseltmek gerekir (index.php sort-dropdown-open). */
@media (max-width: 768px) {
    .recent-topics.sort-dropdown-open {
        position: relative;
        z-index: 1040;
    }
}


/* ═════ User-Role Badge (v4) — site geneli rütbe/personel/trust rozetleri ═════ */
.user-badge-v4 {
    height: 22px !important;
    line-height: 1 !important;
    font-size: 0.65rem !important;
    padding: 0 3px 0 0 !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.22) !important;
    border: 1px solid rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.38) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    vertical-align: middle !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    gap: 0 !important;
    color: var(--badge-v4-color, var(--bs-primary)) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease-in-out !important;
}

.user-badge-v4:hover {
    background: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.34) !important;
    border-color: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.55) !important;
    color: var(--badge-v4-color, var(--bs-primary)) !important;
}

[data-bs-theme="light"] .user-badge-v4 {
    background: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.18) !important;
    border-color: rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.34) !important;
}

.user-badge-v4 .user-avatar-img {
    width: 21px !important;
    height: 22px !important;
    object-fit: cover !important;
    border-right: 1px solid rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.2) !important;
    margin-right: 3px !important;
    flex-shrink: 0 !important;
}

.user-badge-v4 .user-badge-v4-rank-icon {
    width: 21px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-right: 1px solid rgba(var(--badge-v4-color-rgb, 13, 110, 253), 0.2) !important;
    margin-right: 3px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.user-badge-v4 .user-badge-v4-rank-icon i {
    font-size: 0.55rem !important;
    line-height: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: inherit !important;
    opacity: 0.95 !important;
}

/* İkon dışındaki metin span'ı: line-height:normal satır kutusunu aşağı kaydırıyordu */
.user-badge-v4 > span:not(.user-avatar-img) {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* Personel rozeti: sadece ikon (profil avatar köşesi) */
.user-badge-v4.staff-role-badge-v4--icon-only {
    padding: 0 !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    justify-content: center !important;
}
.user-badge-v4.staff-role-badge-v4--icon-only .user-badge-v4-rank-icon {
    margin-right: 0 !important;
    border-right: none !important;
    width: 22px !important;
}

/* === assets/css/components/section-headers.css === */
/* Kutu başlık sistemi — main.css Faz 2 */
/* ==============================================================
   WoW themed section headers (Forum sidebar + topic list)
   ============================================================== */
:root {
    --wow-section-header-bg: linear-gradient(90deg, rgb(var(--dark-section-header-bg-rgb, 11,24,43)) 0%, rgb(var(--dark-section-header-bg-rgb, 11,24,43)) 55%, rgb(var(--dark-section-header-bg-rgb, 11,24,43)) 100%);
    --wow-section-header-text: var(--dark-section-header-color, #a0b8cf);
    --wow-section-header-text-shadow: none;
    --wow-section-header-shine: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    --wow-section-header-divider: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
}

[data-bs-theme="light"] {
    --wow-section-header-bg: linear-gradient(90deg, rgb(var(--section-header-bg-rgb, 129,96,57)) 0%, rgb(var(--section-header-bg-rgb, 129,96,57)) 55%, rgb(var(--section-header-bg-rgb, 129,96,57)) 100%);
    --wow-section-header-text: var(--section-header-color, #6b4c2a);
    --wow-section-header-text-shadow: none;
}

.category-panel > .category-panel-header,
.recent-topics > .card-header {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    margin: -1px -1px 0 -1px;
    width: calc(100% + 2px);
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
    background: var(--wow-section-header-bg) !important;
    box-shadow: none !important;
    color: var(--wow-section-header-text) !important;
    text-shadow: var(--wow-section-header-text-shadow);
    letter-spacing: 0.02em;
    font-weight: 500;
    text-transform: uppercase;
}

/* Sıralama dropdown'ı başlık dışına taşabildiği için kırpma olmasın */
.recent-topics > .card-header {
    overflow: visible;
}

.category-panel > .category-panel-header::before,
.recent-topics > .card-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--wow-section-header-shine);
    opacity: 0.28;
}

.category-panel > .category-panel-header::after,
.recent-topics > .card-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--wow-section-header-divider);
}

.category-panel > .category-panel-header i,
.recent-topics > .card-header i,
.recent-topics > .card-header .card-title {
    color: inherit !important;
    text-shadow: inherit;
    font-size: 0.88rem !important;  /* h5 boyutunu koru, h3 varsayılanını ezmek için */
    margin-bottom: 0 !important;
}

/* "Tüm Konular" kart kabuğu da kategori paneliyle aynı olsun */
.recent-topics.card {
    border: 1px solid var(--lm-glass-border) !important;
    background: var(--lm-card-bg) !important;
    border-radius: 4px !important;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .recent-topics.card {
    border-color: rgba(68, 110, 160, 0.2) !important;
    background: var(--dm-card-bg) !important;
}

.recent-topics.card > .card-body {
    background: inherit !important;
}

@media (max-width: 768px) {
    .recent-topics > .card-header .card-title {
        font-size: 0.82rem !important;
        letter-spacing: 0.09em;
    }
}

/* === assets/css/components/user-hover-preview.css === */
/* Kullanıcı hover önizlemesi — main.css Faz 2 */
/* ================================================================
   Hover kullanıcı önizlemesi
   ================================================================ */
.user-hover-preview-tooltip.custom-topic-tooltip {
    max-width: 272px;
    padding: 0 !important;
    overflow: hidden;
    line-height: 1.4;
    font-size: 0.8rem;
    --uh-preview-badge-base: #1a1d24;
    --uh-preview-frame-color: var(--wow-section-header-text);
    border-color: var(--uh-preview-frame-color) !important;
}

.user-hover-preview-inner {
    padding: 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
    --uh-preview-gutter: 12px;
    --uh-preview-wow-offset: calc(var(--uh-preview-gutter) + var(--user-avatar-forum-size, 40px) + 10px);
}

/* Kapak: tam genişlik, bindirme/gradient yok — görsel kesilmez */
.user-hover-preview-cover {
    display: block;
    width: 100%;
    height: 72px;
    margin: 0;
    border-radius: 4px 4px 0 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Kapak + profil satırı: isim kapak altında, tooltip zemininde */
.user-hover-preview-inner--has-cover .user-hover-preview-hero {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="light"] .user-hover-preview-inner--has-cover .user-hover-preview-hero {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Karakter rozeti varsa hero alt çizgisini kaldır (ayırıcı istatistiklerde) */
.user-hover-preview-inner--has-cover:has(.user-hover-preview-wow) .user-hover-preview-hero {
    border-bottom: none;
}

.user-hover-preview-inner--has-cover:has(.user-hover-preview-wow) .user-hover-preview-hero .user-hover-preview-head {
    margin-top: 0;
    padding: 10px 12px 0;
    align-items: flex-start;
}

.user-hover-preview-inner--has-cover .user-hover-preview-hero .user-hover-preview-head {
    margin-top: 0;
    padding: 10px 12px 8px;
}

.user-hover-preview-inner > :not(.user-hover-preview-hero) {
    padding-left: 12px;
    padding-right: 12px;
}

.user-hover-preview-inner > .user-hover-preview-head:first-child {
    padding: 10px 12px 0;
}

/* — Üst: Avatar + İsim + Rozetler — */
.user-hover-preview-head {
    display: flex;
    gap: 10px;
    align-items: center;
}

.user-hover-preview-meta {
    min-width: 0;
    flex: 1;
}

.user-hover-preview-username {
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.2;
    word-break: break-word;
}

.user-hover-preview-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    margin-top: 4px;
}

.user-hover-preview-trust-badges .user-trust-badge.user-badge-v4 {
    height: 19px !important;
    min-width: 19px !important;
    width: 19px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.user-hover-preview-presence {
    margin-top: 6px;
    line-height: 1.25;
    font-size: 0.72rem;
}

/* Rozetleri önizlemede küçült (opak arka plan — şeffaf değil) */
.user-hover-preview-tooltip .user-badge-v4 {
    height: 19px !important;
    font-size: 0.58rem !important;
    padding: 0 6px 0 0 !important;
    background: color-mix(
        in srgb,
        var(--badge-v4-color, var(--bs-primary)) 38%,
        var(--uh-preview-badge-base, #1a1d24) 62%
    ) !important;
    border: 1px solid color-mix(
        in srgb,
        var(--badge-v4-color, var(--bs-primary)) 72%,
        var(--uh-preview-badge-base, #1a1d24) 28%
    ) !important;
}

[data-bs-theme="light"] .user-hover-preview-tooltip {
    --uh-preview-badge-base: #f0f2f5;
}

[data-bs-theme="light"] .user-hover-preview-tooltip .user-badge-v4 {
    background: color-mix(
        in srgb,
        var(--badge-v4-color, var(--bs-primary)) 32%,
        var(--uh-preview-badge-base, #f0f2f5) 68%
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--badge-v4-color, var(--bs-primary)) 58%,
        var(--uh-preview-badge-base, #f0f2f5) 42%
    ) !important;
}

.user-hover-preview-tooltip .user-badge-v4:hover {
    background: color-mix(
        in srgb,
        var(--badge-v4-color, var(--bs-primary)) 48%,
        var(--uh-preview-badge-base, #1a1d24) 52%
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--badge-v4-color, var(--bs-primary)) 82%,
        var(--uh-preview-badge-base, #1a1d24) 18%
    ) !important;
    filter: none;
}
.user-hover-preview-tooltip .user-badge-v4 .user-avatar-img,
.user-hover-preview-tooltip .user-badge-v4 .user-badge-v4-rank-icon {
    width: 18px !important;
    height: 19px !important;
}
.user-hover-preview-tooltip .user-badge-v4 .user-avatar-img {
    margin-right: 4px !important;
}
.user-hover-preview-tooltip .user-badge-v4 .user-badge-v4-rank-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.user-hover-preview-tooltip .user-badge-v4 .user-badge-v4-rank-icon i {
    font-size: 0.5rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
.user-hover-preview-tooltip .user-badge-v4.staff-role-badge-v4--icon-only,
.user-hover-preview-tooltip .user-badge-v4.user-trust-badge {
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.user-hover-preview-tooltip .user-badge-v4.staff-role-badge-v4--icon-only {
    width: 19px !important;
    min-width: 19px !important;
    max-width: 19px !important;
    height: 19px !important;
}
.user-hover-preview-tooltip .user-badge-v4.staff-role-badge-v4--icon-only .user-badge-v4-rank-icon,
.user-hover-preview-tooltip .user-badge-v4.staff-role-badge-v4--icon-only .user-avatar-img,
.user-hover-preview-tooltip .user-badge-v4.user-trust-badge .user-badge-v4-rank-icon,
.user-hover-preview-tooltip .user-badge-v4.user-trust-badge .user-avatar-img {
    width: 19px !important;
    height: 19px !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-right: none !important;
    object-fit: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.user-hover-preview-tooltip .user-badge-v4.user-hover-preview-rank,
.user-hover-preview-tooltip .user-badge-v4.user-hover-preview-staff {
    max-width: 100%;
}

/* — WoW Karakter (profil satırının altında, meta sütunuyla hizalı) — */
.user-hover-preview-wow {
    margin-top: 0;
    padding-top: 4px;
    padding-bottom: 8px;
    padding-left: var(--uh-preview-wow-offset);
    padding-right: var(--uh-preview-gutter);
    box-sizing: border-box;
}

.user-hover-preview-inner > .user-hover-preview-wow {
    padding-left: var(--uh-preview-wow-offset);
    padding-right: var(--uh-preview-gutter);
}

.user-hover-preview-inner--has-cover .user-hover-preview-wow {
    padding-top: 6px;
    padding-bottom: 8px;
    padding-left: var(--uh-preview-wow-offset);
    padding-right: var(--uh-preview-gutter);
}

@media (max-width: 576px) {
    .groups-page .btn-new-group {
        font-size: 0.8rem;
        padding: 0.34rem 0.6rem;
        border-radius: 4px;
        line-height: 1.2;
    }

    .groups-page .btn-new-group i {
        margin-right: 0.35rem !important;
        font-size: 0.72rem;
    }
}

/* — İstatistik grid: 3 sütun — */
.user-hover-preview-stats {
    margin-top: 8px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
[data-bs-theme="light"] .user-hover-preview-stats {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.user-hover-preview-kv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 2px 4px;
    text-align: center;
    position: relative;
}
.user-hover-preview-kv + .user-hover-preview-kv::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="light"] .user-hover-preview-kv + .user-hover-preview-kv::before {
    background: rgba(0, 0, 0, 0.08);
}

.user-hover-preview-lbl {
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0.5;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.user-hover-preview-val {
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.user-hover-preview-val--quiet {
    font-weight: 500;
    opacity: 0.7;
    font-size: 0.72rem;
}

/* — Hakkında — */
.user-hover-preview-about {
    margin: 0;
    padding: 7px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.45;
    opacity: 0.72;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-bs-theme="light"] .user-hover-preview-about {
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* === assets/css/components/username-effects.css === */
/* Kullanıcı adı efektleri — main.css Faz 2 */
/* ================================================================
   Kullanıcı adı efektleri — Admin paneli üzerinden atanır
   Kural: filter/transform YOK (element arka planını kirletir).
   Sadece text-shadow ve background-clip:text tekniği kullanılır.
   ================================================================ */
.username-effect {
    position: relative;
    /* Gölgelerin/serpinti yıldızlarının element sınırında kesilmemesi için padding
       tamponu. Negatif margin, elemanın layout içindeki boyutunu korur. Yatayda
       düşeyden geniş tutulur — konu kutusu (.forum-comment-post) köşe yuvarlama için
       overflow:hidden kullanıyor; dar/mobil düzende (rozetlerle aynı satır) bu sınıra
       en yakın olan taşma soldur (bkz. stardust efekti). */
    padding: 0.12em 0.32em;
    margin: -0.12em -0.32em;
    /* Elementin kendi gölgesini kesmemeli; parent overflow kural uyuşmazlığını
       da aşmak için !important gerekir (Bootstrap text-truncate vs.). */
    overflow: visible !important;
    /* display kasıtlı değiştirilmiyor — efektin varlığı block/inline düzenini bozmasın */
}

/* Ortak: gradyan metin (background-clip) — her efekt kendi paletini/animasyonunu tanımlar. */

/* ── 1. AURORA ─ Yumuşak kutup ışığı akışı + hafif nefes ── */
.username-effect--aurora {
    background: linear-gradient(
        120deg,
        #12b886 0%,
        #38d9a9 14%,
        #66d9e8 28%,
        #a5d8ff 42%,
        #748ffc 56%,
        #9775fa 70%,
        #38d9a9 84%,
        #12b886 100%
    );
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none;
    animation:
        ueFxAurora 6.5s cubic-bezier(.4, .05, .6, .95) infinite,
        ueFxSoftBreath 4.2s ease-in-out infinite;
}
@keyframes ueFxAurora {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes ueFxSoftBreath {
    0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, currentColor 28%, transparent)); }
    50%      { filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 42%, transparent)); }
}

/* ── 2. HOLO ─ Folyo gökkuşağı + geçen beyaz parlaklık ── */
.username-effect--holo {
    background-image:
        linear-gradient(
            105deg,
            transparent 36%,
            rgba(255, 255, 255, 0.92) 48%,
            rgba(255, 255, 255, 0.92) 52%,
            transparent 64%
        ),
        linear-gradient(
            95deg,
            #ff6bcb 0%,
            #845ef7 18%,
            #4dabf7 36%,
            #38d9a9 54%,
            #ffd43b 72%,
            #ff6bcb 100%
        );
    background-size: 220% 100%, 240% 100%;
    background-position: -80% 0, 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none;
    animation: ueFxHolo 5.2s ease-in-out infinite;
}
@keyframes ueFxHolo {
    0%, 100% { background-position: -80% 0, 0% 50%; }
    45%      { background-position: 160% 0, 70% 50%; }
    100%     { background-position: -80% 0, 0% 50%; }
}

/* ── 3. CHROME ─ Fırçalanmış metal + keskin speküler şerit ── */
.username-effect--chrome {
    background-image:
        linear-gradient(
            100deg,
            transparent 40%,
            rgba(255, 255, 255, 0.95) 49%,
            rgba(255, 255, 255, 0.95) 51%,
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #4b5563 0%,
            #c5ccd6 22%,
            #f8fafc 38%,
            #9aa3b2 52%,
            #e8ecf1 68%,
            #6b7280 88%,
            #374151 100%
        );
    background-size: 260% 100%, 100% 100%;
    background-position: -90% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none;
    animation: ueFxChrome 4.4s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes ueFxChrome {
    0%, 100% { background-position: -90% 0, 0 0; }
    50%      { background-position: 180% 0, 0 0; }
}

/* ── 4. PRIZMA ─ Spektral kırılım, yumuşak sürekli akış ── */
.username-effect--prism {
    background: linear-gradient(
        90deg,
        #ff6b6b 0%,
        #ffa94d 14%,
        #ffd43b 28%,
        #69db7c 42%,
        #4dabf7 56%,
        #9775fa 70%,
        #f783ac 84%,
        #ff6b6b 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none;
    animation: ueFxPrism 7s linear infinite;
}
@keyframes ueFxPrism {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ── 5. KRALİYET ─ Kadife mor + altın vurgular ── */
.username-effect--royal {
    background-image:
        linear-gradient(
            100deg,
            transparent 42%,
            rgba(255, 236, 153, 0.85) 50%,
            transparent 58%
        ),
        linear-gradient(
            115deg,
            #2b0a4a 0%,
            #5f3dc4 22%,
            #9775fa 38%,
            #fcc419 50%,
            #9775fa 62%,
            #5f3dc4 78%,
            #2b0a4a 100%
        );
    background-size: 240% 100%, 260% 100%;
    background-position: -60% 0, 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none;
    animation: ueFxRoyal 5.6s ease-in-out infinite;
}
@keyframes ueFxRoyal {
    0%, 100% { background-position: -60% 0, 0% 50%; }
    50%      { background-position: 160% 0, 100% 50%; }
}

/* ── 6. EFSANEVİ ─ WoW efsanevi turuncu + sıcak kor ışıması ── */
.username-effect--legendary {
    background: linear-gradient(
        110deg,
        #8a3a00 0%,
        #e67700 20%,
        #ff922b 38%,
        #ffe8a3 50%,
        #ff922b 62%,
        #e67700 80%,
        #8a3a00 100%
    );
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none;
    animation:
        ueFxLegendary 4.8s ease-in-out infinite,
        ueFxLegendaryGlow 3.2s ease-in-out infinite;
}
@keyframes ueFxLegendary {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes ueFxLegendaryGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 146, 43, 0.45)); }
    50%      { filter: drop-shadow(0 0 6px rgba(255, 176, 72, 0.7)); }
}

/* ── 7. CEHENNEM ATEŞİ ─ Kor + alev titreşimi ── */
.username-effect--inferno {
    background: linear-gradient(
        105deg,
        #4a0500 0%,
        #c92a2a 18%,
        #f76707 36%,
        #ffd43b 50%,
        #f76707 64%,
        #c92a2a 82%,
        #4a0500 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    animation:
        ueFxInfernoSweep 4s ease-in-out infinite,
        ueFxInfernoFlicker 1.8s ease-in-out infinite;
}
@keyframes ueFxInfernoSweep {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes ueFxInfernoFlicker {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 94, 20, 0.55)); }
    33%      { filter: drop-shadow(0 0 5px rgba(255, 146, 43, 0.8)); }
    66%      { filter: drop-shadow(0 0 3px rgba(255, 212, 59, 0.65)); }
}

/* ── 8. KIRAĞI ─ Buz kristali + soğuk parıltı ── */
.username-effect--frostbite {
    background-image:
        linear-gradient(
            100deg,
            transparent 44%,
            rgba(255, 255, 255, 0.95) 50%,
            transparent 56%
        ),
        linear-gradient(
            115deg,
            #1864ab 0%,
            #4dabf7 22%,
            #a5d8ff 40%,
            #f8f9fa 50%,
            #a5d8ff 60%,
            #4dabf7 78%,
            #1864ab 100%
        );
    background-size: 220% 100%, 250% 100%;
    background-position: -70% 0, 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    animation:
        ueFxFrostbite 5.4s ease-in-out infinite,
        ueFxFrostbiteGlint 3s ease-in-out infinite;
}
@keyframes ueFxFrostbite {
    0%, 100% { background-position: -70% 0, 0% 50%; }
    50%      { background-position: 160% 0, 100% 50%; }
}
@keyframes ueFxFrostbiteGlint {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(165, 216, 255, 0.45)); }
    50%      { filter: drop-shadow(0 0 5px rgba(233, 246, 255, 0.75)); }
}

/* ── 9. BOŞLUK ─ Derin mor void ışıması ── */
.username-effect--void {
    animation: ueFxVoid 3.8s ease-in-out infinite;
}
@keyframes ueFxVoid {
    0%, 100% {
        text-shadow:
            0 0 1px currentColor,
            0 0 4px color-mix(in srgb, #7950f2 55%, currentColor),
            0 0 10px color-mix(in srgb, #5f3dc4 35%, transparent);
    }
    50% {
        text-shadow:
            0 0 1px #e5dbff,
            0 0 5px color-mix(in srgb, #9775fa 70%, currentColor),
            0 0 14px color-mix(in srgb, #7048e8 45%, transparent),
            0 0 22px color-mix(in srgb, #5f3dc4 22%, transparent);
    }
}

/* ── 10. ZEHİR ─ Asidik nabız + toksik hale ── */
.username-effect--venom {
    animation: ueFxVenom 2.8s ease-in-out infinite;
}
@keyframes ueFxVenom {
    0%, 100% {
        text-shadow:
            0 0 1px currentColor,
            0 0 4px color-mix(in srgb, #94d82d 55%, currentColor),
            0 0 9px color-mix(in srgb, #74b816 30%, transparent);
    }
    50% {
        text-shadow:
            0 0 1px #f4fce3,
            0 0 5px color-mix(in srgb, #c0eb75 65%, currentColor),
            0 0 12px color-mix(in srgb, #82c91e 40%, transparent),
            0 0 18px color-mix(in srgb, #5c940d 20%, transparent);
    }
}

/* ── 11. İLAHİ ─ Kutsal altın hale ── */
.username-effect--divine {
    animation: ueFxDivine 3.6s ease-in-out infinite;
}
@keyframes ueFxDivine {
    0%, 100% {
        text-shadow:
            0 0 1px #fff9db,
            0 0 4px color-mix(in srgb, currentColor 50%, #ffd43b),
            0 0 10px color-mix(in srgb, #fcc419 28%, transparent);
    }
    50% {
        text-shadow:
            0 0 1px #fffceb,
            0 0 6px color-mix(in srgb, currentColor 60%, #ffe066),
            0 0 14px color-mix(in srgb, #ffd43b 38%, transparent),
            0 0 22px color-mix(in srgb, #fab005 18%, transparent);
    }
}

/* ── 12. PARAZİT ─ Modern RGB chromatic glitch ── */
.username-effect--glitch {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    vertical-align: baseline;
    position: relative;
    animation: ueFxGlitch 5.2s steps(1, end) infinite;
}
.username-effect--glitch::before,
.username-effect--glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
}
.username-effect--glitch::before {
    color: #22b8cf;
    z-index: 1;
    animation: ueFxGlitchA 5.2s steps(1, end) infinite;
}
.username-effect--glitch::after {
    color: #f06595;
    z-index: 1;
    animation: ueFxGlitchB 5.2s steps(1, end) infinite;
}
@keyframes ueFxGlitch {
    0%, 88%, 100% { transform: translate(0, 0); text-shadow: none; }
    89% { transform: translate(-1px, 0); text-shadow: 1px 0 #22b8cf; }
    91% { transform: translate(1px, 0); text-shadow: -1px 0 #f06595; }
    93% { transform: translate(-1px, 0); }
    95% { transform: translate(0, 0); text-shadow: none; }
    97% { transform: translate(1px, 0); }
}
@keyframes ueFxGlitchA {
    0%, 88%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
    89% { opacity: 0.75; transform: translate(-2px, 0); clip-path: inset(12% 0 48% 0); }
    91% { opacity: 0; }
    93% { opacity: 0.55; transform: translate(-1px, 0); clip-path: inset(55% 0 18% 0); }
    95% { opacity: 0; }
}
@keyframes ueFxGlitchB {
    0%, 88%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
    90% { opacity: 0.75; transform: translate(2px, 0); clip-path: inset(42% 0 22% 0); }
    92% { opacity: 0; }
    94% { opacity: 0.5; transform: translate(1px, 0); clip-path: inset(8% 0 60% 0); }
    96% { opacity: 0; }
}

/* ── 13. DALGA ─ Harf harf yumuşak sine dalgası (JS: .ue-letter) ── */
.username-effect--wave {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    vertical-align: baseline;
}
.username-effect--wave .ue-letter {
    display: inline-block;
    will-change: transform;
    text-shadow: 0 0 5px color-mix(in srgb, currentColor 35%, transparent);
    animation: ueFxWave 2.2s cubic-bezier(.45, .05, .55, .95) infinite;
    animation-delay: calc(var(--ue-i, 0) * 0.065s);
}
@keyframes ueFxWave {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(-0.14em); }
    50%      { transform: translateY(0); }
    75%      { transform: translateY(0.06em); }
}

/* ── 14. ESİNTİSİ ─ Zarif, okunabilir nefes (opaklık fazla düşmez) ── */
.username-effect--ethereal {
    animation: ueFxEthereal 4.2s ease-in-out infinite;
}
@keyframes ueFxEthereal {
    0%, 100% {
        opacity: 0.88;
        text-shadow: 0 0 3px color-mix(in srgb, currentColor 28%, transparent);
        letter-spacing: 0;
    }
    50% {
        opacity: 1;
        text-shadow:
            0 0 6px color-mix(in srgb, currentColor 48%, transparent),
            0 0 12px color-mix(in srgb, currentColor 18%, transparent);
        letter-spacing: 0.01em;
    }
}

/* ── 15. YILDIZ PARILTISI ─ Metin ışıması + köşelerde modern artı kıvılcım ── */
.username-effect--sparkle {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    vertical-align: baseline;
    position: relative;
    animation: ueFxSparkleGlow 3.2s ease-in-out infinite;
}
@keyframes ueFxSparkleGlow {
    0%, 100% {
        text-shadow:
            0 0 1px currentColor,
            0 0 4px color-mix(in srgb, currentColor 32%, transparent);
    }
    50% {
        text-shadow:
            0 0 1px currentColor,
            0 0 3px currentColor,
            0 0 8px color-mix(in srgb, currentColor 48%, transparent);
    }
}
.username-effect--sparkle::before,
.username-effect--sparkle::after {
    content: '';
    position: absolute;
    width: 0.62em;
    height: 0.62em;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(
            to right,
            transparent 0%,
            color-mix(in srgb, currentColor 50%, #fff) 30%,
            #fff 50%,
            color-mix(in srgb, currentColor 50%, #fff) 70%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            color-mix(in srgb, currentColor 50%, #fff) 30%,
            #fff 50%,
            color-mix(in srgb, currentColor 50%, #fff) 70%,
            transparent 100%
        );
    background-size: 100% 1.5px, 1.5px 100%;
    background-position: center, center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 55%, transparent));
}
.username-effect--sparkle::before {
    left: -0.2em;
    top: -0.12em;
    animation: ueFxSparkleBurst 2.8s ease-in-out infinite;
}
.username-effect--sparkle::after {
    right: -0.22em;
    bottom: -0.08em;
    animation: ueFxSparkleBurst 2.8s ease-in-out infinite 1.4s;
}
@keyframes ueFxSparkleBurst {
    0%, 100% { opacity: 0; transform: scale(0.25) rotate(0deg); }
    40%      { opacity: 1; transform: scale(1.1) rotate(18deg); }
    70%      { opacity: 0.2; transform: scale(0.55) rotate(32deg); }
}

/* ── 16. YILDIZ TOZU ─ İsme yakın peri tozu (JS: .ue-star) ── */
.username-effect--stardust {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: baseline;
    width: fit-content;
}
.username-effect--stardust .ue-star {
    position: absolute;
    left: var(--ue-x, 50%);
    top: var(--ue-y, 50%);
    width: var(--ue-size, 3px);
    height: var(--ue-size, 3px);
    margin: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    will-change: transform, opacity;
    animation: ueFxStardustDrift var(--ue-dur, 3s) ease-in-out infinite;
    animation-delay: var(--ue-delay, 0s);
}
.username-effect--stardust .ue-star:not(.ue-star--flare) {
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        #fff 0%,
        color-mix(in srgb, currentColor 70%, #fff 30%) 35%,
        transparent 72%
    );
    box-shadow:
        0 0 3px color-mix(in srgb, currentColor 55%, transparent),
        0 0 6px color-mix(in srgb, #fff 35%, transparent);
}
.username-effect--stardust .ue-star--flare {
    width: var(--ue-size, 7px);
    height: var(--ue-size, 7px);
    background: transparent;
    box-shadow: none;
}
.username-effect--stardust .ue-star--flare::before,
.username-effect--stardust .ue-star--flare::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        transparent 0%,
        color-mix(in srgb, currentColor 55%, #fff 45%) 22%,
        #fff 50%,
        color-mix(in srgb, currentColor 55%, #fff 45%) 78%,
        transparent 100%
    );
    box-shadow: 0 0 4px color-mix(in srgb, currentColor 50%, transparent);
    pointer-events: none;
}
.username-effect--stardust .ue-star--flare::before {
    width: 100%;
    height: 1.5px;
    transform: translate(-50%, -50%);
}
.username-effect--stardust .ue-star--flare::after {
    width: 1.5px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, currentColor 55%, #fff 45%) 22%,
        #fff 50%,
        color-mix(in srgb, currentColor 55%, #fff 45%) 78%,
        transparent 100%
    );
    transform: translate(-50%, -50%);
}
@keyframes ueFxStardustDrift {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
    38% {
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(0.55);
    }
    58% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1);
    }
    78% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
}
[data-bs-theme="light"] .username-effect--stardust .ue-star:not(.ue-star--flare) {
    background: radial-gradient(
        circle at center,
        color-mix(in srgb, currentColor 88%, #fff 12%) 0%,
        color-mix(in srgb, currentColor 55%, transparent) 42%,
        transparent 74%
    );
    box-shadow:
        0 0 3px color-mix(in srgb, currentColor 45%, transparent),
        0 0 5px color-mix(in srgb, currentColor 25%, transparent);
}
[data-bs-theme="light"] .username-effect--stardust .ue-star--flare::before,
[data-bs-theme="light"] .username-effect--stardust .ue-star--flare::after {
    background: linear-gradient(
        to right,
        transparent 0%,
        color-mix(in srgb, currentColor 75%, #000 8%) 22%,
        color-mix(in srgb, currentColor 92%, #fff 8%) 50%,
        color-mix(in srgb, currentColor 75%, #000 8%) 78%,
        transparent 100%
    );
    box-shadow: 0 0 3px color-mix(in srgb, currentColor 40%, transparent);
}
[data-bs-theme="light"] .username-effect--stardust .ue-star--flare::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, currentColor 75%, #000 8%) 22%,
        color-mix(in srgb, currentColor 92%, #fff 8%) 50%,
        color-mix(in srgb, currentColor 75%, #000 8%) 78%,
        transparent 100%
    );
}

/* ── Overflow override: bilinen kesilinme bölgeleri ──────────────── */
/* topic-list-author'da overflow:hidden var; efektli olduğunda kaldır */
.topic-list-author.username-effect,
/* Header navbar profil kutusu */
.profile-name.username-effect,
/* Kullanıcı hover-preview */
.user-hover-preview-username.username-effect,
/* Yorum satırı kullanıcı adı */
.forum-comment-username.username-effect,
/* Grup sohbeti balon başlığı */
.group-chat-msg__name.username-effect,
/* Liderlik tablosu */
.leaderboard-user-name.username-effect {
    overflow: visible !important;
    /* text-overflow:ellipsis'i de devre dışı bırak (overflow visible ile çelişir) */
    text-overflow: clip;
}

/* ────────────────────── prefers-reduced-motion ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .username-effect,
    .username-effect::before,
    .username-effect::after,
    .username-effect .ue-letter,
    .username-effect .ue-star {
        animation: none !important;
        filter: none !important;
    }
    .username-effect--ethereal {
        opacity: 1 !important;
        letter-spacing: normal !important;
    }
}

/* Renk seçilmemiş kullanıcı adları — link mavisi yerine tema metin rengi (efektli adlar hariç) */
a.forum-username--default:not(.username-effect),
span.forum-username--default:not(.username-effect),
div.forum-username--default:not(.username-effect) {
    color: var(--bs-body-color, var(--text-color)) !important;
}

a.forum-username--default:not(.username-effect):hover,
a.forum-username--default:not(.username-effect):focus-visible {
    color: var(--bs-body-color, var(--text-color)) !important;
    opacity: 0.88;
}

[data-bs-theme="dark"] a.forum-username--default:not(.username-effect),
[data-bs-theme="dark"] span.forum-username--default:not(.username-effect),
[data-bs-theme="dark"] div.forum-username--default:not(.username-effect) {
    color: var(--dark-text-color, var(--bs-body-color)) !important;
}

[data-bs-theme="dark"] a.forum-username--default:not(.username-effect):hover,
[data-bs-theme="dark"] a.forum-username--default:not(.username-effect):focus-visible {
    color: var(--dark-text-color, var(--bs-body-color)) !important;
}

[data-bs-theme="light"] a.forum-username--default:not(.username-effect),
[data-bs-theme="light"] span.forum-username--default:not(.username-effect),
[data-bs-theme="light"] div.forum-username--default:not(.username-effect) {
    color: var(--text-color, var(--lm-text)) !important;
}

[data-bs-theme="light"] a.forum-username--default:not(.username-effect):hover,
[data-bs-theme="light"] a.forum-username--default:not(.username-effect):focus-visible {
    color: var(--text-color, var(--lm-text)) !important;
}

/* Yasaklı kullanıcı adı (profil rengi + üstü çizili; link sınıflarından daha baskın) */
.forum-username--banned,
a.forum-username--banned,
span.forum-username--banned,
.topic-list-author.forum-username--banned,
a.profile-link.forum-username--banned,
a.forum-comment-username.forum-username--banned,
.topic-list-title a.forum-username--banned,
.topic-list-classic.leaderboard-fragment .topic-list-title a.forum-username--banned,
.topic-list-classic.leaderboard-fragment a.leaderboard-user-name.forum-username--banned,
a.text-decoration-none.forum-username--banned {
    text-decoration: line-through !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}

.user-hover-preview-username.forum-username--banned {
    text-decoration: line-through !important;
    text-decoration-thickness: 1px;
}

/* — Ban durumu — */
.user-hover-preview-banned {
    margin: 8px 0 0;
    padding: 5px 8px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--bs-danger, #dc3545);
    background: rgba(220, 53, 69, 0.08);
    border-radius: 4px;
    text-align: center;
}

/* — Yükleniyor — */
.user-hover-preview-inner.user-hover-preview-loading {
    padding: 12px;
}

.user-hover-preview-loading {
    font-size: 0.78rem;
    text-align: center;
}

/* === assets/css/components/navbar-menus-extra.css === */
/* Navbar ikon/menü ek stilleri — main.css Faz 2 */
/* ==============================================================
   Navbar ikon butonlari (kanonik)
   Bildirim + Arama birebir ayni davranis/renk (kirlilik temizleme)
   ============================================================== */
#mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button) {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
    padding: 0.25rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    transition: color 0.2s ease !important;
    filter: none !important;
    color: inherit !important;
}

#mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button) i {
    font-size: 1.14rem !important;
    color: inherit !important;
}

#mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button)::after {
    display: none !important;
}

#mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button):hover,
#mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button):focus-visible,
#mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button):active {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    color: var(--secondary-text-color-hex) !important;
}

[data-bs-theme="dark"] #mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button):hover,
[data-bs-theme="dark"] #mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button):focus-visible,
[data-bs-theme="dark"] #mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button):active {
    color: var(--dark-secondary-text-color-hex) !important;
}

[data-bs-theme="light"] #mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button),
[data-bs-theme="light"] #mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button):hover,
[data-bs-theme="light"] #mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button):focus-visible,
[data-bs-theme="light"] #mainNavbar :where(.notification-button, .quick-search-button, .mod-reports-button):active {
    background: transparent !important;
    box-shadow: none !important;
}

/* Rozet akışta değil — ikon arama ile aynı merkezde kalır; global .badge:hover hareketi yok */
#mainNavbar :where(.notification-button, .mod-reports-button) {
    position: relative !important;
}

#mainNavbar :where(.notification-button, .mod-reports-button) .badge {
    position: absolute !important;
    top: -0.12rem !important;
    right: -0.28rem !important;
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
    pointer-events: none;
}

#mainNavbar :where(.notification-button, .mod-reports-button):hover .badge,
#mainNavbar :where(.notification-button, .mod-reports-button):focus-visible .badge,
#mainNavbar :where(.notification-button, .mod-reports-button):active .badge,
#mainNavbar :where(.notification-button, .mod-reports-button) .badge:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

.quick-search-menu {
    width: min(90vw, 320px);
}
.quick-search-menu .quick-search-input {
    min-height: 38px;
    border-radius: 4px 0 0 4px;
}

/* Hızlı arama: odakta Bootstrap halkası / mavi çerçeve yok */
#mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu .quick-search-input:focus,
#mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu .quick-search-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--bs-border-color) !important;
}

.quick-search-menu .btn {
    border-radius: 0 4px 4px 0;
    min-width: 42px;
}
/* Mobil panel konumu: assets/css/responsive.css (@767.98px — arama / bildirim / profil ortak) */

/* Ortak action badge sistemi (forum geneli) — sol renkli ikon bloğu + sağ metin alanı + ince çerçeve */
.action-badge {
    --ab-color: var(--bs-secondary);
    --ab-rgb: 108, 117, 125;
    --ab-text-hover: #fff;
    --ab-fill-color: var(--ab-color);
    --ab-border-width: 1px;
    --ab-icon-width: 32px;
    /* Appearance: konu kutusu arka planı (aydınlık / karanlık) */
    --ab-body-bg: var(--topic-feed-box-bg-light, var(--lm-card-bg, var(--background-color)));
    --ab-label-color: var(--text-color);
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 4px;
    border: var(--ab-border-width) solid var(--ab-fill-color) !important;
    background-color: var(--ab-body-bg);
    color: var(--ab-label-color) !important;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: none;
}

[data-bs-theme="dark"] .action-badge {
    --ab-body-bg: var(--topic-feed-box-bg-dark, var(--dm-card-bg, var(--background-color)));
    --ab-label-color: var(--text-color);
}

/* Sol renkli alan — varsayılan ikon genişliği, hover'da tüm butonu kaplar */
.action-badge::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--ab-icon-width);
    background: var(--ab-fill-color);
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-badge:not(:has(> i))::before {
    width: 2px;
    opacity: 0.85;
}

.action-badge:has(> i:only-child)::before {
    width: 100%;
}

/* İkon + metin: sol kare, sağ koyu şerit */
.action-badge:has(> i + *) > i {
    flex: 0 0 var(--ab-icon-width);
    width: var(--ab-icon-width);
    min-width: var(--ab-icon-width);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 4px 0 0 4px;
    background: transparent;
    color: #fff !important;
    font-size: 0.82rem;
    line-height: 1;
}

.action-badge:has(> i + *) > :is(span, em, strong, b, small) {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.82rem;
    color: inherit !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* Beğeni sayacı: sağda; ayrı kutu arka planı yok, solda ayırıcı çizgi var */
.action-badge :is(.topic-like-count, .comment-like-count) {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    min-width: var(--ab-icon-width);
    align-self: stretch;
    justify-content: center;
    padding: 0 0.55rem !important;
    background: transparent !important;
    border-left: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: inherit !important;
}

[data-bs-theme="dark"] .action-badge :is(.topic-like-count, .comment-like-count) {
    background: transparent !important;
}

/* Yalnızca ikon: tamamı renkli kare */
.action-badge:has(> i:only-child) {
    width: var(--ab-icon-width);
    min-width: var(--ab-icon-width);
    background: var(--ab-fill-color);
}

.action-badge:has(> i:only-child) > i {
    flex: 1 1 auto;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #fff !important;
    font-size: 0.82rem;
    line-height: 1;
}

/* Yalnızca metin */
.action-badge:not(:has(> i)) {
    padding: 0.34rem 0.82rem;
}

.action-badge > :is(i, span, em, strong, b, small) {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

@media (min-width: 992px) {
    .action-badge:is(:hover, :focus-visible)::before {
        width: 100%;
    }
}

/* Hover: sadece ::before kayarak kaplar — buton arka planı anında boyanmaz */
.action-badge:is(:hover, :focus-visible) {
    background-color: var(--ab-body-bg) !important;
    color: var(--ab-text-hover) !important;
    text-decoration: none;
    filter: none;
    opacity: 1;
}

.action-badge:is(:hover, :focus-visible)::before {
    width: 100%;
    opacity: 1;
}

.action-badge:is(:hover, :focus-visible) > :is(span, em, strong, b, small) {
    color: var(--ab-text-hover) !important;
}

.action-badge:is(:hover, :focus-visible) :is(.topic-like-count, .comment-like-count) {
    background: transparent !important;
    border-left-color: color-mix(in srgb, #fff 22%, transparent);
    color: var(--ab-text-hover) !important;
}

.action-badge:hover,
.action-badge:focus-visible {
    text-decoration: none;
}

.action-badge.action-badge-sm {
    --ab-icon-width: 28px;
    height: 28px;
    min-height: 28px;
    font-size: 0.78rem;
}

.action-badge.action-badge-sm:has(> i + *) > :is(span, em, strong, b, small) {
    padding: 0 0.65rem;
}

.action-badge.edit-badge { --ab-color: var(--bs-primary); --ab-rgb: 13, 110, 253; }
.action-badge.delete-badge,
.action-badge.like-badge { --ab-color: var(--bs-danger); --ab-rgb: 220, 53, 69; }
.action-badge.favorite-badge {
    --ab-color: #d64f85;
    --ab-rgb: 214, 79, 133;
    --ab-fill-color: #c73d74;
    --ab-text-hover: #fff;
    border-color: var(--ab-fill-color) !important;
}
[data-bs-theme="dark"] .action-badge.favorite-badge {
    --ab-color: #f073a0;
    --ab-rgb: 240, 115, 160;
    --ab-fill-color: #e25587;
}
.action-badge.favorite-badge.is-favorited,
.action-badge.favorite-badge.bg-warning {
    /* Aktif: yalnızca ikon (fas); arka plan varsayılan split kalsın */
    background-color: var(--ab-body-bg) !important;
    border-color: var(--ab-fill-color) !important;
    color: var(--ab-label-color) !important;
}

.action-badge.favorite-badge.is-favorited::before,
.action-badge.favorite-badge.bg-warning::before {
    width: var(--ab-icon-width);
    background: var(--ab-fill-color);
}

.action-badge.favorite-badge.is-favorited:is(:hover, :focus-visible)::before,
.action-badge.favorite-badge.bg-warning:is(:hover, :focus-visible)::before {
    width: 100%;
}

.action-badge.follow-badge {
    --ab-color: #3b82f6;
    --ab-rgb: 59, 130, 246;
    --ab-fill-color: #3b82f6;
}

.action-badge.follow-badge.is-following {
    background-color: var(--ab-body-bg) !important;
    border-color: var(--ab-fill-color) !important;
    color: var(--ab-label-color) !important;
}

.action-badge.follow-badge.is-following::before {
    width: var(--ab-icon-width);
    background: var(--ab-fill-color);
}

.action-badge.follow-badge.is-following:is(:hover, :focus-visible)::before {
    width: 100%;
}

.action-badge.share-badge { --ab-color: #0dcaf0; --ab-rgb: 13, 202, 240; }
.action-badge.cancel-badge { --ab-color: var(--bs-secondary); --ab-rgb: 108, 117, 125; }

/* Koyu tema: footer cam kart + arama menüsü opak */
[data-bs-theme="dark"] .footer-widget.glass-card {
    background: var(--dm-card-bg);
    border-color: var(--dm-glass-border);
}

/* --- Mobil: aynı sabit ::before katmanı; yükseklik visualViewport / lvh --- */
@media (max-width: 768px) {
    html::before {
        height: var(--app-visual-vh, 100lvh);
        min-height: 100vh;
        background-size: 100% 100%, var(--pattern-day-layer-size-mobile, cover);
    }

    /* Parçacık canvas ile aynı görünüm yüksekliği; 100vw yatay kayma yapabildiği için left/right */
    #wowBgCanvas {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100vw;
        height: var(--app-visual-vh, 100lvh) !important;
    }

    html[data-bs-theme="dark"]::before {
        background-size: 100% 100%, var(--pattern-night-layer-size-mobile, cover);
    }
}

/* ==========================================================================
   Birleşik Arama Kutusu Tasarımı (Grup Chat Mesaj Kutusu Tasarımı)
   ========================================================================== */
.search-compose-fused {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 0;
    border-radius: var(--site-box-radius, 4px);
    border: 1px solid rgba(var(--primary-color-rgb), 0.32);
    overflow: hidden;
    background: rgb(var(--background-color-rgb));
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .search-compose-fused {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.search-compose-fused:focus-within {
    outline: 2px solid rgba(var(--primary-color-rgb), 0.5);
    outline-offset: 1px;
}

.search-compose-fused .search-compose-input:disabled {
    opacity: 0.78;
    cursor: not-allowed;
}

.search-compose-fused .search-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.search-compose-fused .search-compose-input:focus,
.search-compose-fused .search-compose-input:focus-visible {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.search-compose-fused .search-compose-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-height: 38px;
    padding: 0.45rem 0.72rem !important;
    line-height: 1.35;
    background-color: transparent !important;
}

.search-compose-fused .search-send-btn {
    flex: 0 0 auto;
    align-self: stretch !important;
    height: auto !important;
    min-height: 38px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    --ab-icon-width: 38px;
}

.search-compose-fused .search-send-btn > i {
    border-radius: 0 !important;
}

[data-bs-theme="dark"] .search-compose-fused .search-send-btn {
    border-left-color: transparent !important;
}

.groups-search-clear {
    height: auto !important;
    min-height: 38px !important;
}

@media (max-width: 575.98px) {
    .search-compose-fused .search-send-btn {
        position: relative;
        width: var(--ab-icon-width, 38px);
        min-width: var(--ab-icon-width, 38px);
        background: var(--ab-fill-color);
    }

    .search-send-btn .search-send-btn__text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .search-compose-fused .search-send-btn > i {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        background: transparent;
        border-radius: 0 !important;
    }
}

/* === assets/css/components/scroll-perf.css === */
/* Scroll jank + yorum vurgusu — main.css Faz 2 */
/* ============================================================
   PERF · Scroll jank fix
   - reduced-motion respect — düşük güç/eski cihaz smooth disable
   - is-scrolling: footer-ambient.js scroll esnasında html'e ekler;
     ağır username efektleri ve döngüsel animasyonlar duraklatılır,
     scroll bitince 200ms sonra devam ederler.
   ============================================================ */
html.is-scrolling [class*="username-effect--"],
html.is-scrolling [class*="username-effect--"]::before,
html.is-scrolling [class*="username-effect--"]::after,
html.is-scrolling .username-effect .ue-star,
html.is-scrolling .username-effect .ue-letter,
html.is-scrolling .topic-status-pulse,
html.is-scrolling .skeleton,
html.is-scrolling .modal.update-modal-premium .modal-dialog {
    animation-play-state: paused !important;
}

@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;
        scroll-behavior: auto !important;
    }
}

/* Bildirimden gelinen yorum/yanıt hedefi: kısa bir vurgu ile doğru yere gelindiğini gösterir. */
.comment-highlight-flash {
    animation: commentHighlightFlash 2s ease-out;
}
@keyframes commentHighlightFlash {
    0% { box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.55); }
    100% { box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0); }
}

/* === assets/css/components/user-avatar-forum.css === */
/*
 * Forum geneli profil avatarı — tek düzenleme noktası
 * Bağımlılık: theme-vars --text-color (Görünüm: Açık sütun = light, Koyu sütun = dark; site hangi temadaysa o değişir)
 *
 * Düz (flat): gölge yok; opak çerçeve (transparanlık yok) — radius --site-box-radius ile aynı kalır.
 * Çerçeve rengi: --user-avatar-forum-border-color (PHP: user_forum_avatar_border_style / user_forum_avatar_img_attributes).
 *
 * HTML: .topic-list-avatar > img | img.user-avatar-forum | .notification-avatar-wrap img | .user-hover-preview-head img
 * Küçük (32px): img.user-avatar-forum.user-avatar-forum--sm
 * Konu yorumu / yanıt sol panel (kompakt): img.user-avatar-forum.user-avatar-forum--comment
 * Profil (büyük): .profile-card-avatar-wrap > img.user-avatar-forum--profile (profil.php’de .profile-card-avatar-stack ile rozet dışarıda)
 */

:root {
    --user-avatar-forum-size: 40px;
    --user-avatar-forum-size-md: 34px;
    --user-avatar-forum-size-topic-list: 46px;
    --user-avatar-forum-size-topic-list-md: 40px;
    --user-avatar-forum-size-sm: 32px;
    --user-avatar-forum-size-comment: 52px;
    --user-avatar-forum-size-comment-md: 46px;
    --user-avatar-forum-size-profile: 150px;
    --user-avatar-forum-size-profile-mobile: 142px;
    --user-avatar-forum-size-profile-xs: 126px;
    --user-avatar-forum-radius: var(--site-box-radius, 4px);
    --user-avatar-forum-border-width: 1px;
    --user-avatar-forum-border-color: var(--text-color);
    --user-avatar-forum-border: var(--user-avatar-forum-border-width) solid var(--user-avatar-forum-border-color);
    --user-avatar-forum-shadow: none;
}

img.user-avatar-forum,
.topic-list-avatar > img,
.notification-avatar-wrap > img,
.user-hover-preview-head > img {
    width: var(--user-avatar-forum-size);
    height: var(--user-avatar-forum-size);
    box-sizing: border-box;
    border-radius: var(--user-avatar-forum-radius);
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    border-width: var(--user-avatar-forum-border-width);
    border-style: solid;
    border-color: var(--user-avatar-forum-border-color);
    box-shadow: var(--user-avatar-forum-shadow);
    /* Keskin köşeli kaynak görseller; radius ile çerçeve içinde kırpılsın */
    overflow: hidden;
}

/* Konu kutusu (topic-list-feed): kutu genişliğini artırmadan avatar biraz daha büyük */
.topic-list-feed .topic-list-avatar > img,
.topic-list-feed .topic-list-avatar img.user-avatar-forum {
    width: var(--user-avatar-forum-size-topic-list);
    height: var(--user-avatar-forum-size-topic-list);
}

/* Konu sayfası (topic.php) — yorum ve yanıt sol sütun */
img.user-avatar-forum.user-avatar-forum--comment {
    width: var(--user-avatar-forum-size-comment);
    height: var(--user-avatar-forum-size-comment);
}

/* Profil sayfası — büyük avatar; liste / bildirim sıkılaştırmasından muaf */
img.user-avatar-forum.user-avatar-forum--profile {
    width: var(--user-avatar-forum-size-profile);
    height: var(--user-avatar-forum-size-profile);
}

@media (max-width: 768px) {
    img.user-avatar-forum:not(.user-avatar-forum--profile):not(.user-avatar-forum--comment),
    .topic-list-avatar img,
    .notification-avatar-wrap img {
        width: var(--user-avatar-forum-size-md);
        height: var(--user-avatar-forum-size-md);
    }

    .topic-list-feed .topic-list-avatar > img,
    .topic-list-feed .topic-list-avatar img.user-avatar-forum {
        width: var(--user-avatar-forum-size-topic-list-md);
        height: var(--user-avatar-forum-size-topic-list-md);
    }

    img.user-avatar-forum.user-avatar-forum--comment {
        width: var(--user-avatar-forum-size-comment-md);
        height: var(--user-avatar-forum-size-comment-md);
    }

    img.user-avatar-forum.user-avatar-forum--profile {
        width: var(--user-avatar-forum-size-profile-mobile);
        height: var(--user-avatar-forum-size-profile-mobile);
    }

    .profile-card-avatar-wrap {
        width: var(--user-avatar-forum-size-profile-mobile);
        height: var(--user-avatar-forum-size-profile-mobile);
    }

    img.user-avatar-forum.user-avatar-forum--sm {
        width: var(--user-avatar-forum-size-sm);
        height: var(--user-avatar-forum-size-sm);
    }
}

@media (max-width: 480px) {
    img.user-avatar-forum.user-avatar-forum--profile {
        width: var(--user-avatar-forum-size-profile-xs);
        height: var(--user-avatar-forum-size-profile-xs);
    }

    .profile-card-avatar-wrap {
        width: var(--user-avatar-forum-size-profile-xs);
        height: var(--user-avatar-forum-size-profile-xs);
    }
}

/* Grup yanıtları vb. */
img.user-avatar-forum.user-avatar-forum--sm {
    width: var(--user-avatar-forum-size-sm);
    height: var(--user-avatar-forum-size-sm);
}

/* Üst bar profil görseli — masaüstü: dış çerçeve; yalnızca sağda padding; avatar sola yapışık, sağında dikey çizgi; mobil: çerçeve yalnızca avatarda */
@media (min-width: 577px) {
    #mainNavbar .profile-button {
        --navbar-profile-avatar: 38px;
        border-width: 1px !important;
        border-style: solid !important;
        border-color: color-mix(in srgb, var(--text-color) 14%, transparent) !important;
        border-radius: var(--user-avatar-forum-radius) !important;
        padding: 0 0.56rem 0 0 !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        align-items: stretch !important;
        /* Efekt gölgeleri kesilmesin */
        overflow: visible !important;
        background: color-mix(in srgb, var(--background-color) 42%, transparent) !important;
        backdrop-filter: blur(10px) saturate(1.08);
        -webkit-backdrop-filter: blur(10px) saturate(1.08);
        box-shadow:
            0 1px 2px color-mix(in srgb, #000 6%, transparent),
            inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent) !important;
    }
    [data-bs-theme="dark"] #mainNavbar .profile-button {
        border-color: color-mix(in srgb, var(--text-color) 18%, transparent) !important;
        background: color-mix(in srgb, #000 28%, transparent) !important;
        box-shadow:
            0 1px 3px color-mix(in srgb, #000 28%, transparent),
            inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent) !important;
    }
    #mainNavbar .profile-button:hover,
    #mainNavbar .profile-button:focus-visible,
    #mainNavbar .profile-button:active {
        border-width: 1px !important;
        border-style: solid !important;
        border-color: color-mix(in srgb, var(--primary-color) 28%, transparent) !important;
        background: color-mix(in srgb, var(--background-color) 52%, transparent) !important;
        box-shadow:
            0 1px 3px color-mix(in srgb, #000 8%, transparent),
            inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent) !important;
    }
    [data-bs-theme="dark"] #mainNavbar .profile-button:hover,
    [data-bs-theme="dark"] #mainNavbar .profile-button:focus-visible,
    [data-bs-theme="dark"] #mainNavbar .profile-button:active {
        background: color-mix(in srgb, #000 36%, transparent) !important;
        border-color: color-mix(in srgb, var(--primary-color) 32%, transparent) !important;
    }

    #mainNavbar .profile-button .profile-avatar {
        width: var(--navbar-profile-avatar) !important;
        flex: 0 0 var(--navbar-profile-avatar) !important;
        height: auto !important;
        min-height: var(--navbar-profile-avatar) !important;
        align-self: stretch !important;
        border-radius: var(--user-avatar-forum-radius) 0 0 var(--user-avatar-forum-radius) !important;
        object-fit: cover !important;
        object-position: center !important;
        border: none !important;
        border-right-width: 1px !important;
        border-right-style: solid !important;
        border-right-color: color-mix(in srgb, var(--text-color) 12%, transparent) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    #mainNavbar .profile-button .profile-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-left: 0.48rem !important;
        overflow: visible !important;
    }

    #mainNavbar .profile-button .profile-name {
        font-size: 0.97rem !important;
        font-weight: 400 !important;
    }

    #mainNavbar .profile-button .profile-role {
        font-size: 0.76rem !important;
        opacity: 0.82 !important;
    }

    #mainNavbar .profile-button .fa-chevron-down {
        align-self: center !important;
        font-size: 0.74rem !important;
    }
}

@media (max-width: 576px) {
    #mainNavbar .profile-button .profile-avatar {
        width: var(--user-avatar-forum-size-md) !important;
        height: var(--user-avatar-forum-size-md) !important;
        border-radius: var(--user-avatar-forum-radius) !important;
        object-fit: cover !important;
        border-width: var(--user-avatar-forum-border-width) !important;
        border-style: solid !important;
        border-color: var(--user-avatar-forum-border-color) !important;
        box-shadow: var(--user-avatar-forum-shadow) !important;
        flex-shrink: 0;
        overflow: hidden !important;
    }
}

/*
 * Büyük profil avatarı: çerçeve sarmalayıcıda; içerideki görsel border-radius ile
 * tam örtüşür (tek başına img border’ında bazı motorlarda kırpma zayıf kalabiliyor).
 */
.profile-card-avatar-wrap {
    line-height: 0;
    width: var(--user-avatar-forum-size-profile);
    height: var(--user-avatar-forum-size-profile);
    box-sizing: border-box;
    border-width: var(--user-avatar-forum-border-width, 1px);
    border-style: solid;
    border-color: var(--user-avatar-forum-border-color, var(--text-color));
    border-radius: var(--user-avatar-forum-radius);
    overflow: hidden;
    box-shadow: var(--user-avatar-forum-shadow);
}

.profile-card-avatar-wrap > img.user-avatar-forum {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Profil kartı: avatar üzerindeki personel rozeti — köşede boşluk, çerçeveye yapışmasın */

.profile-card-avatar-stack .profile-avatar-corner-badge {
    position: absolute;
    z-index: 2;
    inset-block-end: 0.38rem;
    inset-inline-end: 0.38rem;
}

/* Profil kartı köşe rozeti: hafif şeffaf, okunaklı; boyut bir tık üstü */
.profile-card-avatar-stack .profile-avatar-corner-badge.user-badge-v4 {
    background: rgba(var(--badge-v4-color-rgb, 220, 53, 69), 0.46) !important;
    border: 1px solid rgba(var(--badge-v4-color-rgb, 220, 53, 69), 0.62) !important;
    color: var(--badge-v4-color, var(--bs-danger)) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.profile-card-avatar-stack .profile-avatar-corner-badge.user-badge-v4:hover {
    background: rgba(var(--badge-v4-color-rgb, 220, 53, 69), 0.58) !important;
    border-color: rgba(var(--badge-v4-color-rgb, 220, 53, 69), 0.72) !important;
    color: var(--badge-v4-color, var(--bs-danger)) !important;
    filter: none;
}

[data-bs-theme="light"] .profile-card-avatar-stack .profile-avatar-corner-badge.user-badge-v4 {
    background: rgba(var(--badge-v4-color-rgb, 220, 53, 69), 0.4) !important;
    border: 1px solid rgba(var(--badge-v4-color-rgb, 220, 53, 69), 0.58) !important;
    color: var(--badge-v4-color, var(--bs-danger)) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) !important;
}

[data-bs-theme="light"] .profile-card-avatar-stack .profile-avatar-corner-badge.user-badge-v4:hover {
    background: rgba(var(--badge-v4-color-rgb, 220, 53, 69), 0.52) !important;
    filter: none;
}

.profile-card-avatar-stack .profile-avatar-corner-badge.staff-role-badge-v4--icon-only {
    width: 19px !important;
    min-width: 19px !important;
    max-width: 19px !important;
    height: 19px !important;
}

.profile-card-avatar-stack .profile-avatar-corner-badge.staff-role-badge-v4--icon-only .user-badge-v4-rank-icon {
    width: 19px !important;
    height: 19px !important;
    border-right: none !important;
}

.profile-card-avatar-stack .profile-avatar-corner-badge .user-badge-v4-rank-icon i {
    font-size: 0.58rem !important;
    opacity: 0.95 !important;
}

@media (max-width: 768px) {
    .profile-card-avatar-stack .profile-avatar-corner-badge.staff-role-badge-v4--icon-only {
        width: 21px !important;
        min-width: 21px !important;
        max-width: 21px !important;
        height: 21px !important;
    }

    .profile-card-avatar-stack .profile-avatar-corner-badge.staff-role-badge-v4--icon-only .user-badge-v4-rank-icon {
        width: 21px !important;
        height: 21px !important;
    }

    .profile-card-avatar-stack .profile-avatar-corner-badge .user-badge-v4-rank-icon i {
        font-size: 0.62rem !important;
    }
}

@supports not (inset-inline-end: 1px) {
    .profile-card-avatar-stack .profile-avatar-corner-badge {
        bottom: 0.38rem;
        right: 0.38rem;
    }

    [dir="rtl"] .profile-card-avatar-stack .profile-avatar-corner-badge {
        right: auto;
        left: 0.38rem;
    }
}

/* === assets/css/responsive.css === */
/* Responsive Design İyileştirmeleri */

/* Mobile First Approach */
:root {
    /* Ana sayfa ile aynı: mobilde içerik daha geniş (önceden 1rem) */
    --mobile-padding: 0.5rem;
    --tablet-padding: 1.5rem;
    --desktop-padding: 2rem;
}

/* Base Mobile Styles - global container override yerine sadece mobilde uygula */
@media (max-width: 768px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
    }

    /* Konu sayfası vb.: ana sayfa recent-topics ile yakın yatay kart içi boşluk */
    #main-content .card:not(.search-box) {
        --bs-card-spacer-x: 0.6rem;
        --bs-card-cap-padding-x: 0.6rem;
    }
}

/* Navigation Improvements */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .navbar-nav {
        margin-top: 1rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Üst navbar profil: çerçevesiz satır; avatar kendi stiline sahip */
    #mainNavbar .profile-button {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 0.35rem;
    }
    
    #mainNavbar .profile-button .profile-info {
        margin-left: 0;
        margin-top: 0;
    }
    
    .updates-box {
        display: none !important;
    }
    
    .search-box {
        margin-bottom: 1rem !important;
    }
    
    .search-box .card-body {
        padding: 0.5rem !important;
    }
    
    .search-box .form-control {
        font-size: 0.875rem !important;
        padding: 0.375rem 0.75rem !important;
        height: 32px !important;
    }
    
    .search-box .btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
        height: 32px !important;
    }
}

/* Topic Cards Mobile */
@media (max-width: 768px) {
    .topic-card,
    .recent-topics.card {
        margin-bottom: 1rem !important;
    }

    .topic-card .card-body {
        padding: 0.75rem;
    }
}

/* Category Sidebar Mobile */
@media (max-width: 768px) {
    .category-sidebar {
        margin-bottom: 2rem;
    }
    
    .category-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .category-link .badge {
        display: none;
    }
    
    .category-link .fa-chevron-right {
        display: none;
    }
}

/* Forms Mobile */
@media (max-width: 768px) {
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    .btn:not(.btn-fantasy):not(.btn-new-topic-mobile) {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    form .btn-group,
    .card-body .btn-group,
    .modal-body .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    form .btn-group .btn,
    .card-body .btn-group .btn,
    .modal-body .btn-group .btn {
        border-radius: 4px !important;
        margin-bottom: 0.5rem;
    }

    /* Sıralama periyot segmenti: kart gövdesi dikey btn-group kuralı yan yana kalmalı */
    .card-body .leaderboard-toolbar .btn-group {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .card-body .leaderboard-toolbar .btn-group .btn {
        margin-bottom: 0 !important;
    }
}

/* Footer & Stats Mobile Ultra-Minimalist Fix */
@media (max-width: 768px) {
    .stats-container {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.25rem !important;
        padding: 0 0.25rem !important;
    }
    
    .stats-box {
        padding: 0.25rem !important;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 0.15rem !important;
        border-radius: 4px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .stats-box .icon-wrapper {
        margin: 0 auto;
        width: 24px !important;
        height: 24px !important;
    }
    
    .stats-box .icon-wrapper i {
        font-size: 0.65rem !important;
    }
    
    .stats-label {
        font-size: 0.55rem !important;
        opacity: 0.7;
        margin-top: 2px !important;
        display: block !important;
    }
    
    .stats-number, .stats-user {
        font-size: 0.75rem !important;
        font-weight: 600;
        line-height: 1 !important;
    }
}

/* Tables Mobile */
@media (max-width: 768px) {
    .table-responsive {
        border: none;
    }
    
    .table {
        font-size: 0.875rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }
    
    /* Hide less important columns on mobile */
    .table .d-none-mobile {
        display: none !important;
    }
}

/* Modal mobil: assets/css/components/site-modals.css */

/* Comments Mobile */
@media (max-width: 768px) {
    .comment-item {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .comment-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
    }
    
    .comment-meta {
        font-size: 0.8rem;
    }
    
    .comment-item .comment-actions {
        margin-top: 0 !important;
        display: flex !important;
        gap: 0.25rem !important;
        position: relative !important;
        right: 0 !important;
        top: 0 !important;
    }
    
    .comment-item .comment-actions .btn {
        padding: 0.15rem 0.35rem !important;
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        min-width: auto !important;
        height: auto !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .comment-item .comment-actions .btn i {
        font-size: 0.8rem !important;
        margin: 0 !important;
    }

    .comment-item .comment-actions form {
        display: inline !important;
    }

    /* Messages page mobile layout */
    .messages-page .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 1rem !important;
    }

    .messages-page .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Image Gallery Mobile */
@media (max-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .image-preview {
        margin-bottom: 0.5rem;
    }
    
    .image-preview img {
        height: 150px;
    }
    
    .delete-image {
        width: 25px;
        height: 25px;
        top: 5px;
        right: 5px;
    }
}

/* Navbar: arama / bildirim / profil — mobilde kompakt panel, ilgili ikonun hemen altında (data-bs-display=static + dropdown-menu-end) */
@media (max-width: 767.98px) {
    #mainNavbar .notification-dropdown .dropdown-menu.notification-menu,
    #mainNavbar .mod-reports-dropdown .dropdown-menu.notification-menu,
    #mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu,
    #mainNavbar .profile-dropdown .dropdown-menu.profile-menu {
        position: absolute !important;
        left: auto !important;
        top: 100% !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0.35rem 0 0 !important;
        width: min(242px, calc(100vw - 1rem)) !important;
        max-width: min(242px, calc(100vw - 1rem)) !important;
        min-width: 0 !important;
        max-height: min(72vh, calc(100vh - env(safe-area-inset-top, 0px) - 4.5rem)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1035 !important;
    }

    /* Arama / bildirim / şikayet: ikon hizasından biraz daha sağda (ekran kenarına yakın) */
    #mainNavbar .notification-dropdown .dropdown-menu.notification-menu,
    #mainNavbar .mod-reports-dropdown .dropdown-menu.notification-menu,
    #mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu {
        right: -0.65rem !important;
    }

    #mainNavbar .profile-dropdown .dropdown-menu.profile-menu {
        right: 0 !important;
    }

    /* Hızlı arama: küçük kabuk, sıkı input */
    #mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu > div {
        padding: 0.4rem !important;
    }

    #mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu .quick-search-input {
        min-height: 34px !important;
        font-size: 0.8rem !important;
        padding: 0.28rem 0.45rem !important;
    }

    #mainNavbar .quick-search-dropdown .dropdown-menu.quick-search-menu .input-group .btn {
        padding: 0.25rem 0.48rem !important;
        min-width: 36px !important;
    }

    /* Bildirim: sıkı başlık / satır / alt (WoW şeridi; site-modals ile uyumlu) */
    #mainNavbar .notification-dropdown .dropdown-menu.notification-menu .notification-menu-header,
    #mainNavbar .mod-reports-dropdown .dropdown-menu.notification-menu .notification-menu-header {
        padding: 0.45rem 0.55rem !important;
    }

    #mainNavbar .notification-dropdown .dropdown-menu.notification-menu .notification-item,
    #mainNavbar .mod-reports-dropdown .dropdown-menu.notification-menu .notification-item {
        padding: 0.4rem 0.45rem !important;
    }

    #mainNavbar .notification-dropdown .dropdown-menu.notification-menu .notification-menu-footer,
    #mainNavbar .mod-reports-dropdown .dropdown-menu.notification-menu .notification-menu-footer {
        padding: 0.4rem 0.45rem !important;
    }

    #mainNavbar .notification-dropdown .dropdown-menu.notification-menu .p-3,
    #mainNavbar .mod-reports-dropdown .dropdown-menu.notification-menu .p-3 {
        padding: 0.65rem !important;
    }

    /* Profil menüsü: kompakt satırlar (font-size main.css’te tüm kırılımlar için ortak) */
    #mainNavbar .profile-dropdown .dropdown-menu.profile-menu .dropdown-item {
        padding: 0.4rem 0.55rem !important;
    }

    /* Bildirim paneli: diğer ikon menülerinden biraz daha geniş okuma alanı */
    #mainNavbar .notification-dropdown .dropdown-menu.notification-menu,
    #mainNavbar .mod-reports-dropdown .dropdown-menu.notification-menu {
        width: min(300px, calc(100vw - 0.85rem)) !important;
        max-width: min(300px, calc(100vw - 0.85rem)) !important;
    }
}

/*
 * Ana sayfa / konu listesi: sıralama (En Yeni…) dropdown’ı.
 * sticky-top arama kutusu z-index 1020; varsayılan dropdown-menu 1000 — mobilde menü arkanın arkasında kalıyordu.
 * 1035: sticky ve navbar (1030) üstü, güncelleme modal backdrop (1040) altı — modal açıkken menü backdrop’un altında kalsın.
 */
@media (max-width: 768px) {
    .recent-topics .custom-dropdown .dropdown-menu {
        z-index: 1035 !important;
    }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Bootstrap md container (720px) tablette fazla dar kalıyordu */
    .container,
    .container-sm,
    .container-md {
        max-width: 98vw !important;
        padding-left: var(--tablet-padding);
        padding-right: var(--tablet-padding);
    }
    
    .topic-card .card-title {
        font-size: 1.2rem;
    }
    
    .category-link {
        padding: 1rem;
    }
}







/* Print Styles */
@media print {
    .navbar,
    .sidebar,
    .btn,
    .dropdown,
    .modal,
    .notification-dropdown,
    .mod-reports-dropdown {
        display: none !important;
    }
    
    .container {
        max-width: none !important;
        padding: 0 !important;
    }
    
    .topic-card,
    .comment-item {
        break-inside: avoid;
        border: 1px solid #ddd !important;
        margin-bottom: 1rem;
    }
    
    a {
        text-decoration: none !important;
        color: inherit !important;
    }
    
    .topic-content,
    .comment-content {
        font-size: 12pt;
        line-height: 1.4;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .user-avatar,
    .profile-avatar {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Focus — form / seçici (çerçeve metin rengi; kategori linki ayrı) */
.form-control:focus,
.form-select:focus {
    outline: 2px solid rgba(var(--text-color-rgb), 0.4);
    outline-offset: 2px;
}

.category-link:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Loading States */
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid var(--bs-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Utility Classes */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sticky-top-mobile {
    position: sticky;
    top: 0;
    z-index: 1020;
}

@media (min-width: 768px) {
    .sticky-top-mobile {
        position: static;
    }
}