/* =============================================================
   CGE Evaluation — Responsive CSS  v3
   ≤768px  → mobil
   769–1024px → tablet
   ============================================================= */

/* ============================================================
   0. TEMEL RESET — Taşma Engelle & Boyut Sabitle
   ============================================================ */
@media (max-width: 768px) {

    /* zoom:0.80 (site.css, 1025-1440px) mobilide sıfırla */
    /* KÖK NEDEN: html/body { display:grid } olup grid-template-columns
       tanımsız olduğu için tek "auto" sütun max-content'e (≈1440px) şişiyordu
       (grid blowout). minmax(0,1fr) sütunu konteynere kilitler -> taşma biter. */
    html {
        zoom: 1 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: clip !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: clip !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Tüm kutular border-box */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    /* Uzun kelimeler / yazılar kırılsın */
    p, li, a, span, h1, h2, h3, h4, h5 {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Media taşmasın */
    img, video, iframe, svg {
        max-width: 100% !important;
        height: auto;
    }
}

/* ============================================================
   1. HEADER — Mobilde yalnızca logo + dil seçici + hamburger
   ============================================================ */
@media (max-width: 768px) {

    header,
    header.site-header {
        height: 56px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100%; /* 100vw kaydırma çubuğu kadar taşma yapar -> 100% güvenli */
        max-width: 100%;
    }

    /* Logo küçük */
    header a > img {
        height: 20px !important;
        width: auto;
    }

    /* Header sağ div: flex row, gap küçük */
    header > div {
        gap: 6px !important;
    }

    /* Giriş/Kayıt ve Demo butonlarını header'da gizle —
       Mobile nav drawer'da zaten var */
    header button.btn-light,
    header button.btn-dark,
    header .header-account-wrap {
        display: none !important;
    }

    /* Hamburger her zaman görünür */
    .hamburger-btn {
        display: flex !important;
    }

    /* Dil seçici göster ama kompakt */
    .header-lang-btn {
        padding: 6px 8px !important;
        font-size: 12px;
    }

    .header-lang-btn svg:first-child {
        display: none; /* Globe ikonu gizle — sadece kodu göster */
    }
}

/* ============================================================
   2. COLUMNS — Tüm flex layoutlar tek sütuna
   ============================================================ */
@media (max-width: 768px) {

    .columns {
        flex-flow: column nowrap !important;
        gap: 0;
    }

    .columns > .column,
    .columns > .column-2x,
    .columns > .column-3x {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* İstatistikler mobilde tek sütun (her stat ayrı satır) */
    #statsSection {
        flex-direction: column !important;
    }

    #statsSection > .column {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px 20px !important;
        border-left: none !important;
        border-top: 2px dashed rgba(28, 26, 23, 0.15) !important;
    }

    #statsSection > .column:first-child {
        border-top: none !important;
    }
}

/* ============================================================
   2b. HERO GÖRSEL İSTİFİ — Mobilde gizle
   Mobilde hero'daki üst üste binmeli görseller gösterilmez;
   yalnızca metin + etiketler kalır (daha temiz görünüm).
   ============================================================ */
@media (max-width: 768px) {

    .hero-media-stack {
        display: none !important;
    }
}

/* ============================================================
   3. PADDING & MARGIN
   ============================================================ */
@media (max-width: 768px) {

    .ph-46 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Mobilde servis/ürün iç sayfalarında section aralıklarını sıkılaştır */
    .pv-120 { padding-top: 9px !important; padding-bottom: 9px !important; }
    .pv-100 { padding-top: 9px !important; padding-bottom: 9px !important; }
    .pv-60  { padding-top: 9px !important; padding-bottom: 9px !important; }
    .pb-80  { padding-bottom: 36px !important; }
    .pt-36  { padding-top: 20px !important; }

    .mt-150 { margin-top: 28px !important; }
    .mt-120 { margin-top: 32px !important; }
    .mt-75  { margin-top: 22px !important; }
    .mt-60  { margin-top: 16px !important; }
    .mt-40  { margin-top: 14px !important; }
}

/* ============================================================
   4. TİPOGRAFİ
   ============================================================ */
@media (max-width: 768px) {

    /* h3-40 masaüstünde letter-spacing:-2px; küçük punto serif başlıklarda
       harfler üst üste binebiliyor -> mobilde gevşet */
    .h3-40 { font-size: 22px !important; line-height: 1.3 !important; letter-spacing: -0.4px !important; }
    .h4-24 { font-size: 17px !important; line-height: 1.35 !important; }
    .h4-20 { font-size: 15px !important; }
    .text-40 { font-size: 24px !important; }

    /* Anchor chip'ler kırılsın, viewport'u taşmasın */
    a.anchor,
    .anchor {
        white-space: normal !important;
        word-break: break-word;
        max-width: 100%;
    }

    .text-line-30 {
        line-height: 2.2 !important;
    }
}

/* ============================================================
   5. HERO BÖLÜMÜ
   ============================================================ */
@media (max-width: 768px) {

    main section.hero,
    section.hero-slider-wrap {
        height: 70vh !important;
        min-height: 380px;
    }

    /* Hero içerik sütunu — tek sütun, alta yasla */
    .hero-slider-content.columns {
        position: absolute !important;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: column !important;
    }

    .hero-slider-content > .column {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-top: auto !important; /* metni hero'nun altına yasla */
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 48px !important; /* hero-dot ile metin üst üste binmesin */
    }

    .hero-dots {
        bottom: 12px;
    }

    /* Split hero: mobilde sütunlar alt alta, görsel sabit yükseklikte */
    section.hero-split > .columns.w-1440 {
        min-height: 0 !important;
    }

    section.hero-split > .columns.w-1440 > .column:first-child {
        padding-top: 32px !important;
        padding-bottom: 24px !important;
    }

    section.hero-split > .columns.w-1440 > .column:last-child {
        margin-right: 0 !important;
    }

    section.hero-split > .columns.w-1440 > .column:last-child img {
        height: 220px !important;
        object-position: center center;
    }
}

/* ============================================================
   6. İÇERİK GÖRSELLERİ (eco-consultant vb.)
   ============================================================ */
@media (max-width: 768px) {

    /* 50/50 bölümlerdeki büyük görseller */
    .column > img.border-radius-8,
    .column > .border-radius-8 {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
        display: block;
        border-radius: 10px;
    }
}

/* ============================================================
   7. HİZMET CAROUSEL — 1 kart, swipe destekli
   ============================================================ */
@media (max-width: 768px) {

    /* Carousel sütunu padding ekle */
    .bg-greenish-tiger .columns {
        flex-direction: column !important;
    }

    .bg-greenish-tiger .column.column-3x {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-top: 20px;
    }

    /* 1 kart: 100% genişlik */
    .services-slide ul.services-track li {
        flex: 0 0 100% !important;
        min-width: 0 !important;
        height: 260px !important;
    }

    .services-slide {
        touch-action: pan-x;
    }

    .carousel-controls {
        justify-content: center !important;
        margin-top: 14px;
    }

    /* Logo marquee */
    .logo-marquee__slot {
        flex: 0 0 130px !important;
        width: 130px !important;
    }

    .logo-marquee--light .logo-marquee__slot {
        flex: 0 0 168px !important;
        width: 168px !important;
        height: 72px !important;
        padding: 6px 18px !important;
    }

    .logo-marquee--light .logo-marquee__item {
        max-height: 58px !important;
    }

    .home-about-section {
        padding-top: 52px !important;
        padding-bottom: 28px !important;
    }

    .home-references-row {
        margin-top: 28px !important;
    }

    .home-services-section {
        padding-top: 48px !important;
        padding-bottom: 52px !important;
    }
}

/* ============================================================
   8. HİZMET KATEGORİLERİ — 2×2 grid
   ============================================================ */
@media (max-width: 768px) {

    ul.services-4-column {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding-left: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* S4: Kartlar mobilede tam genişlik, tek sütun */
    ul.services-4-column {
        flex-direction: column !important;
        gap: 12px !important;
    }

    ul.services-4-column > li {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-width: none !important;
        padding: 20px !important;
        margin: 0 !important;
    }

    ul.services-4-column > li .h4-24 {
        font-size: 15px !important;
        margin-top: 8px;
        line-height: 1.3;
    }

    ul.services-4-column > li p {
        font-size: 13px !important;
        line-height: 1.5;
        margin-top: 8px;
    }

    ul.services-4-column > li img {
        width: 26px !important;
        height: 26px !important;
    }

    /* Kategori altındaki butonlar alt alta */
    .bg-green-vtiger .column > p {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
    }
}

/* ============================================================
   9. NEDEN CGE — 3 Özellik listesi
   ============================================================ */
@media (max-width: 768px) {

    ul.services-3-column {
        flex-direction: column !important;
        gap: 12px !important;
    }

    ul.services-3-column > li {
        padding: 28px 20px !important;
    }
}

/* ============================================================
   10. FORMLAR
   ============================================================ */
@media (max-width: 768px) {

    .form-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .form-checkline-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-actions-inline {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}

/* ============================================================
   11. FOOTER
   ============================================================ */
@media (max-width: 768px) {

    footer .columns {
        flex-direction: column !important;
        gap: 32px;
    }

    footer .column {
        width: 100% !important;
    }

    footer .ph-46 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    footer .footer-subscribe {
        max-width: 100% !important;
    }

    footer .footer-subscribe-line {
        flex-wrap: wrap;
    }

    footer .footer-legal-list li {
        display: block !important;
        margin-bottom: 6px;
    }

    footer .footer-legal-list li + li::before {
        display: none;
    }
}

/* ============================================================
   12. INDEX SAYFASI — Özel düzenlemeler
   ============================================================ */
@media (max-width: 768px) {

    /* Sol çizgi istatistik: mobilede kaldır */
    .border-dl-2 {
        border-left: none !important;
    }

    /* SSS accordion tam genişlik */
    #index-faq-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-cta-box {
        padding: 14px 12px !important;
    }

    /* Hakkımızda: ikinci kolon yukarı kaymasin */
    .bg-white .columns > .column.mt-150 {
        margin-top: 0 !important;
    }
}

/* ============================================================
   13. TEAM ROSTER
   ============================================================ */
@media (max-width: 768px) {

    .team-roster {
        flex-direction: column !important;
        align-items: center;
        gap: 20px;
    }

    .team-roster .team-member {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
    }
}

/* ============================================================
   14. SIDEBAR + İÇERİK LAYOUT (hizmet / ürün / SSS / blog)
   ≤1024px: grid ile sidebar üstte, içerik altta — çakışma yok
   ============================================================ */
@media (max-width: 1024px) {

    .sidebar-nav-col {
        display: none !important;
    }

    /* Sticky sidebar kapalı — içerikle üst üste binmeyi önler */
    .content-sidebar-nav {
        position: static !important;
        top: auto !important;
    }

    .content-sidebar-nav ul li {
        margin-left: 0 !important;
    }

    /* Ana konteyner: flex yerine grid — her sütun kendi satırında */
    .columns.columns--sidebar,
    .columns:has(> .column .content-sidebar-nav),
    .columns:has(> .column > .content-sidebar-nav),
    .columns:has(> .column > nav.content-sidebar-nav) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 24px !important;
        align-items: start !important;
        justify-content: start !important;
    }

    .columns.columns--sidebar > .column,
    .columns:has(> .column .content-sidebar-nav) > .column,
    .columns:has(> .column > .content-sidebar-nav) > .column,
    .columns:has(> .column > nav.content-sidebar-nav) > .column {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: unset !important;
        margin-top: 0 !important;
        grid-column: 1 / -1 !important;
    }

    /* Sidebar sütunu: altta ayırıcı çizgi */
    .columns.columns--sidebar > .column:first-child,
    .columns:has(> .column .content-sidebar-nav) > .column:first-child,
    .columns:has(> .column > .content-sidebar-nav) > .column:first-child,
    .columns:has(> .column > nav.content-sidebar-nav) > .column:first-child {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
        border-bottom: 1px dashed rgba(14, 34, 24, 0.18);
    }

    /* SSS: sidebar'da zaten grup listesi var */
    .columns.columns--sidebar > .column + .column .accordion-group-label,
    .columns:has(> .column .content-sidebar-nav) > .column + .column .accordion-group-label,
    .columns:has(> .column > nav.content-sidebar-nav) > .column + .column .accordion-group-label {
        display: none !important;
    }

    .columns.columns--sidebar > .column + .column .accordion-group:first-of-type,
    .columns:has(> .column .content-sidebar-nav) > .column + .column .accordion-group:first-of-type,
    .columns:has(> .column > nav.content-sidebar-nav) > .column + .column .accordion-group:first-of-type {
        margin-top: 0 !important;
    }
}

/* ============================================================
   14b. SSS & BLOG — Mobilde masaüstü sidebar gizle
   Masaüstü (≥1025px) değişmez
   ============================================================ */
