/* SEO liste sayfalari (kategori/*.html, mahalle/*.html) icin stil.
ortak.css'in uzerine biner; yalniz bu sayfalara ozel kart/liste dili.
Uretilen sayfalar sayfa_uret.js ile olusur, elle duzenlenmez. */
/* YATAY DOLGU .wrap'tan (24px / mobil 16px). Onceki `padding:40px 0 8px` yatayi
SIFIRLIYORDU: h1, kirinti ve tanitim metni mobilde ekran kenarina yapisiyordu
(kullanici reelde fark etti, 04.09.2026; kategori/mahalle/isletme hepsi). */
.seo-head{padding-top:40px;padding-bottom:8px}
.seo-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
flex-wrap:wrap;margin-bottom:14px}
.seo-crumb a{color:var(--accent)}
.seo-crumb a:hover{text-decoration:underline}
.seo-crumb i{font-size:13px;color:var(--line-strong)}
/* ana sayfa: ikonlu, net geri donus (kesfet ile ayni dil) */
.crumb-home{display:inline-flex;align-items:center;gap:5px;font-weight:500}
.crumb-home i{color:var(--accent);font-size:15px}
@media(max-width:600px){
.seo-crumb{min-height:44px} /* mobil dokunma hedefi */
}
.seo-head h1{font-size:clamp(26px,3.4vw,38px);margin-bottom:10px}
.seo-head .lede{margin-bottom:18px}
.seo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
/* kategori bolumu (mahalle sayfalarinda): her genel kategori bir baslik,
altinda o kategorinin isletmeleri */
.seo-bolum{margin-bottom:30px}
.seo-bolum-bas{display:flex;align-items:center;gap:10px;font-size:19px;
margin:0;letter-spacing:-.015em}
.seo-bolum-bas .cdot{width:10px;height:10px;border-radius:var(--r-pill);flex:0 0 10px}
.seo-bolum-bas .say{color:var(--muted);font-weight:400;font-size:14px;
font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* liste: kesfet karti dilinin sadelesmis hali */
.seo-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
padding:14px 0 8px;list-style:none}
.seo-head + .wrap > .seo-list{padding-top:24px}
.seo-card{background:var(--card);border:1px solid var(--line);
border-radius:var(--r-surface);padding:16px 17px 14px;box-shadow:var(--sh-1);
display:flex;flex-direction:column;gap:8px;
transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.seo-card:hover{border-color:var(--line-strong);box-shadow:var(--sh-2)}
.seo-card h2{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.seo-card .sub{display:flex;align-items:center;gap:7px;font-size:12px;
color:var(--muted);flex-wrap:wrap}
.seo-card .cdot{width:8px;height:8px;border-radius:var(--r-pill);flex:0 0 8px}
/* KAYIT CIPASI. Sonek olarak sonik: baslikta once isim okunur.
Dokunmatikte hover yok, o yuzden GIZLI DEGIL -- soluk ama hep gorunur.
:target ile acilan kayit kisa sure vurgulanir; 600+ kayitlik sayfada
fragmanla gelen okur nereye dustugunu yoksa goremiyor. */
.kayit-bag{color:var(--line-strong);font-weight:600;text-decoration:none;
font-size:.85em;padding:0 2px;vertical-align:2%}
.kayit-bag:hover,.kayit-bag:focus-visible{color:var(--accent)}
.seo-card:target{border-color:var(--accent);box-shadow:var(--sh-2)}
.seo-card:target h3{scroll-margin-top:64px}
.seo-card{scroll-margin-top:64px}
.seo-rows{display:flex;flex-direction:column;gap:5px;font-size:12.5px;
color:var(--txt-2);margin-top:2px}
.seo-rows .r{display:flex;gap:8px;align-items:flex-start}
.seo-rows .r i{color:var(--muted);font-size:14px;margin-top:1px;flex:0 0 14px}
.seo-rows a{color:var(--accent)}
.seo-rows a:hover{text-decoration:underline}
/* rozet: dogrulanmadi / yaklasik -- kesfet ile ayni anlam */
.seo-badge{font-size:10px;background:var(--surface);color:var(--muted);
border:1px solid var(--line);padding:2px 7px;border-radius:var(--r-pill);
white-space:nowrap;font-weight:500}
/* ONE CIKAN: ticari yerlesim. Listenin USTUNDE, izgaranin DISINDA --
gerekcesi sayfa_uret.js oneCikanKart() basinda.
ALAN REZERVASYONU aspect-ratio ile. Gorsel gec yuklense de kutunun
yuksekligi bastan belli, yani CLS sifir.
KONTRAST -- BU BIR TERCIH DEGIL OLCUM: koyu fotograf zemininde aksan
rengi olarak --accent-hi KULLANILAMAZ. #0a52b5, --txt zemininde 2.5:1
veriyor; AA esigi 4.5. Kicker, ikon ve adres --accent-wash, govde metni
--card; hepsi koyu scrim uzerinde 10:1 ustunde. */
.one-cikan{
position:relative;isolation:isolate;overflow:hidden;
aspect-ratio:14/5;margin:0 0 22px;
border:1px solid var(--line);border-radius:var(--r-surface);
background:var(--accent-deep);box-shadow:var(--sh-2)}
.one-cikan .oc-gorsel{position:absolute;z-index:-2;inset:0;display:block;
width:100%;height:100%;object-fit:cover}
/* Scrim soldan koyu, sagda acilir: metin fotografin degisken tonlarindan
bagimsiz okunur ama fotograf tamamen kaybolmaz. */
.one-cikan .oc-scrim{position:absolute;z-index:-1;inset:0;
background:linear-gradient(90deg,
color-mix(in srgb,var(--txt) 92%,transparent) 0%,
color-mix(in srgb,var(--txt) 80%,transparent) 46%,
color-mix(in srgb,var(--txt) 34%,transparent) 100%)}
/* Gorselsiz kayit: reklam niteligini ve dizin kartindan ayrismayi
kaybetmeden ayni duzeni kullanir. Gorsel uydurmaktansa bu. */
.one-cikan--plain{background:linear-gradient(115deg,var(--accent-deep),var(--accent))}
.one-cikan--plain .oc-scrim{background:linear-gradient(90deg,
color-mix(in srgb,var(--txt) 40%,transparent),
color-mix(in srgb,var(--txt) 8%,transparent))}
.one-cikan .oc-govde{position:relative;height:100%;
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
width:min(64%,660px);padding:clamp(20px,4vw,52px)}
.one-cikan .oc-etiket{display:inline-flex;align-items:center;margin:0 0 10px;
padding:4px 11px;border-radius:var(--r-pill);
background:var(--accent);color:var(--card);
font-size:11px;font-weight:600;line-height:1.1;letter-spacing:.1em;
text-transform:uppercase}
.one-cikan .oc-kicker{margin:0 0 6px;color:var(--accent-wash);
font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.one-cikan .oc-ad{margin:0;color:var(--card);font-weight:600;
font-size:clamp(28px,4vw,50px);line-height:1.04;letter-spacing:-.03em}
/* Iki satirla sinirli, KIRPMA DEGIL SARMA. */
.one-cikan .oc-tanim{margin:12px 0 0;max-width:52ch;color:var(--card);
font-size:clamp(14.5px,1.4vw,16.5px);font-weight:500;line-height:1.45;
display:-webkit-box;-webkit-box-orient:vertical;
-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.one-cikan .oc-detaylar{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;
font-size:13.5px;font-weight:500}
.one-cikan .oc-detay{display:inline-flex;align-items:center;gap:6px;
color:var(--card);text-decoration:none}
.one-cikan a.oc-detay:hover{text-decoration:underline}
.one-cikan .oc-detay i{color:var(--accent-wash);font-size:15px}
.one-cikan .oc-adres{margin:9px 0 0;color:var(--accent-wash);
font-size:12.5px;line-height:1.4}
.one-cikan .oc-cta{display:inline-flex;align-items:center;gap:8px;
margin-top:18px;padding:11px 17px;border-radius:var(--r-pill);
background:var(--accent);color:var(--card);text-decoration:none;
font-size:14px;font-weight:600;box-shadow:var(--sh-1);
transition:background-color .18s var(--ease),transform .18s var(--ease)}
.one-cikan .oc-cta:hover{background:var(--accent-hi);transform:translateY(-1px)}
.one-cikan .oc-cta:focus-visible{outline:2px solid var(--card);outline-offset:3px}
.one-cikan .oc-cta i{font-size:15px;transition:transform .18s var(--ease)}
.one-cikan .oc-cta:hover i{transform:translateX(2px)}
/* TUM BANNER TIKLANABILIR -- yalnizca hedefi bir WEB SITESI olan kayitlarda.
"Stretched link": disa sarmak yerine CTA'nin ::after'i kutuyu kapliyor.
Sarmalayici icteki telefon baglantisini gecersiz HTML yapardi (a icinde
a) ve ekran okuyucuda kart tek bir dev baglanti olarak okunurdu. */
.one-cikan--tikla{cursor:pointer}
/* GENISLETILMIS BAGLANTI kartin TAMAMINI kaplamali.
OLCULDU (25 Agustos 2026, elementFromPoint ile): kaplamiyordu. ::after
inset:0 ile konumlaniyor ve en yakin KONUMLANMIS atasina gore cozuluyor;
o ata .oc-govde idi ve govde 650 px, kart 1015 px. Yani kartin sag %36'si
olu alandi -- reklam kutusunun ucte biri tiklandiginda hicbir sey olmuyordu.
.oc-govde'yi tiklanabilir kartlarda static yapinca ::after karta gore
cozuluyor. Guvenli: scrim zaten z-index:-1 ile arkada, govde'nin
konumlanmasina ihtiyaci yok. Icteki telefon/CTA baglantilari ayrica
z-index:2 tasidigi icin kaplamanin ustunde kaliyor ve tek tek calisiyor. */
.one-cikan--tikla .oc-govde{position:static}
.one-cikan--tikla .oc-cta::after{content:"";position:absolute;inset:0;z-index:1}
.one-cikan--tikla .oc-detay,
.one-cikan--tikla .oc-govde a:not(.oc-cta){position:relative;z-index:2}
.one-cikan--tikla:hover .oc-cta{background:var(--accent-hi)}
/* ANA SAYFA DONERI -- TEK BANNER, ICINDEKI SLOTLAR KAYARAK DEGISIR.
Capraz gecis (opacity) DEGIL RAY (transform) kullaniliyor: bes kart yan
yana tek bir seritte duruyor ve serit kayiyor. Boylece "ayni kutu, degisen
icerik" hissi olusuyor; opacity ile iki kart ust uste erirken kutu bir an
ikisini birden gosteriyordu.
Cerceve (kenarlik, radius, golge) DONERE ait, kartlara degil: kayan sey
icerik, kutu sabit. Tek basina duran .one-cikan (ic sayfalar) kendi
cercevesini korur.
JS YOKSA: serit ilk kartta durur, digerleri overflow:hidden ile kirpilir.
Kontroller `hidden` baslar, yalnizca JS acar. */
/* CAPRAZ GECIS (2 Eylul 2026). Onceki hal: kartlar yan yana tek seritte,
.oc-ray transform ile kayiyordu. Simdi kartlar UST USTE ve opacity ile
devrediyor.
IZGARA, MUTLAK KONUM DEGIL. Kartlar ayni izgara hucresinde: kutu EN UZUN
karta gore buyur. position:absolute ile yapilsaydi kutu yuksekligi
iceriKten kopardi ve mobilde metin ezilirdi -- bu depoda bir kez olmus
hata (aspect-ratio + flex, 1 Eylul 2026). Izgara onu yapisal olarak
engelliyor.
SIRALI DEVIR, ES ZAMANLI ERIME DEGIL. Iki karti ayni anda yari saydam
gostermek kutuyu bir an bulanik yapar; ray yontemi tam bunun icin
secilmisti. Cozum kulenin (.yg-a/.yg-b) yaptigi: once giden tamamen
kaybolur, SONRA gelen belirir. Burada transition-delay ile kuruluyor --
giden kart gecikmesiz .28s'de siniyor, gelen kart .28s BEKLEYIP
.28s'de aciliyor. Ust uste binme yok. */
.oc-doner{position:relative;overflow:hidden;aspect-ratio:7/2;margin:0 0 10px;
border:1px solid var(--line);border-radius:var(--r-surface);box-shadow:var(--sh-2)}
.oc-ray{display:grid;height:100%}
.oc-doner .one-cikan{grid-area:1/1;height:100%;margin:0;
aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;
opacity:0;transition:opacity .28s var(--ease)}
.oc-doner .one-cikan.on{opacity:1;transition-delay:.28s}
/* Gorunmeyen kart tiklanamaz olmali: opacity:0 tiklamayi engellemez ve
ustteki kartin CTA'si altakinin uzerine biner. */
.oc-doner .one-cikan:not(.on){pointer-events:none}
/* margin-bottom YOK. Bolumun kendi padding-bottom'u (88px) zaten ayirici;
uzerine 22px eklemek bandin altindaki boslugu 110px yapiyordu -- olculdu
(2 Eylul 2026). Ana sayfadaki diger tum bolum sinirlari 88px. */
.oc-kontrol{display:flex;align-items:center;justify-content:center;gap:10px;
margin:0}
.oc-kontrol[hidden]{display:none}
.oc-dur{display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;padding:0;border:1px solid var(--line);
border-radius:var(--r-pill);background:var(--card);color:var(--txt-2);
font-size:15px;cursor:pointer}
.oc-dur:hover{border-color:var(--line-strong);background:var(--surface)}
.oc-dur:focus-visible,.oc-nokta:focus-visible{
outline:2px solid var(--accent);outline-offset:2px}
/* DURAKLAT/OYNAT SIMGESI CSS ILE CIZILIYOR, IKON FONTUYLA DEGIL.
Sebep olculdu: ikonlar/*.css bir ALT KUME (39 ikon) ve `ph-pause` ile
`ph-play` ikisi de icinde YOK -- eski isaretleme
basiyordu ve ekranda BOS KUTU cikiyordu. Ayni cozum acilir menu oklarinda
da kullanildi. Iki cubuk = duraklat; aria-pressed true olunca ucgen =
oynat. */
.oc-dur-ikon{display:block;width:9px;height:11px;
border-left:3px solid currentColor;border-right:3px solid currentColor}
.oc-dur[aria-pressed="true"] .oc-dur-ikon{width:0;height:0;margin-left:2px;
border-left:9px solid currentColor;border-right:0;
border-top:6px solid transparent;border-bottom:6px solid transparent}
.oc-noktalar{display:flex;align-items:center;gap:6px}
.oc-nokta{width:8px;height:8px;padding:0;border:0;border-radius:var(--r-pill);
background:var(--line-strong);cursor:pointer;
transition:width .2s var(--ease),background-color .2s var(--ease)}
.oc-nokta.on{width:22px;background:var(--accent)}
@media (max-width:560px){
/* MOBILDE SABIT ORAN YOK -- OLCUM SONUCU (1 Eylul 2026, CDP ile 390/360/320).
aspect-ratio:7/5 karti sabit yuksekliğe kilitliyordu. Icerik sigmayinca
flex ogeleri default flex-shrink:1 ile eziliyor ve line-clamp'li
.oc-tanim overflow:hidden oldugu icin ICERIK YUKSEKLIGININ ALTINA
cokuyor. Olculen hasar:
320 px -> .oc-tanim 0 px (anlatim satiri TAMAMEN gorunmez),
"Öne çıkan" etiketi 0/20 px, kicker 9/20 px kesik
390 px -> Sehir Lokali'nin tanimi 42 px yerine 7 px
Yani reklamverenin anlatim satiri mobilde hic okunmuyordu; kusur yeni
degil, 5 yerlesimin hepsinde vardi ve kart "dolu" gorundugu icin
goze carpmiyordu.
min-height oranin ALAN REZERVASYONU islevini koruyor (CLS icin konmustu):
yukseklik artik metinden geliyor, metin HTML'de hazir, dolayisiyla gec
yuklenen gorsel yine kaymaya yol acmiyor.
DONER AYRI ELE ALINIYOR: oradaki kartlarin yuksekligi rayda ORTAK olmak
zorunda (flex:0 0 100%), yani karta min-height vermek yetmez -- cozum
ZINCIRIN TAMAMINI orandan cikarmak. */
.one-cikan{aspect-ratio:auto;min-height:min(68vw,260px);margin-bottom:16px}
/* DONERDE UC KATMAN BIRDEN: kutu, ray ve kartlar. .oc-doner orandan cikip
min-height'a geciyor; .oc-ray height:100% (tanimsiz yuksekligin %100'u
= auto) yerine acikca auto oluyor; kartlar height:100% birakirsa rayin
auto yuksekligine cozulemez, o yuzden height:auto + align-items:stretch.
Stretch olmazsa kartlar kendi icerigi kadar olur ve serit kayarken
kutu yuksekligi karttan karta ZIPLAR; stretch hepsini EN UZUN karta
esitliyor -- doner icin tek dogru davranis bu.
JS'e dokunulmadi: one-cikan.js yalnizca transform ile kaydiriyor,
yukseklik okumuyor (kontrol edildi, 233 satirda tek height gecmiyor). */
.oc-doner{aspect-ratio:auto;min-height:min(68vw,260px);margin-bottom:8px}
.oc-ray{height:auto;align-items:stretch}
.oc-doner .one-cikan{aspect-ratio:auto;min-height:0;height:auto;margin:0}
.oc-kontrol{margin-bottom:16px}
/* Mobilde scrim ALTTAN koyu: metin alta yaslaniyor, fotografin ust
yarisi gorunur kaliyor. */
.one-cikan .oc-scrim{background:linear-gradient(0deg,
color-mix(in srgb,var(--txt) 94%,transparent) 0%,
color-mix(in srgb,var(--txt) 74%,transparent) 58%,
color-mix(in srgb,var(--txt) 24%,transparent) 100%)}
.one-cikan .oc-govde{width:100%;justify-content:flex-end;padding:18px}
.one-cikan .oc-ad{font-size:clamp(24px,7vw,32px)}
.one-cikan .oc-tanim{margin-top:8px}
.one-cikan .oc-detaylar{gap:6px 14px;margin-top:10px}
.one-cikan .oc-adres{display:none}
.one-cikan .oc-cta{margin-top:13px;padding:10px 15px}
}
@media (prefers-reduced-motion:reduce){
.one-cikan .oc-cta,.one-cikan .oc-cta i{transition:none}
.one-cikan .oc-cta:hover,.one-cikan .oc-cta:hover i{transform:none}
/* Kart yine degisir ama ERIMEDEN: hareket kapatiliyor, islev degil.
DONUS DURMUYOR ve bu bilincli -- durdurmak, hareket duyarli okurda
slotu kalici olarak 1. reklamverene sabitlerdi, yani erisilebilirlik
ayari ticari bir ayrimciliga donusurdu. Ani gecis de "otomatik
guncellenen icerik" oldugu icin WCAG 2.2.2 hala duraklat dugmesini
istiyor; dugme her durumda duruyor. */
.oc-doner .one-cikan{transition:none}
.oc-doner .one-cikan.on{transition-delay:0s}
.oc-nokta{transition:none}
}
/* SSS: katlanabilir, kapali baslar. Insan icin 3 sade satir (bogmaz),
acan okur; LLM/Google DOM'dan okur. Native -> JS yok. */
.seo-sss{border-top:1px solid var(--line-soft);padding:30px 0 8px;max-width:760px}
.seo-sss-bas{font-size:17px;margin-bottom:14px}
.sss-q{border:1px solid var(--line);border-radius:var(--r-surface);
background:var(--card);margin-bottom:8px;overflow:hidden}
.sss-q summary{padding:14px 16px;cursor:pointer;font-weight:500;font-size:14px;
color:var(--txt);list-style:none;display:flex;align-items:center;gap:10px;
min-height:44px}
.sss-q summary::-webkit-details-marker{display:none}
.sss-q summary::before{content:"+";color:var(--accent);font-weight:600;
font-size:18px;flex:0 0 14px}
.sss-q[open] summary::before{content:"–"}
.sss-q summary:hover{color:var(--accent)}
.sss-q p{padding:0 16px 15px 40px;font-size:13.5px;color:var(--txt-2);
line-height:1.6;max-width:65ch}
/* ic link bolumu: diger kategoriler / mahalleler (crawl yolu) */
.seo-links{border-top:1px solid var(--line-soft);padding:34px 0 8px}
.seo-links h2{font-size:17px;margin-bottom:16px}
.seo-chips{display:flex;flex-wrap:wrap;gap:8px}
.seo-chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;
padding:9px 14px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-pill);color:var(--txt-2);min-height:40px;
transition:.15s var(--ease)}
.seo-chip:hover{border-color:var(--accent);color:var(--accent)}
.seo-chip.aktif{background:var(--accent-wash);border-color:#bcd4f5;
color:var(--accent-hi);font-weight:500}
.seo-chip .cdot{width:8px;height:8px;border-radius:var(--r-pill)}
.seo-chip .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
/* "Bu mahallede" pratik şerit: en çok kategoriler (sayfa içi bölüme atlar) +
nöbetçi eczane. Sakinin günlük ihtiyacını bir bakışta bulması için. */
.seo-gunluk{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:2px 0 20px}
.seo-gunluk .g-bas{font-size:11.5px;color:var(--muted);font-weight:600;
letter-spacing:.05em;text-transform:uppercase;margin-right:4px}
.g-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;
padding:8px 13px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-pill);color:var(--txt-2);min-height:38px;
transition:.15s var(--ease)}
.g-chip:hover{border-color:var(--accent);color:var(--accent)}
.g-chip .cdot{width:8px;height:8px;border-radius:var(--r-pill)}
.g-chip .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
/* nöbetçi: yeşil, ayrışır. #157a3a / #eaf7ef AA geçer */
.g-chip.g-neb{background:#eaf7ef;border-color:#bfe6cd;color:#157a3a;font-weight:500}
.g-chip.g-neb:hover{border-color:#157a3a;color:#157a3a}
.g-chip.g-neb i{font-size:15px}
@media(max-width:980px){
.seo-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.seo-list{grid-template-columns:1fr}
.seo-head{padding-top:28px;padding-bottom:4px}
}
/* ============================================================
FAZ A — yogunluk, iki kademe, "su an acik", bolum gezinme
============================================================
Tasarim ilkesi: bu bir VERI URUNU. Referans noktasi acilis
sayfasi degil, tarife cetveli/indeks. Sade demek bos demek
degil; her pikselin bilgi tasimasi demek.
Olculdu: eski duzende bir ekranda 6 kayit goruluyordu. */
/* --- 1. YOGUNLUK: golge yerine cizgi, dar dikey ritim --- */
.seo-card{padding:12px 14px;box-shadow:none}
.seo-card:hover{box-shadow:none;border-color:var(--line-strong)}
.seo-card h3{font-size:15px;font-weight:600;line-height:1.35;
letter-spacing:-.01em;margin:0;display:flex;flex-wrap:wrap;
align-items:center;gap:6px}
.seo-card .sub{margin-top:3px}
.seo-rows{margin-top:7px;display:grid;gap:3px}
/* --- 2. IKI KADEME --- */
/* Ince kayit (yalnizca ad+adres, veride %30): tek satir. Listede
kalir ama zengin kaydin yerini kapmaz. Gizlenmiyor -- kapsam
dogru, sadece agirligi farkli. */
.seo-card.ince{padding:9px 14px;background:transparent;
border-style:dashed;border-color:var(--line)}
.seo-card.ince h3{font-size:14px;font-weight:500}
.seo-card.ince .sub{font-size:11.5px;line-height:1.45}
/* --- 3. SU AN ACIK --- */
/* Renk yalnizca ANLAM tasir: yesil = acik, gri = kapali.
Dekoratif renk yok. */
.acik-rozet{font-size:12px;font-weight:600;padding:2px 7px; /* 11 px'ti; mobil denetimde (27.08.2026) sayfa basina ~920 ornekle
en yaygin kucuk yazi cikti. 12 px hem satir yuksekligini hem
rozet genisligini olculebilir sekilde bozmadi. */
border-radius:var(--r-pill);white-space:nowrap;line-height:1.6}
.acik-rozet.acik{background:#e7f5ec;color:#12683c}
.acik-rozet.kapali{background:var(--surface);color:var(--muted);font-weight:500}
@media (prefers-color-scheme:dark){
.acik-rozet.acik{background:#123424;color:#7ddba6}
}
/* "Sadece acik" filtresi acikken kapali/bilinmeyen kartlar gizlenir */
body.sadece-acik .seo-card:not([data-acik="1"]){display:none}
/* --- 4. ROZET TERSINE --- */
/* Eskiden her kartta "dogrulanmadi" vardi: 211 kez tekrarlanan uyari
sayfayi "hicbir seye guvenme" haline getiriyordu. Simdi yalnizca
DOGRULANMIS olan isaretleniyor. */
.seo-badge.dogru{background:#e7f0fb;color:#14539e;font-weight:600}
/* Tuzla Kart uye isyeri rozeti. Belediyenin kendi renk dunyasina degil
sitenin yesiline yakin durdu: 'dogrulandi' mavisiyle karismasin. */
/* --- 5. BOLUM GEZINME (yapiskan) --- */
.bolum-nav{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;
gap:6px;padding:10px 0;margin-bottom:18px;
background:var(--bg);border-bottom:1px solid var(--line)}
.bolum-nav a,.acik-filtre{display:inline-flex;align-items:center;gap:6px;
padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-pill);
font-size:13px;font-weight:500;color:var(--fg);text-decoration:none;
background:var(--card);cursor:pointer;font-family:inherit}
.bolum-nav a:hover,.acik-filtre:hover{border-color:var(--line-strong)}
.bolum-nav a .n{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.acik-filtre[aria-pressed="true"]{background:#12683c;color:#fff;border-color:#12683c}
.seo-bolum{scroll-margin-top:60px}
@media (max-width:720px){
.bolum-nav{gap:5px;padding:8px 0}
.bolum-nav a,.acik-filtre{font-size:12px;padding:4px 9px}
}
/* KOK SEBEP: ortak.css'te genel `section{padding:88px 0}` var -- acilis
sayfasi bolumleri icin yazilmis. Veri bolumlerimiz de oldugu
icin her bolume 176px olu bosluk biniyordu; 8 bolumlu bir kategori
sayfasinda ~1.400px hicbir sey. "Acilis sayfasi gibi degil, referans
eseri gibi" ilkesinin tek satirlik karsiligi bu. */
.seo-bolum{padding:0}
.bolum-nav + .seo-bolum{margin-top:4px}
.seo-bolum-bas{margin:0 0 10px}
.seo-head + .wrap > .bolum-nav{padding-top:14px}
/* Ham saat metni JS ile "Bugun ..."e donusene kadar tek satirda kalsin. */
.seo-card .r.saat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ============================================================
FAZ B — EDITORYAL KAYIT + CIZGI DILI (2026-08-22)
============================================================
Referans: monocle.com/travel-guides. Oradan alinan SEY TASARIM
DEGIL, AYRIM: Monocle'da rehber metni ile kayit listesi ayri iki
tipografik kayitta (register) yazilir. Bizde ikisi de ayni 15px
sans idi; 31 sayfa tek sablondan ciktigi icin hepsi ayni goruntuyu
veriyordu -- sikayet edilen "monotonluk" buydu, renk sorunu degil.
ALINMAYAN: Monocle'in ferah dikey ritmi. Onlarin bir sayfada 10
kaydi var, bizim 866. Ayni havayi vermek 55px/kayit yogunlugunu
geri alirdi (bkz. FAZ A). Editoryal kayit YALNIZCA sayfa girisine
uygulandi; listeler siki kaliyor. */
/* --- 1. EDITORYAL KAYIT: yalnizca sayfa girisi --- */
/* Serif AGDAN INDIRILMIYOR -- sistem yigini. Webfont LCP'ye bedel
yazardi; buradaki kazanc gorsel ayrim, gorsel ayrim icin sistem
serif'i yeterli. */
.seo-head h1,
.seo-head .lede{
font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
}
.seo-head h1{font-weight:500;letter-spacing:-.02em;line-height:1.15}
.seo-head .lede{font-size:16.5px;line-height:1.62;max-width:62ch;color:var(--txt-2)}
/* Eyebrow: Monocle'in bolum etiketi. Sayfanin TIPINI soyler, h1'i
tekrar etmez. */
.seo-eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin:0 0 9px}
/* --- 2. CIZGI DILI: kutu yerine ince cizgi --- */
/* Kutu + golge + kose yaricapi alt alta 200 kez tekrarlaninca gorsel
gurultu oluyordu. Basili indekste kayitlari kutu degil CIZGI ayirir.
Yan fayda: kart dolgusu (12px) ve kenarlik gidince yogunluk artiyor,
yani bu degisiklik FAZ A ile ayni yone cekiyor. */
.seo-list{gap:0 34px}
/* Cizgi rengi --line (#e7dfd1); --line-soft (#efe9dd) zemin (#f5f1e9)
uzerinde neredeyse gorunmuyordu -- kum paleti ikisini cok yakin tutuyor. */
.seo-card{background:transparent;border:0;border-radius:0;
border-bottom:1px solid var(--line);
padding:11px 0 10px;box-shadow:none;
transition:background-color .13s var(--ease)}
/* Kutu gidince hover geri bildirimi de gidiyordu; yerine hafif zemin.
Negatif yatay dolgu: zemin metnin biraz disina tassin. */
.seo-card:hover{border-color:var(--line-strong);background:var(--surface);
box-shadow:none;margin:0 -10px;padding-left:10px;padding-right:10px}
.seo-card.ince{background:transparent;border:0;
border-bottom:1px dotted var(--line);padding:8px 0 7px}
.seo-card.ince:hover{background:var(--surface);border-bottom-style:dotted}
/* --- 3. MAHALLE: italik, once gelir --- */
/* Monocle kayit imzasi: **Ad**, *semt*. Bizde mahalle her kayitta VAR,
sayfada yoktu -- bedava kazanc. Link degil (bkz. sayfa_uret.js kart). */
.seo-card .sub .mah{font-style:italic;color:var(--txt-2);font-weight:500}
@media(max-width:600px){
.seo-list{gap:0}
.seo-head .lede{font-size:15.5px}
}
/* ============================================================
FAZ C — CERCEVE + SUTUN AKISI (2026-08-22)
============================================================
FAZ B'de kutulari kaldirip cizgiye gectik; yogunluk kazandi ama
yapi fazla kacti: 243 kayit tek bir "duvar" gibi okunuyordu.
Cizgi dogru karardi, EKSIK OLAN sey per-kayit kutusu degil
GRUP CERCEVESI idi.
Iki duzeltme:
1) CERCEVE GRUP DUZEYINDE. Her tur ("Eczane 116") kendi paneli.
Beyin once 8 kutu gorur, sonra kutunun icini tarar -- 243
esdeger satir yerine. Kayit satirlari cizgi kalir; kutu geri
GELMEZ (243 kutu zaten sorunun kendisiydi).
2) SUTUN AKISI SATIR YERINE SUTUN. Onceden grid satir-yonlu
akiyordu: 1 2 3 / 4 5 6. Alfabetik siralanmis icerikte goz
zikzak cizmek zorundaydi. CSS multi-column ile akis 1 4 7 /
2 5 8 -- yani sutunun icinde YUKARIDAN ASAGI, basili telefon
rehberi gibi. Ayni piksel, cok daha kolay tarama. */
.seo-bolum{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--r-surface);
padding:16px 20px 4px;
margin-bottom:20px;
}
.seo-bolum-bas{
margin:0;
padding-bottom:11px;
border-bottom:1px solid var(--line);
}
/* Panel icinde baslik yapiskan degil: yapiskan olan ust seviyedeki
.bolum-nav; iki yapiskan katman ust uste bogucu olurdu. */
.seo-list{
display:block; /* multi-column grid ile calismaz */
columns:3;
column-gap:34px;
padding:12px 0 0;
}
.seo-card{
display:block; /* flex, sutun akisini bozar */
break-inside:avoid; /* kayit iki sutuna bolunmesin */
-webkit-column-break-inside:avoid;
}
/* Hover zemini sutun tasmasi yapmasin diye yatay negatif marj kalkti;
yerine ic dolgu. */
.seo-card:hover{margin:0;padding-left:8px;padding-right:8px}
/* Tek bolumluk sayfada (bolum basligi yok) liste yine cerceveli dursun */
.seo-head + .wrap > .seo-list{
background:var(--card);border:1px solid var(--line);
border-radius:var(--r-surface);padding:14px 20px 4px;
}
@media(max-width:980px){
.seo-list{columns:2}
.seo-bolum{padding:14px 16px 4px}
}
@media(max-width:600px){
.seo-list{columns:1}
}
/* --- TASMA DUZELTMESI ------------------------------------------------
Vaka: "Uzm.Dt. Büşra Güven Hepyükselen Ortodonti Uzmanı" karti 361px
sutunda 567px yer kapliyor ve YAN SUTUNUN uzerine biniyordu.
Kok sebep min-width:auto. Izgara ve flex ogelerinin varsayilan asgari
boyutu "min-content"tir, yani icerikten daha dar OLAMAZLAR. Saat satiri
`white-space:nowrap` tasidigi icin min-content'i tum haftalik dizeydi
("Pazartesi: 10:00-17:00 | Sali: ..."), satir da o kadar genisliyordu.
Ayni kuralda duran `overflow:hidden` + `text-overflow:ellipsis` hic
devreye giremiyordu -- kisaltacak bir daralma yoktu.
min-width:0 daralmaya izin verir; ellipsis boylece calisir. Hata
multicol'dan ONCE de vardi (izgara ogesi de auto'dur), sutun akisi
yalnizca gorunur hale getirdi. */
.seo-rows .r{min-width:0}
.seo-rows .r span,.seo-rows .r a{min-width:0}
/* Cok uzun tek parca metin (adres, uzun unvan) satiri kirsin, tasmasin. */
.seo-card{overflow-wrap:break-word}
.seo-card h3{min-width:0}
/* ============================================================
REHBER YAZISI (2026-08-22)
============================================================
Ucuncu sayfa tipi. Dizin sayfasi KAPSAM verir (siki, utility kayit);
rehber HUKUM verir -- okunacak metin, o yuzden bastan sona EDITORYAL
kayitta ve tek sutun, 68 karakterlik olcu. Ayni siteyi iki farkli
isle konusturmanin yolu bu. */
.rehber .seo-head{padding-bottom:0}
.rehber-meta{font-size:12.5px;color:var(--muted);margin:10px 0 0;
letter-spacing:.02em}
.rehber-govde{display:grid;grid-template-columns:minmax(0,1fr) 300px;
gap:52px;align-items:start;padding:26px 0 10px}
.rehber-govde article{max-width:68ch;font-family:Georgia,"Iowan Old Style","Times New Roman",serif}
.rehber-govde article p{font-size:17px;line-height:1.72;color:var(--txt);margin:0 0 17px}
.rehber-govde article h2{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
font-size:23px;font-weight:600;letter-spacing:-.015em;
margin:38px 0 14px;scroll-margin-top:70px}
.rehber-govde article strong{font-weight:700}
.rehber-govde article ul{margin:0 0 17px;padding-left:1.3em}
.rehber-govde article li{font-size:17px;line-height:1.72;color:var(--txt);
margin-bottom:7px}
.rehber-govde article li::marker{color:var(--muted)}
.rehber-govde article a{color:var(--accent);text-decoration:underline;
text-underline-offset:2px;text-decoration-thickness:1px}
.rehber-govde article a:hover{text-decoration-thickness:2px}
/* ANSWER-FIRST kutusu (AEO). Yazinin girisi atmosferle basliyor -- edebi
olarak dogru ama arama/LLM tarafinda ilk 50 kelimede DOGRUDAN cevap
isteniyor. Yazara dokunmadan, olgulari ustte ozetliyoruz. */
.rehber-ozet{background:var(--card);border:1px solid var(--line);
border-radius:var(--r-surface);padding:18px 22px 14px;margin:0 0 30px;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.rehber-govde article .rehber-ozet h2{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:12px;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
margin:0 0 12px}
.rehber-ozet dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
/* MAHALLE KUNYESI. Gorsel dili .rehber-ozet ile ayni ama mahalle sayfasi
.rehber-govde icinde degil; oradaki dt/dd kurallari article'a scope'lu.
Bu yuzden kendi kendine yeten ayri sinif -- mevcut kurallara dokunulmadi. */
.mahalle-kunye{background:var(--card);border:1px solid var(--line);
border-radius:var(--r-surface);padding:18px 22px 14px;margin:4px 0 26px;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mahalle-kunye h2{font-size:12px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.mahalle-kunye dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
.mahalle-kunye dt{font-size:13px;color:var(--muted);white-space:nowrap}
.mahalle-kunye dd{font-size:14px;margin:0;color:var(--txt)}
.mahalle-kunye .kunye-not{font-size:12px;color:var(--muted);line-height:1.5;
margin:14px 0 0;padding-top:11px;border-top:1px solid var(--line)}
@media(max-width:520px){
.mahalle-kunye{padding:15px 16px 12px}
.mahalle-kunye dl{grid-template-columns:1fr;gap:2px 0}
.mahalle-kunye dt{margin-top:8px}
}
.rehber-govde article .rehber-ozet dt{font-size:13px;color:var(--muted);white-space:nowrap}
.rehber-govde article .rehber-ozet dd{font-size:14px;margin:0;color:var(--txt)}
/* YMYL UYARISI. Saglik/hukuk/finans konulu yazilarda, govdeden ONCE ve
goz kacirmayacak sekilde. Kirmizi degil -- panik degil, sinir cizen bir
not. Sol kenardaki serit "bu, yazinin sesi degil, kural" diyor. */
.rehber-uyari{border-left:3px solid var(--accent);background:var(--accent-wash,#eaf1fb);
border-radius:0 var(--r-surface) var(--r-surface) 0;
padding:14px 18px;margin:0 0 26px;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.rehber-govde article .rehber-uyari p{font-family:inherit;font-size:13.5px;
line-height:1.6;color:var(--txt-2);margin:0}
.rehber-govde article .rehber-uyari strong{color:var(--txt)}
/* Rehber icindeki veriden beslenen liste: dizin diliyle, editoryal degil */
.rehber .seo-links h2 .say{color:var(--muted);font-weight:400;font-size:14px;
font-variant-numeric:tabular-nums}
.liste-aciklama{font-size:13.5px;color:var(--muted);line-height:1.6;
max-width:62ch;margin:-8px 0 4px}
/* KAYNAK KUNYESI. Resmi bir kaynaktan derlenen sayfalarda ZORUNLU:
hem okura "bu bilgi nereden" der hem de SON KONTROL tarihini gosterir.
Fiyat kutusuyla ayni gerekce -- bayatlayan bilgi tarihiyle sunulur. */
.rehber-kaynak{border:1px dashed var(--line-strong);border-radius:var(--r-surface);
padding:16px 20px 12px;margin:30px 0 8px;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.rehber-govde article .rehber-kaynak h2{font-family:system-ui,-apple-system,
"Segoe UI",Roboto,sans-serif;font-size:12px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.rehber-govde article .rehber-kaynak p{font-family:inherit;font-size:13.5px;
line-height:1.6;color:var(--txt-2);margin:0 0 8px}
.rehber-govde article .rehber-kaynak .kaynak-tarih{font-size:11.5px;color:var(--muted);
margin:0;border-top:1px solid var(--line);padding-top:9px}
/* FIYAT KUTUSU. Bilerek semadan ayri: bayatlayan veri, tarih damgasiyla
ve yalnizca sayfada duruyor (bkz. sayfa_uret.js). Gorsel olarak da
"bu bilgi bir tarihe bagli" demeli -- o yuzden kutulu ve damgali. */
.rehber-fiyat{background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-surface);padding:18px 22px 14px;margin:30px 0 8px;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.rehber-govde article .rehber-fiyat h2{font-family:system-ui,-apple-system,
"Segoe UI",Roboto,sans-serif;font-size:12px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.rehber-fiyat dl{display:grid;grid-template-columns:1fr auto;gap:7px 20px;margin:0}
.rehber-govde article .rehber-fiyat dt{font-size:14px;color:var(--txt-2)}
.rehber-govde article .rehber-fiyat dd{font-size:14px;margin:0;color:var(--txt);
font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.rehber-govde article .fiyat-not{font-size:11.5px;color:var(--muted);
line-height:1.5;margin:13px 0 0;border-top:1px solid var(--line);padding-top:10px}
/* Kunyedeki uyari: veri celiskili oldugunda kullanicinin gormesi gereken not */
.nap-uyari{display:block;font-size:11.5px;color:var(--muted);
font-style:italic;line-height:1.45;margin-top:3px}
/* NAP kunyesi: yazinin iddiasi degil, KAYITTAN gelen olgu. Bu yuzden
editoryal serif degil, dizinle ayni utility dilinde. */
.rehber-nap{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;position:sticky;top:16px;background:var(--card);
border:1px solid var(--line);border-radius:var(--r-surface);padding:18px 20px}
.rehber-nap h2{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;margin:0 0 14px;letter-spacing:-.015em}
.rehber-nap dl{display:grid;gap:3px;margin:0 0 16px}
.rehber-nap dt{font-size:11px;color:var(--muted);text-transform:uppercase;
letter-spacing:.06em;margin-top:9px}
.rehber-nap dd{margin:0;font-size:13.5px;color:var(--txt-2);line-height:1.5}
.rehber-nap dd a{color:var(--accent)}
.rehber-nap .btn{width:100%;justify-content:center}
.rehber-nap-not{font-size:11.5px;color:var(--muted);line-height:1.5;margin:12px 0 0}
.rehber-nap-not a{color:var(--muted);text-decoration:underline}
/* Hub'a donus linki: hub-and-spoke'un CIFT YONLU olmasi icin. Basligin
yaninda durur, baslikla yarismasin diye kucuk ve aksan renginde. */
.hub-geri{font-size:13px;font-weight:500;color:var(--accent);
white-space:nowrap;margin-left:10px}
.hub-geri:hover{text-decoration:underline;text-underline-offset:3px}
.seo-links h2 .hub-geri{font-weight:500}
/* Ana sayfadaki rehber bolumu basligi + "tumu" linki bir satirda */
.rehber-bas{display:flex;align-items:baseline;justify-content:space-between;
gap:16px;flex-wrap:wrap}
.rehber-bas .hub-geri{margin-left:0}
#rehber-blok .rehber-kartlar{margin-top:26px}
#rehber-blok .lede{margin-top:8px}
/* Kategori/mahalle sayfasindan rehbere GERI BAG karti */
.seo-rehber{border-top:1px solid var(--line-soft)}
.rehber-kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.rehber-kart{display:block;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-surface);padding:16px 18px;
transition:border-color .16s var(--ease),transform .16s var(--ease)}
.rehber-kart:hover{border-color:var(--accent);transform:translateY(-2px)}
.rk-etiket{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.rk-bas{display:block;font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
font-size:17px;font-weight:600;line-height:1.3;color:var(--txt);margin-bottom:6px}
.rk-ozet{display:block;font-size:13px;color:var(--muted);line-height:1.55}
/* ANA SAYFA SERIDI: numarali mekan yazilari.
Numara TALEP sirasini gosteriyor (bkz. sayfa_uret.js ANA_SERIT). Karta
girmiyor, kartin ustune tasiyor -- gozle taranabilsin ama basligi
itmesin. list-style yerine kendi 'i: tarayicilar arasi hizalama
ve punto kontrolu icin. */
/* SUTUN SAYISI SABIT, auto-fit DEGIL.
auto-fit ara genisliklerde 3 sutun uretebiliyor ve 8 kart 3+3+2 olarak
diziliyordu -- son satir yarim kaliyor. Kirilimlar 8'i tam bolen
sayilara sabitlendi: 4 / 2 / 1. Kart sayisini degistirirsen 4'un kati
tut (bkz. sayfa_uret.js ANA_SERIT). */
.rehber-serit{display:grid;grid-template-columns:1fr;
gap:14px;list-style:none;margin:0;padding:0}
@media(min-width:620px){.rehber-serit{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.rehber-serit{grid-template-columns:repeat(4,1fr)}}
.rehber-serit>li{display:block;margin:0}
.rehber-serit .rehber-kart{position:relative;height:100%;padding-top:20px}
.rk-no{position:absolute;top:12px;right:16px;
font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
font-size:30px;line-height:1;font-weight:600;
color:var(--line);letter-spacing:-.02em;pointer-events:none}
.rehber-serit .rehber-kart:hover .rk-no{color:var(--accent);opacity:.55}
.rehber-serit .rk-etiket{padding-right:38px}
.rehber-serit .rk-bas{padding-right:8px}
/* /rehber hub'inda tema bolumlerine atlama seridi */
.kume-atlama{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:900px){
/* `1fr` DEGIL `minmax(0,1fr)`: `1fr`in alt siniri min-content'tir, yani
genis bir tablo ya da nowrap bir hucre track'i kabin disina itiyordu.
320 px'te olculdu: /tuzla-otobus-hatlari 213 px, /tuzla-posta-kodlari
46 px yatay kayma. Sayfa govdesi degil IZGARA tasiyordu. */
.rehber-govde{grid-template-columns:minmax(0,1fr);gap:30px}
.rehber-nap{position:static}
.rehber-govde article p{font-size:16.5px}
/* Kunye terimleri mobilde sarmali; nowrap 344 px min-content uretiyordu. */
.rehber-govde article .rehber-ozet dt{white-space:normal}
}
/* KUNYE ("Kisaca") IZGARASI -- olculen ikinci tasma kaynagi.
`auto 1fr`: ilk sutun min-content kadar genisliyor, ikincinin alt siniri
da min-content. 320 px'te DL kabin disina tasiyordu ve tasmanin kaynagi
tablo degil buydu (Chrome mobil emulasyon, 27.08.2026):
/tuzla-parklari 348 px · /tuzla-universiteleri 281 px · 9 sayfa daha.
560 px altinda terim/deger alt alta yigiliyor -- dar ekranda zaten
okunakli olan bicim bu. 560-900 arasi iki sutun kalir ama minmax(0,...)
ile min-content zorlamasi kalkar. */
@media(max-width:900px){
.rehber-ozet dl{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
}
@media(max-width:560px){
.rehber-ozet dl{grid-template-columns:minmax(0,1fr);gap:0}
.rehber-govde article .rehber-ozet dt{margin-top:9px}
.rehber-ozet dl>dt:first-child{margin-top:0}
}
/* --- Kategori temsili gorseli --- */
/* width/height HTML'de sabit (960x400) -> CLS yok. loading=lazy: gorsel
fold altinda, LCP'yi etkilemesin. */
.kat-gorsel{margin:18px 0 0;max-width:100%}
.kat-gorsel img{width:100%;height:auto;aspect-ratio:12/5;object-fit:cover;
border-radius:var(--r-surface);border:1px solid var(--line);display:block}
.kat-gorsel figcaption{font-size:11.5px;color:var(--muted);margin-top:6px}
.kat-gorsel figcaption a{color:var(--muted);text-decoration:underline}
/* ---- rehber govdesindeki tablolar ----
TOKI yazilarinda etap/donem karsilastirmasi tablo istiyor; sitede tablo
stili YOKTU ve tarayici varsayilaniyla sikisik goruniyordu.
Mobilde tasmasin diye sarmalayici degil, tablonun kendisi kayiyor:
display:block + overflow-x, boylece ek HTML gerekmiyor. */
.rehber-govde table{
width:100%;border-collapse:collapse;margin:20px 0;
font-size:15px;display:block;overflow-x:auto;
}
.rehber-govde thead th{
text-align:left;font-weight:600;color:var(--txt-1);
background:var(--surface);border-bottom:2px solid var(--line);
padding:10px 14px;white-space:nowrap;
}
.rehber-govde tbody td{
padding:10px 14px;border-bottom:1px solid var(--line);
color:var(--txt-2);vertical-align:top;
}
.rehber-govde tbody tr:last-child td{border-bottom:none}
.rehber-govde tbody td:first-child{color:var(--txt-1);font-weight:500;white-space:nowrap}
/* ---- VERI TABLOSU: firma listeleri (sertifika/kabiliyet/ilaclama) ----
Yukaridaki genel kural ilk sutuna white-space:nowrap veriyor. Bu, iki-uc
kelimelik etap adlarinda dogru; ama firma listelerinde ilk sutun bir UNVAN
("Tuzla Hasere Ilaclama, Bocek Ilaclama ve Dezenfeksiyon - Biyotek
Ilaclama") ve nowrap ile tek satirda kaliyor: tablo kapsayicidan tasiyor,
yatay kaydirma varken bile kullanici ilk ekranda yalnizca ilk sutunu
goruyor -- "yarisi var yarisi yok" gorunumu (bildirildi 10.09.2026).
Bu tablolarda unvan SARILIR, sayisal/kisa sutunlar sarilmaz. */
.rehber-govde .veri-tablo tbody td:first-child{
white-space:normal;overflow-wrap:anywhere;min-width:13rem;line-height:1.45;
}
.rehber-govde .veri-tablo td,.rehber-govde .veri-tablo th{vertical-align:top}
/* Telefon ve puan kirilmasin, ustelik rakamlar hizali dursun. */
.rehber-govde .veri-tablo td[data-tip="tel"],
.rehber-govde .veri-tablo td[data-tip="puan"]{
white-space:nowrap;font-variant-numeric:tabular-nums;
}
.rehber-govde .veri-tablo td[data-tip="puan"] small{color:var(--muted);font-weight:400}
/* Cok sutunlu belge tablolarinda hucreler dar ekranda okunabilir kalsin. */
@media(max-width:560px){
.rehber-govde .veri-tablo{font-size:14px}
.rehber-govde .veri-tablo thead th,.rehber-govde .veri-tablo tbody td{padding:8px 10px}
.rehber-govde .veri-tablo tbody td:first-child{min-width:11rem}
}
/* Tablo altindaki kaynak/uyari notu. */
.rehber-govde .tablo-not{font-size:13px;color:var(--muted);margin-top:-8px}
/* ---- ULASIM: canli arac tablosu + kalkis saatleri ----
Canli blok once ile basiyordu: dort alan (arac, yon, durak, saat)
tek satirda noktalarla ayriliyor ve okunmuyordu.
NOWRAP KALDIRILDI (olculdu 31.08.2026, 390px): "hucreler bolunmesin" diye
`tbody td{white-space:nowrap}` yazmistim; sonucu "CEVIZLI PERONLAR"i tek
satira zorlamak oldu ve tablo 455px'ten 518px'e CIKTI. Basliklar da nowrap
(ustteki thead kurali) ve asgari genisligi onlar belirliyordu:
"En yakin durak" 146px + "Konum saati" 126px.
Olculen: nowrap'siz + kisa baslik + dar mobil padding -> tam 390px.
Basliklar JS'te kisaltildi (Durak / Saat); burada yerlesim var. */
.canli-tablo .yok{color:var(--muted);font-style:italic}
.canli-tablo tbody td:first-child{font-variant-numeric:tabular-nums}
@media (max-width:520px){
.canli-tablo thead th,.canli-tablo tbody td{padding:9px 8px}
.canli-tablo thead th{font-size:13px}
}
/* Kalkis saatleri: rakam dizisi. Sabit genislikli rakam hizalamayi
duzeltiyor, satir araligi yuz kadar saatin blok halinde okunmasini. */
.hat-saat{display:block;margin-top:4px;line-height:2;
font-variant-numeric:tabular-nums;color:var(--txt-2)}
/* padding-left 20px'ti ve IKI HANELI numara soldan kirpiliyordu:
92 duraklik listede 10. maddeden sonra '0.', '1.' gorunuyordu
(olculdu 31.08.2026, 390px). Uc haneye de yetecek kadar. */
.hat-duraklar{margin:12px 0 22px;padding-left:34px;line-height:1.75}
.hat-duraklar li{margin-bottom:4px}
/* Tuzla DISINDAKI duraklar: sirayi bozmadan geri plana cekiliyor.
Liste guzergahin tamami (KM12'de 45 durak, 30'u Tuzla) -- ilcedeki
okur kendi duragini once gormeli ama guzergah eksiksiz kalmali. */
.hat-duraklar .d-ilce{color:var(--muted);font-size:.92em}
/* ---- LISTE FILTRESI (ortak.js -> listeFiltresi) ----
Kutu, bolum ciplerinin ICINDE duruyor: nav yapiskan oldugu icin filtre de
liste boyunca ekranda kaliyor. Bu yuzden kendi arka plani/golgesi yok --
navin cizgi diline katiliyor, ustune yeni bir katman koymuyor. */
.liste-filtre{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.lf-kutu{display:inline-flex;align-items:center;gap:6px;
padding:4px 11px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
background:var(--card);cursor:text}
.lf-kutu i{color:var(--muted);font-size:14px;line-height:1}
.lf-in{border:0;outline:0;background:transparent;font:inherit;font-size:13px;
color:var(--fg);width:200px;padding:1px 0}
.lf-in::placeholder{color:var(--muted)}
.lf-in::-webkit-search-cancel-button{display:none}
.lf-kutu:focus-within{border-color:var(--fg)}
.lf-temizle{border:1px solid var(--line);background:var(--card);color:var(--muted);
border-radius:var(--r-pill);padding:4px 10px;font:inherit;font-size:12.5px;
cursor:pointer}
.lf-temizle:hover{border-color:var(--line-strong);color:var(--fg)}
.lf-durum{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Eslesmeyen kart. `hidden` yerine sinif: "su an acik" filtresi de ayni
kartlari display:none ile gizliyor, iki filtre birbirini ezmesin. */
.seo-card.lf-gizli{display:none}
/* Duz listede (rehber yazisi) nav yok; kutu listenin ustunde tek basina. */
.liste-filtre.yalin{display:flex;margin:0 0 14px}
/* Cip sarmalayicisi (ortak.js). MASAUSTUNDE GORUNMEZ: display:contents
cocuklari dogrudan .bolum-nav'in flex cocugu yapar, yani mevcut yerlesim
birebir korunur. Yalnizca mobilde gercek bir kutuya donusur. */
.bn-cipler{display:contents}
/* --- DOKUNMA ERGONOMISI: olcut GENISLIK DEGIL, GIRDI TURU ---
Once bu kurallar `max-width:720px` icindeydi ve iPad mini (768px) esigin
DISINDA kaliyordu: dokunmatik bir cihazda 22px hedef ve 13px yazi
olculdu. Parmak ekran genisligine gore incelmiyor; dogru sorgu
pointer:coarse.
1) iOS Safari, font-size 16px'in ALTINDAKI alana odaklaninca sayfayi
buyutuyor. Kutu 13px idi: kullanici aramaya baslar baslamaz sayfa
zipliyor, geri ciktiginda liste yerinde durmuyordu.
2) Dokunma hedefi: WCAG 2.2 AA asgarisi 24px, parmak icin pratik olcu 44px. */
@media (pointer:coarse){
.lf-kutu{min-height:44px}
.lf-in{font-size:16px}
.lf-temizle{min-height:44px;padding:4px 12px}
/* KAYIT CIPASI (#) dokunma alani. Olculdu: 11x17 px, sayfa basina 1.547
ornek -- WCAG 2.2 hedef boyutu (24x24) altinda. Gorsel boyut AYNI
kaliyor; buyuyen yalnizca vurus alani, cunku ::after mutlak konumlu ve
akisi etkilemiyor. Baslik metni link DEGIL, o yuzden genisleyen alan
baska bir hedefin tiklamasini calmaz. */
.kayit-bag{position:relative}
/* SAGA DEGIL SOLA buyur. Ilk yazimda ::after ortalanmisti ve cipanin
sagina ~6,5 px tasiyordu -- /tuzla-dugun-salonlari 320 px'te 6 px
yatay kaydi. Tarama bunu GORMEMISTI cunku getBoundingClientRect
sozde-elemani saymaz; olcum ancak scrollWidth ile yakalandi.
`right:0` ile alan cipanin sag kenarini asmaz. */
/* 16.09.2026 (Sprint 1): 24px WCAG 2.2 tabaniydi; mobilde parmak hedefi
icin 44px. Gorsel boyut yine degismiyor, ::after akis disinda. */
.kayit-bag::after{content:"";position:absolute;
top:50%;right:0;transform:translateY(-50%);
width:44px;height:44px}
/* KUNYE SATIRLARINDA TELEFON VE YOL TARIFI. Olculdu: telefon 126x17,
"Yol tarifi" 49x19 -- ikisi de sayfanin ASIL eylemi. Dikey dolgu
satir yuksekligini artirir, yerlesimi bozmaz. */
.seo-rows .r a[href^="tel:"],
.seo-rows .r a[href*="maps"]{display:inline-block;padding:13px 0;line-height:1.2}
}
@media (max-width:720px){
/* --- MOBIL YERLESIM ---
Cip seridi sarinca 558px oluyordu (iPhone SE'de ekranin %84'u; yapiskan
oldugu icin kaydirdikca da oyle kaliyor, listeye 109px kaliyordu).
Simdi tek satir ve yatay kayiyor: nav 108px'e indi, kutu tam genislikte
ve her zaman erisilebilir. */
.liste-filtre{width:100%;gap:6px}
.lf-kutu{flex:1;min-width:0;padding:4px 14px}
.lf-in{width:auto;flex:1;min-width:0}
.lf-durum{width:100%;order:3}
.bn-cipler{display:flex;width:100%;gap:5px;flex-wrap:nowrap;
overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;padding-bottom:2px}
.bn-cipler::-webkit-scrollbar{display:none}
.bolum-nav a,.acik-filtre{white-space:nowrap;flex:none}
}
/* Komsu ilce nobetci seridi. Ayri sayfa acmanin gerekcesi olcumdu
(Tuzla'dan pendik 1.300 / gebze 720 / cayirova 590 / darica 480 ilce-ici);
kume ici cift yonlu baglanti da burada duruyor. */
.neb-komsu{border-top:1px solid var(--line);margin-top:26px;padding-top:20px;
display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.neb-komsu h2{font-size:14px;font-weight:600;color:var(--txt-2);
margin:0 6px 0 0;width:100%}
/* REHBER YAZISININ FOTOGRAFI (2026-08-26)
Ilk gercek mekan fotografi bu sayfayla geldi (Marina Aquapark, havadan).
max-width 560: gorsel DIKEY (700x876). Govde genisliginde bassaydi mobilde
ekranin bir bucuk katini kaplardi, masaustunde de metin sutununu bolerdi.
Oran aspect-ratio ile degil width/height ozniteliginden geliyor --
tarayici yeri onceden ayirsin, gorsel yuklenince metin ziplamasin. */
.rehber-gorsel{margin:22px 0;max-width:560px}
.rehber-gorsel img{width:100%;height:auto;display:block;
border-radius:var(--r-md,10px);border:1px solid var(--line)}
.rehber-gorsel figcaption{font-size:12.5px;color:var(--muted);margin-top:7px;
line-height:1.45}
/* Veri guncelleme damgasi (kategori + mahalle sayfalari).
Bu sayfalar sitenin en cok degisen sayfalariydi ve hicbir guncellik
isareti tasimiyordu. Tarih BUILD tarihi degil, veriyi besleyen
dosyalarin son commit tarihi -- sahte tazelik uretmesin diye. */
.seo-veri-tarih{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
font-size:12.5px;color:var(--muted);margin:10px 0 0}
.seo-veri-tarih i{font-size:14px;color:var(--accent)}
.seo-veri-tarih time{font-variant-numeric:tabular-nums}
.seo-veri-tarih a{color:var(--muted);text-decoration:underline;
text-underline-offset:2px}
.seo-veri-tarih a:hover{color:var(--accent)}
/* AYIRT EDİCİ SATIR. Bir alt sayfanın en başında "burası hangi sayfa değil"
diyen tek cümle. keyword_map (27.08.2026) TOKİ pillar'ı ile Aydınlı/Orhanlı
alt sayfalarının GSC'de üç sorguda birlikte göründüğünü buldu; okur da
hangisine düştüğünü anlamıyordu. Uyarı kutusu değil — alarm değil, yön
tarifi; o yüzden daha sakin. */
.seo-govde p.ayirt{
margin:0 0 1.1rem;
padding:.6rem .85rem;
border-left:3px solid var(--line);
background:var(--surface);
border-radius:0 8px 8px 0;
font-size:.94rem;
color:var(--ink-2,inherit);
}
/* ─── MAHALLE DUYURUSU (mah-duyuru) ────────────────────────────────────────
Tarihli, ATIFLI blok: kaynağı resmî bir sayfa olmayan ama mahalleyi
doğrudan ilgilendiren bilgi. Kart kasıtlı olarak liste kartlarından
AYRI görünüyor -- okur bunun bir dizin satırı değil, birinin duyurduğu
bir bilgi olduğunu ilk bakışta anlasın. Sol kenardaki aksan şeridi o
ayrımın tek taşıyıcısı; ikinci bir renk eklenmedi.
Facebook'tan #capa ile inen okur doğrudan buraya düşüyor, o yüzden
scroll-margin-top nav yüksekliği kadar. */
.mah-duyuru{
background:var(--card); border:1px solid var(--line);
border-left:3px solid var(--accent);
border-radius:12px; padding:1rem 1.15rem; margin:0 0 1.1rem;
scroll-margin-top:80px;
}
.md-ust{display:flex; align-items:center; gap:6px; flex-wrap:wrap;
margin:0 0 .3rem; font-size:.78rem; font-weight:600; letter-spacing:.02em;
text-transform:uppercase; color:var(--muted)}
.md-ust .ik{width:16px; height:16px; color:var(--accent)}
.md-yeni{background:var(--accent-wash); color:var(--accent-hi);
border-radius:var(--r-pill); padding:1px 8px; font-size:.72rem;
letter-spacing:0; text-transform:none}
.mah-duyuru h2{margin:0 0 .3rem; font-size:1.06rem}
/* Kaynak satırı gövdeden ÖNCE ve görünür: iddia bize ait değil, ona ait. */
/* DUYURUYU YAPANIN FOTOGRAFI. Yuvarlak ve kucuk: bir haber gorseli degil,
kaynak satirinin parcasi. `float` ile metin yaninda akiyor -- ayri bir
satir kaplamasi 72 px'lik bir goruntu icin savurganlik olurdu.
aspect-ratio + sabit olcu: gec yuklenince satir zıplamasin (CLS). */
.md-foto{float:left; width:56px; height:56px; margin:2px .7rem .35rem 0;
border-radius:50%; object-fit:cover; border:2px solid var(--card);
box-shadow:0 0 0 1px var(--line)}
.md-kaynak{margin:0 0 .35rem; font-size:.86rem; color:var(--muted)}
.md-foto-kunye{margin:0 0 .7rem; font-size:.74rem; color:var(--muted); opacity:.8}
/* Kunyeden sonra float temizlenir: giris paragrafi fotografin altindan
degil, yanindan devam etsin ama liste/harita ona sarilmasin. */
.md-kaynak strong{color:var(--txt)}
.md-kaynak time{font-variant-numeric:tabular-nums}
.md-giris{clear:both; margin:0 0 .8rem; font-size:.94rem; line-height:1.6; max-width:62ch}
/* GÜZERGÂH: sokak adı çıpa, yer adı ikincil. Halk sokak adını değil
"sağlık ocağının orası"nı biliyor -- ikisi de aynı satırda duruyor. */
.md-guzergah{margin:0 0 .9rem; padding:0 0 0 1.35rem;
display:grid; gap:.45rem; font-size:.9rem}
.md-guzergah li{line-height:1.5}
.md-sokak{font-weight:600}
.md-yer{color:var(--txt-2)}
.md-yer::before{content:"· "}
.md-not{display:block; font-size:.83rem; color:var(--muted)}
/* EKSİKLER AÇIKÇA YAZILIYOR. Bilmediğimizi gizlemek yerine listelemek,
hem okuru yanıltmıyor hem "bunu bize yazın" davetinin kendisi. */
/* ─── DUYURU İNDEKSİ (/duyurular) ──────────────────────────────────────────
Kart listesi, tam blok değil: her duyurunun kendi sayfası var ve index'te
tam metni tekrarlamak aynı içeriği iki adreste yayımlamak olurdu. */
.duyuru-liste{display:grid; gap:.9rem; margin:0 0 1.2rem}
.duyuru-kart{display:flex; gap:1rem; align-items:flex-start;
background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
border-radius:12px; padding:1rem 1.15rem; text-decoration:none; color:inherit}
.duyuru-kart:hover{border-color:var(--line-strong)}
.duyuru-kart:hover .dk-bas{text-decoration:underline; text-underline-offset:3px}
.dk-gorsel{flex:0 0 auto; width:84px; height:84px; object-fit:cover;
border-radius:8px; border:1px solid var(--line); background:#fbf8f1}
.dk-govde{display:flex; flex-direction:column; gap:.18rem; min-width:0}
.dk-ust{font-size:.72rem; font-weight:600; letter-spacing:.02em;
text-transform:uppercase; color:var(--muted)}
.dk-bas{font-size:1.02rem; font-weight:700; line-height:1.3; color:var(--txt)}
.dk-kaynak{font-size:.8rem; color:var(--muted)}
.dk-ozet{font-size:.86rem; line-height:1.5; color:var(--txt-2); margin-top:.15rem}
/* Duyurunun kendi sayfasindan geri donus. */
.md-geri{margin:0 0 1.2rem; font-size:.88rem; color:var(--muted)}
@media (max-width:520px){ .dk-gorsel{width:62px; height:62px} }
/* ETKİNLİK AFİŞİ. Dikey görsel; genişliği sınırlı çünkü tam genişlikte
blokta metinden önce gelen dev bir duvar olurdu. aspect-ratio yüklemeden
önce yeri tutuyor (CLS). */
.md-afis{margin:0 0 .9rem}
.md-afis img{display:block; width:100%; max-width:340px; height:auto;
aspect-ratio:560/700; border-radius:10px; border:1px solid var(--line)}
.md-afis figcaption{margin:.4rem 0 0; font-size:.76rem; color:var(--muted)}
/* GÜZERGÂH HARİTASI. Kendi kenarlığı yok -- kartın içinde ikinci bir
çerçeve gürültü olurdu; ayıran şey haritanın kendi kum zemini.
`aspect-ratio` yüklemeden önce yeri tutuyor: SVG geç gelince blok
zıplamasın (CLS). */
.md-harita{margin:0 0 .9rem}
.md-harita picture{display:block}
.md-harita img{display:block; width:100%; height:auto; aspect-ratio:940/720;
border-radius:9px; background:#fbf8f1; border:1px solid var(--line)}
/* Dar ekranda AYRI CIZIM devrede (bkz. veri/mahalle_duyuru.json
`_iki_cizim_neden`): 940 px'lik cizimin sokak adlari telefonda 5 px'e
dusuyordu. Oran da onunla birlikte degismeli, yoksa mobil
kaynagi verirken kutu hala 940/720'de kalir ve gorsel eziliyor. */
@media (max-width:640px){ .md-harita img{aspect-ratio:560/640} }
.md-harita figcaption{margin:.45rem 0 0; font-size:.79rem; line-height:1.5;
color:var(--muted); max-width:70ch}
.md-harita figcaption a{color:var(--muted); text-decoration:underline;
text-underline-offset:2px}
.md-harita figcaption a:hover{color:var(--accent)}
.md-eksik{border-top:1px dotted var(--line-soft); padding-top:.7rem; margin:0 0 .8rem}
.md-eksik h3{margin:0 0 .35rem; font-size:.88rem}
.md-eksik ul{margin:0; padding-left:1.15rem; font-size:.86rem;
color:var(--muted); display:grid; gap:.2rem}
.md-kapanis{margin:0; font-size:.85rem; color:var(--muted); line-height:1.55; max-width:62ch}
.md-bag{margin:.7rem 0 0; font-size:.88rem}
/* Haber tek, mahalle uc: /duyurular'da hangi mahalleleri ilgilendirdigi
yaziliyor (mahalle sayfasinda gereksiz -- okur zaten orada). */
.md-etkilenen{margin:.8rem 0 0; padding-top:.7rem; font-size:.86rem;
color:var(--muted); border-top:1px dotted var(--line-soft)}
.md-etkilenen a{font-weight:500}
/* Mahalle sayfasindaki bloktan duyurunun KENDI sayfasina yon. */
.md-hub{margin:.35rem 0 0; font-size:.88rem}
/* MAHALLEDE YOĞUNLAŞAN HİZMETLER. Mahalle sayfasını dizinden hub'a
çeviren blok: ilişki addan değil kayıttan türetiliyor. Künyenin hemen
altında, listeden önce -- okur işletme listesine dalmadan "bu mahalle
ne ile anılıyor" sorusunun cevabını görsün. */
.mahalle-rehber{
background:var(--card); border:1px solid var(--line);
border-radius:12px; padding:1rem 1.15rem; margin:0 0 1.1rem;
}
.mahalle-rehber h2{margin:0 0 .25rem; font-size:1.02rem}
.mr-giris{margin:0 0 .7rem; font-size:.86rem; color:var(--ink-2,inherit); opacity:.85}
.mr-liste{list-style:none; margin:0; padding:0;
display:grid; gap:.4rem .9rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mr-liste li{display:flex; gap:.5rem; align-items:baseline; justify-content:space-between;
border-bottom:1px dotted var(--line-soft); padding-bottom:.3rem}
.mr-liste a{font-weight:500}
.mr-say{font-size:.78rem; opacity:.7; white-space:nowrap; font-variant-numeric:tabular-nums}
/* ─── REHBER İÇİ TİCARİ BLOK (rehber-tanitim) ──────────────────────────────
Rehber gövdesine giren TEK ticari yerleşim biçimi. Satır içi stil
KULLANILMAZ: ilk hâli 8 satırlık inline style'dı, hem tema değişkenlerini
(koyu tema) es geçiyor hem de her sayfada elle kopyalanıyordu.
BİLEREK SESSİZ: çerçeve var, dolgu rengi yok, buton değil metin linki.
Bu blok yas sayfalarında görünüyor; dikkat çeken bir reklam kutusu orada
sayfanın kendisine olan güveni düşürür. "Ücretli hizmet" etiketi de bu
yüzden gizlenmiyor, başa yazılıyor. */
.rehber-govde article .rehber-tanitim{
border:1px solid var(--line-strong);border-left:3px solid var(--accent);
border-radius:var(--r-surface);padding:16px 20px;margin:30px 0;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
background:var(--surface)}
.rehber-govde article .rehber-tanitim .tanitim-etiket{
font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);margin:0 0 8px;display:block}
.rehber-govde article .rehber-tanitim p{font-family:inherit;font-size:14px;
line-height:1.65;color:var(--txt-2);margin:0 0 10px}
.rehber-govde article .rehber-tanitim p:last-child{margin-bottom:0}
.rehber-govde article .rehber-tanitim a{color:var(--accent);font-weight:600}
/* --- Isletme detay sayfasi (/isletme/) ---
Hepsi .isletme-sayfa altinda: baska hicbir sayfanin stilini etkilemez. */
.isletme-sayfa .kunye { max-width: 640px; margin: 0 0 1.25rem; }
.isletme-sayfa h2 { font-size: 1.05rem; margin: 1.75rem 0 .6rem; }
.isletme-sayfa .yakin-liste { list-style: none; padding: 0; margin: 0 0 1.25rem;
display: grid; gap: .35rem; max-width: 640px; }
.isletme-sayfa .yakin-liste li { display: flex; justify-content: space-between;
gap: .75rem; padding: .45rem .6rem; border: 1px solid var(--cizgi, #e3e6ea);
border-radius: 8px; }
.isletme-sayfa .yakin-liste .mesafe { color: var(--ikincil, #667); font-size: .85em;
white-space: nowrap; }
.isletme-sayfa .kaynak-not { color: var(--ikincil, #667); font-size: .88rem;
margin: 0 0 1.25rem; }
.isletme-sayfa .geri-bag { font-size: .92rem; margin: 1.5rem 0 2.5rem; }
.isletme-sayfa .osb-bag, .isletme-sayfa .rehber-bag { font-size: .93rem;
margin: 0 0 .9rem; max-width: 640px; }
/* BAYAT NOBET LISTESI UYARISI. Veri o gune ait degilse nobetci_yaz.py
basiyor. Kirmizi degil amber: sayfa bozuk degil, listesi eski. */
.neb-bayat{background:#fdf3e0;border:1px solid #efd9a8;border-left:4px solid #b47b1a;
color:#5c4212;border-radius:4px;padding:12px 14px;margin:12px 0;font-size:.95rem;line-height:1.5}
.neb-bayat strong{color:#7a5510}
.neb-bayat a{color:#7a5510;text-decoration:underline}
@media (prefers-color-scheme:dark){
.neb-bayat{background:#2b2312;border-color:#5a4620;border-left-color:#d6a94a;color:#e6d5ab}
.neb-bayat strong,.neb-bayat a{color:#f0cf86}
}
/* Mahalle tablosunda "Tuzla'da en yakin nobetci" satiri. Ana bilgiden
(o mahallede nobetci var mi) gorsel olarak geride durmali. */
.neb-yakin{display:inline-block;margin-top:3px;font-size:.9em;color:#5a6470;line-height:1.45}
.neb-yakin strong{color:#33404d;font-weight:600}
@media (prefers-color-scheme:dark){
.neb-yakin{color:#9aa6b4}
.neb-yakin strong{color:#dbe3ec}
}
/* Zenginlestirilmis konum bloku (Faz 3 pilotu) ve veri kalitesi notu. */
.zengin-konum{margin:6px 0 0;line-height:1.6}
.konum-kalite{margin:6px 0 0;font-size:.88rem;color:#6b7480;line-height:1.5}
@media (prefers-color-scheme:dark){.konum-kalite{color:#98a3b0}}
/* ===== MOBIL DENETIM DUZELTMELERI (31.08.2026) =====
Olcum: 390px genislik, pointer:coarse, gercek cihaz emulasyonu.
WCAG 2.5.8 (AA) dokunma hedefi asgarisi 24x24; asagidakiler altindaydi. */
/* Breadcrumb "Ana sayfa" 18-20px, hub geri linki 20px, one cikan karttaki
TIKLA-ARA telefon linki 20px'ti. Dikey dolgu satir yuksekligini artiriyor,
akisi bozmuyor. */
.crumb-home,.seo-crumb a{padding:3px 0}
.hub-geri{display:inline-block;padding:2px 0}
.one-cikan .oc-detay{padding:2px 0}
/* KARUSEL NOKTALARI 8x8'di. Tam 24x24 yapmak noktalar arasi gorsel ritmi
(8px nokta, 6px bosluk) bozardi; onun yerine dikeyde 24'e cikariliyor ve
bosluk 10'a acilarak vurus alani genisletiliyor -> 18x24.
24 genisligi ZORLAMIYORUZ, cunku WCAG 2.5.8 "esdeger kontrol" istisnasi
burada gecerli: ayni karuselde 30x30 onceki/sonraki dugmeleri (.oc-gez)
her slayta erisim veriyor. Bunu istisna diye yaziyoruz ki sonradan
"unutulmus" sanilmasin. */
.oc-noktalar{gap:10px}
.oc-nokta{position:relative}
.oc-nokta::after{content:"";position:absolute;left:-5px;right:-5px;
top:50%;transform:translateY(-50%);height:24px}
/* KONTRAST — kayit cipasi "#". Olculdu 1,63:1 (--line-strong #d2c8b5,
zemin #fffdf7); AA metin esigi 4,5:1. --muted ile 6,1:1 oluyor.
Boyut zaten .85em, yani daha koyu renk gorsel gurultu yaratmiyor. */
.kayit-bag{color:var(--muted)}
/* KONTRAST — hero ust etiketi. .seo-eyebrow acik zeminli sayfalar icin
secilmis gri (#5d6067); ANA SAYFADA koyu fotografin (header.hero,
#20262e) ustunde duruyor ve orada 2,42:1 kaliyor -- ekran goruntusunde
satirin sonu kayboluyor. Ayni sinif diger sayfalarda dogru calisiyor,
o yuzden sinif degil BAGLAM duzeltiliyor. Beyazin %78'i ~9,8:1 veriyor. */
.hero .seo-eyebrow{color:rgba(255,255,255,.78)}
/* Hat secici 22px yuksekligindeydi (WCAG 2.5.8 asgarisi 24). Yazi boyutu
ortak.css'teki iOS-zoom kuraliyla zaten 16px; eksik olan dolguydu. */
.canli-hat select{min-height:34px;padding:5px 8px}
/* ==========================================================================
REKLAM RAYI — yapgitsin.co ev reklamı
==========================================================================
NEDEN AYRI BİLEŞEN. Bu reklam önce `one-cikan` kartıyla basılıyordu;
o kart sitenin kendi dilinde (aynı mavi, aynı yarıçap, aynı "Öne çıkan"
etiketi) çünkü ORADA amaç öyle: para ödeyen bir DİZİN kaydı okurun zaten
aradığı şeydir, site mobilyası gibi durması doğrudur. Bir işletme
sahibine hizmet satan reklamda aynı şey GÖRÜNMEZLİK demek -- kullanıcının
kendi ifadesiyle "reklam olduğu bile belli değil, ben bunu okumam bile".
Ayrıca ölçüldü (1 Eylül 2026, canlı, 390px): içerik içine gömülen kart
rehber sayfalarında 4,9 ile 14,4 EKRAN aşağıdaydı (tersaneler: 12.134px).
Yani teknik olarak kusursuz, pratikte görünmez.
Tasarım reklamverenin kendi banner'ından: #1a1411 koyu / #fff8f3 açık
kartlar, #b14a08 turuncu aksan, 5px şerit, nabız atan CTA, 9 sn'lik A/B
dönüşü. Renkleri ve CTA metinlerini reklamveren özellikle seçti; site
paletine çevirmek reklamı yeniden görünmez yapardı.
TEK DEĞİŞİKLİK font: banner Google Fonts'tan Plus Jakarta Sans çekiyordu;
her sayfaya ikinci bir origin eklememek için sitenin kendi yığını
kullanılıyor. Renk, düzen, metin, CTA aynen korundu.
DÖNÜŞ BURADA DOĞRU: kaydırıp geçilen içerik-içi bir birimde 9 sn'lik
dönüş teklifin yarısını hiç göstermez; YAPIŞKAN rayda okur sayfada
kaldığı için iki kart da görülür. Aynı mekanizma yere göre fayda ya da
zarar -- biçim değil konum belirliyor. */
.yg-ray{position:sticky;top:84px} /* nav 68px + 16px hava */
.yg-banner{
position:relative;display:block;overflow:hidden;
border-radius:var(--r-surface);box-shadow:var(--sh-2);
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
text-decoration:none;isolation:isolate}
.yg-etiket{
position:absolute;z-index:3;top:10px;right:10px;
padding:3px 8px;border-radius:var(--r-pill);
font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.yg-a .yg-etiket{background:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.yg-b .yg-etiket{background:rgba(26,20,17,.07);color:#8a7a6d}
.yg-kart{display:flex;flex-direction:column;
padding:20px 18px 18px;opacity:0;
animation-duration:9s;animation-timing-function:ease;animation-iteration-count:infinite}
.yg-a{animation-name:ygA;background:#1a1411}
.yg-b{animation-name:ygB;background:#fff8f3}
@keyframes ygA{0%{opacity:0}5%{opacity:1}47%{opacity:1}52%{opacity:0}100%{opacity:0}}
@keyframes ygB{0%{opacity:0}52%{opacity:0}57%{opacity:1}95%{opacity:1}100%{opacity:0}}
/* YÜKSEKLİK SİHİRLİ SAYI DEĞİL, UZUN KARTTAN GELİYOR.
Önce ikisi de `absolute` idi ve kutuya elle 420px verilmişti; A kartı
B'den kısa olduğu için ortasında ~150px ölü boşluk kalıyordu (ölçüldü,
ekran görüntüsü) ve sayıyı her metin değişikliğinde elle ayarlamak
gerekiyordu. Artık B akışta -- kutunun yüksekliğini O belirliyor -- ve A
onun üzerine `absolute` biniyor. Metin uzayınca kutu kendiliğinden
uyuyor. CLS yok: yükseklik HTML'deki metinden, geç yüklenen bir şeyden
değil. */
.yg-b{position:relative}
.yg-a{position:absolute;inset:0}
.yg-glow{position:absolute;width:240px;height:240px;border-radius:50%;pointer-events:none}
.yg-a .yg-glow{background:radial-gradient(circle,rgba(177,74,8,.28),transparent);right:-80px;top:-80px}
.yg-b .yg-glow{background:radial-gradient(circle,rgba(177,74,8,.09),transparent);left:-70px;bottom:-70px}
.yg-serit{position:absolute;left:0;top:0;bottom:0;width:5px;background:#b14a08}
.yg-ic{position:relative;display:flex;flex-direction:column;height:100%;padding-left:9px}
.yg-ust{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.yg-bas{font-size:21px;line-height:1.2;font-weight:800;margin-top:9px;letter-spacing:-.01em}
.yg-bas em{font-style:normal}
.yg-alt{font-size:12.5px;line-height:1.45;margin-top:10px;font-weight:500}
.yg-cip{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.yg-cip span{font-size:9.5px;font-weight:700;border-radius:999px;padding:4px 8px;white-space:nowrap}
.yg-fiyat{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1;margin-top:auto}
.yg-fiyat small{display:block;font-size:9.5px;font-weight:600;margin-top:3px}
.yg-dip{display:flex;align-items:center;justify-content:space-between;
gap:10px;margin-top:14px;padding-top:12px}
/* A kartinda fiyat yok, yani dibi asagi itecek `auto` da yok -- dip blogu
metnin hemen altinda ortada asili kaliyordu (olculdu, ekran goruntusu).
B'de `.yg-fiyat{margin-top:auto}` zaten bu isi goruyor; A'da dibin
kendisine veriliyor. Ikisine birden auto vermek bosuklugu ikiye boler. */
.yg-a .yg-cip span{border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65);
background:rgba(255,255,255,.06)}
.yg-a .yg-dip{margin-top:auto}
.yg-logo{font-size:12.5px;font-weight:800}
.yg-cta{position:relative;overflow:hidden;flex:none;
font-weight:700;font-size:11.5px;padding:9px 14px;border-radius:7px;
background:#b14a08;color:#fff}
.yg-cta::after{content:"";position:absolute;inset:0;
background:rgba(255,255,255,.18);opacity:0;animation:ygNabiz 2.4s ease-in-out infinite}
@keyframes ygNabiz{0%,100%{opacity:0}50%{opacity:1}}
/* KART A — koyu */
.yg-a .yg-ust{color:rgba(255,184,134,.70)}
.yg-a .yg-bas{color:#fff}
.yg-a .yg-bas em{color:#ff8a3d}
.yg-a .yg-alt{color:rgba(255,255,255,.48)}
.yg-a .yg-dip{border-top:1px solid rgba(255,255,255,.10)}
.yg-a .yg-logo{color:#fff}
.yg-a .yg-logo span{color:#ff8a3d}
.yg-a .yg-cta{box-shadow:0 3px 10px rgba(177,74,8,.45)}
/* KART B — açık */
.yg-b .yg-ust{color:rgba(177,74,8,.72)}
.yg-b .yg-bas{color:#1a1411}
.yg-b .yg-bas em{color:#b14a08}
.yg-b .yg-alt{color:#5e5147}
.yg-b .yg-cip span{border:1px solid rgba(177,74,8,.20);color:#b14a08;background:rgba(177,74,8,.06)}
.yg-b .yg-fiyat{color:#b14a08}
.yg-b .yg-fiyat small{color:#5e5147}
.yg-b .yg-dip{border-top:1px solid rgba(26,20,17,.08)}
.yg-b .yg-logo{color:#1a1411}
.yg-b .yg-logo span{color:#b14a08}
.yg-b .yg-cta{box-shadow:0 3px 10px rgba(177,74,8,.28)}
/* HAREKETİ AZALT: dönüş ve nabız durur, teklifi TAŞIYAN kart (fiyatlı B)
sabit kalır. Hareketi kapatıp kullanıcıyı boş kutuyla bırakmak olmaz. */
@media (prefers-reduced-motion:reduce){
.yg-kart,.yg-cta::after{animation:none}
.yg-a{opacity:0}
.yg-b{opacity:1}
}
/* MOBİL: 900px altında .rehber-govde tek sütuna iniyor, yani ray akışa
giriyor. Orada yapışkanlık anlamsız (sayfayı kaplar) ve dikey banner
ekranı yer; yatay ve alçak sürüme geçiyor. */
@media (max-width:900px){
.yg-ray{position:static;margin:0 0 26px}
/* YÜKSEKLİK VERİLMEZ. Burada `height:300px` yazılmıştı ve B kartını
kırpıyordu (ölçüldü: scrollHeight > clientHeight her genişlikte).
Yükseklik uzun karttan gelir -- masaüstünde olduğu gibi. */
.yg-banner{max-width:520px}
}
/* Sağ sütunun tek ızgara çocuğu: künye + reklam rayı. Yapışkanlık BURADA;
içerideki .rehber-nap kendi sticky'sini bırakır (iç içe sticky gereksiz,
ve künye ile banner ayrı ayrı yapışırsa üst üste biniyorlar). */
.rehber-yan{position:sticky;top:84px;display:grid;gap:18px;align-items:start}
.rehber-yan .rehber-nap,.rehber-yan .yg-ray{position:static}
@media(max-width:900px){
/* MOBİLDE BANNER YAZININ ÜSTÜNE ALINIR.
Tek sütuna inince sağ sütun DOM sırasına düşüyor, yani 'ın
ARDINA -- ölçüldü (390px, canlı): tuzla-birlik-osb'de banner 5.760 px,
yani 6,8'inci ekran. Masaüstündeki yapışkan rayı düzeltip mobili öyle
bırakmak, trafiğin çoğunluğunda hiçbir şeyi düzeltmemek olurdu.
`display:contents` ile künye ve ray doğrudan ızgara çocuğu oluyor;
`order` ile ray yazının önüne, künye arkasına geçiyor.
AÇIK ÖDÜNÇ: reklam mobilde yazı gövdesinin üstünde. Okuma akışına
müdahale ediyor ve bunu bilerek yapıyoruz -- görünmeyen reklamın
değeri sıfır. Yer alçak tutuldu (tek kart, 520px sınırı). */
.rehber-yan{display:contents}
/* DOĞRUDAN-ÇOCUK (`>`) DEĞİL ALT-ÖĞE seçici: `display:contents` kutuyu
kaldırıp çocukları ızgaraya taşır ama SEÇİCİ AĞACINI değiştirmez --
.yg-ray hâlâ .rehber-yan'ın çocuğudur. `>` ile yazılan ilk sürüm hiç
eşleşmedi ve banner 5.760 px'te kaldı (ölçüldü). */
.rehber-govde .yg-ray{order:-1;margin:0 0 26px}
.rehber-govde .rehber-nap{order:1;position:static}
}
/* Kategori/mahalle sayfasında banner içerik akışında: tek başına 300px'lik
dikey bir kutu geniş sayfada tuhaf durur, o yüzden burada yatay ve alçak.
Aynı bileşen, farklı ölçü -- ikinci bir banner tasarımı DEĞİL. */
.yg-satir{padding-bottom:4px}
.yg-satir .yg-ray{position:static;margin:0 0 22px}
@media(min-width:901px){
.yg-satir .yg-banner{max-width:640px}
.yg-satir .yg-bas{font-size:23px}
.yg-satir .yg-alt{font-size:13.5px}
}
/* ---- Kule içindeki banner: 150px genişliğe uyarlanmış ölçüler ----
Ayrı bir tasarım DEĞİL: aynı bileşen, dar sütuna göre punto ve boşluk.
Reklamverenin renkleri, metinleri ve CTA'ları aynen korunuyor. */
.yg-kule .yg-banner{box-shadow:0 10px 30px rgba(26,20,17,.18)}
.yg-kule .yg-kart{padding:16px 13px 15px}
.yg-kule .yg-ic{padding-left:7px}
.yg-kule .yg-ust{font-size:8.5px;letter-spacing:.11em}
.yg-kule .yg-bas{font-size:16px;line-height:1.22;margin-top:8px}
.yg-kule .yg-alt{font-size:11px;line-height:1.4;margin-top:8px}
.yg-kule .yg-cip{gap:4px;margin-top:9px}
.yg-kule .yg-cip span{font-size:8.5px;padding:3px 7px}
.yg-kule .yg-fiyat{font-size:22px}
.yg-kule .yg-fiyat small{font-size:8.5px}
.yg-kule .yg-dip{flex-direction:column;align-items:flex-start;gap:9px;margin-top:12px;padding-top:11px}
.yg-kule .yg-logo{font-size:11.5px}
.yg-kule .yg-cta{font-size:10.5px;padding:8px 12px}
.yg-kule .yg-etiket{top:8px;right:8px;padding:2px 6px;font-size:8px}
.yg-kule .yg-glow{width:150px;height:150px}
/* Dar kulede "REKLAM" rozeti üst etiketin üstüne biniyordu (ölçüldü, ekran
görüntüsü): etiket sağ üstte mutlak, üst satır ise tam genişlikte akıyor.
Üst satıra rozet kadar sağ boşluk. */
.yg-kule .yg-ust{padding-right:54px}
/* ============================================================
ISLETME SAYFASI 1. ADIM (2026-09-04) -- gerekcesi sayfa_uret.js'te
"ISLETME SAYFASI 1. ADIM" basligi altinda.
============================================================ */
/* CTA cubugu: masaustunde lede altinda satir; mobilde sabit alt cubuk. Metin
her kirilimda GORUNUR -- ikon-yalniz link mobilde ad uretmiyor (denetim). */
.isletme-cta{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
.isletme-cta a,.isletme-cta button{display:inline-flex;align-items:center;gap:7px;
min-height:40px;padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
background:var(--card);color:var(--txt);font:inherit;font-size:14px;font-weight:500;
text-decoration:none;cursor:pointer;white-space:nowrap}
.isletme-cta a:hover,.isletme-cta button:hover{border-color:var(--accent);color:var(--accent)}
.isletme-cta i{font-size:17px}
.isletme-cta .birincil{background:var(--accent);border-color:var(--accent);color:#fff}
.isletme-cta .birincil:hover{background:var(--accent-hi);color:#fff}
@media(max-width:600px){
.isletme-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;
padding:8px 10px calc(8px + env(safe-area-inset-bottom));flex-wrap:nowrap;
background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.09)}
.isletme-cta a,.isletme-cta button{flex:1 1 0;justify-content:center;min-width:0;
padding:9px 4px;font-size:12.5px;gap:5px}
.isletme-cta span{overflow:hidden;text-overflow:ellipsis}
main.isletme-sayfa{padding-bottom:76px} /* cubugun altinda kalan icerik */
}
/* rozet: h1 icinde, yalniz sahip_dogrulama olan kayitta */
.rozet-dogrulanmis{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--accent);
background:var(--accent-wash);border:1px solid var(--accent);border-radius:var(--r-pill);
padding:3px 9px;margin-left:8px;white-space:nowrap}
.rozet-dogrulanmis i{font-size:14px}
/* bos fotograf satiri: bir blok DEGIL, bir cagri */
.foto-bos{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
border:1px dashed var(--line-strong);border-radius:var(--r-surface);padding:10px 14px;margin:10px 0 0}
.foto-bos i{font-size:18px;color:var(--line-strong);flex:0 0 auto}
.foto-bos a{color:var(--accent)}
/* sahiplen kutusu + QR */
.sahiplen{background:var(--card);border:1px solid var(--line);border-radius:var(--r-surface);
padding:20px 22px 18px;margin:28px 0 12px}
.sahiplen h2{font-size:18px;margin:0 0 6px;letter-spacing:-.015em}
.sahiplen>p{font-size:14px;color:var(--txt-2);margin:0 0 14px;line-height:1.55}
.sahiplen-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 18px;
border-radius:var(--r-pill);background:#1f9e57;color:#fff;font-weight:600;font-size:14px;
text-decoration:none}
.sahiplen-btn:hover{background:#178449;color:#fff}
.sahiplen-btn i{font-size:19px}
.qr-blok{display:flex;align-items:center;gap:16px;margin-top:18px;padding-top:16px;
border-top:1px solid var(--line)}
.qr-blok svg{width:96px;height:96px;flex:0 0 96px;background:#fff;border:1px solid var(--line);
border-radius:8px;padding:4px}
.qr-blok p{font-size:13px;color:var(--txt-2);margin:0;line-height:1.55}
.qr-blok a{color:var(--accent)}
@media(max-width:520px){
.sahiplen{padding:16px 16px 14px}
.sahiplen-btn{width:100%;justify-content:center}
}
/* SPRITE IKON: fontta olmayan dort glif (ikonlar/ek.svg). Font ikonuyla ayni
olcu ve renk; currentColor alir. */
.ik{width:1.05em;height:1.05em;fill:currentColor;flex:0 0 auto;vertical-align:-.15em}
.isletme-cta .ik{width:17px;height:17px}
.seo-rows .r .ik{width:14px;height:14px;color:var(--muted);margin-top:1px;flex:0 0 14px}
.foto-bos .ik{width:18px;height:18px;color:var(--line-strong)}
.sahiplen-btn .ik{width:19px;height:19px}
/* Cerez banti (ortak.js, body sonuna eklenir, z-index 300) mobilde sabit CTA
cubugunun ustune biniyordu -- olculdu (390px, 04.09.2026): cubuk 787-844,
bant ayni yerde. Isletme sayfasinda bant cubugun USTUNE kaldirilir. */
@media(max-width:600px){
/* 16.09.2026 (Sprint 1): bant dar ekranda artik USTTE (ortak.css top:76px).
Bu kural `bottom` yazdigi icin top+bottom birlikte tanimlaniyor ve sabit
ogeyi ikisi arasina GERIYORDU -- olculdu: bant 374x623px, govde ust
boslugu 635px, h1 815px'e itildi. Ust yerlesimde bottom devre disi. */
.isletme-sayfa ~ .cerez-bar{bottom:auto}
}
/* KUNYE + FOTOGRAF. Mobil: bos fotograf satiri kunyenin altinda (.foto-mobil).
Masaustu (>=720px): fotograf alani baslik + tanitim paragrafinin YANINDA
(.isletme-bas izgarasi, sag sutun, .foto-masaustu); kunye altindaki satir
gizlenir. Ayni icerik iki kez basilir, medya sorgusu birini gosterir. */
.kunye-izgara{display:flex;flex-direction:column;gap:10px}
.kunye-izgara .foto-bos{margin:0}
.foto-masaustu{display:none}
/* DOGRULANMIS ISLETMENIN KENDI MEDYASI (08.09.2026).
Video ana sutunda: .sahip-panel .foto-masaustu ile mobilde gizli, trafigin
cogu mobil. Dikey 9:16 kaynak -- masaustunde tam genislige gerilmesin diye
max-width sinirli, mobilde de ekrani kaplamasin. */
.foto{margin:14px 0 0;max-width:300px}
.foto video,.foto img{display:block;width:100%;height:auto;border-radius:10px;
border:1px solid var(--line);background:var(--surface)}
.foto figcaption{margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted)}
/* Tanitim grafigi fotograf DEGIL; kunyesi bunu soyluyor, cerceve de ayirsin. */
.foto-tanitim{max-width:260px}
.foto-tanitim img{border-style:dashed}
/* Mobilde KUCULUR, buyumez. Bu dosyanin kendi kurali: "ilk ekrani
telefon/saat/adres tutar". 390px'te tam genislik video 658px yer
kapliyordu (olculdu, CDP) ve kunyeyi katlanin cok altina itiyordu. */
@media (max-width:560px){.foto{max-width:200px}.foto-tanitim{max-width:170px}}
@media(min-width:720px){
.foto-mobil{display:none}
.isletme-bas{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:0 36px;align-items:start}
.isletme-bas .foto-masaustu{display:flex;flex-direction:column;justify-content:center;
text-align:center;aspect-ratio:16/10;padding:16px;gap:10px;line-height:1.5;
margin-top:46px} /* kirinti satirini atlayip baslik hizasina iner */
.isletme-bas .foto-masaustu .ik{width:28px;height:28px}
/* MEDYA SAHIP PANELININ ICINDE (08.09.2026, kullanici: "sagda bir alan var
hala fotograf eklenmedi diye oraya fotograflardan birini ekle"). Video
kutunun icine girer, ana akistaki kopya .foto-mobil ile gizlenir --
sayfa asagi dogru uzamaz. 9:16 kaynak rayda 260x462 olup sol sutunu
(324px) cok asiyordu; 4:5 kirpilir, tam kadraj oynatinca goruluyor. */
.sahip-panel .foto{margin:0;max-width:100%}
.sahip-panel .foto video{aspect-ratio:4/5;height:auto;object-fit:cover}
.sahip-panel .foto figcaption{text-align:left}
}
/* YAPGITSIN SERIDI (footer icindeki #ygSerit, fixed, z-index 45) mobilde CTA
cubugunun (z-index 40) ustune biniyordu -- canlida olculdu (04.09.2026,
ekran goruntusu). Isletme sayfasinda serit cubugun USTUNE, cerez banti da
seridin ustune kalkar. Serit gizliyse (kapatildi) cubuk yalniz kalir. */
@media(max-width:600px){
.isletme-sayfa ~ footer .yg-serit-kap{bottom:calc(57px + env(safe-area-inset-bottom))}
/* Ayni gerekce: ust yerlesimde bottom yazilmaz (bkz. yukarisi). */
body:has(#ygSerit:not([hidden])) .isletme-sayfa ~ .cerez-bar{bottom:auto}
}
/* 390px'te dort dugme: "WhatsApp" kirpiliyordu; dar ekranda dolgu ve bosluk kisilir. */
@media(max-width:420px){
.isletme-cta a,.isletme-cta button{padding:9px 2px;font-size:12px;gap:4px}
.isletme-cta i,.isletme-cta .ik{font-size:15px;width:15px;height:15px}
}
/* SAHIP PANELI (masaustu sag sutun, 04.09.2026 aksami): bos fotograf + sahiplen
dugmesi + QR cipasi ILK EKRANDA. Sahiplen kutusu 800px ekranda katlanin
altindaydi (847px) ve esnaf "taslak alanini" goremiyordu. */
@media(min-width:720px){
.isletme-bas .sahip-panel{display:flex;flex-direction:column;gap:10px;margin-top:46px;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-surface);padding:12px}
.isletme-bas .sahip-panel .foto-bos{margin:0;flex-direction:column;justify-content:center;text-align:center;
aspect-ratio:16/9;padding:12px;gap:8px;line-height:1.4;font-size:12.5px}
.isletme-bas .sahip-panel .foto-bos .ik{width:26px;height:26px}
.sahip-panel .sp-bas{margin:2px 0 0;font-size:14px;font-weight:700;letter-spacing:-.01em}
.sahip-panel .sp-btn{justify-content:center;min-height:40px;padding:8px 12px;font-size:13.5px;gap:7px}
.sahip-panel .sp-btn .ik{width:17px;height:17px}
.sahip-panel .sp-qr{font-size:12.5px;color:var(--accent);text-align:center;text-decoration:none}
.sahip-panel .sp-qr:hover{text-decoration:underline}
}
/* CIFT WHATSAPP (kullanici, 04.09.2026 aksami): masaustunde sahip paneli VE
alttaki kutu ayni dugmeyi basiyordu. Ustteki kaldi; alttaki kutu masaustunde
yalniz QR blogu (panelin "QR ↓" cipasi buraya iner). Mobilde panel yok,
kutu oldugu gibi. Sahiplenilmis sayfada panel olmadigi icin kutu tam kalir. */
@media(min-width:720px){
.sahiplen.sahipsiz>h2,.sahiplen.sahipsiz>p,.sahiplen.sahipsiz>.sahiplen-btn{display:none}
.sahiplen.sahipsiz .qr-blok{margin-top:0;padding-top:0;border-top:0}
}
/* dogrulanmis sayfada panel: rozet satiri + isletmenin kendi WhatsApp'i / aramasi */
.sahip-panel .sp-onay{display:inline-flex;align-items:center;gap:6px;color:var(--accent)}
.sahip-panel .sp-onay i{font-size:17px}
.sahip-panel .sp-ara{background:var(--accent)}
.sahip-panel .sp-ara:hover{background:var(--accent-hi)}
.sahip-panel .sp-ara i{font-size:17px}
/* ÖZGÜN OLGU TABLOSU (11.09.2026). Rehber sayfasına, kart listesini
TEKRARLAMADAN, yalnızca kendi verimizden türeyen bir blok. Gerekçe ve
ölçüm: rapor/2026-09-11-gsc-analiz.md · sayfa_uret.js > ozgunTabloHtml.
Kart bileşeni kullanılmıyor; satırlar sayfadaki mevcut #k-
çıpalarına gider. Dar ekranda tablo KENDİ kabında yatay kayar —
gövde asla yatay kaymaz (bkz. mobil-tasma-teshisi). */
.ozgun-tablo{margin:0 0 30px}
.rehber-govde article .ozgun-tablo h2{font-size:19px;margin:0 0 8px;
display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ozgun-tablo h2 .say{color:var(--muted);font-weight:400;font-size:14px}
.ozgun-tablo>p{color:var(--muted);font-size:14px;margin:0 0 14px}
.ozgun-tablo .tablo-kap{overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--line);border-radius:var(--r-surface)}
/* width:100% DEGIL. Once `.kaynak-tablo` sinifi odunc alinmisti; o sinif
560px altinda `table-layout:fixed;width:100%` dayatiyor -- tablo
buyuyemeyince kaydirma kabi da hic kaymiyor ve satirlar SESSIZCE
kesiliyordu (485px'te olculdu: kontrol sayfasi 0, kohort sayfasi 190
tasan eleman). max-content + min-width:100%: dar ekranda tablo kendi
kabinda yatay kayar, genis ekranda kabi doldurur. */
.ozgun-tablo table{border-collapse:collapse;width:max-content;min-width:100%;font-size:14px;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ozgun-tablo th,.ozgun-tablo td{text-align:left;padding:9px 14px;
border-bottom:1px solid var(--line);vertical-align:top}
.ozgun-tablo thead th{background:var(--card);font-weight:600;font-size:13px;
color:var(--muted);white-space:nowrap}
.ozgun-tablo tbody tr:last-child td{border-bottom:0}
/* MAHALLE KIYASI (/tuzla-mahalleleri). Yeni bilesen YOK: tablo mevcut
.ozgun-tablo kabini (max-content + min-width:100%, kendi icinde yatay
kayar) ve govde tipografisini yeniden kullaniyor. Uc kural yeterdi:
- ol: `article ul` icin padding-left 1.3em tanimliyken `ol` tanimsizdi,
tarayici varsayilani (~40px) yaninda kayik duruyordu.
- .kiyas-yok: hucre "yok · 1,3 km" derken sayidan AYRISMALI, yoksa
tabloda sifir gibi okunuyor. nowrap: mesafe ikiye bolunmesin.
- .kiyas-delik li: satirlar coklu tur tasiyor, nefes araligi biraz daha. */
.rehber-govde article ol.kiyas-sira{margin:0 0 17px;padding-left:1.3em}
.ozgun-tablo .kiyas-yok{color:var(--muted);white-space:nowrap}
.rehber-govde article .kiyas-delik li{margin-bottom:9px}
.ozgun-tablo td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums}