/* ============================================================
   246 Software — Paylaşılan bileşenler
   Birden fazla sayfada tekrar eden parçalar (butonlar, bölüm
   başlıkları, rozetler…). Sayfaya özel stiller kendi dosyasına.
   ============================================================ */

/* ---------- Butonlar ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

/* Sarı zemin / siyah yazı — birincil eylem */
.btn--primary {
    background-color: var(--c-yellow);
    color: var(--c-black);
}

.btn--primary:hover {
    background-color: var(--c-yellow-hover);
}

/* Siyah zemin / beyaz yazı */
.btn--dark {
    background-color: var(--c-black);
    color: var(--c-white);
}

.btn--dark:hover {
    background-color: var(--c-gray-800);
}

/* Çerçeveli */
.btn--outline {
    background-color: transparent;
    border-color: var(--c-black);
    color: var(--c-black);
}

.btn--outline:hover {
    background-color: var(--c-black);
    color: var(--c-white);
}

/* Beyaz dolgulu — koyu zemin üzerinde birincil eylem */
.btn--light {
    background-color: #FAFAFA;
    color: var(--c-black);
}

.btn--light:hover {
    background-color: var(--c-yellow);
}

/* Koyu zemin üzerinde çerçeveli ikincil eylem */
.btn--ghost {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.38);
    color: var(--c-gray-400);
}

.btn--ghost:hover {
    border-color: var(--c-yellow);
    color: var(--c-yellow);
}

/* Sarı çerçeveli, sarı yazılı — koyu zeminde vurgulu üçüncül eylem */
.btn--accent {
    background-color: transparent;
    border-color: var(--c-yellow);
    color: var(--c-yellow);
}

.btn--accent:hover {
    background-color: var(--c-yellow);
    color: var(--c-black);
}


/* ---------- Kayan şerit (marquee) ---------- */
.marquee {
    --marquee-duration: 45s;

    position: relative;
    overflow: hidden;
    padding-block: clamp(0.5rem, calc(var(--vw) * 0.62), 0.875rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Kenarlarda yumuşak geçiş — yazı ekrana girip çıkarken sert kesilmesin */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll var(--marquee-duration) linear infinite;
}

/* İçerik iki kez basılır; -%50 kaydırınca dikişsiz döner */
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__group {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-shrink: 0;
    padding-inline-end: var(--sp-4);
    white-space: nowrap;
}

.marquee__item {
    color: var(--c-gray-500);
    font-size: clamp(0.875rem, calc(var(--vw) * 1.05), 1.25rem);
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.marquee__dot {
    color: var(--c-gray-700);
    font-size: 0.875rem;
}

.marquee__slash {
    color: var(--c-gray-700);
    font-size: clamp(0.875rem, calc(var(--vw) * 1.05), 1.25rem);
    font-weight: var(--fw-bold);
    padding-inline: var(--sp-2);
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
    }
}


/* ---------- Metin varyantları ---------- */
/* Tasarımda mobil metinler kısaltılmış. Aynı içeriğin iki sürümü de
   basılıyor, hangisinin görüneceğine kırılım karar veriyor. */
.is-wide,
.is-wide-block { display: none; }

@media (min-width: 1024px) {
    .is-wide { display: inline; }
    .is-wide-block { display: block; }
    .is-narrow { display: none; }
}


/* ---------- Kaydırdıkça beliren bölümler ---------- */
/* Gizleme yalnızca JavaScript çalışıyorsa (`html.js`) uygulanır — script
   yüklenmezse içerik olduğu gibi görünür, gizli kalmaz.
   `prefers-reduced-motion: reduce` seçiliyse hiç gizlenmez. */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(1.75rem);
    }

    .js [data-reveal].is-in {
        opacity: 1;
        transform: none;
        transition: opacity 700ms var(--ease), transform 700ms var(--ease);
    }
}