/* Satış asistanı v2 (Hedef sekmesi + Özet kartları): "Şu an menünde" listesi, "Bu hafta için önerim", hızlı işlem
   kutucukları (müşteri menüsündeki tür kutucuklarının dili), fotoğraflı ürün seçici, mikrofon, katlanır ana hedef.
   panel.css'in değişkenlerini kullanır; satır içi stil yok (CSP). Telefon önce. */

.hedef-bolum:empty { display: none; }

/* ---------- A) Şu an menünde ---------- */
.menudekiler .kart-baslik:focus { outline: none; }
.menudekiler-bos { color: var(--murekkep-2); font-size: 16px; line-height: 1.45; max-width: 40ch; }
.menudekiler-liste { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.menudekiler-satir {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; align-items: start;
  padding: 10px 10px 4px 12px; border-radius: var(--r-satir); background: var(--yaprak);
  scroll-margin: 90px 0;
}
.menudekiler-satir:focus { outline: none; }
.menudekiler-satir:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 2px; }
.menudekiler-satir.bitti { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cizgi-koyu); }
.menudekiler-satir.bitti .menudekiler-metin b { color: var(--tas); }
.menudekiler-satir.vurgu { animation: satir-vurgu 1.8s var(--egri) both; }
@keyframes satir-vurgu { 0%, 35% { background: var(--nane-acik); box-shadow: inset 0 0 0 2px var(--nane); } 100% { background: var(--yaprak); box-shadow: none; } }
.menudekiler-ikon { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 2px; border-radius: 50%; background: var(--kobalt-acik); color: var(--kobalt); }
.menudekiler-ikon .ikon { width: 19px; height: 19px; }
.menudekiler-metin { display: grid; gap: 2px; min-width: 0; padding-top: 6px; }
.menudekiler-metin > b { font-weight: 760; font-size: 17px; line-height: 1.22; font-stretch: var(--yari-dar); overflow-wrap: anywhere; }
.menudekiler-metin > .ince { font-size: 14px; line-height: 1.35; }
.menudekiler-metin .plan-cumle-duzenle { margin-block: -8px -12px; }
.menudekiler-metin .cumle-yok { color: var(--tas); font-style: normal; }
.cumle-yaziliyor { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-style: normal; color: var(--tas); font-size: 14.5px; }
.cumle-yaziliyor .donen { width: 14px; height: 14px; border-width: 2px; color: var(--kobalt); }
.menudekiler-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 6px; margin-top: 2px; }
.menudekiler-alt > .ince { flex: 1 1 110px; font-size: 14px; line-height: 1.35; }
.menudekiler-eylemler { display: flex; gap: 2px; margin-right: -6px; }
.menudekiler-eylemler:empty { display: none; }
.menudekiler-eylem { min-height: 44px; padding: 0 12px; font-size: 15.5px; }
.menudekiler-satir .plan-cumle-alan { padding-top: 4px; }

