/* Süheylünvername — renk ve yazı düzeni
   Kâğıt: soğuk, hafif yeşilimsi bir defter beyazı. Mürekkep: lâcivert. Tek süs: varak altını ince çizgi. */
:root {
  --kagit: #f2f3f0;
  --yuzey: #ffffff;
  --murekkep: #1c2433;
  --lacivert: #22396b;
  --lacivert-acik: #e6ebf4;
  --varak: #a8832e;
  --cizgi: #d5d9de;
  --soluk: #5f6876;
  --tehlike: #a33b2f;
  --sahis: #22396b; --sehir: #2f6b4f; --yapi: #8a5a2b; --kurum: #6b3f7a; --eser: #5c6f86; --kavram: #666f7a; --defter: #3a3f47; --olay: #a33b2f; --isaret: #2f6fb5;
  --govde: "Alegreya", Georgia, serif;
  --arayuz: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --osmanli: "Amiri", "Noto Naskh Arabic", serif;
  --ust-yukseklik: 56px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kagit); color: var(--murekkep); font: 17px/1.55 var(--govde); }
a { color: var(--lacivert); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #14264d; }
:focus-visible { outline: 2px solid var(--varak); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--govde); font-weight: 500; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; font-weight: 700; }
button, input, select, textarea { font: inherit; font-family: var(--arayuz); font-size: 15px; color: inherit; }
[lang="ota"], .ozgun, .dk-ozgun, .ozgun-buyuk { font-family: var(--osmanli); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: -999px; top: 8px; background: var(--yuzey); padding: 6px 10px; z-index: 50; }
.atla:focus { left: 8px; }
.soluk { color: var(--soluk); }
.esnek { flex: 1; }

/* ── Üst bant ── */
.ust { position: sticky; top: 0; z-index: 30; height: var(--ust-yukseklik); display: flex; align-items: center; gap: 18px; padding: 0 20px;
  background: var(--murekkep); color: #e9ecf1; border-bottom: 2px solid var(--varak); }
.marka { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 500 1.3rem/1 var(--govde); letter-spacing: .01em; white-space: nowrap; }
.marka svg { width: 26px; height: 26px; color: var(--varak); }
.ana-menu { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ana-menu a { color: #c9cfd9; text-decoration: none; font: 500 15px var(--arayuz); padding: 6px 9px; border-radius: 4px; white-space: nowrap; }
.ana-menu a:hover { color: #fff; background: rgba(255,255,255,.07); }
.ana-menu a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--varak); border-radius: 0; }
.ust-ara { margin-left: auto; }
.ust-ara input { width: 210px; padding: 6px 10px; border-radius: 4px; border: 1px solid #3a4558; background: #273044; color: #fff; }
.ust-ara input::placeholder { color: #9aa3b2; }
.duzen-dugme { background: transparent; border: 1px solid #4a5568; color: #c9cfd9; border-radius: 4px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.duzen-dugme[aria-pressed="true"] { border-color: var(--varak); color: #f3e3b8; background: rgba(168,131,46,.15); }
.menu-dugme { display: none; }
body:not(.duzenleme) .yalniz-duzen { display: none !important; }

/* ── Genel sayfa ── */
main { min-height: calc(100vh - var(--ust-yukseklik)); outline: none; }
.sayfa { max-width: 1240px; margin: 0 auto; padding: 36px 24px 80px; }
.sayfa.orta { max-width: 860px; }
.sayfa.dar { max-width: 720px; }
.sayfa-bas { margin-bottom: 22px; }
.sayfa-bas p { max-width: 68ch; color: var(--soluk); margin: 0 0 12px; }
.yukleniyor { padding: 40px; color: var(--soluk); font-family: var(--arayuz); }
.araclar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.araclar input[type=search] { flex: 1 1 280px; max-width: 460px; }
input, select, textarea { border: 1px solid var(--cizgi); border-radius: 4px; background: var(--yuzey); padding: 7px 9px; }
textarea { width: 100%; resize: vertical; line-height: 1.45; }
.sonuc-bilgi { font: 14px var(--arayuz); color: var(--soluk); margin: 8px 0 14px; }
.birincil, .ikincil, .tehlike { border-radius: 4px; padding: 7px 14px; cursor: pointer; font-weight: 500; border: 1px solid transparent; }
.birincil { background: var(--lacivert); color: #fff; }
.birincil:hover { background: #18295a; }
.ikincil { background: var(--yuzey); border-color: var(--cizgi); color: var(--murekkep); }
.ikincil:hover { border-color: var(--lacivert); }
.tehlike { background: transparent; color: var(--tehlike); border-color: rgba(163,59,47,.4); }
.rozet { display: inline-block; font: 600 12px/1 var(--arayuz); color: var(--r); border: 1px solid color-mix(in srgb, var(--r) 45%, transparent); background: color-mix(in srgb, var(--r) 8%, white); padding: 3px 6px 2px; border-radius: 3px; vertical-align: 2px; }
code.crm { font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--soluk); margin-left: 8px; }

/* ── Ana sayfa ── */
.ana { display: grid; grid-template-columns: minmax(340px, 520px) 1fr; min-height: calc(100vh - var(--ust-yukseklik)); }
.ana-metin { padding: 56px 40px 48px 48px; border-right: 1px solid var(--cizgi); background: var(--yuzey); }
.ana-metin h1 { font-size: 3.3rem; font-weight: 400; letter-spacing: -.01em; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--varak); }
.ana-metin .giris { font-size: 1.22rem; line-height: 1.5; }
.ana-metin p { max-width: 60ch; }
.sayac { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 28px 0; border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi); }
.sayac > div, .sayac > a > div { padding: 10px 12px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); height: 100%; }
.sayac-bag { text-decoration: none; color: inherit; }
.sayac-bag:hover div { background: var(--lacivert-acik); }
.sayac dt { font: 14px var(--arayuz); color: var(--soluk); }
.sayac dd { margin: 0; font: 400 1.6rem/1.1 var(--govde); }
.ana-ara { display: flex; gap: 8px; max-width: 640px; }
.ana-ara input { flex: 1; padding: 10px 12px; font-size: 16px; }
.yonlendirme { font-family: var(--arayuz); font-size: 15px; color: var(--soluk); }
.duvar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 8px; gap: 0 6px; padding: 10px; align-content: start; overflow: hidden; max-height: calc(100vh - var(--ust-yukseklik)); }
.duvar-oge { position: relative; display: block; grid-row-end: span calc(22 + var(--g) * 2); overflow: hidden; background: #d9dcd6; margin-bottom: 6px; }
.duvar-oge img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); transition: filter .2s; }
.duvar-oge span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font: 500 13px/1.2 var(--arayuz); color: #fff; background: linear-gradient(transparent, rgba(18,24,36,.85)); opacity: 0; transition: opacity .15s; }
.duvar-oge:hover img, .duvar-oge:focus-visible img { filter: none; }
.duvar-oge:hover span, .duvar-oge:focus-visible span { opacity: 1; }

/* ── Defter ızgarası ── */
.cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.cipler button { font-size: 14px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--cizgi); background: var(--yuzey); cursor: pointer; }
.cipler button small { color: var(--soluk); }
.cipler button[aria-pressed="true"] { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.cipler button[aria-pressed="true"] small { color: #c9d2e6; }
.defter-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 26px 20px; }
.defter-kart { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.defter-kart img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; background: #dfe2dc; border: 1px solid var(--cizgi); box-shadow: 3px 3px 0 #e2e4df; }
.defter-kart:hover img { border-color: var(--lacivert); }
.dk-baslik { font: 500 1.05rem/1.25 var(--govde); margin-top: 8px; }
.defter-kart:hover .dk-baslik { text-decoration: underline; }
.dk-ozgun { font-size: 15px; color: var(--soluk); direction: rtl; text-align: left; }
.dk-bilgi { font: 13px var(--arayuz); color: var(--soluk); margin-top: 2px; }

/* ── Tablolar ── */
.tablo-kap { overflow-x: auto; background: var(--yuzey); border: 1px solid var(--cizgi); }
table.liste { border-collapse: collapse; width: 100%; font-family: var(--arayuz); font-size: 15px; }
table.liste th, table.liste td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #e8eaec; vertical-align: top; }
table.liste thead th { font-weight: 600; color: var(--soluk); background: #f7f8f6; position: sticky; top: 0; }
table.liste tbody th { font: 500 16px var(--govde); }
table.liste .sayi { text-align: right; font-variant-numeric: tabular-nums; }
.alt-adlar { display: block; color: var(--soluk); font: 13px var(--arayuz); }
table.liste .ozgun { color: var(--soluk); }

/* ── Kayıt sayfası ── */
.kayit-bas { border-left: 4px solid var(--tur); padding: 4px 0 4px 20px; margin-bottom: 26px; }
.kayit-tur { font-family: var(--arayuz); color: var(--soluk); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.geri { margin-left: auto; font-size: 14px; }
.kayit-bas h1 { font-size: 2.6rem; font-weight: 400; }
.ozgun-buyuk { font-size: 1.6rem; margin: -6px 0 6px; color: #3d4757; text-align: left; }
.tarih { font-family: var(--arayuz); color: var(--soluk); }
.aciklama { max-width: 70ch; font-size: 1.08rem; }
.kimlikler { font: 14px var(--arayuz); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.uri { color: var(--soluk); font: 13px ui-monospace, Menlo, monospace; word-break: break-all; }
.kaynak { font: 14px var(--arayuz); color: var(--soluk); }
.bolum { margin: 34px 0; }
.bolum h2 { padding-bottom: 6px; border-bottom: 1px solid var(--cizgi); }
.kucuk-harita { height: 260px; border: 1px solid var(--cizgi); margin-bottom: 20px; }
.kirpinti { display: block; background-repeat: no-repeat; background-color: #e3e5e0; border: 1px solid var(--cizgi); max-width: 100%; }
.kirpinti-izgara { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.kirpinti-oge { display: flex; flex-direction: column; gap: 4px; max-width: 190px; text-decoration: none; color: inherit; }
.kirpinti-oge span { font: 500 15px/1.25 var(--govde); }
.kirpinti-oge small { font: 13px var(--arayuz); color: var(--soluk); }
.kirpinti-oge:hover .kirpinti { outline: 2px solid var(--lacivert); }
.defter-satirlari { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 24px; }
.defter-satirlari li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid #e6e8e4; }
.defter-satirlari a { display: flex; gap: 10px; align-items: center; text-decoration: none; }
.defter-satirlari img { width: 34px; height: 44px; object-fit: cover; object-position: top; border: 1px solid var(--cizgi); }
.defter-satirlari small { color: var(--soluk); font: 13px var(--arayuz); margin-left: 44px; }
.defter-satirlari.kucuk { grid-template-columns: 1fr; }
.iliski-listesi { list-style: none; padding: 0; margin: 0 0 10px; }
.iliski-listesi li { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #e6e8e4; flex-wrap: wrap; }
.iliski-ad { min-width: 160px; color: var(--soluk); font: 15px var(--arayuz); }
.zaman-cizgisi { list-style: none; padding: 0 0 0 18px; margin: 0; border-left: 2px solid var(--varak); }
.zaman-cizgisi li { position: relative; padding: 6px 0 12px 8px; display: grid; grid-template-columns: 110px 1fr; column-gap: 12px; }
.zaman-cizgisi li::before { content: ""; position: absolute; left: -24px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--yuzey); border: 2px solid var(--varak); }
.zc-tarih { font: 600 14px/1.9 var(--arayuz); color: var(--soluk); font-variant-numeric: tabular-nums; grid-row: span 2; }
.zaman-cizgisi a { font-size: 1.08rem; }
.zaman-cizgisi small { font: 13px var(--arayuz); color: var(--soluk); }
.kanit-listesi { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.duz { padding-left: 18px; }

/* ── Formlar ve pencereler ── */
.pencere { border: 1px solid var(--cizgi); border-radius: 6px; padding: 22px 24px; width: min(460px, calc(100vw - 32px)); background: var(--yuzey); color: var(--murekkep); box-shadow: 0 18px 60px rgba(20,30,50,.25); }
.pencere.genis { width: min(760px, calc(100vw - 32px)); }
.pencere::backdrop { background: rgba(28,36,51,.45); }
.pencere label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font: 14px var(--arayuz); color: var(--soluk); }
.pencere p { font-size: 15px; }
.dugmeler { display: flex; gap: 8px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.hata-metni { color: var(--tehlike); font-family: var(--arayuz); }
.kayit-formu { display: flex; flex-direction: column; gap: 10px; }
.alan { display: flex; flex-direction: column; gap: 4px; font-family: var(--arayuz); }
.alan-ad { font-size: 14px; color: var(--soluk); font-weight: 500; }
.alan small { color: var(--soluk); font-size: 13px; }
.form-satir { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-satir > * { flex: 1 1 140px; }
.secici { position: relative; }
.secici input { width: 100%; }
.oneri { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 4px; box-shadow: 0 8px 24px rgba(20,30,50,.15); max-height: 300px; overflow-y: auto; }
.oneri li { padding: 6px 10px; cursor: pointer; font-family: var(--arayuz); }
.oneri li:hover, .oneri li.etkin { background: var(--lacivert-acik); }
.oneri small { color: var(--soluk); }
.yeni-oneri { color: var(--lacivert); font-weight: 500; }
.secim-listesi { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 4px; }
.secim-listesi li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-family: var(--arayuz); padding: 4px 0; border-bottom: 1px dashed #e3e5e0; }
.secim-listesi select, .secim-listesi input { padding: 3px 5px; font-size: 13px; }
.kaldir { border: none; background: transparent; color: var(--soluk); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; margin-left: auto; }
.kaldir:hover { color: var(--tehlike); }
.secilen { font-family: var(--arayuz); font-size: 14px; display: inline-flex; gap: 4px; align-items: center; }
details.iliski-formu { margin-top: 12px; padding: 12px 14px; background: var(--yuzey); border: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 10px; }
details.iliski-formu summary { cursor: pointer; font-family: var(--arayuz); font-weight: 600; color: var(--lacivert); }
details.iliski-formu[open] > *:not(summary) { margin-top: 10px; }
.bildirim { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60;
  background: var(--murekkep); color: #fff; font-family: var(--arayuz); padding: 10px 16px; border-radius: 4px; transition: .2s; max-width: calc(100vw - 32px); }
.bildirim.gorunur { opacity: 1; transform: translate(-50%, 0); }
.bildirim[data-tur="hata"] { background: var(--tehlike); }

/* ── Arama ── */
.sekmeler { display: flex; gap: 2px; border-bottom: 1px solid var(--cizgi); margin: 18px 0 8px; overflow-x: auto; }
.sekmeler a { font-family: var(--arayuz); padding: 8px 12px; text-decoration: none; color: var(--soluk); border-bottom: 2px solid transparent; white-space: nowrap; }
.sekmeler a[aria-selected="true"] { color: var(--murekkep); border-bottom-color: var(--varak); }
.sekmeler small { color: var(--soluk); }
.sonuclar { list-style: none; padding: 0; margin: 0; max-width: 900px; }
.sonuc { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid #e3e5e0; align-items: flex-start; }
.sonuc-baslik { font-size: 1.12rem; }
.ozet { margin: 4px 0 0; color: #3d4757; font-size: 15px; }
.ozet mark { background: #f1e6c4; color: inherit; padding: 0 1px; }

/* ── Görüntüleyici ── */
body[data-sayfa="defter"] main { min-height: 0; }
.goruntuleyici { display: grid; grid-template-columns: 116px minmax(0, 1fr) 390px; grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - var(--ust-yukseklik)); }
.defter-bas { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey); flex-wrap: wrap; }
.defter-bas h1 { font-size: 1.45rem; margin: 0; }
.defter-bas .geri { margin-left: 0; font-family: var(--arayuz); }
.defter-bas .ozgun { font-size: 1.2rem; color: var(--soluk); }
.defter-no { font: 14px var(--arayuz); color: var(--soluk); margin-left: auto; }
.serit { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; background: #e7e9e4; border-right: 1px solid var(--cizgi); }
.serit-oge { position: relative; display: block; border: 2px solid transparent; }
.serit-oge img { display: block; width: 100%; height: auto; background: #d5d8d2; }
.serit-oge[aria-current] { border-color: var(--varak); }
.serit-no { position: absolute; left: 3px; top: 3px; font: 600 11px/1 var(--arayuz); background: rgba(255,255,255,.85); padding: 2px 4px; border-radius: 2px; }
.serit-isaret { position: absolute; right: 3px; bottom: 3px; font: 700 11px/1 var(--arayuz); background: var(--lacivert); color: #fff; padding: 3px 5px; border-radius: 10px; }
.sahne-kap { position: relative; display: flex; flex-direction: column; min-height: 0; background: #2a2f38; }
.arac-cubugu { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #343a45; color: #e5e8ee; font-family: var(--arayuz); flex-wrap: wrap; }
.arac-cubugu button { background: #454c59; color: #e5e8ee; border: 1px solid #5a6272; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 14px; }
.arac-cubugu button[aria-pressed="true"] { background: var(--varak); border-color: var(--varak); color: #fff; }
.arac-cubugu .onceki, .arac-cubugu .sonraki { font-size: 18px; line-height: 1; padding: 3px 10px; }
.sayfa-gosterge { min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
.ayrac { width: 1px; height: 20px; background: #5a6272; margin: 0 4px; }
.arac-bag { color: #c9d2e6; font-size: 14px; }
.sahne { flex: 1; min-height: 0; }
.sahne.ciziyor { cursor: crosshair; }
.panel { overflow-y: auto; background: var(--yuzey); border-left: 1px solid var(--cizgi); }
.panel-sekmeler { display: flex; border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; background: var(--yuzey); z-index: 2; }
.panel-sekmeler button { flex: 1; border: none; background: transparent; padding: 10px 6px; cursor: pointer; color: var(--soluk); border-bottom: 2px solid transparent; }
.panel-sekmeler button[aria-selected="true"] { color: var(--murekkep); border-bottom-color: var(--varak); }
.panel-govde { padding: 16px 18px 40px; }
.panel-govde h2 { font-size: 1.3rem; }
.panel-govde h3 { margin-top: 18px; }
.isaret-listesi { list-style: none; padding: 0; margin: 0; }
.isaret-listesi button, .bag-dugme { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid #eceee9; padding: 8px 2px; cursor: pointer; }
.bag-dugme { display: inline-flex; gap: 6px; align-items: center; width: auto; border: none; padding: 4px 0; color: var(--lacivert); }
.isaret-listesi button:hover { background: #f5f6f3; }
.isaret-listesi small { grid-column: 2; color: var(--soluk); }
.tur-nokta { display: inline-block; width: 11px; height: 11px; border-radius: 2px; background: var(--r); border: 1px solid rgba(0,0,0,.15); align-self: center; }
fieldset.filtre { border: 1px solid var(--cizgi); border-radius: 4px; margin: 16px 0; padding: 8px 12px; font-family: var(--arayuz); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
fieldset.filtre legend { color: var(--soluk); padding: 0 4px; }
fieldset.filtre label { display: inline-flex; align-items: center; gap: 2px; }
fieldset.filtre input { accent-color: var(--r); }
.transkripsiyon { white-space: pre-wrap; font-size: 1.05rem; background: #f7f7f4; border-left: 3px solid var(--varak); padding: 8px 12px; }
.geri-dugme { background: transparent; border: none; color: var(--lacivert); cursor: pointer; padding: 0; margin-bottom: 10px; font-size: 14px; }
.geri-dugme::before { content: "‹ "; }
.bilgi { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-family: var(--arayuz); font-size: 14px; }
.bilgi dt { color: var(--soluk); }
.bilgi dd { margin: 0; }
.indir-listesi { padding: 0; list-style: none; font-family: var(--arayuz); }
.indir-listesi li { padding: 8px 0; border-bottom: 1px solid #eceee9; }
.indir-listesi small { display: block; color: var(--soluk); }
.baglantilar ul { list-style: none; padding: 0; }
.okuma p { margin: 0 0 10px; }
.a9s-annotationlayer { z-index: 1; }

/* ── Harita ve ağ ── */
.harita-sayfa, .ag-sayfa { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - var(--ust-yukseklik)); }
.ag-sayfa { grid-template-columns: 1fr 340px; }
.harita-yan { padding: 22px 22px 40px; overflow-y: auto; background: var(--yuzey); border-right: 1px solid var(--cizgi); }
.ag-sayfa .harita-yan { border-right: none; border-left: 1px solid var(--cizgi); order: 2; }
.harita-yan p { font-size: 15px; color: var(--soluk); }
.harita-yan input[type=search] { width: 100%; margin-bottom: 8px; }
.tam-harita { height: 100%; }
.ag-kap { position: relative; overflow: hidden; background: #f7f8f5; }
.ag-tuval { display: block; touch-action: none; cursor: grab; }
.ag-komsular { list-style: none; padding: 0; font-family: var(--arayuz); font-size: 14px; }
.ag-komsular li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #eceee9; }
.ag-komsular small { color: var(--soluk); text-align: right; }

/* ── Uzun metin (model sayfası) ── */
.metin { font-size: 1.06rem; }
.metin h1 { font-size: 2.3rem; font-weight: 400; }
.metin h2 { margin-top: 1.8em; }
.metin table { border-collapse: collapse; font: 14px var(--arayuz); width: 100%; margin: 12px 0; background: var(--yuzey); }
.metin th, .metin td { border: 1px solid var(--cizgi); padding: 6px 9px; text-align: left; vertical-align: top; }
.metin code { font-size: 13px; }
.metin pre { background: #1c2433; color: #e5e8ee; padding: 14px; overflow-x: auto; font-size: 13px; }

/* ── Dar ekran ── */
@media (max-width: 1100px) {
  .ana-menu { display: none; position: absolute; top: var(--ust-yukseklik); left: 0; right: 0; background: var(--murekkep); flex-direction: column; padding: 8px 16px 14px; border-bottom: 2px solid var(--varak); }
  .ana-menu.acik { display: flex; }
  .menu-dugme { display: block; background: transparent; color: #e9ecf1; border: 1px solid #4a5568; border-radius: 4px; padding: 4px 10px; }
  .goruntuleyici { grid-template-columns: 92px minmax(0, 1fr) 330px; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .ust { gap: 10px; padding: 0 12px; }
  .ust-ara input { width: 130px; }
  .marka span { display: none; }
  .ana { grid-template-columns: 1fr; }
  .ana-metin { padding: 32px 16px; border-right: none; }
  .ana-metin h1 { font-size: 2.4rem; }
  .sayac { grid-template-columns: repeat(2, 1fr); }
  .duvar { max-height: none; }
  .sayfa { padding: 24px 16px 60px; }
  .kayit-bas h1 { font-size: 2rem; }
  .goruntuleyici { grid-template-columns: 1fr; grid-template-rows: auto auto 62vh auto; height: auto; }
  .serit { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: none; }
  .serit-oge { flex: 0 0 64px; }
  .panel { border-left: none; overflow: visible; }
  .harita-sayfa, .ag-sayfa { grid-template-columns: 1fr; grid-template-rows: 60vh auto; height: auto; }
  .harita-sayfa .harita-yan { order: 2; }
  .zaman-cizgisi li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }