/* Başarı Bilgisayar — site styles * Design tokens + component classes adapted from the Salvo design system * used in the original Claude Design canvas for this project. */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap"); :root { --background: #FAFBFD; --foreground: #0F172A; --surface: #FFFFFF; --surface-muted: #F1F4F9; --surface-hover: #ECEFF5; --primary: #2563EB; --primary-hover: #1D4ED8; --primary-foreground: #FFFFFF; --muted-foreground: #475569; --text-subtle: #64748B; --success: #16A34A; --success-subtle: #DCFCE7; --warning: #B45309; --border: #E3E8EF; --border-strong: #CDD5DF; --focus-ring: #2563EB; --color-background: var(--background); --color-foreground: var(--foreground); --color-surface: var(--surface); --color-primary: var(--primary); --color-primary-hover: var(--primary-hover); --color-primary-foreground: var(--primary-foreground); --color-muted-foreground: var(--muted-foreground); --color-text-subtle: var(--text-subtle); --color-success: var(--success); --color-success-subtle: var(--success-subtle); --color-warning: var(--warning); --color-border: var(--border); --color-border-strong: var(--border-strong); --color-focus-ring: var(--focus-ring); --font-sans: "Geist", system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 2px 0 rgb(16 24 40 / 0.06); --shadow-md: 0 4px 12px -2px rgb(16 24 40 / 0.10); } * { box-sizing: border-box; } body { margin: 0; background: #EDF0F5; color: var(--color-foreground); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; } img { max-width: 100%; } :where(a, button, input, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } /* ── Language toggle ─────────────────────────────────────────────── */ /* Scoped to descendants of body — the active lang-* class also lives on itself (to set the lang attribute styling hook), and a bare ".lang-en { display: none }" would match that element too, collapsing the whole document. */ body .lang-tr, body .lang-en, body .lang-ru { display: none; } html.lang-tr body .lang-tr, html.lang-en body .lang-en, html.lang-ru body .lang-ru { display: inline; } .lang-switch { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); } .lang-switch button { border: 0; cursor: pointer; border-radius: 999px; padding: 6px 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; background: transparent; color: #475569; } .lang-switch button.active { background: var(--color-primary); color: #fff; } /* ── Buttons ──────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: var(--radius-lg); font-family: var(--font-sans); font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease; } .btn--sm { height: 36px; padding: 0 14px; font-size: 13px; } .btn--default { height: 44px; padding: 0 20px; font-size: 14px; } .btn--lg { height: 48px; padding: 0 24px; font-size: 15px; } .btn--primary { background: var(--color-primary); color: var(--color-primary-foreground); } .btn--primary:hover { background: var(--color-primary-hover); color: var(--color-primary-foreground); } .btn--secondary { border-color: var(--color-border); background: var(--color-surface); color: var(--color-foreground); } .btn--secondary:hover { background: var(--color-surface-hover, #ECEFF5); border-color: var(--color-border-strong); } .btn--dark { background: transparent; border-color: #243049; color: #F8FAFC; } .btn--dark:hover { background: rgb(255 255 255 / .06); } /* ── Badge ────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-md); border: 1px solid transparent; padding: 2px 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 1.4; } .badge--info { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); } .badge--success { background: var(--color-success-subtle); color: var(--color-success); } .badge--outline { border-color: var(--color-border); color: var(--color-foreground); } .badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } /* ── Card ─────────────────────────────────────────────────────────── */ .card { border-radius: var(--radius-xl); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); padding: 22px; display: flex; flex-direction: column; gap: 8px; } .card--review { padding: 24px; gap: 14px; } /* ── Layout ───────────────────────────────────────────────────────── */ .page { max-width: 1080px; margin: 0 auto; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; } .wrap { padding: 0 32px; } header.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 32px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 5; } .brand { display: flex; align-items: center; gap: 12px; } .brand__mark { width: 34px; height: 34px; border-radius: var(--radius-sm); background: #1E293B; color: #EAE7B1; display: grid; place-items: center; font-family: var(--font-mono); font-size: 18px; font-weight: 700; } .brand__name { display: flex; flex-direction: column; line-height: 1.15; } .brand__title { font-size: 16px; font-weight: 560; letter-spacing: -.01em; color: var(--color-foreground); } .brand__sub { font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-subtle); } nav.site-nav { display: flex; align-items: center; gap: 22px; } nav.site-nav a.nav-link { font-size: 14px; color: var(--color-muted-foreground); } /* ── Hero ─────────────────────────────────────────────────────────── */ .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; padding: 56px 32px 48px; align-items: center; } .hero__eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary); } .hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-primary); } .hero h1 { margin: 0; font-size: 44px; line-height: 1.08; letter-spacing: -.02em; font-weight: 560; color: var(--color-foreground); text-wrap: pretty; } .hero p.lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-muted-foreground); max-width: 46ch; text-wrap: pretty; } .hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .hero .stats { display: flex; gap: 28px; padding-top: 8px; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; gap: 2px; } .stat__value { font-family: var(--font-mono); font-size: 22px; font-weight: 560; color: var(--color-foreground); font-variant-numeric: tabular-nums; } .stat__label { font-size: 13px; color: var(--color-text-subtle); } .hero__media { position: relative; } .hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); border: 1px solid var(--color-border); display: block; } .hero__media-tag { position: absolute; left: -16px; bottom: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; max-width: calc(100% + 32px); } .hero__media-tag strong { font-size: 14px; font-weight: 560; color: var(--color-foreground); } .hero__media-tag span.role { font-size: 13px; color: var(--color-muted-foreground); } /* ── Sections ─────────────────────────────────────────────────────── */ section.block { padding: 48px 32px; border-top: 1px solid var(--color-border); } section.block.surface { background: var(--color-surface); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; } h2.section-title { margin: 0; font-size: 28px; font-weight: 560; letter-spacing: -.02em; color: var(--color-foreground); } p.section-note { margin: 0 0 24px; font-size: 14px; color: var(--color-muted-foreground); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card h3 { margin: 0; font-size: 16px; font-weight: 560; color: var(--color-foreground); } .card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-muted-foreground); } .photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); } .photo-strip img { width: 100%; height: 220px; object-fit: cover; display: block; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .step { display: flex; flex-direction: column; gap: 10px; } .step__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em; color: var(--color-primary); } .step h3 { margin: 0; font-size: 20px; font-weight: 560; color: var(--color-foreground); } .step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-muted-foreground); } .price-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; } .price-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); } .price-row .label { font-size: 15px; color: var(--color-foreground); } .price-row .value { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--color-foreground); } .price-row .value.free { color: var(--color-success); font-family: var(--font-mono); } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .stars { font-family: var(--font-mono); font-size: 14px; color: var(--color-warning); } .review-quote { font-size: 15px; line-height: 1.6; color: var(--color-foreground); margin: 0; } .review-author { font-size: 13px; color: var(--color-text-subtle); } .visit { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .visit-info { display: flex; flex-direction: column; gap: 20px; } .field { display: flex; flex-direction: column; gap: 4px; } .field .field-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-subtle); } .field .field-value { font-size: 16px; line-height: 1.5; color: var(--color-foreground); } .field a.field-value { font-family: var(--font-mono); } .map-card { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-background); } .map-card iframe { width: 100%; height: 260px; border: 0; display: block; } .map-card__footer { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--color-border); } .map-card__footer span.note { font-size: 13px; color: var(--color-muted-foreground); } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; } .faq-item { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--color-border); } .faq-item h3 { margin: 0; font-size: 15px; font-weight: 560; color: var(--color-foreground); } .faq-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-muted-foreground); } footer.site-footer { padding: 40px 32px; background: #0C1120; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .site-footer .brand-block { display: flex; flex-direction: column; gap: 6px; } .site-footer .brand-block .name { font-size: 20px; font-weight: 560; color: #F8FAFC; } .site-footer .brand-block .tag { font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #94A3B8; } .site-footer .brand-block .addr { font-size: 13px; color: #64748B; margin-top: 8px; } /* ── Responsive ───────────────────────────────────────────────────── */ @media (max-width: 900px) { .hero, .visit { grid-template-columns: 1fr; } .services-grid, .steps, .reviews-grid { grid-template-columns: 1fr 1fr; } .photo-strip { grid-template-columns: 1fr; } .price-list, .faq-grid { grid-template-columns: 1fr; } nav.site-nav .nav-link { display: none; } } @media (max-width: 600px) { .services-grid, .steps, .reviews-grid { grid-template-columns: 1fr; } .wrap, section.block, .hero, header.site-header, footer.site-footer { padding-left: 20px; padding-right: 20px; } .hero h1 { font-size: 32px; } header.site-header { flex-wrap: wrap; gap: 12px; } }