/* ===========================================================================
Rex 2
Sicak, koyu, ates temelli. Ilk deneme soguk mavi bir dag manzarasiydi ve
yanlis yondu: bu turun siteleri kirmiziya calan siyah zemin, altin baslik
ve ates vurgusu uzerine kurulu - logonun kendisi de oyle.
Bolum gorselleri HENUZ YOK. Bos yuva HIC CIZILMIYOR - poster_slot()
(index.php) dosya yoksa false donuyor ve bolum tek sutuna dusuyor (.split.tek).
Dosya konuldugu an kendiliginden yerine geciyor, kod degismiyor.
Logo dosyalari (web-source/resize_logo.ps1 uretir):
logo-full.png 1536px arsiv, web koku DISINDA
logo.png 560px hero
logo-sm.png 300px ust bar
favicon.png 64px sekme
=========================================================================== */
:root {
/* zemin - kirmiziya calan siyah */
--ink-900: #060201;
--ink-800: #0E0503;
--ink-700: #170907;
--ink-600: #24100B;
--line: #3A1A10;
--line-soft: #24100B;
/* ates */
--ember-deep: #460E0A;
--ember: #912315;
--flame: #C2371C;
--flame-lit: #E8622A;
/* altin */
--gold: #DAB06A;
--gold-lit: #F1CF83;
--gold-deep: #8A6428;
/* metin */
--text: #F0D9B6;
--text-dim: #BDA98D;
--text-faint: #8A7660;
--wrap: 1200px;
--radius: 10px;
--glass: rgba(36, 16, 11, .5);
--glass-line: rgba(218, 176, 106, .16);
--glass-lit: rgba(218, 176, 106, .42);
/* --- yuzey sistemi -------------------------------------------------------
Site "bombos, sadece siyah" duruyordu. Sebep arka plan degildi - referans
sitenin arka plani da duz siyah. Fark YUZEYLERDE: onlarin her bileseninde
gradyan, ince altin kenarlik ve cift golge var, bizimkiler duz renkti.
Uc degisken her yerde birlikte kullaniliyor:
--surface duz renk yerine egik gradyan (ustten isik alan bir yuzey)
--edge ince altin kenarlik
--lift CIFT golge: koyu olan derinlik verir, altin olan parlatir */
--surface: linear-gradient(145deg, rgba(48, 21, 14, .62), rgba(14, 6, 4, .55));
--surface-lit: linear-gradient(145deg, rgba(64, 28, 18, .72), rgba(20, 9, 6, .62));
--edge: rgba(218, 176, 106, .16);
--edge-lit: rgba(218, 176, 106, .42);
--lift: 0 3px 10px rgba(0, 0, 0, .32), 0 0 8px rgba(218, 176, 106, .05);
--lift-hi: 0 8px 22px rgba(0, 0, 0, .42), 0 0 14px rgba(218, 176, 106, .12);
/* Baslik gradyani - referanstaki gibi metne uygulaniyor */
--gold-grad: linear-gradient(135deg, #F1CF83 0%, #DAB06A 45%, #B07C2E 100%);
/* --- olcekler ------------------------------------------------------------
KIRILMA NOKTALARI. CSS degiskeni @media sorgusunda CALISMAZ, bu yuzden
asagidakiler yalnizca belge - ama kural baglayici: @media'larda bu bes
degerden baskasi kullanilmayacak. Onceden 12 farkli deger vardi ve
hicbiri digerinden haberdar degildi.
560 en dar telefon
760 telefon / kucuk tablet
900 tablet
1040 hamburger esigi - DEGISTIRME. Yedi baglanti bunun ustunde iki
satira sariyordu, esik bu yuzden buraya cekilmisti.
1240 dar masaustu (menu daralir, durum ayrintisi gizlenir)
BOSLUK. Dikey ritim buradan gelir. Benimseme kademeli: su an bolum
ritmi ve izgara boslugu kullaniyor, bilesenler Faz 1'de gececek. */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 18px;
--sp-5: 26px;
--sp-6: 38px;
--sp-7: 58px;
--sp-8: 88px;
/* TIPOGRAFI. Hepsi akiskan; ayni islevdeki basliklar AYNI token'i kullanir.
Onceden bes ayri elde ayarlanmis clamp vardi ve ucu birbirine 1-2 px
mesafedeydi - ayni seyin uc kopyasiydi. */
--fs-baslik-xl: clamp(30px, 5vw, 54px); /* hero H1 */
--fs-baslik-lg: clamp(25px, 3.6vw, 38px); /* bolum H2 */
--fs-baslik-md: clamp(24px, 3.4vw, 34px); /* portal H1, geri sayim rakami */
--fs-sayi: clamp(26px, 3.6vw, 40px); /* istatistik seridi rakami */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
/* Zemin duz siyah kalmasin: cok hafif iki radial isima, sabit. Gorsel dosya
yok, sadece gradyan - agirlik eklemiyor ama sayfa "olu" durmuyor. */
body {
margin: 0;
background:
radial-gradient(1100px 620px at 50% -8%, rgba(145, 35, 21, .14), transparent 70%),
radial-gradient(900px 700px at 105% 40%, rgba(69, 18, 5, .18), transparent 68%),
radial-gradient(800px 600px at -10% 78%, rgba(69, 18, 5, .14), transparent 66%),
var(--ink-900);
background-attachment: fixed;
color: var(--text-dim);
font: 400 16px/1.7 "Segoe UI", ui-sans-serif, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
/* gorsel() (includes/config.php) WebP sunmak icin ![]()
'i ile
sariyor. display:contents sarmalayici KUTUYU tamamen kaldiriyor, yani ![]()
duzende oncekiyle birebir ayni yerde kaliyor.
Onemli: .hero-logo `margin: 0 auto` ile ortalaniyor ve .brand img flex
ogesi - araya satir ici bir kutusu girseydi ikisi de kayardi. */
picture { display: contents; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-lit); }
h1, h2, h3 {
/* Referans Beaufort kullaniyor; o telifli, bu yuzden ayni ailenin
sistemde bulunan karsiligi. */
font-family: Georgia, "Times New Roman", serif;
line-height: 1.15;
margin: 0 0 .5em;
font-weight: 700;
color: var(--text);
}
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* Donusum kartlari uc sutunlu; 1200px'te sikisiyorlardi. */
.wrap.genis { max-width: 1360px; }
.skip {
position: absolute; left: -9999px;
background: var(--gold); color: var(--ink-900);
padding: 10px 18px; border-radius: 0 0 8px 0; font-weight: 700; z-index: 300;
}
.skip:focus { left: 0; top: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* --- ortak baslik parcalari ------------------------------------------------ */
.eyebrow {
display: block;
font-family: "Segoe UI", sans-serif;
font-size: 11.5px; font-weight: 700;
letter-spacing: .28em; text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 16px;
}
.eyebrow.lit { color: var(--gold); }
.title-xl { font-size: var(--fs-baslik-xl); letter-spacing: .02em; }
.title-lg { font-size: var(--fs-baslik-lg); }
/* Baslik icinde vurgu. Ic sayfalar duz yaziyor, ana sayfa ;
ikisi de ayni sonucu versin diye secici her ikisini de kapsiyor - yoksa
vurgulu kelime italik bir govde metni gibi kaliyordu. */
h1 em, h2 em, h3 em, em.hl { font-style: normal; color: var(--gold); }
/* Bolum basliklarinin olcusu tek yerden: her sayfaya title-lg yazmak yerine. */
.section-head h2 { font-size: var(--fs-baslik-lg); }
/* --- gradyanli baslik metni ------------------------------------------------
Referans sitedeki en belirgin ayrinti: basliklar duz renk degil, altin
gradyanli. background-clip: text ile metnin kendisi gradyani kirpiyor.
TUZAK: destegi olmayan tarayicida -webkit-text-fill-color: transparent
metni GORUNMEZ yapar. Bu yuzden tamami @supports icinde; disarida basliklar
duz --text / --gold renginde kaliyor ve hicbir sey kaybolmuyor. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.title-xl, .title-lg,
.section-head h2,
.portal-head h1,
.hero h1 {
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Vurgulu kelime gradyanin icinde kaybolmasin: daha parlak bir gradyan
alip kendi kirpmasini yapiyor. */
.title-xl em, .title-lg em, .section-head h2 em,
.portal-head h1 em, .hero h1 em, em.hl {
background: linear-gradient(135deg, #FFF0CE 0%, #F1CF83 55%, #DAB06A 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* --- hero basliginda tek seferlik parilti --------------------------------
Metin zaten gradyani kirpiyor; parilti icin AYRI BIR KATMANA GEREK YOK -
gradyanin kendisi genisletilip icinden parlak bir bant geciriliyor.
Gradyan uc parcali (background-size: 300%) ve BIRINCI ile UCUNCU parca
normal altin rampasinin ayni: animasyon %100'den %0'a giderken parlak
orta bant metnin uzerinden geciyor, bittiginde geriye yine normal baslik
kaliyor. Bu yuzden "forwards" guvenli - donus karesi bozuk degil.
Bir kez calisiyor (iteration 1), sonra hicbir sey hesaplanmiyor. */
.hero h1 {
/* DIKKAT: `background:` KISAYOLU KULLANILMAZ.
Kisayol, yazilmayan tum alt ozellikleri baslangic degerine sifirlar -
background-clip dahil. Yukaridaki kural background-clip: text diyor,
bu kural ondan SONRA geldigi icin kisayol onu border-box'a cevirirdi;
-webkit-text-fill-color seffaf oldugundan sonuc BASLIGIN TAMAMEN
GORUNMEZ olmasi olurdu (gradyan kutuyu doldurur, harfler seffaf kalir).
Bir kez yasandi ve ekranda "baslik yok" gibi gorunuyordu.
background-image ise yalnizca kendi alt ozelligini degistirir. */
background-image: linear-gradient(100deg,
#F1CF83 0%, #DAB06A 15%, #B07C2E 33%,
#F1CF83 40%, #FFF8E6 50%, #F1CF83 60%,
#DAB06A 78%, #B07C2E 100%);
background-size: 300% 100%;
background-position: 100% 0;
animation: parilti 1.9s cubic-bezier(.25, .6, .3, 1) .45s 1 forwards;
}
}
@keyframes parilti {
to { background-position: 0 0; }
}
/* Bolum basligi altina ince altin ayrac */
.section-head h2::after {
content: "";
display: block;
width: 64px; height: 2px;
margin: 18px auto 0;
background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
}
.portal-head h1::after { content: none; }
/* --- ust bar ---------------------------------------------------------------
Hero'nun uzerinde saydam, kaydirinca doluyor. */
.site-head {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
background: transparent;
border-bottom: 1px solid transparent;
transition: background .3s ease, border-color .3s ease;
}
.site-head.solid {
background: rgba(6, 2, 1, .92);
backdrop-filter: blur(10px);
border-bottom-color: var(--line);
}
.head-inner { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { flex: 0 0 auto; }
.brand img { width: 120px; height: auto; }
.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav a {
position: relative; padding: 10px 14px;
color: var(--text-dim);
font-size: 12.5px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
}
.nav a::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
height: 1px; background: var(--gold); transform: scaleX(0);
transition: transform .25s ease;
}
.nav a:hover { color: var(--gold); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
.nav a.on { color: var(--gold); }
.head-cta { display: flex; gap: 10px; flex: 0 0 auto; }
.nav-toggle {
display: none;
background: rgba(36, 16, 11, .6); color: var(--gold);
border: 1px solid var(--glass-line); border-radius: 8px;
font-size: 19px; padding: 7px 13px; cursor: pointer;
}
/* --- butonlar -------------------------------------------------------------- */
.btn {
display: inline-block;
padding: 14px 30px;
border-radius: 6px;
font-weight: 700; font-size: 13.5px;
letter-spacing: .1em; text-transform: uppercase;
border: 1px solid transparent;
text-align: center;
transition: transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
background: linear-gradient(180deg, var(--gold-lit), var(--gold));
color: #1A0A02;
box-shadow: 0 8px 26px rgba(218, 176, 106, .18);
}
.btn-gold:hover { color: #1A0A02; filter: brightness(1.07); }
.btn-fire {
background: linear-gradient(180deg, var(--flame), var(--ember));
color: #FFF1E4;
box-shadow: 0 8px 26px rgba(145, 35, 21, .3);
}
.btn-fire:hover { color: #FFF1E4; filter: brightness(1.12); }
.btn-ghost {
border-color: var(--glass-line);
color: var(--text);
background: rgba(69, 18, 5, .22);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { padding: 9px 18px; font-size: 12px; letter-spacing: .08em; }
.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* --- bilesen durum matrisi -------------------------------------------------
Dort durum, her etkilesimli bilesende AYNI dille:
:hover yukari 2px + parlaklik
:focus-visible altin halka (global kural, satir ~158)
:active yerine oturur - basildigini soyler
devre disi soluk, imlec "yasak", HICBIR tepki yok
Once yalnizca :hover vardi (26 kural), :active HIC YOKTU - hicbir yerde
basma geri bildirimi olmuyordu.
:focus DEGIL :focus-visible kullaniliyor: fareyle tiklayinca halka
cikmamali, klavyeyle gelince cikmali. */
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled], .btn.off, .btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
filter: grayscale(.3);
box-shadow: none;
}
/* Devre disi butonda hover/active tepkisi OLMAMALI. Bu kural olmadan
.btn:hover devre disi butonu da 2px kaldiriyor ve buton tiklanabilir gibi
duruyordu - market'te bakiyesi yetmeyen urunlerde tam bu oluyordu. */
.btn[disabled]:hover, .btn.off:hover, .btn[aria-disabled="true"]:hover,
.btn[disabled]:active, .btn.off:active, .btn[aria-disabled="true"]:active {
transform: none;
filter: grayscale(.3);
}
/* Form alanlari ayni dili konussun. */
input:disabled, select:disabled, textarea:disabled {
opacity: .5; cursor: not-allowed;
}
/* --- hero ------------------------------------------------------------------ */
.hero {
position: relative;
min-height: min(100vh, 940px);
display: grid; place-items: center;
padding: 128px 0 92px;
overflow: hidden;
text-align: center;
isolation: isolate;
}
.hero.short { min-height: 0; padding: 150px 0 84px; }
/* poster yuvasi: dosya varsa arka plan, yoksa .hero-fallback devrede */
.hero-bg {
position: absolute; inset: 0; z-index: -3;
background-position: center; background-size: cover;
}
/* Posterin uzerindeki karartma.
Ilk hali her yeri esit koyultuyordu ve gorselin kendisi kayboluyordu -
karakterler zar zor secilir olmustu. Simdi karartma yalnizca yazinin
oturdugu MERKEZ SERIDINDE yogun; kenarlar acik kaliyor.
Ucuncu katman ince bir sicak ton: poster gri-maviye calisiyor, palet
kirmizi; arada gecis olmadan iki ayri sayfa gibi duruyorlar. */
.hero-bg::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(62% 70% at 50% 46%,
rgba(6,2,1,.74) 0%, rgba(6,2,1,.46) 56%, rgba(6,2,1,.06) 100%),
linear-gradient(to bottom,
rgba(6,2,1,.8) 0%, rgba(6,2,1,.12) 24%,
rgba(6,2,1,.32) 58%, rgba(6,2,1,.92) 88%, var(--ink-900) 100%),
linear-gradient(to bottom, rgba(70,14,10,.20), rgba(145,35,21,.14));
}
/* Poster yokken: sade ates zemini. Once burada SVG bir dag manzarasi vardi,
kaldirildi - manzara cizmek posterin isi. Bu yalnizca poster gelene kadar
hero'nun bos bir dikdortgen gibi durmamasi icin. */
.hero-fallback {
background:
linear-gradient(to bottom, #060201 0%, #12060420 42%, #1E0A06 74%, #060201 100%),
var(--ink-900);
}
.hero-fallback::after {
background:
radial-gradient(120% 78% at 50% 46%, rgba(6,2,1,.08) 0%, rgba(6,2,1,.62) 70%, var(--ink-900) 100%),
linear-gradient(to bottom, rgba(6,2,1,.72) 0%, rgba(6,2,1,0) 38%, rgba(6,2,1,.9) 100%);
}
/* ufuktan yukari vuran kor */
.hero-fallback .glow-core,
.hero-fallback .glow-haze {
position: absolute; left: 50%; transform: translateX(-50%);
border-radius: 50%;
pointer-events: none;
}
.hero-fallback .glow-core {
bottom: -22%; width: 132%; height: 62%;
background: radial-gradient(closest-side,
rgba(232, 98, 42, .34) 0%,
rgba(194, 55, 28, .18) 42%,
rgba(145, 35, 21, .06) 72%,
transparent 100%);
}
.hero-fallback .glow-haze {
bottom: 6%; width: 96%; height: 34%;
background: radial-gradient(closest-side,
rgba(218, 176, 106, .12) 0%,
rgba(145, 35, 21, .06) 55%,
transparent 100%);
animation: breathe 11s ease-in-out infinite alternate;
}
@keyframes breathe {
from { opacity: .65; transform: translateX(-50%) scale(1); }
to { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
/* --- hero: sis seritleri ---------------------------------------------------
Iki serit farkli hizda yatay kayiyor ve hero'ya derinlik veriyor.
DONGU NASIL DIKISSIZ OLUYOR: serit %200 genislikte, arka plani ise
background-size:50% ile TAM IKI KEZ dosenmis. translateX(-50%) serit
genisliginin yarisi kadar, yani tam bir doseme kadar kaydiriyor - ikinci
kopya birincinin tam yerine oturuyor, sicrama gorunmuyor.
Gradyanlarin iki ucu da SEFFAF olmali, yoksa dosemeler arasinda dikey bir
cizgi belirir. radial-gradient'lerin %70-72'de transparent'a inmesi bu yuzden.
NEDEN transform, NEDEN background-position DEGIL: background-position her
karede yeniden boyama demek ve bu tam ekran bir ogede pahali; transform
GPU'da bilesikleniyor. */
.hero-fog {
position: absolute; inset: 0; z-index: -2;
overflow: hidden; pointer-events: none;
/* Ust ve alt kenarda yumusak bitis - sert kesim serit oldugunu ele veriyor */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 74%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 74%, transparent 100%);
}
.hero-fog span {
position: absolute; top: 0; bottom: 0; left: 0;
width: 200%;
background-repeat: repeat-x;
background-size: 50% 100%;
animation: sis linear infinite;
will-change: transform;
}
.hero-fog span:nth-child(1) {
background-image: radial-gradient(58% 82% at 50% 58%,
rgba(145, 35, 21, .13) 0%, rgba(194, 55, 28, .05) 40%, transparent 70%);
animation-duration: 54s;
}
.hero-fog span:nth-child(2) {
background-image: radial-gradient(46% 68% at 50% 38%,
rgba(218, 176, 106, .06) 0%, rgba(145, 35, 21, .04) 45%, transparent 72%);
animation-duration: 83s;
animation-direction: reverse;
}
@keyframes sis {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* --- hero: alttan vuran kor ------------------------------------------------
Poster VARKEN de gorunur (.hero-fallback .glow-core yalnizca poster yokken
ciziliyordu). Sayfanin alt kenarindaki koyulukla hero'yu birbirine baglayan
sicak gecis bu. */
.hero-glow {
position: absolute; left: 50%; bottom: -18%;
width: 128%; height: 58%;
z-index: -2;
transform: translateX(-50%);
pointer-events: none;
background: radial-gradient(closest-side,
rgba(232, 98, 42, .20) 0%,
rgba(194, 55, 28, .11) 44%,
rgba(145, 35, 21, .04) 72%,
transparent 100%);
animation: nefes 8s ease-in-out infinite alternate;
}
@keyframes nefes {
from { opacity: .7; transform: translateX(-50%) scale(1); }
to { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
/* --- hareket dugmesi -------------------------------------------------------
site.js uretiyor (JS kapaliyken olu kontrol gostermenin anlami yok).
Kosede, sessiz duruyor; uzerine gelince belirginlesiyor. */
.hareket-dugme {
position: absolute; right: 18px; bottom: 18px; z-index: 2;
width: 34px; height: 34px;
display: grid; place-items: center;
border: 1px solid var(--glass-line);
border-radius: 50%;
background: rgba(6, 2, 1, .55);
color: var(--text-faint);
font-size: 11px; line-height: 1;
cursor: pointer;
opacity: .45;
transition: opacity .2s ease, color .2s ease, border-color .2s ease;
}
.hareket-dugme:hover,
.hareket-dugme:focus-visible { opacity: 1; color: var(--gold); border-color: var(--gold-deep); }
/* Kullanici hareketi ACIKCA kapattiysa - isletim sistemi hareket dese bile.
!important gerekiyor: yukaridaki kurallar bilesenlerin kendi kurallari ve
ayni ozgullukte; kullanicinin acik istegi hepsini yenmeli. */
.hareket-kapali .hero-fog span,
.hareket-kapali .hero-glow,
.hareket-kapali .hero-logo,
.hareket-kapali .scroll-hint i { animation: none !important; }
.hero-inner { position: relative; z-index: 1; }
/* --- kesfet ipucu ---------------------------------------------------------- */
.scroll-hint {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
z-index: 2;
display: grid; justify-items: center; gap: 8px;
font-size: 10.5px; font-weight: 700;
letter-spacing: .28em; text-transform: uppercase;
color: var(--text-faint);
}
.scroll-hint:hover { color: var(--gold); }
.scroll-hint i {
display: block; width: 1px; height: 30px;
background: linear-gradient(to bottom, transparent, var(--gold-deep));
animation: hintdrop 2.2s ease-in-out infinite;
}
@keyframes hintdrop {
0%, 100% { transform: scaleY(.5); transform-origin: top; opacity: .45; }
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}
/* Logo + baslik + sayac + butonlar tek ekrana sigmali. Geri sayim eklenince
icerik 862px'e cikti ve logo ust barin arkasina girdi; olculer ona gore.
vh'e bagli genislik, kisa ekranlarda logonun once kuculmesini sagliyor. */
.hero-logo {
width: min(430px, 74vw, 46vh);
margin: 0 auto 14px;
filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .6));
/* Golgeye cok hafif bir sicak nefes. drop-shadow'un RENGI degisiyor, olcu
degil - olcu degisseydi her karede yeniden yerlesim tetiklenirdi. */
animation: logoNefes 9s ease-in-out infinite alternate;
}
@keyframes logoNefes {
from { filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .6)); }
to { filter: drop-shadow(0 14px 46px rgba(145, 35, 21, .42)); }
}
.hero h1 { margin-bottom: .25em; }
.hero .lead {
max-width: 560px; margin: 0 auto 26px;
color: var(--text-dim); font-size: 16.5px;
}
/* --- geri sayim ------------------------------------------------------------ */
.countdown { margin: 0 auto 26px; max-width: 560px; }
.countdown .when {
font-size: 11px; font-weight: 700; letter-spacing: .26em;
text-transform: uppercase; color: var(--gold-deep);
margin-bottom: 5px;
}
.countdown .date {
font-family: Georgia, serif; font-size: 19px; color: var(--gold);
margin-bottom: 13px;
}
.clock {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 13px 0;
}
.clock div { text-align: center; border-right: 1px solid var(--line-soft); }
.clock div:last-child { border-right: 0; }
.clock b {
display: block;
font-family: Georgia, serif; font-size: var(--fs-baslik-md);
font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums;
}
.clock span {
font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
color: var(--text-faint);
}
/* --- bolumler -------------------------------------------------------------- */
.section { position: relative; padding: var(--sp-8) 0; }
.section-alt { background: var(--ink-800); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-head p { color: var(--text-dim); margin: 0; }
.grid { display: grid; gap: var(--sp-4); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
/* grid-1: duyuru izgarasi sinifini `grid-` ile kuruyor
(index.php). Tek duyuru varken uretilen bu sinifin kurali YOKTU ve kart
sessizce .grid varsayilanina dusuyordu. */
.grid-1 { grid-template-columns: 1fr; }
/* --- canli istatistik seridi -----------------------------------------------
Hero'nun hemen altinda. Sayilar gercek veritabanindan geliyor; veritabani
kapaliysa serit hic cizilmiyor (index.php), uydurma sayi yok. */
.stat-serit {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background:
linear-gradient(to bottom, rgba(69, 18, 5, .3), rgba(6, 2, 1, .2)),
var(--ink-800);
}
.stat-grid {
display: grid; grid-template-columns: repeat(5, 1fr);
}
.stat {
text-align: center;
padding: 26px 12px;
border-right: 1px solid var(--line-soft);
}
.stat:last-child { border-right: 0; }
.stat b {
display: block;
font-family: Georgia, serif;
font-size: var(--fs-sayi); line-height: 1;
color: var(--gold);
font-variant-numeric: tabular-nums;
text-shadow: 0 0 22px rgba(218, 176, 106, .22);
}
.stat span {
display: block; margin-top: 8px;
font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-faint);
}
@media (max-width: 900px) {
.stat-grid { grid-template-columns: repeat(3, 1fr); }
.stat:nth-child(3) { border-right: 0; }
.stat:nth-child(1), .stat:nth-child(2), .stat:nth-child(3) { border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 560px) {
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.stat { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.stat:nth-child(even) { border-right: 0; }
}
/* --- dort sutun: hero'nun altindaki kisa kartlar --------------------------- */
.pillars { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillars .grid { gap: 0; }
.pillar {
padding: 34px 26px;
border-right: 1px solid var(--line-soft);
transition: background .3s ease;
}
.pillar:last-child { border-right: 0; }
.pillar:hover { background: rgba(69, 18, 5, .18); }
.pillar h3 { font-size: 19px; color: var(--gold); margin-bottom: .4em; }
.pillar p { margin: 0; font-size: 14.5px; color: var(--text-dim); }
.pillar .eyebrow { margin-bottom: 10px; font-size: 10.5px; }
/* --- poster + metin bolumu ------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.split.flip .split-text { order: 2; }
/* Poster yoksa iki sutunda kalmasin: metin ortalanip okunur bir genislikte
duruyor, yaninda bos bir sutun birakmiyor. */
.split.tek { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; text-align: center; }
.split.tek .split-text { order: 0; }
.split.tek .chips { justify-content: center; }
.split.tek .note { border-left: 0; border-top: 1px solid var(--line-soft); padding: 14px 0 0; text-align: center; }
.split-text h2 { margin-bottom: .5em; }
.split-text p { color: var(--text-dim); margin: 0 0 1em; }
.split-text p:last-child { margin-bottom: 0; }
.note {
border-left: 2px solid var(--gold-deep);
padding: 4px 0 4px 16px;
color: var(--text-faint); font-size: 14.5px;
}
/* --- poster yuvasi ---------------------------------------------------------
Gorsel yoksa olcusu ve beklenen dosya adi yazili bos bir alan. Amac
gelistirme sirasinda neyin nereye gelecegini gorunur tutmak. */
.poster {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
aspect-ratio: 16 / 9;
background: var(--ink-700);
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
/* ===========================================================================
PORTAL — sol panel + icerik
Tanitim sayfalarindan farkli bir duzen: orada genis hero var, burada surekli
gorunen bir panel. Palet ayni.
=========================================================================== */
body.portal { background: var(--ink-900); }
.portal-wrap {
display: grid;
grid-template-columns: 290px minmax(0, 1fr);
gap: 26px;
width: 100%; max-width: var(--wrap);
margin: 0 auto; padding: 104px 24px 60px;
align-items: start;
}
/* --- sol panel ------------------------------------------------------------- */
.side { display: grid; gap: 16px; position: sticky; top: 96px; }
.side-box {
background: var(--surface);
border: 1px solid var(--edge);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--lift);
}
.side-title {
font-family: "Segoe UI", sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase;
color: var(--gold-deep);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line-soft);
}
.side-bos { margin: 0; color: var(--text-faint); font-size: 13.5px; }
.side-links { display: grid; gap: 2px; margin-top: 14px; }
.side-links.two { grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.side-links a {
color: var(--text-dim); font-size: 13.5px;
padding: 6px 0;
}
.side-links a:hover { color: var(--gold); }
.side-more {
display: block; margin-top: 12px; padding-top: 10px;
border-top: 1px solid var(--line-soft);
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--gold-deep);
}
.side-more:hover { color: var(--gold); }
/* girisli kullanici ozeti */
.me { display: grid; gap: 4px; }
.me-name { font-family: Georgia, serif; font-size: 19px; color: var(--text); }
.me-coins { font-size: 13.5px; color: var(--text-dim); }
.me-coins b { color: var(--gold); font-size: 15px; }
/* --- panel icindeki kucuk form --------------------------------------------- */
.mini-form { display: grid; gap: 8px; }
input[type="text"], input[type="password"], input[type="email"],
select, textarea {
width: 100%;
background: linear-gradient(to right, rgba(110, 60, 22, .16), rgba(6, 2, 1, .92));
border: 1px solid var(--line);
border-radius: 6px;
padding: 10px 12px;
color: var(--text);
font: inherit; font-size: 14.5px;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
border-color: var(--gold-deep);
outline: none;
box-shadow: 0 0 0 3px rgba(218, 176, 106, .12);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
/* --- siralama listesi ------------------------------------------------------ */
/* Her satir kendi karti: soldan sicak, saga koyu gradyan + ince altin
kenarlik. Referanstaki .ranking-item ile ayni fikir - duz liste yerine
katmanli satirlar sayfayi belirgin sekilde dolduruyor. */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank li {
display: flex; align-items: center; gap: 9px;
padding: 7px 10px;
font-size: 13.5px;
border: 1px solid var(--edge);
border-radius: 8px;
background: linear-gradient(to right, rgba(90, 62, 26, .34), rgba(20, 9, 6, .5));
box-shadow: 0 2px 6px rgba(0, 0, 0, .24);
transition: border-color .2s ease, background .2s ease;
}
.rank li:hover { border-color: var(--edge-lit); background: linear-gradient(to right, rgba(120, 82, 34, .42), rgba(26, 12, 8, .55)); }
/* Sira rozeti: ilk uc icin altin / gumus / bronz, digerleri sade */
.rank .no {
flex: 0 0 22px; height: 22px;
display: grid; place-items: center;
border-radius: 50%;
font-family: Georgia, serif; font-size: 11.5px; font-weight: 700;
color: var(--ink-900);
background: linear-gradient(135deg, rgba(138, 100, 40, .5), rgba(90, 62, 26, .5));
}
.rank li:nth-child(1) .no {
background: linear-gradient(135deg, #FFD75E, #E0A32A);
box-shadow: 0 0 9px rgba(255, 215, 94, .38);
}
.rank li:nth-child(2) .no {
background: linear-gradient(135deg, #E2E2E2, #A9A9A9);
box-shadow: 0 0 8px rgba(226, 226, 226, .26);
}
.rank li:nth-child(3) .no {
background: linear-gradient(135deg, #D89A5A, #A0522D);
box-shadow: 0 0 8px rgba(216, 154, 90, .26);
}
/* Sinif yuzu - oyunun kendi ikonu */
.rank .yuz {
flex: 0 0 22px; width: 22px; height: 22px;
border-radius: 50%; object-fit: cover;
border: 1px solid var(--line);
}
.rank .ad {
flex: 1 1 auto; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank .lv { flex: 0 0 auto; color: var(--gold-deep); font-size: 11.5px; font-weight: 700; }
/* --- icerik alani ---------------------------------------------------------- */
.portal-main { min-width: 0; }
.portal-head {
margin-bottom: 26px;
padding-bottom: 20px;
border-bottom: 1px solid var(--line);
}
.portal-head h1 {
font-size: var(--fs-baslik-md);
margin-bottom: .2em;
}
.portal-head .lead { margin: 0; color: var(--text-dim); font-size: 15.5px; }
.panel {
background: var(--surface);
border: 1px solid var(--edge);
border-radius: var(--radius);
padding: 26px;
box-shadow: var(--lift);
}
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 20px; margin-bottom: .6em; }
/* --- form duzeni ----------------------------------------------------------- */
.form-grid { display: grid; gap: 16px; max-width: 460px; }
.field label {
display: block; margin-bottom: 6px;
font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.field .hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--text-faint); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-dim); }
.check input { width: auto; margin-top: 3px; }
/* --- sekmeler -------------------------------------------------------------- */
.tabs {
display: flex; gap: 4px; flex-wrap: wrap;
margin-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.tabs a {
padding: 10px 18px;
color: var(--text-dim);
font-size: 13px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.tabs a:hover { color: var(--gold); }
.tabs a.on { color: var(--gold); border-bottom-color: var(--gold); }
/* --- siralama listesi (tam sayfa) ------------------------------------------
Tablo yerine kart satirlar. Ayni fikir yan paneldeki .rank ile, burada
daha genis: sinif yuzu buyuk, iki satirlik metin, sagda deger. */
/* --- profil sayfalari (karakter.php / lonca.php) --------------------------- */
.profil-ust { display: flex; align-items: center; gap: 16px; }
.profil-yuz {
flex: 0 0 64px; width: 64px; height: 64px;
border-radius: 10px; object-fit: cover;
border: 1px solid var(--line);
background: rgba(6, 2, 1, .5);
}
/* Loncanin ikonu yok; adinin ilk harfi amblem yerine geciyor. */
.profil-amblem {
flex: 0 0 64px; width: 64px; height: 64px;
display: grid; place-items: center;
border-radius: 10px;
border: 1px solid var(--line);
background: linear-gradient(145deg, rgba(69, 18, 5, .5), rgba(10, 4, 3, .6));
color: var(--gold);
font-family: Georgia, serif; font-size: 30px;
}
.profil-ad { display: block; color: var(--text); font-size: 22px; }
.profil-alt { display: block; color: var(--text-faint); font-size: 13.5px; margin-top: 4px; }
/* Kunye: etiket solda, deger sagda. kullanildi cunku bunlar gercekten
terim/tanim ciftleri - tablo degil, liste de degil. */
.kunye {
margin: 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 9px 18px;
}
.kunye dt { color: var(--text-faint); font-size: 13.5px; }
.kunye dd {
margin: 0; text-align: right;
color: var(--text); font-variant-numeric: tabular-nums;
}
.siralist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sirasatir {
display: flex; align-items: center; gap: 14px;
padding: 11px 14px;
border: 1px solid var(--edge);
border-radius: 10px;
background: linear-gradient(to right, rgba(90, 62, 26, .3), rgba(20, 9, 6, .5));
box-shadow: 0 2px 8px rgba(0, 0, 0, .26);
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.sirasatir:hover {
border-color: var(--edge-lit);
background: linear-gradient(to right, rgba(120, 82, 34, .4), rgba(26, 12, 8, .55));
transform: translateX(3px);
}
/* ilk uc: altin / gumus / bronz */
.sirasatir .no {
flex: 0 0 30px; height: 30px;
display: grid; place-items: center;
border-radius: 50%;
font-family: Georgia, serif; font-size: 13px; font-weight: 700;
color: var(--ink-900);
background: linear-gradient(135deg, rgba(138, 100, 40, .55), rgba(90, 62, 26, .55));
}
.siralist li:nth-child(1) .no {
background: linear-gradient(135deg, #FFD75E, #E0A32A);
box-shadow: 0 0 12px rgba(255, 215, 94, .4);
}
.siralist li:nth-child(2) .no {
background: linear-gradient(135deg, #E2E2E2, #A9A9A9);
box-shadow: 0 0 10px rgba(226, 226, 226, .28);
}
.siralist li:nth-child(3) .no {
background: linear-gradient(135deg, #D89A5A, #A0522D);
box-shadow: 0 0 10px rgba(216, 154, 90, .28);
}
.sirasatir .yuz {
flex: 0 0 38px; width: 38px; height: 38px;
border-radius: 8px; object-fit: cover;
border: 1px solid var(--line);
}
/* Loncanin ikonu yok: adin ilk harfi amblem oluyor */
.sirasatir .amblem {
flex: 0 0 38px; height: 38px;
display: grid; place-items: center;
border-radius: 8px;
border: 1px solid var(--line);
background: linear-gradient(145deg, rgba(69, 18, 5, .6), rgba(14, 6, 4, .6));
font-family: Georgia, serif; font-size: 18px; font-weight: 700;
color: var(--gold);
}
.sirasatir .ana { flex: 1 1 auto; min-width: 0; display: grid; }
.sirasatir .ana b {
color: var(--text); font-size: 15.5px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sirasatir .ana small { color: var(--text-faint); font-size: 12.5px; }
.sirasatir .deger { flex: 0 0 auto; text-align: right; display: grid; }
.sirasatir .deger b { color: var(--gold); font-size: 14.5px; }
.sirasatir .deger small { color: var(--text-faint); font-size: 12px; }
@media (max-width: 560px) {
.sirasatir { gap: 10px; padding: 10px; }
.sirasatir .yuz, .sirasatir .amblem { flex-basis: 30px; width: 30px; height: 30px; }
}
/* --- siralama tablosu ------------------------------------------------------ */
.sira thead th {
color: var(--gold-deep); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase;
border-bottom-color: var(--line);
width: auto;
}
.sira td { padding: 11px 8px; }
.sira .no {
width: 46px; text-align: center;
font-family: Georgia, serif; font-weight: 700; color: var(--gold-deep);
}
.sira tbody tr:nth-child(1) .no { color: var(--gold-lit); font-size: 17px; }
.sira tbody tr:nth-child(2) .no { color: var(--gold); }
.sira tbody tr:nth-child(3) .no { color: #C08A4A; }
.sira .ad { color: var(--text); font-weight: 600; }
.sira tbody tr:hover { background: rgba(69, 18, 5, .18); }
/* --- malzeme rozeti --------------------------------------------------------
Donusum kartlarindaki "Kutsama Kagidi x5" gibi kucuk rozetler. Tek kullanan
yer donusum kartlari (.dn-*); eskiden rehber.php'nin karisim ve zincir
listeleri de kullaniyordu, o sayfa silindi. */
.malz {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px 3px 3px;
border: 1px solid var(--line); border-radius: 100px;
background: rgba(6, 2, 1, .4);
font-size: 12.5px; color: var(--text-dim);
margin: 2px 4px 2px 0;
}
.malz img { image-rendering: pixelated; border-radius: 50%; }
.malz i { font-style: normal; color: var(--gold); font-weight: 700; }
.malz.kucuk { font-size: 12px; }
/* --- donusum kartlari -------------------------------------------------------
Duzen oyun ici "Yukseltme" penceresine gore: malzemeler YAN YANA degil
ALT ALTA, her biri kendi satirinda ikonu ve adediyle. Kartlar da tek
sutun halinde alt alta diziliyor. */
.donusum-liste { display: grid; gap: 12px; }
.donusum {
display: grid;
/* minmax(0, ...) sart: minmax(180px, 1fr) idi ve icerik 180px'i asinca
sutun buyuyup karti tasiriyordu. 0 tabani grid'in daralmasina izin verir. */
/* Sag sutun ICERIK KADAR yer kaplasin (auto). Sabit 1fr verildiginde
hedef esya adi ~100px iken sutun 337px oluyor ve kartin sagi bos
duruyordu; artan alan malzeme sutununa gidiyor. */
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) auto;
align-items: center;
gap: 22px;
padding: 18px 22px;
border: 1px solid var(--edge);
border-radius: 12px;
background: linear-gradient(to right, rgba(90, 62, 26, .26), rgba(20, 9, 6, .5));
box-shadow: var(--lift);
}
/* kaynak / hedef */
.dn-taraf { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Hedef tarafta ikon SOLDA kaliyor. Once order:2 ile saga itiliyordu ve
kartin sag kenarindan tasiyordu; ok isareti zaten yonu gosteriyor. */
.dn-taraf.hedef { justify-content: flex-start; }
.dn-ikon {
flex: 0 0 52px; width: 52px; height: 52px;
display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 9px;
background: linear-gradient(145deg, rgba(69, 18, 5, .55), rgba(10, 4, 3, .65));
color: var(--gold-deep);
box-shadow: inset 0 0 12px rgba(0, 0, 0, .4);
}
.dn-ikon img { image-rendering: pixelated; }
.dn-ad { min-width: 0; display: grid; }
.dn-ad b {
color: var(--text); font-size: 15px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dn-ad small { color: var(--text-faint); font-size: 12px; }
.dn-taraf.hedef .dn-ad b { color: var(--gold); }
/* orta: malzemeler ALT ALTA */
.dn-orta { position: relative; display: grid; gap: 10px; min-width: 0; }
.dn-malz { display: grid; gap: 5px; justify-items: start; }
.dn-malz .malz { margin: 0; width: 100%; }
.dn-malz .malz-ad {
flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dn-bedel {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
padding-top: 9px;
border-top: 1px solid var(--line-soft);
}
.dn-bedel .yang {
color: var(--gold); font-family: Georgia, serif; font-size: 15px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.dn-bedel .yang i {
font-style: normal; font-family: "Segoe UI", sans-serif;
font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-faint);
}
.dn-bedel .sans { color: var(--text-dim); font-size: 12.5px; }
.dn-ok {
flex: 0 0 auto;
color: var(--gold-deep); font-size: 20px;
margin-right: 2px;
}
@media (max-width: 900px) {
.donusum { grid-template-columns: 1fr; gap: 14px; }
.dn-taraf.hedef { justify-content: flex-start; text-align: left; }
.dn-taraf.hedef .dn-ikon { order: 0; }
.dn-ok { display: none; }
.dn-orta { order: 1; }
}
/* --- ikon kutulari: gorsel kutudan TASMASIN ---------------------------------
Esya ikonlari KARE DEGIL: silahlar 32x64, bazilari 32x96 (dikey). Global
`img { height: auto }` kurali yuzunden 52px'lik kutuda 104px yuksekliğe
uzuyor ve kutunun altindan tasiyorlardi.
max-height + object-fit: contain ikonu kutuya sigdirir, en-boy oranini
korur. width/height auto olmali; aksi halde attribute'taki 40x40 orani
bozar. */
/* Esya ikonlari KARE DEGIL: silahlar 32x64, bazilari 32x96. Global
`img { height: auto }` yuzunden kutudan tasiyorlardi.
YUZDE KULLANILMIYOR: `max-height: 100%` ve `height: 100%` denendi, ikisi de
grid item + place-items:center kombinasyonunda beklendigi gibi cozulmedi
(ikon 100px'e kadar buyudu). Sabit piksel siniri tek guvenilir yol. */
.dn-ikon img { max-width: 40px; max-height: 40px; }
.urun-ikon img { max-width: 38px; max-height: 38px; }
.malz img { max-width: 20px; max-height: 20px; }
.dn-ikon img, .urun-ikon img, .malz img {
width: auto; height: auto; object-fit: contain;
}
/* --- portal ana sayfasi ----------------------------------------------------- */
.stat-mini {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px; margin-bottom: 18px;
border: 1px solid var(--edge); border-radius: var(--radius);
overflow: hidden; background: var(--line-soft);
}
.stat-mini div {
text-align: center; padding: 16px 10px;
background: var(--surface);
}
.stat-mini b {
display: block; font-family: Georgia, serif; font-size: 24px;
color: var(--gold); font-variant-numeric: tabular-nums;
}
.stat-mini span {
display: block; margin-top: 4px;
font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-faint);
}
.kisayol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kisayol a {
display: grid; gap: 3px;
padding: 14px 16px;
border: 1px solid var(--edge); border-radius: 9px;
background: linear-gradient(to right, rgba(90, 62, 26, .22), rgba(20, 9, 6, .45));
transition: border-color .2s ease, transform .2s ease;
}
.kisayol a:hover { border-color: var(--edge-lit); transform: translateX(3px); }
.kisayol b { color: var(--gold); font-size: 14.5px; }
.kisayol small { color: var(--text-dim); font-size: 12.5px; }
/* Landing'de tam menu yok; logo ile CTA arasini bu bosluk aciyor */
.landing-bosluk { flex: 1 1 auto; }
@media (max-width: 760px) {
.stat-mini { grid-template-columns: repeat(2, 1fr); }
.kisayol { grid-template-columns: 1fr; }
}
/* --- landing sol kisayol seridi --------------------------------------------
Landing tek sayfa ve uzun; donusumler en altta kaliyor. Sol kenarda sabit
duran bu buton oraya kaydiriyor. Kaydirma CSS'in scroll-behavior:smooth
ozelligiyle, JavaScript yok. */
.yan-kisayol {
position: fixed; left: 0; top: 50%; transform: translateY(-50%);
z-index: 150;
}
.yan-kisayol a {
display: flex; align-items: center; gap: 9px;
padding: 13px 15px 13px 13px;
border: 1px solid var(--edge); border-left: 0;
border-radius: 0 10px 10px 0;
background: linear-gradient(to right, rgba(69, 18, 5, .9), rgba(36, 16, 11, .82));
backdrop-filter: blur(6px);
box-shadow: var(--lift);
color: var(--gold);
font-size: 12.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
transition: padding .2s ease, border-color .2s ease, background .2s ease;
}
.yan-kisayol a:hover {
padding-right: 22px;
border-color: var(--edge-lit);
background: linear-gradient(to right, rgba(96, 26, 8, .95), rgba(48, 21, 14, .9));
}
.yan-kisayol .ok {
font-size: 15px;
animation: kisayolZipla 2.4s ease-in-out infinite;
}
@keyframes kisayolZipla {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
@media (max-width: 900px) {
/* Dar ekranda yazi yer kaplamasin, yalniz ok kalsin */
.yan-kisayol .yazi { display: none; }
.yan-kisayol a { padding: 12px 11px; }
}
@media (prefers-reduced-motion: reduce) {
.yan-kisayol .ok { animation: none; }
}
/* --- market urun karti ----------------------------------------------------- */
.urun { display: flex; flex-direction: column; }
.urun p { flex: 1 1 auto; margin-bottom: 16px; }
.urun-ust {
display: flex; align-items: flex-start;
gap: 14px; margin-bottom: 10px;
}
.urun-ust h3 { margin: 0; font-size: 17px; }
/* Esya ikonu: oyunun kendi 32x32 ikonu, kendi cercevesinde.
image-rendering pixelated - ikonlar kucuk ve keskin, yumusatma bulaniklastirir. */
.urun-ikon {
flex: 0 0 52px; width: 52px; height: 52px;
display: grid; place-items: center;
border: 1px solid var(--edge);
border-radius: 8px;
background: linear-gradient(145deg, rgba(69, 18, 5, .5), rgba(10, 4, 3, .6));
color: var(--gold-deep);
box-shadow: inset 0 0 12px rgba(0, 0, 0, .35);
}
.urun-ikon img { image-rendering: pixelated; }
.urun-bas {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.fiyat {
flex: 0 0 auto;
font-family: Georgia, serif; font-size: 19px; font-weight: 700;
color: var(--gold); white-space: nowrap;
}
.fiyat i {
font-style: normal; font-family: "Segoe UI", sans-serif;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-faint);
}
.urun-alt {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.urun-alt .vnum {
font-family: ui-monospace, Consolas, monospace;
font-size: 12px; color: var(--text-faint);
}
/* .btn.off ve [disabled] artik ortak durum matrisinde (butonlarin yaninda) -
burada ayri bir opacity kurali vardi ve hover tepkisini kapatmadigi icin
bakiyesi yetmeyen "Satin Al" butonu yine de zipliyordu. */
/* --- destek biletleri ------------------------------------------------------ */
.bilet-ust {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.bilet-meta { font-size: 13px; color: var(--text-faint); }
.mesaj {
padding: 16px 0;
border-bottom: 1px solid var(--line-soft);
}
.mesaj:first-child { padding-top: 0; }
.mesaj:last-child { border-bottom: 0; padding-bottom: 0; }
.mesaj-ust {
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 8px; flex-wrap: wrap;
}
.mesaj-ust b { color: var(--text); font-size: 14.5px; }
.mesaj-ust time { color: var(--text-faint); font-size: 12.5px; margin-left: auto; }
.mesaj .rozet {
font-size: 10px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--gold); border: 1px solid var(--gold-deep);
background: rgba(218, 176, 106, .1);
padding: 2px 8px; border-radius: 100px;
}
.mesaj p { margin: 0; color: var(--text-dim); font-size: 15px; }
/* yetkili yaniti sola ince bir cizgiyle ayriliyor */
.mesaj.staff {
border-left: 2px solid var(--gold-deep);
padding-left: 14px;
background: rgba(69, 18, 5, .12);
border-radius: 0 6px 6px 0;
}
/* --- bildirimler ----------------------------------------------------------- */
.uyari, .basari, .bilgi {
border-radius: 8px;
padding: 13px 16px;
margin-bottom: 18px;
font-size: 14.5px;
border: 1px solid;
}
.uyari { background: rgba(196, 55, 28, .1); border-color: rgba(196, 55, 28, .42); color: #F0A48E; }
.basari { background: rgba(95, 191, 122, .1); border-color: rgba(95, 191, 122, .38); color: #9BD8AC; }
.bilgi { background: rgba(218, 176, 106, .08); border-color: var(--gold-deep); color: var(--text-dim); }
.uyari ul { margin: 8px 0 0; padding-left: 20px; }
.uyari li { margin-bottom: 3px; }
/* --- coin yukleme (coin.php) ----------------------------------------------- */
.kod-form { display: flex; gap: 10px; flex-wrap: wrap; }
.kod-form input {
flex: 1 1 240px; width: auto;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
letter-spacing: .16em; text-transform: uppercase;
}
.kod-form .btn { flex: 0 0 auto; }
.paketler {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.paket {
display: grid; justify-items: center; gap: 2px;
padding: 18px 14px;
border: 1px solid var(--edge);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--lift);
text-align: center;
}
.paket-ad {
font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
color: var(--gold-deep);
}
.paket-coin { font-family: Georgia, serif; font-size: 30px; color: var(--gold); line-height: 1.1; }
.paket-birim { font-size: 12px; color: var(--text-faint); margin-top: -4px; }
.paket-hediye { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.paket-tl { margin-top: 10px; color: var(--text); font-weight: 700; }
.paket-tl.yok { color: var(--text-faint); font-weight: 400; font-size: 13px; }
.paket form { margin-top: 10px; }
/* Fiyati konmamis paket: duruyor ama satin alinamiyor. */
.paket.yakinda { opacity: .72; }
/* Havale aciklamasina yazilacak referans. Secilebilir ve okunakli olmali -
yanlis yazilirsa odeme eslesmiyor. */
.referans {
margin: 0;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 21px; letter-spacing: .22em;
color: var(--gold-lit);
background: rgba(6, 2, 1, .55);
border: 1px dashed var(--gold-deep);
border-radius: 8px;
padding: 12px 16px;
text-align: center;
user-select: all; /* tek tikla tamami secilsin */
}
@media (max-width: 760px) {
.paketler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.paketler { grid-template-columns: 1fr; }
.referans { font-size: 17px; letter-spacing: .16em; }
}
/* --- dar ekran ------------------------------------------------------------- */
@media (max-width: 1040px) {
.portal-wrap { grid-template-columns: 1fr; padding-top: 92px; }
.side { position: static; }
}
/* --- ozellik gruplari ------------------------------------------------------ */
.feature-group ul { list-style: none; margin: 0; padding: 0; }
.feature-group li {
display: flex; align-items: baseline; gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--line-soft);
font-size: 14.5px; color: var(--text-dim);
}
.feature-group li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Durum yalnizca renkle anlatilmiyor: acik madde dolu bir isaret, kapali
madde ustu cizili bir isaret aliyor, ayrica ekran okuyucu icin metin var. */
.feature-group .mark {
flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
position: relative; top: -1px;
}
.feature-group .is-on .mark { background: var(--gold); }
.feature-group li.is-on .mark { background: var(--gold); }
.feature-group li.is-off .mark {
background: transparent;
border: 1px solid var(--flame);
}
.feature-group li.is-off { color: var(--text-faint); }
.feature-group li.is-off span:nth-child(2) { text-decoration: line-through; text-decoration-color: rgba(194,69,45,.5); }
/* --- tanitim: harita izgarasi ---------------------------------------------- */
.maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.map {
margin: 0; position: relative;
border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; background: var(--ink-700);
}
.map img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.map figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 22px 14px 11px;
background: linear-gradient(to top, rgba(6,2,1,.92), transparent);
font-family: Georgia, serif; font-size: 15px; color: var(--text);
}
/* gorsel yokken: ad + beklenen dosya yolu */
.map-empty {
display: grid; place-content: center;
aspect-ratio: 16 / 10;
border-style: dashed;
background:
repeating-linear-gradient(45deg,
rgba(58, 26, 16, .16) 0 12px, transparent 12px 24px),
var(--ink-700);
}
.map-empty .map-slot {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 12px; color: var(--gold-deep);
padding: 5px 10px; border: 1px solid var(--line); border-radius: 5px;
background: rgba(6,2,1,.45);
}
.map-empty figcaption { position: static; background: none; padding: 12px 14px 0; text-align: center; }
@media (max-width: 900px) { .maps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .maps { grid-template-columns: 1fr; } }
/* --- kartlar --------------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--edge);
border-radius: var(--radius);
padding: 26px;
box-shadow: var(--lift);
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.card:hover {
background: var(--surface-lit);
border-color: var(--edge-lit);
box-shadow: var(--lift-hi);
transform: translateY(-3px);
}
.card.flat:hover { transform: none; border-color: var(--glass-line); }
.card h3 { font-size: 18px; color: var(--gold); margin-bottom: .45em; }
.card p { margin: 0; color: var(--text-dim); font-size: 15px; }
/* --- rozet seridi (Ozel Altyapi / Aktif Yonetim / Adil Oyun) --------------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.chip {
border: 1px solid var(--glass-line);
background: rgba(69, 18, 5, .2);
border-radius: 100px;
padding: 8px 16px;
font-size: 12.5px; font-weight: 600;
color: var(--text-dim);
}
/* --- acik / kapali listesi ------------------------------------------------- */
.state-list { list-style: none; margin: 0; padding: 0; }
.state-list li {
display: flex; align-items: baseline; gap: 14px;
padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.state-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.state-list li:first-child { padding-top: 0; }
.tag {
flex: 0 0 auto;
font-size: 10.5px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
padding: 4px 10px; border-radius: 100px; border: 1px solid;
}
.tag-on { color: var(--gold); border-color: var(--gold-deep); background: rgba(218, 176, 106, .08); }
.tag-off { color: var(--flame); border-color: rgba(194, 55, 28, .5); background: rgba(194, 55, 28, .08); }
.state-list .what { font-weight: 600; color: var(--text); }
.state-list .why { color: var(--text-dim); font-size: 15px; }
/* --- duyurular ------------------------------------------------------------- */
/* --- duyuru sayfasi (haberler.php) ------------------------------------------
Landing'deki .news-item kart izgarasindan farkli: burada tam genislikte
okuma duzeni. .when ve baslik bicimi ortak kalsin diye .news-item ile ayni
degerler kullaniliyor. */
.haber-liste { display: grid; gap: 18px; }
.haber-kart h2 { font-size: 21px; margin: 0 0 .35em; }
.haber-kart h2 a { color: var(--text); }
.haber-kart h2 a:hover { color: var(--gold); }
.haber-kart p { color: var(--text-dim); margin: 0 0 14px; }
.haber-tek p { color: var(--text-dim); margin: 0 0 1em; }
.haber-tek p:last-child { margin-bottom: 0; }
/* Panel icinde "veri yok" satiri. Onceden her sayfa bunu satir ici style ile
yaziyordu. */
.bos { color: var(--text-faint); margin: 0 0 14px; }
.panel .bos:last-child { margin-bottom: 0; }
.news-item { display: grid; gap: 6px; }
.news-item .when,
.haber-kart .when {
display: block; margin-bottom: 6px;
font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
color: var(--gold-deep);
}
.news-item h3 { font-size: 21px; margin-bottom: .2em; }
.news-item p { color: var(--text-dim); margin: 0 0 14px; }
/* --- durum rozeti ---------------------------------------------------------- */
.status {
display: inline-flex; align-items: center; gap: 9px;
padding: 7px 14px; border-radius: 100px;
background: rgba(6, 2, 1, .5);
border: 1px solid var(--glass-line);
font-size: 12.5px; white-space: nowrap;
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.status.on .dot { background: #5FBF7A; box-shadow: 0 0 0 4px rgba(95, 191, 122, .16); }
.status.off .dot { background: var(--flame); box-shadow: 0 0 0 4px rgba(194, 55, 28, .16); }
.status .what { font-weight: 700; }
.status.on .what { color: #7FCF95; }
.status.off .what { color: var(--flame-lit); }
.status .detail { color: var(--text-faint); }
/* --- yan sosyal cubuk ------------------------------------------------------ */
.social-rail {
position: fixed; right: 0; top: 50%; transform: translateY(-50%);
z-index: 150;
display: flex; flex-direction: column;
border: 1px solid var(--line); border-right: 0;
border-radius: 8px 0 0 8px;
background: rgba(6, 2, 1, .82);
backdrop-filter: blur(6px);
overflow: hidden;
}
.social-rail a {
padding: 12px 13px;
color: var(--text-dim);
border-bottom: 1px solid var(--line-soft);
font-size: 13px; font-weight: 700;
transition: background .2s ease, color .2s ease;
}
.social-rail a:last-child { border-bottom: 0; }
.social-rail a:hover { background: var(--ember-deep); color: var(--gold); }
/* --- galeri ---------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.shot {
position: relative; display: block;
border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; aspect-ratio: 16 / 9;
background: var(--ink-700); cursor: zoom-in;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.shot:hover img { transform: scale(1.06); }
.lightbox {
position: fixed; inset: 0; z-index: 400;
display: none; place-items: center;
background: rgba(3, 1, 0, .94); padding: 30px;
}
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 8px; }
.lightbox-close {
position: absolute; top: 18px; right: 22px;
background: none; border: 0; color: var(--text-dim);
font-size: 34px; line-height: 1; cursor: pointer; padding: 8px;
}
.lightbox-close:hover { color: var(--gold); }
/* --- SSS ------------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
background: var(--surface);
border: 1px solid var(--edge);
border-radius: var(--radius);
margin-bottom: 12px; overflow: hidden;
box-shadow: var(--lift);
}
.faq details[open] { border-color: var(--glass-lit); }
.faq summary {
padding: 19px 54px 19px 24px;
cursor: pointer; position: relative; list-style: none;
font-family: Georgia, serif; font-size: 17.5px; font-weight: 700;
color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq summary::after {
content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
color: var(--gold); font-family: "Segoe UI", sans-serif;
font-size: 24px; font-weight: 400; line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 24px 21px; color: var(--text-dim); font-size: 15.5px; }
.faq .answer p { margin: 0; }
/* --- indirme --------------------------------------------------------------- */
.dl { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dl .meta h3 { margin-bottom: .2em; }
.dl .meta p { margin: 0; }
.badge-soon {
display: inline-block;
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-faint); border: 1px dashed var(--line);
padding: 6px 14px; border-radius: 100px;
}
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li {
counter-increment: step; position: relative;
padding: 0 0 26px 48px;
border-left: 1px solid var(--line-soft); margin-left: 16px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
content: counter(step);
position: absolute; left: -16px; top: -3px;
width: 32px; height: 32px; border-radius: 50%;
background: var(--ink-800); border: 1px solid var(--gold-deep); color: var(--gold);
display: grid; place-items: center; font-size: 13.5px; font-weight: 700;
}
.steps h3 { font-size: 17px; margin-bottom: .25em; }
.steps p { margin: 0; color: var(--text-dim); font-size: 15px; }
code {
background: rgba(69, 18, 5, .35);
border: 1px solid var(--line);
padding: 2px 7px; border-radius: 5px;
font-size: .9em; color: var(--gold-lit);
}
.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { text-align: left; padding: 13px 4px; border-bottom: 1px solid var(--line-soft); }
.facts th { color: var(--text-dim); font-weight: 600; width: 46%; }
.facts td { color: var(--text); font-variant-numeric: tabular-nums; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
/* --- kurallar -------------------------------------------------------------- */
.rules { list-style: none; margin: 0; padding: 0; counter-reset: rule; }
.rules li {
counter-increment: rule;
background: var(--surface);
border: 1px solid var(--edge);
border-radius: var(--radius);
padding: 22px 24px 22px 68px;
margin-bottom: 13px; position: relative;
box-shadow: var(--lift);
}
.rules li::before {
content: counter(rule, decimal-leading-zero);
position: absolute; left: 24px; top: 21px;
font-family: Georgia, serif; font-size: 20px; font-weight: 700;
color: var(--gold-deep);
}
.rules h3 { font-size: 17.5px; margin-bottom: .3em; }
.rules p { margin: 0; color: var(--text-dim); font-size: 15px; }
/* --- kapanis cagrisi ------------------------------------------------------- */
.closing {
text-align: center;
padding: 92px 0;
border-top: 1px solid var(--line);
background:
radial-gradient(80% 130% at 50% 100%, rgba(145, 35, 21, .22) 0%, transparent 70%),
var(--ink-900);
}
/* --- alt bar --------------------------------------------------------------- */
.site-foot { background: var(--ink-800); border-top: 1px solid var(--line); }
.foot-inner {
display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap;
padding-top: 44px; padding-bottom: 30px;
}
.foot-brand img { width: 116px; margin-bottom: 10px; }
.foot-note { margin: 0; color: var(--text-dim); font-size: 14.5px; }
.foot-nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.foot-nav a { color: var(--text-dim); font-size: 14.5px; }
.foot-nav a:hover { color: var(--gold); }
.foot-legal { border-top: 1px solid var(--line-soft); padding-top: 18px; padding-bottom: 30px; }
.foot-legal p { margin: 0; color: var(--text-faint); font-size: 12.5px; }
/* --- beliriverme ----------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.seen { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* --- dar ekran ------------------------------------------------------------- */
@media (max-width: 1040px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.pillar:nth-child(2) { border-right: 0; }
.pillar:nth-child(1), .pillar:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
.split { grid-template-columns: 1fr; gap: 30px; }
.split.flip .split-text { order: 0; }
.social-rail { display: none; }
}
@media (max-width: 900px) {
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.gallery { grid-template-columns: repeat(2, 1fr); }
}
/* Ust bar dar ekranda once ayrintilarini birakir, sonra hamburger'e gecer.
Esik 700px'teyken menu 800px civarinda iki satira sariyordu - dort baglanti
+ rozet + buton o genislige sigmiyor. */
/* Dar masaustu: menu daralir, durum rozetinin ayrintisi gizlenir.
Eskiden bu iki kademeydi (1220 padding 10px, 1120 padding 8px). Tek kademeye
indirildi ve 1040-1240 bandinda menunun sarmadigi olculerek dogrulandi -
ara kademe gereksizmis. */
/* Dar masaustu: menu daralir, durum rozetinin ayrintisi gizlenir.
MENUDEKI BAGLANTI SAYISI 6'YI GECMEMELI. Olculdu (1045 px, bu dolgularla):
menuye kalan yer 505 px, alti baglanti 460 px istiyor - 45 px pay var.
Yedinci baglanti eklendiginde istek 534'e cikiyor ve menu iki satira
dusuyor; hamburger esigi 1040 oldugu icin arada kimse kurtarmiyor.
Yedi baglantinin tek satira sigmasi ~1102 px istiyor.
Hesapta .wrap'in 24 px'lik YAN DOLGUSU unutulmasin: menuye kalan yer
viewport - 48 - (logo 120 + rozet 101 + CTA 211 + 3 x gap 20). */
@media (max-width: 1240px) {
.nav a { padding: 10px 9px; letter-spacing: .06em; font-size: 12px; }
.status .detail { display: none; }
}
@media (max-width: 1040px) {
.nav-toggle { display: block; }
.head-inner { position: relative; min-height: 68px; }
.head-inner .status, .head-cta { display: none; }
.nav {
display: none;
position: absolute; left: -24px; right: -24px; top: 100%;
flex-direction: column; gap: 0;
background: rgba(6, 2, 1, .97);
backdrop-filter: blur(10px);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 8px 24px 16px;
}
.nav.open { display: flex; }
.nav a { padding: 13px 4px; }
.nav a::after { left: 4px; right: 4px; bottom: 8px; }
}
@media (max-width: 760px) {
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
.gallery { grid-template-columns: 1fr; }
.pillar { border-right: 0; border-bottom: 1px solid var(--line-soft); }
.pillar:last-child { border-bottom: 0; }
.brand img { width: 104px; }
.hero { min-height: auto; padding: 112px 0 68px; }
.section { padding: var(--sp-7) 0; }
.closing { padding: 66px 0; }
.state-list li { flex-direction: column; gap: 7px; }
.rules li { padding: 20px; }
.rules li::before { position: static; display: block; margin-bottom: 6px; }
.clock b { font-size: 26px; }
/* Alt bar baglantilari mobilde 25 px yuksekligindeydi - parmakla vurmak
icin dar. Dikey dolgu ile ~41 px'e cikiyor; WCAG 2.5.8 asgarisi 24 px,
onerilen 44. Yatay dolgu YOK, cunku baglantilar zaten flex gap ile
ayrilmis ve yatay dolgu onlari birbirine yapistirirdi. */
.foot-nav { gap: 4px 22px; }
.foot-nav a { padding: 8px 0; }
}
/* --- hareketi azalt -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hero-fallback .glow-haze, .scroll-hint i { animation: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.btn:hover, .card:hover { transform: none; }
.shot:hover img { transform: none; }
/* Sis ve kor KAYBOLMUYOR, sadece duruyor: ikisi de hero'nun rengini
tasiyor, gizlenseydi hero duzlesirdi. Hareketi rahatsiz eden sey,
katmanin kendisi degil. */
.hero-fog span, .hero-glow, .hero-logo { animation: none; }
.hero-glow { opacity: .85; }
/* Ziyaretci hero'daki dugmeyle ACIKCA istediyse hareketi geri ver.
Windows'un "animasyon efektleri" anahtari asiri yuklu - cogu kisi onu
hiz icin kapatiyor, tarayici yine de reduce diyor. Tercihi ezmiyoruz,
kapiyi aciyoruz; secim localStorage'da. */
.hareket-acik .hero-fog span:nth-child(1) { animation: sis 54s linear infinite; }
.hareket-acik .hero-fog span:nth-child(2) { animation: sis 83s linear infinite reverse; }
.hareket-acik .hero-glow { animation: nefes 8s ease-in-out infinite alternate; opacity: 1; }
.hareket-acik .hero-logo { animation: logoNefes 9s ease-in-out infinite alternate; }
/* Baslik pariltisi tek seferlik ama yine de hareket. Animasyon kapaninca
background-position baslangic degerinde (%100) kalir - orasi gradyanin
UCUNCU parcasi, yani normal altin rampasi. Baslik dogru gorunur. */
.hero h1 { animation: none; }
}
/* ===========================================================================
YONETIM PANELI (web/yonetim/)
Sitenin renk ve yuzey sistemini paylasiyor (--surface / --edge / --lift),
ama duzeni farkli: hero yok, genis icerik, yogun tablo. Panel bir vitrin
degil, calisma ekrani.
=========================================================================== */
/* --- giris ekrani ---------------------------------------------------------- */
body.yon-giris {
display: grid; place-items: center;
min-height: 100vh; padding: 24px;
}
.yon-kutu {
width: 100%; max-width: 380px;
padding: 32px;
border: 1px solid var(--edge);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--lift-hi);
}
.yon-baslik {
font-size: 22px; margin-bottom: 24px; text-align: center;
color: var(--gold);
}
.yon-baslik span { color: var(--text-faint); font-weight: 400; }
.yon-form { display: grid; gap: 8px; }
.yon-form label { font-size: 13px; color: var(--text-faint); margin-top: 6px; }
.yon-form .btn { margin-top: 16px; }
/* Dogrulama kodu: rakamlar hizali ve buyuk - elle yaziliyor, yanlis okuma
dogrudan basarisiz giris demek. */
.yon-kod {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 24px; letter-spacing: .3em; text-align: center;
}
.yon-alt { margin: 18px 0 0; text-align: center; font-size: 13px; }
.yon-alt a { color: var(--text-faint); }
.yon-alt a:hover { color: var(--gold); }
/* --- panel iskeleti -------------------------------------------------------- */
.yon-bar {
border-bottom: 1px solid var(--line);
background: rgba(6, 2, 1, .92);
position: sticky; top: 0; z-index: 100;
}
.yon-bar-ic {
max-width: 1320px; margin: 0 auto; padding: 0 22px;
display: flex; align-items: center; gap: 22px; min-height: 58px;
}
.yon-marka { color: var(--gold); font-weight: 700; flex: 0 0 auto; }
.yon-marka span { color: var(--text-faint); font-weight: 400; }
.yon-menu { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.yon-menu a {
padding: 9px 12px; border-radius: 6px;
color: var(--text-dim); font-size: 13.5px;
}
.yon-menu a:hover { background: rgba(218, 176, 106, .08); color: var(--gold); }
.yon-menu a.on { background: rgba(218, 176, 106, .14); color: var(--gold); }
.yon-sag { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.yon-kim { color: var(--text-faint); font-size: 13px; }
.yon-icerik { max-width: 1320px; margin: 0 auto; padding: 26px 22px 60px; }
.yon-h1 { font-size: 24px; margin-bottom: 22px; }
/* --- gosterge kartlari ----------------------------------------------------- */
.yon-kartlar {
display: grid; gap: 12px; margin-bottom: 22px;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.yon-kart {
display: grid; gap: 2px;
padding: 16px 18px;
border: 1px solid var(--edge);
border-left-width: 3px;
border-radius: var(--radius);
background: var(--surface);
color: inherit;
}
a.yon-kart:hover { border-color: var(--edge-lit); border-left-color: var(--gold); }
.yon-kart-ad { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.yon-kart-deger { font-family: Georgia, serif; font-size: 27px; color: var(--text); line-height: 1.2; }
.yon-kart-alt { font-size: 12.5px; color: var(--text-faint); }
/* Durum renkleri sol kenarda: kart icerigini boyamadan dikkat cekiyor. */
.yon-kart.iyi { border-left-color: #5FBF7A; }
.yon-kart.kotu { border-left-color: var(--flame); }
.yon-kart.dikkat { border-left-color: var(--gold); }
.yon-kart.dikkat .yon-kart-deger { color: var(--gold); }
/* --- tablo ----------------------------------------------------------------- */
.yon-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.yon-tablo th {
text-align: left; padding: 8px 10px;
color: var(--gold-deep); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase;
border-bottom: 1px solid var(--line);
}
.yon-tablo td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
.yon-tablo tbody tr:last-child td { border-bottom: 0; }
.yon-tablo tbody tr:hover { background: rgba(69, 18, 5, .18); }
.yon-tablo .sag { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); }
.yon-tablo .sag.eksi { color: var(--flame-lit); }
.yon-tablo tr.hatali td { color: var(--flame-lit); }
@media (max-width: 900px) {
.yon-bar-ic { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.yon-menu { order: 3; width: 100%; margin-left: 0; }
.yon-sag { margin-left: auto; }
}