body {
  background: #f4f6fa;
  color: #1a202c;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
  text-align: center;
}

.site-logo {
  max-height: 80px;
}
.main-nav {
  margin-top: 10px;
}
.main-nav a {
  color: #0074D9;
  padding: 8px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background .2s;
}
.main-nav a.active, .main-nav a:hover {
  background: #E0F2FE;
}
main#pc-builder {
  max-width: 900px;
  margin: 20px auto;
  padding: 24px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
section {
  margin-bottom: 28px;
}
.hidden { display: none; }
/* Modal və animasiyalar əlavə oluna bilər */
/* Case bölməsi üçün */
.case-selector {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 24px;
  text-align: center;
  margin-bottom: 30px;
  animation: fadeIn 0.7s;
}


:root{
  --pc-slot-w: 280px;   /* kartın içində görünən şəkil sahəsi */
  --pc-slot-h: 360px;
}


.case-image {
  width: var(--pc-slot-w);
  height: var(--pc-slot-h);
  padding: 14px;
  object-fit: contain;
  background: transparent; 
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin: 18px 0;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  cursor: pointer;
}





.case-image:hover {
  transform: scale(1.08);
}
.case-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 14px;
}
.case-price {
  color: #1e40af;
  font-size: 18px;
  margin: 6px 0;
}
.arrow-btn {
  font-size: 26px;
  padding: 7px 14px;
  border: none;
  background: #f1f5f9;
  border-radius: 50%;
  margin: 0 16px;
  cursor: pointer;
  transition: background .18s;
}
.arrow-btn:hover {
  background: #3b82f6;
  color: #fff;
}


.cpu-selector {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 24px;
  text-align: center;
  margin-bottom: 30px;
  animation: fadeIn 0.7s;
}
.cpu-selector .case-image {
  width: var(--pc-slot-w);
  height: var(--pc-slot-h);
  padding: 14px;
  object-fit: contain;
  background: transparent; 
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin: 18px 0;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  cursor: pointer;
}
.cpu-selector .case-image:hover {
  transform: scale(1.08);
}
.cpu-selector .case-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 14px;
}
.cpu-selector .case-price {
  color: #1e40af;
  font-size: 18px;
  margin: 6px 0;
}


.plata-selector {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 24px;
  text-align: center;
  margin-bottom: 30px;
  animation: fadeIn 0.7s;
}
.plata-selector .case-image {
  width: var(--pc-slot-w);
  height: var(--pc-slot-h);
  padding: 14px;
  object-fit: contain;
  background: transparent; 
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin: 18px 0;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  cursor: pointer;
}
.plata-selector .case-image:hover {
  transform: scale(1.08);
}
.plata-selector .case-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 14px;
}
.plata-selector .case-price {
  color: #1e40af;
  font-size: 18px;
  margin: 6px 0;
}


.ram-selector {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 24px;
  text-align: center;
  margin-bottom: 30px;
  animation: fadeIn 0.7s;
}
.ram-selector .case-image {
  width: var(--pc-slot-w);
  height: var(--pc-slot-h);
  padding: 14px;
  object-fit: contain;
  background: transparent; 
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin: 18px 0;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  cursor: pointer;
}
.ram-selector .case-image:hover {
  transform: scale(1.08);
}
.ram-selector .case-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 14px;
}
.ram-selector .case-price {
  color: #1e40af;
  font-size: 18px;
  margin: 6px 0;
}


.storage-selector {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 24px;
  text-align: center;
  margin-bottom: 30px;
  animation: fadeIn 0.7s;
}
.storage-selector .case-image {
  width: var(--pc-slot-w);
  height: var(--pc-slot-h);
  padding: 14px;
  object-fit: contain;
  background: transparent; 
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin: 18px 0;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  cursor: pointer;
}
.storage-selector .case-image:hover {
  transform: scale(1.08);
}
.storage-selector .case-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 14px;
}
.storage-selector .case-price {
  color: #1e40af;
  font-size: 18px;
  margin: 6px 0;
}


.gpu-selector {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 24px;
  text-align: center;
  margin-bottom: 30px;
  animation: fadeIn 0.7s;
}
.gpu-selector .case-image {
  width: var(--pc-slot-w);
  height: var(--pc-slot-h);
  padding: 14px;
  object-fit: contain;
  background: transparent; 
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin: 18px 0;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  cursor: pointer;
}
.gpu-selector .case-image:hover {
  transform: scale(1.08);
}
.gpu-selector .case-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 14px;
}
.gpu-selector .case-price {
  color: #1e40af;
  font-size: 18px;
  margin: 6px 0;
}


.psu-selector {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 24px;
  text-align: center;
  margin-bottom: 30px;
  animation: fadeIn 0.7s;
}
.psu-selector .case-image {
  width: var(--pc-slot-w);
  height: var(--pc-slot-h);
  padding: 14px;
  object-fit: contain;
  background: transparent; 
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin: 18px 0;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  cursor: pointer;
}
.psu-selector .case-image:hover {
  transform: scale(1.08);
}
.psu-selector .case-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 14px;
}
.psu-selector .case-price {
  color: #1e40af;
  font-size: 18px;
  margin: 6px 0;
}


.cooler-selector {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 24px;
  text-align: center;
  margin-bottom: 30px;
  animation: fadeIn 0.7s;
}
.cooler-selector .case-image {
width: var(--pc-slot-w);
  height: var(--pc-slot-h);
  padding: 14px;
  object-fit: contain;
  background: transparent; 
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin: 18px 0;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  cursor: pointer;
}
.cooler-selector .case-image:hover {
  transform: scale(1.08);
}
.cooler-selector .case-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 14px;
}
.cooler-selector .case-price {
  color: #1e40af;
  font-size: 18px;
  margin: 6px 0;
}



.monitor-selector {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 24px;
  text-align: center;
  margin-bottom: 30px;
  animation: fadeIn 0.7s;
}
.monitor-selector .case-image {
  width: var(--pc-slot-w);
  height: var(--pc-slot-h);
  padding: 14px;
  object-fit: contain;
  background: transparent; 
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin: 18px 0;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s;
  cursor: pointer;
}
.monitor-selector .case-image:hover {
  transform: scale(1.08);
}
.monitor-selector .case-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 14px;
}
.monitor-selector .case-price {
  color: #1e40af;
  font-size: 18px;
  margin: 6px 0;
}






.faded {
  opacity: 0.5;
  filter: grayscale(0.6);
  
}
.warn {
  color: #dc2626;
  background: #fee2e2;
  padding: 8px 12px;
  margin: 14px auto 0 auto;
  border-radius: 8px;
  max-width: 300px;
  font-size: 15px;
  font-weight: 500;
  animation: fadeIn 0.7s;
}



.pay-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.toggle-btn {
  background: #f6f5f4;
  color: #223;
  border-color: #5e5d5c;
  border: 1px solid #cfd6e2;
  border-radius: 6px;
  padding: 7px 18px;
  font-size: 16px;
  margin-right: 3px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.toggle-btn.active {
  background: #2563eb;
  color: #fff;
  font-weight: bold;
}
.total-block select {
  margin-left: 8px;
  padding: 3px 10px;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid #cfd6e2;
}



.whatsapp-form {
  background: #f9fafb;
  border-radius: 10px;
  box-shadow: 0 1px 7px #0001;
  padding: 20px 20px 16px;
  margin-top: 24px;
  width: 100%;
  max-width: 340px;
}
.whatsapp-form h3 {
  margin-top: 0;
  font-size: 20px;
  margin-bottom: 12px;
}
.whatsapp-form input,
.whatsapp-form select {
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 10px;
  font-size: 16px;
  border: 1px solid #cfd6e2;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  color: #000;
}
.whatsapp-btn {
  width: 100%;
  background: #25d366;
  display: inline-flex;
  color: #fff;
  align-items: center;
  border: none;
  justify-content: center;
  border-radius: 6px;
  font-size: 19px;
  padding: 10px 0;
  cursor: pointer;
  font-weight: bold;
  transition: background .2s;
}
.whatsapp-btn:hover { background: #128C7E; }




/* info popupu */
#modal-backdrop {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  background: #111a; z-index: 2000; transition: opacity .2s;
}
#modal-info {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  min-width: 320px; max-width: 95vw; max-height: 90vh;
  background: var(--card); border-radius: 16px; box-shadow: 0 8px 48px #0005;
  z-index: 2100; padding: 28px 26px 18px 26px; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  opacity: 1; transition: opacity .2s;
}
#modal-backdrop.hidden, #modal-info.hidden { display: none; }
#modal-info img { max-width: 120px; border-radius: 9px; margin-bottom: 14px; }
#modal-info h2 { margin: 0 0 10px 0; font-size: 22px; }
#modal-info .modal-price { color: #2563eb; font-size: 20px; margin: 7px 0 13px 0; }
#modal-info .modal-desc { font-size: 16px; color: var(--text); margin-bottom: 12px; }
#modal-info .modal-close { margin-top: 18px; padding: 7px 20px; background: #2563eb; color: #fff; border: none; border-radius: 7px; cursor: pointer; font-size: 16px; }


#modal-info img {
  max-width: 330px;
  max-height: 300px;
  width: auto;
  height: auto;
  border-radius: 9px;
  margin-bottom: 14px;
  box-shadow: 0 3px 22px #0002;
  cursor: pointer;
  transition: transform .15s;
}
#modal-info img:active {
  transform: scale(1.03);
}


#build-slider {
  margin: 18px 0 14px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.build-slider-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 2px;
  text-align: left;
  width: 90%;
}
.build-slider-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.build-slider-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .14s;
  padding: 0 3px;
}
.build-slider-item img {
  width: 120px;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 12px #0002;
  background: #fff;
  margin-bottom: 5px;
  border: 2px solid #f4f4f8;
  transition: border .14s, box-shadow .14s;
}
.build-slider-item:hover img {
  border: 2px solid #2563eb;
  box-shadow: 0 4px 22px #2563eb22;
  transform: scale(1.04);
}
.build-slider-label {
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  margin-top: 2px;
  margin-bottom: 3px;
}
.slider-arrow {
  font-size: 2.2rem;
  color: #3aaef7;
  cursor: pointer;
  user-select: none;
  padding: 0 16px;
  font-weight: bold;
  transition: color .14s;
}
.slider-arrow:hover { color: #2563eb; }


.laptop-card {
  border: 2px solid #222;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 14px #0001;
  width: 200px;
  padding: 15px 9px 13px 9px;
  margin: 10px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow .15s, border-color .18s;
  display: inline-block;
}
.laptop-card img {
  width: 135px;
  height: 110px;
  object-fit: contain;
  margin-bottom: 7px;
}
.laptop-title {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.laptop-price {
  color: #2563eb;
  font-weight: bold;
  font-size: 1.05rem;
}
#noutbuklar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
  align-items: stretch;
}



#noutbuk-modal-backdrop {
  position: fixed; left:0; top:0; width:100vw; height:100vh;
  background: #111a; z-index: 2000; transition: opacity .2s;
}
#noutbuk-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #fff; border-radius: 16px; box-shadow: 0 8px 48px #0005;
  z-index: 2100; min-width: 320px; max-width: 95vw; max-height: 90vh;
  padding: 36px 28px 20px 28px; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
}
#noutbuk-modal.hidden, #noutbuk-modal-backdrop.hidden { display: none; }
#noutbuk-modal img { max-width: 280px; max-height: 200px; border-radius: 9px; margin-bottom: 18px; }
#noutbuk-modal h2 { margin-bottom: 12px; font-size: 22px; }
#noutbuk-modal-info { font-size: 17px; color: #243; margin-bottom: 12px; text-align:left;}
.modal-close-btn {
  padding: 7px 22px; background: #2563eb; color: #fff; border: none; border-radius: 7px;
  cursor: pointer; font-size: 16px; margin-top: 12px;
}



/* Noutbuk qalereya (mövcud #noutbuk-modal strukturuna uyğun) */
#noutbuk-thumbs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
#noutbuk-thumbs button {
  width: 64px; height: 54px; border-radius: 8px; border: 2px solid transparent;
  background: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px #0001; padding: 0;
}
#noutbuk-thumbs button.active { border-color: #38bdf8; }
#noutbuk-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; }



#img-zoom-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
}
#img-zoom-backdrop.hidden { display: none; }
#img-zoom-main {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.5);
  cursor: zoom-out;
}



#noutbuk-modal img#noutbuk-modal-img {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}


#monobloklar-list{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:flex-start; align-items:stretch;
}


/* Sistem blokları siyahısı — noutbuklar/monobloklar ilə eyni grid */
#sistem-list{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:flex-start;
  align-items:stretch;
}

/* ============= Sistem bloku modalı (noutbuk modalı ilə eyni) ============= */
#sistem-modal-backdrop {
  position: fixed; left:0; top:0; width:100vw; height:100vh;
  background: #111a; z-index: 2000; transition: opacity .2s;
}
#sistem-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #fff; border-radius: 16px; box-shadow: 0 8px 48px #0005;
  z-index: 2100; min-width: 320px; max-width: 95vw; max-height: 90vh;
  padding: 36px 28px 20px 28px; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
}
#sistem-modal.hidden, #sistem-modal-backdrop.hidden { display: none; }

#sistem-modal img#sistem-modal-img {
  max-width: 280px; max-height: 200px; border-radius: 9px; margin-bottom: 18px;
  cursor: zoom-in;
}
#sistem-modal h2 { margin-bottom: 12px; font-size: 22px; }
#sistem-modal-info { font-size: 17px; color: #243; margin-bottom: 12px; text-align:left; }
#sistem-modal .modal-close-btn {
  padding: 7px 22px; background: #2563eb; color: #fff; border: none; border-radius: 7px;
  cursor: pointer; font-size: 16px; margin-top: 12px;
}

/* Sistem thumbs – noutbukla eyni görünüş */
#sistem-thumbs {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
#sistem-thumbs button {
  width: 64px; height: 54px; border-radius: 8px; border: 2px solid transparent;
  background:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow: 0 2px 10px #0001; padding:0;
}
#sistem-thumbs button.active { border-color:#38bdf8; }
#sistem-thumbs img { max-width:100%; max-height:100%; object-fit:contain; }

/* Sistem kartları artıq noutbuk kartı sinfini istifadə edir (#sistem-list grid var) */


/* ===============================
   THEME TOKENS (light/dark)
=============================== */
:root{
  /* brand & ui */
  --brand: #2563eb;
  --brand-600:#1d4ed8;
  --text: #0f172a;
  --muted:#475569;
  --bg:#f3f6fb;
  --card: #ffffff;
  --border:#dbe2ef;

  /* glass */
  --glass: rgba(255,255,255,0.65);
  --glass-border: rgba(255,255,255,0.5);
  --shadow: 0 8px 28px rgba(15,23,42,0.08);

  /* typography scale */
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px;
  --fs-20:20px; --fs-24:24px; --fs-32:32px;

  /* layout */
  --radius:12px;
  --gap:24px;

  /* breakpoints */
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;
}

html[data-theme="dark"]{
  --brand:#60a5fa;
  --brand-600:#3b82f6;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --bg:#0b1220;
  --card:#111827;
  --border:#0049af;
  --glass: rgba(17,25,40,0.6);
  --glass-border: rgba(148,163,184,0.22);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* Global overrides */
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings tidy */
h1,h2,h3{ color: var(--text); margin: 0 0 8px 0; }
h1{ font-size: var(--fs-32); font-weight: 800; }
h2{ font-size: var(--fs-24); font-weight: 800; }
h3{ font-size: var(--fs-20); font-weight: 700; }

/* ===============================
   Sticky Header + Glass
=============================== */
.site-header{
  position: sticky; top:0; z-index: 1000;
  background: var(--glass);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-bottom: 1px solid var(--glass-border);
}
.site-logo{ max-height:72px; }
.main-nav{ margin: 8px 0; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.main-nav a{
  color: var(--brand-600);
  border:1px solid var(--border);
  padding:8px 14px; border-radius:10px; font-weight:600;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  transition: all .18s;
}
.main-nav a:hover{ background: color-mix(in srgb, var(--brand) 12%, var(--card)); }
.main-nav a.active{
  background: var(--brand); color:#fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(37,99,235,0.25);
}

/* Theme toggle */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  margin: 8px auto 10px; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border); background: var(--card); color: var(--text);
  cursor: pointer; transition: all .18s;
}
.theme-toggle:hover{ border-color: var(--brand); color: var(--brand); }

/* Builder container (glass) */
main#pc-builder{
  background: var(--glass);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow);
  border-radius: 16px;
}

/* ===============================
   Card Glass on product cards
=============================== */
.laptop-card{
  width: 200px;
  border:1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow);
  padding: 14px 10px; margin: 6px;
  transition: transform .14s, box-shadow .18s, border-color .18s;
}
.laptop-card:hover{
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(37,99,235,0.22);
}
.laptop-title{ font-feature-settings: "tnum" on, "lnum" on; }
.laptop-price{ color: var(--brand); }

/* Lists (noutbuk, monoblok, sistem) */
#noutbuklar-list, #monobloklar-list, #sistem-list{
  display:flex; flex-wrap:wrap; gap: var(--gap); align-items:stretch;
}

/* ===============================
   Modals (noutbuk & sistem) glass
=============================== */
#noutbuk-modal, #sistem-modal{
  background: var(--glass);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow);
}
#noutbuk-modal h2, #sistem-modal h2{ font-weight:800; }
.modal-close-btn{
  background: var(--brand);
}
#noutbuk-modal-info, #sistem-modal-info{ color: var(--text); }

/* ===============================
   Payment block & WhatsApp form tune
=============================== */
.total-block{
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border:1px solid var(--glass-border);
  border-radius: 12px; padding: 14px;
  box-shadow: var(--shadow);
}
.toggle-btn{  background: color-mix(in srgb, var(--card) 92%, transparent); }
.toggle-btn.active{ background: var(--brand); }

/* WhatsApp */
.whatsapp-form{
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border:1px solid var(--glass-border);
}

/* ===============================
   Skeleton loading
=============================== */
@keyframes shimmer{
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}
.skel-row{
  display:flex; flex-wrap:wrap; gap: var(--gap);
}
.skeleton-card{
  width:200px; border-radius: var(--radius); padding: 12px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--card) 90%, transparent) 0%,
    color-mix(in srgb, var(--card) 96%, transparent) 50%,
    color-mix(in srgb, var(--card) 90%, transparent) 100%);
  background-size:200% 100%;
  animation: shimmer 1.2s infinite linear;
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow);
}
.skel-img{ width: 135px; height: 110px; border-radius: 10px; margin: 6px auto 10px; }
.skel-title{ height: 14px; border-radius: 6px; margin: 6px 0; }
.skel-price{ height: 16px; border-radius: 6px; width: 70%; }

/* ===============================
   Responsive (columns feel)
=============================== */
@media (max-width: 1280px){
  .laptop-card{ width: 19.2vw; max-width:230px; min-width:180px; }
}
@media (max-width: 1024px){
  .laptop-card{ width: 23.5vw; max-width:220px; min-width:170px; }
}
@media (max-width: 768px){
  .laptop-card{ width: 30.5vw; max-width:210px; min-width:160px; }
  .site-logo{ max-height:64px; }
}
@media (max-width: 480px){
  .laptop-card{ width: calc(50% - 10px); min-width: 150px; }
  .main-nav{ gap:6px; }
}

/* Accessibility focus ring */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible{
  outline: 2px solid var(--brand); outline-offset: 2px;
}

:root[data-theme="dark"] .model-desc{
         
  color: #e5e7eb;            
  
}

/* ---- Dark mode üçün toggle düymələri daha oxunaqlı olsun ---- */
:root[data-theme="dark"] .toggle-btn{
  background: #1f2937;       /* daha açıq tünd boz */
  color: #e5e7eb;            /* açıq mətn */
  border-color: #374151;
}

:root[data-theme="dark"] .toggle-btn:hover{
  background: #273244;
  color: #ffffff;
}

:root[data-theme="dark"] .toggle-btn.active{
  background: #2563eb;       /* aktiv – mavi */
  color: #fff;
  border-color: #2563eb;
}


/* ===== Dark mode kontrast yaması — qiymət və aylıq ödəniş ===== */

/* Monitor (və ümumi selectorlar) içində "Qiymət: …" mətni */
:root[data-theme="dark"] .case-price,
:root[data-theme="dark"] .monitor-selector .case-price {
  color: #93c5fd;            /* açıq mavi – qaranlıqda yaxşı oxunur */
}

/* Kart adları da bir az açıq olsun */
:root[data-theme="dark"] .case-name, 
:root[data-theme="dark"] .monitor-selector .case-name {
  color: #e5e7eb;
}

/* "Aylıq ödəniş" mətni JS-də inline #6d28d9 ilə gəlir.
   JS-ə toxunmadan burada rəngi artırırıq. */
:root[data-theme="dark"] .total-block span[style*="#6d28d9"] {
  color: #c4b5fd !important; /* daha açıq bənövşəyi */
}
:root[data-theme="dark"] .total-block span[style*="#6d28d9"] b {
  color: #ffffff !important; /* məbləği daha parlaq göstər */
}


/* ===========================
   Arrow buttons – light & dark
   =========================== */

/* Baza üslub – hər iki tema üçün */
.arrow-btn{
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 22px;              /* ⇦ / ⇨ oxları üçün */
  line-height: 1;
  border: 1px solid #cbd5e1;    /* light default border */
  background: #f3f6fb;          /* light default surface */
  color: #1f2937;               /* ox rəngi */
  cursor: pointer;
  transition:
    transform .12s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
  box-shadow: 0 2px 6px rgba(2, 8, 23, .08);
  user-select: none;
}
.arrow-btn:hover{
  transform: translateY(-1px);
  background: #e9f2ff;
  border-color: #60a5fa;
  color: #1d4ed8;
}
.arrow-btn:active{
  transform: scale(.96);
}

/* Dark theme – neon mavi glow */
[data-theme="dark"] .arrow-btn{
  background: #0b1220;
  border-color: #1f2a44;
  color: #cfe3ff;
  box-shadow:
    0 0 0 2px #0b1220,                            /* kontur */
    0 0 0 3px rgba(56, 189, 248, .22),            /* xarici halo */
    inset 0 0 12px rgba(59, 130, 246, .25);       /* iç işıq */
}
[data-theme="dark"] .arrow-btn:hover{
  background: #0f1a33;
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow:
    0 0 0 2px #0f1a33,
    0 0 12px 3px rgba(56, 189, 248, .55),
    inset 0 0 14px rgba(59, 130, 246, .45);
}
[data-theme="dark"] .arrow-btn:active{
  transform: scale(.96);
  box-shadow:
    0 0 0 2px #0f1a33,
    0 0 18px 6px rgba(56, 189, 248, .7),
    inset 0 0 18px rgba(59, 130, 246, .6);
}

/* Accessibility: klaviatura fokusu üçün aydın halqa */
.arrow-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px #60a5fa;
}
[data-theme="dark"] .arrow-btn:focus-visible{
  box-shadow:
    0 0 0 3px #0b1220,
    0 0 0 6px rgba(56, 189, 248, .75);
}


/* WhatsApp QR modal */
#waqr-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 5000;
}
#waqr-modal.hidden, #waqr-backdrop.hidden { display: none; }

#waqr-modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  z-index: 5100;
}

.waqr-box {
  background: var(--card-bg, #0f172a);
  color: var(--text, #e5e7eb);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  padding: 22px;
  width: 320px;
  text-align: center;
}
.waqr-box #waqr-code canvas, .waqr-box #waqr-code img { width: 230px; height: 230px; }
.waqr-close{
  margin-top: 12px;
  background:#2563eb; color:#fff; border:0; border-radius:8px;
  padding:8px 16px; cursor:pointer;
}


/* WhatsApp QR modal */
#waqr-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:5000;
}
#waqr-modal{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5100;
}
#waqr-modal .waqr-card{
  background: var(--glass, #111); /* dark/light üçün uyğundur */
  color: var(--text, #fff);
  border:1px solid var(--glass-border, #2b2f3a);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  padding:18px; border-radius:14px; box-shadow:0 10px 36px rgba(0,0,0,.35);
  text-align:center; min-width:260px;
}
#waqr-img{ width:240px; height:240px; border-radius:10px; display:block; margin:8px auto; background:#fff; }
#waqr-backdrop.hidden, #waqr-modal.hidden{ display:none; }




/* yalnız desktopda görünənlər üçün */
.only-desktop { display:inline-flex; }
@media (hover:none), (pointer:coarse), (max-width: 820px) {
  .only-desktop { display:none !important; }
}

/* QR düyməsi vizual olaraq WhatsApp-dan fərqlənsin */
.whatsapp-btn.qr {
  background:#204498;      /* dark navy */
  border:1px solid #334155; /* slate */
  color:#e5e7eb;
}
.whatsapp-btn.qr:hover {
  background:#0ea5e9;      /* blue accent */
  border-color:#0ea5e9;
  color:#fff;
}


/* Seçilən məhsulun “parametrlər” zolağı üçün (light/dark uyğundur) */
.spec-chip{
  
  background: #f9fafb;
  border-radius: 10px;
  box-shadow: 0 1px 7px #0001;
  padding: 20px 20px 16px;
  margin-top: 24px;
  width: 100%;
  max-width: 140px;
 
  color: var(--text);
}

.spec-chip{
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border:1px solid var(--glass-border);
}



/* ============ Printerlər (grid düzəni) ============ */
/* ===== PRİNTERLƏR — Monoblok stilinə uyğun grid ===== */
#printer-section{ padding: 6px 0 16px; }

#printer-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px 22px;                 /* həm üfiqi, həm şaquli boşluq */
  justify-items: center;          /* kartları mərkəzlə */
}

/* Kart */
.printer-card{
  width: 100%;
  max-width: 185px;               /* monoblok kart eni kimi */
  padding:16px;
  border-radius:14px;
  background: var(--card, #0f172a);
  border: 1px solid rgba(255,255,255,.08);  /* ayrıcı xətt – birləşik görünməsin */
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.printer-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.printer-card img{ width:160px; height:120px; object-fit:contain; }
.printer-title{ font-weight:600; text-align:center; }
.printer-price{ color:#1e40af; font-weight:700; }

/* Seçilmiş kart bölməsi (checkout üstü) */
.printer-selected-card{
  display:flex; gap:14px; align-items:center; margin-top:18px;
}
.printer-selected-card img{
  width:120px; height:90px; object-fit:contain;
  border:3px solid #000; border-radius:6px;
}

/* Dark/Ligth incəliyi (kənar xətlərin görünməsi üçün) */
:root:not([data-theme="dark"]) .printer-card{
  background:#fff;
  border-color: rgba(0,0,0,.06);
}

/* responsive xırda incəliklər */
@media (max-width: 480px){
  #printer-list{ grid-template-columns: repeat(2, 1fr); }
}