/* =====================================================================
   sakaryaharita.com — tasarım "GECE PAFTASI" (2026-10-27)

   🔴 FİKİR: koyu toprak-kahve zeminde canlı bir kadastro paftası. Kahraman fotoğraf DEĞİL vektörel
   ölçüm sahnesi (fotoğraf tavanı 600 px). Kâğıt bölümler parşömen, başlıklar serif (harita etiketi
   geleneği), koordinat/ölçü yazıları eş aralıklı. Kardeş sitelerden farkı: sol ray yok (hidrolik),
   milimetrik kâğıt yok (tesisat), üstte açık parşömen bar + koyu pafta kahraman.

   🔴 RENK LOGODAN ÖRNEKLENDİ: logo kahvesi #3c2400 (eski site teması #4f2b00). Vurgu kadastro kırmızısı
   (sınır çizgisi) ve hardal (ölçü aleti sarısı). Gövde yazısı hardal OLMAZ — yalnız koyu zeminde.
   🔴 Dış yazı tipi YOK: Cambria/Georgia (başlık) · sistem (gövde) · Consolas (koordinat).
   ===================================================================== */

:root {
  --kagit:   #f6f0e4;
  --kagit-2: #ece2cf;
  --beyaz:   #fffdf8;
  --murekkep:#22190f;
  --gri:     #5e5244;   /* kâğıt üstünde 6.6 */
  --cizgi:   #d8ccb5;
  --kahve:   #3c2400;
  --kahve-2: #5a3a12;
  --gece:    #1c130a;
  --gece-2:  #2a1d0f;
  --hardal:  #e0a526;
  --kirmizi: #b3322a;   /* beyaz üstünde 5.9 */
  --mavi:    #2c7a99;
  --wa:      #128c4a;   /* beyaz yazıyla 4.6 */
  --olcu: 1200px;
  --baslik-yazi: Cambria, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, Consolas, "Cascadia Mono", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--kagit); color: var(--murekkep); font: 16.5px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--kahve-2); }
h1, h2, h3 { font-family: var(--baslik-yazi); line-height: 1.18; margin: 0 0 .5em; color: var(--kahve); font-weight: 700; }
h1 { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -.01em; }
h2 { font-size: clamp(24px, 2.8vw, 34px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
.kapsa { width: min(100% - 32px, var(--olcu)); margin-inline: auto; }
.atla { position: absolute; left: -9999px; }
.atla:focus { left: 16px; top: 16px; z-index: 99; background: #fff; padding: 8px 12px; }
.ortala { text-align: center; margin-top: 28px; }
.soluk { color: var(--gri); }
:focus-visible { outline: 3px solid var(--hardal); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 10px 20px;
  border-radius: 8px; font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid transparent; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s; font-family: inherit; }
.dugme:hover { transform: translateY(-1px); }
.dugme svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.dugme-wa { background: var(--wa); color: #fff; }
.dugme-wa:hover { background: #0e7a40; }
.dugme-ana { background: var(--kahve); color: #fff; }
.dugme-ana:hover { background: var(--kahve-2); }
.dugme-cizgi { border-color: var(--kahve); color: var(--kahve); background: transparent; }
.dugme-cizgi:hover { background: var(--kahve); color: #fff; }
.dugme-acik { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.dugme-acik:hover { background: #fff; color: var(--gece); }
.dugme-duz { color: var(--kahve-2); text-decoration: underline; }
.dugme-kucuk { min-height: 44px; padding: 8px 14px; font-size: 15px; }
.dugme-tam { width: 100%; }
.dugme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.dugme-grid .dugme { width: 100%; }
.wa-masaustu { display: none !important; }
@media (min-width: 601px) { .wa-mobil { display: none !important; } .wa-masaustu { display: inline-flex !important; } }
.ikon-tel { fill: none !important; stroke: currentColor; stroke-width: 2; }

/* ---------------------------------------------------------------- üst bar */
.ust { position: sticky; top: 0; z-index: 30; background: rgba(246,240,228,.96); border-bottom: 1px solid var(--cizgi); backdrop-filter: blur(6px); }
.ust-ic { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.marka { flex: none; }
.marka img { width: 148px; height: auto; }
.menu { margin-left: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.menu a { display: flex; align-items: center; min-height: 44px; padding: 0 11px; color: var(--murekkep); text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 6px; white-space: nowrap; }
.menu a:hover { background: var(--kagit-2); }
.menu a.acik { color: var(--kirmizi); box-shadow: inset 0 -3px 0 var(--kirmizi); border-radius: 0; }
.ust-eylem { display: flex; gap: 8px; align-items: center; }
.menu-dugme { display: none; width: 46px; height: 46px; border: 1px solid var(--cizgi); background: var(--beyaz); border-radius: 8px; cursor: pointer; }
.menu-dugme svg { width: 24px; height: 24px; stroke: var(--kahve); stroke-width: 2; fill: none; }
@media (max-width: 1080px) {
  .menu-dugme { display: inline-grid; place-items: center; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--kagit); border-bottom: 1px solid var(--cizgi); display: none; }
  .menu.acik-menu { display: block; }
  .menu ul { flex-direction: column; padding: 8px 16px 16px; }
  .menu a { min-height: 48px; font-size: 17px; }
  .ust-eylem { margin-left: auto; }
}
@media (max-width: 420px) { .marka img { width: 116px; } .ust-eylem .dugme-wa span { display: none; } }

/* ---------------------------------------------------------------- kahraman */
.kahraman { position: relative; background: radial-gradient(120% 90% at 80% 20%, #3a2810 0%, var(--gece) 62%); color: #f3e9d6; overflow: hidden; }
.kahraman-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(36px, 6vw, 72px) 0 clamp(44px, 6vw, 80px); }
.kahraman h1 { color: #fff; }
.ust-yazi { font: 700 13px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hardal); margin-bottom: 12px; }
.ust-yazi.koyu { color: var(--kirmizi); }
.giris { font-size: clamp(17px, 1.6vw, 19px); color: #e8dcc6; max-width: 58ch; }
.guven { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; color: #d9c9ab; }
.guven li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.guven li::before { content: ""; width: 9px; height: 9px; border: 2px solid var(--hardal); transform: rotate(45deg); }
.kahraman-sahne { border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px #000; border: 1px solid rgba(224,165,38,.25); }
.sahne-svg { width: 100%; height: auto; display: block; }
.manset-gizle { position: absolute; right: 16px; bottom: 12px; min-height: 44px; padding: 0 14px; background: rgba(0,0,0,.35); color: #e8dcc6;
  border: 1px solid rgba(255,255,255,.25); border-radius: 22px; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.kahraman.manset-kapali .kahraman-sahne, .kahraman.manset-kapali .giris, .kahraman.manset-kapali .guven, .kahraman.manset-kapali .ust-yazi { display: none; }
.kahraman.manset-kapali .kahraman-ic { grid-template-columns: 1fr; padding: 18px 0 64px; }
.kahraman.manset-kapali h1 { font-size: clamp(22px, 2.6vw, 30px); }
@media (max-width: 480px) {
  .kahraman-sahne { margin-inline: -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .rehber-kart { padding: 6px 6px 14px; }
  .cizim-kutu { padding: 4px; }
}
@media (max-width: 420px) {
  .kunye { grid-template-columns: 1fr; gap: 0; }
  .kunye dd a { overflow-wrap: anywhere; }
}
.kunye dd { min-width: 0; }
figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) {
  .kahraman-ic { grid-template-columns: 1fr; }
  .kahraman-sahne { order: 2; }
  .manset-gizle { position: static; margin: 0 16px 16px auto; display: block; }
}

/* ---------------------------------------------------------------- bölümler */
.bolum { padding: clamp(48px, 6vw, 88px) 0; }
.bolum.ust-bosluk-az { padding-top: 32px; }
.bolum-bas { max-width: 760px; margin-bottom: 30px; }
.bolum-bas p:not(.ust-yazi) { color: var(--gri); font-size: 17px; }
.koyu-bolum { background: var(--gece); color: #e8dcc6; }
.koyu-bolum h2 { color: #fff; }
.koyu-bolum .bolum-bas p:not(.ust-yazi) { color: #cdbd9f; }
.kagit-bolum { background: var(--kagit-2); }
.iki-kolon { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; }
.okuma { max-width: 62ch; }
.kucuk-baslik { font-size: 20px; text-align: center; color: var(--gri); }

/* seçici kartları */
.secim-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.secim-kart { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto 1fr; column-gap: 16px; align-items: start; padding: 20px;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; text-decoration: none; color: var(--murekkep); transition: border-color .2s, box-shadow .2s, transform .2s; }
.secim-kart:hover { border-color: var(--kirmizi); box-shadow: 0 14px 30px -18px rgba(60,36,0,.45); transform: translateY(-2px); }
.secim-kart .ikon { grid-row: 1 / 3; width: 76px; height: 76px; }
.secim-ad { font: 700 20px/1.25 var(--baslik-yazi); color: var(--kahve); }
.secim-metin { color: var(--gri); font-size: 15.5px; margin-top: 4px; }

/* ikon (çizgi) */
.ikon { color: var(--kahve); }
.ikon * { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ikon .v { stroke: var(--kirmizi); }
.ikon .d { fill: currentColor; }
.ikon .v.d { fill: var(--kirmizi); }
.ikon .su, .ikon .akis { stroke: var(--mavi); }
.ikon .d.su { fill: var(--mavi); }
.ikon text { stroke: none; fill: var(--kahve); font: 700 18px var(--baslik-yazi); text-anchor: middle; }
.ikon .it-k { font: 700 13px var(--mono); text-anchor: start; fill: var(--kirmizi); }

/* mozaik (kendi fotoğraflar, doğal ölçü ≤ 600 px) */
.mozaik { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 16vw, 210px); gap: 10px; }
.mozaik figure { margin: 0; position: relative; overflow: hidden; border-radius: 10px; background: var(--gece-2); }
.mozaik img { width: 100%; height: 100%; object-fit: cover; }
.mozaik figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: 13.5px; line-height: 1.35; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.mz1 { grid-column: span 2; grid-row: span 2; }
.mz2 { grid-column: span 2; }
@media (max-width: 760px) {
  .mozaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .mz1 { grid-column: span 2; grid-row: span 2; }
  .mz7 { display: none; }
}

/* rehber kartları */
.rehber-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.rehber-kart { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--murekkep); background: var(--beyaz);
  border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px 12px 18px; transition: border-color .2s, transform .2s; }
.rehber-kart:hover { border-color: var(--kahve); transform: translateY(-2px); }
.rehber-ad { font: 700 19px/1.3 var(--baslik-yazi); color: var(--kahve); padding: 6px 6px 0; }
.rehber-kart .hk-metin { padding: 0 6px; }
.cizim { width: 100%; height: auto; display: block; border-radius: 8px; }
.cizim-kutu { margin: 28px 0; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: 10px; }
.cizim-kutu figcaption { padding: 10px 6px 2px; color: var(--gri); font-size: 15px; }
.cizim-kutu.genis { max-width: 860px; margin-inline: auto; }

/* uygulama listesi (ana sayfa) */
.uyg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.uyg-liste a { display: grid; gap: 2px; padding: 14px 16px; background: var(--beyaz); border: 1px solid var(--cizgi); border-left: 4px solid var(--kirmizi);
  border-radius: 8px; text-decoration: none; color: var(--murekkep); }
.uyg-liste a:hover { border-color: var(--kahve); }
.uyg-liste b { color: var(--kahve); }
.uyg-liste span { color: var(--gri); font-size: 14.5px; }

/* belgeler */
.belge-sira { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: start; }
.belge-sira img, .belge-izgara img { border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; box-shadow: 0 16px 30px -22px rgba(0,0,0,.5); }
.belge-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; align-items: start; }
.belge-izgara figure { margin: 0; }
.belge-izgara figcaption { font-size: 14px; color: var(--gri); margin-top: 8px; }

/* kayan logo şeridi */
.serit-bolum { padding-bottom: 56px; }
.serit { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.serit-ray { display: flex; width: max-content; animation: serit-kay 70s linear infinite; }
.serit:hover .serit-ray { animation-play-state: paused; }
.serit-liste { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0 14px 0 0; }
.serit-liste li { flex: none; width: 150px; background: #fff; border-radius: 8px; border: 1px solid var(--cizgi); }
.serit-liste img { width: 150px; height: 75px; object-fit: contain; }
@keyframes serit-kay { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .serit-ray { animation: none; width: auto; }
  .serit-liste { flex-wrap: wrap; justify-content: center; }
  .serit-liste[aria-hidden="true"] { display: none; }
  .serit { mask-image: none; -webkit-mask-image: none; }
}

/* SSS */
.sss { display: grid; gap: 10px; max-width: 900px; }
.sss details { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 10px; }
.sss summary { cursor: pointer; list-style: none; padding: 14px 48px 14px 18px; min-height: 48px; font-weight: 700; position: relative; color: var(--kahve); }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 400 24px var(--mono); color: var(--kirmizi); }
.sss details[open] summary::after { content: "–"; }
.sss details p { padding: 0 18px 16px; margin: 0; color: var(--gri); }

/* iletişim bandı */
.iletisim-bandi { background: var(--kahve); color: #f0e4cc; }
.iletisim-bandi h2 { color: #fff; }
.iletisim-bandi .ust-yazi { color: var(--hardal); }
.adres-kart { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 22px; }
.adres-kart a { color: #fff; }
.adres-b { font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hardal); margin: 0 0 4px; }
.ilceler { font-size: 14.5px; color: #e0d2b6; }

/* ---------------------------------------------------------------- iç sayfa başı */
.sayfabasi { background: var(--gece); color: #e8dcc6; padding: 22px 0 34px; border-bottom: 4px solid var(--kirmizi);
  background-image: linear-gradient(rgba(224,165,38,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(224,165,38,.07) 1px, transparent 1px); background-size: 40px 40px; }
.sayfabasi h1 { color: #fff; font-size: clamp(26px, 3.6vw, 44px); margin: 0; }
.altbaslik { color: #d3c3a5; margin: 10px 0 0; max-width: 70ch; }
.kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; margin-bottom: 14px; color: #bba98a; }
.kirinti a { color: #e8dcc6; display: inline-flex; min-height: 44px; align-items: center; }
.kirinti em { font-style: normal; color: var(--hardal); display: inline-block; vertical-align: middle; max-width: min(34ch, 100%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sayfabasi-ic.ikonlu { display: grid; grid-template-columns: 84px 1fr; gap: 20px; align-items: center; }
.bas-ikon { width: 84px; height: 84px; background: var(--kagit); border-radius: 14px; padding: 6px; }
.bas-ikon .ikon { width: 100%; height: 100%; }
@media (max-width: 560px) { .sayfabasi-ic.ikonlu { grid-template-columns: 60px 1fr; gap: 14px; } .bas-ikon { width: 60px; height: 60px; } }

/* hizmet sayfası */
.hizmet-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (max-width: 960px) { .hizmet-duzen { grid-template-columns: 1fr; } }
.hizmet-govde { min-width: 0; }
.hizmet-govde > p, .metin p, .metin li, .hizmet-govde > h2 { max-width: 72ch; }
.hizmet-govde h2 { margin-top: 1.6em; }
.giris-koyu { font-size: 19px; color: var(--murekkep); border-left: 4px solid var(--kirmizi); padding-left: 16px; }
.metin ul, .belgeler { padding-left: 1.2em; }
.metin li, .belgeler li { margin-bottom: .35em; }
.adimlar { counter-reset: a; list-style: none; padding: 0; display: grid; gap: 10px; max-width: 72ch; }
.adimlar li { counter-increment: a; position: relative; padding: 12px 14px 12px 58px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 10px; min-height: 48px; }
.adimlar li::before { content: counter(a, decimal-leading-zero); position: absolute; left: 12px; top: 10px; font: 700 15px var(--mono); color: #fff; background: var(--kahve); border-radius: 6px; padding: 3px 6px; }
.foto-sira { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.foto-sira figure { margin: 0; }
.foto-sira img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.foto-sira figcaption { font-size: 13.5px; color: var(--gri); margin-top: 6px; }
.yan { display: grid; gap: 16px; position: sticky; top: 96px; }
@media (max-width: 960px) { .yan { position: static; } }
.yan-kutu { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: 18px; display: grid; gap: 10px; }
.yan-kutu p { margin: 0; }
.yan-kutu img { border-radius: 8px; }
.yan-b { font: 700 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kirmizi); }
.yan-liste ul { list-style: none; margin: 0; padding: 0; }
.yan-liste a { display: flex; align-items: center; min-height: 44px; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: var(--murekkep); font-size: 15px; line-height: 1.3; }
.yan-liste a:hover { background: var(--kagit); }
.yan-liste a[aria-current] { background: var(--kahve); color: #fff; }
.hk-bolum { scroll-margin-top: 100px; }

/* kart ızgaraları */
.grup { margin-bottom: 48px; scroll-margin-top: 100px; }
.grup-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; border-bottom: 2px solid var(--kahve); padding-bottom: 8px; margin-bottom: 18px; }
.grup-bas h2 { margin: 0; }
.grup-bas p { margin: 0; color: var(--gri); }
.grup-sekme { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.grup-sekme a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--cizgi); background: var(--beyaz); border-radius: 22px; text-decoration: none; color: var(--kahve); font-weight: 700; white-space: nowrap; }
.kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.hizmet-kart { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; padding: 16px; background: var(--beyaz);
  border: 1px solid var(--cizgi); border-radius: 12px; text-decoration: none; color: var(--murekkep); transition: border-color .2s, transform .2s; }
.hizmet-kart:hover { border-color: var(--kirmizi); transform: translateY(-2px); }
.hizmet-kart .ikon { grid-row: 1 / 3; width: 56px; height: 56px; }
.hk-ad { font: 700 17.5px/1.28 var(--baslik-yazi); color: var(--kahve); }
.hk-metin { display: block; font-size: 14.5px; color: var(--gri); margin-top: 4px; line-height: 1.5; }
.kart-izgara.kucuk .hizmet-kart { grid-template-rows: auto; align-items: center; }

/* logolar */
.logo-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.logo-izgara li { background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; }
.logo-izgara li > a { display: block; text-decoration: none; color: inherit; }
.logo-izgara img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.logo-izgara span { display: block; padding: 6px 10px 10px; font-size: 13.5px; line-height: 1.3; color: var(--gri); text-align: center; }

/* galeri */
.galeri-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.galeri-izgara figure { margin: 0; }
.galeri-izgara img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.galeri-izgara figcaption { font-size: 14px; color: var(--gri); margin-top: 6px; line-height: 1.4; }
.galeri-izgara b { color: var(--kahve); display: block; }
.isik { position: fixed; inset: 0; z-index: 60; background: rgba(10,6,2,.92); display: grid; place-items: center; padding: 16px; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; }
.isik img { max-height: 86vh; width: auto; border-radius: 8px; }
.isik button { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 24px; border: 0; background: #fff; font-size: 26px; cursor: pointer; }

/* ekipman + uygulamalar */
.ekipman-izgara, .uyg-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.ekipman, .uyg-kart { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; }
.ekipman-gorsel { background: #fff; border-radius: 8px; margin-bottom: 12px; }
.ekipman-gorsel img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.ekipman h2, .uyg-kart h3 { font-size: 19px; margin-bottom: 6px; }
.ekipman p:last-child { color: var(--gri); margin: 0; }
.ekipman-tur { font: 700 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kirmizi); margin: 0 0 4px; }
.uyg-kart .ikon { width: 52px; height: 52px; margin-bottom: 8px; }
.uyg-kart p { color: var(--gri); font-size: 15px; }
.uyg-kart .ipucu { background: var(--kagit); border-radius: 8px; padding: 10px 12px; color: var(--murekkep); }
.uyg-kart .dugme { margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: center; line-height: 24px; }

/* iletişim sayfası + form */
.iletisim-duzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; margin-bottom: 28px; }
.iletisim-kutu { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: clamp(18px, 3vw, 28px); scroll-margin-top: 100px; }
.kunye { display: grid; grid-template-columns: 90px 1fr; gap: 10px 14px; margin: 22px 0 0; }
.kunye dt { font: 700 13px var(--mono); text-transform: uppercase; color: var(--kirmizi); padding-top: 12px; }
.kunye dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 16px; align-items: center; }
.kunye dd a { display: inline-flex; align-items: center; min-height: 44px; }
/* 🔴 aspect-ratio + min-height dar ekranda GENİŞLİĞİ büyütüp taşırdı (ölçüldü 375 px) → yükseklik doğrudan. */
.harita-gomu { border-radius: 12px; overflow: hidden; border: 1px solid var(--cizgi); height: clamp(280px, 38vw, 480px); }
.harita-gomu iframe { width: 100%; height: 100%; border: 0; display: block; }
.form { display: grid; gap: 10px; position: relative; }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 14px; }
.form label { display: grid; gap: 4px; font-weight: 600; font-size: 15px; }
.form input, .form select, .form textarea { font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid #bfae90; border-radius: 8px; background: #fff; width: 100%; }
.form textarea { min-height: 72px; resize: vertical; }
.form label:has(textarea) { grid-column: 1 / -1; }
.form-not { font-weight: 400; font-size: 13.5px; color: var(--gri); }
.kvkk { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px; font-weight: 400 !important; font-size: 14px !important; color: var(--gri); }
.kvkk input { width: 22px; min-height: 22px; height: 22px; margin-top: 2px; flex: none; }
.uyari { padding: 12px 14px; border-radius: 8px; }
.uyari-iyi { background: #e3f2e7; color: #0f5a2e; }
.uyari-kotu { background: #f8e1de; color: #8c1f17; }

/* ---------------------------------------------------------------- altbilgi */
.altbilgi { background: var(--gece); color: #cdbd9f; padding: 56px 0 96px; font-size: 15px; }
.altbilgi-ic { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 960px) { .altbilgi-ic { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .altbilgi-ic { grid-template-columns: 1fr; } }
.alt-logo { display: inline-block; background: var(--kagit); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; }
.alt-logo img { width: 150px; }
.alt-baslik { font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hardal); margin-bottom: 10px; }
.alt-liste { list-style: none; margin: 0; padding: 0; }
.alt-liste a { color: #e8dcc6; text-decoration: none; display: flex; align-items: center; min-height: 36px; line-height: 1.3; }
.alt-liste a:hover { color: #fff; text-decoration: underline; }
.alt-serit { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; }
.alt-serit nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.alt-serit nav a { color: #e8dcc6; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.kapanis { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; white-space: nowrap; }
@media (max-width: 860px) { .alt-liste a { min-height: 44px; } }
@media (max-width: 420px) { .telif-uzun { display: none; } }

/* yüzen eylemler (telefon) */
.yuzen { display: none; }
@media (max-width: 760px) {
  .yuzen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; }
  .yuzen a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 25px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
  .yuzen svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
  .y-wa { background: var(--wa); color: #fff; }
  .y-tel { background: var(--kahve); color: #fff; }
}

/* =====================================================================
   CANLANDIRMA (2026-10-27, kullanıcı: "biraz renklendir, biraz canlandır, biraz hareketlendir")

   🔴 RENK GRUBA BAĞLI: her hizmet grubunun kendi haritacılık rengi var (kadastro = sınır kırmızısı,
   harita = bitki örtüsü yeşili, altyapı = su mavisi, imar = turuncu, değerleme = altın). Aynı renk
   kartta, ikonda, sekmede ve hizmet sayfasının başlık şeridinde — ziyaretçi hangi grupta olduğunu görür.
   🔴 Hareket betik ölürse görünürlüğü ÇALMAZ: "belir" sınıfını betik ekler; 3 sn içinde gözlemci
   ateşlenmezse hepsi kendiliğinden görünür (site.js).
   ===================================================================== */
:root { --g-kadastro: #c0392b; --g-harita: #2e8b57; --g-proje: #1f7fb0; --g-imar: #d9731a; --g-degerleme: #b8860b; --turkuaz: #2bb3a3; }
/* --g-yazi: kâğıt zeminde yazı olarak kullanılan koyu ton (≥ 4.5); --g yalnız şerit/dolgu/ikon. */
.g-kadastro { --g: var(--g-kadastro); --g-yazi: #a4301f; --g-acik: #fbe9e6; --g-koyu: #3a1a14; }
.g-harita   { --g: var(--g-harita);   --g-yazi: #23704a; --g-acik: #e5f4ea; --g-koyu: #142e1f; }
.g-proje    { --g: var(--g-proje);    --g-yazi: #1a6690; --g-acik: #e3f1f9; --g-koyu: #10283a; }
.g-imar     { --g: var(--g-imar);     --g-yazi: #9a4b0b; --g-acik: #fdeee0; --g-koyu: #3a2210; }
.g-degerleme{ --g: var(--g-degerleme);--g-yazi: #765605; --g-acik: #fbf3dc; --g-koyu: #2e240b; }

/* kartlar: grup rengi şerit + renkli ikon kutusu + üzerine gelince dolan zemin */
.hizmet-kart[class*="g-"], .secim-kart[class*="g-"] { position: relative; overflow: hidden; border-top: 4px solid var(--g); }
.hizmet-kart[class*="g-"] .ikon, .secim-kart[class*="g-"] .ikon { color: var(--g); background: var(--g-acik); border-radius: 14px; padding: 6px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.hizmet-kart[class*="g-"] .ikon .v, .secim-kart[class*="g-"] .ikon .v { stroke: var(--kahve); }
.hizmet-kart[class*="g-"] .ikon .v.d, .secim-kart[class*="g-"] .ikon .v.d { fill: var(--kahve); }
.hizmet-kart[class*="g-"]::before, .secim-kart[class*="g-"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--g-acik), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.hizmet-kart[class*="g-"]:hover::before, .secim-kart[class*="g-"]:hover::before { opacity: 1; }
.hizmet-kart[class*="g-"]:hover, .secim-kart[class*="g-"]:hover { border-color: var(--g); box-shadow: 0 18px 34px -20px var(--g); }
.hizmet-kart:hover .ikon, .secim-kart:hover .ikon { transform: rotate(-6deg) scale(1.08); }
.hizmet-kart > *, .secim-kart > * { position: relative; }
.grup[class*="g-"] .grup-bas { border-bottom-color: var(--g); }
.grup[class*="g-"] .grup-bas h2 { color: var(--g-yazi); }
.grup-sekme a[class*="g-"] { border-color: var(--g); color: var(--g-yazi); transition: background .2s, color .2s; }
.grup-sekme a[class*="g-"]:hover { background: var(--g-yazi); color: #fff; }
.sayfabasi[class*="g-"] { border-bottom-color: var(--g); background-color: var(--g-koyu); }
.sayfabasi[class*="g-"] .bas-ikon { background: var(--g-acik); }
.sayfabasi[class*="g-"] .bas-ikon .ikon { color: var(--g); }

/* sayaç şeridi */
/* beyaz yazı her durakta ≥ 4.5: #8e2a1a 7.4 · #9a4b0b 6.3 · #765605 6.4 · #1f6a40 6.6 · #155d83 7.0 */
.sayac-serit { background: linear-gradient(90deg, #8e2a1a, #9a4b0b 30%, #765605 52%, #1f6a40 76%, #155d83); color: #fff; }
.sayac-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.sayac { padding: 22px 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; border-left: 1px solid rgba(255,255,255,.25); }
.sayac:first-child { border-left: 0; }
.sayac b { grid-row: span 2; font: 700 clamp(34px, 4vw, 48px)/1 var(--baslik-yazi); text-shadow: 0 2px 10px rgba(0,0,0,.25); font-variant-numeric: tabular-nums; }
.sayac span { font-weight: 700; font-size: 17px; white-space: nowrap; }
.sayac small { font-size: 13.5px; opacity: .92; white-space: nowrap; }
@media (max-width: 560px) {
  .sayac-izgara { grid-template-columns: 1fr 1fr; }
  .sayac { min-width: 0; border-left: 0; padding: 14px 10px; grid-template-columns: 1fr; text-align: center; }
  .sayac b { grid-row: auto; font-size: 32px; }
  .sayac small { display: none; }
}

/* canlı zeminler: kayan eş yükselti eğrileri (yalnız süs) */
.secici, .kagit-bolum, .iletisim-bandi, .koyu-bolum { position: relative; overflow: hidden; isolation: isolate; }
.secici::before, .kagit-bolum::before, .iletisim-bandi::before, .koyu-bolum::before {
  content: ""; position: absolute; left: -600px; top: -400px; right: -600px; bottom: -400px; z-index: -1; pointer-events: none; opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' fill='none' stroke='%23b08a4f' stroke-width='1.2'%3E%3Cpath d='M80 200c10-80 120-130 220-120s180 70 170 140-110 110-220 100S70 280 80 200z'/%3E%3Cpath d='M130 200c8-55 90-90 165-82s130 50 122 98-80 76-160 70-135-36-127-86z'/%3E%3Cpath d='M180 200c6-32 60-55 112-50s88 30 82 60-54 46-108 42-92-22-86-52z'/%3E%3Cpath d='M230 200c4-14 30-24 60-22s46 14 42 28-28 22-58 20-48-12-44-26z'/%3E%3Cpath d='M-40 360c120-30 240 20 360-10s200-60 320-20'/%3E%3Cpath d='M-40 40c100 30 220-20 330 10s210 50 330 10'/%3E%3C/svg%3E");
  background-size: 600px 400px; }
.koyu-bolum::before, .iletisim-bandi::before { opacity: .2; filter: brightness(1.8); }
.secici { background: linear-gradient(180deg, #f6f0e4, #fbf6ec); }
.kagit-bolum { background: linear-gradient(135deg, #ece2cf 0%, #e3eee4 100%); }
.iletisim-bandi { background: linear-gradient(120deg, #3c2400 0%, #5a2f12 55%, #1f4e5f 100%); }
@media (prefers-reduced-motion: no-preference) {
  .secici::before, .kagit-bolum::before, .iletisim-bandi::before, .koyu-bolum::before { animation: zemin-kay 70s linear infinite; }
}
@keyframes zemin-kay { to { transform: translate(600px, 400px); } }

/* kahraman: renkli parıltılar + parlayan başlık */
.kahraman { background: radial-gradient(60% 70% at 85% 15%, rgba(43,179,163,.22), transparent 60%), radial-gradient(50% 60% at 10% 90%, rgba(192,57,43,.22), transparent 60%), radial-gradient(120% 90% at 80% 20%, #3a2810 0%, var(--gece) 62%); }
.kahraman h1 { background: linear-gradient(90deg, #fff 0%, #ffe3a3 45%, #fff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; }
.guven li:nth-child(1)::before { border-color: var(--turkuaz); } .guven li:nth-child(3)::before { border-color: #ff8a7a; }
.kahraman-sahne { box-shadow: 0 30px 60px -30px #000, 0 0 0 1px rgba(43,179,163,.25), 0 0 50px -10px rgba(43,179,163,.35); }
@media (prefers-reduced-motion: no-preference) {
  .kahraman h1 { animation: baslik-parla 7s ease-in-out infinite; }
  .kahraman-sahne { animation: sahne-suzul 8s ease-in-out infinite; }
}
@keyframes baslik-parla { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes sahne-suzul { 50% { transform: translateY(-6px); } }

/* kahraman zemini: tam genişlik süs katmanı (svg.php kahraman_zemini) */
.kahraman-zemin { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.kahraman-ic { position: relative; z-index: 1; }
.zemin-svg { width: 100%; height: 100%; display: block; }
.isima { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; }
.isima.i1 { width: 520px; height: 520px; right: -120px; top: -160px; background: #2bb3a3; }
.isima.i2 { width: 460px; height: 460px; left: -140px; bottom: -200px; background: #d9462f; }
.isima.i3 { width: 380px; height: 380px; left: 38%; top: 30%; background: #e0a526; opacity: .28; }
/* metnin arkası koyulaşır: süs katmanı okunurluğu bozmasın (beyaz/krem yazı hedef ≥ 4.5) */
.kahraman-metin { position: relative; }
.kahraman-metin::before { content: ""; position: absolute; inset: -40px -60px -40px -80px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(20,13,6,.82), rgba(20,13,6,.55) 60%, transparent); }
.manset-gizle { position: static; margin: 20px 0 0; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .isima.i1 { animation: isima-1 16s ease-in-out infinite; }
  .isima.i2 { animation: isima-2 19s ease-in-out infinite; }
  .isima.i3 { animation: isima-3 23s ease-in-out infinite; }
}
@keyframes isima-1 { 50% { transform: translate(-160px, 120px) scale(1.15); } }
@keyframes isima-2 { 50% { transform: translate(220px, -90px) scale(1.2); } }
@keyframes isima-3 { 50% { transform: translate(-200px, 60px) scale(.85); } }
.kahraman.manset-kapali .kahraman-zemin { opacity: .5; }

/* düğmeler: parıltı geçişi + WhatsApp nabzı */
.dugme { position: relative; overflow: hidden; }
.dugme::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); pointer-events: none; }
.dugme:hover::after { left: 130%; transition: left .7s ease; }
.dugme-wa { background: linear-gradient(135deg, #16a35a, #0e7a40); }
@media (prefers-reduced-motion: no-preference) {
  .y-wa, .kahraman .dugme-wa { animation: wa-nabiz 2.8s ease-out infinite; }
}
@keyframes wa-nabiz { 0% { box-shadow: 0 0 0 0 rgba(22,163,90,.55); } 70% { box-shadow: 0 0 0 14px rgba(22,163,90,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,90,0); } }

/* mozaik + galeri: yavaş yakınlaşma */
.mozaik img, .galeri-izgara img, .foto-sira img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .4s; }
.mozaik figure:hover img, .galeri-izgara figure:hover img, .foto-sira figure:hover img { transform: scale(1.07); filter: saturate(1.15); }
.galeri-izgara a, .foto-sira figure > img { display: block; overflow: hidden; border-radius: 8px; }

/* rehber kartları, uygulama listesi, adımlar: renk vurgusu */
.rehber-kart { border-top: 4px solid var(--turkuaz); }
.rehber-kart:nth-child(3n+2) { border-top-color: var(--g-imar); }
.rehber-kart:nth-child(3n) { border-top-color: var(--g-harita); }
.rehber-kart:hover { box-shadow: 0 18px 34px -22px rgba(31,127,176,.6); }
.uyg-liste li:nth-child(5n+2) a { border-left-color: var(--g-harita); }
.uyg-liste li:nth-child(5n+3) a { border-left-color: var(--g-proje); }
.uyg-liste li:nth-child(5n+4) a { border-left-color: var(--g-imar); }
.uyg-liste li:nth-child(5n) a { border-left-color: var(--g-degerleme); }
.uyg-liste a { transition: transform .25s, box-shadow .25s; }
.uyg-liste a:hover { transform: translateX(6px); box-shadow: 0 10px 24px -18px rgba(0,0,0,.5); }
.adimlar li:nth-child(5n+1)::before { background: var(--g-kadastro); } .adimlar li:nth-child(5n+2)::before { background: var(--g-imar); }
.adimlar li:nth-child(5n+3)::before { background: var(--g-degerleme); } .adimlar li:nth-child(5n+4)::before { background: var(--g-harita); }
.adimlar li:nth-child(5n)::before { background: var(--g-proje); }

/* kaydırınca belirme (betik "belir" ekler; temel hâl görünür) */
@media (prefers-reduced-motion: no-preference) {
  html.js .belir { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--gec, 0s); }
  html.js .belir.gorundu { opacity: 1; transform: none; }
}