/* ==========================================================================
   ÜST MENÜ v2 — "Altın Sahne" yüzen cam kapsül
   --------------------------------------------------------------------------
   BU DOSYA ÜRETİLMİŞTİR; elle düzenlenmez.
   Kaynak: casinofilozof/mockup/ustmenu.template.html

   Notlar:
   - Duyarlı kurallar ekrana değil KAPSAYICIYA bakar (@container tnbar).
     Çubuk hangi genişlikte durursa dursun doğru davranır.
   - Cam yoğunluğu üç değişkenden yönetilir: --cam-ust / --cam-alt /
     --cam-blur. Kontrast opaklıkla değil backdrop'taki brightness() ile
     korunur; beyaz bir kart altından geçse bile metin oranı 8.5:1.
   - UYARI: kapsülün cam etkisi için ATA elemanlarda filter / transform /
     opacity<1 / will-change / contain:paint OLMAMALI. Biri eklenirse
     yeni bir "backdrop kökü" oluşur ve blur yanlış katmanı örnekler.
   - Küçülme geçişi tek süre (--tn-sur) ve tek eğri (--tn-egri) kullanır.
     Süreyi değiştirirsen topbar-v2.php içindeki TN.sure değerini de
     güncelle; ikisi aynı olmalı.
   ========================================================================== */

/* Cam değişkenleri yalnızca .tn-bar'ı ilgilendirir; kalıtılmasınlar.
   Aksi halde kaydırmada değerleri değiştiğinde bütün alt ağaç (sekmeler,
   amblemler, açılır menü satırları) gereksiz yere yeniden stil hesabına
   giriyor. Desteklemeyen tarayıcıda eski davranış sürer. */
@property --cam-ust{syntax:'<number>'; inherits:false; initial-value:.5}
@property --cam-alt{syntax:'<number>'; inherits:false; initial-value:.62}
@property --cam-blur{syntax:'<length>'; inherits:false; initial-value:20px}

/* ==========================================================================
   ÜST MENÜ (tn- öneki) — canlıya alınırsa bu blok ayrı CSS dosyası olur
   ========================================================================== */
.tn-root{
  --g:#f5c451; --g2:#ffdf8a; --vio:#c084fc; --cyan:#38bdf8; --em:#34d399;
  --rose:#fb7185; --amber:#fb923c; --teal:#2dd4bf; --fuchsia:#e879f9; --yellow:#eab308;
  --line:rgba(148,169,214,.12); --line2:rgba(148,169,214,.24);
  --tx:#f1f5f9; --tx2:#b6c3da; --tx3:#7d8ca6; --tx4:#5b6980;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  /* Kapsul sayfa boyunca yukarida kalsin diye yapiskanlik KOKTE:
     .tn-bar tek basina sticky olsaydi, .tn-root'un kendi yuksekligi
     bittiginde (yalnizca cubuk kadar) yukari kayip giderdi. */
  position:fixed; top:0; left:0; right:0; z-index:40; font-family:Manrope,system-ui,sans-serif;
  /* Duyarli kurallar viewport'a degil BU kaba bakar: cubuk dar bir
     cerceveye konsa da (ornek sayfasi) dogru duzene gecer. */
  container-type:inline-size; container-name:tnbar;
  /* Geçişin TEK süresi ve TEK eğrisi. Önceki halde .16/.18/.20/.22/.26/.30
     olmak üzere altı zaman çizgisi vardı; her biri başka karede bittiği
     için küçülme kademeli, "dona dona" görünüyordu. */
  --tn-sur:.22s;
  --tn-egri:cubic-bezier(.4,0,.2,1);
}
/* İlk boyamada ve rol değiştirip yeniden çizince geçiş oynamasın. */
.tn-root.tn-ani-yok,.tn-root.tn-ani-yok *,
.tn-root.tn-ani-yok *::before,.tn-root.tn-ani-yok *::after{transition:none!important}
.tn-root *{box-sizing:border-box}
.tn-root svg{display:block}
.tn-root a{text-decoration:none}
/* box-shadow animasyonu compositor'a devredilemez: DURMADAN repaint
   ister ve gecisin en dolu kareleriyle yarisir. transform+opacity ayni
   goruntuyu sifir maliyetle verir. */
@keyframes tnRadar{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3);opacity:0}}
@keyframes tnDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes tnRule{0%,60%{left:-40%}100%{left:110%}}
@keyframes tnCoin{0%,74%,100%{transform:rotateY(0)}80%{transform:rotateY(180deg)}86%{transform:rotateY(360deg)}}

/* --- çubuk: yüzen cam kapsül ---
   Kenardan kenara şerit değil; içeriği kadar genişleyip ortalanan bir
   kapsül. width:max-content + margin:auto ikisini birden verir.

   CAM MANTIĞI: önceki halde taşıyıcı koyu tabaka %93 opaktı, yani
   arkasındaki blur hesaplanıyor ama ekrana çıkmıyordu. Artık alfa .50/.62;
   kaybedilen kontrast opaklıkla değil, backdrop tarafında brightness()
   ile geri alınıyor — beyaz metnin sigortası orası. */
