/* ===== OPTİKON Product Catalog — Light Theme v3.0 ===== */
/* Mono font: sadece parça numaraları için. Diğer her şey site temasının fontunu (inherit) kullanır. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');

/* Değişkenler: modal (#optikon-modal) katalog div'inin DIŞINDA durduğu için
   her iki kapsayıcıya da tanımlanmalı — yoksa modal içindeki renkler çalışmaz. */
.optikon-catalog,
.optikon-modal-overlay {
  --navy:#1F3864;            /* Menü çubuğuyla aynı lacivert */
  --navy-dark:#16294a;
  --accent:#3568c4;          /* Buton / link mavisi */
  --accent-hover:#2a55a3;
  --success:#15803d; --success-bg:#ecfdf3; --success-border:#bbe7cc;
  --danger:#b91c1c;  --danger-bg:#fef2f2;  --danger-border:#f3c6c6;
  --text:#1e2a3f;            /* Ana metin — koyu lacivert-gri */
  --text-muted:#64748b;      /* İkincil metin */
  --bg:#ffffff;              /* Kart zemini */
  --bg-soft:#f7f9fc;         /* Arama çubuğu / satır zebra zemini */
  --border:#e2e8f0;          /* Genel kenarlık */
  --border-strong:#cbd5e1;   /* Input kenarlığı */
  --mono:'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* Kart görünümü — sadece katalog kutusu */
.optikon-catalog {
  background:var(--bg);
  color:var(--text);
  font-family:inherit;       /* Site temasının fontunu kullan */
  font-size:14px;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(30,42,63,.06), 0 8px 24px rgba(30,42,63,.05);

  /* Sayfa başlığı (Products bandı) ile katalog arasındaki boşluğu azaltır.
     Temanızın içerik üst boşluğuna göre bu değeri ayarlayın:
     boşluk hâlâ fazlaysa -3rem / -4rem deneyin, taşarsa -1rem'e düşürün. */
  margin-top:-2rem;
}
.optikon-catalog *, .optikon-modal-overlay * { box-sizing:border-box; }

/* ── Bilgi çubuğu ─────────────────────────────────────── */
.optikon-notice {
  background:#f0f5fc;
  border-bottom:1px solid var(--border);
  padding:.8rem 1.5rem;
  font-size:13px;
  color:var(--navy);
  display:flex; align-items:center; gap:8px;
}
.optikon-notice a {
  color:var(--accent); font-weight:600; text-decoration:none;
  border-bottom:1px solid currentColor;
}
.optikon-notice a:hover { color:var(--accent-hover); }
/* Bilgi çubuğundaki genel teklif butonu — dolu mavi, küçük boy */
.optikon-notice .optikon-quote-btn {
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:6px; padding:5px 14px;
  font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; transition:background .15s;
}
.optikon-notice .optikon-quote-btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }

/* ── Arama & filtre çubuğu ────────────────────────────── */
.optikon-search-bar {
  padding:1.1rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:var(--bg-soft);
}
.optikon-search-wrap { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.optikon-search-input {
  flex:1; min-width:240px;
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:8px;
  padding:.6rem 1rem;
  color:var(--text);
  font-family:inherit; font-size:14px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.optikon-search-input::placeholder { color:#94a3b8; }
.optikon-search-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(53,104,196,.12);
}
.optikon-filter-select {
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:8px;
  padding:.6rem 1rem;
  color:var(--text);
  font-family:inherit; font-size:13px;
  outline:none; cursor:pointer;
  transition:border-color .2s;
}
.optikon-filter-select:focus { border-color:var(--accent); }
.optikon-filter-select option { background:#fff; color:var(--text); }
.optikon-search-btn {
  background:var(--accent); color:#fff;
  border:none; border-radius:8px;
  padding:.6rem 1.5rem;
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.optikon-search-btn:hover { background:var(--accent-hover); }
.optikon-clear-btn {
  color:var(--text-muted);
  font-family:inherit; font-size:13px;
  text-decoration:none;
  padding:.6rem .9rem;
  border:1px solid var(--border-strong);
  border-radius:8px;
  background:#fff;
  transition:all .15s;
}
.optikon-clear-btn:hover { color:var(--text); border-color:var(--accent); }
.optikon-results-count {
  margin:.7rem 0 0;
  font-size:12px;
  color:var(--text-muted);
}

/* ── Tablo ────────────────────────────────────────────── */
/* Tema tablo stillerini bastır: bazı temalar tr/td'ye kalın koyu
   border verir, bu blok onları etkisiz kılar. */
.optikon-catalog .optikon-table,
.optikon-catalog .optikon-table th,
.optikon-catalog .optikon-table td,
.optikon-catalog .optikon-table tr {
  border:none !important;
  background-clip:padding-box;
}
.optikon-catalog .optikon-table tbody tr {
  border-bottom:1px solid var(--border) !important;
}
.optikon-catalog .optikon-table tbody tr:last-child {
  border-bottom:none !important;
}
.optikon-catalog .optikon-table { margin:0 !important; }

.optikon-table-wrap { overflow-x:auto; }
.optikon-table { width:100%; border-collapse:collapse; font-size:14px; }

/* Başlık satırı: menü çubuğuyla aynı lacivert */
.optikon-table thead tr { background:var(--navy); }
.optikon-table th {
  padding:.8rem 1.25rem;
  text-align:left;
  font-family:inherit;
  font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:#dbe4f3;
  white-space:nowrap;
}
.optikon-table tbody tr {
  border-bottom:1px solid var(--border);
  transition:background .15s;
}
.optikon-table tbody tr:last-child { border-bottom:none; }
.optikon-table tbody tr:hover { background:var(--bg-soft); }
.optikon-table td { padding:1rem 1.25rem; vertical-align:middle; }

/* Parça numarası — mono kalan tek yer */
.optikon-part-number {
  font-family:var(--mono);
  font-size:13px; font-weight:600;
  color:var(--accent);
  letter-spacing:.02em;
}
.optikon-mfr-label { font-size:11px; color:var(--text-muted); margin-bottom:2px; letter-spacing:.06em; }
.optikon-mfr-value { font-size:14px; color:var(--text); }
.optikon-product-name {
  font-size:14px; color:var(--text);
  max-width:320px; line-height:1.45;
  font-weight:500; margin:0;
}

/* Stok rozetleri */
.optikon-stock {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px;
  border-radius:20px;
  font-family:inherit;
  font-size:12px; font-weight:600;
  white-space:nowrap;
}
.optikon-stock::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.optikon-stock.in-stock  { background:var(--success-bg); color:var(--success); border:1px solid var(--success-border); }
.optikon-stock.out-stock { background:var(--danger-bg);  color:var(--danger);  border:1px solid var(--danger-border); }
.optikon-stock-count { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* Teklif butonu */
.optikon-quote-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:#fff;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:6px;
  padding:7px 15px;
  font-family:inherit;
  font-size:13px; font-weight:600;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.optikon-quote-btn:hover { background:var(--accent); color:#fff; }

.optikon-no-results {
  text-align:center; padding:3rem;
  color:var(--text-muted); font-size:14px;
}

/* ── Sayfalama ────────────────────────────────────────── */
.optikon-pagination {
  display:flex; gap:5px; justify-content:center;
  padding:1.1rem 1.5rem 1.5rem;
  flex-wrap:wrap;
  border-top:1px solid var(--border);
  background:var(--bg-soft);
}
.optikon-page-btn {
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:6px;
  padding:6px 13px;
  color:var(--text-muted);
  font-family:inherit; font-size:13px;
  cursor:pointer;
  transition:all .15s;
  text-decoration:none;
}
.optikon-page-btn:hover { border-color:var(--accent); color:var(--accent); }
.optikon-page-btn.active {
  background:var(--navy); border-color:var(--navy); color:#fff;
}

/* ── Modal (teklif formu) ─────────────────────────────── */
.optikon-modal-overlay {
  position:fixed; inset:0;
  background:rgba(15,31,61,.55);
  z-index:99999;
  align-items:center; justify-content:center;
  display:none;
  padding:1rem;
}
.optikon-modal-overlay.open { display:flex; }
.optikon-modal {
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  width:460px; max-width:95vw; max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(15,31,61,.25);
  padding:1.75rem;
  position:relative;
  color:var(--text);
}
.optikon-modal h2 {
  font-family:inherit;
  font-size:18px; font-weight:700;
  color:var(--navy);
  margin:0 0 1.25rem;
}
.optikon-modal-close {
  position:absolute; top:1rem; right:1rem;
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--text-muted);
  width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.optikon-modal-close:hover { background:var(--border); color:var(--text); }

.optikon-form-group { margin-bottom:.9rem; }
.optikon-form-group label {
  display:block;
  font-size:13px; font-weight:600;
  color:var(--text);
  margin-bottom:5px;
}
.optikon-input {
  width:100%;
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:6px;
  padding:.6rem .8rem;
  color:var(--text);
  font-family:inherit; font-size:14px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.optikon-input::placeholder { color:#94a3b8; }
.optikon-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(53,104,196,.12);
}
.optikon-input[readonly] {
  background:var(--bg-soft);
  color:var(--navy);
  font-family:var(--mono);
  font-size:13px; font-weight:600;
  cursor:default;
}
textarea.optikon-input { resize:vertical; }

.optikon-submit-btn {
  width:100%;
  background:var(--accent); color:#fff;
  border:none; border-radius:6px;
  padding:.75rem;
  font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer;
  transition:background .15s;
  margin-top:.5rem;
}
.optikon-submit-btn:hover { background:var(--accent-hover); }
#optikon-form-message { margin-top:.75rem; font-size:13px; text-align:center; }
#optikon-form-message.success { color:var(--success); }
#optikon-form-message.error { color:var(--danger); }

/* ── Mobil ────────────────────────────────────────────── */
@media (max-width:768px) {
  .optikon-search-bar, .optikon-notice { padding-left:1rem; padding-right:1rem; }
  .optikon-table th, .optikon-table td { padding-left:.85rem; padding-right:.85rem; }
  .optikon-product-name { max-width:180px; font-size:13px; }
  .optikon-search-input { min-width:100%; }
}