/* Katalog Denetim — veri inceleme arayuzu
   Notr soguk zemin: urun fotograflarinin rengi yanilmasin. */

:root {
  --zemin:    #E8EAED;
  --panel:    #FFFFFF;
  --panel-2:  #F4F5F7;
  --murekkep: #14181F;
  --soluk:    #6E7683;
  --cizgi:    #D3D7DD;
  --cizgi-2:  #E4E7EB;
  --vurgu:    #1F5C4A;
  --vurgu-ac: #E6EFEB;
  --uyari:    #A8620E;
  --eksik:    #9B2C2C;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --ray-en: 232px;
  --ust-yuk: 52px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- ust serit ---------- */

.ust {
  position: sticky; top: 0; z-index: 40;
  height: var(--ust-yuk);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 18px;
  background: var(--murekkep); color: #fff;
}
.ust-sol { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.marka {
  font-family: var(--display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em;
}
.kaynak {
  font-family: var(--mono); font-size: 11px;
  color: #9AA3B0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ok { color: #5F8F7D; }
.ust-sag { font-family: var(--mono); font-size: 11px; color: #9AA3B0; white-space: nowrap; }

/* ---------- yerlesim ---------- */

.govde { display: flex; align-items: flex-start; min-height: calc(100vh - var(--ust-yuk)); }

.ray {
  width: var(--ray-en); flex: 0 0 var(--ray-en);
  position: sticky; top: var(--ust-yuk);
  height: calc(100vh - var(--ust-yuk));
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--cizgi);
  padding: 14px 0;
}
.ray-baslik {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--soluk); padding: 0 18px 10px;
}
.ray a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 18px; text-decoration: none; color: var(--murekkep);
  font-size: 13px; line-height: 1.3;
  border-left: 3px solid transparent;
}
.ray a:hover { background: var(--panel-2); }
.ray a.etkin { border-left-color: var(--vurgu); background: var(--vurgu-ac); font-weight: 500; }
.ray a .adet { font-family: var(--mono); font-size: 11px; color: var(--soluk); }
.ray a.etkin .adet { color: var(--vurgu); }

.ana { flex: 1; min-width: 0; padding: 22px 24px 80px; }

/* ---------- sayfa basligi ---------- */

.sayfa-bas { margin-bottom: 20px; }
.sayfa-bas h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.sayfa-bas .alt { font-family: var(--mono); font-size: 12px; color: var(--soluk); }

/* ---------- urun izgarasi ---------- */

.izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.kart {
  background: var(--panel); border: 1px solid var(--cizgi);
  text-align: left; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .12s, transform .12s;
}
.kart:hover { border-color: var(--murekkep); transform: translateY(-2px); }
.kart:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

.kart-foto { aspect-ratio: 3 / 4; background: var(--panel-2); position: relative; flex: 0 0 auto; }
.kart-foto img { width: 100%; height: 100%; object-fit: cover; }
.kart-foto .yok {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--eksik);
}

.kart-govde { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kart-ad {
  font-size: 12.5px; line-height: 1.35; font-weight: 500;
  min-height: calc(2 * 1.35em);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kart-fiyat { font-family: var(--mono); font-size: 13px; font-weight: 600; }

/* imza: veri kunyesi — bu urunden ne kadar veri cektik */
.kunye {
  display: flex; gap: 10px; margin-top: auto;
  padding-top: 8px; border-top: 1px solid var(--cizgi-2);
  font-family: var(--mono); font-size: 10.5px; color: var(--soluk);
}
.kunye span { display: inline-flex; align-items: center; gap: 3px; }
.kunye .dikkat { color: var(--uyari); font-weight: 600; }
.kunye .kotu   { color: var(--eksik); font-weight: 600; }

/* ---------- urun detayi ---------- */

.detay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 22px; align-items: start; }

.geri {
  background: none; border: 0; padding: 0; margin-bottom: 14px;
  font-family: var(--mono); font-size: 12px; color: var(--soluk);
}
.geri:hover { color: var(--murekkep); }

.galeri {
  background: var(--panel); border: 1px solid var(--cizgi); padding: 12px;
  position: sticky; top: calc(var(--ust-yuk) + 22px);
}
.galeri-buyuk { background: var(--panel-2); aspect-ratio: 3 / 4; max-height: 72vh; margin-inline: auto; }
.galeri-buyuk img { width: 100%; height: 100%; object-fit: contain; }
.galeri-serit { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.galeri-serit button {
  width: 54px; height: 72px; padding: 0; border: 1px solid var(--cizgi); background: var(--panel-2);
  overflow: hidden;
}
.galeri-serit button img { width: 100%; height: 100%; object-fit: cover; }
.galeri-serit button.etkin { border-color: var(--vurgu); border-width: 2px; }
.galeri-sayi { font-family: var(--mono); font-size: 11px; color: var(--soluk); margin-top: 8px; }

/* veri fisi */
.fis { background: var(--panel); border: 1px solid var(--cizgi); }
.fis-bas {
  padding: 12px 14px; border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fis-bas h2 { font-family: var(--display); font-size: 13px; letter-spacing: 0.1em; margin: 0; font-weight: 700; }
.fis-bas .ipucu { font-family: var(--mono); font-size: 10.5px; color: var(--soluk); }

.alan { border-bottom: 1px solid var(--cizgi-2); padding: 11px 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.alan:last-child { border-bottom: 0; }
.alan.isaretli { background: #FBEDED; }
.alan-bas { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; }
.alan-ad { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--vurgu); }
.alan.isaretli .alan-ad { color: var(--eksik); text-decoration: line-through; }
.alan-tip { font-family: var(--mono); font-size: 10px; color: var(--soluk); }
.alan-sil {
  margin-left: auto; background: none; border: 1px solid var(--cizgi);
  font-family: var(--mono); font-size: 10px; color: var(--soluk);
  padding: 2px 7px; line-height: 1.6;
}
.alan-sil:hover { border-color: var(--eksik); color: var(--eksik); }
.alan.isaretli .alan-sil { border-color: var(--eksik); color: var(--eksik); background: #fff; }
.alan-deger { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.alan-deger.mono { font-family: var(--mono); font-size: 12.5px; }

.beden-liste { display: flex; flex-wrap: wrap; gap: 5px; }
.beden {
  font-family: var(--mono); font-size: 11.5px;
  border: 1px solid var(--cizgi); padding: 3px 8px; background: var(--panel-2);
}
.beden b { font-weight: 600; }
.beden i { font-style: normal; color: var(--soluk); }

.aciklama {
  max-height: 260px; overflow-y: auto; font-size: 13.5px; line-height: 1.6;
  border: 1px solid var(--cizgi-2); padding: 10px; background: var(--panel-2);
  white-space: pre-wrap;
}
.aciklama.html { white-space: normal; }
.aciklama.html img { max-width: 100%; height: auto; }
.aciklama.html p:first-child { margin-top: 0; }
.olcu { font-family: var(--mono); font-size: 10.5px; color: var(--soluk); margin-top: 5px; }

.ham {
  width: 100%; margin-top: 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  max-height: 300px; overflow: auto; background: var(--murekkep); color: #C8D0DA;
  padding: 12px; white-space: pre; display: none;
}
.ham.acik { display: block; }

/* ---------- silinecekler seridi ---------- */

.sepet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--murekkep); color: #fff;
  border-top: 2px solid var(--eksik);
}
.sepet-ic {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; flex-wrap: wrap;
}
.sepet-baslik { font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; font-weight: 700; }
.sepet-liste { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.sepet-liste span {
  font-family: var(--mono); font-size: 11px;
  background: #262C36; padding: 3px 8px; border-radius: 2px;
}
.sepet-dugmeler { display: flex; gap: 8px; }
.sepet button {
  font-family: var(--mono); font-size: 11px;
  background: #fff; color: var(--murekkep); border: 0; padding: 6px 12px;
}
.sepet button.sade { background: transparent; color: #9AA3B0; border: 1px solid #3A424E; }

/* ---------- duyarli ---------- */

@media (max-width: 900px) {
  .detay { grid-template-columns: 1fr; }
  .galeri { position: static; }
  .ray {
    position: static; width: 100%; flex: none; height: auto;
    display: flex; gap: 4px; overflow-x: auto; padding: 10px;
    border-right: 0; border-bottom: 1px solid var(--cizgi);
  }
  .ray-baslik { display: none; }
  .ray a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; padding: 7px 12px; }
  .ray a.etkin { border-left: 0; border-bottom-color: var(--vurgu); }
  .govde { display: block; }
  .ana { padding: 16px 14px 90px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .kart:hover { transform: none; }
}