/* ==========================================================================
   DorukCRM — 06-screens.css
   Kendi başına duran ekranlar: giriş, WhatsApp bağlama, bildirimler.

   SIRA ÖNEMLİ. Bu dosyalar tek bir app.css'ten bölündü ve kaskad hâlâ o
   sıraya bağlı: addaki sayı yüklenme sırasıdır. Sırayı belirleyen tek yer
   pages/_partials/styles.php.

   Parçalar 16 KB'ın ALTINDA tutuluyor ve bu ölçü keyfî değil: barındırmanın
   FTP yazması büyük dosyalarda 16384'ün katlarında kesiliyor, 91 KB'lık tek
   parça hâlindeki app.css bu yüzden günlerce sunucuya tam gidemedi. Buraya
   bölüm eklerken dosyayı büyütmek yerine yeni bir parça açın.
   ========================================================================== */

/* --- auth screen ---------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  /* Kart artık tek çocuk değil: altında hukuki bağlantı satırı var. İki satır
     varken align-content'in varsayılanı satırları yüksekliğe yayıyor ve bağlantı
     satırı kartın çok altında kalıyor; center ikisini tek blok olarak ortalıyor. */
  align-content: center;
  padding: 1.5rem;
  background: var(--bg);
}
.auth__card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}
/* Giriş ekranında tam logo kullanılıyor: hem işaret hem kelime. Başlık
   metni buradan kaldırıldı, çünkü logo adı zaten taşıyor. */
.auth__logo {
  display: grid; place-items: center;
  margin: 0 auto 1.25rem;
}
.auth__logo img { width: 190px; max-width: 70%; height: auto; display: block; }
.auth__sub { text-align: center; color: var(--text-muted); font-size: .875rem; margin-bottom: 1.5rem; }
/* Giriş kartının altındaki hukuki bağlantı satırı. .auth bir grid olduğu için
   kartın ikinci satırı olarak yerleşiyor, ayrıca konumlandırma gerekmiyor. */
.auth__legal {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--text-faint);
}
.auth__legal a { color: inherit; text-decoration: underline; }
.auth__legal a:hover { color: var(--text-muted); }

/* --- connect screen ------------------------------------------------------- */
.connect { max-width: 720px; margin: 0 auto; }
.connect__hero { text-align: center; padding: 2rem 1.5rem; }
.connect__icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 1.25rem;
}
.connect__icon svg { width: 38px; height: 38px; }

/* --------------------------------------------------------------------------
   Connect screen
   -------------------------------------------------------------------------- */

.connect__lede {
  max-width: 46ch;
  margin: 0 auto 1.5rem;
  color: var(--text-muted);
  font-size: .9375rem;
}

.connect__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: 1rem;
  font-size: .75rem;
  color: var(--text-faint);
}
.connect__meta span { display: inline-flex; align-items: center; gap: .375rem; }
.connect__meta svg { width: 14px; height: 14px; }

/* Method choice. The two ways of connecting are not a setting with a sensible
   default: one leaves the number on the customer's phone, the other takes it
   off. A dropdown would let someone pick without reading; two cards make the
   consequence part of the click. */
.choice { display: grid; gap: .75rem; }
.choice__card {
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  gap: 1rem;
  align-items: start;
  padding: 1.125rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.choice__card:hover,
.choice__card:focus-visible {
  border-color: var(--brand);
  background: var(--surface-2);
}
.choice__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--brand);
  display: grid; place-items: center;
}
.choice__card:hover .choice__icon { background: var(--surface); }
.choice__icon svg { width: 22px; height: 22px; }
.choice__title { font-weight: 700; margin-bottom: .25rem; }
.choice__lede {
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.choice__for {
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--text-faint);
}
.choice__go { color: var(--text-faint); align-self: center; }
.choice__go svg { width: 20px; height: 20px; }

/* Prerequisites. Presented before the button, because the flow needs a phone
   in hand and finding that out halfway through means starting over. */
.prereq { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.prereq li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .75rem;
  align-items: start;
  font-size: .875rem;
}
.prereq li > svg {
  width: 18px; height: 18px;
  color: var(--brand);
  margin-top: .125rem;
}
.prereq strong { display: block; font-weight: 600; }
.prereq span small { color: var(--text-muted); font-size: .8125rem; }

/* The flow crosses two devices, and that is the part people get lost in:
   half of it happens in this browser, half on the phone. Splitting the
   columns says so before they start. */
.flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.flow__col { background: var(--surface); padding: 1rem 1.125rem 1.25rem; }
.flow__where {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .875rem;
}
.flow__where svg { width: 15px; height: 15px; }

/* İki sütunun ARASINDA yön oku olan ikili (aktarım editörü: oradaki tablo →
   bizdeki tablo). .flow iki sütunlu, bu kalıpta ise üç çocuk var; modifier
   olmadan ok ikinci hücreyi kapıyor, ikinci sütun alt satıra düşüyor ve
   yanında ızgara arkaplanından kalan boş gri bir hücre kalıyordu. */
.flow--pair { grid-template-columns: 1fr auto 1fr; }
.flow__arrow {
  display: grid;
  place-items: center;
  background: var(--surface);
  padding: 0 .625rem;
  color: var(--text-muted);
}
.flow__arrow svg { width: 18px; height: 18px; }
.flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.flow li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .625rem;
  align-items: start;
  font-size: .875rem;
  line-height: 1.45;
}
.flow li b {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
  display: grid; place-items: center;
  font-size: .6875rem; font-weight: 700;
}
.flow li small { display: block; color: var(--text-muted); font-size: .8125rem; }

/* What survives the connection and what does not. This is consent material,
   not fine print: after coexistence the customer loses group chats, broadcast
   lists and more on their own phone. Hiding it behind a disclosure triangle
   would be the wrong call. */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.compare__col { background: var(--surface); padding: 1rem 1.125rem 1.25rem; }
.compare__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  margin-bottom: .75rem;
}
.compare__head svg { width: 16px; height: 16px; }
.compare__col--keep .compare__head { color: var(--success); }
.compare__col--lose .compare__head { color: var(--warning); }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4375rem; }
/* İşaret ile metin ayrı sütunlarda: uzun bir madde ikinci satıra taştığında
   devamı çizginin altına değil, metnin hizasına gelsin. */
.compare li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4375rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.compare li::before { content: "—"; color: var(--text-faint); }
.compare__col--keep li { color: var(--text); }

.limits {
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid var(--border);
  font-size: .8125rem;
  color: var(--text-muted);
}

/* Setup state. The operator cannot fix server configuration from this screen,
   so the technical keys are secondary to knowing what is missing and who acts. */
.setup-missing {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .625rem;
}
.setup-missing code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: .1875rem .4375rem;
}

@media (max-width: 720px) {
  .flow, .compare { grid-template-columns: 1fr; }
  /* Tek sütuna inince ok artık yana değil aşağı bakıyor; sütunu
     kapatmak için ayrıca yazılıyor — .flow--pair daha özgül. */
  .flow--pair { grid-template-columns: 1fr; }
  .flow__arrow { padding: .5rem 0; }
  .flow__arrow svg { transform: rotate(90deg); }
  /* Dar ekranda ok işareti bir sütun yeri kaplamaya değmez; kartın tamamı
     zaten dokunulabilir bir hedef. */
  .choice__card { grid-template-columns: 44px 1fr; }
  .choice__go { display: none; }
}


/* Başlık şeridindeki arama kutusu. Ölçü bir zamanlar kişiler ekranındaki
   formun `style` niteliğindeydi; satır içi biçim hiçbir stil kuralıyla
   yenilenemediği için telefonda kutunun tam genişliğe açılmasının önünde
   duruyordu (bkz. 14-mobile-lists.css). */
.topbar__search { width: 280px; }

/* --- flash toasts --------------------------------------------------------- */
.toasts {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 60;
  display: flex; flex-direction: column; gap: .5rem;
  max-width: 380px;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: .75rem 1rem;
  font-size: .875rem;
  animation: toast-in .18s ease-out;
}
.toast--error   { border-left-color: var(--danger); }
.toast--success { border-left-color: var(--success); }
.toast--warning { border-left-color: var(--warning); }
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* --- misc ----------------------------------------------------------------- */
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: .8125rem; }
.tiny  { font-size: .75rem; }
.strong { font-weight: 600; }
.row { display: flex; align-items: center; gap: .625rem; }
.stack > * + * { margin-top: 1rem; } .mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.conn-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.conn-dot--live { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.conn-dot--down { background: var(--text-faint); }

@media (max-width: 1024px) {
  .app { grid-template-columns: 64px 1fr; }
  .sidebar__brand span, .nav-item span { display: none; }
  .sidebar__brand, .nav-item { justify-content: center; }
  .inbox { grid-template-columns: 300px 1fr; }
}
/* Bu iki blok 1024 bloğundan SONRA gelmek zorunda: aynı özgüllükteki iki kural
   arasında sonraki kazanıyor ve oradaki ".inbox" satırı bunları yoksa ezer. */
@media (max-width: 1280px) {
  /* Üç sütun hâlâ sığıyor, yalnızca daralıyor. Liste burada gizlenmiyor:
     künyeyi açmanın bedeli, o anda bakılan konuşmanın komşularını kaybetmek
     olmamalı. */
  .inbox--info-open { grid-template-columns: 264px minmax(0, 1fr) 288px; }
}
@media (max-width: 1000px) {
  /* Bu noktadan sonra sohbete okunur bir genişlik kalmıyor. Feda edilen liste,
     çünkü o an bakılan tek konuşma zaten açık olan. */
  .inbox--info-open { grid-template-columns: minmax(0, 1fr) var(--info-w); }
  .inbox--info-open .thread-list { display: none; }
}
@media (max-width: 720px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox--thread-open .thread-list { display: none; }
  .inbox:not(.inbox--thread-open) .chat { display: none; }
  /* Telefonda künye tam ekran: yanında duracak yer yok. */
  .inbox--info-open { grid-template-columns: 1fr; }
  .inbox--info-open .chat { display: none; }
  .chat-info__back { display: inline-flex; }
  .chat-info__dismiss { display: none; }
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }


/* Aranacaklar süzgeçleri (078): tarih durumu ve tekrar arama sayacı. */
.cb-filters { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .875rem; }
.cb-filters__group { display: inline-flex; flex-wrap: wrap; gap: .125rem; padding: .1875rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cb-filters__item { padding: .3125rem .625rem; border-radius: var(--radius-sm); font-size: .8125rem; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.cb-filters__item:hover { color: var(--text); background: var(--surface-2); }
.cb-filters__item--on, .cb-filters__item--on:hover { background: var(--brand); color: var(--brand-contrast); font-weight: 600; }