/*
 * Forumum Aurora / Editorial UI System v6
 * ------------------------------------------------------------
 * A progressive enhancement layer. It does not replace the PHP
 * application or require a new database schema.
 */
:root{
  --aurora-a:#8b7cff;--aurora-b:#25d9c5;--aurora-c:#ff6f91;
  --mf-bg:#070a12;--mf-bg2:#0b1120;--mf-surface:rgba(15,22,37,.78);--mf-surface-solid:#101827;
  --mf-surface-2:#151f32;--mf-border:rgba(148,163,184,.14);--mf-border-strong:rgba(139,124,255,.34);
  --mf-text:#f4f7fb;--mf-muted:#94a3b8;--mf-accent:#8b7cff;--mf-accent-2:#25d9c5;--mf-hot:#ff6f91;
  --mf-radius:18px;--mf-radius-sm:12px;--mf-shadow:0 24px 80px rgba(0,0,0,.28);
  --mf-ease:cubic-bezier(.2,.8,.2,1);--mf-fast:160ms;--mf-normal:240ms;--mf-slow:420ms;
}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--mf-bg);color:var(--mf-text);overflow-x:hidden}
body::before{content:"";position:fixed;inset:-20% -10%;pointer-events:none;z-index:-2;background:radial-gradient(circle at 12% 10%,rgba(139,124,255,.12),transparent 28%),radial-gradient(circle at 85% 18%,rgba(37,217,197,.09),transparent 24%),radial-gradient(circle at 55% 100%,rgba(255,111,145,.06),transparent 26%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
::selection{background:rgba(139,124,255,.35);color:#fff}
:focus-visible{outline:2px solid var(--mf-accent-2);outline-offset:3px;box-shadow:0 0 0 5px rgba(37,217,197,.12)}

/* Header / navigation */
.site-header{position:sticky!important;top:0;z-index:700;background:rgba(7,10,18,.72)!important;border-bottom:1px solid var(--mf-border)!important;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.header-inner{min-height:76px!important}
.logo{letter-spacing:-.04em;transition:transform var(--mf-normal) var(--mf-ease),filter var(--mf-normal) var(--mf-ease)}
.logo:hover{transform:translateY(-1px);filter:drop-shadow(0 0 18px rgba(139,124,255,.35))}
.auth-nav>a,.auth-nav>button,.header-profile-btn{min-width:42px;min-height:42px;border-radius:12px!important;transition:background var(--mf-fast),transform var(--mf-fast),color var(--mf-fast)}
.auth-nav>a:hover,.auth-nav>button:hover,.header-profile-btn:hover{background:rgba(255,255,255,.06)!important;transform:translateY(-1px)}
.quick-nav{background:rgba(7,10,18,.58)!important;border-bottom:1px solid var(--mf-border)!important;backdrop-filter:blur(18px)}
.quick-nav-track{gap:8px!important}
.pill{border:1px solid transparent!important;background:rgba(255,255,255,.035)!important;color:#cbd5e1!important;border-radius:999px!important;transition:all var(--mf-fast) var(--mf-ease)}
.pill:hover{background:rgba(139,124,255,.10)!important;border-color:rgba(139,124,255,.22)!important;color:#fff!important;transform:translateY(-1px)}
.header-search--in-nav{background:rgba(255,255,255,.045)!important;border:1px solid var(--mf-border)!important;border-radius:14px!important;box-shadow:none!important}
.header-search--in-nav:focus-within{border-color:rgba(139,124,255,.45)!important;box-shadow:0 0 0 4px rgba(139,124,255,.08)!important}

/* Surface system */
.home-hero,.featured-topics-section,.news-feed-section,.site-poll-box,.birthday-box,.topic-title-card,.topic-summary-box,.topic-toolbar,.post-card,.profile-hero,.profile-card,.profile-tabs,.profile-section,.admin-dashboard-card,.admin-card,.theme-section,.theme-editor-hero{border:1px solid var(--mf-border)!important;background:linear-gradient(145deg,rgba(18,27,45,.86),rgba(9,14,25,.78))!important;box-shadow:var(--mf-shadow)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.home-hero,.topic-title-card,.profile-hero,.theme-editor-hero{position:relative;overflow:hidden}
.home-hero::after,.topic-title-card::after,.profile-hero::after,.theme-editor-hero::after{content:"";position:absolute;width:280px;height:280px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(139,124,255,.25),transparent 68%);pointer-events:none}
.home-hero h1,.topic-title-card h1,.profile-hero h1{letter-spacing:-.045em}

/* Editorial cards */
.featured-topic-card,.news-feed-item,.status-feed-item,.quick-action-card,.footer-stat-card-v2,.admin-mini-feed-item{transition:transform var(--mf-normal) var(--mf-ease),border-color var(--mf-normal),background var(--mf-normal),box-shadow var(--mf-normal)}
.featured-topic-card:hover,.news-feed-item:hover,.quick-action-card:hover,.admin-mini-feed-item:hover{transform:translateY(-3px);border-color:var(--mf-border-strong)!important;box-shadow:0 16px 40px rgba(0,0,0,.2)}
.gh-section-title,.admin-page-hero h1,.theme-section h2{letter-spacing:-.035em}

/* Topic */
.topic-shell{position:relative}
.breadcrumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--mf-muted)!important}
.topic-title-card{padding:28px 30px!important;border-radius:24px!important;margin-bottom:14px}
.topic-kicker,.admin-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--mf-accent-2);text-transform:uppercase}
.topic-title-card h1{font-size:clamp(1.65rem,3vw,2.55rem);line-height:1.08;margin:10px 0 0;max-width:1000px}
.topic-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px!important;border-radius:16px!important;position:sticky;top:88px;z-index:250}
.topic-toolbar .btn-primary,.topic-toolbar .btn-secondary{border-radius:11px!important}
.reading-time{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--mf-border);background:rgba(255,255,255,.025);border-radius:999px}
.topic-tags{display:flex;gap:7px;flex-wrap:wrap}.topic-tag-chip{border:1px solid var(--mf-border)!important;background:rgba(139,124,255,.06)!important;border-radius:999px!important;transition:all var(--mf-fast)}.topic-tag-chip:hover{border-color:var(--mf-border-strong)!important;transform:translateY(-1px)}
.post-card{overflow:clip!important;border-radius:20px!important;margin-bottom:16px!important;box-shadow:0 14px 50px rgba(0,0,0,.18)!important}
.post-card:hover{border-color:rgba(139,124,255,.24)!important}
.post-author:not(.pb-playground-preview):not([class*="postbit-style-custom"]){background:rgba(255,255,255,.018)!important;border-right:1px solid var(--mf-border)!important}
/* GERÇEK HATA (ölçümle bulundu): bu kural .post-author'a !important ile
   arka plan veriyordu. Canlı tasarımcının önizleme kutusu ve mağaza
   kartlarındaki mini önizlemeler de .post-author sınıfını taşıdığı için,
   kullanıcının SEÇTİĞİ renk ezilip önizleme hiç değişmiyordu
   (doğrulandı: <style> doğru CSS üretiyor ama hesaplanan değer 'none').
   Önizleme yüzeyleri bu kuraldan muaf tutuluyor - zaten amaçları
   kullanıcının kendi tasarımını göstermek. */
.post-content{font-size:1rem;line-height:1.82;overflow-wrap:anywhere}
.post-content blockquote{border-left:3px solid var(--mf-accent)!important;background:rgba(139,124,255,.055)!important;border-radius:0 12px 12px 0;padding:12px 16px!important}
.post-content pre{position:relative;border:1px solid var(--mf-border)!important;border-radius:14px!important;background:#070b12!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.post-content img{border-radius:14px;max-width:100%;height:auto;transition:transform var(--mf-normal),box-shadow var(--mf-normal)}.post-content img:hover{transform:scale(1.012);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.is-solution{border-color:rgba(37,217,197,.42)!important;box-shadow:0 0 0 1px rgba(37,217,197,.08),0 18px 60px rgba(0,0,0,.2)!important}

/* Profile */
.profile-hero{border-radius:26px!important;min-height:260px!important}
.profile-hero .avatar,.profile-hero img{box-shadow:0 0 0 5px rgba(7,10,18,.85),0 0 0 7px rgba(139,124,255,.3),0 24px 60px rgba(0,0,0,.28)}
.profile-tabs{position:sticky;top:76px;z-index:180;border-radius:16px!important;display:flex;gap:6px;overflow:auto;padding:7px!important}.profile-tabs a{border-radius:10px!important;white-space:nowrap}.profile-tabs a.active{background:linear-gradient(135deg,rgba(139,124,255,.22),rgba(37,217,197,.12))!important;color:#fff!important}

/* Reaction burst / toast */
.mf-toast-stack{position:fixed;right:22px;bottom:22px;z-index:1600;display:grid;gap:8px;max-width:min(380px,calc(100vw - 32px))}.mf-toast{padding:12px 15px;border:1px solid var(--mf-border-strong);background:rgba(12,18,30,.9);backdrop-filter:blur(18px);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:mf-in .24s var(--mf-ease)}.mf-toast.success{border-color:rgba(37,217,197,.35)}
@keyframes mf-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.mf-reaction-burst{position:fixed;pointer-events:none;z-index:1700;font-size:18px;animation:mf-burst 700ms var(--mf-ease) forwards}@keyframes mf-burst{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.15) rotate(var(--r))}}

/* Command palette */
.mf-command-backdrop{position:fixed;inset:0;z-index:1500;background:rgba(2,5,10,.68);backdrop-filter:blur(10px);display:none}.mf-command-backdrop.is-open{display:block}
.mf-command{position:fixed;top:10vh;left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 28px));border:1px solid var(--mf-border-strong);border-radius:22px;background:rgba(12,18,30,.96);box-shadow:0 40px 100px rgba(0,0,0,.45);overflow:hidden}.mf-command-head{padding:14px;border-bottom:1px solid var(--mf-border)}.mf-command-head input{width:100%;border:0!important;background:transparent!important;box-shadow:none!important;font-size:1.05rem;color:#fff}.mf-command-list{max-height:55vh;overflow:auto;padding:8px}.mf-command-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-radius:12px;background:transparent;color:#dbe5f2;text-align:left;cursor:pointer}.mf-command-item:hover,.mf-command-item.is-active{background:rgba(139,124,255,.12);color:#fff}.mf-command-item small{display:block;color:var(--mf-muted);margin-top:2px}.mf-command-foot{display:flex;justify-content:space-between;padding:9px 13px;border-top:1px solid var(--mf-border);font-size:.72rem;color:var(--mf-muted)}

/* Preferences */
.mf-preferences{position:fixed;right:18px;top:88px;width:min(360px,calc(100vw - 28px));z-index:1200;border:1px solid var(--mf-border-strong);background:rgba(12,18,30,.94);backdrop-filter:blur(22px);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.4);padding:16px;display:none}.mf-preferences.is-open{display:block}.mf-pref-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--mf-border)}.mf-pref-row:last-child{border-bottom:0}.mf-pref-row strong{font-size:.88rem}.mf-pref-row span{font-size:.75rem;color:var(--mf-muted)}.mf-pref-actions{display:flex;gap:7px;flex-wrap:wrap}.mf-mini-btn{min-height:36px;padding:0 11px;border-radius:10px;border:1px solid var(--mf-border);background:rgba(255,255,255,.04);color:#dbe5f2;cursor:pointer}.mf-mini-btn.is-active{background:rgba(139,124,255,.16);border-color:rgba(139,124,255,.35);color:#fff}

/* Reading / density */
body.mf-focus-mode .site-header,body.mf-focus-mode .quick-nav,body.mf-focus-mode .sidebar,body.mf-focus-mode .site-footer,body.mf-focus-mode .mobile-bottom-nav{display:none!important}body.mf-focus-mode .main-layout,body.mf-focus-mode .main-content{max-width:900px!important;margin-inline:auto!important}body.mf-focus-mode .post-card{border-radius:24px!important}
body.mf-density-compact .post-card{margin-bottom:8px!important}.mf-reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--mf-accent),var(--mf-accent-2));z-index:2200;box-shadow:0 0 16px rgba(139,124,255,.5)}
.mf-scroll-top{position:fixed;right:20px;bottom:88px;width:44px;height:44px;border-radius:50%;border:1px solid var(--mf-border-strong);background:rgba(12,18,30,.82);color:#fff;backdrop-filter:blur(12px);cursor:pointer;z-index:900;opacity:0;transform:translateY(10px);pointer-events:none;transition:all var(--mf-normal)}.mf-scroll-top.is-visible{opacity:1;transform:none;pointer-events:auto}.mf-scroll-top:hover{transform:translateY(-2px)}

/* Skeleton / loading */
.mf-skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.05)!important;border-color:transparent!important;color:transparent!important}.mf-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:mf-shimmer 1.25s infinite}@keyframes mf-shimmer{100%{transform:translateX(100%)}}

/* Tooltips */
[data-mf-tooltip]{position:relative}.mf-tooltip{position:fixed;z-index:1800;max-width:260px;padding:7px 9px;border:1px solid var(--mf-border);border-radius:9px;background:rgba(8,12,20,.95);color:#fff;font-size:.75rem;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:mf-in .14s var(--mf-ease)}

/* Spoiler / code copy */
.mf-spoiler{border:1px solid var(--mf-border);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.025)}.mf-spoiler>summary{cursor:pointer;padding:11px 13px;font-weight:700}.mf-spoiler[open]>summary{border-bottom:1px solid var(--mf-border)}.mf-spoiler-content{padding:13px}
.mf-copy-code{position:absolute;right:8px;top:8px;border:1px solid var(--mf-border);background:rgba(8,12,20,.82);color:#dbe5f2;border-radius:8px;padding:5px 8px;font-size:.72rem;cursor:pointer}

/* Mobile app shell */
.mobile-bottom-nav{backdrop-filter:blur(22px)!important;background:rgba(7,10,18,.82)!important;border-top:1px solid var(--mf-border)!important}.mobile-bottom-nav a,.mobile-bottom-nav button{min-height:48px!important;min-width:48px!important}.mobile-bottom-nav .active{color:var(--mf-accent-2)!important;position:relative}.mobile-bottom-nav .active::before{content:"";position:absolute;top:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,var(--mf-accent),var(--mf-accent-2));box-shadow:0 0 12px rgba(37,217,197,.5)}

