/* Servo Destek – WordPress Plugin Styles
   React app'in WordPress temasıyla çakışmaması için izole edilmiş stiller
*/

/* ─── Root Container & Layout Settings (Isolated & Theme-Safe) ───────────── */
#servo-destek-root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #1f2937;
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 96rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 600px;
    background-color: #f9fafb !important;
    position: relative;
    clear: both;
}

/* YALNIZCA sitenin diğer sayfalarında footer'a enjekte edilen sıfır etkili widget kökü */
#servo-destek-root.servo-destek-footer-widget,
#servo-destek-root.chatbot-only,
#servo-destek-root[style*="display:contents"],
#servo-destek-root[style*="display: contents"],
#servo-destek-root:empty {
    display: contents !important;
    width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Temanın main#main kapsayıcısını YALNIZCA tam sayfa [servo_destek] sayfası açıkken hedefle */
main:has(#servo-destek-root.servo-destek-shortcode-app),
main:has(#servo-destek-root:not(.servo-destek-footer-widget):not([style*="display:contents"])) {
    background: #F9FAFB !important;
}

/* YALNIZCA tam sayfa [servo_destek] sayfasındaki temasal h1.entry-title başlığını gizle */
h1.entry-title:has(~ #servo-destek-root.servo-destek-shortcode-app),
header:has(~ .entry-content #servo-destek-root.servo-destek-shortcode-app) h1.entry-title {
    display: none !important;
}

#servo-destek-root header,
#servo-destek-root footer,
#servo-destek-root section {
    border-color: #f1f5f9 !important;
}

#servo-destek-root *,
#servo-destek-root *::before,
#servo-destek-root *::after {
    box-sizing: border-box;
}

/* Ana İçerik Konteynerlerini 96rem Genişliğe Genişlet */
#servo-destek-root .max-w-7xl,
#servo-destek-root .max-w-6xl {
    max-width: 96rem !important;
}

/* WordPress yönetici çubuğu ile sticky chatbot çakışmasını önle */
#servo-destek-root .servo-sticky-chat {
    bottom: 20px;
    right: 20px;
    position: fixed;
    z-index: 9999;
}

/* WordPress görseli tam genişliği geçersiz kılmasını engelle */
#servo-destek-root img {
    max-width: 100%;
    height: auto;
}

/* ─── Spinner & Fade-in Animasyonları ───────────────────────────────────── */
@keyframes servo-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#servo-destek-root .servo-spin {
    animation: servo-spin 1s linear infinite;
}

@keyframes servo-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#servo-destek-root .servo-fade-in {
    animation: servo-fadeIn 0.3s ease-out;
}

/* Şahin Rulman Marka Rengi Degiskenleri */
:root {
    --servo-brand: #ea580c;
    --servo-brand-light: #ea580c18;
    --servo-brand-border: #ea580c30;
}

/* Uygulamanın kullandığı özel animasyonlar */
@keyframes servoFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@keyframes servoShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
@keyframes servoSpinSlow {
    to { transform: rotate(360deg); }
}
.animate-fadeIn   { animation: servoFadeIn 0.3s ease-out; }
.animate-shake    { animation: servoShake 0.5s ease-in-out; }
.animate-spin-slow { animation: servoSpinSlow 3s linear infinite; }


/* ==========================================================================
   2. GÖRSEL İLE TAM UYUMLU 3'LÜ HİZMET KARTLARI (SERVICE CARDS STYLES)
   ========================================================================== */

#servo-destek-root #section-service-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
}

@media (max-width: 768px) {
    #servo-destek-root #section-service-cards {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* Tüm Hizmet Kartları Ortak Temel Yapısı */
#servo-destek-root #section-service-cards > div {
    border-radius: 1.5rem !important; /* 24px yuvarlatılmış köşeler */
    padding: 1.75rem !important;
    min-height: 280px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important;
}