.tn-bar{
  position:relative;
  width:max-content; max-width:calc(100cqw - 16px); margin:12px auto;
  /* Üç kolon: sol küme+gezinme | marka | sağ gezinme+küme. */
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:10px;
  padding:9px 8px; border-radius:999px;

  /* Cam yoğunluğu TEK KALDIRAÇTAN yönetilir: iki alfa + blur yarıçapı.
     Kaydırma durumu bu üç değeri değiştirir, kuralları tekrarlamaz. */
  --cam-ust:.50;    /* kapsülün üst kenarındaki koyu tabaka alfası */
  --cam-alt:.62;    /* alt kenardaki alfa — aşağı doğru koyulaşır   */
  --cam-blur:20px;  /* arka plan bulanıklığı                        */

  /* Asıl çerçeve işi ::before halkasında; buradaki 1px camın dış hattı. */
  border:1px solid rgba(255,255,255,.10);

  background:
    /* 1 — CAM YÜZEYİ: üstten aşağı inen ince parlaklık, %62'de söner */
    linear-gradient(180deg,
      rgba(255,255,255,.13), rgba(255,255,255,.03) 44%, rgba(255,255,255,0) 62%),
    /* 2 — TEPEDE MOR TAÇ: kapsülün üstünde ışık kaynağı hissi */
    radial-gradient(120% 300% at 50% -70%, rgba(168,85,247,.20), transparent 60%),
    /* 3 — TABANDA ALTIN SICAKLIK: kapsülün altı "kesik" durmasın */
    radial-gradient(120% 160% at 50% 165%, rgba(245,196,81,.14), transparent 62%),
    /* 4 — TAŞIYICI KOYU TABAKA */
    linear-gradient(180deg, rgb(14 20 36 / var(--cam-ust)), rgb(5 9 18 / var(--cam-alt)));

  /* blur: arkadaki kart okunmaz olur, hareketi hissedilir
     saturate: blur'un soldurduğu renkleri geri getirir
     brightness: açık bir kart altından geçse bile zemin koyu kalır
     contrast: blur'un yarattığı donukluğu toparlar */
  -webkit-backdrop-filter:blur(var(--cam-blur)) saturate(1.6) brightness(.72) contrast(1.05);
          backdrop-filter:blur(var(--cam-blur)) saturate(1.6) brightness(.72) contrast(1.05);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),              /* üst kenarda 1px iç ışık */
    inset 0 8px 20px -14px rgba(255,255,255,.30),     /* ışığın içe dağılımı */
    inset 0 -1px 0 rgba(2,5,12,.55),                  /* alt kenarda iç gölge */
    inset 0 -16px 34px -26px rgba(245,196,81,.45),    /* tabandan yansıyan altın */
    0 2px 8px -4px rgba(2,5,12,.55),                  /* yakın gölge */
    0 26px 54px -32px rgba(0,0,0,.9),                 /* geniş yumuşak gölge */
    0 30px 70px -46px rgba(139,92,246,.55);           /* mor bloom */

  /* box-shadow BILEREK listede degil: yedi katmanli, genis yaricapli bir
     golgeyi her karede yeniden boyamak kucultmeyi 150ms'lik karelere
     dusuruyordu. Anlik degismesi gozle fark edilmiyor. */
  transition:
    padding var(--tn-sur) var(--tn-egri),
    gap     var(--tn-sur) var(--tn-egri),
    margin  var(--tn-sur) var(--tn-egri);
}
/* GEÇİŞ SIRASINDA UCUZ CAM: kapsülün geometrisi her karede değişirken
   backdrop yeniden örneklenip bulanıklaştırılıyor. Geçiş 220ms sürüyor;
   göz bu sürede blur yarıçapını ayırt edemez, ama GPU'nun işi yarıya
   iner. JS bu sınıfı yalnızca geçiş boyunca takıyor. */
.tn-root.is-gecis.is-gecis .tn-bar{--cam-blur:8px}
/* Geçiş boyunca sonsuz animasyonlar duraklar. Ölçüm: bunlar açıkken
   küçülmede 10 kare düşüyordu, duraklatınca 1. Madeni paranın
   perspective+rotateY çevrilmesi her karede yeniden rasterize
   ediliyor ve geçişin dolu kareleriyle yarışıyor. */
.tn-root.is-gecis.is-gecis .tn-bal .coin svg,
.tn-root.is-gecis.is-gecis .tn-act .dot::after{animation-play-state:paused}

/* CAM KENARI — maskeli 1px halka, iki katman üst üste.
   Yatay olan UÇLARDA parlak / ORTADA sönük; dikey olan ÜST RIM'i
   beyazlatıp ALT RIM'i soğutuyor. Gerçek camda ışık uçlarda ve üst
   kenarda toplanır, ortada söner. */
.tn-bar::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1px;
  background:
    linear-gradient(90deg,
      rgba(255,223,138,.85) 0%, rgba(245,196,81,.30) 14%, rgba(245,196,81,.06) 34%,
      rgba(192,132,252,.06) 66%, rgba(192,132,252,.32) 86%, rgba(192,132,252,.85) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.55), rgba(255,255,255,.10) 38%,
      rgba(148,169,214,.06) 62%, rgba(148,169,214,.26));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* FROST DOKU — 120px'lik gri gürültü bir kez rasterize edilip döşenir;
   ne filtre ne animasyon çalışır. Blur'un fazla temiz görünmesini kırar. */
.tn-bar::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
/* Kaydırma: kapsül incelir, cam ise YOĞUNLAŞIR — altından içerik akmaya
   başladığı an okunurluk öne geçer. */
.tn-root.is-scrolled .tn-bar{
  padding:5px 7px; gap:6px; margin:8px auto;
  --cam-ust:.62; --cam-alt:.74; --cam-blur:26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 6px 16px -13px rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(2,5,12,.5),
    inset 0 -12px 26px -24px rgba(245,196,81,.35),
    0 2px 6px -4px rgba(2,5,12,.5),
    0 18px 40px -28px rgba(0,0,0,.9),
    0 22px 54px -44px rgba(139,92,246,.5);
}

/* --- marka --- */
/* Marka menünün ortasında: logo üstte, site adı altında. Kaydırınca
   yatay dizilime geçip küçülür — çubuk incelirken denge korunur. */
