/* oliptek home.css — ÜRETİLMİŞ (src/assets/css/src/** → bundleCssGroups). Elle düzenleme. */
/* === base/tokens.css === */
/* ── Tokens ── */
:root{
  --ink:#0B0F14;--ink-2:#161B22;--ink-soft:#4A5260;--ink-mute:#8A95A4;--ink-faint:#B7BEC8;
  --surface:#FBFBFB;--surface-1:#FAFAF7;--surface-2:#F2F1EC;--surface-3:#E8E7E1;
  --line:#E6E4DE;--line-2:#ECEAE4;--line-dark:rgba(255,255,255,0.10);
  /* Modern beyaz tonları (token bazlı) */
  --ol-white:#FBFBFB;--ol-surface:#FAFAFA;--ol-surface-soft:#F8F8FF;--ol-surface-muted:#F5F5F5;
  --ol-border-soft:#F0F0F0;--ol-hero-soft:#F0F8FF;--ol-warm-white:#FFFAFA;--ol-ivory:#FFFFF0;
  --accent:#B97A3E;--accent-2:#D4A268;--accent-ink:#6F4516;
  --dark:#0B0F14;--dark-2:#11161D;--dark-3:#1A2029;
  --font-sans:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Poppins','Roboto',system-ui,sans-serif;
  --font-mono:'Roboto','Segoe UI',system-ui,sans-serif;
  --container:1360px;--gutter:32px;--section-y:120px;
  --ease:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms;--t-med:320ms;--t-slow:520ms;--header-h:146px;/* v2: utility(42)+header(104) — sabit header için sayfa üst boşluğu */

  /* ─────────────────────────────────────────────────────────────────────
     AÇIK TEMA DESIGN SYSTEM — semantik katman (primitive → semantic → component)
     Mevcut token'lar (yukarıda) korunur; aşağıdakiler bunlara MAP'lenir.
     Yeni primitive'ler (.surface/.card/.btn-*) yalnızca bu semantik token'ları kullanır,
     böylece tema tek noktadan yönetilir ve mevcut sayfalar etkilenmez.
     Bkz. DESIGN_SYSTEM.md
     ───────────────────────────────────────────────────────────────────── */
  /* Yüzeyler (açık tema) */
  --bg:#FBFBFB;               /* genel sayfa zemini */
  --surface-card:#FAFAFA;     /* kart yüzeyi */
  --surface-soft:#F5F5F5;     /* hafif vurgulu section */
  --surface-cool:#F8F8FF;     /* ferah/hero-soft alanlar (ghost white) */
  --surface-air:#F0F8FF;      /* en ferah vurgu (alice blue) — ölçülü */
  /* Metin (kontrast güvenli) */
  --text:#0B0F14;             /* ana metin (AA+ açık zeminde) */
  --text-soft:#4A5260;        /* ikincil metin */
  --text-mute:#6B7280;        /* yardımcı/etiket (AA, --ink-mute'tan biraz koyu) */
  --text-on-dark:#FFFFFF;     /* koyu zemin üzeri metin (yalnızca koyu bloklarda) */
  /* Kenarlık */
  --border:#E6E4DE;           /* ana hairline (= --line) */
  --border-soft:#F0F0F0;      /* yumuşak ayırıcı */
  --border-strong:#D7D5CE;    /* belirgin kenarlık */
  /* Gölge skalası (açık temada derinlik = gölge, parlaklık değil) */
  --shadow-xs:0 1px 2px rgba(11,15,20,.05);
  --shadow-sm:0 4px 12px -6px rgba(11,15,20,.12);
  --shadow-md:0 14px 30px -18px rgba(11,15,20,.22);
  --shadow-lg:0 22px 48px -28px rgba(11,15,20,.30);
  /* Radius skalası */
  --radius-xs:3px;--radius-sm:5px;--radius:7px;--radius-lg:10px;--radius-pill:999px;
  /* Spacing skalası (4px tabanlı; section ritmi clamp ile) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --section-pad:clamp(56px,7vw,104px);   /* dengeli section ritmi (--section-y alternatifi) */
  --focus-ring:0 0 0 3px rgba(185,122,62,.45); /* accent tabanlı focus halkası */

  /* ─────────────────────────────────────────────────────────────────────
     PREMIUM KATMAN — gradient + glow token'ları (additive; yalnız kullanıldığı
     yerde etkili). Açık tema korunur; koyu gradient'ler yalnız zaten-koyu
     bloklarda (hero overlay vb.) kullanılır. Anasayfa premium dönüşümü için.
     ───────────────────────────────────────────────────────────────────── */
  --accent-light:#D9B07E;   /* hover/glow varyantı (accent'in açığı) */
  --accent-deep:#8B5A2B;    /* pressed/derin accent */
  /* Gradient'ler */
  --grad-accent:linear-gradient(100deg,var(--accent) 0%,var(--accent-light) 50%,var(--accent) 100%);
  --grad-accent-line:linear-gradient(90deg,var(--accent) 0%,var(--accent-light) 100%);
  --grad-hero-veil:linear-gradient(180deg,rgba(11,15,20,.16) 0%,rgba(11,15,20,.08) 30%,rgba(11,15,20,.86) 100%),linear-gradient(90deg,rgba(11,15,20,.62) 0%,rgba(11,15,20,.10) 55%,rgba(11,15,20,0) 72%);
  --grad-surface-fade:linear-gradient(180deg,var(--bg) 0%,var(--surface-soft) 100%);
  --grad-glass:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 100%);
  --grad-card-shine:linear-gradient(115deg,rgba(185,122,62,0) 0%,rgba(185,122,62,.10) 45%,rgba(185,122,62,0) 70%);
  /* Glow / tinted shadow (bakır tonlu — nötr siyah değil) */
  --glow-accent:0 0 0 1px rgba(185,122,62,.12),0 14px 40px -16px rgba(185,122,62,.45);
  --glow-accent-soft:0 10px 30px -14px rgba(185,122,62,.40);
  --glow-card-hover:0 22px 50px -26px rgba(185,122,62,.30),0 8px 20px -14px rgba(11,15,20,.18);
}
/* === pages/home.css === */
/* ── Anasayfa section ritmi — daha sıkı, dengeli (premium korunur) ── */
/* Genel --section-y 120px; anasayfada section'ları biraz daha sıkı tutuyoruz. */
.home-page .section{padding-top:clamp(48px,6vw,82px);padding-bottom:clamp(48px,6vw,82px)}
.home-page .value-section{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
.home-page .projects-showcase,
.home-page .why{padding-top:clamp(56px,6.5vw,92px);padding-bottom:clamp(56px,6.5vw,92px)}
.home-page .sys-stage{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
@media(min-width:881px){
  .home-page .sys-scene{min-height:auto}
  .home-page .sys-scene + .sys-scene{margin-top:clamp(32px,4vw,56px)}
}

/* ── Hero ── */
.hero{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;height:min(100svh,860px);min-height:0;overflow:hidden;background:var(--dark);color:#fff}
/* Ambient bakır glow — sol-üstte sinematik atmosfer (görselin üstü, veil'in altı) */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 60% at 14% 22%,rgba(185,122,62,.28) 0%,rgba(185,122,62,0) 58%)}
/* Sinematik: aktif slide yavaş Ken Burns zoom (in) yapar; geçiş crossfade. */
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center center;opacity:0;transform:scale(1.06);transition:opacity 1100ms var(--ease);will-change:opacity,transform}
.hero-slide.is-active{opacity:1;animation:heroKenBurns 7s ease-out forwards}
@keyframes heroKenBurns{from{transform:scale(1.06)}to{transform:scale(1.13)}}
.hero-product{position:absolute;top:0;right:0;bottom:90px;width:50%;display:flex;align-items:center;justify-content:flex-end;padding-top:calc(var(--header-h) + 16px);padding-bottom:8px;padding-right:4%;z-index:3;opacity:0;transform:scale(.92) translateY(6px);transition:opacity 1100ms var(--ease),transform 1100ms var(--ease-out)}
.hero-product.is-active{opacity:1;transform:scale(1) translateY(0)}
/* contain + dikey alana sığdır — büyük ürün görseli tepeden/alttan kesilmez */
.hero-product img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 8px 40px rgba(0,0,0,.32))}
.hero::after{content:"";position:absolute;inset:0;background:var(--grad-hero-veil);z-index:2;pointer-events:none}
/* Hero metni — her slide değişiminde yeniden tetiklenen stagger fade-up (JS class atar) */
@keyframes heroCopyIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-inner .hero-copy-in{animation:heroCopyIn .85s var(--ease-out) both}
.hero-inner h1.hero-copy-in{animation-delay:.08s}
.hero-inner p.hero-copy-in{animation-delay:.16s}
.hero-inner{position:relative;z-index:5;grid-row:1;width:100%;min-width:0;height:auto;min-height:0;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--header-h) + clamp(16px,3svh,40px));padding-bottom:clamp(16px,3svh,32px)}
.hero-inner .eyebrow{color:#fff;margin-bottom:clamp(12px,2svh,24px)}.hero-inner .eyebrow::before{background:var(--accent-2)}
.hero h1{color:#fff;max-width:16ch;margin-bottom:clamp(16px,2.6svh,28px);font-size:clamp(46px,min(6.4vw,9svh),98px);font-weight:700;line-height:1.0;letter-spacing:-0.025em;text-transform:uppercase}
.hero h1 .light{font-weight:300;color:rgba(255,255,255,.78)}
/* Başlık altı görünür accent bar — slide değişse de kalır (pseudo, JS metni etkilemez) */
.hero h1::after{content:"";display:block;width:clamp(72px,9vw,104px);height:5px;margin-top:clamp(16px,2.4svh,26px);background:var(--grad-accent-line);border-radius:3px;box-shadow:0 0 20px rgba(185,122,62,.65)}
.hero p{color:rgba(255,255,255,.78);font-size:clamp(15px,1.3vw,18px);max-width:54ch;margin-bottom:clamp(18px,3svh,36px)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-foot{position:relative;z-index:6;grid-row:2;width:100%;min-width:0;padding:clamp(12px,2svh,24px) 0;border-top:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(11,15,20,0) 0%,rgba(11,15,20,.4) 100%)}
.hero-foot .container{display:block;min-width:0}
.hero-dots{display:flex;max-width:100%;gap:24px;overflow-x:auto;scrollbar-width:none}
.hero-dots::-webkit-scrollbar{display:none}
.hero-dot{display:flex;flex-direction:column;gap:6px;width:96px;text-align:left;font-family:var(--font-mono);font-size:10px;line-height:1.35;color:rgba(255,255,255,.55);letter-spacing:.05em;text-transform:uppercase;background:none;border:0;cursor:pointer;white-space:normal}
.hero-dot .line{display:block;width:100%;height:2px;border-radius:2px;background:rgba(255,255,255,.20);position:relative;overflow:hidden}
.hero-dot .line::after{content:"";position:absolute;inset:0;background:var(--grad-accent-line);transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px rgba(185,122,62,.55)}
.hero-dot.is-active{color:#fff}
.hero-dot.is-active .line::after{animation:dotFill 6s linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Premium accent: home eyebrow çizgisi gradient pill (tüm anasayfa eyebrow'ları) ── */
.home-page .eyebrow::before{width:28px;height:2px;border-radius:2px;background:var(--grad-accent-line)}
.hero-inner .eyebrow::before{background:var(--grad-accent-line)}

/* ── Product families — görsel solda, başlık+etiket sağda (Animasyon koyu / Otomasyon açık) ── */
.families{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.family{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(20px,3vw,44px);
  min-height:clamp(300px,30vw,360px);padding:clamp(28px,3.2vw,52px);overflow:hidden;text-decoration:none;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);transition:box-shadow var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.family:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.family--dark{background:linear-gradient(150deg,#11161d 0%,var(--ink) 60%);color:#fff}
.family--light{background:var(--surface-card);color:var(--text);border:1px solid var(--border)}
.family-media{flex:0 0 auto;width:clamp(120px,16vw,210px);display:grid;place-items:center}
.family-media img{width:100%;height:auto;max-height:200px;object-fit:contain;display:block}
.family-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
/* Başlık: BÜYÜK HARF; iki kelime aynı hizada başlar/biter.
   h3 en uzun kelime (SİSTEMLERİ) kadar genişler; her satır o genişliğe justify edilir —
   kısa kelimenin (ANİMASYON/OTOMASYON) harfleri arasına boşluk eklenerek hizalanır. */
.family h3{display:table;width:auto;font-size:clamp(26px,2.9vw,44px);font-weight:600;line-height:1.12;margin:0 0 14px;text-transform:uppercase}
.family h3 span{display:block;white-space:nowrap;text-align:justify;text-align-last:justify}
.family h3 span:last-child{white-space:normal}
.family--dark h3{color:#fff}
/* Alt etiket — başlığın hemen altında, kendi satırında */
.family-tag{display:block;width:100%;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.family--dark .family-tag{color:rgba(255,255,255,.55)}
.family--dark .family-tag{color:rgba(255,255,255,.55)}
/* ── Çözümler: projeler showcase ile AYNI kart yapısı (görsel overlay + ad) ──
   Global .showcase-grid (visual-archive.css) 3'lü grid + .proj kullanılır.
   --solutions varyantı yalnızca açık tema overlay'i için. */

/* ── Projects showcase — bento (büyük/küçük), bec.uk tarzı büyük görsel vitrini ── */
.projects-showcase{background:var(--surface-cool);color:var(--text);padding-top:var(--section-y);padding-bottom:var(--section-y)}
.projects-showcase h2{color:var(--text)}.projects-showcase p{color:var(--text-soft)}
.projects-showcase .btn-ghost{color:var(--ink)}.projects-showcase .btn-ghost::after{background:var(--ink)}
.projects-showcase .btn-ghost:hover{color:var(--accent)}.projects-showcase .btn-ghost:hover::after{background:var(--accent)}
/* Home showcase (projeler + çözümler) — her satırda 3 kart, minimal gap, numara YOK.
   Proje/çözüm adı HER ZAMAN görünür; hover'da görsel zoom + overlay derinleşir. */
.home-page .showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);margin-top:clamp(28px,3vw,44px)}
.home-page .showcase-grid .proj{aspect-ratio:4/3}
.home-page .showcase-grid .proj-idx{display:none}
.home-page .showcase-grid .proj-info{opacity:1;transform:none;left:26px;right:26px;bottom:22px}
.home-page .showcase-grid .proj-overlay{opacity:1;background:linear-gradient(180deg,rgba(11,15,20,0) 44%,rgba(11,15,20,.84) 100%)}
.home-page .showcase-grid .proj:hover .proj-overlay{background:linear-gradient(180deg,rgba(11,15,20,.1) 30%,rgba(11,15,20,.9) 100%)}
.home-page .showcase-grid .proj-info h3{font-size:clamp(17px,1.4vw,22px);font-weight:600}
@media(max-width:880px){.home-page .showcase-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.home-page .showcase-grid{grid-template-columns:1fr}}

/* ── Why section — AÇIK TEMA editorial band (sol sabit intro + sağ 2x2 kart) ── */
.why{background:var(--surface-soft);color:var(--text);padding-top:var(--section-y);padding-bottom:var(--section-y);border-top:1px solid var(--border)}
.why h2{color:var(--text)}.why p.lead{color:var(--text-soft)}
.why .eyebrow.on-dark{color:var(--text-mute)}.why .eyebrow.on-dark::before{background:var(--accent)}
.why-editorial{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(40px,5vw,80px);align-items:start}
.why-intro{position:sticky;top:calc(var(--header-h) + 32px)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);background:transparent}
.why-item{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 28px;position:relative;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-fast) var(--ease)}
.why-item:hover{transform:translateY(-3px);background:#fff;box-shadow:var(--shadow-md);border-color:var(--border-strong)}
/* Numara YOK — başlık üstünde accent çizgi (hover'da uzar, ölçülü detay) */
.why-item h3{font-size:19px;font-weight:600;letter-spacing:-0.01em;color:var(--text);margin-bottom:12px;padding-top:18px}
.why-item h3::before{content:"";position:absolute;top:30px;left:28px;width:28px;height:2px;background:var(--accent);transition:width var(--t-med) var(--ease)}
.why-item:hover h3::before{width:44px}
.why-item p{font-size:14px;color:var(--text-soft);line-height:1.62}
@media(max-width:880px){
  .why-editorial{grid-template-columns:1fr;gap:32px}
  .why-intro{position:static}
}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}
/* ── System detail STAGE — sticky/pinned storytelling (Animasyon + Otomasyon) ── */
/* İki sahne dikey akar: her sahne viewport'a yakın yükseklikte, içindeki blok sticky kalır.
   Üstteki blok pinlenirken alttaki sahne kontrollü şekilde üzerine gelir. Scroll-hijack yok.
   Masaüstü/tablet: sticky aktif. Mobil: tamamen normal akış (aşağıda kapatılır). */
.sys-stage{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.sys-scene{position:relative}
.sys-scene + .sys-scene{margin-top:clamp(40px,7vh,96px)}
@media(min-width:881px){
  .sys-stage{padding-bottom:calc(var(--section-y) + 4vh)}
  .sys-scene{min-height:96vh;display:flex;align-items:center}
  /* Her iki sahne EŞİT davranır: sticky + görünürken aynı zoom + gölge (JS data-active her ikisine de) */
  .sys-scene .sys-block{position:sticky;top:calc(var(--header-h) + clamp(16px,4vh,48px));width:100%;
    transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
  .sys-scene[data-active] .sys-block{transform:scale(1.012);box-shadow:0 40px 80px -50px rgba(11,15,20,.5)}
}
/* Container-contained block (max-width:1360px via .container) — not full-bleed */
.sys-block{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:440px;border:1px solid var(--border);overflow:hidden;background:var(--surface-card);border-radius:var(--radius)}
.sys-block.reverse{direction:rtl}
.sys-block.reverse>*{direction:ltr}
/* Carousel — koyu arka plan KALDIRILDI, premium açık ton (#FBFBFB) */
.sys-carousel{position:relative;overflow:hidden;background:var(--ol-white)}
/* Product renders: contain — show full image, never crop/zoom. Padding keeps breathing room. */
.sys-carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:40px;opacity:0;transition:opacity .4s var(--ease)}
.sys-carousel img.is-active{opacity:1}
.sys-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:rgba(11,15,20,.5);border:none;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.sys-car-btn:hover{background:rgba(11,15,20,.82)}
.sys-car-btn--prev{left:0}.sys-car-btn--next{right:0}
.sys-car-btn[hidden]{display:none}
.sys-car-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.sys-car-dot{width:6px;height:6px;border-radius:50%;background:rgba(11,15,20,.28);border:none;cursor:pointer;padding:0;transition:background var(--t-fast) var(--ease)}
.sys-car-dot.is-active{background:var(--ink)}
.sys-info{display:flex;flex-direction:column;justify-content:center;padding:56px 64px;background:var(--ol-surface)}
.sys-info .eyebrow{margin-bottom:16px}
.sys-info h2{font-size:clamp(28px,2.8vw,44px);font-weight:500;letter-spacing:-0.025em;line-height:1.1;margin-bottom:20px}
.sys-info p{font-size:16px;line-height:1.7;color:var(--ink-soft);margin-bottom:32px}
.sys-info .btn{align-self:flex-start}

/* ── Value / info cards — belirgin premium kartlar (kalıcı gölge + accent bar) ── */
.value-section{background:var(--surface-soft)}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,22px)}
.value-card{position:relative;overflow:hidden;background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(30px,2.6vw,44px) clamp(24px,2vw,30px) clamp(28px,2.2vw,36px);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--glow-card-hover)}
.value-card h3{font-size:clamp(17px,1.35vw,21px);font-weight:600;letter-spacing:-0.01em;margin-bottom:12px;color:var(--ink)}
.value-card p{font-size:clamp(14px,1.05vw,15px);line-height:1.7;color:var(--ink-soft)}
@media(max-width:880px){.value-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.value-grid{grid-template-columns:1fr}}

/* ── Premium motion katmanı (dengeli, ölçülü) ────────────────────────── */
/* Projeler showcase: başlık masaüstünde sticky kalır, grid altından akar (storytelling). */
@media(min-width:881px){
  .projects-showcase .container{position:relative}
  .projects-showcase .section-head{position:sticky;top:calc(var(--header-h) + 24px);z-index:2}
}
/* Showcase kartları: hover'da görsel hafif yakınlaşır + bilgi yukarı kayar (premium reveal) */
.showcase-grid .proj .proj-bg{transition:transform 900ms var(--ease-out),filter 600ms var(--ease)}
.showcase-grid .proj:hover .proj-bg{transform:scale(1.05)}

/* Family kartları — mobil */
@media(max-width:880px){
  .families{grid-template-columns:1fr;gap:16px}
}
@media(max-width:520px){
  .family{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}
  .family-media{width:clamp(140px,40vw,180px)}
}

/* Reduced-motion: tüm home sticky/hover hareketlerini sadeleştir */
@media (prefers-reduced-motion: reduce){
  .sys-scene .sys-block{position:static!important;transform:none!important;transition:none!important}
  .sys-scene{min-height:0!important}
  .projects-showcase .section-head{position:static!important}
  .showcase-grid .proj:hover .proj-bg,
  .showcase-grid .proj:hover .proj-info,
  .family:hover{transform:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM HOME KATMANI — section handoff + kart micro-interaction + buton glow
   Tümü .home-page / home-only sınıflara scope'lu. Açık tema korunur.
   ═══════════════════════════════════════════════════════════════════════ */

/* Section geçişi — üstte kısa accent gradient çizgi (ölçülü premium separator) */
.home-page .value-section,
.home-page .projects-showcase,
.home-page .why{position:relative}
.home-page .value-section::before,
.home-page .projects-showcase::before,
.home-page .why::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(160px,38%);height:2px;background:var(--grad-accent-line);opacity:.55;border-radius:2px}

/* Family kartları — alt accent glow çizgisi KALICI (rest'te %45, hover'da tam) + görsel scale + glow */
.family::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad-accent-line);opacity:.45;transition:opacity var(--t-med) var(--ease-out);z-index:2}
.family:hover::after{opacity:1}
.family:hover{box-shadow:var(--glow-card-hover)}
.family-media img{transition:transform var(--t-slow) var(--ease-out)}
.family:hover .family-media img{transform:scale(1.05)}

/* Value kartları — KALICI üst accent bar (her zaman görünür) + hover'da shine sweep */
.value-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--grad-accent-line);z-index:2}
.value-card::after{content:"";position:absolute;inset:0;background:var(--grad-card-shine);transform:translateX(-110%);transition:transform .8s var(--ease-out);pointer-events:none;z-index:1}
.value-card:hover::after{transform:translateX(110%)}
.value-card h3,.value-card p{position:relative;z-index:2}

/* Showcase kart başlık accent çubuğu artık ORTAK visual-archive.css'te (home + arşiv).
   why-item — accent çizgi gradient + hover glow */
.why-item:hover{box-shadow:var(--glow-card-hover)}
.why-item h3::before{background:var(--grad-accent-line)}

/* Reduced-motion: yeni premium hareketleri kapat (final state net + erişilebilir) */
@media (prefers-reduced-motion: reduce){
  .hero-slide.is-active{animation:none!important;transform:none!important}
  .hero-product{transform:none!important}
  .hero-inner .hero-copy-in{animation:none!important}
  .family:hover .family-media img{transform:none!important}
  .family::after,.value-card::after{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   TİPOGRAFİ + SPACING + YÜZEY RİTMİ — yalnız anasayfa (.home-page).
   Daha iddialı başlık ölçeği, daha çok nefes alanı, premium yüzey geçişleri.
   ═══════════════════════════════════════════════════════════════════════ */
.home-page .display-lg{font-size:clamp(40px,5.2vw,68px);letter-spacing:-0.03em;line-height:1.04}
.home-page .display-md{font-size:clamp(32px,4.2vw,54px);letter-spacing:-0.025em;line-height:1.06}
.home-page .section-head .eyebrow,
.home-page .why .eyebrow,
.home-page .projects-showcase .eyebrow{font-size:13px;letter-spacing:.16em}
.home-page .section-head{margin-bottom:clamp(28px,3.4vw,52px)}
.home-page .section-head .lead,
.home-page .why .lead{font-size:clamp(16px,1.25vw,19px);line-height:1.75}
/* Daha fazla nefes alanı */
.home-page .section{padding-top:clamp(64px,8vw,116px);padding-bottom:clamp(64px,8vw,116px)}
.home-page .projects-showcase,
.home-page .why{padding-top:clamp(72px,8.5vw,128px);padding-bottom:clamp(72px,8.5vw,128px)}
.home-page .value-section{padding-top:clamp(56px,6vw,92px);padding-bottom:clamp(56px,6vw,92px)}
/* Yüzey ritmi — daha belirgin section divider + premium gradient zeminler (açık tema) */
.home-page .value-section::before,
.home-page .projects-showcase::before,
.home-page .why::before{opacity:.9;width:min(200px,42%);height:3px}
.home-page .projects-showcase{background:linear-gradient(180deg,var(--surface-cool) 0%,var(--bg) 100%)}
.home-page .why{background:linear-gradient(180deg,var(--bg) 0%,var(--surface-soft) 100%)}