@charset "UTF-8";

/* TurkMod TurkMod - Bundled CSS */



/* --- fonts.css --- */

html[data-public-theme="turkmod"] .ui-theme-theme-error {

    display: flex;

    gap: 16px;

    align-items: flex-start;

    padding: 22px;

    border: 1px solid #d8e0ea;

    border-radius: 8px;

    background: #fff;

    color: #172033;

    box-shadow: 0 14px 42px rgba(15, 23, 42, .08);

}



html[data-public-theme="turkmod"] .ui-theme-theme-error__icon {

    display: grid;

    place-items: center;

    width: 42px;

    height: 42px;

    border-radius: 8px;

    background: #fff4d6;

    color: #9a6700;

    flex: 0 0 auto;

}



html[data-public-theme="turkmod"] .ui-theme-theme-error h1 {

    margin: 0 0 8px;

    font-size: 20px;

}



html[data-public-theme="turkmod"] .ui-theme-theme-error p {

    margin: 0;

    color: #5b6778;

}



/* --- bootstrap-icons.css --- */

@font-face {

  font-family: "bootstrap-icons";

  src: url("../webfonts/bootstrap-icons.woff2") format("woff2"),

url("../webfonts/bootstrap-icons.woff") format("woff");

}



html[data-public-theme="turkmod"] .bi::before,

html[data-public-theme="turkmod"] [class^="bi-"]::before,

html[data-public-theme="turkmod"] [class*=" bi-"]::before {

  display: inline-block;

  font-family: bootstrap-icons !important;

  font-style: normal;

  font-weight: normal !important;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  vertical-align: -.125em;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

html[data-public-theme="turkmod"] .bi-arrow-repeat::before { content: "\f130"; }

html[data-public-theme="turkmod"] .bi-arrow-return-right::before { content: "\f132"; }

html[data-public-theme="turkmod"] .bi-arrow-right::before { content: "\f138"; }

html[data-public-theme="turkmod"] .bi-bar-chart::before { content: "\f17e"; }

html[data-public-theme="turkmod"] .bi-bell-fill::before { content: "\f189"; }

html[data-public-theme="turkmod"] .bi-bell::before { content: "\f18a"; }

html[data-public-theme="turkmod"] .bi-box-arrow-right::before { content: "\f1c3"; }

html[data-public-theme="turkmod"] .bi-calendar-event::before { content: "\f1e8"; }

html[data-public-theme="turkmod"] .bi-calendar3::before { content: "\f214"; }

html[data-public-theme="turkmod"] .bi-chat-dots::before { content: "\f24a"; }

html[data-public-theme="turkmod"] .bi-chat-left-text-fill::before { content: "\f251"; }

html[data-public-theme="turkmod"] .bi-chat-left-text::before { content: "\f252"; }

html[data-public-theme="turkmod"] .bi-chat-square-text::before { content: "\f264"; }

html[data-public-theme="turkmod"] .bi-check-circle-fill::before { content: "\f26a"; }

html[data-public-theme="turkmod"] .bi-check2-square::before { content: "\f271"; }

html[data-public-theme="turkmod"] .bi-chevron-down::before { content: "\f282"; }

html[data-public-theme="turkmod"] .bi-chevron-left::before { content: "\f284"; }

html[data-public-theme="turkmod"] .bi-chevron-right::before { content: "\f285"; }

html[data-public-theme="turkmod"] .bi-circle::before { content: "\f28a"; }

html[data-public-theme="turkmod"] .bi-cloud-arrow-down::before { content: "\f295"; }

html[data-public-theme="turkmod"] .bi-cloud-arrow-up::before { content: "\f297"; }

html[data-public-theme="turkmod"] .bi-collection::before { content: "\f2cc"; }

html[data-public-theme="turkmod"] .bi-controller::before { content: "\f2d4"; }

html[data-public-theme="turkmod"] .bi-discord::before { content: "\f300"; }

html[data-public-theme="turkmod"] .bi-download::before { content: "\f30a"; }

html[data-public-theme="turkmod"] .bi-exclamation-circle-fill::before { content: "\f332"; }

html[data-public-theme="turkmod"] .bi-exclamation-triangle::before { content: "\f33b"; }

html[data-public-theme="turkmod"] .bi-eye-slash::before { content: "\f340"; }

html[data-public-theme="turkmod"] .bi-eye::before { content: "\f341"; }

html[data-public-theme="turkmod"] .bi-file-earmark-text::before { content: "\f38b"; }

html[data-public-theme="turkmod"] .bi-flag::before { content: "\f3cc"; }

html[data-public-theme="turkmod"] .bi-folder2-open::before { content: "\f3d8"; }

html[data-public-theme="turkmod"] .bi-folder2::before { content: "\f3d9"; }

html[data-public-theme="turkmod"] .bi-gear::before { content: "\f3e5"; }

html[data-public-theme="turkmod"] .bi-gift::before { content: "\f3ec"; }

html[data-public-theme="turkmod"] .bi-github::before { content: "\f3ed"; }

html[data-public-theme="turkmod"] .bi-globe2::before { content: "\f3ef"; }

html[data-public-theme="turkmod"] .bi-grid-3x3-gap-fill::before { content: "\f3f8"; }

html[data-public-theme="turkmod"] .bi-grid-3x3-gap::before { content: "\f3f9"; }

html[data-public-theme="turkmod"] .bi-heart::before { content: "\f417"; }

html[data-public-theme="turkmod"] .bi-house-door::before { content: "\f423"; }

html[data-public-theme="turkmod"] .bi-image::before { content: "\f42a"; }

html[data-public-theme="turkmod"] .bi-info-circle::before { content: "\f431"; }

html[data-public-theme="turkmod"] .bi-link-45deg::before { content: "\f470"; }

html[data-public-theme="turkmod"] .bi-megaphone-fill::before { content: "\f483"; }

html[data-public-theme="turkmod"] .bi-moon-stars-fill::before { content: "\f495"; }

html[data-public-theme="turkmod"] .bi-pencil-square::before { content: "\f4ca"; }

html[data-public-theme="turkmod"] .bi-person-badge::before { content: "\f4d3"; }

html[data-public-theme="turkmod"] .bi-person-circle::before { content: "\f4d7"; }

html[data-public-theme="turkmod"] .bi-person::before { content: "\f4e1"; }

html[data-public-theme="turkmod"] .bi-play-circle-fill::before { content: "\f4f2"; }

html[data-public-theme="turkmod"] .bi-play-circle::before { content: "\f4f3"; }

html[data-public-theme="turkmod"] .bi-search::before { content: "\f52a"; }

html[data-public-theme="turkmod"] .bi-shield-check::before { content: "\f52f"; }

html[data-public-theme="turkmod"] .bi-shield-exclamation::before { content: "\f530"; }

html[data-public-theme="turkmod"] .bi-sliders::before { content: "\f56b"; }

html[data-public-theme="turkmod"] .bi-speedometer2::before { content: "\f580"; }

html[data-public-theme="turkmod"] .bi-three-dots::before { content: "\f5d4"; }

html[data-public-theme="turkmod"] .bi-tools::before { content: "\f5db"; }

html[data-public-theme="turkmod"] .bi-x-circle::before { content: "\f623"; }

html[data-public-theme="turkmod"] .bi-x-lg::before { content: "\f659"; }

html[data-public-theme="turkmod"] .bi-dpad::before { content: "\f687"; }

html[data-public-theme="turkmod"] .bi-send::before { content: "\f6c0"; }

html[data-public-theme="turkmod"] .bi-ticket-perforated::before { content: "\f6ca"; }



/* --- OverlayScrollbars.min.css --- */

/*!

 * OverlayScrollbars

 * https://github.com/KingSora/OverlayScrollbars

 *

 * Version: 1.13.0

 *

 * Copyright KingSora | Rene Haas.

 * https://github.com/KingSora

 *

 * Released under the MIT license.

 * Date: 02.08.2020

 */

/* --- design-system-unified.css --- */

/* ============================================================

   UNIFIED DESIGN SYSTEM - Single Source of Truth

   Merges admin and user design systems

   Maintains 100% backward compatibility via aliases

   ============================================================ */



:root {

    /* ===== BRAND COLORS ===== */

    --brand-accent: #8b1538;

    --brand-accent-hover: #6d1029;

    --brand-accent-light: #b91d47;

    --brand-accent-soft: #fce7ec;

    --brand-accent-alpha-08: rgba(139, 21, 56, 0.08);

    --brand-accent-alpha-10: rgba(139, 21, 56, 0.1);

    --brand-accent-alpha-16: rgba(139, 21, 56, 0.16);

    --brand-accent-alpha-20: rgba(139, 21, 56, 0.2);

    --brand-accent-alpha-30: rgba(139, 21, 56, 0.3);



    /* ===== SEMANTIC COLORS (Light Mode Default) ===== */

    --color-success: #10b981;

    --color-success-light: #d1fae5;

    --color-success-dark: #059669;



    --color-danger: #dc2626;

    --color-danger-light: #fee2e2;

    --color-danger-dark: #991b1b;



    --color-warning: #b45309;

    --color-warning-light: #fef3c7;

    --color-warning-dark: #92400e;



    --color-info: #8b1538;

    --color-info-light: #f7edef;

    --color-info-dark: #1e40af;



    /* ===== LIGHT MODE PALETTE ===== */

    --theme-bg: #f0f2f5;

    --theme-surface: #ffffff;

    --theme-surface-muted: #f8fafc;

    --theme-surface-hover: #eef2f7;

    --theme-border: #d8dee8;

    --theme-border-strong: #b9c3d2;

    --theme-text: #111827;

    --theme-text-muted: #64748b;

    --theme-text-soft: #94a3b8;

    --theme-on-accent: #ffffff;



    /* ===== SPACING SCALE (Unified) ===== */

    --space-0: 0;

    --space-1: 0.25rem;    /* 4px */

    --space-2: 0.5rem;     /* 8px */

    --space-3: 0.75rem;    /* 12px */

    --space-4: 1rem;       /* 16px */

    --space-5: 1.25rem;    /* 20px */

    --space-6: 1.5rem;     /* 24px */

    --space-8: 2rem;       /* 32px */

    --space-10: 2.5rem;    /* 40px */

    --space-12: 3rem;      /* 48px */

    --space-16: 4rem;      /* 64px */

    --space-20: 5rem;      /* 80px */

    --space-24: 6rem;      /* 96px */



    /* ===== BORDER RADIUS (Unified) ===== */

    --radius-none: 0;

    --radius-sm: 6px;

    --radius-md: 8px;

    --radius-lg: 10px;

    --radius-xl: 14px;

    --radius-2xl: 18px;

    --radius-full: 9999px;



    /* ===== SHADOWS (Unified) ===== */

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);

    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);

    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);

    --shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.12);

    --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.16);



    /* ===== TYPOGRAPHY ===== */

    --font-family-base: "Roboto", sans-serif;

    --font-size-xs: 0.75rem;       /* 12px */

    --font-size-sm: 0.875rem;      /* 14px */

    --font-size-base: 1rem;        /* 16px */

    --font-size-lg: 1.125rem;      /* 18px */

    --font-size-xl: 1.25rem;       /* 20px */

    --font-size-2xl: 1.5rem;       /* 24px */

    --font-size-3xl: 1.875rem;     /* 30px */

    --font-size-4xl: 2.25rem;      /* 36px */

    --font-size-5xl: 3rem;         /* 48px */



    --font-weight-light: 300;

    --font-weight-normal: 400;

    --font-weight-medium: 400;

    --font-weight-semibold: 500;

    --font-weight-bold: 600;

    --font-weight-extrabold: 700;

    --font-weight-black: 800;



    --line-height-tight: 1.25;

    --line-height-snug: 1.375;

    --line-height-normal: 1.5;

    --line-height-relaxed: 1.625;

    --line-height-loose: 2;



    /* ===== TRANSITIONS ===== */

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);



    /* ===== Z-INDEX SCALE ===== */

    --z-dropdown: 1000;

    --z-sticky: 1020;

    --z-fixed: 1030;

    --z-modal-backdrop: 1040;

    --z-modal: 1050;

    --z-popover: 1060;

    --z-tooltip: 1070;



    /* ===== RESPONSIVE BREAKPOINTS ===== */

    --breakpoint-xs: 320px;

    --breakpoint-sm: 640px;

    --breakpoint-md: 768px;

    --breakpoint-lg: 1024px;

    --breakpoint-xl: 1280px;



    /* ===== BACKWARD COMPATIBILITY ALIASES (Admin) ===== */

    --ui-admin-bg: var(--theme-bg);

    --ui-admin-surface: var(--theme-surface);

    --ui-admin-surface-alt: var(--theme-surface-muted);

    --ui-admin-border: var(--theme-border);

    --ui-admin-border-strong: var(--theme-border-strong);

    --ui-admin-text: var(--theme-text);

    --ui-admin-text-secondary: var(--theme-text-muted);

    --ui-admin-text-muted: var(--theme-text-soft);

    --ui-admin-accent: var(--brand-accent);

    --ui-admin-primary: var(--brand-accent);

    --ui-admin-accent-hover: var(--brand-accent-hover);

    --ui-admin-accent-light: var(--brand-accent-light);

    --ui-admin-primary-soft: var(--brand-accent-alpha-10);

    --ui-admin-primary-ring: var(--brand-accent-alpha-20);

    --ui-admin-ui-radius: var(--radius-lg);

    --ui-admin-ui-shadow: var(--shadow-sm);

    --ui-admin-ui-shadow-hover: var(--shadow-md);



    /* ===== BACKWARD COMPATIBILITY ALIASES (User) ===== */

    --bg: var(--theme-bg);

    --bg-white: var(--theme-surface);

    --bg-hover: var(--theme-surface-hover);

    --primary: var(--brand-accent);

    --primary-dark: var(--brand-accent-hover);

    --primary-light: var(--brand-accent-light);

    --text: var(--theme-text);

    --text-dim: var(--theme-text-muted);

    --text-light: var(--theme-text-soft);

    --border: var(--theme-border);

    --success: var(--color-success);

    --danger: var(--color-danger);

    --warning: var(--brand-accent);

    --info: var(--brand-accent);

    --on-primary: var(--theme-on-accent);



    /* ===== SPACING ALIASES (Admin) ===== */

    --spacing-1: var(--space-1);

    --spacing-2: var(--space-2);

    --spacing-3: var(--space-3);

    --spacing-4: var(--space-4);

    --spacing-5: var(--space-5);

    --spacing-6: var(--space-6);

    --spacing-8: var(--space-8);

    --spacing-10: var(--space-10);

    --spacing-12: var(--space-12);



    /* ===== RADIUS ALIASES (Admin) ===== */

    --radius-md-admin: 10px;

    --radius-lg-admin: 14px;

    --radius-xl-admin: 18px;



    /* ===== CONTROL SIZES ===== */

    --control-height: 2.5rem;

    --control-radius: var(--radius-md);

    --surface-radius: var(--radius-md);

    --ui-radius: var(--radius-md);

}



/* ===== DARK MODE OVERRIDES ===== */



/* ===== LIGHT MODE EXPLICIT ===== */


html[data-public-theme="turkmod"][data-theme-mode="light"] {
    --brand-accent: #8b1538;

    --brand-accent-hover: #6d1029;

    --brand-accent-light: #b91d47;

    --brand-accent-soft: #fce7ec;

    --brand-accent-alpha-08: rgba(139, 21, 56, 0.08);

    --brand-accent-alpha-10: rgba(139, 21, 56, 0.1);

    --brand-accent-alpha-16: rgba(139, 21, 56, 0.16);

    --brand-accent-alpha-20: rgba(139, 21, 56, 0.2);

    --brand-accent-alpha-30: rgba(139, 21, 56, 0.3);



    --color-success: #10b981;

    --color-success-light: #d1fae5;

    --color-success-dark: #059669;



    --color-danger: #dc2626;

    --color-danger-light: #fee2e2;

    --color-danger-dark: #991b1b;



    --color-warning: #b45309;

    --color-warning-light: #fef3c7;

    --color-warning-dark: #92400e;



    --color-info: #8b1538;

    --color-info-light: #f7edef;

    --color-info-dark: #1e40af;



    --theme-bg: #f0f2f5;

    --theme-surface: #ffffff;

    --theme-surface-muted: #f8fafc;

    --theme-surface-hover: #eef2f7;

    --theme-border: #d8dee8;

    --theme-border-strong: #b9c3d2;

    --theme-text: #111827;

    --theme-text-muted: #64748b;

    --theme-text-soft: #94a3b8;

    --theme-on-accent: #ffffff;



    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);

    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);

    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);

    --shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.12);

    --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.16);

}



/* ===== COLOR SCHEME ===== */

html[data-public-theme="turkmod"] {

    color-scheme: light dark;

}



/* --- design-system.css --- */

/* Shared component bridge loaded after legacy CSS. */

:root {

    --bg: var(--theme-bg);

    --bg-white: var(--theme-surface);

    --bg-hover: var(--theme-surface-hover);

    --primary: var(--brand-accent);

    --primary-dark: var(--brand-accent-hover);

    --primary-light: var(--brand-accent-light);

    --text: var(--theme-text);

    --text-dim: var(--theme-text-muted);

    --text-light: var(--theme-text-soft);

    --border: var(--theme-border);

    --success: var(--theme-success);

    --danger: var(--theme-danger);

    --warning: var(--brand-accent);

    --info: var(--brand-accent);

    --on-primary: var(--theme-on-accent);



    --ui-admin-bg: var(--theme-bg);

    --ui-admin-surface: var(--theme-surface);

    --ui-admin-surface-alt: var(--theme-surface-muted);

    --ui-admin-border: var(--theme-border);

    --ui-admin-text: var(--theme-text);

    --ui-admin-text-secondary: var(--theme-text-muted);

    --ui-admin-text-muted: var(--theme-text-soft);

    --ui-admin-btn-bg: var(--theme-surface);

    --ui-admin-btn-border: var(--theme-border-strong);

    --ui-admin-accent: var(--brand-accent);

    --ui-admin-primary: var(--brand-accent);

    --ui-admin-accent-hover: var(--brand-accent-hover);

    --ui-admin-accent-light: var(--brand-accent-light);

    --ui-admin-primary-soft: var(--brand-accent-alpha-10);

    --ui-admin-primary-ring: var(--brand-accent-alpha-20);

    --ui-admin-ui-surface: var(--theme-surface);

    --ui-admin-ui-muted: var(--theme-surface-muted);

    --ui-admin-ui-hover: var(--theme-surface-hover);

    --ui-admin-ui-border: var(--theme-border);

    --ui-admin-ui-border-strong: var(--theme-border-strong);

    --ui-admin-ui-radius: var(--surface-radius);

    --ui-admin-ui-shadow: var(--shadow-sm);

    --ui-admin-ui-shadow-hover: var(--shadow-md);

}



html[data-public-theme="turkmod"] body {

    background: var(--theme-bg);

    color: var(--theme-text);

}



html[data-public-theme="turkmod"] :where(.header,

    .footer,

    .topic-section) {

    background-color: var(--theme-surface);

    border-color: var(--theme-border);

    border-radius: var(--surface-radius);

    box-shadow: var(--shadow-sm);

}



html[data-public-theme="turkmod"] :where(

    .topic-dl-button,

    .topic-report-submit) {

    color: var(--theme-on-accent) !important;

    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-hover)) !important;

    border-color: var(--brand-accent) !important;

    border-radius: var(--control-radius) !important;

    box-shadow: 0 10px 22px var(--brand-accent-alpha-20) !important;

}



html[data-public-theme="turkmod"] :where(input,

    select,

    textarea,

    .search input) {

    color: var(--theme-text) !important;

    background-color: var(--theme-surface-muted) !important;

    border-color: var(--theme-border) !important;

    border-radius: var(--control-radius) !important;

}



html[data-public-theme="turkmod"] :where(input,

    select,

    textarea,

    .search input):focus {

    border-color: var(--brand-accent) !important;

    box-shadow: var(--theme-ring) !important;

    outline: none !important;

}



html[data-public-theme="turkmod"] :where(.badge,

    .tag) {

    border-radius: var(--radius-full) !important;

}



html[data-public-theme="turkmod"] :where(

    .topic-section h2,

    .card-header) {

    color: var(--theme-text) !important;

    letter-spacing: 0 !important;

}



html[data-public-theme="turkmod"] :where(.text-secondary,

    .footer,

    .footer a,

    .footer p) {

    color: var(--theme-text-muted) !important;

}



html[data-public-theme="turkmod"] .topic-carousel,

html[data-public-theme="turkmod"] .topic-carousel-main,

html[data-public-theme="turkmod"] .ui-comment-thumb {

    border-color: var(--theme-border) !important;

}



html[data-public-theme="turkmod"] .topic-carousel-main {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    aspect-ratio: 16 / 9 !important;

    margin-bottom: 1rem !important;

    overflow: hidden !important;

    background: #020617 !important;

}



html[data-public-theme="turkmod"] .topic-carousel-content {

    width: 100% !important;

    height: 100% !important;

}



html[data-public-theme="turkmod"] .topic-carousel-content {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}



html[data-public-theme="turkmod"] .topic-carousel-thumbs {

    display: flex !important;

    gap: 0.625rem !important;

    overflow-x: auto !important;

    padding-bottom: 0.625rem !important;

    scrollbar-width: thin !important;

}



html[data-public-theme="turkmod"] .ui-comment-thumb {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex: 0 0 90px !important;

    width: 90px !important;

    height: 60px !important;

    overflow: hidden !important;

    cursor: pointer !important;

    background: var(--theme-surface-muted) !important;

    border: 2px solid transparent !important;

    transition: border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast) !important;

}



html[data-public-theme="turkmod"] .ui-comment-thumb:hover {

    transform: translateY(-1px);

}



html[data-public-theme="turkmod"] .ui-comment-thumb img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

}



html[data-public-theme="turkmod"] .ui-comment-thumb i {

    color: var(--theme-text-soft) !important;

    font-size: 1.5rem !important;

}



html[data-public-theme="turkmod"] .topic-carousel-nav {

    position: absolute !important;

    top: 50% !important;

    z-index: 10 !important;

    width: 44px !important;

    height: 44px !important;

    padding: 0 !important;

    border-radius: var(--radius-full) !important;

    backdrop-filter: blur(8px) !important;

    transform: translateY(-50%) !important;

}



html[data-public-theme="turkmod"] .topic-carousel-nav-prev {

    left: 15px !important;

}



html[data-public-theme="turkmod"] .topic-carousel-nav-next {

    right: 15px !important;

}



html[data-public-theme="turkmod"] .topic-carousel-nav i {

    font-size: 1.25rem !important;

}





html[data-public-theme="turkmod"] .nav a.active {

    color: var(--brand-accent) !important;

    background: var(--brand-accent-alpha-10) !important;

}



html[data-public-theme="turkmod"] .theme-toggle,

html[data-public-theme="turkmod"] #theme-toggle {

    min-width: var(--control-height);

    min-height: var(--control-height);

}



html[data-public-theme="turkmod"] .profile-success-icon {

    color: var(--success) !important;

}



html[data-public-theme="turkmod"] .profile-warning-icon {

    color: var(--warning) !important;

}



@media (max-width: 767.98px) {

    html[data-public-theme="turkmod"] :where(

        .container,

        .topic-section) {

        border-radius: var(--surface-radius);

    }

}



/* --- design-tokens.css --- */

/* Shared design tokens for public and admin surfaces. */

html[data-public-theme="turkmod"] {

    color-scheme: light dark;



    --brand-accent: #8b1538;

    --brand-accent-hover: #6d1029;

    --brand-accent-light: #b91d47;

    --brand-accent-soft: #fce7ec;

    --brand-accent-alpha-08: rgba(139, 21, 56, 0.08);

    --brand-accent-alpha-10: rgba(139, 21, 56, 0.1);

    --brand-accent-alpha-16: rgba(139, 21, 56, 0.16);

    --brand-accent-alpha-20: rgba(139, 21, 56, 0.2);

    --brand-accent-alpha-30: rgba(139, 21, 56, 0.3);



    --theme-bg: #f0f2f5;

    --theme-surface: #ffffff;

    --theme-surface-muted: #f8fafc;

    --theme-surface-hover: #eef2f7;

    --theme-border: #d8dee8;

    --theme-border-strong: #b9c3d2;

    --theme-text: #111827;

    --theme-text-muted: #64748b;

    --theme-text-soft: #94a3b8;

    --theme-on-accent: #ffffff;



    --theme-success: #10b981;

    --theme-success-soft: #d1fae5;

    --theme-danger: #dc2626;

    --theme-danger-soft: #fee2e2;

    --theme-warning: #b45309;

    --theme-warning-soft: #fef3c7;

    --theme-info: #2563eb;

    --theme-info-soft: #dbeafe;



    /* Color aliases for new components. Keep legacy aliases below intact. */

    --color-canvas: var(--theme-bg);

    --color-surface: var(--theme-surface);

    --color-surface-muted: var(--theme-surface-muted);

    --color-surface-hover: var(--theme-surface-hover);

    --color-border: var(--theme-border);

    --color-border-strong: var(--theme-border-strong);

    --color-text: var(--theme-text);

    --color-text-muted: var(--theme-text-muted);

    --color-text-soft: var(--theme-text-soft);

    --color-primary: var(--brand-accent);

    --color-primary-hover: var(--brand-accent-hover);

    --color-primary-soft: var(--brand-accent-soft);

    --color-on-primary: var(--theme-on-accent);

    --color-success: var(--theme-success);

    --color-success-soft: var(--theme-success-soft);

    --color-danger: var(--theme-danger);

    --color-danger-soft: var(--theme-danger-soft);

    --color-warning: var(--theme-warning);

    --color-warning-soft: var(--theme-warning-soft);

    --color-info: var(--theme-info);

    --color-info-soft: var(--theme-info-soft);



    --font-family-base: "Roboto", sans-serif;

    --font-family-heading: var(--font-family-base);

    --font-family-mono: "Roboto", sans-serif;



    --font-size-2xs: 0.6875rem;

    --font-size-xs: 0.75rem;

    --font-size-sm: 0.875rem;

    --font-size-md: 1rem;

    --font-size-lg: 1.125rem;

    --font-size-xl: 1.25rem;

    --font-size-2xl: 1.5rem;

    --font-size-3xl: 1.875rem;

    --font-size-4xl: 2.25rem;



    --font-weight-regular: 400;

    --font-weight-medium: 400;

    --font-weight-semibold: 500;

    --font-weight-bold: 600;

    --font-weight-extrabold: 700;



    --line-height-tight: 1.2;

    --line-height-snug: 1.35;

    --line-height-base: 1.5;

    --line-height-relaxed: 1.65;

    --letter-spacing-normal: 0;



    --space-0: 0;

    --space-1: 0.25rem;

    --space-2: 0.5rem;

    --space-3: 0.75rem;

    --space-4: 1rem;

    --space-5: 1.25rem;

    --space-6: 1.5rem;

    --space-8: 2rem;

    --space-10: 2.5rem;

    --space-12: 3rem;

    --space-14: 3.5rem;

    --space-16: 4rem;

    --space-20: 5rem;



    --grid-gutter: var(--space-6);

    --container-xs: 100%;

    --container-sm: 540px;

    --container-md: 720px;

    --container-lg: 960px;

    --container-xl: 1140px;

    --container-2xl: 1320px;

    --container-wide: 1400px;



    /*

      Breakpoint tokens are reference values for docs and JS.

      CSS custom properties cannot be used directly in media query conditions.

    */

    --breakpoint-mobile: 480px;

    --breakpoint-tablet: 768px;

    --breakpoint-laptop: 992px;

    --breakpoint-desktop: 1200px;

    --breakpoint-large-desktop: 1400px;



    --radius-sm: 6px;

    --radius-md: 8px;

    --radius-lg: 10px;

    --radius-xl: 14px;

    --radius-full: 9999px;

    --radius-control: var(--radius-md);

    --radius-card: var(--radius-md);

    --radius-dialog: var(--radius-lg);

    --radius-pill: var(--radius-full);



    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);

    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);

    --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.09);

    --shadow-lg: 0 18px 42px rgba(15, 23, 42, 0.12);

    --shadow-overlay: 0 24px 70px rgba(15, 23, 42, 0.2);

    --theme-ring: 0 0 0 3px var(--brand-accent-alpha-16);



    --z-base: 0;

    --z-raised: 10;

    --z-sticky: 100;

    --z-header: 900;

    --z-dropdown: 1000;

    --z-drawer: 1040;

    --z-modal-backdrop: 1050;

    --z-modal: 1060;

    --z-popover: 1070;

    --z-tooltip: 1080;

    --z-toast: 1090;



    --duration-instant: 0ms;

    --duration-fast: 150ms;

    --duration-base: 220ms;

    --duration-slow: 320ms;

    --duration-slower: 500ms;

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    --ease-in: cubic-bezier(0.4, 0, 1, 1);

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-control: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);

    --transition-surface: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);



    --control-height: 2.5rem;

    --control-height-sm: 2rem;

    --control-height-lg: 3rem;

    --control-radius: var(--radius-md);

    --control-padding-x: var(--space-3);

    --control-padding-y: var(--space-2);

    --surface-radius: var(--radius-md);



    --state-hover-bg: var(--theme-surface-hover);

    --state-focus-ring: var(--theme-ring);

    --state-active-bg: var(--brand-accent-alpha-10);

    --state-selected-bg: var(--brand-accent-soft);

    --state-disabled-bg: var(--theme-surface-muted);

    --state-disabled-text: var(--theme-text-soft);

    --state-disabled-opacity: 0.55;

    --state-loading-opacity: 0.72;

    --state-success-bg: var(--theme-success-soft);

    --state-success-text: var(--theme-success);

    --state-warning-bg: var(--theme-warning-soft);

    --state-warning-text: var(--theme-warning);

    --state-error-bg: var(--theme-danger-soft);

    --state-error-text: var(--theme-danger);

    --state-info-bg: var(--theme-info-soft);

    --state-info-text: var(--theme-info);

    --state-empty-bg: var(--theme-surface-muted);

    --state-empty-text: var(--theme-text-muted);



    --component-gap-xs: var(--space-2);

    --component-gap-sm: var(--space-3);

    --component-gap-md: var(--space-4);

    --component-gap-lg: var(--space-6);



    --button-height: var(--control-height);

    --button-radius: var(--radius-control);

    --button-padding-x: var(--space-4);

    --button-font-size: var(--font-size-sm);

    --button-font-weight: var(--font-weight-semibold);



    --input-height: var(--control-height);

    --input-radius: var(--radius-control);

    --input-padding-x: var(--control-padding-x);

    --input-font-size: var(--font-size-sm);

    --input-border: var(--theme-border);

    --input-bg: var(--theme-surface);

    --input-text: var(--theme-text);

    --input-placeholder: var(--theme-text-soft);



    --card-radius: var(--radius-card);

    --card-padding: var(--space-5);

    --card-bg: var(--theme-surface);

    --card-border: var(--theme-border);

    --card-shadow: var(--shadow-sm);



    --modal-radius: var(--radius-dialog);

    --modal-bg: var(--theme-surface);

    --modal-border: var(--theme-border);

    --modal-shadow: var(--shadow-overlay);

    --modal-backdrop: rgba(15, 23, 42, 0.58);



    --toast-radius: var(--radius-md);

    --toast-shadow: var(--shadow-lg);

    --tooltip-radius: var(--radius-sm);

    --tooltip-bg: var(--theme-text);

    --tooltip-text: var(--theme-surface);



    --bg: var(--theme-bg);

    --bg-white: var(--theme-surface);

    --bg-hover: var(--theme-surface-hover);

    --primary: var(--brand-accent);

    --primary-dark: var(--brand-accent-hover);

    --primary-light: var(--brand-accent-light);

    --text: var(--theme-text);

    --text-dim: var(--theme-text-muted);

    --text-light: var(--theme-text-soft);

    --border: var(--theme-border);

    --success: var(--theme-success);

    --danger: var(--theme-danger);

    --warning: var(--brand-accent);

    --info: var(--brand-accent);

    --on-primary: var(--theme-on-accent);



    --ui-surface: var(--theme-surface);

    --ui-surface-muted: var(--theme-surface-muted);

    --ui-hover: var(--theme-surface-hover);

    --ui-border: var(--theme-border);

    --ui-border-strong: var(--theme-border-strong);

    --ui-radius: var(--surface-radius);

    --ui-shadow: var(--shadow-sm);

    --ui-shadow-hover: var(--shadow-md);

    --ui-ring: var(--theme-ring);

}











/* --- general.css --- */

/* ============================================

   DESIGN TOKENS - Standardized Design System

   ============================================ */



html {

    color-scheme: dark;

}











html[data-public-theme="turkmod"] {

    /* ===== Color Palette ===== */

    /* ===== Brand Colors (Burgundy Accent) ===== */

    --brand-accent: #8b1538;

    --brand-accent-hover: #6d1029;

    --brand-accent-light: #b91d47;

    --brand-accent-alpha-10: rgba(139, 21, 56, 0.1);

    --brand-accent-alpha-20: rgba(139, 21, 56, 0.2);

    --brand-accent-alpha-30: rgba(139, 21, 56, 0.3);



    /* Primary Colors (Legacy - map to brand) */

    --color-primary-50: #fce7ec;

    --color-primary-100: #f7c2d0;

    --color-primary-200: #f199b3;

    --color-primary-300: #eb7096;

    --color-primary-400: #e65280;

    --color-primary-500: #8b1538;

    --color-primary-600: #6d1029;

    --color-primary-700: #5a0d22;

    --color-primary-800: #470a1b;

    --color-primary-900: #340714;



    /* Neutral Colors - Dark Theme */

    --color-neutral-50: #f0f4f8;

    --color-neutral-100: #d9e2ec;

    --color-neutral-200: #bcccdc;

    --color-neutral-300: #9fb3c8;

    --color-neutral-400: #829ab1;

    --color-neutral-500: #627d98;

    --color-neutral-600: #486581;

    --color-neutral-700: #334e68;

    --color-neutral-800: #243b53;

    --color-neutral-900: #102a43;



    /* Semantic Colors */

    --color-success-light: #d1fae5;

    --color-success: #00d084;

    --color-success-dark: #00a368;

    

    --color-info-light: #f7edef;

    --color-info: #0099ff;

    --color-info-dark: #0077cc;

    

    --color-warning-light: var(--brand-accent-light);

    --color-warning: var(--brand-accent);

    --color-warning-dark: var(--brand-accent-hover);

    

    --color-danger-light: #fee2e2;

    --color-danger: #ff4757;

    --color-danger-dark: #cc3946;



    /* ===== Spacing Scale ===== */

    --space-0: 0;

    --space-1: 0.25rem;   /* 4px */

    --space-2: 0.5rem;    /* 8px */

    --space-3: 0.75rem;   /* 12px */

    --space-4: 1rem;      /* 16px */

    --space-5: 1.25rem;   /* 20px */

    --space-6: 1.5rem;    /* 24px */

    --space-8: 2rem;      /* 32px */

    --space-10: 2.5rem;   /* 40px */

    --space-12: 3rem;     /* 48px */

    --space-16: 4rem;     /* 64px */

    --space-20: 5rem;     /* 80px */

    --space-24: 6rem;     /* 96px */



    /* ===== Typography Scale ===== */

    --font-size-xs: 0.75rem;      /* 12px */

    --font-size-sm: 0.875rem;     /* 14px */

    --font-size-base: 1rem;       /* 16px */

    --font-size-lg: 1.125rem;     /* 18px */

    --font-size-xl: 1.25rem;      /* 20px */

    --font-size-2xl: 1.5rem;      /* 24px */

    --font-size-3xl: 1.875rem;    /* 30px */

    --font-size-4xl: 2.25rem;     /* 36px */

    --font-size-5xl: 3rem;        /* 48px */



    /* Font Weights */

    --font-weight-light: 300;

    --font-weight-normal: 400;

    --font-weight-medium: 400;

    --font-weight-semibold: 500;

    --font-weight-bold: 600;

    --font-weight-extrabold: 700;



    /* Line Heights */

    --line-height-tight: 1.25;

    --line-height-snug: 1.375;

    --line-height-normal: 1.5;

    --line-height-relaxed: 1.625;

    --line-height-loose: 2;



    /* ===== Border Radius ===== */

    --radius-none: 0;

    --radius-sm: 6px;

    --radius-md: 10px;

    --radius-lg: 14px;

    --radius-xl: 18px;

    --radius-2xl: 24px;

    --radius-full: 9999px;



    /* ===== Shadows ===== */

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);



    /* ===== Z-Index Scale ===== */

    --z-index-dropdown: 1000;

    --z-index-sticky: 1020;

    --z-index-fixed: 1030;

    --z-index-modal-backdrop: 1040;

    --z-index-modal: 1050;

    --z-index-popover: 1060;

    --z-index-tooltip: 1070;



    /* ===== Transitions ===== */

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);



    /* ===== Breakpoints (for reference in JS) ===== */

    --breakpoint-sm: 640px;

    --breakpoint-md: 768px;

    --breakpoint-lg: 1024px;

    --breakpoint-xl: 1280px;

    --breakpoint-2xl: 1536px;



    /* ===== Container Widths ===== */

    --container-sm: 640px;

    --container-md: 768px;

    --container-lg: 1024px;

    --container-xl: 1280px;

    --container-2xl: 1400px;



    /* ===== Theme-specific mappings (Dark) ===== */

    --bg: #020617;

    --bg-white: #0f172a;

    --bg-hover: #1e293b;

    --primary: var(--brand-accent);

    --primary-dark: var(--brand-accent-hover);

    --primary-light: var(--brand-accent-light);

    --text: #f8fafc;

    --text-dim: #94a3b8;

    --text-light: #64748b;

    --border: #1e293b;

    --success: var(--color-success);

    --info: var(--brand-accent);

    --warning: var(--color-warning);

    --danger: var(--color-danger);

    --shadow: rgba(0, 0, 0, 0.4);

    --on-primary: #ffffff;



    /* ===== T\c3\bcrev token'lar \e2\20ac\201d primary rengin \c5\178effaf varyantlar\c4\b1 ===== */

    /* color-mix() kullanarak tema de\c4\178i\c5\178iminde otomatik g\c3\bcncellenir    */

    --primary-alpha-03: color-mix(in srgb, var(--primary)  3%, transparent);

    --primary-alpha-05: color-mix(in srgb, var(--primary)  5%, transparent);

    --primary-alpha-08: color-mix(in srgb, var(--primary)  8%, transparent);

    --primary-alpha-10: color-mix(in srgb, var(--primary) 10%, transparent);

    --primary-alpha-15: color-mix(in srgb, var(--primary) 15%, transparent);

    --primary-alpha-20: color-mix(in srgb, var(--primary) 20%, transparent);

    --primary-alpha-25: color-mix(in srgb, var(--primary) 25%, transparent);

    --primary-alpha-30: color-mix(in srgb, var(--primary) 30%, transparent);

    --primary-alpha-40: color-mix(in srgb, var(--primary) 40%, transparent);



    /* ===== Topic/Public accent sistemi ===== */

    /* Admin'de --ui-admin-accent kar\c5\178\c4\b1l\c4\b1\c4\178\c4\b1; kullan\c4\b1c\c4\b1 taraf\c4\b1nda vurgu rengi */

    --topic-accent:        var(--brand-accent);

    --topic-accent-strong: var(--brand-accent-hover);

    --topic-accent-light:  var(--brand-accent-light);

    --topic-on-accent:     #ffffff;

    --topic-dark:          #1d2633;

    --topic-dark-soft:     #273345;



    /* Upload panel \c3\b6zel renkleri */

    --upload-panel-bg:     linear-gradient(135deg,

                             color-mix(in srgb, var(--topic-accent) 18%, transparent),

                             color-mix(in srgb, #8b1538 16%, transparent)

                           ), #1f2937;

}



/* Light Theme Overrides */


html[data-public-theme="turkmod"][data-theme-mode="light"] {
    --bg: #f0f2f5;

    --bg-white: #ffffff;

    --bg-hover: #e8ebf0;

    --primary: var(--brand-accent);

    --primary-dark: var(--brand-accent-hover);

    --primary-light: var(--brand-accent-light);

    --text: #111827;

    --text-dim: #374151;

    --text-light: #6b7280;

    --border: #d1d5db;

    --shadow: rgba(0, 0, 0, 0.1);

    --on-primary: #ffffff;

    --info: var(--brand-accent);

}



/* Dark Theme Overrides - Lighter burgundy for readability */


html[data-public-theme="turkmod"][data-theme-mode="dark"] {
    --brand-accent: #b91d47;

    --brand-accent-hover: #d92454;

    --brand-accent-light: #ff2d6a;

    --brand-accent-alpha-10: rgba(185, 29, 71, 0.1);

    --brand-accent-alpha-20: rgba(185, 29, 71, 0.2);

    --brand-accent-alpha-30: rgba(185, 29, 71, 0.3);

}



/* ===== Utility Classes Based on Design Tokens ===== */



/* Spacing Utilities */

html[data-public-theme="turkmod"] .p-0 { padding: var(--space-0); }

html[data-public-theme="turkmod"] .p-2 { padding: var(--space-2); }

html[data-public-theme="turkmod"] .p-3 { padding: var(--space-3); }



/* Gap Utilities */

html[data-public-theme="turkmod"] .gap-1 { gap: var(--space-1); }

html[data-public-theme="turkmod"] .gap-2 { gap: var(--space-2); }

html[data-public-theme="turkmod"] .gap-3 { gap: var(--space-3); }

html[data-public-theme="turkmod"] .gap-4 { gap: var(--space-4); }



/* Border Radius Utilities */



/* Shadow Utilities */



/* Typography Utilities */



/* Transition Utilities */



/* --- home-categories.css --- */

/* Homepage category widget - simplified tree */



/* --- pro-comments.css --- */

/* PRO-COMMENTS v6 \e2\20ac\201d Minimal Professional */

/* Clean, readable, Reddit/GitHub-inspired */



.topic-comments {

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-header {

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) auto !important;

    align-items: start !important;

    gap: var(--component-gap-xs) !important;

    min-height: 0 !important;

    padding: 0 0 var(--space-2) !important;

    background: transparent !important;

    border: 0 !important;

    border-bottom: 1px solid var(--ui-admin-border) !important;

    border-radius: 0 !important;

    margin: 0 0 var(--component-gap-sm) !important;

    box-shadow: none !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-header h2,

html[data-public-theme="turkmod"] .topic-comments .ui-comment-header__title {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    grid-column: 2 !important;

    justify-self: center !important;

    gap: 8px !important;

    min-width: 0 !important;

    width: max-content !important;

    max-width: 100% !important;

    margin: 0 !important;

    font-size: .9rem !important;

    font-weight: 500 !important;

    line-height: 1.2 !important;

    color: var(--text) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-header h2 i {

    color: var(--text-dim) !important;

    font-size: 1rem !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-count {

    font-size: .8rem !important;

    font-weight: 400 !important;

    color: var(--text-dim) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-form-wrap {

    display: flex !important;

    gap: 16px !important;

    padding: 20px 24px !important;

    background: var(--ui-admin-surface) !important;

    border: 1px solid var(--ui-admin-border) !important;

    border-radius: var(--radius-lg) !important;

    margin-bottom: 24px !important;

    box-shadow: var(--shadow-sm) !important;

    align-items: flex-start !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-form-avatar {

    width: 36px !important;

    height: 36px !important;

    flex-shrink: 0 !important;

    display: grid !important;

    place-items: center !important;

    background: var(--theme-surface-muted) !important;

    color: var(--text-dim) !important;

    font-weight: 500 !important;

    font-size: .82rem !important;

    border-radius: 50% !important;

    overflow: hidden !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-form-avatar img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-form-body {

    flex: 1 !important;

    min-width: 0 !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-textarea {

    width: 100% !important;

    padding: 10px 12px !important;

    border: 1px solid var(--border) !important;

    border-radius: var(--radius-md) !important;

    font-size: .875rem !important;

    font-family: inherit !important;

    resize: none !important;

    background: var(--bg-white) !important;

    color: var(--text) !important;

    line-height: 1.5 !important;

    transition: border-color var(--transition-fast) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-textarea:focus {

    outline: none !important;

    border-color: var(--text-dim) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-form-actions {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-top: 8px !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-form-btns {

    display: flex !important;

    gap: 8px !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-btn-submit {

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    padding: 7px 16px !important;

    background: var(--primary) !important;

    color: var(--on-primary) !important;

    border: none !important;

    border-radius: var(--radius-md) !important;

    font-size: .82rem !important;

    font-weight: 400 !important;

    cursor: pointer !important;

    transition: opacity var(--transition-fast) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-btn-submit:hover:not(:disabled) {

    opacity: .85 !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-btn-submit:disabled {

    opacity: .35 !important;

    cursor: not-allowed !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-btn-cancel {

    padding: 7px 14px !important;

    background: transparent !important;

    border: 1px solid var(--border) !important;

    border-radius: var(--radius-md) !important;

    font-size: .82rem !important;

    font-weight: 400 !important;

    color: var(--text-dim) !important;

    cursor: pointer !important;

    transition: background var(--transition-fast) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-btn-cancel:hover {

    background: var(--theme-surface-muted) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-login-prompt {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 10px !important;

    padding: 24px !important;

    background: var(--ui-admin-surface) !important;

    border: 1px solid var(--ui-admin-border) !important;

    border-radius: var(--radius-lg) !important;

    margin-bottom: 24px !important;

    color: var(--ui-admin-text-secondary) !important;

    font-size: .95rem !important;

    box-shadow: var(--shadow-sm) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-login-prompt a {

    color: var(--primary) !important;

    font-weight: 400 !important;

    text-decoration: none !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-login-prompt a:hover {

    text-decoration: underline !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-list {

    padding: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-loading {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    padding: 2rem 20px !important;

    color: var(--text-dim) !important;

    font-size: .85rem !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-char-count {

    font-size: .75rem !important;

    color: var(--text-dim) !important;

}



/* \e2\201d\20ac\e2\201d\20ac Sort Dropdown \e2\201d\20ac\e2\201d\20ac */

html[data-public-theme="turkmod"] .topic-comments .ui-comment-sort {

    display: inline-flex !important;

    align-items: center !important;

    grid-column: 3 !important;

    justify-self: end !important;

    align-self: start !important;

    gap: 6px !important;

    margin-left: auto !important;

    margin-bottom: 0 !important;

    order: 0 !important;

    width: max-content !important;

    max-width: 100% !important;

    font-size: .78rem !important;

    color: var(--text-dim) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-sort-label {

    font-weight: 400 !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-sort-select {

    appearance: none !important;

    background: var(--theme-surface-muted) !important;

    border: 1px solid var(--border) !important;

    border-radius: var(--radius-sm) !important;

    padding: 3px 24px 3px 8px !important;

    font-size: .78rem !important;

    font-family: inherit !important;

    color: var(--text) !important;

    cursor: pointer !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    background-position: right 8px center !important;

    transition: border-color var(--transition-fast) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-sort-select:focus {

    outline: none !important;

    border-color: var(--text-dim) !important;

}



/* \e2\201d\20ac\e2\201d\20ac Skeleton Loading \e2\201d\20ac\e2\201d\20ac */

html[data-public-theme="turkmod"] .topic-comments .ui-comment-skeleton {

    padding: 14px 20px !important;

    display: flex !important;

    gap: 12px !important;

    animation: tcPulse 1.5s ease-in-out infinite !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-skeleton-avatar {

    width: 36px !important;

    height: 36px !important;

    border-radius: 50% !important;

    background: var(--theme-surface-muted) !important;

    flex-shrink: 0 !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-skeleton-body {

    flex: 1 !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-skeleton-line {

    width: 100% !important;

    height: 10px !important;

    border-radius: 4px !important;

    background: var(--theme-surface-muted) !important;

    margin-bottom: 8px !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-skeleton-line--short {

    width: 30% !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-skeleton-line--full {

    width: 100% !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-skeleton-line--medium {

    width: 70% !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-skeleton-line:last-child {

    margin-bottom: 0 !important;

}



@keyframes tcPulse {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: .4;

    }

}



/* \e2\201d\20ac\e2\201d\20ac Pin Badge \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Permalink \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Collapse Replies \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac @mention highlight \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Inline code \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Code block \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Shortcuts hint \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Load More \e2\201d\20ac\e2\201d\20ac */

html[data-public-theme="turkmod"] .topic-comments .ui-comment-load-more-wrap {

    display: flex !important;

    justify-content: center !important;

    padding: 12px 20px !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-load-more-btn {

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    padding: 8px 20px !important;

    background: var(--theme-surface-muted) !important;

    border: 1px solid var(--border) !important;

    border-radius: var(--radius-md) !important;

    color: var(--text-dim) !important;

    font-size: .82rem !important;

    font-weight: 400 !important;

    cursor: pointer !important;

    transition: all var(--transition-fast) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-load-more-btn:hover {

    background: var(--bg-white) !important;

    color: var(--text) !important;

    border-color: var(--text-dim) !important;

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-load-more-btn:disabled {

    opacity: .5 !important;

    cursor: not-allowed !important;

}



/* \e2\201d\20ac\e2\201d\20ac Report Modal \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Edit History Modal \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Markdown rendered content \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Action btn: report \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Edit Mode Highlight \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac New comment animation \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Pagination Info \e2\201d\20ac\e2\201d\20ac */

html[data-public-theme="turkmod"] .topic-comments .ui-comment-pagination-info {

    text-align: center !important;

    padding: 4px 20px 8px !important;

    font-size: .78rem !important;

    color: var(--text-dim) !important;

}



@media (max-width: 768px) {

    html[data-public-theme="turkmod"] .topic-comments {

        border-radius: 0 !important;

        border-left: 0 !important;

        border-right: 0 !important;

    }



    html[data-public-theme="turkmod"] .topic-comments .ui-comment-form-wrap {

        padding: 14px 16px !important;

    }



    html[data-public-theme="turkmod"] .topic-comments .ui-comment-header {

        grid-template-columns: minmax(0, 1fr) !important;

        align-items: start !important;

    }



    html[data-public-theme="turkmod"] .topic-comments .ui-comment-header h2,

    html[data-public-theme="turkmod"] .topic-comments .ui-comment-header__title {

        grid-column: 1 !important;

    }



    html[data-public-theme="turkmod"] .topic-comments .ui-comment-sort {

        grid-column: 1 !important;

        justify-content: flex-end !important;

        justify-self: end !important;

        width: max-content !important;

        max-width: 100% !important;

        margin-left: auto !important;

    }



    html[data-public-theme="turkmod"] .topic-comments .ui-comment-list {

        padding: 0 !important;

    }



    /* Deep thread flattening on mobile */

}



@media (max-width: 480px) {

    html[data-public-theme="turkmod"] .topic-comments .ui-comment-form-wrap {

        flex-direction: column !important;

        gap: 8px !important;

    }



    html[data-public-theme="turkmod"] .topic-comments .ui-comment-form-avatar {

        display: none !important;

    }

}



/* \e2\201d\20ac\e2\201d\20ac Premium UX Enhancements \e2\201d\20ac\e2\201d\20ac */



/* 1. Micro-animations */



/* 2. Toast Notifications */



/* 3. Empty State */



/* 4. Markdown Toolbar */



/* 5. Author/Admin Badge */



/* 6. Read More (Truncation) */



/* 7. Mention Dropdown */



/* --- public-dialog.css --- */

/* Shared public confirmation and prompt dialogs. */



@keyframes app-dialog-fade {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes app-dialog-pop {

    from { opacity: 0; transform: translateY(8px) scale(0.98); }

    to { opacity: 1; transform: translateY(0) scale(1); }

}



/* --- public-notifications.css --- */

/* Notification center page styles. */



/* Final notification center polish — width is governed by the focus layout

   (grid--focus spans the full page-wrap), so the shell only sets vertical rhythm. */



/* --- public-shell.css --- */

/* Shared public shell components: header topbar, notification menu, and tiny utilities. */



.is-hidden {

    display: none !important;

}



html[data-public-theme="turkmod"] .topbar {

    padding: 8px 0;

    color: var(--text-dim);

    font-size: 0.85rem;

    font-weight: 400;

    text-align: center;

    background: var(--bg-white);

    border-bottom: 1px solid var(--border);

}



html[data-public-theme="turkmod"] .notif-dropdown {

    position: relative;

    display: inline-block;

}



html[data-public-theme="turkmod"] .notif-toggle {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    padding: 0;

    color: var(--text);

    font-size: 1.2rem;

    cursor: pointer;

    background: transparent;

    border: 0;

    border-radius: var(--radius-full, 9999px);

    transition: background var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease);

}



html[data-public-theme="turkmod"] .notif-toggle:hover {

    color: var(--primary);

    background: var(--bg-hover);

}



html[data-public-theme="turkmod"] .notif-badge {

    position: absolute;

    top: 4px;

    right: 4px;

    display: none;

    align-items: center;

    justify-content: center;

    min-width: 18px;

    height: 18px;

    padding: 0 4px;

    color: var(--on-primary, #fff);

    font-size: 0.65rem;

    font-weight: 700;

    line-height: 1;

    background: var(--danger, #dc2626);

    border-radius: 9px;

    box-shadow: 0 0 0 2px var(--bg-white);

}



html[data-public-theme="turkmod"] .notif-menu {

    position: absolute;

    top: 100%;

    right: 0;

    z-index: 1000;

    display: none;

    flex-direction: column;

    width: min(320px, calc(100vw - 2rem));

    margin-top: 0.5rem;

    overflow: hidden;

    color: var(--text);

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg, 12px);

    box-shadow: var(--shadow-lg, 0 18px 42px rgba(15, 23, 42, 0.12));

}



html[data-public-theme="turkmod"] .notif-dropdown.show .notif-menu {

    display: flex;

}



html[data-public-theme="turkmod"] .notif-menu-header,

html[data-public-theme="turkmod"] .notif-menu-footer {

    border-color: var(--border);

}



html[data-public-theme="turkmod"] .notif-menu-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    padding: 1rem;

    font-weight: 700;

    border-bottom: 1px solid var(--border);

}



html[data-public-theme="turkmod"] .notif-menu-header a,

html[data-public-theme="turkmod"] .notif-menu-footer a {

    color: var(--primary);

    font-size: 0.8rem;

    font-weight: 600;

    text-decoration: none;

}



html[data-public-theme="turkmod"] .notif-menu-list {

    display: flex;

    flex-direction: column;

    max-height: 300px;

    overflow-y: auto;

}



html[data-public-theme="turkmod"] .notif-menu-footer {

    padding: 0.75rem;

    text-align: center;

    border-top: 1px solid var(--border);

}



html[data-public-theme="turkmod"] .notif-menu-state {

    padding: 2rem 1rem;

    color: var(--text-dim);

    font-size: 0.85rem;

    text-align: center;

}



html[data-public-theme="turkmod"] .notif-menu-state.is-loading {

    padding: 1rem;

}



html[data-public-theme="turkmod"] .notif-menu-state i {

    display: block;

    margin-bottom: 0.5rem;

    font-size: 2rem;

    opacity: 0.5;

}



@media (max-width: 575.98px) {

    html[data-public-theme="turkmod"] .notif-menu {

        right: -4.25rem;

    }

}



/* User profile and download polish overrides */



/* --- public-upload.css --- */

/* Shared public upload/edit form styles. Extracted from page templates to keep static CSS centralized. */



/* ============================================================

   MOD Y\dcKLEME EKRANI \2014 Premium Gaming Dark Theme

   ============================================================ */



/* Glowing cyberpunk header section */



/* Premium Form Label Styling */



/* Custom Styled Input Fields */



/* Media Cards / Dropzones */



/* Capsule Pill Badges */



/* High-Tech Upload Drag-n-Drop Zone */



/* Upload Preview Items */



/* Download Link Rows */



/* Policy Note Banner */



/* Action Area */



/* Premium upload revision - scoped over the legacy inline theme. */

html[data-public-theme="turkmod"] body:has(.upload-shell) {

    background:

        linear-gradient(180deg, rgba(244, 184, 68, 0.07), transparent 250px),

        #0d1117 !important;

    overflow-x: hidden;

}



/* Theme-aware upload layer. Keeps the premium layout, follows site light/dark tokens. */



html[data-public-theme="turkmod"] body:has(.upload-shell) {

    background:

        linear-gradient(180deg, color-mix(in srgb, var(--upload-accent) 7%, transparent), transparent 260px),

        var(--bg) !important;

    color: var(--text);

}

html[data-public-theme="turkmod"] body:has(.topic-edit-upload-page) {

    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 260px), var(--bg) !important;

}



/* Shared upload/edit field polish */



/* --- system-fallback.css --- */



/* --- theme.css --- */

/* ============================================================

   THEME.CSS - User-Facing Styles

   Consolidated from: anasayfa-style.css, redesign.css (user parts), konu-style.css, leaderboard.css

   ============================================================ */



/* Import unified design system as authoritative source */

/* ============================================================

   Section 1: Homepage Styles (from anasayfa-style.css)

   ============================================================ */

/* Theme System - Light & Dark Mode Support */

html[data-public-theme="turkmod"] * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* Utility Classes - Inline Style Replacements */



/* Dark Theme (Default) */

html[data-public-theme="turkmod"] {

    --bg: #0f1419;

    --bg-white: #1a1f2e;

    --bg-hover: #252d3d;

    --primary: #8b1538;

    --primary-dark: #6d1029;

    --primary-light: #fce7ec;

    --text: #f0f4f8;

    --text-dim: #8b95a5;

    --text-light: #5a6b7a;

    --border: #2a3544;

    --success: #00d084;

    --info: #8b1538;

    --warning: var(--brand-accent);

    --danger: #ff4757;

    --shadow: rgba(0, 0, 0, 0.4);

}



/* Light Theme */


html[data-public-theme="turkmod"][data-theme-mode="light"] {
    --bg: #f0f2f5;

    --bg-white: #ffffff;

    --bg-hover: #e8ebf0;

    --primary: #8b1538;

    --primary-dark: #6d1029;

    --primary-light: #b91d47;

    --text: #111827;

    --text-dim: #374151;

    --text-light: #6b7280;

    --border: #d1d5db;

    --success: #10b981;

    --info: #8b1538;

    --warning: var(--brand-accent);

    --danger: #dc2626;

    --shadow: rgba(0, 0, 0, 0.1);

}



html[data-public-theme="turkmod"] body {

    font-family: 'Roboto', sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.6;

}



html[data-public-theme="turkmod"] .container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Header */

html[data-public-theme="turkmod"] .header {

    background: var(--public-header-bg, var(--bg-white));

    border-bottom: 1px solid var(--public-header-border, var(--border));

    padding: 16px 0;

    position: sticky;

    top: 0;

    z-index: var(--z-sticky);

    box-shadow: var(--shadow-sm);

}



html[data-public-theme="turkmod"] .header .container {

    display: flex;

    align-items: center;

    gap: 40px;

}



html[data-public-theme="turkmod"] .nav {

    display: flex;

    gap: 4px;

}



html[data-public-theme="turkmod"] .nav a {

    padding: 8px 16px;

    text-decoration: none;

    color: var(--public-header-link, var(--text-dim));

    font-weight: 500;

    font-size: 0.9rem;

    border-radius: var(--radius-md);

    transition: all 0.2s;

}



html[data-public-theme="turkmod"] .nav a:hover {

    color: var(--text);

    background: var(--bg-hover);

}



html[data-public-theme="turkmod"] .nav a.active {

    color: var(--primary);

    background: var(--primary-light);

}



html[data-public-theme="turkmod"] .header-right {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: auto;

}



/* Theme Toggle Button */

html[data-public-theme="turkmod"] .theme-toggle {

    width: 38px;

    height: 38px;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    color: var(--text);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s;

    font-size: 1.1rem;

}



html[data-public-theme="turkmod"] .theme-toggle:hover {

    background: var(--bg-hover);

    border-color: var(--primary);

    color: var(--primary);

    transform: translateY(-1px);

}



html[data-public-theme="turkmod"] .theme-toggle i {

    transition: transform 0.3s ease;

}



html[data-public-theme="turkmod"] .theme-toggle:active i {

    transform: rotate(180deg);

}



html[data-public-theme="turkmod"] .search {

    position: relative;

    display: flex;

    align-items: center;

}



html[data-public-theme="turkmod"] .search i {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-dim);

    font-size: 0.85rem;

}



html[data-public-theme="turkmod"] .search input {

    height: 38px;

    padding: 0 12px 0 36px;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    color: var(--text);

    font-size: 0.85rem;

    width: 200px;

    transition: all 0.2s;

}



html[data-public-theme="turkmod"] .search input:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 3px var(--brand-accent-alpha-10);

}



html[data-public-theme="turkmod"] .user-menu {

    display: flex;

    align-items: center;

    gap: 8px;

}



/* Breadcrumb */

html[data-public-theme="turkmod"] .breadcrumb {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    margin: 0;

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    flex-wrap: wrap;

}



html[data-public-theme="turkmod"] .breadcrumb a {

    display: flex;

    align-items: center;

    gap: 4px;

    text-decoration: none;

    color: var(--primary);

    font-weight: 500;

    font-size: 0.8rem;

    transition: all 0.2s;

}



html[data-public-theme="turkmod"] .breadcrumb a:hover {

    color: var(--primary-dark);

}



html[data-public-theme="turkmod"] .breadcrumb a i {

    font-size: 0.85rem;

}



html[data-public-theme="turkmod"] .breadcrumb i.bi-chevron-right {

    color: var(--text-dim);

    font-size: 0.7rem;

}



html[data-public-theme="turkmod"] .breadcrumb span {

    color: var(--text-dim);

    font-weight: 400;

    font-size: 0.8rem;

}



/* 3 Column Layout */

html[data-public-theme="turkmod"] .layout {

    display: grid;

    grid-template-columns: 260px 1fr 300px;

    gap: 24px;

}



/* Sidebars - Tam Stabil Yap\c4\b1 */

html[data-public-theme="turkmod"] .sidebar {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



html[data-public-theme="turkmod"] .sidebar-left {

    align-self: flex-start;

}



html[data-public-theme="turkmod"] .sidebar-right {

    align-self: flex-start;

}



/* Widget Header */



/* Widget Toggle Button */



/* Widget Body */



/* Game Select */



/* ============================================

   KATEGOR\c4\b0LER - ULTRA M\c4\b0N\c4\b0MAL TASARIM

   ============================================ */



/* Category Widget Container */



/* Category List Body */



/* T\c3\bcm Kategoriler Link */



/* Category Items */



/* Category Toggle Button (Parent Categories) */



/* Category Link (Single Categories) */



/* Subcategories - Tamamen Basit */



/* Stats Widget Fix */



/* Filters */



/* Tags */

html[data-public-theme="turkmod"] .tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



html[data-public-theme="turkmod"] .tag {

    padding: 6px 12px;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    font-size: 0.8rem;

    font-weight: 500;

    color: var(--text-dim);

    cursor: pointer;

    transition: all 0.2s;

}



html[data-public-theme="turkmod"] .tag:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: var(--on-primary);

}



/* Stats */

html[data-public-theme="turkmod"] .stats {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



/* Comments List */



html[data-public-theme="turkmod"] .comment-item {

    display: flex;

    gap: 10px;

}



/* Activity List */



/* Popular List */



/* CTA Widget */



/* Main Content */

html[data-public-theme="turkmod"] .content {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



/* Search Header */



/* Category Header */



/* Filter Bar */



/* Mod Grid */

html[data-public-theme="turkmod"] .topic-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}



html[data-public-theme="turkmod"] .badge {

    position: absolute;

    top: 10px;

    right: 10px;

    padding: 4px 10px;

    background: rgba(255, 255, 255, 0.95);

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    font-size: 0.7rem;

    font-weight: 700;

    color: var(--text);

    text-transform: uppercase;

    letter-spacing: 1px;

    box-shadow: 0 2px 8px var(--shadow);

}



/* Pagination */



/* Auth Pages */



html[data-public-theme="turkmod"] .link {

    color: var(--primary);

    text-decoration: none;

    font-weight: 500;

    font-size: 0.875rem;

    transition: all 0.2s;

}



html[data-public-theme="turkmod"] .link:hover {

    color: var(--primary-dark);

    text-decoration: underline;

}



/* Footer */

html[data-public-theme="turkmod"] .footer {

    margin-top: 64px;

    padding: 32px 0;

    border-top: 1px solid var(--border);

    background: var(--bg-white);

}



html[data-public-theme="turkmod"] .footer p {

    color: var(--text-dim);

    font-size: 0.9rem;

}



/* Responsive */

@media (max-width: 1200px) {

    html[data-public-theme="turkmod"] .layout {

        grid-template-columns: 240px 1fr 280px;

        gap: 20px;

    }



    html[data-public-theme="turkmod"] .topic-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 992px) {

    html[data-public-theme="turkmod"] .layout {

        grid-template-columns: 1fr;

    }



    html[data-public-theme="turkmod"] .sidebar-left,

    html[data-public-theme="turkmod"] .sidebar-right {

        display: none;

    }



    html[data-public-theme="turkmod"] .topic-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    html[data-public-theme="turkmod"] .nav {

        display: none;

    }



    html[data-public-theme="turkmod"] .topic-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 480px) {

    html[data-public-theme="turkmod"] .search {

        display: none;

    }



    html[data-public-theme="turkmod"] .header .container {

        gap: 12px;

        padding-inline: 12px;

    }



    html[data-public-theme="turkmod"] .header-right {

        gap: 6px;

        flex-shrink: 0;

    }

}



/* ============================================

   STANDART M\c4\b0N\c4\b0MAL FOOTER - T\c3\153M SAYFALAR \c4\b0\c3\2021\c4\b0N

   ============================================ */



html[data-public-theme="turkmod"] .site-footer {

    background: var(--public-footer-bg, var(--bg));

    border-top: 1px solid var(--public-footer-border, var(--border));

    margin-top: 1.25rem;

    padding: 1rem 0;

}



html[data-public-theme="turkmod"] .site-footer .container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 1.5rem;

}



/* Footer bar: links left, copyright right on desktop; stacked + centred on mobile. */

html[data-public-theme="turkmod"] .site-footer-bar {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem 1.5rem;

}



html[data-public-theme="turkmod"] .site-footer-nav {

    margin: 0;

    flex-wrap: wrap;

}



html[data-public-theme="turkmod"] .site-footer-copy {

    margin-left: auto;

    text-align: right;

}



@media (max-width: 767.98px) {

    html[data-public-theme="turkmod"] .site-footer-bar {

        justify-content: center;

        text-align: center;

    }

    html[data-public-theme="turkmod"] .site-footer-nav {

        justify-content: center;

        width: 100%;

    }

    html[data-public-theme="turkmod"] .site-footer-copy {

        margin-left: 0;

        width: 100%;

        text-align: center;

    }

}



@media (max-width: 768px) {

    html[data-public-theme="turkmod"] .site-footer {

        padding: 0.75rem 0;

    }

}



/* ============================================

   SIDEBAR CATEGORY ATLAS THEME LAYER

   ============================================ */



/* ============================================================

   Section 2: Redesign Styles - User Parts (from redesign.css)

   ============================================================ */

/* Topic redesign */



/* Topbar Killer - T\c3\bcm topbar stillerini sil */

html[data-public-theme="turkmod"] .topbar,

html[data-public-theme="turkmod"] *[class*="topbar"] {

    display: none !important;

}



html[data-public-theme="turkmod"] .search {

    display: flex;

    gap: .5rem;

    min-width: min(390px, 100%);

}



html[data-public-theme="turkmod"] .search .btn {

    height: 42px;

    border-radius: var(--radius-sm);

    font-weight: 850;

}



html[data-public-theme="turkmod"] .user-menu {

    position: relative;

}



html[data-public-theme="turkmod"] .user-toggle {

    display: flex;

    align-items: center;

    gap: .55rem;

    min-height: 42px;

    padding: .35rem .65rem .35rem .4rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    color: var(--text);

    background: var(--bg);

    font-size: .9rem;

    font-weight: 850;

}



html[data-public-theme="turkmod"] .user-dropdown {

    min-width: 190px;

    padding: .45rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    box-shadow: 0 18px 38px var(--shadow);

    z-index: var(--z-modal);

    margin-top: .45rem;

    background: var(--bg-white);

}



/* Navbar dropdown visibility */



html[data-public-theme="turkmod"] .user-dropdown .dropdown-item {

    border-radius: .38rem;

    color: var(--text-dim);

    font-size: .9rem;

    font-weight: 700;

}



html[data-public-theme="turkmod"] .user-dropdown .dropdown-item:hover {

    color: var(--text);

    background: var(--bg);

}



/* === Dropdown Submenu (parent -> child kategoriler) === */



/* K\c3\bc\c3\a7\c3\bck ekranlarda submenu'yu altta a\c3\a7 (yandan de\c4\178il) */



/* Sticky sidebar i\c3\a7in parent container'lar\c4\b1n overflow'unu d\c3\bczelt */



html[data-public-theme="turkmod"] .topic-detail-content {

    color: var(--text);

    line-height: 1.75;

}



@media (max-width: 991.98px) {

    html[data-public-theme="turkmod"] .search {

        min-width: 0;

        width: 100%;

    }



}



@media (max-width: 575.98px) {



    html[data-public-theme="turkmod"] .header .container {

        gap: 12px;

        padding-inline: 12px;

    }



    html[data-public-theme="turkmod"] .header-right {

        gap: 6px;

        flex-shrink: 0;

    }

}







html[data-public-theme="turkmod"] .topic-descriptions,

html[data-public-theme="turkmod"] .topic-images-videos,

html[data-public-theme="turkmod"] .topic-details,

html[data-public-theme="turkmod"] .topic-download-links {

    overflow: hidden;

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-sm);

    padding: 1.35rem;

}



/* ============================================

   IMPROVEMENTS: Inline CSS moved to stylesheet

   ============================================ */



/* Skip link for accessibility */



/* Topic read more button (was inline) */



/* Topic list bottom row (was inline) */



/* Upload button variant */



/* Category header (was inline in category.php) */



/* Category row hover and active state */

/* Sidebar category row hover/active overrides placed below */



/* All categories grid */



/* Panel head styles (was inline) */



/* Side panel heading (was inline) */



/* Category row base */



/* Hover State */



/* Active State */



html[data-public-theme="turkmod"] .topic-descriptions h2,

html[data-public-theme="turkmod"] .topic-images-videos h2,

html[data-public-theme="turkmod"] .topic-details h2,

html[data-public-theme="turkmod"] .topic-download-links h2 {

    margin: 0 0 .75rem;

    color: var(--text);

    font-size: 1.35rem;

    font-weight: 850;

}



/* Title bar above image */



/* Individual panel boxes */



/* Download cards */

html[data-public-theme="turkmod"] .topic-dl-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.5rem;

    width: 100%;

}



html[data-public-theme="turkmod"] .topic-dl-card {

    display: grid;

    grid-template-columns: auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 0.85rem;

    width: 100%;

    padding: 0.6rem 0.85rem;

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    text-decoration: none;

    color: inherit;

    transition: all var(--transition-fast);

    box-shadow: 0 1px 2px var(--shadow);

}



html[data-public-theme="turkmod"] .topic-dl-card:hover {

    border-color: var(--primary);

    background: var(--bg-hover);

    transform: translateY(-1px);

    box-shadow: var(--shadow-md);

}



/* Topic detail items (was inline) */



/* Media grid (was inline) */

html[data-public-theme="turkmod"] .topic-media-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 1rem;

    margin-top: 1rem;

}



html[data-public-theme="turkmod"] .topic-media-placeholder {

    background: var(--bg);

    border-radius: var(--radius-md);

    aspect-ratio: 16/9;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-dim);

    border: 1px dashed var(--border);

    font-size: 2rem;

}



/* \e2\201d\20ac\e2\201d\20ac AJAX Comment System \e2\201d\20ac\e2\201d\20ac */

html[data-public-theme="turkmod"] .topic-comments {

    overflow: hidden;

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-sm);

    padding: 1.35rem;

}



html[data-public-theme="turkmod"] .ui-comment-header h2 {

    display: flex;

    align-items: center;

    gap: .5rem;

    margin: 0 0 1rem;

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--text);

}



html[data-public-theme="turkmod"] .ui-comment-count {

    font-size: .85rem;

    font-weight: 400;

    color: var(--text-dim);

}



/* Form */

html[data-public-theme="turkmod"] .ui-comment-form-wrap {

    display: flex;

    gap: .75rem;

    margin-bottom: 1.25rem;

}



html[data-public-theme="turkmod"] .ui-comment-form-avatar {

    flex-shrink: 0;

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    background: var(--primary);

    color: var(--on-primary);

    font-weight: 700;

    font-size: .85rem;

    border-radius: 50%;

}



html[data-public-theme="turkmod"] .ui-comment-form-body {

    flex: 1;

    min-width: 0;

}



html[data-public-theme="turkmod"] .ui-comment-textarea {

    width: 100%;

    padding: .6rem .75rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    font-size: .92rem;

    font-family: inherit;

    resize: none;

    transition: border-color .2s, box-shadow .2s;

    background: var(--bg);

    color: var(--text);

}



html[data-public-theme="turkmod"] .ui-comment-textarea:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);

    background: var(--bg-white);

}



html[data-public-theme="turkmod"] .ui-comment-form-actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: .5rem;

}



html[data-public-theme="turkmod"] .ui-comment-char-count {

    font-size: .78rem;

    color: var(--text-dim);

}



html[data-public-theme="turkmod"] .ui-comment-form-btns {

    display: flex;

    gap: .4rem;

}



html[data-public-theme="turkmod"] .ui-comment-btn-cancel {

    padding: .35rem .75rem;

    background: none;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    font-size: .82rem;

    font-weight: 500;

    color: var(--text-dim);

    cursor: pointer;

}



html[data-public-theme="turkmod"] .ui-comment-btn-cancel:hover {

    background: var(--bg);

}



html[data-public-theme="turkmod"] .ui-comment-btn-submit {

    padding: .35rem 1rem;

    background: var(--primary);

    color: var(--on-primary);

    border: none;

    border-radius: var(--radius-md);

    font-size: .82rem;

    font-weight: 600;

    cursor: pointer;

    transition: background .2s;

}



html[data-public-theme="turkmod"] .ui-comment-btn-submit:hover {

    background: var(--primary-dark);

}



html[data-public-theme="turkmod"] .ui-comment-btn-submit:disabled {

    opacity: .5;

    cursor: not-allowed;

}



/* Login prompt */

html[data-public-theme="turkmod"] .ui-comment-login-prompt {

    display: flex;

    align-items: center;

    gap: .5rem;

    padding: .85rem 1rem;

    margin-bottom: 1rem;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    color: var(--text-dim);

    font-size: .9rem;

}



html[data-public-theme="turkmod"] .ui-comment-login-prompt a {

    color: var(--primary);

    font-weight: 600;

}



/* Alert */



html[data-public-theme="turkmod"] .is-hidden {

    display: none !important;

}



html[data-public-theme="turkmod"] .topic-media-item-inline {

    padding: .5rem;

    background: var(--topic-bg);

    border: 1px solid var(--topic-border);

    border-radius: .4rem;

    margin-bottom: .5rem;

}



html[data-public-theme="turkmod"] .topic-media-link-inline {

    text-decoration: none;

    color: var(--topic-text);

}



/* Comment list */

html[data-public-theme="turkmod"] .ui-comment-list {

    min-height: 40px;

}



html[data-public-theme="turkmod"] .ui-comment-loading {

    display: flex;

    align-items: center;

    gap: .5rem;

    padding: 1.5rem 0;

    color: var(--text-dim);

    font-size: .9rem;

}



/* Comment item */







/* Search info */



/* Pagination */



/* 404 Page */



/* Skeleton loading animation */



/* ============================================

   RESPONSIVE IMPROVEMENTS

   ============================================ */



/* Mobile first responsive */

@media (max-width: 575.98px) {



    html[data-public-theme="turkmod"] .topic-media-grid {

        grid-template-columns: 1fr 1fr;

    }

}



/* ============================================

   \c4\b0ND\c4\b0RME BA\c4\9eLANTILARI - Belirgin Tema Uyumlu Tasar\c4\b1m

   ============================================ */



html[data-public-theme="turkmod"] .topic-dl-card {

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 0.85rem;

    width: 100%;

    padding: 1rem 1.25rem;

    background: var(--bg-white);

    border: 2px solid var(--border);

    border-radius: 10px;

    text-decoration: none;

    color: inherit;

    transition: all 0.25s ease;

    box-shadow: 0 2px 6px var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.02);

    position: relative;

    overflow: hidden;

    margin-bottom: 0.75rem;

}



/* A\c3\a7\c4\b1k tema i\c3\a7in daha belirgin arka plan */



/* Koyu tema i\c3\a7in daha belirgin arka plan */



html[data-public-theme="turkmod"] .topic-dl-card::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 4px;

    background: var(--primary);

    opacity: 0;

    transition: opacity 0.25s ease;

}



html[data-public-theme="turkmod"] .topic-dl-card:hover {

    border-color: var(--primary);

    background: var(--bg-hover);

    transform: translateX(4px);

    box-shadow: 0 4px 16px var(--shadow), 0 0 0 2px var(--primary);

}



html[data-public-theme="turkmod"] .topic-dl-card:hover::before {

    opacity: 1;

}



/* \c4\b0kon */

html[data-public-theme="turkmod"] .topic-dl-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    background: var(--primary);

    color: var(--on-primary);

    border-radius: 10px;

    font-size: 1.2rem;

    flex-shrink: 0;

    transition: all 0.25s ease;

}



html[data-public-theme="turkmod"] .topic-dl-card:hover .topic-dl-icon {

    background: var(--primary-dark);

    transform: scale(1.08) rotate(5deg);

    box-shadow: 0 4px 12px var(--brand-accent-alpha-30);

}



html[data-public-theme="turkmod"] .topic-dl-icon i {

    color: inherit;

}



/* Bilgi Alan\c4\b1 */

html[data-public-theme="turkmod"] .topic-dl-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



html[data-public-theme="turkmod"] .topic-dl-info strong {

    display: block;

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--text);

    line-height: 1.3;

    transition: color 0.2s ease;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



html[data-public-theme="turkmod"] .topic-dl-card:hover .topic-dl-info strong {

    color: var(--primary);

}



html[data-public-theme="turkmod"] .topic-dl-info small {

    display: block;

    font-size: 0.8rem;

    color: var(--text-dim);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



/* \c4\b0ndirme Say\c4\b1s\c4\b1 */

html[data-public-theme="turkmod"] .topic-dl-count {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-top: 4px;

    color: var(--text-dim);

    background: var(--bg);

    padding: 4px 8px;

    border-radius: 5px;

    font-size: 0.75rem;

    font-weight: 500;

    border: 1px solid var(--border);

    transition: all var(--transition-fast);

}



html[data-public-theme="turkmod"] .topic-dl-card:hover .topic-dl-count {

    background: var(--bg-hover);

    border-color: var(--primary);

    color: var(--primary);

}



html[data-public-theme="turkmod"] .topic-dl-count i {

    color: var(--primary);

    font-size: 0.8rem;

}



/* Aksiyon Butonu */

html[data-public-theme="turkmod"] .topic-dl-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    padding: 0.5rem 1.25rem;

    color: var(--on-primary);

    background: var(--primary);

    border-radius: var(--radius-md);

    transition: all 0.25s ease;

    box-shadow: 0 2px 8px var(--brand-accent-alpha-20);

    flex-shrink: 0;

    font-weight: 600;

    font-size: 0.85rem;

    white-space: nowrap;

}



html[data-public-theme="turkmod"] .topic-dl-card:hover .topic-dl-button {

    background: var(--primary-dark);

    box-shadow: 0 4px 14px var(--brand-accent-alpha-30);

    transform: translateY(-2px);

}



html[data-public-theme="turkmod"] .topic-dl-action {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: inherit;

    font-weight: inherit;

    white-space: nowrap;

}



/* Durum: Say\c4\b1m Yap\c4\b1l\c4\b1yor */



/* Durum: Haz\c4\b1r */



/* Animasyon */



/* Responsive Tasar\c4\b1m */

@media (max-width: 768px) {

    html[data-public-theme="turkmod"] .topic-dl-card {

        grid-template-columns: auto 1fr;

        grid-template-areas:

            "icon info"

            "button button";

        gap: 0.75rem;

        padding: 0.75rem;

    }



    html[data-public-theme="turkmod"] .topic-dl-icon {

        grid-area: icon;

        width: 40px;

        height: 40px;

        font-size: 1.1rem;

    }



    html[data-public-theme="turkmod"] .topic-dl-info {

        grid-area: info;

    }



    html[data-public-theme="turkmod"] .topic-dl-button {

        grid-area: button;

        width: 100%;

        justify-content: center;

        padding: 0.65rem 1rem;

    }



    html[data-public-theme="turkmod"] .topic-dl-card:hover {

        transform: translateX(2px);

    }

}



@media (max-width: 480px) {

    html[data-public-theme="turkmod"] .topic-dl-card {

        padding: 0.65rem;

        gap: 0.65rem;

    }



    html[data-public-theme="turkmod"] .topic-dl-icon {

        width: 36px;

        height: 36px;

        font-size: 1rem;

        border-radius: var(--radius-md);

    }



    html[data-public-theme="turkmod"] .topic-dl-info strong {

        font-size: 0.875rem;

    }



    html[data-public-theme="turkmod"] .topic-dl-info small {

        font-size: 0.75rem;

    }



    html[data-public-theme="turkmod"] .topic-dl-count {

        font-size: 0.7rem;

        padding: 3px 6px;

    }



    html[data-public-theme="turkmod"] .topic-dl-button {

        min-height: 36px;

        padding: 0.5rem 0.85rem;

        font-size: 0.8rem;

    }

}



/* ============================================

   PHASE 2: Additional improvements

   ============================================ */



/* Breadcrumb */



/* Toast notifications */

/* ============================================

   TOAST NOTIFICATIONS \e2\20ac\201d Advanced System

   ============================================ */

html[data-public-theme="turkmod"] .topic-toast-container {

    position: fixed;

    z-index: var(--z-tooltip);

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    pointer-events: none;

    padding: 1.25rem;

    max-height: 100vh;

    overflow: hidden;

}



/* Positions */



/* Base Toast */



/* Close button */



/* Progress bar */



/* Progress bar type colors */



/* ---- Type Colors (default theme) ---- */



/* ---- Theme: Colored (full background fill) ---- */



/* ---- Theme: Glass (glassmorphism) ---- */



/* ---- Theme: Minimal (clean, subtle) ---- */



/* ---- Animations ---- */



/* Slide (default) */



/* Fade */



/* Bounce */



/* Scale */



/* Slide-in for left positions */



/* Center positions: slide from top */



/* Dismissal animation */



/* Mobile responsive */

@media (max-width: 480px) {

    html[data-public-theme="turkmod"] .topic-toast-container {

        left: 0.5rem !important;

        right: 0.5rem !important;

        transform: none !important;

        padding: 0.75rem;

    }

}



/* Theme system uses CSS variables \e2\20ac\201d supports light/dark */



/* ============================================

   TOPIC NAVBAR \e2\20ac\201d Dark topbar with accent border

   ============================================ */



html[data-public-theme="turkmod"] .topic-nav-search {

    display: flex;

    width: min(380px, 100%);

    gap: .4rem;

}



@media (max-width: 991.98px) {

    html[data-public-theme="turkmod"] .topic-nav-search {

        width: 100%;

        margin-top: .5rem;

    }

}



/* ============================================

   TOPIC HOME \e2\20ac\201d main page layout

   ============================================ */



html[data-public-theme="turkmod"] {

    /* Hafif tema d\c3\bczen token'lar\c4\b1 \e2\20ac\201d design-tokens.css'deki ana token'larla e\c5\178le\c5\178ir */

    --topic-body-bg: var(--bg, #eef1f6);

    --topic-surface: var(--bg-white, #ffffff);

    --topic-text: var(--text, #202938);

    --topic-muted: var(--text-dim, #687386);

    --topic-border: var(--border, #d8dee8);

    /* NOT: --topic-accent, --topic-accent-strong, --topic-dark,

           --topic-dark-soft art\c4\b1k design-tokens.css'de tan\c4\b1ml\c4\b1 */

}



html[data-public-theme="turkmod"] .topic-card {

    display: grid;

    grid-template-columns: 190px minmax(0, 1fr);

    gap: 1rem;

    padding: .85rem;

    background: var(--bg-white);

    border: 1px solid var(--topic-border);

    border-radius: .45rem;

    box-shadow: 0 8px 18px rgba(29, 38, 51, .05);

    transition: transform .15s, box-shadow .15s;

}



html[data-public-theme="turkmod"] .topic-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 28px rgba(29, 38, 51, .1);

}



/* Pop\c3\bcler \c4\b0\c3\a7erikler Widget - Modern Tasar\c4\b1m */



/* Responsive for topic home */



@media (max-width: 575.98px) {



    

    html[data-public-theme="turkmod"] .topic-card {

        grid-template-columns: 1fr;

    }

}



/* ============================================================

   Topic List Card \e2\20ac\201d Minimal Mod/Game Themed Redesign (2026)

   Style: clean white card, subtle orange accent bar, angular

   clip-path pennant category + dark angular read-more button.

   ============================================================ */



/* Left-side accent bar (appears on hover) */



/* --- Thumbnail --- */



/* --- Body --- */



/* === Category badge \e2\20ac\201d minimal pennant tag === */



/* --- Title --- */



/* --- Summary --- */



/* --- Bottom Row --- */



/* === Read More \e2\20ac\201d minimal angular mod button === */



/* --- Responsive --- */



/* \e2\201d\20ac\e2\201d\20ac Navbar Inline Search \e2\201d\20ac\e2\201d\20ac */



/* \e2\201d\20ac\e2\201d\20ac Profile Dropdown (Yeni Tasar\c4\b1m) \e2\201d\20ac\e2\201d\20ac */



/* Profile menu items */





/* Tema Toggle Butonu */

html[data-public-theme="turkmod"] .theme-toggle {

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: var(--radius-md);

    color: var(--on-primary);

    cursor: pointer;

    padding: 0.375rem 0.75rem;

    font-size: 1.1rem;

    transition: all var(--transition-fast);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



html[data-public-theme="turkmod"] .theme-toggle:hover {

    background: rgba(255, 255, 255, 0.1);

    border-color: rgba(255, 255, 255, 0.3);

    transform: scale(1.05);

}



html[data-public-theme="turkmod"] .theme-toggle:active {

    transform: scale(0.95);

}



/* Dark Tema Stilleri */



/* Minimal stable topic list cards: compatibility hooks for legacy public render tests. */



/* ============================================================

   Section 3: Topic Page Styles (from konu-style.css)

   ============================================================ */

/* Konu Sayfas\c4\b1 Stilleri */



/* Renk Sistemi - Anasayfa ile Tutarl\c4\b1 */

:root {

    --primary: var(--brand-accent);

    --primary-dark: var(--brand-accent-hover);

    --primary-light: var(--brand-accent-light);

    --danger: #ff4757;

}



/* Breadcrumb */

.breadcrumb {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    margin: 0;

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    flex-wrap: wrap;

}



.breadcrumb a {

    display: flex;

    align-items: center;

    gap: 4px;

    text-decoration: none;

    color: var(--primary);

    font-weight: 500;

    font-size: 0.8rem;

    transition: all 0.2s;

}



.breadcrumb a:hover {

    color: var(--primary-dark);

}



.breadcrumb a i {

    font-size: 0.85rem;

}



.breadcrumb i.bi-chevron-right {

    color: var(--text-dim);

    font-size: 0.7rem;

}



.breadcrumb span {

    color: var(--text-dim);

    font-weight: 400;

    font-size: 0.8rem;

}



/* Topic Layout */



body.topic-detail-page #main-content,

body:has(.topic-layout) #main-content {

    background: var(--bg);

    padding: 0 !important;

    max-width: 100% !important;

}



/* Topic Main */



/* ============================================

   TOPIC TITLE BAR - Minimal & Professional

   ============================================ */



/* Title Bar Layout */



/* Meta Information */



/* Badges Container */



/* Edit Link */



/* Favorite Form */



.topic-report-modal[hidden] {

    display: none;

}



.topic-report-modal {

    position: fixed;

    inset: 0;

    z-index: var(--z-tooltip);

    display: grid;

    place-items: center;

    padding: 1rem;

}



.topic-report-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(4, 9, 17, .68);

    backdrop-filter: blur(5px);

    animation: app-dialog-fade var(--duration-fast, 150ms) var(--ease-out, ease-out) both;

}



.topic-report-dialog {

    position: relative;

    z-index: 1;

    width: min(560px, 100%);

    max-height: min(720px, calc(100vh - 2rem));

    overflow: auto;

    display: grid;

    gap: 1rem;

    padding: 1.1rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--bg-white);

    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);

    animation: app-dialog-pop var(--duration-base, 180ms) var(--ease-out, ease-out) both;

}



@media (prefers-reduced-motion: reduce) {

    .topic-report-backdrop,

    .topic-report-dialog {

        animation: none;

    }

}



.topic-report-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

}



.topic-report-header h2 {

    display: flex;

    align-items: center;

    gap: .5rem;

    margin: 0;

}



.topic-report-close {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--bg);

    color: var(--text);

}



.topic-report-grid {

    display: grid;

    gap: .85rem;

}



.topic-report-grid label {

    display: grid;

    gap: .4rem;

    color: var(--text);

    font-weight: 600;

}



.topic-report-grid span {

    font-size: .86rem;

    color: var(--text-dim);

}



.topic-report-grid select,

.topic-report-grid textarea {

    width: 100%;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--bg-card);

    color: var(--text);

    padding: .75rem .85rem;

    resize: vertical;

}



.topic-report-submit {

    display: inline-flex;

    align-items: center;

    gap: .45rem;

    border: 0;

    border-radius: var(--radius-md);

    padding: .7rem 1rem;

    background: var(--danger);

    color: var(--on-primary);

    font-weight: 700;

}



.topic-report-feedback {

    margin-top: .75rem;

    font-weight: 600;

    font-size: .9rem;

}



.topic-report-feedback.is-success {

    color: var(--success);

}



.topic-report-login {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .65rem;

    color: var(--text-dim);

}



/* Legacy Support */



/* Hero Image */

.topic-hero {

    position: relative;

    width: 100%;

    aspect-ratio: 16/9;

    padding: 0;

    background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg) 100%);

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(139, 21, 56, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);

    border: 1px solid var(--border);

    transition: all var(--transition-base);

}



.topic-hero:hover {

    box-shadow: 0 8px 30px rgba(139, 21, 56, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);

    transform: translateY(-2px);

}



.topic-hero img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    background: var(--bg-white);

    transition: transform 0.3s ease;

}



.topic-hero:hover img {

    transform: scale(1.02);

}



/* Topic Section */

.topic-section {

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    padding: 12px;

    box-shadow: var(--shadow-sm);

}



.topic-section h2 {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 1rem;

    font-weight: 600;

    color: var(--text);

    margin: 0 0 10px 0;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--border);

}



.topic-section h2 i {

    color: var(--primary);

}



/* Topic Content */

.topic-content {

    color: var(--text);

    line-height: 1.8;

}



.topic-content p {

    margin-bottom: 16px;

}



.topic-content ul {

    margin: 12px 0;

    padding-left: 24px;

}



.topic-content li {

    margin-bottom: 8px;

    color: var(--text-dim);

}



/* Gallery */



/* ============================================

   \c4\b0\c3\2021ER\c4\b0K B\c4\b0LG\c4\b0LER\c4\b0 - Modern Tasar\c4\b1m

   ============================================ */



.topic-details {

    display: flex;

    flex-direction: column;

    gap: 0;

}



/* Table Variant - \c4\b0yile\c5\178tirilmi\c5\178 Responsive Tasar\c4\b1m */



/* Mobil i\c3\a7in tablo d\c3\bczeni */



/* ============================================

   \c4\b0ND\c4\b0RME BA\c4\9eLANTILARI - Belirgin Tema Uyumlu Modern Tasar\c4\b1m

   ============================================ */



.topic-downloads {

    background: var(--bg-white);

    border: 1px solid var(--border);

}



.download-grid,

.topic-dl-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.75rem;

    padding: 0.5rem;

}



.download-card,

.topic-dl-card {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 1rem 1.25rem;

    background: var(--bg-white);

    border: 2px solid var(--border);

    border-radius: 10px;

    text-decoration: none;

    color: inherit;

    transition: all 0.25s ease;

    position: relative;

    flex-wrap: nowrap;

    box-shadow: 0 2px 6px var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.02);

}



/* A\c3\a7\c4\b1k tema i\c3\a7in daha belirgin arka plan */



/* Koyu tema i\c3\a7in daha belirgin arka plan */



.download-card:hover,

.topic-dl-card:hover {

    background: var(--bg-hover);

    transform: translateX(4px);

    box-shadow: 0 4px 16px var(--shadow), 0 0 0 2px var(--primary);

}



.download-card::before,

.topic-dl-card::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 4px;

    background: var(--primary);

    opacity: 0;

    transition: opacity 0.25s ease;

}



.download-card:hover::before,

.topic-dl-card:hover::before {

    opacity: 1;

}



.download-icon,

.topic-dl-icon {

    width: 48px;

    height: 48px;

    background: var(--primary);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: all 0.25s ease;

}



.download-card:hover .download-icon,

.topic-dl-card:hover .topic-dl-icon {

    transform: scale(1.08) rotate(5deg);

    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 0, 212, 255), 0.3);

}



.download-icon i,

.topic-dl-icon i {

    font-size: 1.3rem;

    color: var(--on-primary);

}



.download-info,

.topic-dl-info {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

    overflow: hidden;

}



.download-info strong,

.topic-dl-info strong {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--text);

    line-height: 1.3;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: color 0.2s ease;

}



.download-card:hover .download-info strong,

.topic-dl-card:hover .topic-dl-info strong {

    color: var(--primary);

}



.download-info small,

.topic-dl-info small {

    font-size: 0.8rem;

    color: var(--text-dim);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.download-count,

.topic-dl-count {

    font-size: 0.75rem;

    color: var(--text-dim);

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px 8px;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: 5px;

    margin-top: 4px;

    flex-shrink: 0;

    font-weight: 500;

    transition: all var(--transition-fast);

}



.download-card:hover .download-count,

.topic-dl-card:hover .topic-dl-count {

    background: var(--bg-hover);

    border-color: var(--primary);

    color: var(--primary);

}



.download-count i,

.topic-dl-count i {

    color: var(--primary);

    font-size: 0.8rem;

}



.download-btn,

.topic-dl-button {

    padding: 10px 18px;

    background: var(--primary);

    border: none;

    border-radius: var(--radius-md);

    font-weight: 600;

    font-size: 0.875rem;

    color: var(--on-primary);

    white-space: nowrap;

    cursor: pointer;

    transition: all 0.25s ease;

    display: flex;

    align-items: center;

    gap: 6px;

    flex-shrink: 0;

    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 0, 212, 255), 0.2);

}



.download-btn:hover,

.topic-dl-card:hover .topic-dl-button {

    background: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow: 0 4px 14px rgba(var(--primary-rgb, 0, 212, 255), 0.35);

}



.download-btn i {

    font-size: 1rem;

}



/* Durum Stilleri - Tema Uyumlu */



/* Responsive - \c4\b0yile\c5\178tirilmi\c5\178 */

@media (max-width: 992px) {



    .download-card,

    .topic-dl-card {

        gap: 12px;

    }



    .download-btn,

    .topic-dl-button {

        padding: 8px 14px;

        font-size: 0.8rem;

    }

}



@media (max-width: 768px) {



    .download-card,

    .topic-dl-card {

        flex-wrap: wrap;

        gap: 12px;

        padding: 14px;

    }



    .download-info,

    .topic-dl-info {

        flex: 1 1 100%;

        max-width: 100%;

    }



    .download-btn,

    .topic-dl-button {

        width: 100%;

        justify-content: center;

    }



    .download-card:hover,

    .topic-dl-card:hover {

        transform: translateX(2px);

    }

}



@media (max-width: 480px) {



    .download-card,

    .topic-dl-card {

        padding: 12px;

    }



    .download-icon,

    .topic-dl-icon {

        width: 40px;

        height: 40px;

        border-radius: var(--radius-md);

    }



    .download-icon i,

    .topic-dl-icon i {

        font-size: 1.1rem;

    }



    .download-info strong,

    .topic-dl-info strong {

        font-size: 0.875rem;

    }



    .download-info small,

    .topic-dl-info small {

        font-size: 0.75rem;

    }



    .download-count,

    .topic-dl-count {

        font-size: 0.7rem;

        padding: 3px 6px;

    }



    .download-btn,

    .topic-dl-button {

        padding: 8px 12px;

        font-size: 0.8rem;

    }

}



/* Comments */



.topic-comments .ui-comment-form-wrap {

    display: flex;

    gap: 10px;

    margin-bottom: 16px;

    padding-bottom: 16px;

    border-bottom: 1px solid var(--border);

}



.topic-comments .ui-comment-form-avatar {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: var(--primary);

    color: var(--on-primary);

    display: grid;

    place-items: center;

    font-weight: 600;

    font-size: 1rem;

    flex-shrink: 0;

}



.topic-comments .ui-comment-form-body {

    flex: 1;

    min-width: 0;

}



.topic-comments .ui-comment-textarea {

    width: 100%;

    padding: 12px;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    color: var(--text);

    font-family: inherit;

    font-size: 0.9rem;

    resize: vertical;

    transition: all 0.2s;

}



.topic-comments .ui-comment-textarea:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);

}



.topic-comments .ui-comment-form-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin-top: 12px;

}



.topic-comments .ui-comment-btn-submit {

    padding: 10px 20px;

    background: var(--primary);

    border: none;

    border-radius: var(--radius-md);

    color: var(--on-primary);

    font-weight: 600;

    font-size: 0.9rem;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s;

}



.topic-comments .ui-comment-btn-submit:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}



.topic-comments .ui-comment-btn-submit:disabled {

    opacity: 0.55;

    cursor: not-allowed;

    transform: none;

}



.topic-comments .ui-comment-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.comment-item {

    display: flex;

    gap: 12px;

}



/* Widget Styles */



/* Left Sidebar */



/* Stat List */



/* Category Link */



/* Date Info */



/* Right Sidebar */



/* Author Card */



/* Related List */



/* Tags */

.tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.tag {

    padding: 6px 12px;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    font-size: 0.8rem;

    font-weight: 500;

    color: var(--text-dim);

    text-decoration: none;

    transition: all 0.2s;

}



.tag:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: var(--on-primary);

    transform: translateY(-2px);

}



