body {
    box-sizing: border-box;
}

.donem-text {
    display: flex;              /* inline-flex yerine flex */
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    padding: 8px 16px;

    color: #1f2937;
    font-size: 12px;
    font-weight: 600;

    border: 1px solid #c6c6c6;
    border-radius: 14px;

    background: #f0f0f0;
}

/*
.donem-text:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.8);
}
*/

.donem-text b {
    color: #c14545;
    font-weight: bold;
    font-size: 14px;
}

.bg-sidebar {

    border: 1px solid #c6c6c6;

    background: #f9f9f9;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.7);

    transition: all .25s ease;
}

.container-div {
    gap: 10px;
    width: 100%;
    margin-top: 5px;
    padding: 8px 16px;
    background: #f9f9f9;
    border: 1px solid #c6c6c6;
    border-radius: 14px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.7);

    transition: all .25s ease;
}

.container-div-2 {
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 1px solid #c6c6c6;
    border-radius: 14px;
    background: #f9f9f9;
}


.zamanlarGunlerPaneli {
    border: solid 1px #000;
    padding: 10px;
}

.table-td {
    min-height: 80px;
    transition: all 0.2s ease;
}

.table-td:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}




.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}



/* 🎨 Bırakılabilir alanlara görsel vurgu */
.drop-target {
    outline: 3px dashed #4ade80;
    /* yeşil çizgi */
    background-color: rgba(74, 222, 128, 0.15);
    /* açık yeşil arka plan */
    transition: background-color 0.2s ease;
}

/* 🎨 Sürüklenen kart için opaklık efekti */
.dp-card-drag.dragging {
    opacity: 0.4;
    transform: rotate(5deg);
    cursor: grabbing;
}

/* 🎨 Sürükleme sırasında hedef hücre vurgusu */
.border.drag-hover {
    outline: 3px dashed #3b82f6;
    /* mavi çizgi */
    background-color: rgba(59, 130, 246, 0.1);
}

.ders-karti {
    padding: 8px 12px;
    background: #2563eb;
    color: white;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: grab;
    user-select: none;
    transition: 0.2s;
}

.ders-karti:active {
    opacity: 0.4;
    transform: rotate(5deg);
    cursor: grabbing;
}

.dp-card {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    /* İçeriği dikeyde düzenler */
    justify-content: center;
    /* Yatayda ortalar */
    align-items: center;
    /* Dikeyde ortalar */
}

