/* GA Mesaj Merkezi — gelen kutusu ve konuşma ekranı (Faz 1.6).
   Tasarım dili GA GTR: beyaz zemin, teal birincil, sarı = süre/aciliyet.
   Önce 390px telefon; geniş ekran en altta. */

:root {
  --gtr-primary: #679da3;
  --gtr-primary-faint: #eaf2f3;
  --gtr-primary-dark: #4e7f85;
  --gtr-accent: #f4b740;
  --gtr-accent-faint: #fdf3dd;
  --gtr-accent-deep: #8a6412;
  --gtr-bg: #ffffff;
  --gtr-surface: #f4f6f7;
  --gtr-ink: #21262b;
  --gtr-ink-soft: #6b7280;
  --gtr-line: #eceff1;
  /* Uyarı çifti: gönderilemeyen mesajın sebebi, aşılan tavan, yükleme hatası.
     Yeni renk değil, dosyada zaten iki yerde yazılı olan ikilinin tek adı. */
  --gtr-uyari-ink: #9a3412;
  --gtr-uyari-zemin: #fdeae1;
  /* "Tekrar Aranacak" saati 15 dakikadan fazla geçti (6 Eki 2026). */
  --gtr-gecikti-ink: #b42318;
  --gtr-gecikti-zemin: #fde8e6;
  --ust-h: 56px;
  /* Güvenli Pati (20 Eki 2026, ikinci mağaza): bakır, Pati marka paletindeki
     tek bakır. Beyaz üstünde bakır YAZI okunmaz: bakır yalnız zemin ve şerit,
     üstündeki yazı koyu mürekkep. Panelin koyu teması yok (bütün GTR
     değişkenleri tek takım); Pati çifti de bu düzene uyar. */
  --pati: #c99a6b;
  --pati-faint: #f6ece2;
  --pati-ink: #21262b;
  /* Azra Design & Events (21 Eki 2026, üçüncü marka): logonun koyu beji ve
     krem zemin. Koyu bej üstünde beyaz yazı 4,9:1 (AA geçer); krem üstünde
     koyu kahve mürekkep. */
  --azra: #806e5f;
  --azra-faint: #f5efe6;
  --azra-ink: #ffffff;
  --azra-ink-dark: #4a3f36;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* `hidden` özniteliği her yerde kazanır: display:flex/grid verilen bir öğede
   tarayıcının varsayılan display:none kuralı eziliyor ve gizli sanılan kutu
   ekranda kalıyor (arama kutusu bu yüzden açılışta görünüyordu). */
[hidden] { display: none !important; }

/* Yalnız yöneticide duran parçalar (16 Eki 2026).
   `document.body.dataset.rol` oturum açılınca yazılır (`uygulama.js · baslat`).
   Nitelik HİÇ yoksa kullanıcı temsilci sayılır: rol bilinmeden yönetici
   parçası ekranda bir an bile görünmesin. Gizlemek yetki DEĞİL; aynı kuralı
   sunucu da uyguluyor (`src/uclar.ts`). */
body:not([data-rol="yonetici"]) [data-yalniz-yonetici] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: var(--gtr-bg);
  color: var(--gtr-ink);
  overscroll-behavior-y: none;
}

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea { font: inherit; color: inherit; }

/* `bottom` bilerek `inset: 0`dan SONRA yazıldı: telefon klavyesi açılınca
   ekranın altı klavye kadar yukarı çekilir, yazma alanı klavyenin üstünde
   kalır. Klavye kapalıyken değişken 0px, hiçbir şey değişmez. */
.ekran {
  position: fixed;
  inset: 0;
  bottom: var(--klavye-payi, 0px);
  display: flex;
  flex-direction: column;
  background: var(--gtr-bg);
}
.ekran[hidden] { display: none !important; }

.ikon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ üst bar */
.ust {
  flex: 0 0 auto;
  background: var(--gtr-primary);
  color: #fff;
  min-height: var(--ust-h);
  padding: 0 6px 0 12px;
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  gap: 4px;
}
/* h2 de aynı görünür: kişi kartının bandındaki başlık ekran okuyucu için h2,
   göz için sol sütundaki "Mesajlar" ile birebir aynı. */
.ust h1, .ust h2 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; }
.ust .bosluk { flex: 1; }
.ust-dugme { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.ust-dugme:active { background: rgba(255, 255, 255, 0.18); }
/* İkonun tek başına anlamı belirsiz kaldığı yerde yanına etiket (ör. Yenile). */
.ust-etiketli { width: auto; min-width: 44px; padding: 0 14px; border-radius: 999px; grid-auto-flow: column; gap: 7px; font-size: 13.5px; font-weight: 600; }

.arama-kutu { flex: 1; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 0 12px; height: 38px; }
.arama-kutu input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font-size: 16px; }
/* 16px altı yazı tipi iOS'ta odaklanınca sayfayı zorla yakınlaştırıyor (telefon denetimi 15 Eylül: 15px ölçüldü). */
.arama-kutu input::placeholder { color: rgba(255, 255, 255, 0.75); }

/* ------------------------------------------------------------ filtreler */
.filtreler {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--gtr-line);
  scrollbar-width: none;
}
.filtreler::-webkit-scrollbar { display: none; }
/* Dokunma hedefi en az 44px (telefon denetimi, 15 Eylül): pil görünüşte 34px
   kalır, görünmez katman üst/alt 6px taşar (5px'te tarayıcıda 43px ölçüldü,
   kenar pikselleri sayılmıyor). Taşma kabın 10px iç boşluğunda kaldığı için
   kaydırma kabı onu kırpmaz; yan taşma 4px, 8px aralıkta komşu pile değmez. */
.pill::before { content: ""; position: absolute; inset: -6px -4px; }

.pill {
  position: relative;
  flex: 0 0 auto;
  border: 1px solid var(--gtr-line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pill .say { font-family: Nunito, sans-serif; font-weight: 800; font-size: 12px; color: var(--gtr-ink-soft); }
.pill[aria-pressed="true"] { background: var(--gtr-primary); border-color: var(--gtr-primary); color: #fff; }
.pill[aria-pressed="true"] .say { color: #fff; opacity: 0.85; }

/* Kanal çipleri (Aşama 2, O1): durum pillerinin altında; sığmazsa ALT
   SATIRA geçer. Yatay kaydırma kaldırıldı (28 Eyl canlı ölçüm): 340 px
   listede "Yorumlar" ekran dışında kalıyor, gizli kaydırma çubuğu yüzünden
   var olduğu da anlaşılmıyordu. Görünen boy 36, dokunma alanı görünmez
   katmanla 46 (pillerle aynı kalıp; 4 px taşma telefonda 44'ün altında
   ölçülüyordu, Huawei denetimi 21 Eki G.2). Satır aralığı 10: alt satıra geçen
   çiplerin dokunma alanları üst üste binmez. */
.gk-kanallar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gtr-line);
  scrollbar-width: none;
}
.gk-kanallar::-webkit-scrollbar { display: none; }
.gk-kanal {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--gtr-surface);
  color: var(--gtr-ink-soft);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gk-kanal::before { content: ""; position: absolute; inset: -5px -4px; }
.gk-kanal .say { font-family: Nunito, sans-serif; font-weight: 800; font-size: 12px; }
.gk-kanal[aria-pressed="true"] { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
/* Bekleyen yorum (21 Eki): Yorumlar çipinin sayısı turuncu rozet. */
/* Telefon (22 Eki K7): görünen boy 36'dan 40'a; görünmez katmanla dokunma
   alanı 50. Masaüstü 36 kalır. */
@media (max-width: 899px) {
  .gk-kanal { min-height: 40px; }
}
.gk-kanal .say.vurgu { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); line-height: 18px; text-align: center; }

/* ------------------------------------------------------------ liste */
.liste { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.satir {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 13px 14px 13px 12px;
  border-bottom: 1px solid var(--gtr-line);
  background: #fff;
}
.satir:active { background: var(--gtr-surface); }
.satir[aria-current="true"] { background: var(--gtr-primary-faint); }

.nokta { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gtr-primary); margin-top: 6px; }
.nokta.gizli { background: transparent; }

/* Profil resmi — liste satırında ve konuşma başlığında aynı kalıp.
   Resim yoksa baş harfli daire, harf de yoksa kişi ikonu. Yeni renk yok:
   daire GTR'nin soluk teal zemini, harf koyu teal. */
.avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--gtr-primary-faint);
  color: var(--gtr-primary-dark);
  font-family: Nunito, sans-serif;
  font-weight: 800;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.bos svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.satir-avatar { width: 42px; height: 42px; font-size: 16px; margin-top: 1px; }
.satir-avatar svg { width: 22px; height: 22px; }

.satir-govde { flex: 1; min-width: 0; }
/* Üç satır (27 Eyl): ad + zaman · son mesaj · "WhatsApp · @kadi" + tek etiket.
   Uzun ad kısalır (min-width: 0), zaman hep sağda görünür kalır. */
.satir-ust { display: flex; align-items: baseline; gap: 8px; }
.satir-isim { min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satir-ust .satir-saat { margin-left: auto; flex: 0 0 auto; }
.satir-onizleme { margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--gtr-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satir-alt { margin-top: 6px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.satir-kaynak { min-width: 0; flex: 1 1 auto; font-size: 12px; color: var(--gtr-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satir-saat { font-size: 11.5px; color: var(--gtr-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Bekleme süresi (Aşama 2, L1): 1 saati geçince vurgu (sarı nokta + koyu
   sarı yazı; açık sarı beyazda okunmuyor), pencerenin son 2 saatinde uyarı. */
.satir-saat.orta, .satir-saat.gec { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.satir-saat.orta { color: var(--gtr-accent-deep); }
.satir-saat.gec { color: var(--gtr-uyari-ink); }
.satir-saat.orta::before, .satir-saat.gec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gtr-accent); }
.satir-saat.gec::before { background: var(--gtr-uyari-ink); }
/* Bitenler: satır soluk, etiket yok. */
.satir.soluk { opacity: .62; }

.sure-rozet {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  white-space: nowrap;
  background: var(--gtr-surface);
  color: var(--gtr-ink-soft);
}
.sure-rozet.orta { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.sure-rozet.gec { background: var(--gtr-accent); color: #3d2c05; }
/* "Şablonla" / "Yazılamaz": aciliyet değil bilgi — gri. */
.sure-rozet.gri { background: var(--gtr-surface); color: var(--gtr-ink-soft); }

/* CRM etiketi (Aşama 2, L2): satırın tek etiketi; müşteri bilgisi en önde. */
.gk-etiket {
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 999px;
  padding: 4px 9px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--gtr-surface);
  color: var(--gtr-ink-soft);
}
.gk-etiket.odeme { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.gk-etiket.sepet { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.gk-etiket.sikayet { background: var(--gtr-gecikti-zemin); color: var(--gtr-gecikti-ink); }

/* ------------------------------------------------------------ boş / yükleniyor */
/* Üst boşluk 24 (Aşama 2, L3): Yorumlar'ın boş durum simgesi üst banda yapışıktı. */
.bosdurum { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 40px; text-align: center; }
.bosdurum .daire { width: 64px; height: 64px; border-radius: 50%; background: var(--gtr-primary-faint); display: grid; place-items: center; color: var(--gtr-primary); }
.bosdurum .daire svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bosdurum h3 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 16px; }
.bosdurum p { font-size: 13.5px; color: var(--gtr-ink-soft); line-height: 1.45; }

.yukleniyor { padding: 22px; text-align: center; font-size: 13px; color: var(--gtr-ink-soft); }

/* ------------------------------------------------------------ konuşma */
.k-avatar-kutu { flex: 0 0 auto; display: flex; margin-right: 8px; }
/* Başlıktaki daire teal barın üstünde duruyor: zemin beyaza, harf teal'e döner
   ki soluk teal daire koyu teal barda kaybolmasın. */
.k-avatar { width: 34px; height: 34px; font-size: 14px; background: #fff; color: var(--gtr-primary-dark); }
.k-avatar svg { width: 19px; height: 19px; }

.k-kim { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; border-radius: 10px; }
.k-kim:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kp-kisi-dugme { display: none; flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600; font-size: 14px; }
.k-kim b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-kim span { display: block; font-size: 11.5px; opacity: 0.85; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "✓ Bitti" telefonda da YAZILI (Hakan, 27 Eyl); uzun adda da sığar çünkü
   ad kısalır (.k-kim min-width: 0), düğme kısalmaz. */
.bitti-dugme { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--gtr-primary); border-radius: 999px; background: var(--gtr-bg); color: var(--gtr-primary-dark); font-weight: 700; font-size: 14px; white-space: nowrap; }
.bitti-dugme:disabled { opacity: .6; }
/* Telefon (Ayşenur gibi 22 Eki K8): Asistan + Bitti yanında ad "ALİ KIZ..."
   diye kesiliyordu. Düğmeler YAZILI kalır (Hakan 27 Eyl, 21 Eki); ad en çok
   iki satıra iner, Bitti'nin dolgusu daralır, dokunma boyu 44 kalır. */
@media (max-width: 599px) {
  .k-kim b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.2;
  }
  .bitti-dugme { padding: 0 10px; }
}


.mini { position: relative; min-height: 44px; border: 1px solid var(--gtr-line); background: #fff; border-radius: 999px; padding: 0 14px; font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.mini svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
/* Düğmenin kendisi 44px; görünmez pay 48px'e tamamlıyor (dar düğme ıskalanıyor). */
.mini::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
.mini.birincil { background: var(--gtr-primary); border-color: var(--gtr-primary); color: #fff; font-weight: 600; }
.mini:active { background: var(--gtr-surface); }
.mini.birincil:active { background: var(--gtr-primary-dark); }

.akis { flex: 1; overflow-y: auto; padding: 14px 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.gun { align-self: center; background: var(--gtr-surface); color: var(--gtr-ink-soft); font-size: 11.5px; border-radius: 999px; padding: 4px 12px; margin: 2px 0; }

.balon { max-width: 78%; border-radius: 16px; padding: 9px 12px 7px; }
.balon p { font-size: 14px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.balon p.balon-tur { font-style: italic; color: var(--gtr-ink-soft); }
.balon .meta { margin-top: 4px; font-size: 10.5px; color: var(--gtr-ink-soft); display: flex; gap: 4px; justify-content: flex-end; }
.balon.gelen { align-self: flex-start; background: #fff; border: 1px solid var(--gtr-line); border-top-left-radius: 6px; }
.balon.gelen .meta { justify-content: flex-start; }
.balon.giden { align-self: flex-end; background: var(--gtr-primary-faint); border-top-right-radius: 6px; }
.balon.medya { padding: 5px 5px 6px; }
.balon.medya img { display: block; max-width: 100%; max-height: 300px; border-radius: 12px; }
/* Fotoğraf yer tutucusu (Aşama 2, K1): kutu fotoğraf gelmeden yerini tutar,
   akış kaymaz. Ölçü bilinmiyorsa 240×240, biliniyorsa oranıyla. */
.gk-foto { display: block; width: 240px; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--gtr-surface); }
.gk-foto.sabit { height: 240px; }
.balon.medya .gk-foto img { width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; }
/* Ürün bağlantısının kartı (Aşama 2, K2). */
.gk-urun { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px; border-radius: 12px; background: var(--gtr-surface); color: var(--gtr-ink); text-decoration: none; min-width: min(240px, 100%); }
a.gk-urun:hover { background: var(--gtr-primary-faint); }
.gk-urun-gorsel { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--gtr-bg); }
.balon .gk-urun-gorsel { max-height: 56px; }
.gk-urun-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gk-urun-bilgi b { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gk-urun-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.gk-urun-fiyat { font-weight: 600; font-variant-numeric: tabular-nums; }
.gk-urun-stok { color: var(--gtr-primary-dark); font-weight: 600; }
.gk-urun-stok.yok { color: var(--gtr-uyari-ink); }
.gk-urun-ac { color: var(--gtr-primary-dark); font-weight: 600; text-decoration: underline; }
.gk-urun-yer { margin-top: 8px; height: 72px; border-radius: 12px; background: var(--gtr-surface); }
/* Otomatik mesaj etiketi (Aşama 2, K3): balon aynı, meta satırında yazı. */
.gk-otomatik { font-weight: 600; color: var(--gtr-primary-dark); }
.gk-otomatik::after { content: "·"; margin-left: 4px; color: var(--gtr-ink-soft); font-weight: 400; }
.balon .ek-kutu { min-width: 150px; padding: 14px 10px; border-radius: 12px; background: var(--gtr-surface); color: var(--gtr-ink-soft); font-size: 12.5px; text-align: center; overflow-wrap: anywhere; }
/* Alınamayan ek normal dosya kutusundan ayrılsın: hızlı bakışta kaybolan şey görünür. */
.balon .ek-kutu-hata { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
/* Ek kutusu bağlantıya döndüğünde (bozuk medya yedeği) düğme gibi görünsün. */
a.ek-kutu { display: block; text-decoration: none; }
/* Video balonun içinde oynar; ölçüsü resimle aynı sınırda kalır. */
.balon.medya .ek-video { display: block; width: 100%; max-width: 260px; max-height: 300px; border-radius: 12px; background: var(--gtr-ink); }
.balon.medya .ek-ses { display: block; width: 240px; max-width: 100%; margin: 2px 0; }
.balon.medya img.buyutulebilir { cursor: zoom-in; }
/* Tam ekran görsel penceresi: konuşmanın üstünde, koyu zeminde. */
.gorsel-buyutec { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12, 18, 16, 0.92); }
.gorsel-buyutec img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; }
.gorsel-buyutec__kapat { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: var(--gtr-bg); font-size: 17px; line-height: 1; cursor: pointer; }
.gorsel-buyutec__kapat:hover { background: rgba(255, 255, 255, 0.28); }
.balon .meta.ic { padding: 0 6px; }
/* Paylaşılan Instagram gönderisi: kimin paylaştığı üstte, açıklamanın ilk
   satırları resmin altında (en çok üç satır). */
.balon.paylasim { min-width: min(240px, 100%); }
.paylasim-baslik { font-size: 11.5px; font-weight: 600; color: var(--gtr-ink-soft); margin-bottom: 6px; }
.balon.medya .paylasim-baslik { padding: 4px 7px 0; }
.balon p.paylasim-aciklama { margin-top: 6px; font-size: 13px; line-height: 1.38; color: var(--gtr-ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.balon.medya p.paylasim-aciklama { padding: 0 7px; }
/* Instagram hikaye bağlamı: balonun hemen üstünde, balonla aynı hizada. */
.hikaye-satiri { display: flex; align-items: center; gap: 8px; max-width: 78%; margin-bottom: -2px; font-size: 11.5px; color: var(--gtr-ink-soft); }
.hikaye-satiri.gelen { align-self: flex-start; }
.hikaye-satiri.giden { align-self: flex-end; }
.hikaye-baglanti { display: block; flex: none; line-height: 0; }
.hikaye-gorsel { width: 36px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gtr-line); background: var(--gtr-surface); }

.not-kart { align-self: stretch; background: var(--gtr-accent-faint); border-left: 3px solid var(--gtr-accent); border-radius: 10px; padding: 9px 12px; }
.not-kart span { font-size: 10.5px; font-weight: 600; color: var(--gtr-accent-deep); letter-spacing: 0.02em; }
.not-kart p { font-size: 13.5px; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ yazma alanı */
.yazma {
  flex: 0 0 auto;
  border-top: 1px solid var(--gtr-line);
  background: #fff;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}
/* Klavye açıkken telefonun alt güvenli alanı zaten klavyenin altında kalıyor,
   ikinci kez boşluk bırakmıyoruz. */
body.klavye-acik .yazma { padding-bottom: 8px; }

.yazma-ust { display: flex; align-items: center; gap: 8px; }

.yazma-sayac {
  margin-left: auto;
  margin-bottom: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  background: var(--gtr-surface);
  color: var(--gtr-ink-soft);
}
/* Tavan aşıldı: Gönder de edilgen, sayaç da uyarı rengine geçiyor. */
.yazma-sayac.asti { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); font-weight: 600; }

.yazma-sure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 7px 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--gtr-ink-soft);
}
.yazma-sure svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; }
/* Süre azaldıkça kart rozetiyle aynı sarı: son 3 saat soluk, son 1 saat dolu. */
.yazma-sure.orta { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.yazma-sure.gec { background: var(--gtr-accent); color: #3d2c05; font-weight: 600; }
/* İnsan temsilci önizlemesi: 24 saatlik sayacın sarısı DEĞİL. Sarı "acele et"
   demek; burada acele edilecek bir şey yok, farklı bir hak anlatılıyor. */
.yazma-sure.insan-temsilci {
  background: var(--gtr-primary-faint);
  color: var(--gtr-primary-dark);
  font-weight: 600;
}

.yazma-satir { display: flex; align-items: flex-end; gap: 8px; }

#yazmaKutu {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  max-height: 132px;
  padding: 13px 15px;
  border: 1px solid var(--gtr-line);
  border-radius: 20px;
  /* 16px altı yazı tipi iOS'ta odaklanınca sayfayı zorla yakınlaştırıyor. */
  font-size: 16px;
  line-height: 1.35;
  resize: none;
  outline: none;
  background: #fff;
  overflow-y: hidden;
}
/* Kutu + içindeki emoji düğmesi (14 Eki). Kap kutunun yerini alır; kutu
   eskisi gibi tüm genişliği kaplar, sağında düğmeye yer bırakılır. */
.yazma-kutu-kap { flex: 1; min-width: 0; position: relative; display: flex; }
.yazma-kutu-kap #yazmaKutu { padding-right: 46px; }
.yazma-kutu-kap .emoji-dugme { position: absolute; right: 6px; bottom: 6px; }
#yazmaKutu.tavanda { overflow-y: auto; }
#yazmaKutu:focus { border-color: var(--gtr-primary); }
#yazmaKutu::placeholder { color: var(--gtr-ink-soft); }

.gonder-dugme {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gtr-primary);
  color: #fff;
  display: grid;
  place-items: center;
}
.gonder-dugme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gonder-dugme:disabled { background: var(--gtr-surface); color: #b4bcc2; cursor: default; }
.gonder-dugme:not(:disabled):active { background: var(--gtr-primary-dark); }

/* ------------------------------------------------- ek gönderme (fotoğraf/dosya) */
/* Ataç, gönder düğmesiyle aynı ölçüde ama sessiz: birincil eylem gönderme,
   dosya eklemek ikincil. Renk uydurulmadı, hepsi mevcut GTR değişkenleri. */
.atac-dugme {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gtr-surface);
  color: var(--gtr-primary-dark);
  display: grid;
  place-items: center;
}
.atac-dugme svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atac-dugme:disabled { color: var(--gtr-ink-soft); opacity: 0.45; cursor: default; }
.atac-dugme:not(:disabled):active { background: var(--gtr-primary-faint); }

/* Dosya seçici görünmez ama `hidden` DEĞİL: gerçekten gizlenmiş input bazı
   tarayıcılarda programla açılamıyor. */
.gizli-secici { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ek-serit {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 8px;
  padding: 8px 9px;
  border: 1px solid var(--gtr-line);
  border-radius: 14px;
  background: var(--gtr-surface);
}
.ek-onizleme { display: flex; align-items: center; gap: 10px; }
.ek-gorsel { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--gtr-bg); }
.ek-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ek-ikon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--gtr-primary-faint);
  color: var(--gtr-primary-dark);
  display: grid;
  place-items: center;
}
.ek-ikon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ek-bilgi { flex: 1; min-width: 0; }
.ek-bilgi b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-bilgi span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--gtr-ink-soft); }
.ek-kaldir {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gtr-bg);
  color: var(--gtr-ink-soft);
  font-size: 13px;
  display: grid;
  place-items: center;
}
.ek-kaldir:active { background: var(--gtr-line); }
/* Görünen 34, dokunma alanı 44 (Aşama 2, M1). */
.ek-kaldir { position: relative; }
.ek-kaldir::before { content: ""; position: absolute; inset: -5px; }
.ek-durum button { position: relative; }
.ek-durum button::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
#aramaKapat { position: relative; }
#aramaKapat::before { content: ""; position: absolute; inset: -6px; }

/* Yükleme sürerken yazı ilerledikçe (%9 → %100) satır sayısı oynayıp yazma
   alanının boyunu değiştirmesin: satıra sabit yükseklik verilir. */
.ek-durum { display: flex; align-items: center; gap: 10px; min-height: 17px; font-size: 11.5px; line-height: 1.4; color: var(--gtr-ink-soft); }
.ek-durum.hata { color: var(--gtr-uyari-ink); font-weight: 600; }
.ek-durum button { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--gtr-primary-dark); text-decoration: underline; }

.ek-cubuk { height: 3px; border-radius: 999px; background: var(--gtr-line); overflow: hidden; }
.ek-cubuk span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--gtr-primary); transition: width 0.18s ease; }
/* Yüzde bilinmiyorken çubuk kayar: "bir şey oluyor" bilgisini yazıya gerek
   kalmadan verir ve şeridin boyu sabit kalır. */
.ek-cubuk.belirsiz span { width: 40%; animation: cubuk-kay 1.1s ease-in-out infinite; }
@keyframes cubuk-kay { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .ek-cubuk.belirsiz span { animation: none; width: 100%; opacity: 0.45; } }

/* Sürükle-bırak yalnız masaüstünde: dokunmatikte böyle bir hareket yok. */
.birakma-alani { display: none; }

.yazma-kilit {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--gtr-surface);
  border-radius: 14px;
  padding: 12px 14px;
}
.yazma-kilit svg { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; fill: none; stroke: var(--gtr-ink-soft); stroke-width: 2; stroke-linecap: round; }
.yazma-kilit p { font-size: 13.5px; line-height: 1.45; color: var(--gtr-ink); }
.kilit-bitti { margin-top: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--gtr-primary); color: #fff; font-weight: 700; font-size: 14px; }
.kilit-bitti:disabled { opacity: .6; }
.kilit-bitti:not([hidden]) + .kilit-bitti { margin-left: 8px; }

/* Gönderilemeyen mesajın altındaki sessiz satır. */
.gonderim-hata {
  align-self: flex-end;
  max-width: 78%;
  margin-top: -6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 2px 10px;
  text-align: right;
}
.gonderim-hata span { font-size: 11.5px; line-height: 1.4; color: var(--gtr-uyari-ink); }
/* Meta'nın kendi İngilizce ret cümlesi: Türkçe sebebin ALTINDA, tam satır. */
.gonderim-hata span.gonderim-hata-meta { flex-basis: 100%; color: var(--gtr-ink-soft); font-size: 11px; }
.gonderim-hata button {
  position: relative;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gtr-primary);
  padding: 4px 2px;
}
/* Görünen yazı küçük, parmak hedefi 44px (Faz 1.6'daki 29px dersi). */
.gonderim-hata button::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 44px; transform: translateY(-50%); }

/* Sunucu "sırada bekliyor" dediğinde çıkan açıklama: hata DEĞİL, nötr. */
.gonderim-not,
.gonderim-hata span.not {
  align-self: flex-end;
  max-width: 78%;
  margin-top: -6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--gtr-ink-soft);
  text-align: right;
}
.gonderim-hata span.not { align-self: auto; max-width: none; margin-top: 0; }

/* "Vazgeç" ikincil bir eylem: sebebin yanında sessiz durur. */
.gonderim-hata button.vazgec { color: var(--gtr-ink-soft); font-weight: 500; }

/* Listede: bu kişiye cevap gitmedi. */
.satir-gitmedi {
  font-size: 11.5px;
  font-weight: 600;
  color: #9a3412;
  background: #fdeae1;
  border-radius: 999px;
  padding: 3px 8px;
}

/* Yolda olan mesaj hafif soluk; gönderilemeyen soluk DEĞİL, dikkat çekmeli. */
.balon.bekleyen { opacity: 0.72; }
.balon.gonderilemedi { opacity: 1; background: #fdf1ea; }

/* ------------------------------------------------------------ yaprak (alttan açılan) */
/* `bottom` klavye payını izliyor (`.ekran` ve şablon paneliyle aynı kural): not
   yaprağında kutu kendiliğinden odaklanıyor, pay olmadan kutu da "Kaydet" de
   klavyenin arkasında kalıyordu (telefon denetimi 15 Eylül, 390x844). */
.yaprak-zemin { position: fixed; inset: 0; bottom: var(--klavye-payi, 0px); background: rgba(20, 35, 40, 0.4); display: flex; align-items: flex-end; z-index: 20; }
.yaprak-zemin[hidden] { display: none !important; }
/* Tavan yüzde: kabın (zemin) yüksekliğinden okunuyor, klavye açılınca yaprak da
   daralır. `vh` klavyenin altına taşırdı. */
.yaprak { width: 100%; background: #fff; border-radius: 22px 22px 0 0; padding: 8px 0 calc(22px + env(safe-area-inset-bottom)); max-height: 85%; overflow-y: auto; }
body.klavye-acik .yaprak { padding-bottom: 12px; }
.tutamak { width: 38px; height: 4px; border-radius: 2px; background: var(--gtr-line); margin: 0 auto 12px; }
.yaprak h4 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 16px; padding: 0 18px 4px; }
.yaprak .yardim { font-size: 12.5px; color: var(--gtr-ink-soft); padding: 0 18px 10px; }

.secenek { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 18px; border-top: 1px solid var(--gtr-line); }
.secenek:active { background: var(--gtr-surface); }
.secenek .kap { width: 34px; height: 34px; border-radius: 10px; background: var(--gtr-surface); display: grid; place-items: center; color: var(--gtr-primary); flex: 0 0 auto; }
.secenek .kap svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.secenek b { font-weight: 600; font-size: 14.5px; display: block; }
.secenek small { font-size: 11.5px; color: var(--gtr-ink-soft); }

.yaprak-alan { padding: 4px 18px 14px; }
.yaprak-alan textarea { width: 100%; min-height: 110px; border: 1px solid var(--gtr-line); border-radius: 14px; padding: 12px; font-size: 16px; resize: none; outline: none; background: #fff; }
.yaprak-alan textarea:focus { border-color: var(--gtr-primary); }
.genis-dugme { width: 100%; min-height: 48px; border-radius: 14px; background: var(--gtr-primary); color: #fff; font-weight: 600; font-size: 15px; margin-top: 10px; }
.genis-dugme:active { background: var(--gtr-primary-dark); }

/* ------------------------------------------------------------ giriş */
.giris { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 26px; max-width: 420px; margin: 0 auto; width: 100%; }
.giris h2 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 22px; text-align: center; }
.giris p.alt { text-align: center; font-size: 13.5px; color: var(--gtr-ink-soft); margin-top: -8px; }
.giris input { width: 100%; min-height: 50px; border: 1px solid var(--gtr-line); border-radius: 14px; padding: 0 14px; font-size: 16px; outline: none; background: #fff; }
.giris input:focus { border-color: var(--gtr-primary); }
.giris .hata { font-size: 13px; color: #9a3412; min-height: 18px; text-align: center; }

/* ------------------------------------------------------------ kısa uyarı şeridi */
.bilgi-serit { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); background: var(--gtr-ink); color: #fff; border-radius: 14px; padding: 12px 14px; font-size: 13.5px; z-index: 30; display: flex; align-items: center; gap: 10px; }
.bilgi-serit[hidden] { display: none !important; }
.bilgi-serit button { margin-left: auto; font-weight: 600; color: var(--gtr-accent); }
/* "Geri al": şeridin koyu zemininde okunur, "Tamam"ın hemen solunda. */
.bilgi-serit .bilgi-eylem { flex: 0 0 auto; min-height: 44px; padding: 0 10px; border: 0; background: transparent; font-weight: 800; }
.bilgi-serit .bilgi-eylem:not([hidden]) + button { margin-left: 0; }
/* Telefonda şerit ÜSTTE, başlığın hemen altında. Altta dururken yazma alanının
   tam üstüne oturuyordu: Gönder'in ortasına basan parmak "Tamam"a basıyordu,
   klavye açıkken de şerit klavyenin arkasında kalıp "gönderilemedi" uyarısı
   hiç görünmüyordu (telefon denetimi 15 Eylül, 390x844). */
@media (max-width: 899px) {
  .bilgi-serit { top: calc(env(safe-area-inset-top) + var(--ust-h) + 8px); bottom: auto; }
}

/* ------------------------------------------------------------ kişi kartı (üçüncü sütun)
   Kart TABANDA KAPALI: telefonda ve 1400 pikselin altındaki masaüstünde sütun
   olarak çizilmez; orada "Kişi" düğmesiyle çekmece açılır (Aşama 2, P3).
   Renkler mevcut GTR değişkenlerinden; sarı yalnız süre/aciliyet için. */
.kisi-kart {
  display: none;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-left: 1px solid var(--gtr-line);
}
.kisi-kart[hidden] { display: none !important; }
/* Bant kartın kenarına yapışır (kabın kendi dolgusu yok), içerik gövdede
   boşluklu durur. Kaydırma da gövdede: bant yukarıda sabit kalıyor. */
.kk-ust { border-left: 0; }
.kk-govde {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 18px 16px 24px;
}

/* Kimlik: resim, ad, @kullaniciadi ve kanal rozeti tek blok halinde ortada. */
.kk-kimlik { display: grid; justify-items: center; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--gtr-line); }
.kk-avatar-kutu { display: flex; margin-bottom: 6px; }
.kk-avatar { width: 76px; height: 76px; font-size: 28px; }
.kk-avatar svg { width: 38px; height: 38px; }
.kk-ad { font-family: Nunito, sans-serif; font-weight: 800; font-size: 17px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.kk-kadi { font-size: 12.5px; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.kk-rozet { margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--gtr-ink-soft); background: var(--gtr-surface); border-radius: 999px; padding: 4px 10px; }

/* Sessiz bilgi satırları (kaç zamandır yazıyor, telefonu). */
.kk-satirlar { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--gtr-line); }
.kk-satir { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--gtr-ink); }
.kk-satir svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--gtr-ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kk-bolum { display: grid; gap: 8px; }
/* ⛔ `text-transform: uppercase` YOK: Türkçe "i" harfini "I" yapıyor
   ("DIĞER" olurdu). Büyük harfli başlıklar iskelette elle yazılı. */
.kk-bolum h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--gtr-ink-soft); }

/* Diğer kanaldaki konuşmalar: her satır tıklanır, o konuşmaya geçer. */
.kk-diger { display: grid; gap: 8px; }
.kk-diger-satir { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--gtr-line); border-radius: 12px; background: #fff; }
.kk-diger-satir:hover { background: var(--gtr-primary-faint); border-color: var(--gtr-primary-faint); }
.kk-diger-satir:active { background: var(--gtr-primary-faint); }
.kk-diger-satir .kk-diger-metin { flex: 1; min-width: 0; }
.kk-diger-satir b { display: block; font-weight: 600; font-size: 13px; }
.kk-diger-satir small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--gtr-ink-soft); }
.kk-diger-satir .kk-ok { flex: 0 0 auto; color: var(--gtr-ink-soft); font-size: 15px; }

/* Not: masaüstünde yaprak açmadan, doğrudan yazılır. */
#kisiKartNot { width: 100%; min-height: 92px; border: 1px solid var(--gtr-line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.4; resize: none; outline: none; background: #fff; }
#kisiKartNot:focus { border-color: var(--gtr-primary); }
#kisiKartNot::placeholder { color: var(--gtr-ink-soft); }
.kk-not-alt { display: flex; align-items: center; gap: 10px; }
.kk-not-durum { flex: 1; min-width: 0; font-size: 11.5px; color: var(--gtr-ink-soft); }
.kk-not-kaydet { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--gtr-primary); color: #fff; font-size: 13px; font-weight: 600; }
.kk-not-kaydet:hover:not(:disabled) { background: var(--gtr-primary-dark); }
.kk-not-kaydet:disabled { background: var(--gtr-surface); color: #b4bcc2; cursor: default; }

/* ------------------------------------------------------------ geniş ekran */
@media (min-width: 900px) {
  /* Bırakma alanı konuşma ekranını kaplar; `hidden` kalktığında görünür. */
  .birakma-alani:not([hidden]) {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: var(--gtr-primary-faint);
  }
  .birakma-kutu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 26px 34px;
    border: 2px dashed var(--gtr-primary);
    border-radius: 18px;
    background: var(--gtr-bg);
    text-align: center;
  }
  .birakma-kutu svg { width: 26px; height: 26px; fill: none; stroke: var(--gtr-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .birakma-kutu b { font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px; }
  .birakma-kutu span { font-size: 12.5px; color: var(--gtr-ink-soft); }

  body { background: var(--gtr-surface); }
  .ekran { position: static; height: 100%; }
  /* Bırakma katmanı `inset: 0` ile konumlanıyor; konuşma ekranı kap olmazsa
     katman pencerenin tamamını, yani listeyi ve kişi kartını da örterdi. */
  /* `min-width: 0` OLMADAN esnek sütun kendi en dar içeriğinden daha fazla
     daralamıyor ve sağdaki kişi kartının üstüne taşıyor. `overflow: hidden`
     ise şablon katmanının (mutlak konumlu, kabı burası) sütun dışına
     boyanmasını yapısal olarak imkânsız kılıyor. Canlıda 1568 pikselde panel
     kişi sütununun içine giriyordu. */
  #ekranKonusma { position: relative; min-width: 0; overflow: hidden; }
  /* 28 Eyl 2026 · sahne artık TAM GENİŞLİK: 1920'de içerik 1180 pikselde
     kesilip iki yanda boş şerit bırakıyordu. Kenar çizgileri de kalktı
     (pencere kenarına yapışık çizgi çerçeve gibi duruyordu). Sütun
     genişlikleri değişmedi; kazanılan yeri esnek sütun (konuşma / kişi
     kartı) alıyor. */
  .sahne { display: flex; height: 100%; width: 100%; background: var(--gtr-bg); }
  .sahne > #ekranListe { flex: 0 0 380px; border-right: 1px solid var(--gtr-line); }
  .sahne > #ekranKonusma { flex: 1; }
  /* Liste geniş ekranda hep açık kalır; konuşma seçilmedikçe sağ taraf boştur.
     Giriş ekranı bu kuralın DIŞINDA: o hiçbir zaman listeyle yan yana durmaz. */
  .sahne:not(.giris-modu):not(.otomasyon-modu) > #ekranListe[hidden] { display: flex !important; }
  .sahne > #ekranGiris { flex: 1; }
  /* Otomasyon ekranı sahnenin tamamını alır: yanında yarım bir liste sütunu
     durmasın, okuma genişliği makul kalsın. */
  .sahne > #ekranOtomasyon { flex: 1; min-width: 0; }
  /* 28 Eyl: sahne tam genişlik olunca esnek olmayan bu iki ekran kendi
     içeriğinin genişliğinde kalıyor ve sağda kocaman boşluk bırakıyordu
     (1920'de ölçüldü: 955 px içerik, 733 px boş). */
  .sahne > #ekranToplu,
  .sahne > #ekranAranacaklar,
  .sahne > #ekranCevapsiz,
  .sahne > #ekranSonAramalar,
  .sahne > #ekranSiparis,
  /* 23 Eki: Ürün öner de (deneme turu bulgu 6: listede yoktu, ekran
     içeriği kadar kalıyor, sağ yarı boş duruyordu). */
  .sahne > #ekranOzelSecim,
  /* 8 Eki: müşteri kartı da (canlıda 1568'de başlık 880 px'te bitiyordu). */
  .sahne > #ekranMusteri { flex: 1; min-width: 0; }
  .geri-dugme { display: none; }
  /* Üst sınır 640 (Aşama 2, K4): 1920'de giden balon 650 piksele uzuyor,
     uzun cevap tek satırda okunmuyordu. */
  .balon { max-width: min(62%, 640px); }
  .gonderim-hata { max-width: min(62%, 640px); }
  .gonderim-not { max-width: min(62%, 640px); }
  /* Konuşma seçilmeden sağ taraf bomboş beyaz kalıyordu: yerine Bugün paneli
     (Aşama 2, O5). Konuşmanın öbür parçaları gizli, yalnız panel çizilir. */
  .sahne:not(.otomasyon-modu) > #ekranKonusma[hidden] { display: flex !important; }
  .sahne > #ekranKonusma[hidden] > * { display: none !important; }
  .sahne:not(.otomasyon-modu) > #ekranKonusma[hidden] > .gk-bugun { display: flex !important; }
}

/* ------------------------------------------------------------ üç sütun (1150+)
   Hakan'ın seçtiği masaüstü düzeni: solda liste, ortada konuşma, sağda
   konuşulan kişi. 900–1150 arası yukarıdaki iki sütun düzeni AYNEN kalır. */
@media (min-width: 1150px) {
  .sahne > #ekranListe { flex: 0 0 340px; }
  /* Kart yalnız bir konuşma seçiliyken açılır: seçim yokken `hidden` duruyor
     ve orta sütun bütün genişliği alıp "Soldan bir konuşma seç" diyor. */
  /* Aşama 2 (P1): kart sütunu 320, 1600 ve üstü 380 (en altta). Sütun
     olarak ancak 1400'de açılır (aşağıdaki blok): 1024'ten itibaren solda
     232 piksellik menü de durduğu için 1150'de konuşmaya ~260 piksel
     kalıyordu. Kart bu blokta genişliğini alır, görünürlüğü 1400'de. */
  .sahne:not(.giris-modu):not(.otomasyon-modu) > .kisi-kart { flex: 0 0 320px; }
}
@media (min-width: 1400px) {
  .sahne:not(.giris-modu):not(.otomasyon-modu) > .kisi-kart { display: flex; }
  /* Aynı geri sayım iki yerde durmasın: kartta büyük hali var. */
  .yazma-sure { display: none; }
  /* İSTİSNA: insan temsilci rozeti gizlenmez. Kutunun NİÇİN açık olduğunu
     söyleyen tek yazı bu; kartın sayacıyla aynı şey değil ve kutunun hemen
     üstünde durması gerekiyor (Meta ekran kaydında ikisi bir arada görünür). */
  .yazma-sure.insan-temsilci { display: inline-flex; }
}

/* ------------------------------------------------------------ şablonlar (Faz 3.1)
   Şablon = Meta'da onaylanmış WhatsApp mesajı; 24 saatlik pencere kapandığında
   müşteriye ulaşmanın tek yolu. Yeni renk YOK: hepsi mevcut GTR değişkenleri.
   Sarı yine yalnız "dikkat" için (pazarlama şablonu ücretli, eksik değer). */

/* Pencere kapalıyken yazma kutusunun YERİNE geçen düğme. */
.sablon-kapi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  margin-top: 10px;
  border-radius: 16px;
  background: var(--gtr-primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.sablon-kapi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sablon-kapi:active { background: var(--gtr-primary-dark); }

/* Pencere açıkken kutunun yanındaki ikinci, sessiz yol. */
.sablon-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  min-height: 34px;
  margin: 0 0 7px 2px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--gtr-line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: var(--gtr-ink-soft);
}
.sablon-mini svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Görünen düğme 34px; görünmez pay parmak hedefini 44px'e tamamlıyor. Taşma
   her yönde 5px, alttaki 7px boşluğu aşmıyor: komşu öğeden dokunuş çalmaz. */
.sablon-mini::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sablon-mini:active { background: var(--gtr-surface); }

/* Panel: telefonda alttan açılır, masaüstünde konuşmanın sağ altına oturur. */
.sablon-zemin {
  position: fixed;
  inset: 0;
  /* `.ekran` ile aynı kural: klavye açılınca panelin dibi (gönder düğmesi)
     klavyenin arkasında kalmasın. Klavye kapalıyken değişken 0px. */
  bottom: var(--klavye-payi, 0px);
  z-index: 24;
  background: rgba(20, 35, 40, 0.4);
  display: flex;
  align-items: flex-end;
}
.sablon-zemin[hidden] { display: none !important; }

.sablon-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Yüzde, kabın (zemin) yüksekliğinden okunuyor; klavye açılıp alan
     daralınca panel de daralır. `vh` olsaydı klavyenin altına taşardı. */
  max-height: 88%;
  min-height: 0;
  padding-top: 8px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}

.sablon-ust { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 2px 8px 6px; }
.sablon-ust b { flex: 1; min-width: 0; padding-left: 8px; font-family: Nunito, sans-serif; font-weight: 800; font-size: 16px; }
.sablon-geri, .sablon-kapat { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--gtr-ink-soft); font-size: 14px; }
.sablon-geri svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sablon-geri:active, .sablon-kapat:active { background: var(--gtr-surface); }

/* `overflow-x: hidden` bilerek: yalnız dikey kaydırma var. Yatay kaydırma
   çubuğu çıkıyorsa bu bir tasarım kusurudur, kaydırarak çözülmez. */
.sablon-govde { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; }
.sablon-yardim { font-size: 12.5px; line-height: 1.45; color: var(--gtr-ink-soft); padding-bottom: 11px; }
.sablon-yardim:empty { display: none; }

.sablon-arama {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 12px;
  margin-bottom: 11px;
  border: 1px solid var(--gtr-line);
  border-radius: 14px;
  background: #fff;
}
.sablon-arama .ikon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gtr-ink-soft); }
/* 16px altı yazı tipi iOS'ta odaklanınca sayfayı zorla yakınlaştırıyor. */
/* Girdi kutunun tüm yüksekliğini alıyor: kutunun üst/alt kenarına basan parmak
   da yazmaya başlasın (eskiden girdi 20px, kutu 46px idi). */
.sablon-arama input { flex: 1; min-width: 0; align-self: stretch; min-height: 44px; border: 0; outline: none; background: none; font-size: 16px; }
.sablon-arama input::placeholder { color: var(--gtr-ink-soft); }
.sablon-arama:focus-within { border-color: var(--gtr-primary); }

/* "Liste ne zaman tazelendi" + elle yenileme. Sessiz duruyor: birincil eylem
   şablon seçmek, bu satır ancak "şablonum neden yok" anında aranır. */
.sablon-senkron {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 11px;
  font-size: 11.5px;
  color: var(--gtr-ink-soft);
}
.sablon-senkron span { flex: 1; min-width: 0; }
.sablon-senkron button {
  position: relative;
  flex: 0 0 auto;
  padding: 6px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gtr-primary);
  text-decoration: underline;
}
/* Görünen yazı küçük, parmak hedefi 44px (Faz 1.6'daki 29px dersi). */
.sablon-senkron button::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 44px; transform: translateY(-50%); }
.sablon-senkron button:disabled { color: var(--gtr-ink-soft); text-decoration: none; cursor: default; }

