/* ==========================================================================
   ToolsBasic — anasayfa katmanı
   --------------------------------------------------------------------------
   Bu dosya tools.css'ten SONRA yüklenir (bkz. front/pages/home.blade.php ->
   @section('pages-styles')). Ortak dosyaya dokunmadan yalnızca anasayfayı
   düzeltir. Üç iş yapar:

   1) Yerleşim kaymalarını (CLS) kapatır: hero'nun sabit max-height'i kaldırılır,
      görsellerin kutusu (width/height + aspect-ratio) baştan rezerve edilir,
      kart ve grid yükseklikleri min-height ile sabitlenir, ikon yazı tipi
      (Font Awesome font-display:block) yüklenene kadar ikon kutuları yer tutar.
   2) Mobil düzeni sağlamlaştırır: 375px'te taşma/kırılma yok, yatay kaydırma yok,
      dokunma hedefleri en az 44px.
   3) Ölçülü hareket ekler: kart hover yükselmesi, bölümlerin görünüme girerken
      açılması, hero sayaçlarının sayarak artması. Tüm hareket transform/opacity
      ile yapılır (yerleşimi etkilemez) ve prefers-reduced-motion: reduce
      açıkken tamamen kapanır (dosyanın en sonundaki blok).

   Sınıf adları mevcut aileden çıkmaz: yeni eklenenlerin tamamı home-tools-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Ortak ölçü: hero kartı ile içerik bandındaki .container aynı hizada
   olsun. Bootstrap container genişlikleri değişken olarak tutulur, böylece
   hero başlığı alt bölümlerin başlıklarıyla aynı sol kenardan başlar.
   (Eskiden hero kartı 980px sabitti; 1280px'te alt başlıklardan 68px içeride
   duruyordu, bu da sayfanın "kaymış" görünmesinin sebeplerinden biriydi.)
   -------------------------------------------------------------------------- */
.home-tools-page {
    --home-shell-width: 100%;
    --home-shell-gutter: 12px;
}

@media (min-width: 576px) {
    .home-tools-page {
        --home-shell-width: 516px;
    }
}

@media (min-width: 768px) {
    .home-tools-page {
        --home-shell-width: 696px;
    }
}

@media (min-width: 992px) {
    .home-tools-page {
        --home-shell-width: 936px;
    }
}

@media (min-width: 1200px) {
    .home-tools-page {
        --home-shell-width: 1116px;
    }
}

/* --------------------------------------------------------------------------
   1) Yerleşim kaymaları (CLS)
   -------------------------------------------------------------------------- */

/* Yatay kaydırma kalkanı: dekoratif maskot ve arka plan hiçbir ekranda
   gövdeyi genişletemez. `clip` bilinçli seçildi; `overflow-x: hidden` diğer
   ekseni `auto`ya çevirip bölüm içinde dikey kaydırma kutusu oluşturuyor.
   Kalkan gövdeye verilmez, yoksa yapışkan (sticky) navbar bozulur. */
.home-tools-page main.tool-shell {
    overflow-x: clip;
}

.home-tools-page .home-tools-hero,
.home-tools-page .home-tools-band {
    max-width: 100%;
    overflow-x: clip;
}

/* tools.css'te hero'ya min-height ve max-height 500px birlikte verilmişti.
   İçerik 500px'i geçtiğinde kart bölümün dışına taşıp bir sonraki bölümün
   üstüne biniyordu (375px'te kart hero'nun 78px altına sarkıyordu). Sabit
   yükseklik yerine rezerve edilmiş bir taban yükseklik kullanılır. */
.home-tools-page .home-tools-hero {
    min-height: 0;
    max-height: none;
}

.home-tools-page .home-tools-hero .tool-stage-hero {
    display: flex;
    align-items: center;
    min-height: 520px;
    padding: 2.4rem var(--home-shell-gutter);
}

/* Arka plan katmanı hero'nun tamamını kaplar; kutusu içerikten bağımsız
   olarak baştan bellidir, görsel geç inse de hiçbir blok yer değiştirmez. */
.home-tools-page .home-tools-hero .tool-stage-bg {
    inset: 0;
    min-height: 100%;
    max-height: none;
    background-position: center center;
    background-size: cover;
}

