/* =========================================================
   Alt sayfalar: blog, bölge, hizmet, yasal, 404
   site.css jetonlarını kullanır (--alaca, --tank, --fener, --beton, --kopuk ...)
   ========================================================= */

/* ---- Sayfa üst bandı ---- */
.sh { background: var(--alaca); padding-block: clamp(40px, 6vw, 88px); }
.sh .kap > * { max-width: 62rem; }
.sh__ust { margin: 0 0 .6rem; color: var(--fener); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; }
.sh__baslik { font-size: clamp(2.4rem, 5.4vw, 4.75rem); line-height: .98; text-wrap: balance; }
.sh__giris { margin: 1.1rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(248, 251, 251, .86); max-width: 62ch; }

.yol { margin-bottom: 1.25rem; font-size: .92rem; }
.yol ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
.yol li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.yol a { opacity: .85; }
.yol a:hover { opacity: 1; }
.yol [aria-current] { opacity: .65; }

/* ---- Çağrı bandı ---- */
.cta { background: var(--alaca); padding-block: clamp(40px, 6vw, 72px); }
.cta__ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cta__baslik { font-size: clamp(1.9rem, 3.4vw, 3rem); margin-bottom: .5rem; }
.cta__ic p { margin: 0; color: rgba(248, 251, 251, .85); }
.cta__dugmeler, .aksiyon { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.aksiyon { margin-bottom: 1.75rem; }
.bos-aksiyon { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }

/* ---- Ortak yan kutular, etiketler ---- */
.yan-kutu { padding: 1.5rem; border-radius: 24px; background: var(--beton); margin-bottom: 1.25rem; }
.yan-kutu h2 { font-size: 1.6rem; margin-bottom: .75rem; }
.yan-kutu p { font-size: .98rem; }
.yan-kutu--cta { background: var(--alaca); color: var(--kopuk); }
.yan-liste { list-style: none; margin: 0; padding: 0; }
.yan-liste a { display: block; padding: .45rem 0; text-decoration: none; border-bottom: 1px solid var(--cizgi); }
.yan-liste a:hover { color: var(--tank-koyu); }

.etiketler, .hizmet-etiketleri { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.etiketler a, .hizmet-etiketleri a, .hizmet-etiketleri span {
  display: inline-block; padding: .4rem 1rem; border-radius: 999px; background: var(--beton); text-decoration: none; font-size: .98rem; line-height: 1.4;
}
.hizmet-etiketleri span { background: transparent; border: 1px solid var(--cizgi); }
.etiketler a:hover, .hizmet-etiketleri a:hover, .etiketler [aria-current] { background: var(--tank-koyu); color: var(--kopuk); }
.bolum--beton .etiketler a, .bolum--beton .hizmet-etiketleri a { background: var(--kopuk); }

/* ---- Hizmet / bölge sayfa düzeni ---- */
.sy-izgara { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.sy-ana p { max-width: 68ch; }
.sy-ana .bolum__baslik { margin-top: 2rem; font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
@media (min-width: 960px) { .sy-izgara { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .sy-yan { position: sticky; top: calc(var(--header-h) + 24px); } }

.onay-listesi { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.onay-listesi li { display: flex; gap: .75rem; align-items: flex-start; }
.onay-listesi .ikon { color: var(--tank-koyu); margin-top: .1rem; }
.adimlar { counter-reset: adim; list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.adimlar li { counter-increment: adim; position: relative; padding: 1rem 1.25rem 1rem 4rem; border-radius: 20px; background: var(--beton); }
.adimlar li::before { content: counter(adim); position: absolute; left: 1rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--tank-koyu); color: var(--kopuk); font-family: var(--baslik); font-weight: 800; font-size: 1.3rem; }

.hizmet-kartlari { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.hizmet-karti a { display: grid; gap: .35rem; height: 100%; padding: 1.25rem; border-radius: 22px; background: var(--kopuk); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.hizmet-karti a:hover { transform: translateY(-3px); box-shadow: var(--golge); }
.hizmet-karti .ikon { color: var(--tank-koyu); }
.hizmet-karti__ad { font-family: var(--baslik); font-weight: 800; font-size: 1.45rem; line-height: 1.05; }
.hizmet-karti__not { font-size: .95rem; color: var(--asfalt); }

/* ---- Blog ---- */
.bnav { background: var(--kopuk); border-bottom: 1px solid var(--cizgi); }
.bnav__ic { display: flex; gap: .5rem; padding-block: .75rem; overflow-x: auto; scrollbar-width: thin; }
.bnav a { flex: none; padding: .4rem 1rem; border-radius: 999px; text-decoration: none; background: var(--beton); font-size: .98rem; }
.bnav a small { opacity: .6; }
.bnav a[aria-current] { background: var(--alaca); color: var(--kopuk); }

.blog__izgara { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .blog__izgara { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; } .blog__yan { position: sticky; top: calc(var(--header-h) + 24px); } }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.bcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--kopuk); box-shadow: 0 1px 0 var(--cizgi), 0 10px 30px rgba(12, 43, 77, .06); transition: transform .25s var(--ease), box-shadow .25s; }
.bcard:hover { transform: translateY(-3px); box-shadow: var(--golge); }
.bcard__medya { display: block; aspect-ratio: 3 / 2; background: var(--su); overflow: hidden; }
.bcard__medya img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard__noimg { display: grid; place-items: center; height: 100%; color: var(--alaca); opacity: .35; }
.bcard__noimg .ikon { width: 64px; height: 64px; }
.bcard__govde { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.4rem 1.4rem; flex: 1; }
.bcard__kat { align-self: flex-start; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tank-koyu); text-decoration: none; }
.bcard__baslik { font-size: 1.65rem; line-height: 1.05; }
.bcard__baslik a { text-decoration: none; }
.bcard__baslik a:hover { text-decoration: underline; }
.bcard__ozet { margin: 0; color: var(--asfalt); font-size: .98rem; }
.bcard__meta { display: flex; align-items: center; gap: .75rem; margin: auto 0 0; padding-top: .5rem; font-size: .88rem; color: var(--asfalt); }
.bcard__meta a { text-decoration: none; font-weight: 600; }
.bcard--buyuk { margin-bottom: 1.5rem; }
@media (min-width: 760px) { .bcard--buyuk { flex-direction: row; } .bcard--buyuk .bcard__medya { flex: 0 0 55%; aspect-ratio: auto; min-height: 20rem; } .bcard--buyuk .bcard__baslik { font-size: 2.4rem; } .bcard--buyuk .bcard__govde { justify-content: center; padding: 2rem; } }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar--ini { display: inline-grid; place-items: center; background: var(--tank-koyu); color: var(--kopuk); font-weight: 600; font-size: .9rem; }
.sayfalama { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2rem; }
.sayfalama a, .sayfalama span { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .5rem; border-radius: 999px; background: var(--beton); text-decoration: none; font-weight: 600; }
.sayfalama [aria-current] { background: var(--alaca); color: var(--kopuk); }
.blog-bos { color: var(--asfalt); }
.bos-durum { padding: clamp(2rem, 5vw, 4rem); border-radius: 28px; background: var(--beton); text-align: center; }
.bos-durum h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: .75rem; }
.bos-durum p { margin-inline: auto; }

/* ---- Blog yazısı ---- */
.yazi-ust { background: var(--alaca); padding-block: clamp(36px, 5vw, 72px); }
.yazi-ust .kap > * { max-width: 56rem; }
.yazi-ust__kat { display: inline-block; margin-bottom: .75rem; color: var(--fener); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .88rem; text-decoration: none; }
.yazi-ust__baslik { font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1; text-wrap: balance; }
.yazi-ust__ozet { margin: 1rem 0 0; font-size: 1.2rem; color: rgba(248, 251, 251, .86); }
.yazi-ust__meta { display: flex; align-items: center; gap: .85rem; margin-top: 1.5rem; }
.yazi-ust__meta .avatar { width: 48px; height: 48px; }
.yazi-ust__meta span { display: grid; line-height: 1.3; }
.yazi-ust__meta small { opacity: .75; font-size: .88rem; }
.yazi-kapak { margin-top: -1px; padding-top: 2rem; }
.yazi-kapak figure { margin: 0; }
.yazi-kapak img { width: 100%; max-height: 34rem; object-fit: cover; border-radius: 28px; display: block; }
.yazi-izgara { display: grid; gap: 2rem; padding-block: 2.5rem 4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .yazi-izgara { grid-template-columns: 16rem minmax(0, 46rem); justify-content: center; gap: 3.5rem; } .yazi-yan { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.icindekiler { padding: 1.25rem 1.4rem; border-radius: 20px; background: var(--beton); margin-bottom: 1rem; font-size: .96rem; }
.icindekiler p { margin: 0 0 .5rem; font-weight: 600; }
.icindekiler ol, .icindekiler ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.icindekiler ul { list-style: none; padding-left: 0; }
.icindekiler a { text-decoration: none; }
.icindekiler a:hover { text-decoration: underline; }
.paylas { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .92rem; }
.paylas p { margin: 0 .25rem 0 0; font-weight: 600; }
.paylas a { padding: .3rem .8rem; border-radius: 999px; background: var(--beton); text-decoration: none; }

.icerik-metni { font-size: 1.1rem; line-height: 1.75; }
.icerik-metni > * + * { margin-top: 1.1em; }
.icerik-metni h2 { margin-top: 2.2em; font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.icerik-metni h3 { margin-top: 1.8em; font-size: 1.6rem; }
.icerik-metni p, .icerik-metni li { max-width: none; }
.icerik-metni ul, .icerik-metni ol { padding-left: 1.4rem; }
.icerik-metni li + li { margin-top: .4em; }
.icerik-metni img { border-radius: 18px; }
.icerik-metni a { color: var(--tank-koyu); }
.icerik-metni blockquote { margin-left: 0; padding: .5rem 0 .5rem 1.25rem; border-left: 4px solid var(--tank); color: var(--asfalt); }
.icerik-metni table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.icerik-metni th, .icerik-metni td { padding: .6rem .8rem; border-bottom: 1px solid var(--cizgi); text-align: left; }
.yazi-sss { margin-top: 3rem; }
.yazi-sss h2 { margin-bottom: 1rem; font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.yazar-kutusu { display: flex; gap: 1rem; margin-top: 2.5rem; padding: 1.5rem; border-radius: 24px; background: var(--beton); }
.yazar-kutusu .avatar { width: 64px; height: 64px; font-size: 1.2rem; }
.yazar-kutusu p { margin: 0 0 .35rem; }
.yazar-kutusu__ad { font-weight: 600; font-size: 1.15rem; }
.yazar-kutusu__ad a { text-decoration: none; }
.yazar-kutusu__rol { color: var(--asfalt); font-size: .95rem; }
.yazi-gezin { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .yazi-gezin { grid-template-columns: 1fr 1fr; } }
.yazi-gezin a { display: grid; gap: .25rem; padding: 1rem 1.25rem; border-radius: 18px; border: 1px solid var(--cizgi); text-decoration: none; }
.yazi-gezin a[rel="next"] { text-align: right; }
.yazi-gezin a:hover { border-color: var(--tank-koyu); }
.yazi-gezin small { opacity: .65; }

/* ---- Yasal metinler ---- */
.yasal { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .yasal { grid-template-columns: 17rem minmax(0, 46rem); gap: 3.5rem; } .yasal__yan { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.yasal__metin section { margin-top: 2rem; }
.yasal__metin h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: .6rem; }
.yasal__giris { font-size: 1.2rem; }
.yasal__iletisim { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cizgi); font-size: .98rem; }

@media (prefers-reduced-motion: reduce) { .bcard, .hizmet-karti a { transition: none; } .bcard:hover, .hizmet-karti a:hover { transform: none; } }

/* İletişim ve apartman sayfaları: bilgi kartları */
.ilt-kartlar { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.ilt-kart { padding: 1.5rem; border-radius: 24px; background: var(--beton); }
.bolum--beton .ilt-kart { background: var(--kopuk); }
.ilt-kart > .ikon { width: 30px; height: 30px; color: var(--tank-koyu); margin-bottom: .6rem; }
.ilt-kart h3 { margin: 0 0 .4rem; font-size: 1.5rem; }
.ilt-kart p { margin: .35rem 0 0; font-size: .98rem; }
.ilt-kart address { font-style: normal; font-size: .98rem; }
.ilt-kart a { color: var(--tank-koyu); font-weight: 600; }
.ilt-kart--vurgu { background: var(--alaca); color: var(--kopuk); }
.ilt-kart--vurgu > .ikon, .ilt-kart--vurgu a { color: var(--fener); }
.ilt-kart__buyuk { font-family: var(--baslik); font-size: 2.2rem !important; font-weight: 800; line-height: 1; }
.ap-planlar { counter-reset: plan; }
.ap-planlar .ilt-kart { counter-increment: plan; position: relative; padding-top: 3.4rem; }
.ap-planlar .ilt-kart::before { content: counter(plan); position: absolute; left: 1.5rem; top: 1.2rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tank-koyu); color: var(--kopuk); font-family: var(--baslik); font-weight: 800; }
.yan-liste--onay li { padding-left: 1.4rem; position: relative; }
.yan-liste--onay li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--fener); }
.sy-icerik { margin-top: 2rem; }
@media (min-width: 640px) { .ilt-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ilt-kartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ilt-kartlar--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }