/* =============================================================
   Sözlük — tasarım sistemi
   Konsept: "sokak afişi / zine". Kâğıt dokulu zemin, mürekkep
   siyahı çizgiler, sert (blur'suz) gölgeler, tek vurgu rengi.
   Açık tema: logodaki mavi.  Koyu tema: logodaki lime.
   Renkler RGB kanalı olarak tutulur → Tailwind'in /opacity
   yazımı (bg-sky-500/20) ve koyu tema otomatik çalışır.
   ============================================================= */

:root {
    color-scheme: light;

    /* Nötr skala (gray/slate/zinc/neutral/stone sınıfları buna bağlı) */
    --n-50: 243 239 229;
    --n-100: 233 228 214;
    --n-200: 214 208 191;
    --n-300: 186 179 160;
    --n-400: 142 135 117;
    --n-500: 108 102 88;
    --n-600: 82 77 66;
    --n-700: 58 54 46;
    --n-800: 38 35 30;
    --n-900: 20 18 14;
    --n-950: 10 9 7;

    /* Vurgu (sky/blue/indigo/cyan sınıfları) */
    --a-50: 235 245 255;
    --a-100: 212 234 255;
    --a-200: 168 214 255;
    --a-300: 120 190 255;
    --a-400: 66 160 250;
    --a-500: 22 118 222;
    --a-600: 14 97 188;
    --a-700: 12 77 150;
    --a-800: 14 60 116;
    --a-900: 14 46 88;
    --a-950: 8 28 56;

    /* Başarı (green/emerald/lime) */
    --g-50: 232 247 236;
    --g-100: 208 238 218;
    --g-200: 168 224 188;
    --g-300: 118 205 150;
    --g-400: 66 180 108;
    --g-500: 28 150 76;
    --g-600: 20 120 62;
    --g-700: 18 94 52;
    --g-800: 18 74 44;
    --g-900: 16 58 38;

    /* Tehlike (red/rose/pink) */
    --r-50: 255 238 233;
    --r-100: 255 220 210;
    --r-200: 255 190 172;
    --r-300: 255 150 124;
    --r-400: 250 106 76;
    --r-500: 226 66 38;
    --r-600: 190 48 24;
    --r-700: 150 38 20;
    --r-800: 114 32 20;
    --r-900: 84 26 18;

    /* Uyarı (orange) */
    --o-50: 255 241 226;
    --o-100: 255 224 190;
    --o-200: 255 200 140;
    --o-300: 255 168 80;
    --o-400: 255 138 40;
    --o-500: 238 106 12;
    --o-600: 196 82 8;
    --o-700: 150 62 8;
    --o-800: 112 48 10;
    --o-900: 82 36 10;

    /* Fosforlu işaretleyici (amber/yellow) */
    --y-50: 255 249 222;
    --y-100: 255 240 178;
    --y-200: 255 228 120;
    --y-300: 255 212 64;
    --y-400: 255 196 20;
    --y-500: 240 174 0;
    --y-600: 196 138 0;
    --y-700: 150 104 0;
    --y-800: 112 78 0;
    --y-900: 82 58 0;

    /* Mor (purple/violet/fuchsia) */
    --v-50: 244 238 255;
    --v-100: 232 220 255;
    --v-200: 212 190 255;
    --v-300: 184 152 255;
    --v-400: 152 112 250;
    --v-500: 120 76 236;
    --v-600: 98 52 204;
    --v-700: 78 40 164;
    --v-800: 60 34 126;
    --v-900: 46 28 92;

    /* Semantik katman */
    --paper: var(--n-50);
    --card: 253 251 246;
    --ink: 20 18 14;
    --line: 20 18 14;          /* kalın çerçeveler */
    --line-soft: var(--n-200); /* ince ayırıcılar */
    --shadow-c: 20 18 14;
    --accent: var(--a-500);
    --accent-strong: var(--a-600);
    --on-accent: 255 255 255;
    --mark: var(--y-300);      /* fosforlu */
    --grain-opacity: .5;

    /* Yazı tipleri */
    --font-display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Şekil */
    --bw: 2px;
    --r: 3px;
    --sh-1: 2px 2px 0 0 rgb(var(--shadow-c));
    --sh-2: 3px 3px 0 0 rgb(var(--shadow-c));
    --sh-3: 5px 5px 0 0 rgb(var(--shadow-c));
    --t: .12s ease;

    /* ---- Eski sayfaların kullandığı değişken adları (köprü) ---- */
    --bg-primary: rgb(var(--card));
    --bg-secondary: rgb(var(--n-100));
    --bg-tertiary: rgb(var(--n-100));
    --bg-hover: rgb(var(--n-100));
    --bg-white: rgb(var(--card));
    --bg-gray: rgb(var(--n-100));
    --bg-page: rgb(var(--paper));
    --border-light: rgb(var(--line-soft));
    --border-medium: rgb(var(--n-300));
    --border: rgb(var(--line-soft));
    --text-primary: rgb(var(--n-900));
    --text-secondary: rgb(var(--n-700));
    --text-tertiary: rgb(var(--n-500));
    --text-dark: rgb(var(--n-900));
    --text-medium: rgb(var(--n-700));
    --text-light: rgb(var(--n-500));
    --text-muted: rgb(var(--n-500));
    --accent-primary: rgb(var(--a-500));
    --accent-hover: rgb(var(--a-600));
    --accent-light: rgb(var(--a-50));
    --primary: rgb(var(--a-500));
    --primary-dark: rgb(var(--a-700));
    --primary-light: rgb(var(--a-50));
    --success: rgb(var(--g-500));
    --success-light: rgb(var(--g-100));
    --error: rgb(var(--r-500));
    --error-light: rgb(var(--r-100));
    --danger: rgb(var(--r-500));
    --warning: rgb(var(--o-500));
    --warning-light: rgb(var(--y-100));
    --shadow-sm: var(--sh-1);
    --shadow-md: var(--sh-2);
    --shadow-lg: var(--sh-3);
    --shadow-xl: var(--sh-3);
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 4px;
}

