:root {
  /* Modern Mimari paleti */
  --color-text: #111111;        /* Antrasit — başlıklar */
  --color-body: #1f1f1f;        /* Koyu Gri — paragraf */
  --color-muted: #7a7a7a;       /* Muted Gri — ikincil metin */
  --color-bg: #fafaf7;          /* Off-White — sayfa arka planı */
  --color-soft: #f5f3ee;        /* Warm Beige — kart/bölüm arka planı */
  --color-accent: #e85d04;      /* Bakır Turuncu — ana vurgu, eyebrow, linkler, CTA */
  --color-accent-dark: #c24800; /* Koyu Turuncu — hover/aktif */
  --color-dark: #111111;        /* Antrasit — sayaç şeridi, koyu bölümler */
  --color-cta: #e85d04;
  --color-cta-text: #ffffff;
  --color-line: #e5e5e5;        /* Border */
  --color-whatsapp: #25d366;    /* WhatsApp yeşili — sadece WhatsApp butonu */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw: 1360px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* clip, hidden'dan farklı olarak kaydırma kabı OLUŞTURMAZ; bu yüzden .site-header'daki
   position: sticky çalışmaya devam eder. hidden ise bir eksende visible dışında değer
   verildiğinde diğer ekseni auto'ya çevirip elemanı kaydırma kabına dönüştürüyordu. */
html, body { overflow-x: clip; max-width: 100%; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--font-sans); color: var(--color-body); background: var(--color-bg); line-height: 1.7; font-size: 1.02rem; -webkit-font-smoothing: antialiased; }
.scroll-anchor { scroll-margin-top: 110px; }
h1, h2, h3, h4 { color: var(--color-text); text-wrap: balance; }
/* Tüm paragraflar iki yana yaslı (justify) */
p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
ul { list-style: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.15rem, 3vw, 2.25rem); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; }
.header-top { background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); color: var(--color-muted); font-size: .78rem; }
.header-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .05rem; padding-bottom: .05rem; }
.header-contact { display: flex; align-items: center; gap: 1.4rem; }
.header-contact a { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-muted); }
.header-contact a:hover { color: var(--color-accent); }
/* Logo solda tek başına (ferah); menü sağa hizalı, dil/3D grubuna yakın. */
.header-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 1rem 1.75rem; border-bottom: 1px solid var(--color-line); background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); transition: background .25s, border-color .25s; }
.logo { display: inline-flex; align-items: center; justify-self: start; margin-left: clamp(.5rem, 1.5vw, 1.25rem); }
.logo img { height: 62px; width: auto; }
.header-right { justify-self: end; display: flex; align-items: center; gap: .75rem; }
.main-nav { justify-self: end; display: flex; align-items: center; gap: 1.15rem; font-size: .95rem; }
.main-nav > a { color: var(--color-text); transition: color .15s; white-space: nowrap; }
.main-nav > a:hover { color: var(--color-accent); }
.main-nav .nav-3d { background: var(--color-accent); color: #fff !important; font-weight: 700; border-radius: 7px; padding: .5rem 1rem; box-shadow: 0 6px 16px -4px rgba(232,93,4,.45); animation: nav3dPulse 2.6s ease-in-out infinite; }
.main-nav .nav-3d:hover { background: var(--color-accent-dark); transform: translateY(-1px); }
@keyframes nav3dPulse { 0%,100% { box-shadow: 0 6px 16px -4px rgba(232,93,4,.45); } 50% { box-shadow: 0 6px 22px 0 rgba(232,93,4,.6); } }
@media (prefers-reduced-motion: reduce) { .main-nav .nav-3d { animation: none; } }
.lang-switch { display: inline-flex; align-items: center; gap: .12rem; border: 1px solid var(--color-line); border-radius: 8px; padding: .16rem; background: rgba(255,255,255,.55); }
.lang-opt { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 6px; font-size: .82rem; font-weight: 700; color: var(--color-muted); transition: background .15s, color .15s; }
.lang-opt.active { background: var(--color-accent); color: #fff; }
.lang-opt:not(.active):hover { color: var(--color-accent); }
.lang-flag { font-size: 1rem; line-height: 1; }
.lang-switch:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* Hamburger: çizgiler 24px kalır, kutu 44×44 olur (dokunma hedefi). header-main
   zaten ~70px yüksek olduğu için bu büyüme düzeni hiç etkilemez. */
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: .3rem; min-width: 44px; min-height: 44px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--color-text); display: block; transition: background .25s; }

