/* BusTop production stylesheet — generated from audited cascade. */

/* ===== SOURCE: style.css ===== */
/* BusTop v6 — style.css — Tam Yeniden Yazım */

/* ═══ DEĞIŞKENLER ═══════════════════════════════════════════════ */
:root {
  --primary:        #4f46e5;
  --primary-dark:   #4338ca;
  --primary-light:  #eef2ff;
  --primary-mid:    #c7d2fe;
  --accent:         #7c3aed;
  --success:        #16a34a;
  --success-light:  #dcfce7;
  --warning:        #d97706;
  --warning-light:  #fef3c7;
  --danger:         #dc2626;
  --danger-light:   #fee2e2;
  --muted:          #6b7280;
  --muted-light:    #9ca3af;
  --border:         #e5e7eb;
  --border-dark:    #d1d5db;
  --bg:             #f9fafb;
  --bg-dark:        #f3f4f6;
  --surface:        #ffffff;
  --text:           #111827;
  --text-2:         #374151;
  --sidebar-w:      240px;
  --topbar-h:       58px;
  --r:              10px;
  --r-sm:           6px;
  --r-lg:           16px;
  --shadow-sm:      0 1px 2px rgba(0,0,0,.06);
  --shadow:         0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:      0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:      0 10px 30px rgba(0,0,0,.12);
  --font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ═══ RESET ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; }
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
textarea { resize: vertical; }
input, select, textarea, button { font-family: inherit; font-size: 14px; }
strong { font-weight: 600; }
ul { list-style: none; }

/* ═══ TİPOGRAFİ ════════════════════════════════════════════════ */
h1 { font-size: clamp(22px, 4vw, 32px); font-weight: 700; line-height: 1.2; }
h2 { font-size: clamp(18px, 3vw, 22px); font-weight: 600; line-height: 1.3; margin-bottom: 16px; }
h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
p  { margin-bottom: 12px; color: var(--text-2); }
p:last-child { margin-bottom: 0; }
.muted     { color: var(--muted); font-size: 14px; }
.lead      { font-size: 17px; line-height: 1.7; color: var(--text-2); }
.eyebrow   { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); margin-bottom: 8px; }
.req       { color: var(--danger); }
.text-center { text-align: center; }
.small     { font-size: 12px; }

/* ═══ LAYOUT ═══════════════════════════════════════════════════ */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ─── TOPBAR ─── */
.topbar {
  position: sticky; top: 0; z-index: 200;
  background: var(--surface); border-bottom: 1px solid var(--border);
  height: var(--topbar-h);
}
.nav-wrap {
  display: flex; align-items: center;
  height: var(--topbar-h); gap: 12px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--text); font-size: 17px; flex-shrink: 0;
  text-decoration: none; margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand-wordmark { font-weight: 800; letter-spacing: -.5px; }

/* App topnav (giriş yapılmış) */
.topnav-app { display: flex; align-items: center; gap: 4px; }
.topnav-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  color: var(--muted); transition: background .15s, color .15s;
}
.topnav-icon:hover, .topnav-icon.active { background: var(--bg); color: var(--primary); text-decoration: none; }
.topnav-avatar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--r-sm);
  color: var(--text); transition: background .15s;
}
.topnav-avatar:hover { background: var(--bg); text-decoration: none; }
.notif-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 9px; font-weight: 700; min-width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.plan-chip {
  padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.6;
}
.plan-chip.pro  { background: #fef3c7; color: #92400e; }
.plan-chip.maxi { background: #ede9fe; color: #5b21b6; }

/* Public topnav (giriş yapılmamış) */
.topnav-public {
  display: flex; align-items: center; gap: 4px;
}
.topnav-link {
  padding: 6px 10px; border-radius: var(--r-sm); font-size: 14px;
  color: var(--text-2); transition: background .15s, color .15s; white-space: nowrap;
}
.topnav-link:hover { background: var(--bg); color: var(--primary); text-decoration: none; }
.topnav-link.active { color: var(--primary); font-weight: 600; }

/* Hamburger */
.hamburger-btn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  color: var(--text-2); transition: background .15s;
}
.hamburger-btn:hover { background: var(--bg); }

/* ─── SETUP WARNING ─── */
.setup-warning { background: var(--warning-light); border-bottom: 2px solid var(--warning); padding: 9px 20px; font-size: 13px; }

/* ─── APP LAYOUT ─── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,.4); backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

.app-wrap { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
  overflow-y: auto; z-index: 100;
}
.sidebar-inner { padding: 14px 10px 80px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 8px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.sidebar-user-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.sidebar-user-row strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-row small { font-size: 11px; color: var(--muted); display: block; }
.sidebar-close-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--r-sm);
  display: none; align-items: center; justify-content: center;
  font-size: 14px; color: var(--muted); transition: background .15s;
}
.sidebar-close-btn:hover { background: var(--bg); color: var(--text); }
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--text-2); transition: background .15s, color .15s;
  text-decoration: none;
}
.sidebar-link:hover { background: var(--bg); color: var(--primary); text-decoration: none; }
.sidebar-link.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.sidebar-badge {
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
.sidebar-logout-btn {
  width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--danger); transition: background .15s;
  cursor: pointer;
}
.sidebar-logout-btn:hover { background: var(--danger-light); }
.sidebar-plan-box {
  margin-top: 16px; padding: 14px; background: var(--primary-light);
  border-radius: var(--r); border: 1px solid var(--primary-mid);
}
.sidebar-plan-label { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.sidebar-plan-box p { font-size: 12px; margin-bottom: 10px; color: var(--text-2); }

.main-content { flex: 1; min-width: 0; overflow: hidden; }
.flash-container { position: sticky; top: var(--topbar-h); z-index: 99; }

/* ═══ BILEŞENLER ═══════════════════════════════════════════════ */

/* ─── BUTTON ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--primary); cursor: pointer; transition: all .15s;
  line-height: 1; text-decoration: none; white-space: nowrap;
  background: var(--primary); color: #fff; min-height: 40px;
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--primary); border-color: var(--border); }
.btn.ghost:hover { background: var(--primary-light); border-color: var(--primary); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn.good { background: var(--success); border-color: var(--success); color: #fff; }
.btn.light { background: #fff; color: var(--primary); border-color: #fff; }
.btn.small { padding: 5px 12px; font-size: 12px; border-radius: 6px; min-height: 36px; }
.btn.full { width: 100%; }
.btn.disabled, .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ─── CARD ─── */
.card {
  background: var(--surface); border-radius: var(--r);
  border: 1px solid var(--border); padding: 22px; box-shadow: var(--shadow-sm);
}

/* ─── BADGE ─── */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge.good  { background: var(--success-light); color: #15803d; }
.badge.warn  { background: var(--warning-light); color: #92400e; }
.badge.bad   { background: var(--danger-light); color: #b91c1c; }
.badge.muted { background: var(--bg-dark); color: var(--muted); }

/* ─── FORM ─── */
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-form.compact { gap: 12px; }
.grid-form label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 500; color: var(--text); }
.grid-form label small { font-weight: 400; color: var(--muted); font-size: 12px; }
.grid-form input,
.grid-form select,
.grid-form textarea {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; color: var(--text); background: var(--surface);
  transition: border-color .15s, box-shadow .15s; line-height: 1.5;
}
.grid-form input:focus,
.grid-form select:focus,
.grid-form textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.grid-form input::placeholder { color: var(--muted-light); }
.grid-form textarea { min-height: 88px; resize: vertical; }
.grid-form .span-2 { grid-column: 1/-1; }
.checkline { flex-direction: row !important; align-items: center !important; gap: 8px !important; font-weight: 400 !important; }
.feature-checks { display: flex; flex-wrap: wrap; gap: 14px; }
.feature-checks label { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }

/* Standalone input (outside grid-form) */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select, textarea {
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 12px; font-size: 14px; color: var(--text);
  background: var(--surface); transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }

/* ─── FILTER BAR ─── */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 20px; background: var(--surface);
  padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--border);
}
.filter-bar input, .filter-bar select { padding: 7px 10px; max-width: 200px; }

/* ─── FLASH ─── */
.flash {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 18px; font-size: 14px; gap: 10px; border-left: 4px solid;
}
.flash-success { background: var(--success-light); border-color: var(--success); color: #14532d; }
.flash-danger  { background: var(--danger-light);  border-color: var(--danger);  color: #7f1d1d; }
.flash-warning { background: var(--warning-light); border-color: var(--warning); color: #78350f; }
.flash-info    { background: var(--primary-light); border-color: var(--primary); color: #1e1b4b; }
.flash-close   { background: none; border: none; font-size: 16px; cursor: pointer; opacity: .5; flex-shrink: 0; padding: 0; }
.flash-close:hover { opacity: 1; }

/* ─── TABLE ─── */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow-x: auto; }
.table-card table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; }
.table-card thead { background: var(--bg); }
.table-card th { padding: 10px 14px; text-align: left; font-weight: 600; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table-card td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table-card tr:last-child td { border-bottom: none; }
.table-card tr:hover td { background: #fafafa; }
.table-card td b { font-size: 13px; }
.table-card td small { color: var(--muted); font-size: 11px; }
.highlight-row td { background: var(--primary-light) !important; }
.inline-form { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* ─── LIST ─── */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: none; }
.list-row > div { flex: 1; min-width: 0; }
.list-row b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.list-row span { font-size: 12px; color: var(--muted); }
.list-row a { text-decoration: none; color: inherit; }
.list-row.unread { background: #fef9c3; margin: 0 -4px; padding: 11px 4px; border-radius: var(--r-sm); }

/* ─── PAGINATION ─── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; }

/* ─── AVATAR ─── */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary-light); overflow: hidden; flex-shrink: 0; }
.avatar.sm  { width: 30px; height: 30px; font-size: 11px; }
.avatar.md  { width: 40px; height: 40px; font-size: 15px; }
.avatar.xl  { width: 54px; height: 54px; font-size: 20px; }
.avatar.logo-avatar { width: 52px; height: 52px; border-radius: var(--r-sm); }
.avatar span { font-weight: 700; color: var(--primary); }
.avatar img  { width: 100%; height: 100%; object-fit: cover; }

/* ─── EMPTY STATE ─── */
.empty-state { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty-state b { display: block; font-size: 15px; margin-bottom: 8px; color: var(--text-2); }
.empty-state p { font-size: 13px; }
.empty-state.wide { grid-column: 1/-1; }

/* ─── DEMO BOX ─── */
.demo-box { background: var(--warning-light); border: 1px solid var(--warning); border-radius: var(--r-sm); padding: 12px 16px; margin: 12px 0; font-size: 13px; }
.demo-box b { display: block; margin-bottom: 6px; font-weight: 600; }
.demo-box span { display: block; font-family: 'Courier New', monospace; color: var(--text-2); }

/* ═══ BÖLÜM / SAYFA STİLLERİ ═══════════════════════════════════ */

/* ─── SECTION ─── */
.section { padding: 60px 0; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(22px, 4vw, 30px); margin-top: 8px; }
.section-head p { color: var(--muted); font-size: 15px; max-width: 560px; margin: 10px auto 0; }
.muted-bg { background: var(--bg); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-2.align-start { align-items: start; }

/* ─── APP SECTION ─── */
.app-section { padding: 24px 20px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { margin: 2px 0 6px; }
.page-head p  { margin: 0; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

/* ─── FOOTER ─── */
.footer { border-top: 1px solid var(--border); padding: 16px 0; background: var(--surface); margin-top: auto; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.footer-links { display: flex; gap: 16px; }
.footer-links a { color: var(--muted); font-size: 13px; }
.footer-links a:hover { color: var(--primary); }

/* ─── ANA SAYFA HERO ─── */
.premium-hero { padding: 70px 0; background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%); border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero-copy h1 { font-size: clamp(26px, 4vw, 42px); margin: 10px 0 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); }
.trust-row span::before { content: '✓ '; color: var(--success); font-weight: 700; }

/* Mockup */
.dashboard-mockup { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; }
.mockup-top { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--muted); }
.mockup-top span { width: 10px; height: 10px; border-radius: 50%; }
.mockup-top span:nth-child(1){ background: #f87171; }
.mockup-top span:nth-child(2){ background: #fbbf24; }
.mockup-top span:nth-child(3){ background: #34d399; }
.mockup-top b { margin-left: auto; }
.mockup-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 14px; }
.mock-card { background: var(--bg); border-radius: var(--r-sm); padding: 12px; }
.mock-card.accent { background: var(--primary-light); }
.mock-card small { display: block; font-size: 10px; color: var(--muted); margin-bottom: 3px; }
.mock-card strong { display: block; font-size: 16px; font-weight: 800; color: var(--primary); }
.mock-card span { font-size: 10px; color: var(--muted); }
.timeline-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.timeline-card > div { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.timeline-card i { width: 7px; height: 7px; background: var(--success); border-radius: 50%; flex-shrink: 0; }
.timeline-card b { flex: 1; font-weight: 500; }
.timeline-card span { color: var(--muted); }

/* Feature & Role grids */
.feature-grid, .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; }
.feature-card, .role-card { }
.icon-pill { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; background: var(--primary-light); border-radius: 50%; font-weight: 700; color: var(--primary); font-size: 13px; margin-bottom: 12px; }
.feature-card h3, .role-card h3 { margin-bottom: 6px; }
.feature-card p, .role-card p { font-size: 14px; color: var(--muted); margin: 0; }

/* CTA */
.cta-section { background: var(--primary); }
.cta-card { background: transparent; border: none; box-shadow: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 48px 0; flex-wrap: wrap; }
.cta-card .eyebrow, .cta-card h2 { color: rgba(255,255,255,.85); }
.cta-card h2 { color: #fff; font-size: clamp(20px, 3vw, 28px); margin: 0; }

/* Pricing preview (ana sayfa) */
.pricing-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; }
.pricing-preview-card { text-align: center; }
.pricing-preview-card.featured { border-color: var(--primary); }
.pp-plan { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.pp-price { font-size: 24px; font-weight: 800; color: var(--primary); margin-bottom: 6px; }
.pp-price small { font-size: 13px; font-weight: 400; }

/* SSS grid */
.grid-2 .card h3 { font-size: 14px; margin-bottom: 6px; }
.grid-2 .card p  { font-size: 13px; color: var(--muted); margin: 0; }

/* ─── AUTH ─── */
.auth-section { min-height: calc(100vh - var(--topbar-h)); display: flex; align-items: center; justify-content: center; padding: 30px 16px; background: var(--bg); }
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface); border-radius: var(--r-lg);
  border: 1px solid var(--border); padding: 32px 28px;
  box-shadow: var(--shadow-md);
}
.auth-card.wide { max-width: 600px; }
.auth-card h1 { font-size: 22px; margin-bottom: 6px; }
.auth-card > .muted { margin-bottom: 20px; }
.auth-card .grid-form { grid-template-columns: 1fr; margin-top: 0; }
.auth-card .grid-form .span-2 { grid-column: auto; }
.auth-card .grid-form input,
.auth-card .grid-form select {
  width: 100%; display: block;
  padding: 10px 14px; font-size: 15px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.auth-card .grid-form input:focus,
.auth-card .grid-form select:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.auth-card .grid-form .btn { margin-top: 4px; padding: 11px 18px; font-size: 15px; }
.auth-links { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }
.auth-links a { color: var(--primary); }

/* ─── PRICING PAGE ─── */
.pricing-page { padding: 40px 0 60px; }
.pricing-hero { text-align: center; margin-bottom: 36px; }
.pricing-hero h1 { margin: 8px 0 10px; }
.pricing-role-label { font-size: 14px; color: var(--muted); margin-top: 12px; font-weight: 600; }

.billing-toggle { display: inline-flex; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; gap: 3px; margin: 14px 0 0; }
.billing-btn { padding: 6px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted); transition: all .15s; display: inline-flex; align-items: center; gap: 5px; }
.billing-btn.active { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.billing-btn:hover { color: var(--primary); text-decoration: none; }
.save-badge { background: var(--success-light); color: #15803d; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; }

/* Pricing tabs (rol seçici) */
.pricing-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 20px; }
.pricing-tab { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); border: 1.5px solid var(--border); background: var(--surface); transition: all .15s; }
.pricing-tab:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pricing-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Pricing cards */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; max-width: 920px; margin: 0 auto 40px; }
.pricing-card {
  position: relative; border-radius: var(--r-lg); border: 1.5px solid var(--border);
  padding: 26px 22px; background: var(--surface); display: flex; flex-direction: column; gap: 0;
  transition: box-shadow .2s;
}
.pricing-card:hover { box-shadow: var(--shadow-md); }
.pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.pricing-card.current  { border-color: var(--success); }
.plan-badge { position: absolute; top: -12px; left: 18px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: #fff; }
.plan-badge.pro-badge { background: var(--muted-bg, #6b7280); }
.current-badge { background: var(--success) !important; }
.plan-header { margin-bottom: 20px; }
.plan-name { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.plan-price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }
.price-amount { font-size: 30px; font-weight: 800; color: var(--primary); }
.price-currency { font-size: 16px; font-weight: 600; color: var(--primary); }
.price-period { font-size: 13px; color: var(--muted); margin-left: 3px; }
.plan-saving { font-size: 12px; color: var(--success); font-weight: 600; min-height: 18px; }
.plan-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; flex: 1; }
.plan-features li { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--text-2); }
.plan-features li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; margin-top: 2px; font-size: 12px; }

/* Pricing compare table */
.pricing-compare { max-width: 920px; margin: 0 auto 40px; }
.pricing-compare h2 { margin-bottom: 14px; }

/* FAQ */
.pricing-faq { max-width: 920px; margin: 0 auto; }
.pricing-faq h2 { margin-bottom: 18px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; }
.faq-item h3 { font-size: 14px; margin-bottom: 6px; }
.faq-item p  { font-size: 13px; color: var(--muted); margin: 0; }

/* ─── DASHBOARD ─── */
.dashboard-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.dash-user { display: flex; align-items: center; gap: 14px; }
.dash-user h1 { font-size: clamp(17px, 3vw, 22px); }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; margin-bottom: 22px; }
.metric-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; text-align: center; }
.metric-card span { font-size: 11px; color: var(--muted); display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.metric-card strong { font-size: 26px; font-weight: 800; color: var(--primary); }
.onboarding-card { border-color: var(--warning); background: #fffbeb; margin-bottom: 18px; }
.onboard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.onboard-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.onboard-step { padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.onboard-step.done    { background: var(--success-light); border-color: var(--success); color: var(--success); }
.onboard-step.current { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-btn { display: block; padding: 9px 12px; background: var(--bg); border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--text-2); text-align: center; transition: background .15s; }
.quick-btn:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }

/* ─── REQUEST CARDS ─── */
.request-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px; }
.request-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); padding: 16px; transition: all .15s; display: block; color: inherit; }
.request-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }
.request-card.urgent { border-left: 4px solid var(--danger); }
.request-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.request-top b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.request-card p { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.request-foot { display: flex; align-items: center; gap: 7px; }
.request-foot span { font-size: 12px; color: var(--muted); }

/* ─── VEHICLE ─── */
.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; margin-bottom: 22px; }
.vehicle-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.vehicle-card a { text-decoration: none; color: inherit; }
.vc-img { height: 150px; background: var(--bg-dark); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vc-img img { width: 100%; height: 100%; object-fit: cover; }
.no-img { color: var(--muted); font-size: 13px; }
.vc-info { padding: 12px; }
.vc-info b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.vc-info span { display: block; font-size: 12px; color: var(--muted); }
.vc-footer { padding: 9px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: var(--bg); }
.vehicle-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: 7px; }
.vehicle-gallery img { width: 100%; height: 80px; object-fit: cover; border-radius: var(--r-sm); }

/* ─── OFFERS ─── */
.offer-list { display: flex; flex-direction: column; gap: 14px; }
.offer-manage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.offer-manage-head > div:first-child b { display: block; font-size: 14px; font-weight: 600; }
.offer-manage-head > div:first-child span { font-size: 12px; color: var(--muted); }
.revise-box { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.revise-box summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary); padding: 4px 0; }
.offer-row.rich { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.offer-row.rich:last-child { border-bottom: none; }
.offer-main { flex: 1; min-width: 0; }
.offer-main b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.offer-price { display: block; font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.offer-main em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.offer-thumb { width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; background: var(--bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.offer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.offer-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.contact-info { font-size: 13px; font-weight: 600; color: var(--success); padding: 3px 0; }
.offer-info-box { background: var(--primary-light); border-radius: var(--r-sm); padding: 11px 14px; margin-bottom: 12px; }
.offer-info-box p { font-size: 13px; color: #3730a3; margin: 0; }

/* ─── NOTIFICATIONS ─── */
.notif-list { display: flex; flex-direction: column; gap: 7px; }
.notif-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; }
.notif-item.unread { border-color: var(--primary); background: var(--primary-light); }
.notif-link { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.notif-body b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.notif-body p { font-size: 12px; color: var(--muted); margin: 0 0 3px; }
.notif-body small { font-size: 11px; color: var(--muted); }
.notif-read-btn { background: none; border: none; color: var(--success); font-size: 16px; cursor: pointer; padding: 0 3px; }

/* ─── MESSAGES ─── */
.messages { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; padding: 4px 0; margin-bottom: 14px; }
.message { background: var(--bg); border-radius: var(--r); padding: 10px 13px; max-width: 80%; }
.message.mine { align-self: flex-end; background: var(--primary-light); }
.message b { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.message p { font-size: 13px; margin: 0 0 3px; }
.message small { font-size: 10px; color: var(--muted); }

/* ─── PROFILE ─── */
.profile-media-row { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }

/* ─── CHECKOUT ─── */
.checkout-summary { display: flex; align-items: center; justify-content: space-between; background: var(--primary-light); border-radius: var(--r-sm); padding: 16px; margin-bottom: 18px; }
.co-plan b { display: block; font-size: 15px; font-weight: 700; }
.co-plan span { font-size: 12px; color: var(--muted); }
.co-price { font-size: 22px; font-weight: 800; color: var(--primary); }
.checkout-info { margin-bottom: 14px; }
.checkout-info ul { padding-left: 18px; font-size: 14px; }
.checkout-info li { margin-bottom: 5px; }
.payment-methods { border: 1px solid var(--border); border-radius: var(--r); padding: 14px; margin-bottom: 14px; }

/* ─── DETAIL GRID ─── */
.detail-grid { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 14px; margin-bottom: 14px; }
.detail-grid span { color: var(--muted); font-size: 12px; }
.detail-grid b { font-weight: 600; }

/* ─── ADMIN ─── */
.admin-quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; margin-top: 22px; }
.admin-quick-card { text-decoration: none; color: inherit; transition: box-shadow .15s; }
.admin-quick-card:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.admin-quick-card h3 { margin-bottom: 5px; font-size: 14px; }
.admin-quick-card p  { font-size: 12px; color: var(--muted); margin: 0; }
.admin-action > summary { cursor: pointer; font-size: 12px; color: var(--primary); list-style: none; }
.admin-action-panel { background: var(--bg); border-radius: var(--r-sm); padding: 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 7px; }

/* ─── LEGAL ─── */
.legal-card { max-width: 740px; margin: 0 auto; }
.legal-card h2 { font-size: 20px; margin: 20px 0 8px; }
.legal-card h3 { font-size: 15px; margin: 14px 0 6px; }

/* ─── REVEAL ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .45s, transform .45s; }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .1s; }

/* ═══ RESPONSIVE ════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; left: -260px; height: 100vh; width: 260px; z-index: 200; transition: left .25s cubic-bezier(.4,0,.2,1); box-shadow: none; }
  .sidebar.open { left: 0; box-shadow: var(--shadow-lg); }
  .sidebar-close-btn { display: flex !important; }
  .hamburger-btn { display: flex !important; }
  .main-content { width: 100%; }
  .app-wrap { display: block; }
  .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .topnav-public { display: none; }
  .topnav-public.open { display: flex; flex-direction: column; align-items: stretch; position: fixed; top: var(--topbar-h); left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 16px; gap: 4px; z-index: 190; box-shadow: var(--shadow-lg); }
  .topnav-public .topnav-link { padding: 10px 12px; }
  .topnav-public .btn { width: 100%; justify-content: center; margin-top: 4px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; }
  .pricing-page .container { padding: 0 14px; }
  .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container { padding: 0 14px; }
  .app-section { padding: 16px 14px; }
  .auth-card { padding: 22px 18px; }
  .grid-form { grid-template-columns: 1fr; }
  .grid-form .span-2 { grid-column: auto; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .request-grid { grid-template-columns: 1fr; }
  .vehicle-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input, .filter-bar select { max-width: 100%; }
  .page-head { flex-direction: column; }
  .head-actions { width: 100%; }
  .cta-card { flex-direction: column; text-align: center; }
  .table-card table { font-size: 12px; }
  .table-card th, .table-card td { padding: 8px 10px; }
  .pricing-tabs { gap: 4px; }
  .pricing-tab { padding: 6px 12px; font-size: 12px; }
  .quick-actions { grid-template-columns: 1fr; }
  .checkout-summary { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 380px) {
  .metric-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 18px 14px; }
}

/* ═══ PROFILE PAGE ══════════════════════════════════════════════ */
.profile-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.profile-main   { display: flex; flex-direction: column; gap: 16px; }
.profile-side   { display: flex; flex-direction: column; gap: 0; position: sticky; top: calc(var(--topbar-h) + 16px); }

.profile-photo-section {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.profile-photo-current { flex-shrink: 0; }
.profile-photo-controls { display: flex; flex-direction: column; gap: 6px; }
.profile-photo-controls h3 { margin-bottom: 2px; font-size: 14px; }
.profile-photo-controls .muted { font-size: 12px; }

.upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  background: var(--bg-dark); border: 1.5px solid var(--border);
  cursor: pointer; transition: all .15s; color: var(--text-2);
  position: relative; overflow: hidden;
}
.upload-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.upload-btn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-btn-full {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  background: var(--bg-dark); border: 1.5px dashed var(--border);
  cursor: pointer; transition: all .15s; color: var(--muted); justify-content: center;
  position: relative; overflow: hidden;
}
.upload-btn-full:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.upload-btn-full input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.logo-thumb { margin-bottom: 4px; }
.doc-upload-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.doc-upload-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.doc-upload-form select, .doc-upload-form input[type="date"] { padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 13px; }

.pw-form { display: flex; flex-direction: column; gap: 12px; }
.pw-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.pw-form input { padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 14px; }
.pw-form small { font-size: 11px; color: var(--muted); }

@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-side { position: static; }
  .profile-photo-section { flex-direction: column; }
}

/* ═══ OFFER FORM ════════════════════════════════════════════════ */
.offer-form-wrap { border-top: 2px solid var(--border); margin-top: 16px; padding-top: 16px; }
.offer-form-wrap h3 { margin-bottom: 10px; }
.offer-submit-form { display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-size: 13px; font-weight: 500; display: flex; flex-direction: column; gap: 5px; }
.form-row input, .form-row select, .form-row textarea { padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 14px; width: 100%; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.offer-note { font-size: 13px; color: var(--text-2); margin-top: 6px; padding: 8px; background: var(--bg); border-radius: var(--r-sm); white-space: pre-wrap; }
.offer-price-free { display: block; font-size: 13px; color: var(--muted); margin-bottom: 3px; font-style: italic; }
.offer-supplier { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.supplier-name-link { font-weight: 600; font-size: 14px; color: var(--primary); }
.supplier-name-link:hover { text-decoration: underline; }
.trust-score { font-size: 12px; color: var(--warning); font-weight: 600; }

@media (max-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ═══ SUPPLIER PROFILE ══════════════════════════════════════════ */
.supplier-profile-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.supplier-main { display: flex; flex-direction: column; gap: 16px; }
.supplier-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--topbar-h) + 16px); }
.supplier-header-card { }
.supp-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.supp-header-info h2 { margin-bottom: 4px; font-size: 20px; }
.supp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.supp-bio { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.supp-bio h3, .supp-detail-grid { margin-top: 14px; }
.supp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; background: var(--bg); border-radius: var(--r-sm); }
.supp-detail-grid > div { display: flex; flex-direction: column; gap: 2px; }
.supp-detail-grid span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.supp-detail-grid b { font-size: 13px; font-weight: 600; }
.supp-vehicle-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 8px; margin-top: 10px; }
.supp-vehicle-card { background: var(--bg); border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); }
.supp-vehicle-card img { width: 100%; height: 70px; object-fit: cover; }
.no-img-sm { width: 100%; height: 70px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--bg-dark); }
.supp-vehicle-card > div { padding: 6px 8px; }
.supp-vehicle-card b { display: block; font-size: 12px; font-weight: 600; }
.supp-vehicle-card span { font-size: 11px; color: var(--muted); }
.rating-pill { background: var(--warning-light); color: var(--warning); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.contact-info-big { font-size: 18px; font-weight: 700; color: var(--success); padding: 12px; background: var(--success-light); border-radius: var(--r-sm); text-align: center; }

@media (max-width: 900px) {
  .supplier-profile-grid { grid-template-columns: 1fr; }
  .supplier-side { position: static; }
}

/* ═══ v6.1.0 GÜVENLİK & UX İYİLEŞTİRMELERİ ════════════════════ */

/* ── Spinner (loading state) ─────────────────────────────────── */
.spinner-inline {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Onay Modalı ─────────────────────────────────────────────── */
#bustop-confirm-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
}
#bustop-confirm-modal.open { display: flex; }
.confirm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.confirm-box {
  position: relative; z-index: 1;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  max-width: 400px; width: 90%;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.confirm-box h3 { margin-bottom: 10px; font-size: 17px; }
.confirm-box p  { color: var(--text-2); font-size: 14px; margin-bottom: 24px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn.danger {
  background: var(--danger); color: #fff;
  border-color: var(--danger);
}
.btn.danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* ── Inline form validation ──────────────────────────────────── */
label.field-error input,
label.field-error select,
label.field-error textarea,
.field-error input,
.field-error select,
.field-error textarea {
  border-color: var(--danger) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(220,38,38,.15);
}
.field-error-msg {
  display: block;
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
  font-weight: 500;
}

/* ── E-posta doğrulama banner ────────────────────────────────── */
.email-verify-banner {
  background: #fef3c7;
  border-bottom: 1px solid #fbbf24;
  color: #78350f;
  padding: 10px 20px;
  font-size: 13px;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.resend-verify-btn {
  background: none; border: 1px solid #d97706;
  color: #92400e; border-radius: 4px;
  padding: 2px 10px; font-size: 12px; cursor: pointer;
}
.resend-verify-btn:hover { background: #fde68a; }

/* ── Admin Audit Log sayfası ─────────────────────────────────── */
.audit-log-table { font-size: 12.5px; }
.audit-log-table .changes { color: var(--muted); font-family: monospace; font-size: 11px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Form submit disable state ───────────────────────────────── */
button[disabled], input[type="submit"][disabled] {
  opacity: .6; cursor: not-allowed; pointer-events: none;
}

/* ── Şifre güç göstergesi ────────────────────────────────────── */
.password-strength {
  margin-top: 6px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  transition: all .3s;
}
.password-strength-bar {
  height: 100%; border-radius: 2px;
  transition: width .3s, background .3s;
  width: 0%;
}
.strength-weak   { background: var(--danger); width: 25%; }
.strength-fair   { background: var(--warning); width: 50%; }
.strength-good   { background: #3b82f6; width: 75%; }
.strength-strong { background: var(--success); width: 100%; }
.password-strength-label { font-size: 11px; margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN SAYFASI — FIX #19: Premium & Mobil Uyumlu Giriş Tasarımı
   ═══════════════════════════════════════════════════════════════ */

/* Tam sayfa wrap */
.login-page-wrap {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--bg);
}

/* İki kolonlu split layout */
.login-split {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Sol: Marka paneli */
.login-brand-panel {
  flex: 1;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}
.login-brand-panel::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}
.login-brand-panel::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 240px; height: 240px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}

.login-brand-inner {
  position: relative;
  z-index: 1;
  max-width: 380px;
  color: #fff;
}

.login-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}
.login-wordmark {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}

.login-tagline {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 32px;
}

.login-feature-list {
  list-style: none;
  padding: 0; margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255,255,255,.85);
  font-size: 15px;
  line-height: 1.4;
}
.lf-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.login-brand-copy {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin: 0;
}

/* Sağ: Form paneli */
.login-form-panel {
  flex: 0 0 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--bg);
}

/* Kart */
.login-card {
  width: 100%;
  max-width: 400px;
}

.login-card-header {
  margin-bottom: 28px;
}
.login-card-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.2;
}
.login-card-header p {
  font-size: 14px;
  color: var(--muted-color, #6b7280);
  margin: 0;
  line-height: 1.5;
}

/* Form alanları */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 20px;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.login-field input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  box-sizing: border-box;
}
.login-field input:focus {
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.login-field input::placeholder {
  color: var(--muted-color, #9ca3af);
}

/* CTA butonu */
.login-cta {
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* Alt linkler */
.login-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 13.5px;
  color: var(--muted-color, #6b7280);
  margin-bottom: 12px;
  align-items: center;
}
.login-links a {
  color: var(--primary, #4f46e5);
  text-decoration: none;
  font-weight: 500;
}
.login-links a:hover { text-decoration: underline; }
.login-links-sep { color: var(--border); }
.login-back {
  font-size: 13px;
  margin-top: 4px;
}
.login-back a {
  color: var(--muted-color, #6b7280);
  text-decoration: none;
}
.login-back a:hover { color: var(--primary, #4f46e5); }

/* Demo box — daha kompakt */
.login-card .demo-box {
  margin-bottom: 20px;
  border-radius: 10px;
}

/* Responsive — tablet ve mobil */
@media (max-width: 860px) {
  .login-split { flex-direction: column; }
  .login-brand-panel {
    flex: none;
    padding: 32px 24px 28px;
    min-height: auto;
  }
  .login-brand-inner { max-width: 100%; }
  .login-tagline { font-size: 20px; margin-bottom: 20px; }
  .login-feature-list { gap: 12px; margin-bottom: 16px; }
  .login-brand-copy { display: none; }
  .login-form-panel {
    flex: none;
    padding: 32px 20px 40px;
  }
  .login-card { max-width: 100%; }
}

@media (max-width: 480px) {
  .login-brand-panel { padding: 24px 16px 20px; }
  .login-brand-logo { display: none; }
  .login-form-panel { padding: 24px 16px 32px; }
  .login-card-header h1 { font-size: 22px; }
  .login-cta { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BusTop v7.0.0 — Vitrin + Host + İlan Geliştirmeleri
   ═══════════════════════════════════════════════════════════════ */

/* ── Vitrin Genel ─────────────────────────────────────────────── */
.vitrin-notice {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.vitrin-notice.info    { background: var(--primary-light); border-left: 4px solid var(--primary); }
.vitrin-notice.warning { background: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; }
.vitrin-notice a       { font-weight: 600; }

/* ── Filtre Satırları ─────────────────────────────────────────── */
.vitrin-filters { margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.filter-row     { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row a   {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.filter-row a:hover,
.filter-row a.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── Vitrin Grid ──────────────────────────────────────────────── */
.vitrin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 640px) { .vitrin-grid { grid-template-columns: 1fr; } }

/* ── Vitrin Kart ──────────────────────────────────────────────── */
.vitrin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.vitrin-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.vitrin-card.featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.vitrin-card-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.vitrin-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.vitrin-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vitrin-type-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  padding: 3px 9px;
  border-radius: 20px;
}
.vitrin-loc { font-size: 12px; color: var(--text-muted); }
.badge-featured { font-size: 11px; background: #fef3c7; color: #92400e; padding: 3px 9px; border-radius: 20px; font-weight: 600; }
.badge-verified { color: var(--success); font-size: 13px; font-weight: 700; }
.badge-plan { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; }
.badge-plan.pro  { background: #e0e7ff; color: #3730a3; }
.badge-plan.maxi { background: #fef3c7; color: #92400e; }
.vitrin-card-title { font-size: 15px; font-weight: 600; margin: 0; }
.vitrin-card-title a { color: inherit; text-decoration: none; }
.vitrin-card-title a:hover { color: var(--primary); }
.vitrin-card-desc { font-size: 13px; color: var(--text-muted); margin: 0; flex: 1; }
.vitrin-confirmed-tag {
  font-size: 12px;
  color: var(--success);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 4px 10px;
  border-radius: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.vitrin-confirmed-tag span { color: var(--text-muted); }

/* ── Vitrin Kart Footer ───────────────────────────────────────── */
.vitrin-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.vitrin-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.vitrin-user-row > div { min-width: 0; }
.vitrin-user-row strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitrin-user-row small  { font-size: 11px; color: var(--text-muted); }
.vitrin-card-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.vitrin-action {
  font-size: 18px;
  text-decoration: none;
  opacity: .5;
  transition: opacity .15s, transform .15s;
  line-height: 1;
}
.vitrin-action:hover, .vitrin-action.saved { opacity: 1; transform: scale(1.15); }
.vitrin-card-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 6px;
}

/* ── Vitrin Boş Durum ─────────────────────────────────────────── */
.vitrin-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.vitrin-empty .empty-icon { font-size: 64px; margin-bottom: 16px; line-height: 1; }
.vitrin-empty h3 { font-size: 20px; margin-bottom: 8px; color: var(--text); }

/* ── Vitrin Limit Bar ─────────────────────────────────────────── */
.vitrin-limit-info {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.vitrin-limit-info strong { color: var(--primary); }

/* ── Vitrin Plan Lock ─────────────────────────────────────────── */
.plan-lock {
  background: #f8f9fa;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-muted);
  grid-column: 1/-1;
}
.plan-lock a { color: var(--primary); font-weight: 600; }

/* ── Vitrin Sosyal Not ────────────────────────────────────────── */
.vitrin-social-note {
  font-size: 18px;
  font-style: italic;
  color: var(--text-muted);
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ── Vitrin Detay ─────────────────────────────────────────────── */
.vitrin-detail-card { padding: 28px; }
.vitrin-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vitrin-detail-title { font-size: 26px; font-weight: 700; margin: 0 0 20px; }
.vitrin-detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.vitrin-detail-gallery img { width: 100%; border-radius: 8px; object-fit: cover; object-position: center; aspect-ratio: 1 / 1; }
.vitrin-detail-body { font-size: 15px; line-height: 1.8; white-space: pre-wrap; margin-bottom: 20px; }
.vitrin-detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.vitrin-detail-stats { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); }
.vitrin-tag-row {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .vitrin-detail-title { font-size: 20px; }
  .vitrin-detail-footer { flex-direction: column; align-items: flex-start; }
}

/* ── Admin Tab Row ────────────────────────────────────────────── */
.tab-row { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--border); }
.tab-row a {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all .15s;
  border-radius: 6px 6px 0 0;
}
.tab-row a:hover { color: var(--text); background: var(--bg); }
.tab-row a.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ── İlan Kartları İyileştirme ────────────────────────────────── */
.request-card {
  position: relative;
  overflow: hidden;
}
.request-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--border);
  border-radius: 4px 0 0 4px;
  transition: background .15s;
}
.request-card:hover::before { background: var(--primary); }

/* ── Host Profil Form ─────────────────────────────────────────── */
.host-profile-section { margin-top: 24px; }

/* ── Genel Mobil İyileştirme ──────────────────────────────────── */
@media (max-width: 480px) {
  .vitrin-filters { gap: 6px; }
  .filter-row a   { font-size: 12px; padding: 5px 11px; }
  .vitrin-card-body { padding: 12px; }
  .vitrin-limit-info { font-size: 12px; }
}

/* ── Boş Durum Genel ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 52px; margin-bottom: 12px; line-height: 1; }
.empty-state h3 { font-size: 18px; margin: 0 0 8px; color: var(--text); }
.empty-state p  { margin: 0 0 16px; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════
   v8.0.0 — SOSYAL AKiŞ, STORY, MOBİL ALT MENÜ, İLANLAR CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── MOBİL ALT MENÜ ──────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 200;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex; align-items: center; justify-content: space-around; }
  .footer-with-mobile-nav { padding-bottom: 80px; }
  .main-content { padding-bottom: 80px; }
  .hide-mobile { display: none !important; }
}
.mbn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; color: var(--muted); text-decoration: none;
  font-size: 10px; font-weight: 500; min-width: 48px; position: relative;
  transition: color .2s;
}
.mbn-item.active { color: var(--primary); }
.mbn-item svg { width: 22px; height: 22px; stroke-width: 1.8; }
.mbn-item.mbn-create { color: var(--primary); }
.mbn-create-btn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 0;
  box-shadow: 0 4px 16px rgba(79,70,229,.35);
}
.mbn-create-btn svg { stroke: white; }
.mbn-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--danger); color: white; font-size: 9px;
  border-radius: 50%; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ── STORY HALKALARI ─────────────────────────────────────────── */
.story-row-wrap {
  margin: 0 -16px 16px; overflow: hidden;
}
.story-row {
  display: flex; gap: 12px; overflow-x: auto; padding: 8px 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.story-row::-webkit-scrollbar { display: none; }
.story-item, .story-add-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; flex-shrink: 0; min-width: 68px;
}
.story-item span, .story-add-item span {
  font-size: 11px; color: var(--text); text-align: center;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.story-ring {
  width: 60px; height: 60px; border-radius: 50%;
  border: 2.5px solid var(--primary); padding: 2px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  display: flex; align-items: center; justify-content: center;
}
.story-ring.viewed {
  background: none; border-color: var(--border);
}
.story-ring .avatar { width: 52px !important; height: 52px !important; border-radius: 50%; border: 2px solid var(--bg); }
.story-add-btn {
  position: relative; display: block; text-decoration: none;
}
.story-add-btn .avatar { width: 60px !important; height: 60px !important; border-radius: 50%; }
.story-add-plus {
  position: absolute; bottom: 0; right: -2px;
  width: 22px; height: 22px; background: var(--primary); color: white;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: bold; border: 2px solid var(--bg);
}
.story-empty-cta {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
}
.story-empty-cta p { margin: 0; font-size: 13px; }
.story-add-btn-empty { position: relative; display: block; }
.story-add-btn-empty .avatar { width: 56px !important; height: 56px !important; border-radius: 50%; }

/* ── STORY MODAL ─────────────────────────────────────────────── */
/* Story modal — Instagram story 9:16 dikey format */
.story-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.story-modal-inner {
  position: relative;
  width: 100%;
  max-width: 400px;          /* Desktop: 400px genişlik */
  height: 100%;
  max-height: calc(400px * 16/9);  /* 9:16 oranı — 711px */
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.8);
}
@media (max-width: 600px) {
  .story-modal-inner {
    border-radius: 0;
    max-width: 100vw;
    max-height: 100dvh;   /* Tam ekran mobil */
  }
}
.story-progress-bar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  height: 3px;
  background: rgba(255,255,255,.3);
  border-radius: 3px;
  z-index: 20;
}
.story-progress-fill {
  height: 100%; background: white; width: 0%;
  border-radius: 3px;
  transition: width linear;
}
.story-close-btn {
  position: absolute; top: 20px; right: 14px;
  background: rgba(0,0,0,.5); border: none; color: white;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  font-size: 20px; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .15s;
}
.story-close-btn:hover { background: rgba(0,0,0,.75); }
/* Story içeriği — tam dolu, 9:16 alan */
.story-content {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
/* Story görseli — tam alanı doldur, dikey formatta */
.story-content img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Tam doldur — kenarlar kırpılabilir */
  object-position: center center;
  border-radius: 0;
}
.story-content .story-text-only {
  color: white; font-size: 20px; font-weight: 700; text-align: center;
  padding: 40px 24px;
  background: linear-gradient(135deg,var(--primary),#7c3aed);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* Metin overlay — görselin üstünde */
.story-text-overlay-tmp {
  position: absolute;
  bottom: 80px;
  left: 0; right: 0;
  padding: 16px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: white;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  z-index: 15;
}
.story-nav {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%); display: flex; justify-content: space-between;
  pointer-events: none; z-index: 20;
}
.story-prev-btn, .story-next-btn {
  pointer-events: all;
  background: transparent;
  border: none;
  color: white;
  width: 50px;
  height: 100px;
  cursor: pointer;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.8;
  transition: opacity .15s;
}
.story-prev-btn:hover, .story-next-btn:hover { opacity: 1; }
.story-prev-btn { padding-left: 4px; }
.story-next-btn { padding-right: 4px; }
/* Footer — kullanıcı bilgisi */
.story-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 16px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 18;
  pointer-events: none;
}
/* Story header — progress bar + close */
.story-header-zone {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(rgba(0,0,0,.4), transparent);
  z-index: 19;
  pointer-events: none;
}

/* ── SOSYAL AKiŞ / FEED ─────────────────────────────────────── */
.feed-page { background: var(--surface); min-height: 100vh; }
.feed-page-inner {
  display: grid; grid-template-columns: minmax(0,600px) 280px;
  gap: 24px; align-items: start; padding-top: 24px;
}
@media (max-width: 960px) {
  .feed-page-inner { grid-template-columns: 1fr; }
  .feed-side-col { display: none; }
}
.feed-main-col { display: flex; flex-direction: column; gap: 16px; }
.feed-side-col { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }

/* Paylaşım kutusu */
.share-box { padding: 16px !important; }
.share-box-inner {
  display: flex; gap: 12px; align-items: center; margin-bottom: 12px;
}
.share-box-input {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: 24px; padding: 10px 16px; color: var(--muted);
  cursor: pointer; text-decoration: none; display: block; font-size: 14px;
  transition: background .2s, border-color .2s;
}
.share-box-input:hover { background: var(--bg); border-color: var(--primary); }
.share-box-actions {
  display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border);
  padding-top: 12px; margin-top: 4px;
}
.share-action-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; text-decoration: none; font-weight: 500;
  transition: background .2s, border-color .2s;
}
.share-action-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }

/* Feed kartları */
.feed-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  transition: box-shadow .2s;
}
.feed-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.feed-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px; gap: 8px;
}
.feed-user-row {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
}
.feed-user-row .avatar { width: 44px !important; height: 44px !important; border-radius: 50%; }
.feed-user-row strong { display: block; font-size: 14px; font-weight: 600; }
.feed-user-row small { color: var(--muted); font-size: 12px; }
.feed-type-badge {
  background: var(--surface); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 12px; font-size: 11px;
  white-space: nowrap; color: var(--muted); flex-shrink: 0;
}
.feed-social-note {
  padding: 0 16px 8px; color: var(--muted); font-style: italic; font-size: 14px;
}
.feed-card-title {
  padding: 0 16px 8px; font-size: 16px; margin: 0;
}
.feed-card-title a { color: var(--text); text-decoration: none; }
.feed-card-title a:hover { color: var(--primary); }
.feed-card-body {
  padding: 0 16px 12px; font-size: 14px; color: var(--muted); margin: 0;
  line-height: 1.6;
}
/* Dashboard feed kartı görseli — v12.2: feed-card-img-wrap kullanılıyor */
.feed-card-actions {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.feed-action-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; text-decoration: none; font-weight: 500;
  cursor: pointer; transition: all .2s;
}
.feed-action-btn:hover { border-color: var(--primary); color: var(--primary); }
.feed-action-btn.like-btn.liked { color: #e11d48; border-color: #e11d48; background: rgba(225,29,72,.05); }
.feed-action-btn-right { margin-left: auto; }
.feed-load-more { text-align: center; padding: 16px; }

/* Feed stream */
.feed-stream { display: flex; flex-direction: column; gap: 16px; }
.feed-empty { text-align: center; padding: 48px; background: var(--bg); border-radius: 16px; }

/* Telefon doğrulama uyarı kartı */
.phone-warning-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px !important; border: 1.5px solid var(--warning, #f59e0b) !important;
  background: rgba(245,158,11,.05) !important;
}
.pw-icon { font-size: 32px; flex-shrink: 0; }
.pw-body { flex: 1; }
.pw-body b { display: block; margin-bottom: 4px; }
.pw-body p { margin: 0; color: var(--muted); font-size: 13px; }
.phone-verify-badge {
  display: inline-block; background: var(--warning, #f59e0b); color: white;
  padding: 2px 8px; border-radius: 12px; font-size: 10px; text-decoration: none;
  font-weight: 600; margin-top: 4px;
}

/* Sidebar widget */
.sidebar-widget { padding: 16px !important; }
.sidebar-widget h3 { margin: 0 0 12px; font-size: 15px; }
.mini-listing-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mini-listing-item {
  display: block; padding: 10px; background: var(--surface);
  border-radius: 8px; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); transition: border-color .2s;
}
.mini-listing-item:hover { border-color: var(--primary); }
.mli-title { font-size: 13px; font-weight: 600; }
.mli-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.mini-profile-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mini-profile-item {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--text); padding: 6px 8px; border-radius: 8px; transition: background .2s;
}
.mini-profile-item:hover { background: var(--surface); }
.mini-profile-item .avatar { width: 36px !important; height: 36px !important; border-radius: 50%; }
.mini-profile-item span { font-size: 13px; font-weight: 600; display: block; }
.mini-profile-item small { font-size: 11px; color: var(--muted); }
.sidebar-cta { text-align: center; }
.sidebar-cta h3 { margin-bottom: 8px; }
.sidebar-cta p { margin-bottom: 12px; font-size: 13px; }

/* ── İLANLAR SAYFASI (Sahibinden benzeri) ────────────────────── */
.listings-page { min-height: 100vh; }
.listings-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 24px 0 16px; gap: 16px; flex-wrap: wrap;
}
.listings-header h1 { margin: 0; font-size: 28px; }
.listings-count { font-size: 18px; color: var(--muted); font-weight: 400; }
.listings-login-cta {
  background: var(--surface); border-radius: 12px; padding: 20px;
  text-align: center; margin: 0 0 16px; border: 1px solid var(--border);
}
.listings-login-cta p { margin: 0 0 12px; color: var(--muted); }
.listings-login-cta .btn { margin: 0 4px; }
.listings-layout {
  display: grid; grid-template-columns: 240px minmax(0,1fr);
  gap: 24px; align-items: start; padding-bottom: 48px;
}
@media (max-width: 768px) {
  .listings-layout { grid-template-columns: 1fr; }
  .listings-sidebar-col { display: none; }
  .listings-sidebar-col.open { display: block; }
}
.listings-filter-panel {
  position: sticky; top: 80px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .listings-filter-panel {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 300;
    border-radius: 0; overflow-y: auto; display: none;
  }
  .listings-filter-panel.open { display: block; }
}
.filter-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--border);
}
.filter-panel-head h3 { margin: 0; font-size: 15px; }
.filter-clear-btn { color: var(--primary); font-size: 13px; text-decoration: none; }
.filter-group { padding: 12px; border-bottom: 1px solid var(--border); }
.filter-group h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; }
.filter-option {
  display: block; padding: 7px 10px; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: 13px;
  transition: all .15s; cursor: pointer;
}
.filter-option:hover { background: var(--surface); }
.filter-option.active { background: var(--primary); color: white; font-weight: 600; }
.filter-option.urgent-filter { color: var(--danger); font-weight: 600; }
.filter-option.urgent-filter.active { background: var(--danger); color: white; }
.filter-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: white; font-size: 10px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%; margin-left: 4px;
}
.listings-search-bar {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
}
.listings-search-input {
  flex: 1; min-width: 200px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  color: var(--text); font-size: 14px; outline: none;
}
.listings-search-input:focus { border-color: var(--primary); }
.listings-sort-select {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.filter-toggle-btn { display: none !important; }
@media (max-width: 768px) {
  .filter-toggle-btn { display: inline-flex !important; }
}
.listings-grid { display: flex; flex-direction: column; gap: 12px; }
.listing-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; transition: all .2s;
}
.listing-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.listing-card.urgent { border-left: 3px solid var(--danger); }
.listing-card-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.listing-card-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.listing-type-badge {
  background: var(--surface); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600;
}
.listing-card-meta-row { display: flex; gap: 12px; margin-left: auto; color: var(--muted); font-size: 12px; }
.listing-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.listing-title a { color: var(--text); text-decoration: none; }
.listing-title a:hover { color: var(--primary); }
.listing-desc { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.listing-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px;
}
.listing-agency {
  display: flex; align-items: center; gap: 8px;
}
.listing-agency .avatar { width: 32px !important; height: 32px !important; border-radius: 50%; }
.listing-agency-name { font-size: 13px; font-weight: 600; }
.listing-card-actions { display: flex; align-items: center; gap: 8px; }
.listing-offers { font-size: 12px; color: var(--muted); }
.listing-time { font-size: 12px; color: var(--muted); }
.listings-empty {
  text-align: center; padding: 48px 24px; background: var(--bg);
  border-radius: 12px; border: 1px solid var(--border); display: flex;
  flex-direction: column; align-items: center; gap: 12px;
}
.listings-empty .empty-icon { font-size: 48px; }

/* ── PROFİLLER SAYFASI ───────────────────────────────────────── */
.profiles-role-filters {
  display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
}
.role-filter-btn {
  padding: 8px 16px; border-radius: 24px; border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500;
  transition: all .2s;
}
.role-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.role-filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.profiles-search-form {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.profiles-search-input, .profiles-city-input {
  flex: 1; min-width: 150px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 14px;
}
.profiles-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
@media (max-width: 480px) {
  .profiles-grid { grid-template-columns: repeat(2, 1fr); }
}
.profile-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 16px; text-align: center;
  text-decoration: none; color: var(--text);
  transition: all .2s; display: flex; flex-direction: column; align-items: center;
}
.profile-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-2px); }
.profile-card-avatar { position: relative; margin-bottom: 10px; }
.profile-card-avatar .avatar { width: 64px !important; height: 64px !important; border-radius: 50%; }
.profile-plan-ring {
  position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent;
}
.profile-plan-ring.pro { border-color: #6366f1; }
.profile-plan-ring.maxi { border-color: #f59e0b; }
.profile-card-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.profile-card-role { font-size: 11px; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.profile-card-city { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.profile-card-rating { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.profile-card-activity { font-size: 10px; }
.profiles-empty { grid-column: 1/-1; text-align: center; padding: 48px; }

/* ── TELEFON DOĞRULAMA ────────────────────────────────────────── */
.phone-verify-card { text-align: center; padding: 40px 32px !important; }
.phone-verify-icon { font-size: 56px; margin-bottom: 16px; }
.phone-verify-card h1 { font-size: 24px; margin-bottom: 8px; }
.phone-verify-why {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 20px 0; text-align: left;
}
.why-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; font-size: 13px;
}
.phone-verify-form { margin-top: 20px; }
.phone-verify-form label { text-align: left; margin-bottom: 16px; }
.otp-input-group { margin: 20px 0; }
.otp-input {
  width: 100%; padding: 16px; text-align: center; font-size: 28px;
  letter-spacing: 12px; border: 2px solid var(--border); border-radius: 12px;
  background: var(--bg); color: var(--text); font-weight: 700;
  outline: none; transition: border-color .2s;
}
.otp-input:focus { border-color: var(--primary); }

/* ── YORUM SİSTEMİ ───────────────────────────────────────────── */
.vitrin-comments-section { padding: 20px !important; }
.vitrin-comments-section h3 { margin: 0 0 16px; }
.comments-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.comment-item { display: flex; gap: 10px; }
.comment-avatar .avatar { width: 36px !important; height: 36px !important; border-radius: 50%; flex-shrink: 0; }
.comment-body { flex: 1; background: var(--surface); border-radius: 12px; padding: 10px 14px; }
.comment-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.comment-header strong { font-size: 13px; }
.comment-header small { color: var(--muted); font-size: 11px; }
.comment-delete-form { margin-left: auto; }
.comment-delete-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 50%;
  transition: background .2s;
}
.comment-delete-btn:hover { background: var(--danger); color: white; }
.comment-text { margin: 0; font-size: 14px; line-height: 1.5; }
.comment-form { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.comment-form-row {
  display: flex; gap: 10px; align-items: flex-start;
}
.comment-form-row .avatar { width: 36px !important; height: 36px !important; border-radius: 50%; flex-shrink: 0; }
.comment-form-row textarea {
  flex: 1; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; background: var(--bg); color: var(--text);
  resize: none; font-size: 14px; font-family: inherit;
  transition: border-color .2s; outline: none;
}
.comment-form-row textarea:focus { border-color: var(--primary); }
.comment-form-row .btn { flex-shrink: 0; align-self: flex-end; }
.comment-login-cta { text-align: center; padding: 20px 0; }
.comments-empty { text-align: center; padding: 24px; color: var(--muted); }

/* vitrin detail aksiyon row */
.vitrin-detail-stats-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.vitrin-detail-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── ONBOARDING WIDGET ────────────────────────────────────────── */
.phone-verify-badge {
  display: inline-block; background: #f59e0b; color: white;
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 12px;
  text-decoration: none; margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — PREVIEW SECTİONS (v8.0.0)
   ═══════════════════════════════════════════════════════════════ */
.section-cta { text-align: center; margin-top: 28px; }
.home-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 768px) { .home-preview-grid { grid-template-columns: 1fr; } }
.preview-card { overflow: hidden; padding: 0 !important; }
.preview-card-img img { width: 100%; height: 160px; object-fit: cover; display: block; }
.preview-card-body { padding: 16px; }
.preview-user-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.preview-user-row strong { display: block; font-size: 13px; }
.preview-user-row small { color: var(--muted); font-size: 11px; }
.preview-card-body h4 { font-size: 14px; margin: 0 0 6px; }
.preview-card-body .small { font-size: 12px; color: var(--muted); }
.preview-stats { font-size: 12px; color: var(--muted); margin-top: 8px; }
.profiles-preview-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .profiles-preview-grid { grid-template-columns: repeat(2, 1fr); } }
.profile-preview-card { text-align: center; padding: 20px 12px !important; }
.profile-preview-card .avatar { margin: 0 auto 10px; }
.profile-preview-info strong { display: block; font-size: 13px; margin-bottom: 2px; }
.profile-preview-info small { display: block; font-size: 11px; color: var(--muted); }
.home-listings-preview { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.home-listing-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hlr-title { flex: 1; font-weight: 600; font-size: 14px; }
.hlr-meta { font-size: 12px; color: var(--muted); min-width: 160px; }

/* ═══════════════════════════════════════════════════════════════
   STORY RING ANİMASYON
   ═══════════════════════════════════════════════════════════════ */
@keyframes storyPulse {
  0%,100% { box-shadow: 0 0 0 3px var(--primary), 0 0 0 5px rgba(var(--primary-rgb,79,70,229),.3); }
  50%      { box-shadow: 0 0 0 3px var(--primary), 0 0 0 8px rgba(var(--primary-rgb,79,70,229),.15); }
}
.story-ring:not(.viewed) { animation: storyPulse 2s infinite; }

/* ═══════════════════════════════════════════════════════════════
   FEED CARD — HOVER EFFECTs
   ═══════════════════════════════════════════════════════════════ */
.feed-card { transition: box-shadow .2s, transform .2s; }
.feed-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.feed-action-btn.like-btn.liked .like-icon { display: inline-block; animation: likePopIn .3s cubic-bezier(.36,.07,.19,.97); }
@keyframes likePopIn {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   COMMENT SİSTEMİ — DETAY
   ═══════════════════════════════════════════════════════════════ */
.comment-delete-form { display: inline; }
.comment-delete-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 18px; padding: 0 4px;
  line-height: 1; opacity: .5; transition: opacity .2s;
}
.comment-delete-btn:hover { opacity: 1; color: var(--danger); }
.comments-empty { padding: 24px; text-align: center; }
.feed-social-note { font-style: italic; color: var(--muted); font-size: 14px; padding: 8px 0; border-left: 3px solid var(--primary); margin: 8px 0; padding-left: 12px; }

/* ═══════════════════════════════════════════════════════════════
   BADGE VE PUAN
   ═══════════════════════════════════════════════════════════════ */
.badge-verified { color: var(--success, #16a34a); font-size: 12px; font-weight: 600; }
.badge-plan { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; }
.badge-plan.pro { background: #dbeafe; color: #1d4ed8; }
.badge-plan.maxi { background: #fef3c7; color: #d97706; }
.badge-featured { background: #fef9c3; color: #ca8a04; font-size: 11px; padding: 2px 8px; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   LOAD MORE / EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */
.feed-load-more { text-align: center; padding: 20px; }
.feed-empty { text-align: center; padding: 60px 20px; }
.feed-empty .empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.feed-empty h3 { margin-bottom: 8px; }
.feed-empty p { color: var(--muted); margin-bottom: 20px; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN STORY TABs
   ═══════════════════════════════════════════════════════════════ */
.tab-row { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--border); }
.tab-row a { padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab-row a.active, .tab-row a:hover { color: var(--primary); border-color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   v9.0.0 — PAYLAŞ MODAL (Share Type Selector)
   ═══════════════════════════════════════════════════════════════ */
.share-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.52);
  z-index: 9000;
  align-items: flex-end;
  justify-content: center;
}
.share-modal-overlay.open { display: flex; }
@media (min-width: 640px) {
  .share-modal-overlay { align-items: center; }
}
.share-modal {
  background: var(--card-bg);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 12px 0 32px;
  box-shadow: 0 -8px 32px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.share-modal-overlay.open .share-modal { transform: translateY(0); }
@media (min-width: 640px) {
  .share-modal { border-radius: 16px; transform: scale(.94); opacity: 0; }
  .share-modal-overlay.open .share-modal { transform: scale(1); opacity: 1; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s; }
}
.share-modal-handle {
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.share-modal-title {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.share-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
}
.share-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  transition: border-color .15s, background .15s, transform .12s;
  cursor: pointer;
}
.share-option-card:hover {
  border-color: var(--primary);
  background: var(--card-bg);
  transform: translateY(-2px);
}
.share-option-icon {
  font-size: 32px;
  line-height: 1;
}
.share-option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.share-option-desc {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}
.share-modal-close {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 20px;
}

/* ═══════════════════════════════════════════════════════════════
   v9.0.0 — RESMİ HESAP ROZETİ
   ═══════════════════════════════════════════════════════════════ */
.official-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #1d4ed8;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: .3px;
}
.official-badge::before { content: '✓'; }
.official-badge-ring {
  box-shadow: 0 0 0 3px #1d4ed8, 0 0 0 5px #fff;
}
.feed-card.official-post {
  border-left: 3px solid #1d4ed8;
}
.official-post-label {
  font-size: 11px;
  color: #1d4ed8;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pinned-post-label {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   v9.0.0 — HİKAYE PAYLAŞIM EKRANI İYİLEŞTİRMELERİ
   ═══════════════════════════════════════════════════════════════ */
.story-create-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .story-create-layout { grid-template-columns: 1fr 380px; }
}
.story-preview-frame {
  aspect-ratio: 16/9;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-preview-placeholder {
  color: #666;
  text-align: center;
}
.story-preview-placeholder span { font-size: 48px; display: block; margin-bottom: 8px; }
.story-preview-text-overlay {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  pointer-events: none;
}
.upload-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.upload-drop-zone:hover, .upload-drop-zone.drag-over {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 37,99,235),.04);
}
.upload-drop-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.upload-drop-icon { font-size: 36px; margin-bottom: 8px; }
.upload-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
  display: none;
}
.upload-progress-fill {
  height: 100%;
  background: var(--primary);
  width: 0%;
  transition: width .3s;
}
.upload-progress.active { display: block; }

/* ═══════════════════════════════════════════════════════════════
   v9.0.0 — VİTRİN GÖNDERI PAYLAŞIM EKRANI
   ═══════════════════════════════════════════════════════════════ */
.post-create-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .post-create-layout { grid-template-columns: 1fr 360px; }
}
.image-grid-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
  gap: 8px;
  margin-top: 10px;
}
.image-grid-preview .thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}
.image-grid-preview .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-grid-preview .thumb .remove-thumb {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px; height: 20px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-warning-box {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #92400e;
  display: none;
  margin-top: 8px;
}
.content-warning-box.visible { display: block; }

/* ═══════════════════════════════════════════════════════════════
   v9.0.0 — MOBIL ALT MENÜ + BUTON
   ═══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav .nav-share-btn {
  background: var(--primary);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37,99,235,.35);
  transition: transform .12s, box-shadow .12s;
}
.mobile-bottom-nav .nav-share-btn:active {
  transform: scale(.92);
  box-shadow: 0 1px 4px rgba(37,99,235,.2);
}

/* ════════════════════════════════════════════════════════════════
   v6.1.1 — VİTRİN SOSYAL AKIŞ + ROL UYARI + MOBİL FIX
   ════════════════════════════════════════════════════════════════ */

/* ── Vitrin Sayfa Düzeni ─────────────────────────────────────── */
.vitrin-page { padding: 0; }
.vitrin-page-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .vitrin-page-layout { grid-template-columns: 1fr; }
  .vitrin-side-col { display: none; }
}

.vitrin-page-header { margin-bottom: 16px; }
.vitrin-page-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.vitrin-page-sub { font-size: 14px; margin: 0; }

/* ── Vitrin Composer (Paylaşım Kutusu) ──────────────────────── */
.vitrin-composer-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.vitrin-composer-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.vitrin-composer-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: block;
}
.vitrin-composer-input:hover { border-color: var(--primary); background: var(--bg-card); }
.vitrin-composer-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.vitrin-composer-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: color .12s, border-color .12s;
}
.vitrin-composer-btn:hover { color: var(--primary); border-color: var(--primary); }
.vitrin-composer-post-btn { margin-left: auto; }
.composer-phone-note {
  font-size: 12px;
  color: var(--warning);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 6px 12px;
  margin-top: 10px;
}

/* ── Vitrin Filtreler ────────────────────────────────────────── */
.vitrin-filters { margin-bottom: 16px; }
.vitrin-filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  margin-bottom: 8px;
}
.vitrin-filter-scroll::-webkit-scrollbar { display: none; }
.vitrin-type-filters { border-top: 1px solid var(--border); padding-top: 8px; }
.vitrin-filter-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--bg);
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.vitrin-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.vitrin-filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Vitrin Feed Kartı ───────────────────────────────────────── */
.vitrin-feed-stream {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 614px;    /* Instagram feed genişliği — fazla geniş olmasın */
  width: 100%;
}
.vitrin-feed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: box-shadow .15s;
}
.vitrin-feed-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.vitrin-feed-card.official { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-color: #7dd3fc; }
.vitrin-feed-card.featured { border-color: var(--primary); border-width: 2px; }

.vitrin-pin-label { font-size: 12px; color: var(--text-muted); padding: 8px 16px 0; }
.vitrin-official-label { font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-light); padding: 6px 16px; }

/* Header */
.vitrin-feed-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 10px;
  gap: 8px;
}
.vitrin-feed-user {
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.vitrin-feed-userinfo { min-width: 0; }
.vitrin-feed-username { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.vitrin-feed-usermeta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.vitrin-feed-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vitrin-type-chip {
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.official-badge { font-size: 11px; font-weight: 700; background: #dbeafe; color: #1d4ed8; padding: 2px 8px; border-radius: 12px; }

/* Social Note */
.vitrin-feed-note {
  font-size: 14px;
  font-style: italic;
  color: var(--text-muted);
  padding: 0 16px 10px;
  line-height: 1.5;
}

/* Görsel */
/* Vitrin post görseli — Instagram 1:1 kare formatı */
.vitrin-feed-img-wrap {
  display: block;
  position: relative;
  background: #f3f4f6;
  overflow: hidden;
  aspect-ratio: 1 / 1;  /* Tam kare */
  width: 100%;
}
[data-theme="dark"] .vitrin-feed-img-wrap { background: #1a1d27; }
.vitrin-feed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* Kare dolduracak şekilde kırp */
  object-position: center center;
  display: block;
  transition: transform .3s;
}
.vitrin-feed-card:hover .vitrin-feed-img { transform: scale(1.02); }
.img-count-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}

/* İçerik */
.vitrin-feed-content { padding: 12px 16px 14px; }
.vitrin-feed-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; line-height: 1.4; }
.vitrin-feed-title a { color: inherit; text-decoration: none; }
.vitrin-feed-title a:hover { color: var(--primary); }
.vitrin-feed-text { font-size: 14px; color: var(--text); line-height: 1.6; margin: 0 0 12px; }
.read-more-link { color: var(--primary); font-size: 13px; text-decoration: none; font-weight: 500; }

/* Aksiyon Butonları */
.vitrin-feed-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.vfa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.vfa:hover { background: var(--bg); color: var(--text); }
.vfa.like-btn.liked { color: #e11d48; }
.vfa.like-btn:hover { color: #e11d48; }
.vfa.save-btn.saved { color: var(--primary); }
.vfa-spacer { flex: 1; }
.vfa-detail { font-size: 13px; font-weight: 500; color: var(--primary); }
.vfa.edit-btn { font-size: 13px; }

/* More dropdown */
.vitrin-more-wrap { position: relative; }
.more-toggle { background: none; border: none; font-size: 18px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.more-toggle:hover { background: var(--bg); }
.vitrin-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 160px;
  z-index: 100;
  overflow: hidden;
}
.vitrin-more-wrap:hover .vitrin-dropdown,
.vitrin-more-wrap:focus-within .vitrin-dropdown { display: block; }
.vitrin-dropdown a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  text-decoration: none;
  color: var(--text);
  transition: background .1s;
}
.vitrin-dropdown a:hover { background: var(--bg); }

/* ── Vitrin Stories (Vitrin sayfasında) ─────────────────────── */
.vitrin-stories { margin-bottom: 16px; }

/* ── Vitrin Feed Empty ───────────────────────────────────────── */
.vitrin-feed-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.vitrin-feed-empty .empty-icon { font-size: 48px; margin-bottom: 12px; }
.vitrin-feed-empty h3 { margin: 0 0 8px; }

/* ── Vitrin Login CTA ────────────────────────────────────────── */
.vitrin-login-cta {
  background: linear-gradient(135deg, var(--primary-light) 0%, #e0e7ff 100%);
  border: 1px solid var(--primary);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 16px;
  text-align: center;
}
.vitrin-login-cta p { margin: 0 0 12px; font-size: 14px; }
.vitrin-login-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── Vitrin Yan Kolon Widget ─────────────────────────────────── */
.vitrin-side-col { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.vitrin-side-widget { padding: 16px; }
.vitrin-side-widget h3 { margin: 0 0 8px; font-size: 15px; }
.vitrin-side-widget p { font-size: 13px; margin: 0 0 12px; }

/* ── Rol Uyarı Kutusu (İlan Detay) ──────────────────────────── */
.role-access-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 20px;
}
.role-access-notice.warn { background: #fffbeb; border-color: #fde68a; }
.role-notice-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.role-notice-body strong { display: block; font-size: 15px; margin-bottom: 6px; }
.role-notice-body p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ── Mobil Alt Menü — buton sabit z-index ────────────────────── */
.mobile-bottom-nav { z-index: 200; }
.mbn-item.mbn-create { text-decoration: none; }

/* ── Share Modal kaldırıldı, ama overlay CSS korundu ─────────── */
/* Modal artık kullanılmıyor — mobil + butonu direkt link */


/* ═══════════════════════════════════════════════════════════════
   v2.0 — PERFORMANS & UX İYİLEŞTİRMELERİ
   ═══════════════════════════════════════════════════════════════ */

/* Story modal — içerik pozisyon fix */
.story-modal-inner { position: relative; }
.story-modal-inner > [style*="bottom:80px"] {
  position: absolute !important;
  z-index: 5;
  pointer-events: none;
}

/* Story item hover efekti */
.story-item {
  cursor: pointer;
  transition: transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.story-item:hover { transform: scale(1.06); }
.story-item:active { transform: scale(.97); }

/* Story viewer — resim yükleme sırasında placeholder */
.story-content img {
  animation: storyFadeIn .25s ease;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* Instagram gibi tam doldur */
  object-position: center;
  display: block;
}
@keyframes storyFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Story ring — doğrulanmış kullanıcı için gradient */
.story-ring {
  padding: 2px;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  border-radius: 50%;
}
.story-ring.viewed {
  background: var(--border);
}

/* Telefon doğrulama kartı kaldırıldı — alan korunuyor */
.phone-warning-card { display: none !important; }

/* Composer phone note kaldırıldı */
.composer-phone-note { display: none !important; }

/* ── Lazy loading skeleton ──────────────────────────────────── */
img[loading="lazy"] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}
img[loading="lazy"].loaded { animation: none; background: none; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Card hover performansı — GPU accelerate ─────────────────── */
.card, .feed-card, .vitrin-feed-card, .listing-card, .request-card {
  will-change: auto;
  transform: translateZ(0);
}

/* ── Feed stream — smooth scroll ────────────────────────────── */
.feed-stream, .vitrin-feed-stream {
  scroll-behavior: smooth;
}

/* ── Button active state — hızlı feedback ───────────────────── */
.btn:active { transform: scale(.97); }

/* ── Focus visible — erişilebilirlik ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Toast notifications — daha şık ─────────────────────────── */
.flash {
  border-left: 4px solid;
  backdrop-filter: blur(8px);
}
.flash.success { border-color: #16a34a; }
.flash.danger  { border-color: #dc2626; }
.flash.warning { border-color: #d97706; }
.flash.info    { border-color: #2563eb; }

/* ── Vitrin composer — tam genişlik, mobil uyumlu ───────────── */
.vitrin-composer-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.vitrin-composer-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.vitrin-composer-input {
  flex: 1; background: var(--surface);
  border: 1px solid var(--border); border-radius: 24px;
  padding: 10px 16px; color: var(--muted);
  cursor: pointer; text-decoration: none; display: block;
  font-size: 14px; transition: border-color .2s;
}
.vitrin-composer-input:hover { border-color: var(--primary); }
.vitrin-composer-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.vitrin-composer-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  font-size: 13px; color: var(--muted); text-decoration: none;
  background: transparent; transition: background .15s, color .15s;
  border: none; cursor: pointer;
}
.vitrin-composer-btn:hover { background: var(--surface); color: var(--text); }
.vitrin-composer-post-btn { margin-left: auto; }


/* ═══ v10.0 — SOSYAL PLATFORM GÜNCELLEMELERI ═══════════════════ */

/* Free platform badge in sidebar */
.sidebar-plan-box {
  background: linear-gradient(135deg, var(--primary-light), #f0fdf4);
  border: 1px solid var(--primary-mid);
}
.sidebar-plan-label { font-weight: 700; color: var(--primary); font-size: 14px; }

/* Section CTA row */
.section-cta { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* Contact info big */
.contact-info-big {
  font-size: 20px; font-weight: 600; color: var(--text);
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.contact-info-big a { color: var(--primary); }

/* Profile card improvements */
.profile-card {
  text-decoration: none !important;
  transition: transform .15s, box-shadow .15s;
}
.profile-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Offer row - phone display */
.contact-info {
  font-size: 14px; color: var(--primary);
  padding: 6px 0; font-weight: 500;
}
.contact-info a { color: var(--primary); font-weight: 600; }

/* Free platform highlight on home */
.pricing-preview-card.featured {
  border-color: var(--primary);
  background: var(--primary-light);
}
.pricing-preview-card .pp-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
}

/* Onboarding welcome card */
.onboarding-card {
  border-left: 4px solid var(--primary) !important;
  background: var(--primary-light);
}

/* Role-restriction notice box */
.role-access-notice {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-dark); border-radius: var(--r);
  padding: 20px; margin: 16px 0; border: 1px solid var(--border);
}
.role-notice-icon { font-size: 28px; flex-shrink: 0; }
.role-notice-body strong { display: block; margin-bottom: 6px; font-size: 15px; }

/* Supplier profile contact card improvements */
.supplier-header-card .supp-header { display: flex; gap: 16px; align-items: flex-start; }
.supp-header-info h2 { font-size: 20px; margin-bottom: 4px; }

/* Mobile bottom nav - active state */
.mbn-item.active { color: var(--primary); }
.mbn-item.active svg { stroke: var(--primary); }

/* Large CTA buttons - 40+ yaş uyumu */
@media (max-width: 600px) {
  .hero-actions .btn { min-height: 50px; font-size: 16px; padding: 14px 20px; }
  .feed-card-actions .feed-action-btn { min-height: 44px; font-size: 14px; }
  .listing-card h3 { font-size: 16px; }
  .listing-card-actions .btn { min-height: 44px; }
}

/* Empty state improvements */
.feed-empty .empty-icon { font-size: 48px; margin-bottom: 16px; }
.vitrin-feed-empty .empty-icon { font-size: 48px; margin-bottom: 16px; }

/* Share box improvement for social feel */
.share-box { border-radius: var(--r-lg); }
.share-box-input {
  flex: 1;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 12px 18px;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: all .2s;
}
.share-box-input:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  text-decoration: none;
}

/* Bigger font for 40+ readability */
.feed-card-body { font-size: 15px; line-height: 1.65; }
.vitrin-feed-text { font-size: 15px; line-height: 1.65; }
.listing-desc { font-size: 14px; line-height: 1.6; }

/* WhatsApp button */
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border-radius: var(--r);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-whatsapp:hover { background: #128C7E; color: #fff; text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════
   v11 — DM SİSTEMİ STİLLERİ
   ═══════════════════════════════════════════════════════════════ */

/* DM Page layout */
.dm-page { padding: 0; height: calc(100vh - 64px); overflow: hidden; }
.dm-layout { display: grid; grid-template-columns: 320px 1fr; height: 100%; }

/* Conversation list */
.dm-conv-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.dm-conv-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.dm-conv-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
.dm-conv-scroll { flex: 1; overflow-y: auto; }
.dm-conv-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); transition: background .15s; }
.dm-conv-item:hover, .dm-conv-item.active { background: var(--surface); text-decoration: none; }
.dm-conv-info { flex: 1; min-width: 0; }
.dm-conv-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-conv-last { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dm-conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dm-conv-time { font-size: 11px; color: var(--muted); }
.dm-conv-badge { background: var(--primary); color: #fff; border-radius: 10px; padding: 2px 7px; font-size: 11px; font-weight: 700; }
.dm-empty-conv { padding: 24px 16px; }

/* Chat area */
.dm-chat-area { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.dm-chat-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; background: var(--bg); }
.dm-chat-header-info { flex: 1; }
.dm-chat-header-info strong { display: block; font-size: 15px; }
.dm-chat-header-info small { color: var(--muted); font-size: 12px; }
.dm-chat-messages { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.dm-no-messages { text-align: center; padding: 40px; color: var(--muted); }
.dm-empty-chat { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px; color: var(--muted); }

/* Message bubbles */
.dm-bubble { max-width: 68%; display: flex; flex-direction: column; gap: 2px; }
.dm-bubble.mine { align-self: flex-end; align-items: flex-end; }
.dm-bubble.theirs { align-self: flex-start; align-items: flex-start; }
.dm-bubble-text {
  padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; word-break: break-word;
}
.dm-bubble.mine .dm-bubble-text { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.dm-bubble.theirs .dm-bubble-text { background: var(--surface); color: var(--text); border-bottom-left-radius: 4px; border: 1px solid var(--border); }
.dm-bubble-img img { max-width: 220px; max-height: 180px; border-radius: 12px; cursor: pointer; object-fit: cover; display: block; }
.dm-bubble-time { font-size: 11px; color: var(--muted); margin-top: 2px; padding: 0 4px; }

/* Chat form */
.dm-chat-form { padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--bg); }
.dm-form-row { display: flex; align-items: flex-end; gap: 8px; }
.dm-attach-btn { font-size: 22px; cursor: pointer; padding: 8px; border-radius: 50%; transition: background .15s; flex-shrink: 0; line-height: 1; display: flex; align-items: center; justify-content: center; }
.dm-attach-btn:hover { background: var(--surface); }
.dm-textarea {
  flex: 1; border: 1.5px solid var(--border); border-radius: 22px; padding: 10px 16px; font-size: 15px;
  font-family: inherit; resize: none; min-height: 44px; max-height: 120px; background: var(--surface); color: var(--text);
  transition: border-color .2s; outline: none;
}
.dm-textarea:focus { border-color: var(--primary); }
.dm-send-btn {
  background: var(--primary); color: #fff; border: none; border-radius: 22px;
  padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; flex-shrink: 0;
  transition: background .15s; min-height: 44px;
}
.dm-send-btn:hover { background: var(--primary-dark, #4338ca); }

/* Profile card DM button */
.profile-card-wrap { position: relative; display: flex; flex-direction: column; }
.profile-card-dm-btn {
  width: 100%; text-align: center; margin-top: 4px; border-radius: 0 0 var(--r) var(--r) !important;
  display: block !important; text-decoration: none !important;
}

/* DM mobile responsive */
@media (max-width: 700px) {
  .dm-page { height: calc(100vh - 120px); }
  .dm-layout { grid-template-columns: 1fr; }
  .dm-conv-list { display: none; }
  .dm-layout.has-active-conv .dm-conv-list { display: none; }
  .dm-layout.no-active-conv .dm-chat-area { display: none; }
  .dm-layout.no-active-conv .dm-conv-list { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
   v11 — DARK MODE
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:           #0f1117;
  --bg-dark:      #1a1d27;
  --surface:      #1e2130;
  --border:       #2d3348;
  --text:         #e8eaf0;
  --muted:        #8b91a8;
  --primary-light:#1e2545;
  --primary-mid:  #3d4fa0;
  --shadow:       0 2px 8px rgba(0,0,0,.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .topnav { background: #0f1117; border-color: var(--border); }
[data-theme="dark"] .topbar { background: #0f1117; border-color: var(--border); }
[data-theme="dark"] .sidebar { background: #0f1117; border-color: var(--border); }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
  background: var(--bg-dark) !important; color: var(--text) !important; border-color: var(--border) !important;
}
[data-theme="dark"] .mobile-bottom-nav { background: #0f1117; border-color: var(--border); }
[data-theme="dark"] .story-ring { border-color: var(--primary); }
[data-theme="dark"] .vitrin-composer-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .vitrin-composer-input { background: var(--bg-dark); border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .offer-row.rich { background: var(--bg-dark); }
[data-theme="dark"] .btn.ghost { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .dm-bubble.theirs .dm-bubble-text { background: #2d3348; border-color: var(--border); }
[data-theme="dark"] .dm-chat-form, [data-theme="dark"] .dm-conv-list, [data-theme="dark"] .dm-chat-area { background: var(--bg); }
[data-theme="dark"] .footer { background: #0a0c12; border-color: var(--border); }
[data-theme="dark"] .dropdown, [data-theme="dark"] .vitrin-dropdown { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .badge-verified { background: #1a3a2a; color: #4ade80; }
[data-theme="dark"] .hero-section { background: linear-gradient(135deg, #0f1117 0%, #1a1d27 100%); }
[data-theme="dark"] .muted-bg { background: var(--bg-dark); }
[data-theme="dark"] .filter-bar input, [data-theme="dark"] .filter-bar select { background: var(--bg-dark) !important; }
[data-theme="dark"] .notif-badge { background: #ef4444; }

/* Transition for smooth dark mode switch */
html { transition: background-color .2s, color .2s; }
.card, .topnav, .sidebar, .mobile-bottom-nav, input, textarea, select {
  transition: background-color .2s, border-color .2s, color .2s;
}

/* ═══════════════════════════════════════════════════════════════
   BUSTOP v10 HOTFIX — Additional dark mode + UX improvements
   ═══════════════════════════════════════════════════════════════ */

/* Dark mode: additional elements */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .vitrin-feed-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .vitrin-feed-card.official { background: #0e1d2e; border-color: #1e3a5f; }
[data-theme="dark"] .listing-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .request-card { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .request-card:hover { background: var(--bg-dark); }
[data-theme="dark"] .feed-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .flash-container .flash { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .share-box { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .story-add-btn { border-color: var(--border); }
[data-theme="dark"] .vitrin-composer-btn { color: var(--text-2); }
[data-theme="dark"] .listings-filter-panel { background: var(--surface); }
[data-theme="dark"] .filter-option { color: var(--text-2); }
[data-theme="dark"] .filter-option:hover, [data-theme="dark"] .filter-option.active { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .profile-card { background: var(--surface); }
[data-theme="dark"] .dm-conv-item { color: var(--text); }
[data-theme="dark"] .dm-conv-item:hover, [data-theme="dark"] .dm-conv-item.active { background: var(--bg-dark); }
[data-theme="dark"] .notif-item { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .notif-item.unread { background: #1a2040; }
[data-theme="dark"] .topnav-link { color: var(--text-2); }
[data-theme="dark"] .topnav-link:hover, [data-theme="dark"] .topnav-link.active { color: var(--primary); background: var(--primary-light); }
[data-theme="dark"] .sidebar-link { color: var(--text-2); }
[data-theme="dark"] .sidebar-link:hover { background: var(--bg-dark); color: var(--primary); }
[data-theme="dark"] .sidebar-link.active { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .sidebar-plan-box { background: var(--bg-dark); border-color: var(--border); }
[data-theme="dark"] .mbn-item { color: var(--muted); }
[data-theme="dark"] .mbn-item.active, [data-theme="dark"] .mbn-item:hover { color: var(--primary); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--text); }
[data-theme="dark"] .muted, [data-theme="dark"] .text-muted, [data-theme="dark"] small { color: var(--muted); }
[data-theme="dark"] .share-modal { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .share-option-card { background: var(--bg-dark); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .share-option-card:hover { background: var(--primary-light); border-color: var(--primary); }
[data-theme="dark"] .story-modal-inner { background: #0a0c12; }
[data-theme="dark"] .onboarding-card { background: var(--surface); }
[data-theme="dark"] .feed-empty { background: var(--surface); }
[data-theme="dark"] .dm-textarea { background: var(--bg-dark); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .dm-chat-header { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .comment-item { border-color: var(--border); }
[data-theme="dark"] .comment-body { background: var(--bg-dark); }
[data-theme="dark"] .vitrin-page-header { background: var(--surface); }
[data-theme="dark"] .upload-drop-zone { background: var(--bg-dark); border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .upload-drop-zone:hover { border-color: var(--primary); background: var(--primary-light); }
[data-theme="dark"] .vitrin-detail-card { background: var(--surface); }
[data-theme="dark"] .vitrin-comments-section { background: var(--surface); }
[data-theme="dark"] .comment-form textarea { background: var(--bg-dark); }
[data-theme="dark"] .story-preview-frame { background: #0a0c12; }
[data-theme="dark"] .admin-quick-card { background: var(--surface); }
[data-theme="dark"] .metric-card { background: var(--surface); }
[data-theme="dark"] table { color: var(--text); }
[data-theme="dark"] th { background: var(--bg-dark); color: var(--text); }
[data-theme="dark"] td { border-color: var(--border); }
[data-theme="dark"] tr:hover td { background: var(--bg-dark); }
[data-theme="dark"] code { background: var(--bg-dark); color: #a5b4fc; }
[data-theme="dark"] .tab-row a, [data-theme="dark"] .tab-nav a { color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .tab-row a.active, [data-theme="dark"] .tab-nav a.active { color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .list-row { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .list-row:hover { background: var(--bg-dark); }
[data-theme="dark"] .vitrin-filter-chip { background: var(--bg-dark); color: var(--text-2); border-color: var(--border); }
[data-theme="dark"] .vitrin-filter-chip.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .mini-listing-item { color: var(--text); }
[data-theme="dark"] .mini-listing-item:hover { background: var(--bg-dark); }
[data-theme="dark"] .mini-profile-item { color: var(--text); }
[data-theme="dark"] .mini-profile-item:hover { background: var(--bg-dark); }
[data-theme="dark"] .sidebar-widget { background: var(--surface); }
[data-theme="dark"] .feed-page { background: var(--bg); }
[data-theme="dark"] .feed-side-col .card { background: var(--surface); }

/* Topbar dark mode */
[data-theme="dark"] .topbar { background: #0f1117; border-bottom-color: var(--border); }
[data-theme="dark"] .brand-wordmark { color: var(--text); }
[data-theme="dark"] .topnav-icon { color: var(--text-2); }
[data-theme="dark"] .topnav-icon:hover { background: var(--bg-dark); color: var(--primary); }
[data-theme="dark"] .hamburger-btn { color: var(--text-2); }
[data-theme="dark"] .hamburger-btn:hover { background: var(--bg-dark); }

/* Footer dark */
[data-theme="dark"] .footer { background: #0a0c12; border-top-color: var(--border); color: var(--muted); }
[data-theme="dark"] .footer-links a { color: var(--muted); }
[data-theme="dark"] .footer-links a:hover { color: var(--primary); }

/* Story viewer improvements */
.story-modal-inner {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 600px) {
  .story-modal-inner { border-radius: 0; max-width: 100%; }
}

/* DM page improvements for 40+ users */
.dm-textarea {
  font-size: 16px;
  min-height: 44px;
  line-height: 1.5;
}
.dm-send-btn {
  font-size: 15px;
  padding: 10px 20px;
  min-width: 80px;
}
.dm-conv-item {
  padding: 14px 16px;
  min-height: 68px;
}
.dm-conv-name { font-size: 15px; }
.dm-bubble-text { font-size: 15px; line-height: 1.6; }

/* Feed cards - larger touch targets for 40+ */
.feed-card-actions a,
.feed-card-actions button,
.vfa {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Vitrin post image upload preview */
.image-grid-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.image-grid-preview .thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid var(--border);
}
.image-grid-preview .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-grid-preview .remove-thumb {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Story preview frame */
/* Story önizleme — telefon ekranı gibi 9:16 dikey */
.story-preview-frame {
  width: 100%;
  max-width: 240px;           /* Dar tutalım — telefon görünümü */
  margin: 0 auto;
  aspect-ratio: 9 / 16;      /* Dikey story formatı */
  background: #111;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #333;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.story-preview-frame #storyPreviewImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.story-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #888;
  font-size: 40px;
}
.story-preview-text-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  text-align: center;
  pointer-events: none;
}

/* Content warning box */
.content-warning-box {
  display: none;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.5;
}
.content-warning-box.visible { display: block; }
[data-theme="dark"] .content-warning-box { background: #2d1e00; border-color: #92400e; color: #fcd34d; }

/* Vitrin notice */
.vitrin-notice {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
}
.vitrin-notice.warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
}
[data-theme="dark"] .vitrin-notice.warning { background: #2d1e00; border-color: #92400e; color: #fcd34d; }

/* Post create layout */
.post-create-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .post-create-layout { grid-template-columns: 1fr; }
}

/* Story create layout */
.story-create-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .story-create-layout { grid-template-columns: 1fr; }
}

/* Upload drop zone improvements */
.upload-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all .15s;
}
.upload-drop-zone input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.upload-drop-zone:hover, .upload-drop-zone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}
.upload-drop-icon { font-size: 36px; margin-bottom: 8px; }

/* Story viewer back button for mobile */
.dm-conv-back-btn {
  display: none;
}
@media (max-width: 768px) {
  .dm-layout.has-active-conv .dm-conv-back-btn { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════
   v11 — PROFİL SAYFASI (Sekmeli — Instagram/LinkedIn benzeri)
   ═══════════════════════════════════════════════════════════════ */

.prof-page { padding-top: 20px; padding-bottom: 60px; }

/* Profil başlık kartı */
.prof-header-card { padding: 0; overflow: hidden; margin-bottom: 16px; }
.prof-header-inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 24px 0;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .prof-header-inner { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .prof-header-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; }
  .prof-header-actions .btn { width: 100%; text-align: center; }
}

/* Avatar wrap */
.prof-avatar-wrap { position: relative; flex-shrink: 0; }
.prof-avatar-wrap .avatar { width: 96px !important; height: 96px !important; }
@media (max-width: 600px) { .prof-avatar-wrap .avatar { width: 80px !important; height: 80px !important; } }
.prof-verif-badge {
  position: absolute; bottom: 2px; right: 2px;
  background: #22c55e; color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--bg);
}

/* Profil bilgileri */
.prof-info { flex: 1; min-width: 0; }
.prof-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prof-name { font-size: 22px; font-weight: 700; margin: 0; }
@media (max-width: 600px) { .prof-name { font-size: 18px; } }
.prof-role-city { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.prof-role-badge {
  background: var(--primary-light); color: var(--primary);
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; border: 1px solid var(--primary-mid);
}
.prof-city { font-size: 14px; color: var(--muted); }
.prof-rating { font-size: 14px; color: var(--text-2); margin: 4px 0; }
.prof-last-active { font-size: 12px; color: var(--muted); display: block; margin-top: 4px; }

/* Aksiyonlar */
.prof-header-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; flex-shrink: 0; }

/* Hikayeler row */
.prof-stories-row {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
}
.prof-stories-label { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.prof-stories-list { display: flex; gap: 12px; overflow-x: auto; }

/* Sekmeler */
.prof-tabs {
  display: flex;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  overflow-x: auto;
}
.prof-tab {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all .15s;
}
.prof-tab:hover { color: var(--primary); }
.prof-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.prof-tab-count {
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
}

/* Tab içerikleri */
.prof-tab-content { margin-top: 16px; }

/* Paylaşımlar grid — Instagram 3'lü grid */
.prof-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
@media (max-width: 600px) {
  .prof-posts-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
}
.prof-post-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
  background: var(--bg-dark);
  cursor: pointer;
}
.prof-post-img {
  width: 100%; height: 100%;
}
.prof-post-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .3s;
}
.prof-post-card:hover .prof-post-img img { transform: scale(1.05); }
.prof-post-no-img {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  background: var(--primary-light);
  color: var(--primary);
}
.prof-post-no-img span { font-size: 12px; font-weight: 600; }
.prof-post-no-img p { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.prof-post-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .2s;
}
.prof-post-card:hover .prof-post-overlay { opacity: 1; }

/* İlanlar listesi */
.prof-listings-list { display: flex; flex-direction: column; gap: 8px; }
.prof-listing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background .15s;
  flex-wrap: wrap;
}
.prof-listing-row:hover { background: var(--primary-light); border-color: var(--primary); }
.plt-type { font-size: 12px; color: var(--primary); font-weight: 600; flex-shrink: 0; }
.plt-title { flex: 1; font-weight: 600; font-size: 15px; }
.plt-meta { font-size: 13px; color: var(--muted); flex-shrink: 0; }

/* Hakkında kartı */
.prof-about-card { padding: 20px; }
.prof-about-section { margin-bottom: 20px; }
.prof-about-section h3 { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; font-weight: 600; }
.prof-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.prof-detail-grid > div {
  background: var(--bg-dark);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prof-detail-grid span { font-size: 12px; color: var(--muted); }
.prof-detail-grid b { font-size: 14px; color: var(--text); }

.prof-docs-list { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-doc-item {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prof-doc-item.valid { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.prof-doc-item.expired { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
[data-theme="dark"] .prof-doc-item.valid { background: #1a3a2a; border-color: #22c55e; color: #86efac; }
[data-theme="dark"] .prof-doc-item.expired { background: #3a1a1a; border-color: #ef4444; color: #fca5a5; }

/* İletişim kartı */
.prof-contact-card { padding: 24px; }
.prof-contact-card h3 { margin-bottom: 8px; font-size: 18px; }
.prof-contact-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  text-decoration: none;
  margin-bottom: 12px;
  transition: all .15s;
  border: 2px solid var(--border);
  color: var(--text);
}
.prof-contact-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.prof-contact-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.prof-contact-btn.primary:hover { background: var(--primary-dark); }
.prof-contact-btn.whatsapp { background: #f0fdf4; border-color: #86efac; color: #166534; }
.prof-contact-btn.whatsapp:hover { background: #dcfce7; }
.prof-contact-btn.phone { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.prof-contact-btn.phone:hover { background: #dbeafe; }
.prof-contact-btn.disabled { background: var(--bg-dark); opacity: .6; cursor: default; border-color: var(--border); }
[data-theme="dark"] .prof-contact-btn.whatsapp { background: #1a3a2a; border-color: #22c55e; color: #86efac; }
[data-theme="dark"] .prof-contact-btn.phone { background: #1a2a3a; border-color: #3b82f6; color: #93c5fd; }
.pcb-icon { font-size: 28px; flex-shrink: 0; }
.pcb-label { font-size: 16px; font-weight: 700; }
.pcb-desc { font-size: 14px; opacity: .8; margin-top: 2px; }
.pcb-arrow { margin-left: auto; font-size: 20px; opacity: .6; flex-shrink: 0; }

/* Boş durum */
.prof-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.prof-empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.prof-empty-state p { font-size: 16px; }

/* Dark mode uyumu */
[data-theme="dark"] .prof-header-card { background: var(--surface); }
[data-theme="dark"] .prof-role-badge { background: var(--primary-light); border-color: var(--primary-mid); }
[data-theme="dark"] .prof-post-card { background: var(--bg-dark); }
[data-theme="dark"] .prof-about-card { background: var(--surface); }
[data-theme="dark"] .prof-detail-grid > div { background: var(--bg); }
[data-theme="dark"] .prof-contact-card { background: var(--surface); }

/* ═══════════════════════════════════════════════════════════════
   v12 — BENİ HATIRLA / DARK MODE LABEL / UI İYİLEŞTİRMELER
   ═══════════════════════════════════════════════════════════════ */

/* Beni Hatırla checkbox satırı */
.login-remember-row {
  margin: 12px 0 4px;
}
.remember-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.remember-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.remember-label span { line-height: 1.3; }

/* Dark mode toggle label */
.dm-toggle-btn {
  color: var(--text-2) !important;
  transition: background .15s, color .15s;
}
.dm-toggle-btn:hover {
  background: var(--bg-dark) !important;
  color: var(--primary) !important;
}
.dm-toggle-btn span { font-size: 12px; font-weight: 500; white-space: nowrap; }

/* 45+ yaş için daha büyük buton hedefleri */
@media (max-width: 600px) {
  .dm-toggle-btn span { display: none !important; }
}

/* Login page dark mode fix */
[data-theme="dark"] .login-brand-panel {
  background: linear-gradient(135deg, #0f1117 0%, #1a1d27 100%);
}
[data-theme="dark"] .login-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .remember-label { color: var(--muted); }
[data-theme="dark"] .login-links a { color: var(--primary); }
[data-theme="dark"] .login-feature-list li { color: var(--text-2); }
[data-theme="dark"] .login-tagline { color: var(--text); }
[data-theme="dark"] .login-brand-copy { color: var(--muted); }

/* Story item — 45+ kullanıcı için büyük dokunma hedefi */
.story-item {
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.story-item .story-ring {
  width: 62px;
  height: 62px;
}
.story-item .avatar {
  width: 56px !important;
  height: 56px !important;
}

/* Vitrin composer — daha büyük, net */
.vitrin-composer-input {
  font-size: 16px !important;
  min-height: 52px;
}

/* İlan kartı — Başvur butonu belirgin */
.listing-card .btn { font-size: 14px; padding: 10px 16px; }

/* Profil sayfası sekmeleri */
.tab-row a, .tab-nav a {
  font-size: 15px;
  padding: 10px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Mobile DM improvements */
@media (max-width: 768px) {
  .dm-chat-messages {
    padding: 12px 10px;
  }
  .dm-bubble {
    max-width: 82%;
  }
  .dm-bubble-text {
    font-size: 16px;
    padding: 10px 14px;
  }
  .dm-chat-form {
    padding: 10px 12px;
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
  .dm-textarea {
    font-size: 16px;
  }
}

/* Story viewer — mobile full screen */
@media (max-width: 600px) {
  .story-modal {
    padding: 0 !important;
  }
  .story-modal-inner {
    max-width: 100% !important;
    border-radius: 0 !important;
    height: 100dvh;
  }
}

/* Vitrin feed image — perfect square */
.vitrin-feed-img-wrap {
  aspect-ratio: 1 / 1 !important;
  width: 100%;
  overflow: hidden;
  background: var(--bg-dark);
  border-radius: var(--r) var(--r) 0 0;
}
.vitrin-feed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Dark mode: remember row */
[data-theme="dark"] .login-remember-row .remember-label {
  color: var(--muted);
}

/* Boş feed ekranı */
.feed-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.feed-empty-state .feed-empty-icon { font-size: 56px; margin-bottom: 16px; }
.feed-empty-state h3 { font-size: 20px; margin-bottom: 8px; color: var(--text); }
.feed-empty-state p { font-size: 15px; max-width: 360px; margin: 0 auto 20px; }

/* Profile cover */
.prof-cover-wrap {
  width: 100%;
  aspect-ratio: 16 / 5;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-mid));
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  position: relative;
}
.prof-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 45+ yaş — büyük form label'ları */
label { font-size: 15px; font-weight: 500; }
input, select, textarea { font-size: 16px !important; padding: 12px 14px !important; }

/* Fix: input override for small/inline inputs */
input.small, input[type="checkbox"], input[type="radio"],
select.small, button.small { font-size: 13px !important; padding: 6px 10px !important; }

/* Notification badge fix dark mode */
[data-theme="dark"] .notif-badge { background: #ef4444; color: #fff; }

/* Admin table dark mode */
[data-theme="dark"] .table-card { background: var(--surface); }
[data-theme="dark"] .table-card table { background: var(--surface); }
[data-theme="dark"] .admin-action-panel { background: var(--bg-dark); border-color: var(--border); }

/* ═══════════════════════════════════════════════════════════════
   v12.1 — STORY / FEED / DM / COVER PHOTO İYİLEŞTİRMELER
   ═══════════════════════════════════════════════════════════════ */

/* ── Story Modal — Tam mobil full-screen ─────────────────────── */
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
@supports (height: 100dvh) {
  .story-modal { height: 100dvh; }
}
.story-modal-inner {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
}
@media (max-width: 600px) {
  .story-modal { padding: 0; align-items: stretch; }
  .story-modal-inner {
    max-width: 100%;
    border-radius: 0;
    height: 100%;
  }
}
/* 9:16 aspect için desktop'ta düzgün yükseklik */
@media (min-width: 601px) {
  .story-modal-inner {
    max-width: 360px;
    max-height: 90vh;
    aspect-ratio: 9 / 16;
  }
}

/* Story progress bar */
.story-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.3);
  z-index: 10;
}
.story-progress-fill {
  height: 100%;
  background: #fff;
  width: 0%;
  transition: width 5s linear;
}

/* Story close & nav buttons */
.story-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-nav {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 5;
}
.story-prev-btn,
.story-next-btn {
  flex: 1;
  background: none;
  border: none;
  color: transparent;
  cursor: pointer;
  font-size: 24px;
  pointer-events: all;
  display: flex;
  align-items: center;
  padding: 0 8px;
  opacity: 0;
  transition: opacity .2s;
}
.story-prev-btn { justify-content: flex-start; color: rgba(255,255,255,.8); }
.story-next-btn { justify-content: flex-end; color: rgba(255,255,255,.8); }
.story-modal-inner:hover .story-prev-btn,
.story-modal-inner:hover .story-next-btn { opacity: 1; }

/* Story content area */
.story-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #111;
}
.story-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8;
}
.story-text-only {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #1a1d27, #0f1117);
}

/* ── Feed card — 1:1 görsel ─────────────────────────────────── */
.feed-card-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-dark);
  border-radius: 0;
  margin: 8px 0;
}
.feed-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .3s ease;
}
.feed-card-img-wrap:hover .feed-card-img { transform: scale(1.02); }

/* Feed card genel iyileştirmeler */
.feed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.feed-card.official-post {
  border-color: var(--primary);
  background: linear-gradient(135deg, #f5f3ff, #fff);
}
[data-theme="dark"] .feed-card.official-post {
  background: #0e1d2e;
  border-color: #1e3a5f;
}
.feed-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  gap: 12px;
}
.feed-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
  flex: 1;
}
.feed-user-row:hover { text-decoration: none; }
.feed-user-info { min-width: 0; }
.feed-user-name {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-user-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-type-badge {
  font-size: 11px;
  background: var(--primary-light);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.feed-social-note {
  padding: 0 16px 8px;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}
.feed-card-title {
  padding: 4px 16px;
  font-size: 16px;
  font-weight: 700;
}
.feed-card-title a { color: var(--text); }
.feed-card-title a:hover { color: var(--primary); text-decoration: none; }
.feed-card-body {
  padding: 4px 16px 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}
.feed-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.feed-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  min-height: 38px;
  transition: background .15s, color .15s;
}
.feed-action-btn:hover {
  background: var(--bg-dark);
  color: var(--primary);
  text-decoration: none;
}
.feed-action-btn.liked { color: #ef4444; }
.feed-action-btn.like-btn:hover { color: #ef4444; background: #fee2e2; }
[data-theme="dark"] .feed-action-btn { color: var(--muted); }
[data-theme="dark"] .feed-action-btn:hover { background: var(--bg-dark); color: var(--primary); }

/* ── DM — Mobil klavye fix ───────────────────────────────────── */
.dm-chat-form {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 10px 14px;
}
.dm-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* iOS safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .dm-chat-form {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}
.dm-textarea {
  font-size: 16px !important;
  min-height: 44px;
  max-height: 120px;
  overflow-y: auto;
  resize: none;
  line-height: 1.5;
  border-radius: 22px;
  padding: 10px 16px !important;
  border: 1.5px solid var(--border);
  transition: border-color .15s;
}
.dm-textarea:focus { border-color: var(--primary); outline: none; }
.dm-form-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.dm-send-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}
.dm-send-btn:hover { background: var(--primary-dark); }
.dm-send-btn:active { transform: scale(.95); }

/* ── Profil kapak görseli ────────────────────────────────────── */
.prof-cover-wrap {
  width: 100%;
  aspect-ratio: 16 / 5;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-mid) 100%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  position: relative;
}
.prof-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.prof-cover-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--primary);
  opacity: .4;
}

/* Supplier profile cover (page_supplier_profile) */
.supp-cover-wrap {
  width: 100%;
  aspect-ratio: 16 / 5;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-mid));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  position: relative;
  margin-bottom: -40px;
}
.supp-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-theme="dark"] .supp-cover-wrap {
  background: linear-gradient(135deg, #1a2040, #0f1117);
}

/* Profile avatar on top of cover */
.prof-avatar-cover-offset {
  position: relative;
  z-index: 2;
  margin-top: 0;
}

/* Cover preview in edit form */
.prof-cover-preview {
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 12px;
  position: relative;
}
.prof-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-change-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,.65);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  backdrop-filter: blur(4px);
}
.cover-change-btn:hover { background: rgba(0,0,0,.85); }

/* ── Feed empty state ────────────────────────────────────────── */
.feed-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.feed-empty .empty-icon { font-size: 52px; margin-bottom: 12px; }
.feed-empty h3 { font-size: 20px; margin-bottom: 8px; }
.feed-empty p { color: var(--muted); margin-bottom: 20px; }

/* ── Official post label ─────────────────────────────────────── */
.official-post-label, .pinned-post-label {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  background: var(--primary-light);
  color: var(--primary);
  border-bottom: 1px solid var(--border);
}
.pinned-post-label { background: var(--warning-light); color: var(--warning); }

/* ── Story ring — improved ───────────────────────────────────── */
.story-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-ring.viewed {
  background: var(--border);
}
.story-ring .avatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50%;
  border: 2px solid var(--bg);
}

/* Story row */
.story-row-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
  overflow: hidden;
}
.story-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.story-row::-webkit-scrollbar { display: none; }
.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.story-item span {
  font-size: 11px;
  color: var(--text-2);
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.story-item:hover .story-ring { transform: scale(1.06); }
.story-item:active .story-ring { transform: scale(.95); }
.story-ring { transition: transform .15s; }

/* Story add button */
.story-add-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.story-add-btn {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  overflow: visible;
  text-decoration: none;
}
.story-add-plus {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  line-height: 1;
}

/* Dark mode adjustments */
[data-theme="dark"] .story-row-wrap { background: var(--surface); }
[data-theme="dark"] .feed-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .feed-card-img-wrap { background: #1a1d27; }
[data-theme="dark"] .feed-type-badge { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .feed-card-title a { color: var(--text); }
[data-theme="dark"] .feed-card-body { color: var(--muted); }
[data-theme="dark"] .feed-card-actions { border-color: var(--border); }
[data-theme="dark"] .official-post-label { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .pinned-post-label { background: #2d2010; color: var(--warning); }

/* Mobile: dm layout için full height fix */
@media (max-width: 768px) {
  .dm-layout {
    height: calc(100vh - var(--topbar-h) - 60px);
    height: calc(100dvh - var(--topbar-h) - 60px);
  }
  .dm-chat-area {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .dm-chat-messages {
    flex: 1;
    min-height: 0;
  }
}

/* DM: Mobile back button */
.dm-conv-back-btn {
  display: none;
}
@media (max-width: 768px) {
  .dm-conv-back-btn { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════
   v12.2 — INSTAGRAM-STYLE FEED + STORY FIX + PROFESSIONAL REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ── Vitrin feed — Instagram gibi dar, ortalı feed ───────────── */
.vitrin-page-layout {
  display: grid;
  grid-template-columns: 614px 1fr;
  gap: 28px;
  padding-top: 20px;
  padding-bottom: 48px;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .vitrin-page-layout { grid-template-columns: 1fr; max-width: 614px; }
  .vitrin-side-col { display: none; }
}
@media (max-width: 640px) {
  .vitrin-page-layout { padding-top: 0; gap: 0; }
}

/* ── Vitrin feed card — Instagram tarzı temiz kart ───────────── */
.vitrin-feed-stream {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-width: 614px !important;
  width: 100% !important;
}
.vitrin-feed-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
  transition: box-shadow .2s !important;
}
.vitrin-feed-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1) !important; }

/* Post görseli — Instagram'da görsel kart genişliğini doldurur ama 4:5 oranında */
/* Biz 1:1 yapıyoruz — 614px x 614px max — çok büyük değil çünkü kart 614px */
.vitrin-feed-img-wrap {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f1f3f5 !important;
  border-radius: 0 !important;
  position: relative !important;
}
[data-theme="dark"] .vitrin-feed-img-wrap { background: #1a1d27 !important; }
.vitrin-feed-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform .35s ease !important;
}
.vitrin-feed-card:hover .vitrin-feed-img { transform: scale(1.02) !important; }

/* Profil sayfasında post grid — 3 sütun ─────────────────────── */
.prof-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 4px;
}
.prof-post-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-dark);
  cursor: pointer;
  position: relative;
}
.prof-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .25s ease;
}
.prof-post-thumb:hover img { transform: scale(1.04); }
.prof-post-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  transition: opacity .2s;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.prof-post-thumb:hover .prof-post-thumb-overlay { opacity: 1; }
.prof-post-no-img {
  aspect-ratio: 1 / 1;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}
.prof-post-no-img:hover { background: var(--primary-light); color: var(--primary); }

/* ── Dashboard feed — aynı Instagram tarzı ──────────────────── */
.feed-stream {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 614px;
  width: 100%;
}
.feed-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
}
.feed-card-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;     /* 4:3 — daha makul, 1:1 kadar büyük değil */
  overflow: hidden;
  background: var(--bg-dark);
  position: relative;
}
.feed-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .3s ease;
}
.feed-card-img-wrap:hover .feed-card-img { transform: scale(1.02); }

/* ── Story modal — DOMContentLoaded sonrası artık çalışıyor ──── */
/* Modal başlangıçta display:none — JS açıyor */
#storyViewerModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: rgba(0,0,0,.92) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* display:none override ile başlar */
#storyViewerModal[style*="display: none"],
#storyViewerModal[style*="display:none"] {
  display: none !important;
}

/* ── Story yuvarlaklara hover animasyonu ─────────────────────── */
.story-item {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.story-item .story-ring {
  transition: transform .15s ease, box-shadow .15s ease;
}
.story-item:hover .story-ring {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(79,70,229,.35);
}
.story-item:active .story-ring { transform: scale(.95); }

/* ── Story create — preview telefon ekranı ───────────────────── */
.story-create-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 700px) {
  .story-create-layout {
    grid-template-columns: 1fr;
  }
  .story-preview-frame {
    max-width: 180px !important;
  }
}
.story-preview-frame {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  background: #111;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #333;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}

/* ── Vitrin paylaşım önizleme — 1:1 kare ─────────────────────── */
.vitrin-create-preview-wrap {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  background: var(--bg-dark);
  border-radius: 12px;
  overflow: hidden;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
}
.vitrin-create-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vitrin-create-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}
.vitrin-create-preview-placeholder span { font-size: 40px; }

/* ── Feed page layout ─────────────────────────────────────────── */
.feed-page-inner {
  display: grid;
  grid-template-columns: 614px 1fr;
  gap: 28px;
  padding: 20px 0 48px;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .feed-page-inner {
    grid-template-columns: 1fr;
    max-width: 614px;
  }
  .feed-side-col { display: none; }
}
@media (max-width: 640px) {
  .feed-page-inner { padding-top: 8px; gap: 0; }
  .feed-stream { gap: 12px; }
}

/* ── Vitrin post yayınlama formu — iki sütun ─────────────────── */
.vitrin-create-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 760px) {
  .vitrin-create-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Dark mode düzeltmeler ───────────────────────────────────── */
[data-theme="dark"] .vitrin-feed-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .vitrin-feed-card.official { background: #0e1d2e !important; border-color: #1e3a5f !important; }
[data-theme="dark"] .feed-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .prof-post-thumb { background: #1a1d27; }
[data-theme="dark"] .prof-post-no-img { background: #1a1d27; border-color: var(--border); color: var(--muted); }

/* ── Story ring - gradient Instagram gibi ────────────────────── */
.story-ring:not(.viewed) {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  padding: 2.5px;
}
.story-ring.viewed {
  background: var(--border);
  padding: 2.5px;
}

/* ── Vitrin action bar ───────────────────────────────────────── */
.vitrin-feed-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
}
.vfa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .12s, color .12s;
  min-height: 38px;
  white-space: nowrap;
}
.vfa:hover { background: var(--bg-dark); color: var(--primary); text-decoration: none; }
.vfa.liked, .vfa.like-btn.liked { color: #e11d48; }
.vfa.like-btn:hover { color: #e11d48; background: #fee2e2; }
[data-theme="dark"] .vfa.like-btn:hover { background: #2d1215; }
.vfa-spacer { flex: 1; }
.vfa-detail { font-size: 13px; font-weight: 600; color: var(--primary); margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════
   BusTop v2 — PATCH FIXES
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Dark mode flash önleme (transition gecikmesi) ─────── */
html { transition: none !important; }
[data-theme="dark"] { transition: background-color .2s, color .2s; }

/* ── 2. Story modal — daha büyük, premium 9:16 ─────────────── */
.story-modal-inner {
  max-width: 440px !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.9) !important;
}
@media (max-width: 600px) {
  .story-modal-inner {
    border-radius: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
  }
}
/* Story avatar — daha büyük halka */
.story-item { cursor: pointer; }
.story-ring {
  width: 68px !important;
  height: 68px !important;
}
.story-ring .avatar,
.story-item .avatar { width: 60px !important; height: 60px !important; }

/* ── 3. Feed görsel — 1:1 kare (Instagram stili) ──────────── */
.feed-card-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r);
  margin: 8px 0;
}
.feed-card-img-wrap img,
.feed-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--r);
}
.vitrin-feed-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r);
  margin: 10px 0;
  position: relative;
}
.vitrin-feed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── 4. Beğeni butonu — Instagram stili ───────────────────── */
.like-btn {
  transition: transform .15s, color .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.like-btn.liked .like-icon { animation: likeHeart .3s ease; }
@keyframes likeHeart {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.feed-action-btn.like-btn.liked,
.vfa.like-btn.liked { color: #e11d48 !important; }

/* ── 5. Feed card aksiyonlar — "Detay" butonu kaldırıldı ──── */
.vfa-detail { display: none !important; }
.feed-card-actions .btn.small.ghost[href*="vitrin-detail"] { display: none !important; }

/* ── 6. Telefon gizlilik — public alanda telefon gösterme ──── */
.public-phone-hide { display: none !important; }

/* ── 7. DM — Instagram tarzı mobil düzeni ─────────────────── */
@media (max-width: 768px) {
  .dm-layout.has-active-conv .dm-conv-list { display: none !important; }
  .dm-layout.no-active-conv .dm-chat-area { display: none !important; }
  .dm-layout { flex-direction: column; }
  .dm-conv-list { width: 100% !important; min-width: 0 !important; }
  .dm-chat-area { width: 100% !important; }
}

/* ── 8. Topbar — Hesabım label ────────────────────────────── */
.topnav-link[href*="page=profile"] { /* aktif renk */ }

/* ── 9. Vitrin aksiyon butonları — ikon + metin ───────────── */
.feed-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px 12px;
  flex-wrap: wrap;
}
.feed-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  text-decoration: none; color: var(--text-2);
  background: none; border: none; cursor: pointer;
  transition: background .12s, color .12s;
  min-height: 38px; white-space: nowrap;
}
.feed-action-btn:hover { background: var(--bg-dark); color: var(--primary); text-decoration: none; }
.feed-action-btn.like-btn.liked { color: #e11d48; }
.feed-action-btn.like-btn:hover { color: #e11d48; background: #fee2e2; }
[data-theme="dark"] .feed-action-btn.like-btn:hover { background: #2d1215; }

/* ── 10. Story önizleme — create sayfası daha büyük ──────── */
.story-preview-box {
  aspect-ratio: 9 / 16 !important;
  max-height: 520px !important;
  min-height: 300px !important;
}

/* ── 11. Mobil menü — İlanlar yerine Hesabım ─────────────── */
.mobile-bottom-nav { z-index: 100; }

/* ── 12. Global: link hover temizlik ──────────────────────── */
a.feed-action-btn:hover { text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════
   BusTop v2 — Global Arama + Yorum + Arama Sayfası CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── Global Arama Kutusu (Header) ─────────────────────────────── */
.global-search-wrap {
  position: relative;
  flex: 0 1 320px;
  min-width: 0;
}
.global-search-form {
  position: relative;
  display: flex;
  align-items: center;
}
.global-search-input {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.global-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);
  background: var(--surface);
}
.global-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}
.global-search-btn:hover { color: var(--primary); }
.global-search-mobile-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
}
.global-search-mobile-icon:hover { background: var(--bg); color: var(--primary); }
/* Autocomplete dropdown */
.global-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  max-height: 360px;
  overflow-y: auto;
}
.gsd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
  transition: background .1s;
  border-bottom: 1px solid var(--border);
}
.gsd-item:last-child { border-bottom: none; }
.gsd-item:hover { background: var(--bg); }
.gsd-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.gsd-label { font-size: 14px; font-weight: 600; }
.gsd-sub   { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* Mobil: 768px altında sadece ikon göster */
@media (max-width: 768px) {
  .global-search-wrap { flex: 0 0 auto; }
  .global-search-form { display: none; }
  .global-search-mobile-icon { display: flex; }
  .global-search-wrap.mobile-open .global-search-form {
    display: flex;
    position: fixed;
    top: 58px;
    left: 0; right: 0;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 300;
  }
  .global-search-wrap.mobile-open .global-search-input { width: 100%; }
  .global-search-wrap.mobile-open .global-search-dropdown {
    top: calc(100% + 4px);
    position: fixed;
    left: 12px;
    right: 12px;
    top: 104px;
  }
}

/* ── Arama Sayfası ────────────────────────────────────────────── */
.search-page { padding: 24px 0 60px; }
.search-header { margin-bottom: 24px; }
.search-header h1 { font-size: 24px; margin-bottom: 12px; }
.search-form-page {
  display: flex;
  gap: 8px;
  max-width: 560px;
}
.search-input-lg {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.search-input-lg:focus { border-color: var(--primary); }
.search-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.search-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.search-tab.active { color: var(--primary); border-color: var(--primary); }
.search-tab:hover { color: var(--text); text-decoration: none; }
.search-section { margin-bottom: 32px; }
.search-section-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--text-2); }
/* Kullanıcı grid */
.search-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.search-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.search-user-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); text-decoration: none; }
.suc-name { font-size: 14px; font-weight: 600; }
.suc-role { font-size: 12px; color: var(--muted); }
.suc-rating { font-size: 12px; color: var(--warning); }
/* Gönderi listesi */
.search-posts-list { display: flex; flex-direction: column; gap: 12px; }
.search-post-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.spl-img { width: 80px; height: 80px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.spl-img img { width: 100%; height: 100%; object-fit: cover; }
.spl-body { flex: 1; min-width: 0; }
.spl-user { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.spl-user a { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text-2); }
.spl-user a:hover { color: var(--primary); }
.spl-body h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.spl-body h4 a { color: var(--text); text-decoration: none; }
.spl-body h4 a:hover { color: var(--primary); }
.spl-stats { font-size: 13px; color: var(--muted); }
/* İlan listesi */
.search-listings-list { display: flex; flex-direction: column; gap: 8px; }
.search-listing-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s;
}
.search-listing-row:hover { border-color: var(--primary); text-decoration: none; }
.slr-title { font-size: 14px; font-weight: 600; }
.slr-meta  { font-size: 12px; color: var(--muted); }
.search-empty { padding: 60px 20px; text-align: center; }
[data-theme="dark"] .global-search-input { background: var(--bg-dark); }
[data-theme="dark"] .global-search-dropdown { background: var(--bg-dark); border-color: var(--border); }
[data-theme="dark"] .gsd-item:hover { background: var(--bg); }
[data-theme="dark"] .search-user-card,
[data-theme="dark"] .search-post-row,
[data-theme="dark"] .search-listing-row { background: var(--bg-dark); border-color: var(--border); }

/* ── Inline Yorum Paneli ─────────────────────────────────────── */
.inline-comment-panel {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0 0 var(--r) var(--r);
}
[data-theme="dark"] .inline-comment-panel { background: var(--bg-dark); }
.icp-form {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.icp-textarea {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  resize: none;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
  font-family: var(--font);
  min-height: 38px;
}
.icp-textarea:focus { border-color: var(--primary); }
.icp-comment-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.icp-comment-item:last-child { border-bottom: none; }
.icp-comment-item strong { font-weight: 600; font-size: 13px; }
.icp-comment-item small  { color: var(--muted); font-size: 11px; margin-left: 6px; }
.icp-comment-item p { margin: 4px 0 2px; color: var(--text-2); line-height: 1.5; }
.icp-comment-item time { font-size: 11px; color: var(--muted); }

/* ── hide-desktop yardımcısı ──────────────────────────────────── */
@media (min-width: 769px) { .hide-desktop { display: none !important; } }


/* ═══════════════════════════════════════════════════════════════
   v13 — Instagram-benzeri UX iyileştirmeleri
   ═══════════════════════════════════════════════════════════════ */

/* Feed kartı — border-radius ve shadow Instagram gibi */
.vitrin-feed-card {
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow .2s ease;
  will-change: transform;
}
.vitrin-feed-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); }

/* Görsel yüklenirken skeleton efekti */
.vitrin-feed-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg-dark) 25%, var(--border) 50%, var(--bg-dark) 75%);
  background-size: 200% 100%;
  animation: imgSkeleton 1.4s ease infinite;
  z-index: 0;
}
.vitrin-feed-img-wrap img { position: relative; z-index: 1; }
.vitrin-feed-img-wrap img.loaded::before { display: none; }
@keyframes imgSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Feed aksiyon butonları — tam Instagram gibi */
.vitrin-feed-actions {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
}
.vfa {
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  min-height: 36px;
}
.vfa.like-btn { font-size: 16px; }
.vfa-spacer-right { margin-left: auto; }

/* Story yüzük animasyonu */
.story-ring:not(.viewed) {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  padding: 2.5px;
  border-radius: 50%;
}
.story-ring:not(.viewed) .avatar {
  border: 2.5px solid var(--bg-card);
  border-radius: 50%;
}

/* Profil header — daha Instagram hissi */
.prof-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prof-header-actions .btn {
  min-width: 120px;
  font-size: 13px;
  padding: 8px 16px;
  min-height: 36px;
}

/* Profil sekmeleri — Instagram style */
.prof-tabs {
  display: flex;
  border-top: 1px solid var(--border);
  margin: 0;
}
.prof-tab {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-top: 2px solid transparent;
  transition: color .15s, border-color .15s;
  letter-spacing: 0.3px;
}
.prof-tab.active { color: var(--text); border-top-color: var(--text); }
.prof-tab:hover { color: var(--text); }

/* Profil gönderi grid — Instagram 3-kolon */
.prof-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 0;
}
.prof-post-thumb {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg-dark);
}
.prof-post-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .25s;
}
.prof-post-thumb:hover img { transform: scale(1.05); }
.prof-post-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  transition: opacity .2s;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.prof-post-thumb:hover .prof-post-thumb-overlay { opacity: 1; }

/* Feed stream — max genişlik ve ortalama */
.feed-stream,
.vitrin-feed-stream {
  max-width: 600px;
  width: 100%;
}

/* DM balonları — daha modern */
.dm-bubble.mine .dm-bubble-text {
  background: var(--primary);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
}
.dm-bubble.theirs .dm-bubble-text {
  background: var(--bg-dark);
  border-radius: 18px 18px 18px 4px;
}
.dm-bubble-text {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 280px;
  word-break: break-word;
}
.dm-bubble-img img {
  border-radius: 12px;
  max-width: 240px;
  max-height: 300px;
  object-fit: cover;
  cursor: zoom-in;
}

/* Mobil için DM textarea klavye açıldığında düzgün */
.dm-chat-form {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}

/* Resim yüklenirken progress göster */
@keyframes uploadPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.uploading-indicator {
  animation: uploadPulse 1s ease infinite;
  color: var(--primary);
  font-size: 13px;
  text-align: center;
  padding: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   BusTop V2 — Instagram Benzeri Sidebar & Tam Dark Mode
   ═══════════════════════════════════════════════════════════════ */

/* ── APP SHELL (yeni layout) ──────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ── IG SIDEBAR ───────────────────────────────────────────────── */
.ig-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 110;
  transition: width .2s ease;
}
.ig-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 8px 16px;
}
.ig-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 20px;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.5px;
  flex-shrink: 0;
}
.ig-sidebar-logo:hover { text-decoration: none; }
.ig-sidebar-wordmark { white-space: nowrap; }

.ig-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ig-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, transform .1s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
  min-height: 48px;
}
.ig-nav-item:hover {
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
  transform: scale(1.01);
}
.ig-nav-item.active {
  font-weight: 700;
}
.ig-nav-item.active .ig-nav-icon svg {
  stroke-width: 2.5;
}
.ig-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.ig-nav-avatar {
  display: flex;
  align-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.ig-nav-avatar .avatar {
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}
.ig-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.ig-nav-badge {
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}
.ig-nav-emoji {
  font-size: 16px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.ig-create-btn { color: var(--text); }
.ig-theme-btn  { color: var(--text); }
.ig-logout-btn { color: var(--danger); }
.ig-logout-btn:hover { background: var(--danger-light); }

.ig-sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* ── APP MAIN ─────────────────────────────────────────────────── */
.app-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ── MOBILE TOPBAR ────────────────────────────────────────────── */
.mobile-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 8px;
}
.mob-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  transition: background .15s;
  cursor: pointer;
  border: none;
  background: none;
}
.mob-menu-btn:hover { background: var(--bg); }
.mob-topbar-right { display: flex; align-items: center; gap: 4px; }
.mob-topbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  text-decoration: none;
  position: relative;
}
.mob-topbar-icon:hover { background: var(--bg); }

/* ── GLOBAL SEARCH BAR ────────────────────────────────────────── */
.global-search-bar-wrap {
  display: none; /* Sidebar'da ayrı buton var, gerekirse açılır */
}
.global-search-form-top {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* ── CREATE MODAL (Instagram tarzı) ──────────────────────────── */
.create-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
  animation: modalFadeIn .2s ease;
}
.create-modal-overlay.open { display: flex; }
.create-modal {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px 32px;
  width: 100%;
  max-width: 520px;
  animation: modalSlideUp .25s ease;
}
.create-modal-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  margin: 0 auto 20px;
}
.create-modal-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: var(--text);
}
.create-options { display: flex; flex-direction: column; gap: 8px; }
.create-option-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.create-option-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  text-decoration: none;
}
.create-option-icon { font-size: 28px; width: 40px; text-align: center; flex-shrink: 0; }
.create-option-info { flex: 1; }
.create-option-label { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.create-option-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.create-modal-close {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s;
}
.create-modal-close:hover { background: var(--border); }

@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── MBN AVATAR ───────────────────────────────────────────────── */
.avatar.mbn-avatar,
.mbn-item .avatar.mbn-avatar {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
  margin: 0 auto 2px !important;
}

/* ── MOBIL ALT MENÜ ────────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.mbn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 48px;
  position: relative;
  transition: color .15s;
  flex: 1;
}
.mbn-item.active { color: var(--primary); }
.mbn-item:hover { text-decoration: none; color: var(--primary); }
.mbn-create { }
.mbn-create-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.4);
}
.mbn-badge {
  position: absolute;
  top: 2px;
  right: 8px;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ── VITRIN KATEGORİ DİLİ YENİLEME ───────────────────────────── */
/* Yeni post type chip renkleri */
.vitrin-type-chip.vehicle-available { background: #dbeafe; color: #1e40af; }
.vitrin-type-chip.driver-available  { background: #dcfce7; color: #15803d; }
.vitrin-type-chip.job-available     { background: #fef3c7; color: #92400e; }

/* ── VİTRİN EMPTY STATE ──────────────────────────────────────── */
.vitrin-feed-empty {
  text-align: center;
  padding: 80px 24px;
  max-width: 400px;
  margin: 0 auto;
}
.vitrin-feed-empty .empty-icon { font-size: 56px; margin-bottom: 16px; }
.vitrin-feed-empty h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.vitrin-feed-empty p  { color: var(--muted); margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
.vitrin-feed-empty .btn { margin: 0 auto; }

/* ── İLAN SAYFASI SEKMELERİ ──────────────────────────────────── */
.listings-sub-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.listings-sub-tabs::-webkit-scrollbar { display: none; }
.lst-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-2);
  background: var(--bg);
  border: 1.5px solid transparent;
  transition: all .15s;
}
.lst-tab:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }
.lst-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── DARK MODE — KAPSAMLI ─────────────────────────────────────── */
[data-theme="dark"] {
  --primary-light:  #1e1b4b;
  --primary-mid:    #312e81;
  --bg:             #0f1117;
  --bg-dark:        #1a1d27;
  --surface:        #16191f;
  --text:           #f1f5f9;
  --text-2:         #cbd5e1;
  --muted:          #64748b;
  --muted-light:    #475569;
  --border:         #2d3344;
  --border-dark:    #374151;
  --shadow:         0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:      0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:      0 10px 30px rgba(0,0,0,.5);
}

/* Temel elementler */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .topbar,
[data-theme="dark"] .mobile-topbar { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .ig-sidebar { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .ig-nav-item:hover { background: var(--bg); }
[data-theme="dark"] .mobile-bottom-nav { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .footer { background: #0a0c12; border-color: var(--border); }

/* Form elemanları */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--bg-dark) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted) !important; }
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus { border-color: var(--primary) !important; }

/* Butonlar */
[data-theme="dark"] .btn.ghost { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn.ghost:hover { background: var(--bg-dark); color: var(--text); }

/* Kartlar & listeler */
[data-theme="dark"] .vitrin-feed-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .vitrin-feed-img-wrap { background: #1a1d27; }
[data-theme="dark"] .feed-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .listing-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .profile-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .request-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .offer-row.rich { background: var(--bg-dark); border-color: var(--border); }

/* DM / Mesajlar */
[data-theme="dark"] .dm-conv-item { border-color: var(--border); }
[data-theme="dark"] .dm-conv-item:hover { background: var(--bg-dark); }
[data-theme="dark"] .dm-conv-item.active { background: var(--primary-light); }
[data-theme="dark"] .dm-bubble.theirs .dm-bubble-text { background: #2d3348; border-color: var(--border); }
[data-theme="dark"] .dm-bubble.mine .dm-bubble-text { background: var(--primary); color: #fff; }
[data-theme="dark"] .dm-chat-form { background: var(--bg-dark); border-color: var(--border); }
[data-theme="dark"] .dm-conv-list { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .dm-chat-area { background: var(--bg); }
[data-theme="dark"] .dm-textarea { background: var(--bg-dark); color: var(--text); border-color: var(--border); }

/* Story */
[data-theme="dark"] .story-ring { border-color: var(--primary); }
[data-theme="dark"] .story-ring.viewed { border-color: var(--border-dark); }
[data-theme="dark"] .story-modal-inner { background: #000; }
[data-theme="dark"] .story-progress-bar { background: rgba(255,255,255,.3); }

/* Profil */
[data-theme="dark"] .prof-header-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .prof-tab { color: var(--text-2); border-color: transparent; }
[data-theme="dark"] .prof-tab.active { color: var(--text); border-color: var(--text); }
[data-theme="dark"] .prof-contact-btn { background: var(--bg-dark); border-color: var(--border); }
[data-theme="dark"] .prof-contact-btn.primary { background: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .prof-about-card { background: var(--surface); }

/* İlanlar */
[data-theme="dark"] .listings-filter-panel { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .filter-option { color: var(--text-2); }
[data-theme="dark"] .filter-option:hover { background: var(--bg-dark); color: var(--primary); }
[data-theme="dark"] .filter-option.active { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .listings-search-input,
[data-theme="dark"] .listings-sort-select { background: var(--bg-dark); border-color: var(--border); color: var(--text); }

/* Bildirimler */
[data-theme="dark"] .notif-item { border-color: var(--border); background: var(--surface); }
[data-theme="dark"] .notif-item.unread { background: var(--primary-light); }

/* Paylaşım kutusu */
[data-theme="dark"] .vitrin-composer-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .vitrin-composer-input { background: var(--bg-dark); border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .share-box { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .share-box-input { background: var(--bg-dark); border-color: var(--border); color: var(--muted); }

/* Modal */
[data-theme="dark"] .create-modal { background: var(--surface); }
[data-theme="dark"] .create-modal-handle { background: var(--border); }
[data-theme="dark"] .create-option-card { background: var(--bg-dark); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .create-option-card:hover { background: var(--primary-light); border-color: var(--primary); }
[data-theme="dark"] .create-modal-close { background: var(--bg-dark); border-color: var(--border); color: var(--text-2); }
[data-theme="dark"] .share-modal { background: var(--surface); }
[data-theme="dark"] .share-modal-handle { background: var(--border); }
[data-theme="dark"] .share-option-card { background: var(--bg-dark); border-color: var(--border); color: var(--text); }

/* Dropdown / Arama */
[data-theme="dark"] .global-search-input { background: var(--bg-dark); color: var(--text); }
[data-theme="dark"] .global-search-dropdown { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .gsd-item { color: var(--text); }
[data-theme="dark"] .gsd-item:hover { background: var(--bg-dark); }
[data-theme="dark"] .vitrin-dropdown { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .vitrin-dropdown a { color: var(--text); }
[data-theme="dark"] .vitrin-dropdown a:hover { background: var(--bg-dark); }
[data-theme="dark"] .dropdown { background: var(--surface); border-color: var(--border); }

/* Tablolar */
[data-theme="dark"] table { background: var(--surface); }
[data-theme="dark"] th { background: var(--bg-dark); color: var(--text-2); border-color: var(--border); }
[data-theme="dark"] td { border-color: var(--border); color: var(--text); }
[data-theme="dark"] tr:hover { background: var(--bg-dark); }
[data-theme="dark"] .table-card { background: var(--surface); border-color: var(--border); }

/* Sidebar badge ve onboarding */
[data-theme="dark"] .onboarding-card { background: var(--surface); border-color: var(--primary); }
[data-theme="dark"] .sidebar-plan-box { background: var(--primary-light); border-color: var(--primary-mid); }
[data-theme="dark"] .badge-verified { background: #1a3a2a; color: #4ade80; }

/* Arama sonuçları */
[data-theme="dark"] .search-user-card,
[data-theme="dark"] .search-post-row,
[data-theme="dark"] .search-listing-row { background: var(--bg-dark); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .search-user-card:hover,
[data-theme="dark"] .search-post-row:hover,
[data-theme="dark"] .search-listing-row:hover { border-color: var(--primary); }

/* Ayarlar formu */
[data-theme="dark"] .auth-card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .login-form-panel { background: var(--surface); }
[data-theme="dark"] .login-brand-panel { background: linear-gradient(135deg, var(--primary), #7c3aed); }

/* Flash mesajları */
[data-theme="dark"] .flash { border-radius: var(--r-sm); }
[data-theme="dark"] .flash-success { background: #052e16; border-color: #16a34a; color: #86efac; }
[data-theme="dark"] .flash-danger  { background: #450a0a; border-color: #dc2626; color: #fca5a5; }
[data-theme="dark"] .flash-info    { background: #082f49; border-color: #0284c7; color: #7dd3fc; }
[data-theme="dark"] .flash-warning { background: #451a03; border-color: #d97706; color: #fcd34d; }

/* Vitrin type filtreler */
[data-theme="dark"] .vitrin-filter-chip { background: var(--bg-dark); border-color: var(--border); color: var(--text-2); }
[data-theme="dark"] .vitrin-filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
[data-theme="dark"] .vitrin-filter-chip:hover { background: var(--primary-light); color: var(--primary); }

/* Inline yorum paneli */
[data-theme="dark"] .inline-comment-panel { background: var(--bg-dark); }
[data-theme="dark"] .icp-textarea { background: var(--bg-dark); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .comment-item { border-color: var(--border); }

/* Prof tabs */
[data-theme="dark"] .prof-tabs { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .prof-doc-item.valid  { background: #052e16; border-color: #16a34a; }
[data-theme="dark"] .prof-doc-item.expired { background: #450a0a; border-color: #dc2626; }

/* ── RESPONSIVE: TABLET VE MOBİL ──────────────────────────────── */
@media (max-width: 1024px) {
  .ig-sidebar {
    width: 72px; /* Dar ekranda sadece ikonlar */
  }
  .ig-sidebar-wordmark,
  .ig-nav-label { display: none; }
  .ig-sidebar-logo { justify-content: center; padding: 14px 10px 20px; }
  .ig-nav-item { justify-content: center; gap: 0; padding: 12px; min-height: 52px; }
  .ig-nav-emoji { margin: 0 auto; }
}

@media (max-width: 768px) {
  /* Sidebar mobilde gizli - alt menü var */
  .ig-sidebar { display: none; }
  .mobile-topbar { display: flex; }
  .mobile-bottom-nav { display: flex; }

  /* App main tam genişlik */
  .app-shell { flex-direction: column; }
  .app-main { padding-bottom: 70px; }

  /* Sidebar mobil drawer */
  .ig-sidebar.mobile-open {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: 300;
    box-shadow: var(--shadow-lg);
  }
  .ig-sidebar-wordmark,
  .ig-nav-label { display: block; }
  .ig-nav-item { justify-content: flex-start; gap: 14px; }

  /* Feed max genişlik */
  .vitrin-page-layout { flex-direction: column; }
  .vitrin-side-col { display: none; }
  .vitrin-main-col { max-width: 100%; }

  /* Feed kartları */
  .vitrin-feed-card { border-radius: 0; border-left: none; border-right: none; margin: 0 -20px; }

  /* Profil */
  .prof-header-inner { flex-direction: column; align-items: flex-start; }
  .prof-header-actions { flex-wrap: wrap; gap: 8px; }
  .prof-posts-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
}

@media (max-width: 414px) {
  .prof-posts-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .create-modal { border-radius: 20px 20px 0 0; }
}

/* Sidebar overlay (mobil) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

/* ── ONBOARDING DARK FIX ─────────────────────────────────────── */
[data-theme="dark"] .feed-empty { background: var(--bg-dark); border-radius: var(--r); padding: 40px 24px; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: 16px 0;
  background: var(--surface);
  font-size: 13px;
  color: var(--muted);
}
.footer-with-mobile-nav { margin-bottom: 64px; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: var(--primary); text-decoration: underline; }


/* ── ESKİ LAYOUT UYUMLULUK ─────────────────────────────────────
   app-wrap ve eski sidebar artık kullanılmıyor - ig-sidebar var
   Eski sınıflar CSS'de kalıyor ama layout.php'de kullanılmıyor
   ─────────────────────────────────────────────────────────────── */

/* Yeni app-shell üst topbar gizle (app içinde) */
.app-shell .topbar { display: none; }

/* Public topbar sadece public kullanıcıda görünsün */
.is-public .topbar { display: flex; }
.is-app .topbar { display: none; }

/* Public nav'da hamburger gizle */
@media (min-width: 769px) {
  .hamburger-btn { display: none; }
}
@media (max-width: 768px) {
  .hamburger-btn { display: flex; }
  .topnav-public.hide-mobile { display: none; }
}

/* Public nav mobil açık hali */
.topnav-public.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px;
  width: 220px;
  box-shadow: var(--shadow-md);
  z-index: 300;
}
[data-theme="dark"] .topnav-public.open { background: var(--surface); border-color: var(--border); }

/* Flash container mobilde sticky */
.flash-container {
  position: sticky;
  top: 0;
  z-index: 99;
}
.is-app .flash-container {
  top: 52px; /* mobile topbar yüksekliği */
}
@media (min-width: 769px) {
  .is-app .flash-container { top: 0; }
}

/* Story - eski uyumluluk */
.story-row-wrap { /* korunuyor */ }

/* Feed sayfa — sidebar yoksa tam genişlik */
.feed-page { width: 100%; }
.feed-page-inner { display: flex; gap: 24px; max-width: 960px; margin: 0 auto; padding: 20px; }
.feed-main-col { flex: 1; min-width: 0; max-width: 640px; }
.feed-side-col  { width: 280px; flex-shrink: 0; }
@media (max-width: 1024px) { .feed-side-col { display: none; } .feed-main-col { max-width: 100%; } }
@media (max-width: 768px)  { .feed-page-inner { padding: 12px; flex-direction: column; } .feed-main-col { max-width: 100%; } }

/* DM — dark mode ek düzeltmeler */
[data-theme="dark"] .dm-layout { background: var(--bg); }
[data-theme="dark"] .dm-page { background: var(--bg); }

/* Profil sayfası dark fix */
[data-theme="dark"] .prof-page { background: var(--bg); }
[data-theme="dark"] .prof-about-card h3 { color: var(--text); }

/* Admin sidebar dark fix */
[data-theme="dark"] .ig-sidebar .ig-nav-item { color: var(--text-2); }
[data-theme="dark"] .ig-sidebar .ig-nav-item:hover { background: var(--bg-dark); }
[data-theme="dark"] .ig-sidebar .ig-nav-item.active { color: var(--text); font-weight: 700; }

/* İLAN alt sekmeler */
.listings-tabs-wrap {
  display: flex;
  gap: 8px;
  padding: 16px 20px 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.listings-tabs-wrap::-webkit-scrollbar { display: none; }
.lt-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
  background: none;
}
.lt-tab:hover { color: var(--primary); text-decoration: none; }
.lt-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
[data-theme="dark"] .lt-tab { color: var(--text-2); }
[data-theme="dark"] .lt-tab.active { color: var(--primary); }


/* ═══════════════════════════════════════════════════════════════
   KLİPLER SAYFASI & VİDEO STİLLERİ
   ═══════════════════════════════════════════════════════════════ */

/* Klipler sayfa layout */
.clips-page { width: 100%; }
.clips-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 20px 16px;
}
.clips-feed {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
  padding: 0 20px 32px;
}

/* Klip kartı */
.clip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

/* Klip video alanı — 9:16 veya 16:9 */
.clip-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
.clip-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}
.clip-no-video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--bg-dark);
  color: var(--muted);
}
.clip-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  cursor: pointer;
  transition: opacity .2s;
}
.clip-play-overlay:hover { background: rgba(0,0,0,.5); }
.clip-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #000;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Klip bilgi alanı */
.clip-info {
  padding: 14px 16px 16px;
}
.clip-user {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 8px;
}
.clip-user:hover { text-decoration: none; color: var(--primary); }
.clip-user strong { font-size: 14px; font-weight: 600; display: block; }
.clip-user small { font-size: 12px; color: var(--muted); }
.clip-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.clip-body  { font-size: 13px; color: var(--text-2); margin-bottom: 10px; line-height: 1.5; }

.clip-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.clip-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s, color .15s;
  cursor: pointer;
  border: none;
  background: none;
}
.clip-action:hover { background: var(--bg); color: var(--primary); text-decoration: none; }
.clip-action.liked { color: #ef4444; }
.clip-action.clip-delete { color: var(--danger); }
.clip-action.clip-delete:hover { background: var(--danger-light); }

/* Klipler boş ekran */
.clips-empty {
  text-align: center;
  padding: 80px 24px;
  max-width: 400px;
  margin: 0 auto;
}
.clips-empty .empty-icon { font-size: 56px; margin-bottom: 16px; }
.clips-empty h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.clips-empty p  { color: var(--muted); margin-bottom: 20px; font-size: 15px; line-height: 1.6; }

/* Vitrin feed video */
.vitrin-feed-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #000;
  overflow: hidden;
}
.vitrin-feed-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.vitrin-video-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

/* Profil klip thumbnail */
.prof-clip-thumb { position: relative; }
.prof-clip-no-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

/* Video upload zone */
.upload-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--bg);
  text-align: center;
  gap: 4px;
}
.upload-drop-zone:hover { border-color: var(--primary); background: var(--primary-light); }
.upload-drop-zone input[type="file"] { display: none; }
.upload-drop-icon { font-size: 36px; margin-bottom: 8px; }

/* Upload progress */
.upload-progress {
  height: 4px;
  background: var(--bg-dark);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.upload-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  width: 0%;
  transition: width .3s ease;
}

/* Dark mode - Klipler */
[data-theme="dark"] .clip-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .clip-no-video { background: var(--bg-dark); }
[data-theme="dark"] .clip-action:hover { background: var(--bg-dark); }
[data-theme="dark"] .upload-drop-zone { background: var(--bg-dark); border-color: var(--border); }
[data-theme="dark"] .upload-drop-zone:hover { background: var(--primary-light); border-color: var(--primary); }
[data-theme="dark"] .prof-clip-no-thumb { background: var(--bg-dark); }

/* Responsive - Klipler */
@media (max-width: 768px) {
  .clips-feed { padding: 0 0 80px; max-width: 100%; }
  .clip-card { border-radius: 0; border-left: none; border-right: none; }
  .clips-header { padding: 16px; }
  .clip-video-wrap { aspect-ratio: 9/16; max-height: 70vh; }
}


/* ── BİLDİRİMLER İYİLEŞTİRME ─────────────────────────────────── */
.notif-empty-state {
  text-align: center;
  padding: 80px 24px;
  max-width: 400px;
  margin: 0 auto;
}
.notif-empty-icon { font-size: 56px; margin-bottom: 16px; }
.notif-empty-state h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.notif-empty-state p { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 0; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--primary-light); }
.notif-item:hover { background: var(--bg-dark); }
.notif-icon-col {
  font-size: 22px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  border-radius: 50%;
  border: 1px solid var(--border);
}
.notif-body { flex: 1; min-width: 0; }
.notif-body b { font-size: 14px; font-weight: 600; display: block; margin-bottom: 3px; color: var(--text); }
.notif-body p { font-size: 13px; color: var(--text-2); margin: 0 0 4px; line-height: 1.4; }
.notif-body small { font-size: 11px; color: var(--muted); }
.notif-link { text-decoration: none; color: inherit; }
.notif-link:hover { text-decoration: none; }
.notif-read-btn {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: background .15s;
  flex-shrink: 0;
}
.notif-read-btn:hover { background: var(--success-light); color: var(--success); }

[data-theme="dark"] .notif-item.unread { background: var(--primary-light); }
[data-theme="dark"] .notif-icon-col { background: var(--bg-dark); border-color: var(--border); }
[data-theme="dark"] .notif-read-btn { background: var(--bg-dark); border-color: var(--border); }


/* ── DARK MODE EK DÜZELTMELERİ ──────────────────────────────── */

/* Story viewer */
[data-theme="dark"] .story-modal { background: rgba(0,0,0,.95); }
[data-theme="dark"] .story-close-btn { color: #fff; background: rgba(255,255,255,.2); }
[data-theme="dark"] .story-prev-btn,
[data-theme="dark"] .story-next-btn { color: #fff; background: rgba(255,255,255,.2); }
[data-theme="dark"] .story-footer { color: #fff; }

/* Klipler dark */
[data-theme="dark"] .clips-page { background: var(--bg); }
[data-theme="dark"] .clip-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .vitrin-video-badge { background: rgba(0,0,0,.8); }

/* Responsive nav dark */
[data-theme="dark"] .topnav-public.open { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .topnav-link { color: var(--text-2); }
[data-theme="dark"] .topnav-link:hover { color: var(--primary); }
[data-theme="dark"] .topbar { background: var(--surface); border-color: var(--border); }

/* Onboarding dark */
[data-theme="dark"] .onboarding-card { background: var(--surface); }

/* İlan boş ekran dark */
[data-theme="dark"] .listings-empty { background: var(--surface); }

/* Vitrin composer dark */
[data-theme="dark"] .vitrin-type-chip { color: var(--text-2); }
[data-theme="dark"] .vitrin-pin-label,
[data-theme="dark"] .vitrin-official-label { background: var(--bg-dark); color: var(--text-2); }

/* Admin dark */
[data-theme="dark"] .admin-quick-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .metric-card { background: var(--surface); border-color: var(--border); }

/* Boş ekranlar dark */
[data-theme="dark"] .empty-state { color: var(--text-2); }
[data-theme="dark"] .feed-empty { background: var(--surface); }
[data-theme="dark"] .vitrin-feed-empty { color: var(--text); }
[data-theme="dark"] .clips-empty { color: var(--text); }
[data-theme="dark"] .notif-empty-state h3 { color: var(--text); }

/* Profil header dark */
[data-theme="dark"] .prof-contact-btn.whatsapp { background: #052e16; border-color: #16a34a; }
[data-theme="dark"] .prof-contact-btn.phone { background: var(--bg-dark); border-color: var(--border); }
[data-theme="dark"] .prof-contact-btn.disabled { background: var(--bg-dark); }

/* Feed aksiyon butonları dark */
[data-theme="dark"] .feed-action-btn { color: var(--text-2); }
[data-theme="dark"] .feed-action-btn:hover { background: var(--bg-dark); color: var(--primary); }
[data-theme="dark"] .vfa { color: var(--text-2); }
[data-theme="dark"] .vfa:hover { background: var(--bg-dark); color: var(--primary); }

/* Share/paylaş kutusu dark */
[data-theme="dark"] .share-action-btn { background: var(--bg-dark); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .share-action-btn:hover { background: var(--primary-light); color: var(--primary); }

/* Profil grid thumbnail overlay dark */
[data-theme="dark"] .prof-post-thumb-overlay { background: rgba(0,0,0,.7); }

/* Listings tabs dark */
[data-theme="dark"] .listings-tabs-wrap { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .lt-tab { color: var(--text-2); }
[data-theme="dark"] .lt-tab.active { color: var(--primary); }

/* İlanlar filtreleri dark */
[data-theme="dark"] .filter-group h4 { color: var(--text-2); }
[data-theme="dark"] .filter-panel-head { border-color: var(--border); }

/* DM input dark */
[data-theme="dark"] .dm-form-inner { background: var(--bg-dark); border-color: var(--border); }
[data-theme="dark"] .dm-attach-btn { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .dm-send-btn { background: var(--primary); }

/* Prof tab dark */
[data-theme="dark"] .prof-tabs { border-color: var(--border); }

/* create-modal dark */
[data-theme="dark"] .create-modal { background: var(--surface); }
[data-theme="dark"] .create-modal-title { color: var(--text); }


/* ── KAPSAMLI RESPONSIVE DÜZELTMELERİ ─────────────────────────── */

/* 320px - en küçük ekran */
@media (max-width: 375px) {
  .mbn-item span { font-size: 9px; }
  .mbn-create-btn { width: 38px; height: 38px; }
  .ig-sidebar { width: 260px; }
  .create-modal { padding: 16px 12px 24px; }
  .create-option-card { padding: 12px 14px; gap: 12px; }
  .create-option-icon { font-size: 22px; width: 32px; }
}

/* 375-414px mobil */
@media (max-width: 414px) {
  .prof-header-inner { gap: 12px; }
  .prof-name { font-size: 20px; }
  .prof-header-actions { gap: 6px; }
  .prof-header-actions .btn { padding: 7px 12px; font-size: 13px; }
  .vitrin-feed-card { border-left: none; border-right: none; }
  .clip-card { border-left: none; border-right: none; border-radius: 0; }
  .listing-card { border-radius: 10px; }
  .listings-header { padding: 14px 16px; }
}

/* 768px tablet */
@media (max-width: 768px) {
  /* Feed */
  .feed-page-inner { padding: 8px 0; }
  .feed-main-col { padding: 0 4px; }

  /* Story row */
  .story-row-wrap { padding: 8px 0; }
  .story-row { padding: 0 8px; gap: 10px; }
  .story-item span, .story-add-item span { font-size: 10px; }

  /* DM mobil */
  .dm-page { height: calc(100vh - 52px - 64px); overflow: hidden; }
  .dm-layout { height: 100%; }
  .dm-conv-list { height: 100%; overflow-y: auto; }
  .dm-chat-area { height: 100%; display: flex; flex-direction: column; }
  .dm-chat-messages { flex: 1; overflow-y: auto; }
  .dm-chat-form { flex-shrink: 0; }
  .dm-conv-back-btn { display: inline-flex !important; }

  /* İlanlar sekmeler */
  .listings-tabs-wrap { padding: 0 12px; }
  .lt-tab { padding: 8px 12px; font-size: 13px; }

  /* Profil */
  .prof-posts-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .supp-cover-wrap { height: 100px; }
  .prof-avatar-wrap { margin-top: -32px !important; }
  .prof-avatar-wrap .avatar.xl { width: 72px !important; height: 72px !important; font-size: 24px !important; }
  
  /* Listings */
  .listings-layout { flex-direction: column; }
  .listings-sidebar-col { display: none; }
  .listings-main-col { width: 100%; }
  .listings-search-bar { flex-wrap: wrap; gap: 8px; }
  .listings-search-input { min-width: 0; width: 100%; }

  /* Bildirimler */
  .notif-list { padding: 0; }
  .notif-item { padding: 12px; }
  
  /* Klipler */
  .clips-header { flex-direction: column; gap: 8px; padding: 14px 16px; }

  /* Arama */
  .search-page { padding: 0; }
  .search-header { padding: 16px; }
  .search-users-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* IG sidebar mobil overlay backdrop */
  .sidebar-overlay.open { backdrop-filter: blur(4px); }
}

/* 1024px tablet geniş */
@media (min-width: 769px) and (max-width: 1024px) {
  .ig-sidebar { width: 72px; }
  .ig-sidebar .ig-nav-label,
  .ig-sidebar .ig-sidebar-wordmark { display: none; }
  .ig-sidebar .ig-sidebar-logo { justify-content: center; padding: 16px 10px; }
  .ig-sidebar .ig-nav-item { justify-content: center; gap: 0; padding: 14px 10px; border-radius: 10px; }
  .ig-sidebar .ig-nav-avatar .avatar { width: 28px !important; height: 28px !important; }
  
  .feed-page-inner { padding: 16px; }
  .vitrin-page-layout { gap: 16px; }
  .feed-side-col { width: 220px; }
}

/* 1280px desktop */
@media (min-width: 1025px) {
  .ig-sidebar { width: 240px; }
  .ig-sidebar .ig-nav-label,
  .ig-sidebar .ig-sidebar-wordmark { display: block; }
  .ig-sidebar .ig-nav-item { justify-content: flex-start; gap: 14px; }

  .dm-layout {
    display: flex;
    height: calc(100vh - 52px);
    overflow: hidden;
  }
  .dm-conv-list {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border);
  }
  .dm-chat-area { flex: 1; display: flex; flex-direction: column; }
  .dm-chat-messages { flex: 1; overflow-y: auto; }
  .dm-conv-back-btn { display: none !important; }

  /* Feed max-width */
  .feed-main-col { max-width: 640px; }
  .vitrin-main-col { max-width: 680px; }
}

/* 1440px+ büyük desktop */
@media (min-width: 1441px) {
  .feed-page-inner { max-width: 1080px; }
  .vitrin-page-layout { max-width: 1100px; }
}

/* Klavye açılma koruması - mobil */
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .dm-page { height: calc(100dvh - 52px - 64px); }
    .dm-layout { height: 100%; }
  }
}

/* DM back butonu - mobilde görünsün */
.dm-conv-back-btn { display: none; }


/* ═══════════════════════════════════════════════════════════════
   BusTop V2 — Kapsamlı Dark Mode + Responsive Düzeltmeleri
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar dark mode aktif/hover durumu ── */
[data-theme="dark"] .ig-nav-item { color: var(--text); }
[data-theme="dark"] .ig-nav-item:hover { background: var(--bg-dark); color: var(--text); }
[data-theme="dark"] .ig-nav-item.active { color: var(--text); font-weight: 700; }
[data-theme="dark"] .ig-sidebar-logo { color: var(--text); }
[data-theme="dark"] .ig-sidebar-wordmark { color: var(--text); }
[data-theme="dark"] .ig-create-btn { color: var(--text); }
[data-theme="dark"] .ig-logout-btn { color: var(--muted); }
[data-theme="dark"] .ig-logout-btn:hover { color: #ef4444; background: #2d1a1a; }
[data-theme="dark"] .ig-theme-btn { color: var(--muted); }
[data-theme="dark"] .ig-theme-btn:hover { color: var(--text); }

/* ── Mobil bottom nav dark mode ── */
[data-theme="dark"] .mbn-item { color: var(--muted); }
[data-theme="dark"] .mbn-item.active { color: var(--primary); }
[data-theme="dark"] .mbn-item span { color: inherit; }
[data-theme="dark"] .mbn-create-btn { background: var(--primary); }
[data-theme="dark"] .mobile-topbar { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .mob-menu-btn, [data-theme="dark"] .mob-topbar-icon { color: var(--text); }

/* ── Post kartı dark mode ── */
[data-theme="dark"] .vitrin-feed-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .feed-user-name { color: var(--text); }
[data-theme="dark"] .feed-role-badge { color: var(--muted); }
[data-theme="dark"] .feed-type-badge { background: var(--bg-dark); color: var(--muted); }
[data-theme="dark"] .feed-body { color: var(--text); }
[data-theme="dark"] .feed-actions { border-top-color: var(--border); }
[data-theme="dark"] .feed-action-btn { color: var(--muted); }
[data-theme="dark"] .feed-action-btn:hover { color: var(--primary); background: var(--primary-light); }

/* ── Create modal dark mode ── */
[data-theme="dark"] .create-modal { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .create-modal-title { color: var(--text); }
[data-theme="dark"] .create-option-card { background: var(--bg-dark); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .create-option-card:hover { background: var(--primary-light); border-color: var(--primary); }
[data-theme="dark"] .create-option-label { color: var(--text); }
[data-theme="dark"] .create-option-desc { color: var(--muted); }
[data-theme="dark"] .create-modal-close { color: var(--muted); }
[data-theme="dark"] .create-modal-close:hover { color: var(--text); }

/* ── Profil sayfası dark mode ── */
[data-theme="dark"] .prof-header { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .prof-name { color: var(--text); }
[data-theme="dark"] .prof-role { color: var(--muted); }
[data-theme="dark"] .prof-bio { color: var(--text-2, var(--muted)); }
[data-theme="dark"] .prof-stat-val { color: var(--text); }
[data-theme="dark"] .prof-stat-label { color: var(--muted); }
[data-theme="dark"] .prof-tab-nav a { color: var(--muted); border-bottom-color: transparent; }
[data-theme="dark"] .prof-tab-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }
[data-theme="dark"] .prof-contact-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .prof-contact-btn { background: var(--bg-dark); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .prof-contact-btn:hover { border-color: var(--primary); }
[data-theme="dark"] .pcb-label { color: var(--text); }
[data-theme="dark"] .pcb-desc { color: var(--muted); }

/* ── Story viewer dark mode ── */
[data-theme="dark"] .story-modal { background: rgba(0,0,0,.95); }
[data-theme="dark"] .story-modal-inner { background: #0a0c12; }
[data-theme="dark"] .story-close-btn { color: #fff; }
[data-theme="dark"] .story-prev-btn, [data-theme="dark"] .story-next-btn { color: rgba(255,255,255,.8); }

/* ── Story row dark mode ── */
[data-theme="dark"] .story-username { color: var(--text); }
[data-theme="dark"] .story-add-btn { background: var(--bg-dark); border-color: var(--border); color: var(--muted); }

/* ── Klip sayfası dark mode ── */
[data-theme="dark"] .clip-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .clip-username { color: var(--text); }
[data-theme="dark"] .clip-role { color: var(--muted); }
[data-theme="dark"] .clip-desc { color: var(--text-2, var(--muted)); }
[data-theme="dark"] .clip-action { color: var(--muted); }
[data-theme="dark"] .clip-action:hover { color: var(--primary); }
[data-theme="dark"] .clips-page-header { background: var(--surface); border-color: var(--border); }

/* ── İlan kartları dark mode ── */
[data-theme="dark"] .listing-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .listing-card:hover { background: var(--bg-dark); }
[data-theme="dark"] .listing-title { color: var(--text); }
[data-theme="dark"] .listing-meta { color: var(--muted); }
[data-theme="dark"] .listing-body { color: var(--text-2, var(--muted)); }

/* ── Arama dark mode ── */
[data-theme="dark"] .search-result-item { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .search-result-item:hover { background: var(--bg-dark); }
[data-theme="dark"] .global-search-input { background: var(--bg-dark) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .global-search-dropdown { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .search-dropdown-item { color: var(--text); }
[data-theme="dark"] .search-dropdown-item:hover { background: var(--bg-dark); }

/* ── Flash mesajları dark mode ── */
[data-theme="dark"] .flash { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .flash.flash-success { background: #0d2318; border-color: #166534; color: #4ade80; }
[data-theme="dark"] .flash.flash-danger { background: #2d1a1a; border-color: #991b1b; color: #f87171; }
[data-theme="dark"] .flash.flash-warning { background: #2d2000; border-color: #92400e; color: #fbbf24; }

/* ── Ayarlar formu dark mode ── */
[data-theme="dark"] .profile-settings { background: var(--surface); }
[data-theme="dark"] label { color: var(--text); }

/* ── Empty state dark mode ── */
[data-theme="dark"] .empty-state { background: var(--surface); color: var(--muted); }
[data-theme="dark"] .vitrin-feed-empty { background: var(--surface); }

/* ── Onboarding card dark mode ── */
[data-theme="dark"] .phone-warning-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .onboard-head b { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   Responsive iyileştirmeler — 320px
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
  .hero-actions { flex-direction: column; gap: 8px; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .create-options { gap: 8px; }
  .create-option-card { padding: 12px; }
  .tab-row, .tab-nav { gap: 4px; }
  .tab-row a, .tab-nav a { font-size: 12px; padding: 6px 8px; }
  .prof-stats { gap: 12px; }
  .prof-actions { flex-direction: column; gap: 6px; }
  .prof-actions .btn { width: 100%; }
  .listing-card-actions { flex-wrap: wrap; }
  .mobile-bottom-nav .mbn-item span { font-size: 10px; }
}

@media (max-width: 375px) {
  .feed-page-inner { padding: 0 4px; }
  .vitrin-feed-card { border-radius: 0; border-left: none; border-right: none; }
  .dm-textarea { font-size: 16px; } /* iOS zoom önlemi */
}

/* ── Feed max-width düzeltmesi ── */
.feed-main-col { max-width: 640px; width: 100%; margin: 0 auto; }

/* ── Vitrin feed kart 1:1 görsel ── */
.vitrin-feed-img-wrap { aspect-ratio: 1 / 1; overflow: hidden; display: block; }
.vitrin-feed-img { width: 100%; height: 100%; object-fit: cover; }

/* ── DM mobil klavye fix ── */
@media (max-width: 768px) {
  .dm-chat-form { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 8px 12px; z-index: 10; }
  .dm-conv-back-btn { display: inline-flex; align-items: center; gap: 6px; }
}

/* ── Mobilde yatay scroll önleme ── */
@media (max-width: 768px) {
  body { overflow-x: hidden; max-width: 100vw; }
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  .filter-bar { flex-wrap: wrap; gap: 6px; }
  .filter-bar select, .filter-bar input { min-width: 0; flex: 1; }
  .listing-card-actions .btn { font-size: 13px; padding: 7px 10px; }
  .prof-contact-btn { min-height: 52px; }
  .btn { min-height: 44px; }
  input, select, textarea { min-height: 44px; }
}

/* ── İlan sekme sistemi ── */
.listings-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.listings-tab-link { padding: 10px 16px; color: var(--muted); border-bottom: 2px solid transparent; text-decoration: none; font-size: 14px; font-weight: 500; transition: color .15s, border-color .15s; white-space: nowrap; }
.listings-tab-link.active { color: var(--primary); border-bottom-color: var(--primary); }
.listings-tab-link:hover { color: var(--text); }

/* ── Profil grid kare düzeltmesi ── */
.prof-grid-item { aspect-ratio: 1 / 1; overflow: hidden; }
.prof-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-grid-item .video-thumb { width: 100%; height: 100%; object-fit: cover; }

/* ── Story ring boyut düzeltmesi ── */
@media (max-width: 360px) {
  .story-item { width: 56px; }
  .story-ring { width: 52px; height: 52px; }
  .story-ring-inner { width: 44px; height: 44px; }
  .story-username { font-size: 10px; max-width: 54px; }
}

/* ── Modal responsive ── */
@media (max-width: 480px) {
  .create-modal { border-radius: 20px 20px 0 0; padding: 20px 16px 32px; }
  .create-modal-overlay { align-items: flex-end; }
}

/* ── Placeholder dark mode ── */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted) !important; opacity: 0.7; }

/* ── Global search bar dark mode fix ── */
[data-theme="dark"] .global-search-bar-wrap { background: var(--bg); border-bottom-color: var(--border); }

/* ── Bildirim rozeti her zaman kırmızı ── */
.ig-nav-badge, .mbn-badge { background: #ef4444; color: #fff; }

/* ── Boş ekranlar ── */
.empty-state.wide { text-align: center; padding: 48px 24px; }
.empty-state.wide p { color: var(--muted); margin: 8px 0 0; font-size: 14px; }


/* ═══════════════════════════════════════════════════════════════
   V2.1.0 — Badge, Follow, Share, Roles
   ═══════════════════════════════════════════════════════════════ */

/* ── Rozet (v-badge) ── */
.v-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 2px;
}
.v-badge--role {
  background: var(--primary-light, #ede9fe);
  color: var(--primary, #6366f1);
  border: 1px solid var(--primary-mid, #c4b5fd);
}
[data-theme="dark"] .v-badge--role {
  background: #312e81;
  color: #a5b4fc;
  border-color: #4338ca;
}

/* ── Follow butonu ── */
.vf-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--primary, #6366f1);
  background: transparent;
  color: var(--primary, #6366f1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.vf-follow-btn:hover {
  background: var(--primary, #6366f1);
  color: #fff;
}
.vf-follow-btn.following {
  background: var(--primary, #6366f1);
  color: #fff;
  border-color: var(--primary);
}
.vf-follow-btn.following:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
[data-theme="dark"] .vf-follow-btn {
  border-color: #818cf8;
  color: #818cf8;
}
[data-theme="dark"] .vf-follow-btn:hover,
[data-theme="dark"] .vf-follow-btn.following {
  background: #6366f1;
  color: #fff;
}

/* ── Share butonu ── */
.share-btn {
  cursor: pointer;
}
.share-count {
  font-size: 12px;
  opacity: .8;
}

/* ── Auth notice (kayıt bilgilendirme) ── */
.auth-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--primary-light, #ede9fe);
  border: 1px solid var(--primary-mid, #c4b5fd);
  border-radius: 10px;
  font-size: 13px;
}
.notice-icon { font-size: 24px; flex-shrink: 0; }
[data-theme="dark"] .auth-notice {
  background: #1e1b4b;
  border-color: #4338ca;
}

/* ── Vitrin composer yeni stili ── */
.vitrin-composer-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.vitrin-composer-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.vitrin-composer-input {
  flex: 1;
  background: var(--bg-alt, #f3f4f6);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: background .15s;
}
.vitrin-composer-input:hover { background: var(--border); }
[data-theme="dark"] .vitrin-composer-input { background: #1e293b; color: var(--muted); }
.vitrin-composer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.vitrin-composer-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: var(--bg-alt, #f3f4f6);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .15s;
}
.vitrin-composer-btn:hover { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .vitrin-composer-btn { background: #1e293b; border-color: #334155; }
.vitrin-composer-post-btn { margin-left: auto; }

/* ── Role card stili (Register) ── */
.role-fields { margin-top: 8px; }
.role-fields .grid-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .role-fields .grid-form { grid-template-columns: 1fr; }
}

/* ── Vitrin post type chip ── */
.vitrin-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-alt, #f3f4f6);
  color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
[data-theme="dark"] .vitrin-type-chip { background: #1e293b; border-color: #334155; }

/* ── Profil follower stats ── */
.profile-stats-row {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  font-size: 14px;
}
.profile-stat strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.profile-stat small { color: var(--muted); font-size: 12px; }

/* ── Admin badge pill ── */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

/* ── Spotter progress bar ── */
.spotter-progress-wrap {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 12px 0;
}
.spotter-progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.spotter-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #3b82f6);
  border-radius: 4px;
  transition: width .4s ease;
}

/* ── Story viewer rozet ── */
.story-viewer-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.25);
}

/* ── Mobile touch targets min 44px ── */
.vfa, .vf-follow-btn, .share-btn, .vitrin-composer-btn {
  min-height: 44px;
  min-width: 44px;
}
@media (max-width: 480px) {
  .vitrin-feed-header-actions {
    gap: 4px;
  }
  .vf-follow-btn { padding: 6px 10px; font-size: 12px; }
}

/* ── Dark mode fixes for new components ── */
[data-theme="dark"] .vitrin-composer-card { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .auth-notice strong { color: #a5b4fc; }
[data-theme="dark"] .spotter-progress-wrap { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .badge-pill { background: #1e293b; border-color: #334155; }


/* ═══════════════════════════════════════════════════════════
   V2.1.4 — Mobile Launch Readiness CSS
   ═══════════════════════════════════════════════════════════ */

/* ─── Vitrin Stats Bar ─────────────────────────────────── */
.vitrin-stats-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 8px;
}
.vitrin-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
}
.vsi-icon { font-size: 15px; }
.vitrin-stat-item strong { font-weight: 700; }
.vitrin-stat-item small  { color: var(--muted); }

/* ─── Vitrin Onboarding Empty State ────────────────────── */
.vitrin-onboarding {
  text-align: center;
  padding: 60px 24px;
  max-width: 480px;
  margin: 0 auto;
}
.vitrin-onboarding h3 { font-size: 22px; margin-bottom: 12px; }
.vitrin-onboarding-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

/* ─── Guest CTA inline ──────────────────────────────────── */
.guest-cta-inline {
  background: var(--primary-light, #eef2ff);
  border: 1.5px solid var(--primary-mid, #c7d2fe);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 8px 0;
}
.guest-cta-msg { font-weight: 600; margin: 0 0 4px; }
.guest-cta-sub { font-size: 13px; margin: 0 0 12px; }
.guest-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── New Roles Grid (Home) ─────────────────────────────── */
.new-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.new-role-card { text-align: center; padding: 28px 20px; }
.new-role-card .nrc-icon { font-size: 40px; margin-bottom: 12px; }
.new-role-card h3 { font-size: 18px; margin-bottom: 8px; }
.new-role-card p  { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }

/* ─── Discover Page ─────────────────────────────────────── */
.discover-page { padding-bottom: 40px; }
.discover-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 0; }
.discover-search-form { display: flex; gap: 8px; flex-wrap: wrap; }
.discover-search-form input { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.discover-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.df-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: var(--bg);
  transition: all .15s;
}
.df-chip:hover, .df-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.discover-sort {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.ds-btn {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
}
.ds-btn.active { color: var(--primary); border-color: var(--primary); }
.discover-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: flex-start;
  margin-top: 20px;
}
@media (max-width: 900px) {
  .discover-layout { grid-template-columns: 1fr; }
  .discover-sidebar { order: -1; }
}
.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
@media (max-width: 480px) {
  .discover-grid { grid-template-columns: repeat(2, 1fr); }
}
.discover-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
  transition: box-shadow .15s;
}
.discover-card:hover { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.1)); }
.dc-cover { height: 60px; overflow: hidden; }
.dc-cover img { width: 100%; height: 100%; object-fit: cover; }
.dc-cover-gradient { background: linear-gradient(135deg, var(--primary-light, #eef2ff), var(--primary-mid, #c7d2fe)); }
.dc-avatar { margin: -24px auto 0; width: 52px; text-align: center; }
.dc-body { padding: 8px 14px 12px; text-align: center; }
.dc-name { font-size: 14px; font-weight: 700; }
.dc-role { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.dc-bio  { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.dc-stats { display: flex; gap: 10px; justify-content: center; font-size: 12px; color: var(--muted); }
.dc-actions { display: flex; gap: 6px; justify-content: center; padding: 0 14px 14px; flex-wrap: wrap; }

/* ─── Popular Spotters ──────────────────────────────────── */
.popular-spotters-list { display: flex; flex-direction: column; gap: 10px; }
.pop-spotter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.pop-spotter-item:last-child { border-bottom: none; }
.pop-spotter-item strong { font-size: 14px; display: block; }
.pop-spotter-item small  { font-size: 12px; color: var(--muted); }

/* ─── Spotter Progress Bar ──────────────────────────────── */
.spotter-progress {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
}
.spotter-progress.achieved { border-color: var(--success, #16a34a); background: rgba(22,163,74,.05); }
.sp-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.sp-icon { font-size: 20px; }
.sp-bar-wrap { background: var(--border); border-radius: 100px; height: 8px; overflow: hidden; margin-bottom: 6px; }
.sp-bar { background: var(--primary); height: 8px; border-radius: 100px; transition: width .4s; }
.sp-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

/* ─── Official Account Application ─────────────────────── */
/* Reuses grid-form, card — no new classes needed */

/* ─── Vitrin Media Frame (4:5 / 1:1) ───────────────────── */
.vitrin-media-frame {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-dark);
  position: relative;
}
.vitrin-media-frame.is-square   { aspect-ratio: 1 / 1; }
.vitrin-media-frame.is-portrait { aspect-ratio: 4 / 5; }
.vitrin-media-frame.is-landscape{ aspect-ratio: 16 / 9; }
.vitrin-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Feed card images — always use object-fit cover */
.vitrin-feed-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-dark);
}
.vitrin-feed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Mobile bottom nav for Keşfet ─────────────────────── */
/* Already handled by sidebar — no new CSS needed */

/* ─── Admin Moderasyon Merkezi ──────────────────────────── */
/* Uses existing admin card styles */

/* ─── Dark mode compatibility ───────────────────────────── */
@media (prefers-color-scheme: dark) {
  .guest-cta-inline { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.3); }
  .dc-cover-gradient { background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(129,140,248,.2)); }
}


/* ===== SOURCE: bustop-theme.css ===== */
/* ═══════════════════════════════════════════════════════════════════════════
   BUSTOP DESIGN TOKENS — premium mavi+beyaz sistem
   Bu dosya style.css'ten SONRA yüklenir; :root değişkenlerini premium seviyeye
   çıkarır. Bileşen yapısını bozmaz — tüm bileşenler bu token'ları okur.
   Mobil (src/theme/index.ts) ile birebir aynı değerleri paylaşır.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marka mavisi (güven + canlı etkileşim) ── */
  --primary:        #1D4ED8;   /* trust blue — ana aksiyon */
  --primary-dark:   #1E40AF;   /* koyu — basılı/aktif */
  --primary-hover:  #2563EB;   /* canlı — hover */
  --primary-light:  #EFF4FF;   /* açık yüzey — chip/badge zemini */
  --primary-mid:    #BFD3FF;   /* orta — çizgi/halkalar */
  --primary-tint:   #DBE6FF;   /* daha yumuşak vurgu */

  /* vNext sayfalarının kullandığı --brand aile (aynı maviye hizalı) */
  --brand:          #1D4ED8;
  --brand-hover:    #2563EB;
  --brand-soft:     #EFF4FF;
  --brand-tint:     #DBE6FF;

  --accent:         #0EA5E9;   /* sky — ikincil canlı vurgu (spotter/foto) */

  /* ── Durum renkleri ── */
  --success:        #15803D;  --success-light: #DCFCE7;
  --warning:        #B45309;  --warning-light: #FEF3C7;
  --danger:         #DC2626;  --danger-light:  #FEE2E2;
  --info:           #0369A1;  --info-light:    #E0F2FE;

  /* ── Nötrler / yüzeyler (kırık beyaz, mavi-nötr tonlu) ── */
  --bg:             #F7F9FC;   /* kırık beyaz sayfa zemini */
  --bg-dark:        #EEF2F8;   /* hafif gri-mavi ikinci zemin */
  --surface:        #FFFFFF;
  --card:           #FFFFFF;
  --border:         #E4E9F2;   /* yumuşak mavi-gri kenar */
  --border-dark:    #CFD8E8;
  --border-strong:  #B8C4DA;

  /* ── Metin ── */
  --text:           #0F172A;   /* ink */
  --text-2:         #475569;   /* ikincil */
  --muted:          #64748B;   /* muted */
  --muted-2:        #94A3B8;   /* muted-2 */
  --muted-light:    #94A3B8;

  /* ── Yarıçap ── */
  --r-sm:           8px;
  --r:              12px;
  --r-lg:           16px;
  --r-xl:           22px;
  --r-full:         999px;

  /* ── Gölge (yumuşak, premium — mavi-nötr) ── */
  --shadow-sm:      0 1px 2px rgba(15,23,42,.05);
  --shadow:         0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:      0 6px 18px rgba(15,23,42,.08);
  --shadow-lg:      0 14px 40px rgba(15,23,42,.12);
  --shadow-brand:   0 6px 20px rgba(29,78,216,.22);

  /* ── Hareket ── */
  --ease:           cubic-bezier(.4,0,.2,1);
  --ease-out:       cubic-bezier(.16,1,.3,1);
  --dur-fast:       .12s;
  --dur:            .2s;
  --dur-slow:       .32s;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ═══ KOYU TEMA — katmanlı premium (düz siyah değil) ═══════════════════════ */
[data-theme="dark"] {
  --primary:        #3B82F6;   /* koyuda daha parlak, ama patlamayan */
  --primary-dark:   #2563EB;
  --primary-hover:  #60A5FA;
  --primary-light:  #17233D;   /* koyu yüzey mavisi (chip zemini) */
  --primary-mid:    #1E3A6E;
  --primary-tint:   #1B2C4D;

  --brand:          #3B82F6;
  --brand-hover:    #60A5FA;
  --brand-soft:     #17233D;
  --brand-tint:     #1B2C4D;

  --accent:         #38BDF8;

  --success-light:  #0E2A1A;
  --warning-light:  #2A1E08;
  --danger-light:   #2A1414;
  --info-light:     #0C2233;

  /* katmanlı zeminler: bg < surface < card ayrışır */
  --bg:             #0B1020;   /* en arka */
  --bg-dark:        #070B16;
  --surface:        #141B2E;   /* topbar/sidebar/modal */
  --card:           #1B2438;   /* kart — bg'den belirgin ayrı */
  --border:         #273349;   /* görünür ama sert değil */
  --border-dark:    #334155;
  --border-strong:  #3E4C63;

  --text:           #F1F5F9;
  --text-2:         #CBD5E1;
  --muted:          #94A3B8;
  --muted-2:        #64748B;
  --muted-light:    #64748B;

  --shadow-sm:      0 1px 2px rgba(0,0,0,.4);
  --shadow:         0 2px 6px rgba(0,0,0,.45);
  --shadow-md:      0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:      0 16px 44px rgba(0,0,0,.6);
  --shadow-brand:   0 6px 20px rgba(59,130,246,.3);
}

/* ═══ ORTAK İNCE RÖTUŞLAR (bileşen yapısını bozmadan premium his) ═══════════ */

/* Yumuşak, tutarlı geçişler */
.btn, .card, .listing-card, .mk-card, .job-card, .am-card,
input, select, textarea, .chip, .mk-chip, .badge {
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              color var(--dur) var(--ease);
}

/* Butonlar — premium his + net state'ler */
.btn {
  background: var(--primary);
  border-radius: var(--r);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--primary-hover); box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.btn:active { background: var(--primary-dark); transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 2px; }
.btn.ghost { background: transparent; color: var(--primary); border: 1px solid var(--border-strong); box-shadow: none; }
.btn.ghost:hover { background: var(--primary-light); border-color: var(--primary); transform: translateY(-1px); }

/* Kartlar — yumuşak yükseklik, hover'da hafif kalkış */
.card { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }

/* Girdi alanları — net focus halkası */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,.14);
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,.22);
}

/* Koyu temada medya çevresi beyaz artefact bırakmasın */
[data-theme="dark"] img { background: transparent; }
[data-theme="dark"] .mk-card-img, [data-theme="dark"] .am-thumb,
[data-theme="dark"] .vitrin-feed-img-wrap { background: #0F1626; }

/* Erişilebilir görünür odak (klavye) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--primary-mid);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skeleton parıltısı (yüklenme) */
@keyframes bt-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.bt-skeleton {
  background: linear-gradient(90deg, var(--bg-dark) 25%, var(--border) 37%, var(--bg-dark) 63%);
  background-size: 800px 100%;
  animation: bt-shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}

/* Reduced motion — hareketi kapat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobil safe-area (alt navigasyon çentikli ekranlar) */
@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM BİLEŞEN KATMANI — mevcut class'ları elden geçirir (yapı bozulmaz)
   Vitrin/feed, story, composer, sidebar, kartlar, rozetler
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR — premium his, aktif durum vurgusu ── */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); }
.sidebar-link {
  border-radius: 10px; margin: 2px 8px; padding: 10px 12px;
  font-weight: 600; color: var(--text-2);
  position: relative;
}
.sidebar-link:hover { background: var(--primary-light); color: var(--primary); transform: translateX(2px); }
.sidebar-link.active {
  background: var(--primary-light); color: var(--primary); font-weight: 700;
}
.sidebar-link.active::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--primary);
}
.sidebar-link svg, .sidebar-link .icon { transition: transform var(--dur) var(--ease); }
.sidebar-link:hover svg { transform: scale(1.08); }

/* ── STORY halkaları — premium gradient ring ── */
.story-ring {
  padding: 3px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 50%;
}
.story-ring.viewed { background: var(--border-strong); }
.story-ring .avatar { border: 2px solid var(--surface) !important; }
.story-item span, .story-add-item span {
  font-size: 11px; color: var(--text-2); font-weight: 600; margin-top: 5px;
}
.story-add-plus {
  background: var(--primary); border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}
.story-item { transition: transform var(--dur-fast) var(--ease-out); }
.story-item:hover { transform: translateY(-2px) scale(1.04); }

/* ── COMPOSER — daha davetkar, premium ── */
.vitrin-composer-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.vitrin-composer-input {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-full); color: var(--muted);
}
.vitrin-composer-input:hover { border-color: var(--primary-mid); background: var(--primary-light); }
.vitrin-composer-btn {
  color: var(--text-2); font-weight: 600; border-radius: 10px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vitrin-composer-btn:hover { background: var(--primary-light); color: var(--primary); }

/* ── FEED KART — premium yükseklik, ince kenar, akıcı hover ── */
.feed-card, .vitrin-feed-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.feed-card:hover, .vitrin-feed-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-dark);
}
.feed-card-header { padding: 16px 18px; }
.feed-user-row strong { font-weight: 700; }
.feed-user-row .avatar { box-shadow: 0 0 0 2px var(--border); }
.feed-type-badge {
  background: var(--primary-light); border: none; color: var(--primary);
  font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 10px;
  padding: 4px 10px; border-radius: var(--r-full);
}
.feed-card-title { font-weight: 700; }
.feed-card-title a:hover { color: var(--primary); }
.feed-card-img-wrap, .feed-card-img { border-radius: 0; }
.feed-card-actions { border-top: 1px solid var(--border); padding: 12px 18px; }
.feed-action-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  border-radius: 10px; font-weight: 600; padding: 7px 12px;
}
.feed-action-btn:hover { background: var(--primary-light); border-color: transparent; color: var(--primary); }
.feed-action-btn.like-btn.liked {
  color: #e11d48; background: rgba(225,29,72,.08); border-color: transparent;
}
.feed-action-btn.like-btn.liked .like-icon { animation: likePopIn .3s cubic-bezier(.36,.07,.19,.97); }

/* Resmi hesap gönderisi — premium mavi çerçeve vurgusu */
.feed-card.official-post {
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 1px var(--primary-mid), var(--shadow-sm);
}

/* ── GENEL KARTLAR (listing/request/mk/job) — tutarlı premium ── */
.listing-card, .request-card, .mk-card, .job-card {
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); background: var(--card);
}
.listing-card:hover, .request-card:hover, .mk-card:hover, .job-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-dark);
}

/* ── ROZETLER — premium, markaya özgü ── */
.badge {
  border-radius: var(--r-full); font-weight: 700; font-size: 11px;
  letter-spacing: .02em; padding: 4px 11px;
}
.badge.verified, .badge.official {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff; box-shadow: var(--shadow-sm);
}

/* ── TOPBAR / NAV — premium his ── */
.topnav, .topbar { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
.topnav-link { border-radius: 10px; font-weight: 600; }
.topnav-link:hover, .topnav-link.active { background: var(--primary-light); color: var(--primary); }

/* ── EMPTY STATE — davetkar ── */
.feed-empty, .mk-empty, .am-empty {
  background: var(--card); border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg); color: var(--muted);
}

/* ── SAYFALAMA / LOAD MORE ── */
.feed-load-more .btn { border-radius: var(--r-full); }

/* ── 404 / hata kartı — premium ── */
.error-card, .not-found-card {
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}

/* ── Beğeni animasyonu ── */
@keyframes likePopIn { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* ── Story pulse (görülmemiş) — daha yumuşak ── */
@keyframes storyPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(29,78,216,.3); } 50% { box-shadow: 0 0 0 5px rgba(29,78,216,0); } }
.story-ring:not(.viewed) { animation: storyPulse 2.4s infinite; }

/* Koyu temada feed kart görsel zemini */
[data-theme="dark"] .feed-card-img-wrap { background: #0F1626; }
[data-theme="dark"] .feed-type-badge { background: var(--primary-light); color: var(--primary-hover); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUSTOP İMZA KATMANI — markaya özgü, "hazır şablon" hissini kıran detaylar
   Otobüs/rota dünyasından türetilmiş görsel imza öğeleri
   ═══════════════════════════════════════════════════════════════════════════ */

/* Marka logosu — rota durağı motifi (sidebar başlık) */
.brand-mark, .sidebar-brand-icon {
  position: relative;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
  box-shadow: var(--shadow-brand);
}

/* İmza: kartların üstünde ince "rota çizgisi" — durak-durak ilerleyen nokta deseni.
   Sadece official/featured kartlarda, sektörel kimlik hissi verir. */
.feed-card.official-post::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg,
    var(--primary) 0, var(--primary) 14px,
    transparent 14px, transparent 22px);
  opacity: .9;
}
.feed-card.official-post { position: relative; }

/* Bölüm başlıkları için eyebrow — sektörel, küçük, güçlü */
.section-eyebrow, .mk-h1 + .muted, .vf-sub {
  letter-spacing: .01em;
}
.mk-h1 {
  position: relative; padding-left: 14px;
}
.mk-h1::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

/* Rozet — rol bazlı, markaya özgü renk kodları (spotter/foto/kurumsal ayrışır) */
.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--r-full);
}
.role-badge.spotter { background: #FCE7F3; color: #BE185D; }
.role-badge.corporate { background: var(--primary-light); color: var(--primary); }
.role-badge.driver { background: #DCFCE7; color: #15803D; }
[data-theme="dark"] .role-badge.spotter { background: #3B1329; color: #F472B6; }
[data-theme="dark"] .role-badge.driver { background: #0E2A1A; color: #4ADE80; }

/* İmza buton dokusu — hafif iç parlama (premium his, oyuncak değil) */
.btn:not(.ghost) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.04));
}

/* Kart görsel alanı — köşe yumuşatma + üstte hafif degrade maske (metin okunurluğu) */
.mk-card-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,42,.06) 0%, transparent 30%);
}

/* Fiyat vurgusu — markaya özgü, güçlü ama zarif */
.mk-price, .mk-detail-price {
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Boş durum ikonları — yumuşak daire zemin */
.mk-empty-emoji, .feed-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: var(--r-full);
  background: var(--primary-light); margin: 0 auto 14px;
}

/* Sekme (tabs) altı gösterge — akıcı */
.am-tab.active, .tab.active {
  position: relative;
}

/* Yükleme skeleton kartı hazır sınıfı */
.skeleton-card {
  height: 260px; border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--bg-dark) 25%, var(--border) 37%, var(--bg-dark) 63%);
  background-size: 800px 100%; animation: bt-shimmer 1.4s infinite linear;
}


/* ===== SOURCE: bustop-studio.css ===== */
/* .mk-search .btn genislik kurali KALDIRILDI — Transit Grid katmani sahibi.
   Arama satiri mobilde artik YIGILMIYOR; `width:100%` butonu kabin tamamina
   yayip girdi alanini 28px'e dusuruyor ve kutuyu tasiriyordu (olculdu:
   buton 331px / kap 349px). Kutu modeli `bustop-transit-grid.web.css`'te. */
/* NOT (Transit Grid Faz 2): bu dosyadaki `!important` bayraklari kaldirildi.
   Tek amaclari diger eski stil dosyalarina karsi override savasi kazanmakti.
   Bilesenlerin hedef degerini artik bustop-transit-grid.web.css tanimliyor
   ve o EN SON yukleniyor; bayraklar yalnizca yeni dili blokluyordu.
   `prefers-reduced-motion` bloklarindaki bayraklar KORUNDU. */
/* BusTop Studio UI — Marketplace, jobs and native media creation */
:root {
  --bt-blue-950:#071b33;
  --bt-blue-900:#0b2b52;
  --bt-blue-800:#0c438a;
  --bt-blue-700:#0b5bd3;
  --bt-blue-600:#0b6ff5;
  --bt-blue-500:#2c83ff;
  --bt-blue-100:#dbeafe;
  --bt-blue-50:#eff6ff;
  --bt-ink:#0d1b2a;
  --bt-muted:#607089;
  --bt-line:#dce5f0;
  --bt-canvas:#f4f7fb;
  --bt-surface:#ffffff;
  --bt-success:#067647;
  --bt-danger:#c81e1e;
  --bt-warning:#9a5b00;
  --bt-shadow-sm:0 1px 2px rgba(7,27,51,.04),0 8px 24px rgba(7,27,51,.06);
  --bt-shadow-md:0 18px 50px rgba(7,27,51,.12);
  --bt-radius-sm:10px;
  --bt-radius-md:16px;
  --bt-radius-lg:24px;
  --bt-ease:cubic-bezier(.2,.8,.2,1);
}

[data-theme="dark"] {
  --bt-ink:#f7f9fc;
  --bt-muted:#9fb0c7;
  --bt-line:#263a52;
  --bt-canvas:#08111f;
  --bt-surface:#0e1c2d;
  --bt-blue-50:#102a47;
  --bt-blue-100:#183c65;
  --bt-shadow-sm:0 12px 30px rgba(0,0,0,.24);
  --bt-shadow-md:0 24px 60px rgba(0,0,0,.36);
}

/* Marketplace pages */
.mk-wrap{max-width:1280px;padding-top:28px}
.mk-head{position:relative;overflow:hidden;align-items:center;padding:26px 28px;margin-bottom:18px;border:1px solid var(--bt-line);border-radius:var(--bt-radius-lg);background:linear-gradient(135deg,var(--bt-surface) 0%,var(--bt-blue-50) 100%);box-shadow:var(--bt-shadow-sm)}
.mk-head:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-90px;top:-145px;background:radial-gradient(circle,rgba(11,111,245,.17),rgba(11,111,245,0) 68%);pointer-events:none}
.mk-h1{font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;color:var(--bt-ink);font-weight:850}
.mk-head .muted{font-size:15px;max-width:680px;color:var(--bt-muted)}
.mk-head .btn{position:relative;z-index:1;min-height:48px;border-radius:14px;padding:0 20px;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--bt-blue-700),var(--bt-blue-500));box-shadow:0 12px 26px rgba(11,91,211,.24)}
.mk-search{display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(150px,.7fr) auto;gap:10px;padding:12px;border:1px solid var(--bt-line);border-radius:18px;background:var(--bt-surface);box-shadow:var(--bt-shadow-sm)}
.mk-search input{height:48px;border-radius:12px;border:1px solid transparent;background:var(--bt-canvas);color:var(--bt-ink);padding:0 15px}
.mk-search input:focus{background:var(--bt-surface);border-color:var(--bt-blue-500);box-shadow:0 0 0 4px rgba(11,111,245,.12)}
.mk-search .btn{height:48px;border-radius:12px;padding:0 22px}
.mk-chips{gap:9px;margin:2px 0 20px;scrollbar-width:none}
.mk-chips::-webkit-scrollbar{display:none}
.mk-chip{padding:9px 14px;border-radius:11px;background:var(--bt-surface);border-color:var(--bt-line);color:var(--bt-muted);font-size:12px;letter-spacing:.01em;box-shadow:0 1px 0 rgba(7,27,51,.03)}
.mk-chip:hover{transform:translateY(-1px);border-color:var(--bt-blue-500);color:var(--bt-blue-700)}
.mk-chip.active{background:var(--bt-blue-950);border-color:var(--bt-blue-950);color:#fff}
.mk-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mk-card{border-color:var(--bt-line);border-radius:18px;background:var(--bt-surface);box-shadow:0 1px 1px rgba(7,27,51,.025);transition:transform .24s var(--bt-ease),box-shadow .24s var(--bt-ease),border-color .24s}
.mk-card:hover{transform:translateY(-5px);border-color:#bdd2ec;box-shadow:var(--bt-shadow-md)}
.mk-card-img{aspect-ratio:4/3;background:linear-gradient(145deg,#eaf2fb,#dbe7f5)}
.mk-card-img img{transition:transform .45s var(--bt-ease)}
.mk-card:hover .mk-card-img img{transform:scale(1.035)}
.mk-cat,.mk-corp{top:11px;border-radius:8px;padding:5px 8px;backdrop-filter:blur(10px)}
.mk-cat{left:11px;background:rgba(7,27,51,.8)}
.mk-corp{right:11px;background:rgba(11,91,211,.92)}
.mk-card-body{padding:15px 15px 16px}
.mk-card-title{font-size:15px;line-height:1.4;min-height:42px;color:var(--bt-ink)}
.mk-price{font-size:21px;letter-spacing:-.02em;color:var(--bt-blue-700);margin-top:5px}
.mk-meta,.mk-city{font-size:12.5px;color:var(--bt-muted)}
.mk-city{display:flex;align-items:center;gap:4px;margin-top:9px;padding-top:9px;border-top:1px solid var(--bt-line)}
.mk-empty{border:1px dashed var(--bt-line);border-radius:20px;background:var(--bt-surface)}
.mk-page{border-color:var(--bt-line);background:var(--bt-surface);border-radius:10px}
.mk-page.active{background:var(--bt-blue-700);border-color:var(--bt-blue-700)}

/* Listing detail */
.mk-detail{max-width:1180px}
.mk-back{display:inline-flex;align-items:center;gap:7px;color:var(--bt-blue-700);margin-bottom:18px}
.mk-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:220px 220px;gap:8px;overflow:visible;border-radius:22px}
.mk-gallery img{height:100%;width:100%;border-radius:14px;object-fit:cover;cursor:zoom-in;background:var(--bt-canvas)}
.mk-gallery img:first-child{grid-row:1/3;border-radius:20px}
.mk-gallery img:nth-child(n+6){display:none}
.mk-gallery-empty{height:440px;border-radius:22px;background:linear-gradient(145deg,#eaf2fb,#dbe7f5)}
.mk-detail-body{background:var(--bt-surface);border:1px solid var(--bt-line);border-radius:22px;padding:25px;box-shadow:var(--bt-shadow-sm)}
.mk-detail-title{font-size:clamp(25px,3vw,36px);letter-spacing:-.035em;color:var(--bt-ink)}
.mk-detail-price{font-size:clamp(28px,3vw,40px);color:var(--bt-blue-700)}
.mk-tag{border-radius:999px;padding:7px 11px;background:var(--bt-blue-50);color:var(--bt-blue-800);border:1px solid var(--bt-blue-100)}
.mk-seller{border-color:var(--bt-line);border-radius:18px;padding:15px;background:linear-gradient(135deg,var(--bt-surface),var(--bt-blue-50))}
.mk-seller-av{background:linear-gradient(135deg,var(--bt-blue-700),var(--bt-blue-500))}
.mk-specs{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mk-spec{border-color:var(--bt-line);border-radius:14px;background:var(--bt-canvas);padding:13px}
.mk-spec-k{font-size:11px;color:var(--bt-muted);text-transform:uppercase;letter-spacing:.04em}
.mk-spec-v{font-size:14px;color:var(--bt-ink)}
.mk-desc{font-size:15px;line-height:1.75;color:var(--bt-muted)}

/* LinkedIn-inspired jobs */
.job-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.job-card{border-color:var(--bt-line);border-radius:18px;padding:19px;background:var(--bt-surface);box-shadow:0 1px 1px rgba(7,27,51,.03);position:relative;overflow:hidden}
.job-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--bt-blue-500),var(--bt-blue-700));opacity:.8}
.job-card:hover{transform:translateY(-3px);border-color:#bfd4ee;box-shadow:var(--bt-shadow-sm)}
.job-pos{background:var(--bt-blue-50);color:var(--bt-blue-800);border:1px solid var(--bt-blue-100);border-radius:999px;padding:6px 10px}
.job-title{font-size:19px;letter-spacing:-.02em;color:var(--bt-ink)}
.job-company{font-size:14px;color:var(--bt-blue-700);font-weight:650}
.job-meta{padding-top:13px;border-top:1px solid var(--bt-line)}
.job-salary{color:var(--bt-success)}
.job-tag{border-radius:999px;background:var(--bt-canvas);border:1px solid var(--bt-line);padding:5px 9px}

/* Studio form shell */
.bt-studio{max-width:1180px;margin:0 auto;padding:28px 20px 70px}
.bt-studio__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--bt-blue-700);font-weight:700;text-decoration:none}
.bt-studio__hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;padding:26px 28px;border:1px solid var(--bt-line);border-radius:24px;background:linear-gradient(135deg,var(--bt-surface),var(--bt-blue-50));box-shadow:var(--bt-shadow-sm);position:relative;overflow:hidden}
.bt-studio__hero:after{content:"";width:220px;height:220px;position:absolute;right:-100px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(11,111,245,.18),rgba(11,111,245,0) 70%)}
.bt-studio__eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--bt-blue-700);font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.bt-studio__title{margin:7px 0 7px;font-size:clamp(29px,4vw,42px);letter-spacing:-.04em;color:var(--bt-ink);font-weight:850}
.bt-studio__lead{margin:0;color:var(--bt-muted);font-size:15px;line-height:1.65;max-width:720px}
.bt-studio__trust{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid rgba(191,211,234,.85);color:var(--bt-blue-900);font-size:12px;font-weight:750;position:relative;z-index:1}
[data-theme="dark"] .bt-studio__trust{background:rgba(14,28,45,.72)}
.bt-stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.bt-step{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--bt-line);background:var(--bt-surface);border-radius:14px;color:var(--bt-muted);font-size:12px;font-weight:700}
.bt-step__num{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--bt-canvas);color:var(--bt-blue-700);font-size:12px}
.bt-step.is-current{border-color:#a9c9f4;background:var(--bt-blue-50);color:var(--bt-blue-900)}
.bt-form{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.bt-form__main{display:grid;gap:16px}
.bt-panel{border:1px solid var(--bt-line);border-radius:20px;background:var(--bt-surface);box-shadow:var(--bt-shadow-sm);padding:22px}
.bt-panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.bt-panel__head h2{font-size:19px;letter-spacing:-.025em;margin:0;color:var(--bt-ink)}
.bt-panel__head p{font-size:13px;color:var(--bt-muted);margin:4px 0 0;line-height:1.5}
.bt-panel__badge{white-space:nowrap;border-radius:999px;padding:5px 9px;background:var(--bt-blue-50);color:var(--bt-blue-800);font-size:11px;font-weight:800;border:1px solid var(--bt-blue-100)}
.bt-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bt-field{display:grid;gap:7px;min-width:0}
.bt-field--full{grid-column:1/-1}
.bt-field label,.bt-field__label{font-size:12.5px;font-weight:780;color:var(--bt-ink)}
.bt-field .req{color:var(--bt-danger)}
.bt-field input,.bt-field select,.bt-field textarea{width:100%;min-width:0;border:1px solid var(--bt-line);border-radius:12px;background:var(--bt-canvas);color:var(--bt-ink);padding:12px 13px;font-size:14px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s;box-sizing:border-box}
.bt-field input,.bt-field select{height:47px}
.bt-field textarea{min-height:128px;resize:vertical;line-height:1.55}
.bt-field input:focus,.bt-field select:focus,.bt-field textarea:focus{border-color:var(--bt-blue-500);background:var(--bt-surface);box-shadow:0 0 0 4px rgba(11,111,245,.11)}
.bt-field__hint{font-size:11.5px;color:var(--bt-muted);line-height:1.45}
.bt-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bt-check{position:relative;display:flex;align-items:flex-start;gap:10px;border:1px solid var(--bt-line);border-radius:13px;padding:12px;background:var(--bt-canvas);cursor:pointer;transition:.18s}
.bt-check:hover{border-color:#b9d1ef;background:var(--bt-blue-50)}
.bt-check input{width:18px;height:18px;margin:0;accent-color:var(--bt-blue-700);flex:0 0 auto}
.bt-check strong{display:block;color:var(--bt-ink);font-size:12.5px}
.bt-check span{display:block;color:var(--bt-muted);font-size:11px;margin-top:2px}
.bt-form__aside{position:sticky;top:92px;display:grid;gap:14px}
.bt-summary{border:1px solid var(--bt-line);border-radius:20px;background:var(--bt-surface);box-shadow:var(--bt-shadow-sm);padding:18px}
.bt-summary h3{margin:0 0 12px;font-size:16px;color:var(--bt-ink)}
.bt-summary__row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--bt-line);font-size:12px;color:var(--bt-muted)}
.bt-summary__row:last-child{border-bottom:0}
.bt-summary__row strong{color:var(--bt-ink);text-align:right}
.bt-publish{width:100%;height:54px;border:0;border-radius:15px;color:#fff;background:linear-gradient(135deg,var(--bt-blue-800),var(--bt-blue-500));font-size:15px;font-weight:850;cursor:pointer;box-shadow:0 14px 30px rgba(11,91,211,.25);transition:transform .18s var(--bt-ease),box-shadow .18s}
.bt-publish:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(11,91,211,.3)}
.bt-publish:disabled{opacity:.55;cursor:not-allowed;transform:none}
.bt-safe-note{display:flex;gap:10px;border:1px solid var(--bt-line);border-radius:16px;padding:13px;background:var(--bt-blue-50);font-size:11.5px;line-height:1.55;color:var(--bt-blue-900)}

/* Native media studio */
.bt-media-studio{border:1px solid var(--bt-line);border-radius:18px;padding:14px;background:var(--bt-canvas)}
.bt-media-studio__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bt-dropzone{min-height:174px;border:1.5px dashed #a9c3e4;border-radius:15px;background:linear-gradient(145deg,var(--bt-surface),var(--bt-blue-50));display:grid;place-items:center;text-align:center;padding:24px;cursor:pointer;transition:.22s var(--bt-ease);position:relative;overflow:hidden}
.bt-dropzone:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-90px;bottom:-110px;background:radial-gradient(circle,rgba(11,111,245,.15),rgba(11,111,245,0) 70%)}
.bt-dropzone:hover,.bt-dropzone.is-dragging{border-color:var(--bt-blue-500);transform:translateY(-1px);box-shadow:0 12px 30px rgba(7,27,51,.08)}
.bt-dropzone__icon{width:54px;height:54px;margin:0 auto 12px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,var(--bt-blue-700),var(--bt-blue-500));color:#fff;box-shadow:0 12px 24px rgba(11,91,211,.24)}
.bt-dropzone__icon svg{width:26px;height:26px}
.bt-dropzone strong{display:block;font-size:15px;color:var(--bt-ink)}
.bt-dropzone span{display:block;font-size:12px;color:var(--bt-muted);margin-top:5px;line-height:1.45}
.bt-media-toolbar{display:none;align-items:center;justify-content:space-between;gap:12px;margin:12px 2px 8px}
.bt-media-studio.has-files .bt-media-toolbar{display:flex}
.bt-media-count{font-size:12px;font-weight:780;color:var(--bt-ink)}
.bt-media-help{font-size:11px;color:var(--bt-muted)}
.bt-media-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.bt-media-tile{position:relative;aspect-ratio:4/3;border-radius:13px;overflow:hidden;background:#dce7f3;border:1px solid var(--bt-line);cursor:grab;animation:btTileIn .22s var(--bt-ease)}
.bt-media-tile:active{cursor:grabbing}
.bt-media-tile img,.bt-media-tile video{width:100%;height:100%;object-fit:cover;display:block}
.bt-media-tile.is-cover{outline:3px solid var(--bt-blue-500);outline-offset:1px}
.bt-media-tile.is-dragging{opacity:.38;transform:scale(.96)}
.bt-media-tile__top{position:absolute;inset:7px 7px auto;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.bt-media-order,.bt-media-cover{display:inline-flex;align-items:center;height:24px;border-radius:8px;padding:0 7px;background:rgba(7,27,51,.78);color:#fff;font-size:10px;font-weight:850;backdrop-filter:blur(8px)}
.bt-media-cover{background:rgba(11,91,211,.92)}
.bt-media-actions{position:absolute;inset:auto 7px 7px;display:flex;justify-content:flex-end;gap:5px}
.bt-media-action{width:30px;height:30px;border-radius:9px;border:0;background:rgba(7,27,51,.82);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px)}
.bt-media-action:hover{background:var(--bt-blue-700)}
.bt-media-action.is-danger:hover{background:var(--bt-danger)}
.bt-media-add{aspect-ratio:4/3;border:1.5px dashed #a9c3e4;border-radius:13px;background:var(--bt-surface);display:grid;place-items:center;color:var(--bt-blue-700);cursor:pointer;font-size:12px;font-weight:800;text-align:center;padding:8px}
.bt-media-add:hover{background:var(--bt-blue-50);border-color:var(--bt-blue-500)}
.bt-media-errors{display:none;margin-top:10px;border:1px solid #fecaca;background:#fff1f2;color:#991b1b;border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.55}
.bt-media-errors.is-visible{display:block}
.bt-upload-state{display:none;align-items:center;gap:12px;margin-top:12px;border:1px solid var(--bt-line);border-radius:13px;padding:11px;background:var(--bt-surface)}
.bt-upload-state.is-visible{display:flex}
.bt-upload-spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--bt-blue-100);border-top-color:var(--bt-blue-700);animation:btSpin .8s linear infinite}
.bt-upload-state strong{font-size:12px;color:var(--bt-ink)}
.bt-upload-state span{font-size:11px;color:var(--bt-muted);display:block;margin-top:2px}

/* Story studio */
.bt-story-layout{display:grid;grid-template-columns:minmax(300px,430px) minmax(0,1fr);gap:20px;align-items:start}
.bt-story-phone{position:sticky;top:88px;aspect-ratio:9/16;max-height:72vh;border-radius:34px;padding:10px;background:#06111f;box-shadow:0 28px 70px rgba(0,0,0,.26);overflow:hidden}
.bt-story-canvas{width:100%;height:100%;border-radius:27px;overflow:hidden;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#1d5fa9,#071b33 68%)}
.bt-story-canvas img,.bt-story-canvas video{width:100%;height:100%;object-fit:cover;display:none}
.bt-story-placeholder{padding:28px;text-align:center;color:#d8e8ff}
.bt-story-placeholder svg{width:55px;height:55px;margin-bottom:12px;opacity:.9}
.bt-story-overlay{position:absolute;left:20px;right:20px;bottom:52px;color:#fff;font-size:22px;font-weight:800;line-height:1.2;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.65);word-break:break-word}
.bt-story-location{position:absolute;left:50%;top:42px;transform:translateX(-50%);max-width:80%;padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.52);backdrop-filter:blur(8px);font-size:11px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none}
.bt-story-location.is-visible{display:block}
.bt-story-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bt-story-tool{border:1px solid var(--bt-line);background:var(--bt-canvas);border-radius:12px;padding:10px;color:var(--bt-ink);font-size:11px;font-weight:750;cursor:pointer}
.bt-story-tool:hover,.bt-story-tool.is-active{border-color:var(--bt-blue-500);background:var(--bt-blue-50);color:var(--bt-blue-800)}

/* Clip studio */
.bt-clip-layout{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);gap:20px;align-items:start}
.bt-video-stage{aspect-ratio:9/16;max-height:72vh;border-radius:25px;background:#03070d;display:grid;place-items:center;overflow:hidden;position:sticky;top:88px;box-shadow:0 26px 65px rgba(0,0,0,.25)}
.bt-video-stage video{width:100%;height:100%;object-fit:contain;display:none;background:#000}
.bt-video-stage__placeholder{text-align:center;color:#dceaff;padding:28px}
.bt-video-stage__placeholder svg{width:60px;height:60px;margin-bottom:12px}
.bt-video-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.bt-video-meta div{padding:10px;border:1px solid var(--bt-line);border-radius:12px;background:var(--bt-canvas)}
.bt-video-meta span{display:block;font-size:10px;color:var(--bt-muted);text-transform:uppercase;letter-spacing:.04em}
.bt-video-meta strong{display:block;font-size:12px;color:var(--bt-ink);margin-top:3px}
.bt-cover-preview{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;border:1px solid var(--bt-line);border-radius:14px;padding:10px;background:var(--bt-canvas)}
.bt-cover-preview canvas{width:92px;aspect-ratio:9/16;object-fit:cover;background:#06111f;border-radius:10px}
.bt-cover-preview button{border:0;background:var(--bt-blue-700);color:#fff;border-radius:10px;padding:9px 12px;font-weight:750;cursor:pointer}

/* Job wizard refinements */
.bt-job-company{display:grid;grid-template-columns:56px 1fr;gap:13px;align-items:center;padding:13px;border:1px solid var(--bt-line);border-radius:15px;background:var(--bt-canvas)}
.bt-job-company__logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--bt-blue-800),var(--bt-blue-500));display:grid;place-items:center;color:#fff;font-weight:900;font-size:19px}
.bt-job-company strong{color:var(--bt-ink);font-size:14px}.bt-job-company span{display:block;color:var(--bt-muted);font-size:11px;margin-top:3px}

@keyframes btSpin{to{transform:rotate(360deg)}}
@keyframes btTileIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

@media(max-width:1020px){
  .mk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bt-form{grid-template-columns:1fr}.bt-form__aside{position:static;grid-template-columns:1fr 1fr}.bt-summary{grid-column:1/-1}
  .bt-media-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .mk-wrap{padding:16px 12px 86px}.mk-head{padding:21px;border-radius:19px}.mk-search{grid-template-columns:1fr}
  .mk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.job-grid{grid-template-columns:1fr}
  .mk-card{border-radius:14px}.mk-card-body{padding:11px}.mk-card-title{font-size:13px;min-height:37px}.mk-price{font-size:17px}
  .mk-gallery{grid-template-columns:1fr 1fr;grid-template-rows:250px 120px}.mk-gallery img:first-child{grid-column:1/3;grid-row:auto}.mk-gallery img:nth-child(n+4){display:none}
  .mk-detail-body{padding:18px}.mk-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-studio{padding:16px 12px 96px}.bt-studio__hero{grid-template-columns:1fr;padding:21px}.bt-studio__trust{width:max-content;max-width:100%}.bt-stepper{grid-template-columns:repeat(2,1fr)}
  .bt-fields{grid-template-columns:1fr}.bt-field--full{grid-column:auto}.bt-check-grid{grid-template-columns:1fr}.bt-form__aside{grid-template-columns:1fr}
  .bt-panel{padding:17px;border-radius:17px}.bt-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bt-story-layout,.bt-clip-layout{grid-template-columns:1fr}.bt-story-phone,.bt-video-stage{position:relative;top:auto;margin:0 auto;width:min(100%,390px);max-height:none}
  .bt-story-tools{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
  .mk-grid{grid-template-columns:1fr}.mk-card{display:grid;grid-template-columns:132px 1fr}.mk-card-img{height:100%;aspect-ratio:auto}.mk-card-title{min-height:auto}
  .bt-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bt-step{padding:9px}.bt-step span:last-child{font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  .mk-card,.mk-card-img img,.bt-dropzone,.bt-publish,.bt-media-tile{transition:none!important;animation:none!important}
}


/* ===== SOURCE: bustop-final.css ===== */
/* BusTop 2.1.7 — production polish and unified creation experience */
:root{
  --bt-brand:#0b63ce;
  --bt-brand-strong:#084d9e;
  --bt-brand-soft:#edf5ff;
  --bt-navy:#0b1f36;
  --bt-copy:#506176;
  --bt-border:#d8e2ee;
  --bt-surface:#fff;
  --bt-canvas:#f5f8fc;
  --bt-radius:14px;
  --bt-radius-lg:20px;
}
[data-theme="dark"]{
  --bt-brand:#58a6ff;
  --bt-brand-strong:#2d7dd2;
  --bt-brand-soft:#122b47;
  --bt-navy:#f4f8fd;
  --bt-copy:#aabbd0;
  --bt-border:#293c52;
  --bt-surface:#101e2f;
  --bt-canvas:#091422;
}

/* A calmer, less template-like visual system */
body{font-feature-settings:"cv02","cv03","cv04","cv11";text-rendering:optimizeLegibility}
.card,.bt-panel,.job-card,.mk-card,.listing-card,.request-card{border-color:var(--bt-border)!important;box-shadow:0 1px 2px rgba(11,31,54,.035),0 10px 30px rgba(11,31,54,.045)!important}
.card:hover{box-shadow:0 1px 2px rgba(11,31,54,.04),0 14px 34px rgba(11,31,54,.065)}
.page-head h1,.bt-studio__title,.mk-h1{color:var(--bt-navy);letter-spacing:-.035em}
.page-head .muted,.bt-studio__lead{color:var(--bt-copy)}
.eyebrow,.bt-studio__eyebrow{color:var(--bt-brand);letter-spacing:.075em}
.btn:not(.ghost),.bt-publish{background:var(--bt-brand)!important;background-image:none!important;border:1px solid var(--bt-brand)!important;box-shadow:0 6px 16px rgba(11,99,206,.18)!important}
.btn:not(.ghost):hover,.bt-publish:hover{background:var(--bt-brand-strong)!important;border-color:var(--bt-brand-strong)!important;box-shadow:0 8px 20px rgba(11,99,206,.22)!important}
.btn.ghost{border-color:var(--bt-border)!important;background:var(--bt-surface)!important;color:var(--bt-navy)!important}
.btn.ghost:hover{border-color:var(--bt-brand)!important;color:var(--bt-brand)!important;background:var(--bt-brand-soft)!important}
input,select,textarea{border-color:var(--bt-border)!important;background:var(--bt-surface)!important;color:var(--bt-navy)!important}
input::placeholder,textarea::placeholder{color:#8a9bb0}

/* Unified single-file picker */
.bt-file-field{display:grid;gap:9px;min-width:0}
.bt-file-field__input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.bt-file-field__drop{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;min-height:92px;padding:14px;border:1.5px dashed #a9bdd4;border-radius:15px;background:var(--bt-canvas);cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.bt-file-field__drop:hover,.bt-file-field__drop.is-dragging{border-color:var(--bt-brand);background:var(--bt-brand-soft);box-shadow:0 8px 22px rgba(11,99,206,.09);transform:translateY(-1px)}
.bt-file-field__icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--bt-surface);border:1px solid var(--bt-border);color:var(--bt-brand)}
.bt-file-field__icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bt-file-field__copy{min-width:0}
.bt-file-field__copy strong{display:block;color:var(--bt-navy);font-size:14px;line-height:1.35}
.bt-file-field__copy>span{display:block;color:var(--bt-copy);font-size:12px;line-height:1.45;margin-top:3px}
.bt-file-field__copy small{display:block;color:#7c8da2;font-size:11px;margin-top:4px}
.bt-file-field__action{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:36px;padding:0 12px;border:1px solid var(--bt-border);border-radius:10px;background:var(--bt-surface);color:var(--bt-brand);font-size:12px;font-weight:750}
.bt-file-field__preview:empty{display:none}
.bt-file-preview-card{display:grid;grid-template-columns:56px minmax(0,1fr) 34px;align-items:center;gap:11px;padding:9px;border:1px solid var(--bt-border);border-radius:13px;background:var(--bt-surface)}
.bt-file-preview-card img,.bt-file-preview-card video{width:56px;height:48px;object-fit:cover;border-radius:9px;background:var(--bt-canvas)}
.bt-file-preview-card__doc{width:56px;height:48px;display:grid;place-items:center;border-radius:9px;background:var(--bt-brand-soft);color:var(--bt-brand)}
.bt-file-preview-card__doc svg{width:22px;height:22px}
.bt-file-preview-card__meta{min-width:0}
.bt-file-preview-card__meta strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--bt-navy);font-size:12px}
.bt-file-preview-card__meta small{display:block;color:var(--bt-copy);font-size:11px;margin-top:3px}
.bt-file-preview-card__remove{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:#b42318;display:grid;place-items:center;cursor:pointer}
.bt-file-preview-card__remove:hover{background:#fff0ef}
.bt-file-preview-card__remove svg{width:17px;height:17px}
.bt-file-field__status{min-height:0;color:var(--bt-copy);font-size:11px}
.bt-file-field.has-error .bt-file-field__drop{border-color:#dc2626;background:#fff4f4}
.bt-file-field.has-error .bt-file-field__status{color:#b42318}
.bt-file-field--compact .bt-file-field__drop{min-height:70px;padding:10px;grid-template-columns:38px minmax(0,1fr) auto}
.bt-file-field--compact .bt-file-field__icon{width:38px;height:38px;border-radius:10px}

/* Profile and document hub */
.profile-photo-section{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(240px,.9fr);gap:14px!important;align-items:start!important}
.prof-cover-preview,.bt-profile-cover{grid-column:1/-1;border-radius:18px!important;border:1px solid var(--bt-border);background:var(--bt-canvas)}
.bt-profile-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;grid-column:1/-1}
.profile-photo-current{display:flex!important;align-items:center;justify-content:center;min-height:154px;border:1px solid var(--bt-border);border-radius:16px;background:var(--bt-canvas)}
.profile-photo-controls{padding:0!important;background:transparent!important;border:0!important}
.doc-upload-form{display:grid;gap:12px}
.doc-upload-form label{display:grid;gap:7px}

/* Fleet / operations upload surfaces */
.bt-upload-group{grid-column:1/-1;display:grid;gap:12px;padding:15px;border:1px solid var(--bt-border);border-radius:16px;background:var(--bt-canvas)}
.bt-upload-section-head{grid-column:1/-1;padding-top:6px}.bt-upload-section-head h3{margin:0;color:var(--bt-navy);font-size:17px}.bt-upload-section-head p{margin:5px 0 0}.bt-upload-group__head h3{margin:0;color:var(--bt-navy);font-size:15px}
.bt-upload-group__head p{margin:4px 0 0;color:var(--bt-copy);font-size:12px}
.bt-upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* DM attachment and composer */
.dm-attachment-preview[hidden]{display:none!important}
.dm-attachment-preview{display:grid;grid-template-columns:50px minmax(0,1fr) 34px;align-items:center;gap:10px;padding:8px 10px;margin:0 8px 8px;border:1px solid var(--bt-border);border-radius:12px;background:var(--bt-canvas)}
.dm-attachment-preview img{width:50px;height:42px;object-fit:cover;border-radius:9px}
.dm-attachment-preview strong{font-size:11px;color:var(--bt-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-attachment-preview button{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:#b42318;cursor:pointer}
.dm-form-inner{border:1px solid var(--bt-border)!important;border-radius:17px!important;background:var(--bt-surface)!important;padding:7px!important;box-shadow:0 8px 22px rgba(11,31,54,.06)}
.dm-attach-btn{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border:0!important;border-radius:12px!important;background:var(--bt-brand-soft)!important;color:var(--bt-brand)!important;cursor:pointer}.dm-attach-btn svg,.dm-attachment-preview button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dm-send-btn{background:var(--bt-brand)!important}

/* Create menu: replace emoji-template feeling with disciplined icon tiles */
.create-modal{border-radius:24px!important;border:1px solid var(--bt-border)!important;background:var(--bt-surface)!important}
.create-modal-title{color:var(--bt-navy);font-weight:800!important;letter-spacing:-.02em}
.create-option-card{border:1px solid var(--bt-border)!important;border-radius:15px!important;background:var(--bt-surface)!important}
.create-option-card:hover{border-color:var(--bt-brand)!important;background:var(--bt-brand-soft)!important;transform:translateY(-2px)}
.create-option-icon{width:42px!important;height:42px!important;border-radius:12px!important;display:grid!important;place-items:center!important;background:var(--bt-brand-soft)!important;color:var(--bt-brand)!important;font-size:0!important}
.create-option-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.create-option-label{color:var(--bt-navy)!important;font-weight:750!important}
.create-option-desc{color:var(--bt-copy)!important}

/* Content and moderation language */
.bt-safe-note{border-color:var(--bt-border)!important;background:var(--bt-canvas)!important;color:var(--bt-copy)!important}
.bt-safe-note strong{color:var(--bt-navy)}
.bt-panel__badge,.bt-studio__trust{background:var(--bt-brand-soft)!important;border-color:#c9def6!important;color:var(--bt-brand-strong)!important}
.bt-studio__hero,.mk-head{background:var(--bt-surface)!important}
.bt-studio__hero:after,.mk-head:after{opacity:.35}
.bt-publish{font-size:14px!important;letter-spacing:.005em!important}

/* Accessible loading overlay for file-heavy forms */
.bt-upload-state{position:relative;overflow:hidden}
.bt-upload-state.is-visible:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:45%;background:var(--bt-brand);animation:btUploadProgress 1.4s ease-in-out infinite}
@keyframes btUploadProgress{0%{transform:translateX(-110%)}100%{transform:translateX(270%)}}

@media(max-width:760px){
  .bt-file-field__drop{grid-template-columns:44px minmax(0,1fr);min-height:88px}
  .bt-file-field__action{grid-column:2;width:max-content;margin-top:4px}
  .profile-photo-section,.bt-profile-media-grid,.bt-upload-grid{grid-template-columns:1fr!important}
  .profile-photo-current{min-height:120px}
}
@media(prefers-reduced-motion:reduce){.bt-upload-state.is-visible:after{animation:none;width:100%}}


/* ===== SOURCE: bustop-social.css ===== */
/* BusTop v2.1.8 — Sosyal akış tasarım sistemi */
:root {
  --bt-social-blue: #0b68d7;
  --bt-social-blue-strong: #0755b6;
  --bt-social-blue-soft: #eaf3ff;
  --bt-social-ink: #152033;
  --bt-social-muted: #6d7a90;
  --bt-social-line: #dfe6ef;
  --bt-social-surface: #ffffff;
  --bt-social-canvas: #f4f7fb;
  --bt-social-danger: #e23a59;
  --bt-social-radius: 16px;
  --bt-social-shadow: 0 1px 2px rgba(17, 32, 51, .04), 0 10px 28px rgba(17, 32, 51, .055);
}
[data-theme="dark"] {
  --bt-social-blue-soft: rgba(36, 131, 246, .14);
  --bt-social-ink: #edf4ff;
  --bt-social-muted: #9aa8bb;
  --bt-social-line: #273448;
  --bt-social-surface: #111a27;
  --bt-social-canvas: #0a111b;
  --bt-social-shadow: none;
}
.bt-icon { display:block; flex:none; }
.bt-social-page { background:var(--bt-social-canvas); min-height:100vh; padding:22px 0 70px; }
.bt-social-shell { width:min(1120px, calc(100% - 32px)); margin:0 auto; display:grid; grid-template-columns:minmax(0, 650px) 300px; gap:28px; align-items:start; }
.bt-social-main { min-width:0; }
.bt-social-title { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 14px; }
.bt-social-title span { display:block; color:var(--bt-social-muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.bt-social-title h1 { margin:2px 0 0; color:var(--bt-social-ink); font-size:28px; letter-spacing:-.035em; }
.bt-social-create { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; background:var(--bt-social-blue); color:#fff; font-weight:750; font-size:14px; }
.bt-social-create:hover { background:var(--bt-social-blue-strong); color:#fff; text-decoration:none; }

.bt-social-stories { overflow:hidden; margin-bottom:14px; background:var(--bt-social-surface); border:1px solid var(--bt-social-line); border-radius:var(--bt-social-radius); }
.bt-social-stories__track { display:flex; gap:14px; overflow-x:auto; padding:14px 16px 12px; scrollbar-width:none; scroll-snap-type:x proximity; }
.bt-social-stories__track::-webkit-scrollbar { display:none; }
.bt-story-person { appearance:none; border:0; background:none; color:var(--bt-social-ink); min-width:68px; width:68px; padding:0; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; font:inherit; scroll-snap-align:start; }
.bt-story-person > span:last-child { width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; text-align:center; }
.bt-story-person__ring { width:62px; height:62px; padding:2px; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(from 210deg, #0b68d7, #37a8ff, #00c2a8, #0b68d7); }
.bt-story-person__ring .avatar { width:56px !important; height:56px !important; border:2px solid var(--bt-social-surface); }
.bt-story-person.is-viewed .bt-story-person__ring { background:#aab5c3; }
.bt-story-person--mine .bt-story-person__ring { background:var(--bt-social-line); }
.bt-story-person__ring i { position:absolute; right:-1px; bottom:-1px; width:21px; height:21px; border-radius:50%; display:grid; place-items:center; background:var(--bt-social-blue); color:#fff; border:2px solid var(--bt-social-surface); font-size:16px; font-style:normal; line-height:1; }

.bt-social-composer { background:var(--bt-social-surface); border:1px solid var(--bt-social-line); border-radius:var(--bt-social-radius); margin-bottom:14px; overflow:hidden; }
.bt-social-composer__top { display:flex; align-items:center; gap:12px; padding:14px 16px 12px; }
.bt-social-composer__top > a { flex:1; min-height:42px; border-radius:999px; background:var(--bt-social-canvas); border:1px solid var(--bt-social-line); display:flex; align-items:center; padding:0 16px; color:var(--bt-social-muted); font-size:14px; }
.bt-social-composer__top > a:hover { border-color:#b8c7d9; text-decoration:none; }
.bt-social-composer__actions { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--bt-social-line); }
.bt-social-composer__actions a { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--bt-social-ink); font-size:13px; font-weight:650; border-right:1px solid var(--bt-social-line); }
.bt-social-composer__actions a:last-child { border-right:0; }
.bt-social-composer__actions a:hover { background:var(--bt-social-blue-soft); color:var(--bt-social-blue); text-decoration:none; }

.bt-social-filter-row { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 1px 10px; }
.bt-social-filter-row::-webkit-scrollbar { display:none; }
.bt-social-filter { white-space:nowrap; display:inline-flex; align-items:center; min-height:34px; padding:0 13px; border:1px solid var(--bt-social-line); border-radius:999px; background:var(--bt-social-surface); color:var(--bt-social-muted); font-size:12px; font-weight:700; }
.bt-social-filter:hover { color:var(--bt-social-blue); border-color:#a9c9ef; text-decoration:none; }
.bt-social-filter.is-active { background:var(--bt-social-blue); border-color:var(--bt-social-blue); color:#fff; }
.bt-social-role-filter { margin:0 0 12px; color:var(--bt-social-muted); font-size:12px; }
.bt-social-role-filter summary { cursor:pointer; width:max-content; font-weight:650; }
.bt-social-role-filter > div { display:flex; gap:7px; flex-wrap:wrap; padding-top:9px; }

.bt-social-feed { display:flex; flex-direction:column; gap:16px; }
.bt-social-post { background:var(--bt-social-surface); border:1px solid var(--bt-social-line); border-radius:var(--bt-social-radius); overflow:hidden; box-shadow:var(--bt-social-shadow); color:var(--bt-social-ink); }
.bt-social-post__context { display:flex; align-items:center; gap:8px; min-height:34px; padding:7px 15px; border-bottom:1px solid var(--bt-social-line); color:var(--bt-social-muted); font-size:11px; font-weight:700; }
.bt-post-context { display:inline-flex; align-items:center; gap:5px; }
.bt-social-post__header { min-height:70px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bt-post-author { min-width:0; display:flex; align-items:center; gap:10px; color:var(--bt-social-ink); }
.bt-post-author:hover { text-decoration:none; }
.bt-post-author > span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.bt-post-author b { display:flex; align-items:center; gap:4px; min-width:0; font-size:13.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bt-post-author small { color:var(--bt-social-muted); font-size:11.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bt-verified { display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--bt-social-blue); color:#fff; font-size:11px; font-style:normal; }
.bt-post-header-actions { display:flex; align-items:center; gap:6px; flex:none; }
.bt-follow-button { min-height:32px; padding:0 12px; border:1px solid var(--bt-social-blue); border-radius:9px; background:transparent; color:var(--bt-social-blue); font-weight:750; font-size:12px; cursor:pointer; }
.bt-follow-button:hover { background:var(--bt-social-blue-soft); }
.bt-follow-button.is-following { color:var(--bt-social-muted); border-color:var(--bt-social-line); background:var(--bt-social-canvas); }
.bt-follow-button:disabled { opacity:.55; cursor:wait; }
.bt-post-menu { position:relative; }
.bt-post-menu > button { width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:var(--bt-social-ink); display:grid; place-items:center; cursor:pointer; }
.bt-post-menu > button:hover { background:var(--bt-social-canvas); }
.bt-post-menu__panel { position:absolute; z-index:25; right:0; top:40px; width:190px; padding:6px; border:1px solid var(--bt-social-line); border-radius:12px; background:var(--bt-social-surface); box-shadow:0 14px 34px rgba(16,31,50,.16); display:none; }
.bt-post-menu.is-open .bt-post-menu__panel { display:block; animation:btMenuIn .16s ease-out; }
.bt-post-menu__panel a { display:block; padding:10px 11px; border-radius:8px; color:var(--bt-social-ink); font-size:13px; }
.bt-post-menu__panel a:hover { background:var(--bt-social-canvas); text-decoration:none; }
.bt-post-menu__panel .is-danger { color:var(--bt-social-danger); }
@keyframes btMenuIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }

.bt-post-carousel { position:relative; width:100%; overflow:hidden; background:#0d1520; touch-action:pan-y; user-select:none; }
.bt-post-carousel__track { display:flex; transition:transform .32s cubic-bezier(.22,.72,.22,1); will-change:transform; }
.bt-post-slide { flex:0 0 100%; width:100%; aspect-ratio:4/5; max-height:720px; display:grid; place-items:center; background:#0b111a; overflow:hidden; }
.bt-post-slide img, .bt-post-slide video { width:100%; height:100%; display:block; object-fit:contain; image-orientation:from-image; background:#0b111a; }
.bt-post-slide video { user-select:auto; }
.bt-carousel-arrow { position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.88); color:#172033; box-shadow:0 2px 10px rgba(0,0,0,.22); cursor:pointer; opacity:0; transition:opacity .18s, transform .18s; }
.bt-post-carousel:hover .bt-carousel-arrow, .bt-carousel-arrow:focus-visible { opacity:1; }
.bt-carousel-arrow:hover { transform:translateY(-50%) scale(1.06); }
.bt-carousel-arrow--prev { left:12px; }
.bt-carousel-arrow--next { right:12px; }
.bt-carousel-counter { position:absolute; z-index:4; top:12px; right:12px; border-radius:999px; padding:5px 9px; background:rgba(6,13,22,.72); color:#fff; font-size:11px; }
.bt-carousel-dots { position:absolute; z-index:4; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:5px; padding:5px 7px; border-radius:999px; background:rgba(7,13,21,.34); }
.bt-carousel-dots button { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.52); cursor:pointer; }
.bt-carousel-dots button.is-active { background:#fff; transform:scale(1.18); }

.bt-social-post__body { padding:9px 14px 13px; }
.bt-post-actions { display:flex; align-items:center; justify-content:space-between; min-height:40px; }
.bt-post-actions > div { display:flex; align-items:center; gap:2px; }
.bt-post-action { width:38px; height:38px; padding:0; border:0; background:transparent; color:var(--bt-social-ink); border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:transform .14s, background .14s, color .14s; }
.bt-post-action:hover { background:var(--bt-social-canvas); transform:translateY(-1px); }
.bt-post-action:active { transform:scale(.9); }
.bt-like-button.is-active { color:#ef2b51; }
.bt-like-button.is-active .bt-icon-heart { fill:currentColor; }
.bt-save-button.is-active { color:var(--bt-social-blue); }
.bt-save-button.is-active .bt-icon-bookmark { fill:currentColor; }
.bt-post-engagement { display:flex; align-items:center; gap:12px; min-height:24px; font-size:12.5px; color:var(--bt-social-muted); }
.bt-post-engagement button { border:0; padding:0; background:none; color:var(--bt-social-ink); font:inherit; cursor:pointer; }
.bt-post-engagement b { color:var(--bt-social-ink); }
.bt-post-caption { position:relative; margin-top:5px; color:var(--bt-social-ink); font-size:13px; line-height:1.55; }
.bt-post-caption p { margin:0; }
.bt-post-caption a { color:var(--bt-social-ink); }
.bt-post-caption.is-collapsed p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bt-post-caption > button { margin-top:2px; padding:0; border:0; background:none; color:var(--bt-social-muted); font-size:12px; cursor:pointer; }
.bt-post-caption.is-expanded p { display:block; }
.bt-post-caption.is-expanded > button { display:none; }
.bt-post-comments { margin-top:7px; display:flex; flex-direction:column; gap:7px; }
.bt-show-comments { align-self:flex-start; padding:0; border:0; background:none; color:var(--bt-social-muted); font-size:12px; cursor:pointer; }
.bt-inline-comment { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.45; }
.bt-inline-comment.is-hidden { display:none; }
.bt-inline-comment p { flex:1; min-width:0; margin:0; overflow-wrap:anywhere; }
.bt-inline-comment p a { color:var(--bt-social-ink); }
.bt-inline-comment time { display:block; color:var(--bt-social-muted); font-size:10.5px; margin-top:2px; }
.bt-comments-empty { margin:0; color:var(--bt-social-muted); font-size:12px; }
.bt-inline-comment-form { display:flex; align-items:center; gap:8px; margin-top:11px; padding-top:10px; border-top:1px solid var(--bt-social-line); }
.bt-inline-comment-form textarea { flex:1; min-width:0; resize:none; border:0; outline:0; background:transparent; color:var(--bt-social-ink); font:inherit; font-size:13px; min-height:24px; max-height:88px; padding:4px 0; }
.bt-inline-comment-form textarea::placeholder { color:var(--bt-social-muted); }
.bt-inline-comment-form button { border:0; background:none; color:var(--bt-social-blue); font-weight:750; font-size:12px; cursor:pointer; padding:6px 2px; }
.bt-inline-comment-form button:disabled { opacity:.5; cursor:wait; }
.bt-comment-login { display:inline-block; margin-top:9px; color:var(--bt-social-blue); font-size:12px; }

.bt-social-side { position:sticky; top:84px; display:flex; flex-direction:column; gap:14px; }
.bt-social-side section { background:var(--bt-social-surface); border:1px solid var(--bt-social-line); border-radius:var(--bt-social-radius); padding:17px; }
.bt-social-side h2, .bt-social-side h3 { margin:0 0 8px; color:var(--bt-social-ink); font-size:16px; }
.bt-social-side p { margin:0 0 12px; color:var(--bt-social-muted); font-size:12.5px; line-height:1.55; }
.bt-social-side a { display:block; color:var(--bt-social-blue); font-size:13px; font-weight:650; padding:6px 0; }
.bt-social-empty { padding:50px 24px; text-align:center; background:var(--bt-social-surface); border:1px solid var(--bt-social-line); border-radius:var(--bt-social-radius); color:var(--bt-social-ink); }
.bt-social-empty .bt-icon { margin:0 auto 14px; color:var(--bt-social-blue); }
.bt-social-empty h2 { margin:0 0 7px; font-size:19px; }
.bt-social-empty p { color:var(--bt-social-muted); margin:0 0 17px; }
.bt-social-pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; color:var(--bt-social-muted); font-size:12px; }
.bt-social-pagination a { padding:8px 12px; border:1px solid var(--bt-social-line); border-radius:9px; background:var(--bt-social-surface); color:var(--bt-social-ink); }

.bt-share-sheet { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:18px; }
.bt-share-sheet.is-open { display:flex; }
.bt-share-sheet__backdrop { position:absolute; inset:0; background:rgba(5,11,20,.58); backdrop-filter:blur(2px); }
.bt-share-sheet__panel { position:relative; width:min(430px,100%); background:var(--bt-social-surface); color:var(--bt-social-ink); border:1px solid var(--bt-social-line); border-radius:20px; padding:18px; box-shadow:0 24px 70px rgba(0,0,0,.28); animation:btSheetIn .2s ease-out; }
.bt-share-sheet__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.bt-share-sheet__head h2 { margin:0; font-size:17px; }
.bt-share-sheet__close { width:34px; height:34px; border:0; border-radius:50%; background:var(--bt-social-canvas); color:var(--bt-social-ink); cursor:pointer; font-size:20px; }
.bt-share-sheet__options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bt-share-option { min-height:92px; border:1px solid var(--bt-social-line); border-radius:14px; background:var(--bt-social-surface); color:var(--bt-social-ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; font:inherit; font-size:12px; font-weight:700; }
.bt-share-option:hover { border-color:#9fc5ee; background:var(--bt-social-blue-soft); color:var(--bt-social-blue); }
.bt-share-link { display:flex; gap:8px; margin-top:12px; padding:8px; border:1px solid var(--bt-social-line); border-radius:12px; background:var(--bt-social-canvas); }
.bt-share-link input { flex:1; min-width:0; border:0; background:transparent; color:var(--bt-social-muted); font-size:12px; outline:0; }
.bt-share-link button { border:0; border-radius:9px; padding:0 12px; background:var(--bt-social-blue); color:#fff; font-weight:700; cursor:pointer; }
@keyframes btSheetIn { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }

.bt-social-toast { position:fixed; z-index:10000; left:50%; bottom:24px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; max-width:min(90vw,420px); padding:11px 15px; border-radius:12px; background:#142033; color:#fff; font-size:13px; box-shadow:0 12px 38px rgba(0,0,0,.25); transition:opacity .2s, transform .2s; }
.bt-social-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.bt-heart-burst { position:absolute; z-index:8; inset:0; display:grid; place-items:center; pointer-events:none; color:#fff; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); animation:btHeartBurst .75s ease-out forwards; }
.bt-heart-burst svg { width:82px; height:82px; fill:#ef2b51; stroke:#fff; }
@keyframes btHeartBurst { 0% { opacity:0; transform:scale(.4); } 25% { opacity:1; transform:scale(1.15); } 70% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.35); } }

@media (max-width: 980px) {
  .bt-social-shell { grid-template-columns:minmax(0,650px); justify-content:center; }
  .bt-social-side { display:none; }
}
@media (max-width: 680px) {
  .bt-social-page { padding:8px 0 72px; }
  .bt-social-shell { width:100%; }
  .bt-social-title { padding:4px 14px 8px; margin:0; }
  .bt-social-title h1 { font-size:24px; }
  .bt-social-stories, .bt-social-composer, .bt-social-post { border-left:0; border-right:0; border-radius:0; box-shadow:none; }
  .bt-social-stories, .bt-social-composer { margin-bottom:8px; }
  .bt-social-filter-row, .bt-social-role-filter { padding-left:12px; padding-right:12px; }
  .bt-social-feed { gap:8px; }
  .bt-social-post__header { padding:10px 12px; }
  .bt-social-post__body { padding:8px 12px 12px; }
  .bt-post-slide { aspect-ratio:1/1; max-height:none; }
  .bt-carousel-arrow { display:none; }
  .bt-share-sheet { align-items:flex-end; padding:0; }
  .bt-share-sheet__panel { width:100%; border-radius:20px 20px 0 0; padding:17px 15px max(20px, env(safe-area-inset-bottom)); }
  .bt-social-toast { bottom:calc(78px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-post-carousel__track, .bt-post-action, .bt-social-toast, .bt-share-sheet__panel { transition:none !important; animation:none !important; }
}

/* Klipler — Reels benzeri dikey video akışı */
.bt-reels-page { min-height:100vh; background:#05080d; color:#fff; padding:16px 18px 72px; }
.bt-reels-header { width:min(760px,100%); margin:0 auto 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bt-reels-header span { display:block; color:#9da8b7; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.bt-reels-header h1 { margin:2px 0 0; font-size:25px; color:#fff; }
.bt-reels-header > a { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:9px 14px; background:#fff; color:#111b29; font-size:13px; font-weight:750; }
.bt-reels-feed { width:min(520px,100%); margin:0 auto; display:flex; flex-direction:column; gap:16px; scroll-snap-type:y proximity; }
.bt-reel-card { position:relative; min-height:min(820px, calc(100dvh - 112px)); aspect-ratio:9/16; max-height:860px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:#0a0e14; scroll-snap-align:start; box-shadow:0 16px 48px rgba(0,0,0,.32); }
.bt-reel-video { width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.bt-reel-gradient { position:absolute; inset:auto 0 0; height:48%; pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.36) 56%,transparent); }
.bt-reel-sound { position:absolute; z-index:4; top:14px; right:14px; width:38px; height:38px; border:0; border-radius:50%; background:rgba(0,0,0,.46); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(8px); }
.bt-reel-info { position:absolute; z-index:3; left:16px; right:82px; bottom:18px; color:#fff; }
.bt-reel-author { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.bt-reel-author > a { display:flex; align-items:center; gap:8px; color:#fff; min-width:0; }
.bt-reel-author strong { display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bt-reel-follow { border-color:rgba(255,255,255,.7); color:#fff; background:rgba(0,0,0,.3); }
.bt-reel-follow.is-following { color:#fff; border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.13); }
.bt-reel-info h2 { margin:0 0 5px; color:#fff; font-size:16px; }
.bt-reel-info p { margin:0 0 7px; color:#fff; font-size:13px; line-height:1.5; max-height:4.5em; overflow:hidden; }
.bt-reel-info > span { color:#d8dee8; font-size:11px; }
.bt-reel-actions { position:absolute; z-index:4; right:13px; bottom:22px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.bt-reel-action { width:52px; min-height:52px; border:0; padding:4px 0; background:transparent; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; filter:drop-shadow(0 2px 7px rgba(0,0,0,.4)); }
.bt-reel-action b { font-size:10px; font-weight:650; }
.bt-reel-action.is-active { color:#ff4165; }
.bt-reel-action.bt-save-button.is-active { color:#fff; }
.bt-reel-action.bt-save-button.is-active .bt-icon-bookmark { fill:#fff; }
.bt-reel-comments-panel { position:absolute; z-index:12; inset:auto 0 0; max-height:72%; background:var(--bt-social-surface); color:var(--bt-social-ink); border-radius:20px 20px 0 0; transform:translateY(102%); transition:transform .28s cubic-bezier(.22,.72,.22,1); display:flex; flex-direction:column; }
.bt-reel-comments-panel.is-open { transform:translateY(0); }
.bt-reel-comments-panel > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--bt-social-line); }
.bt-reel-comments-panel > header div { display:flex; flex-direction:column; }
.bt-reel-comments-panel > header span { color:var(--bt-social-muted); font-size:11px; }
.bt-reel-comments-panel > header button { width:34px; height:34px; border:0; border-radius:50%; background:var(--bt-social-canvas); color:var(--bt-social-ink); font-size:20px; cursor:pointer; }
.bt-reel-comments-list { flex:1; min-height:120px; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.bt-reel-comments-panel .bt-inline-comment-form { margin:0; padding:11px 14px max(13px,env(safe-area-inset-bottom)); background:var(--bt-social-surface); }
.bt-reels-empty { width:min(520px,100%); min-height:520px; margin:auto; border:1px solid rgba(255,255,255,.12); border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:30px; }
.bt-reels-empty .bt-icon { margin-bottom:13px; }
.bt-reels-empty h2 { margin:0 0 7px; }
.bt-reels-empty p { color:#aeb8c6; }
@media (max-width:680px) {
  .bt-reels-page { padding:0 0 64px; }
  .bt-reels-header { padding:10px 13px; margin:0; background:#05080d; }
  .bt-reels-header h1 { font-size:21px; }
  .bt-reels-feed { width:100%; gap:0; }
  .bt-reel-card { width:100%; min-height:calc(100dvh - 116px); max-height:none; border-radius:0; border-left:0; border-right:0; }
}


/* ===== SOURCE: bustop-quality.css ===== */
/* BusTop v2.1.9 — Final visual QA, accessibility and responsive hardening */
:root {
  --bt-quality-focus: color-mix(in srgb, var(--primary, #0b68d7) 38%, transparent);
  --bt-quality-danger: #d92d4f;
}

/* Foundation: every screen stays inside its viewport without hiding intentional carousels. */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; }
main, section, article, aside, form, fieldset, .container, .app-main, .app-content { min-width: 0; }
img, video, canvas, svg { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
:where(p, h1, h2, h3, h4, h5, h6, td, th, a, span) { overflow-wrap: anywhere; }

/* Missing compact avatar size previously expanded comments to hundreds of pixels. */
.avatar.xs,
.avatar.avatar-xs {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex: 0 0 24px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
.avatar.xs img,
.avatar.avatar-xs img { width: 100% !important; height: 100% !important; object-fit: cover; }

/* Keyboard and high-contrast focus treatment across the product. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bt-quality-focus) !important;
  outline-offset: 2px;
}
:where(button, input, select, textarea):disabled,
.is-submitting :where(button[type="submit"], input[type="submit"]) {
  cursor: wait !important;
  opacity: .68;
}

/* Social feed hardening */
.bt-post-author { flex: 1 1 auto; overflow: hidden; }
.bt-post-author > .avatar { flex: 0 0 auto; }
.bt-post-author b { max-width: 100%; }
.bt-verified { flex: 0 0 16px; min-width: 16px; }
.bt-post-header-actions { flex: 0 0 auto; }
.bt-post-carousel { touch-action: pan-y; user-select: none; isolation: isolate; }
.bt-post-carousel:focus-visible { outline-offset: -3px !important; }
.bt-post-carousel__track { will-change: transform; }
.bt-post-slide { flex: 0 0 100%; min-width: 100%; width: 100%; }
.bt-post-slide > :where(img, video) { display: block; width: 100%; height: 100%; }
.bt-inline-comment { min-width: 0; }
.bt-inline-comment > a { display: inline-flex; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; }
.bt-inline-comment p { padding-top: 1px; }
.bt-inline-comment-form { min-width: 0; }
.bt-inline-comment-form > .avatar.xs { align-self: flex-start; margin-top: 3px; }
.bt-inline-comment-form textarea { width: auto; }
.bt-inline-comment-form button {
  min-width: 58px;
  min-height: 36px;
  padding: 7px 8px;
  border-radius: 9px;
}
.bt-show-comments,
.bt-like-summary,
.bt-comment-login { min-height: 34px; display: inline-flex; align-items: center; }
.bt-follow-button { min-height: 36px; }
.bt-post-action { min-width: 40px; min-height: 40px; border-radius: 50%; }
.bt-post-action:hover { background: var(--bt-social-blue-soft); }
.bt-post-action:active { transform: scale(.92); }

/* Reels */
.bt-reel-card { contain: layout paint; }
.bt-reel-author { min-width: 0; }
.bt-reel-author > a { min-width: 0; max-width: calc(100% - 90px); }
.bt-reel-author strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bt-reel-comments-panel { overscroll-behavior: contain; }
.bt-reel-comments-list { min-height: 0; }
.bt-reel-comments-panel [data-reel-comments-close] { min-width: 40px; min-height: 40px; }

/* Branded fallback instead of broken-image text. */
.bt-media-fallback {
  position: relative;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  min-height: 160px;
  background:
    radial-gradient(circle at 30% 20%, rgba(11,104,215,.16), transparent 38%),
    linear-gradient(145deg, var(--bt-social-canvas, #f4f7fb), var(--bt-social-blue-soft, #eaf3ff));
}
.bt-media-fallback::after {
  content: "BusTop medya";
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--bt-social-line, #dfe6ef);
  border-radius: 999px;
  background: var(--bt-social-surface, #fff);
  color: var(--bt-social-muted, #6d7a90);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.bt-media-fallback > img { display: none !important; }

/* Forms and studios */
.grid-form > label,
.bt-studio label,
.bt-field,
.form-group { min-width: 0; }
:where(.grid-form, .bt-studio, .form-grid, .filters) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-width: 0;
}
.bt-studio__back {
  min-height: 40px;
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: 10px;
}
.bt-studio__back:hover { background: var(--bt-social-blue-soft, #eaf3ff); text-decoration: none; }
.bt-upload-zone,
.bt-media-dropzone,
[data-upload-zone] { transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.bt-upload-zone:active,
.bt-media-dropzone:active,
[data-upload-zone]:active { transform: scale(.995); }

/* Tables: deliberate local scrolling rather than page overflow. */
.table-wrap,
.admin-table-wrap,
.responsive-table,
:where(.card, .panel) > table { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
table { border-collapse: collapse; }
td, th { vertical-align: middle; }

/* Listings/marketplace/job cards */
:where(.listing-card, .market-card, .vehicle-card, .part-card, .job-card) { min-width: 0; }
:where(.listing-card, .market-card, .vehicle-card, .part-card, .job-card) img { display: block; }
.listings-sort-select { min-height: 42px; }
.lt-tabs { scrollbar-width: none; }
.lt-tabs::-webkit-scrollbar { display: none; }
.lt-tab { min-height: 42px; display: inline-flex; align-items: center; }

/* Messages: balanced desktop canvas and robust mobile keyboard/safe-area layout. */
.dm-page { background: var(--bg); }
.dm-layout { min-width: 0; }
.dm-chat-area,
.dm-conv-list { min-width: 0; }
.dm-empty-chat {
  width: min(460px, calc(100% - 40px));
  height: auto;
  min-height: 250px;
  align-self: center;
  margin: auto;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}
.dm-empty-chat h3 { margin: 12px 0 6px; color: var(--text); }
.dm-conv-item { min-height: 72px; }
.dm-attach-btn,
.dm-send-btn { min-width: 42px; min-height: 42px; }
.dm-bubble { min-width: 0; }
.dm-bubble-text { overflow-wrap: anywhere; }

/* Footer controls remain tappable without looking oversized. */
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 2px;
}
.footer-inner { min-width: 0; }

/* Global status/empty states */
:where(.empty-state, .error-card, .feed-empty, .bt-social-empty, .bt-reels-empty) { max-width: 100%; }

[data-theme="dark"] .bt-media-fallback {
  background: radial-gradient(circle at 30% 20%, rgba(36,131,246,.18), transparent 38%), #0e1724;
}
[data-theme="dark"] .dm-empty-chat { background: var(--surface); }

@media (max-width: 900px) {
  .bt-social-shell { width: min(650px, 100%); }
  .bt-social-page { padding-top: 12px; }
  .bt-social-title { padding-inline: 14px; }
  .bt-social-stories,
  .bt-social-composer,
  .bt-social-filter-row,
  .bt-social-role-filter,
  .bt-social-post { border-left: 0; border-right: 0; border-radius: 0; }
}

@media (max-width: 720px) {
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .footer-inner { align-items: flex-start; gap: 8px; }
  .footer-links { gap: 4px 12px; }
  .footer-links a { min-height: 40px; }

  .bt-social-title h1 { font-size: 25px; }
  .bt-social-post__header { padding-inline: 12px; }
  .bt-social-post__body { padding-inline: 12px; }
  .bt-post-author { gap: 8px; }
  .bt-post-author b { font-size: 13px; }
  .bt-post-header-actions { gap: 4px; }
  .bt-follow-button { padding-inline: 10px; }
  .bt-post-menu > button { min-width: 38px; min-height: 38px; }
  .bt-inline-comment-form { gap: 6px; }
  .bt-inline-comment-form button { min-width: 54px; }

  .dm-empty-chat { min-height: 210px; width: calc(100% - 24px); padding: 24px; }
  .dm-chat-form { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

  .bt-studio__back { min-height: 44px; }
  .lt-tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .lt-tab { flex: 0 0 auto; scroll-snap-align: start; }
}

@media (max-width: 420px) {
  .bt-social-title { margin-bottom: 10px; }
  .bt-social-create { min-width: 42px; min-height: 42px; padding: 0 12px; }
  .bt-social-composer__actions a { font-size: 12px; gap: 5px; }
  .bt-post-author small { max-width: 210px; }
  .bt-post-action { min-width: 38px; min-height: 38px; }
  .bt-post-actions { margin-inline: -4px; }
  .bt-reel-action { width: 48px; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-post-carousel__track,
  .bt-heart-burst,
  .bt-social-toast,
  .bt-share-sheet__panel,
  .bt-reel-comments-panel { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Final QA: wide data tables stay usable on narrow screens instead of being clipped. */
@media (max-width: 900px) {
  :where(.card, .panel, .admin-card, .content-card) > table,
  .table-wrap > table,
  .admin-table-wrap > table,
  .responsive-table > table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  :where(.card, .panel, .admin-card, .content-card) > table :where(th, td) {
    white-space: nowrap;
  }
  :where(.card, .panel, .admin-card, .content-card) > table :where(td .stack, td form, td .actions) {
    white-space: normal;
  }

  /* Profile tabs behave like a native horizontal tab rail on small screens. */
  .prof-tabs {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .prof-tabs::-webkit-scrollbar { display: none; }
  .prof-tabs .prof-tab { flex: 0 0 auto; min-width: max-content; }

  /* Horizontal filters intentionally scroll locally and never expand the page. */
  .mk-chips,
  .bt-social-filter-row,
  .lt-tabs,
  .prof-stories-row,
  .prof-stories-list {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Long admin action groups remain readable inside their own table cell. */
:where(td, th) :where(form, .actions, .button-group) { max-width: 100%; }


/* ===== SOURCE: bustop-responsive-pro.css ===== */
/* BusTop v2.2.0 — responsive polish, mobile parity, brand identity */
:root{
  --bt-app-max: 1180px;
  --bt-content-max: 720px;
  --bt-dvh: 1vh;
  --bt-safe-top: env(safe-area-inset-top, 0px);
  --bt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bt-brand-1:#165DFF;
  --bt-brand-2:#3B82F6;
  --bt-brand-3:#0EA5E9;
  --bt-ink:#0f172a;
  --bt-surface:#ffffff;
  --bt-surface-2:#f8fafc;
  --bt-line:#dbe4f0;
  --bt-shadow:0 10px 30px rgba(15,23,42,.08);
  --font-display:'Outfit','Inter',system-ui,sans-serif;
}
html,body{overflow-x:hidden;}
body{font-family:var(--font, 'Inter', system-ui, sans-serif);}
.brand-wordmark,.ig-sidebar-logo span,.mob-topbar-brand{font-family:var(--font-display); letter-spacing:-.02em;}
.brand-wordmark{font-weight:800;}
.container{width:min(calc(100% - 24px), var(--bt-app-max));}
.card,.vitrin-feed-card,.clip-card,.dm-layout,.mk-card,.job-card,.listing-card{box-shadow:var(--bt-shadow);}
.btn,button,.vfa,.clip-action,.vf-follow-btn,.mk-chip{touch-action:manipulation;}
.btn,.vf-follow-btn,.dm-send-btn,.vitrin-composer-post-btn{min-height:44px;}
a,img,button{ -webkit-tap-highlight-color: transparent; }
img{max-width:100%;}

/* Better top bars */
.topbar,.mob-topbar{backdrop-filter:saturate(180%) blur(14px);}
.mob-topbar{padding-top: max(8px, var(--bt-safe-top));}
.mobile-bottom-nav{padding-bottom:max(8px,var(--bt-safe-bottom));}
.ig-sidebar-logo img,.brand img,.mob-topbar-brand img{border-radius:12px;box-shadow:0 8px 24px rgba(22,93,255,.16);}

/* General responsive guardrails */
.card, .vitrin-feed-card, .clip-card, .mk-card, .job-card, .listing-card, .dm-conv-item, .dm-chat-area, .dm-conv-list {min-width:0;}
.vitrin-feed-text,.vitrin-feed-title,.mk-card-title,.dm-bubble-text,.clip-title,.clip-body{overflow-wrap:anywhere;word-break:break-word;}
.vitrin-filter-scroll,.mk-chip-row,.chips-row{scrollbar-width:none; -ms-overflow-style:none;}
.vitrin-filter-scroll::-webkit-scrollbar,.mk-chip-row::-webkit-scrollbar,.chips-row::-webkit-scrollbar{display:none;}

/* App layout parity */
.is-app .app-shell,.is-app .ig-app-layout{gap:24px;}
.vitrin-page-layout,.clips-header,.clips-feed,.dm-page .dm-layout,.mk-page-layout{width:min(100%,var(--bt-app-max)); margin-inline:auto;}
.vitrin-main-col{max-width:var(--bt-content-max); width:100%;}
.vitrin-page-layout{display:grid;grid-template-columns:minmax(0,var(--bt-content-max)) minmax(260px,320px);gap:24px;align-items:start;}
.vitrin-feed-stream{display:grid;gap:18px;}
.vitrin-feed-card{border-radius:22px;overflow:hidden;border:1px solid var(--bt-line);}
.vitrin-feed-content{padding:0 18px 16px;}
.vitrin-feed-header{padding:16px 18px 12px;align-items:flex-start;gap:12px;}
.vitrin-feed-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vf-follow-btn{border:none;border-radius:999px;background:var(--primary);color:#fff;font-weight:700;padding:10px 16px;cursor:pointer;box-shadow:0 10px 22px rgba(29,78,216,.16);}
.vf-follow-btn.following{background:var(--primary-light);color:var(--primary);}
.vitrin-feed-user{min-width:0;display:flex;gap:12px;align-items:center;text-decoration:none;}
.vitrin-feed-userinfo{min-width:0;}
.vitrin-feed-username,.vitrin-feed-usermeta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vitrin-feed-title a{text-decoration:none;color:inherit;}
.read-more-link{font-weight:700;white-space:nowrap;}

/* Vitrin media — Instagram-like */
.vitrin-feed-img-wrap,.vitrin-detail-gallery,.vitrin-media-stage{position:relative;border-radius:0;overflow:hidden;background:#e9eef6;}
.vitrin-feed-img-wrap img,.vitrin-detail-gallery img,.vitrin-media-stage img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#eef2f7;}
.vitrin-feed-img-wrap video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#0b1020;}
.vitrin-feed-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding-top:10px;}
.vfa,.like-btn,.comment-btn,.save-btn,.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:600;}
.vfa:hover,.like-btn:hover,.comment-btn:hover,.save-btn:hover,.share-btn:hover{transform:translateY(-1px);background:var(--primary-light);border-color:var(--primary-mid);text-decoration:none;}

/* Composer */
.vitrin-composer-card{position:sticky;top:12px;z-index:2;}
.vitrin-composer-top{display:flex;gap:12px;align-items:center;}
.vitrin-composer-input{min-height:52px;display:flex;align-items:center;padding:0 16px;flex:1;text-decoration:none;}
.vitrin-composer-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;}
.vitrin-composer-btn,.vitrin-composer-post-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;text-decoration:none;padding:12px 10px;border-radius:14px;}
.vitrin-composer-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-2);font-weight:700;}
.vitrin-composer-post-btn{border-radius:14px;}

/* Stories */
.story-row-wrap{overflow:hidden;}
.story-row{display:flex;gap:16px;overflow:auto;padding-bottom:6px;scrollbar-width:none;}
.story-row::-webkit-scrollbar{display:none;}
.story-item,.story-add-item{min-width:72px;}
.story-item span,.story-add-item span{display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Comments under posts */
.vitrin-comments,.comments-list,.comment-list{display:grid;gap:12px;}
.comment-item,.vitrin-comment-item{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;}
.comment-item .avatar,.vitrin-comment-item .avatar,.avatar.xs{width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;flex:0 0 32px !important;}
.comment-form,.vitrin-comment-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;}
.comment-form input,.vitrin-comment-form input,.comment-form textarea,.vitrin-comment-form textarea{min-width:0;border-radius:16px;}

/* Clips / reels */
.clips-page{padding-bottom:calc(84px + var(--bt-safe-bottom));}
.clips-header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px;}
.clips-feed{display:grid;gap:18px;max-width:480px;}
.clip-card{position:relative;border:1px solid var(--border);border-radius:24px;overflow:hidden;background:#081120;min-height:min(88vh,860px);}
.clip-video-wrap{position:relative;min-height:min(88vh,860px);background:#000;}
.clip-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.clip-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.18));pointer-events:none;opacity:0;transition:opacity .18s ease;}
.clip-card.is-paused .clip-play-overlay{pointer-events:auto;opacity:1;}
.clip-play-btn{width:76px;height:76px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;border:1px solid rgba(255,255,255,.24);}
.clip-info{position:absolute;inset:auto 0 0 0;z-index:2;padding:20px 16px 18px;background:linear-gradient(to top,rgba(3,7,18,.88),rgba(3,7,18,.52) 45%,rgba(3,7,18,0));color:#fff;display:grid;gap:12px;}
.clip-user{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0;}
.clip-user strong,.clip-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.clip-user .avatar{border:2px solid rgba(255,255,255,.75);}
.clip-title,.clip-body{margin:0;color:#fff;max-width:calc(100% - 88px);}
.clip-actions{position:absolute;right:12px;bottom:22px;display:grid;gap:10px;z-index:3;}
.clip-action{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;padding:9px 10px;border-radius:999px;text-decoration:none;backdrop-filter:blur(12px);font-weight:700;}
.clip-action.like-btn.liked{background:rgba(239,68,68,.26);}
.clip-no-video{display:flex;align-items:center;justify-content:center;min-height:420px;color:#fff;}

/* Messages */
.dm-page{padding-bottom:calc(84px + var(--bt-safe-bottom));}
.dm-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:stretch;min-height:calc(100dvh - 132px);}
.dm-conv-list,.dm-chat-area{background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden;min-height:0;}
.dm-conv-header,.dm-chat-header{padding:16px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.78);backdrop-filter:blur(12px);}
.dm-conv-scroll{max-height:calc(100dvh - 220px);overflow:auto;}
.dm-conv-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border);}
.dm-conv-item.active{background:var(--primary-light);}
.dm-conv-info,.dm-conv-meta{min-width:0;}
.dm-conv-name,.dm-conv-last{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-chat-area{display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
.dm-chat-messages{min-height:0;overflow:auto;padding:16px;display:grid;gap:10px;background:linear-gradient(180deg,var(--bg),#fff);}
.dm-bubble{max-width:min(82%,520px);padding:10px 12px;border-radius:18px;}
.dm-bubble.mine{justify-self:end;background:var(--primary);color:#fff;border-bottom-right-radius:6px;}
.dm-bubble.theirs{justify-self:start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:6px;}
.dm-bubble-img img{max-width:min(240px,56vw);border-radius:14px;display:block;}
.dm-chat-form{padding:12px 14px calc(12px + var(--bt-safe-bottom));border-top:1px solid var(--border);background:var(--surface);}
.dm-form-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:end;}
.dm-textarea{min-height:46px;max-height:140px;padding:12px 14px;border-radius:18px;resize:none;}
.dm-send-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:none;border-radius:16px;background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(29,78,216,.16);}

/* Marketplace */
.mk-grid,.market-grid,.listings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.mk-card,.listing-card,.job-card{border-radius:20px;overflow:hidden;border:1px solid var(--border);background:var(--surface);}
.mk-card img,.listing-card img,.job-card img{aspect-ratio:4/3;object-fit:cover;background:#eff4ff;}
.mk-card-body,.job-card-body,.listing-card-body{padding:16px;}
.mk-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;}
.mk-chip,.mk-page{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:#fff;text-decoration:none;}
.mk-chip.active,.mk-page.active{background:var(--primary);border-color:var(--primary);color:#fff;}

/* Better forms */
input,select,textarea{width:100%;}
.form-grid,.grid-2,.grid-3,.grid-4{display:grid;gap:14px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* Mobile */
@media (max-width: 1180px){
  .vitrin-page-layout{grid-template-columns:minmax(0,1fr);}
  .vitrin-side-col{display:none;}
}
@media (max-width: 960px){
  .mk-grid,.market-grid,.listings-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dm-layout{grid-template-columns:300px minmax(0,1fr);}
}
@media (max-width: 768px){
  .container{width:min(calc(100% - 16px),100%);}
  .topbar .nav-wrap{min-height:68px;}
  .vitrin-page-title,h1{letter-spacing:-.03em;}
  .vitrin-page-sub{font-size:14px;}
  .vitrin-composer-card{position:static;}
  .vitrin-composer-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vitrin-feed-card,.dm-conv-list,.dm-chat-area,.clip-card,.mk-card,.job-card,.listing-card{border-radius:18px;}
  .vitrin-feed-header{padding:14px 14px 10px;}
  .vitrin-feed-content{padding:0 14px 14px;}
  .vitrin-feed-actions{grid-template-columns:repeat(3,minmax(0,1fr));}
  .vfa,.like-btn,.comment-btn,.save-btn,.share-btn{font-size:13px;padding:10px 8px;}
  .clips-header{padding-inline:0;}
  .clips-feed{max-width:none;width:100%;}
  .clip-card,.clip-video-wrap{min-height:calc(var(--bt-dvh) * 100 - 130px);border-radius:18px;}
  .clip-title,.clip-body{max-width:calc(100% - 90px);}
  .clip-actions{right:10px;bottom:18px;}
  .clip-action{padding:10px 11px;font-size:13px;}
  .dm-layout{grid-template-columns:minmax(0,1fr);min-height:auto;gap:12px;}
  .dm-layout.has-active-conv .dm-conv-list{display:none;}
  .dm-layout.no-active-conv .dm-chat-area{display:none;}
  .dm-conv-scroll{max-height:none;}
  .dm-chat-area{min-height:calc(var(--bt-dvh) * 100 - 158px);}
  .dm-bubble{max-width:88%;}
  .mk-grid,.market-grid,.listings-grid{grid-template-columns:minmax(0,1fr);}
  .mk-search,.grid-2,.grid-3,.grid-4,.comment-form,.vitrin-comment-form{grid-template-columns:minmax(0,1fr);}
}
@media (max-width: 480px){
  .brand-wordmark{font-size:1.08rem;}
  .vitrin-filter-chip,.mk-chip{font-size:12px;padding:8px 12px;}
  .vitrin-feed-username{font-size:14px;}
  .vitrin-feed-usermeta,.clip-user small{font-size:11px;}
  .vitrin-feed-title{font-size:22px;line-height:1.22;}
  .vitrin-feed-text,.clip-body{font-size:14px;line-height:1.55;}
  .vitrin-feed-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .clip-card,.clip-video-wrap{min-height:calc(var(--bt-dvh) * 100 - 116px);border-radius:16px;}
  .clip-actions{grid-template-columns:1fr;gap:8px;}
  .clip-action{min-width:46px;justify-content:center;}
  .dm-chat-header .btn.small.ghost:last-child{display:none;}
  .dm-conv-item{padding:12px;grid-template-columns:44px minmax(0,1fr) auto;}
  .dm-textarea{font-size:16px;}
}

/* Dark mode refinements */
[data-theme="dark"] .dm-chat-messages{background:linear-gradient(180deg,#101827,#0f172a);}
[data-theme="dark"] .dm-conv-header,[data-theme="dark"] .dm-chat-header{background:rgba(20,27,46,.85);}
[data-theme="dark"] .clip-card{background:#09111f;border-color:#25314a;}
[data-theme="dark"] .vfa,[data-theme="dark"] .like-btn,[data-theme="dark"] .comment-btn,[data-theme="dark"] .save-btn,[data-theme="dark"] .share-btn{background:#121c2e;border-color:#23324c;color:#dbeafe;}
[data-theme="dark"] .mk-chip,[data-theme="dark"] .mk-page{background:#121c2e;border-color:#23324c;color:#e2e8f0;}
[data-theme="dark"] .dm-conv-list,[data-theme="dark"] .dm-chat-area,[data-theme="dark"] .vitrin-feed-card,[data-theme="dark"] .mk-card,[data-theme="dark"] .job-card,[data-theme="dark"] .listing-card{border-color:#24324b;}


/* ===== SOURCE: bustop-release.css ===== */
/* BusTop v2.2.1 — Launch Release UI/UX hardening
   Final layer: brand consistency, all-screen responsiveness and onboarding polish. */
:root{
  --bt-launch-blue:#165DFF;
  --bt-launch-blue-dark:#0B45C6;
  --bt-launch-sky:#0EA5E9;
  --bt-launch-navy:#0B1730;
  --bt-launch-canvas:#F5F8FC;
  --bt-launch-surface:#FFFFFF;
  --bt-launch-line:#DCE5F1;
  --bt-launch-copy:#53627A;
  --bt-launch-radius:18px;
  --bt-launch-radius-lg:26px;
  --bt-launch-shadow:0 12px 34px rgba(16,36,75,.08);
  --bt-launch-shadow-hover:0 18px 48px rgba(16,36,75,.13);
}
*{box-sizing:border-box;}
html{scroll-padding-top:90px;}
body{background:var(--bg,var(--bt-launch-canvas));font-feature-settings:"cv02","cv03","cv04","cv11";text-rendering:optimizeLegibility;}
h1,h2,h3,.brand-wordmark,.ig-sidebar-wordmark,.login-wordmark,.bt-page-title{font-family:var(--font-display,'Outfit','Inter',sans-serif);}
h1,h2,h3{color:var(--text,var(--bt-launch-navy));}
p{color:var(--text-2,var(--bt-launch-copy));}
::selection{background:rgba(22,93,255,.2);color:var(--text);}
.is-touching{transform:scale(.98)!important;}

/* Accessibility and stable viewport */
.skip-link{position:fixed;left:12px;top:-80px;z-index:99999;background:var(--primary);color:#fff;padding:10px 14px;border-radius:10px;}
.skip-link:focus{top:12px;}
[hidden]{display:none!important;}
button:disabled,.btn:disabled,[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none;}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:2px;}

/* Brand */
.brand,.ig-sidebar-logo{gap:10px;}
.brand img,.ig-sidebar-logo img,.login-logo-row img{background:#fff;padding:2px;}
.brand-wordmark,.ig-sidebar-wordmark,.login-wordmark{font-weight:800;color:var(--text);}
.brand-wordmark::after,.ig-sidebar-wordmark::after{content:"";display:inline-block;width:6px;height:6px;margin-left:3px;border-radius:50%;background:var(--bt-launch-sky);vertical-align:top;margin-top:4px;}

/* App chrome */
.app-shell{min-height:100dvh;}
.app-main{min-width:0;padding-bottom:40px;}
.global-search-bar-wrap{max-width:660px;margin:14px auto 8px;padding-inline:12px;}
.global-search-form-top{border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.global-search-input{min-height:46px;border:0!important;box-shadow:none!important;background:transparent!important;}
.global-search-btn{width:44px;height:44px;border-radius:13px;margin:1px;background:var(--primary);color:#fff;border:0;}

/* Sidebar */
.ig-sidebar{border-right:1px solid var(--border);}
.ig-sidebar-inner{padding:18px 12px 14px;}
.ig-sidebar-logo{min-height:56px;margin:0 4px 12px;padding:8px 10px;border-radius:16px;}
.ig-nav-item{min-height:48px;border-radius:14px;margin:2px 0;padding:10px 12px;}
.ig-nav-item:hover{background:var(--primary-light);}
.ig-nav-item.active{background:var(--primary-light);color:var(--primary);}
.ig-nav-item.active::after{content:"";width:4px;height:22px;border-radius:99px;background:var(--primary);position:absolute;right:6px;}
.ig-nav-icon,.ig-nav-avatar{display:grid;place-items:center;min-width:28px;}
.ig-nav-badge{min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:99px;background:#E11D48;color:#fff;font-size:11px;font-weight:800;}
.ig-create-btn{color:var(--primary);font-weight:800;}

/* Public header/footer */
.topbar{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 88%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);}
.nav-wrap{min-height:72px;}
.topnav-public{gap:4px;}
.topnav-link{padding:9px 11px;border-radius:11px;font-weight:650;}
.topnav-link:hover,.topnav-link.active{background:var(--primary-light);color:var(--primary);text-decoration:none;}
.footer{border-top:1px solid var(--border);background:var(--surface);}
.footer-inner{min-height:76px;gap:18px;}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}
.footer-links a{color:var(--text-2);font-size:13px;}

/* Home / launch landing */
.premium-hero{position:relative;overflow:hidden;padding:76px 0 64px;background:
  radial-gradient(circle at 10% 0%,rgba(22,93,255,.12),transparent 35%),
  radial-gradient(circle at 90% 20%,rgba(14,165,233,.12),transparent 32%),
  linear-gradient(180deg,#fff,var(--bt-launch-canvas));}
.premium-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(22,93,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(22,93,255,.035) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 88%);}
.hero-grid{position:relative;z-index:1;align-items:center;gap:52px;}
.hero-copy h1{font-size:clamp(38px,5.2vw,68px);line-height:1.02;letter-spacing:-.055em;max-width:780px;}
.hero-copy .lead{font-size:clamp(17px,2vw,21px);line-height:1.6;max-width:690px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:12px;}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bt-launch-sky);box-shadow:0 0 0 5px rgba(14,165,233,.12);}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.trust-row span{background:#fff;border:1px solid var(--bt-launch-line);border-radius:999px;padding:8px 12px;color:var(--bt-launch-copy);font-size:12px;font-weight:700;box-shadow:0 6px 18px rgba(15,23,42,.04);}
.dashboard-mockup{border-radius:28px;border:1px solid rgba(22,93,255,.16);box-shadow:0 30px 90px rgba(15,45,100,.2);overflow:hidden;background:#fff;transform:perspective(1000px) rotateY(-3deg) rotateX(1deg);}
.section{padding-block:64px;}
.section-head{max-width:780px;margin:0 auto 34px;text-align:center;}
.section-head h2{font-size:clamp(29px,4vw,44px);letter-spacing:-.04em;line-height:1.1;}
.feature-grid,.role-grid,.new-roles-grid,.pricing-preview-grid,.home-preview-grid{gap:18px;}
.feature-card,.role-card,.new-role-card,.pricing-preview-card,.preview-card,.profile-preview-card{border-radius:22px;border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.feature-card:hover,.role-card:hover,.new-role-card:hover,.preview-card:hover{transform:translateY(-4px);box-shadow:var(--bt-launch-shadow-hover);border-color:var(--primary-mid);}
.icon-pill{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--primary-light);color:var(--primary);font-weight:800;}
.cta-card{border-radius:28px;background:linear-gradient(135deg,var(--bt-launch-blue),var(--bt-launch-sky));box-shadow:0 24px 70px rgba(22,93,255,.25);}

/* Authentication and onboarding */
.login-page-wrap,.auth-section{min-height:calc(100dvh - 74px);padding:28px 16px 52px;background:
  radial-gradient(circle at 12% 12%,rgba(22,93,255,.11),transparent 34%),
  radial-gradient(circle at 90% 88%,rgba(14,165,233,.11),transparent 34%),var(--bg);}
.login-split{width:min(1080px,100%);margin:auto;min-height:min(700px,calc(100dvh - 120px));border:1px solid var(--border);border-radius:30px;overflow:hidden;box-shadow:0 30px 80px rgba(15,35,70,.12);background:var(--surface);}
.login-brand-panel{background:linear-gradient(145deg,#0A2147,#0B5BD3 70%,#0EA5E9);position:relative;overflow:hidden;}
.login-brand-panel::before,.login-brand-panel::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%;}
.login-brand-panel::before{width:320px;height:320px;right:-130px;top:-80px;}
.login-brand-panel::after{width:220px;height:220px;left:-110px;bottom:-70px;}
.login-brand-inner{position:relative;z-index:1;}
.login-tagline{font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.045em;}
.login-card,.auth-card{border:1px solid var(--border);border-radius:24px;box-shadow:var(--bt-launch-shadow);background:var(--surface);}
.auth-card.wide{width:min(900px,100%);padding:30px;}
.auth-card h1,.login-card h1{letter-spacing:-.035em;}
.login-field input,.auth-card input,.auth-card select,.auth-card textarea{min-height:48px;border-radius:14px;background:var(--surface);}
.auth-notice{border-radius:16px;border:1px solid var(--primary-mid);background:var(--primary-light);padding:14px;}
.gsi-wrap{margin-top:14px;}
.gsi-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0;}
.gsi-divider::before,.gsi-divider::after{content:"";height:1px;background:var(--border);flex:1;}
.checkline{align-items:flex-start;line-height:1.5;}
.checkline input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;}

/* Generic page headers, forms, tables */
.app-section{padding:22px 16px 44px;}
.page-head,.admin-header-row,.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px;}
.page-head h1,.section-heading h1{margin:2px 0 0;font-size:clamp(28px,4vw,42px);letter-spacing:-.04em;}
.form-actions,.btn-group{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.grid-form,.role-aware-form{gap:16px;}
.grid-form>label,.role-aware-form>label{display:grid;gap:7px;color:var(--text);font-weight:650;min-width:0;}
.grid-form small,.role-aware-form small{color:var(--muted);font-weight:450;}
.alert,.flash{border-radius:14px;border:1px solid var(--border);}
.table-wrap,.admin-table-wrap,.data-table-wrap{width:100%;overflow:auto;border:1px solid var(--border);border-radius:18px;background:var(--surface);}
table,.admin-table,.data-table{width:100%;border-collapse:collapse;min-width:720px;}
th{position:sticky;top:0;background:var(--bg);color:var(--text-2);font-size:12px;text-transform:uppercase;letter-spacing:.04em;z-index:1;}
th,td{padding:13px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle;}
tbody tr:hover{background:var(--primary-light);}
.admin-section{display:grid;gap:16px;}
.admin-quick-card{min-height:126px;display:block;text-decoration:none;}
.admin-quick-card:hover{text-decoration:none;transform:translateY(-2px);}
.am-tabs,.tabs,.profile-tabs{display:flex;gap:6px;overflow:auto;padding:4px;border-radius:14px;background:var(--bg);scrollbar-width:none;}
.am-tabs::-webkit-scrollbar,.tabs::-webkit-scrollbar,.profile-tabs::-webkit-scrollbar{display:none;}
.am-tabs a,.tabs a,.profile-tabs a{white-space:nowrap;border-radius:11px;padding:9px 13px;text-decoration:none;font-weight:700;color:var(--text-2);}
.am-tabs a.active,.tabs a.active,.profile-tabs a.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm);}

/* Marketplace and job boards */
.mk-wrap,.market-page{padding:22px 16px 50px;}
.mk-sec{display:grid;gap:18px;}
.mk-toolbar,.market-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.mk-search{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:6px;box-shadow:var(--shadow-sm);}
.mk-search input{border:0!important;box-shadow:none!important;}
.mk-chip-row,.mk-filters{display:flex;gap:8px;overflow:auto;padding-bottom:5px;}
.mk-card,.job-card,.listing-card{position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.mk-card:hover,.job-card:hover,.listing-card:hover{transform:translateY(-3px);box-shadow:var(--bt-launch-shadow-hover);border-color:var(--primary-mid);}
.mk-card-img,.mk-noimg{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,var(--primary-light),#edf7ff);display:grid;place-items:center;overflow:hidden;}
.mk-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .28s ease;}
.mk-card:hover .mk-card-img img{transform:scale(1.025);}
.mk-card-title,.job-card h3{font-family:var(--font-display);font-size:19px;letter-spacing:-.025em;}
.mk-price{font-size:22px;font-weight:800;color:var(--text);}
.mk-tags,.job-tags{display:flex;gap:6px;flex-wrap:wrap;}
.mk-tags span,.job-tags span,.mk-status{padding:6px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text-2);}
.mk-seller-name{font-weight:800;}
.mk-seller-type,.listing-city,.listing-date{font-size:12px;color:var(--muted);}
.mk-pager,.pagination{display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:22px;}
.mk-page{width:auto;padding:0 13px;}
.job-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.job-company-lg{display:flex;align-items:center;gap:12px;}
.job-emp{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:800;}
.listing-card-contact,.mk-action{display:flex;gap:8px;flex-wrap:wrap;}
.mk-owner-note{padding:12px;border-radius:13px;background:var(--primary-light);color:var(--primary-dark);}


.mk-wrap{max-width:1120px;}
.mk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.mk-h1{margin:0 0 4px;font-size:clamp(29px,4vw,42px);letter-spacing:-.04em;}
.mk-chips{display:flex;gap:8px;overflow:auto;padding-bottom:12px;margin-bottom:16px;scrollbar-width:none;}
.mk-chips::-webkit-scrollbar{display:none;}
.mk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.job-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.mk-cat,.mk-corp{position:absolute;top:10px;padding:5px 9px;border-radius:999px;color:#fff;font-size:10px;font-weight:800;z-index:2;backdrop-filter:blur(8px);}
.mk-cat{left:10px;background:rgba(3,15,37,.72);}
.mk-corp{right:10px;background:rgba(22,93,255,.88);}
.mk-card-body{padding:15px;}
.mk-meta,.mk-city{font-size:12px;color:var(--muted);margin-top:5px;}
.mk-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);border:1px dashed var(--border);border-radius:20px;background:var(--surface);}
.mk-empty-emoji{font-size:48px;margin-bottom:12px;}
.mk-detail{max-width:940px;}
.mk-back{display:inline-flex;margin-bottom:14px;color:var(--primary);text-decoration:none;font-weight:750;}
/* GALERI KURALLARI KALDIRILDI — Transit Grid katmani sahibi.
   Bu satirlar TG'den ONCEYE aitti ve hala uygulaniyordu: `max-width:90%` tek
   fotografli ilanda kabin %10'unu siyah birakiyor, `height:min(520px,62dvh)`
   ise TG'nin `aspect-ratio` kuralini tamamen etkisiz kiliyordu (olculdu:
   img 987px / kap 1097px). `.mk-gallery-empty` ayrica bir GRADYAN tasiyordu;
   tasarim kilidi gradyan kullanmiyor. Tanimlarin tamami
   `bustop-transit-grid.web.css` icinde (mobil dahil). */
.mk-detail-body{margin-top:10px;}
.mk-detail-title{font-size:clamp(27px,4vw,42px);letter-spacing:-.04em;margin:8px 0;}
.mk-detail-price{font-size:clamp(27px,4vw,38px);font-weight:900;color:var(--primary);margin:8px 0;}
.mk-tag{background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:750;padding:6px 10px;border-radius:999px;}
.mk-tag.vip{background:#FEF3C7;color:#92400E;}
.mk-seller{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px;margin:18px 0;}
.mk-seller-av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--bt-launch-sky));color:#fff;display:grid;place-items:center;font-weight:850;}
.mk-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.mk-spec{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;}
.mk-spec-k{display:block;font-size:11px;color:var(--muted);}
.mk-spec-v{display:block;font-size:14px;font-weight:700;margin-top:3px;color:var(--text);}
.mk-desc{font-size:15px;line-height:1.7;color:var(--text-2);}
.job-pos{display:inline-flex;background:var(--primary-light);color:var(--primary);font-size:11px;font-weight:800;padding:6px 9px;border-radius:999px;}
.job-title{font-size:19px;margin:10px 0 5px;letter-spacing:-.025em;}
.job-company{color:var(--text-2);font-size:14px;font-weight:650;}
.job-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:13px;color:var(--muted);}
.job-salary{font-weight:850;color:var(--success);text-align:right;}
.job-tag{background:var(--bg);border:1px solid var(--border);color:var(--text-2);font-size:11px;font-weight:650;padding:5px 8px;border-radius:999px;}

/* Detail pages and media galleries */
.mk-detail,.listing-detail,.profile-page{min-width:0;}
.mk-detail-grid,.vehicle-detail-grid,.part-detail-grid,.job-detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:24px;align-items:start;}
.mk-gallery-main{border-radius:22px;overflow:hidden;background:#eaf0f8;}
.mk-gallery-main img{width:100%;max-height:680px;object-fit:contain;display:block;}
.mk-gallery-thumbs{display:flex;gap:8px;overflow:auto;margin-top:10px;scrollbar-width:none;}
.mk-gallery-thumbs::-webkit-scrollbar{display:none;}
.mk-gallery-thumbs button{width:82px;height:64px;border-radius:12px;overflow:hidden;padding:0;border:2px solid transparent;background:var(--bg);flex:0 0 auto;}
.mk-gallery-thumbs button.active{border-color:var(--primary);}
.mk-gallery-thumbs img{width:100%;height:100%;object-fit:cover;}
.mk-sticky,.mk-seller-card,.job-apply-card{position:sticky;top:20px;}

/* Upload and creation studios */
.bt-studio,.vf-layout,.story-studio,.clip-studio{width:min(1180px,calc(100% - 24px));margin-inline:auto;}
.bt-dropzone,.bt-upload-zone,.vf-upload,.media-studio-dropzone{border:2px dashed var(--primary-mid);border-radius:22px;background:linear-gradient(180deg,var(--primary-light),var(--surface));min-height:180px;transition:border-color .18s ease,transform .18s ease,background .18s ease;}
.bt-dropzone:hover,.bt-upload-zone:hover,.vf-upload:hover,.media-studio-dropzone:hover{border-color:var(--primary);transform:translateY(-1px);}
.bt-upload-grid,.bt-media-grid,.vf-media-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.bt-media-item,.vf-media-item{position:relative;border-radius:16px;overflow:hidden;background:var(--bg);aspect-ratio:1/1;border:1px solid var(--border);}
.bt-media-item img,.vf-media-item img{width:100%;height:100%;object-fit:cover;}
.bt-upload-progress{height:9px;border-radius:999px;overflow:hidden;background:var(--border);}
.bt-upload-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--bt-launch-sky));}

/* Vitrin final polish */
.bt-social-page{padding-bottom:56px;}
.bt-social-layout{width:min(1120px,calc(100% - 24px));margin-inline:auto;}
.bt-social-main{min-width:0;}
.bt-social-card{border-radius:22px;border:1px solid var(--border);box-shadow:var(--shadow-sm);overflow:hidden;}
.bt-social-card__header{gap:12px;}
.bt-social-card__media{background:#EDF2F8;}
.bt-social-carousel img,.bt-social-card__media img{width:100%;max-height:min(760px,78dvh);object-fit:contain;background:#eef2f7;}
.bt-social-card__actions button{min-width:42px;min-height:42px;border-radius:12px;}
.bt-social-card__actions button:hover{background:var(--primary-light);}
.bt-social-comments{border-top:1px solid var(--border);}
.bt-inline-comment{grid-template-columns:30px minmax(0,1fr);}
.bt-inline-comment p{min-width:0;overflow-wrap:anywhere;}
.bt-inline-comment-form{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;}
.bt-inline-comment-form textarea{font-size:16px;min-height:40px;max-height:120px;}
.bt-inline-comment-form button{min-height:40px;}
.bt-share-sheet{border-radius:22px 22px 0 0;}

/* Reels final polish */
.bt-reels-page{position:relative;min-height:calc(100dvh - 20px);padding:12px 12px calc(90px + env(safe-area-inset-bottom,0px));}
.bt-reels-header{width:min(520px,100%);margin:0 auto 10px;}
.bt-reels-feed{width:min(520px,100%);margin:auto;scroll-snap-type:y mandatory;}
.bt-reel-card{height:min(860px,calc(100dvh - 100px));min-height:560px;border-radius:24px;scroll-snap-align:start;overflow:hidden;background:#020617;box-shadow:0 24px 70px rgba(2,6,23,.25);}
.bt-reel-video{width:100%;height:100%;object-fit:cover;background:#000;}
.bt-reel-info{max-width:calc(100% - 78px);}
.bt-reel-actions{right:12px;bottom:82px;}
.bt-reel-action{width:52px;min-height:52px;border-radius:18px;background:rgba(2,6,23,.42);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);}
.bt-reel-action b{font-size:11px;}
.bt-reel-sound{top:14px;right:14px;border-radius:999px;}
.bt-reel-comments-panel{border-radius:24px 24px 0 0;}

/* Messages */
.dm-page{padding:14px 16px calc(86px + env(safe-area-inset-bottom,0px));}
.dm-layout{width:min(1180px,100%);}
.dm-conv-header h3{margin:0;font-size:22px;}
.dm-conv-item:hover{background:var(--primary-light);}
.dm-chat-header{display:flex;align-items:center;gap:10px;}
.dm-chat-header-info{min-width:0;flex:1;}
.dm-chat-header-info strong,.dm-chat-header-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-bubble-time{font-size:10px;opacity:.7;margin-top:4px;text-align:right;}
.dm-attach-btn{transition:background .18s ease,border-color .18s ease,transform .12s ease;}
.dm-attach-btn:hover{background:var(--primary-light)!important;border-color:var(--primary)!important;}

/* Profile/discover/search */
.profile-cover,.prof-cover{border-radius:0 0 24px 24px;overflow:hidden;background:linear-gradient(135deg,var(--primary),var(--bt-launch-sky));}
.profile-card-body,.prof-main-card{padding:20px;}
.prof-badges-row{display:flex;gap:7px;flex-wrap:wrap;}
.search-results,.discover-main{display:grid;gap:16px;}
.discover-empty,.popular-spotters-empty{padding:38px 20px;text-align:center;border:1px dashed var(--border);border-radius:20px;background:var(--surface);}
.dc-profile-link{text-decoration:none;color:inherit;}

/* Create modal */
.create-modal-overlay{padding:18px;backdrop-filter:blur(10px);}
.create-modal{width:min(720px,100%);max-height:min(820px,90dvh);overflow:auto;border-radius:28px;padding:20px;background:var(--surface);box-shadow:0 30px 90px rgba(2,6,23,.28);}
.create-modal-title{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.03em;margin:4px 0 16px;}
.create-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.create-option-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:17px;text-decoration:none;color:inherit;background:var(--surface);}
.create-option-card:hover{background:var(--primary-light);border-color:var(--primary-mid);transform:translateY(-2px);text-decoration:none;}
.create-option-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);}
.create-option-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.create-option-info,.create-option-label,.create-option-desc{display:block;min-width:0;}
.create-option-label{font-weight:800;color:var(--text);}
.create-option-desc{font-size:12px;line-height:1.45;color:var(--muted);margin-top:2px;}
.create-modal-close{min-height:46px;border-radius:14px;margin-top:12px;}

/* Runtime media fallback */
.bt-media-fallback{display:grid!important;place-items:center!important;min-height:140px!important;background:linear-gradient(135deg,var(--primary-light),var(--bg))!important;color:var(--primary)!important;font-weight:800!important;object-fit:contain!important;}

/* Dark theme */
[data-theme="dark"] .premium-hero{background:radial-gradient(circle at 10% 0%,rgba(59,130,246,.14),transparent 35%),radial-gradient(circle at 90% 20%,rgba(14,165,233,.1),transparent 32%),linear-gradient(180deg,#0B1020,#0B1020);}
[data-theme="dark"] .dashboard-mockup,[data-theme="dark"] .trust-row span{background:var(--surface);}
[data-theme="dark"] .login-brand-panel{background:linear-gradient(145deg,#07152F,#0B3D91 70%,#075985);}
[data-theme="dark"] .bt-social-card__media,[data-theme="dark"] .bt-social-carousel img,[data-theme="dark"] .bt-social-card__media img{background:#050A14;}
[data-theme="dark"] th{background:#121B2D;}
[data-theme="dark"] .create-option-card{background:var(--surface);}

/* Tablet */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-copy{text-align:center;margin:auto;}
  .hero-copy .lead{margin-inline:auto;}
  .hero-actions,.trust-row{justify-content:center;}
  .hero-visual{width:min(760px,100%);margin:auto;}
  .dashboard-mockup{transform:none;}
  .mk-detail-grid,.vehicle-detail-grid,.part-detail-grid,.job-detail-grid{grid-template-columns:minmax(0,1fr);}
  .mk-sticky,.mk-seller-card,.job-apply-card{position:static;}
}

/* Mobile */
@media (max-width:768px){
  html{scroll-padding-top:70px;}
  body.is-app{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));}
  .mobile-topbar{height:60px;padding-inline:12px;}
  .mobile-bottom-nav{height:calc(66px + env(safe-area-inset-bottom,0px));display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));padding:5px 4px max(5px,env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);border-top:1px solid var(--border);}
  .mbn-item{min-width:0;gap:3px;font-size:10px;padding:2px;border-radius:12px;}
  .mbn-item svg{width:22px;height:22px;}
  .mbn-create-btn{width:44px;height:44px;margin-top:-21px;border:4px solid var(--surface);box-shadow:0 8px 24px rgba(22,93,255,.3);}
  .global-search-bar-wrap{display:none;}
  .section{padding-block:44px;}
  .premium-hero{padding:46px 0 40px;}
  .hero-copy h1{font-size:clamp(34px,11vw,48px);}
  .hero-actions{display:grid;grid-template-columns:1fr;}
  .hero-actions .btn{width:100%;}
  .trust-row{gap:6px;}
  .trust-row span{font-size:10px;padding:7px 9px;}
  .dashboard-mockup{border-radius:20px;}
  .feature-grid,.role-grid,.new-roles-grid,.pricing-preview-grid,.home-preview-grid{grid-template-columns:minmax(0,1fr)!important;}
  .section-head{text-align:left;margin-bottom:24px;}
  .section-head h2{font-size:31px;}
  .cta-card{padding:24px;border-radius:22px;display:grid;gap:18px;}
  .footer-inner{align-items:flex-start;flex-direction:column;padding-block:20px;}
  .footer-links{gap:10px 14px;}
  .login-page-wrap,.auth-section{padding:10px 8px 28px;min-height:auto;}
  .login-split{border-radius:22px;min-height:auto;}
  .login-brand-panel{display:none;}
  .login-form-panel{padding:22px 14px;}
  .login-card,.auth-card,.auth-card.wide{padding:20px 16px;border-radius:20px;width:100%;}
  .grid-form,.role-aware-form{grid-template-columns:minmax(0,1fr)!important;}
  .grid-form .span-2,.role-aware-form .span-2{grid-column:auto!important;}
  .page-head,.admin-header-row,.section-heading{align-items:flex-start;flex-direction:column;}
  .page-head>.btn,.page-head>.form-actions{width:100%;}
  .form-actions,.btn-group{display:grid;grid-template-columns:1fr;width:100%;}
  .form-actions .btn,.btn-group .btn{width:100%;}
  .table-wrap,.admin-table-wrap,.data-table-wrap{border-radius:14px;}
  th,td{padding:11px 12px;}
  .mk-wrap,.market-page,.app-section{padding:14px 8px 36px;}
  .mk-toolbar,.market-toolbar{align-items:stretch;flex-direction:column;}
  .mk-grid,.job-grid{grid-template-columns:minmax(0,1fr);}
  .mk-head{align-items:stretch;flex-direction:column;}
  .mk-head>.btn{width:100%;}
  .mk-search{grid-template-columns:minmax(0,1fr);}
  .mk-specs{grid-template-columns:repeat(2,minmax(0,1fr));}

  .mk-toolbar .btn,.market-toolbar .btn{width:100%;}
  .mk-gallery-main{border-radius:16px;}
  .bt-studio,.vf-layout,.story-studio,.clip-studio{width:calc(100% - 12px);}
  .bt-upload-grid,.bt-media-grid,.vf-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bt-social-layout{width:100%;}
  .bt-social-card{border-left:0;border-right:0;border-radius:0;box-shadow:none;}
  .bt-social-card__header,.bt-social-card__body,.bt-social-comments{padding-left:12px!important;padding-right:12px!important;}
  .bt-social-carousel img,.bt-social-card__media img{max-height:72dvh;}
  .bt-inline-comment-form{grid-template-columns:28px minmax(0,1fr) auto;}
  .bt-reels-page{padding:0 0 calc(66px + env(safe-area-inset-bottom,0px));background:#000;}
  .bt-reels-header{position:absolute;z-index:8;background:transparent!important;top:max(8px,env(safe-area-inset-top,0px));left:12px;right:12px;width:auto;margin:0;color:#fff;pointer-events:none;}
  .bt-reels-header h1,.bt-reels-header span{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45);}
  .bt-reels-header>a{pointer-events:auto;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);}
  .bt-reels-feed{width:100%;height:calc(100dvh - 60px - 66px - env(safe-area-inset-bottom,0px));overflow-y:auto;scroll-snap-type:y mandatory;}
  .bt-reel-card{height:calc(100dvh - 60px - 66px - env(safe-area-inset-bottom,0px));min-height:0;border-radius:0;box-shadow:none;}
  .bt-reel-info{bottom:20px;padding-left:14px;}
  .bt-reel-actions{bottom:92px;right:9px;}
  .bt-reel-comments-panel{height:min(72dvh,700px);}
  .dm-page{padding:6px 6px calc(72px + env(safe-area-inset-bottom,0px));}
  .dm-conv-list,.dm-chat-area{border-radius:16px;}
  .dm-chat-area{height:calc(100dvh - 138px - env(safe-area-inset-bottom,0px));}
  .dm-chat-messages{padding:12px;}
  .dm-chat-form{padding:8px 8px max(8px,env(safe-area-inset-bottom,0px));}
  .dm-form-inner{gap:7px;}
  .dm-attach-btn{width:42px!important;height:42px!important;}
  .dm-send-btn{width:44px;height:44px;border-radius:14px;}
  .dm-bubble{max-width:90%;}
  .profile-cover,.prof-cover{border-radius:0 0 18px 18px;}
  .create-modal-overlay{align-items:flex-end;padding:0;}
  .create-modal{width:100%;max-height:88dvh;border-radius:24px 24px 0 0;padding:16px 12px calc(16px + env(safe-area-inset-bottom,0px));}
  .create-options{grid-template-columns:minmax(0,1fr);gap:7px;}
  .create-option-card{grid-template-columns:44px minmax(0,1fr);padding:11px 12px;border-radius:15px;}
  .create-option-icon{width:44px;height:44px;border-radius:13px;}
  .create-option-desc{font-size:11px;}
}

@media (max-width:390px){
  .mobile-bottom-nav{padding-inline:1px;}
  .mbn-item{font-size:9px;}
  .mbn-item svg{width:21px;height:21px;}
  .hero-copy h1{font-size:33px;}
  .bt-inline-comment-form{grid-template-columns:minmax(0,1fr) auto;}
  .bt-inline-comment-form>.avatar{display:none;}
  .bt-reel-action{width:48px;min-height:48px;}
  .bt-upload-grid,.bt-media-grid,.vf-media-grid{gap:8px;}
}

/* v2.2.1 final touch target pass */
.mob-topbar-icon,.topnav-icon,.hamburger-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.bt-reel-follow{min-height:40px;padding:8px 14px;border-radius:999px;}

/* ══════════ ARAC PAZARI FILTRE PANELI ══════════════════════════════════════
   Web arac pazari once yalniz metin arama + sehir sunuyordu. Filtreler ve
   siralama mobil ile ayni sunucu koduna baglandi; buradaki stiller o arayuz
   icin. Yalniz anlamsal belirtecler kullanilir (--surface / --border / --text
   / --muted / --brand), boylece koyu tema kendiliginden calisir.
   ------------------------------------------------------------------------- */

/* `.mk-filters` daha once yatay kaydirilan bir cip satiriydi; artik bir form. */
.mk-filters{display:block;overflow:visible;padding-bottom:0;margin-bottom:16px;}
.mk-filters .mk-search{display:flex;gap:8px;align-items:center;}
.mk-filters .mk-search input{flex:1;padding:12px 14px;}

.mk-adv{margin-top:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface);}
.mk-adv>summary{
  cursor:pointer;list-style:none;padding:12px 16px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;min-height:48px;box-sizing:border-box;
}
.mk-adv>summary::-webkit-details-marker{display:none;}
.mk-adv>summary::after{content:'▾';margin-left:auto;color:var(--muted);}
.mk-adv[open]>summary::after{content:'▴';}
.mk-badge{
  background:var(--brand);color:#fff;border-radius:999px;
  padding:1px 8px;font-size:12px;font-weight:700;
}

.mk-fgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;padding:4px 16px 12px;
}
.mk-fgrid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);}
.mk-fgrid input,.mk-fgrid select{
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);font-size:14px;min-height:48px;box-sizing:border-box;
}
.mk-range{display:flex;gap:8px;}
.mk-range input{width:100%;min-width:0;}
.mk-chks{display:flex;flex-wrap:wrap;gap:14px;align-items:center;grid-column:1/-1;}
.mk-chk{
  flex-direction:row!important;align-items:center;gap:8px;
  color:var(--text);font-size:14px;cursor:pointer;min-height:48px;
}
.mk-chk input{min-height:auto;width:18px;height:18px;}

.mk-fact{display:flex;align-items:center;gap:16px;padding:0 16px 16px;}
.mk-clear{color:var(--muted);font-size:14px;text-decoration:underline;}

.mk-result-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.mk-count{color:var(--muted);font-size:14px;}
.mk-sort{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;}
.mk-sort select{
  padding:8px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);font-size:14px;min-height:48px;
}

/* Ilan tarihi ve satici kimligi — mobil kartlarla ayni bilgiler. */
.mk-date{color:var(--muted);font-size:12px;margin-top:4px;}
.mk-seller{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;}
.mk-promo{
  display:inline-block;background:var(--brand);color:#fff;border-radius:6px;
  padding:2px 7px;font-size:11px;font-weight:700;margin-right:4px;
}

@media (max-width:640px){
  .mk-fgrid{grid-template-columns:1fr;}
  .mk-result-bar{flex-direction:column;align-items:stretch;}
}

/* ══════════ GALERI / YETKILI SATICI MAGAZASI ══════════════════════════════
   Mobil `SellerStoreScreen` ile ayni sozlesme: TEK birincil siniflandirma,
   TEK dogrulama isareti, sosyal oge yok. Rozet yigmak karti gurultuye cevirir.
   ------------------------------------------------------------------------- */
.st-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:24px;}
.st-logo{width:88px;height:88px;border-radius:16px;object-fit:cover;border:1px solid var(--border);}
.st-logo-empty{background:var(--surface);}
.st-id{flex:1;min-width:220px;}
.st-name{margin:0 0 6px;font-size:26px;line-height:1.2;color:var(--text);}
.st-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.st-type{background:var(--brand);color:#fff;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700;}
.st-verified{
  border:1px solid var(--border);color:var(--muted);border-radius:999px;
  padding:3px 12px;font-size:13px;font-weight:600;
}
.st-where,.st-count{color:var(--muted);font-size:14px;}
.st-about,.st-brands{margin-bottom:24px;}
.st-about h2,.st-brands h2,.st-section{font-size:18px;color:var(--text);margin:0 0 10px;}
.st-about p{color:var(--muted);line-height:1.6;margin:0;}
.st-brand-row{display:flex;gap:8px;flex-wrap:wrap;}
.st-brand{
  border:1px solid var(--border);border-radius:8px;padding:5px 12px;
  font-size:14px;color:var(--text);background:var(--surface);
}
.st-section{margin-top:8px;}
@media (max-width:640px){
  .st-head{gap:14px;}
  .st-logo{width:64px;height:64px;}
  .st-name{font-size:21px;}
}


/* ===== SOURCE: bustop-v222-hotfix.css ===== */
/* .mk-search .btn genislik kurali KALDIRILDI — Transit Grid katmani sahibi.
   Arama satiri mobilde artik YIGILMIYOR; `width:100%` butonu kabin tamamina
   yayip girdi alanini 28px'e dusuruyor ve kutuyu tasiriyordu (olculdu:
   buton 331px / kap 349px). Kutu modeli `bustop-transit-grid.web.css`'te. */
/* NOT (Transit Grid Faz 2): bu dosyadaki `!important` bayraklari kaldirildi.
   Tek amaclari diger eski stil dosyalarina karsi override savasi kazanmakti.
   Bilesenlerin hedef degerini artik bustop-transit-grid.web.css tanimliyor
   ve o EN SON yukleniyor; bayraklar yalnizca yeni dili blokluyordu.
   `prefers-reduced-motion` bloklarindaki bayraklar KORUNDU. */
/* BusTop v2.2.2 — live recovery, interaction and visual QA hotfix */
:root{--bt-page-max:1180px;--bt-feed-max:650px;}

/* JS yüklenemese bile ana sayfa görünür kalır. */
.reveal{opacity:1;transform:none;}

/* Hata ekranı */
.error-card{max-width:760px;margin:36px auto;padding:30px;border-radius:22px;}
.bt-error-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.bt-error-detail{margin:14px 0;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--bg);}
.bt-error-detail summary{cursor:pointer;font-weight:750;color:var(--primary);}

/* Public home */
.premium-hero{min-height:auto;padding:84px 0 72px;}
.premium-hero .hero-grid{align-items:center;gap:54px;}
.premium-hero .hero-copy{max-width:680px;}
.premium-hero .hero-copy h1{font-size:clamp(42px,5.6vw,76px);line-height:1.02;letter-spacing:-.055em;}
.premium-hero .hero-copy .lead{font-size:clamp(17px,2vw,21px);line-height:1.65;max-width:720px;}
.premium-hero .hero-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* Login — iki panel birbirine taşmasın */
.login-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.85fr);align-items:stretch;}
.login-brand-panel,.login-form-panel{min-width:0;}
.login-form-panel{display:flex;align-items:center;justify-content:center;padding:38px;background:var(--surface);}
.login-card{width:min(100%,460px);max-width:460px;margin:0;padding:28px;position:relative;inset:auto;transform:none;}
.login-card-header{margin-bottom:20px;}
.login-card-header h1{font-size:30px;line-height:1.1;}
.login-form{display:grid;gap:14px;}
.login-field{display:grid;gap:7px;}
.login-field label{font-weight:700;font-size:13px;}
.login-remember-row{margin:0;}

/* Discover */
.discover-page,.discover-wrap,.discover-layout{width:min(calc(100% - 24px),var(--bt-page-max));margin-inline:auto;}
.discover-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;}
.discover-grid,.profile-discover-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.discover-card,.profile-discover-card{min-width:0;border-radius:20px;overflow:hidden;}
.discover-filters,.discover-sort,.discover-tabs{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
.discover-filters a,.discover-sort a,.discover-tabs a{flex:0 0 auto;white-space:nowrap;}

/* Marketplace / jobs */
.mk-wrap{width:min(calc(100% - 24px),var(--bt-page-max));max-width:var(--bt-page-max);margin-inline:auto;}
.mk-head{padding:24px 28px;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-sm);align-items:center;}
.mk-h1{display:flex;align-items:center;gap:12px;font-size:clamp(30px,4vw,44px);}
.mk-h1::before{content:"";width:4px;height:36px;border-radius:99px;background:var(--primary);}
.mk-search{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px) auto;gap:10px;padding:8px;margin:16px 0 10px;}
.mk-search input{min-width:0;background:var(--bg);border-radius:12px;padding:0 14px;}
.mk-search .btn{min-width:120px;}
.mk-chips{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 0 12px;margin-bottom:14px;scroll-snap-type:x proximity;}
.mk-chip{flex:0 0 auto;width:auto;min-width:max-content;max-width:none;white-space:nowrap;word-break:normal;overflow-wrap:normal;line-height:1;padding:11px 15px;border-radius:999px;scroll-snap-align:start;}
.mk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;}
.mk-card{display:block;width:100%;min-width:0;color:inherit;text-decoration:none;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--border);}
.mk-card-img{aspect-ratio:16/10;}
.mk-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:48px;margin:0 0 12px;font-size:18px;line-height:1.32;color:var(--text);text-decoration:none;}
.mk-card-title:empty::after{content:"İlan başlığı belirtilmemiş";color:var(--muted);}
.mk-price{font-size:23px;color:var(--primary);margin-bottom:8px;}
.mk-meta{min-height:20px;}
.mk-city{padding-top:12px;margin-top:12px;border-top:1px solid var(--border);}
.mk-empty{min-height:230px;display:grid;place-content:center;}

/* Form stüdyoları */
.bt-file-field__input{pointer-events:auto;}
.bt-file-field__drop{width:100%;}
.bt-file-field__preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;}

/* Social feed */
.bt-social-page{min-height:calc(100dvh - 74px);}
.bt-social-shell{width:min(1120px,calc(100% - 24px));}
.bt-social-post{overflow:hidden;}
.bt-post-carousel__track{touch-action:pan-y pinch-zoom;}
.bt-post-carousel__slide img,.bt-post-carousel__slide video{max-width:100%;}
.bt-inline-comment-form button{min-width:58px;}

/* Reels */
.bt-reels-page{min-height:calc(100dvh - 74px);}
.bt-reel-card{isolation:isolate;}
.bt-reel-video{background:#020617;}

/* Buttons */
button,.btn,a[role="button"]{touch-action:manipulation;}
button:disabled,.btn:disabled{opacity:.62;cursor:not-allowed;}

/* Theme */
[data-theme="dark"] body{background:var(--bg);color:var(--text);}
[data-theme="dark"] .mk-head,[data-theme="dark"] .login-form-panel{background:var(--surface);}

@media (max-width:1024px){
  .login-split{grid-template-columns:1fr 1fr;}
  .discover-layout{grid-template-columns:minmax(0,1fr);}
  .discover-side{display:none;}
  .discover-grid,.profile-discover-grid,.mk-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .premium-hero{padding:48px 0 42px;}
  .premium-hero .hero-grid{grid-template-columns:1fr;gap:28px;}
  .premium-hero .hero-copy h1{font-size:clamp(38px,12vw,56px);}
  .hero-visual{display:none;}
  .login-page-wrap{padding:10px;}
  .login-split{display:block;min-height:auto;border-radius:22px;}
  .login-brand-panel{display:none;}
  .login-form-panel{padding:12px;}
  .login-card{padding:22px 18px;border:0;box-shadow:none;}
  .mk-wrap{width:min(calc(100% - 14px),100%);padding-inline:0;}
  .mk-head{padding:18px;border-radius:18px;align-items:stretch;}
  .mk-head>.btn{width:100%;}
  .mk-search{grid-template-columns:minmax(0,1fr);}
  .mk-grid,.discover-grid,.profile-discover-grid{grid-template-columns:minmax(0,1fr);}
  .mk-card-img{aspect-ratio:16/9;}
  .bt-social-shell{width:100%;}
  .bt-error-actions>*{flex:1 1 150px;}
}
@media (max-width:420px){
  .mk-head{padding:16px;}
  .mk-h1{font-size:30px;}
  .mk-chip{font-size:12px;padding:10px 13px;}
  .login-card-header h1{font-size:26px;}
}


/* ===== SOURCE: bustop-v224-release.css ===== */
/* .mk-search .btn genislik kurali KALDIRILDI — Transit Grid katmani sahibi.
   Arama satiri mobilde artik YIGILMIYOR; `width:100%` butonu kabin tamamina
   yayip girdi alanini 28px'e dusuruyor ve kutuyu tasiriyordu (olculdu:
   buton 331px / kap 349px). Kutu modeli `bustop-transit-grid.web.css`'te. */
/* NOT (Transit Grid Faz 2): bu dosyadaki `!important` bayraklari kaldirildi.
   Tek amaclari diger eski stil dosyalarina karsi override savasi kazanmakti.
   Bilesenlerin hedef degerini artik bustop-transit-grid.web.css tanimliyor
   ve o EN SON yukleniyor; bayraklar yalnizca yeni dili blokluyordu.
   `prefers-reduced-motion` bloklarindaki bayraklar KORUNDU. */
/* BusTop v2.2.4 — full release QA polish */

/* Global geometry guards */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
body { position:relative; }
body.bt-modal-open { overflow:hidden; touch-action:none; }
*, *::before, *::after { box-sizing:border-box; }
img, video, canvas, svg { max-width:100%; }
:is(.app-main,.page-content,.container,.section,.card,.mk-wrap,.mk-grid,.mk-card,.job-card,.listing-card,.bt-social-shell,.bt-social-main,.bt-social-feed,.bt-social-post,.bt-reels-page,.bt-reels-feed,.bt-reel-card,.dm-page,.dm-layout,.dm-conv-list,.dm-chat-area,.profile-page,.discover-page) { min-width:0; }

/* Do not split category labels into vertical letters */
:is(.mk-chips,.vitrin-filter-scroll,.bt-social-filter-row,.discover-tabs,.discover-filters,.tab-row) {
  max-width:100%; overflow-x:auto; overflow-y:hidden; display:flex; flex-wrap:nowrap; gap:8px;
  scroll-snap-type:x proximity; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
:is(.mk-chips,.vitrin-filter-scroll,.bt-social-filter-row,.discover-tabs,.discover-filters,.tab-row)::-webkit-scrollbar { display:none; }
:is(.mk-chip,.vitrin-filter-chip,.bt-filter-chip,.discover-tab,.tab-row > a) {
  flex:0 0 auto; min-width:max-content; max-width:none; white-space:nowrap;
  word-break:normal; overflow-wrap:normal; text-wrap:nowrap;
}

/* Search and filter forms */
.mk-search { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,240px) auto; gap:10px; align-items:stretch; }
.mk-search > * { min-width:0; }
.mk-search .btn { width:auto; min-width:112px; }
.mk-grid { align-items:stretch; }
.mk-card { height:100%; min-width:0; }
.mk-card-title { min-height:2.7em; line-height:1.35; overflow-wrap:anywhere; }
.mk-card-body { min-width:0; }
.mk-price { overflow-wrap:anywhere; }
.mk-meta,.mk-city { white-space:normal; }

/* Share sheet: show complete post URL, never a misleading truncated base URL */
.bt-share-sheet { overflow:hidden; }
.bt-share-sheet__panel { width:min(470px,calc(100vw - 24px)); max-height:min(92dvh,700px); overflow:auto; }
.bt-share-link { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.bt-share-link textarea {
  display:block; width:100%; min-width:0; min-height:64px; resize:none; overflow:auto;
  padding:10px 12px; border:1px solid var(--bt-social-line); border-radius:10px;
  background:var(--bt-social-surface); color:var(--bt-social-ink); font:500 12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
  overflow-wrap:anywhere; word-break:break-all;
}
.bt-share-link__actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.bt-share-link__actions a,.bt-share-link__actions button {
  min-height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px;
  padding:0 13px; font-weight:750; text-decoration:none;
}
.bt-share-link__actions a { color:var(--bt-social-blue); border:1px solid var(--bt-social-line); background:var(--bt-social-surface); }
.bt-share-link__actions button { border:0; background:var(--bt-social-blue); color:#fff; }

/* Carousel stays inside the post; page itself never drifts horizontally */
.bt-post-carousel { position:relative; width:100%; max-width:100%; overflow:hidden; contain:layout paint; touch-action:pan-y pinch-zoom; }
.bt-post-carousel__track { display:flex; width:100%; max-width:100%; will-change:transform; }
.bt-post-slide { flex:0 0 100%; width:100%; min-width:100%; max-width:100%; overflow:hidden; }
.bt-post-slide :is(img,video) { display:block; width:100%; height:auto; max-width:100%; }

/* Reels/Clips: a real single-viewport experience */
.page-clips .global-search-bar-wrap,
.page-clips .footer { display:none; }
.page-clips .app-main { padding:0; min-height:100dvh; background:#05080d; overflow:hidden; }
.page-clips .bt-reels-page {
  min-height:100dvh; height:100dvh; padding:14px 18px; background:#05080d; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr);
}
.page-clips .bt-reels-header { width:min(520px,100%); margin:0 auto 10px; min-height:50px; }
.page-clips .bt-reels-feed {
  width:min(520px,100%); height:100%; min-height:0; margin:0 auto; overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; overscroll-behavior-y:contain; scrollbar-width:none;
}
.page-clips .bt-reels-feed::-webkit-scrollbar { display:none; }
.page-clips .bt-reel-card {
  width:100%; height:100%; min-height:100%; max-height:none; aspect-ratio:auto; margin:0 0 14px;
  scroll-snap-align:start; scroll-snap-stop:always; border-radius:22px;
}
.page-clips .bt-reel-video { width:100%; height:100%; object-fit:contain; background:#000; }
.page-clips .bt-reel-info { right:86px; }
.page-clips .bt-reel-actions { bottom:28px; }
.page-clips .bt-reel-comments-panel { max-height:76%; }

/* Prevent desktop clip stage from looking like an endless empty black canvas */
@media (min-width:981px) {
  .page-clips .app-main { background:radial-gradient(circle at 50% 45%,#121a28 0,#070b12 48%,#03060a 100%); }
  .page-clips .bt-reels-page { background:transparent; }
  .page-clips .bt-reel-card { box-shadow:0 28px 90px rgba(0,0,0,.45); border-color:rgba(255,255,255,.14); }
}

/* Messages */
.dm-layout { width:100%; max-width:1180px; margin-inline:auto; }
.dm-conv-item,.dm-chat-header { min-width:0; }
.dm-conv-name,.dm-conv-last,.dm-chat-header-info { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.dm-chat-messages { overscroll-behavior:contain; }
.dm-bubble { overflow-wrap:anywhere; word-break:break-word; }

/* Login/register visual alignment */
.login-shell,.auth-shell,.login-layout { width:min(100%,1100px); margin-inline:auto; }
.login-card,.auth-card { min-width:0; }
.login-panel,.login-form-panel { min-width:0; }
.login-form-panel form,.login-card form { width:100%; min-width:0; }

/* Admin and data tables */
.table-card,.table-wrap,.admin-table-wrap { width:100%; max-width:100%; overflow:auto; overscroll-behavior:contain; }
table { max-width:100%; }

/* Empty/error states */
:is(.mk-empty,.empty-state,.error-card,.bt-social-empty,.bt-reels-empty,.dm-empty-chat,.dm-empty-conv) { max-width:100%; overflow-wrap:anywhere; }

/* Mobile layout */
@media (max-width:768px) {
  body.is-app { padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
  .app-main { width:100%; max-width:100%; }
  .container { width:100%; max-width:100%; padding-left:12px; padding-right:12px; }
  .mk-search { grid-template-columns:minmax(0,1fr); }
  .mk-grid { grid-template-columns:minmax(0,1fr); }
  .mk-card-title { min-height:0; }
  .bt-share-sheet { align-items:flex-end; padding:0; }
  .bt-share-sheet__panel { width:100%; max-width:100%; border-radius:22px 22px 0 0; padding-bottom:max(18px,env(safe-area-inset-bottom)); }
  .bt-share-sheet__options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bt-share-option { min-width:0; padding:8px 5px; }
  .bt-share-option span { white-space:normal; text-align:center; overflow-wrap:anywhere; }

  .page-clips .ig-sidebar,.page-clips .app-sidebar { display:none; }
  .page-clips .app-shell,.page-clips .ig-app-layout { display:block; }
  .page-clips .app-main { min-height:calc(100dvh - 58px - 64px - env(safe-area-inset-bottom,0px)); height:calc(100dvh - 58px - 64px - env(safe-area-inset-bottom,0px)); }
  .page-clips .bt-reels-page { min-height:100%; height:100%; padding:0; grid-template-rows:minmax(0,1fr); }
  .page-clips .bt-reels-header {
    position:absolute; z-index:8; top:max(8px,env(safe-area-inset-top,0px)); left:12px; right:12px;
    width:auto; margin:0; pointer-events:none; color:#fff;
  }
  .page-clips .bt-reels-header > a { pointer-events:auto; }
  .page-clips .bt-reels-feed { width:100%; height:100%; }
  .page-clips .bt-reel-card { height:100%; min-height:100%; border-radius:0; border-left:0; border-right:0; margin:0; }
  .page-clips .bt-reel-video { object-fit:cover; }
  .page-clips .bt-reel-info { left:14px; right:82px; bottom:18px; }
  .page-clips .bt-reel-actions { right:8px; bottom:88px; }
  .page-clips .bt-reel-comments-panel { max-height:78%; border-radius:22px 22px 0 0; }

  .dm-layout { display:block; }
  .dm-layout.has-active-conv .dm-conv-list { display:none; }
  .dm-layout.no-active-conv .dm-chat-area { display:none; }
  .dm-chat-area { min-height:calc(100dvh - 132px - env(safe-area-inset-bottom,0px)); }
  .dm-chat-form { position:sticky; bottom:0; }
}

@media (max-width:430px) {
  .bt-share-sheet__options { gap:7px; }
  .bt-share-option { min-height:84px; font-size:11px; }
  .bt-share-link__actions { display:grid; grid-template-columns:1fr 1fr; }
  .bt-share-link__actions > * { width:100%; }
  .vitrin-feed-actions,.bt-post-actions > div { gap:5px; }
  .bt-post-action,.vfa { min-width:42px; }
}

/* Dark theme consistency */
[data-theme="dark"] .bt-share-link textarea { background:#111827; color:#e5edf8; border-color:#293750; }
[data-theme="dark"] .bt-share-link__actions a { background:#111827; border-color:#293750; color:#7db5ff; }
[data-theme="dark"] .mk-card,[data-theme="dark"] .job-card,[data-theme="dark"] .listing-card { border-color:#26334a; }
.dm-form-inner > button { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
/* Dark mode hardening for pages that previously kept light inline/card styles */
[data-theme="dark"] :is(.card,.login-card,.auth-card,.qa-profile,.mk-card,.job-card,.listing-card,.table-card,.dm-conv-list,.dm-chat-area,.profile-card,.discover-card) {
  background:var(--card); color:var(--text); border-color:var(--border);
}
[data-theme="dark"] :is(input,select,textarea) {
  background:var(--bg-dark); color:var(--text); border-color:var(--border-dark);
}
[data-theme="dark"] :is(input,textarea)::placeholder { color:var(--muted); opacity:1; }
[data-theme="dark"] table :is(th,td) { border-color:var(--border); }
[data-theme="dark"] .mk-card,
[data-theme="dark"] .job-card,
[data-theme="dark"] .listing-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .dm-conv-list,
[data-theme="dark"] .dm-chat-area,
[data-theme="dark"] .login-card,
[data-theme="dark"] .auth-card {
  border:1px solid #273349;
  background:#1B2438;
  color:#F1F5F9;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  border:1px solid #334155;
  background:#070B16;
  color:#F1F5F9;
}


/* ===== SOURCE: bustop-sidebar-fix.css ===== */
/* ═══════════════════════════════════════════════════════════════════════════
   BusTop — MASAÜSTÜ SOL SIDEBAR SABİTLEME
   ═══════════════════════════════════════════════════════════════════════════

   KÖK NEDEN (gerçek tarayıcı ölçümüyle kanıtlandı, 1280×720, Vitrin sayfası
   12.665px yükseklik):

     scrollY=0     → .ig-sidebar üst kenarı    42px
     scrollY=500   → üst kenar               -458px
     scrollY=3000  → üst kenar              -2958px
     scrollY=8000  → üst kenar              -7958px

   Yani sidebar sayfayla BİREBİR kayıyor; `style.css:5326`'daki
   `position: sticky; top: 0` TAMAMEN ETKİSİZ.

   Sebep: `html, body { overflow-x: hidden }`
     · assets/css/bustop-responsive-pro.css:18
     · assets/css/bustop-v224-release.css:4   (!important ile)

   CSS spesifikasyonuna göre bir eksende `overflow` `visible` dışında bir değer
   alırsa DİĞER eksen `auto`'ya hesaplanır. Ölçümle doğrulandı: `html` ve `body`
   üzerinde `overflow-x: hidden`, `overflow-y: auto`. Böylece `html`/`body` bir
   KAYDIRMA KONTEYNERİNE dönüşüyor; `position: sticky` elemanın referans aldığı
   "scrollport" artık viewport değil bu konteyner oluyor. Sticky'nin kabı
   (`.app-shell`) da aynı konteynerin içinde ve onunla birlikte kaydığı için
   sticky'ye hiç hareket aralığı kalmıyor — eleman `position: relative` gibi
   davranıyor.

   `overflow-x: hidden` KALDIRILMADI: yatay taşmayı engellemek için bilinçli
   konmuş (mobilde yan kaydırmayı önlüyor) ve `!important` ile korunuyor.
   Kaldırmak mobil düzende regresyon riski taşır.

   ÇÖZÜM: masaüstünde sidebar `position: fixed`. `fixed`, sticky'nin aksine
   scrollport'a değil VIEWPORT'a bağlanır, dolayısıyla `overflow-x: hidden`
   bunu etkilemez. `position: fixed`'i bozabilecek ata (transform / filter /
   perspective / contain) olup olmadığı da ölçüldü: `.app-shell` → `body` →
   `html` zincirinde HİÇBİRİ yok.

   `fixed` elemanı akıştan çıkardığı için içerik kolonu 240px'lik yerini
   kaybeder; bu yüzden `.app-shell`'e sidebar genişliği kadar `padding-left`
   veriliyor (her breakpoint'te sidebar'ın GERÇEK genişliğiyle aynı değer).

   YÜKLEME SIRASI: bu dosya layout.php'de EN SON yükleniyor; `!important`
   savaşına girmeden style.css ve v224 kurallarını geçiyor.

   MOBİL DOKUNULMADI: tüm kurallar `@media (min-width: 769px)` içinde.
   768px altında sidebar `display: none` + `.ig-sidebar.mobile-open` drawer'ı
   aynen çalışmaya devam ediyor.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {

  /* ── Sabit sidebar ────────────────────────────────────────────────────────
     top/bottom birlikte verildiği için yükseklik TÜRETİLİYOR: sidebar her
     zaman fiziksel viewport'un dibine kadar uzuyor. `height: 100vh` yerine bu
     yol seçildi çünkü 100vh mobil tarayıcı adres çubuğu ve masaüstünde yatay
     kaydırma çubuğu durumlarında viewport'tan taşabiliyor (ölçümde scrollY=0'da
     42px taşıyordu ve "Çıkış" düğmesi y=793'te, 720px'lik viewport'un ALTINDA
     kalıyordu — yani erişilemiyordu).                                        */
  .ig-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;          /* top+bottom yüksekliği belirliyor */
    max-height: none;
    /* Kendi içeriği taşarsa sidebar KENDİ İÇİNDE kayar (sayfa kaymaz). */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  /* İçerik kolonu sidebar'ın altına girmesin: sabitlenen genişlik kadar offset.
     Değer her breakpoint'te sidebar'ın gerçek genişliğiyle birebir aynı. */
  .app-shell {
    padding-left: 240px;
  }

  /* Sidebar'ın gizlendiği sayfalarda (ör. tam ekran klip görüntüleyici)
     boşluk kalmasın — v224 `.page-clips .ig-sidebar { display:none }` diyor. */
  .page-clips .app-shell {
    padding-left: 0;
  }

  /* ── 769–1024px: dar (yalnız ikon) sidebar — style.css'te width: 72px ──── */
  @media (max-width: 1024px) {
    .app-shell { padding-left: 72px; }
  }
}

/* ── Erişilebilirlik / kullanılabilirlik ayrıntıları ──────────────────────── */
@media (min-width: 769px) {
  /* Sidebar kendi içinde kayarken alttaki eylemler (Ara / Koyu Tema / Çıkış)
     her zaman ulaşılabilir olsun: içerik viewport'tan uzunsa ince bir kaydırma
     çubuğu görünür, kısa ekranlarda da alt blok kırpılmaz. */
  .ig-sidebar-inner {
    min-height: 100%;
    height: auto;
  }

  /* E-posta doğrulama bandı akışta ve sayfayla kayıyor; sabit sidebar onun
     üstüne binmesin diye bandı üste alıyoruz. Yalnız e-postası doğrulanmamış
     kullanıcıda ve yalnız sayfa başındayken görünür bir durum. */
  .email-verify-banner {
    position: relative;
    z-index: 131;   /* .ig-sidebar z-index: 110 */
  }
}


/* ===== SOURCE: bustop-transit-grid.tokens.css ===== */
/* BusTop Transit Grid — production token source */
:root{
  --tg-font-ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --tg-font-display:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --tg-font-numeric:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --tg-brand:#1D4ED8;--tg-brand-strong:#1E40AF;--tg-brand-soft:#EFF4FF;--tg-brand-softer:#F6F8FF;--tg-brand-border:#BFD3FF;--tg-brand-panel:#E7EEFF;
  --tg-accent:#0EA5E9;--tg-accent-ink:#075985;
  --tg-success:#15803D;--tg-success-soft:#DCFCE7;--tg-success-border:#86EFAC;--tg-success-ink:#166534;
  --tg-warning-soft:#FEF3C7;--tg-warning-border:#FCD34D;--tg-warning-ink:#92400E;
  --tg-danger:#DC2626;--tg-danger-soft:#FEE2E2;--tg-danger-border:#FCA5A5;--tg-danger-ink:#991B1B;--tg-on-danger:#fff;
  --tg-info-soft:#E0F2FE;--tg-info-border:#7DD3FC;--tg-info-ink:#075985;
  --tg-canvas:#F7F9FC;--tg-surface:#FFFFFF;--tg-surface-raised:#FFFFFF;--tg-surface-sunken:#EEF2F8;
  --tg-ink:#0F172A;--tg-ink-secondary:#475569;--tg-ink-muted:#64748B;--tg-ink-inverse:#FFFFFF;--tg-ink-on-media:#FFFFFF;
  --tg-border:#E4E9F2;--tg-border-card:#DCE3EE;--tg-border-strong:#C9D3E3;--tg-divider:#E8EDF5;
  --tg-on-brand:#FFFFFF;--tg-on-brand-panel:#0F172A;--tg-focus:#2563EB;--tg-like:#EF4444;--tg-media:#08111F;--tg-media-chip:rgba(15,23,42,.72);--tg-media-shadow:0 10px 30px rgba(2,8,23,.16);--tg-scrim:rgba(2,8,23,.58);--tg-knob:#FFFFFF;
  --tg-space-1:4px;--tg-space-2:8px;--tg-space-3:12px;--tg-space-4:16px;--tg-space-5:20px;--tg-space-6:24px;--tg-space-8:32px;--tg-space-10:40px;--tg-space-12:48px;
  --tg-r-sm:8px;--tg-r-md:12px;--tg-r-lg:16px;--tg-r-xl:20px;--tg-r-pill:999px;
  --tg-hairline:1px;--tg-stroke:2px;--tg-tap-min:48px;--tg-tap-compact:40px;
  --tg-fs-display:40px;--tg-lh-display:48px;--tg-fs-screen:32px;--tg-lh-screen:40px;--tg-fs-section:24px;--tg-lh-section:32px;--tg-fs-card:18px;--tg-lh-card:24px;--tg-fs-body:16px;--tg-lh-body:24px;--tg-fs-button:15px;--tg-lh-button:20px;--tg-fs-meta:14px;--tg-lh-meta:20px;--tg-fs-caption:12px;--tg-lh-caption:16px;--tg-fs-label:11px;--tg-lh-label:16px;--tg-ls-label:.07em;--tg-fs-price:30px;--tg-lh-price:36px;--tg-fs-metric:17px;--tg-lh-metric:22px;--tg-fs-metadata:12px;--tg-lh-metadata:16px;
  --tg-fw-regular:400;--tg-fw-medium:500;--tg-fw-semi:600;--tg-fw-bold:700;
  --tg-content-max:1180px;--tg-reading-max:760px;--tg-gutter:20px;
  --tg-rail-w:2px;--tg-rail-color:#CBD5E1;--tg-rail-active:#1D4ED8;--tg-stop-size:12px;--tg-stop-ring:4px;
  --tg-dur-press:90ms;--tg-dur-state:160ms;--tg-dur-toggle:220ms;--tg-ease:cubic-bezier(.2,.8,.2,1);
  --tg-elev-pop:0 8px 24px rgba(15,23,42,.10);--tg-elev-float:0 12px 32px rgba(15,23,42,.12);--tg-elev-sheet:0 -12px 40px rgba(15,23,42,.16);--tg-elev-modal:0 24px 64px rgba(15,23,42,.20);
}
:root[data-theme="dark"]{
  --tg-brand:#5B9BFF;--tg-brand-strong:#79ACFF;--tg-brand-soft:#122848;--tg-brand-softer:#0E2039;--tg-brand-border:#294D78;--tg-brand-panel:#17345A;
  --tg-accent:#38BDF8;--tg-accent-ink:#BAE6FD;
  --tg-success:#4ADE80;--tg-success-soft:#0D2A19;--tg-success-border:#166534;--tg-success-ink:#86EFAC;
  --tg-warning-soft:#2D2000;--tg-warning-border:#854D0E;--tg-warning-ink:#FCD34D;
  --tg-danger:#F87171;--tg-danger-soft:#321719;--tg-danger-border:#7F1D1D;--tg-danger-ink:#FCA5A5;
  --tg-info-soft:#0C2A3C;--tg-info-border:#075985;--tg-info-ink:#7DD3FC;
  --tg-canvas:#091422;--tg-surface:#101E2F;--tg-surface-raised:#13253A;--tg-surface-sunken:#07111D;
  --tg-ink:#F4F8FD;--tg-ink-secondary:#B6C6D8;--tg-ink-muted:#8FA1B7;--tg-ink-inverse:#091422;
  --tg-border:#293C52;--tg-border-card:#30465F;--tg-border-strong:#3C5570;--tg-divider:#24364B;
  --tg-on-brand:#07111D;--tg-on-brand-panel:#F4F8FD;--tg-focus:#79ACFF;--tg-media:#02060C;--tg-media-chip:rgba(2,6,12,.74);--tg-scrim:rgba(0,0,0,.66);--tg-knob:#F4F8FD;
  --tg-rail-color:#3A506A;--tg-rail-active:#5B9BFF;
  --tg-elev-pop:0 8px 24px rgba(0,0,0,.28);--tg-elev-float:0 12px 32px rgba(0,0,0,.34);--tg-elev-sheet:0 -12px 40px rgba(0,0,0,.42);--tg-elev-modal:0 24px 64px rgba(0,0,0,.48);
}
@media(max-width:600px){:root{--tg-gutter:16px;--tg-fs-display:34px;--tg-lh-display:40px;--tg-fs-screen:28px;--tg-lh-screen:34px;--tg-fs-section:22px;--tg-lh-section:28px;--tg-fs-price:28px;--tg-lh-price:34px}}


/* ===== SOURCE: bustop-transit-grid.bridge.css ===== */
/* BusTop Transit Grid — compatibility bridge for legacy production selectors */
:root{
  --primary:var(--tg-brand);--primary-dark:var(--tg-brand-strong);--primary-hover:var(--tg-brand-strong);--primary-light:var(--tg-brand-soft);--primary-mid:var(--tg-brand-border);--primary-tint:var(--tg-brand-panel);
  --brand:var(--tg-brand);--brand-hover:var(--tg-brand-strong);--brand-soft:var(--tg-brand-soft);--brand-tint:var(--tg-brand-panel);
  --bg:var(--tg-canvas);--bg-alt:var(--tg-surface-sunken);--bg-dark:var(--tg-surface-sunken);--bg-card:var(--tg-surface);--surface:var(--tg-surface);--surface-2:var(--tg-surface-raised);--card:var(--tg-surface);--card-bg:var(--tg-surface);--muted-bg:var(--tg-surface-sunken);
  --border:var(--tg-border);--border-dark:var(--tg-border-strong);--border-strong:var(--tg-border-strong);
  --text:var(--tg-ink);--text-2:var(--tg-ink-secondary);--text-muted:var(--tg-ink-muted);--muted:var(--tg-ink-muted);--muted-color:var(--tg-ink-muted);--muted-2:var(--tg-ink-muted);--muted-light:var(--tg-ink-muted);
  --font:var(--tg-font-ui);--primary-rgb:29,78,216;--radius:var(--tg-r-md);--r-sm:var(--tg-r-sm);--r:var(--tg-r-md);--r-lg:var(--tg-r-lg);--r-xl:var(--tg-r-xl);--r-full:var(--tg-r-pill);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);--shadow:0 2px 8px rgba(15,23,42,.06);--shadow-md:var(--tg-elev-pop);--shadow-lg:var(--tg-elev-float);
  --bt-brand:var(--tg-brand);--bt-brand-strong:var(--tg-brand-strong);--bt-brand-soft:var(--tg-brand-soft);--bt-navy:var(--tg-ink);--bt-copy:var(--tg-ink-secondary);--bt-border:var(--tg-border);--bt-surface:var(--tg-surface);--bt-canvas:var(--tg-canvas);--bt-radius:var(--tg-r-md);--bt-radius-lg:var(--tg-r-lg);
}


/* ===== SOURCE: bustop-transit-grid.components.css ===== */
/* ============================================================================
   BUSTOP TRANSIT GRID — COMPONENT LAYER (v3)
   ----------------------------------------------------------------------------
   Namespace: .tg-*   Bagimlilik: bustop-transit-grid.tokens.css

   BU DOSYADA HAM DEGER YOKTUR.
   Renk, olcu, yaricap, sure — hepsi --tg-* token'indan okunur. Tek istisna:
   0, 100%, 50% gibi konumsal degerler ve `1px` hairline hesaplari.

   URETIM ETKISI: sifir. Hicbir uretim sinifi (.card, .btn, .listing-card,
   .bt-*, .mk-*) bu dosyada gecmiyor; yalniz .tg-* tanimlaniyor.
   ========================================================================== */

/* == 0. KOK ================================================================
   .tg-root tasiyan her kap bu dilin icine girer. Global reset YAPILMAZ —
   boylece dosya uretim sayfasina yuklense bile disari sizmaz. */
.tg-root {
  font-family: var(--tg-font-ui);
  font-size: var(--tg-fs-body);
  line-height: var(--tg-lh-body);
  color: var(--tg-ink);
  background: var(--tg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;   /* fiyat/KM kolonlari kaymasin */
}
.tg-root *, .tg-root *::before, .tg-root *::after { box-sizing: border-box; }
.tg-root img, .tg-root svg, .tg-root video { max-width: 100%; display: block; }

/* Odak halkasi — TEK bir tanim. Her bilesende yeniden yazilmaz. */
.tg-root :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--tg-stroke) solid var(--tg-focus);
  outline-offset: 2px;
  border-radius: var(--tg-r-sm);
}

/* == 1. TIPOGRAFI ROLLERI ==================================================
   Ekran kendi font-size'ini SECMEZ, rol secer. Yeni bir boyut gerekiyorsa
   once "hangi rol eksik" sorusu sorulur. */
.tg-display  { font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; margin: 0; }
.tg-screen   { font-size: var(--tg-fs-screen);  line-height: var(--tg-lh-screen);  font-weight: var(--tg-fw-bold); letter-spacing: -.015em; margin: 0; }
.tg-section  { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); letter-spacing: -.01em; margin: 0; }
.tg-cardtitle{ font-size: var(--tg-fs-card);    line-height: var(--tg-lh-card);    font-weight: var(--tg-fw-bold); letter-spacing: -.005em; margin: 0; }
.tg-body     { font-size: var(--tg-fs-body);    line-height: var(--tg-lh-body);    font-weight: var(--tg-fw-regular); margin: 0; }
.tg-body-strong { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body);    font-weight: var(--tg-fw-semi); margin: 0; }
.tg-meta     { font-size: var(--tg-fs-meta);    line-height: var(--tg-lh-meta);    font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary); margin: 0; }
.tg-caption  { font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption); font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary); margin: 0; }

/* Fiyat — ekrandaki en yuksek sesli oge. Negatif harf araligi uzun TL
   tutarlarini (4.200.000) tek blok halinde okutur, dagitmaz. */
.tg-price    { font-size: var(--tg-fs-price); line-height: var(--tg-lh-price); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-ink); margin: 0; }
.tg-price--compact { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }

/* Metrik — BARLOW CONDENSED. YALNIZ sayisal tasima bilgisi. Paragraf DEGIL.
   Sikistirilmis genislik yan yana dizilen yil/KM/koltuk degerlerini ayni
   optik ritimde tutar; bu, arac bilgi panosu hissinin kaynagidir. */
.tg-metric   { font-family: var(--tg-font-numeric); font-size: var(--tg-fs-metric); line-height: var(--tg-lh-metric); font-weight: var(--tg-fw-semi); letter-spacing: .01em; font-variant-numeric: tabular-nums; margin: 0; }

.tg-ink-2 { color: var(--tg-ink-secondary); }
.tg-ink-3 { color: var(--tg-ink-muted); }

/* == 2. IKON ===============================================================
   Tek aile: 24 kutu, 2px cizgi, yuvarlak uc, yuvarlak birlesim.
   Aktif durum DOLGU ile de anlatilir — yalniz renkle degil (renk korlugu). */
/* CIZIM OZELLIKLERI KOKTE TANIMLANIR — icerideki sekillere DEGIL.
   NEDEN: `<use>` bir golge agac (shadow tree) olusturur; `.tg-icon [data-stroke]`
   gibi seciciler oraya ULASMAZ (ikonlar siyah blok olarak cizilir). Ama
   `fill`, `stroke`, `stroke-width` KALITILAN ozelliklerdir ve golge agaca
   gecer. Bu yuzden aile kurallari svg kokunde durur, semboldeki sekiller de
   kendi ozniteligini yazmadigi surece bunlari devralir. */
.tg-icon {
  display: block; width: var(--tg-space-6); height: var(--tg-space-6);
  flex: none; color: inherit;
  fill: none; stroke: currentColor; stroke-width: var(--tg-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
/* DIKKAT: burada `svg.tg-icon` YAZILMAZ. Eleman+sinif secicisi (0,1,1)
   boyut siniflarini (0,1,0) ezer ve ikonlar kabi doldurur. Yalniz sarmalayici
   icindeki svg gerdirilir; `<svg class="tg-icon">` kendi olcusunu korur. */
.tg-icon > svg { width: 100%; height: 100%; display: block; }
.tg-icon--sm { width: var(--tg-space-5); height: var(--tg-space-5); }
.tg-icon--lg { width: var(--tg-space-8); height: var(--tg-space-8); }
/* Dolu (secili) durum: govde de boyanir. Kalitim yoluyla golge agaca gecer.
   `data-fill` tasiyan detaylar sembolde `fill="currentColor"` OZNITELIGI
   tasir; oznitelik kalitimi ezer, yani nokta/merkez her durumda dolu kalir. */
.tg-icon.is-filled { fill: currentColor; }

/* == 3. ROTA MOTIFI (imza) =================================================
   route line + stop dot. Ilerleme, adim, yolculuk ve bolum hiyerarsisi
   AYNI hatti kullanir — bu tekrar, kimligi kuran seydir.
   Dekoratif kullanilmaz: bir sey sirali degilse ray cizilmez. */
.tg-rail { position: relative; padding-left: var(--tg-space-6); }
.tg-rail::before {
  content: ""; position: absolute; left: calc(var(--tg-stop-size) / 2 - var(--tg-rail-w) / 2);
  top: var(--tg-space-2); bottom: var(--tg-space-2);
  width: var(--tg-rail-w); background: var(--tg-rail-color); border-radius: var(--tg-rail-w);
}
.tg-stop { position: relative; padding-bottom: var(--tg-space-5); }
.tg-stop:last-child { padding-bottom: 0; }
.tg-stop::before {
  content: ""; position: absolute; left: calc(-1 * var(--tg-space-6) + 0px);
  top: var(--tg-space-1); width: var(--tg-stop-size); height: var(--tg-stop-size);
  border-radius: var(--tg-r-pill);
  background: var(--tg-canvas); border: var(--tg-rail-w) solid var(--tg-rail-color);
}
.tg-stop.is-done::before    { background: var(--tg-rail-active); border-color: var(--tg-rail-active); }
.tg-stop.is-current::before { background: var(--tg-surface); border-color: var(--tg-rail-active); box-shadow: 0 0 0 var(--tg-stop-ring) var(--tg-brand-soft); }
.tg-stop__title { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); }
.tg-stop.is-todo .tg-stop__title { color: var(--tg-ink-secondary); font-weight: var(--tg-fw-medium); }

/* Yatay ray — bolum basligi ve kirilma yolu (breadcrumb) icin. */
.tg-railhead { display: flex; align-items: center; gap: var(--tg-space-3); }
.tg-railhead::before {
  content: ""; width: var(--tg-stop-size); height: var(--tg-stop-size); flex: none;
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
}
.tg-railhead::after { content: ""; flex: 1; height: var(--tg-rail-w); background: var(--tg-divider); border-radius: var(--tg-rail-w); }

/* == 4. YUZEY / KART =======================================================
   VARSAYILAN: duz yuzey + 1px kenarlik. GOLGE YOK.
   Golge yalniz fiziksel olarak yuzen ogede (.tg-sheet, .tg-modal, .tg-fab). */
.tg-surface { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); }
.tg-card    { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
.tg-card__body { padding: var(--tg-space-4); }
.tg-panel   { background: var(--tg-surface-raised); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-md); padding: var(--tg-space-4); }

/* == 5. BUTON AILESI =======================================================
   ALTI degil BES + bir yuzen. Hepsi ayni yukseklik ritmini ve ayni yaricapi
   paylasir; fark VURGU'dur, sekil degil. "Her buton hap" reddedildi:
   hap bicimi cip ve filtre gibi SECIM kontrollerine ayrildi. */
.tg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-5);
  font-family: var(--tg-font-ui); font-size: var(--tg-fs-button);
  line-height: var(--tg-lh-button); font-weight: var(--tg-fw-bold);
  border-radius: var(--tg-r-md); border: var(--tg-hairline) solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--tg-dur-state) var(--tg-ease),
              border-color var(--tg-dur-state) var(--tg-ease),
              color var(--tg-dur-state) var(--tg-ease),
              transform var(--tg-dur-press) var(--tg-ease);
}
.tg-btn:active { transform: scale(.98); }   /* 90ms basma geri bildirimi */
.tg-btn[disabled], .tg-btn.is-disabled { opacity: .45; pointer-events: none; }
.tg-btn .tg-icon { width: var(--tg-space-5); height: var(--tg-space-5); }

.tg-btn--primary   { background: var(--tg-brand); color: var(--tg-on-brand); }
.tg-btn--primary:hover  { background: var(--tg-brand-strong); }
.tg-btn--secondary { background: var(--tg-surface); color: var(--tg-brand); border-color: var(--tg-brand-border); }
.tg-btn--secondary:hover{ background: var(--tg-brand-soft); border-color: var(--tg-brand); }
.tg-btn--quiet     { background: transparent; color: var(--tg-ink-secondary); }
.tg-btn--quiet:hover    { background: var(--tg-surface-raised); color: var(--tg-ink); }
.tg-btn--danger    { background: var(--tg-danger); color: var(--tg-on-danger); }
.tg-btn--danger:hover   { filter: brightness(.94); }
.tg-btn--block     { display: flex; width: 100%; }
.tg-btn--sm        { min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4); font-size: var(--tg-fs-meta); }

/* Ikon buton — kare, etiketsiz. aria-label ZORUNLU. */
.tg-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-tap-min); height: var(--tg-tap-min);
  border-radius: var(--tg-r-md); border: 0; background: transparent;
  color: var(--tg-ink-secondary); cursor: pointer;
  transition: background var(--tg-dur-state) var(--tg-ease), color var(--tg-dur-state) var(--tg-ease), transform var(--tg-dur-press) var(--tg-ease);
}
.tg-btn-icon:hover  { background: var(--tg-surface-raised); color: var(--tg-ink); }
.tg-btn-icon:active { transform: scale(.94); }
.tg-btn-icon.is-active { color: var(--tg-brand); }

/* Yuzen aksiyon — GERCEKTEN yuzer, bu yuzden golgesi vardir. */
.tg-fab {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-space-12); padding: 0 var(--tg-space-5);
  background: var(--tg-brand); color: var(--tg-on-brand);
  border: 0; border-radius: var(--tg-r-pill);
  font-family: var(--tg-font-ui); font-size: var(--tg-fs-button); font-weight: var(--tg-fw-bold);
  box-shadow: var(--tg-elev-float); cursor: pointer;
  transition: transform var(--tg-dur-press) var(--tg-ease);
}
.tg-fab:active { transform: scale(.96); }

/* == 6. CIP / FILTRE =======================================================
   Hap bicimi BURAYA ayrildi: cip bir SECIMdir, bir aksiyon degil.
   Secili durum hem zemin hem kenarlik hem agirlik ile anlatilir. */
.tg-chip {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4);
  background: var(--tg-surface); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-pill);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi);
  cursor: pointer; white-space: nowrap;
  transition: background var(--tg-dur-state) var(--tg-ease), border-color var(--tg-dur-state) var(--tg-ease), color var(--tg-dur-state) var(--tg-ease);
}
.tg-chip:hover { border-color: var(--tg-brand-border); color: var(--tg-ink); }
.tg-chip[aria-pressed="true"], .tg-chip.is-selected {
  background: var(--tg-brand-soft); color: var(--tg-brand); border-color: var(--tg-brand); font-weight: var(--tg-fw-bold);
}
.tg-chip__count { color: var(--tg-ink-muted); font-weight: var(--tg-fw-medium); }
.tg-chiprow { display: flex; gap: var(--tg-space-2); overflow-x: auto; padding-bottom: var(--tg-space-1); scrollbar-width: none; }
.tg-chiprow::-webkit-scrollbar { display: none; }

/* == 7. ROZET / SINIFLANDIRMA ==============================================
   ROZET ENFLASYONU REDDEDILDI. Bir profesyonel hesapta EN FAZLA:
     (a) bir SINIFLANDIRMA plakasi  +  (b) bir DOGRULAMA isareti.
   Ucuncu bir rozet eklemek isteyen, once birini kaldirmak zorundadir. */
.tg-plate {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  height: var(--tg-space-6); padding: 0 var(--tg-space-3);
  background: var(--tg-surface-raised); color: var(--tg-ink);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-sm);
  font-size: var(--tg-fs-caption); line-height: 1; font-weight: var(--tg-fw-bold);
  letter-spacing: .04em; text-transform: uppercase;
  /* Plaka SARMAZ ve KUCULMEZ. Dar ekranda once satici adi kirpilir —
     siniflandirma guven sinyalidir, iki satira boluneni kimse okumaz. */
  white-space: nowrap; flex: none;
}
/* Plakanin sol ucundaki mavi serit — arac plakasinin ulke seridi gibi.
   Sinifi RENKLE degil, KONUMLA isaretler: renk korlugunde de okunur. */
.tg-plate::before { content: ""; width: var(--tg-rail-w); align-self: stretch; margin: var(--tg-space-1) 0; background: var(--tg-brand); border-radius: var(--tg-rail-w); }
.tg-plate--gallery::before  { background: var(--tg-brand); }
.tg-plate--dealer::before   { background: var(--tg-accent); }
.tg-plate--official::before { background: var(--tg-success); }

/* Dogrulama — TEK isaret. Renk + bicim birlikte tasir. */
.tg-verified { display: inline-flex; align-items: center; justify-content: center; width: var(--tg-space-5); height: var(--tg-space-5); color: var(--tg-brand); flex: none; }

/* Durum rozeti — icerigin DURUMU (yayinda/beklemede/reddedildi). */
.tg-badge { display: inline-flex; align-items: center; gap: var(--tg-space-1); height: var(--tg-space-6); padding: 0 var(--tg-space-2); border-radius: var(--tg-r-sm); font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); border: var(--tg-hairline) solid transparent; }
.tg-badge--success { background: var(--tg-success-soft); color: var(--tg-success-ink); border-color: var(--tg-success-border); }
.tg-badge--warning { background: var(--tg-warning-soft); color: var(--tg-warning-ink); border-color: var(--tg-warning-border); }
.tg-badge--danger  { background: var(--tg-danger-soft);  color: var(--tg-danger-ink);  border-color: var(--tg-danger-border); }
.tg-badge--info    { background: var(--tg-info-soft);    color: var(--tg-info-ink);    border-color: var(--tg-info-border); }
.tg-badge--neutral { background: var(--tg-surface-raised); color: var(--tg-ink-secondary); border-color: var(--tg-border); }

/* == 8. SPEC STRIP (imza) ==================================================
   ARAC BILGI PANOSU. Pazar yerinin en hizli okunan satiri.
   Etiket kucuk ve sessiz, deger BARLOW CONDENSED ve baskin. Kolonlar sac
   teli ayracla bolunur — kart icinde ikinci bir kart olusturmaz. */
.tg-spec {
  display: flex; align-items: stretch;
  background: var(--tg-surface-raised);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-md); overflow: hidden;
}
.tg-spec__cell { flex: 1; min-width: 0; padding: var(--tg-space-2) var(--tg-space-3); text-align: center; }
.tg-spec__cell + .tg-spec__cell { border-left: var(--tg-hairline) solid var(--tg-border); }
.tg-spec__label { display: block; font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption); font-weight: var(--tg-fw-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary); }
.tg-spec__value { display: block; font-family: var(--tg-font-numeric); font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-semi); color: var(--tg-ink); font-variant-numeric: tabular-nums; }
/* Liste karti icindeki sikistirilmis surum. */
.tg-spec--inline { background: transparent; border: 0; border-radius: 0; gap: var(--tg-space-3); }
.tg-spec--inline .tg-spec__cell { flex: 0 0 auto; padding: 0; text-align: left; }
.tg-spec--inline .tg-spec__cell + .tg-spec__cell { border-left: 0; padding-left: var(--tg-space-3); position: relative; }
.tg-spec--inline .tg-spec__cell + .tg-spec__cell::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: var(--tg-hairline); background: var(--tg-border); }
.tg-spec--inline .tg-spec__value { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
.tg-spec--inline .tg-spec__label { display: none; }

/* == 9. FORM ===============================================================
   Form YUVARLAK KUTU YIGINI DEGILDIR. Yapi: bolum > etiket > alan > destek.
   Etiket alanin USTUNDE ve her zaman gorunur (placeholder etiket yerine
   gecmez — 40+ kullanicida yazmaya baslayinca etiketin kaybolmasi hataya
   yol acar). */
.tg-fieldset { border: 0; padding: 0; margin: 0 0 var(--tg-space-6); }
.tg-fieldset__legend { display: block; font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary); padding: 0 0 var(--tg-space-2); }
.tg-field { display: block; margin-bottom: var(--tg-space-4); }
.tg-field__label { display: block; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink); margin-bottom: var(--tg-space-2); }
.tg-field__req { color: var(--tg-danger-ink); }
.tg-input, .tg-select, .tg-textarea {
  width: 100%; min-height: var(--tg-tap-min);
  padding: var(--tg-space-3) var(--tg-space-4);
  font-family: var(--tg-font-ui); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink);
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-md);
  transition: border-color var(--tg-dur-state) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease);
}
.tg-textarea { min-height: calc(var(--tg-tap-min) * 2); resize: vertical; }
.tg-input::placeholder, .tg-textarea::placeholder { color: var(--tg-ink-muted); }
.tg-input:focus, .tg-select:focus, .tg-textarea:focus { border-color: var(--tg-brand); outline: var(--tg-stroke) solid var(--tg-focus); outline-offset: 0; }
.tg-field.is-error .tg-input, .tg-field.is-error .tg-select, .tg-field.is-error .tg-textarea { border-color: var(--tg-danger); background: var(--tg-danger-soft); }
.tg-field__help  { display: block; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); margin-top: var(--tg-space-2); }
.tg-field__error { display: flex; align-items: center; gap: var(--tg-space-2); font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi); color: var(--tg-danger-ink); margin-top: var(--tg-space-2); }

/* Secici satir — kontrollu secim. Tiklaninca alt sayfa (sheet) acilir.
   Uzun listeler icin <select> yerine bu tercih edilir: sheet'te arama,
   grup basligi ve 48dp satir olur. */
.tg-selector {
  display: flex; align-items: center; gap: var(--tg-space-3);
  width: 100%; min-height: var(--tg-tap-min); padding: var(--tg-space-2) var(--tg-space-4);
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-md); cursor: pointer; text-align: left;
}
.tg-selector:hover { border-color: var(--tg-brand-border); }
.tg-selector__value { flex: 1; min-width: 0; font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-selector__value.is-empty { color: var(--tg-ink-muted); font-weight: var(--tg-fw-regular); }
.tg-selector__chev { color: var(--tg-ink-muted); flex: none; }

/* Anahtar (switch) — durum hem konum hem renk ile. */
.tg-switch { position: relative; display: inline-flex; align-items: center; width: 52px; height: 32px; flex: none; background: var(--tg-border-strong); border: 0; border-radius: var(--tg-r-pill); cursor: pointer; transition: background var(--tg-dur-state) var(--tg-ease); }
.tg-switch::after { content: ""; position: absolute; left: var(--tg-space-1); width: var(--tg-space-6); height: var(--tg-space-6); border-radius: var(--tg-r-pill); background: var(--tg-knob); box-shadow: var(--tg-elev-pop); transition: transform var(--tg-dur-state) var(--tg-ease); }
.tg-switch[aria-checked="true"] { background: var(--tg-brand); }
.tg-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* == 10. SATIR (ayarlar, liste) ============================================
   AYAR SATIRI KART DEGILDIR. Her satiri karta koymak sayfayi 12 ayri kutuya
   boler ve tarama hizini dusurur. Dogru yapi: bolum basligi + sinir
   cizgileriyle ayrilmis satirlar. Ayrica: HER SATIRIN IKONU RENKLI KARE
   ICINDE OLMAZ — ikon cizgidir, satirin sesini yukseltmez. */
.tg-rows { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
.tg-row {
  display: flex; align-items: center; gap: var(--tg-space-3);
  width: 100%; min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; text-align: left; cursor: pointer; color: inherit;
  transition: background var(--tg-dur-state) var(--tg-ease);
}
.tg-row + .tg-row { box-shadow: inset 0 1px 0 var(--tg-divider); }
.tg-row:hover { background: var(--tg-surface-raised); }
.tg-row__icon  { color: var(--tg-ink-secondary); flex: none; }
.tg-row__main  { flex: 1; min-width: 0; }
.tg-row__title { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.tg-row__desc  { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.tg-row__value { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); flex: none; }
.tg-row__chev  { color: var(--tg-ink-muted); flex: none; }
.tg-row--danger .tg-row__title, .tg-row--danger .tg-row__icon { color: var(--tg-danger-ink); }
.tg-rowgroup__label { font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary); padding: 0 var(--tg-space-1) var(--tg-space-2); }

/* == 11. BASLIK / SEKME / GEZINME ==========================================
   Ust cubuk: geri + baslik + en fazla IKI baglam aksiyonu. Ucuncusu
   "daha fazla" menusune gider. Baslik ortalanmaz — sola hizali baslik
   uzun Turkce kelimelerde kirpilmaz. */
.tg-topbar {
  display: flex; align-items: center; gap: var(--tg-space-2);
  min-height: 56px; padding: 0 var(--tg-space-2);
  background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border);
}
.tg-topbar__title { flex: 1; min-width: 0; font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); padding-left: var(--tg-space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sekme — aktif durum ROTA SEGMENTI ile: cizgi + uc noktasi.
   Alt cizgi tek basina 40+ kullanicida zayif kaliyor; nokta hedefi buyutmeden
   secili sekmeyi tartismasiz hale getirir. */
.tg-tabs { display: flex; gap: var(--tg-space-1); border-bottom: var(--tg-hairline) solid var(--tg-border); background: var(--tg-surface); overflow-x: auto; scrollbar-width: none; }
.tg-tabs::-webkit-scrollbar { display: none; }
.tg-tab {
  position: relative; flex: none; min-height: var(--tg-tap-min); padding: 0 var(--tg-space-4);
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary);
  transition: color var(--tg-dur-state) var(--tg-ease);
}
.tg-tab:hover { color: var(--tg-ink); }
.tg-tab[aria-selected="true"] { color: var(--tg-brand); font-weight: var(--tg-fw-bold); }
.tg-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--tg-space-3); right: var(--tg-space-3); bottom: 0;
  height: var(--tg-rail-w); background: var(--tg-rail-active); border-radius: var(--tg-rail-w);
}
.tg-tab[aria-selected="true"]::before {
  content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--tg-rail-w));
  width: calc(var(--tg-stop-size) - 2px); height: calc(var(--tg-stop-size) - 2px);
  margin-left: calc((var(--tg-stop-size) - 2px) / -2);
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
  border: var(--tg-rail-w) solid var(--tg-surface);
}

/* Alt sekme cubugu — ETIKET HER ZAMAN GORUNUR. Yalniz ikon, 40+ kullanicida
   ogrenilmesi gereken bir sifredir; etiket bunu ortadan kaldirir. */
.tg-bottombar { display: flex; background: var(--tg-surface); border-top: var(--tg-hairline) solid var(--tg-border); }
.tg-bottombar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: var(--tg-space-2) 0; background: transparent; border: 0; cursor: pointer;
  color: var(--tg-ink-secondary); font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption); font-weight: var(--tg-fw-semi);
}
.tg-bottombar__item[aria-current="page"] { color: var(--tg-brand); font-weight: var(--tg-fw-bold); }
.tg-bottombar__item[aria-current="page"] .tg-icon { }

/* == 12. SHEET / MODAL =====================================================
   Bunlar GERCEKTEN yuzer: golge burada anlamlidir.
   Sheet 220ms, asagidan; modal 220ms, olcekle. */
.tg-scrim { position: absolute; inset: 0; background: var(--tg-scrim); }
.tg-sheet {
  background: var(--tg-surface); border-top-left-radius: var(--tg-r-xl); border-top-right-radius: var(--tg-r-xl);
  border-top: var(--tg-hairline) solid var(--tg-border); box-shadow: var(--tg-elev-sheet);
  padding-bottom: var(--tg-space-4);
}
.tg-sheet__grip { width: var(--tg-space-10); height: var(--tg-space-1); margin: var(--tg-space-3) auto var(--tg-space-2); border-radius: var(--tg-r-pill); background: var(--tg-border-strong); }
.tg-sheet__head { display: flex; align-items: center; gap: var(--tg-space-2); padding: 0 var(--tg-space-4) var(--tg-space-3); }
.tg-sheet__title { flex: 1; font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); }
.tg-sheet__body { padding: 0 var(--tg-space-4); }
.tg-modal { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); box-shadow: var(--tg-elev-modal); padding: var(--tg-space-5); max-width: 420px; }

/* == 13. SOSYAL ============================================================
   Feed: ICERIK once. Cerceve minimum — kart kenarligi mobilde kaldirilir,
   ayrimi bosluk ve sac teli cizgi yapar. Medya tam genisliktedir. */
.tg-post { background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border); }
.tg-post__head { display: flex; align-items: center; gap: var(--tg-space-3); padding: var(--tg-space-3) var(--tg-gutter); }
.tg-avatar { width: var(--tg-space-10); height: var(--tg-space-10); border-radius: var(--tg-r-pill); background: var(--tg-surface-raised); border: var(--tg-hairline) solid var(--tg-border); flex: none; object-fit: cover; }
.tg-avatar--sm { width: var(--tg-space-8); height: var(--tg-space-8); }
.tg-avatar--lg { width: 72px; height: 72px; }
.tg-post__who { flex: 1; min-width: 0; }
.tg-post__name { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); }
/* ROL SATIRI — BusTop'a ozgu. Instagram'da yoktur; burada kimin konustugu
   (Otobus Sahibi, Yetkili Servis, Filo Muduru) icerik kadar onemlidir. */
.tg-post__role { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.tg-post__text { padding: 0 var(--tg-gutter) var(--tg-space-3); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); }
.tg-post__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--tg-surface-raised); }
.tg-post__actions { display: flex; align-items: center; gap: var(--tg-space-1); padding: var(--tg-space-1) var(--tg-space-2); }
.tg-post__spacer { flex: 1; }
.tg-action { display: inline-flex; align-items: center; gap: var(--tg-space-2); min-height: var(--tg-tap-min); padding: 0 var(--tg-space-3); background: transparent; border: 0; cursor: pointer; color: var(--tg-ink-secondary); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); border-radius: var(--tg-r-md); transition: color var(--tg-dur-toggle) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease); }
.tg-action:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
/* SECILI DURUM: Kalp SECILMEDIGINDE ASLA KIRMIZI DEGILDIR. Secilmemis ikon
   notr cizgidir; secilince dolar VE renklenir. Iki sinyal birlikte. */
.tg-action--like.is-on { color: var(--tg-like); }
.tg-action--save.is-on { color: var(--tg-brand); }
.tg-comment { display: flex; gap: var(--tg-space-3); padding: var(--tg-space-3) var(--tg-gutter); }
.tg-comment__bubble { flex: 1; background: var(--tg-surface-raised); border-radius: var(--tg-r-md); padding: var(--tg-space-2) var(--tg-space-3); }

/* == 14. CLIPS =============================================================
   Tam ekran medya, siyah zemin. Kontroller sag kenarda dikey; her biri
   48dp ve KOYU SIS altligi uzerinde — beyaz ikon parlak videoda kaybolmaz. */
.tg-clip { position: relative; background: var(--tg-media); border-radius: var(--tg-r-lg); overflow: hidden; aspect-ratio: 9 / 16; }
.tg-clip__veil { position: absolute; inset: 0; /* tg-allow: scrim — okunurluk ortusu, dekorasyon degil */ background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,0) 62%); }
.tg-clip__rail { position: absolute; right: var(--tg-space-2); bottom: var(--tg-space-4); display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-1); }
.tg-clipbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: var(--tg-tap-min); min-height: var(--tg-tap-min); padding: var(--tg-space-1) 0; background: transparent; border: 0; cursor: pointer; color: var(--tg-ink-on-media); font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tg-clipbtn.is-on { color: var(--tg-like); }
.tg-clipbtn--save.is-on { color: var(--tg-accent); }
.tg-clip__meta { position: absolute; left: var(--tg-gutter); right: 76px; bottom: var(--tg-space-4); color: var(--tg-ink-on-media); }
.tg-clip__name { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-card); font-weight: var(--tg-fw-bold); }
.tg-clip__role { font-size: var(--tg-fs-meta); opacity: .88; }
.tg-clip__caption { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); margin-top: var(--tg-space-2); }
/* Hikaye halkasi — okunmamis: rota mavisi, okunmus: sessiz kenar. */
.tg-story { display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-1); width: 76px; flex: none; }
.tg-story__ring { width: 64px; height: 64px; border-radius: var(--tg-r-pill); padding: 3px; background: var(--tg-brand); }
.tg-story.is-seen .tg-story__ring { background: var(--tg-border-strong); }
.tg-story__ring img { width: 100%; height: 100%; border-radius: var(--tg-r-pill); border: var(--tg-stroke) solid var(--tg-surface); object-fit: cover; }
.tg-story__name { font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption); color: var(--tg-ink-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* == 15. PAZAR YERI ========================================================
   BILGI YOGUN. Kart bir EDITORYAL kart degil, bir KAYITTIR.
   Tarama sirasi: gorsel > baslik > fiyat > spec > yer/tarih > satici.
   Bu sira degistirilemez; her dikeyde (otobus, minibus, yedek parca, is
   ilani, operasyon) AYNI iskelet kullanilir, yalniz spec alanlari degisir. */
.tg-listing { display: flex; gap: var(--tg-space-3); padding: var(--tg-space-3); background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); }
/* Kucuk gorsel: 390px'te ana kolona en az 220px birakmak zorunda.
   128px'lik gorsel Turkce baslikta ("Sehirlerarasi Otobus Kaptani") satiri
   uce boluyordu; 108 tarama hizini artiriyor, gorsel hala taninabilir. */
.tg-listing__thumb { position: relative; width: 108px; height: 81px; flex: none; border-radius: var(--tg-r-md); overflow: hidden; background: var(--tg-surface-raised); }
.tg-listing__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-listing__count { position: absolute; left: var(--tg-space-1); bottom: var(--tg-space-1); display: inline-flex; align-items: center; gap: var(--tg-space-1); height: var(--tg-space-5); padding: 0 var(--tg-space-2); border-radius: var(--tg-r-sm); background: var(--tg-media-chip); color: var(--tg-ink-on-media); font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); }
.tg-listing__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--tg-space-2); }
.tg-listing__title { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Alt satir dar ekranda sarabilir; ayrac noktasi sarma sirasinda satir
   basina dusmesin diye satir araligi kucuk tutuldu ve nokta ic ogeye
   sabitlendi. */
.tg-listing__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--tg-space-2); row-gap: 2px; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.tg-listing__dot { width: 3px; height: 3px; border-radius: var(--tg-r-pill); background: var(--tg-ink-muted); flex: none; }
.tg-listing--grid { flex-direction: column; padding: 0; overflow: hidden; }
.tg-listing--grid .tg-listing__thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.tg-listing--grid .tg-listing__main { padding: var(--tg-space-3); }

/* Satici satiri — kartin en altinda, tek satir. SINIFLANDIRMA + DOGRULAMA. */
.tg-seller { display: flex; align-items: center; gap: var(--tg-space-2); min-width: 0; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
/* Uzun kurum adlari ("Anadolu Otobus Galerisi") kirpilir; plaka ve dogrulama
   isareti ASLA kirpilmaz — guven sinyali her zaman gorunur kalir. */
.tg-seller__name { min-width: 0; font-weight: var(--tg-fw-semi); color: var(--tg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Siralama / filtre cubugu — ISLEMSEL. Sonuc sayisi solda, aksiyon sagda. */
.tg-toolbar { display: flex; align-items: center; gap: var(--tg-space-2); padding: var(--tg-space-2) var(--tg-gutter); background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border); }
.tg-toolbar__count { flex: 1; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); }

/* == 16. PROFESYONEL MAGAZA ================================================
   Magaza BUYUTULMUS SOSYAL PROFIL DEGILDIR. Kimlik seridi + guven satiri +
   sekmeler. Kapak gorseli varsa dusuk yukseklikte kalir; magazanin ilk
   ekraninda ILAN gorunmelidir. */
.tg-store { background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border); }
.tg-store__cover { width: 100%; height: 120px; object-fit: cover; background: var(--tg-surface-raised); }
.tg-store__head { display: flex; gap: var(--tg-space-3); padding: var(--tg-space-4) var(--tg-gutter) var(--tg-space-3); }
.tg-store__name { display: flex; align-items: center; gap: var(--tg-space-2); font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); }
.tg-store__trust { display: flex; gap: var(--tg-space-2); padding: 0 var(--tg-gutter) var(--tg-space-4); flex-wrap: wrap; }

/* == 17. METRIK / ANALIZ ===================================================
   GENEL SAAS PANOSU DEGIL. Once TEK bir birincil sayi, sonra kiyas.
   Kiyas YALNIZ gercek veri varsa gosterilir; veri yoksa "yeterli veri yok"
   yazilir — uydurma yuzde yazilmaz. */
.tg-metricgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--tg-hairline); background: var(--tg-border); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
.tg-metriccell { background: var(--tg-surface); padding: var(--tg-space-4); }
.tg-metriccell__label { font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-semi); letter-spacing: .05em; text-transform: uppercase; color: var(--tg-ink-secondary); }
.tg-metriccell__value { font-family: var(--tg-font-numeric); font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-semi); color: var(--tg-ink); font-variant-numeric: tabular-nums; }
.tg-delta { display: inline-flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); }
.tg-delta--up   { color: var(--tg-success-ink); }
.tg-delta--down { color: var(--tg-danger-ink); }
.tg-delta--flat { color: var(--tg-ink-secondary); }
/* Cubuk — kutuphane yok, tek renk, izgara yok. Grafik veriyi anlatir, susler degil. */
.tg-bars { display: flex; align-items: flex-end; gap: var(--tg-space-1); height: 72px; }
.tg-bars__bar { flex: 1; background: var(--tg-brand-soft); border-radius: var(--tg-r-sm) var(--tg-r-sm) 0 0; }
.tg-bars__bar.is-peak { background: var(--tg-brand); }

/* == 18. YUKLENIYOR / BOS / HATA ===========================================
   HICBIRINDE EMOJI YOK. Iskelet gercek yerlesimi taklit eder (yanlis
   yerlesimi taklit eden iskelet, sayfa gelince zipladigi icin daha kotudur). */
.tg-skel { background: var(--tg-surface-sunken); border-radius: var(--tg-r-sm); position: relative; overflow: hidden; }
.tg-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); /* tg-allow: shimmer — yukleniyor sinyali */ background: linear-gradient(90deg, transparent, var(--tg-surface) 50%, transparent); animation: tg-shimmer 1.4s infinite; }
@keyframes tg-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tg-skel::after { animation: none; } }
.tg-skel--line { height: var(--tg-space-3); }
.tg-skel--title { height: var(--tg-space-5); }
.tg-skel--thumb { width: 128px; height: 96px; border-radius: var(--tg-r-md); flex: none; }

/* Bos durum — glif + tek cumle + TEK birincil aksiyon. */
.tg-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tg-space-3); padding: var(--tg-space-12) var(--tg-space-6); }
.tg-state__glyph { width: 64px; height: 64px; color: var(--tg-ink-muted); }
.tg-state__title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); }
.tg-state__text  { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink-secondary); max-width: 44ch; }
/* Satir ici hata — SAYFAYI DEGISTIRMEZ, sadece baglami isaretler. */
.tg-inline-error { display: flex; align-items: flex-start; gap: var(--tg-space-3); padding: var(--tg-space-3); background: var(--tg-danger-soft); border: var(--tg-hairline) solid var(--tg-danger-border); border-radius: var(--tg-r-md); color: var(--tg-danger-ink); font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-medium); }
.tg-offline { display: flex; align-items: center; justify-content: center; gap: var(--tg-space-2); padding: var(--tg-space-2) var(--tg-space-4); background: var(--tg-warning-soft); border-bottom: var(--tg-hairline) solid var(--tg-warning-border); color: var(--tg-warning-ink); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); }

/* == 19. DUZEN YARDIMCILARI ================================================ */
.tg-stack   { display: flex; flex-direction: column; gap: var(--tg-space-3); }
.tg-stack-4 { display: flex; flex-direction: column; gap: var(--tg-space-4); }
.tg-inline  { display: flex; align-items: center; gap: var(--tg-space-2); }
.tg-gutter  { padding-left: var(--tg-gutter); padding-right: var(--tg-gutter); }
.tg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* == 20. DUYARLI DAVRANIS ==================================================
   Kirilma noktalari: 390 / 430 (telefon) · 768 (tablet) · 1024 / 1440 (masaustu).
   Telefonda gutter 16 sabit kalir; tablette ve ustunde artar. */
@media (min-width: 430px) {
  .tg-listing__thumb { width: 128px; height: 96px; }
}
@media (min-width: 768px) {
  .tg-root { --tg-gutter: 24px; }
  .tg-listing__thumb { width: 168px; height: 126px; }
}
@media (min-width: 1024px) {
  .tg-root { --tg-gutter: 32px; }
  .tg-post { border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
}

/* ══ 21. IMZA BILESENLERI (Faz 2.6) ════════════════════════════════════════
   Karsilikli PHP: `app/components.php`. Bu uc bilesen urunun her yuzeyinde
   tekrar eder; kimligi kuran o tekrardir, tek tek guzel ekranlar degil.
   ========================================================================= */

/* ── A. TRANSIT DATA PLATE ─────────────────────────────────────────────────
   Kaynak: arac bilgi panosu ve peron gostergesi.

   Jenerik "metric card"tan ayiran dort karar:
     1. Hucreler ayri kutu DEGIL — tek plakanin TAM BOYU cizgiyle bolmeleri.
     2. Etiket 11px versal ve genis harf arali; deger sikistirilmis ve baskin.
     3. Bas kenarda 2px marka cubugu — plakanin "rota" isareti.
     4. Koyu temada plaka karttan DAHA KOYU: panele gomulu enstruman hissi.
        (Jenerik pano kutucuklari daima karttan ACIK olur; bu tersleme
        bilerek yapildi ve gorsel imzanin bir parcasi.) */
.tg-plate-data {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--tg-surface-raised);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-sm);
  overflow: hidden;
}
/* Rota cubugu — plakanin bas kenari. */
.tg-plate-data::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--tg-rail-w); background: var(--tg-rail-active);
}
.tg-plate-data__cell {
  min-width: 0; padding: var(--tg-space-2) var(--tg-space-3);
  display: flex; flex-direction: column; gap: 1px;
}
.tg-plate-data__cell:first-child { padding-left: calc(var(--tg-space-3) + var(--tg-rail-w)); }
/* TAM BOYU bolme — inset degil. Enstruman panosu sertligi. */
.tg-plate-data__cell + .tg-plate-data__cell { border-left: var(--tg-hairline) solid var(--tg-border); }
.tg-plate-data__k {
  font-size: var(--tg-fs-label); line-height: 14px; font-weight: var(--tg-fw-bold);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tg-ink-muted); white-space: nowrap;
}
.tg-plate-data__v {
  font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-price); line-height: 26px;
  font-weight: var(--tg-fw-semi); letter-spacing: .01em;
  color: var(--tg-ink); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tg-plate-data__u { font-style: normal; font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); margin-left: 2px; }

/* Kart olcegi — daha sik, ayni dil. */
.tg-plate-data--sm .tg-plate-data__cell { padding: var(--tg-space-1) var(--tg-space-2); }
.tg-plate-data--sm .tg-plate-data__cell:first-child { padding-left: calc(var(--tg-space-2) + var(--tg-rail-w)); }
.tg-plate-data--sm .tg-plate-data__k { font-size: var(--tg-fs-label); line-height: 13px; letter-spacing: var(--tg-ls-label); }
.tg-plate-data--sm .tg-plate-data__v { font-size: var(--tg-fs-section); line-height: 21px; }

/* Detay kahramani — en buyuk olcek. */
.tg-plate-data--lg .tg-plate-data__cell { padding: var(--tg-space-3) var(--tg-space-4); }
.tg-plate-data--lg .tg-plate-data__v { font-size: var(--tg-fs-display); line-height: 34px; }

/* KOYU TEMA: plaka karttan koyu — gomulu enstruman. */
:root[data-theme="dark"] .tg-plate-data {
  background: var(--tg-surface-sunken);
  border-color: var(--tg-border);
}
:root[data-theme="dark"] .tg-plate-data__cell + .tg-plate-data__cell { border-left-color: var(--tg-border); }

/* ── B. IDENTITY RAIL ──────────────────────────────────────────────────────
   Kim konusuyor / kim satiyor — TEK gramer, dort yuzey.

   Rozet corbasi yerine: sol dikey ray (SINIFLANDIRMA, konumla) + ad + TEK
   dogrulama isareti + versal ROL satiri. Rol versal cizilir cunku bu bir
   PROFESYONEL unvandir, bir etiket degil. */
.tg-ident { display: flex; align-items: center; gap: var(--tg-space-3); min-width: 0; }
.tg-ident__link {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-width: 0; flex: 1; text-decoration: none; color: inherit;
  position: relative;
}
/* SINIFLANDIRMA RAYI — konum birinci sinyal, renk ikinci. */
.tg-ident--gallery    .tg-ident__link::before,
.tg-ident--authorized .tg-ident__link::before,
.tg-ident--official   .tg-ident__link::before,
.tg-ident--corporate  .tg-ident__link::before {
  content: ""; flex: none; width: var(--tg-rail-w); align-self: stretch;
  min-height: var(--tg-space-8); border-radius: var(--tg-rail-w);
  margin-right: var(--tg-space-1);
}
.tg-ident--gallery    .tg-ident__link::before { background: var(--tg-brand); }
.tg-ident--authorized .tg-ident__link::before { background: var(--tg-accent); }
.tg-ident--official   .tg-ident__link::before { background: var(--tg-success); }
.tg-ident--corporate  .tg-ident__link::before { background: var(--tg-border-strong); }

.tg-ident__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tg-ident__name {
  display: flex; align-items: center; gap: var(--tg-space-1); min-width: 0;
  font-size: var(--tg-fs-card); line-height: var(--tg-lh-card);
  font-weight: var(--tg-fw-bold); color: var(--tg-ink);
}
.tg-ident__name > span, .tg-ident__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-ident__tick { color: var(--tg-brand); flex: none; }
.tg-ident__sub { display: flex; align-items: baseline; gap: var(--tg-space-2); min-width: 0; }
/* ROL — versal, kucuk, harf arali. Profesyonel kayit. */
.tg-ident__role {
  font-size: var(--tg-fs-label); line-height: var(--tg-lh-label); font-weight: var(--tg-fw-bold);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase;
  color: var(--tg-ink-secondary); white-space: nowrap; flex: none;
}
.tg-ident__meta {
  font-size: var(--tg-fs-meta); line-height: 15px; color: var(--tg-ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tg-ident__tail { display: flex; align-items: center; gap: var(--tg-space-2); flex: none; margin-left: auto; }
.tg-ident__status {
  height: var(--tg-space-5); padding: 0 var(--tg-space-2);
  display: inline-flex; align-items: center; border-radius: var(--tg-r-sm);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
}

/* Kucuk olcek — kart alt satiri, yorum. Avatarsiz calisir. */
.tg-ident--sm { gap: var(--tg-space-2); }
.tg-ident--sm .tg-ident__link { gap: var(--tg-space-2); }
.tg-ident--sm .tg-ident__name { font-size: var(--tg-fs-caption); line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary); }
.tg-ident--sm .tg-ident__tick { width: 14px; height: 14px; }
.tg-ident--sm .tg-ident__link::before { min-height: var(--tg-space-4); margin-right: var(--tg-space-1); }

/* Buyuk olcek — magaza ve detay. */
.tg-ident--lg .tg-ident__name { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
.tg-ident--lg .tg-ident__link::before { min-height: var(--tg-space-10); }

/* ── C. ROUTE RULE — bolum basligi ve yonelim ───────────────────────────── */
.tg-rule { display: flex; align-items: center; gap: var(--tg-space-3); margin: 0 0 var(--tg-space-4); }
.tg-rule__dot { width: var(--tg-space-2); height: var(--tg-space-2); flex: none; border-radius: var(--tg-r-pill); background: var(--tg-rail-active); }
.tg-rule__title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0; flex: none; }
.tg-rule__line { flex: 1; height: var(--tg-hairline); background: var(--tg-divider); }
.tg-rule__aside { flex: none; font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }

/* ── D. CONTEXT STRIP — sektorel baglam ────────────────────────────────────
   BusTop'a ozgu: bir gonderi yalniz "gonderi" degil, "arac musait"tir.
   Medyanin hemen altinda, kucuk versal etiketler; nokta ayraclarla. */
.tg-context {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--tg-space-2); padding: var(--tg-space-2) var(--tg-space-4);
  border-top: var(--tg-hairline) solid var(--tg-divider);
  background: var(--tg-surface-raised);
}
.tg-context__tag {
  font-size: var(--tg-fs-label); line-height: var(--tg-lh-label); font-weight: var(--tg-fw-bold);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-ink-secondary);
}
.tg-context__tag:first-of-type { color: var(--tg-brand); }
.tg-context__sep { width: 3px; height: 3px; border-radius: var(--tg-r-pill); background: var(--tg-ink-muted); flex: none; }

/* ── E. DISCUSSION — ray uzerinde tartisma ─────────────────────────────────
   Yorumlar ic ice ham metin yigini degil; solda dikey hat, her yorum bir
   durak. Gonderinin DEVAMI oldugu belli olur, ayri bir kart gibi durmaz. */
.tg-discussion { border-top: var(--tg-hairline) solid var(--tg-divider); }
.tg-discussion__head {
  padding: var(--tg-space-3) var(--tg-space-4) var(--tg-space-1);
  font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-ink-muted);
}
.tg-discussion__head--empty { color: var(--tg-ink-muted); }
.tg-discussion__rows { position: relative; padding: var(--tg-space-1) 0 var(--tg-space-2); }
/*
  ROTA HATTI — AVATARLARIN ICINDEN gecer, yanindan degil.

  Ilk denemede hat avatarlarin solundaydi ve ayri bir nokta sutunu daha
  vardi; iki paralel sol kenar olusuyor ve baglanti kopuyordu. Dogrusu:
  hat avatar merkezinden gecer, her AVATAR bir duraktir. Avatarin etrafina
  yuzey rengiyle bir halka konur ki hat arkasindan gecerken kesilsin.
  Boylece "yorumlar bir hattin duraklaridir" okumasi kuruluyor.
*/
.tg-discussion__rows::before {
  content: ""; position: absolute;
  left: calc(var(--tg-space-4) + var(--tg-space-8) / 2);
  top: var(--tg-space-2); bottom: var(--tg-space-2);
  width: var(--tg-hairline); background: var(--tg-border);
}
.tg-discussion__row { position: relative; }
/* Avatar hattin uzerinde durur ve arkasini keser. */
.tg-discussion__row > a:first-child, .tg-discussion__row .avatar {
  position: relative; z-index: 1;
  box-shadow: 0 0 0 3px var(--tg-surface);
  border-radius: var(--tg-r-pill);
}
.tg-discussion .bt-inline-comment { padding-left: var(--tg-space-4); padding-right: var(--tg-space-4); }

/* ══ 22. URETIM YUZEYLERI — YENIDEN BESTELENEN ISARETLEME (Faz 2.6) ════════
   Asagidaki kurallar `app/components.php` + yeniden yazilan uretim
   isaretlemesinin karsiligidir. CSS ile "duzeltme" degil, YENI yapinin
   tanimi — bu yuzden ad alani disinda da olsa kanonik katmanda duruyor.
   ========================================================================= */

/* ── PAZAR YERI KONTROL GUVERTESI ──────────────────────────────────────────
   Dort yigilmis blok yerine TEK guverte. 1440'ta ilk ilana kadar harcanan
   yukseklik ~430px'ten ~210px'e iner. */
.mk-deck {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
  margin: var(--tg-space-5) 0 var(--tg-space-5);
  overflow: hidden;
}
.mk-deck__top {
  display: flex; align-items: center; gap: var(--tg-space-4); flex-wrap: wrap;
  padding: var(--tg-space-4) var(--tg-space-5);
}
.mk-deck__id { display: flex; align-items: baseline; gap: var(--tg-space-3); min-width: 0; flex: 1; }
/* Sayfa kimligi bir DURAK ile baslar — sidebar aktif durumuyla ayni dil. */
.mk-deck__dot {
  width: var(--tg-stop-size); height: var(--tg-stop-size); flex: none;
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
  align-self: center;
}
.mk-deck__title {
  font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen);
  font-weight: var(--tg-fw-bold); letter-spacing: -.02em;
  color: var(--tg-ink); margin: 0; flex: none;
}
/* Sonuc sayisi baslikla AYNI satirda: "kac ilan" bir alt basliktir, ayri bir
   satir hak etmiyor. Sikistirilmis rakam — plakayla ayni sayisal dil. */
.mk-deck__count {
  font-family: var(--tg-font-numeric); font-size: var(--tg-fs-section);
  font-weight: var(--tg-fw-semi); letter-spacing: .02em;
  color: var(--tg-ink-secondary); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-deck__controls {
  display: flex; align-items: center; gap: var(--tg-space-4); flex-wrap: wrap;
  padding: var(--tg-space-3) var(--tg-space-5);
  border-top: var(--tg-hairline) solid var(--tg-divider);
  background: var(--tg-surface-raised);
}
.mk-deck__controls .mk-chips { flex: 1 1 auto; min-width: 0; padding: 0; }
.mk-deck__tools { display: flex; align-items: center; gap: var(--tg-space-2); flex: 0 1 auto; min-width: 0; }
/* Filtre formu guvertede kendi paneli olmadan durur. */
.mk-filters--deck {
  display: flex; align-items: center; gap: var(--tg-space-2);
  background: none; border: 0; border-radius: 0; padding: 0; flex-wrap: wrap;
}
/* Arama guvertedeki en genis kontrol olmali: marka+model yazilir. */
.mk-filters--deck { flex: 1 1 auto; min-width: 0; padding: 0; }
.mk-filters--deck .mk-search { flex: 1 1 300px; min-width: 0; }
.mk-filters--deck .mk-search input { min-height: var(--tg-tap-compact); background: var(--tg-surface); }
.mk-filters--deck .mk-search .btn { min-height: var(--tg-tap-compact); }
.mk-filters--deck .mk-adv { flex: 0 0 auto; }
.mk-filters--deck .mk-adv[open] { flex: 1 1 100%; }
.mk-filters--deck .mk-adv > summary { min-height: var(--tg-tap-compact); background: var(--tg-surface); }
.mk-filters--deck .mk-fgrid { padding-top: var(--tg-space-3); }
.mk-sort { flex: 0 0 auto; }
.mk-sort__k { font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-ink-muted); }
.mk-sort select { min-height: var(--tg-tap-compact); background: var(--tg-surface); }

@media (max-width: 640px) {
  .mk-deck { margin: var(--tg-space-3) 0 var(--tg-space-4); }
  .mk-deck__top, .mk-deck__controls { padding: var(--tg-space-3) var(--tg-space-4); }
  .mk-deck__title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
  .mk-deck__controls { flex-direction: column; align-items: stretch; gap: var(--tg-space-3); }
  .mk-deck__tools { flex-wrap: wrap; gap: var(--tg-space-2); }
  /*
    MOBILDE GUVERTE DORT SATIRA YAYILIYORDU: cipler · arama · Filtrele ·
    Sirala. Olculdu (390px): guverte 222px, ilk ilan 678px asagida —
    kullanici tek bir ilan gormeden yarim ekrandan fazla kaydiriyordu.

    "Filtrele" formun ICINDE, "Sirala" ise formun KARDESI oldugu icin ayni
    satira gelemiyorlardi. Form kutusu mobilde `display: contents` ile
    kaldiriliyor; cocuklari dogrudan guverte satirinin ogeleri oluyor.
    Form DOM'da duruyor, gonderim davranisi DEGISMIYOR — yalniz kutusu
    duzenden cikiyor.

    Sonuc: arama kendi satirinda (yazilacak en uzun deger), Filtrele ve
    Sirala yan yana tek satirda.
  */
  .mk-filters--deck { display: contents; }
  .mk-deck__tools .mk-search { flex: 1 1 100%; }
  .mk-deck__tools details.mk-adv { flex: 0 0 auto; }
  .mk-sort { flex: 1 1 auto; width: auto; justify-content: flex-end; gap: var(--tg-space-2); }
}

/* ── ILAN KARTI — YENIDEN BESTELENMIS ──────────────────────────────────────
   Kart artik: medya · (baslik+model) · fiyat · DATA PLATE · yer/tarih ·
   IDENTITY RAIL. Basliga iki satir AYRILIR ki izgara tirtiklanmasin. */
.mk-card-body { display: flex; flex-direction: column; gap: var(--tg-space-2); padding: var(--tg-space-3) var(--tg-space-4) var(--tg-space-4); }
.mk-card-head { min-height: 46px; }
.mk-card-title {
  font-size: var(--tg-fs-card); line-height: 21px; letter-spacing: -.01em;
  font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-model { font-size: var(--tg-fs-meta); line-height: 18px; color: var(--tg-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
/* Fiyat mansettir: plakadan hemen once, en yuksek ses. */
.mk-price { font-size: var(--tg-fs-price); line-height: var(--tg-lh-price); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-ink); margin: 0; }
.mk-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tg-space-2); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary);
}
.mk-city { display: inline-flex; align-items: center; gap: var(--tg-space-1); min-width: 0; }
.mk-city .tg-i { color: var(--tg-ink-muted); flex: none; }
.mk-city > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-date { color: var(--tg-ink-muted); white-space: nowrap; flex: none; }
.mk-trust { display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap; padding-top: var(--tg-space-2); border-top: var(--tg-hairline) solid var(--tg-divider); }

/* Medya seridinde artik TEK etiket: kategori. Satici kimligi kart altinda. */
.mk-cat {
  position: absolute; left: var(--tg-space-2); top: var(--tg-space-2);
  height: var(--tg-space-6); padding: 0 var(--tg-space-2);
  display: inline-flex; align-items: center; border-radius: var(--tg-r-sm);
  background: var(--tg-media-chip); color: var(--tg-ink-on-media);
  font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── ILAN DETAYI — SOL/SAG BESTE ───────────────────────────────────────────
   Sag sutun bir SATIN ALMA KUTUSU: fiyat, plaka, satici kimligi, iletisim.
   Sol sutun okuma: baslik, aciklama, teknik gruplar. */
.mk-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tg-space-5); align-items: start; }
@media (min-width: 1024px) {
  .mk-detail-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--tg-space-6); }
  .mk-detail-side { position: sticky; top: var(--tg-space-4); }
}
.mk-detail-main {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg); overflow: hidden;
}
.mk-block { padding: var(--tg-space-5) var(--tg-space-6); }
.mk-block + .mk-block { border-top: var(--tg-hairline) solid var(--tg-divider); }
/* Bos galeri bilgi kadar yer kaplar, daha fazlasi degil. Sinirsiz birakildiginda
   detay sayfasinin ilk ekranini tamamen "fotograf yok" dolduruyordu. */
.mk-gallery-empty { aspect-ratio: auto; min-height: 200px; max-height: 280px; }
.mk-detail-title { font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-bold); letter-spacing: -.025em; color: var(--tg-ink); margin: 0; }
.mk-desc { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); margin: 0; max-width: 68ch; }

/* SATIN ALMA KUTUSU — sag sutun. */
.mk-buybox {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
  padding: var(--tg-space-5);
  display: flex; flex-direction: column; gap: var(--tg-space-4);
}
.mk-buybox__price {
  font-family: var(--tg-font-numeric);
  /* Olcegin en ustu: `display`. 40px cazipti ama olcek disi bir ara deger
     olurdu — tasarim dili "ara deger yok" diyor. Barlow Condensed 32'de
     zaten yeterince baskin. */
  font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-semi);
  letter-spacing: .01em; color: var(--tg-ink);
  font-variant-numeric: tabular-nums;
}
/*
  ILAN NO — ustveri, baslik DEGIL.
  Karari fiyat ve arac veriyor; numara destege/paylasima yarar. Bu yuzden
  fiyatin altinda ve SESSIZ tipografide duruyor. `tabular-nums` sayilarin
  ayni genislikte hizalanmasini saglar — numara okunurken goz kaymaz.
*/
.mk-buybox__no {
  margin-top: var(--tg-space-2);
  font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption);
  color: var(--tg-ink-muted);
  font-variant-numeric: tabular-nums;
}
.mk-buybox__seller {
  padding-top: var(--tg-space-4);
  border-top: var(--tg-hairline) solid var(--tg-divider);
  display: flex; flex-direction: column; gap: var(--tg-space-3);
}

/* SATICI KUNYESI — her alan kendi satirinda, etiketli.

   ONCESI: rol ve sehir kimlik rayinin tek bir alt satirina sikismisti.
   Olculdu: rol 11px, sehir 14px — yani DAHA AZ onemli alan DAHA BUYUK
   goruluyordu ve ikisi ayni taban cizgisine oturmuyordu (y=875 / y=873).
   Alanlar artik etiket/deger cifti; hangi bilginin ne oldugu okunuyor. */
.mk-sellerfacts { margin: 0; display: flex; flex-direction: column; gap: var(--tg-space-2); }
.mk-sellerfact {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--tg-space-3);
}
.mk-sellerfact dt {
  font-family: var(--tg-font-display);
  font-size: var(--tg-fs-metadata); line-height: var(--tg-lh-metadata);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tg-ink-muted); white-space: nowrap;
}
.mk-sellerfact dd {
  margin: 0; text-align: right;
  font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption);
  font-weight: var(--tg-fw-medium); color: var(--tg-ink);
}
.mk-buybox .mk-action { margin: 0; }
.mk-buybox .mk-action .btn { width: 100%; }
.mk-seller-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-10); height: var(--tg-space-10); flex: none;
  border-radius: var(--tg-r-pill); background: var(--tg-brand-soft); color: var(--tg-brand);
  font-size: var(--tg-fs-card); font-weight: var(--tg-fw-bold);
}

/* TEKNIK GRUPLAR — alan basina kart yok; grup basligi + bolmeler. */
.mk-specgroup + .mk-specgroup { margin-top: var(--tg-space-5); }
.mk-specgroup__k {
  font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tg-brand);
  margin-bottom: var(--tg-space-2);
}
/*
  Bolmeler GAP ile degil, hucre golgesiyle cizilir.

  "gap = kenarlik rengi" numarasi kolay ama izgarada BOS IZ kaldiginda o
  izler gri blok olarak gorunuyor: dort alanli bir grupta ucuncu sutun bos
  kalinca sayfada aciklanamayan gri bir dikdortgen olusuyordu.
  Ic golge yalniz DOLU hucreleri cizer; bos iz zeminle ayni kalir.
*/
.mk-specs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0; background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-sm); overflow: hidden;
}
.mk-spec {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--tg-surface); padding: var(--tg-space-2) var(--tg-space-3);
  border: 0; box-shadow: inset -1px -1px 0 var(--tg-border);
}
.mk-spec-k { font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-ink-muted); }
.mk-spec-v { font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }

/* ── AKIS — YENIDEN BESTELENMIS GONDERI ────────────────────────────────────
   Sira: kimlik · METIN · medya · baglam seridi · aksiyonlar · tartisma. */
.bt-social-post {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
  margin-bottom: var(--tg-space-4);
  overflow: hidden;
}
.bt-social-post__header { padding: var(--tg-space-4); }
/* Metin MEDYADAN ONCE: soz once gelir. */
.bt-post-caption { padding: 0 var(--tg-space-4) var(--tg-space-4); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); }
.bt-post-caption p { margin: 0; }
.bt-caption-more { background: none; border: 0; padding: var(--tg-space-1) 0 0; font: inherit; font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); cursor: pointer; }
.bt-social-post__body { padding: 0; }
.bt-post-actions { display: flex; align-items: center; justify-content: space-between; padding: var(--tg-space-1) var(--tg-space-2); }
.bt-post-actions > div { display: flex; align-items: center; }
.bt-post-engagement { display: flex; align-items: center; gap: var(--tg-space-4); padding: 0 var(--tg-space-4) var(--tg-space-3); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.bt-post-engagement b { font-family: var(--tg-font-numeric); font-size: var(--tg-fs-card); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.bt-social-post__context { padding: var(--tg-space-2) var(--tg-space-4) 0; }
.bt-post-context { font-size: var(--tg-fs-label); font-weight: var(--tg-fw-bold); letter-spacing: var(--tg-ls-label); text-transform: uppercase; color: var(--tg-brand); }

/* Yorum formu tartismanin parcasi. */
.bt-inline-comment-form { display: flex; align-items: center; gap: var(--tg-space-2); padding: var(--tg-space-3) var(--tg-space-4); border-top: var(--tg-hairline) solid var(--tg-divider); }
.bt-inline-comment-form textarea { flex: 1; min-height: var(--tg-tap-min); max-height: 120px; padding: var(--tg-space-3) var(--tg-space-4); font-size: var(--tg-fs-body); border-radius: var(--tg-r-md); background: var(--tg-surface-sunken); border-color: var(--tg-border); }
.bt-comment-login { display: block; padding: var(--tg-space-3) var(--tg-space-4); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-brand); border-top: var(--tg-hairline) solid var(--tg-divider); }

/* ── GEZINME — GENEL UST CUBUK ILE SIDEBAR AYNI URUN ───────────────────────
   Ikisi de: 40dp kontrol, 11px versal olmayan etiket, ayni aktif durak dili. */
.topnav-link { position: relative; }
.topnav-link.active::before {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: var(--tg-space-2); height: var(--tg-space-2);
  margin-left: calc(var(--tg-space-2) / -2);
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
  border: var(--tg-rail-w) solid var(--tg-surface);
}

/* ── Plaka izgarasi — panoda ucerli gruplar halinde. ─────────────────────── */
.tg-plate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--tg-space-3); }

/* ── VIDEO CERCEVESI ──────────────────────────────────────────────────────
   `controls` KALDIRILMADI — kaldirmak oynatma anlamini ve erisilebilirligi
   degistirirdi (klavye, ekran okuyucu, altyazi menusu). Degisen yalniz
   cerceve: video kartin medya yuzeyine oturur, orani sabittir ve kartin
   yaricapina kirpilir. Tarayici kontrolleri kalir; "sayfaya yapistirilmis
   ham embed" gorunumu biter. */
.bt-post-slide--video {
  position: relative; background: var(--tg-media);
  display: flex; align-items: center; justify-content: center;
}
.bt-post-slide--video video {
  display: block; width: 100%; max-height: min(560px, 70vh);
  object-fit: contain; background: var(--tg-media);
}


/* ===== SOURCE: bustop-transit-grid.web.css ===== */
/* ============================================================================
   BUSTOP TRANSIT GRID — URETIM YUZEYI GECISI (Faz 2)
   ----------------------------------------------------------------------------
   Bagimlilik: tokens.css -> bridge.css -> components.css -> BU DOSYA (en son)

   YAKLASIM
     Uretim arayuzu 20.000 satir PHP string birlestirmesiyle uretiliyor.
     Isaretlemeyi yeniden yazmak is mantigina dokunma riski demek. Bunun
     yerine MEVCUT sinif adlari Transit Grid dilbilgisine BURADA baglanir.
     Isaretleme ayni kalir, dil degisir.

     PHP yalnizca CSS'in duzeltemeyecegi seyler icin degistirilir:
     emoji ikonlar, kontrol olarak kullanilan Unicode isaretler, ve
     bilgi mimarisi gerektiren yapisal eklemeler.

   BU DOSYADA HAM DEGER YOKTUR — hepsi --tg-* token'indan okunur.
   ========================================================================== */

/* ══ 1. KURESEL KABUK ═══════════════════════════════════════════════════════
   Tipografi ve zemin. Manrope + 16px govde: 40+ okunurluk alt siniri. */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--tg-font-ui);
  font-size: var(--tg-fs-body);
  line-height: var(--tg-lh-body);
  color: var(--tg-ink);
  background: var(--tg-canvas);
  -webkit-font-smoothing: antialiased;
}
/* Fiyat/KM kolonlari kaymasin — rakamlar tek genislikte. */
body { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, h5, h6 { font-family: var(--tg-font-ui); color: var(--tg-ink); letter-spacing: -.01em; }
h1 { font-size: var(--tg-fs-screen);  line-height: var(--tg-lh-screen);  font-weight: var(--tg-fw-bold); }
h2 { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); }
h3 { font-size: var(--tg-fs-card);    line-height: var(--tg-lh-card);    font-weight: var(--tg-fw-bold); }
small, .small { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); }

a { color: var(--tg-brand); }
hr { border: 0; border-top: var(--tg-hairline) solid var(--tg-divider); }

/* Tek odak halkasi — her bilesende yeniden tanimlanmaz. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--tg-stroke) solid var(--tg-focus);
  outline-offset: 2px;
  border-radius: var(--tg-r-sm);
}

/* Sayfa kabi ve oluk */
.container { max-width: var(--tg-content-max); padding-left: var(--tg-gutter); padding-right: var(--tg-gutter); }
.app-main  { background: var(--tg-canvas); }
.app-section { padding-top: var(--tg-space-6); padding-bottom: var(--tg-space-8); }

/* ══ 2. YASAKLARIN TOPTAN KALDIRILMASI ══════════════════════════════════════
   Cam panel, dekoratif gradyan ve "her yerde golge" tek yerden kapatilir.
   Bu, 81 gradyan + 25 backdrop-filter bildiriminin gorsel etkisini bitirir;
   dosyalari silmeden once gorunumu duzeltir. */
.topbar, .mobile-topbar, .ig-sidebar, .mobile-bottom-nav,
.card, .content-card, .mk-card, .listing-card, .job-card, .am-card,
.feed-card, .bt-social-card, .admin-card, .metric-card, .auth-card,
.login-card, .legal-card, .table-card, .preview-card, .discover-card,
.market-card, .part-card, .clip-card, .onboarding-card, .cta-card,
.feature-card, .new-role-card, .create-option-card, .mk-seller-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Dekoratif gradyan zeminler duz anlamsal yuzeye iner.
   MEDYA ve OKUNURLUK ORTUSU haric — onlar .tg-clip__veil ve benzeri
   isaretli istisnalardir ve bu listede yer almaz. */
.hero, .page-hero, .mk-hero, .launch-hero, .cta-card, .feature-card,
.auth-hero, .onboarding-card, .stat-card, .admin-quick-card,
.pricing-card, .empty-state, .setup-warning {
  background-image: none;
}

/* ══ 3. BUTON AILESI ════════════════════════════════════════════════════════
   Bes bicim + bir yuzen. Hepsi 48dp yukseklik ve 12px yaricap paylasir;
   fark VURGU'dur, sekil degil. "Her buton hap" gorunumu kaldirilir. */
.btn, button.btn, a.btn, input[type="submit"], button[type="submit"]:not(.tg-btn):not(.ig-nav-item):not(.mbn-item) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-5);
  font-family: var(--tg-font-ui); font-size: var(--tg-fs-button);
  line-height: var(--tg-lh-button); font-weight: var(--tg-fw-bold);
  border-radius: var(--tg-r-md); border: var(--tg-hairline) solid transparent;
  background: var(--tg-brand); color: var(--tg-on-brand);
  box-shadow: none; letter-spacing: 0; cursor: pointer; text-decoration: none;
  transition: background var(--tg-dur-state) var(--tg-ease),
              border-color var(--tg-dur-state) var(--tg-ease),
              color var(--tg-dur-state) var(--tg-ease),
              transform var(--tg-dur-press) var(--tg-ease);
}
.btn:hover  { background: var(--tg-brand-strong); box-shadow: none; transform: none; }
.btn:active { background: var(--tg-brand-strong); transform: scale(.98); }
.btn.small  { min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4); font-size: var(--tg-fs-meta); }
.btn.block, .btn.full { display: flex; width: 100%; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }

/* Ikincil */
.btn.ghost, .btn.secondary, .btn.outline {
  background: var(--tg-surface); color: var(--tg-brand);
  border-color: var(--tg-brand-border); box-shadow: none;
}
.btn.ghost:hover, .btn.secondary:hover, .btn.outline:hover {
  background: var(--tg-brand-soft); border-color: var(--tg-brand); transform: none;
}
/* Sessiz */
.btn.quiet, .btn.link, .btn.text {
  background: transparent; color: var(--tg-ink-secondary); border-color: transparent;
}
.btn.quiet:hover, .btn.link:hover, .btn.text:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
/* Yikici */
.btn.danger, .btn.delete { background: var(--tg-danger); color: var(--tg-on-danger); }
.btn.danger:hover { background: var(--tg-danger); filter: brightness(.94); }
/* Onay */
.btn.good, .btn.success { background: var(--tg-success); color: var(--tg-ink-inverse); }

/* ══ 4. FORMLAR ═════════════════════════════════════════════════════════════
   Etiket alanin ustunde ve kalici; placeholder etiket yerine gecmez.
   Her kritik hedef 48dp. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select, textarea {
  width: 100%; min-height: var(--tg-tap-min);
  padding: var(--tg-space-3) var(--tg-space-4);
  font-family: var(--tg-font-ui); font-size: var(--tg-fs-body);
  line-height: var(--tg-lh-body); color: var(--tg-ink);
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-md); box-shadow: none;
  transition: border-color var(--tg-dur-state) var(--tg-ease);
}
textarea { min-height: calc(var(--tg-tap-min) * 2); line-height: var(--tg-lh-body); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--tg-ink-muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--tg-brand);
  outline: var(--tg-stroke) solid var(--tg-focus); outline-offset: 0;
  box-shadow: none;
}
input[aria-invalid="true"], .is-error input, .field-error input {
  border-color: var(--tg-danger); background: var(--tg-danger-soft);
}
label { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
/* Eski `label > input` sarmalayici deseni: etiket metni ustte, alan altta. */
label:has(> input), label:has(> select), label:has(> textarea) { display: block; }
label > input, label > select, label > textarea { margin-top: var(--tg-space-2); }
.form-hint, .field-hint, .help-text { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.form-error, .field-error-text { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-danger-ink); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--tg-space-6); }
legend { font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary); padding: 0 0 var(--tg-space-2); }

/* Onay kutusu ve radyo — 40+ icin buyutuldu, marka rengiyle. */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--tg-brand); }

/* ══ 5. KART AILESI ═════════════════════════════════════════════════════════
   VARSAYILAN: duz yuzey + 1px kenarlik, 16px yaricap. Golge YOK.
   Dev yuvarlak kart gorunumu (24-32px) toptan kaldirilir. */
.card, .content-card, .admin-card, .table-card, .legal-card,
.preview-card, .market-card, .discover-card, .onboarding-card,
.mk-seller-card, .job-apply-card, .phone-verify-card {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  box-shadow: none;
}

/* Bolum basligi ritmi — her alt basligi karta koymak yerine. */
.page-head { display: flex; align-items: flex-end; gap: var(--tg-space-4); flex-wrap: wrap; padding: var(--tg-space-6) 0 var(--tg-space-4); }
.page-head h1 { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); margin: 0; }
/* ROTA MOTIFI: bolum basligi bir durak isaretiyle baslar. */
.page-head .eyebrow, .eyebrow {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tg-brand);
  background: none; padding: 0; border-radius: 0;
}
.eyebrow::before {
  content: ""; width: var(--tg-stop-size); height: var(--tg-stop-size);
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active); flex: none;
}

/* ══ 6. PAZAR YERI ══════════════════════════════════════════════════════════
   Kart bir EDITORYAL poster degil, bir KAYITTIR.
   Tarama sirasi: gorsel -> baslik -> fiyat -> spec -> yer/tarih -> satici. */
.mk-grid, .listing-grid, .part-grid, .job-grid {
  display: grid;
  /* 300px alt sinir: 1200'luk icerikte 3 okunur sutun verir. 260 ile 4 dar
     sutun cikiyor ve spec seridi iki satira boluniyordu — ayrac cizgileri
     sarma sonrasi yanlis hizalaniyor. Yogunluk okunurluktan once gelmez. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--tg-space-4);
}
.mk-card, .listing-card, .part-card, .job-card, .am-card {
  display: flex; flex-direction: column;
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  box-shadow: none; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--tg-dur-state) var(--tg-ease);
}
.mk-card:hover, .listing-card:hover, .part-card:hover, .job-card:hover {
  border-color: var(--tg-brand-border); transform: none; box-shadow: none;
}
.mk-card-img, .listing-card-img, .part-card-img {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--tg-surface-raised); border-radius: 0;
}
.mk-card-img img, .listing-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-card-body, .listing-card-body, .part-card-body, .job-card-body {
  display: flex; flex-direction: column; gap: var(--tg-space-2);
  padding: var(--tg-space-3) var(--tg-space-4) var(--tg-space-4);
}
.mk-card-title, .listing-card-title, .job-card-title {
  font-size: var(--tg-fs-card); line-height: var(--tg-lh-card);
  font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* FIYAT — ekrandaki en yuksek sesli oge. */
.mk-price, .listing-price, .part-price {
  font-size: var(--tg-fs-price); line-height: var(--tg-lh-price);
  font-weight: var(--tg-fw-bold); letter-spacing: -.02em;
  color: var(--tg-ink); margin: 0;
}
/* SPEC SATIRI — yil/KM/koltuk. Barlow Condensed BURADA kazanir: uc deger
   yan yana ayni optik ritimde okunur, tarama hizini gercekten artirir. */
.mk-meta {
  display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap;
  font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-section); line-height: var(--tg-lh-section);
  font-weight: var(--tg-fw-semi); letter-spacing: .01em;
  color: var(--tg-ink); font-variant-numeric: tabular-nums;
}
.mk-city, .listing-card-meta-row, .mk-date {
  display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap;
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-regular); color: var(--tg-ink-secondary);
}
/* Gorsel ustundeki kategori etiketi — sayac cipi dilbilgisi. */
.mk-cat, .listing-card-badges > span, .mk-badge {
  position: absolute; left: var(--tg-space-2); top: var(--tg-space-2);
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-2); border-radius: var(--tg-r-sm);
  background: var(--tg-media-chip); color: var(--tg-ink-on-media);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  letter-spacing: .02em; box-shadow: none;
}
/* SATICI GUVENI — siniflandirma plakasi. Rozet yigini degil. */
.mk-seller-tag, .seller-tag, .mk-corp {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  height: var(--tg-space-6); padding: 0 var(--tg-space-3);
  background: var(--tg-surface-raised); color: var(--tg-ink);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-sm);
  font-size: var(--tg-fs-caption); line-height: 1; font-weight: var(--tg-fw-bold);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.mk-seller-tag::before, .mk-corp::before {
  content: ""; width: var(--tg-rail-w); align-self: stretch;
  margin: var(--tg-space-1) 0; background: var(--tg-brand); border-radius: var(--tg-rail-w);
}
/* Tanitim/one cikarma durumu — icerigin DURUMU, kimligi degil. */
.mk-promo, .promo-tag, .listing-promo {
  display: inline-flex; align-items: center; gap: var(--tg-space-1);
  height: var(--tg-space-6); padding: 0 var(--tg-space-2);
  border-radius: var(--tg-r-sm);
  background: var(--tg-info-soft); color: var(--tg-info-ink);
  border: var(--tg-hairline) solid var(--tg-info-border);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
}

/* ══ 7. FILTRE / SIRALAMA — ISLEMSEL ═══════════════════════════════════════
   Sonuc sayisi solda, aksiyonlar sagda. Dev form karti yok. */
.mk-toolbar, .listing-toolbar, .filter-bar {
  display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap;
  padding: var(--tg-space-3) 0;
}
.mk-count, .result-count { flex: 1; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); }
.mk-chips, .chip-row, .role-filter-row {
  display: flex; gap: var(--tg-space-2); overflow-x: auto;
  padding-bottom: var(--tg-space-1); scrollbar-width: none;
}
.mk-chips::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display: none; }
/* CIP — hap bicimi BURAYA ait: bir secim, bir aksiyon degil. */
.mk-chip, .chip, .role-filter-btn, .filter-toggle-btn {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4);
  background: var(--tg-surface); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-pill);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-semi); white-space: nowrap;
  text-decoration: none; box-shadow: none; cursor: pointer;
  transition: background var(--tg-dur-state) var(--tg-ease), border-color var(--tg-dur-state) var(--tg-ease), color var(--tg-dur-state) var(--tg-ease);
}
.mk-chip:hover, .chip:hover, .role-filter-btn:hover { border-color: var(--tg-brand-border); color: var(--tg-ink); }
.mk-chip.active, .chip.active, .role-filter-btn.active,
.mk-chip[aria-pressed="true"], .chip[aria-current="true"] {
  background: var(--tg-brand-soft); color: var(--tg-brand);
  border-color: var(--tg-brand); font-weight: var(--tg-fw-bold);
}
/* NOT (Faz 2.6): `.mk-filters` panel stili KALDIRILDI. Filtre artik pazar
   yeri KONTROL GUVERTESININ bir parcasi (`.mk-filters--deck`, bkz.
   components.css §22) ve kendi kutusu yok. Buradaki kural guverteyi
   eziyordu, cunku bu dosya components.css'ten sonra yukleniyor. */
.filter-panel {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  padding: var(--tg-space-4);
  box-shadow: none;
}
details.mk-filters > summary, details.filter-panel > summary {
  display: flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); cursor: pointer; list-style: none;
  font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink);
}
details.mk-filters > summary::-webkit-details-marker { display: none; }

/* ══ 8. ILAN DETAYI ═════════════════════════════════════════════════════════
   Her alan ayri bir kart DEGIL. Bolum ritmi. */
.detail-section, .mk-detail-section, .listing-detail-section {
  padding: var(--tg-space-6) 0;
  border-top: var(--tg-hairline) solid var(--tg-divider);
}
.detail-section:first-child { border-top: 0; padding-top: 0; }
.detail-section > h2, .detail-section > h3 {
  font-size: var(--tg-fs-section); line-height: var(--tg-lh-section);
  font-weight: var(--tg-fw-bold); margin: 0 0 var(--tg-space-3);
}
/* NOT (Faz 2.6): `.mk-specs` BURADAN KALDIRILDI. Teknik ozellikler artik
   anlamsal gruplar halinde ve bolmeler "gap = kenarlik" numarasiyla degil
   hucre ic golgesiyle ciziliyor (components.css §22) — o numara, bir grupta
   sutundan az alan oldugunda bos izi GRI BLOK olarak birakiyordu.
   Buradaki kural components.css'i eziyordu, cunku bu dosya sonra yukleniyor. */
.spec-list, .detail-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--tg-hairline);
  background: var(--tg-border);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-md); overflow: hidden;
}
.spec-list > *, .detail-specs > * {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--tg-space-3);
  background: var(--tg-surface); padding: var(--tg-space-3) var(--tg-space-4);
  font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary);
}
.spec-list b, .spec-list strong, .detail-specs b {
  font-family: var(--tg-font-numeric); font-size: var(--tg-fs-section);
  font-weight: var(--tg-fw-semi); color: var(--tg-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* ══ 9. SATIR DILBILGISI (ayarlar, listeler) ════════════════════════════════
   Ayar satiri KART DEGILDIR. Bolum basligi + sac teli cizgiyle ayrilmis
   satirlar. Ikon cizgidir, renkli kare icinde degil. */
.settings-list, .row-list, .link-list, .account-list {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); overflow: hidden;
}
.settings-row, .row-item, .account-row, .link-list > a {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0;
  color: var(--tg-ink); text-decoration: none; box-shadow: none;
  transition: background var(--tg-dur-state) var(--tg-ease);
}
.settings-row + .settings-row, .row-item + .row-item, .link-list > a + a {
  box-shadow: inset 0 1px 0 var(--tg-divider);
}
.settings-row:hover, .row-item:hover, .link-list > a:hover { background: var(--tg-surface-raised); }
.settings-row-title, .row-title { font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.settings-row-desc, .row-desc { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.settings-group-label, .row-group-label {
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tg-ink-secondary);
  padding: var(--tg-space-5) var(--tg-space-1) var(--tg-space-2);
}

/* ══ 10. TABLOLAR (admin) ══════════════════════════════════════════════════ */
.table-card { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--tg-fs-meta); }
thead th {
  text-align: left; padding: var(--tg-space-3) var(--tg-space-4);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: var(--tg-hairline) solid var(--tg-border);
}
tbody td { padding: var(--tg-space-3) var(--tg-space-4); border-top: var(--tg-hairline) solid var(--tg-divider); color: var(--tg-ink); vertical-align: top; }
tbody tr:hover { background: var(--tg-surface-raised); }

/* ══ 11. ROZET / DURUM ═════════════════════════════════════════════════════ */
.badge, .status-badge, .tag {
  display: inline-flex; align-items: center; gap: var(--tg-space-1);
  height: var(--tg-space-6); padding: 0 var(--tg-space-2);
  border-radius: var(--tg-r-sm); box-shadow: none;
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
}
.badge.good, .badge.success, .status-approved { background: var(--tg-success-soft); color: var(--tg-success-ink); border-color: var(--tg-success-border); }
.badge.warn, .badge.warning, .status-pending  { background: var(--tg-warning-soft); color: var(--tg-warning-ink); border-color: var(--tg-warning-border); }
.badge.bad,  .badge.danger,  .status-rejected { background: var(--tg-danger-soft);  color: var(--tg-danger-ink);  border-color: var(--tg-danger-border); }
.badge.info { background: var(--tg-info-soft); color: var(--tg-info-ink); border-color: var(--tg-info-border); }
/* Dogrulama — TEK isaret, marka renginde. */
.bt-verified, .verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-5); height: var(--tg-space-5);
  color: var(--tg-brand); background: none; border: 0; font-style: normal; flex: none;
}

/* ══ 12. FLASH / TOAST ═════════════════════════════════════════════════════ */
.flash-container { position: fixed; left: 50%; transform: translateX(-50%); top: var(--tg-space-4); z-index: 900; width: min(560px, calc(100vw - var(--tg-space-8))); display: flex; flex-direction: column; gap: var(--tg-space-2); }
.flash {
  display: flex; align-items: center; gap: var(--tg-space-3);
  padding: var(--tg-space-3) var(--tg-space-4);
  border-radius: var(--tg-r-md); box-shadow: var(--tg-elev-pop);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); font-weight: var(--tg-fw-medium);
  background: var(--tg-surface); color: var(--tg-ink);
  border: var(--tg-hairline) solid var(--tg-border);
}
.flash-success { background: var(--tg-success-soft); color: var(--tg-success-ink); border-color: var(--tg-success-border); }
.flash-error, .flash-danger { background: var(--tg-danger-soft); color: var(--tg-danger-ink); border-color: var(--tg-danger-border); }
.flash-warning { background: var(--tg-warning-soft); color: var(--tg-warning-ink); border-color: var(--tg-warning-border); }
.flash-info { background: var(--tg-info-soft); color: var(--tg-info-ink); border-color: var(--tg-info-border); }
.flash span { flex: 1; }
.flash-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-6); height: var(--tg-space-6); flex: none;
  background: none; border: 0; color: currentColor; cursor: pointer; opacity: .7;
}
.flash-close:hover { opacity: 1; }
.setup-warning {
  background: var(--tg-warning-soft); color: var(--tg-warning-ink);
  border-bottom: var(--tg-hairline) solid var(--tg-warning-border);
  padding: var(--tg-space-2) 0; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
}

/* ══ 13. BOS / HATA / ISKELET ══════════════════════════════════════════════
   Glif + tek cumle + TEK birincil aksiyon. Emoji yok. */
.empty-state, .mk-empty, .no-results {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--tg-space-3); padding: var(--tg-space-12) var(--tg-space-6);
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none;
  color: var(--tg-ink-secondary);
}
.empty-state p, .mk-empty p, .no-results p {
  font-size: var(--tg-fs-body); line-height: var(--tg-lh-body);
  color: var(--tg-ink-secondary); max-width: 44ch; margin: 0;
}
.empty-state-title, .mk-empty h3 { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0; }
/* Emoji tabanli bos-durum grafigi kaldirilir; yerine glif gelir (PHP'de). */
.mk-empty-emoji, .empty-state-emoji { display: none; }
.error-card, .not-found-card {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-8);
  text-align: center;
}
.bt-skeleton, .skeleton {
  background: var(--tg-surface-sunken); border-radius: var(--tg-r-sm);
  background-image: none;
}

/* ══ 14. SOSYAL AKIS ═══════════════════════════════════════════════════════
   Icerik once, cerceve minimum. Medya tam genislik. Instagram giydirmesi yok. */
.feed-card, .bt-social-card, .vitrin-feed-card {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  box-shadow: none; overflow: hidden;
}
.feed-card-header, .bt-social-post__header { padding: var(--tg-space-3) var(--tg-space-4); gap: var(--tg-space-3); }
.bt-post-author b, .feed-card-author { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
/* ROL SATIRI — BusTop'a ozgu: kimin konustugu icerik kadar onemli. */
.bt-post-author small, .feed-card-role { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); font-weight: var(--tg-fw-regular); }
.feed-card-body, .bt-social-card__body { padding: 0 var(--tg-space-4) var(--tg-space-3); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); }
.feed-card-img-wrap, .bt-social-card__media, .vitrin-feed-img-wrap { background: var(--tg-surface-raised); border-radius: 0; }
.feed-card-actions, .bt-social-card__actions { display: flex; align-items: center; gap: var(--tg-space-1); padding: var(--tg-space-1) var(--tg-space-2); border-top: var(--tg-hairline) solid var(--tg-divider); }
.feed-action-btn, .like-btn, .comment-btn, .save-btn, .share-btn {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-3);
  background: transparent; border: 0; border-radius: var(--tg-r-md);
  color: var(--tg-ink-secondary);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); cursor: pointer;
  transition: color var(--tg-dur-toggle) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease);
}
.feed-action-btn:hover, .like-btn:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
/* SECILI DURUM: kalp secilmedigi surece ASLA kirmizi degil. */
.like-btn.liked, .feed-action-btn.liked, .like-btn[aria-pressed="true"] { color: var(--tg-like); }
.save-btn.saved, .feed-action-btn.saved, .save-btn[aria-pressed="true"] { color: var(--tg-brand); }
/* Yorum — baglamsal, ayri bir kart degil. */
.comment-item, .bt-comment { display: flex; gap: var(--tg-space-3); padding: var(--tg-space-3) var(--tg-space-4); }
.comment-bubble { background: var(--tg-surface-raised); border-radius: var(--tg-r-md); padding: var(--tg-space-2) var(--tg-space-3); }
/* Hikaye halkasi — okunmamis marka mavisi, okunmus sessiz kenar. Gradyan yok. */
.story-ring, .story-avatar-ring { background: var(--tg-brand); background-image: none; padding: 3px; border-radius: var(--tg-r-pill); }
.story-ring.seen, .story-avatar-ring.seen { background: var(--tg-border-strong); }

/* ══ 15. CLIPS ═════════════════════════════════════════════════════════════
   Tam ekran medya, siyah zemin. Kontroller 48dp, koyu sis uzerinde beyaz. */
.bt-reel-card, .clip-card { background: var(--tg-media); border-radius: var(--tg-r-lg); overflow: hidden; box-shadow: none; }
.bt-reel-info, .clip-info { color: var(--tg-ink-on-media); }
.bt-reel-author strong, .clip-author { font-size: var(--tg-fs-card); font-weight: var(--tg-fw-bold); }
.bt-reel-actions button, .clip-action {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: var(--tg-tap-min); min-height: var(--tg-tap-min);
  background: transparent; border: 0; cursor: pointer;
  color: var(--tg-ink-on-media);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  text-shadow: var(--tg-media-shadow);
}
/* Secilmemis begeni notr beyaz; secili begeni dolu ve sicak kirmizi. */
.bt-reel-actions button.liked, .clip-action.liked { color: var(--tg-like); }
.bt-reel-actions button.saved, .clip-action.saved { color: var(--tg-accent); }

/* ══ 16. MESAJLASMA ════════════════════════════════════════════════════════
   Yogun ve okunur. Dev balon yaricapi yok. */
.dm-conv-item, .conversation-item {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  border-radius: 0; box-shadow: none; background: transparent;
  border-bottom: var(--tg-hairline) solid var(--tg-divider);
}
.dm-conv-item:hover { background: var(--tg-surface-raised); }
.dm-conv-item.unread { background: var(--tg-brand-softer); }
.dm-bubble, .message-bubble {
  max-width: 76%; padding: var(--tg-space-2) var(--tg-space-3);
  border-radius: var(--tg-r-md); box-shadow: none;
  font-size: var(--tg-fs-body); line-height: var(--tg-lh-body);
  background: var(--tg-surface-raised); color: var(--tg-ink);
  border: var(--tg-hairline) solid var(--tg-border);
}
.dm-bubble.mine, .message-bubble.mine {
  background: var(--tg-brand); color: var(--tg-on-brand); border-color: var(--tg-brand);
}
.dm-composer, .message-composer {
  display: flex; align-items: flex-end; gap: var(--tg-space-2);
  padding: var(--tg-space-2) var(--tg-space-3);
  background: var(--tg-surface); border-top: var(--tg-hairline) solid var(--tg-border);
}

/* ══ 17. BILDIRIMLER ═══════════════════════════════════════════════════════
   Kompakt liste. Her bildirim bagimsiz bir kart DEGIL. */
.notif-item, .notification-row {
  display: flex; align-items: flex-start; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: var(--tg-hairline) solid var(--tg-divider);
}
.notif-item:hover { background: var(--tg-surface-raised); }
.notif-item.unread, .notification-row.unread { background: var(--tg-brand-softer); }
.notif-text { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); }
.notif-time, .notif-meta { font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
/* Okunmamis isareti — nokta, rota motifiyle ayni dil. */
.notif-dot { width: var(--tg-space-2); height: var(--tg-space-2); border-radius: var(--tg-r-pill); background: var(--tg-brand); flex: none; }

/* ══ 18. ISTATISTIK ════════════════════════════════════════════════════════
   Jenerik SaaS panosu degil: guclu sayi, acik donem, gercek kiyas. */
.metric-card, .stat-card {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-4);
}
.metric-value, .stat-value, .stat-number {
  font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-display); line-height: var(--tg-lh-display);
  font-weight: var(--tg-fw-semi); color: var(--tg-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.metric-label, .stat-label {
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-semi);
  letter-spacing: .05em; text-transform: uppercase; color: var(--tg-ink-secondary);
}
.metric-delta.up   { color: var(--tg-success-ink); }
.metric-delta.down { color: var(--tg-danger-ink); }

/* ══ 19. SHEET / MODAL — gercekten yuzen, golge BURADA anlamli ═════════════ */
.create-modal, .modal, .sheet, .bt-sheet {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-xl) var(--tg-r-xl) 0 0;
  box-shadow: var(--tg-elev-sheet);
}
.modal-centered, .story-modal-inner { border-radius: var(--tg-r-lg); box-shadow: var(--tg-elev-modal); }
.create-modal-overlay, .modal-overlay, .sidebar-overlay { background: var(--tg-scrim); backdrop-filter: none; }
.create-modal-handle { width: var(--tg-space-10); height: var(--tg-space-1); margin: var(--tg-space-3) auto var(--tg-space-2); border-radius: var(--tg-r-pill); background: var(--tg-border-strong); }
.create-modal-title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); padding: 0 var(--tg-space-4) var(--tg-space-3); }
/* Olustur secenekleri — satir dilbilgisi, ozellik-karti izgarasi degil. */
.create-options { display: flex; flex-direction: column; gap: 0; padding: 0 var(--tg-space-3); }
.create-option-card {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3);
  background: transparent; border: 0; border-radius: var(--tg-r-md);
  box-shadow: none; text-decoration: none; color: var(--tg-ink);
}
.create-option-card + .create-option-card { box-shadow: inset 0 1px 0 var(--tg-divider); }
.create-option-card:hover { background: var(--tg-surface-raised); }
/* Ikon renkli kare icinde DEGIL — cizgi glif. */
.create-option-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-6); height: var(--tg-space-6); flex: none;
  background: none; border-radius: 0; color: var(--tg-ink-secondary);
}
.create-option-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--tg-stroke); stroke-linecap: round; stroke-linejoin: round; }
.create-option-label { font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.create-option-desc  { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.create-modal-close { width: 100%; min-height: var(--tg-tap-min); margin-top: var(--tg-space-3); background: transparent; border: 0; color: var(--tg-ink-secondary); font-size: var(--tg-fs-button); font-weight: var(--tg-fw-bold); cursor: pointer; }

/* ══ 20. KABUK: UST CUBUK, KENAR CUBUGU, ALT MENU, ALT BILGI ═══════════════ */
.topbar, .mobile-topbar {
  background: var(--tg-surface);
  border-bottom: var(--tg-hairline) solid var(--tg-border);
  box-shadow: none; backdrop-filter: none;
}
.topnav-link {
  display: inline-flex; align-items: center; min-height: var(--tg-tap-compact);
  padding: 0 var(--tg-space-3); border-radius: var(--tg-r-md);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  color: var(--tg-ink-secondary); text-decoration: none;
}
.topnav-link:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
/* AKTIF DURUM — rota segmenti + durak noktasi. */
.topnav-link.active { color: var(--tg-brand); font-weight: var(--tg-fw-bold); background: none; position: relative; }
.topnav-link.active::after {
  content: ""; position: absolute; left: var(--tg-space-3); right: var(--tg-space-3); bottom: -2px;
  height: var(--tg-rail-w); background: var(--tg-rail-active); border-radius: var(--tg-rail-w);
}
.brand-wordmark, .ig-sidebar-wordmark { font-family: var(--tg-font-ui); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-ink); }

.ig-sidebar { background: var(--tg-surface); border-right: var(--tg-hairline) solid var(--tg-border); box-shadow: none; }
.ig-nav-item {
  display: flex; align-items: center; gap: var(--tg-space-3);
  width: 100%; min-height: var(--tg-tap-min); padding: 0 var(--tg-space-3);
  border-radius: var(--tg-r-md); border: 0; background: transparent;
  color: var(--tg-ink); text-decoration: none; box-shadow: none;
  font-size: var(--tg-fs-body); font-weight: var(--tg-fw-medium); cursor: pointer;
  transition: background var(--tg-dur-state) var(--tg-ease);
}
.ig-nav-item:hover { background: var(--tg-surface-raised); }
.ig-nav-item.active { color: var(--tg-brand); font-weight: var(--tg-fw-bold); background: var(--tg-brand-soft); }
.ig-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tg-space-6); height: var(--tg-space-6); flex: none; color: currentColor; }
.ig-nav-label { flex: 1; min-width: 0; text-align: left; }
.ig-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-space-5); height: var(--tg-space-5); padding: 0 var(--tg-space-1);
  border-radius: var(--tg-r-pill); background: var(--tg-danger); color: var(--tg-on-danger);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); flex: none;
}

.mobile-bottom-nav {
  background: var(--tg-surface);
  border-top: var(--tg-hairline) solid var(--tg-border);
  box-shadow: none; backdrop-filter: none;
}
.mbn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; background: transparent; border: 0; cursor: pointer;
  color: var(--tg-ink-secondary);
  font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption); font-weight: var(--tg-fw-semi);
  text-decoration: none;
}
/* Etiket HER ZAMAN gorunur — yalniz ikon 40+ icin ogrenilen bir sifredir. */
.mbn-item span { display: block; }
.mbn-item.active { color: var(--tg-brand); font-weight: var(--tg-fw-bold); }
.mbn-create-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-8); height: var(--tg-space-8);
  border-radius: var(--tg-r-md); background: var(--tg-brand); color: var(--tg-on-brand);
  box-shadow: none;
}

.footer { background: var(--tg-surface); border-top: var(--tg-hairline) solid var(--tg-border); color: var(--tg-ink-secondary); font-size: var(--tg-fs-meta); }
.footer a { color: var(--tg-ink-secondary); text-decoration: none; }
.footer a:hover { color: var(--tg-brand); }

/* Kuresel arama */
.global-search-input {
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  border-radius: var(--tg-r-md); border: var(--tg-hairline) solid var(--tg-border-strong);
  background: var(--tg-surface); font-size: var(--tg-fs-body); box-shadow: none;
}
.global-search-dropdown {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-md); box-shadow: var(--tg-elev-pop);
}

/* ══ 21. KIMLIK DOGRULAMA ══════════════════════════════════════════════════
   Profesyonel ve sakin. Pazarlama kahramani, dev gradyan, dekoratif sekil yok. */
.auth-card, .login-card {
  max-width: 420px; margin: var(--tg-space-10) auto;
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-6);
  background-image: none;
}
.login-card-header, .auth-header { text-align: left; padding: 0 0 var(--tg-space-5); }
.login-card-header h1, .auth-header h1 { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); margin: 0 0 var(--tg-space-2); }
.auth-sub { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink-secondary); }

/* ══ 22. MAGAZA / PROFESYONEL SATICI ═══════════════════════════════════════
   Buyutulmus sosyal profil DEGIL. Kapak alcak, ilk ekranda ilan gorunur. */
.store-header, .mk-store-header, .seller-header {
  background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border);
  border-radius: 0; box-shadow: none;
}
.store-cover, .mk-store-cover { height: 120px; object-fit: cover; background: var(--tg-surface-raised); }
.store-name, .mk-store-name { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
.store-trust { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; }

/* ══ 23. SEKMELER ══════════════════════════════════════════════════════════ */
.tabs, .tab-nav, .profile-tabs {
  display: flex; gap: var(--tg-space-1); overflow-x: auto; scrollbar-width: none;
  background: var(--tg-surface); border-bottom: var(--tg-hairline) solid var(--tg-border);
}
.tabs::-webkit-scrollbar, .tab-nav::-webkit-scrollbar { display: none; }
.tab, .tab-nav a, .profile-tab {
  position: relative; flex: none; display: inline-flex; align-items: center;
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0; white-space: nowrap;
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  color: var(--tg-ink-secondary); text-decoration: none; cursor: pointer;
}
.tab:hover, .tab-nav a:hover { color: var(--tg-ink); }
.tab.active, .tab-nav a.active, .profile-tab.active { color: var(--tg-brand); font-weight: var(--tg-fw-bold); background: none; }
/* Rota segmenti + durak noktasi — tek basina alt cizgi 40+ icin zayif. */
.tab.active::after, .tab-nav a.active::after {
  content: ""; position: absolute; left: var(--tg-space-3); right: var(--tg-space-3); bottom: 0;
  height: var(--tg-rail-w); background: var(--tg-rail-active); border-radius: var(--tg-rail-w);
}
.tab.active::before, .tab-nav a.active::before {
  content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--tg-rail-w));
  width: var(--tg-space-2); height: var(--tg-space-2); margin-left: calc(var(--tg-space-2) / -2);
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
  border: var(--tg-rail-w) solid var(--tg-surface);
}

/* ══ 24. IKON SISTEMI — uretim isaretlemesinde ═════════════════════════════
   PHP'de <svg class="tg-i"><use href="#tg-..."/></svg> olarak kullanilir.
   Cizim ozellikleri KOKTE durur: `<use>` golge agacina yalniz kalitim gecer. */
.tg-i {
  display: inline-block; width: var(--tg-space-6); height: var(--tg-space-6);
  flex: none; vertical-align: middle; color: inherit;
  fill: none; stroke: currentColor; stroke-width: var(--tg-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.tg-i--sm { width: var(--tg-space-5); height: var(--tg-space-5); }
.tg-i--xs { width: var(--tg-space-4); height: var(--tg-space-4); }
.tg-i--lg { width: var(--tg-space-8); height: var(--tg-space-8); }
.tg-i--xl { width: 64px; height: 64px; }
.tg-i.is-filled { fill: currentColor; }

/* ══ 25. DUYARLI DAVRANIS ══════════════════════════════════════════════════
   Oluk 16 -> 24 -> 32. Yatay tasma hicbir genislikte kabul edilmez. */
html, body { overflow-x: hidden; }
@media (min-width: 768px)  { :root { --tg-gutter: 24px; } }
@media (min-width: 1024px) { :root { --tg-gutter: 32px; } }
@media (max-width: 640px) {
  /* Pazar yeri mobilde tek sutun degil, iki sutun: tarama hizi icin
     kritik. Kart yeterince yogun oldugu icin 2 sutun okunur kalir. */
  .mk-grid, .listing-grid, .part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tg-space-3); }
  .mk-card-body { padding: var(--tg-space-2) var(--tg-space-3) var(--tg-space-3); }
  .mk-price { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
  .mk-meta  { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); }
  .mk-card-title { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); }
}
/* TEK SUTUN ESIGI 400 -> 480.
   430px (iPhone 14 Pro Max) mobil bir genislik ama iki sutuna dusuyordu;
   kart ~190px kaliyor, fiyat ve Transit Data Plate okunmaz hale geliyordu.
   Olculdu: 430'da 2 sutun, 390'da 1 sutun. Mobil tek sutundur. */
@media (max-width: 480px) {
  .mk-grid, .listing-grid, .part-grid { grid-template-columns: 1fr; }
  .mk-card { flex-direction: row; }
  .mk-card-img { width: 108px; aspect-ratio: 4 / 3; flex: none; }
  .mk-card-body { flex: 1; min-width: 0; }
  .mk-card-title { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); }
}

/* ══ 26. HAREKETI AZALT ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ══ 27. PAZAR YERI — KART YAPISI (Faz 2 isaretleme gocu) ══════════════════
   `vnext_pages.php` icindeki kart artik sabit hiyerarsiyi uretiyor:
   gorsel > baslik > fiyat > marka/model > spec > yer·tarih > satici.
   Buradaki kurallar O yapiyi cizer. */

/* Marka/model — baslik ile spec arasinda sessiz bir kimlik satiri. */
.mk-model {
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* SPEC SERIDI — arac bilgi panosu. Degerler sac teli ayracla bolunur;
   kartin icinde ikinci bir kart olusturmaz. */
/* Esit sutunlar, SARMAYAN tek satir: ayrac cizgileri her zaman hizali kalir.
   Sarmaya izin verilseydi ikinci satirin ilk ogesi bas ayrac gosterirdi. */
.mk-meta { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; flex-wrap: nowrap; }
.mk-cardspec {
  /* Ad bilincli: `.mk-spec` DETAY sayfasinin cerceveli ozellik kutusudur ve
     kart seridiyle ayni sey degildir. Ayni adi kullanmak, detaydaki kutu
     stilini kartin icine tasiyordu. */
  position: relative; min-width: 0; padding-right: var(--tg-space-2);
  background: none; border: 0; border-radius: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-cardspec + .mk-cardspec { padding-left: var(--tg-space-3); }
.mk-cardspec + .mk-cardspec::before {
  content: ""; position: absolute; left: 0; top: 15%; bottom: 15%;
  width: var(--tg-hairline); background: var(--tg-border);
}

/* Yer · tarih — tek satir, glif + metin. */
.mk-city { gap: var(--tg-space-1); }
.mk-city .tg-i { color: var(--tg-ink-muted); }
.mk-city > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-dot { width: 3px; height: 3px; border-radius: var(--tg-r-pill); background: var(--tg-ink-muted); flex: none; margin: 0 var(--tg-space-1); }
.mk-date { color: var(--tg-ink-secondary); white-space: nowrap; }

/* Guven satiri — siniflandirma + tanitim, en fazla iki oge yan yana. */
.mk-trust { display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap; margin-top: var(--tg-space-1); }
.mk-seller-tag .tg-i { color: var(--tg-brand); margin-left: var(--tg-space-1); }

/* Gorseli olmayan ilan — sahte fotograf yok, durust bir yuzey ve glif. */
.mk-noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--tg-surface-raised); color: var(--tg-ink-muted);
}
.mk-noimg .tg-i { width: var(--tg-space-8); height: var(--tg-space-8); }

/* Kurumsal etiketi gorselin SAG ustunde — kategori solda kalir. */
.mk-corp { left: auto; right: var(--tg-space-2); }

/* ══ 28. PAZAR YERI — FILTRE / SIRALAMA GRAMERI ════════════════════════════
   Tek etkilesim dilbilgisi: Ara · Filtrele · Sırala · sonuç · aktif · temizle.
   Masaustunde panel, mobilde tam genislik. Dev form karti yok. */
.mk-wrap { padding-bottom: var(--tg-space-10); }
.mk-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--tg-space-4); flex-wrap: wrap;
  padding: var(--tg-space-6) 0 var(--tg-space-4);
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.mk-h1 { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); margin: 0; }
.mk-head .muted { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); margin: var(--tg-space-1) 0 0; }

.mk-search { display: flex; gap: var(--tg-space-2); align-items: stretch; }
.mk-search input { flex: 1 1 auto; min-width: 0; }
/* `flex: none` + ic bosluk, dar ekranda kabi tasiyordu. Kucultulebilir yap. */
.mk-search .btn { flex: 0 0 auto; padding: 0 var(--tg-space-4); }

/* "Filtrele" bir ozet satiridir; acildiginda alan izgarasi gelir. */
.mk-adv { margin-top: var(--tg-space-2); }
.mk-adv > summary {
  display: flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-2);
  list-style: none; cursor: pointer; border-radius: var(--tg-r-md);
  font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink);
}
.mk-adv > summary::-webkit-details-marker { display: none; }
.mk-adv > summary:hover { background: var(--tg-surface-raised); }
/* Acilir/kapanir yon gostergesi: dondurulen bir sevron. Unicode ok kullanilmaz. */
.mk-adv > summary::before {
  content: ""; width: var(--tg-space-2); height: var(--tg-space-2); flex: none;
  border-right: var(--tg-stroke) solid var(--tg-ink-muted);
  border-bottom: var(--tg-stroke) solid var(--tg-ink-muted);
  transform: rotate(-45deg); margin: 0 var(--tg-space-1);
  transition: transform var(--tg-dur-state) var(--tg-ease);
}
.mk-adv[open] > summary::before { transform: rotate(45deg); }
/* Aktif filtre sayaci — ozetin uzerinde, gorulur. */
.mk-adv .mk-badge {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-space-5); height: var(--tg-space-5); padding: 0 var(--tg-space-1);
  border-radius: var(--tg-r-pill); background: var(--tg-brand); color: var(--tg-on-brand);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
}
.mk-fgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--tg-space-3); padding: var(--tg-space-3) var(--tg-space-2) 0;
}
.mk-fgrid > label { display: block; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.mk-fgrid > label > input, .mk-fgrid > label > select, .mk-range { margin-top: var(--tg-space-2); }
.mk-range { display: flex; gap: var(--tg-space-2); }
.mk-chks { display: flex; gap: var(--tg-space-4); flex-wrap: wrap; align-items: center; grid-column: 1 / -1; }
.mk-chk { display: inline-flex; align-items: center; gap: var(--tg-space-2); min-height: var(--tg-tap-min); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-medium); color: var(--tg-ink); cursor: pointer; }
.mk-chk input { width: 20px; height: 20px; margin: 0; }
.mk-fact { display: flex; align-items: center; gap: var(--tg-space-4); padding: var(--tg-space-4) var(--tg-space-2) var(--tg-space-1); }
.mk-clear { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); text-decoration: none; }
.mk-clear:hover { color: var(--tg-danger-ink); }

/* Sonuc cubugu — sayi solda, siralama sagda. */
.mk-result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tg-space-3); flex-wrap: wrap;
  padding: var(--tg-space-4) 0 var(--tg-space-3);
}
.mk-count { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); }
.mk-sort { display: inline-flex; align-items: center; gap: var(--tg-space-2); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); }
.mk-sort select { width: auto; min-width: 160px; min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-3); font-size: var(--tg-fs-meta); }

/* Sayfalama — 48dp hedef. */
.mk-pager { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; justify-content: center; padding: var(--tg-space-6) 0 0; }
.mk-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-tap-min); min-height: var(--tg-tap-min); padding: 0 var(--tg-space-3);
  border-radius: var(--tg-r-md); border: var(--tg-hairline) solid var(--tg-border-strong);
  background: var(--tg-surface); color: var(--tg-ink-secondary);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); text-decoration: none;
}
.mk-page:hover { border-color: var(--tg-brand-border); color: var(--tg-ink); }
.mk-page.active { background: var(--tg-brand-soft); border-color: var(--tg-brand); color: var(--tg-brand); font-weight: var(--tg-fw-bold); }

/* Bos durum glifi */
.mk-empty .tg-i { color: var(--tg-ink-muted); }

@media (max-width: 640px) {
  .mk-head { padding-top: var(--tg-space-4); }
  .mk-model { display: none; }          /* dar ekranda baslik zaten tasiyor */
  .mk-result-bar { padding-top: var(--tg-space-3); }
  .mk-sort select { min-width: 128px; }
  /* Esit sutunlar dar ekranda degeri kirpiyor ("220.00…"). Akan satira gec:
     deger TAM okunur, ayrac yerini nokta alir. Kirpilmis bir KM degeri,
     hizali bir ayractan daha kotudur. */
  .mk-meta { display: flex; flex-wrap: wrap; column-gap: var(--tg-space-2); row-gap: 2px; }
  .mk-cardspec { padding-right: 0; }
  .mk-cardspec + .mk-cardspec { padding-left: var(--tg-space-3); }
  .mk-cardspec + .mk-cardspec::before { top: 25%; bottom: 25%; }
  /* ARAMA SATIRI ARTIK YIGILMIYOR.
     Onceden `flex-wrap: wrap` + iki ogeye de `flex: 1 1 100%` veriliyordu;
     kutu ve "Ara" alt alta geciyordu. Olculdu: kontrol guvertesi mobilde
     222px, ilk ilan 678px asagida — kullanici tek bir ilan gormeden yarim
     ekran kaydiriyordu. 390px'te kutu (~270px) ve buton (~90px) yan yana
     rahat siğiyor. */
  .mk-search { flex-wrap: nowrap; }
  .mk-search input { flex: 1 1 auto; min-width: 0; }
  .mk-search .btn { flex: 0 0 auto; width: auto; padding: 0 var(--tg-space-4); white-space: nowrap; }
}

/* ══ 29. PAZAR YERI — DAR EKRAN SATIR KARTI (<=400) ════════════════════════
   390'da kart satira doner: sol 108px gorsel, sag icerik. Bu genislikte
   gorsel ustundeki kategori/kurumsal etiketleri okunamayacak kadar kucuk
   kaliyor ve gorselin kenarindan tasiyor — kaldirilirlar. Kategori zaten
   baslikta ve cip satirinda var; ayni bilgiyi ucuncu kez gostermek yer
   harcamaktan baska is yapmiyor. */
@media (max-width: 480px) {
  .mk-cat, .mk-corp { display: none; }
  .mk-card-img { border-radius: 0; }
  /* Yer · tarih tek satirda kalsin; sigmiyorsa tarih kirpilir, yer degil. */
  .mk-city { flex-wrap: nowrap; }
  .mk-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Sonuc cubugu: sayi solda, siralama sagda — ortalanmasin. */
  .mk-result-bar { justify-content: space-between; }
  .mk-result-bar .mk-count { flex: 1 1 auto; }
}

/* ══ 30. ILAN DETAYI — BOLUM RITMI ═════════════════════════════════════════
   Her alan ayri bir KART DEGIL. Tek yuzey, sac teli cizgilerle bolunmus
   bloklar: baslik/fiyat/spec · teknik · aciklama · satici/aksiyon.
   Bu, "her seyi karta koy" refleksinin panzehiri. */
.mk-detail { padding-bottom: var(--tg-space-12); }
.mk-back {
  display: inline-flex; align-items: center; gap: var(--tg-space-1);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-2) 0 0;
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  color: var(--tg-ink-secondary); text-decoration: none;
}
.mk-back:hover { color: var(--tg-brand); }

.mk-detail-body {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; overflow: hidden;
}
.mk-block { padding: var(--tg-space-5) var(--tg-space-5); }
.mk-block + .mk-block { border-top: var(--tg-hairline) solid var(--tg-divider); }
.mk-block--head { padding-bottom: var(--tg-space-4); }
.mk-sec {
  font-size: var(--tg-fs-section); line-height: var(--tg-lh-section);
  font-weight: var(--tg-fw-bold); color: var(--tg-ink);
  margin: 0 0 var(--tg-space-3);
}
.mk-detail-title { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0 0 var(--tg-space-2); }
/* Fiyat en yuksek sesli oge ama MARKA RENGI DEGIL — mavi fiyat, mavi butonla
   yarisir ve aksiyonu zayiflatir. */
.mk-detail-price {
  font-size: var(--tg-fs-display); line-height: var(--tg-lh-display);
  font-weight: var(--tg-fw-bold); letter-spacing: -.02em;
  color: var(--tg-ink); margin: 0;
}

/* BIRINCIL SPEC SERIDI — arac bilgi panosu. Etiket sessiz, deger baskin. */
.mk-hero-specs {
  display: flex; margin-top: var(--tg-space-4);
  background: var(--tg-surface-raised);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-md); overflow: hidden;
}
.mk-hero-cell { flex: 1; min-width: 0; padding: var(--tg-space-2) var(--tg-space-3); text-align: center; }
.mk-hero-cell + .mk-hero-cell { border-left: var(--tg-hairline) solid var(--tg-border); }
.mk-hero-k {
  display: block; font-size: var(--tg-fs-caption); line-height: var(--tg-lh-caption);
  font-weight: var(--tg-fw-semi); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tg-ink-secondary);
}
.mk-hero-v {
  display: block; font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen);
  font-weight: var(--tg-fw-semi); color: var(--tg-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* NOT (Faz 2.6): teknik ozellik kurallari BURADAN KALDIRILDI.
   Ozellikler artik anlamsal gruplar halinde ve bolmeler hucre ic golgesiyle
   ciziliyor — bkz. components.css §22. Bu dosya components.css'ten SONRA
   yuklendigi icin buradaki eski kurallar yeniyi eziyor ve bir grupta
   sutundan az alan oldugunda bos izi GRI BLOK olarak birakiyordu. */

.mk-desc { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink); margin: 0; max-width: var(--tg-reading-max); }

/* Etiketler — durum rozeti dilbilgisi, hap yigini degil. */
.mk-tags { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; margin-top: var(--tg-space-3); }
.mk-tag {
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-2); border-radius: var(--tg-r-sm);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
}
.mk-tag.vip { background: var(--tg-brand-soft); color: var(--tg-brand); border-color: var(--tg-brand-border); }
.mk-status {
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-3); margin-bottom: var(--tg-space-2);
  border-radius: var(--tg-r-sm);
  background: var(--tg-warning-soft); color: var(--tg-warning-ink);
  border: var(--tg-hairline) solid var(--tg-warning-border);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); letter-spacing: .04em;
}

/* Satici kimligi — magaza dilbilgisiyle ayni, kucultulmus. */
.mk-seller { display: flex; align-items: center; gap: var(--tg-space-3); }
.mk-seller-av {
  display: flex; align-items: center; justify-content: center;
  width: var(--tg-space-10); height: var(--tg-space-10); flex: none;
  border-radius: var(--tg-r-pill); background: var(--tg-brand-soft); color: var(--tg-brand);
  font-size: var(--tg-fs-card); font-weight: var(--tg-fw-bold);
}
.mk-seller-name { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-card); font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
.mk-seller-name .tg-i { color: var(--tg-brand); }
.mk-seller-type { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.mk-seller-type .tg-i { color: var(--tg-ink-muted); }
.mk-action { margin-top: var(--tg-space-4); }
.mk-owner-note {
  padding: var(--tg-space-3) var(--tg-space-4); border-radius: var(--tg-r-md);
  background: var(--tg-info-soft); color: var(--tg-info-ink);
  border: var(--tg-hairline) solid var(--tg-info-border);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); text-align: center;
}

/* Galeri — medya once. Tek sutun genis, coklu gorsel yatay kayar. */
.mk-gallery {
  display: flex; gap: var(--tg-space-2); overflow-x: auto;
  margin-bottom: var(--tg-space-4); scrollbar-width: none;
  border-radius: var(--tg-r-lg); background: var(--tg-media);
}
.mk-gallery::-webkit-scrollbar { display: none; }
.mk-gallery img { flex: none; width: min(100%, 720px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
/* TEK FOTOGRAFLI ILAN — olu siyah alan birakma.

   Galeri yatay bir kaydiriciydi ve her kare 720px'e sabitti. Iki veya daha
   cok fotografta kareler kabi doldurur; TEK fotografta 1097px'lik kabin
   377px'i bos kalir ve altindaki medya zemini (siyah) genis bir seride
   donusur. Olculdu: img 720px, kap 1097px.

   Tek kare artik kabin tamamini kaplar ve masaustu icin bilincli bir orana
   oturur. Oran, fotograf HIC yokken kullanilan `.mk-gallery-empty` ile AYNI
   (16/7): medya seridi, ilanda fotograf olsa da olmasa da ayni yuksekligi
   tutar, sayfa duzeni ilandan ilana ziplamaz. */
.mk-gallery img:only-child { width: 100%; aspect-ratio: 16 / 7; }
.mk-gallery-empty {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--tg-space-2); aspect-ratio: 16 / 7; margin-bottom: var(--tg-space-4);
  background: var(--tg-surface-raised); color: var(--tg-ink-muted);
  border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg);
  font-size: var(--tg-fs-meta);
}

@media (max-width: 640px) {
  .mk-block { padding: var(--tg-space-4); }
  .mk-detail-title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
  .mk-detail-price { font-size: var(--tg-fs-price); line-height: var(--tg-lh-price); }
  .mk-hero-v { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }
  .mk-gallery img { width: 100%; }
}

/* ══ 31. IS ILANI KARTI ════════════════════════════════════════════════════
   Arac kartiyla AYNI iskelet; fiyat yerine UCRET, spec yerine SART. */
.job-card { padding: var(--tg-space-4); gap: var(--tg-space-2); }
.job-card-top { display: flex; align-items: center; gap: var(--tg-space-2); flex-wrap: wrap; }
.job-pos, .job-emp {
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-2); border-radius: var(--tg-r-sm);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
}
.job-pos { background: var(--tg-brand-soft); color: var(--tg-brand); border-color: var(--tg-brand-border); }
.job-title { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0; }
/* Ucret ilanin en yuksek sesli ogesi — arac kartindaki fiyatin karsiligi. */
.job-salary {
  font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-price); line-height: var(--tg-lh-price);
  font-weight: var(--tg-fw-semi); color: var(--tg-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.job-company { font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary); }
.job-meta { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.job-meta .tg-i { color: var(--tg-ink-muted); }
.job-tags { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; }
.job-tags > span {
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-2); border-radius: var(--tg-r-sm);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-semi);
}

/* ══ 32. ILAN OLUSTURMA STUDYOSU ═══════════════════════════════════════════
   Yonlendirilmis, bolumlu akis. Jenerik admin formu gorunumu reddedildi. */
.bt-studio { max-width: var(--tg-content-max); margin: 0 auto; padding: var(--tg-space-4) var(--tg-gutter) var(--tg-space-12); }
.bt-studio__back {
  display: inline-flex; align-items: center; gap: var(--tg-space-1);
  min-height: var(--tg-tap-min); font-size: var(--tg-fs-meta);
  font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary); text-decoration: none;
}
.bt-studio__back:hover { color: var(--tg-brand); }
.bt-studio__hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--tg-space-4); flex-wrap: wrap;
  padding: var(--tg-space-2) 0 var(--tg-space-5);
  background: none; background-image: none; border: 0; box-shadow: none;
}
.bt-studio__eyebrow {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tg-brand);
}
.bt-studio__eyebrow::before {
  content: ""; width: var(--tg-stop-size); height: var(--tg-stop-size); flex: none;
  border-radius: var(--tg-r-pill); background: var(--tg-rail-active);
}
.bt-studio__title { font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-ink); margin: var(--tg-space-2) 0 var(--tg-space-2); }
.bt-studio__lead { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); color: var(--tg-ink-secondary); margin: 0; max-width: var(--tg-reading-max); }
.bt-studio__trust {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  padding: var(--tg-space-2) var(--tg-space-3); border-radius: var(--tg-r-md);
  background: var(--tg-success-soft); color: var(--tg-success-ink);
  border: var(--tg-hairline) solid var(--tg-success-border);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
}

/* ADIM CIZGISI — ROTA HATTI + DURAK NOKTASI.
   Urunun imza motifi burada tam yerine oturuyor: ilan hazirlamak sirali bir
   yolculuk. Tamamlanan durak dolu, bulunulan durak halkali, bekleyen bos. */
.bt-stepper {
  position: relative; display: flex; gap: 0;
  padding: var(--tg-space-4) 0 var(--tg-space-6);
  overflow-x: auto; scrollbar-width: none;
}
.bt-stepper::-webkit-scrollbar { display: none; }
.bt-step {
  position: relative; flex: 1 1 0; min-width: 128px;
  display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-2);
  padding: 0 var(--tg-space-2);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-medium); color: var(--tg-ink-secondary); text-align: center;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
/* Duraklar arasi hat — ilk adimin solunda, sonuncunun saginda cizilmez. */
.bt-step::before {
  content: ""; position: absolute; top: calc(var(--tg-space-6) / 2 - var(--tg-rail-w) / 2);
  left: -50%; right: 50%; height: var(--tg-rail-w);
  background: var(--tg-rail-color);
}
.bt-step:first-child::before { display: none; }
.bt-step__num {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-6); height: var(--tg-space-6); flex: none;
  border-radius: var(--tg-r-pill);
  background: var(--tg-surface); color: var(--tg-ink-secondary);
  border: var(--tg-rail-w) solid var(--tg-rail-color);
  font-family: var(--tg-font-numeric);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-bold);
}
.bt-step.is-current { color: var(--tg-ink); font-weight: var(--tg-fw-bold); }
.bt-step.is-current .bt-step__num {
  border-color: var(--tg-rail-active); color: var(--tg-brand);
  box-shadow: 0 0 0 var(--tg-stop-ring) var(--tg-brand-soft);
}
.bt-step.is-done .bt-step__num { background: var(--tg-rail-active); border-color: var(--tg-rail-active); color: var(--tg-on-brand); }
.bt-step.is-done::before { background: var(--tg-rail-active); }

/* PANELLER — bolum ritmi: baslik + aciklama + alan izgarasi. */
.bt-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--tg-space-6); align-items: start; }
.bt-form__main { display: flex; flex-direction: column; gap: var(--tg-space-4); min-width: 0; }
.bt-panel {
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none;
  padding: var(--tg-space-5);
}
.bt-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--tg-space-3); flex-wrap: wrap; margin-bottom: var(--tg-space-4);
}
.bt-panel__head h2 { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0; }
.bt-panel__head p { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); margin: var(--tg-space-1) 0 0; max-width: 52ch; }
.bt-panel__badge {
  display: inline-flex; align-items: center; height: var(--tg-space-6);
  padding: 0 var(--tg-space-2); border-radius: var(--tg-r-sm);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); white-space: nowrap;
}
.bt-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tg-space-4); }
.bt-field { display: flex; flex-direction: column; min-width: 0; }
.bt-field--full { grid-column: 1 / -1; }
/* Etiket alanin USTUNDE ve kalici — placeholder etiket yerine gecmez. */
.bt-field > label {
  display: block; margin-bottom: var(--tg-space-2);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-semi); color: var(--tg-ink);
}
.bt-field .req { color: var(--tg-danger-ink); }
.bt-field__hint { margin-top: var(--tg-space-2); font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }

/* Medya alani — surukle-birak, kart degil calisma yuzeyi. */
.bt-dropzone {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--tg-space-8) var(--tg-space-4);
  background: var(--tg-surface-sunken);
  border: var(--tg-stroke) dashed var(--tg-border-strong);
  border-radius: var(--tg-r-lg); cursor: pointer;
  transition: border-color var(--tg-dur-state) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease);
}
.bt-dropzone:hover, .bt-dropzone.is-over { border-color: var(--tg-brand); background: var(--tg-brand-softer); }
.bt-dropzone strong { display: block; font-size: var(--tg-fs-body); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin-bottom: var(--tg-space-1); }
.bt-dropzone span { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.bt-dropzone__icon { color: var(--tg-ink-muted); margin-bottom: var(--tg-space-2); }
.bt-dropzone__icon svg { width: var(--tg-space-8); height: var(--tg-space-8); }
.bt-media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--tg-space-3); flex-wrap: wrap; padding: var(--tg-space-3) 0; font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.bt-media-count { font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.bt-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--tg-space-2); }
.bt-media-tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--tg-r-md); overflow: hidden; background: var(--tg-surface-raised); border: var(--tg-hairline) solid var(--tg-border); }
.bt-media-errors:not(:empty) {
  margin-top: var(--tg-space-3); padding: var(--tg-space-3);
  border-radius: var(--tg-r-md); background: var(--tg-danger-soft);
  color: var(--tg-danger-ink); border: var(--tg-hairline) solid var(--tg-danger-border);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-medium);
}

/* Yan sutun — ozet ve yayin. Yapisir, formla birlikte kaymaz. */
.bt-form__side { display: flex; flex-direction: column; gap: var(--tg-space-4); position: sticky; top: var(--tg-space-4); min-width: 0; }
.bt-summary, .bt-publish {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-4);
}
.bt-summary h3, .bt-publish h3 { font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: 0 0 var(--tg-space-3); }

@media (max-width: 1024px) {
  .bt-form { grid-template-columns: minmax(0, 1fr); }
  .bt-form__side { position: static; }
}
@media (max-width: 640px) {
  .bt-studio__title { font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen); }
  .bt-panel { padding: var(--tg-space-4); }
  .bt-fields { grid-template-columns: minmax(0, 1fr); }
  /* Adim cizgisi dar ekranda yatay kayar; hedefler 48dp kalir. */
  .bt-step { min-width: 108px; font-size: var(--tg-fs-caption); }
}

/* ══ 33. KIMLIK DOGRULAMA ══════════════════════════════════════════════════
   Iki panelli yerlesim KORUNUR — sol panel pazarlama sisi degil, urunun ne
   yaptigini soyleyen dort gercek madde. Kaldirilanlar: 145deg gradyan,
   dekoratif daireler, 30px yaricap, 80px'lik golge.
   Kalan: duz derin mavi bir yuzey, marka mavisiyle ayni ailede. */
.login-page-wrap, .auth-section {
  background: var(--tg-canvas); background-image: none;
  padding: var(--tg-space-6) var(--tg-gutter) var(--tg-space-12);
  min-height: auto;
}
.login-split {
  width: min(1020px, 100%); margin: 0 auto;
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg);
  box-shadow: none;                      /* giris sayfasi yuzmez */
  background: var(--tg-surface);
  overflow: hidden;
}
.login-brand-panel {
  /* Duz yuzey. Gradyan bir MARKA degil, bir efektti.
     `--tg-brand-strong` DEGIL `--tg-brand-panel`: brand-strong koyu temada
     acilir (#82B4FF) ve uzerindeki beyaz metin okunmaz hale gelirdi.
     Bu panel markali bir yuzeydir; her iki temada ayni derin maviyi tutar. */
  background: var(--tg-brand-panel); background-image: none;
  padding: var(--tg-space-8) var(--tg-space-6);
}
/* Dekoratif daireler kaldirildi — bilgi tasimiyorlardi. */
.login-brand-panel::before, .login-brand-panel::after { content: none; display: none; }
.login-logo-row { display: flex; align-items: center; gap: var(--tg-space-3); margin-bottom: var(--tg-space-8); }
.login-wordmark { font-size: var(--tg-fs-section); font-weight: var(--tg-fw-bold); letter-spacing: -.02em; color: var(--tg-on-brand-panel); }
.login-tagline {
  font-size: var(--tg-fs-display); line-height: var(--tg-lh-display);
  font-weight: var(--tg-fw-bold); letter-spacing: -.02em;
  color: var(--tg-on-brand-panel); margin: 0 0 var(--tg-space-6);
}
.login-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tg-space-3); }
.login-feature-list li { display: flex; align-items: center; gap: var(--tg-space-3); font-size: var(--tg-fs-body); color: var(--tg-on-brand-panel); }
.lf-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tg-space-6); height: var(--tg-space-6); flex: none; color: var(--tg-on-brand-panel); opacity: .82; background: none; border-radius: 0; }
.login-brand-copy { margin: var(--tg-space-8) 0 0; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-on-brand-panel); opacity: .76; }

.login-form-panel { padding: var(--tg-space-8) var(--tg-space-6); background: var(--tg-surface); }
.login-card, .auth-card {
  border: 0; border-radius: 0; box-shadow: none; padding: 0;
  background: transparent; max-width: 400px; margin: 0 auto;
}
.auth-card.wide { max-width: 720px; }
.login-card-header h1, .auth-card h1 {
  font-size: var(--tg-fs-screen); line-height: var(--tg-lh-screen);
  font-weight: var(--tg-fw-bold); letter-spacing: -.015em;
  color: var(--tg-ink); margin: 0 0 var(--tg-space-2);
}
.login-card-header p { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); margin: 0 0 var(--tg-space-6); }
.login-field { margin-bottom: var(--tg-space-4); }
.login-field input, .auth-card input, .auth-card select, .auth-card textarea { border-radius: var(--tg-r-md); }
.auth-notice {
  border-radius: var(--tg-r-md); border: var(--tg-hairline) solid var(--tg-info-border);
  background: var(--tg-info-soft); color: var(--tg-info-ink);
  padding: var(--tg-space-3); font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
}
.gsi-divider { display: flex; align-items: center; gap: var(--tg-space-3); color: var(--tg-ink-muted); font-size: var(--tg-fs-caption); margin: var(--tg-space-4) 0; }
.gsi-divider::before, .gsi-divider::after { content: ""; height: var(--tg-hairline); background: var(--tg-border); flex: 1; }
.auth-links { font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); margin-top: var(--tg-space-4); }
.checkline { display: flex; align-items: flex-start; gap: var(--tg-space-2); line-height: var(--tg-lh-meta); font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-regular); color: var(--tg-ink-secondary); }
.checkline input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }

@media (max-width: 900px) {
  .login-brand-panel { display: none; }   /* dar ekranda form tek is */
  .login-form-panel { padding: var(--tg-space-6) var(--tg-space-4); }
}

/* ══ 34. SOSYAL AKIS — INCE AYAR ═══════════════════════════════════════════ */
/* "56beğenme": `.bt-like-summary` inline-flex oldugu icin metin dugumundeki
   bosluk yutuluyordu. Gercek bir okunurluk hatasiydi. */
.bt-like-summary, .bt-show-comments, .bt-comment-login {
  display: inline-flex; align-items: center; gap: var(--tg-space-1);
  min-height: var(--tg-tap-compact);
  font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary);
}
.bt-post-engagement { gap: var(--tg-space-4); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }
.bt-post-engagement b { font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
.bt-post-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-tap-min); min-height: var(--tg-tap-min);
  border-radius: var(--tg-r-md); background: transparent; border: 0;
  color: var(--tg-ink-secondary); cursor: pointer;
  transition: color var(--tg-dur-toggle) var(--tg-ease), background var(--tg-dur-state) var(--tg-ease), transform var(--tg-dur-press) var(--tg-ease);
}
.bt-post-action:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }
.bt-post-action:active { transform: scale(.94); }
/* Secili durum: DOLGU + renk. Secilmemis kalp notr cizgidir. */
.bt-post-action.is-liked, .bt-post-action[aria-pressed="true"][data-like-post] { color: var(--tg-like); }
.bt-post-action.is-saved, .bt-post-action[aria-pressed="true"][data-save-post] { color: var(--tg-brand); }
.bt-social-post__header, .bt-post-author { gap: var(--tg-space-3); }
.bt-post-author { display: flex; align-items: center; gap: var(--tg-space-3); text-decoration: none; color: inherit; min-width: 0; }
.bt-post-author b { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-card); line-height: var(--tg-lh-card); font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
.bt-post-author small { display: block; font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.bt-follow-button { min-height: var(--tg-tap-compact); }
/* Hikaye seridi — okunmamis marka mavisi, okunmus sessiz kenar, gradyan yok. */
.bt-story-ring, .story-item__ring { background: var(--tg-brand); background-image: none; }
.bt-story-ring.is-seen, .story-item__ring.is-seen { background: var(--tg-border-strong); }

/* Yorum alani — baglamsal, ayri kart degil. */
.bt-comment-form { display: flex; align-items: center; gap: var(--tg-space-2); padding: var(--tg-space-3) var(--tg-space-4); border-top: var(--tg-hairline) solid var(--tg-divider); }
.bt-comment-form input { flex: 1; min-width: 0; }

/* ══ 35. KESFET ════════════════════════════════════════════════════════════
   Jenerik Pinterest kaosu degil: medya baskin, cerceve yok, izgara duzenli. */
.discover-grid, .explore-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--tg-space-1);
}
.discover-tile, .explore-tile {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--tg-r-sm); background: var(--tg-surface-raised);
  border: 0; box-shadow: none;
}
.discover-tile img, .explore-tile img { width: 100%; height: 100%; object-fit: cover; }
.discover-card { border-radius: var(--tg-r-lg); box-shadow: none; }
.discover-section-title { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); color: var(--tg-ink); margin: var(--tg-space-6) 0 var(--tg-space-3); }

/* ══ 36. CLIPS — MEDYA ONCE ════════════════════════════════════════════════ */
.bt-reel { background: var(--tg-media); }
.bt-reel-card { border-radius: var(--tg-r-lg); }
.bt-reel-info { padding: var(--tg-space-4); }
.bt-reel-author { display: flex; align-items: center; gap: var(--tg-space-2); }
.bt-reel-author strong { display: flex; align-items: center; gap: var(--tg-space-1); }
.bt-reel-author .tg-i, .bt-verified { color: var(--tg-accent); }
.clip-play-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-space-12); height: var(--tg-space-12);
  border-radius: var(--tg-r-pill); border: 0;
  background: var(--tg-media-chip); color: var(--tg-ink-on-media); cursor: pointer;
}

/* ══ 37. HIKAYE — KOYU MEDYA CALISMA YUZEYI ════════════════════════════════
   Global tema acik olsa da hikaye yuzeyi bilincli olarak koyudur; medya
   siyah zeminde dogru gorunur. Yine de token kullanir, ham siyah degil. */
.story-modal, .story-composer { background: var(--tg-media); }
.story-modal-inner { background: var(--tg-media); border-radius: var(--tg-r-lg); }
/* Koyu medya uzerinde ilerleme: beyaz BILINCLI bir urun karari, tema
   rengi degil — bu yuzden `--tg-ink-on-media` token'indan okunur. */
.story-progress-bar { height: 3px; background: var(--tg-media-chip); border-radius: var(--tg-r-pill); overflow: hidden; }
.story-progress-fill { height: 100%; background: var(--tg-ink-on-media); }
.story-close-btn, .story-prev-btn, .story-next-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-tap-min); height: var(--tg-tap-min);
  border-radius: var(--tg-r-pill); border: 0;
  background: var(--tg-media-chip); color: var(--tg-ink-on-media); cursor: pointer;
}
.story-footer { color: var(--tg-ink-on-media); font-size: var(--tg-fs-meta); padding: var(--tg-space-3) var(--tg-space-4); }

/* ══ 38. MESAJLASMA ════════════════════════════════════════════════════════ */
.dm-layout { border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); box-shadow: none; overflow: hidden; background: var(--tg-surface); }
.dm-conv-list { background: var(--tg-surface); border-right: var(--tg-hairline) solid var(--tg-border); }
.dm-conv-name { font-size: var(--tg-fs-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.dm-conv-last { display: flex; align-items: center; gap: var(--tg-space-1); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-conv-last .tg-i { color: var(--tg-ink-muted); flex: none; }
.dm-unread-dot { width: var(--tg-space-2); height: var(--tg-space-2); border-radius: var(--tg-r-pill); background: var(--tg-brand); flex: none; }
.dm-chat-area { background: var(--tg-canvas); }
.dm-msg { max-width: 76%; padding: var(--tg-space-2) var(--tg-space-3); border-radius: var(--tg-r-md); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); background: var(--tg-surface); color: var(--tg-ink); border: var(--tg-hairline) solid var(--tg-border); box-shadow: none; }
.dm-msg.mine, .dm-msg--out { background: var(--tg-brand); color: var(--tg-on-brand); border-color: var(--tg-brand); }
.dm-msg-time { font-size: var(--tg-fs-caption); color: var(--tg-ink-muted); }
.dm-send-btn, .dm-attach-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-tap-min); height: var(--tg-tap-min); flex: none;
  border-radius: var(--tg-r-md); border: 0; cursor: pointer;
}
.dm-attach-btn { background: transparent; color: var(--tg-ink-secondary); }
.dm-send-btn { background: var(--tg-brand); color: var(--tg-on-brand); }

/* ══ 39. BILDIRIMLER ═══════════════════════════════════════════════════════ */
.notif-list { background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border); border-radius: var(--tg-r-lg); overflow: hidden; }
.notif-row, .notification-item {
  display: flex; align-items: flex-start; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  text-decoration: none; color: inherit;
}
.notif-row + .notif-row, .notification-item + .notification-item { box-shadow: inset 0 1px 0 var(--tg-divider); }
.notif-row:hover { background: var(--tg-surface-raised); }
.notif-row.unread, .notification-item.unread { background: var(--tg-brand-softer); }
.notif-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tg-space-8); height: var(--tg-space-8); flex: none; border-radius: var(--tg-r-pill); background: var(--tg-surface-raised); color: var(--tg-ink-secondary); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.notif-desc { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); color: var(--tg-ink-secondary); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--tg-r-pill);
  background: var(--tg-danger); color: var(--tg-on-danger);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); line-height: 1;
}

/* ══ 40. ISTATISTIK ════════════════════════════════════════════════════════
   Jenerik pano kutucugu degil: tek yuzey uzerinde sac teli bolmeler. */
.stats-grid, .metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--tg-hairline); background: var(--tg-border);
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); overflow: hidden;
}
.stats-grid > *, .metric-grid > * { background: var(--tg-surface); border: 0; border-radius: 0; box-shadow: none; padding: var(--tg-space-4); }
.stat-period { font-size: var(--tg-fs-caption); color: var(--tg-ink-secondary); }
/* Kiyas YALNIZ gercek veri varsa. "Yeterli veri yok" notr renkte durur. */
.stat-delta-none { font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); }

/* ══ 41. AYARLAR / HESAP ═══════════════════════════════════════════════════
   Her ayar kendi kartinda DEGIL: bolum basligi + sac teli cizgiyle ayrilmis
   satirlar. Ikon renkli kare icinde degil, cizgi glif. */
.dash-links, .account-links, .profile-menu {
  background: var(--tg-surface); border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); overflow: hidden; padding: 0;
}
.dash-links > a, .account-links > a, .profile-menu > a {
  display: flex; align-items: center; gap: var(--tg-space-3);
  min-height: var(--tg-tap-min); padding: var(--tg-space-3) var(--tg-space-4);
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  color: var(--tg-ink); text-decoration: none;
  font-size: var(--tg-fs-body); font-weight: var(--tg-fw-medium);
}
.dash-links > a + a, .account-links > a + a, .profile-menu > a + a { box-shadow: inset 0 1px 0 var(--tg-divider); }
.dash-links > a:hover, .account-links > a:hover, .profile-menu > a:hover { background: var(--tg-surface-raised); }
.dash-links .tg-i, .account-links .tg-i { color: var(--tg-ink-secondary); flex: none; }
/* Sayfa ici bolum basligi — kucuk, versal, sessiz. */
.section-heading, .admin-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--tg-space-4); flex-wrap: wrap; margin-bottom: var(--tg-space-4);
}
.section-heading h2 { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); font-weight: var(--tg-fw-bold); margin: 0; }

/* Izgara form — etiket ustte, alan altta, 48dp hedef. */
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tg-space-4); }
.grid-form.compact { gap: var(--tg-space-3); }
.grid-form > label { display: block; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.grid-form .span-2 { grid-column: 1 / -1; }
.grid-form small { display: block; margin-top: var(--tg-space-1); font-size: var(--tg-fs-meta); color: var(--tg-ink-secondary); font-weight: var(--tg-fw-regular); }

/* ══ 42. FIYATLANDIRMA / PAKET ═════════════════════════════════════════════
   Ozellik-karti izgarasi degil: karsilastirilabilir, esit agirlikli paneller. */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--tg-space-4); }
.pricing-card {
  background: var(--tg-surface); background-image: none;
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-5);
}
.pricing-card.featured { border-color: var(--tg-brand); }
.pricing-price { font-family: var(--tg-font-numeric); font-size: var(--tg-fs-display); line-height: var(--tg-lh-display); font-weight: var(--tg-fw-semi); color: var(--tg-ink); font-variant-numeric: tabular-nums; }

/* ══ 43. ADMIN ═════════════════════════════════════════════════════════════ */
.admin-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--tg-space-3); }
.admin-quick-card, .admin-card {
  background: var(--tg-surface); background-image: none;
  border: var(--tg-hairline) solid var(--tg-border);
  border-radius: var(--tg-r-lg); box-shadow: none; padding: var(--tg-space-4);
  text-decoration: none; color: var(--tg-ink);
}
.admin-quick-card:hover { border-color: var(--tg-brand-border); }
.admin-action-panel { padding: var(--tg-space-3); background: var(--tg-surface-raised); border-radius: var(--tg-r-md); border: var(--tg-hairline) solid var(--tg-border); }
details.admin-action > summary { min-height: var(--tg-tap-compact); display: inline-flex; align-items: center; cursor: pointer; list-style: none; font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-brand); }
details.admin-action > summary::-webkit-details-marker { display: none; }
.highlight-row { background: var(--tg-brand-softer); }

/* ══ 44. KOYU TEMADA ACIK YUZEY KACAKLARI ══════════════════════════════════
   Koyu temada 12 rota tarandi; sabit acik zeminli yuzeyler burada token'a
   baglanir. Kalan tek "acik" yuzey `.story-progress-fill` — o BILINCLI:
   koyu medya uzerinde ilerleme cubugu beyaz olmali. */

/* E-posta dogrulama seridi: style.css'te #fef3c7 / #fbbf24 / #78350f sabit
   yazilmisti ve koyu tema karsiligi HIC yoktu — koyu ekranin tepesinde
   parlak sari bir bant birakiyordu. */
.email-verify-banner {
  background: var(--tg-warning-soft);
  border-bottom: var(--tg-hairline) solid var(--tg-warning-border);
  color: var(--tg-warning-ink);
  padding: var(--tg-space-2) var(--tg-gutter);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
  font-weight: var(--tg-fw-medium);
  display: flex; align-items: center; justify-content: center; gap: var(--tg-space-3);
}
.resend-verify-btn {
  min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-3);
  background: transparent; color: var(--tg-warning-ink);
  border: var(--tg-hairline) solid var(--tg-warning-border);
  border-radius: var(--tg-r-sm);
  font-size: var(--tg-fs-caption); font-weight: var(--tg-fw-bold); cursor: pointer;
}
.resend-verify-btn:hover { background: var(--tg-warning-border); }

/* Ayni desendeki diger sabit bilgi/uyari seritleri. */
.phone-warning-card, .notice, .info-box, .warning-box, .alert-box {
  background: var(--tg-warning-soft); color: var(--tg-warning-ink);
  border: var(--tg-hairline) solid var(--tg-warning-border);
  border-radius: var(--tg-r-md); box-shadow: none;
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
}

/* Koyu temada MEDYA cevresi: beyaz artefakt birakmasin. */
[data-theme="dark"] .mk-card-img,
[data-theme="dark"] .feed-card-img-wrap,
[data-theme="dark"] .bt-social-card__media,
[data-theme="dark"] .vitrin-feed-img-wrap,
[data-theme="dark"] .am-thumb { background: var(--tg-surface-raised); }

/* Iskeletler koyu temada ACIK olmaz — yukleniyor sinyali zeminden bir ton
   koyu/acik olmali, beyaz bir blok degil. */
[data-theme="dark"] .bt-skeleton,
[data-theme="dark"] .skeleton,
[data-theme="dark"] .tg-skel { background: var(--tg-surface-sunken); background-image: none; }

/* ══ 45. DOKUNMA HEDEFI DUZELTMELERI ═══════════════════════════════════════
   5 genislik x 18 rota tarandi. Asagidakiler 36px'in altinda kalan GERCEK
   kontrollerdi.

   BILINCLI ISTISNA: cumle icindeki metin baglantilari (yorumdaki yazar adi,
   "devamini gor") buyutulup blok haline GETIRILMEZ — WCAG 2.5.8 metin
   akisindaki hedefleri kapsam disi birakir ve satir yuksekligini sismek
   okunurlugu bozar. Onun yerine tiklama alani gorunmez dolguyla genisletilir. */

/* Gonderi menusu "···" — 34 -> 48. */
.bt-post-menu > button, .bt-post-menu button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tg-tap-min); min-height: var(--tg-tap-min);
  border-radius: var(--tg-r-md); background: transparent; border: 0;
  color: var(--tg-ink-secondary); cursor: pointer;
}
.bt-post-menu > button:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }

/* Akis filtre cipleri — 34 -> 40 (cip standardi). */
.bt-social-filter {
  display: inline-flex; align-items: center;
  min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4);
  border-radius: var(--tg-r-pill);
  background: var(--tg-surface); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  text-decoration: none; white-space: nowrap; box-shadow: none;
}
.bt-social-filter:hover { border-color: var(--tg-brand-border); color: var(--tg-ink); }
.bt-social-filter.is-active {
  background: var(--tg-brand-soft); color: var(--tg-brand);
  border-color: var(--tg-brand); font-weight: var(--tg-fw-bold);
}
.bt-social-filter-row { display: flex; gap: var(--tg-space-2); flex-wrap: wrap; align-items: center; }

/* Rol filtresi acilir basligi — 24 -> 48. */
.bt-social-role-filter > summary {
  display: flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-2);
  list-style: none; cursor: pointer; border-radius: var(--tg-r-md);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi); color: var(--tg-ink-secondary);
}
.bt-social-role-filter > summary::-webkit-details-marker { display: none; }
.bt-social-role-filter > summary:hover { background: var(--tg-surface-raised); color: var(--tg-ink); }

/* Karusel oklari — 34 -> 48. */
.bt-carousel-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tg-tap-min); height: var(--tg-tap-min);
  border-radius: var(--tg-r-pill); border: 0;
  background: var(--tg-media-chip); color: var(--tg-ink-on-media); cursor: pointer;
}

/* Kesfet butonlari */
.ds-btn {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-compact); padding: 0 var(--tg-space-4);
  border-radius: var(--tg-r-md);
  background: var(--tg-surface); color: var(--tg-ink);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  font-size: var(--tg-fs-meta); font-weight: var(--tg-fw-semi);
  text-decoration: none; cursor: pointer; box-shadow: none;
}
.ds-btn:hover { border-color: var(--tg-brand-border); }
.ds-btn.is-active, .ds-btn.active { background: var(--tg-brand-soft); color: var(--tg-brand); border-color: var(--tg-brand); }

/* Marka/logo baglantisi — ana sayfa hedefi, 48dp. */
.brand, .ig-sidebar-logo {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); text-decoration: none;
}

/* METIN ICI kontroller: satir yuksekligi buyutulmeden tiklama alani genisler.
   "devamini gor" bir paragrafin parcasi; blok haline getirmek metni bozar. */
.bt-post-caption button, .bt-inline-comment a {
  position: relative;
  padding: var(--tg-space-1) 0;
  font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--tg-ink-secondary); font-weight: var(--tg-fw-semi);
}
.bt-post-caption button::after, .bt-inline-comment a::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: var(--tg-tap-compact); transform: translateY(-50%);
}

/* ══ 46. CLIPS BASLIK AKSIYONU ═════════════════════════════════════════════
   "Klip yükle" baglantisi koyu temada BEYAZ zeminliydi (eski bir kural
   `background:#fff` yaziyordu). Reels basligi koyu medya baglaminda durur;
   aksiyon marka dolgusu alir. */
.bt-reels-header { display: flex; align-items: center; justify-content: space-between; gap: var(--tg-space-3); flex-wrap: wrap; }
.bt-reels-header > a {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-min); padding: 0 var(--tg-space-5);
  border-radius: var(--tg-r-md);
  background: var(--tg-brand); color: var(--tg-on-brand);
  border: var(--tg-hairline) solid transparent;
  font-size: var(--tg-fs-button); font-weight: var(--tg-fw-bold);
  text-decoration: none; box-shadow: none;
}
.bt-reels-header > a:hover { background: var(--tg-brand-strong); }

/* Karusel noktalari — gorsel olarak 7px KALMALI (buyutulen nokta gostergesi
   olmaktan cikar), ama "1. görsele git" gercek bir gezinme kontrolu.
   Cozum: nokta kucuk kalir, tiklama alani gorunmez bir ortu ile 40dp olur. */
.bt-carousel-dots { display: flex; align-items: center; justify-content: center; gap: var(--tg-space-2); padding: var(--tg-space-2) 0; }
.bt-carousel-dots button {
  position: relative; width: 7px; height: 7px; padding: 0; flex: none;
  border: 0; border-radius: var(--tg-r-pill); cursor: pointer;
  background: var(--tg-border-strong);
  transition: background var(--tg-dur-state) var(--tg-ease);
}
.bt-carousel-dots button.is-active { background: var(--tg-brand); }
.bt-carousel-dots button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--tg-tap-compact); height: var(--tg-tap-compact);
  transform: translate(-50%, -50%);
}

/* Clips yazar baglantisi — avatar + ad, gercek bir profil hedefi. 30 -> 40. */
.bt-reel-author > a {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  min-height: var(--tg-tap-compact); text-decoration: none;
  color: var(--tg-ink-on-media);
}

/* ══ 47. AKIS AKSIYON DURUMLARI — GERCEK SINIF ADLARIYLA ═══════════════════
   Tarayicida olculdu: akis dugmeleri secildiginde `is-active` sinifini alir
   (`is-liked`/`is-saved` DEGIL) ve ikonlari `.bt-icon` ailesindendir; SVG
   uzerinde `fill="none"` OZNITELIGI vardir, bu yuzden dolgu CSS'te
   `fill: currentColor` ile ezilmek zorunda.

   Bu duzeltme olmadan begeni/kaydet durumu HICBIR gorsel sinyal vermiyordu:
   aria-pressed degisiyor, renk degismiyordu. */
.bt-post-action .bt-icon { fill: none; stroke: currentColor; }

/* BEGENI — secilmedigi surece notr. Secilince hem RENK hem DOLGU. */
.bt-like-button.is-active,
[data-like-post].is-active { color: var(--tg-like); }
.bt-like-button.is-active .bt-icon,
[data-like-post].is-active .bt-icon { fill: currentColor; }

/* KAYDET — begeniden ayrisir: marka mavisi. */
.bt-save-button.is-active,
[data-save-post].is-active { color: var(--tg-brand); }
.bt-save-button.is-active .bt-icon,
[data-save-post].is-active .bt-icon { fill: currentColor; }

/* PAYLAS — anlik geri bildirim, kalici bir durum degil. */
.bt-share-button.is-active { color: var(--tg-accent-ink); }

/* Begeni/kaydet gecisi 160ms — tasarim dilindeki "ac-kapa" suresi. */
.bt-post-action, .bt-post-action .bt-icon {
  transition: color var(--tg-dur-toggle) var(--tg-ease), fill var(--tg-dur-toggle) var(--tg-ease);
}

/* ══ 48. ANLAMSAL YARDIMCILAR — satir ici stil borcunun karsiligi ══════════
   Uretimde 10 satir ici stil HAM HEX tasiyordu (#165DFF, #16a34a, #dc2626,
   #f59e0b). Sabit hex tema degistiginde degismez; koyu temada hepsi yanlisti.
   Mekanik olarak sinifa cevirmek yerine ANLAMI olan bir avuc yardimci
   tanimlandi — tekrar eden desenler bunlari kullanir. */
.tg-txt-success { color: var(--tg-success-ink); }
.tg-txt-danger  { color: var(--tg-danger-ink); }
.tg-txt-warning { color: var(--tg-warning-ink); }
.tg-txt-muted   { color: var(--tg-ink-secondary); }
.tg-txt-sm      { font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta); }

/* Bilgi/uyari kutusu — durum rozetiyle ayni renk sozlesmesi, blok olcegi. */
.tg-notice {
  display: flex; align-items: flex-start; gap: var(--tg-space-3);
  padding: var(--tg-space-3) var(--tg-space-4); margin-bottom: var(--tg-space-4);
  border-radius: var(--tg-r-md);
  background: var(--tg-surface-raised); color: var(--tg-ink-secondary);
  border: var(--tg-hairline) solid var(--tg-border);
  font-size: var(--tg-fs-meta); line-height: var(--tg-lh-meta);
}
.tg-notice--warning { background: var(--tg-warning-soft); color: var(--tg-warning-ink); border-color: var(--tg-warning-border); }
.tg-notice--danger  { background: var(--tg-danger-soft);  color: var(--tg-danger-ink);  border-color: var(--tg-danger-border); }
.tg-notice--success { background: var(--tg-success-soft); color: var(--tg-success-ink); border-color: var(--tg-success-border); }
.tg-notice--info    { background: var(--tg-info-soft);    color: var(--tg-info-ink);    border-color: var(--tg-info-border); }


/* ===== SOURCE: bustop-transit-grid.polish.css ===== */
/* BusTop Transit Grid — final production composition and regression guard */
html,body{font-family:var(--tg-font-ui);color:var(--tg-ink);background:var(--tg-canvas)}
body{overflow-x:hidden}
img,video{max-width:100%}
.app-main{min-width:0}

/* Public/professional profile: keep identity readable on every desktop width. */
.prof-page{width:100%;max-width:var(--tg-content-max);margin:0 auto;padding:var(--tg-space-6) var(--tg-gutter) var(--tg-space-12)}
.prof-header-card{background:var(--tg-surface);border:var(--tg-hairline) solid var(--tg-border);border-radius:var(--tg-r-lg);overflow:hidden!important;box-shadow:none;margin-bottom:var(--tg-space-4)}
.supp-cover-wrap{width:100%;height:156px;overflow:hidden;background:var(--tg-brand-soft)}
.supp-cover-wrap img{width:100%;height:100%;object-fit:cover}
.prof-header-card>div[style*="background:linear-gradient"]{height:128px!important;background:var(--tg-brand-soft)!important}
.prof-header-inner{display:grid!important;grid-template-columns:auto minmax(260px,1fr) auto!important;align-items:start!important;gap:var(--tg-space-5)!important;width:100%;padding:0 var(--tg-space-6) var(--tg-space-6)!important}
.prof-avatar-wrap{margin-top:-48px!important;align-self:start;z-index:2;background:var(--tg-surface);border-color:var(--tg-surface)!important}
.prof-avatar-wrap .avatar{width:96px!important;height:96px!important;min-width:96px;object-fit:cover}
.prof-info{min-width:0!important;width:100%;padding-top:var(--tg-space-3)}
.prof-name-row{display:flex!important;align-items:center!important;gap:var(--tg-space-2)!important;flex-wrap:wrap!important;min-width:0}
.prof-name{font-family:var(--tg-font-ui)!important;font-size:var(--tg-fs-section)!important;line-height:var(--tg-lh-section)!important;font-weight:var(--tg-fw-bold)!important;letter-spacing:-.015em!important;color:var(--tg-ink)!important;margin:0!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;min-width:0!important;max-width:100%!important}
.prof-badges-row,.prof-role-city,.profile-stats-row{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:var(--tg-space-2)!important}
.prof-badges-row{margin-top:var(--tg-space-2)}
.prof-role-city{margin:var(--tg-space-2) 0 0!important}
.prof-role-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--tg-r-pill);background:var(--tg-brand-soft);border:var(--tg-hairline) solid var(--tg-brand-border);color:var(--tg-brand);font-size:var(--tg-fs-caption);font-weight:var(--tg-fw-semi)}
.prof-city{display:inline-flex;align-items:center;gap:6px;color:var(--tg-ink-secondary)!important;font-size:var(--tg-fs-meta)!important}
.profile-stats-row{margin-top:var(--tg-space-3);gap:var(--tg-space-5)!important}
.profile-stat{display:grid;gap:1px;min-width:64px}
.profile-stat strong{font-family:var(--tg-font-numeric);font-size:20px;line-height:24px;color:var(--tg-ink)}
.profile-stat small{font-size:var(--tg-fs-caption);line-height:var(--tg-lh-caption);color:var(--tg-ink-muted)}
.prof-header-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--tg-space-2)!important;flex-wrap:wrap!important;align-self:center!important;max-width:420px!important;width:auto!important;padding-top:var(--tg-space-3)}
.prof-header-actions .btn,.prof-header-actions .vf-follow-btn{width:auto!important;min-width:0!important;min-height:var(--tg-tap-min)!important;padding:0 var(--tg-space-4)!important;white-space:nowrap!important}
.prof-stories-row{padding:var(--tg-space-4) var(--tg-space-6)!important;margin:0!important;border-top:var(--tg-hairline) solid var(--tg-divider)!important;background:var(--tg-surface)}
.prof-tabs{display:flex!important;align-items:stretch!important;gap:0!important;overflow-x:auto!important;margin:0!important;border-top:var(--tg-hairline) solid var(--tg-divider)!important;background:var(--tg-surface)}
.prof-tab{flex:0 0 auto!important;min-width:max-content!important;min-height:var(--tg-tap-min)!important;padding:0 var(--tg-space-5)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--tg-space-2)!important;color:var(--tg-ink-secondary)!important;border:0!important;border-bottom:2px solid transparent!important;font-size:var(--tg-fs-meta)!important;font-weight:var(--tg-fw-semi)!important}
.prof-tab.active{color:var(--tg-brand)!important;border-bottom-color:var(--tg-brand)!important}
.prof-tab-content{margin-top:var(--tg-space-4)!important}

/* Avoid stale legacy rules forcing route/product names into narrow columns. */
.prof-page :where(h1,h2,h3,strong,a,span,button){word-break:normal}

/* Canonical product surfaces */
.mk-shell,.mk-detail,.st-wrap{font-family:var(--tg-font-ui)}
.mk-row,.mk-card,.mk-buybox,.mk-rail,.mk-bar{border-color:var(--tg-border)!important;background:var(--tg-surface)!important;box-shadow:none!important}
.mk-price,.mk-detail-price{font-family:var(--tg-font-numeric);font-variant-numeric:tabular-nums}

/* Sidebar/body contract */
.ig-sidebar{font-family:var(--tg-font-ui);background:var(--tg-surface)!important;border-color:var(--tg-border)!important}
.ig-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:980px){
  .prof-header-inner{grid-template-columns:auto minmax(0,1fr)!important}
  .prof-header-actions{grid-column:1/-1!important;justify-content:flex-start!important;padding-top:0!important}
}
@media(max-width:600px){
  .prof-page{padding:var(--tg-space-4) var(--tg-gutter) calc(var(--tg-space-12) + 64px)}
  .supp-cover-wrap{height:112px}
  .prof-header-card>div[style*="background:linear-gradient"]{height:96px!important}
  .prof-header-inner{grid-template-columns:1fr!important;justify-items:start!important;text-align:left!important;gap:var(--tg-space-3)!important;padding:0 var(--tg-space-4) var(--tg-space-4)!important}
  .prof-avatar-wrap{margin-top:-40px!important}
  .prof-avatar-wrap .avatar{width:80px!important;height:80px!important;min-width:80px}
  .prof-info{padding-top:0}
  .prof-name{font-size:22px!important;line-height:28px!important}
  .prof-header-actions{grid-column:auto!important;width:100%!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .prof-header-actions .btn,.prof-header-actions .vf-follow-btn{width:100%!important}
  .prof-stories-row{padding:var(--tg-space-3) var(--tg-space-4)!important}
  .prof-tabs{margin:0 calc(-1 * var(--tg-space-4))!important;padding:0 var(--tg-space-2)!important}
  .prof-tab{padding:0 var(--tg-space-4)!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ===== SOURCE: bustop-marketplace-shell.css ===== */
/* ============================================================================
   BUSTOP — PAZAR YERİ KABUĞU (masaüstü filtre rayı + satır görünümü)
   ----------------------------------------------------------------------------
   NEDEN AYRI BİR DOSYA

   `.mk-grid` ve `.mk-card` DÖRT ayrı stil dosyasında tanımlı
   (bustop-release, bustop-responsive-pro, bustop-studio, bustop-final) ve
   üçü farklı sütun sayısı söylüyor. Bu kabuğun sınıflarını oraya eklemek,
   var olan çakışmaya beşinci bir taraf katmak olurdu. Buradaki her seçici
   YENİ bir ad taşıyor (`mk-shell`, `mk-rail`, `mk-main`, `mk-rows`,
   `mk-row`) — yani bu dosya TEK SAHİBİ olduğu bir yüzeyi tanımlıyor ve
   hiçbir `!important` gerekmiyor.

   NE YAPIYOR

   Masaüstünde pazar yeri artık iki sütun: solda kalıcı filtre rayı
   (272px), sağda sonuçlar. Sonuçların VARSAYILANI SATIR — üç dev kart
   değil. 1440'ta ekranda aynı anda beş-altı ilan ve alt alta hizalanmış
   fiyatlar görünür; karşılaştırma tam olarak budur.

   Kart ızgarası KALDIRILMADI: `?view=card` ile açılan ikinci bir görünüm.
   Aracın kendisini büyük görmek isteyen oraya geçer.

   RENK VE ÖLÇÜ

   Hepsi `--tg-*` katmanından. Ham hex, ham px ritmi ve dekoratif gradyan
   yok. Koyu tema ayrıca boyanmıyor çünkü token'lar zaten tema başına
   çözülüyor — bu dosyanın koyu temada yapacak bir işi yok.
   ========================================================================== */

/* ── SAYFA KABI ────────────────────────────────────────────────────────── */
/*
  AD NOTU — NEDEN `mk-page` DEGIL

  Ilk deneme `.mk-page` idi ve SESSIZ bir cakismaya girdi: o ad zaten
  SAYFALAYICI BAGLANTISININ sinifi (bustop-responsive-pro `min-height:40px;
  display:inline-flex; border-radius:999px; background:#fff` veriyor).
  Sayfa kabi bir hap gibi bicimleniyordu. Testte yakalandi
  (`web_marketplace_shell_test.mjs` §7: kabugun sinifi baska hicbir stil
  dosyasinda tanimli olmamali).

  NEDEN `mk-wrap` DA KULLANILMIYOR

  `.mk-wrap`in `max-width` degeri UC ayri dosyada tanimli — bustop-studio
  1280, bustop-release 1120, bustop-v222-hotfix ise `var(--bt-page-max)`
  (1200). Kazanan yukleme sirasina bagli ve kimse bunu bilerek secmedi.
  1440'lik bir ekranda sonuc: filtre rayi + sonuclar 1200'e sikisiyor,
  saginda 240px bos kaliyor ve arac cubugu tasip ikinci satira kiriliyordu.

  Bu sayfa artik KENDI kabini tasiyor. Tek tanim, tek sahip, sifir
  `!important`. Ust sinir 1416: 1440'lik ekranda kenar boslugunu birakip
  kalan her seyi iceriye veriyor, daha genis ekranlarda ise satirin
  okunamayacak kadar uzamasini engelliyor.
*/
.mk-marketwrap {
  width: 100%;
  max-width: 1416px;
  margin: 0 auto;
  padding: var(--tg-space-6) var(--tg-gutter) var(--tg-space-12);
}

/* ── KABUK ─────────────────────────────────────────────────────────────── */
.mk-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: var(--tg-space-6);
  align-items: start;
}

/* ── FİLTRE RAYI ───────────────────────────────────────────────────────── */
/*
  Ray YAPIŞKAN: uzun bir sonuç listesinde aşağı inerken filtreyi
  değiştirmek için başa dönmek gerekmiyor. `max-height` + kendi kaydırması
  var, yoksa uzun bir filtre listesi sayfayı kilitlerdi.
*/
.mk-rail {
  position: sticky;
  top: var(--tg-space-4);
  max-height: calc(100vh - var(--tg-space-8));
  overflow-y: auto;
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
  padding: var(--tg-space-4);
}

/*
  KATLANABILIR PANEL.

  Masaustunde ray HER ZAMAN ACIK: `<summary>` bir kontrol degil, sadece
  baslik. Bu yuzden isaretci gizleniyor ve tiklanamiyor — kullanici masaustu
  filtresini yanlislikla kapatamiyor.

  Dar ekranda ayni `<summary>` gercek bir DUGME oluyor. Panelin kapali
  baslamasini `bustop-marketplace-shell.js` sagliyor; JavaScript yoksa panel
  ACIK kalir, yani filtre her kosulda kullanilabilir (progresif gelistirme).
*/
.mk-rail__fold > summary::-webkit-details-marker { display: none; }
.mk-rail__fold > summary { list-style: none; }

.mk-rail__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tg-space-2);
  padding-bottom: var(--tg-space-3);
  margin-bottom: var(--tg-space-3);
  border-bottom: var(--tg-hairline) solid var(--tg-border);
  cursor: default;
}
.mk-rail__title {
  font: var(--tg-fw-semi) var(--tg-fs-section)/var(--tg-lh-section) var(--tg-font-ui);
  color: var(--tg-ink);
  margin: 0;
}
/* Aktif filtre sayısı bir ROZET değil bir SAYAÇ: renk taşımaz, sadece sayar. */
.mk-rail__count {
  font: var(--tg-fw-semi) var(--tg-fs-caption)/var(--tg-lh-caption) var(--tg-font-ui);
  color: var(--tg-brand);
  background: var(--tg-brand-soft);
  border-radius: var(--tg-r-pill);
  padding: 2px var(--tg-space-2);
}

.mk-rail__group { padding: var(--tg-space-3) 0; border-bottom: var(--tg-hairline) solid var(--tg-border); }
.mk-rail__group:last-of-type { border-bottom: 0; }
.mk-rail__legend {
  display: block;
  font: var(--tg-fw-semi) var(--tg-fs-label)/var(--tg-lh-label) var(--tg-font-ui);
  letter-spacing: var(--tg-ls-label);
  text-transform: uppercase;
  color: var(--tg-ink-secondary);
  margin-bottom: var(--tg-space-2);
}

.mk-rail label { display: block; margin-bottom: var(--tg-space-3); }
.mk-rail label:last-child { margin-bottom: 0; }

.mk-rail input[type="text"],
.mk-rail input[type="number"],
.mk-rail select {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--tg-space-3);
  font: var(--tg-fw-regular) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink);
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-md);
}
.mk-rail input:focus-visible,
.mk-rail select:focus-visible {
  outline: var(--tg-stroke) solid var(--tg-brand);
  outline-offset: 1px;
}

/* İki uçlu aralık (en az / en çok) — tek satırda, eşit paylı. */
.mk-rail .mk-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tg-space-2); }

.mk-rail .mk-chk {
  display: flex; align-items: center; gap: var(--tg-space-2);
  min-height: 32px; margin-bottom: var(--tg-space-1);
  font: var(--tg-fw-regular) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink);
}

/*
  RAY EYLEMLERİ YAPIŞKAN DEĞİL, RAYIN DİBİNDE. Filtreyi değiştirip
  "Uygula"yı aramak zorunda kalmamak için ray kendi içinde kaydığında bu
  şerit görünür kalır.
*/
.mk-rail__actions {
  position: sticky; bottom: 0;
  display: flex; flex-direction: column; gap: var(--tg-space-2);
  padding-top: var(--tg-space-3); margin-top: var(--tg-space-3);
  background: var(--tg-surface);
  border-top: var(--tg-hairline) solid var(--tg-border);
}
.mk-rail__apply {
  min-height: 44px;
  font: var(--tg-fw-semi) var(--tg-fs-button)/var(--tg-lh-button) var(--tg-font-ui);
  color: var(--tg-on-brand); background: var(--tg-brand);
  border: 0; border-radius: var(--tg-r-md); cursor: pointer;
}
.mk-rail__apply:hover { background: var(--tg-brand-strong); }
.mk-rail__clear {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px;
  font: var(--tg-fw-medium) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink-secondary); text-decoration: none;
  border-radius: var(--tg-r-md);
}
.mk-rail__clear:hover { color: var(--tg-brand); }

/* ── ANA ALAN ARAÇ ÇUBUĞU ──────────────────────────────────────────────── */
.mk-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--tg-space-3);
  padding: var(--tg-space-3) var(--tg-space-4);
  margin-bottom: var(--tg-space-4);
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
}
.mk-bar__crumb {
  display: flex; align-items: baseline; gap: var(--tg-space-2);
  min-width: 0;
}
.mk-bar__title {
  margin: 0;
  font: var(--tg-fw-bold) var(--tg-fs-section)/var(--tg-lh-section) var(--tg-font-ui);
  color: var(--tg-ink);
}
/* Sonuç sayısı SUNUCUNUN saydığı sayı; yüklenen satırdan türetilmiyor. */
.mk-bar__count {
  font: var(--tg-fw-medium) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink-secondary);
  white-space: nowrap;
}
/*
  ARAMA cubugun ESNEK ogesi: kalan genisligi o alir, digerleri kendi
  genisliginde durur. Onceki halinde ayri bir bosluk dolgusu (`spacer`)
  vardi ve arama sabit 240px'te kaliyordu — 1280'lik kapta toplam genislik
  tasip birincil aksiyonu ikinci satira atiyordu.
*/
.mk-bar__search { display: flex; gap: var(--tg-space-2); flex: 1 1 200px; min-width: 160px; }
.mk-bar__search input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 var(--tg-space-3);
  font: var(--tg-fw-regular) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink); background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-strong); border-radius: var(--tg-r-md);
}
.mk-bar__search button {
  min-height: 40px; padding: 0 var(--tg-space-4);
  font: var(--tg-fw-semi) var(--tg-fs-button)/var(--tg-lh-button) var(--tg-font-ui);
  color: var(--tg-on-brand); background: var(--tg-brand);
  border: 0; border-radius: var(--tg-r-md); cursor: pointer;
}

/*
  SIRALAMA. "SIRALA" etiketi + genis bir <select> birlikte 212px tutuyor ve
  arac cubugunun dortte birini yiyordu. Etiket gorsel olarak kaldirilmadi,
  KUCULTULDU; ekran okuyucu icin <select>'in kendi `aria-label`i var.
*/
.mk-bar .mk-sort { display: inline-flex; align-items: center; gap: var(--tg-space-2); }
.mk-bar .mk-sort__k {
  font: var(--tg-fw-semi) var(--tg-fs-label)/var(--tg-lh-label) var(--tg-font-ui);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase;
  color: var(--tg-ink-secondary); white-space: nowrap;
}
.mk-bar__sort select,
.mk-bar .mk-sort select {
  min-height: 40px; padding: 0 var(--tg-space-3);
  font: var(--tg-fw-regular) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink); background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-strong); border-radius: var(--tg-r-md);
}

/* GÖRÜNÜM ANAHTARI — iki durumlu, sadece ikonla değil METİNLE de ayrışır. */
.mk-view { display: inline-flex; border: var(--tg-hairline) solid var(--tg-border-strong); border-radius: var(--tg-r-md); overflow: hidden; }
.mk-view a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--tg-space-3);
  font: var(--tg-fw-medium) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink-secondary); text-decoration: none; background: var(--tg-surface);
}
.mk-view a + a { border-left: var(--tg-hairline) solid var(--tg-border); }
.mk-view a[aria-current="true"] { color: var(--tg-brand); background: var(--tg-brand-soft); }

/* ── SONUÇ SATIRLARI (VARSAYILAN GÖRÜNÜM) ──────────────────────────────── */
.mk-rows { display: flex; flex-direction: column; gap: var(--tg-space-3); }

/*
  SATIRIN ÜÇ SÜTUNU: görsel · bilgi · fiyat.

  Fiyat kendi sütununda ve SAĞA hizalı; böylece bütün satırlarda aynı
  x konumunda durur ve göz tek bir dikey şeridi tarayarak
  karşılaştırabilir. Kart ızgarasında fiyat her kartta farklı yükseklikte
  başlıyordu — asıl okunabilirlik farkı burada.
*/
.mk-row {
  display: grid;
  /*
    GORSEL 176px. 200'de satir 208px oluyordu ve 900px'lik bir masaustu
    ekraninda yalniz uc ilan goruluyordu — yani "satira gecmenin" tum
    kazanci gorsele geri veriliyordu. 176'da satir ~170px'e iniyor, ekrana
    dort-bes ilan giriyor. Pul hala okunakli: 176x132 bir otobusun rengini,
    tipini ve durumunu gostermeye yeter.

    Fiyat sutunu 168: en uzun deger ("₺7.400.000") 24px Barlow Condensed'da
    ~150px, sagdan hizali dururken tasmiyor.
  */
  grid-template-columns: 176px minmax(0, 1fr) 168px;
  gap: var(--tg-space-4);
  padding: var(--tg-space-3);
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--tg-dur-press, 90ms) linear;
}
.mk-row:hover { border-color: var(--tg-brand-border); }
.mk-row:focus-visible { outline: var(--tg-stroke) solid var(--tg-brand); outline-offset: 2px; }

.mk-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--tg-r-md);
  overflow: hidden;
  background: var(--tg-surface-raised);
}
.mk-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fotoğrafsız ilan bir KUSUR değil BİLGİ: glif + tek satır etiket. */
.mk-row__noimg {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--tg-space-1);
  color: var(--tg-ink-muted);
}
.mk-row__noimg span {
  font: var(--tg-fw-semi) var(--tg-fs-label)/var(--tg-lh-label) var(--tg-font-ui);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase;
}
.mk-row__cat {
  position: absolute; left: var(--tg-space-2); top: var(--tg-space-2);
  font: var(--tg-fw-semi) var(--tg-fs-label)/var(--tg-lh-label) var(--tg-font-ui);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase;
  color: var(--tg-ink-on-media); background: rgba(16, 24, 40, .72);
  border-radius: var(--tg-r-sm); padding: 2px var(--tg-space-2);
}

.mk-row__body { display: flex; flex-direction: column; gap: var(--tg-space-1); min-width: 0; }
.mk-row__title {
  margin: 0;
  font: var(--tg-fw-semi) var(--tg-fs-card)/var(--tg-lh-card) var(--tg-font-ui);
  color: var(--tg-ink);
  overflow-wrap: anywhere;
}
.mk-row__model {
  font: var(--tg-fw-regular) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink-secondary);
}
.mk-row__spec { margin-top: var(--tg-space-1); }
.mk-row__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--tg-space-2);
  margin-top: auto; padding-top: var(--tg-space-2);
  font: var(--tg-fw-regular) var(--tg-fs-caption)/var(--tg-lh-caption) var(--tg-font-ui);
  color: var(--tg-ink-secondary);
}
/*
  ESKI KART STILLERINI SATIRIN ICINDE NOTRLE.

  `.mk-city` bustop-release'de KART ayaginin ogesi olarak tasarlanmis ve
  `margin-top:12px; padding-top:12px` tasiyor. Satirin ayaginda bu, tek
  satirlik bir bilgiyi 33px'e cikariyor ve satiri 210px yapiyordu. Ayni
  sinifi burada yeniden kullanmak (ikon + sehir ikilisi zaten dogru) ama
  KART bosluklarini birakmak istiyoruz.

  Bu bir cakisma kazasi degil bilincli bir sifirlama: seciciler bu dosyanin
  sahibi oldugu `.mk-row__foot` kapsamiyla sinirli, disariya sizmiyor ve
  `!important` gerektirmiyor (iki sinifli secici zaten daha spesifik).

  AYIRAC kendi adini tasiyor (`mk-row__sep`): `.mk-dot` baska bir dosyada
  3x3 yuvarlak bir GORSEL nokta olarak tanimli ve oradaki "·" karakteri
  gorunmez oluyordu.
*/
.mk-row__foot .mk-city {
  display: inline-flex; align-items: center; gap: var(--tg-space-1);
  margin: 0; padding: 0;
  font: var(--tg-fw-regular) var(--tg-fs-caption)/var(--tg-lh-caption) var(--tg-font-ui);
  color: var(--tg-ink-secondary);
}
.mk-row__foot .mk-date { margin: 0; padding: 0; }
.mk-row__sep { color: var(--tg-ink-muted); }
/* İlan numarası en az değişken bilgi: satırın sonunda, sakin. */
.mk-row__no { font-family: var(--tg-font-numeric); letter-spacing: .02em; }
.mk-row__trust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tg-space-2); margin-top: var(--tg-space-2); }

.mk-row__price {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;
  gap: var(--tg-space-1);
  text-align: right;
}
.mk-row__price strong {
  font: var(--tg-fw-bold) var(--tg-fs-price)/var(--tg-lh-price) var(--tg-font-numeric);
  color: var(--tg-ink);
  white-space: nowrap;
}
.mk-row__date {
  font: var(--tg-fw-regular) var(--tg-fs-caption)/var(--tg-lh-caption) var(--tg-font-ui);
  color: var(--tg-ink-secondary);
}

/* ── DAR EKRAN ─────────────────────────────────────────────────────────── */
/*
  1080'in altında ray artık ikinci sütun olarak sığmıyor: sonuçlar okunmaz
  bir genişliğe düşerdi. Ray tek sütuna geçer ve KATLANIR (`<details>`
  olarak işaretlenmiştir) — filtre erişilebilir kalır ama ilk ekranı
  yemez.
*/
/*
  1080'in ALTINDA ray ikinci sütun olarak sığmıyor: sonuçlar okunmaz bir
  genişliğe düşerdi. Ama rayı olduğu gibi üste yığmak DAHA KÖTÜ — ölçüldü:
  1024'te tek sütuna inen ray İLK EKRANIN TAMAMINI yiyor, kullanıcı tek bir
  ilan görmeden aşağı kaydırmak zorunda kalıyordu.

  Çözüm rayı gizlemek değil, YATIRMAK: dikey bir kolon yerine kendi kendine
  sarılan bir ızgara. 1024'te dört sütun, telefonda iki. Ray iki-üç satırlık
  bir filtre şeridine dönüşüyor; ilk ilan ekranda kalıyor.

  Kapalı `<details>` grupları kapalı kalmaya devam ediyor — dar ekranda
  ekstra bir katlama mekanizmasına gerek yok, zaten var olan katlama
  yeterli.
*/
@media (max-width: 1080px) {
  .mk-shell { grid-template-columns: minmax(0, 1fr); }
  .mk-rail { position: static; max-height: none; overflow: visible; padding: var(--tg-space-3); }

  /* Başlık artık bir DÜĞME: dokunma hedefi 48dp, işaretçi el. */
  .mk-rail__head {
    min-height: 48px;
    margin-bottom: 0; padding: 0 var(--tg-space-1);
    border-bottom: 0;
    cursor: pointer;
  }
  .mk-rail__fold[open] > .mk-rail__head {
    margin-bottom: var(--tg-space-3);
    padding-bottom: var(--tg-space-3);
    border-bottom: var(--tg-hairline) solid var(--tg-border);
  }
  /* Açık/kapalı durumu renkle DEĞİL, metinle de bildirilir. */
  .mk-rail__head::after {
    content: 'Göster';
    font: var(--tg-fw-semi) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
    color: var(--tg-brand);
    margin-left: auto;
  }
  .mk-rail__fold[open] > .mk-rail__head::after { content: 'Gizle'; }

  /*
    Açıkken ray dikey bir kolon değil, kendi kendine sarılan bir ızgara:
    1024'te dört sütun, telefonda iki. Böylece açık panel bile iki-üç
    satırda bitiyor ve ilk ilan ekranda kalıyor.

    IZGARA `<details>`E DEĞİL, İÇİNDEKİ `.mk-rail__panel`E UYGULANIR.
    Ölçüldü: `<details>` üzerine `display:grid` koymak beklenen sonucu
    VERMİYOR — tarayıcı açık içeriği tek bir dahili slot olarak yerleştirir,
    dolayısıyla bütün gruplar tek bir ızgara hücresine (ilk sütuna) sıkışır
    ve alanlar 120px'e düşer. Gerçek bir sarmalayıcı şart.
  */
  .mk-rail__panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 var(--tg-space-4);
    align-items: start;
  }
  .mk-rail__actions { grid-column: 1 / -1; }
  .mk-rail__group { border-bottom: 0; padding-top: 0; }
  /* Eylem şeridi yatay: dikey kolonda alt alta durmasının bir nedeni yoktu. */
  .mk-rail__actions {
    position: static;
    flex-direction: row; align-items: center; gap: var(--tg-space-3);
  }
  .mk-rail__apply { flex: 0 0 auto; padding: 0 var(--tg-space-6); }
  .mk-rail__clear { flex: 0 0 auto; }
}

/* Satır telefonda iki sütun: görsel + bilgi. Fiyat bilgi sütununa iner. */
@media (max-width: 720px) {
  .mk-row { grid-template-columns: 120px minmax(0, 1fr); gap: var(--tg-space-3); }
  .mk-row__price {
    grid-column: 2; align-items: flex-start; text-align: left;
    margin-top: var(--tg-space-1);
  }
  .mk-row__price strong { font-size: var(--tg-fs-section); line-height: var(--tg-lh-section); }

  /*
    VERİ PLAKASI DAR SATIRDA İÇERİĞE GÖRE PAYLAŞILIR.

    Plakanın kendi kuralı `grid-auto-columns: 1fr` — üç hücre de eşit
    genişlik alır. Bu geniş kartta doğru (ızgara hizası korunur) ama 390px'te
    ölçüldü: gövde sütunu 198px'e düşünce her hücreye 49px kalıyor ve
    "220.000" ELLIPSIS'E KIRPILIYOR ("220...."). Bir araç pazarında
    kilometrenin okunamaması, plakanın hiç olmamasından kötüdür.

    `auto` ile YIL ve KOLTUK ihtiyaçları kadar yer alır, artan KM'ye gider.
    Kapsam yalnız satırın plakası — kart, detay ve mağaza plakaları
    değişmiyor.
  */
  .mk-row__spec .tg-plate-data { grid-auto-columns: auto; }
  .mk-row__spec .tg-plate-data__v { overflow: visible; text-overflow: clip; }
  .mk-bar { padding: var(--tg-space-3); }
  .mk-bar__search { flex-basis: 100%; }
}

/* ── HAREKETİ AZALT ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mk-row { transition: none; }
}

/* ── BENZER İLANLAR (araç detayı) ──────────────────────────────────────── */
/*
  Detayın sonundaki keşif şeridi. Dört sabit sütun DEĞİL, `auto-fit`:
  ilan sayısı dörtten azsa kartlar gereksiz yere gerilmesin diye üst
  sınır 1fr, alt sınır 200px.

  Bu blok yalnız gerçekten kayıt varsa çizilir (bkz. vnext_pages.php);
  boş bir "benzer ilan yok" kutusu üretilmiyor.
*/
.mk-rel { margin-top: var(--tg-space-8); }
.mk-rel__h {
  margin: 0 0 var(--tg-space-4);
  font: var(--tg-fw-semi) var(--tg-fs-section)/var(--tg-lh-section) var(--tg-font-ui);
  color: var(--tg-ink);
}
.mk-rel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--tg-space-4);
}
.mk-rel__card {
  display: block; text-decoration: none; color: inherit;
  background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-card);
  border-radius: var(--tg-r-lg);
  padding: var(--tg-space-3);
}
.mk-rel__card:hover { border-color: var(--tg-brand-border); }
.mk-rel__card:focus-visible { outline: var(--tg-stroke) solid var(--tg-brand); outline-offset: 2px; }
.mk-rel__media {
  aspect-ratio: 4 / 3; border-radius: var(--tg-r-md); overflow: hidden;
  background: var(--tg-surface-raised); margin-bottom: var(--tg-space-2);
}
.mk-rel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-rel__noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--tg-ink-muted); }
.mk-rel__title {
  font: var(--tg-fw-semi) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink); overflow-wrap: anywhere;
}
.mk-rel__price {
  font: var(--tg-fw-bold) var(--tg-fs-section)/var(--tg-lh-section) var(--tg-font-numeric);
  color: var(--tg-ink); margin-top: var(--tg-space-1);
}
.mk-rel__meta {
  font: var(--tg-fw-regular) var(--tg-fs-caption)/var(--tg-lh-caption) var(--tg-font-ui);
  color: var(--tg-ink-secondary); margin-top: var(--tg-space-1);
}

/* ── ALANA ÖZEL SATIR SATIRLARI ────────────────────────────────────────── */
/*
  Araçta ölçümleri Veri Plakası taşıyor; parça ve işte plaka YOK — oradaki
  karar bilgisi metindir (durum, stok, OEM / maaş, deneyim, çalışma türü).
  Bu iki satır o metni taşır ve alt satırdan (yer/tarih/kimlik) DAHA KOYU
  durur: kararı önce onlar veriyor.
*/
.mk-row__facts {
  font: var(--tg-fw-medium) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink);
  margin-top: var(--tg-space-1);
  overflow-wrap: anywhere;
}
/* Uyumluluk ikincil: "hangi araca takılır" sorusu, "ne durumda"dan sonra. */
.mk-row__fits {
  font: var(--tg-fw-regular) var(--tg-fs-caption)/var(--tg-lh-caption) var(--tg-font-ui);
  color: var(--tg-ink-secondary);
  overflow-wrap: anywhere;
}
/*
  İŞ İLANINDA MAAŞ FİYAT DEĞİL. Aynı sütunda durur (dikey tarama korunur)
  ama araç fiyatının ağırlığını taşımaz: bir aralıktır, tek bir sayı değil,
  ve çoğu ilanda gizlidir. Bu yüzden bir basamak küçük.
*/
.mk-row__price--range strong {
  font-size: var(--tg-fs-section); line-height: var(--tg-lh-section);
  white-space: normal;
}

/* ── GÖRSELSİZ SATIR (iş ilanı) ────────────────────────────────────────── */
/*
  İş ilanının kapak fotoğrafı YOKTUR. Uydurma bir logo ya da boş bir pul
  çizmek, satırın 176px'ini hiçbir bilgi taşımayan bir kutuya harcamak
  olurdu. Medya sütununun yerini POZİSYON alıyor — iş aramada kararı veren
  ilk şey odur ve rozet olarak dikey bir şerit hâlinde taranabilir.
*/
.mk-row--nomedia { grid-template-columns: 176px minmax(0, 1fr) 168px; }
.mk-row__badge {
  display: flex; align-items: center;
  padding: var(--tg-space-2) var(--tg-space-3);
  background: var(--tg-brand-soft);
  border: var(--tg-hairline) solid var(--tg-brand-border);
  border-radius: var(--tg-r-md);
  font: var(--tg-fw-semi) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-brand);
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  /* Telefonda rozet kendi satırında, tam genişlikte: 120px'lik bir sütunda
     "Operasyon Personeli" üç satıra kırılıyordu. */
  .mk-row--nomedia { grid-template-columns: minmax(0, 1fr); }
  .mk-row--nomedia .mk-row__badge { align-self: flex-start; }
  .mk-row--nomedia .mk-row__price { grid-column: 1; }
}

/* ── ADMİN: GRUP BAŞLIĞI ve OPERASYON FORMLARI ─────────────────────────── */
/*
  Kenar çubuğu ondokuz düz satırdı ve sırası tarihseldi. Grup başlığı bir
  bağlantı değil, bir AYRAÇ: tıklanmaz, katlanmaz, sadece yığını okunur
  parçalara böler. Bir operasyon panelinde tıklamayı azaltan şey
  görünürlüktür, katlama değil.
*/
.ig-nav-group {
  padding: var(--tg-space-4) var(--tg-space-3) var(--tg-space-1);
  font: var(--tg-fw-bold) var(--tg-fs-label)/var(--tg-lh-label) var(--tg-font-ui);
  letter-spacing: var(--tg-ls-label);
  text-transform: uppercase;
  color: var(--tg-ink-muted);
}
.ig-nav-group:first-child { padding-top: var(--tg-space-2); }

/*
  Admin işlem formları: etiket üstte, alan altta, hepsi tek sütun. Satır içi
  form (`inline-form`) küçük tekil aksiyonlar için; bunlar gerekçe/tarih
  isteyen ÇOK ALANLI işlemler ve yan yana sıkıştırıldığında hangi alanın
  hangi etikete ait olduğu kayboluyordu.
*/
.admin-grant-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--tg-space-3);
  align-items: end;
  margin-top: var(--tg-space-3);
}
.admin-grant-form label {
  display: flex; flex-direction: column; gap: var(--tg-space-1);
  font: var(--tg-fw-medium) var(--tg-fs-caption)/var(--tg-lh-caption) var(--tg-font-ui);
  color: var(--tg-ink-secondary);
}
.admin-grant-form input,
.admin-grant-form select,
.admin-grant-form textarea {
  min-height: 40px; padding: var(--tg-space-2) var(--tg-space-3);
  font: var(--tg-fw-regular) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink); background: var(--tg-surface);
  border: var(--tg-hairline) solid var(--tg-border-strong);
  border-radius: var(--tg-r-md);
}
.admin-grant-form textarea { min-height: 72px; resize: vertical; }
/* Çok satırlı not tek sütuna sıkışmasın. */
.admin-grant-form label:has(textarea) { grid-column: 1 / -1; }
.admin-grant-form button { align-self: end; }

/* Dar tablolar — künye ve defter listeleri. */
.mini-table { width: 100%; border-collapse: collapse; margin-top: var(--tg-space-3); }
.mini-table th, .mini-table td {
  padding: var(--tg-space-2) var(--tg-space-3);
  text-align: left; vertical-align: top;
  border-bottom: var(--tg-hairline) solid var(--tg-border);
  font: var(--tg-fw-regular) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink);
}
.mini-table thead th {
  font: var(--tg-fw-semi) var(--tg-fs-label)/var(--tg-lh-label) var(--tg-font-ui);
  letter-spacing: var(--tg-ls-label); text-transform: uppercase;
  color: var(--tg-ink-secondary);
}
.mini-table tbody th { width: 200px; color: var(--tg-ink-secondary); font-weight: var(--tg-fw-semi); }
.mini-table code { font-family: var(--tg-font-numeric); }

/*
  Şikâyet alıntısı. Kırpma SUNUCUDA yapılıyor (280 karakter); buradaki
  sınır yalnız görsel — uzun bir alıntı satırı şişirmesin diye.
*/
.mod-excerpt {
  max-width: 46ch;
  padding: var(--tg-space-2) var(--tg-space-3);
  background: var(--tg-surface-raised);
  border-left: var(--tg-stroke) solid var(--tg-border-strong);
  border-radius: var(--tg-r-sm);
  font: var(--tg-fw-regular) var(--tg-fs-meta)/var(--tg-lh-meta) var(--tg-font-ui);
  color: var(--tg-ink);
  overflow-wrap: anywhere;
}