/* ============================================================================
   SOCIAL STREAM — ersinibil.com sosyal yayın yüzeyi (2026-09 Social Reset)
   Temiz component katmanı. İki Dakika / Video / Yazı kart-hero dilini KULLANMAZ.
   style.css token'larını miras alır (--ink, --ink-2, --ink-3, --line, --amber-2,
   --paper, --display=Jura, --graphite). Platform UI taklidi YOK.
   Componentler: .social-post--text / --photo / --gallery / --video / --link
   ========================================================================== */

/* ---- FEED (liste: /paylasimlar, ana sayfa Sosyal) ---- */
/* VISUAL HIERARCHY PASS (2026-09): stream bandı biraz genişledi (dar blog
   kolonu hissi gitti) ama tam-genişlik DEĞİL; medya ağırlığı düştü → metin
   ana sinyal. Her .social-post kendi içinde tek editoryal nesne: meta → metin
   → bağlam → medya → kaynak, sonra net bir ayrımla sonraki gönderi. Kart
   kutusu / border'lı tweet taklidi / gölge YOK — yalnız hairline + boşluk. */
/* SECOND VISUAL PASS (2026-09): X klonu / kart kataloğu / video arşivi DEĞİL —
   kişisel yayın-iz akışı. Dar-orta okuma sütunu; solda küçük tarih/platform izi
   (rail), ortada metin, medya metnin ALTINDA sakin; postlar arası kutu değil,
   hairline + nefes ritmi. */
.social-feed{max-width:680px;margin:0 auto}
.social-feed--home{max-width:none}                 /* ana sayfa kendi hp-wrap'i içinde */

.social-post{
  display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:26px;
  padding:var(--step-6) 0;border-top:1px solid var(--line);align-items:start;
}
.social-post:first-child{border-top:0;padding-top:0}

/* sol iz: platform + tarih (+ ŞİMDİ) — dikey, küçük, sessiz; kutu YOK */
.social-post__rail{display:flex;flex-direction:column;gap:6px;font-size:10.5px;color:var(--ink-3);
  line-height:1.4;padding-top:3px}
.social-plat{font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:9.5px;color:var(--ink-2)}
.social-post__rail time{font-variant-numeric:tabular-nums}
.social-post__now{align-self:flex-start;font-size:8.5px;font-weight:700;letter-spacing:.1em;color:var(--amber-2);
  border:1px solid var(--amber-2);border-radius:3px;padding:2px 5px 1px}
.social-post__main{min-width:0}

/* metin — PAYLAŞIMIN TAM METNİ ana içerik (kart başlığı DEĞİL). content
   alanından gelir; DB'de asla kısaltılmaz. Feed'de uzunsa yalnız CSS ile clamp.
   TYPOGRAPHY V3: font-size (1.02rem) .an-thread__note ile AYNI — site body
   ölçeğiyle akraba (AUDIT doğruladı, küçültme gerekmiyor). line-height
   (1.66) BİLİNÇLİ OLARAK Anlık'tan (1.55) daha gevşek: Sosyal daha uzun
   editoryal alıntı metni taşıyor, Anlık akış-içi kısa not — kasıtsız
   fark değil, iki ürün karakterinin doğal sonucu. */
.social-post__body{font-size:1.02rem;color:var(--ink);line-height:1.66;overflow-wrap:break-word;
  white-space:normal;margin:0}
.social-post__body a{color:inherit;transition:color .15s}
.social-post__body a:hover{color:var(--ink-2)}
.social-post--text .social-post__body{font-size:clamp(1.08rem,1.4vw,1.24rem);line-height:1.62}
/* ana sayfa feed'i: uzun metni GÖRÜNTÜ seviyesinde kısalt (DB/content'e dokunmadan) —
   homepage'de metin ana sinyal, bölüm yüksekliğini ele geçirmesin diye daha kısa. */
.social-feed--home .social-post__body{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.social-feed--home .social-post--text .social-post__body{-webkit-line-clamp:5}
.social-post__context{font-size:.9rem;color:var(--ink-3);line-height:1.58;margin:14px 0 0;
  padding-left:14px;border-left:2px solid var(--line);overflow-wrap:break-word}
.social-feed--home .social-post__context{font-size:.86rem;margin-top:10px}
/* eski kısa etiket sınıfı — geriye dönük uyum (content boşsa) */
.social-post__lead{font-family:var(--display);font-weight:500;color:var(--ink);line-height:1.34;font-size:1.24rem;margin:0}
.social-post__lead a{color:inherit}

/* medya bloğu — paylaşımın DEVAMI, ana sinyal değil. Sınırları belli, sayfa
   ağırlığı kontrollü; kaynak oranı layout'u patlatamaz. (Medyanın KENDİSİNE
   dokunulmaz — yalnız sayfadaki ağırlığı.) */
.social-post__media{display:block;width:100%;max-width:380px;margin-top:18px;position:relative;
  border-radius:10px;overflow:hidden;background:var(--graphite)}
.social-post__media img,.social-post__media video{display:block;width:100%;height:auto}
/* foto: doğal oran korunur, cover-crop YOK; yalnız çok uzun dikeyler sınırlanır */
.social-post--photo .social-post__media{max-height:520px}
.social-post--photo .social-post__media img{max-height:520px;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
.social-post--photo .social-post__media--portrait{max-width:340px}
/* video feed'de: poster + play işareti, oynatıcı YOK (detayda oynar) */
.social-post--video .social-post__media,.social-post--link .social-post__media{aspect-ratio:16/9}
.social-post--video .social-post__media img,.social-post--link .social-post__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.social-post--video .social-post__media--portrait{aspect-ratio:4/5;max-width:300px}
.social-post__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.social-post__play::after{content:'';border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;margin-left:3px}

/* ANA SAYFA — mini stream: rail'i AÇMA (dar sütun), platform+tarih tek satır
   iz olarak metnin üstünde; medya KOMPAKT önizleme, dikey dev poster YOK. */
.social-feed--home .social-post{display:block;padding:var(--step-4) 0}
.social-feed--home .social-post:first-child{padding-top:6px}
.social-feed--home .social-post__rail{flex-direction:row;align-items:center;gap:8px;margin-bottom:9px;padding-top:0}
.social-feed--home .social-post__media{max-width:240px;margin-top:12px}
.social-feed--home .social-post--video .social-post__media,
.social-feed--home .social-post--link .social-post__media,
.social-feed--home .social-post--video .social-post__media--portrait{aspect-ratio:16/9;max-width:260px}
.social-feed--home .social-post--photo .social-post__media,
.social-feed--home .social-post--photo .social-post__media--portrait{max-width:260px;max-height:180px}
.social-feed--home .social-post--photo .social-post__media img{max-height:180px}
.social-feed--home .social-post__play{width:38px;height:38px}
.social-feed--home .social-post__play::after{border-width:6px 0 6px 9px}
/* link (YouTube) feed'de: kompakt önizleme + rozet */
.social-post__linkbadge{position:absolute;left:10px;bottom:10px;font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);border-radius:4px;padding:4px 7px 3px}

.social-post__src{display:inline-flex;align-items:center;gap:4px;margin-top:14px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber-2);transition:color .15s}
.social-post__src:hover{color:var(--ink)}

/* tüm gönderi tıklanabilir (kaynak linki hariç). NOT: `.social-post a`
   kuralından daha yüksek specificity ŞART — yoksa __hit position:relative'e
   düşer ve grid'de bir hücre işgal eder (rail/main yer değiştirir). */
.social-post{position:relative}
.social-post a{position:relative;z-index:2}
.social-post .social-post__hit{position:absolute;inset:0;z-index:1}

/* ---- /paylasimlar sayfa çerçevesi ----
   SITE HERO STANDARDIZATION V4 (2026-09-14): .social-page__head/__eyebrow/
   __title/__intro TAMAMEN KALDIRILDI — yerini site geneliyle AYNI .pg-hero.
   pg-hero--light bileşeni aldı (bkz. paylasimlar.php + style.css .pg-hero).
   .social-page artık YALNIZ filtre+feed'i sarıyor, üst boşluğu diğer 7
   sayfanın hero-sonrası içerik ritmiyle (step-5/step-6) AYNI. Feed'in
   kendi 680px ekseni (.social-filter/.social-page__wrap) DEĞİŞMEDİ. */
.social-page{background:var(--paper);padding:var(--step-5) 0 var(--step-6)}
.social-page__timeline-link{max-width:680px;margin:0 auto var(--step-4)}
.social-page__wrap{max-width:680px;margin:0 auto;display:block}
/* opsiyonel çok hafif yan filtre — akışı bastırmaz */
.social-filter{display:flex;flex-wrap:wrap;gap:8px;max-width:680px;margin:0 auto var(--step-4)}
.social-filter a{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);border-radius:5px;padding:6px 11px;transition:all .15s}
.social-filter a:hover{border-color:var(--ink-3);color:var(--ink)}
.social-filter a.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---- DETAY (/paylasim/<slug>) — VIDEO DETAIL / İki Dakika dili DEĞİL ---- */
.social-detail{background:var(--paper);padding:clamp(44px,7vw,84px) 0 clamp(56px,8vw,96px)}
.social-detail__inner{max-width:680px;margin:0 auto;padding:0 24px}
.social-detail__meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3);margin-bottom:var(--step-3);flex-wrap:wrap}
.social-detail__label{font-weight:600;color:var(--ink-2)}
/* PAYLAŞIMIN TAM METNİ — merkezde, doğal, büyük yapay hero DEĞİL */
.social-detail__text{font-size:clamp(1.12rem,2vw,1.32rem);color:var(--ink);line-height:1.72;
  margin:0 0 var(--step-4);overflow-wrap:break-word;white-space:normal}
.social-detail__context{font-size:.98rem;color:var(--ink-3);line-height:1.7;margin:var(--step-4) 0;
  padding-left:16px;border-left:2px solid var(--line)}
.social-detail__context-k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.social-detail__media{margin:var(--step-4) 0;border-radius:12px;overflow:hidden;background:var(--graphite)}
.social-detail__media img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;margin:0 auto}
.social-detail__media--portrait{max-width:440px;margin-left:auto;margin-right:auto}
.social-detail__media video{display:block;width:100%;height:auto;background:#000}
.social-detail__media .video-embed{position:relative;padding-top:56.25%;height:0}
.social-detail__media .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.social-detail__pending{padding:22px;text-align:center;color:var(--on-dark-2,#bbb);font-size:13px}
.social-detail__body{font-size:1.02rem;color:var(--ink);line-height:1.8;margin:var(--step-4) 0}
.social-detail__body p{margin:0 0 1em}
.social-detail__src{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber-2);transition:color .15s;margin-top:var(--step-3)}
.social-detail__src:hover{color:var(--ink)}
.social-detail__nav{display:flex;justify-content:space-between;gap:16px;margin-top:var(--step-6);
  padding-top:var(--step-4);border-top:1px solid var(--line)}
.social-detail__nav a{flex:1 1 0;min-width:0;font-size:12px;color:var(--ink-3);transition:color .15s}
.social-detail__nav a:hover{color:var(--ink)}
.social-detail__nav .n-next{text-align:right}
.social-detail__nav .n-k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.social-detail__nav .n-t{display:block;color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* MOBİL: detay sayfasındaki native <video> oynatıcı, fixed bottom-nav'ın
   ÜSTÜNDE kalacak kadar sınırlanır — kontrol çubuğu bar'ın arkasında kalmaz.
   (Kök neden global fixed-nav yerleşimi; --nav-h style.css'te TEK KAYNAK.
   Burada yalnız sosyal detay medyasının yükseklik tavanı.) */
@media(max-width:768px){
  .social-detail__media--portrait{max-width:min(340px,82vw)}
  .social-detail__media video{
    margin:0 auto;
    max-height:70vh;
    max-height:calc(100dvh - 56px - var(--nav-h) - env(safe-area-inset-bottom) - 44px);
  }
}

@media(max-width:640px){
  /* MOBİL: metin-first. Rail dikey sütun DEĞİL — platform/tarih küçük tek
     satır iz olarak metnin üstünde; medya ekranı ele geçirmez. Uygulama
     chrome'u taklidi yok. Her paylaşımın başı/sonu rahat algılansın. */
  .social-post{display:block;padding:calc(var(--step-4) + 8px) 0}
  .social-post__rail{flex-direction:row;align-items:center;gap:8px;margin-bottom:11px;padding-top:0;font-size:10.5px}
  .social-post--text .social-post__body{font-size:1.12rem;line-height:1.58}
  .social-post__body{font-size:1rem}
  .social-post__media{margin-top:15px;max-width:100%}
  .social-post--photo .social-post__media--portrait,
  .social-post--video .social-post__media--portrait{max-width:78vw}
  .social-post__lead{font-size:1.14rem}
  .social-post--text .social-post__lead{font-size:1.28rem}
  .social-feed--home .social-post{padding:18px 0}
  .social-detail__inner{padding:0 20px}
  .social-detail__nav{flex-direction:column;gap:14px}
  .social-detail__nav .n-next{text-align:left}
}