@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/montserrat-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/montserrat-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
:root {
    --bg0: #050a05;
    --bg1: #080f08;
    --bg2: #0d160d;
    --bg3: #111e11;
    --bg4: #162516;
    --green: #00e676;
    --green2: #00c853;
    --green3: #69f0ae;
    --gold: #ffd600;
    --text1: #f0fff0;
    --text2: #b2dfb2;
    --text3: #5a7a5a;
    --border: rgba(0,230,118,0.12);
    --border2: rgba(0,230,118,0.25);
    --shadow: 0 0 40px rgba(0,200,83,0.08);
    --radius: 12px;
    --radius-lg: 16px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    background: var(--bg0);
    color: var(--text1);
    font-family: 'Inter',sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 10% 20%, rgba(0,200,83,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(0,230,118,0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }

/* ── NAV ── */
nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(5,10,5,0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; gap:1rem; }
.logo { font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.35rem; color:var(--green); text-decoration:none; letter-spacing:-0.5px; display:flex; align-items:center; gap:0.5rem; }
.logo-icon { width:32px; height:32px; background:linear-gradient(135deg,var(--green2),var(--green3)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.nav-links { display:flex; gap:1.5rem; }
.nav-link { color:var(--text3); font-size:0.85rem; font-weight:500; text-decoration:none; transition:color .2s; }
.nav-link:hover { color:var(--green); }
.nav-badge { display:flex; align-items:center; gap:0.4rem; background:rgba(0,230,118,0.1); border:1px solid var(--border2); color:var(--green); font-size:0.7rem; font-weight:600; padding:0.3rem 0.8rem; border-radius:20px; white-space:nowrap; }
.nav-badge .dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse 2s infinite; }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* ── BUTTONS ── */
.btn-primary { background:linear-gradient(135deg,var(--green2),var(--green3)); color:#000; font-weight:700; font-size:.9rem; padding:.85rem 2rem; border-radius:var(--radius); text-decoration:none; border:none; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:.5rem; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,200,83,.35); }
.btn-outline { background:transparent; color:var(--green); font-weight:600; font-size:.9rem; padding:.85rem 2rem; border-radius:var(--radius); text-decoration:none; border:1px solid var(--border2); cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:.5rem; }
.btn-outline:hover { background:rgba(0,230,118,.08); }

/* ── HERO ── */
.hero { padding:5rem 0 3rem; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.hero-tag { display:inline-flex; align-items:center; gap:.5rem; background:rgba(0,230,118,.08); border:1px solid var(--border2); color:var(--green3); font-size:.72rem; font-weight:600; padding:.4rem 1rem; border-radius:20px; margin-bottom:1.5rem; letter-spacing:1px; text-transform:uppercase; }
.hero h1 { font-family:'Montserrat',sans-serif; font-size:clamp(2.2rem,4vw,3.5rem); font-weight:800; line-height:1.1; margin-bottom:1.2rem; letter-spacing:-1px; }
.hero h1 .accent { color:var(--green); }
.hero-desc { color:var(--text2); font-size:1rem; line-height:1.7; margin-bottom:2rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.stat-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; position:relative; overflow:hidden; transition:border-color .2s; }
.stat-box:hover { border-color:var(--border2); }
.stat-box::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--green2),transparent); }
.stat-num { font-family:'Montserrat',sans-serif; font-size:2rem; font-weight:800; color:var(--green); line-height:1; margin-bottom:.3rem; }
.stat-label { color:var(--text3); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }

/* ── TICKER ── */
.ticker-wrap { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; padding:.7rem 0; margin:2rem 0; }
.ticker-inner { display:flex; gap:3rem; animation:ticker 35s linear infinite; white-space:nowrap; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text2); }
.ticker-dot { width:5px; height:5px; background:var(--green); border-radius:50%; flex-shrink:0; }
.ticker-name { font-weight:600; color:var(--text1); }
.ticker-bonus { color:var(--green); font-weight:700; }

/* ── BANNERS ── */
.banner-section { margin:1.5rem 0; }
.banner-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.banner-item { display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); transition:border-color .2s; }
.banner-item:hover { border-color:var(--border2); }
.banner-item img { width:100%; height:auto; max-height:120px; object-fit:contain; display:block; background:var(--bg3); }
.banner-placeholder { background:var(--bg3); padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; color:var(--text2); }

/* ── SECTION ── */
.section { padding:2rem 0; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.section-title { font-family:'Montserrat',sans-serif; font-size:1.3rem; font-weight:700; color:var(--text1); display:flex; align-items:center; gap:.6rem; }
.section-title .line { width:4px; height:20px; background:linear-gradient(180deg,var(--green2),var(--green3)); border-radius:2px; flex-shrink:0; }
.section-count { font-size:.75rem; color:var(--text3); background:var(--bg3); border:1px solid var(--border); padding:.3rem .8rem; border-radius:20px; }

/* ── CARDS ── */
.sponsor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.sites-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem; }

.sponsor-card, .site-card {
    background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem;
    position:relative; overflow:hidden; transition:all .25s;
}
.site-card { padding:1.2rem; border-radius:var(--radius); }
.sponsor-card:hover, .site-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow); }
.sponsor-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--green2),transparent); opacity:0; transition:opacity .25s; }
.sponsor-card:hover::before { opacity:1; }

.sponsor-badge { position:absolute; top:1rem; right:1rem; background:rgba(0,230,118,.15); border:1px solid var(--border2); color:var(--green); font-size:.6rem; font-weight:700; padding:.2rem .6rem; border-radius:6px; letter-spacing:1px; text-transform:uppercase; }

.card-logo-wrap { width:64px; height:64px; background:var(--bg4); border:1px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; overflow:hidden; flex-shrink:0; }
.site-card .card-logo-wrap { width:48px; height:48px; margin-bottom:.8rem; }
.card-logo-wrap img { width:90%; height:90%; object-fit:contain; padding:6px; background:transparent; }
.card-logo-text { font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.1rem; color:var(--green); }

.card-name { font-family:'Montserrat',sans-serif; font-weight:700; font-size:1rem; margin-bottom:.3rem; }
.card-bonus { color:var(--green); font-weight:700; font-size:.9rem; margin-bottom:.2rem; }
.card-type { color:var(--text3); font-size:.72rem; margin-bottom:.8rem; }
.card-meta { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.card-rating { color:var(--gold); font-size:.75rem; font-weight:600; }
.card-votes { color:var(--text3); font-size:.72rem; }
.card-btns { display:flex; gap:.5rem; }

.btn-card-primary { flex:2; background:linear-gradient(135deg,var(--green2),var(--green3)); color:#000; font-weight:700; font-size:.75rem; padding:.6rem; border-radius:8px; text-align:center; text-decoration:none; transition:opacity .2s; }
.btn-card-primary:hover { opacity:.9; }
.btn-card-secondary { flex:1; background:rgba(0,230,118,.08); border:1px solid var(--border); color:var(--text2); font-size:.75rem; padding:.6rem; border-radius:8px; text-align:center; text-decoration:none; transition:all .2s; }
.btn-card-secondary:hover { border-color:var(--border2); color:var(--green); }

/* ── FILTER ── */
.filter-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.filter-btns { display:flex; gap:.5rem; flex-wrap:wrap; }
.filter-btn { background:var(--bg3); border:1px solid var(--border); color:var(--text3); font-size:.78rem; font-weight:600; padding:.45rem 1rem; border-radius:8px; cursor:pointer; transition:all .2s; }
.filter-btn.active, .filter-btn:hover { background:rgba(0,230,118,.12); border-color:var(--border2); color:var(--green); }
.sort-bar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.sort-label { color:var(--text3); font-size:.75rem; }
.sort-btn { background:transparent; border:1px solid var(--border); color:var(--text3); font-size:.72rem; padding:.35rem .75rem; border-radius:6px; cursor:pointer; transition:all .2s; }
.sort-btn.active, .sort-btn:hover { border-color:var(--border2); color:var(--green); }

/* ── LOAD MORE ── */
.load-more-wrap { text-align:center; margin-top:2rem; }
.btn-load-more { background:var(--bg3); border:1px solid var(--border); color:var(--text2); font-size:.85rem; font-weight:600; padding:.85rem 2.5rem; border-radius:var(--radius); cursor:pointer; transition:all .2s; }
.btn-load-more:hover { border-color:var(--border2); color:var(--green); }

/* ── SEO BOX ── */
.seo-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.5rem; margin:2rem 0; }
.seo-box h2 { font-family:'Montserrat',sans-serif; font-size:1.3rem; font-weight:700; color:var(--green); margin-bottom:1rem; }
.seo-box h3 { font-family:'Montserrat',sans-serif; font-size:1rem; font-weight:700; margin:1.5rem 0 .5rem; color:var(--text1); }
.seo-box p { color:var(--text2); font-size:.88rem; line-height:1.8; }
.seo-box a { color:var(--green); }

/* ── BLOG ── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.blog-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:all .25s; display:block; }
.blog-card:hover { border-color:var(--border2); transform:translateY(-2px); }
.blog-img { width:100%; height:180px; object-fit:cover; }
.blog-img-placeholder { width:100%; height:180px; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:2rem; }
.blog-body { padding:1.2rem; }
.blog-cat { color:var(--green); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:.5rem; }
.blog-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:1rem; margin-bottom:.5rem; line-height:1.4; }
.blog-excerpt { color:var(--text3); font-size:.82rem; line-height:1.6; margin-bottom:.8rem; }
.blog-meta { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:var(--text3); }
.blog-read-more { color:var(--green); font-weight:600; }

/* ── BREADCRUMB ── */
.breadcrumb { font-size:.75rem; color:var(--text3); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--text3); text-decoration:none; }
.breadcrumb a:hover { color:var(--green); }
.breadcrumb span { color:var(--text2); }

/* ── FOOTER ── */
footer { border-top:1px solid var(--border); padding:3rem 0 2rem; margin-top:3rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:2rem; }
.footer-brand {}
.footer-col-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.85rem; color:var(--text1); margin-bottom:1rem; text-transform:uppercase; letter-spacing:.5px; }
.footer-link { display:block; color:var(--text3); font-size:.82rem; text-decoration:none; margin-bottom:.5rem; transition:color .2s; }
.footer-link:hover { color:var(--green); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:1.5rem; border-top:1px solid var(--border); font-size:.78rem; color:var(--text3); flex-wrap:wrap; gap:.5rem; }

/* ── GIT SAYFASI ── */
.redirect-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:3rem; text-align:center; max-width:500px; margin:4rem auto; }
.redirect-logo { width:80px; height:80px; background:var(--bg4); border:1px solid var(--border); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; overflow:hidden; }
.redirect-logo img { width:100%; height:100%; object-fit:cover; }
.redirect-title { font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.5rem; margin-bottom:.5rem; }
.redirect-bonus { color:var(--green); font-weight:700; font-size:1rem; margin-bottom:1.5rem; }
.redirect-timer { font-size:.82rem; color:var(--text3); margin-top:1rem; }
.progress-bar { background:var(--bg3); border-radius:20px; height:4px; margin-top:1rem; overflow:hidden; }
.progress-fill { background:linear-gradient(90deg,var(--green2),var(--green3)); height:100%; border-radius:20px; width:100%; animation:progress 3s linear forwards; }
@keyframes progress { from{width:100%} to{width:0%} }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
    .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media(max-width:900px) {
    .hero-grid { grid-template-columns:1fr; gap:2rem; }
    .hero-stats { grid-template-columns:repeat(4,1fr); }
    .nav-links { display:none; }
}
@media(max-width:600px) {
    .hero { padding:2.5rem 0 2rem; }
    .hero h1 { font-size:2rem; }
    .hero-stats { grid-template-columns:1fr 1fr; }
    .sponsor-grid { grid-template-columns:1fr 1fr; }
    .sites-grid { grid-template-columns:1fr 1fr; }
    .filter-bar { flex-direction:column; align-items:flex-start; }
    .seo-box { padding:1.5rem; }
    .footer-grid { grid-template-columns:1fr; gap:1.5rem; }
    .redirect-box { margin:2rem 1rem; padding:2rem 1.5rem; }
}

@media(max-width:600px) {
    .banner-grid { grid-template-columns:1fr !important; }
    .banner-item img { height:auto !important; max-height:90px !important; object-fit:contain !important; }
}

