/* Keşfet (anasayfa): üst bant, sekmeler, arama, "Ne kadar molan var?", alt bilgi. */
.hello{white-space:nowrap;margin:12px 0 14px;font-size:var(--fs-2xl);line-height:var(--lh-tight);font-weight:var(--fw-black);letter-spacing:var(--ls-tight)}
.hello span{color:var(--green)}
.tabs{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:7px;padding:8px 14px 8px 12px;border-radius:var(--r-pill);font-size:var(--fs-md);font-weight:var(--fw-semi);color:var(--navy-ink);white-space:nowrap}
.tab svg{width:20px;height:20px;stroke-width:1.7;color:#fff}
.tab[aria-selected="true"] svg{color:var(--navy)}
.tab[aria-selected="true"]{background:#fff;color:var(--navy);font-weight:var(--fw-bold)}
/* Arama kartı yatay kayar (koleksiyon.js): önce form, ardından seçili sekmenin
   koleksiyonları, temalar gibi yana kayan kartlar (üç sıra). Form ekran eksi 32 px; arada kenar
   boşluğu kadar boşluk (kartlar dururken görünmez); gölge kesilmesin diye altta boşluk */
.sx{display:flex;gap:16px;margin:-46px 0 -14px;padding-bottom:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;overscroll-behavior-x:contain;scrollbar-width:none;container-type:inline-size}
.sx::-webkit-scrollbar{display:none}
.sx>.search{flex:0 0 calc(100% - 32px);min-width:0;margin-left:16px;scroll-snap-align:start;scroll-snap-stop:always}
.search{background:var(--card);border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(21,32,72,.06),0 6px 16px -6px rgba(21,32,72,.16);padding:6px;position:relative}
/* koleksiyonlar formun yüksekliğinde üç sıra, sütunlar yana uzar; iki sütun ve
   yanında bir sonrakinin yarısı görünür (tema şeridi gibi). Kart yalnızca adı.
   Her sekmenin kartları HTML'de; yalnızca seçili sekmeninki görünür */
/* şeridin sonunda son kart da kenar boşluğu kadar içeride durur: boşluk iç dolguda,
   çünkü Safari kaydırma alanının sonundaki boş öğeyi ve dolguyu saymıyor */
.koll{flex:none;padding-right:16px}
.koll-g{height:100%;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:120px;grid-auto-columns:calc((100cqw - 42px)/2.5);gap:10px}
.koll-g[hidden]{display:none}
.kl{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;min-height:0;padding:10px 12px;border-radius:var(--r-lg);overflow:hidden;color:#fff;background:var(--navy);scroll-snap-align:start}
.kl::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,14,30,.62),transparent 75%)}
.kl b{position:relative;min-width:0;font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
@keyframes kollIn{from{opacity:0;transform:translateY(4px)}}
.koll-g.swap{animation:kollIn var(--t) var(--ease)}
/* ipucu: form ve kartlar birlikte iki kez kısa sola kıpırdar, ilk kartların kenarı görünür */
@keyframes sxNudge{0%,50%,100%{transform:none}25%,75%{transform:translateX(-30px)}}
.sx.nudge>.search,.sx.nudge>.koll{animation:sxNudge 1.6s ease-in-out}
.fld{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);text-align:left;width:100%}
.fld svg{width:21px;height:21px;color:var(--navy)}
.fld small{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);color:var(--mute)}
.fld span{display:block;font-size:var(--fs-base);font-weight:var(--fw-semi);margin-top:1px}
.fld span.hint{color:var(--mute);font-weight:var(--fw-medium)}
/* Nereye doluyken sağda × (seçimi kaldırır); yazı altına girmesin diye sağ boşluk */
#f1.has-x{padding-right:52px}
.fld-x{position:absolute;top:19px;right:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink)}
.fld-x::after{content:"";position:absolute;inset:-4px}
.fld-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none}
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.split .fld+.fld{border-left:1px solid var(--line);border-radius:0 var(--r-md) var(--r-md) 0}
/* Keşfet'in hatırladığı kiminle: aramaya biner, dokununca kalkar */
/* Popüler aramalar: formun altında, sekmeye göre (arama.js) */
.popular{padding:12px 0 2px;margin:0 -6px}
.pop-h{display:flex;align-items:center;gap:6px;padding:0 12px;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--mute)}
.pop-h svg{width:15px;height:15px;color:var(--mute);stroke-width:2.2}
.pchips{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding:8px 12px 6px;scroll-padding-inline:12px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.pchips.end{-webkit-mask-image:none;mask-image:none}
.pchips::-webkit-scrollbar{display:none}
.pc{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px 0 11px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);font-size:var(--fs-md);font-weight:var(--fw-semi);color:var(--ink);white-space:nowrap}
.pc svg{width:15px;height:15px;color:var(--mute)}
.pc[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pc[aria-pressed="true"] svg{color:#fff}
.go{display:block;width:100%;margin-top:6px;background:var(--green);color:var(--navy);border-radius:var(--r-md);font-weight:var(--fw-bold);font-size:var(--fs-base);padding:14px}
.time{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
/* tek sırada dört seçenek: kart zemini yok; açık lacivert şeffaf yuvarlakta ikon, altında ad ve deneyim sayısı */
.tt{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:2px 0;background:none;text-align:center;color:var(--ink)}
.tt .i{width:60px;height:60px;border-radius:50%;background:rgba(40,72,170,.12);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 2px transparent;transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tt .i img{width:40px;height:40px;object-fit:contain}
.tt .x{min-width:0;max-width:100%}
.tt b{display:block;font-size:clamp(10px,3.3vw,13px);font-weight:var(--fw-bold);letter-spacing:var(--ls-snug);line-height:var(--lh-snug);white-space:nowrap}
.tt small{display:block;margin-top:2px;font-size:clamp(10px,3.1vw,11.5px);font-weight:var(--fw-medium);color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.tt[aria-pressed="true"] .i{background:rgba(40,72,170,.2);box-shadow:inset 0 0 0 2px var(--navy)}
.tt[aria-pressed="true"] b{color:var(--navy)}
@media (hover:hover){.tt[aria-pressed="false"]:hover .i{background:rgba(40,72,170,.18)}}
.foot{padding:26px 16px 10px;font-size:var(--fs-sm);color:var(--mute);line-height:var(--lh-loose)}
.foot a{display:inline-block;padding:4px 0;margin:-2px 0;text-decoration:underline;text-underline-offset:2px}
.tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.tabs.end{-webkit-mask-image:none;mask-image:none}
.hello{font-size:var(--fs-2xl);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);word-spacing:.02em}
.fld small{letter-spacing:var(--ls-caps)}
.fld small{font-size:var(--fs-xs)}
.fld span{letter-spacing:0}
.foot{line-height:var(--lh-loose);word-spacing:.04em}

/* Kiminle çipleri (keşif filtresi): sürenin hemen altında, başlıksız */
.with{padding-top:14px}
.clr{font-size:var(--fs-md);font-weight:var(--fw-semi);color:var(--ink);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 4px}
/* son bakılanlar: kart dar ve alçak (cards.js recentCard) */
.rail.recent{gap:10px;padding-top:12px}
/* "Ne kadar molan var?" seçiminin sonucu: ana başlığın altında ikincil başlık */
.sub-sec{padding-top:var(--s-4)}
.sub-sec .hd h2{font-size:var(--fs-h3)}
.empty-r{margin:14px 16px 0;padding:16px;border-radius:var(--r-md);background:var(--soft);font-size:var(--fs-md);color:var(--mute);line-height:var(--lh-body)}
.empty-r b{display:block;color:var(--ink);font-weight:var(--fw-bold)}

/* Yakınımda ne var? Kullanıcı isterse konum; yoksa şehir seçimi */
/* davet kartı belirgin: açık lacivert zemin, sağda konum halkaları, yeşil eylem düğmesi */
.near{margin:24px 16px 0;border-radius:var(--r-lg);background:linear-gradient(135deg,#F2F5FC 0%,#E4EAF7 100%);box-shadow:var(--shadow),inset 0 0 0 1px rgba(21,32,72,.06);overflow:hidden}
.near-in{position:relative;display:flex;align-items:center;gap:8px;padding:16px 0 16px 16px;min-height:150px}
/* arkada saydam harita deseni (Bedir); yazının olduğu sol taraf daha soluk */
.near-in::before{content:"";position:absolute;inset:0;background:url(../img/harita-desen.svg) center/cover no-repeat;opacity:.55;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.6) 45%,#000 75%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.6) 45%,#000 75%);pointer-events:none}
/* yazının başladığı yerden sağa doğru beyazlık: desen yazının arkasında soluklaşır (Bedir) */
.near-in::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 40%,rgba(255,255,255,0) 78%);pointer-events:none}
.near-t{position:relative;z-index:1;flex:1;min-width:0;line-height:var(--lh-snug);padding-right:16px}
.near-t h2{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-snug);color:var(--ink)}
.near-t p{margin-top:4px;max-width:none;white-space:nowrap;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--mute)}
.near-go{display:inline-flex;align-items:center;gap:7px;min-height:40px;margin-top:12px;padding:0 16px 0 13px;border-radius:var(--r-pill);background:var(--green);color:var(--navy);font-size:var(--fs-base);font-weight:var(--fw-bold);box-shadow:0 4px 12px rgba(140,198,63,.35);white-space:nowrap}
.near-go svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.near-go[disabled]{opacity:.7}
.near-note{display:block;margin-top:8px;font-size:var(--fs-xs);color:var(--mute)}
/* Bedir'in Yakınımda ikonu (img/yakinimda.webp) üç halkanın ortasında */
/* ikon sağ altta: açıklama tek satırda üstünden geçer (Bedir) */
.near-map{position:absolute;z-index:1;right:4px;bottom:6px;width:118px;height:118px;display:grid;place-items:center}
.near-map i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(21,32,72,.10);background:rgba(255,255,255,.35)}
.near-map i:nth-child(2){inset:16px;border-color:rgba(21,32,72,.13);background:rgba(255,255,255,.5)}
.near-map i:nth-child(3){inset:32px;border-color:rgba(21,32,72,.16);background:rgba(255,255,255,.7)}
.near-map .near-ic{position:relative;width:56px;height:56px;border-radius:50%;box-shadow:0 6px 16px rgba(21,32,72,.18)}
@media (prefers-reduced-motion:no-preference){.near-map::before{content:"";position:absolute;inset:30px;border-radius:50%;border:2px solid rgba(140,198,63,.55);animation:nearPulse 2.8s ease-out infinite}}
@keyframes nearPulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(2.1);opacity:0}}
@media (max-width:359px){.near-map{width:92px;height:92px}.near-map i:nth-child(2){inset:12px}.near-map i:nth-child(3){inset:24px}.near-map .near-ic{width:46px;height:46px}.near-t p{max-width:none}.near-go{padding:0 13px 0 11px;font-size:var(--fs-md)}}
.near-alt{padding:12px 16px 16px;border-top:1px solid rgba(21,32,72,.08)}
.near-alt p{font-size:calc(var(--fs-md) - var(--fs-mp-down));font-weight:var(--fw-medium);color:var(--ink)}
.near-c{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.near-c button{min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--card);color:var(--ink);font-weight:var(--fw-semi);font-size:calc(var(--fs-md) - var(--fs-mp-down));box-shadow:inset 0 0 0 1px var(--line)}
.near-loc{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:4px 10px 4px 8px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--green-ink);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.near-loc svg{width:14px;height:14px;stroke-width:2.4}
/* konum etiketi başlığın sağında; dar ekranda başlık değil etiket kısalır */
.near-hd h2{flex:0 0 auto}
.near-hd .near-loc{flex:0 1 auto;min-width:0;margin:0 0 0 auto;padding-right:2px}
.near-hd .near-loc span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.near-hd .more-l{display:none}
@media (hover:hover) and (pointer:fine){.near-hd .more-l{display:flex}}
.near-x{position:relative;display:grid;place-items:center;width:22px;height:22px;margin-left:1px;border-radius:50%;color:var(--green-ink)}
.near-x::after{content:"";position:absolute;inset:-11px}
.near-x svg{width:14px;height:14px;stroke-width:2.4}

/* Arama çekmeceleri: nereye (yazdıkça öneri), ne zaman, kaç kişi */
.fld span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld div{min-width:0}
.sh-top{touch-action:none;margin:0 -16px;padding:0 16px 12px;border-bottom:1px solid var(--line)}
.sr-in{display:flex;align-items:center;gap:10px;margin-top:6px;padding:0 4px 0 14px;min-height:52px;border-radius:var(--r-md);border:1.5px solid var(--navy);background:var(--card)}
.sr-in svg{width:20px;height:20px;color:var(--navy)}
.sr-in input{flex:1;min-width:0;height:48px;border:0;outline:0;background:none;font:inherit;font-size:var(--fs-input);font-weight:var(--fw-medium);color:var(--ink);-webkit-appearance:none;appearance:none}
.sr-in input::placeholder{color:var(--mute);font-weight:var(--fw-medium)}
.sr-in input::-webkit-search-cancel-button{display:none}
.sr-clr{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.sr-clr svg{width:18px;height:18px}
.sr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;margin:0 -16px;padding:0 12px calc(24px + env(safe-area-inset-bottom,0px))}
.sr-hd{display:flex;align-items:center;justify-content:space-between;margin:16px 4px 4px;min-height:28px}
.sr-hd h4{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mute)}
.sr-hd .clr{min-height:32px;font-size:var(--fs-sm)}
.sr-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:8px;text-align:left;border-radius:var(--r-md);transition:background-color var(--t) var(--ease)}
.sr-ic,.sr-th{width:42px;height:42px;border-radius:var(--r-sm);flex:none}
.sr-ic{background:var(--soft);display:grid;place-items:center;color:var(--navy)}
.sr-ic svg{width:20px;height:20px}
.sr-row .x{flex:1;min-width:0;line-height:var(--lh-snug)}
.sr-row b{display:block;font-size:var(--fs-base);font-weight:var(--fw-semi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-row mark{background:none;color:var(--navy);font-weight:var(--fw-bold)}
.sr-row small{display:block;margin-top:1px;font-size:var(--fs-sm);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-row em{flex:none;font-style:normal;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--mute);font-variant-numeric:tabular-nums}
.sr-row .chev{width:18px;height:18px;color:var(--mute)}
.sr-row.all{margin-top:10px;background:var(--soft)}
.sr-row.all .sr-ic{background:var(--card)}
.sr-none{margin:16px 4px 0;padding:16px;border-radius:var(--r-md);background:var(--soft)}
.sr-none b{font-size:var(--fs-base);font-weight:var(--fw-bold)}
.sr-none p{margin-top:2px;font-size:var(--fs-md);color:var(--mute);line-height:var(--lh-body)}
.opt[data-none]>span{color:var(--mute)}
.who-l{display:flex;flex-direction:column;margin-top:4px}
.who-r{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;border-bottom:1px solid var(--line)}
.who-r:last-child{border-bottom:0}
.who-r b{display:block;font-size:var(--fs-base);font-weight:var(--fw-semi)}
.who-r small{display:block;font-size:var(--fs-sm);color:var(--mute)}
.who-ok{width:100%;justify-content:center;margin-top:12px;padding:14px;font-size:var(--fs-base)}
@media (max-width:374px){.hello{font-size:clamp(20px,6.1vw,24px)}}
/* "İzmir'de ne yapılır?": şehrin tür, kiminle ve semt sayfalarına bağlar (scripts/seo.mjs) */
.sh-kesfet .kat-il+.kat-il{margin-top:8px}
/* Açılışta yerleşim kayması olmasın (CLS): JavaScript'in dolduracağı bölümlere
   dolu hallerinin yüksekliği kadar yer ayrılır; dolunca kural düşer (:empty).
   Yalnızca JavaScript açıkken: kapalıyken boş yer kalmaz */
@media (scripting:enabled){
  .search:not(:has(.popular))::after{content:"";display:block;height:83px}
  #time:empty{min-height:103px}
  #withChips:empty{min-height:54px}
  #timeRail:empty,#wkRail:empty{min-height:299px}
  #mpBox:empty{min-height:159px}
  #postRail:empty{min-height:251px}
  #wkChips:empty{min-height:52px}
}
@media (scripting:enabled) and (min-width:375px){#time:empty{min-height:108px}}