/* İşletme Online — Beapp temasının (public/assets/beapp/css/style.css)
   karşılamadığı birkaç bileşen için KÜÇÜK bir ek. Beapp'ın kendi renk/
   tipografi/boşluk değerleri BİREBİR tekrar kullanılır (#384DFF/#24CDFF
   gradyanı, #4886FF vurgu, #3B566E başlık, #6F8BA4 gövde metni, Nunito) —
   yeni bir tasarım dili icat edilmez. */

/* Gerçek uygulama ekran görüntüsü için sade telefon çerçevesi. */
.phone-frame {
  max-width: 260px;
  margin: 0 auto;
  padding: 10px;
  background: #1A2233;
  border-radius: 42px;
  box-shadow: 0 30px 70px rgba(59, 86, 110, 0.28);
}
.phone-frame img {
  display: block;
  width: 100%;
  border-radius: 32px;
}
/* Hizmet detay sayfası — gerçek ekran görüntüleri hazır olana kadar
   `.phone-frame` görselinin YER TUTUCU olduğunu belirten küçük altyazı
   (bkz. `Config\SiteHizmetler::$defaultScreenshot` doc-blok). */
.screenshot-caption {
  margin-top: 14px;
  font-size: 12px;
  color: #8CA2B8;
  font-style: italic;
}

/* Metin logosu — bize ait bir logo dosyası olmadığından Beapp'ın
   light-logo/dark-logo <img> değişimi yerine renk geçişiyle aynı işi
   görür (bkz. custom.js scrollNavBar → .header-sticky). */
.logo-text {
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.3px;
  color: #3B566E;
  transition: color 0.3s ease;
}
.logo-text.dark {
  color: #3B566E;
}

/* Header her zaman (hem sayfa başında hem kaydırılınca) #F4F8FB zeminli
   olsun (kullanıcı talebi) — Beapp'ın "üstte şeffaf/koyu hero üzerinde
   beyaz metin, kaydırılınca beyaz zemin/koyu metin" iki-durumlu tasarımı
   yerine TEK, tutarlı açık zemin. Metin/logo/CTA renkleri bu yüzden HER
   İKİ durumda da koyu (`.header-sticky` ile AYNI) olacak şekilde
   düzeltilir — aksi halde beyaz metin bu açık zeminde okunmaz kalırdı.
   Yükseklik/gölge geçişi (100px→80px, box-shadow) DEĞİŞMEDİ. */
.header-area,
.header-area.header-sticky {
  background: #F4F8FB;
}
.header-area .main-nav .nav li a {
  color: #3B566E;
}
.header-area .main-nav .nav li a:hover {
  color: #4886FF;
}
.header-area .main-nav .nav li a.btn-nav-line {
  border-color: #4886FF;
  color: #4886FF;
}
.header-area .main-nav .nav li a.btn-nav-line:hover {
  background: #4886FF;
  color: #fff;
}
@media (max-width: 991px) {
  .header-area {
    background: #F4F8FB;
  }
}

/* Hero altındaki güven rozetleri */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
}
.hero-trust span {
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}
.hero-trust i {
  color: #fff;
  margin-right: 6px;
}

/* Ekip kartı — gerçek fotoğraf gelene kadar gradyanlı ikon avatar */
.team-item .header .img.avatar-placeholder {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(127deg, #384DFF 0%, #24CDFF 91%);
  color: #fff;
  font-size: 26px;
}

/* Blog kartı — stok fotoğraf yerine gradyanlı ikon kapak */
.blog-post-thumb .img.gradient-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(127deg, #384DFF 0%, #24CDFF 91%);
  color: #fff;
  font-size: 44px;
}

/* Fiyatlandırma — modül x özellik karşılaştırma tablosu. Bu ekran satış
   ekibinin en çok kullanacağı sayfa olduğu için ayrı bir özenle: sabit
   (sticky) modül adı sütunu, yatay kaydırmalı gövde, satır seçimiyle
   canlı fiyat hesaplama. */
.pricing-table-wrap {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 48px rgba(59, 86, 110, 0.1);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.pricing-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
}
.pricing-table thead th {
  background: #F4F8FB;
  color: #3B566E;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 18px 14px;
  border-bottom: 2px solid #ECF7FF;
  white-space: nowrap;
}
.pricing-table thead th.col-module { text-align: left; }
.pricing-table thead th.col-price,
.pricing-table thead th.col-action { text-align: center; }
.pricing-table tbody td {
  padding: 16px 14px;
  border-bottom: 1px solid #ECF7FF;
  text-align: center;
  vertical-align: middle;
}
.pricing-table tbody tr { transition: background-color 0.2s ease; cursor: pointer; }
.pricing-table tbody tr:hover { background: #FAFCFF; }
.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-table tbody tr.selected { background: #EDF5FF; }
.pricing-table tbody tr.selected .col-module { box-shadow: inset 3px 0 0 #4886FF; }

.pricing-table td.col-module,
.pricing-table th.col-module {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  text-align: left;
  min-width: 220px;
}
.pricing-table thead th.col-module { background: #F4F8FB; z-index: 3; }
.pricing-table tbody tr:hover .col-module { background: #FAFCFF; }
.pricing-table tbody tr.selected .col-module { background: #EDF5FF; }

.module-name { display: flex; align-items: center; gap: 12px; color: #3B566E; font-weight: 700; font-size: 14px; letter-spacing: 0.2px; }
.module-name:hover { color: #4886FF; }
.module-name i {
  width: 34px; height: 34px; border-radius: 50%;
  background: #EDF5FF; color: #4886FF;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}

.pricing-table .col-check i.yes { color: #29B573; font-size: 18px; }
.pricing-table .col-check i.no { color: #C7D4E0; font-size: 14px; }

.pricing-table .col-price { font-weight: 800; color: #3B566E; font-size: 15px; white-space: nowrap; }
.pricing-table .col-price small { font-weight: 600; color: #8CA2B8; font-size: 11px; }

.pricing-table .select-btn {
  border: 1.5px solid #4886FF;
  background: transparent;
  color: #4886FF;
  padding: 8px 18px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
}
.pricing-table tr:hover .select-btn { border-color: #2E6BE0; }
.pricing-table tr.selected .select-btn {
  color: #fff;
  border-color: transparent;
  background-image: linear-gradient(127deg, #384DFF 0%, #24CDFF 91%);
}

.pricing-table-hint { margin-top: 14px; font-size: 13px; color: #8CA2B8; }
.pricing-table-hint i { margin-right: 6px; }

@media (max-width: 600px) {
  .pricing-table td.col-module, .pricing-table th.col-module { min-width: 180px; }
}

/* İletişim formu — ilgilenilen modüller onay kutusu ızgarası */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 560px) {
  .checkbox-grid { grid-template-columns: 1fr; }
}
.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6F8BA4;
}
.checkbox-grid input {
  width: 17px;
  height: 17px;
  accent-color: #4886FF;
}

/* Bildirim kutuları (kayıt/iletişim formu sonucu) */
.alert {
  padding: 16px 18px;
  border-radius: 4px;
  margin-bottom: 22px;
  font-weight: 600;
  font-size: 15px;
}
.alert.success { background: #E7F8EF; color: #29B573; }
.alert.danger { background: #E23B5C; color: #fff; }

/* "Hizmetler" mega menüsü — Beapp temasının .main-nav .nav'ına ek, temanın
   kendi renk/gölge diliyle (bkz. dosya başı not). Panel açılışı kademeli
   iyileştirme: masaüstünde HEM hover/focus-within (JS kapalıyken bile fare
   kullanıcıları için) HEM `.mega-menu-toggle`'ın eklediği `.is-open`
   sınıfıyla (dokunmatik/klavye, bkz. site.js) tetiklenir. Mobilde (bkz.
   style.css @media max-width: 991px, .main-nav .nav zaten slideToggle ile
   açılıyor) 8 grup başlığı ayrı ayrı akordeon gibi açılır/kapanır — 49
   satırlık düz bir liste yerine taranabilir gruplar (bkz. site.js). */
@media (min-width: 992px) {
  /* `<li>`'nin doğrudan çocukları (HİZMETLER linki + toggle butonu) yan
     yana dursun diye flex — Beapp'in `.nav li a { display:block }`
     kuralı tek başına bunu bir alt satıra düşürüyordu (block eleman
     kendinden sonrakini yeni satıra iter), flex container bunu geçersiz
     kılar (flex item'lar kendi `display`'inden bağımsız satırda kalır). */
  .header-area .main-nav .nav li.nav-item-dropdown {
    position: static;
    display: flex;
    align-items: center;
  }
  .header-area .main-nav .nav li.nav-item-dropdown .mega-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 36px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 11px;
    cursor: pointer;
    vertical-align: middle;
  }
  /* Panel `<li>`'nin (dar) genişliğine değil VIEWPORT'a göre ortalanır —
     panel `<li>`'den çok daha geniş olduğu için `position:absolute` +
     `left:50%` triggerin kendi konumuna göre ortalayınca panel ekranın
     sol tarafına kaymış görünüyordu (bkz. `.header-area` zaten
     `position:fixed` olduğu için `top:100px` sabit değeri güvenli). */
  .header-area .main-nav .nav li.nav-item-dropdown .mega-menu {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: min(94vw, 980px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(59, 86, 110, 0.18);
    padding: 22px 10px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 20;
  }
  .header-area .main-nav .nav li.nav-item-dropdown:hover .mega-menu,
  .header-area .main-nav .nav li.nav-item-dropdown:focus-within .mega-menu,
  .header-area .main-nav .nav li.nav-item-dropdown.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .mega-menu-col {
    flex: 1 1 210px;
    max-width: 235px;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .mega-menu-col-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4886FF;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ECF7FF;
  }
  .mega-menu-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mega-menu-col ul li {
    margin: 0;
  }
  /* Beapp'in `.header-area .main-nav .nav li a { display:block; height:
     36px; line-height:36px }` kuralı 3 sınıflı (0,3,2 özgüllük) — bizim
     tek sınıflı `.mega-menu-col ul li a` (0,1,3) bunu YENEMİYORDU, bu
     yüzden her satır 36px'e sıkışıp üst üste biniyordu. Aynı üst sınıf
     zincirini (`.header-area .main-nav .nav`) tekrarlayıp özgüllüğü
     kasıtlı olarak yükseltiyoruz (bkz. dosya geneli `!important` deseni,
     burada seçici özgüllüğü tercih edildi). */
  .header-area .main-nav .nav .mega-menu-col ul li a {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    height: auto;
    line-height: 1.3;
    padding: 7px 8px !important;
    border-radius: 8px;
    color: #3B566E !important;
  }
  .mega-menu-col ul li a:hover {
    background: #EDF5FF;
  }
  .mega-menu-col ul li a i {
    flex: 0 0 auto;
    width: 16px;
    margin-top: 2px;
    font-size: 13px;
    background: linear-gradient(127deg, #384DFF, #24CDFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .mega-menu-col ul li a strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #3B566E;
    line-height: 1.3;
  }
  .mega-menu-col ul li a small {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: #8CA2B8;
    line-height: 1.3;
    margin-top: 1px;
  }
}
@media (max-width: 991px) {
  .header-area .main-nav .nav li.nav-item-dropdown .mega-menu-toggle {
    display: none;
  }
  .header-area .main-nav .nav .mega-menu {
    background: #FAFCFF;
  }
  .mega-menu-col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 12px 20px 12px 55px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #3B566E;
    cursor: pointer;
  }
  .mega-menu-col-title::after {
    content: "\f107";
    font-family: FontAwesome;
    font-weight: normal;
    color: #8CA2B8;
    transition: transform 0.15s ease;
  }
  .mega-menu-col.is-open .mega-menu-col-title::after {
    transform: rotate(180deg);
  }
  .mega-menu-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
  }
  .mega-menu-col.is-open ul {
    display: block;
  }
  .header-area .main-nav .nav .mega-menu-col ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    line-height: 1.3;
    padding: 8px 20px 8px 55px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .mega-menu-col ul li a i {
    width: 16px;
    text-align: center;
  }
  .mega-menu-col ul li a small {
    display: none;
  }
}

/* Hizmet detay sayfası — hero'da başlık üstü etiket + alt açıklama
   (bkz. site/hizmet_detay.php), diğer sayfaların page-top'undan (sadece
   h1 + breadcrumb) daha fazla yer kapladığı için .cover biraz uzatılır. */
.cover-tall {
  min-height: 380px !important;
}
.hero-kicker {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.9;
}
.hero-lead {
  max-width: 720px;
  margin: 14px auto 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 26px;
}

/* Hizmet detay — "Bu sorunlar tanıdık geliyor mu?" listesi. */
.pain-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pain-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #ECF7FF;
  font-size: 15px;
  font-weight: 600;
  color: #3B566E;
}
.pain-points li:last-child {
  border-bottom: none;
}
.pain-points li i {
  color: #E23B5C;
  font-size: 17px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Hizmet detay — telefon çerçevesi yanındaki kısa öne çıkan özellik
   listesi (`.pain-points` ile AYNI yapı, sadece yeşil/olumlu vurgu). */
.check-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 700;
  color: #3B566E;
  font-size: 14.5px;
}
.check-list li i {
  color: #29B573;
  font-size: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Hizmet detay — sağ sütun "Hemen Ücretsiz Deneyin" kartı, .contact-info
   ile AYNI gradyan (bkz. dosya başı not), sabit yükseklik zorunlu değil. */
.hizmet-cta {
  background-image: linear-gradient(127deg, #384DFF 0%, #24CDFF 91%);
  border-radius: 16px;
  padding: 34px 26px;
  text-align: center;
  color: #fff;
  box-shadow: 0 20px 45px rgba(56, 77, 255, 0.28);
}
.hizmet-cta h4 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}
.hizmet-cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13.5px;
  line-height: 22px;
  margin-bottom: 22px;
}
.hizmet-cta .btn-white-line {
  display: block;
  margin-bottom: 12px;
}
.hizmet-cta .btn-white-line:last-child {
  margin-bottom: 0;
}

/* Hizmetler hub sayfası — .app-single .item'ı tıklanabilir karta çevirir,
   yeni bir tasarım dili İCAT EDİLMEZ, sadece <a> olarak render edildiği
   için gereken display/hover düzeltmesi eklenir. */
a.app-single-link.item {
  display: block;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
a.app-single-link.item:hover {
  background: #FAFCFF;
}
a.app-single-link.item:hover .content .title {
  color: #4886FF;
}

/* Hizmet detay — "İlgili modüller" / "Diğer hizmetlerimiz" çapraz link satırı. */
.related-links {
  font-size: 14px;
  color: #6F8BA4;
}
.related-links strong {
  color: #3B566E;
  margin-right: 6px;
}
.related-links a {
  color: #4886FF;
  font-weight: 600;
}
.mtop-30 {
  margin-top: 30px;
}

/* Entegrasyonlar sayfası — her kategori kartındaki sağlayıcı rozetleri
   (bkz. `Config\SiteIntegrations` doc-blok). */
.provider-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 20px;
}
.provider-chip {
  display: inline-block;
  background: #EDF5FF;
  color: #4886FF;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 100px;
}

/* Entegrasyonlar sayfası — kimlik bilgisi güvenliği notu. */
/* "Kullandığınız sağlayıcı listede yok mu?" CTA'sı — kullanıcı talebi
   üzerine dikkat çekici bir kart haline getirildi (eskiden düz metindi).
   Dolu mavi gradyan zemin + beyaz metin, sayfanın kendi marka rengini
   (`#4886FF`/`.contact-info` gradyanı) kullanır. */
.integrations-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  background-image: linear-gradient(127deg, #384DFF 0%, #24CDFF 91%);
  border-radius: 14px;
  padding: 28px 32px;
  color: #fff;
}
.integrations-cta i {
  font-size: 32px;
  color: #fff;
  flex-shrink: 0;
}
.integrations-cta-text {
  flex: 1;
}
.integrations-cta-text h5 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}
.integrations-cta-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 22px;
}
.integrations-cta .btn-primary-line {
  border-color: #fff;
  color: #fff;
  flex-shrink: 0;
}
.integrations-cta .btn-primary-line:hover {
  background: #fff;
  color: #384DFF;
}
@media (max-width: 700px) {
  .integrations-cta {
    flex-direction: column;
    text-align: center;
  }
}

/* Yasal sayfalar (Gizlilik Politikası / KVKK / Kullanım Şartları) —
   `.app-single .item`'ı uzun form metin içeriği için tipografik olarak
   düzenler; yeni bir tasarım dili İCAT EDİLMEZ, sadece başlık/liste
   boşlukları eklenir. */
.legal-content .item {
  padding: 44px 46px;
}
.legal-updated {
  color: #8CA2B8;
  font-size: 13px;
  font-style: italic;
  margin-bottom: 22px;
}
.legal-content h4 {
  color: #3B566E;
  font-weight: 800;
  font-size: 17px;
  margin-top: 34px;
  margin-bottom: 12px;
}
.legal-content h4:first-of-type {
  margin-top: 0;
}
.legal-content p,
.legal-content li {
  color: #6F8BA4;
  font-size: 14.5px;
  line-height: 26px;
}
.legal-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
}
.legal-content ul li {
  margin-bottom: 8px;
}
.legal-content a {
  color: #4886FF;
  font-weight: 600;
}
@media (max-width: 600px) {
  .legal-content .item {
    padding: 30px 22px;
  }
}

/* Footer alt bar — Gizlilik/KVKK/Kullanım Şartları linkleri, `.copyright`
   ile AYNI satırda, mobilde alt satıra sarar. */
.legal-links {
  display: inline-block;
  margin-left: 8px;
}
.legal-links a {
  color: #6F8BA4;
  text-decoration: underline;
  margin: 0 8px;
}
.legal-links a:hover {
  color: #4886FF;
}
@media (max-width: 600px) {
  .legal-links {
    display: block;
    margin-top: 10px;
    margin-left: 0;
  }
}

/* Çerez onay banner'ı (bkz. `assets/site/js/site.js` — görünürlük JS ile
   yönetilir, bu sadece görünümdür). */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(59, 86, 110, 0.25);
  padding: 18px 22px;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie-banner p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 13.5px;
  color: #6F8BA4;
  line-height: 20px;
}
.cookie-banner a {
  color: #4886FF;
  font-weight: 600;
}
.cookie-banner .btn-primary-line {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 16px;
  }
}

/* Gerçek logo (amblem + "İşletme Online" kelime markası) — bkz.
   `partials/header.php`/`partials/footer.php` doc-blok. `.logo`'nun
   kendi float/margin davranışı (bkz. style.css "header" bölümü)
   KORUNUR, sadece içeriği yatayda hizalamak için flex eklenir. */
.site-logo {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.site-logo img {
  height: 34px;
  width: auto;
  display: block;
}
.header-area.header-sticky .site-logo img {
  height: 30px;
}
footer .site-logo img {
  height: 40px;
}
@media (max-width: 991px) {
  .site-logo img {
    height: 30px;
  }
}

/* İletişim sayfası — harita alanı (`.map-wrapper`) tamamen kaldırıldı,
   iletişim bilgileri tam genişlikte yatay bir şerit olarak gösterilir
   (kullanıcı talebi). YENİ bir dış kapsayıcı sınıfı (`.contact-info-bar`)
   kullanıldığı için `beapp/style.css`'teki eski `.map-wrapper .contact-info`
   kuralları burada uygulanmaz — item/ikon/metin düzeni AŞAĞIDA baştan
   (float yerine flex/grid ile) tanımlanır. */
.contact-info-bar {
  width: 100%;
  background-image: linear-gradient(127deg, #384DFF 0%, #24CDFF 91%);
  padding: 36px 0;
  margin-bottom: 60px;
}
.contact-info-bar .contact-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  color: #fff;
}
@media (max-width: 991px) {
  .contact-info-bar .contact-info { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .contact-info-bar .contact-info { grid-template-columns: 1fr; }
}
.contact-info-bar .contact-info .item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
}
.contact-info-bar .contact-info .item i {
  font-size: 18px;
  margin-top: 3px;
  flex-shrink: 0;
}
.contact-info-bar .contact-info .item span {
  width: auto;
  font-size: 14px;
  line-height: 1.5;
}
.contact-info-bar .contact-info .item span a {
  color: #fff;
}

/* SSS sayfası — collapsible kartlar (native <details>/<summary>, ekstra
   JS gerekmeden aç/kapa + erişilebilirlik) + arama kutusu (kullanıcı
   talebi). `.app-single .item`'ın kendi padding/border'ı KORUNUR, sadece
   `summary` (ikon+başlık, HER ZAMAN görünür satır) ve `content` (cevap,
   sadece açıkken görünür) düzeni float yerine flex/block ile yeniden
   tanımlanır. */
.app-single .item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.app-single .item summary::-webkit-details-marker {
  display: none;
}
.app-single .item summary i {
  font-size: 22px;
  flex-shrink: 0;
  background-image: linear-gradient(127deg, #384DFF 0%, #24CDFF 91%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.app-single .item summary .title {
  margin: 0;
  flex: 1;
}
.app-single .item summary::after {
  content: "\f107";
  font-family: FontAwesome;
  color: #6F8BA4;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.app-single .item[open] summary::after {
  transform: rotate(180deg);
}
.app-single .item .content {
  padding: 16px 0 0 38px;
}
.app-single .item .content .text {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.88px;
  line-height: 28px;
  color: #6F8BA4;
}
.app-single .item .content .text p {
  margin-bottom: 0;
}

.faq-search-input {
  width: 100%;
  height: 54px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding-left: 22px;
  padding-right: 22px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}
.faq-search-input:focus {
  border-color: #4886FF;
}

/* Kayıt Ol formu — minimalist yeniden tasarım (kullanıcı talebi). Vurgu
   rengi/tipografi site genelindeki #4886FF ve .post-comment ile AYNI,
   sadece daha az görsel gürültü (üç ayrı <h5> bölüm başlığı yerine tek
   akan kart) ve şehir/ilçe <select>'leri için stil eklenir. */
.register-card {
  background: #F4F8FB;
  padding: 40px;
  border-radius: 4px;
  margin-bottom: 30px;
}
.register-form .form-item label i {
  color: #4886FF;
  margin-right: 6px;
  font-size: 13px;
}
.register-form .form-item select {
  border: 1px solid #eee;
  width: 100%;
  height: 50px;
  outline: none;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #16211F;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236F8BA4' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.register-form .form-item select:disabled {
  background-color: #F4F8FB;
  color: #9AABC2;
  cursor: not-allowed;
}
.register-form .form-item select:focus {
  border: 1px solid #ddd;
}

.module-picker {
  margin: 26px 0 6px;
}
.module-picker-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #16211F;
  margin-bottom: 12px;
}
.module-picker-label span {
  font-weight: 400;
  color: #6F8BA4;
}
.module-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 767px) {
  .module-picker-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .module-picker-grid { grid-template-columns: 1fr; }
}
.module-picker-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.module-picker-item i {
  color: #4886FF;
  font-size: 15px;
  flex-shrink: 0;
}
.module-picker-item span {
  font-size: 13px;
  font-weight: 600;
  color: #16211F;
  line-height: 1.3;
}
.module-picker-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.module-picker-item:has(input:checked) {
  border-color: #4886FF;
  background: #EDF5FF;
}