@media (max-width: 1024px) {

    .help-page-layout > .help-sidebar-col,
    .blog-page-layout > .blog-sidebar-col {
        display: none !important;
    }

    /* SSS: sidebar gizliyken grup başlıklarını içerikte göster */
    .columns.help-page-layout.columns--sidebar > .column + .column .accordion-group-label {
        display: inline-block !important;
    }

    .help-page-layout > .column + .column .accordion-group:first-of-type {
        margin-top: 0 !important;
    }
}

@media (max-width: 768px) {

    .columns.article-card-grid {
        row-gap: 32px !important;
        column-gap: 0 !important;
    }

    .columns.article-card-grid > .column {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .blog-detail-hero {
        padding-top: 48px !important;
        padding-bottom: 32px !important;
    }

    .blog-detail-hero-media {
        padding: 8px;
        border-radius: 12px;
        max-width: 100%;
    }

    .blog-detail-hero-media img {
        max-width: calc(100vw - 48px);
        max-height: 240px;
    }
}

/* ============================================================
   15. MEGA MENU — Mobilede gizle
   ============================================================ */
@media (max-width: 768px) {

    .mega-panel {
        display: none !important;
    }
}

/* ============================================================
   16. YARDIMCI SINIFLAR
   ============================================================ */
@media (max-width: 768px) {
    .d-mobile-none  { display: none !important; }
    .d-mobile-block { display: block !important; }
    .d-mobile-flex  { display: flex !important; }
    .text-mobile-center { text-align: center !important; }

    /* ============================================================
       17. USER & SURVEY PANEL SAYFALARI
       ============================================================ */
    .user-page-hero {
        padding: 28px 16px !important;
    }

    .user-page-hero h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .user-area {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 12px 36px !important;
        gap: 14px !important;
    }

    .user-area .layout--sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow: hidden;
    }

    /* Panel sidebar — mobilde açılır/kapanır */
    .user-area .panel-sidebar__toggle {
        padding: 16px 18px !important;
        cursor: pointer;
        border-bottom: 1px solid transparent;
        transition: border-color 0.28s ease;
    }

    .user-area .panel-sidebar.is-open .panel-sidebar__toggle {
        border-bottom-color: #eef0f2;
    }

    .user-area .panel-sidebar__chevron {
        display: inline-block;
    }

    .user-area .panel-sidebar.is-open .panel-sidebar__chevron {
        transform: rotate(-135deg);
        margin-top: 2px;
    }

    .user-area .panel-sidebar__body {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .user-area .panel-sidebar.is-open .panel-sidebar__body {
        grid-template-rows: 1fr;
    }

    .user-area .panel-sidebar__inner {
        overflow: hidden;
        min-height: 0;
        opacity: 0;
        transform: translateY(-8px);
        transition:
            opacity 0.28s ease,
            transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .user-area .panel-sidebar.is-open .panel-sidebar__inner {
        opacity: 1;
        transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
        .user-area .panel-sidebar__body,
        .user-area .panel-sidebar__inner,
        .user-area .panel-sidebar__toggle,
        .panel-sidebar__chevron {
            transition: none !important;
        }

        .user-area .panel-sidebar__inner {
            opacity: 1;
            transform: none;
        }
    }

    .user-area .panel-sidebar__toolbar {
        display: flex;
        justify-content: flex-end;
        padding: 0 18px 8px;
    }

    .user-area .layout--sidebar .chart-container {
        max-width: 240px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .user-area .layout--sidebar .chart-container canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .user-area .layout--content,
    .user-area .layout--content.box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 14px !important;
        box-sizing: border-box !important;
    }

    .user-area .layout--header h2 {
        font-size: 17px !important;
    }

    /* Ürün listesi — simetrik kutu boşluğu, metin sola yaslı */
    .user-area .layout--content.product--list.box {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .product--list .category {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .product--list .category li {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
        gap: 10px;
        margin-left: 0 !important;
        padding: 16px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .product--list .category li > a {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
    }

    .product--list .category li a .row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        width: 100%;
    }

    .product--list .category li a:last-child:not(:first-child) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    ul.three--column.category {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Survey form */
    .user-area .serveyform {
        max-width: 100% !important;
        padding: 0 4px 12px !important;
    }

    .user-area .serveyform-dates-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .user-area .serveyform-dates-row .serveyform-date-field {
        padding: 12px 0 !important;
        border-bottom: 1px solid #f3f4f6;
    }

    .user-area .serveyform-dates-row .serveyform-date-field:last-child {
        border-bottom: none;
    }

    .user-area .serveyform .row:has(input[type="checkbox"]) {
        align-items: flex-start !important;
    }

    .user-area .serveyform img[style*="float"] {
        float: none !important;
        display: block;
        margin: 0 0 10px !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .user-area .serveyform button[type="button"],
    .user-area .serveyform .row > button,
    .user-area .serveyform .row > input[type="submit"],
    .user-area .cge--form input[type="submit"] {
        width: 100% !important;
        justify-content: center;
    }

    /* Kendo grid / tablo alanları */
    .user-area .layout--content > div[style*="height:500px"],
    .user-area .layout--content > div > div[style*="height:500px"] {
        height: auto !important;
        min-height: 300px;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .user-area .k-grid,
    .user-area .k-widget.k-grid {
        max-width: 100% !important;
    }

    .user-area .k-grid table {
        min-width: 560px;
    }

    .user-area .k-grid .k-toolbar {
        flex-wrap: wrap !important;
        gap: 6px;
        height: auto !important;
        padding: 8px !important;
    }

    .user-area .k-grid .k-toolbar .k-button {
        margin: 2px 0 !important;
    }

    .user-area .k-tabstrip > .k-tabstrip-items-wrapper .k-tabstrip-items {
        flex-wrap: wrap !important;
    }

    .user-area .k-tabstrip .k-tabstrip-items .k-item {
        flex: 1 1 auto;
        min-width: 0;
    }

    .user-area .div-servey,
    .user-area #panelbar,
    .user-area .k-panelbar {
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Survey dashboard */
    .user-area .db-content {
        padding: 14px 10px !important;
        gap: 20px !important;
    }

    .user-area .db-summary-stats {
        flex-direction: column !important;
    }

    .user-area .db-stat-card {
        min-width: 0 !important;
        flex: 1 1 100% !important;
        padding: 16px 18px !important;
    }

    .user-area .db-stat-value {
        font-size: 30px !important;
    }

    .user-area .db-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .user-area .db-table {
        min-width: 520px;
    }

    .user-area .db-chart-card canvas,
    .user-area .db-chart-wrap canvas {
        height: 240px !important;
        max-height: 240px !important;
    }

    /* Masaüstüne özel (mobilede göster) */
    .d-desktop-none { display: block !important; }

    /* Secondary nav (scroll anchors) mobilede gereksiz */
    nav.secondary   { display: none !important; }

    /* ---- S1: "CGE Evaluation" butonu — mobilde tam genişlik solid yeşil pill ---- */
    #s1-cge-btn {
        background-image: none !important;
        background-color: var(--bg-green) !important;
        color: #fff !important;
        padding: 14px 24px !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin-right: 0 !important;
        text-align: center !important;
    }

    #s1-cge-btn::before {
        content: '\25CE';
        font-size: 16px;
        opacity: 0.9;
    }

    /* ---- S2: "Tüm Hizmetleri Keşfet" — mobilde tam genişlik solid yeşil pill ---- */
    #s2-explore-btn {
        background-image: none !important;
        background-color: var(--bg-green) !important;
        color: #fff !important;
        padding: 14px 24px !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    #s2-explore-btn::before {
        content: '\25CE';
        font-size: 16px;
        opacity: 0.9;
    }

    /* ---- S4: Kategori butonları — mobilde bordered pill ---- */
    #s4-cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    #s4-cta-buttons a.anchor {
        background-image: none !important;
        background-color: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.9) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 26px !important;
        gap: 8px !important;
    }

    #s4-cta-buttons a.anchor:first-child {
        background-color: var(--bg-green) !important;
        border-color: var(--bg-greenish-solid) !important;
    }

    #s4-cta-buttons a.anchor:first-child::before {
        content: '\25CE';
        font-size: 15px;
        opacity: 0.9;
    }

    #s4-cta-buttons a.anchor:last-child::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 9px;
        border-color: transparent transparent transparent #fff;
        margin-right: 2px;
    }

    /* S3: Feature list items — ikon + başlık yan yana, açıklama altında */
    ul.services-3-column > li {
        align-items: flex-start !important;
        padding: 20px 0 !important;
        background: none !important;
        border-radius: 0 !important;
        border-top: 2px dashed rgba(28, 26, 23, 0.15) !important;
        gap: 0 !important;
    }

    ul.services-3-column > li:first-child {
        border-top: none !important;
        padding-top: 0 !important;
    }

    /* ---- SSS: h3 başlık daha büyük ---- */
    #sikcasorulansorular ~ h3.h3-40 {
        font-size: 26px !important;
    }

    /* ---- SSS: Accordion içerik metni koyu (yeşil override engelle) ---- */
    .accordion-item-content,
    .accordion-item-content p,
    .accordion-item-content li,
    .accordion-item-content span {
        color: rgba(14, 34, 24, 0.84) !important;
    }

    /* ---- SSS: Açık accordion item × ikonu göster ---- */
    .accordion-item[open] > summary::after {
        content: '\00D7' !important;
        transform: translateY(-50%) !important;
        color: var(--bg-green) !important;
        font-size: 20px !important;
    }

    .accordion-item[open] > summary {
        color: rgba(14, 34, 24, 0.95) !important;
    }

    /* Tek sütunlu hero alanlarında CTA ortalı (SSS vb.) */
    .columns > .column:only-child {
        text-align: center !important;
    }

    #help-hero-cta,
    #blog-hero-cta {
        display: flex !important;
        justify-content: center !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }

    #help-hero-cta .anchor,
    #blog-hero-cta .anchor {
        margin-right: 0 !important;
    }
}

/* Masaüstünde d-desktop-none gizli kalır */
@media (min-width: 769px) {
    .d-desktop-none { display: none !important; }
}

/* ============================================================
   18. ORGANİZASYON BÖLÜMÜ — Yatay kaydırmalı kart listesi
   ============================================================ */
@media (max-width: 768px) {

    /* Sadece team satırları (mt-40 sınıfıyla gelir), başlık satırı değil */
    #org-team-section .columns.mt-40 {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 12px;
        /* Scrollbar gizle */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* w-1440 max-width kısıtlamasını kaldır */
        max-width: 100vw !important;
    }

    #org-team-section .columns.mt-40::-webkit-scrollbar {
        display: none;
    }

    /* Her team member kartı ~80vw genişlikte */
    #org-team-section .columns.mt-40 > .column {
        flex: 0 0 80vw !important;
        width: 80vw !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 20px !important;
        padding-right: 12px !important;
        scroll-snap-align: start;
    }

    /* Görsel tam genişlik */
    #org-team-section .columns.mt-40 > .column img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }

    /* Satırlar arası boşluk */
    #org-team-section .columns.mt-40 + .columns.mt-40 {
        margin-top: 20px !important;
    }
}

/* ============================================================
   16b. CSS GRID BİLEŞENLERİ — Sütun sayısını mobilde indir
   (.columns/.column esnek sistemi zaten stack oluyor; ama bu
    CSS `grid` bileşenleri sütun sayısını koruyup sağdan taşıyor)
   ============================================================ */
