:root{--bg:#0b0b0d;--panel:#121217;--muted:#1a1b22;--text:#eaeaf0;--soft:#b8bdc9;--accent:#e91e63;--accent2:#36c}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji"}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Top strip */
.top{background:linear-gradient(90deg,var(--muted),#0e0e13);color:var(--soft);font-size:13px}
.top .container{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:12px}
.ticker{display:flex;gap:16px;white-space:nowrap;overflow:hidden}
.ticker span{opacity:.9}

/* Header */
header{position:sticky;top:0;z-index:30;background:rgba(11,11,13,.7);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid #1f2230}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:conic-gradient(from 90deg at 50% 50%,#fff, #ddd,#bbb,#999,#ddd);color:#111;font-weight:800}
.brand .name{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:18px;flex-wrap:wrap}
.menu a{padding:8px 10px;border-radius:10px}
.menu a:hover{background:var(--muted)}
.cta{display:flex;gap:10px;align-items:center}
.btn{padding:10px 14px;border-radius:12px;border:1px solid #2b2f42;background:var(--panel);color:var(--text);cursor:pointer}
.btn.small{padding:6px 8px;border-radius:10px;font-size:13px}
.btn.primary{background:var(--accent);border-color:transparent;color:#fff;font-weight:700}
.badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:10px;background:#e74c3c;color:#fff;font-size:12px;margin-left:6px;text-align:center}

/* Language switcher */
.lang-switch{display:flex;gap:6px}
.lang-switch .flag{cursor:pointer;border:1px solid #2b2f42;border-radius:8px;background:var(--panel);padding:4px 6px;line-height:1}
.lang-switch .flag.active{outline:2px solid var(--accent)}

/* Hero */
.hero{position:relative;border-bottom:1px solid #1f2230}
.hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:stretch;padding:22px 0}
.hero .card{background:radial-gradient(1200px 500px at 10% 10%,#191b23,#0f1016);border:1px solid #23263a;border-radius:18px;overflow:hidden}
.hero-main{position:relative;min-height:320px}
.hero-main .slide{position:absolute;inset:0;display:none}
.hero-main .slide.active{display:block}
.hero-main .slide img{width:100%;height:100%;object-fit:cover;opacity:.9}
.hero-main .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.7));}
.hero-main .caption{position:absolute;left:18px;right:18px;bottom:16px}
.hero-main .caption h1{margin:0 0 8px;font-size:28px}
.pill{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 10px;border-radius:999px;font-size:12px;margin-right:8px}
.hero-side{display:grid;grid-template-rows:auto 1fr;gap:14px}
.next-match{padding:16px}
.teams{display:flex;align-items:center;justify-content:space-between;margin:12px 0}
.teams .t{display:flex;align-items:center;gap:10px}
.circle{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#fff,#cfcfd4);display:grid;place-items:center;color:#111;font-weight:800}
.meta{color:var(--soft);font-size:13px}

/* Sections */
section{padding:26px 0}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px}
.section-title h2{margin:0;font-size:20px}

/* News grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{background:var(--panel);border:1px solid #24283a;border-radius:16px;overflow:hidden}
.card:hover{transform:translateY(-2px);transition:.2s}
.news .item{grid-column:span 4}
.news .thumb{height:160px;background:#0e0f14}
.news .thumb img{width:100%;height:100%;object-fit:cover}
.news .body{padding:12px 14px}
.news .body h3{margin:2px 0 6px;font-size:16px}
.news .body p{margin:0;color:var(--soft);font-size:13px}

/* Fixtures + Table */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.list{display:flex;flex-direction:column}
.fixture{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px dashed #24283a}
.fixture:last-child{border-bottom:0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #202437;text-align:left;font-size:14px}
.table th{color:var(--soft);font-weight:600}

/* Shop band */
.shop{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.promo{background:linear-gradient(135deg,#1a1b22,#10121a);border:1px solid #262a3f;border-radius:16px;overflow:hidden;display:grid}
.promo .row{display:grid;grid-template-columns:1.2fr .8fr}
.promo .copy{padding:16px}

/* Catalog */
.catalog{margin-top:16px}
.catalog .item{grid-column:span 3}
.catalog .item .body{padding:12px 14px}
.price{font-weight:700}
.actions{display:flex;gap:8px;margin-top:10px}

/* Cart panel */
.cart-panel{position:fixed;top:0;right:-420px;width:360px;max-width:90vw;height:100vh;background:#0e0f14;border-left:1px solid #22263a;box-shadow:-8px 0 24px rgba(0,0,0,.35);z-index:40;transition:right .25s ease}
.cart-panel.open{right:0}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #202437}
.cart-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 180px);overflow:auto}
.cart-item{display:flex;gap:10px;align-items:center;border-bottom:1px dashed #24283a;padding-bottom:10px}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:10px}
.cart-foot{position:absolute;bottom:0;left:0;right:0;border-top:1px solid #202437;background:#0c0d12;padding:12px 16px}
.cart-row{display:flex;justify-content:space-between;margin:6px 0}

/* Footer */
footer{margin-top:28px;border-top:1px solid #1f2230;background:#0c0d12}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;padding:22px 0;color:var(--soft)}
.foot h4{color:var(--text);margin:.4rem 0}
.foot a{display:block;padding:6px 0;color:var(--soft)}
.copyr{padding:12px 0;color:#8d93a2;border-top:1px solid #1b1e2a;font-size:12px}

/* Responsive */
@media (max-width: 980px){
  .hero-wrap{grid-template-columns:1fr}
  .shop{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .news .item{grid-column:span 6}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .menu{display:none}
  .news .item{grid-column:span 12}
  .nav{padding:12px 0}
  .hero-main{min-height:260px}
}


/* login modal */
.modal {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999}
.modal-content {background:#fff;padding:30px;border-radius:12px;width:90%;max-width:380px;text-align:center}
.modal-content input {width:100%;margin-bottom:10px;padding:10px;border:1px solid #d0d4dc;border-radius:8px}
.modal-content .btn {width:100%;margin-top:6px}
.btn.danger {background:#ef4444;color:#fff;border:0}

.catalog-section {
  width: 100%;
  display: flex;
  justify-content: center; /* içeriği ortalar */
}

.grid.catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 🔥 4 sütun */
  gap: 24px;
  max-width: 1200px; /* ortalama genişlik */
  margin: 0 auto; /* sayfa ortalama */
  padding: 20px;
}

.product-card {
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* iç metin ortalı */
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.product-card .img-wrap {
  width: 100%;
  height: 240px;
  overflow: hidden;
}
.product-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-info h3 {
  font-size: 1.05rem;
  color: #fff;
  margin: 0;
}

.product-info .price {
  color: #ffcc66;
  font-size: 1rem;
  font-weight: 600;
}

.add-to-cart {
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .3s;
}

.add-to-cart:hover {
  background: #0063cc;
}

@media (max-width: 992px) {
  .grid.catalog { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .grid.catalog { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid.catalog { grid-template-columns: 1fr; }
}

#cartPanel {
  background: #111 !important;          /* Arka plan siyah */
  color: #fff !important;               /* Yazılar beyaz */
  box-shadow: -2px 0 20px rgba(0,0,0,.8);
}

#cartPanel .cart-head,
#cartPanel .cart-foot {
  background: #181818 !important;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  color: #eee;
}

#cartPanel button,
#cartPanel .btn {
  background: #ff0059 !important;       /* Senin sitedeki pembe/kırmızı tonu */
  color: #fff !important;
  border: none;
  border-radius: 6px;
  transition: opacity .2s;
}

#cartPanel button:hover {
  opacity: 0.85;
}

#cartPanel .cart-body {
  background: #121212;
  color: #eee;
}

#cartPanel .cart-row {
  border-top: 1px solid #333;
}