:root {
  --delook-grid-line: rgba(17, 17, 17, 0.032);
  --delook-grid-line-strong: rgba(17, 17, 17, 0.052);
  --delook-grid-glow: rgba(255, 255, 255, 0.92);

  --delook-grid-bg: #f5f5f7;
  --software-top-bg: #eef3fa;
  --software-bottom-bg: #f7f7f4;
  --software-card-bg: rgba(255, 255, 255, 0.84);

  --portfolio-detail-bg: #f4f4f2;
  --portfolio-detail-grid-line: rgba(17, 17, 17, 0.052);
  --portfolio-detail-grid-line-strong: rgba(17, 17, 17, 0.086);
}

/* =========================
   GLOBAL GRID BACKGROUND
========================= */

html,
body.production-page,
body.portfolio-page,
body.project-detail-page,
body.casestudies-page,
body.production-contact-page,
body.software-page,
body.applications-page,
body.software-contact-page,
body.deflow-page,
body.decrypt-page,
body.orbia-page,
body.deflow-privacy-page,
body.orbia-privacy-page {
  background-color: var(--delook-grid-bg) !important;
  background-image:
    radial-gradient(circle at 50% 0%, var(--delook-grid-glow) 0%, transparent 36%),
    linear-gradient(var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(var(--delook-grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line-strong) 1px, transparent 1px) !important;
  background-size:
    100% 100%,
    32px 32px,
    32px 32px,
    160px 160px,
    160px 160px !important;
  background-position:
    center top,
    center top,
    center top,
    center top,
    center top !important;
  background-attachment: fixed !important;
}

/* Portfolio detail daha belirgin grid */

body.portfolio-detail-page {
  background-color: var(--portfolio-detail-bg) !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.82) 0%, transparent 34%),
    linear-gradient(var(--portfolio-detail-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--portfolio-detail-grid-line) 1px, transparent 1px),
    linear-gradient(var(--portfolio-detail-grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--portfolio-detail-grid-line-strong) 1px, transparent 1px) !important;
  background-size:
    100% 100%,
    32px 32px,
    32px 32px,
    160px 160px,
    160px 160px !important;
  background-position:
    center top,
    center top,
    center top,
    center top,
    center top !important;
  background-attachment: fixed !important;
}

/* Eski pseudo-layer sistemi kapalı */

body.production-page::before,
body.portfolio-page::before,
body.portfolio-detail-page::before,
body.project-detail-page::before,
body.casestudies-page::before,
body.production-contact-page::before,
body.software-page::before,
body.applications-page::before,
body.software-contact-page::before,
body.deflow-page::before,
body.decrypt-page::before,
body.orbia-page::before,
body.deflow-privacy-page::before,
body.orbia-privacy-page::before {
  content: none !important;
  display: none !important;
}

/* Ana wrapper’lar arka planı kapatmasın */

.production-main,
.portfolio-main,
.project-main,
.applications-main,
.deflow-main,
.decrypt-main,
.orbia-main,
.software-main {
  background: transparent !important;
  background-image: none !important;
}

/* =========================
   SOFTWARE
========================= */

.software-page,
.software-page .software-main {
  background: transparent !important;
}

.software-page .software-hero,
.software-page .software-product-nav-section,
.software-page .software-apps-section {
  background-color: var(--software-top-bg) !important;
  background-image:
    linear-gradient(var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(var(--delook-grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line-strong) 1px, transparent 1px) !important;
  background-size:
    32px 32px,
    32px 32px,
    160px 160px,
    160px 160px !important;
  background-position:
    center top,
    center top,
    center top,
    center top !important;
  background-attachment: scroll !important;
}

.software-page .software-products-section,
.software-page .software-product-section,
.software-page .software-product-area,
.software-page .software-ecosystem-section,
.software-page .software-products,
.software-page .software-product-list,
.software-page .software-showcase {
  background-color: var(--software-bottom-bg) !important;
  background-image:
    linear-gradient(var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(var(--delook-grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line-strong) 1px, transparent 1px) !important;
  background-size:
    32px 32px,
    32px 32px,
    160px 160px,
    160px 160px !important;
  background-position:
    center top,
    center top,
    center top,
    center top !important;
  background-attachment: scroll !important;
}

.software-page .software-cta-section,
.software-page .software-cta,
.software-page .software-contact-section {
  background: #050505 !important;
  color: #ffffff !important;
}

.software-page .software-product-card,
.software-page .software-card,
.software-page .product-card,
.software-page .app-card,
.software-page .software-product-panel,
.software-page .software-product-item,
.software-page .software-feature-card {
  background-color: var(--software-card-bg) !important;
  background-image: none !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* =========================
   PRODUCTION
========================= */

.production-intro-section,
.production-social-growth,
.production-youtube-studio,
.production-ad-lab,
.production-operating-section {
  background-color: var(--delook-grid-bg) !important;
  background-image:
    linear-gradient(var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(var(--delook-grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line-strong) 1px, transparent 1px) !important;
  background-size:
    32px 32px,
    32px 32px,
    160px 160px,
    160px 160px !important;
  background-attachment: scroll !important;
}

.production-hero,
.production-video-engine,
.production-cta-card {
  background-color: #050505 !important;
}

.production-page .production-product-section:not(.production-video-engine),
.production-page .production-operating-card {
  background-color: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.production-page .production-video-engine {
  background-color: #050505 !important;
}

/* =========================
   PORTFOLIO MAIN
========================= */

.portfolio-page {
  background-color: var(--delook-grid-bg) !important;
}

.portfolio-page .portfolio-main,
.portfolio-page .portfolio-hero,
.portfolio-page .portfolio-grid-section {
  background-color: transparent !important;
  background-image: none !important;
}

.portfolio-page .portfolio-brand-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================
   PORTFOLIO DETAIL
========================= */

.portfolio-detail-page .portfolio-detail-main,
.portfolio-detail-page .brand-project-main {
  background: transparent !important;
  background-image: none !important;
}

/* Hero ve başlık alanında grid görünür */

.portfolio-detail-page .portfolio-detail-hero,
.portfolio-detail-page .brand-project-hero {
  background-color: transparent !important;
  background-image:
    linear-gradient(var(--portfolio-detail-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--portfolio-detail-grid-line) 1px, transparent 1px),
    linear-gradient(var(--portfolio-detail-grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--portfolio-detail-grid-line-strong) 1px, transparent 1px) !important;
  background-size:
    32px 32px,
    32px 32px,
    160px 160px,
    160px 160px !important;
  background-position:
    center top,
    center top,
    center top,
    center top !important;
}

/* Proje liste alanında grid görünür ama tam genişlikte kalır */

.portfolio-detail-page .portfolio-detail-projects,
.portfolio-detail-page .brand-projects-section,
.portfolio-detail-page .brand-projects-wrap,
.portfolio-detail-page .brand-projects-container {
  background-color: transparent !important;
  background-image:
    linear-gradient(var(--portfolio-detail-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--portfolio-detail-grid-line) 1px, transparent 1px),
    linear-gradient(var(--portfolio-detail-grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--portfolio-detail-grid-line-strong) 1px, transparent 1px) !important;
  background-size:
    32px 32px,
    32px 32px,
    160px 160px,
    160px 160px !important;
  background-position:
    center top,
    center top,
    center top,
    center top !important;
}

/* İç wrapper beyaz kapatma yapmasın */

.portfolio-detail-page .portfolio-detail-inner,
.portfolio-detail-page .brand-project-inner,
.portfolio-detail-page .brand-projects-inner,
.portfolio-detail-page .brand-projects-grid {
  background: transparent !important;
  background-image: none !important;
}

/* Portfolio detail proje kartlarının görsel yapısı korunur */

.portfolio-detail-page .brand-project-card {
  background-size: cover !important;
  background-position: center !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Kart içi overlay korunur, grid kart içine girmez */

.portfolio-detail-page .brand-project-card::before,
.portfolio-detail-page .brand-project-card::after {
  pointer-events: none;
}

/* =========================
   PROJECT DETAIL
========================= */

.project-hero,
.project-meta-section,
.project-overview-section,
.project-dynamic-section {
  background: transparent !important;
}

.project-overview-grid article,
.project-video-grid article,
.project-vertical-video-grid article,
.project-text-card,
.project-empty-card,
.project-compare-grid article {
  background-color: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================
   PRODUCT PAGES
========================= */

.deflow-page,
.deflow-page .deflow-main,
.deflow-page section,
.decrypt-page,
.decrypt-page .decrypt-main,
.decrypt-page section,
.orbia-page,
.orbia-page .orbia-main,
.orbia-page section {
  background-color: var(--delook-grid-bg) !important;
  background-image:
    linear-gradient(var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line) 1px, transparent 1px),
    linear-gradient(var(--delook-grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--delook-grid-line-strong) 1px, transparent 1px) !important;
  background-size:
    32px 32px,
    32px 32px,
    160px 160px,
    160px 160px !important;
  background-attachment: scroll !important;
}

.deflow-page .app-card,
.deflow-page .device-card,
.decrypt-page .decrypt-card,
.orbia-page .orbia-card {
  background-color: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================
   HEADER & MENU
========================= */

.site-header {
  z-index: 140 !important;
  background: transparent !important;
}

.menu-backdrop {
  z-index: 190 !important;
}

.side-menu {
  z-index: 200 !important;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 760px) {
  html,
  body.production-page,
  body.portfolio-page,
  body.portfolio-detail-page,
  body.project-detail-page,
  body.casestudies-page,
  body.production-contact-page,
  body.software-page,
  body.applications-page,
  body.software-contact-page,
  body.deflow-page,
  body.decrypt-page,
  body.orbia-page,
  body.deflow-privacy-page,
  body.orbia-privacy-page,
  .software-page .software-hero,
  .software-page .software-products-section,
  .software-page .software-product-section,
  .software-page .software-product-area,
  .software-page .software-product-nav-section,
  .software-page .software-ecosystem-section,
  .production-intro-section,
  .production-social-growth,
  .production-youtube-studio,
  .production-ad-lab,
  .production-operating-section,
  .portfolio-detail-page .portfolio-detail-hero,
  .portfolio-detail-page .brand-project-hero,
  .portfolio-detail-page .portfolio-detail-projects,
  .portfolio-detail-page .brand-projects-section {
    background-size:
      28px 28px,
      28px 28px,
      140px 140px,
      140px 140px !important;
  }
}