/* ==============================================================
   İZMİR KONUŞUYOR — ANA STİL DOSYASI
   Tasarım dili: Ege kıyısının rengi (turkuaz + derin mavi + badem
   çiçeği beyazı) ve gün batımı mercanı tek vurgu rengi olarak.
   Signature motif: Kordon'un dalga hattı — navbar altında ve
   auth sayfasında tekrar eden bir SVG dalga.
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- Renk Paleti (Ege / İzmir) --- */
  --ik-deep:        #0b4f6c;   /* derin Ege mavisi */
  --ik-blue:         #0891b2;   /* ana marka rengi */
  --ik-turquoise:    #14b8a6;   /* İzmir Körfezi turkuazı */
  --ik-turquoise-lt: #5eead4;
  --ik-coral:        #ff7a59;   /* gün batımı mercanı — tek vurgu rengi */
  --ik-white:        #ffffff;
  --ik-sand:         #f6faf9;   /* badem çiçeği beyazı */

  --bg:              var(--ik-sand);
  --bg-elevated:     #ffffffcc;
  --surface:         #ffffff;
  --border:          #e2eef0;
  --text:            #0f2a33;
  --text-muted:      #5b7a82;
  --text-inverse:    #ffffff;

  --gradient-brand:  linear-gradient(135deg, var(--ik-deep) 0%, var(--ik-blue) 50%, var(--ik-turquoise) 100%);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(11, 79, 108, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 79, 108, 0.12);
  --shadow-lg: 0 20px 48px rgba(11, 79, 108, 0.18);

  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
  --bg:            #071c24;
  --bg-elevated:   #0d2933cc;
  --surface:       #0d2933;
  --border:        #163944;
  --text:          #e8f4f5;
  --text-muted:    #8fb3ba;
  --text-inverse:  #071c24;
  --ik-sand:       #071c24;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body { min-height: 100vh; transition: background 0.3s ease, color 0.3s ease; }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 0.4em; letter-spacing: -0.01em; }

a { color: inherit; text-decoration: none; }

button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }

img { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--ik-turquoise); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==============================================================
   NAVBAR — Glassmorphism + Kordon dalga imzası
   ============================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-elevated);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--border);
}

.navbar::after {
  /* Signature dalga çizgisi: Kordon'un kıyı hattını temsil eder */
  content: '';
  display: block;
  height: 3px;
  background: var(--gradient-brand);
  background-size: 200% 100%;
  animation: wave-shift 6s ease-in-out infinite;
}

@keyframes wave-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ik-deep);
  white-space: nowrap;
}
[data-theme="dark"] .navbar-logo { color: var(--ik-turquoise-lt); }
.navbar-logo-icon { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; }
.navbar-logo strong { color: var(--ik-coral); }

.navbar-search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  gap: 8px;
}
.navbar-search i { color: var(--text-muted); }
.navbar-search input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  font-size: 0.9rem;
  color: var(--text);
  font-family: var(--font-body);
}

.live-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  display: none;
  z-index: 200;
}
.live-search-results.visible { display: block; }
.live-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; position: relative; }
.live-search-item:hover { background: var(--bg); }
.live-search-item div { flex: 1; min-width: 0; }
.live-search-heading { padding: 10px 14px 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.live-search-item-remove {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.7rem;
}
.live-search-item-remove:hover { background: #fee2e2; color: #dc2626; }
.live-search-hashtag { border-bottom: 1px solid var(--border); }
.live-search-hashtag-icon {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ik-turquoise); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
}

.navbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.nav-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.05rem;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.nav-icon:hover { background: var(--bg); color: var(--ik-turquoise); transform: translateY(-2px); }
.mobile-search-toggle { display: none; } /* Yalnızca mobilde (aşağıdaki medya sorgusunda) gösterilir — masaüstünde zaten tam arama kutusu var */
.mobile-bottom-nav { display: none; } /* Yalnızca mobilde gösterilir (aşağıdaki medya sorgusu) */

.navbar-profile { position: relative; }
.profile-trigger img {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--ik-turquoise);
  object-fit: cover;
}
.profile-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  min-width: 190px; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.2s ease;
}
/* NOT: Daha önce :hover/:focus-within ile açılıyordu — ama bu, diğer
   panellerle (bildirim, arama vb.) birlikte açık kalıp üst üste binerek
   yazıların birbirine karışmasına neden olabiliyordu. Artık tüm panellerle
   tutarlı olacak şekilde JS ile ".visible" sınıfı üzerinden yönetiliyor
   (bkz. initPanelManager()) — hangi ikona tıklanırsa yalnızca o açılır,
   diğer tüm paneller otomatik kapanır. */
.profile-dropdown.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.profile-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.9rem; }
.profile-dropdown a:hover { background: var(--bg); color: var(--ik-turquoise); }

/* Profil sayfasındaki "..." (3 çizgi) seçenekler menüsü — Şikayet Et vb. */
.profile-menu-wrap { position: relative; }
.profile-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  min-width: 180px; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.2s ease;
}
.profile-menu-dropdown.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.profile-menu-dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600; color: #dc2626;
}
.profile-menu-dropdown button:hover { background: #fee2e2; }

/* ==============================================================
   LAYOUT
   ============================================================== */
.app-main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.app-main:not(.with-navbar) { max-width: none; padding: 0; }

.feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.feed-main-full { max-width: 640px; margin: 0 auto; }

@media (max-width: 900px) {
  .feed-layout { grid-template-columns: 1fr; }
  .feed-sidebar { display: none; }
}

/* ==============================================================
   KARTLAR / GENEL
   ============================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.muted { color: var(--text-muted); font-size: 0.88rem; }

/* ==============================================================
   BUTONLAR
   ============================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  font-weight: 600; font-size: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s;
}
.btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border: 1.5px solid var(--ik-turquoise); color: var(--ik-turquoise); }
.btn-outline:hover { background: var(--ik-turquoise); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 0.82rem; }

/* ==============================================================
   FORMLAR
   ============================================================== */
label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="file"], textarea {
  font-family: var(--font-body);
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s;
}
input:focus, textarea:focus { border-color: var(--ik-turquoise); outline: none; }
textarea { resize: vertical; font-family: var(--font-body); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkbox-label { flex-direction: row; align-items: center; gap: 10px; }

/* ==============================================================
   AUTH SAYFALARI (Glassmorphism + dalga hero)
   ============================================================== */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand);
  background-size: 200% 200%;
  animation: gradient-drift 12s ease infinite;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
@keyframes gradient-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.auth-page::before {
  /* Ege dalgası — sayfanın alt kısmında tekrar eden signature motif */
  content: '';
  position: absolute; bottom: -10%; left: -10%; right: -10%; height: 40%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, transparent 70%);
}

.auth-card {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg);
  z-index: 1;
}
.auth-brand { text-align: center; margin-bottom: 28px; color: #fff; }
.auth-brand-icon { width: 72px; height: 72px; border-radius: 18px; object-fit: contain; margin: 0 auto 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.auth-brand h1 { font-size: 1.5rem; color: #fff; }
.auth-brand p { color: rgba(255,255,255,0.8); font-size: 0.88rem; }
.auth-form label span { color: rgba(255,255,255,0.85); }
.auth-form input {
  background: rgba(255,255,255,0.9); border: none;
}
.auth-switch { text-align: center; color: rgba(255,255,255,0.85); font-size: 0.88rem; margin-top: 18px; }
.auth-switch a { color: var(--ik-turquoise-lt); font-weight: 700; }

/* ==============================================================
   GÖNDERİ OLUŞTURMA
   ============================================================== */
.create-post-card { margin-bottom: 20px; }
.create-post-top { display: flex; gap: 12px; align-items: flex-start; }
.create-post-top textarea { flex: 1; border: none; resize: none; font-size: 1rem; padding: 8px 0; }
.create-post-top textarea:focus { outline: none; }
.create-post-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.upload-btn { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ik-blue); font-weight: 600; padding: 8px 12px; border-radius: var(--radius-sm); transition: background 0.2s; }
.upload-btn:hover { background: var(--bg); }
.location-input { flex: 1; border: none; background: var(--bg); border-radius: 999px; padding: 8px 14px; font-size: 0.85rem; width: 100%; }
.location-input-wrap { position: relative; flex: 1; min-width: 0; }
.location-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; display: none;
}
.location-suggestions.visible { display: block; }
.location-suggestion-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 0.85rem; }
.location-suggestion-item:hover { background: var(--bg); }
.location-suggestion-item i { color: var(--ik-coral); font-size: 0.8rem; }
.image-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.image-preview-item { position: relative; width: 80px; height: 80px; }
.image-preview-item img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.image-preview-video {
  width: 80px; height: 80px; border-radius: var(--radius-sm); background: var(--bg);
  border: 1.5px dashed var(--ik-turquoise); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; color: var(--ik-turquoise);
  background-size: cover; background-position: center;
}
.image-preview-video i { font-size: 1.3rem; }
.image-preview-video span { font-size: 0.68rem; font-weight: 700; }
/* Videonun ilk karesi başarıyla çıkarılınca: kesikli çerçeve/ikon+yazı yerine
   gerçek küçük resmin üzerinde, videoyu belirten küçük bir rozet gösterilir. */
