/* ============================================================ Respoud — site base + responsive layer Loads AFTER respoud-tokens.css (design tokens live there). The page markup is inline-styled (from Claude Design); these rules cover the base reset, focus ring, and responsive collapses that inline styles can't express. ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-card); font-family: var(--font-body); color: var(--fg-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; } a { color: var(--respoud-blue); text-decoration: none; } a:hover { color: var(--respoud-blue-600); } /* Design-system rule: always a visible focus ring, never outline:none */ :focus-visible { outline: 2px solid var(--respoud-blue); outline-offset: 2px; border-radius: 6px; } @keyframes rpfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes rpbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* Tasarımın istediği erişilebilirlik davranışı: hareketi azaltma tercihi */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } html, body { scroll-behavior: auto; } } /* ── Çözümlerimiz bölüm rayı ───────────────────────────────── Tasarımda bu bileşen / + {{ }} runtime bağlamalarıyla geliyor (statik port'ta veri kaynağı yok), bu yüzden görünümü buradaki class'larla, davranışı da Solutions.cshtml'deki küçük JS ile üretiyoruz. Rayın kendisi ve etiket görünürlüğü responsive.css'te (.rp-rail/.rp-raillabel). ── */ .rp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-1); flex-shrink: 0; transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .rp-railbtn[aria-current="true"] .rp-dot { background: var(--respoud-blue); box-shadow: 0 0 0 4px var(--respoud-blue-100); } /* ── Fiyatlar — Aylık/Yıllık seçici ─────────────────────────── Tasarımda her fiyat iki varyantı olarak (aylik/yillik) geliyor. Statik port'ta iki varyant da DOM'da duruyor; hangisinin görüneceğini belirliyor. JS yoksa varsayılan "aylık" görünür. Varyant kutuları inline `display:flex` taşıdığı için !important şart. ── */ [data-rp-price="yillik"], [data-rp-note="yillik"] { display: none !important; } html[data-rp-plan="yillik"] [data-rp-price="aylik"], html[data-rp-plan="yillik"] [data-rp-note="aylik"] { display: none !important; } html[data-rp-plan="yillik"] [data-rp-price="yillik"] { display: flex !important; } html[data-rp-plan="yillik"] [data-rp-note="yillik"] { display: inline !important; } /* Seçicinin aktif düğmesi (tasarımdaki aktif/pasif inline stillerin karşılığı) */ html:not([data-rp-plan="yillik"]) .rp-planwrap [data-rp-plan-btn="aylik"], html[data-rp-plan="yillik"] .rp-planwrap [data-rp-plan-btn="yillik"] { background: var(--respoud-blue) !important; color: #fff !important; box-shadow: var(--shadow-xs); } .rp-planwrap [data-rp-plan-btn] { background: transparent; color: var(--fg-3); } /* ------------------------------------------------------------ RESPONSIVE — artık tamamen `responsive.css`'te (Claude Design'ın ürettiği class tabanlı katman: .rp-head/.rp-dnav/.rp-mnav/.rp-hero/ .rp-herowrap/.rp-split/.rp-g2../.rp-shot/.rp-foot ...). Tüm sayfalar o sisteme geçtiği için buradaki eski inline-substring kuralları ve .rp-hero-legacy/.rp-logo-grid katmanı kaldırıldı. Aşağıdaki tek kural bir ISTISNA: tasarımın kendi markup'ında kalan mobil taşma yaması. Çözüm kartlarındaki 3'lü istatistik şeridi (ör. "ZPL/EPL · On/Off · Merkezi") 375px'te ~14px taşıp son kutucuğu kırpıyor (flex çocukları varsayılan min-width:auto ile küçülmüyor). responsive.css'i designer'ın ürettiği hâliyle bıraktığım için düzeltme burada duruyor; tasarım tarafında çözülürse bu blok silinebilir. ------------------------------------------------------------ */ @media (max-width: 560px) { .rp-card div[style*="flex:1"][style*="padding:16px 12px"] { min-width: 0; padding-left: 8px !important; padding-right: 8px !important; } .rp-card div[style*="flex:1"][style*="padding:16px 12px"] .tnum { font-size: 16px !important; } } /* ============================================================ LEGAL / LONG-FORM TEXT PAGES (KVKK, Gizlilik, Çerezler) Readable typography for dense text bodies. h2 size is forced so responsive.css's global h2 rule doesn't enlarge it on mobile. ============================================================ */ .rp-legal { font-size: 15px; line-height: 1.7; color: var(--fg-2); } .rp-legal h2 { font: 700 19px/1.3 var(--font-display) !important; letter-spacing: -0.01em; color: var(--fg-1); margin: 36px 0 12px; } .rp-legal h2:first-child { margin-top: 0; } .rp-legal p { margin: 0 0 14px; } .rp-legal ul { margin: 0 0 16px; padding-left: 20px; } .rp-legal li { margin: 0 0 8px; } .rp-legal a { color: var(--respoud-blue); font-weight: 500; } .rp-legal strong { color: var(--fg-1); font-weight: 600; } .rp-legal .rp-legal-meta { display: block; font-size: 13px; color: var(--fg-3); margin: 0 0 4px; } /* ============================================================ CONSENT MODAL — native (KVKK onay penceresi) ============================================================ */ .rp-modal { width: min(660px, 92vw); max-height: 85vh; padding: 0; border: 1px solid var(--border-2); border-radius: 18px; box-shadow: var(--shadow-xl); background: var(--bg-card); color: var(--fg-2); overflow: hidden; } .rp-modal::backdrop { background: rgba(17,20,28,0.55); backdrop-filter: saturate(140%) blur(2px); } .rp-modal-card { display: flex; flex-direction: column; max-height: 85vh; } .rp-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--border-2); flex-shrink: 0; } .rp-modal-title { font: 700 17px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1); margin: 0; } .rp-modal-x { width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease-standard); } .rp-modal-x:hover { background: var(--neutral-100); color: var(--fg-1); } .rp-modal-body { padding: 22px; overflow: auto; -webkit-overflow-scrolling: touch; } .rp-modal-foot { display: flex; gap: 12px; justify-content: flex-end; flex-shrink: 0; padding: 16px 22px; border-top: 1px solid var(--border-2); background: var(--bg-card); } @media (max-width: 560px) { .rp-modal-foot { flex-direction: column-reverse; } .rp-modal-foot > button { width: 100%; } }