/* Responsive */



@media (max-width: 992px) {



    .download-grid {

        grid-template-columns: 1fr;

    }

}



/* Mod Info List */



/* Topic detail sidebar refresh */



.topic-info-row {

    display: grid;

    grid-template-columns: 28px minmax(0, 0.72fr) minmax(0, 1fr);

    gap: 8px;

    align-items: center;

    min-height: 44px;

    padding: 10px;

    color: var(--text);

    background: var(--bg);

    border: 1px solid transparent;

    border-radius: var(--radius-md);

    text-decoration: none;

}



a.topic-info-row:hover {

    color: var(--primary);

    background: var(--bg-hover);

    border-color: var(--primary);

}



.topic-info-row i {

    display: grid;

    width: 28px;

    height: 28px;

    place-items: center;

    color: var(--primary);

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

}



.topic-info-row span {

    min-width: 0;

    color: var(--text-dim);

    font-size: 0.76rem;

    font-weight: 600;

}



.topic-info-row strong {

    min-width: 0;

    overflow: hidden;

    color: var(--text);

    font-size: 0.82rem;

    font-weight: 700;

    text-align: right;

    text-overflow: ellipsis;

    white-space: nowrap;

}



/* Community Stats */



/* ============================================

   KONU \c4\b0\c5\9eLEMLER\c4\b0 - Minimal Tasar\c4\b1m

   ============================================ */



/* ============================================================

   Section 4: Leaderboard Styles (from leaderboard.css)

   ============================================================ */

/**

 * Leaderboard Styles - Gaming/Esports Theme

 * Retro-futurism design with neon effects and glassmorphism

 */



/* ===== CSS Variables - Anasayfa ile Tutarl\c4\b1 ===== */

:root {

    --primary: var(--brand-accent);

    --primary-light: var(--brand-accent-light);

    --secondary: var(--brand-accent-hover);

    --accent: #ff4757;

    --accent-glow: #ff6b7a;

    --bg-dark: #0F0F23;

    --bg-darker: #050510;

    --surface: #1A1A2E;

    --surface-light: #252541;

    --text-primary: #F8FAFC;

    --text-secondary: #CBD5E1;

    --text-muted: #94A3B8;

    --success: #10B981;

    --warning: #F59E0B;

    --danger: #ff4757;

    --border: rgba(139, 21, 56, 0.2);

    --glow: rgba(139, 21, 56, 0.5);

}



/* ===== Global Animations ===== */



/* ===== CRT Scanline Effect ===== */



/* ===== Widget Styles ===== */



/* ===== Profile Widget Styles ===== */



/* ===== Full Page Styles ===== */



/* ===== Pagination ===== */



/* ===== Animations ===== */



/* ===== Medal Styles ===== */



/* ===== Responsive Design ===== */



/* ===== Dark Theme Support ===== */

@media (prefers-color-scheme: dark) {

    /* Already optimized for dark theme */

}





/* ===== Print Styles ===== */



/* Professional leaderboard refresh */



/* Compact leaderboard tuning */



/* ============================================================

   SECTION 2: Base Application Styles (app.css)

   ============================================================ */



:root {

    --bs-blue: #8b1538;

    --bs-indigo: #6610f2;

    --bs-purple: #6f42c1;

    --bs-pink: #d63384;

    --bs-red: #dc3545;

    --bs-orange: #fd7e14;

    --bs-yellow: #ffc107;

    --bs-green: #198754;

    --bs-teal: #20c997;

    --bs-cyan: #0dcaf0;

    --bs-black: #000;

    --bs-white: #fff;

    --bs-gray: #6c757d;

    --bs-gray-dark: #343a40;

    --bs-gray-100: #f8f9fa;

    --bs-gray-200: #e9ecef;

    --bs-gray-300: #dee2e6;

    --bs-gray-400: #ced4da;

    --bs-gray-500: #adb5bd;

    --bs-gray-600: #6c757d;

    --bs-gray-700: #495057;

    --bs-gray-800: #343a40;

    --bs-gray-900: #212529;

    --bs-primary: #8b1538;

    --bs-secondary: #6c757d;

    --bs-success: #198754;

    --bs-info: #0dcaf0;

    --bs-warning: #ffc107;

    --bs-danger: #dc3545;

    --bs-light: #f8f9fa;

    --bs-dark: #212529;

    --bs-primary-rgb: 13, 110, 253;

    --bs-secondary-rgb: 108, 117, 125;

    --bs-success-rgb: 25, 135, 84;

    --bs-info-rgb: 13, 202, 240;

    --bs-warning-rgb: 255, 193, 7;

    --bs-danger-rgb: 220, 53, 69;

    --bs-light-rgb: 248, 249, 250;

    --bs-dark-rgb: 33, 37, 41;

    --bs-primary-text-emphasis: rgb(5.2, 44, 101.2);

    --bs-secondary-text-emphasis: rgb(43.2, 46.8, 50);

    --bs-success-text-emphasis: rgb(10, 54, 33.6);

    --bs-info-text-emphasis: rgb(5.2, 80.8, 96);

    --bs-warning-text-emphasis: rgb(102, 77.2, 2.8);

    --bs-danger-text-emphasis: rgb(88, 21.2, 27.6);

    --bs-light-text-emphasis: #495057;

    --bs-dark-text-emphasis: #495057;

    --bs-primary-bg-subtle: rgb(206.6, 226, 254.6);

    --bs-secondary-bg-subtle: rgb(225.6, 227.4, 229);

    --bs-success-bg-subtle: rgb(209, 231, 220.8);

    --bs-info-bg-subtle: rgb(206.6, 244.4, 252);

    --bs-warning-bg-subtle: rgb(255, 242.6, 205.4);

    --bs-danger-bg-subtle: rgb(248, 214.6, 217.8);

    --bs-light-bg-subtle: rgb(251.5, 252, 252.5);

    --bs-dark-bg-subtle: #ced4da;

    --bs-primary-border-subtle: rgb(158.2, 197, 254.2);

    --bs-secondary-border-subtle: rgb(196.2, 199.8, 203);

    --bs-success-border-subtle: rgb(163, 207, 186.6);

    --bs-info-border-subtle: rgb(158.2, 233.8, 249);

    --bs-warning-border-subtle: rgb(255, 230.2, 155.8);

    --bs-danger-border-subtle: rgb(241, 174.2, 180.6);

    --bs-light-border-subtle: #e9ecef;

    --bs-dark-border-subtle: #adb5bd;

    --bs-white-rgb: 255, 255, 255;

    --bs-black-rgb: 0, 0, 0;

    --bs-font-sans-serif: "Roboto", sans-serif;

    --bs-font-monospace: "Roboto", sans-serif;

    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));

    --bs-body-font-family: var(--bs-font-sans-serif);

    --bs-body-font-size: 1rem;

    --bs-body-font-weight: 400;

    --bs-body-line-height: 1.5;

    --bs-body-color: #212529;

    --bs-body-color-rgb: 33, 37, 41;

    --bs-body-bg: #fff;

    --bs-body-bg-rgb: 255, 255, 255;

    --bs-emphasis-color: var(--text);

    --bs-emphasis-color-rgb: 0, 0, 0;

    --bs-secondary-color: rgba(33, 37, 41, .75);

    --bs-secondary-color-rgb: 33, 37, 41;

    --bs-secondary-bg: #e9ecef;

    --bs-secondary-bg-rgb: 233, 236, 239;

    --bs-tertiary-color: rgba(33, 37, 41, .5);

    --bs-tertiary-color-rgb: 33, 37, 41;

    --bs-tertiary-bg: #f8f9fa;

    --bs-tertiary-bg-rgb: 248, 249, 250;

    --bs-heading-color: inherit;

    --bs-link-color: #8b1538;

    --bs-link-color-rgb: 13, 110, 253;

    --bs-link-decoration: underline;

    --bs-link-hover-color: rgb(10.4, 88, 202.4);

    --bs-link-hover-color-rgb: 10, 88, 202;

    --bs-code-color: #d63384;

    --bs-highlight-color: #212529;

    --bs-highlight-bg: rgb(255, 242.6, 205.4);

    --bs-border-width: 1px;

    --bs-border-style: solid;

    --bs-border-color: #dee2e6;

    --bs-border-color-translucent: rgba(0, 0, 0, .175);

    --bs-border-radius: .375rem;

    --bs-border-radius-sm: .25rem;

    --bs-border-radius-lg: .5rem;

    --bs-border-radius-xl: 1rem;

    --bs-border-radius-xxl: 2rem;

    --bs-border-radius-2xl: var(--bs-border-radius-xxl);

    --bs-border-radius-pill: 50rem;

    --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);

    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);

    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);

    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);

    --bs-focus-ring-width: .25rem;

    --bs-focus-ring-opacity: .25;

    --bs-focus-ring-color: rgba(13, 110, 253, .25);

    --bs-form-valid-color: #198754;

    --bs-form-valid-border-color: #198754;

    --bs-form-invalid-color: #dc3545;

    --bs-form-invalid-border-color: #dc3545

}



*,

*:before,

*:after {

    box-sizing: border-box

}



@media(prefers-reduced-motion:no-preference) {

    :root {

        scroll-behavior: smooth

    }

}



body {

    margin: 0;

    font-family: var(--bs-body-font-family);

    font-size: var(--bs-body-font-size);

    font-weight: var(--bs-body-font-weight);

    line-height: var(--bs-body-line-height);

    color: var(--bs-body-color);

    text-align: var(--bs-body-text-align);

    background-color: var(--bs-body-bg);

    -webkit-text-size-adjust: 100%;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

}



h6,

.h6,

h5,

.h5,

h2,

.h2,

h1,

.h1 {

    margin-top: 0;

    margin-bottom: .5rem;

    font-weight: 400;

    line-height: 1.2;

    color: var(--bs-heading-color)

}



h1,

.h1 {

    font-size: calc(1.375rem + 1.5vw)

}



@media(min-width:1200px) {



    h1,

    .h1 {

        font-size: 2.5rem

    }

}



h2,

.h2 {

    font-size: calc(1.325rem + .9vw)

}



@media(min-width:1200px) {



    h2,

    .h2 {

        font-size: 2rem

    }

}



h5,

.h5 {

    font-size: 1.25rem

}



h6,

.h6 {

    font-size: 1rem

}



p {

    margin-top: 0;

    margin-bottom: 1rem

}





ul {

    padding-left: 2rem

}





ul {

    margin-top: 0;

    margin-bottom: 1rem

}





ul ul {

    margin-bottom: 0

}



b,

strong {

    font-weight: bolder

}



small,

.small {

    font-size: .875em

}



a {

    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));

    text-decoration: underline

}



a:hover {

    --bs-link-color-rgb: var(--bs-link-hover-color-rgb)

}



a:not([href]):not([class]),

a:not([href]):not([class]):hover {

    color: inherit;

    text-decoration: none

}





code {

    font-family: var(--bs-font-monospace);

    font-size: 1em

}



code {

    font-size: .875em;

    color: var(--bs-code-color);

    word-wrap: break-word

}



a>code {

    color: inherit

}



img,

svg {

    vertical-align: middle

}





tr {

    border-color: inherit;

    border-style: solid;

    border-width: 0

}



label {

    display: inline-block

}



button {

    border-radius: 0

}



button:focus:not(:focus-visible) {

    outline: 0

}



input,

button,

select,

textarea {

    margin: 0;

    font-family: inherit;

    font-size: inherit;

    line-height: inherit

}



button,

select {

    text-transform: none

}



[role=button] {

    cursor: pointer

}



select {

    word-wrap: normal

}



select:disabled {

    opacity: 1

}



[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {

    display: none !important

}



button,

[type=button],

[type=submit] {

    -webkit-appearance: button

}



button:not(:disabled),

[type=button]:not(:disabled),

[type=submit]:not(:disabled) {

    cursor: pointer

}



::-moz-focus-inner {

    padding: 0;

    border-style: none

}



textarea {

    resize: vertical

}



::-webkit-datetime-edit-fields-wrapper,

::-webkit-datetime-edit-text,

::-webkit-datetime-edit-minute,

::-webkit-datetime-edit-hour-field,

::-webkit-datetime-edit-day-field,

::-webkit-datetime-edit-month-field,

::-webkit-datetime-edit-year-field {

    padding: 0

}



::-webkit-inner-spin-button {

    height: auto

}



[type=search] {

    -webkit-appearance: textfield;

    outline-offset: -2px

}



[type=search]::-webkit-search-cancel-button {

    cursor: pointer;

    filter: grayscale(1)

}



::-webkit-search-decoration {

    -webkit-appearance: none

}



::-webkit-color-swatch-wrapper {

    padding: 0

}



::file-selector-button {

    font: inherit;

    -webkit-appearance: button

}



summary {

    display: list-item;

    cursor: pointer

}



progress {

    vertical-align: baseline

}



[hidden] {

    display: none !important

}



.container {

    --bs-gutter-x: 1.5rem;

    --bs-gutter-y: 0;

    width: 100%;

    padding-right: calc(var(--bs-gutter-x) * .5);

    padding-left: calc(var(--bs-gutter-x) * .5);

    margin-right: auto;

    margin-left: auto

}



@media(min-width:576px) {



    

    .container {

        max-width: 540px

    }

}



@media(min-width:768px) {



    

    .container {

        max-width: 720px

    }

}



@media(min-width:992px) {



    

    .container {

        max-width: 960px

    }

}



@media(min-width:1200px) {



    

    .container {

        max-width: 1140px

    }

}



@media(min-width:1400px) {



    

    .container {

        max-width: 1320px

    }

}



:root {

    --bs-breakpoint-xs: 0;

    --bs-breakpoint-sm: 576px;

    --bs-breakpoint-md: 768px;

    --bs-breakpoint-lg: 992px;

    --bs-breakpoint-xl: 1200px;

    --bs-breakpoint-xxl: 1400px

}



.row {

    --bs-gutter-x: 1.5rem;

    --bs-gutter-y: 0;

    display: flex;

    flex-wrap: wrap;

    margin-top: calc(-1 * var(--bs-gutter-y));

    margin-right: calc(-.5 * var(--bs-gutter-x));

    margin-left: calc(-.5 * var(--bs-gutter-x))

}



.row>* {

    flex-shrink: 0;

    width: 100%;

    max-width: 100%;

    padding-right: calc(var(--bs-gutter-x) * .5);

    padding-left: calc(var(--bs-gutter-x) * .5);

    margin-top: var(--bs-gutter-y)

}



.g-4 {

    --bs-gutter-x: 1.5rem

}



.g-4 {

    --bs-gutter-y: 1.5rem

}



@media(min-width:576px) {



    .col-sm-6 {

        flex: 0 0 auto;

        width: 50%

    }

}



@media(min-width:992px) {



    .col-lg-12 {

        flex: 0 0 auto;

        width: 100%

    }

}



.btn {

    --bs-btn-padding-x: .75rem;

    --bs-btn-padding-y: .375rem;

    --bs-btn-font-family: ;

    --bs-btn-font-size: 1rem;

    --bs-btn-font-weight: 400;

    --bs-btn-line-height: 1.5;

    --bs-btn-color: var(--bs-body-color);

    --bs-btn-bg: transparent;

    --bs-btn-border-width: var(--bs-border-width);

    --bs-btn-border-color: transparent;

    --bs-btn-border-radius: var(--bs-border-radius);

    --bs-btn-hover-border-color: transparent;

    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);

    --bs-btn-disabled-opacity: .65;

    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);

    display: inline-block;

    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);

    font-family: var(--bs-btn-font-family);

    font-size: var(--bs-btn-font-size);

    font-weight: var(--bs-btn-font-weight);

    line-height: var(--bs-btn-line-height);

    color: var(--bs-btn-color);

    text-align: center;

    text-decoration: none;

    vertical-align: middle;

    cursor: pointer;

    -webkit-user-select: none;

    user-select: none;

    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);

    border-radius: var(--bs-btn-border-radius);

    background-color: var(--bs-btn-bg);

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out

}



@media(prefers-reduced-motion:reduce) {

    .btn {

        transition: none

    }

}



.btn:hover {

    color: var(--bs-btn-hover-color);

    background-color: var(--bs-btn-hover-bg);

    border-color: var(--bs-btn-hover-border-color)

}



.btn:focus-visible {

    color: var(--bs-btn-hover-color);

    background-color: var(--bs-btn-hover-bg);

    border-color: var(--bs-btn-hover-border-color);

    outline: 0;

    box-shadow: var(--bs-btn-focus-box-shadow)

}





:not(.btn-check)+.btn:active,

.btn:first-child:active,

.btn.active,

.btn.show {

    color: var(--bs-btn-active-color);

    background-color: var(--bs-btn-active-bg);

    border-color: var(--bs-btn-active-border-color)

}





:not(.btn-check)+.btn:active:focus-visible,

.btn:first-child:active:focus-visible,

.btn.active:focus-visible,

.btn.show:focus-visible {

    box-shadow: var(--bs-btn-focus-box-shadow)

}



.btn:disabled,

.btn.disabled {

    color: var(--bs-btn-disabled-color);

    pointer-events: none;

    background-color: var(--bs-btn-disabled-bg);

    border-color: var(--bs-btn-disabled-border-color);

    opacity: var(--bs-btn-disabled-opacity)

}



.btn-primary {

    --bs-btn-color: var(--on-primary);

    --bs-btn-bg: var(--primary);

    --bs-btn-border-color: var(--primary);

    --bs-btn-hover-color: var(--on-primary);

    --bs-btn-hover-bg: var(--primary-dark);

    --bs-btn-hover-border-color: var(--primary-dark);

    --bs-btn-focus-shadow-rgb: 139, 21, 56;

    --bs-btn-active-color: var(--on-primary);

    --bs-btn-active-bg: var(--primary-dark);

    --bs-btn-active-border-color: var(--primary-dark);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

    --bs-btn-disabled-color: var(--on-primary);

    --bs-btn-disabled-bg: #8b1538;

    --bs-btn-disabled-border-color: #8b1538

}



.btn-light {

    --bs-btn-color: var(--text);

    --bs-btn-bg: #f8f9fa;

    --bs-btn-border-color: #f8f9fa;

    --bs-btn-hover-color: var(--text);

    --bs-btn-hover-bg: rgb(210.8, 211.65, 212.5);

    --bs-btn-hover-border-color: rgb(198.4, 199.2, 200);

    --bs-btn-focus-shadow-rgb: 211, 212, 213;

    --bs-btn-active-color: var(--text);

    --bs-btn-active-bg: rgb(198.4, 199.2, 200);

    --bs-btn-active-border-color: rgb(186, 186.75, 187.5);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

    --bs-btn-disabled-color: var(--text);

    --bs-btn-disabled-bg: #f8f9fa;

    --bs-btn-disabled-border-color: #f8f9fa

}



.btn-sm {

    --bs-btn-padding-y: .25rem;

    --bs-btn-padding-x: .5rem;

    --bs-btn-font-size: .875rem;

    --bs-btn-border-radius: var(--bs-border-radius-sm)

}



.collapse:not(.show) {

    display: none

}



.collapsing {

    height: 0;

    overflow: hidden;

    transition: height .35s ease

}



@media(prefers-reduced-motion:reduce) {

    .collapsing {

        transition: none

    }

}





.dropdown {

    position: relative

}



.dropdown-toggle {

    white-space: nowrap

}



.dropdown-toggle:after {

    display: inline-block;

    margin-left: .255em;

    vertical-align: .255em;

    content: "";

    border-top: .3em solid;

    border-right: .3em solid transparent;

    border-bottom: 0;

    border-left: .3em solid transparent

}



.dropdown-toggle:empty:after {

    margin-left: 0

}



.dropdown-menu {

    --bs-dropdown-zindex: 1000;

    --bs-dropdown-min-width: 10rem;

    --bs-dropdown-padding-x: 0;

    --bs-dropdown-padding-y: .5rem;

    --bs-dropdown-spacer: .125rem;

    --bs-dropdown-font-size: 1rem;

    --bs-dropdown-color: var(--bs-body-color);

    --bs-dropdown-bg: var(--bs-body-bg);

    --bs-dropdown-border-color: var(--bs-border-color-translucent);

    --bs-dropdown-border-radius: var(--bs-border-radius);

    --bs-dropdown-border-width: var(--bs-border-width);

    --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));

    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);

    --bs-dropdown-divider-margin-y: .5rem;

    --bs-dropdown-box-shadow: var(--bs-box-shadow);

    --bs-dropdown-link-color: var(--bs-body-color);

    --bs-dropdown-link-hover-color: var(--bs-body-color);

    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);

    --bs-dropdown-link-active-color: var(--on-primary);

    --bs-dropdown-link-active-bg: #8b1538;

    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);

    --bs-dropdown-item-padding-x: 1rem;

    --bs-dropdown-item-padding-y: .25rem;

    --bs-dropdown-header-color: #6c757d;

    --bs-dropdown-header-padding-x: 1rem;

    --bs-dropdown-header-padding-y: .5rem;

    position: absolute;

    z-index: var(--bs-dropdown-zindex);

    display: none;

    min-width: var(--bs-dropdown-min-width);

    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);

    margin: 0;

    font-size: var(--bs-dropdown-font-size);

    color: var(--bs-dropdown-color);

    text-align: left;

    list-style: none;

    background-color: var(--bs-dropdown-bg);

    background-clip: padding-box;

    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);

    border-radius: var(--bs-dropdown-border-radius)

}



.dropdown-menu-end {

    --bs-position: end

}



.dropdown-item {

    display: block;

    width: 100%;

    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);

    clear: both;

    font-weight: 400;

    color: var(--bs-dropdown-link-color);

    text-align: inherit;

    text-decoration: none;

    white-space: nowrap;

    background-color: transparent;

    border: 0;

    border-radius: var(--bs-dropdown-item-border-radius, 0)

}



.dropdown-item:hover,

.dropdown-item:focus {

    color: var(--bs-dropdown-link-hover-color);

    background-color: var(--bs-dropdown-link-hover-bg)

}



.dropdown-item.active,

.dropdown-item:active {

    color: var(--bs-dropdown-link-active-color);

    text-decoration: none;

    background-color: var(--bs-dropdown-link-active-bg)

}



.dropdown-item.disabled,

.dropdown-item:disabled {

    color: var(--bs-dropdown-link-disabled-color);

    pointer-events: none;

    background-color: transparent

}



.dropdown-menu.show {

    display: block

}



.nav {

    --bs-nav-link-padding-x: 1rem;

    --bs-nav-link-padding-y: .5rem;

    --bs-nav-link-font-weight: ;

    --bs-nav-link-color: var(--bs-link-color);

    --bs-nav-link-hover-color: var(--bs-link-hover-color);

    --bs-nav-link-disabled-color: var(--bs-secondary-color);

    display: flex;

    flex-wrap: wrap;

    padding-left: 0;

    margin-bottom: 0;

    list-style: none

}



.nav-link {

    display: block;

    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);

    font-size: var(--bs-nav-link-font-size);

    font-weight: var(--bs-nav-link-font-weight);

    color: var(--bs-nav-link-color);

    text-decoration: none;

    background: none;

    border: 0;

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out

}



@media(prefers-reduced-motion:reduce) {

    .nav-link {

        transition: none

    }

}



.nav-link:hover,

.nav-link:focus {

    color: var(--bs-nav-link-hover-color)

}



.nav-link:focus-visible {

    outline: 0;

    box-shadow: 0 0 0 .25rem #8b153840

}



.nav-link.disabled,

.nav-link:disabled {

    color: var(--bs-nav-link-disabled-color);

    pointer-events: none;

    cursor: default

}



.navbar {

    --bs-navbar-padding-x: 0;

    --bs-navbar-padding-y: .5rem;

    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), .65);

    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), .8);

    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), .3);

    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);

    --bs-navbar-brand-padding-y: .3125rem;

    --bs-navbar-brand-margin-end: 1rem;

    --bs-navbar-brand-font-size: 1.25rem;

    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);

    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);

    --bs-navbar-nav-link-padding-x: .5rem;

    --bs-navbar-toggler-padding-y: .25rem;

    --bs-navbar-toggler-padding-x: .75rem;

    --bs-navbar-toggler-font-size: 1.25rem;

    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), .15);

    --bs-navbar-toggler-border-radius: var(--bs-border-radius);

    --bs-navbar-toggler-focus-width: .25rem;

    --bs-navbar-toggler-transition: box-shadow .15s ease-in-out;

    position: relative;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)

}



.navbar>.container {

    display: flex;

    flex-wrap: inherit;

    align-items: center;

    justify-content: space-between

}



.navbar-nav {

    --bs-nav-link-padding-x: 0;

    --bs-nav-link-padding-y: .5rem;

    --bs-nav-link-font-weight: ;

    --bs-nav-link-color: var(--bs-navbar-color);

    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);

    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);

    display: flex;

    flex-direction: column;

    padding-left: 0;

    margin-bottom: 0;

    list-style: none

}



.navbar-nav .nav-link.active,

.navbar-nav .nav-link.show {

    color: var(--bs-navbar-active-color)

}



.navbar-nav .dropdown-menu {

    position: static

}



.navbar-collapse {

    flex-grow: 1;

    flex-basis: 100%;

    align-items: center

}



.navbar-toggler {

    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);

    font-size: var(--bs-navbar-toggler-font-size);

    line-height: 1;

    color: var(--bs-navbar-color);

    background-color: transparent;

    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);

    border-radius: var(--bs-navbar-toggler-border-radius);

    transition: var(--bs-navbar-toggler-transition)

}



@media(prefers-reduced-motion:reduce) {

    .navbar-toggler {

        transition: none

    }

}



.navbar-toggler:hover {

    text-decoration: none

}



.navbar-toggler:focus {

    text-decoration: none;

    outline: 0;

    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width)

}



.navbar-nav-scroll {

    max-height: var(--bs-scroll-height, 75vh);

    overflow-y: auto

}



@media(min-width:992px) {

    .navbar-expand-lg {

        flex-wrap: nowrap;

        justify-content: flex-start

    }



    .navbar-expand-lg .navbar-nav {

        flex-direction: row

    }



    .navbar-expand-lg .navbar-nav .dropdown-menu {

        position: absolute

    }



    .navbar-expand-lg .navbar-nav .nav-link {

        padding-right: var(--bs-navbar-nav-link-padding-x);

        padding-left: var(--bs-navbar-nav-link-padding-x)

    }



    .navbar-expand-lg .navbar-nav-scroll {

        overflow: visible

    }



    .navbar-expand-lg .navbar-collapse {

        display: flex !important;

        flex-basis: auto

    }



    .navbar-expand-lg .navbar-toggler {

        display: none

    }



    .navbar-expand-lg .offcanvas {

        position: static;

        z-index: auto;

        flex-grow: 1;

        width: auto !important;

        height: auto !important;

        visibility: visible !important;

        background-color: transparent !important;

        border: 0 !important;

        transform: none !important;

        transition: none

    }



    .navbar-expand-lg .offcanvas .offcanvas-header {

        display: none

    }



    .navbar-expand-lg .offcanvas .offcanvas-body {

        display: flex;

        flex-grow: 0;

        padding: 0;

        overflow-y: visible

    }

}



.card {

    --bs-card-spacer-y: 1rem;

    --bs-card-spacer-x: 1rem;

    --bs-card-title-spacer-y: .5rem;

    --bs-card-title-color: ;

    --bs-card-subtitle-color: ;

    --bs-card-border-width: var(--bs-border-width);

    --bs-card-border-color: var(--bs-border-color-translucent);

    --bs-card-border-radius: var(--bs-border-radius);

    --bs-card-box-shadow: ;

    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));

    --bs-card-cap-padding-y: .5rem;

    --bs-card-cap-padding-x: 1rem;

    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), .03);

    --bs-card-cap-color: ;

    --bs-card-height: ;

    --bs-card-color: ;

    --bs-card-bg: var(--bs-body-bg);

    --bs-card-img-overlay-padding: 1rem;

    --bs-card-group-margin: .75rem;

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    height: var(--bs-card-height);

    color: var(--bs-body-color);

    word-wrap: break-word;

    background-color: var(--bs-card-bg);

    background-clip: border-box;

    border: var(--bs-card-border-width) solid var(--bs-card-border-color);

    border-radius: var(--bs-card-border-radius)

}



.card-body {

    flex: 1 1 auto;

    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);

    color: var(--bs-card-color)

}



.card-title {

    margin-bottom: var(--bs-card-title-spacer-y);

    color: var(--bs-card-title-color)

}



.card-header {

    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);

    margin-bottom: 0;

    color: var(--bs-card-cap-color);

    background-color: var(--bs-card-cap-bg);

    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color)

}



.card-header:first-child {

    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0

}



.breadcrumb {

    --bs-breadcrumb-padding-x: 0;

    --bs-breadcrumb-padding-y: 0;

    --bs-breadcrumb-margin-bottom: 1rem;

    --bs-breadcrumb-bg: ;

    --bs-breadcrumb-border-radius: ;

    --bs-breadcrumb-divider-color: var(--bs-secondary-color);

    --bs-breadcrumb-item-padding-x: .5rem;

    --bs-breadcrumb-item-active-color: var(--bs-secondary-color);

    display: flex;

    flex-wrap: wrap;

    padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);

    margin-bottom: var(--bs-breadcrumb-margin-bottom);

    font-size: var(--bs-breadcrumb-font-size);

    list-style: none;

    background-color: var(--bs-breadcrumb-bg);

    border-radius: var(--bs-breadcrumb-border-radius)

}



.badge {

    --bs-badge-padding-x: .65em;

    --bs-badge-padding-y: .35em;

    --bs-badge-font-size: .75em;

    --bs-badge-font-weight: 600;

    --bs-badge-color: var(--on-primary);

    --bs-badge-border-radius: var(--bs-border-radius);

    display: inline-block;

    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);

    font-size: var(--bs-badge-font-size);

    font-weight: var(--bs-badge-font-weight);

    line-height: 1;

    color: var(--bs-badge-color);

    text-align: center;

    white-space: nowrap;

    vertical-align: baseline;

    border-radius: var(--bs-badge-border-radius)

}



.badge:empty {

    display: none

}



.btn .badge {

    position: relative;

    top: -1px

}



.alert {

    --bs-alert-bg: transparent;

    --bs-alert-padding-x: 1rem;

    --bs-alert-padding-y: 1rem;

    --bs-alert-margin-bottom: 1rem;

    --bs-alert-color: inherit;

    --bs-alert-border-color: transparent;

    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);

    --bs-alert-border-radius: var(--bs-border-radius);

    --bs-alert-link-color: inherit;

    position: relative;

    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);

    margin-bottom: var(--bs-alert-margin-bottom);

    color: var(--bs-alert-color);

    background-color: var(--bs-alert-bg);

    border: var(--bs-alert-border);

    border-radius: var(--bs-alert-border-radius)

}



.progress {

    --bs-progress-height: 1rem;

    --bs-progress-font-size: .75rem;

    --bs-progress-bg: var(--bs-secondary-bg);

    --bs-progress-border-radius: var(--bs-border-radius);

    --bs-progress-box-shadow: var(--bs-box-shadow-inset);

    --bs-progress-bar-color: var(--on-primary);

    --bs-progress-bar-bg: #8b1538;

    --bs-progress-bar-transition: width .6s ease;

    display: flex;

    height: var(--bs-progress-height);

    overflow: hidden;

    font-size: var(--bs-progress-font-size);

    background-color: var(--bs-progress-bg);

    border-radius: var(--bs-progress-border-radius)

}



.btn-close {

    --bs-btn-close-color: var(--text);

    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");

    --bs-btn-close-opacity: .5;

    --bs-btn-close-hover-opacity: .75;

    --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);

    --bs-btn-close-focus-opacity: 1;

    --bs-btn-close-disabled-opacity: .25;

    box-sizing: content-box;

    width: 1em;

    height: 1em;

    padding: .25em;

    color: var(--bs-btn-close-color);

    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;

    filter: var(--bs-btn-close-filter);

    border: 0;

    border-radius: .375rem;

    opacity: var(--bs-btn-close-opacity)

}



.btn-close:hover {

    color: var(--bs-btn-close-color);

    text-decoration: none;

    opacity: var(--bs-btn-close-hover-opacity)

}



.btn-close:focus {

    outline: 0;

    box-shadow: var(--bs-btn-close-focus-shadow);

    opacity: var(--bs-btn-close-focus-opacity)

}



.btn-close:disabled,

.btn-close.disabled {

    pointer-events: none;

    -webkit-user-select: none;

    user-select: none;

    opacity: var(--bs-btn-close-disabled-opacity)

}



:root {

    --bs-btn-close-filter:

}



.tooltip {

    --bs-tooltip-zindex: 1080;

    --bs-tooltip-max-width: 200px;

    --bs-tooltip-padding-x: .5rem;

    --bs-tooltip-padding-y: .25rem;

    --bs-tooltip-margin: ;

    --bs-tooltip-font-size: .875rem;

    --bs-tooltip-color: var(--bs-body-bg);

    --bs-tooltip-bg: var(--bs-emphasis-color);

    --bs-tooltip-border-radius: var(--bs-border-radius);

    --bs-tooltip-opacity: .9;

    --bs-tooltip-arrow-width: .8rem;

    --bs-tooltip-arrow-height: .4rem;

    z-index: var(--bs-tooltip-zindex);

    display: block;

    margin: var(--bs-tooltip-margin);

    font-family: var(--bs-font-sans-serif);

    font-style: normal;

    font-weight: 400;

    line-height: 1.5;

    text-align: left;

    text-align: start;

    text-decoration: none;

    text-shadow: none;

    text-transform: none;

    letter-spacing: normal;

    word-break: normal;

    white-space: normal;

    word-spacing: normal;

    line-break: auto;

    font-size: var(--bs-tooltip-font-size);

    word-wrap: break-word;

    opacity: 0

}



.tooltip.show {

    opacity: var(--bs-tooltip-opacity)

}



:root {

    --bs-carousel-indicator-active-bg: #fff;

    --bs-carousel-caption-color: var(--on-primary);

    --bs-carousel-control-icon-filter:

}



.offcanvas {

    --bs-offcanvas-zindex: 1045;

    --bs-offcanvas-width: 400px;

    --bs-offcanvas-height: 30vh;

    --bs-offcanvas-padding-x: 1rem;

    --bs-offcanvas-padding-y: 1rem;

    --bs-offcanvas-color: var(--bs-body-color);

    --bs-offcanvas-bg: var(--bs-body-bg);

    --bs-offcanvas-border-width: var(--bs-border-width);

    --bs-offcanvas-border-color: var(--bs-border-color-translucent);

    --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);

    --bs-offcanvas-transition: transform .3s ease-in-out;

    --bs-offcanvas-title-line-height: 1.5

}



.offcanvas {

    position: fixed;

    bottom: 0;

    z-index: var(--bs-offcanvas-zindex);

    display: flex;

    flex-direction: column;

    max-width: 100%;

    color: var(--bs-offcanvas-color);

    visibility: hidden;

    background-color: var(--bs-offcanvas-bg);

    background-clip: padding-box;

    outline: 0;

    transition: var(--bs-offcanvas-transition)

}



@media(prefers-reduced-motion:reduce) {

    .offcanvas {

        transition: none

    }

}



.offcanvas.offcanvas-start {

    top: 0;

    left: 0;

    width: var(--bs-offcanvas-width);

    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);

    transform: translate(-100%)

}





.offcanvas.show:not(.hiding) {

    transform: none

}





.offcanvas.show {

    visibility: visible

}



.offcanvas-header {

    display: flex;

    align-items: center;

    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)

}



.offcanvas-header .btn-close {

    padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);

    margin-top: calc(-.5 * var(--bs-offcanvas-padding-y));

    margin-right: calc(-.5 * var(--bs-offcanvas-padding-x));

    margin-bottom: calc(-.5 * var(--bs-offcanvas-padding-y));

    margin-left: auto

}



.offcanvas-body {

    flex-grow: 1;

    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);

    overflow-y: auto

}



.placeholder {

    display: inline-block;

    min-height: 1em;

    vertical-align: middle;

    cursor: wait;

    background-color: currentcolor;

    opacity: .5

}



.placeholder.btn:before {

    display: inline-block;

    content: ""

}



.fixed-top {

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    z-index: 1030

}



.vstack {

    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

    align-self: stretch

}



.text-truncate {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap

}



.d-block {

    display: block !important

}



.d-grid {

    display: grid !important

}



.d-flex {

    display: flex !important

}



.d-none {

    display: none !important

}



.shadow {

    box-shadow: var(--bs-box-shadow) !important

}



.position-relative {

    position: relative !important

}



.border-0 {

    border: 0 !important

}



.border-top {

    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important

}



.border-bottom {

    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important

}



.flex-column {

    flex-direction: column !important

}



.flex-wrap {

    flex-wrap: wrap !important

}



.justify-content-between {

    justify-content: space-between !important

}



.align-items-center {

    align-items: center !important

}



.mx-0 {

    margin-right: 0 !important;

    margin-left: 0 !important

}



.mt-2 {

    margin-top: .5rem !important

}



.mt-3 {

    margin-top: 1rem !important

}



.me-2 {

    margin-right: .5rem !important

}



.me-auto {

    margin-right: auto !important

}



.mb-0 {

    margin-bottom: 0 !important

}



.mb-2 {

    margin-bottom: .5rem !important

}



.mb-3 {

    margin-bottom: 1rem !important

}



.ms-2 {

    margin-left: .5rem !important

}



.ms-auto {

    margin-left: auto !important

}



.p-0 {

    padding: 0 !important

}



.p-2 {

    padding: .5rem !important

}



.p-3 {

    padding: 1rem !important

}



.px-2 {

    padding-right: .5rem !important;

    padding-left: .5rem !important

}



.pb-0 {

    padding-bottom: 0 !important

}



.gap-1 {

    gap: .25rem !important

}



.gap-2 {

    gap: .5rem !important

}



.gap-3 {

    gap: 1rem !important

}



.gap-4 {

    gap: 1.5rem !important

}



.fs-6 {

    font-size: 1rem !important

}



.fw-semibold {

    font-weight: 500 !important

}



.fw-bold {

    font-weight: 600 !important

}



.lh-1 {

    line-height: 1 !important

}



.text-center {

    text-align: center !important

}



.text-decoration-none {

    text-decoration: none !important

}



.text-secondary {

    --bs-text-opacity: 1;

    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important

}



.text-muted {

    --bs-text-opacity: 1;

    color: var(--bs-secondary-color) !important

}



.text-reset {

    --bs-text-opacity: 1;

    color: inherit !important

}



.bg-transparent {

    --bs-bg-opacity: 1;

    background-color: transparent !important

}



.rounded {

    border-radius: var(--bs-border-radius) !important

}



.rounded-circle {

    border-radius: 50% !important

}



@media(min-width:768px) {



    .d-md-flex {

        display: flex !important

    }

}



@media(min-width:992px) {



    .d-lg-none {

        display: none !important

    }



    .px-lg-0 {

        padding-right: 0 !important;

        padding-left: 0 !important

    }

}



:root {

    --topic-body-bg: #eef1f6;

    --topic-surface: #ffffff;

    --topic-text: #202938;

    --topic-muted: #687386;

    --topic-border: #d8dee8;

    --topic-accent: var(--brand-accent, #8b1538);

    --topic-accent-strong: var(--brand-accent-hover, #6d1029);

    --topic-dark: #1d2633;

    --topic-dark-soft: #273345;

    --topic-success: #198754;

    --topic-warning: #f59f00;

    --topic-danger: #dc3545

}



body {

    background: var(--topic-body-bg);

    color: var(--topic-text)

}



.topic-nav-search {

    display: flex;

    width: min(420px, 100%);

    gap: .4rem

}



.topic-card {

    background: var(--topic-surface);

    border: 1px solid var(--topic-border);

    border-radius: .5rem;

    box-shadow: 0 12px 30px #1620330f

}



.topic-hero {

    min-height: 340px;

    display: grid;

    align-items: end;

    margin-bottom: 1.25rem;

    padding: 2rem;

    color: var(--on-primary);

    background: linear-gradient(90deg, #161f2cf5, #161f2cad, #161f2c59), var(--topic-hero-image);

    background-size: cover;

    background-position: center;

    border-radius: .55rem;

    box-shadow: 0 16px 40px #131c2a38

}



.topic-hero h1,

.topic-hero .h1 {

    margin: 0;

    font-size: clamp(2.1rem, 5vw, 4rem);

    font-weight: 800;

    letter-spacing: 0

}



.topic-hero p {

    max-width: 660px;

    margin: .75rem 0 1.25rem;

    color: var(--on-primary)d1;

    font-size: 1.08rem

}



.topic-info-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: .65rem

}



.topic-info-grid div {

    padding: .85rem;

    background: #f4f6fa;

    border: 1px solid #e1e7f0;

    border-radius: .4rem

}



.topic-info-grid span,

.topic-info-grid small,

.topic-info-grid .small {

    display: block

}



.topic-info-grid span {

    color: var(--topic-dark);

    font-size: 1.35rem;

    font-weight: 800

}



.topic-info-grid small,

.topic-info-grid .small {

    color: var(--topic-muted)

}



.topic-info-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: .5rem

}



.comment-item {

    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    gap: .85rem;

    padding: 1rem 0;

    border-bottom: 1px solid #edf0f5;

    opacity: 0;

    animation: comment-slide-in .4s ease forwards

}



.comment-item:last-child {

    border-bottom: 0

}



@keyframes comment-slide-in {

    0% {

        opacity: 0;

        transform: translateY(12px)

    }



    to {

        opacity: 1;

        transform: translateY(0)

    }

}



@media(max-width:991.98px) {

    .topic-nav-search {

        width: 100%

    }

}



@media(max-width:575.98px) {



    .topic-hero {

        min-height: 300px;

        padding: 1.2rem

    }



    

    .topic-info-grid {

        grid-template-columns: 1fr

    }



    .comment-item {

        grid-template-columns: 1fr;

        gap: .5rem

    }

}



/* Topic redesign */



.topbar {

    position: sticky;

    top: 0;

    z-index: 1020;

    padding-block: .65rem;

    background: var(--bg-white) !important;

    border-bottom: 1px solid #dce3ed;

    box-shadow: 0 12px 32px #1d263314

}



.search {

    display: flex;

    gap: .5rem;

    min-width: min(390px, 100%)

}



.search .btn {

    height: 42px;

    border-radius: .45rem;

    font-weight: 850

}



.user-menu {

    position: relative

}



.user-toggle {

    display: flex;

    align-items: center;

    gap: .55rem;

    min-height: 42px;

    padding: .35rem .65rem .35rem .4rem;

    border: 1px solid #dce3ed;

    border-radius: .45rem;

    color: #172033;

    background: #f7f9fc;

    font-size: .9rem;

    font-weight: 850

}



.user-dropdown {

    min-width: 190px;

    padding: .45rem;

    border: 1px solid #dce3ed;

    border-radius: .5rem;

    box-shadow: 0 18px 38px #1d263329

}



.user-dropdown .dropdown-item {

    border-radius: .38rem;

    color: #657386;

    font-size: .9rem;

    font-weight: 700

}



.user-dropdown .dropdown-item:hover {

    color: #172033;

    background: #f7f9fc

}



.topic-detail-content {

    color: #4b5a6e;

    line-height: 1.75

}



@media(max-width:991.98px) {

    .search {

        min-width: 0;

        width: 100%

    }

}



/* Admin redesign compact public cards */



/* ============================================================

   SECTION 3: Additional Styles (style-new.css)

   ============================================================ */

/* Theme System - Light & Dark Mode Support */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* Dark Theme (Default) */

:root {

    --bg: #0f1419;

    --bg-white: #1a1f2e;

    --bg-hover: #252d3d;

    --primary: var(--brand-accent);

    --primary-dark: var(--brand-accent-hover);

    --primary-light: var(--brand-accent-light);

    --text: #f0f4f8;

    --text-dim: #8b95a5;

    --text-light: #5a6b7a;

    --border: #2a3544;

    --success: #00d084;

    --info: #0099ff;

    --warning: var(--brand-accent);

    --danger: #ff4757;

    --shadow: rgba(0, 0, 0, 0.4);

    --on-primary: #000000;

}



/* Light Theme */



body {

    font-family: 'Roboto', sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.6;

}



.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 20px;

}



/* ============================================

   MINIMAL TOPBAR - Basit ve Temiz Tasar\c4\b1m

   ============================================ */



/* Topbar Killer - T\c3\bcm class-based topbar'lar\c4\b1 gizle */

.topbar,

*[class*="topbar"] {

    display: none !important;

}



.header {

    background: var(--public-header-bg, var(--bg-white));

    border-bottom: 1px solid var(--public-header-border, var(--border));

    padding: 16px 0;

    position: sticky;

    top: 0;

    z-index: var(--z-sticky);

    box-shadow: var(--shadow-sm);

}



.header .container {

    display: flex;

    align-items: center;

    gap: 40px;

}



.nav {

    display: flex;

    gap: 4px;

}



.nav a {

    padding: 8px 16px;

    text-decoration: none;

    color: var(--public-header-link, var(--text-dim));

    font-weight: 500;

    font-size: 0.9rem;

    border-radius: var(--radius-md);

    transition: all 0.2s;

}



.nav a:hover {

    color: var(--text);

    background: var(--bg-hover);

}



.nav a.active {

    color: var(--primary);

    background: var(--primary-light);

}



.header-right {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: auto;

}



/* Theme Toggle Button */

.theme-toggle {

    width: 38px;

    height: 38px;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    color: var(--text);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s;

    font-size: 1.1rem;

}



.theme-toggle:hover {

    background: var(--bg-hover);

    border-color: var(--primary);

    color: var(--primary);

    transform: translateY(-1px);

}



.theme-toggle i {

    transition: transform 0.3s ease;

}



.theme-toggle:active i {

    transform: rotate(180deg);

}



.search,

.topic-nav-search {

    position: relative;

    display: flex;

    align-items: center;

    background: rgba(128, 138, 150, 0.08);

    border-radius: 12px;

    border: 1px solid rgba(128, 138, 150, 0.15);

    transition: all var(--transition-base);

}



.search:hover,

.topic-nav-search:hover {

    background: rgba(128, 138, 150, 0.12);

    border-color: rgba(128, 138, 150, 0.3);

}



.search:focus-within,

.topic-nav-search:focus-within {

    background: var(--bg-white);

    border-color: var(--primary);

    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.15);

}



.search i,

.topic-nav-search i {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-dim);

    font-size: 1.1rem;

    transition: all var(--transition-base);

    pointer-events: none;

    z-index: 2;

}



.search:focus-within i,

.topic-nav-search:focus-within i {

    color: var(--primary);

}



.search input,

.topic-nav-search input {

    height: 44px;

    padding: 0 16px 0 42px;

    background: transparent;

    border: none;

    color: var(--text);

    font-size: 0.95rem;

    font-weight: 400;

    width: 240px;

    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.search input:focus,

.topic-nav-search input:focus {

    outline: none;

    width: 320px;

}



/* ============================================

   MINIMAL TOPBAR - Basit ve Temiz Tasar\c4\b1m

   ============================================ */





.header {

    background: var(--public-header-bg, var(--bg-white));

    border-bottom: 1px solid var(--public-header-border, var(--border));

    padding: 16px 0;

    position: sticky;

    top: 0;

    z-index: var(--z-sticky);

    box-shadow: var(--shadow-sm);

}



.header .container {

    display: flex;

    align-items: center;

    gap: 40px;

}



.nav {

    display: flex;

    gap: 4px;

}



.nav a {

    padding: 8px 16px;

    text-decoration: none;

    color: var(--public-header-link, var(--text-dim));

    font-weight: 500;

    font-size: 0.9rem;

    border-radius: var(--radius-md);

    transition: all 0.2s;

}



.nav a:hover {

    color: var(--text);

    background: var(--bg-hover);

}



.nav a.active {

    color: var(--primary);

    background: var(--primary-light);

}



.header-right {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: auto;

}



/* Theme Toggle Button */

.theme-toggle {

    width: 38px;

    height: 38px;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    color: var(--text);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s;

    font-size: 1.1rem;

}



.theme-toggle:hover {

    background: var(--bg-hover);

    border-color: var(--primary);

    color: var(--primary);

    transform: translateY(-1px);

}



.theme-toggle i {

    transition: transform 0.3s ease;

}



.theme-toggle:active i {

    transform: rotate(180deg);

}



.search,

.topic-nav-search {

    position: relative;

    display: flex;

    align-items: center;

    background: rgba(128, 138, 150, 0.08);

    border-radius: 12px;

    border: 1px solid rgba(128, 138, 150, 0.15);

    transition: all var(--transition-base);

}



.search:hover,

.topic-nav-search:hover {

    background: rgba(128, 138, 150, 0.12);

    border-color: rgba(128, 138, 150, 0.3);

}



.search:focus-within,

.topic-nav-search:focus-within {

    background: var(--bg-white);

    border-color: var(--primary);

    box-shadow: 0 4px 20px var(--primary-alpha-15);

}



.search i,

.topic-nav-search i {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-dim);

    font-size: 1.1rem;

    transition: all var(--transition-base);

    pointer-events: none;

    z-index: 2;

}



.search:focus-within i,

.topic-nav-search:focus-within i {

    color: var(--primary);

}



.search input,

.topic-nav-search input {

    height: 44px;

    padding: 0 16px 0 42px;

    background: transparent;

    border: none;

    color: var(--text);

    font-size: 0.95rem;

    font-weight: 400;

    width: 240px;

    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.search input:focus,

.topic-nav-search input:focus {

    outline: none;

    width: 320px;

}



.user-menu {

    display: flex;

    align-items: center;

    gap: 8px;

}



/* ============================================

   AVATAR VE PROFIL MENU \e2\20ac\201d Premium Tasar\c4\b1m

   ============================================ */



/* Breadcrumb */

.breadcrumb {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    margin: 0;

    background: var(--bg-white);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    flex-wrap: wrap;

}



.breadcrumb a {

    display: flex;

    align-items: center;

    gap: 4px;

    text-decoration: none;

    color: var(--primary);

    font-weight: 500;

    font-size: 0.8rem;

    transition: all 0.2s;

}



.breadcrumb a:hover {

    color: var(--primary-dark);

}



.breadcrumb a i {

    font-size: 0.85rem;

}



.breadcrumb i.bi-chevron-right {

    color: var(--text-dim);

    font-size: 0.7rem;

}



.breadcrumb span {

    color: var(--text-dim);

    font-weight: 400;

    font-size: 0.8rem;

}



/* 3 Column Layout */

.layout {

    display: grid;

    grid-template-columns: 260px 1fr 300px;

    gap: 24px;

}



/* Sidebars - Tam Stabil Yap\c4\b1 */

.sidebar {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.sidebar-left {

    align-self: flex-start;

}



.sidebar-right {

    align-self: flex-start;

}



/* Widget Header */



/* Widget Toggle Button */



/* Widget Body */



/* Game Select */



/* Category Tree */



/* Subcategories */



/* Filters */



/* Tags */

.tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.tag {

    padding: 6px 12px;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    font-size: 0.8rem;

    font-weight: 500;

    color: var(--text-dim);

    cursor: pointer;

    transition: all 0.2s;

}



.tag:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: var(--on-primary);

}



/* Stats */

.stats {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



/* Comments List */



.comment-item {

    display: flex;

    gap: 10px;

}



/* Activity List */



/* Popular List */



/* CTA Widget */



/* Main Content */

.content {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



/* Search Header */



/* Category Header */



/* Filter Bar */



/* Mod Grid */

.topic-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}



.badge {

    position: absolute;

    top: 10px;

    right: 10px;

    padding: 4px 10px;

    background: rgba(255, 255, 255, 0.95);

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    font-size: 0.7rem;

    font-weight: 700;

    color: var(--text);

    text-transform: uppercase;

    letter-spacing: 1px;

    box-shadow: 0 2px 8px var(--shadow);

}



/* Pagination */



/* Auth Pages */



.link {

    color: var(--primary);

    text-decoration: none;

    font-weight: 500;

    font-size: 0.875rem;

    transition: all 0.2s;

}



.link:hover {

    color: var(--primary-dark);

    text-decoration: underline;

}



/* Footer */

.footer {

    margin-top: 64px;

    padding: 32px 0;

    border-top: 1px solid var(--border);

    background: var(--bg-white);

}



.footer p {

    color: var(--text-dim);

    font-size: 0.9rem;

}



/* Responsive */

@media (max-width: 1200px) {

    .layout {

        grid-template-columns: 240px 1fr 280px;

        gap: 20px;

    }



    .topic-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 992px) {

    .layout {

        grid-template-columns: 1fr;

    }



    .sidebar-left,

    .sidebar-right {

        display: none;

    }



    .topic-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .nav {

        display: none;

    }



    .topic-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 480px) {



    .search,

    .topic-nav-search {

        display: none;

    }



    .header .container {

        gap: 12px;

        padding-inline: 12px;

    }



    .header-right {

        gap: 6px;

        flex-shrink: 0;

    }

}



/* Mobile Navigation Menu */

.nav.open {

    display: flex;

    flex-direction: column;

    position: fixed;

    top: 70px;

    left: 0;

    right: 0;

    background: var(--bg-white);

    border-bottom: 1px solid var(--border);

    box-shadow: var(--shadow-md);

    padding: 16px;

    gap: 8px;

    z-index: 99;

}



/* ============================================

   MODERN MINIMAL FOOTER

   ============================================ */



.footer {

    background: var(--public-footer-bg, var(--bg-white));

    border-top: 1px solid var(--public-footer-border, var(--border));

    margin-top: 3rem;

    padding: 2.5rem 0 1.5rem;

}



@media (max-width: 768px) {

    .site-footer {

        padding: 0.75rem 0;

    }

}



/* ============================================

   RESPONSIVE DESIGN - Modern Topbar & Header

   ============================================ */



/* Smooth Transitions */



/* Refined category sidebar and topic list cards */



/* Polished revision: calmer list cards and reliable category dropdown */



/* Theme-aware sidebar categories, list cards and live stats */



/* Rebuilt home category atlas */



/* Category page standardization */



/* ============================================

   SIDEBAR CATEGORY TREE THEME LAYER

   ============================================ */



/* ============================================================

   SECTION 4: Profile Styles (profil-style.css)

   ============================================================ */

/* ============================================

   PROFILE COMMAND CENTER THEME LAYER

   Shared profile design for private and public profile pages.

   ============================================ */



/* ============================================

   2 S\c3\153TUNLU LAYOUT

   ============================================ */



/* Tek S\c3\bctun Layout (Di\c4\178er Sekmeler) */



/* Responsive */



/* ============================================

   KOLEKSIYON S\c4\b0STEM\c4\b0

   ============================================ */



.profile-report-status {

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: .28rem .65rem;

    border-radius: 999px;

    font-size: .78rem;

    font-weight: 800;

    white-space: nowrap;

}



/* Hero */



/* Stats */



/* Tabs */



/* Sections and grids */



/* Topic and comment rows */



/* Public topic cards */





/* Activity */



/* Forms */



/* Empty states */



/* Bootstrap buttons inside profile pages */



/* Alerts */



/* Public profile presentation */



/* Reversible revamp: topic actions widget */



/* Responsive */



/* ============================================================

   SECTION 5: Topbar Fixes (topbar-fix.css)

   ============================================================ */

/* ============================================

   TOPBAR FIX \e2\20ac\201d T\c3\bcm sayfalarda standart topbar

   En son y\c3\bcklenen CSS dosyas\c4\b1 \e2\20ac\201d !important ile kesin ge\c3\a7erli

   ============================================ */



/* Eski/gereksiz public topbar elemanlar\c4\b1n\c4\b1 gizle */

.topbar,

.topbar *,

div[class*="topbar"]:not(.header):not(.header *) {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    height: 0 !important;

    max-height: 0 !important;

    overflow: hidden !important;

    position: absolute !important;

    top: -9999px !important;

    left: -9999px !important;

    pointer-events: none !important;

    margin: 0 !important;

    padding: 0 !important;

}





/* ============================================

   HEADER \e2\20ac\201d Standart yap\c4\b1 (anasayfadan al\c4\b1nd\c4\b1)

   ============================================ */

.header {

    position: sticky !important;

    top: 0 !important;

    z-index: 100 !important;

    background: var(--bg-white) !important;

    border-bottom: 1px solid var(--border) !important;

    padding: 16px 0 !important;

    box-shadow: var(--shadow-sm) !important;

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

}



.header .container {

    display: flex !important;

    align-items: center !important;

    gap: 40px !important;

    flex-wrap: nowrap !important;

    max-width: 1400px !important;

    margin: 0 auto !important;

    padding: 0 20px !important;

}



/* Brand */



/* Nav linkleri */

.header .nav {

    display: flex !important;

    gap: 4px !important;

    flex-shrink: 1 !important;

}



.header .nav a {

    padding: 8px 16px !important;

    text-decoration: none !important;

    color: var(--text-dim) !important;

    font-weight: 500 !important;

    font-size: 0.9rem !important;

    border-radius: var(--radius-md) !important;

    transition: all 0.2s !important;

}



.header .nav a:hover {

    color: var(--text) !important;

    background: var(--bg-hover) !important;

}



.header .nav a.active {

    color: var(--primary) !important;

    background: var(--primary-light) !important;

}



/* Sa\c4\178 taraf */

.header-right {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin-left: auto !important;

    flex-wrap: nowrap !important;

    flex-shrink: 0 !important;

}



/* ============================================

   ARAMA KUTUSU \e2\20ac\201d Yeni premium tasar\c4\b1m

   ============================================ */

.header .search,

.header .topic-nav-search,

.search,

.topic-nav-search {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    background: rgba(128, 138, 150, 0.08) !important;

    border-radius: 12px !important;

    border: 1px solid rgba(128, 138, 150, 0.15) !important;

    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

    width: 200px !important;

    gap: 0 !important;

}



.header .topic-nav-search:focus-within,

.search:focus-within,

.topic-nav-search:focus-within {

    width: 260px !important;

}



.header .search:hover,

.header .topic-nav-search:hover,

.search:hover,

.topic-nav-search:hover {

    background: rgba(128, 138, 150, 0.13) !important;

    border-color: rgba(128, 138, 150, 0.3) !important;

}



.header .search:focus-within,

.header .topic-nav-search:focus-within,

.search:focus-within,

.topic-nav-search:focus-within {

    background: var(--bg-white) !important;

    border-color: var(--primary) !important;

    box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 25%, transparent) !important;

}



/* Arama ikonu */

.header .search i,

.header .topic-nav-search i,

.search i,

.topic-nav-search i {

    position: absolute !important;

    left: 14px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    color: var(--text-dim) !important;

    font-size: 1rem !important;

    pointer-events: none !important;

    z-index: 2 !important;

    transition: color 0.3s ease !important;

    /* redesign.css btn overrides s\c4\b1f\c4\b1rla */

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

    width: auto !important;

    height: auto !important;

    border-radius: 0 !important;

    box-shadow: none !important;

}



.header .search:focus-within i,

.header .topic-nav-search:focus-within i,

.search:focus-within i,

.topic-nav-search:focus-within i {

    color: var(--primary) !important;

}



/* Arama input */

.header .search input,

.header .topic-nav-search input,

.search input,

.topic-nav-search input {

    height: 42px !important;

    padding: 0 16px 0 40px !important;

    background: transparent !important;

    border: none !important;

    outline: none !important;

    color: var(--text) !important;

    font-size: 0.9rem !important;

    font-weight: 400 !important;

    width: 100% !important;

    flex: 1 !important;

}



.header .search input:focus,

.header .topic-nav-search input:focus,

.search input:focus,

.topic-nav-search input:focus {

    width: 100% !important;

    outline: none !important;

    box-shadow: none !important;

    background: transparent !important;

}



.header .search input::placeholder,

.header .topic-nav-search input::placeholder,

.search input::placeholder,

.topic-nav-search input::placeholder {

    color: var(--text-dim) !important;

}



/* redesign.css .topic-nav-search .form-control override'\c4\b1n\c4\b1 s\c4\b1f\c4\b1rla */



/* ============================================

   AVATAR \e2\20ac\201d M\c3\bckemmel ortalama

   ============================================ */



/* redesign.css'deki pill/row yap\c4\b1s\c4\b1n\c4\b1 komple s\c4\b1f\c4\b1rla */



/* Avatar i\c3\a7indeki ikon \e2\20ac\201d KES\c4\b0N ortalama */



/* redesign.css'deki .topic-profile-avatar gizle (eski yap\c4\b1) */



/* Hover efekti */



/* ============================================

   PROF\c4\b0L MEN\c3\153S\c3\153

   ============================================ */



/* ============================================

   THEME TOGGLE

   ============================================ */

.header .theme-toggle,

.theme-toggle {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 38px !important;

    height: 38px !important;

    background: var(--bg) !important;

    border: 1px solid var(--border) !important;

    border-radius: var(--radius-md) !important;

    color: var(--text) !important;

    cursor: pointer !important;

    transition: all 0.2s !important;

    font-size: 1.1rem !important;

    flex-shrink: 0 !important;

}



.header .theme-toggle:hover,

.theme-toggle:hover {

    background: var(--bg-hover) !important;

    border-color: var(--primary) !important;

    color: var(--primary) !important;

    transform: translateY(-1px) !important;

}



/* ============================================

   UPLOAD & AUTH BUTONLAR\c4\b0

   ============================================ */



/* ============================================

   MOB\c4\b0L RESPONSIVE

   ============================================ */

@media (max-width: 768px) {

    .header .container {

        gap: 12px !important;

    }



    .header-right {

        gap: 6px !important;

    }



    .header .nav {

        display: none !important;

    }

}



@media (max-width: 480px) {



    .header .search,

    .header .topic-nav-search,

    .search,

    .topic-nav-search {

        display: none !important;

    }

}



/* ============================================================

   SECTION 6: Mod Card Redesign (topic-card--alt.css)

   ============================================================ */

/* ============================================================

   MOD CARD TOPIC LIST PREMIUM THEME LAYER

   Theme-aware, dense list cards for topic/mod feeds.

   ============================================================ */



.topic-grid[data-topic-list-container],

.topic-grid:has(> .feed-card.topic-list-card) {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 14px !important;

    align-items: stretch !important;

}



/* ============================================================

   SECTION 7: Footer Styles (footer-style.css)

   ============================================================ */

/* ============================================

   MODERN FOOTER - Stabil ve Temiz Tasarim

   ============================================ */



.footer {

    background: var(--public-footer-bg, var(--bg-white)) !important;

    border-top: 1px solid var(--public-footer-border, var(--border)) !important;

    margin-top: 3rem !important;

    padding: 2.5rem 0 1.5rem !important;

}



/* Footer Brand */



/* Footer Social */



/* Footer Columns */



/* Footer Newsletter */



/* Footer Bottom */



/* Responsive */



@media (max-width: 768px) {

    .footer {

        padding: 1.5rem 0 1rem !important;

    }

}



/* ============================================================

   SECTION 8: Enhanced Comments (enhanced-comments.css)

   ============================================================ */

/**

 * Enhanced Comments System - Styles

 * Modern, responsive comment UI with reactions and markdown

 */



/* ============================================

   Comment Reactions

   ============================================ */



/* ============================================

   Reaction Picker

   ============================================ */



/* ============================================

   Markdown Toolbar

   ============================================ */



/* ============================================

   Edit History Modal

   ============================================ */



/* ============================================

   Markdown Preview

   ============================================ */



/* ============================================

   Mention Highlight

   ============================================ */



/* ============================================

   Responsive

   ============================================ */



/* ============================================================

   SECTION 9: Responsive Mobile (responsive-mobile.css)

   ============================================================ */

/* ============================================

   RESPONSIVE MOBILE IMPROVEMENTS

   ============================================ */



/* Mobile Navigation Toggle */



@media (max-width: 768px) {



    .sidebar-left,

    .sidebar-right {

        position: fixed;

        top: 70px;

        bottom: 0;

        width: 280px;

        background: var(--bg-white);

        transform: translateX(-100%);

        transition: transform 0.3s ease;

        overflow-y: auto;

        z-index: 999;

        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);

    }



    .sidebar-left.active {

        transform: translateX(0);

    }



    .sidebar-right {

        right: 0;

        left: auto;

        transform: translateX(100%);

    }



    .sidebar-right.active {

        transform: translateX(0);

    }



    /* Grid d\c3\bczeni d\c3\bczeltmeleri */

    .topic-grid {

        grid-template-columns: 1fr !important;

        gap: 16px !important;

    }

}



@media (max-width: 480px) {



    /* K\c3\bc\c3\a7\c3\bck ekranlarda ta\c5\178ma \c3\b6nleme */

    .container {

        padding: 0 12px;

    }



    /* --- 1. Breadcrumb: topbar ile i\c3\a7 i\c3\a7e girme d\c3\bczeltmesi --- */



    .header .container {

        gap: 12px;

    }



    .sidebar-left,

    .sidebar-right {

        width: 90%;

        max-width: 320px;

    }

}



/* Search autocomplete */



[data-topic-list-container].is-loading {

    opacity: 0.58;

    pointer-events: none;

    transition: opacity 0.2s ease;

}



/* Tablet g\c3\b6r\c3\bcn\c3\bcm\c3\bc */

@media (min-width: 769px) and (max-width: 1024px) {

    .topic-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }



    .container {

        max-width: 100%;

        padding: 0 24px;

    }

}



/* Touch feedback */

@media (hover: none) and (pointer: coarse) {



    

    .btn {

        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);

    }



    .btn:active {

        transform: scale(0.95);

    }

}



/* ============================================================

   SECTION 10: Download Loading (download-loading.css)

   ============================================================ */

/**

 * Download Button Loading State

 * \c4\b0ndirme butonlar\c4\b1na spinner ve loading state ekler

 */



.topic-dl-card {

    position: relative;

    transition: all var(--transition-base);

}



.topic-dl-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



/* Loading Spinner */

.topic-dl-spinner {

    display: inline-block;

    width: 16px;

    height: 16px;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-top-color: var(--on-primary);

    border-radius: 50%;

    animation: spin 0.6s linear infinite;

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



.topic-dl-card:not(.is-counting) .topic-dl-spinner {

    display: none;

}



/* Ready State Icon */



/* Hover Effects */

.topic-dl-card:not(.is-counting):hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



/* Mobile Responsive */

@media (max-width: 768px) {

    .topic-dl-grid {

        grid-template-columns: 1fr !important;

    }



    .topic-dl-card {

        padding: 1rem;

    }



    .topic-dl-info strong {

        font-size: 0.9rem;

    }

}



/* ============================================================

   HOTFIX: Breadcrumb / Sidebar / Hero / Konu \c4\b0\c5\178lemleri

   ============================================================ */



/* --- 1. Breadcrumb: topbar ile i\c3\a7 i\c3\a7e girme d\c3\bczeltmesi --- */



/* Topbar aktif oldu\c4\178unda extra bo\c5\178luk */



/* Breadcrumb container margin d\c3\bczeltmesi */



/* Sidebar panel i\c3\a7erikleri de scroll olmas\c4\b1n */



/* --- 3. Topic Hero Image - Ortalama ve Tasar\c4\b1msal \c4\b0yile\c5\178tirme --- */



/* --- 4. Konu \c4\b0\c5\178lemleri Widget Tasar\c4\b1msal D\c3\bczenleme --- */



/* Konu \c4\b0\c5\178lemleri Butonlar\c4\b1 - Yeniden Tasar\c4\b1m */



/* Favori aktif durum */



/* Raporla butonu \c3\b6zel renk */



/* D\c3\bczenle butonu \c3\b6zel renk */



/* Responsive: K\c3\bc\c3\a7\c3\bck ekranlarda hero image */





/* ============================================================

   WIDGET TASARIM G\c3\153NCELLEMELER\c4\b0 V2 (Minimal & White Badges)

   ============================================================ */



/* --- WIDGET BA\c5\9eLIK \c4\b0KONLARI (BEYAZ BADGE) --- */



/* 1. \c4\b0statistikler Widget (Dashboard 2x2 Grid) */



/* 2. Konu Bilgileri Widget (List View) */



/* 3. \c4\b0lgili \c4\b0\c3\a7erikler Widget */



/* 4. Pop\c3\bcler \c4\b0\c3\a7erikler Widget (Kutu Tasar\c4\b1m\c4\b1) */



/* 5. Kategoriler Widget (Minimal Tasar\c4\b1m) */



/* Sub-categories styling */



/* ============================================================

   ANA \c4\b0\c3\2021ER\c4\b0K TASARIM B\c3\153T\c3\153NL\c3\153\c4\9e\c3\153 (Topic Detail & Komponentleri)

   ============================================================ */



/* Ana \c4\b0\c3\a7erik Kutusu (Topic Detail Panel) */



/* Ana Ba\c5\178l\c4\b1k Tasar\c4\b1m\c4\b1 */



/* Teknik Detaylar Tablosu */



/* Carousel (Resim ve Videolar) - Inline Stilleri Ezme */

.topic-carousel {

    background: var(--bg-white) !important;

    border: 1px solid var(--border) !important;

    border-radius: 14px !important;

    padding: 1.25rem !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;

    margin-bottom: 2rem !important;

    margin-top: 2rem !important;

}



.topic-carousel-main {

    border-radius: 10px !important;

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;

}



.ui-comment-thumb {

    border-radius: var(--radius-md) !important;

    border: 2px solid transparent !important;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

    opacity: 0.6 !important;

}



.ui-comment-thumb:hover {

    opacity: 1 !important;

    transform: translateY(-2px) !important;

}



.ui-comment-thumb.active {

    opacity: 1 !important;

    border-color: var(--primary) !important;

    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent) !important;

}



/* Etiketler (Tags) */



/* Yorumlar B\c3\b6l\c3\bcm\c3\bc (ui-comment-container) */



.ui-comment-header h2 {

    font-size: 1.65rem !important;

    font-weight: 850 !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    margin-bottom: 1.5rem !important;

}



.ui-comment-header h2 i {

    background: var(--primary) !important;

    color: var(--on-primary) !important;

    width: 36px !important;

    height: 36px !important;

    display: inline-grid !important;

    place-items: center !important;

    border-radius: 10px !important;

    font-size: 1.1rem !important;

    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent) !important;

}



/* 7. Konu Detay: Breadcrumb Bo\c5\178luk Ayar\c4\b1 */



/* Professional auth popup and pages */



/* Professional shared content widgets: Pop\c3\bcler \c4\b0\c3\a7erikler + Benzer \c4\b0\c3\a7erikler */



/* Public design coherence pass: theme-aware, shared component polish */

:root {

    --ui-radius: var(--radius-md, .5rem);

    --ui-radius-sm: var(--radius-sm, .375rem);

    --ui-surface: var(--bg-white);

    --ui-surface-muted: color-mix(in srgb, var(--bg-white) 86%, var(--bg) 14%);

    --ui-surface-hover: color-mix(in srgb, var(--bg-white) 78%, var(--bg-hover) 22%);

    --ui-border: color-mix(in srgb, var(--border) 86%, var(--primary) 14%);

    --ui-border-strong: color-mix(in srgb, var(--border) 64%, var(--primary) 36%);

    --ui-shadow: 0 12px 28px color-mix(in srgb, var(--shadow) 18%, transparent);

    --ui-shadow-hover: 0 18px 38px color-mix(in srgb, var(--shadow) 24%, transparent);

    --ui-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);

}



body {

    background:

        linear-gradient(180deg, color-mix(in srgb, var(--primary) 3%, transparent), transparent 280px),

        var(--bg) !important;

    color: var(--text) !important;

}



::selection {

    color: var(--on-primary);

    background: var(--primary);

}





.profile-report-status {

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    color: var(--primary) !important;

    background: color-mix(in srgb, var(--primary) 10%, var(--ui-surface)) !important;

    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)) !important;

    border-radius: 999px !important;

    font-size: .76rem !important;

    font-weight: 850 !important;

}



:where(.btn,

    .btn-primary,

    .ui-comment-btn-submit) {

    border-radius: var(--ui-radius) !important;

    font-weight: 700 !important;

    letter-spacing: 0 !important;

    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast) !important;

}



:where(.btn-primary,

    .ui-comment-btn-submit) {

    color: var(--on-primary) !important;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;

    border-color: var(--primary) !important;

    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 24%, transparent) !important;

}



:where(

    .ui-comment-btn-cancel) {

    color: var(--text) !important;

    background: var(--ui-surface-muted) !important;

    border: 1px solid var(--ui-border) !important;

}



:where(

    .search input) {

    color: var(--text) !important;

    background: var(--ui-surface-muted) !important;

    border: 1px solid var(--ui-border) !important;

    border-radius: var(--ui-radius) !important;

    box-shadow: none !important;

}



:where(input, textarea)::placeholder {

    color: color-mix(in srgb, var(--text-dim) 78%, transparent) !important;

}



.comment-item {

    border-color: var(--ui-border) !important;

}



@media (max-width: 767.98px) {

    .container {

        padding-inline: 14px !important;

    }

}



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

    }

}



/* Public full-page consistency pass: auth, upload/edit, topic, appeals, error states */

:where(

    .topic-section,

    .topic-carousel,

    .topic-report-dialog,

    .topic-report-login,

    .topic-dl-card,

    .ui-comment-form-wrap,

    .ui-comment-login-prompt) {

    background: var(--ui-surface) !important;

    border: 1px solid var(--ui-border) !important;

    border-radius: var(--ui-radius) !important;

    box-shadow: var(--ui-shadow) !important;

    color: var(--text) !important;

}



:where(

    .topic-report-header,

    .topic-report-grid,

    .ui-comment-header) {

    border-color: var(--ui-border) !important;

}



:where(

    .topic-report-header,

    .topic-report-grid,

    .ui-comment-login-prompt,

    .topic-dl-info) {

    background: var(--ui-surface-muted) !important;

    color: var(--text) !important;

}



:where(

    .topic-section h2,

    .topic-report-header h2,

    .ui-comment-header h2,

    .topic-dl-card strong) {

    color: var(--text) !important;

    font-weight: 850 !important;

    letter-spacing: 0 !important;

}



:where(

    .topic-report-login,

    .topic-dl-count) {

    color: var(--text-dim) !important;

}



:where(

    .topic-dl-icon,

    .ui-comment-form-avatar,

    .topic-report-header h2 i) {

    color: var(--on-primary) !important;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;

    border-radius: var(--ui-radius) !important;

    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent) !important;

}



:where(

    .topic-report-close,

    .topic-carousel-nav,

    .ui-comment-thumb) {

    border: 1px solid var(--ui-border) !important;

    border-radius: var(--ui-radius) !important;

    background: var(--ui-surface-muted) !important;

    color: var(--text) !important;

    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast) !important;

}



:where(

    .topic-report-close:hover,

    .topic-carousel-nav:hover,

    .ui-comment-thumb:hover) {

    border-color: var(--ui-border-strong) !important;

    background: color-mix(in srgb, var(--primary) 9%, var(--ui-surface)) !important;

    color: var(--primary) !important;

    transform: translateY(-1px) !important;

}



:where(

    .topic-report-submit,

    .topic-dl-button) {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: .5rem !important;

    min-height: 2.5rem !important;

    border-radius: var(--ui-radius) !important;

    font-weight: 850 !important;

    letter-spacing: 0 !important;

    text-decoration: none !important;

}



:where(

    .topic-report-submit,

    .topic-dl-button) {

    color: var(--on-primary) !important;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;

    border: 1px solid var(--primary) !important;

    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 24%, transparent) !important;

}



:where(

    .topic-report-submit:hover,

    .topic-dl-card:hover .topic-dl-button) {

    transform: translateY(-1px) !important;

    box-shadow: var(--ui-shadow-hover) !important;

}



:where(

    .topic-report-form select,

    .topic-report-form textarea,

    .ui-comment-textarea) {

    color: var(--text) !important;

    background: var(--ui-surface-muted) !important;

    border-color: var(--ui-border) !important;

    border-radius: var(--ui-radius) !important;

}



:where(

    .topic-report-form select:focus,

    .topic-report-form textarea:focus,

    .ui-comment-textarea:focus) {

    background: var(--ui-surface) !important;

    border-color: var(--primary) !important;

    box-shadow: var(--ui-ring) !important;

}



:where(.alert,

    .topic-report-feedback) {

    border-radius: var(--ui-radius) !important;

    border: 1px solid var(--ui-border) !important;

    box-shadow: none !important;

}



:where(

    .topic-report-feedback.is-success) {

    color: var(--success) !important;

    background: color-mix(in srgb, var(--success) 12%, var(--ui-surface)) !important;

    border-color: color-mix(in srgb, var(--success) 30%, var(--ui-border)) !important;

}



.topic-report-modal[hidden] {

    display: none !important;

}



.topic-report-backdrop {

    background: color-mix(in srgb, #0f172a 66%, transparent) !important;

    backdrop-filter: blur(8px) !important;

}



.topic-carousel-main,

.topic-carousel img,

.ui-comment-thumb,

.topic-hero img,

.topic-dl-card {

    border-radius: var(--ui-radius) !important;

}



@media (max-width: 767.98px) {

    :where(

        .topic-section,

        .topic-carousel,

        .topic-report-dialog) {

        padding: 14px !important;

    }



    .topic-report-dialog {

        width: calc(100vw - 24px) !important;

    }

}



/* Public profile published topics: minimal, readable cards */



/* Public profile shell: shares the private profile two-column sidebar layout. */



/* Public profile section header: clean editorial toolbar */



/* ============================================================

   CATEGORY ATLAS WIDGET V2

   Shared production sidebar style for homepage and topic sidebars.

   ============================================================ */



/* Homepage category widget: Clean Accordion */



/* Homepage category widget: final simple tree override */



/* Homepage category widget: simple tree polish */



/* Category atlas nested navigation v3 */



/* User-side UX refinements */





.topic-dl-trust {

    display: flex;

    align-items: center;

    gap: .5rem;

    color: var(--text-dim, #6b7280);

    font-size: .9rem;

    line-height: 1.45;

}



.topic-dl-trust {

    margin-top: .75rem;

    padding: .7rem .85rem;

    border: 1px solid color-mix(in srgb, var(--success, #16a34a) 24%, var(--border, #d8dee8));

    border-radius: 8px;

    background: color-mix(in srgb, var(--success, #16a34a) 7%, var(--surface, #fff));

}



.topic-dl-trust i {

    color: var(--success, #16a34a);

}



.topic-report-dialog :focus-visible {

    outline: 3px solid color-mix(in srgb, var(--primary, #8b1538) 32%, transparent);

    outline-offset: 3px;

}



/* User-side UX refinements */



.topic-carousel-counter {

    position: absolute;

    right: 12px;

    bottom: 12px;

    z-index: 5;

    padding: 6px 10px;

    border: 1px solid rgba(255,255,255,.32);

    border-radius: 999px;

    background: rgba(15, 23, 42, .72);

    color: #fff;

    font-size: .82rem;

    font-weight: 700;

    backdrop-filter: blur(10px);

}



.topic-carousel-main {

    position: relative;

}



@media (max-width: 640px) {

    .header .container {

        gap: 8px;

        min-height: 56px;

    }



    .header-right {

        gap: 6px;

    }



    

    .theme-toggle,

    .notif-toggle {

        min-width: 40px;

        width: 40px;

        height: 40px;

        padding: 0 !important;

        justify-content: center;

    }



    .topic-nav-search {

        flex-basis: 100%;

        max-width: none;

        min-width: 0;

    }

}



/* Topic detail gallery reliability fixes */



.topic-carousel {

    max-width: 100% !important;

    overflow: hidden !important;

}



.topic-carousel-main {

    position: relative !important;

    width: 100% !important;

    overflow: hidden !important;

    aspect-ratio: 16 / 9 !important;

    min-height: 220px !important;

    background: color-mix(in srgb, var(--ui-surface, #fff) 82%, #000 18%) !important;

}



.topic-carousel-content {

    width: 100% !important;

    height: 100% !important;

}





.topic-carousel-content > img,

.topic-carousel-content > video {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    object-fit: contain !important;

    border: 0 !important;

}



.topic-carousel-nav {

    position: absolute !important;

    top: 50% !important;

    z-index: 6 !important;

    display: inline-grid !important;

    place-items: center !important;

    width: 42px !important;

    height: 42px !important;

    padding: 0 !important;

    border-color: color-mix(in srgb, #fff 36%, transparent) !important;

    background: rgba(15, 23, 42, .66) !important;

    color: #fff !important;

    box-shadow: 0 10px 22px rgba(15, 23, 42, .22) !important;

    transform: translateY(-50%) !important;

}



.topic-carousel-nav-prev {

    left: 12px !important;

}



.topic-carousel-nav-next {

    right: 12px !important;

}



.topic-carousel-nav:hover,

.topic-carousel-nav:focus-visible {

    border-color: color-mix(in srgb, #fff 72%, transparent) !important;

    background: var(--primary, #8b1538) !important;

    color: var(--on-primary, #fff) !important;

    transform: translateY(-50%) scale(1.04) !important;

}



.topic-carousel-thumbs {

    display: flex !important;

    gap: 10px !important;

    max-width: 100% !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    padding: 12px 2px 2px !important;

    scrollbar-width: thin !important;

}



.ui-comment-thumb {

    display: grid !important;

    place-items: center !important;

    flex: 0 0 88px !important;

    width: 88px !important;

    height: 62px !important;

    min-width: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    cursor: pointer !important;

}



.ui-comment-thumb img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

}



.ui-comment-thumb.active,

.ui-comment-thumb[aria-current="true"] {

    opacity: 1 !important;

    border-color: var(--primary, #8b1538) !important;

    box-shadow: 0 6px 14px color-mix(in srgb, var(--primary, #8b1538) 28%, transparent) !important;

}



@media (max-width: 575.98px) {

    .topic-carousel {

        padding: .75rem !important;

    }



    .topic-carousel-main {

        min-height: 0 !important;

        aspect-ratio: 4 / 3 !important;

    }



    .topic-carousel-nav {

        width: 34px !important;

        height: 34px !important;

    }



    .topic-carousel-nav-prev {

        left: 8px !important;

    }



    .topic-carousel-nav-next {

        right: 8px !important;

    }



    .ui-comment-thumb {

        flex-basis: 74px !important;

        width: 74px !important;

        height: 54px !important;

    }

}

/* Topic action widget visibility guard */



/* Hard isolation for topic detail action widget */



/* Topic actions content fix: keep the sidebar widget populated and readable. */



/* Homepage category widget final skin: Clean Accordion */



/* --- engine.css --- */

/* \11e\90\11e\b4\11e\b0\11e\bf\d1\201a\11e\b8\d1\20ac\11e\be\11e\b2\11e\b0\11e\bd \11e\b8 \11e\b4\11e\be\d1\20ac\11e\b0\11e\b1\11e\be\d1\201a\11e\b0\11e\bd DLETM.RU */

select:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus{color:#29292e;background-color:#fff;border-color:#8b1538;outline:0;-webkit-box-shadow:none;box-shadow:none}

.tagcloud a{background:transparent;border:1px solid transparent;border-color:#e1e4e6;color:#676a79;outline:0;padding:.4rem .6rem;font-size:.8125rem;border-radius:.2rem;display:inline-block;font-weight:400;line-height:1.5;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

.tagcloud a:hover{background:#e1e4e6;border-color:#e1e4e6;color:#14191e}

.required{color:red}

.btn.bi:before{line-height:1}

.hide{background-color:#f0f0f0;padding:5px;color:#4c6d0f;margin:0 0 1em}

.hide a{text-decoration:underline}

.hide a:hover{text-decoration:none}

.sort{list-style:none;padding:0;margin:0}

.sort > li,.sort{display:inline}

.sort > li{display:block;width:100%;padding:.4rem 1.2rem;clear:both;font-weight:400;color:#676a79;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}

.sort > li:last-child{padding-bottom:0}

.sort > li a{color:#676a79}

.sort > li.asc a,.sort > li.desc a{color:#8b1538}

.sort > li.asc a:after,.sort > li.desc a:after{content:"";background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAsBAMAAACj90TiAAAAG1BMVEUAAAAzlOYzlOYzlOYzlOYzlOYzlOYzlOYzlOar6gzlAAAACHRSTlMAjesv90eHRuQt1XUAAABSSURBVBjTzdCxDQAhDENRSyzAEFdQ0zDB9axEgzw2DokEI1A9/S4OyAxADEcpPGlpFKWoSpEKp0Dlb6SvG2jY4Fka4tw4PqbEsDNTcb8gn/d4LPQHQDdjhblbAAAAAElFTkSuQmCC);display:inline-block;vertical-align:middle;margin:-1px 0 0 .4em;width:6px;height:11px;-webkit-background-size:6px auto;background-size:6px auto}

.sort > li.asc a:after{background-position:0 -11px}

select#category{width:100%!important}

.btn.disabled,.btn[disabled]{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}

.progress{overflow:hidden;margin-top:10px;margin-bottom:10px;background-color:#f5f5f5;height:10px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px;background:#eee;-webkit-box-shadow:0 1px 0 white,0 0 0 1px rgba(0,0,0,0.1) inset,0 1px 4px rgba(0,0,0,0.2) inset;box-shadow:0 1px 0 white,0 0 0 1px rgba(0,0,0,0.1) inset,0 1px 4px rgba(0,0,0,0.2) inset}



/*--- \11e\178\11e\be\11e\b4\d1\81\11e\b2\11e\b5\d1\201a\11e\ba\11e\b0 \11e\b8\d1\81\d1\2026\11e\be\11e\b4\11e\bd\11e\be\11e\b3\11e\be \11e\ba\11e\be\11e\b4\11e\b0 ---*/

/* --- style.css --- */

:root {

  --bs-blue: #8b1538;

  --bs-indigo: #6610f2;

  --bs-purple: #6f42c1;

  --bs-pink: #d63384;

  --bs-red: #dc3545;

  --bs-orange: #fd7e14;

  --bs-yellow: #ffc107;

  --bs-green: #198754;

  --bs-teal: #20c997;

  --bs-cyan: #0dcaf0;

  --bs-white: #fff;

  --bs-gray: #6c757d;

  --bs-gray-dark: #343a40;

  --bs-gray-100: #f8f9fa;

  --bs-gray-200: #e9ecef;

  --bs-gray-300: #dee2e6;

  --bs-gray-400: #ced4da;

  --bs-gray-500: #adb5bd;

  --bs-gray-600: #6c757d;

  --bs-gray-700: #495057;

  --bs-gray-800: #343a40;

  --bs-gray-900: #212529;

  --bs-primary: #8b1538;

  --bs-secondary: #14191e;

  --bs-success: #0cbc87;

  --bs-info: #8b1538;

  --bs-warning: #f7c32e;

  --bs-danger: #d6293e;

  --bs-light: #eef0f2;

  --bs-dark: #14191e;

  --bs-primary-rgb: 139, 21, 56;

  --bs-secondary-rgb: 20, 25, 30;

  --bs-success-rgb: 12, 188, 135;

  --bs-info-rgb: 139, 21, 56;

  --bs-warning-rgb: 247, 195, 46;

  --bs-danger-rgb: 214, 41, 62;

  --bs-light-rgb: 238, 240, 242;

  --bs-dark-rgb: 20, 25, 30;

  --bs-white-rgb: 255, 255, 255;

  --bs-black-rgb: 0, 0, 0;

  --bs-body-color-rgb: 103, 106, 121;

  --bs-body-bg-rgb: 239, 242, 246;

  --bs-font-sans-serif: "Roboto", sans-serif;

  --bs-font-monospace: "Roboto", sans-serif;

  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

  --bs-body-font-family: "Roboto", sans-serif;

  --bs-body-font-size: 0.9rem;

  --bs-body-font-weight: 400;

  --bs-body-line-height: 1.5;

  --bs-body-color: #676a79;

  --bs-body-bg: #eff2f6;

}



*,

*::before,

*::after {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

}



@media (prefers-reduced-motion: no-preference) {

  :root {

    scroll-behavior: smooth;

  }

}



body {

  margin: 0;

  font-family: var(--bs-body-font-family);

  font-size: var(--bs-body-font-size);

  font-weight: var(--bs-body-font-weight);

  line-height: var(--bs-body-line-height);

  color: var(--bs-body-color);

  text-align: var(--bs-body-text-align);

  background-color: var(--bs-body-bg);

  -webkit-text-size-adjust: 100%;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



h6, .h6, h5, .h5, h2, .h2, h1, .h1 {

  margin-top: 0;

  margin-bottom: 0.5rem;

  font-family: 'Roboto', sans-serif;

  font-weight: 600;

  line-height: 1.25;

  color: #14191e;

}



h1, .h1 {

  font-size: calc(1.359375rem + 1.3125vw);

}

@media (min-width: 1200px) {

  h1, .h1 {

    font-size: 2.34375rem;

  }

}



h2, .h2 {

  font-size: calc(1.3125rem + 0.75vw);

}

@media (min-width: 1200px) {

  h2, .h2 {

    font-size: 1.875rem;

  }

}



h5, .h5 {

  font-size: 1.171875rem;

}



h6, .h6 {

  font-size: 0.9375rem;

}



p {

  margin-top: 0;

  margin-bottom: 1rem;

}





ul {

  padding-left: 2rem;

}





ul {

  margin-top: 0;

  margin-bottom: 1rem;

}





ul ul {

  margin-bottom: 0;

}



b,

strong {

  font-weight: bolder;

}



small, .small {

  font-size: 0.875em;

}



a {

  color: #8b1538;

  text-decoration: none;

}

a:hover {

  color: #0c59bd;

}



a:not([href]):not([class]), a:not([href]):not([class]):hover {

  color: inherit;

  text-decoration: none;

}





code {

  font-family: var(--bs-font-monospace);

  font-size: 1em;

  direction: ltr /* rtl:ignore */;

  unicode-bidi: bidi-override;

}



code {

  font-size: 0.875em;

  color: #d63384;

  word-wrap: break-word;

}

a > code {

  color: inherit;

}



img,

svg {

  vertical-align: middle;

}





tr {

  border-color: inherit;

  border-style: solid;

  border-width: 0;

}



label {

  display: inline-block;

}



button {

  border-radius: 0;

}



button:focus:not(:focus-visible) {

  outline: 0;

}



input,

button,

select,

textarea {

  margin: 0;

  font-family: inherit;

  font-size: inherit;

  line-height: inherit;

}



button,

select {

  text-transform: none;

}



[role=button] {

  cursor: pointer;

}



select {

  word-wrap: normal;

}

select:disabled {

  opacity: 1;

}



[list]::-webkit-calendar-picker-indicator {

  display: none;

}



button,

[type=button],

[type=submit] {

  -webkit-appearance: button;

}

button:not(:disabled),

[type=button]:not(:disabled),

[type=submit]:not(:disabled) {

  cursor: pointer;

}



::-moz-focus-inner {

  padding: 0;

  border-style: none;

}



textarea {

  resize: vertical;

}



::-webkit-datetime-edit-fields-wrapper,

::-webkit-datetime-edit-text,

::-webkit-datetime-edit-minute,

::-webkit-datetime-edit-hour-field,

::-webkit-datetime-edit-day-field,

::-webkit-datetime-edit-month-field,

::-webkit-datetime-edit-year-field {

  padding: 0;

}



::-webkit-inner-spin-button {

  height: auto;

}



[type=search] {

  outline-offset: -2px;

  -webkit-appearance: textfield;

}



/* rtl:raw:

[type="tel"],

[type="url"],

[type="email"],

[type="number"] {

  direction: ltr;

}

*/

::-webkit-search-decoration {

  -webkit-appearance: none;

}



::-webkit-color-swatch-wrapper {

  padding: 0;

}



::-webkit-file-upload-button {

  font: inherit;

}



::file-selector-button {

  font: inherit;

}



::-webkit-file-upload-button {

  font: inherit;

  -webkit-appearance: button;

}



summary {

  display: list-item;

  cursor: pointer;

}



progress {

  vertical-align: baseline;

}



[hidden] {

  display: none !important;

}



.container {

  width: 100%;

  padding-right: var(--bs-gutter-x, 0.75rem);

  padding-left: var(--bs-gutter-x, 0.75rem);

  margin-right: auto;

  margin-left: auto;

}



@media (min-width: 576px) {

   .container {

    max-width: 96%;

  }

}

@media (min-width: 768px) {

   .container {

    max-width: 100%;

  }

}

@media (min-width: 992px) {

   .container {

    max-width: 100%;

  }

}

@media (min-width: 1200px) {

   .container {

    max-width: 1140px;

  }

}

@media (min-width: 1400px) {

   .container {

    max-width: 1200px;

  }

}

.row {

  --bs-gutter-x: 1.5rem;

  --bs-gutter-y: 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  margin-top: calc(-1 * var(--bs-gutter-y));

  margin-right: calc(-0.5 * var(--bs-gutter-x));

  margin-left: calc(-0.5 * var(--bs-gutter-x));

}

.row > * {

  -ms-flex-negative: 0;

      flex-shrink: 0;

  width: 100%;

  max-width: 100%;

  padding-right: calc(var(--bs-gutter-x) * 0.5);

  padding-left: calc(var(--bs-gutter-x) * 0.5);

  margin-top: var(--bs-gutter-y);

}



.g-4 {

  --bs-gutter-x: 1.5rem;

}



.g-4 {

  --bs-gutter-y: 1.5rem;

}



@media (min-width: 576px) {



  .col-sm-6 {

    -webkit-box-flex: 0;

        -ms-flex: 0 0 auto;

            flex: 0 0 auto;

    width: 50%;

  }

}

@media (min-width: 992px) {



  .col-lg-12 {

    -webkit-box-flex: 0;

        -ms-flex: 0 0 auto;

            flex: 0 0 auto;

    width: 100%;

  }

}



.btn {

  display: inline-block;

  font-weight: 400;

  line-height: 1.5;

  color: #676a79;

  text-align: center;

  vertical-align: middle;

  cursor: pointer;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  background-color: transparent;

  border: 1px solid transparent;

  padding: 0.5rem 1rem;

  font-size: 0.9375rem;

  border-radius: 0.4rem;

  -webkit-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}

@media (prefers-reduced-motion: reduce) {

  .btn {

    -webkit-transition: none;

    transition: none;

  }

}

.btn:hover {

  color: #676a79;

}

 .btn:focus {

  outline: 0;

  -webkit-box-shadow: none;

          box-shadow: none;

}

.btn:disabled, .btn.disabled {

  pointer-events: none;

  opacity: 0.65;

}



.btn-primary {

  color: #fff;

  background-color: #8b1538;

  border-color: #8b1538;

}

.btn-primary:hover {

  color: #fff;

  background-color: #0d5ec9;

  border-color: #0c59bd;

}

 .btn-primary:focus {

  color: #fff;

  background-color: #0d5ec9;

  border-color: #0c59bd;

  -webkit-box-shadow: 0 0 0 0 rgba(51, 133, 239, 0.5);

          box-shadow: 0 0 0 0 rgba(51, 133, 239, 0.5);

}

 .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {

  color: #fff;

  background-color: #0c59bd;

  border-color: #0b53b1;

}

 .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {

  -webkit-box-shadow: 0 0 0 0 rgba(51, 133, 239, 0.5);

          box-shadow: 0 0 0 0 rgba(51, 133, 239, 0.5);

}

.btn-primary:disabled, .btn-primary.disabled {

  color: #fff;

  background-color: #8b1538;

  border-color: #8b1538;

}



.btn-light {

  color: #000;

  background-color: #eef0f2;

  border-color: #eef0f2;

}

.btn-light:hover {

  color: #000;

  background-color: #f1f2f4;

  border-color: #f0f2f3;

}

 .btn-light:focus {

  color: #000;

  background-color: #f1f2f4;

  border-color: #f0f2f3;

  -webkit-box-shadow: 0 0 0 0 rgba(202, 204, 206, 0.5);

          box-shadow: 0 0 0 0 rgba(202, 204, 206, 0.5);

}

 .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {

  color: #000;

  background-color: #f1f3f5;

  border-color: #f0f2f3;

}

 .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {

  -webkit-box-shadow: 0 0 0 0 rgba(202, 204, 206, 0.5);

          box-shadow: 0 0 0 0 rgba(202, 204, 206, 0.5);

}

.btn-light:disabled, .btn-light.disabled {

  color: #000;

  background-color: #eef0f2;

  border-color: #eef0f2;

}



.btn-sm {

  padding: 0.4rem 0.8rem;

  font-size: 0.8125rem;

  border-radius: 0.2rem;

}



.collapse:not(.show) {

  display: none;

}



.collapsing {

  height: 0;

  overflow: hidden;

  -webkit-transition: height 0.35s ease;

  transition: height 0.35s ease;

}

@media (prefers-reduced-motion: reduce) {

  .collapsing {

    -webkit-transition: none;

    transition: none;

  }

}





.dropdown {

  position: relative;

}



.dropdown-toggle {

  white-space: nowrap;

}

.dropdown-toggle::after {

  display: inline-block;

  margin-left: 0.255em;

  vertical-align: 0.255em;

  content: "";

  border-top: 0.3em solid;

  border-right: 0.3em solid transparent;

  border-bottom: 0;

  border-left: 0.3em solid transparent;

}

.dropdown-toggle:empty::after {

  margin-left: 0;

}



.dropdown-menu {

  position: absolute;

  z-index: 1000;

  display: none;

  min-width: 15rem;

  padding: 1rem 0;

  margin: 0;

  font-size: 0.9375rem;

  color: #676a79;

  text-align: left;

  list-style: none;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid rgba(0, 0, 0, 0.06);

  border-radius: 0.4rem;

}



.dropdown-menu-end {

  --bs-position: end;

}



.dropdown-item {

  display: block;

  width: 100%;

  padding: 0.4rem 1.2rem;

  clear: both;

  font-weight: 400;

  color: #676a79;

  text-align: inherit;

  white-space: nowrap;

  background-color: transparent;

  border: 0;

}

.dropdown-item:hover, .dropdown-item:focus {

  color: #8b1538;

  background-color: transparent;

}

.dropdown-item.active, .dropdown-item:active {

  color: #8b1538;

  text-decoration: none;

  background-color: transparent;

}

.dropdown-item.disabled, .dropdown-item:disabled {

  color: #676a79;

  pointer-events: none;

  background-color: transparent;

}



.dropdown-menu.show {

  display: block;

}



.nav {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  padding-left: 0;

  margin-bottom: 0;

  list-style: none;

}



.nav-link {

  display: block;

  padding: 0.25rem 0.75rem;

  color: #676a79;

  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

}

@media (prefers-reduced-motion: reduce) {

  .nav-link {

    -webkit-transition: none;

    transition: none;

  }

}

.nav-link:hover, .nav-link:focus {

  color: #0c59bd;

}

.nav-link.disabled {

  color: #a1a1a8 !important;

  pointer-events: none;

  cursor: default;

}



.navbar {

  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

  padding-top: 0;

  padding-right: 0;

  padding-bottom: 0;

  padding-left: 0;

}

.navbar > .container {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: inherit;

      flex-wrap: inherit;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

}

.navbar-nav {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  padding-left: 0;

  margin-bottom: 0;

  list-style: none;

}

.navbar-nav .nav-link {

  padding-right: 0;

  padding-left: 0;

}

.navbar-nav .dropdown-menu {

  position: static;

}



.navbar-collapse {

  -ms-flex-preferred-size: 100%;

      flex-basis: 100%;

  -webkit-box-flex: 1;

      -ms-flex-positive: 1;

          flex-grow: 1;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

}



.navbar-toggler {

  padding: 0.25rem 0;

  font-size: 1.25rem;

  line-height: 1;

  background-color: transparent;

  border: 1px solid transparent;

  border-radius: 0.25rem;

  -webkit-transition: -webkit-box-shadow 0.15s ease-in-out;

  transition: -webkit-box-shadow 0.15s ease-in-out;

  transition: box-shadow 0.15s ease-in-out;

  transition: box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;

}

@media (prefers-reduced-motion: reduce) {

  .navbar-toggler {

    -webkit-transition: none;

    transition: none;

  }

}

.navbar-toggler:hover {

  text-decoration: none;

}

.navbar-toggler:focus {

  text-decoration: none;

  outline: 0;

  -webkit-box-shadow: 0 0 0 0;

          box-shadow: 0 0 0 0;

}



.navbar-nav-scroll {

  max-height: var(--bs-scroll-height, 75vh);

  overflow-y: auto;

}

@media (min-width: 992px) {

  .navbar-expand-lg {

    -ms-flex-wrap: nowrap;

        flex-wrap: nowrap;

    -webkit-box-pack: start;

        -ms-flex-pack: start;

            justify-content: flex-start;

  }

  .navbar-expand-lg .navbar-nav {

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

        -ms-flex-direction: row;

            flex-direction: row;

  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {

    position: absolute;

  }

  .navbar-expand-lg .navbar-nav .nav-link {

    padding-right: 1rem;

    padding-left: 1rem;

  }

  .navbar-expand-lg .navbar-nav-scroll {

    overflow: visible;

  }

  .navbar-expand-lg .navbar-collapse {

    display: -webkit-box !important;

    display: -ms-flexbox !important;

    display: flex !important;

    -ms-flex-preferred-size: auto;

        flex-basis: auto;

  }

  .navbar-expand-lg .navbar-toggler {

    display: none;

  }

  .navbar-expand-lg .offcanvas-header {

    display: none;

  }

  .navbar-expand-lg .offcanvas {

    position: inherit;

    bottom: 0;

    z-index: 998;

    -webkit-box-flex: 1;

        -ms-flex-positive: 1;

            flex-grow: 1;

    visibility: visible !important;

    background-color: transparent;

    border-right: 0;

    border-left: 0;

    -webkit-transition: none;

    transition: none;

    -webkit-transform: none;

            transform: none;

  }

  .navbar-expand-lg .offcanvas-body {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-flex: 0;

        -ms-flex-positive: 0;

            flex-grow: 0;

    padding: 0;

    overflow-y: visible;

  }

}

.navbar-light .navbar-nav .nav-link {

  color: #676a79;

}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {

  color: #8b1538;

}

.navbar-light .navbar-nav .nav-link.disabled {

  color: rgba(0, 0, 0, 0.3);

}

.navbar-light .navbar-nav .show > .nav-link,

.navbar-light .navbar-nav .nav-link.active {

  color: #8b1538;

}

.navbar-light .navbar-toggler {

  color: #676a79;

  border-color: rgba(0, 0, 0, 0.1);

}



.card {

  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  min-width: 0;

  word-wrap: break-word;

  background-color: #fff;

  background-clip: border-box;

  border: 1px solid rgba(0, 0, 0, 0.09);

  border-radius: 0.4rem;

}



.card-body {

  -webkit-box-flex: 1;

      -ms-flex: 1 1 auto;

          flex: 1 1 auto;

  padding: 1.25rem 1.25rem;

}



.card-title {

  margin-bottom: 0.5rem;

}



.card-header {

  padding: 1.25rem 1.25rem;

  margin-bottom: 0;

  background-color: #fff;

  border-bottom: 1px solid rgba(0, 0, 0, 0.09);

}

.card-header:first-child {

  border-radius: calc(0.4rem - 1px) calc(0.4rem - 1px) 0 0;

}



.breadcrumb {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  padding: 0.5rem 0;

  margin-bottom: 1rem;

  list-style: none;

  background-color: transparent;

}



.badge {

  display: inline-block;

  padding: 0.35em 0.65em;

  font-size: 0.85em;

  font-weight: 400;

  line-height: 1;

  color: #fff;

  text-align: center;

  white-space: nowrap;

  vertical-align: baseline;

  border-radius: 0.25rem;

}

.badge:empty {

  display: none;

}



.btn .badge {

  position: relative;

  top: -1px;

}



.alert {

  position: relative;

  padding: 1rem 1rem;

  margin-bottom: 1rem;

  border: 1px solid transparent;

  border-radius: 0.25rem;

}

.progress {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  height: 1rem;

  overflow: hidden;

  font-size: 0.75rem;

  background-color: rgba(0, 0, 0, 0.1);

  border-radius: 0.25rem;

}



.btn-close {

  -webkit-box-sizing: content-box;

          box-sizing: content-box;

  width: 1em;

  height: 1em;

  padding: 0.25em 0.25em;

  color: #000;

  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;

  border: 0;

  border-radius: 0.4rem;

  opacity: 0.5;

}

.btn-close:hover {

  color: #000;

  text-decoration: none;

  opacity: 0.75;

}

.btn-close:focus {

  outline: 0;

  -webkit-box-shadow: 0 0 0 0 rgba(139, 21, 56, 0.25);

          box-shadow: 0 0 0 0 rgba(139, 21, 56, 0.25);

  opacity: 1;

}

.btn-close:disabled, .btn-close.disabled {

  pointer-events: none;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  opacity: 0.25;

}

.tooltip {

  position: absolute;

  z-index: 1080;

  display: block;

  margin: 0;

  font-family: 'Roboto', sans-serif;

  font-style: normal;

  font-weight: 400;

  line-height: 1.5;

  text-align: left;

  text-align: start;

  text-decoration: none;

  text-shadow: none;

  text-transform: none;

  letter-spacing: normal;

  word-break: normal;

  word-spacing: normal;

  white-space: normal;

  line-break: auto;

  font-size: 0.6875rem;

  word-wrap: break-word;

  opacity: 0;

}

.tooltip.show {

  opacity: 0.9;

}



/* rtl:begin:ignore */



/* rtl:end:ignore */



/* rtl:options: {

  "autoRename": true,

  "stringMap":[ {

    "name"    : "prev-next",

    "search"  : "prev",

    "replace" : "next"

  } ]

} */

.offcanvas {

  position: fixed;

  bottom: 0;

  z-index: 1045;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  max-width: 100%;

  visibility: hidden;

  background-color: #fff;

  background-clip: padding-box;

  outline: 0;

  -webkit-transition: -webkit-transform 0.3s ease-in-out;

  transition: -webkit-transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

}

@media (prefers-reduced-motion: reduce) {

  .offcanvas {

    -webkit-transition: none;

    transition: none;

  }

}



.offcanvas-header {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

  padding: 1rem 1.5rem;

}

.offcanvas-header .btn-close {

  padding: 0.5rem 0.75rem;

  margin-top: -0.5rem;

  margin-right: -0.75rem;

  margin-bottom: -0.5rem;

}



.offcanvas-body {

  -webkit-box-flex: 1;

      -ms-flex-positive: 1;

          flex-grow: 1;

  padding: 1rem 1.5rem;

  overflow-y: auto;

}



.offcanvas-start {

  top: 0;

  left: 0;

  width: 400px;

  border-right: 1px solid rgba(0, 0, 0, 0.1);

  -webkit-transform: translateX(-100%);

          transform: translateX(-100%);

}



.offcanvas.show {

  -webkit-transform: none;

          transform: none;

}



.placeholder {

  display: inline-block;

  min-height: 1em;

  vertical-align: middle;

  cursor: wait;

  background-color: currentColor;

  opacity: 0.5;

}

.placeholder.btn::before {

  display: inline-block;

  content: "";

}



.fixed-top {

  position: fixed;

  top: 0;

  right: 0;

  left: 0;

  z-index: 999;

}



.vstack {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-flex: 1;

      -ms-flex: 1 1 auto;

          flex: 1 1 auto;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  -ms-flex-item-align: stretch;

      align-self: stretch;

}



.text-truncate {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.d-block {

  display: block !important;

}



.d-grid {

  display: grid !important;

}



.d-flex {

  display: -webkit-box !important;

  display: -ms-flexbox !important;

  display: flex !important;

}



.d-none {

  display: none !important;

}



.shadow {

  -webkit-box-shadow: 0px 0px 20px rgba(93, 83, 84, 0.15) !important;

          box-shadow: 0px 0px 20px rgba(93, 83, 84, 0.15) !important;

}



.position-relative {

  position: relative !important;

}



.border-0 {

  border: 0 !important;

}



.border-top {

  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;

}



.border-bottom {

  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;

}



.flex-column {

  -webkit-box-orient: vertical !important;

  -webkit-box-direction: normal !important;

      -ms-flex-direction: column !important;

          flex-direction: column !important;

}



.flex-wrap {

  -ms-flex-wrap: wrap !important;

      flex-wrap: wrap !important;

}



.gap-1 {

  gap: 0.25rem !important;

}



.gap-2 {

  gap: 0.5rem !important;

}



.gap-3 {

  gap: 1rem !important;

}



.gap-4 {

  gap: 1.5rem !important;

}



.justify-content-between {

  -webkit-box-pack: justify !important;

      -ms-flex-pack: justify !important;

          justify-content: space-between !important;

}



.align-items-center {

  -webkit-box-align: center !important;

      -ms-flex-align: center !important;

          align-items: center !important;

}



.mx-0 {

  margin-right: 0 !important;

  margin-left: 0 !important;

}



.mt-2 {

  margin-top: 0.5rem !important;

}



.mt-3 {

  margin-top: 1rem !important;

}



.me-2 {

  margin-right: 0.5rem !important;

}



.me-auto {

  margin-right: auto !important;

}



.mb-0 {

  margin-bottom: 0 !important;

}



.mb-2 {

  margin-bottom: 0.5rem !important;

}



.mb-3 {

  margin-bottom: 1rem !important;

}



.ms-2 {

  margin-left: 0.5rem !important;

}



.ms-auto {

  margin-left: auto !important;

}



.p-0 {

  padding: 0 !important;

}



.p-2 {

  padding: 0.5rem !important;

}



.p-3 {

  padding: 1rem !important;

}



.px-2 {

  padding-right: 0.5rem !important;

  padding-left: 0.5rem !important;

}



.pb-0 {

  padding-bottom: 0 !important;

}



.fs-6 {

  font-size: 0.9375rem !important;

}



.fw-bold {

  font-weight: 600 !important;

}



.lh-1 {

  line-height: 1 !important;

}



.text-center {

  text-align: center !important;

}



.text-decoration-none {

  text-decoration: none !important;

}



/* rtl:begin:remove */



/* rtl:end:remove */



.text-secondary {

  --bs-text-opacity: 1;

  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;

}



.text-muted {

  --bs-text-opacity: 1;

  color: #e1e4e6 !important;

}



.text-reset {

  --bs-text-opacity: 1;

  color: inherit !important;

}



.bg-transparent {

  --bs-bg-opacity: 1;

  background-color: transparent !important;

}



.rounded {

  border-radius: 0.4rem !important;

}



.rounded-circle {

  border-radius: 50% !important;

}

@media (min-width: 768px) {



  .d-md-flex {

    display: -webkit-box !important;

    display: -ms-flexbox !important;

    display: flex !important;

  }

}

@media (min-width: 992px) {



  .d-lg-none {

    display: none !important;

  }



  .px-lg-0 {

    padding-right: 0 !important;

    padding-left: 0 !important;

  }

}



.btn {

  outline: 0;

}



.btn-light.active, .btn-light:active, .btn-light:focus, .btn-light:hover {

  background: #eef0f2;

}



.btn-primary-soft {

  color: #8b1538;

  background-color: rgba(139, 21, 56, 0.1);

}

.btn-primary-soft:hover {

  color: #fff;

  background-color: #8b1538;

}



.dropdown-menu {

  -webkit-box-shadow: 0px 20px 30px rgba(83, 88, 93, 0.1), 0px 0px 30px rgba(83, 88, 93, 0.2);

          box-shadow: 0px 20px 30px rgba(83, 88, 93, 0.1), 0px 0px 30px rgba(83, 88, 93, 0.2);

}



.dropdown-item.active {

  color: #8b1538;

}



.dropdown-toggle:after {

  content: "\f078";

  font-family: "bootstrap-icons";

  font-size: 0.5rem;

  margin-left: 0.35rem;

  font-weight: 800;

  vertical-align: middle;

  border: none;

}



.dropdown-menu .dropdown-toggle:after {

  position: absolute;

  right: 25px;

  top: 10px;

}

.dropdown-menu .dropdown-toggle:before {

  position: absolute;

  right: 25px;

  top: 10px;

}



.nav .nav-item .nav-link.active {

  color: #8b1538;

}



.nav.flex-column:not(.nav-pills) .nav-link {

  padding-left: 0;

  padding-top: 0.3rem;

  padding-bottom: 0.3rem;

}



.nav-link-secondary .nav-item .nav-link {

  color: #14191e;

}

.nav-link-secondary .nav-item .nav-link:hover, .nav-link-secondary .nav-item .nav-link.active {

  color: #8b1538;

}

header {

  height: 56px;

}



.navbar-nav .nav-link {

  font-size: 0.9375rem;

  font-weight: 500;

  text-transform: capitalize;

  line-height: 56px;

  padding-top: 0;

  padding-bottom: 0;

}

.navbar-nav .nav-item:last-child .nav-link {

  padding-right: 0;

}



.offcanvas .navbar-nav .nav-link {

  line-height: inherit;

  padding: 0.25rem 0.75rem;

}



.navbar-toggler {

  margin-bottom: 0;

  border: 0;

  background-color: #eef0f2;

}

@media (min-width: 992px) {

  .navbar-expand-lg .navbar-nav .dropdown-menu {

    top: 120%;

    visibility: hidden;

    opacity: 0;

    display: block;

    -webkit-transition: all 0.1s ease-in-out;

    transition: all 0.1s ease-in-out;

  }

  .navbar-expand-lg .navbar-nav .dropdown:hover > .dropdown-menu {

    top: 100%;

    visibility: visible;

    opacity: 1;

    -webkit-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

  }

}

@media (max-width: 991.98px) {

  .navbar-expand-lg .navbar-collapse {

    -webkit-box-shadow: 0px 10px 30px rgba(83, 88, 93, 0.2);

            box-shadow: 0px 10px 30px rgba(83, 88, 93, 0.2);

    position: absolute;

    left: 0;

    right: 0;

    top: 100%;

    background: #fff;

    border-top: 1px solid rgba(0, 0, 0, 0.1);

  }

  .navbar-expand-lg .navbar-collapse .navbar-nav .dropdown-toggle::after {

    position: absolute;

    right: 25px;

  }

  .navbar-expand-lg .navbar-collapse .navbar-nav .dropdown-menu {

    -webkit-box-shadow: none;

            box-shadow: none;

  }

  .navbar-expand-lg .navbar-collapse .navbar-nav .dropdown-menu:before {

    content: none;

  }

  .navbar-expand-lg .navbar-collapse .navbar-nav > .nav-item {

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    padding: 5px 30px;

    position: relative;

  }

  .navbar-expand-lg .navbar-collapse .navbar-nav > .nav-item .nav-link {

    line-height: 40px;

  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {

    position: static;

    float: none;

  }

  .navbar-expand-lg .navbar-nav .nav-item > .dropdown-menu {

    background: rgba(103, 106, 121, 0.04);

    padding: 20px 0px;

    margin: 10px 0;

  }

}

header.fixed-top + main {

  padding-top: calc(1.5rem + 56px);

  margin-bottom: 1.5rem;

}



.navbar-toggler .navbar-toggler-animation {

  -webkit-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  background-image: none;

  position: relative;

  height: 18px;

  width: 20px;

  display: inline-block;

  vertical-align: middle;

  background-repeat: no-repeat;

  background-position: center;

  background-size: 100%;

}



.navbar-toggler .navbar-toggler-animation span {

  -webkit-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

  -webkit-transform: rotateZ(0deg);

  transform: rotateZ(0deg);

  height: 2px;

  background: #676a79;

  display: block;

  position: absolute;

  width: 100%;

  border-radius: 30px;

}



.navbar-toggler .navbar-toggler-animation span:nth-child(1) {

  top: 10%;

}



.navbar-toggler .navbar-toggler-animation span:nth-child(2) {

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.navbar-toggler .navbar-toggler-animation span:nth-child(3) {

  bottom: 10%;

}



.navbar-toggler[data-bs-toggle=collapse][aria-expanded=true] .navbar-toggler-animation span:nth-child(1) {

  -webkit-transform: rotateZ(45deg) translateY(-50%);

          transform: rotateZ(45deg) translateY(-50%);

  top: 47%;

  -webkit-transform-origin: 47% 0;

          transform-origin: 47% 0;

  width: 100%;

}



.navbar-toggler[data-bs-toggle=collapse][aria-expanded=true] .navbar-toggler-animation span:nth-child(2) {

  visibility: hidden;

  -webkit-transition: all 0s ease-in-out;

  transition: all 0s ease-in-out;

}



.navbar-toggler[data-bs-toggle=collapse][aria-expanded=true] .navbar-toggler-animation span:nth-child(3) {

  -webkit-transform: rotateZ(-45deg) translateY(-50%);

          transform: rotateZ(-45deg) translateY(-50%);

  bottom: 42%;

  -webkit-transform-origin: 50% 0;

          transform-origin: 50% 0;

  width: 100%;

}



body {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  height: 100%;

  overflow-x: hidden;

  z-index: 0;

  position: relative;

}



main {

  background-color: #eff2f6;

}



header {

  position: relative;

  z-index: 1020;

}



a {

  -webkit-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}



*:focus {

  outline: none !important;

}



h1 > a, h2 > a, h5 > a, h6 > a, .h1 > a, .h2 > a, .h5 > a, .h6 > a {

  color: #14191e;

}

h1 > a:hover, h2 > a:hover, h5 > a:hover, h6 > a:hover, .h1 > a:hover, .h2 > a:hover, .h5 > a:hover, .h6 > a:hover {

  color: #8b1538;

}



img {

  max-width: 100%;

  height: auto;

}



video {

  background-size: cover;

  display: table-cell;

  vertical-align: middle;

  width: 100%;

}



html[data-public-theme="turkmod"] section {

  padding-top: 0;

  padding-bottom: 0;

}



@media (max-width: 767.98px) {

  html[data-public-theme="turkmod"] section {

    padding-top: 0;

    padding-bottom: 0;

  }

}

small,

.small {

  font-weight: 400;

}



a.badge:hover {

  color: #fff;

}



@media (max-width: 767.98px) {

  .offcanvas-start {

    width: 260px;

  }

}

.bg-mode {

  background: #fff;

}



.icon-md {

  height: 2.5rem;

  width: 2.5rem;

  font-size: 0.9em;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



/* rtl:raw:

.glightbox-clean .gclose, .glightbox-modern .gclose{

  right: auto !important;

  left: 20px;

}

*/

/* rtl:raw:

  .rtl-flip {

    transform: scaleX(-1);

  }

  .rtl-flip.bi:before{

    transform: inherit;

  }

*/

.bi::before,

[class^=bi-]::before,

[class*=" bi-"]::before {

  line-height: 1.5;

}



[class*=status-]:before {

  content: "";

  position: absolute;

  z-index: 1;

  border-radius: 100%;

  border: 2px solid #fff;

  height: 12px;

  width: 12px;

  right: -2px;

  top: -2px;

}



.avatar {

  height: 3rem;

  width: 3rem;

  position: relative;

  display: inline-block;

  -ms-flex-negative: 0 !important;

      flex-shrink: 0 !important;

}



.avatar-img {

  width: 100%;

  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}



.avatar-xs {

  height: 2.1875rem;

  width: 2.1875rem;

}



.avatar-sm {

  height: 2.5rem;

  width: 2.5rem;

}



/* rtl:raw:

.tiny-slider .tns-controls [data-controls]{

  transform: scaleX(-1) translateY(-50%);

}

.tns-visually-hidden {

  right: -10000em !important;

  left: 0 !important;

}

*/



/* --- turkmod-shell.css --- */

html[data-public-theme="turkmod"] {

  --t-primary: #8b1538;

  --t-primary-hover: #70102d;

  --t-primary-soft: rgba(139, 21, 56, .11);

  --t-primary-ring: rgba(139, 21, 56, .24);

  --t-bg: #eff2f6;

  --t-surface: #ffffff;

  --t-surface-muted: #f7f8fa;

  --t-border: #dde3eb;

  --t-text: #14191e;

  --t-muted: #777d8e;

  --t-radius: 8px;

  --t-gap: 24px;

  --t-header-height: 58px;

  --t-stack-gap: 8px;

  --bs-blue: #8b1538;

  --bs-primary: #8b1538;

  --bs-info: #8b1538;

  --bs-primary-rgb: 139, 21, 56;

  --bs-info-rgb: 139, 21, 56;

  --primary: #8b1538;

  --primary-dark: #70102d;

  --brand-accent: #8b1538;

  --brand-accent-hover: #70102d;

  --brand-accent-alpha-10: rgba(139, 21, 56, .10);

  --brand-accent-alpha-16: rgba(139, 21, 56, .16);

  --brand-accent-alpha-20: rgba(139, 21, 56, .20);

  --brand-accent-alpha-30: rgba(139, 21, 56, .30);

  --theme-info: #8b1538;

  --theme-info-soft: rgba(139, 21, 56, .12);

  --ui-surface: #ffffff;

  --ui-surface-muted: #f7f8fa;

  --ui-border: #dde3eb;

  --ui-ring: 0 0 0 3px rgba(139, 21, 56, .18);

  --text: #14191e;

  --text-dim: #777d8e;

  --on-primary: #ffffff;

  --theme-on-accent: #ffffff;

}



html[data-public-theme="turkmod"] body {

  background: var(--t-bg);

  color: var(--t-muted);

}



html[data-public-theme="turkmod"] body,

html[data-public-theme="turkmod"] .shell,

html[data-public-theme="turkmod"] .site-header,

html[data-public-theme="turkmod"] .site-main,

html[data-public-theme="turkmod"] .card,

html[data-public-theme="turkmod"] .btn {

  transition:

    background-color .22s ease,

    color .22s ease,

    border-color .22s ease,

    box-shadow .22s ease;

}



@media (prefers-reduced-motion: reduce) {

  html[data-public-theme="turkmod"] *,

  html[data-public-theme="turkmod"] *::before,

  html[data-public-theme="turkmod"] *::after {

    transition-duration: .01ms !important;

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

  }

}



html[data-public-theme="turkmod"] a {

  color: inherit;

  text-decoration: none;

}



html[data-public-theme="turkmod"] a:hover {

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .shell {

  min-height: 100vh;

}



html[data-public-theme="turkmod"] .container {

  width: 100%;

  max-width: 1400px;

}



html[data-public-theme="turkmod"] .site-header {

  min-height: 58px;

  border-bottom: 1px solid rgba(20, 25, 30, .08);

  background: var(--t-surface) !important;

  box-shadow: none;

}



html[data-public-theme="turkmod"] .site-header .navbar {

  min-height: 58px;

  padding: 0;

}



html[data-public-theme="turkmod"] .site-header .container {

  max-width: 1400px;

  gap: 18px;

  flex-wrap: nowrap;

}



html[data-public-theme="turkmod"] .site-header form {

  width: min(320px, 27vw);

}



html[data-public-theme="turkmod"] .site-header .navbar-collapse {

  min-width: 0;

  gap: 20px;

}



html[data-public-theme="turkmod"] .site-header .navbar-collapse > .nav {

  flex: 0 0 320px;

  min-width: 250px;

  padding-right: 0 !important;

  padding-left: 0 !important;

}



html[data-public-theme="turkmod"] .site-header .navbar-nav {

  flex-wrap: nowrap;

  gap: 2px;

  white-space: nowrap;

}



html[data-public-theme="turkmod"] .site-header .container > ul.nav {

  flex: 0 0 auto;

  margin-left: 14px !important;

}



html[data-public-theme="turkmod"] .site-header .navbar-nav .nav-link {

  padding-right: 13px;

  padding-left: 13px;

  color: #686e7c;

  font-weight: 600;

}



html[data-public-theme="turkmod"] .site-header .navbar-nav .nav-link:hover,

html[data-public-theme="turkmod"] .site-header .navbar-nav .nav-link:focus {

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .site-main {

  padding-top: var(--t-header-height);

  padding-bottom: 34px;

  background: var(--t-bg);

}



html[data-public-theme="turkmod"] body.topic-detail-page #main-content.site-main {

  padding-top: var(--t-header-height) !important;

  padding-bottom: 34px !important;

  background: var(--t-bg);

}



html[data-public-theme="turkmod"] .grid {

  display: grid;

  grid-template-columns: 276px minmax(0, 800px) 276px;

  justify-content: center;

  gap: var(--t-gap);

  align-items: start;

}



html[data-public-theme="turkmod"] .container,

html[data-public-theme="turkmod"] .layout,

html[data-public-theme="turkmod"] .content,

html[data-public-theme="turkmod"] .sidebar {

  min-width: 0;

}



html[data-public-theme="turkmod"] .sidebar-left,

html[data-public-theme="turkmod"] .sidebar-right,

html[data-public-theme="turkmod"] .content-area {

  min-width: 0;

}



html[data-public-theme="turkmod"] .sidebar-left,

html[data-public-theme="turkmod"] .sidebar-right {

  width: auto;

  max-width: none;

  padding: 0;

}



html[data-public-theme="turkmod"] .content-area {

  width: 100%;

  max-width: 100%;

  padding-top: 0 !important;

  padding-bottom: 0 !important;

}



html[data-public-theme="turkmod"] .content-area .content {

  gap: var(--t-stack-gap);

}



html[data-public-theme="turkmod"] .sidebar-left > .navbar,

html[data-public-theme="turkmod"] .sidebar-right > .row {

  position: static;

  top: auto;

}



html[data-public-theme="turkmod"] .sidebar-left > .navbar {

  display: block;

  padding: 0;

}



html[data-public-theme="turkmod"] .sidebar-right > .row {

  --bs-gutter-x: 0;

  --bs-gutter-y: 18px;

  margin: 0;

}



html[data-public-theme="turkmod"] .sidebar-right > .row > * {

  width: 100%;

  padding-right: 0;

  padding-left: 0;

}



html[data-public-theme="turkmod"] .card {

  border: 1px solid var(--t-border);

  border-radius: var(--t-radius);

  background: var(--t-surface);

  box-shadow: none;

}



html[data-public-theme="turkmod"] .card {

  overflow: hidden;

}



html[data-public-theme="turkmod"] .card-header {

  border-color: var(--t-border);

  background: transparent;

}



html[data-public-theme="turkmod"] .sidebar-left .card .card-header,

html[data-public-theme="turkmod"] .sidebar-right .card .card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  min-height: 48px;

  padding: 12px 14px !important;

  border-bottom: 1px solid var(--t-border) !important;

  background: var(--t-surface-muted) !important;

  color: var(--t-text);

}



html[data-public-theme="turkmod"] .sidebar-left .card .card-header h5,

html[data-public-theme="turkmod"] .sidebar-right .card .card-header h5 {

  margin: 0;

  color: var(--t-text);

  font-size: .9rem;

  font-weight: 850;

  line-height: 1.2;

}



html[data-public-theme="turkmod"] .sidebar-left .card .card-body,

html[data-public-theme="turkmod"] .sidebar-right .card .card-body {

  padding: 14px !important;

}



html[data-public-theme="turkmod"] .card-title,

html[data-public-theme="turkmod"] h1,

html[data-public-theme="turkmod"] h2,

html[data-public-theme="turkmod"] h5,

html[data-public-theme="turkmod"] h6,

html[data-public-theme="turkmod"] .h1,

html[data-public-theme="turkmod"] .h2,

html[data-public-theme="turkmod"] .h5,

html[data-public-theme="turkmod"] .h6 {

  color: var(--t-text);

}



html[data-public-theme="turkmod"] .sidebar-left .offcanvas-body {

  padding-top: 0;

}



html[data-public-theme="turkmod"] .nav-link {

  border-radius: 7px;

}



html[data-public-theme="turkmod"] .nav-link-secondary .nav-link,

html[data-public-theme="turkmod"] .sidebar-left .nav-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 32px;

  padding: 4px 0;

  color: var(--t-text);

  font-size: .88rem;

}



html[data-public-theme="turkmod"] .sidebar-left .nav-link img {

  width: 18px;

  height: 18px;

}



html[data-public-theme="turkmod"] .sidebar-left .nav-link:hover {

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .cat-menu {

  margin: 0;

}



html[data-public-theme="turkmod"] .cat-menu .nav-item {

  min-width: 0;

}



html[data-public-theme="turkmod"] .cat-menu__item--parent + .cat-menu__item--parent {

  margin-top: 1px;

}



html[data-public-theme="turkmod"] .sidebar-left .cat-menu__link {

  gap: 12px;

  min-height: 34px;

  padding: 3px 0;

}



html[data-public-theme="turkmod"] .sidebar-left .cat-menu__link--parent {

  font-size: .88rem;

}



html[data-public-theme="turkmod"] .sidebar-left .cat-menu__link--child {

  min-height: 28px;

  padding: 2px 0;

  font-size: .8rem;

}



html[data-public-theme="turkmod"] .cat-menu__name {

  display: inline-flex;

  align-items: center;

  min-width: 0;

  overflow: hidden;

  color: var(--t-text);

  font-weight: 700;

  line-height: 1.35;

  text-overflow: ellipsis;

  white-space: nowrap;

}



html[data-public-theme="turkmod"] .cat-menu__label {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



html[data-public-theme="turkmod"] .cat-menu__name i {

  flex: 0 0 auto;

  margin-right: 4px;

  color: #8b929d;

  font-size: .78rem;

  line-height: 1;

}



html[data-public-theme="turkmod"] .cat-menu__link--child .cat-menu__name {

  color: #5f6672;

  font-weight: 600;

}



html[data-public-theme="turkmod"] .cat-menu__link--child .cat-menu__name i {

  color: #b2b8c2;

  font-size: .72rem;

}



html[data-public-theme="turkmod"] .cat-menu__count {

  flex: 0 0 auto;

  margin-left: auto;

  color: #c7ccd5;

  font-size: .82rem;

  font-weight: 600;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__count {

  display: inline-grid;

  place-items: center;

  flex: 0 0 48px;

  justify-self: end;

  min-width: 48px;

  width: 48px;

  max-width: 48px;

  min-height: 24px;

  padding: 0 6px;

  border: 1px solid var(--t-border);

  border-radius: 6px;

  background: var(--t-surface-muted);

  color: var(--t-muted);

  font-size: .75rem;

  font-variant-numeric: tabular-nums;

  font-weight: 700;

  line-height: 1;

  text-align: center;

}



html[data-public-theme="turkmod"] .cat-menu__link:hover .cat-menu__name,

html[data-public-theme="turkmod"] .cat-menu__link:hover .cat-menu__name i,

html[data-public-theme="turkmod"] .cat-menu__link:hover .cat-menu__count {

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .cat-menu__children {

  position: relative;

  gap: 2px;

  margin: 0 0 7px 12px;

  padding: 1px 0 2px 13px;

}



html[data-public-theme="turkmod"] .cat-menu__children::before {

  content: "";

  position: absolute;

  top: 4px;

  bottom: 7px;

  left: 0;

  width: 1px;

  background: var(--t-border);

}



html[data-public-theme="turkmod"] .cat-widget {

  display: grid;

  gap: 12px;

  min-width: 0;

}



html[data-public-theme="turkmod"] .cat-widget__header {

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 0 2px 10px;

  border-bottom: 1px solid var(--t-border);

  color: var(--t-text);

}



html[data-public-theme="turkmod"] .cat-widget__header h2 {

  margin: 0;

  font-size: .9rem;

  font-weight: 850;

  line-height: 1.2;

}



html[data-public-theme="turkmod"] .cat-widget__icon {

  display: inline-grid;

  place-items: center;

  width: 28px;

  height: 28px;

  border-radius: 6px;

  background: var(--t-primary-soft);

  color: var(--t-primary);

  font-size: .82rem;

}



html[data-public-theme="turkmod"] .cat-widget__body {

  display: grid;

  gap: 10px;

  min-width: 0;

  width: 100%;

}



html[data-public-theme="turkmod"] .topic-card .card-header {

  padding: 16px 18px 0;

  background: transparent;

}



html[data-public-theme="turkmod"] .topic-card .card-body {

  padding: 18px;

}



html[data-public-theme="turkmod"] .topic-card .h5 {

  margin-bottom: 9px;

  line-height: 1.28;

}



html[data-public-theme="turkmod"] .topic-card p {

  color: var(--t-muted);

  font-size: .9rem;

  line-height: 1.58;

}



html[data-public-theme="turkmod"] .mini-topic img {

  width: 54px;

  height: 54px;

  object-fit: cover;

  flex: 0 0 auto;

}



html[data-public-theme="turkmod"] .mini-topic strong,

html[data-public-theme="turkmod"] .comment-item strong {

  color: var(--t-text);

  font-size: .86rem;

  line-height: 1.35;

}



html[data-public-theme="turkmod"] .comment-item:last-child,

html[data-public-theme="turkmod"] .mini-topic:last-of-type {

  margin-bottom: 0 !important;

}



html[data-public-theme="turkmod"] .comment-excerpt {

  display: -webkit-box !important;

  overflow: hidden;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}



html[data-public-theme="turkmod"] .tag {

  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding: 5px 10px;

  border: 1px solid var(--t-border);

  border-radius: 5px;

  background: transparent;

  color: var(--t-muted);

  font-size: .78rem;

  font-weight: 600;

  line-height: 1.15;

}



html[data-public-theme="turkmod"] .tag:hover {

  border-color: var(--t-primary);

  background: var(--t-primary);

  color: #fff;

}



html[data-public-theme="turkmod"] .poll-card label {

  display: block;

  margin-bottom: 4px;

  color: var(--t-muted);

  font-size: .86rem;

}



html[data-public-theme="turkmod"] .poll-card input {

  accent-color: var(--t-primary);

}



html[data-public-theme="turkmod"] .poll-actions {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  margin-top: 14px;

}



html[data-public-theme="turkmod"] .avatar-fallback {

  display: grid;

  place-items: center;

  background: var(--t-primary);

  color: #fff;

  font-weight: 600;

}



html[data-public-theme="turkmod"] .topic-hero {

  min-height: 330px;

  overflow: hidden;

  border: 0;

  border-radius: var(--t-radius);

}



html[data-public-theme="turkmod"] .topic-hero::before {

  background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .76)) !important;

}



html[data-public-theme="turkmod"] .content-area > .container {

  width: 100%;

  max-width: 100%;

  padding-right: 0;

  padding-left: 0;

}



html[data-public-theme="turkmod"] .content-area .layout {

  display: block;

}



html[data-public-theme="turkmod"] .content-area .sidebar,

html[data-public-theme="turkmod"] .content-area .sidebar-left,

html[data-public-theme="turkmod"] .content-area .sidebar-right {

  display: none !important;

}





html[data-public-theme="turkmod"] body.topic-detail-page .content-area .topic-section,

html[data-public-theme="turkmod"] body.topic-detail-page .content-area .topic-carousel {

  border: 1px solid var(--t-border) !important;

  border-radius: var(--t-radius) !important;

  background: var(--t-surface) !important;

  box-shadow: none !important;

}





html[data-public-theme="turkmod"] input[type="text"],

html[data-public-theme="turkmod"] input[type="email"],

html[data-public-theme="turkmod"] input[type="password"],

html[data-public-theme="turkmod"] input[type="search"],

html[data-public-theme="turkmod"] input[type="url"],

html[data-public-theme="turkmod"] input[type="number"],

html[data-public-theme="turkmod"] textarea,

html[data-public-theme="turkmod"] select {

  border-color: var(--t-border);

  border-radius: 7px;

  background-color: var(--t-surface);

  color: var(--t-text);

  box-shadow: none;

}





html[data-public-theme="turkmod"] input:focus,

html[data-public-theme="turkmod"] textarea:focus,

html[data-public-theme="turkmod"] select:focus {

  border-color: var(--t-primary);

  box-shadow: var(--ui-ring);

}



html[data-public-theme="turkmod"] .btn-primary,

html[data-public-theme="turkmod"] .dropdown-item.active,

html[data-public-theme="turkmod"] .dropdown-item:active {

  border-color: var(--t-primary) !important;

  background-color: var(--t-primary) !important;

  color: #fff !important;

}



html[data-public-theme="turkmod"] .btn-primary:hover,

html[data-public-theme="turkmod"] .btn-primary:focus {

  border-color: var(--t-primary-hover) !important;

  background-color: var(--t-primary-hover) !important;

}



html[data-public-theme="turkmod"] .btn-primary-soft {

  border-color: transparent !important;

  background-color: var(--t-primary-soft) !important;

  color: var(--t-primary) !important;

}



@media (max-width: 1199.98px) {

  html[data-public-theme="turkmod"] .container {

    max-width: 1140px;

  }



  html[data-public-theme="turkmod"] .grid {

    grid-template-columns: 240px minmax(0, 1fr) 240px;

    gap: 20px;

  }

}



@media (max-width: 991.98px) {

  html[data-public-theme="turkmod"] {

    --t-header-height: 123px;

  }



  html[data-public-theme="turkmod"] .site-header,

  html[data-public-theme="turkmod"] .site-header .navbar {

    min-height: var(--t-header-height);

  }



  html[data-public-theme="turkmod"] .site-main {

    padding-top: var(--t-header-height);

  }



  html[data-public-theme="turkmod"] body.topic-detail-page #main-content.site-main {

    padding-top: var(--t-header-height) !important;

  }



  html[data-public-theme="turkmod"] .site-header .navbar {

    padding: 8px 0;

  }



  html[data-public-theme="turkmod"] .site-header form {

    width: 100%;

  }



  html[data-public-theme="turkmod"] .site-header .navbar-collapse {

    gap: 12px;

  }



  html[data-public-theme="turkmod"] .site-header .navbar-collapse > .nav {

    flex: 1 1 auto;

    width: 100%;

    min-width: 0;

  }



  html[data-public-theme="turkmod"] .site-header .navbar-nav {

    flex-wrap: wrap;

    white-space: normal;

  }



  html[data-public-theme="turkmod"] .grid {

    grid-template-columns: minmax(0, 1fr);

    justify-content: stretch;

  }



  html[data-public-theme="turkmod"] .sidebar-left,

  html[data-public-theme="turkmod"] .sidebar-right {

    width: 100%;

  }



  html[data-public-theme="turkmod"] .sidebar-left .offcanvas {

    width: min(330px, 92vw);

  }



  html[data-public-theme="turkmod"] .sidebar-left > .navbar > .offcanvas:not(.show) {

    display: none;

  }

}



@media (max-width: 767.98px) {

  html[data-public-theme="turkmod"] .container {

    padding-right: 14px;

    padding-left: 14px;

  }



  html[data-public-theme="turkmod"] .site-main {

    padding-top: var(--t-header-height);

  }



  html[data-public-theme="turkmod"] body.topic-detail-page #main-content.site-main {

    padding-top: var(--t-header-height) !important;

  }



  html[data-public-theme="turkmod"] .topic-hero {

    min-height: 260px;

  }

}



@media (max-width: 575.98px) {

  html[data-public-theme="turkmod"] .site-header .container > ul.nav {

    display: none;

  }

}



/* TurkMod TurkMod integration layer */

html[data-public-theme="turkmod"] .header__logo {

  display: inline-grid;

  place-items: center;

  flex: 0 0 auto;

  width: 38px;

  height: 38px;

  border-radius: 7px;

  background: var(--t-primary);

  color: #fff;

  font-size: 1.05rem;

}



html[data-public-theme="turkmod"] .header__logo:hover,

html[data-public-theme="turkmod"] .header__logo:focus {

  color: #fff;

  background: var(--t-primary-hover);

}



html[data-public-theme="turkmod"] .site-header .navbar-collapse {

  flex: 1 1 auto;

}



html[data-public-theme="turkmod"] .site-header .navbar-nav {

  margin-right: auto;

  margin-left: 0 !important;

}



html[data-public-theme="turkmod"] .site-header .container > ul.nav {

  margin-left: 10px !important;

}



html[data-public-theme="turkmod"] .site-header .dropdown-menu {

  border: 1px solid var(--t-border);

  border-radius: var(--t-radius);

  background: var(--t-surface);

  box-shadow: 0 18px 45px rgba(15, 23, 42, .12);

}



html[data-public-theme="turkmod"] .user-dropdown {

  min-width: 210px;

  padding: 8px;

}



html[data-public-theme="turkmod"] .user-dropdown .dropdown-item {

  display: flex;

  align-items: center;

  gap: 10px;

  min-height: 36px;

  border-radius: 6px;

  color: var(--t-text);

  font-size: .88rem;

  font-weight: 600;

}



html[data-public-theme="turkmod"] .user-dropdown .dropdown-item:hover,

html[data-public-theme="turkmod"] .user-dropdown .dropdown-item:focus {

  background: var(--t-primary-soft);

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .nav-link-secondary .nav-link,

html[data-public-theme="turkmod"] .sidebar-left .nav-link {

  justify-content: flex-start;

  gap: 8px;

}



html[data-public-theme="turkmod"] .sidebar-left .nav-link span {

  min-width: 0;

}



html[data-public-theme="turkmod"] .cat-menu {

  max-width: 100%;

  min-width: 0;

  width: 100%;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__item {

  max-width: 100%;

  width: 100%;

}



html[data-public-theme="turkmod"] .cat-menu__row {

  display: flex;

  align-items: center;

  gap: 6px;

  min-width: 0;

  width: 100%;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__row {

  padding: 2px 4px 2px 8px;

  border: 1px solid transparent;

  border-radius: 6px;

  transition: background .18s ease, border-color .18s ease;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__trigger {

  appearance: none;

  cursor: pointer;

  background: transparent;

  color: var(--t-text);

  font: inherit;

  font-size: .88rem;

  font-weight: 700;

  text-align: left;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__trigger,

html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__root-link {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 48px 20px;

  column-gap: 8px;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__link--child {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 48px;

  column-gap: 8px;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__trigger:hover {

  border-color: rgba(139, 21, 56, .16);

  background: var(--t-primary-soft);

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__root-link:hover {

  border-color: rgba(139, 21, 56, .16);

  background: var(--t-primary-soft);

}



html[data-public-theme="turkmod"] .cat-menu--sidebar.nav.flex-column .cat-menu__root-link {

  gap: 6px;

  min-height: 32px;

  padding: 2px 4px 2px 8px;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__trigger:focus-visible {

  outline: 2px solid var(--t-primary-ring);

  outline-offset: 2px;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__item.is-active > .cat-menu__row,

html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__item.has-active-child > .cat-menu__row {

  border-color: rgba(139, 21, 56, .16);

  background: var(--t-primary-soft);

}



html[data-public-theme="turkmod"] .cat-menu__link {

  flex: 1 1 auto;

  min-width: 0;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__link:focus-visible {

  border-radius: 4px;

  outline: 2px solid var(--t-primary-ring);

  outline-offset: 2px;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__item.is-active > .cat-menu__row .cat-menu__name,

html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__item.is-active > .cat-menu__row .cat-menu__name i,

html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__item.is-active > .cat-menu__row .cat-menu__count,

html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__item.has-active-child > .cat-menu__row .cat-menu__name,

html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__item.has-active-child > .cat-menu__row .cat-menu__name i {

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .cat-menu__toggle {

  display: inline-grid;

  place-items: center;

  flex: 0 0 auto;

  width: 26px;

  height: 26px;

  border: 0;

  border-radius: 6px;

  background: var(--t-surface-muted);

  color: var(--t-muted);

  transition: color .18s ease, background .18s ease, transform .18s ease;

}



html[data-public-theme="turkmod"] .cat-menu__arrow {

  flex: 0 0 20px;

  width: 20px;

  justify-self: end;

  color: var(--t-muted);

  font-size: .78rem;

  line-height: 1;

  transition: transform .18s ease, color .18s ease;

}



html[data-public-theme="turkmod"] .cat-menu__arrow-spacer {

  flex: 0 0 20px;

  width: 20px;

  height: 20px;

}



html[data-public-theme="turkmod"] .cat-menu__toggle:hover,

html[data-public-theme="turkmod"] .cat-menu__toggle:focus-visible,

html[data-public-theme="turkmod"] .cat-menu__toggle[aria-expanded="true"] {

  background: var(--t-primary-soft);

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .cat-menu__toggle:focus-visible {

  outline: 2px solid var(--t-primary-ring);

  outline-offset: 2px;

}



html[data-public-theme="turkmod"] .cat-menu__toggle[aria-expanded="true"] i {

  transform: rotate(180deg);

}



html[data-public-theme="turkmod"] .cat-menu__toggle i {

  transition: transform .18s ease;

}



html[data-public-theme="turkmod"] .cat-menu__trigger[aria-expanded="true"] .cat-menu__arrow {

  color: var(--t-primary);

  transform: rotate(90deg);

}



html[data-public-theme="turkmod"] .cat-menu__children[hidden] {

  display: none !important;

}



html[data-public-theme="turkmod"] .cat-menu--sidebar .cat-menu__item.has-active-child > .cat-menu__children::before {

  background: rgba(139, 21, 56, .34);

}



html[data-public-theme="turkmod"] .cat-menu--topbar {

  max-height: min(58vh, 520px);

  overflow: auto;

  padding: 6px;

}



html[data-public-theme="turkmod"] .cat-menu--topbar .cat-menu__row {

  padding: 1px 0;

}



html[data-public-theme="turkmod"] .cat-menu--topbar .cat-menu__link {

  min-height: 34px;

  padding: 5px 8px;

  border-radius: 6px;

  color: var(--t-text);

}



html[data-public-theme="turkmod"] .cat-menu--topbar .cat-menu__link:hover {

  background: var(--t-primary-soft);

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .cat-dropdown {

  min-width: 300px;

  padding: 8px;

}



html[data-public-theme="turkmod"] .cat-menu__all-link {

  display: flex;

  align-items: center;

  gap: 9px;

  min-height: 36px;

  margin-bottom: 4px;

  border-radius: 6px;

  color: var(--t-text);

  font-weight: 700;

}



html[data-public-theme="turkmod"] .cat-menu__all-link:hover {

  background: var(--t-primary-soft);

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .cat-menu--topbar .cat-menu__children {

  margin: 0 0 5px 11px;

}



html[data-public-theme="turkmod"] .cat-menu__count {

  margin-left: auto;

}





html[data-public-theme="turkmod"] .dropdown-menu {

  border-color: var(--t-border);

  background-color: var(--t-surface);

  color: var(--t-text);

}



html[data-public-theme="turkmod"] .dropdown-item {

  color: var(--t-text);

}



html[data-public-theme="turkmod"] .dropdown-item:hover,

html[data-public-theme="turkmod"] .dropdown-item:focus {

  background-color: var(--t-primary-soft);

  color: var(--t-primary);

}



@media (max-width: 991.98px) {

  html[data-public-theme="turkmod"] .site-header .container {

    flex-wrap: wrap;

  }



  html[data-public-theme="turkmod"] .site-header .navbar-collapse {

    order: 5;

    flex-basis: 100%;

  }



  html[data-public-theme="turkmod"] .cat-dropdown {

    min-width: 100%;

  }

}



/* Fix for category menu hidden attribute */

.cat-menu__children[hidden] { display: none !important; }



/* === GLOBAL UI STANDARDIZATION FIXES === */



/* 1. Breadcrumb: Uniform 8px spacing above & below, everywhere.

   ---------------------------------------------------------------

   Bootstrap's .breadcrumb ships with margin-bottom:1rem which causes

   uneven spacing.  We reset it globally and let only the *container*

   define vertical rhythm (8px each side). */



/* Reset Bootstrap's own .breadcrumb margin */

.breadcrumb {

    --bs-breadcrumb-margin-bottom: 0 !important;

    margin-bottom: 0 !important;

    margin-top: 0 !important;

}



/* The breadcrumb wrapper (container) is the single source of truth

   for vertical spacing: 8px top, 8px bottom. */



/* Inner .breadcrumb inside a container must NOT add its own spacing */



/* Topic-detail breadcrumb (used on topic pages) */



/* Remove gap between breadcrumb-container and the next layout */



/* 2. Topbar: search box narrower, header-right matches sidebar width.

   ------------------------------------------------------------------- */

@media (min-width: 992px) {

    html[data-public-theme="turkmod"] .header-right {

        flex: 0 0 300px;

        max-width: 300px;

        justify-content: flex-end;

    }

    html[data-public-theme="turkmod"] .topic-nav-search input {

        width: 140px !important;

    }

    html[data-public-theme="turkmod"] .topic-nav-search input:focus {

        width: 180px !important;

    }

}



/* 3. User dropdown opens on hover (desktop only).

   ------------------------------------------------ */

/* Hide Bootstrap's default caret – we use our own bi-chevron-down icon */

html[data-public-theme="turkmod"] .user-dropdown-container .dropdown-toggle::after {

    display: none !important;

}



@media (min-width: 992px) {

    html[data-public-theme="turkmod"] .user-dropdown-container {

        position: relative;

    }

    html[data-public-theme="turkmod"] .user-dropdown-container:hover > .dropdown-menu,

    html[data-public-theme="turkmod"] .user-dropdown-container:hover > .user-dropdown {

        display: block !important;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }

    html[data-public-theme="turkmod"] .user-dropdown-container > .dropdown-menu,

    html[data-public-theme="turkmod"] .user-dropdown-container > .user-dropdown {

        transition: opacity 0.15s ease, visibility 0.15s ease;

    }

    /* Invisible bridge: fills the mt-2 gap between toggle and menu

       so the mouse never leaves the hoverable surface. */

    html[data-public-theme="turkmod"] .user-dropdown-container > .dropdown-menu::before,

    html[data-public-theme="turkmod"] .user-dropdown-container > .user-dropdown::before {

        content: '';

        position: absolute;

        top: -12px;

        left: 0;

        right: 0;

        height: 12px;

    }

}



/* === TURKMOD TOPIC DETAIL TEMPLATE === */

html[data-public-theme="turkmod"] body.topic-detail-page .content-area {

  gap: var(--t-stack-gap) !important;

}



/* Topic detail final overrides: info grid, headings, and download states. */



/* Sol kenarda marka aksanı — hover/hazır durumda belirir */



/* Spinner: yalnızca sayım sırasında görünür */



/* Durum: güvenlik beklemesi sürüyor */



/* Topic heading hierarchy: one h1, centered h2 section rhythm. */



/* Durum: indirme hazır */



/* === TURKMOD PUBLIC RHYTHM AND DIRECTORY PASS === */

html[data-public-theme="turkmod"] {

  --t-page-gap: 12px;

  --t-panel-pad: 16px;

  --t-focus-width: 1120px;

  --t-download-width: 920px;

  --t-category-card-min: 270px;

  --t-stack-gap: var(--t-page-gap);

}



html[data-public-theme="turkmod"] .site-main {

  padding-top: calc(var(--t-header-height) + var(--t-page-gap)) !important;

  padding-bottom: var(--t-page-gap) !important;

}



html[data-public-theme="turkmod"] body.topic-detail-page #main-content.site-main {

  padding-top: calc(var(--t-header-height) + var(--t-page-gap)) !important;

  padding-bottom: var(--t-page-gap) !important;

}



html[data-public-theme="turkmod"] .page-wrap {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}



html[data-public-theme="turkmod"] .layout.grid {

  gap: var(--t-page-gap) !important;

}



html[data-public-theme="turkmod"] .content-area {

  display: flex !important;

  flex-direction: column !important;

  gap: var(--t-page-gap) !important;

}



html[data-public-theme="turkmod"] .content-area > * {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}



html[data-public-theme="turkmod"] .content-area > section {

  padding-top: 0 !important;

  padding-bottom: 0 !important;

}



html[data-public-theme="turkmod"] .sidebar-right > .row {

  --bs-gutter-y: var(--t-page-gap) !important;

}



@media (max-width: 991.98px) {

  html[data-public-theme="turkmod"] .site-main,

  html[data-public-theme="turkmod"] body.topic-detail-page #main-content.site-main {

    padding-top: calc(var(--t-header-height) + var(--t-page-gap)) !important;

  }

}



@media (max-width: 640px) {

  html[data-public-theme="turkmod"] {

    --t-page-gap: 10px;

    --t-panel-pad: 14px;

  }

}



/* === TURKMOD THEME REFINEMENTS: CATEGORY TREE, TOPIC HERO, PROFILE MENU === */

html[data-public-theme="turkmod"] .ui-theme-profile-dropdown {

  position: relative;

}



html[data-public-theme="turkmod"] .ui-theme-profile-toggle {

  display: inline-flex;

  align-items: center;

  min-height: 40px;

  gap: 9px;

  padding: 5px 10px 5px 6px;

  border: 1px solid color-mix(in srgb, var(--t-primary) 18%, var(--t-border));

  border-radius: 8px;

  background: var(--t-primary-soft);

  color: var(--t-text);

  font: inherit;

  font-size: .86rem;

  font-weight: 700;

  line-height: 1;

  cursor: pointer;

  transition: border-color .18s ease, background .18s ease, color .18s ease;

}



html[data-public-theme="turkmod"] .ui-theme-profile-toggle:hover,

html[data-public-theme="turkmod"] .ui-theme-profile-toggle:focus-visible,

html[data-public-theme="turkmod"] .ui-theme-profile-dropdown.is-open .ui-theme-profile-toggle {

  border-color: color-mix(in srgb, var(--t-primary) 48%, var(--t-border));

  background: color-mix(in srgb, var(--t-primary-soft) 72%, var(--t-surface) 28%);

  color: var(--t-primary);

}



html[data-public-theme="turkmod"] .ui-theme-profile-toggle .bi-chevron-down {

  font-size: .78rem;

  transition: transform .18s ease;

}



html[data-public-theme="turkmod"] .ui-theme-profile-dropdown.is-open .ui-theme-profile-toggle .bi-chevron-down {

  transform: rotate(180deg);

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu,

html[data-public-theme="turkmod"] .user-dropdown-container:hover > .ui-theme-profile-menu {

  position: absolute;

  top: calc(100% + 10px);

  right: 0;

  z-index: 1060;

  display: grid !important;

  width: min(286px, calc(100vw - 24px));

  min-width: 0;

  gap: 5px;

  padding: 10px;

  border: 1px solid var(--t-border);

  border-radius: 8px;

  background: var(--t-surface);

  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);

  transform: translateY(-4px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu[hidden] {

  display: none !important;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu.show:not([hidden]) {

  transform: translateY(0);

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu::before {

  content: "";

  position: absolute;

  top: -7px;

  right: 20px;

  width: 12px;

  height: 12px;

  border-top: 1px solid var(--t-border);

  border-left: 1px solid var(--t-border);

  background: var(--t-surface);

  transform: rotate(45deg);

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__head {

  display: grid;

  grid-template-columns: 38px minmax(0, 1fr);

  gap: 10px;

  align-items: center;

  padding: 8px;

  border: 1px solid var(--t-border);

  border-radius: 7px;

  background: var(--t-surface-muted);

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__head strong,

html[data-public-theme="turkmod"] .ui-theme-profile-menu__head small {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__head strong {

  color: var(--t-text);

  font-size: .9rem;

  font-weight: 800;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__head small {

  color: var(--t-muted);

  font-size: .74rem;

  font-weight: 750;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__item {

  display: grid;

  grid-template-columns: 30px minmax(0, 1fr);

  align-items: center;

  min-height: 40px;

  gap: 9px;

  padding: 7px 8px;

  border-radius: 7px;

  color: var(--t-text);

  font-size: .88rem;

  font-weight: 700;

  line-height: 1.1;

  text-decoration: none !important;

  transition: background-color .15s ease, color .15s ease !important;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__item i {

  display: inline-grid;

  width: 30px;

  height: 30px;

  place-items: center;

  border-radius: 6px;

  background: var(--t-primary-soft);

  color: var(--t-primary);

  font-size: .9rem;

  transition: color .15s ease !important;

}







html[data-public-theme="turkmod"] .ui-theme-profile-menu__item.is-danger {

  color: #b42342;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__item.is-danger i {

  background: rgba(180, 35, 66, .1);

  color: #b42342;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__divider {

  display: block;

  height: 1px;

  margin: 4px 2px;

  background: var(--t-border);

}



html[data-public-theme="turkmod"] .topic-comments .ui-comment-load-more-wrap.is-hidden,

html[data-public-theme="turkmod"] .topic-comments .ui-comment-pagination-info.is-hidden {

  display: none !important;

}



@media (max-width: 991.98px) {



  html[data-public-theme="turkmod"] .ui-theme-profile-menu {

    right: 0;

  }

}



@media (max-width: 640px) {

  html[data-public-theme="turkmod"] .ui-theme-profile-toggle__name {

    display: none;

  }

}



/* === TOPIC DETAIL MOCKUP REFINEMENT === */



/* === CATEGORY DIRECTORY POLISHED GRID === */



/* Final category hero alignment guard */



/* === TURKMOD THEME HARDENING PASS === */

html[data-public-theme="turkmod"] {

  --ui-theme-space-2xs: 4px;

  --ui-theme-space-xs: 6px;

  --ui-theme-space-sm: 8px;

  --ui-theme-space-md: 12px;

  --ui-theme-space-lg: 16px;

  --ui-theme-space-xl: 22px;

  --ui-theme-page-gap: 12px;

  --ui-theme-panel-pad: 14px;

  --ui-theme-radius: 8px;

  --ui-theme-radius-sm: 7px;

  --ui-theme-control-height: 38px;

  --ui-theme-danger: #b42342;

  --ui-theme-success: #047857;

  --ui-theme-warning: #b45309;

  --t-page-gap: var(--ui-theme-page-gap);

  --t-panel-pad: var(--ui-theme-panel-pad);

  --t-stack-gap: var(--ui-theme-page-gap);

  --t-radius: var(--ui-theme-radius);

  --t-muted: #626a78;

  --text-dim: #626a78;

}



@media (max-width: 640px) {

  html[data-public-theme="turkmod"] {

    --ui-theme-page-gap: 10px;

    --ui-theme-panel-pad: 12px;

  }

}



html[data-public-theme="turkmod"] :where(.content-area) {

  box-sizing: border-box;

  min-width: 0;

}



html[data-public-theme="turkmod"] .content-area > :where(article, section, div, main, nav) {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}





html[data-public-theme="turkmod"] .content-area > section {

  padding-top: 0 !important;

  padding-bottom: 0 !important;

}



/* Category card visual hooks: future cover/accent data only needs inline CSS vars. */



/* Comments: one-card rhythm, readable actions, stable light/dark contrast. */



/* === TURKMOD MOD UPLOAD AND EDIT FOCUS PASS === */



/* === TURKMOD TOPIC LIST CARD REDESIGN === */

html[data-public-theme="turkmod"] .topic-grid[data-topic-list-container],

html[data-public-theme="turkmod"] .topic-grid.topic-grid--list {

  display: grid !important;

  grid-template-columns: minmax(0, 1fr) !important;

  gap: 14px !important;

  align-items: stretch !important;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card {

  --ptc-accent: var(--t-primary, #8b1538);

  --ptc-accent-strong: var(--t-primary-hover, #70102d);

  --ptc-teal: #0f766e;

  --ptc-amber: #b45309;

  --ptc-bg: var(--t-surface, #fff);

  --ptc-muted-bg: var(--t-surface-muted, #f7f8fa);

  --ptc-line: var(--t-border, #dde3eb);

  --ptc-text: var(--t-text, #14191e);

  --ptc-muted: var(--t-muted, #777d8e);

  position: relative !important;

  isolation: isolate;

  display: grid !important;

  grid-template-columns: minmax(168px, 204px) minmax(0, 1fr) !important;

  align-items: center !important;

  gap: 16px !important;

  min-width: 0 !important;

  min-height: 0 !important;

  overflow: hidden !important;

  padding: 11px !important;

  border: 1px solid color-mix(in srgb, var(--ptc-line) 70%, var(--ptc-accent) 30%) !important;

  border-radius: 8px !important;

  background:

    linear-gradient(135deg, color-mix(in srgb, var(--ptc-accent) 5%, transparent), transparent 36%),

    linear-gradient(180deg, var(--ptc-bg), color-mix(in srgb, var(--ptc-bg) 94%, var(--ptc-muted-bg) 6%)) !important;

  box-shadow: 0 18px 44px -36px rgba(20, 25, 30, .58), inset 0 1px 0 rgba(255, 255, 255, .78) !important;

  color: var(--ptc-text) !important;

  transform: translateZ(0);

  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card::before {

  content: "";

  position: absolute;

  inset: 0 auto 0 0;

  z-index: 3;

  width: 3px;

  background: linear-gradient(180deg, var(--ptc-accent), var(--ptc-teal) 58%, var(--ptc-amber));

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:

    linear-gradient(118deg, transparent 0 41%, color-mix(in srgb, var(--ptc-accent) 8%, transparent) 41% 45%, transparent 45%),

    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--ptc-amber) 8%, transparent), transparent 34%);

  pointer-events: none;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:hover,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:focus-within {

  border-color: color-mix(in srgb, var(--ptc-accent) 42%, var(--ptc-line)) !important;

  box-shadow: 0 24px 54px -36px rgba(20, 25, 30, .62), 0 0 0 1px color-mix(in srgb, var(--ptc-accent) 13%, transparent) !important;

  transform: translateY(-2px);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__media {

  position: relative;

  display: block;

  min-width: 0;

  min-height: 0;

  height: 168px;

  overflow: hidden;

  background:

    linear-gradient(135deg, color-mix(in srgb, var(--ptc-accent) 12%, var(--ptc-muted-bg)), var(--ptc-muted-bg));

  border: 1px solid color-mix(in srgb, var(--ptc-line) 74%, transparent);

  border-radius: 7px;

  box-shadow: 0 14px 30px -26px rgba(20, 25, 30, .72);

  color: inherit;

  text-decoration: none;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__media::before {

  content: "";

  position: absolute;

  inset: -30% auto -30% -62%;

  z-index: 2;

  width: 42%;

  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .24), transparent);

  opacity: 0;

  pointer-events: none;

  transform: skewX(-18deg) translateX(0);

  transition: opacity .22s ease, transform .48s ease;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__image {

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  min-height: 0 !important;

  object-fit: cover !important;

  object-position: center !important;

  transform: scale(1.001);

  transition: filter .24s ease, transform .32s ease !important;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__media-shade {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, transparent 56%, color-mix(in srgb, var(--ptc-bg) 18%, transparent)),

    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .32));

  pointer-events: none;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:hover .ui-theme-topic-card__image,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:focus-within .ui-theme-topic-card__image {

  filter: saturate(1.12) contrast(1.05) brightness(1.03);

  transform: scale(1.045);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:hover .ui-theme-topic-card__media::before,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:focus-within .ui-theme-topic-card__media::before {

  opacity: 1;

  transform: skewX(-18deg) translateX(380%);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__body {

  display: grid !important;

  grid-template-rows: auto auto auto auto;

  min-width: 0 !important;

  gap: 8px;

  padding: 8px 12px 8px 0 !important;

  color: var(--ptc-text) !important;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  min-width: 0;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__category,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__date {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-width: 0;

  min-height: 29px;

  padding: 5px 10px;

  border-radius: 7px;

  font-size: .73rem;

  font-weight: 850;

  letter-spacing: 0;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__category {

  max-width: min(100%, 320px);

  border: 1px solid color-mix(in srgb, var(--ptc-accent) 28%, var(--ptc-line));

  background: linear-gradient(180deg, color-mix(in srgb, var(--ptc-accent) 11%, var(--ptc-bg)), color-mix(in srgb, var(--ptc-accent) 6%, var(--ptc-bg)));

  color: var(--ptc-accent);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__category span {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__date {

  flex: 0 0 auto;

  margin-left: auto;

  border: 1px solid color-mix(in srgb, var(--ptc-line) 84%, transparent);

  background: color-mix(in srgb, var(--ptc-muted-bg) 78%, var(--ptc-bg) 22%);

  color: color-mix(in srgb, var(--ptc-text) 72%, var(--ptc-muted));

  font-weight: 860;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__date i {

  color: var(--ptc-amber);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__title {

  min-width: 0 !important;

  margin: 0 !important;

  color: var(--ptc-text) !important;

  font-size: clamp(1.02rem, 1.08vw, 1.16rem) !important;

  font-weight: 800 !important;

  letter-spacing: 0 !important;

  line-height: 1.22 !important;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__title a {

  display: -webkit-box;

  overflow: hidden;

  color: inherit !important;

  text-decoration: none !important;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  transition: color .18s ease;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__title a:hover,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__title a:focus-visible {

  color: var(--ptc-accent) !important;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__excerpt {

  display: -webkit-box !important;

  min-width: 0 !important;

  margin: 0 !important;

  overflow: hidden !important;

  color: var(--ptc-muted) !important;

  font-size: .87rem !important;

  font-weight: 520 !important;

  letter-spacing: 0 !important;

  line-height: 1.58 !important;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  min-width: 0;

  padding-top: 9px;

  border-top: 1px solid color-mix(in srgb, var(--ptc-line) 78%, transparent);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__meta {

  display: flex;

  align-items: center;

  flex: 1 1 auto;

  flex-wrap: wrap;

  gap: 6px;

  min-width: 0;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__owner,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__metric {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-width: 0;

  min-height: 30px;

  max-width: 100%;

  padding: 4px 8px;

  border: 1px solid color-mix(in srgb, var(--ptc-line) 86%, transparent);

  border-radius: 7px;

  background: color-mix(in srgb, var(--ptc-muted-bg) 72%, var(--ptc-bg) 28%);

  color: var(--ptc-muted);

  font-size: .77rem;

  font-weight: 850;

  letter-spacing: 0;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__owner {

  color: var(--ptc-text);

  background: linear-gradient(90deg, color-mix(in srgb, var(--ptc-teal) 10%, var(--ptc-bg)), color-mix(in srgb, var(--ptc-muted-bg) 72%, var(--ptc-bg) 28%));

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card a.ui-theme-topic-card__owner:hover,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card a.ui-theme-topic-card__owner:focus-visible {

  border-color: color-mix(in srgb, var(--ptc-teal) 42%, var(--ptc-line));

  color: var(--ptc-text);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__meta-icon {

  display: inline-grid;

  place-items: center;

  flex: 0 0 auto;

  width: 21px;

  height: 21px;

  border-radius: 6px;

  background: color-mix(in srgb, var(--ptc-bg) 68%, var(--ptc-accent) 12%);

  color: var(--ptc-accent);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__owner .ui-theme-topic-card__meta-icon {

  background: color-mix(in srgb, var(--ptc-teal) 13%, var(--ptc-bg));

  color: var(--ptc-teal);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__metric--comments .ui-theme-topic-card__meta-icon {

  background: color-mix(in srgb, var(--ptc-amber) 12%, var(--ptc-bg));

  color: var(--ptc-amber);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__owner strong,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__metric strong {

  min-width: 0;

  overflow: hidden;

  color: var(--ptc-text);

  font-weight: 800;

  text-overflow: ellipsis;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__owner strong {

  max-width: 112px;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__action {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  justify-self: end;

  flex: 0 0 auto;

  gap: 8px;

  min-height: 35px;

  padding: 7px 14px;

  border: 1px solid var(--ptc-accent);

  border-radius: 7px;

  background: var(--ptc-accent);

  color: #fff !important;

  font-size: .8rem;

  font-weight: 800;

  letter-spacing: 0;

  line-height: 1;

  text-decoration: none !important;

  transition: background .18s ease, border-color .18s ease, transform .18s ease;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__action i {

  font-size: .95rem;

  transition: transform .18s ease;

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__action:hover,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:hover .ui-theme-topic-card__action,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:focus-within .ui-theme-topic-card__action,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__action:focus-visible {

  border-color: var(--ptc-accent-strong);

  background: var(--ptc-accent-strong);

  color: #fff !important;

  transform: translateY(-1px);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__action:hover i,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:hover .ui-theme-topic-card__action i,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:focus-within .ui-theme-topic-card__action i,

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__action:focus-visible i {

  transform: translateX(2px);

}



html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card a:focus-visible {

  outline: 2px solid var(--ptc-accent);

  outline-offset: 2px;

}



@media (max-width: 991.98px) {

  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card {

    grid-template-columns: minmax(168px, 214px) minmax(0, 1fr) !important;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__body {

    padding: 13px 14px !important;

  }

}



@media (max-width: 767.98px) {

  html[data-public-theme="turkmod"] .topic-grid[data-topic-list-container],

  html[data-public-theme="turkmod"] .topic-grid.topic-grid--list {

    gap: 14px !important;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card {

    grid-template-columns: minmax(0, 1fr) !important;

    min-height: 0 !important;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:hover,

  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card:focus-within {

    transform: none;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__media {

    min-height: 0;

    height: auto;

    aspect-ratio: 16 / 9;

    border-right: 0;

    border-bottom: 1px solid color-mix(in srgb, var(--ptc-line) 82%, transparent);

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__body {

    padding: 13px !important;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__top {

    align-items: flex-start;

  }

}



@media (max-width: 575.98px) {

  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__body {

    gap: 11px;

    padding: 14px !important;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__top,

  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__top {

    align-items: stretch;

    flex-direction: column;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__footer {

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__date {

    width: fit-content;

    margin-left: 0;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__meta {

    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    gap: 0;

    min-height: 38px;

    padding: 3px;

    border: 1px solid color-mix(in srgb, var(--ptc-line) 84%, transparent);

    border-radius: 7px;

    background: color-mix(in srgb, var(--ptc-muted-bg) 76%, var(--ptc-bg) 24%);

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__owner {

    flex: 1 1 auto;

    min-width: 0;

    border: 0;

    background: transparent;

    box-shadow: none;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__action {

    width: fit-content;

    min-width: 148px;

    justify-self: start;

    padding-right: 18px;

    padding-left: 18px;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__metric {

    flex: 0 0 auto;

    width: auto;

    min-width: 58px;

    border: 0;

    border-left: 1px solid color-mix(in srgb, var(--ptc-line) 78%, transparent);

    border-radius: 0;

    background: transparent;

    box-shadow: none;

    justify-content: center;

    gap: 6px;

    padding-right: 8px;

    padding-left: 8px;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__metric--comments {

    min-width: 52px;

  }



  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card .ui-theme-topic-card__owner strong {

    max-width: none;

  }

}



@media (prefers-reduced-motion: reduce) {

  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card,

  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card * {

    transition: none !important;

  }

}



/* === TURKMOD UPLOAD/EDIT ACTION POLISH === */



@media (max-width: 767.98px) {

  html[data-public-theme="turkmod"] {

    overflow-x: hidden !important;

    overflow-x: clip !important;

  }

}



/* --- Premium UI Enhancements --- */



/* === TURKMOD ABSOLUTE GLOBAL RHYTHM OVERRIDE === */

/* KULLANICININ İSTEĞİ ÜZERİNE: HER YERDEKİ BOŞLUKLAR SAYFA STANDARTINA (var(--t-page-gap)) EŞİTLENDİ */

html[data-public-theme="turkmod"] .mb-3 {

    margin-bottom: var(--t-page-gap) !important;

}

html[data-public-theme="turkmod"] .mt-3 {

    margin-top: var(--t-page-gap) !important;

}



html[data-public-theme="turkmod"] .p-3 {

    padding-bottom: var(--t-page-gap) !important;

}



html[data-public-theme="turkmod"] .p-3 {

    padding-top: var(--t-page-gap) !important;

}



html[data-public-theme="turkmod"] .p-3 {

    padding-left: var(--t-page-gap) !important;

}



html[data-public-theme="turkmod"] .p-3 {

    padding-right: var(--t-page-gap) !important;

}

html[data-public-theme="turkmod"] .gap-3,

html[data-public-theme="turkmod"] .grid,

html[data-public-theme="turkmod"] .row {

    gap: var(--t-page-gap) !important;

}



/* === PROFIL SAYFASI KUTU (PADDING) VE IZGARA (GAP) MUTLAK EŞİTLEMESİ === */

/* Sidebar builder dynamic widgets */



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .card,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .cat-widget {

  border-radius: 8px;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .cat-widget.card {

  padding: 1rem;

  border: 1px solid var(--t-border);

  background: var(--t-surface);

  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);

}





html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .cat-widget__icon,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-topic-mini small,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-category-showcase i {

  color: var(--ui-theme-widget-accent);

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-topic-mini {

  display: grid;

  grid-template-columns: 58px minmax(0, 1fr);

  gap: .7rem;

  align-items: center;

  padding: .6rem 0;

  border-bottom: 1px solid var(--ui-border, rgba(148, 163, 184, .24));

  color: inherit;

  text-decoration: none;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-topic-mini:last-child {

  border-bottom: 0;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-topic-mini img {

  width: 58px;

  height: 44px;

  object-fit: cover;

  border-radius: 8px;

  background: var(--ui-surface-muted, #f8fafc);

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-topic-mini strong {

  display: block;

  overflow: hidden;

  color: var(--text, #111827);

  font-size: .86rem;

  font-weight: 800;

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-topic-mini small {

  display: block;

  margin-top: .2rem;

  font-size: .74rem;

  font-weight: 700;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-category-showcase,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-trend-tags {

  display: grid;

  gap: .55rem;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-category-showcase {

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-category-showcase a,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-trend-tags a {

  display: grid;

  gap: .2rem;

  min-width: 0;

  padding: .65rem;

  border: 1px solid var(--ui-border, rgba(148, 163, 184, .24));

  border-radius: 8px;

  background: var(--ui-surface-muted, #f8fafc);

  color: inherit;

  text-decoration: none;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-trend-tags a {

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: center;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-category-showcase span,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-trend-tags span {

  overflow: hidden;

  font-size: .82rem;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-category-showcase small,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-trend-tags small {

  color: var(--text-dim, #64748b);

  font-size: .72rem;

  font-weight: 850;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-announcement-card .card-body,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-user-action-card .card-body,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-sponsored-card .card-body {

  display: grid;

  gap: .65rem;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-announcement-card {

  border-color: color-mix(in srgb, var(--ui-theme-widget-accent) 38%, var(--ui-border, rgba(148, 163, 184, .24))) !important;

  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-theme-widget-accent) 13%, var(--ui-surface, #fff)), var(--ui-surface, #fff));

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-announcement-icon,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-user-action-icon {

  display: inline-grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 10px;

  background: color-mix(in srgb, var(--ui-theme-widget-accent) 14%, var(--ui-surface, #fff));

  color: var(--ui-theme-widget-accent);

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-announcement-card strong,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-user-action-card strong,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-sponsored-card strong {

  color: var(--text, #111827);

  font-size: .98rem;

  font-weight: 950;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-announcement-card p,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-user-action-card p,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-sponsored-card p {

  margin: 0;

  color: var(--text-dim, #64748b);

  font-size: .84rem;

  line-height: 1.45;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-announcement-card a,

html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-sponsored-card a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 34px;

  padding: 0 .85rem;

  border-radius: 8px;

  background: var(--ui-theme-widget-accent);

  color: #fff;

  font-size: .78rem;

  font-weight: 800;

  text-decoration: none;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-sponsored-card > img {

  width: 100%;

  max-height: 150px;

  object-fit: cover;

  border-radius: 8px 8px 0 0;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-sponsored-card small {

  width: max-content;

  padding: .2rem .45rem;

  border-radius: 999px;

  background: color-mix(in srgb, var(--ui-theme-widget-accent) 12%, var(--ui-surface, #fff));

  color: var(--ui-theme-widget-accent);

  font-size: .68rem;

  font-weight: 950;

  text-transform: uppercase;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-leader-mini {

  display: grid;

  grid-template-columns: 28px minmax(0, 1fr) auto;

  align-items: center;

  gap: .65rem;

  padding: .6rem 0;

  border-bottom: 1px solid var(--ui-border, rgba(148, 163, 184, .24));

  color: inherit;

  text-decoration: none;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-leader-mini:last-child {

  border-bottom: 0;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-leader-mini span {

  display: inline-grid;

  place-items: center;

  width: 26px;

  height: 26px;

  border-radius: 999px;

  background: var(--brand-accent, #8b1538);

  color: var(--theme-on-accent, #fff);

  font-size: .75rem;

  font-weight: 800;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-leader-mini strong {

  min-width: 0;

  overflow: hidden;

  color: var(--text, #111827);

  font-size: .9rem;

  text-overflow: ellipsis;

  white-space: nowrap;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-leader-mini small {

  color: var(--text-dim, #64748b);

  font-weight: 700;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-stat-mini-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: .65rem;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-stat-mini-grid div {

  display: grid;

  gap: .25rem;

  padding: .75rem;

  border: 1px solid var(--ui-border, rgba(148, 163, 184, .24));

  border-radius: 8px;

  background: var(--ui-surface-muted, #f8fafc);

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-stat-mini-grid i {

  color: var(--brand-accent, #8b1538);

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-stat-mini-grid strong {

  color: var(--text, #111827);

  font-size: 1.05rem;

  font-weight: 800;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-theme-stat-mini-grid small {

  color: var(--text-dim, #64748b);

  font-size: .74rem;

  font-weight: 700;

}



/* ============================================================

 * TurkMod authentication pages

 * Shared theme contract for login, registration and recovery.

 * ============================================================ */



html[data-public-theme="turkmod"] .layout:has(.ui-theme-auth) > .sidebar-left,

html[data-public-theme="turkmod"] .layout:has(.ui-theme-auth) > .sidebar-right,

html[data-public-theme="turkmod"] .layout:has(.ui-theme-auth) > aside.sidebar {

    display: none !important;

}



html[data-public-theme="turkmod"] .layout:has(.ui-theme-auth) {

    grid-template-columns: minmax(0, 1fr) !important;

    gap: var(--space-0) !important;

}



html[data-public-theme="turkmod"] .layout:has(.ui-theme-auth) > .content,

html[data-public-theme="turkmod"] .layout:has(.ui-theme-auth) > .content-area {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    max-width: 100% !important;

}



/* ============================================================

 * TurkMod responsive grid layout overrides

 * Dynamically adjusts grid templates and content-area placement

 * when one or both sidebars are disabled.

 * ============================================================ */

@media (min-width: 1200px) {

  html[data-public-theme="turkmod"] body.has-left-sidebar:not(.has-right-sidebar) .grid:not(.grid--focus) {

    grid-template-columns: 276px minmax(0, 1fr);

  }

  html[data-public-theme="turkmod"] body.has-right-sidebar:not(.has-left-sidebar) .grid:not(.grid--focus) {

    grid-template-columns: minmax(0, 1fr) 276px;

  }

}

@media (min-width: 992px) and (max-width: 1199.98px) {

  html[data-public-theme="turkmod"] body.has-left-sidebar:not(.has-right-sidebar) .grid:not(.grid--focus) {

    grid-template-columns: 240px minmax(0, 1fr);

  }

  html[data-public-theme="turkmod"] body.has-right-sidebar:not(.has-left-sidebar) .grid:not(.grid--focus) {

    grid-template-columns: minmax(0, 1fr) 240px;

  }

}

@media (min-width: 992px) {

  html[data-public-theme="turkmod"] body.has-left-sidebar:not(.has-right-sidebar) .grid:not(.grid--focus) .content-area {

    grid-column: 2;

  }

  html[data-public-theme="turkmod"] body.has-right-sidebar:not(.has-left-sidebar) .grid:not(.grid--focus) .content-area {

    grid-column: 1;

  }

  html[data-public-theme="turkmod"] body:not(.has-left-sidebar):not(.has-right-sidebar) .grid:not(.grid--focus) {

    grid-template-columns: minmax(0, 1fr);

  }

  html[data-public-theme="turkmod"] body:not(.has-left-sidebar):not(.has-right-sidebar) .grid:not(.grid--focus) .content-area {

    grid-column: 1;

  }

}



/* ============================================================

   Section: Home Toolbar

   ============================================================ */



/* Üstte ince marka aksanı — sol kalın çizgi yerine daha rafine bir vurgu */



/* Sol taraftaki "Sıralama" başlığı */



/* ============================================================

   Public UI final polish: profile, topbar, avatars, page rhythm

   ============================================================ */

html[data-public-theme="turkmod"] .site-header,

html[data-public-theme="turkmod"] .navbar,

html[data-public-theme="turkmod"] .header-right,

html[data-public-theme="turkmod"] .user-dropdown-container,

html[data-public-theme="turkmod"] .ui-theme-profile-dropdown,

html[data-public-theme="turkmod"] .notif-dropdown {

    overflow: visible !important;

}



html[data-public-theme="turkmod"] .ui-theme-profile-dropdown,

html[data-public-theme="turkmod"] .notif-dropdown {

    z-index: var(--z-dropdown);

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu,

html[data-public-theme="turkmod"] .notif-menu {

    z-index: var(--z-popover) !important;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__item.is-admin {

    color: var(--color-primary) !important;

    background: color-mix(in srgb, var(--color-primary-soft) 72%, var(--color-surface) 28%) !important;

}



html[data-public-theme="turkmod"] .ui-theme-profile-menu__item.is-admin i {

    color: var(--color-primary) !important;

    background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;

}



html[data-public-theme="turkmod"] .theme-toggle {

    position: relative;

    isolation: isolate;

    border-color: var(--color-border) !important;

    background: var(--color-surface) !important;

    color: var(--color-text) !important;

    box-shadow: var(--shadow-xs) !important;

    transition: var(--transition-control), transform var(--duration-fast) var(--ease-standard) !important;

}



html[data-public-theme="turkmod"] .theme-toggle:hover,

html[data-public-theme="turkmod"] .theme-toggle:focus-visible {

    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)) !important;

    background: color-mix(in srgb, var(--color-primary-soft) 62%, var(--color-surface) 38%) !important;

    color: var(--color-primary) !important;

}



html[data-public-theme="turkmod"] .theme-toggle:focus-visible {

    outline: 0 !important;

    box-shadow: var(--state-focus-ring) !important;

}



html[data-public-theme="turkmod"] .theme-toggle i {

    transition: transform var(--duration-base) var(--ease-standard) !important;

}



html[data-public-theme="turkmod"] :where(.default-avatar,

    .avatar-fallback) {

    display: inline-grid !important;

    place-items: center !important;

    aspect-ratio: 1;

    overflow: hidden;

    border: 1px solid color-mix(in srgb, var(--color-on-primary) 36%, transparent);

    border-radius: var(--radius-pill) !important;

    background:

        radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--color-on-primary) 28%, transparent), transparent 34%),

        conic-gradient(from 140deg, var(--color-primary), var(--color-info), var(--color-success), var(--color-warning), var(--color-primary));

    color: var(--color-on-primary) !important;

    text-shadow: none;

    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-on-primary) 18%, transparent), var(--shadow-xs);

    font-weight: var(--font-weight-bold, 600);

    line-height: 1;

    letter-spacing: 0;

    text-transform: uppercase;

}



html[data-public-theme="turkmod"] :where(.default-avatar,

    .avatar-fallback) img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: inherit;

}



html[data-public-theme="turkmod"] .avatar .avatar-fallback {

    width: 100% !important;

    height: 100% !important;

}



/* Central image-based noavatar shell. */

html[data-public-theme="turkmod"] .default-avatar {

    background-color: var(--color-surface) !important;

}



/* Final upload/edit composer polish */



/* Final private profile and page rhythm corrections */

html[data-public-theme="turkmod"] {

    overflow-x: clip;

}



/* ==========================================================================

   PUBLIC PAGE WIDTH CONSISTENCY (turkmod)

   Auth/upload/edit pages now use the focus layout (no sidebars). Align their

   outer width, breadcrumb and gutters identically to the home page so every

   public page shares the same frame. The inner content box (auth card / upload

   card) stays at a comfortable reading width, centred inside the full frame.

   ========================================================================== */



/* Auth pages: focus grid spans the full page-wrap, just like home content */



/* Kill the nested .container double-gutter for auth + upload shells so the

   content lines up with the home layout edges (page-wrap already pads). */



/* Auth card: span the FULL focus frame, identical to the home content edges

   (madde 10 + 12). Breadcrumb is intentionally NOT overridden here — its native

   .container.ui-container already centres at --container-wide, exactly like the

   home page breadcrumb, so it lines up pixel-for-pixel across all pages. */



/* Upload/edit form width follows the same public container frame as breadcrumb. */



/* ==========================================================================

   THEME SWITCH — instant, glitch-free toggle (madde 2)

   When the theme controller swaps data-theme it adds .theme-switching to <html>

   for one animation frame. While present, ALL color/background/border/shadow

   transitions are killed so the whole page repaints in a single step instead of

   a staggered shimmer cascade. Transform/opacity hover effects resume the moment

   the class is removed.

   ========================================================================== */



/* ==========================================================================

   SMOOTH PAGE TRANSITIONS (madde 9)

   Progressive enhancement: browsers that support the View Transitions API get

   a native cross-fade between full page loads; everyone else falls back to a

   lightweight content fade-in. Zero JS cost, no blocking, no layout shift.

   Respects prefers-reduced-motion. The theme-switching guard above disables

   these during a theme swap so the two never fight.

   ========================================================================== */

@view-transition {

    navigation: auto;

}



@keyframes ui-theme-page-fade-in {

    from { opacity: 0; transform: translateY(6px); }

    to   { opacity: 1; transform: translateY(0); }

}



html[data-public-theme="turkmod"] .site-main > .container.page-wrap {

    animation: ui-theme-page-fade-in 0.34s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) both;

}



@media (prefers-reduced-motion: reduce) {

    @view-transition { navigation: none; }

    html[data-public-theme="turkmod"] .site-main > .container.page-wrap {

        animation: none;

    }

}



/* ============================================================

   PROFILE REVISION: quick-access cards + recent comments

   ============================================================ */



/* Recent comments — fix broken layout */



/* Aktif Oturum — tüm cihazlardan çıkış butonu */



/* İçerik Bilgileri — kesilen değerler için özel tooltip kutusu */

html[data-public-theme="turkmod"] .topic-info-row strong[data-info-value] {

    cursor: help;

}



/* Profile private polish: resilient quick cards and visible metadata icons. */





/* Topic comment card redesign: mini profile card + divider + content rail. */



/* ─── YORUM METNİ: Kelimeler alt alta dizilme düzeltmesi ─── */



/* ─── ALINTIYLA CEVAP FORMU: Sıkışık görünüm düzeltmesi ─── */



/* ─── YORUM ITEM GRID OVERRIDE: pro-comments.css block layout korunur ─── */



/* ─── YORUM İKONLARI: Buton içi ikonlar görünür yapılır ─── */



/* ─── YENİ GÖRSEL VE ETKİLEŞİM İYİLEŞTİRMELERİ â”€â”€â”€ */



/* 1. Yazar Profil Linki */



/* 2. Yeni Yorum Animasyonu (animate-in) */



/* 3. İskelet Yükleme Ekranı (Skeleton Loader) */



/* 4. Paylaşılan/Odaklanılan Yorum Vurgusu (is-linked-comment) */



/* 5. Boş Yorum Durumu (Empty State) Tasarımı */



/* 6. Yorum Kırpma / Devamını Oku Fade Düzeltmesi */



/* Profile sidebar: minimal and elegant override */



/* Hero card (identity) -- center-aligned */



/* Stats card -- left-aligned */

/* Profile sidebar: stable centered card polish */


/* Comment overflow guards for sidebar summaries and profile comment cards. */
html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-panel__body > a.comment-item {
    display: flex !important;

    align-items: flex-start !important;

    min-width: 0 !important;

    max-width: 100% !important;

    overflow: hidden !important;

    color: inherit !important;

    text-decoration: none !important;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-panel__body > a.comment-item .avatar {

    flex: 0 0 auto !important;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .ui-panel__body > a.comment-item > .min-w-0 {

    min-width: 0 !important;

    max-width: 100% !important;

    flex: 1 1 auto !important;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .comment-excerpt {

    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;

    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;

    word-break: break-word !important;

    hyphens: auto !important;

    line-height: var(--line-height-normal) !important;

}



html[data-public-theme="turkmod"] .ui-theme-sidebar-builder .comment-excerpt + .text-secondary {

    display: block !important;

    max-width: 100% !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

}

/* Profile spacing and disabled leaderboard state refinements. */

/* Download redirect page: force theme-aware surfaces in both light and dark modes. */

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card.ui-theme-topic-card--no-image {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card.ui-theme-topic-card--no-image .ui-theme-topic-card__body {
  padding: var(--space-3) !important;
}

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card.ui-theme-topic-card--no-image .ui-theme-topic-card__top {
  align-items: flex-start;
  flex-wrap: wrap;
}

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card.ui-theme-topic-card--no-image .ui-theme-topic-card__date {
  margin-left: 0;
}

html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card.ui-theme-topic-card--no-image .ui-theme-topic-card__footer {
  align-items: flex-start;
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  html[data-public-theme="turkmod"] .ui-theme-topic-card.topic-card.ui-theme-topic-card--no-image {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Footer + theme mode consistency fixes */

html[data-public-theme="turkmod"]:is( [data-theme-mode="light"]) {

  --public-footer-bg: #ffffff;

  --public-footer-text: #0f172a;

  --public-footer-muted: #475569;

  --public-footer-link: #1f2937;

  --public-footer-border: rgba(15, 23, 42, 0.12);

  --public-footer-heading: #1e293b;

  --public-footer-link-hover: var(--primary, #8b1538);

}



html[data-public-theme="turkmod"]:is( [data-theme-mode="dark"]) {

  --public-footer-bg: #020617;

  --public-footer-text: #e5e7eb;

  --public-footer-muted: #94a3b8;

  --public-footer-link: #cbd5e1;

  --public-footer-border: rgba(148, 163, 184, 0.18);

  --public-footer-heading: #f1f5f9;

  --public-footer-link-hover: var(--primary, #8b1538);

}



html[data-public-theme="turkmod"] .site-footer,

html[data-public-theme="turkmod"] .footer {

  background: var(--public-footer-bg, var(--bg)) !important;

  border-top: 1px solid var(--public-footer-border, var(--border)) !important;

  color: var(--public-footer-text, var(--text)) !important;

  box-shadow: none !important;

}



html[data-public-theme="turkmod"] .site-footer::before,

html[data-public-theme="turkmod"] .site-footer::after,

html[data-public-theme="turkmod"] .footer::before,

html[data-public-theme="turkmod"] .footer::after {

  content: none !important;

  display: none !important;

}



html[data-public-theme="turkmod"] .site-footer-bar {

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

}



html[data-public-theme="turkmod"] .site-footer .site-footer-nav .nav-link,


html[data-public-theme="turkmod"]:is( [data-theme-mode="light"]) {
  --public-footer-bg: #ffffff;
  --public-footer-text: #0f172a;
  --public-footer-muted: #475569;
  --public-footer-link: #1f2937;
  --public-footer-border: rgba(15, 23, 42, 0.12);
  --public-footer-heading: #1e293b;
  --public-footer-link-hover: var(--primary, #8b1538);
}

html[data-public-theme="turkmod"]:is( [data-theme-mode="dark"]) {
  --public-footer-bg: #020617;
  --public-footer-text: #e5e7eb;
  --public-footer-muted: #94a3b8;
  --public-footer-link: #cbd5e1;
  --public-footer-border: rgba(148, 163, 184, 0.18);
  --public-footer-heading: #f1f5f9;
  --public-footer-link-hover: var(--primary, #8b1538);
}

html[data-public-theme="turkmod"] .site-footer,
html[data-public-theme="turkmod"] .footer {
  background: var(--public-footer-bg, var(--bg)) !important;
  border-top: 1px solid var(--public-footer-border, var(--border)) !important;
  color: var(--public-footer-text, var(--text)) !important;
  box-shadow: none !important;
}

html[data-public-theme="turkmod"] .site-footer::before,
html[data-public-theme="turkmod"] .site-footer::after,
html[data-public-theme="turkmod"] .footer::before,
html[data-public-theme="turkmod"] .footer::after {
  content: none !important;
  display: none !important;
}

html[data-public-theme="turkmod"] .site-footer-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-public-theme="turkmod"] .site-footer .site-footer-nav .nav-link,
html[data-public-theme="turkmod"] .site-footer .site-footer-copy {
  color: var(--public-footer-muted, var(--text-dim)) !important;
}


html[data-public-theme="turkmod"] .site-footer .site-footer-brand-link {
  color: var(--public-footer-heading, var(--text)) !important;
  font-weight: 600;
  text-decoration: none;
}

html[data-public-theme="turkmod"] .site-footer .site-footer-nav .nav-link:hover {
  color: var(--public-footer-link-hover, var(--primary)) !important;
}

html[data-public-theme="turkmod"] .site-footer .site-footer-brand-link:hover {
  color: var(--public-footer-link, var(--text)) !important;
}

/* Public topbar auth buttons and theme toggle polish */
html[data-public-theme="turkmod"] .header-auth-actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

html[data-public-theme="turkmod"] .header-auth-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 40px;
  padding: .55rem .95rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--primary) 18%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-white) 88%, var(--bg-hover) 12%);
  color: var(--text);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

html[data-public-theme="turkmod"] .header-auth-link i {
  font-size: 1rem;
  line-height: 1;
}

html[data-public-theme="turkmod"] .header-auth-link:hover,
html[data-public-theme="turkmod"] .header-auth-link:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
}

html[data-public-theme="turkmod"] .header-auth-link:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-xs), 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

html[data-public-theme="turkmod"] .header-auth-link--secondary:hover,
html[data-public-theme="turkmod"] .header-auth-link--secondary:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  background: color-mix(in srgb, var(--primary-light) 16%, var(--bg-white) 84%);
  color: var(--primary);
}

html[data-public-theme="turkmod"] .header-auth-link--primary {
  border-color: transparent;
  background: var(--primary);
  color: var(--on-primary);
}

html[data-public-theme="turkmod"] .header-auth-link--primary:hover,
html[data-public-theme="turkmod"] .header-auth-link--primary:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 88%, #000 12%);
  color: var(--on-primary);
}

html[data-public-theme="turkmod"] .theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--primary) 16%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-white) 88%, var(--bg-hover) 12%);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

html[data-public-theme="turkmod"] .theme-toggle:hover,
html[data-public-theme="turkmod"] .theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
  background: color-mix(in srgb, var(--primary-light) 18%, var(--bg-white) 82%);
  color: var(--primary);
}

html[data-public-theme="turkmod"] .theme-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-xs), 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

html[data-public-theme="turkmod"] .theme-toggle i {
  display: inline-grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s ease;
}

html[data-public-theme="turkmod"][data-theme="dark"] .theme-toggle i {
  transform: rotate(-10deg);
}

html[data-public-theme="turkmod"] .theme-toggle:active {
  transform: translateY(0) scale(.98);
}
html[data-public-theme="turkmod"] .header-auth-actions {
  flex-wrap: nowrap;
}

html[data-public-theme="turkmod"] .header-auth-link {
  white-space: nowrap;
}