/* 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;
  --ust-h: 56px;
}

* { 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; }

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 44 (pillerle aynı kalıp). */
.gk-kanallar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 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: -4px -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); }

/* ------------------------------------------------------------ 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); }

/* ------------------------------------------------------------ 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; }


.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 .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; }
/* 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;
}
#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; }

/* 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 > #ekranSiparis { 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 ham ad (`yeni_whatsapp_sablonu_23_12_2025…`)
     sütunu panelden geniş yapıyordu. Kategori rozeti sağdan kırpılıyor ve
     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-ust { display: flex; align-items: center; gap: 8px; }
.sablon-satir-ad { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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); }

/* Gönderilemeyen şablon: satır tıklanmıyor ama GİZLENMİYOR. Kullanıcı Meta'da
   var olduğunu bildiği şablonu listede bulabilmeli, sebebini de okumalı. */
.sablon-satir:disabled { cursor: default; opacity: 0.72; background: var(--gtr-surface); }
.sablon-satir:disabled:hover { background: var(--gtr-surface); border-color: var(--gtr-line); }
.sablon-satir-engel { font-size: 11.5px; line-height: 1.4; color: var(--gtr-uyari-ink); }

/* Kategori rozeti bilgi taşıyor: pazarlama şablonu mesaj başına ücretli,
   fayda şablonu pencere içinde ücretsiz. Renk bu ayrımı söylüyor. */
.sablon-rozet { flex: 0 0 auto; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; background: var(--gtr-surface); color: var(--gtr-ink-soft); white-space: nowrap; }
.sablon-rozet.pazarlama { background: var(--gtr-accent-faint); color: var(--gtr-accent-deep); }
.sablon-rozet.fayda { background: var(--gtr-primary-faint); color: var(--gtr-primary-dark); }

/* 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. Başlıkta okunur hali var;
   bu satır kullanıcının Meta panelinde aynı şablonu bulması için duruyor. */
.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-satir .sablon-ham { margin-top: 1px; }
.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; }
.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; }

/* 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); }
}


/* 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; }
.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); }
/* 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); }
.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; }
.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); }
.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); }
.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-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-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; }
.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); }

/* ---- 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; }

/* 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; }
.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; }

/* Dar BİLGİSAYAR penceresi (daraltılmış / yakınlaştırılmış): arama yolu cihaza
   bağlı, pencereye değil. Web telefonu sağda 320'lik sütun olarak kalır; tam
   ekran kişi kartı onu örtmez. Telefonda (`arama-cihazi` yok) hiçbiri geçerli değil. */
@media (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]) { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 8px; }
  body.arama-cihazi .arm-telefon-cerceve { display: block; width: 320px; height: 700px; max-height: calc(100vh - 80px); border: 0; border-radius: 14px; background: #fff; }
  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 (en az 440) · telefon 320. Telefon sütunu yoksa
     (santral kapalı / dahili yok) kart onun yerini de alır. */
  .arm-alt { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(440px, 1fr) 320px; gap: 16px; align-items: stretch; }
  .arm-alt.telefonsuz { grid-template-columns: 340px minmax(440px, 1fr); }
  .arm-sol, .arm-orta, .arm-telefon { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .arm-sol { padding-right: 4px; }
  /* 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; }
}


/* ============ 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); }

/* ---- 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-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); }
.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); }
.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 { display: none; }
}

/* 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 çekmece (kişi panelinin üstünde, arka zemin yok: yazma
   kutusu açık kalır), 899 altında tam ekran.
   Yeni renk yok: GTR teal + sarı + yüzey griler. */
.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; 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: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; }
/* 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); }
.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); }

.sp-kod-satir { display: flex; gap: 8px; }
.sp-kod-satir .sp-girdi { flex: 1; }
.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); }
.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-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; }

.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-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); }

@media (max-width: 420px) {
  .sp-form { grid-template-columns: 1fr; }
  .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; }
}

/* ============ 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-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; }

/* 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; }
.arm-biten-not { display: flex; flex-direction: column; gap: 8px; }
.arm-biten-not .arm-sonuc { align-self: flex-start; }
/* Telefonda Asistan tam ekran: şerit üste çıkar, yazma kutusunu örtmez. */
@media (max-width: 899px) {
  body.ast-acik .arama-serit { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
}
/* Asistan açıkken masaüstü yerleşimi asistan kurallarında tek yerde (stil.css asistan bölümü). */