/**
 * Combined Admin Panel Stylesheet
 * Based on Vuemin & Second Layout CSS
 * Author: [Your Name/Project Name]
 */

/* ========================================================================
   0. CSS Variables (Renkler ve temel ayarlar için)
   ======================================================================== */
   :root {
    --primary-color: #5c4ac7;
    /* Vuemin Primary */
    --secondary-color: #6c757d;
    /* Bootstrap varsayılanı gibi */
    --success-color: #26dad2;
    /* Vuemin Success */
    --info-color: #1976d2;
    /* Vuemin Info */
    --warning-color: #ffb22b;
    /* Vuemin Warning */
    --danger-color: #ef5350;
    /* Vuemin Danger */
    --light-color: #f8f9fa;
    /* Bootstrap varsayılanı gibi */
    --dark-color: #2f3d4a;
    /* Vuemin Inverse */
    --white-color: #ffffff;
    --grey-color: #67757c;
    /* Vuemin Default Text */
    --grey-light-color: #99abb4;
    /* Vuemin Muted Text */
    --grey-lighter-color: #e9ecef;
    /* Bootstrap varsayılanı gibi */
    --border-color: #e7e7e7;
    /* Vuemin Border */
    --body-bg: #fbfcfd;
    /* Second CSS */
    --sidebar-bg: #fff;
    /* Second CSS */
    --header-bg: #fbfcfd;
    /* Second CSS */
    --header-brand-bg: #fff;
    /* Second CSS */
    --link-color: #525c5d;
    /* Second CSS */
    --link-hover-color: #4CCEAC;
    /* Second CSS (Sidebar Active) */
    --font-family-sans-serif: 'Open Sans', sans-serif;
    /* Vuemin */
    --font-family-poppins: 'Poppins', sans-serif;
    /* Vuemin (bazı yerlerde kullanılıyor) */

    --sidebar-width: 17rem;
    /* Second CSS */
    --sidebar-width-mini: 4rem;
    /* Second CSS (Responsive) */
    --header-height: 65px;
    /* Second CSS */
}

/* ========================================================================
   1. Global Styles & Reset
   ======================================================================== */
* {
    outline: none;
    box-sizing: border-box;
}

html {
    position: relative;
    min-height: 100%;
    background: var(--white-color);
}

body {
    background: var(--body-bg);
    font-family: var(--font-family-sans-serif);
    margin: 0;
    overflow-x: hidden;
    color: var(--grey-color);
    line-height: 1.5;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #455a64;
    /* Vuemin Headings */
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1 {
    line-height: 40px;
    font-size: 36px;
}

h2 {
    line-height: 36px;
    font-size: 24px;
}

h3 {
    line-height: 30px;
    font-size: 21px;
}

h4 {
    line-height: 22px;
    font-size: 18px;
}

h5 {
    line-height: 18px;
    font-size: 16px;
}

h6 {
    line-height: 16px;
    font-size: 14px;
}

p {
    margin-bottom: 1rem;
    /* font-family: var(--font-family-poppins); */
    /* İsteğe bağlı */
    color: var(--grey-light-color);
    /* Muted gibi */
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.img-responsive {
    width: 100%;
    height: auto;
    display: inline-block;
}

.img-circle,
.img-rounded {
    border-radius: 50%;
}

/* İkisini de yuvarlak yapalım */

/* ========================================================================
   2. Layout (Header, Sidebar, Content, Footer - From Second CSS)
   ======================================================================== */

/* --- Header --- */
.t-header {
    display: flex;
    height: var(--header-height);
    background: var(--header-bg);
    z-index: 1030;
    /* Bootstrap z-index'ten yüksek */
    border-bottom: 1px solid var(--border-color);
    /* Sınır ekleyelim */
}

@media (max-width: 991.98px) {
    .t-header {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.t-header .t-header-brand-wrapper {
    display: flex;
    align-items: center;
    height: var(--header-height);
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background: var(--header-brand-bg);
    z-index: 1031;
    padding-left: 18px;
    transition: width 0.2s ease-in-out, min-width 0.2s ease-in-out;
}

.t-header .t-header-brand-wrapper a {
    display: flex;
    align-items: center;
    color: #333;
    /* Logo text color */
    font-weight: 500;
    font-size: 1.25rem;
}

.t-header .t-header-brand-wrapper a .logo {
    max-width: 100%;
    width: 120px;
    /* Ayarlayabilirsiniz */
    display: block;
}

.t-header .t-header-brand-wrapper a .logo-mini {
    display: none;
    max-width: 100%;
    width: 35px;
}

.t-header .t-header-brand-wrapper a p {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin-bottom: 0;
    margin-left: 10px;
}

.t-header .t-header-content-wrapper {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    padding: 0 2.5rem;
    border-left: 1px solid var(--border-color);
    /* Vuemin'den sınır */
}

@media (max-width: 991.98px) {
    .t-header .t-header-content-wrapper {
        padding: 0 1rem;
    }
}

/* Header Search (İsteğe bağlı, basic stil) */
.t-header .t-header-search-box {
    position: relative;
    margin-right: auto;
    /* Sol tarafa yaslamak için */
}

.t-header .t-header-search-box .form-control {
    min-width: 250px;
    height: 38px;
    padding-right: 35px;
    border-radius: 20px;
    /* Yuvarlak */
}

.t-header .t-header-search-box button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--grey-light-color);
    padding: 5px;
}

@media (max-width: 580px) {
    .t-header .t-header-search-box {
        display: none;
    }
}

/* Header Nav Items (Sağ taraf) */
.t-header .t-header-content {
    display: flex;
    align-items: center;
    margin-left: auto;
    /* Sağa yaslamak için */
}

.t-header .navbar-nav {
    flex-direction: row;
    align-items: center;
}

.t-header .nav-item {
    list-style: none;
}

.t-header .nav-item .nav-link {
    position: relative;
    padding: 0.5rem 0.75rem;
    color: var(--grey-color);
    line-height: calc(var(--header-height) - 1rem);
    /* Dikey ortalama */
    font-size: 1rem;
}

.t-header .nav-item .nav-link i {
    font-size: 1.25rem;
    vertical-align: middle;
}

.t-header .nav-item .nav-link:hover {
    color: var(--primary-color);
}

/* Profile Pic (Vuemin'den) */
.t-header .profile-pic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

/* Notification Indicator (İkinci CSS & Vuemin) */
.t-header .notification-indicator {
    position: absolute;
    top: 12px;
    /* Ayarlayın */
    right: 10px;
    /* Ayarlayın */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--danger-color);
    border: 1px solid var(--white-color);
}

/* Heartbit (Vuemin'den) */
.t-header .notify .heartbit {
    position: absolute;
    top: -5px;
    /* Ayarlayın */
    right: -5px;
    /* Ayarlayın */
    height: 15px;
    width: 15px;
    z-index: 10;
    border: 3px solid var(--danger-color);
    border-radius: 70px;
    animation: heartbit 1s ease-out infinite;
}

.t-header .notify .point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--danger-color);
    position: absolute;
    right: 0px;
    /* Ayarlayın */
    top: 0px;
    /* Ayarlayın */
}

@keyframes heartbit {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }

    25% {
        transform: scale(0.1);
        opacity: 0.1;
    }

    50% {
        transform: scale(0.5);
        opacity: 0.3;
    }

    75% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 0.0;
    }
}

/* Header Toggler (İkinci CSS) */
.t-header .t-header-toggler {
    background: transparent;
    border: none;
    margin-left: 1rem;
    /* Nav item'lardan ayırmak için */
    color: var(--grey-color);
    padding: 0.25rem 0.75rem;
}

.t-header .t-header-toggler i {
    font-size: 1.375rem;
}

.t-header .t-header-mobile-toggler {
    /* Mobil için */
    margin-left: 0;
    margin-right: 15px;
}

@media (min-width: 992px) {
    .t-header .t-header-mobile-toggler {
        display: none;
    }
}

/* Header Fixed (İkinci CSS) */
.header-fixed .t-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}

.header-fixed .sidebar {
    padding-top: var(--header-height);
}

.header-fixed .sidebar .t-header-brand-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1031;
    width: var(--sidebar-width);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
}

.header-fixed .sidebar .navigation-menu {
    z-index: 1;
    /* Sabit header için scrollbar ayarı gerekebilir */
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
}

.header-fixed .page-body .page-content-wrapper {
    margin-top: var(--header-height);
}

/* --- Sidebar --- */
.sidebar {
    position: relative;
    display: block;
    height: 100%;
    min-height: 100vh;
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    /* Sınır ekleyelim */
    z-index: 1029;
    transition: width 0.2s ease-in-out, min-width 0.2s ease-in-out, margin-left 0.2s ease-in-out;
}

/* Sidebar User Profile (İkinci CSS'den) */
.sidebar .user-profile {
    padding: 20px 0;
    /* Ayarlayın */
    display: flex;
    flex-direction: column;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.sidebar .user-profile img {
    /* Profil resmi için */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px auto;
    border: 3px solid var(--border-color);
}

.sidebar .user-profile .user-name {
    font-weight: 600;
    color: #455a64;
    /* Vuemin heading color */
}

.sidebar .user-profile .user-role {
    /* Yeni eklenen: Rol */
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--grey-light-color);
    text-transform: capitalize;
}

/* Navigation Menu (İkinci CSS + Vuemin icon/arrow) */
.sidebar .navigation-menu {
    padding-left: 0;
    padding-bottom: 80px;
    /* Footer için boşluk */
    margin-bottom: 0;
    margin-top: 10px;
}

.sidebar .navigation-menu li {
    display: block;
    margin: 0;
    position: relative;
    /* Vuemin active border için */
}

/* Nav Category (İkinci CSS) */
.sidebar .navigation-menu li.nav-category-divider {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* Sabit sidebar header için ayarlandı */
    display: block;
    background: var(--sidebar-bg);
    margin: 15px 0 0 0;
    padding: 15px 30px 10px 30px;
    font-size: 11px;
    color: var(--grey-light-color);
    z-index: 1;
    font-weight: 600;
    /* Biraz daha belirgin */
    text-transform: uppercase;
}

.header-fixed .sidebar .navigation-menu li.nav-category-divider {
    top: 0;
    /* Sabit header durumunda */
}

.sidebar .navigation-menu li.nav-category-divider:first-child {
    margin-top: 0;
}

/* Nav Item Link (İkinci CSS + Vuemin) */
.sidebar .navigation-menu li a {
    display: flex;
    align-items: center;
    /* flex-direction: row-reverse; */
    /* İkonu sola alalım */
    /* justify-content: flex-end; */
    padding: 10px 30px;
    /* Biraz daha az padding */
    font-size: 14px;
    /* Vuemin */
    line-height: 1.5;
    color: var(--link-color);
    letter-spacing: 0.03rem;
    font-weight: 400;
    /* Vuemin normal */
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-left: 3px solid transparent;
    /* Vuemin active stili için */
    transition: all 0.2s ease;
}

.sidebar .navigation-menu li a .link-icon {
    margin-right: 15px;
    line-height: 1;
    color: var(--grey-light-color);
    /* İkon rengi Vuemin */
    font-size: 16px;
    /* Vuemin */
    width: 27px;
    /* Vuemin */
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    /* İkonu ortalamak için */
    transition: color 0.2s ease;
}

.sidebar .navigation-menu li a .link-title {
    /* İkinci CSS'de yoktu, ekleyelim */
    flex-grow: 1;
    /* Başlık kalan alanı doldursun */
}

/* Hover */
.sidebar .navigation-menu li:not(.nav-category-divider):hover>a {
    color: var(--link-hover-color);
    background: #f8f9fa;
    /* Hafif hover efekti */
}

.sidebar .navigation-menu li:not(.nav-category-divider):hover>a .link-icon {
    color: var(--link-hover-color);
}

/* Active */
.sidebar .navigation-menu li.active>a {
    color: var(--link-hover-color);
    font-weight: 500;
    /* Vuemin active */
    background: #e8fadf;
    /* Örnek aktif arka plan */
    border-left-color: var(--link-hover-color);
    /* Vuemin */
}

.sidebar .navigation-menu li.active>a .link-icon {
    color: var(--link-hover-color);
}

/* Collapse Arrow (Vuemin'den uyarlama) */
.sidebar .navigation-menu>li>a[data-toggle="collapse"]::after {
    content: '\e649';
    /* themify arrow */
    font-family: themify;
    /* Vuemin'den */
    font-size: 10px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease-out;
    color: var(--grey-light-color);
}

.sidebar .navigation-menu>li>a[data-toggle="collapse"][aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(90deg);
}

/* Submenu (İkinci CSS + Vuemin) */
.sidebar .navigation-menu li .navigation-submenu {
    background: #f8f9fa;
    /* Biraz farklı arka plan */
    padding: 5px 0 10px 0;
    list-style: none;
}

.sidebar .navigation-menu li .navigation-submenu.collapsing {
    transition: height 0.2s ease-in;
}

.sidebar .navigation-menu li .navigation-submenu li a {
    padding: 8px 30px 8px calc(30px + 27px + 10px);
    /* İkon + girinti */
    font-size: 13px;
    color: var(--grey-color);
    opacity: 0.8;
    font-weight: 400;
    border-left: none;
    /* Alt menüde border olmasın */
    position: relative;
}

.sidebar .navigation-menu li .navigation-submenu li a::before {
    /* Küçük nokta */
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--grey-light-color);
    border-radius: 50%;
    position: absolute;
    left: calc(30px + 27px / 2 - 2px);
    /* İkonun ortasına */
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;
}

.sidebar .navigation-menu li .navigation-submenu li:hover>a {
    color: var(--link-hover-color);
    opacity: 1;
}

.sidebar .navigation-menu li .navigation-submenu li:hover>a::before {
    background-color: var(--link-hover-color);
}

.sidebar .navigation-menu li .navigation-submenu li.active>a {
    color: var(--link-hover-color);
    font-weight: 500;
    opacity: 1;
}

.sidebar .navigation-menu li .navigation-submenu li.active>a::before {
    background-color: var(--link-hover-color);
}

/* Nested Submenu */
.sidebar .navigation-menu li .navigation-submenu li .navigation-submenu {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 5px;
}

.sidebar .navigation-menu li .navigation-submenu li .navigation-submenu li a {
    padding-left: calc(30px + 27px + 10px + 15px);
    /* Daha fazla girinti */
    font-size: 12px;
}

.sidebar .navigation-menu li .navigation-submenu li .navigation-submenu li a::before {
    left: calc(30px + 27px + 10px + 15px - 20px);
    /* Nokta konumu */
    width: 4px;
    height: 4px;
}

/* --- Main Content Area --- */
.page-body {
    position: relative;
    display: grid;
    /* Grid layout kullanımı */
    max-width: 100%;
    /* Grid sütunları: sidebar genişliği ve kalan alan */
    grid-template-columns: var(--sidebar-width) calc(100% - var(--sidebar-width));
    transition: grid-template-columns 0.2s ease-in-out;
}

.page-content-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 1.5rem 2.5rem calc(60px + 1.5rem);
    /* Footer yüksekliği + padding */
    background: var(--body-bg);
}

@media (max-width: 991.98px) {

    /* Responsive'de grid yerine flex */
    .page-body {
        display: flex;
        flex-direction: row;
    }

    .page-content-wrapper {
        padding: 1rem 1rem calc(60px + 1rem);
        min-width: 100vw;
        margin-left: 0;
        transition: margin-left 0.2s ease-in-out;
    }
}

@media (max-width: 767.98px) {
    .header-fixed .page-content-wrapper {
        margin-top: 0;
    }

    /* Mobil header zaten fixed */
    .page-content-wrapper {
        padding-top: calc(var(--header-height) + 1rem);
    }
}

.page-content-wrapper .page-content-wrapper-inner {
    max-width: 1140px;
    /* İçerik max genişliği */
    margin-left: auto;
    margin-right: auto;
}

/* Viewport Header (Breadcrumb & Title - Second CSS) */
.viewport-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* Default */
    background: var(--body-bg);
    z-index: 1020;
    padding-bottom: 1rem;
    /* İçerikle arasında boşluk */
    margin: -1.5rem -2.5rem 1.5rem -2.5rem;
    /* Padding'i sıfırla */
    padding: 1rem 2.5rem 1rem 2.5rem;
    /* Kendi padding'i */
    border-bottom: 1px solid var(--border-color);
}

.header-fixed .viewport-header {
    top: var(--header-height);
    /* Sabit header varsa */
}

@media (max-width: 991.98px) {
    .viewport-header {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 767.98px) {
    .viewport-header {
        position: static;
        /* Mobilde sticky olmasın */
        margin: 0 0 1rem 0;
        padding: 0;
        border-bottom: none;
    }
}

/* Breadcrumb (Vuemin + Second CSS) */
.breadcrumb {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    background: transparent;
    font-size: 14px;
}

.breadcrumb-item {
    color: var(--grey-color);
    letter-spacing: 0.03rem;
}

.breadcrumb-item a {
    color: inherit;
}

.breadcrumb-item.active {
    color: var(--primary-color);
    /* Primary rengi */
    font-weight: 500;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "\e649";
    /* themify > */
    font-family: themify;
    color: var(--grey-light-color);
    font-size: 11px;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.page-title-heading {
    /* Second CSS */
    color: #455a64;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0;
}

.page-description {
    /* Second CSS */
    opacity: 0.7;
    margin-top: 5px;
    font-size: 0.9rem;
}

/* --- Footer --- */
footer.footer {
    /* Vuemin'deki footer sınıfı ile birleştirme */
    position: absolute;
    bottom: 0px;
    left: var(--sidebar-width);
    /* Sidebar'dan sonra başla */
    right: 0;
    padding: 1rem 2.5rem;
    background: var(--white-color);
    border-top: 1px solid var(--border-color);
    color: var(--grey-color);
    font-size: 0.9rem;
    z-index: 1028;
    transition: left 0.2s ease-in-out;
}

footer.footer .container-fluid {
    /* İç container */
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer.footer ul {
    /* İkinci CSS'deki gibi */
    margin-bottom: 0;
}

footer.footer ul li {
    display: inline-block;
    padding: 0 10px 0 0;
    line-height: 1;
}

footer.footer ul li:not(:last-child) {
    margin-right: 10px;
    border-right: 1px solid var(--border-color);
}

footer.footer ul li a {
    font-weight: 500;
    color: var(--grey-color);
}

footer.footer ul li a:hover {
    color: var(--primary-color);
}

@media (max-width: 991.98px) {
    footer.footer {
        left: 0;
        /* Mobilde tam genişlik */
        padding: 1rem;
    }

    footer.footer .container-fluid {
        flex-direction: column;
        text-align: center;
    }

    footer.footer ul {
        margin-top: 0.5rem;
    }
}

/* --- Sidebar Collapsed State --- */
@media (min-width: 992px) {
    .sidebar-collapsed .sidebar {
        width: var(--sidebar-width-mini);
        min-width: var(--sidebar-width-mini);
    }

    .sidebar-collapsed .sidebar .t-header-brand-wrapper {
        width: var(--sidebar-width-mini);
        min-width: var(--sidebar-width-mini);
        justify-content: center;
        padding-left: 0;
    }

    .sidebar-collapsed .sidebar .t-header-brand-wrapper .logo {
        display: none;
    }

    .sidebar-collapsed .sidebar .t-header-brand-wrapper .logo-mini {
        display: block;
        width: 25px;
    }

    .sidebar-collapsed .sidebar .t-header-brand-wrapper p {
        display: none;
    }

    .sidebar-collapsed .sidebar .user-profile {
        display: none;
    }

    /* Veya sadece resmi göster */
    .sidebar-collapsed .sidebar .navigation-menu li.nav-category-divider {
        text-align: center;
        padding: 15px 0 10px 0;
    }

    .sidebar-collapsed .sidebar .navigation-menu li a {
        justify-content: center;
        padding: 10px 0;
        border-left: none;
    }

    .sidebar-collapsed .sidebar .navigation-menu li a .link-title {
        display: none;
    }

    .sidebar-collapsed .sidebar .navigation-menu li a .link-icon {
        margin-right: 0;
        width: auto;
    }

    .sidebar-collapsed .sidebar .navigation-menu li a[data-toggle="collapse"]::after {
        display: none;
    }

    .sidebar-collapsed .sidebar .navigation-menu li .navigation-submenu {
        display: none !important;
    }

    /* Collapsed'da alt menü gizli */

    .sidebar-collapsed .page-body {
        grid-template-columns: var(--sidebar-width-mini) calc(100% - var(--sidebar-width-mini));
    }

    .sidebar-collapsed footer.footer {
        left: var(--sidebar-width-mini);
    }

    /* Mini sidebar hover effect (Vuemin'den uyarlama) */
    .sidebar-collapsed .sidebar .navigation-menu>li:not(.nav-category-divider):hover {
        position: relative;
        /* Dropdown için */
    }

    .sidebar-collapsed .sidebar .navigation-menu>li:not(.nav-category-divider):hover>a {
        width: calc(var(--sidebar-width) + var(--sidebar-width-mini));
        /* Açılınca genişle */
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1032;
        background: #f8f9fa;
        justify-content: flex-start;
        padding: 10px 15px;
        /* İçerik sığsın */
        border-left: 3px solid var(--link-hover-color);
    }

    .sidebar-collapsed .sidebar .navigation-menu>li:not(.nav-category-divider):hover>a .link-icon {
        margin-right: 15px;
    }

    .sidebar-collapsed .sidebar .navigation-menu>li:not(.nav-category-divider):hover>a .link-title {
        display: block;
        /* Hover'da başlık görünsün */
    }

    /* Hover'da submenu (Opsiyonel, Vuemin'deki gibi) */
    .sidebar-collapsed .sidebar .navigation-menu>li:not(.nav-category-divider):hover>.navigation-submenu {
        display: block !important;
        position: absolute;
        left: var(--sidebar-width-mini);
        top: 0;
        /* Veya a'nın yüksekliği kadar aşağıda */
        width: 200px;
        /* Alt menü genişliği */
        background: var(--white-color);
        border: 1px solid var(--border-color);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 1031;
        padding: 10px 0;
    }

    .sidebar-collapsed .sidebar .navigation-menu>li:not(.nav-category-divider):hover>.navigation-submenu li a {
        padding: 8px 20px;
        font-size: 13px;
    }

    .sidebar-collapsed .sidebar .navigation-menu>li:not(.nav-category-divider):hover>.navigation-submenu li a::before {
        display: none;
    }

    /* Noktaları gizle */

}

/* Mobil Sidebar Açık Durumu */
@media (max-width: 991.98px) {
    .page-body.sidebar-collpased .sidebar {
        /* İkinci CSS'deki adlandırma */
        margin-left: 0;
    }

    /* İsteğe bağlı: Açıkken içeriği karartma */
    .page-body.sidebar-collpased::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1028;
    }
}


/* ========================================================================
   3. Core Components (Vuemin'den Stiller)
   ======================================================================== */

/* --- Cards --- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--white-color);
    background-clip: border-box;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    /* Vuemin */
    margin-bottom: 1.5rem;
    /* Bootstrap default */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Vuemin */
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
    /* Bootstrap default */
    /* Vuemin'de padding: 20px vardı, bunu kullanalım */
    padding: 20px;
}

.card-title {
    margin-bottom: 0.75rem;
    /* Vuemin stilleri */
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: #455a64;
}

.card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
    /* Vuemin stilleri */
    color: var(--grey-light-color);
    font-weight: 300;
    margin-bottom: 15px;
    font-size: 14px;
    /* Boyut ekleyelim */
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link:hover {
    text-decoration: none;
}

.card-link+.card-link {
    margin-left: 1.25rem;
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f8f9fa;
    /* Daha açık */
    border-bottom: 1px solid var(--border-color);
    border-radius: calc(5px - 1px) calc(5px - 1px) 0 0;
    /* Vuemin radius ile uyumlu */
}

.card-header:first-child {
    border-radius: calc(5px - 1px) calc(5px - 1px) 0 0;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 calc(5px - 1px) calc(5px - 1px);
}

.card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}