.image-preview-video.has-thumbnail { border: none; align-items: flex-end; justify-content: flex-start; padding: 4px; }
.image-preview-video-badge {
  width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.6rem;
}
.image-preview-remove-btn {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: #dc2626; color: #fff; font-size: 0.65rem; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); border: 2px solid var(--surface);
  transition: transform 0.15s, background 0.15s;
}
.image-preview-remove-btn:hover { background: #b91c1c; transform: scale(1.1); }

/* ==============================================================
   GÖNDERİ KARTI
   ============================================================== */
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 18px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.post-card:hover { box-shadow: var(--shadow-md); }

.post-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.post-author { display: flex; align-items: center; gap: 10px; }
.avatar { border-radius: 50%; object-fit: cover; }
.avatar-sm { width: 42px; height: 42px; }
.avatar-xs { width: 32px; height: 32px; }
.post-author-name { font-weight: 700; font-size: 0.92rem; display: flex; align-items: center; gap: 4px; }
.post-meta { display: block; font-size: 0.78rem; color: var(--text-muted); }
.verified-badge { color: var(--ik-blue); font-size: 0.85em; }
.premium-badge { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.post-menu-btn { color: var(--text-muted); padding: 8px; border-radius: 50%; }
.post-menu-btn:hover { background: #fee2e2; color: #dc2626; }

.post-content { font-size: 0.95rem; line-height: 1.55; margin-bottom: 12px; white-space: pre-wrap; }
.hashtag-link, .mention-link { color: var(--ik-blue); font-weight: 600; }

/* Gönderi "..." menüsü */
.post-menu { position: relative; }
.post-menu-trigger { width: 34px; height: 34px; border-radius: 50%; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.post-menu-trigger:hover { background: var(--bg); color: var(--ik-turquoise); }
.post-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.15s ease;
}
.post-menu-dropdown.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.post-menu-dropdown button, .post-menu-dropdown form { width: 100%; }
.post-menu-dropdown button:not(.post-menu-danger) { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.85rem; text-align: left; color: var(--text); }
.post-menu-dropdown button:not(.post-menu-danger):hover { background: var(--bg); color: var(--ik-turquoise); }
.post-menu-danger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.85rem; text-align: left; color: #dc2626; }
.post-menu-danger:hover { background: #fee2e2; }

/* Gönderi düzenleme formu (satır içi) */
.post-edit-form { margin-bottom: 12px; }
.post-edit-textarea { width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 10px 12px; border: 1.5px solid var(--ik-turquoise); border-radius: var(--radius-sm); resize: vertical; }
.post-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Yeniden paylaşım (repost) */
.repost-note { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
.repost-note i { color: var(--ik-turquoise); }
.repost-embed { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; background: var(--bg); }
.repost-embed .post-author { margin-bottom: 8px; }
.repost-embed .post-content { margin-bottom: 8px; font-size: 0.9rem; }

.post-media { display: grid; gap: 4px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; }
.post-media-count-1 { grid-template-columns: 1fr; }
.post-media-count-2 { grid-template-columns: 1fr 1fr; }
.post-media-count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.post-media-count-3 img:first-child { grid-row: span 2; }
.post-media-count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.post-media img { width: 100%; height: 100%; object-fit: cover; max-height: 480px; cursor: zoom-in; }
.post-media video.post-video { width: 100%; max-height: 480px; background: #000; display: block; }
.post-media-detail video.post-video { width: 100%; max-height: 640px; background: #000; display: block; }

/* Gönderi DETAY sayfasındaki tekil görsel: sabit 1:1 (kare) oranında,
   tam ve kesilmeden (object-fit: cover ile orantılı kırpma) gösterilir.
   Önceki "max-height" tabanlı yaklaşım, dikey/uzun görsellerde resmin
   yarısının görünmemesine neden oluyordu — bu sınıf o sorunu çözer. */
/* Gönderi DETAY sayfasındaki tekil görsel: görsel doğal oranında, HİÇ
   kesilmeden gösterilir (object-fit: contain). Çok uzun/dikey görseller
   için makul bir üst sınır (max-height) uygulanır, böylece sayfa aşırı
   uzamaz ama görselin hiçbir kısmı kaybolmaz. */
.post-media-detail {
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  max-height: 640px; cursor: zoom-in;
}
.post-media-detail img { max-width: 100%; max-height: 640px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; }

.post-stats { display: flex; gap: 16px; font-size: 0.82rem; color: var(--text-muted); padding: 8px 0; border-bottom: 1px solid var(--border); }
.post-stats i { color: var(--ik-coral); }

.post-actions { display: flex; gap: 4px; padding-top: 8px; }
.post-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
}
.post-action-btn:hover { background: var(--bg); }
.post-action-btn.like-btn.active { color: var(--ik-coral); }
.post-action-btn.like-btn.active i { animation: heart-pop 0.35s ease; }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ==============================================================
   YORUMLAR
   ============================================================== */
.comment-form-card { margin: 20px 0; }
.comment-form-card form { display: flex; gap: 10px; align-items: flex-start; }
.comment-form-card textarea { flex: 1; }
.comment-list { display: flex; flex-direction: column; gap: 14px; }
.comment-item { display: flex; gap: 10px; }
.comment-bubble { background: var(--bg); border-radius: var(--radius-md); padding: 10px 14px; flex: 1; }
.comment-bubble strong { font-size: 0.85rem; }
.comment-bubble p { margin: 2px 0 4px; font-size: 0.88rem; }
.comment-time { font-size: 0.72rem; color: var(--text-muted); }

.nav-icon { position: relative; }

/* ==============================================================
   BİLDİRİMLER
   ============================================================== */
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--ik-coral); color: #fff;
  font-size: 0.65rem; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
}

.navbar-notifications { position: relative; }
.notif-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.2s ease; z-index: 150;
}
.notif-dropdown.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.notif-dropdown-header a { color: var(--ik-blue); font-size: 0.8rem; font-weight: 600; }
.notif-dropdown-header-actions { display: flex; align-items: center; gap: 14px; }
.notif-dropdown-header-actions button { color: var(--text-muted); font-size: 0.85rem; transition: color 0.15s; }
.notif-dropdown-header-actions button:hover { color: #dc2626; }
.notif-dropdown-list { padding: 6px; }
.notif-empty { text-align: center; padding: 24px; }

.notif-dropdown-row { display: flex; align-items: center; gap: 2px; }
.notif-dropdown-row .notif-dropdown-item { flex: 1; min-width: 0; }
.notif-dropdown-delete {
  width: 26px; height: 26px; min-width: 26px; border-radius: 50%; color: var(--text-muted);
  font-size: 0.72rem; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.notif-dropdown-row:hover .notif-dropdown-delete { opacity: 1; }
.notif-dropdown-delete:hover { background: #fee2e2; color: #dc2626; }

.notif-dropdown-item, .notification-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.notif-dropdown-item:hover, .notification-item:hover { background: var(--bg); }
.notif-dropdown-item.unread, .notification-item.unread { background: rgba(20, 184, 166, 0.08); }

.notif-icon {
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #fff;
}
.notif-icon-like { background: var(--ik-coral); }
.notif-icon-comment { background: var(--ik-blue); }
.notif-icon-follow { background: var(--ik-turquoise); }
.notif-icon-mention { background: #a78bfa; }

.notif-dropdown-item .notif-text-wrap, .notification-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-time, .notification-text .notif-time { font-size: 0.72rem; color: var(--text-muted); }

.notifications-page { max-width: 620px; margin: 0 auto; }
.notifications-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.notifications-page-header h2 { margin: 0; }
.notification-list { display: flex; flex-direction: column; gap: 2px; }
.notification-item-row { display: flex; align-items: center; gap: 4px; }
.notification-item-row .notification-item { flex: 1; min-width: 0; }
.notification-delete-btn {
  width: 32px; height: 32px; min-width: 32px; border-radius: 50%; color: var(--text-muted);
  font-size: 0.8rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.notification-delete-btn:hover { background: #fee2e2; color: #dc2626; }

.widget-card { margin-bottom: 18px; }
.widget-card h3 { font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.widget-card h3 i { color: var(--ik-turquoise); }
.weather-widget { display: flex; align-items: center; gap: 14px; }
.weather-widget-icon { font-size: 2.2rem; color: var(--ik-coral); }
.weather-widget-info { display: flex; flex-direction: column; gap: 2px; }
.weather-widget-info strong { font-family: var(--font-display); font-size: 1.4rem; }
.weather-widget-wind { font-size: 0.75rem; }
.suggested-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.suggested-user:last-of-type { border-bottom: none; }
.suggested-user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.suggested-user-info div { display: flex; flex-direction: column; min-width: 0; }
.suggested-user-info strong { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggested-user-info span { font-size: 0.75rem; color: var(--text-muted); }
.trend-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.trend-tag { background: var(--bg); color: var(--ik-blue); padding: 6px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.trend-tag:hover { background: var(--ik-turquoise); color: #fff; }
.sidebar-footer { text-align: center; color: var(--text-muted); font-size: 0.78rem; margin-top: 20px; }

/* ==============================================================
   KEŞFET / EXPLORE
   ============================================================== */
.explore-header { margin-bottom: 20px; }
.explore-grid, .profile-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.explore-tile { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.explore-tile img { width: 100%; height: 100%; object-fit: cover; }
.explore-tile-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.explore-tile-play-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; pointer-events: none;
}
.explore-tile-text { padding: 14px; font-size: 0.82rem; color: var(--text-muted); }
.explore-tile-overlay {
  position: absolute; inset: 0; background: rgba(11,79,108,0.75); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  opacity: 0; transition: opacity 0.2s; font-size: 0.9rem; font-weight: 600;
}
.explore-tile:hover .explore-tile-overlay { opacity: 1; }
.explore-tile-link { display: block; width: 100%; height: 100%; }
.explore-tile-menu { position: absolute; top: 8px; right: 8px; z-index: 10; }
.explore-tile-repost-badge {
  position: absolute; top: 8px; left: 8px; z-index: 10;
  width: 26px; height: 26px; border-radius: 50%; background: rgba(11, 26, 31, 0.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; backdrop-filter: blur(4px);
}
.post-menu-trigger-overlay {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(11, 26, 31, 0.55); color: #fff; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.post-menu-trigger-overlay:hover { background: rgba(11, 26, 31, 0.8); }
.explore-tile-menu .post-menu-dropdown { right: 0; }

/* ==============================================================
   PROFİL SAYFASI
   ============================================================== */
/* NOT: Önceden sabit "height: 220px" kullanılıyordu. Bu, background-size:cover
   ile birlikte ciddi bir soruna yol açıyordu: yükseklik sabit kalırken genişlik
   mobilde çok daraldığı için, kapak fotoğrafının yalnızca ortadaki dar bir dilimi
   görünüyor, sol ve sağ kenarlar agresif şekilde kırpılıyordu. Sabit oran
   (aspect-ratio) kullanarak yükseklik genişlikle birlikte küçülüyor, böylece
   kırpma oranı tutarlı kalıyor. Mobil ve masaüstü için AYRI oran/boyut
   tanımlanır: mobilde kompakt, masaüstünde belirgin şekilde büyük bir banner
   hedeflenir (kullanıcı isteği: "mobilde küçük, masaüstünde büyük olmalı"). */
.profile-cover {
  aspect-ratio: 2.4 / 1; height: auto; min-height: 110px; max-height: 190px;
  background: var(--gradient-brand); background-size: cover; background-position: center; border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .profile-cover { aspect-ratio: 3.6 / 1; min-height: 260px; max-height: 380px; }
}
.profile-header { display: flex; align-items: flex-end; gap: 20px; padding: 0 20px; flex-wrap: wrap; }
.profile-avatar { width: 130px; height: 130px; border-radius: 50%; border: 5px solid var(--bg); object-fit: cover; box-shadow: var(--shadow-md); margin-top: -50px; flex-shrink: 0; }
/* ÖNEMLİ: İsim/kullanıcı adı bloğu, avatarla "alta hizalı" OLMAMALI — aksi halde
   kapak fotoğrafı karmaşık/büyük bir görsel olduğunda (örn. yüklenen bir manzara
   fotoğrafı) bio/konum gibi ekstra satırlar bloğu yukarı iter ve isim kapak
   fotoğrafının üzerine biner. Bunun yerine bloğu her zaman satırın EN ÜSTÜNE
   (dolayısıyla kapak fotoğrafının her zaman ALTINA) sabitliyoruz — kapak
   fotoğrafı ne kadar uzun/karmaşık olursa olsun isim asla üzerine binmez. */
.profile-header-info { flex: 1; min-width: 240px; align-self: flex-start; padding-top: 14px; }
.profile-username { color: var(--text-muted); margin: 2px 0 8px; }
.profile-bio { font-size: 0.9rem; margin-bottom: 10px; max-width: 480px; }
.profile-meta { display: flex; gap: 16px; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; flex-wrap: wrap; }
.profile-meta a { color: var(--ik-blue); }
.profile-stats { display: flex; gap: 22px; font-size: 0.88rem; }
.profile-stats strong { font-family: var(--font-display); }
.profile-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; }
.profile-posts { margin-top: 30px; }

.profile-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; max-width: 640px; margin-left: auto; margin-right: auto; }
.profile-tab-btn {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  font-size: 0.88rem; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
}
.profile-tab-btn:hover { color: var(--ik-turquoise); }
.profile-tab-btn.active { color: var(--ik-turquoise); border-bottom-color: var(--ik-turquoise); }
.profile-tab-count { background: var(--bg); color: var(--text-muted); font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.profile-tab-btn.active .profile-tab-count { background: var(--ik-turquoise); color: #fff; }

/* ==============================================================
   ARAMA SONUÇLARI / TAKİPÇİ LİSTESİ
   ============================================================== */
.search-section { max-width: 620px; margin: 0 auto 28px; }
.search-section-title { font-size: 0.95rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.search-section-title i { color: var(--ik-turquoise); }
.search-results-list { display: flex; flex-direction: column; gap: 2px; max-width: 560px; }
.search-result-item, .live-search-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); }
.search-result-item:hover { background: var(--surface); }
.search-result-item div { display: flex; flex-direction: column; }
.search-result-item span { font-size: 0.8rem; color: var(--text-muted); }

.follow-list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 560px; }
.follow-list-item-link { flex: 1; min-width: 0; }
.follow-list-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 560px) {
  .follow-list-item { flex-wrap: wrap; }
  .follow-list-item-actions { width: 100%; padding-left: 52px; }
}

/* ==============================================================
   AYARLAR
   ============================================================== */
.settings-page { max-width: 560px; margin: 0 auto; }
.settings-form { margin-top: 16px; }

/* ==============================================================
   BOŞ DURUM (Empty State)
   ============================================================== */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 2.4rem; color: var(--ik-turquoise); margin-bottom: 12px; }
.empty-state h3 { color: var(--text); }

/* ==============================================================
   FLASH MESAJLAR
   ============================================================== */
.flash-container { max-width: 640px; margin: 0 auto 16px; display: flex; flex-direction: column; gap: 10px; }
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.88rem;
  animation: flash-in 0.3s ease;
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.flash-success { background: #d1fae5; color: #065f46; }
.flash-error { background: #fee2e2; color: #991b1b; }
.flash-close { margin-left: auto; font-size: 1.1rem; color: inherit; opacity: 0.6; }
.flash-close:hover { opacity: 1; }

/* ==============================================================
   ADMİN PANELİ
   ============================================================== */
.admin-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; max-width: 1300px; margin: 0 auto; }
@media (max-width: 900px) { .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { position: static; } }

.admin-sidebar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 4px;
}
.admin-sidebar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; color: var(--ik-deep); padding: 8px 10px 16px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
[data-theme="dark"] .admin-sidebar-brand { color: var(--ik-turquoise-lt); }
.admin-sidebar-brand i { color: var(--ik-coral); }
.admin-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600; color: var(--text-muted); transition: background 0.2s, color 0.2s; }
.admin-nav-item:hover { background: var(--bg); color: var(--ik-turquoise); }
.admin-nav-item.active { background: var(--gradient-brand); color: #fff; }
.admin-nav-back { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 16px; }

.admin-content { min-width: 0; }
.admin-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 10px; }
.admin-back-link:hover { color: var(--ik-turquoise); }

.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 20px 0 28px; }
.admin-stat-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.admin-stat-card i { font-size: 1.4rem; color: var(--ik-turquoise); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 50%; }
.admin-stat-card strong { display: block; font-family: var(--font-display); font-size: 1.3rem; }
.admin-stat-card span { font-size: 0.78rem; color: var(--text-muted); }
.admin-stat-danger i { color: #dc2626; }
.admin-stat-highlight i { color: var(--ik-coral); }

.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .admin-two-col { grid-template-columns: 1fr; } }

.admin-panel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; overflow-x: auto; }
/* Toplu mesaj kartı: emoji paneli gibi kart sınırlarının DIŞINA taşarak
   görünmesi gereken açılır menüler içerdiği için, genel overflow-x:auto
   kısıtlaması burada geçersiz kılınır — aksi halde panel kartın içine
   sıkışıp kırpılır (kaydırma çubuklu, bozuk bir kutu gibi görünür). */
.admin-panel-card-broadcast { overflow: visible; }
.admin-panel-card h3 { font-size: 0.95rem; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.admin-panel-card h3 i { color: var(--ik-turquoise); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th { text-align: left; padding: 10px 12px; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid var(--border); white-space: nowrap; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-content-cell { max-width: 320px; }

.admin-user-cell { display: flex; align-items: center; gap: 8px; }
.admin-user-cell div { display: flex; flex-direction: column; }
.admin-user-cell span { font-size: 0.75rem; color: var(--text-muted); }

.admin-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: capitalize; }
.admin-badge-role-admin { background: #fef3c7; color: #92400e; }
.admin-badge-role-moderator { background: #dbeafe; color: #1e40af; }
.admin-badge-role-editor { background: #ede9fe; color: #5b21b6; }
.admin-badge-role-user { background: var(--bg); color: var(--text-muted); }
.admin-badge-status-active { background: #d1fae5; color: #065f46; }
.admin-badge-status-banned { background: #fee2e2; color: #991b1b; }
.admin-badge-status-suspended { background: #fef3c7; color: #92400e; }
.admin-badge-log { background: var(--bg); color: var(--ik-blue); }

.admin-actions-cell { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.admin-icon-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-muted); transition: background 0.2s, color 0.2s; }
.admin-icon-btn:hover { background: var(--bg); color: var(--ik-turquoise); }
.admin-icon-danger:hover { background: #fee2e2; color: #dc2626; }

.admin-filter-bar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-filter-bar input[type="text"] { flex: 1; min-width: 200px; margin-bottom: 0; }
.admin-filter-bar select { padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 0.9rem; }

.admin-bulk-bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin-bottom: 14px;
  background: rgba(20, 184, 166, 0.1); border: 1px solid var(--ik-turquoise); border-radius: var(--radius-md);
  font-size: 0.88rem;
}
.admin-checkbox-cell { width: 36px; text-align: center; }
.admin-checkbox-cell input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.admin-btn-danger { background: #dc2626; color: #fff; border: none; }
.admin-btn-danger:hover { background: #b91c1c; }

.admin-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 16px; }
.admin-media-item { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.admin-media-item img, .admin-media-item video { width: 100%; height: 100%; object-fit: cover; }
.admin-media-delete-btn {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
}
.admin-media-delete-btn:hover { background: #dc2626; }

.admin-page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-widget-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.admin-widget-link { font-size: 0.78rem; font-weight: 600; color: var(--ik-blue); white-space: nowrap; }
.admin-widget-link:hover { text-decoration: underline; }
.admin-trash-badge { background: #dc2626; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
/* Satır içi düzenleme formu (aktivite kayıtları, yorumlar, mesajlar sayfalarında
   ortak kullanılır): dar tablo hücresine sığması için giriş kutusu tam genişlik
   alıp üstte, butonlar ise altta küçük ve yan yana durur — böylece taşıp
   kaymak yerine her zaman düzenli görünür. */
.admin-log-edit-form { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-log-edit-form input[type="text"] { flex: 1 1 100%; min-width: 0; margin-bottom: 2px; padding: 6px 10px; font-size: 0.82rem; }
.admin-log-edit-form button { padding: 5px 12px; font-size: 0.74rem; white-space: nowrap; }

.admin-broadcast-btn { display: inline-flex; margin-bottom: 18px; }
.admin-media-indicator { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ik-turquoise); color: #fff; font-size: 0.6rem; margin-right: 6px; }
.admin-broadcast-recipient-info {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px;
  background: rgba(20, 184, 166, 0.1); border: 1px solid var(--ik-turquoise); border-radius: var(--radius-md);
  font-size: 0.88rem;
}
.admin-broadcast-recipient-info i { color: var(--ik-turquoise); font-size: 1.1rem; }

.broadcast-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.emoji-picker-wrap { position: relative; }
.emoji-picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  width: 320px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 10px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
}
.emoji-picker-item { font-size: 1.3rem; padding: 6px; border-radius: var(--radius-sm); text-align: center; line-height: 1; }
.emoji-picker-item:hover { background: var(--bg); }

.admin-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.admin-pagination a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; }
.admin-pagination a.active { background: var(--gradient-brand); color: #fff; border-color: transparent; }

.admin-user-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.admin-user-summary div { display: flex; flex-direction: column; }

.admin-log-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.admin-log-list li { font-size: 0.85rem; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.admin-log-list li:last-child { border-bottom: none; }
.admin-log-action { color: var(--ik-blue); font-weight: 600; }
.admin-log-time { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

select { padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 0.95rem; font-family: var(--font-body); }

/* ==============================================================
   PROFİL FOTOĞRAFI / KAPAK ÖNİZLEME + KALDIRMA
   ============================================================== */
.current-photo-preview { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px; background: var(--bg); border-radius: var(--radius-sm); }
.current-photo-preview-cover img { width: 100%; height: 80px; object-fit: cover; border-radius: var(--radius-sm); }
.current-photo-preview-cover { flex-direction: column; align-items: stretch; }
.remove-photo-label { margin: 0; font-weight: 500; font-size: 0.8rem; }

/* ==============================================================
   MESAJLAR
   ============================================================== */
.messages-page { display: grid; grid-template-columns: 320px 1fr; gap: 20px; height: calc(100vh - 160px); min-height: 480px; }
@media (max-width: 800px) { .messages-page { grid-template-columns: 1fr; height: auto; } .messages-empty-panel { display: none; } }

.messages-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-y: auto; display: flex; flex-direction: column; }
.messages-sidebar-header { padding: 18px 18px 10px; }
.messages-sidebar-header h2 { font-size: 1.05rem; }

.conversation-list { display: flex; flex-direction: column; }
.conversation-item { display: flex; align-items: center; border-top: 1px solid var(--border); position: relative; }
.conversation-item:hover, .conversation-item.active { background: var(--bg); }
.conversation-item-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex: 1; min-width: 0; }
.conversation-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conversation-info strong { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-preview { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.conversation-time { font-size: 0.7rem; color: var(--text-muted); }
.conversation-unread { background: var(--ik-coral); color: #fff; font-size: 0.68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }

.conversation-delete-form { padding-right: 10px; opacity: 0; transition: opacity 0.15s; }
.conversation-item:hover .conversation-delete-form { opacity: 1; }
.conversation-delete-btn { width: 30px; height: 30px; border-radius: 50%; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.conversation-delete-btn:hover { background: #fee2e2; color: #dc2626; }

.messages-empty-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.messages-empty-panel i { font-size: 2.4rem; color: var(--ik-turquoise); }

.chat-panel { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.chat-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.chat-bubble-row { display: flex; align-items: center; gap: 6px; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble-wrap { display: flex; flex-direction: column; max-width: 70%; }
.chat-bubble-row.mine .chat-bubble-wrap { align-items: flex-end; }
.chat-bubble-row.theirs .chat-bubble-wrap { align-items: flex-start; }
.chat-bubble { max-width: 100%; padding: 10px 14px; border-radius: 16px; font-size: 0.88rem; line-height: 1.4; position: relative; }
.chat-bubble-row.theirs .chat-bubble { background: var(--bg); border-bottom-left-radius: 4px; }
.chat-bubble-row.mine .chat-bubble { background: var(--gradient-brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble-time { display: block; font-size: 0.65rem; opacity: 0.65; margin-top: 4px; text-align: right; }
.chat-bubble-seen { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; padding-right: 4px; }
.chat-bubble-media { margin-bottom: 6px; border-radius: 10px; overflow: hidden; max-width: 220px; }
.chat-bubble-media img, .chat-bubble-media video { width: 100%; max-height: 260px; object-fit: cover; display: block; border-radius: 10px; }
.chat-bubble-delete {
  width: 26px; height: 26px; border-radius: 50%; color: var(--text-muted); font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.chat-bubble-row:hover .chat-bubble-delete { opacity: 1; }
.chat-bubble-delete:hover { background: #fee2e2; color: #dc2626; }
.chat-input-form { display: flex; gap: 10px; align-items: flex-end; padding: 14px 18px; border-top: 1px solid var(--border); }
.chat-input-form textarea { flex: 1; resize: none; max-height: 100px; }

/* ==============================================================
   LIGHTBOX (fotoğrafa tıklayınca büyüten, altında açıklama +
   beğen/yorum/paylaş seçenekleri gösteren, sağ/sol oklarla diğer
   gönderilerin fotoğraflarına geçiş yapılabilen tam ekran görüntüleyici)
   ============================================================== */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(7, 15, 18, 0.94);
  display: none; align-items: center; justify-content: center;
  animation: lightbox-fade-in 0.2s ease;
  padding: 20px;
}
.lightbox-overlay.visible { display: flex; }
@keyframes lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox-content {
  display: flex; max-width: 1100px; width: 100%; max-height: 88vh;
  background: var(--surface); border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-img-wrap { flex: 1 1 auto; background: #000; display: flex; align-items: center; justify-content: center; min-width: 0; }
.lightbox-img-wrap img { max-width: 100%; max-height: 88vh; width: auto; height: auto; object-fit: contain; display: block; }

.lightbox-caption {
  width: 320px; flex-shrink: 0; padding: 20px; overflow-y: auto;
  display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--border);
}
.lightbox-caption-author { margin-bottom: 12px; }
.lightbox-caption-text { font-size: 0.9rem; line-height: 1.5; margin-bottom: 14px; white-space: pre-wrap; }
.lightbox-caption .post-stats { margin-bottom: 4px; }
.lightbox-actions { margin-top: auto; padding-top: 10px; }

.lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 10;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }

.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: background 0.2s, opacity 0.2s;
  z-index: 10;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.28); }
.lightbox-nav:disabled { opacity: 0.25; cursor: default; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.75); font-size: 0.82rem; background: rgba(255,255,255,0.1);
  padding: 6px 14px; border-radius: 999px;
}

@media (max-width: 800px) {
  .lightbox-overlay { padding: 0; }
  .lightbox-content { flex-direction: column; max-height: 100vh; border-radius: 0; max-width: 100vw; }
  .lightbox-img-wrap { max-height: 46vh; }
  .lightbox-img-wrap img { max-height: 46vh; }
  .lightbox-caption { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 40vh; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.1rem; }
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}
/* ==============================================================
   GERİ DÖN BUTONU (gönderi detay sayfası — gönderi kartının hemen
   üstünde, sağa yaslı; bir önceki sayfaya, örn. Keşfet'e, döner)
   ============================================================== */
.post-detail-toolbar { max-width: 640px; margin: 0 auto 10px; display: flex; justify-content: flex-end; }
.back-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: background 0.2s, color 0.2s, transform 0.15s;
}
.back-btn:hover { background: var(--bg); color: var(--ik-turquoise); transform: translateX(-2px); }

.error-page { text-align: center; padding: 100px 20px; }
.error-page h1 { font-size: 5rem; color: var(--ik-turquoise); }

/* ==============================================================
   YÜKLEME İLERLEME POPUP'I (fotoğraf/video paylaşırken)
   ============================================================== */
.upload-progress-overlay {
  position: fixed; inset: 0; z-index: 3000; background: rgba(7, 15, 18, 0.75);
  display: none; align-items: center; justify-content: center;
}
.upload-progress-overlay.visible { display: flex; }
.upload-progress-box {
  background: var(--surface); border-radius: var(--radius-lg); padding: 32px 36px;
  width: 300px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.upload-progress-icon { font-size: 2rem; color: var(--ik-turquoise); margin-bottom: 10px; }
.upload-progress-box h3 { font-size: 1rem; margin-bottom: 18px; }
.upload-progress-bar-track { width: 100%; height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; margin-bottom: 10px; }
.upload-progress-bar-fill { height: 100%; width: 0%; background: var(--gradient-brand); border-radius: 999px; transition: width 0.15s ease; }
.upload-progress-percent { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); display: block; margin-bottom: 14px; }
.upload-progress-cancel-btn {
  display: block; margin: 0 auto; padding: 8px 22px; border-radius: 999px;
  background: var(--bg); color: var(--text); font-size: 0.82rem; font-weight: 600;
  border: 1px solid var(--border); transition: background 0.15s, color 0.15s;
}
.upload-progress-cancel-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* ==============================================================
   MOBİL UYUM
   ============================================================== */
@media (max-width: 640px) {
  /* Genel: yatay taşmayı kesin olarak engelle (herhangi bir öğe taşarsa bile sayfa kaymasın) */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* "Site hafif zoomlu görünüyor" sorunu: iOS Safari, yazı boyutu 16px'in
     ALTINDA olan bir input/textarea/select'e dokunulduğunda sayfayı otomatik
     olarak yakınlaştırır (zoom) — kullanıcı odağı bir alandan çıkardığında
     çoğu zaman eski haline tam dönmez, bu da "site zoomlanmış gibi duruyor"
     hissi verir. Aşağıdaki kural, sitedeki TÜM form elemanlarını mobilde en
     az 16px yaparak bu otomatik yakınlaştırmayı baştan engeller.
     (Masaüstünde bu kural geçerli değildir, orijinal daha küçük boyutlar kalır.) */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="url"], input[type="file"], textarea, select {
    font-size: 16px !important;
  }

  /* NAVBAR: mobilde 6 ikon + logo metni sığmıyordu, taşmaya ve kaymaya neden oluyordu.
     İkonları küçültüp aralıkları daraltarak, logo metnini kısaltarak düzeltiyoruz. */
  .navbar-search { display: none; }
  .mobile-search-toggle { display: flex; }
  /* Ana Sayfa / Keşfet / Mesajlar artık üst navbar'da değil, ekranın altında sabit
     duran bir uygulama tarzı menüde gösteriliyor (bkz. .mobile-bottom-nav) — bu
     yüzden üstteki navbar'daki karşılıkları mobilde gizlenir. */
  .nav-icon-desktop-only { display: none; }

  /* ALT NAVİGASYON ÇUBUĞU (uygulama tarzı): ekranın en altında sabit durur,
     içerik kaydırılsa bile yerinde kalır. iPhone'larda alttaki ev tuşu/çentik
     şeridiyle çakışmaması için "safe-area-inset-bottom" payı eklenir. */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 150;
    background: var(--bg-elevated);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid var(--border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(11, 79, 108, 0.08);
  }
  .mobile-bottom-nav-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    position: relative;
    transition: color 0.15s;
  }
  .mobile-bottom-nav-item i { font-size: 1.25rem; }
  .mobile-bottom-nav-item.active { color: var(--ik-turquoise); }
  .mobile-bottom-nav-item .notif-badge { top: 2px; right: 22%; }

  /* İçerik, sabit alt çubuğun ARKASINDA kalıp kapanmasın diye ana alana
     alttan boşluk (padding) eklenir — bu değer aşağıdaki ".app-main" kuralında
     (satır ~1098) geçerli kılınır, çünkü kaynak sırasına göre o kural bu
     satırdan SONRA gelip "padding" kısayoluyla bottom değerini ezerdi. */
  .navbar-search.mobile-active {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; max-width: none;
    background: var(--bg-elevated); padding: 10px 12px 12px; margin: 0;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 90;
  }
  .navbar-inner { padding: 10px 12px; gap: 8px; }
  .navbar-logo { font-size: 0.92rem; gap: 5px; }
  .navbar-logo-icon { width: 26px; height: 26px; }
  .navbar-logo strong { display: none; }
  .navbar-actions { gap: 1px; }
  .nav-icon { width: 34px; height: 34px; font-size: 0.92rem; }
  .notif-badge { min-width: 14px; height: 14px; font-size: 0.56rem; top: 0; right: 0; }
  .profile-trigger img { width: 32px; height: 32px; }

  /* Bildirim ve profil açılır kutuları: masaüstünde tetikleyici butona (zil/avatar)
     göre konumlanıyordu, ama mobilde bu buton ekranın sağ kenarında DEĞİL (yanında
     başka ikonlar var) — bu yüzden kutu ekranın soluna taşıp kırpılıyordu. Mobilde
     bunun yerine kutuyu doğrudan ekranın (viewport) kenarlarına sabitliyoruz, böylece
     tetikleyicinin konumundan bağımsız olarak asla taşmaz. */
  .notif-dropdown {
    position: fixed; top: 58px; left: 10px; right: 10px;
    width: auto; max-width: none; max-height: 70vh;
  }
  .profile-dropdown {
    position: fixed; top: 58px; left: 10px; right: 10px;
    width: auto; max-width: none;
  }

  .app-main { padding: 16px 12px calc(72px + env(safe-area-inset-bottom, 0px)); }
  .profile-avatar { width: 96px; height: 96px; margin-top: -40px; }
  .form-row { grid-template-columns: 1fr; }

  /* Gönderi oluşturma satırının mobilde alt alta düzgün sarmalanması */
  .create-post-actions { flex-wrap: wrap; }
  .location-input-wrap { min-width: 100%; order: 3; }

  /* Fotoğraf/keşfet ızgarası: sabit min 200px mobilde çok büyük tek sütuna
     sıkıştırıyordu, daha küçük kutucuklarla 2-3 sütun sığdırıyoruz */
  .explore-grid, .profile-posts-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 3px; }

  /* Lightbox: dar ekranlarda kenar boşluğu ve buton boyutları küçültülür */
  .lightbox-content { max-height: 100vh; }
  .lightbox-caption { padding: 14px; }

  /* Admin paneli istatistik kartları mobilde tek sütun daha okunaklı */
  .admin-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Mesajlaşma: sohbet balonları mobilde biraz daha geniş yer kaplayabilir */
  .chat-bubble { max-width: 82%; }
}

@media (max-width: 400px) {
  /* Çok dar ekranlarda (örn. eski/küçük telefonlar) navbar'ı bir kademe daha sadeleştir */
  .navbar-logo span { display: none; }
  .navbar-logo-icon { width: 28px; height: 28px; }
  .nav-icon { width: 32px; height: 32px; }
}

/* ==============================================================
   ŞİKAYET ET POPUP'I (profil sayfası)
   ============================================================== */
.report-modal-overlay {
  position: fixed; inset: 0; z-index: 500; background: rgba(7, 15, 18, 0.7);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.report-modal-overlay.visible { display: flex; }
.report-modal {
  background: var(--surface); border-radius: var(--radius-lg); padding: 24px;
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.report-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.report-modal-header h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; color: #dc2626; }
.report-modal-header button { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.report-modal-header button:hover { background: var(--bg); }
.report-reason-list { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.report-reason-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--text); cursor: pointer;
  margin-bottom: 0; text-transform: none; letter-spacing: normal;
}
.report-reason-item:has(input:checked) { border-color: #dc2626; background: #fee2e2; }
.report-reason-item input { width: auto; margin: 0; }
.report-details-label textarea { width: 100%; }
.report-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ==============================================================
   ADMİN: ŞİKAYET KARTLARI
   ============================================================== */
.report-card { display: flex; flex-direction: column; gap: 12px; }
.report-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.report-card-users { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-card-arrow { color: var(--text-muted); font-size: 0.8rem; }
.report-card-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.report-card-details { font-size: 0.88rem; background: var(--bg); padding: 10px 12px; border-radius: var(--radius-sm); width: 100%; }
.report-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report-card-actions form { display: contents; }
.report-message-panel { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.admin-nav-badge { margin-left: auto; background: #dc2626; color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }