@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700;800;900&display=swap');

/* ============================================================
   NEBULA - ANA SAYFA
   6 Eylul 2026 - ikinci tur. Sahibin son notu:
     "yazilar bizde okunmuyor"        -> puntolar ve renkler buyudu
     "kutulari bayay buyult"          -> 104px kutu -> 224px
     "nebulasmp buyuk yaziyi sil"     -> dev basli KALDIRILDI
     "kutularin ustunde kucuk
      welcome nebulasmp yazcak"       -> .hosgeldin, kutularin hemen ustu
     "attigim fotolari kutulara koy"  -> /assets/kutu/*.png

   OKUNURLUK: eski --metin3 (#68788F) siyah zeminde kutu alt
   yazilarini yutuyordu. Kutu icinde artik --metin2 kullaniliyor
   ve punto 12.5 -> 15px. Baslik 17 -> 26px.

   HAREKET: genlik 5-6px, sure 6-7s. "Abartisiz" istendi.
   Isletim sisteminde "hareketi azalt" acikken hepsi kapaniyor.
   ============================================================ */

:root{
  --zemin:#05070C;          /* siyah, hafif mavi lekeli */
  --zemin2:#080B12;
  --yuzey:rgba(255,255,255,.035);
  --metin:#EAF2FF;
  --metin2:#A9BCD6;         /* eski #9FB0C9 - biraz acildi */
  --metin3:#7C8DA6;         /* eski #68788F - okunmuyordu */
  --cizgi:rgba(120,170,255,.14);
  --cizgi2:rgba(120,170,255,.34);

  --mavi:#3B82F6;           /* ana vurgu - olculu */
  --mavi-ac:#60A5FA;
  --mavi-parlak:#7DD3FC;
  --yesil:#4ADE80;

  --r:18px;
  --r-sm:11px;
  --sans:"Figtree","Segoe UI",Roboto,"Helvetica Neue",ui-sans-serif,system-ui,sans-serif;

  /* hesap.js giris penceresi bu adlari bekliyor */
  --kenar:var(--cizgi);
  --kenar2:var(--cizgi2);
  --mavi-koyu:#1D4ED8;
  --mavi-pr:59,130,246;
  --ok:#4ADE80;
  --no:#FF6B6B;
  --yuzey2:rgba(255,255,255,.06);
  --yazi2:var(--metin2);
  --yazi3:var(--metin3);
  --r-xs:8px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--zemin);color:var(--metin);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* "siteyi yatay yap hafif" - 1120 -> 1240 */
.ic{max-width:1240px;margin:0 auto;padding:0 24px}

/* ================= ARKA PLAN =================
   Sahip: "cansiz derken direkt siteyi dedim, arka plani".
   Duz siyah zemin + iki sabit parlama vardi, hicbir sey oynamiyordu.

   Sunucunun adi NEBULA - o yuzden gercekten bir bulutsu:
     .bulut    yavasca suzulen renkli gaz bulutlari (40 sn)
     .yildiz   iki katman yildiz, farkli hizda kayiyor (90/150 sn)
   Ikisi de saf CSS: ne resim ne JS dongusu, telefonu yormuyor.
   Cok yavaslar - bakinca fark ediliyor, okurken rahatsiz etmiyor. */
.bulut,.yildiz{position:fixed;pointer-events:none}
.bulut{inset:-30%;z-index:-3;filter:blur(40px);opacity:.9;
  background:
    radial-gradient(38% 30% at 22% 26%, rgba(59,130,246,.30), transparent 70%),
    radial-gradient(34% 26% at 78% 16%, rgba(125,211,252,.18), transparent 70%),
    radial-gradient(42% 32% at 62% 84%, rgba(139,92,246,.20), transparent 72%),
    radial-gradient(30% 24% at 12% 78%, rgba(37,99,235,.16), transparent 72%);
  animation:bulutGez 46s ease-in-out infinite alternate}
@keyframes bulutGez{
  0%  {transform:translate3d(-2%,-1%,0) scale(1)}
  50% {transform:translate3d(2%,2%,0) scale(1.08)}
  100%{transform:translate3d(-1%,3%,0) scale(1.03)}
}
.yildiz{inset:-260px;z-index:-2;
  background-image:
    radial-gradient(1.7px 1.7px at 40px 60px, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 170px 20px, rgba(199,225,255,.65), transparent),
    radial-gradient(1.2px 1.2px at 90px 190px, rgba(255,255,255,.55), transparent),
    radial-gradient(1.6px 1.6px at 230px 140px, rgba(186,215,255,.60), transparent);
  background-size:280px 280px;
  animation:yildizKay 150s linear infinite}
.yildiz.hizli{z-index:-2;opacity:.7;
  background-image:
    radial-gradient(1.3px 1.3px at 20px 120px, rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 150px 200px, rgba(210,230,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 260px 40px, rgba(255,255,255,.5), transparent);
  background-size:190px 190px;
  animation:yildizKay 90s linear infinite}
@keyframes yildizKay{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-280px,-160px,0)}
}
/* Zeminde cok hafif mavi parlama - "siyah ama olu degil". */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70vw 50vw at 50% -10%, rgba(59,130,246,.10), transparent 65%)}

/* ---------------- UST CUBUK ---------------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(5,7,12,.72);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--cizgi)}
.nav .wrap{max-width:1240px;margin:0 auto;padding:11px 24px;
  display:flex;align-items:center;gap:16px}
.marka{display:flex;align-items:center;gap:9px;font-weight:900;
  letter-spacing:.5px;font-size:16px}
.marka img{width:24px;height:24px}

/* SOL UST: canli oyuncu sayisi */
.online{display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;
  background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.28);
  font-size:13.5px;font-weight:700;color:var(--metin2);white-space:nowrap}
.online b{color:#fff}
.nokta{width:8px;height:8px;border-radius:50%;background:#5B6B80;flex:none}
.nokta.on{background:var(--yesil);animation:nabiz 2s ease-in-out infinite}
@keyframes nabiz{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}
  70%    {box-shadow:0 0 0 7px rgba(74,222,128,0)}
}
.nav .bosluk{flex:1}
.nav-menu{display:flex;gap:18px}
.nav-menu a{color:var(--metin2);font-size:14.5px;font-weight:700;padding:3px 0;
  border-bottom:2px solid transparent}
.nav-menu a:hover{color:#fff}
.nav-menu a.on{color:#fff;border-bottom-color:var(--mavi)}

/* ---------------- GIRIS ----------------
   DEV "NEBULASMP" BASLIGI KALDIRILDI (sahibin istegi). Geriye
   sadece adres kutusu ve altindaki kucuk bilgi satiri kaldi;
   bolum bu yuzden cok kisa. */
.hero{position:relative;padding:52px 0 0;text-align:center}
.ipsatir{display:flex;gap:10px;margin:0 auto;max-width:470px}
.ipsatir input{flex:1;min-width:0;background:rgba(0,0,0,.45);color:#fff;
  border:1px solid var(--cizgi2);border-radius:var(--r-sm);
  padding:15px 16px;font-family:inherit;font-size:18px;font-weight:800;
  letter-spacing:.3px;text-align:center}
.ipsatir button{background:var(--mavi);color:#fff;border:0;
  border-radius:var(--r-sm);padding:15px 22px;font-family:inherit;
  font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap}
.ipsatir button:hover{background:var(--mavi-ac)}
.altbilgi{margin-top:14px;color:var(--metin3);font-size:13.5px}
.altbilgi b{color:var(--metin2)}

/* ---------------- "Welcome NebulaSmp" ----------------
   KUCUK ve KUTULARIN TAM USTUNDE. JS harf harf yaziyor, bitince
   imlec uc kez yanip soner ve yazi oldugu gibi kalir. */
.hosgeldin{margin:54px 0 20px;text-align:center;min-height:1.7em;
  font-size:clamp(17px,2.2vw,23px);font-weight:800;letter-spacing:.5px;
  color:var(--mavi-parlak)}
.imlec{display:inline-block;width:2px;height:1.05em;vertical-align:-2px;
  margin-left:4px;background:var(--mavi-parlak);animation:yanip 1s steps(1) infinite}
.imlec.bitti{animation:yanip 1s steps(1) 3, kaybol .4s ease 3s forwards}
@keyframes yanip{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes kaybol{to{opacity:0}}

/* ---------------- 6 KUTU: 3 UST 3 ALT, BUYUK ----------------
   Her kutunun kendi --acc rengi var; gorselin arkasindaki isik
   ve ustune gelince cikan kenar ondan geliyor. Renkler mavi
   ailesinden secildi, basvuru kutusu disinda (cim blogu yesil). */
.kutular{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding:0 0 34px}
/* YENI DUZEN (sahibin tarifi): gorsel kutuyu KAPLIYOR, baslik
   SOL USTTE buyuk, aciklama SOL ALTTA kucuk. Once ikon solda kucuk
   bir kaide ustundeydi ve kartin yarisi bostu. */
.kutu{position:relative;overflow:hidden;--acc:59,130,246;
  display:flex;flex-direction:column;justify-content:space-between;
  /* Sahip: "fazla buyuk". 230 -> 168 piksel. */
  min-height:168px;padding:16px 18px;
  border:1px solid rgba(var(--acc),.55);border-radius:var(--r);
  /* 8 Eylul - sahip: "homeyi de yap oyle", yani magazadaki rutbe
     kartlari gibi kutunun arkasi TAMAMEN kendi renginde olsun.
     Onceki hali tamamen seffafti (yine sahibin istegiydi) ama
     kutular birbirinden ayirt edilmiyordu.

     --acc RENGI ELLE SECILMEDI: her kutunun kendi gorselinden
     olculdu, yani Discord mavi, Ranks sari, Applications yesil
     kendi gorseliyle ayni tonda.

     Renk KOYU ZEMIN uzerine bindiriliyor (sayfa arka plani nerdeyse
     siyah), yani doygun ama karanlik kaliyor. Ustelik yazinin
     arkasindaki perde (.gorsel::after) duruyor - baslik ve alt yazi
     her renkte okunur. */
  background:linear-gradient(180deg,rgba(var(--acc),.58),
    rgba(var(--acc),.30) 55%,rgba(var(--acc),.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 16px 38px -30px rgba(var(--acc),.75);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,
    background .25s ease}
.kutu:hover{border-color:rgba(var(--acc),.95);
  background:linear-gradient(180deg,rgba(var(--acc),.72),
    rgba(var(--acc),.40) 55%,rgba(var(--acc),.24));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 26px 56px -28px rgba(var(--acc),.95)}

/* gorsel tabagi */
/* GORSEL KUTUYU KAPLIYOR: saga yaslanmis, kartin boyunca uzuyor.
   Gorseller 220x220 saydam tuvale ortalanmisti (hazirlik betigi),
   o yuzden hepsi ayni olcude oturuyor.
   Uzerine soldan saga koyulasan bir perde: yazi her zaman koyu
   zeminde kaliyor, gorsel de saga dogru serbest duruyor. */
/* IKON KUTUNUN TAMAMINI KAPLIYOR (sahip: "tamamina koy iconu").
   Artik saga sikismis degil, kartin bastan sona ortasinda duruyor. */
.kutu .gorsel{position:absolute;inset:0;
  display:grid;place-items:center;pointer-events:none}
/* Yazinin arkasinda ince bir koyuluk - seffaf kutuda yazi ikonun ve
   yildizlarin uzerinde kalacak, okunur olmasi lazim. */
.kutu .gorsel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,10,18,.72) 0%,
    rgba(6,10,18,.30) 34%,transparent 62%)}
/* Ikonlar cok yavas nefes aliyor - genlik %5,5, sure 5,5 sn.
   Her kutu farkli gecikmeyle basliyor (asagida). */
/* Buyuk ve PARLAK: kendi renginde bir hale, altinda golge.
   Hale olmadan ikon koyu zeminde yassi duruyordu. */
/* Ikon kutuyu kapliyor ama SOL UST kosede baslik icin yer birakiyor:
   object-position ile biraz saga-asagi yasliyor. Ortalanmis haliyle
   basligin tam altina denk geliyordu ve yazi ikonun uzerinde
   okunmuyordu. */
/* MUTLAK KONUM, yuzde DEGIL. .gorsel bir grid kutusu ve grid ogesinde
   yuzdelik yukseklik cozulmuyordu: height:100% "auto" gibi davraniyor,
   resim kendi kare oraniyla 357x357 oluyor ve 230 piksellik kutudan
   tasiyordu. inset ile hem genislik hem yukseklik KESIN oluyor.
   inset 16px: nefes animasyonu (%3) buyuttugunde bile kenara degmiyor. */
/* OLCU ACIKCA VERILIYOR. Sadece inset yazmak yetmedi: auto olculu
   mutlak konumlu bir resim kendi DOGAL boyutunu (220x220) aliyor,
   230 piksellik kutudan 11 piksel tasiyordu. calc ile kutuya
   bagliyoruz, object-fit:contain de orani koruyor. */
/* Sahip: "oynamasin". Nefes animasyonu kaldirildi; buyume payi
   gerekmedigi icin kenar boslugu 16 -> 10 piksel. */
.kutu .gorsel img{position:absolute;left:10px;top:10px;
  width:calc(100% - 20px);height:calc(100% - 20px);
  object-fit:contain;padding:0;
  object-position:72% 64%;
  filter:drop-shadow(0 0 32px rgba(var(--acc),.6))
         drop-shadow(0 14px 22px rgba(0,0,0,.75));
}

/* Ustune gelince kartin uzerinden bir isik gecsin - hareketsiz bir
   yuzeyi canlandiran en ucuz sey bu, ve sadece fare ustundeyken. */
.kutu::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.15) 50%,
    transparent 64%);
  transform:translateX(-130%);transition:transform .8s ease}
.kutu:hover::after{transform:translateX(130%)}

/* min-width:0 SART: flex ogesi varsayilan olarak icerigi kadar genis
   kalmak ister. "Applications" 27px'te 175px cikiyordu ve kutudan
   tasiyordu - punto 23'e cekildi, sarma da acildi. */
.kutu > span:not(.gorsel):not(.ok){min-width:0;overflow-wrap:anywhere}
.kutu .ad{display:block;font-size:23px;font-weight:900;letter-spacing:-.4px;
  color:#fff;line-height:1.15}
/* Renkli zeminde --metin2 (mavimsi gri) bulaniyordu. */
.kutu .alt{display:block;color:#fff;font-size:12.5px;font-weight:600;
  margin-top:6px;text-shadow:0 1px 8px rgba(0,0,0,.9)}
/* SOL UST: buyuk baslik.
   Once degradeli yaziydi (beyazdan renge); degradenin renkli ucu
   koyu zeminde sonuk kaliyordu ve yazi "cansiz" gorunuyordu.
   Artik DUZ BEYAZ + kendi renginde hale: hem parliyor hem her
   zeminde net okunuyor. */
.kutu .ad{position:relative;z-index:2;display:block;color:#fff;
  font-size:clamp(18px,2vw,23px);font-weight:900;letter-spacing:-.5px;
  line-height:1.05;
  text-shadow:0 0 26px rgba(var(--acc),.95),
              0 0 8px rgba(var(--acc),.7),
              0 2px 10px rgba(0,0,0,.85)}
/* SOL ALT: kucuk aciklama */
.kutu .alt{position:relative;z-index:2}
.kutu .ok{color:rgba(255,255,255,.7)}
.kutu .ok{position:absolute;right:20px;top:20px;z-index:2;
  color:rgba(255,255,255,.45);font-size:22px;
  transition:transform .25s ease,color .25s ease}
.kutu:hover .ok{transform:translateX(5px);color:#fff}

/* ---------------- OWNER ---------------- */
.owner-bar{display:flex;align-items:center;gap:20px;cursor:pointer;
  width:100%;text-align:left;font-family:inherit;color:inherit;
  padding:24px 26px;margin:0 0 78px;
  border:1px solid var(--cizgi);border-radius:var(--r);
  background:linear-gradient(100deg,rgba(59,130,246,.18),rgba(255,255,255,.02) 62%);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.owner-bar:hover{border-color:var(--cizgi2);transform:translateY(-4px);
  box-shadow:0 22px 50px -26px rgba(59,130,246,.8)}
.owner-bar .kafa{width:64px;height:64px;border-radius:14px;flex:none;
  image-rendering:pixelated;background:rgba(0,0,0,.35);object-fit:cover;
  object-position:top}
.owner-bar .ad{display:block;font-size:23px;font-weight:900;color:#fff}
.owner-bar .alt{display:block;color:var(--metin2);font-size:14.5px;margin-top:3px}
.owner-bar .ok{margin-left:auto;color:var(--metin3);font-size:22px}

/* tam ekran kaplama: boydan boya fotograf, altta bilgi */
.kaplama{position:fixed;inset:0;z-index:100;display:none;
  background:rgba(3,5,9,.9);backdrop-filter:blur(10px)}
.kaplama.acik{display:flex;align-items:center;justify-content:center;
  animation:belir .25s ease}
@keyframes belir{from{opacity:0}to{opacity:1}}
.kaplama .kart{position:relative;width:min(92vw,430px);
  max-height:92vh;display:flex;flex-direction:column;align-items:center;
  border:1px solid var(--cizgi2);border-radius:20px;padding:26px 26px 22px;
  background:linear-gradient(180deg,rgba(59,130,246,.14),rgba(8,11,18,.96) 58%)}
.kaplama .boy{height:min(52vh,380px);width:auto;image-rendering:pixelated;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.6));
  animation:suzul 5s ease-in-out infinite}
.kaplama h3{margin:18px 0 4px;font-size:27px;font-weight:900;letter-spacing:-.5px}
.kaplama .rol{color:var(--mavi-ac);font-size:13px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase}
.kaplama p{margin:14px 0 0;color:var(--metin2);font-size:15px;text-align:center}
.kaplama .kapat{position:absolute;top:12px;right:14px;background:none;border:0;
  color:var(--metin3);font-size:26px;cursor:pointer;line-height:1}
.kaplama .kapat:hover{color:#fff}

/* ---------------- YUMUSAK UCMA ---------------- */
/* Genlik 5px, sure 6s. Kutular sirayla gecikmeli baslar ki hepsi
   ayni anda inip cikmasin - tek blok gibi gorunuyordu. */
/* Genlik 5px -> 14px. Sahip "fazla ileri geri yapsinlar" dedi;
   5px uzaktan fark edilmiyordu. Sure ayni kaldi, yani hareket
   yavas ama yolu uzun - hizlandirmadim, hizli olani rahatsiz eder. */
@keyframes suzul{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-14px)}
}
.ucar{animation:suzul 6s ease-in-out infinite}
/* Ustune gelince ucma dursun, yoksa hover kaymasiyla catisiyor.
   !important SART: alttaki .kutular .kutu:nth-child(n) kurallari
   'animation' KISAYOLUNU yaziyor ve kisayol play-state'i running'e
   sifirliyor; ustelik onlar daha ozgul. Bu yuzden durdurma calismiyordu
   - sahip "uzerine gelince dursunlar" derken bunu gordu. */
.kutular .kutu:hover,.kutu:hover,.owner-bar:hover{
  animation-play-state:paused!important}

/* ---------------- DIP ---------------- */
.dip{border-top:1px solid var(--cizgi);padding:26px 0 42px;
  color:var(--metin3);font-size:13.5px}
.dip .sut{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.dip a{color:var(--metin2)}
.dip a:hover{color:#fff}
.dip .bosluk{flex:1}

/* ---------------- DAR EKRAN ---------------- */
@media (max-width:1080px){
  .kutu{min-height:150px;padding:14px 16px}
  .kutu .ad{font-size:21px}
}
@media (max-width:900px){
  .kutular{grid-template-columns:repeat(2,1fr)}
  .nav-menu{display:none}
  .hero{padding:38px 0 0}
  .hosgeldin{margin:38px 0 16px}
}
@media (max-width:560px){
  .kutular{grid-template-columns:1fr}
  .ipsatir{flex-direction:column}
  .online{font-size:12px;padding:5px 10px}
  .kutu{min-height:132px}
}

/* HAREKETI AZALT: isletim sisteminde acikken hicbir sey oynamiyor. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   GIRIS PENCERESI - nb.css'ten AYNEN kopyalandi.
   hesap.js pencereyi .hs-* siniflariyla kuruyor; bu sayfa
   nb.css yuklemedigi icin kurallar burada olmak zorunda,
   yoksa giris penceresi ciplak aciliyor. Degiskenler yukarida
   NEBULA paletine baglandi (--mavi -> mor).
   ============================================================ */
.mcbtn{display:inline-block;font-family:var(--sans);font-size:15px;
  font-weight:600;padding:13px 24px;border:0;border-radius:var(--r-sm);
  color:#fff;background:var(--mavi-koyu);cursor:pointer;text-align:center;
  text-decoration:none;transition:background .15s,transform .12s,box-shadow .15s;
  box-shadow:0 10px 26px -14px rgba(59,130,246,.95)}
.mcbtn:hover{background:var(--mavi);transform:translateY(-1px);
  box-shadow:0 16px 34px -16px rgba(59,130,246,1)}
.mcbtn:active{transform:none}
.mcbtn.wide{display:block;width:100%}
.mcbtn.grey{background:var(--yuzey);border:1px solid var(--kenar);box-shadow:none}
.mcbtn.grey:hover{background:var(--yuzey2);border-color:var(--kenar2)}
.mcbtn[disabled]{background:rgba(255,255,255,.05);color:var(--yazi3);
  cursor:not-allowed;box-shadow:none;transform:none}
.hs-dugme{margin-left:8px;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.08em;padding:9px 16px;border-radius:999px;cursor:pointer;
  color:#fff;background:var(--mavi-koyu);border:0;
  box-shadow:0 8px 20px -12px rgba(59,130,246,.95);transition:.15s}
.hs-dugme:hover{background:var(--mavi)}
.hs-dugme.girisli{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 7px;
  background:var(--yuzey);border:1px solid var(--kenar);box-shadow:none;letter-spacing:0;
  font-size:13.5px}
.hs-dugme.girisli:hover{background:var(--yuzey2);border-color:var(--kenar2)}
.hs-dugme.girisli img{width:22px;height:22px;border-radius:6px;image-rendering:pixelated}
.hs-ov{position:fixed;inset:0;z-index:100;background:rgba(4,7,13,.86);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.hs-ov[hidden]{display:none}
.hs-kutu{position:relative;width:100%;max-width:400px;background:#0d1526;
  border:1px solid var(--kenar2);border-radius:var(--r);padding:26px}
.hs-kapat{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--yazi3);
  font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.hs-kapat:hover{color:#fff}
.hs-sekme{display:flex;gap:6px;margin-bottom:18px;background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:var(--r-sm);padding:4px}
.hs-sekme button{flex:1;background:none;border:0;color:var(--yazi2);cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;padding:9px 8px;
  border-radius:var(--r-xs);transition:.15s}
.hs-sekme button.on{background:var(--mavi-koyu);color:#fff}
.hs-bas{font-size:20px;color:#fff;margin:0 0 6px}
.hs-alt{color:var(--yazi2);font-size:13.5px;line-height:1.6;margin:0 0 18px}
.hs-alan{margin:0 0 14px}
.hs-alan[hidden]{display:none}
.hs-alan label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mavi-pr);margin:0 0 7px}
.hs-alan input{width:100%;background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:var(--r-sm);padding:12px 14px;color:#fff;font-size:15.5px;
  font-family:var(--sans)}
.hs-alan input:focus{outline:none;border-color:var(--mavi);background:rgba(59,130,246,.08)}
.hs-hatirla{display:flex;align-items:center;gap:9px;color:var(--yazi2);font-size:14px;
  margin:0 0 18px;cursor:pointer;user-select:none}
.hs-hatirla[hidden]{display:none}
.hs-hatirla input{width:16px;height:16px;accent-color:var(--mavi)}
.hs-mesaj{margin:14px 0 0;padding:11px 14px;border-radius:var(--r-sm);font-size:14px;
  border:1px solid var(--no);color:var(--no);background:rgba(248,113,113,.1)}
.hs-mesaj.iyi{border-color:var(--ok);color:var(--ok);background:rgba(52,211,153,.1)}
.hs-mesaj[hidden]{display:none}


/* ==================================================================
   BENTO IZGARA  (8 Eylul)

   Sahip AesirMC ana sayfasinin ekran goruntusunu gonderip "sitenin
   home'unu direkt bunun aynisi gibi yap" dedi. Referanstan olculen
   duzen:

     satir 1 |  BUYUK KART  |  logo karti + IP cubugu  |  BUYUK KART
     satir 2 |  BUYUK KART  |  sayac karti + cubuk     |  BUYUK KART
     satir 3 |  BOYDAN BOYA TEK GENIS KART

   Kart dili de referanstan: baslik SOL USTTE buyuk, sanat SAGDA
   tasarak, alt satirda kucuk aciklama, sag altta ok. Renk her kartin
   KENDI gorselinden olculen --acc (eskiden de oyleydi, korundu).

   Eski .kutular/.kutu kurallari asagida duruyor - baska sayfa
   kullanmiyor ama silmedim, geri donmek gerekirse diye. ================ */
.bento{display:grid;gap:16px;margin:6px 0 26px;
  grid-template-columns:repeat(3,1fr)}
.bento .sut{display:grid;gap:16px;grid-template-rows:1fr auto;min-height:0}

/* --- kart --- */
.bk{position:relative;overflow:hidden;--acc:59,130,246;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:250px;padding:20px 22px;text-decoration:none;color:inherit;
  border:1px solid rgba(var(--acc),.55);border-radius:20px;
  background:linear-gradient(150deg,rgba(var(--acc),.62),
    rgba(var(--acc),.26) 52%,rgba(6,10,20,.86));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 44px -32px rgba(var(--acc),.9);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.bk:hover{transform:translateY(-4px);border-color:rgba(var(--acc),.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
    0 28px 60px -30px rgba(var(--acc),1)}

/* sanat: SAG ALTTA, kenardan tasiyor - referansdaki karakter
   render'larinin durusu. pointer-events yok ki tiklama karta gitsin. */
.bk .sanat{position:absolute;right:-14px;bottom:-16px;width:210px;height:210px;
  object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 0 26px rgba(var(--acc),.5))
         drop-shadow(0 14px 20px rgba(0,0,0,.7))}
.bk.genis .sanat{right:24px;bottom:-22px;width:250px;height:250px}
/* Discord logosu kare ve dolgun; ayni olcude cizilince yazinin
   uzerine biniyordu. Biraz kucuk ve daha saga. */
.bk .sanat[src$=".svg"]{right:6px;bottom:14px;width:150px;height:150px}
/* yazinin arkasi: soldan saga koyuluk - sanat ne olursa olsun okunur */
.bk::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(4,8,16,.86) 0%,
    rgba(4,8,16,.62) 38%,rgba(4,8,16,.18) 62%,transparent 80%)}
.bk > *{position:relative;z-index:2}

.bk .ust{display:flex;align-items:center;gap:10px}
.bk .rozet{font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px;
  background:rgba(var(--acc),.35);border:1px solid rgba(var(--acc),.7);
  color:#fff;white-space:nowrap}
.bk .bas{font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-.8px;
  line-height:1.04;color:#fff;
  text-shadow:0 2px 18px rgba(var(--acc),.6),0 2px 10px rgba(0,0,0,.7)}
.bk .dip{display:flex;align-items:center;gap:12px}
/* Yazi sanatin uzerine binmesin diye genislik sinirli - ilk halinde
   "Everything is delivered automatically" magaza gorselinin altina
   giriyordu. */
.bk .alt{font-size:14px;font-weight:700;color:rgba(255,255,255,.86);
  max-width:60%}
.bk .bas{max-width:72%}
.bk.genis .alt{max-width:66%}
.bk.genis .bas{max-width:70%}
/* OK REFERANSTAKI GIBI SAG ALT KOSEDE SABIT. Once yazinin devaminda
   akiyordu ve kartin ortasinda, sanatin uzerinde kaliyordu. */
.bk .ok{position:absolute;right:18px;bottom:18px;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  transition:transform .2s,background .2s}
.bk:hover .ok{transform:translateX(4px);background:rgba(255,255,255,.22)}

/* --- ortadaki logo karti --- */
.bk.logo{min-height:0;align-items:center;justify-content:center;
  --acc:139,92,246;padding:18px}
.bk.logo img{width:118px;height:118px;filter:drop-shadow(0 0 34px rgba(139,92,246,.75))}
.bk.logo::before{display:none}

/* --- IP cubugu --- */
.ipbar{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border:1px solid var(--kenar2,rgba(147,197,253,.36));border-radius:16px;
  background:rgba(10,16,30,.72);cursor:pointer}
.ipbar:hover{border-color:rgba(139,92,246,.7)}
.ipbar b{font-size:16px;font-weight:800;color:#fff;letter-spacing:.01em}
.ipbar .kop{margin-left:auto;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65)}

/* --- canli sayac karti --- */
.bk.sayac{min-height:0;--acc:52,211,153;align-items:center;
  justify-content:center;gap:6px;text-align:center;padding:22px 18px}
.bk.sayac::before{display:none}
.bk.sayac .rakam{font-size:clamp(34px,4vw,46px);font-weight:900;
  letter-spacing:-1px;color:#fff;line-height:1;
  text-shadow:0 2px 22px rgba(52,211,153,.7)}
.bk.sayac .etiket{display:flex;align-items:center;gap:8px;font-size:13px;
  font-weight:700;color:rgba(255,255,255,.82)}
.bk.sayac .nokta{width:9px;height:9px;border-radius:50%;
  background:#64748b;box-shadow:0 0 0 0 rgba(52,211,153,.6)}
.bk.sayac .nokta.on{background:#34d399;animation:nb-nabiz 2s infinite}
@keyframes nb-nabiz{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}
  70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* --- alt cubuk (FORUM/STATS gibi) --- */
.cubuk{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border:1px solid rgba(var(--acc),.5);border-radius:16px;
  background:rgba(var(--acc),.16);text-decoration:none;color:#fff;
  font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,border-color .2s}
.cubuk:hover{background:rgba(var(--acc),.28);border-color:rgba(var(--acc),.85)}
.cubuk .ok{margin-left:auto;width:30px;height:30px;font-size:15px}

/* --- boydan boya kart --- */
.bk.genis{grid-column:1 / -1;min-height:176px}
.bk.genis .bas{font-size:clamp(28px,3.4vw,38px)}

/* --- dip bilgi sutunlari (referanstaki gibi) --- */
.dipnet{border-top:1px solid var(--kenar,rgba(147,197,253,.2));
  margin-top:34px;padding:30px 0 18px}
.dipnet .ic{display:grid;gap:26px;
  grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:start}
.dipnet .marka{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dipnet .marka img{width:30px;height:30px}
.dipnet .marka b{font-size:19px;letter-spacing:.06em;color:#fff}
.dipnet p{margin:0;font-size:13.5px;color:var(--yazi3,#6D809E);max-width:44ch}
.dipnet h4{margin:0 0 10px;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--yazi3,#6D809E);font-weight:800}
.dipnet a{display:block;padding:4px 0;font-size:14px;font-weight:600;
  color:var(--yazi2,#A6B8D4);text-decoration:none}
.dipnet a:hover{color:#fff}

@media(max-width:1000px){
  .bento{grid-template-columns:1fr 1fr}
  .bk.genis{grid-column:1 / -1}
  .dipnet .ic{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .bento{grid-template-columns:1fr}
  .bk{min-height:210px}
  .bk .sanat{width:165px;height:165px}
  .dipnet .ic{grid-template-columns:1fr}
}


/* ==================================================================
   REFERANSA YAKLASTIRMA  (8 Eylul, ikinci tur)

   Sahip "home benzemiyor hala" dedi. Gonderdigi ekran goruntusuyle
   yan yana koyunca fark eden ve burada duzeltilen seyler:

     1) ZEMIN. Referans duz, neredeyse siyah. Bizde bulutsu + yildiz
        alani vardi ve kartlarin arkasi hareketliydi. Yildizlar
        SILINMEDI ama iyice soluklastirildi - marka izi kaliyor,
        goze carpmiyor.
     2) GORSEL. Referansta karakter render'i devasa ve kartin
        kenarindan tasiyor. Bizimki 210 pikseldi, kosede duruyordu.
        Simdi 300 piksel ve tasiyor.
     3) RENK. Referansta renk butun karti kaplamiyor; koyu bir zemin
        uzerinde GORSELIN ARKASINDA hale olarak duruyor. Bizde duz
        renk yikamasi vardi, kartlar fazla doygundu.
     4) ROZET. Referansta sag ustte. Bizde sol ustteydi.
     5) ALT YAZI. Referansta kartin EN ALTINDA. Bizde basligin hemen
        altindaydi, ortada bosluk kaliyordu.
     6) MENU. Referansta baglantilar SAGDA, logonun yaninda degil.
        (index.html'de .bosluk one alindi.)
   ================================================================== */
body{background:#0E0E11}
.bulut{opacity:.20}
.yildiz{opacity:.28}
.yildiz.hizli{opacity:.18}

/* --- kart: koyu zemin + gorselin arkasinda renkli hale --- */
.bk{min-height:302px;padding:26px 28px;border-radius:22px;
  border:1px solid rgba(var(--acc),.30);
  background:
    radial-gradient(115% 105% at 76% 78%, rgba(var(--acc),.52), transparent 60%),
    linear-gradient(158deg, rgba(var(--acc),.15), rgba(15,15,18,.97) 58%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
    0 20px 46px -34px rgba(var(--acc),.85)}
.bk:hover{border-color:rgba(var(--acc),.6);
  background:
    radial-gradient(115% 105% at 76% 78%, rgba(var(--acc),.68), transparent 62%),
    linear-gradient(158deg, rgba(var(--acc),.22), rgba(15,15,18,.97) 58%)}

/* perde: referansta yazinin arkasi sadece hafif koyu, biz cok
   koyultmustuk ve kart iki renge bolunmus gibi duruyordu */
.bk::before{background:linear-gradient(96deg,rgba(10,10,13,.72) 0%,
  rgba(10,10,13,.34) 42%,transparent 66%)}

/* sanat: BUYUK ve tasan - referansin en belirgin ozelligi */
.bk .sanat{right:-26px;bottom:-26px;width:300px;height:300px;
  filter:drop-shadow(0 0 42px rgba(var(--acc),.55))
         drop-shadow(0 18px 26px rgba(0,0,0,.8))}
.bk .sanat[src$=".svg"]{right:-6px;bottom:6px;width:238px;height:238px}
.bk.genis{min-height:212px}
.bk.genis .sanat{right:34px;bottom:-30px;width:300px;height:300px}

/* rozet SAG USTTE */
.bk .rozet{position:absolute;top:22px;right:22px;z-index:3}
.bk.genis .rozet{top:24px;right:26px}

/* baslik ustte, alt yazi EN ALTTA */
.bk .bas{font-size:clamp(30px,3.4vw,40px);max-width:66%}
.bk .dip{margin-top:auto;max-width:64%}
.bk .alt{max-width:100%;font-size:14.5px;line-height:1.45;
  color:rgba(255,255,255,.78)}

/* --- IP cubugu: referanstaki gibi solda kopya simgesi --- */
.ipbar{gap:10px;background:rgba(17,17,21,.92);
  border-color:rgba(255,255,255,.10)}
/* Kopya simgesi: CSS kacisi (9C9) sondaki bosluk olmadan
   "9C9" diye duz metin basiyordu. Karakterin kendisi yazildi. */
.ipbar::before{content:"⧉";font-size:16px;line-height:1;
  color:rgba(255,255,255,.55)}
.ipbar:hover{border-color:rgba(var(--mavi-rgb,59,130,246),.55)}

/* --- logo karti: referansta duz koyu, mor yikama yok --- */
.bk.logo{--acc:99,102,241;
  background:radial-gradient(80% 80% at 50% 45%,rgba(99,102,241,.30),
    rgba(15,15,18,.97) 70%)}
.bk.logo img{width:104px;height:104px}

/* --- sayac karti --- */
.bk.sayac{background:radial-gradient(85% 85% at 50% 42%,
  rgba(52,211,153,.28),rgba(15,15,18,.97) 72%)}

/* --- alt cubuk --- */
.cubuk{background:rgba(17,17,21,.92);border-color:rgba(var(--acc),.32)}
.cubuk:hover{background:rgba(var(--acc),.18)}

/* --- hosgeldin yazisi: referansta boyle bir baslik YOK. Sahibin
       istegiyle duruyor ama artik kucuk ve solda, izgaranin ustunde
       ince bir satir. --- */
.hosgeldin{text-align:left;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.55;margin:2px 0 12px}


/* ==================================================================
   REFERANSIN KOMPOZISYONU  (8 Eylul, ucuncu tur)

   Sahip: "her ayrintisini home'a ayni yap, bizimki YAPAY ZEKA GIBI
   DURUYOR". Referansi tekrar okudum, sahte duran seyler sunlardi:

     - Kartlarda duz vektor ikon vardi. Referansta GERCEK OYUNCU
       RENDER'I var - kartin en buyuk ogesi o. Artik bizde de var:
       mc-heads'ten sunucunun KENDI oyuncularinin skinleri cekildi
       (Steve'e dusenler elendi), assets/kisi/r_*.png olarak yerel
       duruyor - her acilista disaridan istek atilmiyor.
     - Referansta kartta IKI obje var (karakter + esya/ikon). Tek
       ikonlu kart yapay duruyordu; sahibin gonderdigi ikonlar
       KALDI, karakterin yanina kondu.
     - Metinler pazarlama cumlesiydi. Referansta SAYI var
       ("35.000+ uye", "588.959 kayit"). Bizimkiler de artik gercek
       sayi: 7 rutbe, 8 spawner, 5 kasa, 12 rol - config.js'ten
       sayildi, uydurma degil.
   ================================================================== */

/* karakter render'i: kartin en buyuk ogesi, kenardan tasiyor */
.bk .sanat{right:-22px;bottom:-34px;width:268px;height:auto;
  max-height:none;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 0 46px rgba(var(--acc),.5))
         drop-shadow(0 20px 26px rgba(0,0,0,.85))}
/* ikinci obje: karakterin arkasinda, biraz solunda */
.bk .sanat2{position:absolute;right:186px;bottom:16px;width:132px;height:132px;
  object-fit:contain;pointer-events:none;z-index:1;opacity:.96;
  filter:drop-shadow(0 0 26px rgba(var(--acc),.55))
         drop-shadow(0 10px 16px rgba(0,0,0,.7))}
.bk .sanat{z-index:2}
.bk::before{z-index:2}
.bk > *:not(.sanat):not(.sanat2){z-index:3}

.bk.genis .sanat{right:26px;bottom:-38px;width:250px}
.bk.genis .sanat2{right:290px;bottom:26px;width:230px;height:112px}

/* Discord logosu karakter degil - kendi olcusunde dursun */
.bk .sanat[src$=".svg"]{right:150px;bottom:26px;width:170px;height:170px}

@media(max-width:1000px){
  .bk .sanat2{right:150px;width:104px;height:104px}
  .bk .sanat{width:220px}
}
@media(max-width:640px){
  .bk .sanat2{display:none}
  .bk .sanat{width:190px;right:-14px;bottom:-22px}
  .bk .bas,.bk .dip{max-width:100%}
}


/* --- RENDER OLCEGI DUZELTMESI (8 Eylul) ---
   mc-heads render'lari 600x1200, yani 1:2. Genislikten olceklemistim
   (268px), boyu 536 oluyordu ve 302 piksellik karttan tasip ortadan
   KIRPILIYORDU - ekranda sadece govde parcasi goruluyordu.
   Artik YUKSEKLIKTEN olcekleniyor: karakter kartin icine tam oturuyor.
   Ikinci obje (ikon) sadece GENIS kartta duruyor; uc sutunlu kartlarda
   karakterle yan yana yer kalmiyordu, yazi 100 piksele sikisiyordu. */
.bk .sanat{height:272px;width:auto;right:2px;bottom:-16px;
  max-width:none}
.bk .sanat2{display:none}
.bk.genis .sanat{height:236px;width:auto;right:34px;bottom:-20px}
.bk.genis .sanat2{display:block;right:186px;bottom:44px;width:216px;height:104px}
/* Discord: karakter degil, sahibin altin logosu - kendi olcusu */
.bk .sanat[src$=".svg"]{height:auto;width:186px;right:14px;bottom:24px}
.bk .bas{max-width:62%}
.bk .dip{max-width:58%}
.bk.genis .bas,.bk.genis .dip{max-width:56%}
@media(max-width:1000px){
  .bk .sanat{height:230px}
  .bk.genis .sanat2{display:none}
}
@media(max-width:640px){
  .bk .sanat{height:186px;right:-8px}
  .bk .bas,.bk .dip{max-width:100%}
}


/* --- son rotus: GENIS kartta karakterin KAFASI kesiliyordu ---
   Kart 212 piksel, render 236'ydi; ustten tasan kisim kirpiliyor ve
   rozetle cakisiyordu. Boy karta gore kuculdu, rozet biraz sola alindi.
   Ana kartlarda karakter biraz buyutuldu - referansta kartin en
   baskin ogesi o. */
.bk .sanat{height:286px;bottom:-20px;right:0}
.bk.genis .sanat{height:192px;bottom:-12px;right:44px}
.bk.genis .rozet{right:auto;left:calc(100% - 300px);top:22px}
.bk.genis .sanat2{right:214px;bottom:52px;width:200px;height:96px}
@media(max-width:1000px){.bk .sanat{height:236px}}
@media(max-width:640px){.bk .sanat{height:190px}
  .bk.genis .rozet{left:auto;right:20px}}


/* --- Discord kartindaki CANLI uye sayisi ---
   Referansta "35.000+" boyle buyuk duruyordu; bizde de basligin
   hemen altinda. Sayi gelmezse eleman hidden kaliyor. */
.bk .rakam2{font-size:clamp(28px,3vw,38px);font-weight:900;
  letter-spacing:-1px;line-height:1;color:#fff;margin-top:8px;
  text-shadow:0 2px 20px rgba(var(--acc),.7)}
.bk .rakam2[hidden]{display:none}


/* ==================================================================
   ZEMIN VE KART ARKA PLANI - REFERANSA GORE  (8 Eylul, dorduncu tur)

   Sahip: "hala ai ya benziyor, bi fotoya bi daha bak, arka plan ve
   kutularin arka plani icin". Referansi buyutup baktim, iki fark:

   1) ZEMIN. Onlarinki DUZ ve NOTR koyu gri (~#1a1a1a). Bizimki
      mavimsi (#0E0E11) ve uzerinde yildiz alani vardi. Yildizlar
      guzeldi ama her karta bir doku katiyor ve "uretilmis" hissi
      veren seylerden biri buydu. Ana sayfada tamamen kapatildi;
      dosyadan SILMEDIM, diger yerlerde duruyor ve geri acmak tek
      satir.

   2) KART ARKA PLANI. Bizde renk butun karti yikiyordu ve doygundu.
      Referansta kart KOYU GRI; renk sadece SAG ALTTA, karakterin
      arkasinda soluk bir hale ve kartin ortasina varmadan bitiyor.
      Kenarlik da renkli degil, cok soluk beyaz. Renkli golge (glow)
      tamamen kalkti - neon gorunumun asil kaynagi oydu.

   3) ORTA KARTLAR (logo, sayac, IP cubugu, alt cubuk) referansta
      HIC renkli degil, duz gri. Oyle yapildi.
   ================================================================== */
body{background:#1A1A1C}
.bulut{display:none}
.yildiz{display:none}

.bk{border:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(74% 82% at 76% 86%, rgba(var(--acc),.40), transparent 64%),
    #1E1E21;
  box-shadow:none}
.bk:hover{border-color:rgba(255,255,255,.15);
  background:
    radial-gradient(74% 82% at 76% 86%, rgba(var(--acc),.52), transparent 66%),
    #212126;
  box-shadow:none}
.bk.genis{background:
    radial-gradient(52% 130% at 80% 92%, rgba(var(--acc),.40), transparent 62%),
    #1E1E21}
.bk.genis:hover{background:
    radial-gradient(52% 130% at 80% 92%, rgba(var(--acc),.52), transparent 64%),
    #212126}

/* Perde artik gereksiz: kartin sol yarisi zaten duz koyu gri.
   Guclu perde kartlari iki renge bolmus gibi gosteriyordu. */
.bk::before{background:linear-gradient(96deg,rgba(20,20,22,.55) 0%,
  rgba(20,20,22,.18) 40%,transparent 62%)}

/* Karakterin arkasindaki renkli parlama da yumusatildi - keskin neon
   halka yapay duruyordu. */
.bk .sanat{filter:drop-shadow(0 0 30px rgba(var(--acc),.30))
  drop-shadow(0 16px 24px rgba(0,0,0,.75))}
.bk .sanat2{filter:drop-shadow(0 8px 14px rgba(0,0,0,.7))}

/* Orta sutun: referansta renksiz */
.bk.logo{background:#1E1E21;border-color:rgba(255,255,255,.07)}
.bk.logo img{filter:drop-shadow(0 0 26px rgba(120,130,255,.45))}
.bk.sayac{background:#1E1E21;border-color:rgba(255,255,255,.07)}
.bk.sayac .rakam{text-shadow:0 2px 18px rgba(52,211,153,.45)}
.ipbar{background:#1E1E21;border-color:rgba(255,255,255,.07)}
.ipbar:hover{border-color:rgba(255,255,255,.18)}
.cubuk{background:#1E1E21;border-color:rgba(255,255,255,.07);
  color:rgba(255,255,255,.9)}
.cubuk:hover{background:#25252A;border-color:rgba(255,255,255,.18)}

/* rozet: renkli dolgu yerine soluk cam - referanstakiyle ayni */
.bk .rozet{background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.92)}

/* baslik golgesi de sakinlestirildi */
.bk .bas{text-shadow:0 2px 10px rgba(0,0,0,.7)}
.bk .rakam2{text-shadow:0 2px 10px rgba(0,0,0,.7)}

/* dip bilgi ve owner cubugu da notr zemine otursun */
.dipnet{border-top-color:rgba(255,255,255,.08)}


/* --- son rotus: NOTR kalan son yerler ---
   Ust cubuk, owner cubugu ve hosgeldin satiri hala lacivertti;
   referansta hepsi sayfayla ayni notr gri. Kart halesi de biraz
   genisletildi - referansta renk kartin yarisina kadar geliyor,
   bizde kosede kalmisti. */
.nav{background:rgba(26,26,28,.86);border-bottom-color:rgba(255,255,255,.07)}
.hosgeldin{color:rgba(255,255,255,.42)}
.hosgeldin .imlec{background:rgba(255,255,255,.42)}

.owner-bar{background:#1E1E21;border:1px solid rgba(255,255,255,.07);
  box-shadow:none}
.owner-bar:hover{background:#232328;border-color:rgba(255,255,255,.15)}

.bk{background:
    radial-gradient(88% 96% at 74% 84%, rgba(var(--acc),.46), transparent 68%),
    #1E1E21}
.bk:hover{background:
    radial-gradient(88% 96% at 74% 84%, rgba(var(--acc),.58), transparent 70%),
    #212126}
.bk.genis{background:
    radial-gradient(60% 150% at 78% 92%, rgba(var(--acc),.46), transparent 66%),
    #1E1E21}
.bk.genis:hover{background:
    radial-gradient(60% 150% at 78% 92%, rgba(var(--acc),.58), transparent 68%),
    #212126}


/* ==================================================================
   OLCULER - REFERANSTAN OLCULDU  (8 Eylul, besinci tur)

   Sahip "daha benzer yapmaya calis" dedi. Gorseli piksel piksel
   olctum, kalan uc yapisal fark suydu:

   1) GENISLIK. Referansta izgara 1920 piksellik ekranda ~1010 piksel,
      yani ekranin yarisi kadar; iki yanda genis bosluk var ve kart
      obegi ortada duruyor. Bizimki 1240'ti ve ekrani dolduruyordu -
      "kurumsal site" hissi buradan geliyordu.

   2) SATIR YUKSEKLIKLERI ESIT DEGIL. Olctugum degerler:
        1. satir  ~300 px
        2. satir  ~205 px
        3. satir  ~130 px
      Asagi indikce alcaliyor. Bento duzenini "duzenli kutu izgarasi"
      olmaktan cikaran sey bu ritim. Bizde uc satir da 302'ydi.

   3) KOSE YARICAPI. Onlarda ~15 px, bizde 22 - fazla yuvarlak
      kartlar oyuncu sitesinden cok uygulama arayuzu gibi duruyordu.
   ================================================================== */
main.ic{max-width:1060px}
.bento{gap:14px}
.bk{border-radius:15px}
.ipbar,.cubuk{border-radius:13px}

/* 1. satir */
.bento > *:nth-child(1) .bk, .bento > *:nth-child(1),
.bento > *:nth-child(2) .bk,
.bento > *:nth-child(3) .bk, .bento > *:nth-child(3){min-height:300px}
.bento > *:nth-child(2){min-height:300px}
.bento > *:nth-child(2) .bk{min-height:0}

/* 2. satir - daha kisa */
.bento > *:nth-child(4), .bento > *:nth-child(6){min-height:205px}
.bento > *:nth-child(5){min-height:205px}
.bento > *:nth-child(5) .bk{min-height:0}

/* 3. satir - en kisa */
.bk.genis{min-height:138px;padding:20px 24px}

/* olculer degisince sanat da kucultuldu */
.bento > *:nth-child(1) .sanat,
.bento > *:nth-child(3) .sanat{height:284px;bottom:-18px}
.bento > *:nth-child(4) .sanat,
.bento > *:nth-child(6) .sanat{height:196px;bottom:-14px}
.bk.genis .sanat{height:150px;bottom:-16px;right:40px}
.bk.genis .sanat2{right:196px;bottom:30px;width:150px;height:74px}
.bk .sanat[src$=".svg"]{width:150px;height:auto;right:16px;bottom:12px}

/* kisa kartlarda baslik ve yazi da olculu */
.bento > *:nth-child(4) .bas,
.bento > *:nth-child(6) .bas{font-size:clamp(24px,2.6vw,30px)}
.bk.genis .bas{font-size:clamp(24px,2.8vw,32px)}
.bk.genis .dip{max-width:52%}
.bk .rakam2{font-size:26px;margin-top:4px}

/* orta sutundaki kisa kartlar */
.bk.logo img{width:88px;height:88px}
.bk.sayac .rakam{font-size:clamp(30px,3.4vw,40px)}


/* ==================================================================
   UC DUZELTME  (8 Eylul, altinci tur) - sahibin isaret ettikleri

   1) RANKS KARTI HEDEFTEN YUKSEKTI. 138 istemistim, 185 cikti:
      alt yazi iki satira kayip karti uzatiyordu. Yazi kisaltildi
      (index.html), genislik acildi ve dolgu azaltildi.

   2) ROZET KARAKTERIN KAFASIYLA CAKISIYORDU. Sebep: karakterin
      tepesi kartin 34. pikselindeydi, rozet ise 22-48 arasinda.
      Referansta karakterin kafasi rozetin ALTINDAN basliyor. Render
      boyu kucultuldu, boylece tepe noktasi rozetin altina indi.

   3) ORTADAKI LOGO KARTI BOSTU. Amblem 88 pikseldi; referansta
      amblem kartin icinde belirgin bir yer kapliyor. 124 yapildi.
   ================================================================== */

/* 1 - genis kart */
.bk.genis{min-height:132px;padding:18px 24px}
.bk.genis .dip{max-width:74%}
.bk.genis .bas{font-size:clamp(23px,2.6vw,30px);max-width:74%}
.bk.genis .sanat{height:126px;bottom:-10px;right:34px}
.bk.genis .sanat2{right:170px;bottom:26px;width:136px;height:66px}

/* 2 - karakterin tepesi rozetin ALTINDA kalsin */
.bento > *:nth-child(1) .sanat,
.bento > *:nth-child(3) .sanat{height:248px;bottom:-16px;right:12px}
.bento > *:nth-child(4) .sanat,
.bento > *:nth-child(6) .sanat{height:166px;bottom:-12px;right:12px}
.bk .rozet{z-index:5}

/* 3 - logo karti */
.bk.logo img{width:124px;height:124px}


/* ==================================================================
   YAZI/SANAT CAKISMASI  (8 Eylul, yedinci tur)

   Sahibin isaret ettigi iki yer. Sebep ikisinde de ayni: kart ~344
   piksel genisliginde, sanat sag kenardan ~124 piksel yer kapliyor,
   ama yazi genisligi %58'e (200 px) ayarliydi - yani yazi sanatin
   basladigi yerin OTESINE gecebiliyordu.

   1) STORE: alt yazi iki satira kayinca karakterin uzerine biniyordu.
      Yazi genisligi %52'ye cekildi ve metinden "shards" cikarildi
      (zaten magazada goruluyor).

   2) DISCORD: oradaki sanat karakter degil, kare bir amblem - yani
      alt kenari boyunca genis. Digerlerinde karakter ince oldugu icin
      sorun cikmiyordu. Amblem kucultulup sag alt koseye itildi.
   ================================================================== */
.bk .dip{max-width:52%}
.bk .bas{max-width:58%}
.bk.genis .dip{max-width:74%}
.bk.genis .bas{max-width:74%}

/* Discord amblemi: daha kucuk ve tam sag alt kosede */
.bk .sanat[src$=".svg"]{width:126px;height:auto;right:6px;bottom:-4px}


/* ==================================================================
   N HARFI  (8 Eylul) - sahibin kendi tasarimi

   "Home artik kendimize ait olacak: ucgenlerden bir N, icinde kucuk
   ucgenler sus olarak, buyuk ucgenler de su anki kutular."

   Olcu: harf 900x780 birimlik bir viewBox'ta duruyor ve ekranda en
   fazla 600 piksel genisliyor - "asiri buyuk olmasin, kucuk de
   olmasin" dendigi icin. Yukseklik oranla ~520 piksel.
   ================================================================== */
.nharf{display:flex;justify-content:center;margin:2px 0 22px}
.nsvg{width:100%;max-width:600px;height:auto;overflow:visible}

.ucgen{cursor:pointer}
.ucgen .yuz{transition:filter .2s ease}
.ucgen .sus{pointer-events:none}
.ucgen .kenar{fill:none;stroke:rgba(255,255,255,.20);stroke-width:2.5;
  stroke-linejoin:round;transition:stroke .2s ease}
/* Yazi ucgenin uzerinde duruyor; ince bir dis cizgi her renkte
   okunur kalmasini sagliyor (paint-order sart, yoksa cizgi yazinin
   ustune biner). */
.ucgen .ad{fill:#fff;font-family:var(--px);font-weight:900;font-size:34px;
  letter-spacing:.02em;paint-order:stroke;stroke:rgba(6,8,14,.55);
  stroke-width:5;pointer-events:none}
.ucgen .alt{fill:rgba(255,255,255,.78);font-family:var(--sans);
  font-size:15px;font-weight:700;paint-order:stroke;
  stroke:rgba(6,8,14,.5);stroke-width:4;pointer-events:none}
.ucgen:hover .kenar{stroke:#fff}
.ucgen:hover .yuz{filter:brightness(1.2) saturate(1.1)}
.ucgen:focus-visible .kenar{stroke:#fff;stroke-width:4}

/* --- harfin altindaki ince serit --- */
.nbar{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:0 0 26px}
.nbar .ipbar{flex:0 1 320px}
.nbar .cip{display:flex;align-items:center;gap:9px;padding:14px 18px;
  border:1px solid rgba(255,255,255,.07);border-radius:13px;
  background:#1E1E21;text-decoration:none;color:var(--yazi2);
  font-size:13.5px;font-weight:700;transition:border-color .2s}
.nbar .cip:hover{border-color:rgba(255,255,255,.18)}
.nbar .cip b{color:#fff;font-size:16px;font-weight:900}
.nbar .cip img{width:19px;height:19px}
.nbar .cip .nokta{width:9px;height:9px;border-radius:50%;background:#64748b}
.nbar .cip .nokta.on{background:#34d399;animation:nb-nabiz 2s infinite}

@media(max-width:640px){
  .nsvg{max-width:400px}
  .ucgen .ad{font-size:40px}
  .ucgen .alt{font-size:17px}
  .nbar{flex-direction:column;align-items:stretch}
}

/* Ucgenler iceri cekilince dikis olustu; kenar cizgisi de belirginlesti
   ki parcalar tek blok gibi durmasin. */
.ucgen .kenar{stroke:rgba(255,255,255,.30);stroke-width:3}
.ucgen:hover .kenar{stroke:#fff;stroke-width:4}


/* --- IC ICE UCGENLER  (8 Eylul, ikinci tasarim) ---
   Sahip: "icine aynisi gibi sadece boyuta gore olceklendirilmis
   istedim" + "kucuk ucgenler yok". Onceki desen genel bir doseme idi
   ve neredeyse gorunmuyordu. Artik her ucgenin KENDI kopyalari
   iciçe duruyor ve gorunur kalinlikta. Ice dogru gittikce soluyor -
   derinlik hissi veriyor, duz halka yigini gibi durmuyor. */
.ucgen .ic{fill:none;stroke-linejoin:round;pointer-events:none;
  transition:stroke .2s ease}
.ucgen .ic1{stroke:rgba(255,255,255,.42);stroke-width:3}
.ucgen .ic2{stroke:rgba(255,255,255,.30);stroke-width:2.6}
.ucgen .ic3{stroke:rgba(255,255,255,.20);stroke-width:2.2}
.ucgen .ic4{stroke:rgba(255,255,255,.13);stroke-width:2}
.ucgen:hover .ic1{stroke:rgba(255,255,255,.75)}
.ucgen:hover .ic2{stroke:rgba(255,255,255,.55)}
.ucgen:hover .ic3{stroke:rgba(255,255,255,.38)}
.ucgen:hover .ic4{stroke:rgba(255,255,255,.26)}

/* Harf dikleşti: genislik yerine YUKSEKLIK sinirlaniyor, boylece
   ekranda hep ayni boyda duruyor. */
.nsvg{max-width:470px}
@media(max-width:640px){.nsvg{max-width:330px}}


/* ==================================================================
   ZEMIN BIRAZ ACILDI + KARAKTERLER HAREKET EDIYOR  (8 Eylul)

   Sahip: "site fazla koyu, azcik acabiliriz" ve "su kutularin
   icindeki karakterleri hareket ettir".

   ZEMIN: #1A1A1C -> #212127. Referanstaki notr koyu gri korunuyor,
   sadece iki kademe aciliyor; kart zeminleri de ayni oranda.

   HAREKET: sadece KARAKTER suzuluyor, kutu degil. Sahip daha once
   "kutular oynamasin" demisti - o kural duruyor, kartin kendisi
   sabit. Her karta farkli gecikme verildi, yoksa altisi ayni anda
   inip kalkiyor ve dalga gibi degil, tik gibi duruyor.
   Hareketi azaltmayi seçen isletim sistemlerinde animasyon kapali. */
body{background:#212127}
.bk{background:
    radial-gradient(88% 96% at 74% 84%, rgba(var(--acc),.46), transparent 68%),
    #26262C}
.bk:hover{background:
    radial-gradient(88% 96% at 74% 84%, rgba(var(--acc),.58), transparent 70%),
    #2A2A31}
.bk.genis{background:
    radial-gradient(60% 150% at 78% 92%, rgba(var(--acc),.46), transparent 66%),
    #26262C}
.bk.genis:hover{background:
    radial-gradient(60% 150% at 78% 92%, rgba(var(--acc),.58), transparent 68%),
    #2A2A31}
.bk.logo,.bk.sayac,.ipbar,.cubuk,.owner-bar{background:#26262C}
.cubuk:hover,.owner-bar:hover{background:#2D2D34}
.nav{background:rgba(33,33,39,.86)}

@keyframes nb-suzul{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-11px)}
}
.bk .sanat{animation:nb-suzul 4.6s ease-in-out infinite}
.bento > *:nth-child(1) .sanat{animation-delay:0s}
.bento > *:nth-child(3) .sanat{animation-delay:-1.1s}
.bento > *:nth-child(4) .sanat{animation-delay:-2.3s;animation-duration:5.2s}
.bento > *:nth-child(6) .sanat{animation-delay:-3.4s;animation-duration:4.2s}
.bk.genis .sanat{animation-delay:-1.8s;animation-duration:5.6s}
/* Uzerine gelince biraz one cikiyor - hareket devam ediyor. */
.bk:hover .sanat{animation-duration:2.6s}

@media(prefers-reduced-motion:reduce){
  .bk .sanat{animation:none}
}