/* ============================================================ NEBULA — SITE TASARIMI, SIFIRDAN (2 Eylul 2026) Neden yeniden yazildi: eski mc.css bir "spawn fotografi + koyu mor panel" temasiydi ve uzerine yamalar bindikce ne mor ne mavi, duz ve okunmasi zor bir sey haline gelmisti. Sahip "siteyi bastan tasarla" dedi; bu dosya eskisinin yamasi degil, yerine gecen yeni sistem. Sahibin verdigi iki referans tarayicidan olculdu: trpvp.club zemin rgb(28,18,21) - panel rgb(44,27,32) - 2px doygun kenarlik, hizli erisim renkli kutular chickensmp zemin rgb(9,9,11) neredeyse siyah - kartlar rgba(255,255,255,.03) cam + ince kenarlik, dev marka yazisi, cok parlak tek vurgu rengi Ortak ders: ZEMIN KOYU KALIR, parlaklik zemini acmaktan degil doygun vurgu renginden ve net kenarliktan gelir. NEBULA'ya ozgu olan kisim: ad zaten "bulutsu". Hero'nun arkasinda kendi cizdigimiz yildiz alani ve mavi bulutsu parlamasi var - iki referansta da olmayan, marka adiyla birebir ortusen imza. SINIF ADLARI KORUNDU: .nav .wrap .sec .card .mcbtn .mcpanel .grid .foot .kutu .sy .et ... diger sayfalar (store, stats, staff, media) bu adlari kullaniyor. Adlari degistirmek o sayfalari sessizce bozardi; hepsi bu dosyayla birlikte yeni gorunume geciyor. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700;800;900&family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root{ /* zemin - neredeyse siyah, hafif lacivert */ /* 6 Eylul: ana sayfa "bento" derisiyle AYNI palete cekildi. Sahip "diger sekmeler duzelmemis" dedi; sinif adlarina hic dokunmadan sadece bu belirtecleri degistirmek butun sayfalari tek seferde yeni gorunume tasiyor. */ /* 6 Eylul: sahip diger sayfalar icin MAVI istedi. Ana sayfa (bento.css) mor kaliyor, bu dosyayla gelen sayfalar mavi. */ --bg:#0B1220; --bg2:#111B2E; /* yuzeyler cam: zemin uzerine beyaz alfa. Sabit renk yerine alfa kullanmak, uzerine gelen fotograf/parlama ile dogru karisiyor. */ /* 6 Eylul: sahip "butun sitede kutularin arka plani siteyle ayni oldugu icin okunmuyor" dedi. Yuzeyler ve kenarlar birer kademe yukseltildi; ayrica beyaz alfa yerine hafif MAVI alfa - zemin lacivert oldugu icin duz beyaz gri bir sis gibi duruyordu. */ --yuzey:rgba(130,175,255,.085); --yuzey2:rgba(130,175,255,.14); --kenar:rgba(147,197,253,.20); --kenar2:rgba(147,197,253,.36); /* mavi - sunucunun ana rengi */ /* 8 Eylul - sahip: "kutulara girince acilan sayfalari da renkli yap". Butun sayfalar bu tek mavi temayi paylasiyordu. Ana renk artik RGB bilesenleriyle de duruyor; her sayfa kendi icinde sadece bu birkac belirteci ezerek bastan asagi kendi rengine geciyor (ana sayfadaki kutusunun rengi). */ --mavi-rgb:59,130,246; --mavi:#3B82F6; --mavi-ac:#60A5FA; --mavi-pr:#93C5FD; --mavi-koyu:#1D4ED8; --camgobegi:#38BDF8; --yazi:#E9F0FB; --yazi2:#A6B8D4; --yazi3:#6D809E; --ok:#34d399; --no:#f87171; --r:18px; --r-sm:12px; --r-xs:9px; --px:'Figtree','Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --sans:'Figtree','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; /* eski sayfalar bu adlari kullaniyor - yeni degerlere baglandi */ --pp:var(--mavi); --pp-lt:var(--mavi-pr); --pp-dk:var(--mavi-koyu); --ink:var(--yazi); --dim:var(--yazi2); --faint:var(--yazi3); --panel:var(--yuzey); --panel2:var(--yuzey); --edge:var(--kenar); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--yazi); font-family:var(--sans);font-size:16px;line-height:1.7; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3{font-family:var(--px);font-weight:700;line-height:1.15;margin:0; letter-spacing:-.02em} .px{font-family:var(--px);font-weight:600} /* "siteyi yatay yap hafif" (6 Eylul): sutun genisledi, bolum yuksekligi azaldi - sayfa daha genis ve daha kisa duruyor. */ .wrap{max-width:1240px;margin:0 auto;padding:0 24px} /* ---------- ust cubuk ---------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(7,10,17,.78); backdrop-filter:blur(16px);border-bottom:1px solid var(--kenar)} .nav .wrap{display:flex;align-items:center;gap:4px;height:66px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:10px;font-family:var(--px); font-size:20px;font-weight:700;letter-spacing:.06em;color:#fff; text-decoration:none;margin-right:auto} .brand img{width:28px;height:28px} .nl{font-size:14px;font-weight:500;letter-spacing:.04em;padding:9px 14px; text-decoration:none;color:var(--yazi2);border-radius:var(--r-xs); transition:.15s} .nl:hover{color:#fff;background:rgba(255,255,255,.06)} .nl.on{color:#fff;background:rgba(var(--mavi-rgb),.18)} /* ---------- butonlar ---------- */ .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(var(--mavi-rgb),.95)} .mcbtn:hover{background:var(--mavi);transform:translateY(-1px); box-shadow:0 16px 34px -16px rgba(var(--mavi-rgb),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} :focus-visible{outline:2px solid var(--mavi-ac);outline-offset:3px} /* ---------- HERO: yildiz alani + bulutsu ---------- */ .hero{position:relative;overflow:hidden;min-height:88vh;display:flex; align-items:center;justify-content:center;text-align:center; border-bottom:1px solid var(--kenar)} #yildiz{position:absolute;inset:0;width:100%;height:100%;z-index:0} .hero-foto{position:absolute;inset:0;z-index:0; background:url('/assets/spawn-heykel.jpg') center/cover no-repeat; opacity:.11;filter:saturate(.55)} /* bulutsu: iki yumusak mavi leke, hafif nefes aliyor */ .hero:before,.hero:after{content:'';position:absolute;z-index:0; border-radius:50%;filter:blur(90px);pointer-events:none} .hero:before{width:620px;height:620px;left:-160px;top:-180px; background:radial-gradient(circle,rgba(var(--mavi-rgb),.36),transparent 68%); animation:nefes 11s ease-in-out infinite} .hero:after{width:560px;height:560px;right:-140px;bottom:-200px; background:radial-gradient(circle,rgba(56,189,248,.26),transparent 68%); animation:nefes 14s ease-in-out infinite reverse} @keyframes nefes{50%{transform:scale(1.16)}} .hero-in{position:relative;z-index:2;padding:96px 22px;max-width:860px} .hero .ust{display:inline-flex;align-items:center;gap:8px; font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--mavi-pr);background:rgba(var(--mavi-rgb),.12); border:1px solid rgba(var(--mavi-rgb),.34);border-radius:999px; padding:7px 16px;margin-bottom:26px} /* Gradyan eskiden harflerin ALTINI koyu maviye (#3b82f6) indiriyordu ve arkadaki fotografla ayni tonda kaliyordu - ad okunmuyordu. Artik en koyu nokta acik mavi; ayrica harflerin arkasina koyu bir parlama koyuldu, fotografin uzerinde her zaman ayrisiyor. */ .hero h1{font-size:clamp(58px,12vw,140px);font-weight:700;letter-spacing:-.045em; margin:0 0 14px;line-height:.92;position:relative; background:linear-gradient(180deg,#ffffff 0%,#eaf3ff 42%,#9fcaff 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 3px 10px rgba(0,0,0,.85)) drop-shadow(0 10px 46px rgba(var(--mavi-rgb),.45))} .hero .slogan{font-size:clamp(16px,2.1vw,19px);color:#c8d8f2;margin:0 auto 26px; max-width:560px} /* surum/ozellik rozetleri */ .cipler{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:32px} .cip{font-size:13px;font-weight:600;color:var(--yazi2); background:var(--yuzey);border:1px solid var(--kenar); border-radius:999px;padding:7px 15px} .cip b{color:#fff;font-weight:700} /* IP kapsulu */ .ipbox{display:inline-flex;align-items:stretch;border-radius:var(--r-sm); overflow:hidden;margin:0 0 18px;border:1px solid rgba(var(--mavi-rgb),.5); box-shadow:0 14px 40px -20px rgba(0,0,0,.95)} .ipbox code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:clamp(16px,2.4vw,21px);font-weight:600;color:#fff; letter-spacing:.02em;background:rgba(7,10,17,.86);padding:15px 22px; display:flex;align-items:center;backdrop-filter:blur(6px)} .ipbox button{font-family:var(--sans);font-size:14px;font-weight:600; padding:15px 22px;border:0;background:var(--mavi-koyu);color:#fff; cursor:pointer;transition:background .15s} .ipbox button:hover{background:var(--mavi)} /* canli sayac hapi */ .canli{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%; margin:0 auto 30px;padding:9px 18px;border-radius:999px; background:var(--yuzey);border:1px solid var(--kenar); font-family:var(--px);font-weight:600;white-space:nowrap} .canli-nokta{width:9px;height:9px;border-radius:50%;flex:none;background:var(--yazi3)} .canli.acik .canli-nokta{background:var(--ok); box-shadow:0 0 0 4px rgba(52,211,153,.18);animation:atim 2.4s ease-in-out infinite} .canli.kapali .canli-nokta{background:var(--no)} @keyframes atim{50%{box-shadow:0 0 0 9px rgba(52,211,153,0)}} .canli-say{font-size:16px} .canli-et{font-family:var(--sans);font-size:11.5px;font-weight:600; letter-spacing:.14em;color:var(--yazi2)} .hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .kaydir{position:absolute;bottom:26px;left:50%;transform:translateX(-50%); z-index:2;font-size:11px;letter-spacing:.28em;color:var(--yazi3); animation:zipla 2.2s ease-in-out infinite} @keyframes zipla{50%{transform:translate(-50%,7px)}} /* ---------- canli sayi seridi ---------- */ .serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px;background:var(--kenar);border-bottom:1px solid var(--kenar)} .serit .kutu{background:var(--bg);padding:26px 20px;text-align:center} .serit .sy{font-family:var(--px);font-size:clamp(26px,3.4vw,36px);font-weight:700; color:#fff;line-height:1;letter-spacing:-.02em} .serit .et{font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--yazi3);margin-top:9px} /* ---------- bolumler ---------- */ .sec{padding:56px 0;position:relative} .sec.alt{background:var(--bg2);border-block:1px solid var(--kenar)} .sec h2{font-size:clamp(26px,3.6vw,40px);margin:0 0 10px;color:#fff; font-family:var(--px);letter-spacing:-.01em} .sec h2::after{content:"";display:block;width:46px;height:3px;margin-top:12px; border-radius:2px;background:linear-gradient(90deg,var(--mavi),var(--camgobegi))} .sec .lead{color:var(--yazi2);margin:0 0 28px;font-size:16.5px;max-width:70ch} .bas-et{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--mavi-ac);margin:0 0 10px} .grid{display:grid;gap:18px;align-items:stretch} .g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(236px,1fr))} /* ---------- kartlar (cam) ---------- */ /* Kart cilasi (6 Eylul): duz yuzey yerine ustten hafif isik alan bir yuzey; ana sayfadaki kart diliyle ayni his. */ .card,.mcpanel{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022)); border:1px solid var(--kenar); border-radius:var(--r);padding:26px; transition:border-color .16s,transform .16s,background .16s} .mcpanel{display:flex;flex-direction:column} /* 6 Eylul - kartlarin uc sorunu vardi: 1. Farkli yukseklikteydiler, satir dagilmis gorunuyordu. 2. "GET IT" dugmesi metnin bittigi yerde kaliyordu, hizalanmiyordu. 3. Her rutbenin kendi rengi (--acc) sadece basligi boyuyordu, kartlar birbirinin ayni gorunuyordu. Ucu de burada: flex sutun + son blogu asagi it + ustte renk seridi. */ .card{display:flex;flex-direction:column;position:relative;overflow:hidden} .card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--acc,var(--mavi)),transparent 72%)} /* Dugme blogu HEP altta. Onceden markup'ta satir ici style="margin-top:18px" vardi ve satir ici stil kural ezdigi icin dugmeler hizalanmiyordu; markup .kart-alt sinifina cevrildi. */ .card > div:last-child{margin-top:auto} .card > .kart-alt{margin-top:auto;padding-top:18px} .card h3{text-transform:uppercase;letter-spacing:.08em;font-weight:800; font-family:var(--px)} .card:hover{border-color:var(--acc,var(--mavi-ac));transform:translateY(-3px); background:var(--yuzey2)} .card h3{font-size:17px;margin:0 0 10px;color:var(--acc,var(--mavi-pr))} .card p{margin:0;color:var(--yazi2);font-size:15px} .card ul{list-style:none;padding:0;margin:14px 0 0;font-size:14.5px; color:#c2d3ee;line-height:1.95} .card ul li:before{content:'';display:inline-block;width:5px;height:5px; border-radius:50%;background:var(--acc,var(--mavi));margin-right:10px; vertical-align:middle} .price{font-family:var(--px);font-size:34px;font-weight:700;color:#fff; letter-spacing:-.02em;margin:16px 0 2px} .price-s{font-size:13px;color:var(--yazi3);margin:0 0 4px} /* ---------- mod kartlari (fotografli) ---------- */ .modlar{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .mod{position:relative;overflow:hidden;border-radius:var(--r);min-height:250px; display:flex;flex-direction:column;justify-content:flex-end;padding:24px; border:1px solid var(--kenar);text-decoration:none; transition:transform .2s,border-color .2s,box-shadow .2s} .mod:hover{transform:translateY(-5px);border-color:var(--mc,var(--mavi)); box-shadow:0 26px 54px -30px var(--mc,var(--mavi))} .mod-foto{position:absolute;inset:0;background-size:cover;background-position:center; transition:transform .5s} .mod:hover .mod-foto{transform:scale(1.06)} .mod-foto:after{content:'';position:absolute;inset:0;background:linear-gradient( 180deg,rgba(7,10,17,.22) 0%,rgba(7,10,17,.68) 52%,rgba(7,10,17,.96) 100%)} .mod-ic{position:relative;z-index:1} .mod .rozet{position:absolute;top:20px;left:20px;z-index:1;font-size:10.5px; font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff; background:var(--mc,var(--mavi-koyu));padding:5px 12px;border-radius:999px} .mod h3{font-size:21px;color:#fff;margin:0 0 6px} .mod p{margin:0;color:#cbd9ef;font-size:14px;line-height:1.55} /* ---------- adimlar ---------- */ .adimlar{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); counter-reset:ad} .adim-k{position:relative;background:var(--yuzey);border:1px solid var(--kenar); border-radius:var(--r);padding:28px 26px 26px} .adim-k:before{counter-increment:ad;content:counter(ad); font-family:var(--px);font-size:13px;font-weight:700;color:#fff; width:30px;height:30px;border-radius:50%;background:var(--mavi-koyu); display:flex;align-items:center;justify-content:center;margin-bottom:16px} .adim-k h3{font-size:17px;color:#fff;margin:0 0 8px} .adim-k p{margin:0;color:var(--yazi2);font-size:15px} .adim-k code{background:rgba(0,0,0,.5);border:1px solid var(--kenar); padding:2px 8px;border-radius:6px;font-family:ui-monospace,Consolas,monospace; font-size:13.5px;color:#fff} /* ---------- kasa seridi ---------- */ .kasalar-serit{display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .ks{position:relative;border-radius:var(--r-sm);overflow:hidden; border:1px solid var(--kenar);aspect-ratio:4/3; transition:transform .2s,border-color .2s} .ks:hover{transform:translateY(-4px);border-color:var(--kc,var(--mavi))} .ks-foto{position:absolute;inset:0;background-size:cover;background-position:center 35%} .ks-foto:after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(7,10,17,.1),rgba(7,10,17,.92))} .ks-alt{position:absolute;left:0;right:0;bottom:0;padding:14px} .ks-ad{font-family:var(--px);font-weight:700;font-size:15px;color:var(--kc,#fff)} .ks-fi{font-size:12.5px;color:#cbd9ef;margin-top:2px} /* ---------- galeri ---------- */ .galeri{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .g-kart{margin:0;position:relative;overflow:hidden;border-radius:var(--r); border:1px solid var(--kenar);background:var(--yuzey)} .g-kart img{width:100%;height:210px;object-fit:cover;transition:transform .35s} .g-kart:hover img{transform:scale(1.05)} .g-kart figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 15px 12px; font-family:var(--px);font-size:13px;font-weight:600;letter-spacing:.05em;color:#fff; background:linear-gradient(to top,rgba(7,10,17,.94),transparent)} /* ---------- form ---------- */ .f{margin:0 0 20px} .f label{display:block;font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--mavi-pr);margin:0 0 9px} .f input,.f textarea{width:100%;background:var(--yuzey); border:1px solid var(--kenar);border-radius:var(--r-sm);padding:13px 15px; color:#fff;font-size:15.5px;font-family:var(--sans);transition:.15s} .f input::placeholder,.f textarea::placeholder{color:var(--yazi3)} .f input:focus,.f textarea:focus{outline:none;border-color:var(--mavi); background:rgba(var(--mavi-rgb),.08)} .f textarea{min-height:140px;resize:vertical} .pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px} /* 6 Eylul: