/* =========================================================
   UtkuEmlak — Design tokens
   Palette: deep emerald (trust/verified) + warm amber (urgency/stock)
   Type: Sora (display) / Inter (body) / JetBrains Mono (data, stock, price)
   ========================================================= */
:root{
  --bg:            #F5F8F6;
  --bg-alt:        #EEF3F0;
  --surface:       #FFFFFF;
  --surface-sunk:  #F0F4F2;
  --ink:           #101915;
  --ink-2:         #384A41;
  --ink-muted:     #647167;
  --border:        #E0E8E3;
  --border-strong: #C7D3CC;

  --primary:       #0F6E5C;
  --primary-dark:  #0A4F42;
  --primary-tint:  #E4F2ED;
  --primary-tint-2:#CFEAE1;

  --accent:        #F2A93B;
  --accent-dark:   #B97A16;
  --accent-tint:   #FDF1DC;

  --danger:        #D6493F;
  --danger-tint:   #FBEAE8;
  --success:       #1E9E6B;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(16, 25, 21, 0.06);
  --shadow-m: 0 8px 24px -8px rgba(16, 25, 21, 0.16);
  --shadow-l: 0 24px 48px -16px rgba(16, 25, 21, 0.22);

  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.15; letter-spacing: -0.01em; }
p{ margin:0; }

:focus-visible{
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.container{
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 14.5px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--primary); color:#fff; box-shadow: var(--shadow-s); }
.btn-primary:hover{ background: var(--primary-dark); box-shadow: var(--shadow-m); }
.btn-ghost{ background: transparent; border-color: var(--border-strong); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--primary); color: var(--primary); }
.btn-accent{ background: var(--accent); color: #3A2503; }
.btn-accent:hover{ background: var(--accent-dark); color:#fff; }
.btn-danger{ background: var(--danger-tint); color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color:#fff; }
.btn-sm{ padding: 7px 14px; font-size: 13px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; }

.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: .01em;
}
.badge-verified{ background: var(--primary-tint); color: var(--primary-dark); }
.badge-low{ background: var(--accent-tint); color: var(--accent-dark); }
.badge-out{ background: var(--danger-tint); color: var(--danger); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

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