/* ============================================================
   FAZ R — UX Enhancements CSS (E4, E5, E7, E12)
   ============================================================ */

/* ===== E4: Inline Validation ===== */
.is-invalid {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
    background-color: #FEF2F2 !important;
}
.is-valid {
    border-color: #10B981 !important;
    background-color: #ECFDF5 !important;
}
.uxv-tip {
    display: flex; align-items: center; gap: 5px;
    margin-top: 4px;
    font-size: 11.5px; font-weight: 600;
    color: #DC2626;
    animation: uxvSlideDown .18s ease-out;
}
.uxv-tip i { font-size: 13px; }
@keyframes uxvSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== E5: Button Loading ===== */
.is-loading {
    pointer-events: none;
    opacity: .85;
    position: relative;
}
.uxb-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
    animation: uxbSpin .8s linear infinite;
}
@keyframes uxbSpin {
    to { transform: rotate(360deg); }
}

/* ===== E7: Scroll Reveal ===== */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(24px); }
[data-reveal="down"]  { transform: translateY(-24px); }
[data-reveal="left"]  { transform: translateX(28px); }
[data-reveal="right"] { transform: translateX(-28px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-revealed {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}
/* Stagger — kardeş elementler arasında 60ms gecikme */
.prod-grid > *:nth-child(2) [data-reveal], .prod-grid > *:nth-child(2)[data-reveal] { transition-delay: .06s; }
.prod-grid > *:nth-child(3) [data-reveal], .prod-grid > *:nth-child(3)[data-reveal] { transition-delay: .12s; }
.prod-grid > *:nth-child(4) [data-reveal], .prod-grid > *:nth-child(4)[data-reveal] { transition-delay: .18s; }
.prod-grid > *:nth-child(5) [data-reveal], .prod-grid > *:nth-child(5)[data-reveal] { transition-delay: .24s; }
.prod-grid > *:nth-child(6) [data-reveal], .prod-grid > *:nth-child(6)[data-reveal] { transition-delay: .30s; }

/* Reduced motion — animasyonsuz */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ===== E12: Skeleton Loader ===== */
.skel-wrap { display: grid; gap: 12px; }
.skel-card, .skel-row, .skel-line, .skel-img, .skel-avatar {
    background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);
    background-size: 200% 100%;
    animation: skelShimmer 1.4s linear infinite;
    border-radius: 8px;
}
.skel-card {
    height: 220px;
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid #E5E7EB;
    animation: none;
}
.skel-img {
    height: 140px;
    border-radius: 8px;
}
.skel-line {
    height: 12px;
    width: 100%;
}
.skel-line.short { width: 60%; }
.skel-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #E5E7EB;
    animation: none;
    border-radius: 10px;
}
.skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skel-flex { flex: 1; display: flex; flex-direction: column; gap: 6px; }
@keyframes skelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   FAZ S — Wow Factor (E6 Tilt+Magnetic, E16 Image Compare)
   ============================================================ */

/* E6 — Tilt cards (genel, opt-in via .uxw-tilt) */
.uxw-tilt { transform-style: preserve-3d; will-change: transform; }

/* E6 — Magnetic CTA glow ring */
.uxw-magnetic {
    position: relative;
    overflow: visible !important;
    will-change: transform;
}
.uxw-magnetic::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(239,68,68,.35), rgba(245,158,11,.25));
    z-index: -1;
    opacity: 0;
    filter: blur(12px);
    transition: opacity .25s;
}
.uxw-magnetic:hover::after { opacity: 1; }

/* E16 — Image comparison slider */
.uxw-compare {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    user-select: none;
    cursor: ew-resize;
    background: #F1F5F9;
    border: 1px solid #E5E7EB;
    box-shadow: 0 12px 32px -12px rgba(15,23,42,.15);
}
.uxw-compare .cmp-img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.uxw-compare .cmp-after-wrap {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 50%;
    overflow: hidden;
    will-change: width;
}
.uxw-compare .cmp-after-wrap .cmp-img {
    width: 100vw;
    max-width: none;
}
.uxw-compare.cmp-dragging .cmp-after-wrap { transition: none; }
.uxw-compare .cmp-after-wrap { transition: width .08s linear; }

.uxw-compare .cmp-label {
    position: absolute; top: 12px;
    padding: 5px 12px;
    background: rgba(15,23,42,.78);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px;
    border-radius: 99px;
    pointer-events: none;
}
.uxw-compare .cmp-label-before { left: 14px; }
.uxw-compare .cmp-label-after  { right: 14px; background: rgba(239,68,68,.92); }

