/* ============================================================
   Eczaneciler — tasarım token'ları + ortak bileşen katmanı
   (Prototip: gerçek stack'te bu token'lar globals.css'e girecek)
   Palet: sağlık/güven — teal (primary) + slate nötrleri
   Kural seti: ui-ux-pro-max (erişilebilirlik §1, dokunma §2, tipografi §6)
   ============================================================ */

:root {
  --radius: 0.625rem;

  /* Aydınlık tema */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --primary: 175 84% 26%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --accent: 174 55% 94%;
  --accent-foreground: 175 84% 20%;
  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 38%;
  --warning: 38 92% 42%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 175 84% 26%;
}

.dark {
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;
  --card: 217 33% 15%;
  --card-foreground: 210 40% 98%;
  --muted: 217 33% 18%;
  --muted-foreground: 215 20% 65%;
  --primary: 174 72% 44%;
  --primary-foreground: 222 47% 11%;
  --secondary: 217 33% 18%;
  --secondary-foreground: 210 40% 98%;
  --accent: 174 60% 20%;
  --accent-foreground: 174 80% 85%;
  --destructive: 0 63% 52%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 60% 45%;
  --warning: 38 80% 55%;
  --border: 217 33% 24%;
  --input: 217 33% 24%;
  --ring: 174 72% 44%;
}

* { border-color: hsl(var(--border)); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 4px; }
a { color: inherit; }
img { max-width: 100%; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.5rem; padding: 0 1rem; border-radius: var(--radius);
  font-family: inherit; font-weight: 600; font-size: .875rem; line-height: 1;
  cursor: pointer; border: 1px solid transparent; background: transparent; color: inherit;
  white-space: nowrap; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover:not(:disabled) { opacity: .92; }
.btn-outline { border-color: hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.btn-outline:hover:not(:disabled) { background: hsl(var(--muted)); }
.btn-ghost { color: hsl(var(--foreground)); }
.btn-ghost:hover:not(:disabled) { background: hsl(var(--muted)); }
.btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.btn-destructive:hover:not(:disabled) { opacity: .92; }
.btn-lg { height: 2.875rem; padding: 0 1.5rem; font-size: .9375rem; }
.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; border-radius: var(--radius); }
.btn-icon { width: 2.5rem; padding: 0; }
.btn-block { width: 100%; }
.btn svg { width: 1.125rem; height: 1.125rem; }

/* ---------- Form ---------- */
.label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; }
.input, .textarea, .select {
  width: 100%; height: 2.5rem; padding: 0 .75rem; font-family: inherit; font-size: .875rem;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input)); border-radius: var(--radius);
}
.textarea { height: auto; min-height: 6rem; padding: .625rem .75rem; line-height: 1.5; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .15);
}
.input[aria-invalid="true"] { border-color: hsl(var(--destructive)); }
.input-with-icon { position: relative; }
.input-with-icon .input { padding-left: 2.5rem; }
.input-with-icon > svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: hsl(var(--muted-foreground)); pointer-events: none; }
.helper { font-size: .8125rem; color: hsl(var(--muted-foreground)); margin-top: .375rem; }
.field-error { display: flex; align-items: center; gap: .25rem; font-size: .8125rem; color: hsl(var(--destructive)); margin-top: .375rem; }
.checkbox { width: 1.05rem; height: 1.05rem; accent-color: hsl(var(--primary)); border-radius: 4px; }
.link { color: hsl(var(--primary)); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ---------- Yüzeyler ---------- */
.card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); }
.card-pad { padding: 1.25rem; }
.surface { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); }
.hover-lift { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.hover-lift:hover { border-color: hsl(var(--primary) / .4); box-shadow: 0 4px 16px -6px hsl(var(--foreground) / .12); }

/* ---------- Prototip sayfa gezgini: sandviç menü (tüm sayfalara app.js enjekte eder) ---------- */
.proto-fab { position: fixed; z-index: 55; left: 1rem; bottom: 5.5rem; display: inline-flex; align-items: center; gap: .5rem;
  height: 2.75rem; padding: 0 .875rem 0 .75rem; cursor: pointer; border: 1px solid hsl(var(--border)); border-radius: 9999px;
  background: hsl(var(--card) / .95); backdrop-filter: blur(10px); color: hsl(var(--foreground)); font-size: .8125rem;
  font-weight: 600; box-shadow: 0 4px 16px -6px hsl(var(--foreground) / .3); transition: border-color .15s ease, transform .15s ease; }
.proto-fab:hover { border-color: hsl(var(--primary) / .5); transform: translateY(-1px); }
.proto-fab:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring) / .3); }
.proto-fab svg { width: 1.125rem; height: 1.125rem; }
.proto-fab-label { display: none; }
@media (min-width: 640px) { .proto-fab-label { display: inline; } }
@media (min-width: 1024px) { .proto-fab { bottom: 1.25rem; } }
@media (min-width: 1024px) { .proto-fab--with-sidebar { left: 17rem; } }

