html,body{ overflow-x:hidden; }






.pro_callbar{  padding: 10px 0 0px;}
.populer_oda_wrap {
  padding: 12px 0 16px;
  box-sizing: border-box;
  
}

.populer_oda_scroller {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 12px;
  box-sizing: border-box;
}

.populer_oda_scroller::-webkit-scrollbar { 
  width: 0; 
  height: 0; 
 }

.populer_oda_item {
  min-width: 0;
  margin: 0;
  padding: 6px 0 0;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.25s ease;
  cursor: pointer;
}

.populer_oda_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: center;
}

/* Modern Avatar Tasarımı */
.populer_oda_avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  position: relative;
  padding: 3px;
  box-sizing: border-box;
  box-shadow: 0 12px 22px -6px rgba(0,0,0,0.28);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.populer_oda_avatar:hover {
  transform: scale(1.02);
  box-shadow: 0 18px 28px -8px rgba(0,0,0,0.32);
}

.populer_oda_avatar::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background-size: 300% 300%;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: populerOdaRotate 8s linear infinite, gradientShift 6s ease infinite;
  opacity: 0.95;
  pointer-events: none;
  box-sizing: border-box;
}

/* Avatar İç Görsel */
.populer_oda_avatar > u {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

/* Modern Oda Bilgi Kartı */
.populer_oda_info {
  display: block;
  width: auto;
  min-width: 70px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.populer_oda_item:hover .populer_oda_info {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -8px rgba(0, 0, 0, 0.3);
}

/* İzlenme Durumu */
.populer_oda_item.is_seen { 
  opacity: 0.6; 
}

.populer_oda_item.is_seen .populer_oda_avatar::before {
  animation: none;
  opacity: 0.25;
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
}

.populer_oda_item.is_seen .populer_oda_info {
  backdrop-filter: blur(2px);
}

/* Başlık Bölümü - Modern Tasarım */
.div-baslik {
  text-align: center;
  position: relative;
  padding: 8px 12px 12px;
}

.div-baslik::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
}

.div-baslik span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  position: relative;
}

.div-baslik span:active {
  transform: translateY(0);
  transition: transform 0.1s ease;
}

/* Animasyonlar */
@keyframes populerOdaRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Responsive Düzenlemeler */
@media (max-width: 480px) {
  .populer_oda_avatar {
    width: 58px;
    height: 58px;
  }
  
  .populer_oda_info {
    font-size: 10px;
    padding: 4px 8px;
  }
  
  .div-baslik span {
    font-size: 11px;
    padding: 6px 16px;
  }
}

@media (max-width: 360px) {
  .populer_oda_scroller {
    gap: 6px;
    padding: 6px;
  }
  
  .populer_oda_avatar {
    width: 52px;
    height: 52px;
  }
}

/* Hareket Azaltma Tercihi */
@media (prefers-reduced-motion: reduce) {
  .populer_oda_item,
  .populer_oda_avatar,
  .populer_oda_info,
  .div-baslik span {
    transition: none !important;
  }
  
  .populer_oda_avatar::before {
    animation: none !important;
  }
  
  .div-baslik span:hover {
    transform: none;
  }
}







.modal_close{
margin-left: auto;  
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  cursor:pointer;
}
.modal_close:hover{
  transform: translateY(-1px);
   border-color: rgba(255,255,255,.16);
}
:root {
  /* Değişkenler - kolay tema yönetimi */
  --primary-glow: rgba(255, 235, 59, 0.75);
  --primary-color: #ffeb3b;
  --primary-dark: #b59b00;
  --bg-dark: #070913;
  --bg-darker: #060812;
  --accent-cyan: rgba(0, 220, 255, 0.95);
  --accent-purple: rgba(145, 90, 255, 0.85);
  --accent-green: rgba(0, 255, 170, 0.85);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Çarkıfelek Header */
.CarkiFelekHeader {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 22px 12px 14px;
  user-select: none;
}

.CarkiFelekHeader .CarkiFelekconfetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.CarkiFelekHeader .CarkiFelek2 {
  position: relative;
  aspect-ratio: 1;
}

.CarkiFelekHeader .CarkiFelek3 {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 50px 100px rgba(0, 0, 0, 0.85));
}

.CarkiFelekHeader .wheel {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  transition: transform 6.2s var(--transition-smooth);
  will-change: transform;
}

/* Pointer (Ok) - Modernize edildi */
.CarkiFelekHeader .pointer {
  position: absolute;
  top: 50%;
  left: -18px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
  border-left: 54px solid var(--primary-color);
  filter: drop-shadow(0 0 18px var(--primary-glow));
  z-index: 70;
  pointer-events: none;
  transition: filter 0.3s ease;
}

.CarkiFelekHeader .pointer:hover {
  filter: drop-shadow(0 0 25px var(--primary-color));
}

.CarkiFelekHeader .pointer::after {
  content: "";
  position: absolute;
  left: -12px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--primary-color) 55%, var(--primary-dark));
  box-shadow: 0 0 10px var(--primary-glow);
  animation: pulse 2s infinite;
}

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

/* Spin Butonu - Modernize edildi */
.CarkiFelekHeader .spin-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24%;
  height: 24%;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: clamp(1.05rem, 3.3vw, 2rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(0,0,0,0.65));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 
    0 0 70px var(--primary-glow),
    inset 0 5px 18px rgba(255,255,255,0.18),
    inset 0 -8px 25px rgba(0,0,0,0.65),
    0 10px 20px rgba(0, 0, 0, 0.3);
  border: 2.5px solid rgba(255,255,255,0.18);
  z-index: 80;
  transition: all 0.25s var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
}

.CarkiFelekHeader .spin-btn:hover:not(:disabled) {
  transform: scale(1.06) rotate(5deg);
  box-shadow: 
    0 0 110px var(--primary-color),
    inset 0 5px 18px rgba(255,255,255,0.25),
    inset 0 -8px 25px rgba(0,0,0,0.75),
    0 15px 30px rgba(0, 0, 0, 0.4);
}

.CarkiFelekHeader .spin-btn:active:not(:disabled) {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

.CarkiFelekHeader .spin-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.CarkiFelekHeader .spin-sub {
  font-size: 0.68em;
  font-weight: 700;
  opacity: 0.85;
  letter-spacing: 0.2px;
}

/* Readout ve Result - Modernize edildi */
.CarkiFelekHeader .readout {
  margin-top: 14px;
  text-align: center;
}

.CarkiFelekHeader .result {
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  font-weight: 900;
  text-shadow: 0 0 40px var(--primary-glow);
  min-height: 1.7em;
  background: linear-gradient(135deg, #fff, var(--primary-color));
  -webkit-background-clip: text;
  background-clip: text;
  animation: fadeIn 0.5s ease;
}

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

.CarkiFelekHeader .tiny {
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.CarkiFelekHeader .tiny:hover {
  opacity: 1;
}

/* Responsive - Mobil için optimize edildi */
@media (max-width: 420px) {
  .CarkiFelekHeader .pointer {
    left: -34px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 58px solid var(--primary-color);
  }
  .CarkiFelekHeader .pointer::after { 
    left: -13px; 
    width: 22px;
    height: 22px;
  }
  .CarkiFelekHeader .spin-btn {
    width: 28%;
    height: 28%;
  }
}

/* Loading Screen - Modern ve şık */
.sy_loadscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background: var(--bg-dark);
  color: #eaf0ff;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.sy_loadscreen__fx {
  position: absolute;
  inset: -2px;
  background: 
    radial-gradient(900px 520px at 18% 12%, rgba(0,220,255,0.20), transparent 62%),
    radial-gradient(900px 520px at 86% 18%, rgba(145,90,255,0.18), transparent 62%),
    radial-gradient(900px 620px at 45% 92%, rgba(0,255,170,0.14), transparent 62%),
    linear-gradient(180deg, #0b1022 0%, var(--bg-dark) 55%, var(--bg-darker) 100%);
  animation: syLSFloat 9s ease-in-out infinite;
  will-change: transform;
}

.sy_loadscreen__fx:after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes syLSFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -10px, 0) scale(1.02); }
}

.sy_loadscreen__center {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  box-sizing: border-box;
  text-align: center;
}

/* Loader Animation - Modernize edildi */
.sy_loadscreen__mark {
  position: relative;
  width: 76px;
  height: 76px;
  margin-bottom: 4px;
}

.sy_loadscreen__ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(from 180deg, 
    var(--accent-cyan),
    var(--accent-purple),
    var(--accent-green),
    var(--accent-cyan)
  );
  filter: saturate(1.1) brightness(1.2);
  animation: syLSSpin 1.8s linear infinite;
  opacity: 0.95;
}

.sy_loadscreen__core {
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: rgba(8, 10, 18, 0.92);
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.sy_loadscreen__core:after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 55%);
  opacity: 0.7;
}

@keyframes syLSSpin {
  to { transform: rotate(360deg); }
}

.sy_loadscreen__title {
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sy_loadscreen__sub {
  font-size: 12px;
  opacity: 0.85;
  letter-spacing: 0.2px;
}

/* Chat Bubbles - Modernize edildi */
.sy_loadscreen__chat {
  width: min(560px, 92vw);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.sy_ls_bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sy_ls_bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  border-color: rgba(255,255,255,0.15);
}

.sy_ls_bubble:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: translateX(-70%);
  animation: syLSShine 2.4s ease-in-out infinite;
  opacity: 0.35;
  pointer-events: none;
}

@keyframes syLSShine {
  0% { transform: translateX(-70%); opacity: 0; }
  20% { opacity: 0.55; }
  60% { opacity: 0.18; }
  100% { transform: translateX(70%); opacity: 0; }
}

.sy_ls_bubble--left {
  align-self: flex-start;
  width: 78%;
  border-bottom-left-radius: 4px;
}

.sy_ls_bubble--right {
  align-self: flex-end;
  width: 70%;
  justify-content: flex-end;
  border-bottom-right-radius: 4px;
}

.sy_ls_avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 55%),
              linear-gradient(135deg, rgba(0,220,255,0.28), rgba(145,90,255,0.22));
  border: 1px solid var(--glass-border);
  flex: 0 0 38px;
  animation: avatarPulse 3s infinite;
}