@media (max-width: 768px) {

    /* İletişim ofis kartları + raporlar (3 sütun -> 1 sütun) */
    .office-card-grid,
    ul.three--column.category {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .office-card {
        padding: 18px 16px !important;
    }

    /* Ofis başlığı (.anchor chip) tek satıra sığsın, dikey hap olmasın */
    .office-card > .anchor {
        display: inline-block !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    /* Logo bulutu (7 sütun -> 3 sütun) */
    .logo-cloud-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 480px) {
    .logo-cloud-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================================
   17. TABLET (769px – 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Grid blowout engeli (mobil ile aynı kök neden) */
    html, body {
        max-width: 100vw !important;
        overflow-x: clip !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ph-46 {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .pv-120 { padding-top: 80px !important; padding-bottom: 80px !important; }
    .h3-40  { font-size: 28px !important; }

    ul.services-4-column {
        flex-wrap: wrap !important;
        gap: 14px !important;
    }

    ul.services-4-column > li {
        width: calc(50% - 7px) !important;
        height: auto !important;
        min-height: 220px !important;
    }

    .services-slide ul.services-track li {
        flex: 0 0 50% !important;
    }

    .column > img.border-radius-8,
    .column > .border-radius-8 {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* User & Survey panel — tablet */
    .user-area {
        flex-direction: column !important;
        max-width: 100% !important;
        padding: 28px 20px 40px !important;
        gap: 16px !important;
    }

    .user-area .layout--sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .user-area .layout--content {
        width: 100% !important;
        max-width: 100% !important;
    }

    ul.three--column.category {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}