/* randevuasistan - turkuaz-yeşil (#31998d) tema
   Bootstrap 5 üzerine renk ve bileşen özelleştirmeleri */

:root {
  --bs-primary: #31998d;
  --bs-primary-rgb: 49, 153, 141;
  --marka-koyu: #257d73;
  --marka-acik: #e6f5f3;
  --marka-vurgu: #ff7849;
  --marka-lacivert: #0f172a;
}

html {
  /* Bazı dekoratif öğeler (ör. yüzen tanıtım kartları, kayan firma şeridi) taşan konumlamayla
     tasarlandığı için yatay kaydırma çubuğunun sayfa genelinde çıkmasını engeller. Bu kural bilerek
     body yerine html üzerine konur: body'de olsaydı body'nin overflow-y'si de örtük olarak "auto"ya
     dönüşüp bazı mobil tarayıcılarda body'yi kendi iç kaydırma alanı haline getirebiliyor, bu da
     window.scrollY'e bakan JS (ör. anasayfadaki saydam navbar) davranışını bozuyordu. */
  overflow-x: hidden;
}

body {
  background-color: #f8fafc;
}

/* İçerik kısa olsa bile footer'ı her zaman ekranın en altına iter (panel sayfalarında footer olmadığı için hariç tutulur) */
body:not(.panel-body) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body:not(.panel-body) > main {
  flex: 1 0 auto;
  /* flex öğelerinin varsayılan min-width:auto davranışı, içindeki geniş bir alt öğe (ör. kayan
     firma şeridinin width:max-content kaydırıcısı) yüzünden main'i (ve dolayısıyla tüm sayfayı)
     ekrandan geniş tutup yatay kaydırmaya yol açabiliyordu; bu satır o davranışı kapatır */
  min-width: 0;
}

a {
  color: var(--marka-koyu);
}
a:hover {
  color: #0b7c72;
}

/* --- Butonlar --- */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--marka-koyu);
  border-color: var(--marka-koyu);
}
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-vurgu {
  background-color: var(--marka-vurgu);
  border-color: var(--marka-vurgu);
  color: #fff;
}
.btn-vurgu:hover {
  filter: brightness(0.95);
  color: #fff;
}

/* --- Marka logosu (logo-light.png): koyu/renkli zeminlerde kullanılan beyaz logo --- */
.marka-logo {
  height: 34px;
  width: auto;
  display: inline-block;
}
.panel-sidebar-baslik .marka-logo {
  height: 28px;
}
.marka-navbar .marka-logo {
  height: 46px;
}
.marka-footer-yeni .marka-logo {
  height: 46px;
}

/* --- Genel navbar (herkese açık sayfalar) — BEYAZ zemin (kullanıcı kararı, eskiden koyu lacivertti).
   Anasayfada hero üzerindeyken (.navbar-hero-ustu, henüz kaydırılmamış hal) İSTİSNA olarak koyu hero
   fotoğrafının üzerinde okunabilir kalması için AYRICA açık/saydam bir görünüm korunuyor — aşağıdaki
   .navbar-hero-ustu:not(.navbar-scrolled) blokları BİLİNÇLİ OLARAK bu varsayılanı geçersiz kılıyor. */
.marka-navbar {
  background: #fff;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  box-shadow: 0 0.25rem 1.25rem rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid #eef1f5;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Kategoriler eklendikten sonra menü öğeleri sıkışıp "Ana Sayfa" iki satıra bölünüyordu;
   navbar'ın iç kapsayıcısı sayfanın geri kalanından bağımsız olarak biraz genişletildi. */
@media (min-width: 992px) {
  .marka-navbar .container {
    max-width: 1180px;
  }
}
@media (min-width: 1200px) {
  .marka-navbar .container {
    max-width: 1340px;
  }
}
@media (min-width: 1400px) {
  .marka-navbar .container {
    max-width: 1520px;
  }
}
@media (max-width: 991.98px) {
  .marka-navbar .container {
    position: relative;
    /* Logo aşağıda flex akışından çıkarılıp mutlak konumla ortalanıyor; mesaj butonu
       yokken (çıkış yapılmış ziyaretçi) kapsayıcının akıştaki tek görünür öğesi kalmayıp
       yüksekliği sıfıra çökmesin diye logonun yüksekliğiyle eşleşen bir taban veriliyor. */
    min-height: 32px;
  }
  .marka-navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .marka-navbar .marka-logo {
    height: 32px;
  }
  /* Logo, giriş yapmamış ziyaretçide (tek görünür öğe) ortalanmış dursun isteniyordu; bu daha
     önce kapsayıcıya "justify-content:center" ile sağlanıyordu. Ama müşteri girişliyken sağdaki
     mesaj butonu "ms-auto" ile aynı satırda sağa yaslanmaya çalışınca ikisi çakışıp genişlik
     hesabını taşırıyordu ("sayfa sağa kayıyor"). Çözüm: logo'yu flex akışından tamamen çıkarıp
     kendi başına ortalamak — böylece mesaj butonunun normal "ms-auto" ile sağa yaslanmasıyla
     hiç çakışmıyor. */
  .marka-navbar .navbar-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Anasayfada, hero görselinin üzerinde: sayfa en üstündeyken tamamen saydam (koyu hero fotoğrafı
   görünür), aşağı kaydırılınca navbar'ın YENİ varsayılanı olan beyaz zemin geri gelir. */
.navbar-hero-ustu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  z-index: 1030;
  /* iOS Safari'de adres çubuğu kaydırırken gizlenip/görününce "position:fixed" elemanlar bazen
     gecikmeli/sıçramalı render ediliyor (bilinen tarayıcı davranışı). GPU katmanına almak bunu
     büyük ölçüde azaltıyor. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}
.navbar-hero-ustu.navbar-scrolled {
  background: #fff;
  border-bottom-color: #eef1f5;
  box-shadow: 0 0.25rem 1.25rem rgba(15, 23, 42, 0.08);
}
/* Saydamken mobil menü açılırsa okunabilirlik için arkasına koyu bir zemin konur */
.navbar-hero-ustu .navbar-collapse.show,
.navbar-hero-ustu .navbar-collapse.collapsing {
  background: var(--marka-lacivert);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
}
.marka-navbar .nav-link {
  color: var(--marka-lacivert);
  font-weight: 500;
  font-size: 0.94rem;
  border-radius: 0.5rem;
  transition: color 0.15s ease, background-color 0.15s ease;
}
@media (min-width: 992px) {
  .marka-navbar .nav-link {
    padding: 0.45rem 1rem;
    margin: 0 0.1rem;
  }
}
.marka-navbar .nav-link:hover,
.marka-navbar .navbar-brand {
  color: var(--bs-primary);
}
.marka-navbar .nav-link:hover {
  background-color: var(--marka-acik);
}
.marka-navbar .nav-link.active {
  color: #fff;
  background-color: var(--bs-primary);
}

/* İSTİSNA: anasayfada hero üzerinde henüz kaydırılmamışken (saydam zemin, koyu hero fotoğrafı arkada)
   metin/ikonlar okunabilir kalsın diye YUKARIDAKİ koyu-metin varsayılanının üzerine beyaz yazılır. */
.navbar-hero-ustu:not(.navbar-scrolled) .nav-link,
.navbar-hero-ustu:not(.navbar-scrolled) .navbar-brand,
.navbar-hero-ustu:not(.navbar-scrolled) .navbar-mobil-mesaj-buton {
  color: rgba(255, 255, 255, 0.85);
}
.navbar-hero-ustu:not(.navbar-scrolled) .nav-link:hover,
.navbar-hero-ustu:not(.navbar-scrolled) .navbar-brand:hover {
  color: #fff;
}
.navbar-hero-ustu:not(.navbar-scrolled) .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.navbar-hero-ustu:not(.navbar-scrolled) .navbar-avatar {
  background: rgba(255, 255, 255, 0.15);
}
.navbar-hero-ustu:not(.navbar-scrolled) .navbar-giris-buton {
  border-color: rgba(255, 255, 255, 0.35);
}
.navbar-hero-ustu:not(.navbar-scrolled) .navbar-giris-buton:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Giriş yapılmamış ziyaretçiye gösterilen "Giriş / Üye Ol" bir CTA butonu gibi öne çıkar */
.navbar-randevu-buton {
  border-radius: 999px;
  padding: 0.45rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.navbar-giris-buton {
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 999px !important;
  padding: 0.4rem 1.1rem !important;
  margin-left: 0.5rem;
}
.navbar-giris-buton:hover {
  background-color: var(--marka-acik) !important;
  border-color: var(--bs-primary);
}
.navbar-giris-buton::after {
  display: none;
}

/* Giriş yapılmış kullanıcı için avatar rozetli hesap menüsü */
.navbar-hesap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--marka-acik);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* --- Bildirim zili (navbar) --- */
.bildirim-zili-toggle {
  position: relative;
  font-size: 1.05rem;
  padding-left: 0.9rem !important;
  padding-right: 0.9rem !important;
}
.navbar-mobil-mesaj-buton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--marka-lacivert);
  font-size: 1.15rem;
  text-decoration: none;
}
.navbar-mobil-mesaj-buton:hover {
  color: var(--bs-primary);
}
.bildirim-rozet {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  background: var(--marka-vurgu);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  line-height: 1;
}
.bildirim-dropdown {
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  padding: 0.5rem;
}
.bildirim-ogesi {
  white-space: normal;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.2rem;
}
.bildirim-ogesi.bildirim-okunmamis {
  background: var(--marka-acik);
}
.bildirim-ogesi:hover {
  background: #f1f5f9;
}
.bildirim-zaman {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 0.15rem;
}

.takip-butonu .takip-sayisi {
  opacity: 0.75;
}

.marka-navbar .dropdown-menu {
  border: 0;
  border-radius: 0.85rem;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.18);
  padding: 0.5rem;
  margin-top: 0.6rem !important;
}
.marka-navbar .dropdown-item {
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.marka-navbar .dropdown-item i {
  width: 1.1rem;
  color: var(--bs-primary);
}
.marka-navbar .dropdown-item:hover {
  background-color: var(--marka-acik);
}
.marka-navbar .dropdown-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 700;
}

/* --- Footer (çok sütunlu, beyaz zemin) --- */
.marka-footer-yeni {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  color: #64748b;
  border-top: 1px solid #eef1f5;
}
.footer-dekor {
  position: absolute;
  border-radius: 50%;
  border: 3.5rem solid rgba(var(--bs-primary-rgb), 0.08);
  pointer-events: none;
}
.footer-dekor-1 {
  width: 260px;
  height: 260px;
  top: -80px;
  right: 6%;
}
.footer-dekor-2 {
  width: 180px;
  height: 180px;
  bottom: -60px;
  right: 20%;
  border-color: rgba(var(--bs-primary-rgb), 0.06);
}
.footer-metin {
  color: #64748b;
}
.footer-baslik {
  color: var(--marka-lacivert);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-link-listesi {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-link-listesi li {
  margin-bottom: 0.65rem;
  color: #64748b;
  font-size: 0.9rem;
}
.footer-link-listesi a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-link-listesi a:hover {
  color: var(--bs-primary);
}

.footer-bulten {
  display: flex;
  max-width: 340px;
}
.footer-bulten .form-control {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--marka-lacivert);
  border-radius: 0.5rem 0 0 0.5rem;
}
.footer-bulten .form-control::placeholder {
  color: #94a3b8;
}
.footer-bulten .form-control:focus {
  background: #fff;
  box-shadow: none;
  border-color: var(--bs-primary);
  color: var(--marka-lacivert);
}
.footer-bulten .btn {
  border-radius: 0 0.5rem 0.5rem 0;
  white-space: nowrap;
}

.footer-ayirici {
  border-color: #eef1f5;
  margin: 0;
}

.footer-sosyal-buton {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.footer-sosyal-buton:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.footer-kart-logolari {
  max-width: 220px;
  width: 100%;
  height: auto;
  transform: rotate(180deg);
}

/* --- Hero alanı: tek statik görsel (assets/img/slider-gorsel.png), koyu lacivert zemin üzerine
   sola metin + arama kutusu, sağa görsel. Slider değil, sabit tek düzen. */
.hero-v2 {
  position: relative;
  overflow: hidden;
  background: #0f172a;
  padding: 3rem 0 4rem;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) {
  .hero-v2 {
    /* Simetrik dolgu + min-height: align-items:center içeriği gerçekten dikeyde ortalayabilsin diye
       (asimetrik alt dolgu içeriği yukarıda bırakıyordu, ortalamaya alan bırakmıyordu) */
    padding: 5rem 0;
    min-height: 860px;
  }
}
.hero-v2-gorsel {
  width: 100%;
  max-width: 560px;
  height: auto;
}
/* Hero'nun alt kenarı, altına biniyor olan Kategoriler kart şeridiyle daha yumuşak birleşsin diye
   aşağıdan yukarıya doğru beyaza solan bir katman */
.hero-v2-alt-solma {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  z-index: 1;
  /* Kartların bindiği alanı tam kapatan, sayfa zeminiyle (#f8fafc) aynı renkte katı taban + üstüne
     doğru çok kademeli (yumuşak) solma */
  background-image: linear-gradient(
    to top,
    #f8fafc 0%,
    #f8fafc 60%,
    rgba(248, 250, 252, 0.92) 70%,
    rgba(248, 250, 252, 0.65) 80%,
    rgba(248, 250, 252, 0.32) 90%,
    rgba(248, 250, 252, 0) 100%
  );
  pointer-events: none;
}
@media (max-width: 991.98px) {
  .hero-v2-alt-solma {
    display: none;
  }
}
.hero-v2-icerik {
  position: relative;
  z-index: 2;
}

/* --- Anasayfa, footer'dan önce: assets/img/mobil-1.jpg ile siyah zeminli, oval köşeli, .neden-bolum
   kartıyla AYNI "container içinde inset kart" deseninde tanıtım şeridi (metin solda, görsel sağda,
   görsel kartın alt kenarına TAM dayanır — object-fit:cover ile taşan üst kısım kırpılır, alt kenar hep
   flush kalır). Mobilde metin üstte ortalı, görsel altta (order sınıfı YOK — DOM sırası zaten metin
   önce/görsel sonra olduğu için doğal akış bunu sağlıyor, ayrıca order-lg-* gerekmiyor). */
.mobil-tanitim-bolum {
  background: #000;
  border-radius: 1.75rem;
  overflow: hidden;
}
.mobil-tanitim-satir {
  min-height: 460px;
}
.mobil-tanitim-metin-alan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem 3rem 8rem;
}
.mobil-tanitim-etiket {
  color: #6ee7d0;
  letter-spacing: .04em;
}
.mobil-tanitim-baslik {
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.25;
}
.mobil-tanitim-metin {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.1rem;
  margin-top: 1rem;
  max-width: 460px;
}
.mobil-tanitim-gorsel-alan {
  height: 100%;
  min-height: 320px;
}
.mobil-tanitim-gorsel {
  display: block;
  width: 100%;
  height: 100%;
  /* Görsel kartın ALT kenarına tam dayansın diye object-fit:cover + alt-hizalı kırpma — taşan kısım üstten gider. */
  object-fit: cover;
  object-position: center bottom;
}
@media (max-width: 991.98px) {
  .mobil-tanitim-satir {
    min-height: 0;
  }
  .mobil-tanitim-metin-alan {
    text-align: center;
    padding: 2.5rem 1.5rem 1.5rem;
  }
  .mobil-tanitim-baslik {
    font-size: 1.6rem;
  }
  .mobil-tanitim-metin {
    margin-left: auto;
    margin-right: auto;
  }
  .mobil-tanitim-gorsel-alan {
    height: 320px;
  }
}

.hero-v2-baslik {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.hero-v2-baslik .vurgu-sayi {
  color: #6ee7d0;
}
.hero-v2-alt {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  margin: 1rem 0 2rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.hero-alt-satir {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2rem;
}
.hero-uye-blok {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-uye-blok img {
  height: 34px;
  width: auto;
  display: block;
}
.hero-uye-blok span {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}
.hero-cta-blok {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}
.hero-cta-blok i {
  font-size: 1.1rem;
}
.hero-cta-blok:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 991.98px) {
  .hero-v2-baslik,
  .hero-v2-alt {
    text-align: center;
  }
  .hero-alt-satir {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .hero-v2-baslik {
    font-size: 1.7rem;
    margin-top: 1rem;
  }
  .hero-v2-alt {
    font-size: 0.92rem;
    margin: 0.75rem 0 1.25rem;
  }
  .hero-v2-gorsel {
    max-width: 240px;
  }
}

.hero-arama-pill {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.1);
  padding: 0.4rem;
}
.hero-arama-alan {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  position: relative;
}
.hero-arama-alan i {
  color: var(--bs-primary);
  font-size: 1.1rem;
}
.hero-arama-alan input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  font-size: 0.95rem;
}
.hero-arama-ayirici {
  width: 1px;
  background: #e2e8f0;
  margin: 0.4rem 0;
}
.hero-arama-buton {
  border-radius: 0.75rem;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  white-space: nowrap;
  margin: 0.15rem;
}

.hero-populer {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
}
.hero-populer a {
  color: #fff;
  text-decoration: none;
  margin-left: 0.2rem;
  font-weight: 500;
}
.hero-populer a:hover {
  text-decoration: underline;
}

/* --- Öne çıkan firmalar: kendiliğinden sürekli akan (marquee) bölüm --- */
.one-cikan-kaydirici-disi {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.one-cikan-kaydirici {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding: 0.25rem 0 0.75rem;
  animation: oneCikanKaydir 45s linear infinite;
}
/* Fare üzerine gelince akış durur, kullanıcı rahatça tıklayabilir/okuyabilir */
.one-cikan-kaydirici-disi:hover .one-cikan-kaydirici {
  animation-play-state: paused;
}
@keyframes oneCikanKaydir {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.kayan-firma-karti {
  position: relative;
  flex: 0 0 270px;
  display: block;
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 1rem;
  padding: 1.15rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.kayan-firma-karti::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--marka-koyu), var(--bs-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.kayan-firma-karti:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.1);
  border-color: #dde4ea;
  color: inherit;
}
.kayan-firma-karti:hover::before {
  transform: scaleX(1);
}
.kayan-firma-logo {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f1f5f9;
}
.kayan-firma-logo-bos {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--marka-acik), #ffffff);
  color: var(--marka-koyu);
  font-size: 1.05rem;
}
.kayan-firma-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #e7ebf0;
}

@media (max-width: 575.98px) {
  .kayan-firma-karti {
    flex-basis: 220px;
  }
}

/* Hareketi azaltma tercihi olan kullanıcılar için animasyon durdurulur */
@media (prefers-reduced-motion: reduce) {
  .one-cikan-kaydirici {
    animation: none;
  }
}

/* --- Kategori kartları --- */
.kategori-karti {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 0.9rem;
  padding: 1.5rem 1rem;
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.kategori-karti:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(49, 153, 141, 0.18);
  border-color: var(--bs-primary);
  color: inherit;
}
.kategori-karti i {
  font-size: 2rem;
  color: var(--bs-primary);
}
.kategori-karti-sayac {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.15rem;
}

/* Kategoriler başlığının yanındaki "Tümünü Gör" — düğme değil, ok ikonlu düz yazı bağlantısı */
.kategori-tumunu-gor-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.15s ease;
}
.kategori-tumunu-gor-link:hover {
  color: var(--bs-primary);
  gap: 0.6rem;
}
.kategori-tumunu-gor-link i {
  font-size: 0.85em;
}

/* --- Anasayfa: kaydırmalı görselli kategori şeridi (container içinde, ekranın sağına soluna değmez) --- */
.kategori-gorsel-kaydirici {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.25rem 1rem 0.85rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}
.kategori-gorsel-kaydirici::-webkit-scrollbar {
  height: 6px;
}
.kategori-gorsel-kaydirici::-webkit-scrollbar-track {
  background: transparent;
}
.kategori-gorsel-kaydirici::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 3px;
}
@media (min-width: 992px) {
  .kategori-gorsel-kaydirici {
    scrollbar-width: none;
  }
  .kategori-gorsel-kaydirici::-webkit-scrollbar {
    display: none;
  }
}

/* --- Anasayfa: Kategoriler şeridi, güven şeridinin eski yerinde. Arkaplansız; masaüstünde kartların
   üst yarısı hero görselinin üstüne, alt yarısı sayfa zeminine biniyor. --- */
.kategori-anasayfa-yuzen {
  position: relative;
  z-index: 6;
}
@media (min-width: 992px) {
  .kategori-anasayfa-yuzen .kategori-gorsel-kaydirici {
    /* Hero artık sabit yükseklikte bir görsel değil, içeriğe göre boy alan koyu bir zemin — kartlar
       hâlâ alt kenarına biniyor ama hero'nun sol taraftaki metin/CTA içeriğini kapatmayacak kadar ufak */
    margin-top: -190px;
    margin-bottom: -0.25rem;
  }
  /* Kartlar container genişliğine göre orantılı boyutlanır, böylece masaüstünde tam 5 tanesi sığar */
  .kategori-anasayfa-yuzen .kategori-gorsel-karti {
    flex: 0 0 calc((100% - 4 * 1.25rem) / 5);
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .kategori-anasayfa-yuzen .kategori-gorsel-kaydirici {
    margin-top: -95px;
  }
}
.kategori-gorsel-karti {
  position: relative;
  flex: 0 0 230px;
  height: 280px;
  scroll-snap-align: start;
  display: block;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kategori-gorsel-karti:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.18);
}
.kategori-gorsel-resim-link {
  position: absolute;
  inset: 0;
  display: block;
}
.kategori-gorsel-resim {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}
.kategori-gorsel-karti:hover .kategori-gorsel-resim {
  transform: scale(1.06);
}
.kategori-gorsel-golge {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 45%, transparent 80%);
}
.kategori-gorsel-etiket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.15rem;
  pointer-events: none;
}
.kategori-gorsel-etiket-ad {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  pointer-events: auto;
}
.kategori-gorsel-etiket-ad:hover {
  color: #fff;
  text-decoration: underline;
}
.kategori-gorsel-tumunu-gor {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
}
.kategori-gorsel-tumunu-gor:hover {
  color: #fff;
  text-decoration: underline;
}

/* --- nasil-kullanilir.php: fotoğraflı sektör vitrin kartı — kategori-gorsel-karti ile AYNI görsel
     dil (fotoğraf + alttan gölge + beyaz etiket), ama sabit-genişlik marquee yerine grid sütununu
     doldurur (aspect-ratio ile), altına kısa özellik açıklaması eklenir. */
.sektor-vitrin-karti {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sektor-vitrin-karti:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.18);
}
.sektor-vitrin-resim {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}
.sektor-vitrin-karti:hover .sektor-vitrin-resim {
  transform: scale(1.06);
}
.sektor-vitrin-golge {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
}
.sektor-vitrin-etiket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  color: #fff;
}
.sektor-vitrin-ad {
  font-weight: 700;
  font-size: 1.05rem;
}
.sektor-vitrin-aciklama {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* --- nasil-kullanilir.php: firma panelinin GERÇEK GÖRÜNÜMÜNÜ örnek verilerle taklit eden, tıklanamaz
     statik önizleme "penceresi". İçerik .admin-kpi-karti/.admin-mini-liste/.admin-sidebar-link gibi
     panelde zaten var olan gerçek sınıfları yeniden kullanır — sadece dış çerçeve + sabit-yükseklikli
     kaydırılabilir sidebar/içerik alanı burada tanımlanır (gerçek .admin-sidebar'daki height:100vh ve
     position:sticky, sayfa içine gömülü bir önizleme kutusunda işe yaramaz, bu yüzden ayrı). */
.panel-onizleme-cerceve {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid #e5e9f0;
  background: #fff;
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.18);
}
.panel-onizleme-ust-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e5e9f0;
}
.panel-onizleme-nokta {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.panel-onizleme-nokta.kirmizi { background: #ef4444; }
.panel-onizleme-nokta.sari { background: #f59e0b; }
.panel-onizleme-nokta.yesil { background: #22c55e; }
.panel-onizleme-adres {
  margin-left: 0.75rem;
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 999px;
  padding: 0.3rem 1rem;
  font-size: 0.78rem;
  color: #64748b;
  flex-grow: 1;
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel-onizleme-rozet {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}
@media (min-width: 576px) {
  .panel-onizleme-rozet {
    white-space: nowrap;
  }
}
.panel-onizleme-govde {
  display: flex;
  height: 560px;
}
.panel-onizleme-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #eef2f6;
  overflow-y: auto;
  padding-bottom: 1rem;
  pointer-events: none;
}
.panel-onizleme-icerik {
  flex-grow: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1.25rem;
  background: #f8fafc;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .panel-onizleme-govde {
    height: 480px;
  }
  .panel-onizleme-sidebar {
    width: 190px;
  }
}
@media (max-width: 575.98px) {
  .panel-onizleme-sidebar {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .kategori-gorsel-karti {
    flex-basis: 190px;
    height: 230px;
  }
  .kategori-gorsel-etiket-ad {
    font-size: 1rem;
  }
}
@media (max-width: 575.98px) {
  .kategori-gorsel-karti {
    flex-basis: 150px;
    height: 185px;
  }
  .kategori-gorsel-etiket {
    font-size: 0.9rem;
    padding: 0.75rem;
  }
}

/* --- kategoriler.php: mobilde kart ızgarası yerine tek sütun, geniş dokunma hedefli liste --- */
.kategori-liste-mobil {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.kategori-liste-satiri {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kategori-liste-satiri:active {
  border-color: var(--bs-primary);
  box-shadow: 0 0.35rem 1rem rgba(49, 153, 141, 0.12);
}
.kategori-liste-ikon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 0.75rem;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.kategori-liste-bilgi {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kategori-liste-ad {
  font-weight: 600;
  color: #1f2937;
}
.kategori-liste-sayac {
  font-size: 0.78rem;
  color: #94a3b8;
}

/* --- fiyatlandirma.php: sektör seçici (ikonlu özel dropdown) --- */
.fiyat-sektor-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  color: var(--marka-lacivert);
  box-shadow: 0 0.2rem 0.6rem rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fiyat-sektor-toggle:hover,
.fiyat-sektor-toggle:focus {
  border-color: var(--bs-primary);
  color: var(--marka-lacivert);
}
.fiyat-sektor-toggle::after {
  margin-left: auto;
}
.fiyat-sektor-toggle-ikon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 0.65rem;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.fiyat-sektor-toggle-metin {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiyat-sektor-menu {
  max-height: 320px;
  overflow-y: auto;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.16);
  padding: 0.5rem;
  margin-top: 0.5rem !important;
}
.fiyat-sektor-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-radius: 0.65rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
  font-weight: 500;
  /* Bootstrap'in .dropdown-item varsayılanı metni tek satıra zorluyor (white-space:nowrap) —
     uzun hizmet adı + fiyat birleşince menü genişliğini aşıp kırpılıyordu. */
  white-space: normal;
}
.fiyat-sektor-menu .dropdown-item > span:last-child {
  min-width: 0;
}

/* --- Admin sayfa başlığı (24 sayfada aynı desen): başlık+açıklama solda, aksiyon butonu sağda —
   mobilde alta kayınca sola yaslı kalıyordu, ortalamak daha temiz duruyor. */
@media (max-width: 575.98px) {
  .admin-sayfa-basligi,
  /* Aynı desenin sınıf eklenmemiş ham hali (~113 dosyada kullanılıyor) — tek tek dosya
     değiştirmek yerine ortak Bootstrap sınıf kombinasyonunu doğrudan hedefliyoruz. */
  .admin-body .d-flex.align-items-center.justify-content-between.flex-wrap.mb-3.gap-2 {
    flex-direction: column;
    text-align: center;
  }
  /* Admin panelinde "card-header > card-title" tek başlıklı kart üstleri (43 yerde kullanılan
     ortak desen) mobilde sola yaslı kalıyordu. .card-title'ın kendisi display:inline-flex
     olduğu için (bkz. .admin-icerik .card-header .card-title) içeriğine göre daralıyor —
     text-align:center bu yüzden ELEMANIN KENDİSİNE değil, onu saran BLOK ebeveyne (.card-header)
     uygulanmalı (inline-flex/inline-block kutuları böyle ortalanır). */
  .admin-body .card-header {
    text-align: center;
  }
  /* "Toplam X kayıt/ödeme/firma/personel..." + sayfalama satırı — admin genelinde onlarca
     dosyada tekrar eden ortak desen (mt-3 VE mt-4 varyantları dahil, bilerek o sınıf aranan
     seçimden çıkarıldı ki hepsi tek kuralla kapsansın) — mobilde sola yaslı kalıyordu. */
  .admin-body .d-flex.justify-content-between.align-items-center.flex-wrap.gap-3 {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  /* subscription_plans.php / paket-profil.php: aynı "Toplam X" metni ama sayfalama/flex olmadan
     tek başına bir satır — sadece ortalamak yeterli. */
  .admin-body .card-body > .text-muted.small.mt-3 {
    text-align: center;
  }
  /* .pagination inline-flex olduğu (bkz. .admin-icerik .pagination) için "justify-content-center"
     sınıfı bile hiçbir işe yaramıyordu (içeriğe göre daralan bir kutuda dağıtılacak boş alan yok) —
     inline-flex/inline-block bir kutu, KENDİSİNE değil SARAN BLOK ebeveyne text-align:center
     uygulanarak ortalanır. Tüm admin sayfalarındaki sayfalama bunu kullandığı için tek kural yeter. */
  .admin-body .admin-icerik nav:has(> .pagination) {
    text-align: center;
  }
  .admin-kpi-ozet-satiri .card-body {
    text-align: center;
  }
  .admin-mail-ayarlar-basligi {
    flex-direction: column;
    text-align: center;
  }
  .admin-mail-ayarlar-basligi .d-flex.align-items-center.gap-3 {
    flex-direction: column;
  }
  .admin-kaydet-satiri {
    text-align: center;
    justify-content: center;
  }
  /* Bootstrap'in .modal-footer varsayılanı sağa yaslı (justify-content:flex-end) — admin
     panelindeki TÜM modallarda (dosya sayısına bakmaksızın) mobilde ortalamak için tek kural. */
  .admin-body .modal-footer {
    justify-content: center;
  }
  /* firma-profil.php'deki 7 sekmenin (Personel/Hizmet/Fatura/Paket/Belge/Galeri/Blog) her birinde
     tekrar eden arama kutusu (.admin-tablo-arama, sabit width:220px inline style'lı) mobilde
     sarınca sola yaslı kalıyordu — kendi genişliğini koruyup satırında ortalanması için otomatik
     kenar boşluğu (flex item'larda justify-content'i geçersiz kılar). */
  .admin-tablo-arama {
    margin: 0 auto;
  }
  /* Firmaya Yapılan Ödemeler / Abonelik Geçmişi sekmelerinde arama kutusunun yanında ayrıca bir
     buton/rozet daha var — ikisini BİRLİKTE tek grup olarak ortalamak gerekiyor, üstteki kural
     tek başına arama kutusunu diğer öğeden bağımsız kaydırıp düzeni bozardı. */
  .card-header .d-flex.align-items-center.gap-2.flex-wrap {
    flex-basis: 100%;
    justify-content: center;
  }
  .card-header .d-flex.align-items-center.gap-2.flex-wrap .admin-tablo-arama {
    margin: 0;
  }
}
.fiyat-sektor-menu .dropdown-item:hover {
  background: var(--marka-acik);
}
.fiyat-sektor-menu .dropdown-item.active {
  background: var(--bs-primary);
  color: #fff;
}
.fiyat-sektor-menu .dropdown-item.active .fiyat-sektor-item-ikon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.fiyat-sektor-item-ikon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 0.55rem;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* --- firmalar.php / hizmetler.php: Kategori filtresi (ikonlu özel dropdown) --- */
.firmalar-kategori-secici {
  width: 100%;
}
.firmalar-kategori-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  text-align: left;
  font: inherit;
}
.firmalar-kategori-toggle-metin {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--marka-lacivert);
}
.firmalar-filtre-girdi .firmalar-kategori-ok {
  margin-left: auto;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* --- Firmalar listeleme sayfası: üst bant ve filtre kutusu --- */
.firmalar-ust-bant {
  background: linear-gradient(180deg, var(--marka-acik) 0%, #f8fafc 100%);
  padding: 1.75rem 0;
  border-bottom: 1px solid #e2e8f0;
}
@media (max-width: 991.98px) {
  .firmalar-ust-bant {
    text-align: center;
  }
}

/* includes/ust_banner_kayan.php ortak partial'ı: firmalar.php/hizmetler.php/kategoriler.php'nin üst
   bandı, TAM GENİŞLİK bir foto ızgarası banner'a dönüşür — anasayfadaki .hero-v2 ile aynı mantık:
   sayfanın en üstünde (navbar'ın hemen arkasında) başlar, sağa/sola ekrana tam dayanır. Üst dolgu,
   saydam/fixed navbar'ın (bkz. $heroBantliSayfaMi, header_public.php) içeriğin üzerine binmemesi
   için pay bırakır (blog.php hâlâ sade/eski .firmalar-ust-bant'ı kullanıyor, bu partial'ı kullanmıyor). */
.firmalar-ust-bant-slider {
  position: relative;
  overflow: hidden;
  background: #0f172a;
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 7rem 0 3rem;
  border-bottom: none;
}
@media (max-width: 991.98px) {
  .firmalar-ust-bant-slider {
    min-height: 320px;
    padding: 5.5rem 0 2rem;
    text-align: center;
  }
}
/* İki satır, ters yönlerde sonsuz kayan foto ızgarası (.one-cikan-kaydirici marquee'siyle aynı teknik:
   set ikiye katlanır, %50 kaydırınca sessizce başa sarar — CSS animasyonu, JS gerekmez) */
.firmalar-kayan-galeri {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.firmalar-kayan-satir {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.firmalar-kayan-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
}
.firmalar-kayan-satir-sol .firmalar-kayan-track {
  animation: firmalarKayanSola 38s linear infinite;
}
.firmalar-kayan-satir-sag .firmalar-kayan-track {
  animation: firmalarKayanSaga 38s linear infinite;
}
@keyframes firmalarKayanSola {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes firmalarKayanSaga {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
.firmalar-kayan-kart {
  flex: 0 0 auto;
  height: 150px;
  border-radius: 0.9rem;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .firmalar-kayan-track {
    animation: none;
  }
}
@media (max-width: 991.98px) {
  .firmalar-kayan-kart {
    height: 110px;
  }
}
.firmalar-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.55) 100%);
}
.firmalar-banner-icerik {
  z-index: 2;
  width: 100%;
}
.firmalar-ust-bant-slider .firma-breadcrumb,
.firmalar-ust-bant-slider .firma-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
}
.firmalar-ust-bant-slider .firma-breadcrumb span {
  color: #fff;
}
.firmalar-ust-bant-slider .firma-breadcrumb a:hover {
  color: #fff;
}
.firmalar-ust-bant-slider h3 {
  color: #fff;
}
.firmalar-ust-bant-slider p {
  color: rgba(255, 255, 255, 0.85);
}
.firmalar-filtre-kutu {
  margin-top: -2.25rem;
  position: relative;
  z-index: 2;
  border-radius: 1rem;
}
.firmalar-filtre-pill {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.09);
  padding: 0.5rem;
  margin-top: -2.25rem;
  position: relative;
  z-index: 2;
}
.firmalar-filtre-alan {
  padding: 0.55rem 1.25rem;
  min-width: 0;
  position: relative;
}
.firmalar-filtre-etiket {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94a3b8;
  margin-bottom: 0.2rem;
}
.firmalar-filtre-girdi {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.firmalar-filtre-girdi i {
  color: var(--bs-primary);
  font-size: 0.95rem;
}
.firmalar-filtre-girdi input,
.firmalar-filtre-girdi select {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--marka-lacivert);
}
.firmalar-filtre-ayirici {
  width: 1px;
  align-self: stretch;
  background: #eef1f5;
  margin: 0.5rem 0;
}
.firmalar-filtre-buton {
  border-radius: 1rem;
  padding: 0 1.75rem;
  height: 3rem;
  font-weight: 600;
  white-space: nowrap;
  margin: 0.25rem;
}
@media (max-width: 991.98px) {
  .firmalar-filtre-pill {
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .firmalar-filtre-pill form {
    gap: 0.6rem;
  }
  .firmalar-filtre-alan {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    padding: 0.7rem 1rem;
  }
  .firmalar-filtre-ayirici {
    display: none;
  }
  .firmalar-filtre-buton {
    margin: 0.15rem 0 0;
  }
}

/* --- Firmalar sayfası: grid/liste görünüm değiştirici + liste satırı --- */
.firmalar-gorunum-degistirici {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 0.6rem;
  padding: 0.2rem;
  gap: 0.15rem;
}
.firmalar-gorunum-degistirici a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  border-radius: 0.45rem;
  color: #64748b;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.firmalar-gorunum-degistirici a:hover {
  color: var(--marka-koyu);
}
.firmalar-gorunum-degistirici a.aktif {
  background: #fff;
  color: var(--marka-koyu);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.firmalar-liste {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.firmalar-liste-satiri {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.firmalar-liste-satiri:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
  border-color: #cbd5e1;
}
.firmalar-liste-gorsel {
  width: 84px;
  height: 84px;
  min-width: 84px;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--marka-acik) 0%, #eef7f6 60%, var(--marka-acik) 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: rgba(37, 99, 90, 0.25);
}
.firmalar-liste-satiri .onay-rozeti {
  font-size: 0.72rem;
  padding: 0.25em 0.6em;
}
@media (max-width: 575.98px) {
  .firmalar-liste-satiri {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
  }
  .firmalar-liste-gorsel {
    width: 60px;
    height: 60px;
    min-width: 60px;
    font-size: 1.15rem;
  }
  .firmalar-liste-satiri > .text-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left !important;
    width: 100%;
    margin-left: calc(60px + 0.75rem);
  }
  /* İsim+"Onaylı" rozeti satırı (.flex-grow-1) resmin yanında dar bir alanda olduğu için
     .text-truncate'in kısaltacağı belirgin bir genişlik sınırı yoktu — flex-wrap:wrap'li
     kapsayıcıda genişlik "içeriğe göre" büyüyüp rozeti alta itebiliyordu. */
  .firmalar-liste-satiri > .flex-grow-1 {
    min-width: 0;
    width: calc(100% - 60px - 0.75rem);
  }
}

.filtre-alan {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  padding: 0 0.75rem;
}
.filtre-alan i {
  color: var(--bs-primary);
  font-size: 0.9rem;
}
.filtre-alan .form-control,
.filtre-alan .form-select {
  background: transparent;
  padding-left: 0;
}
.filtre-alan .form-control:focus,
.filtre-alan .form-select:focus {
  background: transparent;
}

/* --- Blog kartları ve yazı sayfası --- */
.blog-karti {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.blog-karti:hover {
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
  transform: translateY(-3px);
}
.blog-karti-kapak {
  height: 170px;
  background: linear-gradient(135deg, var(--marka-acik) 0%, #eef7f6 60%, var(--marka-acik) 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-karti-kapak-ikon {
  font-size: 2rem;
  color: rgba(37, 99, 90, 0.18);
}
.blog-karti-govde {
  padding: 1.1rem 1.1rem 1.25rem;
}
.blog-karti-rozet {
  display: inline-block;
  background: #ffe3d5;
  color: #c2410c;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.7rem;
  border-radius: 0.4rem;
  margin-bottom: 0.85rem;
}
.blog-karti-rozet.rozet-sari    { background: #fef3c7; color: #92620a; }
.blog-karti-rozet.rozet-mavi    { background: #e0e7ff; color: #4338ca; }
.blog-karti-rozet.rozet-seftali { background: #ffe3d5; color: #c2410c; }
.blog-karti-rozet.rozet-yesil   { background: #dcfce7; color: #15803d; }
.blog-karti-rozet.rozet-mor     { background: #f3e8ff; color: #7e22ce; }
.blog-karti-rozet.rozet-turkuaz { background: var(--marka-acik); color: var(--marka-koyu); }
.blog-karti-rozet.rozet-pembe   { background: #fce7f3; color: #be185d; }
.blog-karti-rozet.rozet-gri     { background: #f1f5f9; color: #475569; }
.blog-karti-baslik {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--marka-lacivert);
  margin-bottom: 0.5rem;
}
.blog-karti-ozet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}
.blog-karti-yazar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.1rem;
}
.blog-karti-yazar-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.blog-karti-yazar-ad {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--marka-lacivert);
  line-height: 1.3;
}
.blog-karti-yazar-tarih {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.3;
}

/* --- "Neden Randevu Asistan" tanıtım bölümü (koyu zemin, sağda özellik kartları) --- */
.neden-bolum {
  background: #0f172a;
  border-radius: 1.75rem;
  padding: 3.5rem 2rem;
  position: relative;
  overflow: hidden;
}
.neden-dekor {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.neden-dekor-1 {
  width: 340px;
  height: 340px;
  left: -140px;
  bottom: -160px;
}
.neden-dekor-2 {
  width: 220px;
  height: 220px;
  left: -60px;
  bottom: -100px;
  border-color: rgba(255, 255, 255, 0.06);
}
.neden-rozet {
  display: inline-block;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.4);
  color: var(--bs-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.4rem 1.1rem;
  border-radius: 2rem;
  margin-bottom: 1.1rem;
}
.neden-baslik {
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.neden-baslik span {
  color: var(--bs-primary);
}
.neden-aciklama {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
  max-width: 480px;
  position: relative;
}
.neden-karti {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem 1.35rem 4rem;
  height: 100%;
  position: relative;
}
.neden-karti-ikon {
  font-size: 1.9rem;
  color: var(--bs-primary);
  display: block;
}
.neden-karti-baslik {
  font-weight: 700;
  font-size: 1.05rem;
  color: #000;
  margin: 0.9rem 0 0.5rem;
}
.neden-karti-aciklama {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 0;
}
.neden-karti-ok {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  position: absolute;
  bottom: 1.35rem;
  right: 1.35rem;
}
@media (max-width: 991.98px) {
  .neden-bolum {
    padding: 2.5rem 1.25rem;
  }
  .neden-baslik {
    font-size: 1.6rem;
  }
}

/* --- "Firmalar İçin" tanıtım bölümü (görsel + yüzen kartlar + istatistikler) --- */
.firma-tanitim-gorsel-alan {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
}
.firma-tanitim-gorsel {
  width: 100%;
  height: auto;
  display: block;
}
.firma-tanitim-kart {
  position: absolute;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.12);
  padding: 1rem 1.1rem;
}
.firma-tanitim-kart-ust {
  top: 4%;
  left: -6%;
}
.firma-tanitim-kart-ikon {
  width: 38px;
  height: 38px;
  border-radius: 0.65rem;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.firma-tanitim-kart-deger {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--marka-lacivert);
  line-height: 1.2;
}
.firma-tanitim-kart-etiket {
  font-size: 0.75rem;
  color: #64748b;
}
.firma-tanitim-kart-alt {
  bottom: 6%;
  right: -8%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.firma-tanitim-kart-ikon-yuvarlak {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.firma-tanitim-rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.firma-tanitim-baslik {
  font-weight: 800;
  font-size: 2rem;
  color: var(--marka-lacivert);
  margin-bottom: 1rem;
}
.firma-tanitim-aciklama {
  color: #64748b;
  margin-bottom: 1.75rem;
}
.firma-tanitim-istatistik {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #f8fafc;
  border: 1px solid #eef1f5;
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  height: 100%;
}
.firma-tanitim-istatistik-ikon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.firma-tanitim-istatistik-ikon.bg-1 { background: #e0f2f1; color: #0f766e; }
.firma-tanitim-istatistik-ikon.bg-2 { background: #fef3c7; color: #92620a; }
.firma-tanitim-istatistik-ikon.bg-3 { background: #e0e7ff; color: #4338ca; }
.firma-tanitim-istatistik-ikon.bg-4 { background: #ffe3d5; color: #c2410c; }
@media (max-width: 767.98px) {
  .firma-tanitim-gorsel-alan {
    max-width: 380px;
    margin-bottom: 4rem;
  }
  .firma-tanitim-kart {
    padding: 0.75rem 0.85rem;
  }
  .firma-tanitim-kart-ust { left: 0; }
  .firma-tanitim-kart-alt { right: 0; bottom: -12%; }
  .firma-tanitim-baslik { font-size: 1.6rem; }
  .firma-tanitim-istatistik {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
  }
  .firma-tanitim-cta-satiri {
    text-align: center;
  }
}

.blog-yorum-karti {
  background: #f8fafc;
  border: 1px solid #eef1f5;
  border-left: 3px solid transparent;
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.blog-yorum-karti:hover {
  border-left-color: var(--bs-primary);
  box-shadow: 0 0.4rem 1rem rgba(15, 23, 42, 0.05);
}
.blog-yorum-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--marka-acik) 0%, #d7f0ec 100%);
  color: var(--marka-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
}
.blog-yorum-tarih {
  font-size: 0.76rem;
  color: #94a3b8;
}
.blog-yorum-metin {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.65;
}
.blog-yorum-bos {
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 0.9rem;
  padding: 2.5rem 1rem;
  color: #94a3b8;
}
.blog-yorum-bos i {
  font-size: 1.9rem;
  display: block;
  margin-bottom: 0.6rem;
}
.blog-yorum-form-karti {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 1rem;
  padding: 1.5rem;
}
.blog-yorum-giris-uyari {
  background: var(--marka-acik);
  color: var(--marka-koyu);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
}
.blog-yorum-giris-uyari a {
  font-weight: 600;
  color: var(--marka-koyu);
}

.blog-yazi-kapak-buyuk {
  height: 460px;
  border-radius: 1.25rem;
  background-color: var(--marka-acik);
  background-size: cover;
  background-position: center;
  box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.12);
}
@media (max-width: 767.98px) {
  .blog-yazi-kapak-buyuk {
    height: 240px;
    border-radius: 0.9rem;
  }
}
.blog-yazi-govde {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #334155;
}

.blog-yazi-baslik {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--marka-lacivert);
  margin-bottom: 0.9rem;
}
.blog-yazi-meta i {
  color: var(--bs-primary);
  margin-right: 0.25rem;
}

.blog-paylas-buton {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blog-paylas-buton:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.blog-paylas-buton-kucuk {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}

.blog-sidebar-sabit {
  position: sticky;
  top: 90px;
}
.blog-yazar-karti {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
}
.blog-mini-liste-karti {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
}
.blog-mini-liste-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.blog-mini-liste-kapak {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, var(--marka-acik) 0%, #eef7f6 60%, var(--marka-acik) 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(37, 99, 90, 0.25);
}
.blog-mini-liste-baslik {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--marka-lacivert);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.blog-mini-liste-item:hover .blog-mini-liste-baslik {
  color: var(--bs-primary);
}
.blog-mini-liste-tarih {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}

.blog-yazar-logo {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--marka-acik);
}

/* --- Firma kartları (listeleme) --- */
.firma-karti {
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  height: 100%;
}
.firma-karti:hover {
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.12);
  transform: translateY(-3px);
}
.firma-karti-kapak {
  position: relative;
  height: 130px;
  background: linear-gradient(135deg, var(--marka-acik) 0%, #eef7f6 60%, var(--marka-acik) 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.firma-karti-kapak-ikon {
  font-size: 2.75rem;
  color: rgba(37, 99, 90, 0.16);
}
.firma-karti-rozet {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}
.firma-karti-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  margin-top: -32px;
  background: #fff;
  /* .firma-karti-kapak position:relative taşıdığı için (rozet konumlaması için), DOM'da ondan
     SONRA gelen ama konumlandırılmamış (static) bu logo, negatif margin ile üzerine taştığında
     kapağın ARKASINDA kalıyordu (konumlandırılmış elemanlar z-index belirtilmese bile statik
     elemanların üzerinde durur). Logoya kendi konumlandırmasını vermek bunu düzeltir. */
  position: relative;
  z-index: 1;
}
.firma-karti-logo-yer-tutucu {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marka-koyu);
  font-size: 1.3rem;
}
.badge-marka {
  background-color: var(--marka-acik);
  color: var(--marka-koyu);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.68rem;
  padding: 0.4em 0.75em;
}

/* --- Sponsorlu (reklamlı) firma kartları --- */
.firmalar-sponsorlu-baslik {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #b45309;
  margin-bottom: 0.9rem;
}
.firma-karti-sponsorlu {
  border: 1px solid #fbbf24;
  box-shadow: 0 0.25rem 0.85rem rgba(180, 83, 9, 0.08);
  position: relative;
}
.sponsorlu-rozet {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 0.4rem;
}

/* --- Reklam kampanyası: hedef il haritası --- */
.reklam-harita-sarici {
  max-width: 720px;
  margin: 0 auto 0.75rem;
}
.reklam-harita-sarici svg {
  width: 100%;
  height: auto;
  display: block;
}
.reklam-harita-sarici svg g[data-plakakodu] path {
  fill: #cbd5e1;
  stroke: #fff;
  stroke-width: 0.6;
  cursor: pointer;
  transition: fill 0.12s ease;
}
.reklam-harita-sarici svg g[data-plakakodu]:hover path {
  fill: var(--marka-acik);
}
.reklam-harita-sarici svg g[data-plakakodu].reklam-il-secili path {
  fill: var(--marka-koyu);
}

/* --- Firma profil sayfası --- */
.firma-breadcrumb {
  font-size: 0.85rem;
  color: #94a3b8;
}
.firma-breadcrumb a {
  color: #64748b;
  text-decoration: none;
}
.firma-breadcrumb a:hover {
  color: var(--marka-koyu);
}
.firma-breadcrumb i {
  font-size: 0.65rem;
  margin: 0 0.35rem;
  vertical-align: middle;
}
.firma-breadcrumb span {
  color: #1e293b;
  font-weight: 500;
}

.firma-profil-ust {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.05);
}

.profil-kapak {
  height: 220px;
  background-color: var(--marka-acik);
  background-size: cover;
  background-position: center;
  border-radius: 0.75rem;
  margin: -1rem -1rem 0;
  width: calc(100% + 2rem);
}
@media (min-width: 768px) {
  .profil-kapak {
    margin: -1rem -1rem 0;
    width: calc(100% + 2rem);
  }
}
.profil-logo {
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  margin-top: -48px;
  background: #fff;
  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.12);
}

.onay-rozeti {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.acik-durum-rozeti {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.acik-durum-rozeti i {
  font-size: 0.5rem;
}
.acik-durum-rozeti.acik {
  background: #dcfce7;
  color: #15803d;
}
.acik-durum-rozeti.kapali {
  background: #fee2e2;
  color: #b91c1c;
}

.firma-profil-buton-satiri {
  display: flex;
  flex-wrap: wrap;
}

.firma-istatistik-kutu {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.85rem 0.5rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.firma-istatistik-kutu .deger {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--marka-lacivert);
}
@media (max-width: 575.98px) {
  .firma-istatistik-kutu .firma-istatistik-tarih {
    font-size: 0.85rem;
  }
}
.firma-istatistik-kutu .etiket {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* --- Anasayfa güven şeridi: hero'nun alt kenarına binen "yüzen" kart --- */
.guven-seridi-yuzen {
  position: relative;
  z-index: 6;
  margin-top: -3.25rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.15);
  padding: 1.5rem 1rem;
}
.guven-ogesi {
  position: relative;
  padding: 0.25rem 0.5rem;
}
.guven-ogesi::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: #e2e8f0;
}
.guven-ogesi:last-child::after {
  display: none;
}
.guven-ogesi i {
  color: var(--bs-primary);
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
  display: inline-block;
}
.guven-ogesi .deger {
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--marka-lacivert);
  line-height: 1.2;
}
.guven-ogesi .etiket {
  font-size: 0.82rem;
  color: #64748b;
}

@media (max-width: 991.98px) {
  .guven-seridi-yuzen {
    margin-top: 1.5rem;
    padding: 1.1rem 0.35rem;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .guven-ogesi {
    padding: 0.25rem 0.2rem;
  }
  .guven-ogesi i {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--marka-acik);
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
  }
  .guven-ogesi .deger {
    font-size: 1.1rem;
  }
  .guven-ogesi .etiket {
    font-size: 0.66rem;
    line-height: 1.2;
  }
}

.firma-sekme {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem;
  background: #f1f5f9;
  border: 0;
  border-radius: 0.85rem;
  padding: 0.35rem;
  margin-bottom: 1.1rem;
}
.firma-sekme .nav-item {
  display: flex;
}
.firma-sekme .nav-link {
  display: flex;
  align-items: center;
  border: none;
  border-radius: 0.6rem;
  color: #64748b;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.firma-sekme .nav-link i {
  margin-right: 0.4rem;
  font-size: 0.85rem;
}
.firma-sekme .nav-link:hover:not(.active) {
  color: var(--marka-koyu);
  background: rgba(255, 255, 255, 0.7);
}
.firma-sekme .nav-link.active {
  color: #fff;
  background: var(--bs-primary);
  box-shadow: 0 0.35rem 0.85rem rgba(var(--bs-primary-rgb), 0.32);
}
.firma-sekme .nav-link .badge {
  font-weight: 600;
}
.firma-sekme .nav-link.active .badge {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}
@media (min-width: 992px) {
  .firma-sekme {
    justify-content: center;
  }
}
.firma-sekme-icerik {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.04);
}

/* --- Firma profili: mobil özel düzen (kapak/logo küçültme, kaydırmalı sekmeler, buton ızgarası) --- */
@media (max-width: 767.98px) {
  .firma-profil-ust {
    padding: 0.75rem 0.75rem 1rem;
  }
  .profil-kapak {
    height: 130px;
  }
  .profil-logo {
    width: 72px;
    height: 72px;
    min-width: 72px;
    margin-top: -36px;
    border-width: 3px;
  }
  /* Firma adı, rozetler, kategori/puan/konum/telefon satırı mobilde sola yaslı kalıyordu —
     logo altında ortalanmış, kart gibi bir görünüm için ortalıyoruz. */
  .firma-profil-ust .d-flex.align-items-end {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
  }
  .firma-profil-ust .d-flex.align-items-center.gap-2,
  .firma-profil-ust .firma-profil-bilgi-satiri {
    justify-content: center;
  }
  .firma-profil-ust .d-flex.flex-wrap.align-items-center.justify-content-between {
    justify-content: center !important;
  }
  .firma-profil-buton-satiri {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .firma-profil-buton-satiri .navbar-randevu-buton {
    width: 100%;
    margin: 0;
    justify-content: center;
  }
  .firma-profil-buton-satiri .navbar-randevu-buton:nth-child(3) {
    grid-column: 1 / -1;
  }
  .firma-sekme {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    width: calc(100% + 1.5rem);
    border-radius: 0;
    background: transparent;
    padding: 0.35rem 0.75rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
  }
  .firma-sekme::-webkit-scrollbar {
    height: 0;
  }
  .firma-sekme .nav-item {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .firma-sekme .nav-link {
    white-space: nowrap;
    padding: 0.6rem 0.9rem;
    font-size: 0.84rem;
    background: #f1f5f9;
  }
  .firma-sekme .nav-link.active {
    background: var(--bs-primary);
  }
  .firma-sekme-icerik {
    padding: 1.1rem 0.9rem;
  }
}

/* --- Personel profili: mobil özel düzen (kimlik kartını ortala, Randevu Al'ı öne al) --- */
@media (max-width: 767.98px) {
  .personel-kimlik-karti {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1.25rem;
    gap: 0.9rem;
  }
  .personel-detay-foto {
    width: 100px;
    height: 100px;
    min-width: 100px;
  }
  .personel-kimlik-etiketler {
    justify-content: center;
  }
}

.firma-iletisim-ikon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
}
.firma-iletisim-ikon-sosyal {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
li:hover > .firma-iletisim-ikon-sosyal {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.hizmet-satiri {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hizmet-satiri:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 0.4rem 1rem rgba(var(--bs-primary-rgb), 0.1);
}
.hizmet-ikon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--marka-acik), #ffffff);
  color: var(--marka-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: inset 0 0 0 1px rgba(37, 125, 115, 0.12);
}
.hizmet-fiyat {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--marka-koyu);
  white-space: nowrap;
}
.yakin-firmalar-baslangic {
  background: #f8fafc;
  border: 1px dashed #dbe3ea;
  border-radius: 1rem;
}
.hizmet-karti {
  position: relative;
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 1rem;
  padding: 1.25rem;
  height: 100%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.hizmet-karti::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--marka-koyu), var(--bs-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.hizmet-karti:hover {
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.1);
  transform: translateY(-4px);
  border-color: #dde4ea;
}
.hizmet-karti:hover::before {
  transform: scaleX(1);
}
.hizmet-karti-baslik {
  font-weight: 700;
  font-size: 1.02rem;
  color: #0f172a;
  line-height: 1.4;
}
.hizmet-karti-firma {
  font-size: 0.82rem;
  color: #64748b;
}
.hizmet-karti-firma i {
  color: var(--marka-koyu);
  margin-right: 0.35rem;
}
.hizmet-karti-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed #e7ebf0;
}

.min-w-0 {
  min-width: 0;
}
.personel-karti {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  height: 100%;
}
.personel-foto {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 1.1rem;
}
.personel-karti:hover {
  border-color: var(--bs-primary);
}
.personel-detay-foto {
  width: 120px;
  height: 120px;
  min-width: 120px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 2.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.1);
}
.personel-kimlik-karti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  background: #f8fafc;
  border: 1px solid #eef1f5;
  border-radius: 1rem;
  padding: 1.5rem;
}
.personel-unvan {
  color: var(--bs-primary);
  font-weight: 600;
  font-size: 0.95rem;
}
.personel-bilgi-blok {
  margin-bottom: 1.75rem;
}
.personel-bilgi-baslik {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--marka-lacivert);
  margin-bottom: 0.9rem;
}
.personel-bilgi-baslik i {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 0.6rem;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.personel-bilgi-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}
.personel-bilgi-liste li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.6rem;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.5;
}
.personel-bilgi-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bs-primary);
}
.personel-bilgi-liste li:last-child {
  margin-bottom: 0;
}
.personel-belge-karti {
  border: 1px solid #eef1f5;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.personel-belge-karti:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}
.personel-belge-gorsel {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: #f8fafc;
}
.personel-belge-baslik {
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--marka-lacivert);
}
.firma-galeri-foto {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 0.65rem;
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.firma-galeri-foto:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}
.firma-harita-sarici {
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid #eef1f5;
}
.firma-harita-sarici iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

.firma-iletisim-blok {
  background: #f8fafc;
  border: 1px solid #eef1f5;
  border-radius: 0.9rem;
  padding: 1.25rem 1.35rem;
}
.firma-iletisim-blok-baslik {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 1rem;
}
.firma-iletisim-blok-baslik i {
  color: var(--marka-koyu);
  font-size: 0.85rem;
}
.firma-calisma-saatleri-liste li {
  padding: 0.55rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.92rem;
  color: #475569;
}
.firma-calisma-saatleri-liste li.bugun {
  background: var(--marka-acik);
  color: var(--marka-koyu);
  font-weight: 700;
}
.firma-iletisim-harita-blok {
  display: flex;
  flex-direction: column;
}
.firma-iletisim-harita-blok .firma-harita-sarici {
  flex: 1;
  min-height: 280px;
}
.firma-iletisim-harita-blok .firma-harita-sarici iframe {
  height: 100%;
  min-height: 280px;
}

@media (max-width: 991.98px) {
  .firma-iletisim-blok {
    padding: 1.1rem;
  }
  .firma-iletisim-harita-blok .firma-harita-sarici iframe {
    height: 240px;
  }
}

.gorusme-cerceve-sarici {
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid #eef1f5;
  background: #000;
}
.gorusme-cerceve {
  width: 100%;
  height: calc(100vh - 190px);
  min-height: 420px;
  border: 0;
  display: block;
}
/* --- Anasayfa SSS (Sık Sorulan Sorular) akordiyonu --- */
.sss-bolum {
  background: #f8fafc;
}
.sss-akordiyon .accordion-item {
  border: 1px solid #eef1f5 !important;
  border-radius: 1rem !important;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.05);
}
.sss-akordiyon .accordion-item:last-child {
  margin-bottom: 0;
}
.sss-akordiyon .accordion-button {
  font-weight: 600;
  color: var(--marka-lacivert);
  padding: 1.15rem 1.5rem;
}
.sss-akordiyon .accordion-body {
  padding: 0.25rem 1.5rem 1.35rem;
}
.sss-akordiyon .accordion-button:not(.collapsed) {
  background: var(--marka-acik);
  color: var(--marka-koyu);
  box-shadow: none;
}
.sss-akordiyon .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

/* --- nasil-kullanilir.php: kullanıcının referans aldığı "Quiety" SaaS şablonundaki gibi koyu-zeminli
     karşıtlık bantları (istatistik şeridi + kapanış CTA'sı). Sitenin geri kalanı tamamen açık zeminli
     olduğundan yeni bir renk eklenmedi, mevcut --marka-lacivert marka rengiyle tam-genişlik (full-bleed)
     bant oluşturuluyor. html/body zaten overflow-x:hidden olduğu için negatif kenar boşluğu tekniği
     yatay kaydırma çubuğu oluşturmaz. */
.tam-genislik-bant {
  background: var(--marka-lacivert);
  color: #fff;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 3rem 1rem;
}
@media (max-width: 991.98px) {
  /* kurumsal.php'deki mozaik bölümünde doğrulanan gerçek hata ile aynı desen: bu sınıf negatif
     kenar boşluğuyla tam genişliğe taşıyor ama kendi overflow-x:hidden'ı yoktu — mobil
     tarayıcılar bazı içerik kombinasyonlarında sayfanın "layout viewport"unu gerçekte olduğundan
     geniş hesaplayıp tüm sayfayı otomatik uzaklaştırıyordu (dokunarak sağa kaydırılabiliyordu).
     Bu, html{overflow-x:hidden} gibi genel bir kuralla ÇÖZÜLMÜYOR çünkü o karar tarayıcının
     viewport'u BELİRLEME aşamasında, herhangi bir CSS taşma kuralı uygulanmadan önce veriliyor.
     SADECE mobilde (≤991.98px) uygulanır: .panel-vitrin-yuzen gibi köşelere taşan "yüzen" kartlar
     da tam bu genişlikte gizlendiği (display:none, bkz. min-width:992px kuralı) için masaüstünde
     bu kısıtlamaya hiç gerek yok — orada uygulansaydı o kartları kesip görünmez yapardı. */
  .tam-genislik-bant {
    overflow-x: hidden;
  }
}
.istatistik-bant-oge {
  text-align: center;
  padding: 0.5rem 1rem;
}
.istatistik-bant-ikon {
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  margin: 0 auto 0.6rem;
}
.istatistik-bant-deger {
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.istatistik-bant-etiket {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.25rem;
}
@media (max-width: 767.98px) {
  .istatistik-bant-oge {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .istatistik-bant-oge:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
  }
}

/* nasil-kullanilir.php istatistik şeridi kullanıcı isteğiyle koyu bandı kaldırıp açık zemine döndü —
   .tam-genislik-bant'ın kendisi (panel vitrini + kapanış CTA bandı hâlâ kullanıyor) değiştirilmedi. */
.istatistik-bant-acik {
  background: transparent;
  padding: 2rem 1rem;
}
.istatistik-bant-acik .istatistik-bant-ikon {
  background: var(--marka-acik);
  color: var(--marka-koyu);
}
.istatistik-bant-acik .istatistik-bant-deger {
  color: var(--marka-lacivert);
}
.istatistik-bant-acik .istatistik-bant-etiket {
  color: #64748b;
}
@media (max-width: 767.98px) {
  .istatistik-bant-acik .istatistik-bant-oge {
    border-bottom-color: #e5e9f0;
  }
}

.kapanis-cta-bant {
  text-align: center;
  padding: 3.5rem 1rem;
}
.kapanis-cta-bant h2 {
  color: #fff;
}
.kapanis-cta-bant p {
  color: rgba(255, 255, 255, 0.7);
}

/* nasil-kullanilir.php: "Platform Özellikleri" / "Modüller" — kart ızgarası yerine profesyonel,
   kurumsal spec-sheet görünümlü tablo (başlık satırı hafif zeminli, ikon rozetli ilk sütun). */
.ozellik-tablosu thead th {
  background: var(--marka-acik);
  color: var(--marka-koyu);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  border: none;
  padding: 0.9rem 1.25rem;
}
.ozellik-tablosu tbody td {
  padding: 1rem 1.25rem;
  border-top: 1px solid #f1f5f9;
  border-bottom: none;
  vertical-align: middle;
}
.ozellik-tablosu tbody tr:first-child td {
  border-top: none;
}
.ozellik-tablosu-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 0.5rem;
  background: var(--marka-acik);
  color: var(--bs-primary);
  font-size: 0.85rem;
  margin-right: 0.65rem;
}

/* --- nasil-kullanilir.php: Firmalar İçin / Müşteriler İçin sekme geçişi — sayfanın geri kalanı
   Bootstrap pill-tab mekanizmasıyla bu iki sekmeden birine ayrılır. */
.nk-sekme-gecis {
  gap: 0.75rem;
}
.nk-sekme-gecis .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: 50rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--marka-lacivert);
  background: #fff;
  border: 1px solid #e5e9f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: all 0.15s ease;
}
.nk-sekme-gecis .nav-link:hover {
  border-color: var(--bs-primary);
}
.nk-sekme-gecis .nav-link.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-primary-rgb), 0.3);
}
@media (max-width: 575.98px) {
  .nk-sekme-gecis {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .nk-sekme-gecis .nav-link {
    white-space: nowrap;
  }
}

/* --- nasil-kullanilir.php: "Panelinizin İçi Böyle Görünür" bölümü — kullanıcının referans aldığı
   örnek dashboard görselindeki gibi, koyu zemin üzerinde bir ana panel kartı + iki köşeye taşan yüzen
   widget kartından oluşan kompozisyon. Yalnızca bu sayfaya özel yeni sınıflar; gerçek panelde
   kullanılan .admin-kpi-karti/.admin-mini-liste/.panel-onizleme-* sınıflarının kendisine dokunulmadı,
   sadece üstüne eklendi. */
.panel-vitrin-bant {
  background: transparent;
  padding: 4.5rem 1rem 5.5rem;
}
.panel-vitrin-sahne {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}
/* sayfanın en üstündeki büyük vitrin — aynı bileşenler, sadece daha geniş/yüksek. Koyu bant zemini
   kaldırılıp negatif üst boşlukla üst banner'ın (.firmalar-ust-bant-slider) üzerine taşırıldı —
   firmalar.php'deki .firmalar-filtre-kutu ile AYNI "banner üzerine taşan kutu" tekniği. */
.tam-genislik-bant.panel-vitrin-bant-buyuk {
  background: transparent;
  position: relative;
  z-index: 2;
  margin-top: -4.5rem;
  padding-top: 0;
  padding-bottom: 1.5rem;
}
@media (max-width: 767.98px) {
  .tam-genislik-bant.panel-vitrin-bant-buyuk {
    margin-top: -2.5rem;
    padding-bottom: 1rem;
  }
}
.panel-vitrin-sahne-buyuk {
  max-width: 1140px;
}
.panel-onizleme-govde-buyuk {
  height: 680px;
}
@media (max-width: 767.98px) {
  .panel-onizleme-govde-buyuk {
    height: 540px;
  }
}
.panel-vitrin-ustbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.panel-vitrin-arama {
  align-items: center;
  gap: 0.5rem;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  color: #94a3b8;
  font-size: 0.8rem;
  min-width: 150px;
}
.panel-vitrin-ikon-buton {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.panel-vitrin-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.panel-vitrin-kpi-vurgu {
  background: linear-gradient(135deg, var(--bs-primary) 0%, var(--marka-koyu) 100%) !important;
  border: none !important;
}
.panel-vitrin-kpi-vurgu .admin-kpi-deger,
.panel-vitrin-kpi-vurgu .admin-kpi-etiket {
  color: #fff !important;
}
.panel-vitrin-kpi-vurgu .admin-kpi-ikon {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* yüzen (floating) widget kartları — sadece geniş ekranlarda gösterilir */
.panel-vitrin-yuzen {
  display: none;
}
@media (min-width: 992px) {
  .panel-vitrin-yuzen {
    display: block;
    position: absolute;
    z-index: 3;
    background: #fff;
    border-radius: 1.1rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
    padding: 1rem 1.1rem;
    width: 200px;
  }
  .panel-vitrin-yuzen-sol {
    top: 40px;
    left: -28px;
    background: var(--marka-lacivert);
    color: #fff;
    text-align: center;
  }
  .panel-vitrin-yuzen-sag {
    bottom: 24px;
    right: -28px;
  }
}
.panel-vitrin-yuzen-baslik {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}
.panel-vitrin-yuzen-sol .panel-vitrin-yuzen-baslik {
  color: rgba(255, 255, 255, 0.7);
}

.panel-vitrin-halka {
  --yuzde: 75;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(#22c55e calc(var(--yuzde) * 1%), rgba(255, 255, 255, 0.15) 0);
  position: relative;
}
.panel-vitrin-halka::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--marka-lacivert);
}
.panel-vitrin-halka-deger {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: 1.05rem;
}
.panel-vitrin-yuzen-alt {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
}
.panel-vitrin-nokta {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.25rem;
}

.panel-vitrin-secenek {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.65rem;
  margin-bottom: 0.3rem;
}
.panel-vitrin-secenek.aktif {
  background: var(--marka-acik);
}
.panel-vitrin-secenek-ikon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 0.6rem;
  background: #f1f5f9;
  color: var(--marka-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
}
.panel-vitrin-secenek.aktif .panel-vitrin-secenek-ikon {
  background: var(--bs-primary);
  color: #fff;
}
.panel-vitrin-secenek-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e2e8f0;
}

/* --- nasil-kullanilir.php: Quiety şablonundaki "Browse our world class features" tarzı resim/metin
   dönüşümlü öne çıkan özellik blokları. Gerçek ürün ekran görüntüsü kullanılmadığından, marka
   renkleriyle inşa edilmiş küçük panel taklidi (.ozellik-blok-mockup) + köşeye taşan rozet kartı
   (.panel-vitrin-yuzen ile aynı fikir, burada tek kart olduğu için ayrı/basit bir sınıf). */
.ozellik-blok-gorsel {
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  /* Köşe rozeti (.ozellik-blok-rozet) mockup ile birlikte bazı mobil tarayıcılarda sayfayı yatay
     taşırıp otomatik uzaklaştırmaya (zoom) yol açıyordu (tam kaynağı belirsiz, muhtemelen rozetin
     kutunun dışına taşan negatif offsetiyle ilgili bir etkileşim) — kesin/garantili çözüm: bu
     kutu artık kendi taşmasını fiziksel olarak keser. */
  overflow: hidden;
}
.ozellik-blok-gorsel-1 { background: var(--marka-acik); }
.ozellik-blok-gorsel-2 { background: #fff4e5; }
.ozellik-blok-gorsel-3 { background: #e8edff; }

.ozellik-blok-mockup {
  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.15);
  padding: 1.25rem;
  width: 100%;
  max-width: 320px;
  /* "Aktif Modülleriniz" mockup'ı içine iç içe bir Bootstrap .row (negatif kenar boşluklu)
     yerleştiriyor; normalde bunu dengeleyen bir .container'ın dolgusu burada yok, bu yüzden
     satır kutunun kendisinden taşıp mobil tarayıcıda sayfayı yatay uzaklaştırabiliyordu. */
  overflow: hidden;
}
.ozellik-blok-rozet {
  position: absolute;
  bottom: 16px;
  right: 8%;
  max-width: min(200px, calc(100% - 1rem));
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.18);
  padding: 0.7rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
}
.ozellik-blok-rozet-ikon {
  width: 36px;
  height: 36px;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.ozellik-cubuk {
  flex: 1;
  border-radius: 0.3rem 0.3rem 0 0;
  min-width: 0;
}
.ozellik-modul-chip {
  aspect-ratio: 1;
  border-radius: 0.75rem;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
/* .ozellik-blok-mockup içine iç içe Bootstrap .row/.col-4 yerleştirilmişti — negatif kenar
   boşluğunu dengeleyecek bir .container olmadığı için bazı mobil tarayıcılarda kutunun kendisinden
   taşıp sayfayı otomatik uzaklaştırıyordu (overflow:hidden bile engelleyemedi, çünkü tarayıcı
   viewport genişliğini kırpmadan ÖNCE hesaplıyor). Bootstrap grid'i tamamen bypass eden sade bir
   CSS grid ile değiştirildi. */
.ozellik-modul-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.ozellik-liste-iki-sutun {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.25rem;
  margin-top: 1.5rem;
}
.ozellik-liste-ikon {
  width: 46px;
  height: 46px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}
@media (max-width: 575.98px) {
  .ozellik-liste-iki-sutun {
    grid-template-columns: 1fr;
  }
}
.ozellik-blok-satiri {
  margin-bottom: 7rem;
}
.ozellik-blok-satiri-son {
  margin-bottom: 8rem;
}
@media (max-width: 767.98px) {
  .ozellik-blok-satiri {
    margin-bottom: 4.5rem;
  }
  .ozellik-blok-satiri-son {
    margin-bottom: 5rem;
  }
}

/* --- nasil-kullanilir.php: Quiety şablonunun (index-3.html) ".two-bg-dark-light" bölümü — sol yarı
   koyu / sağ yarı açık sabit (hard-edge) zemin bölünmesi, sol tarafta yüzen mini dashboard mockup'ı,
   sağ tarafta başlık + dikey ikon listesi. .ozellik-blok-mockup/.ozellik-liste-ikon bileşenleri (daha
   önce eklenen resim/metin bloklarından) burada da yeniden kullanılıyor. */
.tam-genislik-bant.ozellik-bolme-bant {
  background: linear-gradient(90deg, var(--marka-lacivert) 42%, #f5f7fa 42%);
  padding: 5rem 1rem;
}
@media (max-width: 991.98px) {
  .tam-genislik-bant.ozellik-bolme-bant {
    background: #f5f7fa;
    padding: 3rem 1rem;
  }
}
/* .tam-genislik-bant tabanı color:#fff atıyor (koyu bantlar için) — bu bölümün sağ yarısı açık zeminli
   olduğundan metin rengi burada açıkça koyuya çevriliyor. */
.ozellik-bolme-metin h2,
.ozellik-bolme-metin h3 {
  color: var(--marka-lacivert);
}
.ozellik-bolme-metin p {
  color: #64748b;
}
.ozellik-mini-kpi {
  background: #f8fafc;
  border-radius: 0.65rem;
  padding: 0.6rem 0.4rem;
  text-align: center;
}
.ozellik-mini-kpi-vurgu {
  background: var(--marka-acik);
}
.ozellik-mini-kpi-deger {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--marka-lacivert);
  white-space: nowrap;
}
.ozellik-mini-kpi-etiket {
  font-size: 0.66rem;
  color: #94a3b8;
}
.ozellik-mini-svg {
  width: 100%;
  height: 70px;
  display: block;
}
.ozellik-bolme-liste .ozellik-liste-ikon {
  margin-bottom: 0;
  margin-right: 1rem;
  flex-shrink: 0;
}

/* --- nasil-kullanilir.php: ".ozellik-bolme-bant" içindeki küçültülmüş dashboard mockup'ı — gerçek
   .panel-onizleme-cerceve bileşeninin daha dar bir sürümü (ikon-only kenar çubuğu + 2x2 KPI + mini
   grafik + kısa liste). Bootstrap kırılma noktaları VIEWPORT genişliğine göre çalıştığından (bileşenin
   kendi dar genişliğine göre değil), burada col-lg-3/col-lg-8 gibi sınıflar KULLANILMADI — sabit col-6
   ile her ekranda tutarlı 2x2/tek sütun düzen sağlanıyor. */
.panel-onizleme-govde-mini {
  display: flex;
  height: 420px;
}
.panel-onizleme-sidebar-mini {
  width: 58px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 0;
  gap: 0.4rem;
  overflow: hidden;
}
.admin-sidebar-link-mini {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.82rem;
}
.admin-sidebar-link-mini.active {
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
}
.panel-onizleme-icerik-mini {
  flex-grow: 1;
  min-width: 0;
  padding: 1rem 1.1rem;
  background: #f8fafc;
  overflow: hidden;
}
.panel-onizleme-kpi-mini .admin-kpi-karti .card-body {
  padding: 0.55rem 0.65rem;
  gap: 0.5rem;
}
.panel-onizleme-kpi-mini .admin-kpi-ikon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 0.75rem;
  border-radius: 0.55rem;
}
.panel-onizleme-kpi-mini .admin-kpi-deger {
  font-size: 0.86rem;
}
.panel-onizleme-kpi-mini .admin-kpi-etiket {
  font-size: 0.62rem;
}
@media (max-width: 767.98px) {
  .panel-onizleme-govde-mini {
    height: 360px;
  }
}

/* --- nasil-kullanilir.php: Apple.com "Neden Apple'dan satın almalısınız" bölümünün karşılığı —
   sol üstte iki satırlık başlık + sağda "Hemen Başlayın" linki, altında 4 kartlık yatay kaydırmalı
   satır (masaüstünde 4'ü de sığar), her kartın altında ÖRNEK/yer tutucu görsel alanı (kullanıcı daha
   sonra kendi görseliyle değiştirecek) + köşede dekoratif "+" rozeti. */
.nedenler-baslik-satir {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.nedenler-baslik {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--marka-lacivert);
  line-height: 1.25;
  margin-bottom: 0;
}
.nedenler-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bs-primary);
  text-decoration: none;
  white-space: nowrap;
}
.nedenler-link:hover {
  color: var(--marka-koyu);
  text-decoration: underline;
}
.nedenler-satir {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.nedenler-satir::-webkit-scrollbar {
  display: none;
}
.nedenler-kart {
  position: relative;
  flex: 1 1 260px;
  min-width: 240px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nedenler-kart-ust {
  padding: 1.25rem 1.25rem 0;
}
.nedenler-etiket {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.5rem;
}
.nedenler-kart-baslik {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--marka-lacivert);
  margin-bottom: 0.5rem;
}
.nedenler-kart-aciklama {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.45;
}
.nedenler-gorsel {
  position: relative;
  margin-top: auto;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  color: var(--bs-primary);
  background: repeating-linear-gradient(135deg, var(--marka-acik), var(--marka-acik) 10px, #fff 10px, #fff 20px);
}
.nedenler-kose-buton {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.nedenler-ok-satir {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
.nedenler-ok {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e9f0;
  color: var(--marka-lacivert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nedenler-ok:hover {
  background: var(--marka-acik);
}
@media (max-width: 767.98px) {
  .nedenler-baslik {
    font-size: 1.4rem;
  }
}

/* --- Firma profili: Hizmetler akordiyonu --- */
.hizmet-akordiyon .accordion-item {
  border: 1px solid #eef1f5 !important;
  border-radius: 0.75rem !important;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.hizmet-akordiyon .accordion-item:last-child {
  margin-bottom: 0;
}
.hizmet-akordiyon .accordion-button {
  color: var(--marka-lacivert);
  padding: 0.85rem 1.1rem;
}
.hizmet-akordiyon .accordion-button:not(.collapsed) {
  background: var(--marka-acik);
  color: var(--marka-koyu);
  box-shadow: none;
}
.hizmet-akordiyon .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}
.hizmet-akordiyon .accordion-body {
  padding: 0.9rem 1.1rem 1.1rem 3.6rem;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* --- Sözleşme görüntüleme sayfası --- */
.sozlesme-icerik {
  line-height: 1.9;
  color: #334155;
  font-size: 0.98rem;
}

/* --- Müşteri hesap sayfaları (Randevularım / Profilim vb.) --- */
.musteri-hesap-avatar {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
}
.musteri-hesap-yan-panel {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  padding: 1.25rem;
  position: sticky;
  top: 1.5rem;
}
.musteri-hesap-menu {
  gap: 0.3rem;
}
.musteri-hesap-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #475569;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.musteri-hesap-menu .nav-link i {
  width: 1.1rem;
  text-align: center;
  color: #94a3b8;
}
.musteri-hesap-menu .nav-link:hover {
  background: #f8fafc;
  color: var(--marka-koyu);
}
.musteri-hesap-menu .nav-link.active {
  background: var(--marka-acik);
  color: var(--marka-koyu);
}
.musteri-hesap-menu .nav-link.active i {
  color: var(--marka-koyu);
}

.musteri-randevu-karti {
  border-radius: 1rem;
  overflow: hidden;
}
.musteri-randevu-karti .card-header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid #eef2f6;
}
.musteri-randevu-karti .card-title {
  font-weight: 700;
  font-size: 1rem;
}
@media (max-width: 575.98px) {
  /* Dar ekranda başlığın altına kayan arama formu, kapsayıcının "justify-content-between"i
     yüzünden sola yaslı kalıyordu (tek başına kaldığı satırda dağıtılacak başka öğe yok) —
     formu satırın tam genişliğine yayıp kendi içeriğini ortalamak bunu düzeltir. */
  .harcama-arama-formu {
    flex-basis: 100%;
    justify-content: center;
  }
  .musteri-randevu-karti .card-header .card-title {
    flex-basis: 100%;
    text-align: center;
  }
  .harcama-toplam-satiri {
    justify-content: center;
    text-align: center;
  }
  .musteri-paket-satiri {
    text-align: center;
  }
  .musteri-paket-satiri .d-flex {
    justify-content: center;
    flex-direction: column;
    align-items: center !important;
  }
  /* Takip edilen firmalar mobilde ince bir üst çizgiyle ayrılıyordu, hangi bilginin hangi firmaya
     ait olduğu net değildi — her firmayı kendi kutusuna (kenarlık + yuvarlatılmış köşe + boşluk)
     ayırmak karışıklığı giderir. */
  .musteri-takip-satiri {
    border-top: none !important;
    border: 1px solid #eef2f6;
    border-radius: 0.85rem;
    padding: 1rem !important;
    margin-bottom: 0.85rem;
  }
  .musteri-takip-satiri:last-child {
    margin-bottom: 0;
  }
  .musteri-takip-satiri .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.6rem !important;
  }
  .musteri-takip-satiri .ms-auto {
    margin-left: 0 !important;
  }
}

/* --- admin/besin-yonetimi.php: kategori seçimi + arama kutusu, sabit piksel genişlikleriyle
   (200px + 220px = 420px) mobil ekranda kartın dışına taşıp kırpılıyordu. */
.besin-arama-formu #besinKategoriSelect {
  width: 200px;
}
.besin-arama-formu #besinAramaInput {
  width: 220px;
}
@media (max-width: 575.98px) {
  .besin-arama-formu {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
  }
  .besin-arama-formu #besinKategoriSelect,
  .besin-arama-formu #besinAramaInput {
    width: 100%;
  }
}
.musteri-randevu-sayac {
  background: var(--marka-acik);
  color: var(--marka-koyu);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.45em 0.8em;
  border-radius: 999px;
}
.musteri-randevu-tablo {
  font-size: 0.92rem;
}
.musteri-randevu-tablo thead th {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #eef2f6;
  padding: 0.85rem 1rem;
  white-space: nowrap;
}
.musteri-randevu-tablo tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}
.musteri-randevu-firma {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  color: var(--marka-lacivert);
  text-decoration: none;
}
.musteri-randevu-firma:hover {
  color: var(--bs-primary);
}
.musteri-randevu-firma-ikon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 0.6rem;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.musteri-yorum-satiri {
  border-color: #eef2f6 !important;
}
/* --- Randevu Geçmişi: mobilde tablo yerine kart listesi --- */
.musteri-randevu-mobil-liste {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.musteri-randevu-mobil-karti {
  border: 1px solid #eef2f6;
  border-radius: 0.9rem;
  padding: 1rem;
}
.musteri-randevu-mobil-detay {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: #475569;
}
.musteri-randevu-mobil-detay i {
  width: 1.1rem;
  text-align: center;
  color: #94a3b8;
  margin-right: 0.35rem;
}
.musteri-bildirim-satiri {
  border-color: #eef2f6 !important;
  border-radius: 0.6rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  transition: background-color 0.15s ease;
}
.musteri-bildirim-satiri:hover {
  background: #f8fafc;
}
.musteri-bildirim-satiri .text-dark {
  font-size: 0.92rem;
}
.musteri-bildirim-nokta {
  width: 9px;
  height: 9px;
  min-width: 9px;
  border-radius: 50%;
  background: var(--bs-primary);
  margin-top: 0.4rem;
}

/* --- Arama kutusu öneri (autocomplete) açılır listesi: hero arama + Firmalar filtresi ortak --- */
.arama-oneri-kutusu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0.85rem;
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.14);
  border: 1px solid #eef1f5;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
}
.arama-oneri-kutusu.gorunur {
  display: block;
}
.arama-oneri-satiri {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
  color: var(--marka-lacivert);
  font-size: 0.88rem;
  text-decoration: none;
}
.arama-oneri-satiri:hover,
.arama-oneri-satiri.aktif {
  background: var(--marka-acik);
  color: var(--marka-lacivert);
}
.arama-oneri-satiri i {
  color: var(--bs-primary);
  width: 16px;
  text-align: center;
  font-size: 0.85rem;
}
.arama-oneri-alt-etiket {
  color: #94a3b8;
  font-size: 0.76rem;
  margin-left: auto;
  white-space: nowrap;
  padding-left: 0.5rem;
}
.arama-oneri-bos {
  padding: 0.85rem 0.95rem;
  color: #94a3b8;
  font-size: 0.85rem;
}