@keyframes avatarPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0,220,255,0.3); }
  50% { box-shadow: 0 0 20px rgba(145,90,255,0.5); }
}

.sy_ls_lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sy_ls_line {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.08);
  transition: width 0.3s ease;
}

.sy_ls_line.w70 { width: 70%; }
.sy_ls_line.w60 { width: 60%; }
.sy_ls_line.w45 { width: 45%; }
.sy_ls_line.w35 { width: 35%; }

/* Typing Animation */
.sy_ls_typing {
  display: flex;
  gap: 7px;
  align-items: center;
  height: 16px;
}

.sy_ls_typing i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  animation: syLSType 1.05s ease-in-out infinite;
}

.sy_ls_typing i:nth-child(1) { 
  animation-delay: 0s; 
  background: rgba(0,220,255,0.28); 
}
.sy_ls_typing i:nth-child(2) { 
  animation-delay: 0.14s; 
  background: rgba(145,90,255,0.24); 
}
.sy_ls_typing i:nth-child(3) { 
  animation-delay: 0.28s; 
  background: rgba(0,255,170,0.20); 
}

@keyframes syLSType {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-6px); opacity: 1; }
}

/* Brand Section - Modernize edildi */
.sy_loadscreen__brand {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.sy_loadscreen__brandText {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--glass-border);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  background-image: linear-gradient(90deg, 
    rgba(0,220,255,1), 
    rgba(145,90,255,1), 
    rgba(0,255,170,1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  overflow: hidden;
}

.sy_loadscreen__brandText::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shine 3s infinite;
}

@keyframes shine {
  to { left: 200%; }
}

/* Responsive */
@media (max-width: 420px) {
  .sy_loadscreen__mark { 
    width: 68px; 
    height: 68px; 
  }
  .sy_loadscreen__title { 
    font-size: 16px; 
  }
  .sy_ls_bubble--left { 
    width: 88%; 
  }
  .sy_ls_bubble--right { 
    width: 82%; 
  }
  .sy_ls_avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
}

/* Accessibility - Focus states */
.CarkiFelekHeader .spin-btn:focus-visible,
.sy_loadscreen__brandText:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Custom scrollbar for modern browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-green));
}
    @media (max-width: 480px) {
            .rulesmodal-header {
                padding: 20px;
            }

            .modal-body {
                padding: 20px;
            }

            .rules-text {
                padding: 20px;
            }

            .rulesbutton-group {
                flex-direction: column;
            }

            .rulesbtn-accept, .rulesbtn-reject {
                width: 100%;
                padding: 14px 20px;
            }

            .rules-text ul li {
                padding: 10px 0 10px 30px;
                font-size: 14px;
            }
        }
        .rulesbtn-reject {
            flex: 1;
            min-width: 140px;
            padding: 16px 24px;
            border: 2px solid #dc3545;
            border-radius: 12px;
            font-size: clamp(14px, 4vw, 16px);
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
        }
        .rulesbtn-accept {
            flex: 1;
            min-width: 140px;
            padding: 16px 24px;
            border: none;
            border-radius: 12px;
            font-size: clamp(14px, 4vw, 16px);
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
        }
        .rules-text ul li:before {
            content: "✓";
            position: absolute;
            left: 0;
            font-weight: bold;
            font-size: 18px;
        }
        .rulesbutton-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
        }
.rules-text ul li:last-child {
            border-bottom: none;
}
.rules-text ul li {
            padding: 12px 0 12px 35px;
            position: relative;
            font-size: clamp(14px, 4vw, 15px);
}
.rules-text ul {
            list-style: none;
            padding: 0;
}
.rules-text p {
            line-height: 1.8;
            font-size: clamp(14px, 4vw, 16px);
            margin-bottom: 20px;
}
.rules-text {
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 30px;
}
.rulesmodal-body {
            padding: 30px;
}
.rulesmodal-header h2 {
            font-size: clamp(20px, 5vw, 28px);
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
}
.rulesmodal-header {
            padding: 24px 30px;
}
@keyframes rulesslideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
}
.rulesmodal-content {
            border-radius: 24px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            animation: rulesslideUp 0.4s ease;
            position: relative;
            z-index: 1000000;
}
.rulesmodal-overlay[style*="display: flex"] {
            display: flex !important;
}
.rulesmodal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            backdrop-filter: blur(5px);
            display: none;            justify-content: center;
            align-items: center;
            z-index: 999999;
            padding: 20px;
}
:root {
  --room-accent: #3b82f6;
  --room-accent-2: #8b5cf6;
  --room-bg: rgba(255, 255, 255, 0.6);
  --room-border: rgba(0, 0, 0, 0.06);
  --room-stroke: rgba(255, 255, 255, 0.1);
  --room-stroke-2: rgba(255, 255, 255, 0.2);
  --room-shadow: rgba(0, 0, 0, 0.1);
  --room-corner: rgba(0, 0, 0, 0.08);
  --room-selected: #3b82f6;
  --room-badge-stroke: rgba(255, 255, 255, 0.15);
}

.sy_chat_oda {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 16px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  
  /* Modern cam efekti */
  background: var(--room-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Border styling */
  border: 1px solid var(--room-border);
  border-left: 4px solid color-mix(in srgb, var(--room-accent) 50%, transparent);
  
  /* Gölge */
  box-shadow: 0 2px 8px var(--room-shadow);
  
  /* Animasyon */
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
  
  /* Metin stili */
  color: var(--text-primary, #1e293b);
  letter-spacing: -0.01em;
}

/* Gradient arkaplan efekti */
.sy_chat_oda::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 80%
  );
  pointer-events: none;
  opacity: 0;
  transform: translateX(-30%);
  transition: opacity 0.3s ease, transform 0.5s ease;
}

/* Arkaplan ışıltı efekti */
.sy_chat_oda::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--room-accent-2) 15%, transparent) 0%,
    transparent 70%
  );
  opacity: 0.4;
  filter: blur(25px);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Hover efekti */
.sy_chat_oda:hover {
  border-color: var(--room-stroke-2);
  border-left-color: color-mix(in srgb, var(--room-accent-2) 70%, transparent);
  transform: translateY(-2px);
  box-shadow: 
    0 15px 30px -10px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.sy_chat_oda:hover::before {
  opacity: 1;
  transform: translateX(30%);
}

.sy_chat_oda:hover::after {
  opacity: 0.6;
}

/* Aktif/Seçili oda */
.room_selected.sy_chat_oda {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--room-accent) 8%, var(--room-bg)),
    color-mix(in srgb, var(--room-accent-2) 8%, var(--room-bg))
  );
  border-color: color-mix(in srgb, var(--room-accent-2) 30%, var(--room-stroke));
  border-left-color: var(--room-selected);
  border-left-width: 5px;
  box-shadow: 
    0 18px 35px -12px rgba(59, 130, 246, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.room_selected.sy_chat_oda::after {
  opacity: 0.5;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--room-selected) 20%, transparent) 0%,
    transparent 70%
  );
}

/* Oda puls animasyonu */
.oda_efekt {
  animation: roomPulse 2s ease-out infinite;
}

@keyframes roomPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--room-accent) 30%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Özel oda etiketi */
.pp_oda {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-align: center;
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  
  /* Modern badge tasarımı */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--room-badge-stroke);
  color: var(--text-primary, #1e293b);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  
  animation: badgePulse 2s ease-out infinite;
}

@keyframes badgePulse {
  0% { opacity: 0.9; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.02); }
  100% { opacity: 0.9; transform: translateY(-50%) scale(1); }
}

/* Oda seçim butonu (üçgen) */
.room-selection-button {
  width: 70px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  
  /* Üçgen oluşturma */
  border-left: 38px solid transparent;
  border-bottom: 82px solid var(--room-corner);
  
  transition: border-bottom-color 0.25s ease;
}

/* Seçili odada üçgen rengi */
.room_selected.sy_chat_oda .room-selection-button {
  border-bottom-color: var(--room-selected);
}

/* Üçgen ikonu */
.room-selection-button-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #64748b);
  font-size: 18px;
  transition: all 0.2s ease;
  z-index: 2;
}
.sy_chat_oda:hover .room-selection-button-icon {
  transform: translateY(-50%) translateX(2px);
  color: var(--room-accent-2);
}
.room_selected.sy_chat_oda .room-selection-button-icon {
  color: var(--room-selected);
}
.sy_chat_oda_content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 60px;
}
.sy_chat_oda_title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sy_chat_oda_meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  margin-left: auto;
}
.sy_chat_oda_icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--room-accent) 15%, transparent);
  color: var(--room-accent);
  font-size: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .oda_efekt,
  .pp_oda,
  .sy_chat_oda,
  .sy_chat_oda::before,
  .sy_chat_oda::after,
  .room-selection-button,
  .room-selection-button-icon {
    animation: none !important;
    transition: none !important;
  }
  
  @keyframes roomPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--room-accent) 30%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
}
@media (max-width: 420px) {
  .sy_chat_oda {
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.8rem;
  }
  
  .pp_oda {
    right: 60px;
    padding: 3px 8px;
    font-size: 9px;
  }
  
  .room-selection-button {
    width: 62px;
    border-left-width: 34px;
    border-bottom-width: 76px;
  }
  
  .room-selection-button-icon {
    right: 6px;
    width: 38px;
    font-size: 16px;
  }
  
  .sy_chat_oda_content {
    padding-right: 52px;
  }
}
@media (max-width: 360px) {
  .sy_chat_oda {
    padding: 8px 10px;
  }
  
  .pp_oda {
    right: 52px;
    padding: 2px 6px;
  }
  
  .room-selection-button {
    width: 54px;
    border-bottom-width: 70px;
  }
  
  .room-selection-button-icon {
    width: 32px;
    font-size: 14px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sy_chat_oda {
    padding: 8px 12px;
  }
  
  .room-selection-button {
    border-bottom-width: 70px;
  }
  
  .room-selection-button-icon {
    height: 70px;
  }
}
@supports (backdrop-filter: blur(12px)) {
  .sy_chat_oda {
    background: var(--room-bg);
  }
}
@media (prefers-contrast: high) {
  .sy_chat_oda {
    border: 2px solid currentColor;
    backdrop-filter: none;
    background: var(--bg-primary, #fff);
  }
  .pp_oda {
    border: 1px solid currentColor;
    background: var(--bg-primary, #fff);
  }
}
#onay_notify {
    display: inline-block;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 38px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    margin-left: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
    top: -45px;
}
/* ===== DİKEY ALT SEÇENEK STİLLERİ ===== */
.sub_options, 
.psub_options {
    /* Dikey Düzen için */
    width: 48px;
    height: 48px;
    padding: 12px;
    margin: 6px 0;        /* Yatay margin sıfır, dikey margin 6px */
    
    /* Görünüm */
    
    border-radius: 18px;
    border: none;
    
    /* Konumlandırma */
    position: relative;
    cursor: pointer;
    
    /* Flex ile içerikleri ortala */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Geçiş Efektleri */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Varsayılan stilleri temizle */
    outline: none;
    box-sizing: border-box;
}




/* İkonlar */
.sub_options img,
.psub_options img {
    width: 100%;
    height: 100%;

}






#main_input_extra{
    /* Boyut ve Konum */
    width: auto;
    max-width: calc(100% - 30px);
    position: absolute;
    z-index: 1000;
    
    /* Dikey menü için konum ayarları */
    bottom: auto;          /* bottom'u kaldır */
    top: 93%;              /* Ortala */
    transform: translateY(-50%);
    
    /* Görünüm - Dikey menü formatı */
    display: none;         /* Varsayılan gizli, açılınca flex olacak */
    flex-direction: column; /* DİKEY! */
    align-items: center;
    gap: 6px;
    border-radius: 18px;    /* Çok yuvarlak - dikey menü için şık */
    padding: 12px 8px;
}
/* ===== INPUT EXTRA ALANLARI (DİKEYE GÖRE AYARLANDI) ===== */
#priv_input_extra{
    /* Boyut ve Konum */
    width: auto;
    max-width: calc(100% - 30px);
    position: absolute;
    z-index: 1000;
    
    /* Dikey menü için konum ayarları */
    bottom: auto;          /* bottom'u kaldır */
    top: 88%;              /* Ortala */
    transform: translateY(-50%);
    
    /* Görünüm - Dikey menü formatı */
    display: none;         /* Varsayılan gizli, açılınca flex olacak */
    flex-direction: column; /* DİKEY! */
    align-items: center;
    gap: 6px;
    border-radius: 18px;    /* Çok yuvarlak - dikey menü için şık */
    padding: 12px 8px;
}


/* Dikey açılma animasyonu */
@keyframes slideVertical {
    from {
        opacity: 0;
        transform: translateY(-30%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* Ana menü için konum (sağ tarafta dikey) */
#main_input_extra {
    right: 41px;           /* Sağdan mesafe */
    left: auto;            /* Solu otomatiğe al */
}

/* Private menü için konum (sol tarafta dikey) */
#priv_input_extra {
    left: 309px;           /* Soldan mesafe */
    right: auto;           /* Sağı otomatiğe al */
}

/* Extra alan içindeki opsiyon butonları */
#main_input_extra .sub_options,
#priv_input_extra .psub_options {
    width: 44px;
    height: 44px;
    padding: 11px;
    margin: 2px 0;         /* Sadece dikey margin */
    border-radius: 20px;
}
.sub_options:hover::after,
.psub_options:hover::after {
    opacity: 1;
    visibility: visible;
    left: 120%;
}

/* ===== DARK MODE ===== */

.onay_input{text-align:center;line-height:38px;font-size:15px;z-index:1;position:relative}
#main_emoticon { width:530px; max-width:calc(100% - 10px); border-radius:15px; height:222px; position:absolute; bottom:0; left:0; z-index:100; display:none; margin:5px; overflow:hidden; }
#private_emoticon { width:calc(100% - 10px); border-radius:5px; height:200px; position:absolute; bottom:0; left:0; z-index:100; display:none; margin:5px; }
.main_post_control { display:table; table-layout:fixed; width:100%; height:40px; }
.main_post_item { display:table-cell; vertical-align:middle; width:40px; font-size:20px; position:relative; text-align:center; }
.main_post_button { display:table-cell; vertical-align:middle; text-align:right;  }
.post_emo_content { max-height:110px; overflow:hidden; overflow-y:auto; }
.post_emo_content .emoticon img { height:100%; width:auto; }
.emo_head { width:100%; height:40px; display:table; table-layout:fixed; }
.emo_content { width:100%; height:180px; overflow:hidden; overflow-y: auto; padding:5px; }
.sticker { height:48px; float:left; margin:6px; }
.emoticon { height:24px; float:left; margin:5px; }
.custom_emo { max-width:48px; max-height:48px; float:left; margin:6px; }
.emo_content .emoticon  img { height:100%; width:auto; }
.emo_content .sticker  img { height:100%; }
.emo_content .custom_emo img { max-width:48px; max-height:48px; }
.emo_menu { width:40px; height:100%; cursor:pointer; text-align:center; font-size:18px; display:table-cell; vertical-align:middle; }
.emo_select { height:40px; width:40px; display:block; }
.empty_emo { display:table-cell; height:40px; }
.emo_content_priv { width:100%; height:160px; overflow:hidden; overflow-y: auto; padding:5px; }
.emo_content_priv  .emoticon  img { height:100%; width:auto; }
.emo_content_priv  .sticker  img { height:100%; }
.emo_content_priv  .custom_emo img { max-width:48px; max-height:48px; }
.emoticon, .sticker, .custom_emo { cursor:pointer; }
.emo_result { min-height:240px; max-height:400px; }
#friend_post, #news_data { height:120px; border:none; overflow:hidden; background:none !important; border:none !important; }
.up_file_remove { width:24px; height:24px; display:table-cell; text-align:center; vertical-align:middle; font-size:13px; cursor:pointer; border-radius:50%; }
.up_audio { width:200px; max-width:100%; }
.up_video { height:120px; border-radius:5px; }
.up_image { max-height:50px; max-width:100%; border-radius:5px; display:block; }
.up_file_control { display:table; width:24px; height:24px; position:absolute; top:-5px; right:-5px; }
.do_comment { width:50px; text-align:center; cursor:pointer; }
.main_post_control { display:table; table-layout:fixed; width:100%; height:40px; }
.main_post_item { display:table-cell; vertical-align:middle; width:40px; font-size:20px; position:relative; text-align:center; }
.main_post_button { display:table-cell; vertical-align:middle; text-align:right;  }
.comment_count { text-align:right; cursor:pointer; }
.puser_item { padding:8px 10px; display:table; table-layout:fixed; width:100%; cursor:pointer; font-size:14px; text-shadow:none; }
.puser_avatar { display:table-cell; width:32px; height:32px; vertical-align:middle; }
.puser_avatar img { width:32px; height:32px; border-radius:50%; display:block; }
.puser_option { width:30px; display:table-cell; vertical-align:middle; font-size:15px; text-align:center; }
.puser_name { padding:0 6px; font-size:14px; display:table-cell; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.puser_icon { width:30px; text-align:center; display:table-cell; vertical-align:middle;  }
.puser_icon img { width:16px; height:16px; margin:0 auto; display:block; }
.puser_text { display:table-cell; vertical-align:middle; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align:initial; }
.puser_rank { width:34px; text-align:center; display:table-cell; vertical-align:middle; font-weight:bold; font-size:15px; }
.puser_rank img { width:24px; height:24px; margin:0 auto; display:block; }
.puser_score { display:table-cell; vertical-align:middle; width:80px; text-align:right; }
.page_drop_item { display:table; table-layout:fixed; width:100%; padding:15px 30px; cursor:pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position:relative; }
.page_drop_icon { display:table-cell; vertical-align:middle; width:24px; text-align:center; }
.page_drop_text { display:table-cell; vertical-align:middle; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.popen { display:none; }
.user_count { display:table; table-layout:fixed; width:100%; padding:10px; font-size:13px; font-weight:normal; font-weight:bold; }
.ucount { border-radius:50px; padding:4px 7px; font-size:11px; }
.page_menu_item { display:table; table-layout:fixed; width:100%; padding:15px; cursor:pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position:relative; }
.page_menu_icon { display:table-cell; vertical-align:middle; width:26px; text-align:center; font-size:16px; }
.page_menu_text { display:table-cell; vertical-align:middle; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; padding:0 5px; }
.page_menu_notify { display:table-cell; vertical-align:middle; width:16px; }
.page_drop { display:none; }
.avusername { font-weight:bold; font-size:20px; width:100%; }
.avavatar { width:60px; height:60px; border-radius:50%; display:block; margin:0 auto; }
.avoption { width:24px; height:24px; font-size:16px; text-align:center; }
.avcontent { width:100%; display:block; position:relative; }
.avitem { padding:12px 10px; text-align:center; cursor:pointer; }
.avitem i { padding:0 3px; }
.avtopopt { width:30px; text-align:center; }
.avflag { width:24px; height:auto; border-radius:2px; }
.avtopmenu { min-height:15px; margin-bottom:-15px; }
.avdetails { text-align:center; }
.avagegender { font-size:12px; }
.avbackground { background-size:cover !important; background-position:50% 50% !important; }
.avavpart { text-align:center; }
#av_menu { width:240px; height:auto; position:absolute; bottom:0; left:-5000px; z-index:99; border-radius:20px; overflow:hidden; cursor:pointer; }
.topcard { padding:10px; min-height:90px; }
.roomcv { width:40px; }
.roomcv img { width:40px; height:auto; border-radius:3px; display:block; }
.mroom_name{ font-size:16px; font-weight:bold; }
.mroom_text { font-size:11px; }
#chat_main_menu, #status_menu, #report_menu, #notification_menu, #bank_menu, #room_options_menu, #setting_menu, 
#friends_menu, #private_menu { position:absolute; right:0; z-index:202; top:50px; display:none; text-align:initial; }
#private_top { width:100%; display:table; height:40px; padding:0 10px; }
#private_wrap_content { position:relative; }
#priv_input { width:100%; }
#private_content { width:100%; overflow:hidden; overflow-y:auto; padding:5px 10px; }
#private_input, #private_disabled, #private_load { width:100%; padding:4px; position:relative; }
#private_disable, #private_load_content { height:40px; }
#message_form { height:40px; width:100%; }
#private_send { width:100%; height:100% !important; cursor:pointer; font-size:18px; }
#file_private { width:40px; text-align:center; vertical-align:middle; font-size:20px; display:table-cell; position:relative; text-align:center; }
#private_left { display:table; width:100%; height:100%; }
#private_av_wrap { width:30px; }
#private_av { cursor:pointer; width:30px; height:30px; display:block; border-radius:50%; }
#dpriv { position:relative; }
#private_name { cursor:pointer; font-size:16px; padding:0 8px; }
#my_menu{ width:100%; height:50px; display:table; table-layout:fixed; }
#private_box { width:100%; overflow:hidden; }
#submit_button { width:100%; float:right; height:100% !important; font-weight:bold; box-shadow:none !important; padding:0; border:none !important; font-size:18px; }
#inside_wrap_chat { height:100%; overflow:hidden; }
#container_show_chat { width: 100%; height: 100%; position:relative; }
#show_chat { width:100%; height:100%; overflow:auto; overflow-x: hidden; }
#wrap_chat { height:100%; width:100%; }
#warp_show_chat { height:78%; overflow:hidden;}
#show_chat ul { width:100%; position:relative; }
#wrap_footer { height:auto; width:100%; position:fixed; bottom:0; left:0; z-index:200; }
.input_table { overflow:hidden; display:table; table-layout:fixed; width:100%; height:100%;  }
#send_image { border-radius:0px; }
.td_input { height:100%; display:table-cell; padding:0 3px; }
.input_icon { font-size:18px; }
.main_item { width:40px; height:100%; text-align:center; font-size:20px; z-index:1; display:table-cell; vertical-align:middle; position:relative;  }
.main_hide { display:none; }
.sub_hidden { display:none; }
.chat_input_container { width:100%;}
#inputt_left { height:100%; }
#container_input, #main_disabled, #main_load { padding:4px; }
#content, 
#message_content {
    /* Boyut ve Dış Yapı */
    width: 100%;
    height: 100%;
    padding: 12px 20px; /* Üst/alt ve sağ/sol padding düzenlendi */
    margin: 0; /* Varsayılan margin'i sıfırla */
    
    /* Görünüm ve Tipografi */
    font-size: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Modern bir font ailesi */
    font-weight: 400;
    color: #1e293b; /* Koyu grafi bir metin rengi */
    
    /* Kenarlık ve Arkaplan */
    border: 2px solid transparent; /* Kenarlık için yer bırak, hover'da renk alacak */
    border-radius: 28px; /* 100px çok büyüktü, daha modern bir değer: 28px veya 999px */
    background: #f8fafc; /* Çok açık gri/mavi bir arkaplan */
    
    /* Gölge ve Derinlik */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 2px 4px -1px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.8); /* İçten hafif bir ışık */
    
    /* Geçiş Efektleri */
    transition: all 0.2s ease;
    
    /* Diğer */
    outline: none; /* Odaklanma halkasını kaldır, kendimiz ekleyeceğiz */
    box-sizing: border-box; /* Padding genişliği etkilemesin */
    resize: none; /* textarea ise boyutlandırmayı kapat (isteğe bağlı) */
}

/* Odaklanma Durumu (Şık Parlama) */
#content:focus, 
#message_content:focus {
    border-color: #6366f1; /* Modern bir indigo rengi */
    background: #ffffff;
    box-shadow: 
        0 10px 15px -3px rgba(99, 102, 241, 0.15),
        0 4px 6px -2px rgba(99, 102, 241, 0.05);
}

/* Hover Durumu */
#content:hover, 
#message_content:hover {
    background: #ffffff;
    border-color: #cbd5e1; /* Açık gri bir kenarlık */
}

/* Placeholder (Yönlendirme Yazısı) Stili */
#content::placeholder,
#message_content::placeholder {
    color: #94a3b8;
    font-weight: 300;
    opacity: 1; /* Firefox için */
}

/* İsteğe bağlı: Yazı alanı büyütülmüş gibi bir his vermek için hafif büyüme efekti */
#content:active,
#message_content:active {
    transform: scale(1.01);
}

#main_input, #disabled_content, #main_load_content { height:40px; width:100%;}
.pboxed { position:absolute; bottom:50px; right:0; overflow:hidden; z-index:150; max-width:100% !important; height:400px !important; width:400px !important; }
.pboxed .pcontent { height:310px !important; }
.player_nowplaying{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  padding:8px 10px;
}
.player_nowplaying .np_label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  padding:4px 8px;
  white-space:nowrap;
}
.player_nowplaying .np_marquee{
  flex:1;
  min-width:0;
  overflow:hidden;
  position:relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.player_nowplaying .np_marquee_inner{
  display:inline-block;
  white-space:nowrap;
  padding-left: 100%;
  will-change: transform;
  animation: KayanYazi 18s linear infinite;
}
.player_nowplaying .np_marquee_inner{
  text-shadow: 0 0 12px rgba(255,255,255,.10);
}
@keyframes KayanYazi{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.player_nowplaying .np_marquee:hover .np_marquee_inner{
  animation-play-state: paused;
}
.player_meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.player_meta .meta_left,
.player_meta .meta_right{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.player_meta .meta_key{
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.player_meta .meta_val{
  font-size:12px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:160px;
}
.player_actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap;
}
.player_btn{
  height:32px;
  padding:0 27px;
  border-radius:20px;
  border:1px solid rgba(0,0,0,.15);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
#back_to_bottom{
  position: absolute;
  top: 53px;
  right: 12px;
  left: auto;
  transform: none;
  width: 42px;
  height: 42px;
  display: none;
  place-items: center;
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  border: 1px solid rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}
#back_to_bottom{
  text-align: center;
  line-height: 1;
  font-size: 16px;
  font-weight: 900;
}
#back_to_bottom:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.20);
  box-shadow: 0 18px 44px rgba(15,23,42,.16);
}
#back_to_bottom:active{
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
}
#back_to_bottom.show{
  display: grid;
  opacity: 1;
}
@media (max-width: 520px){
  #back_to_bottom{
    right: 11px;
    top: 78px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
}
#syMicSlots .syMicSlot{
 flex: 0 0 calc(
  (100% - (var(--syMicPadX) * 2) - (var(--syMicGap) * (var(--syMicCols) - 1)))
  / var(--syMicCols)
) !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:3px !important;
  height:54px !important;
  border-radius:14px !important;
  padding:6px 5px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow:0 5px 14px rgba(0,0,0,.06) !important;
  box-sizing:border-box;
  opacity:1 !important;
  visibility:visible !important;
  transition:transform .12s ease, border-color .18s ease, box-shadow .18s ease;
}
#syMicSlots .syMicSlot:hover{ transform: translateY(-1px); }
#syMicSlots .syMicSlot.isEmpty{ cursor:pointer !important; }
#syMicSlots .syMicSub,
#syMicSlots .syMicActionBtn{ display:none !important; }
#syMicSlots .syMicAvatarWrap{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  flex:0 0 auto;
  display:block !important;
  margin-top:2px !important;
}
#syMicSlots .syMicAvatar{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#syMicSlots .syMicNick{
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-height:1.05 !important;
  font-size:9.8px !important;
  font-weight:900 !important;
  padding:0 2px !important;
  margin-top:2px !important;
  opacity:.9;
}
#syMicSlots.syMicSlots.isScroll .syMicSlot{
  flex:0 0 56px !important;   /* istersen 52-60 arası */
}
#syMicSlots.syMicSlots.isScroll{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  justify-content:flex-start !important;
}
#syMicSlots.syMicSlots{
  --syMicGap: 15px;
  --syMicPadX: 0px;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap: var(--syMicGap) !important;
  padding:7px var(--syMicPadX) !important;
  overflow:hidden !important;
  box-sizing:border-box;
}
.syMicTitle{display:flex;align-items:center;gap:8px;min-width:0}
.syMicTitleIcon{
  width:30px;height:30px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.08);
  flex:0 0 auto;
}
.syMicTitleIcon i{font-size:16px;opacity:.85}
.syMicTitleText{min-width:0}
.syMicTitleText b{display:block;font-size:12px;font-weight:1000;line-height:1.1}
.syMicTitleText span{
  display:block;
  font-size:10.5px;
  opacity:.7;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}
.syMicCount{
  flex:0 0 auto;
  padding:6px 8px;
  border-radius:999px;
  font-weight:1000;
  font-size:11px;
  border:1px solid rgba(0,0,0,.08);
}
.syMicHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  box-sizing:border-box;
}
#syMicBar{ display:block !important; width:100%; }
.syMicCard{
  position:relative;
  z-index:99 !important;
  width:calc(100% - 20px);
  max-width:560px !important;
  margin:0 auto;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 26px rgba(0,0,0,.08);
  overflow:hidden;
  box-sizing:border-box;
}
#syMicSlots .syMicSlot.isSpeaking{
  border-color: rgba(46,204,113,.55) !important;
  box-shadow: 0 9px 18px rgba(46,204,113,.12) !important;
}
@media (max-width: 520px){
  .syMicTitleText span{ display:none; }
  #syMicSlots.syMicSlots{
    --syMicGap: 5px;
    --syMicPadX: 0px;
    padding:6px var(--syMicPadX) !important;
  }
  #syMicSlots .syMicSlot{
    height:52px !important;
    padding:5px 4px !important;
    gap:2px !important;
    border-radius:13px !important;
  }
  #syMicSlots .syMicAvatarWrap{ width:20px; height:20px; }
  #syMicSlots .syMicNick{
    font-size:9.4px !important;
    -webkit-line-clamp:2 !important;
  }
}
@media (max-width: 380px){
  #syMicSlots.syMicSlots{ --syMicGap: 4px; --syMicPadX: 6px; }
  #syMicSlots .syMicAvatarWrap{ width:19px; height:19px; }
  #syMicSlots .syMicNick{ font-size:9.2px !important; }
}
.vct_1{
  background:#2b2f3a;
  color:#fff;
}
.vct_10{
  background:#1e88e5;
  color:#fff;
}
.vct_50{
  background:#00a884;
  color:#fff;
}
.vct_100{
  background:#7c4dff;
  color:#fff;
}
.vct_500{
  background:#ff6d00;
  color:#fff;
}
.vct_1000{
  background:#d81b60;
  color:#fff;
}
/* ===== MODERN ZİYARETÇİ KARTLARI - LITE THEME ===== */
:root {
  --visit-bg: rgba(255, 255, 255, 0.7);
  --visit-bg-hover: rgba(255, 255, 255, 0.9);
  --visit-border: rgba(0, 0, 0, 0.06);
  --visit-border-hover: rgba(0, 0, 0, 0.12);
  --visit-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  --visit-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08);
  --visit-count-bg: rgba(59, 130, 246, 0.1);
  --visit-count-color: #3b82f6;
  --visit-avatar-border: rgba(255, 255, 255, 0.5);
  --visit-text-primary: #1e293b;
  --visit-text-secondary: #64748b;
}