#servo-destek-root #section-service-cards > div:hover {
    transform: translateY(-6px) !important;
}

/* Kart Üst Rozetleri (Badges) */
#servo-destek-root #section-service-cards > div span {
    display: inline-block !important;
    padding: 0.25rem 0.75rem !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Kart Başlıkları (h3) */
#servo-destek-root #section-service-cards > div h3 {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
}

/* Kart Açıklama Metinleri (p) */
#servo-destek-root #section-service-cards > div p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.75rem !important;
    line-height: 1.625 !important;
    margin: 0 !important;
}

/* Kart Arka Plan Filigran İkonları (Watermark SVG) */
#servo-destek-root #section-service-cards > div > div:first-child {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: translate(25%, 25%) !important;
    opacity: 0.18 !important; /* 1. Görseldeki gibi silik ama net görünür opaklık (%18) */
    pointer-events: none !important;
    transition: transform 0.5s ease, opacity 0.5s ease !important;
    z-index: 1 !important;
}

#servo-destek-root #section-service-cards > div:hover > div:first-child {
    transform: translate(25%, 25%) scale(1.1) !important;
    opacity: 0.25 !important;
}

#servo-destek-root #section-service-cards > div > div:first-child svg {
    width: 12rem !important;
    height: 12rem !important;
    display: block !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   1. SOL KUTU: Koyu Lacivert/Siyah (#1e293b), Beyaz Metin, Turuncu Buton
   -------------------------------------------------------------------------- */
#servo-destek-root #section-service-cards > div:nth-child(1) {
    background-color: #1e293b !important;
    background-image: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.4), 0 8px 10px -6px rgba(15, 23, 42, 0.3) !important;
}

#servo-destek-root #section-service-cards > div:nth-child(1):hover {
    box-shadow: 0 25px 30px -5px rgba(15, 23, 42, 0.55), 0 12px 15px -6px rgba(15, 23, 42, 0.45) !important;
}

/* Sol Kutu Butonu */
#servo-destek-root #section-service-cards > div:nth-child(1) > div:last-child {
    background-color: #ea580c !important;
    color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
    width: fit-content !important;
    box-shadow: 0 10px 15px -3px rgba(234, 88, 12, 0.35) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

#servo-destek-root #section-service-cards > div:nth-child(1):hover > div:last-child {
    background-color: #c2410c !important;
}

/* --------------------------------------------------------------------------
   2. ORTA KUTU: Turuncu (#ea580c), Beyaz Metin, Beyaz Buton
   -------------------------------------------------------------------------- */
#servo-destek-root #section-service-cards > div:nth-child(2) {
    background-color: #ea580c !important;
    background-image: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(234, 88, 12, 0.4), 0 8px 10px -6px rgba(234, 88, 12, 0.3) !important;
}

#servo-destek-root #section-service-cards > div:nth-child(2):hover {
    box-shadow: 0 25px 30px -5px rgba(234, 88, 12, 0.55), 0 12px 15px -6px rgba(234, 88, 12, 0.45) !important;
}

/* Orta Kutu Butonu */
#servo-destek-root #section-service-cards > div:nth-child(2) > div:last-child {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
    width: fit-content !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

#servo-destek-root #section-service-cards > div:nth-child(2):hover > div:last-child {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

/* --------------------------------------------------------------------------
   3. SAĞ KUTU: Koyu Yeşil (#15803d), Beyaz Metin, Turuncu Buton
   -------------------------------------------------------------------------- */
#servo-destek-root #section-service-cards > div:nth-child(3) {
    background-color: #15803d !important;
    background-image: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 25px -5px rgba(21, 128, 61, 0.4), 0 8px 10px -6px rgba(21, 128, 61, 0.3) !important;
}

#servo-destek-root #section-service-cards > div:nth-child(3):hover {
    box-shadow: 0 25px 30px -5px rgba(21, 128, 61, 0.55), 0 12px 15px -6px rgba(21, 128, 61, 0.45) !important;
}

