/* =========================================================
   GS SPORTİF PROJELER — ana site stili
   Tema: Sessiz lüks / minimal, koyu gri tonlar. İnce tipografi,
   bol boşluk; kırmızı ve bronz vurgular yalnızca küçük detaylarda.
   ========================================================= */

:root{
  /* --- tasarım dili (koyu / gri tonlar) --- */
  --ink:#ececea;            /* birincil metin — açık gri/beyaz */
  --ink-soft:#9a9994;       /* ikincil/soluk metin — orta gri */
  --paper:#1a1a1b;          /* sayfa zemini — koyu antrasit gri */
  --paper-alt:#242425;      /* yükseltilmiş panel zemini — biraz daha açık gri */
  --line:rgba(255,255,255,.10); /* ince ayraç çizgileri */
  --accent:#c23b34;         /* logo kırmızısı — indirim/CTA vurgusu, cimriyle kullanılır */
  --accent-soft:rgba(194,59,52,.16);
  --gold:#dba84e;           /* logo altını — ikincil vurgu/link rengi, marka imzası */
  --deep:#0e0e0f;           /* en koyu ton — footer/topbar ayrımı için */
  --radius:3px;
  --ff-display:'Inter', sans-serif;
  --ff-body:'Inter', sans-serif;

  /* --- geriye dönük uyum: eski değişken adları, HTML/JS
         dosyalarındaki inline style="color:var(--yellow)" vb.
         referansların bu palete otomatik uyması için burada
         yeniden tanımlanır. --- */
  --yellow:var(--gold);
  --yellow-soft:#e8bd72;
  --yellow-glow:rgba(219,168,78,.22);
  --red:var(--accent);
  --red-dark:#8f2b26;
  --red-glow:rgba(194,59,52,.22);
  --black:var(--deep);
  --black-soft:var(--deep);
  --black-card:var(--paper-alt);
  --white:var(--ink);
  --muted:var(--ink-soft);
  --border:var(--line);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 0% 0%, rgba(194,59,52,.10), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(219,168,78,.10), transparent 40%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--ff-body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--ff-display); font-weight:500; letter-spacing:.2px; margin:0 0 .5em; color:var(--ink);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}
.container{max-width:1200px; margin:0 auto; padding:0 24px;}
.section{padding:88px 0;}
.section-title{
  font-size:1.6rem; text-transform:uppercase; text-align:center; margin-bottom:10px;
  letter-spacing:.16em; font-weight:500; color:var(--ink);
}
.section-sub{text-align:center; color:var(--ink-soft); margin-bottom:56px; font-size:.92rem;}
.grid-bg{display:none;}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--deep);
  font-size:.7rem;
  color:#f2f1ef;
}
.topbar .container{display:flex; justify-content:space-between; align-items:center; height:38px;}
.topbar a{opacity:.75; margin-right:22px; text-transform:uppercase; letter-spacing:.1em;}
.topbar a:hover{opacity:1;}
.topbar .admin-link{font-weight:500; letter-spacing:.12em; text-transform:uppercase;}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--paper-alt); color:var(--ink); font-weight:500;
  font-family:var(--ff-display); font-size:.7rem; letter-spacing:.12em;
  overflow:hidden; padding:10px 0; border-bottom:1px solid var(--line); text-transform:uppercase;
}
.marquee span{
  display:inline-block; white-space:nowrap; padding-left:100%;
  animation:marquee-scroll 18s linear infinite;
}
@keyframes marquee-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:100;
  background:rgba(20,20,21,.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.navbar .container{display:flex; align-items:center; justify-content:space-between; height:84px;}
.logo{display:flex; align-items:center; gap:12px; font-family:var(--ff-display); font-weight:600; font-size:1rem; letter-spacing:.06em;}
.logo .mark{
  width:46px;height:46px; object-fit:contain; display:block; flex-shrink:0;
}
.logo .text-sub{display:block; font-size:.58rem; color:var(--gold); font-family:var(--ff-body); letter-spacing:.22em; font-weight:500; margin-top:2px;}
.nav-links{display:flex; gap:34px; font-weight:500; font-size:.74rem;}
.nav-links a{position:relative; padding:6px 0; color:var(--ink); text-transform:uppercase; letter-spacing:.1em;}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .25s;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--gold);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:36px;height:36px;border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--paper); cursor:pointer; transition:.2s; font-size:.9rem;
}
.icon-btn:hover{border-color:var(--ink); background:var(--ink); color:var(--paper); filter:none;}
.burger{display:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; border-radius:0; font-weight:500; cursor:pointer;
  border:1px solid transparent; font-family:var(--ff-body); font-size:.74rem; transition:.2s;
  text-transform:uppercase; letter-spacing:.14em;
}
.btn-primary{background:var(--gold); color:var(--deep); border-color:var(--gold);}
.btn-primary:hover{background:transparent; color:var(--gold);}
.btn-outline{background:transparent; border:1px solid var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper);}
.btn-dark{background:var(--paper); color:var(--ink); border:1px solid var(--line);}
.btn-dark:hover{border-color:var(--ink);}
.btn-block{width:100%;}
.btn-sm{padding:10px 18px; font-size:.68rem;}

/* ---------- Hero ---------- */
.hero{position:relative; padding:72px 0 56px; overflow:hidden;}
.hero .container{max-width:720px; text-align:center;}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:0; border-radius:0;
  background:transparent; border:none; border-bottom:1px solid var(--gold); color:var(--gold);
  font-size:.68rem; font-weight:500; letter-spacing:.18em; margin-bottom:26px; text-transform:uppercase; padding-bottom:6px;
}
.hero h1{font-size:2.6rem; font-weight:400; line-height:1.15; margin-bottom:20px; letter-spacing:-.01em;}
.hero h1 .accent{color:var(--accent); font-style:normal;}
.hero p{color:var(--ink-soft); max-width:480px; margin:0 auto 32px; font-size:1rem;}
.hero-actions{display:flex; gap:16px; justify-content:center;}
.hero-decor{position:absolute; top:50%; right:-120px; transform:translateY(-50%); width:560px; height:560px; opacity:.05; pointer-events:none; z-index:0;}
.hero-decor img{width:100%; height:100%; object-fit:contain;}
.hero::before{
  content:''; position:absolute; top:-160px; left:50%; transform:translateX(-50%); width:640px; height:640px;
  background:radial-gradient(circle, rgba(219,168,78,.09), transparent 70%); pointer-events:none; z-index:0;
}
.hero .container{position:relative; z-index:1;}
.trust-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line);}
.trust-badges span{font-size:.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-weight:500;}

/* ---------- Süsleme öğeleri ---------- */
.section-divider{width:70px; height:2px; margin:0 auto 40px; background:linear-gradient(90deg, var(--accent), var(--gold));}
.category-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.category-card{background:var(--paper); padding:32px 16px; text-align:center; transition:.2s; display:flex; flex-direction:column; align-items:center; gap:10px;}
.category-card:hover{background:var(--paper-alt);}
.category-card .cat-icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--paper-alt); border:1px solid var(--line); font-size:1.3rem; transition:.2s;
}
.category-card:hover .cat-icon{border-color:var(--gold); background:rgba(219,168,78,.1);}
.category-card .cat-name{font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; font-weight:500; color:var(--ink);}
.category-card .cat-count{font-size:.65rem; color:var(--ink-soft);}

.promo-banner{background:linear-gradient(120deg, var(--accent), var(--gold)); padding:60px 0; position:relative; overflow:hidden;}
.promo-banner-inner{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.promo-kicker{display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.16em; color:#fff; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:5px; margin-bottom:14px; text-transform:uppercase;}
.promo-banner h2{color:#fff; font-size:1.6rem; font-weight:500; margin:0 0 8px; letter-spacing:0; text-transform:none;}
.promo-banner p{color:rgba(255,255,255,.88); margin:0; font-size:.92rem;}
.promo-btn{background:#161616; color:var(--gold); border-color:#161616; flex-shrink:0;}
.promo-btn:hover{background:transparent; color:#fff; border-color:#fff;}
@media(max-width:720px){ .promo-banner-inner{flex-direction:column; text-align:center;} }

/* ---------- Cards / Grid ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{
  background:var(--paper); border:none; border-radius:0;
  padding:36px 30px; transition:.2s; position:relative; overflow:hidden;
}
.card:hover{background:var(--paper-alt);}
.card .ic{
  width:38px;height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); margin-bottom:20px; font-size:1.05rem;
}
.card h3{font-size:.85rem; margin-bottom:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:500;}
.card p{color:var(--ink-soft); font-size:.86rem; margin:0;}

.tag{display:inline-block; font-size:.62rem; padding:4px 11px; border-radius:0; background:transparent; border:1px solid var(--line); color:var(--ink-soft); font-weight:500; margin-bottom:12px; text-transform:uppercase; letter-spacing:.1em;}

/* ---------- Ürün kartları / Mağaza (e-ticaret) ---------- */
.filter-bar{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; background:var(--paper-alt); border:1px solid var(--line); border-radius:0; padding:18px;}
.filter-bar select{
  flex:1; min-width:160px; padding:11px 14px; border-radius:0; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-family:var(--ff-body); font-size:.78rem; outline:none;
  text-transform:uppercase; letter-spacing:.06em;
}
.filter-bar select:focus{border-color:var(--ink);}
.product-card{background:var(--paper); border:1px solid var(--line); border-radius:0; overflow:hidden; transition:.2s; display:flex; flex-direction:column; position:relative;}
.product-card:hover{border-color:var(--ink);}
.product-card-link{position:absolute; inset:0; z-index:1;}
.product-card .size-select, .product-card .btn, .product-card .product-detail-link{position:relative; z-index:2;}
.product-visual{
  position:relative; height:190px; display:flex; align-items:center; justify-content:center;
  background:var(--paper-alt); border-bottom:1px solid var(--line);
}
.product-visual .glyph{font-family:var(--ff-display); font-weight:300; font-size:2.2rem; color:var(--ink); letter-spacing:.14em;}
.product-visual .product-photo{width:100%; height:100%; object-fit:cover;}
.discount-badge{position:absolute; top:14px; left:14px; background:var(--accent); color:#fff; font-size:.6rem; font-weight:500; padding:5px 10px; border-radius:0; letter-spacing:.1em; text-transform:uppercase;}
.photo-count{position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.6); color:#fff; font-size:.65rem; padding:3px 8px; border-radius:999px;}
.product-detail-link{display:block; text-align:center; font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; margin-top:-2px;}
.product-detail-link:hover{color:var(--gold);}
.product-body{padding:22px; display:flex; flex-direction:column; gap:11px; flex:1;}
.tag-row{display:flex; gap:8px; flex-wrap:wrap;}
.gender-tag{display:inline-block; font-size:.6rem; padding:4px 10px; border-radius:0; background:transparent; border:1px solid var(--line); color:var(--ink-soft); font-weight:500; text-transform:uppercase; letter-spacing:.08em;}
.product-body h3{font-size:.86rem; margin:0; font-weight:500; text-transform:uppercase; letter-spacing:.03em;}
.product-desc{color:var(--ink-soft); font-size:.82rem; margin:0; flex:1;}
.price-row{display:flex; align-items:baseline; gap:10px; margin-top:2px;}
.price-old{color:var(--ink-soft); text-decoration:line-through; font-size:.8rem;}
.price-now{color:var(--ink); font-family:var(--ff-display); font-size:1rem; font-weight:500;}
.size-select{
  width:100%; padding:10px 10px; border-radius:0; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-family:var(--ff-body); font-size:.76rem; outline:none;
  text-transform:uppercase; letter-spacing:.05em;
}
.size-select:focus{border-color:var(--ink);}

/* ---------- Ürün detay sayfası ---------- */
.product-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.detail-gallery{display:flex; flex-direction:column; gap:12px;}
.detail-main-image{aspect-ratio:1/1; background:var(--paper-alt); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.detail-main-image img{width:100%; height:100%; object-fit:cover;}
.detail-placeholder .glyph{font-family:var(--ff-display); font-weight:300; font-size:3.5rem; color:var(--ink); letter-spacing:.14em;}
.detail-thumbs{display:flex; gap:10px; flex-wrap:wrap;}
.detail-thumb{width:64px; height:64px; border:1px solid var(--line); cursor:pointer; opacity:.6; transition:.15s;}
.detail-thumb img{width:100%; height:100%; object-fit:cover;}
.detail-thumb:hover{opacity:.9;}
.detail-thumb.active{border-color:var(--gold); opacity:1;}
.detail-info{padding-top:4px;}
.detail-title{font-size:1.5rem; font-weight:400; text-transform:none; letter-spacing:0; margin:14px 0 0;}
.detail-desc{color:var(--ink-soft); font-size:.92rem; line-height:1.7; margin-bottom:22px;}
.detail-info .form-group{margin-bottom:20px; max-width:260px;}
.detail-stock{color:var(--ink-soft); font-size:.78rem; margin-top:16px; margin-bottom:0;}
@media(max-width:800px){ .product-detail-grid{grid-template-columns:1fr;} }

/* ---------- Sepet ikonu rozeti ---------- */
.cart-count{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:.62rem; font-weight:600; display:none; align-items:center; justify-content:center;
}

/* ---------- Ödeme sayfası ---------- */
.checkout-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:1px; align-items:start; background:var(--line); border:1px solid var(--line);}
.panel-box{background:var(--paper); border:none; border-radius:0; padding:34px;}
.panel-box h3{margin-top:0; color:var(--ink); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; font-weight:500;}
.pos-placeholder-note{
  background:var(--paper-alt); border:1px dashed var(--line); color:var(--ink-soft);
  font-size:.76rem; padding:12px 14px; border-radius:0; margin-bottom:18px;
}
@media(max-width:900px){ .checkout-grid{grid-template-columns:1fr;} }

/* ---------- Sepet tablosu ---------- */
.cart-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.cart-table th{text-align:left; color:var(--ink-soft); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; padding:12px; border-bottom:1px solid var(--ink); font-weight:500;}
.cart-table td{padding:16px 12px; border-bottom:1px solid var(--line);}

/* ---------- Generic page header (inner pages) ---------- */
.page-hero{
  padding:64px 0 48px; text-align:center; border-bottom:1px solid var(--line);
  background:var(--paper-alt);
}
.page-hero h1{font-size:1.8rem; font-weight:400; text-transform:uppercase; letter-spacing:.1em;}
.breadcrumb{color:var(--ink-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;}
.breadcrumb a:hover{color:var(--ink);}
.prose{max-width:780px; margin:0 auto; color:var(--ink);}
.prose h2{font-size:1.05rem; margin-top:38px; color:var(--ink); text-transform:uppercase; letter-spacing:.08em; font-weight:500;}
.prose h3{font-size:.95rem; margin-top:26px; font-weight:500;}
.prose ul{margin:14px 0; padding-left:20px; list-style:disc;}
.prose li{margin-bottom:6px;}
.prose table{width:100%; border-collapse:collapse; margin:20px 0;}
.prose th, .prose td{border:1px solid var(--line); padding:11px 13px; text-align:left; font-size:.86rem;}
.prose th{background:var(--paper-alt); color:var(--ink); font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem;}

/* ---------- FAQ Accordion ---------- */
.faq-item{border:1px solid var(--line); border-radius:0; margin-bottom:-1px; overflow:hidden; background:var(--paper);}
.faq-q{padding:20px 4px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:500; font-size:.9rem;}
.faq-q .arrow{transition:.25s; color:var(--ink-soft); font-weight:300;}
.faq-item.open .arrow{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--ink-soft); padding:0 4px;}
.faq-item.open .faq-a{max-height:400px; padding-bottom:20px;}

/* ---------- Forms ---------- */
.form-card{
  background:var(--paper); border:1px solid var(--line); border-radius:0;
  padding:40px; max-width:620px; margin:0 auto;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block; font-size:.68rem; color:var(--ink-soft); margin-bottom:8px; font-weight:500; text-transform:uppercase; letter-spacing:.08em;}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:13px 14px; border-radius:0; border:1px solid var(--line);
  background:var(--paper-alt); color:var(--ink); font-family:var(--ff-body); font-size:.88rem; outline:none; transition:.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  border-color:var(--ink); box-shadow:none;
}
.form-group textarea{resize:vertical; min-height:110px;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; font-size:.83rem; color:var(--ink-soft);}
.result-box{
  margin-top:24px; padding:18px; border-radius:0; border:1px solid var(--line); background:var(--paper-alt); font-size:.87rem;
}
.result-box.ok{border-color:var(--ink); }
.badge-status{padding:5px 12px; border-radius:0; font-size:.64rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;}
.badge-status.hazirlaniyor{background:var(--paper-alt); color:var(--ink); border:1px solid var(--line);}
.badge-status.kargoda{background:rgba(90,140,220,.12); color:#8fb4ea; border:1px solid rgba(90,140,220,.3);}
.badge-status.teslim{background:rgba(90,180,110,.12); color:#8fd4a3; border:1px solid rgba(90,180,110,.3);}
.badge-status.acik{background:var(--paper-alt); color:var(--ink); border:1px solid var(--line);}
.badge-status.inceleniyor{background:rgba(90,140,220,.12); color:#8fb4ea; border:1px solid rgba(90,140,220,.3);}
.badge-status.cozuldu{background:rgba(90,180,110,.12); color:#8fd4a3; border:1px solid rgba(90,180,110,.3);}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:999; max-width:600px; margin:0 auto;
  background:var(--paper-alt); border:1px solid var(--gold); border-radius:0; padding:22px 26px;
  box-shadow:0 12px 32px rgba(0,0,0,.5); display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
.cookie-banner p{margin:0; font-size:.82rem; color:var(--ink-soft); flex:1; min-width:220px;}
.cookie-banner .actions{display:flex; gap:10px;}

/* ---------- Footer ---------- */
.footer{background:var(--deep); border-top:none; margin-top:70px; color:#e8e6e1;}
.footer-top{
  height:1px; background:rgba(255,255,255,.12);
}
.footer .container{padding:64px 24px 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
.footer h4{font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:#fff; margin-bottom:20px; font-weight:500;}
.footer li{margin-bottom:11px;}
.footer a{color:#a5a29b; font-size:.82rem;}
.footer a:hover{color:#fff;}
.footer .about p{color:#a5a29b; font-size:.85rem; max-width:280px;}
.social{display:flex; gap:10px; margin-top:18px;}
.social .icon-btn{border-color:rgba(255,255,255,.2); background:transparent; color:#fff;}
.social .icon-btn:hover{background:#fff; color:var(--deep);}
.newsletter{display:flex; gap:8px; margin-top:10px;}
.newsletter input{flex:1; padding:11px 12px; border-radius:0; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff;}
.bottom-bar{
  border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:.72rem; color:#7d7b74; text-transform:uppercase; letter-spacing:.05em;
}
.bottom-bar a{color:#7d7b74;}
.bottom-bar a:hover{color:#fff;}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .card-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:720px){
  .nav-links{position:fixed; top:76px; left:0; right:0; background:var(--paper); flex-direction:column; padding:24px; align-items:flex-start;
    border-bottom:1px solid var(--line); transform:translateY(-130%); transition:.3s; gap:18px;}
  .nav-links.open{transform:translateY(0);}
  .burger{display:flex;}
  .card-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .hero h1{font-size:2rem;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}