html[data-theme="light"] {
    --bg-main: #f4f7f9;
    --bg-card: #ffffff;
    --text-main: #2d3748;
    --text-muted: #718096;
    --text-accent: #3182ce;
    --text-accent-rgb: 49,130,206;
    --border-color: #e2e8f0;

    --input-bg: #ffffff;
    --input-border-focus: #3182ce;
    --input-border-focus-rgb: 49,130,206;

    --btn-primary-bg: #3182ce;
    --btn-primary-fg: #ffffff;
    --btn-secondary-bg: #e2e8f0;
    --btn-secondary-fg: #2d3748;
    --btn-danger-bg: #e53e3e;
    --btn-danger-fg: #ffffff;
    --btn-success-bg: #22c55e;
    --btn-success-fg: #ffffff;
    --btn-edit-bg: #dd6b20;
    --btn-edit-fg: #ffffff;
    --btn-outline-fg: #3182ce;
    --btn-outline-hover-bg: rgba(49,130,206, 0.1);

    --active-menu-bg: #3182ce;
    --active-menu-fg: #ffffff;

    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -1px rgba(0,0,0,0.04);

    --table-header-bg: #f9fafb;
    --table-row-hover-bg: #f0f5ff;

    --notification-success-bg: #dcfce7;
    --notification-success-border: #4ade80;
    --notification-success-text: #166534;
    --notification-warning-bg: #fef9c3;
    --notification-warning-border: #facc15;
    --notification-warning-text: #713f12;
    --notification-error-bg: #fee2e2;
    --notification-error-border: #f87171;
    --notification-error-text: #991b1b;

    --info-box-bg: #ebf8ff;
    --info-box-border: #90cdf4;
    --info-box-header-text: #2c5282;
    --info-box-body-text: #4a5568;
}

html[data-theme="dark"] {
    --bg-main: #171923;
    --bg-card: #2d3748;
    --text-main: #e2e8f0;
    --text-muted: #a0aec0;
    --text-accent: #63b3ed;
    --text-accent-rgb: 99,179,237;
    --border-color: #4a5568;

    --input-bg: #1a202c;
    --input-border-focus: #63b3ed;
    --input-border-focus-rgb: 99,179,237;

    --btn-primary-bg: #63b3ed;
    --btn-primary-fg: #1a202c;
    --btn-secondary-bg: #4a5568;
    --btn-secondary-fg: #e2e8f0;
    --btn-danger-bg: #fc8181;
    --btn-danger-fg: #1a202c;
    --btn-success-bg: #4ade80;
    --btn-success-fg: #1a202c;
    --btn-edit-bg: #f6ad55;
    --btn-edit-fg: #1a202c;
    --btn-outline-fg: #63b3ed;
    --btn-outline-hover-bg: rgba(99,179,237, 0.1);

    --active-menu-bg: #63b3ed;
    --active-menu-fg: #1a202c;

    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.25),0 2px 4px -1px rgba(0,0,0,0.2);

    --table-header-bg: #1a202c;
    --table-row-hover-bg: #374151;

    --notification-success-bg: #14532d;
    --notification-success-border: #22c55e;
    --notification-success-text: #bbf7d0;
    --notification-warning-bg: #713f12;
    --notification-warning-border: #eab308;
    --notification-warning-text: #fef08a;
    --notification-error-bg: #7f1d1d;
    --notification-error-border: #ef4444;
    --notification-error-text: #fecaca;

    --info-box-bg: #2c5282;
    --info-box-border: #63b3ed;
    --info-box-header-text: #90cdf4;
    --info-box-body-text: #a0aec0;
}

/* BASE STYLES */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
}

/* For smooth theme transition on manual toggle, not on initial load */
body.has-transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* To prevent initial flash of transition */
body.no-transition {
    transition: none !important;
}


/* CUSTOM COMPONENTS */
.bg-card-custom {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.text-main-custom { color: var(--text-main); }
.text-muted-custom { color: var(--text-muted); }
.text-accent-custom { color: var(--text-accent); }
.border-custom { border-color: var(--border-color); }

/* Buttons */
.btn {
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevent text wrapping inside buttons */
    border: 1px solid transparent; /* Ensure consistent border across types */
    letter-spacing: 0.025em; /* From style-0.css */
}
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border-color: var(--btn-primary-bg); /* From style-0.css */
}
.btn-primary:hover {
    filter: brightness(90%);
}
.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    border-color: var(--border-color); /* From style-0.css */
}
.btn-secondary:hover {
    filter: brightness(95%); /* From style-0.0.css */
}
html[data-theme="dark"] .btn-secondary:hover {
    filter: brightness(115%); /* From style-0.0.css */
}
.btn-danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-fg);
    border-color: var(--btn-danger-bg); /* From style-0.0.css */
}
.btn-danger:hover {
    filter: brightness(90%);
}
/* New buttons from style-0.0.css */
.btn-success {
    background-color: var(--btn-success-bg);
    color: var(--btn-success-fg);
    border-color: var(--btn-success-bg);
}
.btn-success:hover {
    filter: brightness(90%);
}
.btn-edit {
    background-color: var(--btn-edit-bg);
    color: var(--btn-edit-fg);
    border-color: var(--btn-edit-bg);
}
.btn-edit:hover {
    filter: brightness(90%);
}
.btn-icon-top {
    flex-direction: column;
    gap: 0.375rem;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    min-width: 6.5rem;
}
.btn-icon-top i {
    font-size: 1.1rem;
}
.btn-icon-top span {
    font-size: 0.8rem;
}
.btn-icon { /* From style-0.0.css */
    padding: 0.6rem;
    line-height: 1;
}
.btn-outline {
    background-color: transparent;
    border: 1px solid var(--btn-outline-fg);
    color: var(--btn-outline-fg);
}
.btn-outline:hover {
    background-color: var(--btn-outline-hover-bg);
}


/* Header & Sidebar */
aside nav a {
    color: var(--text-muted);
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
aside nav a.active-menu {
    background-color: var(--active-menu-bg);
    color: var(--active-menu-fg);
    font-weight: 600;
}
aside nav a.active-menu i,
aside nav a.active-menu span {
    color: var(--active-menu-fg);
}
aside nav a:hover {
    background-color: rgba(var(--text-accent-rgb),0.1); /* Uses dynamic RGB variable */
    color: var(--text-accent);
}
aside nav a:hover i,
aside nav a:hover span {
    color: var(--text-accent);
}

/* Page Title */
.page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-main);
}

/* Tables */
.table-wrapper {
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 0.875rem 1rem; /* Combined from both files */
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    vertical-align: middle;
}
th {
    background-color: var(--table-header-bg); /* From style-0.0.css */
    font-weight: 600;
    color: var(--text-muted);
}
tbody tr:hover {
    background-color: var(--table-row-hover-bg); /* From style-0.0.css */
}

/* Inputs & Textareas (consolidated with input-custom classes) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
textarea,
select {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.375rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    min-height: 42px; 
    box-sizing: border-box; 
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px rgba(var(--input-border-focus-rgb),0.25);
}

/* YENİ EKLENDİ: Input içi ikonlar için özel sınıf */
.input-wrapper {
    position: relative;
    display: flex; /* EKLENDİ: İçeriği flexbox ile hizala */
    align-items: center; /* EKLENDİ: Dikeyde ortala */
}

.input-icon {
    position: absolute;
    left: 0.875rem; /* Soldan boşluk */
    color: var(--text-muted);
    pointer-events: none; /* İkonun tıklanmasını engelle */
    z-index: 10; /* Gerekirse input'un üzerinde kalmasını sağla */
}

.input-with-icon {
    padding-left: 2.5rem !important; /* İkon için solda yeterli boşluk bırak */
}

/* Placeholder text color */
::placeholder {
    color: var(--text-muted) !important; /* Muted renk, force theme variable */
    opacity: 0.8; /* Biraz daha opak */
}

