/* ═══════════════════════════════════════════════════════════════════════
   HARMAN (sosyal bölüm) — tasarim/harman.html mockup'ının renk sistemi
   Yüklenme: templates/pages/feed.php ▸ $extra_css
   (front_header.php app.css'ten SONRA basıyor, yani burası app.css'i ezebilir.)

   AYRI DOSYA, ÇÜNKÜ: app.css'te bu bölümün 87 birebir dize kilidi var;
   yeni kuralları oraya yazmak o kilitleri kırma riski taşıyor.

   :ROOT KULLANILMAZ. Mockup jenerik adları (--bg, --line, --text, --muted,
   --card, --blue) :root düzeyinde tanımlıyor. Bu adlar app.css'te ORTAK
   bileşenlerin kaynağı; global tanımlanırsa siteye yayılır.
   En tehlikelisi --text: app.css'te 20 yerde KULLANILIYOR ama hiç
   TANIMLANMIYOR — tanımlanırsa alt menü ve sw-/pc-/wz- aileleri açık temada
   görünmez olur. Bu yüzden tokenlar --hs- önekli ve .hs kapsamında.
   Kilit: tests/harman_revizyon.test.php

   TEK TEMA (koyu). Harman BUGÜN DE tek temalı: app.css'teki .nx,.hm bloğunun
   açık tema varyantı yok. Koyu kalması bu yüzden regresyon değil.

   MAVİ YOK. app.css'te yazılı kural: doğrulama rozeti dışında sosyal
   yüzeylerde mavi kullanılmaz. Mockup maviyi yalnız Mesajlar ve Bildirimler
   ekranlarında kullanıyor; ikisi de bu fazın dışında.
   ═══════════════════════════════════════════════════════════════════════ */

.hs,
body.hs-body{
  /* TOKENLAR GÖVDEDE DE TANIMLI, yalnız .hs'te DEĞİL.
     .app, .hs'in EBEVEYNİ (ölçüldü: app.contains(hs) === true). Tokenlar
     yalnız .hs'te dururken bir alttaki "body.hs-body .app{...
     background:var(--hs-bg)}" kuralı SESSİZCE ÖLÜYDU — özel özellikler
     yalnız ATA zincirinden miras alınır, çocuktan ebeveyne çıkmaz.
     Aynı ders harman-dm.css:11-20'de yazılı: tokenlar .hs-dm'de kalınca
     giden mesaj balonları görünmez olmuştu.
     :root'a taşımak YASAK (jenerik token sızar, test kilidi var); çıplak
     "body" da yasak — gövde SINIFI ikisini de kırmadan çözüyor. */
  /* Yüzeyler — mockup :root'undan birebir */
  --hs-bg:#0b0d10;
  --hs-panel:#111419;
  --hs-panel2:#161a20;
  --hs-soft:#1d222a;
  --hs-line:rgba(255,255,255,.085);

  /* Metin */
  --hs-t:#f4f6f8;
  --hs-t2:#8f98a5;

  /* Vurgu — ALTIN. Kullanıcı kararı: mockup paleti kazandı.
     Eski sosyal palet mor/pembeydi (app.css .nx,.hm ▸ --hm-purple/--hm-pink);
     o tokenlar yerinde duruyor, bu dosya onları EZMİYOR — geçiş fazlı. */
  --hs-accent:#f5c542;
  --hs-accent2:#ffe07d;

  /* Durum */
  --hs-danger:#ff5f67;
  --hs-ok:#62d49d;

  /* Kap genişliği — başlık ve düzen ORTAK okur (bkz. .hs-layout/.hm-head-in) */
  --hs-wrap:1220px;

  /* Geometri */
  --hs-r:18px;
  --hs-shadow:0 22px 60px rgba(0,0,0,.34);
}

/* ═══════════ ZEMİN: ESKİ PARILTI KATMANI KAPATILIYOR ═══════════
   Harman kabuğu geriye uyum için hâlâ "nx hm hs" sınıflarını taşıyor
   (templates/partials/harman_shell_open.php:34) — app.css'teki bileşen
   aileleri o adlara bağlı. Yan etkisi: app.css:1106/1276'daki
   .app>.nx:before katmanı Harman yüzeylerine de basılıyordu. Tarayıcıda
   ölçülen içerik 540px yükseklikte mor (139,58,245,.26) + pembe
   (251,68,100,.16) + turuncu radyal yıkama ve sekiz noktalı yıldız alanı.

   Mockup'ın akış zemini DÜZ var(--bg) = #0b0d10; parıltı Harman'ın
   kimliği değil, yerine geçtiği "Nexus parlak" tasarımının kalıntısı.
   Kabuk sınıfları düşürülemez (app.css bileşenleri onlara bağlı), o yüzden
   katman burada kapatılıyor.

   content:none — background:none yerine: kutu tamamen kalksın, kaydırma
   alanında ölü bir 540px'lik mutlak katman kalmasın.

   ÖZGÜLLÜK HESAPLANDI, göz kararı değil: rakip .app>.nx:before = (0,2,1);
   bu kural (0,3,1). app.css'e DOKUNULMUYOR (yüzlerce dize kilidi).
   Kilit: tests/harman_revizyon.test.php */
body.hs-body .app>.hs::before{content:none}

/* Gövde de aynı zemine boyanıyor. .app tüm yüksekliği kapladığı için
   normalde görünmüyor, ama aşırı kaydırma (rubber-band) sırasında
   app.css'in --body-bg'si (#070b14, mavimsi) kenardan sızıyordu.

   İKİ KURAL, ÇÜNKÜ RAKİP TEMA KAPSAMLI. app.css:24 şunu yazıyor:
   :root[data-theme="dark"] body{background:var(--body-bg)} → (0,2,1).
   Tek başına "body.hs-body" (0,1,1) ile yazıldığında kural TARAYICIDA
   ÖLÇÜLDÜ ve TUTMADI (gövde #070b14 kaldı) — :root bir pseudo-SINIF,
   eleman değil. Alt menüde aynı hata bir kez yapılmıştı (harman-nav.css).
   Öznitelik varken (0,3,1) ile açık ara kazanılıyor; öznitelik hiç yoksa
   rakip yalnızca app.css:41'deki çıplak "body" (0,0,1) oluyor ve ilk
   kural yetiyor. Berabere bırakıp kaynak sırasına güvenmiyoruz. */
body.hs-body{background:var(--hs-bg)}
:root[data-theme] body.hs-body{background:var(--hs-bg)}

/* ═══════════ DÜZEN ═══════════
   Mockup tabanı masaüstü: 1220px kap, 248px + 640px + 290px üç kolon.
   ≤760px'te iki yan kolon gizlenir, akış tek başına kalır — mobil deneyim
   bugünküyle aynı ve gezinme zaten alt menüde (bottom_nav.php).
   Bu sayfa sitenin --app-w:500px kabını BİLEREK aşıyor; başka sayfa etkilenmiyor. */
/* GENİŞLİK TEK KAYNAKTAN (--hs-wrap): başlık ve düzen aynı tokenı okuyor.
   Ayrı sayılar yazılsaydı ≤1040px kırılmasında sessizce ayrışırlardı —
   düzen 900'e düşerken başlık 1220'de kalır, logo içerikten kayardı. */
.hs .hs-layout{max-width:var(--hs-wrap);margin:0 auto;display:grid;
  grid-template-columns:248px minmax(0,640px) 290px;gap:22px;padding:18px 18px 0}

/* ── BAŞLIK: çubuk tam genişlik, içerik kapsayıcıda ──
   app.css'te zemin rgba(0,8,21,.9) (mavi baskın) ve alt çizgi #1f293c idi;
   altın yüzeyde lacivert bir şerit olarak duruyordu. */
.hs .hm-head{padding:0;height:66px;gap:0;
  background:rgba(11,13,16,.9);border-bottom:1px solid var(--hs-line)}
.hs .hm-head-in{width:min(var(--hs-wrap),100%);margin:0 auto;height:100%;
  padding:0 18px;display:flex;align-items:center;gap:22px}
.hs .hm-head-in .hm-head-r{margin-left:auto}

/* Arama kutusu — mockup .desktop-search (flex:1, en fazla 430px). */
.hs .hm-search{flex:1;min-width:0;max-width:430px;height:42px;display:flex;align-items:center;gap:9px;
  padding:0 13px;border:1px solid var(--hs-line);border-radius:14px;background:var(--hs-panel);
  color:var(--hs-t2)}
.hs .hm-search:focus-within{border-color:var(--hs-accent)}
.hs .hm-search svg{flex:none}
.hs .hm-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--hs-t);
  font:inherit;font-size:12.5px;outline:0}
.hs .hm-search input::placeholder{color:var(--hs-t2)}

/* Mesaj rozeti ALTIN, bildirim KIRMIZI: aynı renk olsalardı hangisinin ne
   olduğu yalnız ikondan anlaşılırdı.
   ÖZGÜLLÜK ÖLÇÜLDÜ: ilk yazımda ".hs .hm-badge-msg" (0,2,0) yazılmıştı ve
   aşağıdaki "body.hs-body .hm-badge" (0,2,1) onu yeniyordu — rozet
   tarayıcıda hâlâ kırmızı geliyordu. İki sınıfı birleştirmek (0,3,1)
   yapıyor; rozet o an gizli olduğu için gözle fark edilmezdi. */
body.hs-body .hm-badge.hm-badge-msg{background:var(--hs-accent);color:#151109;
  box-shadow:none}
/* Kolonsuz varyantlar: kabuk rail=false / aside=false ile çağrıldığında
   ızgara sütun sayısı da düşmeli, yoksa akış 640px'te kalıp sayfanın
   solunda boş bir sütun bırakır.
   SIRA ÖNEMLİ: bu kurallar temel .hs-layout'tan SONRA gelmeli — ikisi de
   (0,2,0) özgüllüğünde, önce yazılsalar temel kural onları ezer. */
/* GENİŞ VARYANT: orta kolon sabit 640px yerine kalan alanı kaplar.
   Mesajlar iki panelli (liste + sohbet) ve 640px'e sığmıyor. */
.hs .hs-layout-wide{grid-template-columns:248px minmax(0,1fr) 290px}
.hs .hs-layout-norail{grid-template-columns:minmax(0,640px) 290px}
.hs .hs-layout-noaside{grid-template-columns:248px minmax(0,640px)}
.hs .hs-layout-norail.hs-layout-noaside{grid-template-columns:minmax(0,760px);max-width:800px}
/* GENİŞ + SAĞ KOLONSUZ (mesajlar): iki sınıf birlikte kullanılınca
   ÖZGÜLLÜK EŞİT (0,2,0) ve KAYNAK SIRASI karar veriyordu — noaside
   sonra geldiği için orta kolon 640px'e sabitleniyor, "geniş" iptal
   oluyordu. Birleşik seçici (0,3,0) ikisini de yeniyor. */
.hs .hs-layout-wide.hs-layout-noaside{grid-template-columns:248px minmax(0,1fr)}
.hs .hs-main{min-width:0}
.hs-rail{position:sticky;top:84px;height:max-content;display:flex;flex-direction:column;gap:12px}

/* ── Sol kolon ── */
.hs-nav{display:flex;flex-direction:column;gap:2px}
.hs-nav-i{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;
  color:var(--hs-t2);font-size:14px;font-weight:700;text-decoration:none;transition:.15s}
