/*
 * Wuffi Pet Design System v5.0 (Faz 2 yamalı — kontrast + a11y)
 * Unified theme tokens + components
 */

/* ============================================
   0. ACCESSIBILITY & CONTRAST TOKENS (FAZ 1)
   ============================================ */
:root {
    --wf-text-on-primary: #FFFFFF;     /* Primary butonlarda metin (WCAG AA ≥4.5:1) */
    --wf-text-on-gold:    #1a1130;     /* Gold/sarı butonlarda koyu metin */
    --wf-focus-ring:      0 0 0 3px rgba(108, 92, 231, 0.45);
    --wf-primary-strong:  #6c5ce7;     /* Daha kontrastlı primary (text karşılığı için) */
}

/* ============================================
   1. THEME TOKENS
   ============================================ */

/* Purple Theme (Default) — Pudra Mor / Powder Purple */
:root,
[data-theme="purple"] {
    --wf-primary: #b39ddb;
    --wf-primary-hover: #9e86cc;
    --wf-primary-light: #cfc0ed;
    --wf-primary-subtle: rgba(179, 157, 219, 0.14);
    --wf-primary-glow: rgba(179, 157, 219, 0.28);
    --wf-accent: #FFB923;
    --wf-gold: #FFB923;
    --wf-gold-hover: #e6a51f;
    --wf-gold-subtle: rgba(255, 185, 35, 0.13);

    /* Mobil app renk paleti (kullanıcı talebi 23 May) — bgDark/bgCard birebir */
    --wf-bg-page: #110e26; /* mobil body #110E26 */
    --wf-bg-card: #1b1635; /* mobil bgCard #1B1635 — tüm kartlar tek kaynaktan */
    --wf-bg-card-hover: #261f4c;
    --wf-bg-input: #271f4e;
    --wf-bg-dock: rgba(22, 18, 48, 0.97);

    --wf-text-primary: #f3eeff;
    --wf-text-secondary: #b8acd8;
    --wf-text-muted: #7e72a8;
    --wf-text-inverse: #13102b;

    --wf-border: rgba(179, 157, 219, 0.14);
    --wf-border-light: rgba(179, 157, 219, 0.06);

    --wf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --wf-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.3);
    --wf-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.38);
    --wf-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.48);
    --wf-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.32);

    --wf-dock-bg: linear-gradient(180deg, rgba(22, 18, 48, 0.96), rgba(13, 10, 30, 0.98));
    --wf-dock-text: #f3eeff;
    --wf-dock-active: #FFB923;
}

