/* ================================================================
   MAT-CUSTOM.CSS — Mind Arts Teknoloji
   Tüm özel bileşen stilleri bu dosyada toplanmıştır.
   Marka Renkleri:
     Birincil Mavi  : #006aec
     Koyu Lacivert  : #0d2235
     Altın Aksanı   : #cca776
     Gövde Metni    : #5f7586
     Gradient       : linear-gradient(90deg,#005cea 0%,#00c5fb 100%)
================================================================ */

/* ────────────────────────────────────────────────────────────
   1. TEMEL YARDIMCI STİLLER
──────────────────────────────────────────────────────────── */
.section-pad { padding: 80px 0; }
.mat-bg-light { background-color: #f5f8fc; }
.mat-color-primary { color: #006aec; }
.mat-section-heading {
    font-size: 32px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 12px;
}
.mat-section-desc {
    font-size: 16px;
    color: #5f7586;
    margin-bottom: 0;
}

/* ────────────────────────────────────────────────────────────
   1a. GLOBAL TİPOGRAFİ DÜZELTMELERİ
   (Şablonun yalnızca belirli parent'larda tanımladığı
   sınıflar için evrensel geçersiz kılmalar)
──────────────────────────────────────────────────────────── */

/* sub-title — şablonda sadece .title-section içinde tanımlı,
   burada her bağlamda çalışacak şekilde global olarak ekliyoruz */
.sub-title {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: #006aec !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
}

/* h2.title / h2.title-big — şablonun parent-bağımlı stillerini
   tüm sayfa bağlamları için evrensel olarak tanımlıyoruz.
   Şablonun daha spesifik kuralları (who-we-are vb.) kendi
   context'lerinde hâlâ geçerli olacaktır. */
.section-pad h2.title,
.mat-bg-light h2.title,
.get-in-touch h2.title,
.contact h2.title,
.mat-faq-section h2.title,
.title-section h2.title {
    font-size: 30px;
    font-weight: 700;
    color: #0d2235;
    line-height: 1.3;
    margin-bottom: 16px;
    margin-top: 0;
}

.section-pad h2.title-big,
.mat-bg-light h2.title-big,
.get-in-touch h2.title-big,
.contact h2.title-big,
.title-section h2.title-big {
    font-size: 36px;
    font-weight: 800;
    color: #0d2235;
    line-height: 1.25;
    margin-bottom: 20px;
    margin-top: 0;
}

/* Feature list rengi — şablonun link rengi tarafından eziliyor */
.mat-feature-list li,
.mat-feature-list li strong,
.mat-feature-list li span {
    color: #0d2235 !important;
}
.mat-feature-list li::before {
    color: #006aec !important;
}

/* ────────────────────────────────────────────────────────────
   1b. NAVİGASYON — (temizlendi, tüm menü şablonun orijinal
   stiliyle tutarlı bırakıldı)
──────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────
   2. BUTONLAR
──────────────────────────────────────────────────────────── */
.mat-btn-outline {
    display: inline-block;
    padding: 12px 28px;
    border: 2px solid #006aec;
    color: #006aec;
    border-radius: 4px;
    font-weight: 600;
    font-size: 15px;
    transition: all .3s ease;
    cursor: pointer;
}
.mat-btn-outline:hover {
    background: #006aec;
    color: #fff;
}
.mat-btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(90deg,#005cea 0%,#00c5fb 100%);
    color: #fff !important;
    border-radius: 4px;
    font-weight: 600;
    font-size: 15px;
    transition: all .3s ease;
}
.mat-btn-primary:hover { opacity: .88; color: #fff; }
.mat-btn-sm {
    display: inline-block;
    padding: 9px 20px;
    background: linear-gradient(90deg,#005cea 0%,#00c5fb 100%);
    color: #fff !important;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .3s;
    margin-top: 14px;
}
.mat-btn-sm:hover { opacity: .85; color: #fff; }
.mat-btn-danger {
    display: inline-block;
    padding: 12px 28px;
    background: #e74c3c;
    color: #fff !important;
    border-radius: 4px;
    font-weight: 600;
    font-size: 15px;
    transition: opacity .3s;
}
.mat-btn-danger:hover { opacity: .88; color: #fff; }

/* ────────────────────────────────────────────────────────────
   3. ÖZELLİK LİSTESİ (mat-feature-list)
──────────────────────────────────────────────────────────── */
.mat-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mat-feature-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    color: #0d2235;
    font-size: 15px;
    line-height: 1.6;
}
.mat-feature-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #006aec;
    font-weight: 700;
    font-size: 16px;
}

/* ────────────────────────────────────────────────────────────
   4. İSTATİSTİK KUTULARI
──────────────────────────────────────────────────────────── */
/* Siber Güvenlik sayfası */
.mat-stats-box {
    background: #fff;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 6px 30px rgba(0,106,236,.10);
    margin-top: 20px;
}
.mat-stat-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #e8edf3;
}
.mat-stat-item:last-child { border-bottom: none; }
.mat-stat-num {
    font-size: 34px;
    font-weight: 800;
    color: #006aec;
    min-width: 100px;
    line-height: 1.1;
}
.mat-stat-label {
    font-size: 14px;
    color: #5f7586;
    line-height: 1.5;
    padding-top: 4px;
}

/* Eğitim sayfası istatistikleri */
.mat-edu-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}
.mat-edu-stat-item {
    background: #fff;
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 4px 18px rgba(0,106,236,.08);
    display: flex;
    align-items: center;
    gap: 18px;
}
.mat-edu-stat-val {
    font-size: 36px;
    font-weight: 800;
    color: #006aec;
    min-width: 90px;
}
.mat-edu-stat-lbl {
    font-size: 14px;
    color: #5f7586;
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────
   5. MSP KPI SATIRI
──────────────────────────────────────────────────────────── */
.mat-msp-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.mat-msp-kpi {
    flex: 1 1 110px;
    background: #fff;
    border-radius: 10px;
    padding: 18px 14px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,106,236,.08);
}
.mat-msp-kpi-val {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: #006aec;
    line-height: 1.1;
}
.mat-msp-kpi-lbl {
    display: block;
    font-size: 12px;
    color: #5f7586;
    margin-top: 6px;
}

/* ────────────────────────────────────────────────────────────
   6. MSP PAKET KARTLARI
──────────────────────────────────────────────────────────── */
.mat-pkg-row { margin-top: 40px; }
.mat-pkg-card-full {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 30px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .3s, box-shadow .3s;
    position: relative;
    margin-bottom: 30px;
}
.mat-pkg-card-full:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0,106,236,.15);
}
.mat-pkg-card-full--featured {
    border: 2px solid #006aec;
    transform: scale(1.03);
}
.mat-pkg-card-full--featured:hover {
    transform: scale(1.03) translateY(-6px);
}
.mat-pkg-best-value {
    background: linear-gradient(90deg,#005cea 0%,#00c5fb 100%);
    color: #fff;
    text-align: center;
    padding: 7px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
}
.mat-pkg-header {
    padding: 28px 28px 20px;
}
.mat-pkg-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 6px;
}
.mat-pkg-header p {
    font-size: 13px;
    color: #5f7586;
    margin: 0;
}
.mat-pkg-header--basic { border-top: 4px solid #869aaf; }
.mat-pkg-header--pro   { border-top: 4px solid #006aec; }
.mat-pkg-header--enterprise { border-top: 4px solid #0d2235; }

.mat-pkg-features-full {
    padding: 0 28px 24px;
    flex: 1;
    list-style: none;
    margin: 0;
}
.mat-pkg-features-full li {
    padding: 9px 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: 14px;
    color: #0d2235;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mat-pkg-features-full li:last-child { border-bottom: none; }
.mat-pkg-features-full li [class^="icon-"] {
    color: #006aec;
    font-size: 16px;
    min-width: 18px;
}
.mat-pkg-btn-full {
    display: block;
    text-align: center;
    padding: 14px 0;
    background: #f5f8fc;
    color: #006aec !important;
    font-weight: 700;
    font-size: 15px;
    border-top: 1px solid #e8edf3;
    transition: background .3s, color .3s;
}
.mat-pkg-btn-full:hover { background: #006aec; color: #fff !important; }
.mat-pkg-btn-full--featured {
    background: linear-gradient(90deg,#005cea 0%,#00c5fb 100%);
    color: #fff !important;
}
.mat-pkg-btn-full--featured:hover { opacity: .88; color: #fff !important; }

/* ────────────────────────────────────────────────────────────
   7. EĞİTİM KART DETAY
──────────────────────────────────────────────────────────── */
.mat-edu-detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    display: flex;
    gap: 20px;
    border-left: 4px solid #006aec;
    transition: transform .3s, box-shadow .3s;
}
.mat-edu-detail-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,106,236,.12);
}
.mat-edu-detail-num {
    font-size: 48px;
    font-weight: 900;
    color: #e8edf3;
    line-height: 1;
    min-width: 52px;
}
.mat-edu-detail-content { flex: 1; }
.mat-edu-detail-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 6px;
}
.mat-edu-target {
    font-size: 13px;
    color: #006aec;
    background: #eef5fd;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
}
.mat-edu-topics {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}
.mat-edu-topics li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: #5f7586;
    margin-bottom: 6px;
    line-height: 1.5;
}
.mat-edu-topics li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #006aec;
}
.mat-edu-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.mat-edu-meta span {
    font-size: 12px;
    background: #f5f8fc;
    padding: 4px 10px;
    border-radius: 4px;
    color: #0d2235;
    font-weight: 600;
}

/* ────────────────────────────────────────────────────────────
   8. UYUMLULUK BİLEŞENLERİ
──────────────────────────────────────────────────────────── */
.mat-compliance-badge-large {
    display: inline-block;
    background: linear-gradient(90deg,#005cea 0%,#00c5fb 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
    text-transform: uppercase;
}
.mat-compliance-quick-links {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    border-top: 4px solid #006aec;
}
.mat-compliance-quick-links h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 14px;
}
.mat-compliance-quick-links ul { list-style: none; padding: 0; margin: 0; }
.mat-compliance-quick-links ul li { margin-bottom: 8px; }
.mat-compliance-quick-links ul li a {
    font-size: 14px;
    color: #006aec;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mat-compliance-quick-links ul li a::before { content: '→'; }
.mat-compliance-quick-links ul li a:hover { color: #0d2235; }

.mat-compliance-process {
    background: #f5f8fc;
    border-radius: 12px;
    padding: 28px;
}
.mat-compliance-process h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 20px;
}
.mat-process-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #dde4ed;
}
.mat-process-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.mat-step-num {
    background: #006aec;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.mat-process-step div strong {
    display: block;
    font-size: 15px;
    color: #0d2235;
    margin-bottom: 3px;
}
.mat-process-step div p {
    font-size: 13px;
    color: #5f7586;
    margin: 0;
    line-height: 1.5;
}

.mat-benefit-box {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.mat-benefit-box h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 18px;
}
.mat-benefit-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0f2f5;
}
.mat-benefit-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mat-benefit-item [class^="icon-"] {
    font-size: 22px;
    color: #006aec;
    min-width: 28px;
    margin-top: 2px;
}
.mat-benefit-item strong {
    display: block;
    font-size: 15px;
    color: #0d2235;
    margin-bottom: 3px;
}
.mat-benefit-item p {
    font-size: 13px;
    color: #5f7586;
    margin: 0;
    line-height: 1.5;
}

.mat-target-sectors {
    margin-top: 16px;
    font-size: 13px;
    color: #5f7586;
    background: #f5f8fc;
    padding: 10px 14px;
    border-radius: 6px;
    line-height: 1.6;
}

.mat-service-mini-card {
    background: #fff;
    border-radius: 10px;
    padding: 24px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    border-top: 3px solid #006aec;
}
.mat-service-mini-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 10px;
}
.mat-service-mini-card p {
    font-size: 14px;
    color: #5f7586;
    line-height: 1.6;
    margin: 0;
}

/* ────────────────────────────────────────────────────────────
   8b. SERVİS KART BLOKLARI (Yeniden Tasarım)
──────────────────────────────────────────────────────────── */

/* Servis bölümünü çevreleyen wrapper */
.mat-service-block {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    margin-bottom: 32px;
}

/* Üstteki renkli header şeridi */
.mat-service-block-header {
    background: linear-gradient(90deg, #0d2235 0%, #1a3a58 100%);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.mat-service-block-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #005cea 0%, #00c5fb 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mat-service-block-icon {
    font-size: 22px;
    color: rgba(255,255,255,.50);
    flex-shrink: 0;
}
.mat-service-block-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.mat-service-block-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin: 2px 0 0;
}

/* Kart gövdesi */
.mat-service-block-body {
    padding: 28px 28px 24px;
}
.mat-service-block-body p {
    font-size: 15px;
    color: #5f7586;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Görsel tarafı */
.mat-service-block-visual {
    position: relative;
    height: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mat-service-block-visual img {
    border-radius: 12px;
    width: 100%;
    object-fit: cover;
    flex: 1;
    min-height: 200px;
}

/* Info box (teslim edilenler, metodoloji vb.) */
.mat-info-box {
    background: #f5f8fc;
    border-radius: 10px;
    padding: 18px 20px;
}
.mat-info-box-title {
    font-size: 13px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mat-info-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mat-info-box ul li {
    font-size: 13px;
    color: #5f7586;
    padding: 5px 0;
    border-bottom: 1px solid #e8edf3;
    padding-left: 16px;
    position: relative;
}
.mat-info-box ul li:last-child { border-bottom: none; }
.mat-info-box ul li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #006aec;
    font-size: 11px;
    top: 6px;
}

/* Metrik kutusu (SOC müdahale süreleri vb.) */
.mat-metric-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.mat-metric-box {
    flex: 1;
    min-width: 80px;
    text-align: center;
    background: #f5f8fc;
    border-radius: 8px;
    padding: 14px 8px;
}
.mat-metric-val {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #006aec;
    line-height: 1.1;
}
.mat-metric-lbl {
    display: block;
    font-size: 11px;
    color: #5f7586;
    margin-top: 4px;
    line-height: 1.3;
}

/* Framework/badge satırı */
.mat-fw-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.mat-fw-badge {
    padding: 4px 12px;
    background: #eef5fd;
    color: #006aec;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
}

/* Acil Müdahale kırmızı banner */
.mat-emergency-bar {
    background: #fff5f5;
    border: 1px solid #fccaca;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}
.mat-emergency-bar i {
    color: #c0392b;
    font-size: 18px;
    flex-shrink: 0;
}
.mat-emergency-bar p {
    font-size: 14px;
    color: #c0392b;
    font-weight: 700;
    margin: 0 !important;
}
.mat-emergency-bar a {
    color: #c0392b !important;
    font-weight: 800;
    text-decoration: underline;
}

/* ────────────────────────────────────────────────────────────
   9. SERVİS GÖRSEL ALANI
──────────────────────────────────────────────────────────── */
.mat-service-visual {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    margin-top: 20px;
}
.mat-service-visual img { display: block; width: 100%; }

/* ────────────────────────────────────────────────────────────
   10. WHATSAPP YÜZEN BUTON
──────────────────────────────────────────────────────────── */
.mat-whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.mat-wa-btn {
    width: 58px;
    height: 58px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(37,211,102,.40);
    transition: transform .3s, box-shadow .3s;
    cursor: pointer;
    text-decoration: none;
}
.mat-wa-btn:hover {
    transform: scale(1.10);
    box-shadow: 0 8px 28px rgba(37,211,102,.55);
}
.mat-wa-btn svg { width: 30px; height: 30px; fill: #fff; }
.mat-wa-tooltip {
    background: #0d2235;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
.mat-whatsapp-float:hover .mat-wa-tooltip {
    opacity: 1;
    transform: translateX(0);
}
@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.mat-wa-btn { animation: wa-pulse 2s infinite; }

/* ────────────────────────────────────────────────────────────
   11. SERVİS SAYFASI HIZLI NAV (Sticky)
──────────────────────────────────────────────────────────── */
.mat-service-quicknav {
    background: #fff;
    border-bottom: 1px solid #e8edf3;
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.mat-service-quicknav .container {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.mat-service-quicknav .container::-webkit-scrollbar { display: none; }
.mat-service-quicknav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #5f7586;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color .3s, border-color .3s;
    text-decoration: none;
}
.mat-service-quicknav a:hover,
.mat-service-quicknav a.active {
    color: #006aec;
    border-bottom-color: #006aec;
}

/* ────────────────────────────────────────────────────────────
   12. "KİMLER İÇİN?" BADGES
──────────────────────────────────────────────────────────── */
.mat-for-whom {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 20px;
}
.mat-for-whom-title {
    font-size: 13px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 8px;
}
.mat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #d0dcee;
    color: #0d2235;
    background: #f5f8fc;
}
.mat-badge::before { content: '✓'; color: #006aec; font-weight: 800; }

/* ────────────────────────────────────────────────────────────
   13. FAQ AKORDEONu
──────────────────────────────────────────────────────────── */
.mat-faq-section {
    padding: 80px 0;
}
.mat-faq-section .mat-section-heading { margin-bottom: 36px; }
.mat-faq-item {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
    border: 1px solid #e8edf3;
}
.mat-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #0d2235;
    transition: background .2s;
    user-select: none;
    gap: 12px;
}
.mat-faq-question:hover { background: #f5f8fc; }
.mat-faq-question.open { color: #006aec; background: #f0f6ff; }
.mat-faq-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e8edf3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #006aec;
    flex-shrink: 0;
    transition: transform .3s, background .3s;
}
.mat-faq-question.open .mat-faq-icon {
    transform: rotate(45deg);
    background: #006aec;
    color: #fff;
}
.mat-faq-answer {
    display: none;
    padding: 0 24px 20px;
    font-size: 14px;
    color: #5f7586;
    line-height: 1.8;
}
.mat-faq-answer.open { display: block; }

/* ────────────────────────────────────────────────────────────
   14. NEDEN BİZ — KARŞILAŞTIRMA KUTUSU
──────────────────────────────────────────────────────────── */
.mat-why-us-box {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 6px 28px rgba(0,0,0,.08);
    margin-top: 20px;
}
.mat-why-us-box h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f2f5;
}
.mat-compare-table {
    width: 100%;
    border-collapse: collapse;
}
.mat-compare-table th {
    background: #f5f8fc;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #0d2235;
    text-align: left;
    border-bottom: 2px solid #e8edf3;
}
.mat-compare-table th.mat-col-us {
    background: linear-gradient(90deg,#005cea 0%,#00c5fb 100%);
    color: #fff;
    text-align: center;
}
.mat-compare-table td {
    padding: 11px 16px;
    font-size: 14px;
    color: #5f7586;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}
.mat-compare-table td.mat-col-us {
    text-align: center;
    color: #1ab25c;
    font-size: 18px;
    font-weight: 700;
}
.mat-compare-table td.mat-col-other {
    text-align: center;
    color: #c0392b;
    font-size: 18px;
}
.mat-compare-table tr:last-child td { border-bottom: none; }

/* ────────────────────────────────────────────────────────────
   15. SÜREÇ ADIM ŞERIDI (Yatay)
──────────────────────────────────────────────────────────── */
.mat-howto-strip {
    background: #0d2235;
    padding: 60px 0;
}
.mat-howto-strip .mat-section-heading { color: #fff; }
.mat-howto-steps {
    display: flex;
    gap: 0;
    margin-top: 40px;
    position: relative;
}
.mat-howto-steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(255,255,255,.15);
}
.mat-howto-step {
    flex: 1;
    text-align: center;
    padding: 0 16px;
    position: relative;
}
.mat-howto-num {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(90deg,#005cea 0%,#00c5fb 100%);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
    z-index: 1;
}
.mat-howto-step h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.mat-howto-step p {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────
   16. FORMAT KARŞILAŞTIRMA KARTLARI (Eğitim)
──────────────────────────────────────────────────────────── */
.mat-format-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    height: 100%;
    border-top: 4px solid #e8edf3;
    transition: border-color .3s, transform .3s;
    margin-bottom: 24px;
}
.mat-format-card:hover {
    border-top-color: #006aec;
    transform: translateY(-4px);
}
.mat-format-icon {
    font-size: 40px;
    margin-bottom: 14px;
    display: block;
}
.mat-format-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 10px;
}
.mat-format-card p {
    font-size: 14px;
    color: #5f7586;
    line-height: 1.6;
    margin: 0;
}
.mat-format-card ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    text-align: left;
}
.mat-format-card ul li {
    font-size: 13px;
    color: #5f7586;
    padding: 5px 0;
    border-bottom: 1px solid #f0f2f5;
    padding-left: 18px;
    position: relative;
}
.mat-format-card ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #006aec;
    font-weight: 700;
}

/* ────────────────────────────────────────────────────────────
   17. PARTNER LOGO ŞERİDİ
──────────────────────────────────────────────────────────── */
.mat-partners-strip {
    background: #f5f8fc;
    padding: 48px 0;
    border-top: 1px solid #e8edf3;
    border-bottom: 1px solid #e8edf3;
}
.mat-partners-strip .mat-section-heading { font-size: 22px; }
.mat-partners-logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 28px;
}
.mat-partner-logo {
    background: #fff;
    border-radius: 8px;
    padding: 14px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    min-height: 60px;
    transition: box-shadow .3s, transform .3s;
}
.mat-partner-logo:hover {
    box-shadow: 0 6px 20px rgba(0,106,236,.12);
    transform: translateY(-2px);
}
.mat-partner-logo span {
    font-size: 15px;
    font-weight: 800;
    color: #0d2235;
    letter-spacing: .5px;
}

/* ────────────────────────────────────────────────────────────
   18. ANASAYFA — NEDEN BİZ SEKSİYONU
──────────────────────────────────────────────────────────── */
.mat-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
    margin-top: 40px;
}
.mat-why-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    transition: transform .3s, box-shadow .3s;
}
.mat-why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0,106,236,.12);
}
.mat-why-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg,#eef5fd 0%,#d6ebff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.mat-why-icon [class^="icon-"],
.mat-why-icon i {
    font-size: 28px;
    color: #006aec;
}
.mat-why-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 8px;
}
.mat-why-card p {
    font-size: 14px;
    color: #5f7586;
    line-height: 1.6;
    margin: 0;
}

