/* ============================================================
   Babacan Kauçuk — Micro-Site Network · Industrial Dark Theme
   Dark Navy #0F1C2E · Red Accent #C0392B · Crisp White
   ============================================================ */

:root {
  --navy:         #0F1C2E;
  --navy-mid:     #152236;
  --navy-light:   #1E3353;
  --navy-card:    #132030;
  --red:          #C0392B;
  --red-light:    #E74C3C;
  --red-dark:     #96281B;
  --red-glow:     rgba(192,57,43,0.18);
  --red-border:   rgba(192,57,43,0.28);
  --text-on-dark: #EBF2FF;
  --text-muted:   rgba(235,242,255,0.45);
  --text-body:    #2C3E50;
  --text-mid:     #4A5568;
  --text-light:   #718096;
  --bg-white:     #FFFFFF;
  --bg-off:       #F4F7FB;
  --bg-gray:      #E8EDF5;
  --border:       #D0DCE8;
  --border-light: #E4EBF5;
  --green:        #27AE60;
  --shadow-sm:    0 2px 8px rgba(15,28,46,0.12);
  --shadow-md:    0 8px 24px rgba(15,28,46,0.18);
  --shadow-lg:    0 16px 48px rgba(15,28,46,0.25);
  --shadow-red:   0 4px 22px rgba(192,57,43,0.32);
  --transition:   all 0.26s cubic-bezier(0.4,0,0.2,1);
  --radius:       6px;
  --radius-lg:    14px;
  --max-w:        1360px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.78; color:var(--text-body);
  background:var(--bg-white);
}
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.22; color:var(--navy); margin-bottom:0.85rem; }
h1 { font-size:2.4rem; }
h2 { font-size:1.85rem; }
h3 { font-size:1.35rem; }
h4 { font-size:1.05rem; font-weight:600; }
p  { margin-bottom:1.1rem; color:var(--text-mid); line-height:1.85; }
a  { color:var(--navy-light); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--red); }
ul,ol { padding-left:1.5rem; margin-bottom:1.1rem; }
li { margin-bottom:0.45rem; color:var(--text-mid); }
strong { color:var(--text-body); font-weight:600; }
img { max-width:100%; height:auto; }

/* ── ANNOUNCEMENT STRIP ── */
.announce-bar {
  background:var(--red);
  padding:0.42rem 1.5rem;
  text-align:center;
  font-size:0.8rem;
  font-weight:600;
  color:#fff;
  letter-spacing:0.03em;
}
.announce-bar a { color:#fff; text-decoration:underline; }

/* ── TOP BAR ── */
.top-bar {
  background:var(--navy);
  padding:0.45rem 1.5rem;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.top-bar-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-size:0.8rem; color:var(--text-muted);
}
.top-bar a { color:var(--text-muted); transition:var(--transition); }
.top-bar a:hover { color:var(--red-light); }
.top-bar-contact { display:flex; gap:1.2rem; align-items:center; }

/* ── HEADER ── */
header {
  background:var(--navy-mid);
  padding:0 1.5rem;
  position:sticky; top:0; z-index:1000;
  border-bottom:2px solid var(--red);
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.header-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center;
  justify-content:space-between; gap:2rem; height:70px;
}
.logo-wrap { display:flex; align-items:center; gap:0.9rem; text-decoration:none; flex-shrink:0; }
.logo-icon { width:44px; height:44px; }
.logo-text { display:flex; flex-direction:column; }
.brand-name { font-size:1.1rem; font-weight:800; color:#fff; letter-spacing:0.04em; line-height:1.1; }
.brand-tag  { font-size:0.67rem; color:var(--text-muted); letter-spacing:0.06em; text-transform:uppercase; }

/* NAV */
.main-nav { display:flex; gap:0.2rem; align-items:center; flex:1; justify-content:center; }
.nav-item  { position:relative; }
.nav-link  {
  display:block; padding:0.55rem 0.9rem;
  color:var(--text-muted); font-size:0.875rem; font-weight:500;
  border-radius:var(--radius); transition:var(--transition);
  white-space:nowrap;
}
.nav-link:hover { color:#fff; background:rgba(255,255,255,0.08); }
.nav-dropdown {
  display:none; position:absolute; top:100%; left:0; min-width:200px;
  background:var(--navy-light); border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius); padding:0.5rem 0;
  box-shadow:var(--shadow-lg); z-index:100;
}
.nav-item:hover .nav-dropdown { display:block; }
.nav-dropdown a {
  display:block; padding:0.55rem 1rem;
  color:var(--text-muted); font-size:0.84rem;
  transition:var(--transition);
}
.nav-dropdown a:hover { color:#fff; background:rgba(255,255,255,0.08); }

/* Header CTA */
.header-cta { display:flex; gap:0.5rem; flex-shrink:0; }
.btn-call, .btn-wa {
  display:flex; align-items:center; gap:0.4rem;
  padding:0.5rem 0.85rem; border-radius:var(--radius);
  font-size:0.82rem; font-weight:600; transition:var(--transition);
  white-space:nowrap;
}
.btn-call { background:var(--red); color:#fff; }
.btn-call:hover { background:var(--red-dark); color:#fff; box-shadow:var(--shadow-red); }
.btn-wa   { background:#25D366; color:#fff; }
.btn-wa:hover { background:#1da851; color:#fff; }
.btn-icon { width:16px; height:16px; }

/* ── BREADCRUMB ── */
.breadcrumb {
  background:var(--bg-off);
  padding:0.65rem 1.5rem;
  border-bottom:1px solid var(--border);
}
.breadcrumb-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.82rem; color:var(--text-light);
}
.breadcrumb a { color:var(--text-light); }
.breadcrumb a:hover { color:var(--red); }
.breadcrumb strong { color:var(--text-body); }
.breadcrumb-sep { color:var(--text-light); }

/* ── PAGE BANNER / HERO ── */
.page-banner {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
  padding:3rem 1.5rem;
  border-bottom:3px solid var(--red);
}
.page-banner-inner {
  max-width:var(--max-w); margin:0 auto;
}
.sec-label {
  display:inline-block;
  background:var(--red-glow);
  border:1px solid var(--red-border);
  color:var(--red-light);
  padding:0.25rem 0.75rem;
  border-radius:50px;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:0.85rem;
}
.page-banner h1 { color:#fff; font-size:2.2rem; margin-bottom:0.6rem; }
.page-banner p  { color:var(--text-muted); margin:0; font-size:1.05rem; }

/* ── PRODUCT LAYOUT ── */
.product-detail-layout {
  max-width:var(--max-w); margin:0 auto;
  padding:2.5rem 1.5rem;
  display:grid;
  grid-template-columns:1fr 340px;
  gap:2.5rem;
  align-items:start;
}
.product-main {}
.product-sidebar {}

/* ── SIDEBAR ── */
.sidebar-card {
  background:var(--bg-off);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-bottom:1.2rem;
}
.sidebar-card h3 { font-size:1rem; margin-bottom:1rem; border-bottom:2px solid var(--red); padding-bottom:0.5rem; }
.cta-card { background:var(--navy); border:none; }
.cta-card h3 { color:#fff; border-color:var(--red-light); }
.cta-card p  { color:var(--text-muted); font-size:0.9rem; margin-bottom:1rem; }
.btn-primary {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  background:var(--red); color:#fff;
  padding:0.8rem 1.2rem;
  border-radius:var(--radius); font-weight:700; font-size:0.95rem;
  transition:var(--transition); width:100%; text-align:center;
  margin-bottom:0.6rem;
}
.btn-primary:hover { background:var(--red-dark); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-red); }
.btn-secondary {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  background:#25D366; color:#fff;
  padding:0.75rem 1.2rem;
  border-radius:var(--radius); font-weight:700; font-size:0.9rem;
  transition:var(--transition); width:100%; text-align:center;
}
.btn-secondary:hover { background:#1da851; color:#fff; }

/* ── CONTENT BLOCKS ── */
.content-block {
  background:var(--bg-white);
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  padding:2rem;
  margin-bottom:1.5rem;
  box-shadow:var(--shadow-sm);
}
.content-block h2 { font-size:1.5rem; border-bottom:2px solid var(--red); padding-bottom:0.5rem; margin-bottom:1.2rem; }
.content-block h3 { font-size:1.15rem; margin-top:1.3rem; color:var(--navy-light); }

/* Part badge */
.part-badge {
  display:inline-block;
  background:var(--navy);
  color:#fff;
  padding:0.35rem 1rem;
  border-radius:50px;
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.06em;
  margin-bottom:0.8rem;
}
.product-meta { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.2rem; }
.meta-tag {
  background:var(--bg-off);
  border:1px solid var(--border);
  padding:0.25rem 0.7rem;
  border-radius:50px;
  font-size:0.77rem;
  font-weight:600;
  color:var(--text-body);
}
.product-title-area { margin-bottom:1.5rem; }

/* ── SPEC TABLE ── */
.spec-table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:0.9rem; }
.spec-table th {
  background:var(--navy);
  color:#fff;
  padding:0.7rem 1rem;
  text-align:left;
  font-weight:600;
}
.spec-table td { padding:0.65rem 1rem; border-bottom:1px solid var(--border-light); }
.spec-table tr:hover td { background:var(--bg-off); }
.spec-table tr:last-child td { border-bottom:none; }

/* ── RELATED PARTS GRID ── */
.related-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:0.75rem;
  margin-top:1rem;
}
.related-card {
  background:var(--bg-off);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:0.9rem;
  text-align:center;
  transition:var(--transition);
}
.related-card:hover {
  border-color:var(--red);
  background:var(--red-glow);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.related-card .part-no  { font-size:0.82rem; font-weight:700; color:var(--navy); display:block; margin-bottom:0.2rem; }
.related-card .part-desc{ font-size:0.72rem; color:var(--text-light); }

/* ── FAQ ── */
.faq-item { border-bottom:1px solid var(--border-light); padding:1.2rem 0; }
.faq-item:last-child { border-bottom:none; }
.faq-q { font-weight:700; color:var(--navy); margin-bottom:0.5rem; font-size:1rem; }
.faq-a { color:var(--text-mid); font-size:0.92rem; margin:0; }

/* ── TRUST BADGES ── */
.trust-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin:1rem 0;
}
.trust-item {
  text-align:center;
  padding:1rem;
  background:var(--bg-off);
  border-radius:var(--radius);
  border:1px solid var(--border-light);
}
.trust-icon { font-size:2rem; margin-bottom:0.4rem; display:block; }
.trust-item strong { display:block; font-size:0.85rem; color:var(--navy); }
.trust-item span { font-size:0.75rem; color:var(--text-light); }

/* ── SVG ILLUSTRATION ── */
.part-visual {
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--navy);
  border:1px solid var(--navy-light);
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
}

/* ── CONTACT BLOCK ── */
.contact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.contact-item {
  background:var(--bg-off);
  border-radius:var(--radius);
  border:1px solid var(--border-light);
  padding:1.1rem;
}
.contact-item h4 { font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--red); margin-bottom:0.4rem; }
.contact-item p  { font-size:0.9rem; margin:0; color:var(--text-body); }

/* ── FOOTER ── */
footer {
  background:var(--navy);
  color:var(--text-muted);
  padding:3rem 1.5rem 2rem;
  margin-top:3rem;
  border-top:3px solid var(--red);
}
.footer-inner {
  max-width:var(--max-w); margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2rem;
  margin-bottom:2rem;
}
.footer-brand-name { color:#fff; font-size:1.1rem; font-weight:800; margin-bottom:0.6rem; }
.footer-about { font-size:0.83rem; line-height:1.65; color:var(--text-muted); margin-bottom:1rem; }
.footer-col h4 { color:#fff; font-size:0.85rem; font-weight:700; margin-bottom:0.8rem; text-transform:uppercase; letter-spacing:0.06em; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom:0.35rem; }
.footer-col a  { font-size:0.83rem; color:var(--text-muted); transition:var(--transition); }
.footer-col a:hover { color:var(--red-light); }
.footer-bottom {
  max-width:var(--max-w); margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.78rem; color:var(--text-muted);
  flex-wrap:wrap; gap:0.5rem;
}
.footer-bottom a { color:var(--text-muted); }
.footer-bottom a:hover { color:var(--red-light); }

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .product-detail-layout { grid-template-columns:1fr; }
  .product-sidebar { order:-1; }
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  h1 { font-size:1.8rem; }
  h2 { font-size:1.45rem; }
  .header-inner { height:auto; padding:0.8rem 0; flex-wrap:wrap; gap:0.8rem; }
  .main-nav { display:none; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .page-banner { padding:2rem 1.5rem; }
  .page-banner h1 { font-size:1.7rem; }
  .contact-grid { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .trust-grid { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── SVG ANIMATIONS ── */
@keyframes bounce-y {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
@keyframes compress {
  0%,100% { transform:scaleY(1); }
  50%      { transform:scaleY(0.72); }
}
@keyframes rotate-slow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes pulse-ring {
  0%   { r:20; opacity:1; }
  100% { r:45; opacity:0; }
}
@keyframes slide-lr {
  0%,100% { transform:translateX(0); }
  50%      { transform:translateX(18px); }
}
@keyframes drill-up {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-10px); }
}