/* css/components/_buttons.css */

.btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    border: 2px solid transparent; /* Varsayılan olarak şeffaf kenarlık */
}

/* Birincil Düğme Stili (Ana Aksiyonlar için) */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    border-radius: 50px;
}

.btn-primary:hover {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
}

/* İkincil Düğme Stili (Daha Az Vurgulu Aksiyonlar için) */
.btn-secondary {
    /* Başlangıçta birincil renk (mavi) arka plan, beyaz metin */
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    border-radius: 50px;
    transition: background-color 180ms ease, color 180ms ease;
    
}

.btn-secondary:hover {
    /* Hover'da koyu renk */
    background-color: var(--dark-color);
    color: var(--white-color);
    border-color: var(--dark-color);
}

/* css/style.css veya css/pages/_home.css */

/* ========================================================================= */
/* SCROLL TO TOP BUTONU STİLİ */
/* ========================================================================= */

.scroll-to-top-btn {
    /* Konumlandırma */
    position: fixed; /* Ekranın belirli bir yerinde sabit durur */
    bottom: 25px; /* Alttan 25px yukarıda */
    right: 25px; /* Sağdan 25px solda */
    z-index: 1000; /* Diğer her şeyin üstünde görünür */

    /* Tasarım */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Yuvarlak şekil */
    background-color: rgba(0, 51, 102, 0.4); /* Mavi yarı şeffaf (70% opaklık) */
    color: var(--white-color, #fff); /* Ok rengi beyaz */
    font-size: 20px;
    text-align: center;
    line-height: 50px; /* Metni dikey ortalar */
    cursor: pointer;
    
    /* Animasyon */
    transition: all 0.3s;
    
    /* Başlangıçta Görünmez */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

/* Hover Etkisi */
.scroll-to-top-btn:hover {
    background-color: var(--primary-color, #003366); /* Tam mavi */
}

/* JavaScript ile Görünür Yapılacak Sınıf */
.scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobil Cihazlar İçin Ayar */
@media (max-width: 768px) {
    .scroll-to-top-btn {
        width: 45px;
        height: 45px;
        line-height: 45px;
        bottom: 15px;
        right: 15px;
    }
}

/* Gizle: eğer FontAwesome yüklü değilse <i> boş görünebilir; çakışmayı önlemek için i'yi gizle */
.scroll-to-top-btn i {
    display: none; /* HTML içindeki <i> varsa gizle (CSS pseudo-element ile ok gösterilecek) */
}

/* Ok simgesi için fallback (pseudo-element)
   - Unicode ok kullanılıyor (↑). İsterseniz "▲" veya başka bir sembol kullanabilirsiniz.
   - font-size, line-height buton boyutuyla eşleşecek şekilde ayarlandı. */
.scroll-to-top-btn::before {
    content: "\2191"; /* ↑ karakteri */
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 50px;           /* butonun line-height'ı ile eşleşir */
    text-align: center;
    font-size: 20px;            /* okun boyutu */
    color: inherit;             /* butonun renk ayarını kullanır */
    font-weight: 700;
    pointer-events: none;       /* tıklanabilirlik butonun kendisinde kalsın */
}

/* Mobil uyum: buton küçüldüğünde pseudo-element'i de ölçeklendir */
@media (max-width: 768px) {
    .scroll-to-top-btn::before {
        line-height: 45px; /* mobil line-height */
        font-size: 18px;
    }
}