/* Sayfaya özel: galeri, ışık kutusu, Türkiye haritası, iletişim formu */

/* ---------- Galeri ---------- */
.filtre-cubuk { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filtre { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(18, 32, 42, .14); background: rgba(255, 255, 255, .8); font-weight: 800; font-size: .88rem; cursor: pointer; transition: box-shadow .2s, background .2s, color .2s; }
.filtre small { font-weight: 700; opacity: .65; }
.filtre[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (hover: hover) { .filtre:hover { box-shadow: 0 0 0 1px rgba(76, 190, 232, .6), 0 0 20px 2px rgba(127, 208, 245, .45); } }
.galeri { column-count: 2; column-gap: 10px; }
.galeri-oge { break-inside: avoid; margin: 0 0 10px; display: block; width: 100%; padding: 0; border: 0; background: var(--bg-2); border-radius: 16px; overflow: hidden; cursor: zoom-in; position: relative;
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 8px 22px rgba(18, 32, 42, .07); transition: transform .3s, box-shadow .3s; }
.galeri-oge img { width: 100%; height: auto; }
.galeri-oge[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .galeri-oge:hover { transform: translateY(-3px); box-shadow: var(--halo); } }
.galeri-oge:focus-visible, .galeri-oge:active { box-shadow: var(--halo); }
@media (min-width: 720px) { .galeri { column-count: 3; column-gap: 14px; } .galeri-oge { margin-bottom: 14px; border-radius: 18px; } }
@media (min-width: 1080px) { .galeri { column-count: 4; } }
.galeri-alt { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; text-align: center; color: var(--muted); font-size: .9rem; }
.galeri-onizleme { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.galeri-onizleme a { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid #fff; box-shadow: 0 8px 22px rgba(18, 32, 42, .08); transition: box-shadow .3s, transform .3s; }
.galeri-onizleme img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .galeri-onizleme a:hover { box-shadow: var(--halo); transform: translateY(-3px); } }
.galeri-onizleme a:focus-visible, .galeri-onizleme a:active { box-shadow: var(--halo); }
@media (min-width: 720px) { .galeri-onizleme { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

dialog.kutu { width: min(96vw, 1100px); max-width: none; max-height: 94dvh; padding: 0; border: 0; border-radius: 22px; background: #0d171d; color: #fff; overflow: hidden; }
dialog.kutu::backdrop { background: rgba(8, 14, 18, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kutu-ic { display: grid; grid-template-rows: 1fr auto; max-height: 94dvh; }
.kutu-gorsel { display: grid; place-items: center; min-height: 0; padding: 10px; }
.kutu-gorsel img { max-width: 100%; max-height: calc(94dvh - 92px); width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.kutu-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .84rem; }
.kutu-bar button { min-width: 46px; min-height: 46px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-weight: 800; cursor: pointer; }
.kutu-bar button:hover { background: rgba(127, 208, 245, .25); }
.kutu-kapat { position: absolute; right: 10px; top: 10px; z-index: 3; }

/* ---------- Türkiye haritası ---------- */
.harita-kutu { display: grid; gap: 18px; }
.harita-sahne { position: relative; padding: 10px; border-radius: 26px; background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(205, 238, 252, .45)); border: 1px solid #fff; box-shadow: var(--shadow); }
.harita-svg { width: 100%; height: auto; touch-action: manipulation; }
.il { fill: #dbe8ef; stroke: #fff; stroke-width: 1.2; cursor: pointer; transition: fill .6s ease var(--gecikme, 0s); -webkit-tap-highlight-color: transparent; }
/* Türkiye geneli kapsam: 81 ilin tamamı aynı kapsam rengiyle boyanır (İstanbul'dan dışa doğru dalga) */
.harita-svg.kapsam .il { fill: #a9def6; }
.harita-svg.kapsam .il.merkez { fill: #f0c7a3; }
.harita-svg.tamam .il { transition: fill .18s ease 0s; }
.harita-svg.kapsam .il:hover { fill: var(--ice); transition-delay: 0s; }
.harita-svg .il.secili, .harita-svg.kapsam .il.secili { fill: var(--cyan); transition-delay: 0s; }
.harita-halka { fill: none; stroke: var(--cyan); stroke-width: 3; pointer-events: none; animation: halka 1.6s ease-out forwards; }
@keyframes halka { from { r: 6px; opacity: .85; } to { r: 760px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .harita-halka { display: none; } .il { transition: none; } }
.harita-cizgi { fill: none; stroke: var(--cyan-deep); stroke-width: 2.4; stroke-dasharray: 7 6; stroke-linecap: round; pointer-events: none; }
.harita-cizgi.ciz { animation: cizgi-ciz .7s ease forwards; }
@keyframes cizgi-ciz { from { stroke-dashoffset: 900; opacity: .3; } to { stroke-dashoffset: 0; opacity: 1; } }
.harita-nokta { fill: #fff; stroke: var(--cyan-deep); stroke-width: 3; pointer-events: none; }
.harita-ipucu { position: absolute; pointer-events: none; z-index: 5; padding: 7px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: .8rem; white-space: nowrap; transform: translate(-50%, -135%); opacity: 0; transition: opacity .12s; }
.harita-ipucu.gorunur { opacity: 1; }
.harita-panel { display: grid; gap: 14px; align-content: start; }
.harita-panel label { font-weight: 800; font-size: .88rem; }
.harita-secim { display: grid; gap: 8px; }
.harita-sonuc { padding: 16px; border-radius: 18px; background: var(--glass-strong); border: 1px solid rgba(76, 190, 232, .4); box-shadow: 0 0 22px rgba(127, 208, 245, .3); }
.harita-sonuc h3 { margin-bottom: 6px; }
.harita-sonuc p { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
.harita-bilgi { font-size: .84rem; color: var(--muted); }
.harita-ana { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; }
.harita-ana::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: #f0c7a3; border: 1px solid rgba(148, 89, 59, .5); }
@media (min-width: 900px) { .harita-kutu { grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: start; } .harita-sahne { padding: 18px; } }

/* ---------- Form / iletişim ---------- */
.form { display: grid; gap: 14px; }
.alan { display: grid; gap: 6px; }
.alan label { font-weight: 800; font-size: .88rem; }
.alan input, .alan select, .alan textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(18, 32, 42, .2); background: #fff; font-size: 1rem; }
.alan textarea { min-height: 130px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: 3px solid rgba(42, 159, 203, .45); outline-offset: 1px; border-color: var(--cyan); }
.alan [aria-invalid="true"] { border-color: #b3261e; background: #fff7f6; }
.hata { color: #b3261e; font-size: .84rem; font-weight: 700; min-height: 1.1em; }
.form-not { font-size: .84rem; color: var(--muted); }
.iletisim-kartlari { display: grid; gap: 12px; }
.iletisim-kart { display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; }
.iletisim-kart b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); }
.iletisim-kart span { font-weight: 800; word-break: break-word; }
@media (min-width: 900px) { .iletisim-izgara { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; } }

/* ---------- 404 ---------- */
.bulunamadi { text-align: center; padding: 70px 0; display: grid; gap: 16px; justify-items: center; }
.bulunamadi .buyuk { font-size: clamp(4rem, 22vw, 9rem); font-weight: 800; letter-spacing: -.06em; background: linear-gradient(120deg, var(--cyan), var(--ice)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.harita-hizmet::before { background: #a9def6; border-color: rgba(23, 111, 147, .5); }
.harita-rozet { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: .88rem; width: fit-content; }
.harita-rozet svg { width: 18px; height: 18px; color: var(--ice); flex: 0 0 auto; }