/* SosyalLink: portaldan ayrı, profesyonel ve rahat bir sosyal platform görünümü. Düzen editoryal bir sosyal platformdan (başlık + ince çizgi, yatay kaydırmalı kartlar,
   "Topluluktan" listesi, tanıtım şeritleri) esinlenir; kırmızı-beyaz-siyah kimlik korunur. Kalın yazı kullanılmaz (global kural); vurgu renk ve boyutla yapılır.
   Koyu tema, azaltılmış hareket ve 320 px genişlik desteklenir. */
body.slmode .top, body.slmode #tabs, body.slmode #bnav, body.slmode .partilogo, body.slmode #livebar, body.slmode #backslot, body.slmode #fab { display: none !important; }
body.slmode { background: var(--sl-bg, #f5f5f6); padding: 0 !important; margin: 0 !important; }
body.slmode #view, body.slmode #view.mailwide { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.slmode .toast { z-index: 60; }

.slapp {
  --sl-red: #c4161c; --sl-red-d: #8f0f14; --sl-ink: #1f2024; --sl-mute: #6a6c73; --sl-bg: #f5f5f6; --sl-card: #fff; --sl-line: #e4e5e8; --sl-soft: #fdeeee;
  --tint: #ffe3e5; --tint-ink: #8f0f14;
  min-height: 100vh; background: var(--sl-bg); color: var(--sl-ink); font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .slapp { --sl-red: #ff4b52; --sl-red-d: #ff8589; --sl-ink: #ececee; --sl-mute: #a9abb1; --sl-bg: #131416; --sl-card: #1f2124; --sl-line: #33353a; --sl-soft: #2a1d20; }
}
.slapp svg { display: block; width: 100%; height: 100%; }
.slapp h1, .slapp h2, .slapp h3 { font-family: inherit; }

/* ---- üst çubuk ve bölüm menüsü ---- */
.slhd { position: sticky; top: 0; z-index: 30; background: var(--sl-card); border-bottom: 1px solid var(--sl-line); box-shadow: 0 1px 8px rgba(0, 0, 0, .05); }
.slhd-in { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; height: 58px; padding: 0 16px; border-top: 4px solid var(--sl-red); box-sizing: content-box; }
.slback { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; border: 0; border-radius: 99px; background: transparent; color: var(--sl-ink); font-size: 15px; cursor: pointer; }
.slback > span:first-child { font-size: 28px; line-height: 1; margin-top: -3px; color: var(--sl-red); }
.slback:hover { background: var(--sl-soft); }
.slbrand { position: absolute; left: 50%; transform: translateX(-50%); font-size: 26px; letter-spacing: -.3px; color: var(--sl-ink); white-space: nowrap; }
.slbrand b { color: var(--sl-red); }
.slme { width: 40px; height: 40px; padding: 0; border: 2px solid var(--sl-line); border-radius: 50%; background: var(--sl-soft); cursor: pointer; overflow: hidden; }
.slme:hover { border-color: var(--sl-red); }
.slhd button:focus-visible { outline: 3px solid var(--sl-ink); outline-offset: 2px; }
.slnav { border-top: 1px solid var(--sl-line); }
.slnav-in { display: flex; align-items: stretch; max-width: 1180px; margin: 0 auto; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.slnav-in::-webkit-scrollbar { display: none; }
.slnv { flex: 0 0 auto; min-height: 46px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--sl-ink); font-size: 14.5px; cursor: pointer; white-space: nowrap; }
.slnv:hover { color: var(--sl-red); }
.slnv.on { color: var(--sl-red); border-bottom-color: var(--sl-red); }
.slnv-sp { flex: 1 0 12px; }
.slmain { max-width: 1180px; margin: 0 auto; padding: 18px 16px 56px; outline: none; }

/* ---- ana sayfa ---- */
.slhot { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.slhot::-webkit-scrollbar, .slpromo::-webkit-scrollbar, .slvrow::-webkit-scrollbar { display: none; }
.slhot-l { flex: 0 0 auto; color: var(--sl-red); font-size: 14px; padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--sl-line); }
.slhot-c { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--sl-line); border-radius: 99px; background: var(--sl-card); color: var(--sl-ink); font-size: 14px; cursor: pointer; }
.slhot-c:hover { border-color: var(--sl-red); color: var(--sl-red); }
.slpromo { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: none; }
.slpr { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-width: 250px; min-height: 66px; padding: 10px 16px 10px 10px; border: 0; border-radius: 14px; color: #fff; text-align: left; cursor: pointer; background: linear-gradient(120deg, #25262b, #4a1519); box-shadow: 0 3px 10px rgba(0, 0, 0, .16); transition: transform .12s, box-shadow .12s; }
.slpr:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(0, 0, 0, .22); }
.slpr-e { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .18); font-size: 26px; }
.slpr b { display: block; font-size: 15.5px; color: #fff; } .slpr i { display: block; font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .86); margin-top: 1px; }
.pr-1 { background: linear-gradient(120deg, #25262b, #4a1519); } .pr-2 { background: linear-gradient(120deg, #c4161c, #7d0c11); } .pr-3 { background: linear-gradient(120deg, #8f0f14, #25262b); }
.pr-4 { background: linear-gradient(120deg, #b3121a, #e0343b); } .pr-5 { background: linear-gradient(120deg, #3a3b40, #c4161c); }
.slpr:focus-visible, .slhot-c:focus-visible, .sltile:focus-visible, .slvc:focus-visible, .sltr-c:focus-visible, .slcat:focus-visible, .slkind:focus-visible { outline: 3px solid var(--sl-ink); outline-offset: 3px; }

.slsec { margin-top: 30px; }
.slsh { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; margin-bottom: 14px; border-bottom: 1px solid var(--sl-line); }
.slsh-i { width: 32px; height: 32px; flex: none; }
.slsh h2 { margin: 0; font-size: 21px; letter-spacing: -.2px; flex: 1; }
.sllink { border: 0; background: none; color: var(--sl-red); font-size: 14px; cursor: pointer; min-height: 40px; }
.sllink:hover { text-decoration: underline; }

.slvrow { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.slvc { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--sl-ink); text-align: left; cursor: pointer; scroll-snap-align: start; }
.slvc-img { display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--sl-soft); } .slvc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.slvc:hover .slvc-img img { transform: scale(1.05); }
.slvc-lab { margin-top: 6px; font-size: 12.5px; color: var(--sl-red); }
.slvc b { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slvc-m { font-size: 12.5px; color: var(--sl-mute); }

.sltr { display: grid; gap: 12px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sltr-c { display: flex; gap: 12px; min-height: 96px; padding: 8px; border: 1px solid var(--sl-line); border-radius: 14px; background: var(--sl-card); color: var(--sl-ink); text-align: left; cursor: pointer; transition: box-shadow .12s, transform .12s; }
.sltr-c:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .1); transform: translateY(-1px); }
.sltr-img { flex: 0 0 112px; display: grid; place-items: center; border-radius: 10px; background: var(--tint); } .sltr-img svg { width: 62px; height: 62px; }
.sltr-tx { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; flex: 1; }
.sltr-tx b { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sltr-m { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--sl-mute); } .sltr-m i { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sltr-lab { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--tint); color: var(--tint-ink); font-size: 11.5px; }

.slgroup { margin: 0 0 20px; }
.slghead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 10px; }
.slghead h3 { margin: 0; font-size: 17px; color: var(--sl-red); } .slghead span { font-size: 13.5px; color: var(--sl-mute); }
.sltiles { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sltiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sltile { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--sl-line); border-radius: 18px; background: var(--sl-card); color: var(--sl-ink); text-align: left; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.sltile:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .13); transform: translateY(-3px); }
.sltcov { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 7; background: var(--tint); overflow: hidden; }
.sltcov::before, .sltcov::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .5); } .sltcov::before { width: 150px; height: 150px; left: -40px; top: -60px; } .sltcov::after { width: 110px; height: 110px; right: -30px; bottom: -50px; }
.sltart { position: relative; width: 84px; height: 84px; } .slcover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.sltbody { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px; flex: 1; }
.sltbody b { font-size: 19px; letter-spacing: -.2px; } .sltdesc { font-size: 14px; line-height: 1.45; color: var(--sl-mute); flex: 1; }
.sltfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sltstat { font-style: normal; font-size: 12.5px; padding: 3px 10px; border-radius: 99px; background: var(--tint); color: var(--tint-ink); }
.sltgo { font-size: 14px; color: var(--sl-red); }
.slfoot { margin: 26px 6px 0; font-size: 12.5px; color: var(--sl-mute); text-align: center; }

/* bölüm renkleri (yalnızca küçük vurgular: kapak zemini, etiket) */
.t-ilan { --tint: #ffe6d1; --tint-ink: #b3470b; } .t-dys { --tint: #ffe0e3; --tint-ink: #b3121a; } .t-kesfet { --tint: #dcecff; --tint-ink: #1d5fb0; } .t-oda { --tint: #ebe2ff; --tint-ink: #5b3bb3; }
.t-fikir { --tint: #fff1b8; --tint-ink: #8a6500; } .t-oyun { --tint: #ffeccb; --tint-ink: #a85a00; } .t-ogren { --tint: #dcf4e3; --tint-ink: #1a7f4b; } .t-kutup { --tint: #e0e8ef; --tint-ink: #3d5668; }
.t-profil { --tint: #ebe2ff; --tint-ink: #5b3bb3; } .t-mod { --tint: #e6eaee; --tint-ink: #3a3f46; }
@media (prefers-color-scheme: dark) { .sltcov, .sltr-img, .sltstat, .sltr-lab { --tint-ink: #25262b; } .sltr-lab, .sltstat { color: #25262b; } .sltcov::before, .sltcov::after { background: rgba(255, 255, 255, .35); } }

/* ---- bölüm sayfaları ---- */
.slband { display: flex; align-items: center; gap: 16px; padding: 4px 0 16px; border-bottom: 1px solid var(--sl-line); }
.slbart { width: 68px; height: 68px; flex: none; }
.slband h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: -.4px; padding-left: 12px; border-left: 5px solid var(--sl-red); line-height: 1.1; }
.slband p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--sl-mute); max-width: 70ch; padding-left: 17px; }
.slbody { margin-top: 18px; }
#slhost { color: var(--sl-ink); }

/* ---- bölüm içi: alt sekmeler, kategori kutuları, uyarı kutusu ---- */
.sltabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.sltabs > button[role=tab], .sltabs > button[data-itab] { min-height: 42px; padding: 6px 16px; border: 1px solid var(--sl-line); border-radius: 99px; background: var(--sl-card); color: var(--sl-ink); font-size: 14.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sltabs > button[role=tab]:hover, .sltabs > button[data-itab]:hover { border-color: var(--sl-red); }
.sltabs > button[aria-selected=true] { background: var(--sl-ink); border-color: var(--sl-ink); color: var(--sl-card); }
.sltabs-sub > button svg { width: 26px; height: 26px; }
.sltabs .sladd { margin-left: auto; min-height: 42px; border-radius: 99px; padding: 6px 18px; }
.slnote { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--sl-soft); border-left: 5px solid var(--sl-red); font-size: 14px; line-height: 1.45; }
.slcats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); margin-bottom: 14px; }
.slcat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 150px; padding: 0 0 10px; border: 1px solid var(--sl-line); border-radius: 16px; background: var(--sl-card); color: var(--sl-ink); text-align: left; overflow: hidden; cursor: pointer; transition: box-shadow .12s, transform .12s, border-color .12s; }
.slcat:hover { transform: translateY(-2px); border-color: var(--sl-red); box-shadow: 0 8px 18px rgba(0, 0, 0, .1); }
.slcat img { width: 100%; height: 76px; object-fit: cover; display: block; }
.slcat b, .slcat span, .slcat i { padding: 0 12px; } .slcat b { font-size: 16px; } .slcat span { font-size: 12.5px; color: var(--sl-mute); line-height: 1.3; } .slcat i { font-style: normal; font-size: 12.5px; color: var(--sl-red); margin-top: auto; }
.slcat.on { border: 2px solid var(--sl-red); background: var(--sl-soft); }
.slcat-big { grid-column: span 2; min-height: 150px; } .slcat-big img { height: 90px; }
.slcat-all { justify-content: center; align-items: center; text-align: center; background: var(--sl-ink); color: var(--sl-card); border-color: var(--sl-ink); } .slcat-all span { color: inherit; }
.slcat-all.on { background: var(--sl-red); border-color: var(--sl-red); }
.slkinds { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); margin-bottom: 14px; }
.slkind { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--sl-line); border-radius: 16px; background: var(--sl-card); color: var(--sl-ink); text-align: left; cursor: pointer; }
.slkind svg { width: 48px; height: 48px; } .slkind b { font-size: 17px; } .slkind span { font-size: 12.5px; color: var(--sl-mute); }
.slkind.on { border: 2px solid var(--sl-red); background: var(--sl-soft); }
.slkind-istek { border-left: 8px solid #b3121a; } .slkind-teklif { border-left: 8px solid #1a7f4b; } .slkind-hayvan { border-left: 8px solid #a85a00; }
.dyscard-istek { border-left: 6px solid #b3121a !important; } .dyscard-teklif { border-left: 6px solid #1a7f4b !important; } .dyscard-hayvan { border-left: 6px solid #a85a00 !important; }
.sluzhero { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--sl-soft); margin-bottom: 12px; } .sluzhero svg { width: 60px; height: 60px; flex: none; } .sluzhero p { margin: 2px 0 0; font-size: 14px; color: var(--sl-mute); }
.slans { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--sl-soft); border-left: 5px solid #1a7f4b; }
.slexperts { margin-top: 16px; padding: 10px 14px; border: 1px dashed var(--sl-line); border-radius: 14px; } .slexperts summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* içerideki mevcut bileşenler */
#slhost .card { border: 1px solid var(--sl-line); border-radius: 14px; background: var(--sl-card); box-shadow: none; }
#slhost button:not(.slcat):not(.slkind):not(.chip):not(.linkbtn) { border-radius: 99px; }
#slhost button.primary { background: var(--sl-red); border-color: var(--sl-red); color: #fff; }
#slhost .ilcard { border-radius: 16px; border: 1px solid var(--sl-line); }
#slhost input, #slhost select, #slhost textarea { border-radius: 12px; }

/* ---- tablet ve telefon ---- */
@media (max-width: 900px) {
  .sltiles, .sltiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sltr { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .slhd-in { height: 52px; padding: 0 8px; } .slbk { display: none; } .slbrand { font-size: 23px; }
  .slnv { padding: 0 11px; font-size: 14px; min-height: 44px; }
  .slmain { padding: 12px 12px 44px; }
  .sltiles, .sltiles-2 { grid-template-columns: 1fr; }
  .sltile { flex-direction: row; } .sltcov { flex: 0 0 96px; aspect-ratio: auto; } .sltart { width: 62px; height: 62px; } .sltcov::before, .sltcov::after { display: none; }
  .sltbody { padding: 10px 12px; } .sltbody b { font-size: 17px; } .sltdesc { font-size: 13px; }
  .slpr { min-width: 230px; }
  .slvc { flex-basis: 160px; } .sltr-img { flex-basis: 88px; } .sltr-img svg { width: 50px; height: 50px; }
  .slband { gap: 12px; } .slbart { width: 52px; height: 52px; } .slband h1 { font-size: 24px; } .slband p { font-size: 13px; }
  .slcat-big { grid-column: span 1; } .slcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slcat { min-height: 130px; }
  .sltabs .sladd { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .slpr, .sltile, .slcat, .sltr-c, .slvc-img img { transition: none; } }
.slsub { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--sl-red); font-size: 18px; } .slsub span { font-size: 13px; color: var(--sl-mute); }
/* İlan kategori görselleri 16:9 tam görünür (kırpılmaz) */
.slcat img, .slcat-big img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #f7f1ef; }

/* ---- Site genelindeki kimlikle aynı renkler: beyaz kartlar, ince çizgi, kırmızı vurgu; bölümlere özel pastel renk yok ---- */
.t-ilan, .t-dys, .t-kesfet, .t-oda, .t-fikir, .t-oyun, .t-ogren, .t-kutup, .t-profil, .t-mod { --tint: var(--sl-soft); --tint-ink: var(--sl-red-d); }
.sltcov { background: var(--sl-soft); }
.sltcov::before, .sltcov::after { background: rgba(196, 22, 28, .06); }
.slband { background: var(--sl-card); border: 1px solid var(--sl-line); border-radius: 16px; padding: 16px 20px; }
.slband h1 { border-left-color: var(--sl-red); }
.sltile { border-color: var(--sl-line); }
.sltile:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .1); }
.sltgo { color: var(--sl-red); }
.slghead h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sl-red); margin-right: 8px; }
.sltr-c { background: var(--sl-card); border-color: var(--sl-line); }
.sltr-c .sltr-img { background: var(--sl-soft); }
.slpr { background: var(--sl-card); color: var(--sl-ink); border: 1px solid var(--sl-line); box-shadow: none; }
.slpr b { color: var(--sl-ink); } .slpr i { color: var(--sl-mute); } .slpr-e { background: var(--sl-soft); }
.slhot-c { background: var(--sl-card); color: var(--sl-ink); border: 1px solid var(--sl-line); }
.slcat img, .slvc-img img { mix-blend-mode: multiply; }
.slvc-img { background: var(--sl-soft); } .slcat img { background: var(--sl-soft); }
.sltcov.hascov .sltart { display: none; }

.slcat-all { min-height: 0; grid-column: 1 / -1; flex-direction: row; gap: 10px; padding: 12px; } .slcat-all b, .slcat-all span { padding: 0; }

.a3d { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.sltr-img .a3d { width: 72px; height: 72px; } .sltcov .a3d, .slbart .a3d { max-height: 100%; }

/* Ana sayfa: yalnızca bölüm giriş ikonları ve başlıkları */
.slgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1180px; margin: 20px auto 8px; padding: 0 16px; }
.slgo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 150px; padding: 18px 10px 14px; border: 1px solid var(--sl-line); border-radius: 16px; background: var(--sl-card); color: var(--sl-ink); cursor: pointer; transition: box-shadow .12s, transform .12s, border-color .12s; }
.slgo:hover { transform: translateY(-2px); border-color: var(--sl-red); box-shadow: 0 8px 18px rgba(0, 0, 0, .1); }
.slgo:focus-visible { outline: 3px solid var(--sl-ink); outline-offset: 3px; }
.slgo-i { flex: none; overflow: hidden; width: 92px; height: 72px; display: grid; place-items: center; } .slgo-i svg { width: 64px; height: 64px; }
.slgo-t { font-size: 16px; text-align: center; }
@media (max-width: 640px) { .slgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slgo { min-height: 132px; } }
.sltabs-sub .a3d { width: 26px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 6px; } .sltabs-sub svg { width: 26px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.sluzhero .a3d, .sluzhero svg { width: 56px; height: 56px; flex: none; }
.slback[hidden] { display: none; }