/* Maskot artık CSS arka planı değil, width/height verilmiş gerçek bir <img>.
   Akış dışında olduğu için (absolute) yüklendiğinde hiçbir şeyi itmez;
   aspect-ratio ile kutusu ilk boyamadan önce rezerve edilir. */
.home-tools-page .home-tools-hero-mascot {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(150px, 17vw, 230px);
    height: auto;
    aspect-ratio: 506 / 452;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* Hero kartı: içerik bandı ile aynı genişlik ve hizada, yüksekliği rezerve. */
.home-tools-page .home-tools-stage-card {
    width: min(100%, var(--home-shell-width));
    min-height: 300px;
    margin: 0 auto;
    padding: 2rem;
}

.home-tools-page .home-tools-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.45fr);
    gap: 1.6rem;
    align-items: start;
}

/* Font takası (Poppins swap) satır sayısını değiştirebiliyor; başlıkta sabit
   satır yüksekliği ve kelime kırma ile sıçrama sınırlanır. */
.home-tools-page .home-tools-title {
    line-height: 1.06;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.home-tools-page .home-tools-copy {
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.75;
}

/* Font Awesome font-display:block ile geliyor; ikon yazı tipi inene kadar
   glif genişliği 0 oluyor ve satırlar kayıyordu. Tüm anasayfa ikonlarına
   sabit 1em'lik kutu verilir. */
.home-tools-page .home-tools-card-foot i,
.home-tools-page .home-tools-hero-search-field > i,
.home-tools-page .home-tools-cta .tool-button i,
.home-tools-page .home-tools-benefit-icon i {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   2) Hero: arama + kategori kısayolları + sayaçlar
   İlk ekranda "burada ne yapabilirim" sorusu yanıtlanır: başlık, arama,
   kategori kısayolları. Metinlerin tamamı dil dosyalarındaki mevcut
   anahtarlardan gelir.
   -------------------------------------------------------------------------- */
.home-tools-page .home-tools-hero-search {
    margin-top: 1.4rem;
}

.home-tools-page .home-tools-hero-search-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #e9d7ff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-tools-page .home-tools-hero-search-field {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: min(100%, 560px);
    min-height: 58px;
    padding: 0.35rem 0.4rem 0.35rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 34px rgba(37, 20, 54, 0.18);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.home-tools-page .home-tools-hero-search-field:focus-within {
    box-shadow: 0 0 0 0.22rem rgba(233, 215, 255, 0.45), 0 18px 34px rgba(37, 20, 54, 0.18);
}

.home-tools-page .home-tools-hero-search-field > i {
    color: #6b1fc3;
    font-size: 1rem;
}

.home-tools-page .home-tools-hero-search-input {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    /* Dokunma hedefi: alan kutusunun tamamı tıklanabilir olsun. */
    min-height: 44px;
    padding: 0.55rem 0;
    border: 0;
    background: transparent;
    color: #2f3442;
    font-size: 0.98rem;
    font-weight: 600;
}

.home-tools-page .home-tools-hero-search-input::placeholder {
    color: #8b8fa0;
    font-weight: 500;
}

.home-tools-page .home-tools-hero-search-input:focus {
    outline: 0;
}

.home-tools-page .home-tools-hero-search-submit {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #8f39e8, #5d1db0);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-tools-page .home-tools-hero-search-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(93, 29, 176, 0.32);
}

.home-tools-page .home-tools-hero-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.1rem;
}

.home-tools-page .home-tools-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.home-tools-page .home-tools-hero-chip:hover,
.home-tools-page .home-tools-hero-chip:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.home-tools-page .home-tools-hero-chip small {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(44, 9, 82, 0.28);
    color: #e9d7ff;
    font-size: 0.76rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Sayaç kartları: yükseklik rezerve, rakamlar sabit genişlikli. Böylece
   sayarak artan animasyon sırasında kart ne büyür ne küçülür. */
.home-tools-page .home-tools-hero-side .home-tools-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    margin-top: 0;
    justify-content: stretch;
}

.home-tools-page .home-tools-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-height: 96px;
    padding: 1rem 1.1rem;
}

.home-tools-page .home-tools-stat span {
    min-height: 1.9em;
}

/*
 * Sayaç dışındaki künye kartları daha küçük tipografi kullanır: asıl
 * vurgunun toplam işlem sayısında kalması için.
 */
.home-tools-page .home-tools-stat--fact {
    min-height: 0;
    padding: 0.7rem 1.1rem;
}

.home-tools-page .home-tools-stat--fact span {
    min-height: 0;
}

.home-tools-page .home-tools-stat--fact strong {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.home-tools-page .home-tools-stat-value {
    margin-top: 0;
    min-height: 1.35em;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   3) İçerik bölümleri: yükseklik rezervi, hizalama, dokunma hedefleri
   -------------------------------------------------------------------------- */
.home-tools-page .home-tools-band {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.home-tools-page .home-tools-section + .home-tools-section {
    margin-top: 3rem;
}

.home-tools-page .home-tools-section-head {
    align-items: flex-end;
    margin-bottom: 1.2rem;
}

.home-tools-page .home-tools-section-head h2,
.home-tools-page .home-tools-intro h2 {
    line-height: 1.14;
    overflow-wrap: break-word;
}

/* Popüler araçlar: kart yüksekliği rezerve, satırlar eşit yükseklikte. */
.home-tools-page .home-tools-grid {
    grid-auto-rows: 1fr;
    min-height: 230px;
}

.home-tools-page .home-tools-grid--popular {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.home-tools-page .home-tools-card {
    min-height: 226px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-tools-page .home-tools-card:hover,
.home-tools-page .home-tools-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 26px 48px rgba(53, 35, 83, 0.12);
}

.home-tools-page .home-tools-card-title {
    line-height: 1.35;
    overflow-wrap: break-word;
}

.home-tools-page .home-tools-card-meta {
    color: #7a7190;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.home-tools-page .home-tools-card-foot i {
    transition: transform 0.25s ease;
}

.home-tools-page .home-tools-card:hover .home-tools-card-foot i {
    transform: translateX(4px);
}

/* Kategori dizini: intro üstte, sekiz kategori altta eşit sütunlarda.
   Eskiden intro ile ızgara yan yana ve align-items:end idi; sütun yüksekliği
   içerikle değiştiği için hizalama şaşıyordu. */
.home-tools-page .home-tools-directory {
    display: block;
    margin-bottom: 0;
}

.home-tools-page .home-tools-directory .home-tools-intro {
    margin-bottom: 1.3rem;
}

.home-tools-page .home-tools-directory-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 1rem;
    min-height: 120px;
}

.home-tools-page .home-tools-directory-card {
    align-content: center;
    min-height: 116px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-tools-page .home-tools-directory-card:hover,
.home-tools-page .home-tools-directory-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(143, 57, 232, 0.22);
    box-shadow: 0 24px 44px rgba(53, 35, 83, 0.12);
}

.home-tools-page .home-tools-directory-card strong,
.home-tools-page .home-tools-directory-card small {
    font-variant-numeric: tabular-nums;
}

/* Faydalar: eşit sütunlar. tools.css'teki nth-child(even) translateY(1.2rem)
   kaldırıldı; transform yerleşimi büyütmediği için kartlar bölümün dışına
   taşıyor ve bir sonraki bölümün üstüne biniyordu. Kademeli görünüm artık
   yalnızca açılma animasyonunun gecikmesiyle veriliyor. */
.home-tools-page .home-tools-benefit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    min-height: 250px;
}

.home-tools-page .home-tools-benefit-card,
.home-tools-page .home-tools-benefit-card:nth-child(even) {
    transform: none;
    display: flex;
    flex-direction: column;
    min-height: 246px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-tools-page .home-tools-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 50px rgba(53, 35, 83, 0.12);
}

.home-tools-page .home-tools-benefit-icon {
    flex: 0 0 auto;
    place-items: center;
}

.home-tools-page .home-tools-benefit-card h3 {
    line-height: 1.35;
}

/* Bölüm yükseklikleri de rezerve: ikon yazı tipi (Font Awesome) ve Poppins
   takası satır sayısını değiştirse bile alttaki bölümler yer değiştirmez. */
.home-tools-page .home-tools-benefits {
    min-height: 360px;
}

.home-tools-page .home-tools-format-guide {
    min-height: 340px;
}

/* Format rehberi */
.home-tools-page .home-tools-guide-card {
    align-items: center;
    padding: 1.6rem;
}

.home-tools-page .tool-kicker--light {
    background: rgba(255, 255, 255, 0.14);
    color: #f7d6ff;
}

.home-tools-page .home-tools-format-grid {
    grid-auto-rows: 1fr;
    min-height: 150px;
}

.home-tools-page .home-tools-format-card {
    min-height: 142px;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.home-tools-page .home-tools-format-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.14);
}