.tn-brand{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:2px;
  flex:none; padding:0 14px; transition:gap .22s;
}
/* iki yanında ince dikey eşik — markayı gezinmeden ayırır */
.tn-brand::before,.tn-brand::after{
  content:''; position:absolute; top:16%; bottom:16%; width:1px;
  background:linear-gradient(180deg,transparent,rgba(148,169,214,.28),transparent);
}
.tn-brand::before{left:0}
.tn-brand::after{right:0}
.tn-brand{transition:gap var(--tn-sur) var(--tn-egri), padding var(--tn-sur) var(--tn-egri)}
.tn-root.is-scrolled .tn-brand{flex-direction:row; gap:11px; padding:0 18px}
.tn-brand-logo{
  position:relative; width:46px; height:46px; flex:none; display:grid; place-items:center;
  /* transform HOVER icindir, yayli egrisi korunur; olcu ortak cizgide. */
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),
             width var(--tn-sur) var(--tn-egri), height var(--tn-sur) var(--tn-egri);
}
.tn-root.is-scrolled .tn-brand-logo{width:36px; height:36px}
.tn-brand-logo::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.36),rgba(245,196,81,.14) 58%,transparent 74%);
  filter:blur(6px);
}
.tn-brand-logo img{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain; border-radius:50%;
  filter:drop-shadow(0 0 8px rgba(168,85,247,.4));
}
.tn-brand:hover .tn-brand-logo{transform:scale(1.06)}
/* ---------- FİLOZOF logotype ----------
   Harfler SVG içinde; gradyan, kontur ve parlama katmanları orada.
   Buradaki iş yalnızca ölçü ve kaydırma tepkisi. */
.tn-brand-tx{min-width:0; display:flex; flex-direction:column; align-items:center}
.tn-lt{width:186px; height:auto; overflow:visible; transition:width var(--tn-sur) var(--tn-egri)}
.tn-lt-tx{
  font-family:Cinzel,Georgia,'Times New Roman',serif; font-weight:800;
  font-size:44px; letter-spacing:5px; text-anchor:middle;
}
.tn-root.is-scrolled .tn-lt{width:142px}
/* Kaydırınca yan süsler ve alt çizgi çekilir; ad tek başına kalır. */
.tn-lt-sus{transition:opacity var(--tn-sur) var(--tn-egri)}
.tn-root.is-scrolled .tn-lt-sus{opacity:0}
.tn-root.is-scrolled .tn-brand-rule{display:none}

/* --- ana gezinme --- */
/* Kolonlar: sol gezinme sağa yaslanır, sağ grup soldan başlar.
   flex:none — sekmeler sıkışıp alt satıra kaymasın; dar ekranda önce
   ikincil eylemler gizlenir (aşağıdaki 1260px eşiği). */
.tn-nav{display:flex; align-items:center; gap:2px; flex:none; flex-wrap:nowrap}
.tn-nav-sol{justify-content:flex-end}
.tn-nav-sag{justify-content:flex-start}
/* Yan kolonlar: dış uçta eylem kümesi, iç uçta gezinme — space-between
   ikisini kapsülün kenarına ve markaya yaslar, arada boşluk kalmaz. */
.tn-sol-grup,.tn-sag-grup{display:flex; align-items:center; gap:10px; min-width:0;
  justify-content:space-between}
.tn-item{position:relative}
.tn-link{
  --k:var(--cyan);
  position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 13px;
  border-radius:11px; cursor:pointer; border:1px solid transparent; background:none;
  font-family:inherit; font-size:12.5px; font-weight:750; color:var(--tx2); white-space:nowrap;
  transition:color .16s, background .16s, border-color .16s;
}
/* Ikonlar inline SVG: her baglamda kendi olcusu. FA sinif olculeri
   burada gecerli degil, bu yuzden acik acik yaziliyor. */
.tn-link > svg:first-child{width:20px; height:20px; flex:none; transition:transform .2s cubic-bezier(.34,1.3,.64,1)}
.tn-link:hover > svg:first-child{transform:scale(1.1)}
.tn-link i{font-size:13px; color:var(--k); transition:transform .18s}
.tn-link .cv{width:9px; height:9px; margin-left:1px; opacity:.55;
  transition:transform .2s var(--tn-egri), width var(--tn-sur) var(--tn-egri),
             opacity var(--tn-sur) var(--tn-egri)}
.tn-link{transition:color .16s, background .16s, border-color .16s,
  gap var(--tn-sur) var(--tn-egri), padding var(--tn-sur) var(--tn-egri)}
.tn-link:hover{color:#fff; background:color-mix(in srgb,var(--k) 10%,transparent);
  border-color:color-mix(in srgb,var(--k) 22%,transparent)}
.tn-item.is-open .tn-link{color:#fff; background:color-mix(in srgb,var(--k) 13%,transparent);
  border-color:color-mix(in srgb,var(--k) 30%,transparent)}
.tn-item.is-open .tn-link .cv{transform:rotate(180deg)}
/* Aktif sayfa: kendi renginde dolu kapsül + altta ışık. Sadece alt çizgi
   yeterince okunmuyordu; kapsül uzaktan da seçili sekmeyi belli ediyor. */
.tn-link.is-on{
  color:#fff;
  background:linear-gradient(160deg, color-mix(in srgb,var(--k) 22%,transparent), color-mix(in srgb,var(--k) 8%,transparent));
  border-color:color-mix(in srgb,var(--k) 42%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--k) 30%,transparent),
             0 6px 18px -12px color-mix(in srgb,var(--k) 90%,transparent);
}
.tn-link.is-on::after{
  content:''; position:absolute; left:16px; right:16px; bottom:-12px; height:2.5px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,transparent,var(--k),transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--k) 85%,transparent);
}
/* 'bottom' layout tetikler; transform compositor'da kalir. Bitis
   noktasi birebir ayni: -12px + 6px = -6px. */
.tn-link.is-on::after{transition:transform var(--tn-sur) var(--tn-egri)}
.tn-root.is-scrolled .tn-link.is-on::after{bottom:-12px; transform:translateY(6px)}

/* ---------- kaydırınca küçülme ----------
   Etiketler max-width ile 0'a çekilir (display:none olsaydı geçiş
   olmazdı); ikon kalır, kapsül daralır. Erişim için title korunur. */