.card-header-pills {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
}

/* Card Actions (Vuemin) */
.card-actions {
    float: right;
    /* Deprecated? Use flex instead if possible */
    margin-left: auto;
    /* Flex layout için */
}

.card-actions a {
    color: var(--grey-color);
    cursor: pointer;
    font-size: 13px;
    opacity: 0.7;
    padding-left: 7px;
}

.card-actions a:hover {
    opacity: 1;
}

/* Card Color Variants (Vuemin) */
.card-inverse {
    /* Genel ters renk */
    color: var(--white-color);
}

.card-inverse .card-title,
.card-inverse .card-subtitle,
.card-inverse .card-text,
.card-inverse .card-link {
    color: rgba(255, 255, 255, 0.85);
}

.card-inverse .card-subtitle {
    color: rgba(255, 255, 255, 0.65);
}

.card.bg-primary {
    border-color: var(--primary-color);
}

.card.bg-success {
    border-color: var(--success-color);
}

.card.bg-info {
    border-color: var(--info-color);
}

.card.bg-warning {
    border-color: var(--warning-color);
    color: #333;
}

/* Warning'de text koyu */
.card.bg-warning .card-title,
.card.bg-warning .card-subtitle,
.card.bg-warning .card-text,
.card.bg-warning .card-link {
    color: rgba(0, 0, 0, 0.8);
}

.card.bg-warning .card-subtitle {
    color: rgba(0, 0, 0, 0.6);
}

.card.bg-danger {
    border-color: var(--danger-color);
}

.card.bg-dark {
    border-color: var(--dark-color);
}

/* Outline Cards (Vuemin) */
.card-outline-primary {
    border-color: var(--primary-color);
}

.card-outline-primary .card-header {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.card-outline-success {
    border-color: var(--success-color);
}

.card-outline-success .card-header {
    background: var(--success-color);
    color: var(--white-color);
    border-color: var(--success-color);
}

.card-outline-info {
    border-color: var(--info-color);
}

.card-outline-info .card-header {
    background: var(--info-color);
    color: var(--white-color);
    border-color: var(--info-color);
}

.card-outline-warning {
    border-color: var(--warning-color);
}

.card-outline-warning .card-header {
    background: var(--warning-color);
    color: #333;
    border-color: var(--warning-color);
}

.card-outline-danger {
    border-color: var(--danger-color);
}

.card-outline-danger .card-header {
    background: var(--danger-color);
    color: var(--white-color);
    border-color: var(--danger-color);
}

.card-outline-dark {
    border-color: var(--dark-color);
}

.card-outline-dark .card-header {
    background: var(--dark-color);
    color: var(--white-color);
    border-color: var(--dark-color);
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    font-weight: 400;
    color: var(--grey-color);
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 7px 12px;
    /* Vuemin default */
    font-size: 0.9rem;
    /* Consistent size */
    line-height: 1.5;
    border-radius: 4px;
    /* Vuemin */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}

.btn:hover {
    color: var(--grey-color);
    text-decoration: none;
}

.btn:focus,
.btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb, 92, 74, 199), 0.25);
    /* Primary focus ring */
}

.btn.disabled,
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Button Colors (Vuemin'den uyarlama, box-shadow eklendi) */
.btn-primary {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
}

.btn-primary:hover {
    color: var(--white-color);
    background-color: #4a3aab;
    /* Darken */
    border-color: #4434a1;
    box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12), 0 0 0 0.2rem rgba(116, 96, 238, 0.5);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Diğer renkler benzer şekilde (success, info, warning, danger, dark, light, secondary) */
.btn-secondary {
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    /* Gölge eklenebilir */
}

.btn-secondary:hover {
    color: var(--white-color);
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-secondary:focus,
.btn-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-success {
    color: var(--white-color);
    background-color: var(--success-color);
    border-color: var(--success-color);
    box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
}

.btn-success:hover {
    color: var(--white-color);
    background-color: #1eacbe;
    border-color: #1aa0b3;
    box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
}

.btn-success:focus,
.btn-success.focus {
    box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12), 0 0 0 0.2rem rgba(38, 218, 210, 0.5);
}

.btn-info {
    color: var(--white-color);
    background-color: var(--info-color);
    border-color: var(--info-color);
    box-shadow: 0 2px 2px 0 rgba(23, 105, 255, 0.14), 0 3px 1px -2px rgba(23, 105, 255, 0.2), 0 1px 5px 0 rgba(23, 105, 255, 0.12);
}

.btn-info:hover {
    color: var(--white-color);
    background-color: #028ee1;
    border-color: #0284d2;
    box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-info:focus,
.btn-info.focus {
    box-shadow: 0 2px 2px 0 rgba(23, 105, 255, 0.14), 0 3px 1px -2px rgba(23, 105, 255, 0.2), 0 1px 5px 0 rgba(23, 105, 255, 0.12), 0 0 0 0.2rem rgba(25, 118, 210, 0.5);
}

.btn-warning {
    color: #212529;
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
}

.btn-warning:hover {
    color: #212529;
    background-color: #e9ab2e;
    border-color: #dfa227;
    box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
}

.btn-warning:focus,
.btn-warning.focus {
    box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12), 0 0 0 0.2rem rgba(255, 178, 43, 0.5);
}

.btn-danger {
    color: var(--white-color);
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
}

.btn-danger:hover {
    color: var(--white-color);
    background-color: #e6294b;
    border-color: #dc2042;
    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
}

.btn-danger:focus,
.btn-danger.focus {
    box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12), 0 0 0 0.2rem rgba(239, 83, 80, 0.5);
}

.btn-light {
    color: #212529;
    background-color: var(--light-color);
    border-color: #dae0e5;
}

.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #d3d9df;
}

.btn-light:focus,
.btn-light.focus {
    box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}

.btn-dark {
    color: var(--white-color);
    background-color: var(--dark-color);
    border-color: var(--dark-color);
}

.btn-dark:hover {
    color: var(--white-color);
    background-color: #1d252e;
    border-color: #171e24;
}

.btn-dark:focus,
.btn-dark.focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 61, 74, 0.5);
}

/* Outline Buttons (Vuemin) */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
}

.btn-outline-primary:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(92, 74, 199, 0.5);
}

/* Diğer outline renkleri benzer şekilde */
.btn-outline-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-outline-secondary:hover {
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-success {
    color: var(--success-color);
    border-color: var(--success-color);
    box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
}

.btn-outline-success:hover {
    color: var(--white-color);
    background-color: var(--success-color);
    border-color: var(--success-color);
    box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
}

.btn-outline-success:focus,
.btn-outline-success.focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 218, 210, 0.5);
}

.btn-outline-info {
    color: var(--info-color);
    border-color: var(--info-color);
    box-shadow: 0 2px 2px 0 rgba(23, 105, 255, 0.14), 0 3px 1px -2px rgba(23, 105, 255, 0.2), 0 1px 5px 0 rgba(23, 105, 255, 0.12);
}