.dp-card-drag {
    border-radius: 8px;
    padding: 5px;
    margin: 1px 0;
    /*color: #0f4374;*/
    background: linear-gradient(135deg, #f0c8a3 0%, #d6a165 100%);
}

.dp-card-drag-2 {
    border-radius: 8px;
    padding: 5px;
    margin: 1px 0;
    /*color: #0f4374;*/
    background: linear-gradient(135deg, #e29a70 0%, #d6724a 100%);
}

.dp-card-drag:hover {
    transform: scale(1.02);
}


.card-baslik {
    margin-top: 10px;
}



/* Saat hücreleri */
.time-slot {
    background: linear-gradient(135deg, #00466cce 0%, #00466c9f 100%);
    color: #ffffff;

    font-weight: 600;
    text-align: center;

    padding: 10px 14px;
    border-radius: 10px;

    box-shadow:
        0 4px 12px rgba(37, 99, 235, 0.35);

    transition: all 0.25s ease;
}

.time-slot:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.45);
}


/* Tablo üst container / başlık alanı */
.table-container {
    background: linear-gradient(145deg, #00466cc5 0%, #00466cc5 100%);

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;

    padding: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);

    backdrop-filter: blur(8px);
}


/* Tablo sütun başlıkları */
.table-header {
    background: linear-gradient(135deg, #a0adcc 0%, #525a6b 100%);

    color: #f8fafc;

    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    padding: 14px;

    border-bottom: 1px solid #ffffff14;

    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}


.bg-style-1 {
  background: linear-gradient(to right, #0983a1d8, #0e7490d9);
}

.bg-style-2 {
  background: linear-gradient(to right, #ca8b04de, #a16107d6);
  border-radius: 0.5rem; /* rounded-lg */
}

.bg-style-3 {
  background: linear-gradient(to right, #0d9489d7, #0f766dd2);
}

.bg-style-4 {
  background: linear-gradient(to right, #ea5a0cd1, #c2400cd0);
}

.bg-style-5 {
  background: linear-gradient(to right, #059668d2, #047857d3);
}

.bg-style-6 {
  background: linear-gradient(to right, #325d91cd, #2c5382d2);
}


.card-1 {
    position: relative;
    border-radius: 4px 10px 10px 4px;
    padding: 14px 12px 12px 16px;
    margin: 4px 2px;

    /* Sayfa görünümü */
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.75) 0%,
            rgba(255,255,255,0.35) 4%,
            transparent 8%
        ),
        #e7e7e7;

    /* Kitap sırtı */
    border-left: 7px solid #087f9b;

    /* Hafif sayfa kenarı */
    border-right: 1px solid #d8d3c7;

    box-shadow:
        3px 3px 0 #dbd9d6,
        5px 5px 0 #c9c7c0,
        0 4px 10px rgba(0,0,0,0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Kitap sırtındaki çizgiler */
.card-1::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 8px;
    bottom: 8px;
    width: 2px;

    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.65) 0px,
        rgba(255,255,255,0.65) 2px,
        transparent 2px,
        transparent 6px
    );

    border-radius: 2px;
}

/* Sayfa kenarı çizgileri */
.card-1::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;

    background: repeating-linear-gradient(
        to bottom,
        #d9d6cd 0px,
        #d6d5d2 1px,
        transparent 1px,
        transparent 4px
    );

    opacity: 0.8;
}


.card-2 {
    position: relative;
    border-radius: 4px 10px 10px 4px;
    padding: 14px 12px 12px 16px;
    margin: 4px 2px;

    /* Sayfa görünümü */
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.75) 0%,
            rgba(255,255,255,0.35) 4%,
            transparent 8%
        ),
        #e7e7e7;

    /* Kitap sırtı */
    border-left: 7px solid #d29b06;

    /* Hafif sayfa kenarı */
    border-right: 1px solid #d8d3c7;

    box-shadow:
        3px 3px 0 #dbd9d6,
        5px 5px 0 #c9c7c0,
        0 4px 10px rgba(0,0,0,0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Kitap sırtındaki çizgiler */
.card-2::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 8px;
    bottom: 8px;
    width: 2px;

    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.65) 0px,
        rgba(255,255,255,0.65) 2px,
        transparent 2px,
        transparent 6px
    );

    border-radius: 2px;
}

/* Sayfa kenarı çizgileri */
.card-2::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;

    background: repeating-linear-gradient(
        to bottom,
        #d9d6cd 0px,
        #d6d5d2 1px,
        transparent 1px,
        transparent 4px
    );

    opacity: 0.8;
}




.card-3 {
    position: relative;
    border-radius: 4px 10px 10px 4px;
    padding: 14px 12px 12px 16px;
    margin: 4px 2px;

    /* Sayfa görünümü */
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.75) 0%,
            rgba(255,255,255,0.35) 4%,
            transparent 8%
        ),
        #e7e7e7;

    /* Kitap sırtı */
    border-left: 7px solid #459a92;

    /* Hafif sayfa kenarı */
    border-right: 1px solid #d8d3c7;

    box-shadow:
        3px 3px 0 #dbd9d6,
        5px 5px 0 #c9c7c0,
        0 4px 10px rgba(0,0,0,0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Kitap sırtındaki çizgiler */
.card-3::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 8px;
    bottom: 8px;
    width: 2px;

    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.65) 0px,
        rgba(255,255,255,0.65) 2px,
        transparent 2px,
        transparent 6px
    );

    border-radius: 2px;
}

/* Sayfa kenarı çizgileri */
.card-3::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;

    background: repeating-linear-gradient(
        to bottom,
        #d9d6cd 0px,
        #d6d5d2 1px,
        transparent 1px,
        transparent 4px
    );

    opacity: 0.8;
}



.card-4 {
    background: linear-gradient(135deg, #0a7c9b 0%, #018ab0 100%);
        color: #ffffff;

    font-weight: 600;
    text-align: center;

    padding: 10px 14px;
    border-radius: 10px;

    box-shadow:
        0 4px 12px rgba(37, 99, 235, 0.35);

    transition: all 0.25s ease;
}


.card-6 {
        background: linear-gradient(135deg, #00676a 0%, #009fa4 100%);
    color: #ffffff;

    font-weight: 600;
    text-align: center;

    padding: 10px 14px;
    border-radius: 10px;

    box-shadow:
        0 4px 12px rgba(37, 99, 235, 0.35);

    transition: all 0.25s ease;
}

.card-7 {
    background: linear-gradient(135deg, #afbdc7 0%, #dae7f0 100%);
}

.card-8 {
    background: linear-gradient(135deg, #9b270ad5 0%, #9b270ad5 100%);
        color: #ffffff;

    font-weight: 600;
    text-align: center;

    padding: 10px 14px;
    border-radius: 10px;

    box-shadow:
        0 4px 12px rgba(37, 99, 235, 0.35);

    transition: all 0.25s ease;
}

.card-9 {
    position: relative;
    border-radius: 4px 10px 10px 4px;
    padding: 14px 12px 12px 16px;
    margin: 4px 2px;

    /* Sayfa görünümü */
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.75) 0%,
            rgba(255,255,255,0.35) 4%,
            transparent 8%
        ),
        #e7e7e7;

    /* Kitap sırtı */
    border-left: 7px solid #d24e06;

    /* Hafif sayfa kenarı */
    border-right: 1px solid #d8d3c7;

    box-shadow:
        3px 3px 0 #dbd9d6,
        5px 5px 0 #c9c7c0,
        0 4px 10px rgba(0,0,0,0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Kitap sırtındaki çizgiler */
.card-9::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 8px;
    bottom: 8px;
    width: 2px;

    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.65) 0px,
        rgba(255,255,255,0.65) 2px,
        transparent 2px,
        transparent 6px
    );

    border-radius: 2px;
}

/* Sayfa kenarı çizgileri */
.card-9::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;

    background: repeating-linear-gradient(
        to bottom,
        #d9d6cd 0px,
        #d6d5d2 1px,
        transparent 1px,
        transparent 4px
    );

    opacity: 0.8;
}

