/* ORFO-043 F1 adım 3 — semt rehberleri (10 semt + rehber ana sayfası, TR/EN). Kaynak: onizleme/043/semt.html, semtler.html.
   Ortak iskelet orfo-v043.css'te; burada yalnız semt sayfasına özgü parçalar. Fotoğraf, ilan ve harita semt-v043.js ile dolar. */

/* açılış: Kadrajım'dan o semtin gerçek karesi gelirse fotoğraf, gelmezse lacivert zemin + kıyı çizgisi */
.shero{position:relative;display:flex;align-items:flex-end;min-height:440px;min-height:max(440px,64svh);color:#fff;overflow:hidden;background:linear-gradient(160deg,var(--acilis-1),var(--acilis-2))}
.shero.foto{min-height:max(480px,78svh)}
.shero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.shero.foto .ph{opacity:1}
.shero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,29,51,.45),rgba(15,29,51,0) 30%,rgba(15,29,51,.88))}
.shero .in{position:relative;z-index:2;width:100%;max-width:var(--w);margin:0 auto;padding:112px 20px 40px}
@media(min-width:900px){.shero .in{padding:136px 40px 60px}}
.shero .iz,.shero .iz a{color:rgba(255,255,255,.78)}
.shero h1{font:400 clamp(38px,6vw,76px)/1.04 var(--serif);margin:14px 0 14px;letter-spacing:-.01em;max-width:18ch}
.shero .o-lead{max-width:56ch;margin:0;font-size:18px;line-height:1.55;opacity:.92}
.shero .eylem{margin-top:22px}
.shero .btn.ghost{color:#fff}
.shero .kap{position:absolute;z-index:2;right:20px;top:76px;margin:0;font:12px var(--sans);color:rgba(255,255,255,.7)}
.mini{display:block;width:100%;max-width:560px;margin-top:20px;overflow:visible}
.mini path{fill:none;stroke:color-mix(in srgb,var(--gold-d) 70%,transparent);stroke-width:1.5}
.mini circle{fill:var(--ink);stroke:var(--gold-d);stroke-width:1.5}.mini circle.on{fill:var(--gold-d);r:7}
.mini text{font:500 11px var(--sans);fill:rgba(255,255,255,.75)}.mini text.on{fill:#fff;font-weight:700}
@media(max-width:599px){.mini{display:none}}

/* rehber bölümleri: numaralı kartlar, ikili sütun */
.rb{display:grid;gap:20px}@media(min-width:900px){.rb{grid-template-columns:1fr 1fr;gap:28px 40px}}
.rb>div{border-top:2px solid var(--gold);padding-top:18px}
.rb h2{font:400 clamp(24px,2.6vw,30px)/1.18 var(--serif);margin:10px 0 10px;max-width:none}
.rb p{margin:0;color:var(--ink-2);font-size:17px}
.rb a{color:var(--gold-t);text-underline-offset:3px}

/* harita odası */
.sm-map{position:relative;z-index:0;height:440px;border:1px solid var(--line);background:#EEF1F2}
@media(max-width:599px){.sm-map{height:360px}}
.sm-map .leaflet-tile-pane{filter:grayscale(1) contrast(.82) brightness(1.08) sepia(.12)}
.sm-map.leaflet-container{font-family:var(--sans)}
.sm-map .leaflet-control-attribution{font-size:10px}
.sm-map .leaflet-tooltip.ad{background:#fff;border:1px solid var(--gold);border-radius:2px;font:600 12px var(--sans);color:var(--ink);box-shadow:none}
.harita-ip{font:13px var(--sans);color:var(--ink-2);margin-top:10px}
.harita-ip i{display:inline-block;width:18px;height:3px;background:var(--gold);vertical-align:middle;margin-right:6px}
.harita-ip i.c{height:1px;background:var(--ink);opacity:.5;margin-left:14px}

/* ilanlar: ortak .kart; boşken tek satır */
.il-bos{font:15px/1.6 var(--sans);color:var(--ink-2);max-width:60ch;margin:0}
.ilanlar:empty{display:none}

/* Kadrajımdan şeridi */
.serit{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px}
@media(min-width:900px){.serit{grid-auto-columns:auto;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0}}
.serit figure{margin:0;scroll-snap-align:start}.serit img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--sand)}
.serit figcaption{font:12px/1.4 var(--sans);color:var(--ink-2);margin-top:8px}

/* sık sorulanlar (semt-sss-uret.cjs aynı yapıyı yazar: .sm-sss > h2 + .o-faq > details) ve yerel sorular */
.sm-sss h2{font:400 clamp(28px,3.6vw,44px)/1.12 var(--serif);margin:12px 0 24px}
.sm-sss details,.yerel details{border-top:1px solid var(--line);padding:4px 0}
.sm-sss details:last-of-type,.yerel details:last-of-type{border-bottom:1px solid var(--line)}
.sm-sss summary,.yerel summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font:600 18px/1.35 var(--serif)}
.sm-sss summary::-webkit-details-marker,.yerel summary::-webkit-details-marker{display:none}
.sm-sss summary::after,.yerel summary::after{content:"+";font:400 24px/1 var(--sans);color:var(--gold-t)}
.sm-sss details[open] summary::after,.yerel details[open] summary::after{content:"–"}
.sm-sss details p,.yerel details p{margin:0 0 20px;color:var(--ink-2);max-width:66ch}
.sm-sss a,.yerel a{color:var(--gold-t)}
.yerel h2{font:400 clamp(24px,2.6vw,30px)/1.18 var(--serif);margin:0 0 16px}
.yerel+.yerel,.sm-sss+.yerel{margin-top:40px}
.sm-src,.sm-source{margin-top:32px;font:13px/1.7 var(--sans);color:var(--ink-2);max-width:70ch}
.sm-src h3{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-t);margin:0 0 10px}
.sm-src p,.sm-source p{margin:0 0 6px}.sm-src ol{margin:0;padding-left:18px}.sm-src a,.sm-source a{color:var(--gold-t)}