/* ── MOBİL OPTİMİZASYON ── */
@media(max-width:768px) {
    .container { padding:0 1rem; }
    .hero h1 { font-size:1.8rem; letter-spacing:-.5px; }
    .hero-desc { font-size:.88rem; }
    .hero-btns { flex-direction:column; }
    .hero-btns a, .hero-btns button { width:100%; justify-content:center; }
    .sponsor-grid { grid-template-columns:1fr 1fr; gap:.6rem; }
    .sponsor-card { padding:1rem; }
    .sites-grid { grid-template-columns:1fr 1fr; gap:.5rem; }
    .site-card { padding:.9rem; }
    .card-name { font-size:.88rem; }
    .card-bonus { font-size:.82rem; }
    .card-btns { flex-direction:column; gap:.35rem; }
    .btn-card-primary, .btn-card-secondary { flex:none; width:100%; padding:.55rem; }
    .section-header { flex-wrap:wrap; gap:.5rem; }
    .filter-bar { gap:.5rem; }
    .filter-btns { gap:.3rem; }
    .filter-btn { font-size:.72rem; padding:.35rem .7rem; }
    .sort-bar { gap:.3rem; }
    .sort-btn { font-size:.68rem; padding:.3rem .55rem; }
    .seo-box { padding:1.2rem; }
    .seo-box h2 { font-size:1.1rem; }
    .seo-box h3 { font-size:.95rem; }
    .ticker-inner { animation-duration:20s; }
    .nav-badge span:not(.dot) { display:none; }
    .nav-badge { padding:.3rem .5rem; }
    .banner-grid { grid-template-columns:1fr !important; }
    .banner-item img { height:auto !important; max-height:100px !important; object-fit:contain !important; }
    .hero-stats { grid-template-columns:1fr 1fr; gap:.6rem; }
    .stat-box { padding:1rem; }
    .stat-num { font-size:1.5rem; }
    .footer-grid { grid-template-columns:1fr; }
    .breadcrumb { font-size:.72rem; }
}

@media(max-width:400px) {
    .sponsor-grid { grid-template-columns:1fr; }
    .sites-grid { grid-template-columns:1fr; }
    .hero h1 { font-size:1.6rem; }
    .card-logo-wrap { width:48px; height:48px; }
}

/* ── SİTE DETAY MOBİL ── */
@media(max-width:768px) {
    /* Logo küçült */
    div[style*="width:88px"] { width:64px !important; height:64px !important; }
    /* Özet 4 kutu 2x2 grid */
    div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:1fr 1fr !important; }
    /* Detay grid tek kolon */
    div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
    /* H1 küçült */
    h1[style*="1.9rem"] { font-size:1.5rem !important; }
    /* Buton tam genişlik */
    a[style*="padding:1rem 1.8rem"] { width:100% !important; text-align:center !important; justify-content:center !important; }
}

/* ── KART OPTİMİZASYON ── */
.sponsor-card { padding:1rem; }
.sponsor-card .card-logo-wrap { width:100%; height:60px; border-radius:8px; margin-bottom:.6rem; }
.sponsor-card .card-logo-wrap img { width:100%; height:100%; object-fit:contain; padding:6px; }
.sponsor-card .card-name { font-size:.9rem; margin-bottom:.2rem; }
.sponsor-card .card-bonus { font-size:.85rem; margin-bottom:.2rem; }
.sponsor-card .card-type { font-size:.7rem; margin-bottom:.5rem; }
.sponsor-card .card-meta { margin-bottom:.6rem; }
.sponsor-card .card-btns { gap:.4rem; }
.btn-card-primary { font-size:.72rem; padding:.55rem .4rem; white-space:nowrap; }
.btn-card-secondary { font-size:.72rem; padding:.55rem .4rem; white-space:nowrap; }

/* ── MOBİL GENEL ── */
@media(max-width:600px) {
    .hero h1 { font-size:1.7rem !important; line-height:1.15; letter-spacing:-.3px; }
    .hero h1 br { display:none; }
    .sponsor-grid { grid-template-columns:1fr 1fr !important; gap:.5rem; }
    .sponsor-card { padding:.8rem; }
    .sponsor-card .card-logo-wrap { height:50px; }
    .sponsor-card .card-name { font-size:.82rem; }
    .sponsor-card .card-bonus { font-size:.78rem; }
    .sponsor-card .card-type { display:none; }
    .sponsor-card .card-btns { flex-direction:row; gap:.3rem; }
    .btn-card-primary { flex:2; font-size:.68rem; padding:.5rem .3rem; }
    .btn-card-secondary { flex:1; font-size:.68rem; padding:.5rem .3rem; }
    .sites-grid { grid-template-columns:1fr 1fr !important; gap:.5rem; }
    .site-card { padding:.8rem; }
    .site-card .card-logo-wrap { width:40px; height:40px; }
    .site-card .card-name { font-size:.8rem; }
    .site-card .card-bonus { font-size:.75rem; }
    .site-card .card-type { display:none; }
    .site-card .card-btns { flex-direction:row; gap:.3rem; }
}

/* ── SİTE KARTI LOGO DÜZELTMESİ ── */
.sites-grid .site-card .card-logo-wrap {
    width:100% !important;
    height:55px !important;
    border-radius:8px !important;
    margin-bottom:.6rem !important;
}
.sites-grid .site-card .card-logo-wrap img {
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    padding:6px !important;
}