/* RESULT TEXT */
#wheelText {
    text-align: center;
    /* Modern degrade (gradient) yazı rengi */
    background: linear-gradient(135deg, #f8fafc 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Daha kurumsal bir hava katar */
    
    margin: 15px 0;
    padding: 8px 15px;
    min-height: 24px;
    
    /* Hafif cam efekti (Glassmorphism) arka plan */
    background-color: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    backdrop-filter: blur(4px);
    
    /* Yumuşak gölge */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* İçerik değiştiğinde göze hoş gelen geçiş */
    transition: all 0.3s ease-in-out;
}
/* SPIN BUTTON */
.hc-spin-btn {
    display: block;
    width: 85%;
    margin: 15px auto;
    padding: 13px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg,#4f46e5,#9333ea);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 5px 20px rgba(99,102,241,0.5);
}

.hc-spin-btn:hover {
    transform: translateY(-2px);
}

.hc-spin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* MODAL (POPUP) */
.hc-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,0.9);
    z-index: 999999;
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

/* MODAL CONTENT */
.hc-modal-content {
    background: rgba(30,27,75,0.95);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 320px;
    width: 90%;
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    box-shadow: 0 10px 50px rgba(0,0,0,0.7);
    animation: popup 0.4s ease;
}

@keyframes popup {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.hc-modal-icon {
    font-size: 55px;
    margin-bottom: 15px;
}

/* CLOSE BUTTON */
.hc-modal-close {
    margin-top: 15px;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    border: none;
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.hc-modal-close:hover {
    transform: scale(1.05);
}

/* MOBILE */
@media(max-width:480px){
    .hc-wallet-item b { font-size: 12px; }
    .hc-canvas-area { transform: scale(1.05); }
}
#youtube_results {
    max-height: 400px; /* Pop-up yüksekliğine göre ayarla */
    overflow-y: auto;
    background: #fff;
    padding: 5px;
}

/* Her bir video satırı */
.yt_search_item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background: #fff;
}

/* Mouse ile üzerine gelince */
.yt_search_item:hover {
    background: #f7f7f7;
    border-color: #e0e0e0;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Video Önizleme Resmi */
.yt_thumb {
    flex-shrink: 0;
    width: 100px;
    height: 60px;
    margin-right: 12px;
    position: relative;
}

.yt_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Video Bilgileri */
.yt_info {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Uzun başlıkların taşmasını önler */
}

.yt_title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Çok uzun başlıkları ... yapar */
}

.yt_channel {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
}

.yt_channel:before {
    content: "\f167"; /* FontAwesome kullanıyorsan YouTube ikonu */
    font-family: "Font Awesome 5 Brands";
    margin-right: 5px;
    color: #ff0000;
}

/* Yükleniyor Spinnerı */
.yt-search-loading {
    padding: 30px;
    text-align: center;
    color: #555;
}

.yt-search-loading i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

/* Scrollbar Tasarımı (Chrome, Edge, Safari) */
#youtube_results::-webkit-scrollbar {
    width: 6px;
}
#youtube_results::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#youtube_results::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
#youtube_results::-webkit-scrollbar-thumb:hover {
    background: #999;
}
.sy_youtube_search-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 550px;
    margin: 40px auto;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* Üst Başlık Alanı */
.sy_youtube_search-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
}

.sy_youtube_brand-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.youtube-red {
    color: #FF0000;
    font-size: 24px;
}