.hs-nav-i:hover{background:var(--hs-panel2);color:var(--hs-t)}
.hs-nav-i.active{background:var(--hs-panel);color:var(--hs-t)}
.hs-nav-i.active svg{color:var(--hs-accent)}
.hs-nav-n{margin-left:auto;min-width:19px;height:19px;border-radius:99px;display:grid;place-items:center;
  background:var(--hs-danger);color:#fff;font-size:10px;font-weight:800;padding:0 5px}
/* text-decoration ŞART: misafirde bu sınıfı <a> taşıyor (giriş çağrısı),
   girişlide <button>. Tarayıcı bağlantıya varsayılan altı çizgi veriyor. */
.hs-create{display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border:0;
  border-radius:12px;background:var(--hs-accent);color:#151109;font-size:14px;font-weight:900;
  cursor:pointer;text-decoration:none}
.hs-create:active{transform:scale(.985)}
.hs-me{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;
  border:1px solid var(--hs-line);background:var(--hs-panel);text-decoration:none}
.hs-me-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--hs-soft);color:var(--hs-t);font-size:13px;font-weight:800}
.hs-me-av img{width:100%;height:100%;object-fit:cover}
.hs-me-t{min-width:0}
.hs-me-t b{display:block;font-size:12.5px;color:var(--hs-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-me-t small{display:block;font-size:10px;color:var(--hs-t2)}

/* ── Sağ kolon ── */
.hs-card{display:block;padding:13px 14px;border:1px solid var(--hs-line);border-radius:var(--hs-r);
  background:var(--hs-panel);text-decoration:none;color:inherit}
.hs-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hs-card-h b{font-size:12.5px;color:var(--hs-t)}
.hs-card-h a,.hs-card-h span{font-size:10.5px;color:var(--hs-accent);text-decoration:none}
.hs-wx-b{display:flex;align-items:center;gap:10px}
.hs-wx-e{font-size:26px;line-height:1}
.hs-wx-b b{font-size:24px;font-weight:900;color:var(--hs-t)}
.hs-wx-b small{color:var(--hs-t2);font-size:11px}
.hs-trend{display:flex;align-items:center;gap:10px;padding:7px 0;text-decoration:none}
.hs-trend-n{width:20px;font-size:14px;font-weight:900;color:var(--hs-accent);flex:0 0 20px}
.hs-trend-t b{display:block;font-size:12.5px;color:var(--hs-t)}
.hs-trend-t small{display:block;font-size:10px;color:var(--hs-t2);margin-top:1px}
.hs-people{display:flex;align-items:center;gap:9px;padding:7px 0}
.hs-people-u{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-decoration:none}
.hs-people-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--hs-soft);color:var(--hs-t);font-size:13px;font-weight:800}
.hs-people-av img{width:100%;height:100%;object-fit:cover}
.hs-people-t{min-width:0}
.hs-people-t b{display:block;font-size:12.5px;color:var(--hs-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-people-t small{display:block;font-size:10px;color:var(--hs-t2)}
.hs-follow{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;height:29px;padding:0 10px;border-radius:9px;
  border:1px solid var(--hs-line);background:transparent;color:var(--hs-accent);font-size:11px;font-weight:800;cursor:pointer}
.hs-follow.on{background:var(--hs-soft);color:var(--hs-t2)}
.hs-comm-b{display:flex;align-items:center;gap:10px;color:var(--hs-accent)}
.hs-comm-b b{display:block;font-size:12.5px;color:var(--hs-t)}
.hs-comm-b small{display:block;font-size:10px;color:var(--hs-t2)}

/* ── Dar masaüstü: sağ kolon düşer ── */
@media(max-width:1040px){
  .hs,body.hs-body{--hs-wrap:900px}
  .hs .hs-layout{grid-template-columns:210px minmax(0,640px)}
  .hs .hs-layout-wide{grid-template-columns:210px minmax(0,1fr)}
  .hs-rail-r{display:none}
  /* Kolonsuz varyantlar burada da geçerli olmalı: yukarıdaki kural onları
     ezerdi ve rail=false çağıran sayfa 210px'lik BOŞ bir sütun taşırdı. */
  .hs .hs-layout-norail{grid-template-columns:minmax(0,640px);max-width:660px}
  /* GENİŞ + SAĞ KOLONSUZ burada TEKRAR yazılmalı. Yukarıdaki birleşik
     kural (0,3,0) bu bloktaki .hs-layout-wide'ı (0,2,0) yeniyor — medya
     sorgusu özgüllük EKLEMİYOR. Yazılmasaydı sol kolon bu genişlikte de
     248px'te kalır, mesajlarda sohbet paneline 304px düşerdi (ölçüldü). */
  .hs .hs-layout-wide.hs-layout-noaside{grid-template-columns:210px minmax(0,1fr)}
}
/* ── Mobil: iki kolon da düşer, bugünkü deneyim korunur ── */
@media(max-width:760px){
  .hs,body.hs-body{--hs-wrap:100%}
  .hs .hs-layout{display:block;padding:0}
  /* Dar ekranda başlık da diğer bloklarla aynı 13px oluğu kullanıyor. */
  .hs .hm-head{height:58px}
  .hs .hm-head-in{padding:0 13px;gap:10px}
  /* 430px'lik kutu 375px ekranda markayı ezerdi: kutu gizlenir, yerini
     ikon alır. İkisinden biri HER ZAMAN görünür — yoksa aramaya
     başlıktan erişim tamamen kapanırdı. */
  .hs .hm-search{display:none}
  /* Mockup dar ekranda ikonları küçültüp aralığı daraltıyor
     (.icon-btn 38px, .top-actions gap 5px) — üç ikon + avatar 375px'te
     markayla birlikte sığsın. */
  body.hs-body .hm-ic{width:38px;height:38px;flex:0 0 38px}
  body.hs-body .hm-head-r{gap:6px}
  body.hs-body .hm-me{width:36px;height:36px;flex:0 0 36px}
  .hs-rail{display:none}
}

/* ═══════════ KAP GENİŞLETME ═══════════
   Site kabı .app{max-width:500px}. Harman masaüstünde 1220px'e açılıyor.
   Sınıf yalnız /akis'te basılıyor (feed.php $body_class), diğer sayfalar
   olduğu gibi kalıyor.
   Alt menü ve üst başlık DOKUNULMADAN 500px'te kalırsa geniş sayfanın
   ortasında dar bir şerit gibi durur; onlar da bu sayfada genişliyor. */
body.hs-body .app{max-width:none;background:var(--hs-bg)}
body.hs-body .hs{background:var(--hs-bg)}
@media(min-width:761px){
  /* Masaüstünde gezinme SOL KOLONDA; alt menü orada gereksiz.
     ≤760px'te alt menü aynen duruyor — mobil gezinme değişmedi. */
  body.hs-body .bottomnav{display:none}
  body.hs-body .hs{padding-bottom:26px}
}

/* ═══════════ AKIŞ KARTI ═══════════
   YALNIZ .hs kapsamında. Kart partial'ı 6 sayfada paylaşılıyor; buradaki
   kurallar Harman dışına sızmıyor, konu sayfaları eski görünümünü koruyor. */
/* YATAY MARGIN SIFIR. app.css ".hm-post"a "margin:0 14px 12px" veriyordu;
   akıştaki DİĞER kartların (besteci, gruplar, etiketler) hiçbirinde yatay
   margin yok, hepsi kolonu kaplıyor. Gönderi kartı bu yüzden onlardan
   28px dar kalıyor ve "ikinci bir dolgu" gibi görünüyordu (ölçüldü:
   diğerleri 398→1000, gönderi 412→986). */
.hs .hs-post{border:1px solid var(--hs-line);background:var(--hs-panel);
  border-radius:20px;overflow:hidden;margin:0 0 14px;box-shadow:0 1px 0 rgba(255,255,255,.02)}
.hs .hm2-more{margin-left:0;margin-right:0}
.hs .hs-post .nx-ph{display:flex;align-items:center;padding:14px 14px 11px;gap:10px}
.hs .hs-post .nx-pav{width:42px;height:42px;flex:0 0 42px;border-radius:50%}
.hs .hs-post .nx-pn{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--hs-t)}
.hs .hs-post .nx-pl{font-size:10.5px;color:var(--hs-t2);margin-top:3px}
.hs-tier{display:inline-flex;align-items:center}
.hs-tier .tier-chip-label{display:none}

/* Gövde YIĞILMIŞ: metin tam genişlikte, medya altında.
   .hm-wide sınıfı hâlâ basılıyor ama burada anlamı yok — .hs dışındaki
   sayfalar onu kullanmaya devam ediyor. */
/* İKİ DOLGU ÜST ÜSTE BİNİYORDU: app.css ".hm-body"ya 13px, harman.css
   ".hm-txt"e 14px veriyor ve ikisi İÇ İÇE — metin 27px içeride başlıyordu
   (ölçüldü: başlık 427, metin 440). Gövdenin dolgusu sıfırlandı; yatay
   girintiyi TEK yer veriyor (.hm-txt), böylece metin başlık ve istatistik
   satırıyla aynı hizada.
   Yan etkisi iyi: medya da gövdenin çocuğu olduğu için artık kartın tam
   genişliğinde — mockup'ta ".media" zaten .post'un doğrudan çocuğu ve
   yatay dolgusu yok. Negatif margin hilesine gerek kalmadı. */
.hs .hs-post .hm-body{display:block;padding:0}
.hs .hs-post .hm-txt{padding:0 14px}
.hs .hs-post .nx-cap{font-size:13.2px;line-height:1.55;color:#e5e9ee}
/* Medya kartın tam genişliğinde — gövdenin dolgusu sıfırlandığı için
   negatif margin GEREKMİYOR. Kartın overflow:hidden + yarıçapı köşeleri
   zaten kırpıyor. */
.hs .hs-post .hm-media{max-width:none;flex:none;margin:11px 0 0}
.hs .hs-post .hm-media .nx-car{border-radius:0}
.hs .hs-post .hm-tags{padding:10px 0 0}

/* Dört etiketli aksiyon düğmesi. Sayaç <b> içinde; boşken gizli. */
/* minmax(0,1fr) ŞART: düz "1fr" minmax(auto,1fr) demek, yani iz içerikten
   KÜÇÜLEMİYOR. 320px'te dört düğmenin toplamı 340px oluyor, ızgara kabını
   (290px) taşıyor ve "Kaydet" kartın dışında kalıp kırpılıyordu (ölçüldü:
   düğme sağ kenarı 376px, ekran 320px). */
.hs .hs-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px 7px;gap:0;border:0}
.hs .hs-acts .nx-a{display:flex;align-items:center;justify-content:center;gap:7px;height:46px;
  border:0;border-radius:12px;background:transparent;color:#abb3bd;font-size:12px;font-weight:750;
  cursor:pointer;transition:.16s;text-decoration:none}
.hs .hs-acts .nx-a:hover{background:var(--hs-panel2);color:var(--hs-t)}
.hs .hs-acts .nx-a b{font-weight:800}
.hs .hs-acts .nx-a b:empty{display:none}
.hs .hs-acts .hm-like.on{color:var(--hs-danger)}
.hs .hs-acts .hm-like.on svg{fill:currentColor}
.hs .hs-acts .nx-bm.on{color:var(--hs-accent)}
.hs .hs-acts .nx-bm.on svg{fill:currentColor}
.hs-a-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hs .hs-acts .nx-a{min-width:0}
/* Etiketler 375px'te KALIYOR (kullanıcı kararı). Yalnız 360px altında —
   ki bugünkü telefonların hiçbiri o kadar dar değil — ikonlara düşülüyor;
   alternatifi düğmelerin kırpılmasıydı. */
@media(max-width:359px){ .hs .hs-acts .hs-a-l{display:none} }
/* Etiketler MOBİLDE DE KALIYOR — mockup da öyle. Önce ≤390px'te gizleniyordu;
   ölçünce gereksiz olduğu görüldü: 320px'te, dört düğmede ve en kötü sayaçla
   (1.234) bile içerik düğmeye sığıyor, yatay taşma yok. */

.hs .hm-likeavs{display:flex;padding:0 14px 12px}
.hs .nx-time{padding:0 14px 12px}

/* ═══════════ REEL KARTI ═══════════
   Gönderi kartıyla aynı kabuk; farkı medya bloğunun <video> olması.
   SIRA BİLEREK VİDEO-ÖNCE: mockup'ta metin görselin üstünde ama orası
   fotoğraflı gönderi içindi. Reel video-öncelikli bir biçim — açıklama
   videonun altında duruyor. Ayrıca sırayı çevirmek DOM'u değiştirirdi ve
   kart .hs dışındaki konu sayfalarında da kullanılıyor. */
.hs .hs-reel .nx-vwrap{margin:11px 0 0;border-radius:0;border:0;
  border-top:1px solid var(--hs-line);border-bottom:1px solid var(--hs-line)}
.hs .hs-reel .hm-reelbody{padding:11px 14px 0;gap:5px}
.hs .hs-reel .hm-reelbody .nx-cap{font-size:13.2px;line-height:1.55;color:#e5e9ee}
.hs .hs-reel .hm-reelbody .nx-cap-d{font-size:12.5px;color:var(--hs-t2)}
.hs .hs-reel .hm-reelbody .nx-cap-u b{color:var(--hs-t)}
.hs .hs-reel .hm-reelbody .hm-tags{padding:5px 0 0;margin:0}
.hs .hs-reel .nx-reelbadge{color:#141414;background:var(--hs-accent);font-weight:900}
.hs .hs-reel .nx-cmore{padding:6px 14px 0;font-size:12.5px;color:var(--hs-t2)}
/* İzlenme sayacı düğme DEĞİL (span) — tıklanabilir gibi görünmesin. */
.hs .hs-acts .nx-views{opacity:1;color:var(--hs-t2);cursor:default}
.hs .hs-acts .nx-views:hover{background:transparent;color:var(--hs-t2)}

/* ═══════════ SATIR İÇİ YORUM KUTUSU ═══════════ */
.hs .hs-cbox{display:flex;align-items:center;gap:9px;padding:0 14px 13px}
.hs .hs-cbox-av{width:29px;height:29px;flex:0 0 29px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--hs-soft);color:var(--hs-t2);
  font-size:11px;font-weight:800}
.hs .hs-cbox-av img{width:100%;height:100%;object-fit:cover}
.hs .hs-cbox input{flex:1;min-width:0;height:38px;border:1px solid var(--hs-line);border-radius:999px;
  background:var(--hs-panel2);color:var(--hs-t);padding:0 14px;font:inherit;font-size:12.5px;outline:0}
.hs .hs-cbox input::placeholder{color:var(--hs-t2)}
.hs .hs-cbox input:focus{border-color:var(--hs-accent)}
.hs .hs-cbox button{width:38px;height:38px;flex:0 0 38px;border:0;border-radius:50%;cursor:pointer;
  background:var(--hs-soft);color:var(--hs-t2);display:grid;place-items:center;transition:.16s}
.hs .hs-cbox button:hover{background:var(--hs-accent);color:#141414}
.hs .hs-cbox.busy{opacity:.55;pointer-events:none}
/* Gönderilen yorumun kart altındaki önizlemesi */
.hs .hs-cnew{display:flex;gap:9px;padding:0 14px 12px;font-size:12.5px;line-height:1.45}
.hs .hs-cnew .hs-cbox-av{width:26px;height:26px;flex:0 0 26px}
.hs .hs-cnew b{color:var(--hs-t);font-weight:800;margin-right:5px}
.hs .hs-cnew span{color:#d3d9e0;min-width:0}

/* ═══════════ HİKAYE ÜRETİCİSİ ═══════════
   Sahne 9:16 — izleyicinin oranı. Yazının konumu YÜZDE olarak saklandığı için
   sahne ile izleyici farklı boyutta olsa da yazı aynı yerde çıkıyor. */
.hs-sc{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.hs-sc[hidden]{display:none}
.hs-sc-card{width:min(400px,100%);max-height:100%;overflow:auto;background:var(--hs-panel);
  border:1px solid var(--hs-line);border-radius:var(--hs-r);box-shadow:var(--hs-shadow);
  display:flex;flex-direction:column;gap:12px;padding:14px}
.hs-sc-h{display:flex;align-items:center;justify-content:space-between;color:var(--hs-t);font-size:14px}
/* KAPATMA DÜĞMESİ: metin glifi yerine SVG ve grid ortalama. Eskiden
   display:block + padding:1px 6px + line-height:20px vardı; "×" glifi 32px
   kutuda dikeyde YUKARIDA kalıyordu (tarayıcıda ölçüldü). */
.hs-sc-x{width:32px;height:32px;border:0;border-radius:10px;background:var(--hs-soft);
  padding:0;display:grid;place-items:center;line-height:1;
  color:var(--hs-t2);font-size:20px;line-height:1;cursor:pointer}
/* flex:none ŞART. Kart bir kolon flex kabı ve sahne varsayılan
   flex-shrink:1 ile eziliyordu: 46vh yerine 134px kalıyordu (ölçüldü) ve
   önizleme minicik bir dikdörtgene dönüşüyordu. Yazı boyutu sahne
   yüksekliğinden hesaplandığı için kaydırıcı da hiçbir şey yapmıyor gibi
   görünüyordu — asıl şikâyetin kaynağı buydu. */
.hs-sc-stage{flex:none;position:relative;aspect-ratio:9/16;height:46vh;width:auto;align-self:center;
  /* YÜKSEKLİK KESİN, genişlik orandan türüyor. "max-height + width:auto" ile
     sahne sıfır boyutlu kalıyordu; yazı boyutu 0px çıkıyor ve sürükleme
     koordinatları sıfıra bölünüp NaN oluyordu. */
  border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#1b2735,#0b0d10);
  touch-action:none;cursor:grab;user-select:none}
.hs-sc-stage img,.hs-sc-stage video{width:100%;height:100%;object-fit:cover;display:block}
.hs-sc-txt{position:absolute;transform:translate(-50%,-50%);max-width:88%;text-align:center;
  font-weight:800;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,.5);word-break:break-word;pointer-events:none}
/* MOCKUP SIRASI: boyut → ipucu → Fotoğraf/Video → yazı → emoji → renk →
   arka plan → not → paylaş. Satır etiketleri (Yazı/Emoji/Renk…) kaldırıldı;
   her satır kendi içeriğiyle anlaşılıyor, mockup'ta da etiket yok. */
.hs-sc-ctl{display:flex;flex-direction:column;gap:10px}

/* Boyut: A− [kaydırıcı] A+ */
.hs-sc-size{display:flex;align-items:center;gap:10px}
.hs-sc-size input[type=range]{flex:1;min-width:0;accent-color:var(--hs-accent)}
.hs-sc-az{flex:none;min-width:46px;height:38px;padding:0 10px;border:1px solid var(--hs-line);
  border-radius:11px;background:var(--hs-soft);color:var(--hs-t);font-size:13px;
  font-weight:800;cursor:pointer}
.hs-sc-az:hover{border-color:var(--hs-accent);color:var(--hs-accent)}

/* Hiza düğmesi: üç ikon da basılı, görüneni durum seçiyor. JS'in SVG
   üretmesi gerekmiyor, ikonlar sunucudan geliyor (icon() tek kaynak). */
.hs-sc-hiza{flex:none;width:46px;height:38px;padding:0;display:grid;place-items:center;
  border:1px solid var(--hs-line);border-radius:11px;background:var(--hs-soft);
  color:var(--hs-t);cursor:pointer}
.hs-sc-hiza:hover{border-color:var(--hs-accent);color:var(--hs-accent)}
.hs-sc-hiza i{display:none;line-height:0}
.hs-sc-hiza[data-sc-hiza="left"] i[data-h="left"],
.hs-sc-hiza[data-sc-hiza="center"] i[data-h="center"],
.hs-sc-hiza[data-sc-hiza="right"] i[data-h="right"]{display:block}

/* Fotoğraf | Video — İKİ EŞİT SÜTUN, mockup'taki gibi geniş.
   Sabit iki sütun yazılabilir çünkü sayı içerikten gelmiyor: kabul edilen
   medya türü ikiye sabit (görsel / video). */
.hs-sc-picks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hs-sc-pick{height:52px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--hs-line);border-radius:14px;background:var(--hs-panel2);
  color:var(--hs-t);font-size:13px;font-weight:700;cursor:pointer}
.hs-sc-pick:hover{border-color:var(--hs-accent)}

/* Yazı alanı — tam genişlik, mockup'ın textarea'sı gibi ferah. */
.hs-sc-text{width:100%;height:48px;padding:0 14px;border:1px solid var(--hs-line);
  border-radius:14px;background:var(--hs-panel2);color:var(--hs-t);font:inherit;font-size:13px;outline:0}
.hs-sc-text::placeholder{color:var(--hs-t2)}
.hs-sc-text:focus{border-color:var(--hs-accent)}

/* Emoji şeridi TEK SATIR. repeat(auto-fit,minmax(0,1fr)) DENENDİ ve
   ölçüldü: dokuz emojiyi 8+1 diye iki satıra bölüyordu — auto-fit sığdırma
   kararını kendi veriyor. grid-auto-flow:column sayıdan bağımsız olarak tek
   satır garanti ediyor; sabit "repeat(9,...)" ise emoji listesi değişince
   bozulurdu. Composer eylem satırında da aynı çözüm kullanıldı. */
.hs-sc-emojis{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.hs-sc-emoji{height:44px;min-width:0;padding:0;display:grid;place-items:center;
  border:1px solid var(--hs-line);border-radius:12px;background:var(--hs-panel2);
  font-size:19px;line-height:1;cursor:pointer;transition:.16s}
.hs-sc-emoji:hover{border-color:var(--hs-accent);transform:translateY(-1px)}

.hs-sc-swatches,.hs-sc-bgs{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.hs-sc-sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;background:var(--sw);
  cursor:pointer;box-shadow:0 0 0 1px var(--hs-line) inset}
.hs-sc-sw.on{border-color:var(--hs-accent)}
.hs-sc-bg{width:38px;height:38px;border-radius:12px;border:2px solid transparent;background:var(--bg);cursor:pointer}
.hs-sc-bg.on{border-color:var(--hs-accent)}
.hs-sc-bgs[hidden]{display:none}

/* Sahnenin ALTINDA normal satırlar (ipucu eskiden sahnenin ÜZERİNDE mutlak
   konumluydu ve fotoğrafı örtüyordu). İkon ile metin aynı hizada. */
.hs-sc-hint{display:flex;align-items:flex-start;gap:7px;margin:0;
  font-size:11px;line-height:1.5;color:var(--hs-t2)}
.hs-sc-hint svg{flex:none;margin-top:2px}

/* Paylaş tam genişlik — mockup'ta alt kenarı dolduran tek düğme. */
/* Yükseklik 52 → 46: düğme fazla şişkindi (kullanıcı geri bildirimi). */
.hs-sc-go{width:100%;height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0 !important;border-radius:13px;background:var(--hs-accent) !important;color:#141414 !important;
  font-size:13.5px;font-weight:800;cursor:pointer}
.hs-sc-clear{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--hs-line);border-radius:12px;background:var(--hs-soft);
  color:var(--hs-t2);font-size:12.5px;cursor:pointer}
.hs-sc-clear[hidden]{display:none}
.hs-sc-x svg{flex:none}

/* İzleyicide yazı katmanı ve video karesi */
.nxs-vid{width:100%;height:100%;object-fit:contain;display:block}
.nxs-txt{position:absolute;transform:translate(-50%,-50%);max-width:86%;text-align:center;
  font-weight:800;line-height:1.2;text-shadow:0 2px 14px rgba(0,0,0,.55);word-break:break-word;
  pointer-events:none;z-index:3}
.nxs-bg{position:absolute;inset:0;z-index:0}

/* ═══════════ KARTTAKİ ANKET ═══════════
   Oylama kancaları anketler sayfasıyla birebir (.poll, data-pollvote,
   data-poll-total) — app.js'teki tek delege dinleyici ikisini de sürüyor. */
.hs .hs-poll{margin:11px 14px 0;border:1px solid var(--hs-line);border-radius:14px;
  background:var(--hs-panel2);padding:12px;display:flex;flex-direction:column;gap:7px}
.hs .hs-poll-h{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--hs-t)}
.hs .hs-poll-h svg{color:var(--hs-accent);flex:none}
.hs .hs-poll form{margin:0}
.hs .hs-poll .poll-opt{width:100%;border:0;background:transparent;padding:0;cursor:pointer;text-align:left;font:inherit}
.hs .hs-poll .bar{position:relative;height:38px;border-radius:10px;overflow:hidden;
  background:var(--hs-soft);border:1px solid var(--hs-line)}
.hs .hs-poll .fill{position:absolute;inset:0 auto 0 0;background:rgba(245,197,66,.22);transition:width .35s}
.hs .hs-poll .lbl{position:relative;display:flex;align-items:center;justify-content:space-between;
  height:100%;padding:0 12px;font-size:12.5px;font-weight:700;color:var(--hs-t)}
.hs .hs-poll .pct{color:var(--hs-t2);font-weight:800}
.hs .hs-poll .poll-opt.mine .bar{border-color:var(--hs-accent)}
.hs .hs-poll .poll-opt.mine .fill{background:rgba(245,197,66,.34)}
.hs .hs-poll.ended .bar{cursor:default}
.hs .hs-poll .poll-foot{font-size:11px;color:var(--hs-t2);margin-top:2px}
/* ═══ ANKET KURUCUSU HARMAN PALETİNDE ═══
   app.css'teki taban blok TOKEN kullanıyor ve orada vurgu MAVİ (şehir
   rehberinin rengi). Harman kapsamında altına çevriliyor — sosyal yüzeyde
   mavi yok. Modal içinde de, /gonderi/yeni sayfasında da aynı kural
   geçerli çünkü ikisi de .hs kapsamında.
   ÖZGÜLLÜK: taban kurallar tek sınıf (0,1,0); buradakiler ".hs " önekiyle
   (0,2,0) — hepsi kazanıyor. */
.hs .pb{background:var(--hs-panel);border-color:var(--hs-line)}
.hs .pb.on .pb-ic{background:linear-gradient(135deg,var(--hs-accent),#c9761b);color:#151109}
.hs .pb-ic{background:var(--hs-soft);color:var(--hs-t2)}
.hs .pb-hx{background:var(--hs-soft);color:var(--hs-t2)}
.hs .pb-htx b,.hs .pb-lbl,.hs .pb-swtx b,.hs .pb-prev>b,.hs .pb-prev-h span{color:var(--hs-t)}
.hs .pb-htx small,.hs .pb-swtx small,.hs .pb-prev-h small{color:var(--hs-t2)}
.hs .pb-q,.hs .pb-fld select,.hs .pb-row input,.hs .pb-prev-i{
  background:var(--hs-soft);border-color:var(--hs-line);color:var(--hs-t)}
.hs .pb-q:focus,.hs .pb-fld select:focus,.hs .pb-row input:focus{border-color:var(--hs-accent)}
.hs .pb-i{background:var(--hs-soft);color:var(--hs-accent)}
.hs .pb-add{border-color:var(--hs-line);color:var(--hs-t2)}
.hs .pb-add:hover{border-color:var(--hs-accent);color:var(--hs-accent)}
.hs .pb-sw{background:var(--hs-soft);border-color:var(--hs-line)}
.hs .pb-sw input:checked+.pb-knob{background:var(--hs-accent)}
.hs .pb-sw input:checked+.pb-knob::after{background:#151109}
.hs .pb-knob{background:var(--hs-line2,rgba(255,255,255,.16))}
.hs .pb-prev{background:var(--hs-panel2,rgba(255,255,255,.03));border-color:var(--hs-line)}
.hs .pb-prev>b.bos,.hs .pb-prev-i.bos{color:var(--hs-t2)}
.hs .pb-x{color:var(--hs-t2)}
.hs .pb-x:hover{color:var(--hs-danger,#ff5f67)}

/* ═══════════ BAŞLIKLI GÖNDERİ — "Yazı" ve "Makale" türleri ═══════════
   Mockup compose modalinde üç stil sunuyor (Sade / Alıntı / Başlıklı) ve
   akışta "başlık + okunaklı metin kartı" vaat ediyor. Kart AYNI kart;
   yalnız metin bloğu stile göre değişiyor — ayrı bir kart şablonu
   beğeni/yorum/menü/etiket satırlarının ikinci kopyası olurdu. */
.hs .hs-ptitle{margin:0 0 6px;font-size:17px;line-height:1.28;letter-spacing:-.3px;font-weight:800}
.hs .hs-ptitle a{color:var(--hs-t);text-decoration:none}
.hs .hs-ptitle a:hover{color:var(--hs-accent)}
.hs .hs-pread{display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-size:11px;font-weight:700;color:var(--hs-t2)}
/* ALINTI: metin öne çıkıyor, sol kenarda altın çizgi. */
.hs .hs-txt-alinti .nx-cap{border-left:3px solid var(--hs-accent);padding-left:12px;
  font-size:15px;line-height:1.55;font-weight:600;color:var(--hs-t)}
.hs .hs-txt-alinti .hs-ptitle{font-size:14.5px;color:var(--hs-t2);font-weight:750}
.hs .hs-txt-alinti .hs-ptitle a{color:var(--hs-t2)}
/* BAŞLIKLI: başlık büyük, gövde okunaklı. */
.hs .hs-txt-baslikli .hs-ptitle{font-size:20px;line-height:1.22}
.hs .hs-txt-baslikli .nx-cap{font-size:14.5px;line-height:1.62}
@media(max-width:760px){
  .hs .hs-ptitle{font-size:16px}
  .hs .hs-txt-baslikli .hs-ptitle{font-size:18.5px}
}

/* OY VERENLER — yalnız anonim OLMAYAN ankette basılıyor (poll_card.php).
   Yüzler üst üste biniyor; halka kart zeminiyle aynı ki kesişim temiz
   görünsün (aynı desen mesajlar listesindeki çevrim içi noktasında da var). */
.hs .hs-poll-who{display:flex;align-items:center;gap:8px;margin-top:8px}
.hs .hs-poll-faces{display:flex;align-items:center}
.hs .hs-poll-faces>a{width:22px;height:22px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;border:2px solid var(--hs-panel);background:var(--hs-soft);
  color:var(--hs-t2);font-size:9px;font-weight:800;text-decoration:none;margin-left:-7px}
.hs .hs-poll-faces>a:first-child{margin-left:0}
.hs .hs-poll-faces img{width:100%;height:100%;object-fit:cover}
.hs .hs-poll-who small{font-size:11px;color:var(--hs-t2)}
/* Çoklu seçimde işaretli seçenek KARE tik hissi versin: tek seçimlik
   ankette "biri seçili" demek, çokluda "bunu da seçtim" demek. */
.hs .hs-poll.multi .poll-opt.mine .bar{border-color:var(--hs-accent);border-width:2px}

/* ═══════════ ORTAK SAYFA PARÇALARI ═══════════
   Yan ekranların hepsi aynı üst başlık, çip şeridi, ızgara ve boş durum
   biçimini kullanıyor. Tek yerde tanımlı; sayfa başına kopyalansaydı biri
   güncellenip diğerleri unutulurdu. */
.hs .hs-ph{display:flex;align-items:flex-start;gap:12px;padding:2px 0 14px}
.hs .hs-ph-ic{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;
  background:var(--hs-soft);color:var(--hs-accent)}
.hs .hs-ph-b{min-width:0;flex:1}
.hs .hs-ph h1{margin:0;font-size:22px;line-height:1.15;letter-spacing:-.4px;color:var(--hs-t)}
.hs .hs-ph-n{margin-top:4px;font-size:11.5px;color:var(--hs-t2)}
.hs .hs-ph-act{display:flex;gap:8px;flex:none}
.hs .hs-back{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--hs-line);background:var(--hs-panel2);color:var(--hs-t2);margin-top:3px}
.hs .hs-back:hover{color:var(--hs-t);background:var(--hs-soft)}
.hs .hs-kicker{display:block;font-size:9.5px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;
  color:var(--hs-accent);margin-bottom:3px}
.hs .hs-pill{height:36px;border-radius:11px;border:1px solid var(--hs-line);background:var(--hs-panel2);
  color:var(--hs-t);font:inherit;font-size:12px;font-weight:750;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;padding:0 13px}
.hs .hs-pill:hover{background:var(--hs-soft)}
/* İKON DÜĞMEYLE AYNI AĞIRLIKTA OKUNMALI: metin 750 ağırlıkta, ikonun
   24'lük viewBox'taki 2 birimlik konturu 14px'e inince 1.17px'e düşüyor ve
   yazının yanında soluk kalıyordu. flex:none de şart — ikon esneme öğesi
   ve dar düğmede küçülebiliyordu. */
.hs .hs-pill svg{flex:none;stroke-width:2.4}
/* OPTİK ORTALAMA — YALNIZ DAR MÜREKKEPLİ İKONLARDA.
   Bazı ikonların çizimi kutusunu doldurmuyor: "plus" ve "bookmark" 24'lük
   viewBox'ta 5→19 arasında, konturla birlikte 16/24 = kutunun 2/3'ü. Kutu
   ortalanınca içerik OPTİK olarak sağa kayıyor — ölçüldü: solda 15.3px,
   sağda 13px. Boşluk kadar negatif margin, ortalamanın boşluğu iki yana
   eşit dağıtması sayesinde farkı TAM kapatıyor (boşluk = ikon/6).

   SINIF BİLEREK GENEL DEĞİL: "check" (4→20) ve "arrow-left" (3→21) gibi
   geniş ikonlarda boşluk yarı yarıya az; hepsine uygulamak onları ters
   yöne kaydırırdı. Yeni bir ikonda kullanmadan ÖNCE mürekkep kutusu
   ölçülmeli (svg.getBBox + kontur kalınlığı). */
.hs .hs-ico-narrow{margin-left:-.166em}
/* BİRİNCİL DÜĞME HOVER'DA OKUNAKSIZ KALIYORDU: yukarıdaki kural zemini
   koyultuyor ama metin rengi #141414 (koyu) kaldığı için yazı zeminle
   birleşiyordu — ölçüldü, kontrast neredeyse yok oluyordu. Birincil düğme
   hover'da ALTIN kalır, yalnız bir tık açılır. */
.hs .hs-pill-primary:hover{background:var(--hs-accent2,#ffe07d);color:#141414}
.hs .hs-pill-primary{border:0;background:var(--hs-accent);color:#141414}

/* Yatay kaydırmalı çip şeridi (sekme / filtre) */
.hs .hs-chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none}
.hs .hs-chips::-webkit-scrollbar{display:none}
.hs .hs-chip{flex:none;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--hs-line);
  background:var(--hs-panel2);color:var(--hs-t2);font-size:12px;font-weight:700;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.16s}
.hs .hs-chip:hover{color:var(--hs-t)}
.hs .hs-chip.active{background:var(--hs-accent);border-color:var(--hs-accent);color:#141414}

/* Boş durum */
.hs .hs-empty{padding:46px 20px;text-align:center;color:var(--hs-t2);
  border:1px dashed var(--hs-line);border-radius:var(--hs-r);background:var(--hs-panel)}
.hs .hs-empty svg{opacity:.35;margin-bottom:10px}
.hs .hs-empty b{display:block;color:var(--hs-t);font-size:14px;margin-bottom:5px}
.hs .hs-empty small{font-size:11.5px;line-height:1.5;display:block;max-width:34ch;margin:6px auto 0}

@media(max-width:760px){
  .hs .hs-ph{padding:12px 13px 10px}
  .hs .hs-chips{padding-left:13px;padding-right:13px}
  .hs .hs-empty{margin:0 13px;border-radius:16px}
}

/* ═══════════ BİLDİRİMLER ═══════════ */
.hs .hs-nsec{font-size:10px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;
  color:var(--hs-t2);padding:16px 2px 8px}
.hs .hs-nlist{display:flex;flex-direction:column;gap:2px}
/* Satır: avatar + zengin metin + sağ yuva (mockup .insta-notify) */
.hs .hs-nrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;
  text-decoration:none;transition:.16s;position:relative}
.hs .hs-nrow:hover{background:var(--hs-panel2)}
.hs .hs-nrow.yeni{background:rgba(245,197,66,.07)}
.hs .hs-nrow.yeni::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--hs-accent)}
.hs .hs-nrow-av{position:relative;flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;overflow:visible;
  background:var(--hs-soft);color:var(--hs-t2);font-size:15px;font-weight:800}
.hs .hs-nrow-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* Aktörü olmayan satır (sistem duyurusu, silinmiş kullanıcı): tür ikonu */
.hs .hs-nrow-av.ikon{border-radius:13px;color:var(--nc);
  background:color-mix(in srgb,var(--nc) 14%,transparent)}
.hs .hs-nrow-mini{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;
  width:19px;height:19px;border-radius:50%;border:2px solid var(--hs-bg);
  background:var(--nc);color:#141414}
.hs .hs-nrow-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hs .hs-nrow-t{font-size:13px;color:var(--hs-t);line-height:1.45}
.hs .hs-nrow-t time{margin-left:7px;font-size:10.5px;color:var(--hs-t2);opacity:.8}
.hs .hs-nrow-x2{font-size:12px;color:var(--hs-t2);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs .hs-nrow-x{flex:none;display:flex;align-items:center;color:var(--hs-t2)}
.hs .hs-nfollow{height:31px;padding:0 14px;border-radius:9px;border:1px solid var(--hs-accent);
  background:var(--hs-accent);color:#151109;font:inherit;font-size:11.5px;font-weight:750;
  cursor:pointer;transition:.16s;white-space:nowrap}
.hs .hs-nfollow.on{background:transparent;color:var(--hs-t2);border-color:var(--hs-line)}
.hs .hs-nicon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  border:1px solid var(--hs-line);background:var(--hs-panel);color:var(--hs-t2);
  cursor:pointer;transition:.16s}
.hs .hs-nicon:hover{color:var(--hs-t);border-color:var(--hs-line2)}
/* Takip isteği kutusu — bildirim değil, bekleyen bir KARAR */
.hs .hs-nreq{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:4px;
  border:1px solid var(--hs-accent);border-radius:14px;background:rgba(245,197,66,.08);
  color:var(--hs-t);text-decoration:none}
.hs .hs-nreq-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  background:var(--hs-accent);color:#141414}
.hs .hs-nreq-b{flex:1;min-width:0;display:flex;flex-direction:column}
.hs .hs-nreq-b b{font-size:13px}
.hs .hs-nreq-b small{font-size:11px;color:var(--hs-t2);margin-top:2px}
@media(max-width:760px){
  .hs .hs-nsec{padding-left:13px;padding-right:13px}
  .hs .hs-nrow{border-radius:0}
  .hs .hs-nreq{margin:0 13px 4px}
}

/* Takip isteği satırı */
.hs .hs-freq{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px}
.hs .hs-freq:hover{background:var(--hs-panel2)}
.hs .hs-freq-u{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-decoration:none;color:inherit}
.hs .hs-freq-av{width:42px;height:42px;flex:0 0 42px;border-radius:50%;overflow:hidden;display:grid;
  place-items:center;background:var(--hs-soft);color:var(--hs-t2);font-weight:800;font-size:15px}
.hs .hs-freq-av img{width:100%;height:100%;object-fit:cover}
.hs .hs-freq-b{min-width:0;display:flex;flex-direction:column}
.hs .hs-freq-b b{font-size:13.5px;color:var(--hs-t);display:flex;align-items:center;gap:5px}
.hs .hs-freq-b small{font-size:11px;color:var(--hs-t2);margin-top:2px}
.hs .hs-freq-act{display:flex;gap:7px;flex:none;margin:0}
@media(max-width:430px){
  .hs .hs-freq{flex-wrap:wrap}
  .hs .hs-freq-act{width:100%}
  .hs .hs-freq-act .hs-pill{flex:1;justify-content:center}
}

/* Kaydedilenler — içerik satırı */
.hs .hs-srow{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;
  text-decoration:none;color:var(--hs-t2);transition:.16s}
.hs .hs-srow:hover{background:var(--hs-panel2)}
.hs .hs-srow-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  background:var(--hs-soft);color:var(--hs-accent)}
.hs .hs-srow-b{flex:1;min-width:0;display:flex;flex-direction:column}
.hs .hs-srow-b b{font-size:13px;color:var(--hs-t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs .hs-srow-b small{font-size:11px;margin-top:2px}
.hs .hs-chip-n{opacity:.6;font-weight:600}
.hs .exp-grid{margin-top:2px}
.hs .cards-2{padding:0}

/* ═══════════ PROFİL KÜNYESİ ═══════════ */
.hs .hs-pf{border:1px solid var(--hs-line);background:var(--hs-panel);border-radius:20px;
  overflow:hidden;margin-bottom:14px}
.hs .hs-pf-cover{height:170px;background:linear-gradient(160deg,#1b2735,#0b0d10) center/cover;position:relative}
.hs .hs-pf-coveredit{position:absolute;right:12px;bottom:12px;height:32px;padding:0 11px;border-radius:10px;
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:750;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;backdrop-filter:blur(6px)}
.hs .hs-pf-body{padding:0 18px 18px}
.hs .hs-pf-avwrap{position:relative;width:96px;margin-top:-48px;margin-bottom:11px}
.hs .hs-pf-av{width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--hs-soft);color:var(--hs-t);font-size:34px;font-weight:800;
  border:4px solid var(--hs-panel);position:relative}
.hs .hs-pf-av.tier{border-width:3px}
.hs .hs-pf-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs .hs-pf-cam{position:absolute;right:0;bottom:2px;width:30px;height:30px;border-radius:50%;
  background:var(--hs-accent);color:#141414;display:grid;place-items:center;border:3px solid var(--hs-panel)}
.hs .hs-pf-lock{position:absolute;left:0;bottom:-6px;display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:999px;background:var(--hs-soft);color:var(--hs-t2);font-size:10px;font-weight:800}
.hs .hs-pf-name{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.4px;color:var(--hs-t);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hs .hs-pf-biz{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;
  background:var(--hs-soft);color:var(--hs-t2);font-size:10px;font-weight:800}
.hs .hs-pf-un{font-size:12.5px;color:var(--hs-t2);margin-top:3px}
.hs .hs-pf-ebs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hs .hs-pf-bio{margin-top:10px;font-size:13px;line-height:1.55;color:#dce2e9;max-width:60ch}
.hs .hs-pf-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:11.5px;color:var(--hs-t2)}
.hs .hs-pf-meta span{display:inline-flex;align-items:center;gap:5px}
.hs .hs-pf-nums{display:flex;gap:22px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hs-line)}
.hs .hs-pf-num{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit}
.hs .hs-pf-num b{font-size:16px;font-weight:850;color:var(--hs-t)}
.hs .hs-pf-num small{font-size:10.5px;color:var(--hs-t2)}
.hs .hs-pf-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hs .hs-pf-act form{margin:0}
@media(max-width:760px){
  .hs .hs-pf{border-radius:0;border-left:0;border-right:0}
  .hs .hs-pf-cover{height:132px}
  .hs .hs-pf-body{padding:0 14px 16px}
  .hs .hs-pf-avwrap{width:84px;margin-top:-42px}
  .hs .hs-pf-av{width:84px;height:84px;font-size:30px}
  .hs .hs-pf-name{font-size:19px}
  .hs .hs-pf-nums{gap:16px;justify-content:space-between}
}

/* ═══════════ GRUP DETAYI ═══════════ */
/* ÜST DOLGU GERİ DÜĞMESİNİN ALTINDA OLMALI. Düğme mutlak konumlu
   (top:14, 38px) ama içerik 20px dolgudan başlıyordu: rozet satırı
   düğmenin üstüne biniyor ve globe ikonu onu tamamen örtüyordu —
   "geri gelme sistemi yok" şikâyetinin sebebi buydu (tarayıcıda
   elementFromPoint ile ölçüldü; düğme DOM'da ve tıklanabilirdi, sadece
   görünmüyordu). 14 + 38 + 10 = 62. */
/* background-clip:padding-box ŞART VE KISAYOLDAN SONRA YAZILMALI:
   "background:" kısayolu tüm background-* özelliklerini sıfırlar, o yüzden
   önce yazıldığında sessizce border-box'a dönüyordu (tarayıcıda ölçüldü:
   clip hâlâ border-box'tı). Varsayılan border-box: arka plan
   ÇERÇEVENİN ALTINA kadar boyanıyor, background-origin ise padding-box —
   yani görsel 1px'lik çerçeve şeridinde TEKRARLANIYOR ve saydam çerçeve
   (rgba(255,255,255,.085)) onu gizleyemiyor. Sonuç: kenarlarda ham
   fotoğraftan 1px'lik parlak sızıntı (kullanıcı bildirdi, ölçümle
   doğrulandı: clip=border-box, origin=padding-box, repeat=repeat). */
.hs .hs-gh{position:relative;border:1px solid var(--hs-line);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,#1b2735,#0b0d10) center/cover;padding:62px 18px 18px;margin-bottom:14px;
  min-height:186px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;background-clip:padding-box}
.hs .hs-gh-back{position:absolute;left:14px;top:14px;background:rgba(0,0,0,.45);border-color:transparent}
.hs .hs-gh-b h1{margin:4px 0 0;font-size:24px;letter-spacing:-.5px;color:#fff}
.hs .hs-gh-n{margin-top:4px;font-size:12px;color:rgba(255,255,255,.72)}
.hs .hs-gh-badges{display:flex;flex-wrap:wrap;gap:6px}
.hs .hs-gb{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;
  background:rgba(0,0,0,.42);color:rgba(255,255,255,.9);font-size:10px;font-weight:800;backdrop-filter:blur(4px)}
.hs .hs-gb-rol{background:var(--hs-accent);color:#141414}
.hs .hs-gh-act{display:flex;flex-wrap:wrap;gap:8px}
.hs .hs-gh-act form{margin:0;display:flex;gap:8px}
.hs .hs-gh-ref input{height:36px;border-radius:11px;border:1px solid var(--hs-line);background:rgba(0,0,0,.4);
  color:#fff;padding:0 11px;font:inherit;font-size:12px;width:150px}

/* DÜĞME ORTALI: align-items:flex-end iken düğme metin alanının ALTINA
   hizalanıyordu (alan 50px, düğme 36px) ve "kaymış" görünüyordu. */
.hs .hs-gcompose{display:flex;gap:9px;align-items:center;padding:13px;margin-bottom:12px;
  border:1px solid var(--hs-line);border-radius:16px;background:var(--hs-panel)}
/* resize:none — tutamak alanın sağ alt köşesinde, tam paylaş düğmesinin
   yanında küçük bir çentik olarak görünüyordu ve hizasızlık hissini
   artırıyordu. Uzun metin yine yazılabiliyor, alan kaydırılıyor. */
.hs .hs-gcompose textarea{flex:1;min-width:0;resize:none;border:0;background:transparent;color:var(--hs-t);
  font:inherit;font-size:13px;outline:0;padding:6px 0}
.hs .hs-grules{border:1px solid var(--hs-line);border-radius:16px;background:var(--hs-panel2);
  padding:13px 15px;margin-bottom:12px;font-size:12.5px;color:var(--hs-t2)}
.hs .hs-grules b{display:flex;align-items:center;gap:6px;color:var(--hs-t);font-size:13px;margin-bottom:7px}
.hs .hs-grules ol{margin:0;padding-left:18px;line-height:1.7}
.hs .hs-gmod{display:flex;gap:7px;margin:-8px 0 14px;padding:0 14px;flex-wrap:wrap}
.hs .hs-gabout{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.hs .hs-gab{display:flex;gap:12px;padding:12px 13px;border-radius:14px}
.hs .hs-gab:hover{background:var(--hs-panel2)}
.hs .hs-gab-ic{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;
  background:var(--hs-soft);color:var(--hs-accent)}
.hs .hs-gab-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.hs .hs-gab-b b{font-size:12.5px;color:var(--hs-t)}
.hs .hs-gab-b small{font-size:12px;color:var(--hs-t2);line-height:1.5}
.hs .hs-gbadges{display:inline-flex;gap:5px;flex-wrap:wrap}
.hs .cmb{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px;border-radius:999px;
  font-size:9.5px;font-weight:800;color:var(--cmb,#62d49d);
  background:color-mix(in srgb,var(--cmb,#62d49d) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--cmb,#62d49d) 28%,transparent)}
.hs .cmb svg{width:10px;height:10px}
.hs .cmb-rol{--cmb:#f5c542}
.hs .hs-gmenu{position:relative}
.hs .hs-gmenu summary{list-style:none;cursor:pointer}
.hs .hs-gmenu summary::-webkit-details-marker{display:none}
.hs .hs-gmenu-p{position:absolute;right:0;top:40px;z-index:20;min-width:190px;padding:6px;
  border:1px solid var(--hs-line);border-radius:13px;background:var(--hs-panel);box-shadow:var(--hs-shadow)}
.hs .hs-gmenu-p form{margin:0}
.hs .hs-gmi{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  color:var(--hs-t2);font:inherit;font-size:12px;padding:8px 10px;border-radius:9px}
.hs .hs-gmi:hover{background:var(--hs-panel2);color:var(--hs-t)}
.hs .hs-gmi-danger{color:var(--hs-danger)}
.hs .hs-gbadgeform{display:flex;gap:6px;padding:4px 6px}
.hs .hs-gbadgeform select{flex:1;min-width:0;height:32px;border-radius:9px;border:1px solid var(--hs-line);
  background:var(--hs-panel2);color:var(--hs-t);font:inherit;font-size:12px}
.hs .hs-gset{border:1px solid var(--hs-line);border-radius:16px;background:var(--hs-panel);
  padding:14px 16px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.hs .hs-gset .hs-nsec{padding:0 0 2px}
.hs .hs-gset-r{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--hs-t2)}
.hs .hs-gset-r select,.hs .hs-gset textarea{border:1px solid var(--hs-line);border-radius:10px;
  background:var(--hs-panel2);color:var(--hs-t);font:inherit;font-size:12.5px;padding:9px 11px}
.hs .hs-gset-c{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--hs-t2);cursor:pointer}
.hs .hs-gset-note{margin:0;font-size:11px;color:var(--hs-t2);opacity:.8;line-height:1.5}
.hs .hs-gcode{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  background:var(--hs-panel2);border:1px dashed var(--hs-accent)}
.hs .hs-gcode code{font-size:15px;font-weight:800;letter-spacing:1.2px;color:var(--hs-accent)}
.hs .hs-gcode small{font-size:11px;color:var(--hs-t2)}
.hs .cc-tab{position:static;height:auto;min-height:60vh;border:1px solid var(--hs-line);border-radius:16px;overflow:hidden}
@media(max-width:760px){
  .hs .hs-gh{border-radius:0;border-left:0;border-right:0}
  .hs .hs-gcompose,.hs .hs-grules,.hs .hs-gset{margin-left:13px;margin-right:13px}
}
.hs .cm{padding:0}
.hs .cm-privacy{display:flex;flex-direction:column;gap:9px;margin:10px 0}
.hs .cm-privacy label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--hs-t2)}
.hs .cm-privacy select{height:38px;border-radius:10px;border:1px solid var(--hs-line);
  background:var(--hs-panel2);color:var(--hs-t);font:inherit;font-size:12.5px;padding:0 10px}
.hs .cm-priv-c{flex-direction:row !important;align-items:center;gap:9px}

/* ═══════════ İSTATİSTİK ═══════════ */
.hs .hs-stgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:6px}
.hs .hs-stcard{position:relative;border:1px solid var(--hs-line);border-radius:16px;background:var(--hs-panel);
  padding:14px 15px;display:flex;flex-direction:column;gap:3px}
.hs .hs-stcard-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--hs-soft);color:var(--hs-accent);margin-bottom:5px}
.hs .hs-stcard b{font-size:23px;font-weight:850;letter-spacing:-.5px;color:var(--hs-t);line-height:1.1}
.hs .hs-stcard small{font-size:11.5px;color:var(--hs-t2)}
.hs .hs-stcard-alt{font-size:10px;color:var(--hs-t2);opacity:.7;margin-top:2px}
.hs .hs-stdelta{position:absolute;right:13px;top:13px;font-size:10.5px;font-weight:850;
  color:var(--hs-ok);background:color-mix(in srgb,var(--hs-ok) 14%,transparent);
  padding:3px 7px;border-radius:999px}
.hs .hs-stdelta.dus{color:var(--hs-danger);background:color-mix(in srgb,var(--hs-danger) 14%,transparent)}
.hs .hs-stchart{display:flex;align-items:flex-end;gap:9px;height:140px;padding:14px 15px 10px;
  border:1px solid var(--hs-line);border-radius:16px;background:var(--hs-panel)}
.hs .hs-stbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:7px}
.hs .hs-stbar-f{width:100%;max-width:34px;border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,var(--hs-accent),rgba(245,197,66,.35))}
.hs .hs-stbar small{font-size:10px;color:var(--hs-t2)}
.hs .hs-stdemo{border:1px solid var(--hs-line);border-radius:16px;background:var(--hs-panel);padding:6px 15px 12px}
.hs .hs-stdemo-r{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--hs-line);font-size:12.5px;color:var(--hs-t2)}
.hs .hs-stdemo-r:last-of-type{border-bottom:0}
.hs .hs-stdemo-r b{color:var(--hs-t);font-size:13px}
.hs .hs-srow-ic img{border-radius:inherit}
@media(max-width:760px){ .hs .hs-stgrid,.hs .hs-stchart,.hs .hs-stdemo{margin-left:13px;margin-right:13px} }

/* ═══════════ GRUPLAR LİSTESİ (mockup) ═══════════ */
/* Ortak sayfa başlığı (partials/page_head.php) — mockup'ın .page-head'i.
   Gruplar/Kaydedilenler/Keşfet aynı bloğu paylaşıyor. */
/* SARMA OTOMATİK, KIRILMA NOKTASI SABİTİ YOK. Başlık kolonuna 240px'lik
   bir esneme tabanı verilince, aksiyonlar sığmadığı anda kendiliğinden alt
   satıra geçiyor. Etkinliklerde İKİ düğme var ve 375px'te sonuncusu ekranın
   2px dışına taşıyor, başlık kolonu 113px'e sıkışıp alt satır dört satıra
   bölünüyordu (ölçüldü). Sabit bir kırılma noktası, tek düğmeli
   sayfalarda (Gruplar/Kaydedilenler) gereksiz sarma yapardı. */
.hs .hs-phead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:4px 0 16px;flex-wrap:wrap}
.hs .hs-phead-c{flex:1 1 240px;min-width:0}
.hs .hs-phead-c h1{margin:0;font-size:26px;letter-spacing:-.6px;color:var(--hs-t)}
.hs .hs-phead-c p{margin:5px 0 0;font-size:12.5px;color:var(--hs-t2)}
.hs .hs-phead-a{flex:none;display:flex;gap:8px;padding-top:3px}
/* Alt satıra düştüğünde düğmeler genişliği paylaşıyor. */
@media(max-width:430px){
  .hs .hs-phead-a{width:100%}
  .hs .hs-phead-a>*{flex:1;justify-content:center}
}
.hs .hs-pill-block{width:100%;justify-content:center}

/* İki bölmeli sekme — mockup'ın segmented kontrolü */
.hs .hs-gtabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:12px;
  border:1px solid var(--hs-line);border-radius:14px;background:var(--hs-panel)}
.hs .hs-gtabs a{height:38px;display:grid;place-items:center;border-radius:10px;
  font-size:12.5px;font-weight:750;color:var(--hs-t2);text-decoration:none;transition:.16s}
.hs .hs-gtabs a:hover{color:var(--hs-t)}
.hs .hs-gtabs a.active{background:var(--hs-panel2);color:var(--hs-t)}

/* ═══════════ COMPOSER EYLEM SIRASI + ETİKET KARTI ═══════════
   Mockup'ta composer tek kart: üstte yazı kutusu, altında ince bir ayraçla
   ayrılmış eylem satırı. Çipler tanıtım kartından buraya taşındı. */
/* Kartın KENDİ DOLGUSU var (mockup .composer{padding:14px}). Ayraç
   (.hs-comp-acts border-top) bu dolgunun İÇİNDE kalıyor, yani çizgi
   kenardan kenara uzanmıyor — dolgusuz hâlde kartı baştan başa kesiyordu. */
.hs .hs-composer-w{margin-bottom:14px;padding:14px;border:1px solid var(--hs-line);
  border-radius:18px;background:var(--hs-panel)}
/* İçteki composer kendi çerçevesini bırakıyor — dış kart onu sarıyor.
   Bu satır mockup'ın .composer-top'una denk: avatar + yazı alanı. */
/* box-shadow:none ŞART, border:0 YETMİYOR. app.css'te .hm-composer
   "inset 0 1px 0 rgba(255,255,255,.1)" taşıyor: kendi kartıyken üst kenara
   cam parlaklığı veren bir çizgiydi. Sarmalayıcı kartın içine girince
   kartın çizgisiyle birlikte İKİ ÇİZGİ olarak göründü — çerçeve sıfırlandığı
   hâlde gölge kaldığı için kaynağa bakınca fark edilmiyordu, tarayıcıda
   ölçülerek bulundu. */
.hs .hs-composer-w .hs-composer{margin:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;gap:11px;align-items:center}

/* Avatar mockup .avatar.sm ölçüsünde (30px'ti). */
.hs .hs-composer-w .hm-comp-av{width:36px;height:36px;flex:0 0 36px}
/* Kendi çevrimiçi noktan: mockup'ta yok ve zaten HER ZAMAN doğru —
   kendine "çevrimiçisin" demek bilgi taşımıyor, yalnız avatarı kirletiyor.
   Başkalarının halkasındaki nokta duruyor, orada bilgi. */
.hs .hs-composer-w .hm-comp-av .hm-dot{display:none}

/* YAZI ALANI KUTULU — mockup .composer-input: kartın içinde kendi zemini
   olan 43px'lik bir alan. Bizde çıplak metindi; "buraya yazılır" duygusunu
   hiçbir şey vermiyordu, kart sadece bir cümle gösteriyordu. */
.hs .hs-composer-w .hm-comp-t{flex:1;min-width:0;display:flex;align-items:center;
  height:43px;padding:0 14px;border-radius:14px;background:var(--hs-panel2);
  color:#bec6cf;font-size:13px}
/* IZGARA, KAYDIRICI DEĞİL — mockup .composer-actions da grid.
   SABİT KOLON SAYISI YAZILAMAZ: mockup'ta çip sayısı dörde sabit, bizde
   adminden değişiyor (1–6). "repeat(4,1fr)" üç çipte boşluk, beşte taşma
   verirdi. grid-auto-flow:column + grid-auto-columns:minmax(0,1fr) sayıdan
   bağımsız olarak eşit paylaştırıyor; minmax'ın 0 tabanı da etiketin
   kısalabilmesi için şart (varsayılan auto, içerik kadar yer ister ve
   taşırır). Kaydırıcı denendi: 375px'te dördüncü çip kırpılıyordu. */
.hs .hs-comp-acts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:4px;margin-top:12px;padding:11px 0 0;border-top:1px solid var(--hs-line)}
.hs .hs-comp-act{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:0 6px;border-radius:11px;font-size:12.5px;font-weight:700;
  color:var(--hs-t2);text-decoration:none;transition:.16s}
.hs .hs-comp-act>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs .hs-comp-act .hm-chip-ic{flex:none}
.hs .hs-comp-act:hover{background:var(--hs-panel2);color:var(--hs-t)}

/* Etiketler kartı — mockup .topic-card. Mockup çerçevede mavi/mor tonlar
   kullanıyor; sosyal yüzeyde mavi yasak (proje kuralı), altın kullanılıyor. */
.hs .hs-tagcard{margin:0 0 14px;padding:14px;border:1px solid var(--hs-line);border-radius:18px;
  background:linear-gradient(135deg,rgba(245,197,66,.06),rgba(245,197,66,.02) 60%,transparent)}
.hs .hs-tagcard-h{display:flex;align-items:center;gap:11px}
.hs .hs-tagcard-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--hs-panel2);color:var(--hs-accent)}
.hs .hs-tagcard-c{flex:1;min-width:0;display:flex;flex-direction:column}
.hs .hs-tagcard-c strong{font-size:13.5px;color:var(--hs-t)}
.hs .hs-tagcard-c small{font-size:10.5px;color:var(--hs-t2)}
.hs .hs-tagcard-h>a{flex:none;font-size:11.5px;font-weight:800;color:var(--hs-accent);text-decoration:none}
.hs .hs-tagcard-l{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.hs .hs-tagchip{display:inline-flex;align-items:center;gap:6px;padding:0 11px;height:31px;
  border:1px solid var(--hs-line);border-radius:999px;background:var(--hs-panel);
  font-size:12px;font-weight:700;color:var(--hs-t);text-decoration:none;transition:.16s}
.hs .hs-tagchip:hover{background:var(--hs-panel2);border-color:rgba(245,197,66,.32)}
.hs .hs-tagchip b{font-size:11px;font-weight:800;color:var(--hs-t2)}

/* Akış başlığı — mockup .feed-topline. Diğer sayfaların .page-head'inden
   (20px) DAHA KÜÇÜK yazıyor: mockup .feed-name 17px/900, alt satır 10px.
   Akışın başlığı bir sayfa başlığı değil, akışın adı; altındaki sekmelerle
   birlikte tek bir başlık bloğu okunuyor. */
.hs .hs-phead-feed{align-items:center;padding:2px 0 11px}
.hs .hs-phead-feed .hs-phead-c h1{font-size:17px;font-weight:900;letter-spacing:-.4px}
.hs .hs-phead-feed .hs-phead-c p{margin:2px 0 0;font-size:10px;font-weight:600;letter-spacing:0}
.hs .hs-phead-feed .hs-phead-a{padding-top:0;align-items:center}
/* Etkin AKIŞ sekmesinin altın çizgisi — mockup .feed-tab.active::after.
   YALNIZ akış sekmesinde (.hs-ftabs), paylaşılan .hs-gtabs'ta değil:
   mockup'ta .group-tabs button.active çizgi TAŞIMIYOR (yalnız panel2
   zemin), .reels-tabs ise BEYAZ çizgi kullanıyor. Ortak sınıfa yazmak
   gruplar sayfasına mockup'ta olmayan bir öğe basardı.

   position:relative ŞART: ::after mutlak konumlu ve bağlayıcı ölçüldüğünde
   position:static'ti — çapa olmadan çizgi sekmenin altına değil, en yakın
   konumlanmış ataya göre yerleşirdi. */
/* 42px: mockup .feed-tab. Paylaşılan .hs-gtabs 38px KALIYOR — mockup'ta
   .group-tabs button da 38px; ortak kurala yazmak grupları bozardı. */
.hs .hs-ftabs a{position:relative;height:42px}
.hs .hs-ftabs a.active::after{content:"";position:absolute;left:38%;right:38%;bottom:5px;
  height:3px;border-radius:99px;background:var(--hs-accent)}

.hs .hs-gsearch{display:flex;align-items:center;gap:10px;height:46px;padding:0 15px;margin-bottom:14px;
  border:1px solid var(--hs-line);border-radius:14px;background:var(--hs-panel);color:var(--hs-t2)}
.hs .hs-gsearch input{flex:1;min-width:0;border:0;background:transparent;color:var(--hs-t);
  font:inherit;font-size:13px;outline:0}
.hs .hs-gsearch input::placeholder{color:var(--hs-t2)}

/* Öne çıkan grup kartı */
.hs .hs-gfeat{border:1px solid var(--hs-line);border-radius:20px;overflow:hidden;
  background:var(--hs-panel);margin-bottom:20px}
.hs .hs-gfeat-cover{display:block;position:relative;height:210px;
  background:linear-gradient(160deg,#1b2735,#0b0d10) center/cover}
.hs .hs-gfeat-logo{position:absolute;left:18px;bottom:-24px;width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;background:var(--hs-panel2);color:var(--hs-accent);
  border:1px solid var(--hs-line)}
.hs .hs-gfeat-b{padding:36px 18px 18px}
.hs .hs-gfeat-b h3{margin:0;font-size:19px;letter-spacing:-.3px;color:var(--hs-t)}
.hs .hs-gfeat-b p{margin:7px 0 0;font-size:12.5px;line-height:1.55;color:var(--hs-t2)}
.hs .hs-gfeat-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:11.5px;color:var(--hs-t2)}
.hs .hs-gfeat-act{display:flex;gap:9px;margin-top:15px}
.hs .hs-gfeat-act form{margin:0;flex:1}
.hs .hs-gjoin{flex:1;width:100%;height:46px;border:0;border-radius:13px;cursor:pointer;
  background:var(--hs-accent);color:#141414;font:inherit;font-size:13px;font-weight:800;
  display:grid;place-items:center;text-decoration:none}
.hs .hs-gjoin:hover{filter:brightness(1.06)}
.hs .hs-gmore{width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--hs-line);background:var(--hs-panel2);color:var(--hs-t2)}
.hs .hs-gmore:hover{color:var(--hs-t)}

.hs .hs-gsec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px 10px}
.hs .hs-gsec h3{margin:0;font-size:14.5px;color:var(--hs-t)}
.hs .hs-gsec a{font-size:12px;font-weight:750;color:var(--hs-accent);text-decoration:none}

/* Grup satırı */
.hs .hs-glist{display:flex;flex-direction:column;gap:9px}
.hs .hs-grow{display:flex;align-items:center;gap:13px;padding:13px 15px;
  border:1px solid var(--hs-line);border-radius:16px;background:var(--hs-panel);transition:.16s}
.hs .hs-grow:hover{background:var(--hs-panel2)}
.hs .hs-grow form{margin:0;flex:none}
.hs .hs-grow-ic{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;
  background:var(--hs-soft);color:var(--hs-accent)}
.hs .hs-grow-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-decoration:none}
.hs .hs-grow-b strong{font-size:13.5px;color:var(--hs-t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs .hs-grow-b span{font-size:11.5px;color:var(--hs-t2)}
.hs .hs-grow-x{flex:none;height:36px;padding:0 16px;border-radius:11px;cursor:pointer;
  border:1px solid var(--hs-line);background:var(--hs-panel2);color:var(--hs-t);
  font:inherit;font-size:12px;font-weight:750;display:inline-flex;align-items:center;text-decoration:none}
.hs .hs-grow-x:hover{background:var(--hs-soft)}

@media(max-width:760px){
  .hs .hs-phead{padding:14px 13px 12px}
  .hs .hs-gtabs,.hs .hs-gsearch,.hs .hs-gfeat,.hs .hs-glist,.hs .hs-gsec,
  .hs .hs-tagcard,.hs .hs-composer-w{margin-left:13px;margin-right:13px}
  /* Dar ekranda dört çip 349px'e sığmalı — mockup da mobilde boşluğu 1px'e
     indirip yazıyı küçültüyor. Etiket GİZLENMİYOR: mockup'ın ilk medya
     sorgusu span'i kaldırıyor ama ikincisi geri getiriyor; ikonlar tek
     başına "Duygu" ile "Anket"i ayırt ettirmiyor. */
  .hs .hs-composer-w{padding:12px;border-radius:16px}
  .hs .hs-comp-acts{gap:2px;margin-top:10px;padding:9px 0 0}
  .hs .hs-comp-act{gap:5px;padding:0 3px;font-size:11px}
  .hs .hs-gfeat{border-radius:16px}
  .hs .hs-gfeat-cover{height:170px}
}

/* ═══════════ KAYDEDİLENLER — kapaklı kart ızgarası (mockup .saved-grid) ═══════════
   Eskiden düz liste satırıydı; mockup iki kolon kart gösteriyor. */
.hs .hs-svgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hs .hs-svcard{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--hs-line);border-radius:18px;background:var(--hs-panel);
  transition:border-color .16s,transform .16s,opacity .18s}
.hs .hs-svcard:hover{border-color:var(--hs-line2);transform:translateY(-2px)}
.hs .hs-svgone{opacity:0;transform:scale(.97)}
/* Görsel AKIŞ DIŞI: akışta bırakılınca kendi doğal oranıyla kutuyu itiyor
   ve aspect-ratio eziliyordu (128x128 küçük resimler kareye dönüyordu). */
.hs .hs-svcov{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--hs-soft)}
.hs .hs-svcov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hs .hs-svnoimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--hs-t2)}
.hs .hs-svtype{position:absolute;top:9px;left:9px;padding:4px 9px;border-radius:8px;
  font-size:9.5px;font-weight:800;letter-spacing:.5px;
  background:rgba(10,8,4,.72);color:var(--hs-accent);backdrop-filter:blur(6px)}
.hs .hs-svcopy{flex:1;display:flex;flex-direction:column;padding:11px 13px 13px}
.hs .hs-svcopy h3{margin:0;font-size:13.5px;line-height:1.35;font-weight:750}
.hs .hs-svcopy h3 a{color:var(--hs-t);text-decoration:none}
.hs .hs-svcopy h3 a:hover{color:var(--hs-accent)}
.hs .hs-svcopy>span{margin-top:4px;font-size:11px;color:var(--hs-t2)}
.hs .hs-svacts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto;padding-top:11px}
.hs .hs-svacts>*{height:33px;display:grid;place-items:center;border-radius:10px;
  border:1px solid var(--hs-line);background:var(--hs-panel2);color:var(--hs-t);
  font:inherit;font-size:11.5px;font-weight:700;text-decoration:none;cursor:pointer;transition:.16s}
.hs .hs-svopen{background:var(--hs-accent);border-color:var(--hs-accent);color:#151109}
.hs .hs-svopen:hover{filter:brightness(1.06)}
.hs .hs-svdrop:hover{border-color:var(--hs-danger);color:var(--hs-danger)}
@media(max-width:760px){
  .hs .hs-svgrid{margin-left:13px;margin-right:13px}
  .hs .hs-gsearch{margin-left:13px;margin-right:13px}
}
@media(max-width:420px){ .hs .hs-svgrid{grid-template-columns:1fr} }

/* ═══════════ KEŞFET — hero + zengin kartlar (mockup .popular-*) ═══════════
   Eskiden düz küçük resim ızgarasıydı; mockup öne çıkan büyük kart ve
   yazar künyeli kartlar gösteriyor. */
.hs .hs-prule{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--hs-accent) 42%,transparent);
  background:color-mix(in srgb,var(--hs-accent) 11%,transparent);
  color:var(--hs-accent);font-size:11.5px;font-weight:750}

