/**
 * NECOX — HTML Bloku Element CSS
 *
 * @since 5.7.13
 *
 * K2 panelden tum gorsel ayarlar CSS variable'lar uzerinden uygulanir.
 * Variable'lar fonts.php tarafindan :root'a yazilir.
 *
 * Mimari:
 *   - Cascade: K1 (component default) -> K2 (admin panel) -> K3 (instance override)
 *   - var(--necox-el-html-X, FALLBACK) ile fallback degeri tutulur
 *   - Hover state .necox-el-html:hover ile uygulanir
 *   - Glass / Gradient / Transparent desteklenir (efekt onceligi: glass > gradient > transparent > solid)
 */

.necox-el-html {
    /* Genel */
    max-width: var(--necox-el-html-max-width, none);
    min-height: var(--necox-el-html-min-height, 0);

    /* Tipografi */
    font-family: var(--necox-el-html-font, inherit);
    font-size: var(--necox-el-html-size, inherit);
    font-weight: var(--necox-el-html-weight, inherit);
    line-height: var(--necox-el-html-line-height, inherit);
    letter-spacing: var(--necox-el-html-letter-spacing, normal);
    text-align: var(--necox-el-html-text-align, inherit);
    text-transform: var(--necox-el-html-text-transform, none);
    color: var(--necox-el-html-color, inherit);

    /* Arka Plan */
    background: var(--necox-el-html-bg, transparent);

    /* Border */
    border-width: var(--necox-el-html-border-w, 0);
    border-style: var(--necox-el-html-border-style, solid);
    border-color: var(--necox-el-html-border-color, transparent);
    border-top-left-radius: var(--necox-el-html-radius-tl, 0);
    border-top-right-radius: var(--necox-el-html-radius-tr, 0);
    border-bottom-right-radius: var(--necox-el-html-radius-br, 0);
    border-bottom-left-radius: var(--necox-el-html-radius-bl, 0);

    /* Golge */
    box-shadow: var(--necox-el-html-shadow, none);

    /* Padding (inline ovrride edilebilir) */
    padding: var(--necox-el-html-padding-top, 0)
             var(--necox-el-html-padding-right, 0)
             var(--necox-el-html-padding-bottom, 0)
             var(--necox-el-html-padding-left, 0);

    /* Smooth hover */
    transition: background 0.25s ease, color 0.25s ease, border 0.25s ease, box-shadow 0.25s ease;
}

/* Metin Gradient (background-clip: text tekniği) */
.necox-el-html--text-gradient {
    background: var(--necox-el-html-text-gradient, none);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Hover state */
.necox-el-html:hover {
    background: var(--necox-el-html-hover-bg, var(--necox-el-html-bg, transparent));
    border-width: var(--necox-el-html-hover-border-w, var(--necox-el-html-border-w, 0));
    border-color: var(--necox-el-html-hover-border-color, var(--necox-el-html-border-color, transparent));
    border-radius: var(--necox-el-html-hover-border-radius, 0);
    box-shadow: var(--necox-el-html-hover-shadow, var(--necox-el-html-shadow, none));
    color: var(--necox-el-html-hover-color, var(--necox-el-html-color, inherit));
}

.necox-el-html--text-gradient:hover {
    background: var(--necox-el-html-text-hover-gradient, var(--necox-el-html-text-gradient, none));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Link renkleri (icerik icindeki <a> etiketleri) */
.necox-el-html a {
    color: var(--necox-el-html-link-color, inherit);
    transition: color 0.2s ease;
}

.necox-el-html a:hover {
    color: var(--necox-el-html-link-hover, var(--necox-el-html-link-color, inherit));
}

/* Transparent toggle — bg degerini iptal eder */
.necox-el-html--transparent {
    background: transparent !important;
}

.necox-el-html--hover-transparent:hover {
    background: transparent !important;
}

/* Gradient (efekt; bg uzerine yazilir) */
.necox-el-html--gradient {
    background: var(--necox-el-html-gradient, none);
}

.necox-el-html--hover-gradient:hover {
    background: var(--necox-el-html-hover-gradient, var(--necox-el-html-gradient, none));
}

/* Glass efekti (en yuksek oncelik) */
.necox-el-html--glass {
    background: rgba(255, 255, 255, var(--necox-el-html-glass-opacity, 0.20));
    backdrop-filter: blur(var(--necox-el-html-glass-blur, 12px));
    -webkit-backdrop-filter: blur(var(--necox-el-html-glass-blur, 12px));
}

.necox-el-html--glass-hover:hover {
    background: rgba(255, 255, 255, var(--necox-el-html-glass-hover-opacity, 0.30));
    backdrop-filter: blur(var(--necox-el-html-glass-hover-blur, 16px));
    -webkit-backdrop-filter: blur(var(--necox-el-html-glass-hover-blur, 16px));
}

/* Hizalama */
.necox-el-html--align-left   { margin-right: auto; margin-left: 0; align-self: flex-start; }
.necox-el-html--align-center { margin-left: auto;  margin-right: auto; align-self: center; }
.necox-el-html--align-right  { margin-left: auto;  margin-right: 0; align-self: flex-end; }

/* Responsive — Tablet */
@media (max-width: 1024px) {
    .necox-el-html {
        max-width: var(--necox-el-html-max-width-tablet, var(--necox-el-html-max-width, none));
        font-size: var(--necox-el-html-size-tablet, var(--necox-el-html-size, inherit));
        padding: var(--necox-el-html-padding-top-tablet, var(--necox-el-html-padding-top, 0))
                 var(--necox-el-html-padding-right-tablet, var(--necox-el-html-padding-right, 0))
                 var(--necox-el-html-padding-bottom-tablet, var(--necox-el-html-padding-bottom, 0))
                 var(--necox-el-html-padding-left-tablet, var(--necox-el-html-padding-left, 0));
    }
}

/* Responsive — Mobile */
@media (max-width: 767px) {
    .necox-el-html {
        max-width: var(--necox-el-html-max-width-mobile, var(--necox-el-html-max-width, none));
        font-size: var(--necox-el-html-size-mobile, var(--necox-el-html-size, inherit));
        padding: var(--necox-el-html-padding-top-mobile, var(--necox-el-html-padding-top, 0))
                 var(--necox-el-html-padding-right-mobile, var(--necox-el-html-padding-right, 0))
                 var(--necox-el-html-padding-bottom-mobile, var(--necox-el-html-padding-bottom, 0))
                 var(--necox-el-html-padding-left-mobile, var(--necox-el-html-padding-left, 0));
    }
}