/* Dark theme variables */
@media (prefers-color-scheme: dark) {
  :root {
    --visit-bg: rgba(30, 41, 59, 0.7);
    --visit-bg-hover: rgba(30, 41, 59, 0.9);
    --visit-border: rgba(255, 255, 255, 0.06);
    --visit-border-hover: rgba(255, 255, 255, 0.12);
    --visit-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --visit-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.3);
    --visit-count-bg: rgba(59, 130, 246, 0.2);
    --visit-count-color: #60a5fa;
    --visit-avatar-border: rgba(255, 255, 255, 0.2);
    --visit-text-primary: #f1f5f9;
    --visit-text-secondary: #94a3b8;
  }
}

/* ===== ZİYARETÇİ LİSTESİ ===== */
.visit_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px;
}

/* ===== ZİYARETÇİ ÖĞESİ ===== */
.visit_item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  
  /* Modern cam efekti */
  background: var(--visit-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* Border ve gölge */
  border: 1px solid var(--visit-border);
  border-radius: 18px;
  box-shadow: var(--visit-shadow);
  
  /* Animasyon */
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
  
  /* Hover efekti için */
  cursor: pointer;
}

.visit_item:hover {
  background: var(--visit-bg-hover);
  border-color: var(--visit-border-hover);
  box-shadow: var(--visit-shadow-hover);
  transform: translateY(-2px);
}

/* Aktif/Pressed durumu */
.visit_item:active {
  transform: translateY(0) scale(0.98);
}

/* ===== ZİYARETÇİ AVATARI ===== */
.visit_avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  overflow: hidden;
  flex: 0 0 48px;
  
  /* Avatar border ve gölge */
  border: 2px solid var(--visit-avatar-border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  
  /* Animasyon */
  transition: all 0.25s ease;
}

.visit_item:hover .visit_avatar {
  transform: scale(1.02);
  border-color: var(--visit-count-color);
}

.visit_avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.visit_item:hover .visit_avatar img {
  transform: scale(1.05);
}

/* ===== ZİYARETÇİ BİLGİ ALANI ===== */
.visit_info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===== ZİYARETÇİ İSİM ===== */
.visit_name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--visit-text-primary);
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  transition: color 0.2s ease;
}

.visit_item:hover .visit_name {
  color: var(--visit-count-color);
}

/* ===== ZİYARETÇİ METADATA (tarih/saat vb.) ===== */
.visit_meta {
  font-size: 11px;
  color: var(--visit-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
}

.visit_meta i {
  font-size: 10px;
}

/* ===== ZİYARET SAYACI ===== */
.visit_count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  flex: 0 0 auto;
  
  /* Sayıcı stili */
  background: var(--visit-count-bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--visit-count-color);
  font-weight: 700;
  font-size: 13px;
  
  /* Animasyon */
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.visit_item:hover .visit_count {
  background: color-mix(in srgb, var(--visit-count-color) 15%, transparent);
  transform: scale(1.02);
  border-color: var(--visit-count-color);
}

.visit_count i {
  font-size: 12px;
  opacity: 0.9;
  transition: transform 0.2s ease;
}

.visit_item:hover .visit_count i {
  transform: translateX(2px);
}

/* ===== ZİYARET SAYI METNİ ===== */
.visit_count_text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  
  /* Metin stili */
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: var(--visit-count-color);
  color: white;
  
  /* Animasyon */
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.visit_item:hover .visit_count_text {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* ===== ZİYARET RESİM İKONU ===== */
.visit_count_image {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.visit_item:hover .visit_count_image {
  transform: rotate(5deg);
}

/* ===== ZİYARET PROFİL BAĞLANTISI ===== */
.visit_link {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}

/* ===== ZİYARETÇİ LİSTESİ KONTEYNERİ ===== */
#profil_ziyaret {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Scrollbar stilleri */
  scrollbar-width: thin;
  scrollbar-color: var(--visit-text-secondary) transparent;
  
  padding: 6px 4px;
  margin: 0;
}

/* Webkit scrollbar (Chrome, Safari, Edge) */
#profil_ziyaret::-webkit-scrollbar {
  width: 4px;
}

#profil_ziyaret::-webkit-scrollbar-track {
  background: transparent;
}

#profil_ziyaret::-webkit-scrollbar-thumb {
  background: var(--visit-text-secondary);
  border-radius: 20px;
  opacity: 0.5;
}

#profil_ziyaret::-webkit-scrollbar-thumb:hover {
  background: var(--visit-count-color);
}

/* ===== ZİYARETÇİ AYIRICI ===== */
.visit_divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--visit-border-hover),
    transparent
  );
  margin: 8px 0;
}

/* ===== ZİYARETÇİ BADGE'İ (yeni ziyaretçi) ===== */
.visit_badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--visit-bg);
  animation: visitPulse 1.5s ease-out infinite;
}

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

/* ===== ZİYARETÇİ GRUP BAŞLIĞI ===== */
.visit_group_title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--visit-text-secondary);
  padding: 12px 8px 4px;
}

/* ===== RESPONSIVE TASARIM ===== */
@media (max-width: 520px) {
  .visit_item {
    padding: 11px 12px;
    gap: 10px;
    border-radius: 16px;
  }
  
  .visit_avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
  }
  
  .visit_name {
    font-size: 13px;
  }
  
  .visit_meta {
    font-size: 10px;
  }
  
  .visit_count {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .visit_count_text {
    min-width: 24px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
  }
  
  .visit_count_image {
    width: 18px;
    height: 18px;
  }
  
  #profil_ziyaret {
    max-height: 300px;
  }
}

/* Çok küçük ekranlar */
@media (max-width: 360px) {
  .visit_item {
    padding: 8px 10px;
    gap: 8px;
  }
  
  .visit_avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
  }
  
  .visit_info {
    gap: 2px;
  }
  
  .visit_name {
    font-size: 12px;
  }
  
  .visit_meta {
    font-size: 9px;
    gap: 4px;
  }
  
  .visit_count {
    padding: 4px 8px;
    gap: 4px;
  }
  
  .visit_count_text {
    min-width: 20px;
    height: 16px;
    font-size: 10px;
  }
}

/* Tablet boyutu */
@media (min-width: 521px) and (max-width: 768px) {
  .visit_item {
    padding: 12px 14px;
  }
  
  .visit_avatar {
    width: 46px;
    height: 46px;
  }
  
  #profil_ziyaret {
    max-height: 340px;
  }
}

/* Animasyon tercihi kapalı olanlar için */
@media (prefers-reduced-motion: reduce) {
  .visit_item,
  .visit_item:hover,
  .visit_avatar,
  .visit_avatar img,
  .visit_count,
  .visit_count_text,
  .visit_count_image,
  .visit_badge {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Yüksek kontrast modu */
@media (prefers-contrast: high) {
  .visit_item {
    border: 2px solid currentColor;
    backdrop-filter: none;
    background: var(--bg-primary, #fff);
  }
  
  .visit_count {
    border: 1px solid currentColor;
  }
  
  .visit_avatar {
    border: 2px solid currentColor;
  }
}

/* Yatay mobil görünümü */
@media (max-height: 500px) and (orientation: landscape) {
  #profil_ziyaret {
    max-height: 250px;
  }
  
  .visit_item {
    padding: 8px 12px;
  }
}

/* Modern tarayıcılar için ek efekt */
@supports (backdrop-filter: blur(10px)) {
  .visit_item {
    background: var(--visit-bg);
  }
}

/* Boş durum mesajı */
.visit_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--visit-text-secondary);
  font-size: 14px;
  text-align: center;
  gap: 12px;
}

.visit_empty i {
  font-size: 48px;
  opacity: 0.3;
}
.profile_stars{
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
  user-select: none;
}
.dogrulanmis_user {width: 20px;height: 20px;position: absolute;bottom: 5px;right: 73px;z-index: 30;border: 2px solid #fff;border-radius: 50px;}
.device_icon,
.sex_icon{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:5;

	width:28px;
	height:28px;
	border-radius:999px;

	display:flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
}
.device_icon--left{ left:-24px; }
.sex_icon--right{ right:-24px; }
@media (max-width:480px){
	.device_icon--left{ left:-24px; }
	.sex_icon--right{ right:-24px; }
	.device_icon, .sex_icon{ width:26px; height:26px; font-size:13px; }
}
/* Modern Switch Tasarımı */
.switch_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 12px 20px;
   border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.switch_item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.switch_item:active {
    transform: scale(0.99);
}

/* Gradient Border Effect */
.switch_item::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 16px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.05) 40%,
            rgba(45, 212, 191, 0.15) 70%,
            rgba(255, 255, 255, 0.05));
    -webkit-mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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


.switch_item_text {
    flex: 1 1 auto;
    min-height: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.switch_item_text small {
    font-size: 12px;
    opacity: 0.6;
    font-weight: 400;
    margin-top: 2px;
}

/* Switch Container */
.switch_item_switch {
    width: 72px;
    flex: 0 0 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch_wrap {
    width: 60px;
    display: block;
}

/* Base Switch */
.bswitch {
    width: 60px;
    height: 36px;
    padding: 3px;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bswitch::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 999px;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.15), 
        rgba(255, 255, 255, 0.02));
    pointer-events: none;
}
.bswitch::after {
    content: "";
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 0.15), 
        transparent 60%),
        radial-gradient(circle at 70% 70%, 
        rgba(0, 0, 0, 0.2), 
        transparent 60%);
    opacity: 0.5;
    pointer-events: none;
}
.bball_wrap {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Ball */
.bball {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    position: relative;
    background: radial-gradient(circle at 30% 25%, 
        rgba(255, 255, 255, 0.95), 
        rgba(255, 255, 255, 0.6) 50%, 
        #e0e8f5 80%);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* Ball Inner Glow */
.bball::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    opacity: 0.5;
    pointer-events: none;
}

/* Ball Highlight */
.bball::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 18px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.8), 
        rgba(255, 255, 255, 0.2));
    opacity: 0.7;
    pointer-events: none;
}

/* Off State */
.offswitch {
    background: linear-gradient(135deg, #2a2f3a, #1e2229);
}

.offball {
    transform: translateX(0);
}

/* On State */
.onswitch {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 8px 20px rgba(6, 182, 212, 0.3),
        0 0 0 2px rgba(6, 182, 212, 0.1);
}

.onball {
    transform: translateX(24px);
}

/* On State Ball Effects */
.onswitch .bball {
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        0 0 15px rgba(6, 182, 212, 0.3);
}

/* Shine Animation for On State */
.onswitch::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transform: rotate(30deg);
    animation: switchShine 2s ease-in-out infinite;
    opacity: 0;
    pointer-events: none;
}

@keyframes switchShine {
    0% {
        transform: translateX(-100%) rotate(30deg);
        opacity: 0;
    }
    20% {
        opacity: 0.5;
    }
    40% {
        transform: translateX(100%) rotate(30deg);
        opacity: 0;
    }
    100% {
        transform: translateX(200%) rotate(30deg);
        opacity: 0;
    }
}

/* Focus State */
.bswitch:focus-visible {
    outline: none;
    box-shadow: 
        0 0 0 3px rgba(6, 182, 212, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dark Mode Optimization */
@media (prefers-color-scheme: dark) {
    .switch_item {
        background: rgba(0, 0, 0, 0.2);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .onswitch::after {
        animation: none;
    }
    
    .switch_item,
    .bswitch,
    .bball {
        transition: none;
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .switch_item {
        padding: 10px 16px;
    }
    
    .switch_item_text {
        font-size: 14px;
    }
    
    .switch_item_text small {
        font-size: 11px;
    }
}

/* Optional: Theme Switch Specific */
#theme_switch_item {
    cursor: pointer;
    user-select: none;
}

#theme_switch_item:active {
    transform: scale(0.98);
}

/* Loading State */
.bswitch.loading {
    opacity: 0.7;
    pointer-events: none;
}

.bswitch.loading .bball {
    animation: ballPulse 1s ease-in-out infinite;
}

@keyframes ballPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
}
.work_button { display:none; }
.begeni{
	display:flex;
	align-items:center;
	gap:6px;
	text-shadow:none;
}
.like_youtube{
	margin-top: 6px;
	float:none;
	cursor:pointer;
	padding: 3px 4px;
	border-radius:999px;
	display:flex;
	align-items:center;
	gap:6px;
	user-select:none;
	transition:transform .15s ease, background .15s ease, opacity .15s ease;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.08);
}
.like_youtube img{
	width:20px;
	height:20px;
	display:block;
}
.like_youtube:hover{
	transform:translateY(-1px);
	background:rgba(255,255,255,.10);
}
.like_youtube.is_busy,
.yt_react.is_busy{
	opacity:.55;
	pointer-events:none;
	transform:none;
}
.begeni.is_locked .like_youtube{
	opacity:.35;
	pointer-events:none;
}
.bicon{
	margin-left:0;
	font-size:11px;
	font-weight:700;
	letter-spacing:.2px;
}
.bicon.begen{
	color:#5e91ff;
	text-shadow:0 0 12px rgba(94,145,255,.25);
}
.bicon.begenme{
	color:#ba2c2a;
	text-shadow:0 0 12px rgba(186,44,42,.20);
}
.bicon.sev{
	color:#d46eab;
	text-shadow:0 0 12px rgba(212,110,171,.25);
}
.like_youtube[data-action="begen"]{ border-color:rgba(94,145,255,.22); }
.like_youtube[data-action="begenme"]{ border-color:rgba(186,44,42,.22); }
.like_youtube[data-action="sev"]{ border-color:rgba(212,110,171,.22); }
.like_youtube[data-action="begen"]:hover{ background:rgba(94,145,255,.10); }
.like_youtube[data-action="begenme"]:hover{ background:rgba(186,44,42,.10); }
.like_youtube[data-action="sev"]:hover{ background:rgba(212,110,171,.10); }
.private_content .begeni{ display:none; }
img.youtube_chat_icon{
	width:16px;
	height:16px;
	vertical-align:middle;
}
@media (max-width: 480px){
	.like_youtube{
		padding:6px 8px;
	}
	.bicon{
		font-size:10px;
	}
	.like_youtube img{
		width:18px;
		height:18px;
	}
}
#chat_logs_container .yt_fly_overlay{
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2147483647;
	overflow: hidden;
}
#chat_logs_container .yt_fly_item{
	position: absolute;
	width: 30px;
	height: 30px;
	opacity: 0;
	transform: translate3d(0,0,0) scale(1);
	animation: ytFlyUpBody var(--dur) ease-out forwards;
	filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
	will-change: transform, opacity;
}
#chat_logs_container .yt_fly_item img{
	width:100%;
	height:100%;
	display:block;
}
@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; }
}
#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);
  background: rgba(120,200,255,.08);
}
.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%;
  }
}
.sohbet-yukleniyor_bars {
  font-family: arial;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
}
.sohbet-yukleniyor_bars h1 {
	 font-size: 26px;
	 display: block;
	 text-align: center;
	 color: #fff;
	 padding: 50px 20px;
	 font-weight: 300;
	 font-family: "Archivo Narrow", sans-serif;
}
 .sohbet-yukleniyorr {
	 position: fixed;
	 left: 50%;
	 top: 50%;
	 margin-top: -50px;
	 margin-left: -50px;
	 width: 100px;
	 height: 100px;
	 text-align: center;
}
 .sohbet-yukleniyorr:after {
	 content: "";
	 position: absolute;
	 left: 0;
	 right: 0;
	 bottom: -20px;
	 margin: auto;
	 width: 90px;
	 height: 6px;
	 z-index: 1;
	 background-color: rgba(0, 0, 0, 0.1);
	 -webkit-filter: blur(2px);
	 filter: blur(2px);
	 -webkit-border-radius: 100%;
	 -moz-border-radius: 100%;
	 border-radius: 100%;
	 -webkit-animation: shadow 0.5s ease infinite alternate;
	 -moz-animation: shadow 0.5s ease infinite alternate;
	 animation: shadow 0.5s ease infinite alternate;
}
 .sohbet-yukleniyorr .sohbet-yukleniyorrr {
	 font-size: 12px;
	 letter-spacing: 0.1em;
	 display: block;
	 color: white;
	 position: relative;
	 top: 25px;
	 z-index: 2;
	 -webkit-animation: text 0.5s ease infinite alternate;
	 -moz-animation: text 0.5s ease infinite alternate;
	 animation: text 0.5s ease infinite alternate;
}
.sohbet-yukleniyorrrr {
	 width: 50px;
	 height: 50px;
	 display: inline-block;
	 -webkit-transform: rotate(45deg);
	 -moz-transform: rotate(45deg);
	 transform: rotate(45deg);
	 font-size: 0;
}
 .sohbet-yukleniyorrrr span {
	 position: relative;
	 width: 25px;
	 height: 25px;
	 -webkit-transform: scale(1.1);
	 -moz-transform: scale(1.1);
	 transform: scale(1.1);
	 display: inline-block;
}
 .sohbet-yukleniyorrrr span::before {
	 content: "";
	 background-color: white;
	 position: absolute;
	 left: 0;
	 top: 0;
	 display: block;
	 width: 25px;
	 height: 25px;
	 -moz-transform-origin: 100% 100%;
	 -ms-transform-origin: 100% 100%;
	 -webkit-transform-origin: 100% 100%;
	 transform-origin: 100% 100%;
	 -webkit-animation: folding 2.5s infinite linear both;
	 -moz-animation: folding 2.5s infinite linear both;
	 animation: folding 2.5s infinite linear both;
}
 .sohbet-yukleniyorrrr .syukleniyor {
	 -webkit-transform: rotateZ(90deg) scale(1.1);
	 -moz-transform: rotateZ(90deg) scale(1.1);
	 transform: rotateZ(90deg) scale(1.1);
}
 .sohbet-yukleniyorrrr .syukleniyor::before {
	 -webkit-animation-delay: 0.3s;
	 animation-delay: 0.3s;
	 background-color: #f2f2f2;
}
 .sohbet-yukleniyorrrr .slutfen {
	 -webkit-transform: rotateZ(270deg) scale(1.1);
	 -moz-transform: rotateZ(270deg) scale(1.1);
	 transform: rotateZ(270deg) scale(1.1);
}
 .sohbet-yukleniyorrrr .slutfen::before {
	 -webkit-animation-delay: 0.9s;
	 animation-delay: 0.9s;
	 background-color: #f2f2f2;
}
 .sohbet-yukleniyorrrr .sbekleyiniz {
	 -webkit-transform: rotateZ(180deg) scale(1.1);
	 -moz-transform: rotateZ(180deg) scale(1.1);
	 transform: rotateZ(180deg) scale(1.1);
}
 .sohbet-yukleniyorrrr .sbekleyiniz::before {
	 -webkit-animation-delay: 0.6s;
	 animation-delay: 0.6s;
	 background-color: #e6e6e6;
}
.yukleniyor-alt-yazilimci {
	 position: fixed;
	 left: 0;
	 width: 100%;
	 bottom: 10px;
	 text-align: center;
	 z-index: 9999;
	 font-family: arial;
	 color: #fff;
}
.yukleniyor-alt-yazilimci i {
	 font-style: normal;
	 color: #f50057;
	 font-size: 14px;
	 position: relative;
	 top: 2px;
}
.yukleniyor-alt-yazilimci a {
	 color: #fff;
	 text-decoration: none;
	 font-size: 26px;
}
.yukleniyor-alt-yazilimci a:hover {
	 text-decoration: underline;
}
.yukleniyor-alt-kabart {
	position: fixed;
	bottom: 20px;
	left: 0px;
	width: 100%;
	height: 50px;
}
.yukleniyor-alt-font {
	font-size: 20px
}
 @-webkit-keyframes folding {
	 0%, 10% {
		 -webkit-transform: perspective(140px) rotateX(-180deg);
		 -moz-transform: perspective(140px) rotateX(-180deg);
		 transform: perspective(140px) rotateX(-180deg);
		 -webkit-opacity: 0;
		 -moz-opacity: 0;
		 opacity: 0;
	}
	 25%, 75% {
		 -webkit-transform: perspective(140px) rotateX(0deg);
		 -moz-transform: perspective(140px) rotateX(0deg);
		 transform: perspective(140px) rotateX(0deg);
		 -webkit-opacity: 1;
		 -moz-opacity: 1;
		 opacity: 1;
	}
	 90%, 100% {
		 -webkit-transform: perspective(140px) rotateY(180deg);
		 -moz-transform: perspective(140px) rotateY(180deg);
		 transform: perspective(140px) rotateY(180deg);
		 -webkit-opacity: 0;
		 -moz-opacity: 0;
		 opacity: 0;
	}
}
#chat_right_data .load_more { margin-bottom:50px; }
#chat_right_data { overflow:hidden; overflow-y:auto; position:relative; width:100%; padding-bottom:60px; }
.cright2 { position:absolute; top:51px; right:0; top:50px; overflow:hidden; z-index:201; padding-bottom:0px; display:none; max-width:100% !important; }
.i_btm {
	font-size:16px;
    display: inline-block;
    transform: translateZ(0);
    will-change: transform;
}

