@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap');

:root{
  --bg-void:#141416; --bg:#1e1e24; --card:#282830; --card-2:#32323d;
  --accent:#9040ff; --accent-dim:#9040ff26; --accent-strong:#a866ff; --accent-glow:#9040ff44;
  --text:#e0e0e0; --text-muted:#9a9a9a; --text-faint:#6c6c6c; --input:#17171c; --border:#363640;
  --danger:#ff5c72; --success:#4ade80; --warning:#fbbf24; --info:#38bdf8;
  --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace; --font-heading:'Outfit',sans-serif;
  --nav-height:60px; --sidebar-w:68px; --header-h:56px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body{ height:100%; height:100dvh; margin:0; padding:0; background:var(--bg-void); color:var(--text); font-family:var(--font-body); overflow:hidden; -webkit-font-smoothing:antialiased; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, textarea{ font-family:inherit; }
::selection{ background:var(--accent-dim); }
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-thumb{ background:var(--card-2); border-radius:4px; }
::-webkit-scrollbar-track{ background:transparent; }
.hidden{ display:none !important; }

.brand{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; }
.brand .dot{ color:var(--accent); }

@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes fadeIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInScale{ from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes slideDown{ from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:translateY(0)} }
@keyframes slideRightIn{ from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} }
@keyframes onlinePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0.5)} 50%{box-shadow:0 0 0 5px transparent} }
@keyframes offlineDim{ 0%,100%{opacity:1} 50%{opacity:.65} }
@keyframes ringPulse{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.9);opacity:0} }
@keyframes waveAnim{ 0%,100%{transform:scaleY(0.35)} 50%{transform:scaleY(1)} }
@keyframes toastIn{ from{opacity:0;transform:translateY(-12px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes modalIn{ from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }

/* AUTH */
#auth-screen{ height:100%; height:100dvh; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:32px; gap:26px; background:var(--bg-void); background-image:radial-gradient(ellipse at 50% 0%, #9040ff14 0%, transparent 70%); }
.auth-hero{ text-align:center; animation:fadeIn .4s ease; }
.auth-hero .brand{ font-size:36px; }
.auth-hero p{ color:var(--text-muted); margin:8px 0 0; font-size:14px; }
.auth-card{ width:100%; max-width:360px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:14px; animation:fadeInScale .4s ease; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.auth-tabs{ display:flex; background:var(--input); border-radius:var(--radius-sm); padding:3px; }
.auth-tabs button{ flex:1; padding:10px; border-radius:6px; color:var(--text-muted); font-weight:600; font-size:13px; transition:all .2s; }
.auth-tabs button.active{ background:var(--card-2); color:var(--text); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:11.5px; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.field input{ background:var(--input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; color:var(--text); font-size:14px; outline:none; transition:border-color .2s; }
.field input:focus{ border-color:var(--accent); }
.btn-primary{ background:var(--accent); color:#fff; font-weight:700; font-size:14px; padding:13px; border-radius:var(--radius-sm); margin-top:4px; transition:transform .1s, opacity .15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary:active{ transform:scale(.98); }
.btn-primary:disabled{ opacity:.5; pointer-events:none; }
.btn-ghost{ background:var(--card-2); color:var(--text); font-weight:600; font-size:13px; padding:9px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); }
.btn-ghost:hover{ background:var(--border); }
.auth-error{ font-size:12px; color:var(--danger); min-height:15px; }

/* APP SHELL */
#app-shell{ width:100vw; width:100dvw; height:100vh; height:100dvh; display:flex; flex-direction:column; background:var(--bg-void); }
.app-body{ flex:1; display:flex; min-height:0; position:relative; }

/* WEB NAV (DESKTOP) */
.web-nav{ width:var(--sidebar-w); display:none; flex-direction:column; background:var(--bg); border-right:1px solid var(--border); flex-shrink:0; z-index:10; }
.web-nav-profile{ height:var(--header-h); min-height:var(--header-h); max-height:var(--header-h); padding:0 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; box-sizing:border-box; }
.web-nav-profile:hover{ background:var(--card); }
.web-nav-profile .nav-avatar{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--accent-strong); background:var(--accent-dim); position:relative; border:2px solid transparent; transition:all .3s ease; background-size:cover; background-position:center; flex-shrink:0; }
.web-nav-profile .nav-avatar.online{ border:2px solid var(--success); animation:onlinePulse 2s ease infinite; }
.web-nav-profile .nav-avatar.offline{ border:2px solid rgba(255,92,114,0.45); opacity:.55; }
.web-nav-name{ font-size:8.5px; color:var(--text-muted); text-align:center; max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1; }
.web-nav-menu{ flex:1; display:flex; flex-direction:column; padding:8px 0; gap:3px; }
.web-nav-item{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px; cursor:pointer; color:var(--text-muted); transition:all .2s ease; position:relative; border-left:3px solid transparent; }
.web-nav-item:hover{ color:var(--text); background:var(--card); }
.web-nav-item.active{ color:var(--accent-strong); border-left-color:var(--accent); background:var(--accent-dim); }
.web-nav-item .nav-icon{ font-size:18px; line-height:1; }
.web-nav-item .nav-label{ font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
.web-nav-bottom{ border-top:1px solid var(--border); padding:8px 0; display:flex; flex-direction:column; gap:2px; }
.web-nav-bottom .web-nav-item{ border-left:none; }
.web-nav-bottom .web-nav-item.logout-btn:hover{ color:var(--danger); }

/* CONTENT AREA & SIDEBAR */
.content-area{ flex:1; display:flex; min-height:0; min-width:0; }
.sidebar-panel{ width:100%; display:flex; flex-direction:column; background:var(--bg); min-height:0; border-right:1px solid var(--border); }
.sp-header{ height:var(--header-h); min-height:var(--header-h); max-height:var(--header-h); padding:0 14px; display:flex; align-items:center; justify-content:space-between; position:relative; border-bottom:1px solid var(--border); background:var(--bg); box-sizing:border-box; flex-shrink:0; }
.sp-header-left{ display:flex; align-items:center; gap:8px; z-index:2; }
.sp-header-center{ position:absolute; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; z-index:1; }
.sp-header-center h2{ font-family:var(--font-heading); font-size:17.5px; font-weight:700; margin:0; letter-spacing:-0.01em; color:var(--text); }
.sp-header-right{ display:flex; align-items:center; gap:8px; z-index:2; }
.sp-my-avatar{ width:34px; height:34px; border-radius:50%; background:var(--card-2); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--accent-strong); cursor:pointer; position:relative; border:2px solid transparent; transition:transform .15s; background-size:cover; background-position:center; }
.sp-my-avatar.online{ border:2px solid var(--success); animation:onlinePulse 2s ease infinite; }
.sp-my-avatar.offline{ border:2px solid rgba(255,92,114,0.45); opacity:.55; }
.conn-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-faint); flex-shrink:0; transition:background .2s; }
.conn-dot.on{ background:var(--success); box-shadow:0 0 0 3px #4ade8022; }
.sp-search{ padding:8px 12px; flex-shrink:0; position:relative; }
.sp-search i.fa-search{ position:absolute; left:24px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:13px; }
.sp-search input{ width:100%; background:var(--input); border:1px solid var(--border); border-radius:20px; padding:8px 14px 8px 34px; color:var(--text); font-size:13px; outline:none; transition:border-color .2s; }
.sp-search input:focus{ border-color:var(--accent); }
.sp-body{ flex:1; overflow-y:auto; padding:4px 8px; min-height:0; }
.sb-section-label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding:12px 8px 6px; font-weight:700; }
.list-row{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--radius-md); transition:all .15s ease; cursor:pointer; position:relative; }
.list-row:hover{ background:var(--card); }
.list-row.active-row{ background:var(--accent-dim); }
.avatar{ width:42px; height:42px; border-radius:50%; background:var(--card-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--accent-strong); position:relative; border:2px solid transparent; transition:all .3s ease; background-size:cover; background-position:center; }
.avatar.online{ border:2px solid var(--success); box-shadow:0 0 0 0 rgba(74,222,128,0.4); animation:onlinePulse 2s ease infinite; }
.avatar.offline{ border:2px solid rgba(255,92,114,0.45); opacity:.55; }
.avatar.group{ background:var(--accent-dim); border:none; }
.row-main{ flex:1; min-width:0; }
.row-title{ font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-sub{ font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; display:flex; align-items:center; gap:4px; }
.row-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.row-time{ font-size:10.5px; color:var(--text-faint); font-family:var(--font-mono); }
.unread-badge{ background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:10px; min-width:18px; text-align:center; box-shadow:0 2px 6px var(--accent-glow); animation:fadeInScale .2s ease; }
.icon-btn{ width:34px; height:34px; border-radius:8px; background:var(--card); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; transition:all .15s ease; border:1px solid transparent; }
.icon-btn:hover{ background:var(--card-2); color:var(--text); border-color:var(--border); }
.icon-btn.danger:hover{ color:var(--danger); }
.empty-list-hint{ text-align:center; color:var(--text-faint); font-size:13px; padding:32px 16px; line-height:1.5; }
.add-conn-form{ display:flex; gap:6px; padding:4px 4px 12px; }
.add-conn-form input{ flex:1; background:var(--input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; color:var(--text); font-size:13px; outline:none; transition:border-color .2s; }
.add-conn-form button{ background:var(--accent); color:#fff; font-weight:700; font-size:12.5px; padding:0 14px; border-radius:var(--radius-sm); }
.pill-btn{ font-size:11px; font-weight:700; padding:5px 10px; border-radius:16px; flex-shrink:0; }
.pill-accept{ background:var(--success); color:#0a2e18; }
.pill-reject{ background:var(--danger); color:#2e0a10; }
.pill-pending{ background:var(--card-2); color:var(--text-faint); }
.new-group-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--card); border:1px dashed var(--border); color:var(--text-muted); padding:10px; border-radius:var(--radius-md); font-size:12.5px; font-weight:600; margin:4px 0 10px; transition:all .15s; }
#group-form{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; margin-bottom:12px; display:flex; flex-direction:column; gap:10px; }
#group-form input[type=text]{ background:var(--input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; color:var(--text); font-size:13px; outline:none; }
.group-member-check{ display:flex; align-items:center; gap:8px; padding:6px 2px; font-size:13px; }
.group-member-check input{ accent-color:var(--accent); width:16px; height:16px; }
.call-log-row .row-title{ display:flex; align-items:center; gap:6px; }
.call-result{ font-size:10px; padding:2px 7px; border-radius:8px; font-weight:600; flex-shrink:0; }
.cr-answered, .cr-completed{ background:#4ade8022; color:var(--success); }
.cr-rejected, .cr-busy{ background:#ff5c7222; color:var(--danger); }
.cr-missed, .cr-no_answer{ background:#ffffff14; color:var(--text-muted); }

/* CHAT MAIN & COMPOSER */
.chat-main{ flex:1; display:flex; flex-direction:column; min-height:0; background:var(--bg-void); position:relative; width:100%; }
.chat-main.drag-over::after{ content:'Resmi buraya bırakın 📷'; position:absolute; inset:12px; border:2px dashed var(--accent); border-radius:var(--radius-md); background:rgba(144,64,255,0.2); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:18px; font-weight:700; color:#fff; z-index:30; pointer-events:none; }
.chat-empty-state{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-faint); gap:12px; padding:20px; text-align:center; }
.chat-empty-state .brand{ font-size:28px; opacity:.4; }
.chat-header{ padding:8px 10px; border-bottom:1px solid var(--border); background:var(--bg); box-sizing:border-box; flex-shrink:0; display:flex; align-items:center; gap:10px; overflow:visible; }
.back-btn{ display:none; flex-shrink:0; }
.chat-header .avatar{ cursor:pointer; }
.chat-header .row-main{ flex:1; min-width:0; overflow:hidden; }
.chat-header .row-title{ font-size:14.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-header .row-sub{ font-size:11.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-header .spacer{ flex-shrink:0; }
.chat-header .icon-btn{ width:32px; height:32px; font-size:13px; flex-shrink:0; }
.chat-header .icon-btn + .icon-btn{ margin-left:-4px; }

.chat-dropdown-wrap{ position:relative; }
.chat-dropdown-menu{ position:absolute; right:0; top:calc(100% + 8px); background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 10px 30px rgba(0,0,0,.5); min-width:170px; z-index:100; display:flex; flex-direction:column; overflow:hidden; animation:fadeInScale .15s ease; }
.chat-dropdown-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:13px; color:var(--text); transition:background .12s; cursor:pointer; text-align:left; width:100%; }
.chat-dropdown-item:hover{ background:var(--card-2); }
.chat-dropdown-item.danger{ color:var(--danger); }
.chat-dropdown-item i{ width:16px; text-align:center; font-size:13px; }

#custom-context-menu{ position:fixed; z-index:110; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 12px 35px rgba(0,0,0,.6); min-width:180px; display:none; flex-direction:column; overflow:hidden; animation:fadeInScale .12s ease; }
#custom-context-menu button{ display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:13px; color:var(--text); transition:background .12s; cursor:pointer; text-align:left; width:100%; }
#custom-context-menu button:hover{ background:var(--card-2); }
#custom-context-menu button.danger{ color:var(--danger); }

#messages{ flex:1; overflow-y:auto; padding:16px 14px 6px; display:flex; flex-direction:column; }
.msg-row{ display:flex; margin-bottom:6px; animation:fadeIn .18s ease; gap:8px; align-items:flex-end; position:relative; }
.msg-row.mine{ justify-content:flex-end; }
.msg-avatar{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; margin-bottom:2px; background-size:cover; background-position:center; }
.bubble-wrap{ display:flex; align-items:center; gap:6px; max-width:82%; position:relative; transition:transform .18s cubic-bezier(.2,0,0,1); }
.msg-row.mine .bubble-wrap{ flex-direction:row; }
.msg-row:not(.mine) .bubble-wrap{ flex-direction:row; }
.bubble{ padding:7px 11px; border-radius:14px; font-size:13.5px; line-height:1.45; word-break:break-word; position:relative; user-select:text; }
.msg-row.mine .bubble{ background:var(--accent-dim); border:1px solid #9040ff44; border-bottom-right-radius:3px; }
.msg-row:not(.mine) .bubble{ background:var(--card); border:1px solid var(--border); border-bottom-left-radius:3px; }
.bubble .sender{ font-size:11.5px; font-weight:700; color:var(--accent-strong); margin-bottom:3px; display:block; }
.quote-box{ background:rgba(0,0,0,0.28); border-left:3px solid var(--accent); border-radius:4px; padding:4px 8px; margin-bottom:5px; font-size:11.5px; color:var(--text-muted); cursor:pointer; }
.quote-box .qb-author{ font-weight:700; color:var(--accent-strong); font-size:10.5px; }
.quote-box .qb-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.msg-content-flex{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.msg-text-part{ flex:1; min-width:0; }
.msg-meta-inline{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--text-faint); flex-shrink:0; line-height:1; user-select:none; }
.msg-meta-inline .ticks{ display:inline-flex; align-items:center; font-size:10.5px; }
.msg-image-wrap{ position:relative; display:inline-block; border-radius:10px; overflow:hidden; margin:4px 0; cursor:pointer; max-width:260px; min-width:120px; min-height:80px; }
.msg-image{ width:100%; max-height:220px; border-radius:10px; display:block; object-fit:cover; }
.msg-image-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; border-radius:10px; }
.msg-image-wrap:hover .msg-image-overlay{ opacity:1; }
.msg-image-overlay i{ color:#fff; font-size:20px; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.msg-actions{ display:inline-flex; align-items:center; gap:4px; opacity:0; transition:opacity .15s ease; flex-shrink:0; }
.msg-row:hover .msg-actions, .msg-row.show-actions .msg-actions{ opacity:1; }
@media (hover:none) and (pointer:coarse){
  .msg-actions{ opacity:0.85; }
}
.msg-reply-btn, .msg-action-btn{ width:26px; height:26px; border-radius:50%; background:var(--card-2); border:1px solid var(--border); color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; flex-shrink:0; transition:all .15s; }
.msg-reply-btn:hover, .msg-action-btn:hover{ color:var(--text); background:var(--accent); border-color:var(--accent); }
.swipe-reply-cue{ position:absolute; top:50%; transform:translateY(-50%) scale(0.6); width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:2; }
.swipe-reply-cue.active{ opacity:1; transform:translateY(-50%) scale(1); }
.msg-row.mine .swipe-reply-cue{ right:-36px; }
.msg-row:not(.mine) .swipe-reply-cue{ left:-36px; }
.msg-reply-btn:hover{ color:var(--text); background:var(--accent); border-color:var(--accent); }
.msg-row:hover .msg-reply-btn{ display:flex; }
@media (hover:none) and (pointer:coarse){ .msg-reply-btn{ display:flex; } }
.tick-sent{ color:var(--text-faint); }
.tick-delivered{ color:var(--text-muted); }
.tick-read{ color:var(--info); }
.bubble.decrypt-fail{ color:var(--danger); font-style:italic; }
.empty-hint{ margin:auto; text-align:center; color:var(--text-faint); font-size:13px; padding:40px 20px; }

#reply-preview-bar{ display:none; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px; background:var(--card); border-top:1px solid var(--border); font-size:12.5px; animation:fadeIn .15s ease; }
#reply-preview-bar.active{ display:flex; }
.rpb-left{ border-left:3px solid var(--accent); padding-left:8px; flex:1; min-width:0; }
.rpb-title{ font-weight:700; color:var(--accent-strong); font-size:11.5px; }
.rpb-body{ color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; margin-top:1px; }
.rpb-close{ color:var(--text-faint); font-size:13px; padding:4px 6px; }

.composer{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--border); background:var(--bg); flex-shrink:0; width:100%; box-sizing:border-box; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
.composer input{ flex:1; min-width:0; background:var(--input); border:1px solid var(--border); border-radius:24px; padding:11px 16px; color:var(--text); font-size:14px; outline:none; transition:border-color .2s; }
.composer input:focus{ border-color:var(--accent); }
.send-btn{ width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; transition:transform .1s; }
.send-btn:active{ transform:scale(.92); }

/* MOBILE NAV & IN-APP BANNER */
.mobile-nav{ display:none; height:var(--nav-height); background:var(--bg); border-top:1px solid var(--border); flex-shrink:0; padding:0 16px; padding-bottom:max(4px, env(safe-area-inset-bottom)); align-items:center; justify-content:space-around; z-index:10; }
.mob-nav-item{ display:flex; align-items:center; justify-content:center; height:40px; padding:0 14px; border-radius:20px; color:var(--text-muted); transition:all .3s cubic-bezier(.4,0,.2,1); overflow:hidden; cursor:pointer; white-space:nowrap; }
.mob-nav-item .mob-icon{ font-size:17px; flex-shrink:0; line-height:1; width:20px; text-align:center; }
.mob-nav-item .mob-label{ font-size:12px; font-weight:700; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, margin .3s ease; margin-left:0; }
.mob-nav-item.active{ background:var(--accent-dim); color:var(--accent-strong); padding:0 16px; }
.mob-nav-item.active .mob-label{ max-width:85px; opacity:1; margin-left:8px; }

/* IN-APP NOTIFICATION STACK (Çoklu Bildirim Stackleme) */
.in-app-notif-stack{ position:fixed; top:12px; left:14px; right:14px; z-index:125; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:440px; margin:0 auto; }
@media (min-width:900px){
  .in-app-notif-stack{ top:18px; right:20px; left:auto; margin:0; width:360px; max-width:360px; }
}
.in-app-notif-card{ background:rgba(22,20,30,0.96); backdrop-filter:blur(16px); border:1px solid var(--accent); border-radius:var(--radius-md); padding:10px 12px; display:flex; align-items:center; gap:10px; box-shadow:0 12px 36px rgba(0,0,0,0.65); animation:slideDown .24s cubic-bezier(.2,0,0,1); cursor:pointer; pointer-events:auto; transition:transform .2s ease, opacity .2s ease; position:relative; overflow:hidden; }
.in-app-notif-card:active{ transform:scale(0.98); }
.in-app-notif-card.dismissing{ transform:translateX(100%); opacity:0; }
.in-app-avatar{ width:38px; height:38px; border-radius:50%; background:var(--accent-dim); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; background-size:cover; background-position:center; }
.in-app-content{ flex:1; min-width:0; }
.in-app-title{ font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; justify-content:space-between; }
.in-app-time{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint); font-weight:normal; }
.in-app-body{ font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.in-app-close{ color:var(--text-faint); font-size:13px; padding:4px 6px; cursor:pointer; border-radius:50%; transition:background .15s; }
.in-app-close:hover{ color:var(--text); background:rgba(255,255,255,0.08); }

/* CALL OVERLAYS & PIP CONTROLS */
#incoming-modal{ position:fixed; inset:0; z-index:999; background:rgba(8,8,12,.96); backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:center; flex-direction:column; padding:36px 24px; animation:fadeIn .25s ease; }
.ring-avatar{ width:124px; height:124px; border-radius:50%; background:var(--card-2); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:44px; font-weight:700; color:var(--accent-strong); position:relative; margin:28px 0 24px; background-size:cover; background-position:center; box-shadow:0 10px 30px rgba(0,0,0,0.5); }
.ring-avatar::before, .ring-avatar::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:2.5px solid var(--accent); animation:ringPulse 1.8s ease-out infinite; }
.ring-avatar::after{ animation-delay:.6s; }
#incoming-label{ font-size:13px; color:var(--text-muted); letter-spacing:.12em; text-transform:uppercase; font-weight:600; text-align:center; }
#incoming-name{ font-family:var(--font-heading); font-size:24px; font-weight:700; margin:0 0 36px; text-align:center; word-break:break-all; padding:0 12px; }
.call-actions-wrap{ display:flex; gap:42px; align-items:center; justify-content:center; margin-top:10px; }
.call-actions-col{ display:flex; flex-direction:column; align-items:center; }
.call-action-btn{ width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; transition:transform .15s, box-shadow .2s; cursor:pointer; }
.call-action-btn:hover{ transform:scale(1.06); }
.call-action-btn.accept{ background:var(--success); color:#0a2e18; box-shadow:0 4px 20px rgba(74,222,128,0.4); }
.call-action-btn.reject{ background:var(--danger); color:#fff; box-shadow:0 4px 20px rgba(255,92,114,0.4); }
.call-action-label{ font-size:12px; color:var(--text-muted); margin-top:10px; font-weight:600; }

#call-overlay{ position:fixed; inset:0; z-index:90; background:#08080c; display:flex; flex-direction:column; touch-action:none; overflow:hidden; }
#remote-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain !important; background:#000; z-index:1; }
#call-overlay.voice-mode #remote-video{ position:absolute; width:1px; height:1px; opacity:0.01; pointer-events:none; }
#call-overlay.voice-mode:not(.has-local-cam) #local-video{ display:none !important; }
#local-video{ position:fixed; width:120px; height:160px; border-radius:14px; object-fit:cover !important; border:2.5px solid var(--accent); background:#000; z-index:96; cursor:grab; box-shadow:0 10px 30px rgba(0,0,0,.85); user-select:none; -webkit-user-drag:none; bottom:110px; right:16px; transition:transform .15s ease, box-shadow .15s ease; }
#local-video.dragging{ cursor:grabbing; box-shadow:0 16px 36px rgba(144,64,255,0.45); border-color:var(--accent-strong); }
#voice-call-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:20px; z-index:2; pointer-events:none; }
.voice-call-avatar{ width:120px; height:120px; border-radius:50%; background:var(--accent-dim); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:42px; border:3px solid var(--accent); position:relative; background-size:cover; background-position:center; }
.voice-call-avatar::before{ content:''; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--accent-glow); animation:ringPulse 2s ease-out infinite; }
#call-status-bar{ position:absolute; top:0; left:0; right:0; padding:18px; padding-top:max(18px, env(safe-area-inset-top)); display:flex; flex-direction:column; align-items:center; z-index:98; background:linear-gradient(to bottom, rgba(0,0,0,.85), transparent); pointer-events:none; }
#call-status-name{ font-family:var(--font-heading); font-weight:700; font-size:19px; }
#call-status-sub{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.call-timer{ font-family:var(--font-mono); font-size:13.5px; color:var(--accent-strong); margin-top:3px; }
.wave-bars{ display:flex; gap:3.5px; align-items:center; height:18px; margin-top:6px; }
.wave-bars span{ width:3.5px; background:var(--accent-strong); border-radius:2px; animation:waveAnim .8s ease infinite; }
.wave-bars span:nth-child(2){ animation-delay:.1s; }
.wave-bars span:nth-child(3){ animation-delay:.2s; }
.wave-bars span:nth-child(4){ animation-delay:.4s; }
.wave-bars span:nth-child(5){ animation-delay:.5s; }
#call-controls{ position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:16px; padding:20px; padding-bottom:max(24px, env(safe-area-inset-bottom)); background:linear-gradient(to top, rgba(0,0,0,.88), transparent); z-index:98; }
.ctrl-btn{ width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); color:var(--text); font-size:18px; display:flex; align-items:center; justify-content:center; transition:transform .1s, background .15s; backdrop-filter:blur(8px); }
.ctrl-btn:active{ transform:scale(.92); }
.ctrl-btn.active-off{ background:var(--danger); color:#fff; }
.ctrl-btn.end{ background:var(--danger); color:#fff; width:64px; border-radius:26px; }

#toast-wrap{ position:fixed; top:12px; left:0; right:0; z-index:115; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast{ background:var(--card-2); border:1px solid var(--border); color:var(--text); font-size:13px; padding:9px 16px; border-radius:20px; box-shadow:0 8px 30px rgba(0,0,0,.4); animation:toastIn .2s ease; pointer-events:auto; }

/* RESPONSIVE */
@media (min-width:900px){
  body{ display:flex; align-items:stretch; justify-content:center; }
  #app-shell{ width:100%; height:100dvh; }
  .web-nav{ display:flex; }
  .sidebar-panel{ width:340px; flex-shrink:0; }
  .chat-main, .sidebar-panel{ display:flex !important; }
  .mobile-nav{ display:none !important; }
  .sp-header-left, .sp-header-right{ display:none !important; }
  .sp-header-center{ position:static; transform:none; width:100%; text-align:left; }
  .sp-header-center h2{ font-size:19px; }
  .in-app-notif-stack{ top:20px; right:20px; left:auto; margin:0; width:340px; }
}
@media (max-width:899px){
  .mobile-nav{ display:flex; }
  .web-nav{ display:none !important; }
  .content-area.show-chat .sidebar-panel{ display:none; }
  .content-area:not(.show-chat) .chat-main{ display:none; }
  .content-area.show-chat .back-btn{ display:flex !important; }
  .content-area.show-chat .chat-header .icon-btn{ width:30px; height:30px; font-size:12px; }
  .content-area.show-chat .chat-header .avatar{ width:36px; height:36px; font-size:14px; }
  #app-shell.show-chat .mobile-nav, .content-area.show-chat ~ .mobile-nav{ display:none !important; }
}

/* MODALS & PROFILE/SETTINGS/CROP */
.modal-overlay{ position:fixed; inset:0; z-index:100; background:rgba(10,9,13,.88); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:16px; animation:fadeIn .15s ease; }
.modal-box{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); width:100%; max-width:440px; max-height:90vh; overflow-y:auto; box-shadow:0 25px 70px rgba(0,0,0,.6); animation:modalIn .2s ease; }
.modal-header{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:2; }
.modal-header h3{ font-family:var(--font-heading); font-size:17px; font-weight:700; margin:0; flex:1; }
.modal-body{ padding:18px; display:flex; flex-direction:column; gap:14px; }
.profile-avatar-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.profile-avatar-large{ width:90px; height:90px; border-radius:50%; background:var(--accent-dim); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:32px; color:var(--accent-strong); border:3px solid transparent; transition:all .3s ease; position:relative; background-size:cover; background-position:center; cursor:pointer; }
.profile-avatar-large.online{ border-color:var(--success); animation:onlinePulse 2s ease infinite; }
.profile-avatar-large.offline{ border:3px solid var(--danger); }
.profile-avatar-edit{ position:absolute; bottom:0; right:0; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; border:2px solid var(--bg); }
.profile-field{ display:flex; flex-direction:column; gap:5px; }
.profile-field label{ font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.profile-field input, .profile-field textarea{ background:var(--input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; color:var(--text); font-size:13.5px; outline:none; transition:border-color .2s; resize:none; }
.profile-field input:focus, .profile-field textarea:focus{ border-color:var(--accent); }
.settings-section{ border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.settings-section-title{ padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); background:var(--card); border-bottom:1px solid var(--border); }
.settings-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); transition:background .1s; cursor:pointer; }
.settings-row:last-child{ border-bottom:none; }
.settings-row:hover{ background:var(--card); }
.settings-row .sr-icon{ font-size:15px; flex-shrink:0; width:22px; text-align:center; color:var(--accent-strong); }
.settings-row .sr-main{ flex:1; min-width:0; }
.settings-row .sr-title{ font-size:13.5px; font-weight:600; }
.settings-row .sr-sub{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.toggle-switch{ width:38px; height:20px; border-radius:10px; background:var(--card-2); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; border:1px solid var(--border); }
.toggle-switch.on{ background:var(--accent); border-color:var(--accent); }
.toggle-switch::after{ content:''; position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s ease; }
.toggle-switch.on::after{ transform:translateX(18px); }
.theme-list{ display:flex; gap:8px; flex-wrap:wrap; padding:4px 0; }
.theme-swatch{ width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.theme-swatch.active{ border-color:#fff; box-shadow:0 0 0 3px var(--accent-glow); }
.theme-swatch .ts-inner{ width:26px; height:26px; border-radius:50%; }
.device-test-wrap{ display:flex; gap:8px; }
.device-test-btn{ flex:1; padding:12px; border-radius:var(--radius-sm); background:var(--card); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:6px; transition:all .15s; cursor:pointer; }
.device-test-btn:hover{ border-color:var(--accent); background:var(--accent-dim); }
.device-test-btn.dt-ok{ border-color:var(--success); }
.device-test-btn.dt-fail{ border-color:var(--danger); }
.profile-card-content{ display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:4px; }
.profile-card-content .pc-name{ font-family:var(--font-heading); font-size:20px; font-weight:700; margin-top:8px; }
.profile-card-content .pc-email{ font-size:12px; color:var(--text-muted); }
.profile-card-content .pc-bio{ font-size:13px; color:var(--text-muted); text-align:center; padding:8px 12px; line-height:1.4; }
.profile-card-content .pc-status{ font-size:11.5px; padding:4px 12px; border-radius:12px; font-weight:600; margin-top:6px; }
.profile-card-content .pc-status.pc-online{ background:#4ade8022; color:var(--success); }
.profile-card-content .pc-status.pc-offline{ background:#ff5c7222; color:var(--danger); }
.profile-card-actions{ display:flex; gap:10px; padding:14px 0 2px; }
.profile-card-actions button{ flex:1; padding:10px; border-radius:var(--radius-sm); font-weight:600; font-size:12.5px; display:flex; align-items:center; justify-content:center; gap:6px; }
.img-preview-box{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.img-preview-box img{ max-width:100%; max-height:55vh; border-radius:var(--radius-md); object-fit:contain; background:#0a0a0e; }
.img-preview-caption{ width:100%; display:flex; gap:8px; }
.crop-canvas-wrap{ width:280px; height:280px; margin:0 auto; position:relative; overflow:hidden; border-radius:50%; border:3px solid var(--accent); background:#050508; cursor:grab; display:flex; align-items:center; justify-content:center; }
.crop-canvas-wrap:active{ cursor:grabbing; }
.crop-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }

/* DOWNLOAD APP POPUP */
.dl-popup-overlay{ position:fixed; inset:0; z-index:200; background:rgba(10,9,13,.92); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .2s ease; }
.dl-popup-box{ background:var(--bg); border:1px solid var(--border); border-radius:18px; width:100%; max-width:380px; overflow:hidden; box-shadow:0 25px 80px rgba(144,64,255,.25), 0 0 0 1px rgba(144,64,255,.08); animation:modalIn .25s ease; position:relative; }
.dl-popup-hero{ background:linear-gradient(135deg, #9040ff 0%, #a866ff 50%, #7c3aed 100%); padding:32px 24px 24px; text-align:center; position:relative; overflow:hidden; }
.dl-popup-hero::before{ content:''; position:absolute; top:-30%; right:-20%; width:200px; height:200px; background:rgba(255,255,255,.08); border-radius:50%; }
.dl-popup-hero::after{ content:''; position:absolute; bottom:-20%; left:-15%; width:150px; height:150px; background:rgba(255,255,255,.06); border-radius:50%; }
.dl-popup-icon{ width:72px; height:72px; border-radius:18px; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; border:2px solid rgba(255,255,255,.2); }
.dl-popup-icon i{ font-size:30px; color:#fff; }
.dl-popup-hero h2{ font-family:var(--font-heading); font-size:22px; font-weight:700; color:#fff; margin:0; position:relative; z-index:1; }
.dl-popup-hero p{ font-size:13px; color:rgba(255,255,255,.75); margin:6px 0 0; position:relative; z-index:1; }
.dl-popup-body{ padding:20px 24px 24px; display:flex; flex-direction:column; gap:14px; }
.dl-popup-features{ display:flex; flex-direction:column; gap:10px; }
.dl-feature-row{ display:flex; align-items:center; gap:10px; }
.dl-feature-row i{ color:var(--accent-strong); font-size:14px; width:18px; text-align:center; }
.dl-feature-row span{ font-size:13px; color:var(--text-muted); }
.dl-popup-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px; border-radius:var(--radius-sm); background:var(--accent); color:#fff; font-weight:700; font-size:15px; transition:transform .1s, box-shadow .2s; border:none; cursor:pointer; text-decoration:none; }
.dl-popup-btn:active{ transform:scale(.97); }
.dl-popup-btn:hover{ box-shadow:0 6px 24px var(--accent-glow); }
.dl-popup-btn i{ font-size:16px; }
.dl-popup-skip{ text-align:center; font-size:12.5px; color:var(--text-faint); cursor:pointer; padding:4px; transition:color .15s; }
.dl-popup-skip:hover{ color:var(--text-muted); }
.dl-popup-close{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.3); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:13px; cursor:pointer; transition:all .15s; z-index:2; border:none; }
.dl-popup-close:hover{ background:rgba(0,0,0,.5); color:#fff; }
.web-nav-item.dl-btn{ color:var(--accent-strong); }
.web-nav-item.dl-btn:hover{ color:var(--accent); background:var(--accent-dim); }

/* GELİŞMİŞ YAZIŞMA MENÜSÜ, TARİH AYIRICI, EMOJİ & SESLİ MESAJ EKLENTİLERİ */
.chat-in-search{ display:flex; align-items:center; gap:8px; padding:7px 12px; background:var(--card); border-bottom:1px solid var(--border); animation:fadeIn .15s ease; }
.chat-in-search input{ flex:1; background:var(--input); border:1px solid var(--border); border-radius:16px; padding:6px 12px; color:var(--text); font-size:12.5px; outline:none; }
.chat-in-search input:focus{ border-color:var(--accent); }
.chat-search-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); min-width:34px; text-align:center; }
.date-divider{ display:flex; align-items:center; justify-content:center; margin:10px 0; user-select:none; }
.date-divider span{ background:var(--card); border:1px solid var(--border); color:var(--text-muted); font-size:11px; font-weight:600; padding:3px 12px; border-radius:14px; letter-spacing:.02em; }
.msg-action-btn{ width:26px; height:26px; border-radius:50%; background:var(--card-2); border:1px solid var(--border); color:var(--text-muted); display:none; align-items:center; justify-content:center; font-size:11px; cursor:pointer; flex-shrink:0; transition:all .15s; }
.msg-action-btn:hover{ color:var(--text); background:var(--accent); border-color:var(--accent); }
.msg-row:hover .msg-action-btn{ display:flex; }
@media (hover:none) and (pointer:coarse){ .msg-action-btn{ display:flex; } }
.msg-action-menu{ position:fixed; z-index:115; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 12px 35px rgba(0,0,0,.65); min-width:175px; display:flex; flex-direction:column; overflow:hidden; animation:fadeInScale .12s ease; }
.msg-action-menu button{ display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:12.5px; color:var(--text); transition:background .12s; cursor:pointer; text-align:left; width:100%; }
.msg-action-menu button:hover{ background:var(--card-2); }
.msg-action-menu button.danger{ color:var(--danger); }
.emoji-picker-panel{ position:absolute; bottom:66px; left:14px; z-index:40; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 14px 40px rgba(0,0,0,.6); width:300px; max-width:calc(100vw - 28px); padding:10px; display:flex; flex-direction:column; gap:8px; animation:fadeInScale .15s ease; }
.emoji-grid{ display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; max-height:180px; overflow-y:auto; }
.emoji-btn{ font-size:19px; padding:5px; border-radius:6px; text-align:center; cursor:pointer; transition:background .1s, transform .1s; }
.emoji-btn:hover{ background:var(--card-2); transform:scale(1.15); }
.voice-rec-active{ background:var(--danger) !important; color:#fff !important; animation:pulse 1s ease infinite; }
.audio-msg-player{ height:34px; max-width:220px; border-radius:18px; outline:none; margin:3px 0; }
.settings-tabs{ display:flex; gap:4px; background:var(--input); padding:4px; border-radius:var(--radius-sm); margin-bottom:4px; overflow-x:auto; }
.settings-tab-btn{ flex:1; padding:8px 10px; border-radius:6px; font-size:12px; font-weight:600; color:var(--text-muted); white-space:nowrap; transition:all .15s; }
.settings-tab-btn.active{ background:var(--card-2); color:var(--accent-strong); }
.media-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; max-height:55vh; overflow-y:auto; }
.media-grid-item{ aspect-ratio:1; border-radius:8px; overflow:hidden; border:1px solid var(--border); cursor:pointer; background:#0a0a0e; }
.media-grid-item img{ width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.media-grid-item:hover img{ transform:scale(1.06); }
#messages.bg-amoled{ background:#060608; }
#messages.bg-dots{ background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size:18px 18px; }
#messages.bg-gradient{ background:radial-gradient(ellipse at top right, var(--accent-dim), var(--bg-void) 70%); }
.tick-pending{ color:var(--warning); font-size:10px; }
.offline-db-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:12px; font-size:10.5px; font-weight:700; background:rgba(245,158,11,0.16); color:var(--warning); border:1px solid rgba(245,158,11,0.35); cursor:pointer; white-space:nowrap; }
.offline-db-pill.synced{ background:rgba(74,222,128,0.12); color:var(--success); border-color:rgba(74,222,128,0.3); }

/* SES KAYIT BARI (Canlı Dalga, Zamanlayıcı, İptal & Gönder) */
.composer-voice-bar{ display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--card-2); border:1px solid var(--accent); border-radius:24px; padding:6px 14px; animation:fadeIn .2s ease; }
.voice-bar-left{ display:flex; align-items:center; gap:10px; }
.voice-rec-dot{ width:10px; height:10px; border-radius:50%; background:var(--danger); animation:pulse 1s ease infinite; flex-shrink:0; }
.voice-rec-timer{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--text); letter-spacing:.05em; }
.voice-rec-wave{ display:flex; align-items:center; gap:3px; height:18px; }
.voice-rec-wave span{ width:3px; background:var(--accent); border-radius:2px; animation:waveBounce 0.8s ease-in-out infinite alternate; }
.voice-rec-wave span:nth-child(1){ height:6px; animation-delay:0s; }
.voice-rec-wave span:nth-child(2){ height:14px; animation-delay:0.15s; }
.voice-rec-wave span:nth-child(3){ height:18px; animation-delay:0.3s; }
.voice-rec-wave span:nth-child(4){ height:11px; animation-delay:0.45s; }
.voice-rec-wave span:nth-child(5){ height:7px; animation-delay:0.6s; }
@keyframes waveBounce { 0%{ height:4px; opacity:.4; } 100%{ height:18px; opacity:1; } }
.voice-bar-actions{ display:flex; align-items:center; gap:8px; }
.voice-cancel-btn{ width:34px; height:34px; border-radius:50%; background:rgba(255,92,114,0.16); border:1px solid rgba(255,92,114,0.3); color:var(--danger); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; transition:all .15s; }
.voice-cancel-btn:hover{ background:var(--danger); color:#fff; }
.voice-send-btn{ width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; transition:transform .12s; }
.voice-send-btn:active{ transform:scale(0.92); }

/* CANLI KAMERA MODALI */
.camera-modal{ position:fixed; inset:0; z-index:1000; background:#000; display:flex; flex-direction:column; justify-content:space-between; animation:fadeIn .2s ease; }
.camera-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; z-index:10; background:linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); }
.cam-top-title{ font-family:var(--font-heading); font-size:16px; font-weight:700; color:#fff; letter-spacing:.02em; }
.cam-top-btn{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.12); backdrop-filter:blur(10px); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; border:none; transition:background .15s; }
.cam-top-btn:hover{ background:rgba(255,255,255,0.25); }
.camera-viewfinder{ flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#000; }
#camera-video{ width:100%; height:100%; object-fit:cover; }
.camera-footer{ display:flex; align-items:center; justify-content:space-around; padding:24px 20px 32px; background:linear-gradient(to top, rgba(0,0,0,0.85), transparent); z-index:10; }
.cam-ctrl-btn{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.12); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; cursor:pointer; border:none; transition:all .15s; }
.cam-ctrl-btn:hover{ background:rgba(255,255,255,0.25); transform:scale(1.06); }
.cam-shutter-btn{ width:72px; height:72px; border-radius:50%; border:4px solid #fff; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s; }
.cam-shutter-btn:active{ transform:scale(0.92); }
.shutter-inner{ width:58px; height:58px; border-radius:50%; background:#fff; transition:transform .12s, background .15s; }
.cam-shutter-btn:hover .shutter-inner{ background:var(--accent); }

/* RESİM EDİTÖRÜ MODALI */
.photo-editor-modal{ position:fixed; inset:0; z-index:1005; background:#0a0a0f; display:flex; flex-direction:column; animation:fadeIn .2s ease; }
.editor-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(18,17,24,0.95); border-bottom:1px solid var(--border); z-index:10; }
.editor-header-tools{ display:flex; align-items:center; gap:8px; }
.editor-btn{ padding:7px 12px; border-radius:8px; background:var(--card-2); border:1px solid var(--border); color:var(--text); font-size:12.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s; }
.editor-btn:hover{ background:var(--accent-dim); border-color:var(--accent); color:var(--accent-strong); }
.editor-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.editor-btn.done{ background:var(--accent); border-color:var(--accent); color:#fff; }
.editor-canvas-wrap{ flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:12px; }
#photo-editor-canvas{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; box-shadow:0 12px 40px rgba(0,0,0,0.7); cursor:crosshair; }
.editor-toolbar-row{ display:flex; align-items:center; gap:8px; padding:10px 16px; background:rgba(18,17,24,0.95); border-top:1px solid var(--border); overflow-x:auto; }
.editor-tb-label{ font-size:11.5px; color:var(--text-muted); font-weight:700; text-transform:uppercase; margin-right:4px; }
.editor-chip{ padding:6px 12px; border-radius:16px; background:var(--card-2); border:1px solid var(--border); color:var(--text-muted); font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .15s; }
.editor-chip:hover{ color:var(--text); border-color:var(--accent); }
.editor-chip.active{ background:var(--accent-dim); border-color:var(--accent); color:var(--accent-strong); }
.editor-color-palette{ display:flex; align-items:center; gap:6px; }
.editor-color-dot{ width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .12s; flex-shrink:0; }
.editor-color-dot.active{ border-color:#fff; transform:scale(1.2); }
.editor-slider{ -webkit-appearance:none; height:4px; border-radius:2px; background:var(--border); outline:none; }
.editor-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer; }
.editor-footer{ display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--bg); border-top:1px solid var(--border); }
.editor-footer input{ flex:1; background:var(--input); border:1px solid var(--border); border-radius:20px; padding:9px 14px; color:var(--text); font-size:13.5px; outline:none; }
.editor-footer input:focus{ border-color:var(--accent); }
.editor-send-btn{ padding:9px 18px; border-radius:20px; background:var(--accent); color:#fff; font-size:13px; font-weight:700; cursor:pointer; border:none; display:flex; align-items:center; gap:6px; transition:transform .12s; }
.editor-send-btn:active{ transform:scale(0.94); }

/* PROFİL FOTOĞRAFI DAİRESEL KIRPICI */
.avatar-crop-box{ max-width:360px; }
.circle-cropper-stage{ width:260px; height:260px; position:relative; border-radius:50%; overflow:hidden; margin:0 auto; cursor:grab; box-shadow:0 0 0 9999px rgba(0,0,0,0.65), 0 0 0 2px var(--accent); }
.circle-cropper-stage:active{ cursor:grabbing; }
#avatar-crop-canvas{ width:260px; height:260px; display:block; }
.circle-cropper-overlay{ position:absolute; inset:0; border-radius:50%; border:2px dashed rgba(255,255,255,0.7); pointer-events:none; }
.cropper-controls{ display:flex; align-items:center; gap:10px; width:100%; justify-content:center; }
#avatar-zoom-slider{ flex:1; max-width:180px; -webkit-appearance:none; height:4px; border-radius:2px; background:var(--border); }
#avatar-zoom-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; }

/* MODERN AYARLAR MENÜSÜ & PANEL SİSTEMİ (Tek Sefer Yükleme / Sıfır Titreme) */
.modern-settings-wrap{ display:flex; flex-direction:column; gap:14px; }
.settings-nav-pills{ display:flex; gap:6px; background:var(--input); padding:4px; border-radius:12px; overflow-x:auto; scrollbar-width:none; }
.settings-nav-pills::-webkit-scrollbar{ display:none; }
.settings-nav-pill{ flex:1; padding:8px 10px; border-radius:8px; font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; border:none; background:transparent; transition:all .18s ease; }
.settings-nav-pill:hover{ color:var(--text); }
.settings-nav-pill.active{ background:var(--card-2); color:var(--accent-strong); box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.settings-tab-pane{ display:none; animation:fadeIn .18s ease; }
.settings-tab-pane.active{ display:flex; flex-direction:column; gap:12px; }

.modern-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.modern-card-header{ display:flex; align-items:center; justify-content:space-between; }
.modern-card-title{ font-size:13px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.modern-card-badge{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }

.settings-item-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04); cursor:pointer; }
.settings-item-row:last-child{ border-bottom:none; padding-bottom:0; }
.settings-item-info{ flex:1; min-width:0; }
.settings-item-title{ font-size:13px; font-weight:600; color:var(--text); }
.settings-item-sub{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }

/* Modern Duvar Kağıdı Seçici */
.chat-bg-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.chat-bg-card{ padding:10px 12px; border-radius:10px; background:var(--card-2); border:1.5px solid var(--border); cursor:pointer; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text); transition:all .15s; }
.chat-bg-card:hover{ border-color:var(--accent); }
.chat-bg-card.active{ border-color:var(--accent); background:var(--accent-dim); color:var(--accent-strong); }
.chat-bg-card i{ font-size:14px; }

/* Segmented Control */
.segmented-control{ display:flex; gap:3px; background:var(--input); padding:3px; border-radius:8px; width:100%; }
.seg-btn{ flex:1; padding:6px 10px; border-radius:6px; font-size:12px; font-weight:600; color:var(--text-muted); text-align:center; cursor:pointer; border:none; background:transparent; transition:all .15s; }
.seg-btn.active{ background:var(--card-2); color:var(--accent-strong); box-shadow:0 1px 4px rgba(0,0,0,0.25); }

/* Modern Switch */
.modern-switch{ width:38px; height:22px; border-radius:11px; background:var(--border); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.modern-switch::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.modern-switch.on{ background:var(--accent); }
.modern-switch.on::after{ transform:translateX(16px); }