/* Labels */
label { /* From style-0.0.css */
    color: var(--text-muted);
    margin-bottom: 0.375rem;
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Notifications/Alerts */
#formMesajContainer {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
    width:100%;
    max-width: 24rem;
}
.notification {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.notification.show {
    opacity: 1;
    transform: translateX(0);
}
.notification-success {
    background-color: var(--notification-success-bg);
    border-color: var(--notification-success-border);
    color: var(--notification-success-text);
}
.notification-success .notification-icon {
    color: var(--notification-success-border);
}
.notification-warning {
    background-color: var(--notification-warning-bg);
    border-color: var(--notification-warning-border);
    color: var(--notification-warning-text);
}
.notification-warning .notification-icon { /* Corrected from style.css */
    color: var(--notification-warning-border); /* Consistent with other notification icons */
}
.notification-error {
    background-color: var(--notification-error-bg);
    border-color: var(--notification-error-border);
    color: var(--notification-error-text);
}
.notification-error .notification-icon { /* Corrected from style.css */
    color: var(--notification-error-border); /* Consistent with other notification icons */
}
.notification-icon {
    margin-right: 0.75rem;
    font-size: 1.25rem;
}
.notification-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: 1.2rem; /* From style.css */
    padding: 0 0.5rem; /* From style-0.0.css */
}
.notification-close:hover { /* From style-0.0.css */
    opacity: 1;
}
/* Dark mode notification specific icon colors from style-0.0.css */
html[data-theme="dark"] .notification-success { background-color: #14532d; border-color: #22c55e; color: #bbf7d0; }
html[data-theme="dark"] .notification-success i { color: #4ade80; }
html[data-theme="dark"] .notification-error { background-color: #7f1d1d; border-color: #ef4444; color: #fecaca; }
html[data-theme="dark"] .notification-error i { color: #f87171; }
html[data-theme="dark"] .notification-warning .notification-icon { color: #facc15; }


/* General Alert Boxes (like overdue messages) */
.alert-box {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
}
.alert-danger {
    background-color: var(--notification-error-bg);
    border: 1px solid var(--notification-error-border);
    color: var(--notification-error-text);
}
.alert-warning {
    background-color: var(--notification-warning-bg);
    border: 1px solid var(--notification-warning-border);
    color: var(--notification-warning-text);
}
.alert-box i {
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

/* Specific for duyuru items */
.duyuru-item h4 { margin-bottom: 0.25rem; }
.duyuru-item p.text-sm { margin-top: 0; }

/* Notification Badge (for new challenges, chatbot messages) */
.notification-badge {
    position: absolute;
    /* Changed from top to bottom */
    bottom: -0.5rem; 
    right: -0.5rem; /* Adjusted for better visibility on button */
    background-color: #3182ce; /* Blue color for the screenshot's badge, matching text-accent */
    color: white;
    border-radius: 9999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 2px solid var(--bg-card); /* Border matches card background */
    min-width: 1.5rem; /* Ensure it's a circle even for single digit */
    height: 1.5rem; /* Ensure it's a circle even for single digit */
    display: flex; /* Added flex to center content */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    line-height: 1; /* Adjust line height to center text */
}
html[data-theme="dark"] .notification-badge {
    color: var(--btn-primary-fg);
    background-color: var(--text-accent); /* Use text-accent for dark theme badge */
}

/* Swiper.js Navigation (for recent books) */
.swiper-button-next, .swiper-button-prev {
    color: var(--text-accent); /* Use accent color for navigation buttons */
    transform: scale(0.6); /* Make them smaller */
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-weight: bold; /* Make icons bold */
}
#sonEklenenlerContainer .swiper-slide {
    width: 220px; /* Fixed width for each slide */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Chatbot Specific Styles (from previous style.css) */
#chatbotToggleButton {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#chatbotModal .bg-main { /* For chatbot message history background */
    background-color: var(--bg-main);
}

/* For message cards in gelen-mesajlar.chatbot.html (from previous style.css) */
.message-card {
    background-color: var(--bg-card);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.message-card.unread {
    border-left: 4px solid var(--text-accent);
    background-color: rgba(var(--text-accent-rgb), 0.05);
    font-weight: 500;
}
.message-card .sender-info .icon {
    color: var(--text-main); /* Ensure the icon color in sender-info matches text-main */
}

/* New styles from style-0.0.css that might be unique or more specific */
.settings-section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.settings-title { font-size: 1.25rem; font-weight: 600; color: var(--text-main); margin-bottom: 1rem; }
/* Modified .list-item for menu links in settings, to use card background and border */
.list-item { 
    /* Removed padding-bottom and border-bottom from here, as it's now handled by the card styling */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0.5rem 0; /* Still some padding between items in a flex container if needed */
}
.list-item:last-child { border-bottom: none; }

/* Custom File Input (from style-0.0.css) */
.custom-file-input::-webkit-file-upload-button { visibility: hidden; }
.custom-file-input::before {
    content: 'Dosya Seç';
    display: inline-block;
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    width: auto; /* Değişiklik: flex-grow ile birlikte çalışması için auto */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    flex-grow: 1; /* Değişiklik: flex-item olarak büyümesini sağlar */
    min-width: 80px; /* Çok küçülmesini engeller */
}
.custom-file-input:hover::before { filter: brightness(95%); }
html[data-theme="dark"] .custom-file-input:hover::before { filter: brightness(115%); }
.custom-file-input:active::before { filter: brightness(90%); }

/* Modal styles (from style-0.0.css, adjusted for consistency) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* Controlled by JS show/hidden */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.modal-overlay.show {
    display: flex;
}
.modal-content {
    background-color: var(--bg-card);
    color: var(--text-main);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 32rem;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
}
.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}
.modal-footer {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Drag & Drop styles (from style-0.0.css) */
.draggable { cursor: grab; }
.draggable:active { cursor: grabbing; }
.dragging { opacity: 0.5; background: rgba(var(--text-accent-rgb), 0.1); box-shadow: var(--shadow-md); }

/* Table specific overrides (from style-0.0.css) */
/* th, td, table-wrapper already mostly covered */

/* Highlight (from style-0.0.css) */
.highlight {
    background-color: yellow;
    color: #1f2937;
    padding: 0.1rem 0;
    border-radius: 0.125rem;
}
html[data-theme="dark"] .highlight {
    background-color: #facc15;
    color: #1a202c;
}

/* Pagination (from style-0.0.css) */
.pagination-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
}
.pagination-status {
    font-size: 0.875rem;
    color: var(--text-muted);
}
.pagination-controls button {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.8rem;
    border-radius: 0.375rem;
    margin: 0 0.125rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}
.pagination-controls button:hover {
    background-color: rgba(var(--text-accent-rgb), 0.1);
    color: var(--text-accent);
}
.pagination-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--btn-secondary-bg);
    color: var(--text-muted);
}
.pagination-controls button.active {
    background-color: var(--text-accent);
    color: var(--btn-primary-fg);
    border-color: var(--text-accent);
    font-weight: 600;
}
.items-per-page-selector label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 0.5rem;
}
.items-per-page-selector select {
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
}

/* Toggle Switch (from style-0.0.css) */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 28px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--text-accent);
}
input:checked + .slider:before {
    transform: translateX(22px);
}

