/* ================================================================== Sarıkaya Perfores — style.css Endüstriyel tasarım · marka kırmızısı vurgu Açık ve koyu tema (bkz. README > Açık / koyu tema) ================================================================== */ /* ================================================================== Tokens Açık tema varsayılan; koyu tema hem sistem tercihiyle hem de ile devreye girer. ================================================================== */ :root{ /* --- tema değişkenleri: AÇIK --- */ --bg: #f2f4f7; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #eef1f5; --line: rgba(16,20,26,.11); --line-2: rgba(16,20,26,.22); --text: #1a1f26; --text-2: #454f5b; --muted: #5d6672; --strong: #0d1116; --accent: #cf0f19; --accent-2: #a90c14; --accent-dim:rgba(207,15,25,.10); --steel: #5a6470; --header-bg: linear-gradient(to bottom, rgba(255,255,255,.94), rgba(255,255,255,.62)); --header-bg-stuck: rgba(255,255,255,.97); --nav-panel-bg: rgba(255,255,255,.99); --footer-bg: #e7eaee; --hero-a: #ffffff; --hero-b: #eaeef3; --hero-glow: rgba(207,15,25,.10); --hero-photo-op: .22; --hero-photo-filter: saturate(.25) contrast(1.18) brightness(1.04); --perf-dot: rgba(16,20,26,.07); --perf-line: rgba(16,20,26,.055); --pat-dot: rgba(16,20,26,.15); --pat-line: rgba(16,20,26,.10); --tint: rgba(16,20,26,.025); --stats-bg: rgba(255,255,255,.93); --tint-2: rgba(16,20,26,.05); --shadow: 0 18px 48px rgba(16,20,26,.14); /* --- temadan bağımsız --- */ --ff-head: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --wrap: 1200px; --pad: clamp(1rem, 4vw, 2.5rem); --r: 10px; --header-h: 76px; color-scheme: light; } /* --- tema değişkenleri: KOYU --- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg: #0d1013; --bg-2: #12161b; --surface: #171c22; --surface-2: #1e242c; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --text: #e9edf2; --text-2: #b3bcc7; --muted: #8b95a1; --strong: #ffffff; --accent: #e1121c; --accent-2: #ff2a35; --accent-dim:rgba(225,18,28,.14); --steel: #9aa5b1; --header-bg: linear-gradient(to bottom, rgba(13,16,19,.92), rgba(13,16,19,.55)); --header-bg-stuck: rgba(13,16,19,.96); --nav-panel-bg: rgba(13,16,19,.985); --footer-bg: #0a0d10; --hero-a: #0d1013; --hero-b: #12161b; --hero-glow: rgba(225,18,28,.16); --hero-photo-op: .42; --hero-photo-filter: saturate(.6) contrast(1.02) brightness(.85); --perf-dot: rgba(255,255,255,.055); --perf-line: rgba(255,255,255,.05); --pat-dot: rgba(255,255,255,.085); --pat-line: rgba(255,255,255,.06); --tint: rgba(255,255,255,.02); --stats-bg: rgba(255,255,255,.02); --tint-2: rgba(255,255,255,.05); --shadow: 0 18px 48px rgba(0,0,0,.45); color-scheme: dark; } } /* Kullanıcı elle koyu temayı seçtiğinde (sistem açık olsa bile) */ :root[data-theme="dark"]{ --bg: #0d1013; --bg-2: #12161b; --surface: #171c22; --surface-2: #1e242c; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --text: #e9edf2; --text-2: #b3bcc7; --muted: #8b95a1; --strong: #ffffff; --accent: #e1121c; --accent-2: #ff2a35; --accent-dim:rgba(225,18,28,.14); --steel: #9aa5b1; --header-bg: linear-gradient(to bottom, rgba(13,16,19,.92), rgba(13,16,19,.55)); --header-bg-stuck: rgba(13,16,19,.96); --nav-panel-bg: rgba(13,16,19,.985); --footer-bg: #0a0d10; --hero-a: #0d1013; --hero-b: #12161b; --hero-glow: rgba(225,18,28,.16); --hero-photo-op: .42; --hero-photo-filter: saturate(.6) contrast(1.02) brightness(.85); --perf-dot: rgba(255,255,255,.055); --perf-line: rgba(255,255,255,.05); --pat-dot: rgba(255,255,255,.085); --pat-line: rgba(255,255,255,.06); --tint: rgba(255,255,255,.02); --stats-bg: rgba(255,255,255,.02); --tint-2: rgba(255,255,255,.05); --shadow: 0 18px 48px rgba(0,0,0,.45); color-scheme: dark; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--ff-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.no-scroll{ overflow:hidden; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; } ::selection{ background:var(--accent); color:#fff; } :focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; } .container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 var(--r) 0; } .skip-link:focus{ left:0; } /* Perfore doku — arka plan deseni */ .perf, .hero-bg{ background-image: radial-gradient(circle at center, var(--perf-dot) 1.1px, transparent 1.2px); background-size: 14px 14px; } /* ---------- Tipografi ---------- */ h1,h2,h3{ font-family:var(--ff-head); font-weight:700; line-height:1.08; letter-spacing:.005em; margin:0; } h1{ font-size:clamp(2.3rem, 5.4vw, 4.4rem); text-transform:uppercase; } h2{ font-size:clamp(1.85rem, 3.6vw, 3rem); text-transform:uppercase; } h3{ font-size:clamp(1.15rem, 1.7vw, 1.4rem); } p{ margin:0 0 1.05rem; } .eyebrow{ font-family:var(--ff-head); font-size:.94rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-2); margin:0 0 .55rem; display:flex; align-items:center; gap:.7rem; } .eyebrow::before{ content:''; width:34px; height:2px; background:var(--accent); flex:none; } em{ font-style:normal; color:var(--accent-2); } .note{ font-size:.86rem; color:var(--muted); margin-top:1rem; } /* ---------- Header ---------- */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h); display:flex; align-items:center; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease, height .25s ease; } .site-header.is-stuck{ background:var(--header-bg-stuck); border-bottom-color:var(--line); box-shadow:0 10px 30px rgba(0,0,0,.18); } .header-inner{ display:flex; align-items:center; gap:1.25rem; } .brand{ flex:none; display:block; } .brand img{ height:38px; width:auto; } .nav{ margin-left:auto; } .nav-list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:.15rem; } .nav-list a{ display:block; padding:.55rem .8rem; border-radius:6px; font-size:.83rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-2); transition:color .18s ease, background .18s ease; white-space:nowrap; } .nav-list a:hover{ color:var(--strong); background:var(--tint-2); } .nav-list a.is-current{ color:var(--strong); } .nav-list a.is-current::after{ content:''; display:block; height:2px; margin-top:5px; background:var(--accent); border-radius:2px; } .header-actions{ display:flex; align-items:center; gap:.85rem; flex:none; } .lang-switch{ display:flex; align-items:center; gap:.3rem; } .lang-btn{ background:none; border:0; cursor:pointer; padding:.3rem .35rem; font-family:var(--ff-head); font-size:1rem; font-weight:600; letter-spacing:.08em; color:var(--muted); transition:color .18s ease; } .lang-btn:hover{ color:var(--text); } .lang-btn.is-active{ color:var(--accent-2); } .lang-sep{ color:var(--line-2); } /* Tema değiştirici — aktif temaya göre tek ikon gösterilir */ .theme-btn{ flex:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--line-2); background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--text-2); padding:0; transition:color .18s ease, border-color .18s ease, background .18s ease; } .theme-btn:hover{ color:var(--accent-2); border-color:var(--accent); background:var(--accent-dim); } .theme-btn svg{ width:19px; height:19px; grid-area:1/1; } /* Açık temada ay ikonu (koyuya geç), koyu temada güneş ikonu (açığa geç) */ .theme-btn .ico-sun{ display:none; } .theme-btn .ico-moon{ display:block; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .ico-sun{ display:block; } :root:not([data-theme="light"]) .theme-btn .ico-moon{ display:none; } } :root[data-theme="dark"] .theme-btn .ico-sun{ display:block; } :root[data-theme="dark"] .theme-btn .ico-moon{ display:none; } :root[data-theme="light"] .theme-btn .ico-sun{ display:none; } :root[data-theme="light"] .theme-btn .ico-moon{ display:block; } .nav-toggle{ display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:8px; background:transparent; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .nav-toggle span{ display:block; width:19px; height:2px; background:var(--text); transition:transform .22s ease, opacity .22s ease; } .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero{ position:relative; padding-top: calc(var(--header-h) + clamp(3rem, 9vw, 7rem)); background: radial-gradient(1100px 600px at 78% -12%, var(--hero-glow), transparent 62%), linear-gradient(180deg, var(--hero-a) 0%, var(--hero-b) 62%, var(--hero-a) 100%); overflow:hidden; } /* Katalog kapağından alınan makro çekim — hero arka planı */ .hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; opacity:var(--hero-photo-op); filter:var(--hero-photo-filter); mask-image:linear-gradient(100deg, transparent 26%, rgba(0,0,0,.25) 48%, rgba(0,0,0,.8) 74%, #000 100%); -webkit-mask-image:linear-gradient(100deg, transparent 26%, rgba(0,0,0,.25) 48%, rgba(0,0,0,.8) 74%, #000 100%); pointer-events:none; } .hero-bg{ position:absolute; inset:0; opacity:.55; mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%); -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%); pointer-events:none; } .hero-inner{ position:relative; padding-bottom:clamp(3rem, 8vw, 6rem); max-width:1000px; } .hero h1{ margin-bottom:1.4rem; text-wrap:balance; } .hero-lead{ font-size:clamp(1.02rem, 1.4vw, 1.2rem); color:var(--text-2); max-width:66ch; } .hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem; } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.95rem 1.9rem; border-radius:6px; border:1px solid transparent; font-family:var(--ff-head); font-size:1.02rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:transform .16s ease, background .2s ease, border-color .2s ease, color .2s ease; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--accent); color:#fff; } .btn-primary:hover{ background:var(--accent-2); } .btn-ghost{ border-color:var(--line-2); color:var(--text); } .btn-ghost:hover{ border-color:var(--accent); color:var(--accent-2); background:var(--accent-dim); } .btn-link{ padding-inline:.4rem; color:var(--text-2); border-bottom:1px solid var(--line-2); border-radius:0; } .btn-link:hover{ color:var(--accent-2); border-bottom-color:var(--accent); } .hero-tag{ margin:1.4rem 0 0; font-family:var(--ff-head); font-size:1.05rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); } /* Stat şeridi */ .stats{ position:relative; border-top:1px solid var(--line); background:var(--stats-bg); } .stats-grid{ display:grid; grid-template-columns:repeat(5, 1fr); } .stat{ padding:1.6rem .6rem; text-align:center; border-left:1px solid var(--line); } .stat:first-child{ border-left:0; } .stat-num{ display:block; font-family:var(--ff-head); font-size:clamp(1.6rem, 3vw, 2.4rem); font-weight:700; color:var(--strong); line-height:1; } .stat-num i{ font-style:normal; font-size:.5em; color:var(--accent-2); margin-left:.25em; } .stat-label{ display:block; margin-top:.5rem; font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); } /* ================================================================== Bölüm desenleri Her bölümün arka planı, katalogdaki GERÇEK bir delik deseninin dizilimini taklit eder — desen jenerik değil, firmanın kendi ürünü. Bölümün konusuyla eşleşecek şekilde seçildi: Hakkımızda SP1 ø1,5 · 60° üçgen — en klasik desen, kuruluştan beri Neden Biz SP8 ø1,5 · 45° eşkenar — kalıphane / zımba dizilimi Ürünler SP4 ø1,25 · 90° kare — kataloğun en ince deseni Uygulamalar SP14 ø5 · 60° geniş — cephe ve mimaride kullanılan iri desen Kapasite teknik resim ızgarası — föylerdeki ölçülendirme dili Vizyon SP18 ø5 · 90° seyrek — en açık, en ferah dizilim Ekip SP11 ø2,5 · 90° — merkezden dağılan İletişim SP19 ø1,5 · 60° sık — köşede yoğunlaşan Tümü --pat-dot / --pat-line token'ına bağlıdır; açık ve koyu temada aynı yoğunlukta durur. Bir bölümün desenini değiştirmek için sadece ilgili ::before kuralını düzenleyin. ================================================================== */ .section{ position:relative; overflow:hidden; } .section > .container{ position:relative; z-index:1; } .section::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; } /* --- Hakkımızda — SP1: ø1,5 mm · 3,46 × 2 · 60° üçgen dizilim --- */ #hakkimizda::before{ background-image: radial-gradient(circle, var(--pat-dot) 1.35px, transparent 1.45px), radial-gradient(circle, var(--pat-dot) 1.35px, transparent 1.45px); background-size: 22px 38px; background-position: 0 0, 11px 19px; mask-image: linear-gradient(225deg, #000 0%, transparent 46%); -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 46%); } /* --- Neden Biz — SP8: ø1,5 mm · 4 × 4 · 45° eşkenar dizilim (kalıphane) --- */ #neden::before{ background-image: radial-gradient(circle, var(--pat-dot) 1.3px, transparent 1.4px), radial-gradient(circle, var(--pat-dot) 1.3px, transparent 1.4px); background-size: 24px 24px; background-position: 0 0, 12px 12px; mask-image: linear-gradient(135deg, #000 0%, transparent 44%); -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 44%); } /* --- Ürünler — SP4: ø1,25 mm · 1,75 × 1,75 · 90° (kataloğun en ince deseni) --- */ #urunler::before{ background-image: radial-gradient(circle, var(--pat-dot) 1px, transparent 1.1px); background-size: 13px 13px; mask-image: linear-gradient(315deg, #000 0%, transparent 42%); -webkit-mask-image: linear-gradient(315deg, #000 0%, transparent 42%); } /* --- Uygulamalar — SP14: ø5 mm · 17,32 × 10 · 60° (cephe ve mimaride kullanılan iri desen) --- */ #uygulamalar::before{ background-image: radial-gradient(circle, var(--pat-dot) 2.4px, transparent 2.6px), radial-gradient(circle, var(--pat-dot) 2.4px, transparent 2.6px); background-size: 40px 70px; background-position: 0 0, 20px 35px; mask-image: linear-gradient(225deg, #000 0%, transparent 50%); -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 50%); } /* --- Kapasite — teknik resim ızgarası + ölçülendirme çizgileri --- */ #kapasite::before{ background-image: linear-gradient(var(--pat-line) 1px, transparent 1px), linear-gradient(90deg, var(--pat-line) 1px, transparent 1px), radial-gradient(circle, var(--pat-dot) 1.6px, transparent 1.7px); background-size: 48px 48px, 48px 48px, 48px 48px; background-position: 0 0, 0 0, 24px 24px; mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%); } /* --- Vizyon — SP18: ø5 mm · 17 × 17 · 90° (en seyrek, en ferah dizilim) --- */ #vizyon::before{ background-image: radial-gradient(circle, var(--pat-dot) 2.6px, transparent 2.8px); background-size: 52px 52px; mask-image: linear-gradient(135deg, #000 0%, transparent 52%); -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 52%); } /* --- Ekip — SP11: ø2,5 mm · 5,5 × 5,5 · 90°, merkezden dağılan --- */ #ekip::before{ background-image: radial-gradient(circle, var(--pat-dot) 1.6px, transparent 1.7px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 0%, transparent 72%); } /* --- SSS — SP2: ø2 mm · 4,85 × 2,8 · 60° --- */ #sss::before{ background-image: radial-gradient(circle, var(--pat-dot) 1.6px, transparent 1.7px), radial-gradient(circle, var(--pat-dot) 1.6px, transparent 1.7px); background-size: 28px 48px; background-position: 0 0, 14px 24px; mask-image: linear-gradient(315deg, #000 0%, transparent 46%); -webkit-mask-image: linear-gradient(315deg, #000 0%, transparent 46%); } /* --- İletişim — SP19: ø1,5 mm · 5,54 × 3,2 · 60° (sık dizilim) --- */ #iletisim::before{ background-image: radial-gradient(circle, var(--pat-dot) 1.2px, transparent 1.3px), radial-gradient(circle, var(--pat-dot) 1.2px, transparent 1.3px); background-size: 18px 31px; background-position: 0 0, 9px 15.5px; mask-image: linear-gradient(45deg, #000 0%, transparent 48%); -webkit-mask-image: linear-gradient(45deg, #000 0%, transparent 48%); } /* ---------- Section ---------- */ .section{ padding:clamp(4rem, 8vw, 7.5rem) 0; } .section-alt{ background:var(--bg-2); border-block:1px solid var(--line); } .section-head{ max-width:74ch; margin-bottom:clamp(2.2rem, 4vw, 3.4rem); } .section-head h2{ margin-bottom:.9rem; text-wrap:balance; } .section-sub{ color:var(--text-2); } /* reveal */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* ---------- Hakkımızda ---------- */ .about-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:clamp(1.8rem, 4vw, 3.5rem); align-items:start; } .about-text p{ color:var(--text-2); } .pull-quote{ margin:1.8rem 0 0; padding:1.1rem 0 1.1rem 1.4rem; border-left:3px solid var(--accent); font-family:var(--ff-head); font-size:clamp(1.2rem,2vw,1.6rem); font-weight:600; color:var(--strong); line-height:1.3; } .about-figure{ margin:0; } .about-figure img{ width:100%; border-radius:var(--r); border:1px solid var(--line); filter:saturate(.85) contrast(1.05); } .about-figure figcaption{ margin-top:.7rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } /* Timeline */ .timeline{ list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); } .timeline li{ padding:1.8rem 1.4rem 0 0; position:relative; } .timeline li::before{ content:''; position:absolute; top:-5px; left:0; width:9px; height:9px; background:var(--accent); border-radius:50%; } .timeline li + li{ padding-left:1.4rem; } .tl-year{ display:block; font-family:var(--ff-head); font-size:1.5rem; font-weight:700; color:var(--accent-2); letter-spacing:.04em; margin-bottom:.35rem; } .timeline h3{ margin-bottom:.4rem; } .timeline p{ font-size:.92rem; color:var(--muted); margin:0; } /* ---------- Kartlar ---------- */ .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem 1.5rem; transition:border-color .22s ease, transform .22s ease, background .22s ease; } .card:hover{ border-color:var(--line-2); transform:translateY(-3px); background:var(--surface-2); } .card-ico{ width:46px; height:46px; border-radius:8px; display:grid; place-items:center; background:var(--accent-dim); color:var(--accent-2); margin-bottom:1.1rem; } .card-ico svg{ width:24px; height:24px; stroke-linecap:round; stroke-linejoin:round; } .card h3{ margin-bottom:.6rem; } .card p{ font-size:.92rem; color:var(--muted); margin:0; } /* ---------- Ürünler ---------- */ .filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; } .filter{ background:transparent; border:1px solid var(--line-2); border-radius:99px; padding:.55rem 1.25rem; cursor:pointer; font-size:.82rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-2); transition:.18s ease; } .filter:hover{ color:var(--strong); border-color:var(--steel); } .filter.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; } .grid-products{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1.1rem; } .product{ display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .2s ease, transform .2s ease; } .product:hover{ border-color:var(--accent); transform:translateY(-3px); } .product[hidden]{ display:none; } .p-media{ position:relative; display:block; aspect-ratio:4/3; background:#fff; overflow:hidden; } .p-media img{ width:100%; height:100%; object-fit:contain; padding:.2rem; transition:transform .35s ease; } .product:hover .p-media img{ transform:scale(1.04); } .p-badge{ position:absolute; right:.55rem; bottom:.55rem; background:var(--accent); color:#fff; border-radius:4px; font-family:var(--ff-head); font-size:.85rem; font-weight:700; letter-spacing:.04em; padding:.1rem .45rem; } .p-body{ display:block; padding:.95rem 1rem 1.15rem; } .p-name{ display:block; font-family:var(--ff-head); font-size:1.22rem; font-weight:700; color:var(--strong); line-height:1.15; margin-bottom:.3rem; } .p-desc{ display:block; font-size:.79rem; color:var(--muted); line-height:1.5; } /* ---------- Uygulama alanları ---------- */ .apps{ display:grid; grid-template-columns:repeat(5, 1fr); gap:1rem; } .app{ margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .22s ease, transform .22s ease; } .app:hover{ border-color:var(--accent); transform:translateY(-3px); } .app img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.9) contrast(1.04); transition:transform .4s ease; } .app:hover img{ transform:scale(1.05); } .app figcaption{ padding:.9rem 1rem 1.1rem; } .app figcaption strong{ display:block; font-family:var(--ff-head); font-size:1.12rem; font-weight:700; color:var(--strong); line-height:1.15; margin-bottom:.22rem; } .app figcaption span{ display:block; font-size:.78rem; color:var(--muted); line-height:1.45; } /* ---------- Katalog kartı ---------- */ .catalog-card{ display:flex; align-items:center; gap:1.1rem; margin-top:1.8rem; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r); padding:1.15rem 1.3rem; transition:border-color .2s ease, background .2s ease, transform .2s ease; } .catalog-card:hover{ background:var(--surface-2); border-color:var(--line-2); border-left-color:var(--accent-2); transform:translateY(-2px); } .catalog-ico{ flex:none; width:44px; height:44px; border-radius:8px; display:grid; place-items:center; background:var(--accent-dim); color:var(--accent-2); } .catalog-ico svg{ width:22px; height:22px; } .catalog-txt strong{ display:block; font-family:var(--ff-head); font-size:1.15rem; font-weight:700; color:var(--strong); letter-spacing:.03em; margin-bottom:.15rem; } .catalog-txt span{ display:block; font-size:.82rem; color:var(--muted); line-height:1.45; } /* ---------- Kapasite ---------- */ .spec-highlights{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-bottom:2.6rem; } .spec-hl{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r); padding:1.35rem 1.4rem; } .spec-hl-num{ display:block; font-family:var(--ff-head); font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:700; color:var(--strong); line-height:1.1; margin-bottom:.3rem; } .spec-hl span:last-child{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .capab{ margin-bottom:2.6rem; } .capab h3{ margin-bottom:1rem; } .capab-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem 2rem; } .capab-list li{ position:relative; padding-left:1.7rem; color:var(--text-2); font-size:.95rem; } .capab-list li::before{ content:''; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); } .table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); } .spec-table{ width:100%; border-collapse:collapse; min-width:660px; font-size:.9rem; } .spec-table caption{ text-align:left; padding:1.1rem 1.2rem .2rem; font-family:var(--ff-head); font-size:1.15rem; font-weight:600; color:var(--strong); letter-spacing:.04em; } .spec-table th, .spec-table td{ padding:.72rem 1.2rem; text-align:left; } .spec-table thead th{ font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line-2); font-weight:600; white-space:nowrap; } .spec-table tbody tr{ border-bottom:1px solid var(--line); } .spec-table tbody tr:last-child{ border-bottom:0; } .spec-table tbody tr:hover{ background:var(--tint); } .spec-table tbody th{ font-family:var(--ff-head); font-size:1.1rem; font-weight:700; color:var(--accent-2); letter-spacing:.05em; } .spec-table td{ color:var(--text-2); white-space:nowrap; } .spec-table td.num{ color:var(--strong); font-weight:600; } /* ---------- Kalite belgesi ---------- */ .quality{ display:flex; gap:1.6rem; align-items:flex-start; margin-top:2.6rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem 1.9rem; } .quality-badge{ flex:none; width:92px; height:92px; border-radius:50%; display:grid; place-content:center; text-align:center; border:2px solid var(--accent); background:var(--accent-dim); color:var(--strong); font-family:var(--ff-head); line-height:1; } .quality-badge span{ font-size:.82rem; letter-spacing:.22em; color:var(--accent-2); } .quality-badge strong{ font-size:1.75rem; font-weight:700; margin-top:.2rem; } .quality-body h3{ margin-bottom:.5rem; } .quality-body > p{ color:var(--text-2); margin-bottom:1.2rem; max-width:62ch; } .quality-meta{ display:grid; grid-template-columns:repeat(3, auto); gap:.9rem 2.4rem; margin:0; justify-content:start; } .quality-meta > div{ min-width:0; } .quality-meta .quality-scope{ grid-column:1 / -1; } .quality-meta dt{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.18rem; } .quality-meta dd{ margin:0; color:var(--text); font-size:.94rem; } .quality-meta .quality-scope dd{ color:var(--text-2); } /* ---------- Sık sorulan sorular ---------- */ .faq{ display:grid; gap:.7rem; max-width:none; } .faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .2s ease; } .faq-item[open]{ border-color:var(--line-2); } .faq-item:hover{ border-color:var(--line-2); } .faq-item summary{ list-style:none; cursor:pointer; padding:1.15rem 3rem 1.15rem 1.4rem; position:relative; font-family:var(--ff-head); font-size:clamp(1.08rem,1.5vw,1.28rem); font-weight:600; color:var(--strong); line-height:1.25; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:''; position:absolute; right:1.4rem; top:50%; width:11px; height:11px; margin-top:-7px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .22s ease; } .faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; } .faq-item summary:hover{ color:var(--accent-2); } .faq-body{ padding:0 1.4rem 1.35rem; } .faq-body p{ color:var(--text-2); margin:0 0 .8rem; max-width:76ch; } .faq-body p:last-child{ margin-bottom:0; } .faq-body strong{ color:var(--strong); font-weight:600; } .faq-formula{ font-family:var(--ff-head); font-size:1.05rem; letter-spacing:.02em; background:var(--accent-dim); border-left:3px solid var(--accent); padding:.7rem 1rem; border-radius:0 6px 6px 0; color:var(--strong) !important; } .faq-link{ color:var(--accent-2); font-weight:600; border-bottom:1px solid transparent; } .faq-link:hover{ border-bottom-color:var(--accent); } /* ---------- Ağırlık hesaplama aracı ---------- */ .calc{ margin-top:2.6rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.9rem 1.9rem 1.6rem; } .calc-head h3{ margin-bottom:.5rem; } .calc-head p{ color:var(--text-2); font-size:.95rem; max-width:70ch; } .calc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin:1.4rem 0 1.5rem; } .calc-field{ display:flex; flex-direction:column; gap:.35rem; min-width:0; } .calc-field-wide{ grid-column:span 4; } .calc-field > span{ font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); } .calc-field input, .calc-field select{ font:inherit; font-size:.95rem; width:100%; padding:.65rem .8rem; border-radius:6px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); transition:border-color .18s ease; } .calc-field input:focus, .calc-field select:focus{ border-color:var(--accent); outline:none; } .calc-out{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .calc-res{ background:var(--surface-2); padding:1.1rem 1.2rem; } .calc-res-main{ background:var(--accent-dim); } .calc-res-label{ display:block; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; } .calc-res strong{ display:block; font-family:var(--ff-head); font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:700; color:var(--strong); line-height:1.1; } .calc-res-main strong{ color:var(--accent-2); } /* ---------- Vizyon ---------- */ .vm-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; } .vm{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.9rem; } .vm-tag{ display:inline-block; margin-bottom:1rem; padding:.28rem .85rem; border-radius:99px; background:var(--accent-dim); color:var(--accent-2); font-family:var(--ff-head); font-size:.9rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; } .vm p{ margin:0; color:var(--text-2); font-size:1rem; } .values{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; } .value{ border:1px solid var(--line-2); border-radius:99px; padding:.45rem 1.15rem; font-size:.83rem; letter-spacing:.06em; color:var(--text-2); } /* ---------- Ekip ---------- */ .team{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; } .member{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.6rem; text-align:center; } .member-initials{ display:grid; place-items:center; width:66px; height:66px; margin:0 auto 1.1rem; border-radius:50%; background:var(--accent-dim); border:1px solid var(--accent); font-family:var(--ff-head); font-size:1.5rem; font-weight:700; color:var(--accent-2); letter-spacing:.05em; } .member h3{ margin-bottom:.25rem; } .member-role{ margin:0; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } /* ---------- İletişim ---------- */ .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:start; } .legal-name{ font-family:var(--ff-head); font-size:1.22rem; font-weight:600; color:var(--strong); line-height:1.25; margin-bottom:1.6rem; } .contact-list{ list-style:none; margin:0 0 2rem; padding:0; } .contact-list li{ display:grid; grid-template-columns:150px 1fr; gap:1rem; padding:.85rem 0; border-top:1px solid var(--line); } .contact-list li:last-child{ border-bottom:1px solid var(--line); } .ci-label{ font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); padding-top:.2rem; } .ci-value{ color:var(--text); } .ci-value a{ border-bottom:1px solid var(--line-2); transition:.18s ease; } .ci-value a:hover{ color:var(--accent-2); border-bottom-color:var(--accent); } .contact-cta{ display:flex; flex-wrap:wrap; gap:.8rem; } .contact-map{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--surface); } .contact-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.3) contrast(1.05); } /* ---------- Footer ---------- */ .site-footer{ background:var(--footer-bg); border-top:1px solid var(--line); } .footer-inner{ display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:2rem; padding-block:clamp(2.5rem,5vw,3.5rem); } .footer-brand img{ height:36px; width:auto; margin-bottom:1rem; } .footer-brand p{ font-size:.9rem; color:var(--muted); max-width:42ch; margin:0; } .footer-nav{ display:flex; flex-direction:column; gap:.55rem; } .footer-nav a{ font-size:.87rem; color:var(--text-2); transition:color .18s ease; } .footer-nav a:hover{ color:var(--accent-2); } .footer-contact{ display:flex; flex-direction:column; gap:.55rem; } .footer-contact a{ font-size:.87rem; color:var(--text-2); transition:color .18s ease; } .footer-contact a:hover{ color:var(--accent-2); } .footer-bottom{ border-top:1px solid var(--line); padding-block:1.2rem; } .footer-bottom p{ margin:0; font-size:.8rem; color:var(--muted); } /* ---------- Floating ---------- */ .fab{ position:fixed; z-index:90; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:0; box-shadow:var(--shadow); transition:transform .18s ease, opacity .25s ease, visibility .25s; } .fab:hover{ transform:translateY(-3px); } .fab svg{ width:26px; height:26px; } .fab-wa{ right:20px; bottom:20px; background:#25d366; color:#0a0d10; } .fab-top{ right:20px; bottom:84px; background:var(--surface-2); color:var(--text); border:1px solid var(--line-2); opacity:0; visibility:hidden; } .fab-top.is-visible{ opacity:1; visibility:visible; } .fab-top svg{ width:20px; height:20px; stroke-linecap:round; stroke-linejoin:round; } /* ---------- Lightbox ---------- */ /* Her iki temada da koyu zeminli; içindeki renkler bilerek tema token.ına bağlı değil. */ .lightbox{ position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; gap:1rem; background:rgba(6,8,10,.94); padding:clamp(1rem,4vw,3rem); } .lightbox[hidden]{ display:none; } .lb-figure{ margin:0; max-width:min(900px, 100%); max-height:100%; display:flex; flex-direction:column; gap:.9rem; } .lb-figure img{ max-height:74vh; width:auto; margin:0 auto; border-radius:var(--r); background:#fff; object-fit:contain; } .lb-figure figcaption{ text-align:center; } .lb-figure figcaption strong{ display:block; font-family:var(--ff-head); font-size:1.5rem; font-weight:700; color:#fff; letter-spacing:.04em; } .lb-figure figcaption span{ display:block; font-size:.86rem; color:#9aa5b1; margin-top:.2rem; } .lb-close{ position:absolute; top:14px; right:18px; width:44px; height:44px; background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:8px; font-size:1.9rem; line-height:1; cursor:pointer; color:#e9edf2; } .lb-close:hover{ border-color:#e1121c; color:#ff2a35; } .lb-nav{ flex:none; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); font-size:2rem; line-height:1; cursor:pointer; color:#e9edf2; display:grid; place-items:center; } .lb-nav:hover{ background:#e1121c; border-color:#e1121c; color:#fff; } /* ================================================================== Responsive ================================================================== */ @media (max-width: 1100px){ .apps{ grid-template-columns:repeat(3,1fr); } .cards{ grid-template-columns:repeat(2,1fr); } .spec-highlights{ grid-template-columns:repeat(2,1fr); } .timeline{ grid-template-columns:repeat(2,1fr); row-gap:1.6rem; } .timeline li + li{ padding-left:0; } .timeline li:nth-child(even){ padding-left:1.4rem; } } @media (max-width: 980px){ .nav{ position:fixed; inset:var(--header-h) 0 auto 0; background:var(--nav-panel-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .3s ease; } .nav.is-open{ max-height:70vh; overflow-y:auto; } .nav-list{ flex-direction:column; align-items:stretch; gap:0; padding:.6rem var(--pad) 1.4rem; } .nav-list a{ padding:.85rem .2rem; font-size:.95rem; border-bottom:1px solid var(--line); } .nav-list a.is-current::after{ display:none; } .nav-list a.is-current{ color:var(--accent-2); } .nav-toggle{ display:flex; } .stats-grid{ grid-template-columns:repeat(3,1fr); } .stat:nth-child(4){ border-left:0; } .stat{ border-top:1px solid var(--line); } .stat:nth-child(-n+3){ border-top:0; } .about-grid{ grid-template-columns:1fr; } .about-figure{ order:-1; } .contact-grid{ grid-template-columns:1fr; } .vm-grid{ grid-template-columns:1fr; } .team{ grid-template-columns:1fr; } .footer-inner{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1 / -1; } } @media (max-width: 640px){ :root{ --header-h:66px; } .brand img{ height:32px; } .stats-grid{ grid-template-columns:repeat(2,1fr); } .stat{ border-left:0; border-top:1px solid var(--line); } .stat:nth-child(-n+2){ border-top:0; } .stat:nth-child(5){ grid-column:1 / -1; } .cards{ grid-template-columns:1fr; } .spec-highlights{ grid-template-columns:1fr; } .calc-grid{ grid-template-columns:repeat(2,1fr); } .calc-field-wide{ grid-column:span 2; } .calc-out{ grid-template-columns:1fr; } .capab-list{ grid-template-columns:1fr; } .quality{ flex-direction:column; gap:1.1rem; padding:1.5rem 1.3rem; } .quality-meta{ grid-template-columns:1fr 1fr; gap:.8rem 1.4rem; } .timeline{ grid-template-columns:1fr; } .timeline li:nth-child(even){ padding-left:0; } .grid-products{ grid-template-columns:repeat(2,1fr); gap:.75rem; } .p-body{ padding:.75rem .8rem 1rem; } .calc{ padding:1.4rem 1.2rem 1.2rem; } .calc-grid{ grid-template-columns:1fr; } .calc-field-wide{ grid-column:span 1; } .faq-item summary{ padding:1rem 2.6rem 1rem 1.1rem; } .faq-body{ padding:0 1.1rem 1.1rem; } .apps{ grid-template-columns:repeat(2,1fr); gap:.75rem; } .app figcaption{ padding:.7rem .8rem .9rem; } .catalog-card{ flex-direction:column; align-items:flex-start; gap:.8rem; } .contact-list li{ grid-template-columns:1fr; gap:.15rem; } .footer-inner{ grid-template-columns:1fr; } .hero-cta .btn{ flex:1 1 100%; } .lb-nav{ width:40px; height:40px; font-size:1.6rem; } .lightbox{ gap:.4rem; } } /* Yazdırma */ @media print{ .site-header, .fab, .filters, .contact-map, .lightbox{ display:none !important; } body{ background:#fff; color:#000; } }