/* Sağ Kutu Butonu */
#servo-destek-root #section-service-cards > div:nth-child(3) > div:last-child {
    background-color: #ea580c !important;
    color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
    width: fit-content !important;
    box-shadow: 0 10px 15px -3px rgba(234, 88, 12, 0.35) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

#servo-destek-root #section-service-cards > div:nth-child(3):hover > div:last-child {
    background-color: #c2410c !important;
}


/* ==========================================================================
   DETAY SAYFASI & SSS (SIKÇA SORULAN SORULAR) STİLLERİ (SCOPED TO #servo-destek-root)
   ========================================================================== */

/* Detay Sayfası Ana Başlığı (H1) */
#servo-destek-root [id^="featured-detail-"] h1,
#servo-destek-root #rich-content-display h1 {
    color: #111827 !important;
    font-size: 2rem !important; /* 32px */
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
}

/* Detay Sayfası Alt Başlıklar (H2 - SEO & Okunabilirlik Odaklı Turuncu Vurgu) */
#servo-destek-root #rich-content-display h2 {
    color: #f38725 !important; /* İstenen okunaklı turuncu */
    font-size: 1.375rem !important; /* 22px */
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.35rem !important;
    border-bottom: 2px solid rgba(243, 135, 37, 0.15) !important;
}

/* Detay Sayfası Alt Başlıklar (H3 - Koyu Karakterli Başlıklar) */
#servo-destek-root #rich-content-display h3 {
    color: #1f2937 !important;
    font-size: 1.125rem !important; /* 18px */
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Detay Sayfası Alt Başlıklar (H4) */
#servo-destek-root #rich-content-display h4 {
    color: #374151 !important;
    font-size: 1rem !important; /* 16px */
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
}

/* Paragraf ve Genel Metin Düzenlemesi */
#servo-destek-root #rich-content-display p {
    color: #374151 !important;
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.75 !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
}

/* Vurgulu ve Koyu Metinler */
#servo-destek-root #rich-content-display strong,
#servo-destek-root #rich-content-display b {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* Liste Ögeleri (UL, OL, LI) */
#servo-destek-root #rich-content-display ul,
#servo-destek-root #rich-content-display ol {
    padding-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

#servo-destek-root #rich-content-display li {
    color: #374151 !important;
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    margin-bottom: 0.5rem !important;
}

/* Alıntı (Blockquote) Kutuları */
#servo-destek-root #rich-content-display blockquote {
    border-left: 4px solid #ea580c !important;
    background-color: #fff7ed !important;
    padding: 1rem 1.25rem !important;
    border-radius: 0.5rem !important;
    margin: 1.5rem 0 !important;
    color: #4b5563 !important;
    font-style: italic !important;
}

/* Kod ve Pre Blokları */
#servo-destek-root #rich-content-display code {
    background-color: #f3f4f6 !important;
    color: #c2410c !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
}

#servo-destek-root #rich-content-display pre {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    padding: 1rem !important;
    border-radius: 0.75rem !important;
    overflow-x: auto !important;
    margin-bottom: 1.25rem !important;
}

/* --------------------------------------------------------------------------
   DETAY SAYFASI TABLO (TABLE) STİLLERİ (SCOPED TO #servo-destek-root)
   -------------------------------------------------------------------------- */

#servo-destek-root #rich-content-display table,
#servo-destek-root [id^="featured-detail-"] table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

#servo-destek-root #rich-content-display th,
#servo-destek-root [id^="featured-detail-"] th {
    background-color: #f8fafc !important;
    color: #1f2937 !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

#servo-destek-root #rich-content-display th:last-child,
#servo-destek-root [id^="featured-detail-"] th:last-child {
    border-right: none !important;
}

#servo-destek-root #rich-content-display td,
#servo-destek-root [id^="featured-detail-"] td {
    color: #374151 !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
}

