/* Kaynak: Site Header.dc.html */
body { margin:0; background:#fff; -webkit-font-smoothing:antialiased; }
.fes-app a { color:#174A91; text-decoration:none; }
.fes-app a:hover { color:#092D5B; }
.fes-app [data-dd] > [data-dd-panel] { opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none; transition:opacity .18s cubic-bezier(.2,.75,.25,1), transform .18s cubic-bezier(.2,.75,.25,1), visibility .18s; }
.fes-app [data-dd] > [data-dd-panel]::before { content:''; position:absolute; left:0; right:0; top:-22px; height:22px; }
.fes-app [data-dd]::after { content:''; position:absolute; left:0; right:0; top:100%; height:26px; }
.fes-app [data-dd]:hover > [data-dd-panel],
.fes-app [data-dd]:focus-within > [data-dd-panel] { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
/* --- Canlı arama (assets/js/fes-search.js) ------------------------------- */
/* Escape ile kapatma: panel hover/focus-within ile açıldığı için, odak
tetikleyicide kalırken kapatmanın tek yolu durum niteliği.
Özgüllük (0,5,0) BİLEREK yüksek: aynı `[data-dd]:focus-within` bloğunun bir
kopyası sayfa stillerinde de var (ör. pages/home.css) ve o dosya bundan SONRA
yükleniyor; (0,4,0) beraberliği sıraya düşer ve panel kapanmazdı (ölçüldü). */
.fes-app [data-dd][data-fes-search][data-fes-search-closed] > [data-dd-panel] { opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none; }
/* İstek uçarken sakin geri bildirim: yeni öğe yok, mevcut liste soluyor
(JS yalnız `data-loading` niteliğini koyup kaldırır). */
.fes-app [data-fes-search-results] { transition:opacity .16s cubic-bezier(.2,.75,.25,1); }
.fes-app [data-fes-search-results][data-loading] { opacity:.55; }
/* Klavyeyle gezinilen sonuç: tasarımın kart hover görünümünün aynısı
(bkz. [data-fh="193f1a56"]). */
.fes-app [data-fes-search-results] .is-active { background:#F3F8FD; color:#092D5B; }
/* --- Claude Design style-hover/focus/active dönüşümleri --- */
.fes-app [data-fh="4a99a983"]:hover { color:#fff; }
.fes-app [data-fh="368631af"]:hover { opacity:.82; }
.fes-app [data-fh="307de775"]:hover { background:rgba(23,74,145,.09); color:#092D5B; transform:translateY(-1px); }
.fes-app [data-fh="84243eca"]:hover { background:#F3F8FD; color:#174A91; }
.fes-app [data-fh="84b52122"]:hover { background:rgba(23,74,145,.09); color:#174A91; transform:translateY(-1px); }
.fes-app [data-fh="193f1a56"]:hover { background:#F3F8FD; color:#092D5B; }
.fes-app [data-fh="d575526c"]:hover { color:#092D5B; }
.fes-app [data-fh="6d2e0381"]:hover { border-color:#174A91; background:#fff; transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(9,45,91,.4); }
.fes-app [data-fh="868c6aa1"]:hover { background:#C4342D; color:#fff; transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(216,61,53,.7); }
.fes-app [data-fh="ab046d6a"]:hover { border-color:#174A91; background:#F7FAFD; color:#092D5B; }
.fes-app [data-fh="b65940cc"]:hover { background:#C4342D; color:#fff; }
/* =========================================================================
RESPONSIVE — tasarımda (1440 px) @media yok; kırılımlar burada tanımlanır.
Kural: masaüstü (>=1100px) görünümü DEĞİŞMEZ; her şey @media içinde.
Tasarımdan gelen inline style'lar stylesheet'i yendiği için, inline yazılmış
bir özelliği ezen her kuralda `!important` zorunludur (nedeni satır içinde).
========================================================================= */
/* --- Hamburger + mobil arama: taban durum gizli ------------------------- */
/* (0,2,0) — tema reset'indeki `button{display:block}` (0,0,1) bunu yenemez. */
.fes-app .fes-hdr__burger,
.fes-app .fes-hdr__msearch { display: none; }
/* --- Drawer ------------------------------------------------------------- */
/* Drawer 'ın DIŞINDA (backdrop-filter fixed torunlar için containing
block yaratır). Taban `display:none`; inline display YOK ki durum niteliği
kazanabilsin. */
.fes-app .fes-drawer { position: fixed; inset: 0; z-index: 90; display: none; font-family: Manrope, Arial, sans-serif; }
.fes-app .fes-drawer[data-open] { display: block; }
/* Ekran genişleyince açık kalmış drawer masaüstünü kapatmasın. */
@media (min-width: 1100px) { .fes-app .fes-drawer[data-open] { display: none; } }
.fes-app .fes-drawer__scrim { position: absolute; inset: 0; background: rgba(6,29,61,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.fes-app .fes-drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(360px, 90vw); max-width: 100%;
display: flex; flex-direction: column;
background: #fff; box-shadow: -24px 0 60px -22px rgba(6,29,61,.55);
animation: fesDrawerIn .24s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes fesDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
.fes-app .fes-drawer__panel { animation: none; transform: none; }
}
.fes-app .fes-drawer__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #E7EEF7; }
.fes-app .fes-drawer__brand { display: flex; align-items: center; min-width: 0; }
.fes-app .fes-drawer__brand img { display: block; width: auto; height: auto; max-height: 34px; max-width: 100%; }
.fes-app .fes-drawer__close { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: #F3F8FD; color: #092D5B; cursor: pointer; }
.fes-app .fes-drawer__close:hover { background: #E7EEF7; color: #092D5B; }
.fes-app .fes-drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 14px 18px; }
.fes-app .fes-drawer__searchbox { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid #DCE5EF; border-radius: 11px; background: #fff; }
/* 16px zorunlu: iOS Safari daha küçük yazılı alana odaklanınca sayfayı zoom'lar. */
.fes-app .fes-drawer__searchbox input { flex: 1 1 auto; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font: 600 16px Manrope, Arial, sans-serif; color: #10233C; }
.fes-app .fes-drawer__nav { margin-top: 14px; }
.fes-app .fes-drawer__nav > [data-fes-acc] { display: flex; flex-direction: column; gap: 2px; }
.fes-app .fes-drawer__link { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border-radius: 10px; color: #10233C; font-size: 15px; font-weight: 700; }
.fes-app .fes-drawer__link:hover { background: rgba(23,74,145,.09); color: #092D5B; }
.fes-app .fes-drawer__group { display: flex; flex-direction: column; }
.fes-app .fes-drawer__grouprow { display: flex; align-items: center; gap: 4px; }
.fes-app .fes-drawer__grouprow > .fes-drawer__link { flex: 1 1 auto; }
.fes-app .fes-drawer__accbtn { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: #6C7F92; cursor: pointer; }
.fes-app .fes-drawer__accbtn:hover { background: #F3F8FD; color: #174A91; }
.fes-app .fes-drawer__accbtn svg { transition: transform .18s cubic-bezier(.2,.75,.25,1); }
.fes-app [data-fes-acc-item][data-open] > .fes-drawer__grouprow > .fes-drawer__accbtn svg { transform: rotate(180deg); }
.fes-app .fes-drawer__sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 8px 12px; padding-left: 10px; border-left: 2px solid #E7EEF7; }
.fes-app [data-fes-acc-item][data-open] > .fes-drawer__sub { display: flex; }
.fes-app .fes-drawer__sublink { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 9px; color: #40556E; font-size: 14px; font-weight: 650; }
.fes-app .fes-drawer__sublink:hover { background: #F3F8FD; color: #174A91; }
.fes-app .fes-drawer__foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #E7EEF7; background: #F7FAFD; }
.fes-app .fes-drawer__ctas,
.fes-app .fes-drawer__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fes-app .fes-drawer__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 11px; font-size: 13.5px; font-weight: 750; white-space: nowrap; }
.fes-app .fes-drawer__cta--ghost { border: 1px solid #DCE5EF; background: #fff; color: #092D5B; }
.fes-app .fes-drawer__cta--ghost:hover { border-color: #174A91; background: #fff; color: #092D5B; }
.fes-app .fes-drawer__cta--solid { background: #D83D35; color: #fff; }
.fes-app .fes-drawer__cta--solid:hover { background: #C4342D; color: #fff; }
.fes-app .fes-drawer__cta--call { border: 1px solid #DCE5EF; background: #fff; color: #092D5B; }
.fes-app .fes-drawer__cta--call:hover { border-color: #174A91; background: #fff; color: #092D5B; }
.fes-app .fes-drawer__cta--wa { background: #12A84E; color: #fff; }
.fes-app .fes-drawer__cta--wa:hover { background: #0E8C41; color: #fff; }
/* --- <1100px: ana menünün tamamı drawer'a ------------------------------- */
/* Menü WP'den geliyor (öğe sayısı/uzunluğu kullanıcı kontrolünde); tek tek
öğe gizlemek konuma bağlı ve kırılgan olurdu. Bu yüzden nav bütün olarak
drawer'a taşınır, tasarımın aksiyon kümesi (arama/panel/sepet) yerinde kalır. */
@media (max-width: 1099.98px) {
.fes-app .fes-hdr__nav { display: none !important; } /* inline display:flex */
.fes-app .fes-hdr__actions { margin-left: auto !important; } /* inline margin-left:clamp() */
.fes-app .fes-hdr__burger { display: inline-flex; }
}
/* --- <768px: logo + arama ikonu + sepet + hamburger ---------------------- */
@media (max-width: 767.98px) {
/* Üst şeritte SOSYAL ikonlar düşer, E-POSTA KALIR (müşteri talebi:
"üst mail barında sadece numara yazıyor, maili de yazabilir miyiz").
Sosyal ikonlar düştüğü için şeridin sağ yarısı boşalıyor; telefon sola,
e-posta sağa yaslanıyor ve iki uç arasındaki tüm genişlik kullanılıyor.
E-posta 33 karakter, telefon 17 — 12px'te 390px'e sığmıyor, bu yüzden
punto ve boşluklar kademeli daraltıldı (ölçüldü). */
.fes-app .fes-hdr__social { display: none !important; } /* inline display:flex */
.fes-app .fes-hdr__topmail { display: inline-flex !important; }
.fes-app .fes-hdr__topbar > div { padding: 0 12px !important; gap: 8px !important; }
.fes-app .fes-hdr__topbar > div > div:first-child {
flex: 1 1 auto !important;
min-width: 0;
justify-content: space-between !important;
gap: 8px !important; /* inline gap:22px */
}
.fes-app .fes-hdr__topbar a { font-size: 11px !important; gap: 5px !important; }
.fes-app .fes-hdr__topbar a svg { width: 12px; height: 12px; flex: 0 0 auto; }
/* Masaüstü arama paneli 404px sabit genişlikte — dar ekranda viewport'u
aşardı; yerine drawer'daki arama alanına odaklanan buton. */
.fes-app .fes-hdr__search { display: none !important; } /* inline display:inline-flex */
.fes-app .fes-hdr__msearch { display: inline-flex; }
.fes-app .fes-hdr__panel { display: none !important; } /* inline display:inline-flex */
.fes-app .fes-hdr__row { gap: 8px !important; } /* inline gap:clamp() */
.fes-app .fes-hdr__actions { gap: 2px !important; } /* inline gap:8px */
.fes-app .fes-hdr__logo { height: 46px !important; } /* inline height:58px */
.fes-app .fes-hdr__logo img { max-height: 36px !important; } /* inline max-height:46px */
}
/* --- Çok dar telefonlar: sepet etiketi kalsın, kutu daralsın ------------- */
@media (max-width: 399.98px) {
.fes-app .fes-hdr__cart > a { padding: 0 10px !important; gap: 5px !important; font-size: 12px !important; } /* inline padding/gap/font kısayolu */
.fes-app .fes-hdr__logo img { max-height: 32px !important; }
}
/* ---------------------------------------------------------------------------
İKON BUTONLARI — tema reset'i dolgu basıyor, ikon eziliyor.
ÖLÇÜLDÜ: `.fes-hdr__burger` inline `width:44px; height:44px` alıyor ama
dolguya dokunmuyor. hello-elementor / Elementor Kit'in genel
`button { padding: 8px 16px }` kuralı kazanıyor ve `box-sizing:border-box`
ile içerik kutusu 44 − 32 = 12px kalıyor: `width="22"` olan SVG 12px'e
sıkışıyor (hamburger 12x22, arama ikonu 12x20).
`:is()` ile özgüllük (0,2,0)'a çıkarılıyor; tema kuralı (0,0,1) yenemez.
--------------------------------------------------------------------------- */
.fes-app :is( .fes-hdr__burger, .fes-hdr__msearch, [data-fes-search-trigger], [data-fes-drawer-close] ) {
padding: 0 !important;
}
.fes-app :is( .fes-hdr__burger, .fes-hdr__msearch, [data-fes-search-trigger], [data-fes-drawer-close] ) > svg {
flex: 0 0 auto;
}
/* ---------------------------------------------------------------------------
SEPET BUTONU — müşteri kararıyla dolu kırmızıdan sade ikona çevrildi.
Artık hayalet (ghost) buton olduğu için tema reset'inin
`a:hover` / `button:hover` kuralları rengi bozabiliyor; açık hover şart
(bkz. README "Her solid CTA'nın açık bir marka :hover kuralı olmalı").
--------------------------------------------------------------------------- */
.fes-app .fes-hdr__cart > a:hover,
.fes-app .fes-hdr__cart > a:focus-visible {
background: #F3F8FD;
border-color: #174A91;
color: #092D5B;
}
/* --- <360px: e-posta yine de kalsın, punto bir kademe daha insin ---------- */
@media (max-width: 359.98px) {
.fes-app .fes-hdr__topbar a { font-size: 10px !important; gap: 4px !important; }
.fes-app .fes-hdr__topbar a svg { width: 11px; height: 11px; }
.fes-app .fes-hdr__topbar > div { padding: 0 10px !important; }
}
/* -----------------------------------------------------------------------------
JS yokken başlık: hamburger/arama gizlenir, menü akan satıra döner.
Daha önce `