.btn-outline-info:hover {
    color: var(--white-color);
    background-color: var(--info-color);
    border-color: var(--info-color);
    box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-outline-info:focus,
.btn-outline-info.focus {
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.5);
}

.btn-outline-warning {
    color: var(--warning-color);
    border-color: var(--warning-color);
    box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
}

.btn-outline-warning:hover {
    color: #212529;
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
}

.btn-outline-warning:focus,
.btn-outline-warning.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 178, 43, 0.5);
}

.btn-outline-danger {
    color: var(--danger-color);
    border-color: var(--danger-color);
    box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
}

.btn-outline-danger:hover {
    color: var(--white-color);
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
    box-shadow: 0 0 0 0.2rem rgba(239, 83, 80, 0.5);
}

.btn-outline-light {
    color: var(--light-color);
    border-color: var(--light-color);
}

.btn-outline-light:hover {
    color: #212529;
    background-color: var(--light-color);
    border-color: var(--light-color);
}

.btn-outline-light:focus,
.btn-outline-light.focus {
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-outline-dark {
    color: var(--dark-color);
    border-color: var(--dark-color);
}

.btn-outline-dark:hover {
    color: var(--white-color);
    background-color: var(--dark-color);
    border-color: var(--dark-color);
}

.btn-outline-dark:focus,
.btn-outline-dark.focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 61, 74, 0.5);
}

/* Button Sizes (Vuemin) */
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    border-radius: 5px;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 3px;
}

.btn-xs {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 2px;
}

/* Extra small */

/* Button Shapes (Vuemin) */
.btn-rounded {
    border-radius: 50px;
    padding: 7px 18px;
}

.btn-rounded.btn-lg {
    padding: 0.75rem 1.5rem;
}

.btn-rounded.btn-sm {
    padding: 0.25rem 0.8rem;
}

/* Daha belirgin */
.btn-rounded.btn-xs {
    padding: 0.2rem 0.6rem;
}

.btn-circle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 10px;
    line-height: 1;
    /* İkonu ortalamak için */
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 14px;
    font-size: 1.1rem;
}

.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px;
    font-size: 0.8rem;
}

.btn-circle.btn-xs {
    width: 24px;
    height: 24px;
    padding: 4px;
    font-size: 0.7rem;
}

/* Button Block */
.btn-block {
    display: block;
    width: 100%;
}

.btn-block+.btn-block {
    margin-top: 0.5rem;
}

/* Button Group */
.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group>.btn,
.btn-group-vertical>.btn {
    position: relative;
    flex: 1 1 auto;
}

.btn-group>.btn:hover,
.btn-group-vertical>.btn:hover {
    z-index: 1;
}

.btn-group>.btn:focus,
.btn-group>.btn:active,
.btn-group>.btn.active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn.active {
    z-index: 1;
}

/* Kenar yuvarlaklıklarını ayarla */
.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child) {
    margin-left: -1px;
}


.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child)>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/* --- Forms --- */
.form-group {
    margin-bottom: 1rem;
    /* Consistent spacing */
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    /* Bootstrap default */
    background-color: var(--white-color);
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    /* Vuemin */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    color: #495057;
    background-color: var(--white-color);
    border-color: #897bff;
    /* Primary lighten */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb, 92, 74, 199), 0.25);
}

.form-control::placeholder {
    color: var(--grey-light-color);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--grey-lighter-color);
    opacity: 1;
}

textarea.form-control {
    height: auto;
    resize: vertical;
    /* Vuemin */
}

.form-control-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 3px;
}

.form-control-lg {
    height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    border-radius: 5px;
}

/* Input Group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group>.form-control,
.input-group>.custom-select,
.input-group>.custom-file {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

/* Input group addon/btn yerleşimi */
.input-group>.form-control+.input-group-append>.btn,
.input-group>.form-control+.input-group-append>.input-group-text,
.input-group>.custom-select+.input-group-append>.btn,
.input-group>.custom-select+.input-group-append>.input-group-text,
.input-group>.custom-file+.input-group-append>.btn,
.input-group>.custom-file+.input-group-append>.input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text,
.input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ... diğer input-group kombinasyonları ... */

.input-group-prepend,
.input-group-append {
    display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
    position: relative;
    z-index: 2;
}

.input-group-prepend .btn+.btn,
.input-group-append .btn+.btn {
    margin-left: -1px;
}

.input-group-prepend {
    margin-right: -1px;
}

.input-group-append {
    margin-left: -1px;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: var(--grey-lighter-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Labels */
label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    /* Daha belirgin */
    color: #455a64;
    /* Vuemin */
}

/* Checkbox & Radio (Basic Styling) */
.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

.form-check-input {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}

.form-check-input:disabled~.form-check-label {
    color: #6c757d;
}

.form-check-label {
    margin-bottom: 0;
    color: var(--grey-color);
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
    position: static;
    margin-top: 0;
    margin-right: 0.3125rem;
    margin-left: 0;
}

/* Custom Select (Vuemin) */
.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: var(--white-color) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    appearance: none;
}

.custom-select:focus {
    border-color: #897bff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb, 92, 74, 199), 0.25);
}

.custom-select:focus::-ms-value {
    color: #495057;
    background-color: #fff;
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
    height: auto;
    padding-right: 0.75rem;
    background-image: none;
}

.custom-select:disabled {
    color: #6c757d;
    background-color: #e9ecef;
}

.custom-select::-ms-expand {
    display: none;
}

/* Form Validation States (Vuemin + Bootstrap 4/5 style) */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--success-color);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: var(--success-color);
    box-shadow: 0 0 0 0.2rem rgba(38, 218, 210, 0.25);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--danger-color);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 0.2rem rgba(239, 83, 80, 0.25);
}

/* Feedback text */
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: var(--danger-color);
}

.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: var(--success-color);
}

.is-invalid~.invalid-feedback,
.is-invalid~.invalid-tooltip {
    display: block;
}

.is-valid~.valid-feedback,
.is-valid~.valid-tooltip {
    display: block;
}

/* --- Tables --- */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--grey-color);
    /* Vuemin tbody text */
    background-color: transparent;
    /* Varsa */
    border-collapse: collapse;
    /* Kenarlıkları birleştir */
}

.table th,
.table td {
    padding: 0.75rem;
    /* Bootstrap default */
    vertical-align: top;
    border-top: 1px solid var(--border-color);
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color);
    /* Daha kalın alt çizgi */
    color: #455a64;
    /* Vuemin thead text */
    font-weight: 600;
    /* Vuemin */
    white-space: nowrap;
    /* Başlıklar tek satırda */
}

.table tbody+tbody {
    border-top: 2px solid var(--border-color);
}

/* Table Striped */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03);
    /* Hafif gri */
}

/* Table Bordered */
.table-bordered {
    border: 1px solid var(--border-color);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-color);
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 2px;
}

/* Table Hover */
.table-hover tbody tr:hover {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.06);
}

/* Table Small */
.table-sm th,
.table-sm td {
    padding: 0.3rem;
}

/* Table Head Variants */
.thead-dark th {
    color: var(--white-color);
    background-color: var(--dark-color);
    border-color: #32383e;
}

.thead-light th {
    color: #495057;
    background-color: var(--grey-lighter-color);
    border-color: var(--border-color);
}

/* Table Responsive Wrapper */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Vuemin specific table styles */
.table .badge {
    text-transform: uppercase;
}

.table .round-img img {
    width: 38px;
    border-radius: 50%;
}

/* Datatables Specific (Vuemin'den Temel Stiller) */
.dataTables_wrapper {
    padding-top: 10px;
}

.dataTables_length {
    float: left;
    margin-bottom: 1rem;
}

.dataTables_filter {
    float: right;
    margin-bottom: 1rem;
}

.dataTables_length label,
.dataTables_filter label {
    font-weight: normal;
    color: var(--grey-color);
}

