@layer temel, duzen, parca, ekran;

@layer temel {
:root {
--c-kagit: #f6f4ef; --c-kagit-2: #efece4; --c-yuzey: #ffffff;
--c-murekkep: #14171c; --c-murekkep-2: #4d5560; --c-murekkep-3: #6f7885;
--c-cizgi: #ddd8cd; --c-cizgi-2: #c5bdac;
--c-tugla: #b3341f; --c-tugla-koyu: #8f2716; --c-tugla-sis: #f7e7e2;
--c-cam: #0d6b5c; --c-cam-sis: #e2efec;
--c-hardal: #b07914;
--kose: 4px; --kose-2: 2px;
--serit-h: 40px;
--sarmal: 1180px; --olcu: 720px;
--gecis: .18s linear;
--f-baslik: "Space Grotesk", "Trebuchet MS", "Segoe UI", sans-serif;
--f-govde: -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px }
body { margin: 0; background: var(--c-kagit); color: var(--c-murekkep); font-family: var(--f-govde); font-size: 17px; line-height: 1.68; -webkit-font-smoothing: antialiased }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-baslik); font-weight: 700; line-height: 1.18; letter-spacing: -.01em }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.15rem) }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.05rem) }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.42rem) }
h4 { font-size: 1.06rem }
h5 { font-size: .97rem; text-transform: uppercase; letter-spacing: .08em }
h6 { font-size: .88rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-murekkep-3) }
p { margin: 0 0 1.1em }
ul, ol { margin: 0; padding: 0 }
li { list-style: none }
a { color: var(--c-tugla); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color var(--gecis) }
a:hover { color: var(--c-tugla-koyu) }
img, iframe, svg, video { display: block; max-width: 100% }
img { height: auto; background: var(--c-kagit-2) }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer }
table { border-collapse: collapse; width: 100% }
figure { margin: 0 }
address { font-style: normal }
:focus-visible { outline: 3px solid var(--c-cam); outline-offset: 2px }
::selection { background: var(--c-tugla); color: #fff }
.gizli-baglanti { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--c-murekkep); color: #fff; padding: 10px 18px; font-weight: 700; text-decoration: none; transition: top var(--gecis) }
.gizli-baglanti:focus { top: 12px; color: #fff }
.gorunmez { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
}

@layer duzen {
.sarmal { width: 100%; max-width: var(--sarmal); margin-inline: auto; padding-inline: 22px }
.olcu { max-width: var(--olcu); margin-inline: auto }
.olcu > .genis { width: min(var(--sarmal), calc(100vw - 44px)); margin-inline: calc(50% - min(var(--sarmal), 100vw - 44px) / 2) }
.kat { padding-block: 74px }
.kat-ince { padding-block: 42px }
.kat-yuzey { background: var(--c-yuzey) }
.kat-koyu { background: var(--c-murekkep); color: var(--c-kagit) }
.kat-koyu h2, .kat-koyu h3 { color: #fff }
.kat-cizgili { border-block: 1px solid var(--c-cizgi) }
.baslik-blok { max-width: 640px; margin-bottom: 38px }
.baslik-blok.orta { margin-inline: auto; text-align: center }
.baslik-blok p { margin: 12px 0 0; color: var(--c-murekkep-2); font-size: 1.05rem }
.mozaik { display: grid; gap: 26px }
.mozaik-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.mozaik-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.mozaik-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.mozaik-yan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; align-items: center }
.mozaik-agir { grid-template-columns: 1.35fr 1fr; gap: 46px; align-items: center }
.yigin { display: grid; gap: 16px }
.satir { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
}

@layer parca {
.serit { background: var(--c-murekkep); color: #cfd4dc; font-size: .81rem }
.serit .sarmal { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--serit-h) }
.serit a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35) }
.serit a:hover { color: #fff; border-bottom-color: #fff }
.serit i { color: var(--c-hardal); margin-right: 7px }
.serit-sag { display: flex; gap: 22px }

.tepe { background: var(--c-kagit); border-bottom: 2px solid var(--c-murekkep) }
.tepe-ic { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px }
.marka { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-murekkep) }
.marka:hover { color: var(--c-murekkep) }
.marka-ad { font-family: var(--f-baslik); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1 }
.marka-ad b { color: var(--c-tugla); font-weight: 700 }
.marka-alt { display: block; margin-top: 4px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-murekkep-3) }
.gezinti-liste { display: flex; align-items: center; gap: 4px }
.gez-bag { display: block; padding: 10px 14px; font-family: var(--f-baslik); font-size: .95rem; font-weight: 500; color: var(--c-murekkep); text-decoration: none; border-bottom: 3px solid transparent }
.gez-bag:hover { color: var(--c-tugla); border-bottom-color: var(--c-cizgi-2) }
.gez-bag[aria-current] { color: var(--c-tugla); border-bottom-color: var(--c-tugla) }
.tepe-ek { display: flex; align-items: center; gap: 14px }
.tepe-baglanti { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: var(--c-murekkep); color: #fff; font-family: var(--f-baslik); font-size: .88rem; font-weight: 500; text-decoration: none; border-radius: var(--kose-2) }
.tepe-baglanti:hover { background: var(--c-tugla); color: #fff }
.acar { display: none; align-items: center; gap: 9px; padding: 10px 14px; border: 2px solid var(--c-murekkep); border-radius: var(--kose-2); font-family: var(--f-baslik); font-size: .86rem; font-weight: 500 }
.perde { display: none }

.sekme-serit { background: var(--c-kagit-2); border-bottom: 1px solid var(--c-cizgi) }
.sekme-serit .sarmal { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: thin }
.sekme { flex: 0 0 auto; padding: 8px 15px; border: 1px solid var(--c-cizgi-2); border-radius: 100px; background: var(--c-yuzey); color: var(--c-murekkep-2); font-size: .87rem; text-decoration: none; white-space: nowrap }
.sekme:hover { border-color: var(--c-murekkep); color: var(--c-murekkep) }
.sekme[aria-current] { background: var(--c-murekkep); border-color: var(--c-murekkep); color: #fff }

.iz { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; font-size: .84rem; color: var(--c-murekkep-3) }
.iz li { display: flex; gap: 6px; align-items: center }
.iz li + li::before { content: "/"; color: var(--c-cizgi-2) }
.iz a { color: var(--c-murekkep-2); text-decoration: none }
.iz a:hover { color: var(--c-tugla); text-decoration: underline }
.iz [aria-current] { color: var(--c-murekkep) }

.sayfa-ust { padding-block: 44px 40px; background: var(--c-yuzey); border-bottom: 1px solid var(--c-cizgi) }
.sayfa-ust h1 { max-width: 900px }
.sayfa-ust .giris-metni { max-width: 720px; margin: 18px 0 0; color: var(--c-murekkep-2); font-size: 1.1rem }
.ust-etiket { display: inline-block; margin-bottom: 14px; padding: 5px 12px; background: var(--c-tugla-sis); color: var(--c-tugla-koyu); font-family: var(--f-baslik); font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase }
.ust-etiket.cam { background: var(--c-cam-sis); color: var(--c-cam) }

.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 24px; font-family: var(--f-baslik); font-size: .95rem; font-weight: 500; text-decoration: none; border-radius: var(--kose-2); border: 2px solid transparent; transition: background var(--gecis), color var(--gecis), border-color var(--gecis) }
.dugme-dolu { background: var(--c-tugla); color: #fff }
.dugme-dolu:hover { background: var(--c-tugla-koyu); color: #fff }
.dugme-cizgi { border-color: var(--c-murekkep); color: var(--c-murekkep) }
.dugme-cizgi:hover { background: var(--c-murekkep); color: #fff }
.dugme-cam { background: var(--c-cam); color: #fff }
.dugme-cam:hover { background: #0a5449; color: #fff }
.dugme-yalin { padding-inline: 0; color: var(--c-tugla); text-decoration: underline }
.dugme-kume { display: flex; flex-wrap: wrap; gap: 14px }

.kutu { background: var(--c-yuzey); border: 1px solid var(--c-cizgi); padding: 26px; border-radius: var(--kose) }
.kutu h3 { margin-bottom: 10px }
.kutu p:last-child { margin-bottom: 0 }
.kutu p { color: var(--c-murekkep-2); font-size: .97rem }
.kutu-numarali { position: relative; padding-top: 30px }
.kutu-numarali::before { content: attr(data-no); position: absolute; top: -14px; left: 24px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--c-murekkep); color: #fff; font-family: var(--f-baslik); font-weight: 700; font-size: .95rem }
.simge { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; background: var(--c-tugla-sis); color: var(--c-tugla); font-size: 1.15rem; border-radius: var(--kose-2) }
.simge.cam { background: var(--c-cam-sis); color: var(--c-cam) }
.simge.gri { background: var(--c-kagit-2); color: var(--c-murekkep) }

.not { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 22px 24px; background: var(--c-kagit-2); border-left: 5px solid var(--c-tugla); border-radius: 0 var(--kose) var(--kose) 0 }
.not.cam { border-left-color: var(--c-cam) }
.not.hardal { border-left-color: var(--c-hardal) }
.not i { font-size: 1.35rem; color: var(--c-tugla); margin-top: 3px }
.not.cam i { color: var(--c-cam) }
.not.hardal i { color: var(--c-hardal) }
.not h4 { margin-bottom: 6px }
.not p { margin: 0; color: var(--c-murekkep-2); font-size: .97rem }
.not p + p { margin-top: 9px }

.ozet { padding: 26px 28px; background: var(--c-murekkep); color: #d5dae2; border-radius: var(--kose) }
.ozet h2 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 14px }
.ozet ol { display: grid; gap: 10px; counter-reset: oz }
.ozet li { counter-increment: oz; position: relative; padding-left: 30px; font-size: .97rem }
.ozet li::before { content: counter(oz); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; display: grid; place-items: center; background: var(--c-hardal); color: #14171c; font-family: var(--f-baslik); font-size: .74rem; font-weight: 700 }

.dizelge { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; border-top: 1px solid var(--c-cizgi) }
.dizelge dt { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--c-cizgi); font-family: var(--f-baslik); font-weight: 500; font-size: .93rem }
.dizelge dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--c-cizgi); color: var(--c-murekkep-2); font-size: .96rem }

.veri-cerceve { overflow-x: auto; border: 1px solid var(--c-cizgi); background: var(--c-yuzey); border-radius: var(--kose) }
.veri { min-width: 600px; font-size: .93rem }
.veri caption { padding: 15px 20px; text-align: left; font-size: .84rem; color: var(--c-murekkep-3); border-bottom: 1px solid var(--c-cizgi) }
.veri th, .veri td { padding: 13px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-cizgi) }
.veri thead th { background: var(--c-murekkep); color: #fff; font-family: var(--f-baslik); font-size: .82rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; border-bottom: 0 }
.veri tbody th { font-family: var(--f-baslik); font-weight: 500; color: var(--c-murekkep); border-left: 3px solid var(--c-tugla) }
.veri td { color: var(--c-murekkep-2) }
.veri tbody tr:last-child th, .veri tbody tr:last-child td { border-bottom: 0 }

.numarali { counter-reset: nm; display: grid; gap: 18px }
.numarali li { counter-increment: nm; display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start }
.numarali li::before { content: counter(nm, decimal-leading-zero); font-family: var(--f-baslik); font-size: 1.15rem; font-weight: 700; color: var(--c-tugla); line-height: 1.3 }
.numarali strong { display: block; font-family: var(--f-baslik); font-size: 1.04rem }
.numarali p { margin: 4px 0 0; color: var(--c-murekkep-2); font-size: .97rem }

.imli { display: grid; gap: 11px }
.imli li { position: relative; padding-left: 24px; color: var(--c-murekkep-2); font-size: .98rem }
.imli li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--c-tugla) }
.imli strong { color: var(--c-murekkep) }

.rakam-serit { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--c-cizgi); background: var(--c-yuzey); border-radius: var(--kose); overflow: hidden }
.rakam { padding: 26px 20px; border-right: 1px solid var(--c-cizgi) }
.rakam:last-child { border-right: 0 }
.rakam b { display: block; font-family: var(--f-baslik); font-size: 2.1rem; line-height: 1; color: var(--c-tugla) }
.rakam span { display: block; margin-top: 8px; font-size: .89rem; color: var(--c-murekkep-2) }

.oyun-satir { display: grid; grid-template-columns: 190px 1fr; gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--c-cizgi) }
.oyun-satir:first-of-type { border-top: 1px solid var(--c-cizgi) }
.poster { aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-kagit-2); border: 1px solid var(--c-cizgi); border-radius: var(--kose) }
.poster img { width: 100%; height: 100%; object-fit: cover }
.oyun-govde h3 { margin-bottom: 5px }
.oyun-govde h3 a { color: var(--c-murekkep); text-decoration: none }
.oyun-govde h3 a:hover { color: var(--c-tugla) }
.oyun-tur { display: block; margin-bottom: 12px; font-family: var(--f-baslik); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-cam) }
.oyun-govde p { color: var(--c-murekkep-2); font-size: .98rem }
.kunye-satir { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px }
.kunye-satir span { padding: 5px 12px; background: var(--c-kagit-2); font-size: .82rem; color: var(--c-murekkep-2); border-radius: var(--kose-2) }
.kunye-satir b { font-weight: 600; color: var(--c-murekkep) }

