@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');

body {
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border: 0px solid lightblue;
    background-color: #f4f3f3;
}

.logcover {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: 120px;
    border: 0px solid gray;
    border-radius: 10px;
}

.logmainb {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: 30px;
    border: 0px solid black;
    border-radius: 10px;
}

.yazarresim {
    border-radius: 100%;
}

.yazarresimb {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}
/* Category Navigation */
.category-nav {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 10px 0;
    border-bottom: 2px solid #eee;
    flex-wrap: wrap;
}

.category-btn {
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border: 1px solid #e4e2e2;
    border-radius: 4px;
    background-color: white;
    transition: all 0.3s ease;
}

    .category-btn:hover, .category-btn.active {
        background-color: #f0f0f0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .category-btn.active {
        color: #8b0000;
        font-weight: bold;
        border-color: #8b0000;
    }

.columnrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 0px solid black;
    /*    background-image: url('../png/antrasitg.jpg');
*/
}

.awesome-button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: blue;
    width: 65px;
    padding: 3px;
    border: 0px solid #e4e2e2;
    margin-top: 5px;
    margin-bottom: 5px;
    list-style-type: none;
    text-decoration: none;
}

.rowc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    border: 0px solid black;
    overflow: hidden;
    border-radius: 7px;
    box-sizing: border-box;
}

.gozat {
    width: 100%;
}

.cerceve {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: 641px;
    border: 0px solid lightblue;
}

.swiperone {
    width: 100%;
    height: 60px;
    overflow: hidden;
    color: black;
    /*background-color:#f8f8f8;*/
    border-top: 1px solid lightblue;
    border-bottom: 0px solid lightblue;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 22px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.basla {
    display: block;
    text-align: center;
    font-size: 20px;
    width: 100%;
    color: black;
    font-weight: bold;
    text-decoration: none;
    overflow: hidden; /* Taşanı gizle */
    text-overflow: ellipsis; /* Üç nokta ile göster */
    margin-top: 0px;
    text-indent: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-width: 100%;
    word-wrap: break-word;
}

.swanapage {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 500px;
    border-bottom: 0px solid lightblue;
    background-size: 100% 100%;
}

#paginate {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 1;
}

.swiper-pagination-bullet {
    width: 34px;
    height: 31px;
    text-align: center;
    line-height: 29px;
    font-size: 16px;
    color: #000;
    opacity: 1;
    background: white;
    transition: background-color 0.5s ease, color 0.5s ease;
    background-color: #d1dafc;
    border-radius: 3px;
    border: 0.5px outset gray;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

.swiper-pagination-bullet-active {
    color: #fff;
    background: darkred;
    line-height: 30px;
    font-weight: bold;
    border: 0.5px outset darkred;
}

Swiper custom pagination .swiper-pagination-bullet:hover {
    transition: background-color 0.5s ease;
    background: rgba(0, 0, 0, 1);
    color: white;
}

Swiper custom pagination active state .swiper-pagination-bullet-active {
    color: #fff;
    background: red;
}

.swiper-button-prev {
    margin-top: -15px;
}

.swiper-button-next {
    margin-top: -15px;
}

ul.swiper-wrapper {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.swpimage {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: contain;
    border: 0px solid yellow;
    padding-bottom: 50px;
}

.basla:hover {
    text-decoration: none;
}

.swipertwo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    font-size: 19px;
    text-decoration: none;
    border-bottom: 1px solid lightblue;
    max-width: 100%;
    height: fit-content;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 20px;
    overflow: hidden;
}

.ayazi {
    display: block;
    padding-left: 10px;
    text-indent: 10px;
    color: black;
    text-decoration: none;
    min-height: 80px;
    list-style-type: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    word-wrap: break-word;
    margin: 5px;
}

    .ayazi:hover {
        text-decoration: none;
    }
/*8888888888888888888888888888888*/

.socim {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px solid lightgray;
    border-radius: 10px;
}

.soci {
    display: flex;
    align-items: center;
    justify-content: center;
}

.soc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border: 0px solid black;
    margin: 0;
    padding: 0;
}

.social-btn {
    margin: 5px;
    border: 0.5px solid lightblue;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 0;
}

.jumbo {
    width: 100%; /* Container'ı tam genişlik yapar */
    font-size: 18px;
}

/* Tüm resim ve videolar tam genişlik ve orantılı yükseklik */
.biz {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.ben {
    display: block;
    max-width: 400px;
    border-radius: 10px;
    border: 0px solid black;
}

#ben, #biz {
    float: left;
    max-width: min(320px, 40%);
    height: auto;
    margin: 0 24px 16px 0; /* sağ boşluk = 24px */
    border-radius: 8px;
    display: block;
}

/* Float taşmasını önle (clearfix) */
.jumbo::after {
    content: "";
    display: block;
    clear: both;
}

.benim {
    max-width: 400px;
    height: auto;
    border-radius: 10px;
    border: 0px solid black;
}

.jumbo video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Metinler (istersen text-indent bırak) */
.jumbo p {
    text-align: justify;
    text-indent: 30px;
    border: 0px solid black;
    width: 100%;
}

/* Sertifika + Video alanını grid ile responsive yap (media’sız) */
.havavid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.sertifika img {
    border: 3px solid #e6f4fa;
    padding: 0;
    box-sizing: border-box;
}

.havidc .vido {
    border: 2px solid #ddd;
    box-sizing: border-box;
    height: 300px;
    width: 400px;
}

/* Genel başlıklar */
.jumbo h4 {
    font-size: 26px;
    margin: 0 0 6px;
}

.jumbo h5 {
    font-size: 18px;
    font-weight: 500;
    color: #555;
    margin: 0 0 18px;
}

