/* --- 1. FONTS & RESET --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&family=Inter:wght@300;400;600&display=swap');
html, body {
    overflow-x: hidden !important; /* Yatay kaymayı kesin olarak engeller */
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

body {
    background: #fdfdfd !important;
    font-family: 'Inter', sans-serif !important;
    color: #444 !important;
    line-height: 1.6; /* Satır aralarını ferahlatır */
    -webkit-font-smoothing: antialiased; /* Fontları daha keskin yapar */
    margin: 0;
}

/* --- 2. LAYOUT STRUCTURE --- */
#container {
box-sizing: border-box !important;
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 10px 50px rgba(0,0,0,0.02);
}

.main-wrapper {
    display: flex;
    min-height: 600px;
    align-items: flex-start;
}

#navigation {
    flex: 0 0 200px;
    padding: 30px 15px;
    background: #ffffff;
    border-right: 1px solid #f5f5f5;
}

#content {
    flex: 1;
    padding: 50px;
}

/* --- 3. HEADER (Modern & Panoramic) --- */
#header {
    position: relative;
    padding: 60px 20px;
    text-align: center;
    border-bottom: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), 
                      url('https://u.jimcdn.com/cms/o/s96a8846ef3553f50/userlayout/img/header-large.jpg?t=1772777979'); 
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

#header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    font-weight: 500;
    color: #3d6a6a;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 2px 4px rgba(255,255,255,0.5);
}

.header-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #444;
    letter-spacing: 1px;
    margin-top: 15px;
    font-style: italic;
    text-shadow: 0 1px 3px rgba(255,255,255,0.5);
}

/* --- 4. NAVIGATION LINKS --- */
ul.mainNav1 {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
}

ul.mainNav1 li a {
    display: block !important;
    padding: 12px 15px !important;
    margin-bottom: 5px !important;
    font-size: 14px !important;
    color: #555 !important;
    text-decoration: none !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

ul.mainNav1 li a:hover, 
ul.mainNav1 li a.current {
    background: #f0f7f7 !important;
    color: #3d6a6a !important;
    font-weight: 600 !important;
    border-left: none !important;
    border-bottom: 3px solid #5ea3a3 !important; 
}

/* --- 5. TOP BANNER & SWITCHER --- */
.top-announcement-bar {
    background: linear-gradient(90deg, #5ea3a3 0%, #4d8a8a 100%);
    color: white;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
}

.announcement-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.language-switcher {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.lang-link {
    text-decoration: none !important;
    color: #666 !important;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f5f8f8;
    border: 1px solid #e0eaea;
    transition: all 0.3s ease;
}

.lang-link:hover {
    background: #3d6a6a !important;
    color: #ffffff !important;
}

/* --- 6. FOOTER & LEGAL --- */
#footer {
    background: #f9fbfb !important;
    border-top: 1px solid #eee;
    padding: 60px 20px 40px !important;
    text-align: center;
}

.footer-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.gutter {
    border-top: 1px solid #eef2f2;
    padding-top: 30px;
    margin-top: 20px;
}

.gutter a {
    color: #999 !important;
    font-size: 11px !important;
    text-decoration: none !important;
    margin: 0 10px;
}

.gutter a[href*="about"], 
.gutter a[href*="sitemap"], 
.gutter a[href*="login"] {
    display: none !important;
}

/* --- 7. SOCIAL ICONS (SIDEBAR & PAGE COMPATIBLE) --- */
.cc-socialprofiles-element-inner {
    display: flex !important;
    gap: 15px !important; /* İkonlar arası boşluk */
    justify-content: center !important; /* Ortalar */
    align-items: center !important;
    width: 100% !important;
    margin: 20px 0 !important;
    flex-wrap: nowrap !important; /* Yan yana taşmayı veya çift görünümü engeller */
}

.cc-socialprofiles-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;  /* Boyutu biraz büyüttük, daha profesyonel durur */
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    border-radius: 50% !important; /* Tam daire garantisi */
    position: relative !important;
    color: transparent !important;
    font-size: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

/* İkonların içinde çift sembol görünmesini engellemek için */
.cc-socialprofiles-link::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-size: 24px !important;
    color: #ffffff !important;
    text-indent: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Renk Tanımları */
.cc-socialprofiles-facebook { background: #1877F2 !important; }
.cc-socialprofiles-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; }
.cc-socialprofiles-youtube { background: #FF0000 !important; }

/* Font Awesome Kodları */
.cc-socialprofiles-facebook::before { content: "\f39e" !important; }
.cc-socialprofiles-instagram::before { content: "\f16d" !important; }
.cc-socialprofiles-youtube::before { content: "\f167" !important; }


/* cc-socialprofiles-icon span'larını gizle, ::before ile çizilen ikonlar kalsın */
.cc-socialprofiles-icon {
    display: none !important;
}
#content .cc-socialprofiles-element {
    margin-top: -10px !important;
    padding-top: -10px !important;
}

#content .j-socialprofiles {
    margin-top: -10px !important;
    padding-top: -10px !important;
}

/* --- 8. RESPONSIVE DESIGN (MOBILE FIXES) --- */

#menu-toggle, #menu-close { 
    display: none !important; 
}

/* Masaüstünde Sidebar elemanlarını görünür yap */
#mobile-overlay {
    display: block !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: auto !important;
}

#navigation .nav-container, 
#navigation .social-container {
    display: block !important;
}

@media (max-width: 992px) {
/* Mobilde Sütunları (Columns) Tek Satır Yap */
    .cc-m-hgrid-column {
        width: 100% !important; /* Yüzdeyi tam satıra zorlar */
        display: block !important;
        float: none !important;
        margin-bottom: 20px !important; /* Hücreler arasına boşluk ekler */
    }

    /* Sütunlar arasındaki ayırıcıyı mobilde gizle */
    .cc-m-hgrid-separator {
        display: none !important;
    }

    /* Görsellerin genişliğini hücreye sığdır */
    .cc-imagewrapper img, .cc-m-textWithImage img {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Caption genişliğini görselle eşitle */
    figcaption {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* CONTAINER */
    #container {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    #content {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word;
        padding: 30px 20px !important;
    }

    /* HEADER — ikinci bloktaki gradient değerler kazandı */
    #header {
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), 
                      url('https://u.jimcdn.com/cms/o/s96a8846ef3553f50/userlayout/img/header-small.jpg?t=1772777985'); 
        background-size: cover !important;
        background-position: center !important;
        padding: 20px 60px !important;
    }

    #header h1 {
        font-size: 26px !important;
    }

    .header-subtitle {
        font-size: 14px !important;
    }

    /* NAVIGATION */
    .main-wrapper {
        flex-direction: column !important;
    }

    #navigation {
        width: 100% !important;
        flex: auto !important;
        padding: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #eee;
    }

    /* NAV TOP ROW */
    .nav-top-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 20px !important;
        box-sizing: border-box !important;
    }

    #menu-toggle {
        display: block !important;
        background: #3d6a6a;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 20px;
        font-weight: 600;
        cursor: pointer;
    }

    .language-switcher {
        display: flex !important;
        gap: 10px !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* NAV LİNKLER */
//* Media query içindeki ul.mainNav1 bloğunu bu tam simetrik versiyonla değiştir */
ul.mainNav1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    
    /* Simetriyi bozan gizli paddingleri sıfırla */
    padding: 0 !important; 
    margin: 0 auto !important;
    width: 100% !important;
    list-style: none !important; /* Noktaları/işaretleri tamamen kaldır */
}

ul.mainNav1 li {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style-type: none !important;
}

