/**
 * GelecekSosyalizm — Modern Base
 * ---------------------------------------------------------------
 * Modern tipografi, focus ring, erişilebilirlik temelleri.
 * tokens.css'ten SONRA, style.css'ten ÖNCE yüklenir.
 *
 * Hedef: style.css'in mevcut görselliğine müdahale etmeden
 * iyileştirmeler eklemek. !important kullanmadan, doğal cascade ile.
 */

/* ====================================================
   GOOGLE FONTS — Inter (gövde) + Manrope (display)
   Performans: font-display: swap, preconnect performance.php'de var.
   ==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* ====================================================
   ROOT TYPOGRAPHY — body
   Mevcut style.css'teki body kuralı 'Arial' kullanıyor. Specificity
   eşit olduğu için sıralama önemli: bu dosya style.css'ten ÖNCE
   yüklenmeli; o zaman style.css'teki font-family kuralı kazanıyor
   olur. Bunu önlemek için `body` yerine `:where()` ile kullanıyoruz —
   specificity 0, böylece style.css'i ezmez ama yine de tema bazını
   kurar. Style.css'teki body fontu güncellenince burası devreye girer.
   ==================================================== */
:where(body) {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Headings için modern tipografi */
:where(h1, h2, h3, .entry-title, .page-title) {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;  /* modern tarayıcılarda dengeli kırılım */
}

:where(p) {
    text-wrap: pretty;
    line-height: var(--lh-relaxed);
}

/* ====================================================
   SKIP-TO-CONTENT LINK — WCAG 2.4.1
   ==================================================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: var(--z-tooltip);
    padding: var(--space-3) var(--space-5);
    background: var(--brand-500);
    color: var(--gray-0);
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--radius-md) 0;
    transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

/* ====================================================
   FOCUS RING — :focus-visible ile yalnızca klavye navigasyonunda
   Mevcut `outline: none` kuralları sadece mouse'a değil klavyeye de
   etki ediyordu. Bu blok onu modernize ediyor.
   ==================================================== */
:where(a, button, input, select, textarea, [tabindex], summary):focus {
    /* Tarayıcı varsayılan focus stilini kaldır (yalnızca :focus için) */
    outline: none;
}

:where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}

/* Buton odaklanmada gölge halkası tercih edilir */
:where(button, .btn, .submit-btn, .contact-btn, [type="button"], [type="submit"]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

/* Form inputlar odaklanınca brand renkli kenar + gölge */
:where(.form-group input, .form-group textarea, .form-group select):focus-visible {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(183, 28, 26, 0.12);
}

/* ====================================================
   TOUCH TARGET — WCAG 2.5.5
   Mobilde tıklanabilir öğeler en az 44×44px hit area
   ==================================================== */
@media (pointer: coarse) {
    :where(button, .btn, a.button, [role="button"]) {
        min-height: var(--touch-target-min);
    }
    :where(.social-links a, .share-btn) {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ====================================================
   MODAL A11Y — focus-trap görsel ipucu
   Modal açıldığında arka plana hafif blur + scroll kilidi
   ==================================================== */
body.modal-open {
    overflow: hidden;
}

.contact-modal[role="dialog"] {
    /* Erişilebilir modal davranışı */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.contact-modal .modal-content {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}
.contact-modal .modal-close {
    /* Span yerine button kullanıldığında stil */
    background: transparent;
    border: 0;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    border-radius: var(--radius-full);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--surface-muted);
    transition: background var(--duration-fast), color var(--duration-fast);
}
.contact-modal .modal-close:hover {
    background: var(--gray-100);
    color: var(--surface-text);
}

/* ====================================================
   REDUCED MOTION — erişilebilirlik tercihi
   ==================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ====================================================
   TOAST NOTIFICATION (alert() yerine)
   main.js içindeki gsToast() bu sınıfları kullanır.
   ==================================================== */
.gs-toast-container {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 360px;
    pointer-events: none;
}

.gs-toast {
    pointer-events: auto;
    background: var(--surface-elevated, #fff);
    color: var(--surface-text, #0f172a);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-300);
    line-height: var(--lh-normal);
    border-left: 4px solid var(--gray-400);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 44px;
}

.gs-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gs-toast--success { border-left-color: var(--color-success); }
.gs-toast--warning { border-left-color: var(--color-warning); }
.gs-toast--error   { border-left-color: var(--color-danger); }
.gs-toast--info    { border-left-color: var(--color-info); }

.gs-toast-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--surface-muted);
    font-size: 1.1em;
    line-height: 1;
    padding: 2px 6px;
    margin-left: auto;
    border-radius: var(--radius-sm);
}
.gs-toast-close:hover { color: var(--surface-text); }

@media (max-width: 600px) {
    .gs-toast-container {
        left: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-3);
        max-width: none;
    }
}

/* ====================================================
   UTILITY: screen-reader only (a11y)
   ==================================================== */
.sr-only,
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background: var(--brand-500);
    color: var(--gray-0);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    display: block;
    font-size: var(--fs-400);
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: var(--z-tooltip);
}