/* ================================================================
   ALISOFT — app.css  (Temel global stiller)
   ================================================================ */

/* ── Ortak tasarım değişkenleri: tüm sayfalar bunları kullanır ── */
:root {
    --a-ink:          #101828;   /* başlık ve koyu metin */
    --a-text:         #344054;   /* gövde metni */
    --a-muted:        #667085;   /* ikincil metin */
    --a-line:         #E4E7EC;   /* çizgi ve kenarlık */
    --a-soft:         #F5F7FA;   /* açık gri zemin */
    --a-black:        #0B0B0F;   /* koyu bölümler */
    --a-accent:       #4263EB;   /* marka mavisi */
    --a-accent-h:     #3352C5;   /* mavi, üzerine gelince */
    --a-accent-soft:  #EEF1FD;   /* mavi, açık zemin */
    --a-accent-light: #8DA2FB;   /* koyu zeminde mavi vurgu */

    --a-wrap:   1280px;          /* içerik, navbar ve footer aynı genişlikte */
    --a-gutter: 32px;            /* kenar boşluğu (telefonda 16px) */
}

@media (max-width: 640px) {
    :root { --a-gutter: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--a-soft);
    color: var(--a-ink);
    -webkit-font-smoothing: antialiased;
}

/* Skip to main content — erişilebilirlik */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 9999;
    background: var(--a-accent);
    color: #fff;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* ── WhatsApp düğmesi: sol altta, nabız halkaları ve hafif sallanma ── */
.wa-fab {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 20px 0 16px;
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: #25D366;
    border-radius: 999px;
    box-shadow: 0 16px 36px -12px rgba(18, 140, 70, .65);
    transition: background .2s, transform .2s;
    animation: wa-salla 6s ease-in-out infinite;
}

.wa-fab:hover { background: #1EBE5A; transform: translateY(-3px); animation-play-state: paused; }
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #25D366; }
.wa-fab svg { position: relative; z-index: 1; width: 28px; height: 28px; fill: currentColor; }
.wa-label { position: relative; z-index: 1; }

/* Dışa doğru yayılan halkalar */
.wa-ring { position: absolute; inset: 0; border: 2px solid #25D366; border-radius: inherit; opacity: 0; animation: wa-nabiz 2.4s ease-out infinite; pointer-events: none; }
.wa-ring--2 { animation-delay: 1.2s; }

@keyframes wa-nabiz {
    0% { opacity: .6; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}

/* Birkaç saniyede bir kısa sallanma: dikkat çeker ama rahatsız etmez */
@keyframes wa-salla {
    0%, 86%, 100% { transform: rotate(0); }
    88% { transform: rotate(-8deg); }
    90% { transform: rotate(7deg); }
    92% { transform: rotate(-5deg); }
    94% { transform: rotate(3deg); }
}

@media (max-width: 640px) {
    .wa-fab { left: 16px; bottom: 16px; width: 56px; height: 56px; padding: 0; justify-content: center; }
    .wa-label { display: none; }
}

/* WhatsApp: yalnız ikon, yuvarlak; sağ üstte kırmızı rozet */
.wa-fab { width: 64px; height: 64px; padding: 0; justify-content: center; border-radius: 50%; }
.wa-fab svg { width: 34px; height: 34px; }
.wa-label { display: none; }

.wa-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: .8125rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: #F04438;
    border: 2px solid #fff;
    border-radius: 999px;
}

@media (max-width: 640px) {
    .wa-fab { width: 58px; height: 58px; }
    .wa-fab svg { width: 30px; height: 30px; }
}

/* WhatsApp sağ altta */
.wa-fab { left: auto; right: 24px; }
@media (max-width: 640px) { .wa-fab { left: auto; right: 16px; } }


/* ── Çerez onay bandı ── */
.cz { position: fixed; left: 24px; bottom: 24px; z-index: 1300; width: min(560px, calc(100% - 48px)); }
.cz[hidden] { display: none; }
.cz-box { padding: 22px 22px 18px; color: var(--a-ink); background: #fff; border: 1px solid var(--a-line); border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .35); animation: cz-gir .35s ease; }
@keyframes cz-gir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cz-baslik { margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.cz-metin { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--a-text); }
.cz-metin a { font-weight: 700; color: var(--a-accent); }
.cz-prefs { display: grid; gap: 8px; margin-top: 14px; }
.cz-prefs[hidden] { display: none; }
.cz-pref { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; font-size: .8125rem; line-height: 1.5; color: var(--a-text); background: var(--a-soft); border-radius: 12px; cursor: pointer; }
.cz-pref input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--a-accent); }
.cz-pref strong { display: block; font-size: .875rem; color: var(--a-ink); }
.cz-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.cz-btn { height: 42px; padding: 0 16px; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; border-radius: 10px; }
.cz-btn[hidden] { display: none; }
.cz-btn--line { color: var(--a-ink); background: #fff; border: 1px solid var(--a-line); }
.cz-btn--line:hover { border-color: var(--a-ink); }
.cz-btn--dark { color: #fff; background: var(--a-ink); border: 1px solid var(--a-ink); }
.cz-btn--dark:hover { background: var(--a-accent); border-color: var(--a-accent); }
@media (max-width: 640px) {
    .cz { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .cz-actions .cz-btn { flex: 1 1 calc(50% - 4px); }
}
@media (prefers-reduced-motion: reduce) { .cz-box { animation: none; } }