/* Buton */
.ozgecmis a {
    background: #007bff;
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 8px;
    display: inline-block;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .ozgecmis a:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }

/* Görsellerin taşmaması için */
#biz, #ben {
    max-width: 100%;
    height: auto;
}


.baslik {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 26px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 20px;
    color: black;
    font-family: 'Kurale', serif;
    width: 100%;
    border: 0px solid lightgray;
    padding: 10px;
    border-radius: 5px;
}

.baslikhayat {
    color: black;
    border: 1px outset goldenrod;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 370px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: #fcdaad;
}

.hav {
    border: 0px solid #595858;
    font-family: 'Kurale', serif;
    padding: 5px;
}

.kitaplarim {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: contain;
    width: 100%;
    border: 0px solid whitesmoke;
    border-radius: 5px;
    display: flex;
    padding: 0px;
}

.kitap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: contain;
    width: 100%;
    border: 0px solid whitesmoke;
    border-radius: 5px;
    padding: 0px;
}

.kit {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    border: 0px solid black;
    border-radius: 5px;
    margin-right: 10px;
    padding: 15px;
    order: 1;
    margin: 5px;
    max-width: 380px;
}

.altinkalem {
    height: 50px;
    border-radius: 100%;
    position: absolute;
    left: 85%;
    top: 85%;
}

img {
    float: left;
}

article {
    border: 0px solid black;
}

video {
    height: 250px;
    width: 250px;
}

#aski {
    margin: 20px;
    border: 0px solid lightgray;
}

#ista {
    margin: 20px;
    border: 0px solid lightgray;
    opacity: 0.7;
}

#hayat {
    margin: 20px;
    border: 0px solid lightgray;
    opacity: 0.7;
}


.album {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
    width: contain;
    margin: 0px;
    /* background-color:white;*/
}

.ler {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: contain;
    border: 0px solid lightblue;
}

.sayfa {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.kitaplar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 0px solid yellow;
    height: contain;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    border: 0px solid black;
}

.poem, .poema {
    color: black;
}

/****************************************************/
.poem {
    margin-top: 20px;
}

    .poem ul, .poem ol {
        list-style-type: none;
    }

.poema li {
    list-style-type: none;
}

.poem li:first-child {
    font-weight: bold;
}


/*******************************************************/
@media all and (max-width: 1500px) {
    /* body {
        padding: 0;
       
    }*/
    .logpic {
        display: none;
        visibility: collapse;
        border: 0px;
    }

    .logmaina {
        display: none;
        visibility: collapse;
        border: 0px;
    }

    .logmainb {
        visibility: visible;
        display: block;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: row;
        border: 0px solid black;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 3px;
    }

    .asilalt {
        display: none;
        visibility: collapse;
    }

    .asilaltb {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-direction: row;
        width: 100%;
    }

    .logcover {
        display: none;
        visibility: collapse;
    }
    :root {
        /* masaüstünde ideal; mobilde otomatik küçülür */
        --logo-w: clamp(80px, 10vw, 120px);
        --icon-w: clamp(24px, 3vw, 34px); /* üst çubuk ikon */
        --badge: clamp(16px, 2.2vw, 18px); /* sayaç rozeti çapı */
        --nav-fs: clamp(14px, 1.5vw, 16px); /* navbar link fontu */
        --brand-fs: clamp(18px, 2.2vw, 22px); /* marka yazısı */
        --sidebar-w: clamp(220px, 18vw, 280px);
    }

    /* Logo */
    .navbar .container img[src*="brm"] {
        width: var(--logo-w) !important;
        height: auto !important;
    }

    /* Üst çubuk ikonları (yazısız olanlar) */
    .linkbar img {
        width: var(--icon-w) !important;
        height: auto !important;
    }

    /* Rozetler küçülsün ve hizalansın */
    .counter-badge {
        min-width: var(--badge);
        height: var(--badge);
        font-size: calc(var(--badge) * 0.55);
        top: -6px;
        right: -6px;
        padding: 0 4px;
    }

    /* Navbar sıkı dursun */
    .navbar {
        padding-block: 6px;
    }

        .navbar .nav-link {
            font-size: var(--nav-fs);
        }

    .navbar-brand {
        font-size: var(--brand-fs);
    }

    /* Sidebar genişliği ve içerik davranışı */
    .sidebar {
        width: var(--sidebar-w);
    }

        .sidebar .menu-item > a {
            padding: 8px 14px;
        }

        .sidebar .menu-icon {
            font-size: 18px;
            width: 20px;
        }

    /* Dropdown içleri daha kompakt */
    .dropdown-menu {
        --bs-dropdown-padding-y: .25rem;
        --bs-dropdown-item-padding-y: .35rem;
    }

    /*}
/* Extra küçük cihazlar (telefonlar, 320px ve daha küçük) */
    /*@media only screen and (max-width: 320px) {*/
    /* Stil değerleri buraya */
    /*}*/

    /* Küçük cihazlar (telefonlar, 321px ile 480px arası) */
    /*@media only screen and (min-width: 321px) and (max-width: 480px) {
    .habercerc {
        width: 390px;
    }
    
}*/
    /* Orta cihazlar (tabletler, 481px ile 768px arası) */
    /*@media only screen and (min-width: 481px) and (max-width: 768px) {
    .habercerc {
        width: 400px;
    }
}*/

    /* Büyük cihazlar (tabletler, 769px ile 1024px arası) */
    /*@media only screen and (min-width: 769px) and (max-width: 1024px) {*/
    /* Stil değerleri buraya */
    /*}*/

    /* Büyük cihazlar ve masaüstü (1025px ve daha büyük) */
    /*@media only screen and (min-width: 1025px) {*/
    /* Stil değerleri buraya */
    /*}*/
}