.uxw-compare .cmp-handle {
    position: absolute; top: 0; bottom: 0;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    pointer-events: auto;
    z-index: 3;
    will-change: left;
}
.uxw-compare.cmp-dragging .cmp-handle { transition: none; }
.uxw-compare .cmp-handle { transition: left .08s linear; }

.uxw-compare .cmp-line {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.95);
    box-shadow: 0 0 0 1px rgba(15,23,42,.18);
}
.uxw-compare .cmp-knob {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 24px -4px rgba(15,23,42,.30), 0 0 0 2px rgba(239,68,68,.6);
    display: grid; place-items: center;
    color: #EF4444;
    font-size: 14px;
    cursor: ew-resize;
    transition: transform .12s;
}
.uxw-compare .cmp-knob i { font-size: 12px; }
.uxw-compare .cmp-handle:hover .cmp-knob,
.uxw-compare.cmp-dragging .cmp-knob { transform: translate(-50%, -50%) scale(1.08); }
.uxw-compare .cmp-handle:focus-visible .cmp-knob { outline: 3px solid rgba(239,68,68,.4); outline-offset: 4px; }

@media (max-width: 576px) {
    .uxw-compare .cmp-label { font-size: 10px; padding: 4px 9px; }
    .uxw-compare .cmp-knob { width: 38px; height: 38px; }
}

/* ============================================================
   FAZ T — Foundational (E8, E13, E14, E15)
   ============================================================ */

/* ===== E8 — LQIP / Blur placeholder + lazy fade-in ===== */
img[loading="lazy"] {
    transition: filter .4s ease, opacity .4s ease;
}
img[loading="lazy"]:not(.is-loaded):not([src]) {
    filter: blur(14px) saturate(80%);
    opacity: .6;
    transform: scale(1.04);
}
img.is-loaded {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
}
/* Görselin etrafına aspect-ratio reservation — kümbül stillemeden */
[data-aspect] {
    display: block;
    background: linear-gradient(135deg, #F8FAFC, #E2E8F0);
    overflow: hidden;
}
[data-aspect="1/1"]   { aspect-ratio: 1 / 1; }
[data-aspect="4/3"]   { aspect-ratio: 4 / 3; }
[data-aspect="16/9"]  { aspect-ratio: 16 / 9; }
[data-aspect="3/4"]   { aspect-ratio: 3 / 4; }
[data-aspect] img { width: 100%; height: 100%; object-fit: cover; }

/* ===== E13 — View Transition API ===== */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: vt-fade-out .22s ease-out forwards;
}
::view-transition-new(root) {
    animation: vt-fade-in .28s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes vt-fade-out {
    to { opacity: 0; transform: translateY(-6px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ===== E14 — Global print stylesheet ===== */
@media print {
    /* Renkleri olduğu gibi yazdır */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    /* Gizle: header, footer, nav, drawer, banner, sticky elementler */
    .ph-pre, .ph-top, .ph-shell, .foot, .mb-nav, .cookie-v2,
    .float-whatsapp, .float-support-label, .back-to-top,
    .offcanvas, .modal, .scroll-progress, .page-loader,
    .pdp-sticky-cta, .qq-modal, .qv-modal, .sm-modal,
    .marquee-track, .spotlight,
    .notif-bell-wrap, .ph-icon-btn, .ph-cta-btn,
    .breadcrumb-bar, .breadcrumb,
    button:not(.print-keep), .btn:not(.print-keep),
    .err-actions, .err-grid {
        display: none !important;
    }
    /* Body — beyaz zemin, full width */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }
    .container, .main-content, .page, section { padding: 0 !important; margin: 0 !important; }
    /* Linkler — URL'i göster */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }
    a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
    /* Sayfa kırılması */
    h1, h2, h3 { page-break-after: avoid; }
    img, table, blockquote { page-break-inside: avoid; }
    /* Marka renkleri zayıflat (toner tasarrufu) */
    .err-digit, .bento-cell, .ss-pill-trend, .marquee-item {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }
}

/* ===== E15 — A11y Focus Ring System ===== */
/* Mouse kullanıcısı için focus ring yok, klavye kullanıcısı için belirgin */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid rgba(239, 68, 68, .5) !important;
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12) !important;
    transition: outline-offset .12s ease;
}
/* Inputlar zaten kendi focus stilini override eder, fakat keyboard nav için yine de halka olsun */
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #EF4444 !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .15) !important;
}
/* Butonlar */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #EF4444 !important;
    outline-offset: 2px;
}
/* Skip link — klavye kullanıcısı için "İçeriğe atla" */
.skip-link {
    position: fixed;
    top: -100px; left: 16px;
    z-index: 99999;
    background: #0F172A;
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 10px 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }