/* İntim Hazır Beton — Tema B: kurumsal, üst menü (lacivert başlık, altın + turkuaz vurgu, Poppins)
   Bootstrap 5 üzerine yazılır; renkler yalnızca buradaki değişkenlerden gelir. */

@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --hb-bg: #F3F5F9;
  --hb-yuzey: #FFFFFF;
  --hb-yuzey-2: #F8FAFD;
  --hb-cizgi: #E1E6EE;
  --hb-metin: #0F1B2D;
  --hb-metin-2: #5A6A80;
  --hb-lacivert: #0D4487;
  --hb-gece: #0A2C5A;
  --hb-mavi: #1565B0;
  --hb-baslik-metin: #BFD3EE;
  --hb-turkuaz: #12A4B6;
  --hb-altin: #E0A526;
  --hb-iyi: #12805C;
  --hb-uyari: #B7791F;
  --hb-kritik: #C53030;
  --hb-golge: 0 4px 18px rgba(10, 44, 90, .08);
  --hb-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Bootstrap değişkenleri */
  --bs-body-font-family: var(--hb-font);
  --bs-body-bg: var(--hb-bg);
  --bs-body-color: var(--hb-metin);
  --bs-border-color: var(--hb-cizgi);
  --bs-primary: var(--hb-lacivert);
  --bs-primary-rgb: 13, 68, 135;
  --bs-link-color: var(--hb-lacivert);
  --bs-link-color-rgb: 13, 68, 135;
  --bs-link-hover-color: var(--hb-mavi);
  --bs-secondary-color: var(--hb-metin-2);
}

html { font-size: 14px; }
body { background: var(--hb-bg); color: var(--hb-metin); font-family: var(--hb-font); min-height: 100vh; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Üst başlık + menü ---------- */
.hb-ust { background: linear-gradient(100deg, var(--hb-gece), var(--hb-lacivert) 70%, var(--hb-mavi)); color: #fff; padding-inline: 32px; }
.hb-menu { display: flex; align-items: center; gap: 28px; height: 60px; overflow-x: auto; scrollbar-width: none; }
.hb-menu::-webkit-scrollbar { display: none; }
.hb-marka { font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; margin-right: 12px; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.hb-marka:hover { color: #fff; }
.hb-marka i { width: 30px; height: 30px; border-radius: 8px; background: var(--hb-altin); color: var(--hb-gece); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; }
.hb-menu > a.hb-link { color: var(--hb-baslik-metin); text-decoration: none; font-size: 13px; height: 60px; display: flex; align-items: center; border-bottom: 3px solid transparent; white-space: nowrap; }
.hb-menu > a.hb-link:hover { color: #fff; }
.hb-menu > a.hb-link.aktif { color: #fff; border-color: var(--hb-altin); }
.hb-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--hb-baslik-metin); white-space: nowrap; }
.hb-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--hb-altin); color: var(--hb-gece); display: grid; place-items: center; font-weight: 600; border: 0; }
.hb-sag .dropdown-menu { font-size: 13px; }

.hb-hero { padding: 28px 0 64px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.hb-hero h1 { margin: 0; font-size: 24px; font-weight: 600; }
.hb-hero p { margin: 4px 0 0; color: var(--hb-baslik-metin); font-size: 13px; }

.hb-icerik { padding: 0 32px 32px; margin-top: -44px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Kartlar ---------- */
.hb-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.hb-kpi > div { background: var(--hb-yuzey); border-radius: 12px; padding: 20px 22px; box-shadow: var(--hb-golge); display: flex; flex-direction: column; gap: 4px; border-top: 4px solid var(--hb-turkuaz); }
.hb-kpi > div.altin { border-top-color: var(--hb-altin); }
.hb-kpi > div.kritik { border-top-color: var(--hb-kritik); }
.hb-kpi small { color: var(--hb-metin-2); font-size: 12px; }
.hb-kpi strong { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hb-kpi em { font-style: normal; font-size: 12px; color: var(--hb-metin-2); }

.hb-kart { background: var(--hb-yuzey); border-radius: 12px; box-shadow: var(--hb-golge); }
.hb-kart-bas { margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--hb-cizgi); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.hb-kart-bas h2 { margin: 0; font-size: 15px; font-weight: 600; }
.hb-kart-bas small { color: var(--hb-metin-2); font-size: 12px; }
.hb-kart-govde { padding: 22px; }

/* ---------- Tablo ---------- */
.hb-tablo { overflow-x: auto; }
.hb-tablo table { width: 100%; border-collapse: collapse; margin: 0; }
.hb-tablo th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hb-metin-2); text-align: left; padding: 12px 22px; white-space: nowrap; }
.hb-tablo td { padding: 13px 22px; border-top: 1px solid var(--hb-cizgi); white-space: nowrap; font-size: 13px; vertical-align: middle; }
.hb-tablo tbody tr:nth-child(even) { background: var(--hb-yuzey-2); }
.hb-tablo .s { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Durum etiketleri ---------- */
.hb-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px; color: #fff; }
.hb-pill.iyi { background: var(--hb-iyi); }
.hb-pill.uyari { background: var(--hb-uyari); }
.hb-pill.kritik { background: var(--hb-kritik); }
.hb-pill.notr { background: var(--hb-cizgi); color: var(--hb-metin-2); }

/* ---------- Düğmeler ve formlar ---------- */
.btn { font-weight: 500; border-radius: 8px; font-size: 13px; padding: 8px 16px; }
.btn-primary { --bs-btn-bg: var(--hb-lacivert); --bs-btn-border-color: var(--hb-lacivert); --bs-btn-hover-bg: var(--hb-gece); --bs-btn-hover-border-color: var(--hb-gece); --bs-btn-active-bg: var(--hb-gece); --bs-btn-active-border-color: var(--hb-gece); }
.btn-altin { background: var(--hb-altin); color: var(--hb-gece); font-weight: 600; border: 0; }
.btn-altin:hover { background: #C98F14; color: var(--hb-gece); }
.btn-outline-primary { --bs-btn-color: var(--hb-lacivert); --bs-btn-border-color: var(--hb-cizgi); --bs-btn-hover-bg: var(--hb-lacivert); --bs-btn-hover-border-color: var(--hb-lacivert); }
.form-label { font-size: 13px; font-weight: 500; color: var(--hb-metin); }
.form-control, .form-select { border-radius: 8px; border-color: var(--hb-cizgi); font-size: 14px; padding: 9px 12px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--hb-mavi); box-shadow: 0 0 0 .2rem rgba(21, 101, 176, .2); }
.form-check-input:checked { background-color: var(--hb-lacivert); border-color: var(--hb-lacivert); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--hb-altin); outline-offset: 2px; box-shadow: none; }
.alert { border-radius: 10px; font-size: 13px; }

/* ---------- Giriş sayfası ---------- */
.hb-giris { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--hb-yuzey); }
.hb-giris-sol { background: linear-gradient(150deg, var(--hb-gece), var(--hb-lacivert) 65%, var(--hb-mavi)); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.hb-giris-sol h2 { font-size: 34px; font-weight: 600; line-height: 1.2; margin: 0; max-width: 16ch; }
.hb-giris-sol p { color: var(--hb-baslik-metin); margin: 12px 0 0; max-width: 42ch; }
.hb-giris-sol .cizgi { width: 64px; height: 4px; background: var(--hb-altin); border-radius: 2px; }
.hb-giris-sag { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.hb-giris-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 6px; }
.hb-giris-form h1 { font-size: 22px; font-weight: 600; margin: 0 0 18px; }

@media (max-width: 900px) {
  .hb-ust { padding-inline: 16px; }
  .hb-icerik { padding: 0 16px 24px; }
  .hb-sag span.ad { display: none; }
  .hb-giris { grid-template-columns: 1fr; }
  .hb-giris-sol { padding: 28px; }
  .hb-giris-sol h2 { font-size: 24px; }
}

/* ---------- Patron özeti / Sevkiyat ---------- */
.hb-donem { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hb-seg { display: inline-flex; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 3px; gap: 2px; }
.hb-seg a { color: var(--hb-baslik-metin); text-decoration: none; font-size: 13px; padding: 5px 14px; border-radius: 6px; white-space: nowrap; }
.hb-seg a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hb-seg a.aktif { background: var(--hb-altin); color: var(--hb-gece); font-weight: 600; }
.hb-tarih { display: inline-flex; gap: 6px; }
.hb-tarih input { border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff; border-radius: 8px; padding: 5px 10px; font-size: 13px; color-scheme: dark; }
.hb-tarih button { border: 0; background: rgba(255, 255, 255, .18); color: #fff; border-radius: 8px; padding: 5px 14px; font-size: 13px; }
.hb-tarih button:hover { background: rgba(255, 255, 255, .28); }

.hb-kpi-ek { font-size: 14px; font-weight: 500; color: var(--hb-metin-2); }
.hb-artis { color: var(--hb-iyi); font-weight: 600; }
.hb-azalis { color: var(--hb-kritik); font-weight: 600; }

.hb-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hb-grafik { position: relative; height: 280px; }
.hb-bos { margin: 0; color: var(--hb-metin-2); text-align: center; padding: 24px 0; }
.hb-not { margin: 0; padding: 12px 22px 16px; font-size: 12px; color: var(--hb-metin-2); border-top: 1px solid var(--hb-cizgi); }

.hb-bar + .hb-bar { margin-top: 14px; }
.hb-bar-ust { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 6px; }
.hb-bar-ust span:first-child { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-bar-ust .num { color: var(--hb-metin-2); white-space: nowrap; }
.hb-bar-iz { height: 8px; background: var(--hb-yuzey-2); border: 1px solid var(--hb-cizgi); border-radius: 4px; overflow: hidden; }
.hb-bar-iz i { display: block; height: 100%; background: var(--hb-lacivert); border-radius: 4px; }
.hb-bar.altin .hb-bar-iz i { background: var(--hb-altin); }
.hb-bar.turkuaz .hb-bar-iz i { background: var(--hb-turkuaz); }
.hb-bar.notr .hb-bar-iz i { background: var(--hb-metin-2); }

.hb-tablo td.hb-uzun { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.hb-tablo tfoot td { border-top: 2px solid var(--hb-cizgi); font-weight: 600; }

.hb-filtre { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding: 18px 22px; }
.hb-filtre .form-label { margin-bottom: 4px; }
.hb-filtre .form-check { margin-bottom: 10px; }

@media (max-width: 900px) {
  .hb-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .hb-grafik { height: 220px; }
  .hb-bar-ust { flex-direction: column; gap: 2px; }
  .hb-tablo td.hb-uzun { max-width: 180px; }
  .hb-filtre > div { flex: 1 1 140px; }
}

/* ---------- Santraller: ajan ayarı kod bloğu ---------- */
.hb-kod { background: var(--hb-yuzey-2); border: 1px solid var(--hb-cizgi); border-radius: 8px; padding: 12px 14px; font-size: 13px; white-space: pre-wrap; word-break: break-all; user-select: all; }

.hb-gayri { color: var(--hb-kritik); font-weight: 600; }

/* ---------- Fiyatlar ---------- */
.hb-fiyat-etiket { display: inline-block; font-size: 12px; padding: 2px 8px; margin: 1px 4px 1px 0; border-radius: 6px; background: var(--hb-yuzey-2); border: 1px solid var(--hb-cizgi); font-variant-numeric: tabular-nums; }
.hb-fiyat-etiket b { font-weight: 600; color: var(--hb-lacivert); margin-right: 4px; }
.hb-tablo tr.hb-pasif td { color: var(--hb-metin-2); text-decoration: line-through; }
.hb-tablo tr.hb-pasif td:last-child { text-decoration: none; }
.hb-satir-form { display: flex; gap: 4px; align-items: center; }
.hb-satir-form form { display: flex; gap: 4px; align-items: center; margin: 0; }
.hb-satir-form input[name=birimFiyat] { width: 96px; text-align: right; }
.hb-satir-form input[name=aciklama] { width: 110px; }
.hb-fiyatsiz-link { font-size: 12px; font-weight: 600; color: var(--hb-kritik); }

/* Malzeme tüketimi */
.hb-tablo tr.hb-alt-toplam td { font-weight: 600; background: var(--hb-yuzey-2); border-top: 2px solid var(--hb-cizgi); }
.hb-bar-iz.hb-bar-hedef { position: relative; overflow: visible; }
.hb-bar-iz.hb-bar-hedef b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--hb-metin); border-radius: 1px; }

/* Santral performansı */
.hb-kpi > div.hb-perf-bos { border-top-color: var(--hb-cizgi); color: var(--hb-metin-2); }
.hb-tablo tr.hb-perf-grup td { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hb-lacivert); background: var(--hb-yuzey-2); padding-top: 9px; padding-bottom: 9px; }
.hb-tablo td.hb-perf-iyi { background: rgba(18, 128, 92, .10); }
.hb-tablo td.hb-perf-kotu { background: rgba(197, 48, 48, .09); }
.hb-perf-isaret { font-size: 10px; margin-right: 4px; }
.hb-perf-iyi .hb-perf-isaret { color: var(--hb-iyi); }
.hb-perf-kotu .hb-perf-isaret { color: var(--hb-kritik); }
.hb-isi th, .hb-isi td { padding: 8px 4px; text-align: center; font-size: 11px; min-width: 34px; }
.hb-isi th:first-child, .hb-isi td:first-child { text-align: left; padding-left: 16px; position: sticky; left: 0; background: var(--hb-yuzey); z-index: 1; }
.hb-isi td:not(:first-child):not(.s):not(.sifir) { background: rgba(18, 164, 182, var(--yog)); font-variant-numeric: tabular-nums; }
.hb-isi td.koyu { color: #fff; font-weight: 600; }
.hb-isi td.s { text-align: right; padding-right: 16px; }
.hb-isi tbody tr:nth-child(even) td.sifir { background: var(--hb-yuzey-2); }

/* Eşleştirme: satır içi form */
.hb-esle { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.hb-esle .form-control, .hb-esle .form-select { width: auto; min-width: 110px; max-width: 160px; padding: 3px 8px; font-size: 13px; }
.hb-esle .form-check { margin: 0; font-size: 12px; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.hb-esle .form-check .form-check-input { float: none; margin: 0; }
.hb-tablo td.hb-oneri { white-space: nowrap; }
.hb-tablo td.hb-oneri form { display: inline; margin: 0 0 0 4px; }

/* ---------- Denetim + fiyat talepleri ---------- */
.hb-rozet { display: flex; align-items: center; margin-left: -12px; text-decoration: none; }
.hb-rozet .hb-pill { font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.hb-tablo tr.hb-tikla { cursor: pointer; }
.hb-tablo tr.hb-tikla:hover td { background: rgba(21, 101, 176, .06); }
.hb-tablo tr.hb-degisti td { background: rgba(224, 165, 38, .16); font-weight: 600; }
.hb-tablo td.hb-json-hucre { white-space: normal; word-break: break-word; max-width: 420px; font-variant-numeric: tabular-nums; }
.hb-kilit { font-size: 11px; color: var(--hb-metin-2); white-space: nowrap; }
.hb-talep-ac summary { cursor: pointer; font-size: 12px; color: var(--hb-lacivert); font-weight: 500; list-style: none; }
.hb-talep-ac summary::-webkit-details-marker { display: none; }
.hb-talep-ac[open] summary { margin-bottom: 6px; }
.hb-talep-ac form { display: grid; gap: 6px; min-width: 240px; }
.hb-talep-ac .form-control { font-size: 13px; padding: 5px 8px; }
.hb-tablo td.hb-sarili { white-space: normal; min-width: 180px; max-width: 320px; }
.hb-satir-form input[name=gerekce] { width: 150px; }

/* Reçete tablosu: sütun grupları */
.hb-tablo tr.hb-grup-bas th { font-size: 10.5px; color: var(--hb-lacivert); background: var(--hb-yuzey-2); text-transform: none; letter-spacing: 0; padding-top: 10px; padding-bottom: 6px; }
.hb-tablo .hb-grup-ayrac { border-left: 2px solid var(--hb-cizgi); }