:root {
  --zemin: #fdfdfb;
  --yazi: #16150f;
  --soluk: #6f6d66;
  --genislik: 34rem;
  --cizgi: #dcdad3;
}
@media (prefers-color-scheme: dark) {
  :root { --zemin: #141412; --yazi: #e8e6df; --soluk: #97958c; --cizgi: #34332e; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0 1.5rem;
  background: var(--zemin);
  color: var(--yazi);
  font: 400 1.1875rem/1.65 "Spectral", Georgia, "Times New Roman", serif;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, summary:focus-visible { outline: 1px solid var(--yazi); outline-offset: 3px; }
h1, h2 { margin: 0; font-size: 1.5rem; font-weight: 400; line-height: 1.3; }
strong { font-weight: 600; }
.yazi h2, .tek h1, .komsu span { font-family: "Fraunces", "Spectral", Georgia, serif; font-optical-sizing: auto; }
time, .konum, .tepe nav, .devam, summary, small { font-size: .9375rem; }
time, .konum, small { color: var(--soluk); }
.metin { white-space: pre-line; }

.atla { position: absolute; left: -999px; }
.atla:focus { left: 1rem; top: 1rem; }

.tepe, main { max-width: var(--genislik); margin: 0 auto; }
.tepe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 2rem;
  padding: 3.5rem 0 5rem;
}
.tepe nav { display: flex; gap: 1.5rem; }
.tepe nav a { color: var(--soluk); }
.tepe nav a[aria-current] { color: var(--yazi); }

.yazi { margin-bottom: 5.5rem; }
.yazi time, .tek time { display: block; margin-bottom: 1.5rem; }
.devam { display: inline-block; margin-top: 1rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.tek { margin-bottom: 5rem; }
.komsular { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 5rem; }
.komsu {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  line-height: 1.3;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.komsu:only-child { grid-column: 1 / -1; }
.komsu.sag { text-align: right; }
.komsu small { color: var(--soluk); font-size: .8125rem; transition: color .15s ease; }
.komsu span { font-size: 1.0625rem; overflow-wrap: anywhere; }
.komsu:hover { color: var(--zemin); background: var(--yazi); border-color: var(--yazi); text-decoration: none; transform: translateY(-2px); }
.komsu:hover small { color: inherit; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .komsu, .komsu small { transition: none; } .komsu:hover { transform: none; } }

.mektup-bas { margin-bottom: 4.5rem; }
.mektup-bas p { margin: 0; color: var(--soluk); font-size: .9375rem; }
.mektup { margin-bottom: 4rem; }
.imza { margin: .75rem 0 0; color: var(--soluk); font-size: .9375rem; }
summary { margin-top: .5rem; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
summary::-webkit-details-marker { display: none; }
details[open] summary { display: none; }
details[open] .metin { margin-top: 1em; }

.hakkinda { margin-bottom: 5rem; }
.hakkinda p { margin: 0 0 1em; }
.hakkinda .giris { margin-top: 1.5rem; }
.hakkinda h2 { margin: 3.5rem 0 0; }
.hakkinda h3 { margin: 1.75rem 0 .35rem; color: var(--soluk); font-size: .9375rem; font-weight: 400; }
.hakkinda ul { margin: 0; padding: 0; list-style: none; }
.filmler { columns: 2; column-gap: 2rem; }
.filmler li { break-inside: avoid; }

.yaz-alani { margin: -2.5rem 0 4.5rem; }
.yaz-alani summary { margin: 0; }
.yaz-alani form { max-width: 100%; }
.not { margin: 0 0 1.5rem; color: var(--soluk); font-size: .9375rem; }
.bildirim { margin: 0 0 1.25rem; font-size: .9375rem; }
.bildirim[role=alert] { padding: .75rem 1rem; color: #fff; background: #a3261b; font-size: 1rem; }
label { display: block; margin-bottom: .25rem; font-size: .9375rem; }
label span { color: var(--soluk); }
input, textarea, button { font: inherit; color: inherit; }
input:not([type=hidden]), textarea {
  display: block;
  width: 100%;
  margin-bottom: 1.5rem;
  padding: .55rem .7rem;
  background: transparent;
  border: 1px solid var(--soluk);
  border-radius: 0;
}
textarea { resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, button:focus-visible { outline: 1px solid var(--yazi); outline-offset: 0; border-color: var(--yazi); }
button {
  padding: .4rem 1.1rem;
  font-size: .9375rem;
  background: transparent;
  border: 1px solid var(--yazi);
  border-radius: 0;
  cursor: pointer;
}
button:hover { background: var(--yazi); color: var(--zemin); }
.gizli-alan { position: absolute; left: -9999px; height: 1px; overflow: hidden; }


.alinti { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--soluk); font-size: 1.0625rem; }
.alinti h3 { margin: 0 0 .75rem; color: var(--soluk); font-size: .9375rem; font-weight: 400; }
.yazi .alinti time, .tek .alinti time { display: inline; margin: 0; }
.alinti details[open] .metin { margin-top: 0; }
.alinti:has(details[open]) .ilk-parca { display: none; }
.alinti summary { margin-top: .5rem; }
.dugme {
  display: inline-block;
  margin-top: 1.25rem;
  padding: .4rem 1.1rem;
  font-size: .9375rem;
  border: 1px solid var(--yazi);
}
.dugme:hover { color: var(--zemin); background: var(--yazi); text-decoration: none; }

.sayfalama {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  padding: 1rem 0 5rem;
  font-size: .9375rem;
}
.sayfalama > span:last-child { text-align: right; }
.numaralar { display: flex; align-items: center; gap: .15rem; }
.numaralar a, .numaralar .mevcut, .numaralar .bosluk { min-width: 1.75rem; padding: .15rem .3rem; text-align: center; }
.numaralar .mevcut { color: var(--zemin); background: var(--yazi); }
.numaralar .bosluk { color: var(--soluk); }
.dip a { text-decoration: underline; text-underline-offset: 2px; }

.abone { max-width: var(--genislik); margin: 0 auto; padding: 2rem 0 2.5rem; border-top: 1px solid var(--soluk); }
.abone h2 { margin-bottom: 1rem; font-size: 1.125rem; }
.abone-alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.abone input:not([type=checkbox]):not([type=hidden]) { margin-bottom: 1rem; }
.abone .izin { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; color: var(--soluk); font-size: .875rem; line-height: 1.45; }
.abone .izin input { flex: none; display: block; width: 16px; height: 16px; margin: .15rem 0 0; padding: 0; accent-color: var(--yazi); }
.abone .izin span { color: inherit; }
.abone .izin a { text-decoration: underline; text-underline-offset: 2px; }
.dip {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--soluk);
  color: var(--soluk);
  font-size: .75rem;
  line-height: 1.55;
}
.dip p { margin: 0 0 .6em; }
.dip .dip-kitap { margin: 0 0 1.25rem; }
.dip .dugme { margin: 0; color: var(--yazi); font-size: .875rem; text-decoration: none; }
.dip .dugme:hover { color: var(--zemin); }

/* Kitap satın al: ürün kartları */
.urunler { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.urun {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--cizgi); background: var(--zemin);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.urun:hover { text-decoration: none; border-color: var(--yazi); transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); }
.urun:focus-visible { outline: 1px solid var(--yazi); outline-offset: 3px; }
.urun-gorsel { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; padding: 1rem; background: color-mix(in srgb, var(--cizgi) 35%, var(--zemin)); border-bottom: 1px solid var(--cizgi); }
.urun-gorsel img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
.urun-govde { display: flex; flex-direction: column; flex: 1; gap: .2rem; padding: .85rem .9rem .9rem; }
.urun-ad { font-family: "Fraunces", serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.3; }
.urun-magaza { margin-bottom: .85rem; color: var(--soluk); font-size: .875rem; }
.urun-dugme { margin-top: auto; padding: .45rem .75rem; text-align: center; font-size: .875rem; border: 1px solid var(--yazi); transition: background .15s ease, color .15s ease; }
.urun:hover .urun-dugme { color: var(--zemin); background: var(--yazi); }
@media (max-width: 480px) { .urunler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .urun-gorsel { padding: .6rem; } }

@media (max-width: 600px) {
  body { padding: 0 1.25rem; font-size: 1.125rem; }
  .tepe { padding: 2rem 0 3.5rem; }
  .yazi { margin-bottom: 4rem; }
  .tepe nav { gap: 1.25rem; }
  .filmler { columns: 1; }
  .abone-alanlar { grid-template-columns: minmax(0, 1fr); }
  .komsular { grid-template-columns: minmax(0, 1fr); }
}
.eposta-not { margin: -1.1rem 0 1.5rem; font-size: .8125rem; }