@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
/* body ve gece renkler*/
--body: #fff;
--bodyheader: #0372b9;;
--bodyhcolor: #fff;
--bodygece: #282828;
--bodygececolor: #F3F5F9;
--bodygecebildirim: #4b4b4b;
--bodylogo: #bad3ff;
--bodycolor: black;
--bodykenar: #d5d2d2;
--bodyrenk: #dfedff;
--mobilarkaplan: rgb(240,247,255);
--nickler: rgb(240,247,255);
--scrollwidth: 5px;
/* yetkili renkleir*/
--founder: #de335d;
--sop: #f57c51;
--op: #3a80a3;
--halfop:#5ab981;
--voice: #f7be5b;
--user: #555555;

/* tema renk2 */
--renk2body: #c81409;
--renk2arkaplan: #fff6f5;
--renk2color: #fcf1f0;
/* tema renk3 */
--renk3body: #c3a004;
--renk3arkaplan: #fffcf3;
--renk3color: #fffdf6;
/* tema renk3 */
--renk4body: #8C52FF;
--renk4arkaplan: #e1d2ff;
--renk4color: #e9ddff;
/* tema renk3 */
--renk5body: #00b39c;
--renk5arkaplan: #fff;
--renk5color: #fff;

--bg1:#f6f7fb;
--bg2:#ffffff;
--ink:#0b1220;
--muted:rgba(11,18,32,.65);
--line:rgba(11,18,32,.10);
--glass:rgba(255,255,255,.85);
--shadow:0 18px 50px rgba(11,18,32,.16);

--a1:#6366f1;
--a2:#ec4899;
--a3:#22c55e;

--r-xl:28px;
--r-lg:20px;
--r-md:16px;
--r-sm:12px;
}


html, body {
	margin: 0;
	padding: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
	background:
	radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 55%),
	radial-gradient(circle at top right, rgba(244, 114, 182, 0.16), transparent 60%),
	radial-gradient(circle at bottom, rgba(129, 140, 248, 0.18), transparent 60%),
	linear-gradient(145deg, var(--bg1), var(--bg2));
	color: var(--text-main);
	overflow: hidden;
}

/* Genel Arkaplan */
.acilis {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0d004a;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 6;
	font-family: 'Arial', sans-serif;
}

/.overlay{
	position:fixed; inset:0; z-index:50;
	display:flex; align-items:center; justify-content:center;
	padding:clamp(14px, 3vw, 22px);
	background:
	radial-gradient(circle at 20% 10%, rgba(99,102,241,.35), transparent 55%),
	radial-gradient(circle at 90% 80%, rgba(236,72,153,.28), transparent 60%),
	radial-gradient(circle at 50% 100%, rgba(34,197,94,.18), transparent 55%),
	rgba(0,0,0,.30);
	backdrop-filter: blur(14px);
}
.overlay{ background:
	radial-gradient(circle at 20% 10%, rgba(99,102,241,.22), transparent 55%),
	radial-gradient(circle at 90% 80%, rgba(236,72,153,.18), transparent 60%),
	radial-gradient(circle at 50% 100%, rgba(34,197,94,.10), transparent 55%),
	rgba(0,0,0,.20);
}

.login-card{
	width:min(980px, 100%);
	display:grid;
	grid-template-columns: 1.1fr .9fr;
	border-radius:var(--r-xl);
	overflow:hidden;
	border:1px solid var(--line);
	box-shadow: var(--shadow);
	background: var(--glass);
}
@media (max-width: 860px){
	.login-card{ grid-template-columns: 1fr; }
}

.login-hero{
	position:relative;
	padding: clamp(18px, 4vw, 34px);
	min-height: auto;
	background:
	radial-gradient(circle at 30% 15%, rgba(99,102,241,.45), transparent 55%),
	radial-gradient(circle at 80% 70%, rgba(236,72,153,.35), transparent 55%),
	radial-gradient(circle at 50% 100%, rgba(34,197,94,.18), transparent 60%),
	linear-gradient(135deg, rgba(2,6,23,.85), rgba(2,6,23,.55));
	color:#fff;
}
.login-hero{
	color:var(--ink);
	background:
	radial-gradient(circle at 30% 15%, rgba(99,102,241,.20), transparent 55%),
	radial-gradient(circle at 80% 70%, rgba(236,72,153,.16), transparent 55%),
	radial-gradient(circle at 50% 100%, rgba(34,197,94,.10), transparent 60%),
	linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.65));
}

.hero-bg{
	position:absolute; inset:-1px;
	background:
	radial-gradient(circle at 12% 10%, rgba(255,255,255,.18), transparent 40%),
	radial-gradient(circle at 90% 70%, rgba(255,255,255,.12), transparent 45%);
	pointer-events:none;
	mix-blend-mode: overlay;
}

.hero-top{
	position:relative;
	display:flex; align-items:center; justify-content:space-between;
	gap:12px;
}

.brand-badge{
	display:inline-flex; align-items:center; gap:8px;
	padding:8px 12px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.20);
	background: rgba(255,255,255,.08);
	font-weight:600;
	letter-spacing:.02em;
}
.brand-badge{
	border-color: rgba(11,18,32,.10);
	background: rgba(255,255,255,.70);
}
.brand-dot{
	width:10px; height:10px; border-radius:999px;
	background: linear-gradient(135deg, var(--a1), var(--a2));
	box-shadow: 0 0 0 4px rgba(99,102,241,.25);
}

.logo{
	position:relative;
	display:flex; align-items:center; gap:14px;
	margin-top: 26px;
}
.logo-mark{
	width:56px; height:56px; border-radius:18px;
	display:grid; place-items:center;
	font-weight:900; font-size:22px;
	background: linear-gradient(135deg, var(--a1), var(--a2));
	box-shadow: 0 20px 60px rgba(99,102,241,.40);
}
.logo-title{font-size:22px; font-weight:900; letter-spacing:.01em}
.logo-sub{margin-top:3px; color:#0b1220a6; font-size:13px}
body.light .logo-sub{ color:var(--muted); }

.hero-stats{
	position:relative;
	display:flex; flex-wrap:wrap;
	gap:10px;
	margin-top: 18px;
}
.stat{
	display:inline-flex; align-items:center; gap:10px;
	padding:10px 12px;
	border-radius: 14px;
	border:1px solid rgba(255,255,255,.18);
	background: rgba(255,255,255,.08);
	font-size: 13px;
}
body.light .stat{
	border-color: rgba(11,18,32,.10);
	background: rgba(255,255,255,.72);
}

.login-body{
	padding: clamp(18px, 4vw, 28px);
	display:flex;
	flex-direction:column;
	gap:14px;
}

.field label{
	display:block;
	font-size:12px;
	font-weight:700;
	letter-spacing:.03em;
	color: var(--muted);
	margin-bottom:8px;
	text-transform: uppercase;
}
.hint{
	margin-top:6px;
	font-size:12px;
	color: var(--muted);
}

.input{
	position:relative;
	display:flex;
	align-items:center;
	gap:10px;
	border-radius: 16px;
	border:1px solid var(--line);
	background: rgba(255,255,255,.88);
	padding: 12px 12px;
}

.input i{ color: var(--a1); }
.input input{
	flex:1;
	border:0;
	outline:0;
	background:transparent;
	color:var(--ink);
	font-size: 15px;
}
.input:focus-within{
	border-color: rgba(99,102,241,.65);
	box-shadow: 0 0 0 5px rgba(99,102,241,.18);
}

.icon-btn{
	width:40px; height:40px;
	border-radius: 14px;
	border:1px solid var(--line);
	background: rgba(255,255,255,.78);
	color: var(--ink);
	display:grid; place-items:center;
	cursor:pointer;
	transition: transform .12s ease, background .15s ease;
}

.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn.ghost{
	width:40px; height:40px;
	background: transparent;
	border-color: rgba(255,255,255,.20);
	color: inherit;
}

.icon-btn.inside{
	width:38px; height:38px;
	border-radius: 12px;
}

.cta{
	position:relative;
	border:0;
	outline:0;
	cursor:pointer;
	height:52px;
	border-radius: 18px;
	font-weight:800;
	font-size:15px;
	letter-spacing:.02em;
	display:flex; align-items:center; justify-content:center; gap:10px;
	color:#fff;
	background: linear-gradient(135deg, var(--a1), var(--a2));
	box-shadow: 0 18px 45px rgba(99,102,241,.35);
	overflow:hidden;
	transition: transform .12s ease;
}
.cta:hover{ transform: translateY(-1px); }
.cta:active{ transform: translateY(0px) scale(.99); }

.cta-glow{
	position:absolute; inset:-40%;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), transparent 55%);
	transform: translateX(-35%);
	animation: glowMove 2.6s ease-in-out infinite;
	pointer-events:none;
}
@keyframes glowMove{
	0%{ transform: translateX(-45%); opacity:.55 }
	50%{ transform: translateX(45%); opacity:.85 }
	100%{ transform: translateX(-45%); opacity:.55 }
}

.mini-row{
	display:flex; gap:10px; flex-wrap:wrap;
}
.chip{
	border:1px solid var(--line);
	background: rgba(255,255,255,.72);
	color: var(--ink);
	padding:10px 12px;
	border-radius: 14px;
	cursor:pointer;
	font-weight:700;
	font-size:13px;
	display:inline-flex; align-items:center; gap:8px;
}

.legal{
	margin-top: 4px;
	display:flex; flex-wrap:wrap; gap:8px;
	font-size:12px;
	color: var(--muted);
}
.legal a{ color: inherit; text-decoration:none; border-bottom:1px dashed rgba(99,102,241,.45); }
.legal .dot{ opacity:.6 }


.header {
	position: absolute;
	top: 0;
	left: 0px;
	width: 200px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 9px;
	border: 1px solid rgba(129, 140, 248, 0.35);
	backdrop-filter: blur(16px);
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.98), rgba(243, 244, 246, 0.98));
	border-color: rgba(209, 213, 219, 0.9);
	box-shadow: 0 16px 40px rgba(148, 163, 184, 0.3);
	
}
.header .topbar-left {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 13px;
}
/* === Bildirim Butonu Sayaç === */
.bildirim {
	position: relative;
}

.bildirim-sayi {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #ef4444;
	color: #fff;
	font-size: 10px;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}

/* === Bildirim Paneli === */
.bildirim-panel {
	position: absolute;
	top: 48px;
	left: 10px;
	width: 260px;
	max-height: 320px;
	background: #e7eeff;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	display: none;
	flex-direction: column;
	overflow: hidden;
	z-index: 9999;
}

/* Üst */
.bildirim-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	background: rgba(255,255,255,.05);
}

/* Temizle */
.bildirim-temizle {
	background: none;
	border: none;
	color: #f87171;
	font-size: 11px;
	cursor: pointer;
}

/* Liste */
.bildirim-list {
	padding: 8px;
	overflow-y: auto;
}

/* Tek bildirim */
.bildirim-item {
	background: rgba(255,255,255,.06);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 12px;
	margin-bottom: 6px;
	display: flex;
	gap: 8px;
	align-items: center;
	animation: slideIn .25s ease;
}