/* SSS: uzun sorular kırılır, dokunma hedefi 44px'in üstünde, gövdedeki
   gömülü içerik (tablo/görsel/uzun bağlantı) yatay taşma yapamaz. */
.home-tools-page .home-tools-accordion .accordion-button {
    min-height: 60px;
    padding-right: 3.2rem;
    text-align: start;
    overflow-wrap: break-word;
}

.home-tools-page .home-tools-accordion .accordion-body {
    overflow-wrap: break-word;
}

.home-tools-page .home-tools-accordion .accordion-body img {
    max-width: 100%;
    height: auto;
}

.home-tools-page .home-tools-accordion .accordion-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.home-tools-page .home-tools-accordion .accordion-body a {
    overflow-wrap: anywhere;
}

/* CTA */
.home-tools-page .home-tools-cta {
    min-height: 200px;
    padding: 2rem;
}

.home-tools-page .home-tools-cta .tool-button {
    flex: 0 0 auto;
    background: #fff;
    color: #4b12a1;
    box-shadow: 0 18px 32px rgba(35, 12, 66, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-tools-page .home-tools-cta .tool-button:hover {
    transform: translateY(-2px);
    color: #4b12a1;
    box-shadow: 0 22px 38px rgba(35, 12, 66, 0.3);
}

.home-tools-page .home-tools-cta .tool-button i {
    transition: transform 0.25s ease;
}

.home-tools-page .home-tools-cta .tool-button:hover i {
    transform: translateX(4px);
}

/* Reklam alanları anasayfada da yerini korur (ADS_OPEN açıldığında
   yükseklik rezerve olduğu için içerik zıplamaz). */
.home-tools-page .site-ad-slot {
    min-height: 90px;
}

/* --------------------------------------------------------------------------
   4) Hareket katmanı
   Gizli başlangıç durumu yalnızca kök öğede .home-tools-motion-ready varken
   uygulanır. Bu sınıf JS ile ve sadece IntersectionObserver varken +
   prefers-reduced-motion kapalıyken ekleniyor; JS çalışmazsa içerik her
   koşulda görünür kalır. Animasyonlar sadece opacity/transform kullanır,
   yani hiçbir yerleşim kaymasına yol açmaz.
   -------------------------------------------------------------------------- */
.home-tools-motion-ready .home-tools-reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: opacity, transform;
}

.home-tools-motion-ready .home-tools-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: auto;
}

.home-tools-motion-ready .home-tools-reveal .home-tools-reveal-item {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}

.home-tools-motion-ready .home-tools-reveal.is-revealed .home-tools-reveal-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-tools-motion-ready .home-tools-reveal.is-revealed .home-tools-reveal-item:nth-child(2) {
    transition-delay: 0.06s;
}

.home-tools-motion-ready .home-tools-reveal.is-revealed .home-tools-reveal-item:nth-child(3) {
    transition-delay: 0.12s;
}

.home-tools-motion-ready .home-tools-reveal.is-revealed .home-tools-reveal-item:nth-child(4) {
    transition-delay: 0.18s;
}

.home-tools-motion-ready .home-tools-reveal.is-revealed .home-tools-reveal-item:nth-child(5) {
    transition-delay: 0.24s;
}

.home-tools-motion-ready .home-tools-reveal.is-revealed .home-tools-reveal-item:nth-child(6) {
    transition-delay: 0.3s;
}