/* Info Box (from style-0.0.css) */
.info-box {
    background-color: var(--info-box-bg);
    border-left: 4px solid var(--info-box-border);
    padding: 1rem;
    margin-top: 2rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}
.info-box ul {
    list-style: disc;
    margin-left: 1.5rem;
    padding-left: 0;
    margin-top: 0.75rem;
    color: var(--info-box-body-text);
}
.info-box li {
    margin-bottom: 0.4rem;
}
.info-box li strong {
    color: var(--text-main);
    font-weight: 600;
}
.info-box h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--info-box-header-text);
}


/* Gelen Mesajlar Sayfası İçin Ek Tasarım İyileştirmeleri */

/* Ana mesaj kutusu başlığını ayarlar */
#mainContent .flex.items-center.mb-4 h3 {
    color: var(--text-main);
}
#mainContent .flex.items-center.mb-4 h3 i {
    color: var(--text-accent); /* Başlık ikonunu vurgu rengi yapar */
}

/* Mesaj kartlarının genel yapısı */
.message-card {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column; /* İçeriği dikeyde hizalamak için */
    gap: 0.5rem; /* Kart içi elemanlar arası boşluk */
}

/* Okunmamış mesaj kartını daha belirgin hale getirir */
.message-card.unread {
    border-left: 4px solid var(--text-accent);
    background-color: rgba(var(--text-accent-rgb), 0.05);
}

/* Gönderen bilgi alanı */
.message-card .sender-info {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* İkon ve isim arası boşluk */
}

.message-card .sender-info .icon {
    color: var(--text-main);
}

/* Mesaj içeriği alanı */
.message-card .message-body {
    flex-grow: 1; /* Alanı doldurması için */
    padding-left: 0.25rem; /* Hafif bir girinti */
}

/* Tarih ve butonları içeren alt kısım */
.message-card .message-footer {
    display: flex;
    justify-content: flex-end; /* İçeriği sağa yaslar */
    align-items: center;
    gap: 1rem; /* Tarih ve butonlar arası boşluk */
    margin-top: 0.75rem;
}