.bildirim-item i {
	color: #38bdf8;
}

/* Animasyon */
@keyframes slideIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.header .btn-menu {
	background: rgba(255, 255, 255, 0.98);
	border-color: rgba(209, 213, 219, 0.9);
	color: #111827;
}
.header .btn-icon {
	background: rgba(255, 255, 255, 0.98);
	border-color: rgba(209, 213, 219, 0.9);
	color: #111827;
}
/* Toggle kapsayıcı */
.header .toggle-pill {
	position: relative;
	width: 44px;
	height: 22px;
	border-radius: 999px;
	border: 1px solid rgba(148,163,184,0.5);
	background: #e5e7eb;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 0 3px;
	gap: 3px;
	font-size: 11px;
	user-select: none;
	transition: background .25s ease, border-color .25s ease;
}

/* ikonlar */
.header .toggle-pill span {
	flex: 1;
	text-align: center;
	opacity: .35;
	z-index: 2;
	pointer-events: none;
	transition: opacity .25s ease, color .25s ease;
}

/* knob */
.header .toggle-knob {
	position: absolute;
	left: 5px;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, #fef9c3, #facc15);
	box-shadow: 0 6px 14px rgba(0,0,0,0.5);
	transition: transform .25s ease, background .25s ease;
	z-index: 1;
}

/* ===================== */
/* 🌙 DARK MODE AÇIKKEN */
/* ===================== */

body.dark .header .toggle-pill {
	background: #1f2937;
}

body.dark .header .toggle-pill span:first-child {
	opacity: .25; /* güneş */
}

body.dark .header .toggle-pill span:last-child {
	opacity: 1;   /* ay */
	color: #facc15;
}

/* knob sağa kayar */
body.dark .toggle-knob {
	transform: translateX(22px);
	background: linear-gradient(135deg,#fefce8,#facc15);
	border-color: rgba(250,204,21,.6);
}

.header .nick-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 6px;
	border-radius: 14px;
	background: rgba(255,255,255,0.85);
	border: 1px solid rgba(209,213,219,0.9);
	cursor: pointer;
	transition: all .25s ease;
}

.header  .nick-trigger:hover {
	box-shadow: 0 10px 28px rgba(15,23,42,.18);
}

.header  .nick-avatar {
	width: 34px;
	height: 34px;
	border-radius: 12px;
	background: linear-gradient(135deg,#2563eb,#6366f1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
}

.header  .nick-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.header  .nick-text .hello {
	font-size: 11px;
	color: #6b7280;
}

.header  .nick-trigger i {
	font-size: 12px;
	color: #6b7280;
}



.header .topbar-center { 
	display: flex; 
	gap: 8px; 
	align-items: center; 
}
.header .topbar-right { 
	display: none;
}
.header .room-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	background: rgb(251 251 252);
	border: 1px solid rgba(148,163,184,0.4);
	cursor: pointer;
}

.header .opergir {
	background: #e0edff;   /* pastel mavi */
	color: #2563eb;
}

.header .kanalgir {
	background: #e7f8ee;   /* pastel yeşil */
	color: #15803d;
}

.header .nickdegistir {
	background: #fff4d6;   /* pastel sarı */
	color: #b45309;
}

.header .nickkayit {
	background: #ffe4e6;   /* pastel pembe/kırmızı */
	color: #be123c;
}

.header .ayarlar {
	background: #f1f5f9;   /* açık gri */
	color: #334155;
}

.header .hakkimizda {
	background: #f1f5f9;   /* aynı ton – denge */
	color: #475569;
}

.btn-menu {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.4);
	background: rgba(15, 23, 42, 0.9);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	cursor: pointer;
}
.btn-icon {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.4);
	background: rgba(15, 23, 42, 0.9);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	cursor: pointer;
}
#solbar {
	display: none;
}
#hmenu {
	display: none;
}
#satismenu {
	width: 110px;
	font-size: 15px;
	background: linear-gradient(135deg, #f1c40f, #f39c12);
	color: #1f1f1f;
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(243, 156, 18, 0.45), inset 0 -2px 0 rgba(0, 0, 0, .18);
	transition: all .25s ease;
}
.satis-urun {
	background: #fafafa;
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 12px;
	border-left: 4px solid #f39c12;
	text-align: center;
}

/* PAKET BUTON */
.satis-paket-btn {
	width: 100%;
	margin-top: 6px;
	padding: 8px;
	border-radius: 20px;
	background: linear-gradient(135deg, #f1c40f, #f39c12);
	border: none;
	color: #1f1f1f;
	font-weight: 600;
	cursor: pointer;
}

.satis-paket-btn:hover {
	filter: brightness(1.08);
}

/* ICON */
#satismenu i {
	background: rgba(255, 255, 255, .35);
	padding: 4px 5px;
	border-radius: 50%;
}

/* TEXT */
#satismenu .satismenu-text {
	white-space: nowrap;
}

/* HOVER */
#satismenu:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow:
	0 14px 40px rgba(243, 156, 18, 0.55),
	inset 0 -2px 0 rgba(0,0,0,.25);
}

/* CLICK */
#satismenu:active {
	transform: scale(0.96);
}
.odeme-not {
	margin-top: 14px;
	padding: 12px 14px;
	background: #fff8e1;
	border-left: 4px solid #f39c12;
	border-radius: 10px;

	display: flex;
	align-items: flex-start;
	gap: 10px;

	font-size: 13px;
	line-height: 1.5;
	color: #333;
}

.odeme-not i {
	color: #f39c12;
	font-size: 16px;
	margin-top: 2px;
}
.solbar {
	display: block;
	position: absolute;
	top: 51px;
	left: 0;
	width: 230px;
	padding: 5px;
	background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 60%), rgba(255, 255, 255, 0.98);
	border-color: rgba(209, 213, 219, 0.9);
}
.solbar .sidebar-left { position: relative; }

.solbar .status-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #22c55e;
	box-shadow: 0 0 0 4px rgba(34,197,94,0.3);
}
.solbar .status-select {
	border-radius: 999px;
	border: 1px solid rgba(148,163,184,0.6);
	color: var(--text-muted);
	font-size: 11px;
	padding: 2px 8px;
}

.solbar .list-section-title {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 10px 4px 6px;
}


.solbar .friends-list {
	margin-top: 4px;
	flex: 1;
	min-height: 0;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(209, 213, 219, 0.9);
	border-radius: 10px;
	padding: 6px;
	max-height: 100px;
	overflow: auto;
}
.solbar  .profile-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: var(--radius-md);
	border: 1px solid rgba(129, 140, 248, 0.5);
	margin-bottom: 10px;
	background: linear-gradient(135deg, #eff6ff, #e0e7ff);
	border-color: rgba(191, 219, 254, 0.9);
	border-radius: 20px;
}
.solbar .friend-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 7px;
	border-radius: 999px;
	font-size: 12px;
	color: var(--text-muted);
	transition: background .18s ease, transform .12s ease;
	cursor: pointer;
}
.solbar .friend-item:hover { background: rgba(99,102,241,0.12); transform: translateY(-1px); }

.solbar .friend-left { display:flex; align-items:center; gap:6px; }
.solbar .friend-avatar {
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: radial-gradient(circle at top left, #fb7185, #a855f7);
	display:flex; align-items:center; justify-content:center;
	font-size:10px;
}

.solbar .badge {
	font-size: 10px;
	border-radius: 999px;
	padding: 2px 6px;
	background: rgb(254 226 226);
	color: #d89797;
}

.solbar .profile-avatar {
	width: 42px;
	height: 42px;
	border-radius: 16px;
	background: rgba(15,23,42,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.solbar .profile-avatar img {
	width: 100%;
	height: auto;
}
.solbar .profile-info { flex:1; }
.solbar .profile-info .nick { font-weight: 600; font-size: 14px; }
.solbar .profile-status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 12px;
	color: var(--text-muted);
}
.solbar .profile-actions {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}

.solbar .profile-actions button {
	flex: 1;
	padding: 6px 8px;
	border-radius: 999px;
	border: 1px solid rgba(209,213,219,0.9);
	background: #fff;
	font-size: 12px;
	cursor: pointer;
}

.solbar .profile-actions button.danger {
	flex: 0;
	width: 34px;
	color: #dc2626;
}

/* === DURUM / STORY === */
.solbar .status-stories {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
}
.solbar .story-ring.uploading {
	border: 2px dashed #a855f7;
	animation: spin 1.2s linear infinite;
}

@keyframes spin {
	100% { transform: rotate(360deg); }
}
.solbar .story-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 11px;
	color: #374151;
	min-width: 62px;
}

.solbar .story-ring {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}

.solbar .story-ring.active {
	background: linear-gradient(135deg,#6366f1,#ec4899);
	color: #fff;
	padding: 2px;
}

.solbar .story-ring.active span {
	background: #fff;
	color: #111;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.solbar .story-item.add .add-ring {
	border: 2px dashed #2563eb;
	color: #2563eb;
	background: transparent;
}
/* ===============================
   STORY VIEWER (POPUP)
   =============================== */

   .story-viewer {
   	position: fixed;
   	inset: 0;
   	z-index: 99999;
   	background: rgba(0, 0, 0, 0.9);
   	display: flex;
   	align-items: center;
   	justify-content: center;
   }

/* Story kutusu */
.story-box {
	position: relative;
	width: min(420px, 94vw);
	height: min(720px, 94vh);
	background: #000;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.7);
}

/* Medya */
.story-box img,
.story-box video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===============================
   STORY PROGRESS BAR
   =============================== */

   .story-progress {
   	position: absolute;
   	top: 10px;
   	left: 10px;
   	right: 10px;
   	height: 4px;
   	background: rgba(255,255,255,.25);
   	border-radius: 3px;
   	overflow: hidden;
   	z-index: 5;
   }

   .story-progress span {
   	display: block;
   	height: 100%;
   	width: 0%;
   	background: linear-gradient(90deg, #6366f1, #ec4899);
   	/*animation: storyProgress 5s linear forwards; */
   }

   @keyframes storyProgress {
   	to { width: 100%; }
   }

/* ===============================
   STORY CLOSE BUTTON
   =============================== */

   .story-close {
   	position: absolute;
   	top: 14px;
   	right: 14px;
   	font-size: 22px;
   	color: #fff;
   	cursor: pointer;
   	z-index: 6;
   	opacity: .85;
   }

   .story-close:hover {
   	opacity: 1;
   }

/* ===============================
   MOBİL DOKUNUŞ İYİLEŞTİRME
   =============================== */

   .story-box video {
   	touch-action: manipulation;
   }
/* ===============================
   STORY jConfirm
   =============================== */

   .story-jconfirm {
   	position: relative;
   	width: 100%;
   	height: 70vh;
   	max-height: 520px;
   	overflow: hidden;
   	border-radius: 16px;
   	background: #000;
   }

   .story-progress {
   	position: absolute;
   	top: 10px;
   	left: 10px;
   	right: 10px;
   	height: 4px;
   	background: rgba(255,255,255,.25);
   	border-radius: 999px;
   	overflow: hidden;
   	z-index: 20;
   }

   .story-progress span {
   	display: block;
   	height: 100%;
   	width: 0%;
   	background: linear-gradient(
   		90deg,
   		#facc15,
   		#fb7185,
   		#a855f7,
   		#38bdf8
   	);
   	border-radius: 999px;
   	box-shadow: 0 0 6px rgba(255,255,255,.6);
   	transition: width .15s linear;
   }

/* Story Loader */
.story-global-loader {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	transition: opacity .3s ease;
}

.story-global-loader.hide {
	opacity: 0;
}

.story-loader-box {
	position: relative;
}

.story-loader-close {
	position: absolute;
	top: -40px;
	right: -10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0,0,0,.7);
	color: #fff;
	font-size: 20px;
	border: none;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(0,0,0,.6);
	transition: background .2s ease, transform .2s ease;
}

.story-loader-close:hover {
	background: rgba(239,68,68,.9);
	transform: scale(1.05);
}

.story-loader {
	width: 140px;
	padding: 22px 18px;
	border-radius: 18px;
	background: rgba(0,0,0,.6);
	backdrop-filter: blur(8px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.story-ring-loader {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: conic-gradient(
		#facc15,
		#fb7185,
		#a855f7,
		#38bdf8,
		#facc15
	);
	animation: spin 1.1s linear infinite;
	position: relative;
}

.story-ring-loader::after {
	content: '';
	position: absolute;
	inset: 6px;
	background: #000;
	border-radius: 50%;
}

.story-loader span {
	color: #f1f5f9;
	font-size: 13px;
	letter-spacing: .4px;
	opacity: .9;
}

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

/* Sonu  */

/* === İSTEKLER === */
.solbar .requests-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 100px;
	overflow: auto;
}

.solbar .request-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: #f8fafc;
	font-size: 12px;
}

.solbar .req-actions button {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
}

.solbar .req-actions .ok {
	background: #dcfce7;
	color: #166534;
}

.solbar .req-actions .no {
	background: #fee2e2;
	color: #991b1b;
}
/* PROFİL HIZLI */
.solbar .profil-hizli-menu {
	display: flex;
	gap: 6px;
	margin: 8px 0;
}
.solbar .profil-hizli-menu button {
	flex: 1;
	padding: 6px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	background: var(--body);
	color: var(--bodycolor);
	font-size: 12px;
}
.solbar .profil-hizli-menu .ayarlar {
	flex: 0 0 34px;
}

/* STORY / DURUM */
.solbar .durumlar {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 8px 0;
}
.solbar .durum {
	min-width: 62px;
	text-align: center;
	font-size: 11px;
	cursor: pointer;
}
.solbar .durum span {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 4px;
	background: var(--body);
	color: var(--bodycolor);
	font-weight: bold;
}
.solbar .durum.aktif span {
	background: linear-gradient(135deg,#6366f1,#ec4899);
	color: #fff;
	padding: 2px;
}
.solbar .durum.aktif span::after {
	content: "";
	width: 100%;
	height: 100%;
	background: var(--body);
	border-radius: 50%;
}
.solbar .durum.ekle span {
	border: 2px dashed #2563eb;
	background: transparent;
	color: #2563eb;
}

/* ONLINE RENKLER */
#onlinedurum.online { color: #22c55e; }
#onlinedurum.mesgul { color: #f59e0b; }
#onlinedurum.disarda { color: #ef4444; }

/* ARKADAŞ / İSTEK */
.solbar .aul .arkadas {
	border-radius: 8px;
	margin-bottom: 4px;
	box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Modal Tasarımı */
/* === ANA PANEL === */
.emojibar {
	font-family: 'Inter', Arial, sans-serif;
	color: #555555;
	padding: 20px;
	border-radius: 20px;
	background:
	radial-gradient(circle at top left, rgba(209,213,219,.22), transparent 75%),
	rgba(255,255,255,.97);
	border: 1px solid rgba(191,219,254,.65);
	box-shadow:
	0 10px 30px rgba(0,0,0,.06),
	inset 0 1px 0 rgba(255,255,255,.7);
}

/* === ÜST SEÇİMLER === */
.emojibar .avatarsecim {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 20px;
}

.emojibar .checkbox-label {
	font-size: 13px;
	color: #4b5563;
	padding: 9px 22px;
	border-radius: 999px;
	background:
	linear-gradient(180deg, #ffffff, #f6f7f9);
	border: 1px solid rgba(203,213,225,.9);
	cursor: pointer;
	transition: all .22s ease;
}

.emojibar .checkbox-label:hover {
	background: #f9fafb;
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
	transform: translateY(-1px);
}

.emojibar input[type="checkbox"]:checked + .checkbox-label {
	color: #1e40af;
	font-weight: 500;
	background:
	linear-gradient(180deg, #eef4ff, #e0ecff);
	border-color: rgba(191,219,254,.9);
	box-shadow:
	0 6px 14px rgba(59,130,246,.18);
}

/* === PROFİL SEÇİM === */
.emojibar .profilsecim .baslik {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 10px;
}

.emojibar .profilsecim img {
	width: 210px;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 20px;
	background: #ffffff;
	border: 1px dashed rgba(203,213,225,.9);
	cursor: pointer;
	transition: all .25s ease;
}

.emojibar .profilsecim img:hover {
	border-style: solid;
	border-color: rgba(191,219,254,.9);
	box-shadow: 0 10px 24px rgba(0,0,0,.12);
	transform: scale(1.01);
}

/* === AVATAR BİLGİ === */
.emojibar #avatarresim {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 12px;
}

.emojibar #avatarresim img {
	width: 26px;
	height: 26px;
	margin-left: 6px;
	border-radius: 50%;
	box-shadow: 0 3px 8px rgba(0,0,0,.12);
}

/* === EMOJI LİSTE === */
.emojibar .emoji-panel-div-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
	gap: 10px;
	padding: 14px;
	height: 220px;
	overflow-y: auto;
	border-radius: 18px;
	background:
	linear-gradient(180deg, #ffffff, #f5f7fa);
	border: 1px solid rgba(203,213,225,.9);
}

/* Scrollbar */
.emojibar .emoji-panel-div-list::-webkit-scrollbar {
	width: 6px;
}
.emojibar .emoji-panel-div-list::-webkit-scrollbar-thumb {
	background: rgba(203,213,225,.9);
	border-radius: 6px;
}

/* === EMOJI ITEM === */
.emojibar .emoji-item img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transition: all .2s ease;
}

.emojibar .emoji-item:hover img {
	transform: scale(1.2);
	box-shadow:
	0 5px 14px rgba(0,0,0,.18);
}

/* === ALERT İÇİN === */
.emojisecim img {
	width: 32px;
	height: 32px;
	vertical-align: middle;
	margin-left: 6px;
}

.nickler ul::-webkit-scrollbar {
	width: var(--scrollwidth);
}

.nickler ul::-webkit-scrollbar-thumb {
	background: var(--bodyrenk);
	color: var(--bodycolor);
	border-radius: 10px;
}
.nickler {
	display: none;
	position: absolute;
	color: white;
	width: 220px;
	height: 550px;
	right: 200px;
	top: 49px;
	margin: 0;
	padding: 14px;
	background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 60%), rgba(255, 255, 255, 0.98);
	border-color: rgba(209, 213, 219, 0.9);
}
.nickler .baslik {
	position: fixed;
	top: 50px;
	right: 223px;
	width: 192px;
	color: var(--bodykenar);
	align-items: center;
	margin: 0 auto;
	height: 37px;
	padding: 0 5px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #6b7280;
	font-size: 13px;
}
.nickler .nicktara {
	position: fixed;
	top: 96px;
	right: 215px;
	width: 195px;
	background: var(--body);
	color: var(--bodykenar);
	border: 1px solid var(--bodykenar);
	border-radius: 13px;
	display: flex;
	align-items: center;
	margin: 0 auto;
	height: 37px;
	padding: 0 10px;
}

.nickler .nicktara span {
	margin-right: 5px;
}

.nickler .nicktara input[type="text"] {
	color: var(--bodycolor);
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: none;
	padding: 10px 0px;
	padding-left: 5px;
	outline: 0;
}
.nickler .kenarakaydir {
	display: none;
	position: absolute;
	background: #0372b9;
	color: #ffffff;
	z-index: 8;
	right: 110px;
	top: 50%;
	font-size: 20px;
	padding: 5px 5px;
	border-radius: 10px 0px 0px 10px;
}
.nickler ul {
	position: relative;
	top: 76px;
	display: none;
	border-left: 1px solid var(--bodykenar);
	width: 95%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(209, 213, 219, 0.9);
	border-radius: 20px;
	padding: 10px 5px;
}
.nickler .nactive {
	display: block;
}
/* ===== MODERN NICK LIST ===== */

.nickler ul {
	padding: 4px;
}

/* SATIR */
.nickler ul .nick {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0;
	padding: 0px 10px;
	border-radius: 10px;
	background: #ffffff;
	font-size: 11px;
	color: #111827;
	position: relative;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.nickler ul .nick.v { color: #e6b12b; }
.nickler ul .nick.h { color: #589a23; }
.nickler ul .nick.o { color: #48a9c5; }
.nickler ul .nick.a { color: #be0027; }
.nickler ul .nick.q { color: #ff0000; }

/* SEÇİLİ */
.nickler ul .nickselected {
	background: #f3f4f6 !important;
}

/* ONLINE NOKTA */
.nickler ul .nick .donline {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	border: 2px solid #ffffff;
}

/* PROFİL */
.nickler ul .nick .arkaplan {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f3f4f6;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	box-shadow: inset 0 0 0 1px #e5e7eb;
}

.nickler ul .nick .arkaplan img {
	width: 18px;
	height: 18px;
	border-radius: 0;
	object-fit: contain;
	opacity: .9;
}

/* İSİM */
.nickler ul .nick .isim {
	flex: 1;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ROL ROZETLERİ */
.nickler ul .nick::after {
	content: attr(flag);
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 999px;
	background: #e5e7eb;
	color: #374151;
	margin-left: auto;
	text-transform: uppercase;
}

/* ===== ROL RENKLERİ ===== */
.nickler ul .nick.h::after {
	background: rgba(236,72,153,.12);
	color: #be185d;
}

.nickler ul .nick.v::after {
	background: rgba(34,197,94,.15);
	color: #15803d;
}

.nickler ul .nick.o::after {
	background: rgba(59,130,246,.15);
	color: #1d4ed8;
}

.nickler ul .nick.a::after {
	background: rgba(168,85,247,.15);
	color: #6b21a8;
}

.nickler ul .nick.q::after {
	background: rgba(234,179,8,.20);
	color: #92400e;
}


.pencereler {
	position: absolute;
	background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 60%), rgba(255, 255, 255, 0.98);
	border-color: rgba(209, 213, 219, 0.9);
	color: var(--bodycolor);
	width: 200px;
	height: 550px;
	right: 0px;
	top: 51px;
	border-left: 1px solid var(--bodykenar);;
	padding: 0;
	overflow: auto;
}
.pencereler .logo {
	background: var(--bodylogo);
	width: 100%;
	text-align: center;
	height: 50px;
	padding: 10px 0;
}
.pencereler .logo img {
	width: auto;
	height: 50px;
}
.pencereler .baslik {
	padding: 5px 10px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 10px 4px 6px;
}
.pencereler .kanallar::-webkit-scrollbar {
	width: 3px;
}

.pencereler .kanallar::-webkit-scrollbar-thumb {
	background: var(--bodylogo);
	color: var(--body);
	border-radius: 10px;
}
.pencereler .kanallar {
	border: 1px solid rgba(51, 65, 85, 0.9);
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(209, 213, 219, 0.9);
	padding: 6px;
	margin: 10px;
	border-radius: 10px;
}

.pencereler .kanallar .kanal {
	color: #1e72ff;
	font-weight: 400;
	border-radius: 2px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 7px;
	margin: 0px 5px;
	font-size: 13px;
	cursor: pointer;
}

@keyframes dots {
	0%, 20% {
		content: ".";
		transform: rotate(0deg);
	}
	40% {
		content: "..";
		transform: rotate(90deg);
	}
	60% {
		content: "...";
		transform: rotate(180deg);
	}
	80% {
		content: "";
		transform: rotate(270deg);
	}
	100% {
		content: "";
		transform: rotate(360deg); /* Tam bir dönüş */
	}
}

.pencereler .kanallar .kanalyazdiv {
	display: none;
	font-size: 20px;
	font-weight: bold;
}

.pencereler .kanallar .kanalyazdiv::after {
	content: ".";
	animation: dots 2s infinite;
}
.pencereler .kanallar .yazivar .kanalname {
	color: #e20c0c;
}
.pencereler .kanallar .kactive {
	color: white;
	background: #1e72ff;
	border-radius: 5px;
}
.pencereler .kanallar .kanal .kanalname {
	width: calc(100% - 40px); /* İkinci span genişliğini dahil etmeden ilk span genişliği hesaplaması */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 3px 0;
}
.pencereler .kanallar .kanal .kapat {
	display: none;
	cursor: pointer;
	font-weight: bold;
}

.pencereler .kanallar .kanal:hover .kapat {
	display: block;
}

.pencereler .kanallar > div:first-child {
	font-weight: 600;
}
.pencereler .ozeller::-webkit-scrollbar {
	width: var(--scrollwidth);
}

.pencereler .ozeller::-webkit-scrollbar-thumb {
	background: var(--bodylogo);
	color: var(--body);
	border-radius: 10px;
}
.pencereler .ozeller {
	border: 1px solid rgba(51, 65, 85, 0.9);
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(209, 213, 219, 0.9);
	padding: 6px;
	margin: 10px;
	border-radius: 10px;
}
.pencereler .ozeller .ozel {
	color: #1e72ff;
	font-weight: 400;
	border-radius: 2px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 7px;
	margin: 0px 5px;
	font-size: 13px;
	cursor: pointer;
}
.pencereler .ozeller .nickyazdiv {
	display: none;
	font-size: 20px;
	font-weight: bold;
}

.pencereler .ozeller .nickyazdiv::after {
	content: "";
	animation: dots 2s infinite;
}
.pencereler .ozeller .oactive {
	color: white;
	background: #1e72ff;
	border-radius: 5px;
}
.pencereler .ozeller .ozelname i {
	padding: 5px;
}
.pencereler .ozeller .ozel .yanson {
	color: white;
	background: #1e72ff;
	border-radius: 10px;
	animation: yansin 2s infinite; /* Animasyon adı, süresi ve tekrar sayısı */
}

@keyframes yansin {
	0% {
		opacity: 0.2;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.2;
	}
}
.pencereler .ozeller .ozel .ozelname {
	width: calc(100% - 40px); /* İkinci span genişliğini dahil etmeden ilk span genişliği hesaplaması */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 3px 0;
}
.pencereler .ozeller .ozel .kapat {
	display: none;
	cursor: pointer;
}

.pencereler .ozeller .ozel:hover .kapat {
	display: block;
}
.pencereler::-webkit-scrollbar {
	width: var(--scrollwidth);
}

.pencereler::-webkit-scrollbar-thumb {
	background: var(--body);
	color: var(--bodycolor);
	border-radius: 10px;
}
.pencereler .mobilozeller {
	display: block;
	display: flex;
	padding: 0 10px;
	border-bottom: 1px solid silver;
}
.pencereler .mobilozeller .part1 {
	flex: 1;
}
.pencereler .mobilozeller .part1 p {
	margin: 0;
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 5px 10px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.pencereler .mobilozeller .okapat {
	padding: 0px 5px;
	border-radius: 5px;
	margin-right: 10px;
	cursor: pointer;
	background: #ffe4e6;
	color: #be123c;
}
.kayanyazi {
	position: fixed;
	top: 51px;
	left: 245px;
	width: 634px;
	height: 20px;
	display: flex;
	align-items: center;
	padding: 3px 12px;
	font-size: 13px;
	color: #374151;
	background: rgba(255,255,255,0.95);
	border-radius: 999px;
	overflow: hidden;
	z-index: 3;

	/* Sahte border için */
	border: 1px solid transparent;
	background-clip: padding-box;
}

/* Gradient border */
.kayanyazi::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		var(--bodykenar),
		#60a5fa,
		#a78bfa,
		var(--bodykenar)
	);
	-webkit-mask:
	linear-gradient(#fff 0 0) content-box,
	linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Soft glow */
.kayanyazi::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		var(--bodykenar),
		#60a5fa,
		#a78bfa,
		var(--bodykenar)
	);
	filter: blur(8px);
	opacity: 0.35;
	z-index: -1;
}

.channel-gif {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background: url(https://qbilisim.net/qwebgirisgif/simsek.gif);
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: 5;
	width: 100%;
	height: 100%;
}
/* Border'ın kayarak ortaya çıkma animasyonu */
@keyframes borderMove {
	0% {
		width: 0;
		right: 0;
	}
	50% {
		width: 100%;
		right: 0;
	}
	100% {
		width: 0;
		right: 100%;
	}
}

.kayanyazi span {
	display: inline-block;
	position: relative;
	white-space: nowrap;
	animation: kayanyaziAnim 10s linear infinite;
}

/* Kayan yazının animasyonu */
@keyframes kayanyaziAnim {
	from {
		transform: translateX(634px);
	}
	to {
		transform: translateX(-100%);
	}
}


.topicbolum {
	position: fixed;
	display: flex;
	justify-content: space-between;
	top: 83px;
	left: 245px;
	width: 636px;
	height: 20px;
	text-align: left;
	align-items: center;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 13px;
	border: 1px solid rgba(209, 213, 219, 0.9);
}
.topicbolum .tcol-1 {
	flex: 0 0 auto;
	padding: 5px;
}
.topicbolum .baslik {
	font-size: 13px;
}
.topicbolum .baslik b {
	background: var(--bodyheader);
	color: var(--body);
	padding: 2px 5px;
	margin: 0 4px;
	border-radius: 10px;
}
.topicbolum .tcol-2 {
	flex: 0 1 auto;
	overflow: auto;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.topicbolum .tcol-2::-webkit-scrollbar {
	width: 8px;
	height: 3px;
}

.topicbolum .tcol-2::-webkit-scrollbar-thumb {
	background: #1e72ff;
	color: var(--bodykenar);
	border-radius: 10px;
}
.topicbolum .tcol-3 {
	flex: 0 1 50px;
	text-align: center;
	color: #7a7a85;
	font-size: 17px;
}
@keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.msg-titresim {
	animation: shake 0.5s linear infinite;
}
.msg {
	position: absolute;
	width: 90px;
	height: 450px;
	left: 245px;
	bottom: 80px;
	top: 91px;
	font-size: 13px;
	overflow-y: hidden;
	color: var(--user);
	background: radial-gradient(circle at top left, rgba(209, 213, 219, 0.28), transparent 70%), rgba(255, 255, 255, 0.98);
	border: 1px solid rgba(191, 219, 254, 0.9);
	border-radius: 5px;
	padding: 5px 10px;
}
.msg .msglogo {
	position: absolute;
	top: 5px;
	width: 220px;
	height: auto;
	right: 10px;
	z-index: 2;
}
.yazanlar::-webkit-scrollbar {
	width: 5px;
}

.yazanlar::-webkit-scrollbar-thumb {
	color: var(--bodycolor);
	background: var(--bodyrenk);
	border-radius: 10px;
}
.msg .yazanlar {
	position: fixed;
	width: auto;
	height: auto;
	max-height: 400px;
	bottom: 60px;
	right: 470px;
	padding: 0 2px;
	border-radius: 5px;
	max-height: 400px;
	overflow: auto;
	z-index: 5;
}
.msg .yazanlar .yazannick {
	width: auto;
	color: var(--bodycolor);
	background: #f3f3ff;
	height: auto;
	padding: 0 10px;
	border-radius: 5px;
	margin: 0;
	margin-bottom: 5px;
}
.msg .yazanlar .yazannick span {
	display: inline-block;
	animation: spin 2s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.msg .kullanicimenu{
	display:none;
	position: fixed;
	top: 120px;
	right: 210px;
	z-index: 99;
	font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

.msg .kullanicimenu ul{
	width:170px;
	background: radial-gradient(circle at top left,
		rgba(209,213,219,.25),
		rgba(255,255,255,.98));
	border:1px solid rgba(191,219,254,.9);
	border-radius:16px;
	padding:14px;
	box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* KAPAT */
.msg .kullaniciackapat{
	position: absolute;
	top: 10px;
	right: 10px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 50%;
	padding: 6px 7px;
	cursor: pointer;
}

/* PROFİL */
.msg .ozelresim img{
	width:72px;
	height:72px;
	border-radius:50%;
	object-fit:cover;
	display:block;
	margin:0 auto 6px;
	border:2px solid #e5e7eb;
}

.msg .ozelnick{
	text-align:center;
	font-weight:600;
	font-size:14px;
	color:#374151;
	margin-bottom:12px;
}

/* İKON BUTONLAR */
.msg .titresim,
.msg .seskaydi,
.msg .resimgonder{
	display:inline-flex;
	align-items: center;
	justify-content: space-around;
	width: 41px;
	height: 30px;
	margin: 5px 5px;
	border-radius: 14px;
	background: #f1f5f9;
	border: 1px solid #e5e7eb;
	cursor: pointer;
	transition: .2s;
}

.msg .titresim img{
	width:26px;
	height:26px;
}

.msg .titresim:hover,
.msg .seskaydi:hover,
.msg .resimgonder:hover{
	background:#dbeafe;
	transform:translateY(-2px);
}

/* ALT MENÜ */
.msg .kullanicimenu ul li{
	list-style:none;
}

.msg .sesliara,
.msg .arkadasekle,
.msg .engelle,
.msg .engellist,
.msg .temizle,
.msg .ozelwhois,
.msg .ozelkapat{
	display:flex;
	align-items:center;
	gap:10px;
	padding:3px 12px;
	margin-top:6px;
	border-radius:10px;
	font-size:13px;
	color:#374151;
	cursor:pointer;
	transition:.15s;
}

.msg .sesliara:hover,
.msg .arkadasekle:hover,
.msg .engelle:hover,
.msg .engellist:hover,
.msg .temizle:hover,
.msg .ozelwhois:hover,
.msg .ozelkapat:hover{
	background:#f1f5f9;
}

.msg .ozelkapat{
	color:#b91c1c;
}

.msg .nick.v { color: var(--voice); }
.msg .nick.h { color: var(--halfop); }
.msg .nick.o { color: var(--op); }
.msg .nick.a { color: var(--sop); }
.msg .nick.q { color: var(--founder); }
.msg .topicmsg, 
.msg .topicupdate,
.msg .mode,
.msg .newnick,
.msg .seslenme,
.msg .kick {
	font-weight: unset;
	color: #948f8f;
}
.msg .kanal .format_span {
	border-radius: 5px;
}
.msg .kanal .qgif {
	width: auto;
	height: 50px;
}
.msg .kanal {
	display: none;
	position: relative;
	height: 100%;
	padding: 0;
	overflow-y: auto;
	padding-bottom: 3px;
}
.mactive::-webkit-scrollbar {
	width: 5px;
}

.mactive::-webkit-scrollbar-thumb {
	color: var(--bodycolor);
	background: var(--bodyrenk);
	border-radius: 10px;
}

.msg .bubbles {
	position: absolute;
	left: 160px;
	transform: translate(10px, -50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.msg  .bubbles .bubble {
	width: 30px;
	height: 30px;
	background-color: #eee;
	border: 2px solid #ccc;
	border-radius: 48%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.msg .bubbles .bubble:hover {
	background-color: #ddd;
}
.mesajsekil {
	touch-action: pan-y;
}
.msg .kanal .mesaj {
	display: flex;
	align-items: center;
	width: 97%;
	margin: 0px 0;
}
.msg .kanal .mesajsekil {
	align-items: stretch;
}
.msg .mesajsekil .profile {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: 6px;              /* yuvarlak kare */
	background: #f3f4f6;             /* açık gri */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px #e5e7eb;
	margin-right: 2px;
}

.msg .mesajsekil .profile img {
	width: 14px !important;
	height: 14px !important;
	object-fit: contain;
	border-radius: 0;                /* emoji için */
	opacity: .85;
}
.msg .kanal .mesaj .content {
	flex: 0 1 auto;
	background: var(--body);
	padding: 5px 20px 5px 5px;
	border-radius: 5px 10px 20px 5px;
}
.msg .kanal .mesaj .msgheader {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.msg .kanal .mesaj .msgheader .alinti {
	background: #e7e4e4;
	padding: 2px 5px;
	border-radius: 10px 0px 10px;
	border: 1px solid #bbb8b8;
	margin-top: 3px;
	padding-top: 10px;
}
.msg .kanal .mesaj .msgheader .alinti .alintititle {
	position: absolute;
	margin-top: -12px;
	color: black;
	font-size: 9px;
}
.msg .kanal .mesaj .msgheader .alinti .alintinick {
	font-weight: 500;
	margin-right: 5px;
}
.msg .kanal .mesaj .msgheader .alinti .alintitext {
}

.mesaj .mesaj .text {
	display: block;
	margin-top: 5px;
	background: #f2f4f9;
	color: #000;
	padding: 5px;
	border-radius: 5px 10px 20px 5px;
	text-align: justify;

	/* Metin taşmasını engelle */
	word-wrap: break-word; /* Satır uzunluğunu aşarsa kır */
	overflow-wrap: anywhere;
	white-space: normal; /* Metni kutu içine sığdırmak için */
}
.msg .kanal .text .ozelseskayit {
	width: 140px;
	height: 30px;
	background: white;
	border-radius: 20px;
	padding: 10px;
}
.msg .kanal .text .ozelresimurl {
	width: auto;
	height: 100px;
	max-width: 100%;
	cursor: pointer;
}
.msg .kanal .text .emojione {
	width: 20px;
	position: relative;
	top: 2px;
	margin: 0 2px;
}
.msg .kanal .mesaj .text span {
	word-wrap: break-word;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
}

.msg .kanal .mesaj .time {
	flex: 0 0 40px;
	margin: 0px 5px;
	color: silver;

}
/* ===== ZWEB TEK SATIR MESAJ ===== */

.msg .mesajsekil {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 6px;
	padding: 0px 8px;
	margin: 2px 0;
	color: #111827;
}

/* SAAT (SAĞDA) */
.msg .mesajsekil .time {
	position: absolute;
	right: 8px;
	font-size: 11px;
	color: #9ca3af;
}

/* PROFİL */
.msg .mesajsekil .profile {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.msg .mesajsekil .profile img {
	width: 18px !important;
	height: 18px !important;
	border-radius: 50%;
	object-fit: cover;
}

/* NICK */
.msg .mesajsekil .nick {
	font-weight: 600;
	white-space: nowrap;
}

/* METİN */
.msg .mesajsekil .text {
	flex: 1;
	color: #111827;
	word-break: break-word;
	padding-right: 5px; /* saatle çakışmasın */
}

/* HOVER */
.msg .mesajsekil:hover {
	background: #f9fafb;
}
.msg .saatspan {
	font-size: 0.60em;
	margin-left: 10px;
	color: silver;
}
.msg .menuspan {
	margin-left: 5px;
	color: #747373;
	font-size: 0.9em;
	font-weight: bold;
	padding: 0px 10px;
	cursor: pointer;
}
.msg .clickspan {
	letter-spacing: -3;
	font-size: 0.70em;
	margin-left: 5px;
}
.msg .clickspanok {
	color: green;
}
.msg .clickspanok {

}
.msg .kanal .content .time {
	flex: 0 0 60px; 
}

.msg .kanal .nick {
	font-weight: bold;
	font-size: 0.9em;
	border-radius: 20px;
}
.msg .kanal .icon {
	flex: 0 0 17px;
	margin-right: 5px;
}
.msg .kanal .notice {
	color: #974e00;
	margin: 2px 2px;
}
.msg .kanal .notice .text {
	display: unset;
	margin-top: 5px;
	text-align: justify;

	/* Metin taşmasını engelle */
	word-wrap: break-word; /* Satır uzunluğunu aşarsa kır */
	overflow-wrap: anywhere;
	white-space: normal; /* Metni kutu içine sığdırmak için */
}
.msg .kanal .action {
	color: #b100b9;
	margin: 2px 2px;
}
.msg .mactive {
	display: block;
}
.msg .bildirim {
	margin: 2px 0px !important;
	text-align: justify;

	/* Metin taşmasını engelle */
	word-wrap: break-word; /* Satır uzunluğunu aşarsa kır */
	overflow-wrap: anywhere;
	white-space: normal; /* Metni kutu içine sığdırmak için */
}
.msg .newnick .bildirim {
	color: #ad6100;
	padding: 0px 5px;
}
.msg .join .bildirim {
	color: #01ad00;
	padding: 0px 5px;
}
.msg .part .bildirim {
	color: #0266a3;
	padding: 0px 5px;
}

.msg .quit .bildirim .xquit {
	color: #ff0202;
	padding: 0px 5px;
}
.editor {
	position: fixed;
	left: 245px;
	bottom: 0;
	width: 100%;
	height: 50px;
	padding: 0 2px;
	background: var(--body);
	border-top: 1px solid var(--bodykenar);
}
.editor .mobileditor {
	display: none;
}
.editor .co-ust {
	position: absolute;
	display: none;
	height: 35px;
	margin: 5px;
	padding: 8px;
	align-items: center;
	left: 0;
	bottom: 50px;
	z-index: 30;
	background: var(--bodyheader);
	color: var(--body);
	border-radius: 1px solid var(--bodykenar);
}
.editor .yaktive {
	background: var(--body);
	color: var(--bodycolor);
}
.editor .kalinyazi,
.editor .yanyazi,
.editor  .altyazi,
.editor .renkler,
.editor .temizle,
.editor .mirc {
	width: auto;
	margin-right: 0px;
	padding: 5px 10px;
	text-align: center;
	border-right: 1px solid silver;
	font-size: 16px;
	cursor: pointer;
}
.editor .kalinyazi:hover,
.editor .yanyazi:hover,
.editor .altyazi:hover,
.editor .renkler:hover,
.editor .temizle:hover,
.editor .mirc:hover,
.editor .yazibuyut:hover,
.editor .yazikucult:hover,
.editor .radyo:hover,
.editor .tamekran:hover {
	opacity: 0.6; /* Hover durumunda opacity 0.8 yapılıyor */
}
.editor .kalinyazi {
	font-weight: bold;
}
.editor .yanyazi {
	font-style: italic;
}
.editor .altyazi {
	text-decoration: underline;
}
.editor .renklist {
	display: flex;
	display: none;
	position: absolute;
	list-style: none;
	padding: 0px;
	top: -40px;
	left: 0;
}
.editor .renklist li {
	padding: 13px;
	border: 1px solid #ccc;
	margin: 0px;
}
.editor .renklist li:hover {
	opacity: 0.6;
	cursor: pointer;
}

.editor .renklist .renk1 {background: black;}
.editor .renklist .renk2 {background: #002d50;}
.editor .renklist .renk3 {background: #008000;}
.editor .renklist .renk4 {background: #FF0000;}
.editor .renklist .renk5 {background: #800040;}
.editor .renklist .renk6 {background: #800080;}
.editor .renklist .renk7 {background: #FF8040;}
.editor .renklist .renk8 {background: #FFFF00;}
.editor .renklist .renk9 {background: #80FF00;}
.editor .renklist .renk10 {background: #008080;}
.editor .renklist .renk11 {background: #00FFFF;}
.editor .renklist .renk12 {background: #0000FF;}
.editor .renklist .renk13 {background: #FF55FF;}
.editor .renklist .renk14 {background: #808080;}
.editor .renklist .renk15 {background: #C0C0C0;}
.renklist li.renkaktif::before {
	content: "\f00c";
	font-family: 'FontAwesome';
	font-size: 20px;
	color: white;
	position: absolute;
	transform: translate(-50%, -50%);
}
.editor .mirc a {
	text-decoration: none;
	color: var(--bodycolor);
	font-weight: 500;
}
.editor .yazibuyut,
.editor .yazikucult,
.editor .radyo,
.editor .tamekran {
	padding: 5px 9px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	border-right: 1px solid silver;
	margin: -2px;
}
.editor #emojigif {
	width: 30px;
	height: 30px;
}
.sagbar {
	margin-left: auto; /* Sağa yasla */
}
.editor #giflist::-webkit-scrollbar {
	width: var(--scrollwidth);
}

.editor #giflist::-webkit-scrollbar-thumb {
	background: var(--bodyrenk);
	color: var(--bodycolor);
	border-radius: 10px;
}
.editor #giflist {
	display: none;
	position: absolute;
	top: -200px;
	right: 0;
	width: 170px;
	height: 190px;
	background: #ffffff;
	border-radius: 5px;
	border: 1px solid silver;
	overflow: hidden;
	overflow-y: auto;
}
.editor #giflist img {
	width: 40px;
	height: 40px;
	cursor: pointer;
}
.editor .co-alt {
	height: 45px;
	position: relative;
}
.editor .co-alt .co-auto:nth-child(1) {
	flex: 0 0 30px;
	margin: 0 10px;
}
.editor .co-alt .co-auto:nth-child(2) {
	display: none;
	width: 5%;
}
.editor .co-alt .co-auto:nth-child(3) {
	flex: 0 1 90%;
}
.editor .co-alt .co-auto:nth-child(4) {
	text-align: center;
	flex: 0 0 30px;
}
.editor .co-alt .co-auto:nth-child(5) {
	text-align: center;
	flex: 0 2 100px;
}
.editor .textbtn {
	text-align: center;
	border-radius: 5px;
	background: #e0edff;
	color: #2563eb;
	padding: 5px;
}
.editor .tabbutton {
	text-align: center;
	border-radius: 5px;
	background: #e0edff;
	color: #2563eb;
	padding: 5px;
}
.editor #inputmsg {
	width: 100%;
	border: none;
	font-size: 20px;
	color: black;
}
.editor #inputgonder {
	padding: 10px 5px;
	border: none;
	background: var(--bodyheader);
	color: var(--body);
	margin-left: 5px;
	font-size: 13px;
	border-radius: 10px;
	cursor: pointer;
}

.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.emojionearea.emojionearea-inline {
	border: none !important; 
}
.emojionearea.emojionearea-inline>.emojionearea-editor {
}
.emojionearea.emojionearea-inline>.emojionearea-button {
	top: 10px !important;
}
.emojionearea .emojionearea-button {
	opacity: 1 !important;
}
.emojionearea .emojionearea-button>div.emojionearea-button-open {
	background-position: 0 -30px;
	background-size: 24px 128px;
	filter: alpha(enabled = false);
	opacity: 1;
	background-image: url(../images/emoji.png) !important;
	border-radius: 10px;
	margin-top: -3px;
}
@keyframes rotate360 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.header .fa-spinner {
	animation: rotate360 2s linear infinite;
}
.ayarlarmenu {
	padding: 20px;
}
.ayarlarmenu span {
	margin-left: 10px;
	font-size: 13px;
}
.ayarlarmenu .checkbox {
	display: none;
}
.ayarlarmenu .checkbox + label {
	display: inline-block;
	position: relative;
	width: 35px;
	height: 5px;
	background: linear-gradient(to right, #fd1a15 0, #fc8b34 45%, #7fd03e 55%, #007177 100%) 0 0;
	background-size: 650px 100%;
	border-radius: 70px;
	padding: 7px;
	cursor: pointer;
	transition: all 500ms ease;
	box-shadow: 0 0px 10px rgb(0 0 0 / 20%) inset;
}
.ayarlarmenu .checkbox + label:before {
	content: "Off";
	width: 20px;
	height: 15px;
	position: absolute;
	left: 3px;
	top: 2px;
	border-radius: 100%;
	background: #fff;
	text-align: center;
	line-height: 16px;
	font-family: "Cabin", sans-serif;
	font-size: 7px;
	font-weight: bold;
	color: #fd1a15;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: left 500ms ease, color 500ms ease, transform 150ms ease;
}
.ayarlarmenu .checkbox + label:active:before {
	transform: scale(0.95);
}

.ayarlarmenu .checkbox:checked + label {
	background-position-x: -350px;
}
.ayarlarmenu .checkbox:checked + label:before {
	content: "On";
	color: #007177;
	left: 22px;
}



.jconfirm-form input {
	padding: 10px;
	font-size: 15px;
	border-radius: 7px;
	border: 1px solid var(--bodyheader);
}
.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
	background: var(--body);
	color: var(--bodycolor);
	border-top: 5px solid var(--bodyheader);
}

.whois p {
	margin: 0;
}
/* === GENEL CONTEXT MENU === */
.context-menu{
	position: absolute;
	z-index: 9999;
	display: none;
	min-width: 180px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
	backdrop-filter: blur(10px);
	color: var(--body);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .05);
	padding: 5px 0px;
	animation: menuFade .15s ease-out;
}

/* Başlık */
.context-menu .clickrumuz,
.context-menu .msg-preview{
	font-size: 13px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
	color: #000;
	text-align: center;
	margin: 2px auto;
}

/* Liste */
.context-menu ul{
	list-style:none;
	padding:0;
	margin:0;
}

/* Menü item */
.context-menu ul li{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 1px 12px;
	font-size: 14px;
	border-radius: 10px;
	cursor: pointer;
	transition: .2s;
	color: #000000;
}

/* Icon */
.context-menu ul li i{
	width:18px;
	text-align:center;
	opacity:.85;
}

/* Hover */
.context-menu ul li:hover{
	background: linear-gradient(
		90deg,
		var(--bodykenar),
		transparent
	);
	color:#000000;
	transform: translateX(3px);
}

/* Ayırıcı */
.context-menu ul li:not(:last-child){
	margin-bottom:2px;
}

/* === TEHLİKELİ BUTONLAR === */
.context-menu .engelle:hover,
.context-menu [value="delete"]:hover{
	background: linear-gradient(90deg,#b91c1c,transparent);
	color:#fff;
}

/* === OP MENU === */
.op-menu{
	display:none;
	margin-top:8px;
	padding-top:8px;
	border-top:1px solid rgba(255,255,255,.15);
	animation: submenuFade .2s ease-out;
}

.op-menu li{
	background: rgba(255,255,255,.04);
}

/* OP Menü Trigger */
.op-menu-trigger{
	font-weight:600;
	color:#facc15;
}

/* === ANİMASYONLAR === */
@keyframes menuFade{
	from{
		opacity:0;
		transform: scale(.95) translateY(4px);
	}
	to{
		opacity:1;
		transform: scale(1) translateY(0);
	}
}

@keyframes submenuFade{
	from{
		opacity:0;
		transform: translateY(-4px);
	}
	to{
		opacity:1;
		transform: translateY(0);
	}
}

.engellistdiv {
	overflow-y: auto;
	width: 300px;
	max-height: 300px;
}

.engellistdiv .list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px;
	border-bottom: 1px solid #ccc;
}

.engellistdiv .list-item span {
	flex: 1;
}

.engellistdiv .list-item i {
	cursor: pointer;
	color: red;
}

.engellistdiv .hepsini-kaldir {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.engellistdiv .hepsini-kaldir button {
	background-color: #d9534f;
	color: white; 
	border: none;
	padding: 5px 10px;
	cursor: pointer;
}

.engellistdiv .hepsini-kaldir button:hover {
	background-color: #c9302c;
}
.engellistdiv::-webkit-scrollbar {
	width: var(--scrollwidth);
}

.engellistdiv::-webkit-scrollbar-thumb {
	background: var(--bodyrenk);
	color: var(--bodycolor);
	border-radius: 10px;
}
/* Gece Modu */


/* Gece Modu Bitti */

/* Alıntı bölümü */
.quote-box {
	display: none;
	position: absolute;
	left: 0;
	bottom: 49px;
	width: 99%;
	border-radius: 5px;
	border: 1px solid rgba(148, 163, 184, 0.7);
	background: rgba(249, 250, 251, 1);
	border-color: rgba(209, 213, 219, 0.9);
	padding: 6px 10px;
	font-size: 12px;
	margin-bottom: 4px;
}
.quote-box::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		var(--bodykenar),
		#60a5fa,
		#a78bfa,
		var(--bodykenar)
	);
	-webkit-mask:
	linear-gradient(#fff 0 0) content-box,
	linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Soft glow */
.quote-box::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		var(--bodykenar),
		#60a5fa,
		#a78bfa,
		var(--bodykenar)
	);
	filter: blur(8px);
	opacity: 0.35;
	z-index: -1;
}
.quote-box-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:3px;
	color:var(--text-muted);
}
.quote-box-header .nick {
	font-weight:600;
	color:var(--accent1);
}
.quote-close {
	cursor:pointer;
	font-size:11px;
	opacity:.7;
}
.quote-close:hover { opacity:1; }
.quote-box-body {
	max-height:60px;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:12px;
	color:var(--text-main);
}
.quote-box-body img {
	width: 18px;
	height: 18px;
}
.chat-quote {
	border-left: 3px solid #60a5fa;
	background: rgba(96,165,250,.08);
	padding: 6px 8px;
	margin-bottom: 6px;
	border-radius: 6px;
	font-size: 13px;
}

.chat-quote-head {
	font-size: 12px;
	color: #60a5fa;
	margin-bottom: 4px;
}

.chat-quote-body {
	color: #000000;
	opacity: .9;
}

.chat-main-text {
	display: inline-block;
	margin-top: 4px;
}


/* Alıntı bitti */
.mobilmenu {
	display: none;
}
.mobilkapat {
	display: none;
}
.mobilkanalinc {
	display: none;
}
.seslivar {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background: green;
	color: white;
	padding: 5px;
	font-size: 10px;
	width: 75px;
	z-index: 3;
	cursor: pointer;
}


.kamerabolum {
	display: none;
	position: absolute;
	top: 60px;
	right: 210px;
	z-index: 9;
	width: 200px;
	height: auto;
	background: black;
	border: 1px solid #bfbfbf;
	border-radius: 20px;
	overflow: hidden; /* İçeriğin taşmasını engeller */
	cursor: grab; /* Sürüklenebilir olduğunu belirtir */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge ekler */
}
.kamerabilgi {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 0px;
	height: 5%;
}
.kamerabilgi p {
	margin: 0;
	flex: 0 0 31%;
	text-align: center;
	font-size: 14px;
	color: #fde4e4;

}
.kamerabilgi .kameragizle {
	cursor: pointer;
}
.kamerabilgi .kameratam {
	cursor: pointer;
}
.aktifkamera {
	margin-top: 5px;
	width: 100%;
	height: 40%;
}
.nickkamera { 
	width: 100%;
	height: 40%;
}
video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.alttuslar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 13%;
}
.alttuslar .sesbtn {
	background: #d70000;
	border-radius: 20px;
	color: white;
	padding: 5px;
	font-size: 20px;
	width: 20%;
	cursor: pointer;
}
.alttuslar .mikrofonbtn {
	border-radius: 20px;
	color: black;
	padding: 5px;
	font-size: 20px;
	width: 30%;
	cursor: pointer;
}
.alttuslar .kamerabtn {
	border-radius: 20px;
	background: #3d3f3d;
	color: white;
	padding: 5px;
	font-size: 20px;
	width: 30%;
	cursor: pointer;
}
.alttuslar .kameraaktif {
	background: green;
}
.seskayitdiv {
	/*display: flex; */
	flex-wrap: nowrap;
	align-content: flex-end;
	flex-direction: row;
	align-items: center;
}
.seskayitdiv #kayitbtn {
	padding: 8px;
	border: 1px solid silver;
	border-radius: 10px;
}
.seskayitdiv #seskayitdinle {
	display: none;
	margin: 2px;
	flex: 0 0 40%;
	height: 30px;
}
.seskayitdiv #kayitdurum {
	display: none;
	animation: blink-animation 1s infinite;
}
@keyframes blink-animation {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
.seskayitdiv #durdurbtn {
	display: none;
	background: red;
	color: white;
	padding: 5px 10px;
	border-radius: 10px;
	border: none;
}
.seskayitdiv #kayitgonderbtn {
	display: none;
	flex: 0 0 auto;
	font-size: 12px;
	padding: 5px 10px;
	background: green;
	color: white;
}
.seskayitdiv #yenikayitbtn {
	display: none;
	background: white;
	border: 1px solid silver;
	padding: 5px 10px;
	font-size: 12px;
}
.hakkimizda-content {
	line-height: 1.6;
	font-size: 14px;
}

.hakkimizda-content hr {
	margin: 12px 0;
	border: none;
	border-top: 1px solid rgba(0,0,0,0.1);
}

.hakkimizda-content a {
	color: #38bdf8;
	text-decoration: none;
}

.hakkimizda-content a:hover {
	text-decoration: underline;
}

body.dark {
	background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 55%), radial-gradient(circle at top right, rgba(244, 114, 182, 0.16), transparent 60%), radial-gradient(circle at bottom, rgba(129, 140, 248, 0.18), transparent 60%), linear-gradient(145deg, #050816, #060b23) !important;
	color: var(--text-main);
}
body.dark .header {
	background: linear-gradient(120deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.85));
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
	backdrop-filter: blur(16px);
	border: 1px solid #405cbb;
	z-index: 6;
	border-radius: 30px;
	margin: 0;
}
body.dark .header .room-pill {
	background: linear-gradient(120deg, #6063e7, #ec4899) !important;
	color: white;
}
body.dark .btn-icon {
	background: rgba(15, 23, 42, 0.9);
	color: white;
}
body.dark .satis-urun {
	background: #38487d;
	color: white;
}
body.dark .solbar {
	background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.18), transparent 60%), rgb(14 22 40 / 78%);
	border-radius: 2px;
	border: 1px solid rgb(155 170 191 / 25%);
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(18px);
	color: white;
}
body.dark .profile-card {
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.8));
	border: 1px solid rgba(129, 140, 248, 0.5);
	color: white;
}
body.dark .solbar .request-item { 
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.8));
	border: 1px solid rgba(129, 140, 248, 0.5);
	color: white;
}
body.dark .solbar .status-select,body.dark .solbar .friend-item {
	color: black;
}
body.dark .solbar .story-item {
	color: white;
}
body.dark .kayanyazi {
	background: radial-gradient(circle at left, rgba(248, 250, 252, 0.08), transparent 55%), rgba(15, 23, 42, 0.95) !important;
	color: white;
}
body.dark .topicbolum {
	background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 55%), radial-gradient(circle at top right, rgba(244, 114, 182, 0.16), transparent 60%), radial-gradient(circle at bottom, rgba(129, 140, 248, 0.18), transparent 60%), linear-gradient(145deg, #050816, #060b23) !important;
	color: white;
}
body.dark .pencereler {
	background: linear-gradient(120deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.85));
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
	border: 1px solid #405cbb;
	color: white;
}
body.dark .nickler {
	background: transparent;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
	color: white;
}
body.dark .nickler ul .nickselected {
	background: linear-gradient(120deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.85)) !important;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
	border: 1px solid #405cbb;
}
body.dark .nickler ul {
	background: linear-gradient(120deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.85));
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
	border: 1px solid #405cbb;
	color: white;
}
body.dark .nickler ul .nick {
	background: #1d2633;
	color: silver;
}
body.dark .msg {
	background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.18), transparent 60%), rgba(15, 23, 42, 0.94);
	border: 1px solid rgba(30, 64, 175, 0.6);
}
body.dark .msg .kanal {
	background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.18), transparent 60%), rgba(15, 23, 42, 0.94);;
}
body.dark .msg .kanal .nick {
	color: silver;
}
body.dark .msg .mesajsekil .text {
	color: silver;
}
body.dark .msg .bildirim {
	color: silver;
}
body.dark .msg .kanal .mesaj {
	border: 1px solid #192438;
	border-radius: 20px;
	margin-top: 4px;
}
body.dark .chat-quote-body {
	color: silver;
}
body.dark .context-menu {
	background: #1d2633;
}
body.dark .context-menu ul li {
	color: white;
}
body.dark .context-menu .clickrumuz, body.dark .context-menu .msg-preview {
	color: white;
}
body.dark .jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
	background: #3c3f4a;
	color: white;
}

@media screen and (min-width:1400px){ 
	.msg {
		font-size: 15px;
	}
	.topicbolum {
		top: 83px;
	}
	.nickler .nicktara {
		top: 52px;
	}
	.nickler ul {
		top: 42px;
	}
	.msg .kanal .content .time {
		flex: 0 0 80px;
	}
	.kamerabolum {
		width: 300px;
	}
}
@media screen and (max-width:1044px){ 
	.emoji-item {
		font-size: 20px;
	}
	.header {
		position: fixed;
		height: 26px;
		z-index: 5;
		padding: 0;
		width: 100%;
		background: #f6f2f2;
		border: 1px solid #eee6e6;
	}
	.header .topbar-center {
		display: none;
		position: absolute;
		top: 30px;
		width: 120px;
		height: 177px;
		z-index: 9999;
		border: 1px solid rgba(129, 140, 248, 0.5);
		margin-bottom: 10px;
		background: linear-gradient(135deg, #eff6ff, #e0e7ff);
		border-color: silver;
		border-radius: 5px 5px 20px 20px;
		padding: 20px;
	}
	.header .topbar-left {
		gap: 2px;
		margin-left: 5px;
	}
	.header .toggle-pill {
		position: relative;
		width: 20px;
		height: 20px;
	}
	.header .toggle-knob {
		left: 4px;
		width: 15px;
		height: 15px;
	}
	.header .topbar-right {  
		display: flex;
		align-items: center;
	}
	.header .mobilozel {
		font-size: 14px;
		padding: 5px;
		color: #7a7a85;
	}
	.header .oyanson i {
		color: red;
	}
	.header .mobilmesaj {
		display: flex;
		font-size: 12px;
		padding: 2px 10px;
		border-radius: 10px;
		background: white;
		color: #7a7a85;
		align-items: center;
	}
	.header .mobilmesaj i {
		font-size: 17px;
		margin-right: 5px;
	}
	.header .mobilmesaj .oinc {
		position: relative;
		top: -5px;
		font-size: 8px;
		left: -11px;
		color: white;
	} 
	.btn-icon {
		height: 20px;
		font-size: 11px;
	}
	#solbar {
		display: block;
	}
	#solbar .storyvar {
		display: none;
		position: absolute;
		font-size: 13px;
		top: 1px;
		left: 26px;
		color: red;
	}
	#solbar .storyvar .inc {
		position: absolute;
		top: 1px;
		left: 4px;
		color: white;
		font-size: 7px;
	}
	#hmenu {
		display: block;
		width: 40px;
	}
	#satismenu {
		font-size: 11px;
		width: auto;
		margin-left: 5px;
	}
	#satismenu .satismenu-text {
		display: none;
	}
	.solbar {
		display: none;
		top: 51;
		z-index: 8;
		background: #f6f2f2;
		border-right: 1px solid silver;
	}
	.solbar .pcsolbar {
		margin-top: 10px;
	}
	.solbar .pcsolbar .online select {
		padding: 4px;
	}
	.solbar .mobilsolbar {
		display: block;
	}
	.solbar .baslik {
		font-size: 16px;
		font-weight: bold;
		margin: 0;
		margin-left: 20px;
	}
	.solbar .memoji {
		text-align: center;
	}
	.solbar .memoji button {
		margin-top: 10px;
		text-align: center;
		width: 90%;
		padding: 10px;
		border: none;
		font-size: 17px;
		background: #ffffff;
		color: #000000;
		border-bottom: 1px solid silver;
		cursor: pointer;
	}
	.pencereler .mobilozeller {
		display: none;
	}
	.mobilkapat {
		display: block;
		font-size: 11px;
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #eaeaea;
		font-weight: bold;
		background: var(--body);
		color: var(--bodycolor);
	}
	.pencereler {
		position: fixed;
		top: 50px;
		left: 0;
		width: 100%;
		height: auto;
		border:none;
		padding: 0;
		overflow: unset;
		border: 1px solid silver;
		z-index: 4;
		background: #f6f2f2;
	}
	.pencereler .baslik {
		display: none;
	}
	.pencereler .kanallar {
		display: flex;
		flex-wrap: wrap;
		/* max-height: 50px; */
		overflow: auto;
		padding: 1px 0;
		border: none;
		background: transparent;
		margin: 0px auto;
	}
	.pencereler .kanallar .kanalyazdiv {
		font-size: 15px;
	}
	.pencereler .kanallar .kanal {
		display: flex;
		align-items: center;
		margin: 1px;
		padding: 1px;
		border: 1px solid silver;
		border-radius: 2px;
	}
	.pencereler .kanallar .kanal .kanalname {
		margin-right: 5px;
		width: calc(100% - 0px);
		padding: 0;
		font-size: 11px;
	}
	.pencereler .kanallar .kanal .kapat {
		display: block;
		padding-left: 5px;
		padding-right: 5px;
		cursor: pointer;
		font-size: 8px;
	}
	.pencereler .ozeller {
		display: none;
		position: fixed;
		top: 30px;
		right: 0;
		width: 140px;
		height: 100%;
		background: var(--body);
		z-index: 1;
		padding: 5px 10px;
		overflow-y: auto;
		border-left: 1px solid #c5b7b7;
		border-radius: 0;
		padding: 0px;
		margin: 0;
	}
	.pencereler .ozeller .ozel {
		font-size: 10px;
		margin: 3px 0px;
	}
	.pencereler .ozeller .ozel .ozelname {
		width: calc(100% - 20px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 5px 0;
	}
	.pencereler .ozeller .ozel .kapat {
		display: block;
		padding: 5px 10px;
		margin-right: -7px;
		cursor: pointer;
	}
	.kayanyazi {
		left: 0;
		width: 100%;
		top: 29px;
		height: 15px;
		font-size: 11px;
		background: #f6f2f2;
	}
	.kayanyazi::before {
		background: #f6f2f2;
	}
	.kayanyazi::after {
		background: #f6f2f2;
	}
	.topicbolum {
		display: none;
		top: 70px;
		left: 0;
		height: 22px;
		width: 312px;
		padding: 0;
		border-radius: 0;
		background: #f6f2f2;
	}
	.topicbolum .baslik {
		font-size: 10px;
	}
	.topicbolum .tcol-2 {
		font-size: 10px;
	}
	.topicbolum .tcol-3 {
		font-size: 14px;
	}
	.nickler {
		display: none;
		position: fixed;
		top: 70px;
		right: 0px;
		width: 110px;
		z-index: 2;
		padding: 1px;
		background: #f6f2f2;
	}
	.nickler .baslik {
		display: none;
	}
	.nickler .mobilkanalinc {
		display: flex;
		position: absolute;
		background: #0372b9;
		color: white;
		z-index: 8;
		right: 114px;
		top: 40px;
		border-radius: 5px;
		padding: 3px 5px;
		width: auto;
		gap: 10px;
	}
	.nickler .mobilkanalinc i {
		font-size: 15px;
	}
	.nickler .mobilkanalinc span {
		font-size: 11px;
	}
	.nickler .kenarakaydir {
		display: block;
	}
	.nickler .nicktara {
		position: relative;
		top: 0;
		right: 3;
		width: 80px;
		background: var(--body);
		display: flex;
		align-items: center;
		margin: 5px auto;
		height: 20px;
		color: var(--bodycolor);
		padding: 0 5px;
	}
	.nickler .nicktara span {
		font-size: 10px;
	}
	.nickler .nicktara input[type="text"] {
		font-size: 10px;
	}
	.nickler ul {
		top: 0px;
		border-radius: 0;
		background: #f6f2f2;
	}

	.nickler ul .nick {
		display: flex;
		align-items: center;
		margin: 0;
		position: relative;
		color: var(--user);
		font-size: 10px;
		margin-top: 1px;
		border-radius: 0;
		background: #f5f1f1;
	}
	.nickler ul .nick::after {
		display: none;
	}
	.nickler ul .nick .donline {
		width: 5px;
		position: absolute;
		height: 5px;
		z-index: 1;
		border-radius: 20px;
		left: 3px;
		top: 16px;
	}
	.nickler ul .nick .arkaplan {
		width: 20px;
		height: 20px;
		margin-left: -10px;
		background: transparent;
		border: none;
		box-shadow: none;
	}
	.nickler ul .nick .isim {
		flex: 1;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: -10px;
		font-size: 12px;
	}
	.nickler ul .nick .arkaplan img {
		top: 0;
		width: 20px;
		height: 20px;
		border-radius: 20px;
	}
	.msg {
		position: fixed;
		font-size: 12px;
		z-index: 1;
		left: 0;
		font-size: 14px;
		padding: 5px 0px;
		background: #f5f1f1;
	}
	.msg .msglogo {
		display: none;
	}
	.msg .kullanicimenu {
		display: none;
		position: fixed;
		top: 30%;
		right: 8px;
		z-index: 2;
		background: #f5f1f1;
	}
	.msg .kullanicimenu ul {
		right: 0;
	}
	.msg .kullaniciackapat {
		position: absolute;
		top: -30px;
		right: 0;
		background: var(--bodyrenk);
		color: var(--bodycolor);
		padding: 5px;
	}
	.msg .bildirim {
		padding-right: 10px;
	}
	.msg .yazanlar {
		bottom: 40px;
		right: 100px;
	}
	.msg .kanal {
		height: 98%;
		background: #f5f1f1;
	}
	.msg .mesaj {
		touch-action: pan-y; /* ⬆⬇ sadece dikey scroll */
	}
	.msg .mesaj.swiping {
		touch-action: none; /* ⛔ swipe anında her şeyi kapat */
	}
	.msg .kanal .mesaj {
		align-items: center;
		border: 1px solid #f1eeee;
		border-radius: 10px;
		margin-top: 1px;
	}
	.msg .kanal .mesajsekil {
		align-items: flex-start;
		padding: 0;
	}
	.msg .mesajsekil .text {
		padding-right: 10px;
	}
	.msg .kullanicimenu .kullaniciackapat {
		top: 10px;
		right: 10px;
	}
	.quote-box {
		bottom: 30px;
		width: 95%;
		background: #f5f1f1;
	}
	.editor {
		position: fixed;
		height: 35px;
		z-index: 2;
		left: 0;
		padding: 0;
		background: #f5f1f1;
	}
	.editor .renklist li {
		padding: 9px;
	}
	.editor .co-alt {
		height: 35px;
	}
	.editor .co-ust {
		display: none;
	}
	.editor #giflist {
		display: none;
		width: 170px;
		height: 190px;
	}
	.editor .co-alt .co-auto:nth-child(1) {
		flex: 0 0 15px;
	}
	.editor .co-alt .co-auto:nth-child(2) {
		display: block;
		flex: 0 1 20px;
	}
	.editor .co-alt .co-auto:nth-child(3) {
		flex: 0 2 90%;
	}
	.editor .co-alt .co-auto:nth-child(4) {
		flex: 0 0 30px;
	}
	.editor .co-alt .co-auto:nth-child(5) {
		flex: 0 0 65px;
	}
	.editor #inputgonder {
		padding: 5px 5px;
		border: none;
		background: #e7f8ee;
		color: #15803d;
		font-size: 11px;
		margin: 0;
	}
	.msg .kanal .text .emojione {
		width: 15px;
		position: relative;
		top: 2px;
		margin: 0 2px;
	}
	.emojionearea.emojionearea-inline>.emojionearea-editor {
		padding: 5px 0px !important;
		font-size: 15px !important;
		height: 100% !important;
	}
	.emojionearea.emojionearea-inline {
		height: 31px !important;
		box-shadow: none !important;
		border-radius: 20px;
		background: #f5f1f1;
		border: 1px solid #e5e5e5 !important;
	}
	.emojionearea.emojionearea-inline>.emojionearea-button {
		top: 5px !important;
	}
	.context-menu {
		position: fixed;
		top: 10px;
		right: 100px;
	}
	.context-menu .clickrumuz {
		margin: 0;
	}
	.jconfirm .jconfirm-box-container.jconfirm-no-transition {
		-webkit-transition: none!important;
		transition: none!important;
		width: 100%;
	}
	.kamerabolum {
		right: 0;
		width: 80%;
		right: 10%;
	}
	.kameramin {
		top: 275px;
		right: 0;
		width: 170px !important;
		background: var(--bodyrenk);
		color: var(--bodycolor);
	}
	.kameramin p {
		color: black;
	}
	body.dark .toggle-knob {
		transform: translateX(7px);
		background: linear-gradient(135deg,#fefce8,#facc15);
		border-color: rgba(250,204,21,.6);
	}
	body.dark .mobilmesaj {
		background: #171f29;
		color: white;
	}
	body.dark .header .topbar-center {
		background: linear-gradient(120deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.85));
		box-shadow: rgba(15, 23, 42, 0.8) 0px 18px 40px;
		border: 1px solid rgb(64, 92, 187);
	}
	body.dark .pencereler {
		background: linear-gradient(120deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.85));
		box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
		border: 1px solid #405cbb;
		z-index: 5;
	}
	body.dark .pencereler .ozeller {
		background: #181f2a;
		box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
		border: 1px solid #405cbb;
	}
	body.dark .pencereler .kanallar .kactive {
		background: linear-gradient(120deg, #6063e7, #ec4899) !important;
		color: white;
	}
	body.dark .editor {
		background: linear-gradient(120deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.85));
		box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
		border: 1px solid #405cbb;
	}

	body.dark .emojionearea.emojionearea-inline { 
		background: #1c2532;
	}
	body.dark .emojionearea.emojionearea-inline>.emojionearea-editor {
		color: white;
	}
}