/* --- Destek/şikayet yazışma balonları (admin ve müşteri tarafında ortak) --- */
.destek-mesaj-alani {
  max-height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.5rem;
  background: #f8fafc;
}
.destek-mesaj-balonu {
  max-width: 72%;
  padding: 0.8rem 1.1rem;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.destek-mesaj-musteri {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e9edf3;
  border-bottom-left-radius: 0.3rem;
}
.destek-mesaj-admin {
  align-self: flex-end;
  background: var(--marka-koyu);
  color: #fff;
  border-bottom-right-radius: 0.3rem;
}
.destek-mesaj-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.destek-mesaj-kimlik {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.destek-mesaj-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: #94a3b8;
}
.destek-mesaj-admin .destek-mesaj-avatar {
  background: rgba(255, 255, 255, 0.25);
}
.destek-mesaj-isim {
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.destek-mesaj-rol {
  font-size: 0.7rem;
  line-height: 1.2;
  opacity: 0.65;
}
.destek-mesaj-zaman {
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0.6;
}
.destek-mesaj-govde {
  font-size: 0.92rem;
  white-space: pre-wrap;
  line-height: 1.5;
}
.destek-mesaj-musteri .destek-mesaj-govde { color: #1e293b; }
.destek-mesaj-balonu .destek-mesaj-gorsel {
  display: block;
  max-width: 240px;
  max-height: 240px;
  width: auto;
  height: auto;
  border-radius: 10px;
  margin-top: 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.destek-mesaj-balonu .destek-mesaj-gorsel:hover {
  opacity: 0.92;
  transform: scale(1.02);
}

/* --- Destek yanıt formu (dosya seçimi dahil) --- */
.destek-yanit-alani {
  background: #fff;
  padding: 1.1rem 1.25rem;
}
.destek-yanit-alani textarea.form-control {
  border-radius: 0.75rem;
  border-color: #e2e8f0;
  resize: vertical;
}
.destek-yanit-alani textarea.form-control:focus {
  border-color: var(--marka-koyu);
  box-shadow: 0 0 0 0.2rem rgba(37, 125, 115, 0.15);
}
.destek-dosya-alani {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.destek-dosya-input {
  max-width: 230px;
  font-size: 0.82rem;
}
.destek-dosya-input.form-control::file-selector-button {
  border: 0;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  margin-right: 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.destek-dosya-input.form-control::file-selector-button:hover {
  background: var(--marka-koyu);
  color: #fff;
}
.destek-dosya-ipucu {
  font-size: 0.72rem;
  color: #94a3b8;
}

/* --- Fiyatlandırma sayfası --- */
.fatura-donemi-etiket {
  color: #94a3b8;
  transition: color 0.15s ease;
}
.fatura-donemi-etiket.aktif {
  color: var(--marka-lacivert);
}
.fiyat-karti {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 1.1rem;
  padding: 2.25rem 1.85rem;
  text-align: center;
  position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.fiyat-karti:hover {
  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.08);
  transform: translateY(-3px);
}
.fiyat-karti-vurgulu {
  border: 2px solid var(--bs-primary);
  box-shadow: 0 0.75rem 2rem rgba(var(--bs-primary-rgb), 0.15);
}
.fiyat-karti-rozet {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bs-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.9rem;
  border-radius: 2rem;
  white-space: nowrap;
}
.fiyat-karti-ikon {
  width: 52px;
  height: 52px;
  border-radius: 0.9rem;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 1rem;
}
.fiyat-karti-vurgulu .fiyat-karti-ikon {
  background: var(--bs-primary);
  color: #fff;
}
.fiyat-karti-tutar {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--marka-lacivert);
}
.fiyat-karti-tutar-birim {
  font-size: 1rem;
  font-weight: 500;
  color: #94a3b8;
}
.fiyat-karti-alt-not {
  min-height: 1.2rem;
}
.fiyat-karti-tasarruf-rozet {
  display: inline-block;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 2rem;
  margin: 0 auto;
}
.fiyat-karti-ozellik-listesi {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  border-top: 1px solid #eef1f5;
  padding-top: 1.25rem;
}
.fiyat-karti-ozellik-listesi li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.87rem;
  color: #475569;
  margin-bottom: 0.65rem;
}
.fiyat-karti-ozellik-listesi li:last-child {
  margin-bottom: 0;
}
.fiyat-karti-ozellik-listesi i {
  color: var(--bs-primary);
}

.uye-odeme-adim-seridi {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.uye-odeme-adim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 600;
}
.uye-odeme-adim-daire {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.uye-odeme-adim.tamamlandi .uye-odeme-adim-daire {
  background: var(--bs-primary);
  color: #fff;
}
.uye-odeme-adim.tamamlandi .uye-odeme-adim-metin,
.uye-odeme-adim.aktif .uye-odeme-adim-metin {
  color: var(--marka-koyu);
}
.uye-odeme-adim.aktif .uye-odeme-adim-daire {
  background: var(--marka-acik);
  color: var(--marka-koyu);
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.12);
}
.uye-odeme-adim-cizgi {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin-top: 1rem;
  max-width: 4rem;
}
.uye-odeme-adim-cizgi.tamamlandi {
  background: var(--bs-primary);
}

.fiyat-guven-satiri {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--marka-lacivert);
}
.fiyat-guven-satiri i {
  color: var(--bs-primary);
}

.paytr-cerceve {
  width: 100%;
  height: 620px;
  border: 0;
  display: block;
}

.odeme-kart-onizleme-sarici {
  perspective: 1400px;
}
.odeme-kart-onizleme {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1.586 / 1;
  min-height: 210px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.odeme-kart-onizleme.kart-cevrildi {
  transform: rotateY(180deg);
}
.odeme-kart-yuz {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--marka-koyu), var(--bs-primary));
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.2);
}
.odeme-kart-on {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.odeme-kart-ust-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.odeme-kart-cip {
  font-size: 1.6rem;
  opacity: 0.9;
}
.odeme-kart-numara {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  margin: 1rem 0;
  word-spacing: 0.15em;
}
.odeme-kart-alt-satir {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.odeme-kart-etiket {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.odeme-kart-deger {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.odeme-kart-arka {
  transform: rotateY(180deg);
  padding: 0 0 1rem;
}
.odeme-kart-manyetik {
  width: 100%;
  height: 2.75rem;
  background: #1e293b;
  margin-top: 1.35rem;
}
.odeme-kart-cvv-alani {
  margin: 1.1rem 1.35rem 0 auto;
  max-width: 4rem;
  background: #fff;
  color: #0f172a;
  border-radius: 0.4rem;
  padding: 0.45rem 0.7rem;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (max-width: 420px) {
  .odeme-kart-numara {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    word-spacing: 0.1em;
  }
}

.odeme-tamamlama-karti {
  border-top: 3px solid var(--bs-primary) !important;
}
.odeme-guvenli-rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  padding: 0.3rem 0.7rem;
  border-radius: 2rem;
}
.odeme-siparis-ozeti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #f8fafc;
  border: 1px solid #eef1f5;
  border-radius: 0.85rem;
  padding: 1rem 1.25rem;
}
.odeme-siparis-ozeti-etiket {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.odeme-siparis-ozeti-deger {
  display: block;
  font-weight: 600;
  color: var(--marka-koyu);
}
.odeme-siparis-ozeti-tutar {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--marka-koyu);
}
.odeme-form-input-grup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  padding: 0 0.85rem;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.odeme-form-input-grup:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}
.odeme-form-input-grup i {
  color: #94a3b8;
  width: 1rem;
  font-size: 0.9rem;
}
.odeme-form-input-grup:focus-within i {
  color: var(--bs-primary);
}
.odeme-form-input-grup .form-control {
  border: 0;
  padding: 0.65rem 0;
  box-shadow: none !important;
  background: transparent !important;
}
.odeme-guven-serit-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  color: #94a3b8;
  font-size: 0.78rem;
}
.odeme-guven-serit-alt i.fa-brands {
  font-size: 1.4rem;
  color: #cbd5e1;
}

.gorusme-bekleme-karti {
  background: #f8fafc;
  border: 1px solid #eef1f5;
  border-radius: 1rem;
  padding: 3.5rem 2rem;
  max-width: 480px;
  margin: 2rem auto;
}
.gorusme-geri-sayim {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--marka-lacivert);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.firma-randevu-kutu {
  border-radius: 1rem;
}
@media (min-width: 992px) {
  .firma-randevu-kutu {
    position: sticky;
    top: 90px;
  }
}

/* --- Panel (firma/müşteri/admin) düzeni --- */
.panel-body {
  background-color: #f1f5f9;
}
.panel-sidebar {
  width: 240px;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--marka-lacivert), #1e293b);
  color: #fff;
}
.panel-sidebar-baslik {
  padding: 1.25rem 1rem 0.5rem;
  font-weight: 700;
  font-size: 1.1rem;
}
.panel-sidebar .nav-link,
.offcanvas .nav-link {
  color: rgba(255, 255, 255, 0.75);
  padding: 0.65rem 1.25rem;
  border-left: 3px solid transparent;
}
.panel-sidebar .nav-link:hover,
.offcanvas .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.panel-sidebar .nav-link.active,
.offcanvas .nav-link.active {
  color: #fff;
  border-left-color: var(--bs-primary);
  background: rgba(49, 153, 141, 0.15);
}
.panel-topbar {
  background: var(--marka-lacivert);
}
.panel-icerik {
  min-width: 0;
}

/* --- Admin paneli: tüm liste/tablo sayfalarında ortak kart-tablo-modal görünümü --- */
.custom-card {
  border: 0;
  border-radius: 0.85rem;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
}
.custom-card .card-header {
  background: transparent;
  border-bottom: 1px solid #eef2f6;
  padding: 1rem 1.25rem;
}
.custom-card .card-title {
  font-weight: 700;
  color: var(--marka-lacivert);
  font-size: 0.98rem;
  margin-bottom: 0;
}
.custom-card .card-body {
  padding: 1.25rem;
}
/* --- Admin profil sayfaları (örn. admin/subscription_plans.php kategori profili) sekme çubuğu --- */
.admin-profil-sekme {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  background: #fff;
  border: 0;
  border-radius: 0.85rem;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
  padding: 0.4rem;
}
.admin-profil-sekme .nav-item {
  display: flex;
}
.admin-profil-sekme .nav-link {
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0.6rem;
  color: #64748b;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.6rem 1.1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-profil-sekme .nav-link:hover:not(.active) {
  background: #f1f5f9;
  color: var(--marka-lacivert);
}
.admin-profil-sekme .nav-link.active {
  color: #fff;
  background: var(--bs-primary);
  box-shadow: 0 0.35rem 0.85rem rgba(var(--bs-primary-rgb), 0.28);
}
.admin-profil-sekme .nav-link .badge {
  font-weight: 600;
}
.admin-profil-sekme .nav-link.active .badge {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}
@media (max-width: 767.98px) {
  .admin-profil-sekme {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-profil-sekme .nav-item {
    flex-shrink: 0;
  }
  .admin-profil-sekme .nav-link {
    white-space: nowrap;
  }
}
.admin-profil-ikon-chip {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 0.65rem;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.admin-sozlesme-editor {
  background: #fff;
  border-radius: 0.6rem;
  overflow: hidden;
}
.admin-sozlesme-editor .ql-toolbar.ql-snow {
  border-color: #e2e8f0;
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
  background: #f8fafc;
}
.admin-sozlesme-editor .ql-container.ql-snow {
  border-color: #e2e8f0;
  border-bottom-left-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
  font-size: 0.95rem;
}
.admin-sozlesme-editor .ql-editor {
  min-height: 360px;
}
/* Modal içindeki daha kısa içerik alanları (ör. duyuru metni) için aynı görünüm, daha düşük min-height */
.admin-duyuru-editor {
  background: #fff;
  border-radius: 0.6rem;
  overflow: hidden;
}
.admin-duyuru-editor .ql-toolbar.ql-snow {
  border-color: #e2e8f0;
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
  background: #f8fafc;
}
.admin-duyuru-editor .ql-container.ql-snow {
  border-color: #e2e8f0;
  border-bottom-left-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
  font-size: 0.9rem;
}
.admin-duyuru-editor .ql-editor {
  min-height: 140px;
}
.admin-duzenle-bolum-baslik {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94a3b8;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #eef2f6;
}
.admin-duzenle-bolum-baslik i {
  color: var(--bs-primary);
  margin-right: 0.35rem;
}
.admin-duzenle-durum-kutusu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
}
.admin-duzenle-durum-kutusu .form-switch .form-check-input {
  width: 2.75rem;
  height: 1.5rem;
  cursor: pointer;
}
.admin-duzenle-alt-bar {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef2f6;
}
/* --- Admin panel: liste kartlarında kullanılan sade satır listesi (öne çıkanlar, son aktiviteler) --- */
.admin-mini-liste {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.admin-mini-liste-satir {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.55rem;
  color: inherit;
  transition: background-color 0.15s ease;
}
a.admin-mini-liste-satir:hover {
  background: #f8fafc;
}
.admin-mini-liste-sira {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.admin-mini-liste-ikon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 0.5rem;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}
.admin-mini-liste-ad {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #1e293b;
}
.admin-mini-liste-deger {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
/* --- Admin panel: dashboard grafik kutuları (Chart.js canvas'ları sabit yükseklikte tutulur) --- */
.admin-grafik-kutusu {
  position: relative;
  height: 220px;
}
/* --- Admin profil sayfaları: KPI istatistik kartları --- */
.admin-kpi-karti .card-body {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
}
.admin-kpi-ikon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.admin-kpi-ikon-primary { background: var(--marka-acik); color: var(--bs-primary); }
.admin-kpi-ikon-success { background: #dcfce7; color: #16a34a; }
.admin-kpi-ikon-warning { background: #fef3c7; color: #d97706; }
.admin-kpi-ikon-info { background: #e0e7ff; color: #4f46e5; }
.admin-kpi-ikon-purple { background: #f3e8ff; color: #9333ea; }
.admin-kpi-ikon-danger { background: #fee2e2; color: #dc2626; }
.admin-kpi-deger {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--marka-lacivert);
  line-height: 1.25;
  white-space: nowrap;
}
.admin-kpi-etiket {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 0.1rem;
}
/* --- Admin > Genel Ayarlar: tıklanabilir, anında önizlemeli görsel yükleme kutusu --- */
.admin-gorsel-yukleme-kutusu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 0.75rem;
  background: #f8fafc;
  cursor: pointer;
  overflow: hidden;
  margin: 0;
  transition: border-color 0.12s ease;
}
.admin-gorsel-yukleme-kutusu:hover {
  border-color: var(--bs-primary);
}
.admin-gorsel-yukleme-kutusu img {
  max-height: 70%;
  max-width: 80%;
  object-fit: contain;
}
.admin-gorsel-yukleme-kutusu-koyu {
  background: var(--marka-lacivert);
}
.admin-gorsel-yukleme-kutusu-favicon img {
  max-height: 40px;
  max-width: 40px;
}
.admin-gorsel-yukleme-katman {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.admin-gorsel-yukleme-kutusu:hover .admin-gorsel-yukleme-katman {
  opacity: 1;
}

.admin-kpi-spark {
  position: relative;
  width: 56px;
  height: 32px;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .admin-kpi-spark {
    display: none;
  }
}
.admin-panel-filtre-buton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border-radius: 0.65rem;
  border: none;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), 0.35);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.admin-panel-filtre-buton:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 18px rgba(var(--bs-primary-rgb), 0.45);
  color: #fff;
}
.admin-panel-filtre-buton-aktif {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 6px 14px rgba(var(--bs-primary-rgb), 0.35);
}
.admin-panel-filtre-rozet {
  background: #fff;
  color: var(--marka-lacivert);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.05rem 0.42rem;
  line-height: 1.3;
}
.admin-icerik .table.table-borderless.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #f8fafc;
}
.admin-icerik .table thead th {
  color: #000;
  font-size: 0.8rem;
  font-weight: 700;
  border-bottom-width: 1px;
}
.admin-icerik .card-header .card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.admin-icerik .pagination {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.55rem;
  padding: 0.25rem;
  background: #fff;
}
.admin-icerik .pagination .page-link {
  border: 0;
  background: transparent;
  color: #000;
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.4rem;
}
.admin-icerik .pagination .page-item.active .page-link {
  background: var(--marka-lacivert);
  color: #fff;
  border-radius: 0.4rem;
  font-weight: 700;
}
.admin-icerik .pagination .page-item.disabled .page-link {
  color: #b8c0cc;
  background: transparent;
}
.admin-icerik .btn-icon {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  color: #212529;
  font-size: 0.8rem;
}
/* Dolu (renkli arka planlı) buton varyantları için ikon rengi beyaz kalmalı — yukarıdaki genel
   .btn-icon kuralı koyu renk verdiğinden (btn-light gibi açık arka planlı butonlar için doğru),
   btn-primary/btn-success/btn-danger gibi dolu varyantlarda daha yüksek özgüllükle ezilir
   (örn. mesajlaşma ekranındaki "Yeni Sohbet" ve "Gönder" butonları). */
.admin-icerik .btn-icon.btn-primary,
.admin-icerik .btn-icon.btn-success,
.admin-icerik .btn-icon.btn-danger,
.admin-icerik .btn-icon.btn-warning,
.admin-icerik .btn-icon.btn-info,
.admin-icerik .btn-icon.btn-secondary,
.admin-icerik .btn-icon.btn-dark {
  color: #fff;
}
.admin-icerik td.text-end > * {
  margin-right: 0.3rem;
}
.admin-icerik td.text-end > *:last-child {
  margin-right: 0;
}
.admin-icerik .badge.p-2 {
  font-weight: 600;
  font-size: 0.72rem;
  border-radius: 0.5rem;
}
.admin-icerik .modal-content {
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
}
.admin-icerik .modal-header {
  border-bottom: 1px solid #eef2f6;
  padding: 1.1rem 1.4rem;
}
.admin-icerik .modal-body {
  padding: 1.4rem;
}
.admin-icerik .modal-footer {
  border-top: 1px solid #eef2f6;
  padding: 1rem 1.4rem;
}
.admin-filtre-kutusu {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 1.1rem 1.25rem;
}

.admin-canli-sayfa-buton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  border: 1.5px solid var(--bs-primary);
  color: var(--marka-koyu);
  background: rgba(var(--bs-primary-rgb), 0.06);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.admin-canli-sayfa-buton i {
  font-size: 0.78rem;
}
.admin-canli-sayfa-buton:hover {
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(var(--bs-primary-rgb), 0.32);
  transform: translateY(-1px);
}

/* --- Firma profili: sidebar özet istatistik kutuları --- */
.admin-ozet-kutu {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 0.7rem;
  padding: 0.6rem 0.7rem;
  height: 100%;
}
.admin-ozet-ikon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.admin-ozet-ikon.varyant-primary { background: rgba(var(--bs-primary-rgb), 0.12); color: var(--bs-primary); }
.admin-ozet-ikon.varyant-success { background: rgba(26, 127, 78, 0.12); color: #1a7f4e; }
.admin-ozet-ikon.varyant-warning { background: rgba(180, 83, 9, 0.12); color: #b45309; }
.admin-ozet-ikon.varyant-info { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }
.admin-ozet-ikon.varyant-secondary { background: rgba(100, 116, 139, 0.14); color: #64748b; }
.admin-ozet-ikon.varyant-danger { background: rgba(176, 42, 55, 0.12); color: #b02a37; }
.admin-ozet-deger {
  font-weight: 700;
  font-size: 0.92rem;
  color: #111827;
  line-height: 1.2;
}
.admin-ozet-etiket {
  font-size: 0.72rem;
  color: #64748b;
}

/* --- Yönetici yetki matrisi (Görüntüleme / Ekleme / Silme) --- */
.admin-yetki-matris-kart {
  border: 1px solid #eef2f6;
  border-radius: 0.85rem;
  overflow: hidden;
}
.admin-yetki-matris-tablo {
  margin-bottom: 0;
}
.admin-yetki-matris-tablo thead th {
  background: #f8fafc;
  border-bottom: 1px solid #eef2f6;
  padding: 0.75rem 1rem;
  white-space: nowrap;
  vertical-align: middle;
}
.admin-yetki-modul-baslik {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.admin-yetki-anahtar-baslik {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.admin-yetki-anahtar-baslik-goruntuleme { color: #0d6efd; }
.admin-yetki-anahtar-baslik-ekleme { color: #b45309; }
.admin-yetki-anahtar-baslik-silme { color: #b02a37; }
.admin-yetki-hepsi-etiket {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: #94a3b8;
  margin-top: 0.3rem;
  cursor: pointer;
  user-select: none;
}
.admin-yetki-hepsi-etiket .form-check-input {
  width: 1.6em;
  height: 0.9em;
  margin: 0;
  cursor: pointer;
}
.admin-yetki-matris-tablo tbody td {
  padding: 0.6rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #f4f6f9;
}
.admin-yetki-matris-tablo tbody tr:last-child td {
  border-bottom: none;
}
.admin-yetki-matris-tablo tbody tr:hover {
  background: #fafbfc;
}
.admin-yetki-modul-hucre {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.admin-yetki-modul-ikon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}
.admin-yetki-modul-adi {
  font-weight: 600;
  font-size: 0.86rem;
  color: #1e293b;
}
.admin-yetki-anahtar-hucre {
  text-align: center;
}
.admin-yetki-anahtar.form-check-input {
  width: 2.4em;
  height: 1.3em;
  cursor: pointer;
}
.admin-yetki-anahtar.form-check-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.admin-yetki-anahtar-goruntuleme.form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }
.admin-yetki-anahtar-ekleme.form-check-input:checked { background-color: #b45309; border-color: #b45309; }
.admin-yetki-anahtar-silme.form-check-input:checked { background-color: #b02a37; border-color: #b02a37; }
.admin-yetki-anahtar-baslik-modul { color: var(--bs-primary); }
.admin-yetki-anahtar-modul.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }

/* --- Yetki matrisi: mobil kart görünümü --- */
.admin-yetki-mobil { display: flex; flex-direction: column; gap: 0.85rem; }
.admin-yetki-mobil-hepsi-bar {
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
}
.admin-yetki-mobil-hepsi-baslik {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.6rem;
}
.admin-yetki-mobil-hepsi-secenekler { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.admin-yetki-mobil-hepsi-etiket {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}
.admin-yetki-mobil-hepsi-etiket .form-check-input { width: 2em; height: 1.1em; margin: 0; cursor: pointer; }
.admin-yetki-mobil-karti { padding: 0.9rem 1rem; }
.admin-yetki-mobil-satirlar { display: flex; flex-direction: column; gap: 0.6rem; }
.admin-yetki-mobil-satir { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.admin-yetki-mobil-satir-etiket { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; }

/* --- Firma profili: yorumlar özeti --- */
.admin-yorum-ortalama {
  font-size: 2.4rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
}
.admin-yorum-bar-arkaplan {
  height: 8px;
  border-radius: 999px;
  background: #eef2f6;
  overflow: hidden;
}
.admin-yorum-bar-dolu {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.admin-yorum-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  font-size: 0.95rem;
}

/* --- Firma profili: belge kartları --- */
.admin-belge-kart {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.admin-belge-kart:hover {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.admin-belge-gorsel {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f5f9;
}
.admin-belge-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.admin-belge-kart:hover .admin-belge-gorsel img {
  transform: scale(1.05);
}

/* --- Firma profili: istatistikler sekmesi --- */
.admin-istat-kart {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.admin-istat-ikon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.admin-istat-ikon.varyant-primary { background: rgba(var(--bs-primary-rgb), 0.12); color: var(--bs-primary); }
.admin-istat-ikon.varyant-success { background: rgba(26, 127, 78, 0.12); color: #1a7f4e; }
.admin-istat-ikon.varyant-warning { background: rgba(180, 83, 9, 0.12); color: #b45309; }
.admin-istat-ikon.varyant-info { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }
.admin-istat-ikon.varyant-secondary { background: rgba(100, 116, 139, 0.14); color: #64748b; }
.admin-istat-ikon.varyant-danger { background: rgba(176, 42, 55, 0.12); color: #b02a37; }
.admin-istat-bar-arkaplan {
  height: 8px;
  border-radius: 999px;
  background: #eef2f6;
  overflow: hidden;
}
.admin-istat-bar-dolu {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bs-primary), var(--marka-koyu));
}

/* --- Kategori ikon seçici (görsel ikon grid'i) --- */
.admin-ikon-onizleme {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 0.6rem;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.admin-ikon-izgara {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.4rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.6rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
}
.admin-ikon-secenek {
  width: 38px;
  height: 38px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.admin-ikon-secenek:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}
.admin-ikon-secenek.aktif {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* --- Blog yazısı düzenleme modalı --- */
.admin-blog-duzenle-kutu .modal-header {
  align-items: flex-start;
}
.admin-blog-kapak-onizleme {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0.7rem;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.admin-blog-kapak-onizleme img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-blog-kapak-bos {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8c0cc;
  font-size: 1.8rem;
}
.admin-blog-sayac {
  font-size: 0.72rem;
}

/* --- Askıya al / aktifleştir / sil ortak onay penceresi --- */
.admin-onay-govde {
  padding: 2.25rem 1.75rem 1.75rem;
  text-align: center;
}
.admin-onay-ikon {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--marka-lacivert);
  margin-bottom: 0.5rem;
}
.admin-onay-baslik {
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.6rem;
}
.admin-onay-metin {
  color: var(--bs-primary);
  font-weight: 600;
  margin-bottom: 1.75rem;
}
.admin-onay-butonlar {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
.admin-onay-butonlar .btn {
  min-width: 110px;
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
}
.admin-onay-iptal {
  background: #fff;
  border: 1px solid #dc3545;
  color: #111827;
}
.admin-onay-iptal:hover {
  background: #fff5f5;
  color: #111827;
}
.admin-onay-evet {
  border: 0;
  color: #fff;
  background: #b02a37;
}
.admin-onay-evet:hover {
  filter: brightness(0.95);
  color: #fff;
}
.admin-onay-evet.varyant-warning {
  background: #b45309;
}
.admin-onay-evet.varyant-success {
  background: #1a7f4e;
}
.admin-onay-evet.varyant-danger {
  background: #b02a37;
}

/* --- Admin: piksel bazlı küçük yazı boyutu yardımcı sınıfları (Bootstrap'ta karşılığı yok) --- */
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }

/* --- Profil sayfaları (yönetici/müşteri): pill tarzı sekme çubuğu --- */
.profil-sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  background: #f1f5f9;
  padding: 0.3rem;
  border-radius: 0.85rem;
  border-bottom: 0;
  margin-bottom: 0;
}
.profil-sekmeler .nav-link {
  flex-shrink: 0;
  white-space: nowrap;
  border: 0;
  border-radius: 0.55rem;
  padding: 0.5rem 0.7rem;
  font-weight: 600;
  font-size: 0.76rem;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.profil-sekmeler .nav-link i {
  font-size: 0.72rem;
}
.profil-sekmeler .nav-link:hover {
  color: var(--marka-koyu);
  background: rgba(var(--bs-primary-rgb), 0.1);
}
.profil-sekmeler .nav-link.active {
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), 0.32);
}

/* --- Admin paneli (firma/müşteri panelinden ayrı, kendi kabuğu) --- */
.admin-body {
  background-color: #f1f5f9;
}
.admin-sidebar {
  width: 260px;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  background: #fff;
  border-right: 1px solid #eef2f6;
  padding-bottom: 1rem;
  transition: width 0.2s ease;
}
.admin-sidebar-baslik {
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid #eef2f6;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.admin-sidebar-logo {
  height: 60px;
}
.admin-sidebar-menu {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.admin-sidebar-menu:hover {
  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}
.admin-sidebar-menu::-webkit-scrollbar {
  width: 6px;
}
.admin-sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}
.admin-sidebar-menu::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}
.admin-sidebar-menu:hover::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
}
.admin-sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.28);
}
.admin-sidebar-grup-basligi {
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1rem 1.25rem 0.4rem;
}
.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #1f2937;
  padding: 0.62rem 1rem;
  margin: 0.15rem 0.75rem;
  border-radius: 0.65rem;
  text-decoration: none;
  font-size: 0.92rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-sidebar-link i {
  width: 1.1rem;
  text-align: center;
  color: #64748b;
}
.admin-sidebar-link:hover {
  color: var(--marka-lacivert);
  background: #f1f5f9;
}
.admin-sidebar-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), 0.35);
}
.admin-sidebar-link.active i {
  color: #fff;
}
.admin-sidebar-cikis {
  margin-top: auto;
  border-top: 1px solid #eef2f6;
  padding-top: 0.85rem;
  flex-shrink: 0;
}
.admin-offcanvas {
  background: var(--marka-lacivert);
  width: 260px;
}

/* --- Sidebar daraltıldığında (yalnızca ikonlar, masaüstü) --- */
body.admin-sidebar-daralt .admin-sidebar {
  width: 76px;
}
body.admin-sidebar-daralt .admin-sidebar-baslik {
  display: flex;
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
body.admin-sidebar-daralt .admin-sidebar-logo {
  height: 32px;
}
body.admin-sidebar-daralt .admin-sidebar-grup-basligi {
  display: none;
}
body.admin-sidebar-daralt .admin-sidebar-link {
  position: relative;
  justify-content: center;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
body.admin-sidebar-daralt .admin-sidebar-link-metin {
  display: none;
}
body.admin-sidebar-daralt .admin-sidebar-link-rozet {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  margin-left: 0 !important;
  font-size: 0.6rem;
  padding: 0.25em 0.4em;
}
.admin-icerik {
  min-width: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.admin-icerik > .container-fluid {
  flex: 1 0 auto;
}
.admin-footer {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 1rem 1.5rem;
  text-align: center;
  color: #64748b;
  font-size: 0.82rem;
}
@media (max-width: 767.98px) {
  .admin-footer {
    display: none;
  }
  /* .admin-footer'ın kendi padding-bottom'u, altta sabit duran .mobil-tab-bar'ın (position:fixed)
     içeriğin üzerine binmesini engelliyordu — footer mobilde gizlenince bu boşluk da kayboldu,
     son içerik alt menünün arkasında kalıyordu. Aynı boşluğu doğrudan içerik alanına taşıdık.
     !important ŞART: .container-fluid'in kendi "py-4" sınıfı Bootstrap'in varsayılan olarak
     !important ile gelen padding-bottom'unu taşıyor, o olmadan bu kural hiç uygulanmıyordu. */
  .admin-icerik > .container-fluid {
    padding-bottom: calc(1rem + 5.5rem) !important;
  }
}
.admin-icerik img {
  max-width: 100%;
  height: auto;
}
.admin-topbar {
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-topbar .admin-topbar-logo-mobil {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 34px;
  width: auto;
  max-width: none;
}
@media (max-width: 991.98px) {
  .admin-topbar {
    min-height: 62px;
    padding: 1rem 1.25rem;
  }
}
.admin-topbar-ikon-buton {
  background: transparent;
  border: 0;
  color: #475569;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-topbar-ikon-buton:hover {
  background: #f1f5f9;
  color: var(--marka-koyu);
}
.admin-topbar-ikon-buton:focus {
  box-shadow: none;
  outline: 2px solid rgba(var(--bs-primary-rgb), 0.35);
  outline-offset: -2px;
}
/* Sidebar açıkken X, daraltılmışken hamburger ikonu gösterilir (body sınıfı erken script ile
   boyanmadan önce uygulandığı için ikon geçişinde flash olmaz) */
.admin-sidebar-daralt-ac-ikon {
  display: none;
}
body.admin-sidebar-daralt .admin-sidebar-daralt-kapat-ikon {
  display: none;
}
body.admin-sidebar-daralt .admin-sidebar-daralt-ac-ikon {
  display: inline;
}
.admin-topbar-baslik {
  color: var(--marka-lacivert);
  font-weight: 700;
}
.admin-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.35);
}
.admin-rol-rozeti {
  font-size: 0.7rem;
  color: #64748b;
}
.admin-topbar-profil .dropdown-toggle::after {
  display: none;
}
.admin-topbar-bildirim-rozet {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #dc3545;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 2px solid #fff;
}
.admin-topbar-bildirim-panel {
  width: 340px;
  max-width: 90vw;
  border: 0;
  border-radius: 0.85rem;
  box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.16);
  margin-top: 0.5rem !important;
}
.admin-topbar-bildirim-govde {
  max-height: 380px;
  overflow-y: auto;
}

/* --- Admin panel listeleri: mobilde masaüstü tablosu (d-none d-lg-block) yerine, aynı veriyi
   müşteri panelindeki "Randevu Geçmişi" kartlarıyla aynı görsel dilde gösteren özel kart listesi
   (d-lg-none) render edilir: ikonlu başlık + rozet, ikon önekli detay satırları, alt işlem şeridi. --- */
.admin-mobil-liste {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.admin-mobil-karti {
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.9rem;
  padding: 1rem;
  box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.06);
}
.admin-mobil-karti-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.admin-mobil-baslik {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: var(--marka-lacivert);
  text-decoration: none;
  min-width: 0;
}
.admin-mobil-baslik span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-mobil-ikon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 0.6rem;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.admin-mobil-detay {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: #475569;
}
.admin-mobil-detay-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.admin-mobil-detay-satir i {
  width: 1.1rem;
  text-align: center;
  color: #94a3b8;
  margin-right: 0.35rem;
}
.admin-mobil-detay-deger {
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-mobil-islemler {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid #f1f5f9;
}
.admin-mobil-islemler > form {
  flex: 1 1 0 !important; /* Bootstrap'in .flex-fill'i (flex:1 1 auto !important) formu buton kardeşlerinden daha geniş yapmasın diye */
  min-width: 0;
}
.admin-mobil-islemler .btn {
  flex: 1 1 0;
  width: 100%;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-mobil-islemler .btn i {
  margin-right: 0.2rem;
}
.admin-mobil-bos-durum {
  text-align: center;
  color: #94a3b8;
  padding: 2.5rem 1rem;
}


/* Liste sayfalarının "X Listesi" başlığı + arama/filtre satırı: mobilde ortalanmış şekilde alt alta gelir */
@media (max-width: 991.98px) {
  .admin-icerik .card-header.justify-content-between {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .admin-icerik .card-header.justify-content-between form {
    justify-content: center;
    width: 100%;
  }
}

/* --- Admin girişi: bölünmüş ekran, koyu degrade sol panel (referans tasarımın kendi marka renklerimizle uyarlanmışı) --- */
.admin-giris-sayfa {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(49, 153, 141, 0.38), transparent 38%),
    radial-gradient(circle at bottom right, rgba(255, 120, 73, 0.22), transparent 36%),
    linear-gradient(135deg, #0b1424 0%, #0f172a 45%, #103a34 100%);
}
.admin-giris-kutu {
  width: 100%;
  max-width: 1120px;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.45);
}
.admin-giris-sol {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--marka-lacivert) 0%, var(--marka-koyu) 100%);
  color: #fff;
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.admin-giris-sol::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.1), transparent 45%),
    radial-gradient(circle at bottom right, rgba(255, 120, 73, 0.22), transparent 42%);
  pointer-events: none;
}
.admin-giris-logo {
  position: relative;
  z-index: 2;
}
.admin-giris-logo img {
  max-width: 165px;
}
.admin-giris-icerik {
  position: relative;
  z-index: 2;
}
.admin-giris-icerik .admin-giris-ikon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 22px;
}
.admin-giris-icerik h1 {
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -0.8px;
  margin-bottom: 14px;
}
.admin-giris-icerik p {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 430px;
  margin-bottom: 0;
}
.admin-giris-rozetler {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.admin-giris-rozetler span {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12.5px;
}
.admin-giris-rozetler i {
  color: var(--marka-vurgu);
  margin-right: 5px;
}
.admin-giris-sag {
  padding: 52px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-giris-form-alan {
  width: 100%;
  max-width: 380px;
}
.admin-giris-form-alan h2 {
  font-size: 28px;
  color: var(--marka-lacivert);
  margin-bottom: 6px;
  letter-spacing: -0.6px;
}
.admin-giris-aciklama {
  color: #6b7280;
  margin-bottom: 26px;
  font-size: 14px;
}
.admin-giris-alan-etiket {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 7px;
}
.admin-giris-input-grup {
  position: relative;
  margin-bottom: 16px;
}
.admin-giris-input-grup > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}
.admin-giris-input-grup input {
  width: 100%;
  height: 52px;
  padding: 0 44px;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  background: #f9fafb;
  font-size: 14.5px;
  color: #111827;
  outline: none;
  transition: 0.2s ease;
}
.admin-giris-input-grup input:focus {
  background: #fff;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.14);
}
.admin-giris-sifre-goster {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: #9ca3af;
  padding: 4px;
}
.admin-giris-buton {
  width: 100%;
  height: 53px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.2s ease;
  margin-top: 6px;
}
.admin-giris-buton:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(var(--bs-primary-rgb), 0.35);
}
.admin-giris-ayirici {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 18px;
  color: #9ca3af;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-giris-ayirici::before,
.admin-giris-ayirici::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #e5e7eb;
}
.admin-giris-hizli {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.admin-giris-hizli a {
  height: 46px;
  border: 1px solid #e5e7eb;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13px;
  color: #1f2937;
  text-decoration: none;
  transition: 0.2s ease;
}
.admin-giris-hizli a:hover {
  background: var(--marka-acik);
  border-color: var(--bs-primary);
  color: var(--marka-koyu);
}
.admin-giris-footer-yazi {
  text-align: center;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
}
@media (max-width: 920px) {
  .admin-giris-kutu {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .admin-giris-sol {
    min-height: 320px;
    padding: 34px;
  }
  .admin-giris-sag {
    padding: 40px 30px;
  }
}

/* --- Randevu widget --- */
.slot-buton {
  min-width: 78px;
}
.randevu-modal-alt {
  box-shadow: 0 -0.25rem 0.75rem rgba(15, 23, 42, 0.06);
}
.randevu-modal-govde .form-select,
.randevu-modal-govde .form-control {
  border: 1.5px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
  min-height: 3rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--marka-lacivert);
  background-color: #f8fafc;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.randevu-modal-govde .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2331998d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
}
.randevu-modal-govde .form-select:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
.randevu-modal-govde .form-select:hover,
.randevu-modal-govde .form-control:hover {
  border-color: #cbd5e1;
}
.randevu-modal-govde .form-select:focus,
.randevu-modal-govde .form-control:focus {
  border-color: var(--bs-primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(49, 153, 141, 0.14);
  outline: 0;
}
.randevu-personel-item-foto {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.randevu-personel-item-foto-yer-tutucu {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
@media (max-width: 575.98px) {
  .slot-buton {
    min-width: 4.4rem;
    min-height: 2.75rem;
    font-size: 0.95rem;
  }
  .randevu-modal-govde {
    padding-bottom: 0.5rem;
  }
}

/* --- Yıldızlı puanlama: salt okunur gösterim --- */
.yildiz-gosterim i {
  color: #f59e0b;
  font-size: 0.95rem;
  margin-right: 1px;
}
.yildiz-gosterim i.fa-regular {
  color: #cbd5e1;
}
.yildiz-gosterim.yildiz-kucuk i {
  font-size: 0.78rem;
}

.firma-puan-ozet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

/* --- Yıldızlı puanlama: tıklanabilir giriş (radio buton hilesi, CSS-only) --- */
.yildiz-secim {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
  font-size: 1.6rem;
}
.yildiz-secim input {
  display: none;
}
.yildiz-secim label {
  color: #cbd5e1;
  cursor: pointer;
  transition: color 0.1s ease;
}
.yildiz-secim input:checked ~ label,
.yildiz-secim label:hover,
.yildiz-secim label:hover ~ label {
  color: #f59e0b;
}

/* --- Yorum kartı --- */
.yorum-karti {
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1rem;
}

/* --- Anasayfa "Müşterilerimiz Ne Diyor?" testimonial bölümü --- */
.testimonial-ust-etiket {
  display: inline-flex;
  align-items: center;
  color: var(--bs-primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.testimonial-baslik {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--marka-lacivert);
  margin: 0.5rem 0 0.9rem;
}
.testimonial-alt-baslik {
  max-width: 480px;
  color: #64748b;
}

.testimonial-yildizlar {
  margin-top: 0.5rem;
  margin-bottom: 1.1rem;
}
.testimonial-avatar-buyuk {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 0.25rem 0.6rem rgba(15, 23, 42, 0.12);
}
.testimonial-isim {
  color: var(--marka-lacivert);
}
.testimonial-firma {
  color: #94a3b8;
}
.testimonial-firma:hover {
  color: var(--bs-primary);
}

/* --- Öne çıkan yorum (büyük panel) + geri kalan yorumlar (2x2 ızgara) tek beyaz vitrin kartı içinde --- */
.testimonial-vitrin-kart {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.testimonial-vitrin-one-cikan {
  flex: 1 1 320px;
  max-width: 380px;
  min-height: 480px;
  border-radius: 1.25rem;
  padding: 2rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
}
.testimonial-tirnak-buyuk {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}
.testimonial-vitrin-one-cikan-metin {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0.5rem 0 1.5rem;
}
.testimonial-vitrin-one-cikan-isim {
  color: #fff;
}
.testimonial-vitrin-one-cikan-firma {
  color: rgba(255, 255, 255, 0.6);
}
.testimonial-vitrin-one-cikan-firma:hover {
  color: #fff;
}
.testimonial-vitrin-izgara {
  flex: 2 1 480px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.testimonial-vitrin-karti {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 1.1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.05);
}
.testimonial-vitrin-metin {
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.testimonial-avatar-kucuk {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
@media (max-width: 767.98px) {
  .testimonial-vitrin-kart {
    flex-direction: column;
  }
  .testimonial-vitrin-one-cikan {
    max-width: none;
    min-height: 420px;
  }
  .testimonial-vitrin-izgara {
    grid-template-columns: 1fr;
  }
}

/* --- Mobil alt tab çubuğu (site + admin ortak: footer_public.php / footer_admin.php) --- */
.mobil-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  border-top: 1px solid #eef2f6;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.07);
  padding: 0.4rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom));
}
.mobil-tab-oge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: #64748b;
  text-decoration: none;
  flex: 1;
  padding: 0.25rem 0;
}
.mobil-tab-oge i {
  font-size: 1.05rem;
}
.mobil-tab-oge.aktif {
  color: var(--bs-primary);
  font-weight: 600;
}
.mobil-tab-menu-buton .mobil-tab-menu-ikon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  margin-top: -22px;
  box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), 0.4);
  font-size: 1.1rem;
}
.mobil-tab-ikon-sarmalayici {
  position: relative;
  display: inline-flex;
}
.mobil-tab-rozet {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #dc3545;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* --- Mobil tam sayfa menü (site + admin ortak: header_public.php / header_admin.php) --- */
.mobil-tam-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 1050;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobil-tam-menu.acik {
  transform: translateX(0);
}
.mobil-tam-menu-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eef2f6;
  flex-shrink: 0;
}
.mobil-tam-menu-govde {
  padding: 1.25rem;
  flex-grow: 1;
}
.mobil-tam-menu-profil,
.admin-mobil-menu-profil {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eef2f6;
}
.mobil-tam-menu-grup {
  margin-bottom: 1.25rem;
}
.mobil-tam-menu-baslik {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 0.5rem;
}
.mobil-tam-menu-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.5rem;
  color: #1f2937;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: 500;
}
.mobil-tam-menu-link i {
  width: 1.2rem;
  text-align: center;
  color: #94a3b8;
}
.mobil-tam-menu-link.aktif,
.mobil-tam-menu-link.active {
  background: var(--marka-acik);
  color: var(--marka-koyu);
  font-weight: 700;
}
.mobil-tam-menu-link.aktif i,
.mobil-tam-menu-link.active i {
  color: var(--marka-koyu);
}
.mobil-tam-menu-footer-blurb {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mobil-tam-menu-footer-blurb .footer-kart-logolari {
  width: auto;
  max-width: 220px;
}
.admin-mobil-menu {
  background: #fff;
}

/* --- Alt çubuktaki "Hesabım"/"Bildirimler" ile açılan bottom sheet (site + admin ortak) --- */
.mobil-hesap-arkaplan {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1055;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mobil-hesap-arkaplan.acik {
  opacity: 1;
  pointer-events: auto;
}
.mobil-hesap-menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  z-index: 1056;
  transform: translateY(100%);
  transition: transform 0.28s ease;
  padding-top: 0.6rem;
  box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18);
}
.mobil-hesap-menu.acik {
  transform: translateY(0);
}
.mobil-hesap-menu-tutamac {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #e2e8f0;
  margin: 0 auto 0.75rem;
}
@media (min-width: 992px) {
  .mobil-tab-bar,
  .mobil-tam-menu,
  .mobil-hesap-arkaplan,
  .mobil-hesap-menu {
    display: none !important;
  }
}
/* .mobil-tab-bar (position:fixed, bottom:0) sayfa içeriğinin üzerine biner; hiçbir sayfa gövdesi bu
   alan için pay bırakmadığından son içerik sayfa sonuna kadar kaydırıldığında çubuğun arkasında
   kalabiliyordu. Genel (site) sayfalarda <main>, admin sayfalarında .admin-footer bu boşluğu bırakır. */
@media (max-width: 991.98px) {
  main {
    padding-bottom: 5.5rem;
  }
  .admin-footer {
    padding-bottom: calc(1rem + 5.5rem);
  }
}
/* firmalar.php / hizmetler.php: mobilde filtre paneli açıkken "Firma/Hizmet Ara" tetikleyici
   butonu gizlenir (Bootstrap collapse, hedef açıkken tetikleyiciden .collapsed sınıfını kaldırır). */
.firmalar-ara-buton:not(.collapsed) {
  display: none;
}

/* --- Müşteri/Firma giriş-kayıt sayfaları (customer/login.php, business/login.php, register.php vb.)
   .admin-giris-* ile aynı görsel dil, Bootstrap row/col ızgarasıyla kullanılacak şekilde uyarlandı --- */
.auth-sayfa {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at top left, rgba(49, 153, 141, 0.12), transparent 42%),
    radial-gradient(circle at bottom right, rgba(255, 120, 73, 0.08), transparent 40%),
    #f8fafc;
}
.auth-kart {
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14);
}
.auth-gorsel-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--marka-lacivert) 0%, var(--marka-koyu) 100%);
  color: #fff;
  padding: 52px;
  flex-direction: column;
  justify-content: center;
}
.auth-gorsel-ikon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}
.auth-gorsel-panel h4 {
  position: relative;
  z-index: 2;
  font-size: 26px;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.auth-gorsel-panel p {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
}
.auth-fayda-listesi {
  position: relative;
  z-index: 2;
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}
.auth-fayda-listesi li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}
.auth-fayda-listesi i {
  color: var(--marka-vurgu);
  margin-top: 2px;
}
.auth-gorsel-logo {
  position: relative;
  z-index: 2;
  max-width: 150px;
}
.auth-form-panel {
  padding: 52px 50px;
}
.auth-mobil-logo {
  display: block;
  max-width: 190px;
  margin: 0 auto 1.25rem;
}
.auth-geri-link {
  color: #6b7280;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  align-items: center;
  gap: 6px;
}
.auth-geri-link:hover {
  color: var(--bs-primary);
}
.auth-tur-sekme {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 1.5rem;
}
.auth-tur-sekme .nav-link {
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
  color: #6b7280;
  border: 0;
}
.auth-tur-sekme .nav-link.active {
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
}
.auth-input-grup {
  position: relative;
}
.auth-input-grup > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}
.auth-input-grup input,
.auth-input-grup select,
.auth-input-grup .form-control,
.auth-input-grup .form-select {
  height: 52px;
  padding-left: 44px;
  padding-right: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  background: #f9fafb;
  font-size: 14.5px;
}
.auth-input-grup input:focus,
.auth-input-grup select:focus,
.auth-input-grup .form-control:focus,
.auth-input-grup .form-select:focus {
  background: #fff;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.14);
}
.auth-sifre-goster {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: #9ca3af;
  padding: 4px;
}
.auth-mobil-telif {
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
  margin-top: 1.5rem;
  margin-bottom: 0;
}
@media (max-width: 991.98px) {
  .auth-form-panel {
    padding: 32px 24px;
  }
}
@media (max-width: 575.98px) {
  .auth-sayfa {
    background: #fff;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .auth-kart {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .auth-form-panel {
    padding: 28px 20px;
  }
}

/* --- Mesajlaşma arayüzü (includes/mesajlasma_govde.php + assets/js/mesajlasma.js) ---
   3 panelli sohbet uygulaması: sol (sohbet listesi), orta (aktif sohbet), sağ (karşı taraf bilgisi).
   Mobilde tek panel görünür; body.mesaj-sohbet-acik sınıfı (JS ile) orta panele geçişi tetikler. */
.mesaj-sayfa {
  display: flex;
  height: calc(100vh - 160px);
  min-height: 520px;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(15, 23, 42, 0.06);
  border: 1px solid #eef2f6;
}
/* Firma paneli (business/mesajlar.php): admin kabuğunun (topbar + admin-footer) yüksekliği
   müşteri panelindeki (customer/mesajlar.php) navbar/footer'dan farklı olduğundan, sabit
   "calc(100vh - 160px)" değeri burada ya taşma ya da boşluk bırakıyordu. Bunun yerine admin
   içerik alanının zaten flex ile büyüyen "container-fluid"ını aşağıya kadar flex ile doldurarak,
   mesajlaşma paneli hangi kabuk yüksekliğinde olursa olsun web'deki ile birebir aynı görünür.
   .mesaj-sayfa (0,1,0) yerine daha yüksek özgüllükle (0,2,0) burada ezilir. */
/* .admin-icerik > .container-fluid varsayılan olarak "flex: 1 0 auto" (büzülmez) taşır — normal
   sayfalarda istenen budur (içerik uzunsa sayfa/body büyüsün). Mesajlaşma sayfalarında ise TAM TERSİ
   gerekir: bu alanın mevcut boşluğa göre BÜZÜLEBİLMESİ lazım ki iç .mesaj-sohbet-listesi kendi
   overflow-y:auto'suyla kayabilsin; aksi halde (flex-shrink:0 + min-height sıfırlanmamış) bu kutu
   içeriğinin tam boyutuna büyür, .admin-icerik de onunla büyür ve sayfanın kendisi (body) kayar —
   soldaki liste hiç kaymadan tüm e-postalar sayfayı aşağı doğru uzatır. Üç class'lı bu seçici,
   .admin-icerik > .container-fluid'in iki class'lı kuralını özgüllükte ezer.               */
.admin-icerik > .container-fluid.admin-mesaj-cercevesi {
  flex: 1 1 auto;
  min-height: 0;
}
/* Yukarıdaki büzülme izni tek başına yetmez: .admin-icerik'in kendisi de sadece "min-height:100vh"
   (bir taban, tavan değil) taşıdığından, hiçbir atası onu 100vh'a SIKI SIKIYA bağlamıyor — içerik
   ne kadar uzarsa .admin-icerik de o kadar uzuyor, .container-fluid'in "büzülebilir" olması bu
   durumda hiçbir işe yaramıyor çünkü büzülecek sabit bir çerçeve yok. :has() ile SADECE mesaj
   çerçevesi barındıran admin-icerik'e gerçek bir tavan (height:100vh + overflow:hidden) verilir;
   diğer tüm normal admin sayfaları eskisi gibi içerikle birlikte serbestçe uzayabilir. */
.admin-icerik:has(> .admin-mesaj-cercevesi) {
  height: 100vh;
  overflow: hidden;
}
.admin-mesaj-cercevesi {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.admin-mesaj-cercevesi-ic {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.admin-mesaj-cercevesi-ic .mesaj-sayfa {
  height: auto;
  flex: 1 1 auto;
  min-height: 520px;
}
.mesaj-sol-panel {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eef2f6;
  min-height: 0;
}
.mesaj-sol-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #eef2f6;
  flex-shrink: 0;
}
.mesaj-sol-arama {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 1rem;
  padding: 0.55rem 0.9rem;
  background: #f8fafc;
  border-radius: 999px;
  flex-shrink: 0;
}
.mesaj-sol-arama i {
  color: #94a3b8;
  font-size: 0.85rem;
}
.mesaj-sol-arama input {
  border: 0;
  background: transparent;
  outline: none;
  font-size: 0.88rem;
  flex-grow: 1;
  min-width: 0;
}
.mesaj-arsiv-link,
.mesaj-geri-don-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.1rem;
  color: #1f2937;
  text-decoration: none;
  font-size: 0.85rem;
  border-bottom: 1px solid #eef2f6;
  flex-shrink: 0;
}
.mesaj-arsiv-link:hover,
.mesaj-geri-don-link:hover {
  background: #f8fafc;
}
.mesaj-sohbet-listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}
.mesaj-sohbet-listesi::-webkit-scrollbar {
  width: 6px;
}
.mesaj-sohbet-listesi::-webkit-scrollbar-track {
  background: transparent;
}
.mesaj-sohbet-listesi::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 999px;
}
.mesaj-sohbet-listesi::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.28);
}
.mesaj-sohbet-satiri {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  border-bottom: 1px solid #f8fafc;
}
.mesaj-sohbet-satiri:hover {
  background: #f8fafc;
}
.mesaj-sohbet-satiri.aktif {
  background: var(--marka-acik);
}
.mesaj-sohbet-bilgi {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mesaj-sohbet-saat {
  font-size: 0.72rem;
  color: #94a3b8;
  flex-shrink: 0;
}
.mesaj-sohbet-ozet {
  color: #64748b;
}

/* Avatar (sol liste + üst bilgi + sağ panel ortak) */
.mesaj-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  position: relative;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.mesaj-avatar.mesaj-avatar-gorsel {
  color: transparent;
}
.mesaj-avatar-buyuk {
  width: 84px;
  height: 84px;
  font-size: 1.8rem;
}
.mesaj-avatar.mesaj-cevrimici::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}

