:root{--bg:#0a0a0a;--card:#0f0f0f;--acc:#facc15;--txt:#f5f5f5;--line:#262626;--muted:#d1d5db}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.7}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
header,footer{background:#0f0f0f;border-bottom:1px solid var(--line)}
.container{max-width:1100px;margin:auto;padding:16px}
h1,h2,h3{color:var(--acc)}
.nav a{margin:0 8px;color:#e8e8e8}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#111827;padding:10px 14px;border-radius:12px;font-weight:800;border:0;cursor:pointer;margin:4px 6px 0 0;transition:transform .12s ease,filter .12s ease}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-outline{background:transparent;border:2px solid var(--acc);color:var(--txt)}
.btn-sm{padding:8px 12px;border-radius:10px;font-weight:700}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.badge{background:#111;border:1px solid #333;border-radius:999px;padding:6px 10px;display:inline-block;margin:4px 4px;color:#ffe47a}
.hero{margin-top:8px}
.hero-img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);display:block}
.thumb{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block;margin-bottom:10px}
.price-table{width:100%;border-collapse:collapse}
.price-table th,.price-table td{border:1px solid #2b2b2b;padding:10px;text-align:left}
.price-table th{background:#111;color:#facc15}
.brands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:12px 0}
.brands figure{margin:0;background:#0f0f0f;border:1px solid #262626;border-radius:12px;padding:10px;text-align:center}
.brands figcaption{font-size:13px;color:#ddd;margin-top:6px}
@media(max-width:1100px){.brands{grid-template-columns:repeat(3,1fr)}}
@media(max-width:580px){.brands{grid-template-columns:repeat(2,1fr)}}
.header-flex{display:flex;justify-content:space-between;align-items:center;gap:12px}
.floating-cta{
  position: fixed;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
}

/* yumuşak görünme animasyonu */
.reveal{opacity:0;transform:translateY(12px);will-change:opacity,transform;transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:translateY(0)}