ul.mainNav1 li a {
    display: block !important;
    text-align: center !important; /* Metni tam ortaya hizalar */
    padding: 15px 0 !important; /* Sağ ve solu boş bırakıp dikey boşluk verir */
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

    /* POPUP OVERLAY */
#mobile-overlay {
        display: none !important; /* JS ile açılacak */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(255, 255, 255, 0.98) !important;
        z-index: 9999 !important;
        padding: 80px 0 !important;
        overflow-y: auto !important;
    }

    #menu-close {
        display: block !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        font-size: 28px !important;
        color: #3d6a6a !important;
    }

    /* Popup İçindeki Linkler */
    .nav-container ul.mainNav1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    .nav-container ul.mainNav1 li a {
        font-size: 18px !important;
        padding: 12px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* SOSYAL MEDYA */
    .cc-socialprofiles-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        position: relative !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    .cc-socialprofiles-link::before {
        font-size: 18px !important;
    }

    .social-container {
        margin-top: 50px;
        padding-top: 30px;
        border-top: 1px solid #eee;
        display: block !important;
    }

    /* FOOTER */
    .footer-grid {
        flex-direction: column !important;
        gap: 30px !important;
    }
}

/* --- BLOG BOŞLUK SIFIRLAMA --- */

/* 1. Kapsayıcıyı en tepeye daya */
.j-blogarticle {
    padding-top: 0 !important;
    margin-top: -20px !important; /* İçeriği fiziksel olarak yukarı çeker */
}

/* 2. SADECE başlık ve boşluk modülünü hedef al, görseli (image) koru */
.j-blogarticle h1, 
.j-blogarticle .j-module.j-spacing {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
}

/* 3. Görselin (image) kendisini görünür tut ve üst boşluğunu sıfırla */
.j-blogarticle .j-module.j-imageSubtitle,
.j-blogarticle .j-module.n.j-imageSubtitle {
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.j-blogarticle {
    background: #ffffff !important;
    border: 1px solid #f0f5f5 !important;
    border-radius: 15px !important;
    padding: 25px !important;
    margin-bottom: 40px !important;
    box-shadow: 0 10px 30px rgba(61, 106, 106, 0.03) !important;
    transition: transform 0.3s ease;
}

.j-blogarticle:hover {
    transform: translateY(-5px);
    border-color: #5ea3a3 !important;
}

/* 3. Blog görsellerini kartın içine tam oturt */
.j-blogarticle .cc-imagewrapper img {
    border-radius: 10px !important;
    margin-bottom: 15px !important;
}

.j-blog-headline {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    color: #3d6a6a !important;
    margin: 10px 0 !important;
    line-height: 1.3 !important;
}

/* --- 9. STYLISH CONTACT FORM --- */
.j-formnew {
    background: #fdfdfd;
    padding: 40px !important;
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    max-width: 800px;
    margin: 20px auto !important;
}

/* Giriş Alanlarını Düzenle */
.cc-m-form-view-element input[type="text"],
.cc-m-form-view-element input[type="email"],
.cc-m-form-view-element textarea {
    width: 100% !important; /* %50'den tam genişliğe çektik */
    padding: 12px 15px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    background: #ffffff !important;
    transition: all 0.3s ease;
    box-sizing: border-box !important;
}

/* Focus (Tıklanınca) Durumu */
.cc-m-form-view-element input:focus,
.cc-m-form-view-element textarea:focus {
    border-color: #3d6a6a !important;
    box-shadow: 0 0 0 4px rgba(61, 106, 106, 0.1) !important;
    outline: none !important;
}

/* Etiketler (Label) */
.cc-m-form-view-element label {
    display: block !important;
    font-weight: 600 !important;
    color: #3d6a6a !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

/* Gönder Butonu */
.cc-m-form-submit input[type="submit"] {
    background: #3d6a6a !important;
    color: white !important;
    padding: 12px 40px !important;
    border-radius: 50px !important;
    border: none !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
}

.cc-m-form-submit input[type="submit"]:hover {
    background: #5ea3a3 !important;
    transform: translateY(-2px);
}

/* Not ve Gizlilik Metni */
.cc-m-form-note, 
.cc-m-form-view-element label[for*="dataprivacy"] {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 15px !important;
}

@media (max-width: 992px) {
    .j-formnew { padding: 20px !important; }
}

/* --- 10. SIMPLE SIDE-BY-SIDE CONTACT BAR --- */

/* Kapsayıcıyı yan yana dizilmeye zorla */
#cc-matrix-4309101429 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 20px !important;
}

/* Her bir iletişim öğesini kutu haline getir */
.footer-item {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #f9fbfb !important;
    padding: 8px 15px !important;
    border-radius: 30px !important; /* Oval, modern buton stili */
    border: 1px solid #eee !important;
    margin: 5px !important;
    white-space: nowrap !important; /* Metnin kırılmasını engeller */
}

/* İkonlar ve Metin Arasındaki Boşluk */
.footer-icon {
    margin-right: 8px !important;
    font-size: 16px !important;
}

/* Link renklerini Hacer ablanın petrol yeşiline uyarla */
.footer-item a {
    color: #3d6a6a !important;
    text-decoration: none !important;
}

/* Mobilde sığmazsa alt alta geçmelerini sağla */
@media (max-width: 768px) {
    #cc-matrix-4309101429 {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .footer-item {
        width: auto !important;
        display: flex !important;
    }
}