.hs .hs-pophero{position:relative;margin-bottom:12px;border:1px solid var(--hs-line);
  border-radius:20px;overflow:hidden;background:var(--hs-panel)}
/* Mockup .popular-hero{min-height:330px} — en-boy oranı KORUNUYOR ama
   dar ekranda 16/11 kapağı 240px'e düşürüyordu; mockup'ın kapağı hep
   315px'in altına inmiyor. min-height oranı yalnız KÜÇÜLDÜĞÜNDE eziyor. */
.hs .hs-pophero-m{display:block;aspect-ratio:16/11;min-height:330px;position:relative;overflow:hidden;background:var(--hs-soft)}
.hs .hs-pophero-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Mockup .popular-rank: KOYU cam rozet, BEYAZ metin. Altın yazılmıştı ve
   kapak fotoğrafının üstünde ikinci bir vurgu yaratıyordu — mockup vurguyu
   tek yerde (etiket çipi) tutuyor. */
.hs .hs-poprank{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 10px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(9px);
  color:#fff;font-size:10px;font-weight:900}
.hs .hs-pophero-c{position:absolute;left:0;right:0;bottom:0;padding:44px 15px 14px;
  background:linear-gradient(to top,rgba(8,7,5,.93) 34%,rgba(8,7,5,0))}
.hs .hs-pophero-c h2{margin:9px 0 0;font-size:20px;line-height:1.2;letter-spacing:-.45px}
.hs .hs-pophero-c h2 a{color:#fff;text-decoration:none}
.hs .hs-popeng{display:flex;gap:13px;margin-top:11px;color:#fff;font-size:10.5px;font-weight:800}
.hs .hs-popeng span{display:inline-flex;align-items:center;gap:5px}
.hs .hs-popeng b{font-weight:750}

.hs .hs-popgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.hs .hs-pcard{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--hs-line);border-radius:18px;background:var(--hs-panel);transition:.16s}
.hs .hs-pcard:hover{border-color:var(--hs-line2)}
.hs .hs-pphoto{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--hs-soft)}
.hs .hs-pphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hs .hs-plike{position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:999px;background:rgba(10,8,4,.7);backdrop-filter:blur(6px);
  color:#ff6b73;font-size:10.5px;font-weight:750}
.hs .hs-ptype{position:absolute;top:9px;left:9px;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:rgba(10,8,4,.7);backdrop-filter:blur(6px);color:#fff}
.hs .hs-pphoto-c{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;
  padding:26px 11px 10px;background:linear-gradient(to top,rgba(8,7,5,.9) 40%,rgba(8,7,5,0))}
.hs .hs-pphoto-c b{color:#fff;font-size:12px;font-weight:700;line-height:1.35}
.hs .hs-pphoto-c small{color:rgba(255,255,255,.7);font-size:10px}

/* Mockup .popular-text-card: sağ üstten altın bir ışık düşen koyu
   gradyan. Düz panel zeminiyle fotoğraf kartının yanında sönük kalıyordu. */
.hs .hs-ptextcard{padding:15px;min-height:245px;display:flex;flex-direction:column;
  background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--hs-accent) 8%,transparent),transparent 34%),
             linear-gradient(145deg,#181c23,#101318)}
.hs .hs-ptextlab{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hs .hs-ptextlab{margin-bottom:18px}
.hs .hs-ptextlab>span:first-child{height:26px;padding:0 9px;border-radius:999px;font-size:9px;font-weight:900;
  letter-spacing:.4px;text-transform:uppercase;
  background:color-mix(in srgb,var(--hs-accent) 13%,transparent);color:var(--hs-accent)}
.hs .hs-ptextlab>span:last-child{display:inline-flex;align-items:center;gap:4px;color:#ff6b73;
  font-size:10.5px;font-weight:750}
.hs .hs-ptextbody{display:block;flex:1;color:#f2f4f7;text-decoration:none;
  font-size:15.5px;line-height:1.42;font-weight:800;letter-spacing:-.3px}
/* GÖVDE METNİ — cell_text_html'in ".cl-txt" kabuğu ESKİ IZGARA HÜCRESİ
   için yazılmış ve buraya olduğu gibi düşüyordu. app.css'te ne var:
     position:absolute;inset:0        → kart içinde YERİ YOK, metin
                                        konumlanmış en yakın ataya kaçıyor
                                        (tarayıcıda ölçüldü: kart gövdesi
                                        bomboş kalıyordu)
     background:linear-gradient(#1a2440,#0f1728)  → LACİVERT; sosyal
                                        yüzeyde mavi yasak
     text-align:center + dikey flex    → mockup'ta metin sola yaslı
     .cl-txt-t{font-size:11.5px;color:#c3cce0}   → mockup'ın 17px'lik
                                        alıntı tipografisini eziyordu
   Hepsi bu kapsamda geri alınıyor; app.css'e dokunulmuyor çünkü aynı
   sınıf eski ızgara hücresinde HÂLÂ doğru çalışıyor. */
.hs .hs-ptextbody .cl-txt{position:static;inset:auto;display:flex;flex-direction:row;
  align-items:flex-start;justify-content:flex-start;gap:8px;padding:0;text-align:left;background:none}
.hs .hs-ptextbody .cl-txt-e{flex:none;font-size:1.05em;line-height:1.3}
/* Duygusu olmayan yazıda varsayılan "💬" balonu basılmıyor (bkz. explore.php). */
.hs .hs-ptextcard:not(.hs-pmood) .hs-ptextbody .cl-txt-e{display:none}
.hs .hs-ptextbody .cl-txt-t{font-size:inherit;line-height:inherit;font-weight:inherit;
  color:inherit;-webkit-line-clamp:6}

/* İKİ KOLONU KAPLAYAN YAZI — mockup .popular-wide-text. */
.hs .hs-pwide{grid-column:1/-1;min-height:195px}
.hs .hs-pwide .hs-ptextbody{font-size:18px}
.hs .hs-ptextbody .exp-txt,.hs .hs-ptextbody>*{max-height:190px;overflow:hidden}

.hs .hs-pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border-top:1px solid var(--hs-line)}
.hs .hs-ptextcard .hs-pfoot{margin:12px 0 0;padding:14px 0 0;border-top:1px solid var(--hs-line)}
.hs .hs-pmini{display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none}
.hs .hs-pmini img,.hs .hs-pmini-i{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--hs-soft);color:var(--hs-t2);font-size:11px;font-weight:800}
.hs .hs-pmini>span{display:flex;flex-direction:column;min-width:0}
.hs .hs-pmini b{color:var(--hs-t);font-size:11.5px;font-weight:750;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hs .hs-pmini small{color:var(--hs-t2);font-size:10px}
.hs .hs-pophero-c .hs-pmini b{color:#fff}
.hs .hs-pophero-c .hs-pmini small{color:rgba(255,255,255,.72)}
.hs .hs-psave{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:10px;
  background:transparent;color:var(--hs-t2);cursor:pointer;transition:.16s}
.hs .hs-psave:hover{background:var(--hs-panel2);color:var(--hs-t)}
.hs .hs-psave.on{color:var(--hs-accent)}
@media(max-width:760px){
  .hs .hs-pophero,.hs .hs-popgrid{margin-left:13px;margin-right:13px}
}
/* MOBİLDE DE İKİ KOLON. Eskiden 420px'in altında tek kolona düşüyordu;
   mockup 390px'te bile iki kolonu koruyup yalnız BOŞLUĞU ve en-boy
   oranını daraltıyor — tek kolon, "keşfet ızgarası" hissini bitiriyordu. */
@media(max-width:760px){
  .hs .hs-popgrid{gap:8px}
  .hs .hs-pophero-m{min-height:315px}
  .hs .hs-ptextcard{padding:13px;min-height:225px}
  .hs .hs-ptextbody{font-size:15.5px}
  .hs .hs-pwide{min-height:195px}
  .hs .hs-pwide .hs-ptextbody{font-size:18px}
  .hs .hs-pfoot{padding:9px}
  .hs .hs-pphoto-c b{font-size:10.5px}
}
@media(max-width:390px){
  .hs .hs-popgrid{gap:6px}
  .hs .hs-pphoto{aspect-ratio:3.9/5}
  .hs .hs-ptextcard{min-height:218px;padding:12px}
  .hs .hs-ptextbody{font-size:14.7px}
  .hs .hs-pmini img,.hs .hs-pmini-i{width:25px;height:25px}
  .hs .hs-plike{top:7px;right:7px}
}

/* KEŞFET BAŞLIĞI — mockup .popular-head{align-items:flex-end}.
   Ortak .hs-phead ≤430px'te aksiyonu TAM GENİŞLİĞE alıyor; bu düğmeler
   için doğru ama "Çok Beğenilenler" bir düğme değil ROZET ve alt satıra
   düşünce başlık bloğu ikiye bölünüyordu. Ortak kural değişmedi. */
.hs .hs-phead-pop{align-items:flex-end;flex-wrap:nowrap}
/* SARMA DA KAPATILMALI: ortak .hs-phead-c "flex:1 1 240px" taşıyor;
   375px'lik ekranda 240px taban + rozet, satıra sığmadığı için rozet
   ALTA DÜŞÜYORDU (width:auto tek başına yetmedi — ölçüldü). Taban auto'ya
   çekilince başlık esniyor, rozet kendi genişliğinde satırda kalıyor. */
.hs .hs-phead-pop .hs-phead-c{flex:1 1 auto}
.hs .hs-phead-pop .hs-phead-a{width:auto;padding-top:0;flex:none}
.hs .hs-phead-pop .hs-phead-a>*{flex:none;white-space:nowrap}

/* ETKİN ÇİP BEYAZ — mockup .popular-filter.active{background:#fff}.
   Ortak .hs-chip.active altın ve altı sayfada paylaşılıyor; buradaki
   kapsam (0,4,0) yalnız Keşfet'i boyuyor. */
.hs .hs-chips-pop .hs-chip.active{background:#fff;border-color:#fff;color:#0d1014}

/* ═══════════ ETİKET AKIŞI — küçük resim ızgarası yerine gönderi kartları ═══════════ */
.hs .hs-tagfeed{display:flex;flex-direction:column;gap:14px}
.hs .hs-ph-tag{align-items:center}
.hs .hs-ph-tag .hs-ph-n{flex:none;margin-left:auto;padding:6px 12px;border-radius:999px;
  border:1px solid var(--hs-line);background:var(--hs-panel);
  color:var(--hs-t2);font-size:11.5px;font-weight:700;white-space:nowrap}

/* ═══════════ PROFİL — sekme çubuğu + hızlı araçlar (mockup) ═══════════
   Eskiden düz çip şeridiydi; mockup ikon-üstte eşit bölmeli sekme ve
   altında dört kartlık araç sırası gösteriyor. */
.hs .hs-ptabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;
  margin-bottom:12px;border-bottom:1px solid var(--hs-line)}
.hs .hs-ptabs a{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 4px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;
  color:var(--hs-t2);text-decoration:none;font-size:10.5px;font-weight:700;transition:.16s}
.hs .hs-ptabs a:hover{color:var(--hs-t)}
.hs .hs-ptabs a.active{color:var(--hs-accent);border-bottom-color:var(--hs-accent)}
.hs .hs-ptabs a span{white-space:nowrap}

.hs .hs-ptools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.hs .hs-ptool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-width:0;list-style:none;
  min-height:66px;padding:10px 6px;border:1px solid var(--hs-line);border-radius:14px;
  background:var(--hs-panel);color:var(--hs-t2);font:inherit;font-size:10.5px;font-weight:700;
  text-decoration:none;cursor:pointer;transition:.16s}
.hs .hs-ptool:hover{color:var(--hs-t);border-color:var(--hs-line2);background:var(--hs-panel2)}
.hs .hs-ptool span{white-space:nowrap}
@media(max-width:760px){
  .hs .hs-ptabs{margin-left:13px;margin-right:13px}
  .hs .hs-ptools{margin-left:13px;margin-right:13px}
}


/* ═══════════ AKIŞIN ESKİ MOR KALINTILARI ═══════════
   Faz 1'de eski sosyal palet (app.css ▸ --hm-purple/--hm-pink) BİLEREK
   bırakılmıştı, "geçiş fazlı" diye. Akışın üst bölümleri o yüzden mor/pembe
   kalmıştı ve altın sayfanın içinde göze batıyordu (ölçüldü: hm-tile-hi
   kenarlığı rgba(180,110,255,.6), bölüm başlığı bağlantıları rgb(160,67,224)).

   app.css'e DOKUNULMUYOR — 87 dize kilidi var ve mor palet Harman dışı
   yüzeylerde de kullanılıyor olabilir. Burada YALNIZ Harman kapsamında
   eziliyor.

   .hm-tile-hi ÖZEL DURUM: app.css vurgulu karoya SABİT mor kenarlık
   veriyor ve karonun kendi rengini (--hm-tint-line) eziyor. Yönetimden
   seçilen renk görünmüyordu; artık karo kendi tonunu koruyor. */
/* Eski sosyal İKİNCİL METİN tonu (#8b98b4) gri-mavi; Harman'ınki nötr gri
   (#8f98a5). Token düzeyinde eziliyor — onlarca .nx-*/.hm-* kuralı bunu
   okuyor, tek tek seçici kovalamak yerine kaynağı değiştirmek yeterli.
   --hm-pink ve --hm-magenta BİLEREK DOKUNULMADI: birincisi silme/tehlike
   rengi (.nx-menu .danger), ikincisi HARMAN logosunun markası. */
body.hs-body{ --hm-t2:var(--hs-t2); --hm-t:var(--hs-t) }
body.hs-body .hm-tile.hm-tile-hi{--hm-tint-line:color-mix(in srgb,var(--hs-accent) 55%,transparent)}
body.hs-body .hm-sec-h a{color:var(--hs-accent)}
body.hs-body .hm-ring-sec .hm-sec-h a{color:var(--hs-accent)}
body.hs-body .nx-ring{background:linear-gradient(135deg,var(--hs-accent),#c9761b)}
body.hs-body .nx-ring.add .nx-av{color:var(--hs-accent)}

/* Üst başlıktaki avatar halkası ve bildirim rozeti — eski gökkuşağı süs.
   Mockup'ta avatar DÜZ (<img class="top-avatar">, halka yok) ve rozet
   markanın kırmızısında. Halkayı büsbütün kaldırmak yerine altın tutuluyor:
   çevrimiçi baloncuğu ve odak halkası ona dayanıyor.
   LOGOYA DOKUNULMUYOR — .hm-logo / .nx-logo markanın kendisi. */
/* ═══════════ BAŞLIK SAĞ GRUBU — mockup .icon-btn / .badge / .top-avatar ═══════════
   Ölçüldü, üçü de ayrışmıştı:
     ikon düğme  46px DAİRE, şeffaf zemin, 1px LACİVERT çerçeve (#1f293c)
                 → 41px YUVARLAK KARE (radius 13), panel2 zemin, çerçevesiz
     rozet       22x20, 11px yazı, 2.5px çerçeve → 17x17, 10px, 2px
     avatar      46px → 39px, altın halka mockup'ın 2px .55 opaklığında
   Yuvarlak kare, avatarın dairesinden AYRILMASINI sağlıyor: mockup'ta ikon
   ile kimlik farklı biçimlerle ayrışıyor, üçü de daire olunca avatar
   kayboluyordu. */
body.hs-body .hm-ic{width:41px;height:41px;flex:0 0 41px;border:0;border-radius:13px;
  background:var(--hs-panel2);color:var(--hs-t);transition:.18s}
body.hs-body .hm-ic:hover{transform:translateY(-1px);background:var(--hs-soft)}
body.hs-body .hm-head-r{gap:8px}

body.hs-body .hm-badge{min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  border-width:2px;font-size:10px;right:-2px;top:-3px}

body.hs-body .hm-me{
  width:39px;height:39px;flex:0 0 39px;padding:2px;
  background:linear-gradient(135deg,var(--hs-accent),#c9761b);
  box-shadow:0 0 12px color-mix(in srgb,var(--hs-accent) 30%,transparent);
}
body.hs-body .hm-me-av{background:var(--hs-soft);color:var(--hs-t);border-color:var(--hs-bg)}
/* PARILTI YOK (kullanıcı kararı): rozetlerin arkasındaki renkli gölge
   koyu başlıkta bir ışık lekesi gibi duruyordu. Rozet zaten kendi rengi
   ve sayfa zemini renginde çerçevesiyle ayrışıyor; gölge okunurluğa bir
   şey katmıyordu. */
body.hs-body .hm-badge{
  background:var(--hs-danger);color:#151109;
  border-color:var(--hs-bg);
  box-shadow:none;
}

/* ═══════════ KONU SAYFALARI — krom altına, TAKSONOMİ korunuyor ═══════════
   /konular, /konu/{slug} ve /etiket/{konu}/gonderi/{id} Harman gönderi
   kartı basıyordu ama harman.css yüklemiyordu; kartlar eski stile düşüyor,
   alt menü mavi kalıyordu. Üçü de kabuğa alındı.

   AYRIM: konunun KENDİ rengi (--tp-a, .tp-p-*, .tp-c-*) içerik taksonomisi
   ve anlam taşıyor ("Deniz" mavi) — DOKUNULMUYOR. Değişen yalnız krom:
   mor vurgular altına dönüyor. */
body.hs-body .tp-st-2 i{background:var(--hs-accent);box-shadow:0 0 8px var(--hs-accent)}
body.hs-body .tp-hero-line{background:linear-gradient(90deg,var(--hs-accent),var(--tp-a,var(--hs-accent2)))}
body.hs-body .tp-share-b svg{color:var(--hs-accent)}
/* "Abone Ol" düğmesi mor gradyandaydı (--hm-purple2 → #c03ae0) ve gölgesi
   de mordu; yalnız ".on" (abone olunmuş) hâli ezilmişti, TABAN değil —
   tarayıcıda mobilde görülerek yakalandı.
   KUTUPLAR KORUNUYOR: yapılacak iş vurgulu (altın dolgu), yapılmış iş sakin
   (çerçeveli) — app.css'in kendi yazdığı ayrım, yalnız rengi değişti. */
body.hs-body .tp-sub{
  background:var(--hs-accent);
  color:#151109;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--hs-accent) 90%,transparent);
}
body.hs-body .tp-sub.on{background:rgba(255,255,255,.05);border-color:var(--hs-line);
  color:var(--hs-t2);box-shadow:none}

/* Sosyal bağlantı ikonları app.css'te LACİVERT kalmıştı: zemin #1f2740
   (--surface-2), çerçeve #28324c — ölçüldü, ikisi de mavi baskın (B−R=33).
   Altın yüzeyde yabancı duruyordu. Künyede ve Hakkında sekmesinde aynı
   öğe kullanılıyor, tek kural ikisini birden düzeltiyor. */
.hs .pf-social a{background:var(--hs-panel2);border-color:var(--hs-line);color:var(--hs-t)}
.hs .pf-social a:hover{border-color:var(--hs-accent);color:var(--hs-accent)}

/* Bildirim satırının küçük resmi — mockup .notify-thumb. */
.hs .hs-nrow-th{flex:none;width:44px;height:44px;border-radius:11px;overflow:hidden;
  background:var(--hs-soft);display:block}
.hs .hs-nrow-th img{width:100%;height:100%;object-fit:cover;display:block}

/* ═══════════ GÖNDERİ İSTATİSTİK SATIRI — mockup .post-stats ═══════════
   Eylem düğmelerinin ÜSTÜNDE, altında ayraç: solda beğenen avatarları +
   beğeni sayısı, sağda yorum/paylaşım. Sayılar eskiden düğmelerin
   içindeydi ("Beğen 2") ve etiketle karışıyordu. */
.hs .hs-stats{min-height:42px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 14px;border-bottom:1px solid var(--hs-line);
  color:var(--hs-t2);font-size:12px;font-weight:650}
.hs .hs-stats-l{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;min-width:0}
.hs .hs-stats-n{font-size:12.5px;font-weight:800;color:var(--hs-t)}
/* Sayı sıfırken <b> boş basılıyor (app.js'in yazacağı kap kalsın) — boş
   kalınca kendini gizliyor, "0" kalabalığı olmuyor. */
.hs .hs-stats-n:empty{display:none}
.hs .hs-stats-r{white-space:nowrap}
.hs .hs-stats .hm-likeavs{display:inline-flex;padding:0;margin:0}

/* Etiket çipleri mockup geometrisinde: 28px yükseklik, 9.5px/800 yazı,
   tam yuvarlak. RENK ALTIN KALIYOR — mockup mavi kullanıyor ama sosyal
   yüzeyde mavi yasağı bu projenin kuralı ve çipler dekoratif değil,
   her gönderide tekrarlanan arayüz öğesi. */
.hs .hm-tag{height:28px;display:inline-flex;align-items:center;padding:0 10px;
  font-size:9.5px;font-weight:800;letter-spacing:.2px}

/* ═══════════ ⋯ AKSİYON MENÜSÜ — Harman paletine ═══════════
   app.css menüye --hm-card2 (#0e1930) veriyordu: LACİVERT zemin, #1f293c
   çerçeve, #dbe2f2 mavimsi metin, #8b93ad ikon. Altın yüzeyde yabancı
   duruyordu. Kırmızı "Sil" maddesi KORUNUYOR — geri alınamayan tek
   aksiyon o, rengi bir uyarı. */
body.hs-body .nx-menu{background:var(--hs-panel);border-color:var(--hs-line);
  box-shadow:var(--hs-shadow)}
body.hs-body .nx-menu a,
body.hs-body .nx-menu button{color:var(--hs-t)}
body.hs-body .nx-menu svg{color:var(--hs-t2)}
body.hs-body .nx-menu a:hover,
body.hs-body .nx-menu button:hover{background:var(--hs-panel2)}
body.hs-body .nx-menu .danger,
body.hs-body .nx-menu .danger svg{color:var(--hs-danger)}
body.hs-body .nx-menu .danger:hover{background:color-mix(in srgb,var(--hs-danger) 14%,transparent)}
/* Ek aksiyonlarla asıl menü arasındaki ayraç: moderasyon (bağlamsal) ile
   düzenle/sil (sahiplik) farklı ağırlıkta kararlar, ayrılmaları gerekiyor. */
body.hs-body .nx-menu-sep{display:block;height:1px;margin:5px 6px;background:var(--hs-line)}
body.hs-body .nx-pmore{color:var(--hs-t2)}
body.hs-body .nx-pmore[aria-expanded="true"]{color:var(--hs-accent)}

/* ═══════════ HAKKINDA SEKMESİ — mockup .about-list ═══════════
   Satır: ikon + etiket + değer. Boş alan HİÇ BASILMIYOR (şablonda),
   burada yalnız görünüm. */
.hs .hs-about{display:flex;flex-direction:column;border:1px solid var(--hs-line);
  border-radius:16px;background:var(--hs-panel);overflow:hidden}
.hs .hs-about-r{display:flex;align-items:flex-start;gap:14px;padding:15px 16px}
.hs .hs-about-r+.hs-about-r{border-top:1px solid var(--hs-line)}
.hs .hs-about-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--hs-panel2);color:var(--hs-accent)}
.hs .hs-about-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hs .hs-about-c b{font-size:13.5px;color:var(--hs-t)}
.hs .hs-about-c small{font-size:12px;line-height:1.5;color:var(--hs-t2);word-break:break-word}
/* Bağlantı satırında sosyal ikonlar — künyedeki .pf-social ile aynı öğe. */
.hs .hs-about-c .pf-social{margin-top:4px}

/* ═══════════ PROFİL ARAÇ KARTI — mockup .profile-quick-tools ═══════════
   Aksiyonlar künyenin içinde yan yana dört "pill"di; hangisinin birincil
   olduğu belirsizdi ve kimlik bilgisiyle eylem aynı kutuda karışıyordu.
   Mockup bunları sekmelerin ALTINDA ayrı bir karta alıyor: ikon üstte,
   etiket altta, dört eşit sütun. */
/* TABAN TANIM ZATEN VARDI (yukarıda, kendi profilim için yazılmıştı) ve
   ikinci kez tanımlamak sessiz bir ezme yaratıyordu — min-width/list-style
   asıl kurala katıldı. Burada yalnız üye profiline ÖZGÜ olanlar. */
/* BİRİNCİL VURGU DURUMDAN GELİYOR, sınıftan değil: app.js takip sonrası
   yalnız "on"/"pending" sınıflarını sürüyor: sınıfa bağlanan altın vurgu
   takipten çıkınca geri gelmiyordu (tıklanarak ölçüldü).
   Takipteyken sakin kalıyor — altın kalması "hâlâ takip et" diye bağırırdı. */
.hs .hs-ptool[data-follow-state="none"]{background:var(--hs-accent);
  border-color:var(--hs-accent);color:#151109}
.hs .hs-ptool[data-follow-state="none"]:hover{color:#151109}
.hs .hs-ptool[data-follow-state="following"]{color:var(--hs-t)}

/* TAKİP DÜĞMESİ ÜÇ DURUMLU, GEÇİŞ DURUMA BAĞLI.
   app.css'teki eski kural ".pf-follow .pf-f-yes{display:none}" idi ve düğme
   Harman'a geçerken .pf-follow sınıfını KAYBETMİŞTİ — kural hiç eşleşmiyor,
   iki etiket birden görünüyordu (tarayıcıda "Takip Et Takip ediliyor" diye
   ölçüldü). Sınıf yerine data-follow-state kullanılıyor: app.js zaten onu
   sürüyor, yani tek doğruluk kaynağı. */
.hs [data-follow] .pf-f-no,
.hs [data-follow] .pf-f-yes,
.hs [data-follow] .pf-f-req{display:none;flex-direction:column;align-items:center;gap:6px}
.hs [data-follow][data-follow-state="none"] .pf-f-no,
.hs [data-follow][data-follow-state="following"] .pf-f-yes,
.hs [data-follow][data-follow-state="requested"] .pf-f-req{display:flex}

/* "Diğer" menüsü — <details>, yani JS kapalıyken de açılıyor. */
.hs .hs-ptool-more{position:relative;min-width:0}
.hs .hs-ptool-more>summary{width:100%}
.hs .hs-ptool-more>summary::-webkit-details-marker{display:none}
.hs .hs-ptool-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:184px;
  display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--hs-line);
  border-radius:12px;background:var(--hs-panel);box-shadow:var(--hs-shadow)}
.hs .hs-ptool-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;
  border:0;border-radius:9px;background:transparent;color:var(--hs-t);
  font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.hs .hs-ptool-menu button:hover{background:var(--hs-panel2)}

/* ═══════════ HİKAYE ŞERİDİ — mockup .stories düzeni ═══════════
   Mockup'ta şerit KARTSIZ ve BAŞLIKSIZ: sekmelerin hemen altında düz bir
   avatar sırası. Bizde app.css onu bir cam karta sarıyordu
   (.hm .hm-ring-sec{background:var(--hm-glass);border:1px…;margin:14px 14px 20px})
   ve üstünde "HARMAN HALKASI" başlığı vardı; ikisi birlikte şeridi bir
   "bölüm" gibi gösterip iki satır yer kaplıyordu.
   app.css'e dokunulmuyor; kart görünümü burada sıfırlanıyor. */
body.hs-body .hm .hm-ring-sec{background:none;border:0;border-radius:0;
  margin:0 0 2px;padding:0;box-shadow:none}
body.hs-body .hm .hm-ring{gap:13px;padding:4px 2px 15px}

/* Şerit dar ekranda kenara YAPIŞIYORDU (ölçüldü: ilk halka sol=2px,
   composer sol=13px). Mockup mobilde .stories'e yan boşluk veriyor.
   Halkalar yatay KAYDIĞI için margin değil padding: margin ilk ve son
   halkayı kaydırma alanının dışında bırakır.

   BU MEDYA SORGUSU BURADA, dosyanın ortak mobil bloğunda DEĞİL: o blok
   dosyada bu kurallardan ÖNCE geliyor ve seçici özgüllüğü eşit (0,3,1).
   Oraya yazıldığında sonraki taban kuralı onu eziyordu — tarayıcıda
   ölçülerek yakalandı (ilk halka hâlâ sol=2px'teydi). Medya sorgusu
   özgüllük EKLEMEZ; belirleyici olan kaynak sırası. */
@media(max-width:760px){
  body.hs-body .hm .hm-ring{padding-left:13px;padding-right:13px}
}

/* Halka ile fotoğrafın arasındaki boşluk mockup'ta SAYFA ZEMİNİ:
   .story-inner{padding:3px;background:var(--bg)}. Bizde app.css lacivert
   veriyordu — çerçeve #000f22, zemin #0e1930 (ölçüldü) — ve renkli halkanın
   içinde mavimsi bir çember bırakıyordu. Mockup'ta 3px, bizde 2.5px'ti. */
body.hs-body .hm .hm-ring .nx-av{border-color:var(--hs-bg);border-width:3px;
  background-color:var(--hs-bg)}

/* Halka ölçüsü mockup .story-ring: 70px dış, 2.5px iç boşluk (bizde 64/3).
   EBEVEYN DE BÜYÜMELİ: .nx-storyform app.css'te 64px SABİT genişlikte bir
   flex kabı ve düğme flex-shrink:1 ile eziliyordu — halka 64x70, yani OVAL
   çıkıyordu (tarayıcıda ölçüldü; yalnız .nx-ring'e yazmak yetmedi).
   İki değer birbirine bağlı; kilit eşitliği kontrol ediyor. */
body.hs-body .hm .hm-ring .nx-ring{width:70px;height:70px;padding:2.5px}
body.hs-body .hm .hm-ring .nx-storyform{width:70px}

/* İZLENMİŞ HİKAYE halkası app.css'te #33405c — MAVİ ağırlıklı bir gri
   (R=51, G=64, B=92; ölçüldü). Altın yüzeyde lacivert bir çember olarak
   okunuyordu. "Görüldü" durumu KALDIRILMIYOR (mockup'ta karşılığı yok ama
   bizde gerçek bir işlev: izlenen hikaye ayırt edilmeli) — yalnız rengi
   nötr griye çekiliyor, mavi sosyal yüzeyde yasak.
   İki seçici, çünkü app.css hem .hm-r-seen hem .seen ile yazıyor.
   TON SEÇİMİ ÖLÇÜLDÜ: ilk deneme #39404a idi ve kilit onu da mavi-eğilimli
   buldu (B−R=17). #3d4148 (B−R=11) paletin kendi nötrleriyle aynı hafif
   serinlikte — --hs-soft (#1d222a) B−R=13. */
body.hs-body .hm .hm-ring .nx-ring.hm-r-seen,
body.hs-body .hm .hm-ring .nx-ring.seen{background:#3d4148}

/* KENDİ HALKAN: mockup'ta gradyan YOK, düz yumuşak zemin (.story.me
   .story-ring{background:var(--soft)}). Bizdeki kesikli turuncu çerçeve
   "boş/eksik" hissi veriyordu; artı rozeti eylemi zaten anlatıyor. */
body.hs-body .hm .hm-ring .nx-ring.hm-r-self{background:var(--hs-soft);border:0}

/* Artı rozeti: mockup'ta altın daire + koyu artı, halkayı sayfa zeminiyle
   kesen bir çerçeve. app.css'te çerçeve #000f22 (lacivert) idi — koyu
   Harman zemininde mavimsi bir halka bırakıyordu (ölçüldü). */
/* ROZET DAİRESİ DOĞRU BOYUTTAYDI (24/70 — mockupla aynı oran) ama İÇİNDEKİ
   İKON 6px çiziliyordu: rozet display:flex, app.css'ten gelen padding:1px 6px
   ve 3px çerçeve ile içerik kutusu 24−12−6 = 6px'e düşüyor, svg de
   flex:0 1 auto ile oraya büzülüyordu. Kullanıcı "artı küçük kalmış" derken
   bunu görüyordu — daire değil, glif küçüktü (tarayıcıda ölçüldü).
   Konum da mockup'a çekildi: rozet halkanın dışına taşıyor (right/bottom
   negatif), içinde durunca fotoğrafı örtüyordu. */
body.hs-body .hm .hm-ring .nx-addbadge{background:var(--hs-accent);color:#151109;
  border:3px solid var(--hs-bg);padding:0;right:-5px;bottom:-4px;
  display:grid;place-items:center}
body.hs-body .hm .hm-ring .nx-addbadge svg{color:#151109;flex:none;width:15px;height:15px}

/* Ad satırı mockup .story label: 11.2px, yumuşak gri, 7px üst boşluk.
   Bizde 13.5px BEYAZ'dı; avatarla yarışıp şeridi ağırlaştırıyordu. */
body.hs-body .hm .hm-ring .nx-sn{font-size:11.2px;color:#c8ced6;margin-top:7px;
  font-weight:600;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Hikayen" etiketi app.css'te parlak turuncuydu (rgb(255,139,0) — ölçüldü);
   mockup'ta tüm adlar aynı gri. Kendi halkanı zaten artı rozeti ayırıyor,
   ad ayrıca renkle bağırmasına gerek yok.

   !important ZORUNLU, tercih değil: rakip kural app.css:3434
   ".hm .hm-ring .nx-sn.hm-sn-me{color:var(--hm-amber) !important}" — önce
   !important'sız yazıldı ve daha YÜKSEK özgüllüğe rağmen tutmadı
   (tarayıcıda ölçüldü, hâlâ rgb(255,139,0)). !important'ı yalnız
   !important yener; app.css'e dokunulamıyor (yüzlerce dize kilidi).
   Kilit dosyadaki !important SAYISINI sabitliyor: çekiç ancak rakip de
   çekiç kullanıyorsa meşru, yenisi bilinçli bir karar olmalı. */
body.hs-body .hm .hm-ring .nx-sn.hm-sn-me{color:#c8ced6 !important}

/* ═══════════ HİKAYE HALKALARI — dört gradyan altın-amber ailesine ═══════════
   app.css'teki .hm .hm-ring .nx-ring.hm-rN (0,4,0) benim daha önce yazdığım
   body.hs-body .nx-ring (0,2,1) kuralını EZİYORDU; halkalar canlıda hâlâ
   mavi/moruydu (ölçüldü: hm-r2 zemininde rgb(59,130,246) = #3b82f6).
   Dize okuyarak değil, hesaplanan değere bakarak yakalandı.

   Bu blok AYNI zincire body.hs-body ekleyerek (0,5,1) çıkıyor — dört halka
   birbirinden ayırt edilebilir kalsın diye tek renk değil, altın/amber/kehribar
   ailesinde dört ayrı dönüş açısı kullanılıyor. Kendi halkan (hm-r-self)
   zaten turuncuydu, dokunulmadı. */
/* MOCKUP GRADYANI — dördü de AYNI. Daha önce dört ayrı altın/amber dönüş
   açısı kullanılıyordu ("halkalar birbirinden ayırt edilebilsin"); mockup
   tek gradyan kullanıyor ve kullanıcı bu tasarımı istedi. Ayırt etmeyi
   fotoğraf zaten yapıyor, halka bir kimlik değil bir çerçeve.

   MAVİ DURAK (#5b9dff) BİLİNÇLİ İSTİSNA: "sosyal yüzeyde mavi yok" kuralı
   duruyor; istisna DEKORATİF bir gradyanın tek durağıyla sınırlı — düğme,
   bağlantı, rozet ya da metin rengi değil. Yasak listesindeki tonlar
   (#5aa8ff, #3f8de0, #1f6fd6, #7c9fff, #3d6cf4) hâlâ yasak ve kilit
   mavinin yalnız BU kuralda geçmesini zorluyor. */
body.hs-body .hm .hm-ring .nx-ring.hm-r1,
body.hs-body .hm .hm-ring .nx-ring.hm-r2,
body.hs-body .hm .hm-ring .nx-ring.hm-r3,
body.hs-body .hm .hm-ring .nx-ring.hm-r4{
  background:conic-gradient(var(--hs-accent),#ff7b3b,#d45dff,#5b9dff,var(--hs-accent))}

/* Akışın kalan mor kalıntıları — hepsi app.css'te, hepsi Harman kapsamında ezildi. */
body.hs-body .hm-hero-tx h2::after{background:var(--hs-accent)}
/* Etiket çipleri app.css'te MOR/LACİVERT kalmıştı (#ab8ff5 üstü #11163e);
   yalnız hover ezilmişti, TABAN değil — tarayıcıda ölçülerek yakalandı.
   ".hm-post .hm-tag" (0,2,0) taban kuralı, bu (0,3,0) ile eziliyor.
   .on varyantı KONU EŞLEŞMESİNİ gösteriyor (yeşil) — o anlam taşıyor,
   dokunulmuyor. */
/* ETİKET ÇİPLERİ MOCKUP MAVİSİNDE — kullanıcı kararı, bilinçli istisna.
   "Sosyal yüzeyde mavi yok" kuralı SÜRÜYOR; istisna yalnız bu çiplerle
   sınırlı ve kilit mavinin başka bir kurala sızmadığını ölçüyor
   (harman_revizyon.test.php: çip kuralları çıkarılıp kalan CSS taranıyor).
   Değerler mockup .post-tags button'dan birebir:
     çerçeve rgba(90,168,255,.13) · zemin rgba(90,168,255,.065) · yazı #8fc6ff */
body.hs-body .hm-tag{color:#8fc6ff;background:rgba(90,168,255,.065);
  border-color:rgba(90,168,255,.13)}
body.hs-body .hm-post .hm-tag{color:#8fc6ff;background:rgba(90,168,255,.065)}
body.hs-body .hm-tag:hover,
body.hs-body .hm-post .hm-tag:hover{color:#8fc6ff;
  background:rgba(90,168,255,.14);
  border-color:rgba(90,168,255,.3)}
body.hs-body .hm-post .tg-link,body.hs-body .hm-post .mn-link{color:var(--hs-accent)}
body.hs-body .hm-post .nx-acts .nx-bm.on{color:var(--hs-accent)}
body.hs-body .hm-post .nx-edited{color:var(--hs-accent)}
/* Etkileşim serisi boşken çubuk yerine düz cümle — yedi tane %3 çubuk
   "veri var ama düşük" gibi okunuyordu. */
.hs .hs-stnodata{padding:18px 14px;border:1px dashed var(--hs-line);border-radius:14px;
  color:var(--hs-t2);font-size:12.5px;text-align:center}
@media(max-width:760px){ .hs .hs-stnodata{margin-left:13px;margin-right:13px} }
.hs .hs-gcode-cp{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:6px 11px;
  border:1px solid var(--hs-line);border-radius:9px;background:var(--hs-panel2);color:var(--hs-t2);
  font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:.16s}
.hs .hs-gcode-cp:hover{color:var(--hs-accent);border-color:var(--hs-accent)}
/* Grup bildirim tercihi — Hakkında sekmesinde, yalnız üyeye */
.hs .hs-gnotify{display:flex;align-items:center;gap:12px;margin-top:12px;padding:13px 14px;
  border:1px solid var(--hs-line);border-radius:14px;background:var(--hs-panel)}
.hs .hs-gnotify .hs-gab-b{flex:1;min-width:0}
@media(max-width:760px){ .hs .hs-gnotify{margin-left:13px;margin-right:13px} }
/* Grup künyesi: durum ROZETİ (tıklanmaz) ile eylem düğmesi ayrı */
.hs .hs-gb-on{background:color-mix(in srgb,var(--hs-accent) 16%,transparent);
  border-color:color-mix(in srgb,var(--hs-accent) 40%,transparent);color:var(--hs-accent)}
.hs .hs-gh-note{font-size:11.5px;color:rgba(255,255,255,.72);max-width:220px;line-height:1.4}
.hs .hs-gh-d{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.78);max-width:560px}
/* Akış sekmeleri — grup sekmeleriyle aynı segment dili, akışın üstünde */
.hs .hs-ftabs{margin-bottom:14px}

/* ═══════════ ANA AKIŞ — "Grupların" şeridi (mockup home-groups) ═══════════ */
.hs .hs-hg{margin-bottom:14px;padding:14px;border:1px solid var(--hs-line);
  border-radius:var(--hs-r);background:var(--hs-panel)}
.hs .hs-hg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.hs .hs-hg-h strong{display:block;font-size:13.5px;color:var(--hs-t)}
.hs .hs-hg-h span{display:block;margin-top:2px;font-size:11.5px;color:var(--hs-t2)}
.hs .hs-hg-h a{flex:none;font-size:11.5px;font-weight:750;color:var(--hs-accent);text-decoration:none}
.hs .hs-hg-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.hs .hs-hg-scroll::-webkit-scrollbar{display:none}
.hs .hs-hg-card{flex:0 0 148px;display:flex;flex-direction:column;gap:8px;text-decoration:none}
.hs .hs-hg-cover{position:relative;display:block;height:82px;border-radius:13px;overflow:hidden;
  background:var(--hs-soft)}
.hs .hs-hg-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs .hs-hg-cover i{position:absolute;left:8px;bottom:8px;display:grid;place-items:center;
  width:28px;height:28px;border-radius:9px;background:rgba(10,8,4,.7);backdrop-filter:blur(6px);
  color:var(--hs-accent)}
.hs .hs-hg-copy b{display:block;font-size:12.5px;font-weight:750;color:var(--hs-t);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs .hs-hg-copy small{display:block;margin-top:2px;font-size:10.5px;color:var(--hs-t2)}
@media(max-width:760px){ .hs .hs-hg{margin-left:13px;margin-right:13px} }
/* Rozet katalogu — vermeden önce nasıl görüneceğini göster */
/* auto-fit: ızgara KABA UYUYOR. Sabit 3 kolonda üye menüsü 176px olduğu
   için karolar 51px'e düşüyor ve etiketler kırpılıyordu (ölçüldü: içerik
   50px, görünen 25px). Dar kapta tek kolon, geniş kapta üç. */
.hs .hs-bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px;margin:6px 0}
.hs .hs-bchip{display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 6px;
  border:1px solid var(--hs-line);border-radius:10px;background:var(--hs-panel2);
  color:var(--bc);font:inherit;font-size:10.5px;font-weight:750;cursor:pointer;transition:.16s}
.hs .hs-bchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs .hs-bchip:hover{border-color:var(--bc);background:color-mix(in srgb,var(--bc) 12%,transparent)}
.hs .hs-bchip.on{border-color:var(--bc);background:color-mix(in srgb,var(--bc) 18%,transparent)}


/* Yazar avatarı YEDEĞİ mor-pembe gradyandaydı; fotoğrafı olmayan
   kullanıcıda görünüyor (fotoğraflıda üstü kapalı olduğu için gözden
   kaçmıştı — tarayıcıda ölçülerek bulundu). */
body.hs-body .nx-pav,
body.hs-body .hs-post .nx-pav{background:linear-gradient(135deg,var(--hs-accent),#c9761b);
  border-color:color-mix(in srgb,var(--hs-accent) 32%,transparent)}
/* Composer kendi kartında (mockup): hero'nun içindeyken kart zemininin
   üstünde ikinci bir kutu gibi duruyordu. */
.hs .hs-composer{display:flex;align-items:center;gap:11px;margin-bottom:14px;padding:12px 14px;
  border:1px solid var(--hs-line);border-radius:var(--hs-r);background:var(--hs-panel);
  text-decoration:none;transition:.16s}
.hs .hs-composer:hover{border-color:var(--hs-line2);background:var(--hs-panel2)}
@media(max-width:760px){ .hs .hs-composer{margin-left:13px;margin-right:13px} }
/* Sağ kolon etiket kartı — sayaç gerçek (tags.item_count), sıfır listelenmiyor */
.hs .hs-etik{display:flex;flex-wrap:wrap;gap:6px}
.hs .hs-etik-c{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--hs-line);background:var(--hs-panel2);
  color:var(--hs-t2);font-size:11.5px;font-weight:700;text-decoration:none;transition:.16s}
.hs .hs-etik-c b{color:var(--hs-accent);font-weight:800;font-size:10.5px}
.hs .hs-etik-c:hover{border-color:color-mix(in srgb,var(--hs-accent) 40%,transparent);color:var(--hs-t)}
.hs .hs-stdesc{margin:-4px 2px 10px;font-size:11.5px;line-height:1.5;color:var(--hs-t2)}
@media(max-width:760px){ .hs .hs-stdesc{margin-left:13px;margin-right:13px} }
/* ═══════════ GÖNDERİ DETAYI — HİZA ═══════════
   Üç ayrı kayma tarayıcıda ölçüldü (1440px, orta kolon 398→1000, kart
   412→986, kart içeriği 431'de başlıyor):

   1) BAŞLIK METNİ KARTIN KENARINA YAPIŞIKTI. app.css'te
      ".hm-post .nx-cap{padding:0}" var ve bu AKIŞTA doğru: orada başlık
      ".hm-body > .hm-txt" içinde ve boşluğu ebeveyn veriyor. Detay
      ekranının markup'ı ayrı; orada .nx-cap kartın DOĞRUDAN çocuğu, yani
      padding:0 kalınca metin kenara yapışıyor ve kardeşlerinden (.nx-acts,
      .nx-likes: 18px) 18px sola kayıyordu.
      Seçici bu yüzden ">" ile YAPISAL: yalnız doğrudan çocuk olduğunda,
      yani yalnız detay ekranında geçerli. Akış kartına dokunmuyor. */
.hs .hs-post > .nx-cap{padding:7px 18px 0}

/* 2) YORUM BLOĞU KARTLA HİZASIZDI: kartın yatay girintisi 14px margin +
      1px kenarlık + 18px dolgu = 32px; blokta yalnız 16px vardı, başlık ve
      yorumlar kartın 17px solunda başlıyordu.

      SEÇİCİ "~" İLE DARALTILDI: ".hs .nx-cmts" yazınca kural, aynı yorum
      bileşenini kullanan ETKİNLİK/İŞLETME detaylarını da vuruyordu ve
      orada 31px kayma YARATIYORDU (ölçüldü) — o sayfalarda bölüm kartları
      14px'lik margin taşımıyor, doğrudan kolon kenarında duruyor.
      32px yalnız "bir .hs-post kartından SONRA gelen" yorum bloğu için
      doğru; gönderi ve reel detayı bu yapıda. */
.hs .hs-post ~ .nx-cmts{padding-left:32px;padding-right:32px}
.hs .hs-post ~ .nx-cmts .nx-cmts-h{padding-left:0;padding-right:0}

/* 3) YAZMA ÇUBUĞU EKRANA GÖRE SABİTTİ: app.css onu "position:fixed" +
      "max-width:var(--app-w)" (500px) ile VIEWPORT ortasına koyuyor. Üç
      kolonlu kabukta kolonun ortası ekranın ortası DEĞİL (kolon 398→1000,
      merkez 699; ekran merkezi 720) → çubuk hem dar hem kaymış duruyordu
      ve boş durum yazısının üstünü kapatıyordu.
      Masaüstünde akışa alınıyor: yorumların altında, kartla aynı
      girintide. Mobilde sabit kalıyor — orada ekran genişliği zaten
      --app-w'den küçük ve alta sabit çubuk doğru davranış. */
@media(min-width:761px){
  .hs .hs-post ~ .nx-cform{position:static;transform:none;width:auto;max-width:none;
    margin:12px 14px 0;padding:11px 14px;border:1px solid var(--hs-line);
    border-radius:16px;background:var(--hs-panel);backdrop-filter:none}
}

/* Yorum gönder düğmesi mor gradyandaydı (app.css .nx-cform button). */
body.hs-body .nx-cform button{
  background:var(--hs-accent);color:#151109;
  box-shadow:0 0 16px color-mix(in srgb,var(--hs-accent) 42%,transparent)}
body.hs-body .nx-cform button svg{color:#151109}
/* Kullanıcı listelerindeki takip düğmesi MAVİ gradyandaydı (app.css
   .nx-ufollow → #3f8de0/#23508f; ikisi de yasak mavi listesinde).
   Beğenenler ve takipçi/takip listeleri Harman kabuğuna alınınca görünür
   oldu. Kutuplar korunuyor: takip etmiyorsan vurgulu, takiptesen sakin. */
body.hs-body .nx-ufollow{background:var(--hs-accent);color:#151109}
body.hs-body .nx-ufollow.on{background:rgba(255,255,255,.10);color:var(--hs-t2)}

/* ═══════════ MOBİLDE GÖNDERİ KARTI KENARDAN KENARA ═══════════
   Mockup masaüstünde kart kullanıyor ama ≤760px'te onu AÇIYOR:
   ".post{border-left:0;border-right:0;border-radius:0;margin-bottom:9px}"
   (tasarim/harman.html, @media(max-width:760px)). Bizde kart mobilde de
   kapalı kalmıştı — 375px'te 14px'lik iki yan boşluk ve 20px yarıçap,
   dar ekranda görselden yer çalıyordu.

   YATAY MARGIN app.css'ten geliyor (".hm-post{margin:0 14px 12px}") —
   burada sıfırlanıyor; alt boşluk mockup'ın 9px'i.

   BLOK DOSYANIN SONUNDA: medya sorgusu ÖZGÜLLÜK EKLEMİYOR, yalnız kaynak
   sırası karar veriyor. Yukarıdaki ".hs .hs-post" taban kuralıyla eşit
   özgüllükte (0,2,0) olduğu için ondan SONRA gelmek zorunda. */
@media(max-width:760px){
  /* Yatay margin taban kuralda zaten sıfır; burada yalnız kenarlık ve
     yarıçap açılıyor. */
  .hs .hs-post{border-left:0;border-right:0;border-radius:0;margin-bottom:9px}
  /* Mockup'ın mobil iç boşlukları: 14px → 13px. */
  .hs .hs-post .nx-ph{padding:12px 13px 10px}
  .hs .hs-post .hm-txt{padding:0 13px}
  .hs .hs-post > .nx-cap{padding-left:13px;padding-right:13px}
  .hs .hs-stats{padding:0 13px;font-size:12.2px}
  .hs .hs-stats-n{font-size:12.8px}
  /* Eylem satırı: mockup mobilde düğmeyi bir tık büyütüyor (parmak hedefi). */
  .hs .hs-acts{padding:5px 3px}
  .hs .hs-acts .nx-a{height:47px;gap:7px}
  .hs .hs-acts .hs-a-l{font-size:11.3px}
}

/* ═══════════════════════════════════════════════════════════════════
   COMPOSE — mockup'ın composeOverlay bloğu (tasarim/harman.html)

   Modal bir SARMALAYICI: içindeki gövde /olustur?fmt=parca ile geliyor ve
   AYNI parça tam sayfa olarak da basılıyor (.cmp-page). İki görünüm, tek
   şablon — ikinci bir kopya zamanla ayrışırdı.
   ═══════════════════════════════════════════════════════════════════ */
body.cmp-open{overflow:hidden}
.cmp-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.cmp-ov[hidden]{display:none}
.cmp-bd{position:absolute;inset:0;background:rgba(4,6,9,.72);backdrop-filter:blur(3px)}
.cmp-panel{position:relative;width:100%;max-width:560px;max-height:92dvh;overflow-y:auto;
  background:#0f1216;border:1px solid var(--hs-line);border-radius:22px 22px 0 0;
  box-shadow:0 -18px 60px rgba(0,0,0,.6);
  /* iPhone ana ekran çubuğu formun "Paylaş" düğmesini yemesin. */
  padding-bottom:max(14px,env(safe-area-inset-bottom,0))}
@media(min-width:761px){
  .cmp-ov{align-items:center}
  .cmp-panel{border-radius:22px;max-height:88dvh}
}
.cmp-load{padding:40px 20px;text-align:center;color:var(--hs-t2);font-size:13px}
.cmp-page{max-width:560px;margin:0 auto}

.cmp{padding:16px 16px 6px;color:var(--hs-t)}
.cmp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cmp-head h2{margin:0;font-size:19px;letter-spacing:-.35px}
.cmp-x{width:38px;height:38px;flex:none;display:grid;place-items:center;border:0;border-radius:12px;
  background:var(--hs-soft);color:var(--hs-t2);cursor:pointer}
.cmp-x:hover{color:var(--hs-t)}

.cmp-me{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.cmp-av{width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--hs-soft);color:var(--hs-t2);font-size:16px;font-weight:800}
.cmp-av img{width:100%;height:100%;object-fit:cover}
.cmp-me b{display:block;font-size:14px}
.cmp-me>div{min-width:0}

/* Tür sekmeleri — mockup .compose-types: dört eşit sütun, etkin olan altın. */
.cmp-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:13px}
.cmp-type{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:58px;padding:0 4px;border:1px solid var(--hs-line);border-radius:14px;
  background:var(--hs-panel);color:var(--hs-t2);font-size:11.5px;font-weight:800;text-decoration:none}
.cmp-type.active{border-color:var(--hs-accent);color:var(--hs-accent);
  background:color-mix(in srgb,var(--hs-accent) 9%,transparent)}

/* Panolar: aynı anda YALNIZ biri açık. hidden yerine display kullanılıyor
   çünkü kapalı panonun içindeki required alanlar tarayıcı doğrulamasını
   tetiklemesin diye ayrıca disabled edilmiyor — display:none olan alan
   zaten doğrulamaya girmiyor. */
.cmp-pane{display:none}
.cmp-pane.on{display:block}
.cmp-pane textarea,
.cmp-title{width:100%;border:1px solid var(--hs-line);border-radius:14px;background:var(--hs-panel);
  color:var(--hs-t);font:inherit;font-size:14.5px;padding:12px 13px;resize:vertical}
.cmp-title{font-size:16px;font-weight:750}
.cmp-sub{font-size:13.5px;font-weight:500;margin-top:9px}
.cmp-pane textarea{margin-top:9px;line-height:1.55;min-height:110px}
.cmp-pane textarea::placeholder,.cmp-title::placeholder{color:var(--hs-t2)}
.cmp-pane textarea:focus,.cmp-title:focus{outline:0;border-color:var(--hs-accent)}

/* Görünürlük çipi ADIN ALTINDA (mockup). İki tane basılıyor — Gönderi ve
   Yazı ayrı <form>'lar — ve hangisinin görüneceğine etkin sekme karar
   veriyor. Makale/Reel sekmesinde ikisi de gizli: o türlerde gönderi
   görünürlüğünün karşılığı yok. */
.cmp-vis{display:none;align-items:center;gap:5px;height:32px;margin-top:5px;padding:0 9px 0 10px;
  border:1px solid var(--hs-line);border-radius:999px;background:var(--hs-panel);color:var(--hs-t2)}
.cmp[data-tur="gonderi"] .cmp-vis[data-vis-for="gonderi"],
.cmp[data-tur="yazi"] .cmp-vis[data-vis-for="yazi"]{display:inline-flex}
.cmp-vis select{border:0;background:transparent;color:var(--hs-t);font:inherit;font-size:12px;font-weight:750;
  cursor:pointer;padding:0;appearance:none;-webkit-appearance:none}
.cmp-vis svg:last-child{opacity:.7}

.cmp-styles{display:flex;gap:7px;margin-top:9px}
.cmp-style{height:33px;padding:0 13px;display:inline-flex;align-items:center;border-radius:999px;
  border:1px solid var(--hs-line);background:var(--hs-panel);color:var(--hs-t2);
  font-size:11.5px;font-weight:800;cursor:pointer}
.cmp-style.on{border-color:var(--hs-accent);color:var(--hs-accent);
  background:color-mix(in srgb,var(--hs-accent) 9%,transparent)}

/* MARGIN 2px İDİ VE SATIRI KOMŞULARINDAN KAYDIRIYORDU: ölçüldü —
   sayaç satırı 15→360, üstündeki metin kutusu 13→362. */
.cmp-count{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:8px 0 0;font-size:11px;color:var(--hs-t2)}
.cmp-count b{color:var(--hs-t);font-weight:800}

/* Araç şeridi — mockup .compose-extra: üçlü ızgara, son satır iki öge. */
.cmp-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.cmp-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:62px;padding:0 6px;border:1px solid var(--hs-line);border-radius:14px;
  background:var(--hs-panel);color:var(--hs-t2);font-size:11px;font-weight:750;cursor:pointer;text-align:center}
.cmp-tool:hover{color:var(--hs-t)}
.cmp-tool.on{border-color:var(--hs-accent);color:var(--hs-accent)}
.cmp-tool svg{flex:none}
.cmp-tool-wide{flex-direction:row;gap:9px;min-height:52px;margin-top:12px;font-size:12px}
.cmp-files{margin-top:8px;font-size:11.5px;color:var(--hs-accent);word-break:break-all}
.cmp-ek{margin-top:11px}
.cmp-ek[hidden]{display:none}

.cmp-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;
  border:1px solid var(--hs-line);border-radius:12px;background:var(--hs-soft);
  font-size:11.5px;line-height:1.45;color:var(--hs-t2)}
.cmp-note svg{flex:none;margin-top:1px;color:var(--hs-accent)}

.cmp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.cmp-foot>span{font-size:12px;font-weight:800;color:var(--hs-t2)}
.cmp-share{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border:0;
  border-radius:14px;background:var(--hs-accent);color:#151109;font:inherit;font-size:14.5px;
  font-weight:850;cursor:pointer}
.cmp-share:hover{filter:brightness(1.05)}
.cmp-more{display:block;margin-top:11px;font-size:11.5px;color:var(--hs-t2);text-decoration:none}
.cmp-more:hover{color:var(--hs-accent)}

.cmp-state{display:flex;align-items:center;gap:8px;margin-top:14px;padding:11px 12px;
  border:1px dashed var(--hs-line);border-radius:12px;font-size:11.5px;color:var(--hs-t2)}
.cmp-state svg{flex:none;color:var(--hs-accent)}

@media(max-width:420px){
  .cmp{padding:14px 13px 6px}
  .cmp-types{gap:6px}
  .cmp-type{min-height:54px;font-size:10.5px}
  .cmp-tools{gap:6px}
  .cmp-tool{min-height:58px;font-size:10.2px}
}