/* ==========================================================================
 * Etkileşimler — canvas + modül öğeleri (data-pb-el) + modül kutusu
 * ========================================================================== */

:root {
    --pb-int-ease: cubic-bezier(0.21, 0.95, 0.27, 1);
}

/* Geçiş tabanı */
.pb-has-interactions[data-int-hover],
.pb-has-interactions[data-int-click],
[data-pb-el].pb-el[data-int-hover],
[data-pb-el].pb-el[data-int-click],
section.module.pb-has-interactions[data-int-hover],
section.module.pb-has-interactions[data-int-click] {
    transition-property: opacity, transform !important;
    transition-duration: calc(var(--pb-int-ms, 300) * 1ms) !important;
    transition-timing-function: var(--pb-int-ease) !important;
    transform-origin: center center;
}

.pb-canvas-el[style*="--pb-el-rotation"] {
    transform: rotate(var(--pb-el-rotation, 0deg));
}

/* Canvas — içerik katmanı (builder hit overlay hariç) */
.pb-canvas-el[data-int-hover] > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
.pb-canvas-el[data-int-click] > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions) {
    transition-property: opacity, transform !important;
    transition-duration: calc(var(--pb-int-ms, 300) * 1ms) !important;
    transition-timing-function: var(--pb-int-ease) !important;
    transform-origin: center center;
}

[data-int-duration] { --pb-int-ms: 300; }
[data-int-duration="150"] { --pb-int-ms: 150; }
[data-int-duration="200"] { --pb-int-ms: 200; }
[data-int-duration="300"] { --pb-int-ms: 300; }
[data-int-duration="500"] { --pb-int-ms: 500; }
[data-int-duration="700"] { --pb-int-ms: 700; }
[data-int-duration="1000"] { --pb-int-ms: 1000; }

[data-pb-el][data-int-hover="fade-in"] { opacity: 0.88; }

/* --- Hover --- */
.pb-canvas-el[data-int-hover="fade-in"]:hover > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-hover="fade-in"]:hover,
section.module[data-int-hover="fade-in"]:hover { opacity: 1; }

.pb-canvas-el[data-int-hover="fade-out"]:hover > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-hover="fade-out"]:hover,
section.module[data-int-hover="fade-out"]:hover { opacity: 0.55; }

.pb-canvas-el[data-int-hover="slide-up"]:hover > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-hover="slide-up"]:hover,
section.module[data-int-hover="slide-up"]:hover { transform: translateY(-8px); }

.pb-canvas-el[data-int-hover="slide-down"]:hover > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-hover="slide-down"]:hover,
section.module[data-int-hover="slide-down"]:hover { transform: translateY(8px); }

.pb-canvas-el[data-int-hover="slide-left"]:hover > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-hover="slide-left"]:hover,
section.module[data-int-hover="slide-left"]:hover { transform: translateX(-8px); }

.pb-canvas-el[data-int-hover="slide-right"]:hover > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-hover="slide-right"]:hover,
section.module[data-int-hover="slide-right"]:hover { transform: translateX(8px); }

.pb-canvas-el[data-int-hover="scale-up"]:hover > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-hover="scale-up"]:hover,
section.module[data-int-hover="scale-up"]:hover { transform: scale(1.06); }

.pb-canvas-el[data-int-hover="scale-down"]:hover > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-hover="scale-down"]:hover,
section.module[data-int-hover="scale-down"]:hover { transform: scale(0.94); }

.pb-canvas-el[data-int-hover="rotate"]:hover > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-hover="rotate"]:hover,
section.module[data-int-hover="rotate"]:hover { transform: rotate(4deg); }

/* --- Click --- */
.pb-canvas-el[data-int-click="fade-in"]:active > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-click="fade-in"]:active,
section.module[data-int-click="fade-in"]:active { opacity: 1; }

.pb-canvas-el[data-int-click="fade-out"]:active > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-click="fade-out"]:active,
section.module[data-int-click="fade-out"]:active { opacity: 0.45; }

.pb-canvas-el[data-int-click="slide-up"]:active > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-click="slide-up"]:active,
section.module[data-int-click="slide-up"]:active { transform: translateY(-4px); }

.pb-canvas-el[data-int-click="slide-down"]:active > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-click="slide-down"]:active,
section.module[data-int-click="slide-down"]:active { transform: translateY(4px); }

.pb-canvas-el[data-int-click="slide-left"]:active > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-click="slide-left"]:active,
section.module[data-int-click="slide-left"]:active { transform: translateX(-4px); }

.pb-canvas-el[data-int-click="slide-right"]:active > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-click="slide-right"]:active,
section.module[data-int-click="slide-right"]:active { transform: translateX(4px); }

.pb-canvas-el[data-int-click="scale-up"]:active > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-click="scale-up"]:active,
section.module[data-int-click="scale-up"]:active { transform: scale(1.03); }

.pb-canvas-el[data-int-click="scale-down"]:active > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-click="scale-down"]:active,
section.module[data-int-click="scale-down"]:active { transform: scale(0.97); }

.pb-canvas-el[data-int-click="rotate"]:active > :not(.pb-canvas-el-hit):not(.pb-canvas-el-type-badge):not(.pb-canvas-el-actions),
[data-pb-el][data-int-click="rotate"]:active,
section.module[data-int-click="rotate"]:active { transform: rotate(6deg); }

/* --- Scroll into view --- */
[data-animation]:not(.is-in-view):not(.pb-int-visible) {
    opacity: 0;
    transition-property: opacity, transform !important;
    transition-duration: var(--pb-int-duration, 600ms) !important;
    transition-timing-function: var(--pb-int-ease) !important;
    transition-delay: var(--pb-int-delay, 0ms) !important;
    will-change: opacity, transform;
}

[data-animation="fade-up"]:not(.is-in-view):not(.pb-int-visible)    { transform: translate3d(0, 28px, 0) rotate(var(--pb-el-rotation, 0deg)); }
[data-animation="fade-down"]:not(.is-in-view):not(.pb-int-visible)  { transform: translate3d(0, -28px, 0) rotate(var(--pb-el-rotation, 0deg)); }
[data-animation="fade-left"]:not(.is-in-view):not(.pb-int-visible)  { transform: translate3d(-32px, 0, 0) rotate(var(--pb-el-rotation, 0deg)); }
[data-animation="fade-right"]:not(.is-in-view):not(.pb-int-visible) { transform: translate3d(32px, 0, 0) rotate(var(--pb-el-rotation, 0deg)); }
[data-animation="fade-in"]:not(.is-in-view):not(.pb-int-visible)    { opacity: 0; transform: rotate(var(--pb-el-rotation, 0deg)); }
[data-animation="fade-out"]:not(.is-in-view):not(.pb-int-visible)   { opacity: 0.35; transform: rotate(var(--pb-el-rotation, 0deg)); }
[data-animation="scale-up"]:not(.is-in-view):not(.pb-int-visible)   { transform: scale(0.88) rotate(var(--pb-el-rotation, 0deg)); }
[data-animation="scale-down"]:not(.is-in-view):not(.pb-int-visible) { transform: scale(1.12) rotate(var(--pb-el-rotation, 0deg)); }
[data-animation="rotate"]:not(.is-in-view):not(.pb-int-visible)     { transform: rotate(-8deg) scale(0.94); }

[data-animation].is-in-view,
[data-animation].pb-int-visible {
    opacity: 1 !important;
    transform: rotate(var(--pb-el-rotation, 0deg)) translate3d(0, 0, 0) scale(1) !important;
}

/* ==========================================================================
 * Etkileşimler paneli — açık tema (Element Studio, Tasarım paneli)
 * ========================================================================== */
.es-body .pi-inspector,
.di-panel .pi-inspector,
#insp-design-panel .pi-inspector {
    --pi-text: #0f172a;
    --pi-muted: #475569;
    --pi-border: #e2e8f0;
    --pi-surface: #ffffff;
    --pi-surface-2: #f8fafc;
    --pi-accent: #2563eb;
    --pi-accent-soft: #eff6ff;
    color: var(--pi-text);
}

.es-body .pi-inspector .pb-field-hint,
.di-panel .pi-inspector .pb-field-hint,
#insp-design-panel .pi-inspector .pb-field-hint {
    color: var(--pi-muted) !important;
    font-size: 11px;
    line-height: 1.5;
    margin: 0 0 12px;
}

.es-body .pi-inspector .pi-block,
.di-panel .pi-inspector .pi-block,
#insp-design-panel .pi-inspector .pi-block {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pi-border);
}

.es-body .pi-inspector .pi-block-head,
.di-panel .pi-inspector .pi-block-head,
#insp-design-panel .pi-inspector .pi-block-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.es-body .pi-inspector .pi-block-head strong,
.di-panel .pi-inspector .pi-block-head strong,
#insp-design-panel .pi-inspector .pi-block-head strong {
    color: var(--pi-text);
    font-size: 12px;
    font-weight: 600;
}

.es-body .pi-inspector .pi-block-head .pb-check,
.di-panel .pi-inspector .pi-block-head .pb-check,
#insp-design-panel .pi-inspector .pi-block-head .pb-check {
    color: var(--pi-text);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.es-body .pi-inspector label:not(.pb-check),
.di-panel .pi-inspector label:not(.pb-check),
#insp-design-panel .pi-inspector label:not(.pb-check) {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pi-muted);
    margin: 8px 0 5px;
}

.es-body .pi-inspector .pb-input,
.di-panel .pi-inspector .pb-input,
#insp-design-panel .pi-inspector .pb-input {
    background: var(--pi-surface);
    border: 1px solid var(--pi-border);
    color: var(--pi-text);
    padding: 8px 10px;
    border-radius: 8px;
}

.es-body .pi-inspector .pi-block-body--off,
.di-panel .pi-inspector .pi-block-body--off,
#insp-design-panel .pi-inspector .pi-block-body--off {
    opacity: 0.5;
    pointer-events: none;
}

.es-body .pi-inspector .pi-preview-hint,
.di-panel .pi-inspector .pi-preview-hint,
#insp-design-panel .pi-inspector .pi-preview-hint {
    margin-top: 12px;
    padding: 10px;
    background: var(--pi-surface-2);
    border: 1px solid var(--pi-border);
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--pi-muted);
    word-break: break-all;
}

.es-body .pi-inspector .pi-preview-hint code,
.di-panel .pi-inspector .pi-preview-hint code,
#insp-design-panel .pi-inspector .pi-preview-hint code {
    font-size: 10px;
    color: #334155;
    background: #e2e8f0;
    padding: 1px 4px;
    border-radius: 4px;
}

.es-body .di-module-interactions-wrap > label,
.di-panel .di-module-interactions-wrap > label {
    color: var(--pb-muted) !important;
}

/* Koyu tema — canvas bileşen inspector */
.ce-inspector .pi-inspector,
.pb-inspector--canvas .pi-inspector {
    --pi-text: #fafafa;
    --pi-muted: #a1a1aa;
    --pi-border: rgba(255, 255, 255, 0.1);
    --pi-surface: #18181b;
    --pi-surface-2: #27272a;
    --pi-accent: #d4a24c;
    --pi-accent-soft: rgba(212, 162, 76, 0.15);
    color: var(--pi-text);
}

.ce-inspector .pi-inspector .pb-field-hint,
.pb-inspector--canvas .pi-inspector .pb-field-hint {
    color: var(--pi-muted) !important;
}

.ce-inspector .pi-inspector .pi-block,
.pb-inspector--canvas .pi-inspector .pi-block {
    border-bottom-color: var(--pi-border);
}

.ce-inspector .pi-inspector .pi-block-head strong,
.ce-inspector .pi-inspector .pi-block-head .pb-check,
.pb-inspector--canvas .pi-inspector .pi-block-head strong,
.pb-inspector--canvas .pi-inspector .pi-block-head .pb-check {
    color: var(--pi-text);
}

.ce-inspector .pi-inspector label:not(.pb-check),
.pb-inspector--canvas .pi-inspector label:not(.pb-check) {
    color: var(--pi-muted);
}

.ce-inspector .pi-inspector .pb-input,
.pb-inspector--canvas .pi-inspector .pb-input {
    background: var(--pi-surface);
    border-color: var(--pi-border);
    color: var(--pi-text);
}

.ce-inspector .pi-inspector .pi-preview-hint,
.pb-inspector--canvas .pi-inspector .pi-preview-hint {
    background: var(--pi-surface-2);
    border: 1px solid var(--pi-border);
    color: var(--pi-muted);
}

.ce-inspector .pi-inspector .pi-preview-hint code,
.pb-inspector--canvas .pi-inspector .pi-preview-hint code {
    color: #e4e4e7;
    background: rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .pb-canvas-el[data-int-hover] > *,
    .pb-canvas-el[data-int-click] > *,
    [data-pb-el][data-int-hover],
    [data-pb-el][data-int-click],
    section.module[data-int-hover],
    section.module[data-int-click],
    [data-animation] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}