#servo-destek-root #rich-content-display td:last-child,
#servo-destek-root [id^="featured-detail-"] td:last-child {
    border-right: none !important;
}

#servo-destek-root #rich-content-display tr:last-child td,
#servo-destek-root [id^="featured-detail-"] tr:last-child td {
    border-bottom: none !important;
}

#servo-destek-root #rich-content-display tr:nth-child(even) td,
#servo-destek-root [id^="featured-detail-"] tr:nth-child(even) td {
    background-color: #fdfdfd !important;
}

#servo-destek-root #rich-content-display tr:hover td,
#servo-destek-root [id^="featured-detail-"] tr:hover td {
    background-color: #fff7ed !important;
}

/* --------------------------------------------------------------------------
   SSS (SIKÇA SORULAN SORULAR / FAQ) AKORDEON DÜZENLEMELERİ (HIGH SPECIFICITY)
   -------------------------------------------------------------------------- */

/* 1. SSS / FAQ Ana Kart Kapsayıcıları */
#servo-destek-root #rich-content-display details,
#servo-destek-root #rich-content-display .wp-block-details,
#servo-destek-root #rich-content-display .faq-item,
#servo-destek-root #rich-content-display .sss-item,
#servo-destek-root #rich-content-display .accordion-item,
#servo-destek-root #rich-content-display .schema-faq-section,
#servo-destek-root #rich-content-display .schema-faq-item,
#servo-destek-root #rich-content-display .rank-math-list-item,
#servo-destek-root #rich-content-display .elementor-accordion-item,
#servo-destek-root details,
#servo-destek-root .wp-block-details,
#servo-destek-root .faq-item,
#servo-destek-root .sss-item,
#servo-destek-root .accordion-item {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.05) !important;
    display: block !important;
}

/* SSS Kart Hover Efekti */
#servo-destek-root #rich-content-display details:hover,
#servo-destek-root #rich-content-display .wp-block-details:hover,
#servo-destek-root #rich-content-display .faq-item:hover,
#servo-destek-root #rich-content-display .sss-item:hover,
#servo-destek-root #rich-content-display .accordion-item:hover,
#servo-destek-root details:hover,
#servo-destek-root .faq-item:hover,
#servo-destek-root .sss-item:hover,
#servo-destek-root .accordion-item:hover {
    border-color: rgba(243, 135, 37, 0.5) !important;
    box-shadow: 0 4px 14px -2px rgba(243, 135, 37, 0.15) !important;
}

/* SSS Kart Açık / Aktif Durumu (open attribute veya .active class) */
#servo-destek-root #rich-content-display details[open],
#servo-destek-root #rich-content-display .wp-block-details[open],
#servo-destek-root #rich-content-display .faq-item.active,
#servo-destek-root #rich-content-display .sss-item.active,
#servo-destek-root details[open],
#servo-destek-root .faq-item.active,
#servo-destek-root .sss-item.active {
    border-color: #f38725 !important;
    box-shadow: 0 4px 18px -2px rgba(243, 135, 37, 0.2) !important;
}

/* 2. SSS Soru Başlığı (Summary / Header / Question) */
#servo-destek-root #rich-content-display summary,
#servo-destek-root #rich-content-display .wp-block-details__summary,
#servo-destek-root #rich-content-display .faq-question,
#servo-destek-root #rich-content-display .faq-header,
#servo-destek-root #rich-content-display .faq-title,
#servo-destek-root #rich-content-display .sss-soru,
#servo-destek-root #rich-content-display .sss-baslik,
#servo-destek-root #rich-content-display .accordion-header,
#servo-destek-root #rich-content-display .accordion-title,
#servo-destek-root #rich-content-display .schema-faq-question,
#servo-destek-root #rich-content-display .rank-math-question,
#servo-destek-root #rich-content-display .elementor-tab-title,
#servo-destek-root summary,
#servo-destek-root .faq-question,
#servo-destek-root .sss-soru,
#servo-destek-root .accordion-header {
    padding: 1rem 1.25rem !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    user-select: none !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
    list-style: none !important;
    position: relative !important;
    background-color: #ffffff !important;
    margin: 0 !important;
}

#servo-destek-root summary::-webkit-details-marker,
#servo-destek-root .wp-block-details__summary::-webkit-details-marker {
    display: none !important;
}

/* 3. Sağ Taraf Dönüşümlü Ok / Artı-Eksi Simgesi (::after) */
#servo-destek-root #rich-content-display summary::after,
#servo-destek-root #rich-content-display .wp-block-details__summary::after,
#servo-destek-root #rich-content-display .faq-question::after,
#servo-destek-root #rich-content-display .faq-header::after,
#servo-destek-root #rich-content-display .sss-soru::after,
#servo-destek-root #rich-content-display .accordion-header::after,
#servo-destek-root #rich-content-display .schema-faq-question::after,
#servo-destek-root #rich-content-display .rank-math-question::after,
#servo-destek-root summary::after,
#servo-destek-root .faq-question::after,
#servo-destek-root .sss-soru::after,
#servo-destek-root .accordion-header::after {
    content: "❯" !important;
    font-size: 0.8125rem !important;
    font-weight: 800 !important;
    color: #f38725 !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
    display: inline-block !important;
    margin-left: 0.75rem !important;
    flex-shrink: 0 !important;
}

/* Açık Akordeonda Ok Yönünü Aşağı Döndürme (90deg) */
#servo-destek-root #rich-content-display details[open] summary::after,
#servo-destek-root #rich-content-display details[open] .wp-block-details__summary::after,
#servo-destek-root #rich-content-display .faq-item.active .faq-question::after,
#servo-destek-root #rich-content-display .sss-item.active .sss-soru::after,
#servo-destek-root details[open] summary::after,
#servo-destek-root .faq-item.active .faq-question::after,
#servo-destek-root .sss-item.active .sss-soru::after {
    transform: rotate(90deg) !important;
}

/* Soru Başlığı Hover Durumu */
#servo-destek-root #rich-content-display summary:hover,
#servo-destek-root #rich-content-display .wp-block-details__summary:hover,
#servo-destek-root #rich-content-display .faq-question:hover,
#servo-destek-root #rich-content-display .sss-soru:hover,
#servo-destek-root #rich-content-display .accordion-header:hover,
#servo-destek-root summary:hover,
#servo-destek-root .faq-question:hover,
#servo-destek-root .sss-soru:hover {
    color: #f38725 !important;
    background-color: #fff7ed !important;
}

/* 4. SSS Cevap Metni (Answer Content) */
#servo-destek-root #rich-content-display details > div,
#servo-destek-root #rich-content-display details > p,
#servo-destek-root #rich-content-display .wp-block-details__content,
#servo-destek-root #rich-content-display .faq-answer,
#servo-destek-root #rich-content-display .faq-body,
#servo-destek-root #rich-content-display .faq-content,
#servo-destek-root #rich-content-display .sss-cevap,
#servo-destek-root #rich-content-display .sss-icerik,
#servo-destek-root #rich-content-display .accordion-content,
#servo-destek-root #rich-content-display .accordion-body,
#servo-destek-root #rich-content-display .schema-faq-answer,
#servo-destek-root #rich-content-display .rank-math-answer,
#servo-destek-root #rich-content-display .elementor-tab-content,
#servo-destek-root details > div,
#servo-destek-root details > p,
#servo-destek-root .faq-answer,
#servo-destek-root .sss-cevap,
#servo-destek-root .accordion-content {
    padding: 1.125rem 1.25rem 1.25rem 1.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    color: #4b5563 !important;
    border-top: 1px solid #f1f5f9 !important;
    border-left: 4px solid #f38725 !important; /* Vurgulu sol turuncu marka çizgisi */
    background-color: #fafafa !important;
    margin: 0 !important;
}

