/* ============================================================================
   MANDIRACIDEDE — Widget v3 Skin
   ----------------------------------------------------------------------------
   Floating action butonları (FAB), chat widget, PWA banner, back-to-top
   tüm sayfalarda v3 paletine (krem + toprak yeşili + bal) uyumlu görünür.

   Bu dosya layout/default.php'den koşulsuz yüklenir (her sayfada aktif).
   Token tanımları home-v3.css'te body.home-v3 scope'unda — burada da bağımsız
   olarak kullanılabilmesi için CSS değişkenleri :root içinde de tanımlanır.
   ============================================================================ */

:root {
    --wv3-cream:      #FAF6EE;
    --wv3-cream-2:    #F2EBDC;
    --wv3-milk:       #FFFEFA;
    --wv3-earth:      #3D5A3D;
    --wv3-earth-2:    #2C4530;
    --wv3-earth-soft: #8DA982;
    --wv3-honey:      #D4A845;
    --wv3-honey-2:    #B88A2E;
    --wv3-butter:     #F0D78F;
    --wv3-terra:      #C66B3D;
    --wv3-ink:        #1F1A14;
    --wv3-ink-soft:   #4A4239;
    --wv3-line:       rgba(31,26,20,.10);

    --wv3-shadow-md: 0 8px 32px rgba(31,26,20,.10);
    --wv3-shadow-lg: 0 24px 64px rgba(31,26,20,.15);

    --wv3-serif: 'Fraunces', 'Playfair Display', Georgia, serif;
    --wv3-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─────────────── BACK-TO-TOP (.m-btt) ─────────────── */
.m-btt {
    background: linear-gradient(135deg, var(--wv3-honey), var(--wv3-terra)) !important;
    color: var(--wv3-milk) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: var(--wv3-shadow-md), 0 0 0 4px rgba(212,168,69,.15) !important;
    transition: all .25s ease !important;
}
.m-btt:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: var(--wv3-shadow-lg), 0 0 0 6px rgba(212,168,69,.20) !important;
}
.m-btt svg, .m-btt path {
    color: var(--wv3-milk) !important;
    stroke: var(--wv3-milk) !important;
    fill: var(--wv3-milk) !important;
}

/* ─────────────── ACCESSIBILITY FAB (.a11y-fab) ─────────────── */
.a11y-fab {
    background: linear-gradient(135deg, var(--wv3-honey), var(--wv3-terra)) !important;
    color: var(--wv3-milk) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: var(--wv3-shadow-md), 0 0 0 4px rgba(212,168,69,.15) !important;
    transition: all .25s ease !important;
}
.a11y-fab:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: var(--wv3-shadow-lg), 0 0 0 6px rgba(212,168,69,.20) !important;
}
.a11y-fab svg, .a11y-fab path, .a11y-fab use {
    color: var(--wv3-milk) !important;
    stroke: var(--wv3-milk) !important;
    fill: var(--wv3-milk) !important;
}

/* ─────────────── CHAT FAB (.m-chat-fab) ─────────────── */
.m-chat-fab {
    background: linear-gradient(135deg, var(--wv3-honey), var(--wv3-terra)) !important;
    color: var(--wv3-milk) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: var(--wv3-shadow-md), 0 0 0 4px rgba(212,168,69,.15) !important;
    transition: all .25s ease !important;
}
.m-chat-fab:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: var(--wv3-shadow-lg), 0 0 0 6px rgba(212,168,69,.20) !important;
}
.m-chat-fab svg, .m-chat-fab path {
    color: var(--wv3-milk) !important;
    stroke: var(--wv3-milk) !important;
    fill: var(--wv3-milk) !important;
}
/* AI badge — Mandıracı amber pill rozet (FAB'in sağ üst köşesinde, FAB ikonunu kapatmaz) */
.m-chat-fab-ai-badge {
    top: -6px !important;
    right: -6px !important;
    inset-inline-end: -6px !important;
    inset-inline-start: auto !important;
    left: auto !important;
    transform: none !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    background: #ffffff !important;
    color: #b45309 !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35) !important;
    font-family: var(--wv3-sans) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}
/* Pulse halo — bal sarısı */
.m-chat-fab-pulse {
    background: var(--wv3-honey) !important;
    opacity: .35 !important;
}
/* Tooltip */
.m-chat-tooltip {
    background: var(--wv3-ink) !important;
    color: var(--wv3-milk) !important;
    font-family: var(--wv3-sans) !important;
    border-radius: 8px !important;
    box-shadow: var(--wv3-shadow-md) !important;
}

/* ─────────────── CHAT PANEL (.m-chat-panel-inner) ─────────────── */
.m-chat-panel-inner {
    background: var(--wv3-cream) !important;
    color: var(--wv3-ink) !important;
    font-family: var(--wv3-sans) !important;
    border: 1px solid var(--wv3-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--wv3-shadow-lg) !important;
    overflow: hidden;
}

/* Chat header — toprak yeşili gradient */
.m-chat-header {
    background: linear-gradient(135deg, var(--wv3-earth), var(--wv3-earth-2)) !important;
    color: var(--wv3-milk) !important;
    border-bottom: 0 !important;
    padding: 16px 18px !important;
}
.m-chat-header *,
.m-chat-header-text,
.m-chat-header-kicker {
    color: var(--wv3-milk) !important;
}
.m-chat-bot-name {
    font-family: var(--wv3-serif) !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    color: var(--wv3-milk) !important;
}
.m-chat-header-kicker {
    color: rgba(255,254,250,.75) !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.m-chat-header-avatar {
    background: linear-gradient(135deg, var(--wv3-honey), var(--wv3-butter)) !important;
    color: var(--wv3-ink) !important;
    border: 2px solid rgba(255,254,250,.25) !important;
    font-weight: 700 !important;
}

/* Close + clear butonları (header sağında) */
.m-chat-close, .m-chat-clear {
    background: rgba(255,254,250,.12) !important;
    color: var(--wv3-milk) !important;
    border: 1px solid rgba(255,254,250,.18) !important;
    border-radius: 999px !important;
    transition: background .2s ease !important;
}
.m-chat-close:hover, .m-chat-clear:hover {
    background: rgba(255,254,250,.22) !important;
}
.m-chat-close svg, .m-chat-clear svg {
    color: var(--wv3-milk) !important;
    stroke: var(--wv3-milk) !important;
    fill: var(--wv3-milk) !important;
}

/* Status (Online/Offline) */
.m-chat-status {
    color: rgba(255,254,250,.85) !important;
    font-weight: 500 !important;
}
.m-chat-status-dot {
    background: var(--wv3-butter) !important;
    box-shadow: 0 0 0 3px rgba(240,215,143,.30) !important;
}

/* Mesajlar alanı — krem zemin */
.m-chat-messages {
    background: var(--wv3-cream) !important;
    color: var(--wv3-ink) !important;
}

/* Mesaj balonları */
.m-chat-msg-bot,
.m-chat-msg--bot,
[class*="msg-bot"],
[class*="msg--bot"] {
    background: var(--wv3-milk) !important;
    color: var(--wv3-ink) !important;
    border: 1px solid var(--wv3-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(31,26,20,.04) !important;
}
.m-chat-msg-user,
.m-chat-msg--user,
[class*="msg-user"],
[class*="msg--user"] {
    background: var(--wv3-earth) !important;
    color: var(--wv3-milk) !important;
    border-radius: 16px !important;
}

/* Quick replies */
.m-chat-quick-replies button,
.m-chat-quick-replies a,
.m-chat-quick-replies .m-chat-quick {
    background: var(--wv3-milk) !important;
    color: var(--wv3-earth) !important;
    border: 1px solid rgba(61,90,61,.20) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-family: var(--wv3-sans) !important;
    transition: all .2s ease !important;
}
.m-chat-quick-replies button:hover,
.m-chat-quick-replies a:hover {
    background: var(--wv3-earth) !important;
    color: var(--wv3-milk) !important;
}

/* Composer (input + send) */
.m-chat-composer {
    background: var(--wv3-milk) !important;
    border-top: 1px solid var(--wv3-line) !important;
    padding: 12px !important;
}
.m-chat-input {
    background: var(--wv3-cream-2) !important;
    color: var(--wv3-ink) !important;
    border: 1px solid var(--wv3-line) !important;
    border-radius: 999px !important;
    font-family: var(--wv3-sans) !important;
}
.m-chat-input::placeholder { color: var(--wv3-ink-soft) !important; opacity: .55 !important; }
.m-chat-input:focus {
    border-color: var(--wv3-earth) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(61,90,61,.10) !important;
}
.m-chat-send {
    background: var(--wv3-earth) !important;
    color: var(--wv3-milk) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(61,90,61,.25) !important;
    transition: all .2s ease !important;
}
.m-chat-send:hover {
    background: var(--wv3-earth-2) !important;
    transform: translateY(-1px) !important;
}
.m-chat-send svg, .m-chat-send path {
    color: var(--wv3-milk) !important;
    stroke: var(--wv3-milk) !important;
    fill: var(--wv3-milk) !important;
}

.m-chat-error {
    background: rgba(198,107,61,.10) !important;
    color: var(--wv3-terra) !important;
    border: 1px solid rgba(198,107,61,.25) !important;
    border-radius: 12px !important;
}

/* Overlay tamamen şeffaf — sayfayı kaplamasın ama boyutu bozulmasın */
.m-chat-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Tıklamalar arka sayfaya geçsin (panel hariç) — kullanıcı sayfayı kullanmaya devam edebilsin */
    pointer-events: none !important;
}
/* Panel kendisi tıklanabilir kalmalı */
.m-chat-overlay > *,
.m-chat-panel,
.m-chat-panel-inner {
    pointer-events: auto !important;
}

/* Panel'i bottom-right'a kilitle (FAB konumunda açılır) */
.m-chat-panel,
.m-chat-overlay .m-chat-panel-inner {
    position: fixed !important;
    bottom: calc(var(--sp-5, 20px) + env(safe-area-inset-bottom, 0px)) !important;
    right: var(--sp-5, 20px) !important;
    top: auto !important;
    left: auto !important;
    width: min(380px, calc(100vw - 32px)) !important;
    max-height: min(640px, calc(100vh - 120px)) !important;
    margin: 0 !important;
}

/* Chat açıkken FAB'ın kendisini gizle (zaten panel açık, FAB'a gerek yok) */
.m-chat-fab.is-open {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility 0s linear .2s !important;
}

/* Chat açıkken back-to-top butonunu da gizle (panel'i kapatmasın) */
body:has(.m-chat-fab.is-open) .m-btt,
body:has(.m-chat-fab.is-open) .m-btt.is-visible {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility 0s linear .2s !important;
}

/* Chat kapanınca her ikisi de eski haline döner (varsayılan transition) */

/* ─────────────── A11Y MODAL (.a11y-modal) ─────────────── */
.a11y-modal {
    background: rgba(31,26,20,.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
.a11y-modal-panel {
    background: var(--wv3-cream) !important;
    color: var(--wv3-ink) !important;
    font-family: var(--wv3-sans) !important;
    border: 1px solid var(--wv3-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--wv3-shadow-lg) !important;
    overflow: hidden;
}

/* Header — toprak yeşili gradient */
.a11y-modal-header {
    background: linear-gradient(135deg, var(--wv3-earth), var(--wv3-earth-2)) !important;
    color: var(--wv3-milk) !important;
    border-bottom: 0 !important;
    padding: 18px 22px !important;
}
.a11y-modal-title {
    font-family: var(--wv3-serif) !important;
    color: var(--wv3-milk) !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    font-size: 18px !important;
}
.a11y-modal-header * {
    color: var(--wv3-milk) !important;
}
.a11y-modal-close {
    background: rgba(255,254,250,.14) !important;
    color: var(--wv3-milk) !important;
    border: 1px solid rgba(255,254,250,.20) !important;
    border-radius: 999px !important;
    transition: background .2s ease !important;
}
.a11y-modal-close:hover {
    background: rgba(255,254,250,.24) !important;
}
.a11y-modal-close svg,
.a11y-modal-close path {
    color: var(--wv3-milk) !important;
    stroke: var(--wv3-milk) !important;
    fill: var(--wv3-milk) !important;
}

/* Body */
.a11y-modal-body {
    background: var(--wv3-cream) !important;
    color: var(--wv3-ink) !important;
}

/* Section başlıkları */
.a11y-section {
    border-bottom: 1px solid var(--wv3-line) !important;
}
.a11y-section:last-child { border-bottom: 0 !important; }
.a11y-section-title {
    font-family: var(--wv3-serif) !important;
    color: var(--wv3-ink) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: -.005em !important;
}

/* Setting satırları */
.a11y-setting {
    color: var(--wv3-ink) !important;
}
.a11y-label {
    color: var(--wv3-ink) !important;
    font-weight: 500 !important;
}

/* Segmented control (örn. font size küçük/orta/büyük) */
.a11y-segmented {
    background: var(--wv3-cream-2) !important;
    border: 1px solid var(--wv3-line) !important;
    border-radius: 999px !important;
    padding: 3px !important;
}
.a11y-seg-btn {
    background: transparent !important;
    color: var(--wv3-ink-soft) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--wv3-sans) !important;
    font-weight: 600 !important;
    transition: all .2s ease !important;
}
.a11y-seg-btn:hover {
    color: var(--wv3-ink) !important;
}
.a11y-seg-btn.is-active,
.a11y-seg-btn[aria-pressed="true"],
.a11y-seg-btn[data-active="1"] {
    background: var(--wv3-earth) !important;
    color: var(--wv3-milk) !important;
    box-shadow: 0 2px 8px rgba(61,90,61,.20) !important;
}

/* Toggle switch */
.a11y-toggle {
    background: var(--wv3-cream-2) !important;
    border: 1px solid var(--wv3-line) !important;
    transition: background .25s ease !important;
}
.a11y-toggle-thumb {
    background: var(--wv3-milk) !important;
    box-shadow: 0 2px 6px rgba(31,26,20,.15) !important;
    transition: transform .25s ease !important;
}
.a11y-toggle.is-on,
.a11y-toggle[aria-pressed="true"],
.a11y-toggle[data-state="on"],
input[type="checkbox"]:checked + .a11y-toggle {
    background: var(--wv3-earth) !important;
    border-color: var(--wv3-earth) !important;
}

/* Reading mode kartı (büyük buton) */
.a11y-reading-mode-toggle,
.a11y-reading-mode-btn {
    background: var(--wv3-milk) !important;
    color: var(--wv3-ink) !important;
    border: 1px solid var(--wv3-line) !important;
    border-radius: 16px !important;
    transition: all .2s ease !important;
}
.a11y-reading-mode-toggle:hover,
.a11y-reading-mode-btn:hover {
    border-color: var(--wv3-earth) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--wv3-shadow-md) !important;
}
.a11y-reading-mode-toggle.is-active,
.a11y-reading-mode-toggle[aria-pressed="true"],
.a11y-reading-mode-btn.is-active {
    background: var(--wv3-earth) !important;
    color: var(--wv3-milk) !important;
    border-color: var(--wv3-earth) !important;
}
.a11y-reading-mode-icon {
    background: linear-gradient(135deg, var(--wv3-cream-2), var(--wv3-butter)) !important;
    border-radius: 12px !important;
    color: var(--wv3-earth) !important;
}
.a11y-reading-mode-toggle.is-active .a11y-reading-mode-icon {
    background: rgba(255,254,250,.18) !important;
    color: var(--wv3-milk) !important;
}
.a11y-reading-mode-title {
    font-family: var(--wv3-serif) !important;
    font-weight: 600 !important;
    color: inherit !important;
}
.a11y-reading-mode-desc {
    color: var(--wv3-ink-soft) !important;
}
.a11y-reading-mode-toggle.is-active .a11y-reading-mode-desc {
    color: rgba(255,254,250,.85) !important;
}

/* Footer */
.a11y-modal-footer {
    background: var(--wv3-milk) !important;
    border-top: 1px solid var(--wv3-line) !important;
}
.a11y-reset-btn {
    background: transparent !important;
    color: var(--wv3-terra) !important;
    border: 1px solid rgba(198,107,61,.30) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-family: var(--wv3-sans) !important;
    transition: all .2s ease !important;
}
.a11y-reset-btn:hover {
    background: rgba(198,107,61,.08) !important;
    border-color: var(--wv3-terra) !important;
}
/* Marka amber footer close (Mandıracı Dede teması — toprak yeşili yerine amber gradient) */
.a11y-footer-close-btn {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-family: var(--wv3-sans) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, .35) !important;
    transition: all .2s ease !important;
}
.a11y-footer-close-btn:hover {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, .45) !important;
}

