/* ==========================================================================
   CSS Değişkenleri ve Temel Tema Tanımları
   ========================================================================== */

/* --- BG-Style-1 Tema Değişkenleri --- */
.bg-style-1 {
    --theme-bg-color: var(--e-global-color-primary);
    --theme-reverse-bg-color: var(--e-global-color-accent);
    --theme-border-color: var(--e-global-color-accent);
    --theme-text-color: var(--e-global-color-7968967);
    --theme-reverse-text-color: var(--e-global-color-b1b0f4f);
    --theme-heading-color: var(--e-global-color-9060308);
    --theme-reverse-heading-color: var(--e-global-color-fddf1c1); 
    --theme-link-hover-color: var(--e-global-color-9060308);
    --theme-card-bg-color: var(--e-global-color-primary);
    --theme-reverse-card-bg-color: var(--e-global-color-accent);
    --theme-card-title-color: var(--e-global-color-9060308);
    --theme-reverse-card-title-color: var(--e-global-color-fddf1c1);
    --theme-card-text-color: var(--e-global-color-7968967);
    --theme-reverse-card-text-color: var(--e-global-color-b1b0f4f);
    --theme-card-secondary-bg-color: var(--e-global-color-secondary);
    --theme-card-secondary-title-color: var(--e-global-color-bf905e1);
    --theme-card-secondary-text-color: var(--e-global-color-8da083f);
    --theme-form-bg-color: var(--e-global-color-accent);
    --theme-form-text-color: var(--e-global-color-b1b0f4f);
    --theme-button-bg-color: var(--e-global-color-secondary);
    --theme-button-text-color: var(--e-global-color-8da083f);
    --theme-button-hover-bg-color: var(--e-global-color-text);
    --theme-button-hover-text-color: var(--e-global-color-47ca336);
    --theme-opacity-title: 0.14;
}

/* --- BG-Style-2 Tema Değişkenleri --- */
.bg-style-2 {
    --theme-bg-color: var(--e-global-color-accent);
    --theme-reverse-bg-color: var(--e-global-color-primary);
    --theme-border-color: var(--e-global-color-primary);
    --theme-text-color: var(--e-global-color-b1b0f4f);
    --theme-reverse-text-color: var(--e-global-color-7968967);
    --theme-heading-color: var(--e-global-color-fddf1c1);
    --theme-reverse-heading-color: var(--e-global-color-9060308);
    --theme-link-hover-color: var(--e-global-color-fddf1c1);
    --theme-card-bg-color: var(--e-global-color-accent);
    --theme-reverse-card-bg-color: var(--e-global-color-primary);
    --theme-card-title-color: var(--e-global-color-fddf1c1);
    --theme-reverse-card-title-color: var(--e-global-color-9060308);
    --theme-card-text-color: var(--e-global-color-b1b0f4f);
    --theme-reverse-card-text-color: var(--e-global-color-7968967);
    --theme-card-secondary-bg-color: var(--e-global-color-secondary);
    --theme-card-secondary-title-color: var(--e-global-color-bf905e1);
    --theme-card-secondary-text-color: var(--e-global-color-8da083f);
    --theme-form-bg-color: var(--e-global-color-primary);
    --theme-form-text-color: var(--e-global-color-7968967);
    --theme-button-bg-color: var(--e-global-color-secondary);
    --theme-button-text-color: var(--e-global-color-8da083f);
    --theme-button-hover-bg-color: var(--e-global-color-text);
    --theme-button-hover-text-color: var(--e-global-color-47ca336);
    --theme-opacity-title: 0.14;
}

/* ==========================================================================
     Genel Elementor ve Düzen Ayarları (bg-style-* Odaklı)
     ========================================================================== */
     