/* Pudra Theme (Light) — sadece koyu tema variable'larin acik renk versiyonlari */
[data-theme="pudra"] {
    --wf-primary: #7c5cbf;
    --wf-primary-hover: #6c3eff;
    --wf-primary-light: #b39ddb;
    --wf-primary-subtle: rgba(124, 92, 191, 0.10);
    --wf-primary-glow: rgba(124, 92, 191, 0.20);
    --wf-accent: #ff9800;
    --wf-gold: #ff9800;
    --wf-gold-hover: #ff7d3f;
    --wf-gold-subtle: rgba(255, 152, 0, 0.13);

    /* Acik pastel arka planlar */
    --wf-bg-page: #f5eef9;
    --wf-bg-card: rgba(255, 255, 255, 0.72);
    --wf-bg-card-hover: rgba(255, 255, 255, 0.90);
    --wf-bg-input: rgba(255, 255, 255, 0.85);
    --wf-bg-dock: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245,238,249,0.78));

    --wf-text-primary: #1a1640;
    --wf-text-secondary: rgba(26, 22, 64, 0.72);
    --wf-text-muted: rgba(26, 22, 64, 0.50);
    --wf-text-inverse: #ffffff;

    --wf-border: rgba(124, 92, 191, 0.15);
    --wf-border-light: rgba(124, 92, 191, 0.08);

    --wf-shadow-sm: 0 1px 3px rgba(124, 92, 191, 0.12);
    --wf-shadow-md: 0 4px 14px rgba(124, 92, 191, 0.10);
    --wf-shadow-lg: 0 8px 30px rgba(124, 92, 191, 0.10);
    --wf-shadow-xl: 0 20px 60px rgba(124, 92, 191, 0.14);
    --wf-shadow-card: 0 2px 16px rgba(124, 92, 191, 0.10);

    --wf-dock-bg: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245,238,249,0.78));
    --wf-dock-text: #1a1640;
    --wf-dock-active: #6c3eff;

    /* Pudra-specific gradient tokens (saturated için light bg) */
    --wf-gradient-hero-text: linear-gradient(90deg, #ff6a00, #d946ef, #6c3eff, #ff6a00);
    --wf-gradient-section-title: linear-gradient(90deg, #ff7a00, #6c3eff);
    --wf-gradient-gold-line: linear-gradient(90deg, #ff9800, #6c3eff);
    --wf-gradient-cta-gold: linear-gradient(90deg, #ff9800, #ff5722);
    --wf-gradient-rating: linear-gradient(135deg, #b8860b, #ff7a00);
    --wf-gradient-divider-glow: linear-gradient(180deg, #ff9800, #6c3eff);

    /* Static page background — pudra için açık tema */
    --wf-bg-static-page: linear-gradient(180deg, #f8f3fd 0%, #efe8f8 30%, #ede5f5 60%, #f6f0fc 100%);
    --wf-orb-primary: rgba(124, 92, 191, 0.5);
    --wf-orb-accent: rgba(255, 152, 0, 0.5);
    --wf-cta-on-primary: #2a1700;
}

/* ============================================
   2.1 PUBLIC STATIC PAGE TOKENS (FAZ C3 — v4.2)
   Ana sayfa + KVKK + Kayıt Başarılı + 12 yasal sayfa için
   ortak gradient + orb + CTA token'ları. Purple varsayılan,
   yukarıda pudra override eder.
   ============================================ */
:root,
[data-theme="purple"] {
    --wf-bg-static-page: linear-gradient(180deg, #0e0a22 0%, #140f2e 30%, #0d0920 60%, #110e26 100%);
    --wf-orb-primary: rgba(179, 157, 219, 1);
    --wf-orb-accent: rgba(255, 185, 35, 1);
    --wf-cta-on-primary: #1a0800;

    /* Title gradient: gold→purple complement */
    --wf-title-gradient-purple: linear-gradient(90deg, #FFD700 0%, #FFB923 35%, #c4b5fd 100%);
    --wf-title-gradient-pudra: linear-gradient(90deg, #e6a200 0%, #c98700 35%, #7c5cbf 100%);

    /* Section title accent line: gold→purple */
    --wf-accent-line: linear-gradient(90deg, #FFB923, #c4b5fd);
}

[data-theme="pudra"] {
    --wf-title-gradient-purple: var(--wf-title-gradient-pudra);
    --wf-accent-line: linear-gradient(90deg, #c98700, #7c5cbf);
}

/* ============================================
   2.2 LAYOUT TOKENS — Header height + safe area
   FAZ v4.2.1: Hardcoded 68px 3 sayfada vardı; artık tek-kaynak.
   ============================================ */
:root {
    --header-h: 68px;
    --header-h-mobile: 56px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 48rem) { /* 768px altı mobil */
    :root {
        --header-h: var(--header-h-mobile);
    }
}

/* ============================================
   2.3 GLOBAL RESET + MOBİL OVERFLOW (defansif)
   FAZ v4.2.1: Yatay scroll bug'larını engelle.
   FIX (2026-04-30 patch): body padding-top/bottom kuralı kaldırıldı —
   sayfa-spesifik padding'leri (örn. hizmet-al `padding-bottom:100px` dock
   için) eziyordu ve scroll davranışını bozuyordu. env() safe area artık
   sadece tema header.php'de uygulanır (HTML5 viewport-fit=cover yeter).
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden; /* clip yerine hidden — geniş uyumluluk */
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* iOS auto-zoom önleyici (input font-size < 16px ise zoom yapar) */
input,
select,
textarea {
    font-size: 16px;
}

/* ============================================
   2.4 HERO OVERLAP FIX — main padding-top + anchor scroll
   FAZ v4.2.1: 3 sayfadaki hardcoded 68px yerine token-based.
   ============================================ */
main.wf-main,
.wf-main {
    padding-top: var(--header-h);
}

/* Sticky header için anchor scroll offset */
section[id],
h2[id],
h3[id] {
    scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* ============================================
   2.5 İKON BUTON DAİRE — Modern Pattern (DRY)
   FAZ v4.2.1: Triple-redundant CSS + inline style yerine
   tek tanım. :has() ile ikon-only butonu otomatik daire.
   ============================================ */
.wf-icon-btn,
.sp-icon-btn,
.wf-cart-btn,
.wf-theme-btn-single {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    contain: layout style;
}

/* FAZ 17 (BUG-FIX KRITIK): Bu :has() rule KALDIRILDI.
   Sebep: :only-child text node'lari saymiyor; <button><i>+</i> Text</button>
   gibi butonlarda <i> 'tek element child' sayilip buton zorla daire oluyordu.
   Sonuc: 'Add My First Friend', 'Devam Et' vb. text butonlar 35x35 daireye
   sikisip metin disari tasiyordu.
   Cozum: Sadece explicit .wf-btn-icon / .sp-btn-icon class'lari daire olsun
   (bu sinif zaten yukarida tanimli, sayfa stillerinde kullanilan butonlar
   tum text + ikon icerigi gosterir). */
/*
.sp-btn:has(svg:only-child),
.wf-btn:has(svg:only-child),
.sp-btn:has(i:only-child),
.wf-btn:has(i:only-child) {
    aspect-ratio: 1;
    padding: 0;
    inline-size: 2.5rem;
    border-radius: 50%;
}
*/

@media (max-width: 600px) {
    .wf-icon-btn,
    .sp-icon-btn,
    .wf-cart-btn,
    .wf-theme-btn-single {
        inline-size: 2.25rem;
        block-size: 2.25rem;
    }
}

/* ============================================
   3. GLOBAL prefers-reduced-motion (Erişilebilirlik)
   Tüm @keyframes-tabanlı animasyonlar bu kapsam altında
   minimum süreye iner. Page-spesifik animasyon overridelar
   da (anasayfa2.php) bu kuralı miras alır.
   ============================================ */
@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;
    }
    /* Marquee/ticker — tamamen durdur */
    .wf-ticker-track,
    .wf-pcarousel-track,
    .wf-test-track {
        animation: none !important;
    }
    /* Floating icons */
    .wf-float-item,
    .wuffi-highlight,
    .wf-blob,
    .wf-bg-anim > span {
        animation: none !important;
    }
}

/* ============================================
   2. SEMANTIC COLOR TOKENS (All Themes)
   ============================================ */
:root {
    --wf-success: #10b981;
    --wf-success-light: rgba(16, 185, 129, 0.12);
    --wf-danger: #ef4444;
    --wf-danger-light: rgba(239, 68, 68, 0.12);
    --wf-warning: #f59e0b;
    --wf-warning-light: rgba(245, 158, 11, 0.12);
    --wf-info: #3b82f6;
    --wf-info-light: rgba(59, 130, 246, 0.12);

    /* Layout */
    --wf-header-height: 64px;
    --wf-dock-height: 72px;
    --wf-content-max: 1400px;

    /* ─── BREAKPOINT TOKENS (BUG-003 standardizasyonu) ──────────
     * Canonik breakpoint'ler — tüm yeni CSS bunları kullansın.
     * Eski karışık breakpoint'ler (380, 600, 900, 959) tutuluyor
     * (geri uyumluluk) ama yeni stil bunları kullanmasın.
     * ────────────────────────────────────────────────────────── */
    --wf-bp-xs: 480px;
    --wf-bp-sm: 640px;
    --wf-bp-md: 768px;
    --wf-bp-lg: 1024px;
    --wf-bp-xl: 1280px;

    /* ─── GRADIENT TOKENS (semantic, theme-aware) ──────────
     * Hardcoded gradient'lerin (anasayfa2.php'de 63 yer) yerine
     * bunları kullanın. Pudra'da tanımı `[data-theme="pudra"]` bloğuyla
     * override ediliyor.
     * ────────────────────────────────────────────────────────── */
    --wf-gradient-hero-text: linear-gradient(90deg, #FFD700, #FF9EAA, #00E5FF, #FFD700);
    --wf-gradient-section-title: linear-gradient(90deg, #FFD700, #c4b5fd);
    --wf-gradient-gold-line: linear-gradient(90deg, #FFB923, #c4b5fd);
    --wf-gradient-cta-gold: linear-gradient(90deg, #FFB923, #ff9800);
    --wf-gradient-rating: linear-gradient(135deg, #FFB923, #ff9800);
    --wf-gradient-divider-glow: linear-gradient(180deg, #FFB923, #8E2DE2);

    /* Radii — Yumuşak */
    --wf-radius-xs: 8px;
    --wf-radius-sm: 12px;
    --wf-radius-md: 16px;
    --wf-radius-lg: 20px;
    --wf-radius-xl: 28px;
    --wf-radius-full: 9999px;

    /* Transitions */
    --wf-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --wf-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --wf-transition-fast: 0.15s var(--wf-ease);
    --wf-transition-normal: 0.25s var(--wf-ease);
    --wf-transition-slow: 0.4s var(--wf-ease);

    /* Font — FAZ4 3-platform parite: gövde Inter, başlık Fredoka
       (mobil tokens.ts ile birebir: body Inter, heading Fredoka). */
    --wf-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --wf-font-head: 'Fredoka', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* FAZ4 — Tüm başlıklar Fredoka (mobil heading paritesi). */
h1, h2, h3, h4,
.wf-h1, .wf-h2, .wf-h3,
.wf-section-title, .wf-activity-title, .wf-card-title,
.wf-page-title, [class*="-title"] {
    font-family: var(--wf-font-head);
}

/* ============================================
   2b. GOLD BRAND UTILITIES
   ============================================ */
.wf-icon-gold {
    color: var(--wf-gold, #FFB923) !important;
}
.wf-icon-bg-gold {
    background: var(--wf-gold-subtle, rgba(255,185,35,0.13));
    color: var(--wf-gold, #FFB923);
}
.wf-text-gold {
    color: var(--wf-gold, #FFB923);
}
.wf-btn-gold {
    background: var(--wf-gold, #FFB923);
    color: var(--wf-text-on-gold, #1a1130);
    font-weight: 700;
}
.wf-btn-gold:hover {
    background: var(--wf-gold-hover, #e6a51f);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 185, 35, 0.35); /* FAZ 1: gold-tabanlı, mor glow değil */
}

/* Force text visibility in dark shells */
.sp-shell-content,
.sp-shell-content p,
.sp-shell-content span:not(.wf-notif-badge):not(.wf-dock-badge):not(.wf-badge),
.sp-shell-content div,
.sp-shell-content li,
.sp-shell-content td,
.sp-shell-content th,
.sp-shell-content label {
    color: inherit;
}
.sp-shell-content {
    color: var(--wf-text-primary);
}
/* Welcome banner always white */
.wf-welcome-banner,
.wf-welcome-banner p,
.wf-welcome-banner h1,
.wf-welcome-banner h2,
.wf-welcome-banner h3 {
    color: #ffffff !important;
}

/* ============================================
   3. BASE TYPOGRAPHY
   ============================================ */
.wf-h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; color: var(--wf-text-primary); }
.wf-h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; color: var(--wf-text-primary); }
.wf-h3 { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--wf-text-primary); }
.wf-h4 { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--wf-text-primary); }
.wf-body { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--wf-text-secondary); }
.wf-small { font-size: 12px; font-weight: 500; color: var(--wf-text-muted); }
.wf-caption { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--wf-text-muted); }

/* ============================================
   4. CARD COMPONENT
   v46 deep-audit (28 May 2026) — Faz 1.3 alias birleştirme.
   Önceki durum: 8+ alias (.wfa-card, .wfm-card, .wfs-card, .wfp-card,
   .wf-oh-card, .biz-card, .adm-card, .wfc-card, .sp-card) her biri ayrı
   PHP template inline <style>'da tekrarlı tanımlanıyordu (DRY ihlali).
   Tüm aliaslar artık aynı base'den default'larını alır — inline tanımlar
   yalnız ÖZEL property'ler (renk, padding, gradient) için kalmalı.
   Faz 1.4: inline tanımları "geriye uyumluluk" yorumla işaretle + sıyır.
   ============================================ */
.wf-card,
.wfa-card,
.wfm-card,
.wfs-card,
.wfp-card,
.wf-oh-card,
.biz-card,
.adm-card,
.wfc-card,
.sp-card {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    padding: 24px;
    box-shadow: var(--wf-shadow-card);
    transition: box-shadow var(--wf-transition-normal), transform var(--wf-transition-normal);
}
.wf-card:hover,
.wfa-card:hover,
.wfm-card:hover,
.wfs-card:hover,
.wfp-card:hover,
.wf-oh-card:hover,
.biz-card:hover,
.adm-card:hover,
.wfc-card:hover,
.sp-card:hover {
    box-shadow: var(--wf-shadow-md);
}
.wf-card-compact {
    padding: 16px;
}
.wf-card-flush {
    padding: 0;
}

/* ============================================
   5. STAT CARD (Sfera Style)
   ============================================ */
.wf-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 1024px) {
    .wf-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .wf-stats-grid { grid-template-columns: 1fr; }
}

/* Charts Row — 2 sütun yan yana */
.wf-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 768px) {
    .wf-charts-row { grid-template-columns: 1fr; }
}

.wf-stat-card {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    padding: 20px;
    box-shadow: var(--wf-shadow-card);
    transition: transform var(--wf-transition-normal), box-shadow var(--wf-transition-normal);
}
.wf-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wf-shadow-md);
}
.wf-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}
.wf-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--wf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    /* Default: gold icon */
    background: var(--wf-gold-subtle, rgba(255,185,35,0.13));
    color: var(--wf-gold, #FFB923);
}
.wf-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--wf-radius-full);
    font-size: 12px;
    font-weight: 600;
}
.wf-stat-badge.success { background: var(--wf-success-light); color: var(--wf-success); }
.wf-stat-badge.danger { background: var(--wf-danger-light); color: var(--wf-danger); }
.wf-stat-badge.warning { background: var(--wf-warning-light); color: var(--wf-warning); }
.wf-stat-badge.info { background: var(--wf-info-light); color: var(--wf-info); }

.wf-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--wf-text-secondary);
    margin-bottom: 4px;
}
.wf-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--wf-text-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

/* ============================================
   6. BUTTON SYSTEM
   ============================================ */
.wf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    /* v11.13.16 — TÜM butonlar TEK radius (kullanıcı: "hepsi aynı oran").
       --wf-radius-std = 14px (token: kart+buton+input tek standart). */
    border-radius: var(--wf-radius-std, 14px);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--wf-font);
    cursor: pointer;
    border: none;
    transition: all var(--wf-transition-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.wf-btn-sm { padding: 7px 14px; font-size: 13px; }
.wf-btn-lg { padding: 14px 28px; font-size: 16px; }

.wf-btn-primary {
    background: var(--wf-primary-strong, #6c5ce7); /* FAZ 1: kontrastlı primary */
    color: var(--wf-text-on-primary, #FFFFFF);
    box-shadow: 0 2px 8px var(--wf-primary-glow);
}
.wf-btn-primary:hover {
    background: #5849cf; /* %10 koyu */
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--wf-primary-glow);
    filter: brightness(1.05);
}
.wf-btn-secondary {
    background: var(--wf-primary-subtle);
    color: var(--wf-primary);
}
.wf-btn-secondary:hover {
    background: rgba(108, 92, 231, 0.15);
}
.wf-btn-outline {
    background: transparent;
    color: var(--wf-text-secondary);
    border: 1px solid var(--wf-border);
}
.wf-btn-outline:hover {
    border-color: var(--wf-primary);
    color: var(--wf-primary);
}
.wf-btn-ghost {
    background: transparent;
    color: var(--wf-text-secondary);
}
.wf-btn-ghost:hover {
    background: var(--wf-primary-subtle);
    color: var(--wf-primary);
}
.wf-btn-success { background: var(--wf-success); color: white; }
.wf-btn-danger { background: var(--wf-danger); color: white; }

/* ============================================
   7. FORM ELEMENTS
   ============================================ */
.wf-input,
.wf-select,
.wf-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--wf-bg-input);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    font-size: 14px;
    font-family: var(--wf-font);
    color: var(--wf-text-primary);
    transition: border-color var(--wf-transition-fast), box-shadow var(--wf-transition-fast);
}
.wf-input:focus,
.wf-select:focus,
.wf-textarea:focus {
    /* FAZ1: outline:none kaldırıldı — :focus-visible global override */
    border-color: var(--wf-primary);
    box-shadow: 0 0 0 3px var(--wf-primary-subtle);
}
.wf-input::placeholder { color: var(--wf-text-muted); }
.wf-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text-primary);
    margin-bottom: 6px;
}
.wf-form-group { margin-bottom: 16px; }
.wf-form-hint {
    font-size: 12px;
    color: var(--wf-text-muted);
    margin-top: 4px;
}

/* ============================================
   8. ACTIVITY LIST (Sfera Style)
   ============================================ */
.wf-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wf-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--wf-border-light);
}
.wf-activity-item:last-child { border-bottom: none; }
.wf-activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--wf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.wf-activity-content { flex: 1; min-width: 0; }
.wf-activity-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wf-text-primary);
    margin-bottom: 2px;
}
.wf-activity-desc {
    font-size: 13px;
    color: var(--wf-text-secondary);
}
.wf-activity-time {
    font-size: 12px;
    color: var(--wf-text-muted);
    margin-top: 4px;
}

/* ============================================
   9. BADGE SYSTEM
   ============================================ */
.wf-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--wf-radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.wf-badge-success { background: var(--wf-success-light); color: var(--wf-success); }
.wf-badge-danger { background: var(--wf-danger-light); color: var(--wf-danger); }
.wf-badge-warning { background: var(--wf-warning-light); color: var(--wf-warning); }
.wf-badge-info { background: var(--wf-info-light); color: var(--wf-info); }
.wf-badge-primary { background: var(--wf-primary-subtle); color: var(--wf-primary); }
.wf-badge-muted { background: rgba(0,0,0,0.05); color: var(--wf-text-muted); }

/* Notification dot badge */
.wf-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: var(--wf-danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}
.wf-notif-badge:empty,
.wf-notif-badge[data-count="0"] { display: none; }

/* ============================================
   10. DASHBOARD HEADER (Sfera Style)
   ============================================ */
.wf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--wf-header-height);
    padding: 0 30px;
    background: var(--wf-bg-card);
    border-bottom: 1px solid var(--wf-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.wf-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.wf-header-logo {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--wf-primary), var(--wf-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.wf-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.wf-header-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--wf-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--wf-text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: all var(--wf-transition-fast);
}
.wf-header-icon-btn:hover {
    background: var(--wf-primary-subtle);
    color: var(--wf-primary);
}
.wf-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: var(--wf-radius-full);
    background: var(--wf-primary-subtle);
    cursor: pointer;
    transition: all var(--wf-transition-fast);
}
.wf-header-user:hover {
    background: rgba(108, 92, 231, 0.15);
}
.wf-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wf-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.wf-header-username {
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text-primary);
    line-height: 1.2;
}
.wf-header-role {
    font-size: 11px;
    color: var(--wf-text-muted);
    font-weight: 500;
}

/* Theme Switcher */
.wf-theme-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--wf-bg-page);
    border-radius: var(--wf-radius-full);
    padding: 3px;
    border: 1px solid var(--wf-border);
}
.wf-theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all var(--wf-transition-fast);
    color: var(--wf-text-muted);
}
.wf-theme-btn.active {
    background: var(--wf-bg-card);
    box-shadow: var(--wf-shadow-sm);
    color: var(--wf-text-primary);
}
.wf-theme-btn:hover:not(.active) {
    color: var(--wf-text-primary);
}

/* ============================================
   12. LAYOUT UTILITIES
   ============================================ */
.wf-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.wf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wf-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wf-grid-split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }

@media (max-width: 768px) {
    .wf-grid-2, .wf-grid-3, .wf-grid-4, .wf-grid-split {
        grid-template-columns: 1fr;
    }
}

.wf-flex { display: flex; }
.wf-flex-center { display: flex; align-items: center; justify-content: center; }
.wf-flex-between { display: flex; align-items: center; justify-content: space-between; }
.wf-gap-sm { gap: 8px; }
.wf-gap-md { gap: 16px; }
.wf-gap-lg { gap: 24px; }
.wf-mt-sm { margin-top: 8px; }
.wf-mt-md { margin-top: 16px; }
.wf-mt-lg { margin-top: 24px; }
.wf-mb-sm { margin-bottom: 8px; }
.wf-mb-md { margin-bottom: 16px; }
.wf-mb-lg { margin-bottom: 24px; }

/* ============================================
   13. TABLE COMPONENT
   ============================================ */
.wf-table {
    width: 100%;
    border-collapse: collapse;
}
.wf-table th {
    text-align: left;
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--wf-gold, #FFB923);
    border-bottom: 1px solid var(--wf-border-light);
    background: transparent;
    opacity: 0.85;
}
.wf-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--wf-border-light);
    color: var(--wf-text-primary);
    font-size: 14px;
}
.wf-table tr:last-child td { border-bottom: none; }
.wf-table tr:hover td {
    background: var(--wf-primary-subtle);
}

/* Generic table in panels */
.sp-shell-content table th,
.sp-shell-content .sp-table th {
    color: var(--wf-gold, #FFB923) !important;
    border-bottom-color: var(--wf-border-light) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sp-shell-content table td,
.sp-shell-content .sp-table td {
    border-bottom: 1px solid var(--wf-border-light) !important;
    color: var(--wf-text-primary) !important;
}
.sp-shell-content table tr:last-child td { border-bottom: none !important; }

/* ============================================
   14. MODAL SYSTEM
   ============================================ */
.wf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}
.wf-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
/* v46 deep-audit (28 May 2026) — Faz 1.5: modal alias birleştirme.
 * Önceki durum: .wf-modal + .wfm-form + .wfp-form + .wfa-modal + .wfs-modal + .wfo-modal
 * 6 ayrı alias farklı PHP template'lerde inline tanımlı (DRY ihlali).
 * Tüm aliaslar artık aynı base'den default'larını alır.
 * Faz 1.6'da inline tanımlar geriye uyumluluk yorumla işaretlenecek. */
.wf-modal,
.wfm-form,
.wfp-form,
.wfa-modal,
.wfs-modal,
.wfo-modal,
.wf-sheet {
    background: var(--wf-bg-card);
    border-radius: var(--wf-radius-xl);
    box-shadow: var(--wf-shadow-xl);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}
.wf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--wf-border);
}
.wf-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--wf-text-primary);
}
.wf-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--wf-transition-fast);
}
.wf-modal-close:hover {
    background: var(--wf-danger-light);
    color: var(--wf-danger);
}
.wf-modal-body { padding: 24px; }
.wf-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--wf-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ============================================
   15. TAB COMPONENT
   ============================================ */
.wf-tabs {
    display: flex;
    gap: 4px;
    background: var(--wf-bg-page);
    padding: 4px;
    border-radius: var(--wf-radius-md);
    border: 1px solid var(--wf-border);
    margin-bottom: 24px;
}
.wf-tab-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: var(--wf-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text-secondary);
    cursor: pointer;
    transition: all var(--wf-transition-fast);
    font-family: var(--wf-font);
    white-space: nowrap;
}
.wf-tab-btn:hover {
    color: var(--wf-text-primary);
}
.wf-tab-btn.active {
    background: var(--wf-bg-card);
    color: var(--wf-primary);
    box-shadow: var(--wf-shadow-sm);
}

/* ============================================
   16. TOAST NOTIFICATION
   ============================================ */
.wf-toast {
    position: fixed;
    bottom: 100px;
    right: 24px;
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
    word-break: break-word;
    padding: 12px 20px;
    border-radius: var(--wf-radius-md);
    background: var(--wf-bg-card);
    color: var(--wf-text-primary);
    border: 1px solid var(--wf-border);
    box-shadow: var(--wf-shadow-lg);
    font-size: 14px;
    font-weight: 500;
    z-index: 10001;
    opacity: 0;
    transform: translateY(16px);
    transition: all 0.3s var(--wf-ease);
}
.wf-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.wf-toast.success { border-left: 4px solid var(--wf-success); }
.wf-toast.error { border-left: 4px solid var(--wf-danger); }
.wf-toast.info { border-left: 4px solid var(--wf-info); }

/* ============================================
   17. SWITCH / TOGGLE
   ============================================ */
.wf-switch {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-block;
}
.wf-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.wf-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--wf-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--wf-transition-fast);
}
.wf-switch-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: all var(--wf-transition-fast);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.wf-switch input:checked + .wf-switch-slider {
    background: var(--wf-primary);
}
.wf-switch input:checked + .wf-switch-slider::before {
    transform: translateX(20px);
}

/* ============================================
   18. ANIMATIONS
   ============================================ */
@keyframes wf-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes wf-slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes wf-scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.wf-anim-fadeIn { animation: wf-fadeIn 0.3s var(--wf-ease); }
.wf-anim-slideUp { animation: wf-slideUp 0.3s var(--wf-ease); }
.wf-anim-scaleIn { animation: wf-scaleIn 0.3s var(--wf-ease-bounce); }

/* ============================================
   19. BACKWARD COMPAT (sp-* → wf-*)
   ============================================ */
.glass-panel {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    padding: 24px;
    box-shadow: var(--wf-shadow-card);
}
.sp-h3-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--wf-text-primary);
    margin-top: 0;
    margin-bottom: 16px;
}

/* ============================================
   20. THEME SWITCH JS HELPER
   ============================================ */
/* Theme switch is handled via data-theme attribute on body.
   JS: wfSetTheme('dark') → body.setAttribute('data-theme','dark') + localStorage */

/* ============================================
   21. WELCOME BANNER
   ============================================ */
.wf-welcome-banner {
    background: linear-gradient(135deg, var(--wf-primary), var(--wf-primary-hover, #9270ec));
    border-radius: var(--wf-radius-xl);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: var(--wf-shadow-lg);
}
.wf-welcome-banner h1,
.wf-welcome-banner h2,
.wf-welcome-banner h3,
.wf-welcome-banner p,
.wf-welcome-banner span {
    color: #ffffff !important;
}
.wf-welcome-text h2, .wf-welcome-text h3 {
    margin: 0 0 6px 0;
    font-size: 22px;
    font-weight: 700;
}
.wf-welcome-text p {
    margin: 0;
    opacity: 0.85;
    font-size: 14px;
}
.wf-welcome-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================
   22. SOFTER / CUTER GLOBAL OVERRIDES
   ============================================ */
/* Gentle card shadow + hover lift */
.wf-card, .wf-stat-card {
    transition: transform 0.2s var(--wf-ease), box-shadow 0.2s var(--wf-ease);
}
.wf-card:hover, .wf-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wf-shadow-md);
}

/* Section titles with gold accent line */
.wf-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--wf-gold, #FFB923);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wf-section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--wf-gold, #FFB923);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Quick action card */
.wf-action-card {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s var(--wf-ease);
    text-decoration: none;
    color: var(--wf-text-primary);
}
.wf-action-card:hover {
    background: var(--wf-bg-card-hover);
    border-color: var(--wf-gold, #FFB923);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--wf-gold-subtle, rgba(255,185,35,0.15));
    color: var(--wf-text-primary);
}
.wf-action-card .wf-action-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--wf-radius-md);
    background: var(--wf-gold-subtle, rgba(255,185,35,0.13));
    color: var(--wf-gold, #FFB923);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.wf-action-card .wf-action-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-text-secondary);
}

/* ============================================
   23. LOGO THEME SWITCHING
   ============================================ */
.wf-logo-image-dark { display: inline-block; }
.wf-logo-image-light { display: none; }/* ============================================
   24. COMPREHENSIVE TEXT VISIBILITY FIXES
   Ensures all elements are readable on dark/purple/navy themes
   ============================================ */

