/* oliptek home-refined.css — TR anasayfa tipografi / spacing / renk iyileştirmesi (2026-09-09, impeccable). YALNIZ ile yüklenir (şimdilik yalnız /index.html). home.css'e dokunulmadı; bu dosya responsive.css'ten SONRA yüklenir ve aynı özgüllükte kaynak sırasıyla kazanır. EN/FR anasayfaları bu dosyayı yüklemez; onay sonrası tek satır + body sınıfı ile devralır. Kurallar: DESIGN.md (Başlık Düzeni, İki Satır, Beş Boyut, Soluk Gri Yasağı, Mavi Tını Yasağı, Tek Bakır Hat). */ /* ── 1. Tip ölçeği — 5 boyut (display 98 / headline 56 / headline-sm 44 / title 22 / body 16 + lead 18) ── */ .home-refined .display-lg{font-size:clamp(36px,4.2vw,56px);line-height:1.06;letter-spacing:-0.025em;text-wrap:balance} .home-refined .display-md{font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-0.02em;text-wrap:balance} .home-refined .sys-info h2, .home-refined .cta-band h2, .home-refined h2.geo-faq-eyebrow{font-family:var(--font-display);font-size:clamp(30px,3.4vw,44px);font-weight:600;line-height:1.1;letter-spacing:-0.02em;text-wrap:balance} .home-refined .value-card h3, .home-refined .why-item h3{font-size:22px;line-height:1.25;letter-spacing:-0.01em} .home-refined .showcase-grid .proj-info h3{font-size:22px;line-height:1.25} .home-refined p.lead, .home-refined .section-head .lead, .home-refined .why .lead{font-size:18px;line-height:1.7;max-width:58ch} .home-refined .value-card p, .home-refined .why-item p, .home-refined .sys-info p, .home-refined .faq-a p, .home-refined .cta-band p{font-size:16px;line-height:1.65} .home-refined .faq-a p{max-width:72ch} .home-refined .geo-answer p{font-size:18px;line-height:1.7} .home-refined h2{text-wrap:balance} .home-refined h3{text-wrap:balance} /* ── 2. Etiket sistemi — tek stil: bakır-mürekkep metin, çizgisiz (hero hariç) ── */ .home-refined .eyebrow{font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.14em;color:var(--accent-ink);gap:0} .home-refined .eyebrow::before{display:none} .home-refined .hero-inner .eyebrow{color:#fff;gap:10px} .home-refined .hero-inner .eyebrow::before{display:inline-block} .home-refined .intro-text .eyebrow{margin-bottom:16px} .home-refined .why-intro .eyebrow{margin-bottom:16px} /* Aile kartı başlığı: iki kelime aynı hizada biter. justify tek kelimede çalışmaz; home-refined.js dar kelimeye em cinsinden harf aralığı verir. */ .home-refined .family h3{display:block;width:max-content;max-width:100%} .home-refined .family h3 span{display:block;white-space:nowrap;text-align:left;text-align-last:auto} .home-refined .family-tag{font-size:12px;letter-spacing:.12em;color:var(--ink-soft)} .home-refined .family--dark .family-tag{color:rgba(255,255,255,.62)} .home-refined .cta-band-actions .meta{font-size:14px;letter-spacing:0;color:var(--text-soft)} /* ── 3. Section head — imza bileşen: h2 sol, etiket + lead + CTA sağ, alt hizada ── */ .home-refined .section-head--split{--sh-line:calc(clamp(36px,4.2vw,56px) * 1.06);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(40px,5vw,80px);align-items:start;margin-bottom:clamp(28px,3.5vw,48px)} .home-refined .section-head--split:has(> h2.display-md){--sh-line:calc(clamp(30px,3.4vw,44px) * 1.1)} .home-refined .section-head--split h2{margin:0} /* Etiket, h2'nin ilk satır kutusuyla dikeyde ortalanır: (h2 satır yüksekliği − etiket satır yüksekliği) / 2 */ .home-refined .section-head-aside{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:58ch;padding-top:calc(var(--sh-line) / 2 - 7.2px)} .home-refined .section-head-aside .eyebrow{margin:0} .home-refined .section-head-aside .lead{margin:0} .home-refined .section-head-aside .btn-ghost{margin-top:2px} .home-refined .projects-showcase .section-head{position:static} @media(max-width:880px){ .home-refined .section-head--split{grid-template-columns:1fr;align-items:start;gap:16px} .home-refined .section-head-aside{padding-top:0} } /* ── 4. Intro — başlık altı boşluk ölçeğe bağlı ── */ .home-refined .intro-text h2{margin-bottom:20px} .home-refined .intro-text .lead{max-width:56ch} /* ── 5. Section ritmi — tek ölçek, ardışık aynı zeminli section'larda tek pay ── */ .home-refined .section{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)} .home-refined #intro{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(40px,5vw,64px)} .home-refined #urun-aileleri{padding-top:0} .home-refined #urun-aileleri > .container{border-top:1px solid var(--border);padding-top:clamp(40px,5vw,64px)} .home-refined .sys-stage{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)} .home-refined .value-section{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)} .home-refined .projects-showcase, .home-refined .why{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)} .home-refined .cta-band .container{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)} @media(min-width:881px){ .home-refined .sys-scene + .sys-scene{margin-top:clamp(24px,3vw,40px)} } /* ── 6. Yüzey ritmi — mavi tınılı ghost-white/alice-blue yerine kromasız nötrler; süs çizgileri kaldırıldı ── */ .home-refined .projects-showcase{background:var(--surface-soft)} .home-refined .why{background:var(--bg);border-top:1px solid var(--border)} .home-refined .cta-band{background:var(--surface-1)} .home-refined .value-section::before, .home-refined .projects-showcase::before, .home-refined .why::before{display:none} /* ── 7. Değerler bandı — kart yerine hairline ile bölünmüş 4 kolon metin ── */ .home-refined .value-section{background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .home-refined .value-grid{gap:0} .home-refined .value-card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:8px clamp(24px,2.6vw,40px) 8px 0;transition:none} .home-refined .value-card + .value-card{border-left:1px solid var(--border);padding-left:clamp(24px,2.6vw,40px)} .home-refined .value-card:hover{transform:none;box-shadow:none} .home-refined .value-card::before, .home-refined .value-card::after{display:none} .home-refined .value-card h3{margin-bottom:10px} @media(max-width:880px){ .home-refined .value-card{padding:20px 0;border-left:0} .home-refined .value-card:nth-child(2n){border-left:1px solid var(--border);padding-left:clamp(20px,3vw,32px)} .home-refined .value-card:nth-child(2n+1){padding-right:clamp(20px,3vw,32px)} .home-refined .value-card:nth-child(n+3){border-top:1px solid var(--border)} } @media(max-width:520px){ .home-refined .value-card, .home-refined .value-card:nth-child(2n), .home-refined .value-card:nth-child(2n+1){border-left:0;border-right:0;padding-left:0;padding-right:0} .home-refined .value-card:not(:first-child){border-top:1px solid var(--border)} } /* ── 8. Neden Oliptek — kartlar sakinleşir (ölçek 22/16) ── */ .home-refined .why-item{padding:28px 26px 26px} .home-refined .why-item h3{padding-top:14px;margin-bottom:10px} .home-refined .why-item h3::before{top:26px;left:26px} .home-refined .why-intro h2{margin-bottom:18px} @media(min-width:881px){ .home-refined .why-editorial{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,5vw,72px)} } /* ── 9. SSS — başlık sol, özet sağ; cevap satırı ≤72ch ── */ .home-refined .geo-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px clamp(40px,5vw,80px);align-items:start} .home-refined h2.geo-faq-eyebrow{display:block;margin:0;text-transform:none;color:var(--ink)} .home-refined .geo-answer{max-width:62ch} @media(max-width:880px){ .home-refined .geo-intro{grid-template-columns:1fr;gap:16px} } /* ── 10. CTA bandı — başlık altı pay ölçekle; eyebrow yok ── */ .home-refined .cta-band h2{margin-bottom:16px} .home-refined .cta-band p{max-width:52ch} /* ── 11. Hareket azaltma — bu dosya yeni animasyon eklemez ── */ @media (prefers-reduced-motion: reduce){ .home-refined .value-card, .home-refined .why-item{transition:none} } /* ── 12. Mobil hero paragrafı — gövde tabanı 16px'in altına inmez ── */ @media(max-width:520px){ .home-refined .hero p{font-size:16px} }