/* Yeni üst menünün (HeaderV2, .hdr2) açılır paneli, zemin tonu, telefon menüsü ve (bu üst menünün olduğu sayfada) alt çubuk.
   Yalnız HeaderV2 yükler; her kural .hdr2 / .hdr2-mnav altında ya da "body:has(> .header.hdr2)" ile sınırlı: canlı üst menü
   (Header.tsx, site.css) ve öteki sayfaların alt çubuğu hiç değişmez. Menü makinesi MainNav + site.js'tir (aria-expanded, inert,
   Esc, dışarı tıklama, kaydırma kilidi); burası görünüm + ust-menu.js'in ekleri (dar panelin konumu, ok tuşları, zemine dokununca
   kapanma, zemin tonu).
   Kapsülün görünen yüzü .header-inner::before'dur (anasayfa-v2.css): renkler hep ::before'a verilir.
   10.10.2026 gece yeniden (sahibi mega menü için: "hâlâ olmamış"; hedef Stripe / Linear / Vercel sadeliği): panel her zeminde
   BEYAZ — 1 px #ECE8F3 çizgi, 20 px köşe, tek yumuşak gölge, 32 px iç boşluk; açılış yalnız saydamlık + 8 px yükselme (160 ms).
   Hizmetler: üç sütun, küçük büyük harf grup etiketi, 40 px satır (16 px gri çizgi ikon → üzerine gelince Mor 40, 15 px / 500 Mor
   90 başlık), satır üzerine gelince yalnız #F5F5F7 zemin; kurulum platformları sütunların altında "Kurulum:" etiketli tek satır
   (orta noktalı küçük yazı bağlantıları); sağda açık Mor 10 tonlu sakin kart. Kaynaklar / Kurumsal: aynı beyaz biçim, ikonsuz iki
   sade liste. Açıklama satırı yalnız sütunun bütün açıklamaları kısaysa (HeaderV2 tidyNav). Telefon menüsü de beyaz.
   Kapsül panelden bağımsız olarak altındaki bölümün tonunu izler (ust-menu.js header[data-ton]): koyu bölüm üstünde saydam /
   koyu cam, beyaz yazı; açık bölüm üstünde açık cam (beyaz %80 + bulanıklık), Mor 90 yazı, çağrı düğmesi Mor 40 hap.
   "Hareketi azalt" tercihinde anında (?hareket=1 yok sayar). */

/* ============================================================================
   Kapsül, menü açıkken: altındaki bölümün tonunu korur (beyaz panel kapsülle birleşmez, altında ayrı yüzer). Koyu tonda (ya da ton
   yokken) koyu cam; açık tonda aşağıdaki açık ton kuralları geçerli. Seçiciler "html" ile başlar: anasayfa-v2.css'teki
   ":is(.is-light, .is-mega)" kurallarını dosya sırasından bağımsız geçsin
   ========================================================================== */
html .header.hdr2.is-mega:not([data-ton="acik"]) .header-inner.hdr2-pill::before {
  background: rgba(10, 6, 19, 0.88); border-color: var(--v2-hair-d); box-shadow: none;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html .header.hdr2.is-mega:not([data-ton="acik"]) .logo.hdr2-logo { color: var(--wa-beyaz); }
html .header.hdr2.is-mega:not([data-ton="acik"]) .logo.hdr2-logo:focus-visible { outline-color: var(--wa-mor-10); }
html .header.hdr2.is-mega:not([data-ton="acik"]) .hdr2-nav .nav-root > :is(a, .nav-trigger) { color: rgba(255, 255, 255, 0.72); }
html .header.hdr2.is-mega:not([data-ton="acik"]) .hdr2-nav .nav-root > :is(a, .nav-trigger):is(:hover, :focus-visible, [aria-expanded="true"], .is-current, [aria-current="page"]) { color: var(--wa-beyaz); background: rgba(255, 255, 255, 0.08); }
.header.hdr2 .hdr2-nav .nav-root > :is(a, .nav-trigger):focus-visible { outline: 2px solid var(--wa-mor-10); outline-offset: 2px; }
html .header.hdr2.is-mega:not([data-ton="acik"]) .nav-badge { background: rgba(209, 193, 255, 0.16); color: var(--wa-mor-10); }
html .header.hdr2.is-mega:not([data-ton="acik"]) .hdr2-user { color: var(--wa-beyaz); border-color: rgba(255, 255, 255, 0.16); }
html .header.hdr2.is-mega:not([data-ton="acik"]) .hdr2-user:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.32); }
/* Kapsüldeki çağrı düğmesi koyu tonda koyu reçetede (beyaz hap); paneldeki düğme aşağıda her zaman açık reçetede */
html .header.hdr2.is-mega:not([data-ton="acik"]) .hdr2-acts .v2-btn.v2-btn {
  --v2-p-bg: var(--wa-beyaz); --v2-p-fg: var(--wa-mor-90); --v2-p-bg-h: var(--wa-acik-gri);
  --v2-fg: var(--wa-beyaz); --v2-line: rgba(255, 255, 255, 0.24); --v2-line-h: rgba(255, 255, 255, 0.48); --v2-link: var(--wa-mor-10); --v2-ring: var(--wa-mor-10);
}
/* Arkadaki sayfa hafifçe kararır (beyaz panel açık sayfada da ayrışsın) */
.header.hdr2::before { background: rgba(10, 6, 19, 0.24); }
/* Giriş hareketi bitince kapsülde dolgulu animasyon asılı kalmaz (Chrome'da kapsülü "backdrop root" yapıp panelin bulanıklığını
   kapsülün içine hapsediyordu); panel menü öğelerinin girişini almaz */
html.hv2-anim .header.hdr2 .header-inner.hdr2-pill { animation-fill-mode: backwards; }

/* ============================================================================
   Zemin tonu (ust-menu.js, header[data-ton]: menü çizgisinin altındaki bölüm). Menü açıkken de geçerli (10.10.2026 gece: panel
   beyaz, kapsül kendi tonunda); yalnız renk / zemin değişir (yerleşim kayması yok). Seçicilerde .hdr2 iki kez: anasayfa-v2.css'in
   kaydırılmış koyu hâl kuralını geçsin. Çağrı düğmesi kuralları .hdr2-acts ile sınırlı: paneldeki düğme etkilenmez
   ========================================================================== */
/* 10.10 gece (sahibi: "böyle bir hata da var" — açık zeminde koyu kapsül, koyu yazı): anasayfa-v2.css'in kaydırılmış koyu kuralı
   (.header.hdr2:is(.hdr2-on, .is-scrolled):not(.is-light):not(.is-mega) …, 7 sınıf) bu kuralı eziyordu; .hdr2 üç kez → açık ton kazanır */
html .header.hdr2.hdr2.hdr2[data-ton="acik"] .header-inner.hdr2-pill::before {
  background: rgba(255, 255, 255, 0.8); border-color: var(--v2-hair); box-shadow: var(--v2-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
/* 10.10 akşam (Sinan: "burada logo siyah daha şık durabilir"): açık zeminde kitteki siyah logo */
html .header.hdr2.hdr2[data-ton="acik"] .logo.hdr2-logo { color: var(--wa-siyah); }
html .header.hdr2.hdr2[data-ton="acik"] .logo.hdr2-logo:focus-visible { outline-color: var(--wa-mor-40); }
html .header.hdr2.hdr2[data-ton="acik"] .hdr2-nav .nav-root > :is(a, .nav-trigger) { color: rgba(44, 4, 93, 0.78); }
html .header.hdr2.hdr2[data-ton="acik"] .hdr2-nav .nav-root > :is(a, .nav-trigger):is(:hover, :focus-visible, [aria-expanded="true"], .is-current, [aria-current="page"]) { color: var(--wa-mor-90); background: rgba(44, 4, 93, 0.05); }
html .header.hdr2.hdr2[data-ton="acik"] .hdr2-nav .nav-root > :is(a, .nav-trigger):focus-visible { outline-color: var(--wa-mor-40); }
html .header.hdr2.hdr2[data-ton="acik"] .nav-badge { background: rgba(135, 62, 255, 0.1); color: var(--wa-mor-40); }
html .header.hdr2.hdr2[data-ton="acik"] :is(.hdr2-user, .menu-toggle.hdr2-burger) { color: var(--wa-mor-90); border-color: rgba(44, 4, 93, 0.16); }
html .header.hdr2.hdr2[data-ton="acik"] :is(.hdr2-user, .menu-toggle.hdr2-burger):hover { background: rgba(44, 4, 93, 0.05); border-color: rgba(44, 4, 93, 0.3); }
html .header.hdr2.hdr2[data-ton="acik"] .hdr2-acts .v2-btn.v2-btn {
  --v2-p-bg: var(--wa-mor-40); --v2-p-fg: var(--wa-beyaz); --v2-p-bg-h: var(--wa-mor-50);
  --v2-fg: var(--wa-mor-90); --v2-ring: var(--wa-mor-40);
}

html .header.hdr2.hdr2.is-light[data-ton="koyu"] .header-inner.hdr2-pill::before {
  background: rgba(10, 6, 19, 0.72); border-color: var(--v2-hair-d); box-shadow: none;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html .header.hdr2.hdr2.is-light[data-ton="koyu"] .logo.hdr2-logo { color: var(--wa-beyaz); }
html .header.hdr2.hdr2.is-light[data-ton="koyu"] .hdr2-nav .nav-root > :is(a, .nav-trigger) { color: rgba(255, 255, 255, 0.72); }
html .header.hdr2.hdr2.is-light[data-ton="koyu"] .hdr2-nav .nav-root > :is(a, .nav-trigger):is(:hover, :focus-visible, [aria-expanded="true"], .is-current, [aria-current="page"]) { color: var(--wa-beyaz); background: rgba(255, 255, 255, 0.08); }
html .header.hdr2.hdr2.is-light[data-ton="koyu"] .nav-badge { background: rgba(209, 193, 255, 0.16); color: var(--wa-mor-10); }
html .header.hdr2.hdr2.is-light[data-ton="koyu"] :is(.hdr2-user, .menu-toggle.hdr2-burger) { color: var(--wa-beyaz); border-color: rgba(255, 255, 255, 0.16); }
html .header.hdr2.hdr2.is-light[data-ton="koyu"] .hdr2-acts .v2-btn.v2-btn {
  --v2-p-bg: var(--wa-beyaz); --v2-p-fg: var(--wa-mor-90); --v2-p-bg-h: var(--wa-acik-gri);
  --v2-fg: var(--wa-beyaz); --v2-ring: var(--wa-mor-10);
}

/* ============================================================================
   Panel: beyaz yüzey (her zeminde), 1 px #ECE8F3, 20 px köşe, tek yumuşak gölge. Açılış yalnız saydamlık + 8 px yükselme (160 ms),
   kapanış 120 ms. Geniş panel (Hizmetler) en çok 1080 px, kapsülün ortasında (left/right 0 + margin auto: dönüşüm yalnız hareket
   için); dar paneller (Kaynaklar, Kurumsal) düğmelerinin altına hizalı (--ust-left, ust-menu.js). --ust-x: açılış merkezi
   ========================================================================== */
.header.hdr2 .mega {
  --ust-x: 50%;
  top: calc(100% + 8px);
  border-radius: 20px; border: 1px solid var(--v2-hair); color: var(--wa-mor-90);
  background: var(--wa-beyaz);
  box-shadow: 0 24px 60px rgba(44, 4, 93, 0.12);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: translateY(8px); transform-origin: var(--ust-x) top;
  transition: opacity 120ms var(--ease-in), transform 120ms var(--ease-in), visibility 0s linear 120ms;
}
.header.hdr2 .mega[data-open] { transform: none; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s; }
/* Hap daraldığında (kaydırılmış / açık zemin) görünen yüz 10 px içeride: panel aynı 8 px aralıkla altında kalsın */
.header.hdr2:is(.hdr2-on, .is-scrolled, .is-light) .mega { top: calc(100% - 2px); }
.header.hdr2 .mega:not([data-size]) { left: 0; right: 0; width: min(1080px, 100%); margin-inline: auto; }
.header.hdr2 .mega[data-size] { left: var(--ust-left, var(--mega-x, 0px)); right: auto; }
.header.hdr2 .mega-body, .header.hdr2 .mega-foot { position: relative; z-index: 1; }
.header.hdr2 .mega[data-open] :is(.mega-col, .mega-side) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html.hv2-motion .header.hdr2 .mega { transform: translateY(8px); transition: opacity 120ms var(--ease-in), transform 120ms var(--ease-in), visibility 0s linear 120ms; }
  html.hv2-motion .header.hdr2 .mega[data-open] { transform: none; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s; }
}

/* Gövde ve sütunlar: grup etiketi 12 px büyük harf, .12em, gri; sütunlar arasında çizgi yok (boşluk ayırır) */
.header.hdr2 .mega-body { gap: 32px; padding: 32px; }
.header.hdr2 .mega-body.has-feature { grid-template-columns: minmax(0, 1fr) 232px; }
.header.hdr2 .mega-cols { gap: 24px; }
/* Geniş panelde sütun en uzun başlığı kadar (satır kırılmaz), aradaki boşluk paylaşılır */
.header.hdr2 .mega:not([data-size]) .mega-cols { grid-template-columns: repeat(var(--cols, 3), max-content); justify-content: space-between; }
.header.hdr2 .mega-col + .mega-col { border-left: 0; padding-left: 0; }
.header.hdr2 .mega-col-title { margin: 0 0 8px; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; color: var(--wa-gri); }
.header.hdr2 .mega-col ul { gap: 2px; }
/* Kartlı panelde alt şerit yok (kartın düğmesinin tekrarıydı) */
.header.hdr2 .mega:has(.ust-card) .mega-foot { display: none; }

/* Satır: 40 px; 16 px gri çizgi ikon (üzerine gelince Mor 40) + 15 px / 500 Mor 90 başlık (+ varsa tek satır 13 px gri açıklama);
   üzerine gelince yalnız #F5F5F7 zemin, başka etki yok */
.header.hdr2 .mega-link { align-items: center; gap: 12px; min-height: 40px; margin-inline: -10px; padding: 8px 10px; border-radius: 10px; color: var(--wa-mor-90); transition: background-color 150ms ease; }
.header.hdr2 .mega-link:is(:hover, :focus-visible) { background: var(--wa-acik-gri); }
.header.hdr2 .mega-link:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: 0; }
.header.hdr2 .mega-ic { width: 16px; height: 16px; margin: 0; border-radius: 0; background: none; box-shadow: none; color: var(--wa-gri); transition: color 150ms ease; }
.header.hdr2 .mega-ic > svg { width: 16px; height: 16px; }
.header.hdr2 .mega-link:is(:hover, :focus-visible) .mega-ic { background: none; color: var(--wa-mor-40); }
/* 10.10 akşam (Sinan: "ideasoft iş ortaklığı alanında da ideasoft'un gerçek logosu olabilir"): o satırda çizgi ikon yerine IdeaSoft'un
   gerçek işareti (logolar/ideasoft-ikon.svg; renk değişmez), diğer satırlarla aynı 16 px kutuda */
.header.hdr2 .mega-link[href*="ideasoft-is-ortagi"] .mega-ic { background: url("/assets/logolar/ideasoft-ikon.svg") center / contain no-repeat; }
.header.hdr2 .mega-link[href*="ideasoft-is-ortagi"] .mega-ic > svg { visibility: hidden; }
.header.hdr2 .mega-link-text { flex: 1 1 auto; min-width: 0; padding-top: 0; gap: 2px; }
.header.hdr2 .mega-link-label { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; white-space: nowrap; }
/* Açıklama sütunu genişletmez (width 0 + min-width 100%), sığmazsa üç noktayla biter (kısa açıklama kuralının emniyeti) */
.header.hdr2 .mega-link-desc { width: 0; min-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 1.4; color: var(--wa-gri); }
.header.hdr2 .mega-link[aria-current="page"] .mega-link-label { color: var(--wa-mor-40); }
.header.hdr2 .mega-link-go { display: none; }

/* Kurulum platformları: sütunların altında, ince çizginin altında tek satır — "Kurulum:" + orta noktalı küçük yazı bağlantıları.
   Liste kurulum sütununun içinde kalır (erişilebilir grup aynı), görünüşte sütun alanının altına yerleşir (panel ≥ 1080 px
   genişlikte açılır: satır hiç kırılmaz). Logo görseli yerine ad (HeaderV2 tidyNav "IdeaSoft kurulumu" → "IdeaSoft") */
.header.hdr2 .mega-cols:has(.mega-chips) { position: relative; padding-bottom: 60px; }
.header.hdr2 .mega-col ul.mega-chips { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; margin: 0; padding: 11px 0 0; border-top: 1px solid var(--v2-hair); }
/* 10.10 akşam (Sinan: "kurulum desteği verdiğimizi de belirt") */
.header.hdr2 .mega-col ul.mega-chips::before { content: "Kurulum desteği:"; margin-right: 12px; font-size: 13px; font-weight: 500; color: var(--wa-gri); white-space: nowrap; }
.header.hdr2 .mega-chips > li { display: flex; align-items: center; }
.header.hdr2 .mega-chips > li + li { margin-left: 22px; }
.header.hdr2 .mega-chips .mega-chip.has-logo { justify-content: flex-start; height: 32px; padding: 0; white-space: nowrap; border: 0; border-radius: 4px; background: none; box-shadow: none; font-size: 13px; font-weight: 500; color: var(--wa-mor-90); transform: none; transition: color 150ms ease; }
/* 10.10 akşam (Sinan: "megamenüde de minimal iconlu hale getirebiliriz"): yazı yerine platformların gerçek logoları, aynı optik boyutta;
   durgunken gri ve soluk, üzerine gelince kendi renginde. Erişilebilir ad bağlantının aria-label'ında kalır. */
.header.hdr2 .mega-chips .mega-chip.has-logo img { display: block; width: auto; height: 15px; max-width: 92px; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: filter 200ms ease, opacity 200ms ease; }
.header.hdr2 .mega-chips .mega-chip.has-logo:is(:hover, :focus-visible) img, .header.hdr2 .mega-chips .mega-chip.has-logo[aria-current="page"] img { filter: none; opacity: 1; }
.header.hdr2 .mega-chips .mega-chip.has-logo:is(:hover, :focus-visible) { color: var(--wa-mor-40); box-shadow: none; transform: none; }
.header.hdr2 .mega-chip:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: 2px; }
.header.hdr2 .mega-chips .mega-chip.has-logo[aria-current="page"] { color: var(--wa-mor-40); box-shadow: none; }
/* Yazılı bağlantılar (blog konuları): ikonsuz sade liste, satır biçimiyle aynı */
.header.hdr2 .mega-col.is-compact ul { display: grid; gap: 2px; }
.header.hdr2 .mega-col.is-compact .mega-chip:not(.has-logo) {
  justify-content: flex-start; align-items: flex-start; height: auto; min-height: 40px; margin-inline: -10px; padding: 8px 10px; border: 0; border-radius: 10px; line-height: 1.3;
  background: none; box-shadow: none; transform: none; font-size: 15px; font-weight: 500; color: var(--wa-mor-90); transition: background-color 150ms ease;
}
.header.hdr2 .mega-col.is-compact .mega-chip:not(.has-logo):is(:hover, :focus-visible) { background: var(--wa-acik-gri); border: 0; box-shadow: none; transform: none; color: var(--wa-mor-90); }
.header.hdr2 .mega-col.is-compact .mega-chip:not(.has-logo):focus-visible { outline-offset: 0; }
.header.hdr2 .mega-col.is-compact .mega-chip:not(.has-logo)[aria-current="page"] { color: var(--wa-mor-40); }

/* Alt şerit (Kaynaklar, Kurumsal): ince çizgi, Mor 40 yazı bağlantıları */
.header.hdr2 .mega-foot { gap: 8px 24px; padding: 12px 32px; border-top: 1px solid var(--v2-hair); background: none; border-radius: 0 0 19px 19px; }
.header.hdr2 .mega-foot a { min-height: 32px; font-size: 14px; font-weight: 500; color: var(--wa-mor-40); }
.header.hdr2 .mega-foot a svg { transition: transform 150ms var(--ease); }
.header.hdr2 .mega-foot a:hover { color: var(--wa-mor-50); }
.header.hdr2 .mega-foot a:hover svg { transform: translateX(2px); }
.header.hdr2 .mega-foot a:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: 2px; border-radius: 4px; }

/* Dar paneller (Kaynaklar md, Kurumsal sm): iki sade sütun, ikonsuz */
.header.hdr2 .mega[data-size="md"] { width: 600px; }
.header.hdr2 .mega[data-size="sm"] { width: 560px; }
.header.hdr2 .mega[data-size] .mega-ic { display: none; }
.header.hdr2 .mega[data-size="sm"] .mega-body.has-feature { grid-template-columns: minmax(0, 1fr) 200px; }

/* Sağ kart (Hizmetler): açık Mor 10 tonu (%25), çizgisiz; etiket, tek kısa satır, Mor 40 ana düğme, sakin WhatsApp bağlantısı.
   Gradyan ve parlama yok */
.ust-card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border-radius: 16px; border: 0; background: rgba(209, 193, 255, 0.25); }
.ust-card-kicker { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wa-mor-40); }
.ust-card-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--wa-mor-90); text-wrap: balance; }
html .header.hdr2 .mega .ust-card .v2-btn.v2-btn {
  --v2-p-bg: var(--wa-mor-40); --v2-p-fg: var(--wa-beyaz); --v2-p-bg-h: var(--wa-mor-50);
  --v2-fg: var(--wa-mor-90); --v2-line: rgba(44, 4, 93, 0.24); --v2-line-h: rgba(44, 4, 93, 0.48); --v2-link: var(--wa-mor-40); --v2-ring: var(--wa-mor-40);
}
.ust-card .ust-card-cta.v2-btn { width: 100%; min-height: 44px; margin-top: auto; padding: 0 16px; font-size: 14px; }
.ust-card-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; font-size: 13px; font-weight: 500; color: rgba(44, 4, 93, 0.72); transition: color 150ms ease; }
.ust-card-wa img { width: 16px; height: 16px; }
.ust-card-wa:hover { color: var(--wa-mor-90); }
.ust-card-wa:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: 2px; border-radius: 8px; }

/* İletişim sütunu (Kurumsal): ikinci sade sütun */
.header.hdr2 .mega[data-size="sm"] .mega-side { border-left: 0; padding-left: 0; }
.ust-contact { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.ust-contact .mega-col-title { margin: 0; }
.ust-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ust-contact li { display: grid; gap: 2px; }
.ust-contact li span { font-size: 13px; color: var(--wa-gri); }
.ust-contact li a { font-size: 15px; font-weight: 500; color: var(--wa-mor-90); overflow-wrap: anywhere; transition: color 150ms ease; }
.ust-contact li a:hover { color: var(--wa-mor-40); }
.ust-contact-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; font-weight: 500; color: var(--wa-mor-40); }
.ust-contact-link svg { transition: transform 150ms var(--ease); }
.ust-contact-link:hover svg { transform: translateX(2px); }
.ust-contact a:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: 2px; border-radius: 4px; }

