/* --- 1. SIDEBAR KONTROL (Açma/Kapama Butonu) --- */
#sidebar-toggle-btn { 
    background: var(--element-bg); 
    border: 1px solid var(--border-color); 
    color: var(--primary-color); 
    width: 34px; height: 34px; 
    border-radius: 8px; 
    cursor: pointer; 
    display: flex; align-items: center; justify-content: center; 
    transition: 0.3s; margin-left: 15px; 
}
#sidebar-toggle-btn:hover { background: var(--primary-color); color: #fff; }

/* Sidebar Gizleme Animasyonları */
.content-container, .page-layout { display: flex; gap: 30px; transition: all 0.4s ease; }
.main-content { flex: 3; min-width: 0; transition: flex 0.4s ease; }
.sidebar, .sidebar-area { flex: 1; min-width: 300px; transition: all 0.4s ease; }

/* 🔥 DÜZELTİLEN KISIM BURASI 🔥 */
/* body yerine html yapıyoruz çünkü JS oraya ekliyor */
html.sidebar-hidden .sidebar, 
html.sidebar-hidden .sidebar-area { 
    flex: 0; min-width: 0; width: 0; margin-left: -30px; 
    opacity: 0; visibility: hidden; pointer-events: none; 
}
html.sidebar-hidden .main-content { flex: 4; }

/* --- 2. SIDEBAR WIDGET TASARIMLARI --- */
.sidebar-wrapper {
    position: sticky; top: 110px; 
    display: flex; flex-direction: column; gap: 30px;
    font-family: 'Urbanist', sans-serif;
}

/* Kutu Yapısı */
.clean-widget {
    background: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow-color);
    transition: transform 0.3s ease, background 0.3s;
}
.clean-widget:hover { transform: translateY(-3px); }

/* Başlık */
.clean-head {
    background: var(--input-bg);
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 10px;
    color: var(--text-main);
    font-size: 14px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    position: relative; transition: background 0.3s;
}
.clean-head::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--primary-color);
    box-shadow: 2px 0 10px var(--primary-glow);
}
.clean-head i { color: var(--primary-color); font-size: 16px; }
.clean-body { padding: 20px; }

/* Form Elemanları */
.clean-search-group { display: flex; flex-direction: column; gap: 12px; }
.clean-input-row { display: flex; position: relative; }
.clean-input {
    flex: 1; background: var(--input-bg);
    border: 1px solid var(--border-color);
    padding: 12px 15px; color: var(--text-main);
    font-size: 13px; outline: none;
    border-radius: 8px; box-sizing: border-box; transition: 0.3s;
}
.clean-input:focus { border-color: var(--primary-color); background: var(--bg-body); }
.clean-search-btn {
    position: absolute; right: 5px; top: 5px; bottom: 5px;
    background: var(--primary-color); color: #fff; border: none; padding: 0 12px;
    border-radius: 6px; cursor: pointer; transition: 0.2s;
}
.clean-search-btn:hover { background: #ff4b4b; }
.clean-select {
    width: 100%; background: var(--input-bg);
    border: 1px solid var(--border-color);
    padding: 10px; color: var(--text-sub);
    font-size: 12px; border-radius: 8px;
    outline: none; cursor: pointer; transition: 0.3s;
}
.clean-chips { display: flex; gap: 8px; }
.clean-chip-lbl {
    flex: 1; text-align: center; background: var(--input-bg);
    border: 1px solid var(--border-color); color: var(--text-sub);
    padding: 8px; border-radius: 8px; font-size: 11px; cursor: pointer;
    transition: 0.2s; font-weight: 700;
}
.chip-check { display: none; }
.chip-check:checked + .clean-chip-lbl { 
    background: rgba(255, 59, 48, 0.1); color: var(--primary-color); border-color: var(--primary-color); 
}

/* Listeler */
.clean-list { list-style: none; padding: 0; margin: 0; }
.clean-item {
    display: flex; gap: 15px; margin-bottom: 15px; padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
    text-decoration: none; position: relative; transition: 0.3s;
}
.clean-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.clean-item:hover { transform: translateX(5px); }
.clean-item:hover .clean-title { color: var(--primary-color); text-shadow: 0 0 10px var(--primary-glow); }
.clean-poster { 
    width: 50px; height: 75px; object-fit: cover; border-radius: 6px; 
    box-shadow: 0 5px 15px var(--shadow-color); flex-shrink: 0;
}
.clean-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.clean-title { 
    font-size: 14px; font-weight: 700; color: var(--text-main);
    margin-bottom: 6px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.3s;
}
.clean-meta { font-size: 12px; color: var(--text-sub); display: flex; align-items: center; gap: 10px; font-weight: 600; }
.clean-meta i { color: var(--primary-color); font-size: 11px; }
.clean-rank {
    position: absolute; top: -5px; left: -5px; width: 22px; height: 22px;
    background: linear-gradient(135deg, var(--primary-color), #ff6b6b); 
    color: #fff; font-size: 11px; font-weight: 800;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px var(--primary-glow); z-index: 2;
}

/* Etiketler (Tag Cloud) */
.clean-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.clean-tag {
    background: var(--input-bg); color: var(--text-sub);
    padding: 7px 12px; border-radius: 6px;
    font-size: 12px; text-decoration: none; 
    border: 1px solid var(--border-color); transition: 0.3s; font-weight: 600;
}
.clean-tag:hover { 
    background: var(--primary-color); color: #fff; border-color: var(--primary-color);
    box-shadow: 0 5px 15px var(--primary-glow); transform: translateY(-2px);
}

/* Yorumlar Widget */
.clean-comment { 
    font-size: 13px; color: var(--text-sub); margin-bottom: 15px; 
    border-left: 2px solid var(--border-color); padding-left: 15px; 
}
.clean-comment:last-child { margin: 0; }
.cc-head { margin-bottom: 5px; font-size: 12px; }
.cc-user { color: var(--text-main); font-weight: 700; }
.cc-film { 
    color: var(--primary-color); text-decoration: none; font-weight: 600; 
    display:block; margin-top:8px; font-size: 11px; text-align: right; 
}
.cc-film:hover { text-decoration: underline; }

/* Kullanıcı Paneli */
.clean-user { text-align: center; }
.cu-avatar { 
    width: 60px; height: 60px; 
    background: linear-gradient(45deg, #ff3b30, #ff9f43); 
    color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    margin: 0 auto 15px; font-size: 24px; font-weight: 800;
    border: 2px solid var(--element-bg); outline: 2px solid var(--primary-color);
    box-shadow: 0 0 15px var(--primary-glow);
}
.cu-name { color: var(--text-main); font-weight: 700; margin-bottom: 15px; display: block; font-size: 16px; }
.cu-btn { 
    display: block; width: 100%; padding: 10px; 
    background: var(--input-bg); color: var(--text-main); 
    text-align: center; text-decoration: none; border-radius: 8px; 
    margin-bottom: 8px; font-size: 13px; transition:0.2s; font-weight: 600; cursor: pointer; border:none;
}
.cu-btn:hover { background: var(--border-color); }
.cu-btn.red { background: var(--primary-color); box-shadow: 0 5px 15px var(--primary-glow); color: #fff; } 
.cu-btn.red:hover { background: #ff4b4b; transform: translateY(-2px); }

/* Sosyal Medya & Rastgele */
.clean-social { display: flex; gap: 10px; }
.cs-btn {
    flex: 1; padding: 10px; text-align: center; 
    background: var(--input-bg); color: var(--text-sub); 
    border-radius: 8px; text-decoration: none; font-size: 16px; transition: 0.3s;
}
.cs-btn:hover { background: var(--primary-color); color: #fff; transform: translateY(-3px); }

.clean-rnd { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 20px var(--shadow-color); }
.clean-rnd img { width: 100%; display: block; transition: 0.5s; }
.clean-rnd:hover img { transform: scale(1.1); filter: brightness(1.1); }
.clean-rnd-btn {
    display: block; background: var(--primary-color); color: #fff; text-align: center;
    padding: 10px; margin-top: 10px; border-radius: 8px; text-decoration: none; 
    font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
    box-shadow: 0 5px 15px var(--primary-glow); transition: 0.3s;
}
.clean-rnd-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--primary-glow); }