/* Labelonomy vitrin — Figma "Labelonomy" dosyasının (RlhrUiXbtuIBWs2GDAF2wk) HTML karşılığı.
   Renk/boşluk/yazı değerleri site/marka/marka.json ve Figma değişkenleriyle aynı. Dış istek yok. */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --lacivert: #0B1D35;
  --camgobegi: #00C2FF;
  --koyu-camgobegi: #00597A;
  --kar: #F5F8FC;
  --sis: #E3E9F1;
  --gri-metin: #33465F;
  --koyu-ikincil: #9FB3CC;
  --beyaz: #FFFFFF;
  --cizgi: #C8D3E1;
  --bos-zemin: #FEE4E2; --bos-metin: #B42318;
  --belirsiz-zemin: #FEF0C7; --belirsiz-metin: #93370D;
  --var-zemin: #DCFAE6; --var-metin: #067647;
  --yan: clamp(24px, 8.3vw, 120px);
  --bolum: clamp(64px, 7vw, 96px);
  --r8: 8px; --r16: 16px; --r999: 999px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--beyaz); color: var(--lacivert);
  font-family: "Space Grotesk", system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--koyu-camgobegi); }
a:focus-visible, .dugme:focus-visible { outline: 3px solid var(--camgobegi); outline-offset: 3px; }
.ic { max-width: 1440px; margin: 0 auto; padding: 0 var(--yan); }
.bolum { padding: var(--bolum) 0; }
.bolum--kar { background: var(--kar); }
.bolum--lacivert { background: var(--lacivert); color: var(--kar); }
.ust-etiket { margin: 0; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; color: var(--gri-metin); }
.bolum--lacivert .ust-etiket { color: var(--camgobegi); }
h1, h2, h3 { margin: 0; }
h1 { font-size: clamp(40px, 4.4vw, 56px); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; color: var(--kar); }
h2 { font-size: clamp(24px, 3vw, 40px); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.bolum-baslik { display: grid; gap: 12px; margin-bottom: clamp(32px, 4vw, 48px); max-width: 960px; }
.aciklama { font-size: 18px; line-height: 28px; color: var(--gri-metin); margin: 0; }
.bolum--lacivert .aciklama { color: var(--koyu-ikincil); }

/* Düğme */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r8); font: inherit; font-size: 16px; line-height: 20px; font-weight: 500;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer; min-height: 44px;
}
.dugme--birincil { background: var(--lacivert); color: var(--beyaz); }
.dugme--vurgu { background: var(--camgobegi); color: var(--lacivert); }
.dugme--koyu-ikincil { border-color: var(--kar); color: var(--kar); background: transparent; }

/* Üst menü */
.ust-menu { position: sticky; top: 0; z-index: 10; background: var(--beyaz); border-bottom: 1px solid var(--sis); }
.ust-menu .ic { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.ust-menu img { height: 32px; width: auto; }
.ust-menu nav { display: flex; align-items: center; gap: 32px; }
.ust-menu nav a:not(.dugme) { color: var(--lacivert); text-decoration: none; }
.ust-menu nav a:not(.dugme):hover { color: var(--koyu-camgobegi); }

/* Giriş */
.giris .ic { display: grid; grid-template-columns: minmax(0, 1fr) 528px; gap: 64px; align-items: center; }
.giris .metin { display: grid; gap: 24px; }
.giris .dugmeler { display: flex; gap: 16px; flex-wrap: wrap; }

/* Bulgu kartı */
.bulgu-karti { background: var(--beyaz); color: var(--lacivert); border-radius: var(--r16); padding: 24px; display: grid; gap: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); }
.bulgu-karti .urun { font-size: 24px; line-height: 32px; font-weight: 500; margin: 0; }
.bulgu-karti ul { list-style: none; margin: 0; padding: 0; }
.bulgu-karti li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.bulgu-karti .alan { display: block; font-size: 14px; line-height: 20px; color: var(--gri-metin); }
.bulgu-karti .deger { display: block; }
.bulgu-karti .kucuk { font-size: 14px; line-height: 20px; color: var(--gri-metin); margin: 0; }
.rozet { flex: none; display: inline-block; padding: 4px 12px; border-radius: var(--r999); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; white-space: nowrap; }
.rozet--bos { background: var(--bos-zemin); color: var(--bos-metin); }
.rozet--belirsiz { background: var(--belirsiz-zemin); color: var(--belirsiz-metin); }
.rozet--var { background: var(--var-zemin); color: var(--var-metin); }

/* Kartlar */
.kartlar { display: grid; gap: 24px; grid-template-columns: repeat(var(--sutun, 3), minmax(0, 1fr)); }
.kart { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r16); padding: 24px; display: grid; gap: 12px; align-content: start; }
.kart p { margin: 0; color: var(--gri-metin); }
.kart .numara { width: 36px; height: 36px; border-radius: var(--r999); background: var(--lacivert); color: var(--beyaz);
  display: grid; place-items: center; font-weight: 500; }

/* Durumlar */
.durumlar { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.durumlar li { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 24px;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r16); padding: 16px 24px; font-size: 18px; line-height: 28px; }
.durumlar .rozet { justify-self: start; }
.not { margin: 24px 0 0; color: var(--gri-metin); }

/* Kaynaklar */
.etiketler { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.etiketler li { padding: 8px 16px; border: 1px solid var(--cizgi); border-radius: var(--r999); background: var(--beyaz); }

/* Çağrı + alt bilgi */
.cagri .ic { display: grid; gap: 24px; }
.cagri .eylem { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cagri .eylem .eposta { color: var(--koyu-ikincil); }
.cagri .eylem .eposta:hover { color: var(--kar); }
.alt-bilgi { background: var(--lacivert); color: var(--koyu-ikincil); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.alt-bilgi .ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 32px; padding-bottom: 32px; flex-wrap: wrap; font-size: 14px; }
.alt-bilgi img { height: 29px; width: auto; }

/* Mobil */
@media (max-width: 1023px) {
  .giris .ic { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kartlar { --sutun: 1 !important; }
  .durumlar li { grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 16px; line-height: 24px; }
}
@media (max-width: 640px) {
  .ust-menu nav a:not(.dugme) { display: none; }
  .ust-menu img { height: 26px; }
  .giris .dugmeler .dugme { flex: 1 1 100%; }
  .bulgu-karti { padding: 16px; }
  .bulgu-karti li { align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; }
  .bulgu-karti li > span:first-child { flex: 1 1 160px; }
  .aciklama { font-size: 16px; line-height: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Dil bağlantısı (EN ↔ TR; betik yok, düz bağlantı) */
.ust-menu nav a.dil { font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; padding: 6px 10px;
  border: 1px solid var(--cizgi); border-radius: var(--r999); }
.ust-menu nav a.dil:hover { border-color: var(--koyu-camgobegi); }
@media (max-width: 640px) {
  .ust-menu .ic { gap: 12px; }
  .ust-menu nav { gap: 8px; }
  .ust-menu nav a.dil { display: inline-block; }
  .ust-menu nav .dugme { white-space: nowrap; padding: 10px 14px; font-size: 15px; }
}
.bolme-yok { white-space: nowrap; }