/* ------------------------------------------------------------------
   Ortak stil — hem okuma sitesi hem yönetim paneli bunu kullanır.
   Açık/koyu tema cihaz ayarına göre kendiliğinden değişir.
------------------------------------------------------------------ */

/* Sepya (krem/kahve) tema — göze yumuşak, siyah yok. */
:root {
  --arka: #f3e9d2;          /* sepya kağıt */
  --arka-yumusak: #ebdfc4;  /* biraz daha koyu krem */
  --yazi: #4b3a28;          /* koyu sepya kahve */
  --yazi-soluk: #826a4d;    /* ikincil metin */
  --cizgi: #ddcba6;         /* ince çizgiler */
  --vurgu: #985b2e;         /* kiremit/kahve vurgu */
  --vurgu-koyu: #764320;
  --kart: #f7eeda;
  --golge: 0 1px 2px rgba(80,60,30,.08), 0 8px 24px rgba(80,60,30,.08);
  --olcu: 40rem;            /* okuma genişliği */
  --yuvarlak: 12px;
}

/* Cihaz karanlık modda olsa bile sepyada kalsın (siyah göz yorar). */
@media (prefers-color-scheme: dark) {
  :root {
    --arka: #f3e9d2;
    --arka-yumusak: #ebdfc4;
    --yazi: #4b3a28;
    --yazi-soluk: #826a4d;
    --cizgi: #ddcba6;
    --vurgu: #985b2e;
    --vurgu-koyu: #764320;
    --kart: #f7eeda;
    --golge: 0 1px 2px rgba(80,60,30,.08), 0 8px 24px rgba(80,60,30,.08);
  }
}

/* Tarayıcıya formlar/kaydırma için açık tema kullandığımızı bildir. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--arka);
  color: var(--yazi);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Başlıklar ve arayüz öğeleri serif yerine sans */
h1, h2, h3, nav, .arayuz, button, input, textarea, select, label, .ust, .alt {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

.kapsa { width: 100%; max-width: var(--olcu); margin: 0 auto; padding: 0 16px; }
.genis { max-width: 56rem; }

/* ---- Üst bar ---- */
.ust {
  border-bottom: 1px solid var(--cizgi);
  background: var(--arka);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(180%) blur(6px);
}
.ust .kapsa { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 12px; }
.marka { font-weight: 700; font-size: 1.15rem; color: var(--yazi); }
.marka:hover { text-decoration: none; }
.marka small { display: block; font-weight: 400; font-size: .72rem; color: var(--yazi-soluk); letter-spacing: .02em; }
nav { display: flex; gap: 18px; font-size: .95rem; }
nav a { color: var(--yazi-soluk); }
nav a:hover { color: var(--yazi); text-decoration: none; }

/* ---- İçerik ---- */
main { padding: 40px 0 80px; }

.sayfa-basligi { font-size: 1.9rem; line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.01em; }
.sayfa-slogan { color: var(--yazi-soluk); margin: 0 0 32px; font-family: ui-sans-serif, system-ui, sans-serif; }

/* Yazı listesi */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 22px 0; border-bottom: 1px solid var(--cizgi); }
.liste li:first-child { padding-top: 0; }
.yazi-baslik { font-size: 1.4rem; line-height: 1.25; margin: 0 0 4px; }
.yazi-baslik a { color: var(--yazi); }
.ust-bilgi { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .82rem; color: var(--yazi-soluk); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.yazi-ozet { margin: 8px 0 0; color: var(--yazi-soluk); }
.etiket {
  display: inline-block; font-size: .75rem; padding: 2px 10px; border-radius: 999px;
  background: var(--arka-yumusak); color: var(--yazi-soluk); border: 1px solid var(--cizgi);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.etiket:hover { text-decoration: none; color: var(--yazi); }

/* Tek yazı */
article.yazi h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.015em; }
article.yazi .ust-bilgi { margin-bottom: 28px; }
article.yazi { font-size: 1.15rem; }
article.yazi h2 { font-size: 1.5rem; margin: 2em 0 .5em; }
article.yazi h3 { font-size: 1.2rem; margin: 1.6em 0 .4em; }
article.yazi p { margin: 0 0 1.15em; }
article.yazi img { max-width: 100%; height: auto; border-radius: 8px; }
article.yazi blockquote {
  margin: 1.2em 0; padding: 4px 18px; border-left: 3px solid var(--vurgu);
  color: var(--yazi-soluk); background: var(--arka-yumusak); border-radius: 0 8px 8px 0;
}
article.yazi pre {
  background: var(--arka-yumusak); padding: 14px 16px; border-radius: 8px; overflow: auto;
  font-size: .9rem; border: 1px solid var(--cizgi);
}
article.yazi code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
article.yazi :not(pre) > code { background: var(--arka-yumusak); padding: 1px 6px; border-radius: 5px; }
article.yazi hr { border: none; border-top: 1px solid var(--cizgi); margin: 2.4em 0; }
article.yazi ul, article.yazi ol { padding-left: 1.4em; }

/* Durum / boş / yükleniyor */
.durum { color: var(--yazi-soluk); font-family: ui-sans-serif, system-ui, sans-serif; padding: 30px 0; }

/* ---- Alt bilgi ---- */
.alt { border-top: 1px solid var(--cizgi); color: var(--yazi-soluk); font-size: .85rem; padding: 26px 0; margin-top: 40px; }
.alt .kapsa { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------
   Arayüz (form, buton) — yönetim paneli ve ileride yorumlar
------------------------------------------------------------------ */
button, .dugme {
  font-size: .95rem; font-weight: 600; cursor: pointer;
  background: var(--vurgu); color: #fff; border: none;
  padding: 10px 18px; border-radius: 10px; line-height: 1;
}
button:hover, .dugme:hover { background: var(--vurgu-koyu); text-decoration: none; }
button.ikincil, .dugme.ikincil { background: transparent; color: var(--yazi); border: 1px solid var(--cizgi); }
button.ikincil:hover { background: var(--arka-yumusak); }
button.tehlike { background: #b4442f; }
button.tehlike:hover { background: #963522; }
button:disabled { opacity: .5; cursor: default; }

label { display: block; font-size: .85rem; font-weight: 600; margin: 16px 0 6px; color: var(--yazi-soluk); }
input, textarea, select {
  width: 100%; font-size: 1rem; color: var(--yazi); background: var(--arka);
  border: 1px solid var(--cizgi); border-radius: 10px; padding: 11px 13px; font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--vurgu); outline-offset: 1px; border-color: var(--vurgu); }
textarea { resize: vertical; min-height: 260px; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; }

.satir { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.satir > * { flex: 0 0 auto; }
.yay { flex: 1 1 auto; }

.rozet { font-size: .75rem; padding: 2px 9px; border-radius: 999px; font-family: ui-sans-serif, system-ui, sans-serif; }
.rozet.yayin { background: rgba(47,111,78,.15); color: var(--vurgu); }
.rozet.taslak { background: var(--arka-yumusak); color: var(--yazi-soluk); border: 1px solid var(--cizgi); }

/* Yönetim düzeni */
.panel { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .panel { grid-template-columns: 1fr; } }
.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 18px; box-shadow: var(--golge);
}
.yan-liste { list-style: none; margin: 0; padding: 0; }
.yan-liste li { padding: 10px 0; border-bottom: 1px solid var(--cizgi); cursor: pointer; }
.yan-liste li:last-child { border-bottom: none; }
.yan-liste li:hover .yl-baslik { color: var(--vurgu); }
.yan-liste .yl-baslik { font-weight: 600; font-family: ui-sans-serif, system-ui, sans-serif; }
.yan-liste .yl-alt { font-size: .78rem; color: var(--yazi-soluk); display: flex; gap: 8px; align-items: center; margin-top: 3px; }

.uyari { padding: 11px 14px; border-radius: 10px; font-size: .9rem; margin: 12px 0; font-family: ui-sans-serif, system-ui, sans-serif; }
.uyari.hata { background: rgba(180,68,47,.12); color: #b4442f; }
.uyari.ok { background: rgba(47,111,78,.14); color: var(--vurgu); }

.giris-kutu { max-width: 360px; margin: 8vh auto; }

.onizleme {
  border: 1px dashed var(--cizgi); border-radius: 10px; padding: 16px 18px; margin-top: 10px;
  max-height: 340px; overflow: auto; background: var(--arka-yumusak); font-family: ui-serif, Georgia, serif;
}
.onizleme h2 { margin-top: .4em; }
.gizle { display: none !important; }