html.dark {
    color-scheme: dark;

    --n-50: 14 14 12;
    --n-100: 30 30 26;
    --n-200: 54 53 46;
    --n-300: 84 82 72;
    --n-400: 130 127 114;
    --n-500: 160 156 142;
    --n-600: 188 184 170;
    --n-700: 212 208 194;
    --n-800: 232 228 216;
    --n-900: 244 240 229;
    --n-950: 252 250 244;

    --a-50: 28 36 10;
    --a-100: 40 54 12;
    --a-200: 62 86 14;
    --a-300: 98 138 20;
    --a-400: 144 196 34;
    --a-500: 182 242 60;
    --a-600: 200 250 100;
    --a-700: 218 252 150;
    --a-800: 234 253 192;
    --a-900: 244 254 224;
    --a-950: 250 255 238;

    --g-50: 16 36 24;
    --g-100: 22 52 34;
    --g-200: 30 76 48;
    --g-300: 40 108 66;
    --g-400: 54 146 88;
    --g-500: 72 190 114;
    --g-600: 110 214 144;
    --g-700: 150 230 176;
    --g-800: 192 242 208;
    --g-900: 226 250 234;

    --r-50: 52 20 14;
    --r-100: 72 26 18;
    --r-200: 104 36 24;
    --r-300: 150 50 32;
    --r-400: 206 76 50;
    --r-500: 255 104 72;
    --r-600: 255 140 110;
    --r-700: 255 176 154;
    --r-800: 255 206 192;
    --r-900: 255 232 224;

    --o-50: 50 28 8;
    --o-100: 70 38 8;
    --o-200: 100 54 10;
    --o-300: 146 78 12;
    --o-400: 200 108 20;
    --o-500: 255 146 40;
    --o-600: 255 176 84;
    --o-700: 255 202 130;
    --o-800: 255 224 178;
    --o-900: 255 240 218;

    --y-50: 46 38 6;
    --y-100: 66 54 6;
    --y-200: 96 78 8;
    --y-300: 140 112 10;
    --y-400: 196 156 14;
    --y-500: 255 208 40;
    --y-600: 255 222 90;
    --y-700: 255 232 140;
    --y-800: 255 242 188;
    --y-900: 255 249 226;

    --v-50: 34 24 56;
    --v-100: 48 34 80;
    --v-200: 70 48 116;
    --v-300: 100 68 164;
    --v-400: 140 98 220;
    --v-500: 178 140 255;
    --v-600: 198 168 255;
    --v-700: 216 194 255;
    --v-800: 232 218 255;
    --v-900: 244 238 255;

    --paper: var(--n-50);
    --card: 23 23 20;
    --ink: 244 240 229;
    --line: 96 94 82;
    --line-soft: var(--n-200);
    --shadow-c: 0 0 0;
    --on-accent: 14 14 12;
    --mark: var(--y-500);
    --grain-opacity: .35;
}
/* ---------- TEMEL ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: rgb(var(--n-900));
    background-color: rgb(var(--paper));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Kâğıt gren dokusu — tamamen CSS/SVG, görsel dosyası yok */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grain-opacity);
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .07  0 0 0 0 .05  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html.dark body::before { mix-blend-mode: screen; filter: invert(1); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

::selection { background: rgb(var(--mark)); color: #14120e; }

a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: 2px; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }

/* Kaydırma çubuğu — kare */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--n-100)); }
::-webkit-scrollbar-thumb { background: rgb(var(--n-400)); border: 2px solid rgb(var(--n-100)); }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--n-600)); }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--n-400)) rgb(var(--n-100)); }

/* ---------- FORM ELEMANLARI ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="number"], input[type="tel"], input[type="date"],
input[type="datetime-local"], input[type="file"], textarea, select {
    font-family: var(--font-body);
    background-color: rgb(var(--card));
    color: rgb(var(--n-900));
    border: var(--bw) solid rgb(var(--line));
    border-radius: 2px;
    box-shadow: none;
    transition: box-shadow var(--t), background-color var(--t);
}
input::placeholder, textarea::placeholder { color: rgb(var(--n-400)); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="url"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus,
textarea:focus, select:focus {
    outline: none;
    box-shadow: 3px 3px 0 0 rgb(var(--accent));
}
input[type="checkbox"], input[type="radio"] {
    accent-color: rgb(var(--ink));
    width: 1.05rem; height: 1.05rem;
    border: var(--bw) solid rgb(var(--line));
}
input:disabled, textarea:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
label { font-weight: 500; }

/* Tailwind sınıfı olmadan gelen düz butonlara ve linklere dokunma */
button { font-family: inherit; }

/* ---------- YARDIMCILAR ---------- */
.mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
.label-mono {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(var(--n-500));
}

/* ikonlar: Font Awesome, eski w-N/h-N svg boyutlarına karşılık */
.ic { display: inline-block; width: 1.1em; text-align: center; flex-shrink: 0; line-height: 1; }
.ic-3 { font-size: .75rem; } .ic-4 { font-size: .95rem; } .ic-5 { font-size: 1.1rem; }
.ic-6 { font-size: 1.3rem; } .ic-7 { font-size: 1.5rem; } .ic-8 { font-size: 1.75rem; }
.ic-10 { font-size: 2.25rem; } .ic-12 { font-size: 2.75rem; } .ic-16 { font-size: 3.5rem; }

/* Tailwind'de olmayan ama sitede kullanılan yardımcılar */
.glass, .glass-dark {
    background: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line));
}
.animate-fadeIn { animation: fadeIn .18s ease-out; }
.animate-pulse-soft { animation: none; }
.transition-smooth { transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes slideOut { from { opacity: 1; } to { opacity: 0; transform: translateX(24px); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* "card" gibi davranan tailwind blokları (migrasyon betiği bu sınıfı ekler) */
.ui-card {
    background-color: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line));
    border-radius: var(--r);
    box-shadow: var(--sh-2);
}

/* Koyu temada vurgu rengi üstündeki beyaz yazı okunur kalsın */
html.dark [class*="bg-sky-"].text-white,
html.dark [class*="bg-blue-"].text-white,
html.dark [class*="bg-indigo-"].text-white,
html.dark [class*="bg-cyan-"].text-white,
html.dark [class*="bg-green-"].text-white,
html.dark [class*="bg-lime-"].text-white,
html.dark [class*="bg-emerald-"].text-white,
html.dark [class*="bg-red-"].text-white,
html.dark [class*="bg-orange-"].text-white,
html.dark [class*="bg-purple-"].text-white {
    color: rgb(var(--on-accent));
}
.bg-white { background-color: rgb(var(--card)); }
.bg-black\/50, .bg-black\/60 { background-color: rgb(var(--n-950) / .6); }
/* =============================================================
   ŞASİ: akış bandı, başlık, menü, açılır paneller, çekmece, alt bar
   ============================================================= */

/* ---------- Akış bandı (ticker) ---------- */
.ticker {
    display: flex;
    align-items: stretch;
    background: rgb(var(--n-900));
    color: rgb(var(--n-50));
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .02em;
    height: 30px;
    overflow: hidden;
}
html.dark .ticker { background: rgb(var(--n-100)); color: rgb(var(--n-800)); border-bottom: 1px solid rgb(var(--n-200)); }
.ticker-tag {
    display: flex; align-items: center; gap: .4rem;
    padding: 0 .9rem;
    background: rgb(var(--mark));
    color: #14120e;
    font-weight: 600;
    text-transform: lowercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.ticker-viewport { flex: 1; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.ticker-viewport:hover .ticker-track { animation-play-state: paused; }
.ticker-track a {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: 0 1.2rem;
    color: inherit; text-decoration: none; white-space: nowrap;
}
.ticker-track a:hover { text-decoration: underline; }
.ticker-track a b { color: rgb(var(--mark)); font-weight: 500; }
.ticker-track a::after { content: "/"; opacity: .35; margin-left: .55rem; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Başlık ---------- */
.masthead {
    position: sticky; top: 0; z-index: 40;
    background: rgb(var(--card));
    border-bottom: var(--bw) solid rgb(var(--line));
}
.masthead-bar {
    max-width: 1600px; margin: 0 auto;
    padding: 0 1rem;
    height: 64px;
    display: flex; align-items: center; gap: 1rem;
}
@media (min-width: 1024px) { .masthead-bar { padding: 0 2rem; gap: 1.75rem; } }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }
.brand .logo-dark { display: none; }
html.dark .brand .logo-light { display: none; }
html.dark .brand .logo-dark { display: block; }

/* Arama */
.m-search { position: relative; flex: 1; max-width: 560px; display: none; }
@media (min-width: 768px) { .m-search { display: block; } }
.m-search input {
    width: 100%;
    height: 42px;
    padding: 0 3.2rem 0 2.6rem;
    font-size: .875rem;
    background: rgb(var(--paper));
}
.m-search-ic { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: rgb(var(--n-500)); font-size: .85rem; pointer-events: none; }
.m-search-kbd {
    position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    font-family: var(--font-mono); font-size: .7rem;
    border: 1.5px solid rgb(var(--n-300)); color: rgb(var(--n-500));
    padding: 0 .4rem; border-radius: 2px; line-height: 1.4; pointer-events: none;
}
.m-search input:focus ~ .m-search-kbd { display: none; }
.search-pop {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line));
    box-shadow: var(--sh-3);
    max-height: 400px; overflow-y: auto;
}
.search-pop a { display: block; padding: .6rem 1rem; font-size: .875rem; color: rgb(var(--n-800)); text-decoration: none; border-bottom: 1px dashed rgb(var(--line-soft)); }
.search-pop a:last-child { border-bottom: 0; }
.search-pop a:hover { background: rgb(var(--mark) / .35); }
.search-pop a.sp-create { background: rgb(var(--mark)); color: #14120e; border-top: var(--bw) solid rgb(var(--line)); }
.search-pop a.sp-create:hover { background: rgb(var(--mark)); filter: brightness(.96); }

/* Sağ aksiyonlar */
.m-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.icon-sq {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    color: rgb(var(--n-800));
    background: transparent;
    border: var(--bw) solid transparent;
    border-radius: 2px;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}
.icon-sq:hover { background: rgb(var(--mark)); border-color: rgb(var(--line)); color: #14120e; box-shadow: var(--sh-1); }
.icon-sq .pip {
    position: absolute; top: -6px; right: -6px;
    min-width: 19px; height: 19px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: rgb(var(--r-500)); color: #fff;
    border: 2px solid rgb(var(--card));
    font: 600 .625rem/1 var(--font-mono);
    border-radius: 99px;
}
.btn-ink, .btn-line {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 40px; padding: 0 1rem;
    font: 600 .8125rem/1 var(--font-display);
    letter-spacing: .01em;
    border: var(--bw) solid rgb(var(--line));
    border-radius: 2px;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
.btn-ink { background: rgb(var(--accent)); color: rgb(var(--on-accent)); box-shadow: var(--sh-2); }
.btn-line { background: rgb(var(--card)); color: rgb(var(--n-900)); }
.btn-ink:hover { box-shadow: var(--sh-3); transform: translate(-1px, -1px); }
.btn-ink:active { box-shadow: none; transform: translate(3px, 3px); }
.btn-line:hover { background: rgb(var(--mark)); color: #14120e; }

.user-chip {
    display: flex; align-items: center; gap: .55rem;
    padding: 3px .6rem 3px 3px;
    border: var(--bw) solid rgb(var(--line));
    background: rgb(var(--card));
    border-radius: 2px;
    cursor: pointer;
    transition: box-shadow var(--t), background-color var(--t);
}
.user-chip:hover { background: rgb(var(--mark) / .45); box-shadow: var(--sh-1); }
.user-chip img, .user-chip .u-ph { width: 32px; height: 32px; object-fit: cover; border-radius: 1px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 .8rem var(--font-display); }
.user-chip span.u-name { font: 600 .8125rem var(--font-display); display: none; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .user-chip span.u-name { display: block; } }
.user-chip .fa-chevron-down { font-size: .6rem; color: rgb(var(--n-500)); }

/* Açılır paneller */
.pop {
    position: absolute; z-index: 60;
    background: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line));
    box-shadow: var(--sh-3);
}
#user-dropdown { right: 0; top: calc(100% + 10px); width: 15rem; padding: .35rem 0; }
#user-dropdown a, #user-dropdown button {
    display: flex; align-items: center; gap: .75rem;
    width: 100%; padding: .55rem 1rem;
    font: 500 .8125rem var(--font-body);
    color: rgb(var(--n-800)); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
#user-dropdown a i { width: 1rem; text-align: center; color: rgb(var(--n-500)); }
#user-dropdown a:hover { background: rgb(var(--mark)); color: #14120e; }
#user-dropdown a:hover i { color: #14120e; }
#user-dropdown hr { border: 0; border-top: 1px dashed rgb(var(--line-soft)); margin: .35rem 0; }
#user-dropdown a.is-danger:hover { background: rgb(var(--r-500)); color: #fff; }
#user-dropdown a.is-danger:hover i { color: #fff; }

#notification-menu { right: 0; top: calc(100% + 10px); width: 24rem; max-width: calc(100vw - 2rem); }
@media (max-width: 767px) {
    #notification-menu { position: fixed; top: 5rem; left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 2rem); max-width: 24rem; }
}
.pop-head { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; background: rgb(var(--n-900)); color: rgb(var(--n-50)); }
html.dark .pop-head { background: rgb(var(--n-800)); color: rgb(var(--card)); }
.pop-head h3 { font: 700 .8125rem var(--font-display); margin: 0; color: inherit; }
.pop-head a { font: 500 .6875rem var(--font-mono); color: rgb(var(--mark)); text-decoration: none; }
html.dark .pop-head a { color: rgb(var(--card)); text-decoration: underline; }
.notif-item { display: flex; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px dashed rgb(var(--line-soft)); text-decoration: none; color: inherit; cursor: pointer; }
.notif-item:hover { background: rgb(var(--n-100)); }
.notif-item.is-unread { background: rgb(var(--mark) / .22); }
.notif-item img, .notif-item .n-ph { width: 38px; height: 38px; object-fit: cover; flex-shrink: 0; border: var(--bw) solid rgb(var(--line)); display: flex; align-items: center; justify-content: center; font: 700 .85rem var(--font-display); color: #fff; background: rgb(var(--accent)); border-radius: 2px; }
.notif-item .n-text { font-size: .8125rem; line-height: 1.4; color: rgb(var(--n-800)); }
.notif-item .n-meta { font: .6875rem var(--font-mono); color: rgb(var(--n-500)); margin-top: .25rem; }
.notif-item .n-topic { font-size: .75rem; color: rgb(var(--a-600)); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item .n-dot { width: 9px; height: 9px; background: rgb(var(--r-500)); border-radius: 50%; flex-shrink: 0; margin-top: .35rem; }
.pop-empty { padding: 2rem 1rem; text-align: center; color: rgb(var(--n-400)); font-size: .8125rem; }
.pop-empty i { display: block; font-size: 1.6rem; margin-bottom: .5rem; }
.pop-foot { padding: .6rem 1rem; text-align: center; border-top: var(--bw) solid rgb(var(--line)); }
.pop-foot a { font: 600 .75rem var(--font-display); color: rgb(var(--n-900)); text-decoration: underline; }

/* ---------- Menü bandı ---------- */
.m-nav { display: none; border-top: 1px solid rgb(var(--line-soft)); background: rgb(var(--card)); }
@media (min-width: 1024px) { .m-nav { display: block; } }
.m-nav-in { max-width: 1600px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.m-nav-in::-webkit-scrollbar { display: none; }
.m-nav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .8rem 1.05rem;
    font: 600 .8125rem var(--font-display);
    letter-spacing: .005em;
    color: rgb(var(--n-700));
    text-decoration: none; white-space: nowrap;
    border-right: 1px solid rgb(var(--line-soft));
    transition: background-color var(--t), color var(--t);
}
.m-nav-in > .m-nav-link:first-child { border-left: 1px solid rgb(var(--line-soft)); }
.m-nav-link i { font-size: .8rem; color: rgb(var(--n-400)); transition: color var(--t); }
.m-nav-link:hover { background: rgb(var(--n-100)); color: rgb(var(--n-900)); }
.m-nav-link.is-active { color: #14120e; background: rgb(var(--mark)); }
.m-nav-link.is-active i { color: #14120e; }
.m-nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: rgb(var(--line)); }
.m-nav-gap { flex: 1; border-right: 1px solid rgb(var(--line-soft)); min-width: 1rem; }

/* ---------- Mobil çekmece ---------- */
#mobile-menu {
    position: fixed; top: 0; left: 0; z-index: 70;
    width: min(20rem, 86vw); height: 100%;
    background: rgb(var(--card));
    border-right: var(--bw) solid rgb(var(--line));
    box-shadow: var(--sh-3);
    transform: translateX(-105%);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
    overflow-y: auto;
    display: flex; flex-direction: column;
}
#mobile-menu.active { transform: none; }
#mobile-menu-overlay { z-index: 65; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; border-bottom: var(--bw) solid rgb(var(--line)); background: rgb(var(--paper)); }
.drawer-head img { height: 38px; }
.drawer-nav { padding: .5rem 0; flex: 1; }
.drawer-link { display: flex; align-items: center; gap: .9rem; padding: .8rem 1.25rem; font: 600 .9375rem var(--font-display); color: rgb(var(--n-800)); text-decoration: none; border-bottom: 1px dashed rgb(var(--line-soft)); }
.drawer-link i { width: 1.2rem; text-align: center; color: rgb(var(--n-500)); }
.drawer-link:hover, .drawer-link.is-active { background: rgb(var(--mark)); color: #14120e; }
.drawer-link:hover i, .drawer-link.is-active i { color: #14120e; }
.drawer-foot { padding: 1rem; display: grid; gap: .6rem; border-top: var(--bw) solid rgb(var(--line)); }
.drawer-foot .btn-ink, .drawer-foot .btn-line { justify-content: center; height: 46px; }

/* ---------- Mobil alt bar ---------- */
#mobile-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex;
    background: rgb(var(--card));
    border-top: var(--bw) solid rgb(var(--line));
    padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 1024px) { #mobile-bottom-nav { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); } }
.tab-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; font: 500 .625rem var(--font-mono); color: rgb(var(--n-600)); text-decoration: none; text-transform: lowercase; letter-spacing: .02em; border-right: 1px solid rgb(var(--line-soft)); }
.tab-link:last-child { border-right: 0; }
.tab-link i { font-size: 1.1rem; }
.tab-link img { width: 22px; height: 22px; object-fit: cover; border: 1.5px solid rgb(var(--line)); }
.tab-link.is-active, .tab-link:active { background: rgb(var(--mark)); color: #14120e; }

/* ---------- Flaş mesajı ---------- */
.flash {
    position: fixed; top: 1rem; right: 1rem; z-index: 80;
    display: flex; align-items: center; gap: .8rem;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: .8rem 1rem;
    background: rgb(var(--card));
    color: rgb(var(--n-900));
    border: var(--bw) solid rgb(var(--line));
    border-left-width: 10px;
    box-shadow: var(--sh-3);
    font-size: .875rem; font-weight: 500;
}
.flash-success { border-left-color: rgb(var(--g-500)); }
.flash-error { border-left-color: rgb(var(--r-500)); }
.flash-info { border-left-color: rgb(var(--accent)); }
.flash i.fl-ic { font-size: 1.1rem; }
.flash-success i.fl-ic { color: rgb(var(--g-500)); }
.flash-error i.fl-ic { color: rgb(var(--r-500)); }
.flash-info i.fl-ic { color: rgb(var(--accent)); }
.flash button { margin-left: .5rem; color: rgb(var(--n-500)); background: none; border: 0; cursor: pointer; }
.flash button:hover { color: rgb(var(--n-900)); }

/* ---------- Alt bilgi ---------- */
.site-footer { margin-top: 3rem; background: rgb(var(--n-900)); color: rgb(var(--n-200)); border-top: var(--bw) solid rgb(var(--line)); }
html.dark .site-footer { background: rgb(var(--n-100)); color: rgb(var(--n-700)); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: rgb(var(--mark)); text-decoration: underline; }
.foot-in { max-width: 1600px; margin: 0 auto; padding: 3rem 1rem 2rem; }
@media (min-width: 1024px) { .foot-in { padding: 3.5rem 2rem 2rem; } }
.foot-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 1.4fr 2.2fr 1fr; gap: 3rem; } }
.foot-brand img { height: 56px; }
.foot-brand p { margin-top: 1rem; max-width: 22rem; font-size: .875rem; line-height: 1.6; color: rgb(var(--n-300)); }
html.dark .foot-brand p { color: rgb(var(--n-600)); }
.foot-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px solid rgb(var(--n-500)); color: rgb(var(--n-100)); font-size: 1rem; transition: background-color var(--t), color var(--t), border-color var(--t); }
html.dark .foot-social a { color: rgb(var(--n-800)); border-color: rgb(var(--n-400)); }
.foot-social a:hover { background: rgb(var(--mark)); border-color: rgb(var(--mark)); color: #14120e; text-decoration: none; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.foot-cols h4 { font: 500 .6875rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--mark)); margin-bottom: 1rem; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: .8125rem; }
.foot-cta { border: var(--bw) solid rgb(var(--mark)); padding: 1.25rem; align-self: start; }
.foot-cta h4 { font: 700 1.1rem var(--font-display); color: rgb(var(--mark)); margin-bottom: .4rem; }
.foot-cta p { font-size: .8125rem; color: rgb(var(--n-300)); margin-bottom: 1rem; }
html.dark .foot-cta p { color: rgb(var(--n-600)); }
.foot-cta a { display: flex; align-items: center; justify-content: center; gap: .5rem; height: 42px; background: rgb(var(--mark)); color: #14120e !important; font: 700 .8125rem var(--font-display); text-decoration: none !important; }
.foot-cta a:hover { filter: brightness(1.06); }
.foot-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px dashed rgb(var(--n-500)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font: .6875rem var(--font-mono); letter-spacing: .04em; color: rgb(var(--n-400)); }
#back-to-top {
    position: fixed; right: 1rem; bottom: 4.75rem; z-index: 45;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: rgb(var(--mark)); color: #14120e;
    border: var(--bw) solid rgb(var(--line)); box-shadow: var(--sh-2);
    cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
}
#back-to-top.show { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { #back-to-top { bottom: 1.5rem; right: 1.5rem; } }

/* duyarlı görünürlük (Tailwind hidden/lg:hidden ile display çakışmasın diye) */
.only-lt-lg { display: inline-flex; } .only-lt-md { display: inline-flex; } .only-ge-sm { display: none; }
@media (min-width: 1024px) { .only-lt-lg { display: none; } }
@media (min-width: 768px) { .only-lt-md { display: none; } }
@media (min-width: 640px) { .only-ge-sm { display: inline-flex; } }
/* =============================================================
   YERLEŞİM
   Sayfalar `max-w-[1600px] > flex lg:flex-row` kabuğunu kullanır:
   sol sütun · ana akış · sağ sütun. Masaüstünde her sütun kendi
   içinde kayar (eski davranış korunur), mobilde tek sütun.
   ============================================================= */
:root { --head-h: 112px; }

@media (min-width: 1024px) {
    #mobile-menu, #mobile-menu-overlay { display: none !important; }
}

@media (max-width: 640px) {
    body { overflow-x: clip; }
    .max-w-\[1600px\] { overflow-x: clip; padding-left: .75rem; padding-right: .75rem; max-width: 100vw; }
    .max-w-3xl { margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
    .flex-1.min-w-0 { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
}

@media (min-width: 1024px) {
    .max-w-\[1600px\] > .flex.flex-col.lg\:flex-row {
        height: calc(100vh - var(--head-h) - 2.5rem);
        min-height: 520px;
        overflow: hidden;
        align-items: flex-start;
    }
    .flex.flex-col.lg\:flex-row > .hidden.lg\:block:first-child,
    .flex.flex-col.lg\:flex-row > .hidden.lg\:block:last-child,
    aside.left-sidebar, aside.right-sidebar {
        position: sticky; top: 0;
        height: 100%;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 6px 6px 0;   /* sert gölgelerin kesilmemesi için pay */
    }
    .flex.flex-col.lg\:flex-row > .flex-1.min-w-0 {
        height: 100%;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 8px 8px 0;
    }
    .flex.flex-col.lg\:flex-row > .hidden.lg\:block:first-child::-webkit-scrollbar,
    .flex.flex-col.lg\:flex-row > .hidden.lg\:block:last-child::-webkit-scrollbar,
    .flex.flex-col.lg\:flex-row > .flex-1.min-w-0::-webkit-scrollbar,
    aside.left-sidebar::-webkit-scrollbar, aside.right-sidebar::-webkit-scrollbar { display: none; }
    .left-sidebar > * + *, .right-sidebar > * + * { margin-top: 1.25rem; }
}

/* ---------- Sayfa başlıkları (gündem, bugün, debe, çaylaklar...) ---------- */
.page-header, .gundem-header, .bugun-header, .debe-header, .caylak-header, .ukde-header {
    position: relative;
    background: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line));
    box-shadow: var(--sh-2);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--r);
}
.page-header::before, .gundem-header::before, .bugun-header::before, .debe-header::before,
.caylak-header::before, .ukde-header::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: rgb(var(--mark));
    border-right: var(--bw) solid rgb(var(--line));
}
.page-header > *, .gundem-header > *, .bugun-header > *, .debe-header > *, .caylak-header > *, .ukde-header > * { margin-left: 14px; }
.page-header h1, .gundem-header h1, .bugun-header h1, .debe-header h1, .caylak-header h1, .ukde-header h1,
.page-title { font: 800 1.6rem/1.1 var(--font-display); letter-spacing: -0.03em; color: rgb(var(--n-900)); }
.page-header p, .gundem-header p, .bugun-header p, .debe-header p, .caylak-header p, .ukde-header p {
    font: .75rem var(--font-mono); color: rgb(var(--n-500)); margin-top: .35rem; letter-spacing: .02em;
}
.breadcrumb-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font: .75rem var(--font-mono); color: rgb(var(--n-500)); margin-bottom: 1rem; }
.breadcrumb-nav a { color: rgb(var(--n-700)); text-decoration: none; }
.breadcrumb-nav a:hover { color: rgb(var(--n-900)); background: rgb(var(--mark)); }
.breadcrumb-nav i { font-size: .6rem; opacity: .6; }
/* =============================================================
   BİLEŞENLER
   ============================================================= */

/* ---------- ENTRY ---------- */
.entry-container { display: flex; align-items: flex-start; gap: 1rem; width: 100%; box-sizing: border-box; margin-bottom: 1.25rem; }
.entry-avatar-left { flex-shrink: 0; width: 3.25rem; height: 3.25rem; text-decoration: none; margin-top: 4px; }
.entry-avatar-left img, .entry-avatar-left .avatar-placeholder {
    width: 3.25rem; height: 3.25rem; object-fit: cover;
    border: var(--bw) solid rgb(var(--line));
    border-radius: 2px;
    box-shadow: var(--sh-1);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font: 700 1.1rem var(--font-display);
}
.avatar, .avatar-placeholder { border-radius: 2px; }
.avatar { width: 2.75rem; height: 2.75rem; object-fit: cover; border: var(--bw) solid rgb(var(--line)); font-size: .875rem; }

.entry-card {
    position: relative; flex: 1; min-width: 0; box-sizing: border-box;
    background: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line));
    border-radius: var(--r);
    box-shadow: var(--sh-2);
    padding: .15rem;
    margin-bottom: 1.25rem;
    transition: box-shadow var(--t);
}
.entry-container > .entry-card { margin-bottom: 0; }
.entry-card:hover { box-shadow: var(--sh-3); }