.home-tools-motion-ready .home-tools-reveal.is-revealed .home-tools-reveal-item:nth-child(7) {
    transition-delay: 0.36s;
}

.home-tools-motion-ready .home-tools-reveal.is-revealed .home-tools-reveal-item:nth-child(n + 8) {
    transition-delay: 0.42s;
}

/* Maskotun çok yavaş süzülmesi. Akış dışında ve yalnızca transform
   animasyonu olduğu için yerleşimi etkilemez. */
@keyframes home-tools-float {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -10px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.home-tools-motion-ready .home-tools-hero-mascot {
    animation: home-tools-float 7s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   5) 992px altı
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .home-tools-page .home-tools-hero .tool-stage-hero {
        min-height: 0;
        padding: 2rem var(--home-shell-gutter) 2.2rem;
    }

    .home-tools-page .home-tools-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.3rem;
    }

    .home-tools-page .home-tools-hero-side .home-tools-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-tools-page .home-tools-directory-grid,
    .home-tools-page .home-tools-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-tools-page .home-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-tools-page .home-tools-hero-mascot {
        width: clamp(130px, 22vw, 190px);
    }
}

/* --------------------------------------------------------------------------
   6) 768px altı — mobil düzenin ana bloğu (375px hedefli)
   Sıra: başlık -> arama -> kategori kısayolları -> açıklama. Kullanıcı ilk
   ekranda ne yapabileceğini görüyor. Maskot için kartın ALTINDA yer rezerve
   edilir; böylece hiçbir zaman metnin üstüne binmez.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .home-tools-page .home-tools-hero .tool-stage-hero {
        padding: 1.4rem var(--home-shell-gutter) 6.5rem;
        border-radius: 0 0 24px 24px;
    }

    .home-tools-page .home-tools-stage-card {
        min-height: 0;
        padding: 1.35rem 1.15rem;
        border-radius: 24px;
    }

    .home-tools-page .home-tools-hero-main {
        display: grid;
        gap: 1rem;
    }

    .home-tools-page .home-tools-title {
        order: 1;
        font-size: clamp(1.85rem, 8.2vw, 2.25rem);
        line-height: 1.12;
    }

    .home-tools-page .home-tools-hero-search {
        order: 2;
        margin-top: 0;
    }

    .home-tools-page .home-tools-hero-shortcuts {
        order: 3;
        margin-top: 0;
    }

    .home-tools-page .home-tools-copy {
        order: 4;
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.68;
    }

    .home-tools-page .home-tools-hero-search-field {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 0.4rem;
        padding: 0.4rem 0.5rem;
    }

    .home-tools-page .home-tools-hero-search-input {
        flex: 1 1 55%;
        min-height: 44px;
        padding-left: 0.2rem;
    }

    .home-tools-page .home-tools-hero-search-submit {
        flex: 0 0 auto;
        min-width: 84px;
    }

    /* Kısayollar tek satırda kalır ve yatay kaydırılır (mobil kategori şeridi).
       Alternatifi 4 satır çip yığınıydı; hero 200px daha uzuyor ve arama
       ilk ekrandan düşüyordu. Şerit yalnızca kendi içinde kayar, sayfa
       yatay kaymaz. */
    .home-tools-page .home-tools-hero-shortcuts {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 0.15rem;
    }

    .home-tools-page .home-tools-hero-shortcuts::-webkit-scrollbar {
        display: none;
    }

    .home-tools-page .home-tools-hero-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
        font-size: 0.86rem;
    }

    .home-tools-page .home-tools-hero-side .home-tools-stats {
        gap: 0.6rem;
    }

    .home-tools-page .home-tools-stat {
        min-height: 84px;
        padding: 0.85rem 0.9rem;
    }

    .home-tools-page .home-tools-stat span {
        font-size: 0.7rem;
        letter-spacing: 0.06em;
    }

    .home-tools-page .home-tools-stat-value {
        font-size: 1.3rem;
    }

    /* Maskot kartın altındaki rezerve alanda durur; üst üste binme yok. */
    .home-tools-page .home-tools-hero-mascot {
        right: 0.5rem;
        width: 104px;
    }

    .home-tools-page .home-tools-band {
        padding-top: 2.25rem;
        padding-bottom: 3rem;
    }

    .home-tools-page .home-tools-section + .home-tools-section {
        margin-top: 2.4rem;
    }

    .home-tools-page .home-tools-grid,
    .home-tools-page .home-tools-directory-grid,
    .home-tools-page .home-tools-benefit-grid,
    .home-tools-page .home-tools-format-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        min-height: 0;
    }

    .home-tools-page .home-tools-card,
    .home-tools-page .home-tools-benefit-card,
    .home-tools-page .home-tools-benefit-card:nth-child(even),
    .home-tools-page .home-tools-format-card,
    .home-tools-page .home-tools-directory-card,
    .home-tools-page .home-tools-benefits,
    .home-tools-page .home-tools-format-guide {
        min-height: 0;
    }

    .home-tools-page .home-tools-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

    .home-tools-page .home-tools-guide-card {
        padding: 1.15rem;
        border-radius: 24px;
    }

    .home-tools-page .home-tools-guide-copy {
        padding: 0.35rem 0.2rem;
    }

    .home-tools-page .home-tools-cta {
        min-height: 0;
        padding: 1.5rem 1.25rem;
        align-items: stretch;
    }

    .home-tools-page .home-tools-accordion .accordion-button {
        padding: 1rem 2.9rem 1rem 1.05rem;
        font-size: 0.98rem;
    }

    .home-tools-page .home-tools-accordion .accordion-body {
        padding: 0 1.05rem 1.1rem;
    }
}