.sablon-liste { display: grid; gap: 8px; }
.sablon-satir {
  display: grid;
  /* `minmax(0, 1fr)` ŞART: ızgara sütunu varsayılan olarak en dar içeriğinden
     küçülemiyor ve tek satırlık uzun bir başlık sütunu panelden geniş
     yapıyordu; panelin altında yatay kaydırma çubuğu çıkıyordu (canlı ölçüm). */
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: 12px 13px;
  border: 1px solid var(--gtr-line);
  border-radius: 14px;
  background: #fff;
}
.sablon-satir:hover { border-color: var(--gtr-primary-faint); background: var(--gtr-primary-faint); }
.sablon-satir:active { background: var(--gtr-surface); }
.sablon-satir-ad { min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Ne zaman kullanılır" satırı: satırın asıl bilgisi, o yüzden mesaj
   önizlemesinden bir ton koyu ve mürekkep renginde. */
.sablon-satir-nezaman { min-width: 0; font-size: 12.5px; line-height: 1.42; color: var(--gtr-ink); overflow-wrap: anywhere; }
.sablon-satir-metin { min-width: 0; font-size: 12.5px; line-height: 1.42; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.sablon-satir-alt { font-size: 11.5px; color: var(--gtr-ink-soft); }

/* Değişken kutuları. Hiçbiri önceden doldurulmaz; altındaki küçük düğmeler
   yalnız ÖNERİ, basmadan değer kutuya girmez. */
.sablon-alanlar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.sablon-alan label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--gtr-ink-soft); }
.sablon-alan input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--gtr-line);
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  background: #fff;
}
.sablon-alan input:focus { border-color: var(--gtr-primary); }
.sablon-alan input::placeholder { color: var(--gtr-ink-soft); }
.sablon-oneriler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sablon-oneri {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--gtr-line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gtr-primary-dark);
}
.sablon-oneri:active { background: var(--gtr-primary-faint); }

/* Meta'daki ham ad: sessiz, tek satır, kırpılır. 16 Ekim'den beri yalnız
   KATALOGDA OLMAYAN bir mesajın form adımında çiziliyor (bkz. uygulama.js
   `sablonHamAdiCiz`); katalogdaki mesajın Türkçe başlığı yeterli. */
.sablon-ham {
  min-width: 0;
  font-size: 11px;
  color: var(--gtr-ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sablon-alanlar > .sablon-ham { margin-bottom: 4px; }

/* Değişken grupları: "Başlık" ve "Mesaj". Meta ikisini ayrı numaralandırıyor,
   iki ayrı `{{1}}` olabiliyor; kullanıcı hangi boşluğu doldurduğunu bilmeli. */
.sablon-grup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; }
.sablon-grup + .sablon-grup { margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--gtr-line); }
.sablon-grup h6 { font-size: 11.5px; font-weight: 600; color: var(--gtr-ink-soft); }

.sablon-onizleme-kap { margin-top: 17px; }
.sablon-onizleme-kap h5 { margin-bottom: 7px; font-size: 11.5px; font-weight: 600; color: var(--gtr-ink-soft); }
/* Giden balonun aynısı: müşteriye gidecek şey nasıl görünecekse öyle. */
.sablon-onizleme { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 11px 13px; border-radius: 16px; border-top-right-radius: 6px; background: var(--gtr-primary-faint); }
.sablon-on-medya { font-size: 11.5px; color: var(--gtr-ink-soft); }
.sablon-on-baslik { font-weight: 700; font-size: 13.5px; }
.sablon-on-govde { font-size: 14px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.sablon-on-altbilgi { font-size: 11.5px; color: var(--gtr-ink-soft); }
.sablon-on-dugmeler { display: grid; gap: 5px; margin-top: 1px; padding-top: 8px; border-top: 1px solid rgba(33, 38, 43, 0.09); }
.sablon-on-dugme { padding: 7px 6px; border-radius: 10px; background: #fff; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--gtr-primary-dark); }
/* Doldurulmamış değer cümlenin İÇİNDE kalır: hangi boşluğun açık olduğu
   listede değil, gerçek metnin içinde görünsün. */
.sablon-eksik { border-radius: 5px; padding: 1px 5px; background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); font-weight: 600; }

.sablon-dip {
  flex: 0 0 auto;
  border-top: 1px solid var(--gtr-line);
  background: #fff;
  padding: 11px 16px calc(13px + env(safe-area-inset-bottom));
}
.sablon-dip[hidden] { display: none !important; }
/* Kapalı düğmenin sebebi HER ZAMAN yazılı: sessiz edilgen düğme yok. */
.sablon-sebep { margin-bottom: 9px; font-size: 12px; line-height: 1.4; color: var(--gtr-uyari-ink); }
.sablon-sebep:empty { display: none; }
#sablonGonder { margin-top: 0; }
#sablonGonder:disabled { background: var(--gtr-surface); color: #b4bcc2; cursor: default; }

body.klavye-acik .sablon-dip { padding-bottom: 13px; }
/* Klavye açıkken ekranın yarısı gidiyor: %88 tavanı üstte boş şerit bırakıp
   formu 279 piksele sıkıştırıyordu (5 değişkenli şablon, 390x844). */
body.klavye-acik .sablon-panel { max-height: 100%; border-radius: 0; }

.sablon-bos { padding: 28px 12px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--gtr-ink-soft); }
.sablon-bos b { display: block; margin-bottom: 5px; font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px; color: var(--gtr-ink); }
.sablon-bos button { position: relative; margin-top: 12px; padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--gtr-primary); text-decoration: underline; }

/* Akıştaki şablon balonu: giden balonun aynısı, üstünde küçük bir işaret.
   Şablonla giden mesaj elle yazılandan farklı bir şey; temsilci ayırt etmeli. */
.balon .balon-etiket { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 600; color: var(--gtr-primary-dark); }
.balon.sablon { border: 1px solid rgba(103, 157, 163, 0.34); }
/* Şablonun düğmeleri müşterinin ekranında GERÇEKTEN var; balonda da görünür.
   Tıklanamaz: burası bizim kaydımız, düğmeye basacak olan müşteri. */
/* Şablonun altbilgisi: müşteri görüyor, temsilcinin kaydında da görünmeli.
   Sessiz, metnin bir parçası gibi durur. */
.balon-altbilgi { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.balon-dugmeler { display: grid; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(33, 38, 43, 0.09); }
.balon-dugme { padding: 6px; border-radius: 9px; background: #fff; text-align: center; font-size: 12px; font-weight: 600; color: var(--gtr-primary-dark); }

/* Masaüstü: panel konuşma sütununun sağ altına oturur, listeyi ve kişi kartını
   örtmez (kabı #ekranKonusma, 900 pikselin üstünde `position: relative`). */
@media (min-width: 900px) {
  .sablon-zemin {
    position: absolute;
    inset: 0;
    justify-content: flex-end;
    padding: 16px;
    background: rgba(20, 35, 40, 0.16);
  }
  .sablon-panel {
    width: 404px;
    max-width: 100%;
    max-height: 100%;
    padding-top: 4px;
    border: 1px solid var(--gtr-line);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(20, 35, 40, 0.16);
  }
  .sablon-panel .tutamak { display: none; }
  .sablon-dip { padding-bottom: 13px; }
}

/* Üst satırda artık üç öğe olabiliyor (şablon düğmesi · kalan süre · sayaç).
   Sığmazsa alt satıra iner; kırpılmış yarım yazı bırakmıyoruz. */
.yazma-ust { flex-wrap: wrap; }
.sablon-mini { flex: 0 0 auto; }


/* ------------------------------------------------------------ otomasyonlar (Faz 3.2)
   Her satır bir CÜMLE, ayar tablosu değil. Kapalı hali gizlenmez: sarı yine
   yalnız "dikkat" için, otomasyon açıkken teal. Yeni renk yok. */

.oto-govde { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px calc(20px + env(safe-area-inset-bottom)); }

/* Durum şeridi: "hepsi kapalı" bilgisi listenin en üstünde, kaçırılamaz. */
.oto-serit { border-radius: 14px; padding: 11px 13px; font-size: 12.5px; line-height: 1.45; color: var(--gtr-ink-soft); background: var(--gtr-surface); }
.oto-serit:empty { display: none; }
.oto-serit.kapali { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); font-weight: 500; }
.oto-serit.acik { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); font-weight: 500; }
/* Tazeleme düştü: şeritteki durum SON BİLİNEN durum, şu anki durum değil. */
.oto-serit.bayat { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); font-weight: 500; }

/* Liste doluyken tazeleme düşerse: uyarı sessiz kalmaz, listenin üstüne oturur. */
.oto-bayat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 13px; border-radius: 14px; background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
.oto-bayat-metin { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; }
.oto-bayat-dugme { position: relative; flex: 0 0 auto; padding: 6px 2px; font-size: 12.5px; font-weight: 600; color: var(--gtr-uyari-ink); text-decoration: underline; }
.oto-bayat-dugme::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 44px; transform: translateY(-50%); }

.oto-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }

.oto-kart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--gtr-line); border-radius: 14px; background: #fff; }
.oto-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oto-ad { flex: 1; min-width: 0; font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px; }
.oto-rozet { flex: 0 0 auto; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.oto-rozet.kapali { background: var(--gtr-surface); color: var(--gtr-ink-soft); }
.oto-rozet.acik { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
/* "Değiştiriliyor…": istek sürüyor, durum henüz belli değil. */
.oto-rozet.bekleyen { background: var(--gtr-bg); color: var(--gtr-ink-soft); }

/* Anahtar: dokunma hedefi 44px, görünen ray daha küçük. */
/* Aşama 2 (M1): düğmenin KENDİSİ 56×44 dokunma alanı; görünen ray 48×28
   `::before` ile çizilir. Eski hali 48×28 düğme + görünmez genişletmeydi,
   ölçümde 28 piksel çıkıyordu. Negatif kenar boşluğu satır yüksekliğini korur. */
.oto-anahtar { position: relative; flex: 0 0 auto; width: 56px; height: 44px; margin: -8px -4px; border-radius: 999px; background: transparent; }
.oto-anahtar::before { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 28px; border-radius: 999px; background: var(--gtr-line); transition: background 0.15s ease; }
.oto-anahtar .oto-topuz { position: absolute; top: 11px; left: 7px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.oto-anahtar.is-acik::before { background: var(--gtr-primary); }
.oto-anahtar.is-acik .oto-topuz { transform: translateX(20px); }
.oto-anahtar:disabled { opacity: 0.5; cursor: default; }

/* Açma ön kontrolü: "açık ama hiçbir şey olmuyor" halinin görünür yüzü. */
.oto-kontrol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 9px 11px; border-radius: 12px; font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.oto-kontrol-baslik { font-weight: 600; }
.oto-kontrol.engel { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
.oto-kontrol.uyari { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.oto-kontrol.temiz { background: var(--gtr-surface); color: var(--gtr-ink-soft); }

.oto-cumle { font-size: 13.5px; line-height: 1.5; color: var(--gtr-ink); overflow-wrap: anywhere; }
.oto-cumle b { font-weight: 700; }
.oto-kisit { font-size: 11.5px; line-height: 1.4; color: var(--gtr-ink-soft); }

.oto-alt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oto-sayac { flex: 1; min-width: 0; font-size: 11.5px; color: var(--gtr-ink-soft); }
.oto-sayac:empty { display: none; }
.oto-is-dugme { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; margin: -8px 0; padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--gtr-primary); text-decoration: underline; }

/* İşler: kim, ne zaman, hangi şablon, sonuç. Atlananda sebep de yazılı. */
.oto-isler { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 3px; padding-top: 10px; border-top: 1px solid var(--gtr-line); }
.oto-bos { font-size: 12.5px; color: var(--gtr-ink-soft); padding: 6px 0; }
/* Yalnız yöneticinin ekranı temsilcide: sessiz dönüş yerine sebep (denetim 21 Eki S16). */
.yetki-yok { max-width: 420px; margin: 32px auto; padding: 20px 16px; text-align: center; color: var(--gtr-ink-soft); font-size: 14px; }
.yetki-yok p { margin: 0; }
.yetki-yok .yetki-yok-baslik { font-size: 16px; font-weight: 600; color: var(--gtr-ink); margin-bottom: 6px; }
.oto-is { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 9px 11px; border-radius: 12px; background: var(--gtr-surface); }
.oto-is-ust { display: flex; align-items: center; gap: 8px; }
.oto-is-kim { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oto-is-sonuc { flex: 0 0 auto; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; background: var(--gtr-bg); color: var(--gtr-ink-soft); }
.oto-is-sonuc.olumlu { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.oto-is-sonuc.bekleyen { background: var(--gtr-bg); color: var(--gtr-ink-soft); }
.oto-is-sonuc.atlandi { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.oto-is-sonuc.hata { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
.oto-is-alt { font-size: 11.5px; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.oto-is-sebep { font-size: 11.5px; line-height: 1.4; color: var(--gtr-accent-deep); overflow-wrap: anywhere; }
/* Giden mesajın kendi metni, iki satırda kesilir; tamamı üstüne gelince (23 Eki). */
.oto-is-metin { font-size: 11.5px; line-height: 1.4; color: var(--gtr-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* Onay yaprağındaki ikincil eylem: sessiz durur, yanlışlıkla basılmaz. */
.oto-vazgec { display: block; width: 100%; min-height: 44px; margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--gtr-ink-soft); }


/* ------------------------------------------------------ ana menü (masaüstü 1024+)
   Hakan'ın isteği: kanallar ve araçlar solda hep açık dursun, ileride başka
   satırlar da gelsin. 1024 eşiği kod tabanındaki app-shell standardıyla aynı
   (`gtr-sh-menu` deseni). Yeni renk yok, hepsi mevcut GTR değişkenleri. */

/* TABANDA KAPALI: telefonda ve dar masaüstünde hiç çizilmez, oradaki menü
   yaprağı bugünkü gibi çalışır. */
.ana-menu { display: none; }
.ana-menu[hidden] { display: none !important; }

@media (min-width: 1024px) {
  /* Giriş ekranı hiçbir zaman menüyle yan yana durmaz (giriş-modu kalıbı). */
  .sahne:not(.giris-modu) > .ana-menu {
    display: flex;
    flex-direction: column;
    /* ⚠ `min-width: 0` ŞART: esnek sütun en dar içeriğinden küçülemezse
       komşu sütunun üstüne taşıyor (Faz 3.1'de panel kişi kartına binmişti,
       aynı tuzak). Sabit taban genişlik + sıfır alt sınır. */
    flex: 0 0 232px;
    min-width: 0;
    height: 100%;
    background: #fff;
    border-right: 1px solid var(--gtr-line);
  }

  /* Sütunların hiçbiri kendi en dar içeriğine kilitlenmesin. Liste genişliği
     900/1150 bloklarındaki değerlerde KALIYOR: onları buradan ezmek, o
     ölçüleri koruyan bekçileri sahte yeşile düşürürdü. */
  .sahne > #ekranListe,
  .sahne > #ekranOtomasyon { min-width: 0; }

  /* Menü bu işleri devraldı: aynı seçim iki yerde durmasın. */
  .filtreler { display: none; }
  #menuAc { display: none; }
  /* Liste 340 (Aşama 2): menü sütunu varken 1024–1599 arası. */
  .sahne > #ekranListe { flex: 0 0 340px; }
  /* Menü görünürken geri oku gidecek yer göstermiyor (Aşama 2, O3). */
  #otomasyonGeri, #topluGeri { display: none; }

  .am-ust { border-right: 0; }
  .am-govde {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom));
  }

  .am-bolum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .am-bolum + .am-bolum { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gtr-line); }
  /* ⛔ Büyük harfe çeviren CSS kuralı YOK: Türkçe "i" harfini "I" yapıyor,
     bölüm başlığı ne yazıldıysa öyle görünür. */
  .am-bolum h3 {
    padding: 0 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--gtr-ink-soft);
  }

  .am-oge {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    text-align: left;
    font-size: 13.5px;
    color: var(--gtr-ink);
  }
  .am-oge span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .am-ikon { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--gtr-ink-soft); }
  .am-oge:hover { background: var(--gtr-surface); }
  .am-oge:active { background: var(--gtr-line); }
  /* Seçili öğe: teal zemin, koyu teal yazı. Rozet değil, satırın kendisi. */
  .am-oge[aria-current="true"] { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); font-weight: 600; }
  .am-oge[aria-current="true"] .am-ikon { color: var(--gtr-primary-dark); }
  /* Sekme rozeti (Bekleyenler sayısı); pillerdeki .say ile aynı sayı. */
  .am-say { margin-left: auto; flex: 0 0 auto; font-family: Nunito, sans-serif; font-weight: 800; font-size: 12px; color: var(--gtr-ink-soft); }
  .am-oge[aria-current="true"] .am-say { color: var(--gtr-primary-dark); }
  .am-say.vurgu, .am-oge[aria-current="true"] .am-say.vurgu { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); line-height: 20px; text-align: center; }
}


/* Sahne tam genişlik olunca otomasyon/toplu gövdesi 1920'de bir uçtan diğerine
   uzayıp okunmaz hâle geliyordu: kaydırma kabı tam genişlik kalır, İÇERİK
   ortada makul bir sütunda durur (toplu gönderimde zaten böyleydi). */
/* ---- Aşama 2 · §2.5 bot kartı + sonuç paneli (28 Eyl 2026) ----
   Telefonda tek sütun: sonuç ve işler kartın altında. 1024'ten sonra iki
   sütun: solda kartlar 380, sağda seçili botun sonucu (esnek), her sütun
   kendi içinde kayar. İçerik tam genişlik, iki yanda boş şerit yok. */
.oto-sag { display: none; }
.oto-kart.secili { border-color: var(--gtr-primary); box-shadow: inset 3px 0 0 var(--gtr-primary); }
.oto-tarif { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.oto-blok { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.oto-etiket { font-size: 11px; font-weight: 600; color: var(--gtr-ink-soft); }
.oto-deger { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--gtr-ink); overflow-wrap: anywhere; }
.oto-deger.oto-kisit { font-size: 12.5px; color: var(--gtr-ink-soft); }
.oto-kosul { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--gtr-ink-soft); }
.oto-mesaj { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--gtr-surface); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.oto-mesaj.kisa { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-block: 0; border-block: 8px solid transparent; }
/* Kırpılan kutuda üst-alt boşluk kenarlıkla verilir: iç boşluk olsaydı
   dördüncü satırın üst yarısı alt boşlukta görünürdü. */
.oto-mesaj.ad { color: var(--gtr-ink-soft); }
.oto-tam-dugme { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--gtr-primary-dark); text-decoration: underline; }

.oto-sonuc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; font-variant-numeric: tabular-nums; }
.oto-kart .oto-sonuc { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--gtr-line); }
.oto-sonuc-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oto-sonuc-ad { flex: 1; min-width: 0; margin: 0; font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; color: var(--gtr-ink); }
/* Telefonda panel kartın içinde: ad zaten kartın başlığında. */
.oto-kart .oto-sonuc-ad { display: none; }
.oto-donem { flex: 0 0 auto; }
.oto-kart .oto-donem { flex: 1; }
.arm-donem-dugme.oto-donem-dugme { min-height: 44px; }
.oto-isler-baslik { margin: 0; font-size: 12px; font-weight: 600; color: var(--gtr-ink-soft); }
.oto-sonuc .oto-isler { margin-top: 0; padding-top: 0; border-top: 0; }
.oto-is-tik { width: 100%; min-height: 44px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.oto-is-tik:hover { background: var(--gtr-primary-faint); }
.oto-is-zaman { flex: 0 0 auto; font-size: 11.5px; color: var(--gtr-ink-soft); }
.oto-is-kazanc { font-size: 12.5px; font-weight: 600; color: var(--gtr-primary-dark); overflow-wrap: anywhere; }

@media (min-width: 1024px) {
  #otomasyonGovde.oto-iki {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 24px;
    overflow: hidden;
    padding: 16px 24px;
  }
  .oto-sol, .oto-sag { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .oto-sol { padding-right: 4px; }
  .oto-sag { display: block; align-self: start; max-height: 100%; box-sizing: border-box; padding: 16px; border: 1px solid var(--gtr-line); border-radius: 14px; background: #fff; }
  .oto-sag:empty { display: none; }
  /* Aranacaklar'ın masaüstü kuralı KPI ızgarasına `grid-area: kpi` ve 760
     tavanı veriyor; burada o alan yok, adlı alan sahte sütun açıyordu. */
  .oto-sonuc .arm-kpiler { grid-area: auto; max-width: none; }
  /* Dar masaüstünde (1024) sağ sütun ~330 px: dört kutu sığmaz, rakam bölünürdü.
     Kutu en az 140 px; sığdığı kadar yan yana (geniş ekranda dördü tek sıra). */
  .oto-sag .arm-kpiler { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}


/* ------------------------------------------------------------ toplu gönderim (Faz 3.4)
   Dört adım alt alta kart. Otomasyon ekranının düzenini (`oto-govde`) ve
   renklerini kullanır; yeni renk yok. Önce 390px. */

.tpl-govde { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
/* Aşama 2 (§2.6, T1): 736 piksellik orta sütun kalktı; içerik tam genişlik. */
.tpl-govde > * { width: 100%; box-sizing: border-box; }
.tpl-serit { border-radius: 14px; padding: 11px 13px; font-size: 12.5px; line-height: 1.45; font-weight: 500; background: var(--gtr-surface); color: var(--gtr-ink-soft); }
.tpl-serit:empty { display: none; }
.tpl-serit.temiz { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.tpl-serit.uyari { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }

.tpl-kart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--gtr-line); border-radius: 14px; background: #fff; }
.tpl-kart[hidden] { display: none; }
.tpl-baslik { margin: 0; font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px; color: var(--gtr-ink); }
.tpl-gecmis-baslik { margin-top: 8px; }
.tpl-yardim { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--gtr-ink-soft); }
.tpl-etiket { font-size: 12.5px; color: var(--gtr-ink-soft); }

.tpl-girdi { width: 100%; box-sizing: border-box; min-height: 44px; padding: 9px 11px; border: 1px solid var(--gtr-line); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--gtr-ink); }
.tpl-girdi:focus { outline: 2px solid var(--gtr-primary); outline-offset: 1px; }
.tpl-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Yer tutucu ("En az gün") 96 pikselde kırpılıyordu: kutu satırda esniyor. */
.tpl-satir .tpl-girdi { width: auto; flex: 1 1 112px; min-width: 112px; }

.tpl-secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-secenek { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--gtr-line); border-radius: 999px; font-size: 13px; cursor: pointer; }
.tpl-secenek input { width: 18px; height: 18px; accent-color: var(--gtr-primary); }

.tpl-sablon-metni { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--gtr-surface); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tpl-sablon-metni:empty { display: none; }
.tpl-sablon-metni[hidden] { display: none; }
/* Şablonun başlık satırı: gövdeden ayrılsın, üstünde dursun. */
.tpl-sablon-baslik { font-weight: 600; }
.tpl-degiskenler { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tpl-degisken { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
/* İzin kutusu: onay satırı + altında güvence cümlesi (16 Eki). Eskiden iki
   bilgi tek satırdaydı ve en önemlisi parantez içinde kalıyordu. */
.tpl-izin-kap { display: block; }
.tpl-izin-kap > .tpl-yardim { margin: 0 0 0 26px; }
.tpl-izin { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; line-height: 1.4; color: var(--gtr-accent-deep); }
.tpl-izin[hidden] { display: none; }
.tpl-izin input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--gtr-accent-deep); }

.tpl-hata { margin: 0; font-size: 13px; line-height: 1.45; color: var(--gtr-uyari-ink); }
.tpl-hata:empty { display: none; }

.tpl-sayi { margin: 0; font-family: Nunito, sans-serif; font-weight: 800; font-size: 22px; color: var(--gtr-ink); }
.tpl-elenen { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--gtr-ink-soft); }
.tpl-elenen:empty { display: none; }
.tpl-not { margin: 0; font-size: 12px; line-height: 1.45; color: var(--gtr-accent-deep); }
.tpl-alt-baslik { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--gtr-ink-soft); }
/* Gönderim öncesi kişi listesi: kime gideceği tek tek görünür, istenmeyen çıkarılır. */
.tpl-hedefler { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 320px; overflow-y: auto; }
.tpl-hedef { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 0 12px; border: 1px solid var(--gtr-line); border-radius: 10px; background: var(--gtr-bg); }
.tpl-hedef-ad { font-size: 13px; overflow-wrap: anywhere; }
/* Aşama 2 (M1): satır 44, düğme satırın sağ ucunu dolduruyor (eski 26 piksel). */
.tpl-hedef-dugme { flex: 0 0 auto; align-self: stretch; min-height: 44px; padding: 0 12px; border-radius: 0 10px 10px 0; background: var(--gtr-surface); color: var(--gtr-ink-soft); font-size: 12px; font-weight: 600; }
.tpl-hedef-dugme:active { background: var(--gtr-line); }
.tpl-hedef.cikarildi { background: var(--gtr-surface); }
.tpl-hedef.cikarildi .tpl-hedef-ad { color: var(--gtr-ink-soft); text-decoration: line-through; }
.tpl-hedef.cikarildi .tpl-hedef-dugme { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.tpl-ornekler { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tpl-ornek { padding: 9px 11px; border-radius: 12px; background: var(--gtr-surface); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.tpl-ornek p { margin: 3px 0 0; white-space: pre-wrap; }
/* Uzun örnek dört satırda kısılır, "Tamamını göster" açar. Beş tam örnek
   telefonda 1623 piksel tutuyor, kişi sayısı ile Gönder arası iki ekran
   boyu kaydırma oluyordu (toplu önizleme, 390x844). */
.tpl-ornek.kisa .tpl-ornek-govde { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-ornek-ac { display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 -8px; padding: 0 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--gtr-primary-dark); text-decoration: underline; }
.tpl-ornek-baslik { font-weight: 600; }
.tpl-uyari { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); font-size: 12.5px; line-height: 1.45; }
.tpl-uyari p { margin: 0; }
.tpl-onay { font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; text-align: center; letter-spacing: 0.04em; }
.tpl-ikincil { justify-self: start; min-height: 44px; padding: 8px 14px; border: 1px solid var(--gtr-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--gtr-ink); }
.tpl-ikincil:disabled { opacity: 0.5; }

.tpl-gecmis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tpl-gonderim { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--gtr-line); border-radius: 14px; background: #fff; }
.tpl-rozet { flex: 0 0 auto; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; background: var(--gtr-surface); color: var(--gtr-ink-soft); }
.tpl-rozet.calisiyor { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.tpl-rozet.iptal { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.tpl-rozet.tpl-izin-isareti { margin-left: 6px; }
/* Gitmeyeni olan bitmiş gönderim: rozet ve çubuk "tamam" rengine BOYANMAZ. */
.tpl-rozet.sorunlu { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.tpl-cubuk { height: 6px; border-radius: 999px; background: var(--gtr-surface); overflow: hidden; }
.tpl-cubuk span { display: block; height: 100%; background: var(--gtr-primary); transition: width 0.3s ease; }
.tpl-cubuk.sorunlu span { background: var(--gtr-accent-deep); }
/* Gönderim başladı cümlesi: listenin başında, yeni satırın hemen üstünde. */
.tpl-basladi { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); font-size: 12.5px; line-height: 1.45; font-weight: 500; }
/* Durdurma onayı ve sebep düğmeleri dar ekranda alt alta düşsün, taşmasın. */
.tpl-gonderim .tpl-ikincil,
.tpl-uyari .tpl-ikincil { justify-self: start; max-width: 100%; }
.tpl-uyari .tpl-satir { gap: 8px; }
.tpl-ilerleme { margin: 0; font-size: 12px; line-height: 1.45; color: var(--gtr-ink-soft); }

/* ---- Aşama 2 · §2.6 iki sütun + canlı önizleme + tablo (28 Eyl 2026) ----
   Telefonda tek sütun: form, altında önizleme, altında gönderimler; onay
   kutusu ve Gönder alta yapışık çubukta. 1024'ten sonra solda form (geniş
   ekranda iki kart yan yana), sağda 400 piksel yapışkan önizleme. */
.tpl-duzen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.tpl-form, .tpl-onizleme { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.tpl-alan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.tpl-canli { margin: 0; font-size: 13px; line-height: 1.45; color: var(--gtr-ink-soft); }
.tpl-canli:empty, .tpl-canli[hidden] { display: none; }
.tpl-telefon { padding: 12px; border-radius: 14px; background: var(--gtr-surface); }
.tpl-balon { max-width: 88%; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: #fff; box-shadow: 0 1px 1px rgba(33, 38, 43, 0.08); font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.tpl-balon p { margin: 0; }
.tpl-balon-baslik { margin-bottom: 4px !important; font-weight: 700; }
.tpl-balon-bos { color: var(--gtr-ink-soft); }
.tpl-balon-not { margin: 0; font-size: 12px; line-height: 1.4; color: var(--gtr-ink-soft); }
.tpl-balon-not:empty { display: none; }
.tpl-onizleme .tpl-ikincil[hidden] { display: none; }
.tpl-gonder-cubuk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tpl-gonder-cubuk .genis-dugme { margin-top: 0; }

/* Gönderimler: telefonda kart (şablon + durum, tarih, üç sayı adıyla). */
.tpl-tablo-bas { display: none; }
.tpl-hucreler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  grid-template-areas: "sablon sablon sablon rozet" "tarih tarih tarih tarih" "kisi gitti okundu okundu";
  gap: 4px 12px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.tpl-hucre { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.tpl-hucre b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-hucre-ad { font-size: 11px; color: var(--gtr-ink-soft); }
.tpl-hucre-tarih { grid-area: tarih; }
.tpl-hucre-tarih b { font-size: 12px; font-weight: 400; color: var(--gtr-ink-soft); }
.tpl-hucre-sablon { grid-area: sablon; }
.tpl-hucre-sablon b { font-size: 13.5px; }
.tpl-hucre-kisi { grid-area: kisi; }
.tpl-hucre-gitti { grid-area: gitti; }
.tpl-hucre-okundu { grid-area: okundu; }
/* Cevap ve Sipariş (29 Eyl): sunucu gönderirse dördüncü satır, adıyla. */
.tpl-hucre-cevap { grid-area: cevap; }
.tpl-hucre-siparis { grid-area: siparis; }
.tpl-hucreler.cevapli,
.tpl-hucreler.siparisli {
  grid-template-areas: "sablon sablon sablon rozet" "tarih tarih tarih tarih" "kisi gitti okundu okundu" "cevap siparis siparis siparis";
}
.tpl-hucreler > .tpl-rozet { grid-area: rozet; justify-self: end; }

@media (max-width: 1023px) {
  .tpl-gonder-cubuk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--gtr-line);
    box-shadow: 0 -2px 8px rgba(33, 38, 43, 0.06);
  }
  .tpl-gonder-cubuk .tpl-onay { min-height: 48px; }
  /* Çubuk açıkken listenin sonu çubuğun altında kalmasın. */
  .tpl-govde[data-gonder="1"] { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (min-width: 1024px) {
  .tpl-govde { gap: 16px; padding: 16px 24px 24px; }
  .tpl-duzen { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; }
  /* Geniş ekranda "Kimlere" ve "Ne" yan yana; dar masaüstünde alt alta. */
  /* align-items start: yan yana iki kart eşit boya çekilince kısa "Ne" kartı
     uzuyor, şablon seçici 86 px'e şişiyordu (28 Eyl canlı ölçüm). */
  .tpl-form { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); align-items: start; }
  .tpl-form > .tpl-ikincil { grid-column: 1 / -1; }
  .tpl-onizleme { position: sticky; top: 0; max-height: calc(100vh - 104px); overflow-y: auto; }
  .tpl-tablo-bas,
  .tpl-hucreler {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) repeat(3, 96px) 150px;
    grid-template-areas: none;
    gap: 12px;
    align-items: center;
  }
  /* Cevap + Sipariş (29 Eyl): 1024'te (menü 232 + dolgu) tablo ~718 px.
     Sütunlar daraltılır ki şablon adı bugünkü kadar (~100 px) yer bulsun;
     sipariş hücresi tutarı alt satıra sarar ("2 ·" / "4.120,50 TL"). */
  .tpl-tablo-bas.cevapli,
  .tpl-hucreler.cevapli,
  .tpl-tablo-bas.siparisli,
  .tpl-hucreler.siparisli { gap: 8px; grid-template-areas: none; }
  .tpl-tablo-bas.cevapli.siparisli,
  .tpl-hucreler.cevapli.siparisli { grid-template-columns: 96px minmax(0, 1fr) repeat(4, 64px) 88px 124px; }
  .tpl-tablo-bas.cevapli:not(.siparisli),
  .tpl-hucreler.cevapli:not(.siparisli) { grid-template-columns: 96px minmax(0, 1fr) repeat(4, 64px) 124px; }
  .tpl-tablo-bas.siparisli:not(.cevapli),
  .tpl-hucreler.siparisli:not(.cevapli) { grid-template-columns: 96px minmax(0, 1fr) repeat(3, 64px) 88px 124px; }
  .tpl-hucre-siparis b { white-space: normal; overflow-wrap: anywhere; }
  .tpl-tablo-bas { padding: 0 12px; font-size: 11px; font-weight: 600; color: var(--gtr-ink-soft); }
  .tpl-tablo-bas .tpl-bas-sayi { text-align: right; }
  .tpl-hucre, .tpl-hucreler > .tpl-rozet { grid-area: auto; }
  .tpl-hucreler > .tpl-rozet { justify-self: start; }
  .tpl-hucre-ad { display: none; }
  .tpl-hucre-kisi, .tpl-hucre-gitti, .tpl-hucre-okundu, .tpl-hucre-cevap, .tpl-hucre-siparis { text-align: right; }
  .tpl-hucre-tarih b { font-size: 12.5px; color: var(--gtr-ink); }
  .tpl-hucre-sablon b { font-size: 13px; }
}

/* ------------------------------------------------------------ Faz 3.3 · yorum paneli
   Yorum konuşması açılınca akışın içine çizilir (public/yorum.js). Önek `.yrm-`.
   Kart düz beyaz, gönderi bağlamı gri blok; eylemler: Cevapla birincil teal,
   Özel mesaj ikincil çerçeveli, Gizle metin düğmesi. */
.yrm-grup { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
/* Bağlantı varsa satırın TAMAMI <a>: küçük resme basmak da gönderiyi açar. */
.yrm-gonderi { display: flex; align-items: center; gap: 10px; background: var(--gtr-surface); border-radius: 14px; padding: 8px 10px; color: inherit; text-decoration: none; }
.yrm-gonderi.hatali { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
.yrm-gonderi-resim { flex: 0 0 44px; width: 44px; height: 55px; border-radius: 10px; overflow: hidden; background: var(--gtr-line); }
.yrm-gonderi-resim img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Adres öldüyse resim siliniyor: kutu boş gri dikdörtgen kalmasın, açılmadığı belli olsun. */
.yrm-gonderi-resim.bos { background: transparent; border: 1px dashed var(--gtr-line); }
/* Resim hiç yoksa ya da açılmadıysa kutu boş gri dikdörtgen kalmasın: "Görsel yok". */
.yrm-gonderi-resim:empty, .yrm-gonderi-resim.bos { display: flex; align-items: center; justify-content: center; }
.yrm-gonderi-resim:empty::after, .yrm-gonderi-resim.bos::after { content: "Görsel yok"; font-size: 9.5px; line-height: 1.15; text-align: center; color: var(--gtr-ink-soft); padding: 0 3px; }
.yrm-gonderi-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.yrm-gonderi-etiket { font-size: 10.5px; font-weight: 600; color: var(--gtr-ink-soft); }
.yrm-gonderi.hatali .yrm-gonderi-etiket { color: inherit; }
.yrm-gonderi-metin { font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yrm-gonderi-ac { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; padding: 0 8px; color: var(--gtr-primary-dark); font-size: 12.5px; font-weight: 600; text-decoration: none; }
/* Reklamda başlık düğme (Instagram adresi açılmıyor): bağlantıyla aynı görünür. */
button.yrm-gonderi { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }

/* ---- Reklam gönderisi yaprağı (Ayşenur paketi B, 21 Eki) ---- */
.rgy { display: flex; flex-direction: column; gap: 10px; }
/* Uzun yorum listesinde de görünür: yaprağın dibine yapışık. */
.rgy-kapat { display: flex; justify-content: center; position: sticky; bottom: 0; z-index: 1; width: calc(100% - 36px); min-height: 44px; margin: 0 18px; background: #fff; box-shadow: 0 -10px 0 #fff; }
/* Masaüstünde reklam yaprağı ortada dar açılır; telefonda alttan tam genişlik kalır. */
@media (min-width: 900px) {
  .yaprak.yaprak-dar { max-width: 640px; margin: 0 auto; }
}
.rgy-gorsel { width: 100%; max-height: 52vh; border-radius: 14px; overflow: hidden; background: var(--gtr-surface); display: flex; align-items: center; justify-content: center; }
.rgy-gorsel img { display: block; width: 100%; max-height: 52vh; object-fit: contain; }
.rgy-gorsel.bos { min-height: 120px; border: 1px dashed var(--gtr-line); background: transparent; color: var(--gtr-ink-soft); font-size: 13px; }
.rgy-etiket { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); font-size: 12px; font-weight: 600; }
.rgy-metin { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.rgy-metin.bos, .rgy-durum { color: var(--gtr-ink-soft); font-size: 13px; }
.rgy-baslik { margin-top: 6px; font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px; }
.rgy-liste { display: flex; flex-direction: column; gap: 8px; }
.rgy-satir { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--gtr-line); border-radius: 14px; background: var(--gtr-bg); color: inherit; font: inherit; text-align: left; }
button.rgy-satir { cursor: pointer; }
button.rgy-satir:hover { background: var(--gtr-primary-faint); }
.rgy-satir-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; }
.rgy-yazan { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rgy-zaman { flex: 0 0 auto; font-size: 12px; color: var(--gtr-ink-soft); }
.rgy-satir .yrm-rozet { font-size: 11.5px; }
.rgy-yorum { font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.yrm-kart { background: #fff; border: 1px solid var(--gtr-line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.yrm-kart.gizli { background: var(--gtr-surface); }
/* Şikâyet yorumu: kırmızı iş (21 Eki). Karar Ayşenur'un; yorum kendiliğinden gizlenmez. */
.yrm-kart.sikayet, .yrm-cevap.sikayet { border-color: var(--gtr-gecikti-ink); box-shadow: inset 4px 0 0 var(--gtr-gecikti-ink); }
.yrm-kart .yrm-sikayet { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--gtr-gecikti-zemin); color: var(--gtr-gecikti-ink); font-size: 12px; font-weight: 700; }
.yrm-kart.gizli .yrm-metin, .yrm-kart.silindi .yrm-metin { color: var(--gtr-ink-soft); }
.yrm-metin { font-size: 14px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.yrm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--gtr-ink-soft); }
.yrm-rozet { padding: 2px 8px; border-radius: 999px; background: var(--gtr-surface); font-weight: 600; }
.yrm-rozet.olumlu { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.yrm-rozet.uyari { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
/* Özel mesaj gitti, yorumun altı boş: rozet aynı zamanda Cevapla kısa yolu. */
button.yrm-acik-cevap-yok { min-height: 32px; padding: 4px 12px; font-size: 11.5px; cursor: pointer; }
button.yrm-acik-cevap-yok:disabled { opacity: 0.55; cursor: default; }
.yrm-cevap { margin-left: 12px; padding: 8px 10px; border-radius: 12px; background: var(--gtr-primary-faint); display: flex; flex-direction: column; gap: 4px; }
.yrm-cevap p { font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.yrm-cevap.gitmedi { background: #fdf1ea; }
/* Müşterinin devam yorumu bizim cevabımızla aynı renkte olmasın. */
.yrm-cevap.musteri { background: var(--gtr-surface); }
.yrm-hata { font-size: 12px; line-height: 1.35; color: var(--gtr-uyari-ink); }
.yrm-cevap .yrm-yeniden-dene { margin-top: 6px; }
.yrm-eylemler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yrm-eylemler .yrm-ozel { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; line-height: 1.15; }
.yrm-eylemler .yrm-ozel small { font-size: 10.5px; color: var(--gtr-ink-soft); font-weight: 500; }
.yrm-eylemler .mini:disabled,
.yrm-form-dugmeler .mini:disabled { opacity: 0.55; cursor: default; }
.yrm-metin-dugme { min-height: 44px; padding: 0 10px; font-size: 12.5px; color: var(--gtr-ink-soft); margin-left: auto; }
.yrm-metin-dugme:disabled { opacity: 0.55; }
.yrm-form { display: flex; flex-direction: column; gap: 8px; }
.yrm-form-baslik { font-size: 12px; color: var(--gtr-ink-soft); }
.yrm-girdi { width: 100%; min-height: 84px; border: 1px solid var(--gtr-line); border-radius: 14px; padding: 10px 12px; font-size: 16px; resize: vertical; outline: none; background: #fff; }
.yrm-girdi:focus { border-color: var(--gtr-primary); }
.yrm-girdi-kap { position: relative; }
.yrm-girdi-kap .yrm-girdi { display: block; padding-right: 46px; }
.yrm-girdi-kap .emoji-dugme { position: absolute; right: 6px; bottom: 8px; }
.yrm-form-dugmeler { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.yrm-form-dugmeler .yrm-metin-dugme { margin-left: 0; }
.yrm-onizleme { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: var(--gtr-surface); font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Liste yerine geçen durum kutusu: boş konuşma ya da "alınamadı + yeniden dene". */
.yrm-durum { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 12px; color: var(--gtr-ink-soft); font-size: 13.5px; line-height: 1.45; text-align: center; }
.yrm-durum .yrm-yeniden { color: var(--gtr-primary-dark); font-weight: 600; }
@media (max-width: 480px) {
  .yrm-eylemler .yrm-cevapla, .yrm-eylemler .yrm-ozel { flex: 1 1 100%; }
  .yrm-metin-dugme { margin-left: 0; }
}

/* ============ Aranacaklar iş istasyonu (28 Eyl 2026) · arm- ============
   Önce 390 px telefon: rapor + liste alt alta, kişi kartı satıra dokununca
   TAM EKRAN açılır. 1024 pikselden sonra üç sütun (liste 360 · kişi kartı
   esnek · Verimor telefonu 320) ve sayfa kaydırması YOK — her sütun kendi
   içinde kayar. Yeni renk yok: hepsi mevcut GTR değişkenleri.
   ⚠ Sınıf öneki `arm-`; başka dosyada `.arm-*` CSS kuralı tanımlı değil. */

.arm-govde { display: flex; flex-direction: column; gap: 10px; }
.arm-govde, .arm-ust, .arm-kpi-deger, .arm-tutar, .arm-kirilim-sayi, .arm-arama-zaman { font-variant-numeric: tabular-nums; }

/* ---- üst şerit: dönem + KPI + kişi kırılımı ---- */
.arm-ust { display: flex; flex-direction: column; gap: 6px; }
.arm-ust-bas { display: flex; align-items: center; gap: 8px; }
.arm-donem { display: flex; flex: 1; gap: 4px; padding: 3px; border-radius: 12px; background: var(--gtr-surface); }
.arm-donem-dugme { flex: 1; min-height: 38px; white-space: nowrap; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--gtr-ink-soft); }
.arm-donem-dugme.secili { background: #fff; color: var(--gtr-ink); box-shadow: 0 1px 2px rgba(33, 38, 43, 0.12); }
.arm-kirilim-ac { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--gtr-line); font-size: 13px; font-weight: 600; color: var(--gtr-ink-soft); }
.arm-kirilim-ac.secili { background: var(--gtr-primary-faint); border-color: transparent; color: var(--gtr-primary-dark); }

.arm-kpiler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.arm-kpi { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--gtr-surface); min-width: 0; }
.arm-kpi-baslik { font-size: 11px; font-weight: 600; color: var(--gtr-ink-soft); }
.arm-kpi-deger { font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; }
.arm-kpi-oran { font-size: 11.5px; color: var(--gtr-ink-soft); }
.arm-kpi-oran:empty { display: none; }
.arm-kpi-alt { font-size: 12px; color: var(--gtr-ink-soft); }
.arm-kpi-alt:empty { display: none; }

.arm-kirilim { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--gtr-surface); }
.arm-kirilim:empty { display: none; }
.arm-kirilim-satir { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 13px; }
.arm-kirilim-satir.baslik { font-size: 11.5px; font-weight: 600; color: var(--gtr-ink-soft); }
.arm-kirilim-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arm-kirilim-sayi { flex: 0 0 56px; text-align: right; }
.arm-kirilim-bos { padding: 6px 10px; font-size: 12.5px; color: var(--gtr-ink-soft); }

/* ---- sütunlar ---- */
.arm-alt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.arm-sol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.arm-sekmeler { display: flex; gap: 8px; }
.arm-sekme { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--gtr-line); background: var(--gtr-surface); font-weight: 600; font-size: 13.5px; }
.arm-sekme.secili { background: var(--gtr-ink); color: #fff; border-color: transparent; }
.arm-liste { display: flex; flex-direction: column; gap: 6px; }
.arm-dip { padding: 10px 4px; font-size: 12px; color: var(--gtr-ink-soft); text-align: center; }
.arm-dip:empty { display: none; }
/* "Daha fazla göster": listenin sonunda, parmakla rahat basılır (44 px). */
.arm-daha { width: 100%; min-height: 44px; margin-top: 2px; border-radius: 12px; border: 1px solid var(--gtr-line); background: var(--gtr-surface); color: var(--gtr-ink); font-weight: 600; font-size: 13.5px; }
.arm-daha:disabled { opacity: .6; }
.arm-bos { text-align: center; color: var(--gtr-ink-soft); padding: 24px 0; }

.arm-satir { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; min-height: 60px; padding: 10px 12px; border-radius: 14px; background: var(--gtr-surface); text-align: left; }
.arm-satir.bekliyor { opacity: .55; }
.arm-satir-ust { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.arm-ad { flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arm-tutar { flex: 0 0 auto; font-weight: 700; font-size: 13.5px; }
.arm-satir-alt { font-size: 12.5px; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.arm-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.arm-cip { border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; background: #fff; color: var(--gtr-ink-soft); }
.arm-cip.ariyor { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
/* Kapanmış kayıt (21 Eki 2026): koyu çerçeveli, açık kayıtla karışmasın. */
.arm-cip.kapali, .arm-kart-kimlik .arm-cip.kapali { background: var(--gtr-surface); color: var(--gtr-ink); box-shadow: inset 0 0 0 1px var(--gtr-ink-soft); }

/* ---- Sahte sipariş (21 Eki 2026): küçük bağlantı, kart düğmesi, kim/ne zaman satırı ---- */
.arm-sahte-bag { align-self: flex-start; min-height: 36px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gtr-primary-dark); text-decoration: underline; cursor: pointer; }
.arm-sahte-bag[hidden] { display: none; }
.arm-sahte-bilgi { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--gtr-primary-faint); font-size: 12.5px; line-height: 1.4; color: var(--gtr-ink); overflow-wrap: anywhere; }
.arm-sahte-bilgi:empty { display: none; }
.arm-sahte-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 2px; }
.arm-sahte-baslik { font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px; }
.arm-sahte-satir { gap: 4px; }
.arm-sahte-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-width: 0; }
.arm-sahte-iz { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--gtr-uyari-ink); overflow-wrap: anywhere; }
.arm-kart-kimlik .arm-sahte-iz { margin-top: 4px; }
.arm-sahte-geri { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--gtr-line); background: #fff; font-weight: 600; font-size: 13.5px; color: var(--gtr-primary-dark); }
.arm-sahte { display: flex; flex-direction: column; gap: 6px; }
.arm-sahte.onay { padding: 12px; border: 1px solid var(--gtr-line); border-radius: 14px; background: var(--gtr-surface); }
.arm-sahte-soru { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.4; }
.arm-sahte-dugme { width: 100%; color: var(--gtr-uyari-ink); }
.arm-sahte .arm-sonraki:disabled, .arm-sahte-geri:disabled { opacity: .6; cursor: progress; }
.arm-sahte-hata, .arm-eylem-not.arm-sahte-hata { color: var(--gtr-uyari-ink); }

/* ---- kişi kartı ---- */
.arm-orta { display: none; flex-direction: column; gap: 12px; min-width: 0; container-type: inline-size; }
/* Telefonda tam ekran: liste arkada kalır, geri düğmesi listeye döner. */
.arm-orta.acik {
  display: flex;
  position: fixed;
  inset: 0;
  bottom: var(--klavye-payi, 0px);
  z-index: 12;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--gtr-bg);
}
/* Tam ekran kartın tepesi: listeninkiyle AYNI `.ust` bileşeni (petrol yeşili,
   ← ikonu + kişinin adı). Masaüstünde hiç çizilmez. */
.arm-kart-ust { margin: -12px -16px 0; }
.arm-kart-ust h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ad üst çubukta yazıyor: tam ekran kartta ikinci kez tekrarlanmaz. */
.arm-orta.acik .arm-kart-ad { display: none; }
.arm-kart-bas { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }
.arm-kart-kimlik { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arm-kart-ad { font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.arm-kart-telefon { align-self: flex-start; padding: 2px 0; font-size: 13.5px; color: var(--gtr-primary-dark); font-variant-numeric: tabular-nums; text-decoration: underline; }
.arm-kart-kimlik .arm-cip { align-self: flex-start; background: var(--gtr-surface); }
.arm-kart-bos { padding: 32px 12px; text-align: center; color: var(--gtr-ink-soft); font-size: 13.5px; }

.arm-eylem { display: flex; flex-direction: column; gap: 8px; }
.arm-ara { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border-radius: 14px; border: 0; background: var(--gtr-primary); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
.arm-ara:hover:not(:disabled) { background: var(--gtr-primary-dark); }
/* Sönük Ara (telefon, santral kapalı, web telefonu bağlı değil, başka arama
   sürüyor): üç ekranda aynı görünüm, nedeni altında yazar (2 Eki 2026). */
.arm-ara:disabled, .cc-ara:disabled { opacity: 0.45; cursor: default; }
.arm-durum { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
/* Santral kapalı / dahili yok: sağda sütun açmak yerine tek satır soluk not. */
.arm-eylem-not { margin: 0; font-size: 12px; line-height: 1.4; color: var(--gtr-ink-soft); }
.arm-sonraki { min-height: 44px; border-radius: 12px; border: 1px solid var(--gtr-line); background: #fff; font-weight: 600; font-size: 14px; }
.arm-sonuclar { display: flex; flex-wrap: wrap; gap: 8px; }
.arm-sonuc { flex: 1 1 140px; min-height: 44px; border-radius: 12px; border: 1px solid var(--gtr-line); background: #fff; font-weight: 600; }
.arm-not-kutu { width: 100%; box-sizing: border-box; min-height: 44px; border-radius: 12px; border: 1px solid var(--gtr-line); padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; }
/* Tekrar Aranacak (6 Eki 2026): saat etiketi + saat seçimi + bildirim şeridi. */
.arm-cip.tekrar.bekliyor { background: var(--gtr-surface); color: var(--gtr-ink-soft); }
.arm-cip.tekrar.simdi { background: var(--gtr-accent); color: var(--gtr-ink); }
.arm-cip.tekrar.gecikti { background: var(--gtr-gecikti-zemin); color: var(--gtr-gecikti-ink); }
.arm-kart-kimlik .arm-cip.tekrar.simdi { background: var(--gtr-accent); }
.arm-kart-kimlik .arm-cip.tekrar.gecikti { background: var(--gtr-gecikti-zemin); }
.arm-tekrar-not { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--gtr-ink); }
.arm-tekrar-baslik { flex-basis: 100%; margin: 0; font-size: 13px; font-weight: 600; color: var(--gtr-ink); }
.arm-tekrar-girdi { flex: 1 1 200px; min-height: 44px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--gtr-line); padding: 8px 12px; font: inherit; font-size: 16px; }
/* Vazgeç saat düğmeleriyle aynı boyda (denetim K1); çerçeve/zemin .arm-sonraki'den. */
.arm-sonuclar.arm-tekrar .arm-sonraki { flex: 1 1 140px; padding: 0 18px; font-size: inherit; }
.arm-sonuclar.arm-tekrar .arm-eylem-not { flex-basis: 100%; color: var(--gtr-gecikti-ink); }
.arm-bildirim { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; border-radius: 12px; background: var(--gtr-primary-faint); }
.arm-bildirim[hidden] { display: none; }
.arm-bildirim-metin { margin: 0; font-size: 12px; line-height: 1.4; color: var(--gtr-ink-soft); }
.arm-bildirim-ac { border: 0; background: none; padding: 4px 0; min-height: 32px; font: inherit; font-size: 12px; font-weight: 600; color: var(--gtr-primary-dark); text-decoration: underline; cursor: pointer; }
/* Dar kart: sarmalayıcılar şeffaf, bölümler `order` sırasıyla tek sütun. */
.arm-kart-govde { display: flex; flex-direction: column; gap: 10px; }
.arm-kart-sutun { display: contents; }
.arm-bolum.s1 { order: 1; }
.arm-bolum.s2 { order: 2; }
.arm-bolum.s3 { order: 3; }
.arm-bolum.s4 { order: 4; }
.arm-bolum.s5 { order: 5; }
/* Kart 720 pikselden genişse iki sütun: solda Sepet + Önceki aramalar,
   sağda Siparişler, Sepet hatırlatma, Mesajlar (denetim maddesi 2). */
@container (min-width: 720px) {
  .arm-kart-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
  .arm-kart-sutun { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
}
.arm-bolum { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--gtr-line); border-radius: 14px; background: #fff; }
.arm-bolum-baslik { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--gtr-ink-soft); }
.arm-bolum-metin { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
/* Siparişler bölümünde her sipariş: numara · tarih · tutar · ödeme (30 Eki). */
.arm-siparis-satir { font-size: 13px; line-height: 1.45; margin-top: 4px; overflow-wrap: anywhere; }
.arm-siparis-satir.bekliyor { color: var(--gtr-accent-deep); }
.arm-siparis-satir.iptal, .arm-siparis-satir.kismi-iade { color: var(--gtr-uyari-ink); }
.arm-bolum-bos { font-size: 13px; color: var(--gtr-ink-soft); }
.arm-bolum-hata { font-size: 13px; color: var(--gtr-uyari-ink); overflow-wrap: anywhere; }

.arm-sepet { display: flex; flex-direction: column; gap: 4px; }
.arm-sepet-satir { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.arm-sepet-sol { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.arm-sepet-birim { font-size: 12px; color: var(--gtr-ink-soft); font-variant-numeric: tabular-nums; }
.arm-sepet-satir.toplam { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--gtr-line); font-weight: 700; }
.arm-sepet-ad { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.arm-sepet-fiyat { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.arm-sepet .arm-sepet-satir:not(.toplam) + .arm-sepet-satir:not(.toplam) { padding-top: 6px; border-top: 1px solid var(--gtr-line); }
.arm-sepet-bag { color: var(--gtr-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.arm-sepet-bag:hover { color: var(--gtr-primary); }
.arm-odeme-linki { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--gtr-primary-faint); }
.arm-odeme-linki-metin { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.arm-odeme-linki-baslik { font-size: 12px; font-weight: 700; color: var(--gtr-primary-dark); }
.arm-odeme-linki-adres { font-size: 12px; color: var(--gtr-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arm-odeme-linki-dugme { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--gtr-primary); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }

.arm-mesaj { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border-radius: 12px; background: var(--gtr-surface); text-align: left; font-size: 13.5px; }
.arm-mesaj-kanal { flex: 1; min-width: 0; font-weight: 600; }
.arm-mesaj-zaman { flex: 0 0 auto; font-size: 12px; color: var(--gtr-ink-soft); font-variant-numeric: tabular-nums; }

.arm-arama { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--gtr-surface); }
.arm-arama-ust { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--gtr-ink-soft); }
.arm-arama-zaman { flex: 0 0 auto; }
.arm-arama-kim { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arm-arama-sonuc { font-size: 13.5px; }
.arm-arama-not { font-size: 12.5px; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }

/* ---- Verimor telefon sütunu (yalnız masaüstü) ---- */
.arm-telefon { display: none; }
.arm-telefon-durum { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 12px; background: var(--gtr-surface); font-size: 12.5px; color: var(--gtr-ink-soft); }
.arm-telefon-durum::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gtr-ink-soft); }
.arm-telefon-durum.bagli { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.arm-telefon-durum.bagli::before { background: var(--gtr-primary); }
.arm-telefon-durum.kopuk { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
.arm-telefon-durum.kopuk::before { background: var(--gtr-uyari-ink); }
.arm-telefon-durum.bilgi::before { display: none; }
.arm-telefon-kutu { font-size: 12.5px; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
/* Kalıcı tek satır uyarı (21 Eki 2026): sakin, durum satırının altında. */
.arm-telefon-uyari { margin: 0; padding: 0 2px; font-size: 12px; line-height: 1.4; color: var(--gtr-ink-soft); }

/* Dar BİLGİSAYAR penceresi (daraltılmış / yakınlaştırılmış): arama yolu cihaza
   bağlı, pencereye değil, web telefonu her genişlikte görünür. Telefonda
   (`arama-cihazi` yok) hiçbiri geçerli değil.
   700 altında tek sütun (telefon düzeni): web telefonu listenin altına iner;
   yan yana 320'lik sütun listeyi 15 px'e sıkıştırıyordu (denetim 2 K-f). */
@media (max-width: 1023px) {
  body.arama-cihazi .arm-telefon:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
  body.arama-cihazi .arm-telefon-cerceve { display: block; width: 320px; max-width: 100%; height: 700px; max-height: calc(100vh - 80px); border: 0; border-radius: 14px; background: #fff; }
}
/* 700-1023: web telefonu sağda 320'lik sütun; tam ekran kişi kartı onu örtmez. */
@media (min-width: 700px) and (max-width: 1023px) {
  body.arama-cihazi .arm-alt:not(.telefonsuz) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
  body.arama-cihazi .arm-telefon:not([hidden]) { position: sticky; top: 8px; }
  body.arama-cihazi .arm-alt:not(.telefonsuz) .arm-orta.acik { right: 336px; }
}

/* ---- masaüstü: üç sütun, sayfa kaydırması yok ---- */
@media (min-width: 1024px) {
  /* `.oto-govde`nin kendi kaydırması KAPANIR: kaydırma sütunlara iner. */
  .arm-govde { overflow: hidden; min-height: 0; padding: 12px 16px 16px; gap: 12px; }
  /* Üst şerit tek satır: solda dört KPI, sağda dönem segmenti + "Kişi".
     KPI kutuları 1920'de bir uçtan diğerine gerilmesin diye tavanlı. */
  .arm-ust {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "kpi bas" "alt alt" "kirilim kirilim";
    align-items: center;
    gap: 8px 16px;
  }
  .arm-ust-bas { grid-area: bas; }
  .arm-kpiler { grid-area: kpi; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .arm-kpi-alt { grid-area: alt; }
  .arm-kirilim { grid-area: kirilim; max-width: 420px; }
  .arm-donem { flex: 0 0 auto; }

  /* Liste 340 · kart esnek · telefon 320. Telefon sütunu yoksa (santral
     kapalı / dahili yok) kart onun yerini de alır. Kartın alt sınırı yok:
     440 alt sınırı 1400 altında telefon sütununu sağdan kesiyordu (denetim 2
     E-C); dar kartta başlık alt alta dizilir (aşağıdaki kapsayıcı sorgusu). */
  .arm-alt { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; gap: 16px; align-items: stretch; }
  .arm-alt.telefonsuz { grid-template-columns: 340px minmax(0, 1fr); }
  .arm-sol, .arm-orta, .arm-telefon { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .arm-sol { padding-right: 4px; }
  /* Telefon sütunu 320, web telefonu da 320: dikey kaydırma çubuğu çıkınca
     çerçeve 15 px taşıyor, dipte yatay çubuk beliriyordu (denetim bulgu 10).
     Yatay kaydırma kapalı, çubuk gizli; tekerlekle kaymaya devam eder. */
  .arm-telefon { overflow-x: hidden; scrollbar-width: none; }
  .arm-telefon::-webkit-scrollbar { display: none; }
  /* Sekmeler kaydırırken tepede kalsın: hangi listedeyiz her an görünür. */
  .arm-sekmeler { position: sticky; top: 0; z-index: 1; padding-bottom: 6px; background: var(--gtr-bg); }
  .arm-orta { display: flex; padding: 0 4px 8px; }
  /* Masaüstünde kartın kendi üst çubuğu yok: başlık satırı zaten var. */
  .arm-kart-ust { display: none; }
  /* Seçili satır: zemin + sol şerit (telefonda gösterilmez, orada seçim yok). */
  .arm-satir.secili { background: var(--gtr-primary-faint); }
  .arm-satir.secili::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gtr-primary); }
  /* Başlık: solda ad/telefon/çip, sağda büyük Ara. */
  .arm-kart-bas { flex-direction: row; align-items: center; gap: 16px; }
  .arm-kart-kimlik { flex: 1; }
  .arm-ara { flex: 0 0 auto; width: auto; min-width: 200px; padding: 0 28px; }
  .arm-telefon { display: flex; flex-direction: column; gap: 8px; }
  .arm-telefon[hidden] { display: none !important; }
  .arm-telefon-cerceve { display: block; width: 320px; height: 700px; border: 0; border-radius: 14px; background: #fff; }
  /* Masaüstünde Aranacaklar başlığındaki geri oku gereksiz: menü görünüyor. */
  #aranacaklarGeri { display: none; }
}
/* 1024-1399 (1280 dizüstü): liste 280'e iner, üç sütun pencereye sığar. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .arm-alt { grid-template-columns: 280px minmax(0, 1fr) 320px; }
  .arm-alt.telefonsuz { grid-template-columns: 280px minmax(0, 1fr); }
}
/* 1024-1279 (21 Eki 2026): üç sütunda kart 128 px'e eziliyordu ("Toplam" harf
   harf). Web telefonu 320'nin altına inemez (Verimor arayüzü kesiliyor), bu
   yüzden kartın ALTINA iner: liste solda, kart + telefon sağda alt alta.
   Sütunlar kendi içinde değil, alan bütün olarak kayar (kart en az 320 px;
   Asistan açıkkenki düzenle aynı kalıp, aşağıda). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .arm-alt { overflow-y: auto; grid-template-columns: 280px minmax(320px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "sol orta" "sol tel"; align-items: start; }
  .arm-alt.telefonsuz { grid-template-columns: 280px minmax(320px, 1fr); grid-template-areas: "sol orta"; }
  .arm-sol { grid-area: sol; }
  .arm-orta { grid-area: orta; }
  .arm-telefon { grid-area: tel; }
  .arm-sol, .arm-orta, .arm-telefon { overflow-y: visible; }
}
/* Dar kart (küçük pencere): ad ve Ara alt alta, Ara tam genişlik. */
@container (max-width: 399px) {
  .arm-kart-bas { flex-direction: column; align-items: stretch; }
  .arm-ara { width: 100%; min-width: 0; }
}


/* ============ Aşama 2 · gelen kutusu, konuşma, kişi paneli (28 Eyl 2026) ============
   Önekler: `gk-` gelen kutusu yenileri, `kp-` kişi paneli. Yeni renk yok. */

/* ---- Bugün paneli (O5): konuşma seçili değilken sağ alan ---- */
.gk-bugun { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
.gk-bugun-ic { width: 100%; max-width: 720px; margin: auto; display: flex; flex-direction: column; gap: 16px; font-variant-numeric: tabular-nums; }
.gk-bugun-baslik { font-family: Nunito, sans-serif; font-weight: 800; font-size: 22px; color: var(--gtr-ink); }
.gk-bugun-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.gk-bugun-kutu { padding: 12px 14px; }
.gk-bugun-kutu .arm-kpi-deger { font-size: 24px; }
.gk-bugun-ac { align-self: flex-start; width: auto; min-width: 240px; padding: 0 24px; margin-top: 0; }
.gk-bugun-kisayol { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; align-self: flex-start; min-height: 56px; padding: 10px 16px; border: 1px solid var(--gtr-line); border-radius: 14px; background: var(--gtr-bg); text-align: left; }
.gk-bugun-kisayol b { font-weight: 600; font-size: 14px; color: var(--gtr-primary-dark); }
.gk-bugun-kisayol span { font-size: 12.5px; color: var(--gtr-ink-soft); }
.gk-bugun-kisayol:hover { background: var(--gtr-primary-faint); }
/* Bugün paneli · bekleyen yorum satırı (21 Eki): yorumlar mesaj listesinde yok. */
.gk-bugun-yorum { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: var(--gtr-uyari-zemin); }
.gk-bugun-yorum b { font-weight: 600; font-size: 14px; color: var(--gtr-uyari-ink); }
.gk-bugun-yorum-ac { min-height: 40px; padding: 0 16px; border: 1px solid var(--gtr-uyari-ink); border-radius: 999px; background: var(--gtr-bg); color: var(--gtr-uyari-ink); font-weight: 600; font-size: 14px; }
.gk-bugun-yorum-ac:hover { background: var(--gtr-uyari-zemin); }

/* ---- Kişi paneli · CRM kartı (P1) ---- */
.kp-kapat { display: none; }
.kk-ust h2 { min-width: 0; }
.kp-iletisim { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin-top: 8px; }
.kp-telefon { position: relative; align-self: center; min-height: 44px; padding: 0 8px; font-size: 14px; color: var(--gtr-primary-dark); font-variant-numeric: tabular-nums; text-decoration: underline; }
.kp-ara { width: 100%; }
.kp-ozet { display: flex; flex-direction: column; gap: 10px; font-variant-numeric: tabular-nums; }
.kp-ozet .arm-bolum { padding: 12px; border-radius: 12px; }
/* Boş bölüm kutu değil, tek satır gri metin (belge 2.4). */
.kp-ozet .arm-bolum.kp-bos { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 0 4px; border: 0; background: none; }
.kp-isler { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--gtr-primary-faint); }
.kp-is { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--gtr-primary-dark); overflow-wrap: anywhere; }
.kp-is.odeme { color: var(--gtr-accent-deep); }
.kp-siparis, .kp-otomatik { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 0 0; border-top: 1px solid var(--gtr-line); font-size: 12.5px; }
.kp-no { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.kp-tarih { flex: 0 0 auto; color: var(--gtr-ink-soft); }
.kp-tutar { flex: 1; min-width: 0; font-weight: 600; }
.kp-ad { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.kp-durum { flex: 0 1 auto; margin-left: auto; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.kp-siparis.iptal .kp-tutar { color: var(--gtr-ink-soft); text-decoration: line-through; }
.kp-siparis.bekliyor .kp-durum, .kp-otomatik.atlandi .kp-durum { color: var(--gtr-accent-deep); }
/* Kısmi iade (30 Eki): tutar geçerli, yalnız etiket uyarı renginde. */
.kp-siparis.kismi-iade .kp-durum, .kp-siparis.iptal .kp-durum { color: var(--gtr-uyari-ink); }
.kp-otomatik.hata .kp-durum { color: var(--gtr-uyari-ink); }
.kp-otomatik .kp-durum { flex-basis: 100%; margin-left: 0; }
.kp-zemin { display: none; }

/* ---- Kişi paneli · yükleniyor / hata (29 Eyl) ----
   Yeni kişi yüklenirken boş alan yerine iskelet: şerit + üç bölüm başlığı +
   gri çubuklar. Hafif nabız; hareket azaltılmışsa durur. Yeni renk yok. */
.kp-okuyucu { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kp-iskelet { display: flex; flex-direction: column; gap: 10px; }
.kp-iskelet-serit { height: 44px; border-radius: 12px; background: var(--gtr-primary-faint); }
.kp-iskelet-bolum { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--gtr-line); border-radius: 12px; }
.kp-iskelet-baslik { width: 38%; height: 10px; border-radius: 999px; background: var(--gtr-line); }
.kp-iskelet-cubuk { width: 100%; height: 12px; border-radius: 999px; background: var(--gtr-surface); }
.kp-iskelet-cubuk.kisa { width: 64%; }
.kp-iskelet-serit, .kp-iskelet-baslik, .kp-iskelet-cubuk { animation: kp-nabiz 1.4s ease-in-out infinite; }
@keyframes kp-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .kp-iskelet-serit, .kp-iskelet-baslik, .kp-iskelet-cubuk { animation: none; }
}
.kp-hata { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; border-radius: 12px; background: var(--gtr-uyari-zemin); }
.kp-tekrar { width: 100%; }

/* ---- Kişi paneli · santral ile arama (29 Eyl) ----
   Aranacaklar'ın `arm-` parçaları: durum satırı, not kutusu, sonuç düğmeleri. */
.kp-ara-notu { width: 100%; text-align: left; }
.kp-arama { width: 100%; min-width: 0; text-align: left; }
.kp-bitir { width: 100%; color: var(--gtr-uyari-ink); }
.kp-bitir:disabled { opacity: 0.6; cursor: default; }
.kp-arama .arm-sonuc:disabled { opacity: 0.6; cursor: default; }

/* ---- 1400 altı: kişi paneli çekmece / tam ekran (P3) ---- */
@media (max-width: 1399px) {
  .kp-kapat { display: grid; }
  .sahne.kisi-acik > .kisi-kart:not([hidden]) {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 18;
    width: 360px;
    max-width: 100%;
    box-shadow: -12px 0 34px rgba(20, 35, 40, 0.16);
  }
  .sahne.kisi-acik > .kp-zemin:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 17; background: rgba(20, 35, 40, 0.16); }
}
/* Telefon: tam ekran, geri tuşu konuşmaya döner. */
@media (max-width: 899px) {
  .sahne.kisi-acik > .kisi-kart:not([hidden]) { left: 0; width: auto; bottom: var(--klavye-payi, 0px); border-left: 0; box-shadow: none; }
  .sahne.kisi-acik > .kp-zemin:not([hidden]) { display: none; }
}
/* 900 ile 1399 arası: başlıkta "Kişi" düğmesi (telefonda ada dokunmak yeterli). */
@media (min-width: 900px) and (max-width: 1399px) {
  .kp-kisi-dugme { display: inline-flex; align-items: center; }
}

/* ---- 1600 ve üstü: liste ve kişi paneli 380 ---- */
@media (min-width: 1600px) {
  .sahne > #ekranListe { flex: 0 0 380px; }
  .sahne:not(.giris-modu):not(.otomasyon-modu) > .kisi-kart { flex: 0 0 380px; }
}
/* Uzun başlık ("Yanıtlananlar · Instagram") üst çubuğu taşırmaz. */
#listeBaslik { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1400px) {
  /* Kişi paneli sütunda hep açık: başlıktaki ad burada düğme değil. */
  .k-kim { cursor: default; }
}


/* ============ Cevapsız Çağrılar (1 Eki 2026) · cc- ============
   Numara başına tek satır. Telefonda bilgi üstte, düğmeler altta eşit
   genişlikte (dokunma hedefi 44+). 760 pikselden geniş kapta bilgi solda,
   düğmeler sağda tek satır. İçerik 1920'de uzayıp okunmaz olmasın diye
   920 piksel tavanlı, ortada değil solda (menünün yanında) durur.
   Yeni renk yok: mesai dışı çipi sarı (aciliyet değil, "mesai dışında aradı"). */
.cc-govde { display: flex; flex-direction: column; gap: 10px; font-variant-numeric: tabular-nums; }
.cc-govde > * { width: 100%; max-width: 920px; }
.cc-aciklama { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--gtr-ink-soft); }
.cc-liste { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
.cc-bos { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 40px 12px; text-align: center; color: var(--gtr-ink-soft); font-size: 13.5px; }
.cc-bos b { font-family: Nunito, sans-serif; font-weight: 800; font-size: 16px; color: var(--gtr-ink); }

.cc-satir { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--gtr-surface); }
.cc-bilgi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cc-ust { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.cc-ad { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.cc-cip { flex: 0 0 auto; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; background: #fff; color: var(--gtr-ink-soft); white-space: nowrap; }
.cc-cip.disi { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
/* Telefonla sipariş (menüde 1'e basan, sipariş niyetli): bir bakışta seçilsin
   diye parlak sarı etiket + satırın sol kenarında sarı şerit ve açık sarı zemin.
   Cevapsız Çağrılar ve Son aramalar aynı sınıfı kullanır. */
.cc-cip.siparis { background: var(--gtr-accent); color: var(--gtr-ink); font-weight: 800; }
.cc-satir.siparis { background: var(--gtr-accent-faint); box-shadow: inset 4px 0 0 var(--gtr-accent); }
.cc-satir.siparis .cc-cip.disi { background: #fff; }
.cc-cip.wa { background: #e7f6ec; color: #1f7a3d; }
.cc-alt { font-size: 12.5px; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.cc-durum { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--gtr-ink); overflow-wrap: anywhere; }
.cc-durum.suruyor { color: var(--gtr-accent-deep); font-weight: 600; }

.cc-eylemler { display: flex; gap: 8px; min-width: 0; }
.cc-dugme { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--gtr-line); background: #fff; color: var(--gtr-ink); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-dugme:disabled { opacity: .5; cursor: default; }
.cc-ara { border-color: transparent; background: var(--gtr-primary); color: #fff; font-weight: 700; }
.cc-ara:hover:not(:disabled) { background: var(--gtr-primary-dark); }
/* Ara sönükse nedeni listenin üstünde bir kez (her satırda tekrar etmez). */
.cc-ara-notu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-ara-notu:empty { display: none; }
.cc-ara-notu .arm-sonraki { padding: 0 14px; }
.cc-bitir { border-color: transparent; background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
.cc-wa { color: var(--gtr-primary-dark); }
.cc-tamam:hover:not(:disabled), .cc-wa:hover { background: var(--gtr-primary-faint); }

@container (min-width: 620px) {
  .cc-satir { flex-direction: row; align-items: center; gap: 16px; padding: 12px 14px; }
  .cc-bilgi { flex: 1; }
  /* Düğmeler satırlar arasında aynı sütunda: WhatsApp'ı olmayan satırda
     onun yeri boş kalır, Ara ve Tamamlandı kaymaz. */
  .cc-eylemler { flex: 0 0 auto; display: grid; grid-template-columns: 132px 112px 124px; }
  .cc-dugme { padding: 0 12px; }
  .cc-ara, .cc-bitir { grid-column: 1; }
  .cc-wa { grid-column: 2; }
  .cc-tamam { grid-column: 3; }
}

@media (min-width: 1024px) {
  .cc-govde { padding: 16px 24px; }
  #cevapsizGeri, #sonAramalarGeri { display: none; }
}

/* Son aramalar (26 Eki 2026, `son-aramalar.js`): Cevapsız Çağrılar'ın satır
   kalıbı (cc-*); burada yalnız yön çipi, iki düğmelik sütun ve kişi kutusu.
   Yeni renk yok. */
.cc-cip.sa-yon.gelen { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.cc-cip.sa-yon.kacan { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.cc-cip.sa-yon.giden { background: #fff; color: var(--gtr-ink-soft); }
.sa-kisi { color: var(--gtr-primary-dark); }
.sa-secici { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.sa-secim { min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gtr-line); background: var(--gtr-surface); color: var(--gtr-ink); font-weight: 600; font-size: 13px; cursor: pointer; }
.sa-secim:hover:not(.secili) { background: var(--gtr-primary-faint); }
.sa-secim.secili { background: var(--gtr-ink); color: #fff; border-color: transparent; }
.sa-kisi:hover:not(:disabled) { background: var(--gtr-primary-faint); }
.sa-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; max-width: 420px; }
.sa-form-etiket { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--gtr-ink-soft); }
.sa-form-etiket .sa-ad { color: var(--gtr-ink); resize: none; }
.sa-form-dugmeler { display: flex; gap: 8px; }
.sa-form-dugmeler .cc-dugme { flex: 0 0 auto; padding: 0 20px; }
/* Gelen aramanın sonucu / kaçan aramanın notu (1 Kas 2026): giden aramanın
   sonuç paneli (arm-*) satırın içinde; burada yalnız genişlik ve üçüncü sütun. */
.sa-sonuc { color: var(--gtr-primary-dark); }
.sa-sonuc:hover:not(:disabled) { background: var(--gtr-primary-faint); }
.sa-sonuc-form { max-width: 560px; }
/* Dar ekranda (telefon) üç düğme yan yana sığmıyor, "Sonucu değiştir" kesiliyordu
   (denetim 1 Kas B4): sonuç düğmesi alt satıra, tam genişlik. Geniş ekranda ızgara. */
.sa-eylemler { flex-wrap: wrap; }
.sa-eylemler .sa-sonuc { flex: 1 1 100%; }
@container (min-width: 620px) {
  .sa-eylemler { grid-template-columns: 132px 132px 132px; }
  .sa-eylemler .sa-kisi { grid-column: 2; }
  .sa-eylemler .sa-sonuc { grid-column: 3; }
}

/* Telefon menü düğmesinin rozeti: geri aranmayı bekleyen numara var. */
.ust-dugme.rozetli { position: relative; }
.ust-rozet { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gtr-accent); color: var(--gtr-ink); font-family: Nunito, sans-serif; font-weight: 800; font-size: 11px; line-height: 18px; text-align: center; }

/* ======================= Ayşenur Asistanı (1 Eki 2026) =======================
   Sağdan açılan panel (`asistan.js`). Önek `ast-`: başka dosyada yok.
   Masaüstünde 400px sütun (sayfa ona yer açar, arka zemin yok: yazma kutusu
   açık ve görünür kalır; ayrıntı aşağıda `body.ast-acik`), 899 altında tam ekran.
   Yeni renk yok: GTR teal + sarı + yüzey griler. */
/* Açma düğmesi YAZILI (21 Eki 2026): yalnız kitap simgesiyle Hakan da
   Ayşenur da bulamadı. Kişi düğmesi gibi açık zeminli hap; telefonda simge
   düşer, yazı kalır (390 px'te konuşma başlığında ad sığsın, taşma olmasın). */
.ast-ac { flex: 0 0 auto; background: rgba(255, 255, 255, 0.18); white-space: nowrap; }
@media (max-width: 599px) {
  .ast-ac { padding: 0 8px; font-size: 13px; }
  .ast-ac .ikon { display: none; }
  /* Aranacaklar / Cevapsız başlığında 390 px'te geri + başlık + Kişi bul +
     Asistan + Yenile sığmıyordu (Chrome ölçümü: geri ve Kişi bul 37 px'e
     eziliyordu). Yenile'nin yazısı dar ekranda görünmez olur ama düğmenin adı
     kalır (index.html'deki not bunu söylüyordu, kural yoktu); düğmeler
     ezilmez, uzun başlık en son kısalır. */
  #aranacaklarYenile, #cevapsizYenile, #sonAramalarYenile { width: 44px; padding: 0; }
  #aranacaklarYenile span, #cevapsizYenile span, #sonAramalarYenile span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #ekranAranacaklar .ust > .ust-dugme, #ekranCevapsiz .ust > .ust-dugme { flex-shrink: 0; }
  #ekranAranacaklar .ust h2, #ekranCevapsiz .ust h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Masaüstünde konuşma açıkken liste başlığındaki ikinci düğme gizli: aynı
   panel konuşma başlığındaki düğmeden açılır (iki "Asistan" yan yana durmasın). */
@media (min-width: 900px) {
  .sahne:has(> #ekranKonusma:not([hidden])) #asistanAcListe { display: none; }
}
.ast-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: var(--klavye-payi, 0px);
  z-index: 22;
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gtr-bg);
  box-shadow: -12px 0 34px rgba(20, 35, 40, 0.16);
}
.ast-panel[hidden] { display: none !important; }
.ast-ust h2 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ast-govde { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.ast-arama { display: flex; gap: 8px; position: sticky; top: -12px; z-index: 1; margin: -12px -12px 0; padding: 12px; background: var(--gtr-bg); border-bottom: 1px solid var(--gtr-line); }
.ast-arama input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--gtr-line); border-radius: 12px; background: var(--gtr-surface); font-size: 16px; }
.ast-ara-dugme { flex: 0 0 auto; min-width: 64px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--gtr-primary); color: #fff; font-weight: 600; }
.ast-arama-sonuc:empty { display: none; }
.ast-arama-sonuc { display: flex; flex-direction: column; gap: 8px; }
.ast-icerik { display: flex; flex-direction: column; gap: 14px; }
.ast-bolum { display: flex; flex-direction: column; gap: 8px; }
.ast-bolum > h3, .ast-rehber h4 { font-size: 13px; font-weight: 700; color: var(--gtr-ink-soft); }
.ast-rehber h4 { margin-top: 6px; }
.ast-liste { display: flex; flex-direction: column; gap: 8px; }
.ast-bos { padding: 10px 12px; border-radius: 12px; background: var(--gtr-surface); color: var(--gtr-ink-soft); font-size: 14px; line-height: 1.45; }
.ast-istekler { display: flex; flex-direction: column; gap: 6px; }
.ast-istek { padding: 10px 12px; border-radius: 12px; background: var(--gtr-primary-faint); display: flex; flex-direction: column; gap: 3px; }
.ast-istek b { color: var(--gtr-primary-dark); font-size: 15px; }
.ast-istek > p:not(.ast-alinti) { font-size: 14px; line-height: 1.45; }
.ast-ic { font-size: 13.5px; line-height: 1.45; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.ast-alinti { font-size: 13px; color: var(--gtr-ink); font-style: italic; overflow-wrap: anywhere; }
.ast-urun, .ast-madde, .ast-rehber { padding: 12px; border: 1px solid var(--gtr-line); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ast-urun:not([open]) { gap: 0; }
.ast-madde-baslik { font-size: 14px; }
.ast-not { display: flex; flex-direction: column; gap: 14px; }
.ast-maddeler { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ast-grup { font-size: 13.5px; color: var(--gtr-primary-dark); }
.ast-uyari { font-size: 13px; font-weight: 600; color: var(--gtr-uyari-ink); }
.ast-bilinmiyor { padding: 8px 10px; border-radius: 10px; background: var(--gtr-surface); font-size: 14px; }
.ast-sss { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.ast-not-geri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--gtr-line); }
.ast-eylem { display: flex; flex-wrap: wrap; gap: 8px; }
.ast-dugme { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gtr-line); background: #fff; font-size: 14px; font-weight: 600; }
.ast-dugme.birincil { background: var(--gtr-primary); border-color: var(--gtr-primary); color: #fff; }
.ast-degerlendir { display: flex; flex-wrap: wrap; gap: 6px; }
.ast-mini { min-height: 32px; padding: 0 10px; border-radius: 999px; background: var(--gtr-surface); color: var(--gtr-ink-soft); font-size: 12.5px; }
.ast-mini.birincil { background: var(--gtr-primary); color: #fff; font-weight: 600; }
/* "Eksik / yanlış" notu panelin içinde (21 Eki 2026; tarayıcı soru penceresi kalktı).
   Yazı 16px: iOS odaklanınca sayfayı yakınlaştırmasın. */
.ast-eksik-kutu { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.ast-eksik-girdi { flex: 1 1 180px; min-width: 0; min-height: 36px; padding: 0 12px; border: 1px solid var(--gtr-line); border-radius: 10px; background: #fff; font-size: 16px; outline: none; }
.ast-eksik-girdi:focus { border-color: var(--gtr-primary); }
.ast-sonraki { align-self: flex-start; }
.ast-mini:disabled, .ast-dugme:disabled { opacity: 0.5; cursor: default; }
.ast-urun-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: pointer; min-height: 32px; }
.ast-baglanti { color: var(--gtr-primary-dark); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ast-baglanti:hover { text-decoration: underline; }
.ast-fiyat { font-size: 15px; font-weight: 700; }
.ast-fiyat.tukendi, .ast-soluk.tukendi { color: var(--gtr-uyari-ink); }
.ast-fiyat.bilinmiyor { font-weight: 500; font-size: 13.5px; color: var(--gtr-ink-soft); }
.ast-yarar { font-size: 14px; line-height: 1.45; }
.ast-satir { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ast-etiket { display: inline-block; margin-right: 6px; font-weight: 600; color: var(--gtr-ink-soft); }
.ast-dikkat { padding: 8px 10px; border-radius: 10px; background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); font-size: 13.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.ast-acilir > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--gtr-primary-dark); min-height: 32px; display: flex; align-items: center; }
.ast-acilir[open] { display: flex; flex-direction: column; gap: 6px; }
.ast-iliskili { font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ast-soluk { color: var(--gtr-ink-soft); font-size: 13px; }
.ast-rozet { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--gtr-surface); color: var(--gtr-ink-soft); font-size: 11.5px; font-weight: 600; }
.ast-rozet.hediye { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.ast-kisi { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--gtr-surface); }
.ast-rehber > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ast-rehber[open] > summary { margin-bottom: 4px; }
/* Arama rehberi (Aranacaklar, 5 Eki 2026; anahtar kare docs/specs/2026-10-05-arama-rehberi-taslak.html).
   Önek `ast-r-`. Yeni renk yok: sarı = neden / sınır, teal = adım ve eylem, uyarı çifti = tükendi ve söz verme. */
.ast-panel.rehberli .ast-govde { padding-bottom: 12px; }
.ast-alt { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gtr-line); background: var(--gtr-bg); }
.ast-alt .ast-arama { position: static; margin: 0; padding: 0; border: 0; background: none; }
.ast-soz { padding: 6px 9px; border-radius: 8px; background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); font-size: 12.5px; line-height: 1.4; }
.ast-rehberi { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ast-r-kisi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ast-r-kisi b { font-family: Nunito, sans-serif; font-weight: 800; font-size: 19px; overflow-wrap: anywhere; }
.ast-r-kisi small { color: var(--gtr-ink-soft); font-size: 12.5px; }
.ast-r-neden { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border-radius: 10px; background: var(--gtr-accent-faint); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ast-r-etiket { font-size: 12px; font-weight: 700; color: var(--gtr-accent-deep); }
.ast-r-not { font-size: 12.5px; color: var(--gtr-accent-deep); }
.ast-r-cubuk { display: flex; flex-direction: column; gap: 4px; }
.ast-r-cubuk-iz { position: relative; height: 8px; border-radius: 999px; background: rgba(138, 100, 18, 0.18); overflow: hidden; }
.ast-r-cubuk-iz i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--gtr-accent); }
.ast-r-cubuk-yazi { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gtr-accent-deep); }
.ast-r-adimlar { display: flex; flex-direction: column; gap: 6px; }
.ast-r-adim { border: 1px solid var(--gtr-line); border-radius: 10px; background: var(--gtr-bg); min-width: 0; }
.ast-r-adim.acik { border-color: var(--gtr-primary); }
.ast-r-adim-bas { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: none; border: 0; color: var(--gtr-ink); font: inherit; text-align: left; cursor: pointer; }
.ast-r-no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--gtr-surface); color: var(--gtr-ink-soft); font-variant-numeric: tabular-nums; }
.ast-r-adim.acik .ast-r-no { background: var(--gtr-primary); color: #fff; }
.ast-r-adim.bitti .ast-r-no { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.ast-r-adim.bitti .ast-r-ad { color: var(--gtr-ink-soft); }
.ast-r-ad { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.ast-r-ozet { flex: none; max-width: 48%; font-size: 12px; color: var(--gtr-ink-soft); text-align: right; }
.ast-r-icerik { display: flex; flex-direction: column; gap: 9px; padding: 0 12px 12px 46px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ast-r-ipucu { font-size: 12.5px; color: var(--gtr-ink-soft); }
.ast-r-ipucu b { color: var(--gtr-ink); }
.ast-r-urun { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border: 1px solid var(--gtr-line); border-radius: 9px; }
.ast-r-urun-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ast-r-urun-ust b { font-size: 13.5px; min-width: 0; }
.ast-r-fiyat { flex: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ast-r-fiyat.okunamadi { font-weight: 500; color: var(--gtr-uyari-ink); white-space: normal; text-align: right; }
.ast-r-rozetler { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.ast-r-rozet { padding: 1px 7px; border-radius: 999px; background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); font-size: 11px; font-weight: 600; }
.ast-r-rozet.uyari { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
.ast-r-ekle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 10px; border-radius: 9px; background: var(--gtr-surface); }
.ast-r-ekle b { font-size: 13.5px; }
.ast-r-ekle small { grid-column: 1 / -1; color: var(--gtr-ink-soft); font-size: 12px; }
.ast-r-toplam { color: var(--gtr-primary-dark); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ast-r-ekle .ast-baglanti { font-size: 12.5px; justify-self: end; }
.ast-r-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.ast-r-cip { min-height: 32px; padding: 0 11px; border: 1px solid var(--gtr-line); border-radius: 999px; background: var(--gtr-bg); color: var(--gtr-ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.ast-r-cip[aria-pressed="true"] { background: var(--gtr-primary); border-color: var(--gtr-primary); color: #fff; }
.ast-r-cevap { margin: 0; padding: 9px 10px 9px 26px; border-radius: 9px; background: var(--gtr-surface); display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.ast-r-cevap:empty { display: none; }
.ast-r-eylemler { display: flex; flex-direction: column; gap: 6px; }
.ast-r-eylem { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; border: 1px solid var(--gtr-primary); border-radius: 9px; background: var(--gtr-bg); color: var(--gtr-ink); font: inherit; text-align: left; cursor: pointer; }
.ast-r-eylem.ana { background: var(--gtr-primary); color: #fff; }
.ast-r-eylem b { font-size: 13.5px; }
.ast-r-eylem small { font-size: 12px; opacity: .85; }
.ast-r-sonuclar { display: flex; flex-direction: column; gap: 5px; }
.ast-r-sonuc { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--gtr-surface); font-size: 12.5px; }
.ast-r-sonuc.vurgu { background: var(--gtr-accent-faint); }
.ast-r-sonraki { align-self: flex-start; min-height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.ast-r-git { align-self: flex-start; }
.ast-r-adim-bas:focus-visible, .ast-r-cip:focus-visible, .ast-r-eylem:focus-visible, .ast-r-sonraki:focus-visible { outline: 2px solid var(--gtr-primary); outline-offset: 2px; }
@media (max-width: 420px) {
  .ast-r-icerik { padding-left: 12px; }
  .ast-r-sonuc { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Masaüstü: panel açıkken sayfa panele YER AÇAR, hiçbir şeyin üstüne binmez
   ve hiçbir iş yolu kapanmaz (denetim E2 + 2. tur Y1, Y2, Y4; 2 Eki 2026).
   Ayşenur'un ekran genişliği bilinmediği için her genişlikte aynı söz:
   - sahne 400 piksel daralır, panel onun sağındaki boşluğa oturur;
   - sol menü (1024+) gizlenmez, ikon şeridine iner (ad fare üstünde);
   - konuşma listesi 1400 altında açık konuşmada "Konuşmalar" şeridine iner,
     fare üstüne gelince konuşmanın üstünde açılır (yer kaydırmaz);
   - Aranacaklar listesi 1600 altında aynı biçimde şeride iner; 900-1023'te
     kart zaten tam ekran katman, geri oku listeye döner;
   - kişi kartı her genişlikte başlıktaki "Kişi" düğmesiyle çekmece olarak
     açılır (1400+ sütunun yerini panel aldı), 24 saat sayacı başlıkta görünür;
   - onay yaprağı panelin ÜSTÜNDE açılır; sabit katmanlar (kişi çekmecesi,
     dar pencerede kişi kartı, toplu gönderim çubuğu, bilgi şeridi) panelin
     solunda biter.
   Hepsi `body.ast-acik` altında: panel kapalıyken hiçbir yerleşim değişmez. */
body.ast-acik .yaprak-zemin { z-index: 23; }
@media (min-width: 900px) {
  body.ast-acik .sahne { width: calc(100% - 400px); }
  body.ast-acik .sahne.kisi-acik > .kisi-kart:not([hidden]) { right: 400px; }
  body.ast-acik .bilgi-serit { right: 412px; }
}
@media (min-width: 900px) and (max-width: 1399px) {
  /* Şerit: kapalıyken içerik gizli, yalnız dikey "Konuşmalar"; fare üstünde
     200 ms kalınca ya da klavyeyle odaklanınca (şeridin kendisi sekme durağı)
     tam genişlikte, komşu sütunun üstünde açılır. Gecikme: fare şeridin
     üstünden geçip menüye giderken liste yanıp sönmesin. Kapalıyken liste
     gizlenmez, etiket üstünü örter: Sekme şeritten ilk satıra geçerken odak
     bir an hiçbir yerde değil, satırlar o an görünmez olsaydı odak sayfadan
     düşerdi. */
  body.ast-acik .sahne:not(.giris-modu):not(.otomasyon-modu) > #ekranListe[hidden] { position: relative; z-index: 6; overflow: hidden; flex: 0 0 48px; transition: flex-basis 0s, margin-right 0s, background-color 0s, box-shadow 0s; }
  body.ast-acik .sahne:not(.giris-modu):not(.otomasyon-modu) > #ekranListe[hidden]::before { content: "Konuşmalar"; position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-weight: 600; font-size: 13px; color: var(--gtr-primary-dark); background: var(--gtr-surface); cursor: pointer; transition: visibility 0s; }
  body.ast-acik .sahne:not(.giris-modu):not(.otomasyon-modu) > #ekranListe[hidden]:is(:hover, :focus-visible, :has(:focus-visible)) { flex-basis: 340px; margin-right: -292px; background: var(--gtr-bg); box-shadow: 12px 0 34px rgba(20, 35, 40, 0.16); transition-delay: 200ms; }
  body.ast-acik .sahne:not(.giris-modu):not(.otomasyon-modu) > #ekranListe[hidden]:is(:hover, :focus-visible, :has(:focus-visible))::before { visibility: hidden; transition-delay: 200ms; }
  /* Klavyeyle gelince beklemeden açılır. */
  body.ast-acik .sahne:not(.giris-modu):not(.otomasyon-modu) > #ekranListe[hidden]:is(:focus-visible, :has(:focus-visible)), body.ast-acik .sahne:not(.giris-modu):not(.otomasyon-modu) > #ekranListe[hidden]:is(:focus-visible, :has(:focus-visible))::before { transition-delay: 0s; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  body.ast-acik .arm-orta.acik { right: 400px; }
  body.ast-acik.arama-cihazi .arm-alt:not(.telefonsuz) .arm-orta.acik { right: 736px; }
  body.ast-acik .tpl-gonder-cubuk { right: 400px; }
}
@media (min-width: 1024px) {
  /* Menü ikon şeridi: ad ekran okuyucuda ve `title`da kalır, rozet ikonun köşesinde. */
  body.ast-acik .sahne:not(.giris-modu) > .ana-menu { flex-basis: 60px; }
  body.ast-acik .am-ust h2, body.ast-acik .am-bolum h3 { display: none; }
  body.ast-acik .am-govde { padding: 12px 6px; }
  body.ast-acik .am-oge { position: relative; justify-content: center; min-height: 44px; padding: 0; }
  body.ast-acik .am-oge span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.ast-acik .am-ikon { width: 20px; height: 20px; }
  body.ast-acik .am-say { position: absolute; top: 2px; right: 2px; margin: 0; font-size: 10.5px; }
  /* Kişi bul da ikona iner (şeritte "Kişi / bul" diye iki satıra kırılıyordu; deneme yürüyüşü 3 Eki). */
  body.ast-acik .kb-menu-ac { justify-content: center; padding-left: 0; padding-right: 0; }
  body.ast-acik .kb-menu-ac .kb-menu-metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.ast-acik .kb-menu-ac .kb-kisayol { display: none; }
  /* Aranacaklar: kart esner, Ara düğmesi alta iner. */
  body.ast-acik .arm-alt { grid-template-columns: 340px minmax(0, 1fr) 320px; }
  body.ast-acik .arm-alt.telefonsuz { grid-template-columns: 340px minmax(0, 1fr); }
  body.ast-acik .arm-kart-bas { flex-direction: column; align-items: stretch; }
  body.ast-acik .arm-kart-bas .arm-ara { width: 100%; min-width: 0; }
}
@media (min-width: 1024px) and (max-width: 1599px) {
  body.ast-acik .arm-alt { grid-template-columns: 48px minmax(0, 1fr) 320px; }
  body.ast-acik .arm-alt.telefonsuz { grid-template-columns: 48px minmax(0, 1fr); }
  /* Şerit: Konuşmalar şeridiyle aynı kalıp (200 ms gecikme, klavyeyle odakta açılır). */
  body.ast-acik .arm-alt > .arm-sol { position: relative; z-index: 6; overflow: hidden; width: 48px; padding-right: 0; transition: width 0s, padding-right 0s, overflow 0s, background-color 0s, box-shadow 0s; transition-behavior: allow-discrete; }
  body.ast-acik .arm-alt > .arm-sol::before { content: "Aranacaklar listesi"; position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-weight: 600; font-size: 13px; color: var(--gtr-primary-dark); background: var(--gtr-surface); cursor: pointer; transition: visibility 0s; }
  body.ast-acik .arm-alt > .arm-sol:is(:hover, :focus-visible, :has(:focus-visible)) { width: 340px; padding-right: 4px; overflow-y: auto; background: var(--gtr-bg); box-shadow: 12px 0 34px rgba(20, 35, 40, 0.16); transition-delay: 200ms; }
  body.ast-acik .arm-alt > .arm-sol:is(:hover, :focus-visible, :has(:focus-visible))::before { visibility: hidden; transition-delay: 200ms; }
  body.ast-acik .arm-alt > .arm-sol:is(:focus-visible, :has(:focus-visible)), body.ast-acik .arm-alt > .arm-sol:is(:focus-visible, :has(:focus-visible))::before { transition-delay: 0s; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Liste şeridi + kart + 320'lik web telefonu yan yana sığmıyor (kart ~130 px
     kalıyordu): web telefonu kartın altına iner, liste şeridi iki satırı da
     kaplar, alan bütün olarak kayar. Ara düğmesi kartın başında kalır. */
  body.ast-acik .arm-alt:not(.telefonsuz) { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; overflow-y: auto; }
  body.ast-acik .arm-alt:not(.telefonsuz) > .arm-sol { grid-row: 1 / span 2; align-self: stretch; }
  body.ast-acik .arm-alt:not(.telefonsuz) > .arm-sol::before { justify-content: flex-start; padding-top: 24px; }
  body.ast-acik .arm-alt:not(.telefonsuz) > .arm-orta, body.ast-acik .arm-alt:not(.telefonsuz) > .arm-telefon { grid-column: 2; overflow: visible; }
  body.ast-acik .arm-alt:not(.telefonsuz) > .arm-telefon { grid-row: 2; align-items: flex-start; }
}
@media (min-width: 1400px) {
  /* Kişi kartı sütunu panelin yerine geçmez; 1400 altındaki çekmece kalıbı. */
  body.ast-acik .sahne:not(.giris-modu):not(.otomasyon-modu):not(.kisi-acik) > .kisi-kart { display: none; }
  body.ast-acik .kp-kisi-dugme { display: inline-flex; align-items: center; }
  body.ast-acik .kp-kapat { display: grid; }
  body.ast-acik .sahne.kisi-acik > .kisi-kart:not([hidden]) {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 18;
    width: 360px;
    box-shadow: -12px 0 34px rgba(20, 35, 40, 0.16);
  }
  body.ast-acik .sahne.kisi-acik > .kp-zemin:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 17; background: rgba(20, 35, 40, 0.16); }
  body.ast-acik .yazma-sure:not([hidden]) { display: inline-flex; }
}

/* Telefon: tam ekran. */
@media (max-width: 899px) {
  .ast-panel { left: 0; width: auto; box-shadow: none; }
}

/* ============ Sipariş oluştur (2 Eki 2026) · sp- ============
   Telefonda tek sütun (form, ürünler, kod, özet, son liste). 1024+ solda
   form, sağda yapışkan özet; içerik 1240 piksel tavanlı, menünün yanında
   solda durur. Yeni renk yok: uyarı çifti ve marka yeşili. */
.sp-govde { display: flex; flex-direction: column; gap: 12px; font-variant-numeric: tabular-nums; }
.sp-govde > * { width: 100%; max-width: 1240px; }
.sp-izgara { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sp-sol, .sp-sag { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sp-kart { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 14px; background: var(--gtr-surface); }
.sp-baslik { font-family: Nunito, sans-serif; font-weight: 800; font-size: 16px; }
.sp-not { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--gtr-ink-soft); }
/* Numarası gizli müşteri (21 Eki 2026): telefon kutusunun hemen altında, boşken. */
.sp-telefon-ipucu { display: block; color: var(--gtr-uyari-ink); font-weight: 600; }
.sp-telefon-ipucu[hidden] { display: none; }
.sp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-alan-adres, .sp-alan-eposta { grid-column: 1 / -1; }
.sp-etiket { font-size: 12px; font-weight: 600; color: var(--gtr-ink-soft); }
.sp-girdi { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--gtr-line); background: var(--gtr-bg); font-size: 15px; }
textarea.sp-girdi { resize: vertical; line-height: 1.4; }
.sp-girdi:focus { outline: 2px solid var(--gtr-primary); outline-offset: -1px; }

.sp-sonuclar { display: flex; flex-direction: column; gap: 6px; }
.sp-sonuclar:empty { display: none; }
.sp-sonuc { display: flex; flex-direction: column; gap: 6px; border-radius: 12px; background: var(--gtr-bg); }
.sp-sonuc-ust { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; text-align: left; border-radius: 12px; }
.sp-sonuc-ust:hover { background: var(--gtr-primary-faint); }
.sp-gorsel { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; object-fit: cover; background: var(--gtr-surface); }
.sp-sonuc-ad { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sp-sonuc-fiyat { flex: 0 0 auto; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.sp-varyantlar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.sp-varyant { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--gtr-line); background: var(--gtr-surface); font-size: 13px; }
.sp-varyant:disabled { opacity: .5; cursor: default; }

.sp-sepet { display: flex; flex-direction: column; gap: 6px; }
.sp-satir { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--gtr-bg); }
.sp-satir-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-satir-ad { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sp-satir-varyant { font-size: 12.5px; color: var(--gtr-ink-soft); }
.sp-satir-fiyat { font-size: 13px; }
.sp-adet { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.sp-adet-dugme { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--gtr-line); background: var(--gtr-surface); font-size: 18px; line-height: 1; }
.sp-adet-dugme:disabled { opacity: .4; cursor: default; }
.sp-adet-sayi { min-width: 24px; text-align: center; font-weight: 700; }
.sp-sil { flex: 0 0 auto; min-height: 36px; padding: 0 10px; border-radius: 10px; color: var(--gtr-uyari-ink); font-size: 13px; font-weight: 600; }
.sp-sil:hover { background: var(--gtr-uyari-zemin); }
/* Hediye satırı (6 Eki 2026): satır başına işaret, 0 TL + üstü çizili asıl fiyat, neden kutusu. */
.sp-hediye-anahtar { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--gtr-ink-soft); cursor: pointer; }
.sp-hediye-anahtar input { width: 20px; height: 20px; margin: 0; accent-color: var(--gtr-primary); }
.sp-satir.hediye { background: var(--gtr-primary-faint); }
.sp-satir.hediye .sp-hediye-anahtar { color: var(--gtr-primary-dark); }
.sp-eski-fiyat { margin-right: 6px; color: var(--gtr-ink-soft); font-weight: 400; }
.sp-hediye-fiyat { font-weight: 600; color: var(--gtr-primary-dark); }
.sp-hediye-neden[hidden] { display: none; }

.sp-kod-satir { display: flex; gap: 8px; }
.sp-kod-satir .sp-girdi { flex: 1; }
.sp-tutar-satir[hidden] { display: none; }
.sp-dugme { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--gtr-line); background: var(--gtr-bg); font-weight: 600; font-size: 14px; color: var(--gtr-primary-dark); }
.sp-dugme:hover { background: var(--gtr-primary-faint); }
/* Kapalı düğme müşteri kartının "Ara"sı gibi soluk ve tıklanmaz (2. tur O1). */
.sp-dugme:disabled { opacity: 0.45; cursor: default; }
.sp-dugme:disabled:hover { background: var(--gtr-bg); }
.sp-kodlar { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-kodlar:empty { display: none; }
.sp-kod { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); font-weight: 600; font-size: 13px; }
.sp-kod.gecersiz { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); text-decoration: line-through; }
.sp-kod-sil { width: 28px; height: 28px; border-radius: 999px; font-size: 16px; }

.sp-ozet { gap: 8px; }
.sp-ozet-satir { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sp-ozet-satir.indirim { color: var(--gtr-primary-dark); }
.sp-ozet-satir.toplam { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--gtr-line); font-weight: 800; font-size: 17px; font-family: Nunito, sans-serif; }
.sp-ozet-deger { white-space: nowrap; }
.sp-ozet-etiket { min-width: 0; overflow-wrap: anywhere; }
.sp-ozet-satir.hediye-baslik { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--gtr-line); font-weight: 700; }
.sp-ozet-satir.hediye { color: var(--gtr-primary-dark); }
.sp-uyari { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); font-weight: 500; }
.sp-ana-dugme { min-height: 48px; padding: 0 16px; border-radius: 12px; background: var(--gtr-primary); color: #fff; font-weight: 700; font-size: 15px; }
.sp-ana-dugme:hover:not(:disabled) { background: var(--gtr-primary-dark); }
.sp-ana-dugme:disabled { opacity: .45; cursor: default; }
.sp-basari { margin: 0; font-weight: 600; color: var(--gtr-primary-dark); }
.sp-baglanti { display: block; padding: 10px 12px; border-radius: 12px; background: var(--gtr-bg); font-size: 13px; color: var(--gtr-ink); overflow-wrap: anywhere; }
.sp-baglanti.eski { color: var(--gtr-ink-soft); opacity: .75; }
.sp-eylemler { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-eylemler > * { flex: 1 1 140px; }
/* Telefonla sipariş: ödeme seçimi + SMS'e kopyalanacak mesaj. */
.sp-odeme { display: flex; flex-direction: column; gap: 6px; }
.sp-kopya-metin { padding: 8px 10px; border-radius: 8px; background: var(--gtr-bg); white-space: pre-wrap; user-select: all; }

.sp-son-satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: #fff; }
.sp-son-bilgi { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-son-ad { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.sp-son-alt { font-size: 12.5px; color: var(--gtr-ink-soft); }
.sp-son-hediye { overflow-wrap: anywhere; }
.sp-rozet { flex: 0 0 auto; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sp-rozet.bekliyor { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.sp-rozet.odendi { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.sp-rozet.iptal { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }
.sp-son-kopyala { min-height: 36px; }

.kp-siparis-olustur { width: 100%; color: var(--gtr-primary-dark); }
/* Ürün öner (5 Eki 2026): Sipariş oluştur'un sp- kalıbı + WhatsApp balonu önizlemesi. */
.os-anahtar { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 14px; cursor: pointer; }
.os-anahtar input { width: 20px; height: 20px; accent-color: var(--gtr-primary); }
.os-tutar[hidden] { display: none; }
.os-balon { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--gtr-bg); }
.os-balon.eski { opacity: .6; }
.os-balon-baslik { margin: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.os-balon-metin { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.os-balon-dugme { padding: 10px; border-top: 1px solid var(--gtr-line); text-align: center; font-weight: 600; font-size: 14px; color: var(--gtr-primary-dark); }
/* Gönder alanı (alıcı numarası + neden + düğme) uzun önizlemede de görünür (denetim P7):
   telefonda alta yapışık çubuk (toplu gönderimin kalıbı), masaüstünde sağ sütunun dibinde. */
.os-gonder { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--gtr-surface); }
.os-gonder[hidden] { display: none; }
.os-alici { margin: 0; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.os-satis-disi { box-shadow: inset 0 0 0 2px var(--gtr-uyari-ink); }
.os-satis-disi-not { font-size: 12.5px; font-weight: 600; color: var(--gtr-uyari-ink); }
/* Gönder öncesi onay (telefonda hep, tekrar öneride her yerde): kısa özet + Evet / Vazgeç. */
.os-onay { display: flex; flex-direction: column; gap: 6px; }
.os-onay-satir { margin: 0; font-size: 14px; color: var(--gtr-ink); overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .sp-form { grid-template-columns: 1fr; }
}
/* Satırda adet + Hediye işareti + Sil yan yana: 560 px altında ürün adı kendi satırına iner (ad harf harf kırılmasın). */
@media (max-width: 560px) {
  .sp-satir { flex-wrap: wrap; }
  .sp-satir-bilgi { flex-basis: 100%; }
}

@media (min-width: 1024px) {
  .sp-govde { padding: 16px 24px; }
  .sp-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 16px; }
  .sp-sag { position: sticky; top: 0; }
  #siparisGeri { display: none; }
  /* Ürün öner: sağ sütun ekran boyunu aşmaz, kendi içinde kayar; gönder alanı dibine yapışık. */
  .os-sag { max-height: calc(100vh - 104px); overflow-y: auto; }
  .os-gonder { position: sticky; bottom: 0; box-shadow: 0 -2px 8px rgba(33, 38, 43, 0.06); }
}

@media (max-width: 1023px) {
  .os-gonder {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    max-height: 50vh;
    overflow-y: auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-radius: 0;
    background: #fff;
    border-top: 1px solid var(--gtr-line);
    box-shadow: 0 -2px 8px rgba(33, 38, 43, 0.06);
  }
  /* Yazı kutusuna yazılırken (klavye açık) çubuk kutuyu örtmesin (denetim Y6). */
  .os-izgara[data-yaziyor="1"] .os-gonder { display: none; }
  /* Çubuk açıkken formun sonu çubuğun altında kalmasın. */
  .os-izgara[data-gonder="1"] { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
  /* Parmakla basılan adet ve Sil/Çıkar düğmeleri 44 px (Ürün öner ve Sipariş oluştur). */
  .sp-izgara .sp-adet-dugme { width: 44px; height: 44px; }
  .sp-izgara .sp-sil { min-height: 44px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  body.ast-acik .os-gonder { right: 400px; }
}

/* ============ Kişi bul (2 Eki 2026) · kb- · `kisi-bul.js` ============
   Yeni renk yok: GTR değişkenleri (`:root`). Eskiden ayrı kisi-bul.css idi.
   Telefonda tam ekran, masaüstünde üstte ortalı kutu. */

.kb-zemin {
  position: fixed;
  inset: 0;
  bottom: var(--klavye-payi, 0px);
  z-index: 40;
  background: rgba(20, 35, 40, 0.4);
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.kb-zemin[hidden] { display: none !important; }

.kb-panel {
  width: 100%;
  height: 100%;
  background: var(--gtr-bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: env(safe-area-inset-top);
}

.kb-ust { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--gtr-line); }
.kb-kutu {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--gtr-surface);
  color: var(--gtr-ink-soft);
}
.kb-kutu:focus-within { box-shadow: 0 0 0 2px var(--gtr-primary); }
.kb-girdi { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: var(--gtr-ink); }
.kb-kapat { flex: 0 0 auto; min-height: 44px; padding: 0 10px; font-weight: 600; font-size: 14px; color: var(--gtr-primary-dark); }

.kb-ipucu, .kb-durum { padding: 10px 16px 0; font-size: 13px; color: var(--gtr-ink-soft); line-height: 1.4; }
.kb-durum:empty { display: none; }

.kb-liste {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
}

.kb-bos { padding: 24px 8px; text-align: center; display: grid; justify-items: center; gap: 12px; font-size: 15px; }

.kb-kart { border: 1px solid var(--gtr-line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; min-width: 0; }
.kb-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kb-kim { display: grid; min-width: 0; }
.kb-ad { font-family: Nunito, sans-serif; font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.kb-kadi { font-size: 12.5px; color: var(--gtr-ink-soft); }
.kb-telefon {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  padding: 4px 10px;
  min-height: 34px;
  border-radius: 10px;
  background: var(--gtr-primary-faint);
  color: var(--gtr-primary-dark);
  white-space: nowrap;
}
.kb-diger-tel { font-size: 12.5px; color: var(--gtr-ink-soft); margin-top: -6px; }
.kb-numara-gizli { color: var(--gtr-uyari-ink); font-weight: 600; }

.kb-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-cip { font-size: 12.5px; line-height: 1.3; padding: 4px 9px; border-radius: 999px; background: var(--gtr-surface); color: var(--gtr-ink); overflow-wrap: anywhere; }
.kb-cip-hedef { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }
.kb-cip-siparis { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.kb-cip.uyari { background: var(--gtr-uyari-zemin); color: var(--gtr-uyari-ink); }

.kb-aramalar h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--gtr-ink-soft); margin-bottom: 6px; }
.kb-aramalar ul { list-style: none; display: grid; gap: 6px; }
.kb-aramalar li { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.4; }
.kb-arama-not { color: var(--gtr-ink-soft); font-size: 13px; overflow-wrap: anywhere; white-space: pre-line; }
.kb-yok { font-size: 13px; color: var(--gtr-ink-soft); }

.kb-eylemler { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-dugme {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--gtr-line);
  background: var(--gtr-bg);
  font-weight: 600;
  font-size: 14px;
}
.kb-dugme:hover { border-color: var(--gtr-primary); }
.kb-dugme.kb-birincil { background: var(--gtr-primary); border-color: var(--gtr-primary); color: #fff; }
.kb-dugme.kb-birincil:hover { background: var(--gtr-primary-dark); }
.kb-bos .kb-dugme { flex: 0 0 auto; }
/* Kapalı düğme (WhatsApp'tan yaz: hatalı numara, mağazada yol yok) kartın
   "Ara"sı gibi soluk ve tıklanmaz görünür (2. tur O1). */
.kb-dugme:disabled { opacity: 0.45; cursor: default; }
.kb-dugme:disabled:hover { border-color: var(--gtr-line); }
/* Yeni arama sürerken eski sonuçlar (2. tur K2): düğmeler ayrıca kapalı. */
.kb-liste.kb-eski { opacity: 0.5; }

/* Sol menünün üstündeki açma kutusu (yalnız 1024+; menü orada görünüyor). */
.kb-menu-ac {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 10px 0;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--gtr-surface);
  color: var(--gtr-ink-soft);
  font-size: 14px;
  text-align: left;
}
.kb-menu-ac:hover { color: var(--gtr-ink); }
.kb-menu-ac .ikon { width: 18px; height: 18px; }
.kb-menu-metin { flex: 1; }
.kb-kisayol { font: inherit; font-size: 11.5px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--gtr-line); background: var(--gtr-bg); }

@media (min-width: 1024px) {
  /* Menü sütunu görünürken başlıklardaki kişi düğmesi aynı işi iki kez yapmasın. */
  .kb-ust-dugme { display: none; }
}

@media (min-width: 720px) {
  .kb-zemin { align-items: flex-start; padding: 8vh 16px 16px; }
  .kb-panel {
    width: 640px;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(20, 35, 40, 0.22);
    overflow: hidden;
    padding-top: 0;
  }
  .kb-liste { padding-bottom: 16px; }
}

/* ============ Arama: ortak şerit + Asistan açıkken web telefonu (2 Eki 2026) ============
   Şerit: süren ya da sonucu girilmemiş arama açık ekranda görünmüyorsa altta
   sabit durur (uygulama.js `aramaSeridiniCiz`). Asistan çekmecesinin (z 22)
   üstünde: Aramayı bitir her an görünür. */
.arama-serit { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25; width: min(420px, calc(100vw - 24px)); box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--gtr-bg); border: 1px solid var(--gtr-line); box-shadow: 0 10px 30px rgba(20, 35, 40, 0.18); }
.arama-serit[hidden] { display: none !important; }
.arama-serit:focus { outline: 2px solid var(--gtr-primary); outline-offset: 2px; }
.arama-serit-eylem { display: flex; flex-wrap: wrap; gap: 8px; }
/* Başka mağazanın araması: gelen arama penceresindeki etiket (gelen-pencere.css · .gp-magaza). */
.arama-serit .gp-magaza { margin: 0 6px 0 0; vertical-align: 1px; }
.arm-biten-not { display: flex; flex-direction: column; gap: 8px; }
/* Sütun yönlü kapta `flex: 1 1 140px` yüksekliğe uygulanıp düğmeyi 140 px'lik dikey kutu yapıyordu. */
.arm-biten-not .arm-sonuc { align-self: flex-start; flex: 0 0 auto; padding: 0 20px; }
/* Telefonda Asistan tam ekran: şerit altta kalır (üste çıkınca panelin kapatma
   düğmesini ve arama kutusunu örtüyordu, deneme yürüyüşü 3 Eki); panelin
   içeriği şeridin yüksekliği kadar aşağı kaydırılabilir. */
@media (max-width: 899px) {
  /* Pay şeridin ÖLÇÜLEN boyundan (`uygulama.js · aramaSeridiPayiniYaz`, denetim Ö1). */
  body.ast-acik:has(.arama-serit:not([hidden])) .ast-govde { padding-bottom: calc(var(--arama-serit-pay, 260px) + env(safe-area-inset-bottom)); }
  /* Konuşma ekranında "Mesaj yaz" ve Gönder şeridin altında kalmasın. */
  body:has(.arama-serit:not([hidden])) .yazma,
  body.klavye-acik:has(.arama-serit:not([hidden])) .yazma { padding-bottom: calc(var(--arama-serit-pay, 0px) + env(safe-area-inset-bottom)); }
  /* Klavye açıkken şerit ekranın dibine sabit kalıp yazma kutusunu örtüyordu
     (denetim 3 Ö-3-1): başka yere yazılırken gizlenir, şeride yazılırken kalır. */
  body.klavye-acik:not(:has(.arama-serit:focus-within)) .arama-serit { display: none; }
}
/* Asistan açıkken masaüstü yerleşimi asistan kurallarında tek yerde (stil.css asistan bölümü). */

/* ============ Müşteri kartı (8 Eki 2026) · mk- ============
   Telefonda tek sütun: kimlik, açık işler, eylemler, not yaz, siparişler,
   notlar, öneriler, bağlantılar, aramalar (sol/sağ kutular `display: contents`,
   sıra `order` ile). 1024+ iki sütun: solda 380 piksel kimlik + not, sağda
   siparişler ve geçmiş. Yeni renk yok: arm-bolum / kp- / sp- ailesi. */
.mk-izgara { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk-sol, .mk-sag { display: contents; }
.mk-kimlik { order: 1; }
/* Numarası gizli kişi (21 Eki 2026): uyarı + aynı adlı kayıtla birleştir önerisi, kimliğin hemen altında. */
.mk-birlesme { order: 1; gap: 8px; }
.mk-isler { order: 2; }
.mk-eylemler { order: 3; }
.mk-yazisma-yok { order: 3; margin-top: -4px; }
/* "Ara" (21 Eki 2026): Aranacaklar'ı açar ya da kayıtsız kişiyi doğrudan arar (23 Eki); sönükse nedeni, gerekirse "Telefonu yeniden bağla" altında. */
.mk-ara-not-kutu { order: 3; margin-top: -4px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mk-ara-not-kutu:empty { display: none; }
.mk-ara-not { margin: 0; }
.mk-ara:disabled { opacity: 0.45; cursor: default; }
.mk-ara:disabled:hover { background: var(--gtr-bg); }
.mk-not-yaz { order: 4; }
.mk-siparisler { order: 5; }
.mk-notlar { order: 6; }
.mk-oneriler { order: 7; }
.mk-baglantilar { order: 8; }
.mk-aramalar { order: 9; }
.mk-otomatik { order: 10; }
.mk-sepet { order: 11; }

.mk-kimlik { align-items: flex-start; gap: 4px; }
.mk-ad { font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.mk-alt { font-size: 13px; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.mk-telefon { align-self: flex-start; padding: 0; }
.mk-bilgi { font-size: 13px; line-height: 1.45; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.mk-bilgi[data-rol="izin"] { color: var(--gtr-ink); }
.mk-numara-gizli { color: var(--gtr-uyari-ink); font-weight: 600; }
.mk-birlesme-baslik { margin: 0; font-size: 13.5px; font-weight: 600; }
.mk-birlesme-aday { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 8px; border-top: 1px solid var(--gtr-line); }
.mk-birlesme-kim { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.mk-birlesme-aday > .sp-dugme { flex: 0 0 auto; min-height: 44px; }
.mk-birlesme-kim > .mk-yalniz-ad { color: var(--gtr-uyari-ink); font-weight: 600; }
.mk-birlesme-kim > .mk-eslesme { color: var(--gtr-primary-dark); font-weight: 600; }
.mk-onay { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--gtr-uyari-zemin); }
.mk-onay-metin { margin: 0; font-size: 13px; line-height: 1.45; color: var(--gtr-ink); }
.mk-onay-alt { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.mk-onay-alt > * { min-height: 44px; }
.mk-eylemler > * { flex: 1 1 120px; white-space: nowrap; }

.mk-not-kutu { min-height: 96px; }
.mk-not-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mk-not-durum { flex: 1 1 160px; min-width: 0; font-size: 12.5px; color: var(--gtr-ink-soft); }
.mk-not-durum.hata { color: var(--gtr-uyari-ink); font-weight: 600; }
.mk-not-kaydet { flex: 0 0 auto; min-height: 44px; }

.mk-not { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--gtr-surface); }
.mk-not-ust { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--gtr-ink-soft); }
.mk-etiket { padding: 2px 8px; border-radius: 999px; background: var(--gtr-bg); font-weight: 600; color: var(--gtr-primary-dark); }
.mk-not-konusma .mk-etiket { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.mk-not-zaman { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.mk-not-sil { min-height: 36px; padding: 0 10px; margin-left: auto; border-radius: 10px; color: var(--gtr-uyari-ink); font-size: 13px; font-weight: 600; }
.mk-not-sil:hover { background: var(--gtr-uyari-zemin); }
/* Düzenle (21 Eki 2026): Sil'in solunda, aynı boy; yerinde açılan kutunun altında Vazgeç / Kaydet. */
.mk-not-duzenle { min-height: 36px; padding: 0 10px; margin-left: auto; border-radius: 10px; color: var(--gtr-primary-dark); font-size: 13px; font-weight: 600; }
.mk-not-duzenle:hover { background: var(--gtr-bg); }
.mk-not-duzenle + .mk-not-sil { margin-left: 0; }
/* Sil'e ilk basış (21 Eki 2026): "Vazgeç" + dolu "Evet, sil"; ikinci basış siler. */
.mk-not-sil-onay { background: var(--gtr-uyari-zemin); }
.mk-not-vazgec { flex: 0 0 auto; min-height: 44px; }
.mk-duzenle-kutu { width: 100%; }
.mk-not-metin { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.mk-ozet { font-weight: 600; }
.mk-siparis { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 0; border-top: 1px solid var(--gtr-line); }
.mk-siparis-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mk-siparis-baslik { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.mk-durum-etiket { flex: 0 1 auto; margin-left: auto; font-size: 12.5px; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.mk-siparis.iptal .mk-siparis-baslik { color: var(--gtr-ink-soft); font-weight: 400; text-decoration: line-through; }
.mk-siparis.bekliyor .mk-durum-etiket { color: var(--gtr-accent-deep); }
.mk-siparis.kismi-iade .mk-durum-etiket, .mk-siparis.iptal .mk-durum-etiket { color: var(--gtr-uyari-ink); }
.mk-siparis.basari .mk-durum-etiket, .mk-oneri.basari .mk-durum-etiket { color: var(--gtr-primary-dark); font-weight: 600; }
.mk-oneri.hata .mk-durum-etiket { color: var(--gtr-uyari-ink); }
.mk-kalemler { list-style: none; display: grid; gap: 2px; padding-left: 10px; font-size: 13px; line-height: 1.4; color: var(--gtr-ink); overflow-wrap: anywhere; }
.mk-kalem-ozet { padding-left: 10px; font-size: 13px; color: var(--gtr-ink-soft); overflow-wrap: anywhere; }
.mk-kim { color: var(--gtr-ink-soft); }
.mk-oneri { padding: 8px 0 0; border-top: 1px solid var(--gtr-line); }
.mk-oneri-ozet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 36px; font-size: 13.5px; cursor: pointer; list-style: none; }
.mk-oneri-ozet::-webkit-details-marker { display: none; }
.mk-oneri-ozet::before { content: "›"; color: var(--gtr-ink-soft); transition: transform .15s; }
.mk-oneri[open] > .mk-oneri-ozet::before { transform: rotate(90deg); }
.mk-oneri .mk-kalemler { padding: 2px 0 6px 16px; }
.mk-durum { align-items: flex-start; }

@media (min-width: 1024px) {
  .mk-izgara { display: grid; grid-template-columns: 400px minmax(0, 1fr); align-items: start; gap: 16px; }
  .mk-sol, .mk-sag { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  /* Üç düğme tek satır (denetim 8 Eki K-7): yazı genişliği kadar, kalan yer paylaşılır. */
  .mk-eylemler > * { flex: 1 1 auto; padding: 0 12px; white-space: nowrap; }
}

/* Kişi paneli (konuşma ekranı) · son notlar: müşteri kartının not satırlarıyla aynı görünüm. */
.kk-notlar { display: flex; flex-direction: column; gap: 6px; }
.kk-not-hepsi { align-self: flex-start; min-height: 36px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--gtr-primary-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------- emoji seçici (14 Eki) */
/* Düğme sessiz: gönderme birincil, emoji ikincil (ataçla aynı aile). */
.emoji-dugme {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--gtr-ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.emoji-dugme svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emoji-dugme:hover:not(:disabled),
.emoji-dugme[aria-expanded="true"] { color: var(--gtr-primary-dark); background: var(--gtr-primary-faint); }
.emoji-dugme:disabled { opacity: 0.45; cursor: default; }

.emoji-panel {
  position: fixed;
  z-index: 60;
  width: 340px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--gtr-bg);
  border: 1px solid var(--gtr-line);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(20, 35, 40, 0.18);
  overflow: hidden;
}
.emoji-sekmeler {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--gtr-line);
  overflow-x: auto;
}
.emoji-sekme {
  flex: 1 0 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
}
.emoji-sekme[aria-selected="true"] { opacity: 1; background: var(--gtr-primary-faint); }
.emoji-izgara {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  padding: 6px;
}
.emoji-oge {
  height: 40px;
  border-radius: 10px;
  font-size: 24px;
  line-height: 1;
  background: transparent;
  cursor: pointer;
}
.emoji-oge:hover, .emoji-oge:focus-visible { background: var(--gtr-surface); }
.emoji-oge:active { background: var(--gtr-primary-faint); }
.emoji-bos { grid-column: 1 / -1; padding: 24px 12px; text-align: center; font-size: 14px; color: var(--gtr-ink-soft); }

/* ---------- Yorum: "Cevap öner" (cevap-oner.js, 14 Eki) ----------
   Öneri yalnız kutuya düşer; Gönder'den ayırt edilsin diye çerçeveli,
   birincil renkte değil. */
.yrm-oner-kap { display: inline-flex; }
.yrm-oner, .yrm-oner-ac { border: 1px solid var(--gtr-primary); color: var(--gtr-primary-dark); background: transparent; }
.yrm-oner:disabled { opacity: 0.55; cursor: progress; }
/* Öneri hazırlanırken kutu boş görünmez: içinde "Cevap hazırlanıyor…" ve ışıltı (21 Eki). */
.yrm-girdi.hazirlaniyor {
  cursor: progress;
  color: var(--gtr-ink-soft);
  background: linear-gradient(100deg, var(--gtr-bg) 30%, var(--gtr-primary-faint) 50%, var(--gtr-bg) 70%);
  background-size: 220% 100%;
  animation: yrm-isilti 1.5s linear infinite;
}
.yrm-girdi.hazirlaniyor::placeholder { color: var(--gtr-primary-dark); font-weight: 600; opacity: 1; }
@keyframes yrm-isilti { from { background-position: 110% 0; } to { background-position: -110% 0; } }
/* Kutunun hemen altındaki kalıcı satır: hazırlanıyor / hazır / sebep. */
.yrm-oneri-durum { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--gtr-ink-soft); }
.yrm-oneri-durum.hazirlaniyor span { animation: kp-nabiz 1.4s ease-in-out infinite; }
.yrm-oneri-durum.olumlu { color: var(--gtr-primary-dark); }
.yrm-oneri-durum.uyari { color: var(--gtr-uyari-ink); }
.yrm-oneri-baglanti { min-height: 36px; padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--gtr-primary-dark); text-decoration: underline; text-underline-offset: 2px; background: transparent; }
.yrm-form-bilgi { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--gtr-accent-deep); }
@media (prefers-reduced-motion: reduce) {
  .yrm-girdi.hazirlaniyor { animation: none; background: var(--gtr-primary-faint); }
  .yrm-oneri-durum.hazirlaniyor span { animation: none; }
}
/* Gönderimin kalıcı sonucu (uyarı şeridi kayboluyor). */
.yrm-sonuc { margin: 0; font-size: 12.5px; line-height: 1.35; }
.yrm-sonuc.olumlu { color: var(--gtr-primary-dark); font-weight: 600; }
/* Onay yaprağı: "Düzenle" kutuya geri götürür, metin korunur. */
.yrm-duzenle { background: transparent; color: var(--gtr-primary-dark); border: 1px solid var(--gtr-primary); }
.yrm-duzenle:active { background: var(--gtr-primary-faint); }
/* Yorumlar yüklenirken boş alan yerine iskelet. */
.yrm-iskelet { display: flex; flex-direction: column; gap: 10px; }
.yrm-iskelet-yazi { font-size: 12.5px; color: var(--gtr-ink-soft); text-align: center; padding-top: 6px; }
.yrm-iskelet-kart { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border: 1px solid var(--gtr-line); border-radius: 16px; background: var(--gtr-bg); }
.yrm-iskelet-cubuk { display: block; height: 12px; border-radius: 999px; background: var(--gtr-surface); animation: kp-nabiz 1.4s ease-in-out infinite; }
.yrm-iskelet-cubuk.kisa { width: 58%; }
@media (prefers-reduced-motion: reduce) { .yrm-iskelet-cubuk { animation: none; } }
@media (max-width: 480px) {
  .yrm-eylemler .yrm-oner-ac { flex: 1 1 100%; }
}

/* ---------- Yorumdan özel mesaj (yorum-dm.js, 18 Eki 2026) ----------
   Otomasyon ve toplu gönderim sınıflarını kullanır; burada yalnız ekrana
   özgü ızgaralar. Önce 390 px, masaüstünde kartlar yan yana. */
.ydm-govde { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.ydm-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ydm-aciklama { flex: 1 1 260px; margin: 0; }
.ydm-yeni { flex: 0 0 auto; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--gtr-primary); color: var(--gtr-bg); font-weight: 600; font-size: 14px; }
.ydm-yeni:active { background: var(--gtr-primary-dark); }
.ydm-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ydm-kart .yrm-gonderi-resim.bos { border: 1px dashed var(--gtr-line); background: transparent; }
.ydm-kelimeler { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ydm-kelime { padding: 3px 10px; border-radius: 999px; background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.ydm-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-variant-numeric: tabular-nums; }
.ydm-sayi { display: grid; gap: 2px; padding: 8px 6px; border-radius: 12px; background: var(--gtr-surface); text-align: center; }
.ydm-sayi b { font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; color: var(--gtr-ink); }
.ydm-sayi span { font-size: 10.5px; line-height: 1.25; color: var(--gtr-ink-soft); }
.ydm-sayi.olumlu b { color: var(--gtr-primary-dark); }
.ydm-sayi.hata { background: var(--gtr-uyari-zemin); }
.ydm-sayi.hata b, .ydm-sayi.hata span { color: var(--gtr-uyari-ink); }
.ydm-dugmeler .oto-is-dugme:disabled { opacity: 0.5; cursor: default; }
.ydm-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ydm-paylasim { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 6px; border: 1px solid var(--gtr-line); border-radius: 14px; background: var(--gtr-bg); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ydm-paylasim:hover:not(:disabled) { border-color: var(--gtr-primary); }
.ydm-paylasim:disabled { cursor: default; background: var(--gtr-surface); }
.ydm-paylasim:disabled .ydm-paylasim-resim { opacity: 0.55; }
.ydm-paylasim-resim { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--gtr-line); }
.ydm-paylasim-resim img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ydm-paylasim-resim.bos { background: transparent; border: 1px dashed var(--gtr-line); }
.ydm-paylasim-yazi { display: grid; gap: 2px; padding: 0 2px 2px; }
.ydm-paylasim-metin { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ydm-paylasim-rozet { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 999px; background: var(--gtr-primary-dark); color: var(--gtr-bg); font-size: 11px; font-weight: 600; }
.ydm-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.ydm-metin { min-height: 150px; resize: vertical; line-height: 1.45; }
.ydm-onizleme { min-height: 60px; }
.ydm-sayac { margin: 0; font-size: 12px; color: var(--gtr-ink-soft); font-variant-numeric: tabular-nums; }
.ydm-sayac.asti { color: var(--gtr-uyari-ink); font-weight: 600; }
.ydm-form .genis-dugme:disabled { opacity: 0.6; cursor: progress; }

@media (min-width: 900px) {
  .sahne > #ekranYorumDm { flex: 1; min-width: 0; }
}
@media (min-width: 1024px) {
  #yorumDmGeri { display: none; }
  .ydm-govde { padding: 16px 24px; }
  .ydm-liste { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); align-items: start; }
  .ydm-form { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); }
  .ydm-form-sag { position: sticky; top: 0; }
}


/* ======================= Mağaza seçici (Güvenli Pati 1. adım, 20 Eki 2026) =======================
   İki parçalı seçici: "Güvenli Adımlar" | "Güvenli Pati". Dar ekranda liste
   başlığının altında kendi satırı (menü düğmesiyle aynı satırda DEĞİL, 390'da
   çakışma yok); 1024 ve üstünde menünün en üstünde. Önek `magaza-`. */
.magaza-serit {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gtr-line);
}
.magaza-secici {
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border-radius: 999px;
  background: var(--gtr-surface);
}
.magaza-parca {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gtr-ink-soft);
  white-space: nowrap;
}
/* Dokunma alanı 44 (pillerle aynı kalıp): görünmez katman üst/alt 4px taşar. */
.magaza-parca::before { content: ""; position: absolute; inset: -4px 0; }
.magaza-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.magaza-kisa { display: none; }
.magaza-parca[aria-pressed="true"] { background: var(--gtr-bg); color: var(--gtr-primary-dark); box-shadow: 0 1px 2px rgba(33, 38, 43, 0.12); }
body[data-magaza="pati"] .magaza-parca[aria-pressed="true"] { background: var(--pati); color: var(--pati-ink); box-shadow: none; }
.magaza-parca:focus-visible { outline: 2px solid var(--gtr-primary-dark); outline-offset: 2px; }
body[data-magaza="pati"] .magaza-parca:focus-visible { outline-color: var(--pati-ink); }
body[data-magaza="azra"] .magaza-parca[aria-pressed="true"] { background: var(--azra); color: var(--azra-ink); box-shadow: none; }
body[data-magaza="azra"] .magaza-parca:focus-visible { outline-color: var(--azra-ink-dark); }
/* Azra seçiliyken seçicinin kabı krem: hangi markada olduğun şeritten de belli. */
body[data-magaza="azra"] .magaza-serit { background: var(--azra-faint); }
body[data-magaza="azra"] .magaza-secici { background: #ebe2d6; }
/* Mağazada olmayan sabit düğme (Azra'da Asistan): `uygulama.js · magazaGizlileriniUygula`. */
.magaza-gizli { display: none !important; }
/* Öbür mağazada cevap bekleyen sayısı (`magazaSeciciModeli`). */
.magaza-say {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gtr-accent);
  color: var(--gtr-ink);
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

/* Pati seçiliyken her ekranın tepesinde bakır şerit: hangi mağazada olduğun
   hangi ekrana geçersen geç görünür. GA'da hiç çizilmez. */
body[data-magaza="pati"]::before,
body[data-magaza="azra"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--pati);
  z-index: 1000;
  pointer-events: none;
}
body[data-magaza="azra"]::before { background: var(--azra); }

/* Pati'de karşılığı olmayan ekran: gövde gizlenir, başlığın altında tek
   cümlelik boş durum (`uygulama.js · magazaBosDurumunuGoster`). */
.ekran.magaza-bos-modu > :not(header):not(.magaza-bos) { display: none !important; }
/* Web telefonu TEK ve her mağazada (22 Eki 13:39): Aranacaklar boş durumdayken
   de telefon sütunu görünür, "Telefona git" mağazayı değiştirmez. Listeyle
   kart gizli kalır; sütun yalnız telefon varken çizilir (`aranacaklar.js`). */
#ekranAranacaklar.magaza-bos-modu > #aranacaklarGovde { display: block !important; }
#ekranAranacaklar.magaza-bos-modu #aranacaklarGovde > :not(.arm-alt),
#ekranAranacaklar.magaza-bos-modu .arm-alt > :not(.arm-telefon) { display: none !important; }
#ekranAranacaklar.magaza-bos-modu .arm-alt { display: block !important; max-width: 336px; margin: 0 auto; }
/* Bilgisayar penceresinde (700+) telefon sütunu GA'daki gibi SAĞDA, boş durum
   kutusu solda (deneme turu 23 Eki K-1): alt alta dizilince 700'lük web telefonu
   kutunun altına düşüyor, ekranın dışına taşıyordu ("Telefona git"le gelinen
   Azra ekranında gelen arama açılamıyordu). Sütun kendi içinde kayar, pencere
   kısaysa da telefonun tamamına inilebilir. 700 altında tek sütun kalır. */
@media (min-width: 700px) {
  #ekranAranacaklar.magaza-bos-modu { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
  #ekranAranacaklar.magaza-bos-modu > header { grid-column: 1 / -1; grid-row: 1; }
  #ekranAranacaklar.magaza-bos-modu > .magaza-bos { grid-column: 1; grid-row: 2; min-height: 0; }
  #ekranAranacaklar.magaza-bos-modu > #aranacaklarGovde { grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto; }
}
.magaza-bos .daire { background: var(--pati-faint); color: var(--pati-ink); }
body[data-magaza="azra"] .magaza-bos .daire { background: var(--azra-faint); color: var(--azra-ink-dark); }
.magaza-bos p { max-width: 360px; }
.magaza-bos-dugme {
  margin-top: 4px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--gtr-primary);
  border-radius: 999px;
  color: var(--gtr-primary-dark);
  font-weight: 700;
  font-size: 14px;
}
.magaza-bos-dugme:focus-visible { outline: 2px solid var(--gtr-primary-dark); outline-offset: 2px; }
.magaza-bos-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* GA'ya geçiş ikincil: çerçevesiz, sönük yazı (Pati'de asıl yol gelen kutusu). */
.magaza-bos-dugme.ikincil { border-color: transparent; color: var(--gtr-ink-soft); font-weight: 600; }

/* Üç parça dar ekranda (P20: 360 px) sığsın diye: parçalar içerik kadar
   genişler, Azra'nın uzun adı yerine kısa adı yazar ("Azra"). GA ve Pati
   tam adla kalır. */
@media (max-width: 1023px) {
  .magaza-serit .magaza-parca { flex: 1 1 auto; padding: 0 8px; }
  .magaza-serit .magaza-parca[data-magaza="azra"] { flex: 0 1 auto; }
  .magaza-serit .magaza-parca[data-magaza="azra"] .magaza-ad { display: none; }
  .magaza-serit .magaza-parca[data-magaza="azra"] .magaza-kisa { display: inline; }
}

@media (min-width: 1024px) {
  /* Menü sütunu dar: "Azra Design & Events" kesilmesin, iki satıra insin. */
  .am-magaza .magaza-parca[data-magaza="azra"] { white-space: normal; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; text-align: center; }
  .am-magaza .magaza-parca[data-magaza="azra"] .magaza-ad { white-space: normal; }
  /* Menü sütunu seçiciyi taşıyor: liste satırı tekrarlamaz. */
  .magaza-serit { display: none; }
  /* Menü sütunu dar (≈170 px): yan yana iki ad "Güvenli Ad…" diye kesiliyordu
     (Chrome yürüyüşü 20 Eki). Alt alta, ikisi de tam adla. */
  .am-magaza { flex: 0 0 auto; flex-direction: column; margin: 10px 10px 0; border-radius: 14px; }
  .am-magaza .magaza-parca { border-radius: 11px; }
  /* Asistan açıkken menü 60 px ikon şeridine iniyor: parçalar alt alta, kısa ad. */
  body.ast-acik .am-magaza { flex-direction: column; margin: 8px 4px 0; border-radius: 12px; }
  body.ast-acik .am-magaza .magaza-parca { padding: 0 4px; border-radius: 10px; font-size: 11px; }
  body.ast-acik .am-magaza .magaza-ad { display: none; }
  body.ast-acik .am-magaza .magaza-kisa { display: inline; }
  body.ast-acik .am-magaza .magaza-say { position: absolute; top: -4px; right: -2px; }
}