.topic-title {
    display: block;
    margin: .65rem .9rem .5rem;
    font: 700 1.2rem/1.25 var(--font-display);
    letter-spacing: -0.02em;
    color: rgb(var(--n-900));
    text-decoration: none;
    background-image: linear-gradient(rgb(var(--mark)), rgb(var(--mark)));
    background-repeat: no-repeat;
    background-position: 0 92%;
    background-size: 0 .38em;
    transition: background-size .18s ease;
    word-break: break-word;
    width: fit-content; max-width: calc(100% - 1.8rem);
}
.topic-title:hover { background-size: 100% .38em; color: rgb(var(--n-900)); }

.entry-text {
    margin: 0 .9rem 1rem;
    color: rgb(var(--n-800));
    font-size: .9rem; line-height: 1.7;
    overflow-wrap: anywhere;
}
.entry-text p { margin: .3em 0; }
.entry-text strong { font-weight: 700; color: rgb(var(--n-900)); }
.entry-text em { font-style: italic; }
.entry-text u { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgb(var(--mark)); }
.entry-text .entry-link, .entry-text a[href^="http"] { color: rgb(var(--a-600)); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; }
.entry-text .entry-link:hover, .entry-text a[href^="http"]:hover { background: rgb(var(--mark) / .5); color: rgb(var(--n-900)); }
.entry-text .entry-mention { color: rgb(var(--v-600)); font-weight: 600; text-decoration: none; }
.entry-text .entry-mention:hover { background: rgb(var(--v-100)); }
.entry-text .entry-topic-link { color: rgb(var(--g-600)); font-style: italic; text-decoration: none; border-bottom: 1.5px dotted currentColor; }
.entry-text .entry-topic-link:hover { background: rgb(var(--g-100)); }
.entry-text blockquote { border-left: 4px solid rgb(var(--mark)); padding-left: .9rem; margin: .6rem 0; color: rgb(var(--n-600)); }
.entry-text img { max-width: 100%; border: var(--bw) solid rgb(var(--line)); }

/* entry alt şeridi: kesik çizgi (bilet/kupon hissi) */
.entry-card .flex.flex-col.sm\:flex-row {
    display: flex; flex-direction: row !important; align-items: center; justify-content: space-between;
    gap: .75rem; padding: .6rem .9rem .6rem; margin: 0;
    border-top: 2px dashed rgb(var(--line-soft));
}

.action-bar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.action-btn, .icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 34px; padding: 0 .7rem;
    font: 500 .75rem var(--font-mono);
    color: rgb(var(--n-700));
    background: rgb(var(--paper));
    border: var(--bw) solid rgb(var(--line));
    border-radius: 2px;
    cursor: pointer; user-select: none;
    transition: background-color var(--t), box-shadow var(--t), transform var(--t), color var(--t);
}
.action-btn i, .icon-btn i { font-size: .85rem; line-height: 1; }
.action-btn:hover, .icon-btn:hover { background: rgb(var(--mark)); color: #14120e; box-shadow: var(--sh-1); }
.action-btn:active, .icon-btn:active { box-shadow: none; transform: translate(2px, 2px); }
button[id^="up-"]:hover { background: rgb(var(--g-200)); }
button[id^="down-"]:hover { background: rgb(var(--r-200)); }
.action-btn.voted-up { background: rgb(var(--g-500)); color: #fff; font-weight: 600; }
.action-btn.voted-up i { font-weight: 900; }
.action-btn.voted-down { background: rgb(var(--r-500)); color: #fff; font-weight: 600; }
.action-btn.voted-down i { font-weight: 900; }
.action-btn.favorited { background: rgb(var(--mark)); color: #14120e; font-weight: 600; }
.action-btn.favorited i { font-weight: 900; }
html.dark .action-btn.voted-up, html.dark .action-btn.voted-down { color: #14120e; }

.icon-btn { width: 34px; padding: 0; background: transparent; border-color: transparent; }
.icon-btn:hover { border-color: rgb(var(--line)); }
.icon-btn.report-btn:hover { background: rgb(var(--o-300)); }
.report-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: var(--bw) solid transparent; color: rgb(var(--n-400)); cursor: pointer; border-radius: 2px; }
.report-btn:hover { background: rgb(var(--o-300)); border-color: rgb(var(--line)); color: #14120e; }
.edit-btn:hover { background: rgb(var(--a-100)); }

.author-info { display: flex; align-items: center; gap: .65rem; text-decoration: none; padding: .1rem .2rem; }
.author-info .text-right p:first-child { font: 600 .75rem var(--font-mono) !important; color: rgb(var(--n-900)) !important; }
.author-info .text-right p:last-child { font: .6875rem var(--font-mono) !important; color: rgb(var(--n-500)) !important; }
.author-info:hover .text-right p:first-child { background: rgb(var(--mark)); }
.author-info .mobile-date { display: none; }
@media (max-width: 640px) {
    .author-info .text-right { display: none; }
    .author-info .mobile-date { display: block; font: .625rem var(--font-mono); color: rgb(var(--n-500)); }
    .entry-container { gap: .6rem; }
    .entry-avatar-left, .entry-avatar-left img, .entry-avatar-left .avatar-placeholder { width: 2.4rem; height: 2.4rem; }
    .topic-title { font-size: 1.05rem; }
    .action-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .action-bar::-webkit-scrollbar { display: none; }
    .action-btn { padding: 0 .55rem; flex-shrink: 0; }
}

.rookie-badge { display: inline-flex; align-items: center; gap: .25rem; padding: 1px 6px; font: 600 .625rem var(--font-mono); background: rgb(var(--g-200)); color: rgb(var(--g-800)); border: 1.5px solid rgb(var(--line)); border-radius: 2px; }

/* ---------- KENAR ÇUBUĞU KARTLARI ---------- */
.card-base, .stat-card, .cta-card {
    background: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line));
    border-radius: var(--r);
    box-shadow: var(--sh-2);
    overflow: hidden;
}
.section-header {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .55rem 1rem;
    background: rgb(var(--n-900)); color: rgb(var(--n-50));
}
html.dark .section-header { background: rgb(var(--n-800)); color: rgb(var(--card)); }
.section-title {
    display: flex; align-items: center; gap: .55rem;
    margin: 0;
    font: 700 .8125rem var(--font-display) !important;
    letter-spacing: .02em;
    color: inherit !important;
}
.section-title i { color: rgb(var(--mark)); font-size: .8rem; }
html.dark .section-title i { color: rgb(var(--card)); }
.view-all-link { font: 500 .6875rem var(--font-mono) !important; color: rgb(var(--mark)) !important; text-decoration: none; letter-spacing: .02em; }
html.dark .view-all-link { color: rgb(var(--card)) !important; text-decoration: underline; }
.view-all-link:hover { text-decoration: underline; }
.divide-soft > * + * { border-top: 1px dashed rgb(var(--line-soft)); }

.gundem-item { position: relative; display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem !important; text-decoration: none; transition: background-color var(--t); }
.gundem-item:hover { background: rgb(var(--mark) / .45); }
.gundem-number {
    flex-shrink: 0; width: 1.6rem; text-align: right;
    font: 500 .75rem var(--font-mono) !important;
    color: rgb(var(--n-400)) !important;
    background: none !important;
    display: block !important; height: auto !important;
}
.gundem-number::before { content: "0"; }
.gundem-item:nth-child(n+10) .gundem-number::before { content: ""; }
.topic-link { font: 500 .8125rem/1.4 var(--font-body) !important; color: rgb(var(--n-800)) !important; transition: none; }
.gundem-item:hover .topic-link { color: #14120e !important; }
.count-badge {
    flex-shrink: 0;
    font: 500 .6875rem var(--font-mono) !important;
    color: rgb(var(--n-600)) !important;
    background: transparent !important;
    border: 1.5px solid rgb(var(--n-300));
    padding: 0 .4rem !important; line-height: 1.5;
    border-radius: 2px;
}
.news-card { padding: .9rem 1rem; transition: background-color var(--t); }
.news-card:hover { background: rgb(var(--n-100)); }
.news-card h4 { font: 700 .9rem var(--font-display) !important; color: rgb(var(--n-900)) !important; }
.news-card p { color: rgb(var(--n-600)) !important; }

.random-btn {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    background: rgb(var(--accent)) !important; color: rgb(var(--on-accent)) !important;
    border: var(--bw) solid rgb(var(--line));
    box-shadow: var(--sh-2);
    font: 700 .9rem var(--font-display) !important;
    text-decoration: none;
    border-radius: var(--r);
    transition: box-shadow var(--t), transform var(--t);
}
.random-btn:hover { box-shadow: var(--sh-3); transform: translate(-1px, -1px); }
.random-btn:active { box-shadow: none; transform: translate(3px, 3px); }
.random-btn i { font-size: 1rem; }

.cta-card { padding: 1.25rem; text-align: center; background: rgb(var(--mark)); color: #14120e; }
.cta-card h4 { font: 800 1.05rem var(--font-display); color: #14120e !important; margin-bottom: .4rem; }
.cta-card p { color: #3a3512 !important; font-size: .8125rem; }
html.dark .cta-card p { color: #3a3512 !important; }
.cta-icon { width: 52px; height: 52px; margin: 0 auto .8rem; display: flex; align-items: center; justify-content: center; background: #14120e; color: rgb(var(--mark)); font-size: 1.35rem; border-radius: 2px; box-shadow: 3px 3px 0 0 rgb(0 0 0 / .25); }

.stat-card { padding: .9rem .75rem; text-align: center; box-shadow: var(--sh-1); }
.stat-card i.stat-ic, .stat-card > div:first-child i { font-size: 1.05rem; color: rgb(var(--accent)); margin-bottom: .4rem; display: block; }
.stat-number, .stat-num { font: 800 1.55rem/1 var(--font-display) !important; color: rgb(var(--n-900)) !important; letter-spacing: -0.03em; }
.stat-label, .stat-lbl { font: 500 .625rem var(--font-mono) !important; color: rgb(var(--n-500)) !important; text-transform: uppercase; letter-spacing: .08em; margin-top: .4rem; }

.online-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; background: rgb(var(--g-500)); border: 1.5px solid rgb(var(--line)); border-radius: 50%; }
.record-box { background: rgb(var(--n-100)); border-top: 1px dashed rgb(var(--line-soft)); padding: .6rem 1rem; text-align: center; }
.record-text { font: .6875rem var(--font-mono); color: rgb(var(--n-500)); margin: 0; }
.record-value { font-weight: 700; color: rgb(var(--n-900)); }

/* ---------- SAYFALAMA ---------- */
.pagination-container { margin: 2rem 0 1rem; }
.pagination-wrapper { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.pagination-btn {
    min-width: 40px; height: 40px; padding: 0 .5rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font: 600 .8125rem var(--font-mono);
    color: rgb(var(--n-800)); background: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line)); border-radius: 2px;
    text-decoration: none;
    transition: background-color var(--t), box-shadow var(--t);
}
.pagination-btn:hover:not(.active) { background: rgb(var(--mark)); color: #14120e; box-shadow: var(--sh-1); }
.pagination-btn.active { background: rgb(var(--n-900)); color: rgb(var(--n-50)); }
html.dark .pagination-btn.active { background: rgb(var(--accent)); color: #14120e; }
.pagination-info { font: .8125rem var(--font-mono); color: rgb(var(--n-500)); padding: 0 .25rem; }
.pagination-nav { padding: 0 .85rem; font-family: var(--font-display); }
.pagination-nav i { font-size: .7rem; }

/* ---------- BİLDİRİM (TOAST) ---------- */
.toast-notification, .toast {
    position: fixed; top: 1.25rem; right: 1.25rem; z-index: 99999;
    min-width: 300px; max-width: calc(100vw - 2rem);
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1rem;
    background: rgb(var(--card)); color: rgb(var(--n-900));
    border: var(--bw) solid rgb(var(--line)); border-left: 10px solid rgb(var(--g-500));
    box-shadow: var(--sh-3);
    transform: translateX(120%); opacity: 0;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.toast-notification.show, .toast.show { transform: none; opacity: 1; }
.toast-notification.error, .toast.error { border-left-color: rgb(var(--r-500)); }
.toast.success { border-left-color: rgb(var(--g-500)); }
.toast-icon { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgb(var(--g-500)); color: #fff; font-size: .9rem; border-radius: 2px; }
.toast-notification.error .toast-icon, .toast.error .toast-icon { background: rgb(var(--r-500)); }
.toast-content h4 { font: 700 .875rem var(--font-display); color: rgb(var(--n-900)); margin: 0 0 .1rem; }
.toast-content p { font-size: .8125rem; color: rgb(var(--n-600)); margin: 0; }
@media (max-width: 640px) { .toast-notification, .toast { left: 1rem; right: 1rem; min-width: 0; } }

/* ---------- MODAL ---------- */
.custom-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgb(var(--n-950) / .65); animation: fadeIn .15s ease; }
.custom-modal.active { display: flex; align-items: center; justify-content: center; }
.custom-modal-content {
    width: 92%; max-width: 520px; padding: 1.6rem;
    background: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line)); border-radius: var(--r);
    box-shadow: 8px 8px 0 0 rgb(var(--shadow-c));
    animation: slideUp .2s ease;
}
.report-reason {
    padding: .8rem 1rem; margin-bottom: .55rem; cursor: pointer;
    border: var(--bw) solid rgb(var(--line-soft)); border-radius: 2px;
    transition: background-color var(--t), border-color var(--t);
}
.report-reason:hover { border-color: rgb(var(--line)); background: rgb(var(--mark) / .4); }
.report-reason.selected { border-color: rgb(var(--line)); background: rgb(var(--mark)); color: #14120e; box-shadow: var(--sh-1); }

/* ---------- BOŞ DURUM ---------- */
.empty-state, .empty-category { text-align: center; padding: 3rem 1.5rem; }
.empty-state-icon {
    width: 4.5rem; height: 4.5rem; margin: 0 auto 1.1rem;
    display: flex; align-items: center; justify-content: center;
    background: rgb(var(--mark)); color: #14120e; font-size: 1.8rem;
    border: var(--bw) solid rgb(var(--line)); box-shadow: var(--sh-2); border-radius: 2px;
}
.empty-state h3 { font: 700 1.2rem var(--font-display); }
.empty-state p { color: rgb(var(--n-500)); }

/* ---------- TAKİP / ABONELİK DÜĞMELERİ ---------- */
.follow-topic-btn, .follow-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 38px; padding: 0 1rem;
    font: 700 .8125rem var(--font-display);
    color: rgb(var(--on-accent)); background: rgb(var(--accent));
    border: var(--bw) solid rgb(var(--line)); border-radius: 2px;
    box-shadow: var(--sh-2); cursor: pointer;
    transition: box-shadow var(--t), transform var(--t), background-color var(--t);
}
.follow-topic-btn:hover, .follow-btn:hover { box-shadow: var(--sh-3); transform: translate(-1px, -1px); }
.follow-topic-btn:active, .follow-btn:active { box-shadow: none; transform: translate(3px, 3px); }
.follow-topic-btn.following, .follow-btn.following { background: rgb(var(--card)); color: rgb(var(--n-900)); }
.follow-topic-btn.following:hover, .follow-btn.following:hover { background: rgb(var(--r-500)); color: #fff; }
.follow-topic-btn .icon-unfollow { display: none; }
.follow-topic-btn.following:hover .icon-following { display: none; }
.follow-topic-btn.following:hover .icon-unfollow { display: inline-block; }

/* ---------- ROZET / ETİKET ---------- */
.rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .4rem; font: 800 .95rem var(--font-display); background: rgb(var(--n-900)); color: rgb(var(--n-50)); border-radius: 2px; }
.rank-badge.rank-1 { background: rgb(var(--y-400)); color: #14120e; border: var(--bw) solid rgb(var(--line)); }
.rank-badge.rank-2 { background: rgb(var(--n-200)); color: #14120e; border: var(--bw) solid rgb(var(--line)); }
.rank-badge.rank-3 { background: rgb(var(--o-300)); color: #14120e; border: var(--bw) solid rgb(var(--line)); }
.hot-badge, .trending-badge, .stats-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font: 600 .6875rem var(--font-mono) !important;
    padding: 1px 7px !important;
    background: rgb(var(--o-400)) !important; color: #14120e !important;
    border: 1.5px solid rgb(var(--line)); border-radius: 2px !important;
}
.stats-badge { background: rgb(var(--n-100)) !important; color: rgb(var(--n-700)) !important; }

/* ---------- ÇAYLAK / KATEGORİ LİSTELERİ ---------- */
.profile-entry-card, .category-section, .category-detail-topic, .recent-topic-item, .topic-grid-card, .topic-list-card, .notification-card {
    background: rgb(var(--card));
    border: var(--bw) solid rgb(var(--line)); border-radius: var(--r);
    transition: box-shadow var(--t), background-color var(--t);
}
.profile-entry-card:hover, .category-section:hover, .category-detail-topic:hover, .topic-grid-card:hover, .topic-list-card:hover { box-shadow: var(--sh-2); }

/* ---------- AKTİVİTE WIDGET'I (sol sütun) ---------- */
.activity-widget { background: rgb(var(--card)); border: var(--bw) solid rgb(var(--line)); border-radius: var(--r); box-shadow: var(--sh-2); overflow: hidden; }
.activity-widget-header { padding: .55rem 1rem; background: rgb(var(--n-900)); color: rgb(var(--n-50)); }
html.dark .activity-widget-header { background: rgb(var(--n-800)); color: rgb(var(--card)); }
.activity-widget-title { display: flex; align-items: center; gap: .55rem; margin: 0; font: 700 .8125rem var(--font-display); letter-spacing: .02em; color: inherit; }
.activity-widget-icon { font-size: .8rem; color: rgb(var(--mark)); }
html.dark .activity-widget-icon { color: rgb(var(--card)); }
.activity-widget-list > * + * { border-top: 1px dashed rgb(var(--line-soft)); }
.activity-widget-item { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; transition: background-color var(--t); }
.activity-widget-item:hover { background: rgb(var(--mark) / .4); }
.activity-type-icon { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: rgb(var(--n-800)); background: rgb(var(--paper)); border: 1.5px solid rgb(var(--line)); border-radius: 2px; }
.activity-widget-content { flex: 1; min-width: 0; }
.activity-widget-text { display: block; font-size: .78rem; line-height: 1.45; color: rgb(var(--n-800)); overflow-wrap: anywhere; }
.activity-widget-user, .activity-widget-target { color: rgb(var(--n-900)); font-weight: 600; text-decoration: none; }
.activity-widget-user:hover, .activity-widget-target:hover { background: rgb(var(--mark)); color: #14120e; }
.activity-widget-action { color: rgb(var(--n-500)); }
.activity-time-badge { flex-shrink: 0; font: 500 .6875rem var(--font-mono); color: rgb(var(--n-600)); border: 1.5px solid rgb(var(--n-300)); padding: 0 .4rem; border-radius: 2px; }
.activity-widget-empty { text-align: center; padding: 1.75rem 1rem; color: rgb(var(--n-400)); font-size: .8125rem; }
.activity-widget-empty-icon { font-size: 1.6rem; margin-bottom: .5rem; }

/* ---------- EDİTÖR (Quill) ---------- */
.entry-editor-container { border: var(--bw) solid rgb(var(--line)) !important; box-shadow: var(--sh-2); border-radius: var(--r) !important; }
.ql-toolbar { background: rgb(var(--n-100)) !important; border-bottom: var(--bw) solid rgb(var(--line)) !important; }
.ql-toolbar button:hover { background: rgb(var(--mark)) !important; }
.ql-toolbar button.ql-active { background: rgb(var(--mark)) !important; }
.ql-toolbar button.ql-active .ql-stroke { stroke: #14120e !important; }
.ql-toolbar button.ql-active .ql-fill { fill: #14120e !important; }
.ql-editor { font-family: var(--font-body); }
.editor-custom-btn { color: rgb(var(--n-700)); }
.editor-custom-btn:hover { background: rgb(var(--mark)); color: #14120e; }
.icon-btn.hidden { display: none; }
@media (min-width: 640px) { .icon-btn.hidden.sm\:block { display: inline-flex; } }