/* =====================================================================
   Yeni düzen — TALIMAT 12.11.2026 B (tasarım "C · Bento",
   docs/tasarim/ana-sayfa-202611/C-bento.html). Renkler yalnız
   belirteçlerden (templates/_design_tokens.html); sabit hex yok.
   ===================================================================== */

:root {
  --serit-genislik: 88px;
  --bento-kose: 22px;
  --bento-aralik: 16px;
}

/* ---------- Sol ikon şeridi (masaüstü, ≥ 900 px) ---------- */
body.menu-duzeni-sol .sol-menu.ikon-serit {
  width: var(--serit-genislik);
  background: var(--dark);
  padding: 16px 8px 14px;
  align-items: center;
  overflow-y: auto;              /* sığmazsa yalnız şerit kendi içinde kayar */
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
body.menu-duzeni-sol .sol-menu.ikon-serit:before { display: none; }
body.menu-duzeni-sol > main,
body.menu-duzeni-sol > .footer,
body.menu-duzeni-sol > .icerik-ust-serit { margin-left: var(--serit-genislik); }

.ikon-serit-logo { display: block; margin: 0 auto 14px; text-align: center; color: var(--text-on-dark); text-decoration: none; font-weight: 700; font-size: 13px; }
.ikon-serit-logo img { width: 60px; height: auto; display: block; margin: 0 auto; }
.ikon-serit-nav { width: 100%; flex: 1 0 auto; }
.ikon-serit-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ikon-serit-ayrac { height: 1px; background: var(--dark-line); margin: 8px 10px; }
.ikon-serit-oge {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 44px; padding: 8px 2px;
  border-radius: 12px;
  font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center;
  color: var(--soft-on-dark); text-decoration: none;
  overflow-wrap: anywhere; hyphens: auto;
}
.ikon-serit-oge .menu-ikon { width: 22px; height: 22px; flex: none; color: var(--muted-on-dark); }
.ikon-serit-oge:hover { background: var(--dark-hover); color: var(--strong-on-dark); }
.ikon-serit-oge:hover .menu-ikon { color: var(--strong-on-dark); }
.ikon-serit-oge.etkin { background: color-mix(in srgb, var(--turuncu) 16%, var(--dark)); color: var(--strong-on-dark); }
.ikon-serit-oge.etkin .menu-ikon { color: var(--turuncu); }
.ikon-serit-oge:focus-visible { outline: 2px solid var(--turuncu); outline-offset: 2px; }
.ikon-serit-oge.devre-disi { color: var(--faint-on-dark); cursor: default; }
.ikon-serit-teklif {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 12px auto 0; flex: none;
  border-radius: 14px;
  background: var(--turuncu); color: var(--turuncu-ustu);
  font-weight: 800; font-size: 11.5px; line-height: 1.1; text-align: center; text-decoration: none;
}
.ikon-serit-teklif:hover { background: color-mix(in srgb, var(--turuncu) 88%, var(--beyaz)); }
.ikon-serit-teklif:focus-visible { outline: 2px solid var(--beyaz); outline-offset: 3px; }

/* ---------- Üst şerit (içerik yolu · TR · Bize ulaşın) ---------- */
body.menu-duzeni-sol .icerik-ust-serit { background: transparent; border-bottom: none; height: 64px; padding: 0 22px; }
.icerik-ust-serit .kirinti { color: var(--soft); font-size: 13px; letter-spacing: 0; }
.icerik-ust-serit .kirinti a { color: var(--soft); }
.icerik-ust-serit .kirinti a:hover { color: var(--mavi-koyu); }
.icerik-ust-serit .dil { font-weight: 600; font-size: 13px; color: var(--ink); }
.ust-serit-cta {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  border-radius: 12px; background: var(--dark); color: var(--strong-on-dark);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.ust-serit-cta:hover { background: color-mix(in srgb, var(--dark) 85%, var(--beyaz)); }

/* ---------- Mobil (< 900 px): üstte sabit lacivert çubuk + tam ekran menü ---------- */
@media (max-width: 899px) {
  body.menu-duzeni-sol .ust-bar-wrap { position: sticky; top: 0; background: var(--dark); }
  /* yan boşluk: responsive.css'teki ".ust-bar { padding: 8px 0 }" kabın yan boşluğunu siliyordu */
  body.menu-duzeni-sol .ust-bar { background: var(--dark); border-bottom-color: var(--dark-line); padding: 8px 16px; }
  body.menu-duzeni-sol .ust-bar .logo { color: var(--text-on-dark); }
  body.menu-duzeni-sol .ust-bar .logo img { height: 30px; }
  body.menu-duzeni-sol .ust-bar .teklif-btn { display: none; }
  body.menu-duzeni-sol .hamburger { background: transparent; border-color: var(--dark-line); }
  body.menu-duzeni-sol .hamburger span,
  body.menu-duzeni-sol .hamburger span::before,
  body.menu-duzeni-sol .hamburger span::after { background: var(--text-on-dark); }
  body.menu-duzeni-sol .yan-menu-panel { width: 100%; }
}
.yan-menu-gruplu .yan-menu-baslik { gap: 12px; }
.yan-menu-gruplu .menu-ikon { width: 20px; height: 20px; flex: none; color: var(--soft); }
.yan-menu-gruplu .yan-menu-baslik.aktif .menu-ikon { color: var(--turuncu-koyu); }
.yan-menu-ayrac { height: 1px; background: var(--line); margin: 8px 0; }
.yan-menu-kimlik { display: flex; flex-direction: column; gap: 4px; }
.yan-menu-etiket { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

/* ---------- Hakkımızda: alt sekme çubuğu, ilkeler ---------- */
.alt-sekmeler {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 28px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.alt-sekmeler a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 10px; color: var(--soft); text-decoration: none; font-weight: 500; font-size: 14.5px;
}
.alt-sekmeler a:hover { color: var(--ink); background: var(--bg); }
.alt-sekmeler a.aktif { background: var(--dark); color: var(--strong-on-dark); font-weight: 600; }
.alt-sekmeler a:focus-visible { outline: 2px solid var(--mavi-koyu); outline-offset: 2px; }
.ilkeler-giris { font-size: 18px; color: var(--soft); max-width: 720px; margin: 0 0 22px; }
.ilke-listesi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bento-aralik); }
.ilke-listesi li { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--bento-kose); }
.ilke-listesi .ilke-no { flex: none; font-weight: 800; font-size: 15px; color: var(--turuncu-koyu); min-width: 26px; }
.ilke-listesi p { margin: 0; color: var(--soft); }
.ilke-listesi strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
@media (max-width: 767px) { .ilke-listesi { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ana sayfa: bento ---------- */
.bento-sayfa { padding: 0 22px 8px; display: flex; flex-direction: column; gap: 56px; max-width: 1480px; margin: 0 auto; }
.bento-kutu { background: var(--surface); border-radius: var(--bento-kose); padding: 24px; position: relative; overflow: hidden; color: var(--ink); }
a.bento-kutu { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.bento-kutu:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--lacivert) 10%, transparent); }
a.bento-kutu:focus-visible { outline: 3px solid var(--mavi-koyu); outline-offset: 3px; }
.bento-et { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--turuncu); }
.bento-et-koyu { color: var(--turuncu-koyu); }

.bento-ust { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--bento-aralik); }
.bento-ana { background: var(--dark); color: var(--strong-on-dark); padding: 44px; min-height: 560px; display: flex; flex-direction: column; }
.bento-ana h1 { font-size: clamp(38px, 4.2vw, 58px); line-height: 1.03; letter-spacing: -.03em; margin: 14px 0 16px; max-width: 600px; color: var(--strong-on-dark); }
.bento-ana h1 .vurgu { color: var(--turuncu); }
.bento-ana-alt { color: var(--soft-on-dark); font-size: 17px; max-width: 480px; margin: 0 0 26px; }
.bento-ana-alt strong { color: var(--strong-on-dark); font-weight: 600; }
.bento-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.bento-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.bento-btn-turuncu { background: var(--turuncu); color: var(--turuncu-ustu); }
.bento-btn-turuncu:hover { background: color-mix(in srgb, var(--turuncu) 88%, var(--beyaz)); }
.bento-btn-cerceve { color: var(--strong-on-dark); border: 1.5px solid color-mix(in srgb, var(--beyaz) 40%, transparent); }
.bento-btn-cerceve:hover { background: color-mix(in srgb, var(--beyaz) 8%, transparent); }
.bento-btn-lacivert { background: var(--dark); color: var(--strong-on-dark); min-height: 44px; }
.bento-btn:focus-visible { outline: 3px solid var(--mavi); outline-offset: 3px; }
.bento-ana-gorsel { margin-top: auto; padding-top: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.bento-kod {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.7;
  color: var(--soft-on-dark);
  background: color-mix(in srgb, var(--beyaz) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--beyaz) 12%, transparent);
  border-radius: 12px; padding: 12px 16px; white-space: nowrap;
}
.bento-kod .c { color: var(--muted-on-dark); }
.bento-kod .k { color: var(--mavi); }
.bento-kod .f { color: var(--turuncu); }
.bento-kod .s { color: var(--accent-on-dark); }
.bento-ana-pencere { width: min(340px, 48%); flex: none; }

.bento-sag { display: flex; flex-direction: column; gap: var(--bento-aralik); }
.bento-rakamlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bento-aralik); }
.bento-rakam { min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.bento-rakam b { font-size: clamp(32px, 3vw, 44px); line-height: 1; letter-spacing: -.02em; }
.bento-rakam span { color: var(--soft); font-size: 14px; }
.bento-rakam.turuncu { background: var(--turuncu); color: var(--turuncu-ustu); }
.bento-rakam.turuncu span { color: var(--turuncu-ustu); }
.bento-rakam.mavi { background: var(--mavi); color: var(--mavi-ustu); }
.bento-rakam.mavi span { color: var(--mavi-ustu); }
.bento-teklif { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--turuncu-acik), var(--surface) 70%); }
.bento-teklif .bento-et-koyu { color: var(--ink); }
.bento-teklif h2 { font-size: 24px; margin: 0 0 6px; }
.bento-teklif .bento-btn { align-self: flex-start; }

.bento-surec ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bento-aralik); }
.bento-surec li { padding: 0; }
.bento-surec li > .surec-baglanti,
.bento-surec li:not(:has(> .surec-baglanti)) { display: flex; flex-direction: column; gap: 4px; }
.bento-surec li:not(:has(> .surec-baglanti)) { padding: 20px 22px; }
.surec-baglanti { padding: 20px 22px; height: 100%; color: inherit; text-decoration: none; border-radius: var(--bento-kose); }
.surec-baglanti:hover b { text-decoration: underline; }
.surec-baglanti:focus-visible { outline: 3px solid var(--lacivert); outline-offset: 3px; }
.bento-surec li { transition: transform .15s ease; }
.bento-surec li:has(> .surec-baglanti:hover) { transform: translateY(-2px); }
.bento-surec .no { font-weight: 800; font-size: 13px; letter-spacing: .06em; }
.bento-surec b { font-size: 19px; }
.bento-surec .alt { font-size: 14.5px; }
/* Dört adım dört renk — yalnız mevcut belirteçler, ölçülmüş çiftler (TALIMAT 13.11.2026 C) */
.bento-surec .surec-saha { background: var(--turuncu); color: var(--turuncu-ustu); }
.bento-surec .surec-veri { background: var(--mavi); color: var(--mavi-ustu); }
.bento-surec .surec-analiz { background: var(--mavi-koyu); color: var(--beyaz); }
.bento-surec .surec-yazilim { background: var(--lacivert); color: var(--turuncu); }
.bento-surec .surec-analiz .surec-baglanti:focus-visible,
.bento-surec .surec-yazilim .surec-baglanti:focus-visible { outline-color: var(--turuncu); }

.bento-bolum-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 4px 16px; }
.bento-bolum-baslik h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 6px 0 0; }
/* Sayfa zemininde turuncu-koyu 4,1:1 (geçmez) — bölüm üst etiketleri burada mavi-koyu (5,0:1);
   beyaz kutu içindeki etiketler turuncu-koyu kalır (4,66:1). */
.bento-bolum > .bento-bolum-baslik .bento-et-koyu { color: var(--mavi-koyu); }
.bento-tumu { color: var(--mavi-koyu); font-weight: 600; text-decoration: none; font-size: 14.5px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.bento-tumu:hover { text-decoration: underline; }

.bento-izgara-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bento-aralik); }
.bento-izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bento-aralik); }
.bento-hizmet { display: flex; flex-direction: column; gap: 8px; }
.bento-hizmet-ikon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--turuncu-acik); color: var(--turuncu-koyu); }
.bento-hizmet:nth-child(even) .bento-hizmet-ikon { background: var(--mavi-acik); color: var(--mavi-koyu); }
.bento-hizmet-ikon svg { width: 22px; height: 22px; }
.bento-hizmet h3 { margin: 4px 0 0; font-size: 19px; }
.bento-hizmet p { margin: 0; color: var(--soft); font-size: 14.5px; flex: 1; }
.bento-ayrinti { color: var(--mavi-koyu); font-weight: 600; font-size: 14px; margin-top: 6px; }

.bento-urun { display: flex; flex-direction: column; gap: 8px; }
.bento-urun h3 { margin: 10px 0 0; font-size: 19px; }
.bento-urun p { margin: 0; color: var(--soft); font-size: 14.5px; flex: 1; }
.bento-alan-adi { color: var(--mavi-koyu); font-weight: 600; font-size: 14px; }
.bento-izgara-kucuk { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--bento-aralik); margin-top: var(--bento-aralik); }
.bento-urun-kucuk { display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.bento-urun-kucuk b { display: block; font-size: 15px; }
.bento-urun-kucuk small { color: var(--mavi-koyu); font-size: 13.5px; }
.bento-urun-harf { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--bg); display: grid; place-items: center; font-weight: 800; font-size: 13px; }

/* Ürün penceresi: ekran görüntüsü ya da çizim */
.urun-pencere { display: block; width: 100%; height: auto; }
.urun-pencere-gorsel { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.urun-pencere-gorsel.koyu { border-color: color-mix(in srgb, var(--beyaz) 18%, transparent); }
.urun-pencere-gorsel img { display: block; width: 100%; height: auto; }
.urun-pencere-cubuk { display: flex; gap: 6px; padding: 9px 12px; background: var(--bg); }
.urun-pencere-gorsel.koyu .urun-pencere-cubuk { background: color-mix(in srgb, var(--beyaz) 10%, var(--dark)); }
.urun-pencere-cubuk i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.urun-pencere-cubuk i:nth-child(1) { background: var(--turuncu); }
.urun-pencere-cubuk i:nth-child(2) { background: var(--mavi); }
.urun-pencere-cizim .z { fill: var(--surface); stroke: var(--line); }
.urun-pencere-cizim .b { fill: var(--bg); }
.urun-pencere-cizim .s { fill: var(--soft); opacity: .45; }
.urun-pencere-cizim .t { fill: var(--turuncu); }
.urun-pencere-cizim .m { fill: var(--mavi); }
.urun-pencere-cizim .tz { fill: var(--turuncu); opacity: .14; }
.urun-pencere-cizim .mz { fill: var(--mavi); opacity: .14; }
.urun-pencere-cizim .c { fill: none; stroke: var(--line); }
.urun-pencere-cizim .cm { fill: none; stroke: var(--mavi); stroke-width: 2.5; }
.urun-pencere-cizim .ct { fill: none; stroke: var(--turuncu); stroke-width: 2.5; }
.urun-pencere-cizim.koyu .z { fill: color-mix(in srgb, var(--beyaz) 4%, var(--dark)); stroke: color-mix(in srgb, var(--beyaz) 16%, var(--dark)); }
.urun-pencere-cizim.koyu .b { fill: color-mix(in srgb, var(--beyaz) 12%, var(--dark)); }
.urun-pencere-cizim.koyu .s { fill: var(--soft-on-dark); }
.urun-pencere-cizim.koyu .c { stroke: color-mix(in srgb, var(--beyaz) 16%, var(--dark)); }

/* Neler yapıyoruz kartları bento köşesiyle */
.bento-sayfa .paylasim-kart { border-radius: var(--bento-kose); }

.bento-referanslar .bento-bolum-baslik { margin: 0 0 18px; }
.bento-referans-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bento-referans-izgara li { padding: 16px 18px; border-radius: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
.bento-referans-izgara b { font-size: 15px; line-height: 1.3; }
.bento-referans-izgara span { color: var(--soft); font-size: 13.5px; }

/* Ana sayfada üst şeritte içerik yolu yok; şerit yalnız sağ öğeleri taşır */
.bento-sayfa h2 { color: var(--ink); }

/* ---------- Kırılımlar ---------- */
@media (max-width: 1279px) {
  .bento-ust { grid-template-columns: minmax(0, 1fr); }
  .bento-sag { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .bento-rakamlar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento-ana { min-height: 0; }
  .bento-izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .bento-sag { grid-template-columns: minmax(0, 1fr); }
  .bento-rakamlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-surec ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-referans-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-kod { display: none; }
  .bento-ana-gorsel { justify-content: flex-end; }
  .bento-ana-pencere { width: min(420px, 100%); }
}
@media (max-width: 767px) {
  .bento-sayfa { padding: 16px 16px 8px; gap: 40px; }
  .bento-kutu { padding: 20px; }
  .bento-ana { padding: 28px 22px; }
  .bento-ana-gorsel { padding-top: 24px; }
  .bento-ana-pencere { width: 100%; }
  .bento-izgara-4, .bento-izgara-3 { grid-template-columns: minmax(0, 1fr); }
  .bento-surec ol { grid-template-columns: minmax(0, 1fr); }
  .bento-rakam { min-height: 112px; }
  .bento-bolum-baslik { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .bento-dugmeler { flex-direction: column; }
  .bento-btn { width: 100%; }
  .bento-referans-izgara { grid-template-columns: minmax(0, 1fr); }
}