/* Background Overlay Color */
:is(.bg-style-1, .bg-style-2) .elementor-column .elementor-background-overlay {
    background-color: var(--theme-bg-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-background-overlay {
    background-color: var(--theme-bg-color) !important;
    opacity: 0.8 !important;
}

/* Section İçerisinde Overlay Varsa Başlık ve Metin Rengi */
:is(.bg-style-1,.bg-style-2):has(.elementor-background-overlay) :is(h1,h2,h3,h4,h5,h6) {
    color: var(--theme-heading-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-column:has(.elementor-background-overlay) .elementor-button :is(p, span, .elementor-widget-text-editor) {
    color: var(--theme-button-text-color) !important;
}

:is(.bg-style-1, .bg-style-2):has(.elementor-background-overlay) :is(p, span, .elementor-widget-text-editor) {
    color: var(--theme-text-color) !important;
}

:is(.bg-style-1,.bg-style-2) .elementor-column:has(.elementor-background-overlay) :is(h1,h2,h3,h4,h5,h6) {
    color: var(--theme-heading-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-column:has(.elementor-background-overlay) :is(p, span, .elementor-widget-text-editor) {
    color: var(--theme-text-color) !important;
}

/* Section (column olmayan) elemanlarda doğrudan arka plan ve ana metin rengi */
:is(.bg-style-1, .bg-style-2):not(.elementor-column) {
    background-color: var(--theme-bg-color) !important;
    /* Arka plan için !important gerekebilir */
    color: var(--theme-text-color) !important;
    /* Ana metin rengi için !important gerekebilir */
}

/* Section Shape Color */
:is(.bg-style-1, .bg-style-2) .elementor-shape svg path{
    fill: var(--theme-reverse-bg-color) !important;
}
:is(.bg-style-1, .bg-style-2) .elementor-shape svg{
    fill: var(--theme-reverse-bg-color) !important;
}

/* Column elemanlarda container arka planını temizle (kendi BG'si olacaksa) */
:is(.bg-style-1, .bg-style-2).elementor-column {
    background-color: transparent !important;
}

/* Sütun içindeki populated alana arka plan uygulama mantığı */
/* Not: .bg-style-n sınıfının ne işe yaradığını tam bilmediğim için koruyorum. */
/* Eğer column’da bg-style-n yoksa, child’daki populated'a arka plan uygula */
:is(.bg-style-1, .bg-style-2).elementor-column:not(.bg-style-n)>.elementor-element-populated {
    background-color: var(--theme-bg-color) !important;
}

/* Eğer column’da bg-style-n varsa, child’da arka plan uygulanmasın */
:is(.bg-style-1, .bg-style-2).elementor-column.bg-style-n>.elementor-element-populated {
    background-color: transparent !important;
}

/* Elementor Arka Plan Slideshow Temizleme */
:is(.bg-style-1, .bg-style-2) .elementor-background-slideshow+.elementor-element-populated,
:is(.bg-style-1, .bg-style-2) .elementor-background-slideshow+.elementor-element-populated .elementor-background-overlay {
    background: none !important;
    background-color: transparent !important;
}

/* ==========================================================================
     Genel Tipografi (bg-style-* Odaklı)
     ========================================================================== */

:is(.bg-style-1, .bg-style-2) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--theme-heading-color) !important;
}

:is(.bg-style-1, .bg-style-2) :is(h1, h2, h3, h4, h5, h6) p {
    color: var(--theme-heading-color) !important;
}

:is(.bg-style-1, .bg-style-2) :is(p, span, svg, .elementor-widget-text-editor) {
    color: var(--theme-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-icon-list-icon svg {
    fill: var(--theme-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) a {
    color: var(--theme-text-color) !important;
    /* Linkler varsayılan metin renginde */
}

:is(.bg-style-1, .bg-style-2) a:hover {
    color: var(--theme-link-hover-color) !important;
}

:is(.bg-style-1#call-to-action,.bg-style-2#call-to-action) #title :is(h1,h2,h3,h4,h5,h6) {
    opacity: 1 !important;
}

:is(.bg-style-1#call-to-action,.bg-style-2#call-to-action) #subtitle :is(h1,h2,h3,h4,h5,h6) {
    opacity: var(--theme-opacity-title) !important;
}

/* ==========================================================================
     Bileşenler: Butonlar (bg-style-* Odaklı)
     ========================================================================== */

:is(.bg-style-1, .bg-style-2) button,
:is(.bg-style-1, .bg-style-2) .elementor-button {
    /* Elementor butonlarını da kapsayalım */
    background-color: var(--theme-button-bg-color) !important;
    color: var(--theme-button-text-color) !important;
}

/* Buton içindeki span'lar için (bazı temalarda gerekebilir) */
:is(.bg-style-1, .bg-style-2) button span,
:is(.bg-style-1, .bg-style-2) .elementor-button .elementor-button-text {
    color: var(--theme-button-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) button:hover,
:is(.bg-style-1, .bg-style-2) .elementor-button:hover {
    background-color: var(--theme-button-hover-bg-color) !important;
    color: var(--theme-button-hover-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) button:hover span,
:is(.bg-style-1, .bg-style-2) .elementor-button:hover .elementor-button-text {
    color: var(--theme-button-hover-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .swiper-pagination-bullet {
    background: var(--theme-text-color) !important;
}

/* ==========================================================================
     Bileşenler: Formlar (bg-style-* Odaklı)
     ========================================================================== */

/* Not: Form alanları bg-style-1'de style-2 renklerini, bg-style-2'de style-1 renklerini kullanıyor. */
/* Bu yüzden doğrudan --theme-form-* değişkenlerini kullanıyoruz. */
:is(.bg-style-1, .bg-style-2) .elementor-form .elementor-field-group .elementor-field {
    background-color: var(--theme-form-bg-color) !important;
    color: var(--theme-form-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-form .elementor-field-group .elementor-field-label {
    color: var(--theme-text-color) !important;
}

/* ==========================================================================
     Bileşenler: Kartlar (myco-card ve diğerleri - bg-style-* Odaklı)
     ========================================================================== */

/* --- myco-card (Standart) --- */
/* Not: Bu kartlar genellikle ana tema renklerini takip ediyor */
:is(.bg-style-1, .bg-style-2) .myco-card {
    background-color: var(--theme-card-bg-color) !important;
    color: var(--theme-card-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .myco-card .card-title {
    color: var(--theme-card-title-color) !important;
}

:is(.bg-style-1, .bg-style-2) .myco-card :is(p, i, .learn-more) {
    color: var(--theme-card-text-color) !important;
    transition: transform 0.5s;
}

:is(.bg-style-1, .bg-style-2) .myco-card .learn-more:hover {
    color: var(--theme-card-title-color) !important;
    /* Hover rengi başlık rengiyle aynı */
    transform: scale(1.1);
    /* !important gereksiz olabilir */
}

/* how to card */
:is(.bg-style-1, .bg-style-2) .howto-card-v1 {
    background: none;
}

/* icon */
:is(.bg-style-1, .bg-style-2) .elementor-widget-icon .elementor-icon {
    border-color: rgb(from var(--theme-button-bg-color) r g b / 1)
}

:is(.bg-style-1, .bg-style-2) .elementor-widget-icon .elementor-icon svg {
    fill: var(--theme-button-bg-color);
}

/* icon box */
:is(.bg-style-1, .bg-style-2) .elementor-widget-icon-box span.elementor-icon {
    background: var(--theme-button-bg-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-widget-icon-box span.elementor-icon :is(svg, i) {
    fill: var(--theme-button-text-color) !important;
    color: var(--theme-button-text-color) !important;
}

/* testimonials card*/
:is(.bg-style-1, .bg-style-2) .testimonial-rating .star.filled {
    color: #fc0 !important;
}

:is(.bg-style-1, .bg-style-2) .testimonials-card-v1 {
    background-color: var(--theme-reverse-card-bg-color) !important;
}

:is(.bg-style-1, .bg-style-2) .testimonials-card-v1 .card-title {
    color: var(--theme-reverse-card-title-color) !important;
}

:is(.bg-style-1, .bg-style-2) .testimonials-card-v1 :is(p,i,.learn-more){
        color: var(--theme-reverse-card-text-color) !important;
}

/* feeature card */
:is(.bg-style-1, .bg-style-2) :is(.features-grid, .features-list) .card-image i {
    color: var(--theme-reverse-card-title-color) !important;
}

:is(.bg-style-1, .bg-style-2) :is(.features-grid, .features-list) .card-image.true i {
    color: var(--theme-button-text-color) !important;
}

/* Skill Bar Style */
:is(.bg-style-1, .bg-style-2) .skill-bars .progress-line {
    background-color: rgb(from var(--theme-reverse-card-bg-color) r g b / 0.15) !important;
}

:is(.bg-style-1, .bg-style-2) .progress-line span {
    background: var(--theme-reverse-bg-color);
    color: var(--theme-reverse-text-color) !important;
}

/* --- counter-card-v1 (Ters Renkler) --- */
:is(.bg-style-1, .bg-style-2) .counter-card-v1 {
    background: var(--theme-reverse-card-bg-color) !important;
    color: var(--theme-reverse-card-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .counter-card-v1 h2,
:is(.bg-style-1, .bg-style-2) .counter-card-v1 :is(.prefix, .counter, .card-title) {
    color: var(--theme-reverse-heading-color) !important;
}

:is(.bg-style-1, .bg-style-2) .counter-card-v1.true {
    background: var(--theme-card-secondary-bg-color) !important;
}

:is(.bg-style-1, .bg-style-2) .counter-card-v1.true h2,
:is(.bg-style-1, .bg-style-2) .counter-card-v1.true :is(.prefix, .counter, .card-title) {
    color: var(--theme-card-secondary-title-color) !important;
}



/* --- skills-card-v1 (Farklı Renkler) --- */
/* Not: Bu kartlar color-1/2 veya text/secondary global renklerini kullanıyor */
.bg-style-1 .skills-card-v1 .skillbar {
    background-color: var(--e-global-color-secondary) !important;
    color: var(--e-global-color-8da083f) !important;
}

/* Bu seçici orijinal kodda .counter-card-v1 içeriyordu, muhtemelen typo? skills-card-v1 olmalı */
.bg-style-1 .skills-card-v1 .skillbar .card-title {
    color: var(--e-global-color-fddf1c1) !important;
    /* style-2 başlık rengi? Emin değilim. */
}


/* --- faq card --- */
:is(.bg-style-1, .bg-style-2) :is(.faq-card-v1, .faq-card-v2) .faq-question .faq-icon i {
    color: var(--theme-heading-color) !important;
}

:is(.bg-style-1, .bg-style-2) :is(.faq-card-v1, .faq-card-v2) .faq-answer {
    background: var(--theme-reverse-bg-color);
}

:is(.bg-style-1, .bg-style-2) :is(.faq-card-v1, .faq-card-v2) .faq-answer p {
    color: var(--theme-reverse-text-color) !important;
}

/* service card */
:is(.bg-style-1, .bg-style-2) :is(.service-card-v3, .service-card-v2, .service-card-v1) {
    border: 1px solid rgb(from var(--theme-border-color) r g b / 0.2);
    transition: border-color 0.5s ease;
}

:is(.bg-style-1, .bg-style-2) :is(.service-card-v3, .service-card-v2, .service-card-v1):hover {
    border-color: transparent;
}

/* True */
:is(.bg-style-1, .bg-style-2) .myco-card:is(.true) {
    background: var(--theme-card-secondary-bg-color) !important;
}

:is(.bg-style-1, .bg-style-2) .myco-card:is(.true) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--theme-card-secondary-title-color) !important;
}

:is(.bg-style-1, .bg-style-2) .myco-card:is(.true) :is(p, span, a) {
    color: var(--theme-card-secondary-text-color) !important;
    text-decoration: none;
}

:is(.bg-style-1, .bg-style-2) .myco-card:is(.true) :is(a):hover {
    color: var(--theme-card-secondary-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .myco-card:is(.true) :is(button) {
    background: var(--theme-button-hover-bg-color) !important;
}

:is(.bg-style-1, .bg-style-2) .myco-card:is(.true) :is(button):hover {
    background: var(--theme-card-bg-color) !important;
    color: var(--theme-card-text-color) !important;
}

/* feeature card */
:is(.bg-style-1, .bg-style-2) :is(.features-grid, .features-list) .card-image i {
    color: var(--theme-card-title-color) !important;
}

/* product card */
:is(.bg-style-1, .bg-style-2) :is(.product-card-v2, .product-card-v1) {
    border: 1px solid rgb(from var(--theme-border-color) r g b / 0.2);
    transition: border-color 0.5s ease, box-shadow .3s ease;
}

:is(.bg-style-1, .bg-style-2) :is(.product-card-v1):hover {
    border-color: transparent;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
}

/* pricing card */
:is(.bg-style-1, .bg-style-2) .pricing-card-v2 .pricing-header {
    background: var(--theme-card-secondary-bg-color);
    color: var(--theme-card-secondary-text-color);
}

:is(.bg-style-1, .bg-style-2) .pricing-card-v2 .pricing-header :is(.pricing-title, .pricing-amount) {
    color: var(--theme-card-secondary-title-color) !important;
}

:is(.bg-style-1, .bg-style-2) .pricing-card-v2 .pricing-header :is(.pricing-desc, .pricing-period) {
    color: var(--theme-card-secondary-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .true.pricing-card-v2 .pricing-header {
    background-color: var(--theme-card-bg-color);
}

:is(.bg-style-1, .bg-style-2) .true.pricing-card-v1 .pricing-header :is(.pricing-title, .pricing-amount) {
    color: var(--theme-card-secondary-title-color) !important;
}

:is(.bg-style-1, .bg-style-2) .true.pricing-card-v1 .pricing-header :is(.pricing-desc) {
    color: var(--theme-card-secondary-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .true.pricing-card-v2 .pricing-header :is(.pricing-title, .pricing-amount) {
    color: var(--theme-card-title-color) !important;
}

:is(.bg-style-1, .bg-style-2) .true.pricing-card-v2 .pricing-header :is(.pricing-desc) {
    color: var(--theme-card-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .pricing-card-v2.true .pricing-details button {
    background-color: var(--theme-card-bg-color) !important;
    color: var(--theme-card-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .pricing-card-v2.true .pricing-details button:hover {
    background: var(--theme-button-hover-bg-color) !important;
    color: var(--theme-button-hover-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .pricing-card-v1.true .pricing-details button {
    background-color: var(--theme-card-bg-color) !important;
    color: var(--theme-card-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .pricing-card-v1.true .pricing-details button:hover {
    background: var(--theme-button-hover-bg-color) !important;
    color: var(--theme-button-hover-text-color) !important;
}

/* menu card */

/* Slides v1 */
#slider.v1 :is(.bg-style-1, .bg-style-2).elementor-widget-slides .swiper-slide .elementor-background-overlay {
    /* Ayarlanabilir Değişkenler */
    --color-gradient-start-stop: 35%;
    --color-gradient-end-stop: 75%;
    --mask-opaque-until-percentage: 40%;
    --blur-intensity: 10px;

    background-image: linear-gradient(
        to bottom right,
        rgb(from var(--theme-button-hover-bg-color) r g b / 0.8) var(--color-gradient-start-stop),
        var(--theme-button-bg-color) var(--color-gradient-end-stop)
    );
    background-color: transparent !important;
    -webkit-backdrop-filter: blur(var(--blur-intensity));
    backdrop-filter: blur(var(--blur-intensity));
    -webkit-mask-image: linear-gradient(to right,
        black var(--mask-opaque-until-percentage),
        transparent 100%
    );
    mask-image: linear-gradient(to right,
        black var(--mask-opaque-until-percentage),
        transparent 90%
    );
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
}

#slider.v1 :is(.bg-style-1,.bg-style-2) .elementor-swiper .elementor-slide-heading {
    color: var(--theme-button-text-color) !important;
}
    
#slider.v1 :is(.bg-style-1,.bg-style-2) .elementor-swiper .elementor-slide-description {
    color: var(--theme-button-text-color) !important;
}

/* Slides v2 Orijinal Hali Bu Yüzden CSS Yok */

/* Slides v3 */
#slider.v3 :is(.bg-style-1, .bg-style-2).elementor-widget-slides .swiper-slide .elementor-background-overlay {
background: none !important;
}

#slider.v3 :is(.bg-style-1, .bg-style-2).elementor-widget-slides .swiper-slide:has(.elementor-background-overlay) .swiper-slide-contents {
    padding: 50px;
    background-color: rgb(from var(--theme-bg-color) r g b / 0.7); /* Temadan gelen arka plan rengini %70 opaklıkla kullanır */
    border-radius: 30px 10px 60px 0; /* Köşe yuvarlaklıkları: sol-üst, sağ-üst, sağ-alt, sol-alt */
}

#slider.v3 :is(.bg-style-1, .bg-style-2) :is(.menu-card-v1, .menu-card-v2) :is(.menu-price, .price-label) {
    color: var(--theme-card-title-color) !important;
}

/* ==========================================================================
     Header Stilleri (bg-style-* Odaklı)
     ========================================================================== */

/* Arama Formu */
:is(.bg-style-1, .bg-style-2) .header-search :is(.elementor-search-form__toggle .e-font-icon-svg-container, .elementor-search-form__container) {
    background: var(--theme-bg-color) !important;
    /* Arama ikonu/kutusu arka planı */
}

:is(.bg-style-1, .bg-style-2) .header-search .elementor-search-form__input {
    color: var(--theme-heading-color) !important;
    /* Arama yazı rengi (başlık gibi) */
    fill: var(--theme-heading-color) !important;
    /* SVG için dolgu */
}

:is(.bg-style-1, .bg-style-2) .header-search .elementor-search-form__toggle .e-font-icon-svg-container svg {
    fill: var(--theme-heading-color) !important;
    /* SVG ikon rengi */
}

:is(.bg-style-1, .bg-style-2) .elementor-search-form__container.elementor-lightbox {
    background-color: var(--theme-bg-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-search-form--skin-full_screen .elementor-search-form input[type=search].elementor-search-form__input {
    border-color: var(--theme-border-color) !important;
    color: var(--theme-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-search-form--skin-full_screen .elementor-lightbox .dialog-lightbox-close-button {
    background-color: var(--theme-reverse-bg-color) !important;
    top: 60px;
    right: 15px;
    position: fixed !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-search-form--skin-full_screen .dialog-lightbox-close-button svg {
    fill: var(--theme-reverse-heading-color) !important;
}

/* Menü Linkleri */
:is(.bg-style-1, .bg-style-2) .header-menu a.elementor-item {
    color: var(--theme-heading-color) !important;
    /* Menü link rengi (başlık gibi) */
}

:is(.bg-style-1, .bg-style-2) .header-menu a.elementor-item:hover,
:is(.bg-style-1, .bg-style-2) .header-menu a.elementor-item.elementor-item-active {
    color: var(--theme-heading-color) !important;
    /* Hover/Aktif rengi aynı kalıyor */
    /* Aktif arka planı için medya sorgusu içindeki kural geçerli olacak */
}

/* Mobil Menü Özel Durumları */
@media (max-width: 1024px) {

    /* :is ile her iki tema için tek kural */
    :is(.bg-style-1, .bg-style-2) .header-menu a.elementor-item {
        color: var(--theme-mobile-menu-text-color) !important;
    }

    :is(.bg-style-1, .bg-style-2) .header-menu a.elementor-item.elementor-item-active {
        background-color: var(--theme-mobile-menu-active-bg) !important;
    }
}


/* ==========================================================================
     Footer Stilleri (bg-style-* Odaklı)
     ========================================================================== */

/* Footer Genel Arka Plan */
#footer:is(.bg-style-1, .bg-style-2) {
    background: var(--theme-bg-color) !important;
}

/* Footer Seperator Color */
#footer:is(.bg-style-1, .bg-style-2) .elementor-widget-divider span.elementor-divider-separator {
    border-block-start-color: var(--theme-text-color) !important;
}

/* Footer Genel İkon Rengi (Örnek, temanıza göre değişebilir) */
#footer .elementor-icon {
    color: var(--e-global-color-8da083f) !important;
    /* color-1 metin rengi gibi? */
}

/* Copyright SVG Renkleri */
#footer:is(.bg-style-1, .bg-style-2) .copyright svg {
    fill: var(--theme-text-color) !important;
    color: var(--theme-text-color) !important;
}

/* Footer Başlıklar */
#footer:is(.bg-style-1, .bg-style-2) h2 {
    color: var(--theme-heading-color) !important;
}

/* Footer Linkler */
#footer:is(.bg-style-1, .bg-style-2) a {
    color: var(--theme-text-color) !important;
}

#footer:is(.bg-style-1, .bg-style-2) a:hover,
#footer:is(.bg-style-1, .bg-style-2) a.elementor-item-active {
    color: var(--theme-heading-color) !important;
    /* Hover rengi başlık rengi gibi */
}

/* Footer Metin/Span */
#footer:is(.bg-style-1, .bg-style-2) :is(.elementor-widget-text-editor, span) {
    color: var(--theme-text-color) !important;
}

#footer:is(.bg-style-1,.bg-style-2) :is(.elementor-widget-text-editor,span) i {
    color: var(--theme-button-text-color) !important;
}

/* ==========================================================================
     Diğer Renk Stilleri (color-1, color-2)
     ========================================================================== */

/* --- Color-1 Stilleri --- */
.color-1 {
    background-color: var(--e-global-color-secondary) !important;
    color: var(--e-global-color-8da083f) !important;
}

.color-1 :is(h1, h2, h3, h4, h5, h6) {
    color: var(--e-global-color-bf905e1) !important;
}

.color-1 :is(p, span, a) {
    color: var(--e-global-color-8da083f) !important;
    transition: transform 0.5s;
}

.color-1 a:hover {
    color: var(--e-global-color-8da083f) !important;
    /* Hover rengi aynı kalıyor */
    transform: scale(1.1);
}

/* --- Color-2 Stilleri --- */
.color-2 {
    background-color: var(--e-global-color-text) !important;
    color: var(--e-global-color-47ca336) !important;
}

.color-2 :is(h1, h2, h3, h4, h5, h6) {
    color: var(--e-global-color-a29ff72) !important;
}

.color-2 :is(p, span, a) {
    color: var(--e-global-color-47ca336) !important;
    transition: transform 0.5s;
}

.color-2 a:hover {
    color: var(--e-global-color-47ca336) !important;
    /* Hover rengi aynı kalıyor */
    transform: scale(1.1);
}

/* Slides Widget */

:is(.bg-style-1, .bg-style-2) .elementor-swiper .swiper-slide-bg {
    background-color: var(--theme-bg-color) !important;
}
:is(.bg-style-1, .bg-style-2) .elementor-swiper .elementor-slide-heading {
    color: var(--theme-heading-color) !important;
}
:is(.bg-style-1, .bg-style-2) .elementor-swiper .elementor-slide-description {
    color: var(--theme-text-color) !important;
}
:is(.bg-style-1, .bg-style-2) .elementor-swiper .elementor-slide-button {
    background-color: var(--theme-button-bg-color) !important;
    color: var(--theme-button-text-color) !important;
    border: none;
}
:is(.bg-style-1, .bg-style-2) .elementor-swiper .elementor-slide-button:hover {
    background-color: var(--theme-button-hover-bg-color) !important;
    color: var(--theme-button-hover-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-swiper .elementor-background-overlay {
    background-color: rgb(from var(--theme-bg-color) r g b / 0.7) !important;
}
/* Slides Widget sonu */

/* Tippy - tooltip Style */
:is(.bg-style-1,.bg-style-2) :is(.tippy-content,.tippy-arrow) {
    background: var(--theme-button-bg-color) !important;
    color: var(--theme-button-bg-color) !important;
    border-radius: 5px;
}

:is(.bg-style-1,.bg-style-2) .tippy-content p {
    color: var(--theme-button-text-color) !important;
}

:is(.bg-style-1,.bg-style-2):has(.elementor-background-overlay) .tippy-content p{
    color: var(--theme-button-text-color) !important;
/* Tippy - tooltip Style sonu */

}

/* Placeholder Görünürlülüğü */
/* Ziyaretçide yine tamamen gizli */
.hidden-placeholder { display: none; }

/* Yöneticide placeholder görünür ama etiketsiz */
body.role-administrator .hidden-placeholder{display:inline-block;position:relative;color:#666;background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(0,0,0,.1) 4px 8px);border:1px dashed currentColor;padding:2px 6px;border-radius:4px;font-style:italic;opacity:.2}

body.role-administrator .hidden-placeholder:hover{opacity:.7}

/* Etiket yalnızca hover’da */
body.role-administrator .hidden-placeholder:hover::after{content:"Placeholderı Yönetici Görebilir";position:absolute;top:-1.5em;left:0;font-size:12px;font-weight:300;color:#fff;line-height:1;background:#d62828;padding:0 4px;border-radius:3px;white-space:nowrap}
/* Placeholder Görünürlülüğü sonu */

:is(.bg-style-1, .bg-style-2) .elementor-share-btn {
    background-color: var(--theme-button-bg-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-share-btn .elementor-share-btn__icon svg {
    fill: var(--theme-button-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-share-btn:hover {
    background-color: var(--theme-button-hover-bg-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-share-btn:hover .elementor-share-btn__icon svg {
    fill: var(--theme-button-hover-text-color) !important;
}

:is(.bg-style-1, .bg-style-2) .elementor-icon-box-title { color: var(--theme-heading-color) !important; }

/* =================================================================
   Link in Bio Styles Start
   ================================================================= */

/* Liste yapısı (Değişiklik Gerekmiyor) */
.link-in-bio .elementor-icon-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px !important;
}

.link-in-bio .elementor-icon-list-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Butonun kendisi (<a> etiketi veya direkt <li>) */
/* GÜNCELLENDİ: Bu blok, hem <a> etiketli hem de etiketsiz öğeler için temel stilleri belirler. */
.link-in-bio .elementor-icon-list-item a,
.link-in-bio .elementor-icon-list-item:not(:has(a)) {
    display: flex;
    align-items: center;
    background: transparent;
    color: #111;
    border-radius: 10px;
    padding: 16px 20px !important;
    transition: all 0.25s ease;
}

/* Sadece <a> Etiketi İçin Ek Stil (Değişiklik Gerekmiyor) */
.link-in-bio .elementor-icon-list-item a {
    text-decoration: none;
}

/* Buton üzerine gelme efekti */
/* GÜNCELLENDİ: Hover efekti artık <a> etiketi olmayan öğeler için de geçerli. */
.link-in-bio .elementor-icon-list-item a:hover,
.link-in-bio .elementor-icon-list-item:not(:has(a)):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* İkon (Değişiklik Gerekmiyor) */
.link-in-bio .elementor-icon-list-icon {
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.link-in-bio .elementor-icon-list-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Metin (Değişiklik Gerekmiyor) */
.link-in-bio .elementor-icon-list-text {
    flex-grow: 1;
    font-weight: 500;
}

/* Ok (Chevron) */
/* GÜNCELLENDİ: Ok ikonu artık <a> etiketi olmayan öğelerde de görünecek. */
.link-in-bio .elementor-icon-list-item a::after,
.link-in-bio .elementor-icon-list-item:not(:has(a))::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
    transform: rotate(45deg);
    transition: border-color 0.25s ease;
    position: static !important;
}

/* Ok için hover durumu */
/* GÜNCELLENDİ: Ok rengi, <a> etiketi olmayan öğelerde de hover durumunda değişecek. */
.link-in-bio .elementor-icon-list-item a:hover::after,
.link-in-bio .elementor-icon-list-item:not(:has(a)):hover::after {
    border-color: #111;
}


/* === Temalı Stiller === */

/* Temalı buton arkaplan ve yazı rengi */
/* GÜNCELLENDİ: Temalı stiller artık <a> etiketi olmayan öğeler için de geçerli. */
:is(.bg-style-1, .bg-style-2) .link-in-bio .elementor-icon-list-item a,
:is(.bg-style-1, .bg-style-2) .link-in-bio .elementor-icon-list-item:not(:has(a)) {
    background-color: var(--theme-button-bg-color);
    color: var(--theme-button-text-color) !important;
}

/* Temalı buton hover arkaplanı */
/* GÜNCELLENDİ: Temalı hover stilleri artık <a> etiketi olmayan öğeler için de geçerli. */
:is(.bg-style-1, .bg-style-2) .link-in-bio .elementor-icon-list-item a:hover,
:is(.bg-style-1, .bg-style-2) .link-in-bio .elementor-icon-list-item:not(:has(a)):hover {
    background-color: var(--theme-button-hover-bg-color);
}

/* Temalı ikon (SVG ve Font Icon) ve metin rengi (Değişiklik Gerekmiyor) */
/* Bu kurallar zaten iç elemanları hedeflediği için her iki durumda da çalışır. */
:is(.bg-style-1, .bg-style-2) .link-in-bio .elementor-icon-list-text,
:is(.bg-style-1, .bg-style-2) .link-in-bio .elementor-icon-list-icon i {
    color: var(--theme-button-text-color) !important;
}
:is(.bg-style-1, .bg-style-2) .link-in-bio .elementor-icon-list-icon svg {
    fill: var(--theme-button-text-color) !important;
}

/* Temalı ok rengi */
/* GÜNCELLENDİ: Temalı ok rengi artık <a> etiketi olmayan öğeler için de geçerli. */
:is(.bg-style-1, .bg-style-2) .link-in-bio .elementor-icon-list-item a::after,
:is(.bg-style-1, .bg-style-2) .link-in-bio .elementor-icon-list-item:not(:has(a))::after {
    border-color: var(--theme-button-text-color);
}

/* Temalı ikon, metin ve okun hover durumundaki renkleri */
/* GÜNCELLENDİ: Tüm temalı hover renk değişimleri artık <a> etiketi olmayan öğeler için de geçerli. 
   Daha okunaklı olması için seçiciler gruplandırıldı. */
:is(.bg-style-1, .bg-style-2) .link-in-bio :is(.elementor-icon-list-item a:hover, .elementor-icon-list-item:not(:has(a)):hover) .elementor-icon-list-text,
:is(.bg-style-1, .bg-style-2) .link-in-bio :is(.elementor-icon-list-item a:hover, .elementor-icon-list-item:not(:has(a)):hover) .elementor-icon-list-icon i {
    color: var(--theme-button-hover-text-color) !important;
}
:is(.bg-style-1, .bg-style-2) .link-in-bio :is(.elementor-icon-list-item a:hover, .elementor-icon-list-item:not(:has(a)):hover) .elementor-icon-list-icon svg {
    fill: var(--theme-button-hover-text-color) !important;
}
:is(.bg-style-1, .bg-style-2) .link-in-bio :is(.elementor-icon-list-item a:hover, .elementor-icon-list-item:not(:has(a)):hover)::after {
    border-color: var(--theme-button-hover-text-color);
}

/* =================================================================
   Link in Bio Styles End
   ================================================================= */
   
/*******************************************************************
 * Social icons
 ******************************************************************/
:is(.bg-style-1, .bg-style-2)   .elementor-social-icon {
    background: var(--theme-button-bg-color) !important;
}
:is(.bg-style-1, .bg-style-2) .elementor-social-icon :is(svg,i) {
        color: var(--theme-button-text-color) !important;
        fill: var(--theme-button-text-color) !important;
}