/* ══════════════════════════════════════════════════════════════════
   DEMO TALEP MODALI (D224)
   Ölçüler temanın kendi contact bloğundan alındı (.orbia-contact_three):
   padding 50px 60px · radius 30px · form_control radius 50px.
   style.css'e DOKUNULMADI — tema güncellenirse bu dosya ayrı kalır.
   ══════════════════════════════════════════════════════════════════ */

.demo-modal .modal-dialog { max-width: 540px; }

.demo-modal .modal-content {
  background: transparent;
  border: none;
}

.demo-modal .contact-wrapper {
  position: relative;
  background-color: var(--white-color);
  padding: 50px 60px;
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(1, 15, 52, .25);
}

@media (max-width: 767.98px) {
  .demo-modal .contact-wrapper { padding: 45px 25px; }
}

.demo-modal .contact-wrapper .title {
  margin-bottom: 8px;
  color: var(--heading-color);
}

.demo-modal .demo-alt {
  margin-bottom: 28px;
  color: var(--text-color);
  font-size: 15px;
}

.demo-modal .form_control {
  width: 100%;
  padding: 14px 25px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  margin-bottom: 18px;
  font-family: var(--body-font);
}

.demo-modal .form_control:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Sunucu "bu alan hatalı" derse alanın kendisi işaretlenir */
.demo-modal .form_control.hatali {
  border-color: var(--primary-color);
  background-color: rgba(213, 49, 61, .04);
}

.demo-modal .theme-btn { width: 100%; justify-content: center; }
.demo-modal .theme-btn[disabled] { opacity: .6; pointer-events: none; }

/* Kapatma düğmesi */
.demo-modal .demo-kapat {
  position: absolute;
  top: 18px; right: 22px;
  width: 34px; height: 34px;
  border: none; background: transparent;
  font-size: 30px; line-height: 1;
  color: var(--text-color); cursor: pointer;
  transition: color .2s;
}
.demo-modal .demo-kapat:hover { color: var(--primary-color); }

/* Durum satırı — boşken yer kaplamaz, sayfa zıplamaz */
.demo-modal .demo-durum {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.demo-modal .demo-durum:empty { display: none; }
.demo-modal .demo-durum { margin-top: 4px; }
.demo-modal .demo-durum.hata    { color: var(--primary-color); }
.demo-modal .demo-durum.basarili { color: #1a7f5a; }

/* Bal küpü: ekranda yok, ekran okuyucuda da yok — ama bot doldurabilir.
   `display:none` YERİNE konum kaydırma: bazı botlar display:none alanları atlar. */
.demo-tuzak {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
/* ══════════════════════════════════════════════════════════════════
   WHATSAPP BOT DEMOSU (D228)

   Bölüm iskeleti temanın `orbia-about_two` bloğundan alındı. Sohbet
   penceresinin kendisi temada yok — bu yüzden burada kuruldu, ama
   RENKLER TEMA DEĞİŞKENLERİNDEN gelir (--secondary-color, --primary-color,
   --heading-color, --body-font). style.css'e dokunulmadı.
   ══════════════════════════════════════════════════════════════════ */

/* 🔴 `.orbia-about_two` temada `padding-top: 535px` taşır — index-2'de hero'nun
   altına binmek için. Burada hero yok, o boşluk devasa bir beyaz alan
   bırakıyordu (ölçüldü: 535px). Özgüllükle eziliyor, style.css'e dokunulmadı. */
.orbia-wa-sec.orbia-about_two { padding-top: 70px; background: var(--gray-color); }
@media screen and (max-width: 1199.98px) {
  .orbia-wa-sec.orbia-about_two { padding-top: 60px; }
}

.wa-pencere {
  width: 100%;
  max-width: 520px;      /* sol kolonu kaplar; kolon 500px */
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--white-color);
  box-shadow: 0 24px 60px rgba(1, 15, 52, .16);
  font-family: var(--body-font);
}

/* Üst şerit — temanın gradyanı (style.css'teki 266deg deseni) */
.wa-ust {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(266deg, #F63 -1.18%, #6D2CF9 96.14%);
  color: var(--white-color);
}
.wa-avatar {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.2); font-size: 22px;
}
.wa-kim strong { display: block; font-size: 15px; line-height: 1.3; }
.wa-kim small  { font-size: 12px; opacity: .85; }

/* Konuşma alanı */
.wa-govde {
  height: 460px;
  overflow-y: auto;
  padding: 18px 16px;
  background: #ECE5DD;              /* WhatsApp'ın tanıdık kağıt tonu */
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.wa-govde::-webkit-scrollbar { width: 6px; }
.wa-govde::-webkit-scrollbar-thumb { background: rgba(1,15,52,.2); border-radius: 3px; }

.wa-balon {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  color: var(--heading-color);
  white-space: pre-line;
  animation: waGir .28s ease-out;
  box-shadow: 0 1px 2px rgba(1,15,52,.12);
}
@keyframes waGir { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none;} }

.wa-bot      { align-self: flex-start; background: var(--white-color); border-top-left-radius: 4px; }
.wa-musteri  { align-self: flex-end;   background: #DCF8C6; border-top-right-radius: 4px; }

/* "yazıyor…" */
.wa-yaziyor { align-self: flex-start; background: var(--white-color);
  padding: 12px 16px; border-radius: 14px; border-top-left-radius: 4px;
  display: flex; gap: 4px; }
.wa-yaziyor span { width: 7px; height: 7px; border-radius: 50%;
  background: #9aa1ad; animation: waZipla 1.2s infinite; }
.wa-yaziyor span:nth-child(2){ animation-delay:.2s }
.wa-yaziyor span:nth-child(3){ animation-delay:.4s }
@keyframes waZipla { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-5px);opacity:1} }

/* Seçenek düğmeleri — müşterinin cevabı */
.wa-secenekler {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px; background: var(--white-color);
  border-top: 1px solid var(--border-color);
  min-height: 58px; align-items: center;
}
.wa-secenekler:empty { display: none; }
.wa-sec {
  border: 1px solid var(--secondary-color);
  background: transparent; color: var(--secondary-color);
  padding: 7px 15px; border-radius: 30px;
  font-size: 13px; font-family: var(--body-font); cursor: pointer;
  transition: .18s;
}
.wa-sec:hover { background: var(--secondary-color); color: var(--white-color); }

.wa-alt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 14px; background: var(--white-color);
}
.wa-bastan {
  border: none; background: transparent; cursor: pointer;
  color: var(--secondary-color); font-size: 13px; font-family: var(--body-font);
  padding: 0;
}
.wa-bastan:hover { color: var(--primary-color); }
.wa-not { font-size: 11px; color: var(--text-color); }

@media (max-width: 575.98px) {
  .wa-govde { height: 340px; }
  .wa-pencere { max-width: 100%; }
}

/* ── Metin giriş çubuğu ─────────────────────────────────────────── */
.wa-giris {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px;
  background: var(--white-color);
  border-top: 1px solid var(--border-color);
}
.wa-giris input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  padding: 11px 18px;
  font-size: 14px; font-family: var(--body-font);
  color: var(--heading-color);
  background: var(--gray-color);
}
.wa-giris input:focus { outline: none; border-color: var(--secondary-color); background: var(--white-color); }
.wa-giris input::placeholder { color: var(--text-color); }
.wa-gonder {
  flex: 0 0 42px; width: 42px; height: 42px;
  border: none; border-radius: 50%; cursor: pointer;
  background: linear-gradient(266deg, #F63 -1.18%, #6D2CF9 96.14%);
  color: var(--white-color); font-size: 15px;
  display: grid; place-items: center; transition: .18s;
}
.wa-gonder:hover { transform: scale(1.06); }
.wa-gonder:disabled { opacity: .45; cursor: default; transform: none; }

/* Seçenekler artık girişin üstünde — alt çizgisi girişe devrediliyor */
.wa-secenekler { border-top: 1px solid var(--border-color); border-bottom: none; }

/* ── İlan fotoğrafları (D229) ───────────────────────────────────── */
.wa-balon.wa-foto {
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  max-width: 88%;
}
.wa-balon.wa-foto img {
  width: 100%; height: 96px;
  object-fit: cover;
  border-radius: 9px;
  cursor: zoom-in;
  transition: transform .2s;
}
/* Tek fotoğraf tam genişlik kaplasın */
.wa-balon.wa-foto img:only-child { grid-column: 1 / -1; height: 170px; }
/* Tek sayıda fotoğrafta sonuncu satırı doldurur */
.wa-balon.wa-foto img:nth-child(3):last-child { grid-column: 1 / -1; }
.wa-balon.wa-foto img.buyuk {
  grid-column: 1 / -1;
  height: auto; max-height: 340px;
  cursor: zoom-out;
}

/* Sağ sütundaki gizlilik/düzenlenebilirlik notu */
.wa-uyari {
  margin-top: -12px; margin-bottom: 28px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(109, 44, 249, .06);
  border-left: 3px solid var(--secondary-color);
  font-size: 14px; line-height: 1.65;
  color: var(--text-color);
}
.wa-uyari strong { color: var(--heading-color); }

/* ── Fiyatlandırma: kapalı özellik satırı (D235) ────────────────── */
/* Demo pakette WhatsApp ve eklenti kapalıdır. Satır listede DURUR ama
   üstü çizili ve soluk — müşteri neyin dahil olmadığını da görsün. */
.pricing-body .check-list .yok {
  opacity: .55;
  text-decoration: line-through;
}
.pricing-body .check-list li:has(.yok)::before,
.pricing-body .check-list li:has(.yok) i { opacity: .4; }

/* ── Popup varyantı (D242) ──────────────────────────────────────────
   Aynı pencere, Hakkımızda sayfasında modal içinde. Demo talep
   modalının (`demo-modal.css`) kabuğu kullanılır; burada yalnız
   genişlik ve yükseklik ekrana uydurulur. */
/* Kabuk `.demo-modal`'dan gelir (aynı pencere kabuğu); burada yalnız ölçü. */
.bot-modal .modal-dialog { max-width: 560px; }
.bot-modal .contact-wrapper { padding: 45px 30px 30px; }
.bot-modal .wa-pencere { max-width: 100%; box-shadow: none; }
.bot-modal .wa-govde { height: 46vh; max-height: 420px; min-height: 240px; }
/* Menü 9 seçenek gösteriyor; dar ekranda düğmeler pencereyi ekran boyunun
   iki katına çıkarıyordu (ölçüldü: 1211px). Kutu kendi içinde kayar. */
.bot-modal .wa-secenekler { max-height: 24vh; overflow-y: auto; }
@media (max-width: 575.98px) {
  .bot-modal .wa-govde { height: 30vh; min-height: 180px; }
  .bot-modal .wa-secenekler { max-height: 22vh; }
  .bot-modal .contact-wrapper { padding: 40px 16px 20px; }
}
/* ══════════════════════════════════════════════════════════════════
   CANLI DESTEK — sağ alt köşe, açılır pencere (D238)

   🔴 TEMA DIŞINA ÇIKILMADI. Temada hazır bir "chat launcher" bloğu yok;
   bu yüzden pencere burada kuruldu ama BÜTÜN değerler temanın kendi
   değişkenlerinden gelir: --secondary-color, --primary-color,
   --heading-color, --body-font, --border-color, --gray-color ve
   style.css'teki 266deg gradyan deseni. Yeni renk/font TANIMLANMADI,
   style.css'e DOKUNULMADI. Görsel dil `wa-demo.css` ile aynıdır.
   ══════════════════════════════════════════════════════════════════ */

/* z-index: sabit menü (9999) ÜSTÜNDE, demo talep modalı (999999) ALTINDA. */
.cd-kok { position: fixed; right: 24px; bottom: 24px; z-index: 99998; font-family: var(--body-font); }

/* Bir modal açıkken (demo talebi, bot demosu) robot düğmesi pencerenin
   üstüne biniyordu — modal süresince gizlenir. */
body.modal-open .cd-kok { display: none; }

/* ── Açma düğmesi ───────────────────────────────────────────────── */
.cd-dugme {
  width: 60px; height: 60px; border: none; border-radius: 50%; cursor: pointer;
  background: linear-gradient(266deg, #F63 -1.18%, #6D2CF9 96.14%);
  color: var(--white-color); font-size: 24px;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(109, 44, 249, .38);
  transition: transform .2s;
}
.cd-dugme:hover { transform: scale(1.06); }
.cd-dugme .cd-kapat-ikon { display: none; }
.cd-kok.acik .cd-dugme .cd-ac-ikon { display: none; }
.cd-kok.acik .cd-dugme .cd-kapat-ikon { display: block; }

/* ── Robot (D239) ───────────────────────────────────────────────
   Gövde `currentColor` ile boyanır: düğmede beyaz, başlık şeridinde de
   beyaz. Balonun içindeki noktalar temanın moru. */
.cd-robot { width: 34px; height: 34px; color: var(--white-color); display: block; }
.cd-robot-kucuk { width: 26px; height: 26px; }

/* Ara ara göz kırpar — sevimlilik burada, dikkat dağıtmayacak kadar seyrek */
.cd-robot .cd-goz { transform-origin: center 19px; animation: cdKirp 5.5s infinite; }
@keyframes cdKirp {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.12); }
}
/* Düğmenin üstüne gelince hafifçe zıplar */
.cd-dugme:hover .cd-robot { animation: cdZipla2 .6s ease-in-out; }
@keyframes cdZipla2 { 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .cd-robot .cd-goz, .cd-dugme:hover .cd-robot { animation: none; }
}

/* İlk ziyarette bir kez nabız atar — dikkat çeker, sonra susar */
.cd-dugme.cd-nabiz::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #6D2CF9; animation: cdNabiz 1.8s ease-out 3;
}
.cd-dugme { position: relative; }
@keyframes cdNabiz { from { opacity:.7; transform: scale(1);} to { opacity:0; transform: scale(1.5);} }

/* ── Pencere ────────────────────────────────────────────────────── */
.cd-pencere {
  position: absolute; right: 0; bottom: 76px;
  width: 370px; max-width: calc(100vw - 32px);
  /* Kısa ekranlarda pencere yukarı taşmasın: gövde kısalır, başlık ve
     giriş çubuğu her zaman görünür kalır. */
  max-height: calc(100vh - 110px);
  display: none; flex-direction: column;
  border-radius: 24px; overflow: hidden;
  background: var(--white-color);
  box-shadow: 0 24px 60px rgba(1, 15, 52, .18);
  display: none;
  animation: cdGir .22s ease-out;
}
.cd-kok.acik .cd-pencere { display: flex; }
@keyframes cdGir { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none;} }

.cd-ust {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background: linear-gradient(266deg, #F63 -1.18%, #6D2CF9 96.14%);
  color: var(--white-color);
}
.cd-avatar {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.2);
}
.cd-kim strong { display: block; font-size: 15px; line-height: 1.3; }
.cd-kim small  { font-size: 12px; opacity: .85; }

/* ── Konuşma ────────────────────────────────────────────────────── */
.cd-govde {
  height: 360px; max-height: 42vh; flex: 1 1 auto; overflow-y: auto; padding: 18px 16px;
  background: var(--gray-color);
  display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth;
}
.cd-govde::-webkit-scrollbar { width: 6px; }
.cd-govde::-webkit-scrollbar-thumb { background: rgba(1,15,52,.2); border-radius: 3px; }

.cd-balon {
  max-width: 88%; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.6; color: var(--heading-color);
  white-space: pre-line; box-shadow: 0 1px 2px rgba(1,15,52,.10);
  animation: cdBalon .26s ease-out;
}
@keyframes cdBalon { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none;} }
.cd-bot     { align-self: flex-start; background: var(--white-color); border-top-left-radius: 4px; }
.cd-musteri { align-self: flex-end;   background: rgba(109, 44, 249, .10); border-top-right-radius: 4px; }
.cd-balon strong { color: var(--heading-color); }

.cd-yaziyor {
  align-self: flex-start; background: var(--white-color);
  padding: 12px 16px; border-radius: 14px; border-top-left-radius: 4px;
  display: flex; gap: 4px;
}
.cd-yaziyor span { width: 7px; height: 7px; border-radius: 50%; background: #9aa1ad; animation: cdZipla 1.2s infinite; }
.cd-yaziyor span:nth-child(2) { animation-delay: .2s }
.cd-yaziyor span:nth-child(3) { animation-delay: .4s }
@keyframes cdZipla { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-5px);opacity:1} }

/* ── Öneri / sık soru düğmeleri ─────────────────────────────────── */
.cd-secenekler { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; max-height: 26vh; overflow-y: auto; flex: 0 0 auto;
  background: var(--white-color); border-top: 1px solid var(--border-color); }
.cd-secenekler:empty { display: none; }
.cd-sec {
  border: 1px solid var(--secondary-color); background: transparent; color: var(--secondary-color);
  padding: 7px 14px; border-radius: 30px; font-size: 13px; font-family: var(--body-font);
  cursor: pointer; transition: .18s; text-align: left;
}
.cd-sec:hover { background: var(--secondary-color); color: var(--white-color); }
/* WhatsApp'a devir düğmesi — vurgulu */
.cd-sec.cd-wa { border-color: #25D366; color: #128C4B; }
.cd-sec.cd-wa:hover { background: #25D366; color: var(--white-color); }

/* ── Giriş çubuğu ───────────────────────────────────────────────── */
.cd-giris { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; padding: 12px 16px;
  background: var(--white-color); border-top: 1px solid var(--border-color); }
.cd-giris input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-color); border-radius: 30px;
  padding: 11px 18px; font-size: 14px; font-family: var(--body-font);
  color: var(--heading-color); background: var(--gray-color);
}
.cd-giris input:focus { outline: none; border-color: var(--secondary-color); background: var(--white-color); }
.cd-giris input::placeholder { color: var(--text-color); }
.cd-gonder {
  flex: 0 0 42px; width: 42px; height: 42px; border: none; border-radius: 50%; cursor: pointer;
  background: linear-gradient(266deg, #F63 -1.18%, #6D2CF9 96.14%);
  color: var(--white-color); font-size: 15px; display: grid; place-items: center; transition: .18s;
}
.cd-gonder:hover { transform: scale(1.06); }
.cd-gonder:disabled { opacity: .45; cursor: default; transform: none; }

@media (max-width: 575.98px) {
  .cd-kok { right: 16px; bottom: 16px; }
  /* Dar ekranda konuşma alanı küçülür, seçenek listesine yer açılır:
     ölçüldü — 390x780'de 4 öneri düğmesi kırpılıyordu. */
  .cd-govde { height: 260px; max-height: 32vh; }
  .cd-secenekler { max-height: 34vh; }
}
/* ══════════════════════════════════════════════════════════════════
   LANDING DÜZELTMELERİ (D250)

   Temanın `style.css`'ine DOKUNULMAZ; buradaki kurallar onu ezer.
   Her sayfada yüklenir, bu yüzden yalnız SİTE GENELİ düzeltmeler girer.
   ══════════════════════════════════════════════════════════════════ */

/* Footer arka planı çok yukarıdan başlıyordu.
   `main-footer` temada `padding: 110px 30px 30px` taşıyor; üstündeki
   "Hemen başlayın" şeridi kaldırılınca (D249) o 110px koca bir boşluk
   olarak kaldı — arka plan görseli mavi kutunun epey yukarısına çıkıyordu.
   Tema `pt-50` sınıfı bunu ezemedi (aynı özgüllük, style.css sonra geliyor).
   Ölçüldü: 110px → 50px, mavi kutu arka planın hemen altında başlıyor. */
/* Seçici sayfaya göre değişen sınıfa (pt-50) değil, HER footer'a bağlandı:
   index.html'de o sınıf yoktu ve tek başına 110px kalmıştı (ölçüldü).
   `.main-footer.bg_cover` özgüllüğü style.css'teki `.main-footer`i ezer. */
.main-footer.bg_cover,
.main-footer.bg_cover.pt-50 { padding-top: 50px; }
@media screen and (max-width: 1199.98px) {
  .main-footer.bg_cover,
  .main-footer.bg_cover.pt-50 { padding-top: 45px; }
}