/* --- 11. GLOBAL TYPOGRAPHY & CARDS --- */

/* H1 - Sayfa Sloganı (Örn: Sağlığınız için el ele) */
.j-module.j-header h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 36px !important;
    color: #3d6a6a !important;
    text-align: center !important;
    margin: 40px 0 !important;
}

/* H2 - Kurs/Hizmet Başlıkları */
.j-module.j-header h2 {
    font-family: 'Montserrat', sans-serif !important;
    background: linear-gradient(90deg, #3d6a6a 0%, #5ea3a3 100%);
    color: white !important;
    padding: 15px 25px !important;
    border-radius: 12px 12px 0 0 !important;
}

/* Başlıktan (H2) hemen sonra gelen metni kutu yap */
.j-header:has(h2) + .j-text {
    background: #ffffff !important;
    border: 1px solid #f0f5f5 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 25px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 8px 25px rgba(61, 106, 106, 0.04);
}

/* Mobilde Başlık Boyutlarını Ayarla */
@media (max-width: 768px) {
    .j-module.j-header h1 {
        font-size: 26px !important;
        margin: 20px 0 !important;
    }
    .j-module.j-header h2 {
        font-size: 18px !important;
    }
}

/* --- 12. SMART WRAP BIO & IMAGE --- */

.j-textWithImage {
    display: block !important; /* Flexbox'ı kapatır */
    overflow: hidden;
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 30px !important;
}

.j-textWithImage figure.cc-imagewrapper {
    float: left !important; /* Yazı etraftan aksın */
    width: 300px !important;
    margin: 0 30px 20px 0 !important;
}

.j-textWithImage img {
    width: 100% !important;
    height: auto !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

/* Metin Stilini Düzenle */
.j-textWithImage .cc-m-textwithimage-inline-rte {
    font-family: 'Inter', sans-serif !important;
    color: #444 !important;
    line-height: 1.6 !important;
    display: block !important;
}

/* Inline style ile verilmiş inatçı satır aralıklarını ve font boyutlarını temizle */
.cc-m-textwithimage-inline-rte p, 
.j-text p {
    line-height: 1.6 !important; /* 19.6px olan inatçı değeri ezer */
    font-size: 16px !important;   /* Manuel 14px verilmiş alanları 16px yapar */
}

.cc-m-textwithimage-inline-rte span, 
.j-text span {
    line-height: inherit !important;
    font-size: inherit !important;
}

/* İlk Paragrafı (Merhaba...) Belirgin Yap */
.j-textWithImage p:first-of-type {
    font-size: 18px !important;
    color: #3d6a6a !important;
    font-weight: 500 !important;
    margin-top: 0 !important;
}

/* MOBİL AYARLAR */
@media (max-width: 768px) {
    .j-textWithImage figure.cc-imagewrapper {
        float: none !important; /* Mobilde kaydırmayı iptal et */
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
    }
    
    .j-textWithImage {
        padding: 20px !important;
        text-align: center; /* Mobilde samimi bir duruş için */
    }
    
    .j-textWithImage .cc-m-textwithimage-inline-rte {
        text-align: left; /* Metin mobilde yine soldan başlasın */
    }
}

/* Manuel renkleri marka rengine (Petrol Yeşili) zorla */
span[style*="color: #cc0000"], 
span[style*="color: rgb(204, 0, 0)"] {
    color: #3d6a6a !important;
    font-weight: 600 !important;
}

/* Jimdo'nun manuel renk seçimlerini (Turuncu, Kırmızı vb.) marka rengine zorla */
span[style*="color"], 
strong[style*="color"] {
    color: #3d6a6a !important;
}

/* --- 13. STYLISH GALLERY GRID --- */

/* Galeri kapsayıcısını merkezle ve boşluk bırak */
.j-gallery {
    padding: 20px 0 !important;
    margin: 30px auto !important;
}

/* Fotoğrafların etrafındaki sütun yapısını ferahlat */
.cc-m-gallery-stack-column {
    gap: 15px !important;
    display: flex;
    flex-direction: column;
}

/* Her bir galeri öğesini (item) birer tasarım objesine dönüştür */
.cc-m-gallery-stack-item {
    margin-bottom: 15px !important; /* Standart 3px'i ezdik */
    overflow: hidden;
    border-radius: 15px !important; /* Keskin köşelerden kurtulduk */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Fotoğraflar */
.cc-m-gallery-stack-item img {
    border-radius: 15px !important;
    transition: all 0.5s ease !important;
    filter: grayscale(10%) contrast(105%); /* Hafif sanatsal dokunuş */
}

/* HOVER - Üzerine gelince ne olsun? */
.cc-m-gallery-stack-item:hover {
    transform: translateY(-8px); /* Hafif yukarı kalkma */
    box-shadow: 0 12px 30px rgba(61, 106, 106, 0.15); /* Marka renginde gölge */
}

.cc-m-gallery-stack-item:hover img {
    transform: scale(1.05); /* Fotoğrafın hafif büyümesi */
    filter: grayscale(0%) contrast(110%); /* Renklerin canlanması */
}

/* Fotoğraf alt yazısı (Title) varsa şıklaştır */
.cc-m-gallery-stack-item a::after {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #3d6a6a;
}

/* Mobilde boşlukları optimize et */
@media (max-width: 768px) {
    .cc-m-gallery-stack-column {
        width: 100% !important;
        margin-right: 0 !important;
    }
    .cc-m-gallery-stack-item {
        margin-bottom: 20px !important;
    }
}

/* --- 14. STYLISH COMMENT FORM --- */

/* Formun genel çerçevesi */
.commententry.cc-com-entry {
    background: #fdfdfd !important;
    padding: 30px !important;
    border-radius: 15px;
    border: 1px solid #eef2f2;
    box-shadow: 0 8px 30px rgba(61, 106, 106, 0.03);
    margin: 30px 0 !important;
}

/* Etiketleri (Label) şıklaştır */
.commententry label {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    color: #3d6a6a !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: inline-block;
}

/* Giriş alanlarını modernize et */
.commententry input[type="text"], 
.commententry textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    background: #ffffff !important;
    transition: all 0.3s ease;
    box-sizing: border-box !important;
}

/* Tıklanınca (Focus) efekt */
.commententry input:focus, 
.commententry textarea:focus {
    border-color: #3d6a6a !important;
    box-shadow: 0 0 0 4px rgba(61, 106, 106, 0.1) !important;
    outline: none !important;
}

/* Gönder butonu (Pill-shaped) */
.commententry input[type="submit"] {
    background: #3d6a6a !important;
    color: white !important;
    padding: 12px 35px !important;
    border-radius: 50px !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 15px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.commententry input[type="submit"]:hover {
    background: #5ea3a3 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(61, 106, 106, 0.2);
}

/* Zorunlu alan notu ve gizlilik metni */
.commententry dl div:nth-child(3), 
.commententry div[style*="margin-top"] {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 10px !important;
}

/* --- 15. STYLISH INSTAGRAM GRID --- */
#cc-m-14836615529.j-hgrid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
}

#cc-m-14836615529 .cc-m-hgrid-column {
    flex: 1 1 45% !important;
    width: auto !important; /* Jimdo'nun %31 veya %49 değerini flex için boşa çıkarır */
}

/* Instagram iframe'lerini kart gibi göster */
iframe.instagram-media {
    margin: 0 auto 20px auto !important;
    border-radius: 12px !important; /* Keskin köşeleri yumuşat */
    border: 1px solid #eef2f2 !important;
    box-shadow: 0 10px 30px rgba(61, 106, 106, 0.05) !important; /* Hafif petrol yeşili gölge */
    min-width: 326px !important;
}

/* Gereksiz boşluk modüllerini (spacer) bu alanda gizle */
.cc-m-hgrid-column .j-spacing {
    display: none !important;
}

/* MOBİL AYARLAR */
@media (max-width: 768px) {
    .cc-m-hgrid-column {
        flex: 1 1 100% !important; /* Mobilde tam satır yap */
        width: 100% !important;
    }
    
    iframe.instagram-media {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* --- 16. PREMIUM MAPS STYLING --- */

/* Harita kapsayıcısını şık bir karta dönüştür */
.cc-map-wrapper {
    border-radius: 20px !important; /* Keskin köşelere son */
    overflow: hidden !important;
    border: 1px solid #eef2f2 !important;
    box-shadow: 0 15px 45px rgba(61, 106, 106, 0.08) !important;
    margin: 40px 0 !important;
    transition: all 0.4s ease;
}

/* Harita iframe'ine hafif bir renk filtresi (Opsiyonel) */
/* Not: Harita açıldığında daha pastel durmasını sağlar */
.cc-map-embed-iframe {
    filter: grayscale(20%) contrast(105%) !important;
}

/* Çerez uyarısı (Placeholder) alanını marka renkleriyle yumuşat */
.cc-map-embed-placeholder {
    background-color: #3d6a6a !important; /* Marka petrol yeşili */
    background-blend-mode: multiply !important;
    font-family: 'Inter', sans-serif !important;
    text-align: center;
    line-height: 1.6;
}

/* Placeholder içindeki linkleri belirginleştir */
.cc-map-embed-placeholder a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 600;
}

/* Harita üzerine gelince hafif bir canlanma efekti */
.cc-map-wrapper:hover {
    box-shadow: 0 20px 60px rgba(61, 106, 106, 0.15) !important;
    transform: translateY(-5px);
}

/* --- 17. STYLISH BLOG POST CONTENT --- */

/* 1. Blog Header & Meta (Kategori ve Tarih) */
.j-blog-post--header {
    text-align: center !important;
    margin-bottom: 40px !important;
    border-bottom: 1px solid #f0f5f5;
    padding-bottom: 30px;
}

.j-blog-post--category {
    background: #eafaf9 !important; /* Hafif yeşil arka plan */
    color: #3d6a6a !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    text-decoration: none !important;
}

.j-blog-post--date {
    color: #999 !important;
    font-size: 14px !important;
}

/* 2. Blog Ana Başlığı (H1) */
h1.j-blog-post--headline {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 34px !important;
    color: #3d6a6a !important;
    line-height: 1.3 !important;
    margin-top: 20px !important;
    font-weight: 600 !important;
}

/* 3. Blog Yazı Gövdesi */
.j-blogarticle .j-text {
    max-width: 800px !important; /* Okuma kolaylığı için metni daralttık */
    margin: 0 auto !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important; /* Okunabilirlik için bir tık büyüttük */
    line-height: 1.85 !important;
    color: #444 !important;
}

/* Ara Başlıklar (H3) */
.j-blogarticle h3 {
    font-family: 'Montserrat', sans-serif !important;
    color: #3d6a6a !important;
    font-size: 24px !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    border-left: 4px solid #5ea3a3;
    padding-left: 15px;
}

/* Yatay Çizgiler (Divider) */
.j-blogarticle hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(61, 106, 106, 0), rgba(61, 106, 106, 0.75), rgba(61, 106, 106, 0));
    margin: 40px 0 !important;
}

/* 4. Paylaşım Butonları (Share Buttons) */
#flexsocialbuttons {
    display: flex !important;
    justify-content: center !important;
    margin: 50px 0 !important;
}

/* MOBİL AYARLAR */
@media (max-width: 768px) {
    h1.j-blog-post--headline { font-size: 26px !important; }
    .j-blogarticle .j-text { font-size: 16px !important; }
}

/* --- 18. PREMIUM IMAGE STYLING --- */

/* Görsel modül kapsayıcısını şıklaştır ve ortala */
.j-imageSubtitle, .j-module.n.j-imageSubtitle {
    background: #ffffff !important;
    padding: 15px !important;
    border-radius: 20px !important;
    border: 1px solid #eef2f2 !important;
    box-shadow: 0 10px 40px rgba(61, 106, 106, 0.04) !important;
    margin: 30px auto !important; /* Üst-alt 30px, sağ-sol otomatik (ortalar) */
    max-width: 800px !important;
    transition: all 0.4s ease;
    display: block !important;
    overflow: hidden;
}

/* Resmin içindeki figür ve link yapısını ortala */
.j-imageSubtitle figure.cc-imagewrapper,
.j-imageSubtitle .cc-imagewrapper {
    display: flex !important;
    justify-content: center !important; /* Yatayda tam orta */
    align-items: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    text-align: center !important;
}

/* Görselin kendisini yumuşat ve merkezle */
.j-imageSubtitle img {
    border-radius: 15px !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    display: block !important;
    margin: 0 auto !important; /* Resmin kendisini de ortala */
    max-width: 100% !important;
    height: auto !important;
}

/* HOVER (Mouse Üzerine Gelince) */
.j-imageSubtitle:hover {
    box-shadow: 0 15px 50px rgba(61, 106, 106, 0.12) !important;
    transform: translateY(-5px);
}

.j-imageSubtitle:hover img {
    transform: scale(1.02);
}

/* Mobilde boşlukları ve genişliği optimize et */
@media (max-width: 768px) {
    .j-imageSubtitle {
        padding: 10px !important;
        border-radius: 15px !important;
        margin: 20px auto !important;
        width: 90% !important;
    }
}

/* --- 19. STYLISH TESTIMONIAL CARDS (TR & DE Global) --- */

/* Hem Türkçe (#cc-m-14836611429) hem Almanca (#cc-m-14836613429) sütun yapısını hedefle */
#cc-m-14836611429.j-hgrid, 
#cc-m-14836613429.j-hgrid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: stretch !important; /* Sütun boylarını eşitler */
}

/* Sütunların içindeki Jimdo konteynırlarını dikeyde doldurmaya zorla */
#cc-m-14836611429 .cc-m-hgrid-column, 
#cc-m-14836613429 .cc-m-hgrid-column {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: auto !important;
    min-width: 250px; /* Mobilde çok daralmasın */
}