.join-fx {
	position: fixed;
	top: 90px;
	left: 50%;
	transform: translateX(-50%) scale(0);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	z-index: 9999;
	background: #0b1020;
	transition: all .7s cubic-bezier(.2,.8,.2,1);
}

.join-fx.active {
	width: 420px;
	height: 86px;
	border-radius: 22px;
	transform: translateX(-50%) scale(1);
}

.join-fx.out {
	transform: translateX(-50%) scale(.4);
	opacity: 0;
}

.fx-content {
	position: relative;
	z-index: 3;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 0 24px;
	height: 100%;
	font-family: system-ui;
	opacity: 0;
	transform: translateY(12px);
	transition: .5s ease .35s;
}

.join-fx.active .fx-content {
	opacity: 1;
	transform: translateY(0);
}

.fx-nick {
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
}

.fx-text {
	flex: 1;
	font-size: 14px;
	color: #cbd5f5;
}
.fx-1 {
	background: radial-gradient(circle at 30% 30%, #38bdf8, #0b1020 60%);
	animation: blobIn .9s ease forwards;
}

@keyframes blobIn {
	0% { border-radius: 50%; }
	50% { border-radius: 40% 60% 55% 45%; }
	100% { border-radius: 22px; }
}

.fx-1 .fx-nick {
	background: linear-gradient(90deg,#38bdf8,#818cf8);
	-webkit-background-clip: text;
	color: transparent;
}
.fx-2 .fx-bg {
	position:absolute;
	inset:0;
	background: radial-gradient(circle, #22d3ee 0%, transparent 60%);
	animation: energy .8s ease-out;
}

@keyframes energy {
	from { transform: scale(.2); opacity:1; }
	to { transform: scale(3); opacity:0; }
}

.fx-2 .fx-nick { color:#22d3ee; }
.fx-3 {
	box-shadow: inset 0 0 40px #7c3aed;
}

.fx-3::before {
	content:"";
	position:absolute;
	inset:-10px;
	background: conic-gradient(#7c3aed,#22d3ee,#7c3aed);
	animation: portal 1.2s linear infinite;
}

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

.fx-3 .fx-nick { color:#a78bfa; }
.fx-4 {
	background: linear-gradient(135deg,#3a111f,#000);
	box-shadow: 0 0 60px rgba(212,175,55,.6);
}

.fx-4 .fx-nick {
	background: linear-gradient(90deg,#d4af37,#fff3c4);
	-webkit-background-clip: text;
	color: transparent;
}
.fx-5 {
	background: rgba(15,23,42,.65);
	backdrop-filter: blur(12px);
}

.fx-5::after {
	content:"";
	position:absolute;
	top:0;
	left:-60%;
	width:40%;
	height:100%;
	background: linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
	animation: sweep 2s infinite;
}

@keyframes sweep {
	to { left:120%; }
}

.fx-5 .fx-nick { color:#60a5fa; }

@media screen and (max-width:1044px){ 
	.join-fx.active {
		width: 100%;
		top: 10px;
	}
}
.chat-link {
	color: #38bdf8;
	text-decoration: underline;
	cursor: pointer;
	word-break: break-all;
}

.chat-link:hover {
	color: #7dd3fc;
}

.yt-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.75);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yt-box {
	position: relative;
	width: 90%;
	max-width: 900px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}

.yt-box iframe {
	width: 100%;
	height: 100%;
}

.yt-close {
	position: absolute;
	top: 6px;
	right: 12px;
	font-size: 28px;
	color: #fff;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 2;
}