@font-face{font-family:'Noto Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/noto-sans-var-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/noto-sans-var-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+20A0-20BF,U+2C60-2C7F}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/newsreader-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/newsreader-500-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+20A0-20BF,U+2C60-2C7F}

:root{
  --ink:#1C1917;--paper:#FAF8F5;--card:#FFFFFF;--line:#E7E0D6;
  /* --line dekoratif ayırıcı (1.2:1). WCAG 1.4.11 form ve buton sınırı için
     3:1 ister; girdi kenarları --field kullanır (kağıt 3.56, kart 3.77). */
  --field:#8C8275;
  --lagoon:#0F6B6B;--lagoon-ink:#0A4A4A;--sand:#F3EBE0;
  /* #128C7E üstünde beyaz metin 4.14:1 ile AA'yı kaçırıyordu; koyultuldu. */
  --wa:#0E7365;--ok:#1B7A4E;--warn:#B45309;--bad:#B91C1C;--mute:#57534E;
  --sans:'Noto Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:'Newsreader',Georgia,"Times New Roman",serif;
  /* JS ölçüp üzerine yazıyor; bu yalnız ilk boya için. Bar 52 + arama 62. */
  --header-h:118px;

  /* Hareket bütçesi — playbook §9: 150–200ms, yalnız opacity + transform,
     `transition: all` yasak. Süreler tek yerden gelir ki bütçe kaçmasın. */
  --t-fast:120ms;
  --t:160ms;
  --t-slow:200ms;
  --ease:cubic-bezier(.2,.6,.2,1);
  /* Yay 180ms içinde sönümlenir; §9 sınırını aşmaz. */
  --ease-spring:linear(0,.62 22%,1.04 52%,.99 76%,1);

  /* Yükseklik rampı. Playbook §2 "cam/glow yok": iki kademe, ikisi de nötr
     gölge, parlama yok. --sh-1 playbook'un yazdığı değerin aynısı. */
  --sh-1:0 1px 2px rgb(28 25 23 / .06);
  --sh-2:0 6px 16px rgb(28 25 23 / .11);
  --sh-3:0 1px 12px rgb(28 25 23 / .12);

  /* Boşluk: 4px tabanlı tek ölçek, bölüm ritmi buradan okunur. */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;
}

/* Kayıtlı özel özellik: kayıtsız değişken animasyonlanamaz. Gölgeyi tek bir
   sayıdan türetmek yükseklik geçişini pürüzsüz yapar (ayrı ayrı box-shadow
   interpolasyonu kademeli zıplıyordu). */
@property --el{syntax:'<number>';inherits:false;initial-value:0}

/* Sayfa geçişi. Desteklemeyen tarayıcıda hiçbir etkisi yok. Hareket isteği
   olmayan kullanıcı için hiç kurulmaz: @media dışına alınırsa geçiş yine
   çalışıp yalnız süresi kısalırdı. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--sans);text-rendering:optimizeLegibility}
a{color:var(--lagoon)}
a:hover{color:var(--lagoon-ink)}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-999px}
/* Odaklandığında gerçek bir hedef olmalı: 8px dolgu 24px'lik satırı bırakıyordu. */
.skip:focus{left:8px;top:8px;background:#fff;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;z-index:80;border-radius:8px;box-shadow:0 1px 8px rgb(28 25 23 / .2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
/* Kabuk parçalarına ad verilince sayfa geçişinde yerinde kalır; adsız
   bırakılsalar kök ile birlikte çapraz geçip "zıplıyor" gibi görünürler. */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);view-transition-name:site-header}
/* Başlık çubuğu tam genişlikte kalıp (alt çizgi kesilmesin) ama içi main ile
   aynı kolona hizalanır: main 1100 + 12px padding => 1076 içerik kutusu. */
/* space-between üç öğeyi 1076px'e yayıp masaüstünde logoyu ortada tek başına
   bırakıyordu. Artık marka solda, bölümler yanında, İlan ver sağda: aradaki
   boşluğu .nav-inline'ın margin-right:auto'su tutuyor. */
.bar{display:flex;align-items:center;gap:8px;height:52px;padding-inline:max(12px,calc((100% - 1076px) / 2))}
/* Anasayfa linki: 24px'lik metin satırı yerine tam yüksekte dokunma hedefi. */
.logo{font-weight:600;text-decoration:none;color:var(--ink);letter-spacing:.01em;min-height:44px;display:inline-flex;align-items:center;gap:8px;font-size:17px}
/* Marka işareti: 4:5 portre kartın ve chip rayının rengini başlıkta tekrar
   eder. Ayrı dosya yok, tek kare. */
.logo-mark{width:16px;height:20px;border-radius:3px;background:var(--lagoon);flex:none}
.logo-mark::after{content:'';display:block;width:6px;height:6px;border-radius:999px;background:var(--paper);margin:4px auto 0}

