/* ==========================================================================
   DorukCRM — 10-tabs.css
   Sekme şeridi: uzun bir formu tek ekranda değil, sırayla okunan bölümlerde
   gösteren parça.

   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.
   ========================================================================== */

/* --- sekmeler -------------------------------------------------------------
   Bir kartın gövdesini bölmek için: şerit kart başlığının hemen altında,
   panel de onun altında duruyor.

   Sekmeler <button type="button">; <a> DEĞİL, çünkü gidilecek bir adres yok
   ve type="button" olmadan bir formun içindeki düğme formu GÖNDERİR — sekme
   değiştirmek kaydetmeye dönüşürdü.

   Panel `hidden` ile kapanıyor, display:none sınıfıyla değil: hidden hem
   biçemden bağımsız hem de erişilebilirlik ağacından düşürüyor, yani ekran
   okuyucu kapalı bölümün alanlarını okumuyor. */

.tabs { display: flex; flex-direction: column; min-width: 0; }

.tabs__list {
  display: flex;
  gap: .125rem;
  /* .card__body'nin 1.25rem'lik dolgusuna göre hesaplanmış: sekmenin kendi
     .6875rem'lik iç boşluğuyla toplanınca ilk sekmenin YAZISI, altındaki
     gövdenin sol kenarıyla aynı düşeye oturuyor. Şeride doğrudan 1.25rem
     verilseydi yazı o kadar içeriden başlardı. */
  padding: 0 .5625rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  /* Dar ekranda sekmeler alt satıra düşmüyor, yana kayıyor: iki satıra
     bölünen bir şerit altındaki panelin nerede başladığını belirsizleştirir. */
  overflow-x: auto;
  overflow-y: hidden;
}

.tabs__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .75rem .6875rem;
  border: 0;
  /* Alt çizgi etkin sekmeyi işaretliyor ve şeridin kendi alt kenarının
     ÜSTÜNE biniyor: -1px olmadan iki çizgi alt alta düşüp kalınlaşıyordu. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.tabs__tab:hover { color: var(--text); }
.tabs__tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.tabs__tab[aria-selected="true"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Sekmenin sırası. Uzun bir tanım formunda "kaçıncı adımdayım" sorusunun
   cevabı başlıktan okunmuyor; numara onu sekmenin kendisine yazıyor. */
.tabs__num {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
}

.tabs__tab[aria-selected="true"] .tabs__num { background: var(--brand); color: #fff; }

/* Bölümde eksik bir şey olduğunu söyleyen nokta. Kapalı bir sekmedeki boş
   zorunlu alan başka türlü görünmüyor: form gönderilmiyor ve sebebi ekranda
   olmayan bir alanda kalıyor. */
.tabs__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--danger);
}
.tabs__dot[hidden] { display: none; }

.tabs__panel[hidden] { display: none; }

/* Panelin içindeki ilk başlık kartın gövdesiyle çakışan bir üst boşluk
   taşımıyor: bölüm zaten sekmeyle adlandırılmış durumda. */
.tabs__panel > h3:first-child { margin-top: 0; }

/* Kilitli sekme: sırası gelmemiş bir adım. Gizlenmiyor — kaç adım olduğunu ve
   sıradakinin ne olduğunu göstermek, ekrandan bir şey saklamaktan iyi. */
.tabs__tab--locked {
  opacity: .45;
  cursor: not-allowed;
}
.tabs__tab--locked:hover { color: inherit; }

/* Bölüm menüsü: sekmelerin aynı biçimi, ama gerçek bağlantılar. Her bölümün
   kendi adresi olduğu için <button> değil <a> -- bağlantı paylaşılabiliyor,
   geri düğmesi çalışıyor, yeni sekmede açılabiliyor. */
a.tabs__tab { text-decoration: none; }
a.tabs__tab[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
a.tabs__tab[aria-current="page"] .tabs__num { background: var(--brand); color: #fff; }