/* ────────────────────────────────────────────────────────────
   19. ANASAYFA — HİZMET ALANLARI CTA ŞERİDİ
──────────────────────────────────────────────────────────── */
.mat-service-cta-strip {
    background: #0d2235;
    padding: 60px 0;
}
.mat-service-cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 36px;
}
.mat-service-cta-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: background .3s, border-color .3s, transform .3s;
    text-decoration: none;
    display: block;
}
.mat-service-cta-card:hover {
    background: rgba(0,106,236,.20);
    border-color: #006aec;
    transform: translateY(-4px);
}
.mat-service-cta-card [class^="icon-"],
.mat-service-cta-card i {
    font-size: 36px;
    color: #00c5fb;
    margin-bottom: 12px;
    display: block;
}
.mat-service-cta-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.mat-service-cta-card p {
    font-size: 12px;
    color: rgba(255,255,255,.60);
    margin: 0;
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────
   20. HAKKIMIZDA — ZİRVE İSTATİSTİK SATIRI
──────────────────────────────────────────────────────────── */
.mat-about-stats-bar {
    background: linear-gradient(90deg,#005cea 0%,#00c5fb 100%);
    padding: 40px 0;
}
.mat-about-stats-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    text-align: center;
}
.mat-about-stat {
    flex: 1 1 160px;
}
.mat-about-stat-num {
    display: block;
    font-size: 44px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.mat-about-stat-lbl {
    display: block;
    font-size: 14px;
    color: rgba(255,255,255,.80);
    margin-top: 6px;
}

/* ────────────────────────────────────────────────────────────
   21. HAKKIMIZDA — ZAMAN ÇİZELGESİ
──────────────────────────────────────────────────────────── */
.mat-timeline { position: relative; padding: 20px 0; }
.mat-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    background: #e8edf3;
    transform: translateX(-50%);
}
.mat-timeline-item {
    display: flex;
    justify-content: flex-end;
    padding-right: calc(50% + 28px);
    margin-bottom: 32px;
    position: relative;
}
.mat-timeline-item:nth-child(even) {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: calc(50% + 28px);
}
.mat-timeline-dot {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #006aec;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #006aec;
    z-index: 1;
}
.mat-timeline-content {
    background: #fff;
    border-radius: 10px;
    padding: 18px 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
    max-width: 380px;
    width: 100%;
}
.mat-timeline-year {
    font-size: 12px;
    font-weight: 700;
    color: #006aec;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.mat-timeline-content h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 5px;
}
.mat-timeline-content p {
    font-size: 13px;
    color: #5f7586;
    margin: 0;
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────
   22. İLETİŞİM SAYFASI İYİLEŞTİRMELERİ
──────────────────────────────────────────────────────────── */
.mat-contact-channel {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    text-decoration: none;
    transition: box-shadow .3s, transform .3s;
}
.mat-contact-channel:hover {
    box-shadow: 0 6px 22px rgba(0,106,236,.12);
    transform: translateY(-2px);
}
.mat-contact-channel-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}
.mat-contact-channel-icon.phone { background: #eef5fd; color: #006aec; }
.mat-contact-channel-icon.email { background: #fff3e6; color: #f7941d; }
.mat-contact-channel-icon.wa    { background: #e6faf0; color: #25d366; }
.mat-contact-channel-text strong {
    display: block;
    font-size: 13px;
    color: #5f7586;
}
.mat-contact-channel-text span {
    font-size: 15px;
    font-weight: 700;
    color: #0d2235;
}
.mat-response-promise {
    background: #f0f6ff;
    border: 1px solid #d0e4ff;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 13px;
    color: #006aec;
    font-weight: 600;
    text-align: center;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ────────────────────────────────────────────────────────────
   23. STANDARTLAR ÖZET TABLOSU
──────────────────────────────────────────────────────────── */
.mat-standards-table-wrap { overflow-x: auto; margin-top: 32px; }
.mat-standards-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}
.mat-standards-table thead th {
    background: #0d2235;
    color: #fff;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}
.mat-standards-table tbody tr { transition: background .2s; }
.mat-standards-table tbody tr:hover { background: #f5f8fc; }
.mat-standards-table tbody td {
    padding: 14px 18px;
    font-size: 14px;
    color: #5f7586;
    border-bottom: 1px solid #e8edf3;
    vertical-align: middle;
}
.mat-standards-table tbody td:first-child {
    font-weight: 700;
    color: #0d2235;
}
.mat-standards-table .mat-std-badge {
    display: inline-block;
    background: linear-gradient(90deg,#005cea 0%,#00c5fb 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
}
.mat-standards-table a {
    font-size: 13px;
    color: #006aec;
    font-weight: 600;
}

/* ────────────────────────────────────────────────────────────
   24. SERTİFİKA & PARTNER ROW (Hakkımızda)
──────────────────────────────────────────────────────────── */
.mat-cert-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}
.mat-cert-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 8px;
    padding: 12px 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border-left: 3px solid #006aec;
}
.mat-cert-badge i {
    font-size: 22px;
    color: #006aec;
}
.mat-cert-badge span {
    font-size: 13px;
    font-weight: 700;
    color: #0d2235;
}

/* ────────────────────────────────────────────────────────────
   25. FORM KARTI (ucretsiz-guvenlik-degerlendirmesi vb.)
──────────────────────────────────────────────────────────── */
.mat-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, .09);
    border-top: 4px solid #006aec;
}
.mat-form-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0d2235;
    margin-bottom: 20px;
}
.mat-form-card input,
.mat-form-card select,
.mat-form-card textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    font-size: 14px;
    color: #0d2235;
    background: #fff;
    transition: border-color .25s, box-shadow .25s;
    margin-bottom: 16px;
}
.mat-form-card input:focus,
.mat-form-card select:focus,
.mat-form-card textarea:focus {
    outline: none;
    border-color: #006aec;
    box-shadow: 0 0 0 3px rgba(0, 106, 236, .12);
}

/* ────────────────────────────────────────────────────────────
   25a. KOYU ARKA PLAN SEKSİYONLARI — TİPOGRAFİ İSTİSNALARI
   (mat-custom.css'in global !important kuralları koyu bölümlerde
   yanlış renk uyguluyor; bu blok onları geçersiz kılar)
──────────────────────────────────────────────────────────── */

/* Koyu arka plan seksiyonlarında sub-title beyaz/açık renkte olmalı */
.mat-howto-strip .sub-title,
.mat-service-cta-strip .sub-title {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* Koyu bölümlerde section-heading beyaz kalır (zaten .mat-section-heading tanımlı)
   ancak sub-title ile tutarlı olması için ek kurallar */
.mat-howto-strip .mat-section-heading {
    color: #fff;
}

/* ────────────────────────────────────────────────────────────
   25. RESPONSIVE DÜZENLEMELER
──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .mat-timeline::before { left: 20px; }
    .mat-timeline-item,
    .mat-timeline-item:nth-child(even) {
        justify-content: flex-start;
        padding-left: 52px;
        padding-right: 0;
    }
    .mat-timeline-dot { left: 20px; }
    .mat-howto-steps { flex-wrap: wrap; gap: 24px; }
    .mat-howto-steps::before { display: none; }
    .mat-howto-step { flex: 1 1 140px; }
    .mat-pkg-card-full--featured { transform: none; }
    .mat-pkg-card-full--featured:hover { transform: translateY(-6px); }
}
@media (max-width: 767px) {
    .section-pad { padding: 50px 0; }
    .mat-service-quicknav a { padding: 12px 14px; font-size: 13px; }
    .mat-whatsapp-float { bottom: 18px; right: 18px; }
    .mat-wa-btn { width: 50px; height: 50px; }
    .mat-edu-detail-card { flex-direction: column; gap: 8px; }
    .mat-edu-detail-num { font-size: 32px; }
    .mat-about-stat-num { font-size: 32px; }
    .mat-why-grid { grid-template-columns: 1fr 1fr; }
    .mat-service-cta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .mat-why-grid,
    .mat-service-cta-grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────
   STICKY HEADER — JS tarafından .is-sticky class eklenir
──────────────────────────────────────────────────────────── */
#header.header {
    position: relative;
    z-index: 9998;
    transition: box-shadow .3s;
}
#header.header.is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9998 !important;
    box-shadow: 0 3px 20px rgba(0,0,0,.18) !important;
    animation: headerSlideDown .28s ease;
}
@keyframes headerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
/* Topbar hep normal akışta kalır */
.mat-topbar-modern {
    position: relative;
    z-index: 9997;
}
/* Header fixed olduğunda altındaki içeriğin kaymaması için placeholder */
#mat-header-placeholder {
    display: none;
}

/* ────────────────────────────────────────────────────────────
   WHATSAPP & SCROLL-TOP — üst üste binme düzeltmesi
──────────────────────────────────────────────────────────── */
/* Scroll-to-top butonu genellikle bottom:30px right:30px */
/* WhatsApp'ı biraz yukarı taşıyoruz */
.mat-whatsapp-float {
    bottom: 88px !important;   /* scroll-top'un üstünde */
    right: 24px !important;
}
/* Scroll-top konumunu da netleştiriyoruz */
#scroll-top {
    bottom: 24px !important;
    right: 24px !important;
    z-index: 9990;
}
@media (max-width: 767px) {
    .mat-whatsapp-float { bottom: 76px !important; right: 16px !important; }
    #scroll-top { bottom: 16px !important; right: 16px !important; }
}

/* ────────────────────────────────────────────────────────────
   HEADER SUB-MENU — genişlik ve okunabilirlik
──────────────────────────────────────────────────────────── */
/* Hizmetlerimiz sub-menu genişliği */
#mainnav .menu > li > .sub-menu {
    min-width: 260px !important;
}
/* İki kolonlu Çözümlerimiz */
#mainnav .menu > li > .sub-menu.two-col {
    min-width: 460px !important;
    columns: 2 !important;
}