/* Ara genişlik (982–1320px): tek satır nav taşmasın diye ölçüleri sıkıştır. */
@media (min-width: 981px) and (max-width: 1320px) {
  .header-main { column-gap: .9rem; padding-left: .9rem; padding-right: .9rem; }
  .logo { margin-left: .25rem; }
  .logo img { height: 52px; }
  .main-nav { gap: .8rem; font-size: .85rem; }
  .header-right { gap: .5rem; }
  .main-nav .nav-3d { padding: .45rem .8rem; }
}

/* Saydam (overlay) header — hero görselinin üstünde */
.site-header.overlay { position: fixed; left: 0; right: 0; top: 0; }
.site-header.overlay .header-main { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.overlay:not(.scrolled) .main-nav > a { color: #fff; }
.site-header.overlay:not(.scrolled) .logo img { filter: brightness(0) invert(1); }
.site-header.overlay:not(.scrolled) .lang-switch { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.14); }
.site-header.overlay:not(.scrolled) .lang-opt:not(.active) { color: rgba(255,255,255,.9); }
.site-header.overlay:not(.scrolled) .nav-toggle span { background: #fff; }
.site-header.overlay:not(.scrolled) .header-top { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.overlay:not(.scrolled) .header-contact a { color: rgba(255,255,255,.9); }
.site-header.overlay:not(.scrolled) .header-contact a:hover { color: #fff; }
.site-header.overlay:not(.scrolled) .social--dark a { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }
.site-header.overlay.scrolled .header-main { background: rgba(255,255,255,.72); border-bottom: 1px solid var(--color-line); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
/* Mobil açılır menü beyaz zeminli olduğundan linkler koyu kalır */
@media (max-width: 980px) {
  .site-header.overlay:not(.scrolled) .main-nav > a { color: var(--color-text); }
  .site-header.overlay:not(.scrolled) .main-nav .nav-3d { color: #fff !important; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .6rem; background: var(--color-cta); color: var(--color-cta-text); padding: .9rem 1.7rem; border-radius: 4px; font-weight: 600; transition: background .15s, transform .15s; }
.btn:hover { background: var(--color-accent-dark); transform: translateY(-1px); }
.btn::after { content: '→'; }
.btn-dark { background: var(--color-dark); color: #fff; }
.btn-dark:hover { background: #000; }
.link { color: var(--color-accent); font-weight: 600; display: inline-block; }

/* Kart içi "Keşfet / İncele" CTA'ları — buton görünümü (outline → kart hover'da dolar) */
.explore-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid var(--color-accent); color: var(--color-accent); background: transparent; padding: .5rem 1.05rem; border-radius: 8px; font-weight: 600; font-size: .88rem; line-height: 1; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.explore-btn > span { transition: transform .2s; }
.cat-card:hover .explore-btn, .carousel-item:hover .explore-btn { background: var(--color-accent); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px -7px rgba(232,93,4,.5); }
.cat-card:hover .explore-btn > span, .carousel-item:hover .explore-btn > span { transform: translateX(3px); }
.link:hover { color: var(--color-accent-dark); text-decoration: underline; }

/* Floating WhatsApp button (sağ alt) */
.floating-contact { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: inline-flex; align-items: center; gap: .55rem; background: var(--color-whatsapp); color: #fff; padding: .85rem 1.4rem; border-radius: 40px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.floating-contact:hover { filter: brightness(.96); }
.floating-contact svg { width: 22px; height: 22px; fill: currentColor; }
/* NOT: Burada eskiden ≤600px için "yuvarlak buton" kuralı vardı; aşağıdaki mobil
   alt çubuk bloğu bu butonu zaten ≤700px'de tamamen gizlediği için o kural hiç
   çalışmıyordu (ölü kod) — kaldırıldı. */

/* Mobil alt aksiyon çubuğu — yalnızca mobilde (Ara + WhatsApp) */
.mobile-bar { display: none; }
@media (max-width: 700px) {
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-top: 1px solid var(--color-line); box-shadow: 0 -6px 22px rgba(17,17,17,.12);
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
  /* min-height: başparmak bölgesindeki birincil aksiyonlar — 44px minimumun üstünde. */
  .mobile-bar-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .8rem .5rem; font-weight: 700; font-size: 1rem; line-height: 1; border-radius: 12px; }
  .mobile-bar-btn svg { width: 21px; height: 21px; fill: currentColor; flex: 0 0 auto; }
  .mb-call { color: var(--color-accent); background: var(--color-soft); border: 1px solid var(--color-line); }
  .mb-call:active { background: #ece7de; }
  .mb-wa { color: #fff; background: var(--color-whatsapp); box-shadow: 0 6px 16px -6px rgba(37,211,102,.6); }
  .mb-wa:active { filter: brightness(.95); }
  /* Bar açıkken sağ-alt floating WhatsApp gizli (çakışmasın) */
  .floating-contact { display: none; }
  /* İçerik/footer barın altında kalmasın */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ==== Dokunmatik cihazlar: hedef boyutu + basma geri bildirimi ====
   Kapsam (hover: none) and (pointer: coarse) — fare kullanan masaüstünde tek
   piksel değişmez. Ekran genişliği değil, GİRDİ TÜRÜ ölçülür; dar pencereye
   küçültülmüş masaüstü tarayıcı bundan etkilenmez.

   İlke: header üst bardaki ikincil ikonlar (telefon, sosyal, dil) GÖRSEL olarak
   büyümez — dokunma alanları görünmez şekilde 44px'e genişler. Yoğun yardımcı
   kontroller için Material/Apple HIG'in standart yaklaşımı budur; üst barı
   büyütmek mobilde ekranın en değerli yerini (logo + hero) çalardı.
   Birincil kontroller (hamburger, menü satırları, alt çubuk) ise gerçekten
   büyütüldü — onlar yukarıdaki bloklarda. */
@media (hover: none) and (pointer: coarse) {
  /* Üst bar satırı 44px'e tamamlanır ki genişleyen hedefler header-main'e
     taşıp logonun dokunuşlarını çalmasın. Bar ~40px'ten 44px'e çıkar. */
  .header-top-inner { min-height: 44px; }

  /* Telefon / e-posta / adres: ikon 13px kalır, dokunma alanı 44px olur */
  .header-contact a { min-height: 44px; }

  /* Sosyal ikonlar: kuralları .social tanımlarının HEMEN ALTINDA, aşağıdaki
     ayrı dokunmatik bloğunda. Buraya yazılamaz — .social temel kuralları bu
     bloktan sonra geldiği için aynı özgüllükte onlar kazanır ve ezilirdi. */

  /* Dil seçici: pill aynı boyutta, hedef dikeyde 44px. Yatayda genişletilmez —
     TR ve EN yan yana durduğu için hedefleri üst üste binerdi. */
  .lang-opt { position: relative; }
  .lang-opt::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

  /* ---- Basma geri bildirimi ----
     Dokunmatikte :hover yoktur; ikon 44px olsa bile basınca tepki vermezse
     kullanıcı ikinci kez basar. iOS'un kontrolsüz mavi vurgusu kapatılıp
     yerine her dokunulabilir öğeye açık bir :active durumu veriliyor.
     (Vurguyu geri bildirim koymadan kapatmak erişilebilirlik kaybıdır.) */
  html { -webkit-tap-highlight-color: transparent; }

  .lang-opt:active, .header-contact a:active { opacity: .55; }
  .nav-toggle:active span { background: var(--color-accent); }
  .main-nav > a:not(.nav-3d):active, .main-nav .nav-parent:active, .nav-dropdown a:active { background: var(--color-soft); }
  .main-nav .nav-3d:active { background: var(--color-accent-dark); }
  .btn:active, .explore-btn:active { transform: translateY(1px); filter: brightness(.95); }
  .floating-contact:active { filter: brightness(.9); }

  /* Dokunmatikte :hover "yapışır" — parmak çekildikten sonra da açık kalır.
     Hover'a bağlı dönüşümler nötrleniyor, :active zaten geri bildirimi veriyor. */
  .btn:hover, .explore-btn:hover { transform: none; }
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .btn:active, .explore-btn:active { transform: none; }
}

/* ==== İçerik gövdesi medyası: editör videoları + görselleri ====
   Blog (.br-body), ürün (.prod-content), kategori (.cat-content), proje (.prose) */
/* Video bloğu — konteyner içinde: başlık ÜSTTE, 960×540 (16:9, 15px köşe) video ORTADA,
   açıklama ALTTA. Ortalanmış, tam mobil-uyumlu. */
.ce-video { margin: 1.9rem auto; width: 100%; max-width: 960px; display: block;
  background: var(--color-soft, #f6f4ef); border: 1px solid var(--color-line); border-radius: 18px; padding: 20px; }
.ce-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 15px; overflow: hidden; background: #0d0d0d;
  box-shadow: 0 20px 44px -26px rgba(17,17,17,.5); }
.ce-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* .ce-video ön eki: blog .br-body figcaption/typografi kurallarını özgüllükle geçer */
.ce-video .ce-video-title { display: block; font-weight: 700; color: var(--color-text); font-size: 1.1rem; line-height: 1.35;
  text-align: justify; margin: 0 0 25px; }        /* başlık videonun üstünde, 25px boşluk */
.ce-video .ce-video-desc { display: block; color: var(--color-muted); font-size: .95rem; line-height: 1.6;
  text-align: justify; margin: 25px 0 0; }         /* açıklama videonun altında, 25px boşluk */

/* İçerik görselleri — max 1000×1000, ortalanabilir, mobilde tam sığar */
.br-body img, .prod-content img, .cat-content img, .prose img { max-width: min(100%, 1000px); height: auto; border-radius: 12px; }
/* Editör "ortala" hizalaması (CKEditor figure / TinyMCE inline / text-align) */
/* CKEditor figure ile sarılı görseller (image2): figür içeriğe göre daralır ki ortalanabilsin */
.br-body figure.image, .prod-content figure.image, .cat-content figure.image, .prose figure.image { display: table; max-width: min(100%, 1000px); margin: 1.5rem 0; }
.br-body figure.image > img, .prod-content figure.image > img, .cat-content figure.image > img, .prose figure.image > img { display: block; max-width: 100%; height: auto; }
/* Figürü ortala/yasla: içindeki img'in sınıfına göre (img-center/left/right) */
.br-body figure.image:has(img.img-center), .prod-content figure.image:has(img.img-center), .cat-content figure.image:has(img.img-center), .prose figure.image:has(img.img-center) { margin-left: auto; margin-right: auto; }
.br-body figure.image:has(img.img-right), .prod-content figure.image:has(img.img-right), .cat-content figure.image:has(img.img-right), .prose figure.image:has(img.img-right) { margin-left: auto; margin-right: 0; }
.br-body figure.image:has(img.img-left), .prod-content figure.image:has(img.img-left), .cat-content figure.image:has(img.img-left), .prose figure.image:has(img.img-left) { margin-left: 0; margin-right: auto; }
.image-style-align-center, .image_align-center, figure.align-center { margin-left: auto !important; margin-right: auto !important; }
/* Editör "Styles" menüsü görsel hizalama sınıfları (blog CKEditor) */
.br-body img.img-center, .prod-content img.img-center, .cat-content img.img-center, .prose img.img-center { display: block; margin-left: auto; margin-right: auto; }
.br-body img.img-left, .prod-content img.img-left, .cat-content img.img-left, .prose img.img-left { float: left; margin: .3rem 1.4rem .9rem 0; }
.br-body img.img-right, .prod-content img.img-right, .cat-content img.img-right, .prose img.img-right { float: right; margin: .3rem 0 .9rem 1.4rem; }
@media (max-width: 600px) {
  /* Mobilde yaslama yerine tam-genişlik ortalı (dar ekranda float sıkışmasın) */
  .br-body img.img-left, .br-body img.img-right, .prod-content img.img-left, .prod-content img.img-right,
  .cat-content img.img-left, .cat-content img.img-right, .prose img.img-left, .prose img.img-right { float: none; display: block; margin: 1rem auto; }
}
.br-body [style*="text-align:center"] img, .br-body [style*="text-align: center"] img,
.prod-content [style*="text-align:center"] img, .prod-content [style*="text-align: center"] img,
.cat-content [style*="text-align:center"] img, .cat-content [style*="text-align: center"] img,
.prose [style*="text-align:center"] img, .prose [style*="text-align: center"] img { display: inline-block; }
/* TinyMCE'nin "display:block;margin:auto" ile ortaladığı görseller zaten çalışır */

@media (max-width: 600px) {
  .ce-video { margin: 1.4rem auto; }
  .ce-video .ce-video-title { font-size: 1rem; }
}

/* Sosyal medya ikonları (canlı marka renkleri) */
.social { display: flex; align-items: center; gap: .55rem; }
.social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-line); background: #fff; color: var(--color-muted); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.social svg { width: 18px; height: 18px; }
.social a:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.social a.ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social a.fb:hover { background: #1877f2; }
.social a.yt:hover { background: #ff0000; }
/* Koyu bağlam (header üst bar) */
.social--dark a { width: 22px; height: 22px; background: rgba(0,0,0,.04); border-color: var(--color-line); color: var(--color-muted); }
.social--dark svg { width: 12px; height: 12px; }

/* Dokunmatik: sosyal ikonlar hem görsel hem dokunma açısından büyür.
   Bu blok .social / .social--dark tanımlarının ALTINDA olmak ZORUNDA —
   yukarıdaki dokunmatik bloğuna yazılsaydı aynı özgüllükteki bu temel
   kurallar (daha sonra geldikleri için) onu ezerdi. */
@media (hover: none) and (pointer: coarse) {
  /* Footer (geniş, açık zemin): 38 → 44px. Görsel = dokunma alanı. */
  .social a { width: 44px; height: 44px; }
  .social svg { width: 20px; height: 20px; }

  /* Header üst bar (dar yardımcı şerit): 22 → 36px görsel — belirgin şekilde
     büyür ama şeridi ele geçirmez. Dokunma alanı görünmez halkayla 44×44'e
     tamamlanır; boşluk .7rem'e çıkarıldı ki komşu hedefler çakışmasın. */
  .social--dark { gap: .7rem; }
  .social--dark a { width: 36px; height: 36px; position: relative; }
  .social--dark svg { width: 17px; height: 17px; }
  .social--dark a::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }

  /* Dokunmatikte hover yapışır — nötrlenip yerine :active geri bildirimi. */
  .social a:hover { transform: none; }
  .social a:active { transform: scale(.92); }
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .social a:active { transform: none; }
}

/* Sections */
.section { padding: clamp(3.5rem, 6vw, 6rem) 0; }
/* Yumuşak bant — bölümler arası dinlendirici ritim (beyaz ↔ hafif sıcak) */
.section-soft { background: var(--color-soft); }
.section-tint { background: linear-gradient(180deg, #fff 0%, var(--color-soft) 100%); }
/* eyebrow üst-etiketleri kaldırıldı (geri açmak için display satırını silin) */
.eyebrow { display: none; color: var(--color-accent); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; margin-bottom: .5rem; }
.lead { font-size: 1.15rem; color: var(--color-muted); max-width: 720px; margin-top: 1rem; }

/* Category / card grid (shared) */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.cat-card { border: 1px solid var(--color-line); border-radius: 10px; padding: 2rem; transition: box-shadow .2s, transform .2s; background: #fff; }
.cat-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.08); transform: translateY(-2px); }
.cat-card h3 { margin-bottom: .75rem; }
.cat-card p { color: var(--color-muted); margin-bottom: 1rem; }
/* Görselli kart varyantı (ürün / blog) */
.cat-card--media { padding: 0; overflow: hidden; }
.cat-card--media .cat-media { aspect-ratio: 16 / 10; overflow: hidden; }
.cat-card--media .cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cat-card--media:hover .cat-media img { transform: scale(1.05); }
.cat-card--media .cat-body { padding: 1.6rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--color-line); padding: 3.5rem 1.5rem 1.5rem; margin-top: 4rem; background: var(--color-soft); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: var(--maxw); margin: 0 auto; }
.footer-cols strong { display: block; margin-bottom: .75rem; }
.footer-cols p, .footer-cols li { color: var(--color-muted); margin-bottom: .35rem; }
.footer-cols a:hover { color: var(--color-accent); }
.site-footer .social { gap: 1rem; margin-top: 1rem; }
/* Footer sosyal ikonlar — marka renkleri varsayılan (gri değil) */
.site-footer .social a { color: #fff; border-color: transparent; }
.site-footer .social a.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.site-footer .social a.fb { background: #1877f2; }
.site-footer .social a.yt { background: #ff0000; }
.site-footer .social a:hover { transform: translateY(-2px); filter: brightness(1.08); }
/* Footer iletişim satırları — ikon + metin hizası */
.footer-contact { display: flex; align-items: center; gap: .45rem; }
.footer-ico { width: 1em; height: 1em; flex: 0 0 auto; color: var(--color-accent); }
.copyright { text-align: center; color: var(--color-muted); font-size: .85rem; margin-top: 2.5rem; }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  /* backdrop-filter, mutlak konumlu alt öğeler için konumlandırma kutusu oluşturur.
     .header-main aynı zamanda grid olduğundan, açılan menünün referansı tüm header
     değil ait olduğu grid sütunu oluyordu (solda 47px boşluk) ve overlay header'da
     kaydırma durumuna göre genişlik değişiyordu. Mobilde blur kaldırılıp arka plan
     opaklaştırılıyor — menü zaten opak beyaz, görsel kayıp yok. */
  .header-main,
  .site-header.overlay .header-main,
  .site-header.overlay.scrolled .header-main { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .header-main { background: rgba(255,255,255,.97); }
  .site-header.overlay:not(.scrolled) .header-main { background: transparent; }

  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; gap: 0; padding: .5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--color-line); max-height: calc(100svh - 100%); overflow-y: auto; }
  .main-nav.open { display: flex; }
  /* Menü satırları 48px: açık menüde dikey yer ucuz, yanlış maddeye basmak pahalı. */
  .main-nav > a { display: flex; align-items: center; min-height: 48px; padding: .7rem 0; width: 100%; border-bottom: 1px solid var(--color-line); }
  .main-nav .nav-3d { display: flex; align-items: center; justify-content: center; margin: .7rem 0; width: 100%; text-align: center; animation: none; }
}

/* ---- Header nav dropdown (kategori → ürünler) ---- */
.main-nav .nav-item { position: relative; display: inline-flex; align-items: center; }
.main-nav .nav-parent { color: var(--color-text); transition: color .15s; display: inline-flex; align-items: center; gap: .28rem; cursor: pointer; white-space: nowrap; }
.main-nav .nav-parent:hover { color: var(--color-accent); }
.nav-caret { font-size: .62em; opacity: .85; transition: transform .2s; }
.main-nav .nav-item:hover .nav-caret { transform: rotate(180deg); }
.site-header.overlay:not(.scrolled) .main-nav .nav-parent { color: #fff; }

.nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 240px; background: #fff; border: 1px solid var(--color-line); border-radius: 12px; box-shadow: 0 22px 54px -20px rgba(17,17,17,.34); padding: .45rem; display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 60; }
.main-nav .nav-item:hover .nav-dropdown, .main-nav .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(6px); }
/* parent ile dropdown arasındaki boşlukta hover kopmasın diye görünmez köprü */
.main-nav .nav-item::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-dropdown a { color: var(--color-text) !important; padding: .55rem .85rem; border-radius: 8px; font-size: .9rem; white-space: nowrap; transition: background .15s, color .15s; }
.nav-dropdown a:hover { background: var(--color-soft); color: var(--color-accent) !important; }

@media (max-width: 980px) {
  /* mobilde nav-item ve dropdown düz akışta (genişletilmiş liste) */
  .main-nav .nav-item { display: block; width: 100%; }
  .main-nav .nav-parent { display: flex; align-items: center; min-height: 48px; padding: .7rem 0; width: 100%; border-bottom: 1px solid var(--color-line); justify-content: space-between; }
  .nav-caret { display: none; }
  .main-nav .nav-item::after { display: none; }
  .nav-dropdown { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: 0; border-radius: 0; padding: .1rem 0 .5rem .9rem; min-width: 0; }
  /* Yukarıdaki kural (özgüllük 0,1,0) masaüstündeki :hover/:focus-within kuralını
     (0,4,0) yenemiyordu — medya sorgusu özgüllük eklemez. Dokunmatikte bir bağlantıya
     dokunmak :focus-within tetikleyip translateX(-50%) uyguluyor, alt menü panelin
     dışına kayıp kırpılıyordu. Aynı özgüllükte nötrleniyor. */
  .main-nav .nav-item:hover .nav-dropdown,
  .main-nav .nav-item:focus-within .nav-dropdown { transform: none; }
  /* Alt kategoriler en çok ıskalanan hedeflerdi (~35px) — 48px'e çıkarıldı. */
  .nav-dropdown a { display: flex; align-items: center; min-height: 48px; padding: .5rem 0; font-size: .88rem; white-space: normal; }
  .site-header.overlay:not(.scrolled) .main-nav .nav-parent { color: var(--color-text); }
}
@media (max-width: 700px) {
  .cat-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .section { padding: 3rem 0; }
  .container { padding: 0 1.15rem; }
  .lead { font-size: 1.05rem; }
  .header-main { padding: .75rem 1.15rem; }
  .logo img { height: 46px; }
  .header-contact .hide-sm { display: none; }
  .header-top { font-size: .76rem; }
}

/* Footer.astro scoped styles (component-scoped in Astro, made global here) */
.copyright { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.dev-by a { color: var(--color-accent); font-weight: 700; }
.dev-by a:hover { text-decoration: underline; }
.copyright .sep { color: var(--color-line); }

/* Blog/proje içeriğindeki gömülü YouTube videoları (blog editörü "Video Ekle"
   sihirbazının ürettiği .video-embed bloğu) — 15px köşe yuvarlama, duyarlı boy. */
.video-embed { margin: 1.25rem 0; }
.video-embed iframe { width: 100%; border: 0; border-radius: 15px; display: block; }
.video-16x9 { aspect-ratio: 16/9; }
.video-16x9 iframe { height: 100%; }
.video-shorts { display: flex; gap: 12px; }
.video-shorts .ve-item { flex: 1; aspect-ratio: 9/16; }
.video-shorts .ve-item iframe { height: 100%; }
@media (max-width: 600px) {
  .video-shorts { flex-wrap: wrap; }
  .video-shorts .ve-item { flex: 1 1 46%; }
}
.video-figure { margin: 1.25rem 0; }
.video-figure .video-embed { margin: 0; }
.video-caption { margin-top: .5rem; display: block; }
.video-title { display: block; font-weight: 700; color: var(--color-text); font-size: 1.02rem; }
.video-desc { display: block; color: var(--color-muted); font-size: .92rem; margin-top: .15rem; }