/* ============================================================================
   Telefon / tablet (≤1180, menü düğmesi düzeni): #mobile-nav alttan yükselen sayfa. Açma/kapama, Esc, kaydırma kilidi ve inert
   site.js'te; zemine dokununca kapanma ust-menu.js'te. Sayfa 640 px'e kadar ortalı, telefonda tam en.
   10.10.2026 gece: masaüstü paneliyle aynı dil — beyaz sayfa, 52 px satırlar ince çizgiyle ayrılır, grup etiketi 12 px gri büyük
   harf, alt bağlantılar 44 px (16 px gri ikon), kurulum platformları "Kurulum" etiketli iki sütun yazı bağlantısı; altta Mor 40
   ana düğme + ince çerçeveli müşteri girişi. Logo Mor 40 kelime işareti (HeaderV2).
   ========================================================================== */
@media (max-width: 1180px) {
  .mobile-nav.hdr2-mnav {
    padding: 0; gap: 0; justify-content: flex-end; align-items: center; overflow: hidden;
    background: rgba(10, 6, 19, 0.5); transform: none; transition: opacity 0.25s var(--ease), visibility 0s linear 0.35s;
  }
  .mobile-nav.hdr2-mnav.is-open { transform: none; transition: opacity 0.2s var(--ease), visibility 0s; }
  .hdr2-sheet {
    position: relative; display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: calc(100dvh - 40px); min-height: 0;
    /* Çerçeve yok: köşeli 1 px çerçeve kendi içinde kayan listeyle birlikte yazılımsal çizimde 256 px'lik döşeme izleri bırakıyordu */
    border-radius: 20px 20px 0 0; border: 0; color: var(--wa-mor-90);
    background: var(--wa-beyaz); box-shadow: 0 -24px 60px rgba(10, 6, 19, 0.24);
    transform: translateY(24px); transition: transform 0.35s var(--ease-out);
  }
  .mobile-nav.hdr2-mnav.is-open .hdr2-sheet { transform: none; }
  .hdr2-sheet-grip { display: block; flex: none; width: 36px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: rgba(44, 4, 93, 0.14); }
  .hdr2-sheet .mobile-nav-head.hdr2-mnav-head { position: static; flex: none; height: 56px; padding: 0 10px 0 20px; background: transparent; border: 0; }
  .hdr2-sheet .mobile-nav-head::before { display: none; }
  .hdr2-mnav-logo { display: flex; align-items: center; color: var(--wa-siyah); }
  .hdr2-mnav-logo .hdr2-wm { width: 120px; height: 18px; }
  .hdr2-sheet .menu-toggle.hdr2-close { width: 44px; height: 44px; color: var(--wa-mor-90); border-color: var(--v2-hair); background: transparent; }
  .hdr2-sheet .menu-toggle.hdr2-close:hover { background: var(--wa-acik-gri); border-color: var(--v2-hair); }
  .hdr2-sheet .menu-toggle.hdr2-close:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: 2px; }
  .hdr2-sheet .hdr2-mnav-list { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(44, 4, 93, 0.2) transparent; padding: 4px 20px 12px; gap: 0; }
  .hdr2-sheet .hdr2-mnav-list > a, .hdr2-sheet .mnav-group > summary {
    min-height: 52px; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--v2-hair); border-radius: 0; gap: 10px;
    font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--wa-mor-90); background: none;
    transition: color 150ms ease;
  }
  .hdr2-sheet .hdr2-mnav-list > a:is(:hover, :focus-visible), .hdr2-sheet .mnav-group > summary:is(:hover, :focus-visible) { background: none; color: var(--wa-mor-40); }
  .hdr2-sheet .hdr2-mnav-list > a:focus-visible, .hdr2-sheet .mnav-group > summary:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: -2px; border-radius: 8px; }
  .hdr2-sheet .hdr2-mnav-list > a[aria-current="page"], .hdr2-sheet .mnav-group > summary.is-current { color: var(--wa-mor-40); }
  .hdr2-sheet .mnav-group[open] > summary { background: none; border-bottom-color: transparent; }
  /* Son satırın çizgisi alt şeridin çizgisiyle çift görünmesin */
  .hdr2-sheet .hdr2-mnav-list > a:last-child, .hdr2-sheet .hdr2-mnav-list > .mnav-group:last-child > summary, .hdr2-sheet .hdr2-mnav-list > .mnav-group:last-child > .mnav-panel { border-bottom-color: transparent; }
  .hdr2-sheet .mnav-group > summary .nav-chev { width: 16px; height: 16px; color: var(--wa-gri); opacity: 1; }
  .hdr2-sheet .hdr2-mnav-list > a .nav-badge { font-size: 11px; padding: 4px 8px 3px; background: rgba(135, 62, 255, 0.1); color: var(--wa-mor-40); }
  .hdr2-sheet .mnav-panel { gap: 16px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--v2-hair); border-radius: 0; background: none; }
  .hdr2-sheet .mnav-col-title { margin: 0 0 4px; padding-inline: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; color: var(--wa-gri); }
  .mobile-nav.hdr2-mnav .mnav-col a { min-height: 44px; padding: 6px 8px; margin-inline: -8px; border-radius: 10px; gap: 12px; font-size: 15px; font-weight: 500; color: var(--wa-mor-90); }
  .mobile-nav.hdr2-mnav .mnav-col a svg { width: 16px; height: 16px; color: var(--wa-gri); }
  /* IdeaSoft iş ortaklığı satırında gerçek IdeaSoft işareti (masaüstü menüyle aynı) */
  .mobile-nav.hdr2-mnav .mnav-col a[href*="ideasoft-is-ortagi"] svg { background: url("/assets/logolar/ideasoft-ikon.svg") center / contain no-repeat; }
  .mobile-nav.hdr2-mnav .mnav-col a[href*="ideasoft-is-ortagi"] svg > * { visibility: hidden; }
  .mobile-nav.hdr2-mnav .mnav-col a:is(:hover, :focus-visible) { background: var(--wa-acik-gri); color: var(--wa-mor-90); }
  .mobile-nav.hdr2-mnav .mnav-col a:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: -2px; }
  .mobile-nav.hdr2-mnav .mnav-col a[aria-current="page"] { color: var(--wa-mor-40); font-weight: 500; }
  /* Yazı bağlantıları (kurulum platformları, blog konuları): iki sütun, çerçevesiz; platformların başında "Kurulum" etiketi */
  .hdr2-sheet .mnav-chips { margin-top: 4px; padding-inline: 0; column-gap: 16px !important; row-gap: 0 !important; }
  .hdr2-sheet .mnav-col > ul:not(.mnav-chips) + ul.mnav-chips { margin-top: 8px; }
  .hdr2-sheet .mnav-col > ul:not(.mnav-chips) + ul.mnav-chips::before { content: "Kurulum"; grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wa-gri); }
  .mobile-nav.hdr2-mnav .mnav-chips a { justify-content: flex-start; text-align: left; margin: 0 -8px; min-height: 44px; padding: 6px 8px; border-radius: 10px; background: none; box-shadow: none; font-size: 15px; font-weight: 500; color: var(--wa-mor-90); }
  .mobile-nav.hdr2-mnav .mnav-chips a:is(:hover, :focus-visible) { background: var(--wa-acik-gri); box-shadow: none; }
  .mobile-nav.hdr2-mnav .mnav-chips a:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: -2px; }
  .mobile-nav.hdr2-mnav .mnav-chips a[aria-current="page"] { background: none; box-shadow: none; color: var(--wa-mor-40); }
  .mobile-nav.hdr2-mnav .mnav-all { margin: 0; padding: 10px 0; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--wa-mor-40); }
  .hdr2-sheet .hdr2-mnav-foot { flex: none; margin: 0; display: grid; gap: 8px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--v2-hair); background: none; }
  .hdr2-sheet .hdr2-mnav-user { min-height: 48px; font-size: 15px; color: var(--wa-mor-90); border-color: rgba(44, 4, 93, 0.24); }
  .hdr2-sheet .hdr2-mnav-user:hover { border-color: rgba(44, 4, 93, 0.48); }
  .hdr2-sheet .hdr2-mnav-cta { min-height: 52px; font-size: 15px; background: var(--wa-mor-40); color: var(--wa-beyaz); }
  .hdr2-sheet .hdr2-mnav-cta:hover { background: var(--wa-mor-50); }
  .hdr2-sheet .hdr2-mnav-user:focus-visible, .hdr2-sheet .hdr2-mnav-cta:focus-visible { outline: 2px solid var(--wa-mor-40); outline-offset: 2px; border-radius: 999px; }
}
@media (max-width: 860px) {
  .hdr2-sheet { max-width: none; max-height: calc(100dvh - 24px); }
}
/* Bulanıklık yoksa (eski tarayıcı): açık ton düz beyaz */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .header.hdr2.hdr2[data-ton="acik"] .header-inner.hdr2-pill::before { background: rgba(255, 255, 255, 0.97); }
}

/* ============================================================================
   Telefondaki alt çubuk (FloatingWidgets .mobile-bar; ölçü ve davranış site.css + site.js), yalnız bu üst menünün olduğu
   sayfada: zemin tonu (ust-menu.js .mobile-bar[data-ton]). Koyu bölümde koyu cam, açık bölümde açık cam; ölçü ve konum değişmez,
   belirme yalnız saydamlıkla
   ========================================================================== */
@media (max-width: 720px) {
  body:has(> .header.hdr2) .mobile-bar {
    background: rgba(10, 6, 19, 0.78); border-color: var(--v2-hair-d); box-shadow: 0 12px 32px -12px rgba(10, 6, 19, 0.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    /* Belirme yalnız saydamlıkla (aşağıdan kayma yok): çubuk kayarak girerken aynı anda incelirse (aşağı kaydırırken ikisi birlikte
       olur) Chrome dönüşümlü kutuyu ölçüp 0,02'lik yerleşim kayması sayıyordu (10.10 akşam ölçümü) */
    transform: translate(-50%, 0);
    transition: opacity .3s ease, height .3s ease, border-radius .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  body:has(> .header.hdr2) .mobile-bar .mb-item { transition: background-color .2s ease, color .3s ease; }
  body:has(> .header.hdr2) .mobile-bar .mb-item:focus-visible { outline: 2px solid var(--wa-mor-10); outline-offset: -2px; }
  body:has(> .header.hdr2) .mobile-bar[data-ton="acik"] { background: rgba(255, 255, 255, 0.82); border-color: var(--v2-hair); box-shadow: var(--v2-shadow); }
  body:has(> .header.hdr2) .mobile-bar[data-ton="acik"] .mb-item { color: var(--wa-mor-90); }
  body:has(> .header.hdr2) .mobile-bar[data-ton="acik"] .mb-item:active { background: rgba(44, 4, 93, 0.05); }
  body:has(> .header.hdr2) .mobile-bar[data-ton="acik"] .mb-item:focus-visible { outline-color: var(--wa-mor-40); }
  body:has(> .header.hdr2) .mobile-bar[data-ton="acik"] .mb-avatar img { box-shadow: 0 0 0 2px var(--wa-mor-40); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 720px) {
    body:has(> .header.hdr2) .mobile-bar { background: rgba(10, 6, 19, 0.96); }
    body:has(> .header.hdr2) .mobile-bar[data-ton="acik"] { background: rgba(255, 255, 255, 0.97); }
  }
}

/* Hareketi azalt (?hareket=1 → html.hv2-motion: tercih yok sayılır): telefon sayfası, panel ve alt çubuk anında son hâlde */
@media (prefers-reduced-motion: reduce) {
  html:not(.hv2-motion) .hdr2-sheet, html:not(.hv2-motion) .mobile-nav.hdr2-mnav { transition: none; }
  html:not(.hv2-motion) .header.hdr2 :is(.mega-link, .mega-chip, .mega-ic, .ust-card-wa, .ust-contact-link svg) { transition: none; }
  html:not(.hv2-motion) body:has(> .header.hdr2) .mobile-bar, html:not(.hv2-motion) body:has(> .header.hdr2) .mobile-bar .mb-item { transition: none; }
}