/* 1907 Sosyal — Space odalari. Site temasi: lacivert zemin + sari vurgu. */

/* ---------- liste sayfasi ---------- */
.space-kart{
	background:linear-gradient(160deg,#0e2456,#132a63);
	border:1px solid #23407e;border-radius:18px;overflow:hidden;
	box-shadow:0 14px 40px rgba(0,0,0,.35);height:100%;
	display:flex;flex-direction:column;
}
.space-kart-ust{padding:16px 18px;border-bottom:1px solid #23407e;display:flex;align-items:center;gap:10px;}
.space-kart-govde{padding:16px 18px;flex:1;display:flex;flex-direction:column;gap:12px;}
.space-kart h3{color:#fff;font-size:17px;font-weight:800;margin:0;line-height:1.35;}
.space-kart p{color:#8fa0c9;font-size:13px;margin:0;}
.space-kart-alt{margin-top:auto;display:flex;gap:8px;}

.space-canli-rozet{
	display:inline-flex;align-items:center;gap:6px;background:#e0245e;color:#fff;
	font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;letter-spacing:.5px;
}
.space-canli-rozet::before{
	content:'';width:7px;height:7px;border-radius:50%;background:#fff;
	animation:spaceNabiz 1.4s infinite;
}
@keyframes spaceNabiz{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.75);}}

.space-plan-rozet{
	display:inline-flex;align-items:center;gap:6px;background:#23407e;color:#b9c4e0;
	font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
}
.space-bitti-rozet{
	display:inline-flex;align-items:center;gap:6px;background:#1a2c55;color:#7f8db3;
	font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
}

.space-yuzler{display:flex;align-items:center;}
.space-yuzler img{
	width:30px;height:30px;border-radius:50%;object-fit:cover;
	border:2px solid #132a63;margin-left:-8px;
}
.space-yuzler img:first-child{margin-left:0;}

.space-btn-sari{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	background:#ffed00;color:#081536;font-weight:800;padding:11px 16px;
	border-radius:12px;text-decoration:none;font-size:14px;border:0;flex:1;
}
.space-btn-sari:hover{background:#ffe600;color:#081536;}
.space-btn-bos{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	background:transparent;color:#b9c4e0;border:1px solid #3a5390;font-weight:700;
	padding:11px 16px;border-radius:12px;text-decoration:none;font-size:14px;flex:1;
}
.space-btn-bos:hover{border-color:#ffed00;color:#ffed00;}

/* ---------- oda sayfasi ---------- */
#spaceOda{color:#e7ecf8;}
.space-baslik-kutu{
	background:linear-gradient(135deg,#0b1f4d,#17418a);border:1px solid #23407e;
	border-radius:18px;padding:20px;margin-bottom:18px;border-bottom:3px solid #ffed00;
}
.space-baslik-kutu h1{color:#fff;font-size:22px;font-weight:800;margin:6px 0 4px;}
.space-baslik-kutu .space-alt{color:#b9c4e0;font-size:13px;}

.space-bolum{margin-bottom:22px;}
.space-bolum h4{
	color:#ffed00;font-size:13px;font-weight:800;text-transform:uppercase;
	letter-spacing:1px;margin:0 0 12px;
}
.space-eller{
	background:rgba(255,237,0,.06);border:1px dashed #ffed00;
	border-radius:14px;padding:14px;
}

.space-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;}
.space-izgara-kucuk{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;}

.space-kisi{text-align:center;position:relative;}
.space-kisi-avatar{position:relative;display:inline-block;}
.space-kisi-avatar img{
	width:64px;height:64px;border-radius:50%;object-fit:cover;
	border:3px solid transparent;transition:border-color .15s, box-shadow .15s;
}
.space-izgara-kucuk .space-kisi-avatar img{width:48px;height:48px;}
/* Konusan kisi: sari halka */
.space-kisi.konusuyor .space-kisi-avatar img{
	border-color:#2ecc40;box-shadow:0 0 0 4px rgba(46,204,64,.25);
}
.space-mik-kapali{
	position:absolute;right:-2px;bottom:-2px;background:#e0245e;color:#fff;
	width:22px;height:22px;border-radius:50%;font-size:11px;
	display:flex;align-items:center;justify-content:center;border:2px solid #0e2456;
}
.space-el-isaret{
	position:absolute;left:-4px;top:-4px;background:#ffed00;border-radius:50%;
	width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;
}
.space-kisi-ad{
	color:#e7ecf8;font-size:12px;font-weight:700;margin-top:6px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.space-kisi-rol{margin-top:2px;min-height:16px;}
.space-rozet{font-size:9px;font-weight:800;padding:2px 7px;border-radius:10px;text-transform:uppercase;}
.space-rozet-host{background:#ffed00;color:#081536;}
.space-rozet-cohost{background:#17418a;color:#ffed00;}
.space-rozet-konus{background:#23407e;color:#b9c4e0;}

.space-kisi-islem{
	display:flex;gap:4px;justify-content:center;margin-top:6px;
	opacity:0;transition:opacity .15s;
}
.space-kisi:hover .space-kisi-islem{opacity:1;}
.space-kisi-islem button{
	background:#0b1c44;border:1px solid #3a5390;color:#b9c4e0;
	width:26px;height:26px;border-radius:8px;font-size:12px;padding:0;line-height:1;
}
.space-kisi-islem button:hover{border-color:#ffed00;color:#ffed00;}
.space-kisi-islem button.space-tehlike:hover{border-color:#e0245e;color:#e0245e;}
.space-bos{color:#8fa0c9;font-size:13px;grid-column:1/-1;}

/* kontrol cubugu */
#spaceKontrol{
	position:sticky;bottom:0;z-index:5;
	background:rgba(11,28,68,.96);border:1px solid #23407e;border-radius:16px;
	padding:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
	backdrop-filter:blur(6px);
}
.space-btn{
	display:inline-flex;align-items:center;gap:7px;background:#132a63;border:1px solid #3a5390;
	color:#e7ecf8;font-weight:700;font-size:13px;padding:10px 15px;border-radius:12px;
}
.space-btn:hover{border-color:#ffed00;}
.space-btn-ana{background:#ffed00;color:#081536;border-color:#ffed00;font-weight:800;}
.space-btn-acik{background:#2ecc40;border-color:#2ecc40;color:#062712;}
.space-btn-tehlike{background:transparent;border-color:#e0245e;color:#ff7a9c;margin-left:auto;}
.space-btn-tehlike:hover{background:#e0245e;color:#fff;border-color:#e0245e;}

.space-reaksiyonlar{display:inline-flex;gap:2px;flex-wrap:wrap;}
.space-emoji{
	background:transparent;border:1px solid transparent;border-radius:10px;
	font-size:19px;line-height:1;padding:6px 7px;
}
.space-emoji:hover{background:#132a63;border-color:#3a5390;transform:scale(1.15);}

/* sohbet */
.space-sohbet-kutu{
	background:#0b1c44;border:1px solid #23407e;border-radius:16px;
	display:flex;flex-direction:column;height:440px;
}
#spaceSohbetListe{flex:1;overflow-y:auto;padding:14px;}
.space-sohbet-satir{display:flex;gap:8px;margin-bottom:10px;font-size:13px;color:#dbe3f5;}
.space-sohbet-satir img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.space-sohbet-satir b{color:#ffed00;font-weight:700;}
.space-sohbet-sistem{
	color:#8fa0c9;font-size:12px;font-style:italic;text-align:center;
	margin:8px 0;padding:4px;
}
.space-sohbet-form{display:flex;gap:8px;padding:12px;border-top:1px solid #23407e;}
.space-sohbet-form input{
	flex:1;background:#132a63;border:1px solid #3a5390;color:#fff;
	border-radius:10px;padding:9px 12px;font-size:13px;
}
.space-sohbet-form input::placeholder{color:#6f80ab;}
.space-sohbet-form button{background:#ffed00;color:#081536;border:0;border-radius:10px;padding:9px 15px;font-weight:800;}

/* ucan reaksiyonlar */
#spaceReaksiyonKatman{position:fixed;inset:0;pointer-events:none;z-index:9998;}
.space-reaksiyon-ucan{
	position:absolute;bottom:110px;font-size:30px;
	animation:spaceUc 2.5s ease-out forwards;
}
@keyframes spaceUc{
	0%{opacity:0;transform:translateY(0) scale(.5);}
	15%{opacity:1;transform:translateY(-20px) scale(1.15);}
	100%{opacity:0;transform:translateY(-220px) scale(1);}
}

/* ---------- kalici alt bar (site ici gezinirken) ---------- */
.space-dock{
	display:none;position:fixed;left:0;right:0;bottom:0;z-index:9997;
	background:linear-gradient(135deg,#0b1f4d,#17418a);
	border-top:2px solid #ffed00;box-shadow:0 -8px 30px rgba(0,0,0,.45);
}
.space-dock-ic{
	max-width:1140px;margin:0 auto;padding:9px 14px;
	display:flex;align-items:center;gap:12px;
}
.space-dock-nokta{
	width:10px;height:10px;border-radius:50%;background:#3a5390;flex-shrink:0;transition:.2s;
}
.space-dock-nokta.aktif{background:#2ecc40;box-shadow:0 0 0 5px rgba(46,204,64,.22);}
.space-dock-baslik{flex:1;min-width:0;color:#fff;text-decoration:none;line-height:1.25;}
.space-dock-baslik b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.space-dock-baslik small{color:#b9c4e0;font-size:11px;}
.space-dock-btn{
	background:#132a63;border:1px solid #3a5390;color:#e7ecf8;
	width:38px;height:38px;border-radius:11px;font-size:16px;flex-shrink:0;
}
.space-dock-btn.acik{background:#2ecc40;border-color:#2ecc40;color:#062712;}
.space-dock-cik:hover{border-color:#e0245e;color:#e0245e;}

/* header'daki canli space rozeti */
.space-menu-rozet{
	display:inline-block;background:#e0245e;color:#fff;font-size:10px;font-weight:800;
	border-radius:10px;padding:1px 6px;margin-left:4px;vertical-align:middle;
}

@media (max-width:767px){
	.space-izgara{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px;}
	.space-kisi-avatar img{width:54px;height:54px;}
	.space-kisi-islem{opacity:1;}
	#spaceKontrol{gap:6px;padding:10px;}
	.space-btn{padding:9px 12px;font-size:12px;}
	.space-btn-tehlike{margin-left:0;}
	.space-sohbet-kutu{height:360px;}
}

/* kontrol cubugu altindaki aciklama satiri */
.space-durum-satiri{flex-basis:100%;margin-top:6px;font-size:12px;line-height:1.45;}
.space-ipucu{color:#8fa0c9;}
.space-ipucu b{color:#e7ecf8;}
.space-uyari{color:#ffed00;font-weight:600;}

/* ses seviyesi kaydiragi (kontrol cubugu) */
.space-ses-kutu{
	display:inline-flex;align-items:center;gap:7px;background:#132a63;
	border:1px solid #3a5390;border-radius:12px;padding:8px 12px;color:#b9c4e0;font-size:12px;
}
.space-ses-kutu input[type=range]{width:96px;accent-color:#ffed00;cursor:pointer;}
#spaceSesDeger{min-width:38px;text-align:right;font-weight:700;color:#e7ecf8;}
@media (max-width:767px){ .space-ses-kutu input[type=range]{width:74px;} }