/* Tarih damgası */
.message-card .timestamp {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Butonların olduğu bölüm */
.message-card .actions {
    display: flex;
    gap: 0.5rem;
}

/* Mesaj kartlarındaki eylem butonlarını daha küçük hale getirir */
.message-card .btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

.ust-buton {
    display: inline-flex;
    flex-direction: column; /* İkon ve metni alt alta hizalar */
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem; /* Dikey padding azaltıldı, yatay artırıldı */
    min-width: 120px; /* Butonların genişliğinin sabit kalmasını sağlar */
    height: 60px; /* Butonların yüksekliğini sabitler */
    text-align: center;
    font-size: 0.75rem; /* Metni biraz küçültür */
    line-height: 1.2;
    gap: 0.25rem; /* İkon ve metin arası boşluk */
}

.ust-buton i {
    font-size: 1.25rem; /* İkonları büyütür */
    margin-right: 0 !important; /* Mevcut `mr-2` sınıfını ezer */
    margin-bottom: 0.125rem; /* İkonun altına hafif boşluk */
}

/* Gelen Takas Teklifleri Sayfası İçin Ek Stiller */
.teklif-edilen-kitaplar-listesi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* 12px */
    margin-top: 0.75rem; /* 12px */
    padding-top: 0.75rem; /* 12px */
    border-top: 1px dashed var(--border-color);
}

.teklif-edilen-kitap-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    background-color: var(--bg-main);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem; /* 12px */
}

.teklif-edilen-kitap-item img {
    width: 20px;
    height: 30px;
    object-fit: cover;
    border-radius: 2px;
}

/* Kitaplığım Sayfası - Kart Butonları İçin Özel Stiller */
.card-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* İki eşit sütun oluşturur */
    gap: 1px; /* Aralarına ince bir çizgi ekler */
    background-color: var(--border-color); /* Çizgi rengini belirler */
    margin-top: auto; /* Buton grubunu kartın en altına iter */
    border-top: 1px solid var(--border-color); /* Üstündeki içerikten ayırmak için */
}

.card-action-button {
    background-color: var(--bg-card);
    color: var(--text-muted);
    border: none;
    padding: 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.card-action-button:hover {
    background-color: var(--bg-main);
}

/* Takasa Açık Durumu (Yeşil) */
.card-action-button.success {
    color: var(--btn-success-bg);
}
.card-action-button.success:hover {
    background-color: rgba(34, 197, 94, 0.1); /* Yeşil hover rengi */
}

/* Takastan Çek Durumu (Kırmızı) */
.card-action-button.danger {
    color: var(--btn-danger-bg);
}
.card-action-button.danger:hover {
    background-color: rgba(239, 68, 68, 0.1); /* Kırmızı hover rengi */
}

/* Butonlar pasif olduğunda */
.card-action-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bg-card);
}

/* İkonların boyutunu ayarlar */
.card-action-button i {
    font-size: 0.8rem;
}


.stat-summary-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-summary-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.stat-summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.stat-summary-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* YENİ EKLENEN/GÜNCELLENEN CHATBOT STİLLERİ */
.user-message-text {
    color: var(--btn-primary-fg);
}

.bot-message-bubble {
    background-color: var(--btn-secondary-bg);
    color: var(--text-main);
}


@keyframes ring {
  0% { transform: rotate(0); }
  10% { transform: rotate(30deg); }
  20% { transform: rotate(-28deg); }
  30% { transform: rotate(34deg); }
  40% { transform: rotate(-32deg); }
  50% { transform: rotate(30deg); }
  60% { transform: rotate(-28deg); }
  70% { transform: rotate(24deg); }
  80% { transform: rotate(-22deg); }
  90% { transform: rotate(20deg); }
  100% { transform: rotate(0); }
}


#bildirimToggleBtn.notification-ring .fa-bell {
    animation: ring 0.8s ease-in-out;
    transform-origin: top center;
}

#bildirimSayac {
    /* Parlama efekti için */
    box-shadow: 0 0 8px 2px var(--btn-danger-bg);
}

.notification-ring {
    animation: ring 0.8s ease-in-out;
    transform-origin: top center;
}

.notification-badge {
    /* Parlama efekti için */
    box-shadow: 0 0 8px 2px var(--btn-danger-bg);
}


#profilAktiviteAkisi {
    /* Dikey kaydırma için animasyon tanımı */
    animation: scroll-up 20s linear infinite;
}

#profilAktiviteAkisi:hover {
    /* Fare üzerine geldiğinde animasyonu durdur */
    animation-play-state: paused;
}

@keyframes scroll-up {
    from {
        transform: translateY(0);
    }
    to {
        /* Tüm içeriğin yukarı kayması için negatif değer */
        transform: translateY(-100%);
    }
}





