* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
body {
background: radial-gradient(circle at top, #1b0f2b, #09010f);
color: white;
min-height: 100vh;
}
/* NAVBAR */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 60px;
}
.logo {
font-size: 28px;
font-weight: bold;
}
.logo span {
color: #b86cff;
}
.nav-buttons button {
margin-left: 15px;
}
/* HERO */
.hero {
text-align: center;
padding: 120px 20px;
}
.hero h1 {
font-size: 56px;
margin-bottom: 20px;
}
.hero p {
font-size: 20px;
opacity: 0.85;
}
.hero-buttons {
margin-top: 40px;
}
/* BUTTONS */
button {
border: none;
cursor: pointer;
border-radius: 12px;
transition: all 0.3s ease;
}
.btn-primary {
background: linear-gradient(135deg, #b86cff, #7a3cff);
color: white;
padding: 14px 28px;
}
.btn-secondary {
background: #1f1135;
color: white;
padding: 14px 28px;
border: 1px solid #b86cff;
}
.btn-outline {
background: transparent;
color: white;
border: 1px solid #555;
padding: 10px 20px;
}
.big {
font-size: 18px;
margin: 0 10px;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 0 20px rgba(184,108,255,0.5);
}
/* FEATURES */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
padding: 80px 60px;
}
.card {
background: rgba(255,255,255,0.05);
padding: 30px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.card h3 {
margin-bottom: 15px;
}
.premium {
border: 1px solid #b86cff;
box-shadow: 0 0 25px rgba(184,108,255,0.4);
}
/* FOOTER */
footer {
text-align: center;
padding: 30px;
opacity: 0.6;
}
/* AUTH PAGES */
.auth-body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(circle at top, #1b0f2b, #09010f);
}
.auth-box {
background: rgba(255,255,255,0.06);
padding: 40px;
width: 100%;
max-width: 380px;
border-radius: 22px;
backdrop-filter: blur(12px);
box-shadow: 0 0 40px rgba(184,108,255,0.3);
text-align: center;
}
.auth-box h2 {
margin-bottom: 10px;
}
.auth-sub {
font-size: 14px;
opacity: 0.7;
margin-bottom: 25px;
}
.auth-box input {
width: 100%;
padding: 14px;
margin-bottom: 15px;
border-radius: 12px;
border: none;
background: rgba(0,0,0,0.4);
color: white;
}
.auth-box input:focus {
outline: 1px solid #b86cff;
}
.full {
width: 100%;
margin-top: 10px;
}
.auth-footer {
margin-top: 20px;
font-size: 14px;
opacity: 0.8;
}
.auth-footer a {
color: #b86cff;
text-decoration: none;
}
/* =========================
CHAT PAGE
========================= */
.chat-body {
background: radial-gradient(circle at top, #1b0f2b, #09010f);
min-height: 100vh;
}
/* HEADER */
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 30px;
border-bottom: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
}
/* CONTAINER */
.chat-container {
max-width: 900px;
margin: 0 auto;
padding: 25px;
}
/* STATUS */
.status-box {
text-align: center;
font-size: 20px;
padding: 50px 0;
opacity: 0.85;
}
/* PROFİL BİLGİ ALANI */
.profile-info {
margin: 20px 0;
text-align: left;
padding: 15px;
background: rgba(255,255,255,0.03);
border-radius: 12px;
border: 1px solid rgba(184,108,255,0.1);
}
.profile-info div {
margin-bottom: 8px;
}
.profile-info div:last-child {
margin-bottom: 0;
}
/* PROFILE CARD */
.profile-box {
background: rgba(255,255,255,0.06);
padding: 30px;
border-radius: 22px;
text-align: center;
box-shadow: 0 0 30px rgba(184,108,255,0.25);
}
.profile-box h3 {
font-size: 24px;
margin-bottom: 25px;
}
.profile-actions {
display: flex;
justify-content: center;
gap: 15px;
}
/* CHAT BOX */
.chat-box {
display: flex;
flex-direction: column;
height: 70vh;
background: rgba(255,255,255,0.05);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 0 35px rgba(184,108,255,0.25);
}
/* MESSAGES */
.messages {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
/* MESSAGE BUBBLES */
.msg {
max-width: 70%;
padding: 12px 16px;
border-radius: 18px;
font-size: 15px;
line-height: 1.4;
animation: fadeIn 0.25s ease;
}
.msg.me {
align-self: flex-end;
background: linear-gradient(135deg, #b86cff, #7a3cff);
color: white;
border-bottom-right-radius: 6px;
}
.msg.other {
align-self: flex-start;
background: rgba(255,255,255,0.12);
border-bottom-left-radius: 6px;
}
/* INPUT */
.chat-input {
display: flex;
padding: 15px;
gap: 10px;
background: rgba(0,0,0,0.4);
}
.chat-input input {
flex: 1;
padding: 14px 18px;
border-radius: 14px;
border: none;
background: rgba(255,255,255,0.08);
color: white;
font-size: 15px;
}
.chat-input input:focus {
outline: 1px solid #b86cff;
}
.chat-input button {
padding: 0 22px;
font-size: 18px;
border-radius: 14px;
background: linear-gradient(135deg, #b86cff, #7a3cff);
color: white;
}
/* SCROLLBAR */
.messages::-webkit-scrollbar {
width: 6px;
}
.messages::-webkit-scrollbar-thumb {
background: #b86cff;
border-radius: 10px;
}
/* ANIMATION */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ALT TAB BAR */
.tabbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 64px;
background: #0f0f14;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid #222;
z-index: 999;
}
.tabbar a {
color: #aaa;
text-decoration: none;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.tabbar a.active {
color: #b86cff;
}
.tabbar i {
font-size: 20px;
margin-bottom: 4px;
}
/* sayfa alta taşmasın */
.chat-container,
.page-content {
padding-bottom: 80px;
}
.chat-list {
padding: 10px;
}
.chat-item {
display: flex;
align-items: center;
background: #15151f;
padding: 12px;
border-radius: 12px;
margin-bottom: 10px;
color: #fff;
text-decoration: none;
}
.avatar {
width: 42px;
height: 42px;
background: #b86cff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-info p {
color: #aaa;
font-size: 13px;
margin: 2px 0 0;
}
.time {
margin-left: auto;
font-size: 12px;
color: #777;
}
/* PROFİL SAYFASI İÇİN EK STİLLER */
.profile-box-large {
max-width: 500px !important;
padding: 40px !important;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
opacity: 0.8;
}
.form-select {
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
background: rgba(0,0,0,0.4);
color: white;
font-size: 15px;
}
.form-select:focus {
outline: 1px solid #b86cff;
}
.form-textarea {
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
background: rgba(0,0,0,0.4);
color: white;
font-size: 15px;
min-height: 100px;
resize: vertical;
font-family: "Segoe UI", sans-serif;
}
.form-textarea:focus {
outline: 1px solid #b86cff;
}
.char-count {
text-align: right;
font-size: 12px;
opacity: 0.7;
margin-top: 5px;
}
.diamond-info {
background: rgba(184, 108, 255, 0.1);
padding: 12px;
border-radius: 10px;
margin: 20px 0;
text-align: center;
border: 1px solid rgba(184, 108, 255, 0.3);
}
.profile-footer {
margin-top: 20px;
font-size: 14px;
opacity: 0.8;
}
.profile-footer a {
color: #b86cff;
text-decoration: none;
}
/* MESAJLAR SAYFASI İÇİN PROFİL BİLGİSİ */
.last-message {
font-size: 13px;
opacity: 0.7;
margin: 8px 0;
color: #aaa;
}
.chat-list {
max-width: 800px;
margin: 0 auto;
}
.chat-card {
background: rgba(255,255,255,0.06);
padding: 20px;
border-radius: 16px;
margin-bottom: 20px;
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s ease;
}
.chat-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.chat-card.active {
border-left: 4px solid #b86cff;
background: rgba(184,108,255,0.05);
}
.chat-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #b86cff, #7a3cff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.chat-info {
flex: 1;
}
.chat-time {
font-size: 12px;
opacity: 0.7;
text-align: right;
}
.chat-last-message {
font-size: 14px;
opacity: 0.8;
margin: 8px 0;
padding: 8px 12px;
background: rgba(255,255,255,0.05);
border-radius: 8px;
border-left: 3px solid rgba(184,108,255,0.5);
}
.chat-actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
/* Mesaj yok durumu için */
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-state-icon {
font-size: 64px;
margin-bottom: 20px;
opacity: 0.5;
}
.empty-state h3 {
margin-bottom: 15px;
}
.empty-state p {
opacity: 0.8;
margin-bottom: 25px;
}
.profile-match-box {
background: rgba(255,255,255,0.06);
padding: 25px;
border-radius: 20px;
box-shadow: 0 0 40px rgba(184,108,255,0.25);
border: 1px solid rgba(255,255,255,0.1);
max-width: 500px;
margin: 0 auto;
animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* EŞLEŞME PROFİL HEADER */
.match-profile-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.match-avatar {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #b86cff, #7a3cff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
box-shadow: 0 0 20px rgba(184,108,255,0.5);
}
.match-profile-info {
flex: 1;
}
.match-profile-info h3 {
font-size: 24px;
margin: 0 0 8px 0;
color: white;
}
.match-gender {
font-size: 16px;
opacity: 0.9;
display: flex;
align-items: center;
gap: 8px;
}
.match-timer {
background: rgba(184,108,255,0.1);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
color: #b86cff;
border: 1px solid rgba(184,108,255,0.3);
}
/* BİO KUTUSU */
.match-bio-box {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
margin-bottom: 25px;
border-left: 4px solid #b86cff;
}
.match-bio-label {
font-size: 14px;
opacity: 0.8;
margin-bottom: 10px;
color: #b86cff;
}
.match-bio-text {
font-size: 15px;
line-height: 1.6;
color: #ddd;
min-height: 60px;
}
/* UYARI MESAJI */
.match-warning {
background: rgba(184,108,255,0.1);
padding: 15px;
border-radius: 12px;
text-align: center;
margin-bottom: 25px;
border: 1px solid rgba(184,108,255,0.2);
color: #d9a3ff;
font-size: 14px;
}
/* BUTONLAR */
.match-actions {
display: flex;
gap: 15px;
}
.btn-accept {
flex: 1;
background: linear-gradient(135deg, #4CAF50, #2E7D32);
color: white;
border: none;
padding: 16px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-accept:hover {
transform: translateY(-3px);
box-shadow: 0 0 25px rgba(76, 175, 80, 0.4);
background: linear-gradient(135deg, #66BB6A, #388E3C);
}
.btn-skip {
flex: 1;
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
padding: 16px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-skip:hover {
transform: translateY(-3px);
box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
background: rgba(255,255,255,0.15);
}
/* EŞLEŞME OLMAZSA MESAJI */
.no-match-message {
text-align: center;
padding: 40px;
color: #aaa;
font-style: italic;
}
/* CİNSİYET İKONLARI */
.gender-male {
color: #4FC3F7;
}
.gender-female {
color: #F06292;
}
.gender-other {
color: #BA68C8;
}
.chat-user-header {
display: flex;
align-items: center;
padding: 15px 20px;
background: rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.1);
gap: 15px;
}
.chat-user-avatar {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #b86cff, #7a3cff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.chat-user-details {
flex: 1;
}
.chat-user-details h3 {
margin: 0 0 5px 0;
font-size: 18px;
color: white;
}
.chat-user-gender {
font-size: 14px;
opacity: 0.8;
display: flex;
align-items: center;
gap: 5px;
}
.chat-time-left {
background: rgba(184,108,255,0.1);
padding: 8px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
color: #b86cff;
border: 1px solid rgba(184,108,255,0.3);
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
border-bottom: 1px solid rgba(255,255,255,0.1);
background: rgba(15, 8, 26, 0.95);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 1000;
height: 70px;
}
/* Logo */
.chat-header .logo {
font-size: 28px;
font-weight: bold;
color: white;
}
.chat-header .logo span {
color: #b86cff;
text-shadow: 0 0 10px rgba(184, 108, 255, 0.5);
}
/* Sağ taraf - MODERN TASARIM */
.user-info-right {
display: flex;
align-items: center;
gap: 25px;
background: rgba(255, 255, 255, 0.08);
padding: 10px 20px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
/* Her bilgi kutusu */
.info-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.info-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}
/* Profil linki */
.profile-link {
display: flex;
align-items: center;
gap: 8px;
color: #b86cff;
text-decoration: none;
font-weight: 500;
padding: 6px 12px;
border-radius: 10px;
background: rgba(184, 108, 255, 0.1);
border: 1px solid rgba(184, 108, 255, 0.3);
transition: all 0.3s ease;
}
.profile-link:hover {
background: rgba(184, 108, 255, 0.2);
color: #d9a3ff;
box-shadow: 0 0 15px rgba(184, 108, 255, 0.3);
}
/* Ayırıcı çizgi */
.separator {
color: rgba(255, 255, 255, 0.3);
font-size: 20px;
margin: 0 5px;
}
/* İkonlar */
.info-icon {
font-size: 18px;
}
.info-text {
font-size: 15px;
font-weight: 500;
}
/* Timer özel stili */
.timer-item {
background: rgba(184, 108, 255, 0.15);
border: 1px solid rgba(184, 108, 255, 0.3);
}
.timer-item .info-icon {
color: #b86cff;
}
/* CHAT BOX düzenle (mesaj alanı için) */
.chat-box {
display: flex;
flex-direction: column;
height: 75vh;
background: rgba(255,255,255,0.05);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 35px rgba(184,108,255,0.25);
border: 1px solid rgba(255,255,255,0.1);
}
/* Eski chat-info class'ını kaldırmak için */
.chat-info {
display: none;
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 25px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(20, 15, 35, 0.95);
backdrop-filter: blur(10px);
}
.chat-header .logo {
font-size: 24px;
font-weight: 700;
letter-spacing: 0.5px;
}
.chat-header .logo span {
color: #b86cff;
}
.header-right {
display: flex;
align-items: center;
gap: 20px;
}
.user-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(184, 108, 255, 0.1);
border-radius: 20px;
border: 1px solid rgba(184, 108, 255, 0.2);
font-size: 14px;
}
.user-badge .avatar {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #b86cff, #7a3cff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.diamond-count {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 215, 0, 0.1);
border-radius: 20px;
border: 1px solid rgba(255, 215, 0, 0.2);
font-size: 14px;
color: #FFD700;
}
.timer-badge {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(76, 175, 80, 0.1);
border-radius: 20px;
border: 1px solid rgba(76, 175, 80, 0.2);
font-size: 14px;
color: #4CAF50;
font-weight: 600;
}
.action-btn {
padding: 6px 14px;
border-radius: 20px;
border: none;
background: rgba(255,255,255,0.05);
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: inline-block;
}
.action-btn:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-1px);
}
.action-btn.primary {
background: rgba(184, 108, 255, 0.2);
color: #b86cff;
}
.action-btn.primary:hover {
background: rgba(184, 108, 255, 0.3);
}
.diamond-package {
transition: all 0.3s ease;
}
.diamond-package:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.diamond-package.popular {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(184, 108, 255, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(184, 108, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(184, 108, 255, 0); }
}
/* TIKLANABİLİR ELMAS STİLİ */
.diamond-count {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 215, 0, 0.1);
border-radius: 20px;
border: 1px solid rgba(255, 215, 0, 0.2);
font-size: 14px;
color: #FFD700;
cursor: pointer;
transition: all 0.2s;
text-decoration: none !important;
}
.diamond-count:hover {
background: rgba(255, 215, 0, 0.2);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
}
.diamond-count a {
color: #FFD700 !important;
text-decoration: none !important;
display: flex;
align-items: center;
gap: 6px;
}
/* SÜRE UZATMA BUTONU */
.extend-time-btn {
position: absolute;
right: 20px;
bottom: 85px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #FFD700, #FFA500);
border: none;
border-radius: 50%;
color: white;
font-size: 24px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 100;
}
.extend-time-btn:hover {
transform: scale(1.1) rotate(90deg);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}
.extend-time-btn:active {
transform: scale(0.95);
}
/* SÜRE UZATMA MODALI */
.extend-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
z-index: 1000;
align-items: center;
justify-content: center;
}
.extend-modal-content {
background: rgba(30, 20, 50, 0.95);
padding: 30px;
border-radius: 20px;
width: 90%;
max-width: 400px;
border: 2px solid rgba(255, 215, 0, 0.3);
box-shadow: 0 0 50px rgba(255, 215, 0, 0.2);
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.extend-options {
display: grid;
gap: 15px;
margin: 25px 0;
}
.extend-option {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: all 0.2s;
}
.extend-option:hover {
background: rgba(255, 215, 0, 0.1);
border-color: rgba(255, 215, 0, 0.3);
transform: translateX(5px);
}
.extend-option.selected {
background: rgba(255, 215, 0, 0.15);
border-color: #FFD700;
}
.extend-diamond {
color: #FFD700;
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
}
.extend-time {
color: #4CAF50;
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
}
.modal-actions {
display: flex;
gap: 15px;
margin-top: 25px;
}
.modal-btn {
flex: 1;
padding: 12px;
border-radius: 10px;
border: none;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
}
.modal-btn.confirm {
background: linear-gradient(135deg, #4CAF50, #2E7D32);
color: white;
}
.modal-btn.confirm:hover {
background: linear-gradient(135deg, #66BB6A, #388E3C);
transform: translateY(-2px);
}
.modal-btn.cancel {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.modal-btn.cancel:hover {
background: rgba(255, 255, 255, 0.15);
}
/* CHAT BOX POZİSYONU */
.chat-box {
position: relative;
}
/* SİSTEM MESAJLARI - HER İKİ KULLANICI DA GÖRÜR */
.msg.system {
align-self: center !important;
background: rgba(255, 215, 0, 0.1) !important;
color: #FFD700 !important;
border: 1px solid rgba(255, 215, 0, 0.3) !important;
text-align: center !important;
font-size: 14px !important;
max-width: 90% !important;
border-radius: 10px !important;
padding: 8px 15px !important;
margin: 5px auto !important;
font-style: italic !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}
/* CHAT DETAIL SAYFASI İÇİN EK STİLLER */
/* Süre uzatma modalı için chat detail'de */
/* Chat detail'de süre uzatma butonu */
.extend-time-btn {
background: linear-gradient(135deg, #FFD700, #FFA500);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
transition: all 0.3s ease;
}
.extend-time-btn:hover {
transform: scale(1.1) rotate(90deg);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}
/* Sistem mesajları */
.chat-actions {
display: flex;
align-items: center;
margin-right: 10px;
}
.add-friend-btn {
background: transparent;
border: 1px solid #9C27B0;
color: white;
border-radius: 8px;
padding: 6px 10px;
cursor: pointer;
}
.add-friend-btn:hover {
background: #9C27B0;
}
.chat-extra-actions {
flex-shrink: 0;
padding: 10px;
display: flex;
justify-content: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
background: transparent;
}
.messages {
flex: 1;
overflow-y: auto;
}
.notification-btn {
position: relative;
font-size: 20px;
margin-right: 5px;
text-decoration: none;
}
.notif-badge {
position: absolute;
top: -6px;
right: -8px;
background: red;
color: white;
font-size: 11px;
padding: 2px 6px;
border-radius: 50%;
font-weight: bold;
}
/* ===== FRIENDS PAGE ===== */
.friends-page {
max-width: 720px;
margin: 40px auto 120px;
padding: 0 20px;
}
.friends-title {
text-align: center;
margin-bottom: 40px;
}
.friends-title h2 {
font-size: 28px;
margin-bottom: 6px;
}
.friends-title p {
opacity: 0.7;
font-size: 14px;
}
/* Kart */
.friends-card {
background: rgba(255,255,255,0.05);
border-radius: 18px;
padding: 20px;
margin-bottom: 30px;
backdrop-filter: blur(8px);
}
.friends-card h3 {
margin-bottom: 18px;
font-size: 18px;
}
/* Satır */
.friend-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255,255,255,0.06);
margin-bottom: 12px;
}
.friend-row.request {
border-left: 4px solid #9b5cff;
}
.friend-left {
display: flex;
align-items: center;
gap: 14px;
}
.friend-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.friend-info strong {
display: block;
font-size: 16px;
}
.friend-info span {
font-size: 13px;
opacity: 0.7;
}
/* Aksiyonlar */
.friend-actions {
display: flex;
gap: 10px;
}
.btn {
padding: 8px 14px;
border-radius: 10px;
font-size: 14px;
text-decoration: none;
transition: 0.2s;
}
.btn.accept {
background: #6c5ce7;
color: #fff;
}
.btn.reject {
background: rgba(255,255,255,0.15);
color: #fff;
}
.btn.chat {
background: rgba(255,255,255,0.15);
color: #fff;
}
.btn:hover {
transform: translateY(-1px);
opacity: 0.9;
}
/* Boş durum */
.friends-empty {
text-align: center;
padding: 40px 10px;
opacity: 0.7;
}
.friends-empty .icon {
font-size: 48px;
margin-bottom: 10px;
}
.status {
font-size: 13px;
margin-top: 4px;
display: block;
}
.status.online {
color: #2ecc71;
}
.status.offline {
color: #aaa;
}
/* =========================
MOBİL UYUMLULUK - TELEFON DESTEĞİ
========================= */
/* 1. TELEFON EKRANLARI İÇİN (768px ve altı) */
@media screen and (max-width: 768px) {
/* GENEL AYARLAR */
body {
font-size: 14px;
}
/* HEADER KÜÇÜLT */
.chat-header {
padding: 12px 15px !important;
height: 60px !important;
}
.chat-header .logo {
font-size: 20px !important;
}
.header-right {
gap: 10px !important;
}
.user-badge, .diamond-count, .timer-badge, .action-btn {
font-size: 12px !important;
padding: 5px 10px !important;
}
.user-badge .avatar {
width: 20px !important;
height: 20px !important;
font-size: 10px !important;
}
/* ANA SAYFA HERO */
.hero {
padding: 60px 15px !important;
}
.hero h1 {
font-size: 32px !important;
line-height: 1.3;
}
.hero p {
font-size: 16px !important;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 30px;
}
.btn-primary.big, .btn-secondary.big {
padding: 12px 20px !important;
font-size: 16px !important;
width: 100%;
margin: 0 !important;
}
/* ÖZELLİK KARTLARI */
.features {
padding: 30px 15px !important;
grid-template-columns: 1fr !important;
gap: 20px;
}
.card {
padding: 20px !important;
}
/* CHAT CONTAINER */
.chat-container {
padding: 15px !important;
padding-bottom: 100px !important; /* Tabbar için boşluk */
}
/* CHAT KUTUSU */
.chat-box {
height: calc(100vh - 180px) !important; /* Mobilde uygun yükseklik */
border-radius: 15px;
}
/* MESAJ BALONLARI */
.msg {
max-width: 85% !important;
font-size: 14px !important;
padding: 10px 14px !important;
}
/* MESAJ GİRİŞ ALANI */
.chat-input {
padding: 10px !important;
}
.chat-input input {
padding: 12px 15px !important;
font-size: 14px !important;
}
.chat-input button {
padding: 0 18px !important;
font-size: 16px !important;
}
/* EŞLEŞME PROFİL KUTUSU */
.profile-match-box {
padding: 20px !important;
margin: 10px !important;
}
.match-profile-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.match-avatar {
width: 60px !important;
height: 60px !important;
font-size: 24px !important;
}
.match-actions {
flex-direction: column;
gap: 10px;
}
.btn-accept, .btn-skip {
width: 100% !important;
padding: 14px !important;
}
/* SÜRE UZATMA BUTONU */
.extend-time-btn {
width: 45px !important;
height: 45px !important;
font-size: 20px !important;
right: 15px !important;
bottom: 80px !important;
}
/* SÜRE UZATMA MODALI */
.extend-modal-content {
padding: 20px !important;
width: 95% !important;
max-width: none !important;
margin: 10px !important;
}
.extend-options {
grid-template-columns: 1fr !important;
}
/* MESAJLAR LİSTESİ */
.chat-list {
padding: 10px 5px !important;
}
.chat-item {
padding: 15px !important;
margin-bottom: 10px !important;
}
.avatar {
width: 40px !important;
height: 40px !important;
margin-right: 10px !important;
}
/* PROFİL SAYFASI */
.auth-box.profile-box-large {
padding: 25px 20px !important;
margin: 15px !important;
width: calc(100% - 30px) !important;
}
/* ARKADAŞLAR SAYFASI */
.friends-page {
margin: 20px auto 120px !important;
padding: 0 15px !important;
}
.friend-row {
flex-direction: column;
align-items: flex-start;
gap: 15px;
padding: 15px !important;
}
.friend-left {
width: 100%;
}
.friend-actions {
width: 100%;
justify-content: space-between;
}
.btn {
flex: 1;
text-align: center;
padding: 10px !important;
}
/* ELMAS SAYFASI */
.diamond-package {
padding: 20px !important;
}
/* TABBAR (ALT MENÜ) - MOBİL İÇİN OPTİMİZE */
.tabbar {
height: 70px !important;
padding: 10px 0 !important;
background: rgba(15, 8, 26, 0.98) !important;
backdrop-filter: blur(20px) !important;
border-top: 1px solid rgba(184, 108, 255, 0.2) !important;
}
.tabbar a {
font-size: 11px !important;
padding: 8px 5px !important;
}
.tabbar i {
font-size: 22px !important;
margin-bottom: 5px !important;
}
/* STATUS MESAJLARI */
.status-box {
padding: 40px 20px !important;
font-size: 18px !important;
}
/* NOTIFICATION BADGE */
.notif-badge {
font-size: 9px !important;
padding: 1px 4px !important;
top: -8px !important;
right: -10px !important;
}
}
/* 2. KÜÇÜK TELEFONLAR (480px ve altı) */
@media screen and (max-width: 480px) {
.hero h1 {
font-size: 28px !important;
}
.hero p {
font-size: 14px !important;
line-height: 1.5;
}
.chat-header {
padding: 10px 12px !important;
}
.header-right {
gap: 8px !important;
}
/* USER BADGE'DE İSİM GİZLE */
.user-badge span {
display: none !important;
}
.user-badge {
padding: 6px !important;
min-width: 36px !important;
justify-content: center;
}
/* DİAMOND COUNT'TA SADECE EMOJİ */
.diamond-count {
padding: 6px !important;
min-width: 40px !important;
justify-content: center;
}
.diamond-count span:not(.emoji) {
display: none !important;
}
/* ACTION BUTONLARDA SADECE İKON */
.action-btn.primary {
padding: 6px 8px !important;
min-width: 36px !important;
}
.action-btn.primary span {
display: none !important;
}
.action-btn.primary::before {
content: "🔥";
font-size: 16px;
}
/* CHAT USER HEADER */
.chat-user-header {
padding: 12px 15px !important;
flex-wrap: wrap;
gap: 10px;
}
.chat-user-details h3 {
font-size: 16px !important;
}
.add-friend-btn {
font-size: 12px !important;
padding: 6px 10px !important;
white-space: nowrap;
}
/* MESAJLAR SAYFASI AVATAR */
.chat-avatar {
width: 45px !important;
height: 45px !important;
font-size: 18px !important;
}
/* TABBAR DAHA KÜÇÜK */
.tabbar {
height: 60px !important;
}
.tabbar a {
font-size: 10px !important;
}
.tabbar i {
font-size: 20px !important;
}
}
/* 3. YATAY MOD (LANDSCAPE) İÇİN */
@media screen and (max-height: 600px) and (orientation: landscape) {
.chat-box {
height: calc(100vh - 140px) !important;
}
.tabbar {
height: 60px !important;
}
.tabbar a {
font-size: 10px !important;
}
.tabbar i {
font-size: 18px !important;
margin-bottom: 2px !important;
}
}
/* 4. TABLET (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.chat-container {
max-width: 95% !important;
padding: 20px !important;
}
.features {
grid-template-columns: repeat(2, 1fr) !important;
padding: 50px 30px !important;
}
.hero {
padding: 80px 30px !important;
}
.hero h1 {
font-size: 42px !important;
}
}
/* 5. TOUCH FRIENDLY (DOKUNMATİK EKRANLAR) */
@media (hover: none) and (pointer: coarse) {
/* BUTONLARI BÜYÜT */
button, .btn, .action-btn, .tabbar a {
min-height: 0px !important; /* Apple Touch Guidelines */
min-width: 0px !important;
}
/* INPUT ALANLARINI BÜYÜT */
input, textarea, select {
font-size: 16px !important; /* iOS zoom'u önler */
padding: 15px !important;
}
/* TIKLANABİLİR ALANLARI GENİŞLET */
.msg {
padding: 12px 16px !important;
margin: 5px 0 !important;
}
/* SCROLLBAR GİZLE (mobilde çirkin) */
::-webkit-scrollbar {
/*width: 5px !important;*/
}
/* DOKUNMA HOVER EFFECT'İ KALDIR */
button:hover, .btn:hover, .action-btn:hover {
transform: none !important;
}
button:active, .btn:active, .action-btn:active {
transform: scale(0.98) !important;
opacity: 0.8 !important;
}
}
/* 6. KARANLIK MOD DESTEĞİ */
@media (prefers-color-scheme: dark) {
/* Zaten karanlık tema var, ek ayar gerekmez */
}
/* 7. YÜKSEK ÇÖZÜNÜRLÜK EKRANLAR */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo, .btn-accept, .btn-primary {
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
}
/* 8. MOBİLDE GÖRÜNÜM İYİLEŞTİRMELERİ */
.mobile-only {
display: none !important;
}
@media screen and (max-width: 768px) {
.mobile-only {
display: block !important;
}
.desktop-only {
display: none !important;
}
/* SWIPE DETECTION İÇİN */
.messages {
-webkit-overflow-scrolling: touch !important; /* iOS smooth scroll */
scroll-behavior: smooth;
}
/* SAFARI İÇİN FIX */
@supports (-webkit-touch-callout: none) {
.chat-body {
height: -webkit-fill-available !important;
}
}
}
/* 9. KÜÇÜK TELEFONLAR İÇİN EK AYARLAR */
@media screen and (max-width: 360px) {
.chat-header .logo {
font-size: 18px !important;
}
.diamond-count::after {
content: attr(data-count);
font-size: 10px;
}
.tabbar a {
font-size: 9px !important;
padding: 5px 3px !important;
}
.tabbar i {
font-size: 18px !important;
}
}
/* ====================================
MESSAGES SAYFASI - MODERN BUTONLAR & MOBİL
(Sadece bu sayfa için)
==================================== */
/* A. MODERN BUTON SİSTEMİ - SADECE MESSAGES */
.messages-page .btn-modern {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
outline: none;
position: relative;
overflow: hidden;
letter-spacing: 0.3px;
min-height: 52px;
width: 100%;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(12px);
}
/* Aktif sohbet butonu - Modern gradient */
.messages-page .btn-modern.active-chat {
background: linear-gradient(135deg,
#8B5CF6 0%,
#7C3AED 33%,
#6D28D9 66%,
#5B21B6 100%);
color: white;
border: 1.5px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 6px 25px rgba(139, 92, 246, 0.35),
inset 0 1px 2px rgba(255, 255, 255, 0.2);
}
/* Pasif sohbet butonu - Modern dark */
.messages-page .btn-modern.inactive-chat {
background: linear-gradient(135deg,
#2D1B69 0%,
#1F1B2E 33%,
#1A1525 66%,
#151021 100%);
color: #E2E8F0;
border: 1.5px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.2),
inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
/* Hover efekti */
.messages-page .btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.messages-page .btn-modern.active-chat:hover {
background: linear-gradient(135deg,
#9B69F7 0%,
#8C4BEE 33%,
#7D39DF 66%,
#6C28C6 100%);
box-shadow:
0 12px 35px rgba(139, 92, 246, 0.45),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
.messages-page .btn-modern.inactive-chat:hover {
background: linear-gradient(135deg,
#3D2B89 0%,
#2F2B4E 33%,
#2A2535 66%,
#252041 100%);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
/* Active/Click efekti */
.messages-page .btn-modern:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.1s;
}
/* B. MESSAGES KART STİLİ - MODERN */
.messages-page .message-card-modern {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 24px;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.25),
inset 0 1px 1px rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.messages-page .message-card-modern:hover {
border-color: rgba(139, 92, 246, 0.3);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
/* C. AVATAR MODERN */
.messages-page .avatar-modern {
width: 56px;
height: 56px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
background: linear-gradient(135deg, #8B5CF6, #6D28D9);
box-shadow:
0 8px 20px rgba(139, 92, 246, 0.4),
inset 0 1px 2px rgba(255, 255, 255, 0.2);
flex-shrink: 0;
}
/* D. BOŞ MESAJ EKRANI - MODERN */
.messages-page .empty-state-modern {
text-align: center;
padding: 80px 20px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 1px rgba(255, 255, 255, 0.03);
margin: 20px 0;
}
.messages-page .empty-state-modern .icon {
font-size: 72px;
margin-bottom: 24px;
opacity: 0.8;
background: linear-gradient(135deg, #8B5CF6, #6D28D9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.messages-page .empty-state-modern h3 {
font-size: 28px;
margin-bottom: 16px;
background: linear-gradient(135deg, #E2E8F0, #94A3B8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.messages-page .empty-state-modern p {
font-size: 16px;
line-height: 1.6;
max-width: 400px;
margin: 0 auto 32px;
color: #94A3B8;
}
/* E. HEADER BUTONLARI - MODERN (sadece messages sayfası) */
.messages-page .action-btn-modern {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: #E2E8F0;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.messages-page .action-btn-modern.primary {
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.2),
rgba(109, 40, 217, 0.2));
border: 1px solid rgba(139, 92, 246, 0.3);
color: #C4B5FD;
}
.messages-page .action-btn-modern:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.messages-page .action-btn-modern.primary:hover {
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.3),
rgba(109, 40, 217, 0.3));
border-color: rgba(139, 92, 246, 0.5);
}
/* ====================================
MOBİL UYUMLULUK - MESSAGES SAYFASI
==================================== */
@media screen and (max-width: 768px) {
/* 1. MODERN KART MOBİL */
.messages-page .message-card-modern {
padding: 18px !important;
border-radius: 16px !important;
margin-bottom: 16px !important;
}
/* 2. AVATAR MOBİL */
.messages-page .avatar-modern {
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
font-size: 20px !important;
}
/* 3. BUTONLAR MOBİL */
.messages-page .btn-modern {
padding: 12px 20px !important;
min-height: 48px !important;
font-size: 14px !important;
border-radius: 12px !important;
}
/* 4. HEADER BUTONLARI MOBİL */
.messages-page .action-btn-modern {
padding: 8px 14px !important;
font-size: 13px !important;
border-radius: 10px !important;
}
/* 5. BOŞ MESAJ MOBİL */
.messages-page .empty-state-modern {
padding: 60px 16px !important;
border-radius: 20px !important;
margin: 16px 0 !important;
}
.messages-page .empty-state-modern .icon {
font-size: 56px !important;
margin-bottom: 20px !important;
}
.messages-page .empty-state-modern h3 {
font-size: 22px !important;
margin-bottom: 12px !important;
}
.messages-page .empty-state-modern p {
font-size: 14px !important;
max-width: 90% !important;
margin-bottom: 24px !important;
}
/* 6. METİN OPTİMİZASYONU */
.messages-page .message-card-modern h3 {
font-size: 17px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.messages-page .message-preview-modern {
font-size: 13px !important;
padding: 10px !important;
}
/* 7. FLEX DÜZENİ MOBİL */
.messages-page .message-header-modern {
gap: 12px !important;
margin-bottom: 14px !important;
}
.messages-page .message-meta-modern {
font-size: 12px !important;
}
.messages-page .message-time-modern {
font-size: 11px !important;
}
}
@media screen and (max-width: 480px) {
/* KÜÇÜK TELEFONLAR */
.messages-page .message-card-modern {
padding: 16px !important;
border-radius: 14px !important;
}
.messages-page .avatar-modern {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
font-size: 18px !important;
}
.messages-page .btn-modern {
padding: 10px 16px !important;
min-height: 44px !important;
font-size: 13px !important;
}
.messages-page .action-btn-modern {
padding: 6px 10px !important;
min-width: 36px !important;
justify-content: center;
}
/* METİNLERİ GİZLE, SADECE İKON */
.messages-page .action-btn-modern span {
display: none !important;
}
.messages-page .action-btn-modern::after {
content: "";
font-size: 16px;
}
.messages-page .action-btn-modern.primary::after {
content: "🔥";
}
.messages-page .action-btn-modern:not(.primary)::after {
content: "🏠";
}
.messages-page .user-badge-modern span {
display: none !important;
}
.messages-page .diamond-count-modern span:not(:first-child) {
display: none !important;
}
}
/* YATAY MOD İÇİN */
@media screen and (max-height: 600px) and (orientation: landscape) {
.messages-page .message-card-modern {
padding: 14px !important;
margin-bottom: 12px !important;
}
.messages-page .avatar-modern {
width: 42px !important;
height: 42px !important;
}
.messages-page .btn-modern {
padding: 10px !important;
min-height: 42px !important;
}
}
/* DOKUNMATİK OPTİMİZASYON */
@media (hover: none) and (pointer: coarse) {
.messages-page .btn-modern,
.messages-page .action-btn-modern {
min-height: 48px !important;
min-width: 48px !important;
}
.messages-page .message-card-modern:active {
transform: scale(0.98) !important;
background: rgba(255, 255, 255, 0.07) !important;
}
}
/* ====================================
CHAT HEADER - MOBİLDE SADECE ELMAS
==================================== */
/* CHAT HEADER - MODERN (Tüm sayfalar) */
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 25px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(20, 15, 35, 0.95);
backdrop-filter: blur(15px);
position: sticky;
top: 0;
z-index: 1000;
height: 70px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.chat-header .logo {
font-size: 24px;
font-weight: 700;
letter-spacing: 0.5px;
color: white;
text-shadow: 0 0 10px rgba(184, 108, 255, 0.3);
}
.chat-header .logo span {
color: #b86cff;
text-shadow: 0 0 15px rgba(184, 108, 255, 0.5);
}
/* SAĞ TARAF - MODERN */
.header-right {
display: flex;
align-items: center;
gap: 15px;
}
/* USER BADGE */
.user-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(184, 108, 255, 0.1);
border-radius: 20px;
border: 1px solid rgba(184, 108, 255, 0.2);
font-size: 14px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.user-badge:hover {
background: rgba(184, 108, 255, 0.2);
transform: translateY(-1px);
box-shadow: 0 5px 15px rgba(184, 108, 255, 0.2);
}
.user-badge .avatar {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #b86cff, #7a3cff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
box-shadow: 0 0 10px rgba(184, 108, 255, 0.4);
}
/* DİAMOND COUNT - TIKLANABİLİR */
.diamond-count {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 215, 0, 0.1);
border-radius: 20px;
border: 1px solid rgba(255, 215, 0, 0.2);
font-size: 14px;
color: #FFD700;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none !important;
font-weight: 600;
}
.diamond-count:hover {
background: rgba(255, 215, 0, 0.2);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2);
}
/* ACTION BUTTONS */
.action-btn {
padding: 8px 16px;
border-radius: 20px;
border: none;
background: rgba(255,255,255,0.05);
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
}
.action-btn:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border-color: rgba(255,255,255,0.2);
}
.action-btn.primary {
background: rgba(184, 108, 255, 0.2);
color: #b86cff;
border: 1px solid rgba(184, 108, 255, 0.3);
}
.action-btn.primary:hover {
background: rgba(184, 108, 255, 0.3);
box-shadow: 0 5px 20px rgba(184, 108, 255, 0.3);
border-color: rgba(184, 108, 255, 0.5);
}
/* TIMER BADGE */
/* ====================================
MOBİL UYUMLULUK - SADECE ELMAS GÖSTER
==================================== */
@media screen and (max-width: 768px) {
/* HEADER KÜÇÜLT */
.chat-header {
padding: 10px 15px !important;
height: 60px !important;
gap: 10px;
}
.chat-header .logo {
font-size: 20px !important;
white-space: nowrap;
}
.header-right {
gap: 8px !important;
flex-wrap: nowrap;
justify-content: flex-end;
}
/* MOBİLDE USER-BADGE'İ GİZLE */
.user-badge {
display: none !important;
}
/* MOBİLDE ACTION BUTONLARI GİZLE */
.action-btn {
display: none !important;
}
/* MOBİLDE SADECE ELMAS GÖSTER */
.diamond-count {
display: flex !important;
padding: 8px 12px !important;
font-size: 14px !important;
min-width: auto;
margin-left: auto;
}
/* ELMAS İÇİNDE SADECE EMOJİ VE SAYI */
.diamond-count span:first-child {
display: inline-block !important;
font-size: 16px;
}
.diamond-count span:last-child {
display: inline-block !important;
font-weight: bold;
}
}
/* ÇOK KÜÇÜK EKRANLAR (480px ve altı) */
@media screen and (max-width: 480px) {
.chat-header {
padding: 8px 12px !important;
}
.chat-header .logo {
font-size: 18px !important;
}
.diamond-count {
padding: 6px 10px !important;
font-size: 13px !important;
}
}
/* EN KÜÇÜK TELEFONLAR (360px ve altı) */
@media screen and (max-width: 360px) {
.chat-header .logo {
font-size: 16px !important;
}
.diamond-count {
padding: 5px 8px !important;
font-size: 12px !important;
}
}
/* ====================================
MESSAGES PAGE CONTENT STYLING
==================================== */
/* Messages sayfası özel stilleri */
.messages-page .chat-container {
max-width: 800px;
margin: 0 auto;
padding: 25px 20px 100px 20px;
}
.messages-page h2 {
font-size: 28px;
text-align: center;
margin-bottom: 30px;
background: linear-gradient(135deg, #b86cff, #7a3cff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* Mesaj kartları için modern styling */
.message-card {
background: rgba(255, 255, 255, 0.06);
border-radius: 18px;
padding: 22px;
margin-bottom: 18px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.message-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
border-color: rgba(184, 108, 255, 0.3);
}
.message-card.active {
border-left: 5px solid #b86cff;
background: rgba(184, 108, 255, 0.08);
}
/* Responsive for messages page */
@media screen and (max-width: 768px) {
.messages-page .chat-container {
padding: 20px 15px 90px 15px;
}
.messages-page h2 {
font-size: 24px;
margin-bottom: 25px;
}
.message-card {
padding: 18px;
margin-bottom: 15px;
border-radius: 15px;
}
}
/* ====================================
FRIENDS PAGE - MODERN & MOBİL UYUMLU
==================================== */
/* FRIENDS PAGE CONTAINER */
.friends-page {
max-width: 800px;
margin: 30px auto 120px auto;
padding: 0 20px;
}
/* BAŞLIK */
.friends-title {
text-align: center;
margin-bottom: 40px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.friends-title h2 {
font-size: 32px;
margin-bottom: 10px;
background: linear-gradient(135deg, #b86cff, #7a3cff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.friends-title p {
opacity: 0.8;
font-size: 16px;
max-width: 500px;
margin: 0 auto;
line-height: 1.6;
}
/* KARTLAR */
.friends-card {
background: rgba(255, 255, 255, 0.06);
border-radius: 20px;
padding: 25px;
margin-bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
}
.friends-card:hover {
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
border-color: rgba(184, 108, 255, 0.2);
}
.friends-card h3 {
margin-bottom: 25px;
font-size: 20px;
color: white;
display: flex;
align-items: center;
gap: 10px;
}
/* ARKADAŞ SATIRI */
.friend-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 20px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
margin-bottom: 15px;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.friend-row:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
border-color: rgba(184, 108, 255, 0.2);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.friend-row.request {
border-left: 4px solid #b86cff;
background: rgba(184, 108, 255, 0.08);
}
/* SOL TARAF */
.friend-left {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
}
.friend-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #b86cff, #7a3cff);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 0 20px rgba(184, 108, 255, 0.4);
flex-shrink: 0;
}
.friend-info {
flex: 1;
}
.friend-info strong {
display: block;
font-size: 17px;
margin-bottom: 5px;
color: white;
font-weight: 600;
}
.friend-info .status {
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
}
.status.online {
color: #4CAF50;
font-weight: 500;
}
.status.online::before {
content: "●";
font-size: 16px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.status.offline {
color: #aaa;
font-weight: 500;
}
/* ARKADAŞ AKSiYONLARI */
.friend-actions {
display: flex;
gap: 12px;
flex-shrink: 0;
}
/* BUTONLAR */
.btn {
padding: 10px 18px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 90px;
}
.btn.accept {
background: linear-gradient(135deg, #4CAF50, #2E7D32);
color: white;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.btn.accept:hover {
background: linear-gradient(135deg, #66BB6A, #388E3C);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}
.btn.reject {
background: rgba(255, 255, 255, 0.12);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn.reject:hover {
background: rgba(255, 255, 255, 0.18);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.btn.chat {
background: linear-gradient(135deg, #b86cff, #7a3cff);
color: white;
box-shadow: 0 4px 15px rgba(184, 108, 255, 0.3);
}
.btn.chat:hover {
background: linear-gradient(135deg, #a55cff, #8b4cff);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(184, 108, 255, 0.4);
}
/* BOŞ DURUM */
.friends-empty {
text-align: center;
padding: 50px 20px;
}
.friends-empty .icon {
font-size: 64px;
margin-bottom: 20px;
opacity: 0.5;
display: inline-block;
background: linear-gradient(135deg, #b86cff, #7a3cff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.friends-empty h4 {
font-size: 22px;
margin-bottom: 12px;
color: white;
}
.friends-empty p {
opacity: 0.7;
max-width: 300px;
margin: 0 auto;
line-height: 1.6;
}
/* ====================================
MOBİL UYUMLULUK - FRIENDS PAGE
(768px ve altı)
==================================== */
@media screen and (max-width: 768px) {
/* CONTAINER */
.friends-page {
margin: 20px auto 110px auto;
padding: 0 15px;
}
/* BAŞLIK */
.friends-title {
padding: 18px;
margin-bottom: 30px;
border-radius: 16px;
}
.friends-title h2 {
font-size: 26px;
}
.friends-title p {
font-size: 14px;
padding: 0 10px;
}
/* KARTLAR */
.friends-card {
padding: 20px;
border-radius: 16px;
margin-bottom: 25px;
}
.friends-card h3 {
font-size: 18px;
margin-bottom: 20px;
}
/* ARKADAŞ SATIRI - MOBİL DÜZEN */
.friend-row {
flex-direction: column;
align-items: stretch;
gap: 15px;
padding: 16px;
margin-bottom: 12px;
}
/* SOL TARAF */
.friend-left {
width: 100%;
gap: 15px;
}
.friend-avatar {
width: 48px;
height: 48px;
font-size: 20px;
}
.friend-info strong {
font-size: 16px;
}
/* AKSiYON BUTONLARI */
.friend-actions {
width: 100%;
justify-content: space-between;
}
.btn {
flex: 1;
text-align: center;
padding: 12px !important;
font-size: 13px;
min-width: auto;
}
.btn.chat {
flex: 2; /* Mesaj butonu daha geniş */
}
/* BOŞ DURUM */
.friends-empty {
padding: 40px 15px;
}
.friends-empty .icon {
font-size: 56px;
}
.friends-empty h4 {
font-size: 20px;
}
}
/* ÇOK KÜÇÜK EKRANLAR (480px ve altı) */
@media screen and (max-width: 480px) {
.friends-page {
margin: 15px auto 100px auto;
padding: 0 12px;
}
.friends-title {
padding: 15px 12px;
}
.friends-title h2 {
font-size: 22px;
}
.friends-title p {
font-size: 13px;
}
.friends-card {
padding: 18px;
border-radius: 14px;
}
.friend-row {
padding: 14px;
}
.friend-left {
gap: 12px;
}
.friend-avatar {
width: 44px;
height: 44px;
font-size: 18px;
}
.friend-info strong {
font-size: 15px;
}
.friend-info .status {
font-size: 12px;
}
.btn {
padding: 10px !important;
font-size: 12px;
}
}
/* YATAY MOD */
@media screen and (max-height: 600px) and (orientation: landscape) {
.friends-page {
margin-bottom: 90px;
}
.friend-row {
padding: 12px 16px;
margin-bottom: 10px;
}
.friend-avatar {
width: 42px;
height: 42px;
font-size: 16px;
}
}
/* ====================================
FRIENDS PAGE HEADER - MOBİL UYUMLU
(768px ve altı - SADECE ELMAS)
==================================== */
@media screen and (max-width: 768px) {
/* HEADER KÜÇÜLT */
.chat-header {
padding: 10px 15px !important;
height: 60px !important;
gap: 8px;
}
.chat-header .logo {
font-size: 20px !important;
white-space: nowrap;
}
.header-right {
gap: 8px !important;
flex-wrap: nowrap;
}
/* MOBİLDE USER-BADGE'İ GİZLE */
.user-badge {
display: none !important;
}
/* MOBİLDE ACTION BUTONLARI GİZLE */
.action-btn {
display: none !important;
}
/* MOBİLDE SADECE ELMAS GÖSTER */
.diamond-count {
display: flex !important;
padding: 8px 12px !important;
font-size: 14px !important;
min-width: auto;
margin-left: auto;
}
/* ELMAS İÇİNDE SADECE EMOJİ VE SAYI */
.diamond-count span:first-child {
display: inline-block !important;
font-size: 16px;
}
.diamond-count span:last-child {
display: inline-block !important;
font-weight: bold;
}
}
/* ÇOK KÜÇÜK EKRANLAR (480px ve altı) */
/* EN KÜÇÜK TELEFONLAR (360px ve altı) */
/* ====================================
MOBİL ÇIKIŞ BUTONU STİLLERİ
==================================== */
/* Mobilde görünecek, PC'de gizlenecek */
/* Sadece mobilde göster */
@media screen and (max-width: 768px) {
.mobile-only {
display: flex !important;
}
.desktop-only {
display: none !important;
}
/* MOBİL ÇIKIŞ BUTONU - HEADER'DA */
.mobile-logout-btn {
display: flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 0, 0, 0.15);
border-radius: 50%;
color: #ff5555;
text-decoration: none;
font-size: 20px;
margin-left: 5px;
border: 1px solid rgba(255, 85, 85, 0.3);
}
.mobile-logout-btn:hover {
background: rgba(255, 0, 0, 0.25);
transform: scale(1.1);
}
/* MOBİL ÇIKIŞ BÖLÜMÜ */
.mobile-logout-section {
width: 100%;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.logout-link-mobile {
text-decoration: none;
display: block;
}
/* PROFİL YÖNETİMİ MOBİL */
.profile-management .card {
margin: 30px 15px !important;
padding: 20px !important;
border-radius: 16px !important;
}
.profile-management button {
padding: 12px !important;
font-size: 14px !important;
}
}
/* ÇOK KÜÇÜK EKRANLAR */
@media screen and (max-width: 480px) {
.mobile-logout-btn {
width: 36px;
height: 36px;
font-size: 18px;
}
.mobile-logout-section button {
font-size: 14px !important;
padding: 14px !important;
}
}
/* TABBAR'A ÇIKIŞ EKLEYELİM (OPSİYONEL) */
/* .tabbar a:nth-child(5) {
color: #ff5555;
} */
.back-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 8px;
}
.page-body {
min-height: 100vh;
overflow-y: auto;
background: linear-gradient(180deg, #0b0214, #120620);
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
background: #2a2a2a;
}
.chat-user-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
}
@media (max-width: 768px) {
body {
overflow-x: hidden;
}
.card {
padding-bottom: 80px; /* alt butonlar nefes alsın */
}
.card-actions {
position: sticky;
bottom: 10px;
}
}
@media (max-width: 380px) {
/* eşleşme kartı komple küçülsün */
.profile-match-box {
padding: 10px !important;
margin: 8px !important;
border-radius: 14px !important;
}
/* avatar küçülsün */
.match-avatar {
width: 48px !important;
height: 48px !important;
font-size: 22px !important;
}
/* bio alanı daralsın */
.match-bio-box {
padding: 8px !important;
font-size: 13px !important;
}
/* UYARI yazısı */
.match-warning {
font-size: 12px !important;
padding: 6px !important;
}
/* BUTONLAR KARE + KÜÇÜK */
.match-actions button {
padding: 10px !important;
font-size: 14px !important;
border-radius: 10px !important;
}
/* Sohbete Başla yazısı taşmasın */
.btn-accept,
.btn-skip {
white-space: nowrap;
}
}
/* Küçük ekranlar – iPhone 7 Plus dahil */
@media (max-height: 750px) {
.profile-match-box {
padding: 14px !important;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.match-profile-header {
gap: 8px;
}
.match-avatar {
width: 48px;
height: 48px;
font-size: 22px;
}
.match-bio-box {
padding: 10px;
font-size: 13px;
}
.match-warning {
font-size: 12px;
padding: 8px;
}
.match-actions {
display: flex;
gap: 10px;
margin-bottom: 80px; /* TABBAR ÇAKIŞMASI FIX */
}
.btn-accept,
.btn-skip {
padding: 12px;
font-size: 14px;
border-radius: 10px;
}
}
@media (max-height: 750px) {
.chat-box {
height: calc(100vh - 110px);
display: flex;
flex-direction: column;
}
.messages {
flex: 1;
overflow-y: auto;
padding-bottom: 120px;
}
.chat-input {
bottom: 45px; /* ⬅️ BURASI: daha aşağı, sırıtmaz */
left: 0;
right: 0;
padding: 10px 12px;
background: #12081f;
z-index: 999;
}
}
/* HEADER yüksekliği varsayımı */
.chat-header {
height: 70px;
}
/* TABBAR yüksekliği varsayımı */
.tabbar {
height: 55px;
}
/* ASIL SCROLL ALAN (MESAJLAR SAYFASI DAHİL) */
.chat-container {
height: calc(100vh - 125px); /* header + tabbar */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 20px;
}
/* =========================
SADECE ANA SAYFA (MOBİL)
========================= */
@media (max-width: 768px) {
body:not(.chat-body) {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* TABBAR SABİT KALSIN */
body:not(.chat-body) .tabbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* TABBAR İÇİN ALT BOŞLUK */
body:not(.chat-body) {
padding-bottom: 70px;
}
}
@media (min-width: 1024px) {
.messages-container::-webkit-scrollbar {
width: 10px;
}
.messages-container::-webkit-scrollbar-track {
background: rgba(255,255,255,0.04);
border-radius: 10px;
}
.messages-container::-webkit-scrollbar-thumb {
background: linear-gradient(
180deg,
#8b5cf6,
#6d28d9
);
border-radius: 10px;
border: 2px solid rgba(0,0,0,0.2);
}
.messages-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
180deg,
#a78bfa,
#7c3aed
);
}
}
/* =========================
PROFİL – MOBİL TAM OTURMA
========================= */
@media (max-height: 750px) {
body.auth-body {
min-height: 100dvh;
display: flex;
justify-content: center;
align-items: flex-start;
overflow-y: auto;
padding: 10px 0;
}
.auth-box.profile-box-large {
width: 100%;
max-width: 420px;
max-height: 100dvh;
overflow-y: auto;
padding-bottom: 90px; /* Kaydet için alan */
}
/* Kaydet butonu hep görünür */
.auth-box.profile-box-large button.btn-primary {
position: sticky;
bottom: 10px;
z-index: 5;
}
.profile-footer {
margin-top: 15px;
padding-bottom: env(safe-area-inset-bottom);
}
}
.shop-section {
max-width: 1100px;
margin: 0 auto 80px;
padding: 20px;
}
.shop-header {
text-align: center;
margin-bottom: 50px;
}
.shop-header h1 {
font-size: 38px;
font-weight: 700;
letter-spacing: 1px;
}
.shop-header p {
opacity: 0.7;
font-size: 16px;
}
.shop-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 28px;
}
.shop-card {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
padding: 35px 20px;
text-align: center;
position: relative;
transition: all 0.35s ease;
}
.shop-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.shop-card.highlight {
border-color: #b86cff;
}
.shop-card.premium {
border-color: gold;
}
.tag {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: #b86cff;
color: white;
font-size: 12px;
padding: 6px 18px;
border-radius: 30px;
letter-spacing: 0.5px;
}
.tag.gold {
background: linear-gradient(135deg, gold, #ff9800);
color: #1a1a1a;
}
.count {
font-size: 46px;
font-weight: 800;
}
/* =========================
SADECE ELMAS SATIN AL BUTONU
========================= */
.diamond-package a.action-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 16px 0;
margin-top: 20px;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.5px;
color: #fff;
text-decoration: none;
border-radius: 18px;
background: linear-gradient(135deg, #b86cff, #7a3cff);
box-shadow:
0 12px 30px rgba(184,108,255,0.55);
overflow: hidden;
transition: all 0.35s ease;
}
/* GLOW */
.diamond-package a.action-btn::before {
content: "";
position: absolute;
inset: -60%;
background: radial-gradient(
circle,
rgba(255,255,255,0.45),
rgba(184,108,255,0.45),
transparent 70%
);
opacity: 0.6;
filter: blur(28px);
animation: glowPulse 3s infinite ease-in-out;
}
/* PARLAK GEÇİŞ */
.diamond-package a.action-btn::after {
content: "";
position: absolute;
top: -120%;
left: -40%;
width: 40%;
height: 300%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transform: rotate(25deg);
transition: all 0.7s ease;
}
.diamond-package a.action-btn:hover {
transform: translateY(-3px) scale(1.04);
box-shadow:
0 20px 50px rgba(184,108,255,0.85);
}
.diamond-package a.action-btn:hover::after {
left: 140%;
}
@keyframes glowPulse {
0% { opacity: 0.35; }
50% { opacity: 0.85; }
100% { opacity: 0.35; }
}
/* =========================
DIAMOND PAGE – TEMİZ
========================= */
.diamond-page {
max-width: 1100px;
margin: auto;
padding: 30px 16px 120px;
}
.diamond-hero {
text-align: center;
margin-bottom: 40px;
}
.diamond-hero h1 {
font-size: 34px;
margin-bottom: 10px;
}
.diamond-hero p {
opacity: 0.8;
}
/* BAKİYE */
.diamond-balance {
background: linear-gradient(135deg, rgba(184,108,255,0.15), rgba(122,60,255,0.15));
border: 1px solid rgba(184,108,255,0.4);
border-radius: 18px;
padding: 24px;
text-align: center;
margin-bottom: 40px;
}
.diamond-balance strong {
display: block;
font-size: 42px;
color: #ffd700;
margin: 10px 0;
}
/* GRID */
.diamond-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 26px;
}
/* CARD */
.diamond-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
padding: 26px 20px;
text-align: center;
position: relative;
transition: all 0.35s ease;
}
.diamond-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}
.diamond-card h3 {
margin: 12px 0;
}
.diamond-card strong {
font-size: 22px;
display: block;
margin: 10px 0 16px;
}
.diamond-icon {
font-size: 30px;
}
/* POPULAR */
.diamond-card.popular {
border-color: #b86cff;
box-shadow: 0 0 30px rgba(184,108,255,0.35);
}
.badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #ffd700, #ffae00);
color: #000;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
}
/* BUY BUTTON */
.buy-btn {
display: inline-block;
width: 100%;
padding: 14px 0;
border-radius: 18px;
font-weight: 800;
color: #fff;
text-decoration: none;
background: linear-gradient(135deg, #b86cff, #7a3cff);
box-shadow: 0 12px 30px rgba(184,108,255,0.6);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.buy-btn::after {
content: "";
position: absolute;
top: -120%;
left: -40%;
width: 40%;
height: 300%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transform: rotate(25deg);
transition: all 0.7s ease;
}
.buy-btn:hover {
transform: scale(1.05);
}
.buy-btn:hover::after {
left: 140%;
}
/* === FRIENDS PAGE SCROLL FIX === */
/* body kilitliyse bile sayfa kayabilsin */
html, body {
height: 100%;
}
/* header + tabbar hariç alan */
.friends-page {
min-height: calc(100vh - 120px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 120px; /* tabbar için */
}
/* mobil için ekstra garanti */
@media (max-width: 768px) {
.friends-page {
overflow-y: auto !important;
}
}
.error-box {
margin-top: 10px;
padding: 10px 12px;
background: rgba(239, 68, 68, 0.15);
border: 1px solid #ef4444;
color: #fecaca;
border-radius: 8px;
font-size: 14px;
}
.auth-body {
background: radial-gradient(circle at top, #3a0f6b, #0b0214);
min-height: 100dvh;
display: block;
padding: 0;
margin: 0;
}
.auth-box {
max-width: 420px;
width: calc(100% - 32px);
margin: auto;
margin-top: 12vh;
margin-bottom: 12vh;
}
.auth-box input {
height: 52px;
font-size: 15px;
border-radius: 14px;
}
.auth-box h2 {
font-size: 22px;
margin-bottom: 6px;
}
.auth-sub {
font-size: 14px;
opacity: 0.8;
margin-bottom: 20px;
}
@media (max-width: 480px) {
.auth-body {
align-items: flex-start;
padding-top: 12vh;
}
}
.error-box {
margin-top: -6px;
margin-bottom: 12px;
font-size: 13px;
}
.auth-body {
min-height: 100vh;
display: flex;
align-items: center; /* dikey ORTA */
justify-content: center; /* yatay ORTA */
padding: 16px;
background: radial-gradient(circle at top, #2a0b45, #0b0214);
}
/* Küçük ekranlar (iPhone 7 Plus ve benzerleri) */
@media (max-height: 740px) {
.auth-body {
align-items: flex-start;
padding-top: 80px;
}
}
@media (max-height: 700px) {
.auth-box {
margin-top: 8vh;
}
}
/* ===== FOOTER FIX ===== */
.site-footer {
margin-top: 60px;
padding: 30px 15px 100px; /* tabbar boşluğu */
background: linear-gradient(
to top,
rgba(0,0,0,0.55),
rgba(0,0,0,0.15),
transparent
);
text-align: center;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
margin-bottom: 14px;
}
.footer-links a {
color: #c084fc; /* MOR – NET OKUNUR */
text-decoration: none;
font-size: 13px;
font-weight: 500;
}
.footer-links a:hover {
text-decoration: underline;
}
.footer-copy {
color: rgba(255,255,255,0.55);
font-size: 12px;
}
/* MOBİL */
@media (max-width: 768px) {
.footer-links {
gap: 10px;
}
}
/* =========================
AUTH (LOGIN/REGISTER/FORGOT) - FINAL OVERRIDE
========================= */
.auth-body {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: radial-gradient(circle at top, #2a0b45, #0b0214);
overflow-y: auto;
}
.auth-box {
max-width: 420px;
width: calc(100% - 32px);
background: rgba(255,255,255,0.06);
padding: 40px;
border-radius: 22px;
backdrop-filter: blur(12px);
box-shadow: 0 0 40px rgba(184,108,255,0.3);
text-align: center;
margin: 0;
}
.auth-box input {
width: 100%;
height: 52px;
font-size: 15px;
border-radius: 14px;
margin-bottom: 15px;
border: none;
background: rgba(0,0,0,0.4);
color: white;
}
.auth-box a.forgot-link {
display: block;
margin: 10px 0 16px;
text-align: center;
font-size: 14px;
color: #ffffff !important;
opacity: 0.85;
text-decoration: none;
}
.auth-box a.forgot-link:hover {
opacity: 1;
text-decoration: underline;
}
/* Küçük ekran */
@media (max-height: 740px) {
.auth-body { align-items: flex-start; padding-top: 70px; }
}
/* ===== Forgot link (premium animasyon) ===== */
.forgot-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin: 12px 0 16px;
font-size: 14px;
font-weight: 600;
letter-spacing: .2px;
color: rgba(255,255,255,.78);
text-decoration: none;
padding: 10px 14px;
border-radius: 12px;
position: relative;
isolation: isolate;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
/* alttan ince çizgi (hover’da uzar) */
.forgot-link::after{
content:"";
position:absolute;
left: 14px;
right: 14px;
bottom: 8px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(184,108,255,.9), transparent);
transform: scaleX(.15);
opacity: .0;
transition: transform .22s ease, opacity .22s ease;
}
/* shine geçişi */
.forgot-link::before{
content:"";
position:absolute;
inset:-2px;
border-radius: 12px;
background: linear-gradient(120deg,
transparent 0%,
rgba(255,255,255,0.22) 35%,
transparent 70%);
transform: translateX(-120%);
opacity: .0;
z-index: -1;
}
.forgot-link:hover{
color: rgba(255,255,255,.95);
background: rgba(184,108,255,0.10);
border-color: rgba(184,108,255,0.28);
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(0,0,0,0.25), 0 0 18px rgba(184,108,255,0.18);
}
.forgot-link:hover::after{
transform: scaleX(1);
opacity: 1;
}
.forgot-link:hover::before{
opacity: 1;
animation: forgotShine .9s ease forwards;
}
.forgot-link:active{
transform: translateY(0px) scale(.98);
}
@keyframes forgotShine{
from { transform: translateX(-120%); }
to { transform: translateX(120%); }
}
/* Mobilde daha kompakt */
@media (max-width: 480px){
.forgot-link{
font-size: 13px;
padding: 9px 12px;
}
}
/* Chat kutusu referans olsun */
#chat.chat-box{
position: relative;
}
/* + butonu artık chat kutusunun içinde sağ altta */
.extend-time-btn{
position: absolute !important;
right: 16px !important;
bottom: 86px !important; /* inputun üstü */
width: 56px;
height: 56px;
border-radius: 50%;
z-index: 20 !important;
}
/* Mesajlar inputa çarpmasın (abartma yok) */
#messages, .messages{
padding-bottom: 110px !important;
}
.add-friend-btn{
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
padding: 8px 12px;
border-radius: 12px;
cursor: pointer;
font-size: 13px;
white-space: nowrap;
}
/* chat_detail sayfasında + butonu sağ altta floating olsun */
.chat-detail .extend-float{
position: fixed !important;
right: 22px !important;
bottom: 120px !important; /* inputun üstünde dursun */
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
font-size: 26px;
font-weight: 800;
z-index: 9999;
background: linear-gradient(135deg, #FFD700, #FFA500);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.35);
}
/* mesajlar altta input + butona çarpmasın */
.chat-detail #messages,
.chat-detail .messages{
padding-bottom: 160px !important;
}
/* arkadaş ekle butonu güzel dursun */
/* =========================
CHAT DETAIL - SCROLL FIX
========================= */
.chat-detail .chat-container{
height: calc(100vh - 70px - 64px); /* header + tabbar */
overflow: hidden;
padding-bottom: 0 !important;
}
.chat-detail .chat-box{
height: 100%;
display: flex;
flex-direction: column;
}
.chat-detail .messages{
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 140px !important; /* input + + buton çakışmasın */
}
.chat-detail .chat-input{
position: sticky;
bottom: 0;
z-index: 60;
}
.chat-detail .extend-time-btn.extend-float{
position: absolute !important;
right: 16px !important;
bottom: 88px !important; /* inputun üstünde */
z-index: 70 !important;
}
/* =========================
CHAT DETAIL SCROLL FIX
========================= */
.chat-detail .chat-container {
height: calc(100vh - 70px - 64px); /* header + tabbar */
padding: 0;
overflow: hidden;
}
/* SADECE MESAJLAR SCROLL OLSUN */
.chat-detail .messages {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 20px;
padding-bottom: 120px; /* input + buton için boşluk */
}
/* INPUT SABİT */
.chat-detail .chat-input {
position: sticky;
bottom: 0;
background: #12081f;
z-index: 50;
}
/* =========================
SAYFA + CHAT SCROLL BİRLİKTE
========================= */
.chat-body {
min-height: 100vh;
overflow-y: auto;
}
/* Chat detail sayfasında mesaj scroll aynen kalsın */
.chat-detail .messages {
overflow-y: auto;
}
.chat-detail .chat-container {
height: auto !important;
}
/* =========================
FRIENDS PAGE PROPER SCROLL
========================= */
.friends-page {
height: calc(100vh - 70px - 64px); /* header + tabbar */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 20px;
}
/* Mobil için ekstra garanti */
@media (max-width: 768px) {
.friends-page {
height: calc(100vh - 60px - 70px);
}
}
.hero-buttons{
display:flex;
gap:15px;
justify-content:center;
align-items:center;
flex-wrap:wrap; /* mobilde alt satıra iner */
}
@media (max-width: 520px){
.hero-buttons a{
width: 100%;
max-width: 340px;
}
.hero-buttons button{
width: 100%;
}
}
.btn-outline{
background: transparent;
border: 1px solid rgba(184,108,255,0.5);
color: #fff;
padding: 12px 18px;
border-radius: 14px;
}
.level-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(184, 108, 255, 0.15);
border: 1px solid rgba(184, 108, 255, 0.35);
color: #fff;
font-weight: 700;
font-size: 14px;
margin-right: 10px;
}
.xp-fill{
height:100%;
width:0%;
background:linear-gradient(90deg,#b86cff,#ff4df0);
}
/* ===== LEVEL CARD (PROFILE) ===== */
.level-card{
margin: 16px 0;
padding: 14px 14px;
border-radius: 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(8px);
}
.level-head{
display:flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.level-title{
font-size: 16px;
font-weight: 700;
}
.level-badge{
margin-top: 4px;
font-size: 13px;
opacity: .9;
}
.level-remaining{
font-size: 12px;
opacity: .9;
text-align:right;
}
.level-progress .xp-bar{
width: 100%;
height: 10px;
background: rgba(255,255,255,0.10);
border-radius: 999px;
overflow: hidden;
}
.level-progress .xp-fill{
height: 100%;
width: 0%;
border-radius: 999px;
background: rgba(184,108,255,0.9);
transition: width .6s ease;
}
.xp-text{
margin-top: 8px;
font-size: 12px;
opacity: .95;
}
.level-stats{
margin-top: 10px;
display:flex;
gap: 10px;
flex-wrap: wrap;
}
.level-stats .stat{
font-size: 12px;
opacity: .9;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
}
.pink-count{
padding: 8px 12px;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
font-weight: 600;
}
.gift-btn{
border:none;
background:#1b0f2b;
color:#fff;
padding:10px 12px;
border-radius:12px;
cursor:pointer;
}
.gift-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}
.gift-box{
width:min(360px, 92vw);
background:#0b0214;
border:1px solid rgba(184,108,255,.25);
border-radius:18px;
padding:16px;
}
.gift-title{font-weight:700; margin-bottom:12px;}
.gift-item{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
padding:12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.04);
color:#fff;
cursor:pointer;
margin-bottom:10px;
}
.gift-close{
width:100%;
padding:12px;
border-radius:14px;
border:none;
background:#b86cff;
color:#fff;
cursor:pointer;
}
.gift-toast{
position:fixed;
bottom:90px;
left:50%;
transform:translateX(-50%);
background:#0b0214;
border:1px solid rgba(184,108,255,.35);
padding:10px 14px;
border-radius:14px;
z-index:10000;
}
.gift-float{
position: fixed;
right: 30px;
bottom: 120px; /* tabbar varsa yukarı al */
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
font-size: 22px;
box-shadow: 0 10px 25px rgba(0,0,0,0.35);
background: #ffcc00;
color: #1b0f2b;
z-index: 9999;
}
.gift-float:active{
transform: scale(0.98);
}
.gift-float[disabled]{
opacity: 0.5;
cursor: not-allowed;
}
/* 🎁 Gift UI */
.gift-btn{
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.08);
color: #fff;
cursor: pointer;
}
.gift-modal{
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.55);
z-index: 9999;
}
.gift-box{
width: min(420px, 92vw);
background: rgba(10,2,20,0.92);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
padding: 16px;
box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.gift-title{
font-weight: 700;
margin-bottom: 12px;
display:flex;
align-items:center;
gap:8px;
}
.gift-item{
width: 100%;
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
margin: 10px 0;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.06);
color: #fff;
cursor: pointer;
}
.gift-item span{ opacity: 0.9; }
.gift-item b{ color: #7fd4ff; }
.gift-close{
width: 100%;
padding: 12px;
margin-top: 10px;
border-radius: 14px;
border: none;
cursor: pointer;
background: rgba(184,108,255,0.9);
color: #fff;
font-weight: 700;
}
.gift-toast{
position: fixed;
right: 18px;
bottom: 90px;
background: rgba(10,2,20,0.9);
border: 1px solid rgba(255,255,255,0.12);
padding: 12px 14px;
border-radius: 14px;
color: #fff;
z-index: 10000;
}
/* MINI LEADERBOARD */
.home-leaderboard{
display: flex;
justify-content: center;
margin: 60px 0 40px;
}
.home-lb-card{
width: 500px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(184,108,255,0.2);
border-radius: 18px;
padding: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.home-lb-title{
font-size: 18px;
font-weight: 800;
margin-bottom: 14px;
}
.home-lb-row{
display: grid;
grid-template-columns: 50px 1fr auto;
gap: 10px;
padding: 10px;
border-radius: 12px;
}
.home-lb-row:hover{
background: rgba(255,255,255,0.05);
}
.home-lb-rank{
font-weight: 800;
}
.home-lb-name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-lb-score{
font-weight: 800;
}
.home-lb-more{
display: block;
margin-top: 12px;
text-align: right;
font-weight: 800;
text-decoration: none;
color: #b86cff;
}
/* MINI LEADERBOARD - HOME */
.home-leaderboard{
width: 100%;
display: flex;
justify-content: center;
padding: 10px 20px 0;
}
.home-lb-card{
width: min(920px, 100%);
border-radius: 22px;
padding: 18px 18px 12px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04);
box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.home-lb-title{
font-size: 18px;
font-weight: 900;
margin-bottom: 12px;
}
.home-lb-row{
display: grid;
grid-template-columns: 70px 1fr 120px;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(0,0,0,0.20);
border: 1px solid rgba(255,255,255,0.06);
margin-bottom: 10px;
}
.home-lb-rank{
font-weight: 900;
opacity: 0.9;
}
.home-lb-name{
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-lb-score{
text-align: right;
font-weight: 900;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid rgba(255,105,180,0.35);
background: rgba(255,105,180,0.10);
}
.home-lb-more{
display: inline-block;
margin-top: 6px;
float: right;
color: #b86cff;
font-weight: 800;
text-decoration: none;
}
.home-lb-more:hover{ opacity: .9; }
@media (max-width:520px){
.home-lb-row{
grid-template-columns: 56px 1fr 96px;
}
}
/* ✅ POPÜLERLİK CHIP (header / profil) */
.pop-chip{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:6px;
padding:4px 10px;
border-radius:999px;
font-size:12px;
background: rgba(255,255,255,0.06);
border:1px solid rgba(184,108,255,0.25);
color:#fff;
white-space:nowrap;
}
/* Profilde daha büyük görünüm istersen */
.profile-pop-box{
margin-top:12px;
padding:12px 14px;
border-radius:14px;
background: rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.10);
}
.pop-badge{
margin-top: 6px;
display: inline-block;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: linear-gradient(135deg,#ff5ac8,#b86cff);
color: #fff;
box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.match-modes {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.mode-btn {
padding: 18px 28px;
border-radius: 18px;
text-decoration: none;
font-weight: 700;
font-size: 16px;
transition: 0.3s;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.text-mode {
background: linear-gradient(135deg,#b86cff,#7a3cff);
color: white;
}
.voice-mode {
background: linear-gradient(135deg,#00c6ff,#0072ff);
color: white;
}
.mode-btn:hover {
transform: translateY(-3px);
opacity: 0.9;
}
.match-modes{
display:flex;
justify-content:center;
gap:18px;
margin-top:26px;
flex-wrap:wrap;
}
.mode-btn{
text-decoration:none;
color:#fff;
font-weight:700;
font-size:16px;
padding:14px 34px;
border-radius:16px;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:190px;
transition:0.25s;
}
.mode-btn.text-mode{
background:linear-gradient(135deg,#8f5cff,#b86cff);
box-shadow:0 10px 30px rgba(143,92,255,0.35);
}
.mode-btn.voice-mode{
background:linear-gradient(135deg,#0ea5ff,#007bff);
box-shadow:0 10px 30px rgba(14,165,255,0.35);
}
.mode-btn:hover{
transform:translateY(-3px);
opacity:0.95;
}
/* =========================
PREMIUM VOICE BUTTONS
========================= */
.voice-actions {
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 14px;
}
.voice-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.2px;
cursor: pointer;
user-select: none;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.voice-btn::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(184,108,255,0.55), rgba(122,60,255,0.25), rgba(255,255,255,0.06));
filter: blur(10px);
opacity: 0;
z-index: -1;
transition: opacity .18s ease;
}
.voice-btn:hover {
transform: translateY(-2px);
border-color: rgba(184,108,255,0.35);
background: rgba(255,255,255,0.08);
box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.voice-btn:hover::before { opacity: 1; }
.voice-btn:active {
transform: translateY(0px) scale(0.98);
}
.voice-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}
.voice-btn .icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: .95;
transform: translateY(-0.5px);
transition: transform .18s ease;
}
.voice-btn:hover .icon {
transform: translateY(-0.5px) scale(1.08);
}
/* Renk varyantları */
.voice-btn.primary {
background: linear-gradient(135deg, rgba(184,108,255,0.85), rgba(122,60,255,0.75));
border-color: rgba(255,255,255,0.18);
}
.voice-btn.primary:hover {
box-shadow: 0 18px 50px rgba(122,60,255,0.35);
}
.voice-btn.danger {
background: rgba(255, 80, 120, 0.12);
border-color: rgba(255, 80, 120, 0.25);
}
.voice-btn.danger:hover {
background: rgba(255, 80, 120, 0.16);
box-shadow: 0 18px 50px rgba(255, 80, 120, 0.18);
}
.voice-btn.ghost {
background: rgba(255,255,255,0.05);
}
/* küçük ekranlarda taşma olmasın */
@media (max-width: 480px) {
.voice-btn {
width: 100%;
justify-content: center;
}
.voice-actions {
padding: 0 12px;
}
}
/* =========================
VOICE PREMIUM BUTTONS
========================= */
.voice-actions {
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
}
.voice-btn {
position: relative;
padding: 12px 22px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.15);
font-weight: 800;
font-size: 14px;
color: #fff;
cursor: pointer;
transition: all .18s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(255,255,255,0.05);
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
/* Hover */
.voice-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 45px rgba(0,0,0,0.45);
}
/* Active */
.voice-btn:active {
transform: scale(0.96);
}
/* PRIMARY - BAĞLAN */
.voice-btn.primary {
background: linear-gradient(135deg,#b86cff,#7a3cff);
border: none;
box-shadow: 0 15px 40px rgba(122,60,255,0.5);
}
.voice-btn.primary:hover {
box-shadow: 0 20px 55px rgba(122,60,255,0.7);
}
/* GHOST - MUTE */
.voice-btn.ghost {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
}
.voice-btn.ghost:hover {
background: rgba(255,255,255,0.12);
}
/* DANGER - LEAVE */
.voice-btn.danger {
background: rgba(255,80,120,0.15);
border: 1px solid rgba(255,80,120,0.3);
}
.voice-btn.danger:hover {
background: rgba(255,80,120,0.22);
box-shadow: 0 20px 50px rgba(255,80,120,0.25);
}
/* Disabled */
.voice-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* =========================================
CHAT DETAIL - PC ONLY (MOBİLE DOKUNMAZ)
- Mesajlar kutu büyütmesin
- Scroll geri gelsin (sadece mesajlarda)
- Tabbar altta kalsın
- Alt butonlar görünsün
========================================= */
@media (min-width: 992px) {
/* Sayfa: scroll body'de değil, içeride yönet */
body.chat-body.chat-detail {
height: 100vh !important;
overflow: hidden !important;
}
/* Header yüksekliği */
body.chat-body.chat-detail .chat-header {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
}
/* Tabbar sabit altta */
body.chat-body.chat-detail .tabbar {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 999 !important;
}
/* Chat container: header ve tabbar arası alan */
body.chat-body.chat-detail .chat-container {
position: relative !important;
height: calc(100vh - 70px) !important; /* tabbar payı */
padding: 16px 16px 120px 16px !important; /* alt buton + tabbar */
overflow: hidden !important;
display: flex !important;
justify-content: center !important;
align-items: stretch !important;
}
/* Chat box: kesin yükseklik, büyüme yok */
body.chat-body.chat-detail .chat-box {
width: 100% !important;
max-width: 980px !important;
height: 100% !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
/* Mesajlar: sadece burası scroll */
body.chat-body.chat-detail #messages,
body.chat-body.chat-detail .messages {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 16px !important;
}
/* Input: alta sabit kalsın */
body.chat-body.chat-detail .chat-input {
flex: 0 0 auto !important;
}
/* Alt butonlar: tabbar üstünde sabit */
body.chat-body.chat-detail .back-buttons {
position: fixed !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 78px !important; /* tabbar üstü */
z-index: 998 !important;
width: 980px !important;
max-width: calc(100% - 32px) !important;
display: flex !important;
gap: 12px !important;
justify-content: center !important;
pointer-events: none !important;
}
body.chat-body.chat-detail .back-buttons a,
body.chat-body.chat-detail .back-buttons button {
pointer-events: auto !important;
}
}
.profile-shop-home {
padding: 20px;
display: flex;
justify-content: center;
}
.profile-shop-card {
width: 100%;
max-width: 900px;
background: linear-gradient(135deg, rgba(255,77,210,0.15), rgba(122,60,255,0.15));
border: 1px solid rgba(255,255,255,0.15);
border-radius: 22px;
padding: 22px 28px;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(12px);
transition: 0.3s ease;
}
.profile-shop-card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.ps-title {
font-size: 20px;
font-weight: 900;
}
.ps-desc {
font-size: 14px;
opacity: 0.8;
margin-top: 6px;
}
.ps-stats {
margin-top: 12px;
display: flex;
gap: 14px;
font-weight: 800;
}
.ps-btn {
padding: 12px 20px;
border-radius: 16px;
background: linear-gradient(135deg,#ff4dd2,#7a3cff);
color: white;
text-decoration: none;
font-weight: 900;
transition: 0.3s ease;
}
.ps-btn:hover {
opacity: 0.9;
transform: scale(1.05);
}
/* ============================= */
/* PROFILE SHOP HOME RESPONSIVE */
/* ============================= */
.profile-shop-home {
padding: 0 16px;
margin: 20px 0;
}
.profile-shop-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, #2b0a3d, #1a0628);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 18px;
}
.ps-left {
flex: 1;
}
.ps-title {
font-weight: 900;
font-size: 16px;
margin-bottom: 4px;
}
.ps-desc {
font-size: 13px;
opacity: .85;
}
.ps-stats {
margin-top: 8px;
font-size: 14px;
display: flex;
gap: 12px;
opacity: .9;
}
.ps-btn {
display: inline-block;
background: linear-gradient(135deg, #b14cff, #7a2cff);
padding: 10px 16px;
border-radius: 14px;
font-weight: 800;
text-decoration: none;
color: white;
white-space: nowrap;
}
/* 📱 MOBİL FIX */
@media (max-width: 600px) {
.profile-shop-card {
flex-direction: column;
align-items: flex-start;
}
.ps-right {
width: 100%;
}
.ps-btn {
width: 100%;
text-align: center;
margin-top: 10px;
}
}
html {
background: #0b0214 !important;
}
body {
background: transparent !important;
}
.report-btn{
width:44px;height:44px;border:none;border-radius:14px;
background:rgba(255,77,77,0.18);
color:#ff6b6b;
cursor:pointer;
font-size:18px;
}
.report-modal{
position:fixed;inset:0;
background:rgba(0,0,0,.72);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}
.report-box{
width:320px;
background:#140824;
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:16px;
}
.report-title{
font-weight:700;
margin-bottom:12px;
}
.report-select{
width:100%;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.12);
background:#0b0214;
color:#fff;
margin-bottom:12px;
}
.report-send{
width:100%;
padding:10px 12px;
border:none;
border-radius:12px;
background:#b86cff;
color:#fff;
cursor:pointer;
}
.report-close{
width:100%;
padding:10px 12px;
border:none;
border-radius:12px;
background:#2a1a3a;
color:#fff;
cursor:pointer;
margin-top:8px;
}
/* ✅ Yatay taşmayı kesin kapat */
html, body {
overflow-x: hidden;
}
/* ✅ Chat üst bar: mobilde taşmasın */
.chat-topbar{
width: 100%;
box-sizing: border-box;
}
/* Sağdaki aksiyonlar: wrap + küçülme */
.chat-top-actions{
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap; /* ✅ taşarsa alt satıra geç */
justify-content: flex-end;
max-width: 52%;
}
/* Butonlar çok büyümesin */
.chat-top-actions .add-friend-btn,
.chat-top-actions .gift-btn,
.chat-top-actions .report-btn{
max-width: 100%;
white-space: nowrap;
}
/* ✅ Mobilde butonları kompakt yap */
@media (max-width: 420px){
.chat-topbar{
padding: 12px !important;
gap: 10px !important;
}
.chat-top-actions{
max-width: 60%;
gap: 8px;
}
/* Arkadaş ekle yazısı uzun -> küçült */
.chat-top-actions .add-friend-btn{
font-size: 12px;
padding: 8px 10px;
border-radius: 10px;
}
/* Gift + Report ikon butonları kare/yuvarlak kompakt */
.chat-top-actions .gift-btn,
.chat-top-actions .report-btn{
width: 38px;
height: 38px;
padding: 0;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
}
/* ✅ Çok küçük ekran (iPhone SE vb.) için ekstra sıkıştır */
@media (max-width: 360px){
.chat-top-actions{
max-width: 65%;
}
.chat-top-actions .add-friend-btn{
font-size: 11px;
padding: 7px 9px;
}
.chat-top-actions .gift-btn,
.chat-top-actions .report-btn{
width: 36px;
height: 36px;
}
}
.chat-user-header{
display:flex;
align-items:center;
gap:12px;
padding:14px;
flex-wrap:nowrap; /* 👈 kırılmayı engeller */
}
.chat-user-details{
flex:1;
min-width:0; /* 👈 isim uzun olsa bile taşmayı kontrol eder */
}
.chat-user-actions{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0; /* 👈 sağ blok küçülmesin */
}
/* ikon butonlarını kare yap */
.gift-btn, .report-btn{
width:42px;
height:42px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
}
/* add friend tek satır kalsın */
.add-friend-btn{
white-space:nowrap;
}
/* çok küçük ekranlarda add-friend biraz küçülsün */
@media (max-width: 420px){
.add-friend-btn{
padding:10px 10px;
font-size:13px;
}
.gift-btn, .report-btn{
width:40px;
height:40px;
}
}
/* --- CHAT HEADER (USER BAR) RESPONSIVE --- */
.chat-user-header{
display:grid;
grid-template-columns: 52px 1fr auto;
grid-template-areas: "avatar details actions";
align-items:center;
gap:12px;
padding:14px;
border-radius:18px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.chat-user-avatar{ grid-area: avatar; }
.chat-user-details{
grid-area: details;
min-width:0;
}
.chat-user-details h3{
margin:0;
line-height:1.1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* gender satırı taşmasın */
#chatUserGender{
font-size:13px;
opacity:0.8;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* sağ aksiyonlar tek sıra */
.chat-user-actions{
grid-area: actions;
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
white-space:nowrap;
}
/* ikon butonları kare */
/* Arkadaş ekle tek satır */
/* Pop badge düzgün dursun */
.pop-badge{
margin-top:6px;
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
font-size:12px;
}
/* --- MOBILE LAYOUT: 2 ROW --- */
@media (max-width: 520px){
.chat-user-header{
grid-template-columns: 52px 1fr;
grid-template-areas:
"avatar details"
"actions actions";
align-items:start;
}
.chat-user-actions{
justify-content:flex-end; /* sağa yasla */
flex-wrap:wrap; /* sığmazsa alt satıra geçsin ama düzenli */
gap:8px;
}
.add-friend-btn{
flex:1 1 auto; /* buton satırı doldursun */
min-width: 170px;
}
/* pop badge mobilde daha küçük */
.pop-badge{
font-size:11px;
padding:5px 9px;
}
}
/* --- VERY SMALL PHONES --- */
@media (max-width: 380px){
.gift-btn, .report-btn{
width:40px;
height:40px;
}
.add-friend-btn{
min-width: 150px;
font-size:13px;
padding:10px 10px;
}
}
/* ================================
CHAT DETAIL TOPBAR (FORCE)
body:
================================ */
/* üst bar kutusu */
.chat-detail .chat-topbar{
padding: 15px !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
display: grid !important;
grid-template-columns: 44px 1fr auto !important;
grid-template-areas: "avatar info actions" !important;
align-items: center !important;
gap: 12px !important;
}
/* avatar */
.chat-detail .chat-top-avatar{
grid-area: avatar !important;
width: 40px !important;
height: 40px !important;
background: linear-gradient(135deg, #b86cff, #7a3cff) !important;
border-radius: 50% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
/* info */
.chat-detail .chat-top-info{ grid-area: info !important; min-width:0 !important; }
.chat-detail .chat-top-name{
margin:0 !important;
line-height:1.1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.chat-detail .chat-top-meta{
margin-top:2px !important;
font-size:14px !important;
opacity:0.75 !important;
display:flex !important;
gap:6px !important;
align-items:center !important;
white-space:nowrap !important;
}
/* actions */
.chat-detail .chat-top-actions{
grid-area: actions !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
flex-shrink:0 !important;
white-space:nowrap !important;
}
/* icon buttons square */
.chat-detail .chat-top-actions .gift-btn,
.chat-detail .chat-top-actions .report-btn{
width:42px !important;
height:42px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:14px !important;
}
/* mobile: 2 rows like chat.html */
@media (max-width: 520px){
.chat-detail .chat-topbar{
grid-template-columns: 44px 1fr !important;
grid-template-areas:
"avatar info"
"actions actions" !important;
align-items: start !important;
}
.chat-detail .chat-top-actions{
margin-top:10px !important;
justify-content:flex-end !important;
flex-wrap:wrap !important;
gap:8px !important;
}
.chat-detail .chat-top-actions .add-friend-btn{
flex:1 1 auto !important;
min-width:170px !important;
white-space:nowrap !important;
}
}
@media (max-width: 380px){
.chat-detail .chat-top-actions .gift-btn,
.chat-detail .chat-top-actions .report-btn{
width:40px !important;
height:40px !important;
}
.chat-detail .chat-top-actions .add-friend-btn{
min-width:150px !important;
font-size:13px !important;
padding:10px 10px !important;
}
}
@media (min-width: 900px){
body.chat-detail .chat-topbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:16px !important;
flex-wrap:nowrap !important;
position:relative !important;
}
body.chat-detail .chat-top-info{
flex:1 1 auto !important;
min-width:0 !important;
}
body.chat-detail .chat-top-name{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
max-width:520px !important;
}
body.chat-detail .chat-top-actions{
display:flex !important;
align-items:center !important;
gap:10px !important;
/* BÜYÜK İHTİMALLE SORUN BURADA: */
position:static !important; /* absolute/fixed varsa öldürür */
top:auto !important;
right:auto !important;
left:auto !important;
bottom:auto !important;
margin-left:auto !important;
white-space:nowrap !important;
}
body.chat-detail .add-friend-btn{
height:40px !important;
padding:0 14px !important;
}
body.chat-detail .gift-btn,
body.chat-detail .report-btn{
width:40px !important;
height:40px !important;
display:grid !important;
place-items:center !important;
}
}
.global-mode{
background: linear-gradient(135deg, rgba(34,197,94,.25), rgba(124,58,237,.25));
border: 1px solid rgba(255,255,255,.14);
}
/* Global Chat buton icon */
.mode-btn{
display:inline-flex;
align-items:center;
gap:10px;
}
.mode-btn .micon{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
}
.mode-btn .global-icon{
width:22px;
height:22px;
color:#c084fc;
filter: drop-shadow(0 0 8px rgba(168,85,247,.4));
}
/* ===== PROFILE FRAME ===== */
.avatar-wrap{
width: 70px;
height: 70px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px; /* çerçeve kalınlığı */
}
.avatar-emoji{
width: 100%;
height: 100%;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(255,255,255,.06);
font-size: 44px;
line-height: 1;
}
/* boşsa çerçeve olmasın */
.frame-{
background: transparent;
box-shadow: none;
padding: 0;
}
/* Neon */
.frame-neon{
background: linear-gradient(135deg, #00f5ff, #b400ff);
box-shadow: 0 0 14px rgba(180,0,255,.55);
}
/* Gold */
.frame-gold{
background: linear-gradient(135deg, #f7d26a, #b8860b);
box-shadow: 0 0 14px rgba(247,210,106,.45);
}
/* Purple */
.frame-purple{
background: linear-gradient(135deg, #a855f7, #22d3ee);
box-shadow: 0 0 14px rgba(168,85,247,.45);
}
/* Genel mobil stabilite */
html, body { width: 100%; overflow-x: hidden; }
/* Checkbox dev gibi görünmesin */
.auth-box input[type="checkbox"]{
width: 18px;
height: 18px;
accent-color: #9b5cff; /* mor temana uygun */
transform: translateY(2px);
}
/* Eğer yine büyük kalırsa (özellikle iOS) bunu da ekle */
.auth-box input[type="checkbox"]{
-webkit-appearance: auto;
appearance: auto;
}
.profile-box-large {
width: 100%;
max-width: 520px; /* PC'de çok büyümesin */
margin: 0 auto;
padding: 18px;
}
/* PC ekranlarda biraz daha sıkı görünüm */
@media (min-width: 1024px) {
.profile-box-large {
max-width: 480px;
padding: 22px;
}
}
@media (max-width: 768px) {
.profile-box-large {
padding: 14px;
}
.form-group {
margin-bottom: 14px;
}
.form-group label {
font-size: 13px;
}
.form-group input,
.form-group select,
.form-textarea {
padding: 10px 12px;
font-size: 14px;
}
.level-card {
padding: 14px;
}
.profile-pop-box {
padding: 12px;
}
.diamond-info {
padding: 10px;
font-size: 14px;
}
}
.avatar-shop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (max-width: 480px) {
.avatar-shop-grid {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.avatar-item {
padding: 8px !important;
}
.avatar-item div:first-child {
font-size: 22px !important;
}
}
.level-card {
padding: 16px;
border-radius: 16px;
}
.level-title {
font-size: 16px;
}
.level-badge {
font-size: 12px;
}
.xp-bar {
height: 8px;
border-radius: 6px;
}
.auth-body {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 30px 12px;
}
@media (hover: none) and (pointer: coarse) {
/* Chat ekranı görünürken (#chat) kesin full height çalışsın */
#chat.chat-box{
height: 100%;
min-height: 0; /* çok kritik */
display: flex;
flex-direction: column;
overflow: hidden; /* sadece messages scroll */
}
/* Üst profil/header alanı sabit, flex küçülmesin */
#chat .chat-user-header,
#chat .chat-time-left{
flex: 0 0 auto;
}
/* Mesajlar alanı ekrana yayılsın ve tek scroll burası olsun */
#chat #messages.messages{
flex: 1 1 auto;
min-height: 0; /* çok kritik */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 12px;
}
/* Input alanı her zaman en altta */
#chat .chat-input{
flex: 0 0 auto;
position: sticky;
bottom: 0;
z-index: 50;
padding-bottom: env(safe-area-inset-bottom);
background: rgba(0,0,0,0.15); /* senin temaya uyumlu */
backdrop-filter: blur(8px);
}
}
/* =========================
WhatsApp-like chat theme
========================= */
/* Chat alanı: düz kutu yerine wallpaper */
#chat.chat-box{
background:
radial-gradient(1200px 600px at 20% 10%, rgba(124,58,237,.18), transparent 55%),
radial-gradient(900px 500px at 80% 30%, rgba(34,211,238,.10), transparent 60%),
linear-gradient(180deg, #07010f, #0b0214);
}
/* Mesajlar: cam kutu yok, sadece akış */
#messages.messages{
padding: 14px 12px 18px 12px;
background: transparent;
}
/* Tek bir mesaj satırı wrapper */
.msg{
display: flex;
margin: 8px 0;
align-items: flex-end;
}
/* Benim mesajım sağda, karşı taraf solda */
.msg.me{ justify-content: flex-end; }
.msg.other{ justify-content: flex-start; }
/* Baloncuk */
.bubble{
max-width: min(78%, 520px);
padding: 10px 12px;
border-radius: 16px;
line-height: 1.25;
font-size: 15px;
word-break: break-word;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(8px);
}
/* Benim balon */
.msg.me .bubble{
background: rgba(124,58,237,.22);
border-color: rgba(124,58,237,.28);
border-bottom-right-radius: 6px; /* whatsapp hissi */
}
/* Karşı taraf balon */
.msg.other .bubble{
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.10);
border-bottom-left-radius: 6px;
}
/* Saat / küçük meta */
.meta{
font-size: 11px;
opacity: .65;
margin-top: 6px;
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* Sistem mesajı / ortalı bilgi */
.sys{
display: flex;
justify-content: center;
margin: 14px 0;
}
.sys .bubble{
max-width: 90%;
text-align: center;
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.08);
border-radius: 999px;
padding: 8px 12px;
font-size: 13px;
}
/* Input’u da WhatsApp gibi yapalım */
#chat .chat-input{
background: rgba(10,2,20,.82);
border-top: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(10px);
}
#chat .chat-input input{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: 999px;
padding: 12px 14px;
color: rgba(255,255,255,.92);
outline: none;
}
#chat .chat-input button{
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(124,58,237,.24);
}
/* =========================
WhatsApp-like chat (DETAIL)
HTML: text
========================= */
body.chat-detail .chat-box{
background:
radial-gradient(1200px 600px at 20% 10%, rgba(124,58,237,.18), transparent 55%),
radial-gradient(900px 500px at 80% 30%, rgba(34,211,238,.10), transparent 60%),
linear-gradient(180deg, #07010f, #0b0214);
}
/* Mesaj alanı */
body.chat-detail #messages.messages{
padding: 14px 12px 18px 12px;
background: transparent;
}
/* Her mesaj zaten .msg => baloncuk gibi davran */
body.chat-detail .msg{
display: inline-block; /* baloncuk */
max-width: min(78%, 520px);
padding: 10px 12px;
margin: 8px 0;
border-radius: 16px;
line-height: 1.25;
font-size: 15px;
word-break: break-word;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(8px);
}
/* sağ-sol hizalama için satır mantığı */
body.chat-detail .msg.me{
margin-left: auto; /* sağa it */
background: rgba(124,58,237,.22);
border-color: rgba(124,58,237,.28);
border-bottom-right-radius: 6px;
}
body.chat-detail .msg.other{
margin-right: auto; /* sola it */
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.10);
border-bottom-left-radius: 6px;
}
/* Ortalı sistem mesajı görünümü (istersen kullanırsın) */
body.chat-detail .msg.sys{
display: block;
margin: 14px auto;
text-align: center;
border-radius: 999px;
max-width: 90%;
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.08);
font-size: 13px;
padding: 8px 12px;
}
/* Input WhatsApp hissi */
body.chat-detail .chat-input{
background: rgba(10,2,20,.82);
border-top: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(10px);
}
body.chat-detail .chat-input input{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: 999px;
padding: 12px 14px;
color: rgba(255,255,255,.92);
outline: none;
font-size: 16px; /* iOS zoom engel */
}
body.chat-detail .chat-input button{
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(124,58,237,.24);
}
/* =========================
Messages list (Modern)
========================= */
body.chat-body{
background:
radial-gradient(1200px 600px at 20% 10%, rgba(124,58,237,.14), transparent 55%),
radial-gradient(900px 500px at 80% 30%, rgba(34,211,238,.08), transparent 60%),
linear-gradient(180deg, #07010f, #0b0214);
}
/* Sayfa genişliği */
.chat-container{
max-width: 780px;
margin: 0 auto;
padding: 16px 14px 96px; /* tabbar payı */
}
/* Başlık */
.chat-container > h2{
margin: 14px 0 18px !important;
font-size: 20px;
letter-spacing: .2px;
color: rgba(255,255,255,.92);
text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* Chat list kartları (sen inline style ile div basmışsın) */
.chat-container > div[style*="background: rgba(255,255,255,0.06)"]{
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 18px !important;
box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
backdrop-filter: blur(10px);
transition: transform .12s ease, border-color .12s ease, background .12s ease;
overflow: hidden;
}
/* Hover (PC) */
@media (hover:hover){
.chat-container > div[style*="background: rgba(255,255,255,0.06)"]:hover{
transform: translateY(-2px);
border-color: rgba(124,58,237,.35) !important;
background: rgba(255,255,255,.075) !important;
}
}
/* Kart iç düzen: üstteki flex satır biraz ferah */
.chat-container > div[style*="background: rgba(255,255,255,0.06)"] > div[style*="display: flex"]{
padding-bottom: 10px;
}
/* Avatar glow daha yumuşak */
.chat-container div[style*="width: 50px; height: 50px"]{
box-shadow: 0 0 22px rgba(184,108,255,.35) !important;
border: 1px solid rgba(255,255,255,.10);
}
/* Son mesaj kutusu daha clean */
.chat-container div[style*="border-left: 3px solid rgba(184,108,255,0.5)"]{
background: rgba(0,0,0,.18) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-left: 3px solid rgba(124,58,237,.55) !important;
}
/* "Henüz mesaj yok" kutusu */
.chat-container div[style*="Henüz mesaj yok"]{
opacity: .9;
}
/* Butonlar */
.chat-container .btn-primary,
.chat-container .btn-secondary{
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 14px 35px rgba(0,0,0,.28);
transition: transform .12s ease, filter .12s ease;
}
.chat-container .btn-primary{
background: rgba(124,58,237,.28);
}
.chat-container .btn-secondary{
background: rgba(255,255,255,.08);
}
@media (hover:hover){
.chat-container .btn-primary:hover,
.chat-container .btn-secondary:hover{
transform: translateY(-1px);
filter: brightness(1.08);
}
}
/* Saat yazısı biraz daha okunur */
.chat-container div[style*="font-size: 12px"]{
color: rgba(255,255,255,.70);
}
/* Tabbar üstüne gölge çizgi */
.tabbar{
border-top: 1px solid rgba(255,255,255,.08);
background: rgba(10,2,20,.75);
backdrop-filter: blur(12px);
}
/* =========================
Friends page (premium)
========================= */
.friends-page{
max-width: 780px;
margin: 0 auto;
padding: 16px 14px 96px; /* tabbar payı */
}
/* Başlık alanı */
.friends-title{
text-align: center;
margin: 10px 0 18px;
padding: 18px 14px;
border-radius: 18px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 18px 55px rgba(0,0,0,.35);
backdrop-filter: blur(10px);
}
.friends-title h2{
margin: 0 0 6px;
font-size: 22px;
color: rgba(255,255,255,.92);
}
.friends-title p{
margin: 0;
opacity: .75;
}
/* Kartlar */
.friends-card{
margin: 14px 0;
padding: 14px;
border-radius: 18px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 55px rgba(0,0,0,.35);
backdrop-filter: blur(10px);
}
.friends-card h3{
margin: 0 0 12px;
font-size: 16px;
letter-spacing: .2px;
color: rgba(255,255,255,.90);
display: flex;
align-items: center;
gap: 8px;
}
/* Satır */
.friend-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 10px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.18);
margin: 10px 0;
box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
/* İstek satırı (hafif vurgu) */
.friend-row.request{
border-color: rgba(124,58,237,.22);
background: rgba(124,58,237,.10);
}
/* Sol alan */
.friend-left{
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
/* Avatar */
.friend-avatar{
width: 46px;
height: 46px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 18px;
background: linear-gradient(135deg, rgba(184,108,255,.95), rgba(122,60,255,.95));
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 0 22px rgba(184,108,255,.30);
}
/* İsim + durum */
.friend-info{
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.friend-info strong{
display: block;
font-size: 16px;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Online/offline chip */
.status{
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
width: fit-content;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
opacity: .9;
}
.status.online{
border-color: rgba(76,175,80,.35);
background: rgba(76,175,80,.12);
}
.status.offline{
border-color: rgba(255,107,107,.28);
background: rgba(255,107,107,.10);
}
/* Butonlar */
.friend-actions{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Hem hem