/* --------------------------------------------------------------------------
   7) 340px altı — en dar ekranlar (iPhone SE ve benzeri)
   375px'te arama butonu ve iki sayaç yan yana sığıyor; sadece bu genişliğin
   altında alt alta iniyorlar.
   -------------------------------------------------------------------------- */
@media (max-width: 339.98px) {
    .home-tools-page .home-tools-hero-search-submit {
        flex: 1 1 100%;
        min-height: 44px;
    }

    .home-tools-page .home-tools-hero-side .home-tools-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   8) prefers-reduced-motion: reduce — tüm hareket kapanır
   Kullanıcı hareket azaltma istediğinde açılma/sayaç/hover animasyonlarının
   hiçbiri çalışmaz; içerik doğrudan son halinde görünür. JS tarafında da aynı
   kontrol var (home.blade.php), bu blok CSS tarafındaki güvenlik ağıdır.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .home-tools-motion-ready .home-tools-reveal,
    .home-tools-motion-ready .home-tools-reveal .home-tools-reveal-item,
    .home-tools-motion-ready .home-tools-reveal.is-revealed,
    .home-tools-motion-ready .home-tools-reveal.is-revealed .home-tools-reveal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .home-tools-motion-ready .home-tools-hero-mascot {
        animation: none !important;
    }

    /* !important zorunlu: yukarıdaki kurallar .home-tools-page ile başladığı
       için evrensel seçiciden daha yüksek özgüllüğe sahip. */
    .home-tools-page *,
    .home-tools-page *::before,
    .home-tools-page *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    .home-tools-page .home-tools-card:hover,
    .home-tools-page .home-tools-card:focus-visible,
    .home-tools-page .home-tools-directory-card:hover,
    .home-tools-page .home-tools-directory-card:focus-visible,
    .home-tools-page .home-tools-benefit-card:hover,
    .home-tools-page .home-tools-format-card:hover,
    .home-tools-page .home-tools-hero-chip:hover,
    .home-tools-page .home-tools-hero-chip:focus-visible,
    .home-tools-page .home-tools-hero-search-submit:hover,
    .home-tools-page .home-tools-cta .tool-button:hover,
    .home-tools-page .home-tools-card:hover .home-tools-card-foot i,
    .home-tools-page .home-tools-cta .tool-button:hover i {
        transform: none !important;
    }
}

/*
 * Navbar'da her sayfada arama kutusu var; hero'daki ikinci kutu yalnızca
 * navbar araması menünün içine katlandığı dar ekranlarda gösterilir.
 */
@media (min-width: 1200px) {
    .home-tools-page .home-tools-hero-search {
        display: none;
    }
}