/* Sütun içindeki matrix yapısını esnet */
#cc-m-14836611429 .cc-m-hgrid-column > div, 
#cc-m-14836613429 .cc-m-hgrid-column > div {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 15px; /* İki yorum arasındaki boşluk */
}

/* Mobilde kartları alt alta diz */
@media (max-width: 992px) {
    #cc-m-14836611429.j-hgrid, 
    #cc-m-14836613429.j-hgrid {
        flex-direction: column !important;
    }
}

/* Her bir yorumu bir kart içine al */
.j-text:has(em) {
    background: #ffffff !important;
    border: 1px solid #f0f5f5 !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(61, 106, 106, 0.04) !important;
    position: relative !important;
    transition: all 0.3s ease;
}

/* Kartların üzerine gelince hafif bir parlama efekti */
.j-text:has(em):hover {
    transform: translateY(-5px);
    border-color: #5ea3a3 !important;
    box-shadow: 0 15px 40px rgba(61, 106, 106, 0.08) !important;
}

/* İtalik metni (yorum içeriği) şıklaştır */
.j-text em {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important; /* İtalik yerine modern bir düz font */
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #555 !important;
    display: block !important;
    position: relative;
    z-index: 1;
}

/* Yorumun başına şık bir tırnak işareti ekle */
.j-text em::before {
    content: "\201C"; /* Sol tırnak işareti */
    font-family: 'Montserrat', sans-serif;
    font-size: 60px;
    color: rgba(61, 106, 106, 0.1); /* Çok hafif marka rengi */
    position: absolute;
    top: -20px;
    left: -10px;
    z-index: -1;
}