/* Admin v6 */
.p-body--admin{background:#070a12!important;color:#e7edf6!important}.p-header{background:rgba(8,13,22,.88)!important;border-bottom:1px solid rgba(148,163,184,.12)!important;backdrop-filter:blur(20px)}.p-nav{background:rgba(8,13,22,.9)!important;border-right:1px solid rgba(148,163,184,.1)!important}.p-nav-entryLink,.p-nav-sectionHeader{border-radius:11px!important;transition:all var(--mf-fast)}.p-nav-entry.is-active .p-nav-entryLink{background:linear-gradient(135deg,rgba(139,124,255,.18),rgba(37,217,197,.08))!important;box-shadow:inset 3px 0 var(--mf-accent)}.p-main{background:radial-gradient(circle at 75% 0%,rgba(139,124,255,.07),transparent 28%),#070a12!important}.p-main-inner{max-width:1480px!important}.admin-page-hero{border:1px solid var(--mf-border)!important;background:linear-gradient(135deg,rgba(18,27,45,.94),rgba(9,14,25,.9))!important;border-radius:24px!important;padding:26px!important;box-shadow:var(--mf-shadow)!important}.admin-page-hero h1{font-size:clamp(1.8rem,3vw,2.8rem)!important}.admin-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}.admin-kpi-grid .stat-card{min-height:110px;border-radius:16px!important;background:rgba(14,20,32,.78)!important;border:1px solid var(--mf-border)!important;transition:all var(--mf-normal)}.admin-kpi-grid .stat-card:hover{transform:translateY(-3px);border-color:var(--mf-border-strong)!important}.admin-dashboard-card,.admin-card{border-radius:18px!important}.admin-card-head{border-bottom:1px solid var(--mf-border)!important}.quick-action-card{border:1px solid var(--mf-border)!important;background:rgba(255,255,255,.025)!important;border-radius:14px!important}.admin-table tr{border-color:var(--mf-border)!important}.admin-table tr:hover{background:rgba(139,124,255,.04)!important}
.admin-command-kbd{font-size:.68rem;padding:3px 6px;border:1px solid var(--mf-border);border-radius:6px;color:var(--mf-muted)}

/* High contrast */
html[data-mf-contrast="high"]{--mf-border:rgba(255,255,255,.34);--mf-border-strong:rgba(255,255,255,.58);--mf-muted:#c5cfdb}html[data-mf-contrast="high"] .site-header,html[data-mf-contrast="high"] .quick-nav,html[data-mf-contrast="high"] .post-card,html[data-mf-contrast="high"] .home-hero,html[data-mf-contrast="high"] .profile-hero{backdrop-filter:none;background:#0a0f18!important}

@media (max-width:1100px){.admin-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.topic-toolbar{top:72px}.main-layout{gap:14px!important}}
@media (max-width:760px){
  html{scroll-padding-top:76px}.header-inner{min-height:62px!important}.site-header{top:0}.quick-nav{position:sticky!important;top:62px;z-index:690}.header-search--in-nav{margin:8px 10px!important}.quick-nav-track{overflow-x:auto;scrollbar-width:none;padding-bottom:8px}.quick-nav-track::-webkit-scrollbar{display:none}.topic-title-card{padding:22px 18px!important;border-radius:20px!important}.topic-title-card h1{font-size:1.55rem}.topic-toolbar{top:124px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.topic-toolbar>*{flex:0 0 auto}.post-card{display:block!important}.post-author{border-right:0!important;border-bottom:1px solid var(--mf-border)!important;padding:14px!important}.post-content{font-size:.96rem;line-height:1.72}.profile-tabs{top:62px}.admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.admin-page-hero{padding:20px!important}.mf-preferences{top:auto;bottom:74px;right:12px}.mf-scroll-top{bottom:78px;right:12px}.mf-toast-stack{bottom:76px;right:12px}
}
@media (max-width:480px){.admin-kpi-grid{grid-template-columns:1fr!important}.admin-kpi-grid .stat-card{min-height:88px}.topic-title-card h1{font-size:1.38rem}.home-hero{padding:20px!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.mf-reading-progress{transition:none!important}}
.admin-dashboard-v6-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.admin-span-8{grid-column:span 8}.admin-span-4{grid-column:span 4}.admin-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-health-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--mf-border);border-radius:13px;background:rgba(255,255,255,.025)}.admin-health-item>div{min-width:0;flex:1}.admin-health-item strong,.admin-health-item small{display:block}.admin-health-item small{font-size:.72rem;color:var(--mf-muted);margin-top:2px}.admin-health-item b{font-size:.64rem;letter-spacing:.08em;color:#7ee2c7}.admin-health-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}.admin-health-dot.ok{background:#35d49b;box-shadow:0 0 14px rgba(53,212,155,.65)}.admin-health-dot.warn{background:#f5b84b;box-shadow:0 0 14px rgba(245,184,75,.45)}.admin-shortcut-list{display:grid;gap:7px}.admin-shortcut-list a{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--mf-border);border-radius:12px;color:inherit;text-decoration:none;background:rgba(255,255,255,.02)}.admin-shortcut-list a:hover{border-color:var(--mf-border-strong);transform:translateY(-1px)}.admin-shortcut-list a>span{font-size:1.15rem}.admin-shortcut-list a>div{flex:1}.admin-shortcut-list strong,.admin-shortcut-list small{display:block}.admin-shortcut-list small{font-size:.68rem;color:var(--mf-muted);margin-top:2px}.admin-token-preview{display:grid;gap:8px}.token-swatch{display:grid;grid-template-columns:18px 1fr auto;gap:9px;align-items:center;font-size:.8rem}.token-swatch i{width:18px;height:18px;border-radius:6px}.token-swatch code{font-size:.65rem;color:var(--mf-muted)}.admin-feature-pills{display:flex;flex-wrap:wrap;gap:8px}.admin-feature-pills span{padding:7px 10px;border:1px solid var(--mf-border);border-radius:999px;background:rgba(255,255,255,.025);font-size:.74rem;color:#cbd5e1}@media(max-width:900px){.admin-span-8,.admin-span-4{grid-column:span 12}}@media(max-width:560px){.admin-health-grid{grid-template-columns:1fr}}
.experience-lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.experience-lab-card{position:relative;text-align:left;padding:17px;border:1px solid var(--mf-border);border-radius:16px;background:rgba(255,255,255,.025);color:#fff;cursor:pointer;transition:all var(--mf-normal) var(--mf-ease)}.experience-lab-card:hover{transform:translateY(-2px);border-color:var(--mf-border-strong);background:rgba(139,124,255,.07)}.experience-lab-card strong,.experience-lab-card span,.experience-lab-card b{display:block}.experience-lab-card span{font-size:.75rem;color:var(--mf-muted);margin-top:5px}.experience-lab-card b{position:absolute;right:12px;top:12px;font-size:.62rem;color:#70e0bd;letter-spacing:.08em;text-transform:uppercase}@media(max-width:850px){.experience-lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.experience-lab-grid{grid-template-columns:1fr}}

/* GERÇEK HATA (kullanıcı geri bildirimiyle bulundu): modern-forum.css
   içinde .apps-dropdown-menu için "display:none !important" kuralı,
   JS'in tıklamayla body'ye taşıyıp clone'ladığı menüyü de (aynı class'ı
   taşıdığı için) gizliyordu - JS'in inline "display:block" ayarı
   !important tarafından eziliyordu. Detached (body'ye taşınmış) klon
   için açıkça görünür kılan, daha sonra yüklenen bir kural. */
.apps-dropdown-menu-detached {
  display: block !important;
}

/* ---------------------------------------------------------------
   TASARIM KARARI — mobil header yüksekliği
   Header position:sticky, yani bu yükseklik sadece sayfa açılışında
   değil HER KAYDIRMADA kalıcı olarak ekrandan gidiyor. Aurora
   katmanı 72px min-height + 0.72rem padding veriyordu (ölçülen: 86px).
   iOS/Android standart navigasyon çubuğu 56px'dir. Mobilde 60px'e
   çekiliyor; masaüstünde ferah hali korunuyor çünkü orada dikey alan
   kıt bir kaynak değil.
   Dokunma hedefleri (hamburger, ikonlar) 40px+ kalıyor - erişilebilirlik
   minimumu 44px'e yakın, sıkıştırma tıklanabilirliği bozmuyor.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  .site-header {
    min-height: 60px !important;
    padding: 0.4rem 0 !important;
  }
  .header-inner {
    min-height: 44px !important;
  }
  .site-header .logo {
    font-size: 1.15rem !important;
  }
  .header-hamburger-btn {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ==================================================================
   COMPACT COMMUNITY UI — supplied visual references
   Dense navy surfaces, table-like forum rows, amber actions and
   structured sidebar cards. Branding remains the forum's own.
   ================================================================== */
:root:not([data-theme="light"]){
  --x-bg:#181b2a;--x-header:#1c1f2e;--x-panel:#2b2f45;--x-panel-2:#30354d;
  --x-row:#292d41;--x-line:#414760;--x-text:#f5f5fb;--x-muted:#aeb4d0;
  --x-link:#b8c2ef;--x-amber:#bd7300;--x-orange:#ff7614;--x-green:#39c74c;
  --mf-bg:var(--x-bg);--mf-bg-2:#202334;--mf-surface:#292d41;
  --mf-surface-solid:var(--x-panel);--mf-surface-2:var(--x-panel-2);
  --mf-border:rgba(158,166,206,.22);--mf-border-strong:rgba(180,188,226,.34);
  --mf-text:var(--x-text);--mf-muted:var(--x-muted);--mf-accent:#777da8;
}
:root:not([data-theme="light"]) body{background:var(--x-bg)!important;color:var(--x-text)!important;font-size:15px}
.container{max-width:1900px!important;width:calc(100% - 26px)!important}
.site-header{min-height:74px!important;background:var(--x-header)!important;border-top:7px solid #3e403f!important;border-bottom:1px solid #0e101a!important;backdrop-filter:none!important}
.header-inner{min-height:66px!important;gap:14px!important}
.logo{flex:0 0 auto;min-width:170px;font-size:1.45rem!important;font-weight:900!important;letter-spacing:-.04em}
.site-logo-img{max-height:48px!important;max-width:180px!important}
.header-hamburger-btn{order:-1;width:34px!important;height:34px!important;border:0!important;background:transparent!important;font-size:0!important}
.header-hamburger-btn::before{content:"⌂";font-size:1.35rem;color:#9299b5}
.primary-nav{display:flex;align-items:center;gap:4px;min-width:0;flex:1;height:100%}
.primary-nav a{display:flex;align-items:center;gap:6px;height:48px;padding:0 16px;border-radius:6px;color:var(--x-link);text-decoration:none;font-size:1rem;white-space:nowrap;transition:.16s ease}
.primary-nav a:hover,.primary-nav a.is-active{background:#25293c;color:#fff}.primary-nav a.is-active{font-weight:800}
.auth-nav{flex:0 0 auto;gap:2px!important;padding:6px;background:#25293b;border-radius:6px}
.auth-nav>button,.auth-nav>a,#im-bubble-btn,.notif-bell-btn,.login-streak-trigger,.header-profile-btn{min-width:38px!important;height:38px!important;border:0!important;border-radius:4px!important;background:transparent!important;color:#aab0c9!important;box-shadow:none!important}
.header-profile-btn{width:auto!important;padding:0 7px!important}
.header-profile-btn::after{content:attr(data-username);margin-left:7px;font-size:.92rem;color:#c6cae1}
.quick-nav{position:relative!important;background:#222638!important;border:1px solid var(--x-line)!important;margin:20px 13px 14px!important;border-radius:7px!important;overflow:visible!important}
.quick-nav>.header-search--in-nav{position:absolute;right:8px;top:-66px;width:46px!important;height:44px;overflow:hidden;margin:0!important;padding:0!important;border:0!important;background:#292d41!important;z-index:4}
.quick-nav>.header-search--in-nav input{width:0!important;padding:0!important}.quick-nav>.header-search--in-nav .voice-search-btn{display:none!important}.quick-nav>.header-search--in-nav .advanced-search-link{display:grid!important;place-items:center;width:46px;height:44px;font-size:0}.quick-nav>.header-search--in-nav .advanced-search-link::before{content:"⌕";font-size:1.55rem}
.quick-nav-track{min-height:50px;gap:0!important;padding:0!important;overflow-x:auto}
.quick-nav .pill{display:flex!important;align-items:center;min-height:50px;padding:0 17px!important;border:0!important;border-right:1px solid var(--x-line)!important;border-radius:0!important;background:transparent!important;color:#fff!important;font-weight:650!important}
.quick-nav .pill:hover{background:#30354d!important}
.quick-topic-cta{margin-left:auto}.quick-topic-cta>.pill{background:var(--x-amber)!important;color:#fff!important}
main.container{padding-top:0!important}
.main-layout{grid-template-columns:minmax(0,1fr) 360px!important;gap:12px!important}
.widget,.category,.activity-widget,.featured-topics-section,.news-feed-section,.welcome-block,.profile-header,.profile-tabs-widget,.reply-form,.wall-post{background:var(--x-panel)!important;border:1px solid var(--x-line)!important;border-radius:7px!important;box-shadow:none!important}
.widget{padding:0!important;overflow:hidden}.widget>h3,.widget>.widget-tabs{min-height:52px;margin:0!important;padding:0 16px!important;display:flex;align-items:center;border-bottom:1px solid var(--x-line);background:#30344b;font-size:1.05rem}
.widget>p,.widget>ul,.widget>form,.widget>.tab-panel,.widget>.online-member-list,.widget>.online-staff-list,.widget>.sidebar-pinned-list,.widget>.sidebar-guide-list,.widget>.daily-word-head,.widget>.daily-word-scramble,.widget>.daily-word-form,.widget>.daily-word-result{margin-left:14px!important;margin-right:14px!important}
.category{margin-bottom:22px!important;overflow:hidden}.category>h2,.category-header{min-height:64px!important;margin:0!important;padding:0 18px!important;display:flex!important;align-items:center!important;background:#2d3148!important;border-bottom:1px solid var(--x-line)!important;font-size:1.35rem!important}
.forum-list{background:transparent!important}.forum-item--grid{position:relative!important;grid-template-columns:minmax(0,1fr) minmax(320px,38%)!important;min-height:126px!important;border-bottom:1px solid var(--x-line)!important;background:var(--x-row)!important}.forum-item--grid:last-child{border-bottom:3px solid var(--x-orange)!important}
.forum-item-stripe{position:absolute!important;left:0;right:0;bottom:0;width:auto!important;height:3px!important;background:linear-gradient(90deg,#ff9e00,#ff285a)!important}
.forum-item-grid-body{padding:20px 18px!important}.forum-item-main{gap:18px!important}.forum-item-icon-box{width:58px!important;height:58px!important;border-radius:7px!important;background:#41465f!important;font-size:1.55rem!important}.forum-item-textblock>a strong{font-size:1.16rem!important;color:var(--x-link)!important}.forum-item-textblock p{font-size:.86rem!important;color:#d3d6e7!important;margin-top:4px!important}.forum-item-stats{margin-top:12px!important;gap:24px!important}.forum-item-stats span{color:#aeb4d0!important}.forum-item-stats strong{color:#fff!important;font-size:1.05rem}
.forum-item-lastpost-col{padding:13px 15px!important;border-left:1px solid var(--x-line)!important;background:#2c3046!important}.forum-item-topiclist-row{padding:6px 0!important;border-bottom:1px solid rgba(166,174,214,.13)}.forum-item-topiclist-title{color:var(--x-link)!important;font-weight:700}.forum-item-topiclist-meta{font-size:.7rem!important}
.forum-item--grid:has(.forum-item-lastpost-col.is-empty){grid-template-columns:minmax(0,1fr) 230px!important}.forum-item--grid:has(.forum-item-lastpost-col.is-empty) .forum-item-lastpost-col{grid-column:auto!important;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--x-line)!important;background:#2c3046!important}
.forum-item-lastpost-col.is-empty .forum-item-lastpost{background:#24283a!important;border-color:#444a64!important;color:#c1c7df!important}
.sidebar{gap:12px!important}.member-grid,.widget-list{margin-top:0!important;margin-bottom:0!important}.widget-list li,.member-grid li,.sidebar-pinned-list a,.sidebar-guide-list a{padding:10px 2px!important;border-bottom:1px solid var(--x-line)!important}
.rank-widget ol{list-style:none;margin:0;padding:0}.rank-widget li{display:grid;grid-template-columns:30px 36px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:62px;padding:7px 14px;border-bottom:1px solid var(--x-line)}.rank-widget li:last-child{border-bottom:0}.rank-widget li>b{text-align:center;color:#f4cf00}.rank-widget li>span{min-width:0}.rank-widget li>span a,.rank-widget li>span small,.rank-widget li>strong,.rank-widget li>strong small{display:block}.rank-widget li>span a{overflow:hidden;text-overflow:ellipsis;color:#71adff;font-weight:700}.rank-widget li>span small{font-size:.68rem;color:#aeb4d0;margin-top:2px}.rank-widget li>strong{color:#c3c7da;text-align:right;font-size:1.05rem}.rank-widget li>strong small{font-size:.56rem}.rank-widget h3 small{margin-left:auto;color:#aeb4d0;font-size:.72rem;font-weight:500}.badge-awards-widget li>strong{max-width:90px;font-size:.63rem;text-transform:uppercase}.badge-awards-widget li>span a{color:#bfc3db;font-weight:500}
.btn-primary,.tw-btn-primary,.devtool-actions button[data-network-run]{background:var(--x-amber)!important;border-color:#d08a10!important;color:#fff!important;border-radius:5px!important;box-shadow:none!important}.btn-secondary{background:#3a3f59!important;border:1px solid #555b79!important;color:#fff!important;border-radius:5px!important}.btn-primary:hover,.tw-btn-primary:hover{filter:brightness(1.12);transform:none!important}
.login-streak-dialog{max-width:min(94vw,440px)!important}.login-streak-card{padding:0!important;border-radius:4px!important;background:#2d3148!important}.login-streak-title{padding:18px;border-bottom:1px solid var(--x-line)}.login-streak-stats{margin:0!important;padding:18px;grid-template-columns:1fr!important}.login-streak-stats>div{display:flex;justify-content:space-between;padding:5px 0!important;border:0!important;background:transparent!important;text-align:left!important}.login-streak-month-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px 12px;color:#bfc4df}.login-streak-month-head span:last-child{text-align:right}.login-streak-month-head strong{font-size:1rem;color:#fff}.login-streak-weekdays,.login-streak-calendar--month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 16px}.login-streak-weekdays{padding-bottom:8px;border-bottom:1px solid var(--x-line)}.login-streak-weekdays b{text-align:center;font-size:.68rem;color:#aeb4d0}.login-streak-calendar--month{padding-top:8px;padding-bottom:18px}.login-streak-calendar--month span{min-height:42px!important;border:0!important;background:transparent!important}.login-streak-calendar--month span.is-visited{border-radius:50%!important;background:#35c64a!important;color:#fff}.login-streak-calendar--month span.is-today:not(.is-visited){border:2px solid #858ab3!important;border-radius:50%!important}.login-streak-calendar--month span.is-blank{visibility:hidden}.login-streak-calendar--month i{font-size:.48rem}
.user-menu-dropdown>.apps-dropdown-menu{width:420px!important;padding:0!important;background:#2b2f45!important;border:1px solid #4b506b!important;border-radius:3px!important}.account-menu-summary{display:grid;grid-template-columns:70px 1fr;gap:13px;padding:14px 16px;border-bottom:1px solid var(--x-line)}.account-menu-summary>div>*{display:block}.account-menu-summary strong{font-size:1.05rem}.account-menu-summary small,.account-menu-summary span{color:#bdc2d9;margin-top:3px}.account-menu-summary span{font-size:.73rem}.account-menu-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--x-line)}.account-menu-tabs span{padding:12px 16px}.account-menu-tabs span:first-child{border-bottom:3px solid #9da3d0;color:#fff}.user-menu-dropdown>.apps-dropdown-menu>a,.user-menu-dropdown>.apps-dropdown-menu form button{display:inline-flex!important;width:50%!important;min-height:40px!important;vertical-align:top}.user-menu-group-label,.user-menu-divider{width:100%}.user-menu-logout-btn{width:100%!important}
.devtools-hero{min-height:88px!important;border-radius:7px!important;background:var(--x-panel)!important}.devtools-hero>span{display:grid;place-items:center;width:52px;height:52px;border-radius:7px;background:#42475f;font-size:1.4rem}.devtools-layout{display:grid;grid-template-columns:350px minmax(0,1fr);gap:18px;align-items:start}.devtools-sidebar{position:sticky;top:82px;border:1px solid var(--x-line);border-radius:7px;background:#2b2f45;overflow:hidden}.devtools-sidebar h2{margin:0;padding:16px;border-bottom:1px solid var(--x-line);font-size:1.2rem}.devtools-nav{position:static!important;display:grid!important;gap:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}.devtools-nav button{min-height:51px;padding:0 16px!important;border:0!important;border-bottom:1px solid rgba(158,166,206,.12)!important;border-radius:0!important;background:transparent!important;text-align:left;color:#b9bed6!important}.devtools-nav button.active{background:#353a54!important;border-left:4px solid #9ca1cc!important;color:#fff!important;font-weight:800}.devtools-content{min-width:0}.devtools-warning{margin-bottom:18px;padding:13px 16px;border:1px solid #97600b;border-radius:6px;background:#704407;color:#ffe4a8}.devtools-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.devtool-card{min-height:132px;padding:16px!important;border-radius:5px!important;background:#2b2f45!important;border-color:var(--x-line)!important}.devtool-card h2{font-size:1rem!important;color:#c2c8ef}.devtool-card>p{font-size:.78rem!important;line-height:1.45}.devtool-card textarea,.devtool-card input:not([type=range]):not([type=color]),.devtool-card select{background:#222638!important;border-color:#4a506c!important;color:#fff!important}
.profile-cover{height:48px!important;opacity:.25}.profile-header{display:grid!important;grid-template-columns:220px minmax(0,1fr) auto!important;gap:24px!important;padding:16px!important;margin-top:0!important;border-radius:7px 7px 0 0!important}.profile-avatar-wrap .avatar{width:220px!important;height:220px!important;border-radius:4px!important}.profile-header h1{font-size:1.7rem!important}.profile-stat-line{display:grid!important;grid-template-columns:repeat(4,minmax(100px,1fr));gap:0!important;margin-top:28px!important;border-top:1px solid var(--x-line);border-bottom:1px solid var(--x-line)}.profile-stat-line>*{justify-content:center!important;padding:14px!important;border-right:1px solid var(--x-line);border-radius:0!important;background:transparent!important}.profile-tabs-widget{border-radius:0 0 7px 7px!important}.profile-tabs-widget>.widget-tabs{overflow-x:auto;background:#565b84!important}.profile-tabs-widget .tab-btn{min-height:52px;border:0!important;border-bottom:3px solid transparent!important;background:transparent!important;color:#d1d5ed!important}.profile-tabs-widget .tab-btn.active{border-bottom-color:#fff!important;color:#fff!important}.profile-tabs-widget>.tab-panel{padding:18px!important}
.legal-notice-panel{display:grid;grid-template-columns:82px 1fr;gap:18px;align-items:center;margin:0 0 24px;padding:16px;border:1px solid var(--x-line);border-radius:7px;background:#2b2f45;color:#c5cae3!important;text-decoration:none!important}.legal-notice-icon{display:grid;place-items:center;width:74px;height:74px;border-radius:7px;background:#0e111d;color:#fff;font-size:2rem;transition:.3s}.legal-notice-panel:hover .legal-notice-icon{transform:rotate(10deg) scale(1.04)}.legal-notice-panel strong,.legal-notice-panel small{display:block}.legal-notice-panel strong{margin-bottom:7px;color:#fff;font-size:1.08rem}.legal-notice-panel small{font-size:.82rem;line-height:1.6}.site-footer{background:#2d3148!important;border-top:12px solid #1d2030!important;padding-top:24px!important}.footer-pulse{border:1px solid var(--x-line)!important;background:#30344b!important}.footer-columns{gap:28px!important}.footer-bottom-bar{border-color:var(--x-line)!important}
@media(max-width:1250px){.primary-nav a{padding:0 9px}.primary-nav a:nth-last-child(-n+2){display:none}.main-layout{grid-template-columns:minmax(0,1fr) 310px!important}.devtools-layout{grid-template-columns:280px minmax(0,1fr)}.devtools-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:900px){.primary-nav{display:none}.main-layout{grid-template-columns:1fr!important}.sidebar{display:block!important}.forum-item--grid{grid-template-columns:1fr!important}.forum-item-lastpost-col{border-left:0!important;border-top:1px solid var(--x-line)!important}.profile-header{grid-template-columns:130px minmax(0,1fr)!important}.profile-avatar-wrap .avatar{width:130px!important;height:130px!important}.profile-actions{grid-column:1/-1}.profile-stat-line{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.container{width:calc(100% - 14px)!important}.site-header{min-height:60px!important}.logo{min-width:0}.site-logo-img{max-width:125px!important}.header-profile-btn::after{display:none}.quick-nav{margin:8px 7px 10px!important}.quick-nav>.header-search--in-nav{display:none!important}.quick-nav .pill{min-height:44px;padding:0 12px!important}.devtools-layout{grid-template-columns:1fr}.devtools-sidebar{position:static}.devtools-nav{display:flex!important;overflow-x:auto}.devtools-nav button{flex:0 0 auto;min-height:44px;border-left:0!important;border-bottom:3px solid transparent!important}.devtools-nav button.active{border-bottom-color:#9ca1cc!important}.devtools-grid{grid-template-columns:1fr!important}.user-menu-dropdown>.apps-dropdown-menu{width:min(420px,calc(100vw - 16px))!important}.profile-header{grid-template-columns:82px 1fr!important;gap:13px!important}.profile-avatar-wrap .avatar{width:82px!important;height:82px!important}.profile-header h1{font-size:1.25rem!important}.profile-stat-line{grid-column:1/-1!important;margin-top:12px!important}.legal-notice-panel{grid-template-columns:52px 1fr}.legal-notice-icon{width:50px;height:50px;font-size:1.35rem}.footer-columns{grid-template-columns:1fr!important}}

/* ---------------------------------------------------------------
   TASARIM KARARI — arama kutusu tek çerçeveye indirgeniyor
   Ölçülen sorun: form'un kendi çerçevesi (1px border + 14px radius +
   arka plan) VE içindeki input'un ayrı çerçevesi (1px border + 12px
   radius) iç içe iki kutu oluşturuyordu = görsel gürültü.
   Karar: FORM tek görünür alan olsun (çerçeve + zemin + radius),
   input onun içinde tamamen şeffaf ve çerçevesiz kalsın. Mikrofon ve
   gelişmiş arama ikonları zaten aynı grubun parçası - onları da aynı
   çerçevenin içinde tutmak doğru gruplama.
   Odak (focus) durumu input'a değil FORM'a uygulanıyor (:focus-within),
   çünkü kullanıcı görsel olarak tek bir alan görüyor - odak göstergesi
   de o alanın tamamını sarmalı.
   --------------------------------------------------------------- */
.header-search--in-nav {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 12px !important;
  padding: 0 0.5rem 0 0.75rem !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.quick-nav > .header-search--in-nav {
  padding: 0 0.5rem 0 0.75rem !important;
  margin: 0.55rem auto 0 !important;
}
/* İçerideki input: görünmez kap - çerçeve/zemin/radius YOK */
.header-search--in-nav input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 40px !important;
}
.header-search--in-nav input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
/* Odak halkası tek görünür alana (form) uygulanıyor */
.header-search--in-nav:focus-within {
  border-color: var(--mf-accent, #7c6cff) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mf-accent, #7c6cff) 22%, transparent) !important;
}

/* ---------------------------------------------------------------
   GERÇEK HATA (ölçümle bulundu): "Uygulamalar" menüsü tıklanınca
   ekranın ~200px altına düşüyor, görünmüyordu (top:854px, viewport:844px).
   Kök neden z-index DEĞİL — z-index zaten 1600 ve üstünde hiçbir
   element yok (elementFromPoint ile doğrulandı). Sorun konumlandırma:
   modern-forum.css'teki
     .apps-dropdown-menu{position:absolute!important;top:calc(100%+10px)!important}
   kuralı, JS'in body'ye taşıdığı KLONU da yakalıyor (klon aynı class'ı
   taşıyor). Inline stil !important'a yenildiği için menü absolute
   kalıyor ve top değeri viewport'a değil BELGEYE göre hesaplanıyordu.

   Bu kural modern-forum.css'ten SONRA yüklenen bu dosyada olmak
   zorunda: iki seçici de aynı specificity'de (0,1,0) ve ikisi de
   !important kullanıyor, dolayısıyla belge sırasında sonra gelen
   kazanıyor. (Önce main.css'e konmuştu, etkisizdi - ölçümle görüldü.)

   Konum değerleri CSS custom property ile aktarılıyor çünkü inline
   set edilen custom property, !important bildiriminin İÇİNE geçebilir.
   JS ayrıca ekran dışına taşmayı engelliyor: yatayda sıkıştırma,
   dikeyde yer yoksa yukarı açma (flip-up) + yükseklik sınırlama.
   --------------------------------------------------------------- */
.apps-dropdown-menu-detached {
  position: fixed !important;
  top: var(--dd-top, 72px) !important;
  left: var(--dd-left, 1rem) !important;
  right: auto !important;
  max-height: var(--dd-max-h, 60vh) !important;
  overflow-y: auto !important;
  width: min(280px, calc(100vw - 1.5rem)) !important;
  z-index: 2400 !important;
}

/* Boş forum bilgisi ayrı bir büyük sütun kaplamaz; ancak okunamayacak
   kadar da küçülmez. Metin, forum açıklamasının altında belirgin bir
   durum rozeti olarak gösterilir. */
.forum-item-lastpost-col.is-empty {
  padding: 0.2rem 1rem 0.85rem 1.25rem !important;
  border-top: 0 !important;
  border-left: 0 !important;
  min-height: 0 !important;
}
.forum-item-lastpost-col.is-empty .forum-item-lastpost {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--mf-border, rgba(148,163,184,.16));
  border-radius: 999px;
  background: rgba(124,108,255,.08);
  color: var(--mf-muted, #a9b7ca) !important;
  font-size: 0.86rem !important;
  font-weight: 650;
  line-height: 1.2;
  opacity: 1;
}
/* Satırın kendisi de boşken daha kısa olabilsin */
.forum-item--grid:has(.forum-item-lastpost-col.is-empty) {
  min-height: 0 !important;
}

/* ---------------------------------------------------------------
   TASARIM KARARI — yükleme alanları (dropzone) tutarlılığı
   .avatar-upload-form flex kapsayıcı; içindeki dropzone sarmalayıcı
   varsayılan olarak içeriğine göre daralıyordu, bu yüzden avatar ve
   kapak dropzone'ları farklı genişliklerde çiziliyordu. Aynı işlevi
   gören iki alanın farklı genişlikte olması için bir sebep yok -
   ikisi de mevcut alanı doldursun.
   Dar ekranda avatar önizlemesi ile dropzone'un yan yana sıkışmaması
   için bölüm dikey akışa geçiyor.
   --------------------------------------------------------------- */
.avatar-upload-form { width: 100%; }
.avatar-upload-form .file-upload-wrapper { flex: 1 1 100%; width: 100%; }

@media (max-width: 700px) {
  .account-avatar-section {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }
  .account-avatar-section .current-avatar,
  .account-avatar-section .avatar-circle { align-self: center; }
}

/* ---------------------------------------------------------------
   TASARIM KARARI — Panelim: içerik önce, ayar sonra
   Widget seçici artık katlanabilir (details/summary). Görsel dili
   sitedeki diğer accordion'larla aynı olmalı ki "yabancı" durmasın.
   Ayrıca boş durum kartları hafifletiliyor: her widget "hiçbir şey
   yok" demek için ~105px harcıyordu. Bilgi kalıyor, ağırlığı azalıyor.
   --------------------------------------------------------------- */
.dashboard-widget-picker-wrap {
  background: var(--mf-surface-solid, #0f1626);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
  border-radius: 12px;
  margin-block: 0.9rem;
  overflow: hidden;
}
.dashboard-widget-picker-wrap > summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mf-muted, #91a0b7);
  list-style: none;
  user-select: none;
}
.dashboard-widget-picker-wrap > summary::-webkit-details-marker { display: none; }
.dashboard-widget-picker-wrap > summary::after {
  content: "▾";
  float: right;
  transition: transform 0.2s ease;
}
.dashboard-widget-picker-wrap[open] > summary::after { transform: rotate(180deg); }
.dashboard-widget-picker-wrap > summary:hover { color: var(--mf-text, #f4f7fb); }
.dashboard-widget-picker-wrap .dashboard-widget-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--mf-border, rgba(148,163,184,.14));
  padding-top: 0.9rem;
}
/* Boş durum: bilgi kalsın, ağırlığı azalsın */
.dashboard-widget-grid .widget > p.muted:only-of-type {
  margin: 0.2rem 0 0 !important;
  font-size: 0.78rem;
  opacity: 0.6;
}

/* ---------------------------------------------------------------
   TASARIM KARARI — sidebar'sız sayfalarda ölü alan
   Ölçüm (1440px masaüstü): /account ve /dashboard sayfalarında içerik
   976px genişliğinde, sağda 408px BOŞ alan kalıyordu. Sebep:
   .page-layout{grid-template-columns:minmax(0,1fr) 330px} sidebar
   sütununu HER ZAMAN ayırıyor, ama şablon <aside> öğesini yalnızca
   $sidebar doluysa basıyor. Kullanıcının "çok solda kalmış" dediği
   şey tam olarak bu.

   Karar: sidebar yoksa tek sütuna dön VE içeriği ortala.
   Neden sadece "tek sütun" değil de ortalama da var: hesap ayarları
   gibi form sayfalarında 1360px genişliğinde bir form, satır
   uzunluklarını okunamaz hale getirir. Form ve okuma odaklı sayfalar
   için ~940px konforlu bir üst sınır.
   --------------------------------------------------------------- */
.page-layout--no-sidebar {
  grid-template-columns: minmax(0, 1fr) !important;
}
@media (min-width: 1040px) {
  .page-layout--no-sidebar > .main-content {
    max-width: 940px;
    margin-inline: auto;
    width: 100%;
  }
}

/* ---------------------------------------------------------------
   TASARIM KARARI — Panelim boş durumları
   Ölçüm: yeni kullanıcıda 4 widget × 88px = 352px, sayfanın %70'i
   sadece "burada bir şey yok" demek için harcanıyordu.
   İki katmanlı çözüm:
   1) Hepsi boşsa → tek yönlendirici kart (şablonda), dört kez "yok"
      demek yerine ne yapabileceğini söylüyor.
   2) Kısmen doluysa → dolu widget'lar normal, boş olanlar kompakt.
      Boş bir widget'ın dolu bir widget kadar yer kaplaması yanlış
      görsel ağırlık veriyor: göz, içeriği olan yere gitmeli.
   --------------------------------------------------------------- */
.widget.is-empty {
  padding-block: 0.75rem !important;
  opacity: 0.72;
}
.widget.is-empty h3 {
  margin-bottom: 0.2rem !important;
  font-size: 0.82rem !important;
}
.widget.is-empty p.muted {
  margin: 0 !important;
  font-size: 0.75rem !important;
}

/* İlk kullanım kartı — yönlendirici, boş kutu değil */
.dashboard-firstrun {
  text-align: center;
  padding: 2rem 1.25rem !important;
}
.dashboard-firstrun h3 { margin-bottom: 0.5rem; }
.dashboard-firstrun p { max-width: 46ch; margin-inline: auto; }
.dashboard-firstrun-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.1rem;
}

/* ===============================================================
   ADMIN — FORM GENİŞLİĞİ
   Ölçüm (1440px): .admin-form max-width:480px yüzünden form 560px
   genişlikte kalıyor, sağda 588px ölü alan oluşuyordu ("site ayarları
   solda kalmış").
   Karar: tek sütunlu formlarda okunabilirlik için üst sınır gerekli
   (çok uzun satırlar taranamaz), ama 480px 2026 ekranları için fazla
   dar. 1180px'e çıkarılıp alanlar İKİ SÜTUNA yayılıyor: satır uzunluğu
   yine konforlu kalıyor, dikey uzunluk yarıya iniyor.
   =============================================================== */
.admin-form {
  max-width: 1180px !important;
  width: 100%;
}
@media (min-width: 1100px) {
  .admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1.5rem !important;
  }
  /* Uzun metin alanları ve tam genişlik isteyenler satırı kaplasın */
  .admin-form > label:has(textarea),
  .admin-form > .checkbox-label,
  .admin-form > button,
  .admin-form > .admin-form-full,
  .admin-form > h3,
  .admin-form > hr,
  .admin-form > p {
    grid-column: 1 / -1;
  }
}

/* ===============================================================
   ADMIN — GERÇEK TOGGLE ANAHTARLARI
   Ölçüm: checkbox 253×42px olarak çiziliyordu. İki sebep birlikte:
   (1) genel input kuralı checkbox'a da zemin/çerçeve/tam genişlik
       veriyor, (2) .checkbox-label flex-direction:column olduğu için
       kutu üstte, etiket altta kalıyordu.
   Sonuç: hangi ayarın açık hangisinin kapalı olduğu anlaşılmıyordu.

   Karar: gerçek anahtar (switch) bileşeni. Renk körlüğü ve hızlı
   tarama için SADECE renk değil, TOPUZ KONUMU da değişiyor - iki
   bağımsız görsel ipucu. Açık = vurgu rengi + topuz sağda,
   kapalı = nötr gri + topuz solda.
   =============================================================== */
.admin-form .checkbox-label,
.checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.7rem !important;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--mf-text, #f4f7fb) !important;
  padding: 0.55rem 0 !important;
}
.checkbox-label input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 24px !important;
  min-width: 42px !important;
  /* xf-admin-v4.css genel ".admin-form input" kuralı min-height:42px
     veriyor ve height:24px'i eziyordu (ölçümle bulundu) - anahtar
     42px'lik bir daireye dönüşüyordu. */
  min-height: 24px !important;
  max-height: 24px !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.28) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  position: relative !important;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  margin: 0 !important;
  padding: 0 !important;
}
/* Topuz — konumu durumu belli eden İKİNCİ ipucu */
.checkbox-label input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f1f5f9;
  transition: left 0.18s ease;
}
.checkbox-label input[type="checkbox"]:checked {
  background: var(--mf-accent, #7c6cff) !important;
  border-color: var(--mf-accent, #7c6cff) !important;
}
.checkbox-label input[type="checkbox"]:checked::after {
  left: 21px;
}
.checkbox-label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mf-accent, #7c6cff);
  outline-offset: 2px;
}

/* ===============================================================
   ADMIN — DÜZEN SEÇİCİ (Blok Yerleşimleri) DURUM AYRIMI
   Ölçümle bulunan hata: ".layout-style-option.selected" ile
   ".layout-style-option:hover" AYNI kuralı paylaşıyordu - fare
   üzerine gelen seçilmemiş bir seçenek, seçili olanla birebir aynı
   görünüyordu (doğrulandı: checked=false olduğu halde vurgu
   çerçevesi alıyordu). Kullanıcı hangi düzenin aktif olduğunu
   göremiyordu.

   İki ayrı durum tanımlanıyor:
   • hover  = hafif temas geri bildirimi (yükselen zemin, yumuşak kenar)
   • seçili = güçlü vurgu + ONAY İŞARETİ (renkten bağımsız ikinci ipucu)

   Ayrıca :has(input:checked) kullanılıyor: .selected sınıfı sunucudan
   geliyor, yani tıklayınca form gönderilene kadar arayüz tepki
   vermiyordu. Artık seçim anında görünür oluyor.
   =============================================================== */
.layout-style-option:hover:not(.selected):not(:has(input:checked)) {
  border-color: rgba(148, 163, 184, 0.34) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.layout-style-option.selected,
.layout-style-option:has(input:checked) {
  border-color: var(--mf-accent, #7c6cff) !important;
  background: color-mix(in srgb, var(--mf-accent, #7c6cff) 12%, transparent) !important;
  position: relative;
}
/* Onay işareti — rengi görmeyen için ikinci, bağımsız ipucu */
.layout-style-option.selected::before,
.layout-style-option:has(input:checked)::before {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: var(--mf-accent, #7c6cff);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ===============================================================
   ADMIN — FORM ELEMANI BOYUTLARI VE TABLO SÜTUNLARI
   Ölçülen sorunlar (Kategori/Forum Yönetimi sayfası):
   • input[type=color] hiç sınırlandırılmamış → tam genişlik PARLAK
     MAVİ ÇUBUK olarak çiziliyor, bozuk bir öğe gibi duruyor.
   • Şablonda style="width:60px" verilmiş ikon/sıra alanları, genel
     "width:100%!important" kuralı yüzünden tam genişliğe yayılıyor;
     tek emoji için 1000px'lik kutu oluşuyor.
   • Tablolarda işlem sütunu (Sil) içeriğe göre değil eşit paya göre
     yerleşiyor → butonla veri arasında kocaman boşluk.
   Karar: girdinin GÖRSEL BOYUTU, taşıdığı verinin boyutuyla orantılı
   olmalı. Renk = küçük kare örnek, emoji = dar kutu, sayı = dar kutu,
   metin = geniş. İşlem sütunu içeriğe sıkışıp sağa hizalanır.
   =============================================================== */
.admin-form input[type="color"],
input[type="color"] {
  width: 52px !important;
  min-width: 52px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 3px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  cursor: pointer;
  flex: 0 0 auto !important;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* Şablonda açıkça dar verilmiş alanlar dar kalsın */
.admin-form input[style*="width:60px"],
.admin-form input[style*="width: 60px"] {
  width: 76px !important;
  min-width: 76px !important;
  flex: 0 0 auto !important;
  text-align: center;
}
.admin-form input[style*="width:80px"],
.admin-form input[style*="width: 80px"],
.admin-form input[type="number"] {
  width: 110px !important;
  min-width: 110px !important;
  flex: 0 0 auto !important;
}

/* Tablolar: işlem sütunu içeriğe sıkışsın, sağa hizalansın */
.admin-table th:last-child,
.admin-table td:last-child {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
/* Sayısal/dar sütunlar geniş metne alan bıraksın */
.admin-table th:first-child,
.admin-table td:first-child {
  width: 1%;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   .admin-form-inline — "hızlı ekleme" satırı
   Bu form (kategori/forum ekleme) satır içi olacak şekilde
   tasarlanmış ama .admin-form'un grid'i onu tek sütuna dizip
   dar alanları hücre ortasında bırakıyordu: tek emoji için ortada
   duran bir kutu, altında ortada duran bir renk karesi.
   Karar: sarmalayan bir satır düzenine dön. Dar alanlar (ikon, renk,
   sıra) içeriğe göre daralır, ad/açıklama kalan alanı paylaşır -
   yani ekleme formu tek bir "araç çubuğu" gibi okunur.
   --------------------------------------------------------------- */
.admin-form.admin-form-inline {
  display: flex !important;
  /* Mevcut bir .admin-form-inline kuralı flex-direction:column
     veriyordu (ölçümle bulundu) - her alan ayrı satıra düşüyor,
     sayfa 4177px'e uzuyordu. Açıkça satır düzeni. */
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 0.6rem !important;
}
.admin-form.admin-form-inline > input[type="text"]:not([style]),
.admin-form.admin-form-inline > select {
  flex: 1 1 220px !important;
  width: auto !important;
  min-width: 180px !important;
}
.admin-form.admin-form-inline > button {
  flex: 0 0 auto !important;
}
/* Grid hücresi ortalamasından kalan hizalama artıkları */
.admin-form > input[type="color"],
.admin-form > input[type="number"],
.admin-form > input[style*="width:60px"] {
  justify-self: start;
}

/* ===============================================================
   ADMIN — HIZLI ERİŞİM: ÇEKİRDEK VE EKLENTİ LİNKLERİNİ EŞİTLEME
   Ölçüm: çekirdek linkler bg rgb(2,6,23) + 12px dolgu + 44px yükseklik,
   eklenti linkleri (.dashboard-quicklink) bg rgb(18,27,46) + 11/14px
   dolgu + 42px yükseklik kullanıyordu. Aynı listede iki farklı görsel
   dil = "eklentiler kutunun dışında" hissi.
   Karar: eklentiler kendi Addon.php'lerinde sabit bir sınıf adı
   basıyor (.dashboard-quicklink). 8 eklenti dosyasını tek tek
   düzenlemek yerine BU SINIFI çekirdeğin görünümüne eşitliyoruz -
   eklenti niyetini bildirir ("ben bir hızlı link'im"), görünüme
   tema karar verir. Yeni eklentiler de otomatik uyumlu olur.
   =============================================================== */
.dashboard-quicklink {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: rgb(2, 6, 23) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: rgb(241, 245, 249) !important;
  text-decoration: none !important;
  transition: background 0.18s ease;
}
.dashboard-quicklink:hover {
  background: rgb(30, 41, 59) !important;
}

/* Katlanabilir "Gelişmiş Araçlar" grubu */
.admin-quick-advanced {
  margin-top: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.admin-quick-advanced > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.7rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgb(203, 213, 225);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.admin-quick-advanced > summary::-webkit-details-marker { display: none; }
.admin-quick-advanced > summary::after {
  content: "▾";
  margin-left: auto;
  transition: transform 0.18s ease;
}
.admin-quick-advanced[open] > summary::after { transform: rotate(180deg); }
.admin-quick-advanced > summary:hover { background: rgba(255, 255, 255, 0.04); }
.admin-quick-advanced-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 0.6rem 0.6rem;
}
/* Tarayıcı <details> kapalıyken çocukları gizler, ama bunu bir UA
   "display:none" kuralıyla yapar - yukarıdaki author "display:flex"
   onu eziyordu ve grup kapalıyken de linkler görünüyordu (ölçümle
   doğrulandı: kapalıyken 16 link görünür kalıyordu). */
.admin-quick-advanced:not([open]) .admin-quick-advanced-body {
  display: none;
}

/* ===============================================================
   ADMIN — AYARLAR BÖLÜMLERİ (katlanabilir gruplar)
   Ölçüm: "Sosyal & Entegrasyonlar" tek panelde 63 alan / 14 alt
   başlık, "Kayıt & Güvenlik" 17 alan / 3 başlık barındırıyordu.
   Bölümler admin-settings-sections.js ile <details> gruplarına
   çevriliyor; buradaki stiller o grupları panelin görsel diline
   oturtuyor. İlk bölüm açık gelir (sayfa çalışır halde karşılasın).
   =============================================================== */
.admin-settings-section {
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  margin-bottom: 0.7rem;
  overflow: hidden;
}
.admin-settings-section-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(226, 232, 240);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  transition: background 0.15s ease;
}
.admin-settings-section-summary::-webkit-details-marker { display: none; }
.admin-settings-section-summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 0.8rem;
  opacity: 0.6;
  transition: transform 0.18s ease;
}
.admin-settings-section[open] > .admin-settings-section-summary::after {
  transform: rotate(180deg);
}
.admin-settings-section[open] > .admin-settings-section-summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
}
.admin-settings-section-summary:hover {
  background: rgba(255, 255, 255, 0.04);
}
.admin-settings-section-body {
  padding: 1rem;
}
/* Tarayıcının <details> gizlemesini author display kuralı ezmesin */
.admin-settings-section:not([open]) > .admin-settings-section-body {
  display: none;
}

/* Sağlık merkezi — eyleme dönüştürülebilir satırlar tıklanabilir
   olduklarını göstermeli (durumu bildirip çözümü aratmak yarım iş). */
.admin-health-item.is-actionable {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-health-item.is-actionable:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(148, 163, 184, 0.3);
}
.admin-health-item.is-actionable::after {
  content: "→";
  margin-left: 0.35rem;
  opacity: 0.55;
}

/* ---------------------------------------------------------------
   Ayarlar sekme çubuğu — etiket kırpılması
   Ölçümde görüldü: "Görünüm & Tema" → "Görünüm ...", "Sosyal &
   Entegrasyonlar" → "Sosyal & E...". Sekme adı, kullanıcının nereye
   gideceğini anlamasının tek ipucu; kırpılması taramayı bozar.
   Karar: sabit/eşit genişlik yerine içeriğe göre genişleme + sarma.
   İki satıra taşması, okunamayan sekmeden iyidir.
   --------------------------------------------------------------- */
.admin-settings-tabbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}
.admin-settings-tab-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ===============================================================
   ÇİFT AÇILAN MENÜ (profil + uygulamalar) — GERÇEK HATA
   Ölçümle kanıtlandı: butona fareyle gelip tıklandığında ekranda
   İKİ menü birden oluyor -> ['ORIJINAL', 'KLON'].
   Sebep iki mekanizmanın çakışması:
   • CSS: .apps-dropdown:hover > .apps-dropdown-menu{display:block}
     -> ORİJİNAL menüyü açıyor
   • JS : tıklamada menüyü body'ye klonlayıp konumlandırıyor
     (taşma/z-index sorunlarını çözmek için) -> KLON açılıyor
   İkisi aynı anda görünür kalıyordu.

   Karar:
   1) Klon açıkken orijinal bastırılır (body'ye eklenen sınıf ile).
   2) Hover ile açılma yalnızca GERÇEK fare olan cihazlarda geçerli.
      Dokunmatikte hover "yapışkan" davranır ve zaten tıklama JS'i
      devrede - hover kuralı orada sadece zarar veriyordu.
   =============================================================== */
body.has-detached-dropdown .apps-dropdown:hover > .apps-dropdown-menu,
body.has-detached-dropdown .apps-dropdown:focus-within > .apps-dropdown-menu {
  display: none !important;
}
@media (hover: none), (pointer: coarse) {
  .apps-dropdown:hover > .apps-dropdown-menu,
  .apps-dropdown:focus-within > .apps-dropdown-menu {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Forum açıklaması — okunabilirlik
   Ölçüm: 12.8px, rgb(148,163,184). Koyu zemine karşı kontrast 7.68:1
   (AA'yı geçiyor) ama boyut küçük ve satır aralığı sıkışıktı; kartın
   asıl bilgilendirici metni olduğu halde "ikincil not" gibi duruyordu.
   Karar: bir tık büyütme + satır aralığı + biraz daha parlak ton.
   Ayrıca uzun açıklamalar kırpılmasın diye taşma davranışı açıkça
   serbest bırakılıyor (bir üst katmanda gizli clamp kalmasın).
   --------------------------------------------------------------- */
.forum-item-textblock p,
.forum-item-textblock > .muted {
  font-size: 0.83rem !important;
  line-height: 1.55 !important;
  /* GERÇEK HATA (kullanıcı geri bildirimi + ölçüm): burada SABİT
     açık gri (176,189,206) vardı. Koyu temada doğru çalışıyordu ama
     gündüz moduna geçilince beyaz zemin üzerinde kaldı -> kontrast
     1.91:1, yazı okunmuyordu. Renk artık temayla birlikte değişen
     değişkenden geliyor. */
  color: var(--mf-muted, #b0bdce) !important;
  overflow: visible !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
}

/* Haber akışı görseli — emoji ikonun yerini alır (ikisi aynı alanı
   paylaşırsa görsel küçülüp anlamsızlaşıyor). */
.news-feed-image {
  /* !important gerekli: bir üst katman genişliği 34px'e düşürüyordu
     (ölçüldü: height ve flex bu kuraldan geliyordu ama width başka
     bir kural tarafından eziliyordu). */
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 600px) {
  .news-feed-image { width: 44px !important; min-width: 44px !important; height: 44px !important; flex-basis: 44px; }
}

/* ===============================================================
   GERÇEK HATA — HABER AKIŞI TAMAMEN GÖRÜNMEZDİ
   Ölçüm: .news-feed-effects .news-feed-item kuralı
     opacity: 0; animation: news-feed-item-in 0.4s ease forwards;
   uyguluyor, ANCAK "@keyframes news-feed-item-in" hiçbir CSS
   dosyasında TANIMLI DEĞİL. Tanımsız bir animasyon çalışmaz;
   element başlangıç durumunda (opacity:0) kalıcı olarak kalır.
   Sonuç: haber akışı öğeleri (ve içlerindeki görseller) sayfada
   VAR ama hiç görünmüyordu - kullanıcının "Haber Akışı eklenen
   görsel görülmüyor" şikayetinin kök nedeni.

   Eksik keyframe tanımlanıyor. Ayrıca güvenlik ağı olarak, animasyon
   desteklenmeyen/devre dışı bırakılan durumlarda öğe görünür kalsın
   diye reduced-motion altında opacity açıkça 1'e sabitleniyor -
   erişilebilirlik tercihi içeriği gizlememeli.
   =============================================================== */
@keyframes news-feed-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .news-feed-effects .news-feed-item {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ===============================================================
   GERÇEK HATA — İSTATİSTİK SAYILARI OKUNMUYORDU
   Kullanıcı: "üye, konu, mesaj, Son 24s, yeni üye, onay bekliyor,
   banlı — bu yazılar siyahla mı yazıldı bilmiyorum".
   Ölçüm doğruladı: .stat-card strong{color:var(--color-primary)}
   kuralı vardı. --color-primary bu oturumda koyu temaya hizalanınca
   #0b1020 (neredeyse siyah) oldu; kartın zemini de rgb(14,20,32).
   Kontrast oranı 1.04:1 -> sayılar pratikte GÖRÜNMÜYORDU.
   (Renk değişkeni doğru, onu kullanan bu kural yanlıştı: bir SAYI
   "marka rengi" değil, okunması gereken birincil veridir.)
   Karar: sayı metin rengine döner; vurgu istenirse zeminle değil
   ağırlıkla verilir.
   =============================================================== */
.stat-card strong,
.admin-kpi-grid .stat-card strong {
  color: var(--mf-text, #f4f7fb) !important;
  font-weight: 800;
}
.stat-card span.muted {
  color: var(--mf-muted, #94a3b8) !important;
}

/* ===============================================================
   ADMIN PANELİ — GÜNDÜZ (AÇIK) MODU
   Kullanıcı talebi: "Admin panele tema desteği de gelmeli
   gece/gündüz olabilir."
   Varsayılan gece; gündüz modu data-admin-theme="light" ile açılır
   (admin-theme.js, tercih localStorage'da "admin-theme" anahtarında).
   Sitenin kendi temasından AYRI tutuluyor - yönetici gündüz panelde
   açık, gece sitede koyu tema isteyebilir.

   Renk kararı: gündüz modunda saf beyaz (#fff) yerine hafif gri-mavi
   zemin (#f4f6fb) kullanılıyor. Uzun süre bakılan bir yönetim
   arayüzünde saf beyaz, koyu metinle birlikte gereğinden yüksek
   parlaklık kontrastı yaratıp göz yorar; kartlar beyaz kalarak
   zeminden ayrışıyor.
   =============================================================== */
:root[data-admin-theme="light"] {
  --mf-bg: #f4f6fb;
  --mf-bg-2: #eaeef6;
  --mf-surface: rgba(255, 255, 255, 0.92);
  --mf-surface-solid: #ffffff;
  --mf-surface-2: #f7f9fc;
  --mf-border: rgba(15, 23, 42, 0.12);
  --mf-border-strong: rgba(15, 23, 42, 0.2);
  --mf-text: #16202f;
  --mf-muted: #5a6779;
  --color-bg: #f4f6fb;
  --color-surface: #ffffff;
  --color-text: #16202f;
  --color-muted: #5a6779;
  --color-border: rgba(15, 23, 42, 0.12);
  --color-panel: #eef2f8;
}
:root[data-admin-theme="light"] body.p-body--admin {
  background: #f4f6fb !important;
  color: #16202f !important;
}
:root[data-admin-theme="light"] .p-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  color: #16202f !important;
}
:root[data-admin-theme="light"] .p-header-button { color: #16202f !important; }
:root[data-admin-theme="light"] .p-nav {
  background: #ffffff !important;
  border-right: 1px solid rgba(15, 23, 42, 0.1) !important;
}
:root[data-admin-theme="light"] .p-nav a { color: #2b3648 !important; }
:root[data-admin-theme="light"] .p-nav a:hover { background: #eef2f8 !important; }
:root[data-admin-theme="light"] .admin-card,
:root[data-admin-theme="light"] .admin-dashboard-card,
:root[data-admin-theme="light"] .stat-card,
:root[data-admin-theme="light"] .admin-settings-section,
:root[data-admin-theme="light"] .admin-form,
:root[data-admin-theme="light"] .admin-health-item {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #16202f !important;
}
:root[data-admin-theme="light"] .stat-card strong,
:root[data-admin-theme="light"] .admin-settings-section-summary,
:root[data-admin-theme="light"] .admin-card h3,
:root[data-admin-theme="light"] .admin-dashboard-card h3 {
  color: #16202f !important;
}
:root[data-admin-theme="light"] .stat-card span.muted,
:root[data-admin-theme="light"] .muted,
:root[data-admin-theme="light"] small {
  color: #5a6779 !important;
}
:root[data-admin-theme="light"] .admin-form input:not([type=color]),
:root[data-admin-theme="light"] .admin-form select,
:root[data-admin-theme="light"] .admin-form textarea {
  background: #ffffff !important;
  color: #16202f !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
}
:root[data-admin-theme="light"] .admin-table th {
  background: #eef2f8 !important;
  color: #2b3648 !important;
}
:root[data-admin-theme="light"] .admin-table td { color: #16202f !important; }
:root[data-admin-theme="light"] .dashboard-quicklink {
  background: #f7f9fc !important;
  color: #16202f !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}
:root[data-admin-theme="light"] .dashboard-quicklink:hover { background: #eef2f8 !important; }

/* Gündüz modu — taramayla bulunan koyu kalan alanlar.
   (html ve .p-main kendi koyu zemin/gradient'lerini taşıyor;
   uyarı kutuları ile hızlı erişim linkleri Tailwind yardımcı
   sınıflarıyla sabit koyu renk alıyor.) */
:root[data-admin-theme="light"],
:root[data-admin-theme="light"] body {
  background: #f4f6fb !important;
}
:root[data-admin-theme="light"] .p-main {
  background: #f4f6fb !important;
  background-image: none !important;
}
:root[data-admin-theme="light"] .admin-page-hero {
  background: linear-gradient(135deg, #eef2ff, #ffffff) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}
:root[data-admin-theme="light"] .admin-page-hero h1,
:root[data-admin-theme="light"] .admin-page-hero h2,
:root[data-admin-theme="light"] .admin-page-hero p,
:root[data-admin-theme="light"] .admin-card-label,
:root[data-admin-theme="light"] .admin-eyebrow {
  color: #16202f !important;
}
:root[data-admin-theme="light"] .alert {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #78350f !important;
}
:root[data-admin-theme="light"] .quick-action-card,
:root[data-admin-theme="light"] .admin-shortcut-list a,
:root[data-admin-theme="light"] .admin-token-preview {
  background: #f7f9fc !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  color: #16202f !important;
}
:root[data-admin-theme="light"] .quick-action-card span,
:root[data-admin-theme="light"] .admin-shortcut-list a strong,
:root[data-admin-theme="light"] .admin-shortcut-list a small {
  color: #16202f !important;
}

/* ===============================================================
   ADMIN — MODÜL DURUM IZGARASI (eski "UX TOOLKIT" rozetlerinin yerine)
   Her modül tıklanabilir ve açık/kapalı durumu GERÇEK ayardan gelir.
   Durum iki bağımsız ipucuyla veriliyor: renk VE metin (AÇIK/KAPALI) -
   yalnızca renge dayanmak renk körlüğünde okunamaz hale gelir.
   =============================================================== */
.admin-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.55rem;
}
.admin-module-pill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.admin-module-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.32);
  transform: translateY(-1px);
}
.admin-module-icon { font-size: 1.05rem; flex: 0 0 auto; }
.admin-module-label {
  flex: 1 1 auto;
  font-size: 0.83rem;
  color: var(--mf-text, #e6ebf3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-module-state {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.16rem 0.4rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: #94a3b8;
}
.admin-module-pill.is-on { border-color: rgba(52, 211, 153, 0.4); }
.admin-module-pill.is-on .admin-module-state {
  background: rgba(52, 211, 153, 0.16);
  color: #34d399;
}
.admin-module-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mf-muted, #94a3b8);
  background: rgba(148, 163, 184, 0.12);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
:root[data-admin-theme="light"] .admin-module-pill {
  background: #f7f9fc !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}
:root[data-admin-theme="light"] .admin-module-label { color: #16202f !important; }

/* ===============================================================
   POSTBIT MAĞAZASI — EYLEM ÇUBUĞU
   create/playground/mine sayfaları vardı ama mağazada linkleri
   yoktu; özellikler ulaşılamaz durumdaydı. Buradaki hiyerarşi
   bilinçli: "Canlı Tasarımcı" birincil (CSS bilmeyen çoğunluk için
   giriş noktası), diğer ikisi ikincil.
   =============================================================== */
.pb-store-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.7rem;
  margin: 1.1rem 0 1.3rem;
}
.pb-store-action {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.pb-store-action small {
  font-weight: 400;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.62);
}
.pb-store-action:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}
.pb-store-action--primary {
  background: linear-gradient(135deg, #7c6cff, #23d5c5);
  border-color: transparent;
}
.pb-store-action--primary small { color: rgba(255, 255, 255, 0.85); }
.pb-store-action--primary:hover {
  background: linear-gradient(135deg, #8b7cff, #35e0d0);
}

/* ===============================================================
   SİTE GÜNDÜZ (AÇIK) MODU — EKSİK --mf-* DEĞİŞKENLERİ
   Kullanıcı: "gece/gündüz temasındaki gündüz kısmına basınca site
   bembeyaz oluyor hiç bir yazı okunmuyor."
   Ölçüm doğruladı: main.css'in :root[data-theme="light"] bloğu
   yalnızca --color-* değişkenlerini tanımlıyordu. Aurora katmanının
   TÜM yüzey/metin renkleri ise --mf-* değişkenlerinden geliyor ve
   bunların açık mod karşılığı HİÇ YOKTU; koyu değerler beyaz zeminde
   olduğu gibi kalıyordu (forum açıklaması kontrastı 1.91:1).
   Bu blok o boşluğu dolduruyor.
   =============================================================== */
:root[data-theme="light"] {
  --mf-bg: #eef1f6;
  --mf-bg-2: #e4e9f1;
  --mf-surface: rgba(255, 255, 255, 0.92);
  --mf-surface-solid: #ffffff;
  --mf-surface-2: #f6f8fc;
  --mf-border: rgba(15, 23, 42, 0.12);
  --mf-border-strong: rgba(15, 23, 42, 0.2);
  --mf-text: #16202f;
  --mf-muted: #55627a;
  --mf-accent: #4f46e5;
  --mf-accent-2: #0d9488;
  --mf-hot: #e11d48;
  --mf-header-bg: rgba(255, 255, 255, 0.9);
}
/* Aurora'nın koyu varsayan sabit kuralları gündüz modunda düzeltilir */
:root[data-theme="light"] body { background: var(--mf-bg) !important; color: var(--mf-text) !important; }
:root[data-theme="light"] .forum-item-textblock a strong,
:root[data-theme="light"] .forum-item-topiclist-title,
:root[data-theme="light"] .activity-row-title,
:root[data-theme="light"] .news-feed-item strong,
:root[data-theme="light"] .widget h3,
:root[data-theme="light"] .category h2 {
  color: var(--mf-text) !important;
}
:root[data-theme="light"] .post-author:not(.pb-playground-preview):not([class*="postbit-style-custom"]) {
  background: rgba(15, 23, 42, 0.03) !important;
}
:root[data-theme="light"] .site-footer { background: var(--color-primary) !important; }

/* Gündüz modu — karşılama kartı başlığı.
   Taramada bulunan tek gerçek okunabilirlik sorunu: h1 beyaz metin
   açık gradient üzerinde kalıyordu ("Tekrar hoş geldin, admin"
   görünmüyordu). Footer/geri sayım/çerez bandı bilinçli koyu
   yüzeyler - onlara dokunulmuyor. */
:root[data-theme="light"] .welcome-block h1,
:root[data-theme="light"] .welcome-block h2,
:root[data-theme="light"] .welcome-block p,
:root[data-theme="light"] .welcome-block em,
:root[data-theme="light"] .welcome-banner h1,
:root[data-theme="light"] .welcome-banner h2,
:root[data-theme="light"] .welcome-banner p,
:root[data-theme="light"] .home-hero h1,
:root[data-theme="light"] .home-hero p {
  color: var(--mf-text, #16202f) !important;
}
:root[data-theme="light"] .welcome-block,
:root[data-theme="light"] .welcome-banner,
:root[data-theme="light"] .home-hero {
  background: linear-gradient(135deg, #eef2ff, #ffffff) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

/* ===============================================================
   FORUM KARTI — BOŞ "SON MESAJ" SÜTUNU YER KAPLAMASIN
   Ölçüm: kart grid'i "162px 280px" idi - yani hiç mesajı olmayan
   bir forumda BOŞ sütun 280px alırken, asıl içerik (forum adı +
   açıklama) 162px'e sıkışıyordu. Başlıklar ve açıklamalar bu yüzden
   satır satır kırılıp okunmaz hale geliyordu.
   Karar: son mesaj alanı boşsa sütun hiç ayrılmaz, metin tam
   genişliği kullanır; "Henüz mesaj yok" ifadesi metnin altında
   küçük bir not olarak kalır (bilgi korunur, alan israfı biter).
   =============================================================== */
.forum-item--grid:has(.forum-item-lastpost-col.is-empty) {
  grid-template-columns: minmax(0, 1fr) !important;
}
.forum-item--grid:has(.forum-item-lastpost-col.is-empty) .forum-item-lastpost-col {
  grid-column: 1 / -1;
  border-left: 0 !important;
  background: transparent !important;
}

/* ===============================================================
   ADMIN GÜNDÜZ MODU — KUTU İÇİ METİN OKUNABİLİRLİĞİ
   Kullanıcı: "beyaz tema biraz düzelmiş ama kutu içindekiler
   okunmuyor". Kontrast denetimi (yarı saydam zeminler beyazla
   harmanlanarak) 40 metnin eşiğin altında olduğunu gösterdi:

     admin-module-state  2.25    btn-secondary      1.28
     admin-module-icon   1.78    admin-page-kicker  2.56
     health rozetleri    1.55    btn-primary        1.08
     summary             1.48

   Ortak sebep: bu renkler KOYU zemin için seçilmiş açık tonlar
   (pastel yeşil, açık gri, beyaz). Beyaz zeminde kaybolurlar.
   Aşağıda her biri için gündüz karşılığı tanımlanıyor - hepsi
   WCAG AA (4.5:1) üzerini hedefliyor.
   =============================================================== */

/* Modül rozetleri: açık/kapalı durumu okunabilir kalmalı */
:root[data-admin-theme="light"] .admin-module-state {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #475569 !important;
}
:root[data-admin-theme="light"] .admin-module-pill.is-on .admin-module-state {
  /* 0.14 saydamlıkta zemin harmanlanınca kontrast 4.49'a düşüyordu
     (ölçüldü) - eşiğin kılpayı altı. Ton koyulaştırıldı. */
  background: rgba(4, 108, 78, 0.16) !important;
  color: #04624a !important;
}
:root[data-admin-theme="light"] .admin-module-pill.is-on {
  border-color: rgba(4, 120, 87, 0.35) !important;
}

/* Sağlık merkezi durum etiketleri (BAĞLI / OK / TEMİZ ...) */
:root[data-admin-theme="light"] .admin-health-item b {
  color: #047857 !important;
}
:root[data-admin-theme="light"] .admin-health-item:has(.admin-health-dot.warn) b {
  color: #b45309 !important;
}
:root[data-admin-theme="light"] .admin-health-item small {
  color: #55627a !important;
}

/* Butonlar: beyaz metin beyaz zeminde kayboluyordu */
:root[data-admin-theme="light"] .btn-primary {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
}
:root[data-admin-theme="light"] .btn-primary:hover { background: #4338ca !important; }
:root[data-admin-theme="light"] .btn-secondary {
  background: #ffffff !important;
  color: #16202f !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
}
:root[data-admin-theme="light"] .btn-secondary:hover { background: #eef2f8 !important; }

/* Üst etiketler ve accordion başlıkları */
:root[data-admin-theme="light"] .admin-page-kicker,
:root[data-admin-theme="light"] .admin-card-label,
:root[data-admin-theme="light"] .admin-eyebrow {
  color: #4338ca !important;
}
:root[data-admin-theme="light"] .admin-quick-advanced > summary,
:root[data-admin-theme="light"] .admin-settings-section-summary {
  color: #16202f !important;
}
:root[data-admin-theme="light"] .admin-module-count {
  background: rgba(15, 23, 42, 0.07) !important;
  color: #475569 !important;
}

/* ===============================================================
   GİRİŞ / KAYIT SAYFALARI
   Ölçüm: 420px'lik kart 1440px'lik boş alanda yüzüyordu. Yeni düzen
   soldaki alanı topluluğun ne olduğunu anlatmak için kullanıyor.
   Mobilde tek sütuna iner; marka paneli orada gizlenir çünkü dikey
   alan kıt ve kullanıcı zaten forma odaklıdır.
   =============================================================== */
.auth-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1040px;
  margin: 1.5rem auto 3rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .auth-split { grid-template-columns: 1.05fr 0.95fr; gap: 2rem; }
}

/* Sol: marka / değer önerisi */
.auth-brand {
  display: none;
  border-radius: 20px;
  padding: 2.2rem 2rem;
  background:
    radial-gradient(circle at 88% 10%, rgba(124,108,255,.28), transparent 55%),
    linear-gradient(160deg, var(--mf-surface-2, #121b2e), var(--mf-bg-2, #0b1020));
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
}
@media (min-width: 900px) { .auth-brand { display: flex; align-items: center; } }
.auth-brand-badge {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(124,108,255,.18);
  color: var(--mf-accent, #8b7cff);
  margin-bottom: .9rem;
}
.auth-brand h2 {
  font-size: 1.65rem;
  line-height: 1.25;
  margin: 0 0 .6rem;
  color: var(--mf-text, #f4f7fb);
}
.auth-brand p { color: var(--mf-muted, #94a3b8); margin: 0 0 1.3rem; }
.auth-brand-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.auth-brand-list li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .9rem; color: var(--mf-text, #e6ebf3);
}
.auth-brand-list span { font-size: 1.1rem; }

/* Sağ: form paneli */
.auth-panel {
  border-radius: 20px;
  padding: 1.9rem 1.7rem;
  background: var(--mf-surface-solid, #0f1626);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
}
.auth-panel h1 {
  font-size: 1.5rem; margin: 0 0 1.2rem;
  color: var(--mf-text, #f4f7fb);
}
.auth-form { display: grid; gap: 1rem; }
.auth-submit { width: 100%; }
.auth-alert {
  border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem;
  background: rgba(225,29,72,.12);
  border: 1px solid rgba(225,29,72,.35);
  color: #fda4af; font-size: .88rem;
}
.auth-divider {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.3rem 0 1rem; color: var(--mf-muted, #94a3b8); font-size: .8rem;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--mf-border, rgba(148,163,184,.18));
}
.auth-oauth { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: .5rem; }
.auth-oauth-btn {
  text-align: center; padding: .6rem .5rem; border-radius: 12px;
  border: 1px solid var(--mf-border, rgba(148,163,184,.16));
  background: var(--mf-surface-2, #121b2e);
  color: var(--mf-text, #e6ebf3) !important;
  font-size: .85rem; text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
.auth-oauth-btn:hover { background: var(--mf-bg-2, #0b1020); border-color: var(--mf-accent, #7c6cff); }
.auth-minor { margin: 1rem 0 0; font-size: .85rem; }
.auth-minor a { color: var(--mf-accent, #8b7cff); }

/* Kayıt çağrısı */
.auth-register-cta {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--mf-border, rgba(148,163,184,.14));
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
  font-size: .88rem; color: var(--mf-muted, #94a3b8);
}
.auth-register-btn {
  padding: .6rem 1.1rem; border-radius: 999px;
  font-weight: 700; font-size: .88rem;
  color: #fff !important; text-decoration: none !important;
  background: linear-gradient(135deg, #e11d48, #f43f5e);
  border: 1px solid rgba(244,63,94,.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.auth-register-btn:hover { transform: translateY(-1px); }

/* TASARIM KARARI — dikkat çekme efekti "yanıp sönme" DEĞİL, yavaş nabız.
   Gerekçe: hızlı yanıp sönen içerik ışığa duyarlı kullanıcılarda nöbet
   tetikleyebilir; WCAG 2.3.1 saniyede 3'ten fazla parlamayı yasaklar.
   Buradaki döngü 2.4 saniye (saniyede ~0.4 parlama) ve opaklık hiç
   sıfıra inmiyor - buton her an okunabilir kalıyor, sadece etrafındaki
   halka nefes alıyor. Hareket tercihini kapatanlar için tamamen durur. */
@keyframes auth-register-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,.55); }
  50%      { box-shadow: 0 0 0 10px rgba(244,63,94,0); }
}
.auth-register-btn.is-pulsing { animation: auth-register-pulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .auth-register-btn.is-pulsing { animation: none !important; }
}

/* Gündüz modu */
:root[data-theme="light"] .auth-panel,
:root[data-theme="light"] .auth-brand {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.12) !important;
}
:root[data-theme="light"] .auth-brand {
  background: linear-gradient(160deg, #eef2ff, #ffffff) !important;
}
:root[data-theme="light"] .auth-oauth-btn {
  background: #f7f9fc !important; color: #16202f !important;
  border-color: rgba(15,23,42,.12) !important;
}

/* Kayıt sayfasındaki "Giriş Yap" bağlantısı: burada nabız YOK.
   Kayıt sayfasında birincil eylem zaten formun kendisi; ikinci bir
   hareketli öğe dikkati bölerdi. Aynı görsel dil, sakin ton. */
.auth-login-btn {
  padding: .55rem 1.05rem; border-radius: 999px;
  font-weight: 700; font-size: .86rem;
  color: var(--mf-text, #e6ebf3) !important; text-decoration: none !important;
  background: var(--mf-surface-2, #121b2e);
  border: 1px solid var(--mf-border-strong, rgba(148,163,184,.24));
  transition: background .15s ease, border-color .15s ease;
}
.auth-login-btn:hover { background: var(--mf-bg-2, #0b1020); border-color: var(--mf-accent, #7c6cff); }
:root[data-theme="light"] .auth-login-btn { background: #f7f9fc !important; color: #16202f !important; }

/* Avatar kırpma aracı */
.avatar-crop-dialog { border:0;padding:0;background:transparent;color:var(--mf-text,#eef2ff);max-width:min(92vw,480px);width:100%; }
.avatar-crop-dialog::backdrop { background:rgba(2,6,23,.76);backdrop-filter:blur(5px); }
.avatar-crop-card { padding:1rem;border:1px solid var(--mf-border,rgba(148,163,184,.18));border-radius:18px;background:var(--mf-surface-solid,#0f1626);box-shadow:0 24px 70px rgba(0,0,0,.45); }
.avatar-crop-head,.avatar-crop-actions { display:flex;align-items:center;justify-content:space-between;gap:.75rem; }
.avatar-crop-head small { display:block;color:var(--mf-muted,#94a3b8);font-size:.75rem;margin-top:.2rem; }
.avatar-crop-close { border:0;background:transparent;color:inherit;font-size:1.7rem;cursor:pointer; }
.avatar-crop-stage { position:relative;width:min(78vw,360px);aspect-ratio:1;margin:1rem auto;overflow:hidden;border-radius:14px;background:#050811;touch-action:none;cursor:grab; }
.avatar-crop-stage:active { cursor:grabbing; }
.avatar-crop-stage img { position:absolute;max-width:none;user-select:none;pointer-events:none;transform-origin:center; }
.avatar-crop-mask { position:absolute;inset:0;border:2px solid rgba(255,255,255,.78);border-radius:50%;box-shadow:0 0 0 100vmax rgba(0,0,0,.44);pointer-events:none; }
.avatar-crop-zoom { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.8rem;font-size:.82rem;color:var(--mf-muted,#94a3b8);margin:.5rem 0 1rem; }
.avatar-crop-actions { justify-content:flex-end; }
.gravatar-toggle-form { display:grid;gap:.4rem;margin-top:.65rem;text-align:center; }
.gravatar-toggle-form small { font-size:.68rem;line-height:1.35; }
:root[data-theme="light"] .avatar-crop-card { background:#fff;color:#16202f; }

/* Hesap ayarları kaydırmalı anahtarları */
.custom-toggle-wrapper { display:flex!important;align-items:center;justify-content:space-between;gap:1rem;padding:.78rem .9rem!important;background:var(--mf-surface-2,#121b2e);border:1px solid var(--mf-border,rgba(148,163,184,.14));border-radius:12px;cursor:pointer;transition:background .2s,border-color .2s; }
.custom-toggle-wrapper:hover { border-color:var(--mf-border-strong,rgba(148,163,184,.28)); }
.toggle-info { display:flex;flex-direction:column;min-width:0; }
.toggle-title { color:var(--mf-text,#e6ebf3);font-size:.86rem;font-weight:650; }
.toggle-desc { color:var(--mf-muted,#94a3b8);font-size:.7rem;line-height:1.4;margin-top:.15rem; }
.toggle-input { position:absolute;opacity:0;pointer-events:none; }
.toggle-slider { position:relative;width:44px;height:24px;background:#526174;border-radius:999px;transition:background-color .25s;flex:0 0 auto; }
.toggle-slider::before { content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.28);transition:transform .25s; }
.toggle-input:checked + .toggle-slider { background:#16a36a; }
.toggle-input:checked + .toggle-slider::before { transform:translateX(20px); }
.toggle-input:focus-visible + .toggle-slider { outline:3px solid rgba(124,108,255,.4);outline-offset:2px; }
:root[data-theme="light"] .custom-toggle-wrapper { background:#f8fafc;border-color:rgba(15,23,42,.12); }
:root[data-theme="light"] .toggle-title { color:#16202f; }

/* İkincil hızlı navigasyon eylemleri */
.quick-nav-inline-form { display:inline-flex;margin:0;flex:0 0 auto; }
.quick-nav-inline-form .pill { font:inherit;cursor:pointer; }
.quick-topic-cta { margin-inline-start:auto; }
.quick-topic-cta > .pill { color:#fff!important;background:linear-gradient(135deg,#059669,#16a36a)!important;border-color:rgba(52,211,153,.5)!important;box-shadow:0 7px 22px rgba(5,150,105,.24);font-weight:750; }
.quick-topic-cta > .pill:hover { transform:translateY(-1px);box-shadow:0 10px 28px rgba(5,150,105,.34); }
@media(max-width:700px){.quick-topic-cta{margin-inline-start:0}.quick-topic-cta>.pill{position:sticky;right:0}}

/* Üç sütunlu içerik akışı */
.stream-layout-v2{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr) minmax(190px,240px);gap:1rem;align-items:start}.stream-rail.is-hidden{display:none}.stream-layout-v2:has(.stream-rail-left.is-hidden){grid-template-columns:minmax(0,1fr) minmax(190px,240px)}.stream-layout-v2:has(.stream-rail-right.is-hidden){grid-template-columns:minmax(190px,240px) minmax(0,1fr)}.stream-layout-v2:has(.stream-rail-left.is-hidden):has(.stream-rail-right.is-hidden){grid-template-columns:minmax(0,1fr)}
.stream-rail-card{padding:.9rem;border:1px solid var(--mf-border,rgba(148,163,184,.14));border-radius:16px;background:var(--mf-surface-solid,#0f1626)}.stream-rail-card--sticky{position:sticky;top:80px}.stream-rail-head{display:flex;gap:.55rem;align-items:center;padding-bottom:.7rem;margin-bottom:.5rem;border-bottom:1px solid var(--mf-border,rgba(148,163,184,.12))}.stream-rail-head>span{font-size:1.25rem}.stream-rail-head strong,.stream-rail-head small{display:block}.stream-rail-head small{font-size:.66rem;color:var(--mf-muted,#94a3b8);margin-top:.1rem}
.stream-topic-mini-list{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}.stream-topic-mini-list li{display:grid;grid-template-columns:22px 1fr;gap:.4rem;align-items:start;padding:.45rem 0}.stream-topic-mini-list li>span{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(124,108,255,.14);color:var(--mf-accent,#8b7cff);font-size:.68rem;font-weight:800}.stream-topic-mini-list a,.stream-featured-list a{color:var(--mf-text,#e6ebf3)!important;font-size:.76rem;font-weight:650;line-height:1.35;text-decoration:none!important}.stream-topic-mini-list small,.stream-featured-list small{display:block;color:var(--mf-muted,#94a3b8);font-size:.62rem;margin-top:.16rem}.stream-featured-list{display:grid;gap:.38rem}.stream-featured-list a{display:block;padding:.55rem;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid transparent}.stream-featured-list a:hover{border-color:var(--mf-border-strong,rgba(148,163,184,.25))}.stream-online-chip{margin-top:.7rem;padding:.5rem;border-radius:9px;background:rgba(16,185,129,.08);color:#6ee7b7;font-size:.68rem;text-align:center}
.stream-customizer{position:fixed;right:22px;bottom:22px;z-index:80}.stream-customizer>button{width:48px;height:48px;border:0;border-radius:50%;background:linear-gradient(135deg,#334e7d,#172a4a);color:#fff;font-size:1.25rem;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.34)}.stream-customizer-panel{position:absolute;right:0;bottom:58px;width:220px;padding:.85rem;border-radius:14px;background:var(--mf-surface-solid,#0f1626);border:1px solid var(--mf-border,rgba(148,163,184,.18));box-shadow:0 18px 45px rgba(0,0,0,.4)}.stream-customizer-panel strong{display:block;margin-bottom:.55rem;font-size:.82rem}.stream-customizer-panel label{display:flex;align-items:center;gap:.45rem;padding:.35rem 0;font-size:.74rem;color:var(--mf-muted,#94a3b8)}
@media(max-width:980px){.stream-layout-v2{grid-template-columns:minmax(0,1fr) minmax(190px,230px)}.stream-rail-left{display:none}}@media(max-width:700px){.stream-layout-v2{grid-template-columns:1fr}.stream-rail{display:none}.stream-customizer{right:14px;bottom:14px}}

/* Sidebar sosyal ağlar ve sabit konular */
.sidebar-social-widget>p{font-size:.72rem;margin:-.25rem 0 .7rem}.sidebar-social-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}.sidebar-social-grid a{display:grid;place-items:center;gap:.18rem;min-height:54px;padding:.4rem .2rem;border:1px solid var(--mf-border,rgba(148,163,184,.14));border-radius:11px;background:rgba(255,255,255,.025);color:var(--mf-text,#e6ebf3)!important;text-decoration:none!important;transition:transform .16s,border-color .16s}.sidebar-social-grid a:hover{transform:translateY(-2px);border-color:var(--mf-accent,#8b7cff)}.sidebar-social-grid span{font-size:1rem;font-weight:800}.sidebar-social-grid small{font-size:.55rem;color:var(--mf-muted,#94a3b8);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sidebar-pinned-list{display:grid;gap:.38rem}.sidebar-pinned-list a{display:block;padding:.58rem .62rem;border-left:3px solid #f59e0b;border-radius:0 10px 10px 0;background:rgba(245,158,11,.055);color:var(--mf-text,#e6ebf3)!important;text-decoration:none!important}.sidebar-pinned-list strong{display:block;font-size:.75rem;line-height:1.35}.sidebar-pinned-list small{display:block;margin-top:.18rem;font-size:.61rem;color:var(--mf-muted,#94a3b8)}
/* Kayıt formu uzun: iki sütuna yayılarak dikey uzunluk yarıya iner */
@media (min-width: 900px) {
  .auth-split--register .auth-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
  .auth-split--register .auth-form > button,
  .auth-split--register .auth-form > .checkbox-label,
  .auth-split--register .auth-form > label:has(textarea) { grid-column: 1 / -1; }
}

/* ===============================================================
   PROFİL SEKMELERİ — Rozetler / Arkadaşlar / Cezalar
   =============================================================== */
.profile-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .6rem;
}
.profile-badge {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem; border-radius: 12px;
  background: var(--mf-surface-2, #121b2e);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
  border-left: 3px solid var(--badge-color, #7c6cff);
}
.profile-badge-icon { font-size: 1.5rem; flex: 0 0 auto; }
.profile-badge strong { display: block; font-size: .9rem; color: var(--mf-text, #e6ebf3); }
.profile-badge small { display: block; font-size: .74rem; color: var(--mf-muted, #94a3b8); }

.profile-friend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .55rem;
}
.profile-friend {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border-radius: 12px;
  background: var(--mf-surface-2, #121b2e);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
  color: var(--mf-text, #e6ebf3) !important;
  text-decoration: none !important; font-size: .85rem;
  transition: background .15s ease, border-color .15s ease;
}
.profile-friend:hover { background: var(--mf-bg-2, #0b1020); border-color: var(--mf-accent, #7c6cff); }
.profile-friend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profile-warning-list { display: grid; gap: .5rem; }
.profile-warning {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem .85rem; border-radius: 12px;
  background: var(--mf-surface-2, #121b2e);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
  border-left: 3px solid rgba(148,163,184,.4);
}
/* Süresi dolmuş ceza ile aktif ceza görsel olarak AYRILMALI:
   ikisi aynı görünürse kullanıcı durumunu yanlış okur. */
.profile-warning.is-active { border-left-color: #e11d48; }
.profile-warning > div { flex: 1 1 auto; min-width: 0; }
.profile-warning strong { display: block; font-size: .88rem; color: var(--mf-text, #e6ebf3); }
.profile-warning small { font-size: .74rem; }
.profile-warning-points {
  font-size: .74rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(148,163,184,.16); color: var(--mf-muted, #94a3b8);
}
.profile-warning-state {
  font-size: .66rem; font-weight: 800; letter-spacing: .04em;
  padding: .2rem .5rem; border-radius: 999px;
  background: rgba(148,163,184,.14); color: var(--mf-muted, #94a3b8);
}
.profile-warning.is-active .profile-warning-state {
  background: rgba(225,29,72,.16); color: #fb7185;
}
:root[data-theme="light"] .profile-badge,
:root[data-theme="light"] .profile-friend,
:root[data-theme="light"] .profile-warning {
  background: #f7f9fc !important; border-color: rgba(15,23,42,.12) !important;
}

/* ===============================================================
   CSS KOD EDİTÖRÜ — VS Code Dark+ tonları
   Overlay tekniği: renklendirilmiş <pre> arkada, metni şeffaf
   <textarea> önde. Font ölçüleri BİREBİR aynı olmak zorunda,
   yoksa yazarken harfler kayar - bu yüzden font/boyut/satır
   yüksekliği/dolgu değerleri iki katmanda da aynı tanımlanıyor.
   =============================================================== */
.cse-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2d3343;
  background: #1e1e1e;            /* VS Code Dark+ editör zemini */
}
.cse-highlight,
.cse-input {
  margin: 0;
  padding: 14px 16px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  word-wrap: normal;
}
.cse-highlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #d4d4d4;
}
/* Özgüllük notu: modern-forum.css'teki "textarea:not(.tw-field)"
   kuralı 0,1,1 özgüllüğünde ve !important taşıyor; düz ".cse-input"
   (0,1,0) ona YENİLİYORDU - metin ve zemin opak kalıyor, arkadaki
   renkli katman hiç görünmüyordu (ölçümle doğrulandı).
   "textarea.cse-input" 0,1,1 + sonra yüklendiği için kazanıyor. */
textarea.cse-input,
.cse-input {
  position: relative;
  display: block;
  width: 100%;
  min-height: 260px;
  background: transparent !important;
  color: transparent !important;
  caret-color: #ffffff;
  border: 0 !important;
  outline: none !important;
  resize: vertical;
}
.cse-input::selection { background: rgba(56, 108, 176, .55); }
.cse-wrap:focus-within { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.22); }

/* Token renkleri — VS Code Dark+ */
.cse-selector { color: #d7ba7d; }   /* seçici */
.cse-scope    { color: #4ec9b0; font-weight: 700; }  /* {SCOPE} vurgulu */
.cse-prop     { color: #9cdcfe; }   /* özellik adı */
.cse-hex      { color: #ce9178; }   /* renk kodu */
.cse-num      { color: #b5cea8; }   /* sayı + birim */
.cse-fn       { color: #dcdcaa; }   /* fonksiyon */
.cse-comment  { color: #6a9955; font-style: italic; }
.cse-brace    { color: #ffd700; }   /* süslü parantez */

/* ===============================================================
   POSTBIT GÖNDERME SAYFASI
   Kullanıcı: "tasarımdan uzak, saçma sapan olmuş, anlaşılmıyor".
   Üç eylem <hr> ile ayrılmış tek bir yığındı; sayfa uzun uyarı
   paragraflarıyla başlıyordu.
   Kartlar + ince sınırlar + ferah dikey boşluk; kurallar accordion.
   =============================================================== */
.pbc-page { max-width: 860px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.pbc-head { margin-bottom: 1.4rem; }
.pbc-head h1 { margin: 0 0 .35rem; font-size: 1.55rem; color: var(--mf-text, #f4f7fb); }
.pbc-head p { margin: 0; color: var(--mf-muted, #94a3b8); font-size: .92rem; }

.pbc-card {
  display: block;
  background: var(--mf-surface-solid, #0f1626);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
  border-radius: 18px;
  padding: 1.4rem 1.3rem;
  margin-bottom: 1.1rem;   /* nefes alacak dikey boşluk */
}
.pbc-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--mf-border, rgba(148,163,184,.12));
}
.pbc-card-head h2 { margin: 0; font-size: 1.05rem; color: var(--mf-text, #f4f7fb); }

/* Kod bilmeyenler için birincil giriş yolu */
.pbc-card--cta {
  display: flex; align-items: center; gap: 1rem;
  text-decoration: none !important;
  background: linear-gradient(135deg, rgba(124,108,255,.16), rgba(35,213,197,.10));
  border-color: rgba(124,108,255,.4);
  transition: transform .15s ease, border-color .15s ease;
}
.pbc-card--cta:hover { transform: translateY(-2px); border-color: rgba(124,108,255,.75); }
.pbc-cta-icon { font-size: 1.7rem; flex: 0 0 auto; }
.pbc-cta-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; }
.pbc-cta-text strong { color: var(--mf-text, #f4f7fb); font-size: .98rem; }
.pbc-cta-text small { color: var(--mf-muted, #94a3b8); font-size: .82rem; }
.pbc-cta-arrow { font-size: 1.2rem; color: var(--mf-accent, #8b7cff); flex: 0 0 auto; }

/* Kurallar accordion - "lazım olan bakar, olmayan görmez" */
.pbc-rules { flex: 0 0 auto; }
.pbc-rules > summary {
  cursor: pointer; list-style: none;
  font-size: .8rem; color: var(--mf-muted, #94a3b8);
  padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--mf-border, rgba(148,163,184,.16));
  transition: background .15s ease;
}
.pbc-rules > summary::-webkit-details-marker { display: none; }
.pbc-rules > summary:hover { background: rgba(255,255,255,.05); }
.pbc-rules-body {
  margin-top: .7rem; padding: .85rem 1rem;
  border-radius: 12px;
  background: var(--mf-surface-2, #121b2e);
  border: 1px solid var(--mf-border, rgba(148,163,184,.12));
  font-size: .82rem; color: var(--mf-muted, #94a3b8);
}
.pbc-rules-body p { margin: 0 0 .5rem; }
.pbc-rules-body p:last-child { margin-bottom: 0; }
.pbc-rules-body code {
  background: rgba(148,163,184,.14); padding: .05rem .35rem;
  border-radius: 5px; font-size: .78rem; color: #9cdcfe;
}
.pbc-rules:not([open]) .pbc-rules-body { display: none; }

.pbc-form { display: grid; gap: 1rem; }
.pbc-row { display: grid; gap: 1rem; }
@media (min-width: 700px) { .pbc-row { grid-template-columns: 1fr 1fr; } }

/* Dosya bırakma alanı */
.pbc-drop {
  position: relative; display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.2rem; border-radius: 14px; cursor: pointer;
  border: 2px dashed var(--mf-border-strong, rgba(148,163,184,.28));
  background: var(--mf-surface-2, #121b2e);
  transition: border-color .15s ease, background .15s ease;
}
.pbc-drop:hover { border-color: var(--mf-accent, #7c6cff); background: var(--mf-bg-2, #0b1020); }
.pbc-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pbc-drop-icon { font-size: 1.5rem; }
.pbc-drop-text { display: flex; flex-direction: column; }
.pbc-drop-text strong { font-size: .9rem; color: var(--mf-text, #e6ebf3); }
.pbc-drop-text small { font-size: .78rem; color: var(--mf-muted, #94a3b8); }

:root[data-theme="light"] .pbc-card,
:root[data-theme="light"] .pbc-rules-body,
:root[data-theme="light"] .pbc-drop {
  background: #ffffff !important; border-color: rgba(15,23,42,.12) !important;
}
:root[data-theme="light"] .pbc-card--cta {
  background: linear-gradient(135deg, #eef2ff, #ffffff) !important;
}

/* ===============================================================
   POSTBIT CANLI TASARIMCI — "önce seç, sonra ince ayar"
   Hazır tema kartları en üstte (tek tıkla tüm tasarım), görsel
   seçenekler ortada, ham renk kontrolleri accordion içinde.
   Gerekçe: CSS bilmeyen biri için boş bir kontrol paneli, boş bir
   tuval kadar caydırıcıdır.
   =============================================================== */
.pg-page { max-width: 1180px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.pg-head h1 { margin: 0 0 .3rem; font-size: 1.5rem; color: var(--mf-text, #f4f7fb); }
.pg-head p { margin: 0 0 1.3rem; color: var(--mf-muted, #94a3b8); font-size: .92rem; }

.pg-layout { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 1000px) { .pg-layout { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.pg-group {
  background: var(--mf-surface-solid, #0f1626);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
  border-radius: 16px; padding: 1.1rem 1.15rem; margin-bottom: 1rem;
}
.pg-group h3 { margin: 0 0 .8rem; font-size: .95rem; color: var(--mf-text, #f4f7fb); }

/* Hazır tema kartları */
.pg-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .6rem; }
.pg-preset {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .6rem; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--mf-surface-2, #121b2e);
  border: 2px solid var(--mf-border, rgba(148,163,184,.14));
  transition: border-color .15s ease, transform .15s ease;
  font: inherit; color: inherit;
}
.pg-preset:hover { transform: translateY(-2px); border-color: var(--mf-border-strong, rgba(148,163,184,.3)); }
.pg-preset.active { border-color: var(--mf-accent, #7c6cff); }
.pg-preset-swatch { display: block; height: 42px; border-radius: 8px; }
.pg-preset-name { font-size: .84rem; font-weight: 700; color: var(--mf-text, #e6ebf3); }
.pg-preset small { font-size: .72rem; color: var(--mf-muted, #94a3b8); line-height: 1.3; }

/* Görsel seçenek çipleri */
.pg-chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.pg-chip {
  padding: .45rem .8rem; border-radius: 999px; cursor: pointer;
  font-size: .82rem; font: inherit; font-size: .82rem;
  background: var(--mf-surface-2, #121b2e);
  color: var(--mf-text, #e6ebf3);
  border: 1px solid var(--mf-border, rgba(148,163,184,.16));
  transition: background .15s ease, border-color .15s ease;
}
.pg-chip:hover { background: var(--mf-bg-2, #0b1020); }
.pg-chip.active {
  border-color: var(--mf-accent, #7c6cff);
  background: color-mix(in srgb, var(--mf-accent, #7c6cff) 16%, transparent);
}

/* İnce ayar accordion */
.pg-advanced > summary {
  cursor: pointer; list-style: none; font-size: .92rem; font-weight: 600;
  color: var(--mf-text, #f4f7fb);
}
.pg-advanced > summary::-webkit-details-marker { display: none; }
.pg-advanced-body { display: grid; gap: .7rem; margin-top: .9rem; }
.pg-advanced-body label { display: block; font-size: .82rem; color: var(--mf-muted, #94a3b8); }
.pg-advanced-body input[type="color"] { width: 100%; height: 34px; margin-top: .25rem; }
.pg-advanced-body input[type="range"] { width: 100%; margin-top: .25rem; }
.pg-advanced:not([open]) .pg-advanced-body { display: none; }

/* Önizleme */
.pg-preview-panel {
  background: var(--mf-surface-solid, #0f1626);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
  border-radius: 16px; padding: 1.1rem; margin-bottom: 1rem;
  position: sticky; top: 78px;
}
.pg-preview-panel h3 { margin: 0 0 .8rem; font-size: .95rem; color: var(--mf-text, #f4f7fb); }
.pg-preview-stage {
  display: flex; justify-content: center; padding: 1.6rem 1rem;
  border-radius: 12px;
  background:
    repeating-conic-gradient(rgba(255,255,255,.04) 0% 25%, transparent 0% 50%) 50% / 18px 18px;
}
.pg-preview-stage .post-author { min-width: 170px; text-align: center; }
.pg-css-out { margin-bottom: 1rem; }
.pg-css-out > summary {
  cursor: pointer; list-style: none; font-size: .85rem;
  color: var(--mf-muted, #94a3b8); padding: .5rem 0;
}
.pg-css-out > summary::-webkit-details-marker { display: none; }
.pg-css-out:not([open]) .cse-wrap { display: none; }
.pg-submit { width: 100%; }

:root[data-theme="light"] .pg-group,
:root[data-theme="light"] .pg-preview-panel,
:root[data-theme="light"] .pg-preset,
:root[data-theme="light"] .pg-chip {
  background: #ffffff !important; border-color: rgba(15,23,42,.12) !important;
}

/* ===============================================================
   PROFİL — TİCARET ve GEÇMİŞ sekmeleri
   =============================================================== */
.trade-summary {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1rem 1.1rem; margin-bottom: 1rem; border-radius: 14px;
  background: var(--mf-surface-2, #121b2e);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
}
.trade-score { display: flex; flex-direction: column; align-items: center; min-width: 88px; }
.trade-score strong { font-size: 1.9rem; line-height: 1; color: var(--mf-muted, #94a3b8); }
.trade-score.is-pos strong { color: #34d399; }
.trade-score.is-neg strong { color: #fb7185; }
.trade-score small { font-size: .72rem; color: var(--mf-muted, #94a3b8); margin-top: .2rem; }
.trade-breakdown { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .84rem; color: var(--mf-muted, #94a3b8); }
.trade-breakdown .is-pos { color: #34d399; }
.trade-breakdown .is-neg { color: #fb7185; }

.trade-list { display: grid; gap: .5rem; }
.trade-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; border-radius: 12px;
  background: var(--mf-surface-2, #121b2e);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
  border-left: 3px solid rgba(148,163,184,.35);
}
/* Olumlu/olumsuz sadece rozetle değil SOL ŞERİTLE de ayrılıyor:
   listeyi hızlı tararken renk tek başına yeterli ipucu değil. */
.trade-item.is-positive { border-left-color: #34d399; }
.trade-item.is-negative { border-left-color: #fb7185; }
.trade-item-body { flex: 1 1 auto; min-width: 0; }
.trade-item-body strong { display: block; font-size: .88rem; color: var(--mf-text, #e6ebf3); }
.trade-item-body p { margin: .2rem 0; font-size: .82rem; color: var(--mf-muted, #94a3b8); }
.trade-item-tag {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700;
  padding: .22rem .6rem; border-radius: 999px;
  background: rgba(148,163,184,.16); color: var(--mf-muted, #94a3b8);
}
.trade-item.is-positive .trade-item-tag { background: rgba(52,211,153,.16); color: #34d399; }
.trade-item.is-negative .trade-item-tag { background: rgba(251,113,133,.16); color: #fb7185; }

/* Geçmiş zaman çizelgesi */
.history-timeline { display: grid; gap: .4rem; }
.history-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-radius: 10px;
  background: var(--mf-surface-2, #121b2e);
  border: 1px solid var(--mf-border, rgba(148,163,184,.12));
}
.history-icon { font-size: 1.05rem; flex: 0 0 auto; }
.history-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.history-body small { font-size: .7rem; }
.history-body a, .history-body strong {
  font-size: .87rem; color: var(--mf-text, #e6ebf3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-time { flex: 0 0 auto; font-size: .74rem; }

:root[data-theme="light"] .trade-summary,
:root[data-theme="light"] .trade-item,
:root[data-theme="light"] .history-item {
  background: #f7f9fc !important; border-color: rgba(15,23,42,.12) !important;
}

/* ===============================================================
   MEMBER STORIES
   Halka kalıbı: görülmemiş = renkli gradient, görülmüş = soluk gri.
   Yerleşik bir kalıp olduğu için kullanıcı anlamını öğrenmek
   zorunda kalmıyor.
   =============================================================== */
.stories-strip {
  display: flex; gap: .8rem; overflow-x: auto; padding: .9rem 1rem;
  margin-bottom: 1rem; border-radius: 16px;
  background: var(--mf-surface-solid, #0f1626);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
  scrollbar-width: thin;
}
.story-ring {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer; padding: 0;
  text-decoration: none !important; width: 72px;
}
.story-ring-img {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #f59e0b, #e11d48, #7c6cff);
}
.story-ring.is-seen .story-ring-img {
  background: rgba(148,163,184,.35);   /* izlenmiş: soluk */
}
.story-ring-img img, .story-ring-img .avatar-circle {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--mf-surface-solid, #0f1626);
  object-fit: cover;
}
.story-ring-add-icon {
  font-size: 1.6rem; color: #fff; font-weight: 300;
  background: linear-gradient(135deg, #7c6cff, #23d5c5);
}
.story-ring-name {
  font-size: .72rem; color: var(--mf-muted, #94a3b8);
  max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Slayt gösterisi katmanı */
.story-viewer {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(3,6,12,.94);
  display: grid; place-items: center;
}
.story-viewer[hidden] { display: none; }
.story-viewer-inner {
  position: relative; width: min(430px, 96vw); height: min(760px, 92vh);
  background: #05070d; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
.story-progress { display: flex; gap: 3px; padding: 10px 10px 0; }
.story-progress-bar {
  position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden;
}
.story-progress-bar.is-done { background: #fff; }
.story-progress-bar.is-active::after {
  content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left center;
  animation: storyProgress45 45s linear forwards;
}
@keyframes storyProgress45 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story-viewer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; color: #fff; font-size: .88rem; font-weight: 600;
}
.story-viewer-head button {
  background: none; border: 0; color: #fff; font-size: 1.1rem; cursor: pointer;
}
.story-stage { flex: 1 1 auto; display: grid; place-items: center; overflow: hidden; }
.story-stage img, .story-stage video, .story-stage iframe {
  width: 100%; height: 100%; object-fit: contain; border: 0;
}
.story-caption {
  margin: 0; padding: .8rem 1rem; color: #e6ebf3; font-size: .86rem;
  background: rgba(0,0,0,.35);
}
.story-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; border: 0;
  font-size: 1.4rem; cursor: pointer;
}
.story-nav--prev { left: 8px; }
.story-nav--next { right: 8px; }

/* Hikaye ekleme sayfası */
.story-create-page { max-width: 620px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.story-create-head h1 { margin: 0 0 .3rem; font-size: 1.45rem; color: var(--mf-text, #f4f7fb); }
.story-create-head p { margin: 0 0 1.2rem; color: var(--mf-muted, #94a3b8); font-size: .9rem; }
.story-rules {
  border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1rem;
  background: var(--mf-surface-2, #121b2e);
  border: 1px solid var(--mf-border, rgba(148,163,184,.14));
}
.story-rules > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--mf-text, #e6ebf3); }
.story-rules-body { margin-top: .6rem; font-size: .84rem; color: var(--mf-muted, #94a3b8); }
.story-form { display: grid; gap: 1rem; }
.story-source-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.story-src-tab {
  padding: .45rem .85rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: .84rem;
  background: var(--mf-surface-2, #121b2e); color: var(--mf-text, #e6ebf3);
  border: 1px solid var(--mf-border, rgba(148,163,184,.16));
}
.story-src-tab.active {
  border-color: var(--mf-accent, #7c6cff);
  background: color-mix(in srgb, var(--mf-accent, #7c6cff) 16%, transparent);
}
.story-drop {
  position: relative; display: flex; align-items: center; gap: .9rem; cursor: pointer;
  padding: 1.2rem; border-radius: 14px;
  border: 2px dashed var(--mf-border-strong, rgba(148,163,184,.28));
  background: var(--mf-surface-2, #121b2e);
}
.story-drop:hover { border-color: var(--mf-accent, #7c6cff); }
.story-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.story-drop-icon { font-size: 1.6rem; }
.story-drop-text { display: flex; flex-direction: column; }
.story-drop-text strong { font-size: .9rem; color: var(--mf-text, #e6ebf3); }
.story-drop-text small { font-size: .78rem; color: var(--mf-muted, #94a3b8); }

:root[data-theme="light"] .stories-strip,
:root[data-theme="light"] .story-rules,
:root[data-theme="light"] .story-drop,
:root[data-theme="light"] .story-src-tab {
  background: #ffffff !important; border-color: rgba(15,23,42,.12) !important;
}

/* ===============================================================
   SPECIAL DAYS PRO — dört banner tipi
   bar     : ince şerit, en az dikkat çeken
   card    : içerik akışına oturan kutu
   hero    : görselli, tam genişlik, en baskın
   floating: köşede sabit bildirim, sayfayı itmez
   =============================================================== */
.sd-banner {
  position: relative;
  display: flex; align-items: center; gap: .9rem;
  background: var(--sd-bg, #7c6cff);
  color: var(--sd-fg, #fff);
}
.sd-banner-body { flex: 1 1 auto; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.sd-banner-title { font-weight: 800; }
.sd-banner-msg { opacity: .92; font-size: .88rem; }
.sd-countdown {
  font-variant-numeric: tabular-nums;   /* rakamlar zıplamasın */
  font-weight: 700; font-size: .82rem;
  padding: .15rem .55rem; border-radius: 999px;
  background: rgba(0,0,0,.22);
}
.sd-banner-link {
  flex: 0 0 auto; color: inherit !important;
  font-weight: 700; font-size: .85rem;
  text-decoration: underline !important;
}
.sd-banner-close {
  flex: 0 0 auto; background: rgba(0,0,0,.18); border: 0;
  color: inherit; width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; line-height: 1;
}

/* bar */
.sd-banner--bar { padding: .55rem 1rem; font-size: .9rem; }

/* card */
.sd-banner--card {
  max-width: 1180px; margin: 1rem auto; border-radius: 16px;
  padding: 1rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* hero */
.sd-banner--hero {
  flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: 2rem 1.5rem; overflow: hidden;
  max-width: 1180px; margin: 1rem auto; border-radius: 20px;
}
.sd-banner--hero .sd-banner-title { font-size: 1.6rem; }
.sd-banner-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .28; pointer-events: none;
}
.sd-banner--hero .sd-banner-body,
.sd-banner--hero .sd-banner-link { position: relative; z-index: 1; }

/* floating — sayfayı itmez, köşede durur */
.sd-banner--floating {
  position: fixed; right: 16px; bottom: 84px; z-index: 3000;
  max-width: 320px; border-radius: 16px; padding: .9rem 1rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  flex-direction: column; align-items: flex-start; gap: .45rem;
}
.sd-banner--floating .sd-banner-close { position: absolute; top: 6px; right: 6px; }
@media (max-width: 600px) {
  .sd-banner--floating { left: 12px; right: 12px; max-width: none; bottom: 76px; }
}

/* Özel gün durum rozetleri — yönetici listede hangisinin CANLI
   olduğunu bir bakışta görmeli. Üç durum üç ayrı renk:
   yayında / bekliyor (aktif ama tarihi gelmemiş) / kapalı. */
.sd-state {
  font-size: .66rem; font-weight: 800; letter-spacing: .04em;
  padding: .2rem .5rem; border-radius: 999px; white-space: nowrap;
}
.sd-state.is-live    { background: rgba(52,211,153,.18); color: #34d399; }
.sd-state.is-waiting { background: rgba(245,158,11,.18); color: #f59e0b; }
.sd-state.is-off     { background: rgba(148,163,184,.16); color: #94a3b8; }
.sd-admin-preview{display:flex;flex-direction:column;gap:.25rem;margin-top:1rem;padding:1rem;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.16)}.sd-admin-preview span{opacity:.9;font-size:.8rem}

/* Yönetilebilir scrollbar + akıllı kaydırma kontrolü */
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--site-scroll-accent,#64748b) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--site-scroll-accent,#64748b) 70%,transparent);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--site-scroll-accent,#64748b);box-shadow:0 0 10px color-mix(in srgb,var(--site-scroll-accent,#64748b) 45%,transparent)}
.smart-scroll-control{--scroll-progress:0%;position:fixed;bottom:26px;z-index:880;width:46px;height:46px;padding:3px;border:0;border-radius:50%;background:conic-gradient(var(--scroll-control-accent,#7c6cff) var(--scroll-progress),rgba(148,163,184,.18) 0);opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .22s,transform .22s;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.32)}.smart-scroll-control.is-right{right:24px}.smart-scroll-control.is-left{left:24px}.smart-scroll-control.is-visible{opacity:1;transform:none;pointer-events:auto}.smart-scroll-control:hover{transform:translateY(-3px)}.smart-scroll-progress{position:absolute;inset:3px;border-radius:50%;background:rgba(15,23,42,.9);backdrop-filter:blur(8px)}.smart-scroll-arrow{position:relative;z-index:1;color:#fff;font-size:1.15rem;font-weight:800}.footer-legal-warning{display:inline-flex;align-items:center;gap:.38rem;color:inherit!important;text-decoration:none!important;font-size:.72rem}.footer-legal-warning span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(245,158,11,.13);color:#fbbf24;transition:transform .35s;animation:legal-warning-pulse 2.8s ease-in-out infinite}.footer-legal-warning:hover span{transform:rotate(360deg)}@keyframes legal-warning-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.28)}50%{box-shadow:0 0 0 8px rgba(245,158,11,0)}}@media(prefers-reduced-motion:reduce){.footer-legal-warning span{animation:none}.smart-scroll-control{transition:none}}@media(max-width:700px){.smart-scroll-control{bottom:82px}.smart-scroll-control.is-right{right:14px}.smart-scroll-control.is-left{left:14px}}

/* Geliştirici araç merkezi */
.ai-user-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.5rem;padding:.5rem;border:1px solid rgba(124,108,255,.2);border-radius:10px;background:rgba(124,108,255,.06)}.ai-user-tools>span{font-size:.7rem;font-weight:800;color:#a78bfa}.ai-user-tools button,.ai-user-tools select,.ai-vision-file{padding:.3rem .48rem;border:1px solid rgba(148,163,184,.18);border-radius:7px;background:var(--mf-surface-2,#121b2e);color:inherit;font-size:.64rem}.ai-vision-file{cursor:pointer}.ai-vision-file input{position:absolute;width:1px;height:1px;opacity:0}.ai-user-tools small{flex-basis:100%;white-space:pre-wrap;color:var(--mf-muted,#94a3b8);max-height:180px;overflow:auto}
.ai-suite-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.2rem 0}.ai-suite-grid .admin-card{min-width:0}.ai-subform{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(148,163,184,.15)}.ai-record-list{display:grid;gap:.4rem;margin-top:1rem;max-height:330px;overflow:auto}.ai-record-list article{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem;border:1px solid rgba(148,163,184,.13);border-radius:9px}.ai-record-list strong,.ai-record-list small{display:block}.ai-record-list small{color:var(--mf-muted,#64748b);font-size:.66rem}@media(max-width:900px){.ai-suite-grid{grid-template-columns:1fr}}
.devtools-hero{display:flex;align-items:center;gap:1rem;padding:1.25rem;margin-bottom:1rem;border:1px solid var(--mf-border,rgba(148,163,184,.14));border-radius:20px;background:linear-gradient(135deg,rgba(124,108,255,.12),rgba(37,217,197,.05))}.devtools-hero>span{font-size:2.3rem}.devtools-hero h1{margin:0;font-size:1.65rem}.devtools-hero p{margin:.25rem 0 0;color:var(--mf-muted,#94a3b8)}.devtools-nav{display:flex;gap:.4rem;overflow-x:auto;margin-bottom:1rem;padding-bottom:.25rem}.devtools-nav button{flex:0 0 auto;padding:.48rem .75rem;border:1px solid var(--mf-border,rgba(148,163,184,.14));border-radius:999px;background:var(--mf-surface-2,#121b2e);color:var(--mf-muted,#94a3b8);cursor:pointer}.devtools-nav button.active{background:var(--mf-accent,#7c6cff);border-color:transparent;color:#fff}.devtools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.devtool-card{padding:1rem;border:1px solid var(--mf-border,rgba(148,163,184,.14));border-radius:16px;background:var(--mf-surface-solid,#0f1626)}.devtool-card[hidden]{display:none}.devtool-card h2{margin:0;font-size:1rem}.devtool-card>p{margin:.3rem 0 .8rem;color:var(--mf-muted,#94a3b8);font-size:.72rem}.devtool-card textarea,.devtool-card input:not([type=range]):not([type=color]){width:100%;margin:.25rem 0;padding:.62rem;border:1px solid var(--mf-border,rgba(148,163,184,.18));border-radius:9px;background:var(--mf-bg-2,#0b1020);color:var(--mf-text,#e6ebf3);font:inherit}.devtool-card textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.73rem}.devtool-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}.devtool-actions button,.devtool-card>button{padding:.48rem .68rem;border:1px solid var(--mf-border-strong,rgba(148,163,184,.24));border-radius:8px;background:var(--mf-surface-2,#121b2e);color:var(--mf-text,#e6ebf3);cursor:pointer}.devtool-card output{display:block;min-height:1rem;margin-top:.45rem;color:#34d399;font-size:.68rem}.devtool-card output.is-error{color:#fb7185}.color-tool-row{display:grid;grid-template-columns:54px 1fr 1fr;gap:.45rem;align-items:center}.color-tool-row input[type=color]{width:54px;height:42px;border:0;background:transparent}.color-tool-preview{height:58px;margin-top:.55rem;border-radius:10px}.version-tool-row{display:grid;grid-template-columns:1fr auto 1fr;gap:.45rem;align-items:center}.devtool-card label{display:flex;align-items:center;gap:.55rem;color:var(--mf-muted,#94a3b8);font-size:.75rem}:root[data-theme="light"] .devtool-card{background:#fff}:root[data-theme="light"] .devtool-card textarea,:root[data-theme="light"] .devtool-card input:not([type=range]):not([type=color]){background:#f8fafc;color:#16202f}@media(max-width:760px){.devtools-grid{grid-template-columns:1fr}.color-tool-row{grid-template-columns:50px 1fr}.color-tool-row input:last-child{grid-column:1/-1}}

.devtool-network-result{min-height:80px;max-height:330px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:.6rem 0 0;padding:.65rem;border-radius:9px;background:#080d18;color:#a7f3d0;font-size:.65rem}.devtool-card select{width:100%;margin:.25rem 0;padding:.62rem;border:1px solid rgba(148,163,184,.18);border-radius:9px;background:var(--mf-bg-2,#0b1020);color:inherit}

/* Sidebar yetkililer, rehberler ve günlük kelime oyunu */
.online-staff-list{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.65rem;padding-bottom:.65rem;border-bottom:1px solid var(--mf-border,rgba(148,163,184,.12))}.online-staff-list>small{width:100%;font-size:.58rem;letter-spacing:.08em}.online-staff{padding:.25rem .48rem;border-radius:999px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:#93c5fd;font-size:.66rem;font-weight:700}.online-staff.role-admin,.online-staff.role-super_admin{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.25);color:#c4b5fd}
.sidebar-guide-list{display:grid;gap:.35rem}.sidebar-guide-list a{display:grid;grid-template-columns:auto 1fr;gap:.2rem .45rem;padding:.5rem;border-radius:10px;background:rgba(255,255,255,.025);color:var(--mf-text,#e6ebf3)!important;text-decoration:none!important}.sidebar-guide-list a>span{grid-row:1/3;padding:.16rem .35rem;align-self:start;border-radius:5px;background:#fbbf24;color:#422006;font-size:.55rem;font-weight:850}.sidebar-guide-list strong{font-size:.72rem;line-height:1.35}.sidebar-guide-list small{font-size:.58rem;color:var(--mf-muted,#94a3b8)}
.daily-word-head{display:flex;align-items:center;gap:.55rem}.daily-word-head>span{font-size:1.5rem}.daily-word-head h3{margin:0}.daily-word-head small{font-size:.62rem;color:#fb923c}.daily-word-scramble{margin:.75rem 0 .45rem;padding:.65rem;border-radius:10px;background:rgba(124,108,255,.09);border:1px dashed rgba(124,108,255,.32);text-align:center;letter-spacing:.16em;font-weight:850;color:var(--mf-accent,#8b7cff)}.daily-word-widget>p{font-size:.68rem;line-height:1.45}.daily-word-form{display:grid;grid-template-columns:1fr auto;gap:.35rem}.daily-word-form input{min-width:0}.daily-word-form button{padding-inline:.65rem}.daily-word-result{min-height:1rem;margin-top:.45rem;color:#34d399;font-size:.66rem}.daily-word-result.is-wrong{color:#fb7185}

/* Hesap cihazları ve aktif oturumlar */
.admin-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem;margin:1rem 0}.admin-stat-card{display:flex;flex-direction:column;padding:.85rem;border:1px solid rgba(148,163,184,.18);border-radius:13px;background:rgba(124,108,255,.06)}.admin-stat-card strong{font-size:1.2rem}.admin-stat-card span{font-size:.66rem;color:var(--mf-muted,#64748b)}.devtools-nav a{flex:0 0 auto;padding:.48rem .75rem;border:1px solid rgba(148,163,184,.18);border-radius:999px;text-decoration:none!important}.devtools-nav a.active{background:#7c6cff;color:#fff!important}.story-admin-actions{display:flex;flex-wrap:wrap;gap:.3rem}.story-admin-actions button{padding:.32rem .5rem;font-size:.65rem}.story-admin-media{font-size:1.25rem}@media(max-width:800px){.admin-stats-grid{grid-template-columns:repeat(2,1fr)}}
.device-session-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.device-session-card{padding:1rem;border:1px solid var(--mf-border,rgba(148,163,184,.15));border-radius:16px;background:var(--mf-surface-solid,#0f1626)}.device-session-card.is-current{border-color:rgba(52,211,153,.38);box-shadow:inset 0 0 0 1px rgba(52,211,153,.08)}.device-session-head{display:flex;align-items:center;gap:.65rem}.device-session-head>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(124,108,255,.11);font-size:1.25rem}.device-session-head>div{min-width:0;flex:1}.device-session-head strong,.device-session-head small{display:block}.device-session-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-session-head small{margin-top:.12rem;color:var(--mf-muted,#94a3b8);font-size:.65rem}.device-session-head>b{padding:.22rem .48rem;border-radius:999px;background:rgba(52,211,153,.12);color:#34d399;font-size:.58rem}.device-session-card dl{display:grid;gap:.4rem;margin:.8rem 0}.device-session-card dl>div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.35rem;border-bottom:1px solid var(--mf-border,rgba(148,163,184,.08))}.device-session-card dt{color:var(--mf-muted,#94a3b8);font-size:.65rem}.device-session-card dd{margin:0;text-align:right;font-size:.68rem;overflow-wrap:anywhere}.device-current-note{margin:0;color:#34d399;font-size:.67rem}:root[data-theme="light"] .device-session-card{background:#fff}@media(max-width:720px){.device-session-grid{grid-template-columns:1fr}}

/* Günlük giriş serisi */
.login-streak-trigger{display:flex;align-items:center;gap:.12rem;border:1px solid rgba(249,115,22,.25);border-radius:999px;background:rgba(249,115,22,.09);color:#fb923c;padding:.35rem .5rem;cursor:pointer;font-weight:800}.login-streak-trigger span{font-size:.68rem}.login-streak-dialog{border:0;padding:0;background:transparent;color:var(--mf-text,#e6ebf3);max-width:min(94vw,560px);width:100%}.login-streak-dialog::backdrop{background:rgba(2,6,23,.76);backdrop-filter:blur(5px)}.login-streak-card{position:relative;padding:1.15rem;border:1px solid var(--mf-border,rgba(148,163,184,.18));border-radius:20px;background:var(--mf-surface-solid,#0f1626);box-shadow:0 24px 70px rgba(0,0,0,.5)}.login-streak-close{position:absolute;right:.75rem;top:.55rem;border:0;background:transparent;color:inherit;font-size:1.5rem;cursor:pointer}.login-streak-title{display:flex;align-items:center;gap:.65rem}.login-streak-title>span{font-size:2rem}.login-streak-title strong,.login-streak-title small{display:block}.login-streak-title small{color:var(--mf-muted,#94a3b8);font-size:.72rem;margin-top:.15rem}.login-streak-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem;margin:1rem 0}.login-streak-stats>div{padding:.75rem;border-radius:13px;background:rgba(249,115,22,.07);border:1px solid rgba(249,115,22,.15);text-align:center}.login-streak-stats b,.login-streak-stats small{display:block}.login-streak-stats b{font-size:1.1rem;color:#fb923c}.login-streak-stats small{font-size:.65rem;color:var(--mf-muted,#94a3b8);margin-top:.12rem}.login-streak-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}.login-streak-calendar span{display:grid;place-items:center;gap:.08rem;min-height:61px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--mf-border,rgba(148,163,184,.1))}.login-streak-calendar span.is-visited{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.28)}.login-streak-calendar small{font-size:.52rem;color:var(--mf-muted,#94a3b8)}.login-streak-calendar b{font-size:.72rem}.login-streak-calendar i{font-style:normal;font-size:.65rem}:root[data-theme="light"] .login-streak-card{background:#fff;color:#16202f}@media(max-width:520px){.login-streak-calendar{grid-template-columns:repeat(7,minmax(34px,1fr));overflow-x:auto}.login-streak-calendar span{min-height:54px}}

/* ===============================================================
   HİKAYE ŞERİDİ — HEADER ALTI (tüm sayfalarda)
   Yatay kaydırmalı; (+) ekleme çemberi SAĞDA ve şerit kaydırılsa
   bile sabit kalır (sticky) — ekleme yolu asla gözden kaybolmamalı.
   =============================================================== */
.stories-bar {
  background: var(--mf-surface-solid, #0f1626);
  border-bottom: 1px solid var(--mf-border, rgba(148,163,184,.14));
}
.stories-bar-inner {
  max-width: var(--mf-max, 1360px);
  margin: 0 auto;
  padding: .7rem 1rem;
  display: flex; align-items: center; gap: .8rem;
}
.stories-scroll {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .85rem;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.stories-scroll::-webkit-scrollbar { height: 5px; }
.stories-scroll::-webkit-scrollbar-thumb {
  background: var(--mf-border-strong, rgba(148,163,184,.3)); border-radius: 4px;
}

/* Boş durum: yönlendirici metin */
.stories-empty {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .35rem .2rem; text-align: center; width: 100%;
}
.stories-empty strong { font-size: .88rem; color: var(--mf-text, #e6ebf3); }
.stories-empty span { font-size: .78rem; color: var(--mf-muted, #94a3b8); }

/* Halkalar */
.story-ring, .story-add-btn {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  width: 68px; font: inherit;
}
.story-ring-img, .story-add-ring {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, #f59e0b, #e11d48, #7c6cff);
}
.story-ring.is-seen .story-ring-img { background: rgba(148,163,184,.35); }
.story-ring-img img, .story-ring-img .avatar-circle,
.story-add-ring img, .story-add-ring .avatar-circle {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--mf-surface-solid, #0f1626);
}
.story-ring-name {
  font-size: .7rem; color: var(--mf-muted, #94a3b8);
  max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* (+) ekleme butonu — şerit kaysa bile sağda sabit */
.story-add-btn {
  position: sticky; right: 0;
  padding-left: .6rem;
  background: linear-gradient(90deg, transparent, var(--mf-surface-solid, #0f1626) 30%);
}
.story-add-ring { background: linear-gradient(135deg, #7c6cff, #23d5c5); }
.story-add-plus {
  position: absolute; right: -2px; bottom: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #7c6cff; color: #fff;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; line-height: 1;
  border: 2px solid var(--mf-surface-solid, #0f1626);
}

/* ---------------- HİKAYE EKLE MODALI ---------------- */
.story-modal {
  position: fixed; inset: 0; z-index: 4500;
  background: rgba(3,6,12,.72);
  display: grid; place-items: center;
  padding: 1rem;
}
.story-modal[hidden] { display: none; }
.story-modal-box {
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--mf-surface-solid, #0f1626);
  border: 1px solid var(--mf-border, rgba(148,163,184,.16));
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.story-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--mf-border, rgba(148,163,184,.12));
  position: sticky; top: 0;
  background: var(--mf-surface-solid, #0f1626);
}
.story-modal-head h2 { margin: 0; font-size: 1.05rem; color: var(--mf-text, #f4f7fb); }
.story-modal-close {
  background: none; border: 0; cursor: pointer; font-size: 1.05rem;
  color: var(--mf-muted, #94a3b8);
}
.story-modal-form { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .9rem; }

.sm-field { display: grid; gap: .3rem; }
.sm-label { font-size: .82rem; font-weight: 600; color: var(--mf-text, #e6ebf3); }
.sm-hint { font-weight: 400; color: var(--mf-muted, #94a3b8); }
.sm-req { color: #fb7185; }
.sm-field input {
  width: 100%; padding: .6rem .8rem; border-radius: 10px;
  background: var(--mf-bg-2, #0b1020) !important;
  border: 1px solid var(--mf-border, rgba(148,163,184,.18)) !important;
  color: var(--mf-text, #e6ebf3) !important;
}
.sm-field input:focus {
  outline: none; border-color: var(--mf-accent, #7c6cff) !important;
  box-shadow: 0 0 0 3px rgba(124,108,255,.2);
}

/* Tür seçimi — radyo görsel kart olarak */
.sm-types { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.sm-types legend { margin-bottom: .35rem; }
.sm-type input { position: absolute; opacity: 0; width: 0; height: 0; }
.sm-type-box {
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  padding: .6rem .35rem; border-radius: 12px; cursor: pointer;
  background: var(--mf-surface-2, #121b2e);
  border: 2px solid var(--mf-border, rgba(148,163,184,.14));
  transition: border-color .15s ease, background .15s ease;
  text-align: center;
}
.sm-type input:checked + .sm-type-box {
  border-color: var(--mf-accent, #7c6cff);
  background: color-mix(in srgb, var(--mf-accent, #7c6cff) 14%, transparent);
}
/* Klavye kullanıcısı için görünür odak */
.sm-type input:focus-visible + .sm-type-box { outline: 2px solid var(--mf-accent, #7c6cff); outline-offset: 2px; }
.sm-type-icon { font-size: 1.15rem; }
.sm-type-name { font-size: .78rem; font-weight: 600; color: var(--mf-text, #e6ebf3); }
.sm-type-hint { font-size: .66rem; color: var(--mf-muted, #94a3b8); }

.sm-drop {
  position: relative; display: block; cursor: pointer;
  padding: 1rem; border-radius: 12px; text-align: center;
  border: 2px dashed var(--mf-border-strong, rgba(148,163,184,.28));
  background: var(--mf-surface-2, #121b2e);
  color: var(--mf-text, #e6ebf3); font-size: .86rem;
}
.sm-drop:hover { border-color: var(--mf-accent, #7c6cff); }
.sm-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sm-drop small { display: block; font-size: .72rem; color: var(--mf-muted, #94a3b8); margin-top: .2rem; }
.sm-error { margin: .5rem 0 0; font-size: .78rem; color: #fb7185; }

.sm-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .82rem; color: var(--mf-muted, #94a3b8); }
.sm-check input { margin-top: .15rem; }
.sm-check a { color: var(--mf-accent, #8b7cff); }

.sm-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .2rem; }
.sm-cancel, .sm-save {
  padding: .6rem 1.2rem; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: .88rem; font-family: inherit;
}
.sm-cancel {
  background: var(--mf-surface-2, #121b2e); color: var(--mf-text, #e6ebf3);
  border: 1px solid var(--mf-border, rgba(148,163,184,.18));
}
.sm-save { background: var(--mf-accent, #7c6cff); color: #fff; border: 0; }
.sm-save:hover { filter: brightness(1.08); }

/* Mobil */
@media (max-width: 600px) {
  .stories-bar-inner { padding: .55rem .7rem; }
  .story-ring, .story-add-btn { width: 60px; }
  .story-ring-img, .story-add-ring { width: 50px; height: 50px; }
  .story-modal { padding: 0; align-items: flex-end; }
  .story-modal-box { max-height: 94vh; border-radius: 18px 18px 0 0; }
  .sm-types { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
}

/* Gündüz modu */
:root[data-theme="light"] .stories-bar,
:root[data-theme="light"] .story-modal-box,
:root[data-theme="light"] .story-modal-head { background: #ffffff !important; border-color: rgba(15,23,42,.12) !important; }
:root[data-theme="light"] .sm-type-box,
:root[data-theme="light"] .sm-drop,
:root[data-theme="light"] .sm-cancel { background: #f7f9fc !important; border-color: rgba(15,23,42,.14) !important; }
:root[data-theme="light"] .sm-field input { background: #ffffff !important; color: #16202f !important; }
:root[data-theme="light"] .story-add-btn { background: linear-gradient(90deg, transparent, #ffffff 30%); }

/* ===============================================================
   STORIES V2 — header entegrasyonu + müzik stüdyosu
   =============================================================== */
.stories-bar {
  width: 100%;
  position: relative;
  z-index: 35;
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
}
.stories-bar-inner { width: 100%; box-sizing: border-box; }
.stories-scroll { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.story-ring, .story-add-btn { touch-action: manipulation; }

.story-music-picker {
  border: 1px solid var(--mf-border, rgba(148,163,184,.16));
  border-radius: 14px; padding: .8rem;
  background: var(--mf-surface-2, #121b2e);
}
.story-music-picker-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.story-music-picker-head strong, .story-music-picker-head small { display:block; }
.story-music-picker-head strong { color:var(--mf-text,#e6ebf3); font-size:.86rem; }
.story-music-picker-head small { margin-top:.15rem; color:var(--mf-muted,#94a3b8); font-size:.72rem; }
.story-music-open, #story-music-search-btn {
  flex:0 0 auto; border:0; border-radius:10px; padding:.55rem .8rem;
  background:var(--mf-accent,#7c6cff); color:#fff; font-weight:700; cursor:pointer;
}
.story-music-selected { margin-top:.7rem; display:grid; grid-template-columns:44px minmax(0,1fr) 34px; gap:.65rem; align-items:center; }
.story-music-selected[hidden] { display:none; }
.story-music-selected img { width:44px; height:44px; object-fit:cover; border-radius:9px; background:rgba(148,163,184,.12); }
.story-music-selected strong, .story-music-selected small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.story-music-selected strong { color:var(--mf-text,#e6ebf3); font-size:.82rem; }
.story-music-selected small { color:var(--mf-muted,#94a3b8); font-size:.7rem; margin-top:.1rem; }
.story-music-selected button { border:0; background:transparent; color:var(--mf-muted,#94a3b8); font-size:1.3rem; cursor:pointer; }

.story-music-modal {
  position:fixed; inset:0; z-index:4700; display:grid; place-items:center;
  padding:1rem; background:rgba(3,6,12,.82); backdrop-filter:blur(6px);
}
.story-music-modal[hidden] { display:none; }
.story-music-modal-box {
  width:min(700px,100%); max-height:min(760px,92vh); overflow:hidden;
  display:flex; flex-direction:column; background:var(--mf-surface-solid,#0f1626);
  border:1px solid var(--mf-border,rgba(148,163,184,.16)); border-radius:18px;
  box-shadow:0 28px 90px rgba(0,0,0,.5);
}
.story-music-search-body { padding:1rem; overflow:auto; }
.story-music-search-row { display:grid; grid-template-columns:130px minmax(0,1fr) auto; gap:.55rem; }
.story-music-search-row select, .story-music-search-row input {
  min-width:0; border-radius:10px; padding:.62rem .72rem; color:var(--mf-text,#e6ebf3);
  background:var(--mf-bg-2,#0b1020); border:1px solid var(--mf-border,rgba(148,163,184,.2));
}
.story-music-status { padding:.75rem .1rem; color:var(--mf-muted,#94a3b8); font-size:.78rem; }
.story-music-results { display:grid; gap:.55rem; }
.story-music-result {
  display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:.7rem; align-items:center;
  padding:.55rem; border:1px solid var(--mf-border,rgba(148,163,184,.14)); border-radius:12px;
  background:var(--mf-surface-2,#121b2e);
}
.story-music-result>img { width:54px; height:54px; border-radius:9px; object-fit:cover; background:rgba(148,163,184,.1); }
.story-music-result-meta { min-width:0; }
.story-music-result-meta strong, .story-music-result-meta small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.story-music-result-meta strong { color:var(--mf-text,#e6ebf3); font-size:.82rem; }
.story-music-result-meta small { margin-top:.15rem; color:var(--mf-muted,#94a3b8); font-size:.7rem; }
.story-music-result-actions { display:flex; gap:.35rem; }
.story-music-result-actions button {
  border:1px solid var(--mf-border,rgba(148,163,184,.18)); border-radius:9px; padding:.45rem .55rem;
  background:transparent; color:var(--mf-text,#e6ebf3); cursor:pointer; font-size:.74rem;
}
.story-music-result-actions .is-primary { background:var(--mf-accent,#7c6cff); border-color:transparent; color:#fff; }
.story-music-preview { position:sticky; bottom:0; margin-top:.75rem; padding:.6rem; border-radius:12px; background:rgba(3,6,12,.94); color:#fff; }
.story-music-preview[hidden] { display:none; }
.story-music-preview iframe { width:100%; height:170px; border:0; border-radius:8px; }
.story-music-preview audio { width:100%; display:block; }

.story-music-badge {
  position:absolute; left:14px; bottom:58px; z-index:6; max-width:calc(100% - 28px);
  display:flex; align-items:center; gap:.45rem; padding:.45rem .65rem; border-radius:999px;
  background:rgba(0,0,0,.58); color:#fff; backdrop-filter:blur(8px); font-size:.76rem;
  box-shadow:0 8px 24px rgba(0,0,0,.24); overflow:hidden;
}
.story-music-badge[hidden] { display:none; }
#story-music-badge-text { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.story-music-eq { display:flex; align-items:flex-end; gap:2px; width:14px; height:14px; }
.story-music-eq i { display:block; width:3px; height:45%; border-radius:3px; background:currentColor; animation:storyEq .75s ease-in-out infinite alternate; }
.story-music-eq i:nth-child(2) { height:85%; animation-delay:.18s; }
.story-music-eq i:nth-child(3) { height:60%; animation-delay:.34s; }
@keyframes storyEq { from { transform:scaleY(.4); } to { transform:scaleY(1); } }
.story-music-host { position:absolute; width:1px; height:1px; overflow:hidden; opacity:.01; pointer-events:none; left:-10px; bottom:-10px; }
.story-music-host iframe { width:1px; height:1px; border:0; }

:root[data-theme="light"] .story-music-picker,
:root[data-theme="light"] .story-music-result { background:#f7f9fc; border-color:rgba(15,23,42,.12); }
:root[data-theme="light"] .story-music-modal-box { background:#fff; color:#16202f; }
:root[data-theme="light"] .story-music-search-row select,
:root[data-theme="light"] .story-music-search-row input { background:#fff; color:#16202f; border-color:rgba(15,23,42,.16); }

@media (max-width: 700px) {
  .stories-bar-inner { max-width:100%; padding:.52rem .55rem; gap:.5rem; }
  .stories-scroll { gap:.62rem; }
  .story-ring, .story-add-btn { width:58px; }
  .story-ring-name { max-width:58px; font-size:.65rem; }
  .story-add-btn { padding-left:.35rem; }
  .story-music-modal { padding:0; align-items:end; }
  .story-music-modal-box { width:100%; max-height:92dvh; border-radius:18px 18px 0 0; }
  .story-music-search-row { grid-template-columns:1fr auto; }
  .story-music-search-row select { grid-column:1 / -1; }
  .story-music-result { grid-template-columns:46px minmax(0,1fr); }
  .story-music-result>img { width:46px; height:46px; }
  .story-music-result-actions { grid-column:1 / -1; }
  .story-music-result-actions button { flex:1; }
  .story-viewer-inner { width:100vw; height:100dvh; max-width:none; max-height:none; border-radius:0; }
  .story-music-badge { bottom:64px; }
}