/* All paragraph and label text in dashboard shell */
.sp-shell-content p,
.sp-shell-content span:not(.wf-notif-badge):not(.wf-dock-badge):not(.wf-badge):not(.sp-status-badge):not(.wf-stat-label-tag),
.sp-shell-content label,
.sp-shell-content li,
.sp-shell-content td,
.sp-shell-content th,
.sp-shell-content dt,
.sp-shell-content dd,
.sp-shell-content figcaption,
.sp-shell-content small {
    color: var(--wf-text-primary);
}
/* Muted/secondary text */
.sp-shell-content .text-muted,
.sp-shell-content .sp-muted,
.sp-shell-content .sp-subtitle,
.sp-shell-content .sp-help-text {
    color: var(--wf-text-muted) !important;
}
/* Make sure headings are always visible */
.sp-shell-content h1,
.sp-shell-content h2,
.sp-shell-content h3,
.sp-shell-content h4,
.sp-shell-content h5,
.sp-shell-content h6 {
    color: var(--wf-text-primary) !important;
}
/* Welcome banner always white regardless of theme */
.wf-welcome-banner,
.wf-welcome-banner *,
.wf-welcome-banner p,
.wf-welcome-banner h1,
.wf-welcome-banner h2,
.wf-welcome-banner h3,
.wf-welcome-banner span {
    color: #ffffff !important;
}

/* ============================================
   25. SOFTER TABLE BORDERS
   ============================================ */
.sp-table th {
    border-bottom-color: var(--wf-border) !important;
}
.sp-table td {
    border-bottom: 1px solid var(--wf-border-light) !important;
}
.sp-table tr:last-child td {
    border-bottom: none !important;
}

/* ============================================
   26. SOFTER / CUTER PANEL DESIGN V2
   ============================================ */

/* Card hover lift with gold glow */
.sp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 0 0 1px var(--wf-border);
}

/* Subtler, rounder tabs */
.sp-tab-btn {
    border-radius: var(--wf-radius-md) !important;
    transition: all 0.18s var(--wf-ease) !important;
    font-weight: 600 !important;
    color: var(--wf-text-secondary) !important;
    background: transparent !important;
    padding: 8px 16px !important;
}
.sp-tab-btn.active,
.sp-tab-btn[aria-selected="true"] {
    background: var(--wf-primary) !important;
    color: var(--wf-text-inverse) !important;
    box-shadow: none !important;
    border-bottom: 2px solid var(--wf-primary) !important;
    font-weight: 700 !important;
}
.sp-tab-btn:hover:not(.active) {
    background: var(--wf-primary-subtle) !important;
    color: var(--wf-primary) !important;
}

/* Pill badges — rounder */
.sp-badge, .wf-badge, .sp-status-badge {
    border-radius: var(--wf-radius-full) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 10px !important;
}

/* Inputs - more rounded, softer focus */
.sp-input, .sp-select,
input.sp-input, textarea.sp-input, select.sp-input {
    border-radius: var(--wf-radius-md) !important;
    border: 1.5px solid var(--wf-border) !important;
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-primary) !important;
    transition: border-color 0.15s var(--wf-ease), box-shadow 0.15s var(--wf-ease) !important;
}
.sp-input:focus, .sp-select:focus,
input.sp-input:focus, textarea.sp-input:focus, select.sp-input:focus {
    border-color: var(--wf-primary) !important;
    box-shadow: 0 0 0 3px var(--wf-primary-subtle) !important;
    /* FAZ1: outline:none kaldırıldı — :focus-visible global override */
}

/* Dividers / HR - more subtle */
.sp-shell-content hr,
.sp-divider {
    border: none !important;
    border-top: 1px solid var(--wf-border-light) !important;
    margin: 12px 0 !important;
}

/* Animated stat cards */
.wf-stat-card {
    transition: transform 0.2s var(--wf-ease), box-shadow 0.2s var(--wf-ease) !important;
}
.wf-stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--wf-shadow-lg) !important;
}

/* ============================================
   27. PUBLIC DOCK — MINI CIRCLE CONSISTENT STYLE
   ============================================ */
#wuffi-dock-mini {
    align-items: center;
    justify-content: flex-end;
}
.wuffi-mini-circle {
    backdrop-filter: blur(var(--dock-blur, 16px)) !important;
    -webkit-backdrop-filter: blur(var(--dock-blur, 16px)) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}
.wuffi-mini-circle:hover {
    transform: scale(1.08) !important;
    color: var(--dock-active, #FFB923) !important;
}

/* ============================================
   28. SECTION INDICATORS & TAB MODERN STYLE
   ============================================ */
.wf-tabs-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px;
    background: var(--wf-bg-input);
    border-radius: var(--wf-radius-lg);
    margin-bottom: 20px;
}
.wf-tab-pill {
    padding: 8px 18px;
    border-radius: var(--wf-radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text-secondary);
    cursor: pointer;
    transition: all 0.18s var(--wf-ease);
    border: none;
    background: transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wf-tab-pill.active,
.wf-tab-pill[aria-selected="true"] {
    background: var(--wf-bg-card);
    color: var(--wf-gold);
    box-shadow: var(--wf-shadow-sm);
}
.wf-tab-pill:hover:not(.active) {
    background: var(--wf-primary-subtle);
    color: var(--wf-primary);
}
.wf-tab-pill i {
    font-size: 12px;
}

/* ============================================
   29. GOLD ACCENT HEADINGS IN PANELS
   ============================================ */
.wf-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--wf-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
}
.wf-page-title i {
    color: var(--wf-gold);
}
.wf-page-subtitle {
    font-size: 13px;
    color: var(--wf-text-muted);
    margin: 0;
}

/* Stat label text in stat cards */
.wf-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wf-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--wf-text-primary) !important;
    line-height: 1.1;
}
.wf-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--wf-radius-md);
    background: var(--wf-gold-subtle);
    color: var(--wf-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* ============================================
   10. GLOBAL ANIMATIONS & UTILITIES
   ============================================ */

/* Stagger entrance — apply .wf-stagger to parent */
.wf-stagger > * {
    opacity: 0;
    transform: translateY(14px);
    animation: wfStaggerIn 0.5s ease forwards;
}
.wf-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.wf-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.wf-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.wf-stagger > *:nth-child(4) { animation-delay: 0.20s; }
.wf-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.wf-stagger > *:nth-child(6) { animation-delay: 0.30s; }
.wf-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.wf-stagger > *:nth-child(8) { animation-delay: 0.40s; }
@keyframes wfStaggerIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes wf-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.wf-fade-in { animation: wf-fadeIn 0.4s ease; }

/* Slide up */
@keyframes wf-slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.wf-slide-up { animation: wf-slideUp 0.4s ease; }

/* Scale in */
@keyframes wf-scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.wf-scale-in { animation: wf-scaleIn 0.35s var(--wf-ease-bounce); }

/* Skeleton loading shimmer */
.wf-skeleton {
    background: linear-gradient(90deg,
        var(--wf-bg-card) 25%,
        var(--wf-border) 50%,
        var(--wf-bg-card) 75%
    );
    background-size: 200% 100%;
    animation: wfShimmer 1.5s infinite;
    border-radius: var(--wf-radius-sm);
}
@keyframes wfShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Ripple effect on buttons */
.wf-ripple {
    position: relative;
    overflow: hidden;
}
.wf-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s, transform 0.5s;
    pointer-events: none;
}
.wf-ripple:active::after {
    opacity: 1;
    transform: scale(2.5);
    transition: transform 0.15s, opacity 0s;
}

/* Pulse indicator (online/live dots) */
@keyframes wfPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}
.wf-pulse { animation: wfPulse 2s ease-in-out infinite; }

/* Smooth theme transition */
body,
.sp-dashboard-shell,
.sp-shell-content,
.sp-shell-header,
.wf-tabbar,
.wf-dock-bar,
.wf-card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Touch-friendly tap targets — exclude icon circles */
@media (pointer: coarse) {
    button:not(.wf-header-icon-btn):not(.wf-theme-toggle):not(.sp-close-modal):not(.sp-modal-close):not(.wf-dock-item):not(.wf-circle):not(.wf-th-back):not(.wf-th-mbtn):not(.wf-th-att):not(.wf-th-send):not(.wf-pf-actbtn):not(.wf-cm-close):not(.wf-feed-action):not(.wv-mute):not(.wv-big):not(.wf-biz-fav):not([class*="-fav"]):not([class*="-del"]):not(.wf-pop-x):not(.wfk-lb-x):not(.wf-mx):not(.wfa-mx):not(.wf-wheel-x):not([style*="border-radius:50%"]):not([class*="-circle"]),
    a:not(.wf-header-icon-btn):not(.wf-tabbar-item):not(.wf-circle):not([class*="-circle"]),
    .wf-pet-tab, .wf-filter-list li a {
        min-height: 44px;
    }
}

/* ═══ v53.4 ANTI-ELLIPSE GLOBAL RULE (29 May 2026) ═══
 * border-radius:50% + width !== height = ellipse → çirkin.
 * Coarse-pointer min-height:44px kuralı yukarıda dairesel ikon butonları ezebilir
 * (sınıf-tabanlı border-radius:50% CSS-selector'dan görünmez). Çözüm: tüm
 * dairesel butonlara aspect-ratio:1 ve gerektiğinde min-width=min-height paritesi.
 * Yeni ikon eklerken `.wf-circle` opt-in utility class'ını kullanın. */
.wf-circle,
.wf-th-back, .wf-th-mbtn, .wf-th-att, .wf-th-send,
.wf-th-attitem .ic-wrap, .wf-th-pp,
.wf-pf-actbtn, .wf-cm-close, .wf-feed-action,
.wv-mute, .wv-big, .wf-biz-fav, button[class*="-fav"], a[class*="-fav"],
.wf-pop-x, .wfk-lb-x, .wf-mx, .wfa-mx, .wf-wheel-x, button[class*="-del"],
.wf-cl-pp, .wf-cl-row .wf-cl-pp,
.wf-header-icon-btn, .wf-header-avatar, .wf-theme-toggle,
.sp-close-modal, .sp-modal-close,
button[class*="-circle"], a[class*="-circle"],
[class*="wf-icon-circle"], [class*="wf-avatar-circle"] {
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
}
@media (pointer: coarse) {
  /* Tap-target uyumlu min boyutlar — dairesel kalmak için BOTH min-w/min-h. */
  .wf-circle, .wf-header-icon-btn, .wf-theme-toggle,
  .sp-close-modal, .sp-modal-close,
  button[class*="-circle"], a[class*="-circle"] {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================
   11. RESPONSIVE UTILITIES
   ============================================ */
.d-none-mobile { }
@media (max-width: 768px) {
    .d-none-mobile { display: none !important; }
}
@media (max-width: 480px) {
    .d-none-small { display: none !important; }
}

/* ============================================
   25. ANIMATION SYSTEM
   Stagger, fade, slide, counter, skeleton, ripple
   ============================================ */

/* ─── Base keyframes ─── */
@keyframes wf-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes wf-slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes wf-scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes wf-slideInRight {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── Animation utility classes ─── */
.wf-animate { animation-fill-mode: both; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.wf-fadeIn     { animation-name: wf-fadeIn; }
.wf-slideUp    { animation-name: wf-slideUp; }
.wf-scaleIn    { animation-name: wf-scaleIn; }
.wf-slideRight { animation-name: wf-slideInRight; }

/* ─── Stagger: children animate in sequence ─── */
.wf-stagger > * {
    opacity: 0;
    animation: wf-slideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wf-stagger > *:nth-child(1)  { animation-delay: 0.04s; }
.wf-stagger > *:nth-child(2)  { animation-delay: 0.08s; }
.wf-stagger > *:nth-child(3)  { animation-delay: 0.12s; }
.wf-stagger > *:nth-child(4)  { animation-delay: 0.16s; }
.wf-stagger > *:nth-child(5)  { animation-delay: 0.20s; }
.wf-stagger > *:nth-child(6)  { animation-delay: 0.24s; }
.wf-stagger > *:nth-child(7)  { animation-delay: 0.28s; }
.wf-stagger > *:nth-child(8)  { animation-delay: 0.32s; }
.wf-stagger > *:nth-child(9)  { animation-delay: 0.36s; }
.wf-stagger > *:nth-child(10) { animation-delay: 0.40s; }
.wf-stagger > *:nth-child(n+11) { animation-delay: 0.44s; }

/* ─── Viewport-triggered: animate only when visible ─── */
.wf-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.wf-reveal.wf-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Skeleton loading shimmer ─── */
.wf-skeleton {
    background: linear-gradient(90deg,
        var(--wf-bg-card, #1c1838) 25%,
        var(--wf-bg-input, #231f33) 50%,
        var(--wf-bg-card, #1c1838) 75%);
    background-size: 200% 100%;
    animation: wf-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--wf-radius-md, 8px);
}
@keyframes wf-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.wf-skeleton-text {
    height: 14px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.wf-skeleton-text.short { width: 60%; }
.wf-skeleton-text.medium { width: 80%; }
.wf-skeleton-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
}
.wf-skeleton-card {
    height: 120px;
    border-radius: var(--wf-radius-lg, 12px);
}

/* ─── Button ripple effect ─── */
.wf-ripple {
    position: relative;
    overflow: hidden;
}
.wf-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.3s ease;
}
.wf-ripple:active::after {
    transform: scale(2.5);
    opacity: 1;
    transition: transform 0.15s ease, opacity 0s;
}

/* ─── Card hover lift ─── */
.wf-hover-lift {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.wf-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 0 0 1px var(--wf-border);
}

/* ─── Theme transition (smooth color swap) ─── */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0s;
}
[data-theme-transition] *,
[data-theme-transition] *::before,
[data-theme-transition] *::after {
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* ─── Pulse glow (for important items) ─── */
@keyframes wf-pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 var(--wf-gold-subtle, rgba(255,185,35,0.2)); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}
.wf-pulse-glow {
    animation: wf-pulseGlow 2s ease-in-out infinite;
}

/* ─── Reduced motion: respect user preference ─── */
@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;
    }
    .wf-stagger > * { opacity: 1; animation: none; }
    .wf-reveal { opacity: 1; transform: none; }
    .wf-skeleton { animation: none; }
}

/* ============================================
   ZZ. GLOBAL ACCESSIBILITY OVERRIDES (FAZ 1 + 6)
   ============================================ */

/* Focus halkası — klavye-only kullanıcılar için her zaman görünür */
*:focus-visible {
    outline: 2px solid var(--wf-primary-strong, #6c5ce7) !important;
    outline-offset: 2px !important;
    box-shadow: var(--wf-focus-ring, 0 0 0 3px rgba(108, 92, 231, 0.45)) !important;
    border-radius: inherit;
}

/* Placeholder rengi — kontrast yükseltildi */
::placeholder {
    color: var(--wf-text-secondary, rgba(255, 255, 255, 0.55)) !important;
    opacity: 1;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Skip link */
.wf-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10001;
}
.wf-skip-link:focus {
    left: 16px;
    top: 16px;
    padding: 10px 18px;
    background: var(--wf-primary-strong, #6c5ce7);
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Loading skeleton (FAZ 5'te de kullanılır) */
.wf-skeleton {
    background: linear-gradient(90deg,
        var(--wf-bg-input, #271f4e) 25%,
        rgba(255, 255, 255, 0.06) 50%,
        var(--wf-bg-input, #271f4e) 75%);
    background-size: 200% 100%;
    animation: wf-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes wf-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty state (FAZ 5) */
.wf-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--wf-text-secondary);
}
.wf-empty-state-icon {
    font-size: 64px;
    opacity: 0.4;
    margin-bottom: 16px;
    line-height: 1;
}
.wf-empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--wf-text-primary);
    margin: 0 0 8px;
}
.wf-empty-state-desc {
    font-size: 14px;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.6;
}
.wf-empty-state-cta { margin-top: 24px; }

/* Status chip (FAZ 6 — ikon+text) */
.wf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.wf-chip-success { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.wf-chip-warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.wf-chip-danger  { background: rgba(239, 68, 68, 0.15);  color: #ef4444; }
.wf-chip-info    { background: rgba(108, 92, 231, 0.15); color: var(--wf-primary-strong, #6c5ce7); }

/* Form field error (FAZ 5 — inline validation) */
.wf-field-error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #ef4444;
    line-height: 1.4;
}
.wf-input.is-invalid,
.sp-input.is-invalid {
    border-color: #ef4444 !important;
}

/* Touch target minimum (FAZ 7) */
.wf-touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* Tablo overflow wrapper (FAZ 7) */
.wf-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Hero decoration safety (FAZ 1 — glow metni etkilemesin) */
.wf-hero-decoration,
.wf-decorative-glow,
.wf-bg-shape {
    pointer-events: none;
    z-index: 0;
}
.wf-hero-content,
.wf-cta-stack {
    position: relative;
    z-index: 1;
}

/* FAZ 7: Chat input focus -> dock hide (mobile keyboard) */
@media (max-width: 768px) {
    body.wf-chat-focus .superpet-dock,
    body.wf-chat-focus .wf-dock,
    body.wf-chat-focus #wuffi-dock { display: none !important; }
}

/* ============================================
   FAZ 14 — BUTON DEKORATİF OVERLAP FIX (KRİTİK)
   Sebep: wf-bg-anim::before/after/span büyük blur'lu
   blob'lar bazı section'larda buton/CTA'ların üstüne çıkıyor.
   Cözüm: tüm butonları + içeriklerini foreground'a it.
   ============================================ */

/* Arka plan animasyonu HER ZAMAN en arkada kalsın */
.wf-bg-anim,
.wf-bg-anim::before,
.wf-bg-anim::after,
.wf-bg-anim > span,
.wf-bg-overlay,
.wf-hero-bg,
.wf-decorative-glow,
.wf-bg-shape,
.wuffi-particle,
.wf-particle {
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Tüm butonlar daima ön planda + içeriği görünür */
.wf-btn,
.sp-btn,
.wuffi-btn,
.wf-cta-btn,
.wf-header-icon-btn,
.wf-pet-action-btn,
button.wf-btn,
button.sp-btn,
a.wf-btn,
a.sp-btn,
a.wuffi-btn,
a.wf-cta-btn {
    position: relative !important;
    z-index: 5 !important;
    isolation: isolate; /* yeni stacking context — pseudo-element'ler dışarıdan etkilemez */
}

/* Buton metin ve ikonları her zaman üstte */
.wf-btn > *,
.sp-btn > *,
.wuffi-btn > *,
.wf-cta-btn > *,
.wf-pet-action-btn > * {
    position: relative;
    z-index: 1;
}

/* Empty state içindeki buton + Quick Access kartları */
.wf-empty-state,
.wf-empty-state-cta,
.wf-pets-empty,
.wf-quick-access,
.sp-quick-card,
.wf-quick-card,
.wf-action-card {
    position: relative;
    z-index: 2;
}

/* Owner home banner içindeki CTA — banner dekorasyonları (sun/moon/clouds) butonu kapatmasın */
.wf-oh-banner-overlay,
.wf-oh-banner > .wf-oh-content,
.wf-oh-banner h2,
.wf-oh-banner p,
.wf-oh-banner .wf-btn {
    position: relative;
    z-index: 10;
}

/* Hero bölümleri — dekoratif blob arkada, içerik önde */
section.wf-hero,
.wf-hero {
    isolation: isolate;
}
.wf-hero > *:not(.wf-hero-bg):not(.wf-bg-anim) {
    position: relative;
    z-index: 1;
}

/* Animation particles — heart/star/paw vb. */
.wuffi-particle,
.wuffi-particle.heart,
.wuffi-particle.star,
.wuffi-particle.paw {
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ============================================
   FAZ 15 — METİN BUTONLARI ZORLA DİKDÖRTGEN YAP
   Sebep: Tema veya başka CSS metin butonlarını
   yanlışlıkla daire yapıyor (aspect-ratio:1/1).
   Sonuç: "+ Add My First Friend" gibi butonlar
   ortasında küçük daire görünüyor, metin dışarı taşıyor.

   Çözüm: Metin butonlarını zorla yatay-genişleyen
   pill/dikdörtgen yap. Sadece icon-only butonlar
   (sp-btn-icon, wf-header-icon-btn vs) daire kalır.
   ============================================ */
.wf-btn,
.wf-btn-primary,
.wf-btn-secondary,
.wf-btn-gold,
.wf-btn-ghost,
.wf-btn-outline,
.wf-btn-danger,
.wf-btn-success,
.wf-cta-btn,
.wf-cta-btn.gold,
.wf-cta-btn.ghost,
.wf-cta-btn.primary,
.wuffi-btn,
button.wf-btn,
button.wf-cta-btn,
a.wf-btn,
a.wf-cta-btn,
a.wuffi-btn {
    /* Asla zorunlu kare/daire olmasın */
    aspect-ratio: auto !important;
    /* Genişlik içerik kadar */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    /* Minimum dokunma alanı */
    min-height: 44px !important;
    min-width: 120px !important;
    /* Standart padding */
    padding: 12px 24px !important;
    /* v11.13.16 — TEK radius standardı (kullanıcı: tüm butonlar aynı oran). */
    border-radius: var(--wf-radius-std, 14px) !important;
    /* Layout: yatay flex, içerik ortada */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    /* Tip stili */
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    /* Box model */
    box-sizing: border-box !important;
    /* İçerik dışarı taşmasın */
    overflow: visible !important;
    /* Cursor */
    cursor: pointer;
}

/* SADECE ikon-only butonlar daire kalır */
.sp-btn-icon,
button.sp-btn-icon,
.wf-btn-icon,
.wf-btn-circle,
.sp-btn-circle,
.wf-header-icon-btn,
.wf-theme-toggle,
.wf-lang-btn,
.sp-close-modal,
.sp-modal-close,
.sp-chat-sidebar-close,
.sp-chat-back-btn {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Pill tipi pagination/chip butonları (kabul edilebilir oval) */
.wfb-page-btn,
.wf-cat-card,
.wf-pet-tab,
.sp-tab-item {
    aspect-ratio: auto !important;
    min-width: 44px !important;
    width: auto !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
}

/* Buton içindeki <i> ikon ve text — taşmayı engelle */
.wf-btn > i,
.wf-cta-btn > i,
.wuffi-btn > i,
.wf-btn > span,
.wf-cta-btn > span {
    flex-shrink: 0;
}

/* Buton genişliği responsive — küçük ekranda full-width yap */
@media (max-width: 480px) {
    .wf-btn,
    .wf-cta-btn,
    .wuffi-btn {
        min-width: 100px !important;
    }
    /* Empty state CTA'ları full-width */
    .wf-empty-state .wf-btn,
    .wf-pets-empty .wf-btn,
    .wf-onboarding-banner .wf-btn {
        width: 100% !important;
        max-width: 320px !important;
    }
}

/* Buton içindeki uzun metin sığmıyorsa wrap olabilsin (son çare) */
.wf-btn-wrap {
    white-space: normal !important;
    line-height: 1.4 !important;
    height: auto !important;
}

/* ============================================
   FAZ 16 — KAPSAMLI UI HATA DÜZELTMELERİ
   Bütün tarama sonucu tespit edilen 80+ küçük buton/form/modal sorunu
   ============================================ */

/* Modal close butonları 44x44 (mobilde dokunulabilir) */
.sp-close-modal,
.sp-modal-close,
.wf-modal-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 18px !important;
    border-radius: 50% !important;
    cursor: pointer;
    background: var(--wf-bg-input) !important;
    border: none !important;
    color: var(--wf-text-secondary) !important;
    transition: background 0.15s, color 0.15s !important;
}
.sp-close-modal:hover,
.sp-modal-close:hover,
.wf-modal-close:hover {
    background: var(--wf-danger, #ef4444) !important;
    color: #fff !important;
}

/* Disabled buton stili — global */
.wf-btn:disabled,
.wf-btn[disabled],
.sp-btn:disabled,
.sp-btn[disabled],
.wf-cta-btn:disabled,
.wuffi-btn:disabled,
button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Loading state — buton tıklandığında bekleme görünümü */
.wf-btn.is-loading,
.sp-btn.is-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.wf-btn.is-loading::after,
.sp-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wf-btn-spin 0.6s linear infinite;
    color: var(--wf-text-on-primary, #fff);
}
@keyframes wf-btn-spin {
    to { transform: rotate(360deg); }
}

/* Form input tutarlılığı (focus + border consistency) */
.wf-input,
.sp-input,
.sp-form-control,
.wf-select,
.wf-textarea {
    min-height: 44px;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* FAZ 22: Select dropdown — force readable text on dark theme */
select.sp-input,
select.wf-input,
select.sp-form-control,
select.wf-select {
    color: var(--wf-text-primary) !important;
    background-color: var(--wf-bg-input) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3eeff' opacity='0.7'><path d='M3.293 5.293a1 1 0 011.414 0L8 8.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    padding-right: 32px !important;
}
select.sp-input option,
select.wf-input option,
select.sp-form-control option,
select.wf-select option {
    background: var(--wf-bg-card) !important;
    color: var(--wf-text-primary) !important;
}
[data-theme="pudra"] select.sp-input,
[data-theme="pudra"] select.wf-input,
[data-theme="pudra"] select.sp-form-control,
[data-theme="pudra"] select.wf-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1640' opacity='0.7'><path d='M3.293 5.293a1 1 0 011.414 0L8 8.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/></svg>") !important;
}

/* Form input invalid state */
.wf-input.is-invalid,
.sp-input.is-invalid,
input.error,
input[aria-invalid="true"] {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

/* Checkbox / radio min hit area (44px) */
input[type="checkbox"] + label,
input[type="radio"] + label,
label > input[type="checkbox"],
label > input[type="radio"] {
    cursor: pointer;
}
.wf-consent-wrap,
.wf-consent {
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
}
.wf-consent-wrap input[type="checkbox"],
.wf-consent input[type="checkbox"] {
    margin-top: 4px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

/* Tablo ve listeler mobile overflow */
.sp-table-responsive,
.wf-table-wrap,
.sp-card > table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Card consistency: padding ve gap standardı */
.sp-card {
    box-sizing: border-box;
}

/* Sticky bottom dock'un input ile çakışmasını engelle */
@media (max-width: 768px) {
    .sp-main {
        padding-bottom: 100px !important;
    }
}

/* Stat / KPI kart hover */
.wf-oh-stat:hover,
.sp-stat-card:hover,
.wf-stat-card:hover {
    transform: translateY(-2px);
    transition: transform 0.15s ease;
}

/* Sidebar nav item active state — daha belirgin */
.sp-sidebar-nav a.active,
.sp-nav-item.active,
.wf-nav-item.active {
    background: var(--wf-primary-subtle) !important;
    color: var(--wf-primary) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--wf-primary) !important;
}

/* iPhone X+ safe area for fixed bottom bars */
.wf-dock,
.superpet-dock,
#wuffi-dock {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

/* Ghost / outline buton kontrastı (BUG-011 yedek) */
.wf-btn-ghost,
.wf-btn-outline,
.wf-cta-btn.ghost {
    border: 1.5px solid var(--wf-border) !important;
    background: transparent !important;
}
.wf-btn-ghost:hover,
.wf-btn-outline:hover,
.wf-cta-btn.ghost:hover {
    border-color: var(--wf-primary, #6c5ce7) !important;
    color: var(--wf-primary, #6c5ce7) !important;
    background: var(--wf-primary-subtle) !important;
}

/* Avatar container içinde initial harf ortalanır */
.wf-header-avatar,
.sp-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
}

/* Chat bubble mobile */
@media (max-width: 480px) {
    .sp-msg { max-width: 85% !important; }
}

/* Notification badge — overflow visible parent zorunlu */
.wf-header-icon-btn {
    overflow: visible !important;
}
.wf-notif-badge {
    align-items: center;
    justify-content: center;
}
/* FAZ 17: Badge boşsa GİZLE — JS textContent set etmediğinde içi boş kırmızı daire görünüyordu */
.wf-notif-badge:empty {
    display: none !important;
}
/* JS style.display='none' set ettiğinde de saygı duy */
.wf-notif-badge[style*="display: none"],
.wf-notif-badge[style*="display:none"] {
    display: none !important;
}

/* Pet card aksiyon ikonları 44x44 */
.wf-pet-action-btn,
.wf-pet-action-primary,
.wf-pet-action-secondary,
.wf-pet-action-danger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* v11.13.16 — Pet aksiyon ikon butonları da TEK radius standardı. */
    border-radius: var(--wf-radius-std, 14px) !important;
}

/* Tab/chip aktif state border-bottom shift engelle */
.sp-tab-item,
.wf-tab-item {
    border-bottom: 2px solid transparent !important;
}
.sp-tab-item.active,
.wf-tab-item.active {
    border-bottom-color: var(--wf-primary) !important;
}

/* ============================================
   FAZ 17 — DİL SEÇİCİ (sadece bayrak, daire tam dolu)
   ============================================ */
.wf-lang-switcher {
    position: relative;
}
.wf-lang-btn {
    /* Standart 40x40 daire (header diğer ikon butonlarıyla aynı) */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    border: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-input) !important;
    /* Bayrak içerik dışına taşmasın */
    line-height: 1 !important;
}
.wf-lang-btn:hover {
    border-color: var(--wf-primary) !important;
    transform: scale(1.05);
    transition: transform 0.15s, border-color 0.15s;
}
/* Büyük bayrak — daire içini tamamen kaplar */
/* v11.13.16 — Bayrak emoji KALDIRILDI → dil kodu metin rozeti (emoji-yasağı). */
.wf-lang-flag-big {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    display: block !important;
    color: var(--wf-text-primary, #f3eeff) !important;
}
.wf-lang-menu .wf-lang-menuitem-code {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 20px; padding: 0 5px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.5px; line-height: 1;
    border-radius: 6px;
    background: rgba(255,255,255,0.10);
    color: var(--wf-text-secondary, #b9b4d0);
}
.wf-lang-menu .wf-lang-menuitem.is-active .wf-lang-menuitem-code { background: rgba(255,185,35,0.22); color: #ffb923; }

/* Dropdown menu — body-level + JS-positioned (top/right inline). FAZ 25 fix:
   position:fixed because the menu lives at body root (escapes sticky-header
   stacking context). top/right are set by JS based on button rect, so we
   intentionally do NOT use !important on them — inline must win. */
.wf-lang-menu {
    position: fixed !important;
    min-width: 168px !important;
    background: rgba(20,11,40,0.96) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
    list-style: none !important;
    padding: 6px !important;
    margin: 0 !important;
    z-index: 999999 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wf-lang-menu[hidden] {
    display: none !important;
}
.wf-lang-menuitem {
    all: unset;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    color: var(--wf-text-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: background 0.15s !important;
}
.wf-lang-menuitem:hover {
    background: var(--wf-primary-subtle) !important;
    color: var(--wf-primary) !important;
}
.wf-lang-menuitem.is-active {
    background: var(--wf-primary-subtle) !important;
    color: var(--wf-primary) !important;
    font-weight: 700 !important;
}
.wf-lang-menu-flag {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Header z-index ayarı — dropdown'ı engellememesi için header'ın
   isolation veya transform property'si OLMAMALI. */
.sp-shell-header,
.wf-header,
#wf-dashboard-header {
    isolation: auto !important;
    transform: none !important;
    overflow: visible !important;
    position: sticky !important;
    z-index: 100 !important;
}

/* ============================================
   FAZ 19 — GOLD BUTON METNİ DAİMA SİYAH + İŞLETME BUTON ORTALA
   ============================================ */
/* Gold buton text rengi !important (link rengi override) */
.wf-btn-gold,
.wf-btn-gold:link,
.wf-btn-gold:visited,
.wf-btn-gold:hover,
.wf-btn-gold:active,
a.wf-btn-gold,
a.wf-btn-gold:visited,
button.wf-btn-gold,
.wf-cta-btn.gold,
.wf-cta-btn.gold:link,
.wf-cta-btn.gold:visited,
.wf-cta-btn.gold:hover {
    color: var(--wf-text-on-gold, #1a1130) !important;
}
.wf-btn-gold *,
.wf-cta-btn.gold * {
    color: inherit !important;
}

/* Single business sayfası — sağ sticky butonlar ORTALA + TAŞMAYI ENGELLE */
.sp-biz-actions,
.sp-biz-actions a,
.sp-biz-actions button,
.sp-biz-cta-stack a,
.sp-biz-cta-stack button,
.wf-biz-action-btn,
.sp-biz-action-btn,
.wfb-btn,
.wfb-btn-primary,
.wfb-btn-whatsapp,
.wfb-btn-secondary,
.wfb-btn-outline,
.wfb-card .wfb-btn,
.wfb-card a.wfb-btn,
.wfb-card button.wfb-btn,
a.wfb-btn,
button.wfb-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important; /* KRİTİK — content-box -> border-box */
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Single-business kart içi — buton container'larının padding'i butonu sıkıştırmasın */
.wfb-card {
    box-sizing: border-box !important;
    overflow: hidden;
}
.wfb-card > .wfb-btn,
.wfb-card > a.wfb-btn,
.wfb-card > button.wfb-btn {
    width: calc(100% - 0px) !important;
}

/* Generic — buton içeriği daima ortalı (tüm panel butonları) */
.wf-btn,
.wf-btn-primary,
.wf-btn-gold,
.wf-btn-secondary,
.wf-btn-ghost,
.wf-btn-outline,
.wf-btn-danger,
.wf-btn-success,
.wf-cta-btn,
.sp-btn,
.sp-btn-primary,
.sp-btn-secondary,
button.sp-btn {
    text-align: center !important;
}

/* ============================================================================
   FAZ 25 (revize): SARI BG = SIYAH YAZI — sadece TAM SARI ARKAPLANLI elementler.
   Hover/active state'lerde transparan/yarı-saydam sarı kullanılan UI'lar bu
   kuralın DIŞINDA — onlar tema yazı rengini (genelde beyaz) korumalı.
   ============================================================================ */
.wf-btn-gold, .wf-btn-gold *,
.wf-cta-btn.gold, .wf-cta-btn.gold *,
.wf-static__btn.gold, .wf-static__btn.gold *,
.wf-static__btn--primary, .wf-static__btn--primary *,
.wcb-btn-primary, .wcb-btn-primary *,
.sp-btn-gold, .sp-btn-gold *,
.wf-cart-fab, .wf-cart-fab *,
.wf-icon-bg-gold, .wf-icon-bg-gold *,
.wf-header-avatar,
#wuffi-chat-floating-btn, #wuffi-chat-floating-btn *,
.wuffi-chat-send, .wuffi-chat-send *,
.wuffi-msg.sent, .wuffi-msg.sent *,
.sp-msg-row.me .sp-msg-bubble, .sp-msg-row.me .sp-msg-bubble *,
.sp-chat-input-area button[type="submit"], .sp-chat-input-area button[type="submit"] *,
#sp-chat-form button[type="submit"], #sp-chat-form button[type="submit"] *,
.wf-prose mark,
[data-bg="gold"], [data-bg="gold"] *,
button[style*="FFB923"]:not(.allow-light),
button[style*="FFB924"]:not(.allow-light),
button[style*="ff9800"]:not(.allow-light) {
    color: #1a0e08 !important;
}

/* Hover/focus için: sadece gerçek altın gradient butonlarda yazı siyah kalsın */
.wf-btn-gold:hover, .wf-btn-gold:hover *,
.wf-btn-gold:focus, .wf-btn-gold:focus *,
.wf-btn-gold:active, .wf-btn-gold:active *,
.wf-cta-btn.gold:hover, .wf-cta-btn.gold:hover *,
.wf-cta-btn.gold:focus, .wf-cta-btn.gold:focus *,
.wf-static__btn.gold:hover, .wf-static__btn.gold:hover *,
.wf-static__btn--primary:hover, .wf-static__btn--primary:hover *,
.wcb-btn-primary:hover, .wcb-btn-primary:hover *,
.sp-btn-gold:hover, .sp-btn-gold:hover * {
    color: #1a0e08 !important;
}

/* SVG/icon stroke + fill — sadece tam sarı bg'li butonlar için */
.wf-btn-gold svg, .wf-btn-gold path, .wf-btn-gold i,
.wf-cta-btn.gold svg, .wf-cta-btn.gold path, .wf-cta-btn.gold i,
.wf-static__btn.gold svg, .wf-static__btn.gold i,
.wf-static__btn--primary svg, .wf-static__btn--primary i,
.wcb-btn-primary svg, .wcb-btn-primary i,
.sp-btn-gold svg, .sp-btn-gold i,
.wf-icon-bg-gold svg, .wf-icon-bg-gold i,
.wuffi-chat-send svg, .wuffi-chat-send i,
#wuffi-chat-floating-btn svg, #wuffi-chat-floating-btn i,
.sp-chat-input-area button[type="submit"] svg, .sp-chat-input-area button[type="submit"] i,
#sp-chat-form button[type="submit"] svg, #sp-chat-form button[type="submit"] i,
.wf-cart-fab svg, .wf-cart-fab i {
    color: #1a0e08 !important;
    fill: currentColor !important;
}

/* ============================================================================
   v5.0.1 (2026-05-03): Stat-icon + action-icon contrast fix.
   Why: previous gold-buton override over-applied to .wf-stat-icon and
   .wf-action-card .wf-action-icon, forcing icons black even when their
   inline color: was supposed to be the brand color (purple/green/gold/etc).
   How: explicitly inherit from inline style, force higher specificity than
   the Faz 25 sweep above. Inline style="color:..." sets color on the wrapper,
   icons inside take currentColor.
   ============================================================================ */
.wf-stat-icon,
.wf-stat-icon i,
.wf-stat-icon svg,
.wf-action-card .wf-action-icon,
.wf-action-card .wf-action-icon i,
.wf-action-card .wf-action-icon svg {
    color: inherit !important;
    fill: currentColor !important;
}
.wf-stat-icon[style*="color:"] i,
.wf-stat-icon[style*="color:"] svg {
    color: currentColor !important;
}

/* Date/time picker icon — koyu temada görünür yap */
input[type="date"].sp-input,
input[type="time"].sp-input,
input[type="datetime-local"].sp-input,
.sp-input[type="date"],
.sp-input[type="time"] {
    color-scheme: dark;
}
input[type="date"].sp-input::-webkit-calendar-picker-indicator,
input[type="time"].sp-input::-webkit-calendar-picker-indicator,
.sp-input[type="date"]::-webkit-calendar-picker-indicator,
.sp-input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) brightness(1.2);
    opacity: 0.85;
    cursor: pointer;
}

/* Status select option'ları koyu temada okunur */
select.sp-input,
select.wf-input {
    color: var(--wf-text-primary, #f3eeff);
    background-color: var(--wf-bg-input, #1f1a3a);
}
select.sp-input option,
select.wf-input option {
    background: var(--wf-bg-card, #1a163a);
    color: var(--wf-text-primary, #f3eeff);
}

/* Status renkleri — option text rengi (data-status ile renkli rozet)
   Native option styling sınırlı; metni "(Yellow)" tarzı renk ipucuyla bırakıyoruz
   ama UI'da seçilen değerin yanına renkli nokta gösteren JS pattern'i kullanılır. */
.sp-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.sp-status-dot.pending    { background: #FFB923; }
.sp-status-dot.confirmed  { background: #3b82f6; }
.sp-status-dot.completed  { background: #10b981; }
.sp-status-dot.cancelled  { background: #ef4444; }

/* Anchor/link içerikleri override */
a.wf-btn-gold, a.wf-btn-gold:visited,
a.wf-cta-btn.gold, a.wf-cta-btn.gold:visited,
a.sp-btn-gold, a.sp-btn-gold:visited {
    color: #1a0e08 !important;
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════
   v11.13.15 — LIQUID GLASS KATMANI (merkezî, geri-dönülebilir)
   Apple Liquid Glass + Glassmorphism 2.0 araştırması. Mor kimlik korunur;
   yarı saydam + backdrop blur + ince kenarlık + ÜST SPECULAR HIGHLIGHT.
   Performans: blur SADECE üst-seviye chrome (kart/modal/dock/header).
   CTA altın butonlar SOLID kalır (okunabilirlik/erişilebilirlik).
   Tek bloğu silersek eski görünüme tam dönülür.
   ════════════════════════════════════════════════════════════════════ */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  /* v11.13.16 — KAPSAMLI selector: owner/biz/admin TÜM kart/stat sınıfları
     (.adm-stat admin'de inline style → !important ile ezilir). GÖRÜNÜR cam:
     aydınlık buzlu yüzey + belirgin kenarlık + iç parıltı + gölge. */
  .wf-card, .glass-panel, .wf-stat-card, .biz-stat, .sp-card,
  .adm-stat, .sp-stat, .sp-tile, .wf-stat, .biz-card, .adm-card,
  .wf-panel, .sp-panel, .dashboard-card {
    background: var(--wf-glass-bg) !important;
    backdrop-filter: blur(var(--wf-glass-blur)) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(var(--wf-glass-blur)) saturate(1.6) !important;
    border: 1px solid var(--wf-glass-border) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.30),
                inset 0 1px 0 var(--wf-glass-hi) !important;
    position: relative;
  }
  /* Üst specular highlight — cama düşen ışık (Apple Liquid Glass) */
  /* GLOSSY BEYAZ SHEEN KAPATILDI (23 May, kullanıcı: "arkaplandaki beyaz
     gradyanı kaldır, mobil paleti" — mobilde böyle beyaz specular highlight YOK). */
  .wf-card::before, .glass-panel::before, .wf-stat-card::before,
  .biz-stat::before, .sp-card::before, .adm-stat::before,
  .sp-stat::before, .sp-tile::before, .wf-stat::before {
    content: none !important;
    display: none !important;
  }
  /* Modal: cam + DAHA GENİŞ + DAHA YUVARLAK + specular (kullanıcı talebi) */
  .wf-modal, .sp-modal {
    background: var(--wf-glass-bg-strong) !important;
    backdrop-filter: blur(var(--wf-glass-blur-strong)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--wf-glass-blur-strong)) saturate(1.5);
    border: 1px solid var(--wf-glass-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
  }
  .wf-modal { max-width: min(620px, 95vw) !important; }
  .wf-modal::before, .sp-modal::before {
    content: none !important; display: none !important; /* beyaz sheen kapatıldı */
  }
  /* Modal arka perde: koyu + hafif blur (içerik öne çıkar) */
  .wf-modal-overlay, .sp-modal-overlay {
    background: rgba(8, 6, 20, 0.62) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* Dock + header: tutarlı cam (zaten blur'luydu — token'a hizala) */
  /* v11.13.16 — dock/header DAHA OPAK (kullanıcı: arka plan çok görünüyordu) */
  .wf-dock-bar, .sp-shell-header.wf-header, #wf-dashboard-header {
    background: var(--wf-glass-bg-dock) !important;
    backdrop-filter: blur(var(--wf-glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--wf-glass-blur)) saturate(1.4);
    border-color: var(--wf-glass-border) !important;
  }
  /* v11.13.16 — TUTARLI KÖŞE: kart/buton/input/chip/modal-alan HEPSİ tek
     standart yuvarlaklık (--wf-radius-std). Kullanıcı: hepsi aynı oranda. */
  .wf-card, .glass-panel, .wf-stat-card, .biz-stat, .sp-card, .adm-stat,
  .sp-stat, .sp-tile, .wf-stat, .biz-card, .adm-card, .wf-panel, .sp-panel,
  .dashboard-card, .wf-btn, .sp-btn, button.wf-btn, .sp-input, input.sp-input,
  textarea.sp-input, select.sp-input, .wf-input, .sp-chip, .wf-chip,
  .wf-badge, .biz-quick-action, .wf-quick-action {
    border-radius: var(--wf-radius-std) !important;
  }
  /* Tam-yuvarlak kalması gerekenler hariç (avatar, ikon-rozet, pill) */
  .wf-avatar, .wf-header-avatar, .wf-dock-item .wf-dock-icon,
  .sp-avatar, .wf-pill, .status-pill, .wf-badge-dot, .rounded-full {
    border-radius: var(--wf-radius-full) !important;
  }
  /* İkincil/ghost butonlar: hafif cam. Altın CTA DOKUNULMAZ (kontrast). */
  .wf-btn-ghost, .wf-btn-secondary, .sp-btn-ghost {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(var(--wf-glass-blur-subtle));
    -webkit-backdrop-filter: blur(var(--wf-glass-blur-subtle));
    border: 1px solid var(--wf-glass-border) !important;
  }
  /* GPU ipucu (yalnız chrome) */
  .wf-modal, .wf-dock-bar, .sp-shell-header.wf-header { transform: translateZ(0); }
}
/* Erişilebilirlik: şeffaflık azalt tercihinde solid'e dön */
@media (prefers-reduced-transparency: reduce) {
  .wf-card, .glass-panel, .wf-stat-card, .wf-modal, .sp-modal,
  .wf-dock-bar, .sp-shell-header.wf-header, #wf-dashboard-header {
    background: var(--wf-bg-card, #1b1535) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v11.13.15 — MODAL STANDARDİZASYON (merkezî, geri-dönülebilir)
   Tüm modallar (.wf-modal/.sp-modal) aynı başlık + form-alan dili:
   sade, göz alıcı, glass katmanıyla uyumlu. Mobil ile akış paritesi
   features/* form ekranlarında ayrıca sağlanır.
   ════════════════════════════════════════════════════════════════════ */
.wf-modal-header, .sp-modal-header, .sp-wizard-header {
  padding: 22px 26px 18px !important;
  border-bottom: 1px solid var(--wf-glass-border, rgba(255,255,255,.12)) !important;
}
.wf-modal-header h3, .sp-modal-header h3, .sp-wizard-header h2,
.sp-modal-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--wf-text-primary) !important;
}
.wf-modal-header p, .sp-modal-header p, .sp-wizard-header p,
.sp-modal-subtitle {
  font-size: 12.5px !important;
  color: var(--wf-text-secondary) !important;
  margin-top: 3px !important;
}
/* Kapat butonu: tek tip yuvarlak, hover'da belirgin */
.wf-modal-close, .sp-modal-close {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: var(--wf-surface-1, rgba(255,255,255,.05)) !important;
  border: 1px solid var(--wf-glass-border, rgba(255,255,255,.12)) !important;
  color: var(--wf-text-secondary) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .15s ease !important;
}
.wf-modal-close:hover, .sp-modal-close:hover {
  background: var(--wf-primary-subtle, rgba(255,185,35,.12)) !important;
  color: var(--wf-primary, #FFB923) !important;
  transform: rotate(90deg);
}
.wf-modal-body, .sp-modal-body { padding: 20px 26px 24px !important; }
/* Form alanları: tek tip, rahat dokunma hedefi, glass-uyumlu yuvarlak */
.sp-modal input.sp-input, .sp-modal textarea.sp-input, .sp-modal select.sp-input,
.wf-modal input.sp-input, .wf-modal textarea.sp-input, .wf-modal select.sp-input,
.sp-input, .wf-input {
  border-radius: 13px !important;
  min-height: 46px;
  padding: 11px 14px !important;
  font-size: 14px !important;
  border: 1.5px solid var(--wf-glass-border, rgba(255,255,255,.14)) !important;
  background: var(--wf-bg-input, rgba(255,255,255,.04)) !important;
}
textarea.sp-input, .sp-modal textarea.sp-input { min-height: 90px; }
.sp-input::placeholder, .wf-input::placeholder { color: var(--wf-text-muted, #8a85a3); }
.sp-input:focus, .wf-input:focus {
  border-color: var(--wf-primary, #FFB923) !important;
  box-shadow: 0 0 0 3px var(--wf-primary-subtle, rgba(255,185,35,.16)) !important;
}
.sp-form-label, .sp-label, .wf-label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  margin-bottom: 7px !important;
  color: var(--wf-text-secondary) !important;
}
.sp-form-group { margin-bottom: 18px !important; }

/* ════════════════════════════════════════════════════════════════════
   v11.13.16 — ALTIN BUTON METNİ KOYU (kullanıcı: sarı arkaplanlı
   butonlarda yazı siyah olmalı). TÜM gold-zeminli buton/link + İÇ
   öğeleri (span/i/svg) koyu metin — kaynak ne olursa olsun garanti.
   ════════════════════════════════════════════════════════════════════ */
.wf-btn-gold, .wf-btn-gold *,
.sp-btn-gold, .sp-btn-gold *,
.wf-btn-gold-solid, .wf-btn-gold-solid *,
.biz-banner-actions .wf-btn-gold-solid, .biz-banner-actions .wf-btn-gold-solid *,
.wf-cta-btn.gold, .wf-cta-btn.gold *,
a.wf-btn-gold:visited, a.wf-btn-gold:hover,
[class*="btn-gold"], [class*="btn-gold"] *,
[style*="--wf-gold"], [style*="background:var(--wf-gold)"], [style*="background: var(--wf-gold)"],
[style*="background:var(--wf-gold)"] *, [style*="background: var(--wf-gold)"] *,
.wf-btn-primary.is-gold, .wf-btn-primary.is-gold * {
    color: #16122e !important;          /* koyu (siyaha yakın mor-lacivert) */
    -webkit-text-fill-color: #16122e !important;
}
/* Gold buton ikonları da koyu */
.wf-btn-gold i, .sp-btn-gold i, [class*="btn-gold"] i,
[style*="background:var(--wf-gold)"] i, [style*="background: var(--wf-gold)"] i {
    color: #16122e !important;
}

/* ============================================================
   ONAYLI TASARIM SİSTEMİ (17 May 2026) — kullanıcı seçimi:
   LG-09 cam + 1px refraksiyon rim · BTN-03 · KGRUP-16 şerit.
   Tek kaynak: .wf-card/.wf-stat-card/.wf-btn-gold/.wf-stats-grid
   tüm panellerde kullanıldığı için buradan tüm web'e yansır
   (PHP'ye dokunulmadı). Mobil/iOS aynı dil ayrıca uygulanır.
   ============================================================ */
.wf-card, .wf-stat-card, .biz-stat, .wf-oh-stat {
    position: relative;
    /* MOBİL SADE KART (23 May, kullanıcı: "beyaz ışımayı kaldır, mobil gibi yap").
       Eski renkli gradient rim + beyaz inset parıltı KALDIRILDI. Mobil Card.tsx:
       solid bgCard + düz 1px rgba(255,255,255,0.08) kenar + hafif KOYU gölge. */
    background: var(--wf-bg-card, #1b1635) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    overflow: hidden;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important;
}
/* eski renkli accent + ESKİ ::before mask-rim tamamen kapat */
.biz-stat::after, .wf-oh-stat::after,
.biz-stat::before, .wf-oh-stat::before,
.wf-card::before, .wf-stat-card::before { display:none !important; }
/* yumuşak üst beyaz ışık KAPATILDI (23 May, kullanıcı: beyaz gradyan/halo yok). */
.wf-card::after, .wf-stat-card::after {
    content: none !important; display: none !important;
}
/* aynı sayfada rim renk-sırası değişsin — sadece --rim değişkeni */
.wf-stats-grid > .wf-stat-card:nth-child(4n+2),
.biz-stats-grid > .biz-stat:nth-child(4n+2),
.wf-oh-stats > .wf-oh-stat:nth-child(4n+2) {
    --rim: linear-gradient(135deg, rgba(255,185,35,.65),
        rgba(155,124,255,.85) 45%, rgba(120,220,255,.55)); }
.wf-stats-grid > .wf-stat-card:nth-child(4n+3),
.biz-stats-grid > .biz-stat:nth-child(4n+3),
.wf-oh-stats > .wf-oh-stat:nth-child(4n+3) {
    --rim: linear-gradient(135deg, rgba(120,220,255,.6),
        rgba(255,185,35,.55) 45%, rgba(155,124,255,.85)); }
.wf-stats-grid > .wf-stat-card:nth-child(4n),
.biz-stats-grid > .biz-stat:nth-child(4n),
.wf-oh-stats > .wf-oh-stat:nth-child(4n) {
    --rim: linear-gradient(300deg, rgba(155,124,255,.8),
        rgba(255,185,35,.5) 50%, rgba(120,220,255,.55)); }
/* içerik rim/ışık üstünde kalsın */
.wf-card > *, .wf-stat-card > *,
.biz-stat > *, .wf-oh-stat > * { position:relative; z-index:2; }
.wf-card:hover, .wf-stat-card:hover,
.biz-stat:hover, .wf-oh-stat:hover { transform:translateY(-2px); }
/* KGRUP-16 — KPI ızgarası akış şeridi (3 panel sistemi) */
.wf-stats-grid, .biz-stats-grid, .wf-oh-stats {
    /* Koyu taban + ÇOK hafif gradyan — örnekteki gibi zarif ince
       çerçeve (parlak yıkama YOK; şerit koyu kalır). */
    background:linear-gradient(95deg, rgba(123,92,255,.10),
        rgba(255,185,35,.06)), #100C22 !important;
    border:1px solid rgba(255,255,255,.06) !important;
    border-radius:18px !important; padding:12px !important;
    gap:12px !important;
}
/* Hero/öne çıkan kart: rim hafif shimmer (opsiyonel, .wf-feat) */
.wf-feat::before { background-size:220% 220%;
    animation:wfRim 9s ease-in-out infinite; }
@keyframes wfRim { 0%,100%{background-position:0 50%}
    50%{background-position:100% 50%} }
@media (prefers-reduced-motion:reduce){ .wf-feat::before{animation:none} }
/* BTN-03 — altın degrade, az parlak, hafif köşeli.
   Özgüllük: .wf-btn.wf-btn-gold (0,2,0) > grup kuralındaki
   button.wf-btn (0,1,1) → radius 10 kesin uygulanır. */
.wf-btn.wf-btn-gold, button.wf-btn-gold, a.wf-btn-gold,
.wf-btn-gold {
    background:linear-gradient(180deg,#FFD06A,#FFB923) !important;
    color:#241a02 !important;
    border-radius:10px !important;
    box-shadow:0 10px 22px -12px rgba(255,185,35,.5),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.wf-btn.wf-btn-gold:hover, button.wf-btn-gold:hover,
a.wf-btn-gold:hover, .wf-btn-gold:hover {
    transform:translateY(-1px);
    box-shadow:0 14px 26px -12px rgba(255,185,35,.55),
        inset 0 1px 0 rgba(255,255,255,.4) !important;
}