.dataTables_length select,
.dataTables_filter input {
    margin-left: 0.5rem;
    display: inline-block;
    width: auto;
    border-radius: 4px;
    /* Input stili */
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.6rem;
}

.dataTables_info {
    clear: both;
    float: left;
    padding-top: 0.75rem;
    color: var(--grey-light-color);
}

.dataTables_paginate {
    float: right;
    padding-top: 0.5rem;
}

.paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: var(--primary-color) !important;
    /* Link rengi */
    border: 1px solid transparent;
    /* Borderless */
    border-radius: 4px;
}

.paginate_button.current,
.paginate_button.current:hover {
    color: var(--white-color) !important;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.paginate_button.disabled,
.paginate_button.disabled:hover,
.paginate_button.disabled:active {
    cursor: default;
    color: var(--grey-light-color) !important;
    border: 1px solid transparent;
    background: transparent;
}

.paginate_button:hover {
    color: var(--white-color) !important;
    text-decoration: none;
    background: var(--primary-color);
    opacity: 0.8;
    border: 1px solid var(--primary-color);
}

/* DT Buttons (Vuemin) */
.dt-buttons {
    display: inline-block;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

.dt-buttons .dt-button {
    background: var(--primary-color);
    border-radius: 4px;
    color: var(--white-color);
    margin-right: 3px;
    padding: 5px 15px;
    border: none;
}

.dt-buttons .dt-button:hover {
    background: #4a3aab;
}

@media (max-width: 767px) {

    .dataTables_length,
    .dataTables_filter,
    .dt-buttons {
        float: none;
        display: block;
        text-align: center;
        margin-left: 0;
    }

    .dataTables_filter {
        margin-top: 0.5rem;
    }

    .dt-buttons {
        margin-top: 0.5rem;
    }
}

/* --- Modals --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translateY(-50px);
    /* Yukarıdan gelsin */
}

.modal.show .modal-dialog {
    transform: none;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {

    /* Small devices */
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }
}

@media (min-width: 992px) {

    /* Large devices */
    .modal-lg,
    .modal-xl {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {

    /* Extra large */
    .modal-xl {
        max-width: 1140px;
    }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--white-color);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    /* Vuemin */
    outline: 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: 0.5;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: calc(5px - 1px);
    border-top-right-radius: calc(5px - 1px);
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    /* Biraz daha büyük */
    color: #455a64;
}

.modal-header .close {
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    background-color: transparent;
    border: 0;
}

.modal-header .close:hover {
    opacity: 0.75;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    border-bottom-right-radius: calc(5px - 1px);
    border-bottom-left-radius: calc(5px - 1px);
}

.modal-footer> :not(:first-child) {
    margin-left: 0.25rem;
}

.modal-footer> :not(:last-child) {
    margin-right: 0.25rem;
}

/* --- Badges & Labels (Vuemin) --- */
.badge {
    display: inline-block;
    padding: 0.3em 0.6em;
    /* Ayarlı padding */
    font-size: 75%;
    font-weight: 500;
    /* Daha belirgin */
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 4px;
    /* Vuemin */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Empty badges collapse */
.badge:empty {
    display: none;
}

/* Pill badges */
.badge-pill {
    padding-right: 0.8em;
    padding-left: 0.8em;
    border-radius: 10rem;
}

/* Badge Colors */
.badge-primary {
    color: var(--white-color);
    background-color: var(--primary-color);
}

.badge-secondary {
    color: var(--white-color);
    background-color: var(--secondary-color);
}

.badge-success {
    color: var(--white-color);
    background-color: var(--success-color);
}

.badge-info {
    color: var(--white-color);
    background-color: var(--info-color);
}

.badge-warning {
    color: #212529;
    background-color: var(--warning-color);
}

.badge-danger {
    color: var(--white-color);
    background-color: var(--danger-color);
}

.badge-light {
    color: #212529;
    background-color: var(--light-color);
}

.badge-dark {
    color: var(--white-color);
    background-color: var(--dark-color);
}

/* Vuemin Labels (Badge ile aynı stil) */
.label {
    display: inline-block;
    padding: 3px 10px;
    line-height: 13px;
    color: #ffffff;
    font-weight: 400;
    border-radius: 4px;
    font-size: 75%;
}

.label-rounded {
    border-radius: 60px;
}

.label-primary {
    background-color: var(--primary-color);
}

.label-success {
    background-color: var(--success-color);
}

.label-info {
    background-color: var(--info-color);
}

.label-warning {
    background-color: var(--warning-color);
    color: #212529;
}

.label-danger {
    background-color: var(--danger-color);
}

.label-dark {
    background-color: var(--dark-color);
}

.label-light-success {
    background-color: #e8fdeb;
    color: var(--success-color);
}

.label-light-info {
    background-color: #cfecfe;
    color: var(--info-color);
}

.label-light-warning {
    background-color: #fff8ec;
    color: var(--warning-color);
}

.label-light-danger {
    background-color: #f9e7eb;
    color: var(--danger-color);
}

.label-light-primary {
    background-color: #f1effd;
    color: var(--primary-color);
}

.label-light-inverse {
    background-color: #f6f6f6;
    color: var(--dark-color);
}


/* --- Alerts --- */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 4px;
    /* Vuemin */
}

.alert-heading {
    color: inherit;
}

.alert-link {
    font-weight: 700;
}

.alert-dismissible {
    padding-right: 4rem;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    color: inherit;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.5;
}

.alert-dismissible .close:hover {
    opacity: 0.75;
}

/* Alert Colors (Vuemin Light Stilleri) */
.alert-primary {
    color: #31286a;
    background-color: #f1effd;
    border-color: #e4e0fa;
}

.alert-primary .alert-link {
    color: #251e52;
}

.alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.alert-secondary .alert-link {
    color: #202326;
}

.alert-success {
    color: #147672;
    background-color: #e8fdeb;
    border-color: #d5f9df;
}

.alert-success .alert-link {
    color: #0d4e4b;
}

.alert-info {
    color: #0d4070;
    background-color: #cfecfe;
    border-color: #b8e2fd;
}

.alert-info .alert-link {
    color: #082846;
}

.alert-warning {
    color: #855d16;
    background-color: #fff8ec;
    border-color: #ffefd2;
}

.alert-warning .alert-link {
    color: #5b3f0e;
}

.alert-danger {
    color: #7e2c28;
    background-color: #f9e7eb;
    border-color: #f3d6db;
}

.alert-danger .alert-link {
    color: #571f1b;
}

.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

.alert-light .alert-link {
    color: #686868;
}

.alert-dark {
    color: #182028;
    background-color: #f6f6f6;
    border-color: #e7e7e7;
}

.alert-dark .alert-link {
    color: #0b0e11;
}


/* --- Progress Bars --- */
.progress {
    display: flex;
    height: 6px;
    /* Vuemin height */
    overflow: hidden;
    font-size: 0.75rem;
    background-color: var(--grey-lighter-color);
    border-radius: 4px;
    /* Vuemin */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--white-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--primary-color);
    /* Default */
    transition: width 0.6s ease;
}

/* Progress Colors (Vuemin) */
.progress-bar.bg-success {
    background-color: var(--success-color);
}

.progress-bar.bg-info {
    background-color: var(--info-color);
}

.progress-bar.bg-warning {
    background-color: var(--warning-color);
}

.progress-bar.bg-danger {
    background-color: var(--danger-color);
}

.progress-bar.bg-dark {
    background-color: var(--dark-color);
}

.progress-bar.bg-secondary {
    background-color: var(--secondary-color);
}

/* Striped */
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

/* Animated */
.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

/* Vuemin Progress Sizes */
.progress-sm {
    height: 8px;
}

.progress-lg {
    height: 15px;
}

/* --- Popovers & Tooltips (Basic Structure) --- */
/* Add styles from Bootstrap or a library if needed */
.tooltip {
    /* Basic */
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: var(--font-family-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.8rem;
    word-wrap: break-word;
    opacity: 0;
}

.tooltip.show {
    opacity: 0.9;
}

.tooltip .tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 0.25rem;
}

.tooltip .arrow {
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.4rem;
}

.tooltip .arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

/* bs-tooltip-top, bs-tooltip-bottom etc. positioning required */


/* ========================================================================
   4. Specific Sections & Widgets
   ======================================================================== */

/* --- Login Page --- */
.login-content {
    margin: 80px 0;
    display: flex;
    justify-content: center;
}

.login-form {
    background: var(--white-color);
    padding: 30px;
    border-radius: 5px;
    /* Vuemin */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    /* Hafif gölge */
    max-width: 450px;
    width: 100%;
}

.login-logo {
    text-align: center;
    margin-bottom: 25px;
}

.login-logo img {
    max-height: 60px;
}

.login-logo span {
    color: #455a64;
    font-size: 24px;
    font-weight: 500;
}

.login-form h4 {
    color: #455a64;
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.2rem;
}

.login-form .form-group {
    margin-bottom: 1.5rem;
}

.login-form .form-control {
    height: 45px;
}

/* Biraz daha yüksek input */
.login-form .checkbox label {
    text-transform: none;
    color: var(--grey-color);
}

.login-form .btn {
    width: 100%;
    text-transform: uppercase;
    font-size: 14px;
    padding: 12px;
    border: 0px;
}

/* Vuemin */
.login-form label a {
    color: var(--primary-color);
}

.register-link {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--grey-color);
}

.register-link a {
    color: var(--primary-color);
    font-weight: 500;
}

/* Social Login (Vuemin) */
.social-login-content {
    margin: 20px -30px -20px -30px;
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    background: #fcfcfc;
    text-align: center;
    border-radius: 0 0 5px 5px;
}

.social-button {
    padding: 0 30px;
}

.social-button .btn {
    margin: 0 5px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
}

/* Circle gibi */
.btn-facebook {
    background-color: #3b5998;
    color: #fff;
}

.btn-twitter {
    background-color: #1da1f2;
    color: #fff;
}

.btn-google {
    background-color: #dd4b39;
    color: #fff;
}

/* Google için */

/* --- Profile --- */
.profile-widget-one {
    /* Vuemin */
    /* İleride stil eklenecek */
    _border: none; /* Geçici, anlamsız bir stil */
}

.card-two {
    /* Vuemin */
    /* İleride stil eklenecek */
    _outline: none; /* Geçici, anlamsız bir stil */
}

.profile-tab li a.nav-link {
    /* Vuemin */
    border: 0 none;
    color: #455a64;
    padding: 15px 20px;
}

.profile-tab li a.nav-link.active {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}

/* Timeline (Vuemin) */
.timeline {
    list-style: none;
    padding: 0 0 8px;
    position: relative;
    margin-left: 20px;
}

.timeline::before {
    top: 7px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: var(--border-color);
    left: -10px;
}

.timeline>li {
    margin-bottom: 20px;
    position: relative;
}

.timeline>li>.timeline-badge {
    color: #ffffff;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 1.2em;
    text-align: center;
    position: absolute;
    top: 0px;
    left: -27px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    z-index: 100;
}

.timeline>li>.timeline-panel {
    margin-left: 30px;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    background: var(--white-color);
}

.timeline>li>.timeline-panel::before {
    /* Arrow */
    content: " ";
    position: absolute;
    display: inline-block;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--border-color);
    left: -8px;
    top: 8px;
}

.timeline>li>.timeline-panel::after {
    /* Arrow background */
    content: " ";
    position: absolute;
    display: inline-block;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid var(--white-color);
    left: -7px;
    top: 9px;
}

.timeline-title {
    margin: 0 0 5px 0;
    font-size: 1rem;
    font-weight: 500;
    color: #455a64;
}