/* ANA DUZELTME: sabit 180px yerine JS'in olctugu gercek genislik.
   Etiket 90px ise 180->90 araligi hicbir seyi oynatmiyordu; gecis
   "once donuyor sonra cokuyor" gibi gorunuyordu. Artik ilk kareden
   itibaren lineer. opacity de ortak sureye alindi. */
.tn-link > span,.tn-act > span{
  max-width:var(--tn-w,400px); overflow:hidden; white-space:nowrap;
  transition:max-width var(--tn-sur) var(--tn-egri), opacity var(--tn-sur) var(--tn-egri);
}
.tn-root.is-scrolled .tn-link,
.tn-root.is-scrolled .tn-act{gap:0; padding:0 10px}
.tn-root.is-scrolled .tn-link > span,
.tn-root.is-scrolled .tn-act > span:not(.cnt):not(.dot),
.tn-root.is-scrolled .tn-badge{overflow:hidden; max-width:var(--tn-w,200px);
  transition:max-width var(--tn-sur) var(--tn-egri), opacity var(--tn-sur) var(--tn-egri);max-width:0; opacity:0}
.tn-root.is-scrolled .tn-link .cv{width:0; margin:0; opacity:0}
.tn-root.is-scrolled .tn-bal{padding:0 9px 0 5px}
.tn-bal-c small{overflow:hidden; max-height:12px;
  transition:max-height var(--tn-sur) var(--tn-egri), opacity var(--tn-sur) var(--tn-egri)}
.tn-root.is-scrolled .tn-bal-c small{max-height:0; opacity:0}
/* display animasyona girmez: kullanici adi t=0'da yok olup kapsul
   genisligini bir karede ~90px kisaltiyordu. */
.tn-me-c{overflow:hidden; max-width:var(--tn-w,400px);
  transition:max-width var(--tn-sur) var(--tn-egri), opacity var(--tn-sur) var(--tn-egri)}
.tn-root.is-scrolled .tn-me-c{max-width:0; opacity:0}
.tn-root.is-scrolled .tn-me-btn{gap:0; padding:0 6px}
.tn-root.is-scrolled .tn-left,.tn-root.is-scrolled .tn-right{gap:5px; padding:3px}
.tn-root.is-scrolled .tn-act,
.tn-root.is-scrolled .tn-bal,
.tn-root.is-scrolled .tn-me-btn{height:34px}
.tn-root.is-scrolled .tn-bal .coin svg{width:22px; height:22px}
.tn-badge{
  padding:2px 7px; border-radius:99px; font-family:var(--mono); font-size:6.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#2a1c00;
  background:linear-gradient(135deg,var(--g2),var(--g));
}
.tn-badge.soft{color:var(--k); background:color-mix(in srgb,var(--k) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 30%,transparent)}

/* --- açılır menü --- */
.tn-drop{
  position:absolute; top:calc(100% + 10px); left:0; z-index:50; min-width:290px;
  padding:8px; border-radius:16px; display:none;
  border:1px solid var(--line2);
  background:linear-gradient(168deg,rgba(17,26,46,.99),rgba(9,14,27,.99));
  box-shadow:0 30px 70px -30px #000, 0 0 0 1px rgba(245,196,81,.06);
}
.tn-item.is-open .tn-drop{display:block; animation:tnDrop .18s cubic-bezier(.22,.9,.36,1)}
.tn-drop::before{
  content:''; position:absolute; top:0; left:16%; right:16%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,196,81,.6),transparent);
}
.tn-drop-item{
  --k:var(--cyan);
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:11px;
  border:1px solid transparent; transition:background .16s, border-color .16s;
}
.tn-drop-item:hover{background:color-mix(in srgb,var(--k) 10%,transparent);
  border-color:color-mix(in srgb,var(--k) 22%,transparent)}
.tn-drop-i{
  width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px;
  font-size:13px; color:var(--k);
  background:radial-gradient(120% 110% at 30% 20%, color-mix(in srgb,var(--k) 20%,transparent), color-mix(in srgb,var(--k) 7%,transparent));
  border:1px solid color-mix(in srgb,var(--k) 26%,transparent);
  transition:transform .2s cubic-bezier(.34,1.3,.64,1), box-shadow .2s;
}
.tn-drop-item:hover .tn-drop-i{transform:scale(1.06); box-shadow:0 6px 16px -8px var(--k)}
.tn-drop-i img{width:19px; height:19px; object-fit:contain; border-radius:50%;
  background:radial-gradient(circle at 42% 36%,rgba(255,255,255,.9),rgba(255,255,255,.4) 40%,transparent 74%)}
.tn-drop-c{flex:1; min-width:0}
.tn-drop-c b{display:block; font-size:12px; font-weight:800; color:var(--tx); white-space:nowrap}
.tn-drop-c small{display:block; margin-top:2px; font-size:10px; font-weight:600; color:var(--tx4); white-space:nowrap}
.tn-drop-item{position:relative}
.tn-drop-item.is-on{background:color-mix(in srgb,var(--k) 15%,transparent);
  border-color:color-mix(in srgb,var(--k) 34%,transparent)}
