/* ═══════════════════════════════════════════════════════
   ÖZER CNC — Ürünler Sayfası  |  Beyaz & Kırmızı
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --red:       #C8102E;
  --red2:      #E01030;
  --red-dark:  #A00D25;
  --red-light: #FDEEF1;
  --border:    rgba(200,16,46,0.15);
  --borderG:   rgba(0,0,0,0.08);
  --bg:        #FFFFFF;
  --bg1:       #F7F8FA;
  --bg2:       #F0F2F5;
  --bg3:       #E8EAED;
  --dark:      #0D0F14;
  --dark2:     #1A1D27;
  --text:      #1A1D27;
  --text2:     #4B5563;
  --muted:     #9CA3AF;
  --r:         14px;
  --r-sm:      8px;
  --shadow:    0 4px 24px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-red:0 8px 32px rgba(200,16,46,0.20);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; line-height:1.7; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--red); border-radius:3px; }

/* ── Navbar ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--borderG), 0 4px 20px rgba(0,0,0,0.06);
  padding:14px 5%;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-family:'Rajdhani',sans-serif; font-size:1.5rem; font-weight:700;
  color:var(--dark); text-decoration:none; letter-spacing:1px;
  display:flex; align-items:center; gap:10px;
}
.nav-logo-icon { width:36px; height:36px; background:var(--red); border-radius:6px; display:flex; align-items:center; justify-content:center; }
.nav-logo-icon svg { fill:#fff; width:20px; height:20px; }
.nav-logo span { color:var(--red); }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { color:var(--text2); text-decoration:none; font-size:.9rem; font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--red); }
.nav-cta {
  background:var(--red) !important; color:#fff !important;
  padding:8px 20px; border-radius:var(--r-sm);
  font-weight:600 !important; transition:background .2s !important;
}
.nav-cta:hover { background:var(--red2) !important; }
.nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-burger span { display:block; width:24px; height:2px; background:var(--dark); border-radius:2px; transition:transform .3s, opacity .3s; }

/* ── Page hero ── */
.page-hero {
  padding:130px 5% 64px;
  background:var(--dark);
  position:relative; overflow:hidden;
}
.page-hero::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 30% 50%, rgba(200,16,46,0.18) 0%, transparent 70%);
  pointer-events:none;
}
.page-hero-grid {
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(200,16,46,0.06) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(200,16,46,0.06) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.page-hero-content { position:relative; z-index:1; }
.page-label { font-size:.72rem; font-weight:700; letter-spacing:3px; color:var(--red2); text-transform:uppercase; margin-bottom:12px; }
.page-title { font-family:'Rajdhani',sans-serif; font-size:clamp(2.4rem,6vw,4rem); font-weight:700; color:#fff; line-height:1.1; margin-bottom:12px; }
.page-sub { font-size:1rem; color:rgba(255,255,255,.55); max-width:500px; line-height:1.7; }

/* ── Filter bar ── */
.filter-bar {
  padding:22px 5%;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--borderG);
  position:sticky; top:64px; z-index:100;
  background:rgba(255,255,255,0.97); backdrop-filter:blur(20px);
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
}
.filter-btn {
  padding:8px 18px; border-radius:50px;
  border:1.5px solid var(--borderG);
  background:var(--bg1); color:var(--text2);
  font-size:.82rem; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all .2s; letter-spacing:.3px;
}
.filter-btn:hover { border-color:var(--red); color:var(--red); }
.filter-btn.active { background:var(--red); border-color:var(--red); color:#fff; }
.filter-count { margin-left:auto; font-size:.82rem; color:var(--muted); }

/* ── Products grid ── */
.products-section { padding:52px 5% 72px; }
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:24px;
}

/* Card */
.p-card {
  background:#fff; border:1.5px solid var(--borderG);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .25s;
  cursor:pointer; display:flex; flex-direction:column;
}
.p-card:hover { border-color:var(--red); box-shadow:var(--shadow-md); transform:translateY(-5px); }

/* Product image in card */
.p-card-img {
  width:100%; height:200px; overflow:hidden;
  background:var(--bg1);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.p-card-img img {
  width:100%; height:100%; object-fit:contain;
  padding:16px; transition:transform .4s ease;
}
.p-card:hover .p-card-img img { transform:scale(1.06); }
.p-card-cat-tag {
  position:absolute; top:10px; left:10px;
  background:var(--red); color:#fff;
  font-size:.65rem; font-weight:700; letter-spacing:1.5px;
  padding:4px 10px; border-radius:4px; text-transform:uppercase;
}

.p-card-header {
  padding:22px 24px 0;
  display:flex; align-items:flex-start; gap:14px;
}
.p-card-icon {
  width:44px; height:44px; min-width:44px; border-radius:10px;
  background:var(--red-light); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
.p-card-cat { font-size:.68rem; font-weight:700; letter-spacing:2px; color:var(--red); text-transform:uppercase; margin-bottom:4px; }
.p-card-name { font-family:'Rajdhani',sans-serif; font-size:1.3rem; font-weight:700; color:var(--dark); line-height:1.2; }
.p-card-body { padding:14px 24px; flex:1; }
.p-card-short { font-size:.85rem; color:var(--text2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.p-card-specs { padding:0 24px; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table tr { border-bottom:1px solid var(--borderG); }
.spec-table tr:last-child { border-bottom:none; }
.spec-table td { padding:7px 0; font-size:.78rem; }
.spec-table td:first-child { color:var(--muted); padding-right:12px; white-space:nowrap; }
.spec-table td:last-child { color:var(--dark); font-weight:600; text-align:right; }
.p-card-footer { padding:18px 24px 22px; }
.p-detail-btn {
  width:100%; padding:11px;
  background:var(--red-light); border:1.5px solid var(--border);
  border-radius:var(--r-sm); color:var(--red);
  font-size:.85rem; font-weight:700; cursor:pointer;
  font-family:inherit; transition:all .2s;
}
.p-detail-btn:hover { background:var(--red); color:#fff; }

/* ── Modal ── */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal {
  background:#fff; border:1.5px solid var(--borderG);
  border-radius:var(--r); width:100%; max-width:740px;
  max-height:90vh; overflow-y:auto;
  transform:translateY(24px); transition:transform .3s;
  box-shadow:var(--shadow-md);
}
.modal-overlay.open .modal { transform:translateY(0); }
.modal-header {
  padding:28px 32px 22px;
  border-bottom:1px solid var(--borderG);
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.modal-cat { font-size:.68rem; font-weight:700; letter-spacing:2px; color:var(--red); text-transform:uppercase; margin-bottom:8px; }
.modal-name { font-family:'Rajdhani',sans-serif; font-size:1.9rem; font-weight:700; color:var(--dark); line-height:1.15; }
.modal-close {
  width:36px; height:36px; border-radius:8px;
  background:var(--bg1); border:1.5px solid var(--borderG);
  color:var(--muted); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s, border-color .2s; flex-shrink:0;
}
.modal-close:hover { color:var(--dark); border-color:var(--red); }
.modal-img {
  width:100%; height:220px; overflow:hidden;
  background:var(--bg1); display:flex; align-items:center; justify-content:center;
}
.modal-img img { width:100%; height:100%; object-fit:contain; padding:20px; }
.modal-body { padding:24px 32px; }
.modal-desc { color:var(--text2); line-height:1.75; font-size:.95rem; margin-bottom:26px; }
.modal-specs-title { font-size:.72rem; font-weight:700; letter-spacing:2px; color:var(--red); text-transform:uppercase; margin-bottom:14px; }
.modal-specs-table { width:100%; border-collapse:collapse; }
.modal-specs-table tr { border-bottom:1px solid var(--borderG); }
.modal-specs-table tr:last-child { border-bottom:none; }
.modal-specs-table td { padding:10px 0; font-size:.875rem; }
.modal-specs-table td:first-child { color:var(--muted); width:45%; }
.modal-specs-table td:last-child { color:var(--dark); font-weight:600; }
.modal-footer { padding:18px 32px 28px; border-top:1px solid var(--borderG); }
.modal-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--red); color:#fff; text-decoration:none;
  padding:12px 28px; border-radius:var(--r-sm);
  font-weight:700; font-size:.9rem;
  transition:background .2s, transform .15s;
  box-shadow:var(--shadow-red);
}
.modal-cta:hover { background:var(--red2); transform:translateY(-1px); }

/* ── Empty / Skeleton ── */
.empty-state { grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--muted); }
.empty-state h3 { font-family:'Rajdhani',sans-serif; font-size:1.4rem; color:var(--dark); margin-bottom:8px; }
.skeleton { background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Footer ── */
footer { background:var(--dark); border-top:1px solid rgba(255,255,255,0.06); padding:40px 5% 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.xertexa-credit { font-size:.76rem; color:rgba(255,255,255,.4); display:flex; align-items:center; gap:8px; }
.xertexa-credit a { color:rgba(255,255,255,.55); text-decoration:none; }
.xertexa-credit a:hover { color:#fff; }
.footer-logo { font-family:'Rajdhani',sans-serif; font-size:1.2rem; font-weight:700; color:#fff; text-decoration:none; }
.footer-logo span { color:var(--red2); }
footer p { font-size:.8rem; color:rgba(255,255,255,.4); }
footer a { color:var(--red2); text-decoration:none; }

.whatsapp-fab { position:fixed; bottom:28px; right:28px; z-index:500; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1.6rem; box-shadow:0 4px 20px rgba(37,211,102,0.4); transition:transform .2s; }
.whatsapp-fab:hover { transform:scale(1.1); }

@media(max-width:768px) {
  .filter-bar { top:0; }
  .products-grid { grid-template-columns:1fr; }
  .modal { margin:0 8px; }
  .modal-header, .modal-body, .modal-footer { padding-left:20px; padding-right:20px; }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; right:0;
    background:rgba(255,255,255,0.98); backdrop-filter:blur(20px);
    padding:80px 5% 40px; gap:24px;
  }
}