.card-10 {
    border-radius: 8px;
    padding: 5px;
    margin: 1px 0;
    /*color: #0f4374;*/
    background: #edecec;
    border-left: 4px solid #2c5282;
    border-right: 4px solid #2c5282;
}


.card-11 {
    position: relative;
    border-radius: 4px;
    padding: 12px 10px 10px 32px;
    margin: 4px 0;

    /* Kağıt rengi */
    background-color: #fffdf5;

    /* Defter sayfası çizgileri */
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 23px,
            rgba(80, 140, 190, 0.18) 24px
        );

    /* Sayfa kenarı */
    border-left: 3px solid #e57373;

    /* Hafif sayfa gölgesi */
    box-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.04),
        4px 5px 10px rgba(0, 0, 0, 0.10);

    overflow: hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Sayfanın solundaki dikey defter çizgisi */
.card-11::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;

    width: 1px;

    background: rgba(220, 80, 80, 0.35);

    pointer-events: none;
}


/* Spiral delikleri */
.card-11::after {
    content: "";
    position: absolute;

    left: 6px;
    top: 12px;
    bottom: 12px;

    width: 10px;

    background-image:
        radial-gradient(
            circle,
            #7b7b7b 3px,
            transparent 3.5px
        );

    background-size: 10px 28px;
    background-repeat: repeat-y;

    opacity: 0.75;

    pointer-events: none;
}

/* Sidebar Styles */
.sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Header Styles */
.header-gradient {
    background: linear-gradient(135deg, #4D5663 0%, #4D5663 100%);
}

.body-bg-color {
    background-color: #E9EBEF;
}

/* Main Content Styles */
.main-content {
    transition: margin-left 0.3s ease-in-out;
}

/* Mobile Menu Button Animation */
.menu-btn {
    transition: all 0.3s ease;
}

.menu-btn:hover {
    transform: scale(1.1);
}

/* Sidebar Menu Item */
.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 12px;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}

/* Sol vurgu çizgisi */
.sidebar-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    width: 4px;
    height: 80%;
    border-radius: 20px;
    background: linear-gradient(180deg, #22d3ee, #06b6d4);
    transform: scaleY(0);
    transition: transform .3s ease;
}

/* Hover */
.sidebar-item:hover {
    backdrop-filter: blur(8px);
    /*transform: translateX(3px) scale(1.02);*/
    box-shadow:
        0 2px 2px rgba(0,0,0,.25),
        inset 0 1px rgba(255,255,255,.08);
}

/* Sol çizgiyi göster */
.sidebar-item:hover::before {
    transform: scaleY(1);
}

/* İkon animasyonu */
.sidebar-item span:first-child {
    transition: transform .3s ease;
}

.sidebar-item:hover span:first-child {
    transform: translateX(4px) scale(1.15);
}

/* Tıklama efekti */
.sidebar-item:active {
    transform: translateX(3px) scale(.98);
}


.pagination-container {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 12px;
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-item {
    margin: 0 4px;
}

.page-item a {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #007bff;
    text-decoration: none;
}

.page-item.active a {
    background-color: #007bff;
    color: white;
}

.page-item.disabled a {
    pointer-events: none;
    color: #999;
}


.loader {
    border: 2px solid #f3f3f3;
    /* Açık gri */
    border-top: 2px solid #fff;
    /* Beyaz veya istediğin renk */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.mr-2 {
    margin-right: 0.5rem;
}


@media (min-width: 1024px) {
    .sidebar {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 280px;
    }
}