body {
    background-image: url('artalan.jpg');
    background-color: blue;
    color: black;
}
.textfield {
    font-size: 15px;
    color: #333333;
    background: #F7F7F7;
    border: 1px solid #CCCCCC;
    padding-left: 1px;
}
.bs0{
    background-color:aqua;
    border: 2px gray solid;
    padding: 5px;
   
    width:90%;
    height:auto;
    text-align: center;
    border-radius: 15px; /* Değeri artırırsanız daha fazla yuvarlak olur */

}
.bs1{
    display: inline-block;
    vertical-align:top;
    text-decoration: none;
    width: 65%;
    height: auto;
    text-align: center;
    border-radius: 15px; /* Değeri artırırsanız daha fazla yuvarlak olur */

}
.bs2{
    font-size: 15px;
    display: inline-block;
    vertical-align:top;
    width: 25%;
    height:auto;
    text-align: left;
    border-radius: 15px; /* Değeri artırırsanız daha fazla yuvarlak olur */

}
.bs3{
    display: inline-block;
    vertical-align:top;
    width:25%;
    height:auto;
    text-align: center;

}
/* Mobil cihazlar için özel ayar (İsteğe bağlı) */
    @media (max-width: 768px) {
        .bs0 {
            flex-direction: column; /* Mobilde her zaman alt alta tutar */
        }
        .bs1 {
            margin-bottom: 20px; /* Logo ile alt kısım arasına boşluk bırakır */
        }
    }
.sn{
    background-color:aqua;
    border: 3px gray solid;
    padding: 5px;
    width:90%;
    margin-left: auto;
    margin-right: auto;
    height:auto;
    border-radius: 15px; /* Değeri artırırsanız daha fazla yuvarlak olur */
}
.baslik{
    padding: 5px;
    margin: 5px;
    width:90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 2;       /* Yüksekliği yazı boyutunun tam 2 katı yapar (2em) */
    border-radius: 15px; /* Değeri artırırsanız daha fazla yuvarlak olur */
    height:auto;
    text-align: center;
    /*background-color: #3b9c9c;*/
    color: #ffffff; /* Yazı rengini*/
}
.fbc{
    font-size: 15px;
    display: inline-block;
    vertical-align:middle;
    text-align: left;
    width:56%;
    height:auto;
}
.fbd1{
    font-size: 12px;
    display: inline-block;
    vertical-align:middle;
    text-align:center;
    width:18%;
    height:auto;
}
.fbd2{
    font-size: 12px;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    width:8%;
    height:auto;
}
.fbd3{
    font-size: 12px;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    width:8%;
    height:auto;
}
.iconkutusu{
    float:left;
    width: auto;
    height: 100%;
}
.iconkutusu img{
    vertical-align: middle;
}
.frmaciklama{
    border: 0px gray solid;
    padding: 5px;
    width:90%;
    height:auto;
    text-align: center;
    background-color: #3b9c9c;
}
.fa1{
    font-size:14px;
    color: #000000;
    display: inline-block;
    vertical-align:middle;
    text-align: left;
    width:56%;
    height:auto;
}
.fa1 a{
    color:#000000;
    font-size:14px;
    font-family:arial;

}
.fa2{
    font-weight:normal;
    font-size: 12px;
    color: #000000;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    width:18%;
    height:auto;
}
.fa2 .songonderenkisi{
    font-weight:bold;
    text-align: right;
}
.fa3{
    font-size: 10px;
    color: #000000;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    width:8%;
    height:auto;
}
.fa4{
    font-size: 10px;
    color: #000000;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    width:8%;
    height:auto;
}

.konubaslik{
    border: 0px gray solid;
    padding: 5px;
    margin: 5px;
    width:90%;
    height:auto;
    text-align: center;
}
.konuaciklama{
    border: 0px gray solid;
    padding: 5px;
    width:90%;
    height:auto;
    text-align: center;
    background-color: #3b9c9c;
}
.ka1{
    font-size: 17px;
    color: #000000;
    display: inline-block;
    vertical-align:middle;
    text-align: left;
    width:56%;
    height:auto;
}
.ka2{
    font-size: 15px;
    color: #000000;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    width:18%;
    height:auto;
}
.ka3{
    font-size: 15px;
    color: #000000;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    width:8%;
    height:auto;
}
.ka4{
    font-size: 15px;
    color: #000000;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    width:8%;
    height:auto;
}
#konu{
    color: #000000;
    font-size: 17px;

}
#konu1{
    color: #000000;
    font-size: 12px;
    text-align: left;
    font-weight: normal;
}
.kd1{
    font-size: 17px;
    color: #000000;
    display: inline-block;
    text-align: left;
    width:25%;
    height:auto;
}
.kd2{
    font-size: 15px;
    color: #000000;
    display: inline-block;
    text-align: left;
    width:65%;
    height:auto;
}
.fo{
    display: inline-block;
    vertical-align:middle;
    text-align: left;
    width:90%;
    height:auto;
}
.ko{
    border: 2px solid gray;
    padding: 5px;
    margin: 0 auto;
    width:90%;
    height:auto;
    text-align: center;
}
.ko1{
    border: 2px solid gray;
    padding: 0px;
    margin: 0 auto;
    width:90%;
    height:auto;
    text-align: center;
}
h1 {
    color: #99CC00;
    margin: 0px 0px 5px;
    padding: 0px 0px 3px;
    font: bold 18px Verdana, Arial, Helvetica, sans-serif;
    border-bottom: 1px dashed #E6E8ED;
}
a {    color: #0000ff;    font-size: 14px;}
a:hover {    color: #cc0000;}
.err {    color: #FF9900;}
ul.menu {    list-style-type: none;    padding: 0;    margin: 0;}
ul.menu li {    margin: 0 0 .2em 0;    display: inline;}
ul.menu li a {    text-decoration: none;}
#trh {    color: #0000ff;    font-size: 10px;}
#usr {    color: #000000;    font-size: 12px;}
.bbcode_b {    font-weight: bold;}
.bbcode_i {    font-style: italic;}
.bbcode_overline {    text-decoration: overline;}
.bbcode_u {    text-decoration: underline;}
.bbcode_strikethrough {    text-decoration: line-through;}
.bbcode_code {    border:2px solid gray;    margin:10px;}
.bbcode_quote {}
.bbcode_a {    color: aqua;}
.bbcode_img {}
*:first-child+html div.frmbs0 div{
    display: inline;
    zoom: 1;
}
* html div.frmbs0 div{
    display: inline;
    zoom: 1;
}
/* ==================================================
   LOGO ALTI LİNKLER - SAĞA YASLI VE GÖLGELİ
   ================================================== */
.logo-alti-linkler {
    display: flex;
    justify-content: center; /* İÇİNDEKİ linkleri ortalar */
    gap: 10px;
    flex-wrap: wrap;
    
    /* BLOĞUN KENDİSİNİ ORTALAMAK İÇİN */
    margin-left: auto;       /* Sol boşluğu otomatik yap */
    margin-right: auto;      /* Sağ boşluğu otomatik yap */
    /* Kısaca: margin: 0 auto; şeklinde de yazılabilir */
    
    width: fit-content;      /* Bloğun sadece içindeki linkler kadar yer kaplamasını sağlar */
    
    padding: 0 20px;         /* Sağdan ve soldan eşit nefes alma payı */
}


/* Ortak link stili */
.logo-alti-linkler a {
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    
    /* GÖLGE VE ARKA PLAN */
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
    
    transition: all 0.25s ease;
    display: inline-block;
}

/* --------------------------------------------------
   RENKLER VE HOVER (Aynı kalıyor)
   -------------------------------------------------- */
.logo-alti-linkler a.link-anasayfa   { color: #000000; }
.logo-alti-linkler a.link-forum      { color: #795548; }
.logo-alti-linkler a.link-mcs51      { color: #0d6efd; }
.logo-alti-linkler a.link-elektronik { color: #198754; }
.logo-alti-linkler a.link-ikinciel   { color: #800080; }

.logo-alti-linkler a:hover {
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    color: #ffffff !important; /* Üzerine gelince yazı beyaz olur */
}

/* Hover arka plan renkleri */
.logo-alti-linkler a.link-anasayfa:hover   { background-color: #000000; }
.logo-alti-linkler a.link-forum:hover      { background-color: #795548; }
.logo-alti-linkler a.link-mcs51:hover      { background-color: #0d6efd; }
.logo-alti-linkler a.link-elektronik:hover { background-color: #198754; }
.logo-alti-linkler a.link-ikinciel:hover   { background-color: #800080; }
/* --------------------------------------------------
   MOBİL (ALT ALTA VE SAĞDA)
   -------------------------------------------------- */
@media (max-width: 768px) {
    .logo-alti-linkler {
        flex-direction: column;
        align-items: flex-end; /* Mobil modda da sağa yaslar */
        gap: 12px;
        padding-right: 15px;
    }
    .logo-alti-linkler a {
        width: auto;           /* İçerik kadar genişlik */
        min-width: 150px;      /* Butonların çok küçük kalmaması için */
        text-align: center;     /* Yazıyı buton içinde sağa yaslar */
    }
}
/* Kategori Menü Çubuğu */
.kategori-nav {
    background-color: #737373; /* Kategori menü Arka plan rengi */
    border-bottom: 2px solid #ddd;
    border-radius: 15px;
    list-style: none;
    padding: 0 20px; /* Kenarlardan biraz iç boşluk bırakırsa daha şık durur */
    margin-bottom: 20px;

    /* BLOĞU DARALTAN VE SAYFADA ORTALAYAN KISIM */
    width: fit-content;  /* Sadece içindeki linkler kadar genişler */
    margin-left: auto;   /* Solu otomatik ayarla */
    margin-right: auto;  /* Sağı otomatik ayarla */

    /* İÇERİK DÜZENİ */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Her Bir Kategori Öğesi */
.kat-item {
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    color: #333;
    transition: background 0.3s;
    border-radius: 15px; /* Değeri artırırsanız daha fazla yuvarlak olur */
}

.kat-item:hover {
    background-color: #e9ecef;
    color: #0d6efd;
}
/* Ana Menü Konteyner */
.kategori-nav-konteyner {
    width: 90%;
    display: flex;
    align-items:center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}


.kat-item {    position: relative;}
.kat-link {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
.kat-link:hover {    background: #555;}
/* Mobil ve Orta Ölçekli Ekranlar (Yüksek DPI Android 15 dahil) */
@media screen and (max-width: 1023px) {
    .kategori-nav {
        justify-content: flex-start; /* Kaydırma için soldan başlat */
        
    }
    .kat-link {
        font-size: 13px; /* Yazıyı hafif küçült */
        padding: 6px 10px;
    }
}
/* Tüm Alt Menülerin (Dropdown) Ortak Ayarı */
.kategori-nav ul {
    display: none; /* Varsayılan olarak gizli */
    position: absolute;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 15px; /* Değeri artırırsanız daha fazla yuvarlak olur */
}

/* Mouse ile üzerine gelince alt menüyü göster */
.kat-item:hover > ul {    display: block;}

/* Alt menülerin konumlandırılması */
/* 1. Seviye alt menü (Ana kategorinin tam altında) */
.kategori-nav > li > ul {
    top: 100%;
    left: 0;
}

/* 2. Seviye ve sonrası (Yana doğru açılır) */
.kategori-nav ul ul {    top: 0;    left: 100%;}

/* Alt menü linkleri */
.kategori-nav ul li {
    border-bottom: 1px solid #eee;
    position: relative;
}

.kategori-nav ul a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.kategori-nav ul a:hover {
    background: #f4f4f4;
    color: #0056b3;
}
/* AÇILIR MENÜ (Dropdown) */
.forum-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 220px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 999;
    border-radius: 0 0 5px 5px;
    padding: 10px 0;
}

/* Üzerine Gelince Göster */
.kat-item:hover .forum-dropdown {    display: block;}

/* Dropdown İçindeki Forum Linkleri */
.forum-dropdown a {
    color: #555;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    font-size: 12px;
    font-weight: normal;
    border-bottom: 1px solid #eee;
}

.forum-dropdown a:last-child {    border-bottom: none;}

.forum-dropdown a:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
    padding-left: 25px; /* Küçük bir kayma efekti */
}

/* Forum Kutuları Tasarımı (Alt Kısım İçin) */
.forum-konteyner {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
    justify-content: center;
    border-radius: 15px;
}

.forum-kutu {
    width: 280px;
    min-height: 100px;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Kategori Başlık Alanı */
.frmbaslik {
    text-align: center;
    color: white;
    padding: 10px;
    margin-top: 10px;
}
/* Forum Dropdown (Kategoriye gelince açılan) */
.forum-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    min-width: 180px;
    list-style: none;
    padding: 0;
    z-index: 999;
}

/* Alt Forum Dropdown (Foruma gelince açılan) */
.afid-dropdown {
    display: none;
    position: absolute;
    top: 0;
    left: 100%; /* Menünün sağına açılır */
    background: #fff;
    border: 1px solid #ddd;
    min-width: 180px;
    list-style: none;
    padding: 0;
}

/* HOVER EFEKTLERİ */
.kat-item:hover > .forum-dropdown {
    display: block; /* Kategoriye gelince forumlar görünsün */
}

.forum-item {
    position: relative;
}

.forum-item:hover > .afid-dropdown {
    display: block; /* Foruma gelince alt forumlar görünsün */
}

/* Linklerin Görünümü */
.forum-dropdown li a, .afid-dropdown li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}

.forum-dropdown li a:hover {background-color: #f8f8f8;}
.ok {
    float: right;
    font-size: 12px;
    color: #999;
}
/* Ana Kategori Linki */
.kat-link {
    text-decoration: none; /* Çizgiyi kaldırır */
    color: #333;
    font-weight: bold;
}

/* Forum ve Alt Forum Linkleri */
.forum-dropdown li a,
.afid-dropdown li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none; /* Çizgiyi kaldırır */
    color: #333;
    border-bottom: 1px solid #f0f0f0; /* Linkler arasına ince ayırıcı çizgi ekler (opsiyonel) */
}

/* Fare üzerine geldiğinde de çizgi çıkmasını engelle */
.kat-link:hover,
.forum-dropdown li a:hover,
.afid-dropdown li a:hover {
    text-decoration: none;
    background-color: #f8f8f8;
    color: #007bff; /* Hover sırasında renk değişimi (isteğe bağlı) */
}
/* Ok işareti ayarı */
.ok {float: right;font-size: 10px;margin-top: 3px;}
  .kutu-konteyner { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; }
    .kutu { 
        width: calc(25% - 10px); /* Yan yana 4 kutu */
        border: 1px solid #ddd; 
        border-radius: 5px; 
        padding: 10px; 
        box-sizing: border-box;
        font-size: 13px;
        transition: transform 0.2s;
    }
    .kutu:hover { transform: scale(1.02); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    .kutu-baslik { font-weight: bold; margin-bottom: 5px; display: block; height: 35px; overflow: hidden; }
    .kutu-detay { color: #666; font-size: 11px; }
    @media (max-width: 900px) { .kutu { width: calc(50% - 10px); } } /* Mobilde 2 kutu */
   
    
   /* ==================================================
   MOBİL İKİLİ GRUP DÜZENİ
   ================================================== */

@media (max-width: 768px) {
    /* Ana kapsayıcıyı yan yana iki grup yapıyoruz */
    .kategori-nav-konteyner {
        display: flex;
        flex-direction: row; /* Gruplar yan yana kalsın */
        justify-content: space-between; /* Aralarını açar */
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
    }

    /* 1. GRUP: Kategori Menüsü */
    .kategori-nav {
        flex: 1; /* Eşit genişlik verir */
        display: flex;
        flex-direction: column; /* İçindeki linkler alt alta */
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* 2. GRUP: Logo Altı Linkler */
    .logo-alti-linkler {
        flex: 1; /* Eşit genişlik verir */
        display: flex;
        flex-direction: column; /* İçindeki linkler alt alta */
        align-items: flex-end; /* Sola yaslı */
        gap: 8px;
    }

    /* Linklerin Genel Görünümü ve Gölgesi */
    .kategori-nav .kat-link, 
    .logo-alti-linkler a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        font-size: 13px;
        text-decoration: none;
        border-radius: 6px;
        
        /* İstediğiniz gölge efekti */
        background-color: #ffffff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
        margin-bottom: 5px;
    }

    /* Mobilde kategorilerin alt menülerini (dropdown) gizle veya basitleştir */
    .kategori-nav ul {
        display: none; /* Mobilde çok karmaşa olmaması için alt menüler gizlendi */
    }
} 
  
/* Resmin etrafından yazının akmasını zorunlu kılar */
.note-editable img[style*="float: left"], 
img[style*="float:left"] {
    float: left !important;
    margin-right: 15px;
    margin-bottom: 10px;
}

.note-editable img[style*="float: right"], 
img[style*="float:right"] {
    float: right !important;
    margin-left: 15px;
    margin-bottom: 10px;
}
.resim-sag {
    float: right;
    margin-left: 15px;
}