:root {
  --zemin: #f5efe6;
  --zemin-koyu: #ece3d5;
  --kart: #fffdf9;
  --kahve: #5c4a3d;
  --kahve-acik: #a08a76;
  --metin: #111827;
  --vurgu: #10b981;
  --vurgu-koyu: #059669;
  --kenar: #e3d7c6;
  --serif: "Lora", Georgia, serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --yuvarlak: 18px;
  --yuvarlak-kucuk: 10px;
  --golge: 0 10px 30px rgba(92, 74, 61, .10);
  --icerik: 64rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.7;
}
h1, h2, h3 { font-family: var(--serif); color: var(--kahve); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 700; }
h2 { font-size: 1.55rem; font-weight: 700; margin-top: 1.6em; }
h3 { font-size: 1.2rem; font-weight: 500; margin-top: 1.3em; }
p { margin: 0 0 1.1em; }
a { color: var(--vurgu-koyu); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--kahve); }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 3px; border-radius: 4px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 1.4em; background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--yuvarlak-kucuk); overflow: hidden; }
th, td { padding: .65em .9em; text-align: left; border-bottom: 1px solid var(--kenar); }
th { background: var(--zemin-koyu); color: var(--kahve); font-family: var(--serif); }
tr:last-child td { border-bottom: 0; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.1em; }
li { margin-bottom: .35em; }
strong { color: var(--kahve); }

/* skip link */
#atla { position: absolute; top: -4rem; left: 1rem; background: var(--kahve); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--yuvarlak-kucuk) var(--yuvarlak-kucuk); z-index: 10; }
#atla:focus { top: 0; }

/* üst bölüm */
body > header {
  width: min(100% - 2rem, var(--icerik));
  margin: 1rem auto 0;
  padding: .8rem 1.2rem;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
}
body > header > p { margin: 0; }
body > header > p > a { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--kahve); text-decoration: none; }
body > header > p > a > svg { border-radius: 9px; background: var(--zemin); }
body > header > nav { margin-left: auto; }
body > header > nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
body > header > nav a { display: block; padding: .45rem .85rem; border-radius: 999px; color: var(--kahve); text-decoration: none; font-weight: 700; font-size: .95rem; }
body > header > nav a:hover { background: var(--zemin); }
body > header > nav a[aria-current="page"] { background: var(--vurgu); color: #fff; }
@media (max-width: 40rem) {
  body > header > nav { margin-left: 0; width: 100%; }
  body > header > nav > ul { gap: .15rem; }
  body > header > nav a { padding: .35rem .65rem; font-size: .9rem; }
}

/* ana içerik */
main {
  width: min(100% - 2rem, var(--icerik));
  margin: 1.5rem auto 3rem;
  display: grid;
  gap: 1.5rem;
}
main > nav[aria-label="Konum"] ol { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; font-size: .9rem; color: var(--kahve-acik); }
main > nav[aria-label="Konum"] li + li::before { content: "›"; margin-right: .5rem; }
main > nav[aria-label="Konum"] a { color: var(--kahve-acik); }

main > article, main > aside, main > section {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  box-shadow: var(--golge);
}
main > article > section > :first-child { margin-top: 0; }
main > article > section > :last-child { margin-bottom: 0; }
main > article > footer { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px dashed var(--kenar); color: var(--kahve-acik); }
main > article > footer p { margin: 0; }

/* görseller */
img { max-width: 100%; height: auto; }

/* ana sayfa girişi: metin solda, açılış görseli sağda */
main > article > header { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--kenar); }
main > article > header p { font-size: 1.2rem; color: var(--kahve); max-width: 48ch; }
main > article > header > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--yuvarlak); box-shadow: var(--golge); border: 4px solid var(--zemin-koyu); }
@media (min-width: 48rem) { main > article > header { grid-template-columns: 1.1fr .9fr; } }