.sss { border-top: 1px solid var(--c-cizgi) }
.sss details { border-bottom: 1px solid var(--c-cizgi) }
.sss summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 4px; font-family: var(--f-baslik); font-size: 1.03rem; font-weight: 500; cursor: pointer; list-style: none }
.sss summary::-webkit-details-marker { display: none }
.sss summary::after { content: "\002B"; font-size: 1.3rem; color: var(--c-tugla); line-height: 1 }
.sss details[open] summary::after { content: "\2212" }
.sss details[open] summary { color: var(--c-tugla) }
.sss .cevap { padding: 0 4px 22px; color: var(--c-murekkep-2); font-size: .98rem }
.sss .cevap p:last-child { margin-bottom: 0 }

.kart-yazi { display: flex; flex-direction: column; background: var(--c-yuzey); border: 1px solid var(--c-cizgi); border-radius: var(--kose); overflow: hidden }
.kart-yazi .kapak { aspect-ratio: 3 / 2; background: var(--c-kagit-2) }
.kart-yazi .kapak img { width: 100%; height: 100%; object-fit: cover }
.kart-yazi .icerik { display: flex; flex-direction: column; gap: 10px; padding: 22px }
.kart-yazi h3 { font-size: 1.12rem }
.kart-yazi h3 a { color: var(--c-murekkep); text-decoration: none }
.kart-yazi h3 a:hover { color: var(--c-tugla) }
.kart-yazi p { margin: 0; color: var(--c-murekkep-2); font-size: .94rem }
.yazi-kunye { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--c-murekkep-3); letter-spacing: .02em }
.yazi-kunye i { color: var(--c-tugla); margin-right: 5px }

.yazi-govde { font-size: 1.06rem }
.yazi-govde h2 { margin: 46px 0 14px; padding-top: 22px; border-top: 3px solid var(--c-murekkep) }
.yazi-govde h3 { margin: 30px 0 10px; color: var(--c-tugla-koyu) }
.yazi-govde h4 { margin: 24px 0 8px }
.yazi-govde p { color: #23282f }
.yazi-govde > ul { display: grid; gap: 10px; margin: 0 0 24px }
.yazi-govde > ul li { position: relative; padding-left: 26px; color: #23282f }
.yazi-govde > ul li::before { content: "\25AA"; position: absolute; left: 4px; top: -1px; color: var(--c-tugla) }
.yazi-govde > ol { display: grid; gap: 12px; margin: 0 0 24px; counter-reset: yg }
.yazi-govde > ol li { counter-increment: yg; position: relative; padding-left: 38px; color: #23282f }
.yazi-govde > ol li::before { content: counter(yg) "."; position: absolute; left: 0; top: 0; font-family: var(--f-baslik); font-weight: 700; color: var(--c-tugla) }
.yazi-govde blockquote { margin: 0 0 26px; padding: 4px 0 4px 26px; border-left: 4px solid var(--c-hardal); font-size: 1.12rem; color: var(--c-murekkep) }
.yazi-govde .veri-cerceve, .yazi-govde .not, .yazi-govde .ozet { margin-bottom: 28px }
.yazi-govde figure { margin: 0 0 28px }
.yazi-govde figure img { width: 100%; border: 1px solid var(--c-cizgi); border-radius: var(--kose) }
.yazi-govde figcaption { margin-top: 9px; font-size: .86rem; color: var(--c-murekkep-3) }

.kare-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.kare { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--c-cizgi); background: var(--c-kagit-2); border-radius: var(--kose) }
.kare img { width: 100%; height: 100%; object-fit: cover }
.kare figcaption { position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; background: linear-gradient(to top, rgba(20,23,28,.92), transparent); color: #fff; font-size: .85rem }
.kare figcaption b { display: block; font-family: var(--f-baslik) }

.eylem { display: grid; grid-template-columns: 1.4fr 1fr; gap: 34px; align-items: center; padding: 44px; background: var(--c-murekkep); color: #d5dae2; border-radius: var(--kose) }
.eylem h2 { color: #fff; margin-bottom: 12px }
.eylem p { margin: 0; color: #b9c0ca }
.eylem .dugme-kume { justify-content: flex-end }
.eylem .dugme-cizgi { border-color: #6b7480; color: #fff }
.eylem .dugme-cizgi:hover { background: #fff; color: var(--c-murekkep) }

.harita-cerceve { aspect-ratio: 16 / 9; border: 1px solid var(--c-cizgi); border-radius: var(--kose); overflow: hidden; background: var(--c-kagit-2) }
.harita-cerceve iframe { width: 100%; height: 100%; border: 0 }

.temas { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 24px; background: var(--c-yuzey); border: 1px solid var(--c-cizgi); border-radius: var(--kose) }
.temas i { display: grid; place-items: center; width: 46px; height: 46px; background: var(--c-kagit-2); color: var(--c-tugla); font-size: 1.1rem }
.temas h3 { font-size: 1rem; margin-bottom: 5px }
.temas p, .temas address { margin: 0; color: var(--c-murekkep-2); font-size: .95rem }
.temas small { display: block; margin-top: 6px; color: var(--c-murekkep-3); font-size: .84rem }

.hata { padding-block: 96px; text-align: center }
.hata .kod { display: block; font-family: var(--f-baslik); font-size: clamp(4.5rem, 2rem + 14vw, 9rem); font-weight: 700; line-height: .9; color: var(--c-tugla) }

.harita-liste { display: grid; gap: 34px }
.harita-liste section h2 { padding-bottom: 10px; border-bottom: 2px solid var(--c-murekkep); font-size: 1.2rem; margin-bottom: 16px }
.harita-liste ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px }
.harita-liste a { color: var(--c-murekkep-2); text-decoration: none; font-size: .95rem }
.harita-liste a:hover { color: var(--c-tugla); text-decoration: underline }

.dip { margin-top: 60px; background: var(--c-murekkep); color: #aeb6c1 }
.dip-cagri { padding-block: 40px; border-bottom: 1px solid #2b3038; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px }
.dip-cagri h2 { font-size: 1.4rem; color: #fff }
.dip-cagri p { margin: 6px 0 0; font-size: .95rem; max-width: 520px }
.dip-orta { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: 44px; padding-block: 46px }
.dip-orta h3 { font-size: .88rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 16px }
.dip-orta p { font-size: .93rem }
.dip-marka .marka-ad { color: #fff }
.dip-marka .marka-alt { color: #7c8593 }
.dip-liste { display: grid; gap: 9px }
.dip-liste a { color: #aeb6c1; font-size: .93rem; text-decoration: none }
.dip-liste a:hover { color: #fff; text-decoration: underline }
.dip-temas { display: grid; gap: 12px; font-size: .93rem }
.dip-temas li { display: grid; grid-template-columns: 20px 1fr; gap: 10px }
.dip-temas i { color: var(--c-hardal); margin-top: 4px }
.dip-temas a { color: #fff; text-decoration: none; border-bottom: 1px solid #454c56 }
.dip-temas a:hover { border-bottom-color: #fff }
.sosyal-kume { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.sosyal-oge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid #363c45; font-size: .82rem; color: #aeb6c1; border-radius: 100px }
.sosyal-oge:hover { border-color: var(--c-hardal); color: #fff }
.dip-alt { border-top: 1px solid #2b3038; padding-block: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: .85rem; color: #808995 }
.dip-chip { display: flex; flex-wrap: wrap; gap: 8px }
.dip-chip a { padding: 5px 12px; border: 1px solid #363c45; color: #aeb6c1; text-decoration: none; font-size: .82rem; border-radius: 100px }
.dip-chip a:hover { border-color: #aeb6c1; color: #fff }
.yas-imi { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid #454c56; font-size: .8rem; color: #cfd4dc; margin-top: 18px }
.yas-imi b { color: var(--c-hardal) }
}

@layer ekran {
@media (max-width: 1152px) {
.mozaik-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.rakam-serit { grid-template-columns: repeat(2, 1fr) }
.rakam:nth-child(2) { border-right: 0 }
.rakam:nth-child(-n+2) { border-bottom: 1px solid var(--c-cizgi) }
.kare-izgara { grid-template-columns: repeat(3, 1fr) }
.dip-orta { grid-template-columns: 1fr 1fr; gap: 34px }
.harita-liste ul { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 900px) {
.acar { display: inline-flex }
.tepe-baglanti { display: none }
.gezinti { position: fixed; inset: 0; z-index: 80; background: var(--c-kagit); padding: 96px 22px 40px; overflow-y: auto; transform: translateY(-100%); visibility: hidden; transition: transform .26s ease-out, visibility .26s }
body.gezinti-acik .gezinti { transform: translateY(0); visibility: visible }
body.gezinti-acik { overflow: hidden }
.gezinti-liste { flex-direction: column; align-items: stretch; gap: 0 }
.gez-bag { padding: 16px 4px; font-size: 1.15rem; border-bottom: 1px solid var(--c-cizgi) }
.gez-bag:hover, .gez-bag[aria-current] { border-bottom-color: var(--c-tugla) }
.gezinti-ek { display: block; margin-top: 26px }
.gezinti-ek .dugme { width: 100% }
.mozaik-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.mozaik-yan, .mozaik-agir { grid-template-columns: 1fr; gap: 30px }
.eylem { grid-template-columns: 1fr; padding: 32px }
.eylem .dugme-kume { justify-content: flex-start }
.olcu > .genis { width: auto; margin-inline: 0 }
}
@media (min-width: 901px) { .gezinti-ek { display: none } }
@media (max-width: 620px) {
body { font-size: 16px }
.kat { padding-block: 50px }
.kat-ince { padding-block: 32px }
.baslik-blok { margin-bottom: 28px }
.mozaik { gap: 18px }
.mozaik-2, .mozaik-3, .mozaik-4 { grid-template-columns: 1fr }
.kare-izgara { grid-template-columns: repeat(2, 1fr); gap: 10px }
.oyun-satir { grid-template-columns: 1fr; gap: 16px }
.poster { max-width: 210px }
.dizelge { grid-template-columns: 1fr; border-top: 0 }
.dizelge dt { padding-bottom: 2px; border-bottom: 0; color: var(--c-murekkep-3) }
.dizelge dd { padding-top: 0 }
.rakam-serit { grid-template-columns: 1fr }
.rakam { border-right: 0; border-bottom: 1px solid var(--c-cizgi) }
.rakam:last-child { border-bottom: 0 }
.dip-orta { grid-template-columns: 1fr; gap: 30px }
.dip-cagri, .dip-alt { flex-direction: column; align-items: flex-start }
.harita-liste ul { grid-template-columns: 1fr }
.dugme { width: 100%; }
.dugme-kume { flex-direction: column; align-items: stretch }
.dugme-yalin { width: auto }
.serit-sag { display: none }
.sayfa-ust { padding-block: 30px 28px }
.eylem { padding: 26px 20px }
.kutu { padding: 20px }
.not { grid-template-columns: 1fr; gap: 10px; padding: 20px }
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: .01ms !important; animation-duration: .01ms !important }
.gezinti { transition: none }
}
@media print {
.serit, .tepe, .sekme-serit, .dip, .eylem { display: none }
body { background: #fff; font-size: 12pt }
.olcu { max-width: none }
}
}
.marka-logo { display: inline-block; line-height: 0 }
.marka-logo img { width: 160px; max-width: 100%; height: auto }
@media (max-width: 600px) { .marka-logo img { width: 130px } }