.sy_youtube_brand-text {
    font-weight: 700;
    font-size: 18px;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.sy_youtube_close-action {
    cursor: pointer;
    background: #f0f0f0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #666;
}

.sy_youtube_close-action:hover {
    background: #e0e0e0;
    transform: rotate(90deg);
}

/* Arama Çubuğu Tasarımı */
.input-container {
    padding: 0 28px 24px;
}

.sy_youtube_input-glass-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.sy_youtube_search-icon {
    position: absolute;
    left: 18px;
    color: #999;
    font-size: 16px;
}

.sy_youtube_modern-input {
    width: 100%;
    padding: 5px 5px 5px 40px;
    border-radius: 7px;
    border: 2px solid transparent;
    /* background: #f5f5f7; */
    font-size: 16px;
    /* color: #333; */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sy_youtube_modern-input:focus {
    outline: none;
    background: #ffffff;
    border-color: #007AFF; /* Modern iOS Mavisi */
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

/* Sonuç Alanı ve Boş Durum */
.sy_youtube_results-viewport {
    min-height: 250px;
    background: rgba(245, 245, 247, 0.5);
    border-top: 1px solid rgba(0,0,0,0.05);
}

.sy_youtube_empty-state-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.sy_youtube_icon-pulse {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #007AFF;
    margin-bottom: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    animation: sy_youtube_pulse-soft 2s infinite;
}

.sy_youtube_empty-text {
    color: #888;
    font-size: 15px;
    font-weight: 500;
}
@keyframes sy_youtube_pulse-soft {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
/* Parent bubble - clean */
.bubble:has(.boomvideo[value="youtube"]),
.bubble:has(.youtube-enhanced),
.bubble.youtube-bubble {
    max-width: none !important;
    width: auto !important;
    display: inline-block !important;
    white-space: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Fix original boomvideo element */
.boomvideo[value="youtube"],
.boomcvideo[value="youtube"] {
    width: 240px !important;
    height: 135px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
}

/* Parent containers */
.video_container:has(.boomvideo[value="youtube"]),
.chat_video_container:has(.boomvideo[value="youtube"]),
.video_container.youtube-container,
.chat_video_container.youtube-container {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    display: inline-block !important;
    position: relative !important;
}

/* Main YouTube container - MODERN CARD */
.youtube-enhanced {
    position: relative !important;
    display: inline-block !important;
    width: 240px !important;
    margin: 5px 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Video Wrapper - Main card with shadow */
.youtube-enhanced .video-wrapper {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    width: 240px !important;
    height: 135px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.youtube-enhanced .video-wrapper:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

/* Video Thumbnail */
.youtube-enhanced .video-thumbnail {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    line-height: 0 !important;
    display: block !important;
}

.youtube-enhanced .video-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

/* Play Button Overlay - Modern */
.youtube-enhanced .play-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 0, 0, 0.9) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.4) !important;
}

.youtube-enhanced .play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1) !important;
    background: rgba(255, 0, 0, 1) !important;
}

.youtube-enhanced .play-overlay i {
    color: #fff !important;
    font-size: 18px !important;
    margin-left: 3px !important;
}

/* Inline Player */
.youtube-enhanced .inline-player {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important;
    display: none !important;
    background: #000 !important;
}

.youtube-enhanced .inline-player iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

.youtube-enhanced.playing .video-thumbnail {
    display: none !important;
}

.youtube-enhanced.playing .inline-player {
    display: block !important;
}

/* Player Controls - Top right */
.youtube-enhanced .player-controls {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 10 !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.youtube-enhanced:hover .player-controls,
.youtube-enhanced.playing .player-controls {
    opacity: 1 !important;
}

.youtube-enhanced .control-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.youtube-enhanced .control-btn:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    transform: scale(1.1) !important;
}

.youtube-enhanced .control-btn i {
    color: #fff !important;
    font-size: 12px !important;
}

/* Minimize button - shown when playing */
.youtube-enhanced .minimize-btn {
    position: absolute !important;
    bottom: 6px !important;
    left: 6px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: none !important;
    cursor: pointer !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.youtube-enhanced.playing .minimize-btn {
    display: flex !important;
}

.youtube-enhanced .minimize-btn i {
    color: #fff !important;
    font-size: 12px !important;
}

/* ========================================
   FLOATING MINI PLAYER
   ======================================== */

.youtube-floating-player {
    position: fixed !important;
    bottom: 80px !important;
    right: 20px !important;
    width: 280px !important;
    z-index: 9999 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    animation: floatIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: move !important;
    background: #000 !important;
    will-change: left, top !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Drag overlay - iframe üzerinde sürükleme sorununu çözer */
.yt-drag-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 50 !important;
    display: none;
    cursor: move !important;
    background: transparent !important;
}

@keyframes floatIn {
    from { opacity: 0; transform: translateY(50px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.youtube-floating-player .floating-video {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-top: 56.25% !important;
    overflow: hidden !important;
}

.youtube-floating-player .floating-video iframe,
.youtube-floating-player .floating-video > div {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    max-height: 100% !important;
}

.youtube-floating-player .floating-controls {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 8px !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.youtube-floating-player:hover .floating-controls {
    opacity: 1 !important;
}

.youtube-floating-player .floating-title {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    margin-right: 8px !important;
}

.youtube-floating-player .floating-btns {
    display: flex !important;
    gap: 4px !important;
}

.youtube-floating-player .float-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.youtube-floating-player .float-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.youtube-floating-player .float-btn i {
    color: #fff !important;
    font-size: 11px !important;
}

.youtube-floating-player .playing-indicator {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(255, 0, 0, 0.9) !important;
    padding: 3px 8px !important;
    border-radius: 15px !important;
}

.youtube-floating-player .playing-indicator .pulse-dot {
    width: 6px !important;
    height: 6px !important;
    background: #fff !important;
    border-radius: 50% !important;
    animation: pulseDot 1s ease-in-out infinite !important;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.youtube-floating-player .playing-indicator span {
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 600 !important;
}

/* ========================================
   REACTION SYSTEM - OVERLAY ON VIDEO
   ======================================== */

/* Reactions bar - bottom of video */
.youtube-reactions-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
    padding: 20px 10px 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 0 0 12px 12px !important;
}

/* Reaction trigger button - on video */
.youtube-reaction-trigger {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.95) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
}

.youtube-reaction-trigger:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.youtube-reaction-trigger:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

/* Reaction popup - horizontal above button */
.reaction-popup {
    position: absolute !important;
    bottom: 40px !important;
    left: 0 !important;
    background: #fff !important;
    border-radius: 20px !important;
    padding: 4px 6px !important;
    display: none !important;
    flex-direction: row !important;
    gap: 2px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    z-index: 100 !important;
    animation: popupFadeIn 0.2s ease !important;
}

@keyframes popupFadeIn {
    from { opacity: 0; transform: scale(0.8) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.reaction-popup.show {
    display: flex !important;
}

.reaction-popup .reaction-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

.reaction-popup .reaction-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    transform: scale(1.2) !important;
}

.reaction-popup .reaction-btn.reacting {
    animation: reactionPop 0.3s ease !important;
}

@keyframes reactionPop {
    50% { transform: scale(1.4); }
}

/* Reaction avatars - horizontal display */
.youtube-reactions-display {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 1 !important;
}

.reaction-avatars {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.reaction-avatar-wrap {
    position: relative !important;
    margin-left: -6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.reaction-avatar-wrap:first-child {
    margin-left: 0 !important;
}

.reaction-avatar-wrap:hover {
    transform: scale(1.15) translateY(-2px) !important;
    z-index: 10 !important;
}

.reaction-avatar {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    object-fit: cover !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.reaction-avatar-emoji {
    position: absolute !important;
    bottom: -4px !important;
    right: -6px !important;
    font-size: 14px !important;
    background: #fff !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.reaction-tooltip {
    position: absolute !important;
    bottom: calc(100% + 5px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.85) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    color: #fff !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    z-index: 100 !important;
}

.reaction-avatar-wrap:hover .reaction-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* More count button */
.reaction-count {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 10px !important;
    padding: 2px 8px !important;
    margin-left: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.reaction-count:hover {
    background: rgba(255,255,255,0.3) !important;
}

.reaction-count:empty {
    display: none !important;
}

.no-reactions {
    display: none !important;
}

/* All reactions popup */
.all-reactions-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 15px !important;
    min-width: 200px !important;
    max-width: 280px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
    z-index: 10000 !important;
    animation: popupFadeIn 0.2s ease !important;
}

.all-reactions-popup .popup-header {
    font-weight: bold !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eee !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.all-reactions-popup .popup-close {
    cursor: pointer !important;
    font-size: 18px !important;
    color: #999 !important;
}

.all-reactions-popup .popup-close:hover {
    color: #333 !important;
}

.all-reactions-popup .reaction-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.all-reactions-popup .reaction-item:last-child {
    border-bottom: none !important;
}

.all-reactions-popup .reaction-item img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
}

.all-reactions-popup .reaction-item .name {
    flex: 1 !important;
    font-size: 13px !important;
}

.all-reactions-popup .reaction-item .emoji {
    font-size: 16px !important;
}

.reactions-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 9999 !important;
}

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

@media screen and (max-width: 768px) {
    .youtube-enhanced {
        width: 200px !important;
    }
    
    .youtube-enhanced .video-wrapper {
        width: 200px !important;
        height: 112px !important;
    }
    
    .youtube-enhanced .play-overlay {
        width: 40px !important;
        height: 40px !important;
    }
    
    .youtube-enhanced .play-overlay i {
        font-size: 14px !important;
    }
    
    .youtube-reaction-trigger {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .reaction-popup .reaction-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    
    .youtube-floating-player {
        width: 180px !important;
        bottom: 70px !important;
        right: 10px !important;
    }
    
    .reaction-avatar {
        width: 18px !important;
        height: 18px !important;
    }
    
    .reaction-avatar-emoji {
        width: 18px !important;
        height: 18px !important;
        font-size: 12px !important;
    }
    
    .youtube-reactions-bar {
        padding: 15px 8px 6px 8px !important;
    }
}

/* Original search styles */
.you_result { width: 50%; float: left; height: 150px; }
.you_tumb { width: 100%; }
.you_text { max-height: 32px; font-size: 12px; overflow: hidden; }
.youtube_results { min-height: 320px; max-height: 320px; overflow: hidden; overflow-y: auto; }

@media screen and (max-width: 330px) {
    .you_result { height: 140px; }
    .you_text { max-height: 45px; }
}

/* ========================================
   YOUTUBE SEARCH MODAL - MODERN DESIGN
   ======================================== */
.yt-search-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.yt-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.yt-search-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.yt-search-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    color: #666;
    font-size: 14px;
}
.yt-search-close:hover {
    background: rgba(0,0,0,0.06);
}
.yt-search-input-wrap {
    position: relative;
    padding: 10px 16px;
}
.yt-search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 13px;
    pointer-events: none;
}
.yt-search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    background: #f8f9fa;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}
.yt-search-input:focus {
    border-color: #ff0000;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,0,0,0.08);
}
.yt-search-input::placeholder {
    color: #aaa;
}
#youtube_tab {
    flex: 1;
    overflow: hidden;
}
.youtube_results {
    min-height: 280px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px;
}
.youtube_results::-webkit-scrollbar { width: 4px; }
.youtube_results::-webkit-scrollbar-track { background: transparent; }
.youtube_results::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* Empty state */
.yt-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: #bbb;
    gap: 10px;
}
.yt-search-empty i {
    font-size: 32px;
    color: #ddd;
}
.yt-search-empty p {
    font-size: 13px;
    margin: 0;
}

/* Result count */
.yt-result-count {
    padding: 4px 12px;
    font-size: 11px;
    color: #999;
    font-weight: 500;
}

/* ========================================
   YOUTUBE SEARCH RESULT CARDS
   ======================================== */
.yt-result-card {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s;
    margin-bottom: 2px;
}
.yt-result-card:hover {
    background: rgba(0,0,0,0.04);
}
.yt-result-card:active {
    background: rgba(0,0,0,0.07);
}
.yt-result-thumb {
    position: relative;
    width: 120px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #000;
}
.yt-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.yt-result-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.4;
}
.yt-result-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 30px;
    height: 30px;
    background: rgba(255,0,0,0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.yt-result-card:hover .yt-result-play {
    opacity: 1;
}
.yt-result-play i {
    color: #fff;
    font-size: 11px;
    margin-left: 2px;
}
.yt-result-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.yt-result-title {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.yt-result-channel {
    font-size: 11px;
    color: #888;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide old styles */
.you_result { display: none !important; }

@media screen and (max-width: 480px) {
    .yt-result-thumb {
        width: 100px;
        height: 56px;
    }
    .yt-result-title {
        font-size: 11px;
    }
    .yt-search-input {
        font-size: 14px;
    }
}

/* Loading state */
.yt-search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: #ff0000;
    gap: 10px;
}
.yt-search-loading i {
    font-size: 24px;
}
.yt-search-loading p {
    font-size: 13px;
    color: #999;
    margin: 0;
}

/* ========================================
   FIX: Reactions bar BELOW video
   ======================================== */
.youtube-enhanced .youtube-reactions-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.6)) !important;
    padding: 16px 8px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 0 0 12px 12px !important;
    z-index: 10 !important;
}
.youtube-reaction-trigger {
    background: rgba(0,0,0,0.06) !important;
    box-shadow: none !important;
}

/* ========================================
   FIX: Floating player always-visible close
   ======================================== */
.floating-close-always {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 60 !important;
    transition: background 0.2s, transform 0.2s !important;
}
.floating-close-always:hover {
    background: rgba(220,38,38,0.9) !important;
    transform: scale(1.1) !important;
}
.floating-close-always i {
    color: #fff !important;
    font-size: 13px !important;
}
.sy-bildirim-textarea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa; /* Hafif gri arka plan */
    border: 1px solid #ddd;
    border-top: none; /* Textarea'nın hemen altına yapışması için */
    border-radius: 0 0 8px 8px; /* Alt köşeleri yuvarlat */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #666;
}

#bildiriz_yazi-count {
    font-size: 13px;
    font-weight: 500;
}

.sy-bildirim-textarea-footer .fa-magic {
    color: #6e8efb; /* Ä°kon rengi */
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.sy-bildirim-textarea-footer .fa-magic:hover {
    color: #a777e3; /* Hover durumunda renk deÄŸiÅŸimi */
    transform: scale(1.2); /* Hafif büyüme efekti */
}
.bg_bildirim_tabs{display:flex;border-bottom:1px solid rgba(0,0,0,0.08);background:#fafafa}
.bg_tab{flex:1;padding:12px 0;text-align:center;font-size:12px;font-weight:600;color:#888;cursor:pointer;transition:all 0.2s;border-bottom:2px solid transparent}
.bg_tab:hover{color:#333;background:rgba(0,0,0,0.02)}
.bg_tab_active{color:#111;border-bottom-color:#111}
.bg_tab i{margin-right:4px;font-size:11px}
.bg_form_group{margin-bottom:14px}
.bg_label{display:block;font-size:11px;font-weight:700;color:#555;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px}
.bg_label i{margin-right:4px;color:#888}
.bg_textarea_wrap{border:1.5px solid #e0e0e0;border-radius:10px;overflow:hidden;transition:border-color 0.2s}
.bg_textarea_wrap:focus-within{border-color:#333}
.bg_textarea{width:100%;min-height:80px;padding:12px;border:none;outline:none;font-size:14px;resize:none;font-family:inherit;box-sizing:border-box;background:transparent}
.bg_toolbar{display:flex;gap:6px;margin-bottom:14px}
.bg_tool_btn{position:relative;width:36px;height:36px;border-radius:8px;background:#f3f4f6;border:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#555;font-size:14px;transition:all 0.2s}
.bg_tool_btn:hover{background:#e8e8e8;color:#111}
.bg_actions{display:flex;gap:8px;margin-top:4px}
.bg_btn{flex:1;padding:11px 0;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit}
.bg_btn_primary{background:#111827;color:#fff}
.bg_btn_primary:hover{background:#1f2937}
.bg_btn_warning{background:#f59e0b;color:#fff}
.bg_btn_warning:hover{background:#d97706}
.bg_file_preview{padding:10px;border:1px dashed #ddd;border-radius:8px;margin-top:8px}
.bg_delete_list{display:flex;flex-direction:column;gap:8px}
.bg_delete_item{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(0,0,0,0.06);border-radius:10px;cursor:pointer;transition:all 0.2s}
.bg_delete_item:hover{background:#f8f8f8;border-color:rgba(0,0,0,0.12)}
.bg_delete_icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.bg_icon_blue{background:#eff6ff;color:#3b82f6}
.bg_icon_orange{background:#fff7ed;color:#f97316}
.bg_icon_red{background:#fef2f2;color:#ef4444}
.bg_delete_info{flex:1;min-width:0}
.bg_delete_title{font-size:13px;font-weight:700;color:#222}
.bg_delete_desc{font-size:11px;color:#888;margin-top:2px}
/* Custom Select - inline expand */
.bg_custom_select{position:relative;width:100%}
.bg_cs_selected{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1.5px solid #e0e0e0;border-radius:10px;cursor:pointer;background:#fff;transition:all 0.2s;user-select:none}
.bg_cs_selected:hover{border-color:#bbb}
.bg_cs_selected.bg_cs_open{border-color:#111;border-radius:10px 10px 0 0}
.bg_cs_text{font-size:13px;color:#222;font-weight:500}
.bg_cs_arrow{font-size:10px;color:#999;transition:transform 0.2s}
.bg_cs_open .bg_cs_arrow{transform:rotate(180deg);color:#111}
.bg_cs_dropdown{display:none;border:1.5px solid #111;border-top:none;border-radius:0 0 10px 10px;background:#fff;overflow:hidden}
.bg_cs_dropdown.bg_cs_show{display:block}
.bg_cs_search_wrap{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #f0f0f0;background:#fafafa}
.bg_cs_search_wrap i{font-size:11px;color:#aaa}
.bg_cs_search{flex:1;border:none;outline:none;font-size:12px;background:transparent;font-family:inherit;padding:4px 0}
.bg_cs_list{max-height:180px;overflow-y:auto;overscroll-behavior:contain}
.bg_cs_list::-webkit-scrollbar{width:4px}
.bg_cs_list::-webkit-scrollbar-thumb{background:#ddd;border-radius:4px}
.bg_cs_option{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;cursor:pointer;transition:background 0.15s;font-size:13px;color:#444}
.bg_cs_option:hover{background:#f5f5f5}
.bg_cs_active{background:#f0f7ff;color:#111;font-weight:600}
.bg_cs_active .bg_cs_check{display:inline-block;color:#3b82f6;font-size:11px}
.bg_cs_check{display:none}
.bg_cs_rank_name{flex:1}
body, textarea, input, select, button {
    font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}
*, *::before, *::after {
    box-sizing: border-box;
}

.over_modal_out, .over_emodal_out {
    background-color: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
.over_modal_in, .over_emodal_in, .small_modal_in, .large_modal_in, .top_modal_in {
    border-radius: 16px !important;
    overflow: visible !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.05) !important;
}
.modal_top {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    gap: 10px !important;
}
.modal_top_text {
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    flex: 1 !important;
    padding: 0 !important;
}
.modal_top_empty {
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    flex: 1 !important;
    padding: 0 !important;
}
.modal_top_element {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    flex-shrink: 0 !important;
}
.modal_top_element:hover {
    background: rgba(0,0,0,0.06) !important;
}
.modal_close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease;
    position: absolute;
    top: 8px;
    right: 8px;
    background: tomato;
    color: #fff;
    z-index: 100;
}
.modal_close:hover {
    background: #e53935;
}
.modal_pad {
    padding: 20px 16px !important;
}
.modal_control {
    padding: 12px 0 8px 0 !important;
}
.modal_title {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding-bottom: 12px !important;
}
.avatar_top_mod {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
.avatar_top_mod img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.avatar_top_name {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 4px !important;
}

.modal_menu {
    padding: 8px 50px 8px 12px;
    font-size: 14px;
    position: relative;
}
.modal_menu ul li {
    font-size: 11px;
    font-weight: 500;
    transition: background 0.15s ease;
}

.small_button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: transform 0.1s ease, box-shadow 0.15s ease !important;
}
.small_button:active {
    transform: scale(0.97) !important;
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
}

.dark .over_modal_in, .dark .over_emodal_in, .dark .small_modal_in, .dark .large_modal_in, .dark .top_modal_in {
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) !important;
}
.dark .modal_top {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
.dark .modal_top_element:hover,
.dark .modal_close:hover {
    background: rgba(255,255,255,0.08) !important;
}
.dark ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}
.sy_modal_back{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.sy_modal_wrap{ width: 100%; display:flex; justify-content:center; }
.sy_modal_card{
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.08);
}
body.sy_modal_open{ overflow: hidden; }

.sy_modal_header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 16px 18px;
    background:#fff;
    border-bottom: 1px solid rgba(0,0,0,0.10);
}
.sy_modal_header_left{ display:flex; align-items:center; gap:12px; }
.sy_modal_icon{
    width: 22px;
    height: 38px;
    border-radius: 10px;
    background: #F3F4F6;
    border: 1px solid rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111827;
}
.sy_modal_title{
    font-size: 16px;
    font-weight: 700;
    color:#111;
    line-height: 1.1;
}
.sy_modal_subtitle{
    margin-top: 2px;
    font-size: 12px;
    color: rgba(0,0,0,0.55);
}
.sy_modal_close{
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F3F4F6;
    border: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sy_modal_body{
    background:#fff;
    max-height: 60vh;
    overflow:auto;
}
.sy_rule_item{
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
}
.sy_rule_item:last-child{ border-bottom: 0; }
.sy_rule_title{
    font-size: 14px;
    font-weight: 700;
    color:#111;
    margin-bottom: 4px;
}
.sy_rule_content{
    font-size: 13px;
    color: rgba(0,0,0,0.65);
    line-height: 1.5;
}
.sy_modal_empty{
    padding: 28px 18px;
    text-align:center;
    color: rgba(0,0,0,0.55);
}
.sy_modal_empty i{ font-size: 34px; opacity: 0.55; display:block; margin-bottom: 10px; }

.sy_modal_footer{
    padding: 14px 18px;
    background:#fff;
    border-top: 1px solid rgba(0,0,0,0.10);
    display:flex;
    justify-content:center;
}
.sy_modal_primary{
    padding: 10px 18px;
    border-radius: 10px;
    background: #111827;
    color:#fff;
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display:flex;
    align-items:center;
    gap: 8px;
}

.mod_msg {
        border-left: 3px solid #4caf50;
}

.user_msg {
        border-left: 3px solid transparent;
}
.ig-post-btn_storie {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.ig-post-btn_storie:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.ig-post-btn_storie:active {
    transform: translateY(0);
}
@media screen and (max-width: 1024px) { 
    .mobil_gizleme-eleman {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
}
.stories_modal { 
display:none; position:fixed; top:0; left:0; width:100%; height:100%; 
z-index: 9999999 !important; 
align-items:center; justify-content:center; backdrop-filter: blur(10px);
}
.stories_modal_content { 
width: 100%; max-width: 420px; height: 90vh; position:relative; 
display: flex; flex-direction: column;border-radius: 25px;
overflow: hidden; border: 1px solid #313244; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.stories_top_bar {
position: absolute; top: 0; left: 0; right: 0;
display: flex; justify-content: space-between; align-items: center;
padding: 20px; z-index: 100;
}
.stories_btn_ui {
padding: 8px 15px; border-radius: 50px; backdrop-filter: blur(5px);
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.1);
transition: 0.2s;
}
.stories_btn_ui:hover {  transform: scale(1.05); }
.btn_trash {!important; margin-left: 8px; }
.btn_x { width: 35px; height: 35px; border-radius: 50%; font-size: 20px; padding: 0; }
#stories_v_panel { 
display:none; position: absolute; top: 80px; left: 20px; right: 20px; 
 border-radius: 20px; padding: 15px; 
max-height: 40vh; overflow-y: auto; z-index: 110;
border: 1px solid #45475a; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.v_user_row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #313244; }
.v_user_row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid #89b4fa; }
.v_user_row span { font-size: 13px; font-weight: 500; }
.stories_main_view { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.stories_main_view img, .stories_main_view video { max-width: 100%; max-height: 100%; object-fit: contain; }
.stories_footer_msg { 
position: absolute; bottom: 0; left: 0; right: 0;
padding: 30px 20px; text-align: center; 
font-size: 14px; font-style: italic;
border: 2px dashed #888;
margin: 10px;
box-sizing: border-box;
}
.m-divider {
display: flex;
align-items: center;
margin: 20px 0;
font-size: 11px;
font-weight: bold;
}

.m-divider::before, .m-divider::after {
content: "";
flex: 1;
height: 1px;
}

.m-divider span {
padding: 0 15px;
}
.m-submit-btn {
width: 100%;
border: none;
padding: 14px;
border-radius: 12px;
font-weight: 800;
font-size: 15px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(137, 180, 250, 0.3);
transition: 0.3s;
}

.m-submit-btn:active {
transform: translateY(1px);
}
.m-file-area span {
font-size: 13px;
}
.m-file-area i {
font-size: 24px;
display: block;
margin-bottom: 8px;
}
.m-file-area {
position: relative;
border: 2px dashed rgba(137, 180, 250, 0.3);
border-radius: 15px;
padding: 20px;
text-align: center;
transition: 0.3s;
cursor: pointer;
}
.m-file-area:hover {
border-color: #89b4fa;
}
.m-input {
width: 100%;
padding: 12px 15px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
}
.m-input:focus {
outline: none;
box-shadow: 0 0 15px rgba(137, 180, 250, 0.2);
}
.modal-field label {
display: block;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#storyUploadForm {
padding: 10px 5px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.stories_carousel { display: flex;overflow: hidden; width: 320px; scroll-behavior: smooth; padding: 10px 0; }
.stories_container_wrapper { display: flex; align-items: center; justify-content: center;}
.wall-header-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: #fff;
border-bottom: 1px solid #eee;
margin: 0 15px;
border-radius: 10px 10px 0 0;
}
.wall-title {
font-size: 14px;
font-weight: 600;
color: #262626;
}

.wall-title i {
color: #e74c3c;
margin-right: 6px;
}

.top-liked-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border: none;
border-radius: 20px;
color: #fff;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(240, 147, 251, 0.4);
}

.top-liked-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(240, 147, 251, 0.6);
}

.top-liked-btn i {
color: #fff;
}

/* Top Liked Modal */
.top-liked-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}

.top-liked-content {
background: #fff;
border-radius: 16px;
width: 90%;
max-width: 450px;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.top-liked-header {
display: flex;
align-items: center;
padding: 16px 20px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: #fff;
position: relative;
}

.top-liked-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
}

.top-liked-header h3 i {
margin-right: 8px;
}

.top-liked-subtitle {
font-size: 11px;
opacity: 0.9;
margin-left: 10px;
background: rgba(255,255,255,0.2);
padding: 2px 8px;
border-radius: 10px;
}

.top-liked-close {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.2);
border: none;
color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}

.top-liked-close:hover {
background: rgba(255,255,255,0.4);
}

.top-liked-list {
max-height: 60vh;
overflow-y: auto;
padding: 10px 0;
}

.top-liked-item {
display: flex;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
gap: 12px;
transition: background 0.2s ease;
}

.top-liked-item:hover {
background: #fafafa;
}

.top-liked-item:last-child {
border-bottom: none;
}

.top-rank {
width: 30px;
text-align: center;
flex-shrink: 0;
}

.rank-gold, .rank-silver, .rank-bronze {
font-size: 20px;
}

.rank-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #f0f0f0;
border-radius: 50%;
font-size: 11px;
font-weight: 600;
color: #666;
}

.top-user-info {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}

.top-user-info img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #f0f0f0;
}

.top-user-details {
display: flex;
flex-direction: column;
}

.top-username {
font-size: 12px;
font-weight: 600;
color: #262626;
}

.top-userrank {
font-size: 10px;
color: #8e8e8e;
}

.top-post-preview {
flex: 1;
font-size: 11px;
color: #666;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}

.top-post-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}

.top-likes {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: #e74c3c;
}

.top-likes i {
font-size: 10px;
}

.top-date {
font-size: 9px;
color: #8e8e8e;
}

.top-liked-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 20px;
color: #8e8e8e;
text-align: center;
min-height: 200px;
}

.top-liked-empty i {
font-size: 48px;
margin-bottom: 15px;
color: #ddd;
}

.top-liked-empty span {
font-size: 16px;
font-weight: 500;
color: #666;
}


.winner-reveal {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
border-radius: 16px;
position: relative;
overflow: hidden;
animation: revealPulse 0.5s ease-out;
}

@keyframes revealPulse {
0% { transform: scale(0.8); opacity: 0; }
50% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}

.winner-confetti {
position: absolute;
inset: 0;
background: 
radial-gradient(circle at 20% 30%, gold 2px, transparent 2px),
radial-gradient(circle at 80% 20%, #f5576c 2px, transparent 2px),
radial-gradient(circle at 40% 70%, #00d9ff 2px, transparent 2px),
radial-gradient(circle at 70% 80%, gold 2px, transparent 2px),
radial-gradient(circle at 10% 60%, #f5576c 2px, transparent 2px),
radial-gradient(circle at 90% 50%, #00d9ff 2px, transparent 2px);
animation: confettiFall 2s linear infinite;
opacity: 0.6;
}

@keyframes confettiFall {
0% { background-position: 0 0; }
100% { background-position: 0 100px; }
}

.winner-badge {
font-size: 60px;
animation: badgeBounce 1s ease-in-out infinite;
text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}

@keyframes badgeBounce {
0%, 100% { transform: scale(1) rotate(-5deg); }
50% { transform: scale(1.1) rotate(5deg); }
}

.winner-title {
color: gold;
font-size: 24px;
font-weight: 700;
margin: 15px 0;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
animation: titleGlow 1.5s ease-in-out infinite alternate;
}

@keyframes titleGlow {
0% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
100% { text-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 60px rgba(255, 215, 0, 0.5); }
}

.winner-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 25px 40px;
background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
border-radius: 20px;
border: 2px solid rgba(255, 215, 0, 0.5);
backdrop-filter: blur(10px);
animation: cardFloat 3s ease-in-out infinite;
}

@keyframes cardFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.winner-glow {
position: absolute;
inset: -5px;
background: linear-gradient(45deg, gold, #f5576c, gold, #00d9ff, gold);
border-radius: 22px;
z-index: -1;
filter: blur(15px);
opacity: 0.6;
animation: glowRotate 3s linear infinite;
}

@keyframes glowRotate {
0% { filter: blur(15px) hue-rotate(0deg); }
100% { filter: blur(15px) hue-rotate(360deg); }
}

.winner-avatar {
width: 90px;
height: 90px;
border-radius: 50%;
border: 4px solid gold;
object-fit: cover;
box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
animation: avatarPulse 2s ease-in-out infinite;
}

@keyframes avatarPulse {
0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.9); }
}

.winner-info {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
}

.winner-name {
font-size: 20px;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.winner-rank {
font-size: 12px;
color: rgba(255, 215, 0, 0.9);
margin-top: 4px;
}

.winner-stats {
margin-top: 15px;
}

.winner-likes {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
border-radius: 25px;
color: #fff;
font-size: 14px;
font-weight: 600;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.5);
}

.winner-likes i {
animation: heartBeat 1s ease-in-out infinite;
}

@keyframes heartBeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}

.winner-stars {
font-size: 24px;
margin-top: 20px;
animation: starsSparkle 1s ease-in-out infinite;
}

@keyframes starsSparkle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.1); }
}

/* Liste görünümü */
.top-liked-list-view {
background: #fff;
border-radius: 16px;
overflow: hidden;
}

/* Birinci item highlight */
.winner-item {
background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
border-left: 3px solid gold;
}

.winner-item .top-username {
color: #b8860b;
font-weight: 700;
}

/* Top Liked Icon in Post Bar */
.top-liked-icon {
position: relative;
}

.top-liked-icon i {
color: #f5576c !important;
animation: fireGlow 1.5s ease-in-out infinite alternate;
}

@keyframes fireGlow {
0% { text-shadow: 0 0 5px rgba(245, 87, 108, 0.5); }
100% { text-shadow: 0 0 15px rgba(245, 87, 108, 0.8), 0 0 25px rgba(245, 87, 108, 0.4); }
}

.top-liked-icon:hover i {
transform: scale(1.2);
transition: transform 0.2s ease;
}

.ig-create-post {
background: #fff;
border-radius: 12px;
margin: 10px 12px;
border: 1px solid #dbdbdb;
overflow: hidden;
}

.ig-create-header {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
}

.ig-create-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #efefef;
flex-shrink: 0;
}

.ig-create-input-wrap {
flex: 1;
min-width: 0;
}

.ig-create-textarea {
width: 100%;
min-height: 40px;
max-height: 120px;
border: none;
outline: none;
resize: none;
font-size: 14px;
line-height: 1.5;
color: #262626;
background: transparent;
padding: 6px 0;
}

.ig-create-textarea::placeholder {
color: #8e8e8e;
}


#chat_right_data .ig-create-post {
margin: 0 0 12px 0;
overflow: hidden;
}

#chat_right_data .ig-create-header {
overflow: hidden;
}

#chat_right_data .ig-create-input-wrap {
overflow: hidden;
}

#chat_right_data .ig-create-textarea {
width: 100%;
box-sizing: border-box;
border: none !important;
overflow-y: auto;
}

.ig-create-preview {
padding: 8px 12px;
border-top: 1px solid #efefef;
}

.ig-create-emoji {
padding: 8px 12px;
border-top: 1px solid #efefef;
background: #fafafa;
max-height: 200px;
overflow-y: auto;
}

.ig-create-emoji .emoticon {
height: 24px;
width: 24px;
float: left;
margin: 5px;
}

.ig-create-emoji .emoticon img {
height: 100%;
width: 100%;
object-fit: contain;
}

.ig-create-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-top: 1px solid #efefef;
background: #fafafa;
flex-wrap: wrap;
gap: 8px;
}

.ig-create-tools {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}

.ig-tool-btn {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #666;
transition: all 0.2s ease;
position: relative;
}

.ig-tool-btn:hover {
background: #e8e8e8;
color: #262626;
}

.ig-tool-btn i {
font-size: 16px;
}

.ig-tool-btn input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}

.ig-tool-btn.top-liked-icon i {
color: #f5576c;
}

.ig-post-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: #0095f6;
border: none;
border-radius: 8px;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}

.ig-post-btn:hover {
background: #0086e0;
}

.ig-post-btn i {
font-size: 12px;
}

/* ============================================
   INSTAGRAM STYLE - MODERN POST CARDS
   ============================================ */

/* Post Card Container */
.ig-post-card {
background: #ffffff;
border-radius: 12px;
margin: 12px 0;
border: 1px solid #dbdbdb;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ig-post-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}

/* Post Header */
.ig-post-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #f0f0f0;
}

.ig-post-user {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}

/* Instagram Style Avatar Ring */
.ig-avatar-ring {
width: 44px;
height: 44px;
border-radius: 50%;
padding: 2px;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}

.ig-avatar-ring:hover {
transform: scale(1.05);
}

.ig-avatar-ring img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
}

/* User Info */
.ig-user-info {
display: flex;
flex-direction: column;
gap: 2px;
}

.ig-username {
font-size: 14px;
font-weight: 600;
color: #262626;
transition: color 0.2s ease;
}

.ig-username:hover {
color: #0095f6;
}

.ig-post-time {
font-size: 12px;
color: #8e8e8e;
font-weight: 400;
}

/* Post Menu Button */
.ig-post-menu-btn {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #262626;
transition: all 0.2s ease;
position: relative;
}

.ig-post-menu-btn:hover {
background: #f5f5f5;
}

.ig-post-menu-btn i {
font-size: 16px;
}

/* Dropdown Menu */
.ig-post-dropdown {
position: absolute;
top: 100%;
right: 0;
min-width: 200px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 1px solid #dbdbdb;
overflow: hidden;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
}

.ig-post-menu-btn:hover .ig-post-dropdown,
.ig-post-dropdown:hover {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}

.ig-dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background 0.2s ease;
color: #262626;
font-size: 14px;
}

.ig-dropdown-item:hover {
background: #fafafa;
}

.ig-dropdown-item i {
width: 20px;
text-align: center;
color: #8e8e8e;
}

.ig-dropdown-item.ig-delete {
color: #ed4956;
}

.ig-dropdown-item.ig-delete i {
color: #ed4956;
}

.ig-dropdown-item.ig-report {
color: #f5a623;
}

.ig-dropdown-item.ig-report i {
color: #f5a623;
}

/* Post Content */
.ig-post-content {
padding: 16px;
font-size: 14px;
line-height: 1.6;
color: #262626;
word-wrap: break-word;
}

.ig-post-content img {
max-width: 100%;
border-radius: 8px;
margin-top: 12px;
}

.ig-post-content video {
max-width: 100%;
border-radius: 8px;
margin-top: 12px;
}

/* Post Actions */
.ig-post-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
}

/* Reactions Container */
.ig-reactions {
display: flex;
align-items: center;
gap: 8px;
}

.ig-reactions .like_btn,
.ig-reactions .like_item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
background: #f5f5f5;
font-size: 16px;
}

.ig-reactions .like_btn:hover,
.ig-reactions .like_item:hover {
transform: scale(1.15);
background: #fee2e2;
}

.ig-reactions .like_btn.liked,
.ig-reactions .like_item.active {
animation: likeAnimation 0.4s ease;
}

@keyframes likeAnimation {
0% { transform: scale(1); }
25% { transform: scale(1.3); }
50% { transform: scale(0.9); }
75% { transform: scale(1.15); }
100% { transform: scale(1); }
}

.ig-reactions .like_count {
font-size: 13px;
font-weight: 600;
color: #262626;
min-width: 20px;
}

/* Comment Toggle */
.ig-comment-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 20px;
background: #f5f5f5;
cursor: pointer;
transition: all 0.2s ease;
font-size: 13px;
font-weight: 500;
color: #262626;
}

.ig-comment-toggle:hover {
background: #e8e8e8;
}

.ig-comment-toggle i {
font-size: 16px;
color: #8e8e8e;
}

/* Comment Input Area - Modern Instagram Style */
.ig-comment-input {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #fff;
border-top: 1px solid #efefef;
}

.ig-comment-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid #efefef;
}

.ig-comment-form {
display: flex;
align-items: center;
flex: 1;
background: #f5f5f5;
border: none;
border-radius: 18px;
padding: 0;
overflow: hidden;
transition: background 0.2s ease;
}

.ig-comment-form:focus-within {
background: #efefef;
}

.ig-input {
flex: 1;
border: none;
outline: none;
font-size: 13px;
padding: 6px 12px;
background: transparent;
color: #262626;
line-height: 1.4;
}

.ig-input::placeholder {
color: #8e8e8e;
font-size: 13px;
}

.ig-send-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
color: #0095f6;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
flex-shrink: 0;
transition: all 0.2s ease;
}

.ig-send-btn:hover {
color: #00376b;
transform: scale(1.1);
}

.ig-send-btn i {
font-size: 14px;
}

/* Comments Wrapper */
.ig-comments-wrapper {
background: #fafafa;
}

.ig-comments-wrapper .ncmtbox {
padding: 0 16px;
}

/* Reply/Comment Items */
.ig-comments-wrapper .news_reply,
.ig-comments-wrapper .reply_element {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}

/* Post text içerik */
.ig-post-content .text_content {
font-size: 15px;
line-height: 1.6;
color: #262626;
}

/* Modern Paylaşım Giriş Alanı - News Input */
.news_input_c {
background: #fff;
border: 1px solid #dbdbdb;
border-radius: 22px;
padding: 4px 16px;
transition: all 0.2s ease;
}

.news_input_c:focus-within {
border-color: #0095f6;
box-shadow: 0 0 0 3px rgba(0, 149, 246, 0.1);
}

.news_input_c .full_textarea {
border: none;
background: transparent;
resize: none;
font-size: 15px;
line-height: 1.5;
min-height: 40px;
padding: 10px 0;
}

.news_input_c .full_textarea:focus {
outline: none;
}

.news_input_c .full_textarea::placeholder {
color: #8e8e8e;
}

/* Main Post Control - Instagram Style */
.main_post_control {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
margin-top: 10px;
}

.main_post_item {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
background: #f5f5f5;
color: #666;
position: relative;
}

.main_post_item:hover {
background: #e8e8e8;
transform: scale(1.05);
}

.main_post_item i {
font-size: 14px;
}

.main_post_item input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}

/* Gönder Butonu */
.main_post_item:last-child {
background: linear-gradient(45deg, #0095f6 0%, #00c6fb 100%);
color: #fff;
}

.main_post_item:last-child:hover {
box-shadow: 0 2px 8px rgba(0, 149, 246, 0.4);
}

/* ============================================
   INSTAGRAM STYLE REACTION BUTTONS
   ============================================ */

.ig-reaction-buttons {
display: flex;
align-items: center;
gap: 4px;
}

.ig-reaction-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 16px;
background: #f5f5f5;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
font-size: 12px;
}

.ig-reaction-btn:hover {
background: #e8e8e8;
transform: scale(1.03);
}

.ig-reaction-btn:active {
transform: scale(0.97);
}

.ig-reaction-btn.active,
.ig-reaction-btn.liked,
.ig-reaction-btn.disliked,
.ig-reaction-btn.loved,
.ig-reaction-btn.funned {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%);
}

.ig-reaction-icon {
width: 14px;
height: 14px;
transition: transform 0.2s ease;
}

.ig-reaction-btn:hover .ig-reaction-icon {
transform: scale(1.1);
}

.ig-reaction-count {
font-size: 11px;
font-weight: 500;
color: #555;
min-width: 10px;
}

/* Legacy like_count class - Compact Style */
.ig-reactions .like_count,
.ig-post-actions .like_count,
.post_control .like_count {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 16px;
background: #f5f5f5;
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
color: #555;
}

.ig-reactions .like_count:hover,
.ig-post-actions .like_count:hover,
.post_control .like_count:hover {
background: #e8e8e8;
transform: scale(1.02);
}

.ig-reactions .like_icon,
.ig-post-actions .like_icon,
.post_control .like_icon {
width: 14px;
height: 14px;
}

/* Comment toggle compact */
.ig-comment-toggle {
padding: 4px 10px;
font-size: 12px;
}

.ig-comment-toggle i {
font-size: 13px;
}

/* Legacy Comment Zone Fix - Modern Style */
.add_comment_zone {
display: flex !important;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #fff;
border-top: 1px solid #efefef;
}

.add_comment_zone .avatar_reply_div {
padding: 0 !important;
display: flex;
align-items: center;
}

.add_comment_zone .avatar_reply {
width: 24px !important;
height: 24px !important;
border-radius: 50%;
object-fit: cover;
border: 1px solid #efefef;
}

.add_comment_zone .reply_post,
.add_comment_zone .news_input_c {
flex: 1;
padding: 0 !important;
border: none !important;
background: transparent !important;
border-radius: 0 !important;
display: inline-flex !important;
width: auto !important;
}

.add_comment_zone .news_reply_form {
display: flex;
align-items: center;
background: #f5f5f5;
border: none;
border-radius: 18px;
overflow: hidden;
width: 100%;
transition: background 0.2s ease;
}

.add_comment_zone .news_reply_form:focus-within {
background: #efefef;
}

.add_comment_zone .add_comment,
.add_comment_zone .full_input2 {
flex: 1;
border: none !important;
outline: none;
font-size: 13px;
padding: 6px 12px !important;
background: transparent !important;
border-radius: 0 !important;
line-height: 1.4;
}

.add_comment_zone .add_comment::placeholder,
.add_comment_zone .full_input2::placeholder {
color: #8e8e8e;
font-size: 13px;
}

/* Dark Mode */
.dark .ig-reaction-btn {
background: #363636;
}

.dark .ig-reaction-btn:hover {
background: #404040;
}

.dark .ig-reaction-count {
color: #f5f5f5;
}

/* Mobile */
@media (max-width: 768px) {
.ig-reaction-buttons {
gap: 4px;
}

.ig-reaction-btn {
padding: 6px 10px;
gap: 4px;
}

.ig-reaction-icon {
width: 16px;
height: 16px;
}

.ig-reaction-count {
font-size: 12px;
}
}
/* Avatar News Input */
.avatar_news_input {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #f0f0f0;
transition: border-color 0.2s ease;
}

.avatar_news_input:hover {
border-color: #0095f6;
}

/* Alt Noktali Border */
.alt-noktali {
border-bottom: none;
padding-bottom: 0;
}

/* Pad20 Container */
.pad20.alt-noktali {
background: #fff;
border-radius: 12px;
margin: 12px 15px;
padding: 16px;
border: 1px solid #dbdbdb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Dark Mode Support */
.dark .ig-post-card {
background: #1e1e1e;
border-color: #363636;
}

.dark .ig-post-header {
border-bottom-color: #363636;
}

.dark .ig-username {
color: #f5f5f5;
}

.dark .ig-post-time {
color: #a8a8a8;
}

.dark .ig-post-menu-btn {
color: #f5f5f5;
}

.dark .ig-post-menu-btn:hover {
background: #363636;
}

.dark .ig-post-dropdown {
background: #2a2a2a;
border-color: #363636;
}

.dark .ig-dropdown-item {
color: #f5f5f5;
}

.dark .ig-dropdown-item:hover {
background: #363636;
}

.dark .ig-post-content {
color: #f5f5f5;
}

.dark .ig-post-actions {
border-top-color: #363636;
}

.dark .ig-reactions .like_btn,
.dark .ig-reactions .like_item {
background: #363636;
}

.dark .ig-reactions .like_count {
color: #f5f5f5;
}

.dark .ig-comment-toggle {
background: #363636;
color: #f5f5f5;
}

.dark .ig-comment-toggle:hover {
background: #404040;
}

.dark .ig-comment-input {
background: #262626;
border-top-color: #363636;
}

.dark .ig-comment-form {
background: #1e1e1e;
border-color: #363636;
}

.dark .ig-input {
color: #f5f5f5;
}

.dark .ig-comments-wrapper {
background: #262626;
}

.dark .pad20.alt-noktali {
background: #1e1e1e;
border-color: #363636;
}

.dark .news_input_c {
background: #1e1e1e;
border-color: #363636;
}

.dark .news_input_c .full_textarea {
color: #f5f5f5;
}

.dark .main_post_item {
background: #363636;
color: #f5f5f5;
}

.dark .main_post_item:hover {
background: #404040;
}

/* Mobile Responsive */
@media (max-width: 768px) {
.ig-post-header {
padding: 12px 14px;
}


.ig-username {
font-size: 13px;
}

.ig-post-time {
font-size: 11px;
}

.ig-post-content {
padding: 14px;
font-size: 14px;
}

.ig-post-actions {
padding: 10px 14px;
}

.ig-reactions .like_btn,
.ig-reactions .like_item {
width: 32px;
height: 32px;
font-size: 14px;
}

.ig-comment-input {
padding: 10px 14px;
}

.ig-comment-avatar {
width: 28px;
height: 28px;
}

.ig-send-btn {
width: 32px;
height: 32px;
}

.pad20.alt-noktali {
margin: 8px 10px;
padding: 14px;
border-radius: 12px;
}

.main_post_item {
width: 36px;
height: 36px;
}

.main_post_item i {
font-size: 16px;
}
}

/* Video with Text Overlay - Sevgi Duvarı */
.ig-video-with-text {
position: relative;
width: 100%;
}

.ig-video-with-text .post_video {
width: 100%;
border-radius: 0;
}

.ig-video-with-text video {
width: 100%;
display: block;
}

.ig-video-text-overlay {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
padding: 15px 20px;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: #fff;
font-size: 15px;
font-weight: 500;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
z-index: 10;
word-wrap: break-word;
max-height: 100px;
overflow-y: auto;
}
.story-section {
background: #fff;
border-radius: 12px;
margin: 10px 15px;
padding: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
border: 1px solid #efefef;
overflow: hidden;
}

.story-carousel-wrapper {
position: relative;
overflow: hidden;
width: 100%;
}

.story-carousel {
display: flex;
gap: 10px;
padding: 4px 0;
width: max-content;
}

/* 5+ video için marquee animasyonu */
.story-carousel.marquee {
animation: marqueeScroll 20s linear infinite;
}

.story-carousel.marquee:hover {
animation-play-state: paused;
}

@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

/* Carousel Dots */
.story-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #f5f5f5;
}

.story-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #dbdbdb;
cursor: pointer;
transition: all 0.3s ease;
}

.story-dot.active {
background: #ee583f;
width: 16px;
border-radius: 3px;
}

/* Story Card */
.story-card {
flex: 0 0 70px;
width: 70px;
cursor: pointer;
text-align: center;
transition: transform 0.2s ease, opacity 0.2s ease;
position: relative;
}

.story-card:hover {
transform: scale(1.05);
}

/* Ä°zlenmiÅŸ story */
.story-card.viewed {
opacity: 0.55;
}

.story-card.viewed:hover {
opacity: 0.75;
}

.story-card-inner {
position: relative;
width: 58px;
height: 58px;
border-radius: 50%;
overflow: visible;
background: none !important;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}

/* Avatar Ring */
.story-avatar-ring {
position: relative;
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
z-index: 5;
}

/* Dönen kesikli çerçeve */
.story-avatar-ring::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
width: auto;
height: auto;
border-radius: 50%;
border: 2px dashed #ee583f;
z-index: -1;
box-sizing: border-box;
animation: rotate-border 10s linear infinite;
}

@keyframes rotate-border {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Avatar resmi */
.story-avatar-ring img {
position: relative;
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
z-index: 1;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* İzlenmiş - Çerçeve gri */
.story-card.viewed .story-avatar-ring::before {
border-color: #dbdbdb;
animation: none;
}

/* View Badge */
.story-view-badge {
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.7);
z-index: 10;
cursor: pointer;
color: #fff;
padding: 3px 8px;
border-radius: 12px;
font-size: 9px;
display: flex;
align-items: center;
gap: 3px;
transition: background 0.3s ease;
}

.story-view-badge:hover {
background: rgba(0,0,0,0.9);
}

/* Video Count Badge - Birden fazla video varsa */
.story-count-badge {
position: absolute;
top: 5px;
left: 5px;
padding: 3px 8px;
background: rgba(37, 211, 102, 0.9);
border-radius: 10px;
color: #fff;
font-size: 10px;
font-weight: 600;
z-index: 15;
display: flex;
align-items: center;
gap: 3px;
}

/* Delete Button */
.story-delete-btn {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
cursor: pointer;
z-index: 15;
transition: all 0.2s ease;
opacity: 0;
}

.story-card:hover .story-delete-btn {
opacity: 0; /* gizle - ... menü ile değiştirildi */
}

.story-delete-btn:hover {
background: #e74c3c;
transform: scale(1.1);
}

/* User Info Container */
.story-user-info {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 3px;
padding: 0 2px;
}

.story-username {
display: block;
font-size: 9px;
color: #262626;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 65px;
}

.story-userrank {
display: block;
font-size: 7px;
color: #8e8e8e;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 65px;
margin-top: 0px;
}

/* Story 3-nokta menü */
.story-dots-menu {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 16px;
border-radius: 8px;
background: rgba(0,0,0,0.06);
color: #888;
font-size: 11px;
cursor: pointer;
z-index: 20;
margin-top: 1px;
}
.story-dots-dropdown {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 30;
min-width: 110px;
overflow: hidden;
}
.story-dots-dropdown.show {
display: block;
}
.story-dots-item {
padding: 8px 12px;
font-size: 11px;
color: #333;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.story-dots-item:hover {
background: #f5f5f5;
}
.story-dots-item.delete-item {
color: #e74c3c;
}
.story-dots-item.delete-item:hover {
background: #fde8e8;
}

/* Short video section daraltma */
.story-section {
margin-bottom: 2px !important;
padding: 4px 0 !important;
}
.story-carousel-wrapper {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.story-carousel {
gap: 2px !important;
padding: 0 !important;
justify-content: center !important;
}
.story-user-info {
margin-top: 2px !important;
padding: 0 !important;
}

/* Empty Story State */
.story-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 30px 20px;
color: #8e8e8e;
text-align: center;
}

.story-empty i {
font-size: 32px;
margin-bottom: 10px;
opacity: 0.5;
}

.story-empty span {
font-size: 13px;
}

/* Create Story Card */
.story-create .create-inner {
background: linear-gradient(180deg, #f0f0f0 0%, #d4d4d4 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}

.story-logo {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.story-create-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: #0095f6;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 2px 8px rgba(0,149,246,0.4);
transition: transform 0.2s ease, background 0.2s ease;
}

.story-create:hover .story-create-btn {
transform: scale(1.1);
background: #0077cc;
}

.avatar_top_mod {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.avatar_top_mod img {
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
object-fit: cover !important;
}
.avatar_top_name {
display: flex !important;
align-items: center !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 0 4px !important;
}




::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.25);
}

.topic_modern { background:transparent !important; padding:4px 12px !important; display:flex !important; justify-content:center !important; }
.topic_modern_card { max-width:480px; width:100%; background:rgba(99,102,241,0.08); border:1px solid rgba(99,102,241,0.15); border-radius:12px; padding:8px 12px; display:flex; align-items:center; gap:10px; }
.topic_modern_icon_wrap { width:26px; height:26px; min-width:26px; border-radius:8px; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; box-shadow:0 2px 6px rgba(99,102,241,0.3); }
.topic_modern_content { flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; overflow:hidden; }
.topic_modern_label { font-size:11px; font-weight:700; color:#312e81; white-space:nowrap; }
.topic_modern_text { font-size:11px; color:#4338ca; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topic_modern_close { width:20px; height:20px; min-width:20px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; color:rgba(0,0,0,0.25); font-size:9px; transition:all 0.15s; }
.topic_modern_close:hover { background:rgba(0,0,0,0.08); color:rgba(0,0,0,0.6); }
.chat_message {animation: logDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}
.chat_tmessage {animation: logDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}
.bubble {animation: logDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}
.syslog-new {
display: flex !important;
align-items: center;
gap: 2px;
padding: 3px 15px 4px 6px !important;
margin: 5px 4px !important;
border-radius: 6px !important;
font-size: 7px !important;
line-height: 1.5 !important;
border: none !important;
background: #ffffff !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
position: relative !important;
max-width: calc(100% - 24px) !important;
width: fit-content !important;
overflow: hidden !important;
table-layout: auto !important;
box-sizing: border-box !important;
animation: logDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes logDrop {
0% {
opacity: 0;
transform: translateX(-40px) scale(0.95);
}
60% {
opacity: 1;
transform: translateX(6px) scale(1.02);
}
80% {
transform: translateX(-2px) scale(1);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
/* Left bracket */
.syslog-new::before {
content: '';
position: absolute;
left: 0px;
top: 3px;
bottom: 4px;
border: 3px solid #b0b0b0;
border-right: none;
border-radius: 5px 0 0 7px;
pointer-events: none;
}
/* Right bracket */
.syslog-new::after {
content: '';
position: absolute;
right: -1px;
border: 2px solid #b0b0b0;
border-radius: 0 8px 8px 0;
}
.syslog-icon-box {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
min-width: 18px;
flex-shrink: 0;
border-radius: 0;
font-size: 12px;
color: #777;
background: none;
}
.syslog-text {
flex: 1;
font-size: 12px;
line-height: 1.5;
word-break: break-word;
color: #555;
min-width: 0;
text-decoration: none; /* Genel alt çizgiyi kaldırır */
}

/* Eğer metin içindeki linklerde (a etiketi) hala çizgi varsa: */
.syslog-text span {
text-decoration: none !important;
}
.syslog-text .sysname {
font-weight: 700;
cursor: pointer;
color: #333;
}
.syslog-text .sysname:hover {
text-decoration: underline;
}
.syslog_system .syslog-icon-box {
background: none;
color: #777;
}
.syslog_system .syslog-text{
color: #555;
}

/* Lite theme */
.Lite .syslog-new { background: #ffffff !important; }
.Lite .syslog-text { color: #555; }
.Lite .syslog-icon-box { color: #777; }

/* Dark theme override */
.dark .syslog-new {
background: rgba(255,255,255,0.06) !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}
.dark .syslog-new::before,
.dark .syslog-new::after {
border-color: rgba(255,255,255,0.2);
}
.dark .syslog-icon-box { color: #aaa; }
.dark .syslog-text { color: #ccc; }
.dark .syslog-text .sysname { color: #eee; }

/* Mobile responsive - no overflow */
@media screen and (max-width: 768px) {
.syslog-new {
margin: 4px 6px !important;
padding: 4px 10px 4px 4px !important;
font-size: 12px !important;
gap: 4px;
max-width: calc(100% - 12px) !important;
}
.syslog-new::before {
left: -1px;
top: 5px;
bottom: 5px;
border-width: 2px;
border-radius: 8px 0 0 8px;
}
.syslog-new::after {
right: -1px;
top: 5px;
bottom: 5px;
border-width: 2px;
border-radius: 0 8px 8px 0;
}
.syslog-icon-box {
width: 20px;
height: 20px;
min-width: 20px;
font-size: 14px;
}
.syslog-text {
font-size: 12px;
}
}
@media screen and (max-width: 400px) {
.syslog-new {
margin: 3px 4px !important;
padding: 2px 7px 1px 2px !important;
font-size: 11px !important;
gap: 6px;
max-width: calc(100% - 8px) !important;
}
.syslog-text {
font-size: 11px;
}
}

.tdusername {
font-weight: bold;
font-size: 15px;
text-shadow: 0.5px 0px 0px rgba(0,0,0,0.2);
}
.fsize14 { font-size: 14px !important; }
.fsize15 { font-size: 15px !important; }
.fsize16 { font-size: 16px !important; }
.ct_header{font-size:15px;font-weight:700;color:#333;padding:0 0 12px 0;border-bottom:2px solid #6366f1;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.ct_header i{color:#6366f1;font-size:17px}
.ct_preview{background:#fff;border-radius:12px;padding:16px 18px;margin-bottom:16px;border:2px solid #e5e7eb;box-shadow:0 2px 8px rgba(99,102,241,0.08)}
.ct_label{font-size:11px;color:#6366f1;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.6px;font-weight:700;display:flex;align-items:center;gap:5px}
.ct_label i{font-size:12px}
#preview_text{margin:0;line-height:1.6;transition:all 0.2s;}
.ct_section{margin-bottom:16px}
.ct_card{border:2px solid #e5e7eb;border-radius:12px;padding:14px;background:#fafafa;transition:border-color 0.2s}
.ct_card:hover{border-color:#c7d2fe}
.ct_colors{margin-top:8px}
.ct_fsize{display:flex;align-items:center;gap:10px;margin-top:8px;justify-content:center}
.ct_fsize_btn{width:30px;height:30px;border-radius:8px;border:1.5px solid #e5e7eb;background:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6366f1;font-weight:700;transition:all 0.15s}
.ct_fsize_btn:hover{background:#6366f1;color:#fff;border-color:#6366f1}
.ct_fsize_btn:active{transform:scale(0.95)}
.ct_fsize_val{font-size:14px;font-weight:700;color:#333;min-width:44px;text-align:center;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;padding:4px 10px}
.ct_style_grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ct_style_opt{padding:8px 16px;border-radius:10px;border:2px solid #e5e7eb;background:#fff;cursor:pointer;font-size:12px;color:#555;transition:all 0.15s;text-align:center;font-weight:500}
.ct_style_opt:hover{border-color:#6366f1;color:#6366f1;background:#f0f0ff}
.ct_style_opt.ct_sel{background:#6366f1;color:#fff;border-color:#6366f1;box-shadow:0 2px 8px rgba(99,102,241,0.25)}
.ct_reset_btn{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:7px 16px;border-radius:10px;border:2px solid #ef4444;background:transparent;color:#ef4444;font-size:11px;cursor:pointer;font-weight:700;transition:all 0.15s;letter-spacing:0.3px}
.ct_reset_btn:hover{background:#ef4444;color:#fff}
.ct_reset_btn:active{transform:scale(0.97)}
.topdjwraper {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9;
    margin-left: auto;
    margin-right: auto;
    top: 5px;
    display: block;
    width: 260px;
    border-radius: 10px;
    display: none;
    background-size: 500% 500%;
    animation: gradient 10s 
    cubic-bezier(0.25, 0.1, 0.15, 1.22) infinite;
    background: #e0e0e0;
}
.topdjcontrol::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75px;
    width: 50px;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    animation: shine 2.5s infinite;
    z-index: 0;
}
@keyframes shine {
  0% { left: -75px; }
  100% { left: 120%; }
}
.topdjcontrol {
position: relative;
    overflow: hidden;
    display: table;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    padding: 0px 3px;
    background: url(../../default_images/bordox.gif) no-repeat right center;
    background-size: 185px 108px;
    z-index: 1;
}
.tdavatarwrap {
    display: table-cell;
    vertical-align: middle;
    width: 46px;
    height: 46px;
    position: relative;
    overflow: visible;
}
.tdavatarwrap .dj-avatar-inner {
    position: relative;
    width: 36px;
    height: 36px;
    margin: 3px;
}
.tdavatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: block;
    position: relative;
    z-index: 3;
    border: 2px solid #ff4d4d;
    box-shadow: 0 0 8px rgba(255,77,77,0.5);
}
.tdusername_wrap {
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tdcancel {
    display: table-cell;
    vertical-align: middle;
    width: 30px;
    font-size: 16px;
    text-align: center;
}
.tdcount {
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 7px;
    float: right;
    background: slategray;
    color: #fff !important;
    font-family: 'Orbitron', monospace;
    position: relative;
    top: -1px;
}
.tdcount i {
    color: #38bdf8 !important;
    margin-right: 3px;
    font-size: 8px;
}
#topdj_saat {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #fff !important;
    text-shadow: 0 0 8px rgba(56,189,248,0.6);
}

/* DJ Pulse Ring Animation */
.dj-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    margin-left: -18px;
    border-radius: 50%;
    border: 2px solid rgba(255,77,77,0.7);
    animation: djPulse 1.8s ease-out infinite;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
    will-change: transform, opacity;
}
.dj-pulse-ring-2 {
    animation-delay: 0.9s;
}
@keyframes djPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.65); opacity: 0; }
}

/* DJ Microphone Badge */
.dj-mic-badge {
    position: absolute;
    bottom: 0px;
    right: -3px;
    width: 15px;
    height: 15px;
    background: #ff1a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    animation: micBlink 1s ease-in-out infinite;
}
.dj-mic-badge i {
    font-size: 8px;
    color: #fff;
}
@keyframes micBlink {
    0%, 100% { background: #ff1a1a; box-shadow: 0 0 4px rgba(255,26,26,0.6); }
    50% { background: #ff6666; box-shadow: 0 0 12px rgba(255,26,26,1), 0 0 20px rgba(255,77,77,0.5); }
}

/* DJ Floating Musical Notes */
.dj-note {
    position: absolute;
    font-size: 12px;
    color: #ff4d4d;
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(255,77,77,0.5);
}
.dj-note-1 {
    top: -2px; left: 2px;
    animation: noteFloat1 3s ease-in-out infinite;
}
.dj-note-2 {
    top: 5px; right: -8px;
    animation: noteFloat2 3.5s ease-in-out infinite 0.5s;
}
.dj-note-3 {
    bottom: 2px; left: -4px;
    animation: noteFloat3 4s ease-in-out infinite 1s;
}
.dj-note-4 {
    bottom: -2px; right: -2px;
    animation: noteFloat4 3.2s ease-in-out infinite 1.5s;
}
@keyframes noteFloat1 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
    15% { opacity: 1; }
    80% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(-14px, -22px) scale(1.1) rotate(-30deg); }
}
@keyframes noteFloat2 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
    15% { opacity: 1; }
    80% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(16px, -20px) scale(1.1) rotate(25deg); }
}
@keyframes noteFloat3 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
    15% { opacity: 1; }
    80% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(-18px, -18px) scale(1) rotate(-20deg); }
}
@keyframes noteFloat4 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
    15% { opacity: 1; }
    80% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(12px, -24px) scale(1.1) rotate(35deg); }
}
#grad_color{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
}
#grad_color > ul{
  list-style:none;
  padding:0;
  margin:0;
}
.default_flash_select{
  width:160px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:14px;
  cursor:pointer;
  user-select:none;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
0 10px 24px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
  transition: transform .14s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:1;
}
.default_flash_select:active{
  transform: translateY(0px) scale(.99);
}
.default_flash_select.is_selected{
  border-color: rgba(120,200,255,.55);
  box-shadow:
0 16px 34px rgba(0,0,0,.30),
0 0 0 3px rgba(120,200,255,.18),
inset 0 1px 0 rgba(255,255,255,.10);
}
.default_flash_select .bccheck{
  position:absolute;
  top:8px;
  right:8px;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:12px;
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
}
.df_selected_badge{
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
}
@media (max-width: 520px){
  .default_flash_select{
width: calc(50vw - 20px);
min-width: 140px;
  }
}
@media (max-width: 360px){
  .default_flash_select{
width: 100%;
  }
}
@keyframes ytFlyUpBody{
	0%   { opacity:0; transform: translate3d(0, 22px, 0) scale(.85) rotate(0deg); }
	12%  { opacity:1; }
	70%  { opacity:1; }
	100% { opacity:0; transform: translate3d(var(--dx), calc(-1 * var(--dy)), 0) scale(var(--sc)) rotate(var(--rot)); }
}
[class^="defaultflash"]{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.05;
  position: relative;
  will-change: background-position, filter, transform, opacity;
}
.defaultflash1{
  color: transparent;
  background: linear-gradient(90deg,#6d5bff,#00d4ff,#00ffa8,#ffe600,#ff3d81,#6d5bff);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: df_sweep 1.6s linear infinite;
  filter: drop-shadow(0 0 10px rgba(0,212,255,.20));
}
@keyframes df_sweep{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}
.defaultflash2{
  color: transparent;
  background: linear-gradient(120deg,#ff2a2a,#ff7a00,#ffe600,#ffffff,#ffe600,#ff7a00,#ff2a2a);
  background-size: 320% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_lava 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,122,0,.18));
}
@keyframes df_lava{
  0%{ background-position: 0% 50%; transform: translateY(0); }
  50%{ background-position: 100% 50%; transform: translateY(-.5px); }
  100%{ background-position: 0% 50%; transform: translateY(0); }
}
.defaultflash3{
  color: transparent;
  background: linear-gradient(90deg,#e8fbff,#8ee6ff,#3aa7ff,#e8fbff);
  background-size: 220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_ice 1.8s linear infinite;
  text-shadow: 0 0 18px rgba(142,230,255,.35);
}
@keyframes df_ice{
  0%{ background-position: 0% 50%; filter: drop-shadow(0 0 6px rgba(142,230,255,.18)); }
  50%{ background-position: 100% 50%; filter: drop-shadow(0 0 12px rgba(142,230,255,.28)); }
  100%{ background-position: 0% 50%; filter: drop-shadow(0 0 6px rgba(142,230,255,.18)); }
}
.defaultflash4{
  color: transparent;
  background:
linear-gradient(90deg,#f7f7f7,#cfcfcf,#ffffff,#bdbdbd,#f7f7f7);
  background-size: 260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_metal 1.9s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.12));
}
.defaultflash4:after{
  content:"";
  position:absolute;
  inset:-2px 0 -2px 0;
  background: linear-gradient(180deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 75%);
  transform: translateY(-140%);
  animation: df_scan 1.6s ease-in-out infinite;
  pointer-events:none;
  opacity:.8;
}
@keyframes df_metal{
  to{ background-position: 200% 50%; }
}
@keyframes df_scan{
  0%{ transform: translateY(-140%); opacity:.0; }
  30%{ opacity:.9; }
  60%{ opacity:.6; }
  100%{ transform: translateY(140%); opacity:0; }
}
.defaultflash5{
  color: rgba(0,0,0,0);
  -webkit-text-stroke: 1px rgba(0,0,0,.70);
  text-shadow: 0 0 8px rgba(41,98,255,.25), 0 0 18px rgba(41,98,255,.18);
  background: linear-gradient(90deg,#2962ff,#7c4dff,#00d4ff);
  background-size: 200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_flick 1.1s infinite alternate, df_shift 2.6s linear infinite;
}
@keyframes df_flick{
  0%{ opacity:.65; filter: drop-shadow(0 0 6px rgba(41,98,255,.18)); }
  100%{ opacity:1; filter: drop-shadow(0 0 12px rgba(41,98,255,.28)); }
}
@keyframes df_shift{
  to{ background-position: 200% 50%; }
}
.defaultflash6{
  color: transparent;
  background: linear-gradient(90deg,#ff004c,#ff6a00,#ffe600,#ff6a00,#ff004c);
  background-size: 280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_fire 1.4s linear infinite;
  text-shadow: 0 0 14px rgba(255,106,0,.22);
}
@keyframes df_fire{
  to{ background-position: 280% 50%; }
}
.defaultflash7{
  color:#7bd3ff;
  text-shadow: 0 0 12px rgba(123,211,255,.22);
  animation: df_space 3.2s ease-in-out infinite;
}
@keyframes df_space{
  0%{ letter-spacing:-2px; filter: blur(.35px); opacity:.8; }
  50%{ letter-spacing:2px; filter: blur(0); opacity:1; }
  100%{ letter-spacing:-2px; filter: blur(.35px); opacity:.8; }
}
.defaultflash8{
  color: transparent;
  background: linear-gradient(90deg,#ff2d2d,#01cbff);
  -webkit-background-clip:text;
  background-clip:text;
  position:relative;
}
.defaultflash8:before{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  height:2px;
  width:0%;
  background: linear-gradient(90deg,#01cbff,#ff2d2d);
  border-radius:999px;
  animation: df_underline 2.2s ease-in-out infinite;
}
@keyframes df_underline{
  0%{ width:0%; opacity:.2; }
  45%{ width:100%; opacity:1; }
  100%{ width:0%; opacity:.2; }
}
.defaultflash9{
  color: transparent;
  background:
linear-gradient(90deg,#1d3557 0%, #1d3557 50%, #ff9f1c 50%, #ff3d3d 100%);
  background-size: 220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_split 2.8s ease-in-out infinite;
}
@keyframes df_split{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.defaultflash10{
  color:#ff3b3b;
  text-shadow: 0 0 1px #fff, 0 0 8px rgba(255,59,59,.25), 0 0 18px rgba(255,59,59,.18);
  animation: df_pulse 1.9s ease-in-out infinite;
}
@keyframes df_pulse{
  0%{ filter: blur(.15px); opacity:.75; transform: translateY(0); }
  50%{ filter: blur(0); opacity:1; transform: translateY(-.4px); }
  100%{ filter: blur(.15px); opacity:.75; transform: translateY(0); }
}
.defaultflash11{
  color: transparent;
  background: linear-gradient(90deg,#141414,#ffffff,#141414);
  background-size: 200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_wipe 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.12));
}
.defaultflash11:before{
  content:"";
  position:absolute;
  inset:-2px -6px;
  background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));
  transform: translateX(-120%) skewX(-20deg);
  animation: df_glint 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes df_wipe{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes df_glint{
  0%{ transform: translateX(-120%) skewX(-20deg); opacity:0; }
  35%{ opacity:1; }
  60%{ opacity:.3; }
  100%{ transform: translateX(120%) skewX(-20deg); opacity:0; }
}
.defaultflash12{
  color: transparent;
  background: linear-gradient(90deg,#9c27ff,#00e5ff,#9c27ff);
  background-size: 220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  transform-style: preserve-3d;
  animation: df_flip 2.8s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes df_flip{
  0%{ transform: rotateX(-55deg) translateZ(-12px); opacity:.65; background-position:0% 50%; }
  50%{ transform: rotateX(0deg) translateZ(0); opacity:1; background-position:100% 50%; }
  100%{ transform: rotateX(55deg) translateZ(-12px); opacity:.65; background-position:0% 50%; }
}
.defaultflash13{
  color: transparent;
  background: linear-gradient(90deg,#b8741a,#ffd38a,#fff7d6,#ffd38a,#b8741a);
  background-size: 260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_gold 3.6s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255,211,138,.18);
}
@keyframes df_gold{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.defaultflash14{
  color: transparent;
  background: linear-gradient(90deg,#00ffa8,#00d4ff,#6d5bff,#ff3d81,#00ffa8);
  background-size: 420% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_aurora 6.8s linear infinite;
  filter: drop-shadow(0 0 10px rgba(0,255,168,.10));
}
@keyframes df_aurora{
  to{ background-position: 420% 50%; }
}
.defaultflash15{
  color: transparent;
  background: linear-gradient(90deg,#ff0037,#ff6a00,#ffffff,#ff6a00,#ff0037);
  background-size: 240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation: df_impact 2.4s ease-in-out infinite, df_track 3.2s ease-in-out infinite;
  text-shadow: 0 0 14px rgba(255,0,55,.12);
}
@keyframes df_impact{
  0%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transform: translateY(0); background-position:0% 50%; }
  50%{ filter: drop-shadow(0 10px 10px rgba(0,0,0,.18)); transform: translateY(-.6px); background-position:100% 50%; }
  100%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transform: translateY(0); background-position:0% 50%; }
}
@keyframes df_track{
  0%{ letter-spacing: .2px; }
  50%{ letter-spacing: 2px; }
  100%{ letter-spacing: .2px; }
}
.kisisel_arkaplan_icerik{
  width: 428px;
  margin: 10px;
  height: 400px;
  overflow: auto;
}
.kisisel_arkaplan_aktif_olan{
	border: 3px rgb(3, 131, 250) solid!important;
}
.kisisel_arkaplan_modal_open .kisisel_arkaplan_tab_content {
  max-height: 28.125rem;
  min-height: 28.125rem;
  overflow-y: auto;
}
.kisisel_arkaplan_active{
  color: #eaedf2;
  background: #007bff;
}
.kisisel_arkaplan_inside_wrapper {
  padding: 1rem 2rem 1rem 0;
}
.kisisel_arkaplan_padding {
  padding: 0 !important;
}
.kisisel_arkaplaan{
	height: calc(100% - 48px)!important
}
.kisisel_arkaplaan ul{
	width: 100%;
	margin: 0;
	padding: 0;	
}
.kisisel_arkaplaan li{
  float: left;
  list-style-type: none;
  width: 46%;
  margin: 1.33%;
  height: 120px;
  position: relative;
}
.kisisel_arkaplan_aktif_olan{
	border: 3px rgb(3, 131, 250) solid!important;
}
.kisisel_arkaplan_modal_open .kisisel_arkaplan_tab_content {
  max-height: 28.125rem;
  min-height: 28.125rem;
  overflow-y: auto;
}
.kisisel_arkaplan_active{
  color: #eaedf2;
  background: #007bff;
}
.kisisel_arkaplan_inside_wrapper {
  padding: 1rem 2rem 1rem 0;
}
.kisisel_arkaplan_padding {
  padding: 0 !important;
}
.kisisel_arkaplaan{
	height: calc(100% - 48px)!important
}
.kisisel_arkaplaan ul{
	width: 100%;
	margin: 0;
	padding: 0;	
}
.kisisel_arkaplaan li{
  float: left;
  list-style-type: none;
  width: 46%;
  margin: 1.33%;
  height: 120px;
  position: relative;
}
.kisisel_arkaplaan img{
	width: 100%;
	height: 120px;
	border-radius: 5px;
	border: 3px #ffffff solid;
}
.kisisel_arkaplaan h1 { 
	position: absolute;
	top: 64px;
	width: 100%;
	text-align: center;
	font-size: 12px;
	background: #08a393;
	color: #fff;
}
.kisisel_arkaplaan span{
  z-index: 9999;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 36px!important;
  border-radius: 60px;
  background: rgba(179, 180, 180, 0.514);
  position: absolute;
  margin-left: 60px;
  margin-top: 20px;
}
@media only screen and (max-width:480px) {
.kisisel_arkaplaan li{
  float: left;
  list-style-type: none;
  width: 33%;
  margin: 1.33%;
  height: 120px;
  position: relative;
}
}
@media screen and (max-width:400px) {
.kisisel_arkaplaan li{
  float: left;
  list-style-type: none;
  width: 33%;
  margin: 1.33%;
  height: 120px;
  position: relative;
}	
}
.chat_walllist .user_modal_menu {
background: none !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
font-size: 0 !important;
}
.chat_walllist .user_modal_menu ul {
width: 100%;
display: flex !important;
background: #fff !important;
border-radius: 10px !important;
border: 1px solid #e0e0e0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.chat_walllist .user_modal_menu ul li:first-child {
border-left: none !important;
}
.chat_walllist .user_modal_menu ul li:last-child {
border-right: none !important;
}
.chat_walllist .user_modal_menu ul li {
flex: 1 !important;
padding: 5px 8px !important;
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
margin: 0 !important;
border: none !important;
border-right: 1px solid #e0e0e0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
cursor: pointer !important;
transition: background 0.2s ease !important;
color: #555 !important;
list-style: none !important;
text-align: center !important;
background: transparent !important;
}
.chat_walllist .user_modal_menu ul li:hover {
background: #f5f5f5 !important;
}
.chat_walllist .user_modal_menu .modal_selected {
font-weight: 700 !important;
background: #f0f0f0 !important;
color: #333 !important;
}
.chat_walllist .user_modal_menu .user-count-badge {
background: #fff !important;
border: 1px solid #ddd !important;
padding: 1px 7px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
min-width: 18px !important;
text-align: center !important;
color: #555 !important;
line-height: 1.4 !important;
}
.dark .chat_walllist .user_modal_menu ul {
background: #1e1e2e !important;
border-color: #333 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.dark .chat_walllist .user_modal_menu ul li {
color: rgba(255,255,255,0.6) !important;
border-right-color: #333 !important;
}
.dark .chat_walllist .user_modal_menu ul li:hover {
background: rgba(255,255,255,0.06) !important;
}
.dark .chat_walllist .user_modal_menu .modal_selected {
background: rgba(255,255,255,0.1) !important;
color: rgba(255,255,255,0.9) !important;
}
.dark .chat_walllist .user_modal_menu .user-count-badge {
background: #2a2a3a !important;
border-color: #444 !important;
color: rgba(255,255,255,0.6) !important;
}
.chat_newslist .user_modal_menu {
background: none !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
font-size: 0 !important;
}
.chat_newslist .user_modal_menu ul {
width: 100%;
display: flex !important;
background: #fff !important;
border-radius: 10px !important;
border: 1px solid #e0e0e0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.chat_newslist .user_modal_menu ul li:first-child {
border-left: none !important;
}
.chat_newslist .user_modal_menu ul li:last-child {
border-right: none !important;
}
.chat_newslist .user_modal_menu ul li {
flex: 1 !important;
padding: 5px 8px !important;
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
margin: 0 !important;
border: none !important;
border-right: 1px solid #e0e0e0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
cursor: pointer !important;
transition: background 0.2s ease !important;
color: #555 !important;
list-style: none !important;
text-align: center !important;
background: transparent !important;
}
.chat_newslist .user_modal_menu ul li:hover {
background: #f5f5f5 !important;
}
.chat_newslist .user_modal_menu .modal_selected {
font-weight: 700 !important;
background: #f0f0f0 !important;
color: #333 !important;
}
.chat_newslist .user_modal_menu .user-count-badge {
background: #fff !important;
border: 1px solid #ddd !important;
padding: 1px 7px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
min-width: 18px !important;
text-align: center !important;
color: #555 !important;
line-height: 1.4 !important;
}
.dark .chat_newslist .user_modal_menu ul {
background: #1e1e2e !important;
border-color: #333 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.dark .chat_newslist .user_modal_menu ul li {
color: rgba(255,255,255,0.6) !important;
border-right-color: #333 !important;
}
.dark .chat_newslist .user_modal_menu ul li:hover {
background: rgba(255,255,255,0.06) !important;
}
.dark .chat_newslist .user_modal_menu .modal_selected {
background: rgba(255,255,255,0.1) !important;
color: rgba(255,255,255,0.9) !important;
}
.dark .chat_newslist .user_modal_menu .user-count-badge {
background: #2a2a3a !important;
border-color: #444 !important;
color: rgba(255,255,255,0.6) !important;
}
.chat_rlist .user_modal_menu {
background: none !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
font-size: 0 !important;
}
.chat_rlist .user_modal_menu ul {
width: 100%;
display: flex !important;
background: #fff !important;
border-radius: 10px !important;
border: 1px solid #e0e0e0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.chat_rlist .user_modal_menu ul li:first-child {
border-left: none !important;
}
.chat_rlist .user_modal_menu ul li:last-child {
border-right: none !important;
}
.chat_rlist .user_modal_menu ul li {
flex: 1 !important;
padding: 5px 8px !important;
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
margin: 0 !important;
border: none !important;
border-right: 1px solid #e0e0e0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
cursor: pointer !important;
transition: background 0.2s ease !important;
color: #555 !important;
list-style: none !important;
text-align: center !important;
background: transparent !important;
}
.chat_rlist .user_modal_menu ul li:hover {
background: #f5f5f5 !important;
}
.chat_rlist .user_modal_menu .modal_selected {
font-weight: 700 !important;
background: #f0f0f0 !important;
color: #333 !important;
}
.chat_rlist .user_modal_menu .user-count-badge {
background: #fff !important;
border: 1px solid #ddd !important;
padding: 1px 7px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
min-width: 18px !important;
text-align: center !important;
color: #555 !important;
line-height: 1.4 !important;
}
.dark .chat_rlist .user_modal_menu ul {
background: #1e1e2e !important;
border-color: #333 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.dark .chat_rlist .user_modal_menu ul li {
color: rgba(255,255,255,0.6) !important;
border-right-color: #333 !important;
}
.dark .chat_rlist .user_modal_menu ul li:hover {
background: rgba(255,255,255,0.06) !important;
}
.dark .chat_rlist .user_modal_menu .modal_selected {
background: rgba(255,255,255,0.1) !important;
color: rgba(255,255,255,0.9) !important;
}
.dark .chat_rlist .user_modal_menu .user-count-badge {
background: #2a2a3a !important;
border-color: #444 !important;
color: rgba(255,255,255,0.6) !important;
}
.sag-panel-close {
bottom: 0;
border-radius: 5px 5px 0 0;
margin-left: -20px;
position: fixed;
padding: 15px 11px;
line-height: 35px;
font-size: 23px;
z-index: 99999;
cursor: pointer;
animation: sagPanelSlideIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes sagPanelSlideIn {
0% { transform: translateY(100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.no_results_found {
padding: 30px 15px;
text-align: center;
font-size: 15px;
border-radius: 10px;
margin: 10px;
border: 1px dashed #555;
animation: fadeIn 0.3s ease;
}
.no_results_found i {
display: block;
font-size: 30px;
margin-bottom: 10px;
color: #e74c3c;
}
.search_bar .full_input {
border-radius: 20px;
padding: 8px 15px;
border: 1px solid #ddd;
transition: all 0.3s;
outline: none;
}
.search_bar .full_input:focus {
border-color: #3498db;
box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.user_tab_content { width: 100%; float: left; }
#container_user .user_modal_menu {
background: none !important;
margin: 0 10px !important;
padding: 0 !important;
font-size: 0 !important;
}
#container_user .user_modal_menu ul {
width: 100%;
display: flex !important;
background: #fff !important;
border-radius: 10px !important;
border: 1px solid #e0e0e0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
#container_user .user_modal_menu ul li:first-child {
border-left: none !important;
}
#container_user .user_modal_menu ul li:last-child {
border-right: none !important;
}
#container_user .user_modal_menu ul li {
flex: 1 !important;
padding: 5px 8px !important;
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
margin: 0 !important;
border: none !important;
border-right: 1px solid #e0e0e0 !important;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
cursor: pointer !important;
transition: background 0.2s ease !important;
color: #555 !important;
list-style: none !important;
text-align: center !important;
background: transparent !important;
}
#container_user .user_modal_menu ul li:hover {
background: #f5f5f5 !important;
}
#container_user .user_modal_menu .modal_selected {
font-weight: 700 !important;
background: #f0f0f0 !important;
color: #333 !important;
}
#container_user .user_modal_menu .user-count-badge {
background: #fff !important;
border: 1px solid #ddd !important;
padding: 1px 7px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
min-width: 18px !important;
text-align: center !important;
color: #555 !important;
line-height: 1.4 !important;
}
.un_modal_menu {
background: none !important;
margin: 0 !important;
padding: 8px 10px !important;
}
.un_modal_menu ul {
width: 100%;
display: flex !important;
background: #fff !important;
border-radius: 10px !important;
border: 1px solid #e0e0e0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
list-style: none !important;
}
.un_modal_menu ul li {
flex: 1 !important;
padding: 8px 6px !important;
border-radius: 0 !important;
font-size: 12px !important;
font-weight: 500 !important;
margin: 0 !important;
border: none !important;
border-right: 1px solid #e0e0e0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: background 0.2s ease !important;
color: #555 !important;
list-style: none !important;
text-align: center !important;
background: transparent !important;
white-space: nowrap !important;
gap: 3px !important;
}
.un_modal_menu ul li:last-child {
border-right: none !important;
}
.un_modal_menu ul li:hover {
background: #f5f5f5 !important;
}
.un_modal_menu .modal_selected {
font-weight: 700 !important;
background: #f0f0f0 !important;
color: #333 !important;
}
.un_modal_menu .un_tab_clear {
flex: 0 0 34px !important;
padding: 8px 0 !important;
font-size: 13px !important;
opacity: 0.45 !important;
border-left: 1px solid #e0e0e0 !important;
border-right: none !important;
min-width: 34px !important;
max-width: 34px !important;
}
.un_modal_menu .un_tab_clear:hover {
opacity: 1 !important;
background: #f5f5f5 !important;
}
.dark .un_modal_menu ul {
background: #1e1e2e !important;
border-color: #333 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.dark .un_modal_menu ul li {
color: rgba(255,255,255,0.6) !important;
border-right-color: #333 !important;
}
.dark .un_modal_menu ul li:hover {
background: rgba(255,255,255,0.06) !important;
}
.dark .un_modal_menu .modal_selected {
background: rgba(255,255,255,0.1) !important;
color: rgba(255,255,255,0.9) !important;
}
.dark .un_modal_menu .un_tab_clear {
border-left-color: #333 !important;
color: rgba(255,255,255,0.6) !important;
}
.dark .un_modal_menu .un_tab_clear:hover {
background: rgba(255,255,255,0.06) !important;
}
#unified_notify_menu .un_tab_content {
max-height: 55vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#unified_notify_menu .notify_item,
#unified_notify_menu .un_tab_content > .btable,
#unified_notify_menu .un_tab_content > div:not(.empty_zone) {
border-bottom: 1px solid rgba(128,128,128,0.12) !important;
}
#unified_notify_menu .notify_item:last-child,
#unified_notify_menu .un_tab_content > .btable:last-child,
#unified_notify_menu .un_tab_content > div:not(.empty_zone):last-child {
border-bottom: none !important;
}
.un_modal_menu .un_tab .un_tab_badge {
font-size: 10px !important;
padding: 0 4px !important;
border-radius: 4px !important;
min-width: 14px !important;
height: 16px !important;
line-height: 16px !important;
text-align: center !important;
margin-left: 2px !important;
flex-shrink: 0 !important;
}
.un_modal_menu ul li.un_tab {
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
}
#unified_notify_menu .float_content {
margin: 0 10px 10px 10px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 10px !important;
max-height: 65vh !important; overflow-y: auto !important; overflow-x: hidden !important;
}
.dark #unified_notify_menu .float_content {
border-color: #333 !important;
}
.room_modal_modal{background:#fff;color:#333;border-radius:12px;overflow:hidden;max-height:80vh;overflow-y:auto;font-family:inherit}
.room_modal_header{position:relative;height:120px;background-size:cover;background-position:center;background-color:#e8e0d8}
.room_modal_back{position:absolute;top:12px;left:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:18px;text-shadow:0 1px 4px rgba(0,0,0,0.4);z-index:2}
.room_modal_close_btn{position:absolute;top:12px;right:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:20px;text-shadow:0 1px 4px rgba(0,0,0,0.4);z-index:2;background:rgba(0,0,0,0.3);border:none;border-radius:50%;transition:background 0.2s}
.room_modal_close_btn:hover{background:rgba(0,0,0,0.5)}
.room_modal_icon_wrap{width:64px;height:64px;border-radius:50%;overflow:hidden;border:3px solid #fff;margin:-36px auto 0 auto;position:relative;z-index:3;background:#f0f0f0;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.room_modal_icon_wrap img{width:100%;height:100%;object-fit:cover}
.room_modal_body{padding:8px 20px 16px;text-align:center}
.room_modal_name{font-size:18px;font-weight:700;color:#222;margin-top:4px}
.room_modal_online{font-size:13px;color:#888;margin-top:2px;margin-bottom:12px}
.room_modal_owner_section{position:relative;border:2px dashed #ccc;border-radius:10px;padding:14px 8px 8px;margin-bottom:12px}
.room_modal_owner_label{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#fff;padding:2px 12px;font-size:11px;color:#666;border:1px solid #ddd;border-radius:20px;white-space:nowrap}
.room_modal_owner_box{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:nowrap}
.room_modal_owner_card{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;padding:6px 10px}
.room_modal_owner_card:hover{opacity:0.8}
.room_modal_owner_card+.room_modal_owner_card{border-left:1px solid #ddd}
.room_modal_owner_card img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#eee;flex-shrink:0}
.room_modal_owner_info{text-align:left;min-width:0}
.room_modal_owner_name{font-size:12px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room_modal_verify{color:#2196F3;font-size:10px}
.room_modal_owner_rank{font-size:10px;color:#888;margin-top:0}
.room_modal_owner_empty{padding:8px 0;font-size:12px;color:#aaa;font-style:italic}
.room_modal_access{display:flex;align-items:center;gap:8px;font-size:14px;color:#555;margin-bottom:16px;justify-content:center}
.room_modal_access i{font-size:16px;color:#888}
.room_modal_btn{width:100%;padding:11px 0;border-radius:10px;text-align:center;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:0.5px;margin-bottom:6px;box-sizing:border-box;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:6px}
.room_modal_btn_join{background:#2979FF;color:#fff;border:2px solid #2979FF}
.room_modal_btn_join:hover{background:#1565C0;border-color:#1565C0}
.room_modal_btn_current{background:#2979FF;color:#fff;border:2px solid #2979FF;cursor:default}
.room_modal_btn_staff{background:#fff;color:#2979FF;border:2px solid #2979FF}
.room_modal_btn_staff:hover{background:#f0f6ff}
.room_modal_hidden{display:none}
.room_modal_staff_grid{padding:10px 0;display:flex;flex-direction:column;gap:8px}
.room_modal_staff_row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f8f8f8;border-radius:10px;cursor:pointer}
.room_modal_staff_row:hover{background:#f0f0f0}
.room_modal_staff_row img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#eee}
.room_modal_staff_info{text-align:left}
.room_modal_staff_empty{padding:12px 0;font-size:13px;color:#aaa;font-style:italic;text-align:center}
.room_modal_pass_area{margin-bottom:10px}
.room_modal_input{width:100%;padding:12px 14px;border-radius:10px;border:2px solid #ddd;background:#fff;color:#333;font-size:14px;outline:none;box-sizing:border-box;text-align:center}
.room_modal_input:focus{border-color:#2979FF}
@media(max-width:480px){
.room_modal_modal{border-radius:0;max-height:100vh}
.room_modal_header{height:100px}
.room_modal_icon_wrap{width:56px;height:56px;margin-top:-30px}
.room_modal_body{padding:6px 12px 14px}
.room_modal_name{font-size:16px}
.room_modal_online{font-size:12px;margin-bottom:10px}
.room_modal_owner_section{padding:16px 6px 8px}
.room_modal_owner_card{padding:6px 8px}
.room_modal_owner_card img{width:40px;height:40px}
.room_modal_owner_name{font-size:12px}
.room_modal_owner_rank{font-size:9px}
.room_modal_access{font-size:12px}
.room_modal_btn{padding:10px 0;font-size:12px}
.room_modal_staff_row{padding:6px 8px}
.room_modal_staff_row img{width:30px;height:30px}
}
.room-list-container {
padding: 8px;
background: #ffffff;
max-height: 70vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}
.room-list-container::-webkit-scrollbar {
width: 6px;
}
.room-list-container::-webkit-scrollbar-track {
background: transparent;
}
.room-list-container::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12);
border-radius: 9999px;
}
:root {
    --room-page-bg: #ffffff;
    --room-card-bg: #ffffff;
    --room-card-hover-bg: #ffffff;
    --room-modal-bg: #ffffff;
    --room-text-primary: #000000;
    --room-text-secondary: rgba(0, 0, 0, 0.60);
    --room-text-muted: rgba(0, 0, 0, 0.45);
    --room-accent-primary: #3b82f6;
    --room-accent-popular: #f59e0b;
    --room-accent-locked: #ef4444;
    --room-accent-success: #10b981;
    --room-border-default: rgba(0, 0, 0, 0.12);
    --room-border-active: #3b82f6;
    --room-radius-sm: 6px;
    --room-radius-md: 12px;
    --room-radius-lg: 16px;
    --room-radius-full: 9999px;
    --room-spacing-xs: 4px;
    --room-spacing-sm: 8px;
    --room-spacing-md: 16px;
    --room-spacing-lg: 24px;
    --room-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    --room-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
    --room-shadow-glow: 0 0 15px rgba(59, 130, 246, 0.25);
}

/* Room List Container - Kompakt */
.room-list-container {
    padding: 8px;
    background: var(--room-page-bg);
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--room-border-default) transparent;
}

.room-list-container::-webkit-scrollbar {
    width: 6px;
}

.room-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.room-list-container::-webkit-scrollbar-thumb {
    background: var(--room-border-default);
    border-radius: var(--room-radius-full);
}

/* Room Card - Daha Kompakt */
.sy_chat_oda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--room-card-bg);
    border-radius: 6px;
    padding: 15px 10px;
    margin-bottom: 4px;
    border: 1px solid var(--room-border-default);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.sy_chat_oda::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.sy_chat_oda:hover {
    transform: translateY(-2px);
    background: var(--room-card-hover-bg);
    box-shadow: var(--room-shadow-hover);
    border-color: var(--room-border-active);
}

.sy_chat_oda:hover::before {
    opacity: 1;
}

/* Current/Selected Room */
.sy_chat_oda.room_selected {
    /* border-color: var(--room-accent-primary); */
    /* background: rgb(5 32 76); */
    box-shadow: var(--room-shadow-glow);
}

.sy_chat_oda.room_selected::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--room-accent-primary);
    border-radius: var(--room-radius-sm) 0 0 var(--room-radius-sm);
}

/* Room Selection Item - Main Flex Container */
.room-selection-item {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Room Content - Daha Kompakt */
.oda_content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* Room Icon - Daha Kompakt */
.oda_icon {
    flex-shrink: 0;
    position: relative;
}

.oda_icon img {
    width: 45px;
    height: 45px;
    border-radius: 11px;
    object-fit: cover;
    border: 1px solid var(--room-border-default);
    transition: border-color 0.2s ease;
}

.sy_chat_oda:hover .oda_icon img {
    border-color: var(--room-accent-primary);
}

.sy_chat_oda.room_selected .oda_icon img {
    border-color: var(--room-accent-primary);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* Room Info - Kompakt */
.oda_info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.oda_name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--room-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.oda_count {
    font-size: 0.75rem;
    color: var(--room-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.oda_count::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--room-accent-success);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.8); }
}

.oda_access {
    font-size: 0.65rem;
    color: var(--room-text-muted);
}

/* Current Room Indicator - Kompakt */
.oda_current {
    font-size: 0.6rem;
    color: var(--room-accent-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 1px;
}

/* Room Actions - Badges - Kompakt */
.oda_actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Popular Badge - Kompakt */
.oda_popular {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--room-accent-popular);
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--room-radius-full);
    white-space: nowrap;
}

.oda_popular i {
    font-size: 0.55rem;
}

/* Lock Badge - Kompakt */
.oda_lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(239, 68, 68, 0.15);
    color: var(--room-accent-locked);
    border-radius: 4px;
    font-size: 0.7rem;
}

/* Arrow Button - Kompakt */
.room-selection-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 6px;
}

.room-selection-button-icon {
    width: 40px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: var(--room-text-muted);
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.sy_chat_oda:hover .room-selection-button-icon {
    background: var(--room-accent-primary);
    color: #fff;
    transform: translateX(3px);
}

/* Room List Header */
.room-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--room-spacing-md);
    background: linear-gradient(135deg, var(--room-card-bg) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-bottom: 1px solid var(--room-border-default);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px);
}

.room-list-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--room-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.room-list-header h3 i {
    color: var(--room-accent-primary);
}

.room-count-badge {
    background: var(--room-accent-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--room-radius-full);
}

/* Empty State */
.room-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--room-spacing-lg);
    color: var(--room-text-muted);
    text-align: center;
}

.room-list-empty i {
    font-size: 2.5rem;
    margin-bottom: var(--room-spacing-md);
    opacity: 0.5;
}

.room-list-empty span {
    font-size: 0.9rem;
}

/* Responsive - Mobil için daha kompakt */
@media (max-width: 480px) {
    .sy_chat_oda {
        padding: 6px 10px;
    }
    
    .oda_icon img {
        width: 32px;
        height: 32px;
    }
    
    .oda_name {
        font-size: 0.8rem;
    }
    
    .oda_count {
        font-size: 0.7rem;
    }
    
    .oda_popular {
        font-size: 0.55rem;
        padding: 2px 5px;
    }
    
    .room-selection-button-icon {
        width: 20px;
        height: 20px;
    }
    
    .oda_content {
        gap: 8px;
    }
}

/* Animation for new rooms */
@keyframes room-slide-in {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sy_chat_oda {
    animation: room-slide-in 0.3s ease forwards;
}

.sy_chat_oda:nth-child(1) { animation-delay: 0.05s; }
.sy_chat_oda:nth-child(2) { animation-delay: 0.1s; }
.sy_chat_oda:nth-child(3) { animation-delay: 0.15s; }
.sy_chat_oda:nth-child(4) { animation-delay: 0.2s; }
.sy_chat_oda:nth-child(5) { animation-delay: 0.25s; }
.sy_chat_oda:nth-child(6) { animation-delay: 0.3s; }
.pp_oda {
font-size: 10px;
padding: 3px 6px;
border-radius: 2px;
text-align: center;
position: absolute;
top: 5px;
right: 57px; 
white-space: nowrap;
z-index: 10;
animation: populeroda linear 1000ms infinite;
}
@keyframes populeroda {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); }
50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(255, 71, 87, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
}


.mobile-messages-buttons-wrapper,
.mobile-messages-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none !important;
}
.mobile-messages-buttons-wrapper {
  overflow-y: auto !important;
  bottom: 48px;
}
.mobile-messages-right-buttons {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 34px;
color: #555;
pointer-events: all;
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.04) !important;
z-index: 2;
background: #ffffff;
border-radius: 10px;
}
.mobile-messages-right-button {
  position: relative;
  height: 36px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background 0.2s ease;
}
.mobile-messages-right-button:hover {
  background: rgba(0, 0, 0, 0.05);
}
.dark .mobile-messages-right-button:hover {
  background: hsla(0, 0%, 100%, 0.07);
}
.dark .mobile-messages-right-button {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.07);
}
.mobile-messages-right-button:last-child {
  border-bottom: none;
}
.mobile-messages-right-button .icon {
  display: block;
  width: 35px;
  height: 16px;
  font-size: 12px;
  line-height: 25px;
  text-align: center;
  margin-top: 3px;
}
.mobile-messages-right-button .icon.expanded-icon {
  height: 36px;
  line-height: 36px;
}
.dark .mobile-messages-right-buttons {
  background: #151f2b;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px hsla(0, 0%, 100%, 0.1) !important;
}
.menu-badge {
  position: absolute;
  bottom: 2px;
  font-size: 6px;
  padding: 0px 3px;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  border-radius: 4px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
  font-weight: 500;
}
.menu-badge.important {
  background: #e53935;
  color: #fff;
}
.head_notify, .menu_notify, .notification {
position: absolute;
}
.notification {
top: 3px;
left: 5px;
padding: 1px 3px;
border-radius: 5px;
font-size: 9px;
font-weight: 700;
}
.ust-bar-buttons {
display: none !important;
}
@media screen and (min-width: 769px) {
.ust-bar-buttons {
display: table-cell !important;
vertical-align: middle;
width: inherit;
text-align: -webkit-right;
}
.ust-bar-btn {
display: table-cell;
vertical-align: middle;
height: 45px;
padding: 0 12px;
border-left: 2px solid rgba(255,255,255,0.1);
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: #b0b4c8;
transition: color 0.2s, background 0.2s;
white-space: nowrap;
}
.ust-bar-btn:hover {
color: #fff;
background: rgba(255,255,255,0.06);
}
.ust-bar-btn i {
margin-right: 5px;
font-size: 12px;
}
.chat_head_user {
width: 275px !important;
border-left: 1px solid rgba(255,255,255,0.08) !important;
}
}
@media screen and (max-width: 768px) {
.chat_head_user {
width: inherit !important;
border-left: none !important;
}
}
@media screen and (min-width: 769px) {
#chat_head .head_option {
width: 52px;
}
#chat_head #main_mob_menu {
padding-left: 8px;
}
}
.modal_onay_wrapper {
padding: 40px 20px;
text-align: center;
font-family: 'Inter', sans-serif;
max-width: 500px; /* Popup'ın çok yayılmasını engeller */
margin: 0 auto;
}

.onay_status_icon {
width: 120px;
height: 120px;
margin: 0 auto 25px auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 40px;
position: relative;
transition: all 0.3s ease;
}

.bg_waiting { background: linear-gradient(135deg, #fff9c4 0%, #ffecb3 100%); color: #ffa000; }
.bg_rejected { background: linear-gradient(135deg, #ffecee 0%, #ffcdd2 100%); color: #d32f2f; }

.onay_title {
font-size: 24px;
font-weight: 800;
margin-bottom: 8px;
color: #1e293b;
}

.onay_subtitle {
font-size: 15px;
font-weight: 500;
margin-bottom: 20px;
color: #64748b;
}

.onay_description {
padding: 20px;
border-radius: 16px;
font-size: 14px;
line-height: 1.6;
border: 1px dashed #e2e8f0;
margin-bottom: 30px;
background: #f8fafc;
color: #475569;
}

.onay_btn {
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
background: #1e293b;
color: #fff;
}

.onay_btn:hover { 
background: #0f172a; 
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
@media (max-width: 600px) {
.modal_onay_wrapper {
padding: 30px 15px;
}
.onay_status_icon {
width: 100px;
height: 100px;
border-radius: 30px;
margin-bottom: 20px;
}
.onay_status_icon img {
width: 55px !important;
}
.onay_title {
font-size: 20px;
}
.onay_subtitle {
font-size: 14px;
}
.onay_description {
padding: 15px;
font-size: 13px;
}
}
@media (max-width: 400px) {
.onay_status_icon {
width: 80px;
height: 80px;
border-radius: 24px;
}
.onay_status_icon img {
width: 45px !important;
}
.onay_title {
font-size: 18px;
}
.onay_btn {
padding: 12px;
font-size: 14px;
}
}
.onay_notify {
  position: absolute;
  top: 3px;
  left: 18px;
  min-width: 12px;
  height: 18px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  display: none;
}
.onay_input{text-align:center;line-height:38px;font-size:15px;z-index:1;position:relative}
.user_item_icon.icsex{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user_item_icon.icsex .sex-svg{
  width: 18px;
  height: 18px;
  display: block;
}
#main_emoticon,#private_emoticon {
padding: 5px;
overflow: hidden;
}
#private_emoticon {
height: 260px !important;
}
#private_emoticon .emo_content {
height: calc(260px - 38px);
overflow-y: auto;
}
.emo_content_priv {
width: 100%;
height: 100%;
overflow: hidden;
overflow-y: auto;
padding: 5px;
}
#main_emoticon {
height: 320px;
}
#main_emoticon .emo_content {
height: calc(320px - 38px);
overflow-y: auto;
}
#main_emoticon .emo_head .emo_menu:first-child,
#private_emoticon .emo_head .emo_menu:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-left: 1px solid #ddd;
}
#main_emoticon .emo_head .emo_menu:last-child,
#private_emoticon .emo_head .emo_menu:last-child  {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.emo_menu {
padding-top: 8px;
padding-bottom: 8px;
font-size: .8rem;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
}
#main_emoticon,#private_emoticon .bselected {
font-weight: 700;
}
.yetkili_footer_bar {
width: 100%;
height: 50px;
overflow: hidden;
display: flex;
align-items: center;
position: relative;
border-top: 1px solid rgba(255,255,255,0.1);
}
.yf_label {
font-size: 13px;
font-weight: 800;
color: #fff;
padding: 0 20px;
flex-shrink: 0;
white-space: nowrap;
background: #1a1a1a; 
z-index: 10;
height: 100%;
display: flex;
align-items: center;
box-shadow: 15px 0 20px rgba(0,0,0,0.5);
}
.yf_marquee_container {
overflow: hidden;
flex-grow: 1;
display: flex;
align-items: center;
}
.yf_marquee_track {
display: flex;
align-items: center;
white-space: nowrap;
animation: yetkiliScroll 40s linear infinite;
}
.yf_sep {
width: 2px;
height: 24px;
background: rgba(255,255,255,0.3);
flex-shrink: 0;
margin: 0 5px;
}
.yf_item {
display: flex;
align-items: center;
gap: 10px;
padding: 0 15px;
flex-shrink: 0;
}
.yf_avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); }
.yf_name { font-size: 13px; font-weight: 700; }
.yf_rank { font-size: 10px; color: rgba(255,255,255,0.5); }
.yf_stars { display: flex; }
.yf_star { font-size: 10px; }
@keyframes yetkiliScroll {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.yetkili_footer_bar:hover .yf_marquee_track { animation-play-state: paused; }
.rcall-notification{
position: fixed;
z-index: 999999;
min-width: 220px;
max-width: 320px;
padding: 10px 12px;
border-radius: 12px;
backdrop-filter: blur(10px);
background: rgba(20, 20, 25, .88);
color: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.12);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
opacity: 0;
transform: translateY(8px);
transition: all .2s ease;
user-select: none;
  }
.rcall-notification.show{
opacity: 1;
transform: translateY(0);
  }
.rcall-notification .rcall-left{
display:flex;
flex-direction: column;
gap: 2px;
min-width: 0;
  }
.rcall-notification .rcall-title{
font-weight: 800;
font-size: 13px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
  }
.rcall-notification .rcall-sub{
font-size: 12px;
opacity: .85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
  }
.rcall-notification .rcall-btn{
border: 0;
outline: 0;
padding: 7px 10px;
border-radius: 10px;
font-weight: 800;
font-size: 12px;
background: rgba(88,101,242,.95);
color: #fff;
cursor: pointer;
  }
.rcall-notification .rcall-close{
border: 0;
outline: 0;
width: 28px;
height: 28px;
border-radius: 10px;
background: rgba(255,255,255,.10);
color: #fff;
cursor: pointer;
display:flex;
align-items:center;
justify-content:center;
font-weight: 900;
}
.rcall_davet { border: none;padding: 8px;border-radius: 12px;font-size: 20px;transition: 0.3s;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);position: fixed;right: 2px;}
#room_call {
width: 320px;
height: 410px;
padding: 25px 15px 20px 15px;
position: absolute;
left: 0;
bottom: 85px;
z-index: 202;
display: none;
text-align: initial;
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .1);
border-radius: .25rem;
overflow: hidden;
resize: vertical;
	animation: popupShow 0.5s ease;
}
#room_call_iframe {
padding: 0;
margin: 0;
border: 0;
display: block;
width: 100%;
height: 100%;
}
.room_call_button {
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
}
.room_call_body {
background: none;
color: #333;
}
.room_call_baslik {
height: 40px;
margin-bottom: 5px;
border-bottom: 1px solid rgb(0 0 0 / 4%);
}
.room_call_room {
font-size: 16px;
font-weight: 700;
}
.room_call_icon {
font-size: 20px;
vertical-align: middle;
}
.room_call_name {
margin-right: 2px;	
vertical-align: middle;
}
#room_call_streams {
height: 248px;
overflow-y: auto;
}
.room_call .kick_user {
cursor: pointer;
height: 20px;
width: 20px;
margin-right: 5px;
}
.room_call .ulist_item {
position: relative;
display: table;
}
.room_call .ulist_name {
padding: 0 10px;
}
.room_call_kick_button {
padding: 6px 12px;
font-size: 12px;
border-radius: 5px;
}
.vcall_kick {
height: 20px;
width: 20px;
margin-right: 5px;
}
.room_call .ulist_avatar img {
width: 36px;
height: 36px;
}
.room_call_modal {
padding: 20px 10px 10px 10px;
margin: 5px;
position: fixed;
z-index: 9999;
border-radius: 5px;
display: none;
}
#main_input_room_call{
  width: auto;
  position: absolute;
  bottom: 0;
  left: auto;
  right: 65px; 
  z-index: 100;
  padding: 5px;
  display: none;
  border-radius: 5px;
  max-width: calc(100% - 10px);
  margin: 5px;
}
#player_menu { z-index: 9999 !important; }
#player_menu.float_menu { width: 320px !important; max-width: 95vw !important; }
#player_menu_content {
background: #0c0c14 !important;
border: 1px solid rgba(139, 92, 246, 0.15) !important;
border-radius: 16px !important;
overflow: hidden !important;
padding: 0 !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

.player_wrap { padding: 0 !important; background: transparent !important; }
#current_player { background: #fff !important; border: 1px solid #ddd !important; border-radius: 12px !important; padding: 0 !important; overflow: hidden; }

.rp_header {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
padding: 14px 16px 10px !important;
border-bottom: 1px solid #ddd !important;
display: block !important;
}
.rp_header_btns {
position: absolute;
top: 10px;
right: 10px;
display: flex;
gap: 6px;
z-index: 2;
}
.rp_minimize, .rp_close {
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.2);
border: none; border-radius: 50%;
color: #fff; font-size: 11px; cursor: pointer;
transition: all 0.2s;
}
.rp_minimize:hover { background: rgba(255,255,255,0.35); }
.rp_close:hover { background: rgba(239,68,68,0.6); }
.rp_header_top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.rp_visualizer {
display: flex;
align-items: flex-end;
gap: 3px;
height: 22px;
flex-shrink: 0;
}
.rp_bar {
width: 4px; border-radius: 2px; background: #fff;
animation: rp_wave 1s ease-in-out infinite;
}
.rp_bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.rp_bar:nth-child(2) { height: 70%; animation-delay: 0.15s; }
.rp_bar:nth-child(3) { height: 100%; animation-delay: 0.3s; }
.rp_bar:nth-child(4) { height: 60%; animation-delay: 0.45s; }
.rp_bar:nth-child(5) { height: 80%; animation-delay: 0.6s; }
@keyframes rp_wave {
0%, 100% { transform: scaleY(0.4); }
50% { transform: scaleY(1); }
}
.rp_live_badge {
display: inline-block;
background: #ef4444;
color: #fff;
font-size: 13px;
font-weight: 700;
padding: 4px 14px;
border-radius: 6px;
letter-spacing: 0.5px;
animation: livePulse 2s infinite;
}
@keyframes livePulse { 0%,100% { opacity:1; } 50% { opacity:0.7; } }
/* Song marquee inside header */
.rp_song_prefix {
color: rgba(255,255,255,0.7);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
margin-right: 6px;
}
.rp_song_marquee {
overflow: hidden !important;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 6px;
padding: 5px 10px;
background: rgba(255,255,255,0.1);
white-space: nowrap;
}
.rp_song_scroll, #sy_calansarki {
display: inline-block !important;
white-space: nowrap !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 500 !important;
animation: rp_marquee 10s linear infinite !important;
}
@keyframes rp_marquee {
0% { transform: translateX(80%); }
100% { transform: translateX(-100%); }
}

/* DJ Section */
.rp_dj_section {
padding: 10px 16px;
border-bottom: 1px solid #eee;
background: #fff;
}
.rp_dj_row {
display: flex;
align-items: center;
justify-content: space-between;
}
.rp_dj_left {
display: flex;
align-items: center;
gap: 8px;
}
.rp_dj_mic {
color: #667eea;
font-size: 16px;
}
.rp_dj_label {
font-size: 13px;
color: #333;
font-weight: 700;
}
.rp_dj_name_box {
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 6px;
padding: 4px 12px;
font-size: 13px;
font-weight: 700;
color: #333;
}
.sy_djismi2 {
font-size: 13px !important;
font-weight: 700 !important;
color: #333 !important;
}
.rp_dj_time_box {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 6px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
color: #16a34a;
display: flex;
align-items: center;
gap: 4px;
}
.rp_radio_user_box {
background: #f0fdf4;
margin-top: 8px;
width: 43px;
height: 26px;
border: 1px solid #bbf7d0;
border-radius: 6px;
padding: 0px 8px;
font-size: 12px;
font-weight: 600;
color: #16a34a;
display: flex;
align-items: center;
gap: 4px;
margin-left: 10px;
}
.rp_dj_time_box i {
font-size: 10px;
}
.rp_radio_user_box i {
font-size: 10px;
}
.rp_dj_right {
display: flex;
align-items: center;
gap: 10px;
}
.rp_dj_time {
font-size: 11px;
color: #888;
font-weight: 500;
}
.rp_radio_user {
font-size: 11px;
color: #888;
font-weight: 500;
}
.rp_listener_box {
display: flex;
align-items: center;
gap: 6px;
background: #f0f4ff;
padding: 5px 12px;
border-radius: 20px;
border: 1px solid #dce3f5;
color: #4f5ebd;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s;
}
.rp_listener_box:hover { background: #e0e7ff; }
.rp_listener_box i { font-size: 11px; }



.rp_controls {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 14px 16px !important;
border-bottom: 1px solid #eee !important;
background: #fff !important;
}
.rp_station_btn {
width: 22px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: #f5f5f5; border: 1px solid #ddd;
border-radius: 10px; color: #666; font-size: 14px;
cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.rp_station_btn:hover { background: #eee; color: #333; }

.splay_btn, #player_actual_status {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
border-radius: 50% !important;
width: 52px !important; height: 52px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
box-shadow: 0 4px 15px rgba(102,126,234,0.35) !important;
transition: transform 0.2s, box-shadow 0.2s !important;
flex-shrink: 0 !important; cursor: pointer !important;
position: relative !important; border: none !important;
}
.splay_btn:hover, #player_actual_status:hover {
transform: scale(1.08) !important;
box-shadow: 0 6px 25px rgba(102,126,234,0.5) !important;
}
#current_play_btn {
font-size: 18px !important; color: #fff !important;
position: relative; z-index: 1;
}

#player_actual_status::before,
#player_actual_status::after {
content: '';
position: absolute;
width: 100%; height: 100%;
border-radius: 50%;
border: 2px solid rgba(102,126,234,0.4);
animation: rp_pulse 2s ease-out infinite;
pointer-events: none;
}
#player_actual_status::after {
animation-delay: 1s;
}
@keyframes rp_pulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(2); opacity: 0; }
}
.rp_station_name { flex: 1; min-width: 0; }
.rp_label {
display: block; color: #999; font-size: 10px;
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
}
#current_station {
color: #333 !important; font-weight: 600 !important;
font-size: 14px !important; display: block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rp_volume {
display: flex !important; align-items: center !important;
gap: 10px !important; padding: 8px 16px 12px !important;
border-bottom: 1px solid #eee !important; background: #fff !important;
}
#sound_display { color: #667eea !important; font-size: 14px !important; flex-shrink: 0; width: auto !important; }
#player_volume, .boom_slider { flex: 1 !important; }
#slider { background: #eee !important; border-radius: 4px !important; height: 4px !important; }
#slider .ui-slider-range { background: linear-gradient(90deg, #667eea, #764ba2) !important; border-radius: 4px !important; }
#slider .ui-slider-handle {
background: #fff !important; border: 2px solid #667eea !important;
border-radius: 50% !important; width: 14px !important; height: 14px !important;
top: -5px !important; cursor: pointer !important; outline: none !important;
}


.rp_actions {
display: flex !important; gap: 8px !important;
padding: 12px 16px !important; background: #fff !important;
}
.rp_btn {
flex: 1; display: flex; align-items: center; justify-content: center;
gap: 6px; padding: 10px 12px; border-radius: 8px;
font-size: 12px; font-weight: 600; border: 1px solid; cursor: pointer;
transition: all 0.2s;
}
.rp_btn_leave { background: #fff; border-color: #e5e5e5; color: #e74c3c; }
.rp_btn_leave:hover { background: #fef2f2; border-color: #fca5a5; }
.rp_btn_request { background: #667eea; border-color: #667eea; color: #fff; }
.rp_btn_request:hover { background: #5a6fd6; }


.radio-sarki-tag.bback, #current_player > .radio-tag { display: none !important; }

.player_volume { display: none !important; }
.cur_play { padding: 0 !important; }
.player_wrap.hpad5 { padding: 0 !important; }
.btable.bborder.vpad10, .tpad15.centered_element { display: none !important; }
#station_menu .ftop_elem {
background: rgba(139,92,246,0.1) !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
@media (max-width: 480px) {
#player_menu.float_menu { width: 95vw !important; left: 2.5vw !important; right: 2.5vw !important; }
.rp_controls { padding: 12px; gap: 10px; }
.splay_btn, #player_actual_status { width: 46px !important; height: 46px !important; }
#current_play_btn { font-size: 16px !important; }
.rp_btn { padding: 8px 10px; font-size: 11px; }
}
.rp_song_marquee_wrap {
display: flex !important;
align-items: center !important;
gap: 0 !important;
border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: 6px !important;
background: rgba(255,255,255,0.1) !important;
overflow: hidden !important;
}
.rp_song_label {
color: rgba(255,255,255,0.85) !important;
font-size: 11px !important;
font-weight: 700 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
padding: 5px 8px 5px 10px !important;
background: rgba(255,255,255,0.12) !important;
border-right: 1px solid rgba(255,255,255,0.2) !important;
}
.rp_song_marquee {
flex: 1 !important;
overflow: hidden !important;
border: none !important;
border-radius: 0 !important;
padding: 5px 10px !important;
background: transparent !important;
white-space: nowrap !important;
min-width: 0 !important;
}
.rp_mini_player {
position: fixed !important;
bottom: 80px !important;
right: 20px !important;
z-index: 9999 !important;
cursor: pointer !important;
}
.rp_mini_inner {
position: relative !important;
width: 56px !important;
height: 56px !important;
}
.rp_mini_circle {
width: 52px !important;
height: 52px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #667eea, #764ba2) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 3 !important;
border: 2px solid #ff4d4d !important;
box-shadow: 0 0 8px rgba(255,77,77,0.5) !important;
}
.rp_mini_circle i {
color: #fff !important;
font-size: 20px !important;
}
.rp_mini_pulse {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 52px !important;
height: 52px !important;
margin-top: -26px !important;
margin-left: -26px !important;
border-radius: 50% !important;
border: 2px solid rgba(255,77,77,0.7) !important;
animation: djPulse 1.8s ease-out infinite !important;
z-index: 1 !important;
pointer-events: none !important;
box-sizing: border-box !important;
}
.rp_mini_pulse2 {
animation-delay: 0.9s !important;
}

@keyframes rp_miniPulse {
0% { width: 52px; height: 52px; margin-top: -26px; margin-left: -26px; opacity: 0.8; }
100% { width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; opacity: 0; }
}
.rp_mini_inner .dj-note {
font-size: 16px !important;
color: #ff4d4d !important;
text-shadow: 0 0 6px rgba(255,77,77,0.6) !important;
}
.dj-pulse-ring {
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
margin-top: -18px;
margin-left: -18px;
border-radius: 50%;
border: 2px solid rgba(255,77,77,0.7);
animation: djPulse 1.8s ease-out infinite;
z-index: 1;
pointer-events: none;
box-sizing: border-box;
will-change: transform, opacity;
}
.dj-pulse-ring-2 {
animation-delay: 0.9s;
}
@keyframes djPulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.65); opacity: 0; }
}
.dj-note {
position: absolute;
font-size: 12px;
color: #ff4d4d;
opacity: 0;
z-index: 4;
pointer-events: none;
text-shadow: 0 0 4px rgba(255,77,77,0.5);
}
.dj-note-1 {
top: -2px; left: 2px;
animation: noteFloat1 3s ease-in-out infinite;
}
.dj-note-2 {
top: 5px; right: -8px;
animation: noteFloat2 3.5s ease-in-out infinite 0.5s;
}
.dj-note-3 {
bottom: 2px; left: -4px;
animation: noteFloat3 4s ease-in-out infinite 1s;
}
.dj-note-4 {
bottom: -2px; right: -2px;
animation: noteFloat4 3.2s ease-in-out infinite 1.5s;
}
@keyframes noteFloat1 {
0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
15% { opacity: 1; }
80% { opacity: 0.6; }
100% { opacity: 0; transform: translate(-14px, -22px) scale(1.1) rotate(-30deg); }
}
@keyframes noteFloat2 {
0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
15% { opacity: 1; }
80% { opacity: 0.6; }
100% { opacity: 0; transform: translate(16px, -20px) scale(1.1) rotate(25deg); }
}
@keyframes noteFloat3 {
0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
15% { opacity: 1; }
80% { opacity: 0.6; }
100% { opacity: 0; transform: translate(-18px, -18px) scale(1) rotate(-20deg); }
}
@keyframes noteFloat4 {
0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
15% { opacity: 1; }
80% { opacity: 0.6; }
100% { opacity: 0; transform: translate(12px, -24px) scale(1.1) rotate(35deg); }
}
@keyframes chat_log {
0% {
transform: translateY(0) scale(1);
}
30% {
transform: translateY(-8px) scaleX(0.98) scaleY(1.05);
}
50% {
transform: translateY(-10px) scaleX(1.02) scaleY(0.95);
}
75% {
transform: translateY(2px) scaleX(1.01) scaleY(0.99);
}
100% {
transform: translateY(0) scale(1);
}
}
.ch_logs {
padding: 2px 4px !important;
margin: 0 !important;
}
.chat_avatar {
width: 30px !important;
padding-top: 4px !important;
position: relative !important;
}
.chat_avatar .chat_rank {
position: absolute !important;
top: 24px !important;
right: -1px !important;
width: 13px !important;
height: 13px !important;
border-radius: 50% !important;
border: 1px solid #fff !important;
background: #fff !important;
z-index: 2 !important;
display: block !important;
margin: 0 !important;
pointer-events: none !important;
box-shadow: 0 0 0 1.5px rgba(0, 188, 212, 0.7) !important;
}
.cavatar.avav {
width: 30px !important;
height: 30px !important;
}
.my_text {
padding: 6px 0 0 4px !important;
}
.my_text .username {
font-size: 12px !important;
}
.mbubble .cname {
display: block !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 0 !important;
margin: 0 0 -1px 0 !important;
line-height: 1.1 !important;
}
.mbubble .cname .username {
cursor: pointer;
}
.bubble {
padding: 1px 6px !important;
border-radius: 5px !important;
line-height: 1.25 !important;
font-size: 13px !important;
}.bubble p, .bubble .bubtext {
margin: 0 !important;
padding: 0 !important;
line-height: 1.25 !important;
}
.chat_message {
padding: 0 !important;
margin: 0 !important;
}
.cdate.sub_chat {
display: inline !important;
font-size: 10px !important;
line-height: 1.25 !important;
padding: 0 !important;
margin: 0 0 0 6px !important;
vertical-align: baseline !important;
}
.emo_chat {
height: 14px;
max-width: 100%;
vertical-align: bottom;
}
#show_chat li {
margin-bottom: 0 !important;
}
.left_item_icon, .left_item_notify, .left_item_text {
display: block;
font-size: 11px;
margin-top: 2px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.left_menu_item {
margin-bottom: 14px;
height: 52px;
border-bottom: 2px solid rgba(0, 0, 0, 0.10);
transition: background 0.2s ease;
}
.left_menu_item:hover {
background: rgba(0, 0, 0, 0.06);
}
.left_menu_icon {
font-size: 20px;
}
.left_item_text {
font-size: 9px;
margin-top: 2px;
opacity: 0.7;
}

.splash-orb-icon {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
}
.sy-bubble {
position: relative;
width: 72px;
height: 64px;
background: linear-gradient(145deg, #7c3aed 0%, #6366f1 50%, #8b5cf6 100%);
border-radius: 20px 20px 20px 6px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 
0 12px 40px rgba(124, 58, 237, 0.5),
0 0 40px rgba(99, 102, 241, 0.3),
inset 0 2px 0 rgba(255,255,255,0.3);
animation: bubbleHeartbeat 1.3s ease-in-out infinite;
}
.sy-bubble::before {
content: '💬';
position: absolute;
top: -8px;
right: -8px;
font-size: 16px;
animation: chatIconPulse 1.3s ease-in-out infinite;
}
.sy-bubble::after {
content: '';
position: absolute;
top: 10px;
left: 14px;
width: 16px;
height: 6px;
background: rgba(255,255,255,0.35);
border-radius: 10px;
transform: rotate(-15deg);
}
.sy-bubble-tail {
position: absolute;
bottom: -10px;
left: 6px;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 8px solid transparent;
border-top: 16px solid #6366f1;
transform: rotate(-8deg);
}
.sy-text {
font-size: 32px;
font-weight: 800;
color: #fff;
font-family: 'Poppins', 'Arial Black', sans-serif;
letter-spacing: 2px;
text-shadow: 
0 3px 10px rgba(0,0,0,0.3),
0 0 20px rgba(255,255,255,0.2);
animation: textHeartbeat 1.3s ease-in-out infinite;
}
@keyframes bubbleHeartbeat {
0%, 100% { transform: scale(1); }
15% { transform: scale(1.12); }
30% { transform: scale(0.96); }
45% { transform: scale(1.08); }
60% { transform: scale(1); }
}
@keyframes textHeartbeat {
0%, 100% { transform: scale(1); }
15% { transform: scale(1.08); }
30% { transform: scale(0.94); }
45% { transform: scale(1.05); }
60% { transform: scale(1); }
}
@keyframes chatIconPulse {
0%, 100% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.2) rotate(-10deg); }
50% { transform: scale(1) rotate(0deg); }
75% { transform: scale(1.15) rotate(10deg); }
}
#sy_splash{position:fixed;inset:0;z-index:999999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;transition:opacity .5s ease,visibility .5s ease;overflow:hidden}
#sy_splash.splash-light{background:#f5f5f5}
#sy_splash.splash-dark{background:#12141c}
#sy_splash .splash-content{display:flex;flex-direction:column;align-items:center;gap:28px;position:relative;z-index:2}
#sy_splash .splash-title{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;opacity:.45;position:absolute;top:10vh;left:50%;transform:translateX(-50%);white-space:nowrap}
.splash-light .splash-title{color:#475569}
.splash-dark .splash-title{color:#8892b0}
.splash-orb-wrap{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center}
.splash-orb-glow{position:absolute;inset:-20px;border-radius:50%;filter:blur(40px);opacity:.3;animation:orbGlow 3s ease-in-out infinite}
.splash-light .splash-orb-glow{background:radial-gradient(circle,#818cf8,#c084fc,transparent 70%)}
.splash-dark .splash-orb-glow{background:radial-gradient(circle,#6366f1,#a855f7,transparent 70%)}
@keyframes orbGlow{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.45;transform:scale(1.15)}}
.splash-orb-ring{position:absolute;inset:0;border-radius:50%}
.splash-orb-ring svg{width:100%;height:100%;animation:orbSpin 4s linear infinite}
.splash-orb-ring:nth-child(3) svg{animation-duration:6s;animation-direction:reverse}
@keyframes orbSpin{to{transform:rotate(360deg)}}
.splash-orb-icon{position:relative;z-index:3;display:flex;align-items:center;justify-content:center}
.splash-light .splash-orb-icon{}
.splash-dark .splash-orb-icon{}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.splash-orb-icon svg{width:26px;height:26px;fill:#fff}
.splash-particles{position:absolute;inset:-30px;pointer-events:none}
.splash-p{position:absolute;width:4px;height:4px;border-radius:50%;opacity:0;animation:pFloat 4s ease-in-out infinite}
.splash-light .splash-p{background:#a78bfa}
.splash-dark .splash-p{background:#818cf8}
.splash-p:nth-child(1){top:10%;left:15%;animation-delay:0s}
.splash-p:nth-child(2){top:5%;right:20%;animation-delay:.7s;width:3px;height:3px}
.splash-p:nth-child(3){bottom:15%;left:10%;animation-delay:1.4s;width:5px;height:5px}
.splash-p:nth-child(4){bottom:10%;right:15%;animation-delay:2.1s}
.splash-p:nth-child(5){top:50%;left:0;animation-delay:.35s;width:3px;height:3px}
.splash-p:nth-child(6){top:50%;right:0;animation-delay:1.05s;width:3px;height:3px}
@keyframes pFloat{0%,100%{opacity:0;transform:translateY(0) scale(.5)}25%{opacity:.8;transform:translateY(-12px) scale(1)}75%{opacity:.4;transform:translateY(-20px) scale(.7)}100%{opacity:0;transform:translateY(-28px) scale(.3)}}
#sy_splash .splash-info{display:flex;flex-direction:column;align-items:center;gap:10px}
#sy_splash .splash-speed-title{font-size:11px;font-weight:500;letter-spacing:.5px;opacity:.5}
.splash-light .splash-speed-title{color:#64748b}
.splash-dark .splash-speed-title{color:#7c8db0}
#sy_splash .splash-speed-badge{font-size:14px;font-weight:700;padding:7px 24px;border-radius:20px;letter-spacing:.5px;transition:all .3s ease}
.splash-speed-badge.s-high{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.2)}
.splash-speed-badge.s-mid{background:rgba(234,179,8,.12);color:#eab308;border:1px solid rgba(234,179,8,.2)}
.splash-speed-badge.s-low{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
#sy_splash .splash-speed-loading{font-size:11px;font-weight:500}
.splash-light .splash-speed-loading{color:#94a3b8}
.splash-dark .splash-speed-loading{color:#5a6380}
#sy_splash .splash-conn-box{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;margin-top:2px}
.splash-light .splash-conn-box{color:#94a3b8}
.splash-dark .splash-conn-box{color:#5a6380}
#sy_splash .splash-conn-box i{font-size:12px}
#sy_splash .splash-conn-box.conn-wifi i{color:#6366f1}
#sy_splash .splash-conn-box.conn-cell i{color:#f59e0b}
#sy_splash .splash-bottom{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);text-align:center}
#sy_splash .splash-brand{font-size:14px;font-weight:700;letter-spacing:.6px;opacity:.75}
#sy_splash .splash-brand-from{font-size:11px;font-weight:500;letter-spacing:1px;opacity:.5;margin-bottom:4px;display:block}
#sy_splash .splash-year{font-size:12px;font-weight:700;letter-spacing:1.5px;opacity:.55;margin-top:6px}
.splash-light .splash-brand,.splash-light .splash-year{color:#475569}
.splash-dark .splash-brand,.splash-dark .splash-year{color:#7c8db0}
#sy_splash.splash-hide{opacity:0;visibility:hidden;pointer-events:none}
.sy-bubble{position:relative;display:flex;align-items:center;justify-content:center;background:transparent;box-shadow:none;animation:none}
.sy-bubble::before{display:none}
.sy-bubble::after{display:none}
.sy-bubble-tail{display:none}
.sy-text{font-size:36px;font-weight:700;color:#6366f1;font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;letter-spacing:1px;text-shadow:0 3px 15px rgba(99,102,241,0.35);animation:textHeartbeat 1.3s ease-in-out infinite}
@keyframes bubbleHeartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(0.96)}45%{transform:scale(1.08)}60%{transform:scale(1)}}
@keyframes textHeartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.08)}30%{transform:scale(0.94)}45%{transform:scale(1.05)}60%{transform:scale(1)}}
@keyframes chatIconPulse{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.2) rotate(-10deg)}50%{transform:scale(1) rotate(0deg)}75%{transform:scale(1.15) rotate(10deg)}}
#sy_splash .splash-wait{font-size:11px;font-weight:500;letter-spacing:.5px;opacity:.4;margin-top:10px;text-align:center}
.splash-light .splash-wait{color:#64748b}
.splash-dark .splash-wait{color:#7c8db0}
.add_room_background {
	position:relative;
}
.room_background_item_wrap {
	display:table;
	border-radius:50px;
	
}
.room_background_item {
	width:40px;
	height:30px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.room_background_menu {
	display:table-cell;
	vertical-align:middle;
	width:147px;
}
.room_background_select {
	-webkit-appearance:none;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	width:100%;
	height:100%;
	cursor:pointer;
}
.room_background_size {
	height:250px;
}
.choose_room_background {
	position:relative;
}
.roombackground {
	background-size:100% 100% !important;
}
.background_chats::before {
	content:'';
	position:absolute;
	left:0;
	width:100%;
	height:100%;
	background:url('../default_images/icons/cat.svg');
	background-repeat:no-repeat;
	background-position:bottom -123px right;
	background-size:600px;
	opacity:1;
	box-shadow:inset 0 0 45px rgb(0,0,0,.271);
}
.user-list-container_ziyaretci {
max-height: 300px; /* Liste boyutu bu yüksekliği geçerse scroll çıkar */
overflow-y: auto;
padding-right: 5px;
border: 1px solid #eee;
border-radius: 12px;
}

/* Scrollbar Tasarımı (Opsiyonel - Daha şık görünüm için) */
.user-list-container_ziyaretci::-webkit-scrollbar {
width: 6px;
}
.user-list-container_ziyaretci::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
.user-card_ziyaretci {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border-radius: 12px;
border: 1px solid #e9ecef;
margin-bottom: 10px; /* Kartlar arası boşluk */
}

.user-info-left_ziyaretci {
display: flex;
align-items: center;
gap: 12px;
}

.badge_ziyaretci {
background-color: #ff4757;
color: white;
font-size: 12px;
font-weight: bold;
padding: 4px 8px;
border-radius: 20px;
min-width: 24px;
text-align: center;
}

.username_ziyaretci {
font-weight: 600;
color: #2f3542;
font-size: 16px;
}

.profile-pic_ziyaretci {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #747d8c;
}
.avatar_bg{position:relative;cursor:zoom-in;overflow:hidden;border-radius:50%}
.avatar_zoom_overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease;border-radius:50%;pointer-events:none}
.avatar_zoom_overlay i{color:#fff;font-size:22px;text-shadow:0 2px 8px rgba(0,0,0,0.5)}
.avatar_bg:hover .avatar_zoom_overlay{opacity:1}
#profileImageViewer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
#profileImageViewer.piv-active{opacity:1}
.piv-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.piv-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:92%;max-height:88%;transform:scale(0.85);transition:transform .3s cubic-bezier(0.34,1.56,0.64,1)}
.piv-active .piv-content{transform:scale(1)}
.piv-img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.08)}
.piv-warning{margin-top:12px;color:rgba(255,255,255,0.5);font-size:11px;letter-spacing:0.3px;display:flex;align-items:center;gap:6px;user-select:none;-webkit-user-select:none}
.piv-warning i{font-size:12px;color:rgba(255,200,50,0.6)}
.piv-close{position:absolute;top:14px;right:18px;z-index:2;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);border-radius:50%;color:#fff;font-size:16px;cursor:pointer;transition:background .2s,transform .2s}
.piv-close:hover{background:rgba(255,255,255,0.25);transform:scale(1.1)}
.dogrulanmis_user {width: 20px;height: 20px;position: absolute;bottom: 5px;right: 73px;z-index: 30;border: 2px solid #fff;border-radius: 50px;}
.profile_alert { margin: 10px 15px; padding: 10px 15px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.profile_alert.warning { background: #fef3c7; color: #92400e; }
.profile_alert.danger { background: #fee2e2; color: #991b1b; }
.list_mood { font-size: 11px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-left: 4px; margin-left: -2px; position: relative; top: 0px; }
.user_item_avatar .acav.genfemale { border: 2px solid #ff99ff !important; }
.user_item_avatar .acav.genmale { border: 2px solid #03add8 !important; }
.bottomcard.card_menu {padding: 0;overflow: hidden;background: #2c2c2e;}
.bottomcard .avitem {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
text-align: left;
font-size: 15px;
font-weight: 500;
color: #e5e5e5;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
border-top: none !important;
transition: background 0.15s ease;
}
.bottomcard .avitem:last-child {
border-bottom: none !important;
}
.bottomcard .avitem:active {
background: rgba(255,255,255,0.08);
}
.bottomcard .avitem i {
font-size: 18px;
padding: 0;
color: #b0b0b0;
flex-shrink: 0;
}
.bottomcard .avitem i.error {
color: #e74c3c;
}
.bottomcard .avitem .error {
color: #e74c3c;
}
.bottomcard .avitem i.success {
color: #4cd964;
}
.bottomcard .avitem i.theme_color {
color: #b0b0b0;
}
.bottomcard .avitem i.default_color {
color: #b0b0b0;
}

/* Override inline styles on menu items */
.bottomcard .avitem[style] {
background: transparent !important;
color: #e5e5e5 !important;
border-color: rgba(255,255,255,0.08) !important;
}

.profile_content {padding: 27px 12px;max-height: 100%;overflow-y: auto;}
.profile_tags { display: flex; flex-direction: column; gap: 8px; }
.profile_tag { display: flex; justify-content: space-between; align-items: center; padding: 7px 13px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 10px; border: 1px solid rgba(0,0,0,0.04); transition: all 0.2s ease; }
.profile_tag:hover { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); transform: translateX(3px); }
.profile_tag .tag_label { color: #64748b; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.profile_tag .tag_value { color: #1e293b; font-size: 13px; font-weight: 500; text-align: right; }
.ptab-dropdown .profile_tab {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 11px 16px !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
border-bottom: 1px solid #f5f5f5 !important;
background: #fff !important;
color: #4b5563 !important;
font-size: 13px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: background 0.12s !important;
white-space: nowrap !important;
min-width: auto !important;
flex-shrink: unset !important;
box-shadow: none !important;
}
.ptab-dropdown .profile_tab:last-child {
border-bottom: none !important;
}
.ptab-dropdown .profile_tab i {
font-size: 15px !important;
width: 20px;
text-align: center;
color: #9ca3af !important;
}
.ptab-dropdown .profile_tab:hover {
background: #f8f9fb !important;
color: #4f46e5 !important;
}
.ptab-dropdown .profile_tab:hover i {
color: #6366f1 !important;
}
.ptab-dropdown .profile_tab.active {
background: #eef2ff !important;
color: #4f46e5 !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.ptab-dropdown .profile_tab.active i {
color: #6366f1 !important;
}
/* Hide old profile_tabs styles */
.profile_tabs {
display: none !important;
}
.profile_tabs {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px !important;
padding: 8px 12px !important;
background: #f8f9fb !important;
border-top: none !important;
border-bottom: none !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.profile_tabs::-webkit-scrollbar {
display: none;
}
.profile_tab {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 7px 12px !important;
min-width: auto !important;
flex-shrink: 0 !important;
border: none !important;
border-radius: 20px !important;
border-bottom: none !important;
border-right: none !important;
background: transparent !important;
color: #6b7280 !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
}
.profile_tab i {
font-size: 12px !important;
line-height: 1 !important;
}
.profile_tab:hover {
color: #4f46e5 !important;
background: rgba(79,70,229,0.06) !important;
border-bottom: none !important;
}
.profile_tab.active {
color: #fff !important;
background: #6366f1 !important;
border-bottom: none !important;
font-weight: 600 !important;
box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.profile_tab.active i {
color: #fff !important;
}
.profile_tab:last-child {
border-right: none !important;
}
.ptab-more-dd {
position: fixed !important;
z-index: 99999 !important;
top: auto !important;
bottom: auto !important;
right: auto !important;
}
.ptab-more-dd {
position: absolute !important;
z-index: 9999 !important;
}
.ptab-more-dd {
top: 42px !important;
bottom: auto !important;
right: 0 !important;
box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
}
.ptab-more-dd .profile_tab {
padding: 7px 12px !important;
font-size: 12px !important;
}
.ptab-more-dd .profile_tab i {
font-size: 12px !important;
}
.ptab-more-dd {
top: auto !important;
bottom: 42px !important;
right: 0 !important;
box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important;
}
.ptab-more-dd .profile_tab:last-child {
border-bottom: none !important;
}
.ptab-more-dd .profile_tab i {
font-size: 14px !important;
width: 18px;
text-align: center;
color: #9ca3af !important;
}
.ptab-more-dd .profile_tab:hover {
background: #f8f9fb !important;
color: #4f46e5 !important;
}
.ptab-more-dd .profile_tab:hover i {
color: #6366f1 !important;
}
.ptab-more-dd .profile_tab.active {
background: #eef2ff !important;
color: #4f46e5 !important;
font-weight: 600 !important;
}
.ptab-more-dd .profile_tab.active i {
color: #6366f1 !important;
}
.ptab-more-dd .profile_tab {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 14px !important;
border: none !important;
border-radius: 0 !important;
border-bottom: 1px solid #f5f5f5 !important;
background: #fff !important;
color: #4b5563 !important;
font-size: 13px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: background 0.12s !important;
white-space: nowrap !important;
min-width: auto !important;
flex-direction: row !important;
box-shadow: none !important;
flex-shrink: unset !important;
}
.ptab-more-wrap {
position: relative !important;
}
.ptab-more-wrap {
position: static !important;
}
.ptab-more-wrap.has-active .ptab-more-btn {
background: #6366f1;
}
.ptab-more-wrap.has-active .ptab-more-btn i {
color: #fff;
}
.profile_tab {
border-right: 1px solid #e5e7eb !important;
}
.profile_tab:last-child {
border-right: none !important;
}
.profile_tabs {
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
padding: 0 !important;
border-top: 1px solid #f0f0f0 !important;
border-bottom: 1px solid #f0f0f0 !important;
background: #fff !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.profile_tabs::-webkit-scrollbar {
display: none;
}
.profile_tab {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
padding: 10px 6px !important;
min-width: 56px !important;
flex-shrink: 0 !important;
border: none !important;
border-radius: 0 !important;
border-bottom: 2px solid transparent !important;
background: transparent !important;
color: #9ca3af !important;
font-size: 10px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
white-space: nowrap !important;
}
.profile_tab i {
font-size: 16px !important;
line-height: 1 !important;
}
.profile_tab:hover {
color: #6366f1 !important;
background: rgba(99,102,241,0.04) !important;
border-bottom-color: transparent !important;
}
.profile_tab.active {
color: #6366f1 !important;
background: transparent !important;
border-bottom: 2px solid #6366f1 !important;
font-weight: 600 !important;
}
.profile_tab.active i {
color: #6366f1 !important;
}
.profile_tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-top: 1px solid #f3f4f6; background: #f9fafb; }
.profile_tab { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; font-size: 10px; cursor: pointer; }
.profile_tab:hover, .profile_tab.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
#profile_panel.ptab-overflow-open,
#profile_panel.ptab-overflow-open #profile_panel_content {
overflow: visible !important;
}
.ptab-more-dd {
position: absolute !important;
top: 42px !important;
right: 0 !important;
bottom: auto !important;
z-index: 9999 !important;
}
.ptab-row {
position: relative;
z-index: 10;
}
.ptab-row {
position: relative;
}
.ptab-row {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-top: 1px solid #f0f0f0;
background: #fff;
}
.ptab-row > .profile_tab {
flex: 1;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 4px !important;
border: none !important;
border-radius: 8px !important;
background: #f3f4f6 !important;
color: #4b5563 !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
white-space: nowrap !important;
min-width: 0 !important;
flex-shrink: 1 !important;
flex-direction: row !important;
gap: 0 !important;
box-shadow: none !important;
border-bottom: none !important;
border-right: none !important;
}
.ptab-row > .profile_tab:hover {
background: #e5e7eb !important;
color: #374151 !important;
}
.ptab-row > .profile_tab.active {
background: #6366f1 !important;
color: #fff !important;
font-weight: 600 !important;
box-shadow: none !important;
}
/* More button */
.ptab-more-wrap {
position: relative;
flex-shrink: 0;
}
.ptab-more-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #f3f4f6;
cursor: pointer;
transition: all 0.15s ease;
}
.ptab-more-btn:hover {
background: #e5e7eb;
}
.ptab-more-btn i {
font-size: 12px;
color: #6b7280;
transition: transform 0.2s ease;
}
.ptab-more-wrap.open .ptab-more-btn i {
transform: rotate(180deg);
}
.ptab-more-wrap.open .ptab-more-btn {
background: #6366f1;
}
.ptab-more-wrap.open .ptab-more-btn i {
color: #fff;
}
/* Dropdown */
.ptab-more-dd {
position: absolute;
top: 42px;
right: 0;
min-width: 170px;
background: #fff;
border-radius: 10px;
box-shadow: 0 6px 24px rgba(0,0,0,0.12);
border: 1px solid #e5e7eb;
z-index: 100;
overflow: hidden;
animation: ptabDDFade 0.12s ease-out;
}
.profile_action_btn_small i { border-radius: .5em; width: 48px; color: rgba(0, 0, 0, .31); height: 20px; background: hsla(0, 0%, 100%, .06); line-height: 20px; text-align: center; font-size: 18px; padding: 0; margin: 0; }
.profile_action_btn_small { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 10px 6px !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; background: #fff !important; color: #6b7280 !important; font-size: 10px !important; font-weight: 500 !important; cursor: pointer !important; }
.profile_action_btn_small i { font-size: 18px !important; }
button.profile_action_btn_small { border: 1px solid #e5e7eb !important; outline: none !important; }
.takip-active-btn {
background: #3b82f6 !important;
border-color: #3b82f6 !important;
color: #fff !important;
}
.takip-active-btn i {
color: #fff !important;
}
.takip-count-badge {
font-size: 12px !important;
font-weight: 600 !important;
opacity: 0.7;
margin-left: 2px !important;
}
.takip-active-btn .takip-count-badge {
color: #fff !important;
opacity: 0.85;
}
.takip-et-btn {
justify-content: center !important;
}
.profile_action_btn { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 10px !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; background: #fff !important; color: #374151a3 !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s !important; }
.profile_actions { padding: 10px !important; border-top: 1px solid #f3f4f6 !important; display: block !important; }
.profile_actions_row { display: flex !important; gap: 8px !important; margin-bottom: 8px !important; }
.profile_actions_row:last-child { margin-bottom: 0 !important; }
#profile_panel .modal_back,
#profile_panel .large_modal_out {
display: none !important;
}
#profile_panel .profile_actions {
padding: 8px !important;
}
#profile_panel .profile_action_btn {
font-size: 11px !important;
}
@media (max-width: 800px) {
#profile_panel {
display: none !important;
}
}
.connectivity_status { display: flex; gap: 8px; margin-top: 6px; padding: inherit; flex-direction: column; }
.connectivity_status .status_badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.connectivity_status .status_badge i { font-size: 7px; }
.connectivity_status .status_badge.online { background: rgba(34,197,94,0.12); color: #16a34a; }
.connectivity_status .status_badge.mesgul { background: rgba(239,68,68,0.12); color: #dc2626; }
.connectivity_status .status_badge.uzakta { background: rgba(245,158,11,0.12); color: #d97706; }
.connectivity_status .status_badge.rahatsiz_etme { background: rgba(107,114,128,0.12); color: #4b5563; }
.connectivity_status .status_badge.offline_badge { background: rgba(107,114,128,0.1); color: #9ca3af; }
.connectivity_status .session_time { font-size: 11px; color: #9ca3af; }
.offline_status { opacity: 0.8; }
.profile_user_info { text-align: center; padding: 0px 5px 6px; }
.profile_user_info .stars { letter-spacing: 1px; }
.profile_user_info .summary { font-size: 12px; color: #9ca3af; }
.profile_user_inline { padding-top: 60px; padding-bottom: 0px; text-align: center; background: #fff; }
.profile_user_inline .username { font-size: 18px; font-weight: 700; color: #1f2937; margin-bottom: 2px; display: inline-flex; align-items: center; justify-content: center; }
.profile_user_inline .username_text { margin-right: 5px; }
.profile_user_inline .rank { font-size: 12px; color: #6b7280; left: -8px; position: relative; text-align: center; }
.profile_status_icon {
width: 20px;
height: 20px;
border-radius: 50%;
}
.profile_avatar_wrapper .profile_status_badge {
position: absolute;
top: 46px;
right: -8px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
border: 1.5px solid #f0f0f0;
z-index: 25;
}
.profile_avatar_wrapper .profile_status_badge .list_status {
width: 14px;
height: 14px;
border-radius: 50%;
}

/* Profile Status Icon - Separate Class */
.profile_avatar_wrapper .profile_status_icon {
position: absolute;
top: 46px;
right: -8px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
border: 1.5px solid #f0f0f0;
z-index: 25;
}
.profile_avatar_wrapper .profile_status_icon img {
width: 14px;
height: 14px;
border-radius: 50%;
}
.profile_avatar_wrapper .online_dot.online { background: #22c55e; }
.profile_avatar_wrapper .online_dot.away { background: #fbbf24; }
.profile_avatar_wrapper .online_dot.busy { background: #ef4444; }
.profile_avatar_wrapper .online_dot.outside { background: #9333ea; }
.profile_avatar_wrapper .online_dot.invisible { background: #6b7280; }
.profile_avatar_wrapper .online_dot.offline { background: #9ca3af; }
.profile_avatar_section { position: relative; }
.profile_avatar_section { position: relative; padding: 30px 30px 65px; text-align: center; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); border-radius: 0; }
.profile_avatar_section::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 25px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23ffffff' d='M0,50 C360,90 1080,10 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat bottom; background-size: cover; }
.profile_avatar_wrapper { position: absolute; bottom: -55px; left: 50%; transform: translateX(-50%); width: 110px; height: 110px; z-index: 20; }
.profile_avatar_wrapper .avatar_bg { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.15); background: #f3f4f6; }
.profile_avatar_wrapper .avatar_bg img { width: 100%; height: 100%; object-fit: cover; }
.profile_avatar_wrapper .device_icon { position: absolute; top: 11px; right: -3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.12); font-size: 9px; color: #3b82f6; border: 1.5px solid #f0f0f0; z-index: 25; }
.profile_avatar_wrapper .gender_icon { position: absolute; top: 28px; right: -8px; width: 20px; height: 20px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.12); font-size: 9px; border: 1.5px solid #f0f0f0; z-index: 25; }
.profile_avatar_wrapper .gender_icon.male { color: #03add8; }
.profile_avatar_wrapper .gender_icon.female { color: #ff69b4; }
.profile_avatar_wrapper .gender_icon.other { color: #6b7280; }
.profile_avatar_wrapper .online_dot { position: absolute; bottom: 5px; right: 5px; width: 12px; height: 12px; background: #22c55e; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12); z-index: 25; }
.profile_avatar_wrapper .online_dot.offline { background: #9ca3af; }
.profile_avatar_wrapper:has(.profile_design_frame) .avatar_bg { border-color: transparent !important; box-shadow: none !important; }
.profile_avatar_wrapper .profile_design_frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 142px; height: 142px; pointer-events: none; object-fit: fill; z-index: 10; }
.profile_avatar_wrapper .profile_status_icon { position: absolute; top: 46px; right: -8px; width: 20px; height: 20px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.12); border: 1.5px solid #f0f0f0; z-index: 25; }
.profile_avatar_wrapper .profile_status_icon img { width: 14px; height: 14px; border-radius: 50%; }


.pro-circle-btn {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
border: 1.5px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #fff;
transition: all 0.15s ease;
}
.pro-circle-btn:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
.pro-circle-btn:active {
background: #e5e7eb;
transform: scale(0.95);
}
.pro-circle-btn i {
font-size: 13px;
color: #374151;
line-height: 1;
}
.profile_like_badge{position:absolute;bottom:5px;left:5px;z-index:5}
.profile_like_badge .plike_item{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);padding:4px 10px;border-radius:20px;cursor:pointer;transition:all .2s}
.profile_like_badge .plike_item:hover{background:rgba(0,0,0,0.8)}
.profile_like_badge .plike_item img{width:16px;height:16px}
.profile_like_badge .plike_count{color:#fff;font-size:12px;font-weight:600}
.pro-like-topbtn .plikes {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
border-radius: 50% !important;
border: 1.5px solid #d1d5db !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #fff !important;
position: relative !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
padding: 0 !important;
gap: 0 !important;
}
.pro-like-topbtn .plikes:hover {
background: #f3f4f6 !important;
border-color: #9ca3af !important;
}
.pro-like-topbtn .plikes img {
width: 16px !important;
height: 16px !important;
}
.pro-like-topbtn .plike_count {
position: absolute !important;
top: -5px !important;
right: -5px !important;
margin-left: 0 !important;
min-width: 14px !important;
height: 14px !important;
font-size: 8px !important;
padding: 0 3px !important;
border-radius: 8px !important;
background: #ef4444 !important;
color: #fff !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
.pro-like-topbtn .plike_count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #ef4444 !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 700 !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
border-radius: 10px !important;
line-height: 1 !important;
margin-left: -6px !important;
}

.pro-like-topbtn .plikes {
display: flex !important;
align-items: center !important;
gap: 3px !important;
}
.pro-like-topbtn .plikes img {
width: 22px !important;
height: 22px !important;
}
.pro-like-topbtn {
display: flex;
align-items: center;
}
.pro-like-topbtn .profile_like_badge,
.pro-like-topbtn > * {
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
cursor: pointer;
font-size: 13px;
}
.modal_close.cancel_modal:has(+ .modal_content .ap-container) {
display: none !important;
}
.top_actions {
gap: 6px !important;
}
#profile_panel .pro-back-btn {
cursor: pointer;
}
#profile_panel .cancel_modal {

}
.pro-back-btn {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
border: 1.5px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #fff;
transition: all 0.15s ease;
order: -1;
}
.pro-back-btn:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
.pro-back-btn:active {
background: #e5e7eb;
transform: scale(0.95);
}
.pro-back-btn i {
font-size: 14px;
color: #374151;
line-height: 1;
}
.profile_top_bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #f8f9fa; border-bottom: 1px solid #eee; }
.profile_stats_inline { display: flex; align-items: center; gap: 8px; }
.profile_stats_inline .prolikes { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: rgba(0,0,0,0.05); border-radius: 20px; font-size: 12px; cursor: pointer; }
.profile_top_bar .top_actions { display: flex; gap: 12px; }
.profile_top_bar .top_actions i { font-size: 20px; color: #6b7280; cursor: pointer; }
.profile_top_bar .top_actions i.cancel_modal { 
display: flex; 
align-items: center; 
justify-content: center; 
min-width: 44px; 
min-height: 44px; 
margin: -12px -10px -12px 0; 
font-size: 22px; 
color: #374151;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.profile_top_bar .top_actions i.cancel_modal:active { 
background: rgba(0,0,0,0.05); 
border-radius: 50%; 
}
.ptab-overflow-open,
.ptab-overflow-open .profile_modern,
.ptab-overflow-open #mprofilemenu {
overflow: visible !important;
}
@keyframes slideUpModal {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (max-width: 768px) {
.profile_modern {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
#mprofilemenu {
flex: 1;
min-height: 0;
overflow-y: auto;
}
}
@media (min-width: 769px) {
.profile_modern {
min-height: 500px;
}
}
.profile_modern { background: #fff; border-radius: 12px; overflow: hidden; width: 100%; }
.sy-fontsize-row {
cursor: default !important;
}
.sy-fontsize-ctrl {
display: flex;
align-items: center;
gap: 0;
margin-left: auto;
background: #f1f5f9;
border-radius: 10px;
overflow: hidden;
border: 1px solid #e2e8f0;
flex-shrink: 0;
}
.sy-fs-btn {
width: 34px;
height: 32px;
border: none;
background: #fff;
color: #333;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
line-height: 1;
}
.sy-fs-btn:hover {
background: #e2e8f0;
}
.sy-fs-btn:active {
background: #cbd5e1;
}
.sy-fs-val {
min-width: 30px;
text-align: center;
font-size: 14px;
font-weight: 700;
color: #334155;
user-select: none;
}
.dark .sy-fontsize-ctrl {
background: #1e293b;
border-color: #334155;
}
.dark .sy-fs-btn {
background: #0f172a;
color: #e2e8f0;
}
.dark .sy-fs-btn:hover {
background: #1e293b;
}
.dark .sy-fs-val {
color: #e2e8f0;
}

/* Alt Menu Ayirici Cizgi */
#main_input_extra {
padding: 0 !important;
overflow: hidden !important;
}
#main_input_extra .sub_options {
width: 100% !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.13) !important;
margin: 0 !important;
}
#main_input_extra .sub_options:last-child {
border-bottom: none !important;
}

#main_input_extra.sy-plus-menu {
position: absolute;
bottom: 6px;
right: 35px;
z-index: 200;
display: none;
padding: 3px 0;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
min-width: 200px;
max-width: 220px;
width: auto;
transform-origin: bottom right;
animation: eplusMenuIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
max-height: 70vh;
overflow-y: auto;
overflow-x: hidden;
}

#main_input_extra.sy-plus-menu::-webkit-scrollbar { width: 4px; }
#main_input_extra.sy-plus-menu::-webkit-scrollbar-track { background: transparent; }
#main_input_extra.sy-plus-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

@keyframes eplusMenuIn {
0% { opacity: 0; transform: translateY(10px) scale(0.95); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}

.sy-plus-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
cursor: pointer;
transition: background 0.18s ease;
position: relative;
}
.sy-plus-item:hover { background: rgba(0,0,0,0.04); }
.sy-plus-item:active { background: rgba(0,0,0,0.07); }

.sy-plus-icon {
width: 28px;
height: 28px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
transition: transform 0.2s ease;
}
.sy-plus-item:hover .sy-plus-icon { transform: scale(1.08); }

.sy-plus-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.sy-plus-title {
font-size: 12px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.3;
}
.sy-plus-desc {
font-size: 10px;
color: rgba(0,0,0,0.45);
line-height: 1.3;
}
.sy-plus-divider {
height: 1px;
background: rgba(0,0,0,0.1);
margin: 0px 10px;
}
.sy-plus-item .up_input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {
#main_input_extra.sy-plus-menu {
min-width: 200px;
max-width: 220px;
bottom: 2px;
max-height: 60vh;
}
#main_input_extra.sy-plus-menu::after {
right: 18px;
}
}

.rcall_sayi {
top: 6px;
left: 22px;
padding: 1px 3px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
background: red;
position: absolute;
color: #fff;
}
.radio_sayi {
top: 6px;
left: 20px;
padding: 1px 3px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
background: red;
position: absolute;
color: #fff;
}
#profile_panel {
overflow: hidden;
padding: 0;
display: table-cell;
vertical-align: top;
max-width: calc(100% - 35px) !important;
width: 360px;
background: #fff;
border-left: 1px solid rgba(0,0,0,0.08);
}
#profile_panel.profile-panel-hide {
display: none !important;
}
#profile_panel.profile-panel-show {
display: table-cell !important;
}
#profile_panel_content {
overflow-y: auto;
overflow-x: hidden;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
#profile_panel .pro-back-btn {
cursor: pointer;
}
#profile_panel .cancel_modal {

}
#profile_panel .modal_back,
#profile_panel .large_modal_out {
display: none !important;
}
#profile_panel .profile_actions {
padding: 8px !important;
}
#profile_panel .profile_action_btn {
font-size: 11px !important;
}
@media (max-width: 800px) {
#profile_panel {
display: none !important;
}
}