/* ─────────────── PWA BANNER (.pwa-banner) ─────────────── */
.pwa-banner {
    background: var(--wv3-cream-2) !important;
    color: var(--wv3-ink) !important;
    border: 1px solid var(--wv3-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--wv3-shadow-lg) !important;
    font-family: var(--wv3-sans) !important;
}
.pwa-banner h3,
.pwa-banner [class*="title"] {
    font-family: var(--wv3-serif) !important;
    color: var(--wv3-ink) !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
}
.pwa-banner [class*="sub"],
.pwa-banner p {
    color: var(--wv3-ink-soft) !important;
}
.pwa-banner-cta {
    background: linear-gradient(135deg, var(--wv3-honey), var(--wv3-terra)) !important;
    color: var(--wv3-milk) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-family: var(--wv3-sans) !important;
    box-shadow: 0 4px 14px rgba(212,168,69,.30) !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.pwa-banner-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(198,107,61,.32) !important;
    filter: brightness(1.04);
}
.pwa-banner-dismiss {
    background: var(--wv3-cream-2) !important;
    color: var(--wv3-ink) !important;
    border: 0px solid var(--wv3-line) !important;
    border-radius: 50% !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
.pwa-banner-dismiss:hover {
    background: var(--wv3-ink) !important;
    color: var(--wv3-milk) !important;
    border-color: var(--wv3-ink) !important;
}