.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:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* DARK MODE */
.dark .container-div {
    background: #1e293b; /* slate-800 */
    border-color: #475569; /* slate-600 */

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}


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


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

    transition:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* DARK MODE */
.dark .container-div-2 {
    background: #1e293b; /* slate-800 */
    border-color: #475569; /* slate-600 */

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}

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

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

.bg-style-2 {
  background: linear-gradient(to right, #ca8b04de, #a16107d6);
}

.dark .bg-style-2 {
  background: linear-gradient(to right, #ca8b046e, #a161076e);
}

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

.dark .bg-style-3 {
  background: linear-gradient(to right, #0d94896e, #0f766d62);
}

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

.dark .bg-style-4 {
  background: linear-gradient(to right, #ea5a0c6e, #c2400c61);
}

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

.dark .bg-style-5 {
  background: linear-gradient(to right, #0596686e, #04785761);
}

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

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


.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%
        ),
        #f0f0f0;

    /* 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;
}

/* =========================================================
   DARK MODE - CARD RENKLERİ
   Tailwind dark sınıfı: <html class="dark">
   ========================================================= */


/* =========================================================
   CARD-1
   ========================================================= */

.dark .card-1 {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.04) 4%,
            transparent 8%
        ),
        #2d394d;

    border-left-color: #0891b2;
    border-right-color: #334155;

    box-shadow:
        3px 3px 0 #172033,
        5px 5px 0 #111827,
        0 4px 10px rgba(0,0,0,0.45);

    color: #e2e8f0;
}

.dark .card-1::before {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.25) 0px,
        rgba(255,255,255,0.25) 2px,
        transparent 2px,
        transparent 6px
    );
}

.dark .card-1::after {
    background: repeating-linear-gradient(
        to bottom,
        #475569 0px,
        #3f4b5d 1px,
        transparent 1px,
        transparent 4px
    );

    opacity: 0.8;
}


/* =========================================================
   CARD-2
   ========================================================= */

.dark .card-2 {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.04) 4%,
            transparent 8%
        ),
        #2d394d;

    border-left-color: #d29b06;
    border-right-color: #3f4a5a;

    box-shadow:
        3px 3px 0 #1b2432,
        5px 5px 0 #111827,
        0 4px 10px rgba(0,0,0,0.45);

    color: #e5e7eb;
}

.dark .card-2::before {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.25) 0px,
        rgba(255,255,255,0.25) 2px,
        transparent 2px,
        transparent 6px
    );
}

.dark .card-2::after {
    background: repeating-linear-gradient(
        to bottom,
        #4b5563 0px,
        #46505e 1px,
        transparent 1px,
        transparent 4px
    );
}


/* =========================================================
   CARD-3
   ========================================================= */

.dark .card-3 {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.04) 4%,
            transparent 8%
        ),
        #2d394d;

    border-left-color: #459a92;
    border-right-color: #3d5155;

    box-shadow:
        3px 3px 0 #19262c,
        5px 5px 0 #10191d,
        0 4px 10px rgba(0,0,0,0.45);

    color: #dbeafe;
}

.dark .card-3::before {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.25) 0px,
        rgba(255,255,255,0.25) 2px,
        transparent 2px,
        transparent 6px
    );
}

.dark .card-3::after {
    background: repeating-linear-gradient(
        to bottom,
        #45565c 0px,
        #405158 1px,
        transparent 1px,
        transparent 4px
    );
}


/* =========================================================
   CARD-4
   ========================================================= */

.dark .card-4 {
    background:
        linear-gradient(
            135deg,
            #07566d 0%,
            #087f9b 100%
        );

    color: #f0fdfa;

    box-shadow:
        0 4px 12px rgba(8, 145, 178, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.10);
}


/* =========================================================
   CARD-6
   ========================================================= */

.dark .card-6 {
    background:
        linear-gradient(
            135deg,
            #06484b 0%,
            #007f83 100%
        );

    color: #ecfeff;

    box-shadow:
        0 4px 12px rgba(0, 159, 164, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.10);
}


/* =========================================================
   CARD-7
   ========================================================= */

.dark .card-7 {
    background:
        linear-gradient(
            135deg,
            #334155 0%,
            #475569 100%
        );

    color: #e2e8f0;

    border-color: #475569;
}


/* =========================================================
   CARD-8
   ========================================================= */

.dark .card-8 {
    background:
        linear-gradient(
            135deg,
            #7f200c 0%,
            #9b270a 100%
        );

    color: #fff7ed;

    box-shadow:
        0 4px 12px rgba(155, 39, 10, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.10);
}


/* =========================================================
   CARD-9
   ========================================================= */

.dark .card-9 {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.04) 4%,
            transparent 8%
        ),
        #2d394d;

    border-left-color: #d24e06;
    border-right-color: #514844;

    box-shadow:
        3px 3px 0 #211e1d,
        5px 5px 0 #141211,
        0 4px 10px rgba(0,0,0,0.48);

    color: #f1f5f9;
}

.dark .card-9::before {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.25) 0px,
        rgba(255,255,255,0.25) 2px,
        transparent 2px,
        transparent 6px
    );
}

.dark .card-9::after {
    background: repeating-linear-gradient(
        to bottom,
        #514a45 0px,
        #4a443f 1px,
        transparent 1px,
        transparent 4px
    );
}


/* =========================================================
   CARD-10
   ========================================================= */

.dark .card-10 {
    background: #2d394d;

    color: #e2e8f0;

    border-left-color: #3b82f6;
    border-right-color: #3b82f6;

    box-shadow:
        0 2px 6px rgba(0,0,0,0.30);
}


/* =========================================================
   CARD-11
   ========================================================= */

.dark .card-11 {
    background-color: #2d394d;

    /*
     * Dark modda defter çizgileri
     */
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 23px,
            rgba(80, 140, 190, 0.20) 24px
        );

    border-left-color: #ef6c6c;

    color: #e2e8f0;

    box-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.25),
        4px 5px 10px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   CARD-11 - Sol dikey defter çizgisi
   ========================================================= */

.dark .card-11::before {
    background: rgba(239, 108, 108, 0.35);
}


/* =========================================================
   CARD-11 - Spiral delikleri
   ========================================================= */

.dark .card-11::after {
    background-image:
        radial-gradient(
            circle,
            #94a3b8 3px,
            transparent 3.5px
        );

    opacity: 0.65;
}


/* =========================================================
   DARK MODE HOVER EFEKTLERİ
   ========================================================= */

.dark .card-1:hover,
.dark .card-2:hover,
.dark .card-3:hover,
.dark .card-9:hover,
.dark .card-11:hover {
    transform: translateY(-2px);

    box-shadow:
        3px 4px 0 #172033,
        6px 7px 0 #0f172a,
        0 8px 18px rgba(0,0,0,0.50);
}


.dark .card-4:hover,
.dark .card-6:hover,
.dark .card-8:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0,0,0,0.40),
        inset 0 1px 0 rgba(255,255,255,0.12);
}


.dark .card-7:hover,
.dark .card-10:hover {
    transform: translateY(-2px);

    box-shadow:
        0 6px 14px rgba(0,0,0,0.40);
}