/* ================================================================
   ⚡ EMLAK STÜDYOM - NEON & TYPOGRAPHY EFFECTS STYLES
   ================================================================ */

.neon-presets-grid,
.typo-presets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}

.neon-presets-grid .btn-action,
.typo-presets-grid .btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s ease;
}

.neon-presets-grid .btn-action.active,
.typo-presets-grid .btn-action.active {
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.35) !important;
}

.neon-presets-grid .btn-action.active i,
.typo-presets-grid .btn-action.active i {
    color: #ffffff !important;
}

#neonTextAnimBtn.active {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
}

#neonTextAnimBtn.active i {
    color: #ffffff !important;
}

/* Tipografi Efekt Sınıfları */
.canvas-el.typo-gold {
    color: #fffbeb !important;
    text-shadow: 0 0 12px rgba(251,191,36,0.95), 0 2px 5px rgba(180,83,9,0.9), 0 0 26px rgba(245,158,11,0.6) !important;
}

.canvas-el.typo-chrome {
    color: #f8fafc !important;
    text-shadow: 0 1px 0 #cbd5e1, 0 2px 0 #94a3b8, 0 3px 0 #64748b, 0 5px 12px rgba(0,0,0,0.85) !important;
}

.canvas-el.typo-sticker {
    color: #fef08a !important;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 5px 12px rgba(0,0,0,0.85) !important;
}

.canvas-el.typo-cyberpunk {
    color: #ff2a85 !important;
    text-shadow: 0 0 8px #ff2a85, 0 0 16px #ff2a85, 0 0 28px #00f0ff, 0 0 42px #00f0ff !important;
}

.canvas-el.typo-shadow3d {
    color: #ffffff !important;
    text-shadow: 1px 1px 0 #0f172a, 2px 2px 0 #0f172a, 3px 3px 0 #0f172a, 4px 4px 0 #0f172a, 5px 5px 0 #0f172a, 6px 6px 14px rgba(0,0,0,0.75) !important;
}

/* Neon Metin Elemanları - DOM Metninin ve Gölgesinin Tuvalde Ayrışmasını/Görünmesini Kesinlikle Engelle */
#canvas-container .canvas-el[data-saber-active="true"]:not(#elDetails):not([data-layer-uid="ui_details"]):not(.sh-box):not(.neon-box-active),
#canvas-container .neon-text-el:not(#elDetails):not([data-layer-uid="ui_details"]):not(.sh-box):not(.neon-box-active) {
    color: transparent !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 transparent !important;
}