/* ---------- B) Bu hafta için önerim ---------- */
.oner-karti { background: var(--kobalt-acik); }
.oner-karti .kart-baslik { margin-bottom: 8px; }
.oner-iskelet { min-height: 132px; border-radius: var(--r-satir); background: linear-gradient(90deg, var(--kobalt-acik) 0%, var(--kobalt-orta) 50%, var(--kobalt-acik) 100%); background-size: 200% 100%; }
.oner-ozet { font-size: 16.5px; line-height: 1.42; color: var(--murekkep-2); max-width: 46ch; }
.oner-ozet:focus { outline: none; }
.oner-satirlar { display: grid; gap: 6px; margin: 12px 0 14px; padding: 0; list-style: none; }
.oner-satir { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; padding: 8px 12px; border-radius: var(--r-kucuk); background: var(--yaprak); }
.oner-ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--kobalt); color: #fff; }
.oner-ikon .ikon { width: 19px; height: 19px; }
.oner-metin { display: grid; gap: 1px; min-width: 0; }
.oner-metin b { font-weight: 740; font-size: 16.5px; line-height: 1.25; overflow-wrap: anywhere; }
.oner-metin .ince { font-size: 14px; color: var(--murekkep-2); overflow-wrap: anywhere; }
.oner-dugmeler { display: grid; gap: 8px; }
.oner-dugmeler .dugme-ikincil { justify-self: stretch; }
.oner-not { margin-top: 10px; font-size: 14px; }
.oner-govde > .dugme-satiri { margin-top: 12px; }
.oner-hazirlaniyor { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--murekkep-2); }
.oner-nokta { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--kobalt); animation: oner-at 1.2s ease-in-out infinite; }
@keyframes oner-at { 50% { opacity: .3; } }
.oner-satir { align-items: start; }
.oner-satir .oner-ikon { margin-top: 2px; }
.oner-neden { font-size: 15px; line-height: 1.38; color: var(--murekkep-2); margin-top: 3px; }
/* "Neden?" — rakamlı dayanaklar (sunucu analizinden) */
.oner-dayanak { margin: 2px 0 2px -10px; }
.oner-dayanak > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border-radius: 999px;
  color: var(--kobalt); font-weight: 700; font-size: 15px; cursor: pointer; list-style: none;
}
.oner-dayanak > summary::-webkit-details-marker { display: none; }
.oner-dayanak > summary .ikon { width: 16px; height: 16px; stroke-width: 2.4; transition: transform 200ms var(--egri); }
.oner-dayanak[open] > summary .ikon { transform: rotate(180deg); }
.oner-dayanak > summary:hover { background: var(--kobalt-acik); }
.oner-dayanak > summary:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 1px; }
.oner-dayanak ul { display: grid; gap: 6px; margin: 2px 0 6px 10px; padding: 0; list-style: none; }
.oner-dayanak li {
  position: relative; padding: 8px 12px 8px 26px; border-radius: 12px; background: var(--kobalt-acik);
  font-size: 14.5px; line-height: 1.4; color: var(--murekkep-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.oner-dayanak li::before { content: ""; position: absolute; left: 11px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--kobalt); }
.oner-veri, .oner-not-az { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; }
.oner-veri { margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--kobalt-orta); color: var(--murekkep-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.oner-not-az { margin-bottom: 10px; padding: 10px 12px; border-radius: var(--r-kucuk); background: var(--yaprak); color: var(--murekkep-2); }
.oner-veri .ikon, .oner-not-az .ikon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--kobalt); }
/* Hedef'te açılır biçim (varsayılan kapalı) */
.oner-katli { padding: 8px; }
.oner-katli-baslik {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; align-items: center; width: 100%; min-height: 64px;
  padding: 8px 4px 8px 10px; border: 0; border-radius: var(--r-satir); background: transparent; color: var(--murekkep); text-align: start; font: inherit;
}
.oner-katli-baslik:hover { background: var(--kobalt-orta); }
.oner-katli-baslik:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 2px; }
.oner-katli-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kobalt); color: #fff; }
.oner-katli-ikon .ikon { width: 22px; height: 22px; }
.oner-katli-metin { display: grid; gap: 2px; min-width: 0; }
.oner-katli-metin b { font-size: 21px; line-height: 1.05; font-weight: 820; font-stretch: var(--dar); }
.oner-katli-ozet { font-size: 14.5px; color: var(--murekkep-2); font-weight: 600; }
.oner-katli-ok { display: grid; place-items: center; color: var(--kobalt); }
.oner-katli-ok .ikon { width: 22px; height: 22px; stroke-width: 2.4; transition: transform 200ms var(--egri); }
.oner-katli-baslik[aria-expanded="true"] .oner-katli-ok .ikon { transform: rotate(180deg); }
.oner-katli > .oner-govde { padding: 6px 10px 12px; }
.oner-katli > .oner-govde[hidden] { display: none; }

/* ---------- C) Hızlı işlemler ---------- */
.hizli > .alt-baslik { margin: 8px 2px 10px; font-size: 25px; line-height: 1; font-weight: 820; letter-spacing: -.004em; }
.hizli-kutular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hizli-kutu {
  position: relative; overflow: hidden; isolation: isolate; min-height: 140px; padding: 16px 14px 15px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; text-align: start;
  border: 0; border-radius: var(--r-blok); background: var(--rz); color: var(--rk); font: inherit;
  transition: transform 160ms var(--egri), box-shadow 200ms ease;
}
.hizli-kutu:active { transform: scale(.965); }
.hizli-kutu:disabled { opacity: .7; }
.hizli-glif { position: absolute; z-index: -1; top: -14px; right: -14px; width: 100px; height: 100px; color: var(--ro); transition: transform 260ms var(--egri); }
.hizli-glif .ikon { width: 100%; height: 100%; stroke-width: 1.5; }
.hizli-kutu:active .hizli-glif { transform: rotate(-8deg) scale(1.06); }
.hizli-ad { font-size: 22px; line-height: .98; font-weight: 820; font-stretch: var(--dar); letter-spacing: -.004em; padding-right: 8px; }
.hizli-alt { font-size: 14px; line-height: 1.25; font-weight: 600; opacity: .8; }
.hizli-kutu[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--rk); }
.hizli-kutu[aria-pressed="true"] .hizli-alt { opacity: 1; }

/* ---------- Fotoğraflı ürün seçici (pencere) ---------- */
.hs-pencere .pencere-govde { gap: 10px; }
.hs-adim, .hs-secici { display: grid; gap: 10px; align-content: start; }
.hs-kategoriler { display: flex; gap: 6px; overflow-x: auto; margin: 0 -22px; padding: 2px 22px 4px; scrollbar-width: none; }
.hs-kategoriler::-webkit-scrollbar { display: none; }
.hs-kategoriler .cip { flex: none; min-height: 44px; }
.hs-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.hs-izgara > li { display: grid; min-width: 0; }
.hs-izgara > li[hidden] { display: none; }
.hs-urun {
  display: grid; grid-template-rows: auto auto auto; gap: 2px; align-content: start; min-height: 44px; padding: 6px 6px 10px;
  border: 0; border-radius: var(--r-satir); background: var(--kum); color: var(--murekkep); text-align: start; font: inherit;
  transition: transform 160ms var(--egri);
}
.hs-urun:active { transform: scale(.97); }
.hs-urun.bitti .hs-foto { filter: grayscale(1); opacity: .6; }
.hs-foto { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 4px; border-radius: 16px; object-fit: cover; background: var(--rz, var(--kum-koyu)); color: var(--ro, var(--tas)); }
.hs-foto .ikon { width: 40px; height: 40px; stroke-width: 1.5; }
.hs-urun-ad { padding: 0 4px; font-weight: 720; font-size: 15.5px; line-height: 1.18; font-stretch: var(--yari-dar); overflow-wrap: anywhere; }
.hs-urun-alt { padding: 0 4px; font-size: 13.5px; color: var(--tas); font-weight: 600; }
.hs-secilen { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; align-items: center; }
.hs-secilen .hs-foto { grid-row: 1 / 3; margin: 0; }
.hs-secilen b { font-size: 19px; line-height: 1.15; font-weight: 780; font-stretch: var(--yari-dar); overflow-wrap: anywhere; align-self: end; }
.hs-secilen .dugme-metin { justify-self: start; align-self: start; margin-left: -10px; }
.hs-soru { margin-top: 6px; font-size: 19px; line-height: 1.15; font-weight: 800; font-stretch: var(--dar); }
.hs-sureler { display: grid; gap: 8px; }
.hs-sure {
  display: grid; gap: 2px; min-height: 64px; padding: 12px 18px; border: 0; border-radius: var(--r-satir);
  background: var(--murekkep); color: #fff; text-align: start; font: inherit;
}
.hs-sure b { font-size: 21px; line-height: 1; font-weight: 800; font-stretch: var(--dar); }
.hs-sure span { font-size: 14px; opacity: .8; }
.hs-sure:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 3px; }
.hs-secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hs-gunler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hs-secenek {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 52px; padding: 8px 12px;
  border: 0; border-radius: var(--r-kucuk); background: var(--rz, var(--kum)); color: var(--rk, var(--murekkep)); text-align: start; font: inherit;
}
.hs-secenek .ikon { width: 20px; height: 20px; flex: none; color: var(--ro, currentColor); }
.hs-secenek b { font-size: 16px; font-weight: 740; line-height: 1.15; }
.hs-secenek span { width: 100%; font-size: 13.5px; font-weight: 600; opacity: .78; font-variant-numeric: tabular-nums; }
.hs-gunler .hs-secenek { justify-content: center; text-align: center; }
.hs-secenek[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--murekkep); }
.hs-secenek[aria-pressed="true"]:not([class*="renk-"]) { background: var(--murekkep); color: #fff; box-shadow: none; }
.hs-secilen-urun { display: none; align-items: center; gap: 6px; }
.hs-turler:has(.hs-secenek[data-deger="urun"][aria-pressed="true"]) + .hs-secilen-urun { display: flex; }
.hs-secilen-urun .ikon { width: 16px; height: 16px; }

/* ---------- D) Kendi cümlenle anlat: mikrofon ---------- */
.satis-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.satis-dugmeler > .dugme { flex: 1 1 160px; }
.mikrofon-dugme[aria-pressed="true"] { background: var(--kirmizi); color: #fff; box-shadow: none; }
.mikrofon-durum { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 10px 14px; border-radius: var(--r-kucuk); background: var(--kirmizi-acik); color: #7A1A12; font-weight: 650; font-size: 15px; }
.mikrofon-durum[hidden] { display: none; }
.mikrofon-not { margin: 6px 0 0; font-size: 13.5px; }
.mikrofon-nokta { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--kirmizi); animation: mikrofon-at 1.1s ease-in-out infinite; }
@keyframes mikrofon-at { 50% { transform: scale(1.5); opacity: .55; } }

/* ---------- E) Ana hedef (katlanır) ---------- */
.ana-hedef { padding: 8px; }
.ana-hedef-ozet {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 64px;
  padding: 8px 8px 8px 10px; border: 0; border-radius: var(--r-satir); background: transparent; color: var(--murekkep); text-align: start; font: inherit;
}
.ana-hedef-ozet:hover { background: var(--kum-koyu); }
.ana-hedef-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--murekkep); color: #fff; }
.ana-hedef-ikon .ikon { width: 22px; height: 22px; }
.ana-hedef-metin { display: grid; gap: 1px; min-width: 0; }
.ana-hedef-metin .ince { font-size: 14px; }
.ana-hedef-metin b { font-size: 21px; line-height: 1.05; font-weight: 820; font-stretch: var(--dar); }
.ana-hedef-degistir { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--kobalt); font-weight: 700; }
.ana-hedef-govde { display: grid; gap: 12px; padding: 8px 10px 12px; }
.ana-hedef-govde[hidden] { display: none; }
.ana-hedef-ipucu { padding: 14px 16px; border-radius: var(--r-satir); background: var(--yaprak); }
.ana-hedef-ipucu .ince .ikon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }

/* ---------- Özet: süresi biten ---------- */
.bitenler { background: var(--amber-acik); }
.bitenler .kart-baslik { margin-bottom: 8px; }
.bitenler-liste { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.bitenler-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 10px 10px 14px; border-radius: var(--r-kucuk); background: var(--yaprak); }
.bitenler-metin { display: grid; gap: 1px; flex: 1 1 180px; min-width: 0; }
.bitenler-metin b { font-weight: 740; font-size: 16.5px; line-height: 1.25; overflow-wrap: anywhere; }
.bitenler-metin .ince { color: #5C3700; font-size: 14px; }

@media (min-width: 600px) {
  .hizli-kutular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hs-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oner-dugmeler { grid-template-columns: 2fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .menudekiler-satir.vurgu { animation: none; background: var(--nane-acik); }
  .mikrofon-nokta { animation: none; }
  .hizli-kutu, .hizli-glif, .hs-urun { transition: none; }
  .oner-iskelet, .oner-nokta { animation: none; }
  .oner-dayanak > summary .ikon, .oner-katli-ok .ikon { transition: none; }
}