/* 5. Definition Lists (<dl>, <dt>, <dd>) SSS Yapısı */
#servo-destek-root #rich-content-display dl {
    margin: 1.5rem 0 !important;
}

#servo-destek-root #rich-content-display dt {
    padding: 1rem 1.25rem !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    margin-top: 1rem !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#servo-destek-root #rich-content-display dt::after {
    content: "❯" !important;
    font-size: 0.8125rem !important;
    font-weight: 800 !important;
    color: #f38725 !important;
}

#servo-destek-root #rich-content-display dd {
    padding: 1rem 1.25rem 1.25rem 1.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    color: #4b5563 !important;
    background-color: #fafafa !important;
    border: 1.5px solid #e2e8f0 !important;
    border-top: none !important;
    border-left: 4px solid #f38725 !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
    margin-bottom: 1.25rem !important;
    margin-left: 0 !important;
}


/* ==========================================================================
   İÇERİKCİM AKORDEON (SSS / FAQ) ÖZEL STİLLERİ (SCOPED TO #servo-destek-root)
   ========================================================================== */

/* 1. SSS Kart Kapsayıcısı (.icerikcim-accordion-item) */
#servo-destek-root .icerikcim-accordion-item,
#servo-destek-root #rich-content-display .icerikcim-accordion-item {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.05) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    display: block !important;
}

#servo-destek-root .icerikcim-accordion-item:hover,
#servo-destek-root #rich-content-display .icerikcim-accordion-item:hover {
    border-color: rgba(243, 135, 37, 0.5) !important;
    box-shadow: 0 4px 14px -2px rgba(243, 135, 37, 0.15) !important;
}

#servo-destek-root .icerikcim-accordion-item.active,
#servo-destek-root .icerikcim-accordion-item.open,
#servo-destek-root .icerikcim-accordion-item.is-active,
#servo-destek-root #rich-content-display .icerikcim-accordion-item.active,
#servo-destek-root #rich-content-display .icerikcim-accordion-item.open {
    border-color: #f38725 !important;
    box-shadow: 0 4px 18px -2px rgba(243, 135, 37, 0.2) !important;
}

/* 2. Soru Buton Başlığı (.icerikcim-accordion-header) */
#servo-destek-root .icerikcim-accordion-header,
#servo-destek-root #rich-content-display .icerikcim-accordion-header {
    width: 100% !important;
    padding: 1.125rem 1.25rem !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    margin: 0 !important;
    user-select: none !important;
}

#servo-destek-root .icerikcim-accordion-header:hover,
#servo-destek-root #rich-content-display .icerikcim-accordion-header:hover {
    background-color: #fff7ed !important;
}

/* 5. Cevap Alanı Gizleme & Gösterme (Başlangıçta Kapalı / Active Olunca Açık) */
#servo-destek-root .icerikcim-accordion-content,
#servo-destek-root #rich-content-display .icerikcim-accordion-content {
    display: none !important;
}

#servo-destek-root .icerikcim-accordion-item.active .icerikcim-accordion-content,
#servo-destek-root .icerikcim-accordion-item.open .icerikcim-accordion-content,
#servo-destek-root .icerikcim-accordion-item.is-active .icerikcim-accordion-content,
#servo-destek-root #rich-content-display .icerikcim-accordion-item.active .icerikcim-accordion-content,
#servo-destek-root #rich-content-display .icerikcim-accordion-item.open .icerikcim-accordion-content,
#servo-destek-root .icerikcim-accordion-content.active,
#servo-destek-root .icerikcim-accordion-content.show {
    display: block !important;
    animation: servoFadeIn 0.3s ease-out !important;
}

