/* ============================================
   MONOCRAFT - Minecraft baslik fontu (self-host)
   Lisans: SIL OFL 1.1 - assets/fonts/Monocraft-OFL.txt
   Sadece 900 (Black) agirligi yuklenir; latin+latin-ext subset, ~24 KB.
   ============================================ */
@font-face {
    font-family: 'Monocraft';
    src: url("/assets/fonts/Monocraft-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/**
 * MINECRAFT CMS - AUTHENTIC MINECRAFT THEME
 * Dark Cyan/Turquoise Premium Design
 * Version: 3.4 (Final Consolidated Fix)
 */



/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --bg-dark: #0A0A0B;
    --bg-darker: #050505;
    --bg-card: #121214;
    --bg-card-hover: #1A1A1C;
    --accent: #FACC15;
    --accent-hover: #FDE047;
    --accent-glow: rgba(250, 204, 21, 0.4);
    --gold: #FDE047;
    --white: #FFFFFF;
    --gray: #A0A0A0;
    --gray-dark: #2A2A2C;
    --text-primary: #FFFFFF;
    --text-secondary: #EBC66B;
    --text-muted: #A0A0A0;
    /* ⚠ 25.09.2026: TEK SARI TON. Bu token butonlarin zemini olarak
         kullaniliyordu; gradyan oldugu icin her yerde baska bir sari
         cikiyordu. Artik `.b3 t-sari` ile birebir ayni duz #FACC15. */
    --gradient-accent: #FACC15;
    --gradient-gold: linear-gradient(135deg, #FEF08A 0%, #FACC15 100%);
    --gradient-dark: linear-gradient(180deg, #0A0A0B 0%, #050505 100%);
    --glow-accent: 0 0 30px rgba(250, 204, 21, 0.5);
    --border-subtle: 1px solid rgba(250, 204, 21, 0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --header-height: 80px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --font-display: 'Monocraft', 'Montserrat', sans-serif;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', sans-serif; background: var(--bg-dark); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: var(--transition-fast); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 24px; }

/* ============================================
   HEADER
   ============================================ */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 10px 0 !important; transition: var(--transition-normal); background: rgba(10, 10, 11, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.05); }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 60px !important; }
.logo { display: flex; align-items: center; transition: var(--transition-normal); text-decoration: none; }
.logo-text { font-family: 'Montserrat', sans-serif; font-size: 1.8rem; font-weight: 900; color: var(--white); text-transform: uppercase; letter-spacing: 2px; line-height: 1; transition: var(--transition-normal); text-shadow: 0 0 15px rgba(250, 204, 21, 0.3); }
.logo:hover .logo-text { color: var(--accent); transform: scale(1.05); text-shadow: 0 0 25px rgba(250, 204, 21, 0.6); }
.logo span { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 5px; }
.nav-link { padding: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 1px; }
.nav-link:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.nav-link.active { color: var(--bg-dark); background: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 15px; }

/* ============================================
   BUTTONS
   ============================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 28px; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border: none; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-normal); }
.btn-primary { background: var(--accent); color: var(--bg-dark); box-shadow: 0 4px 20px rgba(250, 204, 21, 0.3); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(250, 204, 21, 0.4); }
.btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--gray-dark); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    padding: 0;
    background: var(--gradient-dark);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.hero-content { padding-left: 40px; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(250, 204, 21, 0.1); border: 1px solid rgba(250, 204, 21, 0.2); border-radius: 50px; font-size: 0.8rem; color: var(--accent); font-weight: 600; margin-bottom: 20px; }
.hero-badge .dot { width: 8px; height: 8px; background: #10B981; border-radius: 50%; box-shadow: 0 0 10px #10B981; animation: pulse 2s infinite; }
.hero-title { font-family: 'Montserrat', sans-serif; font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin-bottom: 20px; text-transform: uppercase; }
.hero-title .highlight { color: var(--accent); text-shadow: 0 0 30px var(--accent-glow); }
.hero-description { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 40px; line-height: 1.7; max-width: 500px; }
.hero-actions { display: flex; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.hero-character { position: relative; height: 80vh; display: flex; align-items: center; justify-content: center; }
.character-image { max-height: 85%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5)); }
.player-count-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--text-muted); }
.player-count-badge i { color: #22C55E; }
.player-count-badge strong { color: var(--white); font-weight: 700; margin-left: 5px; }
.scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.85rem; animation: bounce 2s infinite; z-index: 10; }
.scroll-indicator i { font-size: 1.2rem; color: var(--accent); }
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } }

/* ============================================
   CONTENT GRID & HOME MODULES
   ============================================ */
.main-content-v2 { padding: 60px 0; }
.content-grid { display: grid; grid-template-columns: 1fr 350px; gap: 30px; }
.section-header-v2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: var(--border-subtle); }
.section-header-v2 h2 { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.section-header-v2 h2 i { color: var(--accent); }
.view-all-btn { font-size: 0.85rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 5px; }

.news-section-v2 .section-header-v2 { margin-bottom: 20px; }
.news-list-v2 { display: flex; flex-direction: column; gap: 20px; }
.news-item-v2 { display: flex; gap: 20px; padding: 20px; background: var(--bg-card); border-radius: var(--radius-md); border: var(--border-subtle); transition: var(--transition-fast); }
.news-item-v2:hover { transform: translateY(-5px); border-color: var(--accent); }
.news-item-image { width: 200px; height: 120px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.news-item-image img { width: 100%; height: 100%; object-fit: cover; }
.news-item-tag { position: absolute; top: 10px; left: 10px; background: var(--accent); color: var(--bg-dark); padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
.news-item-body { flex: 1; display: flex; flex-direction: column; }
.news-item-body h3 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.news-item-body p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; flex: 1; }
.news-item-meta { font-size: 0.8rem; color: var(--gray); }

.stats-section-side { background: var(--bg-card); border-radius: var(--radius-lg); padding: 20px; border: var(--border-subtle); height: fit-content; }
.stat-item-v2 { display: flex; align-items: center; gap: 15px; padding: 15px; background: var(--bg-darker); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 12px; }
.stat-item-v2:last-child { margin-bottom: 0; }
.stat-icon-v2 { width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(255,255,255,0.05); }
.stat-value-v2 { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--white); }
.stat-label { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================
   GAME MODES SLIDER
   ============================================ */
.game-modes-slider { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; }
.slider-nav { width: 40px; height: 40px; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; color: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; flex-shrink: 0; z-index: 5; }
.slider-nav:hover { background: var(--accent); color: var(--bg-dark); transform: scale(1.1); }
.slider-container { flex: 1; overflow: hidden; margin: 0 10px; padding: 20px 0; }
.slider-track { display: flex; gap: 20px; transition: transform 0.5s cubic-bezier(0.25,1,0.5,1); }
.game-mode-card { flex: 1; min-width: 240px; height: 340px; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.05); position: relative; transition: 0.3s; }
.game-mode-card:hover { transform: translateY(-8px); border-color: var(--accent); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }
.mode-image { position: absolute; inset: 0; height: 100%; overflow: hidden; }
.mode-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.game-mode-card:hover .mode-image img { transform: scale(1.1); }
.mode-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 11, 0.95) 0%, rgba(10, 10, 11, 0.5) 40%, transparent 100%); }
.mode-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; z-index: 2; }
.mode-info h3 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.mode-players { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); }
.mode-players .online-dot { width: 8px; height: 8px; background: #22C55E; border-radius: 50%; box-shadow: 0 0 8px #22C55E; animation: pulse 2s infinite; }
.mode-play-btn { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bg-dark); opacity: 0; transform: scale(0.5) rotate(-45deg); transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.game-mode-card:hover .mode-play-btn { opacity: 1; transform: scale(1) rotate(0); }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.slider-dots .dot { width: 8px; height: 8px; background: var(--gray-dark); border-radius: 50%; cursor: pointer; transition: 0.3s; }
.slider-dots .dot.active { background: var(--accent); width: 24px; border-radius: 4px; }

/* ============================================
   ANNOUNCEMENTS TICKER
   ============================================ */
.announcements-ticker { background: linear-gradient(90deg, var(--bg-card) 0%, var(--bg-darker) 50%, var(--bg-card) 100%); border-bottom: var(--border-subtle); overflow: hidden; position: relative; padding: 0; height: 60px; display: flex; align-items: center; }
.ticker-wrapper { display: flex; align-items: center; width: 100%; height: 100%; }
.ticker-label { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; height: 100%; background: var(--accent); color: var(--bg-dark); font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; position: relative; z-index: 10; box-shadow: 5px 0 15px rgba(0,0,0,0.2); }
.ticker-label::after { content: ''; position: absolute; right: -20px; top: 0; height: 100%; width: 40px; background: var(--accent); transform: skewX(-20deg); z-index: -1; }
.ticker-content { flex: 1; overflow: hidden; position: relative; height: 100%; display: flex; align-items: center; }
.ticker-track { display: flex; gap: 60px; animation: ticker-scroll 40s linear infinite; width: max-content; padding-left: 40px; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-item { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 0.9rem; color: var(--text-muted); padding: 6px 14px; background: rgba(255, 255, 255, 0.03); border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.05); }
.ticker-item img { width: 24px; height: 24px; border-radius: 4px; }
.ticker-player { font-weight: 700; color: var(--white); }
.ticker-action i { color: var(--accent); }
.ticker-time { font-size: 0.75rem; color: var(--gray); margin-left: 8px; opacity: 0.7; }

/* ============================================
   PAGE HEADER (Generic)
   ============================================ */
.page-header { position: relative; padding: 140px 0 60px; background: linear-gradient(180deg, #050505 0%, #0A0A0B 100%); overflow: hidden; height: 300px; display: flex; align-items: center; justify-content: center; }
.page-header-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(250, 204, 21, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(253, 224, 71, 0.05) 0%, transparent 50%); }
.page-header-bg::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FACC15' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5; }
.page-header-content { position: relative; z-index: 3; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.page-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; font-size: 0.9rem; }
.page-breadcrumb a { color: var(--text-muted); transition: 0.2s; }
.page-breadcrumb a:hover { color: var(--accent); }
.page-title { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; font-weight: 800; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.page-title i { color: var(--accent); font-size: 2.2rem; }
.page-subtitle { font-size: 1.1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto; }

/* ============================================
   NEWS PAGE STYLES
   ============================================ */
.news-page { padding: 60px 0 100px; background: var(--bg-dark); }
.category-filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; justify-content: center; }
.category-filter-item { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-md); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); transition: 0.3s; }
.category-filter-item:hover { border-color: rgba(74,234,207,0.3); color: var(--white); }
.category-filter-item.active { background: var(--accent); border-color: var(--accent); color: var(--bg-dark); }
.category-count { background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 50px; font-size: 0.75rem; }
.category-filter-item.active .category-count { background: rgba(0,0,0,0.2); }

.featured-news-card { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 50px; transition: 0.3s; }
.featured-news-card:hover { border-color: rgba(74,234,207,0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.featured-news-image { position: relative; min-height: 400px; }
.featured-news-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.featured-news-card:hover .featured-news-image img { transform: scale(1.05); }
.featured-news-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,10,11,0.8) 100%); }
.featured-badge { position: absolute; top: 20px; left: 20px; background: linear-gradient(135deg, var(--gold), #EAB308); color: #000; padding: 10px 20px; border-radius: var(--radius-md); font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.featured-news-content { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.news-meta-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.news-category { padding: 6px 14px; border-radius: 50px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--bg-dark); }
.news-date { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.news-date i { color: var(--accent); }
.featured-news-title { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1.3; margin-bottom: 16px; }
.featured-news-title a { color: var(--white); transition: 0.2s; }
.featured-news-title a:hover { color: var(--accent); }
.featured-news-excerpt { font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; }
.featured-news-footer { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.news-author { display: flex; align-items: center; gap: 10px; }
.news-author img { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 2px solid var(--accent); }
.news-author span { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; }
.featured-news-footer .btn { margin-left: auto; }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }
.news-card { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: 0.3s; }
.news-card:hover { border-color: rgba(74,234,207,0.3); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.news-card-image { position: relative; height: 250px; overflow: hidden; }
.news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.news-card:hover .news-card-image img { transform: scale(1.1); }
.news-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,30,28,0.8) 100%); }
.news-card-image .news-category { position: absolute; top: 16px; left: 16px; }
.news-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.news-card-meta { display: flex; gap: 16px; margin-bottom: 12px; font-size: 0.8rem; color: var(--text-muted); }
.news-card-meta i { color: var(--accent); margin-right: 4px; }
.news-card-title { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
.news-card-title a { color: var(--white); transition: 0.2s; }
.news-card-title a:hover { color: var(--accent); }
.news-card-excerpt {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1; /* Allow excerpt to take up available space, pushing the link down */
}
.news-card-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--accent); transition: 0.2s; }
.news-card-link:hover { color: var(--accent-hover); }
.news-card-link i { transition: 0.2s; }
.news-card-link:hover i { transform: translateX(4px); }

.pagination { display: flex; justify-content: center; align-items: center; gap: 10px; }
.pagination-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius-md); font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); transition: 0.3s; }
.pagination-btn:hover { border-color: rgba(74,234,207,0.3); color: var(--white); }
.pagination-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg-dark); }
.pagination-dots { color: var(--text-muted); padding: 0 8px; }

/* ============================================
   STORE PAGE STYLES
   ============================================ */
.store-page { padding: 60px 0 100px; background: var(--bg-dark); }
.store-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; }
.store-sidebar { display: flex; flex-direction: column; gap: 24px; }
.sidebar-card { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius-lg); padding: 24px; }
.sidebar-title { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: var(--border-subtle); }
.sidebar-title i { color: var(--accent); }
.sidebar-categories { display: flex; flex-direction: column; gap: 8px; }
.sidebar-category-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(180deg, #050505 0%, #0A0A0B 100%); border-radius: var(--radius-md); font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: 0.3s; }
.sidebar-category-item:hover { background: rgba(74,234,207,0.1); color: var(--white); }
.sidebar-category-item.active { background: var(--accent); color: var(--bg-dark); }
.sidebar-category-item i { width: 20px; text-align: center; }
.sidebar-category-item span:first-of-type { flex: 1; }
.category-badge { background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; }
.sidebar-category-item.active .category-badge { background: rgba(0,0,0,0.2); }

/* En Çok Bağış Yapanlar */
.top-donators { display: flex; flex-direction: column; gap: 12px; }
.donator-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-darker); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; }
.donator-row:hover { border-color: rgba(74,234,207,0.2); background: rgba(74,234,207,0.05); transform: translateX(5px); }
.donator-rank { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border-radius: 50%; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--text-muted); flex-shrink: 0; }
.donator-row.top-1 .donator-rank { background: linear-gradient(135deg, #FFD700, #EAB308); color: #000; }
.donator-row.top-1 .donator-rank i { font-size: 0.9rem; }
.donator-row.top-2 .donator-rank { background: linear-gradient(135deg, #C0C0C0, #999999); color: #000; }
.donator-row.top-3 .donator-rank { background: linear-gradient(135deg, #CD7F32, #8B4513); color: #fff; }
.donator-row img { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 2px solid rgba(255,255,255,0.1); flex-shrink: 0; }
.donator-row.top-1 img { border-color: #FFD700; }
.donator-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.donator-name { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donator-row.top-1 .donator-name { color: var(--gold); }
.donator-amount { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }

/* Yardım Kartı */
.help-card { text-align: center; background: linear-gradient(135deg, var(--bg-card) 0%, rgba(250, 204, 21,0.05) 100%) !important; border: 1px solid rgba(250, 204, 21,0.15) !important; }
.help-icon { width: 60px; height: 60px; margin: 0 auto 16px; background: rgba(250, 204, 21,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent); }
.help-card h4 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 12px; }
.help-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.btn-block { width: 100%; justify-content: center; }

.store-main { display: flex; flex-direction: column; gap: 40px; }
.featured-product { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: 0.3s; }
.featured-product:hover { border-color: rgba(223,180,75,0.3); box-shadow: 0 0 40px rgba(223,180,75,0.1); }
.featured-product-image { position: relative; min-height: 350px; }
.featured-product-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.featured-product:hover .featured-product-image img { transform: scale(1.05); }
.featured-product-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(10,10,11,0.6) 100%); }
.discount-badge { position: absolute; top: 20px; left: 20px; background: #EF4444; color: white; padding: 10px 20px; border-radius: var(--radius-md); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; animation: pulse 2s infinite; }
.featured-product-content { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-product-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--gold), #EAB308); color: #000; padding: 8px 16px; border-radius: var(--radius-md); font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700; width: fit-content; margin-bottom: 20px; }
.featured-product-title { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; margin-bottom: 12px; }
.featured-product-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.featured-product-features { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.feature-tag { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(250, 204, 21,0.1); border: 1px solid rgba(250, 204, 21,0.2); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--accent); }
.feature-tag i { font-size: 0.7rem; }
.featured-product-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.featured-product-price { display: flex; align-items: center; gap: 12px; }
.featured-product-price .price-old { font-size: 1.1rem; color: var(--text-muted); text-decoration: line-through; }
.featured-product-price .price-current { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; color: var(--gold); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-gold { background: #FACC15; color: #1A1400; font-weight: 700; }
.btn-gold:hover { box-shadow: 0 8px 30px rgba(223,180,75,0.4); transform: translateY(-2px); }

.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: 0.3s; }
.product-card:hover { border-color: rgba(74,234,207,0.3); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.product-card-image { position: relative; height: 180px; overflow: hidden; }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.product-card:hover .product-card-image img { transform: scale(1.1); }
.product-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,10,11,0.9) 100%); }
.product-discount { position: absolute; top: 12px; right: 12px; background: #EF4444; color: white; padding: 6px 12px; border-radius: var(--radius-sm); font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; }
.product-category { position: absolute; bottom: 12px; left: 12px; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }
.product-card-body { padding: 20px; }
.product-title { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.product-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.product-features span { font-size: 0.75rem; color: var(--text-muted); }
.product-features i { color: var(--accent); margin-right: 4px; font-size: 0.65rem; }
.more-features { color: var(--accent) !important; font-weight: 600; }
.product-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: var(--border-subtle); }
.product-price { display: flex; align-items: center; gap: 8px; }
.product-price .price-old { font-size: 0.85rem; color: var(--text-muted); text-decoration: line-through; }
.product-price .price-current { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 700; }

/* ============================================
   STORE TICKER
   ============================================ */
.store-ticker {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 40px;
    height: 60px;
}

.store-ticker-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    height: 100%;
    background: var(--gold);
    color: var(--bg-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.store-ticker-label::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 0;
    height: 100%;
    width: 30px;
    background: var(--gold);
    transform: skewX(-20deg);
    z-index: -1;
}

.store-ticker-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.store-ticker-track {
    display: flex;
    gap: 40px;
    animation: ticker-scroll 35s linear infinite;
    width: max-content;
    padding-left: 30px;
}

.store-ticker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    background: rgba(255,255,255,0.03);
    padding: 5px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.05);
}

.store-ticker-item img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--gold);
}

.ticker-player-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--gold);
}

.ticker-item-name {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ticker-time {
    font-size: 0.7rem;
    color: var(--gray);
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.1);
    margin-left: 5px;
}

/* ============================================
   RANKING PAGE STYLES
   ============================================ */
.ranking-page { padding: 40px 0 60px; background: var(--bg-dark); }
.ranking-section { padding: 60px 0 100px; background: var(--bg-dark); }
.ranking-grid { display: grid; grid-template-columns: 350px 1fr; gap: 40px; align-items: start; }
.ranking-sidebar { background: linear-gradient(135deg, var(--bg-card) 0%, rgba(250, 204, 21,0.05) 100%); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg); padding: 40px; display: flex; flex-direction: column; min-height: 600px; position: relative; overflow: hidden; }
.ranking-sidebar-content { position: relative; z-index: 2; }
.ranking-subtitle { display: block; font-size: 0.75rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
.ranking-sidebar-title { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: 24px; }
.ranking-info { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-top: 30px; }
.ranking-info a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.ranking-character { margin-top: auto; position: relative; height: 250px; display: flex; align-items: flex-end; justify-content: center; z-index: 1; }
.character-glow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; background: radial-gradient(circle, rgba(250, 204, 21,0.2) 0%, transparent 70%); filter: blur(40px); }
.character-img { height: 100%; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); position: relative; z-index: 2; }
.character-placeholder { text-align: center; color: var(--text-muted); padding: 40px 20px; background: rgba(0,0,0,0.2); border-radius: var(--radius-md); border: 2px dashed rgba(255,255,255,0.1); }
.character-placeholder i { font-size: 3rem; color: var(--accent); margin-bottom: 16px; display: block; }
.character-placeholder span { font-size: 0.85rem; line-height: 1.6; }
.character-placeholder strong { color: var(--accent); display: block; margin-top: 8px; font-family: 'Montserrat', sans-serif; }

.ranking-main { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg); padding: 40px; }
.ranking-tabs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.ranking-tabs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ranking-tab { padding: 14px 20px; background: var(--bg-darker); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-md); text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.ranking-tab:hover { background: rgba(250, 204, 21,0.1); color: var(--white); border-color: rgba(250, 204, 21,0.2); }
.ranking-tab.active { background: var(--accent); color: var(--bg-dark); border-color: var(--accent); }
.ranking-tab i { font-size: 1rem; }

.ranking-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.ranking-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-darker); border: 1px solid rgba(255,255,255,0.03); border-radius: var(--radius-md); transition: 0.3s; position: relative; }
.ranking-item:hover { transform: translateX(5px); border-color: rgba(250, 204, 21,0.2); background: rgba(250, 204, 21,0.05); }
.ranking-item-left { display: flex; align-items: center; gap: 20px; position: relative; z-index: 2; }
.ranking-item-right { display: flex; align-items: center; gap: 12px; }

.ranking-position { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-muted); background: rgba(255,255,255,0.05); border-radius: 50%; font-size: 0.9rem; }
.ranking-position.top { font-size: 1rem; }
.ranking-item.top-1 .ranking-position { background: linear-gradient(135deg, #FFD700, #EAB308); color: #000; box-shadow: 0 4px 15px rgba(255,215,0,0.3); }
.ranking-item.top-2 .ranking-position { background: linear-gradient(135deg, #C0C0C0, #999999); color: #000; box-shadow: 0 4px 15px rgba(192,192,192,0.3); }
.ranking-item.top-3 .ranking-position { background: linear-gradient(135deg, #CD7F32, #8B4513); color: #fff; box-shadow: 0 4px 15px rgba(205,127,50,0.3); }

.ranking-avatar { position: relative; }
.ranking-avatar img { width: 44px; height: 44px; border-radius: var(--radius-md); border: 2px solid rgba(255,255,255,0.1); transition: 0.3s; }
.ranking-item:hover .ranking-avatar img { border-color: var(--accent); }
.ranking-item.top-1 .ranking-avatar { position: relative; }
.crown-badge { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: linear-gradient(135deg, #FFD700, #EAB308); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #000; box-shadow: 0 2px 10px rgba(255,215,0,0.4); }

.ranking-name { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--white); font-size: 0.95rem; }
.ranking-name.highlight { color: var(--accent); font-weight: 700; }
.ranking-value { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--accent); font-size: 1.1rem; }

.ranking-search { display: flex; gap: 16px; align-items: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.05); }
.search-input-wrapper { flex: 1; position: relative; }
.search-input-wrapper i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; }
.search-input-wrapper input { width: 100%; padding: 14px 16px 14px 46px; background: var(--bg-darker); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.3s; }
.search-input-wrapper input:focus { outline: none; border-color: var(--accent); background: rgba(0,0,0,0.3); }
.search-input-wrapper input::placeholder { color: var(--text-muted); }
.btn-search { padding: 14px 28px; background: var(--accent); color: var(--bg-dark); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: none; border-radius: var(--radius-md); cursor: pointer; transition: 0.3s; }
.btn-search:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(250, 204, 21,0.3); }

/* Duyarlı Sıralama */
@media (max-width: 992px) {
    .ranking-grid { grid-template-columns: 1fr; }
    .ranking-sidebar { min-height: auto; }
    .ranking-character { height: 200px; }
}
@media (max-width: 768px) {
    .ranking-tabs-row { grid-template-columns: 1fr; }
    .ranking-search { flex-direction: column; }
    .btn-search { width: 100%; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer { background: #050505; padding: 60px 0 30px; border-top: var(--border-subtle); margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand p { color: var(--text-muted); font-size: 0.9rem; margin: 15px 0; }
.footer-column h4 { color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 1rem; margin-bottom: 20px; text-transform: uppercase; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--text-muted); font-size: 0.9rem; }
.footer-links a:hover { color: var(--accent); }
.footer-server { background: var(--bg-card); padding: 20px; border-radius: var(--radius-md); text-align: center; }
.footer-server-ip { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--white); margin: 10px 0; display: block; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 30px; display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); }

/* ============================================
   AUTH PAGES (SPLIT LAYOUT - CENTERED BOX)
   ============================================ */
.auth-section { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: 100px 20px 60px; background: var(--bg-dark); position: relative; }
.auth-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.05) 0%, transparent 70%); pointer-events: none; }
.auth-split-layout { display: flex; width: 100%; max-width: 1000px; min-height: 600px; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); position: relative; z-index: 2; }
.auth-left { width: 450px; flex-shrink: 0; background: var(--bg-card); display: flex; flex-direction: column; justify-content: center; padding: 40px 50px; position: relative; z-index: 10; box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4); }
.auth-logo { margin-bottom: 30px; display: inline-block; }
.auth-header { text-align: left; margin-bottom: 25px; }
.auth-title { font-family: 'Montserrat', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--white); margin-bottom: 8px; line-height: 1.2; }
.auth-subtitle { font-size: 0.9rem; color: var(--text-muted); }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; font-family: 'Montserrat', sans-serif; }
.form-control { width: 100%; padding: 12px 16px; background: var(--bg-darker); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: var(--white); font-family: 'Inter', sans-serif; font-size: 0.95rem; transition: var(--transition-fast); }
.form-control:focus { outline: none; border-color: var(--accent); background: rgba(0, 0, 0, 0.3); }
.form-control::placeholder { color: rgba(255, 255, 255, 0.3); }
.form-footer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 0.85rem; }
.btn-auth { width: 100%; padding: 14px; font-size: 1rem; font-weight: 700; margin-bottom: 20px; background: var(--accent); color: var(--bg-dark); border: none; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-normal); }
.btn-auth:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(250, 204, 21, 0.2); }
.auth-right { flex: 1; position: relative; background: #000; overflow: hidden; }
.auth-image-container { width: 100%; height: 100%; position: relative; }
.auth-image-container img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0.8; }
.auth-image-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10, 10, 11, 0.8) 0%, transparent 40%); pointer-events: none; }
.auth-footer-text { margin-top: 10px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.auth-footer-text a { color: var(--accent); font-weight: 600; margin-left: 5px; }
.auth-footer-text a:hover { text-decoration: underline; }
.alert { padding: 12px; margin-bottom: 20px; border-radius: var(--radius-sm); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }
.alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #EF4444; }
.alert-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #10B981; }

/* ============================================
   PROFILE PAGE
   ============================================ */
.profile-section { padding-top: 120px; padding-bottom: 60px; min-height: 100vh; }
.profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; }
.profile-user-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg); padding: 30px 20px; text-align: center; }
.profile-avatar img { width: 100px; height: 100px; border-radius: var(--radius-md); border: 3px solid var(--accent); box-shadow: 0 0 20px rgba(250, 204, 21,0.2); margin-bottom: 15px; }
.profile-username { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 5px; }
.profile-role { display: inline-block; background: rgba(250, 204, 21,0.1); color: var(--accent); padding: 4px 12px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; margin-bottom: 20px; }
.profile-credits { background: rgba(0,0,0,0.2); border-radius: var(--radius-md); padding: 15px; display: flex; align-items: center; justify-content: space-between; }
.profile-credits span { display: block; font-size: 0.75rem; color: var(--text-muted); text-align: left; }
.profile-credits strong { display: block; font-size: 1.1rem; color: var(--gold); font-family: 'Montserrat', sans-serif; }
.btn-add-credit { width: 30px; height: 30px; background: var(--accent); color: var(--bg-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: 0.3s; }
.btn-add-credit:hover { transform: scale(1.1); }
.profile-nav { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
.profile-nav a { display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.03); transition: 0.2s; }
.profile-nav a:hover, .profile-nav a.active { background: rgba(250, 204, 21,0.05); color: var(--accent); padding-left: 25px; }
.profile-nav a i { width: 20px; text-align: center; }
.profile-nav a.nav-logout:hover { background: rgba(239,68,68,0.1); color: #EF4444; }
.profile-header-card { background: linear-gradient(135deg, var(--bg-card) 0%, rgba(250, 204, 21,0.05) 100%); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg); padding: 30px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.welcome-text h3 { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.welcome-text p { color: var(--text-muted); font-size: 0.9rem; }
.header-stats { display: flex; gap: 30px; text-align: right; }
.h-stat span { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
.h-stat strong { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; color: var(--white); }
.profile-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.p-stat-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-md); padding: 20px; display: flex; align-items: center; gap: 15px; }
.p-stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(255,255,255,0.05); }
.p-stat-icon.c-blue { color: #60A5FA; background: rgba(96,165,250,0.1); }
.p-stat-icon.c-green { color: #34D399; background: rgba(52,211,153,0.1); }
.p-stat-icon.c-red { color: #F87171; background: rgba(248,113,113,0.1); }
.p-stat-icon.c-gold { color: var(--gold); background: rgba(223,180,75,0.1); }
.p-stat-info span { display: block; font-size: 0.8rem; color: var(--text-muted); }
.p-stat-info strong { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; }
.profile-section-box { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg); overflow: hidden; }
.box-header { padding: 20px 25px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.box-header h4 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; }
.custom-table { width: 100%; border-collapse: collapse; }
.custom-table th { text-align: left; padding: 15px 25px; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; background: rgba(0,0,0,0.1); }
.custom-table td { padding: 15px 25px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--white); font-size: 0.9rem; }
.custom-table tr:last-child td { border-bottom: none; }
.badge { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-login { background: rgba(96,165,250,0.1); color: #60A5FA; }
.badge-shop { background: rgba(223,180,75,0.1); color: var(--gold); }
.badge-game { background: rgba(52,211,153,0.1); color: #34D399; }
.status { font-size: 0.8rem; }
.status-success { color: #34D399; }
.status-info { color: #60A5FA; }

/* ============================================
   MOBILE MENU & GENERAL RESPONSIVE
   ============================================ */
.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; }
.mobile-menu-toggle span { display: block; width: 25px; height: 3px; background: var(--white); margin: 5px 0; }

@media (max-width: 992px) {
    .hero-container { grid-template-columns: 1fr; text-align: center; }
    .hero-actions { justify-content: center; }
    .content-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .store-layout { grid-template-columns: 1fr; }
    .store-sidebar { flex-direction: row; flex-wrap: wrap; }
    .store-sidebar .sidebar-card { flex: 1; min-width: 280px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .auth-section { padding: 100px 20px 40px; align-items: flex-start; }
    .auth-split-layout { flex-direction: column; max-width: 450px; min-height: auto; height: auto; }
    .auth-left { width: 100%; padding: 40px 30px; box-shadow: none; }
    .auth-right { display: none; }
    .profile-layout { grid-template-columns: 1fr; }
    .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ranking-container { grid-template-columns: 280px 1fr; }
}

@media (max-width: 768px) {
    .nav { display: none; }
    .mobile-menu-toggle { display: block; }
    .hero-title { font-size: 2.5rem; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .news-card { grid-template-columns: 1fr; }
    .news-image { height: 250px; width: 100%; }
    .news-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .ranking-container { grid-template-columns: 1fr; }
    .ranking-left { padding: 30px; min-height: auto; }
    .ranking-character { display: none; }
}

@media (max-width: 576px) {
    .profile-stats-grid { grid-template-columns: 1fr; }
    .profile-header-card { flex-direction: column; text-align: center; gap: 20px; }
    .header-stats { width: 100%; justify-content: space-around; text-align: center; }
}

/* Yönetim Paneli Butonu */
.profile-nav .nav-admin {
    background: rgba(250, 204, 21, 0.05);
    color: var(--accent) !important;
    font-weight: 700;
    border: 1px solid var(--accent); /* Çerçeveli */
    margin-top: 10px;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.profile-nav .nav-admin:hover {
    background: var(--accent);
    color: var(--bg-dark) !important;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
    padding-left: 25px;
}

/* Kalkan İkonu Animasyonu */
.profile-nav .nav-admin i {
    color: inherit;
    animation: shield-move 2s infinite ease-in-out; /* Sürekli ileri-geri */
}

@keyframes shield-move {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); } /* Hafifçe sağa git */
}

/* ============================================
   SOCIAL MEDIA ICONS
   ============================================ */
.social-links {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.social-link {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.3s ease;
    font-size: 1rem;
}

.social-link:hover {
    background: var(--accent);
    color: var(--bg-dark);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(250, 204, 21, 0.2);
    border-color: var(--accent);
}

/* Üzerine Gelindiğinde Belirli Marka Renkleri */
.social-link.discord:hover { background: #5865F2; border-color: #5865F2; color: white; }
.social-link.youtube:hover { background: #FF0000; border-color: #FF0000; color: white; }
.social-link.twitter:hover { background: #1DA1F2; border-color: #1DA1F2; color: white; }
.social-link.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: transparent; color: white; }
.social-link.tiktok:hover { background: #000000; border-color: #000000; color: white; text-shadow: 2px 2px 0px #FF0050, -2px -2px 0px #00F2EA; }
.social-link.facebook:hover { background: #1877F2; border-color: #1877F2; color: white; }
.social-link.twitch:hover { background: #9146FF; border-color: #9146FF; color: white; }

/* Recently Joined Players */
.recent-players-section { margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.05); }
.recent-players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 25px; }
.player-mini-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-md); padding: 12px; display: flex; align-items: center; gap: 15px; transition: var(--transition-normal); }
.player-mini-card:hover { transform: translateY(-3px); border-color: var(--accent); background: rgba(250, 204, 21,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.player-mini-card img { width: 40px; height: 40px; border-radius: 8px; background: rgba(0,0,0,0.2); object-fit: cover; }
.player-mini-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.player-mini-name { font-weight: 700; color: var(--white); font-size: 0.9rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.player-mini-date { font-size: 0.75rem; color: var(--text-muted); }

/* ============================================
   SPLIT FOOTER & RECENT PLAYERS
   ============================================ */
.footer-split-wrapper {
    display: flex;
    gap: 40px;
    padding: 60px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-recent-players {
    flex: 0 0 350px;
    border-right: 1px solid rgba(255,255,255,0.05);
    padding-right: 40px;
}

.footer-recent-players h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-recent-players h4 i {
    color: var(--accent);
}

.footer-players-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.footer-player-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.footer-player-card:hover {
    background: rgba(250, 204, 21,0.05);
    border-color: rgba(250, 204, 21,0.2);
    transform: translateY(-2px);
}

.footer-player-card img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.footer-player-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.footer-player-name {
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.footer-player-date {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.footer-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 30px;
}

.footer-brand .logo-text {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.footer-about {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.footer-column h4 {
    color: var(--white);
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: 0.2s;
}

.footer-links a:hover {
    color: var(--accent);
    padding-left: 5px;
}

.footer-server {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 15px;
}

.footer-server-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--white);
    margin-bottom: 5px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #22C55E;
    border-radius: 50%;
    box-shadow: 0 0 10px #22C55E;
}

.footer-server-ip {
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 12px;
    word-break: break-all;
}

/* Responsive */
@media (max-width: 1100px) {
    .footer-split-wrapper {
        flex-direction: column;
    }
    .footer-recent-players {
        flex: none;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding-bottom: 30px;
    }
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
    .footer-players-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   MINERTOWN — TEMA YENILEME KATMANI
   06.08.2026

   BU BLOK DOSYANIN EN SONUNDA DURMALI.
   CSS'te sonra gelen kural kazanir; bu yuzden yukaridaki hicbir sey
   silinmedi, yalnizca UZERINE yazildi. Tasarimi eski haline dondurmek
   icin "TEMA YENILEME KATMANI" yorumundan dosya sonuna kadar olan
   kismi silmek yeterli — baska hicbir dosyaya dokunulmadi.

   PALET: oyun ici eklentilerle (MtCiftci, MTKozmetik, MTTeslimat,
   MTSipariş, MTakas) AYNI renkler. Boylece sunucu ve site ayni dili
   konusuyor.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Zemin: saf siyah yerine hafif sicak koyu ────────────────────
       #0A0A0B kagit gibi olu duruyordu; hafif sicaklik ekranda daha
       yumusak okunuyor ve turuncuyla daha iyi oturuyor. */
    --bg-dark:        #0E0D0F;
    --bg-darker:      #08080A;
    --bg-card:        #16151A;
    --bg-card-hover:  #1E1C23;

    /* ── Vurgu: keskin #FACC15 yerine eklenti turuncusu ───────────── */
    --accent:         #FACC15;
    --accent-hover:   #FDE047;
    --accent-glow:    rgba(250, 204, 21, 0.28);
    --gold:           #FFD700;

    /* ── Ikincil vurgu: fistik yesili (yeni) ─────────────────────────
       Tek renkli arayuz duz gorunuyordu. Yesil; basari, stok, aktif
       durum ve olumlu rakamlar icin ikinci bir ses veriyor. */
    --success:        #93C572;
    --success-soft:   #B8DE9F;
    --danger:         #E85D5D;

    --white:          #FFFFFF;
    --gray:           #A8A6AD;
    --gray-dark:      #2A2830;
    --text-primary:   #F5F4F7;
    --text-secondary: #FDE047;
    --text-muted:     #8E8C95;

    --gradient-accent: #FACC15;   /* 25.09: tek sari ton (bkz. yukarisi) */
    --gradient-gold:   linear-gradient(135deg, #FFD700 0%, #FDE047 100%);
    --gradient-green:  linear-gradient(135deg, #93C572 0%, #6FA84F 100%);
    --gradient-dark:   linear-gradient(180deg, #0E0D0F 0%, #08080A 100%);

    /* ── Golge: tek kalin glow yerine katmanli derinlik ──────────────
       Eskiden her sey ayni parlak glow'u tasiyordu ve hiyerarsi
       kayboluyordu. Uc kademe: dinlenme / yukselme / vurgu. */
    --glow-accent: 0 0 24px rgba(250, 204, 21, 0.35);
    --shadow-1: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.22);
    --shadow-2: 0 4px 10px rgba(0,0,0,.34), 0 10px 28px rgba(0,0,0,.28);
    --shadow-3: 0 8px 20px rgba(0,0,0,.40), 0 22px 50px rgba(0,0,0,.34);

    --border-subtle: 1px solid rgba(250, 204, 21, 0.14);
    --border-hair:   1px solid rgba(255, 255, 255, 0.07);

    /* ── Kose: daha yuvarlak ─────────────────────────────────────── */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --transition-fast:   .16s cubic-bezier(.4,0,.2,1);
    --transition-normal: .26s cubic-bezier(.4,0,.2,1);
}

/* ── TIPOGRAFI ──────────────────────────────────────────────────────
   Satir araligi 1.6 -> 1.7, basliklarda harf araligi biraz sikilastirildi.
   Uzun metinlerde (haber, kurallar, SSS) okunabilirligi belirgin artiriyor. */
body {
    background: var(--gradient-dark);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.25; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
p { color: var(--text-muted); }

/* Secim rengi — kucuk ama her yerde gorunen bir ayrinti */
::selection { background: rgba(250, 204, 21,.28); color: #fff; }

/* ── KAYDIRMA CUBUGU ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-darker); }
::-webkit-scrollbar-thumb {
    background: #2E2B36;
    border-radius: var(--radius-pill);
    border: 2px solid var(--bg-darker);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── KARTLAR ────────────────────────────────────────────────────────
   Eskiden kartlar duz kutulardi. Artik: ince kenar, katmanli golge,
   ustune gelince hafif YUKSELME. Ust kenarda ince bir turuncu cizgi
   (::before) kartlara kimlik veriyor. */
.card, .product-card, .news-card, .stat-card, .panel, .box,
.market-item, .package-card, .content-card {
    background: var(--bg-card);
    border: var(--border-hair);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal),
                border-color var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.card::before, .product-card::before, .news-card::before,
.market-item::before, .package-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--gradient-accent);
    opacity: 0;
    transition: opacity var(--transition-normal);
}
.card:hover, .product-card:hover, .news-card:hover, .stat-card:hover,
.market-item:hover, .package-card:hover, .content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
    border-color: rgba(250, 204, 21,.28);
}
.card:hover::before, .product-card:hover::before, .news-card:hover::before,
.market-item:hover::before, .package-card:hover::before { opacity: 1; }

/* Hareket azaltma tercihi olan kullanicilar icin yukselmeyi kapat.
   Erisilebilirlik: bazi kullanicilarda hareket bas donmesi yapiyor. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .card:hover, .product-card:hover, .news-card:hover,
    .market-item:hover, .package-card:hover { transform: none; }
}

/* ── BUTONLAR ───────────────────────────────────────────────────────
   Yuvarlak (pill), basinca hafif ceker, ustune gelince yukselir.
   Odak halkasi eklendi: klavyeyle gezenler nerede olduklarini gorsun. */
.btn, .button, button.btn, a.btn, input[type="submit"] {
    border-radius: var(--radius-pill);
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                filter var(--transition-fast);
    box-shadow: var(--shadow-1);
}
.btn:hover, .button:hover, a.btn:hover, input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    filter: brightness(1.06);
}
.btn:active, .button:active, a.btn:active { transform: translateY(0); filter: brightness(.98); }

.btn-primary, .btn.primary {
    background: var(--gradient-accent);
    border: none;
    color: #1A1400;
}
.btn-success, .btn.success, .btn-green {
    background: var(--gradient-green);
    border: none;
    color: #0F1A08;
}
.btn-secondary, .btn.secondary, .btn-outline {
    background: transparent;
    border: 1px solid rgba(250, 204, 21,.35);
    color: var(--accent-hover);
}
.btn-secondary:hover, .btn.secondary:hover, .btn-outline:hover {
    background: rgba(250, 204, 21,.10);
    border-color: var(--accent);
}
.btn-danger, .btn.danger { background: var(--danger); border: none; color: #1A0808; }

/* Klavye odagi — her yerde gorunur ve tutarli */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── FORM ALANLARI ──────────────────────────────────────────────────
   Odaklaninca turuncu kenar + yumusak halka. Eskiden odak neredeyse
   gorunmuyordu; uzun formlarda (kayit, destek talebi) kaybolunuyordu. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea, .form-control {
    background: #131218;
    border: 1px solid #2A2830;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(250, 204, 21,.16);
    outline: none;
}
input::placeholder, textarea::placeholder { color: #6B6976; }

/* ── BAGLANTILAR ────────────────────────────────────────────────────
   Alt cizgi hover'da SOLDAN SAGA aciliyor; sabit alt cizgiden daha
   temiz ve metni kalabaliklastirmiyor. */
a { transition: color var(--transition-fast); }
a:hover { color: var(--accent-hover); }

/* ── ROZET / ETIKET ────────────────────────────────────────────────── */
.badge, .tag, .label, .chip {
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .02em;
    padding: .28em .8em;
}
.badge-success, .tag-success, .badge.green { background: rgba(147,197,114,.16); color: var(--success-soft); }
.badge-warning, .tag-warning { background: rgba(250,204,21,.16); color: var(--text-secondary); }
.badge-danger,  .tag-danger  { background: rgba(232,93,93,.16);  color: #F09B9B; }

/* ── TABLOLAR ───────────────────────────────────────────────────────
   Zebra satirlar + yapiskan baslik. Uzun listelerde (siparis gecmisi,
   kuponlar, admin listeleri) hangi sutuna baktigini kaybetmiyorsun. */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
thead th {
    position: sticky; top: 0; z-index: 2;
    background: #1A1820;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: .02em;
    border-bottom: 1px solid #2E2B36;
}
tbody tr { transition: background var(--transition-fast); }
tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
tbody tr:hover { background: rgba(250, 204, 21,.06); }
td, th { padding: .8rem 1rem; }

/* ── BASLIK / NAV ───────────────────────────────────────────────────
   Cam efekti (blur) + sayfa kayinca belirginlesen alt kenar. */
/* NOT: burada once `.navbar` da vardi. Tasarimda ust menu YUZEN BIR
   HAP seklinde; hem dis <header>'a hem hapa arka plan verilince iki
   katman ust uste bindi ve hapin disinda GRI BIR BANT olustu.
   Artik yalnizca dis kapsayici saydam-cam, hap kendi zeminini tasiyor. */
header, .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
}

/* ── GENIS EKRAN DISI: TASMA KORUMASI ───────────────────────────────
   Tablo ve kod bloklari kendi icinde kaysin; SAYFA govdesi yatay
   kaymasin. Mobilde en sik goruen bozulma budur. */
body { overflow-x: hidden; }
.table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── MOBIL ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root { --radius-md: 14px; --radius-lg: 18px; }
    .card:hover, .product-card:hover, .news-card:hover,
    .market-item:hover, .package-card:hover { transform: none; }
    td, th { padding: .65rem .7rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   MINERTOWN — GIRIS / KAYIT ALANI YENIDEN TASARIMI
   06.08.2026

   KURULUM: bu blok style.css'in EN SONUNA eklenir (tema katmanindan
   da sonra). PHP dosyalarina DOKUNULMAZ — giris.php ve kayit.php'de
   hic inline stil yok, tum gorunum buradan geliyor.

   GERI ALMA: "GIRIS / KAYIT ALANI" yorumundan dosya sonuna kadar sil.

   ── NEDEN CSS YETTI ────────────────────────────────────────────────
   Iki sayfa da ayni iskeleti paylasiyor:
     .auth-split-layout > .auth-right (gorsel) + .auth-left (form)
     .auth-header > .auth-logo / .auth-title / .auth-subtitle
     .form-group > .form-label + .form-control
     .form-check (beni hatirla / kosullar)  ·  .btn-auth
   Yapi zaten dogru; sorun BICIMLENDIRMEDEYDI.
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. SAYFA ZEMINI ────────────────────────────────────────────────
   Auth sayfasi artik tam ekran, ortalanmis ve kendi atmosferi var. */
.auth-section {
    min-height: 100vh;
    min-height: 100dvh;              /* mobil tarayici cubugu icin */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    position: relative;
    background:
        radial-gradient(1100px 620px at 12% -10%, rgba(250, 204, 21,.13), transparent 62%),
        radial-gradient(900px 520px at 100% 108%, rgba(147,197,114,.10), transparent 60%),
        var(--bg-darker, #08080A);
}

/* ── 2. IKI SUTUNLU KART ────────────────────────────────────────────
   Solda marka paneli, sagda form. Tek bir yuzen kart halinde. */
.auth-split-layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: min(1080px, 100%);
    min-height: 620px;
    background: var(--bg-card, #16151A);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: clamp(16px, 2vw, 28px);
    overflow: hidden;
    box-shadow:
        0 8px 20px rgba(0,0,0,.40),
        0 30px 70px rgba(0,0,0,.42);
    position: relative;
    z-index: 1;
}

/* ── 3. SOL: MARKA PANELI ───────────────────────────────────────────
   Gorsel + uzerine okunabilirlik icin katmanli karartma.
   Eskiden gorsel ciplakti ve uzerindeki yazi okunmuyordu. */
.auth-right, .auth-image-container {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    overflow: hidden;
    isolation: isolate;
}
.auth-right > img, .auth-image-container > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transform: scale(1.03);
    transition: transform 12s ease-out;
}
.auth-split-layout:hover .auth-right img { transform: scale(1.09); }

.auth-image-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(8,8,10,.30) 0%, rgba(8,8,10,.86) 78%),
        linear-gradient(120deg, rgba(250, 204, 21,.20), transparent 58%);
}
/* Panel uzerindeki metin */
.auth-right h1, .auth-right h2, .auth-right h3,
.auth-image-container h1, .auth-image-container h2 {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.02em;
    text-shadow: 0 2px 18px rgba(0,0,0,.55);
    margin-bottom: .4rem;
}
.auth-right p, .auth-image-container p {
    color: rgba(255,255,255,.80);
    max-width: 42ch;
    text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* ── 4. SAG: FORM ALANI ─────────────────────────────────────────────
   Bol bosluk. Eskiden alanlar sikisikti ve kayit formu bunaltiyordu. */
.auth-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 3.6vw, 3.25rem);
    background:
        linear-gradient(180deg, rgba(255,255,255,.020), transparent 220px),
        var(--bg-card, #16151A);
}

/* ── 5. BASLIK ──────────────────────────────────────────────────────── */
.auth-header { margin-bottom: 1.9rem; }
.auth-logo, .auth-header .logo {
    display: block;
    max-width: 152px;
    height: auto;
    margin-bottom: 1.35rem;
    filter: drop-shadow(0 4px 18px rgba(250, 204, 21,.30));
}
.auth-title {
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: .45rem;
    background: linear-gradient(135deg, #FFFFFF 0%, #FDE047 62%, #FACC15 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .auth-title { color: #fff; -webkit-text-fill-color: #fff; }
}
.auth-subtitle {
    color: var(--text-muted, #8E8C95);
    font-size: .96rem;
    line-height: 1.6;
}

/* ── 6. FORM ALANLARI ───────────────────────────────────────────────
   Ikon bosluğu birakildi, odak halkasi belirgin, yukseklik rahat. */
.form-group { margin-bottom: 1.15rem; position: relative; }

.form-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted, #8E8C95);
    margin-bottom: .5rem;
}

.auth-left .form-control {
    width: 100%;
    padding: .95rem 1.05rem;
    font-size: .98rem;
    background: #131218;
    border: 1px solid #2C2A34;
    border-radius: 12px;
    color: var(--text-primary, #F5F4F7);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-left .form-control:hover { border-color: #3A3744; }
.auth-left .form-control:focus {
    outline: none;
    background: #15141B;
    border-color: var(--accent, #FACC15);
    box-shadow: 0 0 0 4px rgba(250, 204, 21,.15);
}
.auth-left .form-control::placeholder { color: #63616E; }

/* Sifre alaninin sagindaki goz ikonu ile cakismasin */
.form-group:has(.fa-eye) .form-control { padding-right: 3rem; }
.form-group .fa-eye, .form-group .fas.fa-eye {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(calc(-50% + .78rem));   /* etiket yuksekligi kadar */
    color: #6B6976;
    cursor: pointer;
    transition: color .18s ease;
    z-index: 2;
}
.form-group .fa-eye:hover { color: var(--accent, #FACC15); }

/* Otomatik doldurmada tarayicinin mavi zemini — koyu temada felaket */
.auth-left input:-webkit-autofill,
.auth-left input:-webkit-autofill:hover,
.auth-left input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary, #F5F4F7);
    -webkit-box-shadow: 0 0 0 1000px #131218 inset;
    caret-color: var(--text-primary, #F5F4F7);
    transition: background-color 9999s ease-in-out 0s;
}

/* ── 7. ONAY KUTULARI ───────────────────────────────────────────────
   "Beni hatirla" ve "kosullari kabul ediyorum". Eskiden kucucuk ve
   tiklamasi zordu; artik tum satir tiklanabilir alan. */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 1.05rem 0;
    font-size: .9rem;
    color: var(--text-muted, #8E8C95);
    line-height: 1.55;
}
.form-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: .12rem;
    border: 1.5px solid #3A3744;
    border-radius: 6px;
    background: #131218;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background .16s ease, border-color .16s ease;
}
.form-check input[type="checkbox"]::before {
    content: "";
    width: 10px; height: 10px;
    transform: scale(0);
    transition: transform .14s cubic-bezier(.4,0,.2,1);
    box-shadow: inset 1em 1em #150E05;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.form-check input[type="checkbox"]:checked {
    background: var(--accent, #FACC15);
    border-color: var(--accent, #FACC15);
}
.form-check input[type="checkbox"]:checked::before { transform: scale(1); }
.form-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent, #FACC15);
    outline-offset: 2px;
}
.form-check label { cursor: pointer; }
.form-check a { color: var(--text-secondary, #FDE047); font-weight: 600; }

/* ── 8. ANA BUTON ───────────────────────────────────────────────────── */
.btn-auth {
    width: 100%;
    padding: 1rem 1.25rem;
    margin-top: .35rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    /* ⚠ 25.09.2026: sari-turuncu gradyandi; sitedeki TUM sari butonlar
         `.b3 t-sari` tonuna esitlendi (duz #FACC15, yazi #1A1400). */
    color: #1A1400;
    background: #FACC15;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(250, 204, 21,.28);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-auth:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(250, 204, 21,.36); filter: brightness(1.05); }
.btn-auth:active { transform: translateY(0); filter: brightness(.97); }
.btn-auth:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── 9. ALT BAGLANTILAR ─────────────────────────────────────────────── */
.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    font-size: .9rem;
}
.auth-footer-text {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,.07);
    text-align: center;
    font-size: .92rem;
    color: var(--text-muted, #8E8C95);
}
.auth-footer-text a {
    color: var(--text-secondary, #FDE047);
    font-weight: 700;
    text-decoration: none;
}
.auth-footer-text a:hover { text-decoration: underline; }

/* ── 10. UYARI KUTULARI ─────────────────────────────────────────────
   Sol kenarda renkli serit + ikonla hizali metin. */
.auth-left .alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1.05rem;
    margin-bottom: 1.15rem;
    border-radius: 12px;
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: .92rem;
    line-height: 1.55;
}
.auth-left .alert i, .auth-left .alert .fas { margin-top: .18rem; flex: 0 0 auto; }
.auth-left .alert-error {
    background: rgba(232,93,93,.10);
    border-color: rgba(232,93,93,.30);
    border-left-color: #E85D5D;
    color: #F3A6A6;
}
.auth-left .alert-success {
    background: rgba(147,197,114,.10);
    border-color: rgba(147,197,114,.30);
    border-left-color: #93C572;
    color: #C3E3AC;
}
.auth-left .alert-warning {
    background: rgba(255,179,71,.10);
    border-color: rgba(255,179,71,.30);
    border-left-color: #FDE047;
    color: #FFCE8A;
}

/* ── 11. KAYIT SAYFASINA OZEL ───────────────────────────────────────
   Kayitta 6 alan var (kullanici, e-posta, sifre, sifre tekrar, captcha,
   kosullar). Tek sutunda alt alta cok uzun ve bunaltici goruyordu.
   Kullanici adi + e-posta ve iki sifre alani IKISER SUTUNA aliniyor;
   form ekrana sigiyor ve kaydirma gerekmiyor. */
/* IKI SUTUN — GRID ile.
   ONCE inline-block kullanmistim: HTML'deki bosluk karakterleri
   inline-block ogeler arasinda EK GENISLIK yaratiyor, calc(50% - .5rem)
   tasip alanlar alt alta kayiyordu. Grid'de bu sorun yok, boslugu
   `gap` yonetiyor. */
.auth-left:has(input[name="password_confirm"]) form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: .9rem;
}
/* Varsayilan: her sey tam genislik (captcha, kosullar, buton, uyarilar) */
.auth-left:has(input[name="password_confirm"]) form > * { grid-column: 1 / -1; }
/* Yalnizca su dordu yan yana */
.auth-left:has(input[name="password_confirm"]) form > .form-group:has(input[name="username"]),
.auth-left:has(input[name="password_confirm"]) form > .form-group:has(input[name="email"]),
.auth-left:has(input[name="password_confirm"]) form > .form-group:has(input[name="password"]),
.auth-left:has(input[name="password_confirm"]) form > .form-group:has(input[name="password_confirm"]) {
    grid-column: span 1;
}
/* Kosul onay kutusu .form-check DEGIL duz .form-group icinde —
   o yuzden ayrica hedefleniyor. */
.auth-left .form-group:has(input[name="terms"]) {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .9rem;
    color: var(--text-muted, #8E8C95);
    line-height: 1.55;
    margin: .4rem 0 1rem;
}
.auth-left .form-group:has(input[name="terms"]) input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-top: .15rem;
    accent-color: var(--accent, #FACC15);
    cursor: pointer;
}
/* Captcha tam genislik ve daha belirgin */
.form-group:has(input[name="captcha"]) .form-control {
    letter-spacing: .28em;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Sifre tekrar alani: eslesmiyorsa kirmizi, esliyorsa yesil.
   Tarayicinin kendi dogrulamasi; JS gerekmez. */
.auth-left input[name="password_confirm"]:not(:placeholder-shown):invalid {
    border-color: rgba(232,93,93,.6);
}

/* ── 12. MOBIL ──────────────────────────────────────────────────────
   Gorsel panel gizlenir (dar ekranda yer kaplayip formu asagi itiyordu),
   form tek sutuna doner. */
@media (max-width: 900px) {
    .auth-split-layout { grid-template-columns: 1fr; min-height: 0; }
    .auth-right, .auth-image-container { display: none; }
    .auth-left { padding: 1.75rem 1.35rem 2.25rem; }
    .auth-section { padding: 0; align-items: stretch; }
    .auth-split-layout { border-radius: 0; border: none; min-height: 100dvh; box-shadow: none; }

    /* Kayitta ikili sutun tek sutuna doner */
    .auth-left:has(input[name="password_confirm"]) .form-group {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* iOS'ta 16px alti font, alana odaklaninca sayfayi ZORLA yakinlastirir.
   Kullanici her alanda ekranin kaymasindan sikayet eder. */
@media (max-width: 520px) {
    .auth-left .form-control { font-size: 16px; }
}

/* ── 13. HAREKET AZALTMA ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .auth-right img, .auth-split-layout:hover .auth-right img { transition: none; transform: none; }
    .btn-auth:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   KAYIT EKRANI — OZEL ARKA PLAN
   Giris ve kayit ayni sablonu paylasiyordu ve ikisi de ayni goruyordu.
   Kayit sayfasi artik KENDI zeminine sahip: daha yesil/canli, "yeni
   baslangic" hissi. Resim dosyasina bagli DEGIL — tamamen CSS ile
   uretiliyor, yani ek istek yok ve her ekranda net.
   Hedefleme `:has(input[name="password_confirm"])` ile; yalnizca kayit
   formunun oldugu sayfaya uyar, girise DOKUNMAZ.
   ═══════════════════════════════════════════════════════════════════ */
.auth-section:has(input[name="password_confirm"]) {
    background:
        radial-gradient(820px 520px at 88% 12%, rgba(147,197,114,.20), transparent 60%),
        radial-gradient(760px 480px at 6% 92%, rgba(250, 204, 21,.16), transparent 58%),
        radial-gradient(1200px 700px at 50% 50%, rgba(255,215,0,.05), transparent 70%),
        linear-gradient(160deg, #0B1410 0%, #08080A 55%, #100C08 100%);
}
/* Ince izgara dokusu — derinlik verir, dosya gerektirmez */
.auth-section:has(input[name="password_confirm"])::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(900px 620px at 50% 40%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(900px 620px at 50% 40%, #000 30%, transparent 78%);
}
/* Kayitta sol panel yesil tonlu — girise gore ayirt edilsin */
.auth-split-layout:has(input[name="password_confirm"]) .auth-image-overlay {
    background:
        linear-gradient(180deg, rgba(6,12,8,.28) 0%, rgba(6,12,8,.88) 78%),
        linear-gradient(120deg, rgba(147,197,114,.24), transparent 60%);
}
/* ═══════════════════════════════════════════════════════════════════
   HABER — EMOJI TEPKILERI VE YORUMLAR
   Emoji ucu duzeltildi (goreli -> mutlak yol); gorunum de yenilendi.
   ═══════════════════════════════════════════════════════════════════ */
.reaction-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.05rem; margin: 0 .4rem .5rem 0;
    background: #16151A; border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px; color: var(--text-muted,#8E8C95);
    font-size: .95rem; font-weight: 600; cursor: pointer;
    transition: transform .16s ease, border-color .16s ease,
                background .16s ease, color .16s ease;
}
.reaction-btn:hover {
    transform: translateY(-2px);
    background: #1E1C23; border-color: rgba(250, 204, 21,.34);
    color: var(--text-primary,#F5F4F7);
}
.reaction-btn:active { transform: translateY(0) scale(.96); }
/* Kullanicinin verdigi tepki belirgin dursun */
.reaction-btn.active, .reaction-btn.reacted, .reaction-btn[data-active="1"] {
    background: rgba(250, 204, 21,.13);
    border-color: rgba(250, 204, 21,.55);
    color: var(--text-secondary,#FDE047);
}
.reaction-btn .count, .reaction-btn span:last-child {
    font-variant-numeric: tabular-nums;
    opacity: .85;
}
/* Sayi degisince kisa bir zipla — tiklamanin isledigi anlasilsin */
@media (prefers-reduced-motion: no-preference) {
    .reaction-btn.active { animation: mt-tepki .32s cubic-bezier(.34,1.56,.64,1); }
    @keyframes mt-tepki { 0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)} }
}

/* ── YORUMLAR ─────────────────────────────────────────────────────── */
.comments-section { margin-top: 60px; }
.comment-item {
    background: #16151A !important;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px !important;
    transition: border-color .18s ease, transform .18s ease;
}
.comment-item:hover { border-color: rgba(250, 204, 21,.22); transform: translateX(2px); }
.comment-item img { border-radius: 12px !important; border-color: rgba(250, 204, 21,.25) !important; }

.comments-section textarea {
    border-radius: 14px !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.comments-section textarea:focus {
    border-color: var(--accent,#FACC15) !important;
    box-shadow: 0 0 0 4px rgba(250, 204, 21,.14);
}
.comments-list { gap: 16px !important; }
/* ═══════════════════════════════════════════════════════════════════
   AUTH + UST BAR — REVIZYON (ekran goruntusu sonrasi)
   ═══════════════════════════════════════════════════════════════════ */

/* ── LOGO: iki satira boluniyordu ────────────────────────────────────
   max-width:152px metin logosunu sardirip arkasinda kutu gibi bir
   golge birakiyordu. Logo METIN, resim degil — genislik sinirlanmaz. */
.auth-left .auth-logo, .auth-left .logo {
    display: inline-block;
    max-width: none;
    width: auto;
    white-space: nowrap;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    filter: none;
    margin-bottom: 1.7rem;
    opacity: .92;
}
.auth-left .auth-logo:hover { opacity: 1; color: var(--accent-hover, #FDE047); }

/* ── GORSEL PANELI: resim paneli TAM DOLDURSUN ───────────────────────
   Onceki turda `> img` yapmistim; resim daha derin bir sarmalayicida
   oldugu icin kural tutmadi ve resim, panelin dolgusu kadar ickeride
   kucuk bir kutu olarak kaldi (etrafinda siyah bosluk). Artik torun
   secici + dolgu sifir. */
.auth-right, .auth-image-container { padding: 0; }
.auth-right img, .auth-image-container img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: 0;
}
.auth-image-overlay { z-index: 1; }
/* Panel uzerindeki yazilar resmin ustunde kalsin */
.auth-right > *:not(img):not(.auth-image-overlay) { position: relative; z-index: 2; }

/* ── GIRIS BUTONU: parilti dagitiktı, topluyoruz ─────────────────── */
.btn-auth {
    box-shadow: 0 4px 14px rgba(250, 204, 21,.24);
}
.btn-auth:hover { box-shadow: 0 8px 22px rgba(250, 204, 21,.32); }

/* ── UST BAR ─────────────────────────────────────────────────────────
   Duz ve sikisikti. Daha fazla nefes, belirgin kenar, yumusak zemin. */
header nav, .navbar, header .nav-inner {
    gap: .35rem;
}
/* DIKKAT: bu kural YALNIZCA duz menu baglantilarina uygulanir.
   Once tum <a>'lara dolgu veriyordum; giris butonu da bir <a> oldugu
   icin Tailwind'in kendi dolgusunu EZDI ve buton parcalandi (yazi
   kutusundan tasti). Ayrica genisleyen dolgu menuyu iki satira
   sardirdi. Buton/rozet siniflari artik disarida. */
header nav a:not([class*="gradient"]):not([class*="rounded"]):not(.btn),
.navbar a:not([class*="gradient"]):not([class*="rounded"]):not(.btn) {
    position: relative;
    padding: .45rem .6rem;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;          /* menu ASLA alt satira sarmasin */
    transition: color .16s ease, background .16s ease;
}
/* Menu baglantilarinda hover: alttan acilan ince cizgi */
header nav a:not(.btn):not([class*="gradient"]):not([class*="rounded"])::after {
    content: "";
    position: absolute;
    left: .85rem; right: .85rem; bottom: .3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent, #FACC15);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}
header nav a:not(.btn):not([class*="gradient"]):not([class*="rounded"]):hover::after { transform: scaleX(1); }
header nav a:not(.btn):not([class*="gradient"]):not([class*="rounded"]):hover {
    color: #fff;
    background: rgba(255,255,255,.045);
}

/* Ust bardaki marka yazisi */
header .logo, header .brand, header a:is([href="index.php"],[href="/"]):first-child {
    letter-spacing: .06em;
}
/* Ust bar: tum menu tek satirda kalsin, gerekirse yatay sigsin */
header nav, .navbar { flex-wrap: nowrap; }
header nav a, .navbar a { white-space: nowrap; }
/* Cok dar ekranda menu kendi icinde kaysin, SAYFA kaymasin */
@media (max-width: 1400px) {
    header nav { overflow-x: auto; scrollbar-width: none; }
    header nav::-webkit-scrollbar { display: none; }
}
/* ═══ UST BAR + GIRIS — SON DUZELTMELER ═══════════════════════════ */

/* Hapin ici: butonun kenara yapisip tasmasini engelle */
header nav, .navbar {
    padding-right: .5rem;
    padding-left: .9rem;
    align-items: center;
}
/* Giris butonu hapin icinde nefes alsin, tasmasin */
header nav a[class*="gradient"], .navbar a[class*="gradient"] {
    flex: 0 0 auto;
    margin-left: .35rem;
    white-space: nowrap;
}

/* Sayfa en ustunde gri bant kalmasin */
main, body > main { background: transparent; }

/* ── GIRIS: form ile resim arasindaki GRI SERIT ────────────────────
   Grid sutunlari arasinda bosluk kaliyordu ve altta kartin zemini
   gri bir serit olarak goruluyordu. Bosluk sifirlandi, resim paneli
   sutunu tamamen kapliyor. */
.auth-split-layout {
    gap: 0 !important;
    column-gap: 0 !important;
}
.auth-left { border-radius: 0; }
.auth-right, .auth-image-container {
    border-radius: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
}
/* ═══════════════════════════════════════════════════════════════════
   UST BAR — GERCEK ISARETLEMEYE GORE (Tailwind ile uyumlu)
   Yapi:
     header.max-w-7xl > nav.px-8.py-4.flex.justify-between
        ├ a  (logo)
        ├ div.gap-8  > a.nav-item-modern  x7
        └ div        > a  (giris butonu)
   TASMA SEBEBI: 7 link + gap-8 (2rem) + nav'in px-8 dolgusu +
   BENIM ekledigim .45/.6rem link dolgusu toplaminda max-w-7xl'i
   asiyordu. justify-between oldugu icin fazlalik en sagdaki
   butonu disari itiyordu.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Link dolgusunu geri al — genisligi yalnizca `gap` yonetsin */
header nav a.nav-item-modern {
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    white-space: nowrap;
}
/* 2) Linkler arasi bosluk 2rem -> 1.4rem */
header nav > div:has(> a.nav-item-modern) { gap: 1.4rem !important; }
/* 3) Hapin yan dolgusu 2rem -> daha dengeli */
header > nav { padding-left: 1.6rem !important; padding-right: .9rem !important; }
/* 4) Giris butonu sikismasin, tasmasin */
header nav > div:last-child { flex: 0 0 auto; }
/* DIKKAT: :not(.hidden) SART. Bu secicinin ozgullugu (0,1,4), Tailwind'in
   .hidden sinifindan (0,1,0) yuksek; :not(.hidden) olmadan display:inline-block
   Tailwind'in display:none'unu EZIYOR ve "hidden lg:inline-block" olan KAYIT OL
   butonu telefonda da gorunup ust bari ~95px tasiriyordu (390px ekranda
   nav scrollWidth=437 > 342 olcuIdu). Responsive gizlemeyi bozma. */
header nav > div:last-child > a:not(.hidden) { display: inline-block; white-space: nowrap; }

/* 5) Alt cizgi vurgusu — .nav-item-modern uzerinden (temiz hedef) */
header nav a.nav-item-modern { position: relative; }
header nav a.nav-item-modern::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px; border-radius: 2px;
    background: var(--accent, #FACC15);
    transform: scaleX(0); transform-origin: left;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}
header nav a.nav-item-modern:hover::after,
header nav a.nav-item-modern.active::after { transform: scaleX(1); }

/* 6) KREDI YUKLE — parlasin (istenen vurgu) */
header nav a:is([href="?page=bakiye-yukle"],[href="/bakiye-yukle"]) {
    color: #FFD700 !important;
    text-shadow: 0 0 12px rgba(255,215,0,.55), 0 0 26px rgba(250, 204, 21,.30);
}
header nav a:is([href="?page=bakiye-yukle"],[href="/bakiye-yukle"])::after {
    background: linear-gradient(90deg,#FFD700,#FACC15);
    transform: scaleX(1);
}
@media (prefers-reduced-motion: no-preference) {
    header nav a:is([href="?page=bakiye-yukle"],[href="/bakiye-yukle"]) { animation: mt-kredi 2.6s ease-in-out infinite; }
    @keyframes mt-kredi {
        0%,100% { text-shadow: 0 0 10px rgba(255,215,0,.42), 0 0 22px rgba(250, 204, 21,.22); }
        50%     { text-shadow: 0 0 18px rgba(255,215,0,.80), 0 0 38px rgba(250, 204, 21,.48); }
    }
}

/* ── GIRIS: gri serit — resim SARMALAYICISI da paneli doldursun ──────
   Onceki denemede yalnizca <img>'i mutlak yapmistim; resim
   .auth-image-container icinde oldugu icin o sarmalayicinin kendi
   olculeri gri seridi biraktiriyordu. Sarmalayici da paneli kapliyor. */
.auth-right .auth-image-container,
.auth-right > div:has(img) {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════
   GIRIS / KAYIT — LEADEROS TARZI DUZEN  (cdx referansi)
   Referans acik/yesil tema; MinerTown kimligi koyu+turuncu oldugu icin
   YAPI alindi, RENK korundu. Aksi halde bu iki sayfa sitenin geri
   kalanindan kopuk dururdu.
   HTML'e dokunulmadi — sira degisimi, mutlak yerlesim ve secicilerle.
   ═══════════════════════════════════════════════════════════════════ */

.auth-section { padding: clamp(.75rem, 2.2vw, 2rem); }

.auth-split-layout {
    position: relative;
    grid-template-columns: 1.02fr .98fr;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: min(880px, calc(100dvh - 3rem));
    gap: clamp(1rem, 2.4vw, 2.4rem) !important;
    overflow: visible !important;
}

/* ── GORSEL PANELI SOLA ─────────────────────────────────────────── */
.auth-right, .auth-image-container {
    order: 1;
    border-radius: clamp(18px, 2vw, 30px) !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.auth-right img, .auth-image-container img { border-radius: inherit; }
.auth-image-overlay {
    background: linear-gradient(180deg, rgba(8,8,10,.10) 0%, rgba(8,8,10,.55) 58%, rgba(8,8,10,.92) 100%) !important;
}

/* ── FORM PANELI SAGA, FERAH ────────────────────────────────────── */
.auth-left {
    order: 2;
    background: transparent !important;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 3.5rem) !important;
    justify-content: center;
}
.auth-left .auth-logo, .auth-left .logo { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.auth-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important; margin-bottom: .55rem; }
.auth-subtitle { font-size: 1rem; }
.auth-header { margin-bottom: clamp(1.6rem, 3.5vw, 2.8rem) !important; }

/* Alanlar: cerceve yerine ALT CIZGI + sol renk rozeti (referans hissi) */
.auth-left .form-group { margin-bottom: 1.5rem; }
.auth-left .form-label {
    font-size: .74rem;
    letter-spacing: .11em;
    margin-bottom: .55rem;
    opacity: .8;
}
.auth-left .form-control {
    background: rgba(255,255,255,.028) !important;
    border: none !important;
    border-bottom: 2px solid rgba(255,255,255,.12) !important;
    border-radius: 12px 12px 4px 4px !important;
    padding: 1rem 1.1rem !important;
    font-size: 1rem;
}
.auth-left .form-control:hover { border-bottom-color: rgba(250, 204, 21,.35) !important; }
.auth-left .form-control:focus {
    background: rgba(250, 204, 21,.05) !important;
    border-bottom-color: var(--accent,#FACC15) !important;
    box-shadow: none !important;
}

/* Ana buton: tam genislik, dolu, referanstaki gibi belirgin */
.btn-auth {
    padding: 1.1rem 1.25rem !important;
    font-size: 1.02rem !important;
    border-radius: 14px !important;
    margin-top: 1.2rem;
    box-shadow: 0 8px 22px rgba(250, 204, 21,.26) !important;
}

.form-footer { margin-top: 1.3rem; }

/* ── "HESABIN YOK MU?" CAGRISI RESMIN USTUNE ────────────────────
   Referansta bu blok gorselin sol altinda duruyor. Bizde HTML'de
   form panelinin altinda; tasimak yerine gorselin uzerine
   KONUMLANDIRIYORUZ (HTML'e dokunmamak icin). */
@media (min-width: 901px) {
    .auth-footer-text {
        position: absolute;
        left: clamp(1.6rem, 3vw, 3rem);
        bottom: clamp(1.6rem, 3vw, 3rem);
        width: min(46%, 430px);
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
        font-size: 1.05rem;
        color: rgba(255,255,255,.86);
        z-index: 3;
        text-shadow: 0 2px 14px rgba(0,0,0,.6);
    }
    .auth-footer-text a {
        display: inline-block;
        margin-top: .85rem;
        padding: .72rem 1.5rem;
        border-radius: 999px;
        background: var(--gradient-accent, #FACC15);
        color: #1A1400 !important;
        font-weight: 800;
        text-decoration: none !important;
        box-shadow: 0 8px 22px rgba(250, 204, 21,.34);
        transition: transform .16s ease, box-shadow .16s ease;
    }
    .auth-footer-text a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(250, 204, 21,.42); }
}

/* Mobil: gorsel gizli, form tek sutun, cagri normal akista */
@media (max-width: 900px) {
    .auth-split-layout { gap: 0 !important; min-height: 100dvh; }
    .auth-footer-text { position: static; width: auto; text-align: center !important; }
}
/* ═══════════════════════════════════════════════════════════════════
   GIRIS / KAYIT — ACIK TEMA (cdx referansinin BIREBIR uygulamasi)
   Kadir "direk bunun aynisini" dedi: beyaz zemin + yesil vurgu.
   YALNIZCA bu iki sayfayi etkiler; sitenin geri kalani koyu kalir.
   ═══════════════════════════════════════════════════════════════════ */

.auth-section {
    background: #FFFFFF !important;
    padding: clamp(.5rem, 1.6vw, 1.5rem) !important;
}
.auth-section::before { display: none !important; }   /* koyu tema dokusu */

.auth-split-layout {
    background: #FFFFFF !important;
    gap: clamp(1rem, 3vw, 3.5rem) !important;
}

/* ── GORSEL PANELI (sol) ───────────────────────────────────────── */
.auth-right, .auth-image-container {
    border-radius: 26px !important;
    box-shadow: none !important;
}
.auth-image-overlay {
    background: linear-gradient(180deg, rgba(10,20,14,0) 42%, rgba(10,20,14,.72) 100%) !important;
}

/* ── FORM PANELI (sag) — BEYAZ ─────────────────────────────────── */
.auth-left {
    background: #FFFFFF !important;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 4vw, 4.5rem) !important;
}
.auth-left .auth-logo, .auth-left .logo {
    color: #1F2937 !important;
    opacity: 1;
}
.auth-title {
    background: none !important;
    -webkit-background-clip: initial !important;
            background-clip: initial !important;
    -webkit-text-fill-color: #111827 !important;
    color: #111827 !important;
    font-weight: 800 !important;
}
.auth-subtitle { color: #9CA3AF !important; }

.auth-left .form-label {
    color: #9CA3AF !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
}
.auth-left .form-control {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    color: #111827 !important;
    padding: .95rem 1.05rem !important;
}
.auth-left .form-control::placeholder { color: #9CA3AF !important; }
.auth-left .form-control:hover { border-color: #D1D5DB !important; }
.auth-left .form-control:focus {
    background: #FFFFFF !important;
    border-color: #22C55E !important;
    box-shadow: 0 0 0 4px rgba(34,197,94,.14) !important;
}
/* Otomatik doldurma: koyu tema kalintisini temizle */
.auth-left input:-webkit-autofill,
.auth-left input:-webkit-autofill:hover,
.auth-left input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    caret-color: #111827 !important;
}
/* Sifre goz ikonu */
.auth-left .form-group .fa-eye { color: #9CA3AF !important; }
.auth-left .form-group .fa-eye:hover { color: #22C55E !important; }

/* Onay kutulari */
.auth-left .form-check,
.auth-left .form-group:has(input[name="terms"]) { color: #6B7280 !important; }
.auth-left .form-check input[type="checkbox"] {
    background: #FFFFFF !important;
    border-color: #D1D5DB !important;
}
.auth-left .form-check input[type="checkbox"]:checked {
    background: #22C55E !important;
    border-color: #22C55E !important;
}
.auth-left .form-check input[type="checkbox"]::before { box-shadow: inset 1em 1em #FFFFFF !important; }
.auth-left .form-check a,
.auth-left .form-group:has(input[name="terms"]) a { color: #16A34A !important; }
.auth-left .form-group:has(input[name="terms"]) input[type="checkbox"] { accent-color: #22C55E !important; }

/* Ana buton — YESIL */
.btn-auth {
    background: #22C55E !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(34,197,94,.28) !important;
}
.btn-auth:hover {
    background: #16A34A !important;
    box-shadow: 0 10px 24px rgba(34,197,94,.34) !important;
}

/* Alt baglantilar */
.form-footer, .form-footer a { color: #6B7280 !important; }
.form-footer a:hover { color: #16A34A !important; }

/* Uyari kutulari — acik zemine uygun */
.auth-left .alert-error   { background:#FEF2F2 !important; border-color:#FECACA !important; border-left-color:#EF4444 !important; color:#B91C1C !important; }
.auth-left .alert-success { background:#F0FDF4 !important; border-color:#BBF7D0 !important; border-left-color:#22C55E !important; color:#15803D !important; }
.auth-left .alert-warning { background:#FFFBEB !important; border-color:#FDE68A !important; border-left-color:#F59E0B !important; color:#B45309 !important; }

/* Resmin ustundeki "Hesabin yok mu?" cagrisi — YESIL buton */
@media (min-width: 901px) {
    .auth-footer-text { color: rgba(255,255,255,.92) !important; }
    .auth-footer-text a {
        background: #22C55E !important;
        color: #FFFFFF !important;
        box-shadow: 0 8px 22px rgba(34,197,94,.36) !important;
    }
    .auth-footer-text a:hover { background: #16A34A !important; }
}
@media (max-width: 900px) {
    .auth-footer-text { color:#6B7280 !important; border-top:1px solid #E5E7EB !important; }
    .auth-footer-text a { color:#16A34A !important; }
}
/* ═══════════════════════════════════════════════════════════════════
   GIRIS / KAYIT — SON HAL: TURUNCU + SIYAH, SAGDA RAKUN
   Acik tema iptal, kimlik rengine donuldu. Gorsel SAGA alindi ve
   kapak fotografi yerine MASKOT (rakun) gosteriliyor.
   Bu blok en sonda oldugu icin onceki auth kurallarini ezer.
   ═══════════════════════════════════════════════════════════════════ */

/* ── KOYU ZEMIN GERI ─────────────────────────────────────────────── */
.auth-section {
    background:
        radial-gradient(1000px 620px at 88% 8%, rgba(250, 204, 21,.16), transparent 60%),
        radial-gradient(820px 520px at 4% 96%, rgba(250, 204, 21,.10), transparent 58%),
        #0A0A0C !important;
}
.auth-split-layout { background: transparent !important; }

/* ── FORM PANELI: SOLDA, KOYU ────────────────────────────────────── */
.auth-left {
    order: 1 !important;
    background: transparent !important;
}
.auth-left .auth-logo, .auth-left .logo { color: #FFFFFF !important; }
.auth-title {
    background: linear-gradient(135deg,#FFFFFF 0%,#FDE047 58%,#FACC15 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.auth-subtitle { color: #8E8C95 !important; }
.auth-left .form-label { color: #8E8C95 !important; }

.auth-left .form-control {
    background: #131218 !important;
    border: 1px solid #2C2A34 !important;
    color: #F5F4F7 !important;
}
.auth-left .form-control::placeholder { color: #63616E !important; }
.auth-left .form-control:hover { border-color: #3A3744 !important; }
.auth-left .form-control:focus {
    background: #15141B !important;
    border-color: #FACC15 !important;
    box-shadow: 0 0 0 4px rgba(250, 204, 21,.16) !important;
}
.auth-left input:-webkit-autofill,
.auth-left input:-webkit-autofill:hover,
.auth-left input:-webkit-autofill:focus {
    -webkit-text-fill-color: #F5F4F7 !important;
    -webkit-box-shadow: 0 0 0 1000px #131218 inset !important;
    caret-color: #F5F4F7 !important;
}
.auth-left .form-group .fa-eye { color: #6B6976 !important; }
.auth-left .form-group .fa-eye:hover { color: #FACC15 !important; }

.auth-left .form-check,
.auth-left .form-group:has(input[name="terms"]) { color: #8E8C95 !important; }
.auth-left .form-check input[type="checkbox"] { background:#131218 !important; border-color:#3A3744 !important; }
.auth-left .form-check input[type="checkbox"]:checked { background:#FACC15 !important; border-color:#FACC15 !important; }
.auth-left .form-check input[type="checkbox"]::before { box-shadow: inset 1em 1em #150E05 !important; }
.auth-left .form-check a,
.auth-left .form-group:has(input[name="terms"]) a { color:#FDE047 !important; }
.auth-left .form-group:has(input[name="terms"]) input[type="checkbox"] { accent-color:#FACC15 !important; }

.btn-auth {
    background: #FACC15 !important;   /* 25.09: tek sari ton */
    color: #1A1400 !important;
    box-shadow: 0 8px 22px rgba(250, 204, 21,.30) !important;
}
.btn-auth:hover { box-shadow: 0 12px 30px rgba(250, 204, 21,.40) !important; }

.form-footer, .form-footer a { color:#8E8C95 !important; }
.form-footer a:hover { color:#FDE047 !important; }

.auth-left .alert-error   { background:rgba(232,93,93,.10) !important; border-color:rgba(232,93,93,.30) !important; border-left-color:#E85D5D !important; color:#F3A6A6 !important; }
.auth-left .alert-success { background:rgba(147,197,114,.10) !important; border-color:rgba(147,197,114,.30) !important; border-left-color:#93C572 !important; color:#C3E3AC !important; }
.auth-left .alert-warning { background:rgba(255,179,71,.10) !important; border-color:rgba(255,179,71,.30) !important; border-left-color:#FDE047 !important; color:#FFCE8A !important; }

/* ── GORSEL PANELI: SAGDA, RAKUN ─────────────────────────────────── */
.auth-right, .auth-image-container {
    order: 2 !important;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 26px !important;
    background:
        radial-gradient(58% 58% at 50% 44%, rgba(250, 204, 21,.20), transparent 68%),
        linear-gradient(160deg, #17140F 0%, #0C0B0E 60%, #120D08 100%) !important;
    border: 1px solid rgba(250, 204, 21,.16) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
    overflow: hidden !important;
}
/* Eski kapak fotografini gizle */
.auth-right img, .auth-image-container img { display: none !important; }
.auth-image-overlay { background: none !important; }

/* Maskot */
.auth-right::before, .auth-image-container:not(.auth-right)::before {
    content: "";
    position: absolute;
    left: 50%; top: 46%;
    transform: translate(-50%,-50%);
    width: min(78%, 460px);
    aspect-ratio: 1 / 1.12;
    background: url("/assets/images/mascot.png") center/contain no-repeat;
    filter: drop-shadow(0 26px 46px rgba(0,0,0,.6));
    z-index: 2;
}
/* Zeminde yumusak isik */
.auth-right::after, .auth-image-container:not(.auth-right)::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 12%;
    transform: translateX(-50%);
    width: 62%; height: 46px;
    background: radial-gradient(50% 50%, rgba(250, 204, 21,.35), transparent 70%);
    filter: blur(14px);
    z-index: 1;
}

/* Cagri yazisi maskotun altinda kalsin */
@media (min-width: 901px) {
    .auth-footer-text {
        color: rgba(255,255,255,.88) !important;
        text-align: center !important;
        left: 50% !important;
        transform: translateX(-50%);
        width: min(80%, 460px) !important;
        bottom: clamp(1.2rem, 2.4vw, 2.2rem) !important;
        z-index: 3;
    }
    .auth-footer-text a {
        background: #FACC15 !important;   /* 25.09: tek sari ton */
        color: #1A1400 !important;
        box-shadow: 0 8px 22px rgba(250, 204, 21,.36) !important;
    }
}
@media (max-width: 900px) {
    .auth-footer-text { color:#8E8C95 !important; border-top:1px solid rgba(255,255,255,.07) !important; }
    .auth-footer-text a { color:#FDE047 !important; }
}
/* ═══════════════════════════════════════════════════════════════════
   GIRIS / KAYIT — OZEL PANEL GORSELI (son)
   Sag panel artik tek parca, ozel uretilmis bir kompozisyon:
   maskot + isik halkalari + izgara + metin, hepsi gorsele gomulu.
   Onceki denemede maskotu CSS ile ortalayip arkasina efekt
   koymaya calisiyordum; parcali duruyordu. Tek gorsel daha temiz.
   ═══════════════════════════════════════════════════════════════════ */
.auth-right, .auth-image-container {
    background: url("/assets/images/auth-panel.png") center/cover no-repeat, #0C0A0E !important;
    border: 1px solid rgba(250, 204, 21,.14) !important;
    border-radius: 26px !important;
}
.auth-right::before, .auth-right::after,
.auth-image-container::before, .auth-image-container::after { display: none !important; }
.auth-right img, .auth-image-container img { display: none !important; }
.auth-image-overlay { background: none !important; }

/* Cagri yazisi gorselin altina, okunakli seritle */
@media (min-width: 901px) {
    .auth-footer-text {
        left: 50% !important;
        transform: translateX(-50%);
        bottom: 26px !important;
        width: calc(100% - 44px) !important;
        padding: 14px 18px !important;
        border-radius: 16px !important;
        background: rgba(10,9,12,.62) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,.08) !important;
        text-align: center !important;
        font-size: .98rem !important;
        color: rgba(255,255,255,.88) !important;
        text-shadow: none !important;
    }
    .auth-footer-text a { margin-top: .6rem !important; padding: .6rem 1.3rem !important; }
}

/* Form tarafi biraz daha ferah */
.auth-left { padding: clamp(1.5rem,3vw,3rem) clamp(1.25rem,3.4vw,3.8rem) !important; }
.auth-split-layout { gap: clamp(.8rem,1.8vw,1.8rem) !important; }
/* ═══════════════════════════════════════════════════════════════════
   DUZELTME: "Zaten hesabin var mi? / Hesabin yok mu?" bloğu
   FORM BUTONUNUN USTUNE BINIYORDU.
   Sebep: mutlak konumlanan blogun genisligi `calc(100% - 44px)`
   yazilmisti; bu %100 = TUM DUZEN (form + gorsel) demek. Blok form
   tarafina uzanip "Kayit Ol" butonunun uzerine biniyordu. Kayit
   sayfasinda form uzun oldugu icin cakisma acikca goruldu.
   Cozum: blok yalnizca SAG PANELE (gorsel) sabitlenir.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
    .auth-footer-text {
        left: auto !important;
        right: 22px !important;
        transform: none !important;
        width: calc(49% - 34px) !important;
        max-width: 520px;
    }
}
/* Formun alt bosluğu: buton ile sayfa dibi arasi nefes */
.auth-left .btn-auth { margin-bottom: .4rem; }
/* ═══════════════════════════════════════════════════════════════════
   DUZELTME 2 — cakisma tamamen bitsin
   Genisligi yuzdeyle vermek yetmedi: grid'in `gap` degeri sag sutunu
   %51'in biraz otesine itiyor, blok da bu yuzden birkac piksel form
   tarafina tasiyordu. Artik yuzde-genislik YOK; blok sol kenarindan
   %55'e SABITLENIP sag kenara yasliyor. Boyle boslugun ne oldugundan
   bagimsiz olarak her zaman sag panelin icinde kalir.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
    .auth-footer-text {
        left: 55% !important;
        right: 26px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        box-sizing: border-box;
    }
    /* Buton ile cakisma ihtimaline karsi form tarafi ustte kalsin */
    .auth-left { position: relative; z-index: 4; }
    .auth-footer-text { z-index: 3 !important; }
}
/* ═══════════════════════════════════════════════════════════════════
   DUZELTME 3 (KESIN) — cagri blogu MUTLAK KONUMDAN CIKTI
   Uc kez konumlandirmayla denedim, olmadi: blok gorsel panelin
   uzerinde mutlak duruyor ama HTML'de FORM panelinin icinde. Grid
   bosluğu, sutun oranlari ve form yuksekligi degistikce her seferinde
   birkac piksel kayip "Kayit Ol" butonuna degiyordu.
   Kok sebebi kaldiriyorum: blok artik NORMAL AKISTA, formun altinda.
   Cakisma imkansiz — ust uste binebilmesi icin once akistan cikmasi
   gerekirdi.
   ═══════════════════════════════════════════════════════════════════ */
.auth-footer-text {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: auto !important;

    margin-top: 1.8rem !important;
    padding: 1.1rem 1.2rem !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.028) !important;
    backdrop-filter: none;
    text-align: center !important;
    font-size: .95rem !important;
    color: #8E8C95 !important;
    text-shadow: none !important;
}
.auth-footer-text a {
    display: inline-block !important;
    margin-top: .7rem !important;
    padding: .68rem 1.5rem !important;
    border-radius: 999px !important;
    background: #FACC15 !important;   /* 25.09: tek sari ton */
    color: #1A1400 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(250, 204, 21,.30) !important;
}
.auth-footer-text a:hover { filter: brightness(1.06); }
/* ═══ 23.08.2026 — UST BAR: CAM HAP KALDIRILDI (xs1 referansi) ═══════
   Menu artik hero'nun uzerinde ciplak duruyor. Once hap icin verilmis
   yan dolgu/arkaplan/cerceve kurallari maskot ikonunu ve kullanici
   butonunu iceri itiyordu; burada sifirlaniyor.
   NOT: Maskot linkine `rounded-2xl` verildi ki yukaridaki
   `header nav a:not([class*="rounded"])` kurali ona dolgu + hover alt
   cizgisi eklemesin. */
header > nav,
header nav,
.navbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* ═══ 23.08.2026 — GIRIS/KAYIT: TAM EKRAN BOLUNMUS DUZEN (login.png referansi)
   Ust menu ve footer index.php icinde $isAuthPage ile gizleniyor.
   ★ SOL = FORM, SAG = GORSEL. Bunu TERS varsaymak daha once giris
     sayfasini CANLIDA BOMBOS birakmisti; .auth-left formu tasir. */
.auth-section { min-height: 100vh; padding: 0; align-items: stretch; }
.auth-split-layout {
    max-width: none; width: 100%; min-height: 100vh;
    border-radius: 0; border: 0; box-shadow: none; background: #0B0C10;
}
/* DIKKAT: .auth-split-layout bu dosyada GRID olarak tanimli (satir ~1226,
   grid-template-columns: 1.05fr 1fr). Burada .auth-left'e width:50% vermek
   hucrenin YARISINI aliyordu ve kart 248px'e dusup yazilar sariyordu.
   Grid hucresini TAM doldur: width:100%. */
.auth-left {
    width: 100%; max-width: none; padding: 32px 40px;
    justify-content: center; align-items: center;
    box-shadow: none; background: #0B0C10;
}

/* Sol ustteki "ana sayfaya geri don" hapi */
.auth-back-btn {
    position: absolute; top: 26px; left: 26px; z-index: 5;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px; color: #E7E9EE; text-decoration: none;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    transition: background .2s, color .2s;
}
.auth-back-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Kartin ustundeki maskot */
.auth-logo-mascot { display: block; margin: 0 auto 22px; width: 68px; }
.auth-logo-mascot img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 16px rgba(0,0,0,.55)); }

.auth-card {
    width: 100%; max-width: 430px;
    background: #15171D; border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px; padding: 30px 30px 26px;
    box-shadow: 0 24px 50px rgba(0,0,0,.45);
}
.auth-card .auth-header { text-align: center; margin-bottom: 26px; }
.auth-card .auth-title { font-size: 1.65rem; margin-bottom: 6px; }
.auth-card .auth-subtitle { font-size: .88rem; }
.auth-card .form-label { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.auth-card .form-control { padding: 13px 15px; border-radius: 10px; }

.form-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.form-label-row .form-label { margin-bottom: 0; }
.auth-forgot { color: var(--accent); font-size: .75rem; font-weight: 700; text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }

/* Referanstaki kalin "oyun butonu" hissi */
.btn-auth {
    padding: 15px; border-radius: 12px; margin-bottom: 0;
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    letter-spacing: .06em; text-transform: uppercase;
    /* ⚠ 25.09.2026: gradyan kaldirildi — sitedeki tum sari butonlar
         `.b3 t-sari` tonunda (duz #FACC15, derinlik #A87F06, yazi #1A1400). */
    color: #1A1400;
    background: #FACC15;
    border: 1px solid rgba(0,0,0,.35);
    box-shadow: 0 5px 0 #A87F06, 0 12px 22px rgba(250,204,21,.28);
}
.btn-auth:hover {
    transform: translateY(-2px); filter: brightness(1.08) saturate(1.05);
    box-shadow: 0 7px 0 #A87F06, 0 16px 26px rgba(250,204,21,.36);
}
.btn-auth:active { transform: translateY(3px); box-shadow: 0 2px 0 #A87F06, 0 6px 12px rgba(250,204,21,.25); }

.auth-divider { height: 1px; background: rgba(255,255,255,.07); margin: 20px 0 16px; }
.auth-powered { margin-top: 22px; text-align: center; color: rgba(255,255,255,.35); font-size: .75rem; font-weight: 700; }
.auth-powered strong { color: rgba(255,255,255,.6); }

.auth-right { flex: 1; }
.auth-image-container img { opacity: 1; }
.auth-image-overlay { background: linear-gradient(to right, rgba(11,12,16,.85) 0%, rgba(11,12,16,.15) 22%, transparent 45%); }

@media (max-width: 992px) {
    .auth-left { width: 100%; max-width: none; padding: 90px 20px 40px; }
    .auth-right { display: none; }
    .auth-back-btn { top: 18px; left: 18px; }
}
/* Kayit formu: tema katmani onu 2 SUTUNLU grid yapiyor
   (.auth-left:has(input[name="password_confirm"]) form, ozgulluk 0,2,2).
   Referansta (reg.png) alanlar ALT ALTA ve kartin icinde 2 sutun sikisiyor.
   Ayni ozgullukte (0,2,2) ve DAHA SONRA yazildigi icin bu kural kazanir. */
.auth-card:has(input[name="password_confirm"]) form { display: block; }
.auth-card:has(input[name="password_confirm"]) { max-width: 460px; }

/* ═══ 24.08.2026 — GIRIS/KAYIT: login.png / reg.png ile BIREBIR ═════
   Kadir: "masaustundeki login ve register resmiyle tipa tipa ayni olsun".
   ★ DIKKAT: bu dosyada auth icin 3 ayri tema katmani var ve bazilari
     !important kullaniyor (ornek: .auth-title{font-size:...!important}).
     Bu yuzden buradaki kurallar .auth-section .auth-left ... seklinde
     YUKSEK OZGULLUKLE ve gerektiginde !important ile yazildi.
   ★ .auth-left FORMU tasir, .auth-right GORSELI. Ters varsayma. */

.auth-section .auth-split-layout { background: #0C0C0E !important; }
.auth-section .auth-left { background: #0C0C0E !important; }
.auth-section .auth-left .auth-logo-mascot { width: 74px; margin: 0 auto 20px; }

.auth-section .auth-left .auth-card {
    max-width: 450px !important;
    background: #1E2128 !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    border-radius: 16px !important;
    padding: 34px 34px 28px !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.45) !important;
}
.auth-section .auth-left .auth-card .auth-header { text-align: center !important; margin-bottom: 26px !important; }
.auth-section .auth-left .auth-card .auth-title {
    font-size: 1.62rem !important; font-weight: 800 !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important;
    margin-bottom: 7px !important; letter-spacing: -.2px !important; text-align: center !important;
}
.auth-section .auth-left .auth-card .auth-subtitle {
    font-size: .9rem !important; color: #9BA1AC !important; text-align: center !important;
}

.auth-section .auth-left .auth-card .form-group { margin-bottom: 18px !important; }
.auth-section .auth-left .auth-card .form-label {
    text-transform: uppercase !important; font-size: .69rem !important; font-weight: 700 !important;
    letter-spacing: .09em !important; color: #C6CBD3 !important; margin-bottom: 8px !important;
}
.auth-section .auth-left .auth-card .form-control {
    background: #17181C !important; border: 1px solid #24262C !important;
    border-radius: 8px !important; padding: 13px 15px !important; font-size: .95rem !important;
}
.auth-section .auth-left .auth-card .form-control:focus {
    border-color: #F5C518 !important; box-shadow: 0 0 0 3px rgba(245,197,24,.14) !important;
}

.auth-section .auth-left .form-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.auth-section .auth-left .form-label-row .form-label { margin-bottom: 0 !important; }
.auth-section .auth-left .auth-forgot { color: #F5C518 !important; font-size: .78rem !important; font-weight: 800 !important; text-decoration: none; }
.auth-section .auth-left .auth-forgot:hover { text-decoration: underline; }

.auth-section .auth-left .auth-card .form-footer { margin-bottom: 22px !important; }
.auth-section .auth-left .auth-card .form-check { color: #C6CBD3 !important; font-size: .88rem !important; }

/* Referanstaki kalin ALTIN buton */
.auth-section .auth-left .auth-card .btn-auth {
    width: 100% !important; padding: 16px !important; margin-bottom: 0 !important;
    font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important;
    font-size: 1rem !important; letter-spacing: .05em !important; text-transform: uppercase !important;
    color: #3A2A00 !important;
    background: linear-gradient(180deg, #FFDD5C 0%, #FFC93C 52%, #F0AE12 100%) !important;
    border: 2px solid #C98F08 !important; border-radius: 11px !important;
    box-shadow: 0 5px 0 #A87407, 0 12px 22px rgba(245,197,24,.22) !important;
    filter: none !important;
}
.auth-section .auth-left .auth-card .btn-auth:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(180deg, #FFE87E 0%, #FFD24E 52%, #F5B81C 100%) !important;
    box-shadow: 0 7px 0 #A87407, 0 16px 26px rgba(245,197,24,.3) !important;
}
.auth-section .auth-left .auth-card .btn-auth:active { transform: translateY(3px) !important; box-shadow: 0 2px 0 #A87407 !important; }

.auth-section .auth-left .auth-divider { height: 1px; background: rgba(255,255,255,.07); margin: 22px 0 16px; }

/* Kayit/giris baglantisi DUZ YAZI olmali (kutu/buton DEGIL) */
.auth-section .auth-left .auth-card .auth-footer-text {
    text-align: center !important; color: #9BA1AC !important; font-size: .9rem !important; margin: 0 !important;
    background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important;
}
.auth-section .auth-left .auth-card .auth-footer-text a {
    color: #F5C518 !important; font-weight: 800 !important; margin-left: 5px !important;
    background: none !important; background-image: none !important; border: none !important;
    padding: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    display: inline !important; transform: none !important;
}
.auth-section .auth-left .auth-card .auth-footer-text a:hover { text-decoration: underline; transform: none !important; box-shadow: none !important; }

.auth-section .auth-left .auth-powered { margin-top: 20px; text-align: center; color: #6B7280; font-size: .78rem; font-weight: 700; }
.auth-section .auth-left .auth-powered strong { color: #9BA1AC; }

/* Sag panel: TAM KAPLAYAN gorsel, uzerinde ek maskot/parlama YOK */
.auth-section .auth-right::before, .auth-section .auth-right::after,
.auth-section .auth-image-container::before, .auth-section .auth-image-container::after { display: none !important; }
.auth-section .auth-right, .auth-section .auth-image-container { padding: 0 !important; }
.auth-section .auth-right img, .auth-section .auth-image-container img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 1 !important;
}
.auth-section .auth-image-overlay {
    background: linear-gradient(90deg, rgba(12,12,14,.55) 0%, rgba(12,12,14,.10) 18%, transparent 40%) !important;
}
/* Sag panel arkaplani: eski tema `auth-panel.png`'yi !important ile
   basiyor ve 26px kose + cerceve veriyordu (icinde "Macera seni bekliyor"
   yazili ozel afis). Referansta orasi TAM KAPLAYAN duz gorsel.
   .auth-section on eki ile ozgulluk yukseltilip eziliyor. */
.auth-section .auth-right,
.auth-section .auth-image-container {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Eski tema `.auth-right > img { z-index:-2 }` veriyordu; panelin arkaplanini
   opak yapinca gorsel ARKADA kalip kayboldu. z-index sifirlaniyor ve panele
   yalnizca yedek koyu renk veriliyor. */
.auth-section .auth-right { background-color: #0C0A0E !important; }
.auth-section .auth-right img,
.auth-section .auth-image-container img { z-index: 0 !important; }
.auth-section .auth-image-overlay { z-index: 1 !important; }
/* Eski tema, sag panelin gorselini CSS arkaplanina tasidigi icin
   `<img>`'i display:none yapmis (olctum: img W=0 H=0 disp=none, ama
   naturalWidth=1920 yani gorsel YUKLENIYOR, sadece gizli).
   Referansta orasi gercek bir gorsel oldugu icin geri aciliyor. */
.auth-section .auth-right img,
.auth-section .auth-image-container img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    z-index: 0 !important;
}
/* ═══ 24.08.2026 — AUTH MOBIL + KAYIT GUZELLESTIRME ═════════════════
   Olcum (390px iframe): sag gorsel paneli GIZLENMIYORDU (mevcut
   @media(max-width:992px){.auth-right{display:none}} kurali, sonradan
   eklenen daha ozgul kurallar yuzunden yeterli gelmiyordu), form ~210px'e
   sikisip etiketler ve buton 3 satira boluyordu.
   Burada .auth-section on ekiyle ozgulluk yukseltilip !important veriliyor. */

@media (max-width: 992px) {
    .auth-section .auth-split-layout {
        display: block !important;
        grid-template-columns: 1fr !important;
        min-height: 100dvh !important;
    }
    .auth-section .auth-right,
    .auth-section .auth-image-container { display: none !important; }

    .auth-section .auth-left {
        width: 100% !important; max-width: none !important;
        padding: 88px 18px 36px !important;
        align-items: center !important;
    }
    .auth-section .auth-left .auth-card {
        max-width: 440px !important; width: 100% !important;
        padding: 26px 22px 24px !important;
    }
    .auth-section .auth-left .auth-back-btn {
        top: 16px !important; left: 16px !important;
        padding: 9px 14px !important; font-size: .62rem !important;
        white-space: nowrap !important;
    }
    .auth-section .auth-left .auth-logo-mascot { width: 62px !important; margin-bottom: 16px !important; }
    .auth-section .auth-left .auth-card .auth-title { font-size: 1.42rem !important; }
    .auth-section .auth-left .auth-card .auth-subtitle { font-size: .85rem !important; }
    .auth-section .auth-left .auth-card .form-label { white-space: nowrap !important; }
    .auth-section .auth-left .auth-card .btn-auth {
        white-space: nowrap !important; padding: 15px 12px !important; font-size: .92rem !important;
    }
    .auth-section .auth-left .auth-card .auth-footer-text { font-size: .85rem !important; }
}

/* ── KAYIT FORMU: guvenlik sorusu + kosul satiri duzeni ────────────── */
.auth-section .auth-left .auth-card .form-group:has(input[name="captcha"]) { margin-bottom: 16px !important; }
/* Soru kutusu ile cevap alani YAN YANA (mobilde alt alta) */
.auth-section .auth-left .mt-captcha-satir { display: flex; gap: 10px; align-items: stretch; }
.auth-section .auth-left .mt-captcha-satir > :first-child { flex: 0 0 44%; }
.auth-section .auth-left .mt-captcha-satir > :last-child  { flex: 1; }

/* Kullanim sozlesmesi satiri: kutu ve yazi ayni hizada, sarmasin */
.auth-section .auth-left .auth-card .form-group:has(input[name="terms"]) {
    display: flex !important; align-items: flex-start !important; gap: 10px !important;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 12px 14px !important;
    font-size: .84rem !important; line-height: 1.5 !important; color: #A8AFBA !important;
}
.auth-section .auth-left .auth-card .form-group:has(input[name="terms"]) input[type="checkbox"] {
    margin-top: 2px !important; width: 17px !important; height: 17px !important; accent-color: #F5C518 !important;
}
.auth-section .auth-left .auth-card .form-group:has(input[name="terms"]) a {
    color: #F5C518 !important; font-weight: 700; text-decoration: none;
}
.auth-section .auth-left .auth-card .form-group:has(input[name="terms"]) a:hover { text-decoration: underline; }

/* Kart basligina ince bir vurgu cizgisi (guzellestirme) */
.auth-section .auth-left .auth-card .auth-header { position: relative; padding-bottom: 18px; }
.auth-section .auth-left .auth-card .auth-header::after {
    content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 54px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, #FFDD5C, #F0AE12);
}

/* ============================================
   MONOCRAFT VITRIN ROLLERI
   Pixel font SADECE su rollerde: nav, logo, baslik,
   buton, istatistik rakami, rozet, fiyat, footer basligi.
   Govde metni / haber icerigi / form / tablo DOKUNULMADI
   (Inter + Poppins aynen kaliyor) - okunabilirlik icin.
   Admin paneli bu dosyayi yuklemez, etkilenmez.
   ============================================ */
.logo-text,
.nav-link,
.btn,
.btn-search,
.hero-title,
.page-title,
.section-header-v2 h2,
.sidebar-title,
.ranking-sidebar-title,
.stat-value-v2,
.ranking-value,
.ranking-position,
.ranking-tab,
.donator-rank,
.featured-badge,
.news-category,
.discount-badge,
.product-discount,
.featured-product-badge,
.price-current,
.featured-product-price .price-current,
.product-price .price-current,
.ticker-label,
.footer-column h4,
.footer-server-ip,
.auth-title {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* Auth butonu yukarida !important ile Montserrat`a sabitlenmis; esit silahla eziyoruz */
.auth-section .auth-left .auth-card .btn-auth,
.btn-auth {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
}


/* 21.09.2026 MOBIL MENU: ustteki "header nav { overflow-x:auto }" kurali (max-width:1400px)
   hamburger panelini (#mobil-menu, nav'in disina tasan absolute kutu) KIRPIYORDU:
   menu aciliyor ama gorunmuyordu. Hamburgerin oldugu genislikte tasmaya izin ver. */
@media (max-width: 1023.98px) {
    header nav { overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════════
   24.09.2026 (Kadir: "ustune gelince altinda cizgi cikiyor, onu kapat")
   Ust menude hover'da acilan SARI ALT CIZGI kapatildi.
   ⚠ Cizgiyi UC ayri kural uretiyordu; ucu de burada iptal ediliyor:
     1) header nav a:not(.btn)...::after      (~satir 1773)
     2) header nav a.nav-item-modern::after   (~satir 1871)
     3) a:is([href="?page=bakiye-yukle"],[href="/bakiye-yukle"])::after   (~satir 1888, KALICI scaleX(1))
   Hover vurgusu artik yalnizca renk + hafif arka plan; "Kredi Yükle"nin
   altin parlamasi (text-shadow + animasyon) DURUYOR.
   ⚠ Kural dosyanin SONUNDA olmali: ayni ozgullukte sonra gelen kazanir.
   ═══════════════════════════════════════════════════════════════════ */
header nav a:not(.btn):not([class*="gradient"]):not([class*="rounded"])::after,
header nav a.nav-item-modern::after,
header nav a.nav-item-modern:hover::after,
header nav a.nav-item-modern.active::after,
header nav a:is([href="?page=bakiye-yukle"],[href="/bakiye-yukle"])::after {
    content: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
   3B BASILABILIR BUTON (.b3)  —  25.09.2026
   Kadir: "attigin sitedeki butonlari uygula"

   Davranis milenyumcraft.com'daki `btn3d`den ornek alindi; GEOMETRI VE
   RENKLER bizim paletimizden yeniden yazildi (onlarin CSS'i alinmadi).

   YAPI — ikiye ayrilmak ZORUNDA:
     <a class="b3 t-sari"><span class="b3__yuz">YAZI</span></a>
   Dis oge butonun "govdesi" (derinlik), ic oge basilan "yuz". Tek
   katmanla yapilamaz: basma hissi, dis dolgunun kuculup yuzun asagi
   inmesinden geliyor.

   ⚠ TAILWIND ILE KARISTIRMA. Bu ogeye `block`, `flex`, `absolute` gibi
     Tailwind yardimci sinifi EKLEME — `.b3` kendi display'ini kuruyor ve
     ayni ozgullukte sonra yuklenen Tailwind kurali onu eziyor (ayni tuzak
     24.09'da `.ip-kapsul`da yasandi, hero 80px buyumustu).

   ⚠ YENI RENK ROLU eklerken ALTI DEGISKENIN HEPSINI yaz. Biri eksik
     kalirsa buton bir onceki rolun rengini miras alir ve fark yalnizca
     canlida gorunur.
   ═══════════════════════════════════════════════════════════════════ */
.b3 {
    --yuk: 44px; --rim: 3px; --derin: 5px; --kalin: 3px; --rad: 12px; --punto: 16px;
    display: inline-flex;
    border: var(--kalin) solid var(--c-kenar);
    background: var(--c-derin);
    border-radius: var(--rad);
    padding: 0 0 var(--derin) 0;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
    transition: padding .1s ease, box-shadow .2s ease, filter .15s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.b3__yuz {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: var(--yuk);
    padding: 0 20px;
    border-radius: calc(var(--rad) - var(--kalin));
    background: var(--c-yuz);
    color: var(--c-yazi);
    box-shadow: inset 0 var(--rim) 0 var(--c-rim);
    font-family: var(--font-display, 'Monocraft', 'Montserrat', sans-serif);
    font-weight: 900;
    font-size: var(--punto);
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1;
    white-space: nowrap;
}
/* ── DOKU + PARLAMA ──────────────────────────────────────────────────
   ⚠ IKISI DE ARKA PLAN OLARAK CIZILIYOR, tasan bir katman DEGIL. Bu
     sayede kapsayan ogeye `overflow:hidden` gerekmiyor — hero kapsulunde
     o mumkun degil, cunku `.ip-ipucu` balonu kapsulun DISINDA duruyor
     (bkz. home.php ~327). Ayni teknik hem butonda hem siralama
     satirinda calissin diye tek bicimde yazildi.
   ⚠ z-index:-1 + isolation: negatif katman, ogenin KENDI arka planinin
     ustune ama YAZISININ altina cizilir; metne z-index verilemeyecegi
     icin tek dogru yol bu. */
.b3__yuz { isolation: isolate; }
.b3__yuz::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .28s ease;
    /* Piksel izgara — Minecraft dokusu. */
    background-image:
        linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 6px 6px, 6px 6px;
    pointer-events: none;
}
.b3:hover .b3__yuz::before { opacity: 1; }
/* ── ISIK SUTUNU — BIZE OZGU, YUMUSAK "SHINE" DEGIL ──────────────────
   ⚠ Ilk surum onlarinki gibi YUMUSAK KOSEGEN bir parlamaydi; Kadir
     "cok benziyor" dedi. Gecisler SERT DURAKLARLA yazildi: isik
     suzulmuyor, blok blok YANIYOR. Piksel izgarasiyla birlesince
     Minecraft'in kendi dili cikiyor — onlarin cilali cam hissi degil.
   ⚠ Duraklarin hepsi ayni yuzdede cift yazilmali (40%/40%); araya
     bosluk girerse kenar yumusar ve etki yine "shine"a doner. */
.b3__yuz::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: linear-gradient(100deg,
        transparent 38%,
        rgba(255, 255, 255, .30) 38%, rgba(255, 255, 255, .30) 43%,
        transparent 43%, transparent 47%,
        rgba(255, 255, 255, .62) 47%, rgba(255, 255, 255, .62) 53%,
        transparent 53%, transparent 57%,
        rgba(255, 255, 255, .22) 57%, rgba(255, 255, 255, .22) 61%,
        transparent 61%);
    background-size: 300% 100%;
    background-position: 175% 0;
    background-repeat: no-repeat;
    opacity: 0;
    transition: background-position .5s steps(14, end), opacity .18s ease;
    pointer-events: none;
}
.b3:hover .b3__yuz::after { background-position: -75% 0; opacity: 1; }

/* Hover'da altin hale + ikonun hafif ilerlemesi. */
.b3__yuz i,
.b3__yuz svg { transition: transform .18s ease; }
.b3:hover .b3__yuz i,
.b3:hover .b3__yuz svg { transform: translateX(3px); }
/* ⚠ Hale KUVVETLI: sari yuz uzerinde ince bir parlama fark edilmiyordu
     (Kadir "buton hover'i yok" sandi). Ic cizgi (inset) yuzu kenardan
     aydinlatiyor, dis hale butonu zeminden ayiriyor. */
.b3:hover {
    padding-bottom: calc(var(--derin) + 4px);
    filter: brightness(1.08) saturate(1.05);
    box-shadow:
        0 14px 26px rgba(0, 0, 0, .55),
        0 0 0 2px var(--c-hale),
        0 6px 30px var(--c-hale);
}
/* ⚠ BASINCA GERCEKTEN COKSUN: dis dolgu sifira iner, kaybettigi yuksekligi
   margin-top geri verir; yoksa buton zipliyor. */
.b3:active {
    padding-bottom: 0;
    margin-top: var(--derin);
    filter: brightness(.95);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.b3:focus-visible { outline: 3px solid #FDE047; outline-offset: 3px; }

.b3.sm  { --yuk: 36px; --rim: 2px; --derin: 4px; --kalin: 2px; --rad: 10px; --punto: 13px; }
.b3.lg  { --yuk: 56px; --rim: 4px; --derin: 6px; --kalin: 3px; --rad: 15px; --punto: 19px; }
.b3.tam { width: 100%; }
.b3.tam .b3__yuz { width: 100%; }
.b3.ikon .b3__yuz { width: calc(var(--yuk) + 2px); padding: 0; }

/* Renk rolleri — hepsi sitenin mevcut paletinden turetildi. */
.b3.t-sari {
    --c-yuz: #FACC15; --c-rim: #FEF08A; --c-derin: #A87F06;
    --c-kenar: #6B4F02; --c-yazi: #1A1400; --c-hale: rgba(250, 204, 21, .55);
}
.b3.t-koyu {
    --c-yuz: #26262A; --c-rim: #3A3A40; --c-derin: #0E0E10;
    --c-kenar: #000000; --c-yazi: #FFFFFF; --c-hale: rgba(250, 204, 21, .28);
}
.b3.t-kirmizi {
    --c-yuz: #E0483F; --c-rim: #F4796F; --c-derin: #8C221B;
    --c-kenar: #4A0F0B; --c-yazi: #FFFFFF; --c-hale: rgba(224, 72, 63, .50);
}
.b3.t-discord {
    --c-yuz: #5865F2; --c-rim: #8792FF; --c-derin: #2E37A0;
    --c-kenar: #171C55; --c-yazi: #FFFFFF; --c-hale: rgba(88, 101, 242, .50);
}

/* ═══════════════════════════════════════════════════════════════════
   .parla  —  HOVER'DA DOKU + PARLAMA  (25.09.2026)
   Kadir: "siralamada adamin ustune gelince boyle parlasin, degisik bir
   doku gelsin; diger butonlar icin de gecerli."

   `.b3` butonuyla AYNI teknik: iki katman da ARKA PLAN olarak ciziliyor,
   bu yuzden kapsayan ogeye `overflow:hidden` GEREKMIYOR.
   ⚠ Hero kapsulune `overflow:hidden` KOYULAMAZ — `.ip-ipucu` balonu
     kapsulun disinda, ustunde duruyor. Tasan katmanli bir cozum o balonu
     kirpardi; teknik bu yuzden secildi.
   ⚠ Kullanan ogenin kendi arka plani varsa katmanlar onun USTUNE,
     yazinin ALTINA cizilir (z-index:-1 + isolation).
   ═══════════════════════════════════════════════════════════════════ */
/* ⚠⚠ `.parla`YA `position` YAZMA. Tailwind'in `.absolute`i ayni
     ozgullukte ve bu dosya sonra yuklendigi icin onu EZER; hero'nun
     masaustu kapsulleri akisa duser ve bolum ~80px uzar (24.09.2026'da
     `.ip-kapsul`da birebir bu yasandi).
     Kullanan oge ZATEN konumlandirilmis olmali: hero kapsulleri Tailwind
     `absolute`/`relative` tasiyor, `.zirve-satir`a asagida veriliyor. */
.parla { isolation: isolate; }
.parla::before,
.parla::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}
/* Doku: piksel izgara. */
.parla::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 6px 6px, 6px 6px;
    transition: opacity .28s ease;
}
/* Parlama: soldan saga suzulen isik. */
.parla::after {
    background-image: linear-gradient(100deg,
        transparent 36%, rgba(255, 255, 255, .22) 50%, transparent 64%);
    background-size: 260% 100%;
    background-position: 165% 0;
    background-repeat: no-repeat;
    transition: background-position .65s ease, opacity .2s ease;
}
.parla:hover::before { opacity: 1; }
.parla:hover::after  { background-position: -65% 0; opacity: 1; }

/* ── HERO KAPSULLERI ────────────────────────────────────────────────
   Geometrileri (325x78, oyuncu sayaci rozeti) korundu; yalnizca `.b3`
   ile ayni BASMA hissi eklendi.

   ⚠⚠ BURAYA `transform` YAZMA. Masaustu kapsulleri Tailwind'in
     `-translate-y-1/2`si ile dikeyde ortalaniyor ve `hover:scale-105`
     de ayni transform'u paylasiyor. Ham bir `transform` o ortalamayi
     siler, buton hero'nun ortasindan yukari FIRLAR.
     Bu yuzden basma hissi `margin-top` + golge kisalmasi ile veriliyor:
     mutlak konumlu ogede margin-top saf asagi kaydirma demek, transform'a
     hic dokunmuyor. */
/* ═══════════════════════════════════════════════════════════════════
   HERO KAPSULLERI — `.b3` ILE AYNI IKI KATMAN (25.09.2026)
   Kadir: "niye cift katmanli yapmadin bu karti, ip ve discord".

   Ilk denemede yalnizca `drop-shadow(0 8px 0)` ile SAHTE bir derinlik
   vermistim; butonlarda oldugu gibi GERCEK govde yoktu. Artik ayni
   yapi: dis oge GOVDE (koyu), ic `.hero-kapsul__yuz` basilan YUZ.

   ⚠ Isaretleme degisti: gradyan / padding / hizalama / cerceve
     siniflari DIS OGEDEN YUZE tasindi; dista yalnizca konum, olcu ve
     davranis kaldi. `.parla` da yuze tasindi — doku ve parlama yuzun
     uzerinde olmali, govdenin degil.
   ⚠ Dis oge `md:flex` DEGIL `md:block`: artik tek bir cocugu var, flex
     olursa yuz dikeyde gerilmiyor ve govde serididi kayboluyor.
   ═══════════════════════════════════════════════════════════════════ */
.hero-kapsul {
    --adim: 6px;
    /* ⚠ 25.09.2026: `.b3 t-sari` ile BIREBIR ayni ton — gradyan kaldirildi. */
    --derin: #A87F06;
    --rim: rgba(255, 255, 255, .38);
    --yuz: #FACC15;
    background: var(--derin);             /* govde — yuzun altinda kalan serit */
    border-radius: 0 !important;          /* Tailwind rounded-[24px] ezilmeli */
    box-shadow: none !important;          /* clip-path onu zaten keserdi */
    clip-path: polygon(
        0 calc(var(--adim) * 2), var(--adim) calc(var(--adim) * 2),
        var(--adim) var(--adim), calc(var(--adim) * 2) var(--adim),
        calc(var(--adim) * 2) 0,
        calc(100% - var(--adim) * 2) 0,
        calc(100% - var(--adim) * 2) var(--adim),
        calc(100% - var(--adim)) var(--adim),
        calc(100% - var(--adim)) calc(var(--adim) * 2),
        100% calc(var(--adim) * 2),
        100% calc(100% - var(--adim) * 2),
        calc(100% - var(--adim)) calc(100% - var(--adim) * 2),
        calc(100% - var(--adim)) calc(100% - var(--adim)),
        calc(100% - var(--adim) * 2) calc(100% - var(--adim)),
        calc(100% - var(--adim) * 2) 100%,
        calc(var(--adim) * 2) 100%,
        calc(var(--adim) * 2) calc(100% - var(--adim)),
        var(--adim) calc(100% - var(--adim)),
        var(--adim) calc(100% - var(--adim) * 2),
        0 calc(100% - var(--adim) * 2)
    );
    /* ⚠ Golge `drop-shadow` — `box-shadow`u clip-path kirpardi. Derinlik
         artik GERCEK govdeden geliyor, golge yalnizca yerden kaldiriyor. */
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .55));
    transition: padding-bottom .12s ease, filter .15s ease;
}
.hero-kapsul.hero-discord {
    /* ⚠ 25.09.2026 (2. tur): Kadir "biraz daha koyu olsun" dedi — ustteki
         acik #6C78FF gradyani kaldirildi, sari kapsulle ayni dilde DUZ ve
         bir tik koyu bir blurple kullaniliyor. */
    --derin: #1E1B45;
    --rim: rgba(255, 255, 255, .26);
    --yuz: #3C46AE;
}

/* Basilan yuz. */
/* ⚠⚠ YUZ MUTLAK KONUMLU — flex/width hesabiyla DEGIL.
     Once `width:100%` sonra `flex:1 1 auto` denendi; ikisinde de yuz
     325px kapsulde 283px kaliyordu ve "PLAY.MINERTOWN.NET" uc noktayla
     kesiliyordu (olculdu). Dis oge zaten konumlu (masaustu `absolute`,
     mobil `relative`), bu yuzden `inset` ile birebir oturtmak hem kesin
     hem de Tailwind'in genislik siniflariyla hic tartismiyor.
   ⚠ Alt 7px BILEREK bos: govde serididi orasi, 3B derinligi o veriyor.
   ⚠ Dis ogeye CSS'ten `display` YAZMA: Tailwind'in `hidden`ini ezer ve
     masaustu kapsulu mobilde de gorunur hale gelir. */
.hero-kapsul__yuz {
    position: absolute;
    inset: 0 0 7px 0;
    display: flex;
    align-items: center;
    background: var(--yuz);
    box-shadow: inset 0 3px 0 var(--rim);
    text-align: left;
    transition: bottom .12s ease;
}

/* ⚠ Hover'da GOVDE BUYUR, buton yukselir — `.b3` ile birebir ayni his.
     Tailwind'in eski `hover:scale-105`i kaldirildi; transform hero'nun
     `-translate-y-1/2` ortalamasini siliyordu. */
.hero-kapsul:hover {
    filter: brightness(1.05) drop-shadow(0 18px 26px rgba(0, 0, 0, .6))
            drop-shadow(0 0 10px var(--hale, rgba(250, 204, 21, .40)));
}
.hero-kapsul:hover .hero-kapsul__yuz { bottom: 11px; }
.hero-kapsul.hero-discord:hover { --hale: rgba(88, 101, 242, .50); }
/* Basinca yuz govdenin dibine iner — 3B mantigin karsiligi. */
.hero-kapsul:active .hero-kapsul__yuz { bottom: 0; }
.hero-kapsul:active {
    margin-top: 7px;
    filter: brightness(.96) drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}

/* ⚠⚠ `.ip-ipucu` KAPSULUN ICINE ALINDI — kurali home.php'nin SATIR ICI
     <style> blogunda, cunku o blok bu dosyadan SONRA yukleniyor ve ayni
     ozgullukteki kurali eziyor. Iki yerde tanimlama. */

/* ═══════════════════════════════════════════════════════════════════
   KERTIKLI KOSE — BUTON SILUETI  (25.09.2026)
   Kadir: "cok benziyor sanki biraz sitemiz onlara."

   Orneginin yuvarlak kosesi (12-15px) her 3B butonda ayni; siluet
   degisince uzaktan bakinca bile ayni aileden gorunmuyor. Kose iki
   BASAMAKLA kesiliyor — Minecraft blogunun kendi kosesi.

   ⚠⚠ `clip-path` BOX-SHADOW'U DA KESER. Derinlik golgesi ve altin hale
     box-shadow ile verilseydi kirpilip yok olurdu. Bu yuzden golgeler
     `filter: drop-shadow()`a tasindi — o, clip-path silüetini izliyor.
     `filter` zaten hover'da brightness icin kullaniliyordu; ikisi ayni
     bildirimde birlesmek ZORUNDA, ayri yazilirsa sonraki digerini siler.
   ⚠ Adim SABIT piksel (goreli degil): piksel sanatinda kose her boyutta
     ayni kalinlikta olmali, yoksa buyuk butonda kertik "erir".
   ⚠ Geri almak icin YALNIZCA bu blogu sil — geometri ve renkler
     degismiyor, `--rad` degerleri yerinde duruyor.
   ═══════════════════════════════════════════════════════════════════ */
.b3 {
    --adim: 5px;
    border-radius: 0;
    clip-path: polygon(
        0 calc(var(--adim) * 2), var(--adim) calc(var(--adim) * 2),
        var(--adim) var(--adim), calc(var(--adim) * 2) var(--adim),
        calc(var(--adim) * 2) 0,
        calc(100% - var(--adim) * 2) 0,
        calc(100% - var(--adim) * 2) var(--adim),
        calc(100% - var(--adim)) var(--adim),
        calc(100% - var(--adim)) calc(var(--adim) * 2),
        100% calc(var(--adim) * 2),
        100% calc(100% - var(--adim) * 2),
        calc(100% - var(--adim)) calc(100% - var(--adim) * 2),
        calc(100% - var(--adim)) calc(100% - var(--adim)),
        calc(100% - var(--adim) * 2) calc(100% - var(--adim)),
        calc(100% - var(--adim) * 2) 100%,
        calc(var(--adim) * 2) 100%,
        calc(var(--adim) * 2) calc(100% - var(--adim)),
        var(--adim) calc(100% - var(--adim)),
        var(--adim) calc(100% - var(--adim) * 2),
        0 calc(100% - var(--adim) * 2)
    );
    box-shadow: none;
    filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .5));
}
.b3.sm { --adim: 4px; }
.b3.lg { --adim: 6px; }
/* Yuz artik dis siluetin icinde kaliyor; kendi yuvarlakligi olmamali. */
.b3__yuz { border-radius: 0; }

.b3:hover {
    box-shadow: none;
    filter: brightness(1.08) saturate(1.05)
            drop-shadow(0 10px 16px rgba(0, 0, 0, .55))
            drop-shadow(0 0 9px var(--c-hale));
}
.b3:active {
    box-shadow: none;
    filter: brightness(.95) drop-shadow(0 2px 5px rgba(0, 0, 0, .5));
}
/* ⚠ Kertikli kosede tarayici anahat cizgisi kutuyu takip eder, siluet
     disina tasar. Anahat yerine yuze ic cerceve veriliyor. */
.b3:focus-visible { outline: none; }
.b3:focus-visible .b3__yuz { box-shadow: inset 0 0 0 3px #FDE047, inset 0 var(--rim) 0 var(--c-rim); }

/* ═══════════════════════════════════════════════════════════════════
   `.kertik` — HER KUTUYA PIKSEL KOSE  (25.09.2026)
   Butonlardaki silueti kart, rozet ve menu ogelerine de tasir; site
   tek dile oturur.
   ⚠ `clip-path` GOLGEYI DE KESER. Golge gereken yerde `box-shadow`
     yerine `filter: drop-shadow()` kullan (bkz. `.b3`).
   ⚠ `border-radius: 0 !important` SART: Tailwind'in `rounded-*`
     siniflari ayni ozgullukte ve sonra yuklendigi icin ezer.
   ═══════════════════════════════════════════════════════════════════ */
/* ⚠ Polygon TEK YERDE tanimli: asagidaki sayfa kurallari da bunu
     kullaniyor, yoksa ayni 20 noktali sekil dosya boyunca kopyalanirdi
     ve biri degisince digerleri geride kalirdi. */
.kertik {
    --adim: 6px;
    border-radius: 0 !important;
    clip-path: polygon(
        0 calc(var(--adim) * 2), var(--adim) calc(var(--adim) * 2),
        var(--adim) var(--adim), calc(var(--adim) * 2) var(--adim),
        calc(var(--adim) * 2) 0,
        calc(100% - var(--adim) * 2) 0,
        calc(100% - var(--adim) * 2) var(--adim),
        calc(100% - var(--adim)) var(--adim),
        calc(100% - var(--adim)) calc(var(--adim) * 2),
        100% calc(var(--adim) * 2),
        100% calc(100% - var(--adim) * 2),
        calc(100% - var(--adim)) calc(100% - var(--adim) * 2),
        calc(100% - var(--adim)) calc(100% - var(--adim)),
        calc(100% - var(--adim) * 2) calc(100% - var(--adim)),
        calc(100% - var(--adim) * 2) 100%,
        calc(var(--adim) * 2) 100%,
        calc(var(--adim) * 2) calc(100% - var(--adim)),
        var(--adim) calc(100% - var(--adim)),
        var(--adim) calc(100% - var(--adim) * 2),
        0 calc(100% - var(--adim) * 2)
    );
}
.kertik-sm { --adim: 4px; }
.kertik-lg { --adim: 9px; }

/* ═══════════════════════════════════════════════════════════════════
   IC SAYFALAR DA AYNI DILE  (25.09.2026)
   Kadir: "her yeri cevir".

   ⚠ Bu sayfalarin kart yuvarlakliklari KENDI SATIR ICI `<style>`
     bloklarinda; oraya tek tek dokunmak yerine burada topluca
     eziliyor. `.kertik` zaten `!important` tasidigi icin satir ici
     bloklar sonra yuklense de kaybediyor.
   ⚠ LISTEYE KUCUK OGE EKLEME: avatar, rozet, yuvarlak sayac, `input`
     gibi seyler kertiklenince bozuluyor. Yalnizca BUYUK kutular
     (yaricap >= 12px olan kart/panel/bolum) burada.
   ⚠ `clip-path` golgeyi keser; asagidaki kartlarin golgeleri
     `filter: drop-shadow`a cevrildi (sayfa dosyalarinda).
   ═══════════════════════════════════════════════════════════════════ */
.magaza-bakiye, .magaza-adim, .sunucu-kart, .cat-gw-card,
.srl-sunucu, .srl-bulunan, .srl-kart, .srl-satir,
.secenek, .payment-card-v3, .duyuru-iki-kat, .mesaj,
.urun-karti, .kupon-kart, .destek-kart, .sss-kart,
/* sepet / satin alma */
.cart-item-card-v3, .satinal-kart, .satinal-gorsel, .satinal-ozet,
.satinal-hata, .form-section,
/* sss / destek */
.bento-card, .accordion-item, .no-results-msg, .cta-banner,
.support-search-wrapper,
/* bakiye yukleme */
.shopier-package-card, .shopier-important-notice {
    border-radius: 0 !important;
    clip-path: polygon(
        0 12px, 6px 12px, 6px 6px, 12px 6px, 12px 0,
        calc(100% - 12px) 0, calc(100% - 12px) 6px,
        calc(100% - 6px) 6px, calc(100% - 6px) 12px, 100% 12px,
        100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px),
        calc(100% - 6px) calc(100% - 6px), calc(100% - 12px) calc(100% - 6px),
        calc(100% - 12px) 100%,
        12px 100%, 12px calc(100% - 6px), 6px calc(100% - 6px),
        6px calc(100% - 12px), 0 calc(100% - 12px)
    );
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — SITENIN KENDI DILI  (25.09.2026)
   ⚠ Ust seridin isaretlemesinde "iBandeeMC Tarzi 3D Sari IP Kopyala"
     diye bir yorum duruyordu; bolum bastan bizim dilimize cevrildi:
     kertikli kose, piksel ayrac, altin madenci seridi.
   ═══════════════════════════════════════════════════════════════════ */
/* Piksel ayrac: duz cizgi yerine blok blok kesilen bir serit. */
.piksel-ayrac {
    height: 6px;
    border: 0;
    margin: 0;
    background-image:
        linear-gradient(90deg, rgba(250, 204, 21, .55) 50%, transparent 50%),
        linear-gradient(90deg, rgba(250, 204, 21, .14) 50%, transparent 50%);
    background-size: 24px 3px, 12px 3px;
    background-position: 0 0, 0 3px;
    background-repeat: repeat-x;
    opacity: .9;
}
/* ── BAGLANTI LISTELERI ──────────────────────────────────────────────
   ⚠ ESKIDEN HER LINK BIR "HAP" KUTUSUYDU (bg + border + rounded-xl).
     Bes sutun dolusu ayni kutu, her Minecraft sitesinde olan kalip —
     Kadir "komple diger siteye benziyor" derken kastettigi de buydu.
     Kutular kaldirildi: artik duz metin + kucuk KARE madde isareti,
     hover'da altina donuyor. Daha az kutu = daha az jenerik. */
.alt-menu-oge {
    position: relative;
    display: block;
    padding: .4rem 0 .4rem .95rem;
    color: #94a3b8;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color .18s ease, padding-left .18s ease;
}
.alt-menu-oge::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 7px; height: 7px;
    transform: translateY(-50%);
    background: #4A4A52;
    transition: width .18s ease, height .18s ease, background-color .18s ease;
}
.alt-menu-oge:hover { color: #FFFFFF; padding-left: 1.4rem; }
.alt-menu-oge:hover::before { width: 10px; height: 10px; background: #FACC15; }

/* ── SUTUN BASLIKLARI: CEVHER BLOGU ─────────────────────────────────
   Her sutun bir cevher damari. Renk ayrimi basliklari tek bakista
   ayirt edilir kiliyor ve tema MinerTown'in kendi dunyasindan geliyor. */
.alt-baslik {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.alt-baslik::before {
    content: "";
    width: 14px; height: 14px;
    flex: none;
    background: var(--cevher, #FACC15);
    box-shadow: 0 0 10px var(--cevher-hale, rgba(250, 204, 21, .5)),
                inset 0 3px 0 rgba(255, 255, 255, .35);
}
.cevher-altin  { --cevher: #FACC15; --cevher-hale: rgba(250, 204, 21, .5); }
.cevher-zumrut { --cevher: #34D399; --cevher-hale: rgba(52, 211, 153, .45); }
.cevher-elmas  { --cevher: #5CC8F5; --cevher-hale: rgba(92, 200, 245, .45); }
.cevher-kizil  { --cevher: #EF4444; --cevher-hale: rgba(239, 68, 68, .45); }
.cevher-komur  { --cevher: #4B5563; --cevher-hale: rgba(148, 163, 184, .30); }

/* NOT (25.09.2026): burada "son satin alinanlar" akan seridinin
   (.serit / .serit-akis / .serit-oge / .serit-nokta) kurallari vardi.
   Kadir serit alanini ve ustundeki ayraci kaldirtti; olu CSS birakmamak
   icin blok tamamen silindi. Besleyen sorgu da index.php'den kaldirildi. */

/* ── ANAKAYA SERIDI (footer'in en alti) ──────────────────────────────
   ⚠ Eskiden ince bir `border-t` + ortalanmis telif satiriydi — her
     sitede ayni. Artik Minecraft'in ANAKAYA dokusu: capraz blok deseni
     ustunde altin bir kesik. Sayfanin "dibine vurdun" hissi veriyor. */
.anakaya {
    background-color: #08080A;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, .035) 25%, transparent 25%,
                               transparent 75%, rgba(255, 255, 255, .035) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, .035) 25%, transparent 25%,
                               transparent 75%, rgba(255, 255, 255, .035) 75%);
    background-size: 16px 16px, 16px 16px;
    background-position: 0 0, 8px 8px;
    border-top: 3px solid rgba(250, 204, 21, .20);
}

@media (prefers-reduced-motion: reduce) {
    .b3, .b3__yuz::before, .b3__yuz::after,
    .parla::before, .parla::after, .hero-kapsul,
    .alt-menu-oge, .alt-menu-oge::before { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   11.10.2026 animasyon — UST MENU (13), ANA SAYFA GOKYUZU (11), KOPRU
   Kutuphane: assets/js/mt-anim.js + assets/css/mt-anim.css (window.MTAnim).
   Isaretleme index.php'de: header.mt-ust[data-mt-menu] ve </main> sonrasi
   "MTAnim KOPRUSU" betigi (ana sayfa nitelikleri, IP XP kuresi, canli
   sayaclar, profil SPA cizgisi, sepet sonrasi havai fisek).
   ⚠ Bu blok dosyanin SONUNDA kalmali (ayni ozgullukte sonra gelen kazanir).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 13: KAYDIRINCA KUCULEN UST MENU ────────────────────────────────
   Header artik ekrana YAPISIK (sticky). En ustte eskisi gibi saydam; 48px
   kaydirinca kutuphane 'mt-kucuk' ekler (4px'in altinda kaldirir):
   dolgu 20px → 8px, bulanik cam zemin + ince sari alt cizgi.
   ⚠ ICERIK ZIPLAMASIN: kuculurken azalan dolgu (2 x 12px) ALT MARJA
     eklenir; akistaki toplam yukseklik hep 88px. Uc ozellik ayni sure ve
     egriyle gecer → hicbir karede kayma olmaz. Butonlarin 48px olcusune
     DOKUNMA: Tailwind transition-all sureleri farkli, toplam bozulur.
   ⚠ Cam zemin header'in kendisinde DEGIL ::before'da: header max-w-7xl
     (ortada), serit tam genislik olmali. Ayrica yukaridaki 'header
     {background:transparent; backdrop-filter:none}' ve 'header nav
     {... !important}' kurallari header/nav zeminini zaten sifirliyor.
   ⚠ header.mt-ust (0,1,1) Tailwind .relative'i (0,1,0) yener; z-50 ayni. */
header.mt-ust {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: padding-top .3s ease, padding-bottom .3s ease, margin-bottom .3s ease;
}
header.mt-ust::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 100vw; margin-left: -50vw;      /* tasan kisim govdenin overflow-x:hidden'inda kalir */
    z-index: -1;                           /* header z-50 baglaminda: menunun ALTINDA, sayfanin USTUNDE */
    pointer-events: none;
    background: rgba(10, 10, 11, .62);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
    box-shadow: inset 0 -1px 0 rgba(250, 204, 21, .45), 0 10px 24px rgba(0, 0, 0, .35);
    opacity: 0;
    transition: opacity .3s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header.mt-ust::before { background: rgba(10, 10, 11, .93); }
}
header.mt-ust.mt-kucuk { padding-top: 8px; padding-bottom: 8px; margin-bottom: 24px; }
header.mt-ust.mt-kucuk::before { opacity: 1; }
@media (min-width: 1280px) {
    header.mt-ust.mt-kucuk .nav-item-modern { font-size: 18px; }   /* 20px → 18px; yukseklik butonlardan (48px), degismez */
}
/* Menu yapisik: acilir paneller ekrandan tasarsa alti HIC gorunmezdi
   (sayfa kaydirilinca panel de menuyle birlikte duruyor) → kendi icinde kaysin. */
header.mt-ust #mobil-menu {
    max-height: calc(100vh - 7rem);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
header.mt-ust .pm-panel {
    max-height: calc(100vh - 7.5rem);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
@supports (height: 100dvh) {
    header.mt-ust #mobil-menu { max-height: calc(100dvh - 7rem); }
    header.mt-ust .pm-panel { max-height: calc(100dvh - 7.5rem); }
}
@media (min-width: 1024px) {   /* govdede zoom:1.08 (index.php) → payi biraz buyut */
    header.mt-ust .pm-panel { max-height: calc(92vh - 7.5rem); }
}
/* Capa hedefleri, profil SPA'nin scrollIntoView'i ve KLAVYE ODAGI yapisik menunun altinda kalmasin.
   11.10.2026 animasyon (erisilebilirlik, WCAG 2.4.11): eskiden yalniz id'li ogelere
   ':where([id], .profile-content){scroll-margin-top:84px}' veriliyordu; id'siz link ve
   butonlar Shift+Tab'da ya da fareyle kaydirip Tab'a basinca cam menunun altinda gizli
   kaliyordu. scroll-padding koke verilince odak kaydirmasi, capalar ve scrollIntoView
   (main.js, profile-spa.js, sss.php) birlikte telafi edilir: menu kucukken 64px,
   >=1024px'te body zoom 1.08 ile ~69px → 80px.
   ⚠ scroll-margin-top ile TOPLANIR: sayfalarin kendi degerleri (afk, market, siralama,
     cerez, sss) bu yuzden 0–30px'e indirildi; yeni sayfaya 80px'lik telafi YAZMA. */
html { scroll-padding-top: 80px; }
/* haber.php yan paneli 'top:24px' ile yapisiyordu → artik menunun ALTINA yapissin */
@media (min-width: 1024px) { html body .hd-yan { top: 88px; } }
@media (prefers-reduced-motion: reduce) {
    header.mt-ust, header.mt-ust::before { transition: none; }
}

/* ── 7: PROFIL SPA GECIS CIZGISI ────────────────────────────────────
   profile-spa.js gecisi fetch ile yapiyor; ust cizgiyi artik kutuphanenin
   #mt-gecis'i gosteriyor (index.php kopru: .profile-sidebar.spa-navigating).
   Eski .profile-sidebar::before cizgisi (profile.css + _profil-ortak) ikinci
   bir sari cizgi olmasin diye gizli. Kutuphane yuklenmezse html'de
   .mt-spa-cizgi olmaz → eski cizgi aynen calisir. */
html.mt-spa-cizgi .profile-sidebar::before { display: none !important; }

/* ── 11: ANA SAYFA UST BOLUMU — SAATE GORE GOKYUZU ──────────────────
   Kopru hero kutusuna data-mt-gok + .mt-hero-gok verir. defer'li kutuphane inene
   kadar (body.mt-gok-bekle) sabit sahne (hero-bg.jpg manzarasi, ay + yeralti +
   kayan yildiz, korlar, kargalar) KISACIK gizlenir: hero'da gece sahnesi bir an
   gorunup gokyuzune donmesin. Gokyuzu kurulunca .mt-gok-acik gelir, bekle kalkar
   ve sabit sahne GERI GELIR; kurulmazsa (kutuphane yok/hata) da bekle kalkar, eski
   hero oldugu gibi doner.
   ⚠ 11.10.2026 animasyon: sabit sahne yalniz hero'nun arka plani DEGIL, BUTUN ana
     sayfanin sabit zemini (home.php katmanlari <body>'ye tasir, fixed z -30/-29;
     indirimler, Haberler, Nasil girilir, yeni katilanlar, Discord %75 koyu zeminle
     onu gosterir). Eskiden body.mt-gok-acik de display:none veriyordu → hero'nun
     altindaki her bolum duz koyuya donuyor, kayan manzara/kargalar/cevherler bütün
     sayfadan kayboluyordu. Hero'nun icinde zaten gorunmez: hero isolation'li,
     gokyuzu opak.
   ⚠ Gokyuzu kutuphanede z-index:-1; hero'da -20'ye alinir (asagida) ki hero'nun
     -z-10 katmanlari gokyuzunun USTUNDE kalsin: maskotun altin halesi geri gelir.
     Ust menu karartmasi (absolute inset-0 -z-10) ise gokyuzu varken gizli:
     onizlemedeki gok tonu korunur, menu yazilari .mt-gok-yazi golgesiyle okunur.
   ⚠ Konumlar hero'ya gore ayarlandi: hero'nun ust 132px'i menunun ALTINDA
     (-mt-[132px]) ve kapsuller ~%62 yukseklikte yuzuyor. Onizlemedeki
     yerler (gunduz gunes %50/%18, sabah %14/%62, aksam %86/%64, ay %22,
     bulut %13/%24/%64) ya menunun ya kapsullerin arkasina dusuyordu →
     gunes/ay ust koselere, bulutlar menunun altina alindi. */
body.mt-gok-bekle #hero-arka,
body.mt-gok-bekle .mt-sahne-ek,
body.mt-gok-bekle .hero-korlar,
body.mt-gok-bekle .hero-kargalar { display: none !important; }   /* 11.10.2026 animasyon: yalniz bekleme; mt-gok-acik GIZLEMEZ */
/* 11.10.2026 animasyon: (0,2,0) kutuphanenin .mt-gok {z-index:-1}'ini yener; -10 katmanlari ustte */
.mt-hero-gok > .mt-gok { z-index: -20; }
/* ust menu karartmasi gokyuzunun tonunu bozmasin (.mt-gok ilk cocuk → yalniz gokyuzu varken) */
.mt-hero-gok > .mt-gok ~ .absolute.inset-0 { display: none; }
/* tepelerin alt kenari sayfanin koyu zeminine yumusak gecsin (sert cizgi kalmasin) */
body.mt-gok-acik .mt-hero-gok::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 48px;
    z-index: -1;                           /* gokyuzuyle ayni katman, agacta sonra → ustunde; icerigin altinda */
    pointer-events: none;
    background: linear-gradient(rgba(8, 9, 12, 0), #08090C);
}
/* 11.10.2026 animasyon: hero'dan sonraki ILK bolum (.mt-bolum-gecis: saydamdan 220px'te
   %75'e) gokyuzunun koyu alt kenarindan devam etsin: opak baslar, 220px'te %75'e iner →
   sabit sahne yavasca belirir; hero ile bolum arasinda sert serit (koyu kenar + hemen
   altinda tam parlak manzara) kalmaz. (0,3,1) home.php'nin (0,1,0) kuralini yener. */
body.mt-gok-acik .mt-hero-gok ~ .mt-bolum-gecis {
    background: linear-gradient(to bottom, #08090C 0, rgba(8, 9, 12, .75) 220px);
}
/* 11.10.2026 animasyon: KREDI YUKLE de gokyuzu golgesini alsin. .mt-gok-yazi (0,1,0) yukaridaki
   'header nav a:is([href="?page=bakiye-yukle"],[href="/bakiye-yukle"])' (0,1,3) golgesini ve mt-kredi animasyonunu
   ezemiyordu → sabah/gunduz acik mavide #FFD700 yazi ~1,6–1,9:1 kontrastla soluk kaliyordu.
   (0,2,3) + !important animasyonu da yener: ana sayfada nabiz durur, altin hale kalir. */
header nav a.mt-gok-yazi:is([href="?page=bakiye-yukle"],[href="/bakiye-yukle"]) {
    text-shadow:
        3px 3px 0 rgba(0, 0, 0, .7),
        -1px -1px 0 rgba(0, 0, 0, .5), 1px -1px 0 rgba(0, 0, 0, .5),
        -1px 1px 0 rgba(0, 0, 0, .5), 1px 1px 0 rgba(0, 0, 0, .5),
        0 0 12px rgba(255, 215, 0, .45) !important;
}
/* (0,3,0) gunduz icin yeter; vakitli kurallar kutuphanede (0,3,0) ve SONRA yukleniyor → (0,4,0) */
.mt-hero-gok > .mt-gok .mt-gok-gunes { left: 78%; top: 31%; }
.mt-hero-gok > .mt-gok[data-vakit="sabah"] .mt-gok-gunes { left: 16%; top: 33%; }
.mt-hero-gok > .mt-gok[data-vakit="aksam"] .mt-gok-gunes { left: 84%; top: 35%; }
.mt-hero-gok > .mt-gok[data-vakit="gece"] .mt-gok-ay { left: 80%; top: 31%; }
.mt-hero-gok > .mt-gok .mt-gok-b3 { top: 27%; }
.mt-hero-gok > .mt-gok .mt-gok-b1 { top: 38%; }
.mt-hero-gok > .mt-gok .mt-gok-b2 { top: 56%; }

/* 15.10.2026 TEMIZ ADRESLER: menu artik /bakiye-yukle ve / adreslerini kullaniyor; href secicileri
   a:is([href="?page=bakiye-yukle"],[href="/bakiye-yukle"]) olarak genisletildi (ozgulluk ayni: 0,1,0). */