/* Orta panel: aktif sohbet */
.mesaj-orta-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #f8fafc;
}
.mesaj-bos-durum {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  text-align: center;
  padding: 2rem;
}
.mesaj-bos-durum i {
  font-size: 2.5rem;
  opacity: 0.5;
}
/* JS (mesajlasma.js sohbetSec()) bu elemente inline "display:flex" atıyor; varsayılan flex-direction
   "row" olduğundan üst bar/mesaj gövdesi/alt bar'ı dikey istiflemek için burada yön belirtilmeli. */
#sohbetIcerikAlani,
#mailIcerikAlani,
#waIcerikAlani,
#igIcerikAlani {
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.mesaj-ust-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: #fff;
  border-bottom: 1px solid #eef2f6;
  flex-shrink: 0;
}
.mesaj-ust-bilgi {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-grow: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.mesaj-ici-arama-cubugu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: #fff;
  border-bottom: 1px solid #eef2f6;
  flex-shrink: 0;
}
.mesaj-ici-arama-cubugu input {
  border: 0;
  outline: none;
  background: transparent;
  flex-grow: 1;
  font-size: 0.88rem;
}
.mesaj-govde {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 1rem 1.25rem;
}
.mesaj-listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mesaj-gun-ayirici {
  text-align: center;
  margin: 0.85rem 0;
}
.mesaj-gun-ayirici span {
  background: #fff;
  border: 1px solid #eef2f6;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
}
.mesaj-satir {
  display: flex;
  max-width: 72%;
}
.mesaj-satir-ben {
  align-self: flex-end;
  justify-content: flex-end;
}
.mesaj-satir-karsi {
  align-self: flex-start;
}
.mesaj-balon {
  position: relative;
  border-radius: 1.1rem;
  padding: 0.1rem;
}
.mesaj-satir-ben .mesaj-balon-icerik {
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  border-bottom-right-radius: 0.3rem;
}
.mesaj-satir-karsi .mesaj-balon-icerik {
  background: #fff;
  color: #1f2937;
  border: 1px solid #eef2f6;
  border-bottom-left-radius: 0.3rem;
}
.mesaj-balon-icerik {
  padding: 0.6rem 0.85rem;
  border-radius: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mesaj-metin {
  font-size: 0.9rem;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.mesaj-gorsel {
  max-width: 220px;
  border-radius: 0.75rem;
  display: block;
}
.mesaj-meta {
  font-size: 0.68rem;
  opacity: 0.75;
  align-self: flex-end;
  white-space: nowrap;
}
.mesaj-menu-tetik {
  position: absolute;
  top: 2px;
  right: -22px;
  border: 0;
  background: none;
  color: #94a3b8;
  font-size: 0.72rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  padding: 4px;
}
.mesaj-satir-ben .mesaj-menu-tetik {
  right: auto;
  left: -22px;
}
.mesaj-balon:hover .mesaj-menu-tetik {
  opacity: 1;
}
.mesaj-mini-menu {
  position: absolute;
  top: 22px;
  right: -10px;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  z-index: 5;
  min-width: 150px;
  overflow: hidden;
}
.mesaj-mini-menu a {
  display: block;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  color: #1f2937;
  text-decoration: none;
}
.mesaj-mini-menu a:hover {
  background: #f8fafc;
}
.mesaj-alt-bar {
  padding: 0.75rem 1.1rem;
  background: #fff;
  border-top: 1px solid #eef2f6;
  flex-shrink: 0;
}
.mesaj-alt-bar .form-control {
  border-radius: 999px;
  background: #f8fafc;
  border-color: #eef2f6;
}
.mesaj-dosya-onizleme {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.mesaj-dosya-onizleme-kutu {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid #eef2f6;
}
.mesaj-dosya-onizleme-kutu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sağ panel: karşı taraf bilgisi */
.mesaj-sag-panel {
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid #eef2f6;
  overflow-y: auto;
  position: relative;
  background: #fff;
}
.mesaj-medya-kucuk {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5rem;
  width: 100%;
}

/* --- WhatsApp: yanıt önizlemesi, tepki rozeti, konum/kişi kartı, sohbet etiketleri, emoji paneli --- */
.mesaj-yanit-onizleme {
  border-left: 3px solid var(--bs-primary);
  background: rgba(15, 23, 42, 0.05);
  border-radius: 0.5rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  opacity: 0.9;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mesaj-satir-ben .mesaj-yanit-onizleme {
  border-left-color: #fff;
  background: rgba(255, 255, 255, 0.18);
}
.mesaj-tepki-etiketi {
  position: absolute;
  bottom: -10px;
  right: 8px;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 999px;
  font-size: 0.82rem;
  padding: 0.05rem 0.35rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}
.mesaj-satir-ben .mesaj-tepki-etiketi {
  right: auto;
  left: 8px;
}
.mesaj-konum-onizleme,
.mesaj-kisi-karti {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.mesaj-konum-onizleme i,
.mesaj-kisi-karti i {
  font-size: 1.5rem;
  color: var(--bs-primary);
}
.mesaj-satir-ben .mesaj-konum-onizleme i,
.mesaj-satir-ben .mesaj-kisi-karti i {
  color: #fff;
}
.mesaj-tepki-secici {
  display: flex;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
}
.mesaj-tepki-secici button {
  border: 0;
  background: none;
  font-size: 1.25rem;
  padding: 0.15rem 0.3rem;
  border-radius: 0.4rem;
  line-height: 1;
  transition: transform 0.1s ease, background-color 0.1s ease;
}
.mesaj-tepki-secici button:hover {
  background: #f8fafc;
  transform: scale(1.2);
}
.mesaj-sohbet-etiketleri {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: #94a3b8;
}
.mesaj-sohbet-satiri.wa-sabit,
.mesaj-sohbet-satiri.ig-sabit {
  background: #fbfdf9;
}
.wa-emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}
.wa-emoji-grid button {
  border: 0;
  background: none;
  font-size: 1.25rem;
  padding: 0.2rem;
  border-radius: 0.4rem;
  line-height: 1.3;
}
.wa-emoji-grid button:hover {
  background: #f8fafc;
}
.wa-vurgu .mesaj-balon-icerik,
.ig-vurgu .mesaj-balon-icerik {
  animation: waVurguFlash 1.5s ease;
}
@keyframes waVurguFlash {
  0%, 100% { box-shadow: none; }
  25% { box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.55); }
}

/* --- Admin Mail Kutusu: klasör sekmeleri + mesaj listesi (admin/mail.php + assets/js/admin_mail.js) --- */
.mail-klasor-sekmeleri {
  display: flex;
  gap: 0.4rem;
  padding: 0 1.1rem;
  margin: 0.25rem 0 0.75rem;
}
.mail-klasor-sekme {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  border: 1px solid #eef2f6;
  background: #fff;
  color: #64748b;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mail-klasor-sekme:hover {
  background: #f8fafc;
}
.mail-klasor-sekme.active {
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.28);
}

.mail-satir {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  cursor: pointer;
  border-bottom: 1px solid #f8fafc;
  border-left: 3px solid transparent;
}
.mail-satir:hover {
  background: #f8fafc;
}
.mail-satir.aktif {
  background: var(--marka-acik);
  border-left-color: var(--bs-primary);
}
.mail-satir.okunmamis {
  border-left-color: var(--bs-primary);
}
.mail-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  flex-shrink: 0;
}
.mail-satir-govde {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mail-satir-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.mail-gonderen {
  font-size: 0.87rem;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-satir.okunmamis .mail-gonderen,
.mail-satir.okunmamis .mail-konu {
  font-weight: 700;
  color: #0f172a;
}
.mail-tarih {
  font-size: 0.71rem;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}
.mail-konu {
  font-size: 0.81rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-basarisiz-rozet {
  font-size: 0.65rem;
  vertical-align: middle;
}
.mail-sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.6rem;
  border-top: 1px solid #eef2f6;
  flex-shrink: 0;
}

/* --- Mail Ayarları: hesap kartları (admin/mail-ayarlari.php) --- */
.mail-ayarlar-baslik-ikon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 0.85rem;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.mail-hesap-karti {
  border: 1px solid #eef2f6;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.mail-hesap-karti:hover {
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}
.mail-hesap-karti-varsayilan {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
}
.mail-hesap-ikon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), var(--marka-koyu));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), 0.28);
}
.mail-hesap-varsayilan-rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  font-weight: 600;
  font-size: 0.68rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
}
.mail-hesap-protokoller {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: #f8fafc;
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
}
.mail-hesap-protokol-satiri {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: #475569;
  min-width: 0;
}
.mail-hesap-protokol-ikon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid #eef2f6;
  color: var(--bs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}
.mail-hesap-karti .btn-outline-danger {
  border-color: #eef2f6;
}
.mail-hesap-karti .btn-outline-danger:hover {
  border-color: var(--bs-danger);
}

/* --- Mail Kutusu: yıldızlama, arama satırındaki yıldız filtresi, konuşma grupları --- */
.btn-yildiz-satir {
  align-self: center;
  border: 0;
  background: none;
  padding: 0.2rem 0.35rem;
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1;
}
.btn-yildiz-satir.aktif,
.btn-yildiz-satir:hover {
  color: #f59e0b;
}
.btn-yildiz-filtre {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  color: #94a3b8;
  flex-shrink: 0;
}
.btn-yildiz-filtre.aktif,
.btn-yildiz-filtre:hover {
  color: #f59e0b;
  border-color: #fde68a;
}
.mail-konu-baslik {
  cursor: pointer;
}
.mail-konu-baslik .mail-konu-ok {
  align-self: center;
  color: #94a3b8;
  font-size: 0.75rem;
}
.mail-konu-alt-liste .mail-satir {
  padding-left: 2.6rem;
  background: #fbfcfd;
}

@media (max-width: 991.98px) {
  .mesaj-sayfa {
    height: calc(100vh - 170px);
    border-radius: 0;
    border: 0;
    position: relative;
  }
  .mesaj-sol-panel {
    width: 100%;
  }
  .mesaj-orta-panel,
  .mesaj-sag-panel {
    display: none;
  }
  body.mesaj-sohbet-acik .mesaj-sol-panel {
    display: none;
  }
  body.mesaj-sohbet-acik .mesaj-orta-panel {
    display: flex;
  }
}

/* --- Anasayfa: mobilde hero altındaki arama kartı + bölüm başlığı/yatay kaydırma yardımcıları --- */
.hero-mobil-arama-alani {
  margin-top: -2.5rem;
  position: relative;
  z-index: 3;
  margin-bottom: 1.5rem;
}
.hero-populer-kart-ici {
  color: #64748b;
  padding: 0 0.5rem;
}
.hero-populer-kart-ici a {
  color: var(--bs-primary);
}
@media (max-width: 991.98px) {
  .hero-arama-alan input {
    text-align: center;
  }
  .hero-populer-kart-ici {
    text-align: center;
  }
}
.anasayfa-tasma-kilit {
  overflow-x: hidden;
}
.anasayfa-bolum-basligi,
.anasayfa-bolum-basligi-tekli {
  justify-content: space-between;
}
@media (max-width: 991.98px) {
  .anasayfa-bolum-basligi,
  .anasayfa-bolum-basligi-tekli {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
  }
}
.anasayfa-yatay-kaydirici {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
.anasayfa-yatay-kaydirici > * {
  scroll-snap-align: center;
  flex: 0 0 82%;
}
.anasayfa-yatay-kaydirici::-webkit-scrollbar {
  display: none;
}
.firma-tanitim-istatistik-satiri {
  margin-top: 0;
}

/* --- Firma detay sayfası: profil bilgi satırları + takip butonu metni --- */
.firma-profil-bilgi-satiri {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #64748b;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.firma-profil-bilgi-satiri i {
  color: var(--bs-primary);
  width: 1.1rem;
  text-align: center;
}
.firma-profil-bilgi-satiri .yildiz-gosterim i {
  color: #f59e0b;
  width: auto;
}
.firma-profil-bilgi-satiri .yildiz-gosterim i.fa-regular {
  color: #cbd5e1;
}
.takip-buton-metni {
  margin-left: 0.35rem;
}

/* --- Fiyatlandırma kartı tutar rakamı --- */
.fiyat-karti-tutar-deger {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--marka-lacivert);
}

/* --- Ödeme sayfası: kart önizleme alanı (includes/odeme_kart_onizleme_formu.php) --- */
.odeme-kart-alan {
  background: linear-gradient(135deg, var(--marka-lacivert), var(--marka-koyu));
  border-radius: 1rem;
  padding: 1.5rem;
  color: #fff;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.2);
}

/* --- Sayfa başına dön butonu (includes/footer_public.php) --- */
.yukari-cik-buton {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--marka-lacivert);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.25s ease;
  z-index: 1030;
}
.yukari-cik-buton.gorunur {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.yukari-cik-buton:hover {
  background: var(--bs-primary);
  color: #fff;
}
@media (max-width: 991.98px) {
  .yukari-cik-buton {
    bottom: 5.5rem;
  }
}

/* --- Herkese açık site + müşteri paneli: çerez bilgilendirme kutusu (sayfa altında sabit şerit) --- */
.cerez-bildirim {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1045;
  background: var(--marka-lacivert);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.15);
  padding: 0.9rem 1.25rem;
}
.cerez-bildirim-icerik {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cerez-bildirim-icerik p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  flex: 1 1 260px;
}
.cerez-bildirim-icerik a {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 991.98px) {
  .cerez-bildirim {
    bottom: 5.5rem;
  }
}

/* --- Herkese açık sayfalar: yüzen WhatsApp hızlı destek butonu (sol altta, yukarı-çık butonuyla
   çakışmaması için karşı köşede) --- */
.whatsapp-destek-buton {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  z-index: 1030;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.whatsapp-destek-buton:hover {
  background: #1ebe57;
  color: #fff;
  transform: scale(1.06);
}
@media (max-width: 991.98px) {
  .whatsapp-destek-buton {
    bottom: 5.5rem;
    width: 46px;
    height: 46px;
    font-size: 1.25rem;
  }
}

/* --- Admin: sürükle-bırak sıralama tutamacı (admin/subscription_plans.php kategori listesi) --- */
.admin-siralama-tutamac {
  cursor: grab;
  color: #94a3b8;
  padding: 0.3rem 0.5rem;
  display: inline-flex;
}
.admin-siralama-tutamac:active {
  cursor: grabbing;
}
.admin-siralama-tutamac-pasif {
  cursor: not-allowed;
  opacity: 0.35;
}
.admin-siralama-suruklenen {
  opacity: 0.4;
}

/* --- Admin: küçük tekrar eden bileşenler --- */
.admin-onay-kutu {
  border-radius: 1rem;
  overflow: hidden;
}
.admin-blog-ozet-alani {
  resize: vertical;
}
.admin-ikon-ac-buton {
  cursor: pointer;
  color: var(--bs-primary);
  font-weight: 600;
  font-size: 0.85rem;
}
.admin-ikon-alani {
  position: relative;
}
.admin-input-goster-butonu {
  border: 1px solid #dee2e6;
  border-left: 0;
  background: #fff;
  color: #6b7280;
}
.admin-tablo-arama {
  max-width: 100%;
}
.admin-yetki-hepsi-kutu {
  cursor: pointer;
}
.one-cikan-bolum {
  background: #fafbfc;
}

/* --- Kasa (POS) satış ekranı: SambaPOS tarzı ürün ızgarası + fiş paneli --- */
.kasa-pos-sayfa {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  height: calc(100vh - 220px);
  min-height: 520px;
}
.kasa-pos-urunler {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: .75rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  overflow: hidden;
}
.kasa-pos-arama {
  margin-bottom: .75rem;
  flex: 0 0 auto;
}
.kasa-pos-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: .75rem;
  overflow-y: auto;
  padding-right: .25rem;
  align-content: start;
}
.kasa-pos-tile {
  border: none;
  border-radius: .65rem;
  padding: .9rem .8rem;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .14);
}
.kasa-pos-tile:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
.kasa-pos-tile:active {
  transform: scale(.95);
}
.kasa-pos-tile-ad {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}
.kasa-pos-tile-fiyat {
  font-size: .82rem;
  font-weight: 600;
  opacity: .95;
  margin-top: .6rem;
}
.kasa-pos-tile-ozel {
  background: repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 10px, #eef0f2 10px, #eef0f2 20px);
  color: #495057;
  border: 2px dashed #adb5bd;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.kasa-pos-tile-ozel .kasa-pos-tile-ad {
  font-size: .82rem;
}
.kasa-pos-tile-bos {
  grid-column: 1 / -1;
  text-align: center;
  color: #94a3b8;
  padding: 2rem 0;
}
.kasa-pos-tile-c0 { background: var(--bs-primary); }
.kasa-pos-tile-c1 { background: var(--marka-lacivert); }
.kasa-pos-tile-c2 { background: var(--marka-vurgu); }
.kasa-pos-tile-c3 { background: #6f42c1; }
.kasa-pos-tile-c4 { background: #0d6efd; }
.kasa-pos-tile-c5 { background: #d63384; }
.kasa-pos-tile-c6 { background: var(--marka-koyu); }
.kasa-pos-tile-c7 { background: #fd7e14; }

.kasa-pos-fis {
  flex: 0 0 380px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  overflow: hidden;
}
.kasa-pos-fis-baslik {
  padding: .9rem 1rem;
  border-bottom: 1px solid #eef0f2;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.kasa-pos-fis-liste {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .25rem 1rem;
}
.kasa-pos-fis-bos {
  text-align: center;
  color: #94a3b8;
  padding: 2.5rem 0;
}
.kasa-pos-satir {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 0;
  border-bottom: 1px dashed #eef0f2;
}
.kasa-pos-satir:last-child {
  border-bottom: 0;
}
.kasa-pos-satir-bilgi {
  flex: 1 1 auto;
  min-width: 0;
}
.kasa-pos-satir-ad {
  font-size: .85rem;
  font-weight: 700;
  color: var(--marka-lacivert);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kasa-pos-satir-fiyat {
  font-size: .78rem;
  color: #6b7280;
  border: none;
  background: transparent;
  padding: 0;
  width: 62px;
  cursor: text;
}
.kasa-pos-satir-fiyat:focus {
  outline: none;
  color: var(--bs-primary);
}
.kasa-pos-adet-kontrol {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}
.kasa-pos-adet-buton {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  background: #fff;
  color: var(--marka-lacivert);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.kasa-pos-adet-buton:hover {
  background: var(--marka-acik);
}
.kasa-pos-adet-deger {
  font-size: .82rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.kasa-pos-satir-toplam {
  flex: 0 0 auto;
  font-size: .85rem;
  font-weight: 700;
  min-width: 64px;
  text-align: right;
}
.kasa-pos-satir-sil {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #dc3545;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kasa-pos-satir-sil:hover {
  background: #fdecea;
}
.kasa-pos-fis-alt {
  border-top: 1px solid #eef0f2;
  padding: .9rem 1rem 1rem;
  flex: 0 0 auto;
}
.kasa-pos-toplam-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.kasa-pos-toplam-etiket {
  font-size: .95rem;
  color: #6b7280;
  font-weight: 600;
}
.kasa-pos-toplam-deger {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bs-primary);
}
.kasa-odeme-tile-grup {
  display: flex;
  gap: .5rem;
  margin-bottom: .75rem;
}
.kasa-odeme-tile {
  flex: 1;
  border-radius: .6rem;
  padding: .65rem;
  text-align: center;
  border: 2px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
  color: #6b7280;
}
.kasa-odeme-tile i {
  display: block;
  font-size: 1.1rem;
  margin-bottom: .25rem;
}
.kasa-odeme-tile.aktif {
  border-color: var(--bs-primary);
  background: var(--marka-acik);
  color: var(--marka-koyu);
}
.kasa-pos-tamamla-buton {
  width: 100%;
  padding: .8rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: .6rem;
}
.kasa-pos-mini-secim {
  margin-bottom: .5rem;
}
.kasa-pos-ozel-kutu {
  display: none;
  gap: .4rem;
  margin-top: .5rem;
}
.kasa-pos-ozel-kutu.acik {
  display: flex;
}
@media (max-width: 991.98px) {
  .kasa-pos-sayfa {
    flex-direction: column;
    height: auto;
  }
  .kasa-pos-fis {
    flex: none;
    max-width: 100%;
    order: -1;
  }
  .kasa-pos-tile-grid {
    max-height: 46vh;
  }
}
/* Telefon genişliğinde tablet düzeninin tersine: önce ürün/hizmet ızgarası seçilsin, fiş/ödeme
   paneli en altta olsun (satış akışı yukarıdan aşağı doğal sırayla ilerlesin). */
@media (max-width: 767.98px) {
  .kasa-pos-urunler {
    order: 1;
  }
  .kasa-pos-fis {
    order: 2;
  }
  .kasa-pos-tile-grid {
    max-height: 52vh;
  }
}

/* --- Personel "Verdiği Hizmetler" seçici: sade checkbox listesi yerine seçilebilir kart ızgarası --- */
.personel-hizmet-arac-cubugu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.personel-hizmet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .65rem;
}
.personel-hizmet-karti {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .7rem .85rem;
  border: 1.5px solid #e5e7eb;
  border-radius: .65rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
  margin: 0;
}
.personel-hizmet-karti:hover {
  border-color: var(--bs-primary);
}
.personel-hizmet-karti.secili {
  border-color: var(--bs-primary);
  background: var(--marka-acik);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.personel-hizmet-karti input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* --- Admin > Ödeme Ayarları: aktif sanal pos sağlayıcısı seçim kartı (radio) --- */
.admin-saglayici-secim-karti {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: .65rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
  margin: 0;
  width: 100%;
}
.admin-saglayici-secim-karti:hover {
  border-color: var(--bs-primary);
}
.admin-saglayici-secim-karti.secili {
  border-color: var(--bs-primary);
  background: var(--marka-acik);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.admin-saglayici-secim-karti input {
  margin: 0;
  flex-shrink: 0;
}
.personel-hizmet-karti-ikon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
  color: transparent;
  font-size: .7rem;
  background: #fff;
  transition: all .12s ease;
}
.personel-hizmet-karti.secili .personel-hizmet-karti-ikon {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.personel-hizmet-karti-govde {
  min-width: 0;
}
.personel-hizmet-karti-ad {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .87rem;
  color: var(--marka-lacivert);
  line-height: 1.3;
}
.personel-hizmet-karti-detay {
  display: block;
  font-size: .78rem;
  color: #6b7280;
  margin-top: .2rem;
}
.personel-hizmet-bos-durum {
  color: #94a3b8;
  text-align: center;
  padding: 2rem 0;
}

/* --- Takvim (FullCalendar) profesyonel görünüm — business/takvim.php, business/takvimim.php --- */
.admin-takvim-sarmalayici {
  --fc-border-color: #eef0f2;
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: #f8fafc;
  --fc-today-bg-color: var(--marka-acik);
  --fc-button-bg-color: #fff;
  --fc-button-border-color: #e2e8f0;
  --fc-button-text-color: var(--marka-lacivert);
  --fc-button-hover-bg-color: var(--marka-acik);
  --fc-button-hover-border-color: var(--bs-primary);
  --fc-button-hover-text-color: var(--marka-koyu);
  --fc-button-active-bg-color: var(--bs-primary);
  --fc-button-active-border-color: var(--bs-primary);
  --fc-list-event-hover-bg-color: var(--marka-acik);
}
.admin-takvim-sarmalayici .fc {
  font-family: inherit;
}
.admin-takvim-sarmalayici .fc .fc-toolbar {
  gap: .75rem;
  flex-wrap: wrap;
}
.admin-takvim-sarmalayici .fc .fc-toolbar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--marka-lacivert);
}
.admin-takvim-sarmalayici .fc .fc-button {
  box-shadow: none !important;
  text-transform: none;
  font-weight: 600;
  font-size: .82rem;
  padding: .4rem .9rem;
  border-radius: .55rem !important;
  transition: all .12s ease;
}
.admin-takvim-sarmalayici .fc .fc-button-primary:not(:disabled).fc-button-active,
.admin-takvim-sarmalayici .fc .fc-button-primary:not(:disabled):active {
  color: #fff;
  box-shadow: none !important;
}
.admin-takvim-sarmalayici .fc .fc-today-button {
  background: var(--marka-lacivert) !important;
  border-color: var(--marka-lacivert) !important;
  color: #fff !important;
}
.admin-takvim-sarmalayici .fc .fc-today-button:disabled {
  opacity: .5;
}
.admin-takvim-sarmalayici .fc .fc-icon-chevron-left,
.admin-takvim-sarmalayici .fc .fc-icon-chevron-right {
  font-size: .95rem;
}
.admin-takvim-sarmalayici .fc-theme-standard .fc-scrollgrid {
  border-radius: .75rem;
  overflow: hidden;
  border-color: #eef0f2;
}
.admin-takvim-sarmalayici .fc-theme-standard td,
.admin-takvim-sarmalayici .fc-theme-standard th {
  border-color: #eef0f2;
}
.admin-takvim-sarmalayici .fc .fc-col-header-cell {
  background: #f8fafc;
  padding: .65rem 0;
}
.admin-takvim-sarmalayici .fc .fc-col-header-cell-cushion {
  text-decoration: none !important;
  color: var(--marka-lacivert);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.admin-takvim-sarmalayici .fc .fc-daygrid-day-number {
  text-decoration: none !important;
  color: #475569;
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem .6rem;
}
.admin-takvim-sarmalayici .fc .fc-day-today .fc-daygrid-day-number {
  color: var(--bs-primary);
  font-weight: 800;
}
.admin-takvim-sarmalayici .fc .fc-daygrid-day-frame {
  min-height: 96px;
}
.admin-takvim-sarmalayici .fc .fc-daygrid-day:hover {
  background: #fafbfc;
  cursor: pointer;
}
.admin-takvim-sarmalayici .fc .fc-day-other .fc-daygrid-day-number {
  color: #cbd5e1;
}
.admin-takvim-sarmalayici .fc .fc-daygrid-event {
  border-radius: .4rem;
  padding: .2rem .5rem;
  font-size: .74rem;
  font-weight: 600;
  border: none !important;
  margin-top: 2px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.admin-takvim-sarmalayici .fc .fc-daygrid-event .fc-event-time {
  font-weight: 700;
}
.admin-takvim-sarmalayici .fc .fc-daygrid-more-link {
  font-weight: 600;
  font-size: .74rem;
  color: var(--bs-primary);
}
.admin-takvim-sarmalayici .fc .fc-timegrid-slot-label-cushion {
  color: #64748b;
  font-size: .78rem;
  font-weight: 600;
}
.admin-takvim-sarmalayici .fc .fc-timegrid-event {
  border-radius: .4rem;
  border: none !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}
.admin-takvim-sarmalayici .fc .fc-timegrid-now-indicator-line {
  border-color: var(--marka-vurgu);
}
.admin-takvim-sarmalayici .fc .fc-timegrid-now-indicator-arrow {
  border-color: var(--marka-vurgu);
  color: var(--marka-vurgu);
}
.admin-takvim-sarmalayici .fc .fc-list-day-cushion {
  background: #f8fafc;
}
.admin-takvim-sarmalayici .fc .fc-list-day-text,
.admin-takvim-sarmalayici .fc .fc-list-day-side-text {
  text-decoration: none !important;
  color: var(--marka-lacivert);
  font-weight: 700;
}
.admin-takvim-sarmalayici .fc .fc-list-event {
  cursor: pointer;
}
.admin-takvim-sarmalayici .fc .fc-list-event-title {
  font-weight: 600;
  color: var(--marka-lacivert);
}
.admin-takvim-sarmalayici .fc .fc-list-event-dot {
  border-width: 5px;
}
.admin-takvim-sarmalayici .fc .fc-list-empty {
  background: #fff;
  color: #94a3b8;
  font-weight: 600;
}
.admin-takvim-sarmalayici .fc-event {
  cursor: pointer;
}

/* --- Müşteri dosya/klasör sistemi (business/musteri-profil.php "Dosyalar" sekmesi ve
   customer/dosyalarim.php "Dosyalarım") --- */
.dosya-klasor-karti {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dosya-klasor-karti:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
}
.dosya-klasor-ikon {
  font-size: 2.4rem;
  color: #f5b942;
}
.dosya-klasor-liste .list-group-item {
  border-left: 0;
  border-right: 0;
}
.dosya-klasor-liste .list-group-item:first-child {
  border-top-left-radius: .6rem;
  border-top-right-radius: .6rem;
}
.dosya-klasor-liste .list-group-item:last-child {
  border-bottom-left-radius: .6rem;
  border-bottom-right-radius: .6rem;
}
.dosya-klasor-satir {
  cursor: pointer;
  transition: background-color .15s ease;
}
.dosya-klasor-satir:hover {
  background-color: #f8fafc;
}
.dosya-klasor-ikon-liste {
  font-size: 1.3rem;
  color: #f5b942;
}

/* --- Segmented sekme grubu (nav-tabs yerine, ör. business/muhasebe-faturalar.php Kesilen/Gelen) --- */
.admin-sekme-grubu {
  display: inline-flex;
  gap: .3rem;
  padding: .3rem;
  background: #f1f5f9;
  border-radius: .85rem;
  border: none;
  flex-wrap: wrap;
}
.admin-sekme {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: .65rem;
  font-weight: 600;
  font-size: .875rem;
  color: #64748b;
  text-decoration: none;
  border: none;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.admin-sekme:hover {
  color: var(--marka-lacivert);
  text-decoration: none;
}
.admin-sekme.active {
  background: #fff;
  color: var(--marka-lacivert);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .14);
}
.admin-sekme-ikon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  background: #e2e8f0;
  color: #94a3b8;
  transition: background-color .15s ease, color .15s ease;
}
.admin-sekme.active .admin-sekme-ikon-kesilen {
  background: var(--marka-acik);
  color: var(--marka-koyu);
}
.admin-sekme.active .admin-sekme-ikon-gelen {
  background: #dbeafe;
  color: #2563eb;
}
.admin-sekme.active .admin-sekme-ikon-borc {
  background: #fee2e2;
  color: #dc2626;
}
.admin-sekme-sayac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 .4rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: .74rem;
  font-weight: 700;
}
.admin-sekme.active .admin-sekme-sayac {
  background: var(--marka-koyu);
  color: #fff;
}
@media (max-width: 575.98px) {
  .admin-sekme-grubu {
    width: 100%;
  }
  .admin-sekme {
    flex: 1;
    justify-content: center;
  }
}

/* ============ DİYET PLANI EDİTÖRÜ (business/diyet-plani-duzenle.php) ============ */
.diyet-gun-ekle-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.9rem;
  box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.05);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.diyet-gun-ekle-ikon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 0.7rem;
  background: var(--marka-acik);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.diyet-gun-ekle-metin { margin-right: auto; }
.diyet-gun-ekle-baslik { font-weight: 700; color: var(--marka-lacivert); font-size: .92rem; }
.diyet-gun-ekle-alt { font-size: .78rem; color: #94a3b8; }
.diyet-gun-ekle-form { flex-wrap: nowrap; }
.diyet-gun-ekle-form input[type="date"] {
  width: auto;
  min-width: 0;
  flex: 1 1 160px;
}
.diyet-gun-ekle-form button {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .diyet-gun-ekle-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .diyet-gun-ekle-form {
    width: 100%;
  }
}

.diyet-ay-baslik {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.75rem 0 1rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-primary);
}
.diyet-ay-baslik::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.diyet-gun-karti {
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 1rem;
  box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.05);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.diyet-gun-ust {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f6;
}
.diyet-akordiyon-tetik {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.diyet-akordiyon-ikon {
  color: #94a3b8;
  font-size: .75rem;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.diyet-akordiyon-tetik.collapsed .diyet-akordiyon-ikon {
  transform: rotate(-90deg);
}
.diyet-gun-tarih {
  font-weight: 700;
  color: var(--marka-lacivert);
  font-size: .95rem;
}
.diyet-gun-tarih i { color: var(--bs-primary); margin-right: .35rem; }
.diyet-gun-aksiyonlar { margin-left: auto; display: flex; gap: .5rem; }
.diyet-gun-govde { padding: 1.1rem 1.25rem; }

.diyet-kcal-rozet {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--marka-acik);
  color: var(--marka-koyu);
  font-weight: 700;
  font-size: .78rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  white-space: nowrap;
}
.diyet-kcal-rozet-sm { font-size: .72rem; padding: .22rem .55rem; }

.diyet-ogun-karti {
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: .85rem;
  padding: .9rem 1rem;
  margin-bottom: .75rem;
}
.diyet-ogun-karti:last-child { margin-bottom: 0; }
.diyet-ogun-ust {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.diyet-ogun-baslik {
  font-weight: 700;
  color: var(--marka-lacivert);
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.diyet-ogun-baslik i { color: var(--bs-primary); }
.diyet-ogun-saat { font-weight: 500; color: #94a3b8; font-size: .78rem; }
.diyet-ogun-aksiyonlar { margin-left: auto; display: flex; gap: .4rem; }

.diyet-kalem-listesi { background: #fff; border-radius: .65rem; overflow: hidden; border: 1px solid #eef2f6; }
.diyet-kalem-satir {
  padding: .55rem .75rem;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color .15s;
}
.diyet-kalem-satir:last-child { border-bottom: none; }
.diyet-kalem-satir:hover { background: #f8fafc; }
.diyet-kalem-ust {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.diyet-kalem-kullanici-notu {
  font-size: .74rem;
  color: #b45309;
  font-style: italic;
  margin-top: .3rem;
  padding-left: calc(28px + .65rem);
}
.diyet-kalem-kullanici-notu i { margin-right: .25rem; opacity: .75; }
.diyet-kalem-detay {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .65rem;
  margin-top: .35rem;
  padding-left: calc(28px + .65rem);
}
.diyet-kalem-detay-ozellik {
  font-size: .71rem;
  color: #94a3b8;
  white-space: nowrap;
}
.diyet-kalem-detay-ozellik strong {
  color: #475569;
  font-weight: 600;
}
.diyet-kalem-tik-buton {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: .5rem;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .74rem;
  cursor: pointer;
  transition: all .15s;
  padding: 0;
}
.diyet-kalem-tik-buton:hover { border-color: #16a34a; }
.diyet-kalem-tik-buton.yapildi {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.diyet-kalem-durum-rozeti {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: #cbd5e1;
}
.diyet-kalem-durum-rozeti.yapildi { color: #16a34a; }
.diyet-kalem-ikon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: .55rem;
  background: #dcfce7;
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
}
.diyet-kalem-ad { font-weight: 600; color: var(--marka-lacivert); font-size: .86rem; }
.diyet-kalem-not { color: #94a3b8; font-size: .74rem; margin-left: .3rem; }
.diyet-kalem-miktar {
  margin-left: auto;
  color: #64748b;
  font-size: .76rem;
  background: #f1f5f9;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.diyet-kalem-kcal {
  font-weight: 700;
  color: var(--marka-koyu);
  font-size: .82rem;
  white-space: nowrap;
  min-width: 68px;
  text-align: right;
}
.diyet-kalem-sil-buton { opacity: .45; transition: opacity .15s; }
.diyet-kalem-satir:hover .diyet-kalem-sil-buton { opacity: 1; }

.diyet-bos-durum {
  text-align: center;
  color: #94a3b8;
  padding: 1.25rem;
  font-size: .85rem;
}

/* ============ VÜCUT ÖLÇÜLERİ (business/diyet-vucut-olcumleri.php) — gerçek görsel + üzerine hotspot ============ */
.diyet-cinsiyet-secici { display: inline-flex; gap: .4rem; }
.vucut-diyagram-satir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.vucut-gorsel-alani {
  position: relative;
  flex: 0 1 460px;
  max-width: 460px;
  width: 100%;
}
.vucut-gorsel { width: 100%; height: auto; display: block; user-select: none; }
.vucut-hotspot-gorsel {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  border: 2.5px solid var(--bs-primary);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.vucut-hotspot-gorsel:hover {
  background: var(--marka-acik);
  transform: translate(-50%, -50%) scale(1.2);
}
.vucut-hotspot-gorsel.vucut-hotspot-dolu {
  background: rgba(22, 163, 74, .15);
  border-color: #16a34a;
}
.vucut-hotspot-etiket {
  position: absolute;
  z-index: 2;
  background: #fff;
  border: 1.5px solid #16a34a;
  border-radius: .4rem;
  padding: .15rem .4rem;
  font-size: .64rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--marka-lacivert);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 .15rem .35rem rgba(15, 23, 42, .1);
}
.vucut-hotspot-etiket-sag { transform: translate(16px, -50%); }
.vucut-hotspot-etiket-sol { transform: translate(calc(-100% - 16px), -50%); }
@media (max-width: 575.98px) {
  .vucut-gorsel-alani { max-width: 280px; }
  .vucut-hotspot-gorsel { width: 18px; height: 18px; border-width: 2px; }
  .vucut-hotspot-etiket { font-size: .58rem; padding: .1rem .3rem; }
  .vucut-hotspot-etiket-sag { transform: translate(13px, -50%); }
  .vucut-hotspot-etiket-sol { transform: translate(calc(-100% - 13px), -50%); }
}

.diyet-kompozisyon-yuzen-kutu {
  position: relative;
  width: 320px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 1.1rem;
  box-shadow: 0 1rem 2rem -.5rem rgba(15, 23, 42, .16), 0 .125rem .4rem rgba(15, 23, 42, .06);
  padding: 1.15rem 1.3rem 1.3rem;
}
.diyet-kompozisyon-yuzen-baslik {
  font-size: .82rem;
  font-weight: 700;
  color: var(--marka-lacivert);
  text-transform: uppercase;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .8rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.diyet-kompozisyon-yuzen-baslik i { color: var(--bs-primary); font-size: .88rem; }
.diyet-kompozisyon-yuzen-duzenle {
  position: absolute;
  top: -13px;
  right: -13px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--bs-primary);
  color: #fff;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 .3rem .6rem rgba(15, 23, 42, .25);
  cursor: pointer;
}
.diyet-kompozisyon-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem .75rem;
}
.diyet-kompozisyon-hucre { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.diyet-kompozisyon-hucre span {
  display: block;
  font-size: .64rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diyet-kompozisyon-hucre span i { width: 13px; text-align: center; margin-right: .25rem; color: #94a3b8; }
.diyet-kompozisyon-hucre strong {
  font-size: .88rem;
  color: var(--marka-lacivert);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diyet-kompozisyon-yuzen-kutu .text-muted.small { font-size: .62rem; margin-top: .5rem; }
@media (max-width: 991.98px) {
  .vucut-diyagram-satir { flex-direction: column; align-items: center; }
  .diyet-kompozisyon-yuzen-kutu { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; }
}
@media (max-width: 575.98px) {
  .diyet-kompozisyon-yuzen-kutu { max-width: 280px; padding: .95rem 1rem 1.05rem; }
  .diyet-kompozisyon-hucre span { font-size: .58rem; }
  .diyet-kompozisyon-hucre strong { font-size: .7rem; }
  .diyet-kompozisyon-yuzen-baslik { font-size: .66rem; }
}

.besin-sonuc-satiri { padding: .65rem .9rem; }
.besin-sonuc-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.besin-sonuc-ad { font-weight: 600; color: var(--marka-lacivert); font-size: .88rem; }
.besin-sonuc-kategori { font-size: .72rem; color: #94a3b8; margin-top: .1rem; }
.besin-sonuc-stats {
  display: flex;
  gap: 1.1rem;
  flex-shrink: 0;
}
.besin-sonuc-stat {
  font-size: .78rem;
  color: #64748b;
  min-width: 46px;
  text-align: right;
  white-space: nowrap;
}
.besin-sonuc-stat strong { color: var(--marka-lacivert); font-weight: 700; }
@media (max-width: 767.98px) {
  .besin-sonuc-stats { gap: .65rem; }
  .besin-sonuc-stat { min-width: 0; font-size: .72rem; }
}

/* ============ DİŞ ŞEMASI (business/dis-hekimi.php) — assets/img/dis.png (gerçek, önden çekilmiş TEK
   fotoğraf, üst+alt çene aynı karede) üzerine, Vücut Ölçüleri modülündeki (spor_vucut_gorsel.php) "gerçek
   görsel + yüzde-koordinatlı hotspot" deseninin aynısı. Hotspot merkez koordinatları görsel üzerinde
   sütun-bazlı parlaklık taraması + yerel-minimum (diş arası vadi) tespitiyle ölçüldü. Görsel dis.svg'den
   FARKLI OLARAK zaten üst+alt çeneyi tek karede içerdiğinden ayrı blok/dikey-aynalama YOK — tek görsel,
   üzerinde 28 hotspot (yirmilik dişler bu fotoğrafta görünmediğinden hotspot'ları da yok). Dar ekranlarda
   hotspot'lar sıkışmasın diye .dis-semasi-scroll ile yatay kaydırma sağlanır (grid'li ilk sürümdeki
   overflow-x:auto ile aynı amaç). */
.dis-semasi-scroll { overflow-x: auto; padding-bottom: .5rem; }
.dis-semasi-gorsel-alani { position: relative; width: 820px; margin: 0 auto; }
.dis-semasi-gorsel { width: 100%; height: auto; display: block; user-select: none; pointer-events: none; }
.dis-hucre {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .56rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  /* beyaz halka: dişin kendi (krem/beyaz) rengine karışmadan her durumda net seçilsin diye */
  box-shadow: 0 0 0 2px #fff, 0 .15rem .4rem rgba(15, 23, 42, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.dis-hucre:hover { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 0 2px #fff, 0 .3rem .6rem rgba(15, 23, 42, .5); z-index: 2; }
/* durum-* renk sınıfları BİLİNÇLİ OLARAK .dis-hucre'ye bağlı DEĞİL — hem diş hotspot'larında hem legend
   noktalarında (aşağıda) ortak kullanılır. Doygun/dolu renkler + beyaz metin (soluk pastel tonlar diş
   fotoğrafının krem/beyaz zeminiyle karışıp okunaksız kaldığı için terk edildi). */
.durum-saglikli { background: #22c55e; border-color: #15803d; color: #fff; }
.durum-curuk { background: #ef4444; border-color: #b91c1c; color: #fff; }
.durum-dolgulu { background: #3b82f6; border-color: #1d4ed8; color: #fff; }
.durum-kanal_tedavili { background: #f59e0b; border-color: #b45309; color: #fff; }
.durum-kron_kopru { background: #8b5cf6; border-color: #6d28d9; color: #fff; }
.durum-cekilmis { background: #64748b; border-color: #334155; color: #fff; }
.dis-hucre.durum-cekilmis { text-decoration: line-through; }
.durum-implant { background: #06b6d4; border-color: #0e7490; color: #fff; }
/* Süt Dişi Modu (dis_sut_semasi_govde.php) — GÖRSELSİZ, .dis-hucre'nin düz bir flex grid içinde duran
   statik (position:relative, transform yok) varyantı. Aynı durum-* renkleri/click-delegation'ı paylaşır. */
.dis-hucre-statik { position: relative; transform: none; margin: 4px; }
.dis-hucre-statik:hover { transform: scale(1.15); }
.dis-sut-semasi-satir { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; }
.dis-semasi-ceyrek-etiket { text-align: center; font-size: .66rem; color: #94a3b8; margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .03em; }
/* Planlı (henüz tamamlanmamış) kaydı olan dişin hotspot'unda küçük saat rozeti — dişin RENGİNİ etkilemez,
   sadece "bekleyen bir planı var" bilgisi verir. */
.dis-hucre-plan-isareti { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #0f172a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .5rem; box-shadow: 0 0 0 2px #fff; }
.dis-semasi-legend { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 1.1rem; font-size: .78rem; color: #475569; }
.dis-semasi-legend-oge { display: flex; align-items: center; gap: .35rem; }
.dis-semasi-legend-nokta { width: 12px; height: 12px; border-radius: .25rem; display: inline-block; flex-shrink: 0; border-width: 2px; border-style: solid; }

/* Toplu Mail: alıcı combobox'ı (TomSelect çoklu seçim) çok sayıda etiket birikince sınırsız
   büyümesin diye kendi içinde kaydırılır. */
/* Kapalıyken Şehir seçimindeki gibi tek satır özet metni görünsün diye TomSelect'in seçili
   öğe etiketlerini (.item, her biri ayrı bir chip) gizleyip yerine JS'in eklediği tek bir
   .toplu-mail-alici-ozet metnini gösteriyoruz. */
.toplu-mail-alici-tomselect .item { display: none !important; }
.toplu-mail-alici-tomselect .toplu-mail-alici-ozet { color: #495057; padding: 2px 0; }