/* 3. Sağ Taraf Ok/Artı-Eksi Simgesi (Kapalı Durum: +) */
#servo-destek-root .icerikcim-accordion-header::after,
#servo-destek-root #rich-content-display .icerikcim-accordion-header::after {
    content: "+" !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #f38725 !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
    margin-left: 0.75rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Açık / Aktif Durumda İkon Değişimi (Açık Durum: -) */
#servo-destek-root .icerikcim-accordion-item.active .icerikcim-accordion-header::after,
#servo-destek-root .icerikcim-accordion-item.open .icerikcim-accordion-header::after,
#servo-destek-root .icerikcim-accordion-item.is-active .icerikcim-accordion-header::after,
#servo-destek-root .icerikcim-accordion-header.active::after,
#servo-destek-root .icerikcim-accordion-header.open::after,
#servo-destek-root #rich-content-display .icerikcim-accordion-item.active .icerikcim-accordion-header::after,
#servo-destek-root #rich-content-display .icerikcim-accordion-item.open .icerikcim-accordion-header::after {
    content: "−" !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #f38725 !important;
}

/* 4. Soru Başlık Metni (.icerikcim-accordion-title) */
#servo-destek-root .icerikcim-accordion-title,
#servo-destek-root #rich-content-display .icerikcim-accordion-title {
    color: #111827 !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    flex: 1 !important;
    text-align: left !important;
    display: block !important;
    transition: color 0.2s ease !important;
    margin: 0 !important;
}

#servo-destek-root .icerikcim-accordion-header:hover .icerikcim-accordion-title,
#servo-destek-root #rich-content-display .icerikcim-accordion-header:hover .icerikcim-accordion-title {
    color: #f38725 !important;
}

/* 5. Cevap Alanı İç Kapsayıcısı (.icerikcim-accordion-content & .icerikcim-accordion-content-inner) */
#servo-destek-root .icerikcim-accordion-content-inner,
#servo-destek-root #rich-content-display .icerikcim-accordion-content-inner {
    padding: 1.125rem 1.25rem 1.25rem 1.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    color: #4b5563 !important;
    border-top: 1px solid #f1f5f9 !important;
    border-left: 4px solid #f38725 !important; /* Vurgulu sol marka çizgisi */
    background-color: #fafafa !important;
    margin: 0 !important;
}

#servo-destek-root .icerikcim-accordion-content-inner p,
#servo-destek-root #rich-content-display .icerikcim-accordion-content-inner p {
    color: #4b5563 !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

#servo-destek-root .icerikcim-accordion-content-inner p:last-child,
#servo-destek-root #rich-content-display .icerikcim-accordion-content-inner p:last-child {
    margin-bottom: 0 !important;
}






/* ── SERVO DESTEK FULL HEIGHT CHAT STYLES ── */
#servo-destek-root .servo-chat-card {
    min-height: 720px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-color: #ffffff !important;
    border-radius: 1.5rem !important;
}

#servo-destek-root .servo-chat-messages-area {
    min-height: 500px !important;
    max-height: 650px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
}

@media (min-height: 800px) {
    #servo-destek-root .servo-chat-card {
        min-height: 780px !important;
    }
    #servo-destek-root .servo-chat-messages-area {
        min-height: 560px !important;
        max-height: 700px !important;
    }
}

/* ─── Search Icon & Positioning Utility Fixes ───────────────────────────── */
#servo-destek-root .-translate-y-1\/2,
#sticky-chatbot-wrapper .-translate-y-1\/2,
#sticky-chat-window .-translate-y-1\/2 {
    transform: translateY(-50%) !important;
}

#servo-destek-root .inset-y-0,
#sticky-chatbot-wrapper .inset-y-0,
#sticky-chat-window .inset-y-0 {
    top: 0 !important;
    bottom: 0 !important;
}

#servo-destek-root .pointer-events-none,
#sticky-chatbot-wrapper .pointer-events-none,
#sticky-chat-window .pointer-events-none {
    pointer-events: none !important;
}
