:root {
  --arka: #f4f2ee;
  --kart: #ffffff;
  --murekkep: #1c1a17;
  --soluk: #6b655c;
  --cizgi: #ddd8cf;
  --vurgu: #6b4f2e;
  --vurgu-koyu: #4f3a1f;
  --uyari-arka: #fbe6e0;
  --uyari-cizgi: #d9765a;
  --uyari-yazi: #8a2e12;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--murekkep);
  background: var(--arka);
  line-height: 1.45;
}

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0 0 .4rem; }

/* ---- ust bar ---- */
.ust-bar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .6rem 1.2rem;
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
}
.marka { font-weight: 700; font-size: 1.1rem; color: var(--murekkep); }
.ust-bar nav { display: flex; gap: 1rem; align-items: center; }
.ust-sag { margin-left: auto; display: flex; gap: 1rem; align-items: center; }
.kim { color: var(--soluk); font-size: .9rem; }
.satir-ici { display: inline; margin: 0; }
.baglanti-buton {
  background: none; border: none; color: var(--vurgu); cursor: pointer;
  font: inherit; padding: 0; text-decoration: none;
}
.baglanti-buton:hover { text-decoration: underline; }

.govde, .calisma { padding: 1.4rem; max-width: 1200px; margin: 0 auto; }
.calisma { max-width: 1400px; }

/* ---- giris ---- */
.giris-govde {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--arka);
}
.giris-kart {
  background: var(--kart); padding: 2rem; border-radius: 12px;
  border: 1px solid var(--cizgi); width: 340px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: .9rem;
}
.giris-kart h1 { margin: 0; }
.alt-baslik { margin: 0 0 .5rem; color: var(--soluk); font-size: .9rem; }
.giris-kart label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }

input, select, textarea {
  font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--cizgi); border-radius: 8px;
  background: #fff; color: var(--murekkep); width: 100%;
}
input[type="color"] { padding: .2rem; height: 2.3rem; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--vurgu); outline-offset: 0;
}

button {
  font: inherit; cursor: pointer; border-radius: 8px; padding: .55rem .9rem;
  border: 1px solid var(--cizgi); background: #fff;
}
.birincil { background: var(--vurgu); color: #fff; border-color: var(--vurgu); font-weight: 600; }
.birincil:hover { background: var(--vurgu-koyu); }
.birincil:disabled { opacity: .5; cursor: not-allowed; }
.ikincil { background: #fff; }

.uyari {
  background: var(--uyari-arka); border: 1px solid var(--uyari-cizgi);
  color: var(--uyari-yazi); padding: .6rem .8rem; border-radius: 8px; font-size: .9rem;
}
.gizli { display: none; }

/* ---- tasarim izgara ---- */
.sayfa-basi { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sayfa-basi h1 { margin: 0; }
.arama { display: flex; gap: .5rem; margin-left: auto; align-items: center; }
.arama input { width: 260px; }
.temizle { font-size: .85rem; }

.izgara {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px;
  overflow: hidden; color: var(--murekkep); display: flex; flex-direction: column;
  transition: box-shadow .12s, transform .12s;
}
.kart:hover { text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.kart-onizleme {
  aspect-ratio: 1 / 1; background: #fbfaf7; display: grid; place-items: center;
  border-bottom: 1px solid var(--cizgi); padding: .8rem;
}
.kart-onizleme img { max-width: 100%; max-height: 100%; }
.onizleme-yok { color: var(--soluk); font-size: .8rem; }
.kart-govde { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .2rem; }
.kod-etiket {
  font-family: ui-monospace, monospace; font-size: .75rem; color: var(--vurgu);
  letter-spacing: .04em;
}
.kart-ad { font-weight: 600; }
.bos { color: var(--soluk); }

/* ---- calisma ekrani ---- */
.calisma-baslik { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.calisma-baslik h1 { margin: .2rem 0; font-size: 1.3rem; }
.aciklama { margin: 0; color: var(--soluk); font-size: .9rem; max-width: 60ch; }
.geri { margin-left: auto; white-space: nowrap; }

.calisma-alan {
  display: grid; grid-template-columns: 1fr 380px; gap: 1.4rem; align-items: start;
}
@media (max-width: 900px) { .calisma-alan { grid-template-columns: 1fr; } }

.onizleme-sutun { position: sticky; top: 1rem; }
.onizleme-tuval {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px;
  aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 1.5rem;
  overflow: hidden;
}
.onizleme-tuval svg { max-width: 100%; max-height: 100%; height: auto; }
.onizleme-ipucu { color: var(--soluk); font-size: .9rem; }
#onizleme-hata { margin-top: .8rem; }

.form-sutun { display: flex; flex-direction: column; gap: 1rem; }
.panel {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 1rem; display: flex; flex-direction: column; gap: .7rem;
}
.panel legend, .katlanir summary {
  font-weight: 600; padding: 0 .3rem;
}
.katlanir summary { cursor: pointer; list-style: revert; }
.katlanir[open] { gap: .7rem; }
.alan-satir { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; }
.alan-etiket { color: var(--soluk); }

/* ---- tablo ---- */
.liste { width: 100%; border-collapse: collapse; background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; }
.liste th, .liste td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--cizgi); font-size: .9rem; }
.liste th { background: #faf8f4; color: var(--soluk); font-weight: 600; }
.liste tr:last-child td { border-bottom: none; }
.tek-satir { font-family: ui-monospace, monospace; font-size: .8rem; }

/* ---- formlar ---- */
.dar { max-width: 520px; }
.dikey-form { display: flex; flex-direction: column; gap: .9rem; margin-top: 1rem; }
.dikey-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.cikis { color: var(--soluk); }