/* ==================================================================
   BestPos açılış sayfası düzeltmeleri

   Ayrı dosya, bilerek: styles.css satıcı temasının ana dosyası ve
   üzerinde başka değişiklikler de yürüyor. Buradaki kurallar en son
   yüklendiği için tema kurallarını geçersiz kılar, birleştirme
   çakışması çıkarmaz.
   ================================================================== */

/* ------------------------------------------------------------------
   Başlıktaki yazı animasyonu

   Başlığın ikinci parçası ("kafeler için", "restoranlar için") harf
   harf yazılıyor. Aynı satırda aktığı için metin uzadıkça h1 bir
   satırdan iki satıra geçiyor ve altındaki her şey aşağı kayıyor.
   Ölçüldü: aynı sayfanın iki ayrı çekiminde başlık farklı
   yükseklikteydi ve kelime ortasından bölünmüştü.

   Parça blok yapılınca yükseklik sabitleniyor.
------------------------------------------------------------------ */
.banner-content h1 [data-typer-targets] {
    display: block;
    min-height: 1.15em;
}

/* ------------------------------------------------------------------
   Plan kartlarının hizası

   Kartlarda farklı sayıda özellik satırı var. Kartlar üstten
   hizalandığı için "Planı seçin" düğmeleri farklı yüksekliklerde
   duruyordu. Kart tam yükseklik alıp gövde esneyince düğmeler alt
   kenarda buluşuyor.
------------------------------------------------------------------ */
.plans-list .row > [class*="col-"] {
    display: flex;
}

.plans-list .row > [class*="col-"] > .card {
    width: 100%;
}

.plans-list .card .card-body {
    display: flex;
    flex-direction: column;
}

.plans-list .card .card-body > ul {
    flex: 1 1 auto;
}

/* ------------------------------------------------------------------
   Alt bilgide bağlantısı olmayan özellik adları

   Bu satırlar bir sayfaya gitmiyor. Bağ gibi görünüp tıklanınca
   hiçbir şey yapmamaları yerine düz metin olarak basılıyorlar;
   renk ve boşluk bağ satırlarıyla aynı kalsın diye bu kural var.
------------------------------------------------------------------ */
.footer-section .footer-static-link {
    color: inherit;
    opacity: .85;
    cursor: default;
}

/* ==================================================================
   Görsel kalite düzeltmeleri, ölçüm 2026-08-27
   Canlı sayfa, 1440 ve 390 piksel genişlik.
   ================================================================== */

/* ------------------------------------------------------------------
   Özellik kartlarında kesilen Türkçe başlıklar

   responsive.css:266 altında 992 pikselin altındaki her ekranda
   kart başlığına "white-space: nowrap" ile birlikte taşma gizleme
   ve üç nokta uygulanıyordu. İngilizce başlıklar kısa olduğu için
   şablonda sorun çıkmıyordu, Türkçe karşılıkları uzun.

   Ölçüldü, 390 piksel: 16 başlığın 3'ü kesiliyordu.
     "Personel yetkileri"  -> "Personel yetki..."
     "Çevrimdışı çalışma"  -> "Çevrimdışı çal..."
     "ÖKC entegrasyonu"    -> "ÖKC entegras..."

   Başlık artık alt satıra geçiyor. Kesme yerine sarma seçildi:
   bunlar ürünün ne yaptığını anlatan tek kelimeler, yarısı
   okunamayınca kart bilgi taşımıyor.
------------------------------------------------------------------ */
@media (max-width: 992px) {
    .service-section .service-content h6 {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        width: auto;
    }
}

/* Başlık iki satıra çıkınca kartlar farklı yükseklikte kalıyordu.
   Sütun esner, kart sütunu doldurur, satırdaki kartlar eşitlenir. */
.service-section .row > [class*="col-"] {
    display: flex;
}

.service-section .service-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Tek satırlık ve iki satırlık başlıklar aynı hizada dursun diye
   başlığa iki satırlık yer ayrılıyor. Yer önceden ayrıldığı için
   sarma anında düzen kaymıyor. */
.service-section .service-content h6 {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-wrap: balance;
}

/* Kartlar veritabanından gelen 16 ayrı pastel zemine sahip. Renkler
   özellik ayrımını taşıdığı için değiştirilmedi; yalnızca ince bir
   iç kenarlık eklendi. Kenarlık olmadan açık pastel zeminler beyaz
   sayfada eriyip kart sınırı belirsizleşiyordu. */
.service-section .service-card {
    border: 1px solid rgba(16, 24, 40, .06);
    border-radius: 12px;
}

.service-section .service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -8px rgba(16, 24, 40, .16);
}

/* ------------------------------------------------------------------
   Başlıktaki tanıtım metni

   Ölçüldü: 15 piksel yazı, 22 piksel satır yüksekliği, 856 piksel
   satır genişliği. Bu satır başına yaklaşık 110 karakter demek,
   okunur aralığın (65 karakter) neredeyse iki katı. Gövde metni de
   16 pikselin altındaydı.

   Genişlik karakter biriminden sınırlandı, böylece yazı tipi
   değişse de satır uzunluğu korunuyor.
------------------------------------------------------------------ */
.home-banner-section .banner-content p {
    font-size: 17px;
    line-height: 1.65;
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    color: rgba(255, 255, 255, .92);
}