/* komşu rehberler */
.komsu{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font:600 15px var(--sans)}
.komsu a{text-decoration:none;color:var(--ink)}.komsu a:hover{color:var(--gold-t)}

/* son bölüm: iletişim */
.son .btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.son .btn:hover{background:var(--gold-d)}
.son .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}

/* rehber ana sayfası: 38 mahallenin haritası, rehber kartları, mahalle listesi */
.sbas .eylem{margin-top:24px}
.sbas .btn.ghost{color:var(--ink);border-color:var(--ink)}
.sm-map.genis{height:72vh;min-height:440px}
.rg{display:grid;gap:16px}@media(min-width:700px){.rg{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.rg{grid-template-columns:repeat(4,1fr)}}
.rg section{background:#fff;border:1px solid var(--line);transition:box-shadow .2s;position:relative}
.rg section:hover{box-shadow:0 14px 32px -20px rgba(15,29,51,.4)}
.rg .f{aspect-ratio:3/2;background:var(--sand) center/cover no-repeat}
.rg .t{padding:14px 16px 18px}
.rg h3{font:400 21px/1.25 var(--serif);margin:0 0 6px}
.rg h3 a{text-decoration:none}.rg h3 a::after{content:"";position:absolute;inset:0}
.rg p{margin:0;font:14px/1.5 var(--sans);color:var(--ink-2)}
.ux-all-areas>p,.metin>p{max-width:66ch}
.ux-district-group{border-top:1px solid var(--line)}
.ux-district-group:last-of-type{border-bottom:1px solid var(--line)}
.ux-district-group summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;padding:16px 0;font:600 18px/1.3 var(--serif)}
.ux-district-group summary::-webkit-details-marker{display:none}
.ux-district-group summary small{font:13px var(--sans);color:var(--ink-2);font-weight:400}
.ux-district-group summary::after{content:"+";margin-left:auto;font:400 22px/1 var(--sans);color:var(--gold-t)}
.ux-district-group[open] summary::after{content:"–"}
.ux-district-group ul{list-style:none;margin:0 0 16px;padding:0;columns:2 220px;column-gap:28px;font:15px/1.5 var(--sans)}
.ux-district-group li{padding:6px 0;break-inside:avoid}
.ux-district-group li>a{color:var(--gold-t);font-weight:600;text-underline-offset:3px}
.ux-district-group li>span:first-child{color:var(--ink)}
.ux-guide-pending{display:block;color:var(--ink-2);font-size:12px}
.ux-area-listings a,.ux-district-group li>a.say{display:inline-block;margin-left:8px;font:600 12px var(--sans);color:var(--gold-t)}
.metin .btn{margin-top:20px}

/* bölüm numarası: gizli bölüm (fotoğrafsız semtte Kadrajımdan) sayılmaz, sıra kaymaz */
.sm main{counter-reset:sb}
.sm main>.iskele{counter-increment:sb}
.sm .bas .lbl .no::before{content:counter(sb,decimal-leading-zero) " · "}
.sm .kd-semt[hidden]+.iskele{background:var(--sand)}
.sm .kd-semt[hidden]+.iskele>.wrap>.bas::before{background:var(--sand)}