/* §6 masaüstü kökleri. Mobilde ☰ yeterli; 720px'ten sonra yer var. */
.nav-inline{display:none}
@media(min-width:720px){
  .menu-btn{display:none}
  .nav-inline{display:flex;align-items:center;gap:2px;margin-right:auto;margin-left:8px}
  .nav-inline a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;transition:background-color var(--t) var(--ease)}
  .nav-inline a:hover{background:var(--sand);color:var(--ink)}
}
@media(max-width:719px){
  /* ☰ varken marka ortada kalmasın diye boşluk sağda toplanır. */
  .logo{margin-right:auto}
}
.menu-btn,.close,.btn,button{min-height:44px;border:0;border-radius:10px;padding:0 14px;background:var(--lagoon);color:var(--paper);font:inherit;font-weight:600;cursor:pointer;touch-action:manipulation;transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
/* Basınca hafif çöküş: dokunuşun kaydedildiğini anında belli eder. */
button:active,.btn:active{transform:scale(.97)}
.btn:hover{background:var(--lagoon-ink)}
.btn{text-decoration:none;display:inline-flex;align-items:center}
.menu-btn{background:transparent;color:var(--ink);font-size:20px;min-width:44px;padding:0}
.ghost{background:transparent;color:var(--ink);border:1px solid var(--field);font-weight:500}
.search-bar{position:sticky;top:52px;z-index:39;display:flex;padding:8px 12px 10px;background:var(--paper);min-height:48px;border-bottom:1px solid var(--line);view-transition-name:site-search}
/* Üç kontrol tek kabuk: semt | kelime | Ara. Kenarlık ve odak halkası
   kabukta, içeride kenarlık yok — üç ayrı kutu fold'un tek işini üç işe
   bölüyordu. Kenarlık --field: girdi sınırı WCAG 1.4.11 için ≥3:1. */
.search-shell{display:flex;align-items:center;width:100%;max-width:720px;margin-inline:auto;background:var(--card);border:1px solid var(--field);border-radius:12px;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.search-shell:hover{border-color:var(--ink)}
/* Kabuğun içindeki herhangi bir kontrol odaklandığında halka kabuğa çıkar;
   parçaların kendi halkası kabuğun kenarını kırpıyordu. */
.search-shell:has(:focus-visible){border-color:var(--lagoon);box-shadow:0 0 0 3px color-mix(in oklab,var(--lagoon) 22%,transparent)}
.search-shell :where(select,input,button):focus-visible{outline:none}
.search-bar input{flex:1;min-width:0;border:0;border-radius:0;padding:10px 12px;font:inherit;background:transparent;color:var(--ink);min-height:44px}
.search-bar button{flex:none;border-radius:0 11px 11px 0;align-self:stretch}
/* §3.5 semt ilk alan: ok işareti inline SVG data-uri, ek istek yok.
   Sağdaki 1px çizgi iki alanı ayırır — kabuk içinde tek uzun kutu gibi
   durunca semtin ayrı bir seçim olduğu anlaşılmıyordu. */
.semt-select{flex:0 0 auto;max-width:38%;min-height:44px;border:0;border-right:1px solid var(--line);border-radius:11px 0 0 11px;padding:0 28px 0 12px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2357534E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/10px 7px;-webkit-appearance:none;appearance:none;text-overflow:ellipsis}

/* drawer */
.drawer{position:fixed;inset:0 auto 0 0;width:min(86vw,320px);background:var(--card);z-index:50;padding:16px;box-shadow:0 1px 12px rgb(28 25 23 / .12);display:flex;flex-direction:column;gap:4px;overscroll-behavior:contain;overflow-y:auto}
.drawer a{min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--ink);padding:0 8px;border-radius:8px}
.drawer a:hover{background:var(--sand)}
/* Kapat artık dolu bir kutu değil; marka ile aynı satırda nötr bir çıkış. */
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.drawer-brand{display:inline-flex;align-items:center;gap:8px;padding:0 8px;font-weight:600;font-size:16px;color:var(--ink)}
.drawer .close{min-width:44px;min-height:44px;padding:0;background:transparent;color:var(--ink);font-size:18px;border-radius:8px;flex:none}
.drawer .close:hover{background:var(--sand)}
/* Dönüşüm eylemi diğer satırlarla aynı ağırlıkta kalmasın. */
.drawer .drawer-cta{background:var(--lagoon);color:var(--paper);font-weight:600;min-height:48px;justify-content:center;margin:0 0 6px}
.drawer .drawer-cta:hover{background:var(--lagoon-ink)}
.drawer h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:12px 0 4px;padding:0 8px}
.scrim{position:fixed;inset:0;background:rgb(28 25 23 / .4);z-index:49}

main{padding:16px 12px 88px;max-width:1100px;margin:0 auto}
main:focus{outline:none}
#icerik{scroll-margin-top:var(--header-h)}

/* type — playbook §2 ölçeği: H1 semt/ilan 20/26, H1 anasayfa 22/28 */
h1{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.3;margin:8px 0;text-wrap:pretty}
h1.h1-lede{font-size:22px;line-height:1.25}
h2{font-size:18px;line-height:1.35;text-wrap:pretty}
.mute{color:var(--mute);font-size:13px;line-height:1.4}
.meta{color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}
.count{font-variant-numeric:tabular-nums}
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--mute);font-size:13px;padding:0;margin:4px 0}
/* Satır yüksekliği kadar, yani 18px dokunma hedefi kalıyordu; WCAG 2.5.8'in
   24px tabanının altı. Dolgu hedefi 26px'e çıkarır, metin yerinde kalır. */
.crumb a{color:var(--mute);display:inline-block;padding:4px 0}
.crumb li{list-style:none}
.crumb ol{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}

/* §4.4 hub başlık bandı: yol + H1 + canlı sayı + sıralama tek blok.
   Dağınık dururken kullanıcı "kaç ilan var" bilgisini kaçırıyordu. */
.hub-head{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hub-head .crumb{margin:0 0 2px}
.hub-head h1{margin:0}
.hub-head .hub-count{display:flex;align-items:baseline;gap:8px;margin:8px 0 0;color:var(--mute);font-size:14px}
.hub-head .hub-count strong{color:var(--ink);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.hub-head .chips{padding-block:10px 0;margin-inline:-12px;padding-inline:12px}
/* Başlık + sıralama tek satır (anasayfadaki .page-head kalıbı). */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.head-row .chips.is-sort{flex:none;padding:0;margin:0;overflow:visible}

/* Sayfalama CTA'sı: satır içi küçük bir link değil, listenin sonunu kapatan
   tam genişlik bir düğme. §3 dokunma hedefi 48px. */
.more{margin:20px 0 0;display:flex}
.more>:where(a,button){flex:1;justify-content:center;min-height:48px;font-size:15px}

/* §4.1 anasayfa başlık bandı — hub'daki .hub-head'in eşi. Başlık ve canlı
   sayı serbest akarken bölümün nerede başladığı görünmüyordu. */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.page-head-text{min-width:0}
.page-head h1{margin:0}
/* Filtre düğmesi başlıkla aynı satırda; panel .page-head dışında akar. */
.page-head .filter{margin:0;flex:none}
.page-stats{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 0;color:var(--mute);font-size:14px}
.page-stats strong{color:var(--ink);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
/* "bugün N yeni" düz metinken sayının yanında kayboluyordu; tazelik sinyali
   kendi rozetini hak ediyor (§4.1 zorunlu 5'ten "canlı sayı"). */
.stat-new{background:color-mix(in oklab,var(--warn) 14%,var(--paper));color:var(--warn);font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}

/* Boşluk ritmi: 4px tabanlı tek ölçek. Bölümler arası 32 (24'te bölümler
   birbirine yapışıyordu), başlık altı 8. */
main>section{margin:32px 0 0}
main>section>h2{margin:0 0 8px}
main>h2{margin:32px 0 8px}
/* Bölüm başlığı doğrudan main çocuğuysa (section sarmalayıcısı olmayan
   yerler) main>h2 ile aynı üst boşluğu alır, ritim bozulmaz. */
main>.sec-head{margin:32px 0 10px}
main>.grid{margin:12px 0 0}
main>.prose{margin:32px 0 0}

/* Bölüm başlığı: ad solda, "tümünü gör" sağda, altında ince çizgi. Sayfa
   ayrıştırılmamış bir yığın halinde okunuyordu. */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sec-head h2{margin:0}
.sec-head .see-all{margin-left:auto}

/* chip rayları (§4.1: aramanın altında semt + mod) */
.rails{max-width:1100px;margin:0 auto;padding:6px 0 2px}
.rail-wrap{position:relative}
/* İki ray birbirinin kopyasıydı. Etiket + ikinci rayda taslak chip ikisini
   ayırır. Mobilde etiket 28px yer yiyeceği için yalnız 720px üstünde. */
.rail-tag{display:none}
@media(min-width:720px){
  .rail-wrap{display:flex;align-items:center;gap:10px;padding-inline:12px}
  .rails .chips{padding-inline:0;flex:1;min-width:0}
  .rail-tag{display:inline-flex;align-items:center;flex:0 0 46px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
}
/* Mod rayı taslak: dolu semt chip'i ile aynı ağırlıkta olunca hangisinin
   yer hangisinin tür olduğu okunmuyordu. */
.rail-wrap.is-mode .chip:not(.clear){background:transparent;border:1px solid var(--line)}
.rail-wrap.is-mode .chip:not(.clear):hover{background:var(--sand);border-color:var(--field)}
.rail-wrap.is-mode .chip[aria-current="true"],.rail-wrap.is-mode .chip[aria-current="page"]{background:var(--lagoon);border-color:var(--lagoon);color:var(--paper)}
/* kaydırma ipucu: sağ kenarda kağıt rengine fade — “devamı var” sinyali */
.rail-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;background:linear-gradient(to right,rgb(250 248 245 / 0),var(--paper))}
.rails .chips{padding:6px 12px}

/* chips */
/* scroll-padding olmadan proximity snap ilk chip'i 12px kaydırıp sol boşluğu yiyor */
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0;scroll-snap-type:x proximity;scroll-padding-inline:12px;scrollbar-width:none}
.chips>*{scroll-snap-align:start}
.chips::-webkit-scrollbar{display:none}
.chip{min-height:40px;padding:0 14px;border-radius:999px;background:var(--sand);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;font-size:13px;scroll-snap-align:start}
/* Sabit #EBE0D0 yerine token'dan türetme: sand değişirse hover da değişir. */
.chip{transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.chip:hover{background:color-mix(in oklab,var(--sand) 90%,var(--ink));color:var(--ink)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"],.chip[aria-current="true"],.chip.is-on{background:var(--lagoon);color:var(--paper)}
.chip[aria-pressed="true"]:hover,.chip.is-on:hover{background:var(--lagoon-ink);color:var(--paper)}
.chip.clear{background:transparent;border:1px solid var(--field)}

/* grid + card */
/* §3.15 content-visibility yok: liste 12’de sayfalanıyor, 50’yi geçmiyor;
   auto kullanımı hit-test ve kaydırma sıçraması üretiyordu. */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Yükseklik tek bir sayıdan türetilir (bkz. @property --el): 0 → 1 arası
   geçiş gölgeyi pürüzsüz büyütür, ayrı box-shadow interpolasyonu gerekmez.
   container-type: kart aynı bileşenle hem %46'lık şeritte hem 4'lü grid'de
   kullanılıyor; iç tipografi medya sorgusu değil kendi genişliğine bakar. */
.card{--el:0;background:var(--card);border-radius:12px;overflow:hidden;position:relative;container-type:inline-size;box-shadow:0 calc(1px + var(--el) * 5px) calc(2px + var(--el) * 14px) rgb(28 25 23 / calc(.06 + var(--el) * .05))}
.card-link{display:block;text-decoration:none;color:inherit;border-radius:12px}
/* Kartın overflow:hidden'ı dışa çizilen halkayı kırpıyor; içe çizdiriyoruz.
   Fotoğrafın üstünde 2px halka kayboluyordu: 3px + iç beyaz kontur. */
.card-link:focus-visible{outline:3px solid var(--lagoon);outline-offset:-3px;box-shadow:inset 0 0 0 4px rgb(255 255 255 / .85)}
.card .photo{display:block;aspect-ratio:4/5;background:var(--sand);position:relative}
.card img{width:100%;height:100%;object-fit:cover}
.card .pad{padding:10px 10px 12px;display:flex;align-items:center;gap:8px}
.card .txt{min-width:0;flex:1}
.card h2{font-size:16px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.005em}
.card .meta{display:block;margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* WhatsApp işareti çıplak ikonken kartın köşesinde kayboluyordu; halka onu
   "burada iletişim var" sinyaline çeviriyor. Tıklanabilir değil: kartın
   kendisi tek link (§3.2), numara yalnız detayda. */
.card .wa-dot{flex:none;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:color-mix(in oklab,var(--wa) 12%,var(--card));color:var(--wa)}
.card .wa-mark{width:18px;height:18px;color:var(--wa);display:block}

/* Fotoğrafın alt şeridi: görüşme yeri (§1.5 "kartta 3 ölçü") ve gerekiyorsa
   18+ etiketi. Gradyan süs değil — foto rastgele olduğu için yazının AA
   kontrastı ancak kendi zemini ile garanti edilir, bu yüzden etiketler
   gradyanın üstüne ayrıca dolu zeminli konur. */
.card .photo-foot{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;gap:6px;padding:20px 8px 8px;background:linear-gradient(to top,rgb(28 25 23 / .55),rgb(28 25 23 / 0));pointer-events:none}
/* min-width:0 olmadan kırpma hiç çalışmıyor: flex öğesinin varsayılan
   min-width:auto'su nowrap içeriğin altına inmesine izin vermiyor, çip
   ellipsis yerine şeritten taşıyordu. Yazı gradyanın değil bu çipin
   üstünde duruyor; bembeyaz fotoda bile .78 zemin AA'yı taşıyor. */
.card-where{min-width:0;background:rgb(28 25 23 / .78);color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .veil{background:rgb(28 25 23 / .78);color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap;margin-left:auto}
/* Kart hem %46'lık şeritte hem 4'lü grid'de aynı bileşen; iç tipografi medya
   sorgusu değil kartın kendi genişliğine bakar. Temel .card h2 kuralından
   SONRA gelmeli: @container özgüllük eklemez, eşitlikte sonraki kazanır. */
@container (min-width:210px){
  .card h2{font-size:17px}
  .card .pad{padding:10px 12px 14px}
  .card .meta{font-size:14px}
}
.badge{position:absolute;top:8px;left:8px;background:var(--ok);color:#fff;border-radius:999px;font-size:12px;padding:2px 8px;font-weight:600}
.badge.warn{background:var(--warn)}
.badge.vip{background:var(--ink);color:var(--paper)}

/* §8 hassas foto: blur + açık etiket; "Göster" yalnız detay galerisinde */
.is-blurred img{filter:blur(18px);transform:scale(1.06)}
/* .card .veil artık .photo-foot içinde akıyor (bkz. kart bloğu); eski
   position:absolute kuralı bırakılsa şeridin dışına çıkıyordu. */
.gallery .shot.is-blurred .reveal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.gallery .shot.is-shown img{filter:none;transform:none}
.gallery .shot.is-shown .reveal{display:none}
.fav{position:absolute;top:4px;right:4px;z-index:2;min-width:44px;min-height:44px;border-radius:999px;background:rgb(255 255 255 / .82);color:var(--ink);font-size:18px;line-height:1;display:grid;place-items:center;padding:0;transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.fav[aria-pressed="true"]{color:var(--bad)}
.fav:active{transform:scale(.9)}
/* Dokunuşa yanıt: JS tıklamada .is-burst ekler, animationend'de siler.
   Sınıf yerine [aria-pressed] kullanılsa favorili kartlar her yüklemede
   yeniden patlardı. */
.fav.is-burst{animation:pop var(--t-slow) var(--ease-spring)}
@keyframes pop{from{transform:scale(1)}50%{transform:scale(1.28)}to{transform:scale(1)}}
/* Favorili kart bir bakışta ayrılsın — ek istek veya ikon gerekmiyor. */
.card:has(.fav[aria-pressed="true"]) .photo{box-shadow:inset 0 0 0 2px var(--bad)}
@media(hover:hover) and (pointer:fine){
  .card{transition:transform var(--t) var(--ease),--el var(--t) var(--ease)}
  .card:hover{transform:translateY(-2px);--el:1}
  /* Fotoğrafta çok hafif yaklaşma: kart "canlı" hissi, kırpma photo'da kalır.
     .3s playbook §9'un 200ms bütçesini aşıyordu. */
  .card .photo{overflow:hidden}
  .card img{transition:transform var(--t-slow) var(--ease)}
  .card:hover img{transform:scale(1.035)}
  .card:hover h2{text-decoration:underline;text-decoration-color:var(--lagoon);text-underline-offset:3px}
  .fav:hover{background:#fff;transform:scale(1.08)}
}
@media(min-width:960px){
  .grid{grid-template-columns:repeat(4,1fr);gap:12px}
  /* Masaüstü H1 max 32px; hub/ilan başlığı anasayfa H1'ini ezmez. */
  h1{font-size:26px}
  h1.h1-lede{font-size:32px}
  h2{font-size:20px}
  /* §4.1 masaüstünde arama 720px ortalı — artık .search-shell'in
     max-width + margin-inline:auto'su yapıyor, burada yalnız semt sütunu
     sabitlenir ki uzun ilçe adı kelime alanını yemesin. */
  .search-shell .semt-select{flex:0 0 190px;max-width:190px}
}

/* prose */
.prose{max-width:68ch}
.prose :where(p,ul,ol){margin:0 0 12px}
.prose a{color:var(--lagoon)}
.prose h2{margin:20px 0 8px}
.prose h3{font-size:16px;line-height:1.4;margin:16px 0 6px}
.prose strong{font-weight:600}
.prose :where(ul,ol){padding-left:22px}
.prose li{margin:0 0 4px}
.prose blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid var(--line);color:var(--mute)}
.prose hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.prose code{background:var(--sand);border-radius:6px;padding:1px 5px;font-size:14px}
.table-scroll{overflow-x:auto;margin:0 0 12px;border:1px solid var(--field);border-radius:10px;-webkit-overflow-scrolling:touch}
.table-scroll:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
.prose table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
.prose :where(th,td){text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.prose th{background:var(--sand);font-weight:600}
.prose tr:last-child :where(th,td){border-bottom:0}
details{border-bottom:1px solid var(--line);padding:10px 0;scroll-margin-top:var(--header-h)}
details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';margin-left:auto;color:var(--mute);font-weight:400}
details[open] summary::after{content:'−'}
details p{margin:4px 0 0;color:var(--mute);font-size:15px}

/* listing detail */
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery .shot{scroll-snap-align:center;position:relative;display:block;aspect-ratio:4/5;width:min(100%,420px);flex:none;border-radius:12px;overflow:hidden;background:var(--sand)}
.gallery .shot img{width:100%;height:100%;object-fit:cover;display:block}
/* Karttan detaya fotoğraf devri: aynı adı JS tıklanan kartın görseline ekler,
   böylece iki sayfa arasında tek öğe olarak morflanır. Ad yalnız bir öğede
   bulunabildiği için karta sabit yazılmaz (anasayfada aynı ilan iki kez var). */
.gallery .shot:first-child img{view-transition-name:hero-photo}
.gallery-wrap{position:relative}
.gallery-count{position:absolute;top:12px;left:12px;background:rgb(28 25 23 / .66);color:#fff;font-size:13px;padding:3px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.dots{display:flex;gap:6px;justify-content:center;padding:8px 0}
.dots span{width:7px;height:7px;border-radius:999px;background:var(--line)}
.dots span.is-on{background:var(--lagoon)}
/* §4.3 sticky CTA: WhatsApp 2/3, Ara 1/3 — birincil eylem baskın. */
.sticky-cta{position:sticky;bottom:0;z-index:30;display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);margin:16px -12px 0}
.sticky-cta .wa,.sticky-cta .tel{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;min-height:48px;font-weight:600;touch-action:manipulation}
.sticky-cta .wa{flex:2;background:var(--wa);color:#fff}
.sticky-cta .tel{flex:1;background:transparent;color:var(--ink);border:1px solid var(--ink)}

/* §4.3 detay üst şeridi */
.detail-top{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 8px}
.detail-top .back{flex:1;min-width:0;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-top .back:hover{text-decoration:underline}
.detail-top .shot-n{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.fav-top{position:static;background:var(--card);border:1px solid var(--field)}

/* uyarı bandı */
.notice{border-radius:12px;padding:12px 14px;margin:0 0 14px;background:var(--sand)}
.notice p{margin:0}
.notice.bad{background:#FBEAE7;border:1px solid #F0CFC8}

/* CTA kartı (masaüstünde sağ kolon, mobilde akışta) */
/* İlan altı iç link kümeleri. Chip rayı taşmasın diye sarmalıyor:
   detay sayfasında yatay kaydırma ipucu yok, hepsi görünmeli. */
.linkset{margin:14px 0 0}
.linkset-tag{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:0 0 6px}
.linkset .chips{flex-wrap:wrap;overflow:visible;padding:0;gap:6px}

.cta-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;margin:16px 0 0}
.cta-card .btn{justify-content:center;min-height:48px;border-radius:10px;font-weight:600}
.cta-card .wa{background:var(--wa);color:#fff;font-size:16px;box-shadow:var(--sh-1)}
.cta-card .tel{background:transparent;color:var(--ink);border:1px solid var(--ink)}
/* Üç eylem eşit ağırlıktayken hangisinin birincil olduğu okunmuyordu.
   Kopyala bir yardımcı: kutu değil, ince ayırıcının altında metin düğme. */
.cta-card .copy{min-height:44px;justify-content:center;cursor:pointer;background:transparent;border:0;color:var(--lagoon);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;margin-top:2px;padding-top:10px;border-top:1px solid var(--line);border-radius:0}
.cta-card .copy:hover{background:transparent;color:var(--lagoon-ink)}
.cta-card .copy:active{transform:none}
/* Pano yoksa düğme numarayı gösterir; o hâlde altı çizili link gibi
   davranmamalı, elle seçilecek bir değer. */
.cta-card .copy.is-plain{font-variant-numeric:tabular-nums;user-select:all;text-decoration:none;color:var(--ink);font-size:16px}
.cta-card .hint{margin:2px 0 0;font-size:13px;color:var(--mute);line-height:1.5}

/* §4.5 galeri okları: yalnız hover/fine pointer'da */
.gallery-arrow{display:none}
@media(hover:hover) and (pointer:fine){
  .gallery-arrow{display:grid;place-items:center;position:absolute;top:calc(50% - 22px);width:44px;height:44px;border:1px solid var(--field);border-radius:999px;background:rgb(250 248 245 / .92);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;z-index:2}
  .gallery-arrow.prev{left:8px}
  .gallery-arrow.next{right:8px}
  .gallery-arrow:disabled{opacity:.35;cursor:default}
}

/* §4.3 masaüstü iki kolon: foto+metin solda, CTA sağda sabit */
@media(min-width:960px){
  .detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
  .detail-side{position:sticky;top:calc(var(--header-h) + 12px)}
  .cta-card{margin:0}
  /* CTA sağ kolonda görünürken alt şerit gereksiz. */
  .sticky-cta{display:none}
}

/* age gate */
.age-gate{position:fixed;inset:0;background:var(--paper);z-index:70;display:grid;place-items:center}
/* Her ziyaretçinin gördüğü ilk ekran. Kağıt üstünde serbest metinken markanın
   hiç ağırlığı yoktu ve soru gövde metniyle aynı boydaydı. */
.age-box{padding:28px 24px;text-align:center;max-width:360px;margin-inline:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-2)}
.age-box .brand{font-family:var(--serif);font-size:24px;margin:0 0 16px;display:flex;align-items:center;justify-content:center;gap:8px}
.age-box #age-title{font-size:19px;line-height:1.3;font-weight:600;margin:0;text-wrap:balance}
.age-box .mute{margin:8px 0 0}
/* Yan yanayken "Çık" birincil eylemle eşit ağırlıkta görünüyordu. */
.age-actions{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.age-actions>*{width:100%}
.age-actions button{width:100%;justify-content:center;min-height:48px;display:inline-flex;align-items:center}
.age-actions .ghost{min-height:44px;border:0;color:var(--mute);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.age-actions .ghost:hover{background:transparent;color:var(--ink)}

/* forms */
.form label{display:block;margin:12px 0 4px;font-weight:500}
.form input,.form select,.form textarea{width:100%;padding:10px 12px;border:1px solid var(--field);border-radius:10px;font:inherit;background:var(--card);color:var(--ink);min-height:44px;transition:border-color var(--t) var(--ease)}
.form :where(input,select,textarea):focus{border-color:var(--lagoon)}
/* :user-invalid, :invalid'in aksine kullanıcı alana dokunmadan kırmızı
   boyamaz — boş formu hatalı göstermez. */
.form :where(input,select,textarea):user-invalid{border-color:var(--bad)}
.form textarea{min-height:120px;resize:vertical}
.form-errors{color:var(--bad);background:#FEF2F2;border-radius:10px;padding:12px 12px 12px 28px;margin:12px 0}
.form .hint{color:var(--mute);font-size:13px;margin:4px 0 0;font-weight:400}
/* Dört adım aynı görünürken "neresi bitti, neresi kaldı" okunmuyordu:
   numara bekleyeni, onay işareti biteni söylüyor. */
.steps{display:flex;gap:6px;padding:0;list-style:none;margin:12px 0}
.steps li{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:6px 4px;border-radius:8px;background:var(--sand);font-size:13px;color:var(--mute);transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.steps li::before{content:attr(data-step-label);flex:none;width:18px;height:18px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--card);color:var(--mute)}
.steps li.is-on{background:var(--lagoon);color:var(--paper);font-weight:600}
.steps li.is-on::before{background:var(--paper);color:var(--lagoon-ink)}
.steps li.is-done{background:color-mix(in oklab,var(--lagoon) 12%,var(--paper));color:var(--lagoon-ink);font-weight:600}
.steps li.is-done::before{content:'✓';background:var(--lagoon);color:var(--paper)}
.wizard-nav{display:flex;gap:8px;margin-top:16px}
.wizard-nav button{flex:1}
/* Girdiyi görsel olarak saklıyoruz ama klavyeye/ekran okuyucuya bırakıyoruz:
   display:none olsaydı odak alamaz ve required doğrulaması sessizce düşerdi. */
/* `.form input`(0,1,1) bu kuralı(0,1,0) eziyordu: gizli girdi width:100% +
   min-height:44px alıp 390×44 görünmez kutuya şişiyor ve sayfayı 12px yatay
   kaydırıyordu. Eşit özgüllük + .form input'un enjekte ettiği kutu
   özelliklerinin sıfırlanması gerekiyor. */
.form .file-input{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
/* `.form label{display:block}` ile eşit özgüllük gerekiyor, yoksa bölge
   dikey yığılmaz ve başlıkla ipucu tek satıra girer. */
.form .dropzone{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-height:96px;justify-content:center;margin:12px 0 4px;padding:18px 16px;background:var(--card);border:2px dashed var(--field);border-radius:12px;cursor:pointer;font-weight:400;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
.form .dropzone:hover{border-color:var(--lagoon);background:color-mix(in oklab,var(--card) 95%,var(--lagoon))}
/* Girdi gizli olduğu için odak halkasını bölge üstlenir. */
.form .dropzone:has(+.file-input:focus-visible){outline:3px solid var(--lagoon);outline-offset:2px}
.dropzone-title{font-weight:600;font-size:16px;color:var(--lagoon)}
.dropzone-hint{font-size:13px;color:var(--mute)}
/* Foto seçilince bölge "boş kutu" gibi durmasın. */
.form:has(.file-input:valid) .dropzone{border-style:solid;border-color:var(--ok)}

fieldset.step{border:0;padding:0;margin:0}
fieldset.step legend{font-weight:600;font-size:18px;padding:0}
.preview dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0}
.preview dt{color:var(--mute);font-size:13px}
.preview dd{margin:0;min-width:0;overflow-wrap:anywhere}
.preview .thumbs{display:flex;gap:8px;flex-wrap:wrap}
.preview .thumbs img{width:72px;aspect-ratio:4/5;object-fit:cover;border-radius:8px;display:block}

/* §4.9 foto thumb: sil / sırala. Butonlar 44px hedefe uyacak kadar büyük
   ama thumb'ı boğmayacak kadar küçük; yan yana üç tanesi thumb altında. */
.thumbs .thumb{position:relative;width:72px}
.thumb-tag{position:absolute;left:0;right:0;bottom:0;background:rgb(28 25 23 / .72);color:var(--paper);font-size:10px;line-height:1.3;padding:3px 4px;border-radius:0 0 8px 8px;text-align:center}
.thumb-btn{position:absolute;top:2px;width:26px;height:26px;min-height:0;padding:0;border:0;border-radius:999px;background:rgb(28 25 23 / .72);color:var(--paper);font-size:13px;line-height:1;display:grid;place-items:center;cursor:pointer}
.thumb-btn.is-up{left:2px}
.thumb-btn.is-down{left:31px}
.thumb-btn.is-del{right:2px;background:var(--bad)}
.thumb-btn:disabled{opacity:.35;cursor:default}
.thumb-btn:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
.rules{background:var(--sand);border-radius:10px;padding:12px;font-size:14px}
.rules ul{margin:8px 0 0;padding-left:20px}
[aria-busy="true"]{opacity:.7;pointer-events:none}

/* §3.16 filtre paneli */
.filter{margin:12px 0}
.filter-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--field);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
.filter-toggle[aria-expanded=true]{background:var(--sand);border-color:var(--ink)}
/* Lagoon zemin üstünde lagoon-ink metin okunmuyordu; kağıt rengine çevrildi. */
.filter-badge{background:var(--lagoon);color:var(--paper);border-radius:999px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-variant-numeric:tabular-nums}
.filter-panel{margin:0 0 14px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:14px}
.filter-panel fieldset{border:0;padding:0;margin:0}
.filter-panel legend{font-size:13px;font-weight:600;color:var(--mute);padding:0 0 6px}
.filter-panel .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-panel input[type=number]{width:82px;min-height:44px;border:1px solid var(--field);border-radius:10px;padding:0 10px;font:inherit;background:var(--paper);color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--field);border-radius:999px;background:var(--paper);font-size:14px;cursor:pointer}
.pill:has(:checked){background:var(--sand);border-color:var(--ink);font-weight:600}
.filter-actions{display:flex;gap:8px;flex-wrap:wrap}
.filter-count{margin:12px 0 8px;font-size:14px;color:var(--mute)}
.filter-count strong{color:var(--ink);font-variant-numeric:tabular-nums}

/* §4.1 “Bugün eklenen” şeridi */
.strip{margin:16px 0}
.strip h2{font-size:16px;margin:0 0 8px}
.strip-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:12px;padding:2px 0 8px;scrollbar-width:none}
.strip-rail::-webkit-scrollbar{display:none}
.strip-rail .card{flex:0 0 46%;max-width:200px;scroll-snap-align:start}

/* semt / mod grid'i */
/* `1fr`in örtük min-content tabanı en uzun kelimeye kilitleniyor: "MarkAntalya"
   sütunu 180px'e şişirip 360px ekranda sayfayı 9px yatay kaydırıyordu.
   minmax(0,…) tabanı serbest bırakır (yapısal güvence), 380px altında tek
   sütuna düşmek de adı kırpılmadan okutur. */
.tiles{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:379px){.tiles{grid-template-columns:1fr}}
/* Ad ile sayı alt alta dururken kutucuk "etiket yığını" gibi okunuyordu.
   Dizinde karar veren bilgi stok: ad solda, sayı sağda kendi rozetinde. */
.tiles a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:8px 10px 8px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
.tiles a:hover{border-color:var(--lagoon);background:color-mix(in oklab,var(--card) 94%,var(--lagoon))}
.tile-name{font-weight:600;font-size:14px;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tile-n{flex:none;font-size:12px;font-weight:600;color:var(--lagoon);background:var(--sand);border-radius:999px;padding:4px 9px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(min-width:720px){.tiles{grid-template-columns:repeat(4,1fr)}}
/* "Tümünü gör" linkleri paragraf içinde 18px kalıyordu; tek başına gezinme
   hedefi oldukları için 44px'e çıkarıldı. */
.see-all{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--lagoon);text-decoration:none}
.see-all:hover{text-decoration:underline}

/* pager (Laravel links() yerine — Tailwind derlenmiyor) */
.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0;flex-wrap:wrap}
.pager-btn{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:10px;background:var(--sand);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.pager-btn{transition:background-color var(--t-fast) var(--ease)}
.pager-btn:hover{background:color-mix(in oklab,var(--sand) 90%,var(--ink));color:var(--ink)}
.pager-btn.is-off{opacity:.45;pointer-events:none}
.pager-now{color:var(--mute);font-size:13px}

/* düz satır listesi (arşiv, rehber index) */
.rows{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:2px}
/* 46px'lik satırın yalnız 24px'i tıklanabilirdi. Dikey dolgu li'den linke
   geçti: satır yüksekliği aynı kaldı, hedef 44px oldu. */
.rows li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0 12px;display:flex;flex-direction:column;transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
.rows li a{font-weight:600;text-decoration:none;display:flex;align-items:center;min-height:44px}
.rows li>*:not(a){padding-bottom:10px}
.rows li a:hover{text-decoration:underline}
.rows li:has(a:hover){border-color:var(--lagoon);background:color-mix(in oklab,var(--card) 94%,var(--lagoon))}
.rows li .mute{font-size:13px}
/* Sayı taşıyan satır kutucuk diline döner: ad solda, stok rozeti sağda.
   Sütun düzeninde sayı alt satıra düşüyor ve .tile-n ile aynı bilgi iki
   ayrı biçimde görünüyordu. Arşivdeki iki satırlı kayıtlar sütunda kalır. */
.rows li:has(>.count){flex-direction:row;align-items:center;gap:10px}
.rows li:has(>.count) a{flex:1;min-width:0}
.rows li>.count{flex:none;font-size:12px;font-weight:600;color:var(--lagoon);background:var(--sand);border-radius:999px;padding:4px 9px;white-space:nowrap}

/* misc blocks */
.toast{background:var(--sand);padding:10px 12px;border-radius:10px;margin:0 0 12px}
.toast-live{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;margin:0;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-size:14px;box-shadow:0 2px 10px rgb(28 25 23 / .2)}
.empty{background:var(--sand);padding:20px 16px;border-radius:12px;text-align:center}
.empty p{margin:0 0 6px}
.empty p:last-child{margin:12px 0 0}
.empty-mark{width:72px;height:72px;display:block;margin:0 auto 8px}

/* §11 iskelet: kart yerine 4:5 kutu, yükleme sırasında layout zıplamaz. */
.skeleton{aspect-ratio:4/5;border-radius:12px;background:linear-gradient(100deg,var(--sand) 30%,var(--card) 50%,var(--sand) 70%) var(--line);background-size:250% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{from{background-position:150% 0}to{background-position:-50% 0}}
/* İlanlarım satır listesi kart değil: 4:5 kutu yerine gerçek satır yüksekliği.
   156px ölçülen değer (durum çipi + ad + meta + eylem düğmeleri + dolgu);
   fotoğrafı eksik kayıt uyarı satırıyla bundan uzun olur, o kabul edilir. */
.skeleton.is-row{aspect-ratio:auto;height:156px}
.skeleton.is-row+.skeleton.is-row{margin-top:12px}

.mine{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:12px}
.mine li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px}
.warn-line{color:var(--bad);font-size:13px}
.mine-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mine-actions form{margin:0}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;border-radius:999px;padding:2px 10px;background:var(--sand);color:var(--mute);align-self:flex-start}
.status.live{background:#E7F4ED;color:var(--ok)}
.status.pending{background:#FDF3E7;color:var(--warn)}
.spec{display:flex;gap:8px;overflow-x:auto;padding:8px 0;scrollbar-width:none;margin:0;list-style:none}
.spec::-webkit-scrollbar{display:none}
.spec li{min-height:36px;padding:0 12px;border-radius:999px;background:var(--sand);display:inline-flex;align-items:center;white-space:nowrap;font-size:13px}
.spec li.ok{background:#E7F4ED;color:var(--ok);font-weight:600}
/* §4.12 doğrulama + §4.13 rehber */
.badge-inline{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;border-radius:999px;padding:2px 10px;background:var(--sand);color:var(--mute)}
.badge-inline.ok{background:#E7F4ED;color:var(--ok)}
.steps-list{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.steps-list li{line-height:1.55}
.linkbox{background:var(--sand);border-radius:12px;padding:16px;margin-top:24px}
.linkbox h2{font-size:15px;margin:0 0 6px}
.linkbox h2+*{margin-top:0}
/* Kompakt modülde bölüm ayracı kutunun kendi sınırıyla yarışıyor; yapı aynı
   kalsın diye .sec-head korunur, yalnız çizgi ve dolgu düşer. */
.linkbox .sec-head{margin:0 0 8px;padding-bottom:0;border-bottom:0}
.linkbox .sec-head h2{margin:0}
.linkbox .rows{margin:0 0 14px}
.linkbox .rows li{background:var(--card)}
.linkbox p:last-child{margin:0}

.guide-grid{display:grid;gap:12px;margin:16px 0}
.guide-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;text-decoration:none;color:inherit;transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.guide-card h2{font-size:16px;line-height:1.35;margin:0 0 6px}
.guide-card p{margin:0;font-size:14px;line-height:1.55;color:var(--mute)}
.guide-more{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--lagoon)}
.guide-card:hover{border-color:var(--lagoon);transform:translateY(-1px)}
.guide-card:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
@media(min-width:640px){.guide-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.guide-grid{grid-template-columns:repeat(3,1fr)}}

/* Kağıt üstünde soluk link yığınıyken sayfanın bittiği belli olmuyordu;
   sand blok gövde ile alt bilgiyi ayırır. --mute on --sand kontrastı
   test_text_on_brand_surfaces_meets_wcag_aa ile kilitli. */
/* margin-top yok: `main`in 88px alt dolgusu (ilan sayfasındaki yapışkan CTA
   için ayrılmış) zaten boşluğu veriyor, üstüne margin ölü alan bırakıyordu. */
.site-footer{border-top:1px solid var(--line);background:var(--sand);padding:24px 12px 32px;margin-top:0}
/* main 1100 kutu + 12px padding = 1076 içerik. Footer'ın kendi 12px padding'i
   olduğu için kutuyu 1076'ya indirmek linkleri gövde kolonuna hizalar; 1100'de
   12px sola kayıyordu. */
.footer-matrix{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;max-width:1076px;margin:0 auto}
.footer-matrix>div:last-child{grid-column:1/-1}
.footer-matrix h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin:0 0 8px;font-weight:600}
.footer-matrix div{display:flex;flex-direction:column;gap:2px}
.footer-matrix>div:last-child{flex-direction:row;flex-wrap:wrap;gap:4px 14px}
.footer-matrix>div:last-child h2{flex:1 0 100%;margin:0}
.footer-matrix a{min-height:28px;display:inline-flex;align-items:center;font-size:13px;color:var(--mute);text-decoration:none}
.footer-note{max-width:1076px;margin:16px auto 0;font-size:13px;line-height:1.5;color:var(--mute)}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;max-width:1076px;margin:12px auto 0;padding-top:12px;border-top:1px solid var(--line)}
.footer-legal a{font-size:13px;color:var(--mute);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.age-mark{font-size:12px;font-weight:600;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
@media(min-width:720px){
  .footer-matrix{grid-template-columns:repeat(3,1fr)}
  .footer-matrix>div:last-child{grid-column:auto;flex-direction:column}
}

/* ---------------------------------------------------------------------------
   Hareket katmanı — playbook §9
   Süre 150–200ms, yalnız opacity + transform/translate, `transition: all` yok.
   Zamana bağlı döngü yok (§9 otomatik carousel yasağı): giriş animasyonları
   kaydırma ilerlemesine bağlı, yani kullanıcı durursa hareket de durur.
   --------------------------------------------------------------------------- */

/* Reveal `translate` kullanır, `transform` değil: animasyonun dolgu değeri
   aynı özelliği ezdiği için transform kullanılsa kartın hover kalkışı ölüyordu.
   translate + transform ayrı özellikler olarak birlikte uygulanır. */
@keyframes reveal{from{opacity:0;translate:0 10px}to{opacity:1;translate:none}}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .grid>*,.tiles li,.guide-card,.rows li,.strip-rail .card{
      animation:reveal var(--t-slow) var(--ease) both;
      animation-timeline:view();
      /* Öğe görünür alana girerken tamamlanır; fold üstündeki kartlar
         yüklendiğinde aralığın ötesinde olduğu için hiç titremez. */
      animation-range:entry 0% entry 55%;
    }
  }
}

/* Sonradan gelen içerik (favoriler, filtre sonucu) iskeletin yerine geçerken
   görünür alanda olduğu için kaydırmaya bağlı girişi kaçırıyor; JS tek
   seferlik bu sınıfı ekler. */
@media (prefers-reduced-motion:no-preference){
  .is-entering{animation:reveal var(--t-slow) var(--ease)}
}

/* Chip rayında iki kenar ipucu. Sol fade yalnız gerçekten kaydırılmışsa
   görünür; statik gradyan "devamı var" yalanı söylüyordu. */
@keyframes edge-in{from{opacity:0}to{opacity:1}}
@keyframes edge-out{from{opacity:1}to{opacity:0}}
@supports (animation-timeline:--rail) and (timeline-scope:--rail){
  .rail-wrap{timeline-scope:--rail}
  .rails .chips{scroll-timeline:--rail inline}
  .rail-wrap::before{content:'';position:absolute;top:0;bottom:0;left:0;width:28px;pointer-events:none;z-index:1;background:linear-gradient(to left,rgb(250 248 245 / 0),var(--paper));animation:edge-in linear both;animation-timeline:--rail;animation-range:0 28px}
  .rail-wrap::after{animation:edge-out linear both;animation-timeline:--rail;animation-range:calc(100% - 28px) 100%}
}

/* Katmanlar `hidden` ile açılıp kapanıyor. allow-discrete olmadan display
   anında değişip geçiş hiç görünmüyor; @starting-style de giriş için bir
   başlangıç değeri verir. */
@media (prefers-reduced-motion:no-preference){
  .drawer{translate:0;transition:translate var(--t) var(--ease),display var(--t) allow-discrete}
  .drawer[hidden]{translate:-100%}
  .scrim,.age-gate{opacity:1;transition:opacity var(--t) var(--ease),display var(--t) allow-discrete}
  .scrim[hidden],.age-gate[hidden]{opacity:0}
  .toast-live{opacity:1;transition:opacity var(--t) var(--ease),translate var(--t) var(--ease),display var(--t) allow-discrete}
  .toast-live[hidden]{opacity:0;translate:0 8px}
  .filter-panel{opacity:1;transition:opacity var(--t) var(--ease),translate var(--t) var(--ease),display var(--t) allow-discrete}
  .filter-panel[hidden]{opacity:0;translate:0 -6px}

  @starting-style{
    .drawer{translate:-100%}
    .scrim,.age-gate{opacity:0}
    .toast-live{opacity:0;translate:0 8px}
    .filter-panel{opacity:0;translate:0 -6px}
  }
}

/* SSS accordion: interpolate-size + ::details-content ile yükseklik 0 ↔ auto
   arası akar. content-visibility'nin discrete geçişi zorunlu — listeden
   çıkarılınca açılış hiç çalışmıyor. Desteklemeyen tarayıcı anında açılır. */
@supports (interpolate-size:allow-keywords) and selector(details::details-content){
  @media (prefers-reduced-motion:no-preference){
    :root{interpolate-size:allow-keywords}
    details::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-slow) var(--ease),content-visibility var(--t-slow) allow-discrete}
    details[open]::details-content{block-size:auto}
  }
}

/* Sayfa geçişi kabuk parçalarını yerinde tutar; içerik 200ms çapraz geçer. */
::view-transition-group(root){animation-duration:var(--t-slow)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .card:hover,.guide-card:hover{transform:none}
  .card:hover img{transform:none}
  .skeleton{background:var(--sand)}
  /* Kaydırmaya bağlı girişler zamana bağlı olmadığı için süre sıfırlaması
     onları durdurmaz; adı tümden kaldırmak gerekir. */
  .grid>*,.tiles li,.guide-card,.rows li,.strip-rail .card{animation-name:none}
  .fav:active,.fav:hover{transform:none}
}