:root{--ink:#111111;--paper:#ffffff;--red:#c0021a;--red-dark:#8f0012;--muted:#777772}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}

/* ── HEADER ── */
header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:2px solid var(--red);background:#111}
.logo{font:700 25px Orbitron,sans-serif;color:#fff;text-decoration:none;letter-spacing:-2px}
.logo span{color:var(--red);font-size:16px;letter-spacing:-5px;margin-left:3px}
nav{display:flex;align-items:center;gap:32px}
nav a{color:#ccc;font-size:13px;font-weight:700;text-decoration:none;transition:color .2s}
nav a:hover{color:#fff}
.contact,.button{background:var(--red);color:white!important;padding:13px 20px;border-radius:2px;transition:background .2s}
.contact:hover,.button:hover{background:var(--red-dark)!important}

/* ── HERO ── */
.hero{min-height:650px;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;padding:70px 5vw;background:#111;color:#fff}
.eyebrow{color:var(--red);font-size:11px;font-weight:800;letter-spacing:1.7px;margin:0 0 15px;text-transform:uppercase}
.hero h1{font-size:clamp(48px,7vw,92px);line-height:.97;letter-spacing:-6px;margin:0 0 28px;color:#fff}
.hero h1 i{font-family:Georgia,serif;font-weight:400;color:var(--red)}
.lead{max-width:440px;line-height:1.7;color:#aaa9a4;margin:0 0 34px}
.button{display:inline-flex;gap:32px;align-items:center;text-decoration:none;font-size:13px;font-weight:800}
.button b{font-size:20px}

/* ── WhatsApp Butonu ── */
.whatsapp-btn{
  background:#25d366!important;
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:800;
  padding:13px 22px;border-radius:2px;
  color:#fff!important;text-decoration:none;
  transition:background .2s;
}
.whatsapp-btn:hover{background:#1ebe5d!important}

/* ── HERO RIGHT — İletişim Kutusu ── */
.hero-contact{
  display:flex;flex-direction:column;justify-content:center;
  height:485px;
  padding:52px 48px;
  border-left:3px solid var(--red);
  position:relative;
}
/* ince kırmızı çizgi tabanda */
.hero-contact::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--red) 0%,transparent 100%);
}
.hero-contact .hc-company{
  font:900 clamp(22px,2.5vw,32px) Orbitron,sans-serif;
  color:#fff;
  line-height:1.25;
  letter-spacing:-1px;
  margin:0 0 6px;
  text-transform:uppercase;
}
.hero-contact .hc-sub{
  font:700 clamp(13px,1.2vw,16px) Orbitron,sans-serif;
  color:var(--red);
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0 0 36px;
}
.hero-contact .hc-divider{
  width:40px;height:2px;background:var(--red);margin:0 0 36px;
}
.hero-contact address{font-style:normal;display:flex;flex-direction:column;gap:22px}
.hero-contact .hc-row{display:flex;align-items:flex-start;gap:16px}
.hero-contact .hc-icon{
  width:32px;height:32px;flex-shrink:0;
  border:1.5px solid rgba(192,2,26,.5);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);font-size:14px;margin-top:2px;
}
.hero-contact .hc-label{
  font:800 9px Manrope,sans-serif;
  letter-spacing:2px;color:var(--red);
  text-transform:uppercase;margin:0 0 5px;display:block;
}
.hero-contact .hc-value{
  font:500 14px Manrope,sans-serif;
  color:#d0ceca;line-height:1.6;margin:0;
}
.hero-contact .hc-phone{
  font:800 clamp(18px,2vw,24px) Orbitron,sans-serif;
  color:#fff;letter-spacing:1px;margin:0;
  text-decoration:none;
}
.hero-contact .hc-phone:hover{color:var(--red)}

/* ── BRAND LOGOS ── */
.logo-catalog{padding:80px 5vw;background:#f8f8f8}
.logo-catalog .eyebrow{color:var(--red)}
.logo-catalog h2{font-size:clamp(28px,4vw,42px);letter-spacing:-2px;margin:0 0 38px}
.logo-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.logo-catalog-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;border:1.5px solid #e8e8e8;padding:28px 18px;text-decoration:none;color:#111;transition:border-color .2s,box-shadow .2s}
.logo-catalog-card:hover{border-color:var(--red);box-shadow:0 4px 24px rgba(192,2,26,.12)}
.logo-catalog-card img{height:50px;object-fit:contain;filter:grayscale(1);transition:filter .2s}
.logo-catalog-card:hover img{filter:none}
.logo-catalog-card .logo-empty{font:700 11px Orbitron;color:#ccc;letter-spacing:2px}
.logo-catalog-card strong{font-size:13px;font-weight:800;text-align:center}
.logo-catalog-card small{font-size:11px;color:var(--red);font-weight:700}

/* ── CATALOG ── */
.catalog{padding:80px 5vw}
.catalog-top{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.catalog-heading-left{flex:1}
.catalog h2{font-size:42px;letter-spacing:-2.5px;margin:0}
.catalog-search-wrap{display:flex;align-items:center;gap:10px;flex-shrink:0}
#catalog-search{border:1.5px solid #ddd;padding:10px 16px;font:700 13px Manrope,sans-serif;width:220px;outline:none;transition:border-color .2s}
#catalog-search:focus{border-color:var(--red)}
#catalog-clear-all{background:var(--red);color:#fff;border:0;padding:10px 18px;font:700 13px Manrope,sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s}
#catalog-clear-all:hover{background:var(--red-dark)}
.catalog-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;border-bottom:1px solid #eee;padding-bottom:12px}
#result-count{font-size:12px;color:#74746f}
#active-filter-label{font-size:12px;font-weight:700;color:var(--red)}

/* ── SIDEBAR ── */
.catalog-layout{display:grid;grid-template-columns:225px 1fr;gap:44px}
aside{border-top:2px solid var(--red)}

/* Sidebar bölüm başlıkları */
.aside-section-title{
  font:800 9px Manrope,sans-serif;letter-spacing:2px;
  color:#aaa;text-transform:uppercase;
  padding:18px 2px 8px;margin:0;border-bottom:1px solid #eee;
}

/* Ürün Kategori filtreleri (Ana kategori — kırmızı badge stili) */
.filter-pcat{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid #eee;
  padding:13px 2px;text-align:left;
  font:700 12px Manrope,sans-serif;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  color:#444;transition:color .2s;text-decoration:none;
}
.filter-pcat:hover{color:var(--red)}
.filter-pcat.active{color:var(--red)}
.filter-pcat .pcat-badge{
  font-size:9px;font-weight:800;letter-spacing:1px;
  background:#f2f2f2;color:#888;
  padding:2px 6px;text-transform:uppercase;
}
.filter-pcat.active .pcat-badge{background:var(--red);color:#fff}

/* Marka / model / kasa filtreleri */
.filter{width:100%;background:transparent;border:0;border-bottom:1px solid #e4e4e0;padding:14px 2px;text-align:left;font:700 13px Manrope;cursor:pointer;display:flex;justify-content:space-between;color:inherit;transition:color .2s;text-decoration:none}
.filter:hover{color:var(--red)}
.filter.active{color:var(--red)}
.models{display:none;padding:3px 0 8px}
.models.open{display:block}
.filter.model{font-size:12px;font-weight:600;padding:9px 5px;border:0;color:#666;transition:color .2s}
.filter.model:hover,.filter.model.active{color:var(--red)}
.variants{display:none;padding:2px 0 6px 12px}
.variants.open{display:block}
.filter.variant{font-size:11px;font-weight:500;padding:7px 5px;border:0;color:#888;transition:color .2s}
.filter.variant:hover,.filter.variant.active{color:var(--red)}

/* ── PRODUCT GRID ── */
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.product-card{height:340px;position:relative;overflow:hidden;background:#222;cursor:pointer}
.product-card.hide{display:none}
.product-card img{width:100%;height:100%;object-fit:cover;transition:.5s}
.product-card:hover img{transform:scale(1.06)}
.card-overlay{position:absolute;inset:auto 0 0;padding:54px 20px 20px;color:white;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.card-overlay p{font-size:9px;letter-spacing:1px;margin:0 0 7px}
.card-overlay p b{float:right;font-size:18px;color:var(--red)}
.card-overlay h3{font-size:18px;margin:0;letter-spacing:-.5px}
.card-cat{display:inline-block;background:var(--red);color:#fff;font-size:9px;font-weight:800;letter-spacing:1.5px;padding:3px 8px;margin-bottom:6px;text-transform:uppercase}

/* Boş durum */
.no-results{grid-column:1/-1;text-align:center;padding:60px 20px;color:#aaa;font-size:14px}
.no-results span{display:block;font-size:42px;margin-bottom:12px}

/* ── MODAL ── */
dialog{border:0;padding:0;width:min(1000px,90vw);max-width:none;background:#191a19;color:white;grid-template-columns:1.15fr .85fr}
dialog[open]{display:grid}
dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(5px)}
dialog>div{padding:75px 43px;display:flex;flex-direction:column;align-items:start;justify-content:center}
dialog h2{font-size:37px;line-height:1.05;letter-spacing:-2px;margin:0 0 22px}
dialog div>p:not(.eyebrow){color:#c7c7c1;line-height:1.7;margin:0 0 35px}
.modal-close{position:absolute;right:15px;top:10px;color:#fff;border:0;background:transparent;font-size:34px;z-index:1;cursor:pointer}

/* ── FOOTER ── */
footer{background:#111;color:white;padding:40px 5vw;display:flex;align-items:center;justify-content:space-between;border-top:2px solid var(--red)}
footer p,footer small{color:#858580;font-size:12px}
footer .logo{color:#fff}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .catalog-top{flex-direction:column;align-items:flex-start}
  .catalog-search-wrap{width:100%}
  #catalog-search{flex:1}
}
@media(max-width:760px){
  header{height:66px}
  nav a:not(.contact){display:none}
  .hero{grid-template-columns:1fr;padding:60px 7vw 0}
  .hero-contact{height:auto;padding:40px 32px;border-left:0;border-top:3px solid var(--red);margin-top:0}
  .catalog{padding:60px 6vw}
  .catalog-layout{grid-template-columns:1fr;gap:30px}
  .product-grid{grid-template-columns:1fr 1fr;gap:10px}
  .product-card{height:250px}
  dialog[open]{grid-template-columns:1fr;overflow:auto}
  dialog>div{padding:35px}
  footer{display:block}
  footer p{margin:18px 0}
}