/* ============================================
   DIGITRIVA — custom.css
   Profesyonel IT danışmanlık renk paleti + tipografi
   ============================================ */

:root {
  --digitriva-primary: #1a4d8f;   /* derin lacivert-mavi — başlıklar, ana renk */
  --digitriva-accent: #2e8bc0;    /* açık mavi — linkler, butonlar */
  --digitriva-dark: #1c2733;      /* lacivert-siyah — footer/copyright arka planı */
  --digitriva-bg-light: #f7f9fb;  /* çok açık gri-mavi — section arka planları */
}

/* ─────────────────────────────────────────────
   Tipografi
   ───────────────────────────────────────────── */
body {
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
}

h1 {
  font-size: 2.75rem;
  line-height: 1.2;
}

h2 {
  font-size: 2rem;
  line-height: 1.3;
}

h3 {
  font-size: 1.4rem;
}

@media (max-width: 767px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
}

/* Logo biraz daha büyük, nefes alanı */
.navbar-brand.home img {
  max-height: 48px;
  width: auto;
}

/* Genel section boşluğu — bar class'lı section'lar daha ferah,
   ama features (kart) bölümü daha kompakt kalsın */
section.bar {
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (max-width: 767px) {
  section.bar {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}


/* ─────────────────────────────────────────────
   Genel renk override'ları
   ───────────────────────────────────────────── */
a {
  color: var(--digitriva-accent);
}

a:hover,
a:focus {
  color: var(--digitriva-primary);
}

.navbar-default {
  border-bottom: 3px solid var(--digitriva-primary);
}

.navbar-default .navbar-nav > li > a {
  color: #2c2c2c;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a {
  color: var(--digitriva-primary);
}

.btn-template-main,
.btn-template-main:hover,
.btn-template-main:focus {
  background-color: var(--digitriva-primary);
  border-color: var(--digitriva-primary);
  color: #fff;
}

.btn-template-main:hover {
  background-color: var(--digitriva-accent);
  border-color: var(--digitriva-accent);
}

.btn-template-outline,
.btn-template-outline:hover,
.btn-template-outline:focus {
  background-color: transparent;
  border: 2px solid var(--digitriva-primary);
  color: var(--digitriva-primary);
}

.btn-template-outline:hover {
  background-color: var(--digitriva-primary);
  color: #fff;
}

.btn-lg {
  border-radius: 6px;
  padding: 12px 28px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--digitriva-dark);
  font-weight: 700;
}

/* ─────────────────────────────────────────────
   Hero section (carousel'in yerine)
   ───────────────────────────────────────────── */
.digitriva-hero {
  background: linear-gradient(135deg, var(--digitriva-primary) 0%, var(--digitriva-dark) 100%);
  padding: 96px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.digitriva-hero-blobs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.digitriva-hero-content {
  position: relative;
  z-index: 1;
}

.digitriva-hero h1 {
  color: #fff;
  margin-bottom: 20px;
}

.digitriva-hero-subtitle {
  font-size: 1.2rem;
  color: #cfd8e3;
  margin-bottom: 36px;
  line-height: 1.6;
}

.digitriva-hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.digitriva-hero-buttons .btn-template-outline {
  border-color: #fff;
  color: #fff;
}

.digitriva-hero-buttons .btn-template-outline:hover {
  background-color: #fff;
  color: var(--digitriva-primary);
}

@media (max-width: 767px) {
  .digitriva-hero {
    padding: 56px 0;
  }
}

/* ─────────────────────────────────────────────
   Feature kartları (Leistungen anasayfa önizleme)
   ───────────────────────────────────────────── */
section.background-white:has(.box-simple),
section.bar:has(.box-simple) {
  background-color: var(--digitriva-bg-light) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%231a4d8f' stroke-width='1' opacity='0.18'%3E%3Cpath d='M0 20 H40 V50 H80'/%3E%3Cpath d='M40 50 V90'/%3E%3Cpath d='M80 0 V30 H120'/%3E%3Cpath d='M80 30 V70 H120'/%3E%3Cpath d='M0 70 H20 V120'/%3E%3Cpath d='M100 70 V120'/%3E%3Ccircle cx='40' cy='50' r='3' fill='%231a4d8f'/%3E%3Ccircle cx='80' cy='30' r='3' fill='%231a4d8f'/%3E%3Ccircle cx='80' cy='70' r='3' fill='%231a4d8f'/%3E%3Ccircle cx='20' cy='70' r='3' fill='%231a4d8f'/%3E%3Ccircle cx='100' cy='70' r='3' fill='%231a4d8f'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

.box-simple {
  text-align: center;
  padding: 32px 24px 28px;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 10px;
  border-top: 3px solid var(--digitriva-accent);
  box-shadow: 0 2px 8px rgba(26, 77, 143, 0.06);
  transition: box-shadow 0.2s, transform 0.2s;
  height: 100%;
}

.box-simple:hover {
  box-shadow: 0 12px 28px rgba(26, 77, 143, 0.14);
  transform: translateY(-4px);
}

.box-simple .icon {
  margin-bottom: 8px;
}

.box-simple .icon i {
  font-size: 2rem;
  color: var(--digitriva-accent);
}

.box-simple h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  margin-top: 8px;
}

.box-simple p {
  color: #6b7280;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Grid hücreleri kartla aynı yükseklikte olsun, eşit görünüm için */
section:has(.box-simple) .row > div {
  display: flex;
  margin-bottom: 24px;
}

/* ─────────────────────────────────────────────
   see_more bölümü (Digital-Komplettpaket vitrini)
   background-image-fixed-2: tema arka plan görseli + dark-mask kullanır.
   Görsel henüz yoksa düz koyu lacivert arka plana düşer.
   ───────────────────────────────────────────── */
section.background-image-fixed-2 {
  background-color: var(--digitriva-dark);
}

section.background-image-fixed-2 .dark-mask {
  background-color: rgba(28, 39, 51, 0.55);
}

section.background-image-fixed-2 .icon-lg i {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 16px;
}

section.background-image-fixed-2 h3 {
  color: #fff;
}

section.background-image-fixed-2 .lead {
  color: #e2e8f0;
  max-width: 640px;
  margin: 0 auto 28px;
}

.btn-template-transparent-black,
.btn-template-transparent-black:hover,
.btn-template-transparent-black:focus {
  border: 2px solid #fff;
  color: #fff;
  background-color: transparent;
  border-radius: 6px;
  padding: 12px 28px;
  font-weight: 600;
}

.btn-template-transparent-black:hover {
  background-color: #fff;
  color: var(--digitriva-dark);
}


/* ─────────────────────────────────────────────
   Footer — profesyonel, koyu lacivert
   ───────────────────────────────────────────── */
#footer {
  background-color: var(--digitriva-dark);
  color: #cfd8e3;
  padding-top: 48px;
  padding-bottom: 24px;
}

#footer h4 {
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#footer a {
  color: #9fc1e0;
}

#footer a:hover {
  color: #ffffff;
}

#footer .footer-quick-contact {
  margin-top: 12px;
  margin-bottom: 16px;
  line-height: 1.8;
}

#footer .footer-quick-contact i {
  width: 18px;
  color: var(--digitriva-accent);
}

#copyright {
  background-color: #141c25;
  color: #8a99ab;
  padding: 16px 0;
  font-size: 0.85rem;
}

#copyright a {
  color: #9fc1e0;
}

/* ─────────────────────────────────────────────
   #navbar .container'ı flexbox yapıyoruz:
   [ navbar-header (logo+toggle) ] [ navbar-collapse (menü) ] [ extra-panel-wrapper (hamburger) ]
   Bu üç blok hiçbir zaman üst üste binmez, zoom/ekran
   genişliğinden bağımsız olarak soldan sağa dizilir.
   ───────────────────────────────────────────── */
#navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
}

#navbar .navbar-header {
  flex-shrink: 0;
}

#navbar .navbar-collapse {
  flex-grow: 1;
  display: flex !important;
  justify-content: flex-start;
  margin-left: 24px;
}

#navbar .navbar-collapse .navbar-nav {
  float: none;
  display: flex;
  margin: 0;
}

#navbar .navbar-collapse .navbar-nav > li {
  float: none;
}

@media (max-width: 767px) {
  /* Mobilde navbar-collapse normal davranışına (gizli/açılır) dönsün */
  #navbar .navbar-collapse {
    display: none !important;
  }
  #navbar .navbar-collapse.in,
  #navbar .navbar-collapse.collapse.in {
    display: block !important;
  }
}

/* ─────────────────────────────────────────────
   Sağ üst köşe ek hamburger paneli
   (dil seçici + ekstra linkler için)
   Artık flex item olarak en sağda — absolute DEĞİL.
   ───────────────────────────────────────────── */
.extra-panel-wrapper {
  position: relative;
  flex-shrink: 0;
  margin-left: 16px;
}

.extra-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.2s;
}

.extra-toggle:hover {
  border-color: var(--digitriva-accent);
}

.extra-toggle .fa-bars {
  font-size: 1.1rem;
  color: var(--digitriva-primary);
}

.extra-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 16px;
  z-index: 1000;
  margin-top: 8px;
}

.extra-panel.open {
  display: block;
}

.extra-panel .lang-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.extra-panel .lang-switcher a,
.extra-panel .lang-switcher strong {
  text-decoration: none;
  color: #333;
}

.extra-panel .lang-switcher strong {
  color: var(--digitriva-primary);
}

.extra-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.extra-panel ul li {
  padding: 6px 0;
}

.extra-panel ul li a {
  color: #333;
  text-decoration: none;
}

.extra-panel ul li a:hover {
  color: var(--digitriva-primary);
}

.digitriva-projects-preview {
  background-color: #fff;
}

.digitriva-projects-subtitle {
  color: #6b7280;
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.digitriva-project-card {
  display: flex;
  flex-direction: column;
}

.digitriva-project-card p {
  flex-grow: 1;
}

.digitriva-project-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--digitriva-accent);
}

.digitriva-project-link:hover {
  color: var(--digitriva-primary);
}

.digitriva-project-link i {
  font-size: 0.75rem;
}

.digitriva-projects-preview .btn-template-outline {
  margin-top: 24px;
  border-color: var(--digitriva-primary);
  color: var(--digitriva-primary);
}

.digitriva-projects-preview .btn-template-outline:hover {
  background-color: var(--digitriva-primary);
  color: #fff;
}
/* ─────────────────────────────────────────────
   3. seviye dropdown (Netzwerksicherheit alt-menüsü gibi)
   Hover ile sağa açılan flyout submenu.
   ───────────────────────────────────────────── */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .digitriva-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-submenu .digitriva-submenu-toggle .caret {
  transform: rotate(-90deg);
  margin-left: 8px;
}

.digitriva-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: 0;
  min-width: 220px;
}

.dropdown-submenu:hover > .digitriva-submenu {
  display: block;
}

/* Mobilde flyout yerine normal akışta açılsın (sağa taşma riski olmasın) */
@media (max-width: 991px) {
  .digitriva-submenu {
    position: static;
    left: 0;
    display: none;
    box-shadow: none;
    border: none;
    padding-left: 16px;
  }
  .dropdown-submenu.open > .digitriva-submenu,
  .dropdown-submenu:hover > .digitriva-submenu {
    display: block;
  }
}
/* ════════════════════════════════════════════════════
   DIGITRIVA — Genel Canlılık & Renk Paketi
   Tüm iç sayfalardaki başlık bandı, içerik tipografisi
   ve vurgu kullanımını güçlendirir.
   ════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. Başlık bandı (#heading-breadcrumbs) —
   gri PCB-deseni yerine mavi gradient + dalga
   ───────────────────────────────────────────── */
#heading-breadcrumbs {
  background: linear-gradient(120deg, var(--digitriva-primary) 0%, var(--digitriva-dark) 100%);
  background-image:
    linear-gradient(120deg, var(--digitriva-primary) 0%, var(--digitriva-dark) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath d='M0,100 C300,180 500,20 800,80 C1100,140 1300,40 1440,90 L1440,0 L0,0 Z' fill='%23ffffff' opacity='0.06'/%3E%3C/svg%3E");
  background-size: cover, cover;
  background-position: center, center;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}

#heading-breadcrumbs h1 {
  color: #fff;
  font-size: 2.2rem;
  margin: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  #heading-breadcrumbs {
    padding: 36px 0;
  }
  #heading-breadcrumbs h1 {
    font-size: 1.6rem;
  }
}

/* ─────────────────────────────────────────────
   2. İçerik tipografisi — daha güçlü hiyerarşi,
   markdown body'leri için (Content sections)
   ───────────────────────────────────────────── */
#content h2 {
  color: var(--digitriva-primary);
  font-size: 1.7rem;
  margin-top: 40px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--digitriva-bg-light);
}

#content h3 {
  color: var(--digitriva-dark);
  font-size: 1.3rem;
  margin-top: 28px;
  margin-bottom: 12px;
}

#content blockquote {
  background: var(--digitriva-bg-light);
  border-left: 4px solid var(--digitriva-accent);
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 0 6px 6px 0;
}

#content blockquote p {
  margin: 0;
  color: var(--digitriva-dark);
}

#content a {
  color: var(--digitriva-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

#content a:hover {
  border-bottom-color: var(--digitriva-accent);
}

#content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  box-shadow: 0 1px 4px rgba(26, 77, 143, 0.08);
  border-radius: 6px;
  overflow: hidden;
}

#content table th {
  background: var(--digitriva-primary);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
}

#content table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--digitriva-bg-light);
}

#content table tr:nth-child(even) {
  background: var(--digitriva-bg-light);
}

#content hr {
  border: none;
  border-top: 2px solid var(--digitriva-bg-light);
  margin: 32px 0;
}

#content strong {
  color: var(--digitriva-dark);
}

/* ─────────────────────────────────────────────
   3. Emoji ikonları (📱, 🔒, ⚡ vb.) servis
   sayfalarındaki h3 başlıklarında - hafif arka
   plan vurgusu
   ───────────────────────────────────────────── */
#content h3:has(+ p) {
  position: relative;
}

/* ─────────────────────────────────────────────
   4. Contact sayfası özel düzeni
   ───────────────────────────────────────────── */
.digitriva-contact-page {
  padding: 56px 0;
  background: var(--digitriva-bg-light);
}

.digitriva-contact-page #contact {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(26, 77, 143, 0.08);
}

.digitriva-contact-page .form-control {
  border: 1px solid #dde3ea;
  border-radius: 6px;
  padding: 10px 14px;
}

.digitriva-contact-page .form-control:focus {
  border-color: var(--digitriva-accent);
  box-shadow: 0 0 0 3px rgba(46, 139, 192, 0.12);
}

.digitriva-contact-page label {
  font-weight: 600;
  color: var(--digitriva-dark);
}

.digitriva-contact-page h3.text-uppercase {
  color: var(--digitriva-primary);
}

@media (max-width: 767px) {
  .digitriva-contact-page #contact {
    padding: 24px;
  }
}
/* ════════════════════════════════════════════════════
   DIGITRIVA — İçerik Metni Güçlendirme
   Emoji ikonları, h3 başlıkları, body metni ve
   bölüm ayrımları daha belirgin.
   ════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   Body metni — biraz daha büyük, ferah
   ───────────────────────────────────────────── */
#content p,
#content li {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #3a3a3a;
}

/* ─────────────────────────────────────────────
   h3 başlıkları (emoji + servis adı satırları)
   — kart-benzeri vurgu, emoji büyütme
   ───────────────────────────────────────────── */
#content h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--digitriva-primary);
  margin-top: 40px;
  margin-bottom: 16px;
  padding: 14px 18px;
  background: var(--digitriva-bg-light);
  border-left: 4px solid var(--digitriva-accent);
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* h3 içindeki emoji karakterini büyütüyoruz.
   Emoji genelde ilk karakter(ler) olarak geçer,
   :first-letter işe yaramaz (emoji harf değil),
   bu yüzden genel font-size büyütmesi emoji'yi de
   büyütür - h3'ün kendi font-size'ı zaten 1.5rem,
   bu yeterli büyüklük sağlıyor. */

/* ─────────────────────────────────────────────
   h2 başlıkları (Was ist enthalten? gibi) —
   daha güçlü ayrım
   ───────────────────────────────────────────── */
#content h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--digitriva-dark);
  margin-top: 48px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--digitriva-accent);
}

/* ─────────────────────────────────────────────
   Bölüm ayraçları (---) — daha belirgin,
   nefes alanı artırılmış
   ───────────────────────────────────────────── */
#content hr {
  border: none;
  border-top: 2px solid #e1e7ee;
  margin: 48px 0;
}

/* ─────────────────────────────────────────────
   Listelerdeki vurgu (bold) metinler — biraz
   daha koyu/net
   ───────────────────────────────────────────── */
#content li strong,
#content p strong {
  color: var(--digitriva-primary);
  font-weight: 700;
}

/* ─────────────────────────────────────────────
   İçerik genişliği — çok geniş satırlar okumayı
   güçleştirebilir, hafif sınırlama (sadece
   blog-listing-medium içeriği için, kartları
   etkilemez)
   ───────────────────────────────────────────── */
#blog-listing-medium .digitriva-section-content {
  max-width: 760px;
}

@media (max-width: 767px) {
  #content h2 {
    font-size: 1.5rem;
  }
  #content h3 {
    font-size: 1.2rem;
    padding: 12px 14px;
  }
  #content p,
  #content li {
    font-size: 1rem;
  }
}
/* ════════════════════════════════════════════════════
   DIGITRIVA — Inter Font + İçerik Düzeltmeleri
   ════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. Font ailesi: Roboto → Inter (tüm site)
   ───────────────────────────────────────────── */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, button, input, textarea, label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────
   2. Liste öğelerindeki aşırı mavi vurguyu düzelt
   — strong sadece etiket kelimesi olduğunda (örn.
   "The problem:") koyu lacivert, listede satırın
   geri kalanı normal siyah olsun. Bunu yapmanın en
   güvenli yolu: genel strong rengini SİYAHA çevirip,
   sadece paragrafın EN BAŞINDAKİ strong'u (etiket)
   mavi yapmak.
   ───────────────────────────────────────────── */
#content li strong,
#content p strong {
  color: #1a1a1a;
  font-weight: 700;
}

/* Paragrafın/madde'nin en başında olan strong
   (örn. "The problem: ...", "Mesh technology: ...")
   genelde ":" ile bitiyor ve paragrafın ilk elemanı.
   :first-child ile yakalıyoruz. */
#content p > strong:first-child,
#content li > strong:first-child {
  color: var(--digitriva-primary);
}

/* ─────────────────────────────────────────────
   3. Body metni — biraz büyütülmüş, ferah
   ───────────────────────────────────────────── */
#content p,
#content li {
  font-size: 1.08rem;
  line-height: 1.8;
  color: #2d2d2d;
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────
   4. h3 başlıkları — kart-vurgu kutusu.
   (Emoji'ler şimdilik içerikte kalıyor; tarayıcı/
   işletim sistemi emoji fontunu kullanır, CSS ile
   rengini değiştiremeyiz, ama boyutu h3 ile
   birlikte büyüyor.)
   ───────────────────────────────────────────── */
#content h3 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--digitriva-primary);
  margin-top: 44px;
  margin-bottom: 18px;
  padding: 16px 20px;
  background: var(--digitriva-bg-light);
  border-left: 4px solid var(--digitriva-accent);
  border-radius: 0 8px 8px 0;
}

/* ─────────────────────────────────────────────
   5. h2 başlıkları
   ───────────────────────────────────────────── */
#content h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--digitriva-dark);
  margin-top: 52px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--digitriva-accent);
}

/* ─────────────────────────────────────────────
   6. Genel boşluk/ritim iyileştirmesi
   ───────────────────────────────────────────── */
#content hr {
  border: none;
  border-top: 2px solid #e1e7ee;
  margin: 52px 0;
}

#blog-listing-medium .digitriva-section-content {
  max-width: 780px;
}

@media (max-width: 767px) {
  #content h2 { font-size: 1.6rem; }
  #content h3 { font-size: 1.25rem; padding: 13px 16px; }
  #content p, #content li { font-size: 1rem; }
}
/* ════════════════════════════════════════════════════
   DIGITRIVA — Hover ile açılan dropdown menü
   Tıklama artık sayfaya gider, üzerine gelince (hover)
   alt menü açılır. Masaüstü davranışı.
   ════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  /* Ana seviye dropdown (LEISTUNGEN, PRODUKTE gibi) */
  .digitriva-hover-dropdown .dropdown-menu {
    display: none;
    margin-top: 0;
  }

  .digitriva-hover-dropdown:hover > .dropdown-menu,
  .digitriva-hover-dropdown:focus-within > .dropdown-menu {
    display: block;
  }

  /* 3. seviye flyout (Netzwerksicherheit'in altı) zaten
     submenu.css'te .dropdown-submenu:hover ile çalışıyor,
     buna dokunmuyoruz. */

  /* Caret okunun aşağı baktığını netleştir (üst seviye için) */
  .digitriva-dropdown-link .caret {
    transition: transform 0.15s;
  }

  .digitriva-hover-dropdown:hover .digitriva-dropdown-link .caret {
    transform: rotate(180deg);
  }
}

/* Mobilde (767px altı) eski Bootstrap click-tabanlı
   davranış devam etsin - navbar-toggle zaten tıklama
   ile çalışıyor, burada özel bir şey yapmıyoruz. */

/* ─────────────────────────────────────────────
   Tek-hamburger mobil deneyimi: sağdaki extra-panel
   masaüstünde görünür, mobilde gizlenir. Onun yerine
   navbar-collapse içine kopyalanan dil+iletişim
   bölümü mobilde görünür, masaüstünde gizlenir.
   ───────────────────────────────────────────── */
.digitriva-mobile-extra {
  display: none;
}

@media (max-width: 767px) {
  .digitriva-desktop-only {
    display: none !important;
  }

  .digitriva-mobile-extra {
    display: block;
    float: none;
    border-top: 1px solid #e1e7ee;
    margin-top: 8px;
    padding-top: 8px;
  }

  .digitriva-mobile-extra li {
    float: none;
  }

  .digitriva-mobile-lang-switcher {
    padding: 8px 15px;
    display: flex;
    gap: 12px;
  }

  .digitriva-mobile-lang-switcher a,
  .digitriva-mobile-lang-switcher strong {
    color: var(--digitriva-primary);
  }
}
/* ════════════════════════════════════════════════════
   DIGITRIVA — Nav Düzeltmeleri v2
   1. Mobil-extra bölümünü masaüstünde kesin gizle
   2. Submenu hover rengi ekle
   3. Ana menü font boyutunu küçült (taşma önleme)
   ════════════════════════════════════════════════════ */

/* 1. Mobil-extra bölümü masaüstünde KESİN gizli olsun */
@media (min-width: 768px) {
  ul.digitriva-mobile-extra,
  ul.digitriva-mobile-extra.nav,
  ul.digitriva-mobile-extra.navbar-nav,
  ul.digitriva-mobile-extra.navbar-right {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* 2. Submenu (3. seviye flyout) hover rengi */
.digitriva-submenu li a:hover,
.digitriva-submenu li a:focus {
  background-color: var(--digitriva-bg-light) !important;
  color: var(--digitriva-primary) !important;
}

/* Ana dropdown-menu (2. seviye, örn. WEBSITE-SCHUTZ listesi)
   hover rengi de netleştirelim */
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
  background-color: var(--digitriva-bg-light) !important;
  color: var(--digitriva-primary) !important;
}

/* 3. Ana menü font boyutu — taşmayı önlemek için küçültme */
#navbar .navbar-collapse .navbar-nav > li > a {
  font-size: 0.92rem;
  padding: 8px 12px;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  #navbar .navbar-collapse .navbar-nav > li > a {
    font-size: 0.85rem;
    padding: 8px 8px;
  }
}
/* ════════════════════════════════════════════════════
   DIGITRIVA — Tipografi Ölçeği (Final)
   Bu kurallar önceki tüm font-size override'larını
   geçersiz kılar (CSS'in en sonunda, en yüksek öncelik).
   ════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   Body metni — net büyütme
   ───────────────────────────────────────────── */
#content p,
#content li {
  font-size: 1.18rem !important;
  line-height: 1.8 !important;
}

/* ─────────────────────────────────────────────
   h1 — sayfa başlığı (hero/heading-breadcrumbs
   dışındaki, içerik içi h1'ler için; çoğu sayfada
   h1 zaten heading-breadcrumbs'ta, ama bazı _index.md
   içeriklerinde de h1 var)
   ───────────────────────────────────────────── */
#content h1 {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* ─────────────────────────────────────────────
   h2 — bölüm başlıkları
   ───────────────────────────────────────────── */
#content h2 {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

/* ─────────────────────────────────────────────
   h3 — alt başlıklar / servis kartı başlıkları
   ───────────────────────────────────────────── */
#content h3 {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

/* ─────────────────────────────────────────────
   Liste işaretleri ve tablo metni de orantılı
   ───────────────────────────────────────────── */
#content table th,
#content table td {
  font-size: 1.1rem !important;
}

#content blockquote p {
  font-size: 1.15rem !important;
}

/* ─────────────────────────────────────────────
   Mobilde orantılı küçültme (taşma olmasın)
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #content p,
  #content li {
    font-size: 1.05rem !important;
  }
  #content h1 {
    font-size: 1.9rem !important;
  }
  #content h2 {
    font-size: 1.6rem !important;
  }
  #content h3 {
    font-size: 1.35rem !important;
  }
}