/* ============================================================ tipo.css — İKİNCİ TİPOGRAFİ TEMASI ("Co-Star tarzı") Co-Star (costarastrology.com) üç ticari font kullanıyor: Akkurat-Mono (nav/etiket) · AkkuratPro (gövde) · Romana-Book (logo). Üçü de lisanslı, birebir kullanılamaz. Buradaki karşılıkları Google Fonts'tan açık lisanslı en yakın eşdeğerler: Akkurat-Mono -> Geist Mono (nötr grotesk mono) AkkuratPro -> Inter (İsviçre grotesk) Romana-Book -> Cormorant Garamond (sitede zaten yüklü) Tema ile açılır. Kapalıyken bu dosyadaki tema kuralları uygulanmaz, klasik görünüm aynen kalır. ============================================================ */ :root[data-tipo="costar"] { --head: 'Geist Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --body: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif; } /* --- başlıklar: mono, ağırlık düşük, harf arası açık (Co-Star imzası) --- */ :root[data-tipo="costar"] h1, :root[data-tipo="costar"] h2, :root[data-tipo="costar"] h3, :root[data-tipo="costar"] h4, :root[data-tipo="costar"] .ttl, :root[data-tipo="costar"] .mega__baslik { font-weight: 500; letter-spacing: .01em; } /* --- etiketler: Co-Star bunları hep aralıklı mono basar --- */ :root[data-tipo="costar"] .eyebrow, :root[data-tipo="costar"] .hero2__status, :root[data-tipo="costar"] .review__src, :root[data-tipo="costar"] .brand__name small { font-family: var(--head); letter-spacing: .18em; } /* --- HERO: mono glifleri geniştir, başlık aynı kutuya sığmalı --- */ :root[data-tipo="costar"] .hero2__title { font-weight: 700; letter-spacing: -.01em; font-size: clamp(2.2rem, 6.4vw, 5.4rem); } :root[data-tipo="costar"] .hero2__line { font-weight: 500; letter-spacing: .04em; font-size: clamp(1.05rem, 3.2vw, 2.4rem); } @media (min-width: 941px) and (max-width: 1600px) { :root[data-tipo="costar"] .hero2__title { font-size: clamp(2.2rem, 4.2vw, 3.9rem); } :root[data-tipo="costar"] .hero2__line { font-size: clamp(1rem, 2.1vw, 1.85rem); } } @media (max-width: 560px) { :root[data-tipo="costar"] .hero2__title { font-size: clamp(2rem, 10vw, 2.9rem); } } /* --- nav + düğmeler: mono, aralıklı, küçük --- */ :root[data-tipo="costar"] .nav__links > a, :root[data-tipo="costar"] .dropdown__toggle, :root[data-tipo="costar"] .btn { font-family: var(--head); font-weight: 500; letter-spacing: .06em; font-size: .86em; } /* --- alıntı Co-Star'daki gibi serif aksanını korusun --- */ :root[data-tipo="costar"] .hero2__tag { font-family: var(--serif); } /* ============================================================ Tipografi anahtarı — nav'daki düğme (her iki temada da görünür) ============================================================ */ .tipo-btn { display: inline-flex; align-items: center; gap: 7px; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--nmut, #6b6155); border: 1px solid var(--nline, rgba(182,134,59,.25)); background: transparent; padding: 9px 13px; border-radius: 999px; transition: color .18s ease, border-color .18s ease, background .18s ease; } .tipo-btn:hover { color: var(--gold-lt, #8f671f); border-color: rgba(182,134,59,.5); background: rgba(182,134,59,.06); } /* İkon "Aa" olarak kalmalı: düğmenin uppercase kuralı onu "AA" yapıyordu. */ .tipo-btn__ikon { font-size: 1rem; line-height: 1; font-weight: 700; letter-spacing: 0; text-transform: none; } @media (max-width: 940px) { /* mobilde nav__cta gizleniyor; tipo düğmesi görünür kalsın ama daralsın */ .tipo-btn { padding: 8px 10px; font-size: .64rem; letter-spacing: .08em; } .tipo-btn__ad { display: none; } }