:root {
  color-scheme: dark;
  --zemin: #0D0B12;
  --zemin-2: #15121C;
  --zemin-3: #1F1B29;
  --cizgi: rgba(243, 238, 230, .13);
  --cizgi-2: rgba(243, 238, 230, .24);
  --metin: #F3EEE6;
  --metin-2: #C4BDB3;
  --metin-3: #958E85;
  --poster: #E0302F;
  --poster-koyu: #B3201F;
  --siyah: #0A0A0A;
  --uyari: #E9A23B;
  --f-piksel: 'Pixelify Sans', ui-monospace, monospace;
  --f-baslik: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-metin: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ust: 56px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--f-baslik);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }

.atla { position: fixed; left: 8px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; }
.atla:focus { top: 8px; }

/* ---- Üst şerit ---------------------------------------------------------- */
.ust {
  position: fixed; inset: 0 0 auto 0; height: var(--ust); z-index: 30;
  display: flex; align-items: center; gap: 28px; padding: 0 16px;
  background: linear-gradient(to bottom, rgba(13, 11, 18, .92), rgba(13, 11, 18, .62) 70%, rgba(13, 11, 18, 0));
  pointer-events: none;
}
.ust > * { pointer-events: auto; }
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marka-kare { width: 14px; height: 14px; background: var(--poster); box-shadow: 4px 4px 0 #fff; }
.marka-ad { font-family: var(--f-piksel); font-weight: 600; font-size: 19px; letter-spacing: .04em; margin-left: 4px; white-space: nowrap; }
.ust-nav { display: flex; gap: 2px; }
.ust-nav a { padding: 6px 12px; text-decoration: none; color: var(--metin-2); font-weight: 500; font-size: 15px; border-radius: 4px; }
.ust-nav a:hover { color: var(--metin); background: rgba(243, 238, 230, .07); }
.ust-nav a[aria-current="page"] { color: var(--metin); box-shadow: inset 0 -2px 0 var(--poster); border-radius: 0; }
.ara-dugme {
  margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 12px;
  background: rgba(31, 27, 41, .85); border: 1px solid var(--cizgi); border-radius: 6px; color: var(--metin-2);
  min-width: 210px;
}
.ara-dugme:hover { border-color: var(--cizgi-2); color: var(--metin); }
.ara-metin { flex: 1; text-align: left; font-size: 14.5px; }
kbd { font-family: var(--f-baslik); font-size: 11.5px; padding: 1px 6px; border: 1px solid var(--cizgi-2); border-radius: 4px; color: var(--metin-3); }

/* ---- Görünümler --------------------------------------------------------- */
#sahne { position: fixed; inset: 0; }
.gorunum { position: absolute; inset: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: grab; }
canvas.suruklen { cursor: grabbing !important; }

.atlas-panel {
  position: absolute; left: 16px; top: 72px; width: 256px; max-height: calc(100% - 88px); z-index: 10;
  display: flex; flex-direction: column;
  background: rgba(21, 18, 28, .88); backdrop-filter: blur(10px); border: 1px solid var(--cizgi); border-radius: 10px;
}
.panel-kapak { display: none; }
.panel-ic { padding: 12px; overflow-y: auto; }
.mercek { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--zemin); border-radius: 7px; }
.mercek button { border: 0; background: transparent; color: var(--metin-2); padding: 6px 0; border-radius: 5px; font-weight: 500; font-size: 14.5px; }
.mercek button[aria-checked="true"] { background: var(--poster); color: #fff; }
.mercek-aciklama { margin: 9px 2px 10px; font-size: 13px; line-height: 1.38; color: var(--metin-3); }
.lejant-grup { margin-top: 11px; }
.lejant-baslik { display: flex; align-items: center; gap: 7px; margin: 0 2px 2px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--metin-2); }
.nokta { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lejant-grup ul, .lejant-durum { list-style: none; margin: 0; padding: 0; }
.lejant-grup button, .lejant-durum button {
  width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 3px 6px 3px 18px;
  text-align: left; border-radius: 4px; font-size: 14px; color: var(--metin);
}
.lejant-durum button { padding: 6px; }
.lejant-grup button:hover, .lejant-durum button:hover { background: rgba(243, 238, 230, .08); }
.lejant-durum button[aria-pressed="true"] { background: rgba(243, 238, 230, .15); }
.lejant-grup button span, .lejant-durum button span { flex: 1; }
.lejant-grup b, .lejant-durum b { font-weight: 400; color: var(--metin-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.yol-anahtar { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cizgi); font-size: 14px; cursor: pointer; color: var(--metin-2); }
.yol-anahtar input { accent-color: var(--poster); width: 15px; height: 15px; }

.atlas-kontrol {
  position: absolute; right: 16px; bottom: 16px; z-index: 10; display: flex; flex-direction: column;
  background: rgba(21, 18, 28, .88); border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.atlas-kontrol button { width: 38px; height: 38px; border: 0; background: transparent; font-size: 20px; line-height: 1; display: grid; place-items: center; color: var(--metin); }
.atlas-kontrol button + button { border-top: 1px solid var(--cizgi); }
.atlas-kontrol button:hover { background: rgba(243, 238, 230, .1); }
.atlas-ipucu {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 5; padding: 6px 13px;
  font-size: 13.5px; color: var(--metin-2); background: rgba(21, 18, 28, .78); border: 1px solid var(--cizgi); border-radius: 99px;
  pointer-events: none; transition: opacity .4s; white-space: nowrap;
}
.atlas-ipucu.gizli { opacity: 0; }
.poster-arac {
  position: absolute; left: 16px; bottom: 16px; z-index: 10; padding: 8px 12px;
  background: rgba(21, 18, 28, .88); border: 1px solid var(--cizgi); border-radius: 8px;
}
.poster-arac .yol-anahtar { margin: 0; padding: 0; border: 0; }

/* ---- Üzerine gelme kartı ------------------------------------------------ */
.kart {
  position: fixed; left: 0; top: 0; z-index: 40; width: 300px; padding: 10px 12px; pointer-events: none;
  background: rgba(21, 18, 28, .97); border: 1px solid var(--cizgi-2); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.kart strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
.kart-rozet { display: block; margin-top: 4px; }
.kart p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.38; color: var(--metin-2); }

.rozet { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--metin); white-space: nowrap; }
.ikon { flex: none; }

/* ---- Terim çekmecesi ---------------------------------------------------- */
.cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 46vw); min-width: 460px; z-index: 25;
  background: var(--zemin-2); border-left: 1px solid var(--cizgi-2);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
}
.cekmece.acik { transform: none; }
.cekmece-ic { height: 100%; overflow-y: auto; padding: 72px 30px 56px; outline: none; }
.cekmece-kapat {
  position: absolute; right: 14px; top: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--cizgi-2);
  background: var(--zemin-3); font-size: 22px; line-height: 1; display: grid; place-items: center;
}
.cekmece-kapat:hover { background: var(--poster); border-color: var(--poster); }
body.cekmece-acik .ust { padding-right: calc(min(600px, 46vw) + 16px); }
body.cekmece-acik .atlas-kontrol { transform: translateX(calc(-1 * min(600px, 46vw))); }
body.cekmece-acik .atlas-ipucu { display: none; }

.kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 13.5px; color: var(--metin-3); }
.kirinti a { color: var(--metin-2); text-decoration: none; }
.kirinti a:hover { text-decoration: underline; }
.kirinti-nokta { width: 9px; height: 9px; border-radius: 50%; }
.terim-ad { font-size: 36px; font-weight: 600; letter-spacing: -.01em; margin: 10px 0 12px; outline: none; }
.terim-etiketler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.terim-etiketler .rozet { padding: 3px 9px; border: 1px solid var(--cizgi-2); border-radius: 99px; }
.etiket { font-size: 12.5px; padding: 3px 9px; border-radius: 99px; background: var(--zemin-3); color: var(--metin-2); }
.etiket.taslak { color: var(--metin-3); border: 1px dashed var(--cizgi-2); background: transparent; }
.etiket.derin { background: rgba(243, 238, 230, .14); color: var(--metin); }
.terim-ozet { font-family: var(--f-metin); font-size: 21px; line-height: 1.38; margin: 16px 0 4px; }
.terim p.durum-acik { margin: 8px 0 0; font-family: var(--f-baslik); font-size: 13.5px; line-height: 1.4; color: var(--metin-3); }
.durum-acik b { font-weight: 600; color: var(--metin-2); }
.bos-not { margin: 18px 0; padding: 12px 14px; border: 1px dashed var(--cizgi-2); border-radius: 8px; color: var(--metin-2); }
.uyari { margin: 16px 0 0; padding: 11px 14px; border-left: 3px solid var(--uyari); background: rgba(233, 162, 59, .1); border-radius: 0 6px 6px 0; }
.uyari strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--uyari); }
.uyari p { margin: 3px 0 0; font-size: 15px; line-height: 1.42; }

.ne-degil { display: grid; gap: 12px; margin-top: 22px; }
.nedir, .degildir { padding: 15px 17px 6px; border-radius: 9px; border: 1px solid var(--cizgi); background: var(--zemin); }
.degildir { background: transparent; border-style: dashed; border-color: var(--cizgi-2); }
.nedir h3, .degildir h3 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.nedir h3 span { color: #5fd7b8; }
.degildir h3 span { color: #f07a93; }
.terim p, .giris-metin p { font-family: var(--f-metin); font-size: 17px; line-height: 1.56; color: #E9E3DA; }
.nedir p, .degildir p { margin: 0 0 11px; }
.ic-bag { color: inherit; text-decoration: underline; text-decoration-color: rgba(243, 238, 230, .4); text-underline-offset: 3px; }
.ic-bag:hover { text-decoration-color: var(--poster); color: #fff; }

.t-bolum { margin-top: 26px; }
.t-bolum h3 { font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--metin-3); margin-bottom: 8px; }
.t-bolum p { margin: 0 0 10px; }
.iddia-liste { margin: 0 0 12px; padding: 0 0 0 16px; color: var(--metin-2); font-size: 15px; }
.iddia-liste li { margin-bottom: 4px; }
.soluk { color: var(--metin-3) !important; font-family: var(--f-baslik) !important; font-size: 14px !important; line-height: 1.45 !important; }

.poster-kirpinti {
  position: relative; display: block; height: 300px; overflow: hidden; border-radius: 8px; border: 1px solid var(--cizgi-2);
  background-color: var(--poster); background-repeat: no-repeat; text-decoration: none;
}
.kirpinti-etiket { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; background: rgba(13, 11, 18, .9); border-radius: 5px; font-size: 13px; }
.poster-kirpinti:hover .kirpinti-etiket { background: #fff; color: #000; }
.kirpinti-not { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #000, inset 0 0 0 1.5px #000; }

.cipler { display: flex; flex-wrap: wrap; gap: 5px; }
.cip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; text-decoration: none;
  font-size: 14px; background: var(--zemin-3); border: 1px solid transparent; color: var(--metin);
}
.cip:hover { border-color: var(--cizgi-2); background: #2A2536; }
.cip.daha { color: var(--metin-3); }
.kaynak-liste { margin: 0; padding: 0 0 0 20px; font-size: 15px; }
.kaynak-liste li { margin-bottom: 7px; }
.kaynak-liste a { text-underline-offset: 3px; }
.kaynak-alan { display: block; font-size: 12.5px; color: var(--metin-3); }
.not-bolum textarea {
  width: 100%; resize: vertical; padding: 10px 12px; border-radius: 7px; background: var(--zemin); border: 1px solid var(--cizgi-2);
  font-family: var(--f-metin); font-size: 16px;
}
.not-durum { margin-top: 5px !important; font-size: 12.5px !important; }

/* ---- Sayfalar ----------------------------------------------------------- */
.sayfa { overflow-y: auto; outline: none; background: var(--zemin); }
.sayfa-ic { max-width: 1120px; margin: 0 auto; padding: 44px 24px 80px; }
.sayfa-ic.genis { max-width: 1240px; padding-top: 84px; }
.sayfa-ic.dar { max-width: 760px; padding-top: 84px; }
.kahraman { background: var(--poster); color: var(--siyah); padding: 92px 24px 34px; position: relative; overflow: hidden; }
.kahraman-ic { max-width: 1072px; margin: 0 auto; position: relative; }
.kahraman-ust { margin: 0 0 8px; font-weight: 700; font-style: italic; font-size: 18px; letter-spacing: .01em; }
.piksel { font-family: var(--f-piksel); font-weight: 600; font-size: clamp(38px, 7.6vw, 92px); line-height: 1; color: #fff; letter-spacing: .01em; overflow-wrap: anywhere; }
.piksel-orta { font-family: var(--f-piksel); font-weight: 600; letter-spacing: .02em; }
.kahraman-alt { margin: 14px 0 0; max-width: 660px; font-size: 19px; line-height: 1.38; font-weight: 500; }
.kahraman-eylem { margin-top: 18px; }
.dugme {
  display: inline-block; padding: 9px 16px; border-radius: 6px; font-weight: 500; font-size: 15px; text-decoration: none; text-align: center;
  background: var(--zemin-3); border: 1px solid var(--cizgi-2); color: var(--metin);
}
.dugme:hover { background: #2A2536; }
.dugme.birincil { background: var(--poster); border-color: var(--poster); color: #fff; }
.dugme.birincil:hover { background: var(--poster-koyu); }
.dugme.koyu { background: var(--siyah); border-color: var(--siyah); color: #fff; }
.dugme.koyu:hover { background: #2a2a2a; }
.dugme.kucuk { padding: 5px 11px; font-size: 13.5px; margin-top: 12px; }
.giris-metin { max-width: 760px; margin-bottom: 30px; }
.giris-metin p { margin: 0 0 13px; font-size: 19px; }
.sayfa-baslik { margin-bottom: 22px; }
.sayfa-baslik h1 { font-size: clamp(38px, 6vw, 62px); }
.sayfa-baslik p { margin: 5px 0 0; color: var(--metin-2); font-size: 17px; }
.sayfa h2 { font-size: 25px; font-weight: 600; }

.dagilim { margin: 0 0 34px; max-width: 760px; }
.dagilim figcaption { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--metin-3); font-weight: 600; margin-bottom: 8px; }
.dilimler { display: flex; gap: 2px; height: 12px; }
.dilim { min-width: 4px; }
.dilim:first-child { border-radius: 4px 0 0 4px; }
.dilim:last-child { border-radius: 0 4px 4px 0; }
.dagilim-lejant { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--metin-2); }
.dagilim-lejant li { display: flex; align-items: center; gap: 6px; }
.dagilim-lejant b { color: var(--metin); font-weight: 600; font-variant-numeric: tabular-nums; }

.grup { margin-top: 34px; }
.grup-acik { margin: 5px 0 0; max-width: 720px; color: var(--metin-2); font-size: 16px; }
.kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; margin-top: 14px; }
.terim-kart { display: block; padding: 11px 13px; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 8px; text-decoration: none; }
.terim-kart:hover { border-color: var(--cizgi-2); background: var(--zemin-3); }
.tk-ust { display: flex; align-items: flex-start; gap: 7px; }
.tk-ust .ikon { margin-top: 5px; }
.tk-ad { flex: 1; font-size: 16.5px; font-weight: 600; line-height: 1.25; }
.tk-derin { font-size: 9px; color: var(--metin-3); margin-top: 5px; }
.tk-ozet { display: block; margin-top: 4px; font-size: 14px; line-height: 1.38; color: var(--metin-3); }
.sayfa-gecis { display: flex; justify-content: space-between; gap: 12px; margin-top: 52px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.sayfa-gecis a { text-decoration: none; font-size: 18px; font-weight: 500; }
.sayfa-gecis a:hover { color: #fff; text-decoration: underline; }
.sayfa-gecis a span { display: block; font-size: 12.5px; color: var(--metin-3); letter-spacing: .06em; text-transform: uppercase; font-weight: 400; }
.sayfa-gecis .sag { text-align: right; }

/* Dizin */
.filtreler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtreler input[type="search"], .filtreler select { padding: 8px 11px; background: var(--zemin-2); border: 1px solid var(--cizgi-2); border-radius: 6px; font-size: 15px; }
.filtreler input[type="search"] { flex: 1 1 230px; }
.filtreler select { flex: 0 1 220px; }
.onay { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--metin-2); cursor: pointer; padding: 0 4px; }
.onay input { accent-color: var(--poster); }
.durum-filtre { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 18px; }
.durum-dugme { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 14px; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 99px; color: var(--metin-2); }
.durum-dugme b { font-weight: 400; color: var(--metin-3); font-size: 12.5px; }
.durum-dugme:hover { border-color: var(--cizgi-2); }
.durum-dugme[aria-pressed="true"] { background: var(--metin); color: var(--siyah); border-color: var(--metin); }
.durum-dugme[aria-pressed="true"] b { color: #444; }
.dizin-tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.dizin-tablo th[scope="col"] { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--cizgi-2); position: sticky; top: 0; background: var(--zemin); }
.dizin-tablo td, .dizin-tablo tbody th { padding: 8px 10px; border-bottom: 1px solid var(--cizgi); vertical-align: top; text-align: left; font-weight: 400; }
.dizin-tablo tbody th a { font-weight: 600; font-size: 16px; text-decoration: none; }
.dizin-tablo tbody th a:hover { text-decoration: underline; }
.dizin-tablo tbody tr:hover { background: var(--zemin-2); }
.dt-ozet { display: block; color: var(--metin-3); font-size: 13.5px; line-height: 1.35; max-width: 620px; }
.soluk-bag { color: var(--metin-2); text-decoration: none; }
.soluk-bag:hover { text-decoration: underline; }
.k-tur, .k-kaynak { color: var(--metin-2); white-space: nowrap; }
.k-kaynak { text-align: right; font-variant-numeric: tabular-nums; }
th.k-kaynak { text-align: right !important; }
.bos-sonuc { padding: 34px 0; text-align: center; color: var(--metin-2); }

/* Anlatı */
.anlati-liste { list-style: none; margin: 0; padding: 0; position: relative; }
.anlati-bolum { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding-bottom: 46px; position: relative; }
.anlati-bolum::before { content: ''; position: absolute; left: 26px; top: 56px; bottom: 4px; width: 2px; background: var(--cizgi); }
.anlati-bolum:last-child::before { display: none; }
.anlati-no { font-size: 40px; color: var(--metin); line-height: 1; box-shadow: inset 0 -5px 0 var(--renk); padding-bottom: 8px; align-self: start; width: 54px; }
.anlati-katman { margin: 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3); font-weight: 600; }
.anlati-govde h2 { font-size: 31px; margin: 2px 0 14px; }
.anlati-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.anlati-iki h3 { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3); font-weight: 600; margin-bottom: 6px; }
.anlati-iki p { margin: 0; font-family: var(--f-metin); font-size: 17.5px; line-height: 1.5; }
.anlati-not { padding: 13px 15px; border-left: 3px solid var(--renk); background: var(--zemin-2); border-radius: 0 7px 7px 0; }

/* Hakkında */
.metin-blok p, .metin-blok li { font-family: var(--f-metin); font-size: 18px; line-height: 1.55; }
.metin-blok li { margin-bottom: 8px; }
.metin-blok ul { padding-left: 20px; }
.sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 24px 0 34px; }
.sayilar div { padding: 13px 15px; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 8px; }
.sayilar dt { font-size: 13.5px; color: var(--metin-3); }
.sayilar dd { margin: 0; font-family: var(--f-piksel); font-weight: 600; font-size: 38px; line-height: 1.1; }
.dar h2 { margin: 34px 0 7px; }
.durum-sozluk { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.durum-sozluk li { display: flex; gap: 11px; align-items: flex-start; }
.durum-sozluk .ikon { margin-top: 3px; }
.durum-sozluk strong { display: block; font-weight: 600; }
.durum-sozluk span { color: var(--metin-2); font-size: 15px; line-height: 1.4; display: block; }
.uretim { margin-top: 28px; }

/* ---- Arama -------------------------------------------------------------- */
.arama { position: fixed; inset: 0; z-index: 60; background: rgba(7, 6, 10, .72); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 11vh 14px 14px; }
.arama-kutu { width: min(660px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--zemin-2); border: 1px solid var(--cizgi-2); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
#arama-girdi { width: 100%; padding: 16px 18px; font-size: 19px; background: transparent; border: 0; border-bottom: 1px solid var(--cizgi); outline: none; }
#arama-sonuc { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
#arama-sonuc li[data-i] { display: grid; grid-template-columns: auto 1fr auto; gap: 1px 9px; align-items: center; padding: 8px 11px; border-radius: 7px; cursor: pointer; }
#arama-sonuc li[aria-selected="true"], #arama-sonuc li[data-i]:hover { background: var(--zemin-3); }
.s-ad { font-weight: 600; font-size: 16.5px; }
.s-diyar { font-size: 12.5px; color: var(--metin-3); white-space: nowrap; }
.s-ozet { grid-column: 2 / 4; font-size: 13.5px; color: var(--metin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-yok { padding: 20px; text-align: center; color: var(--metin-2); }
.arama-alt { margin: 0; padding: 8px 14px; font-size: 12.5px; color: var(--metin-3); border-top: 1px solid var(--cizgi); }

/* ---- Karşılama ---------------------------------------------------------- */
.karsilama { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(7, 6, 10, .55); }
.karsilama-kutu { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: var(--poster); color: var(--siyah); padding: 32px 30px 26px; box-shadow: 10px 10px 0 #fff; }
.karsilama-kutu h1 { font-family: var(--f-piksel); font-weight: 600; font-size: clamp(38px, 9vw, 58px); color: #fff; line-height: 1; }
.karsilama-alt { margin: 7px 0 14px; font-weight: 700; font-style: italic; font-size: 18px; }
.karsilama-kutu p { font-size: 16.5px; line-height: 1.42; font-weight: 500; }
.karsilama-kutu ul { padding: 0; list-style: none; margin: 12px 0 18px; font-size: 16px; line-height: 1.38; font-weight: 500; }
.karsilama-kutu li { padding: 6px 0; border-top: 1px solid rgba(0, 0, 0, .35); }
.karsilama-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.karsilama .dugme { background: transparent; border-color: var(--siyah); color: var(--siyah); font-weight: 600; }
.karsilama .dugme:hover { background: rgba(0, 0, 0, .13); }
.karsilama .dugme.birincil { background: var(--siyah); color: #fff; }
.karsilama .dugme.birincil:hover { background: #2a2a2a; }

/* ---- Dar ekranlar ------------------------------------------------------- */
@media (max-width: 1080px) {
  .ara-dugme { min-width: 0; }
  .ara-dugme kbd { display: none; }
  .cekmece { width: min(600px, 54vw); min-width: 420px; }
  body.cekmece-acik .ust { padding-right: 16px; }
  body.cekmece-acik .ust-nav { display: none; }
  body.cekmece-acik .atlas-kontrol { transform: translateX(calc(-1 * min(600px, 54vw))); }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .ust { gap: 8px; padding: 0 12px; flex-wrap: wrap; height: auto; padding-top: 8px; background: rgba(13, 11, 18, .94); padding-bottom: 6px; }
  .marka-ad { font-size: 17px; }
  .ara-dugme { padding: 6px 9px; order: 2; }
  .ara-metin { display: none; }
  .ust-nav { order: 3; width: 100%; justify-content: space-between; }
  .ust-nav a { padding: 4px 6px; font-size: 14px; }
  .atlas-panel { top: 92px; left: 10px; width: min(250px, calc(100% - 20px)); max-height: calc(100% - 150px); }
  .atlas-panel.kapali { width: auto; }
  .atlas-panel.kapali .panel-ic { display: none; }
  .panel-kapak { display: block; border: 0; background: transparent; padding: 7px 12px; font-size: 14px; font-weight: 500; text-align: left; }
  .atlas-ipucu { display: none; }
  .atlas-kontrol { right: 10px; bottom: 10px; }
  .poster-arac { left: 10px; bottom: 10px; }
  .cekmece { width: 100%; min-width: 0; top: 0; z-index: 35; }
  .cekmece-ic { padding: 58px 16px 46px; }
  body.cekmece-acik .atlas-kontrol { transform: none; }
  .terim-ad { font-size: 30px; }
  .terim-ozet { font-size: 19px; }
  .poster-kirpinti { height: 220px; }
  .sayfa-ic, .sayfa-ic.genis, .sayfa-ic.dar { padding-left: 16px; padding-right: 16px; }
  .sayfa-ic.genis, .sayfa-ic.dar { padding-top: 104px; }
  .kahraman { padding: 112px 16px 26px; }
  .anlati-bolum { grid-template-columns: 1fr; }
  .anlati-bolum::before { display: none; }
  .anlati-iki { grid-template-columns: 1fr; }
  .k-diyar, .k-tur, .k-kaynak { display: none; }
  .dizin-tablo td, .dizin-tablo tbody th { padding: 8px 5px; }
  .kart { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}