/* Başlık 54/64 pikselde kelime aralığı geniş duruyordu. */
.home-banner-section .banner-content h1 {
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* ------------------------------------------------------------------
   Dokunma hedefleri

   Ölçüldü, 390 piksel: "Demo isteyin" çerçeveli düğme 134x34,
   dolu düğmeler 42 piksel yüksekliğinde, menü düğmesi 38 piksel.
   Hepsi 44 pikselin altındaydı.

   Yazı boyutu küçültülmedi, iç boşluk ve en az yükseklik verildi.
------------------------------------------------------------------ */
.custom-btn {
    min-height: 48px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.custom-btn:active {
    transform: translateY(1px);
}

.navbar-toggler {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 992px) {
    .custom-btn {
        min-height: 46px;
        padding: 12px 20px;
    }

    /* İki düğme yan yana sığmayıp farklı yüksekliklerde kalıyordu. */
    .home-banner-section .banner-content .demo-btn-group {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------
   Alt bilgideki bağlantılar

   Ölçüldü, 390 piksel: bağlar 20 piksel yüksekliğinde, satırlar
   arası 25 piksel. Parmakla iki bağ arasındaki fark 5 piksel
   kalıyordu, yanlış bağa basmak kolaydı.

   Yazı boyutu aynı, yalnızca dikey iç boşluk verildi. Sosyal medya
   bağları zaten 40x40 olduğu için kapsam dışı bırakıldı.
------------------------------------------------------------------ */
@media (max-width: 992px) {
    .footer-section li:not(.social-link li) a,
    .footer-section li:not(.social-link li) .footer-static-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ------------------------------------------------------------------
   Plan kartlarının son satırı

   Beş plan üç sütunlu ızgarada duruyor: üstte üç kart, altta iki
   kart ve sağda boş bir hücre kalıyordu. Boşluk kartlardan biri
   eksikmiş gibi okunuyordu. Son satır ortalandı.
------------------------------------------------------------------ */
.plans-list .tab-pane > .row {
    justify-content: center;
}

/* ------------------------------------------------------------------
   Bölüm aralıkları

   Bütün bölümler 60 piksel üst ve alt boşluk kullanıyordu, giriş
   bölümü dışında hiçbir ayrım yoktu. Sayfa tek bir uzun blok gibi
   akıyordu. 80 piksele çıkarıldı, dar ekranda 48'e iniyor: aralık
   bir ölçeğe oturuyor (48 / 80 / 120).
------------------------------------------------------------------ */
.service-section,
.watch-demo-section,
.pricing-plan-section,
.slick-slider-section,
.customer-section,
.blogs-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 992px) {
    .service-section,
    .watch-demo-section,
    .pricing-plan-section,
    .slick-slider-section,
    .customer-section,
    .blogs-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .home-banner-section {
        padding-top: 88px;
    }
}

/* Bölüm başlığı ile içerik arasındaki 50 piksel, bölümler arası
   80 pikselle çakışıyordu. Başlık kendi bölümüne yakın dursun. */
body .section-title {
    margin-bottom: 40px;
}

.section-description {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------
   Klavye odağı

   Tema hiçbir öğede odak biçimi tanımlamıyordu; klavye ile gezen
   kullanıcı nerede olduğunu göremiyordu.
------------------------------------------------------------------ */
.custom-btn:focus-visible,
.header-section a:focus-visible,
.footer-section a:focus-visible,
.service-card:focus-visible,
.plans-list a:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 3px;
    border-radius: 8px;
}

/* Koyu zeminde kırmızı halka seçilmiyor, beyaza dönüyor. */
.home-banner-section a:focus-visible,
.header-section .navbar-toggler:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Hareket tercihi
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .service-section .service-card,
    .custom-btn {
        transition: none;
    }

    .service-section .service-card:hover,
    .custom-btn:active {
        transform: none;
    }

    /* Tema başlık görselini sürekli aşağı yukarı oynatıyor. */
    .move-image {
        animation: none !important;
    }
}


/* ------------------------------------------------------------------
   Odak halkası, ikinci geçiş

   Ölçüldü 2026-08-27 03:50, Chrome 151, Tab tuşu gerçekten gönderilerek:
   yukarıdaki :focus-visible kuralları renk ve çizgi biçimini geçiriyor
   ama kalınlığı geçiremiyordu. Hesaplanan değer 2 piksel yerine
   1 piksel, boşluk 3 piksel yerine 1 piksel çıkıyordu; sebep
   styles.css içindeki "a, a:hover, a:focus, a:active { outline: 0 }".
   Kalınlığı ve boşluğu !important ile geri alıyoruz, renk zaten
   doğru geliyordu.
------------------------------------------------------------------- */
.custom-btn:focus-visible,
.header-section a:focus-visible,
.footer-section a:focus-visible,
.plans-list a:focus-visible {
    outline-width: 2px !important;
    outline-style: solid !important;
    outline-offset: 3px !important;
}

.home-banner-section a:focus-visible,
.header-section .navbar-toggler:focus-visible {
    outline-color: #fff !important;
}