.timeline-body>p,
.timeline-body>ul {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.timeline-body>p+p {
    margin-top: 5px;
}

.timeline-time {
    font-size: 0.8rem;
    color: var(--grey-light-color);
}

/* Timeline Badge Colors (Vuemin'den) */
.timeline-badge.primary {
    background-color: var(--primary-color) !important;
}

.timeline-badge.success {
    background-color: var(--success-color) !important;
}

.timeline-badge.warning {
    background-color: var(--warning-color) !important;
}

.timeline-badge.danger {
    background-color: var(--danger-color) !important;
}

.timeline-badge.info {
    background-color: var(--info-color) !important;
}

/* --- Gallery (Basic Grid) --- */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    /* Otomatik sütunlar */
    gap: 1rem;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gallery-item img:hover {
    transform: scale(1.03);
}

/* ========================================================================
   5. Utility Classes
   ======================================================================== */
/* Text Colors */
.text-primary {
    color: var(--primary-color) !important;
}

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

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

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

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

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

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

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

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

.text-muted {
    color: var(--grey-light-color) !important;
}

/* Background Colors */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-success {
    background-color: var(--success-color) !important;
}

.bg-info {
    background-color: var(--info-color) !important;
}

.bg-warning {
    background-color: var(--warning-color) !important;
}

.bg-danger {
    background-color: var(--danger-color) !important;
}

.bg-light {
    background-color: var(--light-color) !important;
}

.bg-dark {
    background-color: var(--dark-color) !important;
}

.bg-white {
    background-color: var(--white-color) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* Light Backgrounds (Vuemin) */
.bg-light-primary {
    background-color: #f1effd !important;
}

.bg-light-success {
    background-color: #e8fdeb !important;
}

.bg-light-info {
    background-color: #cfecfe !important;
}

.bg-light-warning {
    background-color: #fff8ec !important;
}

.bg-light-danger {
    background-color: #f9e7eb !important;
}

.bg-light-inverse {
    background-color: #f6f6f6 !important;
}

/* Dark ile eşleşiyor */
/* Inverse Backgrounds (Second CSS) */
.bg-inverse-primary {
    background: rgba(92, 74, 199, 0.1);
}

/* Adjusted alpha */
.bg-inverse-secondary {
    background: rgba(108, 117, 125, 0.1);
}

.bg-inverse-success {
    background: rgba(38, 218, 210, 0.1);
}

.bg-inverse-info {
    background: rgba(25, 118, 210, 0.1);
}

.bg-inverse-warning {
    background: rgba(255, 178, 43, 0.1);
}

.bg-inverse-danger {
    background: rgba(239, 83, 80, 0.1);
}

.bg-inverse-light {
    background: rgba(248, 249, 250, 0.2);
}

/* Adjusted alpha */
.bg-inverse-dark {
    background: rgba(47, 61, 74, 0.1);
}

.bg-inverse-white {
    background: rgba(255, 255, 255, 0.2);
}

/* Spacing (Bootstrap 4/5 style basic margin/padding) */
.m-0 {
    margin: 0 !important;
}

.mt-0,
.my-0 {
    margin-top: 0 !important;
}

/* ... .m-1, .mt-1, .mb-2, .px-3 etc. ... */
.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-1,
.my-1 {
    margin-top: 0.25rem !important;
}

.mt-2,
.my-2 {
    margin-top: 0.5rem !important;
}

.mt-3,
.my-3 {
    margin-top: 1rem !important;
}

.mt-4,
.my-4 {
    margin-top: 1.5rem !important;
}

.mt-5,
.my-5 {
    margin-top: 3rem !important;
}

.mb-1,
.my-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2,
.my-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3,
.my-3 {
    margin-bottom: 1rem !important;
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important;
}

/* Padding */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

/* ... pt, pb, pl, pr, px, py ... */

/* Other Utilities */
.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.float-right {
    float: right !important;
}

.float-left {
    float: left !important;
}

.d-block {
    display: block !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.align-items-center {
    align-items: center !important;
}

.border-0 {
    border: 0 !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

/* ========================================================================
   6. Responsive Styles
   ======================================================================== */

/* İki dosyadan gelen tüm @media sorguları buraya eklenebilir
   Özellikle layout ve sidebar davranışları için olanlar önemlidir. */

@media (max-width: 1199.98px) {
    /* Orta boy ekranlar için ayarlamalar */
}

@media (max-width: 991.98px) {

    /* Tablet ve altı - Sidebar'ın mobil davranışını tetikler */
    .t-header .t-header-brand-wrapper {
        width: var(--sidebar-width-mini);
        min-width: var(--sidebar-width-mini);
        justify-content: center;
        padding-left: 0;
    }

    .t-header .t-header-brand-wrapper .logo {
        display: none;
    }

    .t-header .t-header-brand-wrapper .logo-mini {
        display: block;
        width: 25px;
    }

    .t-header .t-header-brand-wrapper p {
        display: none;
    }

    .page-body .sidebar {
        position: fixed;
        /* Mobilde fixed yapalım */
        top: 0;
        left: 0;
        /* Başlangıçta gizli */
        height: 100vh;
        /* Tam yükseklik */
        margin-left: calc(-1 * var(--sidebar-width));
        /* Genişlik kadar sola kaydır */
        z-index: 1035;
        /* Header'ın üstünde */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }

    .header-fixed .sidebar {
        /* Fixed header mobilde geçerli değil */
        padding-top: 0;
    }

    .header-fixed .sidebar .navigation-menu {
        /* Scrollbar */
        height: 100vh;
        overflow-y: auto;
    }

    .page-body.sidebar-collpased .sidebar {
        margin-left: 0;
        /* Açılınca sola sıfırla */
    }

    .page-body.sidebar-collpased::before {
        /* Overlay */
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1034;
    }

    .page-content-wrapper {
        margin-left: 0 !important;
        /* İçerik hep tam ekran */
        width: 100%;
        min-width: 100vw;
    }

    footer.footer {
        left: 0;
    }
}

@media (max-width: 767.98px) {

    /* Telefon boyutları */
    .t-header .t-header-content-wrapper {
        padding: 0 0.5rem;
    }

    .page-content-wrapper {
        padding: calc(var(--header-height) + 0.5rem) 0.5rem calc(60px + 0.5rem);
    }

    .viewport-header {
        padding: 0;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 1rem);
    }

    /* DataTables butonları/filtreleri daha iyi yerleşsin */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dt-buttons,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .dataTables_paginate {
        margin-top: 0.5rem;
    }
}

@media (max-width: 575.98px) {

    /* Çok küçük ekranlar */
    .display-5 {
        font-size: 2.5rem;
    }

    .login-form {
        padding: 20px;
    }

    .social-login-content {
        margin: 20px -20px -20px -20px;
    }

    .timeline {
        margin-left: 10px;
    }

    .timeline::before {
        left: -10px;
    }

    .timeline>li>.timeline-badge {
        left: -27px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 1em;
    }

    .timeline>li>.timeline-panel {
        margin-left: 15px;
    }

    .timeline>li>.timeline-panel::before {
        border-right-width: 7px;
        left: -7px;
        top: 10px;
    }

    .timeline>li>.timeline-panel::after {
        border-right-width: 6px;
        left: -6px;
        top: 11px;
    }
}

/* Vuemin'den kalan @media sorguları eklenebilir */

/* Dropdown Menü Düzeltmeleri */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1040; /* Header z-index'inden yüksek olmalı */
    min-width: 10rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    background-color: #fff;
  }
  
  /* Profil Dropdown Özel Stilleri */
  .nav-item.dropdown .dropdown-menu {
    padding: 0.5rem 0;
  }
  
  .nav-item.dropdown .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
  }
  
  .nav-item.dropdown .dropdown-item i {
    margin-right: 0.75rem;
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
  }
  
  /* Profil Dropdown Hover Efekti */
  .nav-item.dropdown .dropdown-item:hover {
    background-color: #f8f9fa;
  }
  
  /* Dropdown Toggle İyileştirmesi */
  .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;
  }
  
  /* Mobil Görünüm İyileştirmeleri */
  @media (max-width: 767.98px) {
    .dropdown-menu {
      position: absolute;
      width: auto;
      min-width: 10rem;
      right: 0;
      left: auto;
    }
    
    .t-header .nav-item .dropdown-menu {
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
  }

  /* Dropdown Menü Görünürlük Kontrolü */
.dropdown-menu {
    display: none;
  }
  
  .dropdown-menu.show {
    display: block;
  }
  
  /* Dropdown Konumlandırma Düzeltmesi */
  .nav-item.dropdown {
    position: relative;
  }
  
  .nav-item.dropdown .dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050;
    min-width: 10rem;
    margin-top: 0.125rem;
    background-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
  }
  
  /* Dropdown Öğeleri Düzeltmesi */
  .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    color: var(--grey-color);
    white-space: nowrap;
    border: 0;
  }
  
  .dropdown-item i {
    margin-right: 0.75rem;
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
  }
  
  .dropdown-item:hover, .dropdown-item:focus {
    color: var(--primary-color);
    text-decoration: none;
    background-color: #f8f9fa;
  }
  
  /* Dropdown Divider */
  .dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
  }

  .user-profile img.img-circle {
    width: 80px;
    height: 80px;
    object-fit: cover; /* This maintains aspect ratio */
    border-radius: 50%;
}

/* Sidebar Logo Alanı için Ek Stiller */
.sidebar .sidebar-logo-area {
    /* t-header-brand-wrapper stillerini miras alır ama bazılarını ezeriz */
    display: flex;
    align-items: center;
    justify-content: center; /* Logoyu ortala */
    padding: 15px; /* İç boşluk */
    height: auto; /* Yüksekliği içeriğe göre ayarla, header gibi sabit değil */
    min-height: 65px; /* Header yüksekliği kadar minimum yükseklik */
    border-bottom: 1px solid var(--border-color); /* Menüden ayırmak için */
    background-color: var(--sidebar-bg); /* Arka planı sidebar ile aynı */
}

.sidebar .sidebar-logo-area a {
    display: inline-block; /* Linkin boyutunu resme göre ayarla */
    line-height: 0; /* Resim altındaki boşluğu kaldır */
}

.sidebar .sidebar-logo {
    max-width: 100%; /* Konteynerin dışına taşmasın */
    max-height: 80px; /* Maksimum logo yüksekliği (ayarlayabilirsiniz) */
    height: auto;     /* Orantıyı koru */
    display: block;   /* Gereksiz boşlukları önle */
    margin: 0 auto;   /* Yatayda ortala (justify-content zaten yapıyor ama garanti olsun) */
}

/* Fixed Header durumunda sidebar logosunun header'daki ile aynı hizada olması için */
.header-fixed .sidebar .sidebar-logo-area {
    /* height: var(--header-height); */ /* Eğer header ile aynı yükseklikte isterseniz */
    /* Veya padding ile ayarlayın */
     padding-top: 10px;
     padding-bottom: 10px;
     min-height: var(--header-height); /* Header yüksekliği ile aynı olsun */
}

/* Sidebar daraltıldığında mini logoyu göster (opsiyonel) */
@media (min-width: 992px) {
    .sidebar-collapsed .sidebar .sidebar-logo-area {
         padding: 10px 5px; /* Daha az padding */
         min-height: var(--header-height);
    }
    .sidebar-collapsed .sidebar .sidebar-logo-area .sidebar-logo {
        max-height: 35px; /* Daha küçük logo */
        /* Eğer mini logo için ayrı bir resim yükletirseniz, onu burada gösterebilirsiniz */
    }
}

/* Menünün başlangıcındaki boşluğu ayarla */
.sidebar .navigation-menu {
    margin-top: 0; /* Eski user-profile boşluğunu kaldır */
}
.sidebar .navigation-menu.pt-3 { /* PHP'de eklediğimiz sınıf */
    padding-top: 1rem !important; /* Logonun altından başlasın */
}