.tn-drop-item.is-on::before{
  content:''; position:absolute; left:-1px; top:22%; bottom:22%; width:3px; border-radius:0 3px 3px 0;
  background:var(--k); box-shadow:0 0 9px color-mix(in srgb,var(--k) 80%,transparent);
}
.tn-drop-item.is-on .tn-drop-c b{color:#fff}
.tn-drop-sep{height:1px; margin:6px 10px; background:var(--line)}
.tn-drop-label{
  padding:8px 11px 5px; font-family:var(--mono); font-size:7px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#c8963f;
}

/* --- sağ blok --- */
/* Sağ blok cam bir kapsülde toplanır — gezinmeden ayrı bir bölge olduğu belli olur. */
/* Eylem kümeleri: solda KAZAN (günlük ödül, hediye kodu),
   sağda HESAP (bildirim, bakiye, profil). İki yan böylece dengelenir. */
.tn-left,.tn-right{
  display:flex; align-items:center; gap:6px; flex:none;
  transition:gap var(--tn-sur) var(--tn-egri), padding var(--tn-sur) var(--tn-egri);
  padding:3px; border-radius:999px;
  border:1px solid rgba(148,169,214,.14);
  background:linear-gradient(160deg,rgba(148,169,214,.07),rgba(148,169,214,.02));
}
.tn-act{
  --k:var(--em); position:relative; display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 13px; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:11.5px; font-weight:800; color:var(--tx2); white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--k) 24%,var(--line));
  background:linear-gradient(155deg,rgba(17,26,46,.9),rgba(11,17,32,.95));
  transition:transform .16s var(--tn-egri), border-color .16s, color .16s,
             height var(--tn-sur) var(--tn-egri), width var(--tn-sur) var(--tn-egri),
             padding var(--tn-sur) var(--tn-egri), gap var(--tn-sur) var(--tn-egri);
}
.tn-act:hover{transform:translateY(-1px); color:#fff; border-color:color-mix(in srgb,var(--k) 55%,transparent)}
.tn-act i{font-size:14px; color:var(--k)}
.tn-act.icon{width:40px; padding:0; justify-content:center}
.tn-root.is-scrolled .tn-act.icon{width:34px; padding:0}
.tn-act .dot{
  position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%;
  background:var(--em); border:1.5px solid #0b1120;
}
.tn-act .dot::after{
  content:''; position:absolute; inset:-1.5px; border-radius:50%;
  background:rgba(52,211,153,.6); animation:tnRadar 1.9s ease-out infinite;
}
.tn-act .cnt{
  position:absolute; top:5px; right:5px; min-width:16px; height:16px; padding:0 4px;
  display:grid; place-items:center; border-radius:99px; border:1.5px solid #0b1120;
  font-family:var(--mono); font-size:8px; font-weight:700; color:#2a1c00;
  background:linear-gradient(135deg,var(--g2),var(--g));
}
/* bakiye çipi */
.tn-bal{
  display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 14px 0 8px;
  border-radius:999px; border:1px solid rgba(245,196,81,.3);
  background:linear-gradient(150deg,rgba(245,196,81,.14),rgba(245,196,81,.04));
  box-shadow:0 8px 22px -14px rgba(245,196,81,.7);
  transition:height var(--tn-sur) var(--tn-egri), padding var(--tn-sur) var(--tn-egri),
             gap var(--tn-sur) var(--tn-egri);
}
.tn-bal .coin{perspective:220px; flex:none}
.tn-bal .coin svg{width:26px; height:26px; animation:tnCoin 6s ease-in-out infinite;
  transition:width var(--tn-sur) var(--tn-egri), height var(--tn-sur) var(--tn-egri)}
.tn-bal-c{line-height:1}
.tn-bal-c small{display:block; font-family:var(--mono); font-size:6.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#8a7a45}
.tn-bal-c b{display:block; margin-top:3px; font-size:14px; font-weight:900; color:#fde68a;
  font-variant-numeric:tabular-nums}
/* avatar menüsü */
.tn-me{position:relative}
.tn-me-btn{
  display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 11px 0 5px;
  border-radius:999px; cursor:pointer; font-family:inherit; border:1px solid var(--line2);
  background:linear-gradient(155deg,rgba(17,26,46,.9),rgba(11,17,32,.95));
  transition:border-color .16s, height var(--tn-sur) var(--tn-egri),
             padding var(--tn-sur) var(--tn-egri), gap var(--tn-sur) var(--tn-egri);
}
.tn-me-btn:hover{border-color:rgba(245,196,81,.45)}
.tn-me-av{
  width:28px; height:28px; border-radius:50%; object-fit:cover; background:#0b1120;
  border:1.5px solid rgba(245,196,81,.5);
}
.tn-me-c{text-align:left; line-height:1}
.tn-me-c b{display:block; font-size:11.5px; font-weight:800; color:#fff; white-space:nowrap}
.tn-me-c small{display:block; margin-top:3px; font-family:var(--mono); font-size:6.5px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--g)}
.tn-me .tn-drop{left:auto; right:0; min-width:236px}
/* Sağ yandaki sekmelerin menüsü sağa hizalanır, ekrandan taşmaz. */
.tn-nav-sag .tn-item:last-child .tn-drop{left:auto; right:0}

/* --- mobil --- */
.tn-burger{
  display:none; width:42px; height:42px; border-radius:50%; cursor:pointer; font-family:inherit;
  align-items:center; justify-content:center; flex:none;
  border:1px solid var(--line2); background:linear-gradient(155deg,rgba(17,26,46,.9),rgba(11,17,32,.95));
}
.tn-burger span{display:block; width:17px; height:2px; border-radius:2px; background:var(--tx2); position:relative}
.tn-burger span::before,.tn-burger span::after{
  content:''; position:absolute; left:0; width:17px; height:2px; border-radius:2px; background:var(--tx2);
  transition:transform .22s, top .22s;
}
.tn-burger span::before{top:-6px}
.tn-burger span::after{top:6px}
.tn-root.menu-acik .tn-burger span{background:transparent}
.tn-root.menu-acik .tn-burger span::before{top:0; transform:rotate(45deg)}
.tn-root.menu-acik .tn-burger span::after{top:0; transform:rotate(-45deg)}
.tn-sheet{
  position:absolute; top:100%; left:0; right:0; z-index:39; display:none;
  max-height:76vh; overflow-y:auto; padding:12px 14px 18px;
  border-bottom:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(9,14,27,.995),rgba(5,9,18,.99));
  box-shadow:0 30px 60px -30px #000;
}
.tn-root.menu-acik .tn-sheet{display:block; animation:tnDrop .2s cubic-bezier(.22,.9,.36,1)}
.tn-sheet-label{
  display:flex; align-items:center; gap:9px; margin:14px 4px 7px;
  font-family:var(--mono); font-size:7px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#c8963f;
}
.tn-sheet-label::after{content:''; height:1px; flex:1; background:linear-gradient(90deg,rgba(245,196,81,.28),transparent)}
.tn-sheet-item{
  --k:var(--cyan); display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:12px;
  border:1px solid transparent; margin-bottom:3px;
}
.tn-sheet-item:hover,.tn-sheet-item.is-on{background:color-mix(in srgb,var(--k) 11%,transparent);
  border-color:color-mix(in srgb,var(--k) 24%,transparent)}
.tn-sheet-item .tn-drop-c b{font-size:12.5px}
.tn-sheet-item .tn-drop-i{width:40px; height:40px}
.tn-sheet-acts{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:4px}
.tn-sheet-act{
  --k:var(--em); display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  padding:12px 8px 11px; border-radius:13px; cursor:pointer; font-family:inherit;
  border:1px solid color-mix(in srgb,var(--k) 24%,var(--line));
  background:linear-gradient(155deg,rgba(17,26,46,.92),rgba(11,17,32,.96));
}
.tn-sheet-act i{font-size:17px; color:var(--k)}
.tn-sheet-act b{font-size:11px; font-weight:850; color:#fff}
.tn-sheet-act small{font-family:var(--mono); font-size:6.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx4)}


/* --- inline SVG olculeri --- */
.tn-drop-i > svg{width:23px; height:23px}
.tn-act > svg{width:18px; height:18px; flex:none}
.tn-act.icon > svg{width:21px; height:21px}
.tn-sheet-act > svg{width:26px; height:26px}
.tn-sheet-label > svg{width:15px; height:15px; flex:none}
.tn-brand-tx b{position:relative}

/* Kapsul icerigi kadar genisledigi icin daralma sirasi onemli:
   once ikincil eylem gizlenir, sonra eylem etiketleri ikona cekilir,
   sonra gezinme etiketleri, en sonda gezinme cekmeceye tasinir. */
@container tnbar (max-width:1360px){
  /* 1400px'lik cerceve bu esikte: ikincil eylem, kullanici adi ve
     bakiye etiketi cekilir — kapsul icerigi tasmadan sigar. */
  .tn-act.hide-sm > span:not(.cnt):not(.dot){max-width:0; opacity:0}
  .tn-act.hide-sm{gap:0; padding:0 10px}
  .tn-link{padding:0 7px; gap:5px; font-size:12px}
  .tn-link > svg:first-child{width:18px; height:18px}
  .tn-badge{display:none}
  .tn-brand{padding:0 8px}
  .tn-lt{width:152px}
  .tn-bal .coin svg{width:22px; height:22px}
  .tn-me-c{display:none}
  .tn-me-btn{padding:0 6px}
  .tn-bal-c small{display:none}
  .tn-bal{padding:0 11px 0 5px}
  .tn-bal-c b{font-size:13px}
}
@container tnbar (max-width:1180px){
  /* Eylemler ikon olur; gezinme etiketleri hala okunur. */
  .tn-act.hide-sm{display:none}
  .tn-act > span:not(.cnt):not(.dot){max-width:0; opacity:0}
  .tn-act{gap:0; padding:0 11px}
  .tn-bal-c small{display:none}
  .tn-bal{padding:0 10px 0 5px}
  .tn-bal-c b{font-size:13px}
  .tn-me-c{display:none}
  .tn-me-btn{padding:0 7px}
}
@container tnbar (max-width:1040px){
  .tn-link{padding:0 9px; font-size:11.5px; gap:6px}
  .tn-link > svg:first-child{width:18px; height:18px}
  .tn-brand{padding:0 12px}
}
@container tnbar (max-width:900px){
  /* Dar ekranda gezinme cekmeceye tasinir; kapsul tek satir flex olur
     ve kenardan kenara degil, kenar boslugu birakarak yayilir. */
  .tn-bar{display:flex; align-items:center; gap:10px;
    width:auto; max-width:none; margin:10px 12px; padding:7px 8px}
  .tn-root.is-scrolled .tn-bar{margin:7px 12px; padding:5px 7px}
  .tn-nav,.tn-sol-grup,.tn-bal{display:none}
  .tn-burger{display:inline-flex}
  /* Dikey marka yer yiyor: yatay dizilime doner, sola yaslanir. */
  .tn-brand{flex-direction:row; gap:10px; padding:0 0 0 6px; margin-right:auto}
  .tn-brand::before,.tn-brand::after{display:none}
  .tn-brand-tx{align-items:flex-start}
  .tn-lt{width:150px}
  .tn-lt-sus{display:none}
  .tn-right{margin-left:auto; padding:0; background:none; border:0}
}
@container tnbar (max-width:520px){
  /* Yuva basligindaki alt metin iki satira sariyordu; dar ekranda cikar. */
  .tn-dock-bas small{display:none}
  .tn-dock{--dock-w:min(238px, calc(100cqw - 92px))}
  .tn-bar{margin:8px 10px; gap:8px}
  .tn-lt{width:126px}
  .tn-me-c{display:none}
  .tn-me-btn{padding:0 6px}
  .tn-sheet-acts{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   TOPLULUK YUVASI — sağ kenar, dikey ortalı, açılır-kapanır
   Yan menü kalkınca üç topluluk kartının yeri kalmıyordu. Üst çubuğa
   sığmazlar; sayfa içine gömülürlerse her sayfada yeniden yer ayırmak
   gerekir. Sağ kenarda sabit bir yuva ikisini de çözer: kapalıyken 44px,
   açılınca sayfanın ÜZERİNE biner — düzene hiç dokunmaz.
   Açılma transform ile: layout tetiklemez, compositor'da kalır.
   ========================================================================== */
.tn-dock{
  --dock-w:272px;
  position:fixed; right:0; top:50%; z-index:38;
  display:flex; align-items:center; pointer-events:none;
  /* Kapalıyken YUVANIN TAMAMI dışarı kayar: panel ekran dışında kalır,
     kol tam kenara oturur. Panel tek başına kaydırılsaydı yer kaplamaya
     devam eder, kolu 272px içeride bırakırdı. */
  transform:translateY(-50%) translateX(var(--dock-w));
  transition:transform .3s var(--tn-egri);
}
.tn-dock.acik{transform:translateY(-50%) translateX(0)}
.tn-dock > *{pointer-events:auto}

/* --- kol: kapalıyken görünen tek parça --- */
.tn-dock-kol{
  position:relative; z-index:2; flex:none; cursor:pointer; font-family:inherit;
  width:44px; padding:16px 0 14px; border:0; border-right:0;
  border-radius:16px 0 0 16px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  color:var(--tx2);
  background:linear-gradient(200deg,rgba(20,28,48,.72),rgba(7,11,22,.8));
  -webkit-backdrop-filter:blur(16px) saturate(1.5) brightness(.75);
          backdrop-filter:blur(16px) saturate(1.5) brightness(.75);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.12),
    -10px 12px 30px -18px rgba(0,0,0,.9),
    -2px 0 0 -1px rgba(245,196,81,.35);
  transition:width .2s var(--tn-egri), color .18s, transform .24s var(--tn-egri);
}
.tn-dock-kol:hover{color:#fff; transform:translateX(-2px)}
.tn-dock-kol-i{width:19px; height:19px; display:block}
.tn-dock-kol-i svg{width:100%; height:100%}
/* Dikey yazı: kol dar, ama ne olduğu okunsun — yalnız bir ok olsaydı
   tıklamaya değer görünmezdi. */
.tn-dock-kol-tx{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mono); font-size:8.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
}
.tn-dock-kol-sy{
  min-width:17px; height:17px; display:grid; place-items:center; border-radius:99px;
  font-family:var(--mono); font-size:8px; font-weight:700; color:#2a1c00;
  background:linear-gradient(135deg,var(--g2),var(--g));
}
/* Açıkken kol panelin sol kenarına yapışır ve okla döner */
.tn-dock.acik .tn-dock-kol{color:#fff}
.tn-dock.acik .tn-dock-kol-i{transform:rotate(180deg); transition:transform .24s var(--tn-egri)}

/* --- panel --- */
.tn-dock-panel{
  flex:none; width:var(--dock-w); padding:13px; border-radius:18px 0 0 18px;
  display:flex; flex-direction:column; gap:9px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(168,85,247,.20), transparent 62%),
    linear-gradient(180deg,rgba(14,20,36,.62),rgb(5 9 18 / .78));
  -webkit-backdrop-filter:blur(22px) saturate(1.6) brightness(.72);
          backdrop-filter:blur(22px) saturate(1.6) brightness(.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.10),
    -18px 26px 60px -34px rgba(0,0,0,.95),
    -10px 0 50px -40px rgba(139,92,246,.7);
  /* Kayma işini kap yapıyor; panel yalnızca beliriyor. */
  opacity:0; transition:opacity .22s var(--tn-egri);
}
.tn-dock.acik .tn-dock-panel{opacity:1}
.tn-dock-bas{display:flex; align-items:center; gap:8px; padding:2px 4px 8px}
.tn-dock-bas b{font-size:12.5px; font-weight:900; color:#fff}
.tn-dock-bas small{font-size:9.5px; font-weight:600; color:var(--tx4)}
.tn-dock-bas small::before{content:'·'; margin-right:6px}
.tn-dock-kapa{
  margin-left:auto; width:24px; height:24px; flex:none; display:grid; place-items:center;
  border-radius:50%; cursor:pointer; color:var(--tx3); font-family:inherit;
  border:1px solid var(--line2); background:rgba(148,169,214,.06); transition:color .16s, border-color .16s;
}
.tn-dock-kapa:hover{color:#fff; border-color:rgba(245,196,81,.5)}
.tn-dock-kapa svg{width:11px; height:11px}

/* --- kartlar: yan menüdeki mk kartlarının aynısı --- */
.tn-mk{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:11px 12px; border-radius:14px; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--k) 26%,var(--line));
  background:linear-gradient(150deg,color-mix(in srgb,var(--k) 13%,transparent),rgba(9,14,27,.5));
  transition:transform .18s var(--tn-egri), border-color .18s, background .18s;
}
.tn-mk:hover{transform:translateX(-3px); border-color:color-mix(in srgb,var(--k) 58%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--k) 20%,transparent),rgba(9,14,27,.45))}
/* Panel açılınca kartlar sırayla iner — üçü aynı anda belirince
   nereye bakılacağı belli olmuyordu. */
.tn-dock.acik .tn-mk{animation:tnMk .34s var(--tn-egri) backwards; animation-delay:calc(var(--i) * .06s + .08s)}
@keyframes tnMk{from{opacity:0; transform:translateX(16px)}to{opacity:1; transform:none}}
.tn-mk-ic{
  width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--k) 26%,transparent),rgba(9,14,27,.6));
  border:1px solid color-mix(in srgb,var(--k) 30%,transparent);
}
.tn-mk-ic svg{width:20px; height:20px}
.tn-mk-tx{min-width:0; line-height:1.25}
.tn-mk-tx strong{display:block; font-size:12.5px; font-weight:800; color:#fff; white-space:nowrap}
.tn-mk-tx > span{display:block; margin-top:3px; font-family:var(--mono); font-size:8px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--k)}
.tn-mk-dot{
  width:7px; height:7px; flex:none; border-radius:50%; background:var(--k);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--k) 22%,transparent);
}
.tn-mk-go{width:11px; height:11px; flex:none; margin-left:auto; color:var(--k); opacity:.7;
  transition:transform .18s var(--tn-egri), opacity .18s}
.tn-mk-dot + .tn-mk-go{margin-left:8px}
.tn-mk:hover .tn-mk-go{transform:translate(2px,-2px); opacity:1}

