içinde → biraz daha büyük.
Aktif dil tıklanamaz (.on · yeşil), diğeri bağlantıdır. */
.p-lang {
display: inline-flex; align-items: center; gap: 2px;
padding: 3px; border-radius: 20px;
background: rgba(148,163,184,.10); border: 1px solid var(--p-border);
font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
line-height: 1; white-space: nowrap; vertical-align: middle;
}
.p-lang > span,
.p-lang > a {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 9px; border-radius: 15px;
color: var(--p-muted-2); text-decoration: none;
transition: background .18s, color .18s;
}
.p-lang > a:hover { background: rgba(148,163,184,.16); color: var(--p-text); }
.p-lang > span.on {
background: rgba(34,197,94,.16); color: var(--p-green-text);
box-shadow: inset 0 0 0 1px rgba(34,197,94,.30);
}
.p-hero-lang { margin-bottom: 20px; }
.p-lang-hero {
font-size: 12.5px; padding: 4px;
background: rgba(148,163,184,.07); border-color: var(--p-hair-2);
}
.p-lang-hero > span,
.p-lang-hero > a { padding: 7px 13px; border-radius: 16px; }
.nav-badge {
display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 2px;
border-radius: 10px; background: #ef4444; color: #fff;
font-size: 10px; font-weight: 800; text-align: center; line-height: 16px;
}
/* ---------- KULLANICI AÇILIR MENÜSÜ (hesap menüsü) ---------- */
.nav-user { position: relative; }
button.p-user.nav-me {
cursor: pointer; font-family: inherit; color: var(--p-text-soft);
transition: background .18s, border-color .18s, color .18s;
}
.p-user.nav-me:hover,
.nav-user.open .p-user.nav-me {
background: rgba(148,163,184,.15); color: var(--p-text-strong);
border-color: rgba(148,163,184,.42);
}
.p-user.nav-me .caret {
font-size: 10px; line-height: 1; color: var(--p-muted);
transition: transform .18s;
}
.nav-user:hover .p-user.nav-me .caret,
.nav-user.open .p-user.nav-me .caret { transform: rotate(180deg); color: var(--p-text-soft); }
/* avatarın köşesindeki bildirim rozeti (menü kapalıyken de görünür) */
.nav-me .ava-wrap { position: relative; display: inline-flex; }
.nav-dot {
position: absolute; top: -6px; right: -6px;
min-width: 17px; height: 17px; padding: 0 4px;
display: grid; place-items: center;
border-radius: 9px; background: #ef4444; color: #fff;
font-size: 9.5px; font-weight: 800; line-height: 1;
border: 1.5px solid var(--p-menu-2);
box-shadow: 0 2px 6px rgba(239,68,68,.45);
}
.nav-drop {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
min-width: 236px; padding: 7px;
background: linear-gradient(180deg, var(--p-menu-1), var(--p-menu-2));
border: 1px solid var(--p-border); border-radius: 15px;
box-shadow: 0 22px 48px rgba(0,0,0,.55);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .17s, transform .17s, visibility .17s;
}
/* butondan menüye geçerken arada kapanmasın diye görünmez köprü */
.nav-drop::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-user:hover .nav-drop,
.nav-user:focus-within .nav-drop,
.nav-user.open .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nd-head {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px 11px; margin-bottom: 5px;
border-bottom: 1px solid rgba(148,163,184,.14);
}
.nd-head .nd-ava { object-fit: cover; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #06121f; }
.nd-id { min-width: 0; }
.nd-nm { display: block; font-size: 13px; font-weight: 700; color: var(--p-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-un { display: block; font-size: 11px; color: var(--p-muted); }
.nav-drop a {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px; border-radius: 10px;
color: var(--p-text-soft); text-decoration: none;
font-size: 13px; font-weight: 600; transition: .15s;
}
.nav-drop a:hover { background: rgba(148,163,184,.13); color: var(--p-text-strong); }
.nav-drop a.on { background: rgba(34,197,94,.13); color: var(--p-active-text); }
.nav-drop a .nd-ic { width: 18px; text-align: center; font-size: 14px; }
.nav-drop a .nav-badge { margin-left: auto; }
/* 🎁 Ödüller satırındaki "YENİ" ipucu — yalnızca ödül alınmadıysa (includes/layout.php) */
.nav-drop a .nd-new {
margin-left: auto;
padding: 2px 7px; border-radius: 8px;
background: rgba(251,191,36,.16); border: 1px solid rgba(251,191,36,.45);
color: #fbbf24; font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
}
.nav-drop .nd-sep { height: 1px; margin: 6px 4px; background: rgba(148,163,184,.14); }
.nav-drop a.nd-out { color: var(--p-red-text); }
.nav-drop a.nd-out:hover { background: rgba(239,68,68,.15); color: var(--p-red-text-2); }
/* 🧭 HESAP MENÜSÜ · 📱 SİTE SATIRLARI (yalnız mobil ≤980px) — includes/layout.php `.nd-site`
/farm'da navbar hamburger'ı kaldırıldı (games/farm/sidebar.css) → çekmecedeki menü
satırları (🎮 Oyunlar · 🏆 Sıralamalar · 📜 Kurallar · ❓ SSS) hesap menüsüne taşındı.
Masaüstünde navbar `.links` zaten göründüğü için blok gizli kalır (çift satır olmaz). */
.nd-site { display: none; }
@media (max-width: 980px) {
/* ⚠️ Satır görünümü `.nav-drop a` temel kuralından gelir (flex · 9px 11px) → ek stil gerekmez */
.nd-site { display: block; }
}
/* 🔝 MENÜ AÇIKKEN NAVBAR = EN ÜST KATMAN (`.p-nav.nav-above` ← layout.php hesap menüsü IIFE'si)
Sorun: `.nav-drop` z-index 70 olsa da ebeveyni `.p-nav` (z-index 50) katmanında kalıyordu →
/farm'da sol menü (66) · sarı ☰ tutamaç (106) · etkinlik çekmecesi (9500) menünün ÜSTÜNDE
açılıyordu. Çözüm: menü açıkken navbar 9600'e çıkar (yukarıdaki katmanların tümünün üstü). */
.p-nav.nav-above { z-index: 9600; }
/* ============================================================
KAYDIRMA ÇUBUKLARI (tüm dikey + yatay scroll alanları)
Renkler temaya göre assets/themes.css içindeki --p-scroll-* ile gelir.
============================================================ */
* {
scrollbar-width: thin;
scrollbar-color: var(--p-scroll-thumb, rgba(148,163,184,.42)) var(--p-scroll-track, rgba(4,8,16,.3));
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
background: var(--p-scroll-track, rgba(4,8,16,.3));
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(180deg, var(--p-scroll-thumb, rgba(148,163,184,.42)), var(--p-scroll-thumb, rgba(148,163,184,.28)));
border: 3px solid transparent; /* çubuğu inceltir */
background-clip: padding-box;
min-height: 40px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--p-scroll-hover, #22c55e);
border: 3px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active { filter: brightness(1.15); }
::-webkit-scrollbar-corner { background: transparent; }
/* Yatay kaydırma alanları (tablo, kod bloğu, şerit) */
::-webkit-scrollbar-track:horizontal { border-radius: 10px; }
/* ============================================================
HAREKET KAYDI / BİLDİRİM ÖĞELERİ (panel + çiftlik ortak)
============================================================ */
.lk-item {
position: relative;
display: flex; align-items: flex-start; gap: 11px;
padding: 11px 12px; border-radius: 12px;
background: var(--p-card); border: 1px solid var(--p-border);
}
.lk-item.unread { background: rgba(34,197,94,.07); border-color: rgba(34,197,94,.3); }
.lk-item .lk-ic { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.lk-item .lk-txt { flex: 1; min-width: 0; }
.lk-item .lk-t { font-size: 12.5px; font-weight: 700; }
.lk-item .lk-b { font-size: 11.5px; color: var(--p-muted); margin-top: 2px; }
.lk-item .lk-m { font-size: 10.5px; color: var(--p-muted-2); margin-top: 3px; }
.lk-item .lk-m b.plus { color: var(--p-green-text); }
.lk-item .lk-m b.minus { color: var(--p-red-text); }
.lk-item .lk-dot {
width: 7px; height: 7px; flex: 0 0 7px; margin-top: 5px;
border-radius: 50%; background: var(--p-active-text); opacity: 0;
}
.lk-item.unread .lk-dot { opacity: 1; }
.lk-empty {
padding: 22px; text-align: center; font-size: 12.5px; color: var(--p-muted-2);
border: 1.5px dashed rgba(148,163,184,.22); border-radius: 12px;
}
/* tür bazlı renkli şerit */
.lk-item.kind-sale { border-left: 3px solid var(--p-warn-text); }
.lk-item.kind-harvest { border-left: 3px solid var(--p-green-text); }
.lk-item.kind-crop_ready { border-left: 3px solid var(--p-green-text-2); }
.lk-item.kind-prod_ready,
.lk-item.kind-collect { border-left: 3px solid var(--p-sky-text); }
.lk-item.kind-warn { border-left: 3px solid #ef4444; }
.lk-item.kind-level { border-left: 3px solid var(--p-purple-text); }
.lk-item.kind-aid { border-left: 3px solid var(--p-warn-text); }
/* Hayvan bildirimleri */
.lk-item.kind-animal_ready { border-left: 3px solid var(--p-sky-text-2, var(--p-sky-text)); }
.lk-item.kind-animal_hungry { border-left: 3px solid var(--p-warn-text); }
.lk-item.kind-animal_warn,
.lk-item.kind-animal_dead { border-left: 3px solid #ef4444; }
.lk-item.kind-animal_buy,
.lk-item.kind-animal_sell { border-left: 3px solid var(--p-green-text); }
.lk-item.kind-animal_feed,
.lk-item.kind-animal_collect{ border-left: 3px solid var(--p-sky-text); }
/* Pazar & NPC sözleşmesi bildirimleri */
.lk-item.kind-market_news { border-left: 3px solid var(--p-sky-text); }
.lk-item.kind-contract_new { border-left: 3px solid var(--p-warn-text); }
.lk-item.kind-contract_warn { border-left: 3px solid #f97316; }
.lk-item.kind-contract_expired { border-left: 3px solid #ef4444; }
.lk-item.kind-contract_done { border-left: 3px solid var(--p-green-text); }
.lk-item.kind-contract_cancel { border-left: 3px solid var(--p-muted); }
/* P2P pazar, banka ve alarm bildirimleri */
.lk-item.kind-p2p_list,
.lk-item.kind-p2p_expired { border-left: 3px solid var(--p-muted); }
.lk-item.kind-p2p_sell,
.lk-item.kind-bank_interest { border-left: 3px solid var(--p-warn-text); }
.lk-item.kind-p2p_buy { border-left: 3px solid var(--p-sky-text); }
.lk-item.kind-p2p_cancel,
.lk-item.kind-p2p_expire_wait { border-left: 3px solid #f97316; }
.lk-item.kind-bank_deposit,
.lk-item.kind-bank_withdraw { border-left: 3px solid var(--p-sky-text); }
.lk-item.kind-bank_borrow { border-left: 3px solid var(--p-purple-text); }
.lk-item.kind-bank_repay { border-left: 3px solid var(--p-green-text); }
.lk-item.kind-bank_loan_due,
.lk-item.kind-bank_loan_interest,
.lk-item.kind-bank_penalty { border-left: 3px solid #ef4444; }
.lk-item.kind-alert_set { border-left: 3px solid var(--p-sky-text); }
.lk-item.kind-alert_hit { border-left: 3px solid var(--p-warn-text); }
/* 🥇 Borsa bildirimleri (alım · satım · kasa kirası · 🔔 analist uyarısı) */
.lk-item.kind-bourse_buy { border-left: 3px solid var(--p-green-text); }
.lk-item.kind-bourse_sell { border-left: 3px solid var(--p-warn-text); }
.lk-item.kind-bourse_fee { border-left: 3px solid var(--p-muted); }
.lk-item.kind-bourse_tip { border-left: 3px solid var(--p-purple-text); }
/* Sosyal bildirimler (arkadaşlık / mesaj) */
.lk-item.kind-friend_request { border-left: 3px solid var(--p-green-text); }
.lk-item.kind-friend_accept { border-left: 3px solid var(--p-sky-text); }
.lk-item.kind-friend_decline { border-left: 3px solid var(--p-muted); }
.lk-item.kind-friend_remove { border-left: 3px solid #f97316; }
.lk-item.kind-message { border-left: 3px solid var(--p-purple-text); }
.lk-item.kind-chat_mention { border-left: 3px solid var(--p-warn-text); }
/* Bildirim bağlantıları (arkadaşlık isteği / mesaj → ilgili sayfaya gider) */
a.lk-item, .lk-link {
text-decoration: none;
color: inherit;
cursor: pointer;
transition: background .15s;
}
a.lk-item:hover, .lk-link:hover { background: rgba(148, 163, 184, .1); }
/* panel (dashboard) kartı */
.lk-card .lk-list { display: flex; flex-direction: column; gap: 7px; max-height: 430px; overflow-y: auto; padding-right: 4px; }
.lk-card .lk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.lk-card .lk-head h3 { font-size: 17px; font-weight: 800; }
.lk-card .lk-head .sub { font-size: 11.5px; color: var(--p-muted); }
/* ---- navbar bildirim zili ---- */
.nav-me-wrap { position: relative; }
.nav-bell {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; padding: 0; border-radius: 50%;
cursor: pointer; font-family: inherit; color: var(--p-text);
background: var(--p-surface); border: 1px solid var(--p-border);
transition: background .18s, border-color .18s;
}
.nav-bell:hover,
.nav-me-wrap.open .nav-bell { background: rgba(148,163,184,.15); border-color: rgba(148,163,184,.42); }
.nav-bell .nb-ic { font-size: 17px; line-height: 1; }
.nav-bell .nb-n {
position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
display: grid; place-items: center; border-radius: 9px;
background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
border: 2px solid #0b1120;
}
.nav-bell .nb-n[hidden] { display: none; }
.nd-bell { min-width: 336px; max-width: 92vw; }
.nav-me-wrap:hover .nd-bell,
.nav-me-wrap:focus-within .nd-bell,
.nav-me-wrap.open .nd-bell { opacity: 1; visibility: visible; transform: translateY(0); }
.nd-bell-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 11px 10px; margin-bottom: 2px;
border-bottom: 1px solid rgba(148,163,184,.14);
font-size: 12.5px; font-weight: 800;
}
.nd-bell-head .sub { font-size: 10.5px; font-weight: 600; color: var(--p-muted); }
.nd-bell-list {
display: flex; flex-direction: column; gap: 6px;
max-height: 336px; overflow-y: auto; padding: 7px;
}
.nd-bell-list .lk-item { padding: 9px 10px; border-radius: 10px; }
.nd-bell-list .lk-t { font-size: 12px; }
.nd-bell-list .lk-b { font-size: 11px; }
.nd-bell-foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 8px 11px 3px; border-top: 1px solid rgba(148,163,184,.14);
}
.nd-bell-foot a { font-size: 12px; font-weight: 700; color: var(--p-accent); text-decoration: none; }
.nd-bell-foot a:hover { text-decoration: underline; }
@media (max-width: 640px) {
.nav-bell { width: 38px; height: 38px; }
.p-user.nav-me .nm { display: none; } /* 📱 avatarda ad yerine yalnız ikon+ok (yer kazanır) */
/* ⚠️ .nd-bell min-width ve .nd-bell-list max-height artık aşağıdaki panel
kuralında yönetilir (tam genişlik + tek iç kaydırma alanı). */
.nav-gift { height: 38px; padding: 0 12px; }
.nav-gift .ng-tx { display: none; }
/* 📱 AÇILIR MENÜLER (🔔 bildirim + 😀 hesap) = NAVBAR ALTI TAM GENİŞLİK
Eski hâl: .nav-drop (position:absolute; right:0) zilin/avatarın SAĞ kenarına
hizalıydı. Mobil navbar'da bu öğelerin sağında avatar/hamburger olduğu için
dar ekranda panel soldan ekran dışına taşıp kesiliyordu (ölçüm: 320px'te
104px, 360px'te 64px, 390px'te 34px). Çözüm: konumlanma bağlamı yukarı
taşınır → sticky .p-nav; sol/sağ 10px ile navbar genişliğine yayılır.
Masaüstü (>640px) etkilenmez: panel yine butonun hizasında açılır. */
.nav-me-wrap,
.nav-user { position: static; }
.nav-me-wrap .nd-bell,
.nav-user .nav-drop {
left: 10px; right: 10px;
min-width: 0; max-width: none;
/* 📱 KAYDIRMA: panel artık navbar'ın altında tam genişlik açıldığı için
hesap menüsü (TEMA listesi dahil) 500px'i aşıyor; eskiden max-height
yoktu → içerik ekran altına taşıyor ve KAYDIRILAMIYORDU (panel sticky
navbar'a bağlı olduğu için sayfa kaydırması da işe yaramıyordu).
Çözüm: panel içine max-height + overflow-y → parmakla panel içi kayar.
100vh yedek, 100dvh ise mobil adres çubuğu açık/kapalıyken doğru
yüksekliği verir (destekleyen tarayıcı ikinci satırı kullanır). */
max-height: calc(100vh - 96px);
max-height: calc(100dvh - 96px);
overflow-y: auto;
overscroll-behavior: contain; /* panel sonunda arka plana sıçramasın */
-webkit-overflow-scrolling: touch; /* iOS momentum kaydırma */
}
/* üstteki görünmez hover köprüsü overflow ile kırpılır → mobilde gereksiz */
.nav-me-wrap .nd-bell::before,
.nav-user .nav-drop::before { display: none; }
/* bildirim listesi panelin içinde ayrı kaydırma yaratmasın: tek kaydırma alanı */
.nd-bell-list { max-height: none; overflow-y: visible; }
}
/* 📐 KISA EKRANDA (dizüstü 768px · telefon yatay 390px yükseklik) panel ekran
altına taşabilir: menü navbar'a bağlı olduğu için sayfa kaydırması da işe
yaramaz → panel içine kaydırma verilir. Ölçüm: hesap menüsü ≈704px yüksek,
panelin üst kenarı navbar altı + 10px → 780px ve üzerindeki yüksekliklerde
zaten sığıyor, bu yüzden blok yalnız ≤780px'te devreye girer (yüksek
ekranlarda masaüstü görünümü birebir aynı kalır). */
@media (max-height: 780px) {
.nav-drop {
max-height: calc(100vh - 96px);
max-height: calc(100dvh - 96px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* aradaki görünmez hover köprüsü overflow ile kırpılır (kaydırma varken
fare geçişi panelde kalır, köprüye gerek kalmaz) */
.nav-drop::before { display: none; }
}
/* ---- navbar 🎁 GÜNLÜK ÖDÜL rozeti (🔔 zil / bildirim listesinden AYRI) ----
Yalnızca bugünkü ödül alınmadıysa basılır (includes/layout.php):
altın tonlu, nabız atan kısa düğme → /rewards (ödül + hediye kodu sayfası).
Ödül alınınca sayfa JS'i düğmeyi gizler (#nav-gift[hidden]) ve SSR
sonraki yüklemede rozeti hiç basmaz. */
.nav-gift {
display: inline-flex; align-items: center; gap: 7px;
height: 42px; padding: 0 14px; border-radius: 21px;
text-decoration: none; white-space: nowrap;
background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(234,179,8,.1));
border: 1px solid rgba(251,191,36,.5);
color: #fbbf24; font-size: 11.5px; font-weight: 800; letter-spacing: .4px;
animation: navGiftPulse 2.4s ease-in-out infinite;
transition: transform .18s, border-color .18s, background .18s;
}
.nav-gift:hover {
transform: translateY(-1px); border-color: #fbbf24;
background: linear-gradient(135deg, rgba(251,191,36,.34), rgba(234,179,8,.18));
}
.nav-gift .ng-ic { font-size: 17px; line-height: 1; }
.nav-gift[hidden] { display: none; }
/* 🗓️/📅 HAFTALIK & AYLIK ÖDÜL ROZETLERİ (günlük rozetin renk varyantları)
Markup: includes/layout.php · ilgili dönemde ödül alınmadıysa basılır.
Ödül alınınca `/rewards` JS'i kendi rozetini gizler (#nav-gift-wk/#nav-gift-mo). */
.nav-gift.wk {
background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(14,165,233,.1));
border-color: rgba(56,189,248,.5);
color: #7dd3fc;
animation: navGiftPulseWk 2.4s ease-in-out infinite;
}
.nav-gift.wk:hover {
border-color: #38bdf8;
background: linear-gradient(135deg, rgba(56,189,248,.34), rgba(14,165,233,.18));
}
@keyframes navGiftPulseWk {
0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,.45); }
50% { box-shadow: 0 0 0 7px rgba(56,189,248,0); }
}
.nav-gift.mo {
background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(22,163,74,.1));
border-color: rgba(34,197,94,.5);
color: #4ade80;
animation: navGiftPulseMo 2.4s ease-in-out infinite .8s;
}
.nav-gift.mo:hover {
border-color: #22c55e;
background: linear-gradient(135deg, rgba(34,197,94,.34), rgba(22,163,74,.18));
}
@keyframes navGiftPulseMo {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
50% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}
@keyframes navGiftPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.45); }
50% { box-shadow: 0 0 0 7px rgba(251,191,36,0); }
}
/* 📱/💻 Tablet bandı (≤1120px): rozet kompakt kalır (yalnız ikon: 🎁).
⚠️ Üst sınır 980 → 1120px (2026): tam masaüstü navbarın min-content
genişliği ~1073px (logo + tam link satırı + 🎁 metinli rozet + auth bloğu);
981-1072px bandında navbar sığmayıp sayfa yatay kayıyordu. 🎁 metni
gizlenince min-content ~973px'e iner → 981px'ten itibaren rahat sığar.
Bu nedenle kompakt band, mobil navbar eşiğinden (≤980px) AYRI ve daha
yukarıda tutulur: ≤980px hamburger, 981-1120px masaüstü nav + kompakt rozet.
≤980px'te navbar TEK SATIR kalır (linkler çekmeceye taşınır) →
kompakt rozet bandıyla birlikte 320-1120px arasında yatay taşma olmaz. */
@media (max-width: 1120px) {
.nav-gift .ng-tx { display: none; }
.nav-gift { padding: 0 12px; }
}
/* ============================================================
📱 MOBİL MENÜ (≤980px): hamburger + sağdan açılan çekmece
Markup: includes/layout.php → .p-burger · #nav-drawer · #nav-drawer-backdrop
JS : includes/layout.php (IIFE) · kilit sınıfı: html.nav-open
Kural: ≤980px'te navbar TEK SATIR kalır (eski flex-wrap sarma kaldırıldı);
menü linkleri çekmeceye taşınır → yatay taşma ve 2 satırlı navbar biter.
⚠️ EŞİK 860 → 980px (2026): `.p-nav` tabanı `flex-wrap`'siz (nowrap) olduğu
için 861-980px bandında logo + tam link satırı + auth bloğu sığmıyordu;
navbar min-content ~973px'e çıkıp sayfa yatay kayıyor, sağ taraf
kesiliyordu (900px'te ölçüldü: docSW 973 ↔ vw 900). Hamburger + çekmece
artık bu bandda da devreye girer.
⚠️ Eşik, üstteki 🎁 kompakt rozet bandı (≤1120px) ile BİRLİKTE çalışır:
≤980px hamburger, 981-1120px masaüstü nav + kompakt rozet (🎁 metni
gizli olduğu için sığar; metin açıkken min-content ~1073px → 981-1072px
bandında taşardı).
⚠️ JS resize eşiği (includes/layout.php IIFE) DE 980 olmalı — aksi hâlde
çekmece açıkken masaüstü eşiği erken tetiklenip kapanır/davranış
tutarsız kalır.
============================================================ */
/* (⚠️ ≤980px medya kuralları, .p-burger temel tanımından SONRA gelir — bkz. dosyanın bu bölümünün sonu) */
/* 🎨 HAMBURGER (3 çizgi → ✕ animasyonu) */
.p-burger {
display: none; /* masaüstünde gizli */
width: 42px; height: 42px; flex: 0 0 42px;
align-items: center; justify-content: center;
cursor: pointer; font-family: inherit;
background: rgba(148,163,184,.10);
border: 1px solid var(--p-border); border-radius: 12px;
color: var(--p-text);
transition: background .18s, border-color .18s;
}
.p-burger:hover { background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.42); }
.p-burger:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.p-burger .pb-bars,
.p-burger .pb-bars::before,
.p-burger .pb-bars::after {
display: block; width: 18px; height: 2px; border-radius: 2px;
background: currentColor;
transition: transform .22s ease, opacity .16s ease;
}
.p-burger .pb-bars { position: relative; }
.p-burger .pb-bars::before { content: ''; position: absolute; left: 0; top: -6px; }
.p-burger .pb-bars::after { content: ''; position: absolute; left: 0; top: 6px; }
.p-burger.open .pb-bars { transform: rotate(45deg); }
.p-burger.open .pb-bars::before { transform: translateY(6px) rotate(-90deg); }
.p-burger.open .pb-bars::after { opacity: 0; transform: translateY(-6px); }
/* 🗂️ PERDE + ÇEKMECE GÖVDESİ */
html.nav-open { overflow: hidden; } /* çekmece açıkken arka plan kaymasın */
.nav-drawer-backdrop {
position: fixed; inset: 0; z-index: 92;
background: rgba(4,8,16,.6);
backdrop-filter: blur(2px);
opacity: 0; transition: opacity .22s ease;
}
.nav-drawer-backdrop[hidden] { display: none; }
.nav-drawer-backdrop.show { opacity: 1; }
.nav-drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 93;
width: min(320px, 86vw);
display: flex; flex-direction: column;
background: linear-gradient(180deg, var(--p-menu-1), var(--p-menu-2));
border-left: 1px solid var(--p-border);
box-shadow: -22px 0 48px rgba(0,0,0,.55);
transform: translateX(102%); visibility: hidden;
overscroll-behavior: contain;
transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility .26s;
}
.nav-drawer.open { transform: translateX(0); visibility: visible; }
/* 🧭 ÇEKMECE İÇİ: başlık · linkler · alt bölüm (dil + giriş) */
.ndw-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 13px 13px 12px;
border-bottom: 1px solid rgba(148,163,184,.14);
}
.ndw-title { font-size: 12.5px; font-weight: 800; letter-spacing: .4px; color: var(--p-text-strong); }
.ndw-x {
width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; cursor: pointer;
font-family: inherit; font-size: 14px; line-height: 1;
background: rgba(148,163,184,.10); border: 1px solid var(--p-border); color: var(--p-text-soft);
transition: background .18s, color .18s;
}
.ndw-x:hover { background: rgba(148,163,184,.18); color: var(--p-text-strong); }
.ndw-body { flex: 1 1 auto; overflow-y: auto; padding: 10px; }
.ndw-link {
display: flex; align-items: center; gap: 12px;
min-height: 46px; padding: 11px 12px; /* parmakla basılabilir hedef (44px+) */
border-radius: 12px; text-decoration: none;
color: var(--p-text-soft); font-size: 14px; font-weight: 600;
transition: background .16s, color .16s;
}
.ndw-link:hover { background: rgba(148,163,184,.13); color: var(--p-text-strong); }
.ndw-link.on { background: rgba(34,197,94,.13); color: var(--p-active-text); }
.ndw-ic { width: 22px; flex: 0 0 22px; text-align: center; font-size: 16px; }
.ndw-new {
margin-left: auto; padding: 2px 7px; border-radius: 8px;
background: rgba(251,191,36,.16); border: 1px solid rgba(251,191,36,.45);
color: #fbbf24; font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
}
.ndw-link .nav-badge { margin-left: auto; }
.ndw-sep { height: 1px; margin: 8px 6px; background: rgba(148,163,184,.14); }
.ndw-out { color: var(--p-red-text); }
.ndw-out:hover { background: rgba(239,68,68,.15); color: var(--p-red-text-2); }
.ndw-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
padding: 12px 13px 15px;
border-top: 1px solid rgba(148,163,184,.14);
}
.ndw-auth { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
/* 📱 MOBİL NAVBAR DÜZENİ (≤980px) — ⚠️ SIRA ÖNEMLİ: .p-burger temel tanımından
(display:none) SONRA gelmeli, yoksa hamburger hiç görünmez. */
@media (max-width: 980px) {
.p-nav { flex-wrap: nowrap; gap: 10px; padding: 10px 14px; }
.p-nav .links { display: none; } /* linkler artık #nav-drawer içinde */
.p-logo { font-size: 15px; }
.p-logo .mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; font-size: 18px; }
.nav-drop { max-width: calc(100vw - 20px); } /* 320-360px'te menü ekrandan taşmasın */
.p-burger { display: inline-flex; } /* hamburger yalnız mobilde görünür */
}
/* 📱 Küçük telefon (≤520px): logo metni + navbar dil düğmesi çekmeceye devredilir */
@media (max-width: 520px) {
.p-nav { padding: 9px 12px; gap: 8px; }
.p-logo .txt { display: none; }
.p-nav .auth .p-lang { display: none; }
.p-nav .auth { gap: 8px; }
.p-burger { width: 40px; height: 40px; flex: 0 0 40px; }
}
/* ---------- BUTONLAR ---------- */
.p-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 20px; border-radius: 12px;
font-weight: 700; font-size: 13.5px;
text-decoration: none; cursor: pointer; border: 1px solid transparent;
transition: transform .15s, filter .2s, background .2s;
font-family: inherit;
}
.p-btn:active { transform: translateY(1px); }
.p-btn.primary { background: linear-gradient(180deg, #22c55e, #16a34a); color: #04140a; }
.p-btn.primary:hover { filter: brightness(1.08); }
/* ✨ Işık süpürmesi — yalnızca landing bölgelerinde (panel/oyun sayfaları etkilenmez) */
.p-hero .p-btn.primary,
.p-game .p-btn.primary,
.p-cta .p-btn.primary { position: relative; overflow: hidden; }
.p-hero .p-btn.primary::after,
.p-game .p-btn.primary::after,
.p-cta .p-btn.primary::after {
content: '';
position: absolute; top: -10%; bottom: -10%; width: 32%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
transform: translateX(-180%) skewX(-18deg);
animation: pShine 3.6s ease-in-out infinite;
pointer-events: none;
}
.p-hero .p-btn.primary.lg::after { animation-delay: .5s; }
.p-btn.ghost { background: rgba(148,163,184,.1); color: var(--p-text-soft); border-color: var(--p-border); }
.p-btn.ghost:hover { background: rgba(148,163,184,.16); color: var(--p-text-strong); }
.p-btn.sky { background: rgba(56,189,248,.14); color: var(--p-sky-text); border-color: rgba(56,189,248,.4); }
.p-btn.sky:hover { background: rgba(56,189,248,.22); }
.p-btn.sm { padding: 8px 14px; font-size: 12.5px; border-radius: 10px; }
.p-btn.lg { padding: 15px 28px; font-size: 15px; border-radius: 14px; }
.p-btn.block { width: 100%; }
.p-btn.disabled { opacity: .5; pointer-events: none; }
/* ---------- HERO ---------- */
.p-hero {
max-width: 1180px;
margin: 0 auto;
padding: 70px 26px 44px;
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 44px;
align-items: center;
}
/* ✨ Giriş animasyonu: JS gerekmez, kademeli (prefers-reduced-motion'da kapanır) */
.p-hero > div > * { animation: pUp .55s cubic-bezier(.22, .68, .32, 1) both; }
.p-hero > div > *:nth-child(1) { animation-delay: .04s; }
.p-hero > div > *:nth-child(2) { animation-delay: .10s; }
.p-hero > div > *:nth-child(3) { animation-delay: .16s; }
.p-hero > div > *:nth-child(4) { animation-delay: .22s; }
.p-hero > div > *:nth-child(5) { animation-delay: .28s; }
.p-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border-radius: 20px;
background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.32);
color: var(--p-green-text); font-size: 12px; font-weight: 700; letter-spacing: .5px;
margin-bottom: 20px; max-width: 100%; white-space: nowrap;
}
.p-badge .ic { font-size: 13px; line-height: 1; }
/* ============================================================
🏷️ SÜRÜM / AŞAMA ETİKETİ (BETA vX.Y.Z) — tek kaynak: auth/config.php
------------------------------------------------------------
Soluk, tıklanamaz ve küçük → hiçbir akışı/menüyü engellemez.
Kullanıldığı yerler: hero rozeti (.hero) · navbar logo (.nav) · footer.
============================================================ */
.app-ver {
display: inline-block; padding: 3px 9px; border-radius: 999px;
font-size: 10.5px; font-weight: 800; letter-spacing: .6px; line-height: 1.5;
color: var(--p-muted); background: rgba(148, 163, 184, .12);
border: 1px solid var(--p-border);
vertical-align: middle; white-space: nowrap;
user-select: none; -webkit-user-select: none; pointer-events: none;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.app-ver.hero { margin-left: 8px; }
.app-ver.nav { font-size: 9.5px; padding: 2px 7px; }
@media (max-width: 720px) {
/* Mobilde navbar etiketi gizlenir (yer daralmasın) — hero rozeti görünür kalır */
.app-ver.nav { display: none; }
}
.p-hero h1 {
font-size: 52px; line-height: 1.06; font-weight: 800; letter-spacing: -.5px;
margin-bottom: 18px;
}
.p-hero h1 em {
font-style: normal;
background: linear-gradient(90deg, var(--p-green-text-2), #38bdf8);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-hero p.lead {
color: var(--p-muted); font-size: 16.5px; max-width: 520px; margin-bottom: 28px;
}
.p-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.p-hero-stats { display: flex; gap: 30px; margin-top: 34px; flex-wrap: wrap; }
.p-hero-stats .s .v { font-size: 26px; font-weight: 800; color: var(--p-accent); font-variant-numeric: tabular-nums; }
.p-hero-stats .s .l { font-size: 11.5px; color: var(--p-muted-2); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
/* 🎬 HERO VİTRİNİ — içi boş emoji kutusu yerine gerçek oyun listesi + canlı sayaç */
.p-hero-art {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 26px;
background:
radial-gradient(circle at 78% 8%, rgba(56,189,248,.2), transparent 55%),
linear-gradient(160deg, rgba(34,197,94,.16), rgba(56,189,248,.1));
border: 1px solid var(--p-border);
display: grid; place-items: center;
padding: 22px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,.45);
animation: pUp .6s cubic-bezier(.22, .68, .32, 1) .12s both;
}
.p-hero-art::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.08), transparent 55%);
pointer-events: none;
}
.p-art-glow {
position: absolute;
width: 64%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(34,197,94,.4), transparent 70%);
filter: blur(30px);
animation: pGlow 6.5s ease-in-out infinite;
}
.p-art-inner {
position: relative; z-index: 1; width: 100%;
display: flex; flex-direction: column; gap: 10px;
animation: pFloat 7s 1.1s ease-in-out infinite;
}
.p-art-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
}
.p-art-live { display: inline-flex; align-items: center; gap: 7px; color: var(--p-green-text-2); }
.p-art-live i {
width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
animation: pDot 1.9s ease-out infinite;
}
.p-art-tag { color: var(--p-muted-2); }
.p-art-games { display: flex; flex-direction: column; gap: 9px; }
.p-art-row {
display: flex; align-items: center; gap: 11px;
padding: 10px 12px; border-radius: 14px; text-decoration: none;
background: rgba(8,12,20,.5); border: 1px solid var(--p-border);
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.p-art-row:hover {
transform: translateX(4px);
background: color-mix(in srgb, var(--g, #22c55e) 12%, rgba(8,12,20,.62));
border-color: color-mix(in srgb, var(--g, #22c55e) 45%, transparent);
}
.p-art-row .ic {
width: 40px; height: 40px; flex: 0 0 40px;
display: grid; place-items: center; border-radius: 11px; font-size: 20px;
background: color-mix(in srgb, var(--g, #22c55e) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--g, #22c55e) 42%, transparent);
}
.p-art-row .tx { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.p-art-row .tx b {
font-size: 13.5px; font-weight: 800; color: var(--p-text-strong);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-art-row .tx small { font-size: 10.5px; color: var(--p-muted-2); }
.p-art-row .go { font-size: 10px; color: var(--p-muted); opacity: .75; transition: .2s; }
.p-art-row:hover .go { color: var(--p-accent); opacity: 1; }
.p-art-foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding-top: 6px; border-top: 1px solid rgba(148,163,184,.12);
font-size: 11.5px; color: var(--p-muted);
}
.p-art-foot b { font-size: 18px; font-weight: 800; color: var(--p-accent); font-variant-numeric: tabular-nums; }
/* ---------- BÖLÜMLER ---------- */
.p-section { max-width: 1180px; margin: 0 auto; padding: 34px 26px; }
.p-section-head { margin-bottom: 26px; }
.p-section-head h2 {
font-size: 27px; font-weight: 800; letter-spacing: -.3px;
display: flex; align-items: center; gap: 11px;
}
.p-section-head p { color: var(--p-muted); font-size: 14.5px; margin-top: 6px; }
/* ---------- OYUN KARTLARI ---------- */
.p-games {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
gap: 20px;
}
.p-game {
position: relative;
overflow: hidden;
display: flex; flex-direction: column;
background: linear-gradient(180deg, var(--p-surface) 0%, var(--p-surface-deep) 100%);
border: 1px solid var(--p-border);
border-radius: var(--p-radius);
transition: transform .22s, border-color .22s, box-shadow .22s;
}
.p-game::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--g, #22c55e);
box-shadow: 0 0 18px color-mix(in srgb, var(--g, #22c55e) 55%, transparent);
}
/* ✨ hover: karta oyun renginde iç ışık (tıklamayı engellemez) */
.p-game::after {
content: '';
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(420px 150px at 50% 0%, color-mix(in srgb, var(--g, #22c55e) 15%, transparent), transparent 72%);
opacity: 0; transition: opacity .25s ease;
}
.p-game:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--g, #22c55e) 32%, var(--p-border));
box-shadow: 0 24px 50px rgba(0,0,0,.45);
}
.p-game:hover::after { opacity: 1; }
.p-game:hover .p-game-icon { transform: scale(1.07); }
.p-game-top {
display: flex; align-items: center; gap: 15px;
padding: 24px 22px 16px;
}
.p-game-icon {
width: 66px; height: 66px; flex: 0 0 66px;
display: grid; place-items: center;
border-radius: 16px; font-size: 32px;
background: color-mix(in srgb, var(--g, #22c55e) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--g, #22c55e) 45%, transparent);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
transition: transform .22s ease;
}
.p-game-title { min-width: 0; }
.p-game-title h3 { font-size: 18px; font-weight: 800; }
.p-game-title .slug { font-size: 11.5px; color: var(--p-muted-2); font-family: Consolas, monospace; }
.p-game-desc { padding: 0 22px 18px; color: var(--p-muted); font-size: 13.5px; flex: 1; }
.p-game-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 22px 20px;
border-top: 1px solid rgba(148,163,184,.09);
}
.p-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 20px;
font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.p-status.ready { background: rgba(34,197,94,.16); color: var(--p-green-text-2); border: 1px solid rgba(34,197,94,.35); }
.p-status.soon { background: rgba(245,158,11,.14); color: var(--p-warn-text); border: 1px solid rgba(245,158,11,.35); }
.p-status.warn { background: rgba(239,68,68,.14); color: var(--p-red-text); border: 1px solid rgba(239,68,68,.35); }
.p-game.soon { opacity: .78; }
.p-game.soon:hover { transform: none; }
/* Yakında teaser kartı */
.p-teaser {
display: grid; place-items: center; text-align: center;
padding: 40px 24px;
border: 1.5px dashed rgba(148,163,184,.22);
border-radius: var(--p-radius);
color: var(--p-muted); background: rgba(148,163,184,.03);
}
.p-teaser .big { font-size: 42px; margin-bottom: 10px; opacity: .8; }
.p-teaser b { color: var(--p-text-soft); display: block; margin-bottom: 4px; font-size: 15px; }
/* ---------- ÖZELLİKLER ---------- */
.p-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.p-feature {
position: relative; overflow: hidden;
background: linear-gradient(180deg, var(--p-surface) 0%, var(--p-surface-deep) 100%);
border: 1px solid var(--p-border);
border-radius: 15px;
padding: 22px;
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.p-feature::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.p-feature:hover {
transform: translateY(-3px);
border-color: rgba(148,163,184,.3);
box-shadow: 0 18px 40px rgba(0,0,0,.38);
}
.p-feature .ic {
width: 44px; height: 44px; display: grid; place-items: center;
border-radius: 13px; font-size: 22px; margin-bottom: 13px;
background: linear-gradient(140deg, rgba(34,197,94,.18), rgba(56,189,248,.14));
border: 1px solid rgba(148,163,184,.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
transition: transform .22s ease;
}
.p-feature:hover .ic { transform: translateY(-2px) scale(1.05); }
.p-feature h4 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.p-feature p { color: var(--p-muted); font-size: 13px; }
/* ---------- CTA ---------- */
.p-cta {
position: relative; overflow: hidden;
max-width: 1180px; margin: 20px auto; padding: 46px 30px;
text-align: center;
background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(56,189,248,.12));
border: 1px solid rgba(34,197,94,.25);
border-radius: 24px;
}
.p-cta::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(620px 220px at 50% -20%, rgba(34,197,94,.28), transparent 70%);
}
.p-cta > * { position: relative; }
.p-cta h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.p-cta p { color: var(--p-muted); margin-bottom: 22px; }
/* ---------- FOOTER ---------- */
/* 🎨 PROFESYONEL FOOTER (2026-10-03) — ESKİDEN: 3 adet
+ markup'ta sabit `·` ayraç + `a{margin:0 8px}` +
inline `style="margin-top:8px"` → çift boşluk, satır sonunda sarkan `·`, geniş ekranda ekranın her yerine
yayılan düzensiz metin yığını (landing ile iç sayfaların footer'ı da FARKLI görünüyordu).
ARTIK: `.p-section` ile aynı hizada (1180px) · satır aralıkları `gap` · linkler ÇİP (pill) · marka/telif/sürüm
+ linkler + bilgi sayfaları diye GRUPLANMIŞ · tüm renkler tema değişkeni (9 tema otomatik uyar).
⚠️ Markup iskeleti `includes/layout.php` + `index.php`'de AYNIdır → her sayfada aynı görünüm. */
.p-footer {
max-width: 1180px;
margin: 26px auto 0;
padding: 24px 26px 30px;
display: flex; flex-direction: column; align-items: center; gap: 14px;
text-align: center;
color: var(--p-muted-2);
font-size: 12.5px;
border-top: 1px solid var(--p-border);
position: relative;
}
/* üst çizgiye marka tonunda yumuşak ışık (düz gri çizgi yerine) */
.p-footer::before {
content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
width: min(560px, 80%); height: 1px; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--p-sky), transparent); opacity: .45;
}
.p-footer p { margin: 0; }
/* satır 1 — 🌾 marka · © telif · 🏷️ sürüm chip'i */
.pf-brand { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pf-brand .pf-logo { font-weight: 800; color: var(--p-text-soft); letter-spacing: .2px; }
.pf-brand .pf-sep { color: var(--p-muted-2); opacity: .55; }
.pf-brand .pf-copy { color: var(--p-muted-2); }
/* satır 2-3 — link ÇİPLERİ (`·` ayraç ve `margin` YOK → gap ile düzgün sarar, sarkan ayraç olmaz) */
.pf-links, .pf-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.pf-links a, .pf-info a {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px; border-radius: 999px;
font-size: 12px; font-weight: 600; line-height: 1.35;
color: var(--p-muted); text-decoration: none; white-space: nowrap;
background: rgba(148, 163, 184, .07); border: 1px solid var(--p-border);
transition: color .16s, background .16s, border-color .16s, transform .16s;
}
.pf-links a:hover, .pf-info a:hover {
color: var(--p-text-strong); background: rgba(148, 163, 184, .16);
border-color: rgba(148, 163, 184, .38); transform: translateY(-1px);
}
/* 🚀 Sürüm notları = vurgulu çip (sky tonu) */
.pf-links a.pf-act, .pf-info a.pf-act {
color: var(--p-sky-text); border-color: rgba(56, 189, 248, .35); background: rgba(56, 189, 248, .1);
}
.pf-links a.pf-act:hover, .pf-info a.pf-act:hover {
color: var(--p-sky-text); background: rgba(56, 189, 248, .2); border-color: rgba(56, 189, 248, .55);
}
/* bilgi sayfaları = ikincil grup (daha soluk, daha küçük) */
.pf-info a { font-size: 11.5px; padding: 4px 10px; color: var(--p-muted-2); }
.pf-info a:hover { color: var(--p-text-soft); }
/* ============================================================
✨ ANİMASYONLAR (kütüphane yok · hepsi `prefers-reduced-motion`'da kapanır)
============================================================ */
@keyframes pUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@keyframes pFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes pGlow {
0%, 100% { opacity: .42; transform: scale(1); }
50% { opacity: .8; transform: scale(1.1); }
}
@keyframes pDot {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .65); }
100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
@keyframes pShine {
0%, 55% { transform: translateX(-180%) skewX(-18deg); }
100% { transform: translateX(420%) skewX(-18deg); }
}
/* Scroll-reveal: `p-anim` sınıfını JS ekler → JS yoksa içerik her zaman görünür kalır */
.p-anim .p-reveal {
opacity: 0; transform: translateY(18px);
transition: opacity .55s cubic-bezier(.22, .68, .32, 1), transform .55s cubic-bezier(.22, .68, .32, 1);
}
.p-anim .p-reveal.in { opacity: 1; transform: none; }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
.p-hero { grid-template-columns: 1fr; padding: 30px 20px 22px; gap: 22px; }
.p-hero h1 { font-size: 36px; }
/* Vitrin kare kutu yerine yatay kompakt banda dönüşür */
.p-hero-art { aspect-ratio: auto; max-width: 100%; padding: 16px; }
.p-art-games { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-art-row { padding: 8px 10px; gap: 9px; }
.p-art-row .ic { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; font-size: 17px; }
}
@media (max-width: 680px) {
.p-art-row .tx small { display: none; }
}
@media (max-width: 640px) {
/* ---- NAV: tek satır + taşmasız link şeridi (fade ipucu ile) ---- */
.p-nav { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
.p-logo { font-size: 14px; gap: 8px; }
.p-logo .mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; font-size: 18px; }
.p-logo span.txt { font-size: 14px; }
.p-nav .links {
order: 3; width: 100%; margin: 2px 0 0; gap: 2px;
overflow-x: auto; padding-bottom: 2px;
-ms-overflow-style: none; scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}
.p-nav .links::-webkit-scrollbar { height: 0; }
.p-nav .links a { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
.p-nav .auth { gap: 7px; }
.p-nav .auth .p-btn { padding-left: 11px; padding-right: 11px; font-size: 12px; }
/* 🌐 Dil düğmesi mobilde sıkışmasın: yalnız bayrak + kod, dolgu küçük */
.p-lang { font-size: 11px; padding: 2px; }
.p-lang > span, .p-lang > a { padding: 5px 7px; }
/* Kullanıcı adı metni gizlenir, avatar kalır */
.p-user .nm { display: none; }
/* ---- BÖLÜMLER ---- */
.p-section { padding: 22px 14px; }
.p-section-head { margin-bottom: 16px; }
.p-section-head h2 { font-size: 21px; gap: 8px; }
.p-section-head p { font-size: 13px; margin-top: 4px; }
/* ---- HERO: kompakt (vitrin gizlenir → ~140px kazanç) ---- */
.p-hero { padding: 20px 14px 14px; gap: 16px; }
.p-badge { font-size: 11px; padding: 6px 11px; gap: 6px; margin-bottom: 14px; letter-spacing: .3px; }
.p-badge .rest { display: none; }
.p-hero h1 { font-size: 26px; line-height: 1.12; margin-bottom: 12px; }
.p-hero p.lead { font-size: 14px; margin-bottom: 18px; }
.p-hero-actions { gap: 9px; }
/* ⚠️ `flex: 1 1 0` (eşit bölüşme) "🚀 Sürüm Notları" düğmesinde içeriği
kutusundan TAŞIRIYORDU: metin + `BETA vX.Y.Z` etiketi komşu düğmenin
üstüne biniyor VE taşan statik içerik landing'in ICB genişliğini
büyüttüğü için mobil tarayıcı TÜM sayfayı zoom-out ediyordu
(360px cihazda layout 396px oluyordu → "ekrana sığmıyor").
Çözüm: düğmeler içeriğe göre boyutlanır + satır kaydırır,
🚀 Sürüm Notları kendi satırında tam genişlik alır. */
.p-hero-actions .p-btn {
flex: 0 1 auto; min-width: 0; white-space: nowrap;
padding: 11px 12px; font-size: 12.5px; letter-spacing: -.2px; border-radius: 12px;
}
/* 🚀 Sürüm Notları + sürüm etiketi: tek satırın tamamı (çakışma yok) */
.p-hero-actions .p-btn[data-updates-open] { flex: 1 1 100%; }
.p-hero-stats { gap: 14px; margin-top: 18px; }
.p-hero-stats .s .v { font-size: 20px; }
.p-hero-stats .s .l { font-size: 9.5px; letter-spacing: .6px; }
.p-hero-art { display: none; }
/* ---- OYUN KARTLARI: sıkı ---- */
.p-games { grid-template-columns: 1fr; gap: 14px; }
.p-game-top { padding: 15px 15px 11px; gap: 12px; }
.p-game-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 13px; font-size: 25px; }
.p-game-title h3 { font-size: 16.5px; }
.p-game-desc { padding: 0 15px 13px; font-size: 13px; }
.p-game-foot { padding: 11px 15px 13px; }
.p-teaser { padding: 18px 16px; }
.p-teaser .big { font-size: 26px; margin-bottom: 6px; }
.p-teaser b { font-size: 14px; }
.p-teaser span { font-size: 12.5px; }
/* ---- CTA / FOOTER ---- */
.p-cta { margin: 14px; padding: 26px 18px; border-radius: 18px; }
.p-cta h2 { font-size: 22px; }
.p-cta p { font-size: 13.5px; margin-bottom: 16px; }
/* 320px'te buton metni iki satıra kırılmasın */
.p-cta .p-btn.lg { padding: 13px 18px; font-size: 13px; white-space: nowrap; }
/* 📱 FOOTER: çipler küçülür, aralık sıkışır (gruplar korunur → düzenli sarar) */
.p-footer { padding: 18px 14px 24px; margin-top: 20px; gap: 12px; }
.pf-brand { font-size: 12px; gap: 6px; }
.pf-links { gap: 6px; }
.pf-links a { font-size: 11.5px; padding: 5px 9px; }
.pf-info a { font-size: 11px; padding: 4px 8px; }
}
/* ---- ÖZELLİKLER: tek kolon yerine 2 kolon (mobilde ~450px kazanç) ---- */
@media (max-width: 560px) {
.p-features { grid-template-columns: 1fr 1fr; gap: 10px; }
.p-feature { padding: 13px; border-radius: 13px; }
.p-feature .ic { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; margin-bottom: 9px; }
.p-feature h4 { font-size: 13px; margin-bottom: 4px; }
.p-feature p { font-size: 11.5px; line-height: 1.45; }
}
/* ============================================================
♿ HAREKET AZALTMA — tüm landing animasyon/geçişleri kapanır
============================================================ */
@media (prefers-reduced-motion: reduce) {
.p-hero > div > *,
.p-hero-art,
.p-art-inner,
.p-art-glow,
.p-art-live i,
.p-hero .p-btn.primary::after,
.p-game .p-btn.primary::after,
.p-cta .p-btn.primary::after { animation: none !important; }
.p-anim .p-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.p-nav, .p-game, .p-game-icon, .p-feature, .p-feature .ic, .p-art-row, .p-btn { transition: none; }
.nav-gift { animation: none; }
/* 📱 mobil menü: çekmece/hamburger animasyonları da kapansın */
.nav-drawer, .nav-drawer-backdrop, .p-burger,
.p-burger .pb-bars, .p-burger .pb-bars::before, .p-burger .pb-bars::after { transition: none; }
}
/* ============================================================
🎒 SABİT TOPLAMA GÖSTERGESİ (tüm sayfalarda)
------------------------------------------------------------
Devam eden toplama aksiyonunu sayfanın alt-ortasında sabit gösterir.
Markup: includes/layout.php → gatherBar() · JS: assets/gather-bar.js
(sohbet baloncuğu sağ altta, oyun kontrolleri köşelerde → ortada çakışmaz)
============================================================ */
.gb {
position: fixed;
/* 💬 sohbet baloncuğu sağ altta → gösterge onun ALTINA girmesin:
sağdan 92px boşluk bırakılır (baloncuk 20+58=78px yer kaplar) */
left: 10px; right: 92px; bottom: 14px; margin: 0 auto;
max-width: 560px;
z-index: 58;
display: flex; align-items: center; gap: 10px;
padding: 9px 11px 9px 13px;
border-radius: 999px;
color: #e8eefc;
background: linear-gradient(90deg, rgba(34, 197, 94, .22), rgba(8, 12, 22, .96) 55%);
border: 1px solid rgba(34, 197, 94, .48);
box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
backdrop-filter: blur(8px);
/* oyun içi dokunmatik kontrolleri engellemesin (yalnızca düğmeler tıklanır) */
pointer-events: none;
}
.gb .gb-go, .gb .gb-x { pointer-events: auto; }
.gb[hidden] { display: none; }
.gb .gb-ic { flex: 0 0 auto; font-size: 19px; line-height: 1; }
.gb .gb-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gb .gb-txt b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb .gb-txt span { font-size: 11px; color: #a8b6cd; font-variant-numeric: tabular-nums; }
.gb .gb-txt span b { display: inline; font-size: 11.5px; color: #bbf7d0; font-weight: 800; }
.gb .gb-txt span b#gb-left { color: #fde68a; }
.gb .gb-go {
flex: 0 0 auto; padding: 6px 11px; border-radius: 999px;
font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap;
color: #052e16; background: linear-gradient(180deg, #4ade80, #22c55e);
border: 1px solid rgba(34, 197, 94, .7);
}
.gb .gb-go:hover { filter: brightness(1.08); }
.gb .gb-x {
flex: 0 0 auto; padding: 5px 9px; font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
color: #fecaca; background: rgba(239, 68, 68, .2);
border: 1px solid rgba(239, 68, 68, .45); border-radius: 999px;
}
.gb .gb-x:hover:not([disabled]) { background: rgba(239, 68, 68, .34); color: #fff; }
.gb .gb-x[disabled] { opacity: .5; cursor: not-allowed; }
/* gösterge üstünde biriken bildirimler (chat baloncuğunun altına girmez) */
.gb-toasts {
position: fixed;
left: 10px; right: 92px; bottom: 68px; margin: 0 auto;
max-width: 420px;
z-index: 59; display: flex; flex-direction: column; align-items: center; gap: 6px;
pointer-events: none;
}
.gb-t {
max-width: 100%;
padding: 8px 14px; border-radius: 999px;
font-size: 12px; font-weight: 700; text-align: center;
color: #dcfce7; background: rgba(6, 20, 12, .94);
border: 1px solid rgba(34, 197, 94, .5);
box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
transition: opacity .7s ease, transform .7s ease;
}
.gb-t.err { color: #fee2e2; border-color: rgba(239, 68, 68, .5); }
.gb-t.out { opacity: 0; transform: translateY(6px); }
@media (max-width: 620px) {
.gb { bottom: 10px; padding: 8px 9px 8px 11px; gap: 8px; }
.gb .gb-txt b { font-size: 12px; }
.gb .gb-txt span { font-size: 10.5px; }
.gb-toasts { bottom: 62px; }
}
/* ÇİFTLİK OYUNU UYARLAMASI: sayfanın altında yapışkan "sepet" çubuğu var
(farm.css .depo-basket) → gösterge ve bildirimler onun üstünde durur.
(chat.css sohbet baloncuğunu 16px'e indirir; bu gösterge ORTADA kaldığı için
baloncukla çakışmaz.) */
body:has(.farm-wrap) .gb { bottom: 92px; }
body:has(.farm-wrap) .gb-toasts { bottom: 146px; }
/* ============================================================
🍪 ÇEREZ ONAY BANNER'I
Markup: includes/consent.php → cookieConsentBanner()
JS : assets/cookie-banner.js (localStorage: 'cookie_consent')
============================================================ */
.ck {
position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
z-index: 900; width: calc(100% - 24px); max-width: 780px;
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 13px 16px; border-radius: 14px;
background: #0f172a; color: #e2e8f0;
border: 1px solid rgba(148,163,184,.35);
box-shadow: 0 18px 40px rgba(0,0,0,.45);
font-size: 13px; line-height: 1.5;
animation: ckIn .26s ease-out;
}
.ck[hidden] { display: none; }
@keyframes ckIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ck-main { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 320px; }
.ck-ic { font-size: 20px; line-height: 1.2; }
.ck-txt b { display: block; font-size: 13px; margin-bottom: 2px; color: #f1f5f9; }
.ck-txt p { margin: 0; color: #cbd5e1; }
.ck-txt a { color: #7dd3fc; text-decoration: underline; }
.ck-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-btn {
border: 1px solid transparent; border-radius: 10px; cursor: pointer;
padding: 8px 14px; font-size: 12.5px; font-weight: 700; text-decoration: none;
white-space: nowrap; transition: .16s;
}
.ck-ok { background: #22c55e; color: #04140a; }
.ck-ok:hover { background: #16a34a; }
.ck-no { background: rgba(148,163,184,.16); color: #e2e8f0; border-color: rgba(148,163,184,.4); }
.ck-no:hover { background: rgba(148,163,184,.28); }
.ck-dt { background: transparent; color: #cbd5e1; border-color: rgba(148,163,184,.35); }
.ck-dt:hover { color: #f1f5f9; border-color: rgba(148,163,184,.6); }
@media (max-width: 560px) {
.ck { bottom: 10px; padding: 12px 13px; }
.ck-btns { width: 100%; justify-content: flex-end; }
}
/* Çiftlik sayfasında alt "sepet" çubuğunun üstünde dur */
body:has(.farm-wrap) .ck { bottom: 96px; }
/* ---------- KAYIT ONAY KUTULARI (auth/register.php) ---------- */
.consent-list { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 9px; }
.consent-item {
display: flex; align-items: flex-start; gap: 9px;
font-size: 12.5px; line-height: 1.55; cursor: pointer;
}
.consent-item input[type="checkbox"] {
flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; cursor: pointer;
accent-color: #22c55e;
}
.consent-item span { color: inherit; opacity: .95; }
.consent-item a { color: #38bdf8; text-decoration: underline; }
.consent-item .req { color: #f87171; font-size: 11px; font-weight: 800; }
.consent-item .opt { color: #94a3b8; font-size: 11px; font-weight: 800; }