/* 
 * Material Design DLE Teması
 * Açık/Koyu Mod ve Grid/Liste Görünümü Destekli
 * Çoklu Renk Şeması
 */

/* Renk Şemaları */
html[data-color-scheme="purple"] {
    --primary-color: #673AB7; /* Deep Purple */
    --primary-light: #9575CD;
    --primary-dark: #4527A0;
    --accent-color: #E040FB; /* Pembe aksan rengi */
    --primary-color-rgb: 103, 58, 183;
    --accent-color-rgb: 224, 64, 251;
}

html[data-color-scheme="blue"] {
    --primary-color: #1976D2; /* Blue */
    --primary-light: #42A5F5;
    --primary-dark: #0D47A1;
    --accent-color: #FF4081;
    --primary-color-rgb: 25, 118, 210;
    --accent-color-rgb: 255, 64, 129;
}

html[data-color-scheme="teal"] {
    --primary-color: #009688; /* Teal */
    --primary-light: #4DB6AC;
    --primary-dark: #00796B;
    --accent-color: #FF4081;
    --primary-color-rgb: 0, 150, 136;
    --accent-color-rgb: 255, 64, 129;
}

html[data-color-scheme="red"] {
    --primary-color: #C2185B; /* Pink */
    --primary-light: #E91E63;
    --primary-dark: #880E4F;
    --accent-color: #03A9F4;
    --primary-color-rgb: 194, 24, 91;
    --accent-color-rgb: 3, 169, 244;
}

html[data-color-scheme="amber"] {
    --primary-color: #FF8F00; /* Amber */
    --primary-light: #FFA726;
    --primary-dark: #F57C00;
    --accent-color: #7C4DFF;
    --primary-color-rgb: 255, 143, 0;
    --accent-color-rgb: 124, 77, 255;
}

/* Renk şeması menüsü için */
.color-circle {
    width: 16px; /* Daha küçük boyut */
    height: 16px;
    border-radius: 50%;
    display: inline-block;
}

.bg-purple { background-color: #673AB7; }
.bg-blue { background-color: #1976D2; }
.bg-teal { background-color: #009688; }
.bg-red { background-color: #C2185B; }
.bg-amber { background-color: #FF8F00; }

/* Açık mod genel değişkenler */
:root {
    --background-color: #f5f5f5;
    --surface-color: #ffffff;
    --text-primary: rgba(0, 0, 0, 0.87);
    --text-secondary: rgba(0, 0, 0, 0.60);
    --border-color: rgba(0, 0, 0, 0.12);
    --card-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    --transition-speed: 0.3s;
    
    /* Varsayılan renk şeması (mor) */
    --primary-color: #673AB7;
    --primary-light: #9575CD;
    --primary-dark: #4527A0;
    --accent-color: #E040FB;
    --primary-color-rgb: 103, 58, 183;
    --accent-color-rgb: 224, 64, 251;
    
    /* Sidebar için ek değişkenler */
    --bg-card: #ffffff;
    --bg-light: #f8f9fa;
    --text-muted: #6c757d;
}

/* Koyu mod genel değişkenler */
[data-bs-theme="dark"] {
    --background-color: #121212;
    --surface-color: #1E1E1E;
    --text-primary: rgba(255, 255, 255, 0.87);
    --text-secondary: rgba(255, 255, 255, 0.60);
    --border-color: rgba(255, 255, 255, 0.12);
    
    /* Koyu modda renkleri biraz daha parlak yap */
    --primary-light: var(--primary-color);
    --primary-color: var(--primary-light);
    
    /* Sidebar için koyu mod değişkenler */
    --bg-card: #2b2b2b;
    --bg-light: #333333;
    --text-muted: #a7a7a7;
}

/* Bootstrap'ın primary rengini geçersiz kıl */
.custom-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Genel Stil */
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    color: var(--text-primary);
    transition: background-color var(--transition-speed), color var(--transition-speed);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-light);
    text-decoration: none;
}

/* Material Dalgalanma Efekti */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.6s, opacity 0.6s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* Header ve Navigation */
.header-area {
    background-color: var(--surface-color);
    transition: background-color var(--transition-speed);
}

.brand-text {
    font-weight: 500;
    font-size: 1.25rem;
}

.navbar {
    padding: 0.5rem 0; /* Daha kompakt navbar */
}

/* NAVBAR BUTON DÜZELTMESİ - DAHA KOMPAKT */
.navbar-nav .nav-link {
    position: relative;
    padding: 0.4rem 0.75rem; /* Daha küçük padding */
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem; /* Daha küçük font boyutu */
}

.header-area .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.header-area .material-icons {
    font-size: 1.1rem; /* Daha küçük icon */
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}

.navbar-nav .nav-link.active {
    color: var(--primary-color);
}

/* Dropdown öğeleri için düzeltme */
.dropdown-item {
    padding: 0.35rem 1rem;
    font-size: 0.875rem;
}

/* Arama butonu */
.btn-search {
    padding: 0.375rem !important;
}

/* -------------------------------------------- */
/* YENİ SIDEBAR TASARIMI - MODERN VE RESPONSIVE */
/* -------------------------------------------- */

/* Sidebar Konteyner */
.sidebar-container {
    position: sticky;
    top: 80px;
}

/* Sidebar Kartlar */
.sidebar-card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

[data-bs-theme="dark"] .sidebar-card {
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.sidebar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
}

.sidebar-card::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background-color: var(--accent-color);
    transition: width 0.4s ease;
    z-index: 2;
}

.sidebar-card:hover::before {
    width: 100%;
}

/* Sidebar Başlık */
.sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.sidebar-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    padding-left: 12px;
    color: var(--text-primary);
    z-index: 2;
}

.sidebar-header h5:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    height: 16px;
    width: 3px;
    background: var(--primary-color);
    border-radius: 3px;
}