/* Dar ekran: kol ve panel küçülür, yuva yine sağ kenarda kalır. */
@container tnbar (max-width:900px){
  .tn-dock-kol{width:38px; padding:13px 0 11px; gap:7px}
  .tn-dock-kol-i{width:16px; height:16px}
  .tn-dock{--dock-w:238px}
  .tn-dock-panel{padding:11px}
  .tn-mk{padding:9px 10px; gap:9px}
  .tn-mk-ic{width:34px; height:34px}
}
/* Mobil çekmece açıkken yuva çekilir — ikisi üst üste binmesin. */
.tn-root.menu-acik .tn-dock{opacity:0; pointer-events:none; transition:opacity .18s}
/* Yuva ekrana sabit; kapsayıcı sorguları .tn-root'a bakmaz.
   Dar ekran kuralları bu yüzden medya sorgusuyla tekrarlanır. */
@media (max-width:900px){
  .tn-dock-kol{width:38px; padding:13px 0 11px; gap:7px}
  .tn-dock-kol-i{width:16px; height:16px}
  .tn-dock{--dock-w:238px}
  .tn-dock-panel{padding:11px}
  .tn-mk{padding:9px 10px; gap:9px}
  .tn-mk-ic{width:34px; height:34px}
}
@media (max-width:520px){
  .tn-dock-bas small{display:none}
  .tn-dock{--dock-w:min(238px, calc(100vw - 92px))}
}

@media (prefers-reduced-motion:reduce){
  .tn-root *,.tn-root *::before,.tn-root *::after{animation:none!important;transition:none!important}
}

/* ==========================================================================
   CANLI SAYFA BAGLARI
   ========================================================================== */
/* Kapsul yuzuyor: icerik onun altindan baslasin. Olcu JS ile yazilir
   (--tn-yer) ve KUCULMEMIS halden alinir; kaydirinca icerik ziplamasin. */
/* Sitede zaten main{padding-top:1.4rem!important} var; normal ozgullukle
   yenilemiyor. Kapsam body.tn-var ile sinirli, yani bayrak kapaliyken
   varsayilan site bu kurallardan hic etkilenmez. */
body.tn-var main.tn-govde{padding-top:var(--tn-yer,126px)!important}
@media (max-width:900px){
  body.tn-var main.tn-govde{padding-top:var(--tn-yer,96px)!important}
}

/* ÜST MENÜ AÇIKKEN ESKİ KROM GİZLENİR — ama DOM'DAN SİLİNMEZ.
   Sebep: bu bloklar #tbB, #mbB, #ntBadge, #ntList, #uDrop gibi id'ler
   taşıyor ve mevcut JS (syncHeader, nxToggleNotif, nxMarkRead...) onları
   arıyor. Kaldırılsaydı o fonksiyonlar null'a çarpardı. Gizleyince menü
   değişir, hiçbir mevcut davranış kırılmaz. */
body.tn-var #mainSidebar,
body.tn-var #sidebarToggle,
body.tn-var #cfMobBar,
body.tn-var #cfDeskHead{display:none!important}

/* Ana sarmalayıcı mobilde 100vh-64px yüksekliğindeydi; o 64px gizlenen
   mobil çubuk içindi. Çubuk yokken tam yükseklik gerekir. */
body.tn-var #cfWrap{height:100vh!important}

/* Yan menü daraltma anahtarı (localStorage nx_sidebar) üst menüde
   anlamsız; bıraktığı gövde sınıfı içeriği kaydırmasın. */
body.tn-var.sidebar-collapsed main{margin-left:0!important}

/* Rütbe satırı sarabiliyordu: sıkışınca iki satıra düşüp öğenin
   scrollWidth'ini küçültüyor, ölçülen --tn-w yanlış kalıyordu
   (avatar adı "bi / sü" gibi kırpık görünüyordu). */
body.tn-var .tn-me-c,
body.tn-var .tn-me-c small{white-space:nowrap}
/* Esnek kutu içinde sıkışmasın: sıkışırsa ölçülen genişlik gerçek metin
   genişliği değil sıkışmış genişlik olur ve ad kalıcı kırpık kalır. */
body.tn-var .tn-me-c{
  flex:none;
  /* Ölçüme bağlı değil: sabit tavan. Ölçülen değer bir kez küçük çıkarsa
     kutu kırpılıp aynı değeri yeniden ölçüyor ve kendini kilitliyordu. */
  max-width:170px!important;
}
body.tn-var .tn-root.is-scrolled .tn-me-c{max-width:0!important}

/* Bildirim panelleri body'ye taşındı (tv2-script.php): eski header'ın
   içindeyken o header gizli olduğu için hiç görünmüyorlardı. Taşınınca
   Tailwind'in "absolute right-0 top-full" sınıfları anlamsız kalıyor;
   panel üst menüdeki zilin altına sabitleniyor. */
body.tn-var > #ntDrop{
  position:fixed!important; top:calc(var(--tn-yer,126px) - 6px)!important;
  right:16px!important; left:auto!important; bottom:auto!important;
  margin:0!important; z-index:60!important;
}
body.tn-var > #ntDropM{z-index:120!important}
/* Yuva panelinin arkasında kalmasın */
body.tn-var > #ntDrop:not(.hidden) ~ .tn-dock{z-index:30}

/* Yuva .tn-root'un DISINDA duruyor: .tn-root'ta container-type var,
   bu da contain:layout demek, yani icindeki position:fixed ekrana degil
   .tn-root'a gore konumlanirdi. */
.tn-root.menu-acik ~ .tn-dock{opacity:0; pointer-events:none; transition:opacity .18s}