/* ==========================================================
   PlakaYorum - Ana Stil Dosyası
   ========================================================== */

:root {
  --bg-color: #f0f4ff;
  --bg-gradient: radial-gradient(ellipse at 10% 20%, #dbeafe 0%, #fff 80%);
  --text-color: #1e293b;
  --card-bg: rgba(255, 255, 255, 0.92);
  --border-color: #e2e8f0;
  --text-muted: #64748b;
  --header-bg: rgba(255, 255, 255, 0.85);
  --dropdown-bg: #fff;
  --dropdown-hover: #f1f5f9;
  --input-bg: #fff;
}

[data-theme="dark"] {
  --bg-color: #0f172a;
  --bg-gradient: radial-gradient(ellipse at 10% 20%, #1e293b 0%, #0f172a 80%);
  --text-color: #f1f5f9;
  --card-bg: rgba(30, 41, 59, 0.92);
  --border-color: #334155;
  --text-muted: #94a3b8;
  --header-bg: rgba(30, 41, 59, 0.85);
  --dropdown-bg: #1e293b;
  --dropdown-hover: #334155;
  --input-bg: #1e293b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg-color); background-image: var(--bg-gradient); color: var(--text-color); min-height: 100vh; display: flex; flex-direction: column; transition: background 0.3s, color 0.3s; overflow-wrap: break-word; }

/* TOAST */
.toast { position:fixed;top:1.5rem;right:1.5rem;z-index:9999;padding:1rem 1.5rem;border-radius:12px;color:#fff;font-weight:500;font-size:.875rem;box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateX(120%);transition:transform .4s cubic-bezier(.16,1,.3,1);max-width:380px }
.toast.show { transform:translateX(0) }
.toast-success { background:#10b981 }
.toast-error { background:#ef4444 }
.toast-info { background:#3b82f6 }

/* PAGE SECTIONS */
.page-section { display:none;animation:fadeIn .35s ease-out }
.page-section.active { display:block }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* HEADER */
.header { padding:1rem 1.5rem; background:var(--header-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-color); position:sticky;top:0;z-index:100; transition: background 0.3s; }
.header-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between }
.logo { display:flex; align-items:center; gap:.5rem; cursor:pointer }
.logo-plate { display:inline-flex; align-items:center; gap:.25rem; background:var(--input-bg); border:2px solid var(--text-color); border-radius:6px; padding:2px 10px; font-weight:700; font-size:.85rem; position:relative; transition: background 0.3s, border-color 0.3s; }
.plate-blue { width:3px; height:18px; background:#2563eb; border-radius:2px }
.logo-text { font-size:1.15rem; font-weight:800; color:var(--text-color); transition: color 0.3s; }
.logo-text span { color:#2563eb }
.header-right { display:flex; align-items:center; gap:.75rem }
.user-info { display:flex; align-items:center; gap:.75rem }
.user-email { font-size:.8rem; color:#475569; display:none }
@media(min-width:640px){ .user-email{display:inline} }

/* DROPDOWN */
.dropdown { position:relative }
.dropdown-toggle { font-size:1rem; padding:.4rem .6rem }
.dropdown-menu { position:absolute; right:0; top:calc(100% + 6px); background:var(--dropdown-bg); border:1px solid var(--border-color); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.1); min-width:200px; overflow:hidden; z-index:200; transition: background 0.3s; }
.dropdown-menu a { display:block; padding:.6rem 1rem; font-size:.85rem; color:var(--text-color); text-decoration:none; transition:background .15s, color 0.3s }
.dropdown-menu a:hover { background:var(--dropdown-hover) }
.dropdown-menu hr { border:none; border-top:1px solid #e2e8f0; margin:0 }
.text-red { color:#ef4444!important }

/* MAIN */
.main-content { flex:1; max-width:1100px; width:100%; margin:0 auto; padding:1.5rem 1rem 2rem }

/* CARDS */
.card { background:var(--card-bg); backdrop-filter:blur(12px); border:1px solid var(--border-color); border-radius:20px; padding:1.5rem; box-shadow:0 8px 30px rgba(0,0,0,.04); transition: background 0.3s, border-color 0.3s; }
.card-main { padding:2rem }
.card-auth { max-width:460px; margin:0 auto; padding:2rem }
@media(min-width:768px){ .card-main{padding:2.5rem} }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; font-weight:600; border:none; border-radius:10px; cursor:pointer; transition:all .2s; font-size:.875rem; font-family:inherit; min-height: 44px; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background:#2563eb; color:#fff; padding:.65rem 1.5rem }
.btn-primary:hover { background:#1d4ed8 }
.btn-outline-sm { background:var(--input-bg); border:1px solid var(--border-color); color:var(--text-color); padding:.4rem .85rem; font-size:.8rem; border-radius:8px; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.btn-outline-sm:hover { background:var(--dropdown-hover); border-color:var(--text-muted) }
.btn-sm { padding:.5rem 1rem; font-size:.8rem }
.btn-full { width:100%; padding:.75rem; font-size:.95rem }
.btn-link { background:none; border:none; color:#2563eb; font-weight:600; font-size:.85rem; cursor:pointer; padding:0 }
.btn-link:hover { text-decoration:underline }
.btn-green { background:#10b981; color:#fff; padding:.35rem .75rem; font-size:.75rem; border-radius:6px }
.btn-green:hover { background:#059669 }
.btn-red-outline { background:transparent; border:1px solid #fca5a5; color:#ef4444; padding:.35rem .75rem; font-size:.75rem; border-radius:6px }
.btn-red-outline:hover { background:#fef2f2 }
.btn-blue-outline { background:transparent; border:1px solid #93c5fd; color:#2563eb; padding:.35rem .75rem; font-size:.75rem; border-radius:6px }
.btn-blue-outline:hover { background:#eff6ff }

/* SEARCH BAR */
.search-bar { display:flex; flex-direction:column; border:2px solid #2563eb; border-radius:16px; overflow:hidden; background:var(--input-bg); box-shadow:0 4px 20px rgba(37,99,235,.08); margin-bottom:2rem; transition: background 0.3s; }
.search-input-wrap { display:flex; align-items:center; padding:0 1rem; height:3.25rem }
.search-icon { width:1.25rem; height:1.25rem; color:#93c5fd; margin-right:.75rem; flex-shrink:0 }
.search-input-wrap input { flex:1; border:none; outline:none; font-size:1.05rem; font-weight:500; text-transform:uppercase; color:var(--text-color); background:transparent; transition: color 0.3s; }
.search-input-wrap input::placeholder { text-transform:none; font-weight:400; color:var(--text-muted) }
.btn-search { border-radius:0; height:3.25rem; font-size:1rem }
@media(min-width:640px){
  .search-bar{flex-direction:row}
  .search-input-wrap{height:3.5rem;padding:0 1.25rem}
  .btn-search{height:3.5rem;border-radius:0;padding:0 2.5rem}
}

/* FEATURES */
.features-grid { display:grid; gap:1.25rem; margin-top:1rem }
@media(min-width:768px){ .features-grid{grid-template-columns:repeat(3,1fr)} }
.feature-card { border:1px solid var(--border-color); border-radius:16px; padding:1.5rem; text-align:center; background:var(--input-bg); transition:all .25s; display:flex; flex-direction:column }
.feature-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.06); border-color:#bfdbfe }
.feature-card h3 { font-size:.95rem; font-weight:700; margin-bottom:.5rem; color:var(--text-color); transition: color 0.3s; }
.feature-card p { font-size:.8rem; color:var(--text-muted); flex:1; line-height:1.5; margin-bottom:1rem; transition: color 0.3s; }
.feature-icon { font-size:2.5rem; margin-bottom:.75rem }

/* PLATE BADGE */
.plate-badge-wrap { text-align:center; margin-bottom:1.5rem }
.plate-badge { display:inline-flex; align-items:center; gap:.75rem; background:var(--input-bg); border:2px solid var(--border-color); border-radius:14px; padding:.75rem 1.5rem; box-shadow:0 4px 12px rgba(0,0,0,.06); transition: background 0.3s, border-color 0.3s; }
.plate-blue-lg { width:5px; height:2.5rem; background:#2563eb; border-radius:3px }
#plate-display { font-weight:800; font-size:1.75rem; letter-spacing:3px; color:var(--text-color); text-transform:uppercase; transition: color 0.3s; }
.badge { display:inline-block; font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:999px }
.badge-green { background:#dcfce7; color:#16a34a }
.badge-blue { background:#dbeafe; color:#2563eb; margin-left:.5rem }

/* COMMENT FORM */
.comment-form-card { background:var(--input-bg); border:1px solid var(--border-color); border-radius:16px; padding:1.25rem; margin-bottom:1.5rem; transition: background 0.3s, border-color 0.3s; }
.comment-form-card h3 { font-size:1rem; font-weight:700; margin-bottom:1rem; color:var(--text-color); transition: color 0.3s; }
.no-comments { background:#fefce8; border:1px solid #fde68a; border-radius:12px; padding:1rem; margin-bottom:1rem }
.no-comments-text { font-size:.85rem; color:#92400e; line-height:1.5 }

/* FORMS */
.form-group { margin-bottom:1.25rem }
.form-group label { display:block; font-size:.85rem; font-weight:600; color:var(--text-color); margin-bottom:.5rem; transition: color 0.3s; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:.75rem 1rem; border:1px solid var(--border-color); border-radius:10px; font-family:inherit; font-size:.95rem; outline:none; transition:all .2s; background:var(--input-bg); color:var(--text-color); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1) }
.form-group textarea { resize:none }
.form-row { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:end }
.char-count { font-size:.7rem; color:#94a3b8; font-weight:500 }
.text-right { text-align:right }
.uppercase { text-transform:uppercase }

/* CHECKBOX */
.checkbox-label { display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; margin-bottom:.75rem }
.checkbox-label input[type="checkbox"] { margin-top:2px; width:1rem; height:1rem; accent-color:#2563eb; flex-shrink:0 }
.checkbox-label span { font-size:.75rem; color:#64748b; line-height:1.4 }

/* KVKK BOX */
.kvkk-box { background:var(--input-bg); border:1px solid var(--border-color); border-radius:12px; padding:1rem; margin-bottom:1.25rem; transition: background 0.3s, border-color 0.3s; }
.kvkk-scroll { max-height:100px; overflow-y:auto; font-size:.7rem; color:var(--text-muted); line-height:1.5; margin-bottom:.75rem; padding-right:.5rem; transition: color 0.3s; }
.kvkk-scroll::-webkit-scrollbar { width:4px }
.kvkk-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px }

/* AUTH TABS */
.auth-tabs { display:flex; background:var(--border-color); border-radius:12px; padding:4px; margin-bottom:1.5rem; transition: background 0.3s; }
.auth-tab { flex:1; padding:.6rem; font-size:.85rem; font-weight:700; border:none; border-radius:10px; cursor:pointer; transition:all .2s; background:transparent; color:var(--text-muted); font-family:inherit }
.auth-tab.active { background:var(--input-bg); color:#2563eb; box-shadow:0 2px 8px rgba(0,0,0,.06); transition: background 0.3s, color 0.3s; }

/* COMMENT LIST */
.comment-item { background:var(--input-bg); border:1px solid var(--border-color); border-radius:16px; padding:1.25rem; margin-bottom:1rem; transition: background 0.3s, border-color 0.3s; }
.comment-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.75rem; flex-wrap:wrap; gap:.5rem }
.comment-meta { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text-muted); transition: color 0.3s; }
.comment-author { font-weight:700; color:var(--text-color); font-size:.9rem; transition: color 0.3s; }
.comment-date { color:var(--text-muted); font-size:.75rem; transition: color 0.3s; }
.comment-body { font-size:.95rem; line-height:1.6; color:var(--text-color); margin-bottom:1rem; word-break:break-word; transition: color 0.3s; }
.comment-footer { display:flex; justify-content:flex-end; border-top:1px solid var(--border-color); padding-top:.75rem; transition: border-color 0.3s; }

/* ADMIN */
.admin-tabs { display:flex; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap }
.admin-tab.active { background:#2563eb!important; color:#fff!important; border-color:#2563eb!important }
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1.5rem }
@media(min-width:768px){ .stat-grid{grid-template-columns:repeat(4,1fr)} }
.stat-card { background:var(--input-bg); border:1px solid var(--border-color); border-radius:12px; padding:1rem; text-align:center; transition: background 0.3s, border-color 0.3s; }
.stat-number { font-size:1.75rem; font-weight:800; color:#2563eb }
.stat-label { font-size:.75rem; color:var(--text-muted); margin-top:.25rem; transition: color 0.3s; }
.admin-table { display:block; overflow-x:auto; white-space:nowrap; width:100%; border-collapse:collapse; font-size:.8rem; color:var(--text-color); transition: color 0.3s; }
.admin-table th { text-align:left; padding:.6rem .5rem; background:var(--border-color); border-bottom:1px solid var(--border-color); font-weight:700; color:var(--text-color); font-size:.75rem; transition: background 0.3s, color 0.3s; }
.admin-table td { padding:.6rem .5rem; border-bottom:1px solid var(--border-color); vertical-align:middle; transition: border-color 0.3s; }
.admin-table tr:hover td { background:var(--dropdown-hover); transition: background 0.3s; }
.admin-actions { display:flex; gap:.35rem; flex-wrap:wrap }

/* PROFILE */
.profile-info { background:var(--input-bg); border:1px solid var(--border-color); border-radius:12px; padding:1rem; margin-bottom:1rem; transition: background 0.3s, border-color 0.3s; }
.profile-row { display:flex; justify-content:space-between; padding:.4rem 0; font-size:.85rem }
.profile-row span:first-child { color:var(--text-muted); font-weight:500; transition: color 0.3s; }
.profile-row span:last-child { color:var(--text-color); font-weight:600; transition: color 0.3s; }

/* HOW LIST */
.how-list { padding-left:1.5rem }
.how-list li { margin-bottom:.75rem; font-size:.9rem; color:#475569; line-height:1.5 }

/* PRICE TAG */
.price-tag { font-size:2rem; font-weight:800; color:#2563eb; margin:1.5rem 0 }

/* FOOTER */
.footer { margin-top:auto; padding:0; background:var(--header-bg); border-top:1px solid var(--border-color); transition: background 0.3s, border-color 0.3s; }
.footer-inner { max-width:1100px; margin:0 auto; padding:2.5rem 1rem 1.5rem; display:grid; grid-template-columns:1fr; gap:2rem }
@media(min-width:768px){ .footer-inner{grid-template-columns:1.5fr 1fr 1fr 1fr} }
.footer-col h4 { font-size:.8rem; font-weight:700; color:var(--text-color); margin-bottom:.75rem; transition: color 0.3s; }
.footer-col a { display:block; font-size:.78rem; color:var(--text-muted); text-decoration:none; margin-bottom:.4rem; transition:color .15s }
.footer-col a:hover { color:#2563eb }
.footer-brand { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem }
.footer-brand-text { font-size:1rem; font-weight:800; color:var(--text-color); transition: color 0.3s; }
.footer-desc { font-size:.75rem; color:var(--text-muted); line-height:1.5; margin-bottom:.75rem; transition: color 0.3s; }
.footer-contact { font-size:.78rem; color:var(--text-muted); margin-bottom:.35rem; transition: color 0.3s; }
.footer-social { display:flex; gap:.5rem; flex-wrap:wrap }
.footer-social a { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:8px; background:var(--input-bg); color:var(--text-muted); text-decoration:none; font-size:.85rem; transition:all .2s }
.footer-social a:hover { background:#2563eb; color:#fff }
.footer-bottom { max-width:1100px; margin:0 auto; padding:1rem 1rem; border-top:1px solid var(--border-color); display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center; transition: border-color 0.3s; }
@media(min-width:640px){ .footer-bottom{flex-direction:row;justify-content:space-between;text-align:left} }
.footer-bottom p { font-size:.7rem; color:var(--text-muted); transition: color 0.3s; }

/* ADMIN SETTINGS FORM */
.settings-section { background:var(--card-bg); border:1px solid var(--border-color); border-radius:14px; padding:1.25rem; margin-bottom:1.25rem; transition: background 0.3s, border-color 0.3s; }
.settings-section h3 { font-size:.9rem; font-weight:700; margin-bottom:1rem; color:var(--text-color); display:flex; align-items:center; gap:.4rem; transition: color 0.3s; }
.settings-row { display:grid; grid-template-columns:1fr 2fr auto; gap:.75rem; align-items:center; margin-bottom:.75rem }
@media(max-width:640px){ .settings-row{grid-template-columns:1fr;gap:.35rem} }
.settings-row label { font-size:.8rem; font-weight:600; color:var(--text-muted); transition: color 0.3s; }
.settings-row input { padding:.5rem .75rem; border:1px solid var(--border-color); border-radius:8px; font-size:.8rem; font-family:inherit; outline:none; background:var(--input-bg); color:var(--text-color); transition: background 0.3s, border-color 0.3s, color 0.3s; }
.settings-row input:focus { border-color:#2563eb }
.social-item { display:flex; align-items:center; gap:.5rem; padding:.5rem; background:var(--input-bg); border:1px solid var(--border-color); border-radius:10px; margin-bottom:.5rem; color:var(--text-color); transition: background 0.3s, border-color 0.3s, color 0.3s; }
.social-item input { flex:1; background:transparent; border:none; outline:none; color:var(--text-color); font-size:.8rem; }
.social-item .btn { flex-shrink:0 }

/* POPUP */
.popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9998; display:flex; align-items:center; justify-content:center }
.popup-content { background:var(--card-bg); border-radius:16px; padding:1.5rem; max-width:90vw; max-height:90vh; overflow:auto; position:relative; color:var(--text-color); border:1px solid var(--border-color); transition: background 0.3s, border-color 0.3s, color 0.3s; }
.popup-content img { max-width:100%; max-height:75vh; border-radius:8px }
.popup-close { position:absolute; top:.5rem; right:.75rem; background:var(--input-bg); border:none; width:2rem; height:2rem; border-radius:50%; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition: background 0.3s, color 0.3s; }

/* SPINNER */
.spinner { width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block }
@keyframes spin { to{transform:rotate(360deg)} }

/* UTILITIES */
.hidden { display:none!important }
.mb-4 { margin-bottom:1rem }
.text-muted { color:#64748b; font-size:.85rem }
.text-center { text-align:center }

/* MAINTENANCE OVERLAY */
.maintenance-overlay { position:fixed; inset:0; z-index:10000; background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%); display:flex; align-items:center; justify-content:center }
.maintenance-content { text-align:center; color:#fff; padding:2rem; max-width:500px }
.maintenance-icon { font-size:4rem; margin-bottom:1.5rem; animation:pulse 2s ease-in-out infinite }
.maintenance-content h2 { font-size:1.75rem; margin-bottom:1rem; color:#f8fafc }
.maintenance-content p { font-size:1rem; color:#94a3b8; line-height:1.6 }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* CHAT */
.chat-container { display:flex; gap:0; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; min-height:500px; background:#fff }
.chat-sidebar { width: 300px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; background: var(--input-bg); transition: background 0.3s, border-color 0.3s; }
.chat-main { flex: 1; display: flex; flex-direction: column; background: var(--card-bg); transition: background 0.3s; }
.chat-search-box { padding: 1rem; border-bottom: 1px solid var(--border-color); position: relative; transition: border-color 0.3s; }
.chat-search-box input { width: 100%; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 6px; outline: none; background: var(--input-bg); color: var(--text-color); transition: all 0.3s; }
.chat-search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--dropdown-bg); border: 1px solid var(--border-color); border-top: none; max-height: 200px; overflow-y: auto; z-index: 10; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: background 0.3s, border-color 0.3s; }
.chat-search-result-item { padding: 0.5rem 1rem; cursor: pointer; border-bottom: 1px solid var(--border-color); color: var(--text-color); transition: all 0.3s; }
.chat-search-result-item:hover { background: var(--dropdown-hover); }
.chat-conversations { flex: 1; overflow-y: auto; }
.conversation-item { padding: 1rem; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s, border-color 0.3s; }
.conversation-item:hover { background: var(--dropdown-hover); }
.conversation-item.active { background: var(--dropdown-hover); border-left: 4px solid #2563eb; }
.conv-email { font-weight: bold; margin-bottom: 0.25rem; font-size: 0.9rem; color: var(--text-color); transition: color 0.3s; }
.conv-last-msg { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; }
.conv-unread { background: #ef4444; color: #fff; font-size: 0.7rem; padding: 2px 6px; border-radius: 10px; font-weight: bold; margin-left: 5px; }
.chat-header { padding: 1rem; border-bottom: 1px solid var(--border-color); font-weight: bold; display: flex; justify-content: space-between; align-items: center; color: var(--text-color); transition: border-color 0.3s, color 0.3s; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; background: var(--bg-color); transition: background 0.3s; }
.chat-message.sent { align-self: flex-end; background: #2563eb; color: #fff; border-bottom-right-radius: 4px; }
.chat-message.received { align-self: flex-start; background: var(--input-bg); border: 1px solid var(--border-color); border-bottom-left-radius: 4px; color: var(--text-color); transition: background 0.3s, border-color 0.3s, color 0.3s; }
.chat-message-time { font-size: 0.65rem; opacity: 0.7; margin-top: 4px; text-align: right; }
.chat-input-area { padding: 1rem; border-top: 1px solid var(--border-color); display: flex; gap: 0.5rem; background: var(--input-bg); transition: border-color 0.3s, background 0.3s; }
.chat-input-area input { flex: 1; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 6px; outline: none; background: var(--input-bg); color: var(--text-color); transition: all 0.3s; }
.chat-nav-btn { position:relative }
.chat-badge { position:absolute; top:-4px; right:-4px; background:#ef4444; color:#fff; font-size:.55rem; font-weight:700; padding:1px 4px; border-radius:999px; min-width:14px; text-align:center; line-height:1.3 }
@media(max-width:768px){
  .chat-sidebar { width:100% }
  .chat-main.hidden-mobile { display:none }
  .chat-sidebar.hidden-mobile { display:none }
  .chat-header-back { display:block }
  .chat-container { flex-direction:column; min-height:60vh }
}

/* BADGE RED */
.badge-red { background:#fee2e2; color:#ef4444 }

/* VISITOR CHART */
.visitor-chart-bar { display:flex; align-items:flex-end; justify-content:center; gap:3px; height:120px; padding:0 .5rem }
.visitor-bar { flex:1; max-width:25px; background:linear-gradient(to top, #2563eb, #60a5fa); border-radius:3px 3px 0 0; min-width:4px; transition:height .3s; cursor:pointer; position:relative }
.visitor-bar:hover { opacity:.8 }
.visitor-bar-tooltip { display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#1e293b; color:#fff; font-size:.65rem; padding:2px 6px; border-radius:4px; white-space:nowrap; margin-bottom:4px }
.visitor-bar:hover .visitor-bar-tooltip { display:block }

/* TOGGLE SWITCH */
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: #2563eb; }
input:checked + .slider:before { transform: translateX(22px); }

/* BADGES */
.badge-outline { border: 1px solid currentColor; padding: 2px 6px; border-radius: 12px; font-size: 0.7rem; }
.badge-acemi { color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }
.badge-guvenilir { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.badge-fahri { color: #10b981; background: rgba(16, 185, 129, 0.1); }

/* OWNER REPORT BUTTON */
.comment-owner-report { background:none; border:none; cursor:pointer; font-size:.9rem; opacity:.6; transition:opacity .2s,transform .2s; padding:0 }
.comment-owner-report:hover { opacity:1; transform:scale(1.2) }

/* COMMENT REPORT */
.comment-report { background:none; border:none; cursor:pointer; font-size:.85rem; opacity:.5; transition:opacity .2s; padding:0 }
.comment-report:hover { opacity:1 }

/* COMMENT CARD */
.comment-card { background:var(--input-bg); border:1px solid var(--border-color); border-radius:12px; padding:1rem; margin-bottom:.75rem; transition:background .3s,border-color .3s }
.comment-card:hover { border-color:#bfdbfe }
.comment-text { font-size:.9rem; line-height:1.6; color:var(--text-color); word-break:break-word }

/* BADGE ORANGE */
.badge-orange { background:#fff7ed; color:#ea580c; font-weight:700 }

/* CHAT CONV ITEM */
.chat-conv-item { padding:.75rem 1rem; border-bottom:1px solid var(--border-color); cursor:pointer; transition:background .2s }
.chat-conv-item:hover { background:var(--dropdown-hover) }
.chat-conv-item.active { background:var(--dropdown-hover); border-left:3px solid #2563eb }
.chat-conv-unread { background:#ef4444; color:#fff; font-size:.6rem; font-weight:700; padding:1px 5px; border-radius:999px }
.chat-search-item { padding:.5rem 1rem; cursor:pointer; font-size:.85rem; border-bottom:1px solid var(--border-color); color:var(--text-color) }
.chat-search-item:hover { background:var(--dropdown-hover) }
.chat-msg { max-width:75%; padding:.5rem .75rem; border-radius:12px; font-size:.85rem; line-height:1.4; position:relative }
.chat-msg.mine { align-self:flex-end; background:#2563eb; color:#fff; border-bottom-right-radius:4px }
.chat-msg.theirs { align-self:flex-start; background:var(--input-bg); border:1px solid var(--border-color); border-bottom-left-radius:4px; color:var(--text-color) }
.chat-msg-time { font-size:.6rem; opacity:.6; margin-top:2px; display:block; text-align:right }
.chat-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-muted) }
.chat-placeholder-icon { font-size:3rem; margin-bottom:1rem }
.chat-header-back { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--text-color); display:none }
.chat-header-email { font-size:.9rem }