/* ErzincanPortal — tema dışı ek bileşenler (üye paneli, tablolar, mesajlaşma, bildirim).
   Tema tokenlarını (styles.css) kullanır; tema dosyasını değiştirmemek için ayrıdır. */

/* ---- Panel layout (sidebar + içerik) ---- */
.panel-layout{ display:grid; grid-template-columns:248px 1fr; gap:var(--s5); align-items:start; padding-block:24px 56px; }
.panel-nav{ position:sticky; top:90px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:10px; box-shadow:var(--sh-1); }
.panel-nav .pn-user{ display:flex; align-items:center; gap:11px; padding:12px 12px 14px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.panel-nav a{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--r-md); color:var(--text); font-weight:600; font-size:14px; transition:background var(--dur); }
.panel-nav a svg{ width:19px; height:19px; color:var(--faint); }
.panel-nav a:hover{ background:var(--surface-2); }
.panel-nav a.on{ background:var(--kirmizi-soft); color:var(--kirmizi); }
.panel-nav a.on svg{ color:var(--kirmizi); }
.panel-nav a .badge{ margin-left:auto; }
.panel-nav .danger{ color:var(--kirmizi); }

/* ---- İstatistik kartları ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-bottom:var(--s5); }
.stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-1); }
.stat-card .sv{ font-size:30px; font-weight:800; color:var(--ink); line-height:1; }
.stat-card .sl{ font-size:13px; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:6px; }
.stat-card .sl svg{ width:16px; height:16px; color:var(--kirmizi); }

/* ---- Veri tablosu ---- */
.data-table{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); border-collapse:collapse; }
.data-table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--faint); font-weight:700; padding:13px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.data-table td{ padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.data-table tr:last-child td{ border-bottom:0; }
.data-table tr:hover td{ background:var(--surface-2); }
.data-table .thumb{ width:54px; height:42px; border-radius:8px; object-fit:cover; background:var(--surface-2); }
.table-wrap{ overflow-x:auto; }

/* ---- Durum rozetleri ---- */
.badge-bekliyor{ background:var(--gold-bg); color:#8A6A1A; }
.badge-pasif{ background:var(--surface-2); color:var(--faint); }
.badge-red{ background:#FBEAEA; color:var(--kirmizi); }

/* ---- Sohbet / mesajlaşma ---- */
.conv{ display:grid; grid-template-columns:320px 1fr; gap:var(--s4); height:calc(100vh - 220px); min-height:480px; }
.conv-list{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow-y:auto; box-shadow:var(--sh-1); }
.conv-item{ display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; transition:background var(--dur); }
.conv-item:hover{ background:var(--surface-2); }
.conv-item.on{ background:var(--kirmizi-soft); }
.conv-item .ci-body{ flex:1; min-width:0; }
.conv-item .ci-body b{ font-size:14px; display:block; }
.conv-item .ci-body p{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.conv-item .ci-time{ font-size:11.5px; color:var(--faint); }
.conv-main{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); display:flex; flex-direction:column; box-shadow:var(--sh-1); overflow:hidden; }
.conv-head{ padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.thread{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px; background:var(--bg); }
.bubble{ max-width:72%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.45; }
.bubble.in{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px; }
.bubble.out{ align-self:flex-end; background:var(--kirmizi); color:#fff; border-bottom-right-radius:4px; }
.bubble .bt{ display:block; font-size:10.5px; opacity:.7; margin-top:4px; }
.conv-compose{ padding:12px 14px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:center; }
.conv-compose input{ flex:1; }
.conv-req{ padding:16px 18px; background:var(--gold-bg); border-top:1px solid var(--gold-line); display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }

/* ---- Bildirim ---- */
.notif-item{ display:flex; gap:13px; padding:15px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:10px; align-items:flex-start; }
.notif-item.unread{ border-left:3px solid var(--kirmizi); }
.notif-item .nico{ width:38px; height:38px; border-radius:10px; background:var(--kirmizi-soft); color:var(--kirmizi); display:grid; place-items:center; flex-shrink:0; }
.notif-item .nico svg{ width:18px; height:18px; }
.notif-item .nbody{ flex:1; }
.notif-item .nbody p{ font-size:14px; color:var(--ink); }
.notif-item .nbody .nt{ font-size:12px; color:var(--faint); margin-top:3px; }

/* ---- Sayfa başlığı (panel içi) ---- */
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-head h1{ font-size:25px; }
.page-head p{ color:var(--muted); margin-top:4px; font-size:14px; }

/* ---- Fotoğraf hücreleri (foto-grid edit) ---- */
.pcell{ position:relative; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); border:1px solid var(--line); }
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:14px; }
.cover-tag{ position:absolute; left:6px; bottom:6px; background:var(--kirmizi); color:#fff; font-size:10px; font-weight:800; padding:3px 7px; border-radius:6px; letter-spacing:.4px; }

/* ---- Responsive ---- */
@media (max-width:900px){
  .panel-layout{ grid-template-columns:1fr; }
  .panel-nav{ position:static; display:flex; gap:6px; overflow-x:auto; }
  .panel-nav .pn-user{ display:none; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .conv{ grid-template-columns:1fr; height:auto; }
}

/* ===== Kademeli kategori seçimi (ilan-ver) ===== */
.cat-pick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.cat-tile{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--card,#fff); border:1.5px solid var(--line,#e6e6e9); border-radius:14px;
  padding:14px 16px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .05s; font:inherit; color:inherit; }
.cat-tile:hover{ border-color:var(--kirmizi,#D40000); box-shadow:0 4px 16px rgba(0,0,0,.06); }
.cat-tile:active{ transform:translateY(1px); }
.cat-tile.is-sel{ border-color:var(--kirmizi,#D40000); background:rgba(212,0,0,.05); box-shadow:0 0 0 1px var(--kirmizi,#D40000) inset; }
.cat-tile .ci{ font-size:24px; line-height:1; flex:0 0 auto; }
.cat-tile b{ flex:1; font-size:15px; font-weight:700; }
.cat-tile .chev{ width:18px; height:18px; color:var(--muted,#999); flex:0 0 auto; }
.cat-trail .btn-sm{ padding:5px 12px; font-size:13px; }

/* ===== Sohbet "yazıyor…" animasyonu ===== */
#typingInd .typing-dots{ display:inline-block; width:18px; text-align:left; }
#typingInd .typing-dots::after{ content:""; animation:typingDots 1.2s steps(4,end) infinite; }
@keyframes typingDots{ 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} 100%{content:"";} }