Theme Name: Cet Sohbet
Author: SeyYah
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Tahoma:wght@400;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#202020 url(images/bg.png);
    font-family:Tahoma,Arial,sans-serif;
    color:#fff;
    overflow-x:hidden;
    font-size:12px;
}

a{
    text-decoration:none;
    transition:0.3s;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

.wrapper{
    width:1000px;
    margin:0 auto;
}

/* =========================
   HEADER
========================= */

.header-top{
    width:100%;
    margin-top:12px;
    padding:15px;
    background:#4c4c4c;
    border:1px solid #6b6b6b;
}

.logo-area{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.side-heart{
    width:150px;
}

.center-logo{
    width:420px;
}

/* =========================
   MENU
========================= */

.main-menu{
    width:100%;
    height:42px;
    background:linear-gradient(#d8f52f,#84a700);
    border-left:1px solid #6f8700;
    border-right:1px solid #6f8700;
    border-bottom:1px solid #5d7300;
}

.main-menu ul{
    display:flex;
    height:42px;
}

.main-menu ul li{
    flex:1;
    position:relative;
}

.main-menu ul li::after{
    content:'';
    position:absolute;
    right:0;
    top:8px;
    width:1px;
    height:25px;
    background:#95b700;
    pointer-events:none; /* FIX */
}

.main-menu ul li:last-child::after{
    display:none;
}

.main-menu ul li a{
    display:flex;
    align-items:center;
    justify-content:center;
    height:42px;
    color:#222;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
}

.main-menu ul li a:hover{
    background:#252525;
    color:#dfff39;
}

/* =========================
   MAIN
========================= */

.main-content{
    width:100%;
    display:flex;
    gap:10px;
    margin-top:10px;
    align-items:flex-start; /* FIX */
}

/* =========================
   LEFT SIDEBAR
========================= */

.left-sidebar{
    width:220px;
    flex:none;
    position:relative;
    top:0; /* FIX */
}

.left-menu{
    background:#2e2e2e;
    border:1px solid #484848;
}

.left-menu li{
    border-bottom:1px solid #404040;
}

.left-menu li:last-child{
    border-bottom:none;
}

.left-menu li a{
    display:block;
    padding:10px 12px;
    color:#e3e3e3;
    font-size:12px;
    font-weight:bold;
    background:linear-gradient(#363636,#2b2b2b);
}

.left-menu li a:hover{
    background:linear-gradient(#d7f52f,#86a800);
    color:#111;
}

/* =========================
   CHAT LOGIN
========================= */

.chat-login{
    flex:1;
    background:#2d2d2d;
    border:1px solid #484848;
    padding:15px;
}

.chat-login h2{
    font-size:18px;
    color:#dfff39;
    margin-bottom:12px;
    border-bottom:1px solid #434343;
    padding-bottom:8px;
}

.chat-login form{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.chat-login input{
    width:100%;
    height:38px;
    background:#1f1f1f;
    border:1px solid #555;
    padding:0 12px;
    color:#fff;
    font-size:12px;
}

.chat-login input:focus{
    outline:none;
    border-color:#dfff39;
}

.chat-login button{
    width:100%;
    height:40px;
    border:none;
    cursor:pointer;
    background:linear-gradient(#d8f52f,#87aa00);
    color:#111;
    font-size:13px;
    font-weight:bold;
}

/* =========================
   NEWS SECTION
========================= */

.news-section{
    width:100%;
    display:flex;
    gap:10px;
    margin-top:10px;
}

/* =========================
   NEWS MARQUEE (FIXED)
========================= */

.news-marquee{
    width:220px;
    height:250px;
    background:#2d2d2d;
    border:1px solid #484848;
    overflow:hidden;
    position:relative;
}

.news-marquee h3{
    height:38px;
    line-height:38px;
    padding:0 12px;
    background:linear-gradient(#d7f52f,#86a800);
    color:#111;
    font-size:13px;
    font-weight:bold;
    border-bottom:1px solid #5f7600;
    flex-shrink:0;
}

.marquee-wrapper{
    width:100%;
    height:210px;
    overflow:hidden;
    position:relative;
}

.marquee-content{
    position:absolute;
    width:100%;
    left:0; /* FIX */
    top:100%;
    animation:haberAkisi 18s linear infinite;
    box-sizing:border-box; /* FIX */
}

.marquee-content a{
    display:block;
    padding:10px 12px;
    color:#ddd;
    font-size:12px;
    border-bottom:1px solid #404040;
    box-sizing:border-box; /* FIX */
}

.marquee-content a:hover{
    background:#383838;
    color:#dfff39;
}

@keyframes haberAkisi{
    0%{ top:100%; }
    100%{ top:-120%; }
}

/* =========================
   BOXES
========================= */

.home-boxes{
    flex:1;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.home-box{
    height:120px;
    display:flex;
    overflow:hidden;
    background:#2d2d2d;
    border:1px solid #484848;
}

.home-box-image{
    width:120px;
    height:120px;
    flex:none;
    overflow:hidden;
    border-right:1px solid #444;
}

.home-box-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.home-box-content{
    flex:1;
    padding:10px;
}

.home-box-content h4{
    color:#dfff39;
    font-size:13px;
    margin-bottom:6px;
}

.home-box-content p{
    color:#d4d4d4;
    font-size:11px;
    line-height:1.5;
}

/* =========================
   POSTS
========================= */

.posts-area{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:10px;
}

.post-card{
    background:#2d2d2d;
    border:1px solid #484848;
    overflow:hidden;
}

.post-image{
    width:100%;
    height:130px;
    overflow:hidden;
}

.post-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.post-content{
    padding:10px;
}

.post-meta{
    color:#aaa;
    font-size:10px;
    margin-bottom:5px;
}

.post-content h3 a{
    color:#dfff39;
    font-size:12px;
}

.post-content p{
    color:#d5d5d5;
    font-size:11px;
    line-height:1.5;
}

/* =========================
   FOOTER
========================= */

.footer{
    width:100%;
    margin-top:10px;
    padding:15px;
    background:#2e2e2e;
    border-top:2px solid #b7d320;
    text-align:center;
    color:#ccc;
    font-size:11px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:1024px){
.wrapper{ width:95%; }
}

@media(max-width:768px){

.logo-area{
    flex-direction:column;
    gap:20px;
}

.main-menu ul{
    flex-direction:column;
    height:auto;
}

.main-menu{
    height:auto;
}

.main-content{
    flex-direction:column;
}

.left-sidebar{
    width:100%;
}

.news-section{
    flex-direction:column;
}

.news-marquee{
    width:100%;
}

.home-boxes{
    grid-template-columns:1fr;
}

.posts-area{
    grid-template-columns:1fr;
}

.home-box{
    flex-direction:column;
    height:auto;
}

.home-box-image{
    width:100%;
    height:170px;
    border-right:none;
    border-bottom:1px solid #444;
}

}




.main-content{
    display:flex;
    flex-wrap:wrap;
}

/* SOL MENÜYÜ HABERDEN ÖNCE ZORLA ÜSTE AL */
#left-side{
    order:-1;
    width:220px;
}

/* HABER BLOĞU HER ZAMAN ALTTA BAŞLASIN */
.news-section{
    width:100%;
    order:2;
}

/* ANA CHAT ORTADA KALSIN */
.chat-login{
    order:1;
    flex:1;
    min-width:0;
}






/* =========================
   TEMİZ LAYOUT (RESET + FIX)
========================= */

*{
    box-sizing:border-box;
}

/* MAIN LAYOUT */
.main-content{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    gap:10px;
    flex-wrap:nowrap !important;
}

/* SIDEBAR SOLDA SABİT */
#left-side,
.left-sidebar{
    width:220px !important;
    flex:0 0 220px !important;
    order:0 !important;
}

/* CHAT ORTA */
.chat-login{
    flex:1 !important;
    min-width:0 !important;
    order:1 !important;
}

/* NEWS HER ZAMAN ALT BLOK */
.news-section{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    order:2 !important;
    clear:both !important;
}

/* =========================
   MENÜYÜ %100 ALT ALTA ZORLA
========================= */

#site-nav,
.left-menu{
    display:block !important;
    flex-direction:column !important;
    margin:0 !important;
    padding:0 !important;
}

#site-nav li,
.left-menu li{
    display:block !important;
    width:100% !important;
}

#site-nav li a,
.left-menu li a{
    display:block !important;
    width:100% !important;
    text-align:left !important;
    padding:10px 12px;
}

/* pseudo çizgileri tamamen öldür */
#site-nav li::before,
#site-nav li::after,
.left-menu li::before,
.left-menu li::after{
    display:none !important;
    content:none !important;
}





/* MENÜ YAZILARI GÖRÜNÜR YAP */
#site-nav li a,
.left-menu li a{
    color:#dfff39 !important;
    background:#2b2b2b !important;
    display:block !important;
}

/* hover */
#site-nav li a:hover,
.left-menu li a:hover{
    background:#86a800 !important;
    color:#111 !important;
}

/* güvenlik - link invisible fix */
#site-nav a,
.left-menu a{
    opacity:1 !important;
    visibility:visible !important;
}




/* =========================
   HABER AKIŞI - YEŞİL BANNER ÜSTÜNE ÇIKMAMA
========================= */

.news-marquee{
    position:relative;
    overflow:hidden;
}

/* başlık sabit katman */
.news-marquee h3{
    position:relative;
    z-index:2;
}

/* wrapper gerçek “kutu alanı” */
.marquee-wrapper{
    position:relative;
    height:210px;
    overflow:hidden;
}

.marquee-content{
    position:absolute;
    width:100%;
    left:0;
    top:0;
    animation:haberAkisi 18s linear infinite;
}


/* yazılar */
.marquee-content a{
    display:block;
    padding:10px 12px;
    border-bottom:1px solid #404040;
    color:#ddd;
}

/* hover */
.marquee-content a:hover{
    background:#383838;
    color:#dfff39;
}







/* =========================
   CLEAN LAYOUT FIX (STABLE VERSION)
========================= */

/* layout tek kontrol */
.main-content{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    gap:10px;
}

/* sidebar sabit */
#left-side,
.left-sidebar{
    width:220px !important;
    flex:0 0 220px !important;
    order:0 !important;
}

/* chat ortada */
.chat-login{
    flex:1 !important;
    order:1 !important;
    min-width:0;
}

/* news aşağı */
.news-section{
    width:100% !important;
    order:2 !important;
}

/* =========================
   SIDEBAR MENÜ DÜZELT
========================= */

#site-nav li,
.left-menu li{
    display:block !important;
    width:100%;
}

#site-nav li a,
.left-menu li a{
    display:block !important;
    width:100%;
    color:#dfff39 !important;
    background:#2b2b2b !important;
}

/* çizgi + karakter sorunlarını temizle */
#site-nav li::before,
#site-nav li::after,
.left-menu li::before,
.left-menu li::after{
    display:none !important;
    content:none !important;
}


/* DEVAMINI OKU BUTONU */

.read-more{
    display:inline-block;
    margin-top:10px;
    padding:8px 16px;
    background:linear-gradient(#d8f52f,#87aa00);
    color:#111 !important;
    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;
    border:1px solid #6f8700;
    border-radius:25px;
    position:relative;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 4px rgba(0,0,0,0.4);
}

/* bulut çıkıntısı */

.read-more::after{
    content:'';
    position:absolute;
    left:18px;
    bottom:-7px;
    width:14px;
    height:14px;
    background:#87aa00;
    transform:rotate(45deg);
    border-right:1px solid #6f8700;
    border-bottom:1px solid #6f8700;
}

/* hover */

.read-more:hover{
    background:linear-gradient(#eeff74,#a7cf00);
    color:#000 !important;
}



.news-section{
    margin-top:0 !important;
    padding-top:0 !important;
}

.news-marquee{
    margin-top:0 !important;
    padding-top:0 !important;
}

.news-marquee h3{
    margin:0 !important;
    padding:0 12px !important;
}


.main-content{
    display:flex;
    gap:10px;
    align-items:flex-start; /* STRETCH DEĞİL */
}

/* CHAT BLOĞU */
.chat-login{
    flex:1;
    min-width:0;
    margin-bottom:10px; /* ALT BOŞLUK */
}

/* SAĞ RESİM */
.chat-right-image{
    flex:0 0 220px;
    width:220px;
    height:221px;   /* burayı artır → 350 / 400 yapabilirsin */
    background:#2d2d2d;
    border:1px solid #484848;
    overflow:hidden;
}

/* RESİM */
.chat-right-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ALT BLOKLARIN ÜSTÜNE YAPIŞMAMASI */
.news-section,
.home-boxes,
.posts-area{
    margin-top:10px;
    clear:both;
}

.chat-right-image{ order:3; }


.footer {
    background: linear-gradient(135deg, ##202020, #111b2e);
    color: #fff;
    padding: 25px 15px 15px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ANA BLOK */
.footer-inner {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* SOL */
.footer-left {
    font-size: 13px;
    opacity: 0.9;
}

.footer-mini {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 3px;
}

/* ORTA */
.footer-center a {
    color: #cbd5e1;
    margin: 0 8px;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
}

.footer-center a:hover {
    color: #38bdf8;
}

/* SAĞ STATUS */
.footer-right {
    display: flex;
    gap: 10px;
    font-size: 12px;
    align-items: center;
}

/* DOT ANİMASYON */
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.online {
    background: #22c55e;
    animation: pulse 1.5s infinite;
}

.radio {
    background: #60a5fa;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* ALT BLOK */
.footer-bottom {
    max-width: 1200px;
    margin: 15px auto 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* HABER */
.footer-news a {
    color: #ffffff;
    text-decoration: none;
}

/* SOSYAL */
.footer-social a {
    margin-left: 10px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 13px;
}

.footer-social a:hover {
    color: #fff;
}

/* GLASS EFFECT */
.footer {
    backdrop-filter: blur(10px);
}