/* Gereksiz boşluk modüllerini (50px spacer) bu alanda gizle */
.cc-m-hgrid-column:has(em) .j-spacing {
    display: none !important;
}

/* Mobilde kartlar arası boşluk */
@media (max-width: 768px) {
    .j-text:has(em) {
        margin-bottom: 20px !important;
    }
}

/* --- 21. PREMIUM WHATSAPP CALL-TO-ACTION --- */

/* Butonun ana yapısı */
.j-calltoaction-link {
    background: #25D366 !important; /* WhatsApp Yeşili */
    color: #ffffff !important;
    padding: 18px 40px !important;
    border-radius: 50px !important; /* Tam yuvarlak (Pill-shaped) */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* Mouse ile üzerine gelince (Hover) */
.j-calltoaction-link:hover {
    background: #128C7E !important; /* Daha koyu WhatsApp yeşili */
    transform: translateY(-5px) scale(1.03); /* Hafif yukarı kalkma ve büyüme */
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4) !important;
    color: #ffffff !important;
}

/* Butonun içindeki metin hizalaması */
.j-calltoaction-wrapper {
    margin: 40px 0 !important;
    text-align: center !important; /* Butonu ortalar */
}

/* --- BLOG FEED IMAGE ALIGNMENT --- */

/* Blog özet kartlarını flexbox yapısına çevirerek içeriği dikeyde hizalayalım */
.j-blogarticle #cc-matrix- {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* İçeriği dikeyde ortalar */
    align-items: center !important;    /* İçeriği yatayda ortalar */
}

/* Blog görsel modülünü kartın içinde merkezi bir blok yap */
.j-blogarticle .j-module.j-imageSubtitle {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 20px !important; /* Altındaki tarih/başlık ile mesafe */
}

/* Görselin kendisini ve link kapsayıcısını merkezle */
.j-blogarticle .cc-imagewrapper,
.j-blogarticle .cc-imagewrapper a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.j-blogarticle .cc-imagewrapper img {
    margin: 0 auto !important;
    display: block !important;
    max-height: 250px !important; /* Kartların boyunun aşırı uzamasını engeller */
    width: auto !important;       /* Oranları korur */
    object-fit: cover;            /* Kesilmeyi önler */
}

/* Başlık ve metin alanlarının sola yaslanmasını istiyorsan bunları tekrar düzelt */
.j-blogarticle .j-text {
    width: 100% !important;
    text-align: left !important; /* Yazılar soldan aksın */
}