/* iç sayfalar: H1 altında tam genişlik görsel bandı */
main > article > h1 + figure { margin: .25rem 0 1.75rem; }
main > article > h1 + figure > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--yuvarlak-kucuk); }
main > article > h1 + figure > figcaption { margin-top: .5rem; font-size: .85rem; color: var(--kahve-acik); font-style: italic; text-align: right; }
a[role="button"], button {
  display: inline-block;
  background: var(--vurgu);
  color: #fff;
  font: 700 1rem var(--sans);
  padding: .8rem 1.5rem;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(16, 185, 129, .3);
  transition: background .15s, transform .15s;
}
a[role="button"]:hover, button:hover { background: var(--vurgu-koyu); color: #fff; transform: translateY(-1px); }

/* keşfet kutuları */
main > aside { display: grid; gap: 1rem; grid-template-columns: 1fr; }
main > aside > h2 { grid-column: 1 / -1; margin: 0; }
main > aside > a { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.3rem; background: var(--zemin); border-radius: var(--yuvarlak-kucuk); text-decoration: none; color: var(--metin); border: 1px solid transparent; }
main > aside > a:hover { border-color: var(--vurgu); background: #fff; }
main > aside > a > strong { font-family: var(--serif); font-size: 1.2rem; }
main > aside > a > span { color: var(--kahve-acik); font-size: .95rem; }
@media (min-width: 40rem) { main > aside { grid-template-columns: 1fr 1fr; } }

/* SSS: checkbox ile aç/kapa */
#sorular { list-style: none; margin: 0 0 1rem; padding: 0; }
#sorular > li { border: 1px solid var(--kenar); border-radius: var(--yuvarlak-kucuk); margin-bottom: .6rem; background: var(--zemin); overflow: hidden; }
#sorular input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
#sorular label { display: block; padding: .9rem 3rem .9rem 1.1rem; font-weight: 700; color: var(--kahve); cursor: pointer; position: relative; }
#sorular label::after { content: "+"; position: absolute; right: 1.1rem; top: .7rem; font-size: 1.5rem; line-height: 1; color: var(--vurgu); transition: transform .2s; }
#sorular input:focus-visible + label { outline: 3px solid var(--vurgu); outline-offset: -3px; }
#sorular input:checked + label::after { transform: rotate(45deg); }
#sorular label + div { max-height: 0; overflow: hidden; padding: 0 1.1rem; transition: max-height .3s ease, padding .2s; background: #fff; }
#sorular input:checked ~ div { max-height: 60rem; padding: .8rem 1.1rem 1rem; }
#sorular div > :last-child { margin-bottom: 0; }

/* iletişim formu */
form { display: grid; gap: .3rem; max-width: 36rem; }
form label { font-weight: 700; color: var(--kahve); margin-top: .6rem; }
form input[type="text"], form input[type="email"], form textarea {
  width: 100%;
  font: inherit;
  padding: .7rem .9rem;
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak-kucuk);
  background: #fff;
  color: var(--metin);
}
form input:focus, form textarea:focus { border-color: var(--vurgu); outline: none; box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
form button { justify-self: start; margin-top: 1rem; }
[data-feedback] { padding: .8rem 1rem; border-radius: var(--yuvarlak-kucuk); border: 1px solid; }
[data-feedback="ok"] { background: #ecfdf5; border-color: var(--vurgu); color: #065f46; }
[data-feedback="fail"] { background: #fef2f2; border-color: #f87171; color: #7f1d1d; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
dt { font-weight: 700; color: var(--kahve); }
dd { margin: 0; }

/* alt bölüm */
body > footer {
  width: min(100% - 2rem, var(--icerik));
  margin: 0 auto 2rem;
  padding: 1.6rem clamp(1.2rem, 3vw, 2.2rem);
  background: var(--kahve);
  color: #f5efe6;
  border-radius: var(--yuvarlak);
  display: grid;
  gap: .8rem;
}
body > footer p { margin: 0; max-width: 60ch; }
body > footer nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
body > footer a { color: #d1fae5; }
body > footer a:hover { color: #fff; }
body > footer address { font-style: normal; color: #e8dccb; }
body > footer small { color: #c9b8a5; }

/* ===== blog: yazı listeleri (#yazilar blog dizini, #taze ana sayfa, #ilgili yazı altı) ===== */
#yazilar, #taze, #ilgili { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
#taze { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 1.4rem; }
#ilgili { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
#yazilar > li, #taze > li, #ilgili > li { display: grid; gap: .8rem; background: var(--zemin); border: 1px solid var(--kenar); border-radius: var(--yuvarlak-kucuk); padding: 1rem 1.2rem; }
#yazilar > li:has(> a > img) { grid-template-columns: 12rem minmax(0, 1fr); align-items: start; }
#yazilar > li > a > img, #taze > li > a > img, #ilgili > li > a > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--yuvarlak-kucuk); border: 3px solid var(--kart); }
#yazilar time, #taze time, #ilgili time, #okuma-molasi time, main > article > p[data-role="meta"] time { font-size: .85rem; color: var(--kahve-acik); font-variant-numeric: tabular-nums; }
#yazilar h3, #taze h3, #ilgili h3 { margin: .15rem 0 .3rem; font-size: 1.2rem; }
#ilgili h3 { font-size: 1.05rem; }
#yazilar h3 a, #taze h3 a, #ilgili h3 a { color: var(--kahve); text-decoration: none; }
#yazilar h3 a:hover, #taze h3 a:hover, #ilgili h3 a:hover { color: var(--vurgu-koyu); text-decoration: underline; }
#yazilar p, #taze p { margin: 0; color: var(--metin); font-size: .95rem; }
main > article[data-screen="blog"] > h1 small { font-family: var(--sans); font-size: .5em; color: var(--kahve-acik); font-weight: 400; }
main > article[data-screen="blog"] > section { margin-bottom: 1.4rem; }
@media (max-width: 40rem) { #yazilar > li:has(> a > img) { grid-template-columns: 1fr; } }

/* sayfalama ve yazı gezintisi */
main > article > nav[aria-label="Sayfalar"], main > article > nav[aria-label="Yazı gezintisi"] { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px dashed var(--kenar); }
main > article > nav[aria-label="Yazı gezintisi"] { grid-template-columns: 1fr 1fr; }
main > article > nav[aria-label="Sayfalar"] > a:last-child, main > article > nav[aria-label="Yazı gezintisi"] > span:last-child { text-align: right; }
main > article > nav[aria-label="Yazı gezintisi"] > span { display: grid; gap: .15rem; min-width: 0; }
main > article > nav[aria-label="Yazı gezintisi"] small { color: var(--kahve-acik); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
main > article > nav[aria-label="Sayfalar"] > span:nth-child(2) { color: var(--kahve-acik); font-size: .9rem; }
main > article > nav a { font-weight: 700; text-decoration: none; }
main > article > nav a:hover { text-decoration: underline; }
@media (max-width: 40rem) {
  main > article > nav[aria-label="Yazı gezintisi"] { grid-template-columns: 1fr; }
  main > article > nav[aria-label="Yazı gezintisi"] > span:last-child { text-align: left; }
}

/* tek yazı ekranı */
main > article[data-screen="post"] > p[data-role="meta"] { margin: -.4rem 0 1.4rem; color: var(--kahve-acik); font-size: .95rem; }
main > article[data-screen="post"] > p[data-role="meta"] time { font-size: inherit; color: var(--vurgu-koyu); font-weight: 700; }
main > article[data-screen="post"] > figure { margin: 0 0 1.8rem; }
main > article[data-screen="post"] > figure > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--yuvarlak-kucuk); box-shadow: var(--golge); }
main > article[data-screen="post"] > section + section { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--kenar); }
main > article[data-screen="post"] > section + section > h2 { margin-top: 0; }

/* kahve molası okumaları (içerik sayfalarının altı) */
#okuma-molasi { background: var(--zemin-koyu); border-color: transparent; }
#okuma-molasi > h2 { margin-top: 0; font-size: 1.35rem; }
#okuma-molasi > ol { margin: 0 0 1rem; padding-left: 1.3rem; }
#okuma-molasi > ol > li { padding: .35rem 0; border-bottom: 1px solid var(--kenar); }
#okuma-molasi > ol > li:last-child { border-bottom: 0; }
#okuma-molasi > ol a { font-weight: 700; text-decoration: none; }
#okuma-molasi > ol a:hover { text-decoration: underline; }
#okuma-molasi > ol time { margin-left: .5rem; }
#okuma-molasi > p { margin: 0; }