/* İşletme paneli.
   Yönetim paneliyle akraba ama onun kadar yoğun değil: buraya günde bir
   kez, telefondan giren bir esnaf var. Az alan, büyük hedefler, net
   durum bilgisi. */

:root {
  --ink: #16211b;
  --ink-soft: #55655c;
  --cizgi: #dde5df;
  --zemin: #f4f7f4;
  --kart: #ffffff;
  --yesil: #2d5a3f;
  --altin: #b3892f;
  --kirmizi: #a8332a;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* [hidden] her display kuralını yenmeli — .giris display:grid olduğu için
   aksi hâlde giriş ekranı panelin üstünde asılı kalıyor. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--zemin);
  font-size: 15px;
  line-height: 1.55;
}

.marka { font-size: 1rem; margin: 0; letter-spacing: .01em; }
.marka span { color: var(--altin); }
.marka em { font-style: normal; color: var(--ink-soft); font-size: .85rem; }

h2 { font-size: 1.02rem; font-weight: 600; margin: 0 0 4px; }
.ipucu { color: var(--ink-soft); font-size: .82rem; margin: 0 0 14px; }
.ipucu:last-child { margin-bottom: 0; }

/* ── Giriş ─────────────────────────────────────────────────────────── */
.giris { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.giris-kutu {
  width: 100%; max-width: 340px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 30px 28px 26px;
}
.giris-kutu h1 { margin: 6px 0 6px; font-size: 1.3rem; font-weight: 600; }
.giris-not { color: var(--ink-soft); font-size: .85rem; margin: 0 0 18px; }
.giris-kutu label { display: block; margin: 14px 0 5px; font-size: .82rem; color: var(--ink-soft); }
.giris-kutu button[type="submit"] { width: 100%; margin-top: 20px; }

/* ── Alanlar ───────────────────────────────────────────────────────── */
input, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--cizgi);
  border-radius: 7px;
  font: inherit;
  color: inherit;
  background: #fff;
}
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--yesil);
  outline-offset: 2px;
}
textarea { resize: vertical; line-height: 1.5; }

.alanlar { display: grid; gap: 13px; margin-bottom: 18px; }
.alanlar label { display: block; font-size: .82rem; color: var(--ink-soft); }
.alanlar label input, .alanlar label textarea { margin-top: 5px; color: var(--ink); font-size: .95rem; }
.alanlar .ipucu { display: inline; margin: 0 0 0 4px; font-size: .76rem; }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

/* ── Düğmeler ──────────────────────────────────────────────────────── */
button {
  font: inherit;
  padding: 9px 17px;
  border-radius: 8px;
  border: 1px solid var(--yesil);
  background: var(--yesil);
  color: #fff;
  cursor: pointer;
}
button:hover { background: #24492f; }
button:disabled { opacity: .55; cursor: default; }

.ikincil, a.ikincil {
  background: #fff; color: var(--ink); border-color: var(--cizgi);
  padding: 7px 13px; font-size: .85rem; border-radius: 7px;
  text-decoration: none; display: inline-block; line-height: 1.4;
  border-width: 1px; border-style: solid; cursor: pointer;
}
.ikincil:hover, a.ikincil:hover { background: var(--zemin); border-color: #c6d2c9; }

.sil {
  background: #fff; color: var(--kirmizi); border-color: var(--cizgi);
  padding: 5px 11px; font-size: .78rem;
}
.sil:hover { background: #fdf2f1; border-color: #e6c4c0; }

/* ── Üst çubuk ─────────────────────────────────────────────────────── */
.ust {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 5;
}
.ust .marka { margin-right: auto; }

.icerik { max-width: 780px; margin: 0 auto; padding: 22px 18px 60px; display: grid; gap: 16px; }

.uyari {
  margin: 0;
  padding: 12px 15px;
  border: 1px solid #e8dcb8;
  background: #fdf8ea;
  border-radius: 10px;
  font-size: .87rem;
}

.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 13px;
  padding: 20px 22px;
}

.sonuc { font-size: .84rem; margin: 11px 0 0; }
.sonuc.iyi { color: var(--yesil); }
.sonuc.kotu { color: var(--kirmizi); }
.hata { color: var(--kirmizi); font-size: .84rem; margin: 13px 0 0; }

/* ── Görseller ─────────────────────────────────────────────────────── */
.birakma-alani {
  border: 1.5px dashed #c6d2c9;
  border-radius: 11px;
  padding: 26px 18px;
  text-align: center;
  color: var(--ink-soft);
  font-size: .87rem;
  background: #fbfdfb;
}
.birakma-alani.uzerinde { border-color: var(--yesil); background: #eef5f0; }
.birakma-alani span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }

.kapak { margin: 0; }
.kapak img {
  /* Oran sabit: görsel yüklenene kadar kutu çökmesin, altındaki düğme
     yerinden oynamasın. */
  width: 100%; aspect-ratio: 16 / 9; max-height: 260px; object-fit: cover;
  border-radius: 11px; border: 1px solid var(--cizgi); display: block; background: var(--zemin);
}
.kapak figcaption { margin-top: 10px; }

.kare-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 11px;
  margin-top: 14px;
}
.kare { margin: 0; }
.kare img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--cizgi); display: block; background: var(--zemin);
}
.kare figcaption { margin-top: 6px; text-align: center; }
.kare-izgara .ipucu { grid-column: 1 / -1; }

.anlatim { font-size: .93rem; }
.anlatim p { margin: 0 0 11px; }
.anlatim p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .ust { padding: 11px 14px; flex-wrap: wrap; }
  .icerik { padding: 16px 12px 48px; }
  .kart { padding: 17px 15px; }
  .ikili { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  button, .birakma-alani { transition: background .15s, border-color .15s; }
}