/* DavetKodu.org — style.css
   Sadece Tailwind CDN'in karşılayamadığı özel stiller burada.
   Core Web Vitals'ı olumsuz etkilememek için minimal tutuldu. */

/* ─── Temel ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ─── Mono font (kod kutuları) ──────────────────────────────────────── */
.font-mono,
#invite-code,
[id^="copy-btn"] + span {
    font-family: 'Courier New', Courier, ui-monospace, SFMono-Regular, monospace;
}

/* ─── Kod seçilebilir ────────────────────────────────────────────────── */
.select-all { user-select: all; }

/* ─── FAQ accordion geçişi ───────────────────────────────────────────── */
.faq-icon {
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.faq-answer:not(.hidden) {
    animation: fadeSlideDown 0.2s ease-out;
}

@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Kopyala butonu aktif state ─────────────────────────────────────── */
button:active { transform: scale(0.97); }

/* ─── Kart hover geçişi (Tailwind transition-all destekler ama extra) ── */
a.group { transition: all 0.18s ease; }

/* ─── Text clamp (Tailwind v3 CDN'de line-clamp bazen gelmiyor) ──────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Toast bildirimi ────────────────────────────────────────────────── */
#toast {
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}

/* ─── Baskı optimizasyonu ────────────────────────────────────────────── */
@media print {
    header, footer, aside,
    #toast, section[aria-label="Harekete geçirici mesaj"],
    section[aria-label="Davet kodu kutusu"] { display: none !important; }
    main { max-width: 100% !important; }
    article { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
}

/* ─── Erişilebilirlik: focus görünürlüğü ─────────────────────────────── */
:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 3px;
    border-radius: 6px;
}