/* ===== JojoBet official-style theme: green + gold ===== */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --primary: #fdc52a;           /* JojoBet gold/yellow */
  --primary-2: #f9b817;         /* deeper gold */
  --primary-hi: #ffe066;         /* hover highlight */
  --secondary: #0e3d20;          /* JojoBet header green */
  --secondary-light: #155a2f;
  --accent: #1d7a3e;             /* lighter green accent */
  --bg: #07210f;                 /* page bg deep green */
  --bg-2: #0a2914;               /* alt panel */
  --card: #0d3520;               /* card bg (JojoBet panel) */
  --card-2: #114229;             /* card hover */
  --card-dark: #061a0c;          /* almost black, kategori kart */
  --text: #f5faf6;
  --muted: #9bbba8;
  --border: #1d5c33;
  --border-strong: #2a7a47;
  --success: #4ade80;
  --danger: #ef4444;
  --shadow: 0 2px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.55);
  --gold-glow: 0 0 24px rgba(253,197,42,.35);
}
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(29,122,62,.45) 0%, transparent 60%),
    radial-gradient(ellipse 70% 40% at 80% 10%, rgba(14,61,32,.6) 0%, transparent 55%),
    linear-gradient(180deg, #07210f 0%, #03100a 100%);
  background-attachment: fixed;
  color: var(--text); line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: #ffe066; }
h1, h2, h3, h4 { color: var(--text); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
img { max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ===== Navbar ===== */
.navbar {
  background: linear-gradient(180deg, #0e3d20 0%, #07210f 100%);
  border-bottom: 2px solid var(--primary);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding: 14px 20px;
}

/* JojoBet style logo: JOJO (sarı düz) + ŞİKAYET (sarı kutu içinde) */
.logo {
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 22px;
  line-height: 1;
}
.logo:hover { color: inherit; }
.logo-mark {
  color: var(--primary);
  font-style: italic;
  text-shadow: 0 2px 8px rgba(253,197,42,.4);
}
.logo-tail {
  color: var(--primary);
  background: transparent;
  border: 2px solid var(--primary);
  padding: 4px 8px 3px;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 1.5px;
  margin-left: 2px;
}
.logo:hover .logo-mark { color: var(--primary-hi); }
.logo:hover .logo-tail { border-color: var(--primary-hi); color: var(--primary-hi); }

/* Hero içi arama — Şikayetvar tarzı beyaz pill + yeşil "Ara" butonu */
.hero-search {
  position: relative;                            /* Ara butonu absolute olarak içeride sağa yapışacak */
  display: flex; align-items: center;
  width: 100%; max-width: 620px;
  height: 60px;
  margin: 0 auto 30px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;                              /* kenar yumuşaklığı için pill'in dışına taşmasın */
}
.hero-search-icon {
  position: absolute; top: 50%; left: 22px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #5a4b8a;
  pointer-events: none;
}
.hero-search input,
.hero-search input[type="text"] {
  flex: 1; min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 130px 0 56px;                       /* sol: ikon için; sağ: Ara butonu için */
  background: #ffffff !important;
  border: none !important;
  outline: none;
  color: #1f2937 !important;
  font-size: 15px;
  font-family: inherit;
  border-radius: 999px;
  box-shadow: none !important;
}
.hero-search input::placeholder {
  color: #9aa3b2; font-weight: 500;
}
.hero-search button {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);                  /* dikey orta hizalama */
  margin: 0 !important;                          /* genel form button margin-top'u sıfırla */
  height: calc(100% - 12px);
  padding: 0 30px;
  background: var(--accent);
  color: #ffffff; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, box-shadow .15s;
}
.hero-search button:hover {
  background: #2a9655;
  box-shadow: 0 4px 14px rgba(42,150,85,.4);
  transform: translateY(-50%);                  /* hover'da da merkezde kalsın */
}
@media (max-width: 520px) {
  .hero-search { height: 52px; }
  .hero-search input { padding: 0 96px 0 50px; font-size: 14px; }
  .hero-search button { padding: 0 18px; font-size: 13px; }
}

.nav-links { display: flex; align-items: center; gap: 14px; }
.nav-links > a { font-weight: 600; font-size: 14px; color: var(--text); text-transform: uppercase; letter-spacing: .3px; }
.nav-links > a:hover { color: var(--primary); }
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-name {
  padding: 6px 12px; background: rgba(253,197,42,.12);
  border: 1px solid var(--primary); color: var(--primary) !important;
  border-radius: 20px; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.badge-admin {
  background: var(--primary); color: #0d3520; padding: 1px 7px; border-radius: 8px;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
}
.logout { color: var(--muted); font-size: 13px; }
.logout:hover { color: var(--primary); }

/* ===== Buttons ===== */
.btn {
  display: inline-block; padding: 10px 22px; border-radius: 8px;
  font-weight: 800; font-size: 13px; cursor: pointer; border: none; transition: all .15s;
  text-transform: uppercase; letter-spacing: .5px;
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  color: #0d3520;
  box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--primary-hi) 0%, var(--primary) 100%); transform: translateY(-1px); box-shadow: var(--gold-glow), 0 4px 12px rgba(0,0,0,.3); }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); padding: 8px 20px; }
.btn-outline:hover { background: var(--primary); color: #0d3520; }
.btn-hero {
  padding: 18px 42px; font-size: 16px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  color: #0d3520; border-radius: 10px;
  box-shadow: var(--gold-glow), 0 6px 20px rgba(0,0,0,.4);
}
.btn-hero:hover { background: linear-gradient(180deg, var(--primary-hi) 0%, var(--primary) 100%); transform: translateY(-2px); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-link { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0; }
.btn-danger { color: var(--danger); }

/* ===== Flash ===== */
.flash { padding: 12px 20px; border-radius: 8px; margin: 16px auto; font-weight: 600; }
.flash-success { background: rgba(74,222,128,.15); color: #86efac; border-left: 4px solid var(--success); }
.flash-error { background: rgba(239,68,68,.15); color: #fca5a5; border-left: 4px solid var(--danger); }

/* ===== Main ===== */
.main { padding: 24px 20px 60px; }

/* ===== Hero ===== */
.hero {
  background:
    linear-gradient(135deg, rgba(13,53,32,.95) 0%, rgba(7,33,15,.92) 100%),
    radial-gradient(circle at 18% 50%, rgba(253,197,42,.22), transparent 45%),
    radial-gradient(circle at 82% 50%, rgba(29,122,62,.5), transparent 50%);
  color: var(--text); padding: 64px 24px; text-align: center; border-radius: 14px;
  margin-bottom: 24px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(253,197,42,.04) 22px 23px),
    radial-gradient(circle at 50% 120%, rgba(253,197,42,.18), transparent 50%);
  pointer-events: none;
}
.hero-content { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.hero h1 {
  color: var(--text); font-size: 44px; margin-bottom: 14px; font-weight: 900;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.hero h1 span, .hero h1 strong { color: var(--primary); }
.hero p { font-size: 17px; color: #d6eadc; margin-bottom: 30px; }
.hero-stats {
  display: flex; justify-content: center; gap: 14px; margin-bottom: 32px; flex-wrap: wrap;
}
.stat {
  text-align: center; min-width: 130px;
  background: rgba(0,0,0,.3); padding: 14px 22px; border-radius: 10px;
  border: 1px solid var(--border);
}
.stat strong { font-size: 28px; display: block; color: var(--primary); font-weight: 900; }
.stat span { color: #d6eadc; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; }

/* ===== Categories (JojoBet pill style) ===== */
.categories-bar {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 16px;
  overflow-x: auto;
}
.cat-pill {
  padding: 8px 18px;
  background: var(--card-dark);
  border: 1px solid var(--border);
  color: var(--text) !important;
  border-radius: 24px; font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.cat-pill:hover {
  border-color: var(--primary); color: var(--primary) !important;
}
.cat-pill.active {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  color: #0d3520 !important; border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(253,197,42,.4);
}

/* ===== Status tags (Yeni / İnceleniyor / Çözüldü) ===== */
.status-tag {
  padding: 4px 12px; border-radius: 12px;
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid transparent;
}
.status-open       { background: rgba(239,68,68,.18); color: #fca5a5; border-color: rgba(239,68,68,.4); }
.status-progress   { background: rgba(253,197,42,.18); color: var(--primary); border-color: rgba(253,197,42,.5); }
.status-resolved   { background: rgba(74,222,128,.18); color: #86efac; border-color: rgba(74,222,128,.4); }

/* ===== Admin status form ===== */
.status-form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 14px;
  background: rgba(253,197,42,.06);
  border: 1px dashed rgba(253,197,42,.4); border-radius: 8px;
}
.status-form label { margin: 0; flex: 1 1 100%; }
.status-form select { width: auto; flex: 1; min-width: 180px; }
.status-form button { margin-top: 0; }


/* ===== Layout ===== */
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.section-header h2 { margin: 0; font-size: 22px; color: var(--text); }
.sort-tabs { display: flex; gap: 4px; background: var(--card); padding: 4px; border-radius: 8px; border: 1px solid var(--border); }
.sort-tabs a { padding: 7px 16px; border-radius: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.sort-tabs a:hover { color: var(--primary); }
.sort-tabs a.active { background: var(--primary); color: #0a1f17; }

/* ===== Complaint Card ===== */
.complaint-card {
  display: flex; background: var(--card); border-radius: 10px; margin-bottom: 14px;
  box-shadow: var(--shadow); overflow: hidden;
  border: 1px solid var(--border);
  transition: all .2s;
}
.complaint-card:hover {
  background: var(--card-2);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.vote-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25); padding: 16px 14px; min-width: 74px;
  border-right: 1px solid var(--border);
}
.vote-score { font-size: 24px; font-weight: 800; color: var(--primary); }
.vote-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.card-body { flex: 1; padding: 16px 20px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; align-items: center; font-size: 12px; }
.brand-tag {
  background: var(--primary); color: #0a1f17 !important; padding: 4px 12px;
  border-radius: 12px; font-weight: 700; font-size: 12px;
}
.brand-tag:hover { background: #ffe066; }
.cat-tag {
  background: var(--bg-2); color: var(--muted) !important; padding: 4px 12px;
  border-radius: 12px; border: 1px solid var(--border); font-size: 12px;
}
.time { color: var(--muted); }
.card-body h3 { font-size: 18px; margin: 4px 0 8px; }
.card-body h3 a { color: var(--text); }
.card-body h3 a:hover { color: var(--primary); }
.card-excerpt { color: #b8cec0; font-size: 14px; margin: 6px 0; }
.card-footer { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 8px; }
.read-more { margin-left: auto; color: var(--primary); font-weight: 700; }
.read-more:hover { color: #ffe066; }

.empty {
  padding: 40px; text-align: center; color: var(--muted);
  background: var(--card); border-radius: 10px; box-shadow: var(--shadow);
  border: 1px dashed var(--border);
}

/* ===== Sidebar ===== */
.widget {
  background: var(--card); padding: 18px; border-radius: 10px;
  box-shadow: var(--shadow); margin-bottom: 16px;
  border: 1px solid var(--border);
}
.widget h3 { font-size: 15px; margin-bottom: 12px; color: var(--primary); text-transform: uppercase; letter-spacing: .5px; }
.brand-list { list-style: none; padding: 0; margin: 0; }
.brand-list li {
  display: flex; justify-content: space-between; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.brand-list li:last-child { border-bottom: none; }
.brand-list li a { color: var(--text); }
.brand-list li a:hover { color: var(--primary); }
.brand-list li span { background: var(--bg-2); color: var(--primary); padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.widget-cta {
  background: linear-gradient(135deg, var(--primary) 0%, #ffd54a 100%);
  border: none;
  color: #0a1f17;
}
.widget-cta h3, .widget-cta p { color: #0a1f17; }
.widget-cta .btn { background: #0a1f17; color: var(--primary); }
.widget-cta .btn:hover { background: #14543f; color: var(--primary); }

/* ===== Complaint Detail ===== */
.complaint-detail {
  background: var(--card); padding: 30px; border-radius: 10px; box-shadow: var(--shadow);
  margin-bottom: 20px; border: 1px solid var(--border);
}
.detail-meta { display: flex; gap: 10px; margin-bottom: 14px; font-size: 13px; flex-wrap: wrap; align-items: center; }
.complaint-detail h1 { font-size: 30px; margin-bottom: 12px; color: var(--text); }
.detail-author { color: var(--muted); font-size: 14px; margin-bottom: 18px; display: flex; gap: 10px; }
.detail-author a { color: var(--primary); }
.detail-body { font-size: 16px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 12px; color: #d8e8df; }
.detail-image { display: block; max-width: 100%; border-radius: 8px; margin-top: 16px; border: 1px solid var(--border); }

.vote-bar {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--bg-2); border-radius: 8px; margin-top: 20px;
  border: 1px solid var(--border);
}
.vote-btn {
  padding: 9px 20px; border: 1px solid var(--border-strong); background: var(--card);
  border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--text); transition: all .15s;
}
.vote-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.vote-btn.active { background: var(--primary); color: #0a1f17; border-color: var(--primary); }
.vote-btn:disabled { opacity: .5; cursor: not-allowed; }
.vote-score-big { font-size: 24px; font-weight: 800; color: var(--primary); min-width: 30px; text-align: center; }
.inline-form { margin-left: auto; }

/* ===== Comments ===== */
.comments-section { background: var(--card); padding: 24px; border-radius: 10px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.comments-section h2 { color: var(--text); }
.comment-form { margin: 16px 0 24px; }
.comment-form textarea {
  width: 100%; padding: 12px; border: 1px solid var(--border-strong);
  background: var(--bg-2); color: var(--text);
  border-radius: 8px; resize: vertical; font-family: inherit; font-size: 14px;
}
.comment-form textarea:focus { border-color: var(--primary); outline: none; }
.comment-form button { margin-top: 8px; }
.comment {
  padding: 14px 16px; border-left: 3px solid var(--border-strong);
  background: var(--bg-2); border-radius: 6px; margin-bottom: 12px;
}
.comment.brand-reply {
  border-left-color: var(--primary);
  background: rgba(245,197,24,.08);
}
.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.comment-head strong { color: var(--text); }
.comment p { margin: 0; white-space: pre-wrap; color: #d8e8df; }
.badge { background: var(--primary); color: #0a1f17; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

/* ===== Forms ===== */
.auth-box, .form-box {
  max-width: 500px; margin: 30px auto; background: var(--card);
  padding: 36px; border-radius: 12px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-strong);
}
.form-box { max-width: 720px; }
.auth-box h1, .form-box h1 { margin-bottom: 8px; color: var(--text); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.demo-creds { margin-top: 18px; padding: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--muted); }
.demo-creds strong { color: var(--primary); }
form label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 14px; color: var(--text); }
form input, form textarea, form select {
  width: 100%; padding: 11px 14px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 6px; font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .15s;
}
form input::placeholder, form textarea::placeholder { color: var(--muted); }
form input:focus, form textarea:focus, form select:focus { border-color: var(--primary); }
form button { margin-top: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

/* ===== Brand grid ===== */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 20px; }
.brand-card {
  background: var(--card); padding: 26px 16px; border-radius: 10px; box-shadow: var(--shadow);
  text-align: center; transition: all .2s;
  border: 1px solid var(--border);
  color: var(--text);
}
.brand-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: var(--primary);
  color: var(--primary);
}
.brand-card h3 { color: var(--text); }
.brand-card:hover h3 { color: var(--primary); }
.brand-icon { font-size: 38px; margin-bottom: 8px; }
.brand-card h3 { font-size: 16px; margin: 6px 0; }
.brand-count { font-size: 12px; color: var(--muted); margin-top: 8px; font-weight: 600; }

.brand-header {
  display: flex; align-items: center; gap: 20px; padding: 28px;
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 20px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
}
.brand-header-icon {
  font-size: 50px; background: var(--bg-2); width: 90px; height: 90px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--primary);
}
.brand-header h1 { margin-bottom: 6px; color: var(--text); }
.brand-stats { margin-left: auto; display: flex; gap: 30px; }
.brand-stats div { text-align: center; }
.brand-stats strong { font-size: 26px; display: block; color: var(--primary); font-weight: 800; }
.brand-stats span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

/* ===== Profile ===== */
.profile-header {
  display: flex; align-items: center; gap: 20px; padding: 28px;
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 20px;
  border: 1px solid var(--border);
}
.avatar-big {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #ffd54a);
  color: #0a1f17;
  display: flex; align-items: center; justify-content: center; font-size: 38px;
  border: 2px solid var(--primary);
}
.profile-header h1 { color: var(--text); }

/* ===== Error pages ===== */
.error-page { text-align: center; padding: 80px 20px; }
.error-page h1 { font-size: 90px; color: var(--primary); font-weight: 800; }
.error-page p { color: var(--muted); font-size: 18px; margin-bottom: 24px; }

/* ===== Footer ===== */
.footer {
  background: linear-gradient(180deg, #0a2b20 0%, #050d09 100%);
  color: #9bb3a4; margin-top: 60px; padding: 50px 0 0;
  border-top: 2px solid var(--primary);
}
.footer-logo { margin-bottom: 14px; font-size: 20px; }
.footer-tag { color: #9bb3a4; font-size: 14px; line-height: 1.6; max-width: 360px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-bottom: 30px; }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } }
.footer h4 { color: var(--primary); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { padding: 5px 0; }
.footer a { color: #9bb3a4; }
.footer a:hover { color: var(--primary); }
.footer-bottom { background: rgba(0,0,0,.4); padding: 14px 0; font-size: 13px; text-align: center; border-top: 1px solid var(--border); }

.page { background: var(--card); padding: 36px; border-radius: 12px; box-shadow: var(--shadow); max-width: 800px; margin: 0 auto; border: 1px solid var(--border); }
.page h1, .page h2 { color: var(--text); }
.page p { color: #cfe4d8; }
.page ol li { margin: 8px 0; color: #cfe4d8; }

/* ===== Trust Metrics (hero altı kartlar) ===== */
.trust-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 720px; margin: 28px auto 0;
}
.trust-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  backdrop-filter: blur(4px);
  transition: transform .15s, border-color .15s;
}
.trust-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.trust-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-text { display: flex; flex-direction: column; line-height: 1.2; }
.trust-text strong { font-size: 20px; color: var(--text); font-weight: 800; }
.trust-text span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-top: 3px; }
@media (max-width: 720px) {
  .trust-metrics { grid-template-columns: 1fr; max-width: 420px; }
}

/* ===== Status filter pills (Tümü / Çözüme Ulaşanlar / İnceleniyor / ...) ===== */
.status-filters {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px;
}
.filter-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text) !important;
  font-size: 13px; font-weight: 600;
  transition: all .15s;
  white-space: nowrap;
}
.filter-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.filter-pill:hover {
  border-color: var(--primary);
  background: var(--card-2);
}
.filter-pill.active {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  color: #0d3520 !important;
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgba(253,197,42,.4);
}

/* ===== Yeni şikayet kartı (cv-card) ===== */
.cv-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  border-color: var(--border-strong);
}

.cv-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.cv-author { display: flex; align-items: center; gap: 10px; }
.cv-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color: #0d3520; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.cv-author-name { color: var(--text); font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.cv-time { color: var(--muted); font-size: 12px; }

.cv-badge {
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.cv-badge-open       { background: rgba(239,68,68,.18); color: #fca5a5; border-color: rgba(239,68,68,.45); }
.cv-badge-progress   { background: rgba(253,197,42,.20); color: var(--primary); border-color: rgba(253,197,42,.55); }
.cv-badge-resolved   { background: rgba(74,222,128,.20); color: #86efac; border-color: rgba(74,222,128,.5); box-shadow: 0 0 16px rgba(74,222,128,.2); }

.cv-title-link { text-decoration: none; }
.cv-title {
  color: var(--text); font-size: 18px; font-weight: 700;
  margin: 4px 0 8px; line-height: 1.35;
  transition: color .15s;
}
.cv-title-link:hover .cv-title { color: var(--primary); }

.cv-excerpt {
  color: #cfe4d8; font-size: 14.5px; line-height: 1.6;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cv-readmore { color: var(--primary); font-size: 13px; font-weight: 700; }
.cv-readmore:hover { color: var(--primary-hi); }

/* Marka yanıt baloncuğu */
.brand-reply-box {
  display: flex; gap: 12px;
  margin-top: 14px; padding: 14px;
  background: rgba(253,197,42,.06);
  border: 1px solid rgba(253,197,42,.25);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
}
.brand-reply-logo {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #0d3520; font-weight: 900; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  font-style: italic;
}
.brand-reply-body { flex: 1; min-width: 0; }
.brand-reply-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.brand-reply-head strong { color: var(--primary); font-size: 13px; }
.brand-reply-tag {
  background: var(--primary); color: #0d3520;
  padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.brand-reply-time { color: var(--muted); font-size: 11px; margin-left: auto; }
.brand-reply-body p {
  margin: 0; color: #e5f0e9; font-size: 13.5px; line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer (görüntüleme, yorum, ben de yaşıyorum) */
.cv-foot {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cv-stat {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 13px; font-weight: 600;
}
.cv-me-too-form { margin-left: auto; }
.cv-me-too {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 7px 14px;
  background: rgba(253,197,42,.08);
  border: 1px solid rgba(253,197,42,.35);
  color: var(--primary) !important;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.cv-me-too strong {
  background: var(--primary); color: #0d3520;
  padding: 1px 8px; border-radius: 10px; font-size: 12px;
  margin-left: 4px;
}
.cv-me-too:hover {
  background: rgba(253,197,42,.18);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(3, 16, 10, .75);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.modal-backdrop[hidden] { display: flex; }    /* hidden tutarken layout korunsun, opacity ile gizliyoruz */
.modal-backdrop.is-open {
  opacity: 1; pointer-events: auto;
}
.modal-backdrop[hidden]:not(.is-open) {
  display: none !important;
}
.modal-card {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 32px;
  width: 100%; max-width: 560px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  position: relative;
  max-height: 90vh; overflow-y: auto;
  transform: translateY(20px) scale(.98);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.modal-backdrop.is-open .modal-card {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--muted); font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.modal-close:hover { background: rgba(255,255,255,.08); color: var(--text); }
.modal-card h2 { color: var(--text); margin-bottom: 6px; font-size: 22px; }
.modal-sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.modal-form label { display: block; margin: 12px 0 6px; font-weight: 600; font-size: 13px; color: var(--text); }
.modal-form input[type="text"], .modal-form textarea {
  width: 100%; padding: 11px 14px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px; font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .15s;
}
.modal-form input[type="text"]:focus, .modal-form textarea:focus { border-color: var(--primary); }
.modal-form textarea { resize: vertical; }
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 22px;
}

/* Rating yıldızları */
.rating-stars { display: flex; gap: 4px; }
.rating-stars .star {
  background: transparent; border: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: #2a4a37;
  padding: 0 2px; transition: color .12s, transform .12s;
}
.rating-stars .star:hover, .rating-stars .star.is-active { color: var(--primary); }
.rating-stars .star:hover { transform: scale(1.15); }

/* selection */
::selection { background: var(--primary); color: #0a1f17; }

/* ==========================================================================
   MOBILE RESPONSIVE — kapsamlı breakpoint'ler
   ========================================================================== */

/* ---- Tablet ve altı (≤ 900px) ---- */
@media (max-width: 900px) {
  .container { padding: 0 14px; }
  .main { padding: 16px 12px 50px; }

  /* Navbar — link satırı küçülsün */
  .nav-inner { gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
  .nav-links { gap: 10px; flex-wrap: wrap; }
  .nav-links > a { font-size: 13px; }
  .nav-links .btn { padding: 8px 14px; font-size: 12px; }

  /* Hero */
  .hero { padding: 40px 18px; border-radius: 12px; }
  .hero h1 { font-size: 32px; line-height: 1.15; }
  .hero p { font-size: 15px; margin-bottom: 22px; }
  .btn-hero { padding: 14px 30px; font-size: 15px; }

  /* Layout (sidebar alta) — zaten 900px breakpoint var, burada da koru */
  .layout { grid-template-columns: 1fr; gap: 18px; }

  /* Kategoriler/sort tabs */
  .categories-bar { padding: 10px 0; }
  .section-header { gap: 8px; }
  .section-header h2 { font-size: 19px; }
  .sort-tabs a { padding: 6px 12px; font-size: 12px; }
}

/* ---- Tablet portrait & büyük telefon (≤ 720px) ---- */
@media (max-width: 720px) {
  .hero { padding: 32px 16px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 14px; }

  /* Hero search — yine de kompakt kalsın */
  .hero-search { height: 54px; max-width: 100%; }
  .hero-search-icon { left: 18px; }
  .hero-search-icon svg { width: 18px; height: 18px; }
  .hero-search input { padding: 0 108px 0 48px; font-size: 14px; }
  .hero-search button { padding: 0 22px; font-size: 14px; }

  /* Trust kartları zaten 720'de tek kolon olur ama daha sıkı yapalım */
  .trust-metrics { max-width: 100%; gap: 10px; margin-top: 20px; }
  .trust-card { padding: 12px 14px; }
  .trust-icon { width: 38px; height: 38px; }
  .trust-icon svg { width: 20px; height: 20px; }
  .trust-text strong { font-size: 17px; }
  .trust-text span { font-size: 10px; }

  /* Status filter pills — yatay scroll */
  .status-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px 16px;
    padding: 0 14px 6px;
    scrollbar-width: none;
  }
  .status-filters::-webkit-scrollbar { display: none; }
  .filter-pill { padding: 7px 14px; font-size: 12px; flex-shrink: 0; }
}

/* ---- Mobil (≤ 600px) ---- */
@media (max-width: 600px) {
  /* Navbar yığınlama */
  .nav-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .nav-links {
    justify-content: center;
    width: 100%;
    gap: 8px;
    row-gap: 8px;
  }
  .nav-links > a:not(.btn):not(.user-name):not(.logout) {
    /* asıl menü linkleri */
  }
  .user-menu { gap: 6px; margin-left: 0; }
  .user-name { font-size: 12px; padding: 5px 10px; }

  /* Hero */
  .hero h1 { font-size: 24px; }
  .hero h1 br { display: none; }
  .hero p { font-size: 13.5px; }
  .btn-hero { padding: 13px 24px; font-size: 14px; width: 100%; max-width: 320px; }

  /* Kategori kartları */
  .brand-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .brand-card { padding: 18px 10px; }
  .brand-card h3 { font-size: 14px; }
  .brand-icon { font-size: 28px; }

  /* Complaint card (klasik liste — sikayet detay sayfası vb.) */
  .complaint-card { flex-direction: row; }
  .vote-col { min-width: 56px; padding: 10px 6px; }
  .vote-score { font-size: 19px; }
  .vote-label { font-size: 9px; }
  .card-body { padding: 12px 14px; }
  .card-body h3 { font-size: 16px; }
  .card-excerpt { font-size: 13px; }
  .card-footer { gap: 10px; font-size: 12px; flex-wrap: wrap; }

  /* CV-card (yeni şikayet kartı) */
  .cv-card { padding: 16px 14px; border-radius: 13px; }
  .cv-head { gap: 8px; }
  .cv-avatar { width: 36px; height: 36px; font-size: 14px; }
  .cv-author-name { font-size: 13px; }
  .cv-time { font-size: 11px; }
  .cv-badge { padding: 4px 9px; font-size: 10px; }
  .cv-title { font-size: 16px; line-height: 1.3; }
  .cv-excerpt { font-size: 13.5px; line-height: 1.55; }
  .cv-foot { gap: 10px; flex-wrap: wrap; padding-top: 10px; }
  .cv-stat { font-size: 12px; }
  .cv-me-too {
    margin-left: auto;
    padding: 6px 11px; font-size: 12px;
  }
  .cv-me-too span { display: none; }            /* "Ben de yaşıyorum" yerine sadece ikon + sayı */
  .cv-me-too::after { content: "+1"; font-weight: 800; }
  .cv-me-too strong { font-size: 11px; padding: 1px 7px; }

  /* Marka yanıt baloncuğu */
  .brand-reply-box { padding: 12px; gap: 10px; margin-top: 12px; }
  .brand-reply-logo { width: 36px; height: 36px; font-size: 11px; }
  .brand-reply-head strong { font-size: 12px; }
  .brand-reply-tag { font-size: 9px; padding: 2px 6px; }
  .brand-reply-time { font-size: 10px; flex-basis: 100%; margin-left: 0; }
  .brand-reply-body p { font-size: 12.5px; }

  /* Complaint detail */
  .complaint-detail { padding: 20px; }
  .complaint-detail h1 { font-size: 22px; }
  .detail-body { font-size: 15px; }
  .vote-bar { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .vote-bar .inline-form { margin-left: 0; width: 100%; }
  .vote-bar .btn { width: 100%; }

  /* Yorumlar */
  .comments-section { padding: 18px; }
  .comment { padding: 12px; }

  /* Auth/Form kutuları */
  .auth-box, .form-box { padding: 24px 20px; margin: 16px 12px; }
  .auth-box h1, .form-box h1 { font-size: 20px; }

  /* Brand/Profile header */
  .brand-header, .profile-header {
    padding: 20px; gap: 14px;
    flex-direction: column; text-align: center;
  }
  .brand-header-icon, .avatar-big { width: 70px; height: 70px; font-size: 30px; }
  .brand-stats { margin-left: 0; gap: 18px; justify-content: center; flex-wrap: wrap; }
  .brand-stats strong { font-size: 22px; }
  .brand-stats span { font-size: 10px; }

  /* Sidebar widget */
  .widget { padding: 16px; }
  .widget h3 { font-size: 14px; }

  /* Sort tabs — scrollable */
  .sort-tabs { overflow-x: auto; }

  /* Hata sayfaları */
  .error-page { padding: 50px 16px; }
  .error-page h1 { font-size: 64px; }
  .error-page p { font-size: 15px; }

  /* Modal */
  .modal-backdrop { padding: 12px; align-items: flex-end; }
  .modal-card {
    max-width: 100%;
    padding: 22px 18px;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
  }
  .modal-card h2 { font-size: 19px; }
  .modal-sub { font-size: 13px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .rating-stars .star { font-size: 28px; }
}

/* ---- Küçük telefon (≤ 380px) ---- */
@media (max-width: 380px) {
  .logo { font-size: 18px; }
  .logo-tail { font-size: 12px; padding: 3px 6px 2px; }
  .nav-links > a { font-size: 12px; }
  .nav-links .btn { padding: 7px 11px; font-size: 11px; }

  .hero h1 { font-size: 21px; }
  .hero-search { height: 50px; }
  .hero-search input { padding: 0 92px 0 42px; font-size: 13px; }
  .hero-search-icon { left: 14px; }
  .hero-search button { padding: 0 16px; font-size: 12px; }

  .trust-text strong { font-size: 15px; }
  .trust-text span { font-size: 9px; }

  .cv-card { padding: 14px 12px; }
  .cv-title { font-size: 15px; }
}

/* ---- Touch device tweak — hover yerine active state ---- */
@media (hover: none) {
  .cv-card:hover, .trust-card:hover, .brand-card:hover, .complaint-card:hover {
    transform: none;
  }
  .btn-primary:hover, .btn-hero:hover { transform: none; }
}


/* Header icon buttons */
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:inherit;transition:background .15s}
.icon-btn:hover{background:rgba(255,255,255,.1)}
.icon-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;background:#ef4444;color:#fff;border-radius:9px;font-size:11px;font-weight:700;line-height:18px;text-align:center;border:2px solid #1a1a2e;box-sizing:content-box}
.icon-badge.static-badge{position:static;display:inline-block;border:none;margin-left:8px}

/* Notifications */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:1rem;flex-wrap:wrap}
.notif-list{list-style:none;padding:0;margin:0;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}
.notif-item{border-bottom:1px solid #e5e7eb}
.notif-item:last-child{border-bottom:none}
.notif-item.is-unread{background:rgba(99,102,241,.06)}
.notif-link{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;color:inherit;text-decoration:none}
.notif-link:hover{background:rgba(0,0,0,.03)}
.notif-icon{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:#eef2ff}
.notif-type-brand_reply{background:#fef3c7}.notif-type-status_change{background:#d1fae5}.notif-type-rating_request{background:#fce7f3}.notif-type-message{background:#dbeafe}
.notif-body{flex:1;min-width:0}
.notif-body strong{display:block;margin-bottom:2px}
.notif-body p{margin:0 0 4px;color:#555;font-size:14px}
.notif-dot{width:10px;height:10px;border-radius:50%;background:#6366f1;flex-shrink:0;margin-top:8px}
.empty{text-align:center;padding:3rem 1rem;color:#6b7280;background:#f9fafb;border-radius:12px}

/* Messages */
.conv-list{list-style:none;padding:0;margin:1rem 0 0;background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden}
.conv-item{border-bottom:1px solid #e5e7eb}
.conv-item:last-child{border-bottom:none}
.conv-item.is-unread{background:rgba(99,102,241,.05)}
.conv-link{display:flex;align-items:center;gap:12px;padding:14px 16px;color:inherit;text-decoration:none}
.conv-link:hover{background:rgba(0,0,0,.03)}
.conv-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0}
.conv-body{flex:1;min-width:0}
.conv-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.conv-preview{margin:4px 0 0;color:#6b7280;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chat-page{max-width:760px;margin:0 auto}
.chat-header{display:flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb;margin-bottom:16px}
.back-link{color:#6366f1;text-decoration:none;font-weight:600}
.chat-title{display:flex;align-items:center;gap:8px}
.chat-thread{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:12px;margin-bottom:12px;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}
.chat-msg{display:flex}.chat-msg.mine{justify-content:flex-end}.chat-msg.theirs{justify-content:flex-start}
.chat-bubble{max-width:72%;padding:10px 14px;border-radius:16px;background:#fff;border:1px solid #e5e7eb}
.chat-msg.mine .chat-bubble{background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;border-color:transparent}
.chat-msg.mine .chat-bubble .muted,.chat-msg.mine .chat-bubble .chat-time,.chat-msg.mine .chat-bubble .chat-ref{color:rgba(255,255,255,.85)}
.chat-bubble p{margin:4px 0;word-wrap:break-word}
.chat-ref{display:inline-block;margin-bottom:4px;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.05);text-decoration:none}
.chat-msg.mine .chat-ref{background:rgba(255,255,255,.18)}
.chat-time{display:block;margin-top:4px;font-size:11px}
.chat-form{display:flex;gap:8px;align-items:flex-end}
.chat-form textarea{flex:1;padding:10px;border:1px solid #e5e7eb;border-radius:10px;font-family:inherit;resize:vertical;min-height:44px}

/* Settings */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem;margin-top:1.5rem}
.settings-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:1.25rem 1.25rem 1.5rem}
.settings-card h2{margin-top:0;margin-bottom:1rem;font-size:1.1rem}
.form-grid{display:flex;flex-direction:column;gap:12px}
.form-grid label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px}
.form-grid input[type='text'],.form-grid input[type='email'],.form-grid input[type='tel'],.form-grid input[type='password'],.form-grid textarea{padding:9px 11px;border:1px solid #e5e7eb;border-radius:8px;font-family:inherit;font-size:14px;font-weight:400}
.form-grid .check-row{flex-direction:row;align-items:center;gap:10px;font-weight:500;cursor:pointer}

/* Rating widget */
.rating-box{margin-top:1.5rem;padding:1.25rem;border-radius:14px;background:linear-gradient(135deg,#fef3c7 0%,#fce7f3 100%);border:1px solid #fde68a}
.rating-box.rating-given{background:linear-gradient(135deg,#ecfdf5 0%,#f0f9ff 100%);border-color:#a7f3d0}
.rating-box h3{margin-top:0}
.rating-form{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.rating-stars{display:inline-flex;gap:4px}
.rating-stars .star{font-size:36px;background:none;border:none;color:#d1d5db;cursor:pointer;padding:0 4px;line-height:1;transition:transform .12s,color .12s}
.rating-stars .star:hover{transform:scale(1.15)}
.rating-stars .star.is-active,.rating-stars .star.is-hover{color:#f59e0b}
.rating-form textarea{padding:10px;border:1px solid #fde68a;border-radius:10px;font-family:inherit;background:#fff}
.rating-stars-static{display:inline-flex;gap:2px;align-items:center}
.rating-stars-static .star{font-size:22px;color:#d1d5db}
.rating-stars-static .star.is-active{color:#f59e0b}
.rating-stars-static strong{margin-left:8px;font-size:18px}
.rating-display{display:flex;flex-direction:column;gap:8px}
.rating-display blockquote{margin:0;padding:8px 12px;border-left:3px solid #6366f1;font-style:italic;color:#4b5563}


/* ============================================================================
   Şikayet Oluşturma Sihirbazı — 4 adımlı
   ============================================================================ */
.wizard-page{max-width:880px;margin:2rem auto;padding:0 1rem}
.wizard-header h1{margin:0 0 .25rem;font-size:1.85rem}
.wizard-header .muted{margin:0 0 1.5rem}

.wizard-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 2rem;counter-reset:step}
.wizard-steps .step{flex:1;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f3f4f6;border-radius:12px;border:1.5px solid transparent;cursor:pointer;transition:all .15s;font-size:14px}
.wizard-steps .step:hover{background:#e5e7eb}
.wizard-steps .step.is-active{background:#fff;border-color:#6366f1;box-shadow:0 4px 12px rgba(99,102,241,.18)}
.wizard-steps .step.is-done{background:#dcfce7;border-color:#86efac}
.wizard-steps .step-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#9ca3af;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.wizard-steps .step.is-active .step-num{background:#6366f1}
.wizard-steps .step.is-done .step-num{background:#16a34a}
.wizard-steps .step.is-done .step-num::before{content:'✓';font-size:16px}
.wizard-steps .step.is-done .step-num{color:transparent;position:relative}
.wizard-steps .step.is-done .step-num::before{position:absolute;color:#fff}
.wizard-steps .step-label{font-weight:600;color:#374151}
@media (max-width:640px){
  .wizard-steps .step-label{display:none}
  .wizard-steps .step{justify-content:center;padding:10px}
}

.wizard-form{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px rgba(0,0,0,.06);border:1px solid #e5e7eb}
.wizard-step{display:none;animation:fadeIn .25s ease}
.wizard-step.is-active{display:block}
.wizard-step h2{margin:0 0 .5rem;font-size:1.4rem;color:#111}
.wizard-step > .muted{margin:0 0 1.5rem}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wizard-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.75rem;gap:1rem}
.wizard-actions .btn{min-width:120px}

.form-label{display:block;font-weight:600;margin-bottom:6px;color:#111}
.form-label .req{color:#ef4444}
.input-meta{margin-top:6px;font-size:12px;color:#6b7280}
.wizard-form input[type='text'],
.wizard-form textarea{width:100%;padding:11px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-family:inherit;font-size:15px;transition:border-color .15s;box-sizing:border-box}
.wizard-form input[type='text']:focus,
.wizard-form textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)}

/* Kategori grid */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:.5rem}
.cat-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 12px;background:#f9fafb;border:1.5px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .15s}
.cat-card:hover{background:#fff;border-color:#a5b4fc;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.cat-card input[type='radio']{position:absolute;opacity:0;pointer-events:none}
.cat-card:has(input:checked){background:linear-gradient(135deg,#eef2ff,#fce7f3);border-color:#6366f1;box-shadow:0 6px 16px rgba(99,102,241,.18)}
.cat-card-icon{font-size:32px;line-height:1}
.cat-card-name{font-weight:600;font-size:15px;color:#111}
.cat-card-desc{font-size:11px;color:#6b7280;line-height:1.35}

/* Görsel önizleme */
#image-preview-wrap{margin-top:1rem;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;max-width:360px}
#image-preview{display:block;width:100%;height:auto}

/* Önizleme kartı */
.preview-card{margin-top:1.5rem;padding:1.25rem;background:linear-gradient(135deg,#f9fafb,#fff);border:1.5px dashed #d1d5db;border-radius:14px}
.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:13px}
.preview-cat{color:#6366f1;font-weight:600}
.preview-status{color:#ef4444;font-weight:600}
.preview-title{margin:.25rem 0 .5rem;font-size:1.15rem;color:#111;word-wrap:break-word}
.preview-content{margin:0;white-space:pre-wrap;word-wrap:break-word;line-height:1.5}


/* ============================================================================
   KOYU TEMA UYUMU — sonradan eklenen bileşenleri JojoBet temasına çek
   (notifications, messages, settings, wizard, ratings, modal)
   ============================================================================ */

/* — Bildirimler — */
.notif-list{background:var(--card)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow)}
.notif-item{border-bottom:1px solid var(--border)!important}
.notif-item:last-child{border-bottom:none!important}
.notif-link{padding:14px 16px;display:flex;gap:12px;align-items:flex-start;color:var(--text);text-decoration:none}
.notif-link:hover{background:rgba(253,197,42,.06);color:var(--text)}
.notif-item.unread .notif-link{background:rgba(253,197,42,.08)}
.notif-dot{background:var(--primary)!important}
.notif-title{color:var(--text);font-weight:700}
.notif-body{color:var(--muted)}
.notif-time{color:var(--muted);font-size:12px}
.empty{background:var(--card)!important;color:var(--muted)!important;border:1px solid var(--border)}

/* — Mesajlar / Sohbet — */
.conv-list{background:var(--card)!important;border:1px solid var(--border)!important}
.conv-item{border-bottom:1px solid var(--border)!important}
.conv-item:last-child{border-bottom:none!important}
.conv-link{padding:14px 16px;display:flex;gap:12px;align-items:center;color:var(--text);text-decoration:none}
.conv-link:hover{background:rgba(253,197,42,.06)}
.conv-item.unread .conv-link{background:rgba(253,197,42,.1)}
.conv-name{color:var(--text);font-weight:700}
.conv-preview{color:var(--muted);font-size:13px}
.conv-time{color:var(--muted);font-size:11px}

.chat-thread{background:var(--bg-2)!important;border:1px solid var(--border)!important;max-height:60vh;overflow-y:auto;padding:14px;border-radius:12px}
.chat-bubble{background:var(--card)!important;border:1px solid var(--border)!important;color:var(--text);padding:10px 14px;border-radius:14px;max-width:72%}
.chat-msg.mine .chat-bubble{background:linear-gradient(135deg,#1d7a3e,#2d9d52)!important;color:#fff;border-color:transparent!important}
.chat-msg.theirs .chat-bubble{background:var(--card-dark)!important}
.chat-bubble .chat-meta{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.chat-msg.mine .chat-bubble .chat-meta{color:rgba(255,255,255,.75)}
.chat-form{display:flex;gap:8px;margin-top:8px}
.chat-form input,.chat-form textarea{flex:1;background:var(--bg-2);color:var(--text);border:1px solid var(--border-strong);border-radius:10px;padding:10px 14px}

/* — Hesap Ayarları — */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem;margin-top:1.5rem}
.settings-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:14px;padding:1.5rem;box-shadow:var(--shadow)}
.settings-card h2{color:var(--text)!important;margin:0 0 1rem;font-size:1.1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.settings-card label{color:var(--text)}
.settings-card input[type='text'],
.settings-card input[type='email'],
.settings-card input[type='tel'],
.settings-card input[type='password'],
.settings-card textarea{background:var(--bg-2)!important;color:var(--text)!important;border:1px solid var(--border-strong)!important;border-radius:8px}
.settings-card .check-row{display:flex;align-items:flex-start;gap:10px;margin:12px 0;color:var(--text);cursor:pointer}
.settings-card .check-row input[type='checkbox']{margin-top:3px;width:18px;height:18px;accent-color:var(--primary)}
.settings-card .check-row .small{color:var(--muted);display:block;margin-top:2px}

/* — Yıldız puanlama — */
.rating-box{background:var(--card)!important;border:1.5px solid rgba(253,197,42,.35)!important;border-radius:14px;padding:1.5rem;margin-top:1.5rem;box-shadow:var(--shadow)}
.rating-box h3{color:var(--primary)!important;margin:0 0 .5rem}
.rating-box .muted{color:var(--muted)!important}
.rating-box.rating-given{border-color:var(--border)!important;background:var(--bg-2)!important}
.rating-stars{display:inline-flex;gap:4px;margin:.5rem 0;align-items:center}
.rating-stars .star{background:none;border:none;font-size:32px;color:#3d4a44;cursor:pointer;padding:0 2px;transition:transform .1s,color .1s;line-height:1}
.rating-stars .star:hover{transform:scale(1.15)}
.rating-stars .star.is-active,
.rating-stars .star.is-hover{color:var(--primary)}
.rating-stars-static{display:inline-flex;gap:2px;align-items:center;font-size:22px}
.rating-stars-static .star{color:#3d4a44}
.rating-stars-static .star.is-active{color:var(--primary)}
.rating-stars-static strong{margin-left:8px;color:var(--text);font-size:15px}
.rating-display blockquote{margin:.75rem 0 .25rem;padding:10px 14px;background:var(--card-dark);border-left:3px solid var(--primary);border-radius:6px;color:#cfe4d8;font-style:italic}
.rating-form textarea{background:var(--bg-2)!important;border:1px solid var(--border-strong)!important;color:var(--text)!important;border-radius:10px;padding:10px;width:100%;font-family:inherit;margin-top:.5rem}

/* — Wizard (yeni şikayet sihirbazı) — */
.wizard-page h1{color:var(--text)}
.wizard-steps .step{background:var(--bg-2)!important;border:1.5px solid var(--border)!important;color:var(--muted)}
.wizard-steps .step:hover{background:var(--card)!important}
.wizard-steps .step.is-active{background:var(--card)!important;border-color:var(--primary)!important;box-shadow:0 4px 12px rgba(253,197,42,.18)}
.wizard-steps .step.is-done{background:rgba(74,222,128,.12)!important;border-color:rgba(74,222,128,.4)!important}
.wizard-steps .step-num{background:#3d4a44}
.wizard-steps .step.is-active .step-num{background:var(--primary);color:#0a2914}
.wizard-steps .step.is-done .step-num{background:#16a34a}
.wizard-steps .step-label{color:var(--text)}

.wizard-form{background:var(--card)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow);border-radius:16px;padding:2rem}
.wizard-step h2{color:var(--text)!important}
.wizard-step > .muted{color:var(--muted)!important}
.form-label{color:var(--text)!important}
.input-meta{color:var(--muted)!important}
.wizard-form input[type='text'],
.wizard-form textarea{background:var(--bg-2)!important;color:var(--text)!important;border:1.5px solid var(--border-strong)!important}
.wizard-form input[type='text']::placeholder,
.wizard-form textarea::placeholder{color:#6b8a78}
.wizard-form input[type='text']:focus,
.wizard-form textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(253,197,42,.18)!important}
.wizard-form input[type='file']{color:var(--muted)}

/* Kategori kartları */
.cat-card{background:var(--bg-2)!important;border:1.5px solid var(--border)!important;color:var(--text)}
.cat-card:hover{background:var(--card)!important;border-color:rgba(253,197,42,.5)!important}
.cat-card:has(input:checked){background:linear-gradient(135deg,rgba(253,197,42,.15),rgba(29,122,62,.2))!important;border-color:var(--primary)!important;box-shadow:0 6px 16px rgba(253,197,42,.18)!important}
.cat-card-name{color:var(--text)!important}
.cat-card-desc{color:var(--muted)!important}

/* Önizleme kartı */
.preview-card{background:var(--bg-2)!important;border:1.5px dashed var(--border-strong)!important;color:var(--text)}
.preview-cat{color:var(--primary)!important}
.preview-status{color:#ef6e6e!important}
.preview-title{color:var(--text)!important}
.preview-content{color:var(--muted)!important}

#image-preview-wrap{border:1px solid var(--border)}

/* — Marka yanıtı kutusu (zaten dark olabilir ama emin olalım) — */
.brand-reply-box{background:var(--card-dark);border:1px solid rgba(253,197,42,.3);border-radius:10px;padding:12px 14px;margin-top:12px;display:flex;gap:12px;align-items:flex-start}
.brand-reply-logo{flex-shrink:0;width:38px;height:38px;background:var(--primary);color:#0a2914;font-weight:900;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.5px}
.brand-reply-head{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.brand-reply-head strong{color:var(--primary)}
.brand-reply-tag{background:var(--primary);color:#0a2914;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:700;text-transform:uppercase}
.brand-reply-time{color:var(--muted);font-size:11px}
.brand-reply-body p{margin:0;color:#d8e8df;font-size:13px;line-height:1.5}

/* — Header ikonları (zil, mesaj) — */
.icon-btn{position:relative;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-2);color:var(--text);border:1px solid var(--border);transition:all .15s;text-decoration:none}
.icon-btn:hover{background:var(--card);border-color:var(--primary);color:var(--primary)}
.icon-btn .badge-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:#ef4444;color:#fff;border-radius:9px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}

/* — Modal (eğer kullanılırsa) — */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.modal-card{background:var(--card)!important;border:1px solid var(--border);color:var(--text);border-radius:14px;padding:2rem;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:28px;cursor:pointer;line-height:1}
.modal-close:hover{color:var(--primary)}

/* — Genel: input outline odakta sarı — */
input:focus,textarea:focus,select:focus{outline:none}


/* ============================================================================
   NAVBAR — büyütülmüş logo, daha dolu üst bar
   ============================================================================ */
.navbar{padding:6px 0;border-bottom:2px solid rgba(253,197,42,.35);box-shadow:0 4px 20px rgba(0,0,0,.35)}
.nav-inner{padding:14px 24px;min-height:74px;gap:18px}

/* Logo — daha büyük + slogan */
.logo{gap:8px!important;font-size:30px!important;letter-spacing:.5px;line-height:1}
.logo-mark{font-size:30px;font-weight:900;letter-spacing:1px;text-shadow:0 2px 8px rgba(253,197,42,.25)}
.logo-tail{font-size:18px;font-weight:800;padding:6px 12px 5px;border:2px solid var(--primary);border-radius:8px;letter-spacing:1.2px;background:rgba(253,197,42,.05)}
.logo-slogan{display:inline-flex;flex-direction:column;justify-content:center;margin-left:8px;padding-left:12px;border-left:1.5px solid rgba(253,197,42,.3);line-height:1.1}
.logo-slogan-main{color:var(--text);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.logo-slogan-sub{color:var(--muted);font-size:11px;font-weight:500;margin-top:2px}

/* Nav linkleri daha belirgin */
.nav-links{gap:18px!important}
.nav-links > a{font-size:14px!important;padding:6px 4px;position:relative}
.nav-links > a:not(.btn):not(.icon-btn):not(.user-name):not(.logout)::after{
  content:'';position:absolute;left:4px;right:4px;bottom:-2px;height:2px;background:var(--primary);
  transform:scaleX(0);transform-origin:center;transition:transform .18s
}
.nav-links > a:not(.btn):not(.icon-btn):not(.user-name):not(.logout):hover::after{transform:scaleX(1)}

/* "+ Şikayet Yaz" butonu biraz daha büyük + gölge */
.nav-links .btn-primary{padding:9px 18px!important;font-size:13px!important;font-weight:700;letter-spacing:.4px;box-shadow:0 4px 14px rgba(253,197,42,.25);text-transform:uppercase}

/* Kullanıcı adı şık kart görünümü */
.user-name{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:rgba(253,197,42,.08);border:1.5px solid rgba(253,197,42,.35);border-radius:24px;font-weight:600;font-size:13px}
.user-name:hover{background:rgba(253,197,42,.15);border-color:var(--primary)}
.badge-admin{background:var(--primary);color:#0a2914;font-size:9px;font-weight:800;padding:2px 7px;border-radius:8px;letter-spacing:.5px;text-transform:uppercase}

/* Mobile responsive */
@media (max-width:768px){
  .logo-slogan{display:none}
  .nav-inner{min-height:64px;padding:10px 14px}
  .logo-mark{font-size:24px}
  .logo-tail{font-size:14px;padding:4px 9px 3px}
}


/* ============================================================================
   AUTH — telefon doğrulamalı 2 adımlı kayıt
   ============================================================================ */
.auth-steps{display:flex;align-items:center;gap:10px;margin:18px 0 22px;padding:14px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px}
.auth-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
.auth-step-num{width:26px;height:26px;border-radius:50%;background:#3d4a44;color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.auth-step.is-active{color:var(--text)}
.auth-step.is-active .auth-step-num{background:var(--primary);color:#0a2914;box-shadow:0 0 0 3px rgba(253,197,42,.18)}
.auth-step.is-done{color:#9be0b3}
.auth-step.is-done .auth-step-num{background:#16a34a;color:#fff}
.auth-step-sep{flex:1;height:2px;background:linear-gradient(90deg,var(--border),var(--primary),var(--border));opacity:.4;border-radius:1px}

/* Doğrulanmış telefon kutucuğu */
.phone-confirmed{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(74,222,128,.08);border:1.5px solid rgba(74,222,128,.35);border-radius:12px;margin:14px 0 18px}
.phone-confirmed-icon{font-size:24px}
.phone-confirmed-text{flex:1;display:flex;flex-direction:column;gap:2px}
.phone-confirmed-text strong{color:var(--text);font-size:16px;letter-spacing:.3px}

/* OTP kod inputu — büyük, ortalı, monospace */
.otp-input{font-size:28px!important;letter-spacing:14px!important;text-align:center!important;font-family:'SF Mono',Menlo,Consolas,monospace!important;font-weight:700!important;padding:14px!important;background:var(--bg-2)!important;border:2px solid var(--border-strong)!important;color:var(--primary)!important;border-radius:10px}
.otp-input:focus{border-color:var(--primary)!important;box-shadow:0 0 0 4px rgba(253,197,42,.18)!important;outline:none!important}
.otp-input::placeholder{color:#3d4a44;letter-spacing:14px}

/* Inline link butonu */
.btn-link{background:none;border:none;color:var(--primary);font-size:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;font-family:inherit}
.btn-link:hover{color:var(--primary-hi);text-decoration:none}


/* ============================================================================
   ADMIN PANEL — admin.jojosikayet.com için ayrı stil seti
   Sidebar + main content layout, kart tabanlı UI, koyu iş paneli teması
   ============================================================================ */
.admin-body{background:var(--bg,#16201d);color:var(--text,#e8efe9);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh;display:flex}

/* ---- Sidebar ---- */
.admin-sidebar{width:240px;background:#0f1a16;border-right:1px solid var(--border,#22332b);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.admin-brand{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid var(--border,#22332b);color:var(--text);text-decoration:none}
.admin-brand-logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#fdc52a,#f59e0b);color:#0a2914;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;box-shadow:0 0 0 2px rgba(253,197,42,.18)}
.admin-brand-logo.big{width:64px;height:64px;font-size:32px;border-radius:14px}
.admin-brand-text{display:flex;flex-direction:column;line-height:1.2}
.admin-brand-text strong{font-size:15px;letter-spacing:.2px}
.admin-brand-text small{font-size:11px;color:var(--muted,#8aa39a);text-transform:uppercase;letter-spacing:1px}

.admin-nav{display:flex;flex-direction:column;padding:12px 8px;gap:2px;flex:1;overflow-y:auto}
.admin-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--text);text-decoration:none;border-radius:8px;font-size:14px;font-weight:500;transition:.15s}
.admin-nav a .ico{font-size:16px;width:22px;text-align:center}
.admin-nav a:hover{background:#1a2620}
.admin-nav a.is-active{background:rgba(253,197,42,.12);color:var(--primary,#fdc52a);font-weight:700}
.admin-nav-sep{height:1px;background:var(--border,#22332b);margin:8px 6px}

.admin-sidebar-foot{padding:14px;border-top:1px solid var(--border,#22332b);display:flex;flex-direction:column;gap:10px}
.admin-user{display:flex;align-items:center;gap:10px}
.admin-user-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary,#fdc52a);color:#0a2914;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.admin-user-info{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.admin-user-info strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user-info small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-logout{background:#1a2620;color:var(--text);border:1px solid var(--border,#22332b);border-radius:8px;padding:8px;font-size:12px;cursor:pointer;width:100%}
.admin-logout:hover{background:#ef4444;color:#fff;border-color:#ef4444}

/* ---- Main ---- */
.admin-main{flex:1;padding:24px 28px;max-width:1400px;width:100%;box-sizing:border-box}
.admin-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.admin-page-head h1{margin:0 0 4px;font-size:24px;font-weight:800}
.admin-page-head h1 small{font-size:14px;font-weight:600}
.admin-page-head p{margin:0;font-size:13px}
.admin-page-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---- Flash messages ---- */
.admin-flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px;font-weight:500;border:1px solid}
.admin-flash-success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:#86efac}
.admin-flash-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4);color:#fca5a5}

/* ---- Card ---- */
.admin-card{background:#15201c;border:1px solid var(--border,#22332b);border-radius:12px;padding:18px 20px;margin-bottom:18px}
.admin-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:8px;flex-wrap:wrap}
.admin-card-head h2,.admin-card-head h3{margin:0;font-size:16px;font-weight:700}

/* Row / column grid */
.admin-row{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}
.admin-col-2{grid-column:span 1}
@media(max-width:980px){.admin-row{grid-template-columns:1fr}.admin-sidebar{width:60px}.admin-brand-text,.admin-nav a span:not(.ico),.admin-user-info,.admin-logout{display:none}.admin-nav a{justify-content:center}}

/* ---- KPI grid ---- */
.admin-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.admin-kpi{background:#15201c;border:1px solid var(--border,#22332b);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:14px}
.admin-kpi-icon{width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.admin-kpi-info{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.admin-kpi-info strong{font-size:26px;font-weight:800;color:var(--text)}
.admin-kpi-info small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Pending list (dashboard) ---- */
.admin-pending-list{list-style:none;padding:0;margin:0}
.admin-pending-list li{border-bottom:1px solid var(--border,#22332b)}
.admin-pending-list li:last-child{border-bottom:none}
.admin-pending-item{display:flex;align-items:center;gap:12px;padding:12px 4px;color:var(--text);text-decoration:none}
.admin-pending-item:hover{background:#1a2620}
.admin-pending-cat{font-size:22px;width:30px;text-align:center;flex-shrink:0}
.admin-pending-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.admin-pending-body strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.admin-pending-age{font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;background:#1a2620;color:var(--muted);flex-shrink:0}
.admin-pending-age.is-warn{background:rgba(245,158,11,.15);color:#fbbf24}
.admin-pending-age.is-late{background:rgba(239,68,68,.15);color:#fca5a5}

/* ---- Category bars (dashboard) ---- */
.admin-cat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.admin-cat-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.admin-cat-bar{height:6px;background:#1a2620;border-radius:3px;overflow:hidden}
.admin-cat-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary,#fdc52a),#22c55e)}

/* ---- Perf grid ---- */
.admin-perf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.admin-perf-grid > div{display:flex;flex-direction:column;gap:4px;padding:10px;background:#1a2620;border-radius:8px}
.admin-perf-grid strong.big{font-size:22px;font-weight:800}
.admin-empty{text-align:center;color:var(--muted);padding:24px 0;font-size:14px}

/* ---- Filters bar ---- */
.admin-filters{display:flex;gap:10px;align-items:center;background:#15201c;border:1px solid var(--border,#22332b);border-radius:12px;padding:12px 14px;margin-bottom:14px;flex-wrap:wrap}
.admin-filters select,.admin-filters input{background:#0f1a16;border:1px solid var(--border,#22332b);color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px}
.admin-filters input{flex:1;min-width:180px}
.admin-filters select{cursor:pointer}

/* ---- Table ---- */
.admin-table-wrap{padding:0;overflow:hidden}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th,.admin-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border,#22332b);vertical-align:middle}
.admin-table thead th{background:#1a2620;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.admin-table tbody tr:hover{background:#1a2620}
.admin-table tbody tr:last-child td{border-bottom:none}
.admin-row-title{color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.admin-row-title:hover{color:var(--primary,#fdc52a)}
.admin-row-meta{font-size:11px;color:var(--muted);margin-top:3px}
.badge-replied{background:rgba(34,197,94,.15);color:#86efac;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:700}
.badge-pending{background:rgba(245,158,11,.15);color:#fbbf24;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:700}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px}

/* Pagination */
.admin-pagination{display:flex;gap:6px;padding:14px;justify-content:center;border-top:1px solid var(--border,#22332b)}
.admin-pagination a{padding:6px 12px;border-radius:6px;background:#1a2620;color:var(--text);text-decoration:none;font-size:13px;font-weight:600}
.admin-pagination a.is-active{background:var(--primary,#fdc52a);color:#0a2914}
.admin-pagination a:hover{background:#22332b}

/* ---- Complaint detail ---- */
.admin-complaint-body{font-size:15px;line-height:1.65;white-space:pre-wrap;color:var(--text)}
.admin-complaint-image{max-width:100%;border-radius:10px;margin-top:14px;border:1px solid var(--border,#22332b)}
.admin-sep{border:none;border-top:1px solid var(--border,#22332b);margin:18px 0}
.admin-comments{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:12px}
.admin-comments li{padding:12px 14px;border-radius:10px;background:#1a2620;border-left:3px solid var(--border,#22332b)}
.admin-comments li.is-brand{border-left-color:var(--primary,#fdc52a);background:rgba(253,197,42,.07)}
.admin-comment-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px}
.admin-comment-body{font-size:14px;line-height:1.55;color:var(--text);white-space:pre-wrap}
.brand-pill{background:var(--primary,#fdc52a);color:#0a2914;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:800;margin-left:6px;letter-spacing:.3px}
.admin-rating{padding:12px;background:#1a2620;border-radius:10px;font-size:14px}
.admin-rating blockquote{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--primary,#fdc52a);color:var(--muted);font-style:italic;font-size:13px}

/* Status form */
.admin-status-form{display:flex;flex-direction:column;gap:8px}
.admin-radio{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#1a2620;border-radius:8px;cursor:pointer;font-size:13px}
.admin-radio:hover{background:#22332b}
.admin-radio input{margin:0}

/* Canned select in detail */
.admin-canned-label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.admin-canned-select{width:100%;background:#0f1a16;border:1px solid var(--primary,#fdc52a);color:var(--primary,#fdc52a);padding:10px 12px;border-radius:8px;margin-bottom:14px;font-weight:600;cursor:pointer}
#reply-content{width:100%;background:#0f1a16;border:1px solid var(--border,#22332b);color:var(--text);padding:12px;border-radius:8px;font-family:inherit;font-size:14px;resize:vertical;line-height:1.6;box-sizing:border-box}
#reply-content:focus{border-color:var(--primary,#fdc52a);outline:none}

/* Status pill */
.status-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;background:#1a2620}
.status-pill.status-open{background:rgba(239,68,68,.15);color:#fca5a5}
.status-pill.status-progress{background:rgba(245,158,11,.15);color:#fbbf24}
.status-pill.status-resolved{background:rgba(34,197,94,.15);color:#86efac}
.status-pill.big{font-size:13px;padding:6px 14px}

/* ---- Canned CRUD ---- */
.admin-collapse{display:none}
.admin-collapse.is-open{display:block}
.admin-canned-preview{font-size:12px;color:var(--muted);max-width:380px;line-height:1.4}
.admin-actions{display:flex;gap:8px;align-items:center;white-space:nowrap}
.admin-canned-edit-row td{padding:0;background:#0f1a16}
.admin-canned-edit-row .admin-collapse{padding:14px}

/* ---- Login (standalone) ---- */
.admin-login-body{background:linear-gradient(135deg,#0a1411 0%,#16201d 60%,#0f1a16 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text,#e8efe9)}
.admin-login-card{background:#15201c;border:1px solid var(--border,#22332b);border-radius:16px;padding:34px 36px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.admin-login-brand{text-align:center;margin-bottom:24px}
.admin-login-brand h1{margin:14px 0 4px;font-size:22px;font-weight:800}
.admin-login-brand p{margin:0;color:var(--muted);font-size:13px}
.admin-login-brand .admin-brand-logo{margin:0 auto}
.admin-login-card form label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.admin-login-card form input{width:100%;background:#0f1a16;border:1px solid var(--border,#22332b);color:var(--text);padding:11px 12px;border-radius:8px;font-size:14px;box-sizing:border-box}
.admin-login-card form input:focus{border-color:var(--primary,#fdc52a);outline:none}
.admin-login-foot{text-align:center;margin-top:18px;font-size:11px}

/* Admin form inputs */
.admin-card form label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.admin-card form input,.admin-card form select,.admin-card form textarea{width:100%;background:#0f1a16;border:1px solid var(--border,#22332b);color:var(--text);padding:10px 12px;border-radius:8px;font-size:14px;font-family:inherit;box-sizing:border-box}
.admin-card form input:focus,.admin-card form select:focus,.admin-card form textarea:focus{border-color:var(--primary,#fdc52a);outline:none}
.admin-card form textarea{resize:vertical;line-height:1.6}
.admin-card form .btn{margin-top:14px}

/* admin-quick-bar — ana sitede admin için panel deep-link */
.admin-quick-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(253,197,42,.08);border:1px dashed rgba(253,197,42,.4);border-radius:10px;padding:10px 14px;margin:14px 0;font-size:13px}
.admin-quick-bar .btn{padding:6px 12px;font-size:13px}
.btn-admin{background:#0f1a16;color:var(--primary,#fdc52a)!important;border:1px solid var(--primary,#fdc52a);padding:6px 12px;border-radius:8px;font-weight:700;font-size:13px;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.btn-admin:hover{background:var(--primary,#fdc52a);color:#0a2914!important}


/* Paket-B: Users / Categories / Logs için stil eklemeleri */
.admin-filters{display:flex;gap:8px;align-items:center;margin:14px 0;flex-wrap:wrap}
.admin-filters input,.admin-filters select{background:#0f1a16;color:#e6f0ea;border:1px solid #2a3a32;border-radius:8px;padding:8px 10px;font-size:13px;min-width:180px}
.admin-filters input:focus,.admin-filters select:focus{outline:none;border-color:var(--primary,#fdc52a)}
.admin-panel{display:none;background:#0f1a16;border:1px solid #2a3a32;border-radius:10px;padding:14px;margin:10px 0 18px}
.admin-panel.is-open{display:block}
.admin-form-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.admin-form-inline input{background:#1a2620;color:#e6f0ea;border:1px solid #2a3a32;border-radius:8px;padding:8px 10px;font-size:14px}
.pill{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.3px}
.pill-admin {background:rgba(253,197,42,.15);color:#fdc52a;border:1px solid #5a4a18}
.pill-banned{background:rgba(220,53,69,.18);color:#ff8b8b;border:1px solid #6a2a30}
.pill-ok    {background:rgba(40,180,99,.15); color:#5ce394;border:1px solid #1c4a30}
.pill-warn  {background:rgba(253,197,42,.12);color:#fdc52a;border:1px solid #5a4a18}
.pill-danger{background:rgba(220,53,69,.18);color:#ff8b8b;border:1px solid #6a2a30}
.btn-mini{background:#1a2620;color:#e6f0ea;border:1px solid #2a3a32;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn-mini:hover{background:#243029;border-color:#3a4a42}
.btn-mini-ok{background:#1c4a30;border-color:#2d6a45;color:#c8f0d8}
.btn-mini-ok:hover{background:#246039;border-color:#3a8559}
.btn-mini-danger{background:#5a1820;border-color:#7a2530;color:#ffc8c8}
.btn-mini-danger:hover{background:#7a2230;border-color:#9a3040}
.btn-mini-ghost{background:transparent;border:1px dashed #3a4a42}
.btn-mini[disabled]{opacity:.4;cursor:not-allowed}
.admin-pagination{display:flex;gap:6px;justify-content:center;margin:18px 0}
.admin-pagination a{padding:6px 10px;border:1px solid #2a3a32;border-radius:6px;color:#e6f0ea;text-decoration:none;font-size:13px}
.admin-pagination a.is-active{background:var(--primary,#fdc52a);color:#0a2914;border-color:var(--primary,#fdc52a);font-weight:700}


/* Paket-C: Dashboard 7-gün bar chart */
.admin-chart7{display:flex;align-items:flex-end;gap:14px;height:180px;padding:12px 4px 0;position:relative}
.admin-chart7-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.admin-chart7-val{font-size:12px;color:#9ca3af;margin-bottom:6px;font-weight:600;letter-spacing:.3px;min-height:16px}
.admin-chart7-bar{
  width:100%;max-width:48px;
  background:linear-gradient(to top,#3b82f6,#60a5fa);
  border-radius:6px 6px 0 0;
  transition:height .5s ease, background .2s;
  min-height:6px;
  position:relative;
}
.admin-chart7-bar:hover{background:linear-gradient(to top,#2563eb,#3b82f6);transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,.4)}
.admin-chart7-bar.is-today{background:linear-gradient(to top,#fdc52a,#fde047)}
.admin-chart7-bar.is-today:hover{background:linear-gradient(to top,#eab308,#fde047);box-shadow:0 4px 12px rgba(253,197,42,.4)}
.admin-chart7-label{font-size:11px;color:#9ca3af;margin-top:8px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}


/* ============================================================
 * Paket-E — Admin Settings (2FA + şifre değiştirme)
 * ============================================================ */
.settings-tabs {
  display: flex; gap: 0; margin: 16px 0 20px;
  border-bottom: 1px solid var(--admin-border, #e5e7eb);
  flex-wrap: wrap;
}
.settings-tab {
  padding: 10px 18px; color: var(--muted, #6b7280);
  text-decoration: none; font-weight: 500; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all .15s ease;
}
.settings-tab:hover { color: var(--text, #111827); background: rgba(0,0,0,.02); }
.settings-tab.active {
  color: var(--admin-accent, #2563eb);
  border-bottom-color: var(--admin-accent, #2563eb);
}
[data-theme="admin"] .settings-tab:hover { background: rgba(255,255,255,.04); color: #fff; }

.alert {
  padding: 12px 16px; border-radius: 8px; font-size: 14px;
  border: 1px solid transparent;
}
.alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
[data-theme="admin"] .alert-success { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.3); }
[data-theme="admin"] .alert-warning { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.3); }
[data-theme="admin"] .alert-info    { background: rgba(59,130,246,.12); color: #93c5fd; border-color: rgba(59,130,246,.3); }

.pill-ok {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #10b981; color: #fff; font-size: 11px; font-weight: 600;
  vertical-align: middle;
}

.btn-block { width: 100%; }
.btn-ghost {
  background: transparent; color: var(--muted, #6b7280);
  border: 1px solid var(--admin-border, #e5e7eb);
}
.btn-ghost:hover { background: rgba(0,0,0,.03); color: var(--text, #111827); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

@media (max-width: 600px) {
  .settings-tab { padding: 8px 12px; font-size: 13px; }
}


/* ============================================================
 * Paket-F — Upload Dropzone + Galeri + Lightbox
 * ============================================================ */

/* --- Dropzone (yeni şikayet formu) --- */
.dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
  background: #fafafa;
}
.dropzone:hover, .dropzone:focus,
.dropzone.is-drag {
  border-color: #2563eb;
  background: #eff6ff;
  outline: none;
}
.dropzone-empty .dropzone-icon { font-size: 40px; margin-bottom: 8px; }
.dropzone-empty p { margin: 4px 0; }

.files-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.file-item {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1 / 1.1;
  display: flex;
  flex-direction: column;
}
.file-item img,
.file-item .file-video-ph {
  width: 100%;
  flex: 1;
  object-fit: cover;
  background: #111827;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}
.file-video-ph .file-vico { font-size: 28px; margin-right: 6px; }
.file-video-ph .file-vlbl { font-size: 11px; letter-spacing: 1px; }
.file-meta {
  padding: 4px 8px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  background: #f9fafb;
}
.file-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta small { color: #6b7280; font-size: 10px; }
.file-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  cursor: pointer;
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.file-remove:hover { background: #dc2626; }

/* --- Galeri (şikayet detay sayfası) --- */
.complaint-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  background: #111827;
  transition: transform .15s ease;
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item img,
.gallery-item video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item--video { cursor: pointer; }
.gallery-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  pointer-events: none;
}
.gallery-delete {
  position: absolute; top: 6px; right: 6px;
  margin: 0;
}
.gallery-delete button {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.gallery-delete button:hover { background: #dc2626; }

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lightbox.is-open { display: flex; }
.lightbox-stage {
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img,
.lightbox-stage video {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,.25); }
.lightbox-close {
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  font-size: 28px;
}
.lightbox-prev, .lightbox-next {
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 36px;
  line-height: 1;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .complaint-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 28px; }
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
  .lightbox-close { width: 36px; height: 36px; font-size: 22px; top: 12px; right: 12px; }
}

/* ===== Inline SVG icon system ===== */
.icn { display: inline-block; vertical-align: -3px; flex-shrink: 0; stroke: currentColor; fill: none; }
.nav-links a, .nav-links .btn, .user-menu a, .user-menu .logout { display: inline-flex; align-items: center; gap: 6px; }
.admin-nav a { display: flex; align-items: center; gap: 10px; }
.admin-nav .icn { flex-shrink: 0; opacity: .85; }
.admin-nav a.is-active .icn { opacity: 1; }
.admin-login-card .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.admin-login-foot { display: flex; align-items: center; gap: 8px; justify-content: center; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text, #cfd6e4); transition: background .15s, color .15s; }
.icon-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.icon-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.btn-admin .icn, .btn-primary .icn { vertical-align: -2px; }

/* — Şikayet detayı: "Çözüldü mü?" CTA (yorumların altına taşındı) — */
.rating-box-cta { margin-top: 28px; border-left: 4px solid var(--primary, #fdc52a); position: relative; }
.rating-box-cta::before {
  content: ""; position: absolute; top: -14px; left: 18px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary, #fdc52a); opacity: .15;
}
.rating-box-cta h3 { display: inline-flex; align-items: center; gap: 8px; }
.rating-box-cta h3 .icn { vertical-align: -3px; }
.rating-box-cta .btn-primary { align-self: flex-start; padding: 10px 18px; }
.rating-box-cta .btn-primary .icn { vertical-align: -3px; margin-right: 4px; }
@media (max-width: 640px) {
  .rating-box-cta .btn-primary { align-self: stretch; text-align: center; }
}

/* — Yıldız ikonu: boşken sadece kontur, aktifken içi dolu — */
/* Hem interaktif (.rating-stars) hem statik (.rating-stars-static) yıldızlar için */
.rating-stars .star .icn,
.rating-stars-static .star .icn {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: fill .12s ease, color .12s ease;
}
/* Aktif / hover yıldızı: tam dolu */
.rating-stars .star.is-active .icn,
.rating-stars .star.is-hover  .icn,
.rating-stars-static .star.is-active .icn {
  fill: currentColor;
}
.rating-stars .star:hover .icn { fill: currentColor; }
.rating-stars .star:hover      { color: var(--primary, #fdc52a); }
/* Statik gösterim yıldızları (verilmiş puan) — boşları soluk */
.rating-stars-static .star { color: #3d4a44; opacity: .55; }
.rating-stars-static .star.is-active { color: var(--primary, #fdc52a); opacity: 1; }

/* — Overscroll: lastik bantta beyaz arkaplan görünmesin (scroll'u BOZMADAN) — */
html, body { background-color: var(--bg, #0a2914) !important; }
.cv-me-too.voted { background: rgba(253,197,42,.22); transition: background .25s ease; }


/* ════════════════════════════════════════════════════════════════════
   📱 MOBILE-FIRST RESPONSIVE — taşma engelleme + tek sütun
   Not: html/body üzerine overflow:hidden KOYULMUYOR — bu vertical scroll'u
   bozar ve position:sticky navbar'ı kırar. Bunun yerine .container ve
   içerikler üzerinde max-width + overflow-x: clip ile taşma kesilir.
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
img, video, svg, iframe { max-width: 100%; height: auto; }
.container, .layout, .content, .sidebar { max-width: 100%; }
.layout, .content { overflow-x: clip; }            /* sadece yatay taşmayı kes */

@media (max-width: 900px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .layout { display: block; }
  .content, .sidebar { width: 100%; max-width: 100%; }
  .sidebar { margin-top: 22px; }
  .nav-inner { flex-wrap: wrap; gap: 10px; row-gap: 10px; }
  .nav-links { flex-wrap: wrap; gap: 8px; }
  .logo-slogan { display: none; }
}

@media (max-width: 640px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .hero { padding: 28px 0 18px; }
  .hero-content h1 { font-size: 22px; line-height: 1.25; }
  .hero-content p  { font-size: 14px; }
  /* Hero search'ü pill layout'unda bırak — sadece kompakt boyutlandır.
     button absolute pozisyonlu olduğu için width:100% verilirse tüm pill'i kaplar. */
  .hero-search { flex-direction: row !important; align-items: center !important; gap: 0 !important; height: 50px; }
  .hero-search input { width: 100%; padding: 0 96px 0 46px !important; font-size: 14px; }
  .hero-search-icon { left: 14px; }
  .hero-search button { width: auto !important; padding: 0 18px !important; font-size: 13px !important; right: 5px !important; }
  .trust-metrics { grid-template-columns: 1fr !important; gap: 10px; }
  .trust-card { padding: 12px; }
  .trust-text strong { font-size: 18px; }

  .status-filters, .sort-tabs { flex-wrap: wrap; gap: 6px; }
  .filter-pill, .sort-tabs a { font-size: 13px; padding: 6px 10px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }

  .cv-card { padding: 14px; margin-bottom: 12px; word-wrap: break-word; overflow-wrap: anywhere; }
  .cv-head { flex-wrap: wrap; gap: 8px; }
  .cv-author { min-width: 0; }
  .cv-author-name, .cv-time { overflow: hidden; text-overflow: ellipsis; }
  .cv-title { font-size: 16px; line-height: 1.35; }
  .cv-excerpt { font-size: 14px; }
  .cv-foot { flex-wrap: wrap; gap: 10px; row-gap: 8px; }
  .cv-me-too { padding: 6px 10px; font-size: 13px; }

  .brand-reply-box { flex-direction: column; gap: 10px; padding: 12px; }
  .brand-reply-logo { align-self: flex-start; }
  .brand-reply-body { width: 100%; min-width: 0; }
  .brand-reply-body p { font-size: 13px; word-break: break-word; }

  .complaint-detail h1 { font-size: 22px; line-height: 1.3; }
  .detail-meta, .detail-author { flex-wrap: wrap; gap: 8px; }
  .vote-bar { flex-wrap: wrap; gap: 10px; }
  .vote-btn { padding: 8px 12px; font-size: 14px; }
  .vote-score-big { font-size: 22px; }

  .comment-form textarea, .rating-form textarea { width: 100%; min-width: 0; }
  .rating-stars .star { font-size: 30px !important; }

  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .admin-body { display: block; }
  .admin-sidebar { position: static; width: 100%; height: auto; }
  .admin-main { padding: 16px 12px; }
}

@media (max-width: 400px) {
  .container { padding-left: 10px; padding-right: 10px; }
  .logo-mark { font-size: 22px; }
  .logo-tail { font-size: 12px; padding: 3px 8px; }
  .btn { font-size: 13px; padding: 8px 12px; }
  .cv-card { padding: 12px; }
}


/* ===========================================================================
   Paket-G — MEDYA OPTİMİZASYONU (.mov fallback + onerror placeholder)
   ===========================================================================
   - Görsel yüklenemediğinde 'media-broken-ph' kutusu çıkar.
   - .mov / video/quicktime dosyaları için 'gallery-video-fallback' bloğu
     "indirin" linki ile birlikte gösterilir (Chrome/Firefox .mov oynatmaz).
   - Normal video açılamazsa <video onerror>'da .gallery-video-error sınıfı
     ekleyip altındaki .gallery-video-errmsg'i görünür yapar.
   =========================================================================== */
.media-broken-ph {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #6b7280;
  font-size: 14px;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
}

.gallery-item--legacy {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
}
.gallery-video-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  text-align: center;
  min-height: 180px;
}
.gallery-video-fallback .gv-icon {
  color: #d97706;
  display: inline-flex;
}
.gallery-video-fallback .gv-msg {
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
}
.gallery-video-fallback .gv-download {
  display: inline-block;
  padding: 6px 14px;
  background: #2563eb;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.gallery-video-fallback .gv-download:hover {
  background: #1d4ed8;
}

/* Normal video açılamazsa fallback mesajı görünsün */
.gallery-video-errmsg {
  display: none;
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(220, 38, 38, 0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
}
.gallery-video-errmsg a {
  color: #fef3c7;
  text-decoration: underline;
  font-weight: 600;
}
.gallery-item.gallery-video-error .gallery-video-errmsg {
  display: block;
}
.gallery-item.gallery-video-error video,
.gallery-item.gallery-video-error .gallery-play {
  opacity: 0.3;
}

/* Mobil — fallback bloğu küçük ekranda da düzgün dursun */
@media (max-width: 640px) {
  .gallery-video-fallback {
    min-height: 140px;
    padding: 14px 8px;
  }
  .gallery-video-fallback .gv-msg {
    font-size: 12px;
  }
}


/* ===========================================================================
   Paket-H — PAGINATION (sayfalama navigasyonu)
   ===========================================================================
   - Server-side render, JS gerekmiyor.
   - Modern, sade görünüm; aktif sayfa belirgin; mobilde de okunabilir.
   - "is-disabled" ve "is-current" durumları erişilebilir (cursor + opacity).
   =========================================================================== */
.pagination {
  margin: 28px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pagination-info {
  font-size: 13px;
  color: rgba(245, 250, 246, 0.65); /* --text yumuşatılmış */
}
.pagination-info strong {
  color: var(--primary);
  font-weight: 700;
}
.pagination-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination-list li {
  display: inline-flex;
}
.pagination-list a,
.pagination-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.18s ease;
  user-select: none;
}
.pagination-list a:hover {
  background: var(--card-2);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(253, 197, 42, 0.12);
}
.pagination-list .is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: #07210f; /* koyu yeşil arka plana karşı yüksek kontrast */
  font-weight: 800;
  cursor: default;
  box-shadow: 0 4px 14px rgba(253, 197, 42, 0.35);
}
.pagination-list .is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--card-dark);
  color: rgba(245, 250, 246, 0.5);
  border-color: var(--border);
}
.pagination-list .pagination-gap {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: rgba(245, 250, 246, 0.4);
  user-select: none;
  font-size: 14px;
  min-width: auto;
  height: 40px;
  border: none;
  background: transparent;
}

/* Mobil — küçük ekranda buton biraz daraltılıyor, "Önceki/Sonraki" yazıları
   görünür kalsın diye yan padding'i koruyoruz. */
@media (max-width: 540px) {
  .pagination-list a,
  .pagination-list span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }
  .pagination-list a[rel="prev"],
  .pagination-list a[rel="next"],
  .pagination-list span[aria-disabled="true"] {
    padding: 0 12px;
  }
}


/* ===========================================================================
   Paket-I — DETAY SAYFASI MEDYA & İÇERİK DÜZELTMELERİ
   ===========================================================================
   1) Galeri: aspect-ratio:1 + cover → resmi kırpıyordu. Artık doğal oran +
      object-fit:contain. Koyu yeşil arkaplan, item KIRPILMAZ.
   2) Mobil tıklama: gallery-play span'ı pointer'ı yiyordu. pointer-events:
      none ile düzeltildi. Silme butonu (z-index:3, pointer-events:auto) hala
      tıklanabilir.
   3) Şikayet metni çıplaktı → .detail-body bir iç kart (bg-2 + border) içine.
   =========================================================================== */
.complaint-gallery {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.gallery-item {
  aspect-ratio: auto;
  min-height: 180px;
  max-height: 260px;
  background: var(--card-dark);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: rgba(253,197,42,.2);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--card-dark);
  display: block;
}
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.gallery-play,
.gallery-video-errmsg { pointer-events: none; }
.gallery-play {
  background: rgba(0,0,0,.65);
  border: 2px solid rgba(253,197,42,.85);
  color: var(--primary);
}
.gallery-delete,
.gallery-delete button {
  pointer-events: auto;
  z-index: 3;
}
.gallery-delete button {
  width: 32px;
  height: 32px;
  font-size: 20px;
}
@media (hover: none) {
  .gallery-item:hover { transform: none; }
  .gallery-item:active { opacity: .85; transition: opacity .1s; }
}
@media (max-width: 640px) {
  .complaint-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .gallery-item {
    min-height: 140px;
    max-height: 200px;
  }
}

/* Şikayet METNİ artık iç kart içinde */
.complaint-detail .detail-body {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 18px 0 8px;
}
.complaint-detail .detail-body p {
  margin: 0;
  color: #e5f0e9;
  font-size: 16px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.complaint-detail .detail-body .complaint-gallery {
  margin-top: 18px;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .complaint-detail .detail-body {
    padding: 16px 14px;
    margin: 14px 0 4px;
    border-radius: 10px;
  }
  .complaint-detail .detail-body p {
    font-size: 15px;
    line-height: 1.65;
  }
  .lightbox-stage img,
  .lightbox-stage video {
    max-width: 100vw;
    max-height: 80vh;
  }
}

/* ============================================================================
   Cloudflare Turnstile widget — form aralığı + temalara uyum
   ========================================================================== */
.turnstile-widget {
  margin: 14px 0 6px;
  min-height: 65px;            /* render olana kadar zıplamayı önle */
  display: flex;
  justify-content: center;
}
.turnstile-widget iframe {
  border-radius: 8px;
}
@media (max-width: 480px) {
  .turnstile-widget { min-height: 70px; }
}

/* === HEADER NAV (v5) === */
.navbar .nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 8px;
  width: 38px; height: 38px;
  padding: 0; cursor: pointer; position: relative;
  flex-shrink: 0; margin-left: 4px;
}
.navbar .nav-toggle:hover { border-color: #ffd700; background: rgba(255, 215, 0, 0.08); }
.navbar .nav-toggle:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; }
.navbar .nav-toggle .nav-toggle-bar {
  display: block !important; position: absolute !important;
  left: 8px !important; right: 8px !important; height: 2px !important; width: auto !important;
  background: #ffd700 !important; border-radius: 2px !important;
  border: 0 !important; margin: 0 !important; padding: 0 !important;
  pointer-events: none; transition: transform .22s, opacity .18s, top .22s;
}
.navbar .nav-toggle .nav-toggle-bar:nth-child(1) { top: 11px !important; }
.navbar .nav-toggle .nav-toggle-bar:nth-child(2) { top: 18px !important; }
.navbar .nav-toggle .nav-toggle-bar:nth-child(3) { top: 25px !important; }
.navbar .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 18px !important; transform: rotate(45deg); }
.navbar .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.navbar .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 18px !important; transform: rotate(-45deg); }

.navbar .nav-inner {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: space-between !important;
  flex-wrap: nowrap !important; gap: 12px !important;
  padding: 14px 20px !important; max-width: 1280px !important; margin: 0 auto !important;
}
.navbar .logo {
  flex: 0 0 auto !important; margin-right: auto !important;
  display: inline-flex !important; align-items: center !important;
  gap: 8px !important; text-decoration: none !important;
}
.navbar .logo .logo-mark { font-size: 28px !important; font-weight: 900 !important; letter-spacing: 1px !important; line-height: 1 !important; color: #ffd700 !important; }
.navbar .logo .logo-tail { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .5px !important; padding: 4px 10px !important; border: 1.5px solid #ffd700 !important; border-radius: 6px !important; color: #ffd700 !important; line-height: 1 !important; }

.navbar .nav-inner .nav-links {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 10px !important; flex-wrap: nowrap !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  width: auto !important; flex-basis: auto !important;
}
.navbar .nav-inner .nav-links .nav-extra-group {
  display: inline-flex !important; align-items: center !important; gap: 10px !important; position: static;
}
.navbar .nav-inner .nav-links .nav-guest {
  font-weight: 600 !important; font-size: 14px !important; color: var(--text) !important;
  text-transform: uppercase !important; letter-spacing: .3px !important;
  padding: 8px 14px !important; border-radius: 8px !important;
  text-decoration: none !important; background: transparent !important;
  border: none !important; min-height: auto !important;
}
.navbar .nav-inner .nav-links .nav-guest:hover { color: var(--primary) !important; background: rgba(255, 215, 0, 0.06) !important; }
.navbar .nav-inner .nav-links .btn-secondary.nav-cta-soft {
  background: transparent !important; border: 1px solid rgba(255, 215, 0, 0.5) !important;
  color: #ffd700 !important; padding: 8px 16px !important; border-radius: 8px !important;
  font-weight: 700 !important; font-size: 13px !important;
  text-transform: uppercase !important; letter-spacing: .4px !important;
  text-decoration: none !important; min-height: auto !important;
}
.navbar .nav-inner .nav-links .btn-secondary.nav-cta-soft:hover { background: rgba(255, 215, 0, 0.1) !important; border-color: #ffd700 !important; }
.navbar .nav-inner .nav-links .nav-cta,
.navbar .nav-inner .nav-links .btn-primary {
  font-size: 13px !important; padding: 9px 16px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .3px !important;
}

/* MOBILE */
@media (max-width: 640px) {
  .navbar { position: relative !important; }
  .navbar .nav-inner { padding: 10px 12px !important; gap: 8px !important; }
  .navbar .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; order: 99 !important; }
  .navbar .logo .logo-mark { font-size: 20px !important; letter-spacing: .5px !important; }
  .navbar .logo .logo-tail { font-size: 10px !important; padding: 3px 7px !important; border-width: 1.2px !important; }
  .navbar .logo .logo-slogan { display: none !important; }

  .navbar .nav-inner .nav-links {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 6px !important; flex: 0 0 auto !important;
  }
  .navbar .nav-inner .nav-links .nav-always {
    padding: 7px 10px !important; font-size: 11px !important; white-space: nowrap !important;
  }
  .navbar .nav-inner .nav-links .nav-always.nav-cta,
  .navbar .nav-inner .nav-links .nav-always.btn-primary {
    padding: 7px 11px !important; font-size: 11px !important;
  }
  .navbar .nav-inner .nav-links .nav-extra-group {
    display: none !important;
    position: absolute !important; top: calc(100% + 4px) !important; right: 12px !important;
    flex-direction: column !important; align-items: stretch !important; gap: 6px !important;
    min-width: 180px !important; padding: 10px !important;
    background: rgba(15, 35, 25, 0.98) !important;
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    z-index: 9999 !important;
  }
  .navbar .nav-inner .nav-links .nav-extra-group.is-open { display: flex !important; }
  .navbar .nav-inner .nav-links .nav-extra-group .nav-extra-item {
    width: 100% !important; box-sizing: border-box !important;
    text-align: center !important; padding: 11px 14px !important; font-size: 13px !important;
    border-radius: 8px !important; justify-content: center !important;
  }
}
@media (max-width: 380px) {
  .navbar .nav-inner .nav-links .nav-always:not(.nav-cta):not(.btn-primary) { display: none !important; }
}
/* === /HEADER NAV (v5) === */








/* ============================================================
   ŞİKAYET EKLERİ — PDF / DEKONT ATTACHMENT LİSTE
   Mobile-first, OWASP/clean code, !important ile spesifisite garanti
   ============================================================ */
.detail-body .complaint-docs,
.complaint-docs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  white-space: normal !important; /* parent .detail-body pre-wrap'i kir */
}

.detail-body .complaint-docs a.doc-attach,
.complaint-docs a.doc-attach,
a.doc-attach {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #e8efe9 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  transition: background .15s ease, border-color .15s ease !important;
  white-space: normal !important;
}
a.doc-attach:hover,
a.doc-attach:focus-visible {
  background: rgba(253,197,42,0.06) !important;
  border-color: rgba(253,197,42,0.45) !important;
  outline: none !important;
}

a.doc-attach .doc-attach__thumb {
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(253,197,42,0.08) !important;
  border: 1px solid rgba(253,197,42,0.30) !important;
  border-radius: 8px !important;
  color: #fdc52a !important;
}
a.doc-attach .doc-attach__thumb svg { display: block !important; }

a.doc-attach .doc-attach__info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  align-items: flex-start !important;
}
a.doc-attach .doc-attach__name {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
a.doc-attach .doc-attach__name > svg.doc-attach__clip {
  flex: 0 0 auto !important;
  width: 13px !important;
  height: 13px !important;
  color: #9ab0a4 !important;
  transform: rotate(-25deg) !important;
}
a.doc-attach .doc-attach__meta {
  display: block !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #9ab0a4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* Desktop uzerinde biraz daha buyuk */
@media (min-width: 768px) {
  a.doc-attach { padding: 14px 16px !important; gap: 14px !important; }
  a.doc-attach .doc-attach__thumb { width: 48px !important; height: 56px !important; }
  a.doc-attach .doc-attach__name { font-size: 15px !important; }
  a.doc-attach .doc-attach__meta { font-size: 13px !important; }
}