.proto-backdrop { position: fixed; inset: 0; z-index: 75; background: hsl(0 0% 0% / .5); opacity: 0; transition: opacity .2s ease; }
.proto-backdrop[hidden] { display: none; }
.proto-backdrop.open { opacity: 1; }

.proto-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 80; width: min(19rem, 86vw);
  display: flex; flex-direction: column; background: hsl(var(--card)); border-right: 1px solid hsl(var(--border));
  box-shadow: 0 0 40px -12px hsl(0 0% 0% / .5); transform: translateX(-102%); transition: transform .22s ease; }
.proto-drawer.open { transform: translateX(0); }
.proto-drawer-head { display: flex; align-items: center; gap: .5rem; padding: .875rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.proto-drawer-head .brand-mark { width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
.proto-drawer-head .brand-mark svg { width: 1rem; height: 1rem; }
.proto-drawer-title { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.proto-drawer-sub { font-size: .6875rem; color: hsl(var(--muted-foreground)); }
.proto-drawer-close { margin-left: auto; }
.proto-drawer-body { flex: 1; overflow-y: auto; padding: .5rem .75rem 1.5rem; }
.proto-sec { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: hsl(var(--muted-foreground)); padding: .875rem .5rem .25rem; }
.proto-item { display: flex; align-items: center; gap: .625rem; padding: .5rem; border-radius: var(--radius);
  color: hsl(var(--foreground)); font-size: .875rem; text-decoration: none; transition: background-color .12s ease; }
.proto-item:hover { background: hsl(var(--muted)); }
.proto-item.current { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-weight: 600; }
.proto-dot { width: .3125rem; height: .3125rem; border-radius: 9999px; background: hsl(var(--border)); flex: none; }
.proto-item.current .proto-dot { background: hsl(var(--primary)); }

/* ---------- Rol seçim kartları ---------- */
.role-card { display: flex; flex-direction: column; gap: .375rem; text-align: left; padding: .875rem;
  border: 1.5px solid hsl(var(--border)); border-radius: var(--radius); cursor: pointer;
  background: hsl(var(--background)); transition: border-color .15s ease, background-color .15s ease; }
.role-card:hover { background: hsl(var(--muted)); }
.role-card.role-on { border-color: hsl(var(--primary)); background: hsl(var(--accent)); }
.role-card .rc-title { font-weight: 600; font-size: .9375rem; }
.role-card .rc-desc { font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.role-card.role-on .rc-desc { color: hsl(var(--accent-foreground) / .85); }

/* ---------- Etiketler ---------- */
.badge { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .625rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 500; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.badge-primary { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-color: transparent; }
.badge-success { background: hsl(var(--success) / .12); color: hsl(var(--success)); border-color: hsl(var(--success) / .25); }
.badge-warning { background: hsl(var(--warning) / .14); color: hsl(38 80% 30%); border-color: hsl(var(--warning) / .28); }
.badge-destructive { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .25); }
.badge svg { width: .875rem; height: .875rem; }

/* ---------- Navigasyon (masaüstü kenar çubuğu) ---------- */
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--radius);
  color: hsl(var(--muted-foreground)); font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: background-color .15s ease, color .15s ease; }
.nav-item:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.nav-item.active { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.nav-item svg { width: 1.25rem; height: 1.25rem; flex: none; }
.nav-item .badge { margin-left: auto; }

/* ---------- Alt gezinme (mobil) ---------- */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: hsl(var(--card) / .96); backdrop-filter: blur(10px); border-top: 1px solid hsl(var(--border)); }
.bottom-nav-inner { display: flex; max-width: 40rem; margin: 0 auto; }
.bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: .5rem 0 calc(.625rem + env(safe-area-inset-bottom, 0px)); min-height: 3.5rem;
  font-size: .6875rem; font-weight: 500; color: hsl(var(--muted-foreground)); text-decoration: none; }
.bottom-nav-item svg { width: 1.375rem; height: 1.375rem; }
.bottom-nav-item.active { color: hsl(var(--primary)); }

/* ---------- Yardımcılar ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px;
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-weight: 600; flex: none; }
.divider-or { display: flex; align-items: center; gap: .75rem; color: hsl(var(--muted-foreground));
  font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.divider-or::before, .divider-or::after { content: ""; height: 1px; flex: 1; background: hsl(var(--border)); }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: .75rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); flex: none; }
.brand-mark svg { width: 1.25rem; height: 1.25rem; }
.stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prose-bubble { line-height: 1.7; }
.prose-bubble p { margin: 0 0 .75rem; }
.prose-bubble p:last-child { margin-bottom: 0; }
.skeleton { background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / .5) 50%, hsl(var(--muted)) 75%); background-size: 200% 100%; border-radius: var(--radius); animation: sk 1.4s ease-in-out infinite; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RENK TEMASI: Eczane kırmızısı (alternatif — data-theme="pharmacy")
   Seçim: sağ alttaki .theme-dock üzerinden (app.js enjekte eder)
   ============================================================ */
:root { --brand-a: 175 84% 20%; --brand-b: 175 70% 30%; }

[data-theme="pharmacy"] {
  --primary: 0 68% 42%;
  --primary-foreground: 0 0% 100%;
  --accent: 0 70% 96%;
  --accent-foreground: 0 68% 32%;
  --ring: 0 68% 42%;
  --destructive: 0 63% 34%;
  --brand-a: 0 72% 30%;
  --brand-b: 0 60% 42%;
}

.dark[data-theme="pharmacy"] {
  --primary: 0 74% 58%;
  --primary-foreground: 0 0% 100%;
  --accent: 0 55% 22%;
  --accent-foreground: 0 80% 88%;
  --ring: 0 74% 58%;
  --destructive: 0 63% 52%;
}

.brand-panel { background: linear-gradient(155deg, hsl(var(--brand-a)), hsl(var(--brand-b))); }

/* ---------- Tema seçici dock (tüm sayfalarda otomatik) ---------- */
.theme-dock { position: fixed; right: 1rem; bottom: 5.5rem; z-index: 50; display: flex; align-items: center; gap: .375rem;
  padding: .375rem .5rem; border-radius: 9999px; background: hsl(var(--card) / .92); backdrop-filter: blur(10px);
  border: 1px solid hsl(var(--border)); box-shadow: 0 4px 16px -6px hsl(var(--foreground) / .25); }
@media (min-width: 1024px) { .theme-dock { bottom: 1.25rem; } }
.theme-dot { width: 1.375rem; height: 1.375rem; border-radius: 9999px; border: 2px solid transparent; cursor: pointer; padding: 0; flex: none; }
.theme-dot[data-on="true"] { border-color: hsl(var(--foreground) / .55); }
.theme-dot[data-color="teal"] { background: hsl(175 84% 30%); }
.theme-dot[data-color="pharmacy"] { background: hsl(0 70% 45%); }
.theme-dock .btn-icon { height: 1.75rem; width: 1.75rem; }
.theme-dock .btn-icon svg { width: 1rem; height: 1rem; }

/* ============================================================
   KLASİK FORUM bileşenleri (phpBB/vBulletin düzeni)
   ============================================================ */
.cat-head { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem;
  background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border));
  font-weight: 600; font-size: .875rem; }
.cat-head .cat-count { margin-left: auto; font-weight: 400; color: hsl(var(--muted-foreground)); font-size: .75rem; white-space: nowrap; }

.forum-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.forum-table th { text-align: left; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
  color: hsl(var(--muted-foreground)); font-weight: 600; padding: .5rem .875rem;
  border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.forum-table td { padding: .75rem .875rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
.forum-table tbody tr:last-child td { border-bottom: none; }
.forum-table tbody tr:hover { background: hsl(var(--muted) / .55); }
.forum-table .row-sticky td { background: hsl(var(--accent) / .35); }
.forum-table .row-sticky:hover td { background: hsl(var(--accent) / .5); }

.thread-title { font-weight: 600; color: hsl(var(--foreground)); text-decoration: none; line-height: 1.4; }
.thread-title:hover { color: hsl(var(--primary)); }
.thread-title.unread { font-weight: 700; }
.num-cell { font-variant-numeric: tabular-nums; text-align: center; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.last-cell { font-size: .75rem; color: hsl(var(--muted-foreground)); line-height: 1.45; white-space: nowrap; }
.last-cell b { color: hsl(var(--foreground)); font-weight: 600; }

.status-ico { width: 2rem; height: 2rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.status-ico svg { width: 1rem; height: 1rem; }
.status-unread { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.status-read { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.status-solved { background: hsl(var(--success) / .15); color: hsl(var(--success)); }
.status-hot { background: hsl(var(--warning) / .18); color: hsl(var(--warning)); }

/* Klasik gönderi düzeni: sol yazar sütunu (≥768px) + üstte mobil */
.post-layout { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .post-layout { grid-template-columns: 13rem 1fr; } }
.post-author-col { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; padding: .875rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .3); }
@media (min-width: 768px) {
  .post-author-col { flex-direction: column; align-items: center; text-align: center; border-bottom: none; border-right: 1px solid hsl(var(--border)); background: transparent; }
}
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .875rem;
  border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5);
  font-size: .75rem; color: hsl(var(--muted-foreground)); }
.post-actions { display: flex; align-items: center; gap: .25rem; padding: .5rem .875rem; border-top: 1px solid hsl(var(--border)); }