/* 🌟 Neon Kutu & Şablon Çerçevesi Stilleri (elDetails & Kompozit Kutular) */
#canvas-container .neon-box-active,
#canvas-container #elDetails[data-neon-frame="true"],
#canvas-container .sh-box[data-neon-frame="true"] {
    border: var(--neon-box-border, 3px solid var(--neon-box-glow, #00f0ff)) !important;
    box-shadow: var(--neon-box-shadow, 
        0 0 var(--neon-box-glow-size, 35px) var(--neon-box-glow, #00f0ff),
        0 0 calc(var(--neon-box-glow-size, 35px) * 1.8) var(--neon-box-glow, #00f0ff),
        inset 0 0 calc(var(--neon-box-glow-size, 35px) * 0.5) rgba(0, 240, 255, 0.25)) !important;
}

/* Seçili iken neon parlaklığını koru (seçim çerçevesini outline olarak dışa taşır) */
#canvas-container .neon-box-active.el-selected,
#canvas-container #elDetails[data-neon-frame="true"].el-selected,
#canvas-container .sh-box[data-neon-frame="true"].el-selected {
    outline: 2px dashed #38bdf8 !important;
    outline-offset: 6px !important;
    box-shadow: var(--neon-box-shadow, 
        0 0 var(--neon-box-glow-size, 35px) var(--neon-box-glow, #00f0ff),
        0 0 calc(var(--neon-box-glow-size, 35px) * 1.8) var(--neon-box-glow, #00f0ff),
        inset 0 0 calc(var(--neon-box-glow-size, 35px) * 0.5) rgba(0, 240, 255, 0.25)) !important;
}

/* Kutu İçi Metin Parlaması */
#canvas-container .neon-text-active #infoLineText,
#canvas-container #elDetails[data-neon-text="true"] #infoLineText,
#canvas-container .sh-box[data-neon-text="true"] #infoLineText {
    color: var(--neon-text-color, #ffffff) !important;
    text-shadow: var(--neon-text-shadow, 
        0 0 calc(var(--neon-text-glow-size, 35px) * 0.12) var(--neon-core-color, #ffffff),
        0 0 calc(var(--neon-text-glow-size, 35px) * 0.35) var(--neon-box-glow, #00f0ff),
        0 0 var(--neon-text-glow-size, 35px) var(--neon-box-glow, #00f0ff),
        0 0 calc(var(--neon-text-glow-size, 35px) * 1.5) var(--neon-box-glow, #00f0ff)) !important;
}

/* Kutu İçi İkon Parlaması (Dengeli, göz yormayan ve kademeli neon ışıması) */
#canvas-container .neon-text-active #infoLineText i,
#canvas-container .neon-text-active #infoLineText svg,
#canvas-container #elDetails[data-neon-text="true"] #infoLineText i,
#canvas-container #elDetails[data-neon-text="true"] #infoLineText svg,
#canvas-container .sh-box[data-neon-text="true"] #infoLineText i,
#canvas-container .sh-box[data-neon-text="true"] #infoLineText svg {
    color: var(--neon-icon-color, var(--neon-box-glow, #00f0ff)) !important;
    opacity: var(--neon-icon-opacity, 0.9) !important;
    filter: var(--neon-icon-filter, drop-shadow(0 0 3px var(--neon-box-glow, #00f0ff))) !important;
}

/* Neon metin tutamaçlarının ve ikonlarının görünürlüğünü garantiye al */
#canvas-container .canvas-el[data-saber-active="true"] > .text-handle,
#canvas-container .neon-text-el > .text-handle {
    color: #00d2ff !important;
}

#canvas-container .canvas-el[data-saber-active="true"] > .text-delete-handle,
#canvas-container .neon-text-el > .text-delete-handle {
    color: #f43f5e !important;
}

#canvas-container .canvas-el[data-saber-active="true"] > .text-lock-handle,
#canvas-container .neon-text-el > .text-lock-handle {
    color: #f59e0b !important;
}

/* Neon Renk Seçim Çerçevesi */
.neon-color-frame {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 8px;
}

.neon-color-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #334155;
    border-radius: 6px;
    gap: 6px;
}

.neon-color-card label {
    font-size: 10.5px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
    white-space: nowrap;
}

.neon-color-card input[type="color"] {
    width: 32px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #475569;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

/* Açık Tema */
body[data-theme="light"] .neon-color-frame,
html[data-theme="light"] .neon-color-frame {
    background: rgba(241, 245, 249, 0.7) !important;
    border: 1px solid #cbd5e1 !important;
}

body[data-theme="light"] .neon-color-card,
html[data-theme="light"] .neon-color-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

body[data-theme="light"] .neon-color-card label,
html[data-theme="light"] .neon-color-card label {
    color: #1e293b !important;
}

body[data-theme="light"] .neon-color-card input[type="color"],
html[data-theme="light"] .neon-color-card input[type="color"] {
    border-color: #cbd5e1 !important;
}

/* Gelişmiş Yazı Ayarları Akordeon Stili */
.advanced-font-details {
    margin-top: 12px;
    border-top: 1px dashed #cbd5e1;
    padding-top: 8px;
}

.advanced-font-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    padding: 6px 6px;
    border-radius: 6px;
    user-select: none;
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid #cbd5e1;
    transition: background 0.15s ease, color 0.15s ease;
}

.advanced-font-summary:hover {
    color: #0284c7;
    background: #e0f2fe;
}

.advanced-font-summary::-webkit-details-marker {
    display: none;
}