html[data-color-scheme="purple"] .sidebar-header h5:before {
    background: #673AB7;
}

html[data-color-scheme="blue"] .sidebar-header h5:before {
    background: #1976D2;
}

html[data-color-scheme="teal"] .sidebar-header h5:before {
    background: #009688;
}

html[data-color-scheme="red"] .sidebar-header h5:before {
    background: #C2185B;
}

html[data-color-scheme="amber"] .sidebar-header h5:before {
    background: #FF8F00;
}

.sidebar-header::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(var(--primary-color-rgb), 0.03);
    top: -75px;
    right: -75px;
    border-radius: 50%;
    transition: all 0.5s ease;
    z-index: 1;
}

.sidebar-card:hover .sidebar-header::after {
    transform: scale(1.2);
}

/* Sidebar İçerik */
.sidebar-content {
    padding: 15px;
}

.sidebar-card .sidebar-content.p-0 {
    padding: 0;
}

/* Kategori pilleri */
.category-pills a {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 5px 5px 0;
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 13px;
    transition: all 0.3s;
}

[data-bs-theme="dark"] .category-pills a {
    background: rgba(var(--primary-color-rgb), 0.2);
}

.category-pills a:hover {
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    transform: translateY(-3px);
}

/* DLE Catmenu için stil */
.sidebar-card ul.catmenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-card ul.catmenu li {
    margin-bottom: 6px;
}

.sidebar-card ul.catmenu li a {
    display: block;
    padding: 10px 15px;
    border-radius: 8px;
    color: var(--text-primary);
    transition: all 0.3s;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.03);
}

[data-bs-theme="dark"] .sidebar-card ul.catmenu li a {
    background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-card ul.catmenu li a:hover {
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--primary-color);
    text-decoration: none;
    padding-left: 20px;
}

.sidebar-card ul.catmenu li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: var(--primary-color);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.sidebar-card ul.catmenu li a:hover::before {
    transform: scaleY(1);
}

.sidebar-card ul.catmenu li a.active {
    background: var(--primary-color);
    color: white;
}

/* Etiket bulutu */
.tag-cloud a {
    display: inline-block;
    padding: 3px 8px;
    margin: 0 3px 5px 0;
    background: var(--bg-light);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
    transition: all 0.3s;
}

.tag-cloud a:hover {
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    transform: translateY(-3px);
}

/* Popüler İçerikler ve Topnews stil düzenlemesi */
.sidebar-card .recent-post {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s;
}

.sidebar-card .recent-post:last-child {
    border-bottom: none;
}

.sidebar-card .recent-post:hover {
    background-color: var(--bg-light);
    transform: translateX(5px);
}

.sidebar-card .recent-post .recent-post-title {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.4;
}

.sidebar-card .recent-post .recent-post-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.sidebar-card .recent-post .recent-post-meta i {
    font-size: 14px;
    margin-right: 3px;
}

/* DLE Calendar için stil */
.sidebar-card table.calendar {
    width: 100%;
    table-layout: fixed;
}

.sidebar-card .calendar th {
    text-align: center;
    padding: 5px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-muted);
}

.sidebar-card .calendar td {
    text-align: center;
    padding: 5px;
    font-size: 13px;
}

.sidebar-card .calendar td a {
    display: block;
    padding: 2px;
    border-radius: 4px;
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.1);
    transition: all 0.3s;
}

.sidebar-card .calendar td a:hover {
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    transform: scale(1.1);
}

/* -------------------------------------------- */
/* ANKET BÖLÜMÜ (VOTE) YENİ STİL */
/* -------------------------------------------- */
/* Material Design Anket Kartı */
.block_grey {
    background: var(--surface-color, #fff);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    border: 1px solid var(--border-color, rgba(0,0,0,0.12));
    padding: 20px;
    margin-bottom: 25px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.block_grey > .title {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-primary, rgba(0,0,0,0.87));
}

/* Diğer anketler linki */
.vote_more {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.vote_more a {
    color: var(--primary-color, #673AB7);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.vote_more a:hover {
    opacity: 1;
    text-decoration: none;
}

/* Anket seçenekleri */
.vote_list {
    margin: 0 0 20px 0;
}

/* Özel Radio Button Stili - Material Design */
.vote_list .vote,
.vote_list .pollanswer {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
    display: block;
}

/* Radio butonları tamamen gizle */
.vote_list .vote > input,
.vote_list .pollanswer > input {
    display: none;
}

/* Seçenek kartı stil */
.vote_list .vote > label,
.vote_list .pollanswer > label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    border-radius: 30px;
    background-color: rgba(var(--primary-color-rgb, 103, 58, 183), 0.03);
    border: 1px solid #e0e0e0;
    color: var(--text-primary, rgba(0, 0, 0, 0.87));
    font-weight: normal;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.vote_list .vote > label:hover,
.vote_list .pollanswer > label:hover {
    background-color: rgba(var(--primary-color-rgb, 103, 58, 183), 0.05);
    border-color: rgba(var(--primary-color-rgb, 103, 58, 183), 0.2);
}

/* Custom radio circle */
.vote_list .vote > label:before,
.vote_list .pollanswer > label:before {
    content: "";
    display: inline-block;
    min-width: 22px;
    width: 22px;
    height: 22px;
    margin-right: 12px;
    border: 2px solid rgba(var(--primary-color-rgb, 103, 58, 183), 0.4);
    background-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Seçili radio stil */
.vote_list .vote > input:checked + label:before,
.vote_list .pollanswer > input:checked + label:before {
    border-width: 7px;
    border-color: var(--primary-color, #673AB7);
}

/* Seçili label stil */
.vote_list .vote > input:checked + label,
.vote_list .pollanswer > input:checked + label {
    background-color: rgba(var(--primary-color-rgb, 103, 58, 183), 0.08);
    border-color: rgba(var(--primary-color-rgb, 103, 58, 183), 0.3);
}

/* Butonlar */
.block_grey .btn, 
.block_grey button[onclick*="doVote('vote')"],
.block_grey button[onclick*="doPoll('vote')"] {
    background: var(--primary-color, #673AB7);
    color: white;
    font-weight: 500;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 10px;
}

.block_grey .btn-border,
.block_grey button[onclick*="doVote('results')"],
.block_grey button[onclick*="doPoll('results')"] {
    background: #f5f5f5;
    color: var(--text-primary, rgba(0, 0, 0, 0.87));
    border: 1px solid #e0e0e0;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.block_grey .btn:hover,
.block_grey button[onclick*="doVote('vote')"],
.block_grey button[onclick*="doPoll('vote'")] {
    background: var(--primary-light, #9575CD);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Oy Sayıları */
.block_grey .vote_votes,
.block_grey .pollallvotes {
    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
    margin-bottom: 15px;
    font-size: 0.9rem;
}


/* -------------------------------------------- */
/* ANKET BÖLÜMÜ SONU */
/* -------------------------------------------- */

/* DLE Poll için stil */
.sidebar-card .poll-title {
    font-size: 15px;
    margin-bottom: 10px;
}

.sidebar-card .poll-answers label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    transition: all 0.3s;
    padding: 8px 10px;
    border-radius: 6px;
}

.sidebar-card .poll-answers label:hover {
    background: rgba(var(--primary-color-rgb), 0.05);
}

.sidebar-card .poll-button {
    margin-top: 10px;
}

.sidebar-card .poll-button button {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.sidebar-card .poll-button button:hover {
    background: var(--primary-light);
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(var(--primary-color-rgb), 0.3);
}

.sidebar-card .poll-results {
    margin-top: 10px;
}

.sidebar-card .poll-result-item {
    margin-bottom: 10px;
}

.sidebar-card .poll-result-text {
    font-size: 14px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.sidebar-card .poll-result-progress {
    height: 6px;
    background: rgba(var(--primary-color-rgb), 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.sidebar-card .poll-result-bar {
    height: 100%;
    background: var(--primary-color);
    transition: width 1s ease-out;
}

/* Sponsorlu içerik */
.sidebar-sponsor {
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
}

.sidebar-sponsor .sidebar-header {
    border-bottom: none;
    display: flex;
    justify-content: center;
    padding: 8px;
}

.sidebar-sponsor .sidebar-content {
    padding: 15px;
}

/* Ad Space */
.ad-space {
    padding: 15px;
    border-radius: 8px;
    background: linear-gradient(45deg, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--accent-color-rgb), 0.05) 100%);
    transition: all 0.3s ease;
}

.ad-space:hover {
    transform: scale(1.02);
}

/* Arşiv Stili */
.sidebar-card .archives-tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-card .archives-tree li {
    margin-bottom: 6px;
}

.sidebar-card .archives-tree a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-primary);
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0.03);
    font-size: 14px;
}

[data-bs-theme="dark"] .sidebar-card .archives-tree a {
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-card .archives-tree a:hover {
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--primary-color);
    transform: translateX(5px);
}

.sidebar-card .archives-tree a .count {
    float: right;
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 10px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 20px;
    transition: all 0.3s;
}

.sidebar-card .archives-tree a:hover .count {
    background: var(--primary-color);
    color: white;
}

/* Responsive */
@media (max-width: 991px) {
    .sidebar-container {
        margin-top: 1rem;
        position: static;
    }
}

/* -------------------------------------------- */
/* YENİ SIDEBAR TASARIMI SONU */
/* -------------------------------------------- */

/* İçerik Alanı */
.page-title {
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.page-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 50px;
    background-color: var(--primary-color);
}

/* Fullstory Container - Özel Stil */
.fullstory-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

/* -------------------------------------------- */
/* KART GÖRÜNÜMLERİ SORUN DÜZELTMESİ */
/* -------------------------------------------- */
/* Material Design Kart Stilleri - DLE Uyumlu */

/* Kart Temel Yapısı */
.md-card {
    background-color: var(--surface-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.md-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Medya Alanı */
.card-media {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 oranı */
}

.card-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.md-card:hover .card-media img {
    transform: scale(1.05);
}

/* Kategori Rozeti */
.category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--primary-color);
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
}

.category-badge a {
    color: white !important;
    text-decoration: none;
}

/* Sabitlenmiş Etiket */
.fixed_label {
    position: absolute;
    left: 0; top: 0;
    width: 5px; height: 100%;
    background-color: var(--primary-color);
}

/* Favoriler ve Düzenleme İkonları */
.story_icons {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    display: flex;
    gap: 10px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.story_icons li {
    display: inline-block;
}

.story_icons li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.story_icons li span:hover {
    background-color: var(--primary-color);
    color: white;
}

.story_icons i {
    font-size: 16px;
}

/* İçerik Alanı */
.card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    font-size: 18px;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.card-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.card-title a:hover {
    color: var(--primary-color);
}

/* Meta Bilgileri */
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Metin Alanı */
.card-text {
    margin-bottom: 15px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.editdate {
    margin-top: 10px;
    font-style: italic;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Etiketler */
.card-tags {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 15px;
}

/* Aksiyon Butonları */
.card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.left-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* DLE Rating Stillerimiz */
.rate {
    display: flex;
    align-items: center;
}

.rate_stars {
    display: inline-block;
}

.rate_like, .rate_like-dislike {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rate_like-dislike span {
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.rate_like-dislike span:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
}

.ratingtypeplusminus {
    font-weight: 500;
    margin: 0 3px;
}

.ratingplus {
    color: #2e7d32;
}

.ratingminus {
    color: #d32f2f;
}

/* Paylaş Butonu ve Dropdown */
.share-wrap {
    position: relative;
}

.share-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.share-btn:hover {
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.1);
}

.share-dropdown {
    position: absolute;
    display: none;
    bottom: 100%;
    left: 0;
    background: var(--surface-color);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 5px;
    margin-bottom: 5px;
    z-index: 10;
    white-space: nowrap;
}

.share-dropdown.active {
    display: flex;
    gap: 5px;
}

.share-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white !important;
    text-decoration: none !important;
}

.share-item.facebook { background-color: #1877F2; }
.share-item.twitter { background-color: #1DA1F2; }
.share-item.whatsapp { background-color: #25D366; }
.share-item.telegram { background-color: #0088cc; }

/* Şikayet Butonu */
.complaint-link {
    list-style: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.complaint-link:hover {
    color: var(--primary-color);
}

.title_hide {
    display: none;
}

/* Devamını Oku Butonu */
.read-more-btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white !important;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.read-more-btn:hover {
    background-color: var(--primary-light);
    text-decoration: none !important;
}

.read-more-btn i {
    margin-left: 5px;
    transition: transform 0.2s ease;
}

.read-more-btn:hover i {
    transform: translateX(3px);
}

/* Karanlık Mod Desteği */
[data-bs-theme="dark"] .read-more-btn {
    background-color: var(--primary-dark, #263238); /* Daha koyu arka plan */
    color: rgba(255, 255, 255, 0.9) !important; /* Biraz daha yumuşak beyaz */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Daha belirgin gölge */
}

[data-bs-theme="dark"] .read-more-btn:hover {
    background-color: var(--primary-color); /* Ana renk hover durumunda */
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] .story_icons li span {
    background-color: rgba(50, 50, 50, 0.9);
    color: rgba(255, 255, 255, 0.9);
}

/* Gösterim modları */
.content-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Liste Görünümü */
.content-view-list .md-card {
    flex-direction: row;
}

.content-view-list .card-media {
    width: 250px;
    min-width: 250px;
    padding-top: 0;
    height: auto;
}

/* Mobil Düzenlemeler */
@media (max-width: 768px) {
    .content-view-list .md-card {
        flex-direction: column;
    }
    
    .content-view-list .card-media {
        width: 100%;
        padding-top: 56.25%;
    }
    
    .card-actions {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .right-actions {
        width: 100%;
    }
    
    .read-more-btn {
        display: block;
        text-align: center;
        width: 100%;
    }
    
    .card-meta {
        gap: 8px;
    }
    
    .share-dropdown {
        right: 0;
        left: auto;
    }
}
/* -------------------------------------------- */
/* KART GÖRÜNÜMLERİ DÜZELTMESİ SONU */
/* -------------------------------------------- */

/* Makale Sayfası */
.full-story {
    background-color: var(--surface-color);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--card-shadow);
    width: 100%;
    position: relative;
}

.full-story .post-title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 1rem;
    color: var(--primary-color);
    padding-right: 100px; /* Aksiyon butonları için yer açılıyor */
}

.full-story .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.full-story .post-meta span {
    display: flex;
    align-items: center;
}

.full-story .post-meta i {
    font-size: 1rem;
    margin-right: 0.35rem;
}

.full-story .post-content {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.full-story .post-tags {
    margin-bottom: 1.5rem;
}

.full-story .post-tags a {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background-color: rgba(var(--primary-color-rgb, 103, 58, 183), 0.1);
    color: var(--primary-color);
    font-size: 0.85rem;
    transition: background-color 0.3s ease;
}

.full-story .post-tags a:hover {
    background-color: rgba(var(--primary-color-rgb, 103, 58, 183), 0.2);
}

.full-story .post-image {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
}

.full-story .post-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .full-story {
        padding: 1.5rem;
        border-radius: 6px;
    }
    
    .full-story .post-title {
        font-size: 1.5rem;
        padding-right: 0;
    }
    
    .full-story .post-meta {
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .full-story .post-content {
        font-size: 1rem;
        line-height: 1.6;
    }
}

@media (max-width: 576px) {
    .full-story {
        padding: 1rem;
    }
    
    .full-story .post-title {
        font-size: 1.3rem;
    }
    
    .full-story .post-meta {
        font-size: 0.8rem;
    }
}

/* İlgili Makaleler */
.related-posts {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.related-posts .section-title {
    color: var(--primary-color);
    font-weight: 500;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.related-posts .section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 50px;
    background-color: var(--primary-color);
}

.related-posts .content-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .related-posts .section-title {
        font-size: 1.3rem;
    }
    
    .related-posts .content-view-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .related-posts .content-view-grid {
        grid-template-columns: 1fr;
    }
}

/* Yorumlar */
.comments-area {
    background-color: var(--surface-color);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
}

.comments-area .comment-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.comment-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comment-item .comment-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 1rem;
}

.comment-item .comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-item .comment-body {
    flex: 1;
}

.comment-item .comment-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.comment-item .comment-author {
    font-weight: 500;
    color: var(--primary-color);
}

.comment-item .comment-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.comment-item .comment-text {
    margin-bottom: 0.5rem;
}

.comment-item .comment-actions a {
    font-size: 0.85rem;
    margin-right: 1rem;
    color: var(--text-secondary);
}

.comment-item .comment-actions a:hover {
    color: var(--primary-color);
}

/* Yorum Formu */
.comment-form {
    margin-top: 2rem;
}

.comment-form .form-control {
    border-radius: 4px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    background-color: var(--surface-color);
    color: var(--text-primary);
}

.comment-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb, 103, 58, 183), 0.25);
}

@media (max-width: 768px) {
    .comments-area {
        padding: 1.5rem;
    }
    
    .comments-area .comment-title {
        font-size: 1.3rem;
    }
    
    .comment-item .comment-meta {
        flex-direction: column;
    }
    
    .comment-item .comment-date {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .comments-area {
        padding: 1rem;
    }
    
    .comment-item {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}

/* Sayfalama */
.pagination {
    margin-top: 2rem;
    justify-content: center;
}

.pagination .page-item .page-link {
    color: var(--primary-color);
    background-color: var(--surface-color);
    border-color: var(--border-color);
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.pagination .page-item.disabled .page-link {
    color: var(--text-secondary);
}

/* Footer */
.footer {
    margin-top: 3rem;
    background-color: var(--primary-dark);
    color: white;
    padding: 3rem 0;
}

.footer h5 {
    font-weight: 500;
    margin-bottom: 1.25rem;
    position: relative;
}

.footer h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    height: 2px;
    width: 40px;
    background-color: var(--accent-color);
}

.footer a {
    color: white;
    transition: opacity 0.3s ease;
}

.footer a:hover {
    opacity: 0.8;
    text-decoration: none;
}

.footer ul li {
    margin-bottom: 0.5rem;
}

/* Butonlar ve Formlar */
.btn {
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Duyarlı Tasarım Ayarları */
@media (max-width: 991.98px) {
    .content-view-list .short-story {
        flex-direction: column;
    }
    
    .content-view-list .short-story .post-thumb {
        flex: 0 0 100%;
        height: 200px;
    }
    
    .sidebar {
        margin-bottom: 2rem;
    }
}

@media (max-width: 767.98px) {
    .content-view-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
    
    .full-story {
        padding: 1.5rem;
    }
    
    .full-story .post-title {
        font-size: 1.75rem;
    }
    
    .comments-area {
        padding: 1.5rem;
    }
    
    /* Mobil görünüm için küçük ayarlar */
    .post-thumb {
        aspect-ratio: 16/10; /* Mobilde daha uygun oran */
    }
}

@media (max-width: 575.98px) {
    .navbar-brand .brand-text {
        display: none;
    }
    
    .full-story {
        padding: 1rem;
    }
    
    .full-story .post-title {
        font-size: 1.5rem;
    }
    
    .comment-item .comment-meta {
        flex-direction: column;
    }
}

/* Başlık Stili */
.section-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.section-title h2 {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Tema renklerine uygun gradient çizgi */
.title-line {
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, rgba(var(--primary-color-rgb), 0.1) 100%);
    border-radius: 3px;
}

/* Mor tema için */
html[data-color-scheme="purple"] .title-line {
    background: linear-gradient(90deg, #673AB7 0%, rgba(103, 58, 183, 0.1) 100%);
}

/* Mavi tema için */
html[data-color-scheme="blue"] .title-line {
    background: linear-gradient(90deg, #1976D2 0%, rgba(25, 118, 210, 0.1) 100%);
}

/* Turkuaz tema için */
html[data-color-scheme="teal"] .title-line {
    background: linear-gradient(90deg, #009688 0%, rgba(0, 150, 136, 0.1) 100%);
}

/* Bordo tema için */
html[data-color-scheme="red"] .title-line {
    background: linear-gradient(90deg, #C2185B 0%, rgba(194, 24, 91, 0.1) 100%);
}

/* Amber tema için */
html[data-color-scheme="amber"] .title-line {
    background: linear-gradient(90deg, #FF8F00 0%, rgba(255, 143, 0, 0.1) 100%);
}

@media (max-width: 768px) {
    .section-title h2 {
        font-size: 1.5rem;
    }
}

/* Login modal düzenleme */
.login-modal {
    z-index: 1055;
}

.login-modal .modal-content {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .login-modal .modal-content {
    background-color: var(--surface-color);
}

/* Basitleştirilmiş Lazy Load Stili */
.post-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background-color: #f5f5f5;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-bs-theme="dark"] .post-thumb {
    background-color: #333;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block; /* Bu satır çok önemli - resim altındaki boşluğu kaldırır */
}

.post-thumb:hover img {
    transform: scale(1.05);
}

/* Loading GIF için özel stil ekleme */
.xfieldimage img:first-child {
    width: 32px !important; /* Loading GIF boyutunu küçült */
    height: auto !important;
}

/* DLE Loading.gif düzeltmesi */
img[src*="loading.gif"] {
    width: 24px !important;
    height: 24px !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* ===== PROFIL POPUP STILLEMESI - SADE VERSIYON ===== */

/* Profil diyalog kutusu - genel düzen */
#profile_popup .ui-dialog-content {
    padding: 0 !important;
}

/* Kullanıcı bilgi alanı */
.userinfo {
    display: flex;
    background-color: var(--surface-color, #fff);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    padding: 15px;
}

/* Avatar - sol tarafta kompakt */
.userinfo .avatar {
    width: 80px;
    height: 80px;
    margin-right: 15px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Avatar kapak resmi */
.userinfo .avatar .cover {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Kullanıcı bilgi listesi - sağ tarafta */
.userinfo ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.userinfo ul li {
    padding: 4px 0;
    color: var(--text-secondary, rgba(0,0,0,0.7));
    font-size: 13px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.05));
}

.userinfo ul li:last-child {
    border-bottom: none;
}

/* Bold etiketleri */
.userinfo ul li b {
    font-weight: 500;
    color: var(--text-primary, rgba(0,0,0,0.87));
    margin-left: 3px;
}

/* Online/offline durumları */
.userinfo ul li b[style*="color: #70bb39"] {
    color: #4CAF50 !important;
    display: inline-flex;
    align-items: center;
}

.userinfo ul li b[style*="color: #70bb39"]:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #4CAF50;
    border-radius: 50%;
    margin-right: 3px;
}

/* Linkler için stil */
.userinfo ul li a {
    color: var(--primary-color, #673AB7);
    text-decoration: none;
}

.userinfo ul li a:hover {
    text-decoration: underline;
}

/* RSS linki için özel stil */
.userinfo ul li a[href*="rss"] {
    color: #ff6d00;
    font-size: 11px;
}

/* Buton alanı */
#profile_popup .ui-dialog-buttonpane {
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.08)) !important;
}

/* Koyu tema uyumluluğu */
[data-bs-theme="dark"] .userinfo ul li b[style*="color: #70bb39"] {
    color: #81C784 !important;
}

[data-bs-theme="dark"] .userinfo ul li b[style*="color: #70bb39"]:before {
    background-color: #81C784;
}

/* =====  MATERIAL DESIGN NAVIGATION STYLES ===== */

.navigation {
  margin: 30px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.navigation-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Sayfa numaraları */
.pages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.pages span, 
.pages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 18px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  color: var(--text-primary, rgba(0,0,0,0.87));
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.pages a {
  background-color: transparent;
}

.pages a:hover {
  background-color: var(--primary-light, rgba(0,0,0,0.04));
  color: var(--primary-color, #0c5f7e);
}

.pages span {
  background-color: var(--primary-color, #0c5f7e);
  color: #fff !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}

/* İleri/geri butonları */
.page_next-prev {
  display: flex;
  gap: 8px;
}

.md-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: all 0.2s ease;
}

.md-btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: background-color 0.2s ease;
}

.md-btn-icon:hover {
  background-color: var(--primary-light, rgba(0,0,0,0.04));
}

.page_prev .icon,
.page_next .icon {
  width: 24px;
  height: 24px;
  fill: var(--primary-color, #0c5f7e);
  transition: fill 0.2s ease;
}

/* Disable durumu */
.page_next > span,
.page_prev > span {
  opacity: 0.4;
  pointer-events: none;
}

/* Koyu tema desteği */
[data-bs-theme="dark"] .pages a {
  color: var(--text-primary, rgba(255,255,255,0.87));
}

[data-bs-theme="dark"] .pages a:hover {
  background-color: var(--primary-light, rgba(255,255,255,0.08));
}

[data-bs-theme="dark"] .md-btn-icon:hover {
  background-color: var(--primary-light, rgba(255,255,255,0.08));
}

/* Mobil uyumluluk */
@media (max-width: 576px) {
  .navigation-container {
    flex-direction: column-reverse;
  }
  
  .pages {
    margin-bottom: 15px;
    justify-content: center;
  }
  
  .page_next-prev {
    width: 100%;
    justify-content: space-between;
  }
}

/* Ripple efekti */
.pages a::after,
.md-btn-icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--primary-color, #0c5f7e) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.pages a:active::after,
.md-btn-icon:active::after {
  transform: scale(0, 0);
  opacity: 0.4;
  transition: 0s;
}

/* -------------------------------------------- */
/* RATING VE AKSİYON BUTONLARI - YENİ DÜZEN */
/* -------------------------------------------- */

/* Alt kısım rating alanı - beğen/beğenme butonları */
.rating-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

/* Like/Dislike Butonları */
.btn-like, .btn-dislike {
    background: none;
    border: none;
    padding: 5px;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.btn-like:hover {
    color: #4CAF50;
}

.btn-dislike:hover {
    color: #F44336;
}

/* Rating sayacı */
.rating-counter {
    font-size: 18px;
    font-weight: 500;
    margin-left: 5px;
}

/* Rating butonları mobil düzen */
@media (max-width: 576px) {
    .rating-buttons {
        margin-bottom: 10px;
    }
    
    .btn-like, .btn-dislike {
        font-size: 18px;
    }
    
    .rating-counter {
        font-size: 16px;
    }
}

/* -------------------------------------------- */
/* PAYLAŞIM BUTONLARI */
/* -------------------------------------------- */
/* Paylaşım butonları */
.share-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.share-section span {
    color: var(--text-secondary);
    font-weight: 500;
    margin-right: 10px;
}

/* Sosyal medya butonları */
.share-buttons {
    display: flex;
    gap: 10px;
}

.share-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.2s ease;
    text-decoration: none;
}

.facebook { background-color: #3b5998; }
.twitter { background-color: #1da1f2; }
.telegram { background-color: #0088cc; }
.whatsapp { background-color: #25d366; }

.share-button:hover {
    transform: translateY(-3px);
}

/* Paylaşım butonları mobil düzen */
@media (max-width: 576px) {
    .share-section {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .share-buttons {
        margin-top: 10px;
    }
    
    .share-button {
        width: 32px;
        height: 32px;
    }
}

/* -------------------------------------------- */
/* HEADER AKSİYON BUTONLARI */
/* -------------------------------------------- */
/* Header action butonları (sağ üst köşe) */
.article-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 2;
}

/* Favori, Edit, Şikayet butonları */
.favorite-btn, .edit-btn, .report-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-secondary);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.favorite-btn:hover, .edit-btn:hover, .report-btn:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-3px);
}

.favorite-btn.active {
    color: #E91E63;
    background-color: rgba(255, 255, 255, 0.95);
}

/* Header aksiyon butonları mobil düzen */
@media (max-width: 576px) {
    .article-actions {
        position: static;
        justify-content: flex-end;
        margin-top: 15px;
        margin-bottom: 10px;
    }
    
    .favorite-btn, .edit-btn, .report-btn {
        width: 36px;
        height: 36px;
    }
}

/* Koyu tema desteği */
[data-bs-theme="dark"] .favorite-btn,
[data-bs-theme="dark"] .edit-btn,
[data-bs-theme="dark"] .report-btn {
    background-color: rgba(50, 50, 50, 0.9);
    color: rgba(255, 255, 255, 0.8);
}

[data-bs-theme="dark"] .favorite-btn:hover,
[data-bs-theme="dark"] .edit-btn:hover,
[data-bs-theme="dark"] .report-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

[data-bs-theme="dark"] .favorite-btn.active {
    color: #FF4081;
    background-color: rgba(50, 50, 50, 0.95);
}

/* -------------------------------------------- */
/* YORUM FORMU STİLLERİ - DLE UYUMLU */
/* -------------------------------------------- */
.comment-form {
    margin-top: 30px;
}

.comment-form h4 {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.comment-form h4:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}
/* -------------------------------------------- */

/* -------------------------------------------- */
/* DLE YORUM FORM KUTUSU */
/* -------------------------------------------- */
.box {
    background-color: var(--surface-color);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
}

.addcomment {
    padding: 0;
}

.box_in {
    padding: 20px;
}
/* -------------------------------------------- */

/* -------------------------------------------- */
/* FORM ELEMANLARI */
/* -------------------------------------------- */
.ui-form {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.ui-form li {
    margin-bottom: 15px;
}

.form-group.combo {
    display: flex;
    gap: 15px;
}

.combo_field {
    flex: 1;
}

.wide {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--surface-color);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
}

.wide:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.15);
    outline: none;
}
/* -------------------------------------------- */

/* -------------------------------------------- */
/* YORUM EDİTÖRÜ */
/* -------------------------------------------- */
#comment-editor {
    margin-bottom: 20px;
}

#comment-editor textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--surface-color);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    transition: all 0.2s ease;
}

#comment-editor textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.15);
    outline: none;
}

.comments-image-uploader-area {
    margin-top: 10px;
    font-size: 13px;
}

.comments-image-uploader-area a {
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.comments-image-uploader-area a:hover {
    text-decoration: underline;
}
/* -------------------------------------------- */

/* -------------------------------------------- */
/* FORM GÖNDERİM ALANI */
/* -------------------------------------------- */
.form_submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
/* -------------------------------------------- */

/* -------------------------------------------- */
/* CAPTCHA ALANI */
/* -------------------------------------------- */
.c-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.c-captcha img {
    border-radius: 4px;
}

.c-captcha input {
    width: 120px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--surface-color);
    color: var(--text-primary);
    font-size: 13px;
}

.c-captcha input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.15);
    outline: none;
}
/* -------------------------------------------- */

/* -------------------------------------------- */
/* GÖNDER BUTONU */
/* -------------------------------------------- */
.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn.btn-primary:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.btn.btn-primary i {
    margin-right: 6px;
    font-size: 14px;
}
/* -------------------------------------------- */

/* -------------------------------------------- */
/* YORUM FORMU MOBİL DÜZENLEMELER */
/* -------------------------------------------- */
@media (max-width: 768px) {
    .form-group.combo {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .form_submit {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .c-captcha {
        margin-bottom: 15px;
    }
    
    .btn.btn-primary {
        width: 100%;
    }
}
/* -------------------------------------------- */
/* -------------------------------------------- */
/* KOYU TEMA DESTEĞİ */
/* -------------------------------------------- */
[data-bs-theme="dark"] .wide,
[data-bs-theme="dark"] #comment-editor textarea,
[data-bs-theme="dark"] .c-captcha input {
    background-color: var(--bg-card, #2b2b2b);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .box {
    background-color: var(--bg-card, #2b2b2b);
}
/* --------------------------------------------*/