/* Satış temsilcisi — "Bize sor" alanı (Özel Baskı / Toptan / Bayi / İletişim) ve takılma ipucu. T-871.
   Renkler kritik.css'teki :root değişkenlerinden; açık/koyu tema kendiliğinden. Mobil önce. */

.temsilci-kutu { margin: clamp(1.4rem, 4vw, 2.4rem) 0; padding: clamp(1rem, 4vw, 1.6rem); border-radius: var(--r);
  background: var(--yuzey); box-shadow: var(--golge); border-top: 5px solid var(--turkuaz); }
.temsilci-kutu > h2 { margin-bottom: .2rem; }
.temsilci { display: flex; flex-direction: column; gap: .7rem; }
.temsilci-bas { display: grid; gap: .1rem; }
.temsilci-baslik { margin: 0; font-size: 1.15rem; }
.temsilci-alt { margin: 0; color: var(--soluk); font-size: .86rem; }
.temsilci-alt::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; border-radius: 50%;
  background: #2BB673; box-shadow: 0 0 0 3px rgba(43, 182, 115, .2); vertical-align: .05em; }

.temsilci-kayit { display: flex; flex-direction: column; gap: .5rem; min-height: 9rem; max-height: min(52vh, 26rem); overflow-y: auto;
  padding: .3rem .1rem; overscroll-behavior: contain; scroll-behavior: smooth; }
.temsilci-mesaj { max-width: 88%; margin: 0; padding: .6rem .85rem; border-radius: 16px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: .97rem; }
.temsilci-temsilci { align-self: flex-start; background: var(--zemin); border: 1px solid var(--cizgi); border-bottom-left-radius: 6px; }
.temsilci-musteri { align-self: flex-end; background: var(--turkuaz); color: #13171F; border-bottom-right-radius: 6px; }
.temsilci-bilgi { align-self: center; max-width: 100%; padding: .3rem .7rem; background: transparent; color: var(--soluk); font-size: .86rem; }
.temsilci-yaziyor { align-self: flex-start; color: var(--soluk); font-style: italic; background: transparent; animation: temsilci-nabiz 1.2s ease-in-out infinite; }
@keyframes temsilci-nabiz { 50% { opacity: .45; } }

.temsilci-oneriler { display: flex; flex-wrap: wrap; gap: .4rem; }
.temsilci-oneriler:empty { display: none; }
.temsilci-oneri { min-height: 40px; padding: .4rem .85rem; border: 1.5px solid var(--turkuaz); border-radius: 999px; background: transparent;
  color: var(--murekkep); font: 500 .9rem var(--govde); cursor: pointer; }
.temsilci-oneri:hover { background: rgba(52, 184, 198, .14); }

.temsilci-form { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "girdi girdi" "stl gonder"; gap: .5rem; align-items: center; }
.temsilci-girdi { grid-area: girdi; width: 100%; min-height: 48px; max-height: 8rem; padding: .7rem .9rem; border: 2px solid var(--cizgi);
  border-radius: 14px; background: var(--zemin); color: inherit; font: inherit; resize: vertical; }
.temsilci-girdi:focus { border-color: var(--turkuaz); outline: none; box-shadow: 0 0 0 3px rgba(52, 184, 198, .3); }
.temsilci-stl { grid-area: stl; justify-self: start; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .9rem;
  border: 1.5px dashed var(--soluk); border-radius: 999px; color: var(--murekkep); font-size: .9rem; font-weight: 600; cursor: pointer; }
.temsilci-stl::before { content: "📎"; }
.temsilci-stl:focus-within { outline: 3px solid var(--amber); outline-offset: 2px; }
.temsilci-gonder { grid-area: gonder; }
.temsilci-gonder:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
@media (min-width: 560px) {
  .temsilci-form { grid-template-columns: auto 1fr auto; grid-template-areas: "stl girdi gonder"; }
}
.temsilci-not { margin: 0; color: var(--soluk); font-size: .8rem; }

.temsilci-odeme { align-self: flex-start; }
.temsilci-ilet { display: grid; gap: .55rem; padding: .9rem; border-radius: 14px; background: var(--zemin); border: 1px solid var(--cizgi); }
.temsilci-ilet label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
.temsilci-ilet input:not([type="checkbox"]), .temsilci-ilet textarea { min-height: 44px; padding: .55rem .8rem; border: 2px solid var(--cizgi);
  border-radius: 12px; background: var(--yuzey); color: inherit; font: inherit; font-weight: 400; }
.temsilci-ilet .temsilci-onay { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.temsilci-onay input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--turkuaz-koyu); flex: none; }
.temsilci-durum { margin: 0; font-size: .88rem; }

/* ── takılma ipucu ve panel (asistan kendiliğinden açılmaz; Sezer kuralı 1) ── */
.temsilci-ipucu { position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 35;
  display: flex; align-items: center; gap: .3rem; padding: .3rem .3rem .3rem .9rem; border-radius: 999px;
  background: var(--yuzey); color: var(--murekkep); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.temsilci-ipucu-ac { min-height: 44px; border: 0; background: transparent; color: inherit; font: 600 .95rem var(--baslik); cursor: pointer; }
.temsilci-ipucu .temsilci-kapat { position: static; }
.temsilci-iletisim { align-self: flex-start; font-weight: 600; }
.temsilci-panel { position: fixed; z-index: 46; left: 0; right: 0; bottom: 0; max-height: 88vh; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0; background: var(--yuzey); color: var(--murekkep); box-shadow: 0 -12px 40px rgba(19, 23, 31, .3);
  border: 1px solid var(--cizgi); }
.temsilci-panel .temsilci-kayit { max-height: 50vh; }
.temsilci-kapat { position: absolute; top: .55rem; right: .6rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
  color: var(--murekkep); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.temsilci-kapat:hover { background: var(--zemin); }
@media (min-width: 640px) {
  .temsilci-panel { left: auto; right: 1.2rem; bottom: 1.2rem; width: 390px; border-radius: 20px; }
}
body:has(.cerez:not([hidden])) .temsilci-ipucu { display: none; }
@media (prefers-reduced-motion: reduce) {
  .temsilci-yaziyor { animation: none; }
  .temsilci-kayit { scroll-behavior: auto; }
}
@media print { .temsilci-ipucu, .temsilci-panel, .temsilci-kutu { display: none; } }