/* HuzurAstro tanıtım sitesi v2 — sayfaya özel katman. Nocturne token/bileşen kütüphanesi _ds/nocturne-.../styles.css'ten gelir (link, index.html ); burası yalnız o kütüphanenin kapsamadığı sayfa düzeni (hero, bölümler, interaktif demo, fiyat kartları, form) içindir. Renkler mümkün olduğunca var(--color-*) token'larından okunur — düz renk kodu yalnız token setinde karşılığı olmayan, sayfaya özel koyu/açık yüzeyler için (aşağıdaki ek :root bloğu) kullanılır. */ :root { /* dc.html taslağındaki koyu-yüzey/tarayıcı-çerçevesi tonları — nocturne token setinde karşılığı yok, burada sayfaya özel ek olarak tanımlanır. */ --dc-dark-card: #1b1d2b; --dc-dark-card-2: #202233; --dc-dark-border: #292b31; --dc-dark-border-2: #3f424d; --dc-dark-border-3: #595d6c; --dc-section-glow: radial-gradient(900px 420px at 14% -20%, #2b2741, transparent 60%); --max: 1180px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Lightbox açılırken `body`ye `overflow: hidden` biniyor ve KLASİK kaydırma çubuğu olan platformlarda (Windows, "kaydırma çubuklarını her zaman göster" seçili macOS) çubuk kaybolup sayfa 15px genişliyor — görsel büyütülürken altındaki her şey bir sıçrıyor. Şerit kalıcı olarak ayrılıyor. Üst üste binen kaydırma çubuğu olan platformlarda etkisiz. */ scrollbar-gutter: stable; } body { margin: 0; background: var(--color-neutral-200); color: var(--color-neutral-900); font-family: var(--font-body); font-size: 15px; line-height: 1.55; } img { display: block; max-width: 100%; } .container { max-width: var(--max); margin: 0 auto; padding: 0 28px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--color-accent-400); color: var(--color-accent-900); padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; } .skip-link:focus { left: 0; } section { position: relative; } .section-dark { background: var(--dc-section-glow), var(--color-bg); color: var(--color-text); border-bottom: 1px solid var(--color-divider); } .section-light { background: var(--color-neutral-200); color: var(--color-neutral-900); } .section-pad { padding: 68px 0; } .section-pad-sm { padding: 44px 0; } .eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 11.5px; letter-spacing: 0.05em; } .section-dark .eyebrow { border: 1px solid var(--color-accent-800); color: var(--color-accent-300); } .section-light .eyebrow { border: 1px solid var(--color-accent-400); color: var(--color-accent-700); } .section-head { max-width: 640px; margin-bottom: 40px; } .section-head h2 { font-size: 32px; margin: 16px 0 10px; letter-spacing: -0.02em; } .section-head .lede { margin: 0; font-size: 14.5px; color: var(--color-neutral-600); } .section-dark .section-head .lede { color: color-mix(in srgb, var(--color-text) 62%, transparent); } .section-light .section-head h2 .accent { color: var(--color-accent-700); } .section-dark .section-head h2 .accent { color: var(--color-accent-400); } /* ── header / nav ───────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-divider); } .nav-inner { display: flex; align-items: center; gap: 36px; /* `padding` KISAYOLU YASAK: bu eleman aynı zamanda `.container` ve kısayol onun yatay dolgusunu (28px, ≤640'ta 18px) SIFIRLIYOR. Sonucu ölçüldü: başlık şeridinin içeriği sayfanın geri kalanından 56px genişti — 1280'de marka gövde metninden 28px solda, CTA 28px sağda duruyor; 1180'in altında ise marka pencerenin sol kenarına, "Demo Talep Et" ile hamburger sağ kenarına sıfır boşlukla yapışıyordu. Yalnız dikey eksene yazılıyor. */ padding-block: 13px; } /* MARKA SIKIŞAN TARAFTIR — `flex: none` DEĞİL. 2026-09-10'da canlıda hamburger'ın viewport'un DIŞINA çıkmasının yapısal nedeni buydu: marka hiç küçülmediği için satıra sığmayan her piksel, flex sırasının SONUNDAKİ `.nav-cta`ya (yani hamburger'a) yıkılıyordu. Ölçüm: 386px pencerede `.hamburger` sol=398 sağ=436 — tamamen ekran dışında, görünmez ve DOKUNULAMAZ; menüyü açmanın tek yolu kalmıyordu. Kırılım aritmetiği (1080/900/640/420 kademeleri) doğru hesaplandığında sorun görünmez, ama tek bir yanlış varsayım (yazı tipi, daha uzun marka metni, unutulan bir kademe) yine hamburger'ı dışarı iter. Bu yüzden düzeltme kademelere değil, sıkışma YÖNÜNE yazılıyor: yer varken görüntü birebir aynı, yer yokken kısalan taraf marka. */ .brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; flex: 0 1 auto; min-width: 0; } .brand-mark { width: 36px; height: 36px; border-radius: 8px; flex: none; background: linear-gradient(150deg, var(--color-accent-800), var(--color-accent-900)); border: 1px solid var(--color-accent-600); display: grid; place-items: center; color: var(--color-accent-400); } .brand-mark svg { width: 19px; height: 19px; } /* Marka sıkışınca metin ÜÇ NOKTAYLA kısalır, taşmaz. `.brand-name` ile `.brand-sub` aynı satırda duran iki inline span (ölçüldü: 1280'de name 124-210.8, sub 214.8-352.8), bu yüzden kırpma tek bir blok olan `.brand-text` üzerinden yapılıyor. Logo `.brand-mark`'ta `flex: none` olduğu için en dar hâlde bile duruyor. */ .brand-text { line-height: 1.15; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; } .brand-sub { font-size: 10.5px; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .nav-links { display: flex; align-items: center; gap: 24px; margin-left: 12px; font-size: 13.5px; flex: none; } .nav-links a { color: color-mix(in srgb, var(--color-text) 68%, transparent); text-decoration: none; padding-bottom: 3px; border-bottom: 1.5px solid transparent; /* Menü başlıkları ASLA iki satıra kırılmaz: "Sistemi / İncele", "Mobil / Uygulama" kırılması şeridi iki katına çıkarıyordu. Artık sıkışma marka tarafına gidiyor (yukarı bak), menü olduğu gibi kalıyor. */ white-space: nowrap; } .nav-links a:hover { color: var(--color-text); } /* `flex: none` BURADA zorunlu: menüyü açan tek düğme bu kutunun içinde ve sıkışmanın bedelini asla o ödemez. */ .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; } .nav-cta .btn-primary { flex: none; } .hamburger { /* 42px HER genişlikte: hamburger yalnız ≤900'de görünür, yani hep dokunmatik bir bağlamda — 38px'lik hedef parmakla ıskalanıyordu. Eskiden yalnız ≤640'ta 42'ye çıkıyordu, 641-900 bandı 38'de kalmıştı. */ display: none; width: 42px; height: 42px; border-radius: 8px; flex: none; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); align-items: center; justify-content: center; cursor: pointer; } .mobile-menu { display: none; flex-direction: column; gap: 2px; border-top: 1px solid var(--color-divider); padding: 8px 0 14px; } .mobile-menu.open { display: flex; } .mobile-menu a { color: var(--color-text); text-decoration: none; font-size: 14px; padding: 10px 28px; } .mobile-menu a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } /* CTA'nın ikonu masaüstünde GİZLİ: dar ekranda yazının yerini alması için var, geniş ekranda düğmenin görüntüsünü değiştirmesin. */ .nav-cta .btn-primary svg { display: none; } /* ── başlık şeridinin iki kademesi ────────────────────────────────────── Ölçüm (Chrome, 15px taban): tam menü satırı marka 275 + 12 (nav-links margin) + 36 + menü 462 + 36 + CTA 137 = 958px yer istiyor. Yatay dolgu geri geldiğine göre bu ancak 1014px'ten geniş pencerede sığıyor; oysa hamburger kırılımı 900'dü. Aradaki 901-1013 bandında satır sığmadığı için flex maddeleri EZİYORDU: "Sistemi / İncele", "Mobil / Uygulama", "Demo Talep / Et" ikişer satıra kırılıp şerit iki katına çıkıyordu — kullanıcının "menü responsive değil" dediği hâl tam olarak buydu. Boşluk 1080'de bir kademe daraltılıp marka alt satırı feda ediliyor: 133 + 24 + menü 438 + 24 + 137 = 756px, 901'de bile 89px payla sığıyor. */ @media (max-width: 1080px) { .brand-sub { display: none; } .nav-inner { gap: 24px; } .nav-links { gap: 18px; margin-left: 0; } } @media (max-width: 900px) { .nav-links { display: none; } .hamburger { display: inline-flex; } } /* Yazı 420px'e kadar duruyor. Eskiden 900px'in altında yazı gizleniyor ve geriye İÇİ BOŞ bir mor hap kalıyordu — sağ üstte hiçbir şey söylemeyen bir boşluk. Yazının gerçekten sığmadığı yerde (marka 133 + 14 + hap 137 + 10 + hamburger 42 = 336px, 420'nin dolgusundan sonra kalan 384'e sığar; 360'ta kalan 324'e sığmaz) hap boş kalmasın diye yerini takvim ikonu alıyor. */ @media (max-width: 420px) { .nav-cta .btn-primary span { display: none; } .nav-cta .btn-primary svg { display: block; } } /* ── buttons (extends _ds .btn with a couple of page-only variants) ─── */ .btn { font-size: 14px; padding: 12px 20px; border-radius: 8px; } .btn svg { width: 17px; height: 17px; } .btn-on-dark { border: 1px solid var(--color-divider); color: var(--color-text); } .btn-on-dark:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .btn-lg { padding: 13px 22px; font-size: 14.5px; } .btn-block-mobile { width: 100%; justify-content: center; } /* ── hero ───────────────────────────────────────────────────────────── */ .hero { padding: 60px 0 68px; } .hero-inner { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 44px; align-items: start; } .hero-copy { max-width: 460px; } .hero h1 { font-size: 48px; line-height: 1.1; letter-spacing: -0.025em; margin: 18px 0 0; font-weight: 500; } .hero h1 .accent { color: var(--color-accent-400); } .hero-lede { margin: 18px 0 0; max-width: 460px; font-size: 15.5px; color: color-mix(in srgb, var(--color-text) 65%, transparent); } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .hero-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); } .hero-note svg { width: 15px; height: 15px; flex: none; } .trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; max-width: 420px; } .trust-item { text-align: center; } .trust-icon { width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 10px; border: 1px solid var(--dc-dark-border-2); background: var(--dc-dark-card); display: grid; place-items: center; color: var(--color-accent-400); } .trust-icon svg { width: 19px; height: 19px; } .trust-label { font-size: 11px; color: color-mix(in srgb, var(--color-text) 62%, transparent); } /* ── hero panel screenshots (stacked, offset) ────────────────────────── Üç ekran bir boyut merdiveni oluşturuyor: dashboard en büyük, kabul listesi ondan küçük, vital raporu en küçük. Merdiven ilgi sırasını veriyor — üçü aynı boyutta olsaydı göz nereye bakacağını bilemezdi. Her biri bir