.i_btm:hover {
    animation: .9s ibtmBalloonSoft cubic-bezier(.22, .95, .25, 1) both;
}
@keyframes ibtmBalloonSoft {
    0% {
        transform: translateZ(0) scale(1);
    }
    25% {
        transform: translateZ(0) scale(1.08);
    }
    50% {
        transform: translateZ(0) scale(0.98);
    }
    75% {
        transform: translateZ(0) scale(1.03);
    }
    100% {
        transform: translateZ(0) scale(1);
    }
}
:root {
  /* Lamba renkleri - Modern tema */
  --lamp-glow-core: rgba(255, 240, 180, 0.4);
  --lamp-glow-medium: rgba(255, 235, 170, 0.18);
  --lamp-glow-soft: rgba(255, 225, 140, 0.08);
  --lamp-glow-fade: transparent;
  
  --lamp-bulb-core: rgba(255, 245, 200, 0.98);
  --lamp-bulb-inner: rgba(255, 235, 170, 0.7);
  --lamp-bulb-outer: rgba(255, 220, 130, 0.3);
  
  --lamp-bulb-bg: rgba(255, 250, 220, 0.25);
  --lamp-bulb-border: rgba(255, 245, 200, 0.6);
  --lamp-cord-light: rgba(255, 235, 170, 0.7);
  --lamp-cord-default: rgba(255, 255, 255, 0.3);
  
  --lamp-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
  --lamp-glow-shadow: 0 0 40px rgba(255, 200, 100, 0.3);
  --lamp-dim: rgba(0, 0, 0, 0.4);
  
  /* Konum değişkenleri - ÜSTTE */
  --lamp-position-top: 0px;
  --lamp-glow-center-x: 50%;
  --lamp-glow-center-y: 80px; /* Işık merkezi yüksekliği */
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --lamp-glow-core: rgba(255, 220, 140, 0.35);
    --lamp-glow-medium: rgba(255, 200, 120, 0.15);
    --lamp-glow-soft: rgba(255, 180, 100, 0.06);
    --lamp-dim: rgba(0, 0, 0, 0.6);
  }
}

/* ===== LAMBA ANA KONTEYNER ===== */
.lampContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 160px; /* Varsayılan yükseklik */
  pointer-events: none;
  z-index: 999990;
  overflow: hidden;
}

/* ===== LAMBA IŞIK KATMANI - ÜSTTE ===== */
.lampLight {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh; /* Tüm yükseklik */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1);
  z-index: 999991;
  
  /* Işık gradienti - ÜST merkezli */
  background: radial-gradient(
    circle at var(--lamp-glow-center-x) var(--lamp-glow-center-y),
    var(--lamp-glow-core) 0%,
    var(--lamp-glow-medium) 25%,
    var(--lamp-glow-soft) 45%,
    var(--lamp-glow-fade) 70%
  );
  
  /* Performans iyileştirmesi */
  will-change: opacity;
  pointer-events: none;
}

/* Işık aktif */
.lampLight.isOn {
  opacity: 1;
}

/* ===== LAMBA KARARTMA KATMANI ===== */
.lampDim {
  position: fixed;
  inset: 0;
  background: var(--lamp-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1);
  z-index: 999992;
  
  /* Modern karartma efekti */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Karartma aktif */
.lampDim.isDim {
  opacity: 1;
  pointer-events: auto;
}

/* ===== LAMBA FİZİKSEL PARÇALAR - ÜSTTE ===== */
.lampPhysical {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 120px;
  pointer-events: auto;
  z-index: 999993;
  cursor: pointer;
}

/* ===== LAMBA KABLOSU ===== */
.lampCord {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
  height: 55px; /* Daha uzun kablo */
  
  /* Kablo stili - üstten sarkma efekti */
  background: linear-gradient(
    to bottom,
    var(--lamp-cord-light) 0%,
    var(--lamp-cord-default) 40%,
    rgba(200, 200, 200, 0.2) 100%
  );
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  
  transition: all 0.25s ease;
  border-radius: 4px 4px 0 0;
}

/* Lamba açıkken kablo */
.lampSwitch.isOn .lampCord {
  background: linear-gradient(
    to bottom,
    var(--lamp-cord-light) 0%,
    rgba(255, 235, 170, 0.8) 60%,
    rgba(255, 220, 130, 0.3) 100%
  );
  box-shadow: 0 4px 20px rgba(255, 200, 100, 0.4);
  height: 60px; /* Açıkken hafif uzama efekti */
}

/* ===== LAMBA AMPULÜ ===== */
.lampBulb {
  position: absolute;
  left: 50%;
  top: 13px; /* Kablodan sonra başla */
  transform: translateX(-50%);
  width: 44px;
  height: 58px;
  border-radius: 26px 26px 20px 20px;
  
  /* Cam ampul efekti */
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--lamp-shadow);
  
  /* Cam efekti */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  cursor: pointer;
}

/* Ampul üst kapağı */
.lampBulb:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  width: 24px;
  height: 18px;
  border-radius: 12px 12px 10px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}

/* Ampul iç ışığı */
.lampBulb:after {
  content: "";
  position: absolute;
  inset: 10px 8px 12px 8px;
  border-radius: 20px;
  transition: all 0.25s ease;
  opacity: 0.7;
}

/* Hover efekti */
.lampPhysical:hover .lampBulb {
  transform: translateX(-50%) translateY(2px);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.4);
}

.lampPhysical:hover .lampCord {
  height: 58px;
}

/* Lamba açıkken ampul */
.lampSwitch.isOn .lampBulb {
  background: var(--lamp-bulb-bg);
  border-color: var(--lamp-bulb-border);
  box-shadow: 
    var(--lamp-shadow),
    var(--lamp-glow-shadow);
}

/* Lamba açıkken ampul iç ışığı */
.lampSwitch.isOn .lampBulb:after {
  background: radial-gradient(
    circle at 50% 40%,
    var(--lamp-bulb-core) 0%,
    var(--lamp-bulb-inner) 50%,
    var(--lamp-bulb-outer) 80%,
    transparent 100%
  );
  box-shadow: 0 0 30px rgba(255, 200, 100, 0.6);
  opacity: 1;
}

/* ===== MOBİL YÜKSEKLİK ARTIŞI - ÖNEMLİ KISIM ===== */
@media (max-width: 768px) {
  /* Lamba konteyner yüksekliği artar */
  .lampContainer {
    height: 220px; /* Mobilde daha yüksek */
  }
  
  /* Işık merkezi aşağı kayar - yükseklik arttı belirtisi */
  .lampLight {
    --lamp-glow-center-y: 140px; /* Mobilde ışık merkezi aşağıda */
  }
  
  /* Fiziksel lamba aşağı kayar */
  .lampPhysical {
    top: 20px; /* Biraz aşağıda başlar */
    height: 160px;
  }
  
  /* Kablo uzar - yükseklik arttığını gösterir */
  .lampCord {
    height: 80px; /* Mobilde daha uzun kablo */
    background: linear-gradient(
      to bottom,
      var(--lamp-cord-light) 0%,
      var(--lamp-cord-default) 30%,
      rgba(200, 200, 200, 0.15) 100%
    );
  }
  
  /* Ampul aşağı iner - sarkma efekti */
  .lampBulb {
    top: 75px; /* Kabloya göre daha aşağıda */
    width: 48px; /* Biraz daha büyük */
    height: 64px;
  }
  
  /* Açıkken kablo daha da uzar */
  .lampSwitch.isOn .lampCord {
    height: 85px; /* Mobilde açıkken ekstra uzun */
  }
  
  /* Işık gradienti mobilde daha geniş */
  .lampLight.isOn {
    background: radial-gradient(
      circle at 50% 140px,
      var(--lamp-glow-core) 0%,
      var(--lamp-glow-medium) 30%,
      var(--lamp-glow-soft) 55%,
      var(--lamp-glow-fade) 80%
    );
  }
}

/* ===== KÜÇÜK MOBİL (iPhone SE vb.) ===== */
@media (max-width: 480px) {
  .lampContainer {
    height: 260px; /* Daha da yüksek */
  }
  
  .lampLight {
    --lamp-glow-center-y: 170px; /* Işık merkezi iyice aşağıda */
  }
  
  .lampPhysical {
    top: 25px;
  }
  
  .lampCord {
    height: 95px; /* Çok daha uzun kablo - yükseklik arttı */
  }
  
  .lampSwitch.isOn .lampCord {
    height: 100px;
  }
  
  .lampBulb {
    top: 11px;
    width: 46px;
    height: 62px;
  }
  
  /* Görsel yükseklik göstergesi - gradient genişler */
  .lampLight.isOn {
    background: radial-gradient(
      circle at 50% 170px,
      var(--lamp-glow-core) 0%,
      var(--lamp-glow-medium) 35%,
      var(--lamp-glow-soft) 60%,
      var(--lamp-glow-fade) 85%
    );
  }
  
  /* Yükseklik arttı göstergesi - ekstra çizgi */
  .lampCord:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0.6;
    animation: pullDown 2s ease-in-out infinite;
  }
  
  @keyframes pullDown {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
    50% { transform: translateX(-50%) translateY(5px); opacity: 0.8; }
  }
}

/* ===== ÇOK KÜÇÜK EKRANLAR ===== */
@media (max-width: 360px) {
  .lampContainer {
    height: 280px;
  }
  
  .lampLight {
    --lamp-glow-center-y: 190px;
  }
  
  .lampCord {
    height: 105px;
  }
  
  .lampBulb {
    top: 100px;
  }
}

/* ===== TABLET BOYUTU ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .lampContainer {
    height: 180px;
  }
  
  .lampLight {
    --lamp-glow-center-y: 100px;
  }
  
  .lampCord {
    height: 65px;
  }
  
  .lampBulb {
    top: 60px;
  }
}

/* ===== YATAY MOBİL ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .lampContainer {
    height: 140px; /* Yatayda daha alçak */
  }
  
  .lampLight {
    --lamp-glow-center-y: 70px;
  }
  
  .lampPhysical {
    top: 5px;
  }
  
  .lampCord {
    height: 45px;
  }
  
  .lampBulb {
    top: 40px;
    width: 38px;
    height: 50px;
  }
}

/* ===== YÜKSEKLİK GÖSTERGESİ - MOBİLDE ===== */
.lampHeightIndicator {
  display: none;
}

@media (max-width: 768px) {
  .lampHeightIndicator {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 235, 170, 0.5),
      rgba(255, 200, 100, 0.8),
      rgba(255, 235, 170, 0.5),
      transparent
    );
    z-index: 999999;
    animation: heightGlow 3s ease-in-out infinite;
    pointer-events: none;
  }
  
  @keyframes heightGlow {
    0%, 100% { opacity: 0.3; height: 4px; }
    50% { opacity: 0.8; height: 6px; }
  }
}

/* ===== ANİMASYONLAR ===== */
@keyframes lampSway {
  0% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(0.3deg); }
  75% { transform: translateX(-50%) rotate(-0.3deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

.lampPhysical {
  animation: lampSway 8s ease-in-out infinite;
  transform-origin: top center;
}

/* Hareket tercihi kapalı */
@media (prefers-reduced-motion: reduce) {
  .lampPhysical,
  .lampCord:after,
  .lampHeightIndicator {
    animation: none !important;
  }
}

/* ===== YÜKSEKLİK ETİKETİ ===== */
.lampHeightLabel {
  display: none;
}

@media (max-width: 768px) {
  .lampHeightLabel {
    display: block;
    position: fixed;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 999999;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    opacity: 0.6;
  }
  
  .lampHeightLabel:before {
    content: "⬆️ Mobil yükseklik +" attr(data-height);
  }
}

/* ===== IŞIK YOĞUNLUĞU ===== */
.lampLight.intense {
  --lamp-glow-core: rgba(255, 240, 180, 0.5);
  --lamp-glow-medium: rgba(255, 225, 140, 0.25);
}

.lampLight.soft {
  --lamp-glow-core: rgba(255, 235, 170, 0.3);
  --lamp-glow-medium: rgba(255, 220, 130, 0.12);
}
/* ===== SİNEMA MODU - MOBİLDE YARI EKRAN ===== */
:root {
  --cinema-border: rgba(0, 0, 0, 0.08);
  --cinema-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  
  /* Aspect ratio - varsayılan */
  --cinema-ratio: 35%;
  
  /* Mobil yarı ekran değişkenleri */
  --mobile-half-screen: 55%; /* Ekranın yarısını geçen değer */
  --mobile-small-half: 65%;  /* Küçük ekranda daha da büyük */
  --mobile-large-half: 50%;  /* Büyük mobilde tam yarı */
}

/* ===== SİNEMA ANA KONTEYNER ===== */
.syCinemaWrap {
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--cinema-border);
  box-shadow: var(--cinema-shadow);
  position: relative;
  z-index: 5;
  pointer-events: auto;
  transition: all 0.25s ease;
}

/* ===== SİNEMA İÇ GÖVDE ===== */
.syCinemaBody {
  padding: 12px;
}

/* ===== SİNEMA ORAN KORUYUCU ===== */
.syCinemaRatio {
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow: hidden;
  margin-top: -12px;
  border: 1px solid var(--cinema-border);
  border-radius: 12px 12px 0 0;
  background: #000;
}

/* Aspect ratio için pseudo-element */
.syCinemaRatio::before {
  content: "";
  display: block;
  padding-top: var(--cinema-ratio);
  transition: padding-top 0.3s ease;
}

/* ===== SİNEMA FRAME ===== */
.syCinemaFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  border: 0;
  object-fit: cover;
  opacity: 0;
  animation: frameFadeIn 0.5s ease forwards;
}

@keyframes frameFadeIn {
  to { opacity: 1; }
}
@media (max-width: 768px) {
  .syCinemaRatio::before {
    padding-top: 55%;
  }
  .syCinemaFrame {
    height: 100%;
  }
  
  /* Görsel gösterge - yarı çizgisi */
  .syCinemaRatio::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    z-index: 25;
    pointer-events: none;
    opacity: 0.5;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
  }
  
  /* Yarı ekran göstergesi */
  .syCinemaWrap::after {
    position: absolute;
    bottom: 8px;
    right: 8px;
    backdrop-filter: blur(4px);
    color: white;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 30;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* ===== ORTA BOY MOBİL (600px - 768px) ===== */
@media (min-width: 601px) and (max-width: 768px) {
  .syCinemaRatio::before {
    padding-top: 52%; /* Yarıdan biraz fazla */
  }
}

/* ===== KÜÇÜK MOBİL (480px - 600px) ===== */
@media (min-width: 481px) and (max-width: 600px) {
  .syCinemaRatio::before {
    padding-top: 58%; /* Daha fazla */
  }
}

/* ===== ÇOK KÜÇÜK MOBİL (480px altı) ===== */
@media (max-width: 480px) {
  .syCinemaRatio::before {
    padding-top: 65%; /* Ekranın 2/3'ü */
  }
  
  .syCinemaWrap {
    border-radius: 14px;
  }
  
  .syCinemaBody {
    padding: 10px;
  }
  
  /* Yarı çizgisi daha belirgin */
  .syCinemaRatio::after {
    opacity: 0.7;
    border-top: 2px dashed rgba(255, 100, 100, 0.5);
  }
}

/* ===== EXTRA KÜÇÜK EKRAN (375px altı - iPhone SE) ===== */
@media (max-width: 375px) {
  .syCinemaRatio::before {
    padding-top: 70%; /* Ekranın 2/3'ünden fazla */
  }
}


/* ===== TABLET BOYUTU (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .syCinemaRatio::before {
    padding-top: 45%; /* Tablet için orta değer */
  }
}

/* ===== YATAY MOBİL ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .syCinemaRatio::before {
    padding-top: 40%; /* Yatayda daha alçak */
  }
  
  .syCinemaWrap::after {
    bottom: 400px;
    right: 400px;
  }
  
  .syCinemaRatio::after {
    display: none; /* Yatayda yarı çizgisi gizlenir */
  }
}
@media (width: 360px) and (height: 740px) {
  .syCinemaRatio::before {
    padding-top: 68%;
  }
}

/* iPhone X, 11, 12, 13 (375px) */
@media (width: 375px) and (height: 812px) {
  .syCinemaRatio::before {
    padding-top: 68%;
  }
}

/* iPhone 12 Pro Max, 13 Pro Max (390px) */
@media (width: 390px) and (height: 844px) {
  .syCinemaRatio::before {
    padding-top: 66%;
  }
}

/* iPhone 14 Pro Max (430px) */
@media (width: 430px) and (height: 932px) {
  .syCinemaRatio::before {
    padding-top: 64%;
  }
}

/* Google Pixel 5 (393px) */
@media (width: 393px) and (height: 851px) {
  .syCinemaRatio::before {
    padding-top: 67%;
  }
}
.half-screen-indicator {
  position: absolute;
  top: 5px;
  left: 5px;
  backdrop-filter: blur(2px);
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  z-index: 30;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* ===== YARI ÇİZGİSİ ANİMASYONU ===== */
@media (max-width: 768px) {
  @keyframes halfLinePulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
  }
  
  .syCinemaRatio::after {
    animation: halfLinePulse 2s ease-in-out infinite;
  }
}
.height-comparison {
  display: none;
}

@media (max-width: 768px) {
  .height-comparison {
    display: flex;
    position: absolute;
    bottom: 40px;
    left: 8px;
    gap: 4px;
    z-index: 30;
    pointer-events: none;
  }
  
  .height-bar {
    width: 20px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    position: relative;
  }
  
  .height-bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 2px;
  }
  
  .height-bar.default::after {
    height: 35%; /* Varsayılan */
  }
  
  .height-bar.mobile::after {
    height: 55%; /* Mobil yarı */
  }
  
  .height-bar-label {
    font-size: 8px;
    color: white;
    text-shadow: 0 1px 2px black;
  }
}

/* ===== TAM EKRAN MODU ===== */
.syCinemaWrap.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  border-radius: 0;
  border: none;
  transform: none !important;
}

.syCinemaWrap.fullscreen .syCinemaRatio {
  margin-top: 0;
  height: 100vh;
  border-radius: 0;
}

.syCinemaWrap.fullscreen .syCinemaRatio::before {
  padding-top: 0;
}

.syCinemaWrap.fullscreen .syCinemaBody {
  display: none;
}

/* ===== ERİŞİLEBİLİRLİK ===== */
@media (prefers-reduced-motion: reduce) {
  .syCinemaWrap,
  .syCinemaRatio::after,
  .half-screen-indicator {
    animation: none !important;
    transition: none !important;
  }
}