@keyframes scroll-up-anim {
    from {
        transform: translateY(0);
    }
    to {
        /* İçeriğin tam olarak kopyalanmış ilk yarısı kadar yukarı kaydır */
        transform: translateY(-50%);
    }
}

/* Animasyon uygulanacak elemente bu sınıf JS ile eklenecek */
.scrolling-animation {
    animation-name: scroll-up-anim;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#canliAkisWrapper:hover .scrolling-animation {
    /* Fare üzerine geldiğinde animasyonu durdur */
    animation-play-state: paused;
}




/* ----------------------------------------------------------------- */

#slot-reel {
    position: relative; /* İçerideki öğelerin konumlanması için */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.slot-item-anim {
    position: absolute;
    bottom: -200px; /* Ekranın altından başlasın */
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease-out;
}

.slot-item-anim.visible {
    transform: translateY(-280px); /* Yukarı doğru hareket mesafesi */
    opacity: 1;
}

.slot-item-anim.removing {
    transform: translateY(-400px); /* Ekranın üstünden çıksın */
    opacity: 0;
}

.slot-item-anim img {
    height: 160px;
    width: auto;
    max-width: 11px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}


/* Animasyon sırasında bulanıklık efekti */
.reel-spinning .slot-item:not(:last-child) {
    filter: blur(4px);
}

/* Animasyonun kendisi */
@keyframes reel-spin-anim {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(var(--reel-offset));
    }
}

.reel-spinning {
    animation: reel-spin-anim var(--reel-duration, 4s) cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}


/* ----------------------------------------------------------------- */

.raf-kutusu.sisli {
    opacity: 0.3;
    filter: grayscale(100%);
    cursor: help;
    border-style: solid;
}
.raf-kutusu.sisli:hover {
    transform: scale(1); /* Sisli rafların büyümesini engelle */
}

/* ----------------------------------------------------------------- */
/* YENİ EKLENDİ: Profil Çerçevesi Stilleri (Tüm sayfalarda kullanılabilir) */
.profil-photo.cerceve {
    border-color: transparent; /* Varsayılan aksan rengi çerçevesini kaldır */
    border-width: 5px;
    box-shadow: 0 0 0 4px var(--bg-card); /* Resim ile çerçeve arasına boşluk */
}

.profil-photo.cerceve-gold {
    border-color: #FFD700;
    box-shadow: 0 0 0 4px var(--bg-card), 0 0 15px 5px #FFD700;
}

.profil-photo.cerceve-silver {
    border-color: #C0C0C0;
    box-shadow: 0 0 0 4px var(--bg-card), 0 0 15px 5px #C0C0C0;
}

html[data-theme="dark"] .profil-photo.cerceve-gold {
    box-shadow: 0 0 0 4px var(--bg-card), 0 0 15px 5px #facc15;
}

html[data-theme="dark"] .profil-photo.cerceve-silver {
    box-shadow: 0 0 0 4px var(--bg-card), 0 0 15px 5px #a0aec0;
/* ----------------------------------------------------------------- */
/* === Kart ve Rozet Yardımcı Sınıfları === */
.card {
    background-color: var(--bg-card);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
}
.badge-success  { background: rgba(34,197,94,.15);  color: #16a34a; }
.badge-warning  { background: rgba(234,179,8,.15);  color: #a16207; }
.badge-danger   { background: rgba(239,68,68,.15);  color: #dc2626; }
.badge-info     { background: rgba(49,130,206,.15); color: #1d4ed8; }
.badge-muted    { background: rgba(113,128,150,.15);color: #4a5568; }

html[data-theme="dark"] .badge-success { background:rgba(74,222,128,.15); color:#4ade80; }
html[data-theme="dark"] .badge-warning { background:rgba(250,204,21,.15);  color:#facc15; }
html[data-theme="dark"] .badge-danger  { background:rgba(248,113,113,.15); color:#f87171; }
html[data-theme="dark"] .badge-info    { background:rgba(96,165,250,.15);  color:#60a5fa; }
html[data-theme="dark"] .badge-muted   { background:rgba(148,163,184,.15); color:#94a3b8; }
/* ----------------------------------------------------------------- */
.hazine-ikonu {
    color: #FFD700; /* Altın sarısı */
    text-shadow: 0 0 5px black;
    animation: sparkle 1.5s infinite ease-in-out;
}
@keyframes sparkle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}
/* ----------------------------------------------------------------- */